@CHARSET "UTF-8";
 /* Copyright Droggitis IT Systems   */


:root {
  --main-floor-color: #D3D3D3;
  --AppContainerBG: #F0FFFF;
  --ToolsBG:#4169E1;
  --NavDotsLow:#DCDCDC;
  --NavDotsHigh:#4169E1;

  --ItemsListBasicDivBG:#0000CD ;
  --ItemsListBasicDivColor: white ;

  --RemarkMultsListDivBG:#0000CD ;
  --RemarkMultsListBasicDivBORDER:#778899 ;
  --RemarkMultsListBasicDivBG: #F0F8FF ;
  --RemarkMultsListBasicDivColor: #191970 ;


  --RemarksListContainerBG:#E4E4E4 ;
  --RemarksListBasicDivBORDER:#F5F5F5 ;
  --RemarksListBasicDivBG:#F0F8FF ;
  --RemarksListBasicDivColor: #191970 ;

  --BasketListContainerBG:  #E9E9E9;
  --BasketListBasicDivBG:  #0000CD;
  --BasketListBasicDivColor: white;
  --BasketListSecondaryDivColor: white;

  --FormsUserInputTitleColor: #0000CD; 
  --FormsUserInputFontColor: #333333;

  --ErrorFieldBGColor: #EFC050;



  --BtnSelectionGB: #D3D3D3 ;
  --BtnSelectionColor: #696969 ;
  --BtnSelectionActiveBG: #0000CD ;
  --BtnSelectionActiveColor: white ;


}



/*
  --BasketListContainerBG:  #E9E9E9;
  --BasketListBasicDivBG:  #F0FFFF;
  --BasketListBasicDivColor: #0000CD;
  --BasketListSecondaryDivColor: #0000AD;

*/

body{font-family:arial,helvetica,courier; background-color:  var(--main-floor-color);  z-index:1;}

.BodyFullDiv{position:absolute; top:0px; left:0px; right:0px; bottom:0px;  
	          display: flex;  flex-direction:row;  justify-content: center;  align-items:center; align-content: center;
	          background-color:  var(--main-floor-color); 
	         font-family:arial,helvetica,courier; text-transform:none; z-index:1; }

.AppContainer{position:absolute; width:100%; max-width:1300px; height:100%; min-height:300px; 
		     background-color:  var(--AppContainerBG);  z-index:2;  }

.TopArea{position:absolute; top:0px; left:0px; height:80px; width:100%; background: var(--ToolsBG); color: #fff; 
		display:flex;  justify-content: space-between;    align-items: center;   z-index:3; }

.MainArea{position:absolute; top:80px; left:0px; bottom:40px; width:100%;  overflow:hidden; 
	 	display: flex;  flex-direction:column;  justify-content: center;  align-items:center; align-content: center;    z-index:3;}

.FooterArea{position:absolute; bottom:0px; left:0px; height:40px; width:100%; background:  var(--ToolsBG); color: #fff;  overflow:hidden; 
			display:flex;  justify-content: center;   align-items: center;    z-index:3;}



.MainMenuTop{display:flex;  flex-direction: row;  justify-content: flex-start  top:0;  overflow:hidden;  z-index:10;  }
.MainMenuIcons{width:50px; height:50px; margin-left:10px; }
.HomeIcon{background:url(../img/home.png) no-repeat; background-size:50px 50px;}
.MenuIcon{background:url(../img/show_menu.png) no-repeat; background-size:50px 50px;}
.BasketIcon{background:url(../img/basket.png) no-repeat; background-size:50px 50px;     display:flex;  justify-content:center;    align-items:flex-start;}
.AccountIcon{background:url(../img/account.png) no-repeat; background-size:50px 50px;}
.AboutIcon{background:url(../img/menu_about.png) no-repeat; background-size:50px 50px;}



/*
.LanguageIcon{width:60px;  height:40px; background:url(../img/Flag_of_Greece.png) no-repeat  0 0; 
			background-size:60px 40px; background-position: center center; margin-right: 6px;}
*/





.LanguageIconDiv{width:60px;  height:40px;  margin-right: 6px;}									
.LanguageIconImg{ width:60px; height:40px; }







.BasketIconQty{width:18px; height:18px; font-size: 14px;    font-weight: 700; 
			display:flex;  justify-content: center;    align-items: center;
			margin-bottom:1px; margin-right: 4px; 
			background: #000080; color: white; border:1px white solid; border-radius: 50%;  }






/* ========================================================================================= */



.appDialogContairer{position:absolute; top:80px; left:0px; bottom:80px; width:100%;  
		 			display:flex;   flex-direction:row;  justify-content: center;  align-items: center; z-index:9000;}
.appDialog{width:90%; max-width:350px;  max-height:400px; margin:0px;  
			     	display: flex;  flex-direction:column;  align-content:flex-start; align-items:flex-start justify-content: center;
			     	background: var(--BasketListContainerBG);  border: 8px #DDDDDD solid;  border-radius: 10px;}

.appDialogLine{width:98%;   min-height:40px;  max-height:180px; 
					display:flex;  flex-direction:row;  justify-content:center;  align-items: center; align-content:center;
					 font-size: 2em; 	margin-top: 2px; margin-bottom: 2px; padding-top:4px; padding-bottom: 4px; }
.appDialogLineText{ font-size: 1.2em; }					 
.appDialogLineImgBtn{max-height: 50px; margin-top: 5px; margin-bottom: 5px; }


.appDialogLineInput{width:98%;  display:flex;  flex-direction:row;  justify-content:center;  align-items: center; align-content:center;   
					padding-left:5px ;  padding-right: 10px;}
.appDialogLine input{width:80%; height:90%; font-size: 2.2em;  font-weight: 500; text-align: center; 
						color: var(--FormsUserInputFontColor); border: 1px var(--BasketListContainerBG) solid;  }





/* ========================================================================================= */

.FlexFullWidthHeightCenter{position:absolute; top:0px; left:0px; right:0px; bottom:0px;  
				display: flex;  flex-direction:column;  justify-content: center;   align-items: center;   align-content: center;  
				z-index:5;}
.CustomerLogoImg{  width: 60%; max-width:600px;  }



.FrontPageMessage{width:100%;   min-height:60px;  max-height:180px; 
					margin-top: 12px; margin-bottom: 2px; 
					font-size: 2em; color: var(--FormsUserInputFontColor);  }




/* ========================================================================================= */

.ItemsPageContainer{position:absolute; top:0px; left:0px; right:0px; bottom:0px;  
				display: flex;  flex-direction:row;  justify-content: center;  align-items:center; align-content: center;   z-index:5;}


.ItemsTopMenuContainer{position:absolute; top:0px; left:0px; right:0px; bottom:0px; height:60px; min-width:240px; 
						display: flex;  flex-direction:row;  justify-content: center;  align-items:center; align-content: center; } 

.ItemsTopMenuDotsContainer{width:100%; height:50px;  max-width:300px; 
						display: flex;  flex-direction:row;  justify-content: center;  align-items:center; align-content: center;   } 

.ItemsTopMenuDot{height: 30px;  width: 30px;  background-color: var(--NavDotsLow);  border-radius: 50%;  display: inline-block; margin-left:5px; margin-right: 5px;  
				font-size: 1.6em; font-color: var(--NavDotsHigh);   }

.ItemsTopMenuDotSelected{ background-color: var(--NavDotsHigh); }




.ItemsContainer{position:absolute; top:60px; left:0px; right:0px; bottom:0px; 
			     	display: flex;   flex-direction:row;  justify-content: center;  align-items:center; align-content: center;  }
.ItemsListContainer{width:100%; height: 100%; max-width:450px; 
			     	display: flex;  flex-direction:column;  align-content:center; justify-content: flex-start;
			     	overflow-x:hidden; overflow-y:auto;}


.ItemCatsListBasicDiv{width:100%; max-height:90px; min-height:60px;  margin:2px; font-size: 1.5em;  font-weight: 700;
					display: flex;   flex-direction:row;  justify-content:  center;  align-items:center; align-content: center;
					 background: var(--ItemsListBasicDivBG); color: var(--ItemsListBasicDivColor); border-radius: 6px;}



/*--------*/



.ItemCatsListBasicDiv2{width:95%; max-height:350px; min-height:60px;  margin:2px; font-size: 1.0em;  font-weight: 700;
				    padding-left:5px ; padding-right: 10px;
					display: flex;   flex-direction:column;  justify-content:space-between; 
					background: var(--ItemsListBasicDivBG); color: var(--ItemsListBasicDivColor); border-radius: 6px;}

.ItemCatsListBasicDiv2Line1{width:100%; max-height:90px; min-height:35px;  margin-top:10px; 	display: flex;  flex-direction:column;  
			justify-content:  space-between;  align-items:center; align-content: center; }


.ItemCatsListBasicDiv2Line1Description{font-size: 1.5em; color: var(--ItemsListBasicDivColor); margin-right:10px;}




.ItemCatsListBasicDiv2Line2{width:100%; max-height:230px; min-height:0px;  margin-bottom:5px; display: flex;  flex-direction:row;  
	justify-content:  space-between;  align-items:center; align-content: center;}  
.ItemCatsListBasicDiv2Line2Details{width:90%;font-size: 1.1em; color: var(--ItemsListBasicDivColor); margin-left:5px;   margin-bottom:10px;
	align-items:center; align-content: center; text-align: center;}
.ItemCatsListBasicDiv2Line2emptySpace{width:20%; margin-right:10px;}






/*        -----------------        */
.ItemsListBasicDiv{width:95%; max-height:90px; min-height:60px;  margin:2px; font-size: 1.5em;  font-weight: 700;
				    padding-left:5px ; padding-right: 10px;
					display: flex;   flex-direction:row;  justify-content:  space-between;  align-items:center; align-content: center;
					background: var(--ItemsListBasicDivBG); color: var(--ItemsListBasicDivColor); border-radius: 6px;}

.ItemsListBasicDiv a{ font-size: 1em; color: var(--ItemsListBasicDivColor); margin-right:10px;}






.ItemsListV2Div{width:95%; max-height:350px; min-height:60px;  margin:2px; font-size: 1.0em;  font-weight: 700;
				    padding-left:5px ; padding-right: 10px;
					display: flex;   flex-direction:column;  justify-content:space-between; 
					background: var(--ItemsListBasicDivBG); color: var(--ItemsListBasicDivColor); border-radius: 6px;}


.ItemsListV2DivLine1{width:100%; max-height:90px; min-height:35px;  margin:0px; 	display: flex;  flex-direction:row;  
			justify-content:  space-between;  align-items:center; align-content: center; }
.ItemsListV2DivLine1Description{font-size: 1.5em; color: var(--ItemsListBasicDivColor); margin-right:10px;}
.ItemsListV2DivLine1Price{width:100px; font-size: 1.5em; color: var(--ItemsListBasicDivColor); margin-right:10px; 
	align-content:right;  align-items:right; text-align: right;}

.ItemsListV2DivLine2{width:100%; max-height:230px; min-height:0px;  margin:0px; display: flex;  flex-direction:row;  
	justify-content:  space-between;  align-items:center; align-content: center;}  
.ItemsListV2DivLine2ItemDetails{width:70%;font-size: 1.1em; color: var(--ItemsListBasicDivColor); margin-left:5px;   margin-bottom:10px;
	align-items:left; align-content: left; text-align: left;}
.ItemsListV2DivLine2emptySpace{width:20%; margin-right:10px;}














.ItemRemarksContainer{width:100%; height: 100%; max-width:450px; 
			          display: flex;  flex-direction:column;  align-content:center; justify-content: flex-start;}



.ItemRemarksItemNameDiv{width:100%;  height:46px;  font-size: 1.5em;  font-weight: 700;
						background: var(--ItemsListBasicDivBG); color: var(--ItemsListBasicDivColor); border-radius: 6px;
			        	display: flex;   flex-direction:row;  justify-content: center;  align-items:center; align-content: center; }   



.ItemRemarksItemDetailsDiv{width:100%;  min-height:46px;  max-height:200px; font-size: 1.1em;  font-weight: 700;
						background: var(--ItemsListBasicDivColor); color: var(--ItemsListBasicDivBG); border-radius: 6px;
			        	display: flex;   flex-direction:row;  justify-content: center;  align-items:center; align-content: center; } 



/*--------------------------------*/
.ItemRemarksItemQtyPriceDiv{width:100%; height:50px;   font-size: 1.5em;  font-weight: 700; 
						background: var(--ItemsListBasicDivColor); color: var(--ItemsListBasicDivBG); 
			        	display: flex;   flex-direction:row;  justify-content: space-between;  align-items:center; align-content: center;  
			        	margin-top:10px;  margin-bottom:10px;}


.ItemRemarksItemQtyDiv{min-width:150px; max-width:50%; height:100%;  
			        	display: flex;   flex-direction:row;  justify-content: center;  align-items:center; align-content: center;  }
.ItemRemarksItemQtyVal{min-width:50px;  font-size: 1.5em;  font-weight: 700;   color: var(--ItemsListBasicDivBG); }


.ItemRemarksItemPriceDiv{min-width:100px; max-width:50%; height:100%; 
			        	display: flex;   flex-direction:row;  justify-content: center;  align-items:center; align-content: center;}



.ItemRemarkMultsDiv{width:100%; height:38px;  background: var(--RemarkMultsListDivBG);
			        	display: flex;   flex-direction:row;  justify-content: center;  align-items:center; align-content: center;
			        	margin-bottom: 10px;
			        	}

.ItemRemarkMultsBasicDiv{min-width:80px; max-width:150px; height:26px;  font-size: 1.2em;  font-weight: 700;   
						margin-left: :3px;   margin-right:3px; 
						display: flex;   flex-direction:row;  justify-content: center;  align-items:center; align-content: center;
						border:1px var(--RemarkMultsListBasicDivBORDER) solid;	border-radius: 6px;
 						background: var(--RemarkMultsListBasicDivBG); color: var(--RemarkMultsListBasicDivColor);
 						border-radius: 6px;}

.ItemRemarkMultsBasicDivSELECTED{background: var(--RemarkMultsListBasicDivColor); color: var(--RemarkMultsListBasicDivBG);}



.ItemRemarksListContairerDiv{width:100%; min-height:80px; max-height:400px;  	background: var(--RemarksListContainerBG); 
					display: flex;  flex-direction:row;   flex-wrap:wrap; justify-content: center;  align-items:flex-start; align-content: flex-start;
					overflow-x: hidden; overflow-y: auto;
					margin-bottom: 10px;}


.ItemRemarksBasicListRemarkDiv{min-width:100px; max-width:200px;  height:40px;  font-size: 1.3em;  font-weight: 700; 
								margin:2px; padding-left: 4px; padding-right: 4px;
								display: flex;   flex-direction:row; flex-wrap:wrap;  justify-content: center;  align-items:center; align-content: center;
								border: 1px var(--ItemsListBasicDivBG) solid; border-radius: 6px;
								background: var(--RemarksListBasicDivBG); color: var(--RemarksListBasicDivColor);}
.ItemRemarksBasicListRemarkDivSELECTED{background: var(--RemarksListBasicDivColor); color: var(--RemarksListBasicDivBG); }


.ItemRemarksOKImgDiv{width:100%;  height:50px;  
			        display: flex;   flex-direction:row;  justify-content: center;  align-items:center; align-content: center;
			        object-fit: scale-down }   
.ItemRemarksOKImg{ max-height: 50px;}



/* ========================================================================================= */
/*
.ItemsContainer{position:absolute; top:60px; left:0px; right:0px; bottom:0px; 
			     	display: flex;   flex-direction:row;  justify-content: center;  align-items:center; align-content: center;  }
.ItemsListContainer{width:100%; height: 100%; max-width:450px; 
			     	display: flex;  flex-direction:column;  align-content:center; justify-content: flex-start;
			     	overflow-x:hidden; overflow-y:auto;}
*/
.BasketPageContainer{position:absolute; top:0px; left:0px; right:0px; bottom:0px;  
				  display:flex;  flex-direction:row; justify-content:center;  align-items:center;  align-content: center;   z-index:5;}


.BasketListContainer{width:100%; height: 100%; max-width:450px; 
			     	display: flex;  flex-direction:column;  align-content:flex-start; align-items:flex-start justify-content: center;
			     	background: var(--BasketListContainerBG);
			     	overflow-x:hidden; overflow-y:auto;}

.BasketListBasicDiv{width:95%;  max-height:90px; min-height:50px;  margin:2px; 
				    padding-left:5px ; padding-right: 10px;
					display:flex;   flex-direction:row;  justify-content:flex-end;  align-items:center; align-content: center;
					background: var(--BasketListBasicDivBG); color: var(--BasketListBasicDivColor); border-radius: 6px;}










.BasketListBasicDivLineContainer{width:100%; max-height:160px; min-height:60px;  margin-top:2px; margin-bottom:2px; 
						display:flex;   flex-direction: row;  justify-content: space-between;  align-content:flex-start;  align-items:center; 
						background: var(--BasketListContainerBG);   }




.BasketListBasicDivLineContainerLEFT{width:86%; min-height:60px; max-height:160px; 
					  padding-left:8px ; padding-right: 0px;
						display:flex;   flex-direction: column;  justify-content:center;  align-items:flex-start;   align-content:flex-start;
						background: var(--BasketListBasicDivBG);   color: var(--BasketListBasicDivColor);  border-radius: 6px;}

.BasketListBasicDivLineContainerRIGHT{width:14%; min-height:60px;  max-height:160px;  
					  padding-left:2px ; padding-right: 8px;
						display:flex;   flex-direction: column;  justify-content:center;  align-items:center; align-content:center;
						background: var(--BasketListContainerBG);  }






.BasketListBasicDivLineItemName{width:100%;  min-height:36px; max-height:60px;  margin-top:2px;  margin-bottom:1px; 
					font-size: 2em;  font-weight: 700; text-align: left; }

.BasketListBasicDivLineRemarks{width:100%;  min-height:28px; max-height:90px;   font-size:1em;  
 							  text-align: left;}

.BasketListBasicDivLineItemQtyPrice{width:100%;  min-height:30px; max-height:60px;  margin-bottom:1px;  
					font-size: 1.6em;  font-weight: 700;
					display: flex;   flex-direction: row;  justify-content: flex-end;  align-items:center;}


.BasketListBasicDivLineItemQtyField{width:100px;  height:30px;  margin-bottom:1px;   text-align: right;}
.BasketListBasicDivLineItemPriceField{width:100px;   height:30px;     margin-bottom:1px;   text-align: right;  margin-right:10px; }



/*



.BasketListBasicDiv3Lines{width:95%; max-height:120px; min-height:60px;  margin:2px; 
					    padding-left:5px ; padding-right: 10px;
						display:flex;   flex-direction: column;  justify-content:center;  align-items:flex-start; align-content:flex-start;
						background: var(--BasketListBasicDivBG);   color: var(--BasketListBasicDivColor);  border-radius: 6px;}


.BasketListBasicDivLineOne{width:100%;  height:60%;  min-height:40px; max-height:90px;  margin-bottom:1px;   
						display: table; }

.BasketListBasicDivLineOneTr{display:table-row;   vertical-align: middle}


.BasketListBasicDivItemName{display:table-cell;     text-align:left;  font-size: 2em;  font-weight: 700; text-align: left;  }
.BasketListBasicDivItemQty{display:table-cell;   width:40px; text-align:right;  min-width:60px;  font-size: 1.4em;  font-weight: 700;  }
.BasketListBasicDivLinePrice{display:table-cell;  width:80px;  text-align:right; font-size: 1.8em;  font-weight: 800; }

.BasketListBasicDivLineTwo{width:100%;  height:40%;  min-height:36px; max-height:60px;  margin-bottom:1px;  
					display: flex;   flex-direction: row;  justify-content: space-between;  align-items:center; align-content: center;}

*/






.BasketListBasicDivTrashImgDiv{min-width:34px; max-width:34px;  min-height:34px;  max-height:34px;  
			        display: flex;   flex-direction:row;  justify-content: center;  align-items:center; align-content: center;
			        object-fit: scale-down }   
.BasketListBasicDivTrashImg{ max-height: 34px;}








.BasketListBasicDivTotalStr{font-size: 1.2em;  font-weight: 500; margin-right: 15px; }
.BasketListBasicDivTotalVal{font-size: 1.8em;  font-weight: 700;}





/* ========================================================================================= */



.AccountPageContainer{position:absolute; top:0px; left:0px; right:0px; bottom:0px;  
				  display:flex;  flex-direction:row; justify-content:center;  align-items:center;  align-content: center;   z-index:5;}


.AccountListContainer{width:98%; height: 100%; max-width:450px;   margin:0px; 
			     	display: flex;  flex-direction:column;  align-content:flex-start; align-items:flex-start justify-content: center;
			     	background: var(--BasketListContainerBG);
			     	overflow-x:hidden; overflow-y:auto;}

.AccountListLine{width:98%;   min-height:60px;  max-height:180px; 
					display:flex;  flex-direction:column;  justify-content:flex-start;  align-items: flex-start; align-content:flex-start;
					margin-top: 2px; margin-bottom: 2px;   
					background: var(--BasketListContainerBG);  border-radius: 6px;}


.AccountListLineTitle{width:100%;  text-transform:none; font-size: 1em;      
						padding-left:5px ; padding-right: 10px; text-align: left;  
						color: var(--FormsUserInputTitleColor);}
.AccountListLineInput{width:98%;  display:flex;  flex-direction:row;  justify-content:flex-start;  align-items: flex-start; align-content:flex-start;   
					padding-left:5px ;  padding-right: 10px;}
.AccountListLineInput input{width:100%; height:100%; font-size: 2.4em;  font-weight: 500; text-align: left; 
						color: var(--FormsUserInputFontColor); border: 1px var(--BasketListContainerBG) solid;  }

.AccountListLineAlert{width:100%;  text-transform:none; font-size: 1.5em;      
						padding-left:5px ; padding-right: 10px; text-align: center;  
						color: red;}



.AccountListLineBig{width:98%;   min-height:90px;  max-height:250px; 
					display:flex;  flex-direction:column;  justify-content:flex-start;  align-items: flex-start; align-content:flex-start;
					margin-top: 2px; margin-bottom: 2px;   
					background: var(--BasketListContainerBG);  border-radius: 6px;}
.AccountListLineInputBig{width:98%;  display:flex;  flex-direction:row;  justify-content:flex-start;  align-items: flex-start; align-content:flex-start;   
					padding-left:5px ;  padding-right: 10px;}
.AccountListLineInputBig textarea{width:100%; height:100%; font-size: 2.4em;  font-weight: 500; text-align: left; 
						color: var(--FormsUserInputFontColor); border: 1px var(--BasketListContainerBG) solid;  }


.AccountListLineFlexRow{width:98%;   min-height:60px;  max-height:180px; 
					display:flex;  flex-direction:row;  justify-content:space-between;  align-items: center; align-content:center;
					margin-top: 4px; margin-bottom: 4px;   
					background: var(--BasketListContainerBG);  border-radius: 6px;}

.AccountListLineFlexRowTxt{width:80%;  text-transform:none; font-size: 0.9em;      
						padding-left:2px ; padding-right: 4px; text-align: left;  
						color: var(--FormsUserInputTitleColor);}

.AccountListLineFlexCheckBox{width:20%;  text-transform:none; font-size: 2em;      
						padding-left:2px ; padding-right: 2px; text-align: left;  
						color: var(--FormsUserInputTitleColor);}					




.AccountListLineImgBtnDiv{width:98%;  height:70px;  
			        display: flex;   flex-direction:row;  justify-content: space-around ;  align-items:center; align-content: center;
			        object-fit: scale-down }   
.AccountListLineImgBtn{ max-height: 50px;}








/* ========================================================================================= */



.CheckOutPageContainer{position:absolute; top:0px; left:0px; right:0px; bottom:0px;  
				  display:flex;  flex-direction:row; justify-content:center;  align-items:center;  align-content: center;   z-index:5;}


.CheckOutListContainer{width:98%; height: 100%; max-width:450px;   margin:0px; 
			     	display: flex;  flex-direction:column;  align-content:flex-start; align-items:flex-start justify-content: center;
			     	background: var(--BasketListContainerBG);
			     	overflow-x:hidden; overflow-y:auto;}


.CheckOutListLine{width:98%;   min-height:40px;  max-height:180px; 
					display:flex;  flex-direction:row;  justify-content:center;  align-items: center; align-content:center;
					margin-top: 2px; margin-bottom: 2px;   
					background: var(--BasketListContainerBG);  border-radius: 6px;}


.CheckOutListLinetitle{width:100%;  text-transform:none; font-size: 1.8em;   font-weight: 700;    color: var(--FormsUserInputTitleColor);
						padding-left:5px ; padding-right: 10px; text-align: center;   }




/*
.CheckOutListOrderLine{width:98%;   min-height:20px;  max-height:180px; 
					 display:flex;  flex-direction:row;  justify-content:space-between;  align-items: center; align-content:center;
					 margin-top: 1px; margin-bottom: 1px;   
					 background: var(--BasketListContainerBG);}

.CheckOutListBasicDivItemName{font-size: 0.8em;  font-weight: 500; text-align: left;}
.CheckOutListBasicDivItemQty{min-width:60px;  font-size: 0.8em;  font-weight: 500; text-align: right;}
.CheckOutListBasicDivLinePrice{min-width:80px; font-size: 0.8em;  font-weight: 500; text-align: right;}
*/
.CheckOutListOrderLines{width:98%;   min-height:20px;  max-height:180px; 
					 display: table;
					 margin-top: 1px; margin-bottom: 1px;   
					 background: var(--BasketListContainerBG);}


.CheckOutListOrderLine{display:table-row;  width:100%;  vertical-align: middle	}

.CheckOutListBasicDivItemName{display:table-cell; font-size: 1em;  font-weight: 500; text-align: left;}
.CheckOutListBasicDivItemQty{display:table-cell; width:40px;  font-size: 1em;  font-weight: 500; text-align: right;}
.CheckOutListBasicDivLinePrice{display:table-cell; width:60px; font-size: 1em;  font-weight: 500; text-align: right;}
.CheckOutListBasicDivLineTotal{display:table-cell; width:98%; font-size: 1.2em;  font-weight: 600; text-align: right; }






.CheckOutListLineBig{width:98%;   min-height:90px;  max-height:250px; 
					display:flex;  flex-direction:column;  justify-content:flex-start;  align-items: flex-start; align-content:flex-start;
					margin-top: 2px; margin-bottom: 2px;   
					background: var(--BasketListContainerBG);  border-radius: 6px;}
.CheckOutListLineTopTitle{width:100%;  text-transform:none; font-size: 1em;      
						padding-left:5px ; padding-right: 10px; text-align: left;  
						color: var(--FormsUserInputTitleColor);}

.CheckOutListLineInputBig{width:98%;  display:flex;  flex-direction:row;  justify-content:flex-start;  align-items: flex-start; align-content:flex-start;   
					padding-left:5px ;  padding-right: 10px;}

.CheckOutListLineInputBig textarea{width:100%; height:100%; font-size: 2.2em;  font-weight: 500; text-align: left; 
						color: var(--FormsUserInputFontColor); border: 1px var(--BasketListContainerBG) solid;  }








.BtnSelection{width:100%; max-height:90px; min-height:60px;  margin:2px; font-size: 1.5em;  font-weight: 700;
					display: flex;   flex-direction:row;  justify-content:  center;  align-items:center; align-content: center;
					 background: var(--BtnSelectionGB); color: var(--BtnSelectionColor); border-radius: 6px;}
.BtnSelection a{font-size: 1.5em;  margin-right:10px; }

.BtnSelectionActive{background: var(--BtnSelectionActiveBG); color: var(--BtnSelectionActiveColor); }






/*=======================  LANGUAGES ====================================*/
.LangPageContainer{position:absolute; top:0px; left:0px; right:0px; bottom:0px;  
				  display:flex;  flex-direction:row; justify-content:center;  align-items:center;  align-content: center;   z-index:5;}

.LangListContainer{width:100%; height: 100%; max-width:450px; 
			     	display: flex;  flex-direction:column;  align-content:flex-start; align-items:flex-start justify-content: center;
			     	background: var(--BasketListContainerBG);
			     	overflow-x:hidden; overflow-y:auto;}

.LangListBasicDiv{width:95%;  max-height:90px; min-height:50px;  margin:2px; 
				    padding-left:5px ; padding-right: 10px;
					display:flex;   flex-direction:row;  justify-content:space-between;  align-items:center; align-content: center;
					background: var(--BasketListBasicDivBG); color: var(--BasketListBasicDivColor); border-radius: 6px;}


.LangListBasicDivFlagStr{width:200px;  font-size: 2em;  font-weight: 700; 
					    	color: var(--ItemsListBasicDivBG); }

										
.LangListBasicDivFlagImg{ width:60px; height:40px; }













/*============== CHECKBOX ===============================*/
 /* Customize the label (the ChkBoxContainer) */
.ChkBoxContainer{  display: block;  position: relative;  padding-left: 35px;  margin-bottom: 12px;
  cursor: pointer;   font-size: 22px;  -webkit-user-select: none;  -moz-user-select: none;  -ms-user-select: none;
  user-select: none;}
/* Hide the browser's default checkbox */
.ChkBoxContainer input {  position: absolute;  opacity: 0;  cursor: pointer;  height: 0;  width: 0;}
/* Create a custom checkbox */
.checkmark {  position: absolute;  top: 0;  left: 0;  height: 25px;  width: 25px;  background-color: #AAAAAA; border:1px blue solid;}
/* On mouse-over, add a grey background color */
.ChkBoxContainer:hover input ~ .checkmark {  background-color: #ccc; }
/* When the checkbox is checked, add a blue background */
.ChkBoxContainer input:checked ~ .checkmark {  background-color: #2196F3;}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {  content: "";  position: absolute;  display: none;}
/* Show the checkmark when checked */
.ChkBoxContainer input:checked ~ .checkmark:after {  display: block;}
/* Style the checkmark/indicator */
.ChkBoxContainer .checkmark:after {  left: 9px;  top: 5px;  width: 5px;  height: 10px;  border: solid white;  border-width: 0 3px 3px 0;  
	-webkit-transform: rotate(45deg);  -ms-transform: rotate(45deg);  transform: rotate(45deg);} 









/*=============VIVAPAY============================================================*/






.CardPageContainer{position:absolute; top:0px; left:0px; right:0px; bottom:0px;  
				  display:flex;  flex-direction:row; justify-content:center;  align-items:center;  align-content: center;   z-index:5;}


.CardListContainer{width:98%; height: 100%; max-width:450px;   margin:0px; 
			     	display: flex;  flex-direction:column;  align-content:flex-start; align-items:flex-start justify-content: center;
			     	background: var(--BasketListContainerBG);
			     	overflow-x:hidden; overflow-y:auto;}

.CardListLine{width:98%;   min-height:60px;  max-height:180px; 
					display:flex;  flex-direction:column;  justify-content:flex-start;  align-items: flex-start; align-content:flex-start;
					margin-top: 2px; margin-bottom: 2px;   
					background: var(--BasketListContainerBG);  border-radius: 6px;}


.CardListLineTitle{width:100%;  text-transform:none; font-size: 1em;      
						padding-left:5px ; padding-right: 10px; text-align: left;  
						color: var(--FormsUserInputTitleColor);}
.CardListLineInput{width:98%;  display:flex;  flex-direction:row;  justify-content:flex-start;  align-items: flex-start; align-content:flex-start;   
					padding-left:5px ;  padding-right: 10px;}
.CardListLineInput input{width:100%; height:100%; font-size: 2.4em;  font-weight: 500; text-align: left; 
						color: var(--FormsUserInputFontColor); border: 1px var(--BasketListContainerBG) solid;  }

.CardListLineAlert{width:100%;  text-transform:none; font-size: 1.5em;      
						padding-left:5px ; padding-right: 10px; text-align: center;  
						color: red;}




.CardListLineFlexRow{width:98%;   min-height:60px;  max-height:180px; 
					display:flex;  flex-direction:row;  justify-content:flex-start;  align-items: flex-start; align-content:flex-start;
					margin-top: 2px; margin-bottom: 2px;   
					background: var(--BasketListContainerBG);  border-radius: 6px;}



.CardListLineFlexRowCont{width:38%;   min-height:60px;  max-height:180px; 
					display:flex;  flex-direction:column;  justify-content:flex-start;  align-items: flex-start; align-content:flex-start;
					margin-top: 2px; margin-bottom: 2px;   
					background: var(--BasketListContainerBG);  border-radius: 6px;   }
.CardListLineFlexRowCont2{width:98%;  display:flex;  flex-direction:row;  justify-content:flex-start;  align-items: flex-start; align-content:flex-start;   
					padding-left:5px ;  padding-right: 10px; }

.CardListLineInput1{width:38%;  display:flex;  flex-direction:row;  justify-content:flex-start;  align-items: flex-start; align-content:flex-start;   
					padding-left:5px ;  padding-right: 10px;}
.CardListLineInput1 input{width:100%; height:100%; font-size: 2.4em;  font-weight: 500; text-align: left; 
						color: var(--FormsUserInputFontColor); border: 1px var(--BasketListContainerBG) solid;  }
.CardListLineInput2{width:58%;  display:flex;  flex-direction:row;  justify-content:flex-start;  align-items: flex-start; align-content:flex-start;   
					padding-left:5px ;  padding-right: 10px;}
.CardListLineInput2 input{width:100%; height:100%; font-size: 2.4em;  font-weight: 500; text-align: left; 
						color: var(--FormsUserInputFontColor); border: 1px var(--BasketListContainerBG) solid;  }


.CardPayButton{width:100%; height:100%; font-size: 2.4em;  font-weight: 700; text-align: center; 
						background: var(--ItemsListBasicDivBG); color: var(--ItemsListBasicDivColor);
						margin-top: 2px; margin-bottom: 2px;  
						border: 1px var(--BasketListContainerBG) solid;   border-radius: 6px;  }




/*

.CardListLineFlexRow form{width:100%; height:100%;}



.CardListLineTitle1{width:30%;  text-transform:none; font-size: 1em;      
						padding-left:5px ; padding-right: 10px; text-align: left;  
						color: var(--FormsUserInputTitleColor);}
.CardListLineTitle2{width:70%;  text-transform:none; font-size: 1em;      
						padding-left:5px ; padding-right: 10px; text-align: left;  
						color: var(--FormsUserInputTitleColor);}

.CardListLineInput1{width:30%;  display:flex;  flex-direction:row;  justify-content:flex-start;  align-items: flex-start; align-content:flex-start;   
					padding-left:5px ;  padding-right: 10px;}
.CardListLineInput1 input{width:100%; height:100%; font-size: 2.4em;  font-weight: 500; text-align: left; 
						color: var(--FormsUserInputFontColor); border: 1px var(--BasketListContainerBG) solid;  }

.CardListLineInput2{width:30%;  display:flex;  flex-direction:row;  justify-content:flex-start;  align-items: flex-start; align-content:flex-start;   
					padding-left:5px ;  padding-right: 10px;}
.CardListLineInput2 input{width:100%; height:100%; font-size: 2.4em;  font-weight: 500; text-align: left; 
						color: var(--FormsUserInputFontColor); border: 1px var(--BasketListContainerBG) solid;  }
.CardListLineInput3{width:40%;  display:flex;  flex-direction:row;  justify-content:flex-start;  align-items: flex-start; align-content:flex-start;   
					padding-left:5px ;  padding-right: 10px;}
.CardListLineInput3 input{width:100%; height:100%; font-size: 2.4em;  font-weight: 500; text-align: left; 
						color: var(--FormsUserInputFontColor); border: 1px var(--BasketListContainerBG) solid;  }
*/




/*
.CardListLineBig{width:98%;   min-height:90px;  max-height:250px; 
					display:flex;  flex-direction:column;  justify-content:flex-start;  align-items: flex-start; align-content:flex-start;
					margin-top: 2px; margin-bottom: 2px;   
					background: var(--BasketListContainerBG);  border-radius: 6px;}
.CardListLineInputBig{width:98%;  display:flex;  flex-direction:row;  justify-content:flex-start;  align-items: flex-start; align-content:flex-start;   
					padding-left:5px ;  padding-right: 10px;}
.CardListLineInputBig textarea{width:100%; height:100%; font-size: 2.4em;  font-weight: 500; text-align: left; 
						color: var(--FormsUserInputFontColor); border: 1px var(--BasketListContainerBG) solid;  }


.CardListLineFlexRow{width:98%;   min-height:60px;  max-height:180px; 
					display:flex;  flex-direction:row;  justify-content:space-between;  align-items: center; align-content:center;
					margin-top: 4px; margin-bottom: 4px;   
					background: var(--BasketListContainerBG);  border-radius: 6px;}

.CardListLineFlexRowTxt{width:80%;  text-transform:none; font-size: 0.9em;      
						padding-left:2px ; padding-right: 4px; text-align: left;  
						color: var(--FormsUserInputTitleColor);}

.CardListLineFlexCheckBox{width:20%;  text-transform:none; font-size: 2em;      
						padding-left:2px ; padding-right: 2px; text-align: left;  
						color: var(--FormsUserInputTitleColor);}					




.CardListLineImgBtnDiv{width:98%;  height:70px;  
			        display: flex;   flex-direction:row;  justify-content: space-around ;  align-items:center; align-content: center;
			        object-fit: scale-down }   
.CardListLineImgBtn{ max-height: 50px;}

*/




/*
.CheckOutPageContainer form{width:98%; height: 100%; max-width:450px;   margin:0px; 
			     	display: flex;  flex-direction:column;  align-content:flex-start; align-items:flex-start justify-content: center;
			     	background: var(--BasketListContainerBG);
			     	overflow-x:hidden; overflow-y:auto;}


.CheckOutPageContainer .form-row{width:98%;   min-height:60px;  max-height:180px; 
					display:flex;  flex-direction:column;  justify-content:flex-start;  align-items: flex-start; align-content:flex-start;
					margin-top: 2px; margin-bottom: 2px;   
					background: var(--BasketListContainerBG);  border-radius: 6px;}





.CheckOutPageContainer .form-row span{width:100%;  text-transform:none; font-size: 1em;      
						padding-left:5px ; padding-right: 10px; text-align: left;  
						color: var(--FormsUserInputTitleColor);}

.CheckOutPageContainer .form-row input{width:100%; height:100%; font-size: 2.4em;  font-weight: 500; text-align: left; 
						color: var(--FormsUserInputFontColor); border: 1px var(--BasketListContainerBG) solid;  }

*/