/*
   CSS styling examples for the Vaadin app.

   This is the style entrypoint for the theme and together with css in ./components/ included
   automatically into the theme.

   Visit https://vaadin.com/docs-beta/latest/theming/application-theme/ for more information.
*/

/* Example: CSS class name to center align the content . */



/*@import 'https://fonts.googleapis.com/css?family=Nunito';*/
@import 'https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap';

@import 'customfield.css';


html{scroll-behavior: smooth; --lumo-font-family: 'Nunito', sans-serif;}

vaadin-notification-card.noti::part(overlay) {
        font-size: 2rem;
      }


/* company header */

.companytoplay {width: 100%; height: 100px; position: absolute;}
.companybanner {border-radius: 10px; height: 200px; width: 100%; 
	max-width: 1000px;  border: 4px white solid; z-index: 1; margin-top: 2rem;}
.companylogo {width: 200px; aspect-ratio: 1; border: solid 2px white; 
	border-radius: 0.5rem; position: relative; top: -40px; z-index: 2;}
.companycontainerlay {box-sizing: border-box; padding-left: 2rem; width: 100%; max-width: 1000px; height: 170px; margin-bottom: 2rem;}
.companyinfolay {padding-top: 1rem; padding-left: 1rem; box-sizing: border-box; width: 100%;} /*background: #F6F6F6;*/
.companyname {font-size: 2rem; line-height: 2rem; font-weight: 700;}
.companylocationlay {align-items: center; gap: 1rem; box-sizing: border-box; margin-top: 0.3rem;}
.companylocation {font-size: 1.2rem; line-height: 1.2rem; font-weight: 600; color: #888;}
.companymorebutton {color: #888; font-size: 1rem; font-weight: 600; height: 1.6rem; padding: 0rem 1rem;}
.companystatuslay {width: 100%; max-width: 400px; margin-top: 0.6rem; justify-content: space-between;}
.companymenubutton {height: 34px; aspect-ratio: 1; min-width: 10px;  min-height: 10px; padding: 0px; 
	position: absolute; top: 10px; right: 10px; z-index: 2; color: #FFF; background: transparent;}
.companystatusclosed {justify-content: start;}

.companycontainerlaynobanner {margin-top: 6rem;}


.pointsframe {box-sizing: border-box; width: 100%; max-width: 1000px; padding: 0rem 1rem 0rem 1rem; margin-bottom: 2rem;}
.pointslay {box-sizing: border-box; width: 100%; max-width: 400px; padding: 1rem; border-radius: 4px; 
	border: 1px solid #CCC; background: white; gap: 1rem; margin-bottom: 2rem;}
.pointsicon {font-size: 0.9rem;}
.pointstitle {font-size: 1rem; font-weight: 700; color: #555; margin-left: 1rem;}
.pointsdesc {font-size: 1rem; font-weight: 500; color: #999;}
.pointsinfo {font-size: 1rem; background: transparent; padding: 0px; height: 24px; color: #555; margin-left: 1rem;}



/* about */

.abouttab {font-weight: 600; height: 2rem; width: 120px; padding-left: 10px; gap: 10px; background: #EEE; border-radius: 5px 5px 0px 0px;}




/* highlight */

.highlightlay {box-sizing: border-box; width: 100%; align-items: center; padding: 0rem 0rem 0rem 1rem;}
.highlightlabellay {width: 100%; max-width: 1000px;}
.highlightlabel {background: #F6F6F6; border-radius: 0.4rem; padding: 0.2rem 1rem; position: relative; bottom: 14px; 
	font-size: 1.2rem; line-height: 1.2rem; font-weight: 600; color: #888;}
.highlightcontentlay {box-sizing: border-box; gap: 0.8rem; padding: 6px 0px;}
.highlightframe {width: 240px; box-sizing: border-box; border-radius: 6px; box-shadow: 2px 2px 4px 1px rgba(0, 0, 0, 0.2); cursor: pointer;}
.highlighttextlay {padding: 1rem; gap: 1rem;}
.highlightname {font-size: 1.2rem; line-height: 1.8rem; font-weight: 600;}
.highlightprice {font-size: 1.2rem; line-height: 1.2rem;}
.highlightimage {width: 100%; aspect-ratio: 1; border-radius: 6px 6px 0px 0px;}




/* menusection */

.menucategoryname {font-size: 1.4rem; line-height: 50px; font-weight: 600; width: 100%; text-align: center;}
.menuproductblock {padding: 1.2rem; gap: 1rem; border-bottom: solid lightgray 1px; cursor: pointer;
	box-sizing: border-box; background: white; flex-shrink: 0; min-height: 100px; max-height: 200px; width: 49%;  margin:0.5%; border-radius: 5px;}
.menuthumb {height: 100px; width: 100px; border-radius: 5px;}
.menutextlay {height: 100%; gap: 10px;}
.menuname {font-size: 1.2rem; line-height: 1.2rem; font-weight: 600; color: #333;}
.menuprice {font-size: 1.2rem; line-height: 1.2rem; font-weight: 500; color: green;}
.menuoldprice {font-size: 1.2rem; line-height: 1.2rem; font-weight: 300; text-decoration: line-through; color: gray; margin-left: 10px;}
.menudescription {font-size: 1rem; color: #666;width: 100%; overflow: hidden;}
.productviewmodallay {width: 100vw; height: 100vh; position: fixed; z-index: 101; pointer-events: auto; background-color: rgba(0, 0, 0, 0.5); left: 0px;
	 box-sizing: border-box;}






/* categoryview */

.categoryview {box-sizing: border-box; overflow: auto;}
.categoryview0 {width: 95vw; max-width: 250px; height: 100vh; position: fixed; top: 0px; flex-direction: column; padding: 1rem; 
	box-shadow: 0px 0px 6px #777; box-sizing: border-box; left: 0px; z-index: 100; transition: left .5s;}
.categoryview1 {flex-direction: row; width: 100vw; max-width: 1000px;}
.categorylay0 {flex-direction: column;}
.categorylay1 {flex-direction: row;}

.catdecoration {text-decoration: underline 2px; text-underline-offset: 4px;}
.categoryviewname {font-size: 1.2rem; font-weight: 500; cursor: default;}
.categoryviewblock {padding: 0.7rem 1rem 0.7rem 1rem; align-items: center;}
.caton {left: 0px !important;}








  

/* itemwindow */

.itemview {background: white; padding: 1rem; box-sizing: border-box; box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.2); z-index: 102; position: fixed; gap: 2rem; 
border-radius: 5px; top: 50vh; transform-origin: top left; left: 50vw; flex-direction: row; height: 95%; max-height: 600px; width: 95vw; max-width: 1200px; }
	 
.itemviewt {animation: itemviewkf1 ease-out 1; animation-delay: 0s; animation-duration: 0.4s; animation-fill-mode: forwards;}
.itemviews {animation: itemviewkf2 ease-out 1; animation-delay: 0s; animation-duration: 0.4s; animation-fill-mode: forwards;}

.itemviewimagelay {border-radius: 5px; aspect-ratio: 1; height: 100%; width: auto;}
.itemviewdesclay {box-sizing: border-box; flex: 1; height: 100%;}
.itemviewrolllay { box-sizing: border-box; flex-direction: column; width: 100%; overflow: auto;}



.itemname {font-size: 1.2rem; font-weight: 600; color: #555;}
.itemdescription {font-size: 1rem; color: #666; width: 100%;}

.itemwindowcattitle {font-weight: 500; text-align: center; border-radius: 4px; width: 100%; margin-top: 2rem ;margin-bottom: 0.8rem;}
.optionradio {font-size: 20px; font-weight: 500; background: white; color: dodgerblue; border: none; outline:none; box-shadow:none;}

.itemwindowcommandslay {padding: 1.2rem 0rem; margin-top: 2rem; gap: 1rem; border-top: 1px solid #CCC; width: 100%; box-sizing: border-box; 
	flex-wrap: wrap; justify-content: end;}
.itemwindowamountlabel {font-size: 1.2rem; font-weight: 500; border: solid gray 1px; border-radius: 4px; text-align: center; 
	width: 40px; aspect-ratio: 1; line-height: 40px;}
.itemwindowcounterlabel {font-size: 1.2rem;}
.optionsbutton {font-size: 1.2rem; font-weight: 500; background: white; color: dodgerblue; border: none; outline:none; box-shadow:none; 
	width: 40px; min-width: 40px; padding: 0px;}
.optionsbutton:active {background: #EEE;}
.addnotesbuttoncolor {background: dodgerblue;}
.itemvalue {font-size: 1.4rem; font-weight: 600; color: green; text-align: right;}
.itemwindowconfirm {background: limegreen; color: white; height: 40px; font-size: 1.2rem;}
.counterbutton {width: 110px; height: 60px; background: green; transform: translate(-140px, -90px);}


  
  
  
  
  
  

  
/* itemgrid*/

.itemgridproduct {font-size: 1.8rem; font-weight: 500; color: #555;}
.itemgridads {font-size: 1.4rem; font-weight: 500; color: #555;}
.itemgridvalue {color: green; text-align: right;}
.itemgridblock {padding: 1.8rem 0rem; background: #FFF; border-bottom: solid 1px #DDD;}

.itemgridproduct2 {font-size: 1.2rem; font-weight: 500; color: #555;}
.itemgridads2 {font-size: 1.0rem; font-weight: 500; color: #555;}
.itemgridvalue2 {color: green; text-align: right;}
.itemgridblock2 {padding: 1.2rem 0rem; background: #FFF; border-bottom: solid 1px #DDD;}








/* cartview */

.cartviewmain {gap: 3rem;}
.carttotal {font-size: 2rem; font-weight: 500; color: green;}
.cartsubtotal {font-size: 1.1rem;}
.cartview {width: 90vw; max-width: 400px; max-height: 100vh; position: fixed; top: 10px; right: -420px; flex-direction: column; padding: 1rem; 
  	box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); overflow: auto; box-sizing: border-box; background: white; border-radius: 4px;}
.cartviewon {right: 0px;}
.cartbutton {font-size: 1.4rem; background: #AA0000; height: 60px; width: 200px;
	position: fixed; border-radius: 30px; bottom: 20px; right: 20px; color: white; 
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); z-index: 100; transition: right 1s;}
.cartbutton::part(label) {display: block;}
.cartbutton::part(prefix) {width: 30px;}
.cartbuttonoff {right: -300px;}
.cartbuttoneat {animation: cartbuttonkf ease-out 1; animation-delay: 0.3s; animation-duration: 0.3s; animation-fill-mode: forwards;}
  

  
  
  
  
  /* formview */

.formviewsessionlabel {font-weight: 700;}
.formviewsessionlay {box-sizing: border-box; border-bottom: 1px solid  #DDD; padding: 1rem 0rem 1rem 0rem;}
  
  
  
  
  
  
/* confirmationview */

.confviewphone {font-size: 1.1rem; font-weight: 600;}
.confviewaddress {font-size: 1.1rem;}
.confviewpm {font-size: 1.1rem; font-weight: 600;}
.confviewchangefor {font-size: 1.1rem;}
.confviewdate {font-size: 1rem;}
.confviewtime {font-size: 1rem; margin-left: 0.5rem;}
  
  
  
  
  
  
  
/* ordersview */

.ordersviewdate {font-size: 1rem; font-weight: 600; font-size: 1.1rem;}
.ordersviewtime {font-size: 1rem; margin-left: 0.5rem; font-size: 1.1rem; margin-left: 0.5rem;}

.ordersviewblock {background: white; border-bottom: solid lightgray 4px; padding-top: 1rem; padding-bottom: 1rem}

.importbutton {font-size: 16px; font-weight: bold; background: white; color: dodgerblue; border: none; outline:none; box-shadow:none;}
.importbutton:active {background: #EEE;}








/* navigationpane */

.navigcontentlay {margin: 1rem; overflow: auto; width: 100%; max-width: 900px; border-radius: 1rem;}
.navigbutton {font-size: 16px;  background: transparent; border: none; outline:none; box-shadow:none; border-radius:0px; padding-left: 4px; padding-right: 4px;}
.navigbutton:active {background: rgba(255,255,255,0.5);}
.navigbuttongo {text-align: right;}
.navigbuttonback {text-align: left;}

.confirmbutton {font-size: 20px; border: none; outline:none; box-shadow:none; border-radius:5px; display: block; white-space: normal; text-align: center;}
.confirmbutton:active {background: rgba(255,255,255,0.5) !important;}
  







/* values lay */

.valueslaylabel {color: #AAA;}







/* payment view*/

.payma {gap: 40px; padding: 40px;}
.payicon {font-size: 2rem;  color: #888; font-weight: 250;}
.payic1 {color: forestgreen;}
.payic2 {color: orange;}
.payic3 {color: dodgerblue;}
.paylabel {font-size: 3rem; color: #888; font-weight: 250;}
.paybutton {border-radius: 5px; cursor: pointer; width: 400px; height: 80px; background: #EEE; padding: 20px; gap: 20px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
.paybutton:hover {opacity: 0.5;}
.pix {background-image: url(pix.svg); background-size: contain; background-repeat: no-repeat; width: 180px; height: 90px; margin: auto; margin-top: 10px;}





  
  .unselectable {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
  
  
  
  
  

  


@media only screen and (max-width: 1500px){
	
	.categoryview {left: -250px;}
}


@media only screen and (max-width: 1000px){

	.companytoplay {display: none;}
    .companybanner {border-radius: 0px 0px 0px 0px; margin-top: 0rem; border: none;}
    .companymenubutton {top: 200px; right: 10px; color: #444;}
    .companymenubuttonnobanner {top: 100px;}
    
    
  	.menuproductblock {width: 100%; margin:0px; border-radius: 0px;}

}


@media only screen and (max-width: 800px){
	
	vaadin-notification-card.noti::part(overlay) {
        font-size: 1rem;
    }
      
      
    .companybanner {height: 120px;}
    .companycontainerlay {padding-left: 0rem; justify-content: center; height: auto;}
    .companyinfolay {padding: 2rem 1rem 1rem 1rem; align-items: center; width: 100%;}
    .companylogo {width: 80px; border: solid 2px white; border-radius: 0.4rem; position: absolute; top: 60px; left: 50%; transform: translate(-50%, 0px);}
    .companyname {font-size: 1.4rem; font-weight: 700;}
    .companylocationlay {gap: 1rem; margin-top: 0rem;}
    .companylocation {font-size: 1rem; line-height: 1rem;}
    .companymorebutton {color: #888; font-size: 0.8rem; height: 1.4rem; padding: 0rem 1rem;}
    .companystatuslay {width: 100%; max-width: 400px; margin-top: 0.4rem;}
    .companystatusclosed {justify-content: center;}
    .companymenubutton {top: 120px; right: 10px;}
    .companymenubuttonnobanner {top: 100px;}
	.companylogonobanner {top: 40px;}
    

	
	
	.highlightlabel {border-radius: 0.4rem 0.4rem 0.4rem 0rem; padding: 0.2rem 1rem; font-size: 1rem; line-height: 1.2rem; bottom: 12px; left: -1rem;}
	.highlightcontentlay {gap: 0.8rem;}
	.highlightframe {width: 160px;}
	.highlighttextlay {padding: 0.5rem; gap: 0.5rem;}
	.highlightname {font-size: 1rem; line-height: 1.4rem;}
	.highlightprice {font-size: 1rem;}
	
	
	
	.menucategoryname {font-size: 1.2rem; line-height: 50px;}
	.menuproductblock {padding: 1rem;}
	.menuname {font-size: 1rem; line-height: 1rem;}
	.menuprice {font-size: 1rem; line-height: 1rem;}
	.menuoldprice {font-size: 1rem; line-height: 1rem;}
	.menudescription {font-size: 0.9rem;}
	

	.banner {border-radius: 0;}
	
	
	
	
	
	.itemgridproduct {font-size: 1.2rem;}
	.itemgridads {font-size: 1.0rem;}
	.itemgridblock {padding: 1.2rem 0rem;}
    
    
    
    .cartviewmain {padding: 1.2rem; gap: 2rem;}
}


@media only screen and (orientation: portrait) {
	
	.closebu {display: flex;}

	.navigcontentlay {margin: 0rem; border-radius: 0rem;}
	
	.cartview {top: 0px; height: 100vh; border-radius: 0px;}
	
	
	
	.itemview {max-height: 95%; overflow: auto; flex-direction: column;}
	.itemviewimagelay {width: 100%; height: auto; max-width: 500px;}
	.itemviewdesclay {flex: 0;}
	.itemviewrolllay {width: 100%; overflow: visible;}
	
}




.stylishbutton {background: dodgerblue;height: 100%; width: 100%; animation: stylishbutton 0.5s linear 1; animation-delay: 0s;}
.stylishbutton:hover {filter: brightness(110%);}
.stylishbutton:active {filter: brightness(120%);}
.stylishbuttontext {animation: stylishbuttontext 1s linear 1; animation-delay: 0s; user-select: none;}

@keyframes stylishbutton {0% {width: 0%; height: 4%;} 50% {width: 100%; height: 4%;} 100% {width: 100%; height: 100%;}}
@keyframes stylishbuttontext {0% {opacity: 0;} 50% {opacity: 0;} 100% {opacity: 1;} }

@keyframes itemviewkf1 {from {transform: translateY(-100vh) translateX(-50%)} to {transform: translateY(-50%) translateX(-50%)}}
@keyframes itemviewkf2 {
	from {transform: translateY(-50%) translateX(-50%) scale(1); } 
	to {transform: translateY(calc(0% + 40vh)) translateX(calc(0% + 40vw)) scale(0)}
}

@keyframes cartbuttonkf {0% {transform: scale(1);} 75% {transform: scale(1.1);} 100% {transform: scale(1);}}

@keyframes zoom {from {transform: scale(1.0)} to {transform: scale(1.1)}}

@keyframes pendentokbutton {from {width: 0px; height: 0px; font-size: 0px;} to {width: 60px; height: 60px; font-size: 18px;} }

@keyframes presbutton1 {0% {top: 300px} 66% {top: 300px} 100% {top: 0}}
@keyframes presbutton2 {0% {right: 100%; opacity:0;} 75% {right: 100%; opacity:1;} 100% {right: 0}}
@keyframes presbutton3 {0% {left: 100%; opacity:0;} 75% {left: 100%; opacity:1;} 100% {left: 0}}


@keyframes infoodd {0% {right: 100%; opacity:0;} 100% {right: 0}}
@keyframes infoeven {0% {left: 100%; opacity:0;} 100% {left: 0}}


@keyframes splashfed {0% {opacity:0;} 25% {opacity:1;} 75% {opacity:1;} 100% {opacity:0;} }

@keyframes shine {70% {color: dodgerblue;} 100% {color: #EEE;}}

@keyframes hidyou1 {0% {opacity:1;} 100% {opacity:1;}}
@keyframes hidyou2 {0% {opacity:0;} 16.66% {opacity:1;} 50% {opacity:1;} 66.66%{opacity:0;} 100%{opacity:0;}}
@keyframes hidyou3 {0% {opacity:0;} 11.11% {opacity:1;} 33.33% {opacity:1;} 44.44%{opacity:0;} 100%{opacity:0;}}
@keyframes hidyou4 {0% {opacity:0;} 8.33% {opacity:1;} 25% {opacity:1;} 33.33%{opacity:0;} 100%{opacity:0;}}
@keyframes hidyou5 {0% {opacity:0;} 6.66% {opacity:1;} 20% {opacity:1;} 26.66%{opacity:0;} 100%{opacity:0;}}
@keyframes hidyou6 {0% {opacity:0;} 5.55% {opacity:1;} 16.66% {opacity:1;} 22.27%{opacity:0;} 100%{opacity:0;}}
@keyframes hidyou7 {0% {opacity:0;} 4.76% {opacity:1;} 14.29% {opacity:1;} 19.04%{opacity:0;} 100%{opacity:0;}}
@keyframes hidyou8 {0% {opacity:0;} 4.16% {opacity:1;} 12.5% {opacity:1;} 16.66%{opacity:0;} 100%{opacity:0;}}
@keyframes hidyou9 {0% {opacity:0;} 3.7% {opacity:1;} 11.11% {opacity:1;} 14.81%{opacity:0;} 100%{opacity:0;}}
@keyframes hidyou9 {0% {opacity:0;} 3.33% {opacity:1;} 10% {opacity:1;} 13.33%{opacity:0;} 100%{opacity:0;}}