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

/* Common CSS properties  */

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-16);
        transition: 0.5s;
    }

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

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

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

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

button {
    z-index: 0;
    background: 0;
    border: 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(--theme-mode-text);
        border-radius: 4px;
        transform: scale(0);
        transition-property: transform,opacity;
    }

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

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

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

.container-bottom-btn {
    flex: 1;
    display: flex;
    width: 100%;
    gap: var(--px-16);
    align-items: flex-end;
    padding: var(--px-16);
}

.sort-cancel-service[sort="0"] .btn-sort-cancel-service[sort="0"],
.sort-cancel-service[sort="1"] .btn-sort-cancel-service[sort="1"] {
    display: none;
}

.container-bottom-btn button.btn-bottom {
    width: 100%;
    display: flex;
    align-items: center;
    height: var(--px-40);
    justify-content: center;
    padding: 0 var(--px-20);
    border-radius: var(--px-48);
    background: var(--main-color);
    color: var(--bs-white);
    font: normal normal 600 var(--s-14);
}

    .container-bottom-btn button.btn-bottom.cancel {
        background: var(--theme-mode-bs-200);
        color: var(--main-color);
        border: 2px solid var(--main-color);
    }

.container-header {
    width: 100%;
    display: flex;
    gap: var(--px-16);
    align-items: center;
    /* min-height: var(--px-60); */
    /* max-height: var(--px-60); */
    padding: var(--px-16);
}

    .container-header .hearder-group {
        flex: 1;
        display: flex;
        gap: var(--px-4);
        height: var(--px-46);
        flex-direction: column;
        align-items: flex-start;
    }

    .container-header h5 {
        flex: 1;
        margin: 0;
        height: var(--px-24);
        color: var(--qs-txt-solid);
        font: normal normal 600 var(--s-20)
    }

    .container-header.custom-price {
        display: grid;
        grid-template-columns: 1fr var(--px-24);
    }

        .container-header.custom-price .container-input {
            grid-column: span 2;
        }

.container-input {
    display: flex;
    align-items: center;
    height: var(--px-40);
    border: 1px solid var(--theme-mode-border);
    background: white;
    border-radius: 10px;
    padding: 0 5px 0 10px;
    justify-content: space-between;
}

    .container-input input {
        border: 0;
        outline: 0;
        box-shadow: unset;
        color: var(--qs-txt);
        background: inherit;
        font: normal normal 400 var(--s-14);
    }

    .container-input ion-icon {
        width: var(--px-20);
        height: var(--px-20);
    }

.underline {
    text-decoration: underline;
}

.container-search {
    display: grid;
    align-items: center;
    height: fit-content;
    grid-gap: var(--px-12);
    padding: 0 var( --px-16) var(--px-16);
    grid-template-columns: 1fr var( --px-40);
}

    .container-search .search-input {
        height: 100%;
        display: grid;
        align-items: center;
        grid-gap: var(--px-12);
        grid-template-columns: var(--px-24) 1fr;
    }

        .container-search .search-input:not(.container-input) {
            border-radius: var(--px-20);
            border: 1px solid var(--theme-mode-border);
            padding: var(--px-8) var(--px-16);
            height: var(--px-36);
            max-width: var(--px-400);
        }

        .container-search .search-input input {
            border: 0;
            outline: 0;
            box-shadow: unset;
            background: inherit;
            color: var(--qs-txt);
            border-radius: var(--px-20);
            font: normal normal 500 var(--s-14);
            padding: 0 var(--px-8) 0 var(--px-16);
        }

    .container-search button.circle {
        display: flex;
        align-items: center;
        justify-content: center;
        height: var(--px-40);
        width: var(--px-40);
        border-radius: var(--px-40);
        justify-content: center;
        border: 1px solid var(--theme-mode-border);
        color: var(--bs-gray-600);
    }

        .container-search button.circle.show {
            border: 2px solid var(--main-color);
            background: #fff;
            color: var(--main-color);
        }

    .container-search.reverse {
        grid-template-columns: var(--px-40) 1fr;
    }

        .container-search.reverse .search-input {
            grid-template-columns: 1fr var(--px-24);
        }

    .container-search .search-input.reverse {
        grid-template-columns: 1fr var(--px-40);
        height: var(--px-40);
        gap: 0px;
        border-radius: var(--px-20);
        background: #fff;
        border: unset;
        padding: 0;
        border: 1px solid var(--theme-mode-border);
    }

    .container-search .search-input i {
        display: flex;
        justify-content: center;
    }

    .container-search.large {
        grid-template-columns: 1fr var(--px-96);
    }


.container-quicksale .box-desc-btn {
    display: flex;
    gap: var(--px-12);
    flex-direction: column;
    padding: 0 var(--px-16);
}

    .container-quicksale .box-desc-btn.tag-details {
        flex: 1;
    }

    .container-quicksale .box-desc-btn .group-title {
        display: flex;
        align-items: center;
        height: var(--px-40);
        justify-content: space-between;
    }

        .container-quicksale .box-desc-btn .group-title h6 {
            flex: 1;
            color: var(--qs-txt-solid);
        }

        .container-quicksale .box-desc-btn .group-title strong {
            color: var(--qs-txt);
            font: normal normal 700 var(--s-20);
        }

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

    .container-quicksale .list-line-column .line-column {
        display: flex;
        gap: var(--px-8);
        min-height: var(--px-36);
        align-items: center;
        color: var(--qs-txt);
        border-radius: var(--px-10);
        padding: var(--px-10) var(--px-16);
        justify-content: space-between;
        font: normal normal 400 var(--s-14);
    }

        .container-quicksale .list-line-column .line-column.active {
            background: var(--main-color-o);
        }

        .container-quicksale .list-line-column .line-column strong {
            color: var(--qs-txt-solid);
            font: normal normal 500 var(--s-14);
        }

.container-quicksale .form-select {
    width: fit-content;
    height: var(--px-40);
    min-width: var(--px-140);
    color: var(--main-color);
    border-radius: var(--px-40);
    padding: var(--px-10) var(--px-16);
    border: 1px solid var(--main-color);
    font: normal normal 400 var(--s-14);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ff8040' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

.dropdown-customize.show {
    width: 100%;
    display: flex;
    gap: var(--px-6);
    flex-direction: column;
    padding: var(--px-12) 0;
    min-width: var(--px-260);
    border-radius: var(--px-16);
    box-shadow: var(--shadow-qs-solid);
    margin-top: var(--px-12) !important;
}


    .dropdown-customize.show .btn--dropdown {
        display: grid;
        outline: unset;
        box-shadow: unset;
        text-align: start;
        align-items: center;
        height: var(--px-55);
        justify-items: start;
        grid-gap: 0 var(--px-10);
        color: var(--qs-txt-solid);
        grid-template-rows: 1fr 1fr;
        width: calc(100% - var(--px-20));
        border-radius: 0px 100px 100px 0px;
        padding: var(--px-8) var(--px-20);
        font: normal normal 400 var(--s-14);
        border-left: 3px solid transparent;
        grid-template-columns: var(--px-32) 1fr;
    }

        .dropdown-customize.show .btn--dropdown:hover {
            background: var(--main-color-o);
            border-left: 3px solid var(--main-color);
        }

        .dropdown-customize.show .btn--dropdown.one-line {
            height: var(--px-40);
            white-space: nowrap;
            grid-template-rows: unset;
            padding: var(--px-6) var(--px-12);
            font: normal normal 500 var(--s-14);
            grid-template-columns: var(--px-16) 1fr;
        }

        .dropdown-customize.show .btn--dropdown img {
            grid-row: span 2;
            width: var(--px-36);
            height: var(--px-36);
            border-radius: var(--px-36);
        }

        .dropdown-customize.show .btn--dropdown span.avatar {
            grid-row: span 2;
            width: var(--px-36);
            height: var(--px-36);
            border-radius: var(--px-36);
            background: silver;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .dropdown-customize.show .btn--dropdown phone {
            color: var(--qs-txt);
        }

.container-input-create {
    display: grid;
    grid-gap: var(--px-16) var(--px-32);
    grid-template-columns: repeat(2, 1fr);
}

    .container-input-create .grid-2 {
        grid-column: span 2;
    }

    .container-input-create .inp-create {
        all: unset;
        width: 100%;
        padding: var(--px-12) 0;
        max-height: var(--px-40);
        font: normal normal 400 var(--s-14);
        border-bottom: 1px solid var(--theme-mode-border);
    }

    .container-input-create textarea {
        all: unset;
        height: var(--px-140);
        margin-top: var(--px-8);
        border-radius: var(--px-16);
        padding: var(--px-12) var(--px-16);
        font: normal normal 400 var(--s-14);
        border: 1px solid var(--theme-mode-border);
    }


/* Keypad CSS  */
keypad.container-keypad {
    width: 100%;
    display: flex;
    gap: var(--px-12);
    max-height: var(--px-484);
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

    keypad.container-keypad .preview-input {
        text-align: center;
        display: flex;
        height: var(--px-68);
        color: var( --main-color);
        align-items: center;
        font: normal normal 600 var( --s-30);
    }

    keypad.container-keypad .keypad {
        display: grid;
        grid-gap: var(--px-16);
        grid-template-rows: repeat(4, 1fr);
        grid-template-columns: repeat(3, 1fr);
    }

    keypad.container-keypad .btn-keypad {
        display: flex;
        cursor: pointer;
        align-items: center;
        width: 90px;
        color: var(--qs-txt);
        height: 62px;
        justify-content: center;
        border-radius: 12px;
        background: var(--theme-mode-bs-200);
        font: normal normal 600 var(--s-30);
        box-shadow: var(--shadow-1);
    }

    keypad.container-keypad.custom-price {
        padding: var(--px-12);
        border-radius: var(--px-16);
        background: #F5F5F5;
    }

.container-quicksale {
    display: flex;
    max-height: 100%;
    gap: var(--px-12);
    height: 100%;
    width: var(--px-400);
    flex-direction: column;
    border-left: 1px solid var(--theme-mode-border);
}

    .container-quicksale.large {
        min-width: calc(var(--px-360) * 2)
    }

    .container-quicksale h6.title {
        margin: 0;
        color: var(--qs-txt-solid);
        font: normal normal 600 var(--s-14);
    }

    .container-quicksale h3.title {
        color: var(--qs-txt-solid);
        font: normal normal 600 var(--s-20);
    }

    .container-quicksale p.description {
        color: var(--qs-txt-solid);
        font: normal normal 400 var(--s-14);
    }

    /* Custom price CSS  */
    .container-quicksale.custom-price {
        height: 100%;
        /* gap: var(--px-20); */
        background: var(--theme-mode-bs-qs);
    }

    .container-quicksale .config-custom-button {
        display: grid;
        align-items: center;
        grid-gap: var(--px-16);
        justify-content: center;
        grid-template-columns: 1fr 1fr;
        padding: 0 var(--px-16);
    }

    .container-quicksale.payments .config-custom-button {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .container-quicksale .config-custom-button.three-column {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .container-quicksale .config-custom-button.four-column {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }

    .container-quicksale .btn-custom-config {
        gap: 4px;
        display: flex;
        position: relative;
        align-items: center;
        height: var(--px-52);
        flex-direction: column;
        justify-content: center;
        border-radius: var(--px-16);
        background: var(--theme-mode-bs-200);
        border: 1px solid var(--theme-mode-border);
    }

        .container-quicksale .btn-custom-config.active {
            background: var(--main-color-o);
            border: 0px solid var(--main-color);
        }

        .container-quicksale .btn-custom-config.align-start {
            gap: var(--px-6);
            align-items: flex-start;
            padding: 0 var(--px-16);
        }

        .container-quicksale .btn-custom-config.box-line {
            padding: 0;
            height: var(--px-40);
            flex-direction: row;
            border-radius: var(--px-10);
            border-color: var(--qs-txt);
            color: var(--qs-txt);
            justify-content: space-around;
        }

            .container-quicksale .btn-custom-config.box-line[data-percentage="true"]::after {
                height: 40%;
                content: '';
                position: absolute;
                border: 1px solid;
                left: 50%;
            }

            .container-quicksale .btn-custom-config.box-line .value {
                color: var(--qs-txt);
                font: normal normal 400 var(--s-14);
            }

            .container-quicksale .btn-custom-config.box-line.active {
                border-color: var(--main-color);
                color: var(--main-color);
            }

                .container-quicksale .btn-custom-config.box-line.active .value {
                    color: var(--main-color);
                }

.btn-custom-config.box-txt-cirle {
    gap: 4px;
    border: 0;
    padding: 0;
    display: flex;
    position: relative;
    flex-direction: row;
    align-items: center;
    height: var(--px-28);
    color: var(--qs-txt);
    outline: unset !important;
    justify-content: space-between;
    border-radius: var(--px-16);
    box-shadow: unset !important;
    background: unset !important;
}

    .btn-custom-config.box-txt-cirle .value {
        color: var(--qs-txt);
        font: normal normal 500 var(--s-14);
    }

    .btn-custom-config.box-txt-cirle p.value:last-of-type {
        display: flex;
        min-width: var(--px-24);
        align-items: center;
        height: var(--px-24);
        justify-content: center;
        border-radius: var(--px-24);
        padding: 0 var(--px-6);
        background: var(--main-color);
        color: var(--theme-mode-text-white);
        font: normal normal 400 var(--s-10);
    }

    .btn-custom-config.box-txt-cirle.minus p.value:last-of-type {
        background: var(--red-simpli);
    }

.container-quicksale .btn-custom-config.box-xmark {
    border: 0;
    padding: 10px;
    flex-direction: row;
    height: var(--px-36);
    border-radius: var(--px-10);
    justify-content: space-around;
    background: var(--main-color);
}

    .container-quicksale .btn-custom-config.box-xmark .value {
        color: var(--theme-mode-text-white);
        font: normal normal 400 var(--s-14);
    }

    .container-quicksale .btn-custom-config.box-xmark.minus {
        background: var(--red-simpli);
    }

    .container-quicksale .btn-custom-config.box-xmark button.btn-close-popup {
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        width: var(--px-20);
        height: var(--px-20);
        font-size: var(--px-16);
        position: absolute;
        top: calc(-1* var(--px-6));
        right: calc(-1* var(--px-6));
        color: var(--red-simpli);
        border-radius: 100%;
        background: var(--theme-mode-bs-200);
    }

.config-custom-button .title {
    gap: 4px;
    color: var(--qs-txt);
    font: normal normal 400 var(--s-14);
}

.config-custom-button .title {
    color: var(--qs-txt);
    font: normal normal 400 var(--s-14);
}

.config-custom-button .value {
    color: var(--qs-txt-solid);
    font: normal normal 600 var(--s-14);
}

.btn-custom-config.active .value {
    color: var(--main-color);
}

.btn-custom-config.added .value {
    display: flex;
    align-items: center;
    height: var(--px-18);
    padding: 0 var(--px-4);
    color: var(--main-color);
    border-radius: var(--px-6);
    background: var(--main-color-o);
}

.parent-keyboard {
    display: flex;
    padding: 0 var(--px-16)
}

.container-switch-view {
    display: flex;
    gap: var(--px-12);
    overflow: hidden;
    flex-direction: column;
    align-items: flex-start;
    min-height: var(--px-40);
    padding: 0 var(--px-16);
}

    .container-switch-view.addtag {
        padding: 0;
    }

    .container-switch-view .group-btn-sw {
        width: 100%;
        display: flex;
        position: relative;
        min-height: var(--px-40);
        align-items: center;
    }

        .container-switch-view .group-btn-sw .switch-btn {
            flex: 1;
            border: 0;
            z-index: 2;
            height: 100%;
            display: flex;
            align-items: center;
            color: var(--qs-txt);
            justify-content: center;
            background: transparent;
            border-radius: var(--px-10);
            font: normal normal 600 var(--s-14);
        }

            .container-switch-view .group-btn-sw .switch-btn.active {
                color: var(--main-color);
            }

        .container-switch-view .group-btn-sw::after {
            left: 0;
            top: 50%;
            z-index: 1;
            width: 50%;
            content: '';
            height: 100%;
            position: absolute;
            transition: all .33s;
            transform: translateY(-50%);
            border-radius: var(--px-10);
            background: var(--main-color-o);
        }

        .container-switch-view .group-btn-sw.tab-3::after {
            width: calc(100% / 3);
        }

        .container-switch-view .group-btn-sw.tab-4::after {
            width: calc(100% / 4);
        }

        .container-switch-view .group-btn-sw.toggle-btn {
            border-radius: var(--px-40);
            justify-content: space-between;
            border: 1px solid var(--theme-mode-border);
        }

            .container-switch-view .group-btn-sw.toggle-btn::after {
                border-radius: var(--px-40);
                background: var(--main-color);
                height: var(--px-32);
                width: var(--px-32);
            }

            .container-switch-view .group-btn-sw.toggle-btn .switch-btn {
                color: var(--main-color);
                min-width: var(--px-40);
                max-width: var(--px-40);
                padding: 0;
            }

                .container-switch-view .group-btn-sw.toggle-btn .switch-btn.active {
                    color: var(--theme-mode-text-white);
                }

    .container-switch-view .form-switch {
        flex: 1;
        padding: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        justify-content: space-between;
    }


/* Select categories and add service CSS  */
div.container-switch-view.payment[show="full"] div.partial-payment,
div.container-switch-view.payment[show="partial"] div.full-payment {
    display: none !important;
}

div.container-switch-view.payment[show="partial"] .group-btn-sw::after {
    left: 50%;
}

.container-quicksale.categories {
    min-width: var(--width-recap);
}

    .container-quicksale.categories .list-category-append {
        width: 100%;
        display: grid;
        overflow: hidden;
        overflow-y: auto;
        grid-gap: var(--px-12) 0;
        grid-template-columns: repeat(3, 1fr);
        padding: 4px var(--px-16);
        /* padding-left: 0; */
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-items: center;
    }

        .container-quicksale.categories .list-category-append .btn-category {
            gap: 4px;
            padding: var(--px-8);
            display: flex;
            cursor: pointer;
            align-items: center;
            width: var(--px-100);
            height: var(--px-100);
            flex-direction: column;
            border-radius: var(--px-16);
            border: 1px solid var(--theme-mode-border);
            box-shadow: var(--shadow-qs-light);
            background: var(--theme-mode-bs-200);
            justify-content: space-evenly;
            color: var(--theme-mode-text);
        }

            .container-quicksale.categories .list-category-append .btn-category.active {
                outline: 2px solid var(--main-color)
            }

                .container-quicksale.categories .list-category-append .btn-category.active p {
                }

            .container-quicksale.categories .list-category-append .btn-category img {
                width: var(--px-48);
                height: var(--px-48);
                border-radius: var(--px-48);
            }

            .container-quicksale.categories .list-category-append .btn-category p {
                color: var(--theme-mode-text-white);
                font: normal normal 400 var(--s-14);
                text-transform: capitalize;
            }

.container-quicksale.services .list-services-append {
    display: grid;
    grid-template-columns: var(--px-155) var(--px-155);
    overflow: hidden;
    overflow-y: auto;
    gap: var(--px-12);
    width: calc(100%);
    flex-direction: row;
    flex-wrap: wrap;
    height: 100%;
    padding: 0 var(--px-16);
    align-content: flex-start;
}

    .container-quicksale.services .list-services-append .btn-service {
        border: 0;
        width: 100%;
        display: flex;
        gap: var(--px-12);
        align-items: center;
        padding: 0 var(--px-10);
        border-radius: var(--px-10);
        background: var(--bs-yellow);
        padding: 15px;
        width: var(--px-155);
        flex-wrap: wrap;
        justify-content: space-between;
        align-content: space-between;
        box-shadow: 0px 0px 4px 0px #5C81B126;
        height: var(--px-100);
    }

.container-quicksale.services .btn-service p.name {
    text-align: start;
    color: var(--text-tech-color);
    font: normal normal 500 var(--s-14);
    width: 100%;
}

.container-quicksale.services .btn-service p.duration {
    color: var(--text-tech-color);
    font: normal normal 400 var(--s-14);
}

.container-quicksale.services .btn-service p.price {
    color: var(--text-tech-color);
    font: normal normal 600 var(--s-14);
}


/* Payments CSS */
.form-switch .full-payment,
.form-switch .partial-payment {
    display: flex;
    gap: var(--px-12);
    flex-direction: column;
    max-height: calc(100% - 175px);
    overflow: auto;
}

    .form-switch .full-payment .type-of-payment {
        display: grid;
        text-align: start;
        align-items: center;
        height: var(--px-72);
        justify-items: start;
        grid-gap: 0 var(--px-10);
        border-radius: var(--px-16);
        grid-template-rows: 1fr 1fr;
        border: 1px solid var(--theme-mode-border);
        padding: var(--px-10) var(--px-16);
        font: normal normal 400 var(--s-14);
        grid-template-columns: var(--px-32) 1fr;
    }

        .form-switch .full-payment .type-of-payment i {
            grid-row: span 2;
            font-size: var(--px-16);
            width: var(--px-32);
            height: var(--px-32);
            border-radius: var(--px-32);
            background: var(--theme-mode-border);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--theme-mode-text-white);
        }

    .form-switch .full-payment .type-of-payment {
        grid-row: span 2;
    }

        .form-switch .full-payment .type-of-payment.active {
            background: var(--main-color-o);
            border: 2px solid var(--main-color-o);
        }

            .form-switch .full-payment .type-of-payment.active strong {
                color: var(--main-color);
            }

            .form-switch .full-payment .type-of-payment.active i {
                background: var(--main-color);
            }


.form-switch .partial-payment {
    gap: var(--px-18);
}

.form-switch .overview-partial {
    gap: 10px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border-top: 1px dashed var(--theme-mode-border);
    padding: var(--px-16);
}

    .form-switch .overview-partial .ovw-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font: normal normal 500 var(--s-14);
    }

.form-switch .partial-payment .overview-partial .ovw-row span {
    color: var(--bs-gray-600);
    font: normal normal 500 var(--s-14);
}


.form-switch .partial-payment {
    height: 100%;
    gap: var(--px-18);
}

.container-quicksale.payment-detail {
}

    .container-quicksale.payment-detail .list-payment-detail {
        display: flex;
        overflow: hidden;
        overflow-y: auto;
        gap: var(--px-6);
        flex-direction: column;
        width: 100%;
        padding: 0 var(--px-16);
    }

    .container-quicksale.payment-detail .rw-detail {
        display: grid;
        text-align: start;
        align-items: center;
        min-height: var(--px-48);
        max-height: var(--px-48);
        border-radius: var(--px-10);
        padding: 0 var(--px-10);
        font: normal normal 400 var(--s-14);
        background: var(--theme-mode-bs-100);
        grid-template-columns: var(--px-60) 1fr var(--px-24);
    }

/* Gift card CSS */
.container-giftcard {
    display: flex;
    gap: var(--px-24);
    flex-direction: column;
}

    .container-giftcard .giftcard-qr {
        display: flex;
        gap: var(--px-20);
        flex-direction: column;
        height: var(--px-340);
        overflow: hidden;
        border-radius: var(--px-16);
    }

.container-quicksale .scan-qr {
    position: relative;
    min-height: var(--px-160);
    /* margin: 0 var(--px-16); */
}

.group-giftcard-data.notTransThis {
    margin: 0 var(--px-16);
    gap: 15px;
    display: flex;
    flex-direction: column;
}

.container-quicksale.giftcardpay .container-content.notTransThis {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.container-quicksale .scan-qr square {
    position: absolute;
    width: var(--px-48);
    border-style: solid;
    height: var(--px-48);
    border-color: var(--qs-txt);
}

    .container-quicksale .scan-qr square.top {
        top: 0;
        left: 0;
        border-width: 2px 0px 0px 2px;
        border-radius: var(--px-16) 0 0 0;
    }

    .container-quicksale .scan-qr square.right {
        top: 0;
        right: 0;
        border-width: 2px 2px 0px 0px;
        border-radius: 0 var(--px-16) 0 0;
    }

    .container-quicksale .scan-qr square.bottom {
        bottom: 0;
        right: 0;
        border-width: 0px 2px 2px 0px;
        border-radius: 0 0 var(--px-16) 0;
    }

    .container-quicksale .scan-qr square.left {
        bottom: 0;
        left: 0;
        border-width: 0px 0px 2px 2px;
        border-radius: 0 0 0 var(--px-16);
    }

.container-giftcard button.circle {
    border: 0;
    background: var(--main-color);
}

.container-giftcard i.fa-repeat {
    color: var(--theme-mode-text-white);
}

.credit-giftcard {
    display: flex;
    height: var(--px-144);
    padding: var(--px-16);
    flex-direction: column;
    border-radius: var(--px-16);
    justify-content: space-between;
    box-shadow: var(--shadow-qs-light);
    border: 2px solid var(--main-color);
}

    .credit-giftcard .line-box {
        display: flex;
        align-items: center;
        min-height: var(--px-24);
        justify-content: space-between;
    }

        .credit-giftcard .line-box.highlight {
            flex: 1;
            align-items: flex-start;
            color: var(--main-color);
        }

            .credit-giftcard .line-box.highlight .col-start {
                font: normal normal 600 var(--s-20);
            }

    .credit-giftcard .line-box {
        font: normal normal 400 var(--s-14);
    }

        .credit-giftcard .line-box.highlight {
            font: normal normal 600 var(--s-14);
        }

        .credit-giftcard .line-box .col-start {
            font: normal normal 400 var(--s-14);
        }

        .credit-giftcard .line-box:not(.highlight) .col-end {
            color: var(--qs-txt-solid);
            font: normal normal 500 var(--s-14);
        }

.container-quicksale.giftcardpay[scanner="hide"] .scan-qr {
    display: none
}

.container-quicksale.giftcardpay[scanner="show"] button.barcode-read {
    color: var(--main-color);
    border-color: var(--main-color);
    background: white;
}


/* Client CSS */
.display-client {
    display: grid;
    outline: unset;
    overflow: unset;
    box-shadow: unset;
    text-align: start;
    position: relative;
    align-items: center;
    height: var(--px-55);
    justify-items: start;
    grid-gap: 0 var(--px-10);
    color: var(--qs-txt-solid);
    grid-template-rows: 1fr 1fr;
    width: var(--px-210);
    border-radius: var(--px-16);
    padding: var(--px-8) var(--px-10);
    font: normal normal 400 var(--s-14);
    border: 1px solid var(--theme-mode-border);
    grid-template-columns: var(--px-32) 1fr;
}
.phone-line {
    display: flex;
    align-items: center;
}

.phone-line .hide-phone-btn {
    margin-left: 10px;
}
.phone-line[status="show"] .fa-eye-slash{
    display: none;
}
.phone-line[status="hide"] .fa-eye{
    display: none;
}
.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.display-client.no-border {
    border: 0;
    padding: 0;
}

.display-client img {
    grid-row: span 2;
    width: var(--px-36);
    height: var(--px-36);
    border-radius: var(--px-36);
}

.display-client span {
    grid-row: span 2;
    width: var(--px-36);
    height: var(--px-36);
    border-radius: var(--px-36);
    display: flex;
    justify-content: center;
    align-items: center;
    background: silver;
}

.display-client phone {
    color: var(--qs-txt);
}

.display-client .btn-close-popup {
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--px-20);
    height: var(--px-20);
    font-size: var(--px-16);
    position: absolute;
    top: calc(-1 * var(--px-10));
    right: calc(-1 * var(--px-10));
    color: var(--theme-mode-text-white);
    background: var(--main-color);
}


/* Combine ticket CSS */
.container-quicksale.combine {
    height: 100%;
}

.container-quicksale .tix-combine {
    width: 100%;
    display: grid;
    border: 2px solid;
    position: relative;
    padding: var(--px-20);
    grid-auto-flow: column;
    min-height: var(--px-160);
    border-radius: var(--px-16);
    padding-bottom: var(--px-14);
    grid-template-columns: 1fr var(--px-48);
}

    .container-quicksale .tix-combine.wait {
        color: var(--tx-wait);
    }

    .container-quicksale .tix-combine.inservice {
        color: var(--tx-inservice);
    }

    .container-quicksale .tix-combine.done {
        color: var(--tx-done);
    }

    .container-quicksale .tix-combine .start-cb {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .container-quicksale .tix-combine .number-ticket {
        opacity: .68;
        color: var(--theme-mode-text-gray);
        font: normal normal 600 var(--s-30);
    }

    .container-quicksale .tix-combine .end-cb {
        height: 100%;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: space-between;
    }

    .container-quicksale .tix-combine circle {
        top: -2px;
        z-index: 2;
        border: 2px solid;
        position: absolute;
        width: var(--px-48);
        height: var(--px-26);
        border-width: 0px 2px 2px 2px;
        background: var(--theme-mode-bs-300);
        border-radius: 0 0 var(--px-24) var(--px-24);
        left: calc(100% - var(--px-68) - var(--px-28) - var(--px-24));
    }

        .container-quicksale .tix-combine circle.bottom {
            top: unset;
            bottom: -2px;
            transform: rotate(180deg)
        }

    .container-quicksale .tix-combine::after {
        height: 100%;
        content: '';
        position: absolute;
        border: 1px dashed;
        left: calc(100% - var(--px-68) - var(--px-28));
    }


div.container-switch-view.combine[show="pending"] .group-btn-sw::after {
    left: 0;
}

div.container-switch-view.combine[show="inservice"] .group-btn-sw::after {
    left: calc(100% / 4 * 1);
}

div.container-switch-view.combine[show="wait"] .group-btn-sw::after {
    left: calc(100% / 4 * 2);
}

div.container-switch-view.combine[show="all"] .group-btn-sw::after {
    left: calc(100% / 4 * 3);
}

div.form-switch.append-one-page {
    gap: var(--px-12);
    overflow: hidden;
    overflow-y: auto;
}

div.form-switch .tix-line-box {
    width: 100%;
    display: none;
    border: 2px solid;
    align-items: center;
    min-height: var(--px-60);
    max-height: var(--px-60);
    border-radius: var(--px-10);
    padding: 0 var(--px-20);
    font: normal normal 400 var(--s-14);
    grid-template-columns: var(--px-55) 1fr var(--px-70);
}

    div.form-switch .tix-line-box.wait {
        color: var(--tx-wait);
    }

    div.form-switch .tix-line-box.inservice {
        color: var(--tx-inservice);
    }

    div.form-switch .tix-line-box.done {
        color: var(--tx-done);
    }

    div.form-switch .tix-line-box light {
        color: var(--qs-txt);
    }

div.form-switch .client-tix {
    gap: 2px;
    display: flex;
    flex-direction: column;
    color: var(--qs-txt-solid);
}

div.form-switch .group-status {
    display: flex;
    gap: var(--px-6);
    align-items: center;
    font-size: var(--px-16);
    justify-content: flex-end;
}

div.form-switch .tix-line-box.wait.selected {
    background: var(--tx-wait-o);
}

div.form-switch .tix-line-box.inservice.selected {
    background: var(--tx-inservice-o);
}

div.form-switch .tix-line-box.done.selected {
    background: var(--tx-done-o);
}

div.container-switch-view.combine[show="pending"] .tix-line-box.done,
div.container-switch-view.combine[show="inservice"] .tix-line-box.inservice,
div.container-switch-view.combine[show="wait"] .tix-line-box.wait,
div.container-switch-view.combine[show="all"] .tix-line-box {
    display: grid;
}


/* Discount CSS */

.container-quicksale.discount {
}

div.container-switch-view.discount[show="salon"] .group-btn-sw::after {
    left: 0;
}

div.container-switch-view.discount[show="tech"] .group-btn-sw::after {
    left: calc(100% / 3 * 1);
}

div.container-switch-view.discount[show="salontech"] .group-btn-sw::after {
    left: calc(100% / 3 * 2);
}

.container-quicksale.discount .select-type-discount {
    width: 100%;
    display: grid;
    align-items: center;
    height: var(--px-80);
    padding: 0 var(--px-16);
    grid-template-columns: var(--px-128) 1fr var(--px-128);
}

    .container-quicksale.discount .select-type-discount button {
        gap: 4px;
        height: 100%;
        display: flex;
        align-items: center;
        color: var(--qs-txt);
        flex-direction: column;
        justify-content: center;
        border-radius: var(--px-16);
        border: 2px solid transparent;
        font: normal normal 400 var(--s-14);
    }

        .container-quicksale.discount .select-type-discount button.active {
            color: var(--main-color);
            background: var(--main-color-o);
            border: 2px solid var(--main-color);
        }

        .container-quicksale.discount .select-type-discount button strong {
            font: normal normal 600 var(--s-30);
        }

    .container-quicksale.discount .select-type-discount i.fa-arrow-right-arrow-left {
        font-size: var(--s-24);
        color: var(--qs-txt);
        text-align: center;
    }


/* Add tag CSS */
.container-quicksale .component-flex {
    display: flex;
    height: 100%;
    grid-gap: var(--px-40);
    flex-direction: column;
    grid-template-columns: 1fr 1fr;
}

    .container-quicksale .component-flex .com-start {
        height: 100%;
        display: flex;
        gap: var(--px-12);
        flex-direction: column;
    }

    .container-quicksale .component-flex .com-end {
        display: flex;
        gap: var(--px-40);
        flex-direction: column;
    }


div.container-switch-view.addtag[show="minus"] .group-btn-sw.toggle-btn::after {
    left: var(--px-4);
    background: var(--red-simpli);
}

div.container-switch-view.addtag[show="plus"] .group-btn-sw.toggle-btn::after {
    left: calc(50% + (var(--px-32) / 2) - var(--px-4) - 1px);
}

/* Edit service */
editticket {
    display: flex;
    flex-direction: column;
    padding: var(--px-10);
    border-radius: var(--px-16);
    background: var(--theme-mode-bs-200);
    border: 1px solid var(--theme-mode-border)
}

.recap-item-line_box {
    width: 100%;
    overflow: hidden;
    display: flex;
    cursor: pointer;
    position: relative;
    border-radius: 4px;
    min-height: var(--px-40);
    flex-direction: column;
    background: var(--theme-mode-bs-300);
    border: 1px solid var(--theme-mode-border);
}

.listItemLine.notTransThis {
    display: flex;
    flex-direction: column;
    gap: var(--px-12);
}

.recap-item-line_box.opening {
    /* height: max-content; */
    max-height: max-content;
    /* background: var(--backgroud-gray); */
    /* margin: 0; */
}

.recap-item-line_box .line-service {
    display: grid;
    gap: var(--px-10);
    align-items: center;
    height: var(--px-28);
    color: var(--qs-txt);
    font: normal normal 400 var(--s-14);
    grid-template-columns: var(--px-16) 1fr min-content;
}

.recap-item-line_box.opening .line-service {
    color: var(--qs-txt-solid);
    font: normal normal 600 var(--s-14);
}

.recap-item-line_box.opening .line-addtag .value {
    color: var(--bs-pink);
    font: normal normal 500 var(--s-12);
}

.recap-item-line_box .line-discount,
.recap-item-line_box .line-addtag {
    display: flex;
    gap: var(--px-10);
    align-items: center;
    color: var(--bs-pink);
    padding: 0 var(--px-16);
    font: italic normal 500 var(--s-12);
    justify-content: flex-start;
    min-height: var(--px-32);
    max-height: var(--px-32);
    border-top: 1px dashed var(--theme-mode-border);
}

    .recap-item-line_box .line-discount .wrap-line-1,
    .recap-item-line_box .line-addtag .wrap-line-1 {
        gap: 11px;
        display: flex;
        align-items: center;
        flex: 1;
    }

    .recap-item-line_box .line-discount strong,
    .recap-item-line_box .line-addtag strong {
        color: var(--theme-mode-text);
        font-weight: 600;
    }

.recap-item-line_box .line-button {
    flex: 1;
    width: 100%;
    display: grid;
    cursor: pointer;
    position: relative;
    align-items: center;
    min-height: var(--px-40);
    grid-template-columns: 1fr 1fr var(--px-40);
    grid-template-rows: 100%;
    border-top: 1px dashed var(--theme-mode-border);
    grid-template-rows: 100%;
}

    .recap-item-line_box .line-button::before {
        position: absolute;
        content: '';
        left: calc(50% - var(--px-20));
        height: 50%;
        border-left: 2px solid var(--theme-mode-border);
    }

    .recap-item-line_box .line-button::after {
        position: absolute;
        content: '';
        right: var(--px-40);
        height: 50%;
        border-left: 2px solid var(--theme-mode-border);
    }

    .recap-item-line_box .line-button .btn-edit {
        display: flex;
        padding: 0;
        height: 100%;
        font: normal normal 500 var(--s-12);
        justify-content: center;
        align-items: center;
        gap: var(--px-8);
        color: var(--theme-mode-text);
    }

        .recap-item-line_box .line-button .btn-edit i:not(.fa-trash) {
            font-size: var(--px-13);
            color: var(--theme-mode-gray);
        }

        .recap-item-line_box .line-button .btn-edit:hover {
            color: var(--bs-main);
            background: var(--bs-main-100);
            border: 0 !important;
            outline: 0 !important;
        }

.recap-item-line_box:not(.opening) .line-button {
    display: none;
}

.recap-item-line_box.opening .line-button {
    display: grid;
}

.container-quicksale.discount {
    gap: var(--px-10);
}

.container-quicksale .component {
    position: relative;
    width: 24px;
    height: 24px;
    background-image: url(/html/QuickSale/Popup/img/close-2.svg);
    background-size: 100% 100%;
}


.config-custom-button.suggesstion.addTag-field-body-left_tag-field {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
}

#quick-sale-popup .container--checkbox-setting .checkmark {
    height: var(--px-12);
    width: var(--px-12);
}

.container-menu {
    /* width: 100%; */
    padding: 0;
    margin: 0;
    display: flex;
    height: 100%;
    overflow: visible;
    grid-template-columns: min-content 1fr;
    box-shadow: var(--shadow-qs-solid);
    background: var(--theme-mode-bs-400);
    box-shadow: unset;
    background: unset;
    position: relative;
}

    .container-menu .container-quicksale {
        box-shadow: unset;
        border-radius: unset;
    }

.btn-add-recap {
    width: 28px;
    height: 28px;
    padding: 6px;
    gap: 10px;
    border-radius: 100px;
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--main-color-o);
    color: var(--main-color);
    font-size: 23px;
}


.recap-btn-area.notTransThis {
    display: flex;
    gap: 10px;
}

.recap-right.notTransThis {
    display: flex;
    flex-direction: row;
    position: relative;
    transition: width 0.5s;
}

.config-custom-button button.btn.btn-custom-config.btn-partial {
    height: 70px;
}

.container-menu .container-quicksale.categories {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    position: relative;
}

customprice.container-quicksale.custom-price {
    bottom: 0;
    position: absolute;
    display: flex;
    flex-direction: column;
    padding: var(--px-16);
    height: fit-content;
    box-shadow: 0px -8px 10px -4px rgb(0 0 0 / 26%);
    border-radius: var(--px-24) var(--px-24) 0 0;
}

giftcard.container-quicksale.giftcard {
    position: absolute;
    width: 100%;
    display: flex;
    flex-direction: column;
    bottom: 0;
    height: max-content;
    background: white;
    border-radius: var(--px-24) var(--px-24) 0 0;
    justify-content: center;
    padding: var(--px-16);
    box-shadow: 0px -8px 10px -4px rgb(0 0 0 / 26%);
}

.container-header.custom-price i.fa-regular.fa-pen-to-square {
    padding: 10px;
    background: #f1f1f1;
    display: flex;
    border-radius: 100px;
    justify-content: center;
    align-items: center;
}

.recap-right.notTransThis {
    display: flex;
    flex-direction: row;
}

.config-custom-button button.btn.btn-custom-config.btn-partial {
    height: 70px;
}

.line-discount .fa-corner,
.line-addtag .fa-corner {
    font-size: var(--px-12);
    color: var(--theme-mode-gray);
}
coupon.container-quicksale.coupon {
    border-left: unset;
}

.recap-item-line_box.selected {
    background: var(--bs-main-100);
}