@media (min-width: 1400px) {
  .modal-xlg {
    width: 1300px;
  }
}

@media (min-width: 1900px) {
  .modal-xxlg {
    width: 1800px;
  }
}

@media (min-width: 2400px) {
  .modal-xxxlg {
    width: 2300px;
  }
}

.material-icons-label {
  position: relative; 
  top: -5px; 
  left: 5px;
}

/* html5 WYSWYG editor */
.navbar {
  z-index: 1010;
}

/* default select option, pop up dialog */
div.dropdown-menu.open {
  z-index: 1002;
}

/* datepicker, pop up dialog */
div.vdp-datepicker__calendar {
  z-index: 1100;
}

.nav-tabs {
    border-bottom: none;
}

.owl_1.owl-carousel.owl-theme { background: #e3e3e3; }
.owl-item { margin: 3px 0; height: 46px; background: rgba(255, 255, 255, 0.824); border-radius: 5px; }
.owl-item .item { height: 100%; }
.owl-item .item li { width: 100%; height: 100%; text-align: center; display: table; }
.owl-item .item li a { height: 100%; padding: 5px; text-align: center; color: #000; font-size: 14px; font-weight: 700; vertical-align: middle; display: table-cell; }
.owl-carousel { padding-left: 40px; padding-right: 40px; }
.owl_1.owl-carousel.owl-theme .owl-nav button.owl-prev, .owl_1.owl-carousel.owl-theme .owl-nav button.owl-next { width: 30px; height: 30px; font-size: 25px; line-height: 20px; }
.nav-tabs .owl_1.owl-carousel.owl-theme .owl-item:last-child { }
.nav-tabs .owl_1.owl-carousel.owl-theme .owl-item li.active a, .nav-tabs .owl_1.owl-carousel.owl-theme .owl-item li.active a:hover, .nav-tabs .owl_1.owl-carousel.owl-theme .owl-item li.active a:active, .nav-tabs .owl_1.owl-carousel.owl-theme .owl-item li.active a:focus { background: none !important; text-decoration: none; color: #ca1e65 !important; }
.nav-tabs .owl_1.owl-carousel.owl-theme .owl-item:hover { background: #FFC107 !important; }
.nav-tabs .owl_1.owl-carousel.owl-theme .owl-item:hover li a, .nav-tabs .owl_1.owl-carousel.owl-theme .owl-item:hover li.active a { color: #FFF !important; }
.big_cat_container > div.col-sm-2.col-xs-4.col-7 { margin-bottom: 8px; aspect-ratio: 1 / 1; }
.cat_button { height: 100%; padding: 5px 10px; font-size: 17px !important; letter-spacing: -1px; line-height: 20px; overflow: visible; /* white-space: break-spaces; */ overflow-wrap: break-word; }
.cat_button:hover { background: #FFC107 !important; color: #000 !important; }

#selectedCategoryPanel { position: relative; }

  button.owl-prev {
    position: absolute;
    left: 0px;
    top: 37%;
    transform: translateY(-50%);
    background-color: white!important;
    width: 20px;
    height: 20px;
    border-radius: 100%!important;
    color: #000!important;
}
  
  button.owl-next {
    position: absolute;
    right: 0px;
    top: 37%;
    transform: translateY(-50%);
    background-color: white!important;
    width: 20px;
    height: 20px;
    border-radius: 100%!important;
    color: #000!important;
}
  
  
  .owl-dots {
    display: none;
}
  
  
  .item {
    display: flex;
    justify-content: center; 
    li{
      
       a {
  display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background-color: #fff;
    border-radius: 100%;
    color: #000;
    text-transform: uppercase;
    flex-wrap: wrap;
    text-align: center;
    font-size: 20px; text-decoration: none;
    font-weight: 700;
}
      
      &.active{a      
        {    background-color: #009688;
    color: #fff;}}
    }
}

#canvas { max-width: 100%; }
.checkin_camera video { margin: 0 auto; padding: 12px; background: #fcfcfc; border-radius: 10px; border: 5px #444 solid; }
.checkin_camera canvas { display: none; }

.row-7 { margin-left: -3px; margin-right: -3px; }
.col-7 { padding-left: 3px; padding-right: 3px; }
.card .body .table_num.col-7 { margin-bottom: 8px; }
.floorplan_container { margin: -20px 0px 0 0px; position: relative; }
.rfid_num .btn{ width:90px; height: 90px; font-size: 30px; padding: 5px 5px;  font-size: 22px; font-weight: 900; border-radius: 5px; float: left; margin-left: 10px; }
.table_num .btn:not(.btn-link):not(.btn-circle) { height: 90px; font-size: 30px; }
.table_num .btn:not(.btn-link):not(.btn-circle).btn-block:focus, .table_num .btn:not(.btn-link):not(.btn-circle).btn-block:hover { color: #000 !important; background-color: #FFC107 !important; }
.table_num button.btn.using { background-color: #FFC107 !important; }
.table_num button.btn.using.ordered { background-color: #FF5722 !important; }
.table_num.floorplan_table { width: 90px; height: 85px; position: absolute; }
.table_num.floorplan_table .btn:not(.btn-link):not(.btn-circle) { padding: 5px 5px; height: 85px; font-size: 22px; font-weight: 900; border-radius: 5px; }
.table_num .open_time { font-size: 12px; }
.people_num .col-xs-4 { margin-bottom: 10px; }
.people_num .btn.btn-block.btn-lg { height: 70px; font-size: 30px; }
.people_num .btn:not(.btn-link):not(.btn-circle).btn-block:focus, .people_num .btn:not(.btn-link):not(.btn-circle).btn-block:hover { color: #000 !important; }
.people_num .menu_buffet_option .btn.btn-block.btn-lg { font-size: 20px; }
.people_num .people_action_btn .btn.btn-block.btn-lg { font-size: 20px; }
.checkout_numinfo { font-size: 17px; }
.checkout_numinfo .info_border { padding: 3px 5px; border-radius: 3px; border: 3px #cccccc solid; }
.checkout_numinfo .info_border.bold { border: 3px #E91E63 solid; }
.checkout_numinfo .checkout_numinfo_details tr > td:first-child { font-size: 15px; }
.checkout_numpad .btn.btn-block.btn-sm { height: 37px; }
.checkout_numpad .btn.btn-block.btn-lg { height: 70px; font-size: 30px; }
.checkout_payment_method { margin-bottom: 10px; max-height: 230px; overflow: scroll; }
.checkout_payment_method .btn.btn-block.btn-sm { height: 37px; }
.checkout_payment_method .btn.btn-block.btn-lg { height: 40px; font-size: 16px; }
.checkout_pay_btn .btn.btn-block.btn-lg { padding: 16px 16px; font-size: 20px; border-radius: 50px; }
.menu_action .btn:not(.btn-link):not(.btn-circle) { height: 50px; font-size: 22px; }
.menu_action .btn:not(.btn-link):not(.btn-circle).btn-block:focus, .menu_action .btn:not(.btn-link):not(.btn-circle).btn-block:hover { color: #000 !important; background-color: #FFC107 !important; }

#checkoutDialog button.btn.highlight { background-color: #FFC107 !important; }
#newProductDialog button.btn.highlight { background-color: #FFC107 !important; }
.btn.btn-block.btn-lg.highlight { background-color: #FFC107 !important; }
.card .header, .card .body, #setTastingDialog .modal .modal-content .modal-body { padding: 10px !important; }
.card .header h2 { padding-top: 10px; padding-left: 10px; }
.panel-heading h2 { margin-top: 5px; margin-bottom: 5px; font-size: 16px; }
.panel-heading h2 .material-icons { font-size: 20px; }
.dialog_collapse .panel-group .panel .panel-heading a { padding: 5px 5px; }
.dialog_collapse .panel+.panel { margin-top: 0px; padding-top: 0px; }
.dialog_collapse .panel-body { padding: 6px 3px 0px 3px; }
.membership_dialog .form-group { margin-left: 0; margin-right: 0; }
.navbar-header { padding: 0 7px; float: none; }
.navbar-header .header_shortcut { margin-top: 2px; margin-left: 5px !important; padding: 10px 15px; height: 45px; font-size: 17px !important; float: right; border-radius: 50px !important; }
section.content { margin: 60px 5px 0 5px !important; }
section.content > .container-fluid { padding-left: 0; padding-right: 0; }
section.content > .container-fluid > .row { margin-left: 0; margin-right: 0; }
section.content > .container-fluid > .row > .col-lg-12.col-md-12.col-sm-12.col-xs-12 { padding-left: 0; padding-right: 0; }
.modal-body .existing_items { height: 500px; }
.existing_items { height: 390px; overflow-y: scroll; -webkit-overflow-scrolling: touch; }
.existing_items .btn-group { width: 100%; }
.existing_items .dropdown-menu { padding-inline-start: 0; top: 35px; left: 60px; }
.existing_items .dropdown-menu a.dropdown-item { display: block; }
.existing_items .dropdown > .btn > table { table-layout: fixed; }
.existing_items .dropdown > .btn > table tr > td:first-child { 
  word-break: break-all; white-space: normal;
}
.ordering_panel .tab-content.menu_tab .tab-pane { overflow-x: hidden; }
.nav-tabs + .tab-content.menu_tab { padding-bottom: 0; }
.menu_tab > .tab-pane { height: 490px; position: relative; overflow-x: hidden; overflow-y: scroll; -webkit-overflow-scrolling: touch; }
.floorplan.menu_tab > .tab-pane { height: calc(100vh - 100px); }
.hidden-md.hidden-lg.hidden-xl .product_choice { overflow-y: scroll; }
.hidden-md.hidden-lg.hidden-xl .product_choice .menu_tab > .tab-pane { }
.existing_items ul { margin-bottom: 0; padding-inline-start: 15px; }
.existing_items button.btn.highlight { background-color: #FFC107 !important; }
.existing_items button.btn.cancelled { background-color: #F44336 !important; text-decoration: line-through; text-decoration-line: line-through; -webkit-text-decoration-line: line-through; text-decoration-color: #FFF; -webkit-text-decoration-color: #FFF; }
.existing_items button.btn.freeed { background-color: #9C27B0 !important; text-decoration: line-through; text-decoration-line: line-through; -webkit-text-decoration-line: line-through; text-decoration-color: #FFF; -webkit-text-decoration-color: #FFF; }
.existing_items button.btn.cancelled > table { text-decoration: line-through; text-decoration-line: line-through; -webkit-text-decoration-line: line-through; text-decoration-color: #FFF; -webkit-text-decoration-color: #FFF; }
.existing_items button.btn.freeed > table tr td.unit_price { text-decoration: line-through; text-decoration-line: line-through; -webkit-text-decoration-line: line-through; text-decoration-color: #FFF; -webkit-text-decoration-color: #FFF; }
.existing_items button.btn.donotprint { background-color: #4CAF50 !important; }
.items_subtotal { padding-top: 5px; }
.product_choice { overflow: hidden; }
.menu_tab > .tab-pane.xs { height: 460px; }
#singleTastingDialog .menu_tab > div { height: 500px; overflow-y: scroll; }
.menu_tab > .tab-pane.l { height: 570px; }
.menu_tab > .tab-pane.xl { height: 730px; }
.border_top { padding-top: 10px; border-top: 1px #000 solid; }

.card .body .menu_item.col-7 { margin-bottom: 8px; }
.revoke_table tr:first-child { border-bottom: 1px #000 solid; }
.revoke_table tr:first-child th { padding-bottom: 5px; }
.revoke_table tr td { padding-top: 5px; padding-bottom: 5px; }

.alert_icon { color: #c21f05; animation: blink 1s linear infinite; }
@keyframes blink{
  0%{opacity: 0;}
  25%{opacity: .5;}
  50%{opacity: 1;}
  75%{opacity: .5;}
  100%{opacity: 0;}
}
.success_icon { color: #11d206; }
.btn.less_padding { padding: 5px 10px; }
.btn.less_paddingx { padding: 10px 10px; }
.nav-tabs {  }
.nav-tabs > li { top: 0; left: 0; margin-bottom: 0; }
.nav-tabs > li > a { margin-right: 0px; font-size: 16px; background: #FFF; color: #333 !important; }
.nav-tabs > li > a:hover { background: #333 !important; color: #FFF !important; }
.nav-tabs li.active a, .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { background: #E91E63 !important; color: #FFF !important; }
.nav-tabs li.active a .alert_icon, .nav-tabs > li.active > a .alert_icon, .nav-tabs > li.active > a:hover .alert_icon, .nav-tabs > li.active > a:focus .alert_icon, .nav-tabs li.active a .success_icon, .nav-tabs > li.active > a .success_icon, .nav-tabs > li.active > a:hover .success_icon, .nav-tabs > li.active > a:focus .success_icon { color: #FFF; }
.nav-tabs > li > a:before { border-bottom: none; }
.menu_item .btn:not(.btn-link):not(.btn-circle) { height: 70px; padding: 5px 10px; font-size: 17px; letter-spacing: -1px; line-height: 20px; overflow: visible; white-space: break-spaces; overflow-wrap: break-word; }
.menu_item .newitem.btn:not(.btn-link):not(.btn-circle) { font-size: 30px; }
.menu_item .newitem.btn:not(.btn-link):not(.btn-circle) .under { padding-top: 3px; font-size: 17px; }
.menu_item .btn:not(.btn-link):not(.btn-circle).btn-block:focus, .menu_item .btn:not(.btn-link):not(.btn-circle).btn-block:hover, .menu_item .btn:not(.btn-link):not(.btn-circle).selected { color: #000 !important; background-color: #FFC107 !important; }

.gallery_image_container { z-index: 1; }
.gallery_image_container .deleteimage { padding: 4px 4px 0px 5px; position: absolute; background: #FFF; border-radius: 50px; top: -13px; right: -15px; cursor: pointer; z-index: 50; }
.gallery_image_container .deleteimage .material-icons { cursor: pointer; }

.gallery_image_container .gallery_link { margin-top: -22px; margin-left: -22px; padding: 10px 10px 5px 10px; position: absolute; background: #FFF; border-radius: 50px; top: 50%; left: 50%; cursor: pointer; z-index: 50; opacity: 0.1; }
.gallery_image_container:hover .gallery_link { margin-top: -22px; margin-left: -22px; padding: 10px 10px 5px 10px; position: absolute; background: #FFF; border-radius: 50px; top: 50%; left: 50%; cursor: pointer; z-index: 50; opacity: 0.9; }
.gallery_image_container .gallery_link .material-icons { cursor: pointer; }
.gallery_image_container .dz-image img { width: 120px; height: 120px; }
.dz-message { display: none; }

.modal { overflow: scroll !important; }
.modal .modal-content .modal-body.modal-padding-7 { padding-left: 7px; padding-right: 7px; }
.docbannermodal .modal-dialog { margin: 300px auto 30px auto; }
.m_collapseOrderDetails, .m_collapseSetMenuDetails, .m_collapseSetMenuTastingDetails { width: 100%; position: fixed; background: #333; left: 0; bottom: 0; display: none; }
.m_collapseSetMenuTastingDetails {  }
.m_menu_action { background: #333; display: none; }
.m_menu_action .col-xs-4 { margin-bottom: 10px !important; }
#setTastingDialog, #singleTastingDialog { background: rgba(255, 255, 255, 0.7); }
#setTastingDialog .modal-dialog, #singleTastingDialog .modal-dialog { /* height: calc(100vh - 130px); */ }
#optionDialog .modal-dialog.modal-dialog-centered.modal-lg.modal-xlg.modal-xxlg.modal-xxxlg, #setTastingDialog .modal-dialog.modal-dialog-centered.modal-lg.modal-xlg.modal-xxlg.modal-xxxlg, #singleTastingDialog .modal-dialog.modal-dialog-centered.modal-lg.modal-xlg.modal-xxlg.modal-xxxlg, #newProductDialog .modal-dialog.modal-dialog-centered.modal-lg.modal-xlg.modal-xxlg.modal-xxxlg { width: 100%; height: 100vh; margin: 0 auto; align-items: center; display: flex; justify-content: center; }
#optionDialog .modal-dialog.modal-dialog-centered.modal-lg.modal-xlg.modal-xxlg.modal-xxxlg .modal-content.card, #setTastingDialog .modal-dialog.modal-dialog-centered.modal-lg.modal-xlg.modal-xxlg.modal-xxxlg .modal-content.card, #singleTastingDialog .modal-dialog.modal-dialog-centered.modal-lg.modal-xlg.modal-xxlg.modal-xxxlg .modal-content.card, #newProductDialog .modal-dialog.modal-dialog-centered.modal-lg.modal-xlg.modal-xxlg.modal-xxxlg .modal-content.card { width: 100%; height: 100%; margin: 0 auto; }
table.dataTable > tbody > tr > td > h4 { margin-top: 0; margin-bottom: 0; }
#setTastingDialog .modal-dialog .modal-content.card, #singleTastingDialog .modal-dialog .modal-content.card { height: 100%; }
.staff_box .profile-header { height: 40px; }
.staff_box .profile-body h3 { margin-top: -13px; color: color(srgb 0.295 0.295 0.295); text-shadow: -2px -2px 0 #FFF, 2px -2px 0 #FFF, -2px 2px 0 #FFF, 2px 2px 0 #FFF; }

.vue-html5-editor * { margin-left: 0 !important; margin-right: 0 !important; text-indent: 0 !important; }

/* datetimepicker, pop up dialog */
div.bootstrap-datetimepicker-widget {
  background: #FFF;
  top: 68px !important;
  z-index: 1200;
}
.hidden-div { display: none; }

img.imgUploadPreview, img.bannerPreview { max-width: 100%; width: 400px; }
ul.radio_list { -webkit-padding-start: 0px; list-style: none; }
.padding-top-3 { padding-top: 3px; }
.padding-top-6 { padding-top: 6px; }
.padding-top-8 { padding-top: 8px; }
.margin-top-0 { margin-top: 0 !important; }
.margin-bottom-0 { margin-bottom: 0 !important; }
.sidebar { top: 50px; height: calc(100vh - 50px); }
.ls-closed .bars:after, .ls-closed .bars:before { padding-right: 20px; font-size: 29px; top: 5px; }
.navbar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand { margin-left: 30px; }

#loading_spinner { width: 40px; height: 40px; margin-left: -20px; padding: 7px 5px; position: fixed; background: #FFF; text-align: center; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.4); border-radius: 50px; top: -50px; left: 50%; z-index: 2000; }

@media (max-width: 991px) {
  
  
}

@media (max-width: 767px ) {
  .mobile_table_number { position: fixed; top: 3px; left: 50px; z-index: 1011; }
  .menu_products { height: calc(100vh - 270px - 130px) !important; overflow-y: scroll; }
  .set_menu_products { height: calc(100vh - 270px) !important; overflow-y: scroll; }
  .nav-tabs + .tab-content.menu_tab { margin-top: 10px; border-top: 1px #333 solid; }
  .navbar-header .navbar-brand.header_shortcut { width: 45px; padding: 10px; }
  .existing_items, .modal-body .existing_items { height: 200px; }
  .m_collapseOrderDetails, .m_menu_action, .m_collapseSetMenuDetails, .m_collapseSetMenuTastingDetails { display: block; }
  .product_choice { max-height: none; height: calc(100vh - 200px); width: 100%; overflow-y: hidden; position: fixed; top: 50px; left: 0; }
  .menu_action { display: none; }
  .nav-tabs > li { width: 33.333%; text-align: center; display: table; }
  .nav-tabs > li a { padding: 5px 5px; width: 100%; height: 70px; background: #00BCD4; color: #FFF !important; border: 1px #FFF solid !important; vertical-align: middle; display: table-cell; }
  .product_categories_tab { height: 150px; overflow-y: scroll; }
  
  .success_icon { color: #FFF; }
  .nav-tabs > li > a .material-icons { display: block; }
  #optionDialog { padding-left: 0px !important; }
  #optionDialog .modal-dialog { margin: 0px !important; }
  #optionDialog .modal-content .modal-body { padding: 5px 10px; }
  #setTastingDialog.modal .modal-content .modal-body .menu_tab, #singleTastingDialog.modal .modal-content .modal-body .menu_tab { height: calc(100vh - 220px) !important; overflow-y: scroll; }
  
}