@import url(../webfont/webfont.css);
html, body { overflow: hidden;}
body { width: 100%; height: 100%; color: #222; padding: 0; margin: 0; overflow: hidden; background-color: #fff; }
*:focus { outline: 0 !important; box-shadow: none !important }
*, ::after, ::before { -webkit-box-sizing: border-box; box-sizing: border-box; text-shadow: 1px 1px 1px rgba(0, 0, 0, .004); outline: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale }
/* ::-moz-selection { color: inherit; background: #dedede }
::selection { color: inherit; background: transparent; } */
::-webkit-scrollbar { background-color: transparent; width: 0em; }
::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb:window-inactive { position: fixed; cursor: pointer; visibility: hidden; background-color: #ccc; border-radius: .2rem } 
/* div:hover::-webkit-scrollbar-thumb { visibility: visible;} */
.cursor-pointer { cursor: pointer !important }
.cart { position: relative; }
.cart-button-fixed {position: absolute; bottom: 0rem; left: 0rem; right: 0rem; width: 100%; z-index: 99;}
.z-index { z-index: 0 !important }
.overflow-hidden { overflow: hidden;}
.lh-100 { line-height: 100% }

.bg-light1{background-color:#eee!important}

.opacity-1 { opacity: .1 }
.opacity-2 { opacity: .2 }
.opacity-3 { opacity: .3 }
.opacity-4 { opacity: .4 }
.opacity-5 { opacity: .5 }
.opacity-6 { opacity: .6 }
.opacity-7 { opacity: .7 }
.opacity-8 { opacity: .8 }
.opacity-9 { opacity: .9 }
.font-size-7 { font-size: 7px !important; line-height: 1.2 }
.font-size-8 { font-size: 8px !important; line-height: 1.2 }
.font-size-9 { font-size: 9px !important; line-height: 1.2 }
.font-size-10 { font-size: 10px !important; line-height: 1.2 }
.font-size-11 { font-size: 11px !important; line-height: 1.2 }
.font-size-12 { font-size: 12px !important; line-height: 1.2 }
.font-size-13 { font-size: 13px !important; line-height: 1.2 }
.font-size-14 { font-size: 14px !important; line-height: 1.2 }
.font-size-16 { font-size: 16px !important; line-height: 1.2 }
.font-size-18 { font-size: 18px !important; line-height: 1.2 }
.font-size-20 { font-size: 20px !important; line-height: 1.2 }
.font-size-22 { font-size: 22px !important; line-height: 1.2 }
.font-size-24 { font-size: 24px !important; line-height: 1.2 }
.font-size-26 { font-size: 26px !important; line-height: 1.2 }
.font-size-28 { font-size: 28px !important; line-height: 1.2 }
.font-size-30 { font-size: 30px !important; line-height: 1.2 }
.font-size-32 { font-size: 32px !important; line-height: 1.2 }
.font-size-34 { font-size: 34px !important; line-height: 1.2 }
.font-size-36 { font-size: 36px !important; line-height: 1.2 }
.font-size-38 { font-size: 38px !important; line-height: 1.2 }
.font-size-40 { font-size: 40px !important; line-height: 1.2 }
.font-size-42 { font-size: 42px !important; line-height: 1.2 }
.font-size-44 { font-size: 44px !important; line-height: 1.2 }
.font-size-46 { font-size: 46px !important; line-height: 1.2 }
.font-size-48 { font-size: 48px !important; line-height: 1.2 }


header { width: 100%; height: 9.2vh; padding:.4rem .3rem; background-color: #fff; position: relative; border-bottom: 1px solid #cecece; box-shadow: 0 0 5px #ccc; }

/*

header .nav-item { width:7rem!important; margin: 0 .6rem 0 0; font-size: .8rem !important; font-weight: 600; }
header .nav-link { margin: 0!important; border-radius: .2rem!important;}
header .nav-link { background-color: #10af18; color: #fff!important;}
header .nav-link.active { background-color: #10af18!important; color: #fff!important;} */

.nav-bar { display: flex; flex-wrap: nowrap; justify-content: space-between;}
.nav-bar svg { width: 22px; height: 22px; display: block; margin: 0 auto .2rem auto;}
.nav-bar i { display: block; color: #fff;}
.nav-bar button:last-child { margin: 0;}
.nav-bar button,.nav-bar a  { width: 10%; padding: 1.2rem .5rem; background-color: #333; color: #fff; font-size: .8rem; margin: 0 .2rem 0 0;}
.nav-bar label { font-size: .9rem;}
.nav-bar button:hover,.nav-bar a:hover {color: #fff;}
.nav-bar a.active {background-color: #10af18;}


main { width: 100%; height: 89vh; display: block; overflow: hidden;  }

.scrollbar { width: 100%; display: block; overflow: hidden; overflow-y: auto; }
.scrollbar-categories { height: 88vh;/*  padding:0 0 25% 0; */ }
.scrollbar-products { height: 86vh; padding:0 0 25% 0; }
.scrollbar-cart {/* height: calc(69vh - 10vh); */ height: 74.5vh; padding:0 0 100% 0; }
.scrollbar-payment {/* height: calc(69vh - 10vh); */ height: 72vh; padding:0 0 10% 0; }
.scrollbar-page { height: 95vh; padding:0 0 10% 0;  }

.products { display: flex;flex-wrap: wrap; }
.products-col{ width: 24.2%; min-height: 125px; padding:.5rem; margin:0 1% 1% 0; }
.products-col:nth-child(4n+0){ margin: 0 0 1% 0; float: right;}
.products-col .col { padding:.1rem 1rem;}
.product-col-text { margin: 5vh 0 0 0; overflow: hidden;}

.dropdown-menu { padding: 0!important;}
.quantity { width: 50px }
.listTable a { color: #111; font-weight: 700; }
.card-body { height: 105px!important;}

.modal-dialog { margin: 0!important; padding: 0!important;}
.modal-content{ width: 100vw!important; min-height: 100vh; height: 100%!important; margin: 0!important;}

.datepicker-days { padding: 1rem!important;}
.datepicker .table-condensed{width:280px;height:280px; font-size: 1rem;}
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before { background-color: green !important; border: 0!important; }
.custom-checkbox .custom-control-input:checked:focus ~ .custom-control-label::before { box-shadow: 0 0 0 1px #111, 0 0 0 0.2rem rgba(0, 255, 0, 0.25) }
.custom-checkbox .custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 1px #111, 0 0 0 0.2rem rgba(0, 0, 0, 0.25) }
.custom-checkbox .custom-control-input:active ~ .custom-control-label::before { background-color: #C8FFC8; }

.switch-field{display:flex;justify-content:center;width:80%;margin:1rem auto;-webkit-user-select:none;-ms-user-select:none;user-select:none}
.switch-field input{position:absolute!important;clip:rect(0,0,0,0);height:0;width:0;border:0;overflow:hidden}
.switch-field label{background-color:#e4e4e4;color:rgba(0,0,0,.6);line-height:100%;text-align:center;padding:.6rem 1rem;margin-right:-1px;border:1px solid rgba(0,0,0,.2);box-shadow:inset 0 0 1px rgba(0,0,0,.3),0 0 1px rgba(255,255,255,.1);transition:all .1s ease-in-out;width:50%}
.switch-field label:hover{cursor:pointer}
.switch-field label svg{width:38px;height:38px;float:left;margin:0 .6rem 0 0;fill:#999}
.switch-field label .switch-text{float:left;text-align:left;margin:.2rem}
.switch-field label .switch-text b{font-size:1.2rem}
.switch-field label .switch-text span{display:block;font-size:.8rem}
.switch-field input:checked+label{background-color:#f9bc06;box-shadow:none}
.switch-field input:checked+label svg{fill:#1f1700}
.switch-field label:first-of-type{border-radius:4px 0 0 4px}
.switch-field label:last-of-type{border-radius:0 4px 4px 0}

.switch-field.size-field{width:100%;margin:0;justify-content:flex-start;}
.switch-field.size-field label{background-color:#fff;color:#111;font-size:1rem;line-height:1;text-align:center;padding:.6rem;transition:all .1s ease-in-out;width:70px;border:1px solid #6c757d;box-shadow:none}
.switch-field.size-field input:checked+label{background-color:#6c757d;color:#fff}
.switch-field.size-field label:first-of-type{border-radius:0}
.switch-field.size-field label:last-of-type{border-radius:0}


.switch-field.large-field{width:100%;margin:0;justify-content:flex-start; flex-wrap: wrap;}
.switch-field.large-field label{background-color:#fff;color:#111;font-size:1rem;line-height:1;text-align:center;padding:1rem .6rem;transition:all .1s ease-in-out;width:33.33%;border:1px solid #6c757d;box-shadow:none}
.switch-field.large-field input:checked+label{background-color:#6c757d;color:#fff}
.switch-field.large-field label:first-of-type{border-radius:0}
.switch-field.large-field label:last-of-type{border-radius:0}

.switch { font-size: 1rem; position: relative; margin: 0 }
.switch input { position: absolute; height: 1px; width: 1px; background: 0 0; border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; padding: 0 }
.switch input + label { position: relative; min-width: calc(calc(2.375rem * .8) * 2); border-radius: calc(.375rem * .1); height: calc(2.375rem * .8); line-height: calc(2.375rem * .8); display: inline-block; cursor: pointer; outline: 0; user-select: none; vertical-align: middle; text-indent: calc(calc(calc(2.375rem * .8) * 2) + .5rem) }
.switch input + label::after, .switch input + label::before { content: ''; position: absolute; top: 0; left: 0; width: calc(calc(2.375rem * .8) * 2); bottom: 0; display: block }
.switch input + label::before { right: 0; background-color: #dee2e6; border-radius: calc(2.375rem * .8); transition: .2s all }
.switch input + label::after { top: 2px; left: 2px; width: calc(calc(2.375rem * .8) - calc(2px * 2)); height: calc(calc(2.375rem * .8) - calc(2px * 2)); border-radius: 50%; background-color: #fff; transition: .2s all }
.switch input:checked + label::before { background-color: #3ccc60 }
.switch input:checked + label::after { margin-left: calc(2.375rem * .8) }
.switch input:focus + label::before { outline: 0; box-shadow: 0 0 0 0 rgba(0, 136, 221, .25) }
.switch input:disabled + label { color: #868e96; cursor: not-allowed }
.switch input:disabled + label::before { background-color: #e9ecef }

.switch.switch-sm { font-size: .9rem }
.switch.switch-sm input + label { min-width: calc(calc(1.9375rem * .8) * 2); height: calc(1.9375rem * .8); line-height: calc(1.9375rem * .8); text-indent: calc(calc(calc(1.9375rem * .8) * 2) + .5rem) }
.switch.switch-sm input + label::before { width: calc(calc(1.9375rem * .8) * 2) }
.switch.switch-sm input + label::after { width: calc(calc(1.9375rem * .8) - calc(2px * 2)); height: calc(calc(1.9375rem * .8) - calc(2px * 2)) }
.switch.switch-sm input:checked + label::after { margin-left: calc(1.9375rem * .8) }
.switch.switch-lg { font-size: 1.25rem }
.switch.switch-lg input + label { min-width: calc(calc(3rem * .8) * 2); height: calc(3rem * .8); line-height: calc(3rem * .8); text-indent: calc(calc(calc(3rem * .8) * 2) + .5rem) }
.switch.switch-lg input + label::before { width: calc(calc(3rem * .8) * 2) }
.switch.switch-lg input + label::after { width: calc(calc(3rem * .8) - calc(2px * 2)); height: calc(calc(3rem * .8) - calc(2px * 2)) }
.switch.switch-lg input:checked + label::after { margin-left: calc(3rem * .8) }
.switch + .switch { margin-left: 1rem;}

.custom-switch { padding-left: 1rem; position: relative; top: -3px; }
.custom-switch .custom-control-label { cursor: pointer; }
.custom-switch .custom-control-label::before { position: absolute; top: .25rem; left: -1.5rem; display: block; width: 1.5rem; height: 1.5rem; pointer-events: none; content: ""; background-color: #fff; border: #adb5bd solid 1px; left: -2.25rem; width: 2.75rem; pointer-events: all; border-radius: .2rem;  }
.custom-switch .custom-control-input:checked ~ .custom-control-label::before { color: #fff; border-color: #39b54a; background-color: #39b54a; }
.custom-switch .custom-control-input:focus ~ .custom-control-label::before { box-shadow: none !important; border: #adb5bd solid 1px; }
.custom-switch .custom-control-label::after { top: calc(.3rem+ 2px); left: calc(-2.25rem+ 2px); width: calc(1.5rem - 4px); height: calc(1.50rem - 4px); background-color: #dc3545; border-radius: .9rem; transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, -webkit-transform .15s ease-in-out; transition: transform .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; transition: transform .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, -webkit-transform .15s ease-in-out; -webkit-border-radius: .9rem; -moz-border-radius: .9rem; -ms-border-radius: .9rem; -o-border-radius: .9rem; -webkit-transition: transform .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; -moz-transition: transform .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; -ms-transition: transform .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; -o-transition: transform .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; }
.custom-switch .custom-control-input:checked ~ .custom-control-label::after { background-color: #fff; -webkit-transform: translateX(1.2rem); transform: translateX(1.2rem); -moz-transform: translateX(1.2rem); -ms-transform: translateX(1.2rem); -o-transform: translateX(1.2rem); }

.custom-control{display:inline;margin:0 1rem 1rem 0}
.custom-control:last-child{margin:0}
.custom-control-label{cursor:pointer;font-size:.9rem;font-weight:600;padding:0rem 0}
.custom-control-label img{height:20px;margin:0 0 0 -24px;position:relative;border-radius:.2rem;border:1px solid #444}

.custom-control-payment{width:100px;display:inline-block;margin:0 1rem 0 0;position:relative}
.custom-control-payment:after,.custom-control-payment:before{font-family:dripicons-v2;content:"\53";width:22px;height:22px;line-height:22px;float:right;text-align:center;border-radius:50%;border:1px solid #dedede}
.custom-control-payment:before{background-color:#f7f7f7;color:#ccc;filter:grayscale(0);display:block}
.custom-control-payment:after{background-color:#28a745;color:#fff;display:none}

.custom-control-input:checked~.custom-control-label{color:#28a745!important}
.custom-control-input:checked~.custom-control-label .custom-control-payment:before{display:none}
.custom-control-input:checked~.custom-control-label .custom-control-payment:after{display:block}
.custom-control-input:focus~.custom-control-label::before{border-color:#28a745!important;box-shadow:0 0 0 0rem rgba(0,0,0,0)!important}
.custom-control-input:checked~.custom-control-label::before{border-color:#28a745!important;background-color:#28a745!important}
.custom-control-input:active~.custom-control-label::before{background-color:#28a745!important;border-color:#28a745!important}
.custom-control-input:focus:not(:checked)~.custom-control-label::before{border-color:#28a745!important}

.searchbar { min-width: 320px }
#search-list { float: right; list-style: none; padding: 0; width: 100%; height: auto; max-height: 250px; overflow-y: auto; position: absolute; z-index: 1000; left: 0; top: 100%; border: 1px solid #eee }
#search-list li { padding:1rem; background-color: #fff; border-bottom: #eee 1px solid; font-size: .9rem; cursor: pointer }
#search-list li:hover { background-color: #f7f7f7 }

.dropdown-menu { margin-top: .75rem }
.dropdown-item { cursor: pointer !important }
.dropdown-item:hover { background-color: #28a745; color: #fff !important }
.dropdown-item.active, .dropdown-item:active { background-color: #28a745 }
.order-item { background-color: #fff; padding: 1rem; border-radius: .1rem; border: 1px solid #dedede; margin: 0 0 .4rem 0 !important }

.blink { width: 100%; animation: blink 1s infinite; margin: 0 }
@keyframes blink {
from { border-left: 5px solid #10af18 }
to { border-left: 5px solid transparent }
}

@media screen {
#printOrder { display: none }
}
@media print {
#printOrder { display: table; width: 100%; font-size: 12pt; padding: 0; margin: 0; position: absolute; top: 0; left: 0; right: 0; bottom: 0; table-layout: fixed }
#printOrder td { vertical-align: top; font-weight: 800; border-bottom: 1px solid #666; padding: 5px 0 }
#printOrder td.text-right { text-align: right }
#printOrder td small { font-size: 9pt !important }
}
.printModal { font-family: sans-serif; display: flex; text-align: center; font-weight: 300; font-size: 30px; left: 0; top: 0; position: absolute; color: #0460b5; width: 100%; height: 100%; background-color: hsla(0, 0%, 100%, .91) }
.printClose { position: absolute; right: 10px; top: 10px }
.printClose:before { content: "\00D7"; font-family: Helvetica Neue, sans-serif; font-weight: 100; line-height: 1px; padding-top: .5em; display: block; font-size: 2em; text-indent: 1px; overflow: hidden; height: 1.25em; width: 1.25em; text-align: center; cursor: pointer }

.pulse { height: 70px; width: 70px; background-color: #24a94a; border-radius: 50%; display: flex; justify-content: center; align-items: center; position: relative; margin: 0 }
.pulse::before { content: ""; position: absolute; border: 1px solid #24a94a; width: calc(100% + 20px); height: calc(100% + 20px); border-radius: 50%; animation: pulse 1s linear infinite }
.pulse::after { content: ""; position: absolute; border: 1px solid #24a94a; width: calc(100% + 20px); height: calc(100% + 20px); border-radius: 50%; animation: pulse 1s linear infinite; animation-delay: .3s }
.pulse i { color: #fff; font-size: 1.6rem }
.pulse.disable { background-color: #444 }
.pulse.disable::before { border: 1px solid #444; animation: none }
.pulse.disable::after { display: none }
.pulse.cancel { background-color: #eb2f2f }
.pulse.cancel::before { border: 1px solid #eb2f2f; animation: none }
.pulse.cancel::after { display: none }
@keyframes pulse {
0% { transform: scale(.5); opacity: 0 }
50% { transform: scale(1); opacity: 1 }
100% { transform: scale(1.2); opacity: 0 }
}

.colorPicker { display: flex; font-size: 2rem; width: 100%; border: 3px solid #ccc; margin: 0; padding: .4rem; }
.colorPicker input[type="color"] { border: none; background-color: #fff; width: 100%; height: 50px; outline: none; display: block; }
.colorPicker #color-picker::-webkit-color-swatch { margin: 0; padding: 0;  }
.colorPicker>span { display: block;}

.virtualKeyboard { display: none; position: fixed; padding: 1rem; bottom: 0; left: 50%; margin-left: -450px; z-index: 999; background-color: #fff; width:900px; border: 1px solid #dedede;}
ul.keyboard { list-style-type: none; font-family: verdana; background-color: #fff; border-radius: 5px; padding: 0; width: 100%; height: 50%; }
.keyboard li { cursor: pointer; display: inline; float: left; height: 18%; /** margin: auto; **/ line-height: 50px; padding: 0; margin: 0.3% 0.6% 0.6% 0.2%; background-color: #ddd; color: #000; vertical-align: middle; text-align: center; border-radius: 4px; font-size: 1rem; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.char { width: 5.75%; -webkit-transition: background-color 100ms;transition: background-color 100ms; }
.tab { width: 20%; }
.at { width: 7.2%; }
.last { margin-right: 0%; }
.backspace { width: 14%; }
.capslock { width: 12% }
.capslock.on { background-color: #28a745; color: #fff; }
.return { width: 14%; }
.shift { width: 7.2%; }
.last { margin-right: 0; }
.space { width: 99%; }
.keyboard .touch { background-color: #28a745; color: #fff; }