/*!
 *
 */

/*General Style*/
@import "https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css";

*{
   -ms-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
}

body{
    padding-top: 70px; /* Required padding for .navbar-fixed-top. Change if height of navigation changes. */
    font-family: 'Lato', sans-serif;
    color: #34495e;
    background-color: #E6ECF0;
}

html{
  overflow: hidden;
  height: 100%;
}
body{
  overflow: auto;
  height: 100%;
}

@media (max-width: 1291px){
  .navbar-header{
      float: none;
  }
  .navbar-left,.navbar-right{
      float: none !important;
  }
  .navbar-toggle{
      display: block;
  }
  .navbar-collapse{
      border-top: 1px solid transparent;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
  }
  .navbar-fixed-top{
      top: 0;
      border-width: 0 0 1px;
  }
  .navbar-collapse.collapse{
      display: none!important;
      overflow-x: hidden !important;
  }
  .navbar-nav{
      float: none!important;
      margin-top: 7.5px;
  }
  .navbar-nav>li{
      float: none;
  }
  .navbar-nav>li>a{
      padding-top: 10px;
      padding-bottom: 10px;
  }
  .collapse.in{
      display:block !important;
      overflow-y: auto !important;
  }
}

/* unset bs3 setting */
.modal-open{
 overflow: auto;
}

h2{
   font-size: 1.9em;
   font-weight: bolder;
}

a:link{
  text-decoration: none!important;
}

.grey{
   color: #a1b1bc;
}

.light-grey{
   color: #b8c6d0;
}

.white{
   color: #fff;
}

.dark-blue{
   color: #34495e !important;
}

.red{
   color: #c0392b;
}

.light-blue{
   color: #1abc9c;
}

.text-bold{
   font-weight: 700;
}

.nopadding{
   padding: 0 !important;
   margin: 0 !important;
}

.btn-green{
   color: #fff;
   background-color: #A5C675;
   border: none;
}

.btn-green:hover{
   color: #fff;
   background-color: #40D47E;
}

.btn-red{
   color: #fff;
   background-color: #FF7676;
   border: none;
}

.btn-red:hover{
   color: #fff;
   background-color: #FF7676;
}

.btn-blue{
   color: #fff;
   background-color: #3498db;
   border: none;
}

.btn-blue:hover{
   color: #fff;
   background-color: #2980b9;
}


.paid{
   background-color:#2ecc71;
   font-weight: bold;
   font-size: 9px;
   padding:5px;
   color:#fff;
   border-radius:3px;
}
.unpaid{
   background-color:#e74c3c;
   font-weight: bold;
   font-size: 9px;
   padding:5px;
   color:#fff;
   border-radius:3px;
}
.Partiallypaid{
   background-color:#f1c40f;
   font-weight: bold;
   font-size: 9px;
   padding:5px;
   color:#fff;
   border-radius:3px;
}

.whiteBg{
   background-color: #fff;
}

.text-left{
   text-align: left !important;
}

.text-center{
   text-align: center;
}

.float-right{
   float: right;
}

.float-left{
   float: left;
}

.container-fluid{
   margin-top: 10px;
}

.container-small{
   max-width: 500px;
}

.modal-header{
    background-color: #40484E;
    color: #FFF;
}

.center{
   margin: 0 auto;
}

.btn-add{
   background-color: #40484E;
   color: #fff;
   margin-bottom: 100px;
}
.btn-add:hover{
   color: #eee;
}
.btn-add:focus{
   color: #eee;
}
.btn-danger{
    background: #d43f3a;
}

div.DTTT{ margin-bottom: 0.5em; float: right; }
div.dataTables_wrapper{ clear: both; }

.content{
   margin-top: 90px;
   margin-bottom: 90px;
}

#printSection{
   color: #000;
   margin: 0 auto;
}

#ticket .modal-dialog
{
  width: 380px;
}


#modal-body{
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

.print-new-order-btn{
   position: relative;
   width: 102px;
   min-width: 102px;
   max-width: 102px;
   height: 34px;
   min-height: 34px;
   box-sizing: border-box;
   padding-left: 8px;
   padding-right: 8px;
   text-align: center;
   vertical-align: middle;
   line-height: 20px;
   overflow: visible;
}

.print-new-order-btn:hover,
.print-new-order-btn:focus,
.print-new-order-btn:active{
   width: 102px;
   min-width: 102px;
   max-width: 102px;
   height: 34px;
   min-height: 34px;
   padding-left: 8px;
   padding-right: 8px;
   transform: none;
   box-shadow: none;
   outline: none;
}

.print-new-order-btn .new-order-label{
   display: inline-block;
   margin-left: 5px;
   font-size: 12px;
   font-weight: 700;
   line-height: 20px;
   vertical-align: middle;
   white-space: nowrap;
}

.print-new-order-btn .new-order-count{
   position: absolute;
   top: -7px;
   right: -7px;
   min-width: 18px;
   height: 18px;
   padding: 0 5px;
   border-radius: 9px;
   background: #FFC0CB;
   color: #333;
   font-size: 11px;
   font-weight: 700;
   line-height: 18px;
}

#printSection .new-order-print-heading{
   display: inline-block;
   margin: 0 0 8px 0;
   padding: 2px 6px;
   border: 1px solid #000;
   color: #000;
   font-size: 12px;
   font-weight: 700;
   text-transform: uppercase;
}

#printSection .new-order-print-tag{
   display: inline-block;
   margin-left: 4px;
   padding: 1px 4px;
   border: 1px solid #000;
   color: #000;
   font-size: 9px;
   font-weight: 700;
   line-height: 1.2;
   text-transform: uppercase;
   white-space: nowrap;
}

/*print styling*/@media print{
    /* Never print a modal mid-animation: force it fully visible (a fade-in
       captured at ~20% opacity shows as a blank print preview). */
    .modal, .modal.in, .modal.fade{
      opacity: 1 !important;
    }
    .modal.fade .modal-dialog{
      transform: none !important;
      transition: none !important;
    }
    .modal-backdrop{
      display: none !important;
    }
    /* Kitchen: when printing a new order, hide rows that were already printed. */
   body.print-new-order #printSection tr:not(.new-order-item){
      display: none !important;
   }

   .modal-dialog{
      width: 100% !important;
   }
   .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12{
  float: left;
}
.col-md-12{
  width: 100%;
}
.col-md-11{
  width: 91.66666666666666%;
}
.col-md-10{
  width: 83.33333333333334%;
}
.col-md-9{
  width: 75%;
}
.col-md-8{
  width: 66.66666666666666%;
}
.col-md-7{
  width: 58.333333333333336%;
}
.col-md-6{
  width: 50%;
}
.col-md-5{
  width: 41.66666666666667%;
}
.col-md-4{
  width: 33.33333333333333%;
 }
 .col-md-3{
   width: 25%;
 }
 .col-md-2{
   width: 16.666666666666664%;
 }
 .col-md-1{
  width: 8.333333333333332%;
 }
  body *{
    visibility:hidden;
  }
  .container-fluid{
     display: none;
 }
  #printSection, #printSection *{
    visibility:visible;
  }
  #printSectionInvoice, #printSectionInvoice *{
    visibility:visible;
  }
  #printSection{
     text-transform:uppercase;
     font-size: 9px !important;
     left: 0;
     top: 0;
     padding: 0;
     margin:0;
  }
  #printSection h4{
     font-size: 12px;
  }
  #printSection tr td{
     font-size: 9px !important;
     margin: 0;
     padding: 0;
 }
 #printSection tr td span{
    font-size: 8px !important;
    color: #aaa !important;
}
 #printSection .bg-success, #printSection .bg-danger{
    visibility:hidden;
}
  @page{
  margin: 0;
  }
  .hiddenpr{
      display: none !important;
  }
  html, body{
  zoom: 100%;
  overflow:hidden !important;
  }
}

/*page loading animation*/
#loadingimg{
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: url("../img/Preloader.gif") 50% 50% no-repeat #f9f9f9;
}

/*empty liste message style*/

.messageVide{
   font-size: 30px;
   width: 100%;
   background-color: white;
   padding: 1.5em 0;
   border-radius: 5px;
   font-weight: lighter;
   display: inline-block;
   text-align: center;
}
.messageVide span{
   font-size: 15px;
}

/*slimscroll fix*/

.slimScrollDiv{
   display: inline-block !important;
   width: 100% !important;
}

#productList{
   width: 100% !important;
}

/*******************************navbar style*******************************/
.menu-text{
  padding-left: 5px;
  font-weight: 600;
  letter-spacing: 1px;
  font-size: 11px;
  text-transform: uppercase;
  font-family: "Open Sans";
}

.navbar-brand{
   margin-right: 50px;
   margin-top: -8px;
}

.navbar-brand img{
   width: 100px;
}

.navbar{
   -webkit-box-shadow: 0px 3px 18px 0px rgba(0,0,0,0.3);
   -moz-box-shadow: 0px 3px 18px 0px rgba(0,0,0,0.3);
   box-shadow: 0px 3px 18px 0px rgba(0,0,0,0.3);
}

.navbar-nav a{
   color: #a1b1bc;
}

.flag{
   width: 35px;
   margin-right: 10px;
}

.language ul li{
   padding: 10px 0;
}

.language ul li a{
   font-weight: bold;
}

/*******************************left side style*******************************/

.left-side{
   background-color: #F7F7F7;
   border-radius: 5px;
   padding-bottom: 20px;
   margin-bottom: 150px;
   border: 3px solid #E6ECF0;
}

/*top section*/

.barcode{
   margin-top: 1.5em;
}

.table-header h3{
   font-weight: 700;
   font-size: 1.1em;
   margin: 20px 0;
   text-align: center;
   text-transform: uppercase;
}


.client-add span{
   float: right;
   margin-top: 20px;
}

/*table section*/

.product-details{
   border: none;
   margin-bottom: 3px;
   color: #81909a;
}

.product-details input[type="text"]{
   width: 2.1em;
   padding: 3px;
   display: inline;
   text-align: center;
   height: 1.8em;
}

.delete-product{
   color: #f65e48;
   margin-top: 1px;
}

.textPD{
   margin-top: 5px;
   float: left;
}

.subtotal{
   float: right;
}

/*footer style (total section)*/


.totalTab table tr:last-child td:first-child{
    -moz-border-radius-bottomleft:10px !important;
    -webkit-border-bottom-left-radius:10px !important;
    border-bottom-left-radius:10px !important;
}

.totalTab table tr:last-child td:last-child{
    -moz-border-radius-bottomright:10px !important;
    -webkit-border-bottom-right-radius:10px !important;
    border-bottom-right-radius:10px !important;
}

.totalTab .active{
   font-weight: bolder;
}

.total-input{
   border: none;
   outline: none;
}

/*******************************right side style*******************************/
/*Hold tabs styling*/
.Hold{
   cursor: pointer;
   text-align:center;
   margin:5px 1px;
   padding: 2px 13px;
   background-color:#E2E2E2;
   border-radius:3px;
   color:#6B6B6B;
   text-transform:uppercase;
   font-size: 20px;
   display:inline-block;
   font-weight:600;
   padding-bottom: 7px;
   border-bottom: 3px solid #6EC89B;
}
.Hold span{
   font-size: 12px;
   color:#b9b2b2;
   margin-left: 8px;
}
.selectedHold{
   background-color:#6B6B6B;
   color:#E2E2E2;
   border-bottom: 3px solid #f65e48;
}
.pl{
   background-color:#aaaaaa;
   color:#fff;
   border-bottom: 3px solid #ffb7ac;
}
/*categorie styling*/
.categories{
   cursor: pointer;
   text-align:center;
   margin:5px 0;
   padding: 10px 20px;
   background-color:#E2E2E2;
   border-radius:3px;
   color:#6B6B6B;
   text-transform:uppercase;
   display:inline-block;
   font-weight:500;
   padding-bottom: 7px;
   border-bottom: 3px solid #6EC89B;
}
.selectedGat{
   background-color:#6B6B6B;
   color:#E2E2E2;
   border-bottom: 3px solid #f65e48;
}
/*search bar styling*/
#searchContaner{
    margin-top:10px;
}
.stylish-input-group .input-group-addon{
    background: white !important;
}
.stylish-input-group .form-control{
	border-right:0;
	box-shadow:0 0 0;
	border-color:#ccc;
}
.stylish-input-group button{
    border:0;
    background:transparent;
}
/*product section styling*/
.right-side{
   background-color: #F7F7F7;
   border-radius: 5px;
   padding-bottom: 20px !important;
   border: 3px solid #E6ECF0;
   overflow: hidden;
}

.product{
   height: 120px;
   width: 120px;
   border-radius: 8px;
   text-align: center;
   background-size: cover;
   margin-top: 20px;
   color: #fff;
   overflow: hidden;
   -webkit-transition: all 0.3s ease-in-out 0.1s;
   -moz-transition: all 0.3s ease-in-out 0.1s;
   -o-transition: all 0.3s ease-in-out 0.1s;
   -ms-transition: all 0.3s ease-in-out 0.1s;
   transition: all 0.3s ease-in-out 0.1s;
}

.product img{
   width: 120px;
   height: 120px;
   opacity: 0.3;
   margin-top: -91px;
   position: absolute;
   left: 0;
   top: 90px;
   -webkit-transition: all 0.3s ease-in-out 0.1s;
   -moz-transition: all 0.3s ease-in-out 0.1s;
   -o-transition: all 0.3s ease-in-out 0.1s;
   -ms-transition: all 0.3s ease-in-out 0.1s;
   transition: all 0.3s ease-in-out 0.1s;
}

.product:hover img{
   -webkit-transform: scale(1.5);
   -moz-transform: scale(1.5);
   -o-transform: scale(1.5);
   -ms-transform: scale(1.5);
   transform: scale(1.5);
   opacity: 0.2;
}

.color01{
   background-color: #34495e;
}
.color02{
   background-color: #1abc9c;
}
.color03{
   background-color: #2ecc71;
}
.color04{
   background-color: #3498db;
}
.color05{
   background-color: #9b59b6;
}
.color06{
   background-color: #e67e22;
}
.color07{
   background-color: #e74c3c;
}

.color08{
   background-color: #fff;
   color: black;
}
.color08 img{
   opacity: 0.4 !important;
}

.product h3{
   display: inline-block;
   font-weight: 700;
   font-size: 0.9em;
   text-transform: uppercase;
   -webkit-transition: all 0.1s ease-in-out 0.1s;
   -moz-transition: all 0.1s ease-in-out 0.1s;
   -o-transition: all 0.1s ease-in-out 0.1s;
   -ms-transition: all 0.1s ease-in-out 0.1s;
   transition: all 0.1s ease-in-out 0.1s;
}

.product:hover h3{
   opacity: 1;
}

.mask h3{
   margin-top: 0;
   opacity: 0;
}

.product p{
   opacity: 0;
   font-size: 0.6em;
   text-transform: uppercase;
   -webkit-transform: scale(2);
   -moz-transform: scale(2);
   -o-transform: scale(2);
   -ms-transform: scale(2);
   transform: scale(2);
   -webkit-transition: all 0.1s ease-in-out 0.1s;
   -moz-transition: all 0.1s ease-in-out 0.1s;
   -o-transition: all 0.1s ease-in-out 0.1s;
   -ms-transition: all 0.1s ease-in-out 0.1s;
   transition: all 0.1s ease-in-out 0.1s;
}
.product:hover p{
   opacity: 0.7;
   -webkit-transform: scale(1);
   -moz-transform: scale(1);
   -o-transform: scale(1);
   -ms-transform: scale(1);
   transform: scale(1);
}

.product:hover{
   -webkit-box-shadow: 0px 0px 34px -4px rgba(0,0,0,0.53);
   -moz-box-shadow: 0px 0px 34px -4px rgba(0,0,0,0.53);
   box-shadow: 0px 0px 34px -4px rgba(0,0,0,0.53);
}


/******** datatable styling ****/

.dataTables_filter{
   margin-top: 15px;
}


/***************** Media queries **********/

/* ipad Landscape */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (orientation: landscape)
  and (-webkit-min-device-pixel-ratio: 1){

     .product{
       height: 90px;
       width: 90px;
      }

      .product img{
         width: 90px;
         -ms-transform: scale(1.2); /* IE 9 */
         -webkit-transform: scale(1.2); /* Safari */
         transform: scale(1.2);
      }

      .product h3{
         font-size: 0.7em;
         margin-bottom: -10px;
      }

      .textPD{
         font-size: 0.7em;
         font-weight: 600;
         margin-left: 5px;
      }

      .product-details input[type="text"]{
         width: 1.5em;
         padding: 3px;
         border: none;
         display: inline;
         text-align: center;
         height: 1.8em;
      }
}

/* nexus 7 Portrait */
@media screen
  and (device-width: 600px)
  and (device-height: 960px)
  and (-webkit-min-device-pixel-ratio: 1)
  and (orientation: portrait){

     .textPD{
        font-size: 0.7em;
        font-weight: 600;
     }

     .product-details input[type="text"]{
        width: 1.5em;
        padding: 3px;
        border: none;
        display: inline;
        text-align: center;
        height: 1.8em;
     }
}

/* phone Portrait */
@media only screen
  and (min-device-width: 360px)
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait){
   .barcode{
      margin-bottom: 15px;
   }

   .table-header{
      display: none;
   }
   .productNum i{
      display: none;
   }
   .productD{
      margin-left: -15px;
      margin-top: -25px;
   }
   .product{
     height: 90px;
     width: 90px;
    }

    .product h3{
      font-size: 0.7em;
    }

    .product img{
       width: 90px;
    }

    .product p{
      display: none;
   }
}


/************************** LOGIN **********************/

.loginmodal-container{
  padding: 30px;
  max-width: 350px;
  width: 100% !important;
  background-color: rgba(0,0,0,0.5);
  margin: 0 auto;
  margin-top: 150px;
  border-radius: 10px;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  text-align: center;
  color: #D2D5DA;
}

.loginmodal-container h1{
  text-align: center;
  font-size: 1.8em;
}

.loginmodal-container img{
   display: inline-block;
}

.loginmodal-container input[type=submit]{
  width: 100%;
  display: block;
  margin-bottom: 10px;
  position: relative;
}

.loginmodal-container input[type=text], input[type=password]{
  height: 44px;
  font-size: 16px;
  width: 100%;
  margin-bottom: 10px;
  -webkit-appearance: none;
  background: #fff;
  border: 1px solid #d9d9d9;
  border-top: 1px solid #c0c0c0;
  /* border-radius: 2px; */
  padding: 0 20px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  border-radius: 50px;
}

.loginmodal-container input[type=text]:hover, input[type=password]:hover{
  border: 1px solid #b9b9b9;
  border-top: 1px solid #a0a0a0;
  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}

.loginmodal{
  text-align: center;
  font-size: 14px;
  font-family: 'Arial', sans-serif;
  font-weight: 700;
  height: 36px;
  padding: 0 8px;
/* border-radius: 3px; */
/* -webkit-user-select: none;
  user-select: none; */
}

.loginmodal-submit{
  /* border: 1px solid #3079ed; */
  margin: 30px 0;
  border: 0px;
  color: #fff;
  text-shadow: 0 1px rgba(0,0,0,0.1);
  background-color: #E84C3C;
  padding: 17px 0px;
  font-size: 14px;
  border-radius: 50px;
  /* background-image: -webkit-gradient(linear, 0 0, 0 100%,   from(#4d90fe), to(#4787ed)); */
}

.loginmodal-submit:hover{
  /* border: 1px solid #2f5bb7; */
  border: 0px;
  text-shadow: 0 1px rgba(0,0,0,0.3);
  background-color: #E84C3C;
  /* background-image: -webkit-gradient(linear, 0 0, 0 100%,   from(#4d90fe), to(#357ae8)); */
}

.loginmodal-container a{
  text-decoration: none;
  color: #666;
  font-weight: 400;
  text-align: center;
  display: inline-block;
  opacity: 0.6;
  transition: opacity ease 0.5s;
}

.login-help{
  font-size: 12px;
  text-align: center;
}

/****************************************** chekbox & themepicker styling ******************/

.label-text{
   font-size: 15px;
   font-weight: bold;
}

input[type=checkbox]{
  display: none;
}
input[type=checkbox] + .label-text:before{
   content: "\f096";
   font-family: "FontAwesome";
   speak: none;
   font-style: normal;
   font-weight: normal;
   font-variant: normal;
   text-transform: none;
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   width: 1em;
   font-size: 20px;
   display: inline-block;
   margin-right: 5px;
}
input[type=checkbox]:checked + .label-text:before{
   content: "\f14a";
   color: #06a3e9;
}


.themesPick > input{ /* HIDE RADIO */
  display:none;
}
.themesPick > input + img{ /* IMAGE STYLES */
  cursor:pointer;
  border:2px solid transparent;
}
.themesPick > input:checked + img{ /* (CHECKED) IMAGE STYLES */
  border:2px solid #06a3e9;
}

/* ----- Data Tables ----- */
		div.dataTables_paginate ul.pagination{
			margin: 10px 0;
		}
		.dataTables_paginate{
			margin: -7px 0 7px 0;
		}
        .dataTables_paginate li.paginate_button.previous.disabled a, .dataTables_paginate li.paginate_button.next.disabled a{
            color: #DDD;
			border: 0;

        }
        .dataTables_paginate li.paginate_button a{
            height: 25px;
            line-height: 25px;
            padding-top: 0px;
            color:#444;
            font-size:12px;
            border:0;
        }
        .dataTables_paginate li.paginate_button a:hover{
        	background:none;
        	color:#11A7DB;
        }
        .dataTables_paginate li.paginate_button.active a{
            background:#FFF;
            color:#11A7DB;
            border:0;
        }

		.paginate_disabled_previous, .paginate_disabled_next, a.paginate_disabled_previous:hover, a.paginate_disabled_next:hover{
			display: inline-block;
			margin-bottom: 0;
			font-weight: normal;
			text-align: center;
			vertical-align: middle;
			cursor: default;
			background-image: none;
			border: 1px solid transparent;
			white-space: nowrap;
			padding: 4px 9px;
			font-size: 12px;
			line-height: 1.428571429;
			border-radius: 0;
			margin-left: 5px;
			color: #ADADAD;
			text-decoration: none;
		}
		.paginate_enabled_next, .paginate_enabled_previous, a.paginate_enabled_previous:hover, a.paginate_enabled_next:hover{
			display: inline-block;
			margin-bottom: 0;
			font-weight: normal;
			text-align: center;
			vertical-align: middle;
			cursor: pointer;
			background-image: none;
			border: 1px solid transparent;
			white-space: nowrap;
			padding: 4px 9px;
			font-size: 12px;
			line-height: 1.428571429;
			border-radius: 0;
			color: #007AFF;
			margin-left: 5px;
			text-decoration: none;
			background:none;
		}


/* ----- Data Tables End ----- */


/************ loading animation **********/
.pace{
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.pace-inactive{
  display: none;
}

.pace .pace-progress{
  background: #29d;
  position: fixed;
  z-index: 2000;
  top: 0;
  right: 100%;
  width: 100%;
  height: 2px;
}

.pace .pace-progress-inner{
  display: block;
  position: absolute;
  right: 0px;
  width: 100px;
  height: 100%;
  box-shadow: 0 0 10px #29d, 0 0 5px #29d;
  opacity: 1.0;
  -webkit-transform: rotate(3deg) translate(0px, -4px);
  -moz-transform: rotate(3deg) translate(0px, -4px);
  -ms-transform: rotate(3deg) translate(0px, -4px);
  -o-transform: rotate(3deg) translate(0px, -4px);
  transform: rotate(3deg) translate(0px, -4px);
}

.pace .pace-activity{
  display: block;
  position: fixed;
  z-index: 2000;
  top: 15px;
  right: 15px;
  width: 14px;
  height: 14px;
  border: solid 2px transparent;
  border-top-color: #29d;
  border-left-color: #29d;
  border-radius: 10px;
  -webkit-animation: pace-spinner 400ms linear infinite;
  -moz-animation: pace-spinner 400ms linear infinite;
  -ms-animation: pace-spinner 400ms linear infinite;
  -o-animation: pace-spinner 400ms linear infinite;
  animation: pace-spinner 400ms linear infinite;
}

@-webkit-keyframes pace-spinner{
  0%{ -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100%{ -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-moz-keyframes pace-spinner{
  0%{ -moz-transform: rotate(0deg); transform: rotate(0deg); }
  100%{ -moz-transform: rotate(360deg); transform: rotate(360deg); }
}
@-o-keyframes pace-spinner{
  0%{ -o-transform: rotate(0deg); transform: rotate(0deg); }
  100%{ -o-transform: rotate(360deg); transform: rotate(360deg); }
}
@-ms-keyframes pace-spinner{
  0%{ -ms-transform: rotate(0deg); transform: rotate(0deg); }
  100%{ -ms-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes pace-spinner{
  0%{ transform: rotate(0deg); transform: rotate(0deg); }
  100%{ transform: rotate(360deg); transform: rotate(360deg); }
}

/********************************** chart Style *********************/

#canvas-holder{
      width: 100%;
      text-align: center;
   }
   #chartjs-tooltip{
      opacity: 1;
      position: absolute;
      background: rgba(0, 0, 0, .71);
      font-size: 11px !important;
      color: white;
      padding: 5px;
      border-radius: 3px;
      -webkit-transition: all .1s ease;
      transition: all .1s ease;
      pointer-events: none;
      -webkit-transform: translate(-50%, 0);
      transform: translate(-50%, 0);
   }
   #chartjs-tooltip.below{
      -webkit-transform: translate(-50%, 0);
      transform: translate(-50%, 0);
   }
   #chartjs-tooltip.below:before{
      border: solid;
      border-color: #111 transparent;
      border-color: rgba(0, 0, 0, .8) transparent;
      border-width: 0 8px 8px 8px;
      bottom: 1em;
      content: "";
      display: block;
      left: 50%;
      position: absolute;
      z-index: 99;
      -webkit-transform: translate(-50%, -100%);
      transform: translate(-50%, -100%);
   }
   #chartjs-tooltip.above{
      -webkit-transform: translate(-50%, -100%);
      transform: translate(-50%, -100%);
   }
   #chartjs-tooltip.above:before{
      border: solid;
      border-color: #111 transparent;
      border-color: rgba(0, 0, 0, .8) transparent;
      border-width: 8px 8px 0 8px;
      bottom: 1em;
      content: "";
      display: block;
      left: 50%;
      top: 100%;
      position: absolute;
      z-index: 99;
      -webkit-transform: translate(-50%, 0);
      transform: translate(-50%, 0);
   }

/* Stats carts */
   .statCart{
		padding: 20px 25px;
  		box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.29);
      -moz-box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.29);
      -webkit-box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.29);
      background-color: #fff;
	}
   .Statcolor01{
      background-color: #41C4FE;
      color: #fff;
   }
   .Statcolor02{
      background-color: #FF7676;
      color: #fff;
   }
   .Statcolor03{
      background-color: #A5C675;
      color: #fff;
   }
	.statCart i{
		display: inline;
		font-size: 50px;
		padding: 0 25px 0 0;
		border-right: 1px solid #fff;
		float: left;
		margin-right: 25px
	}
	.statCart h1{
		display: inline;
	}
	.statCart span{
		font-weight: lighter;
	}
/*date picker*/
.RangePicker{
    color: #fff;
    background-color: #2AC4C0;
    border: 1px solid #2AC4C0;
}
.range_inputs .btn-success{
   background-color: #2AC4C0;
   border-color: #2AC4C0;
}
.btn-picker{
   color: #fff;
   background-color: #2AC4C0;
   border-color: #2AC4C0;
   width: 100%
}

.rangeStat button{
   margin-top: 23px;
}

/**** year Table */

.StatTable{
   width: 100%;
   height: 200px;
}
.StatTable td{
   border: 1px solid #ddd;
   text-align: right;
   padding: 10px;
   font-size: 20px;
   color: #aaa;
}
.revenuespan{
   float: left;
   background-color: #2AC4C0;
   padding: 4px 13px;
   font-size: 14px;
   border-radius: 10px;
   color: #fff;
   cursor: pointer;
}
.expencespan{
   float: left;
   background-color: #FF7676;
   padding: 4px 13px;
   margin-left: 8px;
   font-size: 14px;
   border-radius: 10px;
   color: #fff;
   cursor: pointer;
}


.statYear{
   display: block !important;
   text-align: center;
   width: 100%;
}

.btn-Year{
   color: #fff;
   background-color: #40484E;
   border-color: #40484E;
   margin-bottom: 20px;
   padding: 5px 20px;
}

.ReportTotal{
   background-color: #FB6E52;
   padding: 4px 13px;
   border-radius: 10px;
   color: #fff;
}

.tooltip.in{
  opacity: 0.7;
  filter: alpha(opacity=70);
}

/******************** card payement style **************/

.cc-num{
   background-image:url('../img/CC_bg.png');
   background-repeat:repeat-x;
}

.padding-s{
   padding: 0 3px !important;
   margin: 0 0 30px 0 !important;
}

.CreditCardNum i{
   float: right;
   margin: 5px;
   color: #bababa;
}

/********************* tab styles **************/
.nav-tabs{ border-bottom: 2px solid #DDD; }
    .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover{ border-width: 0; }
    .nav-tabs > li > a{ border: none; color: #666; }
        .nav-tabs > li.active > a, .nav-tabs > li > a:hover{ border: none; color: #4285F4 !important; background: transparent; }
        .nav-tabs > li > a::after{ content: ""; background: #4285F4; height: 2px; position: absolute; width: 100%; left: 0px; bottom: -1px; transition: all 250ms ease 0s; transform: scale(0); }
    .nav-tabs > li.active > a::after, .nav-tabs > li:hover > a::after{ transform: scale(1); }
.tab-nav > li > a::after{ background: #21527d none repeat scroll 0% 0%; color: #fff; }
.tab-pane{ padding: 15px 0; }
.tab-content{padding:20px}

.card{background: #FFF none repeat scroll 0% 0%; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); margin-bottom: 30px; }
/*body{ background: #EDECEC; padding:50px}*/



/***************** stores list ******************/
.choose_store{
   color: #34324b;
   margin-top: 60px;
   text-transform: uppercase;
   font-size: 1.7em;
   font-weight: 700;
}

#storeline{
  width: 100%;
  position: relative;
  list-style: none;
  padding: 0; }
  #storeline a{
    text-decoration: none; }

  #storeline .listing{
    background: #FFF;
    border: 1px solid #e6e7e9;
    border-radius: .3rem;
    padding: 1em;
    margin-bottom: 1em;
    position: relative;
    z-index: 1;
    display: table;
    width: 96%;
    transition: all .3s ease-in-out; }
    #storeline .listing img, #storeline .listing .info, #storeline .listing .store_type{
      display: table-cell;
      vertical-align: middle;
      font-size: .9em;
      color: #74718f; }
    #storeline .listing .image_wrapper{
      width: 60px; }
      #storeline .listing .image_wrapper img{
        width: 60px;
        display: block;
        margin: 0 auto;
        border-radius: .25em; }
    #storeline .listing .info{
      line-height: 1.25;
      width: 640px;
      padding-left: 25px; }
      #storeline .listing .info .store_title{
        font-weight: 700;
        color: #34324b;
        font-size: 1.5em; }
      #storeline .listing .info .store_info{
        color: #74718f;
        font-size: .9em;
        display: block; }
        #storeline .listing .info .store_info span{
          margin: 0 .75em; }
    #storeline .listing .store_type{
      text-transform: uppercase;
      font-weight: 700;
      font-size: .75em;
      position: relative;
      white-space: nowrap;
      padding-top: 0.6em;
      width: 100px; }
      #storeline .listing .store_type:before{
        content: " ";
        background: #a378fc;
        width: 10px;
        height: 10px;
        border-radius: 100%;
        position: absolute;
        left: -20px;
        top: 28px; }
    #storeline .listing .store_close{
      color: #fd7576; }
      #storeline .listing .store_close:before{
        background: #fd7576; }
    #storeline .listing .store_open{
      color: #1ABC9C; }
      #storeline .listing .store_open:before{
        background: #1ABC9C; }
    #storeline .listing:hover{
      cursor: pointer;
      box-shadow: 0px 2px 40px 0px rgba(0, 0, 0, 0.1); }

/********************* close & switch register menu ***************/
.cbp-vimenu{
	position: fixed;
	top: 80px;
	right: 0;
   z-index: 9999;
	list-style-type: none;
	margin: 0;
	padding: 0;
	background: #8C9899;
}
.cbp-vimenu li a{
	display: block;
	height: 2em;
	width: 2em;
   padding-top: 4px;
	text-align: center;
	color: #fff;
	position: relative;
	-webkit-transition: background 0.1s ease-in-out;
	-moz-transition: background 0.1s ease-in-out;
	transition: background 0.1s ease-in-out;
}

.cbp-vimenu li a:hover,
.cbp-vimenu li:first-child a{
	background: #F65E48;
	color: #fff;
}
.cbp-vimenu li:nth-child(3) a{
	background: #FACDAE;
	color: #fff;
}
.cbp-vimenu2 li:nth-child(3) a{
	background: #FACDAE;
	color: #fff;
}
.cbp-vimenu2 li:nth-child(3) a:hover{
	background: #FC9D9B;
	color: #fff;
}

.btn-orange{
   color: #fff;
   background-color: #FB6E52;
   border: none;
}


/************************************* resto adding *****************************************/

.zone{
   padding: 6px 10px;
   border-radius: 15px;
   background-color: #ACB8B4;
   margin: 0 2px;
   color: #fff;
   position: relative;
}
.zone i{
   color: #7e8b87;
   margin-left: 10px;
   cursor: pointer;
}

.tableList{
   text-align: center;
   height: 160px;
   width: 160px;
   border-radius: 20px;
}
.tableList:hover{
   background-color: rgb(235, 238, 244);
}
.tableList a img{
   margin-top: 20px;
}
.tableList a h2{
   font-size: 20px;
   color: rgb(66, 66, 66);
}

.tabletime{
   position: absolute;
   top: 1;
   left: 55px;
   padding: 2px 5px;
   color: #fff;
   background-color: rgb(143, 143, 143);
}

.js-select-basic-multiple{
    width: 500px !important;
}

.waitercount{
   padding: 10px;
   margin-top: 15px;
   box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.29);
   position: relative;
}

.waitercount ul li{
   padding-top: 12px;
   float: left;
   margin-left: 20px;
}

.waitercount ul li h4{
   margin-top: 0;
   font-weight: bolder;
}

.wtotal{
   cursor: pointer;
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   background-color: rgba(255, 255, 255, 0.76);
   text-align: center;
   opacity: 0;
   -webkit-transition: all 0.3s ease-in-out 0.1s;
   -moz-transition: all 0.3s ease-in-out 0.1s;
   -o-transition: all 0.3s ease-in-out 0.1s;
   -ms-transition: all 0.3s ease-in-out 0.1s;
   transition: all 0.3s ease-in-out 0.1s;
}

.wtotal:hover{
   opacity: 1;
}

/********************* close & switch table menu ***************/

.cbp-vimenu2{
	position: fixed;
	top: 80px;
	right: 0;
   z-index: 9999;
	list-style-type: none;
	margin: 0;
	padding: 0;
	background: #29bfcc;
}
.cbp-vimenu2 li a{
	display: block;
	height: 2em;
	width: 2em;
   padding-top: 4px;
	text-align: center;
	color: #fff;
	position: relative;
	-webkit-transition: background 0.1s ease-in-out;
	-moz-transition: background 0.1s ease-in-out;
	transition: background 0.1s ease-in-out;
}

.cbp-vimenu2 li a:hover,
.cbp-vimenu2 li:first-child a{
	background: #7df6ef;
	color: #fff;
}


.navbar-default{
   background-color: #4B4F55;
}

.navbar-default .navbar-nav>li>a{
    color: #fff;
}
.navbar-default .navbar-nav>li>a:hover{
    color: #aaa;
}
.navbar-default{
    border: none;
}

/************************* menu print style ***************************/
.headline{
  font-family: 'Kaushan Script', cursive;
  background-color: #e74c3c;
  color: white;
  text-align: center;
  padding: 2px 0;
  margin-top: 60px;
  position: relative;
}
.headline::before,
.headline::after{
  content: '';
  height: 1px;
  width: 100%;
  background-color: #e74c3c;
  display: block;
  left: 0;
  position: absolute;
}
.headline::before{
  top: -6px;
}
.headline::after{
  bottom: -6px;
}
.opacity-small{
  font-size: 30px;
  opacity: 0.7;
  filter: Alpha(opacity=70);
}
.opacity-medium{
  font-size: 20px;
  opacity: 0.5;
  filter: Alpha(opacity=50);
}
.opacity-large{
  font-size: 15px;
  opacity: 0.25;
  filter: Alpha(opacity=25);
}

.logo-menu{
  margin: 0 auto;
  padding: 50px 0 0 0;
}

.grey{
  color: #aaa;
}

/************************* kitchen page style ***************************/

.kitchentable-btn{
  color: #fff;
  background-color: #A5C675;
  border: none;
  margin: 0 25px;
  box-shadow: inset 0px 2px 10px 0px rgba(0, 0, 0, 0.29);
  -moz-box-shadow: inset 0px 2px 10px 0px rgba(0, 0, 0, 0.29);
  -webkit-box-shadow: inset 0px 2px 10px 0px rgba(0, 0, 0, 0.29);
}

.kitchentableoff-btn{
  color: #fff;
  background-color: #8297A8;
  border: none;
  margin: 0 25px;
  box-shadow: inset 0px 2px 10px 0px rgba(0, 0, 0, 0.29);
  -moz-box-shadow: inset 0px 2px 10px 0px rgba(0, 0, 0, 0.29);
  -webkit-box-shadow: inset 0px 2px 10px 0px rgba(0, 0, 0, 0.29);
}

.tablenotif{
   position: absolute;
   font-size: 10px;
   top: -8px;;
   right: 50px;
   border-radius: 100%;
   padding: 2px 8px;
   color: #F3565D;
   background-color: #F3565D;
   box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.29);
   -moz-box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.29);
   -webkit-box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.29);
}

.nohover-item:hover {
	background-color: inherit !important;
}
/* ==================================================================
 * GLASSMORPHISM SKIN  (Settings -> theme = "Glass")
 * ------------------------------------------------------------------
 * Everything above this line is the Light theme: it keeps the layout
 * of every screen (grid, POS columns, product tiles, print rules).
 * Everything below re-skins the surfaces: a saturated colour mesh
 * backdrop, translucent panels with a real backdrop blur, hairline
 * light borders and soft depth shadows instead of flat borders.
 * ================================================================== */

/* ---------- 1. design tokens ---------- */
:root{
   --glass-bg:            #dae3f6;
   --glass-surface:       rgba(255,255,255,.42);
   --glass-surface-soft:  rgba(255,255,255,.26);
   --glass-text:          #2f3452;
   --glass-heading:       #222742;
   --glass-muted:         #636a8e;
   --glass-line:          rgba(255,255,255,.55);
   --glass-accent:        #5566f0;
   --glass-accent-dark:   #3f4ee0;
   --glass-mint:          #22c3ba;
   --glass-peach:         #ff6f4f;
   --glass-shadow:        rgba(26,33,78,.18);
   --glass-hi:            rgba(255,255,255,.62);
   --glass-radius:        22px;
   --glass-radius-sm:     14px;
   /* glass depth is a soft outside shadow plus one inner top highlight —
      no puffy double shadow, no inset shading */
   --glass-raise:         0 12px 32px rgba(26,33,78,.16), 0 2px 5px rgba(26,33,78,.07),
                          inset 0 1px 0 rgba(255,255,255,.65);
   --glass-raise-sm:      0 6px 18px rgba(26,33,78,.13), inset 0 1px 0 rgba(255,255,255,.55);
   --glass-press:         inset 0 2px 7px rgba(26,33,78,.20), 0 1px 0 rgba(255,255,255,.55);
   --glass-inset:         inset 0 2px 8px rgba(26,33,78,.11);
   --glass-focus:         0 0 0 4px rgba(85,102,240,.24);
   --glass-blur:          blur(18px) saturate(185%);
   --glass-edge:          rgba(255,255,255,.55);
   --glass-grad:          linear-gradient(145deg,#7c8bff,#5162ee);
   --glass-grad-hover:    linear-gradient(145deg,#8b98ff,#3f4ee0);
   --glass-grad-mint:     linear-gradient(145deg,#54dcd3,#1fb6ad);
   --glass-grad-peach:    linear-gradient(145deg,#ffa189,#ff6444);
   --glass-grad-lemon:    linear-gradient(145deg,#ffdd93,#f1b02f);
   --glass-grad-neutral:  linear-gradient(145deg,rgba(255,255,255,.66),rgba(255,255,255,.24));
   /* status grey stays opaque enough for white labels (free tables, zones,
      price-level chips) — a washed-out grey was unreadable from the kitchen */
   --glass-grad-grey:     linear-gradient(145deg,rgba(120,130,170,.94),rgba(86,96,140,.94));
}

/* ---------- 2. page & typography ---------- */
html body{
   background-color: var(--glass-bg);
   /* a saturated mesh: the colour that a blurred panel picks up */
   background-image:
      radial-gradient(880px 620px at 8% -12%, #a9b8ff 0%, rgba(169,184,255,0) 62%),
      radial-gradient(820px 560px at 102% -4%, #8ceae2 0%, rgba(140,234,226,0) 60%),
      radial-gradient(760px 580px at 52% 116%, #ffcdb8 0%, rgba(255,205,184,0) 62%),
      linear-gradient(135deg,#e9efff 0%,#e3f6fa 46%,#fdf0e8 100%);
   background-attachment: fixed;
   color: var(--glass-text);
   font-family: 'Lato', sans-serif;
   -webkit-font-smoothing: antialiased;
}

body::-webkit-scrollbar,
.slimScrollDiv::-webkit-scrollbar,
#modal-body::-webkit-scrollbar{ width: 12px; height: 12px; }
body::-webkit-scrollbar-track{ background: transparent; }
body::-webkit-scrollbar-thumb{
   background: #cfd4ea;
   border: 3px solid var(--glass-bg);
   border-radius: 12px;
}
body::-webkit-scrollbar-thumb:hover{ background: var(--glass-accent); }

h1,h2,h3,h4,h5,h6{ color: var(--glass-heading); font-weight: 800; }
a{ color: var(--glass-accent); }
a:hover,a:focus{ color: var(--glass-accent-dark); text-decoration: none; }
hr{ border-color: var(--glass-line); }
::selection{ background: rgba(123,108,246,.25); }

.grey{ color: var(--glass-muted); }
.light-grey{ color: #a9a7c0; }
.dark-blue{ color: var(--glass-text) !important; }
.red{ color: var(--glass-peach); }
.light-blue{ color: var(--glass-mint); }
.white{ color: #fff; }
.whiteBg{ background-color: var(--glass-surface); border-radius: var(--glass-radius); }
.text-muted{ color: var(--glass-muted); }
.help-block{ color: var(--glass-muted); }
.opacity-small,.opacity-medium,.opacity-large{ color: var(--glass-text); }

/* ---------- 3. top navigation ---------- */
.navbar,
.navbar-default{
   background: rgba(255,255,255,.88);
   border: none;
   border-radius: 0 0 30px 30px;
   box-shadow: 0 14px 30px -12px var(--glass-shadow), 0 3px 8px rgba(157,163,199,.20);
   -webkit-backdrop-filter: blur(9px);
   backdrop-filter: blur(9px);
}

.navbar-brand{ margin-top: -6px; }
.navbar-brand img{
   border-radius: 14px;
   filter: drop-shadow(0 6px 10px rgba(157,163,199,.35));
}

.menu-text{ letter-spacing: .6px; font-weight: 700; }

.navbar-nav a{ color: var(--glass-text); }

.navbar-default .navbar-nav>li>a{
   color: var(--glass-text);
   font-weight: 700;
   border-radius: 16px;
   margin: 9px 3px;
   padding: 8px 13px;
   transition: all .18s ease;
}
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>li.open>a{
   color: #fff;
   background: var(--glass-grad);
   box-shadow: var(--glass-raise-sm);
}
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus{
   color: #fff;
   background: var(--glass-grad);
   box-shadow: var(--glass-press);
}

.navbar-toggle{
   border: none;
   background: var(--glass-surface);
   border-radius: 14px;
   box-shadow: var(--glass-raise-sm);
}
.navbar-toggle:hover,.navbar-toggle:focus{ background: var(--glass-surface); }
.navbar-toggle .icon-bar{ background: var(--glass-accent); border-radius: 2px; }
.navbar-collapse{ border-top: none; box-shadow: none; }

.topbar-userpic{ box-shadow: var(--glass-raise-sm); border: 2px solid #fff; }
.flag{ border-radius: 6px; box-shadow: var(--glass-raise-sm); }

/* dropdown panels (people / language menus) */
.dropdown-menu{
   border: none;
   border-radius: 22px;
   padding: 10px;
   margin-top: 10px;
   background: var(--glass-surface);
   box-shadow: 0 18px 40px -14px rgba(97,103,150,.55), inset 2px 2px 6px var(--glass-hi),
               inset -3px -3px 8px rgba(157,163,199,.14);
}
.dropdown-menu>li>a{
   border-radius: 14px;
   color: var(--glass-text);
   font-weight: 600;
   padding: 9px 14px;
   transition: all .16s ease;
}
.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus{ background: #f1f0ff; color: var(--glass-accent); }
.dropdown-menu>.active>a,
.dropdown-menu>.active>a:hover{
   background: var(--glass-grad);
   color: #fff;
   box-shadow: var(--glass-raise-sm);
}
.dropdown-menu .divider{ background-color: var(--glass-line); }
.language ul li a{ font-weight: 700; }

/* ---------- 4. layout plates & cards ---------- */
.container-fluid{ margin-top: 18px; }
.content{ margin-top: 84px; margin-bottom: 90px; }

.card,
.panel,
.well,
.waitercount,
.messageVide,
.left-side,
.right-side,
#storeline .listing{
   background: var(--glass-surface);
   border: none;
   border-radius: var(--glass-radius);
   box-shadow: var(--glass-raise);
}
.card{ margin-bottom: 34px; overflow: hidden; }
.panel-body{ padding: 22px; }
.panel-heading{
   border: none;
   background: var(--glass-grad-neutral);
   color: var(--glass-heading);
   font-weight: 800;
   padding: 16px 22px;
   border-radius: var(--glass-radius) var(--glass-radius) 0 0;
}
.panel-footer{
   background: #fafbff;
   border: none;
   border-radius: 0 0 var(--glass-radius) var(--glass-radius);
   padding: 14px 22px;
}
.panel-group .panel+.panel{ margin-top: 14px; }
.panel-group .panel-heading a{ text-decoration: none; }

.list-group-item{
   border: none;
   border-radius: 16px !important;
   margin-bottom: 8px;
   background: var(--glass-surface-soft);
   box-shadow: var(--glass-raise-sm);
   color: var(--glass-text);
}

/* ---------- 5. buttons ---------- */
.btn{
   border: none;
   border-radius: var(--glass-radius-sm);
   font-weight: 700;
   letter-spacing: .2px;
   padding: 9px 18px;
   text-shadow: none;
   box-shadow: var(--glass-raise-sm);
   transition: transform .14s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.btn:active,.btn.active,.btn:focus:active{
   box-shadow: var(--glass-press) !important;
   transform: translateY(1px);
}
.btn:focus{ outline: none; box-shadow: var(--glass-raise-sm), var(--glass-focus); }
.btn-link{ box-shadow: none; background: none; color: var(--glass-accent); }
.btn-link:hover{ background: #f1f0ff; }
.btn-group .btn{ border-radius: var(--glass-radius-sm); margin: 0 2px; }

.btn-default{ background: var(--glass-grad-neutral); color: var(--glass-text); }
.btn-default:hover,.btn-default:focus{ background: var(--glass-grad-neutral); color: var(--glass-accent); }
.btn-default:active{ color: var(--glass-accent); }

.btn-primary{ background: var(--glass-grad); color: #fff; }
.btn-primary:hover,.btn-primary:focus,.btn-primary:active{ background: var(--glass-grad-hover); color: #fff; }
.btn-add{ background: var(--glass-grad); color: #fff; }
.btn-add:hover,.btn-add:focus,.btn-add:active{ background: var(--glass-grad-hover); color: #fff; }

.btn-success,.btn-green{ background: var(--glass-grad-mint); color: #fff; }
.btn-success:hover,.btn-success:focus,.btn-green:hover,.btn-green:focus{ background: linear-gradient(145deg,#6ce0d8,#2aa9a4); color: #fff; }

.btn-danger,.btn-red{ background: var(--glass-grad-peach); color: #fff; }
.btn-danger:hover,.btn-danger:focus,.btn-red:hover,.btn-red:focus{ background: linear-gradient(145deg,#ffad9f,#e75f4e); color: #fff; }

.btn-warning{ background: var(--glass-grad-lemon); color: #5a4523; }
.btn-warning:hover,.btn-warning:focus{ background: linear-gradient(145deg,#ffdf9c,#eeab33); color: #4a3819; }

.btn-info,.btn-blue{ background: linear-gradient(145deg,#84c8ff,#4a9ff0); color: #fff; }
.btn-info:hover,.btn-info:focus,.btn-blue:hover,.btn-blue:focus{ background: linear-gradient(145deg,#93d1ff,#3d92e6); color: #fff; }

.btn-orange{ background: linear-gradient(145deg,#ffb08c,#fb6e52); color: #fff; }
.btn-orange:hover,.btn-orange:focus{ background: linear-gradient(145deg,#ffbe9c,#f45f42); color: #fff; }

.btn-picker,.btn-Year{ background: var(--glass-grad-mint); color: #fff; border: none; }
.btn-picker:hover,.btn-Year:hover,.btn-picker:focus,.btn-Year:focus{ background: linear-gradient(145deg,#6ce0d8,#2aa9a4); color: #fff; }

.btn-lg{ border-radius: 22px; padding: 13px 28px; font-size: 16px; }
.btn-sm{ border-radius: 14px; padding: 6px 14px; font-size: 12px; }
.btn-xs{ border-radius: 12px; padding: 3px 10px; font-size: 11px; }

/* the POS new-order printer button keeps its fixed width (no lift/press shift) */
.print-new-order-btn,
.print-new-order-btn:hover,
.print-new-order-btn:focus,
.print-new-order-btn:active{
   transform: none;
   box-shadow: var(--glass-raise-sm);
}
.print-new-order-btn{
   background: var(--glass-grad);
   border: none;
   border-radius: 14px;
   color: #fff;
}
.print-new-order-btn:active{ box-shadow: var(--glass-press); }
.print-new-order-btn .new-order-count{
   background: var(--glass-grad-lemon);
   color: #5a4523;
   box-shadow: var(--glass-raise-sm);
   border-radius: 12px;
}

/* ---------- 6. forms ---------- */
.form-control,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
select,
textarea{
   background: var(--glass-surface-soft);
   border: none;
   border-radius: 16px;
   box-shadow: var(--glass-inset);
   color: var(--glass-text);
   height: 42px;
   padding: 8px 16px;
   transition: box-shadow .18s ease, background .18s ease;
}
textarea,textarea.form-control{ height: auto; min-height: 90px; padding-top: 12px; }
.form-control:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus{
   border: none;
   outline: none;
   background: #fff;
   box-shadow: var(--glass-inset), var(--glass-focus);
}
.form-control::-webkit-input-placeholder{ color: #a8a6c2; }
.form-control::placeholder{ color: #a8a6c2; }
.form-control[disabled],.form-control[readonly],fieldset[disabled] .form-control{
   background: #eef0f8;
   color: var(--glass-muted);
}

.input-group-addon{
   background: var(--glass-surface-soft);
   border: none;
   border-radius: 16px;
   box-shadow: var(--glass-inset);
   color: var(--glass-muted);
   font-weight: 700;
}
.stylish-input-group .input-group-addon{ background: var(--glass-surface-soft) !important; }
.stylish-input-group .form-control{ border: none; box-shadow: var(--glass-inset); background: var(--glass-surface-soft); }
.stylish-input-group button{
   border: none;
   background: transparent;
   box-shadow: none;
   color: var(--glass-accent);
}
.stylish-input-group button:hover{ background: transparent; box-shadow: none; }

.label-text{ color: var(--glass-heading); font-weight: 700; }
input[type=checkbox]:checked + .label-text:before{ color: var(--glass-accent); }

.radio-inline,.checkbox-inline{ color: var(--glass-text); font-weight: 600; }

/* select2 (both the 3.x and 4.x class names are covered) */
.select2-container .select2-choice,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple{
   background: var(--glass-surface-soft);
   border: none;
   border-radius: 16px;
   box-shadow: var(--glass-inset);
   color: var(--glass-text);
   height: 42px;
   padding-left: 14px;
   line-height: 42px;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{ line-height: 42px; color: var(--glass-text); }
.select2-container--default .select2-selection--single .select2-selection__arrow{ height: 40px; }
.select2-container--default .select2-selection--multiple .select2-selection__choice{
   background: var(--glass-grad);
   border: none;
   border-radius: 12px;
   color: #fff;
}
.select2-drop,
.select2-dropdown,
.select2-container--default .select2-dropdown{
   background: var(--glass-surface);
   border: none;
   border-radius: 20px;
   box-shadow: 0 18px 40px -14px rgba(97,103,150,.5);
   overflow: hidden;
}
.select2-results .select2-highlighted,
.select2-container--default .select2-results__option--highlighted[aria-selected]{
   background: var(--glass-grad);
   color: #fff;
}
.select2-search input,
.select2-container--default .select2-search--dropdown .select2-search__field{
   border: none !important;
   border-radius: 12px !important;
   box-shadow: var(--glass-inset) !important;
   background: var(--glass-surface-soft);
}

/* date / range pickers */
.datepicker,
.daterangepicker{
   border: none;
   border-radius: 24px;
   background: var(--glass-surface);
   box-shadow: 0 22px 50px -18px rgba(97,103,150,.55);
   overflow: hidden;
}
.daterangepicker .ranges li{ border-radius: 14px; font-weight: 700; }
.daterangepicker .ranges li.active,
.daterangepicker .ranges li:hover{ background: var(--glass-grad); color: #fff; }
.daterangepicker td.active,
.daterangepicker td.active:hover{ background: var(--glass-accent); border-radius: 10px; }
.datepicker table tr td.active,
.datepicker table tr td.active:hover{ background: var(--glass-accent); border-radius: 10px; }
.datepicker table tr td.today{ background: #f3f2ff; border-radius: 10px; }
.RangePicker{
   background: var(--glass-grad-mint);
   border: none;
   border-radius: 16px;
   color: #fff;
   box-shadow: var(--glass-raise-sm);
}
.range_inputs .btn-success{ background: var(--glass-grad-mint); border: none; }

/* ---------- 7. tables ---------- */
.table{
   background: var(--glass-surface);
   border: none;
   border-radius: 22px;
   /* NOT overflow:hidden: it clipped the row Action dropdown for the last
      rows (the menu opens below the table edge and vanished). The corners
      are rounded on the corner cells instead, see right below. */
   overflow: visible;
}
.table>thead>tr:first-child>th:first-child{ border-top-left-radius: 22px; }
.table>thead>tr:first-child>th:last-child{ border-top-right-radius: 22px; }
.table>tbody>tr:last-child>td:first-child{ border-bottom-left-radius: 22px; }
.table>tbody>tr:last-child>td:last-child{ border-bottom-right-radius: 22px; }
.table>thead>tr>th{
   background: var(--glass-grad-neutral);
   border-bottom: none;
   border-top: none;
   color: #5a5478;
   font-weight: 800;
   font-size: 12px;
   letter-spacing: .6px;
   text-transform: uppercase;
   padding: 14px 16px;
}
.table>tbody>tr>td,.table>tfoot>tr>td{
   border-top: 1px solid var(--glass-line);
   vertical-align: middle;
   padding: 12px 16px;
   color: var(--glass-text);
}
.table-striped>tbody>tr:nth-of-type(odd){ background: #fafbff; }
.table-hover>tbody>tr:hover{ background: #f3f2ff; }
.table-bordered{ border: none; }
.table-bordered>thead>tr>th,
.table-bordered>tbody>tr>td,
.table-bordered>tfoot>tr>td{ border: 1px solid var(--glass-line); }
.table-responsive{ border: none; }
.table .active,.table .success,.table .warning{ border-radius: 12px; }

.dataTables_filter{ margin-top: 16px; }
.dataTables_filter input{
   background: var(--glass-surface-soft);
   border: none;
   border-radius: 16px;
   box-shadow: var(--glass-inset);
   height: 40px;
   padding: 6px 16px;
}
.dataTables_length select{ border-radius: 14px; box-shadow: var(--glass-inset); }
.dataTables_paginate{ margin: -6px 0 8px 0; }
.dataTables_paginate li.paginate_button a{
   border: none;
   border-radius: 12px;
   height: 30px;
   line-height: 30px;
   padding: 0 12px;
   margin: 2px 3px;
   color: var(--glass-text);
   font-weight: 700;
}
.dataTables_paginate li.paginate_button a:hover{ background: #f1f0ff; color: var(--glass-accent); }
.dataTables_paginate li.active a,
.dataTables_paginate li.active a:hover{
   background: var(--glass-grad) !important;
   color: #fff !important;
   box-shadow: var(--glass-raise-sm);
}
.dataTables_paginate li.paginate_button.previous.disabled a,
.dataTables_paginate li.paginate_button.next.disabled a{ color: #c9c7dd; }
div.dataTables_wrapper{ padding: 4px 6px; }

.pagination>li>a,.pagination>li>span{
   border: none;
   border-radius: 14px;
   margin: 0 4px;
   color: var(--glass-text);
   background: var(--glass-surface);
   box-shadow: var(--glass-raise-sm);
   font-weight: 700;
}
.pagination>li>a:hover{ background: #f1f0ff; color: var(--glass-accent); }
.pagination>.active>a,
.pagination>.active>a:hover,
.pagination>.active>span{
   background: var(--glass-grad);
   border: none;
   color: #fff;
   box-shadow: var(--glass-press);
}

/* stat values table (reports -> year) */
.StatTable{ background: transparent; }
.StatTable td{
   border: 1px solid var(--glass-line);
   background: #fafbff;
   color: var(--glass-heading);
   font-weight: 700;
}

/* ---------- 8. tabs & badges ---------- */
.nav-tabs{ border-bottom: none; }
.nav-tabs>li{ margin-bottom: 6px; }
.nav-tabs>li>a{
   border: none;
   border-radius: 18px;
   color: #6b648f;
   font-weight: 700;
   margin: 0 4px;
   padding: 10px 18px;
   transition: all .18s ease;
}
.nav-tabs>li>a::after{ display: none; }
.nav-tabs>li>a:hover,
.nav-tabs>li>a:focus{ background: #f1f0ff; color: var(--glass-accent) !important; border: none; }
.nav-tabs>li.active>a,
.nav-tabs>li.active>a:hover,
.nav-tabs>li.active>a:focus{
   background: var(--glass-grad);
   border: none;
   color: #fff !important;
   box-shadow: var(--glass-raise-sm);
}
.tab-content{ padding: 22px 4px; }
.tab-pane{ padding: 12px 0; }

.label{
   border-radius: 12px;
   padding: .38em .72em;
   font-weight: 700;
   box-shadow: var(--glass-raise-sm);
}
.label-default{ background: var(--glass-grad-grey); }
.label-primary{ background: var(--glass-grad); }
.label-success{ background: var(--glass-grad-mint); }
.label-danger{ background: var(--glass-grad-peach); }
.label-warning{ background: var(--glass-grad-lemon); color: #5a4523; }
.label-info{ background: linear-gradient(145deg,#84c8ff,#4a9ff0); }

.badge{
   background: var(--glass-grad);
   border-radius: 12px;
   box-shadow: var(--glass-raise-sm);
   font-weight: 700;
   padding: 4px 9px;
}

.paid{
   /* the token is a gradient, so it must go on `background` — with
      background-color it was dropped and the white label vanished */
   background: var(--glass-grad-mint);
   color: #fff;
   border-radius: 12px;
   padding: 2px 10px;
   box-shadow: var(--glass-raise-sm);
   display: inline-block;
}
.unpaid{
   background: var(--glass-grad-peach);
   color: #fff;
   border-radius: 12px;
   padding: 2px 10px;
   box-shadow: var(--glass-raise-sm);
   display: inline-block;
}
.Partiallypaid{
   background: var(--glass-grad-lemon);
   color: #5a4523;
   border-radius: 12px;
   padding: 2px 10px;
   box-shadow: var(--glass-raise-sm);
   display: inline-block;
}

.progress{
   background: #eef0fa;
   border-radius: 14px;
   height: 14px;
   box-shadow: var(--glass-inset);
}
.progress-bar{ background: linear-gradient(90deg,#8b7cf8,#4ecdc4); border-radius: 14px; }

.alert{
   border: none;
   border-radius: 20px;
   box-shadow: var(--glass-raise-sm);
   color: var(--glass-text);
}
.alert-success{ background: linear-gradient(145deg,#e3fbf6,#cdf3ec); }
.alert-info{ background: linear-gradient(145deg,#e8f3ff,#d6ebff); }
.alert-warning{ background: linear-gradient(145deg,#fff6e2,#ffeccb); }
.alert-danger{ background: linear-gradient(145deg,#ffece9,#ffdcd6); }

/* ---------- 9. modals, tooltips, popovers, sweet alert ---------- */
.modal-content{
   border: none;
   border-radius: 32px;
   background: var(--glass-surface);
   box-shadow: 0 34px 74px -22px rgba(80,86,140,.6), inset 3px 3px 8px var(--glass-hi),
               inset -4px -4px 10px rgba(157,163,199,.16);
   overflow: hidden;
}
.modal-header{
   background: linear-gradient(145deg,#f7f5ff,#e9e7ff);
   color: var(--glass-heading);
   border-bottom: none;
   border-radius: 32px 32px 0 0;
   padding: 20px 26px;
}
.modal-title{ font-weight: 800; color: #4a4570; letter-spacing: .3px; }
.modal-header .close{
   color: var(--glass-accent);
   opacity: .8;
   text-shadow: none;
   font-size: 26px;
   font-weight: 400;
   margin-top: 2px;
}
.modal-header .close:hover,.modal-header .close:focus{ opacity: 1; color: var(--glass-accent-dark); }
.modal-body{ padding: 24px 26px; background: var(--glass-surface); }
.modal-footer{
   border-top: none;
   background: #fafbff;
   padding: 18px 26px;
   border-radius: 0 0 32px 32px;
}
.modal-backdrop.in{ opacity: .45; background: #4a4570; }

.tooltip.in{ opacity: 1; }
.tooltip-inner{
   background: #4a4570;
   border-radius: 14px;
   padding: 8px 13px;
   font-weight: 600;
   box-shadow: 0 10px 22px -8px rgba(64,64,110,.6);
}
.tooltip.top .tooltip-arrow{ border-top-color: #4a4570; }
.tooltip.bottom .tooltip-arrow{ border-bottom-color: #4a4570; }
.tooltip.left .tooltip-arrow{ border-left-color: #4a4570; }
.tooltip.right .tooltip-arrow{ border-right-color: #4a4570; }

.popover{
   border: none;
   border-radius: 22px;
   box-shadow: 0 20px 44px -16px rgba(80,86,140,.55);
   background: var(--glass-surface);
   color: var(--glass-text);
}

/* sweetalert 1.x + sweetalert2 (both are loaded by the app) */
.sweet-alert,.swal2-popup{
   border-radius: 32px !important;
   box-shadow: 0 34px 74px -22px rgba(80,86,140,.6) !important;
   background: var(--glass-surface) !important;
   color: var(--glass-text) !important;
   font-family: 'Lato', sans-serif !important;
}
.sweet-alert h2,.swal2-title{ color: var(--glass-heading) !important; font-weight: 800 !important; }
.sweet-alert button,.swal2-styled{
   border-radius: 18px !important;
   border: none !important;
   box-shadow: var(--glass-raise-sm) !important;
   font-weight: 700 !important;
   padding: 10px 22px !important;
}
.swal2-styled.swal2-confirm,
.sweet-alert button.confirm{ background: var(--glass-grad) !important; color: #fff !important; }
.swal2-styled.swal2-cancel,
.sweet-alert button.cancel{ background: var(--glass-grad-peach) !important; color: #fff !important; }
.sweet-alert button.confirm:hover,.swal2-styled.swal2-confirm:active{ box-shadow: var(--glass-press) !important; }

/* ---------- 10. POS screen ---------- */
.left-side,.right-side{
   border: none;
   padding-bottom: 22px;
}
.right-side{ padding: 20px !important; overflow: hidden; }

.table-header h3{ color: #6b648f; font-weight: 800; letter-spacing: 1px; }

.client-add span{ color: var(--glass-muted); font-weight: 700; }

#searchContaner{ margin-top: 14px; }

.categories{
   background: var(--glass-grad-neutral);
   color: #5d5878;
   border: none;
   border-radius: 20px;
   box-shadow: var(--glass-raise-sm);
   font-weight: 700;
   padding: 12px 20px;
   margin: 6px 4px;
   transition: all .18s ease;
}
.categories:hover{ color: var(--glass-accent); box-shadow: var(--glass-raise); }
.selectedGat{
   background: var(--glass-grad);
   color: #fff;
   box-shadow: var(--glass-press);
}
.selectedGat:hover{ color: #fff; }

.Hold{
   background: var(--glass-grad-neutral);
   color: #5d5878;
   border: none;
   border-radius: 18px;
   box-shadow: var(--glass-raise-sm);
   font-weight: 700;
}
.Hold span{ color: var(--glass-muted); }
.selectedHold{ background: var(--glass-grad); color: #fff; box-shadow: var(--glass-press); }
.selectedHold span{ color: rgba(255,255,255,.82); }
.pl{ background: var(--glass-grad-grey); color: #fff; }

.product{
   border-radius: 26px;
   box-shadow: var(--glass-raise-sm);
   transition: box-shadow .2s ease, transform .2s ease;
}
.product:hover{
   transform: translateY(-3px);
   box-shadow: 0 26px 42px -16px rgba(120,110,220,.55), var(--glass-raise-sm);
}
.product img{ border-radius: 26px; }
.product p{ font-weight: 700; }

.color01{ background: var(--glass-grad); }
.color02{ background: var(--glass-grad-mint); }
.color03{ background: linear-gradient(145deg,#93e08f,#5bbf6a); }
.color04{ background: linear-gradient(145deg,#84c8ff,#4a9ff0); }
.color05{ background: linear-gradient(145deg,#c0a4f7,#9b6ce8); }
.color06{ background: linear-gradient(145deg,#ffc48a,#f79a3c); }
.color07{ background: var(--glass-grad-peach); }
.color08{ background: var(--glass-grad-neutral); color: var(--glass-heading); }
.color08 img{ opacity: .45 !important; }

.barcode{ margin-top: 1.4em; }
.product-details{ color: var(--glass-muted); border: none; }
.delete-product{ color: var(--glass-peach); }

.totalTab table{
   background: var(--glass-surface-soft);
   border-radius: 22px;
   box-shadow: var(--glass-inset);
   overflow: hidden;
}
.totalTab table tr td{ border: none; padding: 13px 18px; color: var(--glass-text); }
.totalTab table tr:last-child td:first-child{ border-bottom-left-radius: 22px !important; }
.totalTab table tr:last-child td:last-child{ border-bottom-right-radius: 22px !important; }
.totalTab .active{ font-weight: 800; color: var(--glass-accent); }
.subtotal{ font-weight: 800; color: var(--glass-heading); }
.total-input{ border: none; outline: none; background: transparent; box-shadow: none; font-weight: 800; color: var(--glass-heading); }
.total-input:focus{ box-shadow: none; background: transparent; }

/* ---------- 11. tables / waiters / zones / kitchens ---------- */
.choose_store{ color: var(--glass-heading); }
#storeline .listing{ border-radius: 26px; box-shadow: var(--glass-raise-sm); }
#storeline .listing:hover{ box-shadow: var(--glass-raise); }
#storeline .listing .info .store_title{ color: var(--glass-heading); }
#storeline .listing .info,
#storeline .listing .info .store_info,
#storeline .listing img,
#storeline .listing .store_type{ color: var(--glass-muted); }

.zone{
   background: var(--glass-grad-grey);
   border-radius: 16px;
   box-shadow: var(--glass-raise-sm);
   color: #fff;
   font-weight: 700;
}
.zone i{ color: rgba(255,255,255,.85); }

/* table / client tiles: glass square cards with a real gap (148px card in the
   original 160px grid pitch) and their label centred inside the square */
.tablesrow .tableList{
   background: var(--glass-surface);
   border: none;
   border-radius: 26px;
   box-shadow: var(--glass-raise-sm);
   width: 148px;
   height: 148px;
   padding: 10px;
   margin: 0 12px 16px 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   transition: box-shadow .2s ease, transform .2s ease, background .2s ease;
}
.tablesrow .tableList:hover{
   background: #f6f5ff;
   transform: translateY(-3px);
   box-shadow: 0 26px 42px -16px rgba(120,110,220,.5), var(--glass-raise-sm);
}
/* the table icon must not follow the name's width: a flex item shrink-wraps its
   content and Bootstrap's img{max-width:100%!important} then clamps the icon to the
   widest child, so long names got big icons and short names tiny ones. Give the
   anchor the full tile width and the icon one fixed size for every tile. */
.tablesrow .tableList a:not(.kitchentable-btn):not(.kitchentableoff-btn){ width: 100%; }
.tablesrow .tableList a img{ width: 90px; height: auto; margin-top: 0; }
.tablesrow .tableList a h2{ margin: 12px 0 0; font-size: 19px; color: var(--glass-heading); font-weight: 800; }
.tablesrow .tableList .kitchentable-btn,
.tablesrow .tableList .kitchentableoff-btn{
   display: block;
   margin: 0;
   max-width: 100%;
   padding: 12px 14px;
   font-size: 16px;
   line-height: 1.25;
   font-weight: 700;
   white-space: normal;
   overflow-wrap: break-word;
   border-radius: 18px;
}
/* table time chip: pinned to the card's top edge — inside a flex tile it would
   otherwise take its static position from the centring and land on the icon */
.tablesrow .tableList .tabletime{
   top: -12px;
   left: 50%;
   right: auto;
   transform: translateX(-50%);
   background: var(--glass-grad-peach);
   color: #fff;
   font-size: 18px;
   font-weight: 700;
   line-height: 1.2;
   padding: 4px 15px;
   border-radius: 16px;
   box-shadow: var(--glass-raise-sm);
}

.waitercount{ border-radius: 26px; box-shadow: var(--glass-raise); }
.waitercount ul li h4{ color: var(--glass-heading); }
.wtotal{ background: rgba(255,255,255,.82); color: var(--glass-accent); }
.wtotal h1,.wtotal h2{ color: var(--glass-accent); }

.cbp-vimenu,.cbp-vimenu2{ background: transparent; }
.cbp-vimenu li a,
.cbp-vimenu2 li a{
   background: var(--glass-grad);
   border-radius: 14px;
   box-shadow: var(--glass-raise-sm);
   color: #fff;
   height: 2.2em;
   width: 2.2em;
   margin-bottom: 8px;
   transition: all .18s ease;
}
.cbp-vimenu li a:hover,
.cbp-vimenu li:first-child a,
.cbp-vimenu2 li a:hover,
.cbp-vimenu2 li:first-child a{ background: var(--glass-grad-hover); color: #fff; }
.cbp-vimenu li:nth-child(3) a,
.cbp-vimenu2 li:nth-child(3) a{ background: linear-gradient(145deg,#ffd98a,#f5b73f); color: #5a4523; }
.cbp-vimenu2 li:nth-child(3) a:hover{ background: linear-gradient(145deg,#ffdf9c,#eeab33); color: #4a3819; }

/* kitchen display */
.headline{
   background: var(--glass-grad);
   color: #fff;
   border-radius: 22px;
   box-shadow: var(--glass-raise-sm);
   padding: 8px 0;
}
.headline::before,.headline::after{ background-color: transparent; }

.kitchentable-btn{
   background: linear-gradient(145deg,#8cdc9a,#4fb46a);
   color: #fff;
   border: none;
   border-radius: 20px;
   box-shadow: var(--glass-raise-sm);
}
.kitchentable-btn:hover,.kitchentable-btn:focus{ background: linear-gradient(145deg,#9de6aa,#45a75f); color: #fff; }
.kitchentableoff-btn{
   background: var(--glass-grad-grey);
   color: #fff;
   border: none;
   border-radius: 20px;
   box-shadow: var(--glass-raise-sm);
}
.kitchentableoff-btn:hover,.kitchentableoff-btn:focus{ background: linear-gradient(145deg,#d3d0e4,#9c98bb); color: #fff; }

.tablenotif{
   background: var(--glass-grad-peach);
   color: #fff;
   border-radius: 14px;
   box-shadow: var(--glass-raise-sm);
}

.messageVide{ color: var(--glass-muted); font-weight: 600; }
.messageVide span{ color: var(--glass-muted); }

/* ---------- 12. reports / dashboard stats ---------- */
.statCart{
   background: var(--glass-surface);
   border: none;
   border-radius: 30px;
   box-shadow: var(--glass-raise);
   padding: 22px 26px;
}
.Statcolor01{ background: linear-gradient(145deg,#84c8ff,#4a9ff0); color: #fff; }
.Statcolor02{ background: var(--glass-grad-peach); color: #fff; }
.Statcolor03{ background: linear-gradient(145deg,#93e08f,#5bbf6a); color: #fff; }
.statCart i{ border-right: 1px solid rgba(255,255,255,.55); }
.statCart span{ color: rgba(255,255,255,.9); }
.statCart h1,.statCart h2,.statCart span{ text-shadow: 0 2px 4px rgba(70,70,120,.18); }

.revenuespan{
   background: var(--glass-grad-mint);
   border-radius: 14px;
   box-shadow: var(--glass-raise-sm);
   color: #fff;
   font-weight: 700;
}
.expencespan{
   background: var(--glass-grad-peach);
   border-radius: 14px;
   box-shadow: var(--glass-raise-sm);
   color: #fff;
   font-weight: 700;
}
.ReportTotal{
   background: linear-gradient(145deg,#ffb08c,#fb6e52);
   border-radius: 14px;
   box-shadow: var(--glass-raise-sm);
   color: #fff;
   font-weight: 700;
}
.statYear{ color: var(--glass-heading); }
#canvas-holder canvas{ border-radius: 24px; }
.statCart .btn{ margin-top: 6px; }

/* ---------- 13. login screen ---------- */
.loginmodal-container{
   background: rgba(255,255,255,.94);
   color: var(--glass-text);
   border-radius: 34px;
   max-width: 370px;
   padding: 34px;
   box-shadow: 0 34px 74px -22px rgba(60,64,110,.65), inset 3px 3px 8px var(--glass-hi),
               inset -5px -5px 12px rgba(157,163,199,.18);
   -webkit-backdrop-filter: blur(6px);
   backdrop-filter: blur(6px);
}
.loginmodal-container h1{ color: var(--glass-heading); font-weight: 800; }
.loginmodal-container img{ border-radius: 16px; }
.loginmodal-container input[type=text],
.loginmodal-container input[type=password]{
   background: var(--glass-surface-soft);
   border: none;
   border-radius: 50px;
   box-shadow: var(--glass-inset);
   height: 48px;
   color: var(--glass-text);
}
.loginmodal-container input[type=text]:hover,
.loginmodal-container input[type=password]:hover{
   border: none;
   box-shadow: var(--glass-inset), var(--glass-focus);
}
.loginmodal-container input[type=text]:focus,
.loginmodal-container input[type=password]:focus{
   border: none;
   background: #fff;
   box-shadow: var(--glass-inset), var(--glass-focus);
}
.loginmodal-submit{
   background: var(--glass-grad);
   border: none;
   border-radius: 50px;
   box-shadow: var(--glass-raise-sm);
   color: #fff;
   font-weight: 800;
   letter-spacing: .6px;
   padding: 16px 0;
   text-shadow: none;
}
.loginmodal-submit:hover,.loginmodal-submit:focus{
   background: var(--glass-grad-hover);
   border: none;
   color: #fff;
}
.loginmodal-submit:active{ box-shadow: var(--glass-press); }
.loginmodal-container a{ color: var(--glass-accent); }
.login-help{ color: var(--glass-muted); }

/* ---------- 14. theme picker (settings) ---------- */
.themesPick>input+img{
   border-radius: 20px;
   border: 3px solid transparent;
   box-shadow: var(--glass-raise-sm);
   transition: box-shadow .18s ease, border-color .18s ease;
}
.themesPick>input:checked+img{
   border: 3px solid var(--glass-accent);
   box-shadow: var(--glass-raise);
}
.themesPick{ padding: 6px; }

/* ---------- 15. printing must stay plain ---------- */
@media print{
   /* glass must never reach paper: no blur, no mesh backdrop, no hairline edges */
   *{ -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
   html body{ background: none !important; }
   .modal-content,.modal-body,.modal-header,.modal-footer,
   .modal-header .close,#printSection,#printSectionInvoice{
      box-shadow: none !important;
      border: none !important;
      border-radius: 0 !important;
      background-image: none !important;
   }
   #printSection,#printSection *,#printSectionInvoice,#printSectionInvoice *{
      box-shadow: none !important;
      border-radius: 0 !important;
      background-image: none !important;
      text-shadow: none !important;
   }
}

/* ---------- 16. the frosted layer ----------
   Everything above is painted translucent by the tokens; this is what makes it
   *glass*: a real backdrop blur on the larger panels plus one hairline light
   edge. Tiles are deliberately edge-only — a few dozen blurred elements on a
   kitchen tablet would cost frames for no visible gain. */
.navbar,
.navbar-default,
.whiteBg,
.well,
.panel,
.dropdown-menu,
.popover,
.daterangepicker,
.select2-container--default .select2-dropdown,
.select2-container--default .select2-selection--multiple,
.sweet-alert,
.swal2-popup,
.modal-content,
.list-group-item,
.pagination>li>a,
.pagination>li>span,
.statCart,
.totalTab table,
.waitercount,
#storeline .listing,
.loginmodal-container,
.container-small{
   -webkit-backdrop-filter: var(--glass-blur);
   backdrop-filter: var(--glass-blur);
}

.navbar,
.navbar-default{ background: rgba(255,255,255,.44); }

/* one hairline light edge on every glass surface, blurred or not */
.navbar,
.navbar-default,
.whiteBg,
.well,
.panel,
.dropdown-menu,
.popover,
.daterangepicker,
.select2-container--default .select2-dropdown,
.select2-container--default .select2-selection--multiple,
.sweet-alert,
.swal2-popup,
.modal-content,
.list-group-item,
.pagination>li>a,
.pagination>li>span,
.statCart,
.totalTab table,
.waitercount,
#storeline .listing,
.loginmodal-container,
.tablesrow .tableList,
.table,
.form-control,
.js-select-options,
textarea,
.input-group-addon,
.dataTables_filter input{
   border: 1px solid var(--glass-edge);
   background-clip: padding-box;
}

/* tiles: same glass, no per-tile blur pass */
.tablesrow .tableList{
   background: var(--glass-surface);
   box-shadow: var(--glass-raise-sm);
}
.tablesrow .tableList:hover{
   background: rgba(255,255,255,.66);
}

/* ---------- 17. kitchen tile labels stay readable ----------
   The tile colour *is* the status (green = order waiting, slate = free), and
   Bootstrap's .btn.disabled opacity: .65 faded the free-table label until it
   measured 2.3:1 against white text. Both states are pinned opaque here, with
   ends dark enough to read from across the kitchen. */
.tablesrow .tableList .kitchentable-btn{
   background: linear-gradient(145deg,#46cf93,#12885a);
   opacity: 1;
}
.tablesrow .tableList .kitchentableoff-btn{
   background: linear-gradient(145deg,#7b85ad,#4d5680);
   opacity: 1;
}

/* ---------- 18. counter receipts (sale slip / invoice) ----------
   The skin's roomy cells and uppercase, letter-spaced headers made the receipt
   table wider than its 380px modal, so the last column (SubTotal — the prices
   themselves) was clipped off both on screen and on paper. The controller also
   writes fixed cell widths (30/150/150/50/70px) that no longer fit, so those are
   neutralised here: the receipt gets compact, normal-case cells and column
   widths taken from their content. */
#printSection .table,
#printSectionInvoice .table{
   margin-bottom: 6px;
}
#printSection .table>thead>tr>th,
#printSection .table>tbody>tr>td,
#printSectionInvoice .table>thead>tr>th,
#printSectionInvoice .table>tbody>tr>td{
   width: auto !important;
   padding: 3px 5px;
   font-size: 12px;
   text-transform: none;
   letter-spacing: 0;
   white-space: normal;
   overflow-wrap: break-word;
   background: transparent;
}
#printSection .table>thead>tr>th,
#printSectionInvoice .table>thead>tr>th{ font-weight: 700; }
#printSection .table,
#printSectionInvoice .table{ width: 100%; }
#printSection .table>thead>tr>th:last-child,
#printSection .table>tbody>tr>td:last-child,
#printSectionInvoice .table>thead>tr>th:last-child,
#printSectionInvoice .table>tbody>tr>td:last-child{ white-space: nowrap; }

/* ---------- 19. printing on an 80mm thermal roll ----------
   The roll is only 302px wide, and the modal chrome took 52px (modal-body) plus
   30px (the col-md-12 the controller wraps the receipt in), leaving 218px of
   paper for a table that needs ~277px — so the price column was cut off in the
   print preview. On paper the receipt gets the whole roll and a finer type
   scale, which keeps all five columns (and every price) on the slip. */
@media print{
   .modal-dialog,.modal-content,.modal-body,.modal-header,.modal-footer{
      padding: 0 !important;
      margin: 0 !important;
   }
   #printSection,#printSectionInvoice,
   #printSection .col-md-12,#printSectionInvoice .col-md-12{
      padding: 0 !important;
      margin: 0 !important;
      width: 100% !important;
   }
   #printSection .table>thead>tr>th,
   #printSection .table>tbody>tr>td,
   #printSectionInvoice .table>thead>tr>th,
   #printSectionInvoice .table>tbody>tr>td{
      padding: 1px 2px !important;
      font-size: 10px !important;
   }
}

/* Icon buttons inside a table row: compact, and on wider screens kept on one
   line. The skin gives every .btn 18px of side padding, which is right in a
   form but makes a six-icon action group about 290px wide - wider than the
   ACTION column - so Bootstrap's floats wrapped the last icon onto a second
   line. Compact padding plus a no-wrap row lets the column size itself to
   the group. Below 992px the buttons may wrap again, so a narrow screen never
   has to clip the table. */
.table .btn-group>.btn{
   padding: 8px 11px;
}
@media (min-width: 992px){
   .table .btn-group{
      display: inline-flex !important;
      flex-wrap: nowrap !important;
      vertical-align: middle;
   }
   .table .btn-group>.btn{
      float: none !important;
   }
}