/*!
 *
 */

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

:root {
   /* Colores base y monocromáticos */
   --color-base: #4489a3;
   --color-lightest: #e6f3f7;
   --color-light: #7eb3c7;
   --color-dark: #2d5c6d;
   --color-darkest: #162e37;
   
   --color-accent-light: #5a9bb3;
   --color-accent-dark: #3b7589;
 
   /* Colores análogos */
   --color-analogous-1: #4471a3;
   --color-analogous-1-light: #7e9fc7;
   --color-analogous-1-dark: #2d4b6d;
   --color-analogous-2: #44a389;
   --color-analogous-2-light: #7ec7b3;
   --color-analogous-2-dark: #2d6d5b;
 
   /* Colores de advertencia */
   --color-warning-lightest: #fff3e0;
   --color-warning-base: #ffcb40;
   --color-warning-hover: #ffba00;
 
   /* Colores de peligro */
   --color-danger-lightest: #ffebee;
   --color-danger-base: #f44336;
   --color-danger-hover: #d32f2f;
 
   /* Colores de éxito */
   --color-success-lightest: #e8f5e9;
   --color-success-base: #40D47E;
   --color-success-hover: #2ea95e;
 
   /* Colores de información */
   --color-info-lightest: #e3f2fd;
   --color-info-base: #2196f3;
   --color-info-hover: #007bff;
 
   /* Colores grises */
   --color-gray-whitest: #f6f6f6;
   --color-gray-lightest: #f0f2f4;
   --color-gray-light: #9aa6ae;
   --color-gray-base: #707f89;
   --color-gray-hover: #5d6a73;
 
   /* Texto sobre color */
   --color-text: #ffffff;
 }

*{
   font-family: 'Poppins', sans-serif;
   -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. */
    margin: 0;
    padding: 0;
    color: var(--color-darkest);
    background-color: var(--color-gray-lightest);
    overflow: auto;
    height: 100%;
}

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

.page-content {
   margin-left: calc(var(--sidebar-width) + 20px);
   transition: margin-left 0.5s ease;
   min-height: 100vh;
   position: relative;
   padding: 20px;
   overflow-y: auto;
}

.container-fluid #actionsBtns{
   position: absolute;
   top: 45px;
}

@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: var(--color-gray-light);
}

.light-gray{
   color: var(--color-gray-light);
}

.light-gray:hover{
   color: var(--color-gray-hover);
}

.white{
   color: var(--color-text);
}

.dark-blue{
   color: var(--color-analogous-1-dark);/*#34495e !important;*/
}

.red{
   color: var(--color-danger-base);
}

.light-blue{
   color: var(--color-info-base);
}

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

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

.btn-gray{
   color: var(--color-text);
   background-color: var(--color-gray-light);
   border: none;
   transition: all 0.5s ease;
}

.btn-gray:hover{
   color: var(--color-text);
   background-color: var(--color-gray-base);
}

.btn-group .btn.btn-white{
   color: var(--color-darkest);
   font-size: 14px;
   font-weight: bold;
   background-color: var(--color-gray-lightest);
   border: none;
   transition: all 0.5s ease;
}

.btn-group .btn.active{
   background: white;
   box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.1), inset 0px 1px 2px rgba(0, 0, 0, 0.08);
   transform: translateY(1px);}

.btn-group.actions button .bx{
   font-size: 18px;
}

.btn-green{
   color: var(--color-text);
   background-color: var(--color-success-base);
   border: none;
   transition: all 0.5s ease;
}

.btn-green:hover{
   color: var(--color-text);
   background-color: var(--color-success-hover);
}

.btn-red{
   color: var(--color-text);
   background-color: var(--color-danger-base);
   border: none;
   transition: all 0.5s ease;
}

.btn-red:hover{
   color: var(--color-text);
   background-color: var(--color-danger-hover);
}

.btn-blue{
   color: var(--color-text);
   background-color: var(--color-info-base);
   border: none;
   transition: all 0.5s ease;
}

.btn-blue:hover{
   color: var(--color-text);
   background-color: var(--color-info-hover);
}

.btn-prn1{
   color: #000;
   background-color: #00bcaf;
   border: none;
}

.btn-prn1:hover{
   color: #000;
   background-color: #00a79d;
}

.btn-prn2{
   color: #000;
   background-color: #ffcb40;
   border: none;
}

.btn-prn2:hover{
   color: #000;
   background-color: #ffba00;
}

.btn-add {
   background-color: var(--color-info-base);
   color: var(--color-text);
   transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease; 
}

.btn-add:hover {
   background-color: var(--color-info-hover);
   color: var(--color-text);
}

.btn-danger{
    background-color: var(--color-danger-base);
    color: var(--color-text);
}

.btn-danger:hover{
    background-color: var(--color-danger-hover);
    color: var(--color-text);
}

.btn-close{
    background-color: white;
    color: var(--color-gray-hover);
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease; 
}

.btn-close:hover{
    background-color: var(--color-danger-base);
    color: var(--color-text);
}

.cancelled{
   background-color:var(--color-gray-light);
   font-size: 14px;
   color: white;
}

.paid{
   background-color:var(--color-success-lightest);
   font-size: 14px;
   color:var(--color-success-hover);
}
.unpaid{
   background-color:var(--color-danger-lightest);
   font-size: 14px;
   color:var(--color-danger-base);
}
.partially-paid{
   background-color:var(--color-warning-lightest);
   /* font-weight: bold; */
   font-size: 14px;
   /* padding:5px; */
   color:var(--color-warning-base);
   /* border-radius:3px; */
}

.whiteBg{
   background-color: var(--color-gray-lightest);
}

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

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

.float-right{
   float: right;
}

.float-left{
   float: left;
}

.container-fluid{
   margin-top: 10px;
   /* margin-left: 20px;    */
}

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

.modal-header{
    background-color: var(--color-darkest);
    color: var(--color-text);
}

.center{
   margin: 0 auto;
}

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

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

#printSection, #printSection2, #SprintRegister, #KitchenReport{
   color: #000;
   margin: 0 auto;
}

#ticket .modal-dialog, #ticket2 .modal-dialog, #PrintRegister .modal-dialog, #KitchenReportModal .modal-dialog
{
  width: 380px;
}

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

@media print{
   body *{
      visibility:hidden;
    }

   html, body {
      margin: 0;
      padding: 0;
      width: auto;
      height: auto;
      overflow: hidden !important;
      zoom: 100%;
    }

   .page-content {
      margin-left: 0 !important;
      padding: 0 !important;
   }

/* Modal adjustments */
   .modal, .modal-dialog {
      position: absolute;
      left: 0;
      top: 0;
      width: 100% !important;
      margin: 0;
      padding: 0;
      visibility: visible;
      overflow: visible !important;
   }

   .modal-body {
      padding: 0;
   }

   .hiddenpr{
      display: none !important;
   }

   /* Grid system for print */
   [class*="col-md-"] {
      float: left;
   }
   .col-md-12 { width: 100%; }
   .col-md-11 { width: 91.66666667%; }
   .col-md-10 { width: 83.33333333%; }
   .col-md-9 { width: 75%; }
   .col-md-8 { width: 66.66666667%; }
   .col-md-7 { width: 58.33333333%; }
   .col-md-6 { width: 50%; }
   .col-md-5 { width: 41.66666667%; }
   .col-md-4 { width: 33.33333333%; }
   .col-md-3 { width: 25%; }
   .col-md-2 { width: 16.66666667%; }
   .col-md-1 { width: 8.33333333%; }

  #printSection *, #printSection2 *, #printSection3 *, #SprintRegister *, #KitchenReport *{
    visibility:visible;
  }
  #printSectionInvoice, #printSectionInvoice * {
    visibility:visible;
  }
  #printSection, #printSection2, #printSection3, #SprintRegister, #KitchenReport{
   position: absolute;
     left: 0;
     top: 0;
     padding: 0;
     margin:0;
  }
  
  #printSection h4, #printSection2 h4, #printSection3 h4, #SprintRegister h4, #KitchenReport h4{
     font-size: 12px;
  }
  #printSection tr td, #printSection2 tr td, #SprintRegister tr td , #KitchenReport tr td{
      font-size: 12px !important;
      font-weight: 600;
      margin: 0;
      padding: 0;
 }
 
 #printSection3 tr td{
   font-size: 14px !important;
   font-weight: 600;
   margin: 0;	 
   padding: 0;
 }
 
 #printSection tr td span, #printSection2 tr td span, #printSection3 tr td span, #SprintRegister tr td span, #KitchenReport tr td span{
    font-size: 12px !important;
    color: #000 !important;
}
 #printSection .bg-success, #printSection .bg-danger{
    visibility:hidden;
}
  @page thermal {
   margin: 0;
   padding: 0;
   size: 80mm 100mm;
  }

  @page letter {
   size: 215.9mm 279.4mm;
   margin: 0;
  }

  .thermal-paper {
   width: 80mm;
   page: thermal;
 }

 .letter-paper {
   width: 215.9mm;
   page: letter;
 }

/* Additional print-specific styles */
   .no-break {
      page-break-inside: avoid;
   }

   .page-break {
      page-break-before: always;
   }
}

/*page loading animation*/
#loadingimg{
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: url("../img/loading.svg") 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: 12px;
  /*text-transform: uppercase;
  font-family: "Roboto";*/
}

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

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

.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: white;
   border-radius: 5px;
   padding-bottom: 20px;
   margin-bottom: 20px;
   border: 3px solid #E6ECF0;
}

/*top section*/

.barcode{
   margin-top: 1.5em;
}

.ticket-label{
	text-align:left;
	font-weight:bold;
	padding-top:5px;
}

.ticket-amount{
	padding-top:5px;
	text-align:right;
	font-weight:bold;
}

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

.client-ico span{
   float: left;
   margin-top: 20px;
}

.sp10{
	margin: 5px !important;
}
/*table section*/

.product-details{
   border: none;
   margin-bottom: 3px;
   background: var(--color-gray-lightest);
}

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

.delete-product{
   color: var(--color-danger-base);
   margin-top: 0.1em;
   background-color: var(--color-danger-base);
   color: white;
   padding: 5px;
   border-radius: 50%;
   font-size: 1em;
}

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

.subtotal{
   float: right;
}

.product-details .panel-body{
   color: var(--color-darkest);
}
/*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: 1px solid #E6ECF0;
   outline: none;
   border-radius: 5px;
   height: 1.8em;
}

.total-input:focus{
   border-color: var(--color-info-base);
   box-shadow:inset 0 1px 1px white, 0 0 4px var(--color-info-base);
}

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

/*categorie styling*/
.zones{
   cursor: pointer;
   text-align:center;
   margin:5px 0;
   padding: 10px 20px;
   background-color:#E2E2E2;
   border-radius:3px;
   color:var(--color-darkest);
   text-transform:uppercase;
   display:inline-block;
   font-weight:500;
   padding-bottom: 7px;
   border-bottom: 3px solid var(--color-gray-hover);
   transition: all 0.3s ease;
   align-items: center;
   justify-content: center;
}

.selectedZn{
   font-weight: 600;
   border-bottom: 3px solid var(--color-success-base);
}

.zones:hover {
   transform: translateY(1px);
   border-bottom: 2px solid #E2E2E2;
}

.zones i.bx{
   font-size: 20px;
   line-height: 0;
   vertical-align: middle;
}


/*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: white;
   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 ****/
#actionsBtns button {
   display: inline-flex;
   align-items: center;  
   justify-content: center; 
}

#actionsBtns .bx{
   font-size: 20px;
}

.dataTables_filter{
   margin-top: 15px;
}

.table#tblTickets td:last-child{
   background: var(--color-gray-lightest);
}

.table#tblTickets{
   background-color: white;
}

.table#tblTickets td{
   border-top: 3px solid var(--color-gray-lightest);
   color: var(--color-darkest);
}

.table#tblTickets td .bx{
   font-size: 16px;
}

/***************** 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;
  -moz-appearance: none;
  appearance: none; 
  background: #fff;
  border: 1px solid #d9d9d9;
  border-top: 1px solid #c0c0c0;
  border-radius: 3px;
  padding: 0 20px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  color: #333;
}

.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: 'Poppins', 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: var(--color-base);
  padding: 17px 0px;
  font-size: 14px;
  border-radius: 5px;
  text-transform: uppercase;
  /* 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: var(--color-dark);
  /* 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";
   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;
		}
      .dataTables_wrapper .bottom {
         display: flex;
         justify-content: space-between;
         align-items: center;
     }


/* ----- 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: var(--color-darkest);
   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: white;
   border-radius: .5rem;
   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: var(--color-gray-base);
 }
 
 #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: var(--color-darkest);
   font-size: 1.5em;
 }
 
 #storeline .listing .info .store_info {
   color: var(--color-gray-base);
   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: var(--color-accent-dark); /* Ajustado para utilizar un color de acento */
   width: 10px;
   height: 10px;
   border-radius: 100%;
   position: absolute;
   left: -20px;
   top: 28px;
 }

 #storeline .listing.open {
   border: 1px solid var(--color-success-base);
   border-left: 8px solid var(--color-success-base);
 }
 
 #storeline .listing.open:hover {
   border: 1px solid var(--color-success-hover);
   border-left: 8px solid var(--color-success-hover);
 }

 #storeline .listing.closed {
   border: 1px solid var(--color-danger-base);
   border-left: 8px solid var(--color-danger-base);
 }
 
#storeline .listing.closed .image_wrapper img {
   filter: grayscale(100%);
 }

 #storeline .listing.closed:hover {
   border: 1px solid var(--color-danger-hover);
   border-left: 8px solid var(--color-danger-hover);   
 }
 
 #storeline .listing:hover {
   cursor: pointer;
   box-shadow: 0px 2px 10px 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: 2.5em;
	width: 2.5em;
   padding-top: 4px;
	text-align: center;
	font-size: 20px !important;
	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;
   background-color: transparent;
}

.tableList{
   text-align: center;
   height: 180px;
   width: 160px;
   border-radius: 8px;
   background-color: #a7cad9;
   margin-right: 2px;
   margin-left: 2px;
   margin-bottom: 6px;  
   transition: all 0.5s ease; 
}
.tableList:hover{
   background-color: #7eb3c7; /*var(--color-lightest); /*#f0f7fa;*/
}
.tableList a img{
   margin-top: 10px;
}
.tableList a h2{
   font-size: 18px;
   color: rgb(66, 66, 66);
   margin-top: 5px;
}
.waitercod{
    text-align: center;
    color: #424242;
    font-weight: bold;
}
.tabletime{
   position: absolute;
   top: 1px;
   left: 55px;
   padding: 2px 5px;
   color: #424242;
   font-weight: bold;
}

.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: 2.5em;
	width: 2.5em;
   padding-top: 4px;
	text-align: center;
	font-size: 20px !important;
	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: #4489a3;
}

.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: var(--color-danger-hover);
   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);
}

.tableList .tablenotif{
   color:var(--color-text);
   font-size: 14px;
   right: 0px;
   border-radius: 25%;
}

.nohover-item:hover {
	background-color: inherit !important;
}

.taxes{
    border-top-width: 0px !important;
	padding-left:1.5% !important;
	padding-bottom: 4px!important;
	padding-top: 4px!important;
	text-align:left;
}

.blink_me {
  animation: blinker 0.75s linear infinite;
}

@keyframes blinker {
  100% {
    opacity: 40%;
  }
}


/************************* modal waiter list ***************************/
#waiterlabel {
   margin-bottom: 15px;
   cursor: pointer;
}

.waiters-list {
   display: none;
}

.waiters-list.show {
   display: block; 
}

#waiterlabel .arrow {
   margin-left: 10px;
   font-size: 24px;
   vertical-align: middle;
   transition: transform 0.3s ease;
}

#waiterlabel .arrow.up {
   transform: rotate(180deg);
}


.cashinhand-group {
   display: flex;
   align-items: center;
   gap: 10px; /* Espacio entre el label y el input */
 }
 
 .cashinhand-group label {
   flex: 1; /* Permite que el label ocupe el espacio disponible */
   white-space: nowrap; /* Evita que el texto del label se divida en varias líneas */
   font-weight: 500;
 }
 
 .cashinhand-group input {
   flex: 0 0 120px; /* Ancho fijo para el input, ajusta según necesites */
   /* width: auto; */ /* Alternativa si prefieres que el input se ajuste a su contenido */
 }
 

/************************* order details style ***************************/
/* Dashboard */
.dashboard {
   position: relative;
   right: 0;
   border-radius: 8px;
   width: auto;
   max-height: 100%;
   width: 90%;
   padding: 20px;
   overflow-y: auto;
   transition: transform 0.3s ease-in-out;
   transform: translateX(0); /* Visible */
}

.dashboard h2 {
   font-size: 18px;
   margin-top: 5px;
   margin-bottom: 5px;
   display: block;
   color: var(--color-darkest);
}

.dashboard .overview {
   background: white;
   border-radius: 8px;
   padding: 10px;
   margin-bottom: 10px;
}

.dashboard .overview .restaurant {
   display: flex;
}

.dashboard .overview .room-status {
   display: flex;
   gap: 20px;
   flex-wrap: wrap;
   margin: 20px 10px 10px 10px;
}

.dashboard .overview .room-status .status-item {
   text-align: left;
   flex: 1;
   min-width: 100px;
   margin: 10px;
}

.dashboard .overview h4 {
   font-size: 14px;
   margin: 0;
   color: var(--color-gray-base);
}

.dashboard .overview .total {
   font-size: 14px;
   font-weight: 600;
   color: var(--color-darkest);
   display: flex;
   gap: 20px;
   align-items: center;
}

.dashboard .overview .total .value {
   font-size: 24px;
   font-weight: bold;
   color: var(--color-info-hover);
}

.dashboard .overview .room-container {
   display: flex;
   flex-wrap: wrap;
   gap: 20px 10px;
   margin: 20px 10px 10px 10px;
}

.dashboard .overview .room-container .room-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 10px;
}

.dashboard .overview .room-container .info {
   margin-left: 0px;
   font-weight: 600;
}

.dashboard .overview .room-container .info.payed {
   background-color: var(--color-success-lightest);
   color: var(--color-success-hover);
   text-transform: uppercase;
   font-size: 12px;
   padding: 3px 8px;
   border-radius: 4px;
}

.dashboard .overview .room-container .info.pending {
   background-color: var(--color-warning-lightest);
   color: var(--color-warning-hover);
   text-transform: uppercase;
   font-size: 12px;
   padding: 3px 8px;
   border-radius: 4px;
}

.dashboard .overview .room-container .options {
   color: var(--color-gray-hover);
   cursor: pointer;
}

.dashboard .overview .room-container .room-type {
   font-size: 14px;
   color: var(--color-gray-hover);
   margin-bottom: 5px;
}
.dashboard .overview .room-container .reservation {
   font-size: 16px;
   font-weight: bold;
   color: var(--color-darkest);
}
.dashboard .overview .room-container .price {
   color: var(--color-info-hover);
   font-size: 18px;
   font-weight: bold;
   justify-content: center;
}

.dashboard .overview .room-container i {
   font-size: 20px;
   color: var(--color-gray-light);
}

.chart-container,
.dashboard .overview .restaurant-card,
.dashboard .overview .room-container .room-card {
   /* background-color: white; */
   border: 1px solid #ddd;
   border-radius: 8px;
   padding: 15px;
   width: 200px;
   box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.dashboard .overview .restaurant-container {
   display: flex;
   flex-direction: column;
}

.dashboard .overview .orders-container{
   /* display: flex; */
   margin: 0px 10px 10px 10px;
   flex: 1;
   padding: 15px;
}

.restaurant .orders-container .orders-title {
   font-size: 14px;
   font-weight: 600;
   color: var(--color-darkest);
   margin-bottom: 5px;
}

.dashboard .overview .orders-container .orders-card {
   background: #f0f7fa;
   border-radius: 5px;  
   opacity: 0.8; 
   width: auto;
   height: 4em;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 10px;
}

.dashboard .overview .orders-container .order-body {
   width: 100%;
   font-size: 16px;
   font-weight: bold;
   color: var(--color-darkest);
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 0 10px;
   gap: 20px;
}

.dashboard .overview .orders-container .order-body > span{
   flex: 1;    
}

.dashboard .overview .orders-container .order-body .order-total {
   text-align: right; 
}

.dashboard .overview .orders-container .order-body .bx{
   font-size: 20px;
   color: var(--color-accent-dark);
}

.dashboard .overview .chart-container {
   margin: 20px 10px 10px 10px;
   width: 400px;
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 20px;
}

.chart-container h2{
   margin-top: 0;
   color: var(--color-gray-hover);
}

.dashboard .overview .restaurant-card{
   width: 400px;
   margin: 10px 10px 10px 10px;
}

.dashboard .overview  .restaurant-card .payment-info.cash {
   background: var(--color-success-lightest);
   border-radius: 5px;
   border-left: var(--color-success-hover) 5px solid;
}

.dashboard .overview  .restaurant-card .payment-info.credit {
   background: var(--color-info-lightest);
   border-radius: 5px;
   border-left: var(--color-info-hover) 5px solid;
}

.dashboard .overview .restaurant-card .payment-info.pending {
   background: var(--color-warning-lightest);
   border-radius: 5px;
   border-left: var(--color-warning-hover) 5px solid;
}

.dashboard .overview  .restaurant-card .order-count{
   position: relative;
   top: 10px;
   font-size: 20px;
   font-weight: bold;
   margin-left: 10px;
   color: var(--color-gray-hover);
}

.dashboard .overview .restaurant-card .description {
   display: flex;
   justify-content: space-between;
   align-items: baseline;
   margin-bottom: 10px;
}

.dashboard .overview  .restaurant-card .payment-type{
   font-size: 14px;
   font-weight: 400;
   color: var(--color-gray-hover);
   margin-bottom: 5px;
   margin-left: 10px;
}


.dashboard .overview .restaurant-card .price{
   font-size: 24px;
   font-weight: bold;
   color: var(--color-darkest);
   padding-right: 20px;
}

/************************* gauge chart block style ***************************/
.GaugeMeter {
   position: Relative;
   text-align: Center;
   overflow: Hidden;
   cursor: Default;
   display: inline-block;
   width: 200px;
   height: 150px;
}

.GaugeMeter SPAN, .GaugeMeter B {
   width: 54%;
   position: Absolute;
   text-align: Center;
   display: Inline-Block;
   color: RGBa(0,0,0,.8);
   font-weight: 100;
   overflow: Hidden;
   white-space: NoWrap;
   text-overflow: Ellipsis;
   margin: 0 23%;
}

.GaugeMeter S, .GaugeMeter U {
   text-decoration: None;
   font-size: .60em;
   font-weight: 200;
   opacity: .6;
}

.GaugeMeter output {
   display: Inline-Block;
   font-size: .80em;
   font-weight: 600;
   color: var(--color-info-base);
}

.chart-container .legend {
   font-size: 14px;
   font-weight: 600;
   color: var(--color-gray-hover);
   display: flex;
   flex-direction: column;
}

.chart-container .legend .legend-item.occupied {
   color: var(--color-info-base);
}

.chart-container .legend .legend-item.avalaible {
   color: var(--color-gray-light);
}
/************************* footer block style ***************************/
.footer {
   width: 100%;
   position: static;
   left: 0;
   bottom: 0;
   background-color: #f0f7fa;
   text-align: center;
   padding: 10px 0;
   z-index: auto;
}

.footer .container .footer-block {
   color: #8297A8;
   font-size: 14px;
}

.footer .container .footer-block a {
   color: var(--acent-dark);
   text-decoration: none;
}
/************************* slide panel style ***************************/
/* Overlay para oscurecer el contenido */
#overlay {
   position: fixed;
   display: none;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   
   background-color: rgba(0,0,0,0.5);
   z-index: 100;
   transition: all 0.3s ease, visibility 0.3s;
}

/* Estilos para el panel deslizante */
.slide-panel {
   position: fixed;
   top: 0;  
   right: -100%;
   width: 50%;
   max-width: 600px;
   background-color: white;
   transition: all 0.5s ease;
   box-sizing: border-box;
   z-index: 200;
   box-shadow: -3px 0 15px rgba(0,0,0,0.3);
   overflow: hidden;
   height: 100%;
   border-radius: 8px 0 0 8px;
}

.slide-panel.open {
   right: 0;
}

/* Header del panel */
.slide-panel .panel-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 15px;
   background-color: var(--color-gray-lightest);
   border-bottom: 1px solid #dee2e6;
}


.slide-panel .panel-header h2,
#checkoutPanel .form-data  #customerName2{
   margin: 0;
   font-size: 18px;
   font-weight: bold;
   color: var(--color-darkest);
}

/* Contenido principal */
.slide-panel .form-data {
   padding: 20px;
   overflow-y: auto;
   height: calc(100% - 120px); /* Ajuste dinámico para el contenido */
}

/* Footer del panel */
.slide-panel .panel-footer {
   padding: 10px 20px;
   border-top: 1px solid #dee2e6;
   display: flex;
   justify-content: flex-end;
   gap: 10px;
   background-color: var(--color-gray-lightest);  
}

body.darkened {
   filter: brightness(50%);
}
#checkoutPanel .form-data  #customerName2{
   margin-bottom: 10px;
}

#checkoutPanel .total{
   display: flex;
   justify-content: space-between;
   background-color: var(--color-gray-lightest);
   border-radius: 8px;
   padding: 20px;
}

#checkoutPanel .total h2
{
   margin-top: 0;
   font-size: 20px;
}

#checkoutPanel .total #total2{
   font-weight: 600;
   font-size: 20px;
}

#checkoutPanel .payment,
#paymentsModal .payment{
   padding: 0 0 20px 0px;
   gap: 20px;
}

#checkoutPanel .payment .ammounts,
#paymentsModal .payment .ammounts{
   display: flex;
   gap: 10px;
}   

#checkoutPanel .payment .payment-label,
#paymentsModal .payment .payment-label{
   text-transform: uppercase;  
}

#checkoutPanel .payment .item-paid,
#paymentsModal .payment .item-paid{
   padding: 20px 0 20px 20px;
   background-color: var(--color-success-lightest);
   border-radius: 8px;
   color: var(--color-success-hover);
}

#checkoutPanel .payment .item-due,
#paymentsModal .payment .item-due{
   padding: 20px 0 20px 20px;
   background-color: var(--color-danger-lightest);
   border-radius: 8px;
   color: var(--color-danger-hover);
}

#checkoutPanel .payment .pay-item,
#paymentsModal .payment .pay-item{
   margin-top: 10px;
   font-size: 14px;
   display: flex;
   flex-direction: column;
   font-weight: 600;
}

#checkoutPanel .payment .paid-amount,
#checkoutPanel .payment .due-amount,
#paymentsModal .payment .paid-amount,
#paymentsModal .payment .due-amount{
   font-weight: 600;
   font-size: 20px;
}

#checkoutPanel #returnChange,
#paymentsModal #returnChange{
   font-size: 18px;
   color: var(--color-gray-hover);
}

#checkoutPanel #returnChange span,
#paymentsModal #returnChange span{
   font-weight: bold;
}

#checkoutPanel .pay-methods,
#paymentsModal .pay-methods{
   padding: 0 20px 0 20px;
}

#checkoutPanel .pay-methods .title,
#paymentsModal .pay-methods .title{
   font-size: 18px;
   font-weight: 600;
}

#checkoutPanel .pay-methods .btn-group,
#paymentsModal .pay-methods .btn-group{
   background: var(--color-gray-lightest);
   padding: 6px;
   border-radius: 8px;
}

#checkoutPanel .form-group,
#paymentsModal .form-group{
   margin-top: 20px;
}

#checkoutPanel .type,
#paymentsModal .type,
#checkoutPanel .card-details,
#paymentsModal .card-details{
   display: flex;
   align-items: center;
   gap: 20px;
}

#checkoutPanel .type label,
#paymentsModal .type label{
   min-width: 23%;
}

#checkoutPanel .type input,
#paymentsModal .type input{
   max-width: 55%;
}
/************************* Invoce ***************************/
.invoice-container {
   max-width: 800px;
   margin: 0 auto;
   background-color: white;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   padding: 40px;
}

.invoice-container header {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   margin-bottom: 40px;
}

.invoice-container .logo h1 {
   color: var(--color-analogous-1);
   margin: 0;
   font-size: 24px;
}

.invoice-container .logo p {
   color: var(--color-gray-base);
   margin: 0;
   font-size: 12px;
}

.invoice-container .invoice-title {
   color: var(--color-analogous-1);
   font-size: 36px;
   margin: 0;
}

.invoice-container .invoice-details {
   display: flex;
   justify-content: space-between;
   margin-bottom: 40px;
}

.invoice-container .total-due {
   background-color: var(--color-gray-whitest);
   padding: 20px;
   margin-bottom: 40px;
}

.invoice-container .total-due h3 {
   margin: 0;
   font-size: 16px;
   color: var(--color-gray-base);
}

.invoice-container .total-due .amount {
   font-size: 24px;
   font-weight: bold;
   margin: 10px 0 0;
   color: var(--color-darkest);
}

.invoice-container .invoice-items {
   width: 100%;
   border-collapse: collapse;
   margin-bottom: 40px;
}

.invoice-container .invoice-items th {
   background-color: var(--color-analogous-1);
   color: white;
   text-align: left;
   padding: 12px;
}

.invoice-container .invoice-items td {
   padding: 12px;
   border-bottom: 1px solid var(--color-gray-light);
}

.invoice-container .invoice-items tr:nth-child(even) {
   background-color: var(--color-gray-whitest);
}

.invoice-container .invoice-summary {
   margin-left: auto;
   width: 300px;
}

.invoice-container .summary-item {
   display: flex;
   justify-content: space-between;
   margin-bottom: 10px;
}

.invoice-container .summary-item.total {
   font-weight: bold;
   color: var(--color-analogous-1);
   border-top: 2px solid var(--color-analogous-1);
   padding-top: 10px;
}

.invoice-container footer {
   margin-top: 40px;
   text-align: center;
   color: var(--color-gray-base);
   font-size: 12px;
}
/************************* Open order modal ***************************/
#newOrder .guests-counter{
   display: flex;
   align-items: center;
   justify-content: space-between;
}

#newOrder .customer-select,
#bookingPanel .customer-select {
   position: relative;
   width: 100%;
   max-width: 300px;
}

.customer-select .input-wrapper {
   position: relative;
}

.customer-select .input-wrapper .search-icon {
   position: absolute;
   left: 10px;
   top: 68%;
   transform: translateY(-50%);
   color: #888;
}

.customer-select .input-wrapper #customerName {
   padding-left: 30px;
   width: 100%;
   height: 40px;
}

.customer-select .suggestions-container {
   position: absolute;
   top: 100%;
   left: 0;
   right: 0;
   background-color: white;
   border: 1px solid #ccc;
   border-top: none;
   max-height: 200px;
   overflow-y: auto;
   z-index: 1000;
   /* display: none; */
}

.suggestion,
.suggestion-item {
   padding: 10px;
   cursor: pointer;
   display: flex;
   align-items: center;
}

.suggestion-item:hover {
   background-color: #f0f0f0;
}

.suggestion-info {
   display: flex;
   flex-direction: column;
}

.suggestion-name {
   font-weight: bold;
}

.customer-select .suggestions-footer{
   padding: 5px;
   text-align: right;
   border-top: 1px solid #e5e5e5;
}

.actions-menu {
   display: flex;
   align-items: center;
   gap: 3px;
   font-size: 24px;
}

.actions-menu .action-item {
   color: var(--color-info-base);
   transition: all 0.3s ease;
   padding: 5px;
}

.actions-menu .bx-edit.disabled,
.actions-menu .bx-credit-card.disabled,
.actions-menu .bx-file.disabled,
.actions-menu .bx-receipt.disabled{
   color: var(--color-gray-light);
   padding: 5px;
   cursor: not-allowed;
}


.actions-menu .action-item:hover{
   color: var(--color-info-hover);
   border-radius: 50%;
   transform: scale(1.2);
   background-color: var(--color-info-lightest);
}

.actions-menu .bx-trash {
   color: var(--color-danger-base);
   transition: all 0.3s ease;
   padding: 5px;
}

.actions-menu .bx-trash:hover {
   color: var(--color-danger-hover);
   border-radius: 50%;
   transform: scale(1.2);
   background-color: var(--color-danger-lightest);
}