/*************************** GLOBAL *********************************************************/
 
:root {
	--app-color: #c70000;
	--background-color: #dedede; 
	--text-color: rgb(10, 10, 10); 
	--text-color-sub: rgb(87, 87, 87); 
	--box-shadow: 1px 8px 8px rgba(0, 0, 0, 0.3);
	--border-radius: 10px;

	--header-height: 60px;
	--footer-height: 16rem; 

	--body-side-bar-width: 10%;

	--font-size-title: 1.8rem;
	--font-size-big: 1.2rem;
	--font-size: 1rem;
	--font-size-sub: 0.7rem;

	--background-color-card: rgb(255, 255, 255); 
	--margin-card: 0.8rem;
	--width-card: 16rem;

	--background-color-hover: rgba(179, 230, 248, 0.3); 
}
 
body {
	padding: 0; 
	margin: 0;

	font-size: var(--font-size);
	color: var(--text-color);
	font-family: 'Verdana';
}

a {
	text-decoration: none;
	color: var(--text-color);
}

.hidden {
	display: none !important;
}
.hidden-desktop {
	display: none !important;
}
.full-width {
	width: -webkit-fill-available;
	width: -moz-fill-available;  
} 

.text-title {
	font-size: var(--font-size-title);
}
.text-big {
	font-size: var(--font-size-big);
}
.text-sub {
	font-size: var(--font-size-sub);
} 
.text-color-app {
	color:var(--app-color);
} 
.bold {
	font-weight:bold;
}
.align-center {
	text-align: center;
}

.text-color-app 	{ color:var(--app-color); } 
.text-exelent 		{ color: rgb(1, 79, 170); } 
.text-good 			{ color: rgb(4, 133, 0); } 
.text-medium 		{ color: rgb(97, 112, 0); } 
.text-bad 			{ color: rgb(99 66 55);} 

.back-color-app 	{ background-color:var(--app-color); } 
.back-exelent 		{ background-color: rgb(1, 79, 170); } 
.back-good 			{ background-color: rgb(4, 133, 0); } 
.back-medium 		{ background-color: rgb(97, 112, 0); }  
.back-bad 			{ background-color: rgb(99 66 55); } 

 
.icon-star {
    background-image: url(/img/icons_az.png);
    -webkit-background-size: 115px 241px;
    background-size: 115px 241px;
    background-repeat: no-repeat;

	height: 18px;
    width: 80px;
	margin-right: 0.3rem;
} 

.icon-star-5 {  background-position: -2px -1px }
.icon-star-4 { background-position: -2px -21px }
.icon-star-3 { background-position: -2px -61px }
.icon-star-2 { background-position: -2px -101px }
.icon-star-1 { background-position: -2px -141px }
.icon-star-0 { background-position: -2px -181px }
.icon-star-4-5 { background-position: -2px -41px }
.icon-star-3-5 { background-position: -2px -81px }
.icon-star-2-5 { background-position: -2px -121px }
.icon-star-1-5 { background-position: -2px -161px } 
.icon-star-0-5 { background-position: -2px -201px }

 
.main_container {
	background-color: var(--background-color);
	
	display: inline-flex;
	flex-direction: column;

	width: -webkit-fill-available;
	width: -moz-fill-available; 
}


/*************************** HEADER *********************************************************/

.header_container {
	background-color: var(--app-color);
	color: rgb(255, 255, 255);

	height: var(--header-height);
	width: -webkit-fill-available;
	width: -moz-fill-available;

	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);

	display: inline-flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 3rem;
}

.header_container a { 
	color: rgb(255, 255, 255); 
	text-decoration:none;
}

.header_container_logo{
	width: 15rem;
	height: fit-content;
}


/*************************** BODY *********************************************************/

.body_container{
	background-color: var(--background-color);

	width: -webkit-fill-available;
	width: -moz-fill-available;
	padding-bottom: 3rem;
	min-height: calc(100vh - var(--header-height) - var(--footer-height));

	display: inline-flex;
	justify-content: space-around; 
}
 
.body_left{
	background-color: var(--background-color);

	width: var(--body-side-bar-width);

	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.body_center{
	background-color: var(--background-color);

	width: calc( 98% - 2 * var(--body-side-bar-width));

	display: inline-flex;
    flex-direction: column;
    align-items: center;
}

.body_right{
	background-color: var(--background-color);

	width: var(--body-side-bar-width);

	display: inline-flex;
	align-items: center;
	justify-content: center;
}


/*************************** FOOTER *********************************************************/

.footer-container{
	background-color: var(--app-color);

	width: -webkit-fill-available;
	width: -moz-fill-available;
	min-height: var(--footer-height);

	display: inline-flex;
	justify-content: center;
    align-items: center;
	text-align: center;

	color: white;
}
 
.footer-section{ 

	width: -webkit-fill-available;
	width: -moz-fill-available; 

	display: inline-flex;
	flex-direction: column;
	justify-content: center;
    align-items: center;
	text-align: center; 
}
.footer-section div{ 

	padding: 1rem;
}
.footer-section a{ 

	text-decoration: none;
	color: white;
}
 

/*************************** BODY SECTION *********************************************************/

.body-header {
	font-size: var(--font-size-title);
	font-weight: bold;
	margin: 3rem auto 1rem;
	text-align: center;
}

.body-section {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
}

.body-section-block {
	display: inline-flex;
	justify-content: center;
	flex-wrap: wrap;
}

.body-section-text {
	margin: 3rem;
	text-align: center;
}
 

/*************************** GENERAL BOX *********************************************************/
.box-general {
	background-color: var(--background-color-card); 
	margin: var(--margin-card);
	padding: 2rem;

	display: inline-flex;
	flex-direction: column; 

	border-radius: var(--border-radius);
	box-shadow: var(--box-shadow); 
}

 
/*************************** SCORE *********************************************************/

.box-score {
	margin: 0.3rem;
	width: calc( var(--font-size-title) * 2.2 );
	height: calc( var(--font-size-title) * 2.2 );
	line-height: calc( var(--font-size-title) * 2.2 ); 
	border-radius: var(--border-radius);

	font-size: var(--font-size-title);
	font-weight: bold;
	color: white; 
	text-align: center;

	flex-shrink: 0;
}

.box-score-small { 
	width: calc( var(--font-size-big) * 2.2 );
	height: calc( var(--font-size-big) * 2.2 );
	line-height: calc( var(--font-size-big) * 2.2 ); 
	border-radius: calc(var(--border-radius) / 2);

	font-size: var(--font-size-big);
	font-weight: bold;
	color: white; 
	text-align: center;
}
 

/*************************** COOKIES ALERT *********************************************************/

.cookies-parent 
{
	position: fixed;
	bottom: 0;

	background-color: rgba(0, 0, 0, 0.8);
	color: white;

	display: inline-flex;
	align-items: center;
	justify-content: space-around;
	z-index: 100;

	height: 7rem;
	width: -webkit-fill-available;
	width: -moz-fill-available;
}

.cookies-parent div
{
	padding: 1rem;
	text-align: center;
}

.cookies-parent a
{
	text-decoration: none;
	color: white;
	font-size: bold;
}

.cookies-parent button
{
	padding: 1rem;
	background-color: var(--app-color);
	color: white;
	border-radius: var(--border-radius);
	cursor: pointer;
}


/*************************** NAVIGATION PREVIEW *********************************************************/
.navigation-breadcrumb-parent {
	display: flexbox;
}

.navigation-breadcrumb-separator {
	font-size: var(--font-size-sub);
	
	font-weight: 500;
}

.navigation-breadcrumb-item {
	font-size: var(--font-size-sub);
	color: var(--text-color-sub);
	font-weight: 500;
}



/*************************** CATEGORY PREVIEW *********************************************************/

.list-card{ 
	display: inline-flex;
}

.list-card-anim{
	position: relative;
	cursor: pointer;
	background-color: var(--background-color-card);

	width: var(--width-card);
	height: var(--width-card);
	margin: var(--margin-card);

	display: inline-flex;
	flex-direction: column;
	align-content: center;

	border-radius: var(--border-radius);
	box-shadow: var(--box-shadow);

	z-index: 2;

	transition: all .2s ease-in-out; 
}

.list-card-anim:hover { 
	transform: scale(1.02); 
}

.list-card-img{ 
	width: var(--width-card);
	height: var(--width-card);
	border-radius: var(--border-radius);
	/*height: calc(var(--width-card) * 3 / 4);
	border-top-left-radius: var(--border-radius);
	border-top-right-radius: var(--border-radius);*/

	object-fit: cover;
	object-position: 50% 75%;
}

.list-card-data{ 

	position: absolute;
	bottom: 0px;

	width: -webkit-fill-available;
	width: -moz-fill-available;  
	margin: 0;

	/*height: calc( var(--width-card) - calc(var(--width-card) * 3 / 4));*/
	height: calc( var(--width-card) * 0.2);

	border-bottom-left-radius: var(--border-radius);
	border-bottom-right-radius: var(--border-radius);

	display: inline-flex;
    justify-content: center;
    align-items: center;
	
	text-align: center;
	font-size: var(--font-size-big);
	overflow: hidden;

	color: white;
	background-color: rgba(0, 0, 0, 0.7);
} 


/*************************** CATEGORY PREVIEW - EXTENDED *********************************************************/
.list-extended-card{
	display: inline-flex;
	flex-direction: column;
} 

.list-extended-card-list-container{
	background-color: var(--background-color-card);
	border-radius: var(--border-radius);
	box-shadow: var(--box-shadow);

	width: var(--width-card);
	margin: var(--margin-card);
	padding-top: 3rem;
	margin-top: -3rem;

	z-index: 1;
}

.list-extended-card-list-img {
	width: 2rem;
	height: 2rem;
	border-radius: calc(var(--border-radius) / 2);

	object-fit: cover;
	object-position: 50% 75%;
}

.list-extended-card-list-container table { 
	width:100%;
}
 
.list-extended-card-list-container tr { 
	cursor:pointer;
}

.list-extended-card-list-container tr:nth-child(2n) { 
	background-color:var(--background-color);
}

.list-extended-card-list-container tr:hover { 
	background-color:var(--background-color-hover);
}
 
.list-extended-card-list-container th { 
	font-weight: 500;
	padding: 0.3rem; 
    overflow-y: hidden;
    max-height: calc( var(--font-size-big) * 2.2 );
	text-align: left;
}

.list-extended-card-list-container th div{  
    overflow-y: hidden;
	font-size: calc(var(--font-size) * 0.9);
    max-height: calc( var(--font-size-big) * 2.2 );
	text-overflow: ellipsis;
}

.list-extended-card-list-container td { 
	font-weight: 500;
	padding: 0.3rem; 
    overflow-y: hidden;
    max-height: calc( var(--font-size-big) * 2.2 );
}

.list-extended-card-list-container td div{  
    overflow-y: hidden;
	font-size: calc(var(--font-size) * 0.9);
    max-height: calc( var(--font-size-big) * 2.2 );
}


/*************************** PRODUCT CARD *********************************************************/

.product-card{ 
	display: inline-flex; 
	justify-content: center;

	width: 100%; 
}
 
.product-card-anim{
	
	background-color: var(--background-color-card);
	cursor: pointer;

	position:relative;
	width: -webkit-fill-available;
	width: -moz-fill-available;
	max-width: 64rem;
	height: 10rem;
	margin: var(--margin-card);

	display: inline-flex; 
	align-content: center;

	border-radius: var(--border-radius);
	box-shadow: var(--box-shadow);

	transition: all .2s ease-in-out; 
}

.product-card-anim:hover { 
	transform: scale(1.02); 
}

.product-card-best-key { 
    position: absolute;
    top: -1.2rem;
    left: 6rem;
}
.product-card-best-key img{
	width: 8rem;
	position: absolute;
	left: 0;
}
.product-card-best-key div{
	width: 8rem;
	position: absolute; 
	left: 0;
	top: 0.7rem;

	color:white;
	font-weight: bold;
	font-size: calc(var(--font-size) * .66);
	text-align: center;
}

.product-card-img{ 
	width: 10rem;
	height: 10rem;
	border-top-left-radius: var(--border-radius);
	border-bottom-left-radius: var(--border-radius);

	object-fit: cover;
	object-position: 50% 75%;
}

.product-card-index{
	position: absolute;
	top:0.6rem;
	left: 0.6rem;

	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background-color:rgb(255, 255, 255);
	border: 1px solid var(--app-color);
	color: var(--app-color);

	font-size: var(--font-size-title);
	text-align: center;
	line-height: 2rem;
	font-weight: bold;
}

.product-card-container{ 
	width: -webkit-fill-available;
	width: -moz-fill-available; 
	min-height: 3.5rem;
	padding: 1rem;
	
	display: inline-flex;
	flex-direction: column;
	justify-content: flex-start;
    align-items: start; 
} 

.product-card-score{
	margin-right: 1rem;
}

.product-card-data{ 
	width: -webkit-fill-available;
	width: -moz-fill-available;  
	
	display: inline-flex;  
	align-items: center;
    justify-content: flex-start;
	flex-shrink: 0;
} 
 

.product-card-title {    
	font-size: var(--font-size-big);
	margin-right: 2.2rem; 
} 

.product-card-title a{    
	text-decoration: none;
	color: var(--text-color);
} 

.product-card-value{ 
	font-size: var(--font-size-sub);

	display: inline-flex;
	align-items: center;
} 
 
.product-card-desc{
	max-height: 5rem;
	overflow: hidden;
	text-overflow: clip;
}

.product-card-direct
{
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
  
	border-radius: var(--border-radius);
	background-color: var(--app-color);
	padding: 0.3rem;
	 
	text-align: center; 
	color: white; 
	cursor: pointer;
}
 
.product-card-direct:hover { 
	transform: scale(0.95); 
}

.product-card-direct img {
	width: 1.5rem;
	height: 1.5rem;
}



/*************************** PRODUCT COMMENT SHORT *********************************************************/
 

.product-comment-short{ 
	display: inline-flex; 
	justify-content: center;

	width: 100%; 
}
	
.product-comment-short-anim{
	
	background-color: var(--background-color-card);
	cursor: pointer;

	position:relative;
	width: -webkit-fill-available;
	width: -moz-fill-available;
	max-width: 64rem; 
	margin: var(--margin-card);

	display: inline-flex; 
	flex-direction: column;
	align-content: center;

	border-radius: var(--border-radius);
	box-shadow: var(--box-shadow);

	transition: all .2s ease-in-out; 
}

.product-comment-short-info {
	width: -webkit-fill-available;
	width: -moz-fill-available;

	display: inline-flex; 
	justify-content: left;
	align-items: center; 
}

.product-comment-short-img {
	width: 3.5rem;
	margin: 0.3rem;
}

.product-comment-short-desc {
	padding-bottom: 0.5rem;
}


/*************************** COMPARATIVE 5 TABLE *********************************************************/

.list-table-info-container{ 
	width: -webkit-fill-available;
	width: -moz-fill-available;
	margin: 1rem;

	background-color: var(--background-color-card);
	border-radius: var(--border-radius);
	box-shadow: var(--box-shadow);
	overflow: scroll;
	overflow-y: hidden;
}
	
 
.list-table-info-img {
	width: 5rem; 
	margin: 0.3rem;
	border-radius: calc(var(--border-radius) / 2);
	cursor:pointer;

	object-fit: cover;
	object-position: 50% 75%;
}

.list-table-info-container table { 
	width:100%;
}
	
.list-table-info-container tr { 
	
}

.list-table-info-container tr:nth-child(2n) { 
	background-color:var(--background-color);
}

.list-table-info-container tr:hover {  
}

.list-table-info-container th { 
	width: 10rem;
	height: 4rem;
	text-align: center;
	border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.list-table-info-container td { 
	width: 10rem;
	height: 4rem;
	text-align: center;
	border-right: 1px solid rgba(0, 0, 0, 0.05);
}

.list-table-info-container td.selected { 
	background-color:rgb(17, 154, 13, 0.15);
}



/*************************** SUBSCRIBE *********************************************************/

.subscribe-parent {  
	padding: 1rem;

	display: inline-flex;
	align-items: center;

	border: 4px solid rgba(255, 45, 45, 0.3);
	border-radius: var(--border-radius); 
} 
.subscribe-parent > * {
	padding: 0.5rem;
} 
.subscribe-label {   
	padding-bottom: 0.5rem;
}
.subscribe-email {   
	padding: 0.2rem;
	height: 2rem;
	width: 20rem;
}
.subscribe-send {   
	padding: 0.9rem; 
	background-color: var(--app-color);
	color: white;
	border-radius: var(--border-radius);
	cursor: pointer;
	border:none;
}
.subscribe-send:hover{    
	background-color: rgba(255, 45, 45); 
}
.subscribe-error {    
	min-height: 2rem;
	display: flex;
    align-items: center;
}

.subscribe-loading {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	display: inline-block;
    margin: 0 30px;
	position: relative;
	background: #FFF;
	box-shadow: -24px 0 #FFF, 24px 0 #FFF;
	box-sizing: border-box;
	animation: shadowPulse 2s linear infinite;
}

@keyframes shadowPulse {
33% {
	background: #FFF;
	box-shadow: -24px 0 #FF3D00, 24px 0 #FFF;
}
66% {
	background: #FF3D00;
	box-shadow: -24px 0 #FFF, 24px 0 #FFF;
}
100% {
	background: #FFF;
	box-shadow: -24px 0 #FFF, 24px 0 #FF3D00;
}
}



.index_text { 
	width: -webkit-fill-available;
	width: -moz-fill-available; 
	margin: var(--margin-card); 
	padding: 1rem 4rem;

	display: inline-flex;

	background-color: var(--background-color-card); 
	border-radius: var(--border-radius);
	box-shadow: var(--box-shadow);
}