/*
   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;
      }





/* productview */

.banner {border-radius: 0px 0px 10px 10px;}

.highlightframe {width: 240px; padding: 1rem; box-sizing: border-box; margin-right: 20px; border-radius: 5px;}
.highlightname {font-size: 1.2rem; font-weight: 600;}
.highlightprice {font-size: 1.2rem; line-height: 1.2rem;}
.highlightimage {width: 100%; aspect-ratio: 1; border-radius: 5px; margin-bottom: 10px;}

.menucategoryname {font-size: 1.4rem; line-height: 50px; text-align: center; font-weight: 600; width: 100%;}
.menuproductblock {padding: 1.2rem; gap: 1rem; border-bottom: solid lightgray 1px;
	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;}

.cartbutton {font-size: 1.4rem; background: #AA0000; height: 60px; width: 200px; transform: translate(-220px, -90px);
	position: fixed; border-radius: 30px; top: 100%; left: 100%; 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;}
.cartbutton::part(label) {display: block;}
.cartbutton::part(prefix) {width: 30px;}




  
  
  
  

/* itemwindow */

.imagelay {gap: 1rem;}
.desclay {height: 100%; box-sizing: border-box;}

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

.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*/

.itemgrid {padding: 0rem 0rem;}
.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;}
.itemvert {padding: 1.8rem 0rem; background: #FFF; border-bottom: solid 1px #DDD;}






/* cartview */

.cartviewmain {padding: 1.8rem; gap: 3rem;}
.carttotal {font-size: 3rem; font-weight: 500; color: green;}
.cartsubtotal {font-size: 1.4rem;}
  
  

  
  
  
  
  
/* ordersview */
  
.pendentgrid {background: white; border-bottom: solid lightgray 4px;}

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








/* navigationpane */

.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;}
  






/* 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;
}
  
  
  
  .catss {}
  .invisi {display: none;}
  .lcatssb {opacity: .5;}
  .paddingland {padding-left: 0px;}
  .catview {width: 95vw; max-width: 250px; height: 100vh; position: fixed; top: 0px; left: -250px; flex-direction: column;}
  .catview2 {flex-direction: column; width: 100vw;}
  .caton {left: 0px;}
  .closebu {display: flex;}
  .catlay {}
  .catlay:active {opacity: .2;}
  .catdecoration {text-decoration: underline 2px; text-underline-offset: 4px;}
  

  

@media only screen and (max-width: 800px){
	
	vaadin-notification-card.noti::part(overlay) {
        font-size: 1rem;
      }
	
	.highlightframe {width: 160px; margin-right: 10px; padding: 10px;}
	.highlightname {font-size: 1rem;}
	.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;}
	
	.cartbutton {min-width: 60px; width: 60px; transform: translate(-90px, -90px);}
	.cartbutton::part(label) {display: none;}
	.cartbutton::part(prefix) {width: 20px;}
	
	
	.banner {border-radius: 0;}
	
	
	.itemgridproduct {font-size: 1.2rem;}
	.itemgridads {font-size: 1.0rem;}
	.itemvert {padding: 1.2rem 0rem;}
    
    
    .cartviewmain {padding: 1.2rem; gap: 2rem;}
    .carttotal {font-size: 2rem;}
    .cartsubtotal {font-size: 1.0rem;}
}

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

  	.menuproductblock {width: 100%; margin:0px;}
}

@media only screen and (orientation: portrait) {
	
	.closebu {display: none;}
	
	.productimagebig {width: 100% !important; max-width: 600px; max-height: 600px;}
	.desclay {width: 100%; max-width: 600px;}
	.imagelay {width: 100%; flex-direction: column;}
}

@media only screen and (orientation: landscape) {
	
   .productimagebig {width: 300px; height: 300px; min-width: 300px; min-height: 300px;}
   .desclay {max-width: 700px; min-width: 10px;}
   .imagelay {width: 100%; flex-direction: row; margin-bottom: 20px;}
   
   .paddingland {padding-left: 250px;}
   .catview {left: 0px;}
   .closebu {display: none;}
}

@media only screen and (orientation: landscape) and (min-width: 800px) {
	
   .productimagebig {width: 400px; height: 400px; min-width: 400px; min-height: 400px;}
}



.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 smoothshow {from {opacity: 0} to {opacity: 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;}}