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

:root {
    --vh: 1;
    --scale: 100;
    --px-2: calc(2px * var(--scale) / 100);
    --px-4: calc(4px * var(--scale) / 100);
    --px-5: calc(5px * var(--scale) / 100);
    --px-6: calc(6px * var(--scale) / 100);
    --px-8: calc(8px * var(--scale) / 100);
    --px-10: calc(10px * var(--scale) / 100);
    --px-12: calc(12px * var(--scale) / 100);
    --px-13: calc(13px * var(--scale) / 100);
    --px-14: calc(14px * var(--scale) / 100);
    --px-15: calc(15px * var(--scale) / 100);
    --px-16: calc(16px * var(--scale) / 100);
    --px-17: calc(17px * var(--scale) / 100);
    --px-18: calc(18px * var(--scale) / 100);
    --px-20: calc(20px * var(--scale) / 100);
    --px-22: calc(22px * var(--scale) / 100);
    --px-23: calc(23px * var(--scale) / 100);
    --px-24: calc(24px * var(--scale) / 100);
    --px-25: calc(25px * var(--scale) / 100);
    --px-26: calc(26px * var(--scale) / 100);
    --px-28: calc(28px * var(--scale) / 100);
    --px-30: calc(30px * var(--scale) / 100);
    --px-32: calc(32px * var(--scale) / 100);
    --px-33: calc(33px * var(--scale) / 100);
    --px-35: calc(35px * var(--scale) / 100);
    --px-36: calc(36px * var(--scale) / 100);
    --px-40: calc(40px * var(--scale) / 100);
    --px-42: calc(42px * var(--scale) / 100);
    --px-44: calc(44px * var(--scale) / 100);
    --px-45: calc(45px * var(--scale) / 100);
    --px-48: calc(48px * var(--scale) / 100);
    --px-50: calc(50px * var(--scale) / 100);
    --px-52: calc(52px * var(--scale) / 100);
    --px-55: calc(55px * var(--scale) / 100);
    --px-60: calc(60px * var(--scale) / 100);
    --px-68: calc(68px * var(--scale) / 100);
    --px-64: calc(64px * var(--scale) / 100);
    --px-65: calc(65px * var(--scale) / 100);
    --px-70: calc(70px * var(--scale) / 100);
    --px-72: calc(72px * var(--scale) / 100);
    --px-73: calc(73px * var(--scale) / 100);
    --px-75: calc(75px * var(--scale) / 100);
    --px-76: calc(76px * var(--scale) / 100);
    --px-80: calc(80px * var(--scale) / 100);
    --px-85: calc(85px * var(--scale) / 100);
    --px-88: calc(88px * var(--scale) / 100);
    --px-89: calc(89px * var(--scale) / 100);
    --px-90: calc(90px * var(--scale) / 100);
    --px-95: calc(95px * var(--scale) / 100);
    --px-100: calc(100px * var(--scale) / 100);
    --px-105: calc(105px * var(--scale) / 100);
    --px-108: calc(108px * var(--scale) / 100);
    --px-110: calc(110px * var(--scale) / 100);
    --px-112: calc(112px * var(--scale) / 100);
    --px-120: calc(120px * var(--scale) / 100);
    --px-122: calc(122px * var(--scale) / 100);
    --px-125: calc(125px * var(--scale) / 100);
    --px-130: calc(130px * var(--scale) / 100);
    --px-135: calc(130px * var(--scale) / 100);
    --px-136: calc(136px * var(--scale) / 100);
    --px-140: calc(140px * var(--scale) / 100);
    --px-145: calc(145px * var(--scale) / 100);
    --px-150: calc(150px * var(--scale) / 100);
    --px-155: calc(155px * var(--scale) / 100);
    --px-157: calc(157px * var(--scale) / 100);
    --px-160: calc(160px * var(--scale) / 100);
    --px-165: calc(165px * var(--scale) / 100);
    --px-168: calc(168px * var(--scale) / 100);
    --px-175: calc(175px * var(--scale) / 100);
    --px-180: calc(180px * var(--scale) / 100);
    --px-185: calc(185px * var(--scale) / 100);
    --px-190: calc(190px * var(--scale) / 100);
    --px-200: calc(200px * var(--scale) / 100);
    --px-210: calc(210px * var(--scale) / 100);
    --px-220: calc(220px * var(--scale) / 100);
    --px-228: calc(228px * var(--scale) / 100);
    --px-240: calc(240px * var(--scale) / 100);
    --px-250: calc(250px * var(--scale) / 100);
    --px-255: calc(255px * var(--scale) / 100);
    --px-260: calc(260px * var(--scale) / 100);
    --px-266: calc(266px * var(--scale) / 100);
    --px-270: calc(270px * var(--scale) / 100);
    --px-280: calc(280px * var(--scale) / 100);
    --px-290: calc(290px * var(--scale) / 100);
    --px-300: calc(300px * var(--scale) / 100);
    --px-320: calc(320px * var(--scale) / 100);
    --px-340: calc(340px * var(--scale) / 100);
    --px-350: calc(350px * var(--scale) / 100);
    --px-360: calc(360px * var(--scale) / 100);
    --px-380: calc(380px * var(--scale) / 100);
    --px-400: calc(400px * var(--scale) / 100);
    --px-420: calc(420px * var(--scale) / 100);
    --px-430: calc(430px * var(--scale) / 100);
    --px-440: calc(440px * var(--scale) / 100);
    --px-450: calc(450px * var(--scale) / 100);
    --px-460: calc(460px * var(--scale) / 100);
    --px-480: calc(480px * var(--scale) / 100);
    --px-500: calc(500px * var(--scale) / 100);
    --px-550: calc(550px * var(--scale) / 100);
    --px-570: calc(570px * var(--scale) / 100);
    --px-600: calc(600px * var(--scale) / 100);
    --px-620: calc(620px * var(--scale) / 100);
    --px-640: calc(640px * var(--scale) / 100);
    --px-650: calc(650px * var(--scale) / 100);
    --px-690: calc(690px * var(--scale) / 100);
    --px-700: calc(700px * var(--scale) / 100);
    --px-710: calc(710px * var(--scale) / 100);
    --px-800: calc(800px * var(--scale) / 100);
    --px-820: calc(820px * var(--scale) / 100);
    --px-900: calc(900px * var(--scale) / 100);
    --px-950: calc(950px * var(--scale) / 100);
    --px-970: calc(970px * var(--scale) / 100);
    --px-988: calc(988px * var(--scale) / 100);
    --px-998: calc(998px * var(--scale) / 100);
    --px-1100: calc(1100px * var(--scale) / 100);
    --px-1200: calc(1200px * var(--scale) / 100);
    /**/
    --s-8: calc(8px * var(--scale) / 100) / calc(11px * var(--scale) / 100) "Montserrat", sans-serif;
    --s-10: calc(10px * var(--scale) / 100) / calc(13px * var(--scale) / 100) "Montserrat", sans-serif;
    --s-11: calc(11px * var(--scale) / 100) / calc(14px * var(--scale) / 100) "Montserrat", sans-serif;
    --s-12: calc(12px * var(--scale) / 100) / calc(15px * var(--scale) / 100) "Montserrat", sans-serif;
    --s-13: calc(13px * var(--scale) / 100) / calc(16px * var(--scale) / 100) "Montserrat", sans-serif;
    --s-14: calc(14px * var(--scale) / 100) / calc(15px * var(--scale) / 100) "Montserrat", sans-serif;
    --s-15: calc(15px * var(--scale) / 100) / calc(19px * var(--scale) / 100) "Montserrat", sans-serif;
    --s-16: calc(16px * var(--scale) / 100) / calc(19px * var(--scale) / 100) "Montserrat", sans-serif;
    --s-17: calc(17px * var(--scale) / 100) / calc(20px * var(--scale) / 100) "Montserrat", sans-serif;
    --s-18: calc(18px * var(--scale) / 100) / calc(22px * var(--scale) / 100) "Montserrat", sans-serif;
    --s-19: calc(19px * var(--scale) / 100) / calc(23px * var(--scale) / 100) "Montserrat", sans-serif;
    --s-20: calc(20px * var(--scale) / 100) / calc(24px * var(--scale) / 100) "Montserrat", sans-serif;
    --s-22: calc(22px * var(--scale) / 100) / calc(27px * var(--scale) / 100) "Montserrat", sans-serif;
    --s-24: calc(24px * var(--scale) / 100) / calc(37px * var(--scale) / 100) "Montserrat", sans-serif;
    --s-25: calc(25px * var(--scale) / 100) / calc(30px * var(--scale) / 100) "Montserrat", sans-serif;
    --s-26: calc(26px * var(--scale) / 100) / calc(32px * var(--scale) / 100) "Montserrat", sans-serif;
    --s-28: calc(28px * var(--scale) / 100) / calc(34px * var(--scale) / 100) "Montserrat", sans-serif;
    --s-30: calc(30px * var(--scale) / 100) / calc(37px * var(--scale) / 100) "Montserrat", sans-serif;
    --s-32: calc(32px * var(--scale) / 100) / calc(39px * var(--scale) / 100) "Montserrat", sans-serif;
    --s-38: calc(38px * var(--scale) / 100) / calc(42px * var(--scale) / 100) "Montserrat", sans-serif;
    --s-45: calc(45px * var(--scale) / 100) / calc(55px * var(--scale) / 100) "Montserrat", sans-serif;
    --s-50: calc(50px * var(--scale) / 100) / calc(61px * var(--scale) / 100) "Montserrat", sans-serif;
    --s-54: calc(54px * var(--scale) / 100) / calc(66px * var(--scale) / 100) "Montserrat", sans-serif;
    --s-80: calc(80px * var(--scale) / 100) / calc(98px * var(--scale) / 100) "Montserrat", sans-serif;
    --shadow: 5px 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: #3e9936;
    --bs-main-50: #edf2f3;
    --bs-main-100: #e7feeb;
    --bs-main-200: #caecc6;
    --bs-main-300: #a0db9a;
    --bs-main-400: #6ec266;
    --bs-main-500: #48a740;
    --bs-main-600: #3e9936;
    --bs-main-700: #2e6c29;
    --bs-main-800: #285625;
    --bs-main-900: #234720;
    --bs-main-950: #0e260d;
    --bs-main-o: var(--bs-main-100);
    --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: #6ec266;
    --bard-color-brand-text-gradient-stop-1-rgb: 66, 133, 244;
    --bard-color-brand-text-gradient-stop-2: #6ec266;
    --bard-color-brand-text-gradient-stop-2-rgb: 155, 114, 203;
    --bard-color-brand-text-gradient-stop-3: #FD9B63;
    --bard-color-brand-text-gradient-stop-3-rgb: 217, 101, 112;
    --gem-sys-color--surface: #fff;
    --transform-page: 0%;
    --w-keyboard: calc(var(--px-80) * 5);
    --bs-gray-100: var(--bs-main-50);
}


/* Common CSS properties  */
.dis-none {
    display: none !important;
}

.cur-pointer {
    cursor: pointer;
}

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

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

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

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

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

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

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

.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 {
    z-index: 0;
    outline: unset;
    position: relative;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}

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

    button:active::before {
        opacity: .4;
        transform: scale(1.4);
        border-radius: 100%;
    }

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

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

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

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

.underline {
    text-decoration: underline;
}

div, p, span, a, b, button, input, h1, h2, h3, h4, h5, h6 {
    font-family: "Montserrat", 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;
}

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

p {
    margin: 0;
}

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

header.container-header-layout {
    flex: 1;
    display: flex;
    align-items: center;
    max-height: var(--px-100);
    justify-content: flex-start;
    padding: var(--px-16) var(--px-20);
    background: var(--bs-gray-100);
}

    header.container-header-layout.bg-main {
        padding: 0 var(--px-24);
        max-height: var(--px-50);
    }

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

        header.container-header-layout .nav-start img {
            width: var(--px-40);
            height: var(--px-40);
        }

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

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

        header.container-header-layout .nav-end button.setting {
            width: 88%;
            border: none;
            display: flex;
            align-items: center;
            height: var(--px-44);
            background: var(--bs-white);
            justify-content: flex-start;
            border-left: 3px solid transparent;
            font: normal normal 400 var(--s-16);
            border-radius: 0 var(--px-20) var(--px-20) 0;
        }

            header.container-header-layout .nav-end button.setting:hover {
                background: var(--bs-main-100);
                border-left: 3px solid var(--bs-main)
            }

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

/* filter */
.dropdown-list-box {
    display: none;
}

    .dropdown-list-box.active {
        display: block;
        border: 1px solid var(--bs-gray-300);
        border-radius: var(--px-8);
        background-color: #fff;
        position: absolute;
        z-index: 20;
        overflow: hidden;
        padding: var(--px-12);
    }

.dropdown-box {
    font-size: var(--px-14);
    color: var(--black-64);
    padding: var(--px-12);
}

    .dropdown-box:hover {
        background-color: #d1d1d1;
    }

#search_icon {
    font-size: var(--px-16);
    color: var(--bs-main);
}

#filter-icon {
    font-size: var(--px-16);
    font-weight: 300;
}

.filter-dropdown {
    position: relative;
}

#custom-filter-search {
    border-radius: var(--px-8);
    border: 0;
    outline: none;
    min-width: unset;
    box-shadow: none;
    color: var(--bs-gray-900);
    font: normal normal 500 var(--s-14);
    height: 100%;
}

#filter-list {
    display: none;
}

    #filter-list.active {
        height: var(--px-40);
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: var(--px-12);
    }

.filter_title {
    color: black;
    pointer-events: none;
    text-transform: capitalize;
    font: normal normal 600 var(--s-14);
}

.filter_input {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-radius: var(--px-8);
    border: 1px solid var(--bs-gray-300);
    padding: var(--px-8) var(--px-16);
    height: var( --px-40);
    background: white;
}

.search-form {
    display: grid;
    align-items: center;
    width: var(--px-80);
    height: var(--px-40);
    padding: 0 var(--px-10);
    border-radius: var(--px-12);
    grid-template-columns: var(--px-36) 1fr var(--px-60);
    font-size: var(--px-28);
    color: var(--black-64);
    cursor: pointer;
    gap: var(--px-12);
}

    .search-form:not(.active) input,
    .search-form:not(.active) button,
    .search-form:not(.active) .filter-form {
        display: none
    }

    .search-form.active {
        width: var(--px-500);
        background: white;
        height: var(--px-140);
        position: absolute;
        top: var(--px-80);
        left: 50%;
        z-index: 20;
        transform: translateX(-50%);
        padding: var(--px-12) var(--px-24);
        grid-template-rows: 1fr 1fr;
        box-shadow: var(--shadow);
        border-radius: var(--px-8);
        max-width: 90%;
    }

        .search-form.active i {
            color: var(--bs-main)
        }


/* KEYBOARD*/
.keyboard-pin:not(.permission) {
    width: 100vw;
    min-width: 100vw;
    margin: auto;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--px-16);
}

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

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

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

.keyboard-pin .pin-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: var(--px-12);
    flex: 1;
    max-height: var(--px-80);
}

    .keyboard-pin .pin-header p {
        font: normal normal 600 var(--s-28);
        color: var(--note);
    }

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

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

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

.keyboard-pin .pin-form-keypad {
    display: grid;
    border-radius: 4px;
    grid-gap: var(--px-18);
    grid-template-rows: repeat(4, var(--px-80));
    grid-template-columns: repeat(3, var(--px-110));
    );
}

    .keyboard-pin .pin-form-keypad button {
        border: 0px;
        padding: 0px;
        width: 100%;
        height: 100%;
        min-width: unset;
        color: var(--bs-gray-300);
        font: normal normal 600 var(--s-38);
        backdrop-filter: blur(2px);
        border-radius: var(--px-12);
        border: var(--bdr-1);
        border-color: var(--bs-gray-600);
        background: #2125299c;
    }

        .keyboard-pin .pin-form-keypad button.clear, .keyboard-pin .pin-form-keypad button.cancel {
            /* border: 0px; */
            /* background: 0px center; */
            font-size: var(--px-16);
        }

        .keyboard-pin .pin-form-keypad button.cancel {
            /* background: unset; */
            font: normal normal 500 var(--s-18);
        }

        .keyboard-pin .pin-form-keypad button.clear i {
            --fa-primary-color: var;
            font-size: var(--px-44);
            --fa-secondary-color: var(--bs-gray-800);
            --fa-secondary-opacity: 1;
            --fa-primary-color: var(--bs-gray-300);
            --fa-primary-opacity: 1;
        }

.keyboard-pin .pin-header .form-search-confirm {
    display: flex;
    gap: var(--px-12);
    align-items: center;
    position: relative;
    height: var(--px-68);
    padding: var(--px-16);
    border-radius: var(--px-48);
    width: var(--w-keyboard);
    background: var(--bs-white);
    box-shadow: var(--shadow-qs-light);
}

    .keyboard-pin .pin-header .form-search-confirm .fa-hashtag {
    }

    .keyboard-pin .pin-header .form-search-confirm input[type="number"] {
        all: unset;
        border: 0;
        width: 100%;
        height: 100%;
        color: var(--bs-main);
        font: normal normal 600 var(--s-32);
        text-align: center;
        padding-right: 12px;
    }

.keyboard-pin.form-checkin {
    width: 100%;
    min-width: unset;
    flex: 1;
    height: unset;
    justify-content: center;
}

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

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

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

    .modal-right-side .modal-content {
        background: var(--white);
        height: calc(100% - var(--px-20));
    }

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

.modal-portal {
    top: unset;
    right: 50%;
    bottom: 0;
    width: 100dvw;
    margin-top: auto;
    transform: translateX(50%);
    height: calc(100dvh - var(--px-76));
}

.container-body-layout {
    flex: 1;
    width: 100%;
    overflow: hidden;
    max-width: unset;
    background: var(--bs-gray-100);
}

input.no-style {
    width: 100%;
    border: none;
    outline: none;
    min-width: unset;
    box-shadow: none;
    height: var(--px-40);
    padding: 0 var(--px-10);
    color: var(--bs-gray-900);
    background: TRANSPARENT;
    font: normal normal 500 var(--s-14);
}

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

.hover {
    cursor: pointer;
}

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

box.status,
.small.status {
    padding: 2px var(--px-8);
    border-radius: var(--px-8);
    background: var(--green-o);
}

.small.status {
    border-radius: var(--px-8);
    background: var(--bs-main-200);
}

/* Registration */
.body-registration {
    width: 100%;
    height: 100%;
    margin: auto;
    display: flex;
    overflow: hidden;
    position: relative;
    flex-direction: column;
    /* background: var(--bs-gray-100); */
}

    .body-registration .illuatration {
        flex: 1;
        left: 50%;
        width: 80%;
        margin: 0 auto;
        position: absolute;
        transform: translateX(-50%);
        max-height: var(--px-180);
    }

        .body-registration .illuatration svg {
            width: 100%;
            height: 100%;
        }

    .body-registration .regis-page {
        flex: 1;
        z-index: 1;
        display: flex;
        overflow: hidden;
        text-align: center;
        align-items: center;
        flex-direction: column;
        margin: 0 var(--px-24);
    }

        .body-registration .regis-page .title {
            flex: 1;
            max-height: var(--px-42);
            font: normal normal 600 var(--s-32);
        }

    .body-registration .registration-append {
        flex: 1;
        width: 100vw;
        display: flex;
        overflow: auto;
        max-width: 100%;
        flex-direction: column;
        margin-top: var(--px-12);
        background: white;
        box-shadow: var(--shadow-qs-light);
        border-radius: var(--px-12);
    }

        .body-registration .registration-append::-webkit-scrollbar-track {
            border-radius: var(--px-8);
            background-color: #FFFFFF;
        }

        .body-registration .registration-append::-webkit-scrollbar {
            width: 12px;
            height: 8px;
            background-color: #F5F5F5;
        }

        .body-registration .registration-append::-webkit-scrollbar-thumb {
            border-radius: var(--px-8);
            background-color: var(--bs-gray-300);
        }

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

        .body-registration .group-ticket-view:first-of-type {
            position: sticky;
            top: 0;
            z-index: 1;
            background: var(--white)
        }

        .body-registration .group-ticket-view:hover {
            cursor: pointer;
            background: var(--bs-gray-100);
        }

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

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

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

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

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

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

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

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

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

        .body-registration .group-ticket-view .list-group-booked {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        .body-registration .group-ticket-view .box-regis {
            width: 100%;
            display: grid;
            height: var(--px-40);
            grid-gap: var(--px-16);
            border-radius: var(--px-20);
            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;
        }

            .body-registration .group-ticket-view .box-regis .small {
                text-align: center;
                width: 100%;
            }

/* css pagination list */
.page_list {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: var(--px-16);
    position: sticky;
    bottom: 0;
    left: 0;
    width: 101%;
    border: 1px solid #ccc;
    background: #fff;
}

.show_number {
    color: #212529;
    font-weight: 400;
}

.show_list_page {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: var(--px-8);
}

.page_box {
    width: var(--px-30);
    height: var(--px-30);
    border-radius: 50%;
    /* border: 1px solid var(--bs-gray-300); */
    background-color: white;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-weight: 400;
}

    .page_box.active {
        /* border: 1px solid var(--bs-main); */
        background-color: var(--bs-main-100);
        color: var(--bs-main);
    }

.btn_next_page, .btn_prev_page {
    width: var(--px-30);
    height: var(--px-30);
    border-radius: 50%;
    background-color: white;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-weight: 300;
    color: var(--bs-gray-500);
}

.body-registration .preview-registration {
    flex: 1;
    width: 100%;
    display: grid;
    overflow: hidden;
    gap: var(--px-20);
    padding: var(--px-10);
    grid-template-columns: 1fr min-content;
}

    .body-registration .preview-registration .preview-per {
        display: flex;
        width: var(--px-400);
        flex-direction: column;
        align-items: flex-start;
        padding: var(--px-20);
        border: var(--bdr-2);
        border-radius: var(--px-12);
        transition: width .4s ease-in-out;
    }

        .body-registration .preview-registration .preview-per.collapse {
            width: 0;
            padding: 0;
            border: 0;
        }

.body-registration .preview-per .title {
    color: var(--bs-main-700);
    font: normal normal 500 var(--s-20);
}

.modal-fullscreen .modal-body {
    padding: 0 var(--px-16);
}

#preview-per-append-id, #upload-image-or-sign {
    flex: 1;
    display: flex;
    gap: var(--px-16);
    overflow: hidden;
    flex-direction: column;
    padding: 0 var(--px-16);
}

    #upload-image-or-sign .staff.signature {
        min-height: var(--px-500);
    }

.info-details {
    flex: 1;
    width: 100%;
    display: grid;
    overflow: hidden auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: min-content;
    grid-gap: var(--px-24) var(--px-6);
}

    .info-details .box-info {
        display: flex;
        gap: var(--px-10);
        align-items: start;
        flex-direction: column;
        font: normal normal 400 var(--s-14);
    }

        .info-details .box-info strong {
            font: normal normal 600 var(--s-14);
        }

        .info-details .box-info span {
            color: var(--bs-gray-600);
            font: normal normal 400 var(--s-14);
        }

        .info-details .box-info .photo-and-upload-form {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between
        }

        .info-details .box-info img.avt-client {
            height: var(--px-100);
            width: var(--px-100);
            border-radius: var(--px-100);
            border: 1px solid var(--bs-gray-400);
        }

.btn_signature, .btn_bill {
    background: var(--bs-white);
    color: var(--bs-dark);
    white-space: nowrap;
    border-radius: var(--px-16);
}

.img_signature {
    border-radius: 0 0 var(--px-18) var(--px-18) !important;
}

.list_form .image-signature {
    width: 100%;
    height: var(--px-100);
    border-radius: var(--px-12);
    /* background-color: #fff; */
}

button.upload.no-backgr {
    width: var(--px-48);
    height: var(--px-48);
    border-radius: var(--px-48);
    border: 1px dashed var(--bs-gray-500);
}

.add-avt-client {
    display: flex;
    width: var(--px-100);
    align-items: center;
    height: var(--px-100);
    color: var(--bs-main);
    font-size: var(--px-24);
    justify-content: center;
    border-radius: var(--px-100);
    background: var(--bs-main-50);
    border: 1px dashed var(--bs-main);
}

    .add-avt-client:hover {
        cursor: pointer;
        background: var(--bs-main-100);
    }

.logo-default-loaded {
    display: flex;
    width: var(--px-100);
    align-items: center;
    height: var(--px-100);
    color: var(--bs-body-color);
    font-size: var(--px-28);
    justify-content: center;
    border-radius: var(--px-100);
    background: var(--bs-main-50);
}

.lst-photo {
    width: 100%;
    display: flex;
    gap: var(--px-12);
    align-items: center;
    position: relative;
    justify-content: flex-start;
}

    .lst-photo img {
        width: var(--px-48);
        height: var(--px-48);
        border-radius: var(--px-48);
        border: 1px solid var(--bs-gray-400);
    }

        .lst-photo img:hover {
            cursor: pointer;
            border: 2px solid var(--bs-main)
        }

.input-note {
    max-width: 100%;
    width: 100%;
    height: 100px;
    padding: 10px;
    line-height: 1.5;
    border-radius: 5px;
    border: 1px solid #ccc;
    outline: none;
}

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

button {
    border: 0;
    display: flex;
    gap: var(--px-12);
    align-items: center;
    height: var(--px-36);
    color: var(--bs-white);
    justify-content: center;
    padding: 0 var(--px-16);
    background: var(--bs-main);
    border-radius: var(--px-18);
    font: normal normal 600 var(--s-14);
    text-transform: capitalize;
}

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

.filter-form {
    display: flex;
    gap: var(--px-10);
    align-items: flex-start;
    grid-column: span 3;
    justify-content: center;
    border-top: 1px solid var(--bs-gray-300);
    padding-top: var(--px-16);
    /* margin: var(--px-24) 0; */
    flex-direction: column;
}

.filter-form-id-layout {
    flex-wrap: wrap;
    margin-bottom: var(--px-8);
    background: var(--bs-white);
    width: 100%;
    border-radius: 0 0 var(--px-12) var(--px-12);
    margin-top: var(--px-12);
    );
}

button.bg-opacity {
    border: 0;
    color: var(--bs-main);
    background: var(--bs-main-100);
}

button.no-backgr {
    background: var(--bs-gray-100);
    color: var(--bs-dark);
    white-space: nowrap;
}

    button.no-backgr.active {
        background: var(--bs-main);
        color: white;
        border-color: var(--bs-main);
    }

    button.no-backgr i {
    }

button.h-40 {
    height: var(--px-40);
}

button.h-44 {
    height: var(--px-44);
    border: 0;
}

button.h-48 {
    height: var(--px-48);
}

.form-group {
    width: calc(100% - var(--px-40));
    display: grid;
    border: var( --bdr-1);
    max-width: var( --px-700);
    margin: auto;
    border-radius: var( --px-16);
    grid-gap: var(--px-16) var(--px-12);
    padding: var( --px-16) var(--px-20);
    grid-template-columns: repeat(12, 1fr);
}

    .form-group .header--detail {
        position: relative;
        grid-column: span 12;
        padding-bottom: var(--px-10);
        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 500 var(--s-14);
}

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

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

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

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

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

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

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

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

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

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

.form--input input {
    margin: 0;
    width: 100%;
    outline: none;
    border-radius: 8px;
    height: var(--px-44);
    border: var(--bdr-1);
    color: var(--bs-dark);
    padding: var(--px-12) var(--px-16);
    font: normal normal 400 var(--s-14);
}

    .form--input input[readonly] {
        background: var(--bs-gray-200);
    }

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

.form--input label {
    font: normal normal 600 var(--s-14);
}

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

.form--input textarea {
    margin: 0;
    width: 100%;
    outline: none;
    border-radius: 8px;
    height: var(--px-200);
    border: var(--bdr-1);
    color: var(--bs-dark);
    padding: var(--px-12) var(--px-16);
    font: normal normal 400 var(--s-14);
}


/* Create a custom checkbox */

div.option.select-radio {
    width: 100%;
    display: flex;
    min-width: 30%;
    cursor: pointer;
    gap: var(--px-12);
    align-items: center;
    min-height: var(--px-40);
    color: var(--bs-gray-600);
    border-radius: var(--px-8);
    justify-content: flex-start;
    font: normal normal 500 var(--s-14);
}

    div.option.select-radio.active {
        color: var(--bs-dark);
    }

    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: #FFF;
    box-shadow: 0px 0px 6px #00000029;
    border: 1px solid #A7A7A7;
    border-radius: 4px;
}

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

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

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

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

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

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


    /* Show the checkmark when checked */

    .container--checkbox input:checked ~ .checkmark:after,
    .option.select-radio.active .checkmark:after {
        display: block;
    }

    /* Style the checkmark/indicator */

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

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

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

.edit-regis-page {
    z-index: 11;
    gap: var(--px-12);
    position: relative;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    background: var(--bs-white);
    border-radius: var(--px-12);
    margin: 0 var(--px-24);
    height: 100%;
    width: 100%;
    max-width: var(--px-800);
    margin: 0 auto;
}

    .edit-regis-page::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        border-radius: 8px;
        background-color: #F5F5F5;
    }

    .edit-regis-page::-webkit-scrollbar {
        width: 12px;
        height: 9px;
        background-color: #F5F5F5;
    }

    .edit-regis-page::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
        background-color: #d1d1d1;
    }

.btn-signature-side-right {
    z-index: 20;
    gap: var(--px-16);
    flex-direction: row;
    width: var(--px-180);
    height: var(--px-48);
    transition: width .4s;
    color: var(--bs-white);
    background: var(--bs-red);
    justify-content: flex-start;
}

    .btn-signature-side-right:hover {
        width: var(--px-180);
    }

    .btn-signature-side-right i {
        font-size: var(--px-20);
    }

.d-flex.policy {
    gap: var(--px-4);
    font: normal normal 300 var(--s-12);
}

.policy-text {
    margin: auto;
    display: flex;
    gap: var(--px-12);
    padding: var(--px-16);
    flex-direction: column;
    max-width: var( --px-700);
    border-radius: var(--px-16);
    background: var(--bs-main-50);
    width: calc(100% - var(--px-40));
}

.signature-form {
    width: calc(100% - var(--px-40));
    display: flex;
    gap: var( --px-20);
    border: var( --bdr-1);
    padding: var( --px-20);
    margin: var( --px-20) auto;
    max-width: var( --px-700);
    border-radius: var( --px-16);
    grid-template-columns: 50% 50%;
    font: normal normal 500 var( --s-12);
    flex-wrap: wrap;
    flex-direction: row;
}

.signature {
    flex: 1;
    display: flex;
    position: relative;
    align-items: center;
    height: var(--px-220);
    padding: var(--px-16);
    flex-direction: column;
    border-radius: var(--px-24);
    justify-content: space-between;
    /* border: 1px dashed var(--bs-gray-300);*/
}

    .signature.w-50 {
        height: var(--px-400);
    }

    .signature canvas {
        flex: 1;
        width: 100%;
        height: 100%;
    }

    .signature img {
        height: 100%;
        width: 100%;
    }

    .signature signature {
        bottom: 0;
        position: absolute;
        text-transform: capitalize;
        font: normal normal 600 var(--s-18);
    }

    .signature signature {
        z-index: 11;
        position: absolute;
        bottom: var(--px-16);
    }

.edit-regis-page .guest.signature img {
    z-index: 1;
    height: var(--px-120);
    background: var(--bs-white);
}

.form-container .cashier img {
    z-index: 1;
    height: var(--px-120);
    background: var(--bs-white);
}


.edit-regis-page .guest.signature .text-muted {
    bottom: 50%;
    font-size: var(--px-16)
    /*    position: absolute;*/
}

.back-regis-list {
    top: 0;
    z-index: 12;
    position: sticky;
    gap: var(--px-10);
    margin: 0 auto;
    min-height: var(--px-60);
    max-width: var( --px-700);
    width: 100%;
    background: var(--bs-white);
}

.logo-hotel {
    display: flex;
    gap: var(--px-12);
    align-items: center;
    border: var(--bdr-1);
    border-radius: var(--px-8);
    padding: var(--px-6);
    background: var(--bs-gray-100);
    height: var(--px-60);
    /* width: var(--px-160); */
    padding: 0 var(--px-12);
    justify-content: space-between;
    /* grid-template-columns: 1fr var(--px-40); */
}

    .logo-hotel::after {
        display: none;
    }

    .logo-hotel img,
    .logo-hotel i {
        min-height: var(--px-40);
        max-height: var(--px-40);
        border-radius: var(--px-8);
        border: 0;
        background: unset;
    }

    .logo-hotel span.name {
        /* max-width: var(--px-140);*/
        color: var(--bs-dark);
        font: normal normal 700 var(--s-17);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
        cursor: pointer;
    }

.preview-per {
    top: 50%;
    z-index: 2;
    height: 90vh;
    display: flex;
    position: absolute;
    right: var(--px-10);
    padding: var(--px-20);
    flex-direction: column;
    min-width: var(--px-400);
    box-shadow: var(--shadow);
    transform: translateY(-50%);
    background: var(--bs-white);
    border-radius: var(--px-12);
}

    .preview-per.second-popup {
        top: 10px;
        z-index: 12;
        gap: var(--px-24);
        right: 50%;
        transform: translateX(50%);
    }

.quick-search-full {
    z-index: 10;
    display: flex;
    position: fixed;
    align-items: center;
    gap: var(--px-24);
    justify-content: space-around;
    flex-direction: row;
    top: 50%;
    left: 50%;
    width: 85%;
    height: 72%;
    border-radius: var(--px-24);
    transform: translate(-50%, calc(-50% + var(--px-50)));
    background: #f0fbf2;
    overflow: hidden;
    border: 1px solid var( --bs-gray-300);
    box-shadow: var( --shadow-qs-solid);
}

    .quick-search-full .search-form.active {
        box-shadow: unset;
        position: relative;
        transform: none;
        width: 100%;
        max-width: var(--px-600);
        background: var(--bs-white);
        height: var(--px-420);
        grid-template-rows: max-content 1fr;
        left: unset;
        transition: all .3s;
        top: unset;
        min-width: var(--px-480);
        padding: var(--px-16);
        grid-gap: 0 var(--px-12);
        box-shadow: 0 -6px 10px var(--bs-gray-400);
        grid-template-columns: max-content 1fr var(--px-60);
    }

        .quick-search-full .search-form.active.collapse-filter {
            height: var(--px-72);
        }

            .quick-search-full .search-form.active.collapse-filter #filter-form-id {
                display: none;
            }

    .quick-search-full h2 {
        width: 100%;
        display: flex;
        gap: var(--px-6);
        flex-direction: column;
        color: var(--bs-gray-500);
        font-size: var(--px-24);
        max-width: var(--px-600);
    }

.title-gradient {
    position: relative;
    display: inline-block;
    color: black;
    /* background: -webkit-linear-gradient(172deg, var(--bard-color-brand-text-gradient-stop-1) 0, var(--bard-color-brand-text-gradient-stop-2) 9%, var(--bard-color-brand-text-gradient-stop-3) 20%, var(--bard-color-brand-text-gradient-stop-3) 24%, var(--bard-color-brand-text-gradient-stop-2) 35%, var(--bard-color-brand-text-gradient-stop-1) 44%, var(--bard-color-brand-text-gradient-stop-2) 50%, var(--bard-color-brand-text-gradient-stop-3) 56%, var(--gem-sys-color--surface) 75%, var(--gem-sys-color--surface) 100%); */
    /* background: linear-gradient(172deg, var(--bard-color-brand-text-gradient-stop-1) 0, var(--bard-color-brand-text-gradient-stop-2) 9%, var(--bard-color-brand-text-gradient-stop-3) 20%, var(--bard-color-brand-text-gradient-stop-3) 24%, var(--bard-color-brand-text-gradient-stop-2) 35%, var(--bard-color-brand-text-gradient-stop-1) 44%, var(--bard-color-brand-text-gradient-stop-2) 50%, var(--bard-color-brand-text-gradient-stop-3) 56%, var(--gem-sys-color--surface) 75%, var(--gem-sys-color--surface) 100%); */
    background-size: 400% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    /* -webkit-text-fill-color: transparent; */
    font-size: 3.5rem;
    line-height: 4rem;
    font-weight: 600;
    letter-spacing: -.03em;
}

    .title-gradient.portal {
        width: 100%;
        font-weight: 700;
        font-size: var(--px-36);
        text-align: center;
    }

.loading-container {
    display: flex;
    width: 100vw;
    justify-content: center;
    margin: 8px 0;
    height: 100vh;
    font-size: var(--px-60);
    align-items: center;
    color: var(--bs-gray-500);
}

.form-sign-here {
    width: 100%;
    display: flex;
    cursor: pointer;
    position: relative;
    align-items: center;
    height: var(--px-100);
    padding: var(--px-8);
    justify-content: center;
    flex-direction: column;
    border-radius: var(--px-16);
    /* background: var(--bs-main-50); */
    border: 1px dashed var(--bs-gray-500);
}

    .form-sign-here button {
        position: absolute;
        bottom: calc(-1 * var(--px-16));
        background: var(--bs-main-50);
    }

    .form-sign-here img {
        height: 100%;
        width: 100%;
    }

    .form-sign-here signature {
        position: absolute;
        color: var(--bs-gray-600);
        font: italic normal 300 var(--s-18);
    }

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

    div.form-upload-image.upload-logo-store {
        margin: auto;
        height: var(--px-280);
        border-radius: 0;
        border: 0;
        width: inherit;
    }

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

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

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

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

    div.form-upload-image .upload-label {
        width: 100%;
        height: 100%;
        display: flex;
        cursor: pointer;
        gap: var(--px-10);
        align-items: center;
        flex-direction: column;
        justify-content: center;
        color: var(--bs-gray-600);
        font: normal normal 300 var(--s-14);
    }

        div.form-upload-image .upload-label.square {
            border-radius: var(--px-12);
        }

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

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

.login-page-require {
    width: 100vw;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: initial;
    background-image: url(/Images/valeriia-bugaiova-_pPHgeHz1uk-unsplash.jpg);
}

.form-select {
    height: var(--px-44);
    padding: var(--px-12);
    border-radius: var(--px-12);
    font: normal normal 500 var(--s-14);
}

.setting-hotel-page {
    display: flex;
    overflow: hidden;
    gap: var(--px-32);
    flex-direction: column;
    padding: var(--px-20);
    height: 100%;
    width: 100%;
}

    .setting-hotel-page .title-menu {
        display: flex;
        flex-direction: column;
        gap: var(--px-20);
    }

.append-data-setting {
    display: flex;
    overflow: hidden;
}

    .append-data-setting .setting-container {
        display: flex;
        gap: var(--px-24);
        min-width: 100%;
        overflow: auto;
        flex-direction: column;
    }

    .append-data-setting[filter="profile"] div.signature-content,
    .append-data-setting[filter="profile"] div.languages-content,
    .append-data-setting[filter="profile"] div.checkin-content,
    .append-data-setting[filter="profile"] div.clerk-content,
    .append-data-setting[filter="signature"] div.profile-content,
    .append-data-setting[filter="signature"] div.languages-content,
    .append-data-setting[filter="signature"] div.checkin-content,
    .append-data-setting[filter="signature"] div.clerk-content,
    .append-data-setting[filter="languages"] div.signature-content,
    .append-data-setting[filter="languages"] div.checkin-content,
    .append-data-setting[filter="languages"] div.profile-content
    .append-data-setting[filter="languages"] div.clerk-content,
    .append-data-setting[filter="checkin"] div.signature-content,
    .append-data-setting[filter="checkin"] div.languages-content,
    .append-data-setting[filter="checkin"] div.profile-content,
    .append-data-setting[filter="checkin"] div.clerk-content,
    .append-data-setting[filter="clerk"] div.signature-content,
    .append-data-setting[filter="clerk"] div.languages-content,
    .append-data-setting[filter="clerk"] div.checkin-content,
    .append-data-setting[filter="clerk"] div.profile-content {
        display: none !important;
    }

footer.footer {
    width: 100%;
    display: flex;
    gap: var(--px-4);
    );
    );
    ) revert-layer;
    ) revert-layer;
    )-;
    );
    height: var(--px-40);
    align-items: center;
    justify-content: center;
    font: normal normal 500 var(--s-12);
}

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

footer.portal {
    color: black;
}

footer.date-time {
    z-index: 11;
    color: var(--bs-gray-600);
    justify-content: space-between;
    padding: var(--px-8) var(--px-24);
    font: normal normal 400 var(--s-14);
}

    footer.date-time strong {
        color: var(--bs-main);
        font: normal normal 500 var(--s-14);
    }

.show-date-time-css {
    color: var(--bs-gray-600);
    font: normal normal 400 var(--s-14);
}

    .show-date-time-css strong {
        color: var(--bs-main);
        font: normal normal 500 var(--s-14);
    }

.sharethis-inline-share-buttons {
    display: flex !important;
    flex-direction: column;
    gap: var(--px-12);
    align-items: center;
    justify-content: center;
}

#st-1.st-has-labels .st-btn.st-remove-label {
    justify-content: center;
    display: flex !important;
    min-width: var(--px-200) !important;
}

    #st-1.st-has-labels .st-btn.st-remove-label > span {
        display: block !important;
    }

#st-1 .st-btn:last-child {
    margin-right: var(--px-8) !important;
}

#st-1 .st-btn[data-network='copy'] {
    background-color: var(--bs-main);
}


/*****************************************************************************/
/* regis form */
.form-container {
    margin: 0 auto;
    padding: var(--px-20);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    gap: var(--px-12);
    position: relative;
    padding-top: 0;
    overflow: hidden auto;
    max-width: var(--px-800);
}

.form_header {
    width: 100%;
    height: var(--px-100);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: var(--px-12);
    box-sizing: border-box;
    /* position: sticky; */
    top: 0;
    background: white;
}

.header_title {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
}

.white_space {
    width: var(--px-100);
}

.form_title {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.form_title {
    margin: 0;
    padding: var(--px-8);
}

.form_main_title {
    font-size: var(--px-20);
    font-weight: bold;
}

.form_sub_title {
    font-size: var(--px-20);
    font-style: italic;
    font-weight: bold;
}

.logo {
    width: var(--px-100);
    height: 100%;
    object-fit: cover;
}

.form_number {
    font-size: var(--px-18);
    font-weight: bold;
    color: #e74c3c;
    padding-right: var(--px-20);
    align-self: flex-end;
    margin-bottom: 0;
}

.form_content {
    border: 1px solid #000;
    flex: 1;
    background: white;
}

.form_row {
    display: grid;
    border-bottom: 1px solid #000;
}

.two-columns {
    grid-template-columns: 3fr 1fr;
}

.three-columns {
    grid-template-columns: 3fr 3fr 2fr;
}

.item_column {
    grid-template-columns: 1.1fr 4fr;
}

.info-row {
    grid-template-columns: 3fr 2fr;
}

.info_item {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: var(--px-12);
}

    .info_item:not(:last-child) {
        border-right: 1px solid #000;
    }

.guest_info {
    display: flex;
    flex-direction: row;
    align-items: center;
    .label margin-right: var(--px-8);
    border-right: 1px solid #000;
    padding: var(--px-12);
}

.room_info {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: var(--px-12);
}

.val_item {
    width: var(--px-140);
}

.label {
    font-weight: bold;
    font-size: var(--px-16);
    margin-right: var(--px-4);
}

.value {
    font-size: var(--px-16);
    margin: 0;
}

.info_item .value {
    word-wrap: break-word;
    max-width: 100%;
    width: var(--px-112);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.guest_note {
    padding: var(--px-24) var(--px-12);
    border-right: 1px solid #000;
}

.text_note {
    overflow: hidden;
    padding: var(--px-24) var(--px-12);
}

.item_title {
    padding: var(--px-24) var(--px-12);
    border-right: 1px solid #000;
}

.item__ {
    display: flex;
    flex-direction: column;
}

.item_row {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.item1,
.item2 {
    height: 100%;
    box-sizing: border-box;
    padding: var(--px-12) var(--px-4);
}

.item_row .item1:nth-child(1) {
    border-bottom: 1px solid !important;
    border-right: 1px solid !important;
}

.item_row .item1:nth-child(2) {
    border-bottom: 1px solid !important;
    border-right: 1px solid !important;
}

.item_row .item1:nth-child(3) {
    border-bottom: 1px solid !important;
}

.item_row .item2:nth-child(1) {
    border-right: 1px solid !important;
}

.item_row .item2:nth-child(2) {
    border-right: 1px solid !important;
}

.method_payment {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: var(--px-12);
}

.item_payment {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: var(--px-12);
}

.item_method {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.custom-checkbox {
    display: block;
    position: relative;
    padding-left: var(--px-32);
    cursor: pointer;
    font-size: var(--px-16);
    user-select: none;
}

    .custom-checkbox input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: var(--px-20);
    width: var(--px-20);
    border: 2px solid #000;
}

.custom-checkbox:hover input ~ .checkmark {
    background-color: #fff;
}

.custom-checkbox input:checked ~ .checkmark {
    background-color: #fff;
}

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

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

.custom-checkbox .checkmark:after {
    left: var(--px-4);
    top: 0;
    width: var(--px-8);
    height: var(--px-16);
    border: solid #000;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

.item_txt_cusId {
    padding: var(--px-12);
    border-right: 1px solid #000;
}

.item_column_card {
    grid-template-columns: 1.1fr 4fr;
}

.item_title_card {
    padding: var(--px-8);
    border-right: 1px solid #000;
}

.item_row_card {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
}

.item_card {
    border-right: 1px solid #000;
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: 4px;
}

.label_name {
    font-size: var(--px-16);
}

.term .txt {
    font-weight: bold;
    padding-top: var(--px-8);
    padding-left: var(--px-8);
    font-size: var(--px-20);
    text-transform: capitalize;
}

.resort_rules .rule {
    padding: var(--px-2);
}

.resort_rules p {
    color: #e55039;
    padding-left: var(--px-4);
    font-size: var(--px-16);
}

.signature-register {
    margin-top: var(--px-12);
    margin-bottom: var(--px-24);
    padding-left: var(--px-2);
}

    .signature-register p {
        font-size: var(--px-16);
        padding-left: var(--px-4);
    }

    .signature-register .text-muted {
        flex: 1;
        font: normal normal 500 var(--s-16);
        height: 100%;
        display: flex;
        align-items: center;
    }

.signature-section {
    display: flex;
    justify-content: space-between;
    /*    margin-top: var(--px-48);
    padding: 0 var(--px-48);*/
    height: var(--px-200);
    display: flex;
    align-items: center;
}

.signature-box {
    text-align: center;
    width: 40%;
    height: 100% !important;
    cursor: pointer;
    padding: var(--px-16);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.signature-line {
    margin-top: var(--px-48);
    border-bottom: 1px dashed black;
    width: 100%;
}
/* Bill information */

.container_bill {
    padding: var(--px-20);
    margin: 0 auto;
}

.form-container .header {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: var(--px-12) 0;
}

.form-container .logo {
    width: var(--px-100);
    height: 100%;
    object-fit: contain;
}

.form-container .info {
    margin-top: var(--px-20);
    width: 100%;
    text-align: right;
}

.form-container .info-title {
    color: #1e3799;
    font-style: italic;
    font-size: var(--px-16);
}

.form-container .title {
    width: 100%;
    color: #e84118;
    font-size: var(--px-24);
    text-align: center;
    padding: var(--px-8);
    border-bottom: 4px solid #e84118;
    border-right: 4px solid #e84118;
    max-width: var(--px-500);
    margin: auto;
}

/*-----------------------------------*/
#list-balance {
    display: grid;
    gap: var(--px-16);
    padding: var(--px-12);
    grid-template-columns: repeat(auto-fit, var(--px-120));
    justify-content: center;
}

    #list-balance .balance {
        box-sizing: border-box;
        justify-content: space-evenly;
        display: flex;
        border: 1px solid var(--bs-gray-400);
        border-radius: var(--px-12);
        height: var(--px-120);
        cursor: pointer;
        flex-direction: column;
        padding: 0 var(--px-16);
    }

        #list-balance .balance:hover {
            border: 1px solid var(--bs-main);
            background-color: var(--bs-main-100);
            color: var(--bs-main);
        }

        #list-balance .balance p {
            font: normal normal 700 var(--s-16);
            display: flex;
            align-items: center;
            justify-content: center;
            height: var(--px-32);
            width: var(--px-32);
            border-radius: var(--px-8);
            background: var(--bs-main-200);
            color: var(--bs-main-700);
        }

        #list-balance .balance strong {
            font: normal normal 600 var(--s-14);
        }

/* information */
.form-container .info_table {
    width: 100%;
    border: 2px solid #000;
    border-collapse: collapse;
    margin-top: var(--px-20);
}

.form-container .info_col {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.form-container .info_row {
    width: 100%;
    display: flex;
    align-items: center;
    padding: var(--px-2) var(--px-12);
}

.form-container .label_bill {
    width: var(--px-140);
    font-weight: normal;
    font-size: var(--px-16);
}

.form-container .value {
    text-align: left;
    font-size: var(--px-16);
    padding-left: var(--px-12);
}

.form-container .transaction_table {
    border-collapse: collapse;
    margin-top: var(--px-20);
    width: 100%;
}

.form-container .transaction_table_header,
.form-container .transaction_table_body {
    border: 2px solid #000;
}

    .form-container .transaction_table_header tr th {
        background-color: #fff;
        font-size: var(--px-16);
    }

    .form-container .transaction_table_body tr {
        border: 0.25px dashed #000;
    }

.form-container .transaction_table th,
.form-container .transaction_table td {
    padding: var(--px-12);
    text-align: left;
    font-size: var(--px-16);
}

.form-container .transaction_table th {
    background-color: #fff;
}

.form-container .transaction_table td:nth-child(1),
.form-container .transaction_table td:nth-child(2),
.form-container .transaction_table td:nth-child(3),
.form-container .transaction_table td:nth-child(6),
.form-container .transaction_table td:nth-child(7),
.form-container .transaction_table td:nth-child(8) {
    width: 40px;
}

.form-container .transaction_table td:nth-child(4) {
    width: var(--px-180)
}

.form-container .transaction_table td:nth-child(5) {
    width: var(--px-100)
}

/* ************************** */
.form-container .total {
    width: 100%;
    height: var(--px-160);
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}

.form-container .summary {
    width: 80%;
    padding: var(--px-12);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.form-container .row {
    margin: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.form-container .flex_header {
    font-weight: bold;
    background-color: #fff;
    border-bottom: 2px solid #000;
}

.form-container .cell {
    flex: 1;
    width: var(--px-180);
    position: relative;
    text-align: right;
    font-size: var(--px-16);
}

    .form-container .cell:after {
        content: ":";
        position: absolute;
        right: calc(var(--px-24) * -1);
    }

.form-container .flex_cell {
    flex: 1;
    padding: var(--px-4) 0;
    text-align: left;
    font-size: var(--px-16);
}

    .form-container .flex_cell:nth-child(1) {
        text-align: left;
    }

    .form-container .flex_cell:nth-child(2) {
        text-align: right;
    }

.form-container .word {
    text-align: left;
    width: 100%;
    font-size: var(--px-16);
    margin-top: var(--px-20);
}

.form-container .guest {
    width: 100%;
    height: var(--px-100);
    display: flex;
    justify-content: flex-start;
}

.signature_bill {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: var(--px-12);
}

.guest_bill {
    width: 100%;
    display: flex;
    cursor: pointer;
    flex-direction: column;
    max-width: var(--px-400);
}

    .guest_bill p {
        font-size: var(--px-16);
        text-align: center;
    }

.form-container .cashier {
    width: 100%;
    display: flex;
    cursor: pointer;
    flex-direction: column;
    max-width: var(--px-400);
    padding: var(--px-16);
}

    .form-container .cashier p {
        font-size: var(--px-16);
        text-align: center;
    }

.form-container .back_space {
    width: 100%;
    margin-bottom: var(--px-140);
}

.signature-box img {
    width: var(--px-200);
    height: var(--px-120);
}

.portal-checkin {
    width: 100%;
    height: 100%;
    display: flex;
    padding-top: 2px;
    overflow: hidden;
    position: relative;
    margin: 0 auto;
}

.transform-page {
    width: calc(100% - 20px);
    height: 100%;
    display: flex;
    min-width: 100%;
    overflow: auto;
    position: relative;
    transition: all .3s;
    flex-direction: column;
    transform: translateX(var(--transform-page));
}

    .transform-page.preview-folio {
        /* background: white; */
    }

        .transform-page.preview-folio .header-folio {
            /* background: white; */
        }

.portal-checkin .header-portal {
    display: flex;
    gap: var(--px-12);
    text-align: center;
    align-items: center;
    height: var(--px-80);
    padding: 0 var(--px-24);
    color: var(--bs-gray-700);
    justify-content: flex-start;
    font: normal normal 600 var(--s-20);
}

    .portal-checkin .header-portal img {
        width: var(--px-40);
        height: var(--px-40);
    }

    .portal-checkin .header-portal h5 {
        margin: 0;
        font: normal normal 600 var(--s-20);
    }

.portal-checkin .body-portal {
    flex: 3;
    display: flex;
    position: relative;
    align-items: center;
    flex-direction: row;
    margin: 0 var(--px-32);
    background-size: cover;
    justify-content: center;
    border-radius: var(--px-32);
    background-position: center;
    background-repeat: no-repeat;
    background-color: white;
    padding: var(--px-24);
    /* background-image: url(/Images/valeriia-bugaiova-_pPHgeHz1uk-unsplash.jpg); */
}

    .portal-checkin .body-portal h5 {
        font: normal normal 600 var(--s-20);
    }

    .portal-checkin .body-portal .desc {
        text-align: center;
    }

.portal-checkin .footer-portal {
    flex: 2;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    padding: 0 var(--px-32);
}

    .portal-checkin .footer-portal.find-btn-ticket {
        max-height: var(--px-60);
    }

    .portal-checkin .footer-portal button {
        display: flex;
        height: var(--px-48);
        border-radius: var(--px-48);
        justify-content: space-between;
        font: normal normal 600 var(--s-18);
        padding: 0 var(--px-32);
        background: var(--bs-main-700);
    }

    .portal-checkin .footer-portal span.desc {
        display: flex;
        text-align: center;
        justify-content: center;
        width: 100%;
    }

.portal-checkin .keyboard-pin .pin-form-keypad {
    width: var(--w-keyboard);
    grid-gap: 0px;
    padding: var(--px-16);
    border-radius: var(--px-24);
    justify-content: center;
    background: white;
}

.portal-checkin .pin-form-keypad {
    grid-template-rows: repeat(4, var(--px-120));
    grid-template-columns: repeat(3, 1fr);
}

    .portal-checkin .pin-form-keypad button {
        border: unset;
        color: var(--bs-main-900);
        background: var(--bs-white);
        border-radius: 0;
        border-bottom: 1px solid var(--bs-gray-500);
        border-left: 1px solid var(--bs-gray-500);
    }

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

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

        .portal-checkin .pin-form-keypad button:focus {
            box-shadow: unset;
        }

        .portal-checkin .pin-form-keypad button.clear i {
            --fa-secondary-color: var(--bs-main-900);
            font-size: var(--px-26);
        }

.portal-checkin .info-general {
    display: flex;
    gap: var(--px-8);
    align-items: start;
    padding: var(--px-24);
    flex-direction: column;
    background: var(--bs-white);
    font: normal normal 400 var(--s-14);
}

.portal-checkin .guest-name-flex {
    width: 100%;
    display: flex;
    gap: var(--px-4);
    margin: 2px 0;
    align-items: center;
    justify-content: space-between;
    font: normal normal 400 var(--s-12);
}

    .portal-checkin .guest-name-flex .special {
        color: var(--bs-main-700);
        font: normal normal 600 var(--s-18);
    }

    .portal-checkin .guest-name-flex .room-code {
        padding: var(--px-4) var(--px-8);
        border-radius: var(--px-8);
        color: var(--bs-dark) !important;
        font: normal normal 500 var(--s-12) !important;
        border: 1px solid var(--bs-main-300);
    }

    .portal-checkin .guest-name-flex .time-due-date {
        text-align: center;
        font: normal normal 600 var(--s-17) !important;
    }

    .portal-checkin .guest-name-flex .icon-next {
        width: var(--px-36);
        height: var(--px-36);
        border-radius: 100%;
        color: var(--bs-dark);
        background: var(--bs-white);
        border: 1px solid var(--bs-gray-400);
    }


.custom-scanner {
    width: 100%;
    height: 2px;
    background: var(--bs-teal);
    position: absolute;
    -webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    transition: all 200ms linear;
    -webkit-animation: scanner 3s infinite linear;
    -moz-animation: scanner 3s infinite linear;
    -o-animation: scanner 3s infinite linear;
    animation: scanner 3s infinite linear;
    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.4);
    display: block;
    left: -10px;
    right: 0;
    margin: auto;
}

.position-absolute.read-scan {
    top: var(--px-50);
    height: var(--px-180);
    width: var(--px-300);
    z-index: 12;
    display: flex;
    left: 50%;
    transform: translateX(-50%);
    color: var(--bs-white);
    font-size: var(--px-44);
    border-radius: var(--px-12);
}

.transform-page.scan .scan-video {
    /* flex: 1; */
    width: 100%;
}

.transform-page.scan video {
    width: 100%;
    height: 100%;
}

.btn-action-gr {
    flex: 1;
    margin-left: auto;
    max-height: var(--px-68);
    display: flex;
    gap: var(--px-12);
    align-items: center;
    justify-content: space-between;
    padding: var(--px-12);
}

    .btn-action-gr button {
        height: var(--px-40);
    }

    .btn-action-gr .back-btn {
        margin-left: unset;
        color: var(--bs-gray-900);
        background: var(--bs-white);
        border: 1px solid var(--bs-gray-300);
    }

.area-preview-capture {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: center;
    grid-gap: var(--px-12);
    flex-direction: column;
    justify-content: center;
}

    .area-preview-capture .info-cid {
        flex: 1;
        width: 100%;
        display: flex;
        gap: var(--px-12);
        flex-direction: column;
        background: var(--bs-white);
        border-radius: var(--px-16);
    }

    .area-preview-capture .cid-title {
        font: normal normal 500 var(--s-16);
    }

    .area-preview-capture .upload-id {
        margin: auto;
        width: 100%;
        height: var(--px-200);
    }

.transform-page.scan canvas {
    margin: 0 auto;
    border-radius: 4px;
    width: var(--px-200);
    height: var(--px-140);
}

.checkin-online-now {
    max-width: 50%;
    height: var(--px-60);
    color: var(--bs-main-50);
    padding: 0 var(--px-24);
    background: var(--bs-main-500);
    box-shadow: var(--shadow-qs-solid);
    font: normal normal 600 var(--s-19);
}

    .checkin-online-now.change-lang {
        right: unset;
        left: var(--px-24);
        width: var(--px-60);
        padding: 0;
        gap: 0;
        align-items: center;
        justify-content: center;
        font-size: var(--px-28);
    }

.transform-page .header-folio {
    position: sticky;
    color: var(--bs-main-950);
    padding: var(--px-24);
    font: normal normal 600 var(--s-24);
    padding-bottom: var(--px-12);
    top: 0;
    background: var(--bs-main-50);
    z-index: 11111111;
}

    .transform-page .header-folio.find-ticket {
        flex: 1;
        max-height: var(--px-160);
    }

    .transform-page .header-folio .desc-small {
        opacity: 0.6;
        font: normal normal 400 var(--s-18);
    }

.list-folio-find {
    width: 100%;
    display: flex;
    flex-direction: column;
    background: var(--bs-white);
    box-shadow: var(--shadow-qs-solid);
    border-radius: var(--px-16);
    position: relative;
}

    .list-folio-find .box--folio {
        width: 100%;
        display: flex;
        gap: var(--px-12);
        position: relative;
        flex-direction: column;
        background: var(--bs-white);
        padding: var(--px-16);
        margin: 0;
    }

        .list-folio-find .box--folio.info-guest {
            border: 1px solid var(--bs-gray-300);
            border-radius: var(--px-12);
            margin: var(--px-16);
            width: -webkit-fill-available;
            background: white;
            margin-bottom: var(--px-8);
        }

        .list-folio-find .box--folio.active {
            border-color: var(--brand-color);
            box-shadow: 0 2px 12px var(--active);
        }

        .list-folio-find .box--folio:not(.summary,:last-of-type)::after {
            content: '';
            position: absolute;
            bottom: 0;
            width: calc(100% - var(--px-32));
            height: 1px;
            /* background-image: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.18) 8px, transparent 0px, transparent 12px); */
        }

        .list-folio-find .box--folio.summary {
            /* top: var(--px-122); */
            z-index: 12;
            position: sticky;
            padding: var(--px-24);
            background-size: 140%;
            background-position: center;
            background-repeat: no-repeat;
            background-color: #a0db9a;
            background-image: url(/Images/calendar.svg);
            border-bottom: 1px solid var(--bs-gray-300);
        }

        .list-folio-find .box--folio.guest-completed {
            /* top: var(--px-68); */
            z-index: 13;
            position: sticky;
            display: flex;
            align-items: center;
            height: var(--px-60);
            padding: var(--px-16);
            justify-content: space-between;
            background: var(--bs-white);
            border-radius: var(--px-16) var(--px-16) 0 0;
            flex-direction: row;
        }

    .list-folio-find .completed-count {
        flex: 1;
        display: flex;
        align-items: center;
        gap: var(--px-4);
        font: normal normal 500 var(--s-16);
    }

        .list-folio-find .completed-count i {
            color: var(--bs-main-600);
        }

        .list-folio-find .completed-count p {
            color: var(--bs-gray-800);
            white-space: nowrap;
        }

        .list-folio-find .completed-count .counter-chk {
            white-space: nowrap;
        }

            .list-folio-find .completed-count .counter-chk strong {
            }

    .list-folio-find .guest-count {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: end;
        gap: var(--px-12);
        font: normal normal 400 var(--s-16);
        color: var(--bs-gray-600);
    }

        .list-folio-find .guest-count .guest-chk {
        }

            .list-folio-find .guest-count .guest-chk strong {
                color: var(--bs-dark);
            }

        .list-folio-find .guest-count .fa-pipe {
            color: var(--bs-gray-500);
        }

    .list-folio-find .guest-name-info {
        display: flex;
        justify-content: space-between;
        font: normal normal 600 var(--s-18);
        flex-wrap: wrap;
        gap: var(--px-8);
    }

        .list-folio-find .guest-name-info .toggle-form-btn {
            gap: var(--px-8);
            width: max-content;
            padding: 0 var(--px-12);
            color: var(--bs-gray-800);
            background: var(--bs-white);
            border: 1px solid var(--bs-gray-500);
        }

            .list-folio-find .guest-name-info .toggle-form-btn i {
                color: var(--bs-main);
            }

    .list-folio-find status {
        background: var(--bs-main-100);
        border-radius: var(--px-20);
        padding: 2px var(--px-8);
        font: normal normal 600 var(--s-13);
        display: flex;
        align-items: center;
        color: var(--bs-main-600);
        white-space: nowrap;
        border: 1px solid var(--bs-main-200);
        width: min-content;
        height: var(--px-26);
    }

        .list-folio-find status.checkin {
            background: #e1f2df;
            color: var(--bs-success);
        }

    .list-folio-find .guest-name-schedule {
        display: flex;
        gap: var(--px-12);
        justify-content: space-between;
    }

        .list-folio-find .guest-name-schedule .time-due-date {
            display: flex;
            align-items: center;
            white-space: nowrap;
            flex-direction: column;
            font: normal normal 800 var(--s-22);
        }

        .list-folio-find .guest-name-schedule .time-year {
            opacity: 0.5;
        }

        .list-folio-find .guest-name-schedule .duration-booking {
            padding: 4px 0;
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: space-between;
        }

        .list-folio-find .guest-name-schedule .icon-dashed {
            display: flex;
            gap: var(--px-8);
            align-items: center;
            font-size: var(--px-16);
            color: var(--bs-gray);
        }

            .list-folio-find .guest-name-schedule .icon-dashed .fa-center {
                color: var(--bs-gray-600);
                font-size: var(--px-18)
            }

        .list-folio-find .guest-name-schedule .sum-dur {
            font: normal normal 500 var(--s-16);
        }

        .list-folio-find .guest-name-schedule .box--info {
            flex: 1;
            display: flex;
            flex-direction: column;
            font: normal normal 600 var(--s-14);
            padding: var(--px-16);
            border-radius: var(--px-16);
            gap: var(--px-12);
            color: var(--bs-gray-700);
        }

            .list-folio-find .guest-name-schedule .box--info strong {
                color: var(--bs-gray-900);
                font: normal normal 600 var(--s-18);
            }

            .list-folio-find .guest-name-schedule .box--info span {
                text-align: center;
                color: var(--bs-gray-800);
                font: normal normal 500 var(--s-14);
            }


    .list-folio-find .box--sum {
        display: flex;
        gap: var(--px-16);
        justify-content: space-between;
        padding: var(--px-16);
        background: var(--bs-white);
        font-size: var(--px-16);
    }

    .list-folio-find .room-code {
        padding: var(--px-4) var(--px-8);
        border-radius: var(--px-8);
        color: var(--bs-dark);
        font: normal normal 500 var(--s-14);
        border: 1px solid var(--bs-main-300);
    }

.portal-checkin .form-group {
    width: 100%;
    overflow: auto;
}

    .portal-checkin .form-group .form-upload-image {
        height: var(--px-200);
    }

.portal-checkin .disable {
    opacity: .5;
    pointer-events: none;
}

.save-guest-changed {
    width: 50%;
    margin: auto;
}

    .save-guest-changed.save {
        color: var(--bs-dark);
        background: var(--bs-white);
        border: 1px solid var(--bs-gray-400);
    }

.save-guest-back {
    width: 100%;
    white-space: nowrap;
    color: var(--bs-main-800);
    height: var(--px-60);
    background: var(--bs-main-200);
    font-size: var(--px-16);
}

    .save-guest-back span {
        font-weight: 600;
    }

.portal-checkin .form-group.child .form--input:not(.guest-name-show) {
    display: none;
}

.checkin-lottie {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: var(--px-200);
}

iframe {
    height: var(--px-320);
}

.checkin-success {
    flex: 1;
    width: 80%;
    margin: auto;
    gap: var(--px-12);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    text-align: center;
    margin: var(--px-16) auto;
}

    .checkin-success p {
        color: var(--bs-gray-600);
        font: normal normal 300 var(--s-18);
    }

    .checkin-success img {
        height: var(--px-180);
        width: var(--px-180);
        margin: auto;
        outline: 2px dashed var(--bs-gray-300);
        padding: var(--px-16);
        border-radius: var(--px-16);
    }

.form-qr-code-link-checkin {
    width: 100%;
    display: flex;
    gap: var(--px-24);
    flex-direction: column;
}

.form-copy {
    width: 100%;
    display: grid;
    align-items: center;
    height: var(--px-52);
    border-radius: var(--px-8);
    padding: 0 var(--px-20);
    border: 1px solid var(--bs-gray-400);
    grid-template-columns: 1fr min-content;
    font: normal normal 600 var(--s-16);
}

    .form-copy:hover {
        opacity: .6;
        cursor: pointer;
    }


.qr-code-link-checkin {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: var(--px-12);
    max-width: var(--px-500);
    margin: 0 auto;
    padding: var(--px-24);
    width: 100%;
    gap: var(--px-32);
    height: max-content;
    background: white;
    box-shadow: var(--shadow-qs-light);
}

    .qr-code-link-checkin h4 {
        margin: 0;
    }

    .qr-code-link-checkin i {
        font-size: var(--px-20);
        color: var(--bs-gray-600);
    }

.form-qr-code-download {
    display: flex;
    flex-direction: column;
    gap: var(--px-16);
    padding: var(--px-12) var(--px-24) var(--px-24);
    border: 1px solid var( --bs-gray-300);
    border-radius: var( --px-8);
}

    .form-qr-code-download .title-qr {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: var(--px-48);
        font: normal normal 600 var(--s-16);
    }

    .form-qr-code-download img {
        margin: auto;
        width: var(--px-120);
        height: var(--px-120);
    }

.switch-no-backgr {
    flex: 1;
    width: 100%;
    display: flex;
    gap: var(--px-12);
    align-items: center;
    max-height: var(--px-60);
    position: absolute;
    top: 0;
    justify-content: center;
}

.tab-checkin-online {
    color: var(--bs-dark);
    background: var(--bs-white);
    border: 1px solid var(--bs-gray-400);
}

.switch-no-backgr .btn-switch-no-backgr {
    border-radius: 0;
    background: var(--bs-gray-100);
    color: var(--bs-dark);
}

    .switch-no-backgr .btn-switch-no-backgr.active {
        color: var(--bs-main);
        border-bottom: 3px solid var(--bs-main);
    }

button.share-btn {
    background: var(--bs-white);
    color: var(--bs-dark);
    border: 1px solid var(--bs-gray-300);
}

.form-filter-out {
    width: 100%;
    display: flex;
    gap: var(--px-12);
    align-items: center;
    padding-bottom: var(--px-16);
    justify-content: space-between;
    flex-wrap: wrap;
}

.group-filter-sts {
    height: 100%;
    display: flex;
    gap: var(--px-12);
    align-items: center;
    border-radius: var(--px-8);
    border: 1px solid var(--bs-gray-300);
    padding: var(--px-16);
    cursor: pointer;
    background: var(--bs-white);
    color: var(--bs-main-700);
}

#date_signature_register {
    font: normal normal 500 var(--s-14);
}

.portal-checkin .btn-action-gr {
    position: sticky;
    left: 0;
    margin: 0;
    padding: var(--px-12) var(--px-100);
    revert-layer;
    revert-layer;
    -;
    --;
    revert-layer;
    revert-layer;
    -;
    width: 100%;
    bottom: 0px;
    transform: scale(1.3);
    /* max-height: var(--px-160); */
    min-height: var(--px-90);
    background: white;
}

.box-sign-popup-detail {
    background: var(--bs-gray-200);
    border-radius: var(--px-16);
    justify-content: flex-start !important;
    !i;
    !ii;
    !i;
    !;
}

p.title-view-regis {
    flex: 1;
    display: flex;
    text-align: start;
    align-items: center;
    color: var(--bs-dark);
    font: normal normal 600 var(--s-22);
}

.list-body-room {
    flex: 1;
    width: 100%;
    display: flex;
    overflow: auto;
    background: white;
    position: relative;
    flex-direction: column;
    border-radius: var(--px-8);
    border: 1px solid var(--bs-gray-300);
}

.line-room-info {
    width: 100%;
    display: flex;
    gap: var(--px-4);
    align-items: center;
    min-height: var(--px-44);
    max-height: var(--px-44);
    padding: 0 var(--px-16);
    color: var(--bs-gray-700);
    font: normal normal 400 var(--s-14);
    border-top: 1px solid var(--bs-gray-100);
}

    .line-room-info.head {
        top: 0;
        z-index: 1;
        position: sticky;
        padding: 0 var(--px-16);
        color: var(--bs-gray-900);
        background: var(--bs-white);
        font: normal normal 600 var(--s-14);
    }

    .line-room-info .item-room {
        flex: 1;
        min-width: var(--px-150);
        width: var(--px-150);
    }

        .line-room-info .item-room .fa-duotone {
            color: var(--bs-orange);
        }

        .line-room-info .item-room.flex-2 {
            flex: 2;
            position: relative;
        }

            .line-room-info .item-room.flex-2 .view-list-g {
                top: -4px;
                right: var(--px-8);
                position: absolute;
                height: var(--px-24);
                color: var(--bs-dark);
                background: var(--bs-white);
                font: normal normal 400 var(--s-12);
                border: 1px solid var(--bs-gray-300);
            }

        .line-room-info .item-room.fit-44 {
            min-width: var(--px-44);
            max-width: var(--px-44);
        }

        .line-room-info .item-room.fit-68 {
            min-width: var(--px-68);
            max-width: var(--px-68);
        }

        .line-room-info .item-room.fit-96 {
            min-width: var(--px-100);
            max-width: var(--px-100);
        }

        .line-room-info .item-room.status {
            font-weight: 600;
            font-size: var(--px-12);
        }

        .line-room-info .item-room.hover {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 100%;
            color: var(--bs-main-600);
            font-size: var(--px-20);
        }

        .line-room-info .item-room img {
            max-width: var(--px-40);
            height: var(--px-40);
            border-radius: var(--px-40);
            box-shadow: var(--shadow-qs-light);
            border: 1px solid var(--bs-gray-400);
        }

.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);
    width: 100%;
    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 {
        border: 2px solid var(--bs-main);
    }

    .frame-languages .btn-language span {
        font: normal normal 500 var(--s-16);
    }

.img-src-zoom-in {
    width: var(--px-400);
    height: var(--px-400);
}

.room-detail {
    box-shadow: var(--shadow-qs-solid);
}

.popup-content .room-detail {
    z-index: 12;
    min-width: var(--px-440);
    max-width: var(--px-440);
    background: var(--bs-white);
    position: relative;
}

.form-group .box-info {
    display: flex;
    gap: var(--px-8);
    align-items: start;
    grid-column: span 6;
    flex-direction: column;
    font: normal normal 400 var(--s-14);
}

    .form-group .box-info.border-bot {
        overflow: hidden;
        gap: var(--px-8);
        padding-bottom: var(--px-12);
        border-bottom: 1px dashed var(--bs-gray-400);
    }

.guest-name-flex {
    width: 100%;
    display: flex;
    gap: var(--px-4);
    margin: 2px 0;
    align-items: center;
    justify-content: flex-start;
    font: normal normal 400 var(--s-12);
}

    .guest-name-flex.schedule {
        justify-content: space-between;
    }

    .guest-name-flex i {
        font-size: var(--px-16);
        color: var(--bs-gray-500);
    }


    .guest-name-flex.booker {
        justify-content: space-between;
    }

.guest-lst {
    display: flex;
    gap: var(--px-12);
    align-items: center;
    justify-content: flex-end;
}

    .guest-lst count {
        width: var(--px-20);
        height: var(--px-20);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--px-20);
        background: var(--bs-main-200);
        border: 2px solid var(--bs-white);
        outline: 2px solid var(--bs-gray-200);
    }

    .guest-lst .fa-duotone {
        color: var(--bs-orange);
    }

.guest-name-flex .fa-circle {
    font-size: var(--px-4);
    color: var(--bs-gray-600);
}

.form-group .box-info strong.special {
    color: var(--bs-main-700);
    font: normal normal 600 var(--s-18);
}

.transform-page.typing {
    gap: var(--px-12);
}

.transform-page.max-w-50s {
    min-width: 50%;
    max-width: 50%;
}

.body-select-languages {
}

.frame-languages {
    display: flex;
    gap: var(--px-24);
    align-items: center;
    padding: 0 var(--px-24);
    flex-direction: column;
    margin: auto;
    flex: 1;
    max-height: var(--px-80);
    justify-content: center;
}

.body-select-languages .frame-qrcode {
    flex: 1;
    width: 100%;
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: var(--px-24);
    background-image: url(/Images/login-backgr.jpg);
}

    .body-select-languages .frame-qrcode img.phone-screen {
        height: 100%;
        width: 100%;
    }

    .body-select-languages .frame-qrcode #qr-generate-link-home {
        background: var(--bs-white);
        position: absolute;
        height: var(--px-160);
        width: var(--px-160);
        display: flex;
        border-radius: var(--px-12);
        box-shadow: var(--shadow);
        align-items: center;
        justify-content: center;
        bottom: calc(-1 * var(--px-24));
    }

    .body-select-languages .frame-qrcode .title-phone-scan {
        position: absolute;
        color: var(--bs-main-900);
        top: var(--px-120);
        font: normal normal 700 var(--s-20);
        width: var(--px-180);
        text-align: center;
    }

.switch-select-search {
    flex: 1;
    width: 100%;
    display: grid;
    gap: var(--px-12);
    align-items: center;
    justify-content: center;
    max-height: var(--px-68);
    padding: 0 var(--px-24);
    min-height: var(--px-68);
    grid-template-columns: 1fr 1fr;
}

    .switch-select-search .btn-switch-no-backgr {
        border-radius: 0;
        background: unset;
        height: 100%;
        color: var(--bs-gray-600);
        font: normal normal 600 var(--s-16);
        padding: 0;
    }

        .switch-select-search .btn-switch-no-backgr.active {
            color: var(--bs-main);
            border-bottom: 3px solid var(--bs-main);
            height: 100%;
        }

.checkin-online-bottom {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: var(--px-100);
}

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

    .back-previous-page p {
    }

    .back-previous-page .tab-checkin-online {
        background: unset;
        font-size: var(--px-28);
        padding: 0;
        border: 0;
    }


.portal-checkin .body-portal {
    flex-direction: column;
    margin-top: var(--px-32);
    gap: var(--px-16);
}

.home-checkin-screen-large {
    grid-row: span 2;
}

.frame-languages .form-select-language {
    grid-template-columns: repeat(4, 1fr);
}

.footer-portal.selected-languages-show {
    display: none;
}

.room-and-folio-checked {
    flex: 1;
    display: flex;
    gap: var(--px-8);
    align-items: flex-start;
    font: normal normal 500 var(--s-14);
    color: var(--bs-gray-600);
    flex-direction: column;
    padding: var(--px-12);
    background: var(--bs-main-50);
    border-radius: var(--px-12);
}

    .room-and-folio-checked .row-checked {
        width: 100%;
        display: flex;
        gap: var(--px-6);
        flex-direction: column;
    }

        .room-and-folio-checked .row-checked strong {
            color: var(--bs-main-700);
            font-weight: 600;
        }

.keyboard-pin.login-page {
    justify-content: center;
}


.portal-checkin .form-group.mh-require {
    overflow: hidden;
}

.portal-checkin.mx-w-folio {
    max-width: var(--px-800);
}

.form--input.view-all {
    overflow: auto;
    max-height: unset;
}

.form--input.load-more {
    position: sticky;
    bottom: 0;
}

    .form--input.load-more button {
        border: 0;
        background: unset;
        color: var(--bs-main);
        font-size: var(--px-15);
    }

.frame-info-store {
    flex: 1;
    display: flex;
    gap: var(--px-16);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

    .frame-info-store h4 {
        margin: 0;
        color: var(--bs-gray-500);
        font: normal normal 700 var(--s-28);
    }

    .frame-info-store h5 {
        margin: 0;
        color: var(--bs-main);
        font: normal normal 800 var(--s-38) !important;
        !i;
        !;
    }

    .frame-info-store img.divider-wave {
        width: 50%;
    }

    .frame-info-store .welcome-to-hotel {
        text-align: center;
        font: normal normal 400 var(--s-16);
    }

.header-portal-checkin {
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
    padding: 0 var(--px-12);
}

    .header-portal-checkin .checkin-start {
        flex: 1;
        display: flex;
        align-items: center;
        gap: var(--px-12);
        position: absolute;
        right: 0;
    }

        .header-portal-checkin .checkin-start img {
            padding: 6px;
            width: var(--px-120);
            height: var(--px-120);
            border-radius: var(--px-8);
            border: 1px solid var(--bs-gray-300);
        }

    .header-portal-checkin .checkin-end .name {
        color: var(--bs-dark);
        font: normal normal 700 var(--s-20);
    }

    .header-portal-checkin .checkin-end {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: var(--px-12);
    }

        .header-portal-checkin .checkin-end.follow-us {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: var(--px-12);
        }

    .header-portal-checkin .row-checkin {
        display: grid;
        grid-gap: var(--px-12);
        align-items: center;
        font: normal normal 400 var(--s-18);
        grid-template-columns: var(--px-24) 1fr;
    }

        .header-portal-checkin .row-checkin i {
            color: var(--bs-main);
            font-size: var(--px-20);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .header-portal-checkin .row-checkin span {
            color: var(--bs-gray-700);
            font-weight: 500;
            text-transform: none;
            font-size: var(--px-16);
        }

.up-arrow-svgrepo {
    position: absolute;
    height: var(--px-80);
    right: calc(50% - var(--px-168));
    top: calc(-1* var( --px-20));
    transform: rotate(-70deg);
}

.scan-to-checkin-title {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
}

.btn-open-scan-qr {
    position: absolute;
    right: 0;
    height: var(--px-48);
    width: var(--px-48);
    border-radius: var(--px-48);
    background: var(--bs-white);
    border: 1px solid var(--bs-gray-300);
    color: var(--bs-pink);
    font-size: var(--px-24);
}

.reader-scanner-element {
    width: 100%;
    display: flex;
    overflow: hidden;
    gap: var(--px-12);
    flex-direction: column;
    border-radius: var( --px-12);
}

#scanned-qrcode-info {
    display: flex;
    padding: var(--px-12) 0;
    flex-direction: column;
}

    #scanned-qrcode-info li {
        text-align: end;
        display: flex;
        gap: var(--px-8);
        font: normal normal 400 var(--s-18);
        flex-direction: column;
        align-items: flex-start;
    }

    #scanned-qrcode-info strong {
        font: normal normal 600 var(--s-18)
    }

button.fill-all-information {
    margin: auto;
    position: sticky;
    bottom: var(--px-12);
    background: var(--bs-main);
    color: white;
    font: normal normal 500 var(--s-18);
    padding: var(--px-24);
    width: var(--px-260);
}

    button.fill-all-information i {
    }

span.title-scan-popup {
    height: var(--px-40);
    margin-top: var(--px-20);
    font: normal normal 600 var(--s-20);
    display: flex;
    align-items: center;
}

.frame-capture-id-append {
    display: flex;
    gap: var(--px-12);
    flex-direction: column;
    margin-bottom: var(--px-24);
}

#scan-qrcode-body h4 {
    margin: var(--px-24) 0;
    font: normal normal 600 var(--s-20) !important;
}

.desc-capture-id {
    display: flex;
    gap: var(--px-12);
    flex-direction: column;
    margin-top: var(--px-32);
}

    .desc-capture-id span {
        font: normal normal 400 var(--s-16);
    }

    .desc-capture-id h4 {
        margin: 0 !important;
    }

#scan-qrcode-body canvas {
    width: 100%;
    position: relative;
    max-height: var(--px-400);
    border: 2px dashed var(--bs-gray-300);
    border-radius: var(--px-12);
}

.instruction-capture {
    position: absolute;
    z-index: 1;
    color: white;
    text-align: center;
    width: 100%;
    padding: var(--px-24);
    font: normal normal 600 var(--s-16);
}

.reader-scanner-element video {
    max-height: var(--px-500);
    width: 100% !important;
}

.find-btn-ticket {
    height: var(--px-48);
    position: absolute;
    right: var(--px-16);
    font-size: var(--px-24);
    width: var(--px-48);
    border-radius: var(--px-48);
}

.position-relative .remove-img {
    position: absolute;
    right: calc(-1* var(--px-4));
    top: calc(-1* var(--px-4));
    color: var(--bs-dark);
    background: var(--bs-white);
    border: 2px solid var(--bs-white);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    height: var(--px-24);
    width: var(--px-24);
    box-shadow: var(--shadow);
    border-radius: 100%;
}

    .position-relative .remove-img.id-card {
        right: calc(-1* var(--px-8));
        top: calc(-1* var(--px-8));
        background: var(--bs-white);
        border: 2px solid var(--bs-white);
        height: var(--px-32);
        width: var(--px-32);
        box-shadow: var(--shadow);
        border-radius: 100%;
        font-size: var(--px-16);
    }

.d-flex.expand:hover {
    cursor: pointer;
    color: var(--bs-main-700);
}

.reload-list-search {
    width: var(--px-36);
    min-width: var(--px-36);
    color: var(--bs-main-700);
    background: var(--bs-white);
}

.area-capture-and-scan {
    display: flex;
    position: relative;
    flex-direction: column;
    background: var(--bs-main-200);
    border-radius: var( --px-12) var( --px-12) var(--px-24) var(--px-24);
}

    .area-capture-and-scan .reader-scanner-element {
        border-radius: var(--px-12) var(--px-12) var(--px-24) var(--px-24);
    }

    .area-capture-and-scan .area-instructions {
        height: var(--px-60);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--px-12);
        font: normal normal 400 var(--s-20);
    }

        .area-capture-and-scan .area-instructions i {
            font-size: var(--px-32);
        }

.illustration-popup {
    top: 50%;
    left: 50%;
    height: 100%;
    position: absolute;
    transform: translate(-50%, -50%);
}

.folio-qr-generate-append {
    display: flex;
    gap: var(--px-12);
    background: white;
    padding: var(--px-16);
    flex-direction: column;
    border-radius: var(--px-8);
    border: 2px dashed var(--bs-gray-300);
    justify-content: center;
}

    .folio-qr-generate-append.checkin-page {
        gap: var(--px-32);
        padding: var(--px-24);
        border: 1px solid var(--bs-gray-200);
    }

button.find-ticket-scan {
    height: 100%;
    display: flex;
    gap: var(--px-12);
    align-items: center;
    border-radius: var(--px-8);
    border: 1px solid var(--bs-gray-300);
    padding: var(--px-16);
    cursor: pointer;
    background: var(--bs-white);
    color: var(--bs-pink);
}

    button.find-ticket-scan span {
        color: black;
    }

.info-guest-box {
    width: 100%;
    display: flex;
    gap: var(--px-8);
    color: var(--bs-gray-600);
    flex-direction: column;
    font: normal normal 500 var(--s-14);
}

    .info-guest-box .client-name {
        flex: 1;
        color: black;
        text-transform: uppercase;
        font: normal normal 600 var(--s-16);
    }

.text-highlight {
    color: var(--bs-gray-900);
    font-weight: 600;
    white-space: nowrap;
}

.list-folio-find .guest-name-schedule .box--info {
    gap: 4px;
    cursor: pointer;
    background: unset;
    align-items: center;
    justify-content: center;
    min-height: var(--px-140);
    max-height: var(--px-140);
    border: 2px dashed var(--bs-gray-300);
    padding: var(--px-8);
}

    .list-folio-find .guest-name-schedule .box--info:hover {
        border-color: var(--bs-main-400);
    }

    .list-folio-find .guest-name-schedule .box--info.have-img {
        border: 1px solid var(--bs-main-400);
    }

    .list-folio-find .guest-name-schedule .box--info img {
        width: var(--px-48);
    }

        .list-folio-find .guest-name-schedule .box--info img.showed {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

#phoneNoteForm {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: var(--px-400);
    gap: var(--px-12);
}

    #phoneNoteForm input {
        border-radius: var(--px-8);
        border: 0;
        outline: none;
        min-width: unset;
        box-shadow: none;
        color: var(--bs-gray-900);
        font: normal normal 500 var(--s-20);
        border-radius: var(--px-8);
        border: 1px solid var(--bs-gray-300);
        padding: var(--px-12) var(--px-16);
        height: var(--px-60);
        background: white;
        width: 100%;
    }

    #phoneNoteForm textarea {
        border-radius: var(--px-8);
        color: var(--bs-gray-900);
        font: normal normal 500 var(--s-20);
        height: var(--px-140);
        width: 100%;
        border: 1px solid var(--bs-gray-300);
        padding: var(--px-8) var(--px-16);
        background: white;
    }

    #phoneNoteForm h3 {
        font: normal normal 600 var(--s-20);
    }

    #phoneNoteForm label {
        margin: 0;
        gap: 2px;
        font: normal normal 600 var(--s-20);
    }

.policy-agree {
    display: flex;
    flex-direction: column;
    gap: var(--px-12);
    font: italic normal 400 var(--s-12);
    text-align: start;
}

.area-btn-scan-popup {
    margin: auto;
    z-index: 1112212;
    position: sticky;
    bottom: var(--px-16);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--px-12);
}

button.upload-camera {
    background: var(--bs-main-400);
    color: white;
    font: normal normal 500 var(--s-18);
    border: 4px solid white;
    padding: var(--px-24);
    height: var(--px-60);
    border-radius: var(--px-68);
    outline: 1px solid var(--bs-gray-300);
    box-shadow: var(--shadow-qs-solid);
    font-size: var(--px-28);
    position: absolute;
    left: var(--px-12);
}

    button.upload-camera i {
        font-weight: 400;
        color: white;
    }

button.capture-camera {
    background: var(--bs-orange);
    color: white;
    font: normal normal 500 var(--s-20);
    border: 4px solid white;
    padding: var(--px-24);
    height: var(--px-60);
    font-size: var(--px-20);
    border-radius: var(--px-68);
    outline: 1px solid var(--bs-gray-300);
    box-shadow: var(--shadow-qs-solid);
}

    button.capture-camera i {
        font-weight: 400;
        color: white;
    }

#scan-qrcode-body {
    padding: 0 var(--px-16);
}

.form-upload-image.upload-for-scan-tracking {
    margin-bottom: var(--px-16);
}

.notice-store {
    color: var(--bs-red);
    font: italic normal 500 var(--s-14);
}

    .notice-store.text-gray {
        color: var(--bs-main-900);
        font: normal normal 400 var(--s-14);
    }

.group-notice-store {
    display: flex;
    gap: var(--px-8);
    flex-direction: column;
    background: var(--bs-main-100);
    padding: var(--px-8) var(--px-24);
}

.tab-seach-select-manage {
    display: flex;
    gap: var(--px-12);
    flex-direction: column;
    max-width: var(--px-600);
}

    .tab-seach-select-manage .box--setting {
        cursor: pointer;
        display: flex;
        gap: var(--px-24);
        flex-direction: column;
        padding: var(--px-24);
        border-radius: var(--px-8);
        justify-content: flex-start;
        background: var(--bs-white);
        box-shadow: var(--shadow-qs-light);
    }

        .tab-seach-select-manage .box--setting i {
            font-size: var(--px-24);
            color: var(--bs-cyan);
        }

            .tab-seach-select-manage .box--setting i.fa-circle-check {
                color: var(--bs-orange) !important;
            }

            .tab-seach-select-manage .box--setting i.fa-chevron-right {
                flex: 1;
                text-align: end;
                font-size: var(--px-20);
                color: var(--bs-main-400);
            }

        .tab-seach-select-manage .box--setting p {
            font: normal normal 600 var(--s-18);
        }

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

    .tab-seach-select-manage .row--setting {
        display: flex;
        gap: var(--px-8);
        align-items: center;
    }

.scan-to-checkin-form {
    width: 100%;
    display: flex;
    gap: var(--px-44);
    align-items: center;
    justify-content: center;
    flex-direction: row-reverse;
}


#qr-generate-link-home {
    display: flex;
    gap: var(--px-12);
    background: white;
    padding: var(--px-12);
    flex-direction: column;
    border-radius: var(--px-12);
    border: 2px dashed var(--bs-gray-400);
}

button.btn-filter-status-ticket {
    background: white;
    width: 100%;
    color: var(--bs-dark);
    display: flex;
    border-radius: 0;
    justify-content: flex-start;
    height: var(--px-44);
}

    button.btn-filter-status-ticket.active {
        width: 100%;
        color: var(--bs-dark);
        background: var(--bs-gray-100);
        display: flex;
        justify-content: flex-start;
        height: var(--px-44);
        border-radius: var(--px-8);
    }

    button.btn-filter-status-ticket .fa-circle-dot {
        flex: 1;
        text-align: end;
        font-weight: 300;
        color: var(--bs-gray-500);
    }

    button.btn-filter-status-ticket.active .fa-circle-dot {
        font-weight: 900;
        color: var(--bs-main);
    }

button.accept-search {
    background: white;
    color: var(--bs-gray-900);
    font-size: var(--px-20);
    padding: 0;
    min-width: unset;
    justify-content: end;
}


.search-form.collapse-filter #filter-form-id {
    /* display: none; */
}

button.toggle-filter {
    background: white;
    border: 1px solid var(--bs-gray-300);
    color: black;
    transition: all .2s;
}

    button.toggle-filter.active {
        box-shadow: var(--shadow-qs-light);
    }

.indicate-setting-ci-custom {
    align-items: center;
    border-radius: var(--px-12);
    max-width: var(--px-500);
    margin: 0 auto;
    padding: var(--px-24);
    gap: var(--px-12);
    background: white;
    box-shadow: var(--shadow-qs-light);
    width: 50%;
}

.indicate-setting-ci {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: var(--px-12);
    max-width: var(--px-500);
    margin: 0 auto;
    padding: var(--px-24);
    width: 100%;
    gap: var(--px-12);
    background: white;
    box-shadow: var(--shadow-qs-light);
}

    .indicate-setting-ci.flex-start {
        align-items: flex-start;
    }

    .indicate-setting-ci .form-group {
        margin: 0;
        border: 0;
        padding: 0;
        gap: var(--px-16);
    }

        .indicate-setting-ci .form-group .form--input.grid-12 {
            cursor: pointer;
            border: var(--bdr-1);
            padding: var(--px-12);
            border-radius: var(--px-8);
        }

            .indicate-setting-ci .form-group .form--input.grid-12:hover {
                box-shadow: var(--shadow-qs-solid);
            }

.setting-container.checkin-content {
}

#lottie-animation path[fill="rgb(66,133,244)"] {
    fill: var(--bs-main); /* Change to red */
}

#lottie-animation path[fill="rgb(180,202,246)"] {
    fill: var(--bs-main-300); /* Change to red */
}

#lottie-animation path[fill="rgb(213,226,250)"] {
    fill: var(--bs-main-200); /* Change to red */
}

#lottie-animation g[clip-path="url(#__lottie_element_7)"],
#lottie-animation g[clip-path="url(#__lottie_element_35)"] {
    display: none !important;
}

#lottie-animation {
    z-index: -1;
    height: 100%;
    width: 100%;
    position: absolute;
}

.search-left-area {
    transition: all .4s;
    display: flex;
    gap: var(--px-24);
    flex-direction: column;
}

.group-btn .import-excel {
    position: absolute;
    left: var(--px-120);
}

.area-export-and-import {
    width: 100%;
    display: grid;
    gap: var(--px-24);
    align-items: center;
    grid-template-columns: 1fr var(--px-120);
}

    .area-export-and-import .upload-form-import {
        --color-black-softest: var(--bs-gray-400);
        --color-black-hardest: #21282e;
        --color-green-light: var(--bs-main);
        --color-green: var(--bs-main);
        position: relative;
        display: flex;
        align-items: center;
        border-radius: var(--px-12);
        overflow: hidden;
        transform: rotate(0);
        padding: var(--px-6);
        justify-content: space-between;
    }

    .area-export-and-import .upload-info {
        display: flex;
        align-items: center;
        padding-right: 0;
        padding-left: var(--px-8);
    }

    .area-export-and-import .upload-filename {
        padding-left: 8px;
        transition: opacity 300ms ease;
    }

        .area-export-and-import .upload-filename.inactive {
            opacity: 0.6;
        }

    .area-export-and-import .upload-button {
        position: relative;
        margin: 0;
        font-size: 100%;
        padding: 0 8px;
        font-family: inherit;
        background: none;
        border: none;
        border-radius: inherit;
        outline: none;
    }


    .area-export-and-import .upload-button-text {
        padding: 6px 10px;
        color: white;
        background-color: var(--bs-orange);
        border-radius: inherit;
        outline: none;
        cursor: pointer;
        transition: background-color 200ms ease, box-shadow 300ms ease;
        font-size: var(--px-14);
    }

        .area-export-and-import .upload-button-text.has-selected-file {
            background: var(--bs-main);
        }

        .area-export-and-import .upload-button-text:hover, .upload-button-text:focus {
            background-color: var(--color-green-light);
        }

        .area-export-and-import .upload-button-text.inactive {
            background-color: rgba(255, 255, 255, 0.38);
            cursor: not-allowed;
        }

    .area-export-and-import .upload-hint {
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        transform: translateY(100%);
    }

    .area-export-and-import .upload-progress {
        position: absolute;
        top: 90%;
        left: -100%;
        width: 100%;
        height: 100%;
        color: white;
        background: linear-gradient(270deg, #87e0c2 0%, #65cca9 50%, #26b082 100%);
        transform-origin: left;
    }

    .area-export-and-import .upload-form-import.uploading .upload-button-text {
        animation: fade-up-out 0.4s 0.4s forwards, button-pulse 500ms forwards;
    }

    .area-export-and-import .upload-form-import.uploading .upload-info > * {
        animation: fade-up-out 0.4s 0.4s forwards;
    }

    .area-export-and-import .upload-form-import.uploading .upload-hint {
        animation: fade-up-in 0.4s 0.8s forwards;
    }

    .area-export-and-import .upload-form-import.uploading .upload-progress {
        --ease-in-out-quartic: cubic-bezier(0.645, 0.045, 0.355, 1);
        animation: load-right 2s 1s var(--ease-in-out-quartic) forwards;
        animation-iteration-count: infinite;
    }

    .area-export-and-import [type=file] {
        height: 0;
        overflow: hidden;
        width: 0;
        cursor: pointer;
    }

    .area-export-and-import .drop-area {
        border: 1px solid var(--color-black-softest);
    }

        .area-export-and-import .drop-area.droppable {
            border: 1px dashed rgba(255, 255, 255, 0.6);
        }

        .area-export-and-import .drop-area.highlight {
            border: 1px dashed var(--color-green);
        }


    .area-export-and-import .export-excel {
        background: white;
        height: var(--px-48);
        color: var(--bs-black-rgb);
        border: 1px solid var(--bs-gray-300);
        flex-direction: row-reverse;
        border-radius: var(--px-12);
    }

        .area-export-and-import .export-excel .fa-file-export {
            color: var(--bs-main);
        }

.table-responsive {
    overflow: auto;
    min-height: var(--px-360);
}

.title-info-bill {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--px-12);
    position: sticky;
    top: 0;
    z-index: 12;
    background: white;
}

/* CONTACT */

.needh-title {
    font: normal normal 600 var(--s-28);
}

textarea.needh-text {
    border: 0;
    width: 100%;
    margin-top: var(--px-16);
    /* background: var(--bs-gray-100); */
    border-radius: var(--px-12);
    padding: var(--px-16);
    min-height: var(--px-140);
    border: 1px solid var(--bs-gray-300);
}

    textarea.needh-text:focus {
        background: white;
        outline: 2px solid var(--bs-main-400);
    }

.contact-page-info {
    display: flex;
    gap: var(--px-40);
    flex-direction: row;
    padding: var(--px-60);
    background: var(--bs-main-50);
    flex-wrap: wrap;
}

.contact-left-side {
    flex: 2;
    height: 100%;
    display: flex;
    gap: var(--px-16);
    position: relative;
    flex-direction: column;
    justify-content: center;
}

    .contact-left-side h1 {
        font: normal normal 700 var(--s-45);
    }

    .contact-left-side .group-info-contact {
        display: flex;
        gap: var(--px-12);
        flex-direction: column;
        justify-content: space-between;
    }

    .contact-left-side .info-contact {
        color: var(--bs-gray-600);
        font: normal normal 400 var(--s-18);
    }

    .contact-left-side .group-col-contact {
        display: flex;
        gap: var(--px-12);
        margin-top: var(--px-24);
        align-items: center;
    }

    .contact-left-side .col-contact {
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        gap: var(--px-16);
    }

    .contact-left-side .intro {
        flex: 1;
        padding: var(--px-24);
        max-width: var(--px-300);
        border-radius: var(--px-24);
        background: var(--bs-main-50);
        font: italic normal 400 var(--s-18);
    }

    .contact-left-side i {
        color: var(--bs-main);
    }

    .contact-left-side .title-contact {
        color: black;
        font: normal normal 600 var(--s-18);
    }

    .contact-left-side .message-contact {
        color: var(--bs-gray-800);
        font: normal normal 300 var(--s-16);
    }

.contact-right-side {
    flex: 1;
    margin: auto;
    display: flex;
    gap: var(--px-16);
    flex-direction: column;
    background: var(--bs-white);
    border-radius: var(--px-16);
    padding: var(--px-24);
}

    .contact-right-side .terma {
        text-align: center;
        padding: 0 var(--px-24);
        color: var(--bs-gray-600);
        font: italic normal 300 var(--s-16);
    }

        .contact-right-side .terma strong {
            font: italic normal 600 var(--s-14);
        }

.contact-right-side {
    display: flex;
    gap: var(--px-16);
    flex-direction: column;
}

.group-input-icon {
    display: flex;
    gap: var(--px-12);
    align-items: center;
    border: 1px solid var(--bs-gray-300);
    padding: var(--px-12) var(--px-24);
    border-radius: var(--px-12);
}

    .group-input-icon i {
        color: var(--bs-main);
    }

    .group-input-icon .input-contact {
        border: 0;
        width: 100%;
        outline: 0;
    }

    .group-input-icon:focus-within {
        outline: 2px solid var(--bs-main);
    }

.group-needh-title {
    display: flex;
    gap: var(--px-4);
    flex-direction: column;
    margin-bottom: var(--px-24);
}

#lottie-animation-contact {
    height: var(--px-300);
}

#need-help-modal {
    background: var(--bs-main-50)
}

.row-left-2 {
    display: flex;
    gap: var(--px-24);
    align-items: center;
    justify-content: flex-end;
}

button.form-contact-btn-close {
    position: absolute;
    right: var(--px-60);
    top: var(--px-24);
    background: var(--bs-main) !important;
    color: white !important;
    font-size: var(--px-16) !important;
}

button.print-receipt {
    background: var(--bs-main) !important;
    color: white !important;
    font-size: var(--px-16) !important;
}

    button.print-receipt.cancel {
        background: var(--bs-gray-500) !important;
        color: white !important;
    }

.form-attach-file-email {
    display: flex;
    flex-direction: column;
    gap: var(--px-16);
    padding: var(--px-12) var(--px-24) var(--px-24);
    border: 1px solid var(--bs-gray-300);
    border-radius: var(--px-8);
}


.file-div {
    border: 1px solid var(--bs-gray-300);
    border-radius: var(--px-12);
    display: flex;
    flex-direction: column;
    gap: var(--px-12);
    padding: var(--px-16);
}

.file__input {
    height: auto;
    display: flex;
    align-items: center;
    justify-content: end;
}

    .file__input .file__input--label {
        white-space: nowrap;
        background: var(--bs-main);
        color: var(--bs-white);
        border-radius: var(--px-24);
        display: flex;
        align-items: center;
        gap: var(--px-8);
        justify-content: center;
        padding: var(--px-8) var(--px-12);
        font: normal normal 500 var(--s-14);
    }

        .file__input .file__input--label i {
            font-size: var(--px-16);
            color: var(--bs-white);
        }

.file__input--file {
    opacity: 0;
    cursor: pointer;
    width: 100%;
}

.file__value {
    display: flex;
    align-items: center;
    border-radius: var(--px-8);
    padding: var(--px-12);
    background: var(--bs-main-50);
    justify-content: space-between;
}

.form-attach-file-email .title-qr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--px-48);
    font: normal normal 600 var(--s-16);
}

.list-folio-find .box--sum.scan-qr-infor-us-box {
    display: grid;
    gap: var(--px-12);
    align-items: center;
    justify-content: end;
    border-radius: var(--px-12);
    grid-template-columns: repeat(12, 1fr);
}

.scan-qr-infor-us-box img {
    width: var(--px-88);
    height: var(--px-88);
}

.scan-qr-infor-us-box .area-img {
    display: flex;
    align-items: center;
    justify-content: center;
    grid-column: span 4;
}

    .scan-qr-infor-us-box .area-img img {
        border-radius: 8px;
        position: absolute;
        height: var(--px-100);
        width: var(--px-140);
        padding: 6px;
    }

.scan-qr-infor-us-box .scan-qr-infor-us {
    display: flex;
    gap: var(--px-24);
    align-items: center;
    text-align: center;
    padding: var(--px-12);
    border: 1px dashed var(--bs-gray-500);
    border-radius: var(--px-12);
    justify-content: space-between;
    background: var(--bs-white);
    grid-column: span 8;
}

.scan-qr-infor-us-box .info-us-text {
    display: flex;
    gap: var(--px-4);
    flex-direction: column;
    font: normal normal 500 var(--s-12);
}

.scan-qr-infor-us-box .scan-qr-infor-us-id {
}

.showing-logo-name-on-mobile {
    display: flex;
    gap: var(--px-8);
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

    .showing-logo-name-on-mobile .not-welcome {
        display: flex;
        gap: var(--px-8);
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .showing-logo-name-on-mobile img {
        height: var(--px-80);
        border-radius: var(--px-8);
    }

    .showing-logo-name-on-mobile span {
        text-align: center;
        font: normal normal 700 var(--s-22);
    }

    .showing-logo-name-on-mobile p {
        color: var(--bs-gray-600);
        font: normal normal 400 var(--s-18);
        display: none;
    }

input#pin-input::-webkit-input-placeholder {
    font-size: var(--px-18);
    bottom: 6px;
    font-weight: 400;
    position: relative;
    color: var(--bs-gray-500);
}

.list-folio-find.dis-group {
    overflow: hidden;
    min-height: var(--px-120);
    max-height: var(--px-120);
    border: 1px solid var(--bs-gray-500);
}

    .list-folio-find.dis-group .box--folio.guest-completed:not(.guest-group-booker) {
        display: none;
    }

.list-folio-find:not(.dis-group) .box--folio.guest-group-booker {
    display: none;
}

button.toggle-btn-folio-group {
    gap: var(--px-8);
    padding: 0 var(--px-12);
    color: var(--bs-gray-800);
    background: var(--bs-white);
    border: 1px solid var(--bs-gray-300);
    position: absolute;
    top: var(--px-8);
    right: var(--px-8);
    z-index: 1231231;
}

    button.toggle-btn-folio-group i {
        color: var(--bs-main);
    }

.list-folio-find.dis-group .box--folio.summary {
    padding: var(--px-12) var(--px-16);
}

.list-folio-find.dis-group .guest-name-schedule .time-due-date {
    font: normal normal 600 var(--s-18);
}

.list-folio-find:not(.dis-group) button.toggle-btn-folio-group {
    bottom: var(--px-12);
    top: unset;
    right: var(--px-16);
}

.list-folio-find.dis-group .completed-count {
    font: normal normal 400 var(--s-16);
}

div.swal-options-container {
    display: flex;
    gap: var(--px-24);
    flex-direction: column;
    padding-bottom: var(--px-24);
}

    div.swal-options-container .select-option {
        flex: 1;
        margin: auto;
        border: 2px solid var(--bs-gray-300);
        border-radius: var(--px-12);
        display: flex;
        justify-content: center;
        gap: var(--px-16);
        width: 100%;
        align-items: center;
        min-height: var(--px-130);
        color: var(--bs-gray-800);
        background: var(--bs-white);
        flex-direction: column;
        font: normal normal 500 var(--s-18);
        width: var(--px-320);
    }

        div.swal-options-container .select-option i {
            font-size: var(--px-40);
            color: var(--bs-main-500);
        }

            div.swal-options-container .select-option i.fa-camera {
                color: var(--bs-orange);
            }

.modal-dialog.modal-dialog-scrollable {
    max-width: var(--px-800)
}

.append-data-setting {
    display: flex;
    gap: var(--px-48);
    height: 100%;
    width: 100%;
}

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

.container-switch-setting .btn-switch-tab {
    cursor: pointer;
    display: flex;
    gap: var(--px-12);
    height: var(--px-180);
    flex-direction: column;
    padding: var(--px-24);
    border-radius: var(--px-8);
    background: white;
    border: 1px solid var(--bs-gray-300);
    align-items: flex-start;
    justify-content: flex-start;
    font: normal normal 600 var(--s-20);
    color: var(--bs-gray-900);
}

    .container-switch-setting .btn-switch-tab i {
        flex: 1;
        font-size: var(--px-24);
        color: var(--bs-main);
    }

        .container-switch-setting .btn-switch-tab i.fa-signature {
            color: var(--bs-orange);
        }

        .container-switch-setting .btn-switch-tab i.fa-language {
            color: var(--bs-info);
        }

        .container-switch-setting .btn-switch-tab i.fa-mobile {
            color: var(--bs-pink);
        }

    .container-switch-setting .btn-switch-tab i {
    }

    .container-switch-setting .btn-switch-tab desc {
        flex: 1;
        text-align: start;
        color: var(--bs-gray-500);
        font: normal normal 400 var(--s-14);
    }

.append-data-setting .content-switch-setting {
    width: 100%;
    display: flex;
    overflow: auto;
    padding-bottom: var(--px-16);
}

.container-switch-setting h3 {
    padding: 0 var(--px-12);
    font: normal normal 600 var(--s-20);
}

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

    .header-upl-setting h4 {
        margin: 0;
    }

    .header-upl-setting button {
        margin: unset;
    }

.header-main-setting-page {
    display: flex;
    gap: var(--px-12);
    align-items: center;
}

    .header-main-setting-page h3 {
        margin: 0;
    }

    .header-main-setting-page button {
        margin: 0;
        background: var(--bs-gray-300);
        width: var(--px-32);
        height: var(--px-32);
        font-size: var(--px-12);
    }

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

.setting-page-signature {
    background: var(--bs-white);
    width: 100%;
    min-height: var(--px-400);
    margin: auto;
}

    .setting-page-signature canvas {
        /* width: var(--px-300); */
        /* height: var(--px-300); */
    }


.lst-photo-room-type {
    display: flex;
    gap: var(--px-8);
    flex-direction: column;
}

.room-type-append {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: var(--px-12);
    border-bottom: 1px solid var(--bs-gray-300);
}

    .room-type-append p {
    }

    .room-type-append div.photo-list-append {
        display: flex;
        gap: var(--px-8);
        align-items: center;
    }

        .room-type-append div.photo-list-append button {
            width: var(--px-40);
            height: var(--px-40);
            border-radius: var(--px-40);
            font-size: var(--px-16);
        }

        .room-type-append div.photo-list-append img {
            width: var(--px-40);
            height: var(--px-40);
            border-radius: var(--px-40);
        }

.btn-show-confirm-portal {
    color: var(--bs-gray-dark);
    font: normal normal 500 var(--s-13);
    background: unset;
    min-height: var(--px-44);
    );
    width: 100%;
    justify-content: flex-start;
    text-align: start;
    gap: var(--px-8);
}

    .btn-show-confirm-portal i {
        color: var(--bs-primary);
    }

.modal-dialog-scrollable .view-pdf {
    display: grid;
    gap: var(--px-12);
    grid-template-columns: 1fr;
}

.btn-view-pdf-file {
    display: flex;
    align-items: center;
    height: var(--px-68);
    border-radius: var(--px-8);
    background: white;
    color: var(--bs-gray-900);
    font: normal normal 500 var(--s-14);
    border: 1px solid var(--bs-gray-400);
    justify-content: flex-start;
}

    .btn-view-pdf-file i {
        font-size: var(--px-24);
        color: var(--bs-red);
    }

.group-header-back {
    display: flex;
    gap: var(--px-8);
    align-items: center;
}

    .group-header-back button {
        margin: 0;
        background: var(--bs-gray-300);
        width: var(--px-32);
        height: var(--px-32);
        font-size: var(--px-12);
    }

    .group-header-back h4 {
        margin: 0;
        font: normal normal 600 var(--s-20);
    }

.list-exist-photo {
    display: flex;
    gap: var(--px-12);
    align-items: center;
    flex-direction: column;
    background: var(--bs-gray-200);
    padding: var(--px-12);
    border-radius: var(--px-12);
}

    .list-exist-photo p {
        font: normal normal 600 var(--s-20)
    }

    .list-exist-photo img {
        width: var(--px-40);
        height: var(--px-40);
        border-radius: var(--px-40);
    }

    .list-exist-photo .append-list-exist-photo {
        width: 100%;
        display: flex;
        gap: var(--px-8);
        align-items: center;
        overflow: auto hidden;
        position: relative;
    }

        .list-exist-photo .append-list-exist-photo img {
            cursor: pointer;
            width: var(--px-48);
            height: var(--px-48);
            border-radius: var(--px-48);
        }

            .list-exist-photo .append-list-exist-photo img.active {
                border: 2px solid var(--bs-gray-100);
                outline: 2px solid var(--bs-main);
            }

        .list-exist-photo .append-list-exist-photo button {
            position: absolute;
            right: var(--px-4);
            background: white;
        }

#modal-view-file .modal-content {
}

#modal-view-file .view-photos {
    flex: 1;
    display: flex;
    height: 100%;
    overflow: hidden;
    flex-direction: column;
    justify-content: center;
}

#modal-view-file .modal-dialog {
    display: flex;
    align-items: center;
}

#modal-view-file .modal-dialog-scrollable .modal-body {
    display: flex;
    flex-direction: column;
}

.social-list-append {
    display: flex;
    gap: var(--px-16);
    align-items: center;
}

    .social-list-append a {
        text-decoration: none;
        height: var(--px-36);
        width: var(--px-36);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 100%;
        );
    }

        .social-list-append a:hover {
            background: var(--bs-gray-300);
        }

    .social-list-append i {
        color: var(--bs-main);
        text-decoration: underline;
        font-size: var(--px-24);
        text-decoration: none;
        cursor: pointer;
    }

.group-btn-pos-right {
    display: flex;
    gap: var(--px-8);
    align-items: center;
    flex-direction: row;
}

    .group-btn-pos-right button {
        min-width: max-content;
        width: var(--px-150);
    }

.transform-page.info-page .container-template-2 {
    overflow: unset;
}

button.no-backgr.hidden-when-tracking-portal {
    background: unset;
}

.transform-page.list-folio .list-folio-find.isGroup {
    border-top: 1px solid var(--bs-main-700);
    border-left: 6px solid var(--bs-main-700);
    margin: 8px 0;
}

    .transform-page.list-folio .list-folio-find.isGroup:not(.dis-group) .box--sum.scan-qr-infor-us-box {
        padding-bottom: var(--px-64);
    }

    .transform-page.list-folio .list-folio-find.isGroup:nth-of-type(odd) {
        border-top: 1px solid var(--bs-orange);
        border-left: 6px solid var(--bs-orange);
    }

.list-attached-file {
    width: 100%;
    display: flex;
    gap: var(--px-8);
    flex-direction: column;
}

    .list-attached-file .btn-view-pdf-file {
        height: var(--px-44);
    }


div.form-upload-image.img-room {
    display: flex;
    gap: var(--px-12);
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
    padding: var(--px-12);
    overflow-y: auto;
}

    div.form-upload-image.img-room img {
        width: var(--px-155);
        height: var(--px-155);
        position: unset;
        border: 2px solid var(--bs-gray-400);
        border-radius: var(--px-8);
    }

    div.form-upload-image.img-room label.upload-label {
        width: var(--px-155);
        height: var(--px-155);
        border-radius: var(--px-8);
        border: 2px dashed var(--bs-gray-400);
        text-align: center;
    }

.show-qrcode-checked-folio {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.box--sum.hotel-policy {
    display: flex;
    flex-direction: column;
    font-size: var(--px-12);
    gap: var(--px-6);
    padding: var(--px-12) var(--px-24);
    font-style: italic;
}

.list-folio-find .checkin-lottie {
    max-height: var(--px-140);
}

.checkin-success h2 {
    margin: 0;
    font: normal normal 600 var(--s-20);
}

.transform-page.preview .checkin-success h2 {
    font: normal normal 600 var(--s-24);
}

.checkin-success p {
    font: normal normal 400 var(--s-14);
}

#lottie-searching-folio {
    z-index: 1231231231231;
    position: fixed;
    height: 100%;
    top: 0px;
    width: 100%;
    background: #0000005e;
}

#lottie-searching-folio {
    z-index: 1231231231231;
    position: fixed;
    height: 100%;
    top: 0px;
    width: 100%;
    background: #00000010;
    backdrop-filter: blur(1px);
    display: flex;
    align-items: center;
    justify-content: center;
}

    #lottie-searching-folio svg {
        width: var(--px-200) !important;
        height: var(--px-200) !important;
    }

.btn-view-pdf-file .del-file-attach {
    position: absolute;
    right: var(--px-8);
    font-size: var(--px-16);
    color: violet;
    color: var(--bs-gray-600);
    background: var(--bs-gray-200);
    padding: var(--px-8);
    border-radius: var(--px-8);
    cursor: pointer;
}

div.form-upload-image.img-room .img-upload-room-item {
    position: relative;
}

div.img-upload-room-item .del-photo-room {
    position: absolute;
    top: var(--px-8);
    right: var(--px-8);
    font-size: var(--px-24);
    color: violet;
    color: var(--bs-gray-600);
    background: var(--bs-gray-100);
    padding: var(--px-8);
    border-radius: var(--px-8);
    cursor: pointer;
}

.header-portal-checkin .row-checkin.href-move {
    cursor: pointer;
    color: var(--bs-main);
}

    .header-portal-checkin .row-checkin.href-move span {
        text-decoration: underline;
        color: var(--bs-main);
    }

.dropdown-info-list {
    margin: auto;
    margin-bottom: 0;
}

    .dropdown-info-list .dropdown-menu[aria-labelledby="dropdown-info-list"] {
        min-width: var(--px-240);
        border-radius: var(--px-12);
        border: 1px solid var(--bs-gray-300);
        box-shadow: var(--shadow-qs-light);
    }

#dropdown-info-list {
    background: white;
    color: var(--bs-main);
    width: var(--px-180);
}

    #dropdown-info-list::after {
        content: unset;
    }


/* Adjust swiper-slide height for vertical slides */

.swiper-container {
    width: 100%;
    overflow: hidden;
    border-radius: var(--px-16);
}

.swiper-slide {
    overflow: hidden;
    border-radius: var(--px-16) !important;
}

    /* Apply grayscale filter to all images by default */
    .swiper-slide img {
        width: 100%;
        height: 100%; /* Ensure the slides take full height */
        object-fit: cover !important; /* Ensures the image fits the slide */
        border-radius: var(--px-16) !important; /* Optional: makes the images have rounded corners */
        filter: grayscale(1); /* Apply grayscale filter by default */
        transition: filter 0.3s ease; /* Smooth transition for grayscale effect */
    }

    /* Remove grayscale effect when hovering over an image */
    .swiper-slide:hover img {
        filter: grayscale(0); /* Remove grayscale effect on hover */
    }

    /* Remove grayscale for the active image in the slide */
    .swiper-slide.swiper-slide-active img {
        filter: grayscale(0); /* Remove grayscale for the active image */
    }

.swiper-button-next, .swiper-button-prev {
    color: #fff; /* White arrow icons */
    z-index: 10;
}

.swiper-pagination-bullet {
    background-color: #fff;
    opacity: 0.6;
}

.swiper-pagination-bullet-active {
    background-color: #000;
    opacity: 1;
}

.swiper-zoom-container {
    overflow: hidden;
    border-radius: var(--px-16) !important;
}

.client-checked-gender {
    display: flex;
    gap: var(--px-8);
    align-items: center;
    /* flex-direction: column; */
}

.group-inf-checked-in {
    width: 100%;
    display: grid;
    gap: var(--px-6);
    padding: var(--px-6) 0 var(--px-12);
    grid-template-columns: max-content 1fr;
}

    .group-inf-checked-in .inf-checked-in {
        display: flex;
        align-items: center;
        gap: var(--px-6);
        color: var(--bs-gray-dark);
        font: normal normal 500 var(--s-14);
    }

        .group-inf-checked-in .inf-checked-in i {
            color: var(--bs-main-500);
            background: var(--bs-main-100);
            padding: 8px;
            border-radius: 100%;
            font-weight: 900;
            box-shadow: 0 2px 2px var(--shadow);
        }

.room-and-folio-checked .row-checked.after-checkin {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

.popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Nền mờ */
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.popup-content {
    background: white;
    padding: 20px;
    border-radius: 8px;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

    .popup-content p {
        margin: 0 0 20px;
        font-size: 16px;
    }

    .popup-content button {
        padding: 10px 20px;
        margin: 0 10px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }

.btn-allow {
    background: #4CAF50;
    color: white;
}

.btn-deny {
    background: #f44336;
    color: white;
}

#pdfModal {
    display: none;
    position: fixed;
    z-index: 10000000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Nền mờ */
    justify-content: center;
    align-items: center;
    overflow: scroll !important;
    -webkit-overflow-scrolling: touch !important;
}
    /* Nội dung modal */
    #pdfModal .modal-content {
        background-color: white;
        padding: 20px;
        border-radius: 5px;
        width: 80%;
        max-width: 800px;
        position: relative;
        padding-left: 0;
        padding-right: 0;
    }

    /* Nút đóng */
    #pdfModal .close-btn {
        position: absolute;
        top: 10px;
        right: 15px;
        font-size: 24px;
        cursor: pointer;
        color: #333;
    }

/* Responsive */
@media (max-width: 600px) {
    #pdfModal .modal-content {
        width: 100%;
    }
}

#current-date-time {
    font-size: var(--px-18);
    color: var(--bs-main);
    white-space: nowrap;
}

.header-tx-portal {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.text-desc-search {
    color: var(--bs-gray-600);
    font: italic normal 500 var(--s-14);
}


button.toggle-form-btn.see-more {
    gap: var(--px-8);
    width: max-content;
    padding: 0 var(--px-12);
    color: var(--bs-gray-800);
    background: var(--bs-white);
    border: 1px solid var(--bs-gray-500);
}

.form-end-action-folio {
    width: 100%;
    display: flex;
    align-items: center;
    grid-column: span 12;
    justify-content: flex-end;
}

.guest-name-info button.btn-open-scan-qr {
    display: none;
}

.portal-checkin .form-group.mh-require .hidden-when-mh {
    display: none;
}

.client-and-status-folio {
    width: 100%;
    display: flex;
    gap: var(--px-6);
    align-items: center;
    justify-content: space-between;
}

.info-guest-box .client-name small {
    color: var(--bs-gray-600);
    text-transform: capitalize;
    font: normal normal 500 var(--s-14);
}

.opacity-0 {
    opacity: 0;
    pointer-events: none;
}

.preview-step-confirm {
    width: 100%;
    height: 100%;
    display: flex;
    gap: var(--px-24);
    position: relative;
    padding: var(--px-24) 0;
    flex-direction: column;
}

    .preview-step-confirm .view-photos {
        width: 100%;
        max-height: var(--px-320);
        border-radius: var(--px-12);
        flex: 1;
        display: flex;
        height: 100%;
        overflow: hidden;
        flex-direction: column;
        justify-content: center;
    }

    .preview-step-confirm .guest-step {
        padding: 0 var(--px-32);
        display: flex;
        flex-direction: column;
        gap: var(--px-12);
    }

        .preview-step-confirm .guest-step h4 {
            margin: 0;
            font: normal normal 600 var(--s-32);
        }

        .preview-step-confirm .guest-step p {
            color: var(--bs-main);
            font: normal normal 400 var(--s-18);
        }

    .preview-step-confirm .introduce-step {
        padding: 0 var(--px-32);
        font: normal normal 600 var(--s-20);
    }

    .preview-step-confirm img {
        max-height: var(--px-280) !important;
    }

button.btn-update-clerk {
    background: var(--bs-main);
    width: var(--px-160);
}

button.btn-next-page-folio {
    width: fit-content;
    position: absolute;
    bottom: var(--px-32);
    background: var(--bs-main);
    width: var(--px-160);
    right: var(--px-32);
    min-height: var(--px-48);
    border-radius: var(--px-24);
    font: normal normal 600 var(--s-18);
    gap: var(--px-16);
}

.header-search-folio {
    width: 100%;
    display: grid;
    align-items: center;
    grid-template-columns: var(--px-60) 1fr;
}

.lst-box-folio-preview {
    flex: 1;
    width: 100%;
    display: flex;
    overflow: auto;
    gap: var(--px-12);
    padding: var(--px-16) var(--px-32);
    max-height: var(--px-120);
}

    .lst-box-folio-preview .box-folio-preview {
        display: flex;
        gap: var(--px-12);
        width: max-content;
        padding: var(--px-16);
        flex-direction: column;
        border-radius: var(--px-12);
        font: normal normal 500 var(--s-16);
        background: white;
        min-width: var(--px-180);
        border: 1px solid var(--bs-gray-300);
    }

        .lst-box-folio-preview .box-folio-preview strong {
        }

        .lst-box-folio-preview .box-folio-preview span {
            color: var(--bs-main);
            font-weight: 400;
            white-space: nowrap;
        }

button.toggle-form-btn.see-more-noborder {
    border: unset;
    color: var(--bs-main);
    text-decoration: underline;
}

#table-setting-clerks {
    display: flex;
    overflow: auto;
    background: white;
    border-radius: 8px;
    box-shadow: var(--shadow-qs-light);
    border: 1px solid var(--bs-gray-400);
}

    #table-setting-clerks table {
        border: 0;
        overflow: auto;
    }

    #table-setting-clerks thead {
    }

    #table-setting-clerks tbody {
    }

    #table-setting-clerks tr {
        border: 1px solid var(--bs-gray-100);
    }

        #table-setting-clerks tr:nth-child(2n+1) {
            background: #f9f9f9;
        }

    #table-setting-clerks thead tr:nth-child(2n+1) {
        background: var(--bs-white);
    }

    #table-setting-clerks th {
        border-width: 0;
    }

    #table-setting-clerks td {
        vertical-align: baseline;
        border-width: 0;
    }

        #table-setting-clerks td input {
            border: 2px solid var(--bs-gray-300);
            max-width: var(--px-160);
            text-align: center;
            margin: auto;
        }

    #table-setting-clerks img,
    #table-setting-clerks i {
        margin: auto;
        max-height: var(--px-100);
    }

    #table-setting-clerks .col-end-action {
        width: var(--px-200);
        max-width: var(--px-200);
    }

.append-data-setting .setting-container.clerk-content {
    overflow: hidden;
}

.group-info-list-and-invoice {
    width: 100%;
    display: flex;
    gap: var(--px-8);
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
}

    .group-info-list-and-invoice .dropdown-info-list {
    }

    .group-info-list-and-invoice .btn-invoice-share {
        margin: auto;
        width: var(--px-180);
        background: white;
        color: var(--bs-orange);
    }


/* INVOICE */
.form-add-client-bill .form--input input {
    margin: 0;
    width: 100%;
    outline: none;
    border-radius: 8px;
    height: var(--px-48);
    border: unset;
    padding: var(--px-12) var(--px-16);
    font: normal normal 500 var(--s-14);
}

.form-add-client-bill {
    width: 100%;
    height: 100%;
    display: flex;
    gap: var(--px-12);
    flex-direction: column;
    min-width: var(--px-360);
}

    .form-add-client-bill .h4 {
        margin: 0;
        padding: var(--px-16) var(--px-16) 0;
        font-weight: 700;
        font-size: var(--px-24);
    }

    .form-add-client-bill .h5 {
        margin: 0;
        padding: var(--px-16) var(--px-16) 0;
        font-weight: 500;
        font-size: var(--px-18);
    }

    .form-add-client-bill .client-input-bill {
        width: 100%;
        height: auto;
        display: grid;
        gap: var(--px-16);
        padding: var(--px-16);
        grid-template-columns: 1fr 1fr;
    }

        .form-add-client-bill .client-input-bill .form--input {
            flex-direction: row;
            align-items: center;
            border-bottom: 1px solid var(--bs-gray-300);
            padding: 2px 0;
            min-height: var(--px-40);
            gap: var(--px-6);
            grid-column: span 1;
        }

            .form-add-client-bill .client-input-bill .form--input.note {
                flex-direction: column;
                align-items: flex-start;
                margin-top: var(--px-12);
                grid-column: span 2 !important;
            }

                .form-add-client-bill .client-input-bill .form--input.note textarea {
                    height: var(--px-68);
                }

            .form-add-client-bill .client-input-bill .form--input:focus-within {
                border-bottom: 2px solid var(--bs-main);
            }

            .form-add-client-bill .client-input-bill .form--input span {
                font-weight: 600;
            }

            .form-add-client-bill .client-input-bill .form--input input {
                padding: 0;
                border-radius: 0;
                background: unset;
                height: 100%;
                flex: 1;
            }

                .form-add-client-bill .client-input-bill .form--input input:focus,
                .form-add-client-bill .client-input-bill .form--input textarea:focus {
                    outline: 0 !important;
                }

            .form-add-client-bill .client-input-bill .form--input:nth-child(3) {
                grid-column: span 1;
            }

            .form-add-client-bill .client-input-bill .form--input.grid-full {
                grid-column: span 2;
            }


.footer-popup {
    gap: 8px;
    display: flex;
    align-items: center;
    padding: 0 var(--px-16) var(--px-16);
    justify-content: flex-end;
}

    .footer-popup button {
    }

.notice-input {
    display: flex;
    align-items: center;
    font: italic normal 500 var(--s-14);
    grid-column: span 2;
    padding: 6px;
    background: var(--bs-gray-100);
    border-radius: 4px;
    backdrop-filter: blur(10px);
}

.grid-client-vat-append {
    display: grid;
    grid-gap: 6px;
    grid-template-columns: 1fr 1fr;
    padding: 12px;
    background: white;
    border-radius: 6px;
}

    .grid-client-vat-append .loaded-vat-client {
        grid-column: span 2;
        color: var(--bs-gray-900);
        font: normal normal 600 var(--s-16);
        margin-bottom: 4px;
    }

    .grid-client-vat-append .row-checked strong {
        color: black;
        font: normal normal 500 var(--s-14);
    }

    .grid-client-vat-append .row-checked:nth-child(4) {
        grid-column: span 2;
    }

    .grid-client-vat-append .row-checked:nth-child(5) {
        grid-column: span 2;
    }

    .grid-client-vat-append .row-checked:nth-child(6) {
        grid-column: span 2;
    }