: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: Sora, Helvetica;
    --h3-font-weight: 600;
    --h3-font-size: 14px;
    --h3-letter-spacing: 0px;
    --h3-line-height: normal;
    --h3-font-style: normal;
    --body-font-family: Sora, Helvetica;
    --body-font-weight: 400;
    --body-font-size: 14px;
    --body-letter-spacing: 0px;
    --body-line-height: normal;
    --body-font-style: normal;
    --h2-font-family: Sora, 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: Sora, 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: Sora, 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);
    --qs-txt: var(--theme-mode-text-gray);
    --qs-txt-solid: var(--theme-mode-text);
    --shadow-qs-solid: 0px 4px 20px 0px rgba(0, 0, 0, 0.1);
    --shadow-qs-light: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
    --red-simpli: rgba(255, 97, 80, 1);
    --backgroud-gray: rgba(224, 224, 224, 1);
    --side-bar: var(--px-80);
    --bs-body-bg: #FFFFFF;
    --bs-opacity: #f7cdb0;
    --bs-green-o: #e1fff1;
    --bs-yellow: #f8a400;
    --bs-yellow-o: #f8a40020;
    --bs-blue-o: #d2f2f9;
    --bs-pink-o: #FFE6E6;
    --bs-purple-o: #F0D9FF;
    --bs-green-l-o: #e4fb96;
    --bs-orange-o: #ffe5d6;
    --bs-green-grd: linear-gradient(180deg, #41C7AF, #54E38E);
    --bs-orange-grd: linear-gradient(180deg, #ff9967, #ff8282);
    --bs-blue-grd: linear-gradient(180deg, #6CACFF, #8DEBFF);
    --bs-purple-grd: linear-gradient(180deg, #A16BFE, #DEB0DF);
    --bg-room-type: var(--bs-gray-200);
    --bg-num-availble: #F0F0F0;
    --text-room-color: #475569;
    --room-grid-min: var(--px-244);
    --room-grid-gap: var(--px-8);
}

:root {
    --vh: 1;
    --scale: 1;
    --px-2: calc(2px * var(--scale));
    --px-4: calc(4px * var(--scale));
    --px-6: calc(6px * var(--scale));
    --px-8: calc(8px * var(--scale));
    --px-12: calc(12px * var(--scale));
    --px-14: calc(14px * var(--scale));
    --px-16: calc(16px * var(--scale));
    --px-20: calc(20px * var(--scale));
    --px-24: calc(24px * var(--scale));
    --px-28: calc(28px * var(--scale));
    --px-32: calc(32px * var(--scale));
    --px-36: calc(36px * var(--scale));
    --px-40: calc(40px * var(--scale));
    --px-44: calc(44px * var(--scale));
    --px-48: calc(48px * var(--scale));
    --px-52: calc(52px * var(--scale));
    --px-56: calc(56px * var(--scale));
    --px-60: calc(60px * var(--scale));
    --px-64: calc(64px * var(--scale));
    --px-68: calc(68px * var(--scale));
    --px-72: calc(72px * var(--scale));
    --px-76: calc(76px * var(--scale));
    --px-80: calc(80px * var(--scale));
    --px-84: calc(84px * var(--scale));
    --px-88: calc(88px * var(--scale));
    --px-92: calc(92px * var(--scale));
    --px-96: calc(96px * var(--scale));
    --px-100: calc(100px * var(--scale));
    --px-104: calc(104px * var(--scale));
    --px-108: calc(108px * var(--scale));
    --px-112: calc(112px * var(--scale));
    --px-116: calc(116px * var(--scale));
    --px-120: calc(120px * var(--scale));
    --px-124: calc(124px * var(--scale));
    --px-128: calc(128px * var(--scale));
    --px-132: calc(132px * var(--scale));
    --px-136: calc(136px * var(--scale));
    --px-140: calc(140px * var(--scale));
    --px-144: calc(144px * var(--scale));
    --px-148: calc(148px * var(--scale));
    --px-152: calc(152px * var(--scale));
    --px-156: calc(156px * var(--scale));
    --px-160: calc(160px * var(--scale));
    --px-164: calc(164px * var(--scale));
    --px-168: calc(168px * var(--scale));
    --px-172: calc(172px * var(--scale));
    --px-176: calc(176px * var(--scale));
    --px-180: calc(180px * var(--scale));
    --px-184: calc(184px * var(--scale));
    --px-188: calc(188px * var(--scale));
    --px-192: calc(192px * var(--scale));
    --px-196: calc(196px * var(--scale));
    --px-200: calc(200px * var(--scale));
    --px-204: calc(204px * var(--scale));
    --px-208: calc(208px * var(--scale));
    --px-212: calc(212px * var(--scale));
    --px-216: calc(216px * var(--scale));
    --px-220: calc(220px * var(--scale));
    --px-224: calc(224px * var(--scale));
    --px-228: calc(228px * var(--scale));
    --px-232: calc(232px * var(--scale));
    --px-236: calc(236px * var(--scale));
    --px-240: calc(240px * var(--scale));
    --px-244: calc(244px * var(--scale));
    --px-248: calc(248px * var(--scale));
    --px-252: calc(252px * var(--scale));
    --px-256: calc(256px * var(--scale));
    --px-260: calc(260px * var(--scale));
    --px-264: calc(264px * var(--scale));
    --px-268: calc(268px * var(--scale));
    --px-272: calc(272px * var(--scale));
    --px-276: calc(276px * var(--scale));
    --px-280: calc(280px * var(--scale));
    --px-284: calc(284px * var(--scale));
    --px-288: calc(288px * var(--scale));
    --px-292: calc(292px * var(--scale));
    --px-296: calc(296px * var(--scale));
    --px-300: calc(300px * var(--scale));
    --px-304: calc(304px * var(--scale));
    --px-308: calc(308px * var(--scale));
    --px-312: calc(312px * var(--scale));
    --px-316: calc(316px * var(--scale));
    --px-320: calc(320px * var(--scale));
    --px-324: calc(324px * var(--scale));
    --px-328: calc(328px * var(--scale));
    --px-332: calc(332px * var(--scale));
    --px-336: calc(336px * var(--scale));
    --px-340: calc(340px * var(--scale));
    --px-344: calc(344px * var(--scale));
    --px-348: calc(348px * var(--scale));
    --px-352: calc(352px * var(--scale));
    --px-356: calc(356px * var(--scale));
    --px-360: calc(360px * var(--scale));
    --px-364: calc(364px * var(--scale));
    --px-368: calc(368px * var(--scale));
    --px-372: calc(372px * var(--scale));
    --px-376: calc(376px * var(--scale));
    --px-380: calc(380px * var(--scale));
    --px-384: calc(384px * var(--scale));
    --px-388: calc(388px * var(--scale));
    --px-392: calc(392px * var(--scale));
    --px-396: calc(396px * var(--scale));
    --px-400: calc(400px * var(--scale));
    --px-420: calc(420px * var(--scale));
    --px-430: calc(430px * var(--scale));
    --px-440: calc(440px * var(--scale));
    --px-450: calc(450px * var(--scale));
    --px-460: calc(460px * var(--scale));
    --px-480: calc(480px * var(--scale));
    --px-500: calc(500px * var(--scale));
    --px-550: calc(550px * var(--scale));
    --px-570: calc(570px * var(--scale));
    --px-600: calc(600px * var(--scale));
    --px-620: calc(620px * var(--scale));
    --px-640: calc(640px * var(--scale));
    --px-650: calc(650px * var(--scale));
    --px-690: calc(690px * var(--scale));
    --px-700: calc(700px * var(--scale));
    --px-710: calc(710px * var(--scale));
    --px-800: calc(800px * var(--scale));
    --px-820: calc(820px * var(--scale));
    --px-860: calc(860px * var(--scale));
    --px-880: calc(880px * var(--scale));
    --px-900: calc(900px * var(--scale));
    --px-950: calc(950px * var(--scale));
    --px-970: calc(970px * var(--scale));
    --px-988: calc(988px * var(--scale));
    --px-998: calc(998px * var(--scale));
    --px-1100: calc(1100px * var(--scale));
    --px-1200: calc(1200px * var(--scale));
    /**/
    --s-8: calc(8px * var(--scale)) / calc(11px * var(--scale)) Sora, sans-serif;
    --s-10: calc(10px * var(--scale)) / calc(13px * var(--scale)) Sora, sans-serif;
    --s-11: calc(11px * var(--scale)) / calc(14px * var(--scale)) Sora, sans-serif;
    --s-12: calc(12px * var(--scale)) / calc(15px * var(--scale)) Sora, sans-serif;
    --s-13: calc(13px * var(--scale)) / calc(16px * var(--scale)) Sora, sans-serif;
    --s-14: calc(14px * var(--scale)) / calc(15px * var(--scale)) Sora, sans-serif;
    --s-15: calc(15px * var(--scale)) / calc(19px * var(--scale)) Sora, sans-serif;
    --s-16: calc(16px * var(--scale)) / calc(19px * var(--scale)) Sora, sans-serif;
    --s-17: calc(17px * var(--scale)) / calc(20px * var(--scale)) Sora, sans-serif;
    --s-18: calc(18px * var(--scale)) / calc(22px * var(--scale)) Sora, sans-serif;
    --s-19: calc(19px * var(--scale)) / calc(23px * var(--scale)) Sora, sans-serif;
    --s-20: calc(20px * var(--scale)) / calc(24px * var(--scale)) Sora, sans-serif;
    --s-22: calc(22px * var(--scale)) / calc(27px * var(--scale)) Sora, sans-serif;
    --s-24: calc(24px * var(--scale)) / calc(37px * var(--scale)) Sora, sans-serif;
    --s-25: calc(25px * var(--scale)) / calc(30px * var(--scale)) Sora, sans-serif;
    --s-26: calc(26px * var(--scale)) / calc(32px * var(--scale)) Sora, sans-serif;
    --s-28: calc(28px * var(--scale)) / calc(34px * var(--scale)) Sora, sans-serif;
    --s-30: calc(30px * var(--scale)) / calc(37px * var(--scale)) Sora, sans-serif;
    --s-32: calc(32px * var(--scale)) / calc(39px * var(--scale)) Sora, sans-serif;
    --s-38: calc(38px * var(--scale)) / calc(42px * var(--scale)) Sora, sans-serif;
    --s-45: calc(45px * var(--scale)) / calc(55px * var(--scale)) Sora, sans-serif;
    --s-50: calc(50px * var(--scale)) / calc(61px * var(--scale)) Sora, sans-serif;
    --s-54: calc(54px * var(--scale)) / calc(66px * var(--scale)) Sora, sans-serif;
    --s-80: calc(80px * var(--scale)) / calc(98px * var(--scale)) Sora, 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-o: #f4f8ed;
    --bs-main-50: #f4f8ed;
    --bs-main-100: #e6f0d7;
    --bs-main-200: #cfe2b4;
    --bs-main-300: #b0cf87;
    --bs-main-400: #92ba61;
    --bs-main-500: #7fad49;
    --bs-main-600: #5a7e32;
    --bs-main-700: #45612a;
    --bs-main-800: #3a4e26;
    --bs-main-900: #334324;
    --bs-main-950: #19240f;
    --bs-main: var(--bs-main-500);
    --color-chart: var(--bs-main);
    --color-chart-o: var(--bs-main-o);
    --chart-gray: var(--bs-gray-100);
    --chart-gradiant: linear-gradient(90deg, var(--bs-main) 0%, var(--bs-main-300) 100%);
    --bard-color-brand-text-gradient-stop-1: #4285f4;
    --bard-color-brand-text-gradient-stop-1-rgb: 66, 133, 244;
    --bard-color-brand-text-gradient-stop-2: #9b72cb;
    --bard-color-brand-text-gradient-stop-2-rgb: 155, 114, 203;
    --bard-color-brand-text-gradient-stop-3: #d96570;
    --bard-color-brand-text-gradient-stop-3-rgb: 217, 101, 112;
    --gem-sys-color--surface: #fff;
    --transform-page: 100%;
    --w-day: var(--px-100);
    --w-day-c: var(--px-160);
    --bg-inp: #fafcfe;
    --bs-gray-100: #edf2f3;
    --left-table-fit: var(--px-180);
    /*--bg-main: #fcf7f2;*/
    --bg-main: #ececec;
    --bg-black: #091a0a;
    --shadow-h: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
    --room-status-width: calc(200px * var(--scale));
    --room-status-collapsed: calc(56px * var(--scale));
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-elegant: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-luxury: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.text-muted {
    font-weight: 400 !important;
    --bs-text-opacity: 1;
    color: var(--bs-gray-600) !important;
}

.fa-house {
    color: var(--bs-main-500) !important;
}

i.fa-regular.fa-circle-check {
    color: #8fd3ff !important;
}

    i.fa-regular.fa-circle-check.today {
        color: #ffcd00 !important;
    }

i.fa-calendar-exclamation {
    color: var(--bs-orange) !important;
}

i.fa-right-to-bracket {
    color: #A0522D !important;
}

.shadow-scroll {
    box-shadow: 4px 2px 4px var(--bs-gray-400);
}

/* Common CSS properties  */

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

.dis-none {
    display: none !important;
}

input::-internal-datetime-container {
    flex-direction: row-reverse;
}

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

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

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

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

.grid-5 {
    grid-column: span 5 !important;
}

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

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

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

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

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

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

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-8);
    align-items: center;
    height: var(--px-36);
}

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

button.border-circle {
    border-radius: var(--px-36);
}

/* Keep Select2 tag remove button independent from global button styles. */
.select2-container .select2-selection--multiple .select2-selection__choice__remove,
button.select2-selection__choice__remove {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-right: 4px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    line-height: 1;
    cursor: pointer;
}

    .select2-container .select2-selection--multiple .select2-selection__choice__remove::before,
    button.select2-selection__choice__remove::before {
        content: none !important;
    }

button {
    border: 0;
    display: flex;
    gap: var(--px-8);
    align-items: center;
    height: var(--px-36);
    color: var(--bs-white);
    justify-content: center;
    padding: 0 var(--px-12);
    background: var(--bs-main);
    border-radius: 6px;
    font: normal normal 400 var(--s-13);
    text-transform: capitalize;
    box-shadow: unset;
    position: relative;
    overflow: hidden;
}

    button.icon-only {
        background: var(--bs-gray-100);
    }


    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-dark);
        border-radius: 4px;
        transform: scale(0);
        transition-property: transform, opacity;
    }

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

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

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

    button.btn-gray {
        background: var(--bs-gray-500);
    }

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

    button[data-bs-dismiss="modal"] {
        background: unset;
        color: var(--bs-main);
        font-size: var(--px-24);
    }

    button.br-100 {
        border-radius: 100%;
    }

    button.br-0 {
        border-radius: 0;
    }

    button.icon-btn {
        display: flex;
        align-items: center;
        width: var(--px-32);
        height: var(--px-32);
        justify-content: center;
        color: var(--bs-gray-800);
        border-radius: var(--px-32);
        background: var(--bs-white);
        border: 1px solid var(--bs-gray-300);
    }

.underline {
    text-decoration: underline;
}

div,
p,
span,
a,
b,
button,
input,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Sora", sans-serif;
}

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

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

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

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

.no-click {
    pointer-events: none !important;
}

.allow-click {
    pointer-events: all !important;
}

p {
    margin: 0;
}

.form-switch-btn {
    display: flex;
    align-items: center;
    height: var(--px-40);
    border-radius: 8px;
    background: var(--bs-white);
    padding: 4px 2px;
    box-shadow: 0 2px 10px #d1d1d150;
    border: 1px solid var(--bs-gray-300);
    width: max-content;
}

    .form-switch-btn button {
        background: white;
        color: black;
        height: var(--px-32);
    }

        .form-switch-btn button.active {
            color: var(--bs-white);
            border-radius: 6px;
            background: var(--bs-main-200);
            color: var(--bs-main-700);
        }

body {
    width: 100vw;
    display: flex;
    overflow: hidden;
    height: 100dvh !important;
    flex-direction: column;
    position: relative;
    font-family: "Sora", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}

.modal-right-side {
    right: 0;
    left: unset;
    max-width: 50%;
}

    .modal-right-side .modal-header {
        flex: 1;
        max-height: var(--px-80);
        padding: var(--px-16);
    }

    .modal-right-side .modal-content {
        background: var(--bs-gray-100);
        height: 100%;
    }

    .modal-right-side .modal-fullscreen {
        width: unset;
        background: var(--bs-gray-100);
    }

.narbar-top {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    background: white;
    position: relative;
    min-height: var(--px-56);
    max-height: var(--px-56);
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    box-shadow: 0 2px 4px #c0c0c082;
}

    .narbar-top .narbar-start {
        flex: 1;
        display: flex;
        align-items: center;
        gap: var(--px-8);
        padding: var(--px-12);
        padding-right: 4px;
    }

        .narbar-top .narbar-start img {
            height: var(--px-32);
            width: var(--px-32);
            border-radius: 100%;
        }

        .narbar-top .narbar-start p {
            font: normal normal 800 var(--s-16);
        }

    .narbar-top .narbar-end {
        display: flex;
        align-items: center;
        gap: var(--px-8);
        padding: var(--px-12);
        padding-left: 0;
    }

        .narbar-top .narbar-end .logo-store {
            padding: 0;
        }

            .narbar-top .narbar-end .logo-store img {
                height: var(--px-36);
                width: var(--px-36);
                border-radius: 100%;
            }

        .narbar-top .narbar-end .btn-setting {
            padding: 4px;
            min-height: var(--px-44);
            min-width: var(--px-44);
            max-width: var(--px-44);
            border-radius: 100%;
            font-size: var(--px-20);
            background: 0;
            color: var(--bs-gray-700);
            font-weight: 600;
            background: var(--bs-gray-100);
            overflow: unset;
        }

    .narbar-top .direction-sidebar {
        display: flex;
        flex-direction: row;
        overflow: hidden;
        position: fixed;
        top: 0;
        bottom: unset;
        left: 50%;
        transform: translateX(-50%);
        height: var(--px-56);
        background: #ffffff40;
        z-index: 1000;
        backdrop-filter: blur(8px);
    }

        .narbar-top .direction-sidebar .btn-sidebar {
            gap: 6px;
            width: 100%;
            padding: 0;
            font: normal normal 400 var(--s-13);
            color: var(--bs-gray-700);
            display: flex;
            justify-content: center;
            overflow: hidden;
            position: relative;
            font-size: var(--px-24);
            overflow: hidden;
            min-width: var(--px-180);
            box-shadow: unset !important;
            background: 0;
            flex-direction: row;
            white-space: nowrap;
            margin: auto;
            padding: 0;
        }

            .narbar-top .direction-sidebar .btn-sidebar span {
                font: normal normal 400 var(--s-13);
                color: var(--bs-gray-700);
            }

            .narbar-top .direction-sidebar .btn-sidebar.active {
                color: var(--bs-main);
                font-weight: 500;
                background: var(--bs-main-100);
            }

                .narbar-top .direction-sidebar .btn-sidebar.active i {
                    color: var(--bs-main);
                    font-weight: 600;
                }

                .narbar-top .direction-sidebar .btn-sidebar.active span {
                    color: var(--bs-main-600);
                }

                .narbar-top .direction-sidebar .btn-sidebar.active::after {
                    position: absolute;
                    content: '';
                    height: 6px;
                    width: 100%;
                    /* background: var(--bs-main); */
                    left: 50%;
                    top: -3px;
                    border-radius: 0 0 var(--px-4) var(--px-4);
                    transform: translateX(-50%);
                }

                .narbar-top .direction-sidebar .btn-sidebar.active::before {
                    all: unset;
                    position: absolute;
                    content: '';
                    height: 100%;
                    width: 100%;
                    /* background: linear-gradient(0deg, rgb(234 255 233) 0%, rgb(229 255 224 / 38%) 36% 100%); */
                    left: 0;
                    z-index: -1;
                    left: 50%;
                    transform: translateX(-50%);
                }

            .narbar-top .direction-sidebar .btn-sidebar:hover {
                color: var(--bs-main);
                font-weight: 500;
                background: var(--bs-gray-100);
            }

            .narbar-top .direction-sidebar .btn-sidebar i {
                font-size: var(--px-16);
                font-weight: 300;
                color: var(--bs-gray-900);
            }

.container-body-content {
    flex: 1;
    display: flex;
    height: 100%;
    overflow: hidden;
    background: var(--bs-main-50);
}

.container-pms-append {
    display: flex;
    height: 100%;
    width: 100%;
    overflow: hidden;
    flex-direction: column;
}

    .container-pms-append .pms-general {
        flex: 1;
        /* gap: var(--px-12); */
        min-width: 100%;
        min-height: 100%;
        padding: 0 var(--px-24);
        display: flex;
        flex-direction: column;
    }

.pms--header-page {
    flex: 1;
    display: flex;
    align-items: flex-start;
    min-height: var(--px-48);
    max-height: var(--px-48);
    justify-content: space-between;
    font: normal normal 700 var(--s-24);
    flex-wrap: wrap;
    color: black;
}

.popup-content .pms--header-page {
    padding: var(--px-12);
}

.popup-content .section-end-header .btn-filter {
    background: var(--bs-gray-100) !important;
    border-radius: var(--px-8);
    color: black;
    padding: 0 var(--px-12) 0 4px;
    min-width: var(--px-148);
}

.pms--status-body {
    flex: 1;
    display: flex;
    gap: var(--px-16);
    overflow: auto;
    flex-direction: column;
    justify-content: flex-start;
}

.popup-container {
    display: flex;
    z-index: 1100;
    overflow: auto;
    max-height: 90svh;
    border-radius: var(--px-8);
    box-shadow: var(--shadow-5);
    transform: translate(2px, -2px);
    background: white;
    opacity: 1 !important;
    height: calc(100svh - var(--px-112));
}

    .popup-container.infostore {
        top: var(--px-68) !important;
    }

        .popup-container.infostore .store-name {
            font: normal normal 600 var(--s-18);
        }

        .popup-container.infostore .store-email {
            font: normal normal 400 var(--s-13);
        }

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

    .popup-container.top-fit {
        top: var(--px-68) !important;
        left: unset !important;
        right: var(--px-12) !important;
        height: calc(100svh - var(--px-112));
    }

    .popup-container.has-close-btn {
        overflow: unset !important;
    }

    .popup-container.top-fit-o {
        top: var(--px-52) !important;
    }

    .popup-container.fit-content {
        height: fit-content;
    }

    .popup-container.box-shadow {
        box-shadow: 0 12px 28px 0 rgba(0, 0, 0, .2), 0 2px 4px 0 rgba(0, 0, 0, .1);
    }

    .popup-container.scale-form {
        height: unset;
    }

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

    .popup-container.adjust-calendar {
        transform: translateX(-32px);
    }

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

    .popup-container.off-outside-click {
    }

.popup-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.popup-sidebar-append-id {
    height: 100%;
    display: flex;
    width: var(--px-690);
    gap: var(--px-8);
    flex-direction: column;
    padding: var(--px-16);
    border-radius: var(--px-12);
    background: white;
    box-shadow: 0 12px 28px 0 rgba(0, 0, 0, .2), 0 2px 4px 0 rgba(0, 0, 0, .1);
}

    .popup-sidebar-append-id p.title {
        color: black;
        font: normal normal 600 var(--s-16);
        padding: var(--px-12) 0;
    }

        .popup-sidebar-append-id p.title.menu {
            font: normal normal 600 var(--s-22);
            color: black;
            padding: 2px 6px;
        }

        .popup-sidebar-append-id p.title:not(.menu, :first-of-type) {
        }

.menu-sidebar-append-manual-quick {
    display: flex;
    gap: var(--px-16);
}

.quick-menu-sidebar {
    flex: 1;
    display: flex;
    height: max-content;
    max-width: var(--px-252);
    background: white;
    flex-direction: column;
    border-radius: var(--px-12);
    box-shadow: 0 1px 2px rgb(0, 0, 0, .2);
    max-height: calc(100svh - var(--px-184));
}

    .quick-menu-sidebar h3 {
        margin: 0;
        color: black;
        font: normal normal 600 var(--s-20);
        padding: var(--px-16) var(--px-16);
    }

.menu-sidebar-append {
    flex: 1;
    display: flex;
    overflow: auto;
    background: white;
    flex-direction: column;
    padding: var(--px-12) var(--px-16);
    border-radius: var(--px-12);
    box-shadow: 0 1px 2px rgb(0, 0, 0, .2);
    max-height: calc(100svh - var(--px-184));
}

    .menu-sidebar-append .btn-menu-item {
        all: unset;
        gap: 16px;
        border: 0;
        padding: 0;
        outline: 0;
        display: flex;
        box-shadow: unset;
        border-radius: 8px;
        position: relative;
        color: var(--theme-mode-text);
        justify-content: flex-start;
        opacity: 1;
        line-height: 0;
        height: var(--px-68);
        min-height: var(--px-68);
        max-height: var(--px-68);
        cursor: pointer;
        align-items: center;
        overflow: hidden;
    }

        .menu-sidebar-append .btn-menu-item:hover {
            background: var(--bs-gray-100);
        }

        .menu-sidebar-append .btn-menu-item i {
            display: flex;
            height: var(--px-44);
            min-width: var(--px-44);
            align-items: center;
            justify-content: center;
            font-size: var(--px-24);
            border-radius: var(--px-44);
            color: var(--bs-main);
            border: 1px solid var(--bs-gray-300);
        }

        .menu-sidebar-append .btn-menu-item:active {
            opacity: .5;
            transition: all .28s;
        }

        .menu-sidebar-append .btn-menu-item span {
            font: normal normal 500 var(--s-14);
            color: black;
        }

        .menu-sidebar-append .btn-menu-item:hover {
            background: var(--theme-mode-bs-100);
        }

        .menu-sidebar-append .btn-menu-item .fa-thumbtack {
            z-index: 12;
            display: flex;
            align-items: center;
            position: absolute;
            max-width: var(--px-32);
            min-width: var(--px-32);
            min-height: var(--px-32);
            max-height: var(--px-32);
            justify-content: center;
            font-size: var(--px-16);
            border-radius: var(--px-8);
            left: 25px;
            color: var(--bs-gray-600);
            font-weight: 600;
            transform: rotate(45deg);
            border-radius: 100%;
            top: 0;
            background: unset;
            border: 0;
        }

            .menu-sidebar-append .btn-menu-item .fa-thumbtack:hover {
                background: var(--bs-main);
                color: white;
            }

            .menu-sidebar-append .btn-menu-item .fa-thumbtack.active {
                border: unset;
                font-weight: 600;
                color: var(--bs-orange);
                transform: unset;
            }

                .menu-sidebar-append .btn-menu-item .fa-thumbtack.active:before {
                    content: "\f056";
                }

        .menu-sidebar-append .btn-menu-item .feature-desc {
            height: 100%;
            display: flex;
            gap: 2px;
            justify-content: center;
            flex-direction: column;
            flex: 1;
        }

            .menu-sidebar-append .btn-menu-item .feature-desc desc {
                font: normal normal 400 var(--s-12);
                color: var(--bs-gray-800);
            }

    .menu-sidebar-append.marketing i {
        color: #ff6aa2
    }

    .menu-sidebar-append.dashboad i {
        color: #5cb387
    }

    .menu-sidebar-append i.fa-cart-flatbed-boxes {
        color: var(--bs-warning);
    }

    .menu-sidebar-append i.fa-ticket {
        color: var(--bs-info);
    }

    .menu-sidebar-append.presence i {
        color: #FF5722;
    }

    .menu-sidebar-append.presence .btn-menu-item {
    }


    .menu-sidebar-append.menu-sidebar-quick button.btn-menu-item i:not(.fa-thumbtack) {
        background: var(--bs-gray-300);
        height: var(--px-36);
        width: var(--px-36);
        color: var(--bs-gray-800);
        border-radius: var(--px-36);
        min-width: var(--px-36);
        font-size: var(--px-20);
    }

    .menu-sidebar-append.menu-sidebar-quick button.btn-menu-item desc {
        display: none;
    }

.form--input input:focus,
.search-form:focus-within,
.search--form:focus-within,
input:focus {
    outline: 0;
    border: 1px solid var(--bs-main-300);
    box-shadow: 0 1px 6px var(--bs-main-200);
}

    .search-form:focus-within input {
        box-shadow: unset;
        border: 0;
    }

.form--input input[name="booker-company"]:focus {
    border-radius: 8px 8px 0 0;
    border-bottom: 0;
    box-shadow: rgb(0 0 0 / 15%) 0 3.4px 14.4px 0px;
}

.search--form {
    display: grid;
    align-items: center;
    min-height: var(--px-40);
    background: var(--bs-white);
    border-radius: var(--px-8);
    padding: var(--px-4) var(--px-12);
    grid-template-columns: var(--px-36) 1fr;
    border: 1px solid var(--bs-gray-300);
}

    .search--form i {
        color: var(--bs-main);
        font-size: var(--px-20);
    }

    .search--form input {
        all: unset;
        font: normal normal 400 var(--s-13);
    }

    .search--form:focus-within {
        outline: 0;
        border: 1px solid var(--bs-main);
        box-shadow: 0 1px 6px var(--bs-main-300);
    }

.container-body-layout {
    flex: 1;
    display: flex;
    overflow: hidden;
    padding: var(--px-16) 0;
    /* background: radial-gradient(1200px 400px at 10% -10%, var(--bs-main-200), transparent), radial-gradient(800px 300px at 90% -10%, var(--bs-main-50), transparent); */
    background: var(--bg-main);
}

.footer-timline {
    display: flex;
    align-items: center;
    max-height: var(--px-36);
    padding: 0 var(--px-24);
    justify-content: space-between;
    font: normal normal 400 var(--s-12);
    flex-direction: row;
    overflow: auto hidden;
    flex-wrap: nowrap;
    align-items: center;
    flex: 1;
    gap: var(--px-16);
    box-shadow: 0 -2px 12px #d1d1d180;
}

    .footer-timline .col-info {
        white-space: nowrap;
        display: flex;
        align-items: center;
        gap: 4px;
    }

        .footer-timline .col-info.flex-1 {
            flex: 1;
            justify-content: end;
        }

        .footer-timline .col-info img {
            width: var(--px-20);
            height: var(--px-20);
        }

        .footer-timline .col-info .power-by {
            font: normal normal 800 var(--s-10);
            display: flex;
            align-items: center;
            padding-top: 4px;
        }

.dropdown .col-info {
    display: flex;
    align-items: center;
    padding: 0 var(--px-16);
    justify-content: space-between;
    font: normal normal 400 var(--s-13);
    background: var(--bs-main-50);
    height: var(--px-28);
}

    .dropdown .col-info strong {
        font: normal normal 400 var(--s-13);
    }

.container-pms-append .pms--body {
    flex: 1;
    display: grid;
    gap: var(--px-12);
    grid-template-columns: repeat(12, 1fr);
    overflow: auto;
    grid-template-rows: max-content;
}

.container-pms-append .pms--box-show {
    grid-column: span 6;
    padding: var(--px-20);
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-radius: var(--px-12);
    background: var(--bs-white);
    border: 1px solid var(--bs-gray-300);
    padding-top: var(--px-12);
    overflow: hidden;
    min-height: var(--px-348);
}

.container-pms-append .box--header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .container-pms-append .box--header .name {
        color: var(--bs-gray-900);
        font: normal normal 600 var(--s-16);
    }

.container-pms-append .btn-filter {
    background: 0;
    border: 1px solid var(--bs-gray-300);
    width: var(--px-36);
    border-radius: var(--px-36);
    color: var(--bs-gray-900);
    overflow: hidden;
}

.container-pms-append .box--main-append {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    overflow: hidden;
    flex: 1;
}

.container-pms-append .info-summary {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    font: normal normal 400 var(--s-13);
    color: var(--bs-gray-700);
    flex-wrap: wrap;
}

    .container-pms-append .info-summary h3 {
        margin: 0;
        color: var(--bs-gray-900);
        font: normal normal 500 var(--s-20);
    }

.container-pms-append .chart-custom-percent {
    flex: 1;
    display: flex;
    gap: 8px;
    max-height: var(--px-48);
}

    .container-pms-append .chart-custom-percent .item-chart {
        gap: 4px;
        display: flex;
        flex-direction: column;
    }

.chart-custom-percent .item-chart .progress {
    border-radius: 8px;
    height: var(--px-40);
    background-size: 8px 8px;
    background-image: linear-gradient(45deg, transparent 46%, rgba(16, 25, 40, 0.2) 49%, rgba(16, 25, 40, 0.2) 51%, transparent 55%);
    background-color: #F1F1F1;
}

.chart-custom-percent .item-chart span {
    font: normal normal 400 var(--s-12);
}

.chart-custom-percent .item-chart strong {
    color: black;
    font: normal normal 500 var(--s-12);
}

.pms--box-show.transaction-type {
    grid-column: span 4;
}

.box--main-append {
}

    .box--main-append .list-item-box {
        display: flex;
        gap: var(--px-12);
        overflow: auto;
        min-height: var(--px-84);
        flex-direction: column;
        padding: 1px;
    }

    .box--main-append .item-status {
        padding: var(--px-12) var(--px-16);
        border-radius: var(--px-12);
        border: 1px solid var(--bs-gray-200);
        display: flex;
        gap: var(--px-12);
        position: relative;
        padding-left: var(--px-36);
        width: 100%;
    }


        .box--main-append .item-status pipe {
            width: 8px;
            border-radius: 4px;
            display: flex;
            background: var(--bs-main);
            position: absolute;
            height: var(--px-36);
            top: 50%;
            left: var(--px-16);
            transform: translateY(-50%);
        }

        .box--main-append .item-status .info-status {
            z-index: 1;
            display: flex;
            gap: var(--px-4);
            flex-direction: column;
        }

            .box--main-append .item-status .info-status thin {
                color: var(--bs-gray-600);
                font: normal normal 400 var(--s-13);
            }

        .box--main-append .item-status .prg-bar {
            position: absolute;
            z-index: 0;
            width: 100%;
            height: 100%;
            border-radius: var(--px-12);
            top: 0;
            left: 0;
        }


.item-status .info-status strong {
}

.item-status .info-status span {
    color: var(--bs-gray-600);
    font: normal normal 400 var(--s-13);
}

.box--main-append .list-progress-item {
    display: flex;
    gap: var(--px-24);
    overflow: auto;
    flex-direction: column;
}

.box--main-append .item-progress {
    display: flex;
    gap: var(--px-4);
    flex-direction: column;
}

    .box--main-append .item-progress .prg-name {
        color: var(--bs-gray-900);
        font: normal normal 600 var(--s-14);
    }

    .box--main-append .item-progress .prg-value {
        display: flex;
        gap: var(--px-8);
        align-items: center;
    }

.item-progress .prg-value .prg-main {
    background: var(--bs-gray-200);
    height: 6px;
    border-radius: 4px;
    width: 100%;
}

.item-progress .prg-value .prg-bar {
    background: var(--bs-main);
    height: 100%;
    border-radius: 4px;
    width: 50%;
}

.item-progress:nth-child(2) .prg-value .prg-bar {
    width: 20%;
    background: #4282ec;
}

.item-progress:nth-child(3) .prg-value .prg-bar {
    width: 80%;
    background: #f8a400;
}

.item-progress .prg-value .value {
    flex: 1;
    text-align: end;
    color: var(--bs-gray-900);
    font: normal normal 400 var(--s-13);
}

.pms--box-show.outlet-type {
    grid-column: span 4;
}

    .pms--box-show.outlet-type canvas {
    }

    .pms--box-show.outlet-type .list-item-type {
    }

.box--main-append .chart-ui-append {
    height: var(--px-200);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .box--main-append .chart-ui-append canvas {
        width: 100%;
        height: 100%;
    }

.box--main-append .list-item-type {
    flex: 1;
    display: flex;
    overflow: auto;
    flex-direction: column;
}

.box--main-append .pie-item {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: var(--px-36);
    border-bottom: 1px solid var(--bs-gray-300);
}

    .box--main-append .pie-item i {
        font-size: 6px;
        color: var(--bs-main);
    }

    .box--main-append .pie-item thin {
        color: var(--bs-gray-500);
    }

    .box--main-append .pie-item strong {
        flex: 1;
        color: var(--bs-main-950);
        font: normal normal 400 var(--s-13);
        text-transform: uppercase;
    }

    .box--main-append .pie-item span {
        color: black;
        font: normal normal 400 var(--s-13);
    }

    .box--main-append .pie-item:last-of-type {
        border: 0;
    }

.chart-bar-column {
    flex: 1;
    display: flex;
    gap: var(--px-12);
    align-items: flex-end;
    overflow: auto hidden;
}

    .chart-bar-column .bar-column {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 4px;
        height: 90%;
        position: relative;
        justify-content: flex-end;
    }

    .chart-bar-column .segment-bar {
        min-width: var(--px-56);
        max-width: var(--px-56);
        border-radius: 4px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        font: normal normal 600 var(--s-10);
        color: transparent;
        padding: 4px;
    }

        .chart-bar-column .segment-bar:hover {
            color: var(--bs-gray-800);
        }

    .chart-bar-column .value-bar {
        margin: 2px 0;
        text-align: center;
        font: normal normal 600 var(--s-14);
    }

    .chart-bar-column .label-bar {
        margin: 2px 0;
        text-align: center;
        color: var(--bs-gray-600);
        font: normal normal 400 var(--s-13);
    }

.legend-chart {
    display: flex;
    justify-content: center;
    gap: var(--px-20);
}

    .legend-chart .legend-item {
        display: flex;
        align-items: center;
        gap: 8px;
        font: normal normal 400 var(--s-13);
    }

    .legend-chart .legend-color {
        width: var(--px-16);
        height: var(--px-16);
        border-radius: 4px
    }

.allotment {
    background-color: #f8a400;
}

.waiting {
    background-color: #EEEEEE;
}

.seriBooking {
    background-color: #ffeece;
}

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

.definite {
    background-size: 8px 8px;
    background-image: linear-gradient(45deg, transparent 46%, rgba(16, 25, 40, 0.2) 49%, rgba(16, 25, 40, 0.2) 51%, transparent 55%);
    background-color: #F1F1F1;
}

.ooo {
    background-color: #D1D1D1;
}

.pms--box-show.revenue-type {
    grid-column: span 3;
}

.pms--box-show.occupancy-type {
    grid-column: span 6;
    overflow: unset;
}

.pms--box-show.payment-type {
    grid-column: span 4;
}

.pms--box-show.top-view {
    grid-column: span 3;
    background: 0;
    border: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--px-12);
}

    .pms--box-show.top-view .box--grid {
        background: white;
        border-radius: 12px;
        padding: var(--px-16);
        border: 1px solid var(--bs-gray-300);
        display: flex;
        gap: var(--px-8);
        flex-direction: column;
    }


        .pms--box-show.top-view .box--grid p {
            font: normal normal 400 var(--s-16);
        }

        .pms--box-show.top-view .box--grid i {
            display: flex;
            align-items: center;
            justify-content: center;
            width: var(--px-56);
            height: var(--px-56);
            border-radius: var(--px-48);
            background: var(--bs-main-100);
            font-size: var(--px-24);
            color: var(--bs-main);
        }

        .pms--box-show.top-view .box--grid:nth-child(2) i {
            background: #fef8ed;
            color: #f8a400;
        }

        .pms--box-show.top-view .box--grid:nth-child(3) i {
            background: #e9f1ff;
            color: #4282ec;
        }

        .pms--box-show.top-view .box--grid:nth-child(4) i {
            color: #9444c3;
            background: #faf0ff;
        }

        .pms--box-show.top-view .box--grid strong {
            flex: 1;
            display: flex;
            align-items: end;
            font: normal normal 600 var(--s-24);
        }

.box--main-append .row--table {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px var(--px-12);
    font: normal normal 400 var(--s-13);
}

    .box--main-append .row--table.header {
        top: 0;
        z-index: 1;
        border-radius: 6px;
        position: sticky;
        color: var(--bs-gray-600);
        background: var(--bg-num-availble);
        font: normal normal 600 var(--s-12);
    }

.box--main-append .item--table {
    flex: 2;
    display: flex;
    gap: 8px;
    align-items: center;
    font: normal normal 400 var(--s-13);
}

    .box--main-append .item--table i {
        font-size: var(--px-16);
        color: var(--bs-gray-500);
        min-width: var(--px-24);
        display: none;
        align-items: center;
        justify-content: center;
    }

    .box--main-append .item--table strong {
        font-weight: 500;
    }

.box--main-append .prg-value {
    flex: 1;
    display: flex;
    gap: var(--px-8);
    align-items: center;
}

.box--main-append .prg-main {
    height: 6px;
    border-radius: 4px;
    width: 100%;
    border-radius: 100%;
    position: relative;
}

.box--main-append .prg-bar {
    background: var(--bs-main);
    height: 100%;
    border-radius: 4px;
    width: 80%;
}

.box--main-append .item--table:last-of-type {
    max-width: var(--px-100);
    text-align: end;
    justify-content: end;
}

/* Login */
.container-pms-append .login-page {
    width: 100vw;
    height: 100svh;
    display: grid;
    overflow: hidden;
    grid-template-columns: 1fr 1fr;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 0;
    bottom: 0;
    gap: 0;
    z-index: 1111;
}

.login-page .login-start {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: var(--px-16);
    background: var(--bs-white);
    justify-content: space-between;
    padding-top: var(--px-32);
}

.login-page .logo-and-name {
    flex: 1;
    z-index: 1;
    width: 100%;
    display: flex;
    gap: var(--px-16);
    align-items: center;
    justify-content: center;
    max-height: max-content;
    flex-direction: column;
}

    .login-page .logo-and-name img {
        width: var(--px-188);
        height: var(--px-188);
        border-radius: var(--px-44);
    }

    .login-page .logo-and-name p {
        font: normal normal 700 var(--s-20);
    }

.login-page .login-main {
    width: 100%;
    z-index: 1;
    display: flex;
    gap: var(--px-32);
    align-items: center;
    overflow: hidden;
    flex-direction: column;
    justify-content: center;
    max-width: 100%;
    padding: 0 var(--px-12);
}

    .login-page .login-main .welcome {
        text-align: center;
        color: var(--bs-gray-500);
        font: normal normal 400 var(--s-16);
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

        .login-page .login-main .welcome span {
        }

        .login-page .login-main .welcome p {
            color: var(--bs-dark);
            font: normal normal 500 var(--s-32);
        }

.login-page .switch-acount {
    width: 100%;
    display: flex;
    align-items: center;
    height: var(--px-60);
    padding: var(--px-4);
    background: var(--bs-gray-200);
    border-radius: var(--px-16);
}

    .login-page .switch-acount button.switch {
        flex: 1;
        height: 100%;
        border-radius: var(--px-16);
        background: transparent;
        color: var(--bs-gray-600);
    }

        .login-page .switch-acount button.switch.active {
            background: var(--white);
            color: var(--bs-dark);
        }

.login-page .login-typing {
    width: 100%;
    display: flex;
    gap: var(--px-12);
    flex-direction: column;
}

.login-page .form-typing {
    display: grid;
    gap: var(--px-16);
    position: relative;
    min-height: var(--px-80);
    transition: all .4s;
    padding: var(--px-12) 4px;
    border-radius: var(--px-16);
    border: 1px solid var(--bs-gray-300);
    grid-template-columns: var(--px-80) 1fr var(--px-80);
}

    .login-page .form-typing i {
        display: flex;
        height: 100%;
        width: 100%;
        align-items: center;
        justify-content: center;
    }

    .login-page .form-typing::after {
        content: '';
        width: 1px;
        height: 50%;
        top: 50%;
        left: calc(var(--px-80) - var(--px-6));
        transform: translateY(-50%);
        background: var(--bs-gray-300);
        position: absolute;
    }

    .login-page .form-typing i:not(.fa-language) {
        color: var(--bs-gray-500);
    }

    .login-page .form-typing i.fa-circle-check.active {
        color: var(--bs-green);
    }

    .login-page .form-typing input {
        border: unset;
        outline: unset;
        box-shadow: unset;
        height: var(--px-40);
        font: normal normal 600 var(--s-16);
    }

        .login-page .form-typing input::placeholder {
            color: var(--bs-gray-500);
            font: normal normal 400 var(--s-16);
        }

.login-page .login-btn {
    height: var(--px-60);
    font: normal normal 500 var(--s-18);
}

.login-page .login-footer {
    z-index: 1;
    max-width: 80%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

    .login-page .login-footer p.desc {
        font: normal normal 400 var(--s-12);
        text-align: center;
        color: var(--bs-gray-300);
    }

    .login-page .login-footer .footer {
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--bs-gray-600);
        font: normal normal 500 var(--s-12);
    }

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

.login-page .login-end {
    height: 100%;
    overflow: hidden;
    background: var(--bs-main-50);
}

    .login-page .login-end img {
        height: 100%;
        /* width: 100%; */
        overflow: hidden;
        object-fit: scale-down;
    }

.login-page .title-valid-typing {
    display: flex;
    gap: var(--px-6);
    align-items: center;
    height: var(--px-16);
    font: italic normal 400 var(--s-14);
}

    .login-page .title-valid-typing i {
        opacity: .6;
    }

/* Hotel status */
.pms--hotelstatus {
    width: 50vw;
    display: flex;
    flex-direction: column;
    height: calc(100svh - var(--px-112));
}

    .pms--hotelstatus .pms--hotelstatus-body {
        flex: 1;
        display: flex;
        gap: var(--px-16);
        flex-direction: column;
        overflow: auto;
    }

    .pms--hotelstatus .pms-section--table {
        height: max-content;
        display: flex;
        flex-direction: column;
        /* border: 1px solid var(--bs-gray-300); */
    }

        .pms--hotelstatus .pms-section--table:last-of-type {
            border-bottom: 0px solid var(--bs-gray-300);
        }

        .pms--hotelstatus .pms-section--table.occupancyForecast .table-row {
            background: white;
            border: 1px dashed var(--bs-gray-500);
            margin: 6px;
            grid-template-columns: 1fr min-content !important;
        }

    .pms--hotelstatus .section-name {
        padding: var(--px-12);
        color: var(--bs-gray-900);
        font: normal normal 600 var(--s-16);
    }

    .pms--hotelstatus .section-table {
        width: 100%;
        display: flex;
        flex-direction: column;
        overflow: auto;
    }

    .pms--hotelstatus .table-row.header {
        padding: var(--px-12) var(--px-24);
        background: var(--bg-num-availble);
        color: black;
        font: normal normal 500 var(--s-14);
    }

    .pms--hotelstatus .table-row {
        width: -webkit-fill-available;
        display: grid;
        align-items: center;
        padding: 10px var(--px-24);
        text-transform: capitalize;
        font: normal normal 400 var(--s-13);
        grid-template-columns: minmax(var(--px-120), var(--px-180)) var(--px-80) var(--px-80);
        border-bottom: 1px dashed var(--bs-gray-300);
    }

        .pms--hotelstatus .table-row input{
            border-radius: 6px;
            text-align: center;
            padding: 0 4px;
            border: 0;
            text-decoration: underline;
            color: var(--bs-main);
            background: 0;
        }

                .pms--hotelstatus .table-row .disc_type {
                    border-radius: var(--px-6);
                    padding: 0 var(--px-4);
                    border: 0;
                    text-decoration: underline;
                    color: var(--bs-main);
                    background: 0;
                    cursor: pointer;
                    font: normal normal 600 var(--s-13);
                }

            .pms--hotelstatus .table-row input:focus {
                border: 0;
                outline: 0;
                background: var(--bs-main-200);
            }

        .pms--hotelstatus .table-row:last-of-type {
            border-bottom: 0px dashed var(--bs-gray-300);
        }

        .pms--hotelstatus .table-row span:not(.name) {
            text-align: center;
            color: black;
            font-weight: 500;
            white-space: nowrap;
        }

        .pms--hotelstatus .table-row span:first-of-type {
            text-align: start;
        }


    .pms--hotelstatus .pms-section--table.house-keeping .section-table {
        margin-right: 0;
    }

    .pms--hotelstatus .pms-status-row {
        display: grid;
        max-width: var(--px-998);
        background: white;
        overflow: auto;
        grid-template-columns: max-content 1fr;
        margin: 8px;
        padding: 0px;
        border-radius: 8px;
        gap: 8px;
    }

    .pms--hotelstatus .status-row-col {
        gap: 8px;
        display: flex;
        border-radius: 8px;
        flex-direction: column;
        border: 1px solid var(--bs-gray-300);
    }

    .pms--hotelstatus .pms-section--table.eod-projection .table-row {
        grid-template-columns: var(--px-200) repeat(3, 1fr);
    }

    .pms--hotelstatus .table-row:not(.header) span.name {
        font-weight: 400 !important;
        color: var(--bs-gray-600) !important;
    }

.pms-form-filter {
    flex: 1;
    display: flex;
    gap: var(--px-16);
    align-items: center;
    max-height: min-content;
    justify-content: flex-end;
}

    .pms-form-filter select {
        border: 0;
        outline: 0;
    }

    .pms-form-filter .select-pms {
        width: var(--px-36);
        color: var(--bs-gray-900);
        background: 0;
        height: var(--px-32);
        font: normal normal 400 var(--s-13);
        appearance: none;
        flex: 1;
        display: flex;
        align-items: center;
        padding-left: 8px;
    }

    .pms-form-filter .btn-filter {
        min-width: var(--px-200);
        background: white;
        font: normal normal 400 var(--s-13);
        display: flex;
        align-items: center;
        padding: 0 var(--px-12);
        min-height: var(--px-40);
    }

    .pms-form-filter .search--form {
        min-width: var(--px-200);
        background: white;
        font: normal normal 400 var(--s-13);
        min-height: var(--px-44);
    }

    .pms-form-filter.start-f {
        justify-content: flex-start;
    }

/* Hotel status */
.pms--room-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    gap: var(--px-16);
    border-radius: 6px;
    border: 1px solid var(--bs-gray-300);
    box-shadow: 0 2px 10px #d1d1d161;
    overflow: hidden;
    margin-top: 12px;
}

.pms-section--calendar {
    flex: 1;
    overflow: auto;
    display: flex;
    flex-direction: column;
    border-radius: var(--px-8);
    background: white;
    scroll-behavior: smooth;
    /* border: 1px solid var(--bs-gray-300); */
}

    .pms-section--calendar .room--row {
        width: max-content;
        display: flex;
        align-items: center;
        border-bottom: 1px solid var(--bs-gray-300);
        min-height: var(--px-40);
        max-height: var(--px-40);
        position: relative;
        z-index: 19;
    }

        .pms-section--calendar .room--row.header {
            background: var(--bs-main-50);
            color: var(--bs-gray-900);
            font: normal normal 600 var(--s-16);
        }

        .pms-section--calendar .room--row:not(.header):hover:after {
            content: '';
            cursor: pointer;
            position: absolute;
            background: #00000015;
            height: 100%;
            width: 100%;
            z-index: 12;
        }

        .pms-section--calendar .room--row.header {
            top: 0;
            z-index: 21;
            position: sticky;
            background: white;
            font: normal normal 600 var(--s-16);
            box-shadow: 0 2px 10px #cfcfcfc9;
            min-height: var(--px-44);
            max-height: var(--px-44);
        }

        .pms-section--calendar .room--row.body {
            min-height: unset;
            background: white;
        }

            .pms-section--calendar .room--row.body.have-backgr:nth-child(2n+1) {
                background: var(--bs-main-50);
            }

        .pms-section--calendar .room--row:not(.body, .header) {
            background: white;
        }

        .pms-section--calendar .room--row.ooi {
        }

    .pms-section--calendar .col {
        flex: 1;
        display: flex;
        text-align: center;
        align-items: center;
        min-width: var(--px-64);
        max-width: var(--px-64);
        justify-content: center;
        height: -webkit-fill-available;
        font: normal normal 500 var(--s-11);
        color: var(--bs-gray-800);
    }

        .pms-section--calendar .col:not(.type) {
            border-right: 1px solid var(--bs-gray-300);
        }

        .pms-section--calendar .col.room {
            justify-content: center;
            max-width: var(--left-table-fit);
            min-width: var(--left-table-fit);
            font-weight: 700;
            position: sticky;
            left: 0;
            background: inherit;
            padding-left: var(--px-8);
            z-index: 20;
            align-items: flex-start;
            text-align: start;
            color: black;
            display: flex;
            flex-direction: column;
        }

            .pms-section--calendar .col.room span {
                color: var(--bs-gray-600);
                font-weight: 500;
            }

            .pms-section--calendar .col.room p {
                font-size: var(--px-12);
            }

            .pms-section--calendar .col.room button.btn-filter {
                width: var(--px-160);
                background: white;
                border-radius: 4px;
                margin: auto;
                position: relative;
                left: calc(-1 * var(--px-8));
                font: normal normal 600 var(--s-16);
                height: 80%;
                gap: 4px;
            }

    .pms-section--calendar .room--row.header:not(.body) .col.room {
        border: 0;
        align-items: flex-start;
    }

    .pms-section--calendar .room--row:not(.body, .header) .col.room {
        align-items: center;
    }

    .pms-section--calendar .col.day {
    }

    .pms-section--calendar .section-col-room {
        flex: 1;
        display: flex;
        height: -webkit-fill-available;
        flex-direction: column;
        background: inherit;
        position: sticky;
        left: var(--left-table-fit);
        z-index: 13;
        z-index: 19
    }


    .pms-section--calendar .group-col {
        flex: 1;
        display: flex;
        min-height: var(--px-36);
        align-items: center;
        background: inherit;
        z-index: 19
    }

        .pms-section--calendar .group-col.main:not(:last-of-type) {
            border-bottom: 1px dashed var(--bs-gray-400);
        }

.room--row.header .col {
    gap: 2px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

    .room--row.header .col strong {
        font-weight: 600;
        color: black;
        font-size: var(--px-12);
        text-transform: uppercase;
    }

    .room--row.header .col span {
        color: var(--bs-gray-700);
        font-weight: 500;
    }

    .room--row.header .col:not(.type, .tl, .room).sat,
    .pms-section--calendar .group-col .col:not(.type, .tl, .room).sat {
        background: #fef8ed;
    }

    .room--row.header .col:not(.type, .tl, .room).sun,
    .pms-section--calendar .group-col .col:not(.type, .tl, .room).sun {
        background: #ffdfd5;
    }

.room--row .col.type {
    font-weight: 700;
    position: sticky;
    left: var(--left-table-fit);
    background: inherit;
}

.room--row .col.tl {
    z-index: 2;
    font-weight: 700;
    position: sticky;
    background: inherit;
    left: var(--left-table-fit);
    box-shadow: 0 2px 10px #cfcfcfc9;
}

.pms-section--calendar .room--row.bold .wrap-line-1,
.pms-section--calendar .room--row.bold .col {
    color: var(--bs-gray-900);
    font-weight: 700;
}

.divider {
    margin: auto;
    width: calc(100% - var(--px-2));
    border-top: 1px solid var(--bs-gray-400);
}

.btn-close-popover {
    display: flex;
    position: absolute;
    left: calc(var(--px-60) * -1);
    top: var(--px-4);
    background: white;
    box-shadow: var(--shadow) !important;
    height: var(--px-48);
    width: var(--px-48);
    border-radius: var(--px-48);
    color: black;
    font-size: var(--px-20);
    border: 1px solid var(--bs-gray-300);
}

    .btn-close-popover.no-position {
        position: unset;
        border: 1px solid var(--bs-gray-300);
    }

.btn-menu-item img {
    height: var(--px-36);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border-radius: 100%;
    /* background: var(--bs-gray-200); */
    position: absolute;
    right: 0;
    border: 1px solid var(--bs-gray-300);
}

.container-pms-append .box--main-append-transaction {
    overflow: hidden;
}

.box--main-append .prg-main.circle {
    width: 28px;
    outline: 4px solid var(--bs-gray-300);
    height: 28px;
}

.progress-circle {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg) scale(1.15);
    /* Start from top */
    position: absolute;
}

path {
    transition: stroke-dashoffset 0.5s ease;
}

.front-circle {
    stroke: var(--bs-main);
    /* The progress circle */
    stroke-width: 6px;
    fill: none;
}

.pms--box-show.outlet-type .box--main-append {
    flex-direction: row;
    align-items: center;
}

.section-end-header {
    display: flex;
    gap: var(--px-12);
    align-items: center;
}

    .section-end-header .btn-filter {
        width: max-content;
        background: var(--bs-white);
        font: normal normal 400 var(--s-13);
    }

        .section-end-header .btn-filter .days {
            color: var(--bs-main);
        }

        .section-end-header .btn-filter .fa-pipe {
            color: var(--bs-gray-600);
            font-weight: 600
        }

.nodata-found-display {
    top: 0;
    z-index: 99;
    width: 100%;
    height: 100%;
    display: flex;
    gap: var(--px-8);
    background: white;
    position: absolute;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    color: var(--bs-gray-700);
    font: normal normal 400 var(--s-13);
}

    .nodata-found-display img {
        height: var(--px-60);
    }

.group-filter-box {
    flex: 1;
    display: flex;
    gap: var(--px-8);
    align-items: center;
    max-width: var(--px-200);
    justify-content: flex-end;
}


button.btn-filter-selected {
    width: max-content;
    display: flex;
    height: var(--px-32);
    padding: 0 0 0 var(--px-16);
    text-transform: capitalize;
    border-radius: var(--px-16);
    justify-content: space-between;
    font: normal normal 400 var(--s-13);
    background: var(--bs-main-50);
    color: var(--bs-dark);
    border: 2px solid var(--bs-main);
}

    button.btn-filter-selected:hover {
        background: var(--bs-gray-100);
    }

    button.btn-filter-selected p {
        white-space: nowrap;
        font: normal normal 400 var(--s-13);
        white-space: nowrap;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    button.btn-filter-selected .fa-circle {
        font-size: 4px;
        color: var(--bs-gray-500);
    }

    button.btn-filter-selected p.fa-light {
        min-width: var(--px-32)
    }

.group-filter-box button.btn-filter-selected:last-of-type {
    overflow: unset;
    position: relative;
    margin-right: var(--px-12);
}

    .group-filter-box button.btn-filter-selected:last-of-type::after {
        width: 2px;
        content: '';
        height: 80%;
        position: absolute;
        background: var(--bs-gray-500);
        right: calc(-1 * var(--px-22));
    }

    .group-filter-box button.btn-filter-selected:last-of-type::after {
        display: none;
    }


.dropdown-occupancy.show {
    padding: var(--px-16);
    display: flex !important;
    flex-direction: column;
    gap: 4px;
    box-shadow: 0 2px 20px #d1d1d1;
    border-radius: var(--px-12);
}

.dropdown-occupancy .form--input {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font: normal normal 400 var(--s-13);
}

    .dropdown-occupancy .form--input span {
        color: var(--bs-gray-700);
    }

    .dropdown-occupancy .form--input input {
        all: unset;
        width: var(--px-160);
        height: 100%;
        padding-left: var(--px-12);
        font-size: 14px;
    }

.dropdown-occupancy .btn-group {
    border-top: 1px solid var(--bs-gray-300);
    display: flex;
    align-items: center;
    justify-content: end;
    gap: var(--px-12);
    padding-top: var(--px-12);
}

.dropdown-occupancy .btn-filter-pop {
    flex: 1;
    background: var(--bs-main);
    color: var(--white);
    font: normal normal 500 var(--s-14);
}

    .dropdown-occupancy .btn-filter-pop.btn-clear {
        color: var(--bs-gray-800);
        background: unset;
    }

.dropdown-occupancy .group-fil {
    display: flex;
    gap: var(--px-12);
    align-items: center;
    margin: 8px 0;
    flex-wrap: wrap;
}

.dropdown-occupancy .header-adv {
    color: black;
    font: normal normal 500 var(--s-16);
    border-bottom: 1px solid var(--bs-gray-300);
    padding-bottom: 12px;
}

.btn-filter-date-only-box {
    outline: 0;
    background: unset;
    border: 1px solid var(--bs-gray-300);
    border-radius: 6px;
    height: var(--px-44);
    color: var(--bs-gray-900);
    font: normal normal 500 var(--s-16);
    display: flex;
    justify-content: start;
    align-items: center;
    padding: 0 var(--px-16);
}

    .btn-filter-date-only-box i {
        color: var(--bs-gray-700);
    }

.btn-filter.show {
    color: white;
    background: var(--bs-main) !important;
}

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

    .header-main-menu .btn-edit-menu {
        background: white;
        width: var(--px-40);
        height: var(--px-40);
        color: var(--bs-main);
        font-size: var(--px-16);
        border-radius: var(--px-40);
        box-shadow: var(--shadow-qs-light);
        border: 1px solid var(--bs-main-300);
    }

        .header-main-menu .btn-edit-menu.editing {
            background: var(--bs-main);
            min-width: var(--px-80);
            height: var(--px-40);
            color: white;
        }

        .header-main-menu .btn-edit-menu i {
            pointer-events: none;
        }

.menu-sidebar-append-manual-quick:not(.allow-editing) .fa-solid.fa-thumbtack {
    display: none;
}

.pms--box-show.top-view.hotel-status-append {
    grid-template-columns: repeat(4, 1fr);
    min-height: unset;
    overflow: unset;
}

    .pms--box-show.top-view.hotel-status-append .box--grid {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
    }

.pms-section--search {
    flex: 1;
    gap: var(--px-16);
    display: flex;
    overflow: hidden;
    flex-direction: column;
}

    .pms-section--search .lst-group-ticket-view-append {
        flex: 1;
        display: flex;
        overflow: auto;
        flex-direction: column;
        border-radius: 6px;
        background: white;
        border: 1px solid var(--bs-gray-300);
    }

    .pms-section--search::-webkit-scrollbar-track {
        border-radius: var(--px-8);
        background-color: #FFFFFF;
    }

    .pms-section--search::-webkit-scrollbar {
        width: 12px;
        height: 8px;
        background-color: #F5F5F5;
    }

    .pms-section--search::-webkit-scrollbar-thumb {
        border-radius: var(--px-8);
        background-color: var(--bs-gray-300);
    }

    .pms-section--search .group-ticket-view {
        /* width: fit-content; */
        display: flex;
        gap: var(--px-12);
        position: relative;
        padding: 0 var(--px-12);
        border-bottom: 1px solid var(--bs-gray-400);
    }

        .pms-section--search .group-ticket-view:first-of-type {
            position: sticky;
            top: 0;
            z-index: 1;
            background: var(--bg-num-availble);
            box-shadow: 0 2px 10px #dcdcdc;
        }

        .pms-section--search .group-ticket-view:hover {
            cursor: pointer;
            background: var(--bs-gray-100);
        }

        .pms-section--search .group-ticket-view.header {
            top: 0;
            border: 0;
            z-index: 1;
            position: sticky;
            background: var(--bs-white);
            box-shadow: var(--shadow-qs-light);
        }

        .pms-section--search .group-ticket-view .group-info {
            flex: 1;
            display: flex;
            align-items: center;
            flex-direction: row;
            height: var(--px-40);
            justify-content: flex-start;
            font: normal normal 400 var(--s-13);
        }

            .pms-section--search .group-ticket-view .group-info number {
                display: flex;
                height: var(--px-32);
                align-items: center;
                padding: initial;
                font: normal normal 600 var(--s-12);
                color: var(--bs-main);
            }

            .pms-section--search .group-ticket-view .group-info date {
                flex: 1;
                display: flex;
                font: normal normal 300 var(--s-18);
                flex-direction: row;
                justify-content: center;
                align-items: center;
            }

                .pms-section--search .group-ticket-view .group-info date strong {
                    display: flex;
                    align-items: center;
                    min-height: var(--px-40);
                    justify-content: center;
                    /*background: var(--bs-main-50);*/
                    max-width: var(--px-40);
                    min-width: var(--px-40);
                    border-radius: 100%;
                    margin: auto;
                    flex: unset;
                }

                    .pms-section--search .group-ticket-view .group-info date strong.today {
                        background: var(--bs-main-100);
                        color: var(--bs-main-900);
                    }

                .pms-section--search .group-ticket-view .group-info date span {
                    display: flex;
                    align-items: center;
                    height: var(--px-40);
                    width: 100%;
                    color: var(--bs-gray-600);
                    font-size: var(--px-13);
                    justify-content: center;
                    min-width: var(--px-40);
                    flex: unset;
                }

            .pms-section--search .group-ticket-view .group-info .folio {
                display: grid;
                align-items: center;
                background: var(--bs-main-50);
                grid-template-columns: var(--px-48) 1fr;
                border-radius: var(--px-20);
                padding: 0 var(--px-10);
                font: normal normal 500 var(--s-12);
            }

            .pms-section--search .group-ticket-view .group-info date,
            .pms-section--search .group-ticket-view .group-info span,
            .pms-section--search .group-ticket-view .group-info strong {
                flex: 1;
                min-width: var(--px-80);
            }

            .pms-section--search .group-ticket-view .group-info .btn-expand {
                flex: 1;
                min-width: var(--px-40);
                max-width: var(--px-40);
                display: flex;
                align-items: center;
                justify-content: center;
                height: var(--px-24);
                border-radius: 6px;
                left: -8px;
                position: relative;
            }

                .pms-section--search .group-ticket-view .group-info .btn-expand.fa-rotate-180 {
                    color: var(--bs-orange);
                }

        .pms-section--search .group-ticket-view .list-group-booked {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        .pms-section--search .group-ticket-view .box-regis {
            width: 100%;
            display: grid;
            height: var(--px-40);
            grid-gap: var(--px-16);
            border-radius: 0;
            align-items: center;
            padding: 0 var(--px-16);
            font: normal normal 400 var(--s-13);
            grid-template-columns: var(--px-60) repeat(3, minmax(var(--px-160), var(--px-228))) repeat(3, minmax(var(--px-44), var(--px-60)));
            justify-items: start;
            text-align: start;
            border-left: 1px solid var(--bs-gray-300);
        }

            .pms-section--search .group-ticket-view .box-regis.child-folio {
            }

            .pms-section--search .group-ticket-view .box-regis.child-folio {
                border-top: 1px dashed var(--bs-gray-300);
            }

                .pms-section--search .group-ticket-view .box-regis.child-folio:last-of-type {
                    border-bottom: 0;
                }

            .pms-section--search .group-ticket-view .box-regis .small {
                text-align: center;
                width: 100%;
                font: normal normal 700 var(--s-13);
            }

        .pms-section--search .group-ticket-view.is-epand {
            background: #ffe5d670;
        }

    .pms-section--search .small.status {
        padding: 4px 6px;
        border-radius: var(--px-8);
        background: var(--bs-main-200);
        font-size: 10px !important;
        font-weight: 600 !important;
        padding: 0 !important;
    }

.filter-form-id-layout {
    flex: 1;
    display: flex;
    align-items: center;
    height: 100%;
    gap: 12px;
    border-bottom: 1px solid var(--bs-gray-500);
}

    .filter-form-id-layout .btn-filter-status-ticket {
        background: unset;
        font-weight: 600;
        color: var(--bs-gray-900);
        height: 100%;
    }

        .filter-form-id-layout .btn-filter-status-ticket i.fa-circle-dot {
            display: none !important;
        }

        .filter-form-id-layout .btn-filter-status-ticket.active {
            font-weight: 600;
            position: relative;
            color: var(--bs-gray-900);
        }

            .filter-form-id-layout .btn-filter-status-ticket.active span {
                position: relative;
                z-index: 2;
            }

        .filter-form-id-layout .btn-filter-status-ticket i {
            display: none;
        }

        .filter-form-id-layout .btn-filter-status-ticket.active i {
            font-weight: 600;
            display: block;
            z-index: 3;
        }

        .filter-form-id-layout .btn-filter-status-ticket.active::before {
            all: unset;
            content: '';
            height: 100%;
            width: 90%;
            position: absolute;
            z-index: 0;
            /* background: linear-gradient( 180deg, rgb(208 255 206) 0%, rgb(229 255 224 / 38%) 36% 100%); */
        }

        .filter-form-id-layout .btn-filter-status-ticket.active::after {
            content: '';
            height: 2px;
            width: 100%;
            background: var(--bs-main-500);
            position: absolute;
            z-index: 1;
            border-radius: 0;
            bottom: 0;
        }

.search-form {
    display: flex;
    align-items: center;
    gap: var(--px-12);
    height: var(--px-40);
    padding: 4px var(--px-12);
    background: white;
    border-radius: 8px;
    border: 1px solid var(--bs-gray-300);
}

    .search-form .fa-magnifying-glass {
        font-size: var(--px-16);
    }

    .search-form input {
        border: 0;
        outline: 0;
        background: 0;
        font: normal normal 400 var(--s-13);
        height: 100%;
        box-shadow: unset;
        width: 100%;
    }

.form-filter-folio {
    flex: 1;
    width: 100%;
    display: flex;
    gap: var(--px-8);
    align-items: flex-end;
    padding: 0;
    border-radius: 6px;
    max-height: var(--px-88);
    flex-wrap: wrap;
}

.grid-group-ticket-view-append {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--px-320), 1fr));
    grid-gap: 16px;
    overflow: auto;
    border-radius: 6px;
    grid-auto-rows: max-content;
    padding: 2px;
}

    .grid-group-ticket-view-append .box-ticket-room {
        display: flex;
        flex-direction: column;
        border: 1px solid var(--bs-gray-300);
        border-radius: 8px;
        gap: 8px;
        background: white;
        max-height: var(--px-280);
        min-height: var(--px-280);
    }

        .grid-group-ticket-view-append .box-ticket-room:hover {
            cursor: pointer;
            box-shadow: 0 6px 6px var(--bs-gray-400);
        }

/* ===== Card Root ===== */
.box-ticket-room {
}

    /* Click target helper (optional) */
    .box-ticket-room[onclick] {
    }

    /* ===== Sections ===== */
    .box-ticket-room .box-info {
        display: flex;
        flex-direction: column;
    }

    .box-ticket-room .grid-12 {
    }

    .box-ticket-room .border-bot {
    }

    .box-ticket-room .overflow-auto {
    }

    .box-ticket-room .bg-white {
    }

    /* ===== Top: Booker & Room ===== */
    .box-ticket-room .guest-name-flex {
    }

        .box-ticket-room .guest-name-flex.booker {
            display: flex;
            gap: 4px;
            align-items: flex-start;
            padding: var(--px-12) var(--px-16);
            justify-content: flex-start;
        }

    .box-ticket-room .special {
        flex: 1;
        font: normal normal 500 var(--s-16);
    }

    .box-ticket-room .room-code {
        z-index: 1;
        color: var(--bs-main);
        background: var(--bs-main-50);
        font: normal normal 500 var(--s-12);
        border-radius: 4px;
        padding: 4px 8px;
        border: 1px solid var(--bs-main-50);
    }

    /* ===== Schedule Row ===== */
    .box-ticket-room .guest-name-flex.schedule {
        display: flex;
        align-items: center;
        padding: var(--px-12);
        border-radius: 0;
        border: 1px dashed var(--bs-gray-400);
        border-width: 1px 0 1px 0;
    }

    .box-ticket-room .time-due-date {
        flex: 1;
        gap: 2px;
        display: flex;
        font: normal normal 500 var(--s-18);
        flex-direction: column;
        justify-content: space-between;
    }

        .box-ticket-room .time-due-date:last-of-type {
            text-align: end;
        }

        .box-ticket-room .time-due-date strong {
            font-weight: 600;
            font-size: var(--px-16);
        }

    .box-ticket-room .time-year {
        color: var(--bs-gray-600);
        font: normal normal 500 var(--s-12);
    }

    .box-ticket-room .icon-next {
        display: flex;
        flex-direction: column;
        color: var(--bs-gray-600);
        border-radius: 0;
        font: normal normal 500 var(--s-12);
        background: 0;
        position: relative;
        height: 100%;
        justify-content: center;
    }

        .box-ticket-room .icon-next::after {
            content: '';
            position: absolute;
            top: 88%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: var(--px-124);
            border-bottom: 2px dashed var(--bs-gray-400);
            z-index: 5;
        }

        .box-ticket-room .icon-next i {
            background: white;
            z-index: 2;
            padding: 8px;
            font: normal normal 500 var(--s-12);
            color: var(--bs-gray-700);
        }

    /* ===== Room Information Section ===== */
    .box-ticket-room .info-room-section {
        display: grid;
        position: relative;
        padding: 8px 0 4px;
        grid-template-columns: repeat(4, 1fr);
    }

    .box-ticket-room .item-i-room {
        gap: 4px;
        display: flex;
        flex-direction: column;
        font: normal normal 500 var(--s-12);
        text-align: center;
        border-right: 2px solid var(--bs-gray-200);
    }

        .box-ticket-room .item-i-room:last-of-type {
            border: 0;
        }

        .box-ticket-room .item-i-room span {
            color: var(--bs-gray-600);
            font-size: 10px;
            text-transform: uppercase;
            font-weight: 600;
        }

        .box-ticket-room .item-i-room strong {
            font: normal normal 600 var(--s-13);
            color: #ff7400;
        }

    /* ===== Guest Details Section ===== */
    .box-ticket-room .info-detail-guests {
        flex: 1;
        display: flex;
        gap: var(--px-8);
        flex-direction: column;
        overflow: auto;
        max-height: var(--px-104);
        padding: var(--px-12) var(--px-16);
        border-top: 1px dashed var(--bs-gray-400);
    }

    .box-ticket-room .row-guest {
        display: flex;
        gap: 8px;
        align-items: center;
        min-height: var(--px-20);
        font: normal normal 500 var(--s-12);
    }

        .box-ticket-room .row-guest i {
            color: var(--bs-gray-500);
            font-size: var(--px-12);
            font-weight: 400;
        }

        .box-ticket-room .row-guest .wrap-line-1 {
            flex: 1;
        }

        .box-ticket-room .row-guest .schedule {
        }

    /* ===== Notes Section ===== */
    .box-ticket-room .box-note {
        margin: var(--px-12);
        padding: 6px;
        border-radius: 6px;
        margin-top: 0;
        border: 1px dashed var(--bs-gray-300);
    }

    .box-ticket-room .bg-white {
    }

    .box-ticket-room .text-note {
        font: normal normal 400 var(--s-12);
    }

    .box-ticket-room .text-gray {
    }

    .box-ticket-room .dis-none {
    }

    .box-ticket-room .wrap-line-2 {
    }

    /* ===== Share Button ===== */
    .box-ticket-room .group-box-btn-share {
    }

    .box-ticket-room .icon-btn {
    }

        .box-ticket-room .icon-btn i {
        }

        .box-ticket-room .icon-btn:hover {
        }

        .box-ticket-room .icon-btn:focus {
        }

        .box-ticket-room .icon-btn:active {
        }

    /* ===== Font Awesome Scoped ===== */
    .box-ticket-room .fa-regular {
    }

    .box-ticket-room .fa-duotone {
    }

    .box-ticket-room .fa-light {
    }


/* Marketing */
.container-pms-append div.pms--marketing {
    display: flex;
    height: 100%;
    width: 100%;
    overflow: hidden;
    flex-direction: row;
    padding: 0;
    gap: 0;
}

/* Calendar */
.header-timeline {
    display: flex;
    padding: var(--px-16) 0;
    flex-direction: column;
    gap: var(--px-12);
}

    .header-timeline .title-date {
        font: normal normal 400 var(--s-18);
    }

.title-page {
    flex: 1;
    color: var(--bs-dark);
    font: normal normal 700 var(--s-24);
}

.area-filter-calendar {
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
    flex-wrap: wrap;
    justify-content: space-between;
}

.filter-calendar {
    display: flex;
    gap: var(--px-16);
}

#select-date-range-picker {
    height: var(--px-40);
    min-width: var(--px-120) !important;
}

button.drop-btn {
    width: 100%;
    justify-content: start;
    height: var(--px-40);
    border: unset;
    color: var(--bs-gray-700);
    border-radius: var(--px-4);
    font: normal normal 400 var(--s-13);
}

button.no-backgr {
    background: unset;
    color: var(--bs-dark);
    white-space: nowrap;
    font: normal normal 600 var(--s-14);
}

.list-duration-date {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--px-4);
    height: 100%;
    border-radius: var(--px-36);
    background: var(--bs-white);
    border: 1px solid var(--bs-gray-300);
}

    .list-duration-date button {
        width: var(--px-108);
        height: var(--px-28);
        color: var(--bs-dark);
        background: var(--bs-white);
        padding: 0 var(--px-4);
        border-radius: var(--px-16);
    }

        .list-duration-date button.active {
            color: white;
            background: var(--bs-main);
        }

.calendar-timeline {
    height: 100%;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    background: white;
    border-radius: var(--px-8);
    border-radius: var(--px-16);
    border: 1px solid var(--bg-room-type);
    position: relative;
}

    .calendar-timeline .box--room.has-header {
        border-bottom: none;
    }

    .calendar-timeline .box--header-room .header-room-dropdown {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: var(--bg-num-availble);
        padding: 0 var(--px-12) 0 0;
        position: sticky;
        left: 0;
        z-index: 4;
        cursor: pointer;
    }

        /*.calendar-timeline .box--header-room .header-room-dropdown:hover {
            background-color: yellow;
        }*/

        .calendar-timeline .box--header-room .header-room-dropdown .customIcon {
            height: 100%;
            display: flex;
            align-items: center;
            width: var(--px-24);
            height: var(--px-24);
            border: 2px solid var(--bs-gray-100);
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
            background: var(--bs-gray-100);
            cursor: pointer;
        }


    .calendar-timeline .box--header-room .toggle-room {
        cursor: pointer;
    }

    .calendar-timeline .box--header-room::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        border: 1px solid #ecf0f1;
    }

#calendar-header-append-total {
    position: sticky;
    left: 0;
    background: white;
    z-index: 10;
}

#calendar-header-append-date {
    position: sticky;
    top: 0;
    background: white;
    z-index: 10;
}

.calendar-timeline .calendar-header {
    flex: 1;
    z-index: 2;
    display: flex;
    overflow: hidden;
    max-height: var(--px-64);
    background: var(--bs-white);
    box-shadow: 4px 2px 4px var(--bs-gray-400);
}

.calendar-timeline .calendar-total {
    flex: 1;
    z-index: 2;
    display: flex;
    overflow: hidden;
    max-height: var(--px-64);
    background: var(--bs-white);
    box-shadow: 4px 2px 4px var(--bs-gray-400);
}

.calendar-header-total {
    display: flex;
    /* position: sticky; */
    left: 0;
    z-index: 4;
    background: #fff;
    border-bottom: 1px solid #ddd;
    width: 100%;
}

.calendar-timeline .box--month {
    height: 100%;
    display: flex;
    padding: var(--px-12) 0;
    border-right: 1px solid var(--bg-room-type);
    border-top: 1px solid var(--bg-room-type);
}

.calendar-timeline .total-month {
    max-width: var(--px-320);
    min-width: var(--px-320);
    height: 100%;
    display: flex;
    padding: var(--px-12);
    border-right: 1px solid var(--bg-room-type);
}

.calendar-total .box {
    height: 100%;
    display: flex;
    padding: var(--px-12);
    justify-content: flex-start;
    align-items: center;
    width: calc(100% - 300px);
    overflow-x: hidden;
}

    .calendar-total .box p {
        font: normal normal 600 var(--s-14);
    }

.calendar-timeline .total-month:first-of-type {
    left: 0;
    z-index: 6;
    position: sticky;
    background: white;
}

.calendar-timeline .box--date {
    display: flex;
    position: relative;
    min-width: var(--w-day-c);
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
}

.calendar-timeline .box--total-room {
    display: flex;
    position: relative;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: row;
    width: 100%;
    padding: var(--px-12) 0;
}

.calendar-timeline .box--date p {
    padding-right: var(--px-4);
    text-transform: capitalize;
    color: var(--bs-gray-700);
    font: normal normal 600 var(--s-14);
}

    .calendar-timeline .box--date p.percent {
        border: 1px solid var(--bg-num-availble);
        padding: var(--px-8);
        border-radius: var(--px-20);
        background-color: var(--bg-num-availble);
        color: var(--text-room-color);
        font-weight: 500;
        font: normal normal 500 var(--s-12);
    }

.calendar-timeline .box--date .title-room {
    padding-right: var(--px-4);
    text-transform: capitalize;
    color: var(--bs-gray-700);
    font: normal normal 600 var(--s-16);
}

.calendar-timeline .box--date thin {
    color: var(--bs-gray-500);
    font: normal normal 300 var(--s-14);
}

.calendar-timeline .box--date span {
    color: var(--bs-gray-700);
    font: normal normal 400 var(--s-13);
}

.calendar-timeline .box--date:not(:last-of-type)::after {
    right: -1px;
    width: 1px;
    content: '';
    bottom: calc(-1 * var(--px-12));
    position: absolute;
    height: calc(100% + var(--px-24));
    background: var(--bs-gray-300);
}

.calendar-timeline .calendar-general {
    flex: 1;
    display: flex;
    overflow: auto;
    position: relative;
    flex-direction: column;
}

    .calendar-timeline .calendar-general .general-col {
        top: 0;
        left: 0;
        z-index: 2;
        width: 100%;
        height: 100%;
        min-height: 100%;
        position: absolute;
        background-repeat: repeat;
        background-size: var(--w-day-c) var(--w-day);
        background-image: linear-gradient(90deg, var(--bs-gray-200) 0, #C0C0C0 0, #0000 .9px, #0000);
    }

.calendar-room calendar-width-calculate {
    z-index: 1;
    width: 100%;
    display: flex;
    transition: all .2s;
    flex-direction: column;
}

.calendar-timeline .general-ticket {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
}

.calendar-timeline .ticket-view {
    z-index: 2;
    height: 100%;
    min-height: var(--px-52);
    max-height: var(--px-52);
    display: flex;
    gap: var(--px-4);
    left: var(--px-60);
    position: absolute;
    align-items: flex-start;
    box-shadow: var(--shadow-qs-light);
    border-radius: var(--px-8);
    padding: var(--px-8) var(--px-12);
    overflow: hidden;
    flex-direction: column;
    justify-content: center;
    border: 1px solid var(--bs-main-300);
    background: var(--bs-main-100);
    margin-left: calc(var(--w-day-c) / 2);
}

    .calendar-timeline .ticket-view:hover {
        z-index: 3;
        cursor: pointer;
        background: var(--bs-main-200);
        box-shadow: var(--shadow-qs-solid);
    }

    .calendar-timeline .ticket-view .ticket-start,
    .calendar-timeline .ticket-view .ticket-end {
        display: flex;
        gap: var(--px-8);
        flex-direction: column;
        align-items: flex-start;
    }

    .calendar-timeline .ticket-view .client-name {
        color: var(--bs-gray-900);
        text-transform: capitalize;
        font: normal normal 500 var(--s-12);
    }

        .calendar-timeline .ticket-view .client-name.days {
            color: var(--text-room-color);
            text-transform: capitalize;
            font: normal normal 500 var(--s-12);
        }

    .calendar-timeline .ticket-view .schedule {
        display: flex;
        gap: var(--px-6);
        align-items: center;
        color: var(--bs-gray-600);
        font: normal normal 400 var(--s-12);
    }

    .calendar-timeline .ticket-view.create-book {
        z-index: 1;
        box-shadow: unset;
        border-radius: 100%;
        align-items: center;
        color: var(--bs-gray-600);
        font-size: var(--px-12);
        min-width: var(--px-40);
        max-width: var(--px-40);
        max-height: var(--px-40);
        min-height: var(--px-40);
        background: var(--bs-white);
        border: unset;
    }

    .calendar-timeline .ticket-view .ticket-end .room-code {
        display: flex;
        align-items: center;
        padding: var(--px-2) var(--px-4);
        justify-content: center;
        border-radius: var(--px-12);
        color: var(--bs-gray-500);
        font: normal normal 400 var(--s-12);
    }

    .calendar-timeline .ticket-view .guest-info {
        display: flex;
        gap: var(--px-4);
        align-items: center;
        color: var(--bs-gray-500);
        font-size: var(--px-12);
    }

        .calendar-timeline .ticket-view .guest-info span {
            color: var(--bs-gray-600);
            font: normal normal 400 var(--s-12);
        }

.calendar-timeline .calendar-room {
    z-index: 1;
    width: 100%;
    display: flex;
    transition: all .2s;
    flex-direction: column;
}

.calendar-timeline .box--room {
    z-index: 5;
    display: grid;
    align-items: center;
    position: relative;
    min-height: var(--px-60);
    max-height: var(--px-60);
    font: normal normal 400 var(--s-13);
    /*grid-template-columns: auto 1fr;*/
    grid-template-columns: var(--px-320) 1fr;
    border-bottom: 1px solid var(--bs-gray-300);
}

    .calendar-timeline .box--room.box--header-room {
        position: sticky;
        top: 0px;
        z-index: 6;
        background: white;
    }

    .calendar-timeline .box--room .line {
        height: 100%;
        border: 1px solid var(--bg-num-availble);
        margin: 0 var(--px-12);
    }

    .calendar-timeline .box--room .box--room-sts {
        display: flex;
        align-items: center;
    }

    .calendar-timeline .box--room .room-name {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        padding: 0 var(--px-12);
        position: sticky;
        left: 0;
        z-index: 4;
        color: var(--bs-main);
        justify-content: center;
        box-shadow: 1px 0 0px #00000012, 3px 0 0px #00000008;
    }

        .calendar-timeline .box--room .room-name.toggle-room {
            justify-content: flex-start;
            font: normal normal 600 var(--s-14);
            color: var(--bs-gray-700);
            box-shadow: none;
        }

    .calendar-timeline .box--room .dot-sts {
        min-width: var(--px-8);
        height: var(--px-8);
        border-radius: 50%;
        margin: auto;
        max-width: var(--px-8);
    }

    .calendar-timeline .box--room .room-name-sts {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        padding: 0 var(--px-12);
        position: sticky;
        left: 0;
        gap: 6px;
        z-index: 4;
        background: white;
        justify-content: flex-start;
        font: normal normal 400 var(--s-13);
        color: var(--bs-gray-700);
        transition: all 0.2s;
    }

        .calendar-timeline .box--room .room-name-sts i.fa-spinner-third {
            margin-right: 4px;
            color: var(--bs-main);
        }

        .calendar-timeline .box--room .room-name-sts.left-sts {
            justify-content: flex-start;
        }


.room-name-sts.right-sts {
    gap: var(--px-4);
}

.box--room .btn_setStatus {
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: relative;
    z-index: 100;
    border-radius: 4px;
    transition: background-color 0.2s;
}

    .box--room .btn_setStatus:hover {
        background-color: var(--bs-gray-100);
    }

    .box--room .btn_setStatus i {
        display: flex;
        align-items: center;
        background-color: white;
        color: var(--bs-gray-600);
        transition: color 0.2s;
    }

    .box--room .btn_setStatus:hover i {
        color: var(--bs-main);
    }

/* ==================== ANIMATIONS ==================== */

/* Toast notification slide in */
@keyframes slideInRight {
    from {
        transform: translateX(400px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Spinner rotation */
@keyframes fa-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Status update flash */
@keyframes statusUpdateFlash {

    0%, 100% {
        background-color: transparent;
    }

    50% {
        background-color: rgba(16, 185, 129, 0.1);
    }
}

/* Dropdown fade in */
@keyframes dropdownFadeIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* ==================== SPINNER ==================== */

.fa-spinner-third.fa-spin {
    animation: fa-spin 1s infinite linear;
}

/* ==================== ROOM STATUS STATES ==================== */

/* Room updating state */
.box--room.updating {
    opacity: 0.6;
    pointer-events: none;
    position: relative;
}

    .box--room.updating::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.5);
        z-index: 999;
    }

    .box--room.updating .room-name-sts.left-sts {
        font-size: 12px;
        color: var(--bs-gray-500);
        display: flex;
        align-items: center;
        gap: 6px;
    }

        .box--room.updating .room-name-sts.left-sts i {
            color: var(--bs-main);
        }

/* Room status updated animation */
.box--room.status-updated {
    animation: statusUpdateFlash 1s ease;
}

    .box--room.status-updated svg {
        transform: scale(1.2);
        transition: transform 0.3s ease;
    }

/* ==================== DROPDOWN MENU ==================== */

.popup-container.scale-form .view-edit {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

    .popup-container.scale-form .view-edit .btn-edit-item {
        padding: 10px 16px;
        cursor: pointer;
        font-size: 14px;
        color: var(--bs-gray-700);
        transition: all 0.2s ease;
        white-space: nowrap;
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .popup-container.scale-form .view-edit .btn-edit-item:hover {
            background-color: var(--bs-gray-100);
            color: var(--bs-main);
        }

        .popup-container.scale-form .view-edit .btn-edit-item:active {
            background-color: var(--bs-gray-200);
        }

        .popup-container.scale-form .view-edit .btn-edit-item:first-child {
            border-radius: 8px 8px 0 0;
        }

        .popup-container.scale-form .view-edit .btn-edit-item:last-child {
            border-radius: 0 0 8px 8px;
        }

/* ==================== ROOM SVG ICONS ==================== */

.box--room svg {
    transition: all 0.3s ease;
    flex-shrink: 0;
}

    .box--room svg:hover {
        transform: scale(1.1);
    }

.box--room {
    z-index: 5;
}

    .box--room.box--header-room {
        z-index: 6;
    }

    .box--room .btn_setStatus {
        z-index: 100;
    }

/* ==================== ROOM BOX IMPROVEMENTS ==================== */

.box--room {
    transition: background-color 0.2s;
}

    .box--room:hover {
        background-color: rgba(0, 0, 0, 0.01);
    }

    .box--room .line {
        height: 100%;
        border: 1px solid var(--bg-num-availble);
        margin: 0 var(--px-12);
    }

    .box--room .view-edit .btn-edit-item {
        cursor: pointer;
    }

.room-name-sts.right-sts i {
    font-size: var(--s-14);
}

.calendar-timeline .box--room .room-sts {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 var(--px-12);
    position: sticky;
    left: 0;
    z-index: 4;
    background: white;
    color: var(--bs-main);
    justify-content: center;
    box-shadow: 1px 0 0px #00000012, 3px 0 0px #00000008;
}

.calendar-timeline .box--room.group-code {
    left: 0;
    top: 0;
    z-index: 8;
    position: sticky;
    background: var(--bs-white);
    font: normal normal 600 var(--s-16);
    border-top: 1px solid var(--bs-gray-300);
    border-bottom: 1px solid var(--bs-gray-300);
    grid-template-columns: max-content 1fr;
}

    .calendar-timeline .box--room.group-code .room-name {
        border: unset;
        background: var(--bs-white);
        box-shadow: unset;
        color: black;
        min-width: var(--w-day-c);
    }

.number-available-item {
    position: absolute;
    top: 50%;
    padding: var(--px-4);
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--bg-num-availble);
    color: var(--text-room-color);
    border-radius: var(--px-16);
    cursor: pointer;
    font: normal normal 500 var(--s-11);
    pointer-events: none;
    text-align: center;
}

.room-list {
    display: none;
}

    .room-list.open {
        display: block;
    }

.sticky-months-container {
    width: calc(var(--w-day-c) + var(--w-day-c));
}

.dynamic-month-year-container {
    position: sticky;
    left: 0;
    background: var(--white);
    z-index: 10;
    padding: var(--px-8) var(--px-12);
}

.dynamic-month-year.sticky-month-header {
    font-weight: bold;
    font-size: var(--s-12);
    white-space: nowrap;
}

.scrollable-month-year {
    display: flex;
    position: relative;
    overflow: hidden;
}

.month-year-box {
    white-space: nowrap;
    border-right: 1px solid #eee;
}

    .month-year-box.sticky {
        position: sticky;
        left: 0;
        z-index: 5;
        left: 0px;
    }

/* Fixed spinner animation */
.pms--roomplan .fa-spinner-third.fa-spin {
    animation: fa-spin 1s infinite linear;
}

@keyframes fa-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Loading container */
.pms--roomplan .loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--px-40) 0;
    min-height: 200px;
}

    .pms--roomplan .loading-container i {
        font-size: var(--px-60);
        color: var(--bs-main);
    }

/* Error message styling */
.pms--roomplan .error-message {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--px-40);
    color: var(--bs-danger);
    font: normal normal 500 var(--s-14);
    gap: var(--px-16);
}

    .pms--roomplan .error-message .retry-btn {
        padding: var(--px-8) var(--px-16);
        background: var(--bs-main);
        color: white;
        border: none;
        border-radius: var(--px-4);
        cursor: pointer;
        transition: background-color 0.2s;
    }

        .pms--roomplan .error-message .retry-btn:hover {
            background: var(--bs-main-600);
        }

/* Room Map */
.pms--roommap {
    flex-direction: row !important;
    padding: 0 !important;
}

.roomMap-header .title-page {
    font: normal normal 700 var(--s-24);
    line-height: 24px;
}

.roomMap-header .sub-title-page {
    font: normal normal 500 var(--s-14);
    color: var(--bs-gray-600);
}

.filter-group-roomMap {
    display: flex;
    gap: var(--px-16);
    align-items: center;
    flex: 1;
    justify-content: flex-end;
}

.roomMap-container {
    flex: 1;
    width: 100%;
    height: 100%;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    border-radius: var(--px-12);
    gap: var(--px-12);
}

    .roomMap-container .roomMap_room {
        display: flex;
        flex-direction: column;
        position: relative;
        gap: var(--px-16);
        flex: 1;
        overflow: hidden;
        padding: 0 0 0 var(--px-24);
    }

.pms--roommap .header--page {
    padding: 0 var(--px-24);
}

.list-floor {
}

    .list-floor .floor-item {
        color: var(--bs-gray-700);
        background: 0;
        font: normal normal 400 var(--s-16);
        position: relative;
        min-width: var(--px-140);
        border: 1px solid #d3d3d3;
        background-color: #fff;
    }

        .list-floor .floor-item.active {
            overflow: unset;
            color: #fff;
            font: normal normal 600 var(--s-16);
            background-color: var(--bs-main);
        }

.room-content {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--px-20);
    /*margin: var(--px-20) var(--px-20) 0 var(--px-20);*/
}

.room-content {
    position: relative;
}

    .room-content .list-room {
        display: flex;
        flex-direction: column;
        gap: var(--px-12);
        overflow: hidden;
        width: 100%;
        height: 100%;
        border-radius: 12px;
    }

        .room-content .list-room .header-list-room span {
            font: normal normal 600 var(--s-20);
            color: #1D2025;
        }

    .room-content .body-list-room {
        padding: 2px 0;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(var(--room-grid-min, 240px), 1fr));
        /* gap: var(--room-grid-gap, var(--px-12)); */
        overflow-y: visible;
        position: relative;
        padding-bottom: var(--px-72);
        overflow: auto;
        column-gap: var(--room-grid-gap);
        row-gap: var(--px-16);
    }

        .room-content .body-list-room .card-room {
            height: var(--px-168);
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            border: 1px solid var(--bs-gray-300);
            border-radius: var(--px-8);
            background: var(--white);
            cursor: pointer;
            transform: none;
            transform-origin: initial;
        }

            .room-content .body-list-room .card-room.opacity {
                opacity: .5;
            }

            .room-content .body-list-room .card-room:hover {
                box-shadow: var(--shadow-h);
            }

            .room-content .body-list-room .card-room.active {
                opacity: 1;
                background-color: var(--white);
            }

            .room-content .body-list-room .card-room .card-room-header {
                padding: var(--px-8);
                gap: 2px;
                height: 148px;
                display: flex;
                flex-direction: column;
            }

            .room-content .body-list-room .card-room .card-status {
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            .room-content .body-list-room .card-room .card-status-name {
                display: flex;
                flex-direction: row;
                gap: 2px;
                /* margin-top: 4px; */
                width: 100%;
                justify-content: space-between;
                align-items: center;
                height: 20px;
            }

                .room-content .body-list-room .card-room .card-status-name .room_card_status {
                    display: flex;
                    flex-direction: row;
                    flex-wrap: nowrap;
                    line-height: 1;
                }

                    .room-content .body-list-room .card-room .card-status-name .room_card_status i,
                    .room-content .body-list-room .card-room .card-status-name .room_card_status svg {
                        width: var(--px-20);
                        height: var(--px-20);
                        font-size: 14px;
                        display: inline-flex;
                        align-items: center;
                        justify-content: center;
                        color: var(--bs-gray-700);
                    }

                .room-content .body-list-room .card-room .card-status-name span {
                    color: var(--bs-gray-600);
                    font: normal normal 500 var(--s-12);
                    text-overflow: ellipsis;
                    overflow: hidden;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 1;
                }

            .room-content .body-list-room .card-room .card-status-date {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                width: 100%;
                margin-top: var(--px-4);
                height: 20px;
            }

                .room-content .body-list-room .card-room .card-status-date .time-year {
                    color: var(--bs-gray-600);
                    font: normal normal 500 var(--s-11);
                }

                .room-content .body-list-room .card-room .card-status-date .card-icon-next {
                    z-index: 2;
                    padding: 8px;
                    font: normal normal 600 var(--s-12);
                    color: var(--bs-main-500);
                }

                .room-content .body-list-room .card-room .card-status-date > span {
                    font: normal normal 500 var(--s-11);
                    display: flex;
                    flex-direction: row;
                    text-align: left;
                    gap: 6px;
                }

                    .room-content .body-list-room .card-room .card-status-date > span:last-child {
                        text-align: right;
                    }

                .room-content .body-list-room .card-room .card-status-date .status_room {
                    display: flex;
                    flex-direction: row;
                    gap: 4px;
                    align-items: center;
                    margin-top: 4px;
                }

            .room-content .body-list-room .card-room .card-status .status-left {
                display: flex;
                align-items: center;
                gap: 6px;
            }

                .room-content .body-list-room .card-room .card-status .status-left .dot__status {
                    width: var(--px-16);
                    height: var(--px-16);
                    border: 1px solid;
                    border-radius: 100%;
                }

                .room-content .body-list-room .card-room .card-status .status-left p {
                    color: var(--bs-gray-600);
                    font: normal normal 600 var(--s-16);
                }

            .room-content .body-list-room .card-room .card-status .status-right {
                cursor: pointer;
                border: 1px solid transparent;
                border-radius: var(--px-4);
                padding: 0 var(--px-12);
                background-color: var(--white);
                height: var(--px-28);
                width: var(--px-28);
                display: flex;
                justify-content: center;
                align-items: center;
            }

.dropdown__card {
    position: relative;
    display: flex;
    align-items: center;
}

    .dropdown__card .txt_folioNum {
        font: normal normal 500 var(--s-13);
        color: var(--bs-gray-600);
    }

.dropdown-menu__card {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 4px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    min-width: 160px;
    z-index: 999999999;
    padding: 12px;
}

    .dropdown-menu__card .dropdown-item {
        font-size: 14px;
        cursor: pointer;
        padding: var(--px-8);
    }

        .dropdown-menu__card .dropdown-item:hover {
            background: #f0f0f0;
        }

    .dropdown-menu__card .dropdown-line {
        background: #E5E8EB;
        height: 1px;
        width: 100%;
    }

    .dropdown-menu__card .dropdown.show .dropdown-menu {
        display: block;
    }


.dropdown__card.show .dropdown-menu__card {
    display: block;
}

.room-content .body-list-room .card-room .card-body {
    padding: var(--px-12);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 2px;
    align-self: stretch;
    border-radius: 0 0 var(--px-8) var(--px-8);
    background: var(--bs-main-100);
}

    .room-content .body-list-room .card-room .card-body .num-guest {
        color: var(--bs-gray-900);
        text-transform: capitalize;
        font: normal normal 500 var(--s-12);
    }

    .room-content .body-list-room .card-room .card-body span {
        display: flex;
        align-items: center;
        gap: 4px;
    }

        .room-content .body-list-room .card-room .card-body span span {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            color: #2D353B;
            font: normal normal 500 var(--s-12);
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: var(--px-160);
            text-transform: capitalize;
        }

    .room-content .body-list-room .card-room .card-body i {
        font-size: 14px;
        animation-duration: var(--fa-animation-duration, 6s);
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: var(--px-28);
        min-width: var(--px-28);
        max-width: var(--px-28);
        background: white;
        border-radius: 100%;
        max-height: var(--px-28);
        border: 1px solid var(--active);
    }

/* Reservation (fdc-reserved) */
.card-room.has-folio.reservation .card-body {
    background-color: #E3F2FD;
    border-color: var(--bs-purple);
}

/* Inhouse / Checkin (fdc-checkin) */
.card-room.has-folio.inhouse .card-body {
    background-color: #E8F5E9;
    border-color: var(--bs-blue);
}

/* Due Out (fdc-dueout) */
.card-room.has-folio.dueout .card-body {
    background-color: #FFF3E0;
    border-color: var(--bs-orange);
}

/* Check Out (fdc-checkout) */
.card-room.has-folio.checkout .card-body {
    background-color: #fbe6e6;
    border-color: #c62828;
}

/* OOI / Out of Inventory */
.card-room.has-folio.ooi .card-body {
    background-color: #C8C8C8;
    border-color: #C8C8C8;
}

/* OOO / Out of Order */
.card-room.has-folio.ooo {
    border: 2px solid #fd000047;
    overflow: hidden;
}

    .card-room.has-folio.ooo .card-body {
        background-color: #fff5f5;
        border-color: #ff4444;
    }

/* Out Of Order - Đỏ */
.status-folio.ooo {
    color: #ff4444;
    background-color: transparent !important;
    overflow: hidden;
}

.status-folio.ooi {
    color: var(--bs-gray-600);
    overflow: hidden;
    background-color: transparent !important;
}

/* Expected Arrival - Xanh (đậm hơn) */
.status-folio.reservation {
    color: #1565C0;
}

/* In House - Xanh lá (đậm hơn) */
.status-folio.inhouse {
    color: #388E3C;
}

/* Expected Departures - Cam (đậm hơn) */
.status-folio.dueout {
    color: #FB8C00;
}

/* Check Out - Đỏ (đậm hơn) */
.status-folio.checkout {
    color: #B71C1C;
}

.status-folio.expectedarrival {
    color: #1565C0;
}

.status-folio.expecteddepartures {
    color: #FB8C00;
}

.room-status {
    position: relative;
    border: 1px solid var(--white);
    background-color: var(--white);
    display: flex;
    flex: 1;
    max-width: 18rem;
    padding: var(--px-12);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--px-8);
    transition: all 0.3s ease;
    box-shadow: 0 0 6px 0 rgba(29, 32, 37, 0.10);
}

    .room-status.collapsed {
        max-width: 5rem;
    }

.divider-line {
    border-top: 1px solid #e5e7eb;
    margin: 4px 0;
    width: 100%;
}

.room-status .status-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

    .room-status .status-header.active {
        flex-direction: column;
        border-bottom: 1px solid #d3d3d3;
        padding: var(--px-8);
    }

.room-status .status-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #111827;
    line-height: 20px;
    margin-bottom: 0;
}

.room-status .status-btn {
    padding: 6px;
    /* p-1.5 */
    border-radius: 0.5rem;
    /* rounded-lg */
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease;
}

    .room-status .status-btn:hover {
        background: #f3f4f6;
        /* hover:bg-gray-100 */
    }

.room-status .chevron-icon {
    width: 16px;
    /* w-4 */
    height: 16px;
    /* h-4 */
    color: #4b5563;
    /* text-gray-600 */
}


/*    .room-status.collapsed {
        max-width: var(--px-80);
        padding: 0;
        align-items: center;
    }*/

.room-status.collapsed .room--body {
    gap: 0;
}

.room-status.collapsed span {
    display: none;
}

.room-status.collapsed .room--header-status {
    padding: var(--px-8) 0 !important;
}

.room-status.collapsed .office {
}

.txt_number {
    display: block !important;
}

.room-status .status-item-title svg {
    flex-shrink: 0;
}

.room-status .room--header-status {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    cursor: pointer;
}

.room-status .room--header-status-fake {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    cursor: pointer;
}

    .room-status .room--header-status-fake span {
        font: normal normal 600 var(--s-12);
        color: var(--text-secondary);
        text-transform: uppercase;
    }

.room-status .room--header-status.active {
    color: var(--text-color);
    padding: 0 var(--px-12) 0 0;
}

.room-status .room--header-status span {
    color: var(--text-color);
}

    .room-status .room--header-status span:first-child {
        font: normal normal 600 var(--s-12);
        color: var(--text-secondary);
        text-transform: uppercase;
    }

    .room-status .room--header-status span:last-child {
        font: normal normal 600 var(--s-12);
        color: var(--text-secondary);
        text-transform: uppercase;
    }

.room-status .room--body {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--px-4);
    /* padding: var(--px-20); */
}

    .room-status .room--body .room-status-item {
        display: flex;
        justify-content: space-between;
        width: 100%;
        align-items: center;
        gap: var(--px-4);
        align-self: stretch;
        cursor: pointer;
        padding: 8px 12px;
        border-radius: 8px;
    }

        .room-status .room--body .room-status-item.tick {
            border: 1px solid var(--bs-main);
            background-color: var(--bs-main-100);
        }

        .room-status .room--body .room-status-item.active {
            flex-direction: column;
            padding-top: .5rem;
            padding-bottom: .5rem;
            padding-left: .25rem;
            padding-right: .25rem;
        }

            .room-status .room--body .room-status-item.active span {
                font: normal normal 500 var(--s-12);
            }

        .room-status .room--body .room-status-item:hover {
            background-color: var(--bg-num-availble);
            border-radius: var(--px-4);
            width: 100%;
        }

    .room-status .room--body .room-status-item-office {
        display: flex;
        justify-content: space-between;
        width: 100%;
        align-items: center;
        gap: var(--px-4);
        align-self: stretch;
        padding: var(--px-4) 0;
        font: normal normal 400 var(--s-14);
        cursor: pointer;
    }

        .room-status .room--body .room-status-item-office.active {
            flex-direction: column;
        }

        .room-status .room--body .room-status-item-office:hover {
            background-color: var(--bg-num-availble);
            border-radius: var(--px-4);
            width: 100%;
        }

    .room-status .room--body .room-status-item .status-item-title {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: var(--px-4);
        font: normal normal 400 var(--s-14);
        color: var(--text-color);
    }

    .room-status .room--body .room-status-item span {
        font: normal normal 400 var(--s-14);
        color: var(--text-color);
    }

.btn-toggle-status {
    z-index: 2;
    display: flex;
    padding: 6px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    position: absolute;
    left: -16px;
    top: 16px;
    border-radius: var(--px-36);
    background: #F3F5F8;
    box-shadow: 0 0 6px 0 rgba(29, 32, 37, 0.10);
}

    .btn-toggle-status svg path {
        fill: var(--bs-gray-700);
    }

.floor-detail_room {
    display: none;
    width: 300px;
    flex-direction: column;
    align-items: flex-end;
    align-self: stretch;
    background: var(--white);
    box-shadow: 0 0 16px 0 var(--gray-16, rgba(29, 32, 37, 0.16));
    transition: all 0.3s ease;
    position: relative;
}

    .floor-detail_room.active {
        display: flex;
    }

.pms--roommap .popup-content {
    width: 100%;
}

    .pms--roommap .popup-content .floor__detail-header {
        width: 100%;
        padding: var(--px-20);
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        flex-direction: row;
        gap: var(--px-8);
        align-self: stretch;
    }

        .pms--roommap .popup-content .floor__detail-header .btn-close {
            outline: none;
        }

    .pms--roommap .popup-content .floor__detail-body {
        width: 100%;
        padding: var(--px-20);
        display: flex;
        flex-direction: column;
    }

        .pms--roommap .popup-content .floor__detail-body .floor_item_row {
            display: flex;
            align-items: center;
        }

            .pms--roommap .popup-content .floor__detail-body .floor_item_row .item_row_title {
                flex: 1;
                width: 50%;
                color: #6E7880;
                font: normal normal 400 var(--s-14);
                line-height: 20px;
            }

            .pms--roommap .popup-content .floor__detail-body .floor_item_row .item_row_value {
                font: normal normal 500 var(--s-14);
                flex: 1;
            }

        .pms--roommap .popup-content .floor__detail-body .floor_line {
            border: 1px solid #D0D6DA;
            margin: var(--px-12) 0px;
        }

        .pms--roommap .popup-content .floor__detail-body .floor_item_info .item_info_name {
            color: #2D353B;
            font: normal normal 500 var(--s-14);
        }

        .pms--roommap .popup-content .floor__detail-body .floor_item_info .item_info_list_guest {
            color: #2D353B;
            font: normal normal 500 var(--s-14);
        }

        .pms--roommap .popup-content .floor__detail-body .floor_item_info .item_info_mail {
            color: #525C63;
            font: normal normal 400 var(--s-14);
        }

        .pms--roommap .popup-content .floor__detail-body .floor_item_note span {
            color: #2D353B;
            font: normal normal 500 var(--s-14);
        }

    .pms--roommap .popup-content .floor__detail-footer {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: var(--px-8);
        position: absolute;
        bottom: 20px;
    }

    .pms--roommap .popup-content .detail-footer__row {
        display: flex;
        gap: var(--px-8);
    }

        .pms--roommap .popup-content .detail-footer__row.fStatus__row {
            margin: 0 var(--px-12);
        }

            .pms--roommap .popup-content .detail-footer__row.fStatus__row button {
                padding: var(--px-8);
                gap: var(--px-4);
            }

        .pms--roommap .popup-content .detail-footer__row button {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background-color: var(--white);
            border-radius: var(--px-12);
            border: 1px solid #D0D6DA;
            color: #2D353B;
        }

            .pms--roommap .popup-content .detail-footer__row button span {
                font: normal normal 500 var(--s-12);
                color: #2D353B;
            }

    .pms--roommap .popup-content .view-more {
        width: 156px;
        height: 384px;
        position: absolute;
        bottom: 56px;
        right: 12px;
        z-index: 10;
        border-radius: var(--px-12);
        padding: var(--px-12);
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        background-color: var(--white);
        box-shadow: 0 0 16px 0 rgba(29, 32, 37, 0.16);
    }

        .pms--roommap .popup-content .view-more button {
            flex: 1;
            width: 100%;
            border-radius: var(--px-8);
            padding: var(--px-8);
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: var(--px-8);
            align-self: stretch;
            background-color: var(--white);
        }

            .pms--roommap .popup-content .view-more button span {
                color: #2D353B;
                font: normal normal 400 var(--s-14);
            }

        .pms--roommap .popup-content .view-more .more__line {
            width: 100%;
            height: 1px;
            background: #E5E8EB;
        }

    /*  out of order      */
    .pms--roommap .popup-content .room-map {
        width: 100%;
        padding: var(--px-16);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: var(--px-12);
    }

        .pms--roommap .popup-content .room-map .room-map-header {
            display: flex;
            justify-content: space-between;
        }

            .pms--roommap .popup-content .room-map .room-map-header span {
                font: normal normal 500 var(--s-18);
            }

            .pms--roommap .popup-content .room-map .room-map-header button {
                width: var(--px-80);
                border-radius: 6px;
                border: 1px solid var(--bs-gray-300);
                font: normal normal 600 var(--s-14);
                height: var(--px-40);
            }

        .pms--roommap .popup-content .room-map .room-map-content {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            gap: var(--px-16);
        }

            .pms--roommap .popup-content .room-map .room-map-content .form_item {
                justify-content: space-between;
                width: 100%;
                display: flex;
                flex-direction: column;
                gap: var(--px-12);
            }

                .pms--roommap .popup-content .room-map .room-map-content .form_item label {
                    font: normal normal 500 var(--s-14);
                }

                .pms--roommap .popup-content .room-map .room-map-content .form_item input {
                    margin: 0;
                    outline: none;
                    border-radius: 8px;
                    border: var(--bdr-1);
                    color: var(--bs-dark);
                    padding: var(--px-12);
                    font: normal normal 500 var(--s-13);
                }

.view-message {
    position: absolute;
    z-index: 999;
    right: 0px;
    display: none;
    background: var(--white);
    border: 1px solid #ddd;
    padding: var(--px-16);
    width: 600px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
    /*transform: translateX(100%);*/
    transition: transform 0.35s ease;
    z-index: 999;
}

    .view-message.show {
        display: block;
        height: 100%;
        transform: translateX(0);
    }

        .view-message.show .close-btn {
            position: absolute;
            top: 12px;
            left: -44px;
            background: var(--white);
            color: #334155;
            border: none;
            font-size: 18px;
            cursor: pointer;
            width: var(--px-36);
            border-radius: 100%;
            transition: 0.2s ease;
            box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
        }

    .view-message .guest-info {
        display: flex;
        flex-direction: column;
        gap: var(--px-12);
        padding: var(--px-20);
        border-bottom: 1px solid var(--bs-gray-300);
    }

        .view-message .guest-info .header-message {
            display: flex;
            gap: var(--px-8);
            align-items: center;
        }

            .view-message .guest-info .header-message span,
            .view-message .mess-info .header-message span {
                font: normal normal 600 var(--s-18);
            }

        .view-message .guest-info .content-message {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: var(--px-12);
        }

            .view-message .guest-info .content-message .content-item {
                gap: var(--px-4);
                display: flex;
                flex-direction: column;
            }

                .view-message .guest-info .content-message .content-item .content-item-row {
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;
                    gap: var(--px-8);
                }

                    .view-message .guest-info .content-message .content-item .content-item-row span {
                        font: normal normal 600 var(--s-16);
                        color: var(--bs-gray-600)
                    }

                .view-message .guest-info .content-message .content-item .inp_mess {
                    padding: 0px var(--px-16);
                    background-color: #F8FAFC;
                    border-radius: var(--px-8);
                    margin-top: var(--px-8);
                    min-height: var(--px-36);
                    max-height: var(--px-36);
                    word-break: break-word;
                    text-transform: capitalize;
                    display: flex;
                    align-items: center;
                    font: normal normal 500 var(--s-16);
                }

                    .view-message .guest-info .content-message .content-item .inp_mess.arrival {
                        background-color: var(--bs-main-100);
                        border: 1px solid var(--bs-main-500);
                    }

                    .view-message .guest-info .content-message .content-item .inp_mess.departure {
                        background-color: rgb(255 208 208);
                        border: 1px solid rgb(209 103 104);
                    }

    .view-message .mess-info {
        margin-top: var(--px-16);
        display: flex;
        flex-direction: column;
        gap: var(--px-12);
        padding: var(--px-20);
        border-radius: var(--px-16);
    }

        .view-message .mess-info .header-message {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
        }

        .view-message .mess-info .list-action {
            display: flex;
            justify-content: space-between;
            gap: var(--px-4);
        }

            .view-message .mess-info .list-action button {
                border: none;
                padding: 8px 14px;
                border-radius: 6px;
                margin: 4px;
                cursor: pointer;
            }

            .view-message .mess-info .list-action .btn-excel {
                background: #1D6F42;
                color: #fff;
            }

            .view-message .mess-info .list-action .btn-print {
                background: #007bff;
                color: #fff;
            }

            .view-message .mess-info .list-action .btn-detail {
                background: #6f42c1;
                color: #fff;
            }

            .view-message .mess-info .list-action .btn-restore {
                background: #ffc107;
                color: #000;
            }

            .view-message .mess-info .list-action .btn-delete {
                background: #dc3545;
                color: #fff;
            }

            .view-message .mess-info .list-action .btn-edit {
                background: #17a2b8;
                color: #fff;
            }

        .view-message .mess-info .section-table {
            width: 100%;
            display: flex;
            flex-direction: column;
            overflow: auto;
        }

        .view-message .mess-info .table-row.header {
            padding: var(--px-12);
            background: var(--bs-main-50);
            color: black;
            font: normal normal 500 var(--s-14);
        }

        .view-message .mess-info .table-row {
            width: -webkit-fill-available;
            display: grid;
            align-items: center;
            padding: var(--px-12);
            text-transform: capitalize;
            font: normal normal 400 var(--s-13);
            grid-template-columns: var(--px-100) var(--px-80) var(--px-80) var(--px-80) 1fr;
            border-bottom: 1px dashed var(--bs-gray-300);
            cursor: pointer;
        }

            .view-message .mess-info .table-row:hover {
                /*background: var(--bs-gray-100);*/
            }

            .view-message .mess-info .table-row.active {
                background-color: var(--bs-main-100);
                color: var(--white);
                border-radius: var(--px-4);
            }

            .view-message .mess-info .table-row span:last-child {
                text-align: center;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                max-width: 250px;
                display: block;
            }

            .view-message .mess-info .table-row input {
                border-radius: 6px;
                text-align: center;
                padding: 0 4px;
                border: 0;
                text-decoration: underline;
                color: var(--bs-main);
                background: 0;
            }

                .view-message .mess-info .table-row input:focus {
                    border: 0;
                    outline: 0;
                    background: var(--bs-main-200);
                }

            .view-message .mess-info .table-row:last-of-type {
                border-bottom: 0px dashed var(--bs-gray-300);
            }

            .view-message .mess-info .table-row span:not(.name) {
                text-align: center;
                color: black;
                font-weight: 500;
                white-space: nowrap;
            }

            .view-message .mess-info .table-row span:first-of-type {
                text-align: start;
            }

        .view-message .mess-info .pms-section--table.house-keeping .section-table {
            margin-right: 0;
        }

        .view-message .mess-info .pms-status-row {
            display: grid;
            max-width: var(--px-998);
            background: white;
            overflow: auto;
            grid-template-columns: max-content 1fr;
            margin: 8px;
            padding: 0px;
            border-radius: 8px;
            gap: 8px;
        }

        .view-message .mess-info .status-row-col {
            gap: 8px;
            display: flex;
            border-radius: 8px;
            flex-direction: column;
            border: 1px solid var(--bs-gray-300);
        }

        .view-message .mess-info .pms-section--table.eod-projection .table-row {
            grid-template-columns: var(--px-80) repeat(5, 1fr);
        }

        .view-message .mess-info .table-row:not(.header) span.name {
            font-weight: 400 !important;
            color: var(--bs-gray-600) !important;
        }

        .view-message .mess-info .table-body {
            overflow: auto;
            max-height: var(--px-160);
            min-height: var(--px-160);
        }

        .view-message .mess-info .form-create {
            width: 100%;
            background: var(--bs-main-100);
            border: 1px solid var(--bs-main-300);
            border-radius: var(--px-8);
            padding: var(--px-16);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .view-message .mess-info .header-form {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: var(--px-16);
        }

            .view-message .mess-info .header-form span {
                color: #1e3a8a;
                font: normal normal 600 var(--s-16);
            }

            .view-message .mess-info .header-form .close-btn-mess {
                cursor: pointer;
                font-size: 18px;
                color: #555;
            }

        .view-message .mess-info .body-form {
            display: flex;
            flex-direction: column;
            gap: var(--px-12);
            margin-bottom: var(--px-16);
        }

            .view-message .mess-info .body-form input,
            .view-message .mess-info .body-form textarea {
                padding: 10px 12px;
                border: 1px solid #cbd5e1;
                border-radius: var(--px-8);
                font: normal normal 600 var(--s-15);
                outline: none;
                transition: border-color 0.2s;
            }

                .view-message .mess-info .body-form input:focus,
                .view-message .mess-info .body-form textarea:focus {
                    border-color: #2563eb;
                }

            .view-message .mess-info .body-form textarea {
                resize: none;
                min-height: 80px;
            }

        .view-message .mess-info .footer-form {
            display: flex;
            justify-content: flex-end;
            gap: 12px;
        }

            .view-message .mess-info .footer-form .btn-cancel {
                background: #e5e7eb;
                border: none;
                padding: 8px 16px;
                border-radius: 6px;
                cursor: pointer;
                font-size: 14px;
            }

            .view-message .mess-info .footer-form .btn-save {
                background: #2563eb;
                color: #fff;
                border: none;
                padding: 8px 16px;
                border-radius: 6px;
                cursor: pointer;
                font-size: 14px;
            }

            .view-message .mess-info .footer-form .btn-cancel:hover {
                background: #d1d5db;
            }

            .view-message .mess-info .footer-form .btn-save:hover {
                background: #1d4ed8;
            }

/* room map mobile */
.roomMap-mobile {
    display: none;
}

.popup-container.pms--roommap {
    max-width: 30vw;
    min-width: 20vw;
}

/* travel agent */
.pms--travelagent {
}

.popup-container.pms--travelagent {
    max-width: 50vw;
    min-width: 50vw;
}

.pms--travelagent .btn-new {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px;
    font: normal normal 500 var(--s-14);
    color: #ffffff;
    background-color: var(--bs-main-400);
    border: none;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.35);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

    .pms--travelagent .btn-new:hover {
        background-color: var(--bs-main);
    }

/* filter search new UI */
.pms--travelagent .search-filter-container {
    background-color: white;
    padding: 0.75rem;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #f3f4f6;
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    align-items: center;
}

.search_wrapper_view {
    display: flex;
    gap: var(--px-12);
    align-items: center;
}

    .search_wrapper_view .view_filter {
        font: normal normal 500 var(--s-14);
        color: var(--black);
        border: 1px solid #d3d3d3;
        padding: var(--px-8) var(--px-12);
        border-radius: 50px;
    }

.pms--travelagent .search-wrapper {
    position: relative;
}

    .pms--travelagent .search-wrapper button {
        background: none;
        border: none;
        padding: 8px;
        cursor: pointer;
        position: absolute;
        left: 4px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        display: flex;
        justify-content: center;
        align-items: center;
    }

.pms--travelagent .search-icon {
    color: #9ca3af;
    pointer-events: none;
}

.pms--travelagent .search-input {
    width: 300px;
    max-width: 300px;
    padding: 0.625rem 1rem 0.625rem 2.5rem;
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    outline: none;
    transition: all 0.2s;
}

    .pms--travelagent .search-input:focus {
        background-color: white;
        border-color: #7fad49;
        box-shadow: 0 0 0 1px #7fad49;
    }

.pms--travelagent .actions-wrapper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.pms--travelagent .active-badge {
    display: none;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #6b7280;
    padding: 0 0.75rem;
}

.pms--travelagent .active-indicator {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: #22c55e;
}

.pms--travelagent .filter-button {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0.5rem;
    border: 1px solid #e5e7eb;
    background-color: white;
    color: #374151;
    cursor: pointer;
    transition: background-color 0.2s;
}

    .pms--travelagent .filter-button:hover {
        background-color: #f9fafb;
    }

/* end style new UI */

/* style filter new UI */
.pms--travelagent-filter {
    width: 18vw;
}

    .pms--travelagent-filter .popup-content {
        width: 100%;
    }

    .pms--travelagent-filter .filter-panel {
        width: 100%;
        max-width: 448px;
        height: 100vh;
        background: white;
        box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
        display: flex;
        flex-direction: column;
    }

    .pms--travelagent-filter .filter-header {
        padding: 20px 24px;
        border-bottom: 1px solid #f3f4f6;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: white;
    }

    .pms--travelagent-filter .filter-title {
        display: flex;
        align-items: center;
        gap: 8px;
    }

        .pms--travelagent-filter .filter-title svg {
            color: #7fad49;
        }

        .pms--travelagent-filter .filter-title h2 {
            font-size: 18px;
            font-weight: 700;
            color: #111827;
            margin-bottom: 0;
        }

    .pms--travelagent-filter .filter-content {
        flex: 1;
        overflow-y: auto;
        padding: 24px;
    }

    .pms--travelagent-filter .filter-group {
        margin-bottom: 16px;
    }

        .pms--travelagent-filter .filter-group select {
            width: 100%;
            height: 44px;
            padding: 12px 8px;
            background: #f9fafb;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            font-size: 14px;
            transition: all 0.2s;
            outline: none;
        }

    .pms--travelagent-filter .filter-label {
        display: block;
        font-size: 14px;
        font-weight: 500;
        color: #374151;
        margin-bottom: 16px;
    }

    .pms--travelagent-filter .input-wrapper {
        position: relative;
    }

    .pms--travelagent-filter .search-icon {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: #9ca3af;
    }

    .pms--travelagent-filter input[type="text"] {
        width: 100%;
        padding: 10px 16px;
        background: #f9fafb;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        font-size: 14px;
        transition: all 0.2s;
        outline: none;
    }

        .pms--travelagent-filter input[type="text"].with-icon {
            padding-left: 40px;
        }

        .pms--travelagent-filter input[type="text"]:focus {
            background: white;
            border-color: #7fad49;
            box-shadow: 0 0 0 1px #7fad49;
        }

    .pms--travelagent-filter .checkbox-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;
    }

    .pms--travelagent-filter .checkbox-count {
        font-size: 12px;
        color: #9ca3af;
    }

    .pms--travelagent-filter .checkbox-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .pms--travelagent-filter .checkbox-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px;
        border: 1px solid #f3f4f6;
        border-radius: 8px;
        cursor: pointer;
        transition: background 0.2s;
    }

        .pms--travelagent-filter .checkbox-item:hover {
            background: #f9fafb;
        }

    .pms--travelagent-filter input[type="checkbox"] {
        width: 16px;
        height: 16px;
        visibility: visible;
        border: 1px solid #d1d5db;
        border-radius: 4px;
        cursor: pointer;
        accent-color: #7fad49;
    }

    .pms--travelagent-filter .checkbox-item span {
        font-size: 14px;
        color: #374151;
    }

    .pms--travelagent-filter .filter-footer {
        padding: 24px;
        border-top: 1px solid #f3f4f6;
        background: rgba(249, 250, 251, 0.3);
        display: flex;
        gap: 12px;
    }

        .pms--travelagent-filter .filter-footer button {
            flex: 1;
            border: 1px solid #d3d3d3;
            border-radius: 6px;
            font: normal normal 500 var(--s-14);
        }

    .pms--travelagent-filter .btn {
        flex: 1;
        padding: 10px 16px;
        font-size: 14px;
        font-weight: 500;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.2s;
    }

    .pms--travelagent-filter .btn-secondary {
        color: #374151;
        background: white;
        border: 1px solid #e5e7eb;
    }

        .pms--travelagent-filter .btn-secondary:hover {
            background: #f9fafb;
        }

    .pms--travelagent-filter .btn-primary {
        color: white;
        background: #7fad49;
        box-shadow: 0 1px 3px rgba(127, 173, 73, 0.2);
    }

        .pms--travelagent-filter .btn-primary:hover {
            background: #6c943e;
        }

/* end filter style */

.form-filter-agent .agent-drawer {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 100%;
    /*        max-width: 720px;*/
    background: #fff;
    display: flex;
    flex-direction: column;
}

/* Header */
.form-filter-agent .agent-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
}

    .form-filter-agent .agent-header h2 {
        font: normal normal 700 var(--s-20);
        margin: 0;
    }

    .form-filter-agent .agent-header .agent-start-popup {
        display: flex;
        flex-direction: column;
    }

        .form-filter-agent .agent-header .agent-start-popup .txt_header-edit {
            font: normal normal 700 var(--s-20);
        }

        .form-filter-agent .agent-header .agent-start-popup .txt_header-info {
            font: normal normal 500 var(--s-14);
        }

/* Tabs */
.form-filter-agent .agent-tabs {
    display: flex;
    gap: 16px;
    padding: 0px 16px;
    border-bottom: 1px solid #e5e7eb;
    overflow-x: auto;
    height: 46px;
    align-items: center;
}

    .form-filter-agent .agent-tabs .tab-item {
        padding: 20px 0;
        border: none;
        background: none;
        color: #6b7280;
        cursor: pointer;
        white-space: nowrap;
        border-radius: 0;
        font: normal normal 500 var(--s-14);
    }

        .form-filter-agent .agent-tabs .tab-item.active {
            color: #7fad49;
            border-bottom: 2px solid #7fad49;
            padding-bottom: 22px;
            font-weight: 600;
        }

/* Body */
.form-filter-agent .agent-tab-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    background: #fff;
    border: none;
}

.form-filter-agent .section .table-card .table-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    transition: opacity 0.2s ease;
}

.form-filter-agent .section .table-card .table-row:hover .table-actions {
    opacity: 1;
}

.form-filter-agent .section .table-card .action-btn {
    padding: 0.375rem;
    color: #9ca3af;
    background-color: transparent;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .form-filter-agent .section .table-card .action-btn.edit {
        color: #3b82f6;
        background-color: #eff6ff;
    }

    .form-filter-agent .section .table-card .action-btn.delete {
        color: #dc2626;
        background-color: #fee2e2;
    }

    .form-filter-agent .section .table-card .action-btn svg {
        width: 14px;
        height: 14px;
        stroke-width: 2;
    }

.bookers-table-wrapper {
    background-color: white;
    border-radius: 8px;
    border: 1px solid #f3f3f3;
}

    .bookers-table-wrapper table {
        width: 100%;
        border-collapse: collapse;
        text-align: left;
        min-width: 640px;
    }

    .bookers-table-wrapper thead {
        background-color: #f9f9f9;
    }

        .bookers-table-wrapper thead th {
            padding: 12px;
            font-size: 11px;
            font-weight: 600;
            color: #888;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            border-bottom: 1px solid #f3f3f3;
        }

    .bookers-table-wrapper tbody tr {
        transition: background-color 0.2s ease;
    }

        .bookers-table-wrapper tbody tr:hover {
            background-color: #fafafa;
        }

    .bookers-table-wrapper tbody td {
        padding: 12px;
        font-size: 14px;
        color: #333;
    }

        .bookers-table-wrapper tbody td.name {
            font-weight: 500;
        }

        .bookers-table-wrapper tbody td.email,
        .bookers-table-wrapper tbody td.tel {
            color: #666;
        }

        .bookers-table-wrapper tbody td.fax {
            color: #999;
        }

    .bookers-table-wrapper .actions-cell {
        text-align: right;
        display: flex;
        align-items: center;
        gap: 6px;
        height: 54px;
    }

/* Fix overflow for bookers list tables */
/*.bookers-table-wrapper {
    overflow-x: auto;*/
/* allow horizontal scroll when needed */
/*}

    .bookers-table-wrapper table {
        table-layout: fixed;*/
/* prevent content from expanding columns */
/*min-width: 640px;*/
/* keep your existing intention */
/*}

    .bookers-table-wrapper th,
    .bookers-table-wrapper td {
        white-space: nowrap;*/
/* keep single-line cells */
/*overflow: hidden;
        text-overflow: ellipsis;*/
/* clip long text cleanly */
/*}*/

/* Constrain actions column so it doesn't push the table */
/*.bookers-table-wrapper th.actions-cell,
        .bookers-table-wrapper td.actions-cell {
            width: 120px;*/
/* adjust to your icon/button set */
/*text-align: right;
        }

            .bookers-table-wrapper td.actions-cell .action-btn,
            .bookers-table-wrapper td.actions-cell > * {
                display: inline-flex;
                align-items: center;
                gap: 6px;
                flex-wrap: nowrap;
                max-width: 100%;
            }*/

.form-filter-agent .section {
    margin-bottom: 24px;
    border-top: 1px solid #e5e7eb;
    padding-top: 24px;
}

.form-filter-agent .section-title {
    font: normal normal 700 var(--s-14);
    color: #9ca3af90;
    text-transform: uppercase;
    margin-bottom: 12px;
    border-top: none;
    padding-top: 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

    .form-filter-agent .section-title:hover {
        color: #9ca3af;
    }

.form-filter-agent .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    width: 100%;
}

.form-filter-agent .contacts-section-title {
    font: normal normal 700 var(--s-14);
    color: rgba(17, 24, 39, 1);
    text-transform: capitalize;
    margin-bottom: 12px;
    border-top: none;
    padding-top: 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.form-filter-agent .section {
    margin-top: 12px;
}

/* Form */
.form-filter-agent .form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--px-16);
}

.form-filter-agent .form-item label {
    display: block;
    margin-bottom: var(--px-6);
    font: normal normal 400 var(--s-14);
}

.form-filter-agent .form-item input {
    width: 100%;
    padding: var(--px-8) var(--px-12);
    border-radius: var(--px-8);
    border: 1px solid #e5e7eb;
}

    .form-filter-agent .form-item input[readonly] {
        background: var(--bs-gray-200);
    }

    .form-filter-agent .form-item input:disabled {
        opacity: 0.8;
        cursor: not-allowed;
    }

.form-filter-agent .form-item.full {
    grid-column: 1 / -1;
}

/* Footer */
.form-filter-agent .agent-footer {
    padding: var(--px-16);
    border-top: 1px solid #d3d3d3;
    display: flex;
    gap: var(--px-12);
    justify-content: space-between;
}

    .form-filter-agent .agent-footer .btn-cancel {
        background: white;
        color: black;
        border: 1px solid #d3d3d3;
    }

.agent-tab-body .btn-action {
    color: #ffffff;
    border: none !important;
    border-radius: var(--px-8);
    font: normal normal 500 var(--s-14);
    cursor: pointer;
    transition: background .25s, border-color .25s;
    display: inline-flex;
    align-items: center;
    gap: var(--px-6);
    flex: 1;
    width: var(--px-8);
    height: 100%;
    background: transparent;
    padding: 0 !important;
}

    .agent-tab-body .btn-action svg {
        color: #d1d1d1;
    }

    .agent-tab-body .btn-action:hover {
        background: var(--bs-main-100);
    }

        .agent-tab-body .btn-action:hover svg {
            color: var(--bs-main);
        }

    .agent-tab-body .btn-action.delete:hover {
        background: #dc354550;
    }

        .agent-tab-body .btn-action.delete:hover svg {
            color: #dc3545;
        }

.form-filter-agent .btn-cancel-agent {
    padding: var(--px-12) var(--px-18);
    border-radius: var(--px-8);
    font: normal normal 500 var(--s-14);
    cursor: pointer;
    transition: background .25s, border-color .25s;
    display: inline-flex;
    align-items: center;
    gap: var(--px-6);
    flex: 1;
    background: white;
    color: black;
    border: 1px solid #d3d3d3;
}

.form-filter-agent .btn-save-agent {
    flex: 1;
}

/* Tablet trở lên */
@media (min-width: 640px) {
    .form-filter-agent .form-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .form-filter-agent .agent-footer {
        flex-direction: row;
        justify-content: flex-end;
    }
}

.form-filter-agent .header-select-edit-agent {
    width: 100%;
    position: sticky;
    padding: var(--px-16);
    display: flex;
    gap: var(--px-4);
    flex: 1;
    max-height: min-content;
    box-shadow: 0 2px 12px #d1d1d150;
    position: relative;
    justify-content: space-between;
    border-bottom: 1px solid var(--bs-gray-300);
    background: white;
    border-radius: 12px 12px 0 0;
    flex-wrap: wrap;
    z-index: 1;
}

    .form-filter-agent .header-select-edit-agent p:not(.date-range) {
        color: black;
        font: normal normal 600 var(--s-20);
    }

    .form-filter-agent .header-select-edit-agent span {
        font: normal normal 400 var(--s-13);
        color: var(--bs-gray-700);
    }

.form-filter-agent .body-select-company {
    gap: var(--px-16) !important;
}

.group-filter-box .agent {
    display: flex;
    gap: var(--px-8);
    align-items: center;
}

    .group-filter-box .agent .btn-add {
        padding: var(--px-8) var(--px-12);
        border: 1px solid #ddd;
        cursor: pointer;
        border-radius: 6px;
        background: white;
        font: normal normal 400 var(--s-13);
        color: var(--bs-gray-900);
        width: 152px;
    }

.pms--room-body .agent-body {
    box-shadow: none;
    border: none;
}

.agent-body .table-list-item button.btn-view {
    background: #fff;
    color: var(--bs-main);
    border: 1px solid var(--bs-gray-300);
    width: var(--px-36);
    height: var(--px-36);
    padding: 0;
    border-radius: var(--px-12);
    box-shadow: 0 0 6px rgba(29, 32, 37, 0.10);
}

    .agent-body .table-list-item button.btn-view i {
        font-size: var(--px-16);
        color: var(--bs-main-600);
    }

    .agent-body .table-list-item button.btn-view:hover {
        background: var(--bs-green-o);
        border-color: var(--bs-main-300);
    }

        .agent-body .table-list-item button.btn-view:hover i {
            color: var(--bs-main-600);
        }

/* table new UI */
.agent-body .table-container {
    background-color: white;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: auto;
    border: 1px solid #f3f4f6;
}

    .agent-body .table-container .table-wrapper {
        overflow-x: auto;
    }

    .agent-body .table-container table {
        width: 100%;
        text-align: left;
        border-collapse: collapse;
        min-width: 1000px;
    }

    .agent-body .table-container thead {
        background-color: rgba(249, 250, 251, 0.5);
        border-bottom: 1px solid #f3f4f6;
    }

        .agent-body .table-container thead th {
            padding: var(--px-12) var(--px-16);
            font: normal normal 600 var(--s-12);
            color: #6b7280;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

            .agent-body .table-container thead th.action-column {
                text-align: center;
                width: 80px;
            }

    .agent-body .table-container tbody {
        background-color: white;
    }

        .agent-body .table-container tbody tr {
            border-bottom: 1px solid #f9fafb;
            transition: background-color 0.2s;
        }

            .agent-body .table-container tbody tr:hover {
                background-color: rgba(249, 250, 251, 0.8);
            }

        .agent-body .table-container tbody td {
            padding: 0.65rem var(--px-16);
            font: normal normal 400 var(--s-14);
        }

    .agent-body .table-container td.code {
        font: normal normal 500 var(--s-14);
        color: var(--text-color);
    }

    .agent-body .table-container td.name {
        font: normal normal 500 var(--s-14);
        color: var(--text-color);
    }

    .agent-body .table-container td.address,
    .agent-body .table-container td.vat {
        color: #4b5563;
    }

    .agent-body .table-container td.address {
        max-width: 300px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .agent-body .table-container td.secondary {
        color: #6b7280;
    }

        .agent-body .table-container td.secondary.truncate {
            max-width: 300px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

    .agent-body .table-container td.action {
        text-align: center;
    }

    .agent-body .table-container .action-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.5rem;
        color: #9ca3af;
        background: none;
        border: none;
        border-radius: 0.5rem;
        cursor: pointer;
        transition: all 0.2s;
    }

        .agent-body .table-container .action-button:hover {
            color: #7fad49;
            background-color: rgba(127, 173, 73, 0.1);
        }

    .agent-body .table-container .pagination-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.75rem 1rem;
        border-top: 1px solid #f3f4f6;
        background-color: rgba(249, 250, 251, 0.3);
        gap: 0.75rem;
    }

    .agent-body .table-container .pagination-info {
        font-size: 0.875rem;
        color: #6b7280;
        text-align: center;
    }

        .agent-body .table-container .pagination-info .highlight {
            font-weight: 500;
            color: #111827;
        }

    .agent-body .table-container .pagination-buttons {
        display: flex;
        gap: 0.5rem;
    }

    .agent-body .table-container .pagination-button {
        padding: 0.375rem 0.75rem;
        font-size: 0.875rem;
        color: #4b5563;
        background-color: white;
        border: 1px solid #e5e7eb;
        border-radius: 0.5rem;
        cursor: pointer;
        transition: background-color 0.2s;
    }

        .agent-body .table-container .pagination-button:hover:not(:disabled) {
            background-color: #f9fafb;
        }

        .agent-body .table-container .pagination-button:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

/* end UI */

.agent-body .table-list-item.large-col {
    display: flex;
    gap: var(--px-8);
    margin: var(--px-8) 0;
}

.agent-body .table-list-row {
    display: flex;
    gap: var(--px-8);
    min-width: 100%;
    width: fit-content;
    align-items: center;
    min-height: var(--px-36);
    padding: 0 var(--px-16);
    font: normal normal 400 var(--s-12);
    border-bottom: 1px dashed var(--bs-gray-300) !important;
}

.agent-body .table-list-item.large-col button {
    background-color: transparent;
}

    .agent-body .table-list-item.large-col button i {
        color: var(--bs-gray-700);
        padding-top: 4px;
        font-weight: 300;
        flex: 1;
        max-width: var(--px-32);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: var(--px-20);
    }

.pms--travelagent .area-reser-filter {
    gap: 12px;
    display: none;
    background: var(--bg-main);
    padding: var(--px-16);
    border-radius: 8px;
    border: 1px solid var(--bs-gray-200);
}

    /* Main horizontal layout */
    .pms--travelagent .area-reser-filter .form-grid-filter {
        display: flex;
        align-items: flex-end;
        gap: 12px;
        flex-wrap: wrap;
    }

    .pms--travelagent .area-reser-filter .form-group-filter {
        display: flex;
        flex-direction: column;
        gap: var(--px-4);
        flex: 1;
        min-width: 150px;
    }

    .pms--travelagent .area-reser-filter label {
        font-size: 13px;
        font-weight: 500;
        color: #666;
        display: flex;
        align-items: center;
        background: transparent !important;
        margin-bottom: 4px;
    }

        .pms--travelagent .area-reser-filter label svg {
            margin-right: 6px;
        }

    .pms--travelagent .area-reser-filter input[type="text"],
    .pms--travelagent .area-reser-filter select {
        padding: 10px 12px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 14px;
        transition: all 0.3s ease;
        background: white;
        height: 40px;
    }

        .pms--travelagent .area-reser-filter input[type="text"]:focus,
        .pms--travelagent .area-reser-filter select:focus {
            outline: none;
            border-color: var(--bs-main-300);
            box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
        }

    /* Options section - horizontal layout */
    .pms--travelagent .area-reser-filter .options-section {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
    }

        .pms--travelagent .area-reser-filter .options-section .options-checkbox {
            display: flex;
            width: 100%;
            flex-direction: row;
            align-items: center;
            gap: 12px;
        }

    .pms--travelagent .area-reser-filter .checkbox-item {
        display: flex;
        cursor: pointer;
        gap: 6px;
        white-space: nowrap;
    }

        .pms--travelagent .area-reser-filter .checkbox-item input[type="checkbox"] {
            width: 16px;
            height: 16px;
            cursor: pointer;
            border: 2px solid #999;
            border-radius: 3px;
            appearance: none;
            background-color: white;
            position: relative;
            transition: all 0.2s ease;
            margin: 0;
            flex-shrink: 0;
            visibility: visible;
        }

            .pms--travelagent .area-reser-filter .checkbox-item input[type="checkbox"]:checked {
                background-color: var(--bs-main-400);
                border-color: var(--bs-main-400);
            }

                .pms--travelagent .area-reser-filter .checkbox-item input[type="checkbox"]:checked::after {
                    content: "✔";
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -55%);
                    font-size: 11px;
                    color: white;
                }

    /* Apply button */
    .pms--travelagent .area-reser-filter .search-button {
        background: var(--bs-main-400);
        color: white;
        border: none;
        border-radius: 4px;
        font: normal normal 600 var(--s-14);
        cursor: pointer;
        transition: all 0.3s ease;
        height: 40px;
        white-space: nowrap;
        flex-shrink: 0;
    }

        .pms--travelagent .area-reser-filter .search-button:hover {
            background: var(--bs-main-500);
        }

    .pms--travelagent .area-reser-filter.open-filter {
        display: flex;
        flex-direction: column;
        background: #fff;
    }

    .pms--travelagent .area-reser-filter .form--input span {
        font: normal normal 600 var(--s-14);
    }

    .pms--travelagent .area-reser-filter .form--input .search-form {
        overflow: hidden;
    }

        .pms--travelagent .area-reser-filter .form--input .search-form input {
            border: none;
            background: #fff;
        }

.form-popup-general-pms .body-select-company {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--px-28);
    /*    padding: var(--px-16);*/
    overflow: hidden;
}

    .form-popup-general-pms .body-select-company .form-group {
        flex: 1;
        max-width: 100%;
        max-width: 100%;
        max-height: 40%;
    }

        .form-popup-general-pms .body-select-company .form-group label {
            font: normal normal 500 var(--bs-gray-600);
            color: var(--bs-gray-600);
        }

        .form-popup-general-pms .body-select-company .form-group span {
            font: normal normal 500 var(--bs-gray-600);
            color: red;
        }


        .form-popup-general-pms .body-select-company .form-group .form--input textarea {
            margin: 0;
            width: 100%;
            outline: none;
            border-radius: 8px;
            border: var(--bdr-1);
            color: var(--bs-dark);
            font: normal normal 400 var(--s-13);
            background: var(--bg-inp);
        }

        .form-popup-general-pms .body-select-company .form-group .form--input .row_inp {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            gap: var(--px-8);
        }


        .form-popup-general-pms .body-select-company .form-group.disabled-form .form--input input {
            pointer-events: none;
            border: none;
            background: #fff;
        }

        .form-popup-general-pms .body-select-company .form-group.disabled-form .form--input textarea {
            pointer-events: none;
            border: none;
        }

.form-filter-agent .title-edit {
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: row !important;
    width: 100%;
}

form-filter-agent .body-select-company {
    padding: 0;
}

.form-filter-agent .footer-select-edit {
    display: flex;
    gap: var(--px-8);
    justify-content: flex-end;
}

    .form-filter-agent .footer-select-edit .btn-save-detail {
        font: normal normal 500 var(--s-14);
        height: auto;
        padding: var(--px-12) var(--px-16);
        background: white;
        color: var(--text-color);
    }

    .form-filter-agent .footer-select-edit .btn__cancel {
        background: #fff;
        border: 1px solid var(--bs-gray-300);
    }

        .form-filter-agent .footer-select-edit .btn__cancel span {
            font: normal normal 500 var(--s-14);
            color: var(--bs-body-color);
        }

.form-filter-agent .form-group {
    max-width: 100%;
    background-color: #fff;
    /*box-shadow: -2px 0 10px #cfcfcf;*/
}

.form-popup-general-pms .body-select-company .company-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--px-28);
    padding: var(--px-16);
}

    .form-popup-general-pms .body-select-company .company-header .company-title {
        display: flex;
        flex-direction: column;
    }

        .form-popup-general-pms .body-select-company .company-header .company-title span {
            --tw-text-opacity: 1;
            color: rgb(17 24 39 / var(--tw-text-opacity, 1));
            font: normal normal 700 var(--s-24);
        }

    .form-popup-general-pms .body-select-company .company-header .list_action {
        display: flex;
        align-items: center;
        gap: var(--px-8);
    }

    .form-popup-general-pms .body-select-company .company-header .list_action {
        display: flex;
        align-items: center;
        gap: var(--px-8);
    }

        .form-popup-general-pms .body-select-company .company-header .list_action .btn-edit-detail {
            font-weight: 500;
            line-height: 1.2;
        }

    .form-popup-general-pms .body-select-company .company-header .company-code {
        font-weight: 500;
        line-height: 1.2;
    }

        .form-popup-general-pms .body-select-company .company-header .company-code span {
            color: var(--bs-gray-600);
            font: normal normal 500 var(--s-16);
        }

.pms--travelagent .table-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
    background: var(--white);
    border-top: 1px solid #ddd;
    border-radius: 0 0 8px 8px;
}

    .pms--travelagent .table-footer .paging-info {
        font-size: 14px;
        color: #333;
        font-weight: 500;
    }

    .pms--travelagent .table-footer .paging-buttons {
        display: flex;
        gap: var(--px-8);
    }

        .pms--travelagent .table-footer .paging-buttons button {
            border-radius: 50%;
            border: 1px solid #ccc;
            background: var(--white);
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            justify-content: center;
            align-items: center;
        }

            .pms--travelagent .table-footer .paging-buttons button i {
                color: var(--bs-main);
                font-weight: 500;
            }

            .pms--travelagent .table-footer .paging-buttons button:hover {
                background: #f0f0f0;
            }

            .pms--travelagent .table-footer .paging-buttons button:disabled {
                opacity: 0.4;
                cursor: not-allowed;
            }

/* Add reservation */
.form-group {
    width: 100%;
    display: grid !important;
    max-width: var(--px-700);
    background: var(--white);
    border-radius: var(--px-8);
    grid-gap: var(--px-16) var(--px-12);
    padding: var(--px-16) var(--px-20);
    grid-template-rows: min-content;
    grid-template-columns: repeat(12, 1fr);
}

    .form-group .header--detail {
        position: relative;
        grid-column: span 12;
        padding-bottom: var(--px-8);
        margin-bottom: var(--px-20);
        font: normal normal 600 var(--s-18);
    }

        .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--input {
    height: 100%;
    display: flex;
    gap: var(--px-12);
    position: relative;
    grid-column: span 6;
    flex-direction: column;
    font: normal normal 400 var(--s-13);
}

    .form--input.img-hotel img {
        width: var(--px-120);
        height: var(--px-120);
        border-radius: var(--px-120);
        border: 1px solid var(--bs-gray-300);
    }

    .form--input select {
        margin: 0;
        width: 100%;
        outline: none;
        border-radius: 8px;
        height: var(--px-40);
        border: var(--bdr-1);
        color: var(--bs-dark);
        padding: var(--px-12) var(--px-16);
        font: normal normal 400 var(--s-13);
        background: var(--bg-inp);
    }

    .form--input input {
        margin: 0;
        width: 100%;
        outline: none;
        border-radius: 8px;
        height: var(--px-40);
        border: var(--bdr-1);
        color: var(--bs-dark);
        padding: var(--px-8);
        font: normal normal 500 var(--s-13);
    }

        .form--input input.invalid {
            border-color: #ff6b7a;
            box-shadow: 0 1px 20px #ff00002b;
        }

        .form--input input[readonly] {
            background: var(--bs-gray-200);
            /* padding: 0; */
            /* opacity: 0.4; */
        }

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

    .form--input label {
        font: normal normal 500 var(--s-14);
        pointer-events: all;
    }

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

    .form--input textarea {
        margin: 0;
        width: 100%;
        outline: none;
        border-radius: 8px;
        height: var(--px-80);
        border: var(--bdr-1);
        color: var(--bs-dark);
        padding: var(--px-12) var(--px-16);
        font: normal normal 400 var(--s-13);
    }

    .form--input .titl-form {
        color: var(--text-color) !important;
        font: normal normal 500 var(--s-18) !important;
    }

    .form--input.has-bd {
        position: relative;
        box-shadow: var(--shadow-qs-light);
        border: 1px solid var(--bs-gray-100);
    }

        .form--input.has-bd.collapse {
            overflow: hidden;
            max-height: var(--px-76);
        }

            .form--input.has-bd.collapse .info-guest-typed {
                display: flex;
                color: var(--bs-orange);
            }

                .form--input.has-bd.collapse .info-guest-typed.typed {
                    text-transform: uppercase;
                    color: var(--bs-gray-600);
                }

            .form--input.has-bd.collapse .grid-3,
            .form--input.has-bd.collapse .grid-8,
            .form--input.has-bd.collapse .grid-12.upload,
            .form--input.has-bd.collapse .grid-4,
            .form--input.has-bd.collapse .grid-6 {
                display: none;
            }

        .form--input.has-bd:not(.collapse) .info-guest-typed {
            display: none;
        }

        .form--input.has-bd .collapse-guest {
            position: absolute;
            top: var(--px-20);
            right: var(--px-12);
            background: unset;
            color: var(--bs-dark);
            z-index: 11;
            cursor: pointer;
        }

            .form--input.has-bd .collapse-guest:hover {
                background: var(--bs-gray-100);
            }

/* Create a custom checkbox */
div.option.select-radio {
    flex: 1;
    display: flex;
    min-width: 30%;
    cursor: pointer;
    gap: var(--px-8);
    align-items: center;
    grid-column: span 2;
    min-height: var(--px-40);
    color: var(--bs-gray-600);
    border-radius: var(--px-8);
    justify-content: flex-start;
    font: normal normal 400 var(--s-13);
}

    div.option.select-radio.active {
        color: var(--bs-dark);
        background: 0 !important;
    }

    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(--bs-gray-200);
    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 !important;
    margin: 0;
    position: relative;
    cursor: pointer;
    height: var(--px-32);
    width: var(--px-32);
    pointer-events: none;
    content: unset;
}

    .container--checkbox input:checked ~ .checkmark,
    .option.select-radio.active .checkmark {
        background-color: var(--bs-main-100);
        height: var(--px-24);
        width: var(--px-24);
    }

        .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: "" !important;
        position: absolute;
        display: none;
    }

    /* Show the checkmark when checked */
    .container--checkbox input[checked] ~ .checkmark::after,
    .container--checkbox input:checked ~ .checkmark:after,
    .option.select-radio.active .checkmark:after {
        display: block;
        border-color: var(--bs-main-500);
    }

    /* Style the checkmark/indicator */
    .container--checkbox .checkmark:after {
        left: 7px;
        top: 2px;
        width: var(--px-8);
        height: var(--px-16);
        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;
    }

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

    .toggle-option .label-input {
        display: flex;
        align-items: center;
    }

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: var(--bs-gray-200);
    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-16);
        transition: 0.5s;
    }

input:checked + label.checkbox {
    background: var(--bs-main);
    border: 1px solid var(--bs-gray-300);
}

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

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

/* Loading */
.loading-container {
    display: flex;
    min-width: 100%;
    width: 100%;
    justify-content: center;
    margin: 8px 0;
    min-height: 100%;
    height: 100%;
    font-size: var(--px-60);
    align-items: center;
    color: var(--bs-gray-500);
}

.form-icon-inp {
    display: flex;
    gap: var(--px-16);
    align-items: center;
    border: 1px solid var(--bs-gray-200);
    border-radius: 8px;
    overflow: hidden;
    height: var(--px-40);
    padding: 0 var(--px-16);
    color: var(--bs-dark);
    background: var(--bg-inp);
    justify-content: flex-start;
    background: white;
    font: normal normal 500 var(--s-13);
}

    .form-icon-inp.from {
        pointer-events: none;
        opacity: 0.9;
        cursor: not-allowed;
    }

    .form-icon-inp input {
        border: none;
    }

.add-new-append-body {
    display: grid;
    padding: var(--px-16);
    overflow: auto;
    background: var(--bs-gray-100);
    gap: 12px;
    min-width: var(--px-1100);
    grid-template-columns: 1fr var(--px-420);
    box-shadow: -2px 0 10px #cfcfcf;
    z-index: 1;
    height: calc(100svh - var(--px-112));
}

    .add-new-append-body .header-popup {
        grid-column: span 2;
        margin-bottom: var(--px-16);
        font: normal normal 600 var(--s-20);
    }

.adjust-quantity {
    z-index: 100;
    display: flex;
    position: relative;
    align-items: center;
    justify-content: start;
    gap: 0;
    border: 1px solid var(--bs-gray-300);
    border-radius: 8px;
    overflow: hidden;
    max-width: max-content !important;
}

    .adjust-quantity button {
        border: 0;
        display: flex;
        border-radius: 4px;
        align-items: center;
        width: var(--px-28);
        height: var(--px-36);
        padding: var(--px-8);
        justify-content: center;
        color: var(--bs-main);
        font-size: var(--px-12);
    }

        .adjust-quantity button i {
            color: var(--bs-main);
        }

        .adjust-quantity button:hover {
            color: var(--bs-main-600);
            background: var(--bs-main-200);
        }

        .adjust-quantity button.minus i {
            color: var(--bs-gray-700);
        }

        .adjust-quantity button.disable {
            pointer-events: none;
        }

    .adjust-quantity p.quantity {
        margin: 0;
        display: flex;
        align-items: center;
        width: var(--px-20);
        height: var(--px-28);
        justify-content: center;
        color: var(--bs-gray-700);
        font: normal normal 700 var(--s-14);
    }

.dropdown-menu.show {
    display: block;
    box-shadow: 0 2px 24px #a1a1a1b0;
    min-width: calc(100% - var(--px-24));
    background: white;
    border-radius: 6px;
    box-shadow: 0 2px 12px #d1d1d1;
    max-height: var(--px-500);
    overflow: auto;
    border: 1px solid var(--bs-gray-300);
    max-width: var(--px-400);
}

.dropdown:not(.no-style) {
    border: 1px solid var(--bs-gray-200);
    border-radius: 8px;
    height: var(--px-40);
    padding: 0 var(--px-12);
    background: white;
}

.dropdown button.dropdown-toggle {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0;
    box-shadow: unset !important;
    justify-content: flex-start;
    font: normal normal 400 var(--s-13);
    gap: 6px;
}

    .dropdown button.dropdown-toggle span {
        flex: 1;
        text-align: start;
    }

    .dropdown button.dropdown-toggle i,
    .form-icon-inp i {
        color: var(--bs-gray-600);
    }

.dropdown-toggle.toggle-search input {
    border: 0;
    background: inherit;
    text-transform: uppercase;
}

button.upload.no-backgr {
    width: var(--px-52);
    height: var(--px-52);
    border-radius: var(--px-48);
    border: 1px dashed var(--bs-main);
}

.lst-box-filter-top {
    flex: 1;
    display: flex;
    gap: var(--px-16);
    align-items: flex-end;
    overflow: auto;
}

    .lst-box-filter-top::-webkit-scrollbar {
        height: 0;
        width: 0;
    }

    .lst-box-filter-top .btn-filter-status-ticket {
        display: grid;
        align-items: center;
        justify-items: start;
        grid-gap: var(--px-12);
        color: var(--bs-gray-800);
        font: normal normal 500 var(--s-14);
        grid-template-columns: max-content 1fr;
        width: var(--px-200);
        padding: var(--px-16) var(--px-24);
        height: 100%;
        background: var(--bs-gray-300);
        border: 1px solid var(--bs-gray-300);
    }

        .lst-box-filter-top .btn-filter-status-ticket.active {
            position: relative;
            box-shadow: 0 2px 4px #d1d1d1a8;
            background: white;
        }

            .lst-box-filter-top .btn-filter-status-ticket.active::after {
                content: '';
                height: 50%;
                width: 4px;
                background: var(--bs-main);
                position: absolute;
                z-index: 1;
                border-radius: 0 4px 4px 0;
                bottom: 0;
                top: 50%;
                transform: translateY(-50%)
            }

        .lst-box-filter-top .btn-filter-status-ticket i {
            font-size: var(--px-20);
            font-weight: 200;
            text-shadow: 0 0 black;
        }

        .lst-box-filter-top .btn-filter-status-ticket span {
            grid-column: span 2;
            font-weight: 400;
            color: var(--bs-gray-900);
            white-space: nowrap;
        }

        .lst-box-filter-top .btn-filter-status-ticket strong {
            font-size: var(--px-24);
            font-weight: 600;
            color: var(--bg-black);
        }

.pms-general.pms--search {
    /* background: white; */
}

.filter-form-id-layout .btn-filter-status-ticket count {
    padding: 4px;
    display: flex;
    width: var(--px-24);
    height: var(--px-24);
    align-items: center;
    color: var(--bs-main-700);
    justify-content: center;
    border-radius: var(--px-20);
    background: var(--bs-main-100);
    font: normal normal 500 var(--s-12);
}

.table-append-form-search {
    flex: 1;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    padding-bottom: 0;
    position: relative;
    border-radius: 8px;
}

/* PAGINATION */
.footer-pagination {
    flex: 1;
    display: flex;
    align-items: center;
    min-height: var(--px-48);
    max-height: var(--px-48);
    position: relative;
    background: var(--bs-white);
    border-radius: 0 0 var(--px-8) var(--px-8);
    padding: 0 var(--px-12);
    justify-content: space-between;
    font: normal normal 400 var(--s-13);
    border-top: 1px solid var(--bs-gray-200);
}

    .footer-pagination strong {
    }

    .footer-pagination .list-pagination {
        flex: 1;
        display: flex;
        max-width: calc(var(--px-32) * 10 - var(--px-12));
        gap: var(--px-8);
        align-items: center;
        overflow: hidden hidden;
        justify-content: flex-start;
        padding-right: var(--px-60);
    }

    .footer-pagination button.pagination {
        padding: 0;
        display: flex;
        background: unset;
        align-items: center;
        width: var(--px-32);
        height: var(--px-32);
        justify-content: center;
        min-width: var(--px-32);
        font-weight: 800;
        border-radius: var(--px-32);
        border: 1px solid var(--bs-gray-200);
        font-size: var(--px-16);
    }

        .footer-pagination button.pagination.active {
            color: var(--bs-gray-900);
            background: var(--bs-main-200);
        }

        .footer-pagination button.pagination.prev i {
            color: var(--bs-gray-500);
            font-weight: 500;
        }

        .footer-pagination button.pagination i {
            color: var(--bs-main);
            font-weight: 500;
        }

    .footer-pagination .nav-pagination {
        position: absolute;
        right: var(--px-8);
        display: flex;
        background: var(--bs-white);
        gap: var(--px-8);
        align-items: center;
    }

        .footer-pagination .nav-pagination button {
            background: var(--bs-wite);
        }


div.pms--report .sidebar {
    background-color: #f8f9fa;
    border-right: 1px solid #dee2e6;
    height: 100%;
    overflow-y: auto;
}

div.pms--report .content {
    height: 100%;
    overflow-y: auto;
}

div.pms--report .nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: black;
}

div.pms--report .dropdown-menu {
    position: static !important;
    width: 100%;
    border: none;
    background-color: #e9ecef;
}

div.pms--report .dropdown-item {
    color: var(--bs-gray);
}

.popup-container.add-reservation .popup-content {
    background: var(--bs-gray-100);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 96%;
}

.form--input .select-add-reservation {
    border: 1px solid var(--bs-gray-300);
    height: var(--px-40);
    border-radius: 8px;
    padding: 0 var(--px-12);
    background: var(--bg-inp);
}

.check-grid {
    display: flex;
    align-items: center;
    gap: 12px;
    user-select: none;
    font: normal normal 400 var(--s-13);
}

    .check-grid .option {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .check-grid label {
        white-space: nowrap;
    }

    .check-grid input {
        vertical-align: middle;
        margin-right: 6px;
    }

.add-new-append-start {
    flex: 1;
    display: flex;
    flex-direction: column;
    border-right: 2px solid var(--bs-gray-300);
    overflow: auto;
    min-width: var(--px-690);
    max-width: var(--px-690);
    padding: var(--px-16);
    background: var(--bg-num-availble);
    gap: 12px;
}

/* Container */
.pms--add-rooms-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    /* Title */
    .pms--add-rooms-container h5 {
        margin: 0;
        font: normal normal 600 var(--s-16);
    }

/* Wrapper */
.add-new-append-end {
    display: flex;
    gap: 12px;
    flex-direction: column;
}

    /* Summary form block */
    .add-new-append-end .form-summary-end {
        display: flex;
        flex-direction: column;
        padding-top: var(--px-8);
        border-top: 3px solid var(--bs-gray-400);
    }

        .add-new-append-end .form-summary-end:first-of-type {
            border-top: 0;
        }

        /* Header */
        .add-new-append-end .form-summary-end .header-end {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font: normal normal 500 var(--s-16);
        }

            /* Option section (checkbox + text) */
            .add-new-append-end .form-summary-end .header-end .option {
                flex: 1;
                padding: 0;
            }

    .add-new-append-end .option.select-radio {
        flex: 1;
        display: flex;
        min-width: 30%;
        cursor: pointer;
        gap: var(--px-8);
        align-items: center;
        color: var(--bs-gray-600);
        border-radius: var(--px-8);
        justify-content: flex-start;
        font: normal normal 400 var(--s-13);
    }

    .add-new-append-end .option.extras {
    }

    .add-new-append-end .option.active {
    }

    .add-new-append-end .option .container--checkbox {
    }

        .add-new-append-end .option .container--checkbox .checkbox-filter {
        }

        .add-new-append-end .option .container--checkbox .checkmark::after {
            left: 8px;
            top: 2.5px;
            width: var(--px-8);
            height: var(--px-16);
            border: solid var(--bs-main-600);
            border-width: 0 2px 2px 0;
            -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            transform: rotate(45deg);
        }

    .add-new-append-end .form-summary-end .header-end .option .next {
    }

    /* Confirm number */
    .add-new-append-end .form-summary-end .header-end .confirm-num {
        flex: 1;
        display: flex;
        font: normal normal 400 var(--s-13);
        align-items: center;
        gap: 4px;
        justify-content: flex-end;
    }

        .add-new-append-end .form-summary-end .header-end .confirm-num span {
        }

        .add-new-append-end .form-summary-end .header-end .confirm-num status.confirm {
            padding: 4px 8px;
            border-radius: 20px;
            background: var(--bs-main);
            color: white;
        }

    /* Section title */
    .add-new-append-end .form-summary-end h4 {
        margin: 8px 0;
        font: normal normal 600 var(--s-18);
    }

    /* Row items */
    .add-new-append-end .form-summary-end .row-item-end {
        display: flex;
        margin: 6px 0;
        align-items: center;
        justify-content: space-between;
        font: normal normal 400 var(--s-13);
    }

        .add-new-append-end .form-summary-end .row-item-end span {
        }

        .add-new-append-end .form-summary-end .row-item-end.has-border {
            border-top: 1px solid var(--bs-gray-300);
            padding-top: 8px;
        }

        .add-new-append-end .form-summary-end .row-item-end .total {
            color: var(--bs-main) !important;
            font-size: var(--px-20);
            font-weight: 700 !important;
        }

    /* Second summary block */
    .add-new-append-end .form-summary-end .header-end h4 {
    }

    .add-new-append-end .form-summary-end .header-end status.folio {
        padding: 4px 8px;
        border-radius: 20px;
        background: var(--bs-orange-o);
        color: var(--bs-orange);
        font: normal normal 400 var(--s-13);
        border: 1px solid;
    }

    /* Guest rows */
    .add-new-append-end .form-summary-end .row-item-end span:first-child {
        color: var(--bs-gray-600);
    }

    .add-new-append-end .form-summary-end .row-item-end span:last-child {
        color: black;
        font-weight: 600;
    }

/* Popup */
.form-select-edit-popup {
    display: flex;
    background: white;
    position: absolute;
    border-radius: 8px;
    width: var(--px-440);
    flex-direction: column;
    left: calc(var(--px-450) * -1);
    height: 100%;
    border: 1px solid var(--bs-gray-300);
}

.header-select-edit {
    width: 100%;
    position: sticky;
    padding: var(--px-16);
    display: flex;
    gap: var(--px-4);
    flex: 1;
    max-height: var(--px-116);
    box-shadow: 0 2px 12px #d1d1d150;
    position: relative;
    justify-content: space-between;
    border-bottom: 1px solid var(--bs-gray-300);
    background: white;
    border-radius: 12px 12px 0 0;
    flex-wrap: wrap;
    z-index: 1;
    align-items: center;
}

    .header-select-edit p:not(.date-range) {
        color: black;
        font: normal normal 600 var(--s-20);
    }

    .header-select-edit span {
        font: normal normal 400 var(--s-13);
        color: var(--bs-gray-700);
    }

.form-select-edit-popup .btn-close-popup {
    position: absolute;
    right: 12px;
    box-shadow: unset;
    height: var(--px-32);
    width: var(--px-32);
    top: 50%;
    transform: translateY(-50%);
}

.form-select-edit-popup .body-select-edit {
    flex: 1;
    padding: 4px 0;
    background: var(--bs-main-50);
}

.form-select-edit-popup .footer-select-edit {
    flex: 1;
    max-height: var(--px-80);
}

#popup-container-custom-id.open-popup .btn-close-popover {
    left: calc(-1 * var(--px-60) - var(--px-356));
}

/* Room item container */
.item-select-room {
    gap: 8px;
    display: flex;
    padding: var(--px-12);
    border: 1px solid var(--bs-gray-300);
    border-radius: 8px;
    flex-direction: column;
}

    .item-select-room.active {
        background: white;
        border-left: 4px solid var(--bs-main);
    }

    /* Number label */
    .item-select-room .number {
        flex: 1;
        min-width: var(--px-68);
        max-width: max-content;
        text-align: center;
        color: var(--bs-main);
        font-size: var(--px-16);
        font-weight: 600;
        background: var(--bs-main-50);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        border: 1px solid var(--bs-main-200);
    }

    /* Room info section */
    .item-select-room .room-info-select {
        flex: 1;
        gap: 8px;
        display: flex;
        flex-direction: column;
        font: normal normal 400 var(--s-13);
        justify-content: center;
    }

        .item-select-room .room-info-select .name {
            font-weight: 600;
        }

    /* Guest & price info */
    .item-select-room .info-g-p {
        font: normal normal 400 var(--s-14);
    }

        .item-select-room .info-g-p i {
            color: var(--bs-gray-500);
        }

        .item-select-room .info-g-p .title {
            color: var(--text-secondary);
            font-size: var(--px-12);
        }

    .item-select-room amount {
        color: var(--bs-orange);
        font: normal normal 600 var(--s-16);
    }

    /* Schedule info */
    .item-select-room .room-info-select .info-schedule {
        gap: 8px;
        display: flex;
        align-items: center;
        font: normal normal 400 var(--s-12);
    }

        .item-select-room .room-info-select .info-schedule span {
        }

        .item-select-room .room-info-select .info-schedule i {
        }

    /* Action section */
    .item-select-room .room-action-select {
        gap: var(--px-12);
        display: flex;
        align-items: end;
        flex-direction: column;
        justify-content: space-between;
    }

        /* Adjust quantity block */
        .item-select-room .room-action-select .adjust-quantity {
        }

            .item-select-room .room-action-select .adjust-quantity[type="require"] {
            }

            .item-select-room .room-action-select .adjust-quantity button {
                width: var(--px-32);
                height: var(--px-32);
                box-shadow: unset;
            }

            .item-select-room .room-action-select .adjust-quantity .quantity {
            }

        /* Edit room button */
        .item-select-room .room-action-select .btn-edit-room {
            background: 0;
            color: var(--bs-gray-dark);
        }

            .item-select-room .room-action-select .btn-edit-room i {
            }

    .item-select-room:not(.active) .info-schedule,
    .item-select-room:not(.active) .room-action-select button:not(.plus),
    .item-select-room:not(.active) .room-action-select p.quantity,
    .item-select-room:not(.active) .btn-edit-room {
        display: none;
    }

.pointer {
    cursor: pointer;
}

.houseKeepingPointer {
    text-align: right;
    color: var(--bs-gray-900);
    font-weight: 600;
}

#dayRoomModal {
    z-index: 3001;
}

#hskp {
    z-index: 3001;
}

#dayRoomModal input,
#reservationStatusModal input,
#roomRateModal input {
    height: var(--px-32);
}

#dayRoomModal select.form-select,
#reservationStatusModal select.form-select,
#roomRateModal select.form-select {
    height: var(--px-32);
}

#dr_discrepancy {
    width: 1em !important;
    height: 1em !important;
    visibility: unset !important;
}

#reservationStatus_onlyHu {
    width: 1em !important;
    height: 1em !important;
    visibility: unset !important;
}

#report_showDetail {
    width: fit-content;
}

    #report_showDetail button.active.off {
        background: var(--bs-opacity);
    }

.table-scroll {
    /* đặt chiều cao bạn muốn ở đây */
    max-height: 250px;
    /* hoặc height: 250px; */
    overflow-y: auto;
}

#hskp .table-scroll {
    max-height: 500px;
}

/* đảm bảo header dính trên cùng khi scroll */
#dr_tbl thead.sticky-top th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bs-body-bg, #fff);
}

/* bỏ margin dưới để tránh thêm khoảng trắng */
.table-scroll table {
    margin-bottom: 0;
}

#avaiTable .section-col-room {
    /* position: unset; */
}

#avaiTable .avai-col-date {
    cursor: pointer;
    z-index: 1;
}

    #avaiTable .avai-col-date:hover {
        opacity: .7;
    }

    #avaiTable .avai-col-date.active {
        background: var(--bs-main-500);
        color: white;
        opacity: 1;
        font-size: 11px;
    }

#xTabs .nav-link {
    color: black
}

    #xTabs .nav-link.active {
        color: #198754
    }

#reservationStatusModal,
#roomRateModal .modal-xl {
    max-width: 90% !important;
}

    #reservationStatusModal .tab-pane {
        display: none;
    }

        #reservationStatusModal .tab-pane.active {
            display: block;
        }

        #reservationStatusModal .tab-pane.fade:not(.show) {
            display: none;
        }

p.today-moment-zone {
    margin: 0;
    font: normal normal 600 var(--s-14);
    min-width: var(--px-60);
    max-width: max-content;
}

.form-store-info {
    display: flex;
    padding: var(--px-16);
    flex-direction: column;
    border-bottom: 1px solid var(--bs-gray-300);
}

    .form-store-info .btn-logout-web {
        display: flex;
        gap: var(--px-12);
        align-items: center;
        height: var(--px-40);
        padding: var(--px-16) var(--px-24);
        min-width: var(--px-280);
        justify-content: flex-start;
        color: var(--bs-danger);
        margin-top: 8px;
        font-weight: 600;
    }

    .form-store-info .line-store-name {
        box-shadow: 0px 2px 9px var(--bs-main-300);
        border-radius: var(--px-8);
        display: grid;
        grid-template-columns: var(--px-56) 1fr;
        align-items: center;
        min-height: var(--px-72);
        border-radius: var(--px-8);
        cursor: pointer;
        padding: var(--px-12);
        gap: var(--px-12);
        background: 0;
    }

.line-store-name i {
    width: var(--px-56);
    height: var(--px-56);
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--px-56);
    border: 1px solid var(--bs-main-400);
}


.line-store-name img {
    width: var(--px-56);
    height: var(--px-56);
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--px-56);
    border: 1px solid var(--bs-main-400);
}

.line-store-name .title {
    font: normal normal 700 var(--s-18);
}

.basic-detail-info-store {
}

.btn-open-store-info-header {
    position: absolute;
    bottom: 0px;
    right: -2px;
    background: var(--bs-gray-300);
    outline: 3px solid white;
    border: 0;
    height: var(--px-16);
    width: var(--px-16);
    border-radius: var(--px-20);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 900;
    pointer-events: none;
    color: black;
}

.dropdown.have-txt-icon {
    border: 0;
    padding: 0;
    background: unset;
    height: unset;
}

    .dropdown.have-txt-icon .btn-filter {
        min-width: fit-content;
        width: var(--px-100);
        border-radius: 6px;
        background: white;
        font: normal normal 400 var(--s-13);
    }

    .dropdown.have-txt-icon .status-room {
        flex-direction: column;
        align-items: start;
        gap: 0;
    }

        .dropdown.have-txt-icon .status-room .form--input {
            flex-direction: row;
            align-items: center;
            cursor: pointer;
            width: 100%;
        }

            .dropdown.have-txt-icon .status-room .form--input:hover {
                opacity: .4;
            }

    .dropdown.have-txt-icon .dropdown-menu.show {
        max-height: var(--px-640);
    }

.dropdown .txt-filter-gr {
    color: var(--bs-gray-900) !important;
    font: normal normal 500 var(--s-14);
}

.option-select-report {
    display: flex;
    flex-direction: column;
}

    .option-select-report .header-option {
        padding: var(--px-16);
        font: normal normal 700 var(--s-16);
        border: 1px solid var(--bs-gray-300);
    }

    .option-select-report .content-select {
        display: flex;
        flex-direction: column;
        padding: 8px;
    }

    .option-select-report .btn-option-select {
        padding: 0;
        text-align: left;
    }

        .option-select-report .btn-option-select:hover {
            background: var(--bs-gray-100);
            border: 1px solid var(--bs-gray-300);
        }

        .option-select-report .btn-option-select.price {
        }

    .option-select-report span {
        font: normal normal 400 var(--s-14);
    }

.form-popup-general-pms {
    height: calc(100svh - var(--px-112));
    display: flex;
    width: 60vw;
    flex-direction: column;
    border-radius: var(--px-12);
    box-shadow: 0 0px 20px 0 rgb(0 0 0 / 6%), 0 2px 4px 0 rgb(0 0 0 / 8%);
    background: white;
}

    .form-popup-general-pms .header-select-edit {
        padding: var(--px-16);
        display: flex;
        flex-direction: column;
        gap: var(--px-4);
        flex: 1;
        max-height: var(--px-80);
        position: relative;
        border-bottom: 1px solid var(--bs-gray-300);
        align-items: flex-start;
    }

        .form-popup-general-pms .header-select-edit p {
            color: black;
            font: normal normal 600 var(--s-20);
        }

        .form-popup-general-pms .header-select-edit span {
            font: normal normal 400 var(--s-14);
            color: var(--bs-gray-700);
        }

    .form-popup-general-pms .btn-filter-popup-cus {
        position: absolute;
        right: 16px;
        width: var(--px-120);
        border-radius: 6px;
        background: white;
        border: 1px solid var(--bs-gray-300);
        font: normal normal 600 var(--s-14);
        height: var(--px-44);
    }

        .form-popup-general-pms .btn-filter-popup-cus i {
            font-size: var(--px-24);
            color: var(--bs-main);
            display: flex;
            align-items: center;
            font-weight: 300;
        }

        .form-popup-general-pms .btn-filter-popup-cus span {
            font: normal normal 500 var(--s-16);
        }

    .form-popup-general-pms .body-select-reservation {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: var(--px-28);
        padding: var(--px-16);
        overflow: hidden;
    }

.area-reser-switch-tab {
    gap: 12px;
    display: flex;
    align-items: flex-end;
    min-height: var(--px-48);
    overflow: auto hidden;
}

    .area-reser-switch-tab .btn-switch {
        color: var(--bs-gray-700);
        background: 0;
        font: normal normal 400 var(--s-16);
        position: relative;
    }

        .area-reser-switch-tab .btn-switch.active {
            overflow: unset;
            color: var(--bs-main);
            font: normal normal 600 var(--s-16);
        }

            .area-reser-switch-tab .btn-switch.active::before {
                position: absolute;
                content: '';
                height: 2px;
                width: 100%;
                background: var(--bs-main-400);
                left: 50%;
                bottom: -1px;
                transform: translateX(-50%);
                top: unset;
                right: unset;
                z-index: 1;
                opacity: 1;
                border-radius: 0;
            }

.form-popup-general-pms .area-reser-filter {
    gap: 12px;
    display: none;
    background: var(--bg-inp);
    padding: var(--px-16);
    border-radius: 8px;
    flex-wrap: wrap;
    border: 1px solid var(--bs-gray-300);
}

.area-reser-filter .form--input {
    flex: 1;
    max-width: 30%;
    height: auto;
}

.area-reser-filter.large-col .form--input {
    max-width: 19%;
    min-width: 18%;
}

.form-popup-general-pms.open-filter .area-reser-filter {
    display: flex;
    /* flex-direction: column; */
}

.form-popup-general-pms.open-filter .btn-filter-popup-cus {
    background: var(--main-color-o);
}

    .form-popup-general-pms.open-filter .btn-filter-popup-cus i,
    .form-popup-general-pms.open-filter .btn-filter-popup-cus span {
        color: var(--bs-gray-800);
    }

.form-popup-general-pms .form--input.fit-size {
    flex: 0;
    max-width: max-content;
    min-width: fit-content;
}

.form-popup-general-pms .form-icon-inp .date-range {
    flex: 1;
}

.form-popup-general-pms .dropdown {
    background: white;
}

.form-popup-general-pms .dropdown-menu {
}

.form-popup-general-pms .drop-btn {
    width: -webkit-fill-available;
    margin: 4px 8px;
    border: 1px solid transparent;
}

    .form-popup-general-pms .drop-btn:hover {
        background: var(--bs-gray-100);
        border: 1px solid var(--bs-gray-300);
    }

.form-popup-general-pms .search-form {
    height: var(--px-40);
}

    .form-popup-general-pms .search-form input {
        background: 0;
        border: 0;
        height: 100%;
        padding: 0;
    }

.area-display-table-list {
    flex: 1;
    display: flex;
    overflow: auto;
    flex-direction: column;
    border: 1px solid var(--bs-gray-300);
    border-radius: 8px 8px 0px 0px;
    background: white;
    position: relative;
}

    .area-display-table-list .table-list-row {
        width: fit-content;
        min-width: 100%;
        display: flex;
        align-items: center;
        min-height: var(--px-44);
        padding: 0 var(--px-16);
        font: normal normal 400 var(--s-12);
        border-bottom: 1px dashed var(--bs-gray-300);
    }

        .area-display-table-list .table-list-row:hover {
            cursor: pointer;
            background: var(--bs-gray-100);
        }

        .area-display-table-list .table-list-row:last-of-type {
            border-bottom: 0px dashed var(--bs-gray-300);
        }

        .area-display-table-list .table-list-row.header {
            top: 0px;
            position: sticky;
            z-index: 111;
            font: normal normal 600 var(--s-14);
            background: var(--bg-num-availble);
            border-radius: 8px 8px 0 0;
            box-shadow: 0 1px 4px #d1d1d1;
            border: 0;
        }

    .area-display-table-list .table-list-item {
        flex: 1;
        /* max-width: var(--px-80); */
        min-width: var(--px-80);
    }

        .area-display-table-list .table-list-item.fw-bold {
            text-align: end;
        }

        .area-display-table-list .table-list-item.large-col {
            flex: 1;
            max-width: var(--px-140);
            min-width: var(--px-140);
        }

        .area-display-table-list .table-list-item.item-col {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: normal;
            max-width: 220px;
        }

        .area-display-table-list .table-list-item.large-col.email-col {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 220px;
            display: inline-block;
            vertical-align: middle
        }

    .area-display-table-list .form-switch-btn .off.active {
        background: var(--main-color-o);
        color: black;
    }

div.popup-container.hotel-status {
    right: 46vw !important;
    box-shadow: 0 12px 70px 0 rgba(0, 0, 0, 0.2), 0 2px 70px 0 rgba(0, 0, 0, 0.2);
}


    div.popup-container.hotel-status .form-popup-general-pms {
        width: 50vw;
    }

/* REPORT */
.container-pms-append .pms-general.pms--report {
    flex-direction: row;
    padding: 4px var(--px-12);
}

.pms--report .report-side-bar {
    flex: 1;
    overflow: hidden;
    min-width: var(--px-240);
    max-width: var(--px-240);
    display: flex;
    flex-direction: column;
}

    .pms--report .report-side-bar .pms--header-page {
        padding: 0 4px;
        padding-bottom: var(--px-12);
        padding-right: var(--px-16);
        padding: 0;
    }

.pms--report .report-content-body {
    flex: 1;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    background: white;
    border-radius: 12px;
    border: 1px solid var(--bs-gray-300);
    box-shadow: 0 1px 4px #dcdcdc;
}

.pms--report .report-content .area-report {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: var(--px-16);
    gap: var(--px-16);
}



div.pms--report .nav-link {
    gap: 4px;
    justify-content: start;
    padding: 8px 10px;
    color: var(--bs-gray-600);
    cursor: pointer;
    text-align: start;
}

    div.pms--report .nav-link[aria-expanded="true"] {
        color: var(--bs-gray-900);
        font-weight: 600;
        background: white;
        border: 1px solid var(--bs-gray-400);
        border-radius: 6px;
        z-index: 4;
        outline: 8px solid var(--bg-main);
    }

.collapse.show {
    overflow: hidden;
}

    .collapse.show .nav-link {
        color: var(--bs-gray-800);
    }

div.pms--report .nav-link:hover {
    border-radius: 6px;
    background: white;
}

div.pms--report .nav-link i {
    width: var(--px-24);
    height: var(--px-24);
    font-size: var(--px-16);
    display: flex;
    align-items: center;
}

    div.pms--report .nav-link i.fa-chevron-down {
        font-size: var(--px-16);
        color: var(--bs-gray-600);
    }

div.pms--report .nav-link p {
    flex: 1;
}

div.pms--report .ul-side-bar {
    gap: 4px;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: auto;
    flex-wrap: nowrap;
}

    div.pms--report .ul-side-bar::-webkit-scrollbar {
        width: 0;
    }

    div.pms--report .ul-side-bar li.nav-item {
        -moz-border-radius: 8px;
        -webkit-border-radius: 8px;
        border-radius: 6px;
        border: 2px solid transparent;
        position: relative;
        overflow: unset;
        z-index: 2;
        font: normal normal 400 var(--s-14);
    }

        div.pms--report .ul-side-bar li.nav-item.active {
            background: white;
            border: 1px solid var(--bs-gray-400);
        }

            div.pms--report .ul-side-bar li.nav-item.active::after {
                content: '';
                position: absolute;
                height: 2000px;
                width: 24px;
                border-left: 2px solid var(--bs-gray-400);
                border-bottom: 2px solid var(--bs-gray-400);
                border-radius: 0 0 0 16px;
                left: -32px;
                bottom: 16px;
                z-index: 6;
            }

div.pms--report .area-group-type {
    display: flex;
    gap: 4px;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    padding: 0 4px;
}

div.pms--report .area-group-child {
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    padding: 4px 0;
    padding-left: var(--px-32);
    position: relative;
}

div.pms--report .group-filter {
    gap: 12px;
    display: none;
    background: var(--bg-main);
    padding: var(--px-16);
    border-radius: 8px;
    flex-wrap: wrap;
    border: 1px solid var(--bs-gray-200);
    align-items: center;
}

    div.pms--report .group-filter.open-filter {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        /* mặc định, flex items sẽ equal-height */
    }

    div.pms--report .group-filter .form--input {
        max-width: var(--px-160);
        flex: 0 0 170px;
        height: unset;
        /*max-width: var(--px-150);*/
    }

div.pms--report .body-table-append-report {
    flex: 1;
    overflow: auto;
}

.header-select-report {
    padding: var(--px-16);
    display: flex;
    gap: var(--px-4);
    flex: 1;
    max-height: min-content;
    box-shadow: 0 2px 4px #d1d1d150;
    position: relative;
    justify-content: space-between;
    flex-wrap: wrap;
}

    .header-select-report .head-date {
        white-space: nowrap;
    }

    .header-select-report p {
        color: black;
        font: normal normal 600 var(--s-18);
    }

    .header-select-report span {
        font: normal normal 400 var(--s-13);
        color: var(--bs-gray-700);
    }

.header-start-popup {
    flex: 1;
    gap: 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

    .header-start-popup .folio-num strong {
        color: var(--bs-gray-900);
        font: normal normal 600 var(--s-14);
    }

    .header-start-popup .title-room-discrepancy {
        font: normal normal 600 var(--s-16);
        color: var(--text-color);
    }

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

    .header-table-report h2 {
        font: normal normal 600 var(--s-20);
    }

    .header-table-report .print-time {
        font: italic normal 400 var(--s-14);
        color: var(--bs-gray-600);
    }

.header-end-report {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

    .header-end-report .hotel-name,
    .header-end-report .print-date {
        font: normal normal 400 var(--s-13);
    }

    .header-end-report i.fa-pipe {
        color: var(--bs-gray-400);
    }

    .header-end-report .btn-filter-popup-cus {
        width: var(--px-120);
        border-radius: 6px;
        background: white;
        border: 1px solid var(--bs-gray-300);
        height: var(--px-44);
    }

        .header-end-report .btn-filter-popup-cus i {
            font-size: var(--px-24);
            color: var(--bs-main);
            display: flex;
            align-items: center;
            font-weight: 300;
        }

.all-body-report-append {
    display: flex;
    flex-direction: column;
    gap: var(--px-16);
    flex: 1;
    padding: var(--px-16);
    overflow: hidden;
}

.header-end-report .btn-filter-popup-cus span {
    font: normal normal 600 var(--s-16)
}

.rpt-detail {
    display: flex;
    overflow: auto;
    max-height: 100%;
    border: 1px solid var(--bs-gray-300);
    border-radius: 8px;
    /*padding-left: 10px;*/
}

    .rpt-detail table {
        font: normal normal 400 var(--s-12);
    }

    .rpt-detail thead {
        position: sticky;
        top: 0;
        left: 0;
    }

    .rpt-detail table thead th {
        background: var(--bg-num-availble);
        font: normal normal 600 var(--s-14);
        border-radius: 0;
        padding: var(--px-12);
        border: 0;
    }

    .rpt-detail table tr {
        border: 0;
        border-bottom: 1px dashed var(--bs-gray-300);
    }

    .rpt-detail table td {
        padding: var(--px-8);
        border: 0;
        vertical-align: middle;
    }

    .rpt-detail table .table-secondary td {
        background: var(--bg-room-type);
        border: 0;
    }

#rpt-Roomcharge th:nth-child(3),
#rpt-Roomcharge th:nth-child(4),
#rpt-Roomcharge th:nth-child(5),
#rpt-Roomcharge th:nth-child(6),
#rpt-Roomcharge th:nth-child(7),
#rpt-Roomcharge td:nth-child(3),
#rpt-Roomcharge td:nth-child(4),
#rpt-Roomcharge td:nth-child(5),
#rpt-Roomcharge td:nth-child(6),
#rpt-Roomcharge td:nth-child(7) {
    min-width: var(--px-120);
    /* You can adjust this width */
}

#title-report-table {
    text-transform: uppercase;
    font: normal normal 600 var(--s-20);
}

.form-switch-and-search {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    max-height: min-content;
    flex-wrap: wrap;
}

    .form-switch-and-search .area-reser-switch-tab {
        flex: 1;
        align-items: center;
    }

.toggle-sidebar-btn {
    background: white;
    height: var(--px-40);
    min-width: var(--px-40);
    max-width: var(--px-40);
    border-radius: 8px;
    font-size: var(--px-20);
    color: var(--bs-main-500);
    border: 1px solid var(--bs-gray-300);
}

    .toggle-sidebar-btn.fa-rotate-180 {
        color: var(--bs-orange);
    }

.pms--report .report-side-bar.collapsed {
    transition: all .28s;
    min-width: var(--px-40);
    max-width: var(--px-40);
}

    .pms--report .report-side-bar.collapsed .area-group-type {
        padding: 0;
    }

    .pms--report .report-side-bar.collapsed .pms--header-page p {
        display: none;
    }

    .pms--report .report-side-bar.collapsed .nav-link p,
    .pms--report .report-side-bar.collapsed .pms--header-page p,
    .pms--report .report-side-bar.collapsed .fa-chevron-down {
        display: none;
    }


/* CASHIER */
.pms--cashier-center {
    flex: 1;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    gap: var(--px-24);
}

.fdc-filter-bar {
    display: flex;
    gap: var(--px-12);
    align-items: center;
    border: 1px solid var(--bs-gray-300);
    background: #f7f6f9;
    padding: 6px;
    border-radius: 8px;
    justify-content: space-between;
    overflow: hidden;
    overflow-x: auto;
    min-height: max-content;
}

    /* For WebKit browsers (Chrome, Safari, Edge) */
    .fdc-filter-bar::-webkit-scrollbar {
        display: none;
    }

/* For Firefox */
.fdc-filter-bar {
    scrollbar-width: none;
    /* hides scrollbar */
}

/* For IE/Old Edge */
.fdc-filter-bar {
    -ms-overflow-style: none;
}

.fdc-filter-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 18px;
    /* border: 1px solid #ececec; */
    border-radius: 4px;
    background: 0;
    color: #222;
    cursor: pointer;
    height: var(--px-32);
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    font: normal normal 500 var(--s-14);
    white-space: nowrap;
}

    .fdc-filter-btn:hover {
        background: var(--bs-gray-200);
        color: var(--bs-gray-900);
    }

    .fdc-filter-btn.fdc-active {
        background: var(--bs-main);
        color: #fff;
    }

        .fdc-status-reserved,
        .fdc-filter-btn.fdc-active.fdc-reserved {
            background: var(--bs-purple-o);
            color: var(--bs-purple);
        }

        .fdc-status-checkin,
        .fdc-filter-btn.fdc-active.fdc-checkin {
            background: var(--bs-blue-o);
            color: var(--bs-blue);
        }

        .fdc-status-dueout,
        .fdc-filter-btn.fdc-active.fdc-dueout {
            background: var(--bs-orange-o);
            color: var(--bs-orange);
        }

        .fdc-status-checkout,
        .fdc-filter-btn.fdc-active.fdc-checkout {
            background: #fbe6e6;
            color: #c62828;
        }

    .fdc-filter-btn .fdc-filter-icon {
        font-size: 16px;
        vertical-align: middle;
        display: none;
    }

    .fdc-filter-btn.fdc-active .fdc-filter-icon {
        color: #fff;
    }

    .fdc-filter-btn.fdc-vacant .fdc-filter-icon {
        color: var(--bs-gray-300);
    }

    .fdc-filter-btn.fdc-occupied .fdc-filter-icon {
        color: #3a82f7;
    }

    .fdc-filter-btn.fdc-dirty .fdc-filter-icon {
        color: #eab308;
    }

    .fdc-filter-btn.fdc-reserved .fdc-filter-icon {
        color: #a855f7;
    }

    .fdc-filter-btn.fdc-maintenance .fdc-filter-icon {
        color: #ef4444;
    }

    .fdc-filter-btn:focus {
        outline: 2px solid var(--bs-gray-300);
        outline-offset: 2px;
    }

.fdc-dashboard-bg {
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
}

.fdc-header {
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.fdc-header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px 24px;
}

.fdc-header-title {
    display: flex;
    align-items: center;
}

.fdc-header-icon {
    font-size: 22px;
    margin-right: 8px;
    color: var(--bs-gray-300);
}

.fdc-header-stats {
    display: flex;
    gap: 12px;
}

.fdc-stat {
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 13px;
    background: #e6f3d7;
    color: #3a3a3a;
    font-weight: 500;
}

.fdc-total {
    background: #e6f3d7;
    color: var(--bs-gray-300);
}

.fdc-header-actions {
    display: flex;
    gap: 8px;
}

.fdc-action-btn {
    background: #e6f3d7;
    border: none;
    border-radius: 6px;
    padding: 8px;
    cursor: pointer;
    font-size: 18px;
    transition: background 0.2s;
}

    .fdc-action-btn:hover {
        background: var(--bs-gray-300);
        color: #fff;
    }

.fdc-main {
    flex: 1;
    display: flex;
    gap: var(--px-12);
    overflow: hidden;
    flex-direction: column;
}

.fdc-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
    align-items: center;
}

.fdc-search {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--bs-gray-300);
    border-radius: 6px;
    font: normal normal 500 var(--s-14);
    max-width: var(--px-268);
    height: var(--px-36);
}

.fdc-filter-select {
    padding: 8px 12px;
    border: 1px solid var(--bs-gray-300);
    border-radius: 6px;
    font-size: 15px;
    background: #fff;
}

.fdc-reset-btn {
    background: white;
    color: var(--bs-gray-800);
    border: none;
    cursor: pointer;
    transition: background 0.2s;
    border: 1px solid var(--bs-gray-300);
}

    .fdc-reset-btn:hover {
        background: #5e8c2a;
    }

#fdc-rooms-container {
    display: flex;
    flex-direction: column;
    gap: var(--px-20);
    overflow: auto;
    padding-right: 0;
}

.fdc-floor-block {
    display: flex;
    flex-direction: column;
    gap: var(--px-20);
}

.fdc-floor-title {
    display: flex;
    align-items: center;
    font: normal normal 600 var(--s-16);
}

.fdc-floor-badge {
    width: var(--px-24);
    height: var(--px-24);
    background: var(--bs-main);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    font: normal normal 800 var(--s-14);
}

.fdc-floor-count {
    margin-left: 8px;
    font-size: 14px;
    color: var(--bs-gray-600);
}

.fdc-room-grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: var(--px-8);
    transition-property: all;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s;
    transition-duration: .3s;
}

.fdc-room-card {
    background: #fff;
    border: 1px solid var(--bs-gray-300);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(127, 173, 73, 0.03);
    transition: box-shadow 0.2s;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

    .fdc-room-card:hover {
        box-shadow: var(--shadow-h);
    }

.fdc-room-number {
    font: normal normal 700 var(--s-18) !important;
}

.fdc-room-header {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-height: var(--px-52);
    padding: var(--px-12) var(--px-16);
    border-bottom: 1px solid var(--bs-gray-300);
}

.header-select-edit .fdc-room-number span {
    color: var(--fdc-text);
    font: normal normal 700 var(--s-18);
}

.fdc-room-status {
    padding: 4px var(--px-8);
    border-radius: 12px;
    display: flex;
    font: normal normal 500 var(--s-14);
    gap: 6px;
    align-items: center;
}

.fdc-room-details {
    flex: 1;
    padding: var(--px-16);
    font: normal normal 500 var(--s-16);
    display: flex;
    flex-direction: column;
    gap: var(--px-12);
}

    .fdc-room-details .fdc-room-beds {
        color: var(--bs-gray-500);
        font: italic normal 400 var(--s-12);
    }

    .fdc-room-details .fdc-room-type {
        flex: 1;
        gap: 8px;
        display: flex;
        border-bottom: 1px solid var(--bs-gray-300);
        padding-bottom: 8px;
    }

    .fdc-room-details .fdc-info-r {
        gap: 8px;
        display: flex;
        font: normal normal 500 var(--s-14);
    }

    .fdc-room-details .fdc-info-room {
        gap: 4px;
        display: flex;
        flex-direction: column;
    }

        .fdc-room-details .fdc-info-room strong {
            color: var(--bs-main);
            font: normal normal 600 var(--s-14);
            white-space: nowrap;
        }

    .fdc-room-details .fdc-room-guest {
        gap: 4px;
        display: flex;
        flex-direction: column;
    }

.fdc-room-notes {
    color: var(--bs-danger);
    font: normal normal 400 var(--s-14);
}

.fdc-no-rooms {
    background: #fff;
    border: 1px solid var(--bs-gray-300);
    border-radius: 10px;
    padding: 32px;
    text-align: center;
    color: var(--bs-gray-300);
    font-size: 16px;
}

.fdc-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 75%;
    max-width: 100vw;
    height: 100vh;
    background: #fff;
    box-shadow: -2px 0 16px rgba(127, 173, 73, 0.08);
    transform: translateX(100%);
    transition: transform 0.3s;
    z-index: 1111;
    display: flex;
    flex-direction: column;
}

    .fdc-drawer.open {
        transform: translateX(0);
    }

.fdc-drawer-content {
    padding: 24px;
    flex: 1;
    overflow-y: auto;
}

.fdc-drawer-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    font-size: 28px;
    color: var(--bs-gray-300);
    cursor: pointer;
}

    .fdc-drawer-close:hover {
        color: #5e8c2a;
    }

.fdc-row-filter {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: center;
    background: #ffffff;
    padding: 4px;
    border-radius: 6px;
    box-shadow: 0 1px 2px #d1d1d163;
    border: 1px solid var(--bs-gray-300);
}

    .fdc-row-filter.second {
        display: none;
    }

    .fdc-row-filter.fdc-row-move-type {
        background: var(--bg-main);
        border: 0;
    }

    .fdc-row-filter .fdc-filter-btn {
        flex: 1;
        border: 1px solid transparent;
    }

        .fdc-row-filter .fdc-filter-btn.active {
            border-radius: 6px;
            background: var(--bs-body-bg);
            border: 1px solid var(--bs-gray-300);
        }

button.open-filter {
    background: white;
    color: black;
    font: normal normal 500 var(--s-14);
    border: 1px solid var(--bs-gray-300);
    min-height: var(--px-36);
}

    button.open-filter.save-changes {
        background: var(--bs-main);
        color: white;
        border-color: var(--bs-main-300);
        min-width: var(--px-120);
    }

.fdc-filter-bar.filter-opening .fdc-row-filter.second {
    display: flex;
}

/* Booking Detail */
/* ===== frontdesk-bookingdetail.css (inlined for preview) ===== */
:root {
    --fdc-primary: #7fad49;
    --fdc-secondary-bg: #fcf7f2;
    --fdc-border: #e5e7eb;
    --fdc-green: #059669;
    --fdc-blue: #2563eb;
    --fdc-navy: #0f172a;
    --fdc-warning-bg: #fef9c3;
    --fdc-warning-border: #fde68a;
    --fdc-text: #0b1220
}

.preview-wrap {
    padding: 24px
}

#fdc-drawer {
    max-width: 75%;
    margin: 0 auto;
}

.fdc-bookingdetail-root {
    font: normal normal 400 var(--s-14);
    color: var(--fdc-text);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.fdc-panel {
    background: white;
    border-radius: var(--px-12);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

    .fdc-panel .container--checkbox {
        pointer-events: all;
    }

.fdc-panel-header {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.fdc-room-heading {
    font: normal normal 600 var(--s-16);
    color: #111827;
}

.header-select-edit .fdc-room-number span.fdc-room-type {
    font: normal normal 400 var(--s-14);
    color: var(--fdc-text);
}

.header-select-edit .fdc-dash {
    font: normal normal 400 var(--s-14);
    color: #9ca3af;
}

.fdc-header-actions {
    display: flex;
    gap: var(--px-8);
    align-items: center;
}

.fdc-btn {
    font: normal normal 600 var(--s-13);
    border-radius: var(--px-8);
    border: 1px solid transparent;
    background: var(--bs-gray-200);
    color: #374151;
    padding: var(--px-8) var(--px-12);
    line-height: 1;
    cursor: pointer;
    transition: all .15s ease;
    white-space: nowrap;
}

    .fdc-btn:hover {
        filter: brightness(.98);
    }

    .fdc-btn.disabled {
        opacity: .5;
        cursor: not-allowed;
        pointer-events: none;
    }

.fdc-btn-ghost {
    background: #fff;
    border-color: var(--fdc-border);
}

.fdc-btn-link {
    background: transparent;
    border: none;
    color: var(--fdc-blue);
    padding: 0 var(--px-4);
    font: normal normal 600 var(--s-13);
}

.fdc-btn-icon {
    width: var(--px-32);
    height: var(--px-32);
    border-radius: var(--px-8);
    border: 1px solid var(--fdc-border);
    background: #fff;
    font: normal normal 400 var(--s-18);
    line-height: 1;
}

.fdc-btn-outline {
    background: #fff;
    border: 1px solid var(--fdc-border);
    color: #111827;
}

    .fdc-btn-outline .fa-arrow-rotate-right {
        color: #8a8a8a;
    }

.fdc-btn-dark {
    background: var(--fdc-navy);
    color: #fff;
    border: none;
}

.fdc-btn-green {
    background: var(--fdc-primary);
    color: #fff;
    border: none;
}

.fdc-btn-blue {
    background: var(--fdc-blue);
    color: #fff;
    border: none;
}

.fdc-btn:active {
    transform: translateY(1px);
}

.fdc-kebab {
    position: relative;
}

.fdc-kebab-menu {
    position: absolute;
    right: 0;
    top: var(--px-40);
    background: #fff;
    border: 1px solid var(--fdc-border);
    border-radius: var(--px-12);
    box-shadow: 0 var(--px-8) var(--px-24) rgba(0, 0, 0, .12);
    padding: var(--px-8);
    display: none;
    min-width: var(--px-152);
    z-index: 20;
}

.fdc-kebab-item {
    padding: var(--px-8) var(--px-12);
    border-radius: var(--px-8);
    font: normal normal 400 var(--s-13);
    cursor: pointer;
}

    .fdc-kebab-item:hover {
        background: #f3f4f6;
    }
.fdc-info {
   background-color: #0d6efd;
   color: white
}
.fdc-warning {
   background-color: #ffc107;
   color: white
}

.fdc-danger {
    color: #dc2626;
}

.fdc-grid {
    flex: 1;
    display: grid;
    grid-template-columns: var(--px-420) 1fr;
    overflow: hidden;
}

.fdc-card {
    /* border: 1px solid var(--fdc-border); */
    /* border-radius: var(--px-8); */
    background: #fff;
}

.fdc-col-left,
.fdc-col-right {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.fdc-col-left {
    border-right: 4px solid var(--bs-gray-300);
}

.fdc-col-right {
    height: 100%;
}

.fdc-guest-card {
    /* flex: 1; */
    background: unset;
}

.fdc-guest-header {
    display: flex;
    align-items: center;
    gap: var(--px-12);
    padding: var(--px-12) var(--px-16);
    border-bottom: 1px solid var(--bs-gray-300);
}

.fdc-guest-avatar {
    width: var(--px-32);
    height: var(--px-32);
    border-radius: 999px;
    background: var(--bs-main-100);
    color: var(--bs-main);
    display: flex;
    align-items: center;
    justify-content: center;
    font: normal normal 700 var(--s-12);
}

.fdc-guest-lines {
    display: flex;
    flex-direction: column;
    gap: var(--px-4);
}

.fdc-guest-name {
    font: normal normal 700 var(--s-14);
}

.fdc-guest-folio {
    font: normal normal 400 var(--s-12);
    color: #6b7280;
}

.fdc-link {
    color: #1f2937;
    text-decoration: none;
    font: normal normal 400 var(--s-14);
}

.fdc-less {
    margin-left: auto;
    border: 1px solid var(--bs-gray-300);
    padding: 0 8px;
    color: var(--bs-red);
}

.fdc-dates-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--px-8);
    padding: var(--px-12) var(--px-16);
    padding-bottom: 4px;
}

.fdc-date-label {
    font: normal normal 400 var(--s-12);
    color: #6b7280;
}

.fdc-date-value {
    font: normal normal 600 var(--s-14);
    color: #111827;
}

.fdc-text-right {
    text-align: right;
}

.fdc-nights-pill {
    background: var(--bs-orange-o);
    color: var(--bs-orange);
    padding: var(--px-4) var(--px-12);
    border-radius: 999px;
    font: normal normal 500 var(--s-12);
}

.fdc-confirm-row {
    display: flex;
    margin: auto;
    justify-content: center;
    padding-bottom: var(--px-12);
    border-bottom: 1px solid var(--bs-gray-300);
}

.fdc-confirm-pill {
    background: #f3f4f6;
    color: var(--fdc-text);
    border: 1px solid var(--fdc-border);
    padding: var(--px-4) var(--px-12);
    border-radius: var(--px-8);
    font: normal normal 600 var(--s-12);
}

.fdc-balance-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--px-16);
}

.fdc-balance-label {
    font: normal normal 400 var(--s-12);
    color: #6b7280;
    margin-bottom: 4px;
}

.fdc-balance-amount {
    font: normal normal 800 var(--s-22);
    color: var(--bs-main);
}

.fdc-badge {
    display: inline-block;
    padding: var(--px-4) var(--px-12);
    border-radius: 999px;
    font: normal normal 500 var(--s-12);
    border: 1px solid transparent;
}

.fdc-badge-vacant {
    background: #ecfdf5;
    color: #059669;
    border-color: #d1fae5;
}

.fdc-badge-occupied {
    background: #eff6ff;
    color: #2563eb;
    border-color: #dbeafe;
}

.fdc-badge-dirty {
    background: #fefce8;
    color: #ca8a04;
    border-color: #fef08a;
}

.fdc-badge-reserved {
    background: #f5f3ff;
    color: #7c3aed;
    border-color: #ede9fe;
}

.fdc-badge-maintenance {
    background: #fef2f2;
    color: #dc2626;
    border-color: #fee2e2;
}

.fdc-notice {
    padding: 0 var(--px-16);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fdc-notice-title {
    font: normal normal 700 var(--s-12);
    color: var(--bs-orange);
}

.fdc-notice-text {
    font: normal normal 400 var(--s-12);
    color: var(--fdc-text);
    padding: 12px;
    border-radius: 4px;
    background: var(--bs-yellow-o);
    border: 1px solid var(--bs-orange-o);
}

.fdc-guestlist-card {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding-top: var(--px-12);
}

.fdc-section-title {
    font: normal normal 600 var(--s-16);
    padding: 0 var(--px-16);
}

.fdc-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    padding: var(--px-12);
}

.fdc-input {
    width: 100%;
    height: var(--px-36);
    border: 1px solid var(--fdc-border);
    border-radius: 6px;
    padding: 0 var(--px-12);
    font: normal normal 400 var(--s-13);
}

    .fdc-input:focus {
        outline: none;
        box-shadow: 0 0 0 var(--px-4) rgba(37, 99, 235, .15);
    }

.fdc-input-trailing {
    position: absolute;
    right: var(--px-8);
    color: #6b7280;
    font: normal normal 400 var(--s-12);
}

.fdc-guest-list {
    display: flex;
    overflow: hidden auto;
    border-top: 1px solid var(--fdc-border);
    flex-direction: column;
    padding: 0;
}

.fdc-guest-item {
    display: flex;
    cursor: pointer;
    align-items: flex-end;
    padding: var(--px-12) var(--px-8);
    border-bottom: 1px solid var(--fdc-border);
    flex-direction: column;
}

    .fdc-guest-item:hover {
        background: var(--bs-main-50);
    }

.fdc-guest-item-active {
    background: #f9fafb;
}

.fdc-guest-item-main {
    display: flex;
    gap: var(--px-12);
    width: 100%;
}

.fdc-guest-dot {
    width: var(--px-12);
    height: var(--px-12);
    border-radius: 50%;
    background: #111827;
    margin-top: var(--px-4);
}

.fdc-guest-avatar-mini {
    width: var(--px-24);
    height: var(--px-24);
    border-radius: 999px;
    background: #f3f4f6;
    border: 1px solid var(--fdc-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font: normal normal 700 var(--s-10);
    color: #374151;
    margin-top: var(--px-4);
}

.fdc-guest-item-lines {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--px-4);
}

.fdc-guest-item-name {
    font: normal normal 700 var(--s-13);
    color: #111827;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.fdc-guest-item-sub {
    font: normal normal 400 var(--s-12);
    color: #6b7280;
}

.fdc-guest-item-amount {
    font: normal normal 700 var(--s-14);
    color: #111827;
}

.fdc-tag {
    display: inline-block;
    margin-left: var(--px-8);
    padding: var(--px-4) var(--px-8);
    border-radius: 999px;
    background: #eef2ff;
    color: #4f46e5;
    font: normal normal 400 var(--s-11);
    border: 1px solid #e0e7ff;
}

.fdc-invoices {
    display: flex;
    background: unset;
    flex-direction: column;
    height: 100%;
    padding: var(--px-16) 0;
    overflow: hidden;
}

.fdc-invoice-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--px-12) var(--px-16);
    padding-top: 0;
    flex: 1;
    max-height: var(--px-64);
}

    .fdc-invoice-head h6 {
        margin: 0;
        font: normal normal 600 var(--s-16);
        display: flex;
        align-items: center;
        gap: 8px;
    }

.fdc-bill-tabs {
    display: flex;
    gap: var(--px-8);
    align-items: center;
}

.fdc-tab {
    border: 1px solid var(--fdc-border);
    background: #fff;
    border-radius: var(--px-12);
    padding: var(--px-8) var(--px-12);
    font: normal normal 700 var(--s-12);
    color: #374151;
    cursor: pointer;
    transition: all .1s;
}

.fdc-invoices .fdc-tab[data-balance-code="ALL"],
.fdc-invoices .fdc-tab[data-balance-code="P"],
.fdc-invoices .fdc-tab[data-balance-code="V"] {
    display: none;
}

.fdc-invoices[data-show="1"] .fdc-tab {
    display: block;
}

.fdc-tab-active {
    border-color: #cbd5e1;
    border-bottom: 4px solid var(--bs-main);
}

.fdc-tab-count {
    color: #6b7280;
    font: normal normal 600 var(--s-12);
    margin-left: var(--px-8);
}

.fdc-invoice-tools {
    display: flex;
    gap: var(--px-12);
    flex: 1;
    max-height: var(--px-40);
}

.fdc-grow {
    flex: 1;
    padding: 0px var(--px-16);
}

.fdc-table-wrap {
    flex: 1;
    border: 1px solid var(--fdc-border);
    overflow: auto;
    margin: var(--px-16) 0;
}

.fdc-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: var(--px-950);
    max-width: var(--px-950);
}

    .fdc-table.no-mw {
        min-width: unset;
        max-width: unset;
    }

    .fdc-table thead {
    }

        .fdc-table thead th {
            position: sticky;
            top: -1px;
            background: var(--bg-num-availble);
            border-bottom: 1px solid var(--fdc-border);
            text-align: left;
            font: normal normal 600 var(--s-12);
            color: var(--fdc-text);
            padding: var(--px-8);
            z-index: 123;
            min-width: var(--px-92);
        }

    .fdc-table tbody td {
        padding: var(--px-8);
        border-bottom: 1px solid var(--fdc-border);
        font: normal normal 400 var(--s-14);
        color: var(--fdc-text);
    }

        .fdc-table tbody td.text-right {
            text-align: end;
            padding-right: 0;
        }

    .fdc-table tbody tr:last-of-type td {
        border-bottom: 0;
    }

    .fdc-table tbody tr:hover {
        background: var(--secondary-color);
    }

    .fdc-table .fdc-num {
        text-align: right;
    }

.form-advance-input .fdc-table.no-mw tr:hover {
    background: var(--bs-gray-100);
}

.fdc-summary {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--px-8);
    padding: 0 var(--px-16);
    flex: 1;
    max-height: min-content;
}

.fdc-summary-line {
    width: 100%;
    display: flex;
    justify-content: space-between;
    color: #374151;
    font: normal normal 400 var(--s-13);
}

.fdc-divider {
    height: var(--px-4);
    background: var(--fdc-border);
    width: 100%;
    margin: var(--px-8) 0;
}

.fdc-summary-total {
    width: 100%;
    display: flex;
    justify-content: space-between;
    font: normal normal 800 var(--s-18);
}

.fdc-footer {
    flex: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--fdc-border);
    padding: var(--px-12) var(--px-16);
    flex-wrap: wrap;
}

.fdc-footer-left,
.fdc-footer-right {
    display: flex;
    gap: var(--px-12);
}

::-webkit-inner-spin-button {
    display: none;
}

::-webkit-calendar-picker-indicator {
}

::-webkit-calendar-picker-indicator {
    background-image: url(/Images/Icon/calendar.svg);
    background-position: center;
    background-size: 20px 20px;
    background-repeat: no-repeat;
    color: rgba(204, 204, 204, 0);
}

#fdc-trans-table input[type=checkbox] {
    width: var(--px-16);
    height: var(--px-16);
    accent-color: var(--bs-main);
}

/* List wrapper */

.lst-add-room {
    gap: 12px;
    display: flex;
    flex-direction: column;
}

    /* Header row */
    .lst-add-room .item-room-add.header {
        background: var(--bg-num-availble);
        border-radius: 4px;
        padding: 8px 000000;
        font-weight: 600;
        color: var(--bs-gray-600);
        min-height: var(--px-40);
        max-height: var(--px-40);
    }

        .lst-add-room .item-room-add.header span {
            flex: 1;
        }

    /* Guests container */
    .lst-add-room .item-room-guests {
        display: flex;
        flex-direction: column;
        border-radius: var(--px-8);
        border: 1px solid var(--bs-gray-300);
        transition: all .2s;
        position: relative;
    }

        .lst-add-room .item-room-guests:not(.collapsed) .add-price-edit .fa-chevron-down {
            transform: rotate(180deg);
        }

    /* Room item */
    .lst-add-room .item-room-add {
        gap: var(--px-12);
        display: flex;
        align-items: center;
        font: normal normal 400 var(--s-13);
        background: #F9FAFB;
        padding: var(--px-12);
        border-radius: 8px 8px 0 0;
        border-bottom: 1px solid var(--bs-gray-300);
        flex-wrap: wrap;
        padding-top: var(--px-16);
    }

        .lst-add-room .item-room-add i {
            flex: 1;
            max-width: var(--px-32);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: var(--px-20);
            color: var(--bs-gray-600);
        }

        .lst-add-room .item-room-add .fa-circle-dollar {
            font-weight: 300;
            font-size: var(--px-16);
            color: var(--bs-gray-600);
        }

        .lst-add-room .item-room-add i.fa-chevron-down {
            height: var(--px-32);
            border-radius: 4px;
            cursor: pointer;
            width: var(--px-32);
        }

            .lst-add-room .item-room-add i.fa-chevron-down:hover {
                background: var(--bs-gray-300);
            }

        .lst-add-room .item-room-add .pms--add-room-type {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        /* Adjust quantity block */
        .lst-add-room .item-room-add .adjust-quantity {
            flex: 1;
            max-width: var(--px-104);
            background: white;
            min-height: var(--px-40);
        }

            .lst-add-room .item-room-add .adjust-quantity button {
                padding: 0;
            }

            .lst-add-room .item-room-add .adjust-quantity .quantity {
            }

        /* Price and edit */
        .lst-add-room .item-room-add .add-price-edit {
            /* flex: 1; */
            gap: 4px;
            display: flex;
            align-items: center;
            max-width: var(--px-168);
        }

            .lst-add-room .item-room-add .add-price-edit .room-price {
                /* all: unset; */
                border: 1px solid var(--bs-gray-300);
                background: var(--bg-inp);
                border-radius: 6px;
                height: var(--px-40);
                padding: 0 12px;
                flex: 1;
                max-width: var(--px-112);
                background: white;
            }

            .lst-add-room .item-room-add .add-price-edit .btn-add-more {
                max-width: var(--px-32);
                width: var(--px-36);
                background: 0;
                color: var(--bs-gray-dark);
                flex: 1;
                padding: 0;
            }

.item-room-guests:first-of-type .add-price-edit .btn-add-more {
    /* display: none; */
}

/* Guest row */
.lst-add-room .item-room-add.guest {
    border: 1px solid var(--bs-gray-300);
    border-radius: 8px;
}

    .lst-add-room .item-room-add.guest i {
        color: var(--bs-gray-700);
        padding-top: 4px;
        font-weight: 300;
    }

        .lst-add-room .item-room-add.guest i.fa-xmark {
            padding-bottom: 0;
            color: var(--bs-red);
            font-weight: 400;
        }

    .lst-add-room .item-room-add.guest .txt-guest {
        display: flex;
        align-items: center;
        border-radius: 4px;
        font: normal normal 500 var(--s-14);
    }

    .lst-add-room .item-room-add.guest .btn-text-edit {
        background: 0;
    }

.lst-add-room .item-room-add span.fit-c {
    flex: 1;
    max-width: var(--px-104);
}

.lst-add-room .item-room-add span.fit-p {
    flex: 1;
    min-width: var(--px-124);
    max-width: var(--px-124);
}

.pms--add-btn-add-room {
    width: 100%;
    background: white;
    color: var(--bs-main);
    font: normal normal 500 var(--s-14);
    border: 2px dashed var(--bs-gray-300);
}

.pms--add-room-type .badge-pms {
    padding: 4px var(--px-12);
    background: var(--bs-main-600);
    color: white;
    border-radius: 6px;
    /* =: =; */
    /* =: 700; */
    border: 1px solid var(--bs-gray-300);
    min-width: var(--px-100);
    text-align: center;
    font: normal normal 600 var(--s-12);
}

.pms--add-room-type .max-g {
    color: var(--bs-gray-600);
    font: normal normal 400 var(--s-12);
}

.item-room-add .form-adj-qty {
    gap: var(--px-8);
    display: flex;
    align-items: center;
    min-height: var(--px-40);
    max-height: var(--px-40);
}

.item-room-add .type-guest {
    gap: 2px;
    display: flex;
    align-items: center;
    font: normal normal 500 var(--s-12);
}

    .item-room-add .type-guest svg {
        height: var(--px-16);
        width: var(--px-16);
        stroke: var(--bs-gray-600);
    }

.g-text {
    font: normal normal 500 var(--s-14);
}

.item-room-add .ava-guest {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--px-32);
    width: var(--px-32);
    border-radius: 100%;
    background: #dbeafe;
    margin-bottom: auto;
}

    .item-room-add .ava-guest svg {
        width: var(--px-16);
        height: var(--px-16);
        color: #2563eb;
    }

    .item-room-add .ava-guest.child {
        background: #f3e8ff;
    }

        .item-room-add .ava-guest.child svg {
            color: #9333ea;
        }

.item-room-add .info-guest-add {
    flex: 1;
    gap: 2px;
    display: flex;
    flex-direction: column;
}

.item-room-add .txt-guest {
}

.item-room-add .name-guest {
}

.item-room-add .more-info-guest {
    gap: 6px;
    display: flex;
    align-items: baseline;
    color: var(--bs-gray-900);
    margin-top: 4px;
    font: normal normal 400 var(--s-12);
}

    .item-room-add .more-info-guest i {
        font-size: var(--px-12);
        display: unset;
        flex: unset;
        color: var(--bs-gray-600) !important;
    }

.item-room-add .btn-action-guest-group {
    display: flex;
}

.item-room-add .btn-text-edit {
}

    .item-room-add .btn-text-edit.danger {
    }

.group-guest-of-room {
    padding: var(--px-16);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

    .group-guest-of-room .header-gor {
        display: flex;
        align-items: center;
        -webkit-justify-content: space-between;
        justify-content: space-between;
    }

        .group-guest-of-room .header-gor .btn-see-more {
            background: 0;
            color: var(--bs-blue);
            gap: 0px;
            /* border: 1px solid var(--bs-gray-300); */
        }

            .group-guest-of-room .header-gor .btn-see-more i {
                height: var(--px-28);
                width: var(--px-28);
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 100%;
            }

            .group-guest-of-room .header-gor .btn-see-more:hover {
                background: var(--bg-num-availble);
            }

    .group-guest-of-room:not(.expanded) .more-info-guest {
        display: none;
    }

    .group-guest-of-room:not(.expanded) .btn-see-more {
        color: var(--bs-gray-900);
        border: 1px solid var(--bs-gray-200);
    }

.info-basic-room {
    display: flex;
    gap: 8px;
}

.section-room-rate {
    display: grid;
    gap: 8px;
    border-top: 1px dashed var(--bs-gray-300);
    padding-top: 12px;
    grid-template-columns: repeat(12, 1fr);
}

    .section-room-rate .rate-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

        .section-room-rate .rate-item .rate-info {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .section-room-rate .rate-item .rate-price {
            font: normal normal 600 var(--s-16);
            color: var(--bs-main);
        }

.rate-override {
    flex-direction: row;
    align-items: center;
}

.list-rate-schedule {
    /* border-top: 1px dashed var(--bs-gray-400); */
}

.item-rate-date {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    gap: 12px;
}

    .item-rate-date .rate-date {
        font: normal normal 500 var(--s-14);
    }

        .item-rate-date .rate-date .day-week {
            margin-top: 4px;
            color: var(--bs-gray-600);
            font: normal normal 400 var(--s-13);
        }

    .item-rate-date input {
        outline: none;
        border-radius: 8px;
        height: var(--px-40);
        border: var(--bdr-1);
        color: var(--bs-dark);
        padding: var(--px-12) var(--px-16);
        font: normal normal 500 var(--s-13);
        max-width: var(--px-124);
        text-align: end;
    }

    .item-rate-date .default-rate {
        color: var(--bs-gray-600);
        font: normal normal 400 var(--s-14);
    }

    .item-rate-date .default-rate {
        color: var(--bs-gray-600);
        font: normal normal 400 var(--s-14);
    }

.total-rate {
    display: none;
    align-items: center;
    justify-content: flex-end;
    padding: 12px 0;
    border-top: 1px dashed var(--bs-gray-400);
    font: normal normal 400 var(--s-14);
    padding-bottom: 0;
}

input:disabled {
    cursor: default;
    background-color: var(--bs-gray-200);
}

.group-rate-of-room {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: var(--px-16);
    border-top: 1px solid var(--bs-gray-300);
}

    .group-rate-of-room .header-gor {
        display: flex;
        align-items: center;
        -webkit-justify-content: space-between;
        justify-content: space-between;
    }

        .group-rate-of-room .header-gor .btn-see-more {
            background: 0;
            color: var(--bs-blue);
            gap: 0px;
        }

            .group-rate-of-room .header-gor .btn-see-more i {
                height: var(--px-28);
                width: var(--px-28);
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 100%;
            }

            .group-rate-of-room .header-gor .btn-see-more:hover {
                background: var(--bg-num-availble);
            }

    .group-rate-of-room .list-rate-schedule-room {
        display: flex;
        flex-direction: column;
    }

    .group-rate-of-room .item-schedule-rate {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: var(--px-32);
    }

        .group-rate-of-room .item-schedule-rate .day {
            font: normal normal 400 var(--s-14);
            color: var(--bs-gray-700);
        }

        .group-rate-of-room .item-schedule-rate .rate-override-dis {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .group-rate-of-room .item-schedule-rate .text-override {
            padding: 4px 8px;
            border-radius: var(--px-12);
            height: var(--px-20);
            font: normal normal 600 var(--s-12);
            background: var(--bs-orange-o);
            color: var(--bs-orange);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .group-rate-of-room .item-schedule-rate .rate-day {
            font: normal normal 600 var(--s-14);
        }

.lst-add-service {
    gap: 12px;
    display: flex;
    flex-direction: column;
}

    .lst-add-service .item-special-service {
        display: flex;
        align-items: flex-start;
        border: 1px solid var(--bs-gray-300);
        border-radius: 8px;
        padding: var(--px-16);
        gap: 8px;
        position: relative;
    }

    .lst-add-service .start-special-service {
        flex: 1;
        gap: 12px;
        display: flex;
        flex-direction: column;
        font: normal normal 400 var(--s-14);
    }

    .lst-add-service .row-item {
        gap: 8px;
        display: flex;
        align-items: center;
    }

        .lst-add-service .row-item .badge-pms {
            padding: 4px;
            background: var(--bs-gray-100);
            color: var(--bs-gray-700);
            border-radius: 4px;
            border: 1px solid var(--bs-gray-300);
            font: normal normal 600 var(--s-12);
        }

        .lst-add-service .row-item .special-name {
            font: normal normal 500 var(--s-14);
        }

        .lst-add-service .row-item.grid {
            color: var(--bs-gray-600);
            gap: var(--px-16);
        }

            .lst-add-service .row-item.grid b {
                color: var(--bs-gray-800);
                font-weight: 600;
            }

            .lst-add-service .row-item.grid p {
                display: flex;
                gap: 4px;
            }

    .lst-add-service .remove-special-service {
        color: #f5352e;
        background: white;
        font-size: var(--px-20);
        padding: 0;
        position: absolute;
        right: 12px;
    }

        .lst-add-service .remove-special-service:hover {
            background: #cc312b1f;
        }

        .lst-add-service .remove-special-service i {
            font-weight: 500
        }

.total-special-service {
    display: flex;
    justify-content: end;
    align-items: center;
    font: normal normal 400 var(--s-16);
    gap: 8px;
    flex-wrap: wrap;
}

    .total-special-service span {
        flex: 1;
        text-align: end;
        min-width: max-content;
    }

    .total-special-service strong {
        font: normal normal 600 var(--s-16);
    }

.pms--add-btn-add-service {
    flex: 1;
    background: white;
    color: var(--bs-main);
    font: normal normal 500 var(--s-14);
    min-width: max-content;
    border: 2px dashed var(--bs-gray-300);
}

.header-toggle {
    cursor: pointer;
}

    .header-toggle:hover .btn-collapse-form {
        background: var(--bs-gray-100);
    }

.opening-ticket-view {
    box-shadow: var(--shadow-qs-solid);
    border: 2px solid var(--bs-main-200) !important;
}

.item-special-search .options {
    width: 100%;
    gap: 8px;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
}

    .item-special-search .options .form--input.option {
        display: flex;
        flex-direction: row;
        align-items: center;
        pointer-events: none;
    }

.advance-input-filter {
    gap: 8px;
    display: grid;
    padding: var(--px-12);
    grid-template-columns: repeat(12, 1fr);
    background: #f1f1f1;
    border-radius: 8px;
    margin: 8px;
    margin-bottom: 0;
}

.search--form.extra-bed {
    border-radius: 8px;
    min-height: var(--px-40);
    max-height: var(--px-40);
    padding: 4px;
    flex: 1;
    max-width: var(--px-88);
    grid-template-columns: 1fr var(--px-28);
}

    .search--form.extra-bed input {
        width: 100%;
        padding-left: 6px;
        color: var(--bs-gray-700);
        font: normal normal 700 var(--s-14);
    }

        .search--form.extra-bed input::placeholder {
            color: var(--bs-gray-600);
            font: normal normal 500 var(--s-12);
        }

    .search--form.extra-bed button {
        background: white;
        height: max-content;
        width: var(--px-28);
        padding: 0;
    }

.extra-bed-room {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
}

    .extra-bed-room i {
        font-size: var(--px-16) !important;
        font-weight: 500;
        color: var(--bs-gray-600);
    }

.form-extrabed-section {
    width: -webkit-fill-available;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: var(--px-16);
    overflow: hidden;
}

#report_filter_div {
    /*height: 100%;*/
}

    #report_filter_div button {
        height: var(--px-40)
    }


.form-extrabed-section .advance-input-filter {
    margin: 0;
}

.form-extrabed-section table {
}

    .form-extrabed-section table th {
    }

.summary-box {
    display: flex;
    padding: var(--px-12);
    border: 1px solid var(--bs-main-200);
    border-radius: 8px;
    background: var(--bs-main-50);
    font: normal normal 400 var(--s-14);
    gap: 4px;
    justify-content: space-between;
}

    .summary-box strong {
    }


/* signture walkin report */
.signature_walkin {
    margin-top: var(--px-20);
    padding: 0 90px;
}

.signature-section {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--px-24);
}

.signature-left,
.signature-right {
    width: 45%;
}

.signature-center {
    font: normal normal 600 var(--s-16);
}

.box-highlight {
    background: white;
    padding: var(--px-12);
    border-radius: 8px;
    display: flex;
    gap: 12px;
    border: 1px solid #fd7e147a;
    box-shadow: 0 0 6px var(--active);
}

    .box-highlight .box-text {
        display: flex;
        flex-direction: column;
        gap: 4px;
        color: var(--bs-gray-900);
        font: normal normal 600 var(--s-14);
    }

    .box-highlight .box-desc {
        color: var(--bs-gray-600);
        font: normal normal 400 var(--s-14);
    }

    .box-highlight .fa-duotone {
        font-size: var(--px-24);
        animation-duration: var(--fa-animation-duration, 6s);
    }

.grid--form {
    display: grid;
    gap: var(--px-12);
    grid-template-columns: repeat(12, 1fr);
}

#report-content {
    position: relative;
}

#loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* vừa khít report-content */
    background: rgba(255, 255, 255, 0.6);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    display: flex;
}

    /* spinner đơn giản */
    #loading-overlay .spinner {
        width: 40px;
        height: 40px;
        border: 4px solid #ccc;
        border-top-color: #3498db;
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
    }

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

#search-form-advance-id {
    background: transparent;
    border: 0;
    min-height: var(--px-36);
    grid-template-columns: var(--px-28) 1fr;
}

    #search-form-advance-id i {
        color: var(--bs-gray-600);
        font-size: var(--px-16);
    }


    #search-form-advance-id:focus-within {
        box-shadow: unset;
        outline: 2px solid var(--bs-main-300);
    }

/* Calendar icon for date inputs */
input[calendar="select-date"] {
    background-image: url(/Images/Icon/calendar.svg);
    background-position: right 8px center;
    background-size: 20px 20px;
    background-repeat: no-repeat;
    padding-right: 0px;
}

    /* Hide default calendar icon on webkit browsers */
    input[calendar="select-date"]::-webkit-calendar-picker-indicator {
        opacity: 0;
        position: absolute;
        right: 12px;
        width: 20px;
        height: 20px;
        cursor: pointer;
    }

.night-count-balance {
    display: flex;
    flex-direction: column;
}

    .night-count-balance .balance {
        color: var(--bs-main);
    }

.fdc-guest-item button.fdc-btn-dark {
    background: #fbe6e6;
}

    .fdc-guest-item button.fdc-btn-dark i {
        font-weight: 300;
        color: #c62828 !important;
        font-size: var(--px-16);
    }

.fdc-guest-item.checked-out {
    opacity: .6;
    text-decoration: line-through;
}

.frame-languages {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin: auto;
    flex: 1;
    max-height: var(--px-80);
    justify-content: center;
    margin-top: var(--px-12)
}


    .frame-languages .form-select-language {
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        flex: 1;
        padding: 8px;
        gap: var(--px-24);
    }

    .frame-languages .fa-language {
        color: var(--bs-main-800);
        font-size: var(--px-36);
    }

    .frame-languages .title-languages {
        text-align: center;
        font: normal normal 500 var(--s-24);
    }

.form-select-language {
    width: 100%;
    display: grid;
    gap: var(--px-12);
    align-items: center;
    justify-content: center;
}

.frame-languages .btn-language {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--px-44);
    background: #FFFFFF20;
    border: 1px solid var(--bs-gray-300);
    color: var(--bs-dark);
    border-radius: var(--px-44);
    backdrop-filter: blur(2px);
}

    .frame-languages .btn-language.selected {
        outline: 2px solid var(--bs-main-400);
        border: 0;
    }

    .frame-languages .btn-language span {
        font: normal normal 500 var(--s-16);
    }

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

.language-body {
    display: flex;
    margin-top: var(--px-12);
}