:root {
    --white: rgba(255, 253, 250, 1);
    --branding: rgba(255, 128, 64, 1);
    --black: rgba(3, 14, 15, 1);
    --white-64: rgba(255, 253, 250, 0.64);
    --black-40: rgba(3, 14, 15, 0.4);
    --black-64: rgba(3, 14, 15, 0.64);
    --active: rgba(255, 201, 173, 1);
    --black-80: rgba(3, 14, 15, 0.8);
    --heart-fillminus: rgba(255, 97, 80, 1);
    --note: rgba(224, 224, 224, 1);
    --black-56: rgba(3, 14, 15, 0.56);
    --white-80: rgba(255, 253, 250, 0.8);
    --appt-stagedone: rgba(163, 163, 163, 1);
    --appt-stageno-show-cancel: rgba(51, 51, 51, 0.8);
    --categoriesacrylic: rgba(244, 167, 185, 1);
    --categoriesdip: rgba(245, 92, 88, 1);
    --categoriesmani: rgba(251, 150, 110, 1);
    --categoriespedi: rgba(246, 197, 85, 1);
    --categorieswax: rgba(202, 173, 95, 1);
    --categorieslash: rgba(190, 194, 63, 1);
    --categoriesfacial: rgba(59, 163, 95, 1);
    --categoriesmakeup: rgba(20, 102, 78, 1);
    --categorieshead: rgba(30, 136, 168, 1);
    --categoriesgiftcard: rgba(138, 107, 190, 1);
    --stagesconfirm-unconfirm: rgba(87, 179, 220, 1);
    --stagescheckin: rgba(235, 175, 48, 1);
    --stagesin-service: rgba(0, 170, 144, 1);
    --stagesdone: rgba(215, 84, 85, 1);
    --stagesin-service-fill: rgba(173, 255, 243, 1);
    --stagescheckin-fill: rgba(255, 229, 173, 1);
    --stagesdone-fill: rgba(255, 173, 174, 1);
    --h3-font-family: "Montserrat", Helvetica;
    --h3-font-weight: 600;
    --h3-font-size: 14px;
    --h3-letter-spacing: 0px;
    --h3-line-height: normal;
    --h3-font-style: normal;
    --body-font-family: "Montserrat", Helvetica;
    --body-font-weight: 400;
    --body-font-size: 14px;
    --body-letter-spacing: 0px;
    --body-line-height: normal;
    --body-font-style: normal;
    --h2-font-family: "Montserrat", Helvetica;
    --h2-font-weight: 600;
    --h2-font-size: 20px;
    --h2-letter-spacing: 0px;
    --h2-line-height: 120.00000476837158%;
    --h2-font-style: normal;
    --h1-font-family: "Montserrat", Helvetica;
    --h1-font-weight: 600;
    --h1-font-size: 30px;
    --h1-letter-spacing: 0px;
    --h1-line-height: 120.00000476837158%;
    --h1-font-style: normal;
    --extra-font-family: "Montserrat", Helvetica;
    --extra-font-weight: 400;
    --extra-font-size: 12px;
    --extra-letter-spacing: 0px;
    --extra-line-height: normal;
    --extra-font-style: normal;
    --popup: 0px 4px 20px 0px rgba(0, 0, 0, 0.1);
    --calculator: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
    --red: rgba(215, 84, 85, 1);
    --green: rgba(0, 170, 144, 1);
    --yellow: var(--bs-yellow);
    --red-o: rgba(255, 173, 174, 1);
    --green-o: rgba(173, 255, 243, 1);
    --yellow-o: rgb(255, 242, 215, 1);
    --brand-color: #FF8040;
    --brand-sub-color: #FFC9AD;
    --backgroud: #f1f1f1;
    --confirm-color: #57B3DC;
    --checkin-color: #EBAF30;
    --in-service-color: #00AA90;
    --done-color: #D75455;
    --close-color: #A3A3A3;
    --main-color-o: rgba(255, 201, 173, 1);
    --shadow-qs-solid: 0px 4px 20px 0px rgba(0, 0, 0, 0.1);
    --shadow-qs-light: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
    --red-simpli: rgba(255, 97, 80, 1);
    --backgroud-gray: rgba(224, 224, 224, 1);
}


:root {
    --vh: 1;
    --scale: 100;
    --px-2: calc(2px * var(--scale) / 100);
    --px-4: calc(4px * var(--scale) / 100);
    --px-5: calc(5px * var(--scale) / 100);
    --px-6: calc(6px * var(--scale) / 100);
    --px-8: calc(8px * var(--scale) / 100);
    --px-10: calc(10px * var(--scale) / 100);
    --px-12: calc(12px * var(--scale) / 100);
    --px-13: calc(13px * var(--scale) / 100);
    --px-14: calc(14px * var(--scale) / 100);
    --px-15: calc(15px * var(--scale) / 100);
    --px-16: calc(16px * var(--scale) / 100);
    --px-17: calc(17px * var(--scale) / 100);
    --px-18: calc(18px * var(--scale) / 100);
    --px-20: calc(20px * var(--scale) / 100);
    --px-22: calc(22px * var(--scale) / 100);
    --px-23: calc(23px * var(--scale) / 100);
    --px-24: calc(24px * var(--scale) / 100);
    --px-25: calc(25px * var(--scale) / 100);
    --px-26: calc(26px * var(--scale) / 100);
    --px-28: calc(28px * var(--scale) / 100);
    --px-30: calc(30px * var(--scale) / 100);
    --px-32: calc(32px * var(--scale) / 100);
    --px-33: calc(33px * var(--scale) / 100);
    --px-35: calc(35px * var(--scale) / 100);
    --px-36: calc(36px * var(--scale) / 100);
    --px-40: calc(40px * var(--scale) / 100);
    --px-42: calc(42px * var(--scale) / 100);
    --px-44: calc(44px * var(--scale) / 100);
    --px-45: calc(45px * var(--scale) / 100);
    --px-48: calc(48px * var(--scale) / 100);
    --px-50: calc(50px * var(--scale) / 100);
    --px-52: calc(52px * var(--scale) / 100);
    --px-55: calc(55px * var(--scale) / 100);
    --px-60: calc(60px * var(--scale) / 100);
    --px-68: calc(68px * var(--scale) / 100);
    --px-64: calc(64px * var(--scale) / 100);
    --px-65: calc(65px * var(--scale) / 100);
    --px-70: calc(70px * var(--scale) / 100);
    --px-73: calc(73px * var(--scale) / 100);
    --px-75: calc(75px * var(--scale) / 100);
    --px-76: calc(76px * var(--scale) / 100);
    --px-80: calc(80px * var(--scale) / 100);
    --px-85: calc(85px * var(--scale) / 100);
    --px-88: calc(88px * var(--scale) / 100);
    --px-89: calc(89px * var(--scale) / 100);
    --px-90: calc(90px * var(--scale) / 100);
    --px-95: calc(95px * var(--scale) / 100);
    --px-100: calc(100px * var(--scale) / 100);
    --px-105: calc(105px * var(--scale) / 100);
    --px-108: calc(108px * var(--scale) / 100);
    --px-110: calc(110px * var(--scale) / 100);
    --px-120: calc(120px * var(--scale) / 100);
    --px-122: calc(122px * var(--scale) / 100);
    --px-125: calc(125px * var(--scale) / 100);
    --px-128: calc(128px * var(--scale) / 100);
    --px-130: calc(130px * var(--scale) / 100);
    --px-135: calc(130px * var(--scale) / 100);
    --px-136: calc(136px * var(--scale) / 100);
    --px-140: calc(140px * var(--scale) / 100);
    --px-145: calc(145px * var(--scale) / 100);
    --px-150: calc(150px * var(--scale) / 100);
    --px-155: calc(155px * var(--scale) / 100);
    --px-157: calc(157px * var(--scale) / 100);
    --px-160: calc(160px * var(--scale) / 100);
    --px-165: calc(165px * var(--scale) / 100);
    --px-168: calc(168px * var(--scale) / 100);
    --px-175: calc(175px * var(--scale) / 100);
    --px-180: calc(180px * var(--scale) / 100);
    --px-185: calc(185px * var(--scale) / 100);
    --px-190: calc(190px * var(--scale) / 100);
    --px-200: calc(200px * var(--scale) / 100);
    --px-210: calc(210px * var(--scale) / 100);
    --px-220: calc(220px * var(--scale) / 100);
    --px-228: calc(228px * var(--scale) / 100);
    --px-240: calc(240px * var(--scale) / 100);
    --px-250: calc(250px * var(--scale) / 100);
    --px-255: calc(255px * var(--scale) / 100);
    --px-260: calc(260px * var(--scale) / 100);
    --px-266: calc(266px * var(--scale) / 100);
    --px-270: calc(270px * var(--scale) / 100);
    --px-280: calc(280px * var(--scale) / 100);
    --px-290: calc(290px * var(--scale) / 100);
    --px-300: calc(300px * var(--scale) / 100);
    --px-320: calc(320px * var(--scale) / 100);
    --px-340: calc(340px * var(--scale) / 100);
    --px-350: calc(350px * var(--scale) / 100);
    --px-360: calc(360px * var(--scale) / 100);
    --px-380: calc(380px * var(--scale) / 100);
    --px-400: calc(400px * var(--scale) / 100);
    --px-420: calc(420px * var(--scale) / 100);
    --px-430: calc(430px * var(--scale) / 100);
    --px-440: calc(440px * var(--scale) / 100);
    --px-450: calc(450px * var(--scale) / 100);
    --px-460: calc(460px * var(--scale) / 100);
    --px-480: calc(480px * var(--scale) / 100);
    --px-500: calc(500px * var(--scale) / 100);
    --px-550: calc(550px * var(--scale) / 100);
    --px-570: calc(570px * var(--scale) / 100);
    --px-600: calc(600px * var(--scale) / 100);
    --px-620: calc(620px * var(--scale) / 100);
    --px-640: calc(640px * var(--scale) / 100);
    --px-650: calc(650px * var(--scale) / 100);
    --px-690: calc(690px * var(--scale) / 100);
    --px-700: calc(700px * var(--scale) / 100);
    --px-710: calc(710px * var(--scale) / 100);
    --px-800: calc(800px * var(--scale) / 100);
    --px-820: calc(820px * var(--scale) / 100);
    --px-900: calc(900px * var(--scale) / 100);
    --px-950: calc(950px * var(--scale) / 100);
    --px-970: calc(970px * var(--scale) / 100);
    --px-988: calc(988px * var(--scale) / 100);
    --px-998: calc(998px * var(--scale) / 100);
    --px-1100: calc(1100px * var(--scale) / 100);
    --px-1200: calc(1200px * var(--scale) / 100);
    /**/
    --s-8: calc(8px * var(--scale) / 100) / calc(11px * var(--scale) / 100) "Montserrat", sans-serif;
    --s-10: calc(10px * var(--scale) / 100) / calc(13px * var(--scale) / 100) "Montserrat", sans-serif;
    --s-11: calc(11px * var(--scale) / 100) / calc(14px * var(--scale) / 100) "Montserrat", sans-serif;
    --s-12: calc(12px * var(--scale) / 100) / calc(15px * var(--scale) / 100) "Montserrat", sans-serif;
    --s-13: calc(13px * var(--scale) / 100) / calc(16px * var(--scale) / 100) "Montserrat", sans-serif;
    --s-14: calc(14px * var(--scale) / 100) / calc(15px * var(--scale) / 100) "Montserrat", sans-serif;
    --s-15: calc(15px * var(--scale) / 100) / calc(19px * var(--scale) / 100) "Montserrat", sans-serif;
    --s-16: calc(16px * var(--scale) / 100) / calc(19px * var(--scale) / 100) "Montserrat", sans-serif;
    --s-17: calc(17px * var(--scale) / 100) / calc(20px * var(--scale) / 100) "Montserrat", sans-serif;
    --s-18: calc(18px * var(--scale) / 100) / calc(22px * var(--scale) / 100) "Montserrat", sans-serif;
    --s-19: calc(19px * var(--scale) / 100) / calc(23px * var(--scale) / 100) "Montserrat", sans-serif;
    --s-20: calc(20px * var(--scale) / 100) / calc(24px * var(--scale) / 100) "Montserrat", sans-serif;
    --s-22: calc(22px * var(--scale) / 100) / calc(27px * var(--scale) / 100) "Montserrat", sans-serif;
    --s-24: calc(24px * var(--scale) / 100) / calc(37px * var(--scale) / 100) "Montserrat", sans-serif;
    --s-25: calc(25px * var(--scale) / 100) / calc(30px * var(--scale) / 100) "Montserrat", sans-serif;
    --s-26: calc(26px * var(--scale) / 100) / calc(32px * var(--scale) / 100) "Montserrat", sans-serif;
    --s-28: calc(28px * var(--scale) / 100) / calc(34px * var(--scale) / 100) "Montserrat", sans-serif;
    --s-30: calc(30px * var(--scale) / 100) / calc(37px * var(--scale) / 100) "Montserrat", sans-serif;
    --s-32: calc(32px * var(--scale) / 100) / calc(39px * var(--scale) / 100) "Montserrat", sans-serif;
    --s-38: calc(38px * var(--scale) / 100) / calc(42px * var(--scale) / 100) "Montserrat", sans-serif;
    --s-45: calc(45px * var(--scale) / 100) / calc(55px * var(--scale) / 100) "Montserrat", sans-serif;
    --s-50: calc(50px * var(--scale) / 100) / calc(61px * var(--scale) / 100) "Montserrat", sans-serif;
    --s-54: calc(54px * var(--scale) / 100) / calc(66px * var(--scale) / 100) "Montserrat", sans-serif;
    --s-80: calc(80px * var(--scale) / 100) / calc(98px * var(--scale) / 100) "Montserrat", sans-serif;
    --shadow: 0px 1px 3px 0px rgba(60,64,67,.30), 0px 4px 8px 3px rgba(60,64,67,.15);
    --bdr-1: 1px solid rgb(218,220,224);
    --bdr-2: 2px solid rgb(218,220,224);
    --bs-main: #ee6119;
    --bs-main-50: #fef6ee;
    --bs-main-100: #fdead7;
    --bs-main-200: #fad2ae;
    --bs-main-300: #f7b17a;
    --bs-main-400: #f28745;
    --bs-main-500: #ee6119;
    --bs-main-600: #e04d16;
    --bs-main-700: #ba3814;
    --bs-main-800: #942e18;
    --bs-main-900: #772817;
    --bs-main-950: #40120a;
    --bs-main-o: var(--bs-main-100);
    --bg-solid: #111111;
    --bg-light: #1a1a1a;
    --bs-dark: #272727;
    --txt-dark: #292C2D;
    --txt-light: #CBC7C4;
    --color-chart: var(--bs-main);
    --color-chart-o: var(--bs-main-o);
    --chart-gray: var(--bs-gray-100);
    --pad-sub: var(--px-24);
    --black: #000000;
    --column-service: 3;
    --chart-gradiant: linear-gradient(90deg, var(--bs-main) 0%, var(--bs-main-300) 100%)
}

/* Common CSS properties  */

.show-on-phone {
    display: none !important;
}

.wrap-line-1, .wrap-line-2, .wrap-line-3, .wrap-line-4, .wrap-line-5 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    word-break: break-word;
    text-overflow: ellipsis;
    text-transform: capitalize;
    -webkit-box-orient: vertical;
}

.wrap-line-2 {
    -webkit-line-clamp: 2;
}

.wrap-line-3 {
    -webkit-line-clamp: 3;
}

.wrap-line-4 {
    -webkit-line-clamp: 4;
}

.wrap-line-5 {
    -webkit-line-clamp: 5;
}

.bg-main {
    background: var(--bs-main);
}

h1, h2, h4, h3 {
    margin: 0;
}

input[type=checkbox] {
    height: 0;
    width: 0;
    visibility: hidden;
}

label.checkbox {
    margin: 0;
    display: block;
    cursor: pointer;
    overflow: hidden;
    text-indent: -9999px;
    width: var(--px-48);
    height: var(--px-24);
    background: #D1D1D1;
    position: relative;
    border-radius: var(--px-60);
}

    label.checkbox:after {
        content: '';
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: var(--px-2);
        width: var(--px-20);
        height: var(--px-20);
        background: #fff;
        border-radius: var(--px-24);
        transition: 0.5s;
    }

input:checked + label.checkbox {
    background: var(--main-color);
    border: 1px solid var(--theme-mode-border);
}

    input:checked + label.checkbox:after {
        left: calc(100% - var(--px-2));
        transform: translate(-100%, -50%);
    }

label.checkbox:active:after {
    width: 130px;
}

.toggle-option {
    display: flex;
    gap: var(--px-10);
    align-items: center;
    height: var(--px-36);
}

button:not(.pswp__button) {
    z-index: 0;
    outline: unset;
    position: relative;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}

button {
    border: 0;
    display: flex;
    gap: var(--px-12);
    align-items: center;
    height: var(--px-40);
    color: var(--bs-white);
    justify-content: center;
    min-width: var(--px-120);
    padding: 0 var(--px-16);
    background: #ee6119;
    border-radius: var(--px-12);
    font: normal normal 500 var(--s-14);
}

    button::before {
        content: '';
        display: block;
        opacity: 0;
        position: absolute;
        transition-duration: .15s;
        transition-timing-function: cubic-bezier(0.6,0.0,0.2,1);
        z-index: -1;
        bottom: 0;
        left: 0;
        right: 0;
        top: 0;
        background: var(--bs-gray-400);
        border-radius: 4px;
        transform: scale(0);
        transition-property: transform,opacity;
    }

.btn:focus {
    box-shadow: unset;
}

button:active::before {
    opacity: .1;
    transform: scale(1);
}

button:active > * {
    animation: scale-click .2s;
}

button:active {
    background: var(--bg-light);
}

button.btn-close-popup {
    padding: 0;
    font-weight: 700;
    color: var(--bs-dark);
    font-size: var(--px-24);
}

button.closed {
    width: fit-content;
    min-width: unset;
    background: unset;
    border: var(--bdr-1);
    border-color: var(--bs-gray-700);
}

button.disable {
    pointer-events: none;
    opacity: .3;
}

button.h-60 {
    font: normal normal 500 var(--s-18);
}

.underline {
    text-decoration: underline;
}

p {
    font-family: Montserrat, sans-serif;
}

.txt-white {
    color: var(--txt-light);
}

.txt-green {
    color: var(--bs-green) !important;
}

.txt-red {
    color: var(--bs-danger) !important;
}

.txt-pink {
    color: var(--bs-pink) !important;
}

.txt-dark {
    color: var(--theme-mode-text-dark);
}

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

.text-main {
    color: var(--bs-main);
}

.disNone, .disnone {
    display: none !important;
}

.noClick {
    pointer-events: none !important;
}

.fade:not(.show) {
    opacity: 0;
    display: none;
}

p {
    margin: 0;
}

body {
    width: 100vw;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    height: 100dvh !important;
}

.modal-backdrop.show {
    opacity: 0.8;
    backdrop-filter: blur(3px);
    z-index: -1;
}

.dropdown-toggle::after {
    display: none;
    content: unset;
}

.dropdown-menu.show {
    display: block;
    overflow: auto;
    max-height: var(--px-400);
    background: var(--bs-dark);
    box-shadow: var(--shadow);
}

.dropdown-item {
    height: var(--px-50);
    color: var(--note);
    font: normal normal 400 var(--s-16);
    display: flex;
    align-items: center;
}

    .dropdown-item:hover, .dropdown-item:focus {
        color: var(--bs-main-400);
        background-color: var(--bg-light);
    }

header.container-header-layout {
    flex: 1;
    display: flex;
    align-items: center;
    padding: var(--px-16);
    max-height: var(--px-60);
    justify-content: space-between;
}

    header.container-header-layout .nav-start,
    header.container-header-layout .nav-end {
        flex: 1;
        display: flex;
        gap: var(--px-20);
    }

    header.container-header-layout .nav-end {
        justify-content: end;
        align-items: center;
    }

        header.container-header-layout .nav-end .logo-store {
            background: unset;
            border-radius: 100%;
            width: var(--px-50);
            height: var(--px-50);
        }

header .title-header {
    font: normal normal 700 var(--s-20)
}


/* KEYBOARD*/

#pin-form-modal:not(.permission) {
    width: 100vw;
    min-width: 100vw;
    margin: auto;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--px-30);
}

#pin-form-modal.permission-form {
    background: rgb(12 12 12 / 80%);
    justify-content: center;
}

#pin-form-modal .modal-dialog {
    height: 100%;
    display: flex;
    max-width: 70vw;
    border-radius: 8px;
    flex-direction: column;
    justify-content: center;
    margin: 0px auto;
}

#pin-form-modal .modal-content {
    border: 0px;
    display: flex;
    gap: var(--px-32);
    flex-flow: column;
    padding-bottom: 0px;
    align-items: center;
    background: unset;
}

#pin-form-modal .pin-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: var(--px-12);
}

    #pin-form-modal .pin-header p {
        font: normal normal 600 var(--s-28);
        color: var(--txt-light);
    }

#pin-form-modal .pin-wrapper {
    width: 100%;
    display: grid;
    height: var(--px-32);
    margin: var(--px-32) 0 0;
    grid-gap: var( --px-10);
    justify-content: center;
    justify-items: center;
    grid-template-columns: repeat(auto-fit, var( --px-44));
}

#pin-form-modal .pin-header input {
    border: 0px;
    cursor: text;
    outline: none;
    text-align: center;
    width: var(--px-20);
    height: var(--px-20);
    font-size: var(--px-20);
    border-radius: var(--px-20);
    color: var(--txt-light);
    background: var(--txt-light);
    pointer-events: none;
}

    #pin-form-modal .pin-header input.typed {
        color: var(--bs-main);
        background: var(--bs-main);
    }

#pin-form-modal .pin-form-keypad {
    display: grid;
    border-radius: 4px;
    grid-gap: var(--px-18);
    color: var(--txt-light);
    grid-template-rows: repeat(4, var(--px-80));
    grid-template-columns: repeat(3, var(--px-100));
}

    #pin-form-modal .pin-form-keypad button {
        border: 0px;
        padding: 0px;
        width: 100%;
        height: 100%;
        min-width: unset;
        color: var(--txt-light);
        font: normal normal 600 var(--s-38);
        backdrop-filter: blur(4px);
        border-radius: var(--px-50);
        border: var(--bdr-1);
        border-color: var(--bs-gray-600);
        background: unset;
    }

        #pin-form-modal .pin-form-keypad button.clear, #pin-form-modal .pin-form-keypad button.cancel {
            /* border: 0px; */
            /* background: 0px center; */
        }

        #pin-form-modal .pin-form-keypad button.cancel {
            color: var(--txt-light);
            font: normal normal 500 var(--s-18);
        }

        #pin-form-modal .pin-form-keypad button.clear i {
            font-size: var(--px-44);
            --fa-secondary-color: var(--bg-light);
            --fa-secondary-opacity: 1;
            --fa-primary-color: var(--txt-light);
            --fa-primary-opacity: 1;
        }

.blur {
    filter: blur(4px);
}

.search-form {
    flex: 1;
    display: grid;
    max-width: 90%;
    align-items: center;
    width: var(--px-380);
    max-height: var(--px-48);
    padding: 0 var(--px-10);
    box-shadow: var(--shadow);
    color: var(--txt-light);
    border-radius: var(--px-24);
    background: var(--bg-solid);
    grid-template-columns: var(--px-40) 1fr;
}

.container-body-layout {
    flex: 1;
    overflow: hidden;
    max-width: unset;
}

input.no-style {
    width: 100%;
    border: none;
    outline: none;
    min-width: unset;
    box-shadow: none;
    background: unset;
    color: var(--txt-light);
    font: normal normal 500 var(--s-14);
}

    input.no-style::-webkit-input-placeholder {
        color: var(--bs-gray-400);
        font: normal normal 400 var(--s-14);
    }

.hover {
    cursor: pointer;
}

    .hover:hover {
        box-shadow: var(--shadow);
    }

box.status {
    padding: 2px 6px;
    color: var(--green);
    border-radius: var(--px-8);
    background: var(--green-o);
    font: normal normal 500 var(--s-12);
}

.group-btn {
    flex: 1;
    width: 100%;
    display: flex;
    gap: var(--px-10);
    height: var(--px-40);
    align-items: flex-end;
    justify-content: flex-end;
}

.filter-form {
    display: flex;
    gap: var(--px-10);
    align-items: center;
}

button.no-backgr {
    background: unset;
    border: var(--bdr-1);
    color: var(--txt-light);
    border-color: transparent;
}

    button.no-backgr.active {
        opacity: 1;
        background: var(--bs-main);
        color: var(--bs-main-50);
        border-radius: var(--px-24);
    }

    button.no-backgr i {
        font-size: var(--px-16);
        color: var(--bs-main);
    }

        button.no-backgr i.fa-2xl {
            font-size: var(--px-24);
        }

button.no-brd {
    border: 0;
}

button.no-stl {
    border: 0;
    justify-content: start;
    align-items: center;
    background: var(--bg-solid);
}

button.auto-w {
    width: var(--px-180);
    height: inherit;
    white-space: nowrap;
}

.form-group {
    width: 100%;
    display: grid;
    border: var( --bdr-1);
    border-radius: var( --px-16);
    grid-gap: var( --px-36) var(--px-12);
    padding: var( --px-12);
    grid-template-columns: repeat(12, 1fr);
}

    .form-group .header--detail {
        position: relative;
        grid-column: span 12;
        font: normal normal 600 var(--s-24);
    }

        .form-group .header--detail::after {
            position: absolute;
            bottom: -10px;
            width: calc(100% + var(--px-48));
            content: '';
            left: calc(-1 * var(--px-24));
            border: var(--bdr-1);
        }

.form-group {
    color: var(--txt-light);
    border: unset;
    /* background: var(--bg-solid); */
}

    .form-group.bg-dark .header--detail::after {
        content: unset;
        display: none;
    }

.header--detail {
    position: relative;
    color: var(--txt-light);
    font: normal normal 600 var(--s-24);
}

    .header--detail .refresh-btn-page {
        position: absolute;
        bottom: var(--px-12);
        left: var(--px-52);
        background: var(--bs-dark);
        height: var(--px-32);
        min-width: var(--px-32);
        max-width: var(--px-32);
    }

.form--input {
    display: flex;
    gap: var(--px-12);
    position: relative;
    grid-column: span 12;
    flex-direction: column;
    font: normal normal 400 var(--s-14);
}

.grid-2 {
    grid-column: span 2;
}

.grid-3 {
    grid-column: span 3;
}

.grid-4 {
    grid-column: span 4;
}

.grid-6 {
    grid-column: span 6;
}

.grid-7 {
    grid-column: span 7;
}

.grid-8 {
    grid-column: span 8;
}

.grid-9 {
    grid-column: span 9;
}

.grid-10 {
    grid-column: span 10;
}

.grid-12 {
    grid-column: span 12;
}

.form--input input {
    margin: 0;
    width: 100%;
    outline: none;
    border-radius: 8px;
    height: var(--px-48);
    border: unset;
    color: var(--txt-light);
    padding: var(--px-12) var(--px-16);
    font: normal normal 400 var(--s-14);
    background: var(--bs-gray-dark);
}

.form-group.bg-dark .form--input input {
    margin: 0;
    width: 100%;
    outline: none;
    border: unset;
    height: var(--px-48);
    color: var(--txt-light);
    border-radius: var(--px-22);
    background: var(--bg-light);
    padding: var(--px-12) var(--px-16);
    font: normal normal 400 var(--s-17);
    border-color: var(--bs-gray-800);
}

.form--input .check-valid {
    display: none;
    color: var(--red);
    font: normal normal 400 var(--s-14);
}

.form--input label {
    font: normal normal 500 var(--s-20);
    color: var(--bs-gray-100);
}

.form--input input[type="checkbox"] {
    display: none;
}

.form--input.require .check-valid {
    display: block;
}

.form--input textarea {
    margin: 0;
    width: 100%;
    outline: none;
    border: unset;
    border-radius: var(--px-16);
    max-height: var(--px-400);
    color: var(--txt-light);
    background: var(--bs-gray-dark);
    border-color: var(--bs-gray-800);
    padding: var(--px-16);
    font: normal normal 400 var(--s-17);
}

.form--input button.dropdown-toggle {
    width: 100%;
    background: var(--bg-solid);
    justify-content: space-between;
}

div.form-upload-image {
    display: flex;
    overflow: hidden;
    position: relative;
    align-items: center;
    height: var(--px-280);
    justify-content: center;
    border-radius: var(--px-16);
    border: 2px dotted var(--bs-gray-700);
}

    div.form-upload-image p {
        font: normal normal 500 var(--s-14);
    }

    div.form-upload-image i {
        font-size: var(--px-32);
    }

    div.form-upload-image img {
        z-index: 1;
        width: 100%;
        height: 100%;
        position: absolute;
    }

    div.form-upload-image .upload-label {
        width: 100%;
        height: 100%;
        display: flex;
        cursor: pointer;
        gap: var(--px-10);
        align-items: center;
        flex-direction: column;
        justify-content: center;
        color: var(--txt-light);
    }

    div.form-upload-image .upload-input {
        top: 0;
        left: 0;
        opacity: 0;
        width: 100%;
        height: 100%;
        cursor: pointer;
        position: absolute;
    }

.form-upload-image:hover .upload-label {
    z-index: 20;
    background: #00000030;
    color: var(--bs-white);
}


/* Create a custom checkbox */
div.option.select-radio {
    /* flex: 1; */
    display: flex;
    cursor: pointer;
    gap: var(--px-12);
    align-items: center;
    height: var(--px-44);
    color: var(--bs-gray-600);
    border-radius: var(--px-8);
    justify-content: flex-start;
    font: normal normal 500 var(--s-17);
}

    div.option.select-radio.active {
        color: var(--txt-light);
    }

    div.option.select-radio.disable {
        opacity: .6;
    }


.container--checkbox .checkmark {
    position: absolute;
    top: 2px;
    left: 2px;
    height: var(--px-24);
    width: var(--px-24);
    background-color: var(--bg-solid);
    box-shadow: 0px 0px 6px #00000029;
    border: var(--bdr-1);
    border-radius: 4px;
}

    .container--checkbox .checkmark.radio {
        border-radius: 100%;
        border-color: var(--bs-main);
    }

/* When the checkbox is checked, add a blue background */
.container--checkbox {
    display: block;
    margin: 0;
    position: relative;
    cursor: pointer;
    height: var(--px-30);
    width: var(--px-30);
    pointer-events: none;
}

    .container--checkbox input:checked ~ .checkmark {
        background-color: var(--bs-main);
        border: 2px solid var(--bs-main);
    }

        .container--checkbox input:checked ~ .checkmark.radio {
            background: var(--bs-white);
            border: 6px solid var(--bs-main);
        }

    /* Create the checkmark/indicator (hidden when not checked) */

    .container--checkbox .checkmark:after {
        content: "";
        position: absolute;
        display: none;
    }


    /* Show the checkmark when checked */

    .container--checkbox input:checked ~ .checkmark:after {
        display: block;
    }

    /* Style the checkmark/indicator */

    .container--checkbox .checkmark:after {
        left: var(--px-6);
        top: 2px;
        width: 6px;
        height: var(--px-14);
        border: solid #fff;
        border-width: 0 2px 2px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .container--checkbox .checkmark.radio:after {
        border: none;
    }

    .container--checkbox .checkmark.uncheckall:after {
        background: #FFF;
        border: 0;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        width: 70%;
        height: 2px;
        border-radius: 2px;
    }

.form-select-outlet {
    z-index: 7;
    height: 100%;
    display: flex;
    gap: 12%;
    overflow: hidden;
    flex-direction: column;
    background-size: cover;
    padding: var(--px-24) 0;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: overlay;
    background-color: var(--bg-solid);
    background-image: url( /Images/background-3.jpg);
}

    .form-select-outlet header {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        padding: var(--px-20) 0;
    }

        .form-select-outlet header img {
            height: var(--px-128);
        }

        .form-select-outlet header h3 {
            margin: 0;
            font-weight: 600;
        }

.checkin-order-bpdy-page {
    height: 100%;
    display: flex;
    overflow: hidden;
    position: relative;
    flex-direction: row;
    background: var(--bg-solid);
}

.outlet-list {
    width: 100%;
    display: flex;
    min-height: var(--px-140);
    overflow: auto hidden;
    gap: var(--px-24);
    padding: var( --px-16);
    align-items: center;
    padding-bottom: 0;
    justify-content: space-between;
}

    .outlet-list box.outlet {
        display: flex;
        overflow: hidden;
        align-items: center;
        flex-direction: column;
        grid-gap: var(--px-12);
        min-width: var(--px-140);
        min-height: var(--px-140);
        max-height: var(--px-140);
    }

box.outlet .box-left {
    height: var(--px-88);
    min-width: var(--px-88);
    max-width: var(--px-88);
    overflow: hidden;
    border-radius: var(--px-120);
    border: var(--bdr-2);
    border-width: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-white);
    font-size: var(--px-36);
    position: relative;
    transition: all .2s;
}

.outlet-list box.outlet.active .box-left {
    border-width: 6px;
    border-color: var(--bs-main);
}

box.outlet .box-right {
    flex: 1;
    display: flex;
    gap: var(--px-12);
    min-height: var(--px-24);
    text-align: center;
    flex-direction: column;
    justify-content: flex-start;
}

box.outlet .box-left img {
    width: 100%;
    height: 100%;
}

box.outlet .box-right span {
    color: var(--txt-light);
    font: normal normal 500 var(--s-20);
}

.keyboard-pin .unlock-pass {
    height: var(--px-44);
    width: 100%;
    background: var(--bs-main);
    border-radius: var(--px-22);
    display: flex;
    align-items: center;
    justify-content: center;
    font: normal normal 600 var(--s-20);
    color: var(--txt-light);
    max-width: var(--px-380);
}


/* SERVICE MENU */

.menu-create-page, .form-select-order {
    width: 100%;
    height: 100%;
    display: grid;
    position: absolute;
    gap: var(--px-16) 0;
    transition: left .5s;
    background: var(--bg-solid);
    grid-template-columns: var(--px-200) 1fr;
}

    .menu-create-page.open, .form-select-order.open {
        left: 0;
        z-index: 7;
        gap: 0;
        /* background: white; */
        background-image: url(/Images/black-backgr.jpg);
        background-size: cover;
    }

    .menu-create-page:not(.form-select-order) {
        z-index: 11;
        grid-gap: var(--px-24) 0;
        grid-template-rows: min-content;
    }

    .menu-create-page:not(.open), .form-select-order:not(.open) {
        left: 100%;
        display: none;
    }

header.title-menu {
    display: flex;
    grid-column: span 2;
    flex-direction: column;
    color: var(--note);
    gap: var(--px-24);
    padding: var(--px-24);
    padding-bottom: 0;
}

.categories-menu {
    z-index: 12;
    display: flex;
    flex-direction: column;
    color: var(--note);
    overflow: hidden auto;
    position: absolute;
    padding-bottom: var(--px-128);
    grid-row: span 2;
    background: #000000a6;
    );
    backdrop-filter: blur(0px);
    gap: var(--px-8);
    left: 0px;
    );
    top: 0;
    bottom: 0;
    width: var(--px-220);
}

    .categories-menu .title-cate {
        padding: 0 var(--px-12);
        font: normal normal 500 var(--s-24);
    }

    .categories-menu.open {
        left: -100%;
    }

button.categories {
    width: 100%;
    display: flex;
    padding: 0;
    align-items: center;
    color: white;
    text-align: start;
    min-height: var(--px-48);
    padding: 0 var(--px-12) 0 0;
    background: unset;
    justify-content: space-between;
    font: normal normal 400 var(--s-16);
    font-weight: 400;
    text-transform: capitalize;
}

    button.categories.active {
        background: var(--bs-main);
    }

    button.categories.sub-2 {
        font: normal normal 400 var(--s-14);
        font-weight: 400;
        position: relative;
        text-transform: capitalize;
    }

        button.categories.sub-2::after {
            position: absolute;
            content: '';
            bottom: -3px;
            height: 4px;
            width: 80%;
            left: 50%;
            border-radius: 100%;
            background: #c2c2c2;
            transform: translateX(-50%);
        }

        button.categories.sub-2:hover,
        .select-cate-left.select-main-menu:hover span {
            color: var(--bs-main);
        }

    button.categories count {
        width: var(--px-32);
        height: var(--px-32);
        border-radius: var(--px-32);
        background: var(--bg-light);
        color: var(--bs-main-400);
        font: normal normal 500 var(--s-16);
        display: flex;
        align-items: center;
        justify-content: center;
        border: var(--bdr-1);
    }

.item-service {
}

.cate-group {
    display: flex;
    flex-direction: column;
    border-radius: var(--px-24);
    background: var(--bg-light);
    padding: var(--px-12) var(--px-24);
    box-shadow: var(--shadow-qs-solid);
}

.cate-name {
    display: flex;
    align-items: center;
    min-height: var(--px-60);
    justify-content: space-between;
}

    .cate-name.sub-2 {
        padding-left: var(--pad-sub);
    }

    .cate-name.sub-3 {
        padding-left: calc(var(--pad-sub) * 2);
    }

    .cate-name.sub-4 {
        padding-left: calc(var(--pad-sub) * 3);
    }

    .cate-name.sub-5 {
        padding-left: calc(var(--pad-sub) * 4);
    }

    .cate-name.sub-6 {
        padding-left: calc(var(--pad-sub) * 5);
    }

    .cate-name.sub-8 {
        padding-left: calc(var(--pad-sub) * 6);
    }

    .cate-name span {
        font: normal normal 600 var(--s-18);
    }

    .cate-name button,
    button.add-on {
        background: unset;
        width: max-content;
        border: var(--bdr-1);
        min-width: var(--px-140);
        border-color: var(--bs-gray-800);
    }

        .cate-name button span,
        button.add-on span {
            font: normal normal 300 var(--s-14);
        }

        button.add-on.qty {
            width: var(--px-32);
            height: var(--px-32);
            min-width: unset;
            border: 0;
            border-radius: var(--px-32);
        }

            button.add-on.qty.hidden-when-no-select {
                background: unset;
            }

        button.add-on.no-border {
            border: 0;
            gap: var(--px-6);
            color: var(--bs-main);
            justify-content: flex-start;
        }

            button.add-on.no-border span {
                font: normal normal 500 var(--s-18);
            }

        button.add-on.only-icon {
            border: 0;
            height: 100%;
            min-width: unset;
            width: max-content;
            font-size: var(--px-20);
            color: var(--bs-gray-500);
            background: unset;
        }

            button.add-on.only-icon.collapsed .fa-chevron-down {
                transform: rotate(180deg);
                transition: all .3s;
            }

div.add-on.service {
    display: flex;
    min-width: var(--px-60);
    max-width: var(--px-60);
    height: var(--px-60);
    border-radius: var(--px-60);
    justify-content: center;
    position: absolute;
    bottom: var(--px-40);
    right: var(--px-40);
    background: var(--bs-main);
    z-index: 123123123;
    box-shadow: var(--shadow-qs-solid);
    align-items: center;
}

    div.add-on.service #add-item-combo {
        border: 0;
        box-shadow: unset;
        background: var(--bs-main);
    }

button.add-on.refresh {
    min-width: var(--px-60);
    max-width: var(--px-60);
    height: var(--px-60);
    border-radius: var(--px-60);
    justify-content: center;
    position: absolute;
    bottom: var(--px-40);
    right: var(--px-128);
    background: var(--bs-gray-800);
    z-index: 123123123;
    box-shadow: var(--shadow-qs-solid)
}

.select-cate-left.active {
    position: relative;
    color: var(--bs-main);
}

    .select-cate-left.active::after {
        top: 50%;
        content: '';
        position: absolute;
        width: var(--px-6);
        height: var(--px-24);
        background: var(--bs-main);
        border-radius: var(--px-14);
        right: 0;
        transform: translateY(-50%);
    }

    .select-cate-left.active button {
        color: var(--bs-main);
        height: var(--px-36);
    }

.select-cate-left:not(.active) .dropdown-menu-cate {
    display: none !important;
}


.select-cate-left.active .dropdown button,
.select-cate-left.active .dropdown button i {
    color: var(--txt-light);
}


.item-service {
    flex: 1;
    width: 100%;
    display: flex;
    gap: var(--px-8);
    overflow: auto;
    padding: 0 var(--px-8);
    flex-wrap: wrap;
    flex-direction: row;
    padding-bottom: var(--px-40);
}

.service-name {
    color: var(--note);
    display: flex;
    border: var(--bdr-1);
    border-color: var(--bs-gray-700);
    font: normal normal 300 var(--s-16);
    overflow: hidden;
    border-radius: 4px;
    transition: all .2s;
    /* Ensure children have 50% height of each row */
    height: calc((100% / 2) - var(--px-8) * 1);
    width: calc((100% / var(--column-service)) - var(--px-8) * 1);
    flex-direction: column;
    justify-content: flex-start;
    border-radius: var(--px-40);
    position: relative;
}

    .service-name .flex-img {
        flex: 1;
        position: relative;
        overflow: hidden;
    }

        .service-name .flex-img .pinch-to-zoom {
            bottom: 0;
            right: 0;
            gap: 2px;
            position: absolute;
            display: none;
            flex-direction: row;
            align-items: flex-end;
            justify-content: center;
            text-align: center;
            font: normal normal 500 var(--s-14);
            backdrop-filter: blur(1px);
            padding: 4px;
            backdrop-filter: blur(2px);
        }

div.popup-content .pinch-to-zoom {
    display: flex !important;
}

.service-name img {
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease;
    cursor: grab;
}

    .service-name img:active {
        cursor: grabbing;
    }

.service-name .info-service {
    flex: 1;
    max-height: var(--px-44);
    padding: 0 var(--px-24);
    justify-content: space-between;
    font: normal normal 600 var(--s-18);
    background: var(--bs-white);
    align-items: center;
    text-transform: capitalize;
}

.service-name price {
    position: absolute;
    top: var(--px-16);
    z-index: 1;
    left: var(--px-24);
    font-size: var(--px-16);
    font-weight: 200;
}

.service-name dur {
    color: var(--bs-gray-400);
    font: italic normal 400 var(--s-14);
}

.service-name note {
    font-weight: 300;
    font-size: var(--px-14);
    color: var(--bs-gray-700);
    text-transform: math-auto;
    font-style: italic;
}

.modal-fullscreen .modal-header {
    padding: var(--px-32) var(--px-60);
}

.modal-fullscreen .modal-footer {
    color: var(--txt-light);
    padding: var(--px-12) var(--px-24);
    display: flex;
    border-top: var(--bdr-1);
    border-color: var(--bs-gray-700);
    font: normal normal 400 var(--s-15);
}

#modalListOrder .modal-footer {
    padding: 4px var(--px-16) 0;
    overflow: hidden;
    flex-direction: column;
}
/* Table reservation */
.form-select-table {
    width: 100%;
    height: 100%;
    display: grid;
    gap: var(--px-4);
    padding: 0;
    background-image: url(/Images/black-backgr.jpg);
    background-size: cover;
    grid-template-rows: min-content;
    grid-template-columns: 1fr var(--px-340);
    background-position: center;
    background-repeat: no-repeat;
}

b {
}

.form-select-table .header--detail {
    grid-column: span 2;
}

.form-select-table .area-and-status {
    width: calc(100% - var(--px-160));
    display: flex;
    gap: var(--px-48);
    flex-direction: row;
    min-height: var(--px-68);
    max-height: var(--px-68);
    align-items: center;
    padding: var(--px-20);
    justify-content: space-between;
    overflow: auto hidden;
}

.table-area {
    display: flex;
    gap: var(--px-12);
}

.form-select-table .area.no-backgr {
}

    .form-select-table .area.no-backgr.active {
    }

.form-select-table .table-status {
    display: flex;
    gap: var(--px-12);
    position: relative;
}

    .form-select-table .table-status::before,
    .form-select-table .table-status::after {
        top: 50%;
        content: '';
        position: absolute;
        height: var(--px-36);
        width: var(--px-4);
        border-radius: 4px;
        left: calc(-1 * var(--px-24));
        background: var(--bs-gray-800);
        transform: translate(0, -50%);
    }

    .form-select-table .table-status::after {
        left: unset;
        right: calc(-1 * var(--px-12));
    }

.form-select-table .status.no-backgr {
}

.form-select-table .status.no-backgr {
    background: unset;
    border: unset;
    color: var(--txt-light);
    white-space: nowrap;
}

    .form-select-table .status.no-backgr.active {
        border: var(--bdr-1);
    }

    .form-select-table .status.no-backgr .fa-circle {
    }

.form-select-table .table-map {
    flex: 1;
    display: flex;
    gap: var(--px-60);
    padding: var(--px-24) var(--px-16);
    flex-wrap: wrap;
    align-content: flex-start;
    overflow: auto hidden;
    flex-direction: column;
}

.form-select-table[filter="inservice"] .box--table:not(.inservice),
.form-select-table[filter="available"] .box--table.inservice,
.form-select-table[filter="inservice"] .order-table:not(.inservice),
.form-select-table[filter="available"] .order-table.inservice {
    display: none;
}

.form-select-table .box--table {
    display: flex;
    flex-direction: column;
    color: var(--txt-light);
    position: relative;
    height: var(--px-100);
    width: var(--px-140);
}

    .form-select-table .box--table circle {
        left: 50%;
        z-index: 1;
        position: absolute;
        font-size: var(--px-32);
        top: calc(-1 * var(--px-16));
        transform: translateX(-50%);
        color: #ffffff9e;
        border-radius: 100%;
    }

        .form-select-table .box--table circle.chair-2 {
            left: unset;
            right: calc(-1 * var(--px-16));
            top: 50%;
            transform: translateY(-50%);
        }

        .form-select-table .box--table circle.chair-3 {
            top: unset;
            bottom: calc(-1 * var(--px-16));
        }

        .form-select-table .box--table circle.chair-4 {
            right: unset;
            left: calc(-1 * var(--px-16));
            top: 50%;
            transform: translateY(-50%);
        }

    .form-select-table .box--table .table-detail {
        z-index: 2;
        height: 100%;
        display: flex;
        gap: var(--px-6);
        flex-direction: column;
        backdrop-filter: blur(4px);
        background: #ffffff3d;
        border-radius: var(--px-12);
        border-left-color: var(--bs-success);
        border-width: 0 0 0 4px;
        border-style: solid;
        padding: var(--px-10);
    }

    .form-select-table .box--table .name-table {
        /* flex: 1; */
        display: flex;
        align-items: end;
        color: var(--bs-main);
        font: normal normal 600 var(--s-18);
    }

    .form-select-table .box--table .guest {
        font: normal normal 500 var(--s-13);
    }

        .form-select-table .box--table .guest i {
            font-size: var(--px-14);
        }

    .form-select-table .box--table.inservice .table-detail {
        border-color: var(--bs-yellow);
    }

    .form-select-table .box--table.guest-3.inservice circle:not(.chair-4) {
        color: var(--bs-yellow);
    }

    .form-select-table .box--table.guest-2.inservice circle:not(.chair-3, .chair-4) {
        color: var(--bs-yellow);
    }

    .form-select-table .box--table.guest-1.inservice circle:not(.chair-2, .chair-3, .chair-4) {
        color: var(--bs-yellow);
    }

    .form-select-table .box--table.isOpening circle {
        color: var(--bs-red) !important;
    }

    .form-select-table .box--table.isOpening .table-detail {
        border-left-color: var(--bs-red) !important;
    }

.group-btn-right-top {
    z-index: 6;
    gap: var(--px-12);
    right: var(--px-24);
    top: var(--px-24);
    position: absolute;
    align-items: center;
    color: var(--txt-light);
    justify-content: end;
}

button.setting-menu {
    z-index: 5;
    border: unset;
    height: var(--px-50);
    min-width: var(--px-60);
    font-size: var(--px-20);
    border-radius: var(--px-26);
}

    button.setting-menu i {
        color: var(--txt-light);
    }

    button.setting-menu:not(.open) i.fa-home,
    button.setting-menu.open i.fa-gear {
        display: none;
    }

.d-flex.cate-sub {
    gap: var(--px-10);
    align-items: center;
    height: var(--px-36);
    padding: 0 var(--px-16);
    position: relative;
}

    .d-flex.cate-sub .fa-corner {
        font-size: var(--px-20);
        color: var(--bs-gray-700);
        margin-bottom: var(--px-8);
    }

.select2-container {
    z-index: 1111;
}

.select-cate-left.select-main-menu {
    justify-content: space-between !important;
    padding: 0 var(--px-8);
    z-index: 1;
}

    .select-cate-left.select-main-menu:nth-child(2) {
        border: 0;
        z-index: 1;
    }

.form-select-table .end-bar-map {
    overflow: hidden;
    color: var(--txt-light);
    display: flex;
    flex-direction: column;
    background: var(--bs-gray-900);
    padding: var(--px-20);
    gap: var(--px-24);
    border-radius: var(--px-16);
    transition: height 1s ease-in
}

    .form-select-table .end-bar-map.expand {
        min-height: calc(100% - var(--px-220) - var(--px-8));
        max-height: calc(100% - var(--px-220) - var(--px-8));
    }

    .form-select-table .end-bar-map .header-place-ord {
        display: flex;
        align-items: center;
        gap: var(--px-12);
        height: var(--px-40);
        font: normal normal 600 var(--s-18);
    }

        .form-select-table .end-bar-map .header-place-ord i {
            color: var(--bs-main);
            font-size: var(--px-20);
        }

.place-order-table {
    width: 100%;
    height: 100%;
    display: flex;
    gap: var(--px-18);
    justify-items: center;
    overflow: hidden auto;
    align-content: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    flex-wrap: wrap;
}

    .place-order-table .order-table {
        flex: 1;
        display: flex;
        align-items: flex-start;
        position: relative;
        min-height: var(--px-80);
        max-height: var(--px-80);
        border-radius: var(--px-12);
        background: var(--bg-light);
        color: var(--txt-light);
        min-width: var(--px-80);
        max-width: var(--px-80);
        padding: var(--px-10);
        flex-direction: column;
        font: normal normal 400 var(--s-12);
        justify-content: space-between;
    }

        .place-order-table .order-table.inservice {
            color: var(--txt-dark);
            background: var(--bs-yellow);
        }

        .place-order-table .order-table span {
            color: var(--bs-main-600);
            text-transform: uppercase;
            font: normal normal 600 var(--s-16);
        }

.start-bar-map {
    height: 100%;
    display: flex;
    overflow: hidden;
    position: relative;
    flex-direction: column;
    padding-left: var(--px-16);
}

.guest.d-flex.gap-1.payment {
    background: var(--bs-white);
    border-radius: var(--px-12);
    padding: 4px;
    position: relative;
    color: var(--bs-dark);
}

count {
    display: flex;
    position: absolute;
    align-items: center;
    width: var(--px-24);
    height: var(--px-24);
    top: 0;
    right: calc(-1* var(--px-4));
    justify-content: center;
    color: var(--white);
    background: var(--bs-main);
    border-radius: var(--px-24);
    font: normal normal 600 var(--s-14);
    box-shadow: var(--shadow);
}

.modal-right-side {
    right: 0;
    left: unset;
    width: var(--px-600);
    max-width: 100vw;
}

    .modal-right-side .modal-header {
        padding: var(--px-24);
    }

    .modal-right-side .modal-content {
        background: var(--bg-light) !important;
        border-left: 2px solid var(--bs-gray-700);
    }

    .modal-right-side .modal-fullscreen {
        width: 100%;
    }

#append-header-lobby-id {
    display: flex;
    gap: var(--px-24);
    align-items: center;
    position: sticky;
    top: 0px;
    z-index: 6;
    border-radius: var(--px-24) 0 0 0;
    padding: var(--px-12) var(--px-24);
}

    #append-header-lobby-id.menu.flex-column {
        gap: var(--px-16);
        background: #000000;
        padding: var(--px-8);
        min-width: 100%;
        right: 0;
    }

    #append-header-lobby-id img {
        width: var(--px-64);
        height: var(--px-64);
        border-radius: var(--px-64);
    }

.header--detail.menu {
    padding: var(--px-16) 0;
}

    .header--detail.menu img {
        width: var(--px-100);
        height: var(--px-100);
        border-radius: var(--px-100);
    }

    .header--detail.menu .title {
        font: normal normal 500 var(--s-17)
    }

#append-header-lobby-id .title {
    text-align: center;
    text-transform: capitalize;
    font: normal normal 600 var(--s-28);
}

.form-select-order .header--detail {
    grid-column: span 2;
}

.header--detail time {
    color: var(--bs-gray-500);
    font: normal normal 400 var(--s-16);
}

.expand-bill-view {
    gap: var(--px-12);
    width: 100%;
    display: flex;
    z-index: 8;
    color: var( --txt-light);
    align-items: center;
    padding: var(--px-12);
    grid-column: span 2;
    height: var(--px-60);
    position: absolute;
    bottom: var(--px-12);
    right: 0;
    justify-content: flex-end;
}

    .expand-bill-view #rule-menu {
        flex: 1;
        width: 100%;
        text-align: end;
        position: absolute;
        padding: 0 var(--px-12);
        font: italic normal 600 var(--s-16);
        bottom: calc(-1 * var(--px-24));
    }

#append-card-order {
    background: unset;
    height: inherit;
    font: normal normal 600 var(--s-18);
    width: var(--px-340);
    overflow: unset;
    background: var(--bs-main);
    border-radius: var(--px-8);
    padding: 0 var(--px-16);
    display: flex;
    gap: var(--px-8);
    justify-content: space-between;
}

    #append-card-order .qty-card {
        background: var(--bs-green);
        height: var(--px-32);
        width: var(--px-32);
        font-size: var(--px-20);
        top: calc(-1 * var(--px-10));
        right: calc(-1 * var(--px-10));
        border: 4px solid var(--bg-solid);
    }

#modalListOrder {
    overflow: unset;
    max-width: var(--px-440);
}

    #modalListOrder .modal-header .current {
        color: var(--bs-gray-500);
    }

        #modalListOrder .modal-header .current span {
            font: normal normal 600 var(--s-18)
        }

    #modalListOrder .box-order {
        width: 100%;
        color: var(--bs-main-200);
        display: flex;
        grid-gap: var(--px-14) 0;
        border-color: var(--bs-gray-800);
        padding: 0 var(--px-16);
        cursor: pointer;
        align-items: center;
        position: relative;
        height: auto;
    }

        #modalListOrder .box-order:hover {
            background: var(--bs-gray-900);
        }

        #modalListOrder .box-order.open-note note {
            display: block;
        }

        #modalListOrder .box-order:not(.open-note) note {
            display: none;
        }

        #modalListOrder .box-order.text-bold {
            color: white;
        }

    #modalListOrder .form-select-table {
        display: flex;
        flex-direction: column;
        background: var(--bg-light);
        padding-top: 0;
        padding: 0;
        overflow-x: hidden;
        flex: 1;
    }

    #modalListOrder .box-order.header {
        padding: var(--px-16);
        position: sticky;
        top: -2px;
        left: 0;
        gap: var(--px-12);
        z-index: 2;
        color: var(--txt-light);
        background: var(--bs-gray-900);
        font-size: var(--px-14);
        width: 100%;
        max-height: var(--px-44);
    }

        #modalListOrder .box-order.header strong.grid-12 {
            flex: 1;
        }

    #modalListOrder .box-order .img-ord {
        display: flex;
        align-items: center;
        gap: var(--px-8);
        font: normal normal 500 var(--s-12);
        z-index: 1;
        height: 100%;
        flex: 1;
    }

    #modalListOrder .box-order .box-left {
        border: 1px solid var(--bs-gray-700);
        min-width: var(--px-32);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: var(--px-8);
        position: relative;
        z-index: 1;
        background: var(--bg-light);
        height: var(--px-40);
        min-width: var(--px-40);
        border-radius: var(--px-8);
    }

    #modalListOrder .box-order .img-ord img {
        height: var(--px-40);
        width: var(--px-40);
        border-radius: var(--px-8);
        background: var(--bs-main-o);
        border: 1px solid var(--bs-gray-700);
    }

    #modalListOrder .box-order .img-ord amount {
        font: normal normal 500 var(--s-14);
        color: var(--txt-light);
        text-align: start;
    }

    #modalListOrder .box-order input.qty {
        height: var(--px-20);
        text-align: center;
        width: var(--px-20);
        pointer-events: none;
        color: var(--bs-teal);
        background: #003525;
        border-radius: var(--px-12);
        border: 1px solid;
        font: normal normal 600 var(--s-14);
    }

    #modalListOrder .box-order amount {
        text-align: end;
        font: normal normal 500 var(--s-14);
    }

    #modalListOrder .box-order.text-warning {
        z-index: 1;
        /* pointer-events: none; */
    }

    #modalListOrder .box-order button.delete {
        margin-left: auto;
        min-width: var(--px-36);
        height: var(--px-36);
        pointer-events: all;
        max-width: var(--px-36);
        font-size: var(--px-14);
        border-radius: var(--px-12);
        border-color: var(--bs-main);
    }

    #modalListOrder .box-order button.done-service.done {
        border-color: transparent;
        pointer-events: none;
        min-width: unset;
    }

    #modalListOrder .box-order button.done-service.disable {
        opacity: 1;
        pointer-events: none;
        font-size: var(--px-28);
        border-color: transparent;
        min-width: var(--px-40);
    }

    #modalListOrder .box-order:not(.item-combo, .header)::before {
        position: absolute;
        content: '';
        top: -5px;
        width: 100%;
        height: 1px;
        left: 0;
        /*background: var(--bs-gray-800);*/
    }

    #modalListOrder .info-amount {
        height: var(--px-24);
        padding-top: var(--px-8);
        align-items: center;
        font: normal normal 500 var(--s-14);
        justify-content: space-between;
        width: 100%;
        display: flex;
        color: var(--bs-gray-500);
    }

        #modalListOrder .info-amount .add-cash {
            display: flex;
            gap: var(--px-8);
            align-items: center;
        }

        #modalListOrder .info-amount.total-due {
            padding-top: var(--px-8);
            color: var(--bs-gray-100);
            border-top: 1px dashed var(--bs-gray-700);
            font: normal normal 600 var(--s-16);
        }

        #modalListOrder .info-amount.sub-amount {
            padding-top: var(--px-8);
            border-top: 1px solid var(--bs-gray-700);
        }

    #modalListOrder textarea {
        border: 0;
        width: 100%;
        height: var(--px-40);
        background: var(--bg-light);
        border-radius: var(--px-8);
        padding: var(--px-12);
        color: var( --txt-light);
        font: normal normal 500 var(--s-14);
    }

.lobby-setting {
    width: 100vw;
    display: flex;
    overflow: hidden;
    gap: var(--px-12);
    grid-column: span 2;
    flex-direction: column;
    color: var(--txt-light);
}

    .lobby-setting .append-all-lobby {
        display: flex;
        gap: var(--px-24);
    }

    .lobby-setting .append-all-lobby {
        width: 100%;
        height: 100%;
        display: grid;
        gap: var(--px-24);
        grid-template-columns: repeat(auto-fit, minmax(var(--px-200), 1fr));
        align-items: start;
        grid-auto-rows: min-content;
    }

        .lobby-setting .append-all-lobby .outlet.hover {
            flex-direction: row;
            background: var(--bs-gray-800);
            border-radius: var(--px-12);
            padding: var(--px-16) var(--px-24);
        }

div.form-upload-image.circle {
    margin: auto;
    width: var(--px-320);
    height: var(--px-320);
    border-radius: var(--px-320);
}


.popup-container {
    display: flex;
    z-index: 11111111;
    overflow: auto;
    max-height: 98vh;
    border-radius: 4px;
    box-shadow: var(--shadow);
    transform: translate(2px, -2px);
    background: var(--bg-light);
    opacity: 1 !important;
}

    .popup-container.overflow-none {
        overflow: unset;
    }

    .popup-container.box-shadow {
        box-shadow: 0px 0px 26px 0px rgba(60,64,67,0.3),0px 9px 28px 6px rgba(60,64,67,0.15)
    }

    .popup-container.visible {
        overflow: visible;
    }

    .popup-container.top-bar {
        top: var(--px-60) !important;
    }

    .popup-container.adjust-calendar {
        top: var(--px-60) !important;
        transform: translateX(-32px);
    }

    .popup-container.option-book-or-block {
        transform: translate(0, calc(-50% + var(--height-row) / 2));
    }

    .popup-container.fit-center {
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%);
        border: 2px solid var(--bs-gray);
        box-shadow: 0px 0px 26px 0px rgba(60,64,67,0.3),0px 9px 28px 6px rgba(60,64,67,0.15)
    }

    .popup-container.fit-right {
        width: calc(((100% / 3 * 2) - var(--px-228)) + var(--px-55));
        bottom: var( --px-100);
        top: var(--px-180) !important;
        !i;
        !;
        left: unset !important;
        right: var(--px-20) !important;
        border: 2px solid var( --bs-gray);
        height: calc(100% - var( --px-185));
        box-shadow: 0px 0px 26px 0px rgba(60,64,67,0.3),0px 9px 28px 6px rgba(60,64,67,0.15);
        border-radius: var(--px-40);
        /* background: white; */
    }

    .popup-container.fit-center-modal {
        z-index: 2000000;
        width: var(--px-710);
        height: calc(100% - var(--px-190));
        bottom: var(--px-100);
        left: 50% !important;
        max-height: var(--px-640);
        top: unset !important;
        right: unset !important;
        transform: translateX(-50%) !important;
        border: 2px solid var(--bs-gray);
        box-shadow: 0px 0px 26px 0px rgba(60,64,67,0.3),0px 9px 28px 6px rgba(60,64,67,0.15)
    }

        .popup-container.fit-center-modal.large {
            width: 75vw;
        }

        .popup-container.fit-center-modal.combo {
            max-height: 100%;
        }

.add-guest-note {
    display: flex;
    gap: var(--px-24);
    padding: var(--px-16);
    flex-direction: column;
    color: var(--txt-light);
    min-width: var(--px-500);
}

    .add-guest-note .h4 {
        color: var(--white-64);
    }

    .add-guest-note textarea {
        height: var(--px-80);
        border-radius: var(--px-8);
    }

    .add-guest-note .btn-continue-order {
        width: var(--px-200);
        align-items: center;
        justify-content: space-between;
    }

.adj-qty-item i {
    font-size: var(--px-24);
    color: black;
    );
}

.adj-qty-item .fa-plus {
    color: black;
}

#append-info-table-header {
    display: grid;
    z-index: 100;
    grid-gap: var(--px-12);
    color: var(--txt-light);
    background: var(--bs-gradient);
    padding: var(--px-16) var(--px-24);
    grid-template-columns: 1fr 1fr max-content;
}

    #append-info-table-header .row-header {
        height: 100%;
        display: flex;
        gap: var(--px-8);
        position: relative;
        align-items: center;
        flex-direction: column;
        justify-content: flex-start;
        text-align: center;
    }

        #append-info-table-header .row-header.more-option {
            flex-direction: row;
            width: 100%;
        }

        #append-info-table-header .row-header span {
            display: flex;
            flex-direction: column;
            font: normal normal 600 var(--s-17);
            gap: var(--px-6);
        }

        #append-info-table-header .row-header strong {
            color: var(--bs-main);
            flex: 1;
            display: flex;
            align-items: center;
        }

        #append-info-table-header .row-header.grid-2 {
            display: flex;
        }

        #append-info-table-header .row-header.btn-update-table-info span {
            width: 100%;
        }

.note-ticket {
    color: var(--bs-white);
    font: normal normal 600 var(--s-14);
    margin: var(--px-8) 0;
}

    .note-ticket note {
        display: flex;
        padding: var(--px-12);
        background: var(--bs-gray-900);
        border-radius: var(--px-12);
        font: normal normal 400 var(--s-12);
    }

button.btn-view-more-service {
    bottom: -2px;
    position: absolute;
    left: 0;
    background: var( --bg-light);
    font-size: var(--px-24);
    font-weight: 300;
    min-width: var(--px-60);
    padding: 0;
    border-radius: 0 var(--px-22) 0 0;
    height: var(--px-48);
}

button.btn-add-note {
    display: none;
}

.popup-container button.btn-add-note {
    color: black;
    display: flex;
    position: absolute;
    left: var(--px-24);
    background: unset;
    font-size: var(--px-20);
}

    .popup-container button.btn-add-note.noted {
        color: var(--bs-main);
    }

        .popup-container button.btn-add-note.noted i::before {
            content: '\e1d9';
        }

.popup-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

    .popup-content .service-name {
        display: flex;
        flex-direction: column;
        flex: 1;
        width: 100%;
        justify-content: flex-start;
        border: 0;
        border-radius: 0;
    }

        .popup-content .service-name .flex-img {
            overflow: hidden;
            max-width: unset;
        }

        .popup-content .service-name .btn-view-more-service {
            display: none;
        }

        .popup-content .service-name .wrap-line-2 {
            -webkit-line-clamp: 2;
            display: block !important;
        }

        .popup-content .service-name note {
            display: -webkit-box;
        }

        .popup-content .service-name .info-service {
            flex: 1;
            overflow: hidden;
            display: flex;
            max-height: var(--px-68);
            padding: var(--px-4) var(--px-24);
        }

            .popup-content .service-name .info-service .serv-name {
                flex: 1;
            }

.show-on-phone.expandPlace:not(.expand) .fa-arrows-to-dotted-line,
.show-on-phone.expandPlace.expand .fa-arrows-from-dotted-line {
    display: none;
}

.selectCountry {
    width: 500px !important;
}

.selectDefaultCountry {
    width: 500px !important;
}

.selectCountry_span {
    color: white;
    font-weight: bold;
}

#overlay {
    position: fixed;
    top: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
    display: none;
    background: rgba(0,0,0,0.6);
}

.cv-spinner {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px #ddd solid;
    border-top: 4px #2e93e6 solid;
    border-radius: 50%;
    animation: sp-anime 0.8s infinite linear;
}

@keyframes sp-anime {
    100% {
        transform: rotate(360deg);
    }
}

.is-hide {
    display: none;
}

.language-selection {
    width: 120px !important;
}

    .language-selection .btn-info {
        background-color: var(--bg-light);
        color: var(--txt-light);
        border-color: var(--bs-gray-700);
        border-radius: var(--px-18);
    }

#append-header-lobby-id timer {
    display: flex;
    gap: var(--px-6);
    align-items: center;
    width: var(--px-120);
    font: italic normal 500 var(--s-15);
}

    #append-header-lobby-id timer i {
        color: var(--bs-yellow);
    }

.tap-to-zoom {
    color: white;
    display: flex;
    gap: var(--px-8);
    align-items: center;
    font: normal normal 500 var(--s-12);
}

h3.outlet-name {
    color: WHITE;
    text-align: center;
    margin: var(--px-26) 0;
}

.img-service.noImage {
    height: var(--px-80);
    border-radius: 100%;
    width: var(--px-80);
}

#modalListOrder .box-order dur {
    color: var(--bs-gray-600);
    font: normal normal 400 var(--s-12);
}

    #modalListOrder .box-order dur i {
        color: var(--bs-gray-600);
    }

    #modalListOrder .box-order dur.count-down {
        color: var(--bs-main);
    }

    #modalListOrder .box-order dur.count-up {
        color: var(--bs-cyan);
    }

#icon-logo-refresh {
    margin-top: -30px;
    margin-right: -60px;
    cursor: pointer;
}

img:not(#zoomableImage) {
    pointer-events: none;
}

textarea {
    flex-shrink: 0;
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
}

#append-info-order-guest {
    display: flex;
    visibility: visible !important;
    flex-direction: column;
    grid-gap: var(--px-32);
    background: var(--bs-gradient);
    padding: var(--px-16) var(--px-16) 0;
}

    #append-info-order-guest.update-table {
        margin-top: var(--px-24);
        padding: var(--px-16) var(--px-16) 0;
    }

.open-note-item {
    z-index: 20;
    gap: 1px;
    pointer-events: all;
    height: var(--px-18);
    min-width: var(--px-24);
    max-width: var(--px-24);
    font-size: var( --px-12);
    background: unset;
    color: var( --bs-main);
    pointer-events: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: start;
    border-radius: 0;
}

    .open-note-item i {
        font-size: var( --px-10);
        color: var(--bs-gray-500);
    }

footer.footer {
    width: fit-content;
    display: flex;
    gap: var(--px-12);
    align-items: center;
    color: var(--txt-light);
    justify-content: center;
    padding: var(--px-12);
    background: transparent;
    position: absolute;
    bottom: 0;
    z-index: 10;
    left: 50%;
    height: var(--px-40);
    font: normal normal 500 var(--s-14);
    transform: translateX(-50%);
}

    footer.footer img {
        height: var(--px-24);
    }

.popup-container textarea {
    flex: 1;
    border: 0;
    background: var(--bg-solid);
    border-radius: var(--px-8);
    padding: var(--px-12);
    color: var(--txt-light);
    font: normal normal 500 var(--s-14);
    max-height: var(--px-400);
}

    .popup-container textarea.add-items {
        /* max-width: 50%; */
    }

.popup-content .service-name .adj-qty-item > * {
    display: flex !important;
}

.suggess-guest {
    width: 100%;
    display: grid;
    grid-gap: var(--px-18);
    grid-template-columns: repeat(6, var(--px-48)) var(--px-88);
}

    .suggess-guest .select-guest-btn {
        display: flex;
        height: var(--px-48);
        min-width: var(--px-48);
        max-width: var(--px-48);
        align-items: center;
        justify-content: center;
        border-radius: var(--px-8);
        background: unset;
        border: 1px solid var(--bs-gray-700);
        font: normal normal 600 var(--s-20);
        color: var(--bs-gray-400);
    }

        .suggess-guest .select-guest-btn.active {
            color: var(--bs-main);
            border: 2px solid var(--bs-main);
        }

.adj-qty-item span.dis-qty-selected {
    height: var(--px-28);
    width: var(--px-28);
    border-radius: var(--px-28);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid black;
    color: black;
}

.popup-content .service-name span.dis-qty-selected {
    background: unset;
}

.dropdown.bill-setting {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    border-radius: 100%;
    padding: var(--px-8);
    font-size: var(--px-28);
    color: var(--bs-gray-600);
    max-width: var(--px-40);
}

.dropdown-menu.bill.show {
    width: var(--px-260);
}

button.setting {
    width: 88%;
    border: none;
    display: flex;
    align-items: center;
    height: var(--px-50);
    font: normal normal 400 var(--s-16);
    justify-content: flex-start;
    border-radius: 0 var(--px-20) var(--px-20) 0;
    border-left: 4px solid transparent;
}

    button.setting:hover {
        color: var(--bg-solid);
        background: var(--bs-main-100);
        border-left: 3px solid var(--bs-main);
    }

.table {
    color: var(--txt-light);
    font: normal normal 400 var(--s-16);
}

    .table > :not(caption) > * > * {
        vertical-align: middle;
        padding: var(--px-12) var(--px-24);
        background-color: var(--bg-light);
        border-bottom-width: 1px;
        box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
    }

    .table .min-w-200 {
        min-width: var(--px-200);
    }

strong.dropdown-toggle {
    cursor: pointer;
}

    strong.dropdown-toggle:hover {
        opacity: .4;
    }

.table th[scope="col"] {
    white-space: nowrap;
}

.select-guest-or-staff {
    display: flex;
    gap: var(--px-32);
    flex-direction: column;
    font: normal normal 700 var(--s-24);
    min-width: var(--px-500);
    /* height: var(--px-400); */
    max-height: var(--px-600);
    padding: var(--px-24);
    color: var(--txt-light);
    justify-content: space-between;
    box-shadow: var(--shadow-qs-solid);
}

    .select-guest-or-staff .header-g-s {
        display: flex;
        gap: var(--px-6);
        flex-direction: column;
    }

        .select-guest-or-staff .header-g-s span {
            color: var(--bs-gray-600);
            font: normal normal 400 var(--s-16);
        }

    .select-guest-or-staff .group-g-s {
        flex: 1;
        width: 100%;
        display: flex;
        gap: var(--px-12);
        flex-wrap: wrap;
        align-content: flex-start;
    }

    .select-guest-or-staff .select-g-s {
        flex: 1;
        margin: auto;
        height: var(--px-200);
        background: var(--bg-light);
        border: 2px solid var(--bs-gray-700);
        border-radius: var(--px-12);
        display: flex;
        flex-direction: column;
        align-items: center;
        font: normal normal 500 var(--s-22);
        justify-content: center;
        gap: var(--px-24);
        min-width: var(--px-200);
    }

        .select-guest-or-staff .select-g-s i.fa-user {
            color: var(--bs-green);
        }

.select-items-popup {
    display: flex;
    gap: var(--px-12);
    align-items: center;
    padding: var(--px-8) var(--px-24);
    justify-content: end;
    background: white;
}

    .select-items-popup button {
        color: white;
    }

button.close-popover-ct {
    position: absolute;
    right: var(--px-24);
    min-width: var(--px-40);
    border: unset;
    border-radius: 100%;
    background: var(--bs-gray-800);
    color: var(--txt-light);
    max-height: var(--px-40);
    width: var(--px-40);
}

    button.close-popover-ct i {
        color: var(--txt-light);
    }

.popup-content .position-bottom-left {
    position: absolute;
    left: var(--px-16);
    bottom: var(--px-16);
}

.popup-content .info-service .w-100 {
    width: auto !important;
}

.info-service .serv-name {
    flex: 1;
    color: black;
}

    .info-service .serv-name.setting {
        width: 80%;
    }

#loadingButton {
    display: none;
    position: absolute;
    top: var(--px-90);
    z-index: 1;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    transition: top 0.3s ease;
}

    #loadingButton i {
        font-size: var(--px-32);
    }

.badge-wrapper {
    position: relative;
}

.select-notification {
    display: flex;
    gap: var(--px-12);
    flex-direction: column;
    font: normal normal 700 var(--s-24);
    min-width: var(--px-500);
    height: var(--px-400);
    padding: var(--px-24);
    color: var(--txt-light);
    box-shadow: var(--shadow-qs-solid);
}

.badge {
}

.notification-list-item {
    padding: 5px 25px;
    border-bottom: 1px solid #e3e3e3;
    cursor: pointer;
}

    .notification-list-item .item-footer {
        display: flex;
        justify-content: space-between;
    }

    .notification-list-item .item-footer2 {
        display: flex;
        justify-content: space-between;
    }

        .notification-list-item .item-footer2 p {
            /* max-width: 80%; */
        }

    .notification-list-item .item-footer .from {
        color: var(--bs-main);
        max-width: 70%;
    }

    .notification-list-item .item-footer .date {
        font-size: 15px;
        font-weight: 400;
    }

    .notification-list-item .message {
        font-size: 15px;
        font-weight: 400;
    }

.group-btn-switch-setting {
    display: flex;
    align-items: center;
    gap: var(--px-12);
    width: max-content;
    border-radius: var(--px-12);
    background: var(--bs-gray-900);
    justify-content: flex-start;
}

    .group-btn-switch-setting button {
        border: 0 !important;
        justify-content: center;
        opacity: .6;
        height: var(--px-40);
        min-width: var(--px-200);
    }

    .group-btn-switch-setting.change-guestno {
        width: 100%;
        border-radius: 0;
        position: relative;
        background: unset;
        left: calc(-1* var(--px-8));
        /* background: #000000a6; */
        /* width: calc(100% + var(--px-8)); */
        min-height: var(--px-48);
        overflow: auto hidden;
    }

    .group-btn-switch-setting button.active {
        opacity: 1;
        background: unset;
        border-radius: 0;
    }

        .group-btn-switch-setting button.active::after {
            position: absolute;
            content: '';
            bottom: -2px;
            height: 4px;
            width: 80%;
            left: 50%;
            border-radius: 100%;
            background: var(--bs-main);
            transform: translateX(-50%);
        }

    .group-btn-switch-setting button:hover {
        background: unset;
        border-radius: 0;
        opacity: 1;
        color: white;
    }

        .group-btn-switch-setting button:hover span {
            color: var(--txt-light);
        }

button.dropdown-toggle {
    border: 1px solid var(--bs-gray-800);
    border-radius: var(--px-24);
    color: var(--txt-light);
    display: flex;
    gap: var(--px-8);
    padding: 0 var(--px-16);
    align-items: center;
    font: normal normal 500 var(--s-14);
    background: var(--bg-light);
}

.dropdown-menu .drop-btn {
    border: 0;
    border-radius: 0;
    color: var(--txt-light);
    display: flex;
    gap: var(--px-12);
    padding: 0 var(--px-16);
    align-items: center;
    min-width: max-content;
    font: normal normal 500 var(--s-14);
}

.pos-top-right {
    top: calc((var(--px-68) / 2) - (var(--px-48) / 2));
    right: var(--px-12);
    position: absolute;
}

.dropdown-menu-cate {
    display: flex;
    align-items: center;
    position: absolute;
    right: 0;
}

    .dropdown-menu-cate button {
        color: var(--txt-light) !important;
    }

.other-setting {
    width: 100%;
    height: 100%;
    display: flex;
    grid-column: span 2;
    flex-direction: column;
}

    .other-setting .body-setting-lang {
        display: flex;
        flex-direction: column;
        gap: var(--px-44);
        background: var(--bg-light);
        margin: var(--px-24);
        border-radius: var(--px-16);
        padding: var(--px-24);
    }

    .other-setting .footer-setting-lang {
        display: flex;
        gap: var(--px-24);
        border-radius: var(--px-16);
        padding: var(--px-24);
        justify-content: flex-end;
    }

    .select-current-setting-lang {
        display: flex;
        gap: var(--px-24);
        flex-direction: column;
    }

    .select-more-lang {
        display: flex;
        gap: var(--px-24);
        flex-direction: column;
    }

    .other-setting span.selectCountry_span {
        font: normal normal 600 var(--s-20);
    }

    .other-setting #selectDefaultCountry {
        font: normal normal 600 var(--s-20);
    }

    .other-setting #selectCountry {
    }

    .other-setting .footer-setting-lang button {
        color: var(--txt-light);
        background: var(--bg-light);
        display: flex;
        align-items: center;
        gap: var(--px-16);
        border-radius: var(--px-24);
        padding: 0 var(--px-24);
        width: var(--px-240);
    }

        .other-setting .footer-setting-lang button.btn-clear-trans {
            color: var(--red);
        }

    .other-setting .dropdown.bootstrap-select {
    }

    .other-setting .dropdown-menu.show {
        padding: var(--px-16);
        display: flex;
        gap: var(--px-12);
        flex-direction: column;
        min-width: var(--px-500);
        max-width: var(--px-500);
    }

    .other-setting .bs-actionsbox {
        padding: 0 !important;
        margin: 0 var(--px-8);
        border-radius: var(--px-24);
        background: unset;
        width: -webkit-fill-available;
    }

    .other-setting .btn-group.btn-group-sm {
        display: flex;
        gap: var(--px-12);
        align-items: center;
    }

    .other-setting .bs-actionsbox .actions-btn.btn-light {
        border: 0;
        display: flex;
        background: unset;
        align-items: center;
        color: var(--txt-light);
        border-radius: var(--px-24);
        background: var(--bg-light);
    }

    .other-setting .bootstrap-select .no-results {
        width: calc(100% - var(--px-40));
        background: var(--bg-light);
        border-radius: var(--px-8);
        padding: var(--px-16) var(--px-24);
        color: var(--txt-light);
        white-space: nowrap;
    }

    .other-setting .bootstrap-select > .dropdown-toggle {
        background: unset !important;
    }

.bootstrap-select .dropdown-toggle .filter-option {
    display: flex;
    align-items: center;
}

.form-control {
    border: 0;
    height: var(--px-48);
    border-radius: var(--px-24);
    background: var(--bg-light);
    padding: var(--px-16) var(--px-24);
}

    .form-control:focus {
        outline: 0;
        color: var(--txt-light);
        background: var(--bg-light);
        border: 1px solid var(--bs-main);
        box-shadow: unset;
    }

.modal-select-guest {
    z-index: 101;
    display: flex;
    top: calc(var(--px-150) + var(--px-8));
    position: absolute;
    flex-direction: column;
    background: var( --bg-solid);
    left: calc(-1 * var( --px-68));
    border-radius: var( --px-12) 0 0 var(--px-12);
    box-shadow: var( --shadow);
    border: 1px solid var( --bs-gray-700);
    border-right: 0;
    width: var( --px-68);
    overflow: auto;
    max-height: var( --px-500);
    padding: var( --px-16) 0;
}

    .modal-select-guest .btn-select-guest {
        background: unset;
        border-radius: 0;
        justify-content: center;
        color: var(--bs-gray-500);
        min-height: var(--px-48);
        min-width: unset;
        padding: 0;
        font-size: var(--px-16);
    }

        .modal-select-guest .btn-select-guest.title-g {
            background: var(--bs-gradient);
            color: var(--bs-gray-200);
        }

        .modal-select-guest .btn-select-guest.total-g {
            position: sticky;
            flex-direction: row-reverse;
            justify-content: center;
            top: 0;
            z-index: 1;
            background: var(--bg-solid);
        }

        .modal-select-guest .btn-select-guest.add-guest {
            z-index: 1;
            bottom: 0;
            position: sticky;
            flex-direction: row;
            margin: 0 var(--px-8);
            color: var(--bs-main);
            justify-content: flex-start;
            background: var(--bg-solid);
            border-top: 1px solid var(--bs-gray-700);
        }

        .modal-select-guest .btn-select-guest.active {
            color: var(--bs-white);
            position: relative;
            background: var(--bs-gray-900);
        }

            .modal-select-guest .btn-select-guest.active::after {
                content: '';
                position: absolute;
                height: 80%;
                width: 4px;
                left: 0px;
                border-radius: 0 4px 4px 0;
                background: var(--bs-main);
            }

        .modal-select-guest .btn-select-guest:not(.total-g) i {
            font-size: var(--px-16);
            color: var(--bs-main);
        }

        .modal-select-guest .btn-select-guest i.fa-trash-can {
            cursor: pointer;
            width: var(--px-40);
            height: var(--px-40);
            border-radius: var(--px-8);
            background: unset;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--bs-gray-600);
        }

            .modal-select-guest .btn-select-guest i.fa-trash-can:hover {
                background: var(--bs-main);
                color: var(--bs-white);
            }

#append-info-table-header .row-header strong.btn-update-table-info {
    border: 2px solid var(--bs-gray-600);
    min-width: var(--px-40);
    border-radius: var(--px-40);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    min-height: var(--px-40);
    max-height: var(--px-40);
    position: relative;
    width: auto;
    padding: 0 var(--px-8);
}

    #append-info-table-header .row-header strong.btn-update-table-info i {
        position: absolute;
        width: var(--px-20);
        height: var(--px-20);
        border-radius: var(--px-20);
        right: calc(var(--px-12)* -1);
        bottom: calc(var(--px-8)* -1);
        outline: 5px solid var(--bg-light);
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--bs-gray-800);
        font-size: var(--px-12);
        color: var(--txt-light);
    }

.info-bill-summary {
    width: 100%;
    margin: 0;
    display: grid;
    position: relative;
    gap: var(--px-4);
    grid-template-columns: 1fr;
    grid-gap: var(--px-8);
    padding: 0 0 var(--px-12);
    flex: 1;
    max-height: max-content;
}

p#rule-cart {
    color: var(--bs-gray-500);
    font: italic normal 400 var(--s-12);
}

.collapse-info-bill {
    background: unset;
    color: var(--bs-main);
    margin: auto;
}

.add-guest-note.update-table {
    gap: var(--px-24);
}

.add-guest-note .table-area {
    padding: var(--px-12);
    background: var(--bg-solid);
    border-radius: var(--px-16);
}

    .add-guest-note .table-area button {
        /* background: unset; */
        /* opacity: .5; */
    }

        .add-guest-note .table-area button.active {
            /* opacity: 1; */
            /* color: var(--bs-white); */
            /* border-color: var(--bs-main); */
        }

.add-guest-note .place-order-table {
    max-width: var(--px-500);
    justify-content: start;
    min-height: var(--px-200);
    max-height: var(--px-200);
    overflow: auto hidden;
}

.add-guest-note label {
    font: normal normal 500 var(--s-20);
}

.add-guest-note .order-table.change-table {
    background: var(--bs-gray-900);
    border: 2px solid transparent;
    cursor: pointer;
}

    .add-guest-note .order-table.change-table:hover {
        border: 2px solid var(--bs-main)
    }

    .add-guest-note .order-table.change-table.active {
        border: 2px solid var(--bs-main);
    }

.setting-content-append {
    display: flex;
    overflow: auto;
    gap: var(--px-24);
    flex-direction: column;
    padding: var(--px-24);
    grid-column: span 2;
    width: 100vw;
}

.setting-group {
    width: 70%;
    margin: auto;
    display: grid;
    grid-gap: var(--px-16);
    grid-template-columns: repeat(2, 1fr);
}

    .setting-group .title-group {
        color: var(--txt-light);
        grid-column: span 3;
        font: normal normal 600 var(--s-24);
    }

    .setting-group .box--setting {
        cursor: pointer;
        display: flex;
        gap: var(--px-12);
        height: var(--px-160);
        flex-direction: column;
        padding: var(--px-24);
        border-radius: var(--px-8);
        justify-content: flex-start;
        background: var(--bs-gray-900);
        border: 1px solid var(--bs-gray-800);
    }

        .setting-group .box--setting:hover {
            opacity: 0.6;
        }

        .setting-group .box--setting i {
            flex: 1;
            font-size: var(--px-24);
            color: var(--bs-main);
        }

        .setting-group .box--setting p {
            color: var(--txt-light);
            font: normal normal 600 var(--s-20);
        }

        .setting-group .box--setting span {
            flex: 1;
            color: var(--bs-gray-600);
            font: normal normal 400 var(--s-14);
        }

.header-setting-page-config {
    display: flex;
    gap: var(--px-20);
}

    .header-setting-page-config .back-main-setting {
        padding: 0;
        min-width: unset;
        width: var(--px-48);
        background: unset;
        font-size: var(--px-20);
        border: 1px solid var(--bs-gray-800);
        margin-top: var(--px-4);
        border-radius: var(--px-48);
    }

    .header-setting-page-config .title-and-desc {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
        gap: 2px;
    }

        .header-setting-page-config .title-and-desc[tab="menu"] {
        }

        .header-setting-page-config .title-and-desc span {
            color: var(--bs-gray-600);
        }

.print-qrcode-page {
    width: 100%;
    display: flex;
    gap: var(--px-24);
    grid-column: span 2;
    padding: var(--px-24);
    flex-direction: column;
    overflow: hidden;
}

    .print-qrcode-page .table-area {
        width: 100%;
        background: var(--bg-light);
        padding: var(--px-8);
        border-radius: var(--px-16);
    }

.table-map-qrcode-generate {
    width: 100%;
    height: 100%;
    display: flex;
    gap: var(--px-50);
    padding: var(--px-24) var(--px-16);
    justify-items: center;
    overflow: auto;
    align-content: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
}

    .table-map-qrcode-generate .box--table {
    }

    .table-map-qrcode-generate .box--table {
        display: flex;
        flex-direction: column;
        color: var(--txt-light);
        position: relative;
        height: var(--px-160);
        width: var(--px-160);
    }

        .table-map-qrcode-generate .box--table circle {
            left: 50%;
            z-index: 1;
            position: absolute;
            font-size: var(--px-32);
            top: calc(-1 * var(--px-16));
            transform: translateX(-50%);
            color: #ffffff9e;
            border-radius: 100%;
        }

            .table-map-qrcode-generate .box--table circle.chair-2 {
                left: unset;
                right: calc(-1 * var(--px-16));
                top: 50%;
                transform: translateY(-50%);
            }

            .table-map-qrcode-generate .box--table circle.chair-3 {
                top: unset;
                bottom: calc(-1 * var(--px-16));
            }

            .table-map-qrcode-generate .box--table circle.chair-4 {
                right: unset;
                left: calc(-1 * var(--px-16));
                top: 50%;
                transform: translateY(-50%);
            }

        .table-map-qrcode-generate .box--table .table-detail {
            z-index: 2;
            height: 100%;
            display: flex;
            gap: var(--px-6);
            flex-direction: row;
            backdrop-filter: blur(4px);
            background: #ffffff3d;
            border-radius: var(--px-12);
            border-left-color: var(--bs-main-400);
            border-width: 0 0 0 4px;
            border-style: solid;
            padding: var(--px-10);
        }

    .table-map-qrcode-generate span.table-code {
        height: var(--px-36);
        min-width: var(--px-36);
        color: var( --bs-main-500);
        text-transform: uppercase;
        font: normal normal 700 var( --s-16);
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--bs-gray-dark);
        border-radius: 100%;
    }

    .table-map-qrcode-generate .print-qrcode-table {
        height: var(--px-32);
        color: var(--txt-dark);
        background: var(--bs-body-bg);
        font-weight: 600;
        box-shadow: var(--shadow-qs-solid);
        justify-content: space-between;
        flex-direction: row-reverse;
        min-width: unset;
    }

        .table-map-qrcode-generate .print-qrcode-table .fa-qrcode {
            font-size: var(--px-18);
            color: var(--bs-teal);
        }

.scan-qr-code-detail {
    display: flex;
    text-align: center;
    gap: var(--px-36);
    width: var(--px-500);
    flex-direction: column;
    padding: var(--px-24);
}

    .scan-qr-code-detail .illutration-qr {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 100%;
        margin: auto;
    }

        .scan-qr-code-detail .illutration-qr img {
            width: var(--px-140);
            height: var(--px-140);
        }

    .scan-qr-code-detail .title-scan {
        color: var(--txt-light);
        font: normal normal 600 var(--s-28)
    }

        .scan-qr-code-detail .title-scan span {
            color: var(--bs-gray-600);
            font: normal normal 500 var(--s-20);
        }

    .scan-qr-code-detail #qr-code-portal-link {
        display: flex;
        margin: auto;
        background: var(--bs-white);
        padding: var(--px-24) 0;
        border: 1px solid var(--bs-gray-800);
        border-radius: var(--px-24);
        align-items: center;
        justify-content: center;
    }

    .scan-qr-code-detail .view-qrcode-table {
        justify-content: space-between;
    }

.container-append-service {
    height: 100%;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    grid-column: span 2;
    background-image: url(/Images/black-backgr.jpg);
    background-size: cover;
    padding-left: var(--px-228);
    padding-bottom: var(--px-40);
}

.chkbx-setting-desc {
    display: flex;
    gap: var(--px-4);
    flex-direction: column;
}

    .chkbx-setting-desc span {
        color: var(--bs-gray-700);
        font: italic normal 500 var(--s-14);
    }

.modal-body div.option.select-radio {
    gap: var(--px-12);
    height: auto;
    margin: var(--px-16) 0;
}

.info-basic-table {
    display: flex;
    gap: var(--px-8);
    align-items: center;
    text-align: center;
    flex-direction: column;
    justify-content: center;
}

.area-print-and-lobby {
    display: flex;
    gap: var(--px-12);
    align-items: center;
}

#combo-data-table td .productList {
    display: flex;
    gap: var(--px-8);
    flex-wrap: wrap;
}

    #combo-data-table td .productList .badge {
        position: relative !important;
        background-color: var(--bg-light);
        padding: var(--px-8);
        color: var(--txt-light);
        font: normal normal 500 var(--s-14);
    }

#comboDetails .saveButton {
    background: var(--green);
}

#combo-data-table .select2-container {
    width: 100% !important;
}

#combo-data-table .select2-selection {
    width: 100% !important;
}

#combo-data-table .select2-container--default .select2-selection--multiple {
    background-color: var(--bg-light);
    color: #ffffff;
    padding: var(--px-12);
    border: 0;
}

    #combo-data-table .select2-container--default .select2-selection--multiple .select2-selection__choice {
        background-color: var(--bs-main-900);
        padding: var(--px-8);
        color: var(--bs-main-200);
        font: normal normal 500 var(--s-14);
        overflow: inherit;
        border: 0;
        width: 96%;
    }

    #combo-data-table .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
        position: absolute;
        height: var(--px-24);
        width: var(--px-24);
        border-radius: var(--px-24);
        top: -12px;
        right: -12px;
        z-index: 4;
        min-width: var(--px-28);
        left: unset;
        color: var(--bs-white);
        background: var(--bs-gray-700);
        border: 0;
        font-size: var(--px-20);
        outline: 4px solid var(--bg-light);
        font-weight: 200;
    }

#combo-data-table .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #ee6119;
    color: #ffffff;
}

.delete-icon {
    cursor: pointer;
    color: red;
}

.pencil-icon {
    cursor: pointer;
    color: var(--green);
}

.comboModal {
    width: 800px;
}

/* COMBO */
.area-combos-select {
    height: 100%;
    display: flex;
    flex-direction: column;
    color: var(--txt-light);
}

    .area-combos-select .combos-info {
        display: flex;
        align-items: center;
        padding: var(--px-24);
        gap: var(--px-24);
        position: sticky;
        top: 0;
        background: var(--bg-light);
        z-index: 1;
    }


        .area-combos-select .combos-info img {
            height: var(--px-160);
            width: var(--px-160);
            border-radius: var(--px-24);
        }

    .area-combos-select .info-flex {
        height: 100%;
        display: flex;
        flex-direction: column;
        gap: var(--px-12);
    }

        .area-combos-select .info-flex .name {
            color: var(--bs-gray-200);
            font: normal normal 700 var(--s-24);
        }

        .area-combos-select .info-flex .desc {
            flex: 1;
            color: var(--bs-gray-600);
        }

        .area-combos-select .info-flex strong {
            font: normal normal 700 var(--s-28);
            color: var(--bs-teal);
        }

    .area-combos-select .combo-details {
        flex: 1;
        display: flex;
        padding: var(--px-24);
        flex-direction: column;
        gap: var(--px-24);
    }

    .area-combos-select .detail-box {
        display: flex;
        gap: var(--px-20);
        padding-bottom: var(--px-24);
        border-bottom: 1px solid var(--bs-gray-700);
        flex-direction: column;
        background: var(--bs-gray-900);
        padding: var(--px-16) var(--px-24);
        border-radius: var(--px-16);
    }

        .area-combos-select .detail-box:last-of-type {
            border-bottom: 0px solid var(--bs-gray-700);
        }

    .area-combos-select .detail-name {
        flex: 1;
        color: var(--bs-gray-200);
        font: normal normal 700 var(--s-20);
    }

    .area-combos-select .detail-quantity {
        color: var(--bs-teal);
        background: #003525;
        padding: 2px var(--px-12);
        border-radius: var(--px-12);
        display: flex;
        align-items: center;
        gap: var(--px-12);
        justify-content: space-between;
        border: 1px solid;
        font: normal normal 400 var(--s-16);
    }

    .area-combos-select .detail-adjust {
        display: flex;
        align-items: center;
        gap: var(--px-12);
    }

    .area-combos-select .adj-combo {
        background: var(--bg-solid);
        max-width: var(--px-32);
        min-width: var(--px-32);
        height: var(--px-32);
        min-height: var(--px-32);
        color: var(--bs-main);
        font-size: var(--px-16);
    }

        .area-combos-select .adj-combo.minus {
            background: unset;
            color: var(--bs-gray-300);
        }

    .area-combos-select .cate-combos {
        display: flex;
        align-items: center;
        gap: var(--px-24);
    }

    .area-combos-select .cb-group-price-add {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

.select-range-end-date {
    display: flex;
    gap: var(--px-12);
    flex-direction: column;
    background: var(--bg-light);
    border-radius: var(--px-8);
    box-shadow: var(--shadow-qs-solid);
    border: 1px solid var(--bs-gray-700);
    padding: var(--px-16);
    min-width: var(--px-360);
}

    .select-range-end-date .tt-d {
        color: var(--txt-light);
        font: normal normal 500 var(--s-20);
    }

    .select-range-end-date .list-duration-date {
        font: normal normal 500 var(--s-14);
        padding: var(--px-8);
        grid-gap: var(--px-24) var(--px-12);
    }

        .select-range-end-date .list-duration-date button {
            font: normal normal 500 var(--s-14);
            color: var(--txt-light);
            height: var(--px-36);
        }

        .select-range-end-date .list-duration-date input {
            background: var(--bs-dark);
        }

        .select-range-end-date .list-duration-date textarea {
            background: var(--bs-dark);
            min-height: var(--px-80);
        }

        .select-range-end-date .list-duration-date button.confirm {
            background: var(--bs-main);
            color: var(--bs-white);
        }

#modalAddMenu div.form-upload-image {
    margin: auto;
    max-width: var(--px-440);
    min-width: var(--px-440);
}

#comboDetails thead, #comboDetails tbody, #comboDetails tfoot, #comboDetails tr, #comboDetails td, #comboDetails th {
    border-color: var(--bs-gray-800);
    background: var(--bs-dark);
    font: normal normal 500 var(--s-16);
}

.manage-combo-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.action-update-combo {
    display: flex;
    gap: var(--px-8);
    align-items: center;
    justify-content: space-between;
}

    .action-update-combo .btn-ud-cb {
        min-width: unset;
        height: var(--px-36);
        color: var(--bs-teal);
        background: #003525;
        pointer-events: none;
    }

        .action-update-combo .btn-ud-cb.delete {
            color: var(--bs-danger);
            background: #310005;
        }

        .action-update-combo .btn-ud-cb i {
            font-weight: 500;
            height: 100%;
            width: 100%;
            pointer-events: all;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

.select2-container--default .select2-selection--multiple .select2-selection__clear {
    all: unset;
    display: none;
}

.select2-container .select2-selection--multiple .select2-selection__rendered {
    display: flex;
    gap: var(--px-10);
    flex-direction: column;
}

.detail-desc-items {
    display: flex;
    gap: var(--px-12);
    flex-direction: column;
}

.cb-product-detail {
    display: grid;
    gap: var(--px-12);
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--px-12);
    border-bottom: 1px dashed var(--bs-gray-700);
    grid-template-columns: 1fr max-content;
}

    .cb-product-detail:last-of-type {
        border-bottom: 0px dashed var(--bs-gray-700);
    }

.qty-cb-select-ov {
    display: flex;
    gap: var(--px-4);
    align-items: center;
}

    .qty-cb-select-ov count {
        position: unset;
    }

.switch-combo-btn-gr {
    width: 100%;
    display: flex;
    gap: var(--px-24);
    align-items: center;
    padding: 0 var(--px-24);
}

.switch-combo-btn {
    padding: 0;
    background: unset;
    color: var(--bs-gray-500);
    justify-content: space-between;
    font: normal normal 600 var(--s-17);
    border-bottom: 3px solid transparent;
}

    .switch-combo-btn.active {
        color: var(--white);
        border-radius: 0;
        border-bottom: 3px solid var(--bs-main);
    }

    .switch-combo-btn p.request-post {
        display: flex;
        align-items: center;
        padding: var(--px-4) var(--px-8);
        border-radius: var(--px-12);
        background: var(--bs-red);
        font: normal normal 500 var(--s-13);
        gap: var(--px-4);
        color: var(--bs-gray-400);
    }

    .switch-combo-btn.accepted p.request-post {
        background: #00a171;
        color: white;
    }

    .switch-combo-btn p.request-post strong {
        color: var(--bs-white);
    }

.cb-product-detail img {
    width: var(--px-44);
    height: var(--px-44);
    border-radius: 100%;
}

.cb-product-detail p {
    text-align: start;
}

.card-item-dur {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

#modalListOrder .box-order.item-combo {
    padding-left: var(--px-70);
    min-height: var(--px-32);
    max-height: var(--px-32);
    margin-top: calc(-1 * var(--px-12));
    position: relative;
}

    #modalListOrder .box-order.item-combo::after {
        content: '';
        width: var(--px-24);
        height: var(--px-55);
        position: absolute;
        border-left: 1px solid var(--bs-gray-600);
        border-bottom: 1px solid var(--bs-gray-600);
        border-bottom-left-radius: var(--px-8);
        left: var(--px-36);
        top: calc(-1 * var(--px-36));
        z-index: 0;
    }

    #modalListOrder .box-order.item-combo .card-item-name {
        color: var(--bs-white);
        font: normal normal 400 var(--s-10);
    }

    #modalListOrder .box-order.item-combo .card-item-dur {
        display: flex;
        gap: var(--px-12);
        align-items: center;
        flex-direction: row;
        justify-content: start;
    }

.service-name[iscombo="1"] div.adj-qty-item {
    display: none !important;
}

.logo-hotel.dropdown-toggle {
    min-width: var(--px-44);
    max-height: var(--px-44);
    max-width: var(--px-44);
    min-height: var(--px-44);
}

button.noti-icon {
    max-width: var(--px-44);
    min-width: var(--px-44);
    border: 1px solid var(--bs-gray-700);
    max-height: var(--px-44);
}

.card-item-name {
    display: flex;
    gap: var(--px-4);
    align-items: flex-end;
}

    .card-item-name .wrap-line-1 {
        max-width: calc(100% - var(--px-50));
    }

.qty-display {
    color: var(--bs-green);
    font: normal normal 700 var(--s-14);
}

button.btn-close-popup-pos {
    z-index: -1;
    display: flex;
    top: var(--px-16);
    position: absolute;
    flex-direction: column;
    background: var(--bs-gray-800);
    left: calc(-1* var(--px-60));
    box-shadow: var(--shadow);
    border: 0px solid var(--bs-gray-700);
    border-right: 0;
    width: var(--px-48);
    overflow: hidden;
    max-height: var(--px-52);
    min-width: var(--px-48);
    font-size: var(--px-20);
    height: var(--px-60);
    font-size: var(--px-20);
    border: 1px solid var(--bs-gray-700);
    box-shadow: 0px 0px 15px 5px rgb(165 165 165 / 29%);
}

    button.btn-close-popup-pos.complete {
        top: var(--px-88);
        background: var(--bs-green);
    }

    button.btn-close-popup-pos.print {
        top: calc(var(--px-140) + var(--px-16));
        background: var(--bs-main);
    }

    button.btn-close-popup-pos i {
    }

discount {
    cursor: pointer;
    color: var(--bs-main-500);
    font: normal normal 400 var(--s-13);
    pointer-events: all;
    padding: 2px;
    display: flex;
    align-items: center;
    gap: var(--px-6);
    border-bottom: 1px solid;
}

    discount span {
    }

.card-item-amount {
    flex: 0;
    height: 100%;
    display: flex;
    gap: var(--px-4);
    align-items: center;
    justify-content: center;
}

.grp-btn-popup {
    display: flex;
    gap: var(--px-12);
    align-items: center;
    justify-content: end;
    padding: var(--px-24);
}

button.header-btn {
    height: var(--px-36);
    min-width: var(--px-48);
    border: 2px solid var(--bs-main-400);
    margin-right: var(--px-12);
    border-radius: var(--px-12);
}

.btn-footer-bill-action {
    cursor: pointer;
    color: var(--bs-main);
}

    .btn-footer-bill-action:hover {
        opacity: .5;
    }

#modalListOrder .box-order {
    transition: all 0.33s;
    left: 0;
}

    #modalListOrder .box-order.active-click {
        position: relative;
        border-radius: var(--px-12);
        left: calc(-1 * var(--px-48) * 3);
    }

        #modalListOrder .box-order.active-click .img-ord {
            background: var(--bs-gray-800);
        }

        #modalListOrder .box-order.active-click .card-item-amount {
            background: var(--bs-gray-800);
            padding-right: var(--px-16);
            z-index: 1;
        }

        #modalListOrder .box-order.active-click .btn-status {
            background: var(--bs-gray-800);
            z-index: 1;
            height: 100%;
            display: flex;
            align-items: center;
            border-radius: 0 var(--px-12) var(--px-12) 0;
        }

            #modalListOrder .box-order.active-click .btn-status i.fa-ellipsis-vertical {
                display: none;
            }

.group-btn-action-ord {
    z-index: 0;
    height: 100%;
    display: none;
    position: absolute;
    align-items: center;
    justify-content: end;
    right: calc(-1 * var(--px-60) * 3 + var(--px-16));
    width: calc(var( --px-60) * 3);
    border-radius: 0 var( --px-12) var(--px-12) 0;
}

    .group-btn-action-ord button {
        color: white;
        min-width: var(--px-60) !important;
        max-width: var(--px-60) !important;
        border: 0;
        height: 100% !important;
        border-radius: 0 var( --px-12) var(--px-12) 0 !important;
        left: calc(-1 * var(--px-16)) !important;
        padding-left: var(--px-24);
    }

        .group-btn-action-ord button i {
            color: inherit;
            font-weight: 700;
        }

        .group-btn-action-ord button.delete {
            z-index: 2;
            color: var(--bs-red);
            background: #35060b;
        }

        .group-btn-action-ord button.done-service {
            z-index: 1;
            color: var(--bs-teal);
            left: calc(-2 * var(--px-16)) !important;
            background: #084734;
        }

        .group-btn-action-ord button.edit {
            z-index: 1;
            color: var(--bs-info);
            left: calc(-2* var(--px-16)) !important;
            background: #1c4d57;
        }

        .group-btn-action-ord button.discount {
            z-index: 0;
            color: var(--bs-main-400);
            left: calc(-3 * var(--px-16)) !important;
            background: var(--bs-main-800);
        }

#modalListOrder .box-order.active-click .group-btn-action-ord {
    display: flex;
}

#modalListOrder .box-order.active-click.one-btn {
    left: calc(-1 * var(--px-48) * 1);
}

    #modalListOrder .box-order.active-click.one-btn .group-btn-action-ord {
        right: calc(-1 * var(--px-60) * 1 + var(--px-16));
    }

#modalListOrder .box-order.active-click.two-btn {
    left: calc(-1 * var(--px-48) * 2);
}

    #modalListOrder .box-order.active-click.two-btn .group-btn-action-ord {
        right: calc(-1 * var(--px-60) * 2 + var(--px-16));
    }

        #modalListOrder .box-order.active-click.two-btn .group-btn-action-ord button.discount {
            left: calc(-2* var(--px-16)) !important;
        }

#modalListOrder .box-order.active-click.one-btn button.discount {
    left: calc(-1* var(--px-16)) !important;
}

.grid-2.btn-status .done-service i {
    color: var(--bs-green);
}

#btn-done-order-confirm {
    background: var(--bs-dark)
}

.keypad-button-delete {
    width: 60px;
    height: 60px;
    margin: 5px;
    font-size: 20px;
}

.keypad-button {
    width: 60px;
    height: 60px;
    margin: 5px;
    font-size: 20px;
}

.modal .close {
    border-radius: 100%;
    width: var(--px-48);
    min-width: var(--px-48);
    font-size: var(--px-20);
}

.header-row-more-option {
    display: flex;
    text-align: start;
    gap: var(--px-8);
    flex-direction: column;
}

.row-more-option {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: var(--px-12);
}

.dis-note-item {
    color: var(--bs-main-200);
    margin: 2px 0;
    font: italic normal 400 var(--s-12);
}

button.min-w-u {
    min-width: unset;
}

.dropdown-menu.show[aria-labelledby="add-item-combo"] {
    width: var(--px-240);
}

.btn-confirm {
    border: 0;
    display: flex;
    align-items: center;
    color: var(--bs-white);
    justify-content: center;
    background: #ee6119;
    border-radius: var(--px-18);
}

div.grid-1.btn-status {
    flex: 1;
    max-width: var(--px-60);
    display: grid;
    align-items: center;
    justify-content: space-between;
    color: var(--bs-gray);
    grid-template-columns: 1fr min-content;
}

    div.grid-1.btn-status i {
        grid-column: 2/3;
    }

button.bell-concierge {
    padding: 2px;
    border-radius: 100%;
    min-width: var(--px-40);
    height: var(--px-40);
    border: 2px solid var(--bs-gray-600);
}

.category-list, .subcategory-list {
    max-height: 200px;
    overflow-y: auto;
}

.subcategory-list {
    margin-left: 20px;
}

/* Discount */

.bg-black {
    background-color: var(--bs-dark) !important;
}

.bg-black-light {
    border: 1px solid var(--bs-gray-700);
    box-shadow: var(--shadow-qs-solid);
    background-color: var(--bg-light) !important;
}

.modal {
    color: var(--txt-light);
}

    .modal .modal-title {
        color: var(--bs-white);
        padding: var(--px-20);
    }

    .modal .modal-header,
    .modal .modal-footer {
        border: 0;
        padding: var(--px-8) var(--px-16);
    }

    .modal .form-d-amount {
        width: 100%;
        display: flex;
        gap: var(--px-12);
        flex-direction: row;
        align-items: center;
    }

    .modal .show-d-amount {
        width: 100%;
        display: flex;
        gap: var(--px-12);
        align-items: center;
        height: var(--px-48);
        justify-content: flex-start;
        border-bottom: 1px solid var(--bs-gray-700);
    }

        .modal .show-d-amount strong {
            flex: 1;
            max-width: var(--px-44);
            color: var(--bs-gray-600);
            font: normal normal 600 var(--s-20);
        }

        .modal .show-d-amount input {
            width: inherit;
            flex: 1;
            background: inherit;
            border: 0;
            color: var(--bs-main);
            font: normal normal 600 var(--s-28);
            letter-spacing: 2px;
        }

    .modal .clear-amount-discount {
        min-width: 0;
        flex: 1;
        max-width: fit-content;
        height: var(--px-44);
        border-radius: var(--px-44);
        background: inherit;
    }

    .modal .group-btn-dis-switch {
        margin: auto;
        display: flex;
        width: max-content;
        align-items: center;
        height: var(--px-48);
        justify-content: center;
        padding: var(--px-4);
        border-radius: var(--px-8);
        background-color: var(--bs-gray-800);
        border: 1px solid var(--bs-gray-700);
    }

        .modal .group-btn-dis-switch .btn-discount {
            height: 100%;
            padding: 0;
            min-width: var(--px-44);
            max-width: var(--px-44);
            border-radius: var(--px-8);
        }

            .modal .group-btn-dis-switch .btn-discount svg {
                width: var(--px-24);
                height: var(--px-24);
                fill: var(--bs-gray-500);
            }

        .modal .group-btn-dis-switch .btn-split-payment {
            height: 100%;
            padding: 0;
            min-width: var(--px-88);
            border-radius: var(--px-8);
            display: flex;
            align-items: center;
            gap: var(--px-12);
            color: var(--txt-light);
            font: normal normal 500 var( --s-14);
        }

            .modal .group-btn-dis-switch .btn-split-payment i {
                font-size: var(--px-20);
            }

            .modal .group-btn-dis-switch .btn-split-payment.active {
                color: var(--bs-white);
                background: var(--bs-main);
            }

    .modal .show-curr-price {
        font: normal normal 500 var(--s-16);
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: var(--bs-gray-200);
        padding: var(--px-12) 0;
    }

        .modal .show-curr-price strong {
            color: var(--bs-teal);
        }

    .modal .form-keypad-append {
        width: 100%;
        display: grid;
        color: var(--txt-light);
        grid-template-rows: repeat(4, var(--px-80));
        grid-template-columns: repeat(3, 1fr);
        justify-content: center;
        grid-gap: 0;
        border-radius: var(--px-12);
        overflow: hidden;
        border: 1px solid var(--bs-gray-800);
        padding: var(--px-12);
        background: var(--bs-gray-800);
    }

        .modal .form-keypad-append button.keypad {
            margin: 0;
            border: 0;
            padding: 0;
            background: inherit;
            font-size: var(--px-30);
            color: var(--txt-light);
            height: 100%;
            min-width: unset;
            width: auto;
            border-radius: 0;
            border-left: 1px solid var(--bs-gray-700);
            border-bottom: 1px solid var(--bs-gray-700);
        }

            .modal .form-keypad-append button.keypad:nth-child(1),
            .modal .form-keypad-append button.keypad:nth-child(4),
            .modal .form-keypad-append button.keypad:nth-child(7),
            .modal .form-keypad-append button.keypad:nth-child(10) {
                border-left: unset;
            }

            .modal .form-keypad-append button.keypad:nth-child(10),
            .modal .form-keypad-append button.keypad:nth-child(11),
            .modal .form-keypad-append button.keypad:nth-child(12) {
                border-bottom: unset;
            }

        .modal .form-keypad-append button.keypad-button-delete {
        }

    .modal .btn-discount.discountSelected {
        color: white;
        background-color: var(--bs-main);
    }

        .modal .btn-discount.discountSelected svg {
            fill: white;
        }

.mw-400 {
    max-width: var(--px-400);
}

/* Payment */
.modal-form-payment-all {
    z-index: -1;
    display: flex;
    top: 0;
    position: absolute;
    flex-direction: row;
    background: var(--bs-dark);
    left: 100%;
    border-radius: var(--px-12) 0 0 var(--px-12);
    box-shadow: var(--shadow);
    border: 1px solid var(--bs-gray-700);
    border-right: 0;
    width: var(--px-440);
    overflow: auto;
    height: 100%;
    color: var(--txt-light);
    padding: var(--px-8) var(--px-20) 0;
    transition: left .4s;
}

.select-payment-method {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--px-12);
    padding: var(--px-8) 0px var(--px-20);
    overflow: hidden;
    z-index: 0;
    width: 100%;
    flex: 1;
}

.header-pay {
    width: 100%;
    display: flex;
    align-items: center;
    height: var(--px-36);
    color: var(--bs-gray-200);
    font: normal normal 500 var(--s-16);
    justify-content: space-between;
}

    .header-pay p {
        margin: 0;
    }

.list-method-pay {
    display: flex;
    gap: var(--px-12);
    justify-content: flex-start;
    overflow: auto hidden;
    align-items: center;
    position: relative;
    min-height: var(--px-60);
}

.box-select-method {
    display: flex;
    cursor: pointer;
    gap: var(--px-8);
    align-items: center;
    min-width: var(--px-120);
    padding: var(--px-10);
    min-height: var(--px-52);
    flex-direction: column;
    justify-content: center;
    border-radius: var(--px-12);
    border: 1px solid var(--bs-gray-700);
    background: var(--bs-gray-800);
}

    .box-select-method i {
        font-size: var(--px-16);
    }

        .box-select-method i.fa-paper-plane {
            color: var(--bs-pink);
        }

        .box-select-method i.fa-money-bill {
            color: var(--bs-teal);
        }

        .box-select-method i.fa-credit-card {
            color: var(--bs-info);
        }

        .box-select-method i.fa-file-half-dashed {
            color: var(--bs-main);
        }

    .box-select-method span {
        white-space: nowrap;
        font: normal normal 500 var(--s-14);
    }

    .box-select-method.active {
    }

    .box-select-method img {
        height: var(--px-24);
    }

.split-payment-method {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
}

    .split-payment-method .header-pay {
        display: flex;
        gap: var(--px-4);
        align-items: center;
    }

button.back-form {
    min-width: var(--px-32);
    height: var(--px-32);
    padding: var(--px-12);
    border-radius: var(--px-8);
    background: inherit;
    font-size: var(--px-20);
}

.list-per-row {
    flex: 1;
    display: flex;
    overflow: auto;
    gap: var(--px-8);
    flex-direction: column;
    margin-top: var(--px-12);
}

.per-payment-row {
    display: flex;
    align-items: center;
    gap: var(--px-12);
    border: 1px solid var(--bs-gray-700);
    padding: var(--px-2) var(--px-16);
    border-radius: var(--px-8);
    cursor: pointer;
    min-height: var(--px-48);
    padding-right: 4px;
}

.per-payment-row {
}

    .per-payment-row span {
        flex: 1;
        font: normal normal 600 var(--s-16);
    }

    .per-payment-row strong {
        font: normal normal 600 var(--s-14);
        color: var(--bs-teal);
    }

    .per-payment-row .col-one {
        font-size: var(--s-24);
    }

.delete-payment {
    background: inherit;
    min-width: unset;
}

.split-payment-method .add-more-payment {
    display: flex;
    align-items: center;
    gap: var(--px-12);
    border: 1px solid var(--bs-gray-700);
    padding: var(--px-8) var(--px-16);
    border-radius: var(--px-8);
    cursor: pointer;
    background: unset;
    margin: var(--px-16);
    justify-content: start;
    color: var(--bs-main-400);
}

.modal.open-payment .modal-select-guest {
    top: var(--px-80);
    left: calc(-1 * (var(--px-68) + var(--px-500)));
}

.add-amount-payment-form {
    display: flex;
    flex-direction: column;
}

#modalListOrder.open-payment .modal-form-payment-all {
    left: calc(-1* var(--px-440));
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}

.modal.open-payment .btn-close-popup-pos {
    left: calc(-1 * (var(--px-40) + var(--px-460)));
}

    .modal:not(.open-payment) .btn-close-popup-pos .fa-arrow-right,
    .modal:not(.open-payment) .btn-close-popup-pos .collapse-btn,
    #modalListOrder.open-payment .btn-close-popup-pos .close-btn,
    #modalListOrder.open-payment #append-footer-id .select-payment-method,
    .modal.open-payment .btn-close-popup-pos .fa-xmark {
        display: none !important;
    }

#modalListOrder .info-amount.cash-payment {
    color: var(--bs-main-300);
    padding-top: 4px;
    border-top: 1px solid var(--bs-gray-700);
}

#invoiceModal .modal-dialog {
    max-width: var(--px-400) !important;
    margin: auto;
}

table.invoice {
    background: white;
    width: 100%;
}

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

    table.invoice .num {
        font-weight: 400;
    }

    table.invoice .order-num {
        font-weight: 500;
    }

    table.invoice tr, table.invoice td {
        background: white;
        text-align: left;
        font-weight: 400;
        color: black;
        padding: 2px;
    }

        table.invoice tr.header td img {
            max-width: 300px;
        }

        table.invoice tr.header td h2 {
            text-align: right;
            font-weight: 200;
            font-size: 2rem;
            color: var(--bs-main);
        }

        table.invoice tr.intro td:nth-child(2) {
            text-align: right;
        }

        table.invoice tr.details > td {
            /*padding-top: 4rem;*/
            padding-bottom: 0;
        }

        table.invoice tr.details td.id, table.invoice tr.details th.id, table.invoice tr.details td.qty, table.invoice tr.details th.qty {
            text-align: center;
        }

        table.invoice tr.details td:last-child, table.invoice tr.details th:last-child {
            text-align: right;
        }

        table.invoice tr.details table thead, table.invoice tr.details table tbody {
            position: relative;
        }

        table.invoice tr.totals td {
            padding-top: 0;
        }

        table.invoice tr.totals table tr td {
            padding-top: 0;
            padding-bottom: 0;
        }

            table.invoice tr.totals table tr td:nth-child(1) {
                font-weight: 500;
            }

            table.invoice tr.totals table tr td:nth-child(2) {
                text-align: right;
                font-weight: 200;
            }

        table.invoice tr.totals table tr:nth-last-child(2) td {
        }

            table.invoice tr.totals table tr:nth-last-child(2) td:last-child {
                position: relative;
            }

                table.invoice tr.totals table tr:nth-last-child(2) td:last-child:after {
                    content: '';
                    height: 4px;
                    width: 110%;
                    position: relative;
                    right: 0;
                    bottom: -0.575rem;
                    display: block;
                }

        table.invoice tr.totals table tr.total td {
            font-size: 1.2em;
            font-weight: 600;
        }

            table.invoice tr.totals table tr.total td:last-child {
                font-weight: 700;
            }

.additional-info {
    background-color: white;
    padding: 10px;
}

    .additional-info h5 {
        font-size: 0.8em;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 2px;
        color: black;
        margin-top: 20px;
    }

.keypad-payment-form {
    flex: 1;
    display: flex;
    gap: var(--px-12);
    flex-direction: column;
    padding: var(--px-16);
}

#btn-send-order-confirm, #btn-done-order-confirm {
    min-width: var(--px-48);
    max-width: var(--px-60);
    font-size: var(--px-20);
    padding: 0;
    background: unset;
    color: var(--bs-main);
    border: 2px solid var(--bs-gray-600);
}

#btn-confirm-add-mount {
    display: flex;
    align-items: center;
    gap: var(--px-12);
    padding: var(--px-8) var(--px-16);
    border-radius: var(--px-8);
    cursor: pointer;
    background: unset;
    justify-content: start;
    color: var(--bs-main-400);
    border: 1px solid var(--bs-gray-700);
    flex-direction: row-reverse;
}

    #btn-confirm-add-mount i {
        margin-left: auto;
    }

.form-append-footer {
    flex: 1;
    gap: var(--px-12);
    );
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bs-gray-900);
    padding: var(--px-12);
    border-radius: var(--px-12);
    );
}

    .form-append-footer .ff-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: var(--bs-gray-200);
        font: normal normal 500 var(--s-16);
    }

        .form-append-footer .ff-header button {
            background: unset;
            height: var(--px-24);
            min-width: 0;
            width: auto;
            padding: 0;
            color: var(--bs-main);
        }

    .form-append-footer .list-append-footer-track {
        gap: var(--px-12);
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        text-align: center;
        overflow: auto;
        text-align: start;
    }

    .form-append-footer .footer-row {
        cursor: pointer;
        display: flex;
        border-radius: var(--px-8);
        padding: var(--px-8);
        align-items: center;
        border: 1px solid var(--bs-gray-800);
        background: var(--bs-gray-800);
        justify-content: center;
        min-height: var(--px-60);
        max-height: var(--px-60);
        flex-direction: column-reverse;
        gap: 4px;
    }

        .form-append-footer .footer-row:hover {
            color: var(--bs-white);
            background: var(--bs-main);
        }

        .form-append-footer .footer-row span {
            font: normal normal 400 var(--s-13);
        }

        .form-append-footer .footer-row img {
            height: var(--px-24);
        }

.close-form-footer {
    min-width: 0;
    flex: 1;
    max-width: var(--px-40);
    height: var(--px-40);
    border-radius: var(--px-40);
    background: inherit;
}

.box-select-method.active {
    /*border: 1px solid var(--bs-main);*/
}

.invoice-print table.invoice td.full-width-center {
    width: 100%;
    text-align: center;
    vertical-align: middle;
}

.invoice-print table.invoice td.full-width-left {
    width: 100%;
    text-align: left;
    vertical-align: middle;
}

    .invoice-print table.invoice td.full-width-left .num {
        white-space: break-spaces;
    }

#invoice-img {
    width: var(--px-80);
    height: var(--px-80);
    border-radius: var(--px-80);
}

.thank-you {
    padding-left: 20%;
    padding-right: 20%;
    padding-top: 10px;
    font-size: 12px;
}

.payment-invoices {
    font-size: 12px;
    font-weight: bold
}

@media print {
    @page {
        size: auto;
        margin: 0mm;
    }

    header, footer {
        display: none;
    }

    .thank-you {
        font-size: 0.6rem !important;
        font-weight: 300 !important;
        text-align: center !important;
        padding-top: 10px !important;
        ;
    }

    .payment-invoices {
        font-size: 0.6rem !important;
        font-weight: 600 !important;
        text-align: center !important;
    }

    td.full-width-center {
        width: 100% !important;
        text-align: center !important;
        vertical-align: middle !important;
    }

    #invoice-print {
        width: 100%;
        page-break-inside: avoid;
        background-color: red;
        margin: auto;
    }

    table.invoice .num {
        font-size: 0.6em;
    }

    table.invoice tr.header td h2 {
        font-size: 0.8rem;
    }

    table.invoice tr.totals table tr.total td {
        font-size: 0.8em;
    }

    table.invoice tr.totals table tr.total tr.subtotal {
        margin-bottom: 10px;
    }

    table.invoice tr.totals table tr.total tr.fee {
        margin-bottom: 10px;
    }

    #invoice-img {
        width: var(--px-50);
        height: var(--px-50);
    }

    table.invoice td {
        font-size: 0.8rem;
    }
}

/* Start Custom for bill */
.thank-you {
    font-weight: 400 !important;
    padding-top: 6px !important;
    padding-bottom: 2px !important;
    color: #363636 !important;
    font-style: italic;
}

.payment-invoices {
    font-size: 8px !important;
    font-weight: 600 !important;
    text-align: center !important;
}

table.invoice td.full-width-center {
    width: 100% !important;
    text-align: center !important;
    vertical-align: middle !important;
}

#invoice-print {
    margin: auto;
    --bs-gutter-x: 0;
    max-width: 250px;
    page-break-inside: avoid;
}

table.invoice th.price {
    text-align: center;
}

table.invoice th {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 10px;
    font-weight: 700;
}

table.invoice .num {
    font-size: 10px;
    white-space: pre;
}

table.invoice tr.header td h2 {
    font-size: 0.8rem;
}

table.invoice tr.totals table tr.total td {
    font-size: 10px;
}

table.invoice tr.totals table tr.total tr.subtotal {
    margin-bottom: 10px;
}

table.invoice tr.totals table tr.total tr.fee {
    margin-bottom: 10px;
}

#invoice-img {
    width: var(--px-50);
    height: var(--px-50);
    margin: 4px;
}

table.invoice td {
    font-size: 10px;
}
/* End Custom for bill */

.bankQr-setting {
    width: 100vw;
    display: flex;
    justify-content: center;
}

.bill-image-setting {
    width: 100%;
    display: flex;
    height: 100%;
    overflow: auto;
    grid-column: span 2;
    gap: var(--px-52);
    flex-direction: column;
}

#btn-close-bill {
    grid-column: -2;
}

    #btn-close-bill.disable {
        pointer-events: none;
        background: var(--bs-gray-800);
    }

.bill-name.due-usd {
    color: var(--bs-danger);
    font-weight: 400;
}

div.divider {
    height: 100%;
    width: 1px;
    display: flex;
    border-right: 2px solid var(--bs-gray-700);
    margin: auto;
    min-height: var(--px-24);
}

.payment-success-order {
    display: flex;
    color: var(--txt-light);
    flex-direction: column;
    min-width: var(--px-440);
}

.header-payment {
    padding: var(--px-16);
    display: flex;
    flex-direction: column;
    gap: var(--px-6);
    position: relative;
}

    .header-payment status {
        background: var(--bs-success);
        padding: 4px var(--px-12);
        border-radius: var(--px-24);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        width: min-content;
        font: normal normal 500 var(--s-14);
        height: var(--px-32);
        position: absolute;
        right: var(--px-16);
        top: var(--px-24);
    }

    .header-payment h4 {
        font: normal normal 700 var(--s-26);
        margin: 0;
    }

    .header-payment span {
        color: var(--bs-gray-600);
        font: normal normal 500 var(--s-16);
    }

.info-payment-order {
    display: flex;
    gap: var(--px-24);
    flex-direction: column;
    margin: var(--px-16);
    border-radius: var(--px-8);
    background: var(--bs-gray-900);
    padding: var(--px-16);
}

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

    .header-info strong {
        font: normal normal 600 var(--s-20);
    }

    .header-info span {
        color: var(--bs-gray-600);
        font: normal normal 500 var(--s-16);
    }

#modalListOrder.payment-successfully #append-footer-id,
#modalListOrder.payment-successfully #list-order-append-id,
#modalListOrder.payment-successfully #append-info-table-header {
    pointer-events: none;
}

#modalListOrder.payment-successfully #btn-close-bill,
#modalListOrder.payment-successfully #append-select-guest-bill {
    display: none !important;
}

.accordion--setting-content.payment-setting {
    display: flex;
    margin: auto;
    padding: 0 var(--px-24) var(--px-24);
    width: 100%;
    height: 100%;
    grid-column: span 2;
    color: var(--txt-light);
    gap: var(--px-24);
    justify-content: center;
}

.form-account-settings .title-cate,
.append-image-list .title-cate {
    height: var(--px-32);
    display: flex;
    align-items: center;
    color: var(--txt-light);
    font: normal normal 700 var(--s-18);
}

.form-account-settings {
    flex: 1;
    display: flex;
    position: relative;
    flex-direction: column;
    gap: var(--px-24);
    background: var(--bs-gray-900);
    padding: var(--px-20);
    border-radius: var(--px-16);
}

.accordion--setting-content.payment-setting .form--input {
    height: auto;
}

    .accordion--setting-content.payment-setting .form--input span {
    }

    .accordion--setting-content.payment-setting .form--input input {
    }

.line-2-item-display {
    width: 100%;
    display: flex;
    gap: var(--px-4);
    align-items: center;
}

    .line-2-item-display .card-item-amount {
        flex: 1;
        justify-content: end;
    }

.dropdown-menu.select-guest {
    min-width: var(--px-160);
}

.select-guest button.btn-select-guest {
    background: unset;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0;
    justify-content: space-around;
}

    .select-guest button.btn-select-guest span {
    }

    .select-guest button.btn-select-guest strong {
        background: var(--bs-gray-700);
        font: normal normal 500 var(--s-12);
        border-radius: var(--px-12);
        padding: 2px;
        display: flex;
        align-items: center;
        justify-content: center;
        height: var(--px-24);
        width: var(--px-24);
    }

#total-due-amount strong {
    font: normal normal 600 var(--s-16);
    color: var(--bs-main);
}

.group-btn-dms-order {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: var(--px-6);
    margin: 0;
    flex: 1;
    max-height: var(--px-44);
    padding: var(--px-6);
    background: var(--bs-gray-900);
    border-radius: var(--px-8) var(--px-8) 0 0;
}

    .group-btn-dms-order button {
        padding: 0;
        min-width: unset;
        background: var(--bs-gray-900);
        height: var(--px-32);
        color: var(--bs-gray-500);
        padding: var(--px-8);
        width: 100%;
    }

        .group-btn-dms-order button i {
            color: var(--bs-main-300);
        }

.txt-gray {
    font-weight: 500;
    color: var(--bs-gray-500);
}

.discount-bill-display {
    width: 100%;
    display: flex;
    gap: var(--px-12);
    align-items: center;
    max-height: var(--px-60);
    padding: var(--px-12);
    border-radius: var(--px-12);
    margin: 0 0 var(--px-12) 0;
    background: var(--bs-gray-900);
    border: 1px solid var(--bs-gray-800);
}

    .discount-bill-display.split {
        cursor: pointer;
    }

        .discount-bill-display.split:hover {
            background: var(--bs-gray-800);
        }

        .discount-bill-display.split i {
            color: var(--bs-main);
            padding: 6px;
            border-radius: var(--px-8);
            background: #40120a5e;
            font-size: var(--px-20);
        }

        .discount-bill-display.split.noClick i.fa-arrow-left {
            display: none;
        }

    .discount-bill-display .fa-badge-percent {
        color: var(--bs-teal);
        padding: 6px;
        font-size: var(--px-20);
        border-radius: var(--px-8);
        background: #1b5c007d;
    }

    .discount-bill-display .name-dis-value {
        flex: 1;
        display: flex;
        flex-direction: column;
        font: normal normal 500 var(--s-12)
    }

    .discount-bill-display .value {
        color: var(--bs-teal);
    }

    .discount-bill-display .tle {
        color: var(--bs-gray-600);
    }

    .discount-bill-display .del-discount {
        background: var(--bs-gray-900);
        min-width: unset;
        width: var(--px-32);
        height: var(--px-32);
    }

.list-group {
    display: flex;
    flex-direction: column;
    gap: var(--px-8);
    border-radius: var(--px-8);
}

.list-group-item {
    width: 100%;
    border: unset !important;
    display: flex;
    background: unset;
    color: var(--txt-light);
    padding: 4px var(--px-8);
    border-radius: var(--px-4) !important;
    display: flex;
    height: var(--px-32);
    align-items: center;
    justify-content: start;
    font: normal normal 400 var(--s-14);
}

.list-group.categories {
    background: var(--bs-gray-900);
    border: 1px solid var(--bs-gray-700);
    height: 100%;
    padding: var(--px-12);
}

.discount-popup-method-append {
    display: flex;
    gap: var(--px-12);
    flex-direction: column;
    padding: 0 0 var(--px-12) 0;
}

.list-discount-method {
    display: flex;
    gap: var(--px-12);
    flex-direction: row;
    overflow: auto hidden;
    justify-content: flex-start;
}

    .list-discount-method .item-method-dis {
        display: flex;
        border: 1px solid var(--bs-gray-700);
        align-items: center;
        padding: var(--px-12);
        border-radius: var(--px-8);
        gap: var(--px-8);
        font: normal normal 500 var(--s-14);
    }

        .list-discount-method .item-method-dis i {
            color: var(--bs-teal);
        }

.list-apply-for {
    display: flex;
    gap: var(--px-12);
    flex-direction: row;
    overflow: auto hidden;
    justify-content: flex-start;
}

    .list-apply-for .item-apply-for {
        cursor: pointer;
        display: flex;
        border: 1px solid var(--bs-gray-700);
        align-items: center;
        padding: var(--px-12);
        border-radius: var(--px-8);
        gap: var(--px-8);
        min-width: var(--px-160);
        font: normal normal 500 var(--s-14);
    }

        .list-apply-for .item-apply-for:hover {
            background: var(--bs-gray-800);
        }

        .list-apply-for .item-apply-for.active i {
            font-weight: 900;
            color: var(--bs-main);
            background: white;
            font-size: var(--px-18);
            border-radius: 100%;
            height: var(--px-14);
            width: var(--px-14);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .list-apply-for .item-apply-for i {
            font-weight: 300;
            color: var(--bs-gray-600);
        }

        .list-apply-for .item-apply-for.active i::before {
            content: "\f058";
        }

        .list-apply-for .item-apply-for span {
            flex: 1;
            font: normal normal 400 var(--s-12);
            text-transform: capitalize;
        }

    .list-method-pay::-webkit-scrollbar,
    .list-apply-for::-webkit-scrollbar,
    .list-discount-method::-webkit-scrollbar {
        height: 0;
    }

#keypadModal .modal-body {
    padding-top: 0;
}

.ordered-items {
    gap: 4px;
    display: flex;
    align-items: center;
}

    .ordered-items .ordered-items-count {
        background: var(--bs-danger);
        font: normal normal 400 var(--s-11);
        border-radius: var(--px-12);
        padding: 2px;
        display: flex;
        align-items: center;
        justify-content: center;
        height: var(--px-18);
        width: var(--px-18);
        color: white;
    }

.search-form.search-foc {
    min-height: var(--px-36);
    margin: var(--px-12) 0;
    width: 100%;
    min-width: 96%;
    background: var(--bs-gray-900);
}

.content-wrapper-custom {
    display: flex;
    align-items: stretch;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: space-between;
    width: 100vw;
    color: var(--txt-light);
    overflow: auto;
}

    .content-wrapper-custom .chart {
        background: var(--bs-gray-900);
    }

    .content-wrapper-custom .chart-area {
        position: relative;
        height: 10rem;
        width: 100%;
    }

    .content-wrapper-custom .chart-pie {
        position: relative;
        height: 15rem;
        width: 100%;
    }


#modalListOrder.role-guest-tracking .btn-update-table-info.changeTable,
#modalListOrder.payment-successfully #append-footer-id,
#modalListOrder.payment-successfully #list-order-append-id,
#modalListOrder.payment-successfully #append-info-table-header {
    pointer-events: none;
}

#modalListOrder.role-guest-tracking .group-btn-dms-order,
#modalListOrder.role-guest-tracking .dropdown-split-bill,
#modalListOrder.role-guest-tracking .divider,
#modalListOrder.payment-successfully #btn-close-bill,
#modalListOrder.payment-successfully #append-select-guest-bill {
    display: none !important;
}

.add-client-order-bill {
    display: flex;
    cursor: pointer;
    align-items: center;
    padding: var(--px-8) var(--px-16);
    border: 2px solid var(--bs-gray-700);
    background: var(--bs-gray-800);
    margin: 0 var(--px-12);
    border-radius: var(--px-8);
}

    .add-client-order-bill .name-and-info {
        flex: 1;
        display: flex;
        gap: var(--px-6);
        flex-direction: column;
        font: normal normal 600 var(--s-15);
    }

        .add-client-order-bill .name-and-info p {
            color: var(--bs-main-400);
        }

        .add-client-order-bill .name-and-info span {
            font: normal normal 400 var(--s-13);
        }

    .add-client-order-bill i.fa-duotone {
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--bs-gray-600);
        height: var(--px-36);
        width: var(--px-36);
        border-radius: var(--px-36);
        color: var(--bs-gray-100);
    }

.form-add-client-bill {
    display: flex;
    gap: var(--px-12);
    flex-direction: column;
    color: var(--txt-light);
    min-width: var(--px-360);
    max-width: var(--px-420);
}

    .form-add-client-bill .h4 {
        margin: 0;
        padding: var(--px-16) var(--px-16) 0;
    }

    .form-add-client-bill .client-input-bill {
        display: grid;
        gap: var(--px-8);
        padding: var(--px-16);
        grid-template-columns: 1fr 1fr;
    }

        .form-add-client-bill .client-input-bill .form--input {
            grid-column: span 2;
        }

            .form-add-client-bill .client-input-bill .form--input:nth-child(2),
            .form-add-client-bill .client-input-bill .form--input:nth-child(3) {
                grid-column: span 1;
            }


.footer-popup {
    display: flex;
    align-items: center;
    padding: 0 var(--px-16) var(--px-16);
    justify-content: flex-end;
}

    .footer-popup button {
    }

div.select-payment-method.for-split.disabled > * {
    pointer-events: none;
    opacity: .5;
}

div.select-payment-method.for-split.disabled .ff-header {
    pointer-events: all;
    opacity: 1;
    z-index: 121212122;
    position: relative;
}

button.search-tax-code {
    position: absolute;
    right: var(--px-8);
    height: var(--px-32);
    min-width: var(--px-32);
    bottom: var(--px-8);
}

button.scroll-form {
    padding: 0;
    position: sticky;
    min-width: var(--px-32);
    height: var(--px-32);
    background: var(--bs-gray-900);
    box-shadow: 1px 1px 31px 2px #4545451a;
}

    button.scroll-form.left {
        left: 0;
    }

    button.scroll-form.right {
        right: 0;
    }

.form-transfer-payment {
    display: flex;
    gap: var(--px-20);
    padding: var(--px-24);
    flex-direction: column;
    color: var(--txt-light);
}

    .form-transfer-payment img {
        margin: auto;
        display: block;
        cursor: zoom-in;
        max-width: var(--px-400);
        -webkit-user-select: none;
        background-color: hsl(0, 0%, 90%);
        transition: background-color 300ms;
    }

    .form-transfer-payment p {
    }

.append-image-list {
    flex: 1;
    display: flex;
    position: relative;
    height: max-content;
    flex-direction: column;
    gap: var(--px-24);
    background: var(--bs-gray-900);
    padding: var(--px-20);
    border-radius: var(--px-16);
    max-width: var(--px-400);
    color: var(--txt-light);
}

    .form-account-settings button,
    .append-image-list button {
        position: absolute;
        right: var(--px-20);
        min-width: var(--px-60);
        height: var(--px-32);
        font-size: var(--px-12);
        top: var(--px-20);
    }

.qr-code-scan-payment-time {
    display: flex;
    flex-direction: column;
}

    .qr-code-scan-payment-time img {
        width: 100%;
        height: var(--px-80);
        margin: auto;
        object-fit: contain;
    }

.invoice-print-items tr.item {
    border-collapse: collapse;
    border-bottom: 1px dashed #a7a7a7
}

tr.item .desc {
    width: 55%; /* Adjust this to your preference */
}

td span.time-exactly {
    font-size: 9px;
    white-space: nowrap;
    padding: 5px;
}

.full-width-center.invoiceName h2 {
    font-size: 16px;
    font-weight: 700;
}

.store-name-invoice {
    font-size: 12px;
    font-weight: 600;
    margin: 0;
}

.group-setting-page {
    display: flex;
    gap: var(--px-16);
    flex-direction: column;
    padding: 0 var(--px-32);
    color: var(--txt-light);
    font: normal normal 700 var(--s-22);
}

    .group-setting-page .setting-option-page {
        display: flex;
        gap: var(--px-12);
    }

#modal-not-found-table-qr {
}

    #modal-not-found-table-qr .modal-content {
        background: var(--bg-light);
        justify-content: center;
        align-items: center;
        gap: var(--px-60);
    }

    #modal-not-found-table-qr .info-store {
        display: flex;
        gap: var(--px-24);
        flex-direction: column;
        align-items: center;
    }

        #modal-not-found-table-qr .info-store img {
            height: var(--px-160);
            width: var(--px-160);
            border-radius: var(--px-160);
        }

        #modal-not-found-table-qr .info-store .store-name {
            font: normal normal 800 var(--s-32);
            color: white;
            text-align: center;
        }

    #modal-not-found-table-qr .info-table {
        font: italic normal 300 var(--s-16);
        display: flex;
        flex-direction: column;
        text-align: center;
        color: var(--bs-gray-600);
        width: auto;
        height: auto;
        flex-wrap: nowrap;
        gap: var(--px-4);
        align-items: center;
    }

        #modal-not-found-table-qr .info-table.form-select-table {
            gap: var(--px-32);
        }

        #modal-not-found-table-qr .info-table p {
            margin: var(--px-12) 0;
            color: var(--bs-gray-400);
            font: normal normal 600 var(--s-20);
        }

button.complete-order-portal {
    border: 1px solid var(--bs-gray-700);
}

.content-reprint-custom {
    all: unset;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
    color: var(--txt-light);
    grid-column: span 2;
}

.content-dashboard-custom {
    height: inherit;
    display: flex;
    overflow: auto;
    flex-direction: column;
}

.reprint {
    height: inherit;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    margin: 0 var(--px-24);
    border-radius: var(--px-12);
    border: 1px solid var(--bs-gray-900);
}

    .reprint .reprint-filter {
        flex: 1;
        max-height: var(--px-76);
        display: flex;
        padding: var(--px-12) var(--px-24);
        align-items: center;
        gap: var(--px-32);
        justify-content: flex-end;
    }

        .reprint .reprint-filter .filter-option-print {
            display: flex;
            gap: var(--px-12);
            align-items: center;
            white-space: nowrap;
            font: normal normal 600 var(--s-16);
            color: var(--bs-gray-500);
        }

        .reprint .reprint-filter input {
            background: unset;
            padding: var(--px-12);
            border-radius: var(--px-8);
            color: var(--txt-light);
            border: 1px solid var(--bs-gray-800);
            width: var(--px-220);
            font: normal normal 500 var(--s-14);
        }

#rePrintList {
    flex: 1;
    padding: 0;
}

    #rePrintList #rePrintListTable th {
        text-align: center;
    }

.qrcode-and-print {
    display: flex;
    gap: var(--px-4);
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}

.table-detail .info-basic-table i {
    font-size: var(--px-32);
    color: var(--bs-info);
}

.popup-container button.btn-add-note span {
}

.method-and-split-form {
    flex: 1;
    display: flex;
    overflow: hidden;
    gap: var(--px-16);
    padding: 0 var(--px-8);
}

.keyboard-and-list-foc {
    flex: 1;
    display: flex;
    position: relative;
    flex-direction: column;
    padding: var(--px-12) 0px 0;
}

    .keyboard-and-list-foc::after {
        content: '';
        height: -webkit-fill-available;
        width: 1px;
        position: absolute;
        background: var( --bs-gray-700);
        left: calc(-1 * var( --px-8));
        z-index: 1;
        top: var( --px-60);
    }

.select-payment-method.for-split {
    flex: 1;
    height: auto;
    overflow: hidden;
    position: relative;
    max-width: var(--px-140);
    padding: var(--px-12) 0px 0;
}

    .select-payment-method.for-split .list-method-pay:not(.dis-none) {
        display: flex !important;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .select-payment-method.for-split .list-method-pay .box-select-method {
        width: 100%;
    }

.fa-money-bill-transfer {
    color: var(--bs-green);
    font-size: var(--px-24);
}

#offcanvasItemDef {
    width: 50vw;
    background: var(--bs-gray-900);
    color: var(--txt-light);
}

#itemDefForm input {
    color: var(--txt-light) !important;
}

#itemDefForm .select2-container {
    width: 100% !important;
}

#addNewItemDef {
    background-color: var(--stagesin-service);
}

#modalListOrder.expand-payment-order #append-footer-id {
    flex: 1;
    align-content: flex-start;
    justify-content: normal;
    flex-direction: column;
}

#modalListOrder:not(.expand-payment-order) #list-order-append-id {
    display: flex !important;
}

#modalListOrder.expand-payment-order #list-order-append-id {
    flex: 1;
    overflow: hidden;
    max-height: var(--px-110);
}

#modalListOrder.expand-payment-order .list-method-pay {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

    #modalListOrder.expand-payment-order .list-method-pay div.divider,
    #modalListOrder.expand-payment-order .list-method-pay .scroll-form {
        display: none;
    }

button.btn-expand-payment-order {
    background: var(--bs-gray-900);
    height: unset;
    min-width: unset;
    padding: var(--px-6) var(--px-16);
    border: 1px solid var(--bs-gray-700);
}

    button.btn-expand-payment-order.expand {
        color: var(--bs-white);
        background: var(--bs-main);
    }

.select-payment-method.for-split div.ff-header {
    justify-content: flex-start;
    gap: 8px;
    cursor: pointer;
    padding: var(--px-6) 0;
}

.select-payment-method.for-split div.footer-row[method="vnpay"],
.select-payment-method.for-split div.footer-row[method="transfer"] {
    display: none;
}

.select-payment-method.for-split .list-method-pay.dis-none {
    display: none !important;
}

.header-openby-ticketno {
    gap: 4px;
    display: flex;
    flex-direction: column;
    white-space: nowrap;
    font-size: var(--px-12);
}

    .header-openby-ticketno strong:last-of-type {
        color: var(--bs-gray-500) !important;
        font: normal normal 500 var(--s-14);
    }

.area-note-order-bill {
    width: 100%;
    display: flex;
    gap: var(--px-12);
    padding: var(--px-8);
    border-radius: var(--px-12);
    margin: 0 0 var(--px-12) 0;
    background: var(--bs-gray-900);
    font: normal normal 400 var(--s-12);
}

    .area-note-order-bill i {
        color: var(--bs-primary);
        padding: 6px;
        font-size: var(--px-20);
        border-radius: var(--px-8);
        background: #0d6efd26;
    }

.btn-close-bill-split {
    width: 100%;
    margin: var(--px-12) 0;
}

.select-payment-method.for-split .list-append-footer-track {
    display: flex;
    flex-direction: column;
}

    .select-payment-method.for-split .list-append-footer-track .footer-row {
        min-height: var(--px-32);
        max-height: var(--px-32);
    }

.header-left-bar-page {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}

.table-custom-setting-page .table > :not(caption) > * > * {
    background-color: unset;
    padding: var(--px-8) var(--px-16);
    font: normal normal 400 var(--s-14);
    border-color: var(--bs-gray-900);
    color: var(--bs-gray-500);
}

.table-custom-setting-page .table > thead th {
    background-color: var(--bs-gray-900);
    padding: var(--px-16);
    font: normal normal 600 var(--s-14);
    border-color: var(--bs-gray-900);
    color: var(--bs-gray-300);
}

.table-custom-setting-page thead {
    position: sticky;
    top: 0px;
}

#rePrintList button.btn-reprint-page {
    background-color: var(--bs-gray-900);
}

.accordion--setting-content.item-setting {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
    color: var(--txt-light);
    grid-column: span 2;
}

.group-item-page-setting {
    height: inherit;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    margin: 0 var(--px-24);
    border-radius: var(--px-12);
    border: 1px solid var(--bs-gray-900);
    background: var(--bs-gray-900);
}

    .group-item-page-setting .itemDefFilters {
        flex: 1;
        max-height: var(--px-76);
        display: flex;
        padding: var(--px-12) var(--px-24);
        align-items: center;
        gap: var(--px-32);
        justify-content: flex-end;
    }

    .group-item-page-setting .item-page-setting-filter {
        display: flex;
        gap: var(--px-12);
        align-items: center;
        white-space: nowrap;
        font: normal normal 600 var(--s-16);
        color: var(--bs-gray-500);
    }

    .group-item-page-setting input,
    .group-item-page-setting select {
        background: unset;
        padding: var(--px-12);
        border-radius: var(--px-8);
        color: var(--txt-light);
        border: 1px solid var(--bs-gray-800);
        width: var(--px-220);
        font: normal normal 500 var(--s-14);
    }


.append-all-item {
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden auto;
}

    .append-all-item .group-info {
        width: 100%;
        display: flex;
        align-items: center;
        padding: 0 var(--px-12);
        background-color: var(--bs-gray-700);
    }

        .append-all-item .group-info strong {
            flex: 1;
            padding: var(--px-16) var(--px-8);
            font: normal normal 600 var(--s-14);
            color: var(--bs-gray-300);
            min-width: var(--px-120);
            max-width: var(--px-120);
        }

        .append-all-item .group-info span {
            flex: 1;
            background-color: unset;
            padding: var(--px-8) var(--px-8);
            font: normal normal 400 var(--s-14);
            color: var(--bs-gray-500);
            min-width: var(--px-120);
            max-width: var(--px-120);
        }

        .append-all-item .group-info.item {
            border-bottom: 1px solid var(--bs-gray-900);
            background-color: unset;
        }

        .append-all-item .group-info .text-center {
            min-width: var(--px-60);
            max-width: var(--px-60);
        }

        .append-all-item .group-info .flex--2 {
            min-width: var(--px-180);
            max-width: 100%;
        }

        .append-all-item .group-info .btn-edit-item-page-setting {
            background-color: var(--bs-gray-900);
            min-width: var(--px-40);
        }

        .append-all-item .group-info .btn-edit-item-page-setting {
            background-color: var(--bs-gray-900);
            min-width: var(--px-40);
        }

            .append-all-item .group-info .btn-edit-item-page-setting i {
                color: var(--bs-warning);
            }

        .append-all-item .group-info.item:hover {
            cursor: pointer;
            background: var(--bs-gray-800);
        }

#searchItemButton {
    background: var(--bs-gray-800);
}

button.btn-send-payment-action {
    grid-column: 11 / 12;
}

#modalListOrder.client-payment-proccessing .divider,
#modalListOrder.client-payment-proccessing .scroll-form,
#modalListOrder.client-payment-proccessing .fa-arrow-left,
#modalListOrder.client-payment-proccessing .grid-1.btn-status,
#modalListOrder.client-payment-proccessing .btn-close-popup-pos,
#modalListOrder.client-payment-proccessing .group-btn-dms-order,
#modalListOrder.client-payment-proccessing .dropdown.bill-setting,
#modalListOrder.client-payment-proccessing .btn-expand-payment-order,
#modalListOrder.client-payment-proccessing .header-pay,
#modalListOrder.client-payment-proccessing .list-method-pay {
    display: none;
}

#modalListOrder.client-payment-proccessing .box-order,
#modalListOrder.client-payment-proccessing .discount-bill-display.split,
#modalListOrder.client-payment-proccessing #append-info-table-header {
    pointer-events: none;
}

#modalListOrder.client-payment-proccessing .box-select-method {
    width: 50%;
}

#modalListOrder.client-payment-proccessing {
    max-width: unset;
    width: 100vw;
}

    #modalListOrder.client-payment-proccessing button.btn-payment-vnpay-portal {
        width: -webkit-fill-available;
        height: var(--px-44);
        margin: var(--px-12);
        display: flex !important;
        background: var(--bs-success);
    }

        #modalListOrder.client-payment-proccessing button.btn-payment-vnpay-portal img {
            height: 70%;
        }

#modal-view-receipt-info {
    overflow: unset;
    max-width: var(--px-440);
}

#modalListOrder.bill-info-tracking .box-select-method:not([method="sendpayment"]),
#modalListOrder.bill-info-tracking .group-btn-dms-order,
#modalListOrder.bill-info-tracking .btn-close-popup-pos.complete,
#modalListOrder.bill-info-tracking .scroll-form,
#modalListOrder.bill-info-tracking .header-pay,
#modalListOrder.bill-info-tracking .btn-close-popup-pos.print {
    display: none;
}

#modalListOrder.bill-info-tracking #append-info-table-header {
    pointer-events: none;
}

#modalListOrder.bill-info-tracking .box-select-method[method="sendpayment"] {
    width: 100%;
}

#modalListOrder.disable .modal-content #append-footer-id,
#modalListOrder.disable .modal-content #list-order-append-id,
#modalListOrder.disable .modal-content #append-info-table-header {
    opacity: .5;
    pointer-events: none !important;
}

.categories-menu::-webkit-scrollbar-thumb {
    background-color: transparent !important;
}

.group-dur-adj-qty {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.category-selected-append {
    display: flex;
    gap: var(--px-12);
    padding: 0 var(--px-24);
    color: white;
    margin: var(--px-12) 0;
}

    .category-selected-append h1 {
        margin: 0;
        font-size: var(--px-50);
        text-transform: capitalize;
    }

    .category-selected-append .divider {
        flex: 1;
        height: 0;
        margin-top: var(--px-32);
        border-top: 2px solid var(--bs-gray-300);
    }

.group-filter-func-order {
    display: flex;
    gap: var(--px-12);
    align-items: center;
    padding: var(--px-8) var(--px-24);
    position: relative;
    left: calc(-1 * var(--px-8));
    width: calc(100% + var(--px-8));
}

    .group-filter-func-order .search-form {
        height: 100%;
        background: 0;
        border: 1px solid var(--bs-gray-600);
    }

.select-items-popup .close-zoom-btn {
    color: black;
    font-size: var(--px-20);
    background: white;
}

.opacity-blur {
    position: relative;
}

.service-name.opacity-blur::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #39393958;
    backdrop-filter: blur(3px);
}

.popup-content .service-name.opacity-blur::after {
    content: unset;
}

.accordion--setting-content.categories-menu {
    top: var(--px-108);
    left: var(--px-6);
    border-radius: var(--px-12);
}

button.add-on.delete {
    width: min-content;
    min-width: unset;
    border-radius: 100%;
    color: black;
    width: var(--px-40);
}

    button.add-on.delete i {
        color: black;
    }

.service-name .info-service.setting {
    max-height: var(--px-73);
}

label.txt-desc {
    color: var(--bs-gray-500);
    font: normal normal 500 var(--s-14);
}


/* CONFIG TEMPLATE*/
body[templatemenu="0"] div.form-select-table,
body[templatemenu="0"] div.container-append-service,
body[templatemenu="0"] div.form-select-order.open {
    background: var(--bg-solid) !important;
}

body[templatemenu="0"] div.categories-menu,
body[templatemenu="0"] div.menu-create-page.open,
body[templatemenu="0"] #append-header-lobby-id.menu.flex-column {
    background: var(--bg-light) !important;
}

body[templatemenu="0"] .txt-lux,
body[templatemenu="0"] .txt-lux-vibes {
    font-family: "Montserrat", sans-serif !important;
}

body[templatemenu="0"] .category-selected-append {
    display: none;
}

body[templatemenu="0"] #append-header-lobby-id .title {
    color: var(--bs-white);
    font: normal normal 700 var(--s-20);
}

body[templatemenu="0"] button.categories.sub-2::after {
    width: 100%;
    left: 50%;
    border-radius: 0;
    background: var(--bs-gray-800);
}

body[templatemenu="0"] .item-service {
    all: unset;
    width: calc(100% - var(--px-24));
    display: grid;
    gap: var( --px-8);
    overflow: hidden auto;
    padding: 0 var( --px-8);
    margin-top: var( --px-16);
    grid-template-rows: repeat(auto-fit, var( --px-190));
    grid-template-columns: repeat(2, 1fr);
    padding-bottom: var( --px-128);
}

body[templatemenu="0"] .service-name {
    all: unset;
    color: var(--note);
    display: flex;
    min-height: var(--px-73);
    justify-content: space-between;
    border: var(--bdr-1);
    border-color: var(--bs-gray-700);
    font: normal normal 300 var(--s-16);
    height: var(--px-190);
    overflow: hidden;
    background: var(--bg-light);
    border-radius: 4px;
    transition: all .2s;
}

    body[templatemenu="0"] .service-name .info-service {
        all: unset;
        flex: 1;
        padding: var(--px-12);
        justify-content: space-between;
        font: normal normal 500 var(--s-17);
    }

        body[templatemenu="0"] .service-name .info-service .serv-name {
            color: white;
        }

        body[templatemenu="0"] .service-name .info-service note {
            color: var(--bs-gray-500);
        }

    body[templatemenu="0"] .service-name .adj-qty-item i,
    body[templatemenu="0"] button.add-on.delete i,
    body[templatemenu="0"] button.add-on.delete {
        color: white;
    }

        body[templatemenu="0"] .service-name .adj-qty-item i.fa-plus {
            color: var(--bs-main);
        }

    body[templatemenu="0"] .service-name .adj-qty-item span.dis-qty-selected {
        border: 1px solid var(--bs-main);
        color: white;
        background: var(--bs-main)
    }

    body[templatemenu="0"] .service-name .flex-img {
        max-width: var(--px-240);
    }

    body[templatemenu="0"] .service-name price {
        all: unset;
        color: var(--bs-teal);
    }

body[templatemenu="0"] .popup-container.fit-right {
    top: var(--px-108) !important;
    right: var(--px-12) !important;
    width: var(--px-800);
}

body[templatemenu="0"] .popup-content .service-name {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    justify-content: flex-start;
    border-radius: 0;
}

    body[templatemenu="0"] .popup-content .service-name .flex-img {
        max-width: unset;
    }

    body[templatemenu="0"] .popup-content .service-name .info-service {
        max-height: var(--px-80);
    }

    body[templatemenu="0"] .popup-content .service-name price {
        all: unset;
        color: var(--bs-teal);
        position: absolute;
        left: var(--px-16);
        bottom: var(--px-16);
    }

body[templatemenu="0"] .close-zoom-btn {
    color: white;
    background: var(--bg-light);
}

body[templatemenu="0"] .select-items-popup {
    background: var(--bg-light);
    border-radius: 0;
    height: var(--px-68);
}

body[templatemenu="0"] .popup-container button.btn-add-note {
    color: white;
    left: var(--px-128);
    font-size: var(--px-14);
    border: 1px solid var(--bs-gray-600);
}


body[templatemenu="0"] .popup-container dur {
    padding-left: var(--px-16);
}

body[templatemenu="0"] .popup-content {
    overflow: hidden
}

/* END TEMPLATE*/

.setting-option-page textarea,
.setting-option-page input
{
    font: normal normal 500 var(--s-14);
}
.setting-option-page textarea {
    height: var(--px-120);
    font: normal normal 500 var(--s-14);
}

.append-general-settings-config {
    display: flex;
    gap: var(--px-16);
    flex-direction: column;
}

#template-menu-selection {
    background: var(--bs-gray-800);
    border: 0;
    height: var(--px-40);
    border-radius: var(--px-8);
    padding: var(--px-12);
    color: var(--txt-light);
}