body { font-family: "Roboto", sans-serif; }

footer { margin-top: 20px; }

.text-red { color: #E52A3A; }

.text-gray { color: #5f5f5f; }

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

/* Editor styling */

.ta-toolbar { background-color: #F0F0F0; padding: 10px 10px 5px; margin-left: 0; /* Override bootstrap */ border: 1px solid #EEE; }

    .ta-toolbar .btn-group { margin-bottom: 5px; }

.ta-editor, .white-box { padding: 10px; background-color: #FFF; border: 1px solid #EEE; }

textarea.ta-bind { width: 100%; }
input[type=date], input[type=time], input[type=datetime-local], input[type=month] { line-height: 15px !important; }
.padding-edition { padding-left: 40px; }
.coupons { height: 800px; -moz-columns: 100 200px; -webkit-columns: 100 200px; columns: 100 200px; overflow: scroll; }
    .coupons ul { list-style-type: none; }
.childvar { background-color: #FFF; }
    .childvar label { margin-left: 0; }
.parentvar { background-color: #EEE; }
.childselect { margin-left: 77px !important; }
.parentselect { margin-left: 10px !important; }
.admin { color: blue; }
.logticket td { padding: 5px 0; }
.ta-editor { min-height: 200px; height: auto; overflow: auto; font-family: inherit; font-size: 100%; width: 100%; }

.padding-20 { padding-left: 10px; cursor: help; }
.tooltip-inner { max-width: 500px !important; text-align: left !important; }
#side-menu li { cursor: pointer !important;  }


/*
--------------------
24. PRELOADER
--------------------
*/
.throbbers_loader { display: table; margin: auto; vertical-align: middle; width: 100%; height: 100%; position: fixed; top: 0; left: 0; bottom: 0; right: 0; /*cursor:url(../img/candy_cur.cur), auto;*/ background-color: #fff; z-index: 999; }
    .throbbers_loader .throbber { display: table-cell; vertical-align: middle; text-align: center; color: #000; padding-right: 145px !important; padding-bottom: 122px !important; }
        .throbbers_loader .throbber:after { display: block; margin: auto; margin-top: 20px; position: relative; width: 40px; height: 40px; -webkit-animation: rotate 0.6s linear infinite; -moz-animation: rotate 0.6s linear infinite; -ms-animation: rotate 0.6s linear infinite; -o-animation: rotate 0.6s linear infinite; animation: rotate 0.6s linear infinite; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; border-top: 1px solid #333; border-bottom: 1px solid #d5d5d5; border-left: 1px solid #333; border-right: 1px solid #d5d5d5; content: ''; opacity: .7; }

        #preloader{
            width: 100%; height: 100%; position: fixed; top: 0; left: 0; bottom: 0; right: 0;   opacity: 80%; /*cursor:url(../img/candy_cur.cur), auto;*/ background-color: #fff; z-index: 999;
        }
      

@keyframes rotate {
    0% { -ms-transform: rotatez(-360deg); -webkit-transform: rotatez(-360deg); transform: rotatez(-360deg); }
    100% { -ms-transform: rotatez(0deg); -webkit-transform: rotatez(0deg); transform: rotatez(0deg); }
}

@-webkit-keyframes rotate {
    0% { -ms-transform: rotatez(-360deg); -webkit-transform: rotatez(-360deg); transform: rotatez(-360deg); }
    100% { -ms-transform: rotatez(0deg); -webkit-transform: rotatez(0deg); transform: rotatez(0deg); }
}


.ulwith2columns { -moz-column-count: 4; -moz-column-gap: 4.5em; -webkit-column-count: 4; -webkit-column-gap: 4.5em; column-count: 4; column-gap: 4.5em; list-style-type: none; }

.ulwith2columns2 { -moz-column-count: 2; -moz-column-gap: 2.5em; -webkit-column-count: 2; -webkit-column-gap: 2.5em; column-count: 2; column-gap: 2.5em; list-style-type: none; }
.vertical-alignment-helper { display: table; height: 100%; text-align: center; margin: 0 auto; }
.vertical-align-center { /* To center vertically */ display: table-cell; vertical-align: middle; }
.capture--heading { color: #2db88e; }
body { line-height: 1; }
/*ol, ul { list-style: none; }*/
blockquote, q { quotes: none; }
    blockquote:before, blockquote:after, q:before, q:after { content: none; }



.capture { position: relative; }
    .capture, .capture * { text-rendering: optimizeLegibility; }
        .capture .capture--image { background-color: #d9d9d9; display: block; }
.capture--button { cursor: pointer; -webkit-appearance: button; }
.capture--input-wrapper { margin: 0; position: relative; }
.capture--heading { margin: 0; }
.capture .capture--input { margin: 0; padding: 4px 6px; box-shadow: none; transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out, background-color 0.3s ease-in-out; font-size: 16px; outline: none; border: 1px solid #DDDDDD; }
    .capture .capture--input::-webkit-input-placeholder { color: #aaa; }
    .capture .capture--input::-moz-placeholder { color: #aaa; }
    .capture .capture--input:focus { box-shadow: 0 0 5px rgba(81, 203, 238, 1); border-color: rgba(81, 203, 238, 1); }
    .capture .capture--input.error { background-color: #ffdddd; box-shadow: 0 0 5px rgba(238, 101, 82, 1); border-color: rgba(238, 101, 82, 1); }
.capture .capture--close { position: absolute; cursor: pointer; display: block; }
.spinner-small { height: 28px; width: 28px; display: inline-block; position: absolute; top: -500px; text-align: center; vertical-align: middle; -webkit-animation: rotator 1.4s linear infinite; animation: rotator 1.4s linear infinite; margin: 6px 0; }

@-webkit-keyframes rotator {
    0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    100% { -webkit-transform: rotate(270deg); transform: rotate(270deg); }
}

@keyframes rotator {
    0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    100% { -webkit-transform: rotate(270deg); transform: rotate(270deg); }
}

@-webkit-keyframes colors {
    0% { stroke: #4285F4; }
    25% { stroke: #DE3E35; }
    50% { stroke: #F7C223; }
    75% { stroke: #1B9A59; }
    100% { stroke: #4285F4; }
}

@keyframes colors {
    0% { stroke: #4285F4; }
    25% { stroke: #DE3E35; }
    50% { stroke: #F7C223; }
    75% { stroke: #1B9A59; }
    100% { stroke: #4285F4; }
}

@-webkit-keyframes dash {
    0% { stroke-dashoffset: 79; }
    50% { stroke-dashoffset: 20; -webkit-transform: rotate(135deg); transform: rotate(135deg); }
    100% { stroke-dashoffset: 79; -webkit-transform: rotate(450deg); transform: rotate(450deg); }
}

@keyframes dash {
    0% { stroke-dashoffset: 79; }
    50% { stroke-dashoffset: 20; -webkit-transform: rotate(135deg); transform: rotate(135deg); }
    100% { stroke-dashoffset: 79; -webkit-transform: rotate(450deg); transform: rotate(450deg); }
}

.path { stroke: #DE3E35; stroke-dasharray: 79; stroke-dashoffset: 40; transform-origin: 14px 14px 0; -webkit-transform-origin: center; -webkit-animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite; animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite; }
.capture--social-media { vertical-align: middle; padding: 10px 15px 10px 5px; display: inline-block; white-space: nowrap; position: relative; left: 5px; overflow: hidden; }
.capture--facebook, .capture--facebook iframe { height: 20px; width: 100px; overflow: hidden; border: none; }
.capture--placeholder-replacement { position: absolute; left: 6px; top: 5px; color: #666; }
.capture.no-details .capture--inputs-wrapper { display: none; }
.capture.no-details .capture--image { cursor: pointer; }
.capture.popup label { position: absolute; left: -500px; }
.capture.popup .capture--input { height: 26px; border-color: white; border-radius: 0; }
    .capture.popup .capture--input:focus { border-color: rgba(81, 203, 238, 1); }
    .capture.popup .capture--input.error { border-color: rgba(238, 101, 82, 1); }
.capture.popup .capture--inputs-wrapper { padding: 21px 20px 20px; }
.capture.popup .capture--inputs-wrapper, .capture.popup .capture--input-wrapper { float: left; }
.capture.popup .capture--initial { position: relative; overflow: hidden; }
.capture.popup .capture--button { border: none; height: 36px; padding: 0; font-size: 14px; font-weight: 600; position: absolute; right: 20px; bottom: 20px; outline: none; width: 120px; display: block; -webkit-appearance: none; border-radius: 0; }
.capture.popup .spinner-small { opacity: 0; width: 120px; right: 0; display: block; }
.capture.popup #capture_email { width: 326px; }
.capture.popup.require-name .capture--input { width: 102px; }
.capture.popup.require-name #capture_name { margin-right: 4px; }
.capture.popup.require-name #capture_email { width: 186px; }
.capture.popup.no-details .capture--button { display: none; }
.capture.popup .capture--text { clear: both; padding-top: 18px; font-size: 14px; }
.capture.popup.sending .spinner-small { opacity: 1; bottom: 20px; right: 20px; margin-top: 3px; top: auto; }
.capture.popup.sending .capture--button { display: none; }
.capture.popup.done .capture--inputs-wrapper, .capture.popup.done .spinner-small { opacity: 0; }
.capture.popup .capture--thank-you { position: absolute; top: -1000px; opacity: 0; transition: opacity 0.3s; -moz-transition: opacity 0.3s; -webkit-transition: opacity 0.3s; -o-transition: opacity 0.3s; -ms-transition: opacity 0.3s; }
.capture.popup.done .capture--thank-you { margin-top: 0 !important; text-align: center; padding: 0 10px; font-weight: bold; font-size: 26px; left: 0; right: 0; bottom: 0; opacity: 1; min-height: 57px; top: auto; }
.capture.popup .capture--close { top: 0; right: 8px; }
.capture.popup .capture--facebook { position: relative; top: -1px; }

@media (max-width: 499px) {
    .capture.popup #capture_email, .capture.popup .capture--input-wrapper { width: 100%; }
    .capture.popup .capture--inputs-wrapper { width: calc(100% - 174px); }
    .capture.popup.require-name .capture--inputs-wrapper { float: none; overflow: hidden; padding-bottom: 0; width: calc(100% - 40px); }
    .capture.popup.require-name .capture--input-wrapper { float: none; }
    .capture.popup.require-name #capture_email { width: calc(100% - 14px); }
    .capture.popup.require-name .capture--input-wrapper { width: 50%; float: left; }
        .capture.popup.require-name .capture--input-wrapper:last-child, .capture.popup.require-name #capture_email { float: right; }
    .capture.popup.require-name .capture--button, .capture.popup.sending.require-name .spinner-small { position: static; width: calc(100% - 40px); margin: 5px auto 20px; }
    .capture.popup.require-name.sending .spinner-small { margin: 17px auto; }
    .capture.popup.require-name .capture--input, .capture.popup.require-name #capture_email { width: calc(100% - 16.5px); }
    .capture.popup.require-name.done .capture--thank-you { min-height: 89px; }
}

.dialogdemoBasicUsage #popupContainer { position: relative; }

.dialogdemoBasicUsage .footer { width: 100%; text-align: center; margin-left: 20px; }

    .dialogdemoBasicUsage .footer, .dialogdemoBasicUsage .footer > code { font-size: 0.8em; margin-top: 50px; }

.dialogdemoBasicUsage button { width: 200px; }

.dialogdemoBasicUsage div#status { color: #c60008; }


/*
Copyright 2016 Google Inc. All Rights Reserved. 
Use of this source code is governed by an MIT-style license that can be in foundin the LICENSE file at http://material.angularjs.org/license.
*/

/* AUTOCOMPLETE */

.autocomplete { width: 100%; position: relative; }

    .autocomplete input { width: 100%; padding: 0.4em; }

    .autocomplete ul { 
        position: absolute; left: 0; width: 100%; 
        border-left: 1px solid #888; border-right: 1px solid #888;
         border-bottom: 1px solid #888; z-index: 1; background-color: #fff !important;
          height: 200px; overflow: scroll; overflow-x: hidden; padding-left:0; margin-left:0}

    .autocomplete li { text-align: left; list-style: none; width: 100%; padding: 0.4em; background-color: #fff; }

        .autocomplete li.active { width: 100%; background-color: #4bf; }

    .autocomplete .highlight { background-color: #E2E2E2; }

    .autocomplete li.active .highlight { background: #666; color: #fff; }

.bkred { 
    width: 10px;
    height:10px;
    
    border-radius: 50%;
    background-color: #f00;
 }
 .bkyellow { 
    width: 10px;
    height:10px;
    
    border-radius: 50%;
    background-color: #F7C223;
 }
 .bkgreen { 
    width: 10px;
    height:10px;
    
    border-radius: 50%;
    background-color: green;
 }




/*-------------------------------------------------------------------------------------------------------------------------------*/
/* 07 - OKTO CODE */
/*-------------------------------------------------------------------------------------------------------------------------------*/

/* Switch */

.switcher-wrapper{
    margin-bottom: 15px;
    display: inline-block;
}

.switch-payment {
    position: relative;
    display: inline-block;
    width: 55px;
    height: 27px;
    vertical-align: middle;
  }

  .switcher-wrapper .switch-text{
      margin-left: 10px;
  }

.switch-payment input {display:none;}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 22px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }

.switch:checked + .slider {
    background-color: #2996cc;
  }
  
  .switch:focus + .slider {
    box-shadow: 0 0 1px #2996cc;
  }
  
  .switch:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
  }
  
  .slider.round {
    border-radius: 0px;
  }
  
  .slider.round:before {
    border-radius: 0px;
  }
  /*End switch*/

.grid-sizer,
.grid-item { width: 31%; }

.grid-item { margin-bottom: 15px; }

.shop-item { position: relative; float: left; width: 100%; }
    .shop-item img { width: 100%; height: auto; }

.clippy { margin-top: -3px; position: relative; top: 3px; }

.section { margin-top: 30px; margin-bottom: 30px; }

.list { border: 1px solid #000; border-radius: 15px; list-style: none outside none; margin: 10px; padding: 10px; }

.item { padding: 5px 10px; margin: 5px 0; border: none; border-radius: 5px; background-color: #EA8A8A; font-size: 1.1em; font-weight: bold; text-align: center; cursor: move; }


#table-container tbody tr:nth-last-child(-n+4) .dropdown-details {
    top: -205px;
}


.special_top {
    top: -205px !important;
}

.special_top_order{
     top: -125px !important;

}

/***  Extra ***/

.logList { min-height: 200px; border: 5px solid #000; border-radius: 15px; }

.orders .shopping-cart { padding: 10px; border: solid 3px rgba(35, 35, 35, 0.1); }
    .orders .shopping-cart table { width: 100%; }
        .orders .shopping-cart table td { padding: 3px; width: 50%; font-size: 15px; text-transform: uppercase; text-align: right; padding-right: 10px; color: #232323; }
            .orders .shopping-cart table td + td { text-align: left; padding-right: 3px; padding-left: 10px; }
        .orders .shopping-cart table tfoot td { border-top: solid 1px #a5abb7; font-size: 18px; font-weight: 900; color: #232323; }
.signature-pad { position: absolute; left: 0; top: 0; width: 400px; height: 200px; }
.signatureimg { position: absolute; left: 0; top: 0; }
.wrappersig { position: relative; width: 400px; height: 200px; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; border: 1px solid #000; }

ul.shopping { list-style-type: none; margin: 0; padding: 0; }

    li.shopping{cursor: pointer; }

    li.shopping table:hover{background: #f6f6f6; }

    li.shopping:last-child { border: none; }

    .cart-header-values{
        padding: 25px 20px;
        border-bottom: 1px solid #2996cc; 
        background-color: #2996cc;
        color: #fff;
        font-weight: 700;
        font-size: 16px;
    }

    .cart-header-values.charge-cart-header{
        background-color: #2381af;
        cursor: pointer;
        text-align: center;
    }

    .cart-header-values.charge-cart-header:hover{
        background-color: #1e7098;
    }

    li.shopping div {text-decoration: none; color: #000; display: block; -webkit-transition: background-color 0.3s ease; -moz-transition: font-size 0.3s ease, background-color 0.3s ease; -o-transition: font-size 0.3s ease, background-color 0.3s ease; -ms-transition: font-size 0.3s ease, background-color 0.3s ease; transition: font-size 0.3s ease, background-color 0.3s ease; }

    .charge-card-overlay {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: rgba(255, 255, 255, .8);
        z-index: 2;
        cursor: pointer;
    }

    .charge-card{
        position: fixed;
        top: 65px;
        bottom: 0;
        right: 0;
        background-color: #fafafa; 

        width: 400px;

        -webkit-transform: translateX(400px);
        -moz-transform: translateX(400px);
        transform: translateX(400px);
        overflow-x: hidden;
        transition: 0.5s;

        z-index: 3;
        padding: 0 20px;
    }

    .slide{
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
        transform: translateX(0px);   

        -webkit-box-shadow: -4px 2px 30px -9px rgba(0,0,0,0.97);
        -moz-box-shadow: -4px 2px 30px -9px rgba(0,0,0,0.97);
        box-shadow: -4px 2px 30px -9px rgba(0,0,0,0.97);     
    }

    .charge-card .close-charge {
        position: absolute;
        left: 40px;
        top: 20px;
        font-size: 24px;
        color: #2996cc;
        cursor: pointer;
    }

    .charge-card .inputNewColor{
        background-color: #2996cc !important;
    }
    .charge-card .inputNewColorgreen{
        background-color: #91eb40 !important;
    }
    .charge-card .btn-chage-pos{
        background-color: #2996cc;
        width: 100%;
        padding: 10px 12px;
    }

    .charge-card .btn-chage-pos:hover{
        background-color: #2381af;
    }

    .charge-card label{
        color: #000;
    }

    .charge-card input{
        /*height: 40px;*/
        border-radius: 0px;
    }

    .total-charge-resume{
        border: 1px solid #ddd;
        padding: 20px;
        color: #000;
        font-size: 16px;
        text-align: center
    }

    .total-charge-resume .data{
        margin-bottom: 10px;
    }


    .form-control{
        box-shadow: none;
        -webkit-box-shadow: none;
        border: 1px solid #ddd;
    }

    .panel-body{
        padding: 15px 15px;
    }



#orderhtml { width: 200px; }
.leadaccount, .leadaccount a { background-color: red; color: yellow !important; font-weight: bold !important; }

.item {
  border:none;
  margin-top:15px;
  padding:15px;
  border-radius:4px;
  background-color:transparent !important;
  color:#000;
}

.item.ng-move,
.item.ng-enter,
.item.ng-leave {
  -webkit-transition:all linear 0.5s;
  transition:all linear 0.5s;
}

.item.ng-leave.ng-leave-active,
.item.ng-move,
.item.ng-enter {
  opacity:0;
}

.item.ng-leave,
.item.ng-move.ng-move-active,
.item.ng-enter.ng-enter-active {
  opacity:1;
}

.griddesktop
{
    overflow: scroll; overflow-x: hidden;
}
.grid-dashboard
{
    padding: 0 15px;
    height: auto !important;
}
.gridmobile{
}
.noborder, .noborder td
{
    border:0 !important;
}

.dropdown-toggle-icon{
    list-style: none;
    padding: 0;
    margin: 0;
}

.dropdown-toggle-icon .menu-icon{
    font-size: 24px;
}

.dropdown-details{
    list-style: none;
    left: -125px;
    top: 25px;
    min-width: 190px;
}

.dropdown-details .divider{
    margin: 0;
}

.dropdown-details li a label{
    color: #333 !important;
    font-family: 'Raleway', sans-serif !important;
    font-weight: 300;
    margin: 3px 0;
}


.dropdown-menu li a
{
    /*font-family:'Times New Roman' !important;*/

}
.xxx .row {
    overflow: hidden;
    width: 400px;
}

.xxx .col {
    float: left;
    width: 60px;
}

ul.columns
{
     width:400px;
  margin-bottom:20px;
  overflow:hidden;
  border-top:1px solid #ccc;
}
ul.columns li{

 line-height:1.5em;
  border-bottom:1px solid #ccc;
  float:left;
  display:inline;
}
.gridmobile li.shopping
{
    font-size:10px;
}
@media (min-width: 768px)
{
.modal-dialog {
    width: 900px !important;
    margin-top:200px !important;
    }
}

@media (max-width: 768px)
{
    .charge-cart-mobile{
      margin-top: 20px;
    }

    .slide{
        width: 80%;
        top: 60px;
    }  
}

.fc-event.expired{
	background-color: red;
	color: yellow !important;
}

.fc-event.pending{
	background-color: dodgerblue;
	color: #fff !important;
}

.fc-event.confirmed{
	background-color: green;
	color: #fff !important;
}

.constrained {
    /*margin: 10px;
    padding: 10px;
    height: 200px;*/
    overflow: auto;
    /*border: 1px solid lightgray;*/
}

 * -------------------------------------------------------------------------- */
/* 1.1 */
/* Preloader
/* ========================================================================== */
#preloader {
  position: fixed;
  z-index: 99999999999;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #ffffff !important;

}
#preloader-status {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin: -100px 0 0 -100px;
  /*You can use animated gif for preloader*/
  /*background: url('../img/preloader.png') no-repeat 50% 20px;*/
}
#preloader-title {
  font-size: 12px;
  text-align: center;
  text-transform: uppercase;
}
.spinner {
  margin: 0 auto;
  width: 120px;
  height: 30px;
  text-align: center;
  font-size: 10px;
}
.spinner > div {
  background-color: #2996cc;
  height: 100%;
  width: 20px;
  display: inline-block;
  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
  animation: stretchdelay 1.2s infinite ease-in-out;
}
.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
.spinner .rect3 {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}
.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
@-webkit-keyframes stretchdelay {
  0%,
  40%,
  100% {
    -webkit-transform: scaleY(0.4);
  }
  20% {
    -webkit-transform: scaleY(1);
  }
}
@keyframes stretchdelay {
  0%,
  40%,
  100% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }
  20% {
    transform: scaleY(1);
    -webkit-transform: scaleY(1);
  }
}
.circlesp
  {
    border-radius: 50%;
    width: 200px;
    height: 200px; 
  }
.error
{
    border:1px solid red !important;

}

.rating {
    color: #a9a9a9;
    margin: 0;
    padding: 0;
}
ul.rating {
    display: inline-block;
}
.rating li {
    list-style-type: none;
    display: inline-block;
    padding: 1px;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
    font-size:20px;
}
.rating .filled {
    color: orangered;
}
.clear{
  margin-top:20px;
}
div.menu_food
{
    padding:40px;
}
.chofer .special
{
    
    border-top:4px solid red !important;

}
.chofer .greenspecial
{
     border-top: 4px solid green !important;

}

.hidden_control{
    display:none;

}
.choferruta p, .choferruta span{
    font-size:16px !important;

}
.border-red
{
    border:4px solid red !important;

}
.border-yellow
{
    border:4px solid yellow !important;

}
.border-black
{
    border:4px solid black !important;

}
.border-brown
{
    border:4px solid #671b1b !important;

}
.delivery_yes
{
    border:1px solid #000;
    background-color:green;
    color:#000;

    }
.delivery_no
{
    border:1px solid #000;
    background-color:red;
    color:#000;

    }
 #panel {
      position: absolute;
      top: 10px;
      left: 50%;
      margin-left: -180px;
      z-index: 5;
      background-color: #fff;
      padding: 5px;
      border: 1px solid #999;
    }
 span.dataday
 {  
     margin:0 1px;
     font-size:18px;

 }
 tr:hover {
    color: #000;
    background-color: #f7f7f3;
    cursor: pointer;
}
.foodinputs input{
    width: 80px !important;
    padding-left:10px;
}
.okto_food_lunch
{
    display: block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-image: url(/img/food/Lunch.png);
    width: 34px;
    height: 43px;

  
   
}
.okto_food_lunch_regulars
{
    display: block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-image: url(/img/food/Lunch_Regulars.png);
    width: 34px;
    height: 43px;
}
.okto_food_lunch_especiales
{
    display: block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-image: url(/img/food/Lunch_Especiales.png);
    width: 34px;
    height: 43px;
}
.okto_food_lunch_milk
{
    display: block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-image: url(/img/food/milk.png);
    width: 34px;
    height: 43px;
}
.okto_food_lunch_juice
{
    display: block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-image: url(/img/food/juice.png);
    width: 34px;
    height: 43px;
}
select{
    -webkit-appearance: none;
   -moz-appearance:    none;
   appearance:         none;   
   -webkit-border-radius: 0;  /* Safari 3-4, iOS 1-3.2, Android 1.6- */    
   -moz-border-radius: 0;  /* Firefox 1-3.6 */     
   border-radius: 0;  /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
}.okto_food_lunch_diff
{
    display: block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-image: url(/img/food/Lunch_Diff.png);
    width: 34px;
    height: 43px;
}
.okto_food_breakfast
{
    display: block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-image: url(/img/food/breakfast.png);
    width: 34px;
    height: 43px;
}
.okto_food_small
{
    display: block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-image: url(/img/food/bags_small.png);
    width: 34px;
    height: 43px;
}
.okto_food_medium
{
    display: block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-image: url(/img/food/bags_medium.png);
    width: 34px;
    height: 43px;
}
.okto_food_large
{
    display: block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-image: url(/img/food/bags_large.png);
    width: 34px;
    height: 43px;
}
.okto_food_beans
{
    display: block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-image: url(/img/food/beansnew.png) ;
    width: 32px;
    height: 32px;
}
.okto_food_vegetable
{
    display: block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-image: url(/img/food/vegetable.png) ;
    width: 32px;
    height: 32px;
}
.okto_food_meat
{
    display: block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-image: url(/img/food/meat.png) ;
    width: 32px;
    height: 32px;
}
.okto_food_meatball
{
    display: block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-image: url(/img/food/meatball.png) ;
    width: 32px;
    height: 32px;
}
.okto_food_pork
{
    display: block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-image: url(/img/food/pig.png) ;
    width: 32px;
    height: 32px;
}
.okto_food_congri
{
    display: block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-image: url(/img/food/rice.png) ;
    width: 32px;
    height: 32px;
}
.okto_food_soup
{
    display: block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-image: url(/img/food/soup.png) ;
    width: 32px;
    height: 32px;
}
.okto_food_fish
{
    display: block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-image: url(/img/food/fish.png) ;
    width: 32px;
    height: 32px;
}
.okto_food_vianda
{
    display: block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-image: url(/img/food/vianda.png) ;
    width: 32px;
    height: 32px;
}
.okto_food_pollo
{
    display: block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-image: url(/img/food/chicken.png) ;
    width: 32px;
    height: 32px;
}
.okto_food_sandwich
{
    display: block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-image: url(/img/food/sandwich.png) ;
    width: 32px;
    height: 32px;
}
.okto_food_picadillo
{
    display: block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-image: url(/img/food/picadillo.png) ;
    width: 32px;
    height: 32px;
}
.okto_food_pasta
{
    display: block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-image: url(/img/food/noodles.png) ;
    width: 32px;
    height: 32px;
}
.okto_food_pure
{
    display: block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-image: url(/img/food/pure.png) ;
    width: 32px;
    height: 32px;
}
.green
{
    color:green !important
}
.okto_invoice_20px
{

    background-image: url(/img/menu/okto_invoice_20px.png) ;
    width: 12px;
    height: 13px; 
    margin-left: 1px;
    margin-right: 2px;
}
.okto_driver_20px
{

    background-image: url(/img/menu/okto_driver_20px.png) ;
    width: 12px;
    height: 13px; 
    margin-left: 1px;
    margin-right: 2px;
}
.okto_driver_60px
{

    background-image: url(/img/menu/okto_driver_60px.png) ;
    width: 36px;
    height: 39px; 
   
}
.okto_invoice_60px
{

    background-image: url(/img/menu/okto_invoice_60px.png) ;
    width: 36px;
    height: 39px; 

}

.okto_delivery_60px
{
    background-image: url(/img/menu/okto_delivery_60px.png) ;
    width: 36px;
    height: 39px;
}
.okto_kitchen_20px
{
    background-image: url(/img/menu/okto_kitchen_20px.png) ;
    width: 12px;
    height: 13px; 
    margin-left: 1px;
    margin-right: 2px;
}






select.minimal {
    background-image:
      linear-gradient(45deg, transparent 50%, gray 50%),
      linear-gradient(135deg, gray 50%, transparent 50%),
      linear-gradient(to right, #ccc, #ccc);
    background-position:
      calc(100% - 20px) calc(1em + 2px),
      calc(100% - 15px) calc(1em + 2px),
      calc(100% - 2.5em) 0.5em;
    background-size:
      5px 5px,
      5px 5px,
      1px 1.5em;
    background-repeat: no-repeat;
    font-size:12px !important;
  }
  
  select.minimal:focus {
    background-image:
      linear-gradient(45deg, green 50%, transparent 50%),
      linear-gradient(135deg, transparent 50%, green 50%),
      linear-gradient(to right, #ccc, #ccc);
    background-position:
      calc(100% - 15px) 1em,
      calc(100% - 20px) 1em,
      calc(100% - 2.5em) 0.5em;
    background-size:
      5px 5px,
      5px 5px,
      1px 1.5em;
    background-repeat: no-repeat;
    border-color: green;
    outline: 0;
  }
  .invoicesgreen
  {
      color: green !important;
  }
  .invoicesred
  {
      color: red !important;
  }
  
  .newclassmenu {border: solid 1px red;}
  .dashhover:hover{
    border: thin solid #999;
    font-weight: bold;

  }
  table th{
   /* background-color: darkseagreen;
    color: black;*/
    font-size: 14px !important;
    font-weight: bold !important;
  }
  tr.visited
  {
    background-color: aquamarine;
  }
  
  /* Table Styles */
#table-container {
    width: 100%;
}

#table-container .table {
    width: 100%;
    border-collapse: collapse;
}

#table-container th, #table-container td {
    padding: 8px 12px;
    vertical-align: top;
    text-align: left;
}

/* Checkbox Styles */
#table-container input[type="checkbox"] {
    margin: 5px; /* Adjust as needed */
}

/* Input Styles */
#table-container input[type="text"] {
    width: 160px;
    box-sizing: border-box;
    padding: 5px;
}

/* Deep Permissions Table Style */
#table-container .specialtable {

    border-collapse: collapse;
}

#table-container .specialtable td {
    padding: 8px;
}

/* Removing some inline styles from your HTML */
/* ... for brevity, continue with other styling as needed ... */
.progress-bar-container {
width: 100%;
background-color: #e0e0e0;
height: 20px;
}

.progress-bar {
height: 100%;
background-color: #4CAF50;
}

.input-invalid {
    border: 2px solid red;
}
/* Asegúrate de que la barra de navegación tenga un display flex y alinee los elementos a la derecha */
.nav.navbar-top-links {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Alinea los elementos a la derecha */
}

.marquee-container {
    white-space: nowrap; /* Mantiene los elementos de la marquesina en una sola línea */
    overflow: hidden; /* Oculta los elementos que se desbordan del contenedor */
    animation: marquee 10s linear infinite; /* Aplica la animación de desplazamiento */
    margin-right: 199px;
    right: 120px;
    left: 120px;
}

.marquee {
    display: inline-block; /* Display inline para que se alinee correctamente */
}

/*@keyframes marquee {
    from { transform: translateX(100%); }
    to { transform: translateX(-300%); }
}*/

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-100% - 240px)); } /* Ajusta la animación para mover la marquesina la longitud de ella misma más los márgenes definidos */
}

.flex-container {
    display: flex;
}

.flex-item {
    flex: 1;
    padding-left: 10px; /* Añade padding a la izquierda de cada control */
}

.flex-item:first-child {
    padding-right: 10px; /* Añade padding a la derecha del primer elemento (select) */
    margin-right: 10px; /* Añade margen a la derecha del select para separarlo del input */
}



h4.page-header {
    font-size: 16px;
    font-weight: bold;
    color: #333;
   
}

.input-group-addon {
    background-color: #007bff;
  
    border: none;
    font-weight: bold;
}

.select-form-control {
    border-radius: 0;
}

.btn.otherbtnCheckout {
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 3px;
    padding: 8px 15px;
    font-size: 14px;
}

.btn.otherbtnCheckout:hover {
    background-color: #0056b3;
}




.list-group-item {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    margin-bottom: 5px;
    border-radius: 3px;
    transition: background-color 0.3s ease;
}

.list-group-item:hover {
    background-color: #e9ecef;
    cursor: pointer;
}

.glyphicon-arrow-right {
    color: #007bff;
}



.btn.otherbtnCheckout {
   
    background-color: #28a745;
    color: white;
    border: none;
   
    border-radius: 3px;
    font-size: 16px;
}

.btn.otherbtnCheckout:hover {
    background-color: #218838;
}


@keyframes slideOut {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateX(100%);
        opacity: 0;
    }
}

@keyframes slideIn {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.list-group-item {
    transition: all 0.5s ease-in-out;
}

.sliding-out {
    animation: slideOut 0.5s forwards;
}

.sliding-in {
    animation: slideIn 0.5s forwards;
}

.large-number {
    font-size: 20px; /* Ajusta este valor según tus necesidades */
    font-weight: bold;
}

.specialtable td {
    padding: 0; /* Elimina el padding predeterminado */
    margin: 0; /* Elimina el margen predeterminado */
    padding-top: 10px; /* Añade un espacio superior específico */
    border: 0.1px solid #ddd; /* Agrega bordes a las celdas */
    text-align: left; /* Alineación del texto */
    font-family: Arial, sans-serif; /* Define la fuente */
    font-size: 10px; /* Ajusta el tamaño de la fuente */
}
 .small-pending {
        color: red;
        min-height: 1.5em; /* Reserve enough space for the "Pending" text */
        display: inline-block;
    }
    
    .btn-apply {
        background-color: #2996cc; /* Match existing button color */
        color: white;
        border: none;
        border-radius: 5px;
        padding: 5px 10px;
        font-size: 12px;
        cursor: pointer;
        text-align: center;
        display: inline-block;
        transition: background-color 0.3s ease, box-shadow 0.3s ease;
        margin-top: 0.5em; /* Add some spacing between the "Pending" text and the button */
        min-height: 2.5em; /* Reserve space for the button */
    }
    
    .btn-apply:hover {
        background-color: #0056b3; /* Darker blue on hover */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }
    
    .btn-apply:disabled {
        background-color: #ccc;
        cursor: not-allowed;
        box-shadow: none;
    }
    hr
    {
      border-top:  1px solid #000 !important;
    }
    .styled-table {
        width: 100%;
        border-collapse: collapse;
        font-family: Arial, sans-serif;
        font-size: 14px;
        text-align: left;
    }
    
    .styled-table thead th {
        background-color: #f4f4f4;
        border: 1px solid #ddd;
        padding: 8px;
    }
    
    .styled-table tbody tr:nth-child(even) {
        background-color: #f9f9f9;
    }
    
    .styled-table tbody tr:hover {
        background-color: #f1f1f1;
    }
    
    .styled-table tbody td {
        border: 1px solid #ddd;
        padding: 8px;
    }
    
    .year-header {
        background-color: #e0e0e0;
        font-weight: bold;
        text-align: center;
    }
    
    


















    /* Estilos para que el submenú aparezca correctamente alineado */
.dropdown-submenu {
    position: relative !important;
}

.dropdown-submenu:hover > .dropdown-menu {
    display: block !important;
    left: 100% !important;
    top: 0 !important;
    margin-top: -5px !important;
    min-width: 220px !important; /* Asegura un ancho adecuado */
    padding: 5px !important;
    background: white !important; /* Fondo blanco para mejorar la visibilidad */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1) !important; /* Agrega sombra para resaltar */
    border-radius: 4px !important; /* Bordes redondeados */
}

/* Ajustar los elementos dentro del submenú */
.dropdown-menu a {
    display: block !important;
    padding: 8px 15px !important;
    color: #333 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    margin: 10px 0px !important;
}

.dropdown-menu a:hover {
    background: #f5f5f5 !important; /* Efecto hover */
    color: #000 !important;
}

/* Ajuste del ícono "NEW" */
.badge-danger {
    background-color: red !important;
    color: white !important;
    font-size: 10px !important;
    font-weight: bold !important;
    padding: 3px 5px !important;
    border-radius: 3px !important;
    margin-left: 5px !important;
}


@media print {
    /* Ocultar elementos no esenciales */
    .btn, .navbar, .sidebar, .header-panel, .footer, .no-print {
        display: none !important;
    }

    /* Ajustar tabla para evitar cortes */
    table {
        page-break-inside: auto;
        border-collapse: collapse;
        width: 100%;
        font-size: 12px; /* Reducir tamaño si es necesario */
    }

    th, td {
        border: 1px solid black;
        padding: 5px;
    }

    /* Evitar que las filas se dividan en diferentes páginas */
    tr {
        page-break-inside: avoid;
    }

    /* Ajustar el tamaño del papel */
    @page {
        size: A4 landscape; /* Puedes probar con 'portrait' si lo prefieres */
        margin: 10mm;
    }

    /* Ajustar tamaño de fuente para mejor legibilidad */
    body {
        font-size: 14px;
        color: black;
        background: none;
    }

    /* Ocultar bordes innecesarios */
    .panel, .card, .table {
        border: none !important;
        box-shadow: none !important;
    }

    /* Forzar encabezados fijos en cada página */
    thead {
        display: table-header-group;
    }

    tfoot {
        display: table-footer-group;
    }
}


.dropdown-user a.menu
{
    padding:13px 10px !important;
}

a.menu.disabled {
    pointer-events: none;
    opacity: 0.6;
    cursor: not-allowed;
}



.okto-popup {
    background: #fff;
    border-radius: 10px;
    padding: 25px 30px;
    max-width: 420px;
    width: 90%;
    margin: 0 auto;
    text-align: center;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
    animation: okto-popup-fadeIn 0.3s ease-out;
}

.okto-popup-icon {
    font-size: 60px;
    color: #e74c3c;
    margin-bottom: 10px;
}

.okto-popup-title {
    font-size: 22px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 8px;
}

.okto-popup-subtitle {
    font-size: 15px;
    color: #7f8c8d;
    margin-bottom: 18px;
}

.okto-popup-actions-inline {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.okto-popup-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px;
    font-size: 14px;
    border-radius: 5px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.okto-popup-btn-primary {
    background-color: #0070E0;
    color: #fff;
    border: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.okto-popup-btn-primary:hover {
    background-color: #005bb5;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

@keyframes okto-popup-fadeIn {
    from {
        opacity: 0;
        transform: scale(0.9) translate(-50%, -50%);
    }
    to {
        opacity: 1;
        transform: scale(1) translate(-50%, -50%);
    }
}


/* Elimina el botón de cerrar de ngDialog */
.okto-modal .ngdialog-close {
    display: none !important;
}

/* Si hay contenedores vacíos, elimínalos */
.okto-modal .ngdialog-content:empty {
    display: none !important;
}

/* Opcional: limpia márgenes/paddings heredados */
.okto-modal .ngdialog-content {
    margin: 0;
    padding: 0;
}

.okto-popup-btn-viewpdf {
    background-color: #ffffff; /* Fondo blanco */
    color: #0070E0;           /* Azul para texto e ícono */
    border: 2px solid #0070E0;
    border-radius: 6px;
    padding: 10px 20px;
    font-weight: 500;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    text-decoration: none;
}

.okto-popup-btn-viewpdf:hover {
    background-color: #0070E0; /* Hover: fondo azul */
    color: #ffffff;           /* Texto e ícono blancos */
    box-shadow: 0 4px 8px rgba(0, 112, 224, 0.3);
    transform: translateY(-1px);
}
.chart-container {
    position: relative;
}

.chart-loader {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.7);
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
}

.chart-loader::after {
    content: "";
    border: 4px solid #ccc;
    border-top: 4px solid #4285f4;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}


.widget-panel {
    margin: 24px 0;
    box-shadow: 0 4px 18px rgba(0,0,0,0.10);
    border-radius: 14px;
    padding: 22px 24px;
    background: #fff;
    transition: box-shadow 0.2s, transform 0.2s;
    font-family: 'Roboto', 'Montserrat', 'Open Sans', Arial, sans-serif;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.5s forwards;
}

.widget-panel:hover {
    box-shadow: 0 8px 32px rgba(0,0,0,0.16);
    transform: translateY(0px) scale(1.01);
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: none;
    }
}