:root {
    --fst: 1fr;
    --fsw: 1fr;
    --fsi: 1fr;
    --fsp: 1fr;
    --radius-tix: var(--px-10);
    --radius-tixt: 11px;
    --w-tix: var(--px-220);
    --h-tix: var(--px-155);
    --tix-w-color: #FFF;
    --tix-a-color: #FFF;
    --tix-a-o-color: #FFF;
    --tix-i-color: #FFFFFF;
    --tix-i-o-color: #FFF;
    --tix-d-color: #FFE3E1;
    --tix-d-o-color: #FFE3E130;
}

button i.fa-timer {
    color: var(--bs-checked);
}

button i.fa-play {
    color: var(--tix-inservice);
}

button i.fa-check {
    color: var(--bs-danger);
}

.salon-center-page-body {
    display: grid;
    height: 100%;
    width: 100%;
    overflow: hidden;
    grid-template-areas:
        "t w i"
        "t w i"
        "t w p";
    position: relative;
    transition: all .28s;
    padding: var(--px-10);
    grid-gap: var(--px-16);
    background: var(--theme-mode-bs-100);
    grid-template-rows: 1fr 1fr var(--fsp);
    grid-template-columns: var(--fst) var(--fsw) var(--fsi);
}

    .salon-center-page-body.grid-two {
        grid-template-areas:
            "w i"
            "w i"
            "t p"
            "t p";
        grid-template-rows: 1fr 1fr var(--fsp);
        grid-template-columns: var(--fst) var(--fsi);
    }

    .salon-center-page-body .column-gap {
        display: flex;
        overflow: auto;
        position: relative;
        flex-direction: column;
        min-width: var(--px-60);
        border-radius: var(--px-12);
        border: 1px solid var(--bs-gray-600);
    }

        /*.salon-center-page-body .column-gap.collapsed .header-salon-center {
            grid-template-areas:
                "ep"
                "t"
                "f";
            grid-template-columns: unset;
        }

            .salon-center-page-body .column-gap.collapsed .header-salon-center .area-action-tab-option {
                flex-direction: column;
                background: var(--theme-mode-bs-400);
            }

            .salon-center-page-body .column-gap.collapsed .header-salon-center:not(.pending) .heading-title {
                grid-template-columns: unset;
                justify-content: center;
                position: absolute;
                top: var(--px-60);
                left: var(--px-13);
            }

            .salon-center-page-body .column-gap.collapsed .header-salon-center .tab-filter-area:not(.pending) {
                justify-items: center;
                grid-template-columns: unset;
                grid-template-rows: repeat(3, 1fr);
            }

            .salon-center-page-body .column-gap.collapsed .header-salon-center .tab-filter-area button {
                flex-direction: column;
                padding: var(--px-16) 0;
                justify-content: center;
                align-items: flex-start;
                background: 0;
            }

                .salon-center-page-body .column-gap.collapsed .header-salon-center .tab-filter-area button:first-of-type {
                    padding: 0;
                }

                .salon-center-page-body .column-gap.collapsed .header-salon-center .tab-filter-area button span.quantity {
                    background: 0;
                    width: 100%;
                }

                .salon-center-page-body .column-gap.collapsed .header-salon-center .tab-filter-area button i {
                    margin: 0
                }
        */
        .salon-center-page-body .column-gap.collapsed .btn-action-form-saloncenter i:last-of-type {
            display: block;
        }

        .salon-center-page-body .column-gap.collapsed .tab-option-area,
        .salon-center-page-body .column-gap.collapsed .body-append-form,
        .salon-center-page-body .column-gap.collapsed .body-append-form.ticket,
        .salon-center-page-body .column-gap.collapsed .heading-collapsed-view,
        .salon-center-page-body .column-gap.collapsed .btn-action-form-saloncenter i:first-of-type,
        .salon-center-page-body .column-gap.collapsed .header-salon-center:not(.pending) .tab-filter-area button span.text,
        .salon-center-page-body .column-gap.collapsed .header-salon-center:not(.pending) .heading-title h4 {
            display: none;
        }

    .salon-center-page-body .tech-form {
        grid-area: t;
        /* border-right: 2px solid var(--theme-mode-gray); */
    }

    .salon-center-page-body .wait-form {
        grid-area: w;
        /* border-right: 2px solid var(--theme-mode-gray); */
    }

    .salon-center-page-body.off-inservice .wait-form {
        grid-area: w;
        border-right: 1px solid var(--theme-mode-border);
        border-bottom: 1px solid var(--theme-mode-border);
    }

    .salon-center-page-body .inservice-form {
        grid-area: i;
        /* border-bottom: 2px solid var(--theme-mode-gray); */
    }

    .salon-center-page-body .pending-form {
        grid-area: p;
        min-height: var(--px-340);
    }

        .salon-center-page-body .pending-form.collapsed {
            min-height: var(--px-50);
        }

    .salon-center-page-body .column-gap .btn-action-form-saloncenter {
        border: 0;
        padding: 0;
        grid-area: ep;
        display: flex;
        overflow: hidden;
        border-radius: 4px;
        align-items: center;
        width: var(--px-30);
        height: var(--px-30);
        transition: left .3s;
        justify-content: center;
        color: var(--theme-mode-text);
        background: var(--theme-mode-bs-200);
    }

        .salon-center-page-body .column-gap .btn-action-form-saloncenter i {
            font-size: var(--px-20);
            color: var(--theme-mode-btn-text);
        }

            .salon-center-page-body .column-gap .btn-action-form-saloncenter i:last-of-type {
                display: none;
            }

    .salon-center-page-body .header-salon-center {
        width: 100%;
        display: grid;
        padding-bottom: 0;
        position: relative;
        grid-gap: var(--px-16);
        grid-template-areas:
            "t f f c";
        justify-content: space-between;
        border: 1px dashed transparent;
        grid-template-columns: var(--px-44) 2fr 1fr;
        background: var(--theme-mode-bs-200);
        box-shadow: var(--shadow-1);
    }

.collapsed .header-salon-center:not(.pending-append) {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.collapsed .header-salon-center .heading-title {
    flex-direction: column;
    display: flex !important;
}

#turn-tracker-page-body-id .box-ticket--tracker.addMore.droppable,
#turn-tracker-page-body-id .box-ticket--tracker.addMore.drop-target,
.salon-center-page-body .header-salon-center.drop-target,
.salon-center-page-body .header-salon-center.droppable-tech,
.salon-center-page-body .header-salon-center.droppable {
    box-shadow: var(--shadow-5);
}

    #turn-tracker-page-body-id .box-ticket--tracker.addMore.droppable::after,
    #turn-tracker-page-body-id .box-ticket--tracker.addMore.drop-target::after,
    .salon-center-page-body .header-salon-center.drop-target::after,
    .salon-center-page-body .header-salon-center.droppable-tech::after,
    .salon-center-page-body .header-salon-center.droppable::after {
        width: 100%;
        height: 100%;
        display: flex;
        position: absolute;
        text-align: center;
        align-items: center;
        background: var(--bs-dudu-o);
        justify-content: center;
        color: var(--theme-mode-text-dark);
        border: 1px dashed var(--bs-info);
        font: normal normal 600 var(--s-16);
        content: 'Drop here';
        bottom: 0;
        right: 0;
    }

    .salon-center-page-body .header-salon-center.droppable::after {
        color: var(--theme-mode-text);
        background: var(--theme-mode-bs-300);
    }

    .salon-center-page-body .header-salon-center.droppable.inservice-append::after {
        content: "Drag a ticket here to In-service";
    }

    .salon-center-page-body .header-salon-center.droppable.wait-append::after {
        content: "Drag a ticket here to Wait-list";
    }

    .salon-center-page-body .header-salon-center.droppable.pending-append::after {
        content: "Drag a ticket here to Pending";
    }

    .salon-center-page-body .header-salon-center.droppable-tech::after {
        color: var(--theme-mode-text);
        background: var(--theme-mode-bs-300);
    }

    .salon-center-page-body .header-salon-center.droppable-tech.inservice-append::after {
        content: "Drag a ticket here to create a new ticket and initiate the service.";
    }

    .salon-center-page-body .header-salon-center.droppable-tech.wait-append::after {
        content: "Drag a ticket here to create a new walk-in ticket.";
    }

    .salon-center-page-body .header-salon-center.droppable-tech.pending-append::after {
        content: "Drag a ticket here to create a new ticket and mark it as 'done'.";
    }

    #turn-tracker-page-body-id .box-ticket--tracker.addMore.droppable::after {
        color: var(--theme-mode-text);
        content: "Drop here to In-service";
        background: var(--theme-mode-bs-300);
    }


/* Tab filter ticket */
.area-action-tab-option {
    width: 100%;
    grid-area: f;
    display: flex;
    padding: 0px;
    border-radius: 4px;
    align-items: center;
    justify-content: space-between;
}

.tab-filter-area {
    width: 100%;
    display: flex;
}

.area-action-tab-option .tab-option-area {
    height: 100%;
    display: flex;
    border-radius: 4px;
}

.tab-option-area .dropdown-menu {
    padding: var(--px-10);
    font: normal normal 700 var(--s-20);
}

.tab-option-area .dropdown-item {
    display: grid;
    align-items: center;
    padding: var(--px-10);
    grid-gap: var(--px-10);
    font: normal normal 700 var(--s-20);
    grid-template-columns: max-content 1fr;
}

.tab-option-area i {
    font-size: var(--px-18);
    color: var(--bs-dudu);
}

.tab-option-area .font-weight-medium {
    font: normal normal 700 var(--s-14);
}

.tab-option-area button {
    color: var(--theme-mode-text);
    width: var(--px-16);
    padding: 0;
    width: var(--px-20);
}

    .tab-option-area button:hover {
        background-color: var(--bs-blue);
    }

        .tab-option-area button:hover i {
            color: #FFF;
        }

    .tab-option-area button.active {
        background-color: var(--bs-dudu);
        color: var(--theme-mode-text-white);
    }

.column-gap .tab-filter-area {
    width: 100%;
    gap: var(--px-20);
    display: grid;
    grid-template-columns: max-content min-content min-content;
}

.column-gap.collapsed .tab-filter-area:not(.pending-append) {
    display: flex;
    flex-direction: column;
    align-items: center;
}

    .column-gap.collapsed .tab-filter-area:not(.pending-append) button {
        align-items: center;
        justify-content: center;
    }

.tab-filter-area button {
    flex: 1;
    width: 100%;
    height: 100%;
    padding: 0;
    display: flex;
    gap: var(--px-16);
    align-items: center;
    justify-content: start;
    border: 2px solid transparent;
    grid-template-columns: repeat(2, 1fr);
}

    .tab-filter-area button span.text {
        color: var(--theme-mode-gray);
        font: normal normal 600 var(--s-14);
    }

    .tab-filter-area button.all span.text {
        /* font: normal normal 700 var(--s-20); */
    }

    .tab-filter-area button span.quantity {
        display: flex;
        border-radius: 4px;
        align-items: center;
        width: var(--px-24);
        height: var(--px-24);
        justify-content: center;
        color: var(--theme-mode-text);
        font: normal normal 700 var(--s-11);
        background: var(--theme-mode-bs-200);
    }

    .tab-filter-area button.active {
        width: inherit;
        opacity: 1 !important;
    }

    .tab-filter-area button:hover {
        border: 0;
    }

    .tab-filter-area button.active .text {
        color: var(--theme-mode-text);
        font: normal normal 700 var(--s-18);
    }

    .tab-filter-area button.active .quantity {
        font: normal normal 700 var(--s-11);
        background: var(--main-color-o);
        color: var(--main-color);
    }

    .tab-filter-area button i {
        margin-right: 4px;
        font-size: var(--px-16);
        color: var(--bs-dudu)
    }

        .tab-filter-area button i.ready {
            color: var(--bs-green)
        }

        .tab-filter-area button i.busy {
            color: var(--bs-danger)
        }

        .tab-filter-area button i.walkin {
            color: var(--bs-info)
        }

        .tab-filter-area button i.wait {
            color: var(--bs-warning)
        }

        .tab-filter-area button i.appointment {
            color: #6BD6CD
        }

    .tab-filter-area button h5 {
        margin: 0;
    }

.salon-center-page-body .header-salon-center .heading-collapsed-view {
    width: 100%;
    grid-area: c;
    display: grid;
    position: relative;
    align-items: center;
    border-radius: var(--px-16);
    grid-template-columns: 1fr 1fr;
    background-color: var(--theme-mode-button);
    border: 1px solid var(--theme-mode-border);
}

    .salon-center-page-body .header-salon-center .heading-collapsed-view button {
        height: var(--px-32);
        padding: 0 var(--px-10);
        border-radius: var(--px-16);
        color: var(--theme-mode-text);
        font: normal normal 700 var(--s-14);
    }

        .salon-center-page-body .header-salon-center .heading-collapsed-view button.active {
            background: var(--main-color);
            color: var(--theme-mode-text-white)
        }

.salon-center-page-body .header-salon-center .heading-title {
    width: 100%;
    display: flex;
    grid-area: t;
    align-items: center;
    height: var(--px-44);
}

    .salon-center-page-body .header-salon-center .heading-title.tab-filter-area {
        grid-template-columns: var(--px-44) max-content max-content;
        flex-direction: row;
    }

    .salon-center-page-body .header-salon-center .heading-title h4 {
        margin: 0;
        font: normal normal 700 var(--s-20);
        color: var(--theme-mode-text);
    }

    .salon-center-page-body .header-salon-center .heading-title i:not(.fa-chevron-down) {
        font-size: var(--px-16);
        display: flex;
        width: var(--px-44);
        height: 100%;
        border-radius: var(--px-8) var(--px-8) var(--px-8) 0;
        align-items: center;
        justify-content: center;
        background: var( --theme-mode-bs-200);
        box-shadow: 1px 2px;
    }

        .salon-center-page-body .header-salon-center .heading-title i:not(.fa-chevron-down):hover {
            cursor: pointer;
            background: var(--theme-mode-bs-100);
        }

    .salon-center-page-body .header-salon-center .heading-title i.fa-circle-exclamation-check {
        color: var(--bs-danger)
    }

    .salon-center-page-body .header-salon-center .heading-title i.fa-screen-users {
    }

    .salon-center-page-body .header-salon-center .heading-title i.fa-timer {
        color: var(--bs-warning)
    }

    .salon-center-page-body .header-salon-center .heading-title i.fa-play {
        color: var(--tix-inservice);
    }

.salon-center-page-body .header-salon-center button:not(.dropdown-toggle, .dropdown-item) {
    border: none;
    outline: none;
    opacity: 0.4;
}

.salon-center-page-body .header-salon-center button.btn-turn-tracker-view {
    border: 0;
    padding: 0;
    display: flex;
    overflow: hidden;
    border-radius: 4px;
    align-items: center;
    width: var(--px-36);
    height: 100%;
    justify-content: center;
    color: var(--theme-mode-text);
    background: var(--theme-mode-bs-200);
}

    .salon-center-page-body .header-salon-center button.btn-turn-tracker-view i {
        font-size: var(--px-20)
    }

.ticket-append .body-append-form,
#static-change-tech-modal .area-to-change-tech .form-list-tech-append {
    flex-wrap: wrap;
    padding: var(--px-12);
    flex-direction: column;
    align-content: flex-start;
}

    .ticket-append .body-append-form div.tech-detail {
    }

    .ticket-append .body-append-form.ticket {
        flex: 1;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        overflow: auto;
        gap: var(--px-10);
        flex-direction: column;
        align-content: flex-start;
    }

        .ticket-append .body-append-form.ticket .cards-ticket-ui {
            display: grid;
            cursor: pointer;
            user-select: none;
            touch-action: none;
            position: relative;
            border-radius: var(--px-8);
            align-items: stretch;
            grid-template-areas:
                "index name name tix"
                "time time dur dur"
                "ser ser ser ser"
                "tech tech tech tech";
            height: var(--h-tix);
            width: var(--w-tix);
            overflow: hidden;
            justify-content: space-between;
            color: var(--theme-mode-text);
            padding: var(--px-12);
            grid-template-columns: min-content 1fr 1fr min-content;
            border: 1px solid #a6a6a6;
            background: var(--theme-mode-bs-200);
            grid-template-rows: 1fr max-content max-content max-content;
            box-shadow: 0px 1px 3px 0px rgba(60,64,67,.30), 0px 4px 8px 3px rgba(60,64,67,.15);
        }

            .ticket-append .body-append-form.ticket .cards-ticket-ui.dragEnter {
                /* z-index: 100; */
                transition: unset !important;
            }

            .ticket-append .body-append-form.ticket .cards-ticket-ui.drop-target {
                outline: 2px dashed var(--bs-info)
            }

            .ticket-append .body-append-form.ticket .cards-ticket-ui.appointment {
                border: 2px solid var(--bs-main-400); 
            }
            
            .ticket-append .body-append-form.ticket .cards-ticket-ui.wait {
                /* border: 1px solid var(--tix-wait); */
            }

            .ticket-append .body-append-form.ticket .cards-ticket-ui.inservice {
                /* border: 1px solid var(--tix-inservice); */
            }

            .ticket-append .body-append-form.ticket .cards-ticket-ui.pending {
                /* border: 1px solid var(--tix-done); */
            }

            .ticket-append .body-append-form.ticket .cards-ticket-ui.dragEnter {
                z-index: 9898;
            }

        .ticket-append .body-append-form.ticket.line-view .cards-ticket-ui.dragEnter {
            z-index: 10000;
            width: var(--px-160) !important;
            transition: unset !important;
        }

        .ticket-append .body-append-form.ticket .cards-ticket-ui::before,
        .ticket-append .body-append-form.ticket .cards-ticket-ui::after {
            /* content: ""; */
            width: 100%;
            height: 50%;
            z-index: -1;
            position: absolute;
        }

        .ticket-append .body-append-form.ticket .cards-ticket-ui::before {
            top: 0;
            border-radius: 0 4px 0 0;
            background-image: radial-gradient( circle at -1% var(--px-85), transparent var(--radius-tix), var(--tix-w-color) 0);
        }

        .ticket-append .body-append-form.ticket .cards-ticket-ui::after {
            bottom: 0;
            border-radius: 0 0 4px 0;
            background-image: radial-gradient( circle at 100% var(--px-85), transparent var(--radius-tix), var(--tix-w-color) 0);
        }

        .ticket-append .body-append-form.ticket .cards-ticket-ui.appointment::before {
            background-image: radial-gradient( circle at 80% -10%, transparent var(--radius-tix), var(--tix-a-color) var(--radius-tixt));
        }

        .ticket-append .body-append-form.ticket .cards-ticket-ui.appointment::after {
            background-image: radial-gradient( circle at 80% 110%, transparent var(--radius-tix), var(--tix-a-color) var(--radius-tixt));
        }

        .ticket-append .body-append-form.ticket .cards-ticket-ui.walkin::before {
            background-image: radial-gradient( circle at 80% -10%, transparent var(--radius-tix), var(--tix-w-color) var(--radius-tixt));
        }

        .ticket-append .body-append-form.ticket .cards-ticket-ui.walkin::after {
            background-image: radial-gradient( circle at 80% 110%, transparent var(--radius-tix), var(--tix-w-color) var(--radius-tixt));
        }

        .ticket-append .body-append-form.ticket .cards-ticket-ui.inservice::before {
            background-image: radial-gradient( circle at 80% -10%, transparent var(--radius-tix), var(--tix-i-color) var(--radius-tixt));
        }

        .ticket-append .body-append-form.ticket .cards-ticket-ui.inservice::after {
            background-image: radial-gradient( circle at 80% 110%, transparent var(--radius-tix), var(--tix-i-color) var(--radius-tixt));
        }

        .ticket-append .body-append-form.ticket .cards-ticket-ui.pending::before {
            background-image: radial-gradient( circle at 80% -10%, transparent var(--radius-tix), var(--tix-d-color) var(--radius-tixt));
        }

        .ticket-append .body-append-form.ticket .cards-ticket-ui.pending::after {
            background-image: radial-gradient( circle at 80% 110%, transparent var(--radius-tix), var(--tix-d-color) var(--radius-tixt));
        }

        #ticket-body-append-tracker .line-view .cards-ticket-ui.dragHere,
        .ticket-append .body-append-form.ticket.line-view .cards-ticket-ui.dragEnter {
            z-index: 1;
            overflow: hidden;
            transition: unset !important;
        }

            #ticket-body-append-tracker .line-view .cards-ticket-ui.dragHere .card-name,
            .ticket-append .body-append-form.ticket.line-view .cards-ticket-ui.dragEnter .card-name {
                width: 100%;
            }

                #ticket-body-append-tracker .line-view .cards-ticket-ui.dragHere .card-name p,
                .ticket-append .body-append-form.ticket.line-view .cards-ticket-ui.dragEnter p {
                    white-space: break-spaces;
                    -webkit-line-clamp: 2;
                }

                #ticket-body-append-tracker .line-view .cards-ticket-ui.dragHere .card-name .member,
                #ticket-body-append-tracker .line-view .cards-ticket-ui.dragHere .card-timer,
                #ticket-body-append-tracker .line-view .cards-ticket-ui.dragHere .card-time,
                #ticket-body-append-tracker .line-view .cards-ticket-ui.dragHere .card-serv,
                #ticket-body-append-tracker .line-view .cards-ticket-ui.dragHere .cards-tech,
                .ticket-append .body-append-form.ticket.line-view .cards-ticket-ui.dragEnter .card-name .member,
                .ticket-append .body-append-form.ticket.line-view .cards-ticket-ui.dragEnter .card-timer,
                .ticket-append .body-append-form.ticket.line-view .cards-ticket-ui.dragEnter .card-time,
                .ticket-append .body-append-form.ticket.line-view .cards-ticket-ui.dragEnter .card-serv {
                    display: none;
                }

        .ticket-append .body-append-form.ticket.line-view {
            /* display: grid; */
            flex-wrap: nowrap;
            grid-auto-flow: row;
            overflow: hidden auto;
            grid-auto-columns: unset;
            grid-template-columns: 1fr;
            grid-template-rows: repeat(auto-fit, minmax(var(--px-60), min-content));
        }

            .ticket-append .body-append-form.ticket.line-view .cards-ticket-ui {
                width: 100%;
                grid-gap: 0px;
                min-height: var(--px-72);
                max-height: var(--px-72);
                grid-template-areas:
                    "index name time dur tix"
                    "ser ser tech tech tech";
                padding: var(--px-8) var(--px-16);
                grid-template-columns: var( --px-36) var(--px-200) repeat(2, 1fr) var(--px-36);
            }

                .ticket-append .body-append-form.ticket.line-view .cards-ticket-ui::before {
                    left: 0;
                    width: 100%;
                    height: 50%;
                    border-radius: 4px 4px 0 0;
                }

                .ticket-append .body-append-form.ticket.line-view .cards-ticket-ui::after {
                    top: 50%;
                    width: 100%;
                    height: 50%;
                    border-radius: 0 0 4px 4px;
                }

                .ticket-append .body-append-form.ticket.line-view .cards-ticket-ui.appointment::before {
                    background-image: radial-gradient( circle at var(--px-50) -11%, transparent var(--radius-tix), var(--tix-a-color) var(--radius-tixt));
                }

                .ticket-append .body-append-form.ticket.line-view .cards-ticket-ui.appointment::after {
                    background-image: radial-gradient( circle at var(--px-50) 111%, transparent var(--radius-tix), var(--tix-a-color) var(--radius-tixt));
                }

                .ticket-append .body-append-form.ticket.line-view .cards-ticket-ui.walkin::before {
                    background-image: radial-gradient( circle at var(--px-50) -11%, transparent var(--radius-tix), var(--tix-w-color) var(--radius-tixt));
                }

                .ticket-append .body-append-form.ticket.line-view .cards-ticket-ui.walkin::after {
                    background-image: radial-gradient( circle at var(--px-50) 111%, transparent var(--radius-tix), var(--tix-w-color) var(--radius-tixt));
                }

                .ticket-append .body-append-form.ticket.line-view .cards-ticket-ui.inservice::before {
                    background-image: radial-gradient( circle at var(--px-50) -11%, transparent var(--radius-tix), var(--tix-i-color) var(--radius-tixt));
                }

                .ticket-append .body-append-form.ticket.line-view .cards-ticket-ui.inservice::after {
                    background-image: radial-gradient( circle at var(--px-50) 111%, transparent var(--radius-tix), var(--tix-i-color) var(--radius-tixt));
                }

                .ticket-append .body-append-form.ticket.line-view .cards-ticket-ui.pending::before {
                    background-image: radial-gradient( circle at var(--px-50) -11%, transparent var(--radius-tix), var(--tix-d-color) var(--radius-tixt));
                }

                .ticket-append .body-append-form.ticket.line-view .cards-ticket-ui.pending::after {
                    background-image: radial-gradient( circle at var(--px-50) 111%, transparent var(--radius-tix), var(--tix-d-color) var(--radius-tixt));
                }

            .ticket-append .body-append-form.ticket.line-view .cards-tech::before {
                display: none;
            }

            .ticket-append .body-append-form.ticket.line-view .card-name p {
                font: normal normal 700 var(--s-13);
            }

            .ticket-append .body-append-form.ticket.line-view .cards-tech p {
                font: normal normal 700 var(--s-11);
            }

            .ticket-append .body-append-form.ticket.line-view .card-serv p {
                height: auto;
                -webkit-line-clamp: 1;
                font: normal normal 500 var(--s-12);
            }

        .ticket-append .body-append-form.ticket .card-index {
            display: flex;
            grid-area: index;
            align-items: center;
            min-width: var(--px-32);
            max-height: var(--px-32);
            justify-content: center;
            border-radius: var(--px-6);
            background: var(--bs-blue);
            padding: 0 3px;
        }

        .ticket-append .body-append-form.ticket div.wait .card-index {
            background: var(--tix-checkin)
        }

        .ticket-append .body-append-form.ticket div.inservice .card-index {
            background: var(--tix-inservice)
        }

        .ticket-append .body-append-form.ticket div.pending .card-index {
            background: var(--tix-done)
        }

        .ticket-append .body-append-form.ticket .card-index p {
            color: var(--theme-mode-text-white);
            font: normal normal 700 var(--s-12);
        }

        .ticket-append .body-append-form.ticket .cards-ticket-ui.pass-date .card-index::after,
        .ticket-append .body-append-form.ticket .cards-ticket-ui.highlight .card-index::after {
            left: 0px;
            bottom: 0;
            z-index: 18;
            width: 100%;
            height: 100%;
            display: flex;
            flex-wrap: nowrap;
            border-radius: var(--px-8);
            position: absolute;
            align-items: center;
            pointer-events: none;
            content: 'Pass date';
            align-content: center;
            padding: var(--px-20);
            flex-direction: column;
            justify-content: flex-end;
            text-transform: uppercase;
            backdrop-filter: brightness(0.75);
            font: normal normal 700 var(--s-14);
            color: var(--theme-mode-text-white);
        }

        .ticket-append .body-append-form.ticket .cards-ticket-ui.highlight .card-index::after {
            content: attr(data-content);
        }

        .ticket-append .body-append-form.ticket .card-name {
            gap: var(--px-6);
            display: flex;
            padding: 0 2px;
            grid-area: name;
            overflow: hidden;
            align-items: start;
            border-radius: 4px;
            flex-direction: column;
            margin-left: var(--px-6);
            max-height: var(--px-36);
        }

            .ticket-append .body-append-form.ticket .card-name p {
                overflow: hidden;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                word-break: break-all;
                text-overflow: ellipsis;
                text-transform: uppercase;
                -webkit-box-orient: vertical;
                font: normal normal 700 var(--s-14);
            }

                .ticket-append .body-append-form.ticket .card-name p.member {
                    color: var(--bs-pink);
                    text-transform: capitalize;
                    font: normal normal 600 var(--s-10);
                }

        .ticket-append .body-append-form.ticket.line-view .cards-ticket-ui .card-name {
            display: flex;
            align-items: center;
            flex-direction: row;
        }

        .ticket-append .body-append-form.ticket .card-tix {
        }

        .ticket-append .body-append-form.ticket .group-icon {
            height: 100%;
            display: flex;
            grid-area: tix;
            align-items: center;
            color: var(--bs-dudu);
            flex-direction: column;
            justify-content: center;
            min-width: var(--px-32);
        }

            .ticket-append .body-append-form.ticket .group-icon span {
                grid-area: t
            }

            .ticket-append .body-append-form.ticket .group-icon .fa-duotone {
                grid-area: i
            }

            .ticket-append .body-append-form.ticket .group-icon .option-more-action-btn {
                padding: 0;
                z-index: 18;
                width: 100%;
                height: 100%;
                border: 0 !important;
                outline: 0 !important;
                position: absolute;
                top: -10px;
                border-radius: var(--px-12);
                right: -8px;
                color: var(--theme-mode-text);
            }

        .ticket-append .body-append-form.ticket.line-view .group-icon .option-more-action-btn {
            top: 0px;
        }

        .ticket-append .body-append-form.ticket .group-icon .option-more-action-btn:hover::after {
            top: 50%;
            transform: translateY(-50%);
            right: 0;
            content: '';
            border-radius: 4px;
            position: absolute;
            width: 100%;
            height: 80%;
            background: #00000028;
            z-index: 17;
        }

        .ticket-append .body-append-form.ticket .card-time {
            grid-area: time;
            margin-top: 4px;
        }

            .ticket-append .body-append-form.ticket .card-time p {
                color: var(--theme-mode-gray);
                white-space: nowrap;
                font: normal normal 500 var(--s-10);
            }

        .ticket-append .body-append-form.ticket .card-timer {
            width: 100%;
            display: grid;
            grid-area: dur;
            justify-items: end;
            align-items: center;
            white-space: nowrap;
            font: italic normal 500 var(--s-10);
            grid-template-columns: repeat(auto-fit, minmax(var(--px-36), 1fr));
            margin-top: 4px;
        }

            .ticket-append .body-append-form.ticket .card-timer i {
                margin-right: 1px;
                font-size: var(--px-14);
            }

            .ticket-append .body-append-form.ticket .card-timer .btn-inverse-danger,
            .ticket-append .body-append-form.ticket .card-timer .btn-inverse-danger {
                padding: 2px;
                border-radius: 4px;
            }

            .ticket-append .body-append-form.ticket .card-timer i.fa-circle-dollar {
                color: var(--bs-green);
                /* font-size: var(--px-18); */
            }

            .ticket-append .body-append-form.ticket .card-timer span .time {
                font: normal normal 700 var(--s-12);
            }

        .ticket-append .body-append-form.ticket .card-serv {
            /* height: 100%; */
            display: flex;
            overflow: hidden;
            grid-area: ser;
            align-items: flex-start;
            justify-content: start;
        }

            .ticket-append .body-append-form.ticket .card-serv p {
                text-overflow: ellipsis;
                overflow: hidden;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                word-break: break-all;
                margin: var(--px-10) 0 var(--px-10);
                color: var(--theme-mode-text);
                font: normal normal 600 var(--s-12);
            }

        .ticket-append .body-append-form.ticket .cards-tech {
            z-index: 16;
            width: 100%;
            height: 100%;
            display: flex;
            grid-area: tech;
            overflow: hidden;
            align-items: center;
            gap: var(--px-6);
            height: var(--px-32);
            justify-content: flex-start;
        }

            .ticket-append .body-append-form.ticket .cards-tech::before {
                position: absolute;
                content: '';
                left: 50%;
                width: calc(100% - var(--px-28));
                height: 1px;
                bottom: var( --px-48);
                transform: translateX(-50%);
                /* background-image: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.33), rgba(0, 0, 0, 0.33) 8px, transparent 0px, transparent 12px); */
            }

            .ticket-append .body-append-form.ticket .cards-tech::after {
                position: absolute;
                content: '';
                left: 4px;
                top: var(--px-12);
                width: 4px;
                height: var(--px-50);
                border-radius: 6px;
            }

        .ticket-append .body-append-form.ticket div.wait .cards-tech::after {
            background-color: var(--tix-wait);
        }

        .ticket-append .body-append-form.ticket div.inservice .cards-tech::after {
            background-color: var(--tix-inservice);
        }

        .ticket-append .body-append-form.ticket div.pending .cards-tech::after {
            background-color: var(--tix-done);
        }

        .ticket-append .body-append-form.ticket .cards-tech p {
            font: normal normal 700 var(--s-13);
            text-overflow: ellipsis;
            overflow: hidden;
            grid-column: 1 / 3;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            word-break: break-all;
        }

        .ticket-append .body-append-form.ticket .cards-tech button.action-operation-button-click {
            border: 0;
            outline: 0;
            padding: 0;
            height: 100%;
            display: flex;
            transition: all .3s;
            min-width: var(--px-24);
            align-items: center;
            justify-content: center;
        }

            .ticket-append .body-append-form.ticket .cards-tech button.action-operation-button-click:hover {
                width: var(--px-44);
                justify-content: center;
                background: var(--bs-gray-700);
            }

            .ticket-append .body-append-form.ticket .cards-tech button.action-operation-button-click.pending {
                pointer-events: none;
            }

            .ticket-append .body-append-form.ticket .cards-tech button.action-operation-button-click i {
                color: var(--tix-wait);
                font-size: var(--px-20);
            }

                .ticket-append .body-append-form.ticket .cards-tech button.action-operation-button-click i.fa-check-double,
                .ticket-append .body-append-form.ticket .cards-tech button.action-operation-button-click i.fa-check {
                    color: var(--bs-danger);
                }

                .ticket-append .body-append-form.ticket .cards-tech button.action-operation-button-click i.fa-play {
                    color: var(--tix-inservice);
                }

        .ticket-append .body-append-form.ticket .cards-seat {
            z-index: 10;
            display: flex;
            cursor: pointer;
            padding: 1px 4px;
            position: relative;
            width: var(--px-55);
            height: var(--px-30);
            align-items: center;
            border-radius: var(--px-4);
            background: var(--bs-main-100) !important;
            justify-content: space-around;
            color: var(--theme-mode-text);
        }

            .ticket-append .body-append-form.ticket .cards-seat:hover {
                background: var(--bs-main-800) !important;
            }

            .ticket-append .body-append-form.ticket .cards-seat p {
                text-transform: capitalize;
                font: normal normal 700 var(--s-11);
            }

                .ticket-append .body-append-form.ticket .cards-seat p span {
                    margin-left: 4px;
                    font: normal normal 700 var(--s-11);
                    color: var(--bs-main);
                }

                .ticket-append .body-append-form.ticket .cards-seat p i {
                    font-size: var(--px-18);
                    color: var(--bs-blue);
                }

        /* Ticket group */
        .ticket-append .body-append-form.ticket .cards-ticket-ui.group-parent {
            height: auto;
            padding: 0px;
            display: flex;
            position: relative;
            height: max-content;
            flex-direction: column;
            justify-content: flex-end;
            min-height: var(--h-tix);
            max-height: var(--h-tix);
            justify-content: flex-start;
            background-color: transparent;
            color: var(--theme-mode-text-white);
        }

            .ticket-append .body-append-form.ticket .cards-ticket-ui.group-parent div.mouse_scroll {
                display: none;
            }

            .ticket-append .body-append-form.ticket .cards-ticket-ui.group-parent .card-group {
                display: flex;
                width: inherit;
                padding: 4px 8px;
                flex-direction: row;
                align-items: center;
                height: var(--px-32);
                border-radius: 4px 4px 0 0;
                justify-content: space-between;
            }

            .ticket-append .body-append-form.ticket .cards-ticket-ui.group-parent.ticket-group .card-group {
                top: 0;
                z-index: 1;
                /* position: sticky; */
                background-color: var(--bs-pink);
            }

            .ticket-append .body-append-form.ticket .cards-ticket-ui.group-parent.ticket-group .card-group,
            .ticket-append .body-append-form.ticket .cards-ticket-ui.group-parent.ticket-group.opening {
                background-color: var(--bs-pink);
            }

            .ticket-append .body-append-form.ticket .cards-ticket-ui.group-parent.ticket-group .suggestion-scroll {
                display: none;
            }

            .ticket-append .body-append-form.ticket .cards-ticket-ui.group-parent.ticket-group.opening .suggestion-scroll {
                bottom: -3px;
                z-index: 1;
                width: 100%;
                height: 40px;
                padding: 4px;
                display: flex;
                position: absolute;
                align-items: center;
                justify-content: center;
                color: var(--theme-mode-text-dark);
                background: linear-gradient(to top,rgb(206,206,206) 0%,rgba(255,255,255,.4) 95%,rgba(255,255,255,0) 100%);
            }

            .ticket-append .body-append-form.ticket .cards-ticket-ui.group-parent.ticket-combine .card-group,
            .ticket-append .body-append-form.ticket .cards-ticket-ui.group-parent.ticket-combine.opening {
                background-color: var(--bs-green);
            }

            .ticket-append .body-append-form.ticket .cards-ticket-ui.group-parent .card-group .name-group {
                display: flex;
                gap: var(--px-4);
                align-items: center;
                text-transform: capitalize;
                font: normal normal 600 var(--s-12);
            }

                .ticket-append .body-append-form.ticket .cards-ticket-ui.group-parent .card-group .name-group p {
                    max-width: var(--px-88);
                }

                .ticket-append .body-append-form.ticket .cards-ticket-ui.group-parent .card-group .name-group i {
                    color: var(--bs-black)
                }

                .ticket-append .body-append-form.ticket .cards-ticket-ui.group-parent .card-group .name-group span {
                    display: flex;
                    margin-left: 4px;
                    border-radius: 4px;
                    align-items: center;
                    width: var(--px-20);
                    height: var(--px-20);
                    justify-content: center;
                    background: var(--bs-white);
                    color: var(--theme-mode-btn-text);
                    font: normal normal 700 var(--s-11);
                }

            .ticket-append .body-append-form.ticket .cards-ticket-ui.group-parent .card-group .info-group {
                gap: 5px;
                display: flex;
                align-items: center;
                flex-direction: row;
            }

            .ticket-append .body-append-form.ticket .cards-ticket-ui.group-parent button.btn-collapse-group {
                border: 0;
                padding: 0;
                overflow: hidden;
                border-radius: 4px;
                width: var(--px-26);
                height: var(--px-26);
            }

                .ticket-append .body-append-form.ticket .cards-ticket-ui.group-parent button.btn-collapse-group i {
                    font-weight: 800;
                    transition: all .2s;
                    font-size: var(--px-20);
                    color: var(--theme-mode-text-white);
                }

            .ticket-append .body-append-form.ticket .cards-ticket-ui.group-parent.opening {
                overflow: hidden;
                overflow-y: auto;
                user-select: all;
                max-height: max-content;
                touch-action: manipulation;
            }

        .ticket-append .body-append-form.ticket.line-view .cards-ticket-ui.group-parent.opening {
            /* max-height: initial; */
            overflow: unset;
        }

        .ticket-append .body-append-form.ticket .cards-ticket-ui.group-parent.opening::-webkit-scrollbar {
            max-width: 0;
            background-color: unset;
        }

        .ticket-append .body-append-form.ticket .cards-ticket-ui.group-parent.opening div.mouse_scroll {
            display: flex;
        }

        .ticket-append .body-append-form.ticket.line-view .cards-ticket-ui.group-parent.opening div.mouse_scroll {
            display: none;
        }

        .ticket-append .body-append-form.ticket .cards-ticket-ui.group-parent.opening .cards-ticket-ui {
            margin-top: var(--px-5);
        }

        .ticket-append .body-append-form.ticket:not(.line-view) .cards-ticket-ui.group-parent.opening .cards-ticket-ui {
            height: max-content;
            /* margin-top: var(--px-5); */
            padding-top: var(--px-8);
            user-select: all;
            touch-action: manipulation;
            /* min-height: var(--px-90); */
        }

        .ticket-append .body-append-form.ticket .cards-ticket-ui.group-parent .cards-ticket-ui {
            display: none;
        }

        .ticket-append .body-append-form.ticket:not(.line-view) .cards-ticket-ui.group-parent .cards-ticket-ui {
            padding-top: 0;
            height: var(--px-122);
        }

        /*.ticket-append .body-append-form.ticket:not(.line-view) .cards-ticket-ui.group-parent .cards-ticket-ui.walkin::before {
                border-radius: 0 0 0 4px;
                background-image: radial-gradient( circle at -1% var(--px-52), transparent var(--radius-tix), var(--tix-w-color) 0);
            }

            .ticket-append .body-append-form.ticket:not(.line-view) .cards-ticket-ui.group-parent .cards-ticket-ui.walkin::after {
                border-radius: 0 0 4px 0;
                background-image: radial-gradient( circle at 100% var(--px-52), transparent var(--radius-tix), var(--tix-w-color) 0);
            }

            .ticket-append .body-append-form.ticket:not(.line-view) .cards-ticket-ui.group-parent .cards-ticket-ui.appointment::before {
                border-radius: 0 0 0 4px;
                background-image: radial-gradient( circle at -1% var(--px-52), transparent var(--radius-tix), var(--tix-a-color) 0);
            }

            .ticket-append .body-append-form.ticket:not(.line-view) .cards-ticket-ui.group-parent .cards-ticket-ui.appointment::after {
                border-radius: 0 0 4px 0;
                background-image: radial-gradient( circle at 100% var(--px-52), transparent var(--radius-tix), var(--tix-a-color) 0);
            }

            .ticket-append .body-append-form.ticket:not(.line-view) .cards-ticket-ui.group-parent .cards-ticket-ui.inservice::before {
                border-radius: 0 0 0 4px;
                background-image: radial-gradient( circle at -1% var(--px-52), transparent var(--radius-tix), var(--tix-i-color) 0);
            }

            .ticket-append .body-append-form.ticket:not(.line-view) .cards-ticket-ui.group-parent .cards-ticket-ui.inservice::after {
                border-radius: 0 0 4px 0;
                background-image: radial-gradient( circle at 100% var(--px-52), transparent var(--radius-tix), var(--tix-i-color) 0);
            }

            .ticket-append .body-append-form.ticket:not(.line-view) .cards-ticket-ui.group-parent .cards-ticket-ui.pending::before {
                border-radius: 0 0 0 4px;
                background-image: radial-gradient( circle at -1% var(--px-52), transparent var(--radius-tix), var(--tix-d-color) 0);
            }

            .ticket-append .body-append-form.ticket:not(.line-view) .cards-ticket-ui.group-parent .cards-ticket-ui.pending::after {
                border-radius: 0 0 4px 0;
                background-image: radial-gradient( circle at 100% var(--px-52), transparent var(--radius-tix), var(--tix-d-color) 0);
            }*/

        /*.ticket-append .body-append-form.ticket.line-view .cards-ticket-ui.group-parent .cards-ticket-ui::before {
            border-start-start-radius: 0;
            border-start-end-radius: 0;
        }

        .ticket-append .body-append-form.ticket.line-view .cards-ticket-ui.group-parent .cards-ticket-ui::after {
            border-start-start-radius: 0;
            border-start-end-radius: 0;
        }

        .ticket-append .body-append-form.ticket:not(.line-view) .cards-ticket-ui.group-parent .cards-ticket-ui::before {
            border-radius: 0 0 0 4px;
            background-image: radial-gradient( circle at -1% var(--px-52), transparent var(--radius-tix), var(--tix-a-color) 0);
        }

        .ticket-append .body-append-form.ticket:not(.line-view) .cards-ticket-ui.group-parent .cards-ticket-ui::after {
            border-radius: 0 0 4px 0;
            background-image: radial-gradient( circle at 100% var(--px-52), transparent var(--radius-tix), var(--tix-a-color) 0);
        }*/

        .ticket-append .body-append-form.ticket:not(.line-view) .cards-ticket-ui.group-parent.opening .cards-ticket-ui:first-of-type {
            margin-top: 0;
        }

        .ticket-append .body-append-form.ticket .cards-ticket-ui.group-parent::before,
        .ticket-append .body-append-form.ticket .cards-ticket-ui.group-parent::after,
        .ticket-append .body-append-form.ticket:not(.line-view) .cards-ticket-ui.group-parent .cards-ticket-ui .card-index,
        .ticket-append .body-append-form.ticket:not(.line-view) .cards-ticket-ui.group-parent .cards-ticket-ui .card-name,
        .ticket-append .body-append-form.ticket:not(.line-view) .cards-ticket-ui.group-parent .cards-ticket-ui .group-icon,
        .ticket-append .body-append-form.ticket .cards-ticket-ui.group-parent.opening .cards-ticket-ui .card-name p.member {
            display: none;
        }

        .ticket-append .body-append-form.ticket .cards-ticket-ui.group-parent .cards-ticket-ui.original-tix,
        .ticket-append .body-append-form.ticket .cards-ticket-ui.group-parent.opening .cards-ticket-ui,
        .ticket-append .body-append-form.ticket .cards-ticket-ui.group-parent.opening .cards-ticket-ui .card-index,
        .ticket-append .body-append-form.ticket .cards-ticket-ui.group-parent.opening .cards-ticket-ui .card-name,
        .ticket-append .body-append-form.ticket .cards-ticket-ui.group-parent.opening .cards-ticket-ui .group-icon {
            display: grid;
        }

        .ticket-append .body-append-form.ticket.line-view .cards-ticket-ui.group-parent {
            padding: 0;
            min-height: var(--px-100);
            0);
            */
            /* max-height: var(--px-100); */
        }

            .ticket-append .body-append-form.ticket.line-view .cards-ticket-ui.group-parent.opening {
                min-height: max-content;
            }

        .ticket-append .body-append-form.ticket .cards-ticket-ui.group-parent.ticket-combine {
            background: var(--bs-orange);
        }

        .ticket-append .body-append-form.ticket .cards-ticket-ui.group-parent.ticket-group {
            background: var(--bs-pink);
        }

        .ticket-append .body-append-form.tech-append[tab="ready"] .tech-detail.tech-busy,
        .ticket-append .body-append-form.tech-append[tab="clockin"] .tech-detail.tech-clockout,
        .ticket-append .body-append-form.tech-append[tab="busy"] .tech-detail.tech-ready,
        .ticket-append .body-append-form.tech-append[tab="clockout"] .tech-detail.tech-clockin,
        .ticket-append .body-append-form.ticket[tab="walkin"] .cards-ticket-ui.appointment,
        .ticket-append .body-append-form.ticket[tab="appointment"] .cards-ticket-ui.walkin {
            display: none !important;
        }

        .ticket-append .body-append-form.ticket .cards-ticket-ui.group-parent.ticket-combine.opening .cards-ticket-ui {
            display: none;
        }

            .ticket-append .body-append-form.ticket .cards-ticket-ui.group-parent.ticket-combine.opening .cards-ticket-ui.original-tix {
                display: grid;
            }

.salon-center-page-body.off-inservice {
    grid-template-areas:
        "t w w"
        "t w w"
        "t p p";
}

.salon-center-page-body.off-tech {
    grid-template-areas:
        "w i p"
        "w i p"
        "w i p";
}

.salon-center-page-body.off-wait {
    grid-template-areas:
        "t t p"
        "t t p"
        "t t p";
}


    .salon-center-page-body.off-tech .column-gap.tech-form,
    .salon-center-page-body.off-wait .column-gap.wait-form,
    .salon-center-page-body.off-wait .column-gap.inservice-form,
    .salon-center-page-body.off-inservice .column-gap.inservice-form {
        display: none;
    }

.add-manual-turn-form {
    margin: 0 auto;
    display: flex;
    gap: var(--px-10);
    width: 100%;
    padding: var(--px-22);
    flex-direction: column;
    min-height: var(--px-350);
    border-radius: var(--px-12);
    background: var(--theme-mode-bs-300);
}

.add-manual-turn {
    width: 100%;
    height: 100%;
    display: flex;
    gap: var(--px-20);
    padding: var(--px-10);
    flex-direction: column;
}

    .add-manual-turn .bonus-turn {
        width: 100%;
        display: flex;
        align-items: center;
        flex-direction: row;
        height: var(--px-50);
        justify-content: space-between;
    }

        .add-manual-turn .bonus-turn p {
            color: var(--theme-mode-text);
            font: normal normal 700 var(--s-15);
        }

        .add-manual-turn .bonus-turn .btn-bonus-turn {
            background: var(--bs-blue);
            color: var(--theme-mode-text-white);
        }

            .add-manual-turn .bonus-turn .btn-bonus-turn i {
            }

    .add-manual-turn .add-turns {
        gap: 12px;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding-top: var(--px-20);
        border-top: 2px solid var(--theme-mode-border);
    }

        .add-manual-turn .add-turns p {
            color: var(--theme-mode-text);
            font: normal normal 700 var(--s-15);
        }

        .add-manual-turn .add-turns input {
            border-radius: 4px;
            height: var(--px-44);
            padding: var(--px-14);
            border: 1px solid var(--theme-mode-border);
        }

            .add-manual-turn .add-turns input:focus {
                border: 1px solid var(--bs-blue);
            }

        .add-manual-turn .add-turns .turn-offers {
            display: grid;
            align-items: center;
            grid-gap: var(--px-8);
            grid-template-columns: repeat(3, 1fr);
        }

            .add-manual-turn .add-turns .turn-offers .btn-adds-turn {
                display: flex;
                align-items: center;
                height: var(--px-44);
                justify-content: center;
                color: var(--theme-mode-text);
                font: normal normal 700 var(--s-15);
                background: var(--theme-mode-bs-100);
                border: 1px solid var(--theme-mode-border);
            }

        .add-manual-turn .add-turns .confirm-add-turns {
            width: 50%;
            display: flex;
            align-items: center;
            height: var(--px-44);
            justify-content: center;
            background: var(--bs-blue);
            color: var(--theme-mode-text-white);
            font: normal normal 700 var(--s-15);
            border: 1px solid var(--theme-mode-border);
        }

        .add-manual-turn .add-turns .cancel {
            width: 50%;
            display: flex;
            align-items: center;
            height: var(--px-44);
            justify-content: center;
            color: var(--theme-mode-text);
            font: normal normal 700 var(--s-15);
        }

        .add-manual-turn .add-turns .btn-group-manual {
            display: flex;
            gap: var(--px-5);
        }

.form-type-input-status {
    display: flex;
    gap: var(--px-10);
    width: var(--px-300);
    height: var(--px-200);
    padding: var(--px-14) var(--px-20);
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-around;
}

    .form-type-input-status p {
        font: normal normal 700 var(--s-16);
    }

    .form-type-input-status input {
        width: 100%;
        border-radius: 4px;
        height: var(--px-32);
        border: 1px solid var(--bs-blue);
    }

    .form-type-input-status button {
        width: 100%;
        border-radius: 4px;
        height: auto;
        background: var(--bs-blue);
    }

.dropdown-salon-center.show {
    display: flex;
    padding: 0;
    flex-direction: column;
}

.dropdown-salon-center .btn-action-dropdown-salon {
    border: 0;
    outline: 0;
    display: grid;
    align-items: center;
    height: var(--px-60);
    width: var(--px-240);
    max-width: var(--px-240);
    padding: var(--px-8) var(--px-16);
    color: var(--theme-mode-text);
    grid-template-columns: var(--px-32) 1fr;
    justify-items: start;
    justify-content: space-between;
    align-content: space-around;
}

    .dropdown-salon-center .btn-action-dropdown-salon p {
        display: flex;
        text-align: start;
        font: normal normal 500 var(--s-14);
    }

    .dropdown-salon-center .btn-action-dropdown-salon i {
        color: var(--bs-blue);
        font-size: var(--px-16);
    }

        .dropdown-salon-center .btn-action-dropdown-salon i.fa-play {
            color: var(--tix-inservice)
        }

        .dropdown-salon-center .btn-action-dropdown-salon i.fa-timer {
            color: var(--tix-checkin)
        }

        .dropdown-salon-center .btn-action-dropdown-salon i.fa-message-lines {
            color: var(--bs-info)
        }

        .dropdown-salon-center .btn-action-dropdown-salon i.fa-trash {
            color: var(--bs-red);
        }

        .dropdown-salon-center .btn-action-dropdown-salon i.fa-plus {
            color: var(--bs-blue);
        }

    .dropdown-salon-center .btn-action-dropdown-salon.delete.leave-group i {
        color: var(--bs-orange);
    }

    .dropdown-salon-center .btn-action-dropdown-salon.delete i {
        color: var(--bs-red);
    }

    .dropdown-salon-center .btn-action-dropdown-salon.status i {
        color: var(--bs-info)
    }

    .dropdown-salon-center .btn-action-dropdown-salon.status.child i {
        color: var(--theme-mode-text)
    }

    .dropdown-salon-center .btn-action-dropdown-salon.status.selected i {
        color: var(--bs-info)
    }

    .dropdown-salon-center .btn-action-dropdown-salon.notyCus i {
        color: var(--bs-green);
    }

    .dropdown-salon-center .btn-action-dropdown-salon.selected {
        color: var(--bs-blue);
    }

/* Today appointments*/
.settings-heading {
    display: flex;
}

    .settings-heading .quantity {
        display: flex;
        margin-left: 5px;
        border-radius: 4px;
        align-items: center;
        width: var(--px-20);
        height: var(--px-20);
        justify-content: center;
        background: var(--bs-blue);
        color: var(--theme-mode-text-white);
        font: normal normal 700 var(--s-11);
    }

.append-all-appointment-today {
    width: 100%;
    display: flex;
    overflow: auto;
    max-height: 86%;
    flex-direction: column;
}

    .append-all-appointment-today .time-slot-appointment-today {
        all: unset;
        display: flex;
        cursor: pointer;
        overflow: hidden;
        position: relative;
        align-items: center;
        justify-content: start;
        min-height: var(--px-44);
        background: var(--theme-mode-bs-100);
    }

        .append-all-appointment-today .time-slot-appointment-today p {
            display: flex;
            padding-left: 6px;
            border-radius: 6px;
            align-items: center;
            margin: var(--px-4);
            width: var(--px-100);
            justify-content: flex-start;
            min-height: var(--px-24);
            font: normal normal 500 var(--s-16);
        }

        .append-all-appointment-today .time-slot-appointment-today span {
            display: flex;
            border-radius: 6px;
            align-items: center;
            margin: var(--px-4);
            width: var(--px-100);
            justify-content: center;
            min-height: var(--px-20);
            font: normal normal 700 var(--s-13);
        }

        .append-all-appointment-today .time-slot-appointment-today .fa-regular {
            top: 40%;
            z-index: 1;
            display: flex;
            position: absolute;
            right: var(--px-20);
            border-radius: 6px;
            align-items: center;
            margin: var(--px-4);
            width: var(--px-32);
            height: var(--px-32);
            justify-content: center;
            min-height: var(--px-20);
            transform: translateY(-50%);
        }

        .append-all-appointment-today .time-slot-appointment-today span {
            color: #FFF;
            width: var(--px-26);
            background: var(--bs-blue);
        }

    .append-all-appointment-today .ticket-today {
        display: grid;
        position: relative;
        align-items: center;
        min-height: var(--px-55);
        padding-left: var(--px-10);
        background: var(--theme-mode-bs-300);
        grid-template-columns: var(--px-120) 1fr;
        border-top: 1px solid var(--theme-mode-border);
    }

    .append-all-appointment-today .ticket-time {
        flex: 1;
        max-width: var(--px-150);
    }

        .append-all-appointment-today .ticket-time p {
            font: normal normal 600 var(--s-12);
        }

    .append-all-appointment-today .color-tix {
        left: 0;
        position: absolute;
        height: 100%;
        width: 4px;
        background: var(--bs-blue);
    }

    .append-all-appointment-today .ticket-status {
        flex: 1;
        display: flex;
        align-items: center;
        max-width: var(--px-80);
        justify-content: flex-start;
    }

        .append-all-appointment-today .ticket-status .status {
            padding: 2px;
            display: flex;
            cursor: pointer;
            align-items: center;
            width: var(--px-20);
            border-radius: 100%;
            height: var(--px-20);
            justify-content: center;
        }

            .append-all-appointment-today .ticket-status .status:hover {
                padding: 4px;
                opacity: .7;
            }

        .append-all-appointment-today .ticket-status i {
            font-size: var(--px-15);
            color: var(--bs-gray-600);
        }

    .append-all-appointment-today .presentation {
        display: flex;
        overflow: hidden;
        align-items: center;
        height: var(--px-33);
        padding: 4px var(--px-14);
        border-radius: var(--px-15);
        font: normal normal 500 var(--s-15);
    }

        .append-all-appointment-today .presentation.tickets-is-showing,
        .append-all-appointment-today .presentation.group-is-showing {
            outline: 1px solid var(--bs-blue);
            box-shadow: 0px 1px 10px #5e50f9c9;
        }

            .append-all-appointment-today .presentation.tickets-is-showing::after,
            .append-all-appointment-today .presentation.group-is-showing::after {
                top: 0;
                left: 0;
                content: '';
                z-index: 15;
                width: 100%;
                height: 100%;
                opacity: .6;
                border-radius: 0;
                border-radius: 0;
                position: absolute;
                mix-blend-mode: multiply;
                background: var(--theme-mode-calendar-solid);
            }

        .append-all-appointment-today .presentation .ticket-name {
            flex: 1;
            text-transform: capitalize;
        }

        .append-all-appointment-today .presentation .ticket-services {
            flex: 1;
            overflow: hidden;
            background: #C2DBE9;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            word-break: break-all;
            text-overflow: ellipsis;
            padding: 0 var(--px-14);
            border-radius: var(--px-14);
            -webkit-box-orient: vertical;
        }

        .append-all-appointment-today .presentation .ticket-techs {
            flex: 1;
            z-index: 20;
            display: flex;
            overflow-x: auto;
            overflow: hidden;
        }

        .append-all-appointment-today .presentation p {
            font: normal normal 600 var(--s-14);
            color: var(--theme-mode-text);
        }

        .append-all-appointment-today .presentation .ticket-services p {
            color: var(--theme-mode-text-dark);
            font: normal normal 700 var(--s-12);
        }


.avatar-tech {
    flex: 1;
    display: flex;
    overflow: auto;
    gap: var(--px-4);
    position: relative;
    align-items: center;
    flex-direction: row;
}

    .avatar-tech::-webkit-scrollbar {
        max-height: 3px;
        background-color: unset;
    }

    .avatar-tech .techs-photo {
        display: flex;
        position: relative;
        align-items: center;
        flex-direction: row-reverse;
    }

        .avatar-tech .techs-photo:first-of-type {
            margin: 0;
        }

        .avatar-tech .techs-photo:hover {
            z-index: 11 !important;
        }

        .avatar-tech .techs-photo span,
        .avatar-tech .techs-photo img {
            width: auto;
            display: flex;
            padding: 6px;
            overflow: hidden;
            background: white;
            white-space: nowrap;
            align-items: center;
            height: var(--px-30);
            min-width: var(--px-30);
            max-width: var(--px-80);
            text-transform: capitalize;
            border-radius: var(--px-4);
            color: var(--theme-mode-text-white);
            font: normal normal 700 var(--s-11);
            border: 1px solid var(--bs-gray-500);
        }

/*popup change tech*/

#static-change-tech-modal {
    margin: auto;
}

    #static-change-tech-modal .modal-dialog {
        display: flex;
        max-width: 70vw;
        border-radius: 8px;
        flex-direction: column;
        margin: var(--px-40) auto 0;
        background: var(--theme-mode-bs-300);
    }

    #static-change-tech-modal .modal-content {
        border: 0;
        height: 88vh;
        display: flex;
        flex-wrap: nowrap;
        padding-bottom: 0;
        background: inherit;
        flex-direction: column;
    }

    #static-change-tech-modal .area-to-change-tech {
        height: 100%;
        display: flex;
        overflow: hidden;
        max-height: 88vh;
        border-radius: 4px;
        flex-direction: column;
        background: var(--theme-mode-bs-300);
    }

        #static-change-tech-modal .area-to-change-tech .header-change-tech {
            display: flex;
            align-items: start;
            padding: var(--px-16);
            flex-direction: column;
            border-bottom: 1px solid var(--theme-mode-border);
        }

            #static-change-tech-modal .area-to-change-tech .header-change-tech .title {
                font: normal normal 700 var(--s-22);
            }

            #static-change-tech-modal .area-to-change-tech .header-change-tech .text {
                font: italic normal 500 var(--s-16);
            }

        #static-change-tech-modal .area-to-change-tech .form-list-tech-append {
            padding-top: var(--px-90);
        }

/* Turn tracker */
#turn-tracker-page-body-id {
    width: 100%;
    height: 100%;
    display: flex;
    overflow: hidden;
    position: relative;
    flex-direction: row;
}

    #turn-tracker-page-body-id .modal-body-tracker,
    #turn-tracker-page-body-id .modal-body-ticket {
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    #turn-tracker-page-body-id .modal-body-ticket {
        max-width: var(--px-500);
        border-left: 1px solid var(--theme-mode-border);
    }

    #turn-tracker-page-body-id .ticket-body.ticket-append {
        width: 100%;
        height: 100%;
        display: flex;
        overflow: auto;
        flex-direction: column;
    }

        #turn-tracker-page-body-id .ticket-body.ticket-append[tab="wait"] .append-all-appointment-today,
        #turn-tracker-page-body-id .ticket-body.ticket-append[tab="appointment"] .body-append-form.ticket {
            display: none;
        }

    #turn-tracker-page-body-id[collapse="closed"] .modal-body-ticket {
        transition: all .28s;
        max-width: var(--px-25);
    }

        #turn-tracker-page-body-id[collapse="closed"] .modal-body-ticket .ticket-heading,
        #turn-tracker-page-body-id[collapse="closed"] #ticket-body-append-tracker,
        #turn-tracker-page-body-id[collapse="closed"] .modal-body-ticket .area-action-tab-option {
            display: none;
        }

.handle-left-side-page .header-form-page {
    flex: 1;
    display: flex;
    align-items: center;
    flex-direction: row;
    padding: var(--px-24);
    max-height: var(--px-80);
}

    .handle-left-side-page .header-form-page .modal-title.h4 {
        display: flex;
        flex-direction: row;
        font: normal normal 700 var(--s-24);
        color: var(--theme-mode-text);
    }

    .handle-left-side-page .header-form-page .left-header,
    .handle-left-side-page .header-form-page .right-header {
        flex: 1;
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .handle-left-side-page .header-form-page .right-header {
        justify-content: flex-end;
        align-items: self-end;
    }

    .handle-left-side-page .header-form-page .form-search-client {
        width: 100%;
        display: flex;
        border-radius: 4px;
        align-items: center;
        flex-direction: row;
        height: var(--px-48);
        border: 1px solid var(--theme-mode-border);
    }

        .handle-left-side-page .header-form-page .form-search-client .fa-regular {
            display: flex;
            height: var(--px-48);
            width: var(--px-48);
            background: inherit;
            align-items: center;
            justify-content: center;
            border-radius: 4px 0 0 4px;
            color: var(--theme-mode-text);
            border: 1px solid var(--theme-mode-border);
        }

        .handle-left-side-page .header-form-page .form-search-client input {
            border: none;
            padding: var(--px-16);
            font: normal normal 600 var(--s-13);
            color: var(--theme-mode-text);
            height: 100%;
            width: 100%;
            background: inherit;
            outline: none;
            background: var(--theme-mode-bs-200);
            border-radius: 0 4px 4px 0;
        }

    .handle-left-side-page .header-form-page .right-header {
        justify-content: flex-end;
    }

        .handle-left-side-page .header-form-page .right-header button {
            width: auto;
            display: flex;
            gap: var(--px-10);
            align-items: center;
            height: var(--px-48);
            justify-content: center;
            margin-left: var(--px-10);
            background: var(--bs-blue);
            color: var(--theme-mode-text-white);
        }

            .handle-left-side-page .header-form-page .right-header button i {
                font-size: var(--px-20)
            }

#turn-tracker-page-body-id .body-tracker {
    gap: 0;
    display: flex;
    overflow: auto;
    max-height: 100%;
    flex-direction: column;
    margin-top: var(--px-10);
    padding: 0 var(--px-10);
}

    #turn-tracker-page-body-id .body-tracker .row-tracker {
        width: 100%;
        cursor: grab;
        display: grid;
        overflow: hidden;
        align-items: center;
        min-height: var(--px-88);
        max-height: var(--px-88);
        transition: height .2s ease-in-out;
        grid-template-columns: var(--px-200) 1fr;
        border-bottom: 1px solid var(--theme-mode-border);
        border-left: 4px solid var(--theme-mode-calendar-light);
    }

        #turn-tracker-page-body-id .body-tracker .row-tracker.clocked-out {
            opacity: .5
        }

        #turn-tracker-page-body-id .body-tracker .row-tracker:last-of-type {
            border-bottom: 1px solid var(--theme-mode-border);
        }

        #turn-tracker-page-body-id .body-tracker .row-tracker.ghostClass {
            outline: 2px solid var(--bs-blue);
            backdrop-filter: brightness(80%)
        }

        #turn-tracker-page-body-id .body-tracker .row-tracker.default {
            top: 0;
            z-index: 3;
            position: sticky;
            min-height: var(--px-44);
            max-height: var(--px-44);
            background: var(--theme-mode-bs-400);
            border-top: 1px solid var(--theme-mode-border);
        }

            #turn-tracker-page-body-id .body-tracker .row-tracker.default .row-start-tracker {
                border: unset;
                background: unset;
            }

            #turn-tracker-page-body-id .body-tracker .row-tracker.default .row-end-tracker {
                overflow: hidden;
                background: linear-gradient(90deg, #a019191a 0, var(--theme-mode-border) 1px, #0000 1px, #0000)
            }

            #turn-tracker-page-body-id .body-tracker .row-tracker.default .box-ticket--tracker {
                border: unset;
                box-shadow: unset;
                background: unset;
                align-items: center;
                justify-content: center;
            }

                #turn-tracker-page-body-id .body-tracker .row-tracker.default .box-ticket--tracker p {
                    color: var(--bs-blue);
                    font: normal normal 700 var(--s-20);
                }


    #turn-tracker-page-body-id .body-tracker .row-start-tracker {
        height: 100%;
        display: grid;
        position: relative;
        align-items: center;
        grid-gap: var(--px-8);
        padding: 0 var(--px-10);
        background: var(--theme-mode-bs-300);
        grid-template-columns: var(--px-50) 1fr;
        border-right: 1px solid var(--theme-mode-border);
    }


    #turn-tracker-page-body-id .body-tracker .row-tracker.busy .row-start-tracker::after {
        top: 0;
        left: 0;
        z-index: 1;
        opacity: 1;
        color: #FFF;
        width: 100%;
        height: 100%;
        display: flex;
        content: 'BUSY';
        border-radius: 0;
        border-radius: 0;
        align-items: end;
        position: absolute;
        justify-content: start;
        mix-blend-mode: multiply;
        padding: 4px var(--px-12);
        background: var(--bs-gray-600);
        font: normal normal 700 var(--s-15);
    }

    #turn-tracker-page-body-id .body-tracker .row-tracker.busy .row-start-tracker .techs-photo p {
        opacity: 0;
    }

    #turn-tracker-page-body-id .body-tracker .row-tracker .next-turn-available {
        right: 0;
        bottom: 0;
        width: 60%;
        display: flex;
        position: absolute;
        align-items: center;
        height: var(--px-20);
        padding: var(--px-10);
        justify-content: center;
        background: var(--bs-danger);
        animation-name: fa-beat-fade;
        color: var(--theme-mode-text-white);
        font: normal normal 700 var(--s-16);
    }

        #turn-tracker-page-body-id .body-tracker .row-tracker .next-turn-available p {
            margin: 0 var(--px-8);
        }

#table-turn-logs {
    display: flex;
    overflow: auto;
    flex-direction: column;
    background: white;
    );
}

    #table-turn-logs thead {
        z-index: 10;
        position: sticky;
        top: var(--px-70);
        background: var(--theme-mode-bs-300);
    }

    #table-turn-logs .filter-tech-append-turn-logs {
        top: 0;
        left: 0;
        z-index: 10;
        padding: 10px;
        position: sticky;
        overflow-x: auto;
        overflow-y: hidden;
        min-height: var(--px-72);
        border-radius: var(--px-12);
        background: var(--bs-main-50);
        border: 1px solid var(--bs-main-300);
    }

.load-photo-tech {
    display: flex;
    gap: var(--px-10);
    align-items: center;
    height: var(--px-70);
}

    .load-photo-tech .techs-photo {
        display: flex;
        cursor: pointer;
        max-height: 100%;
        position: relative;
        transition: all .2s;
        align-items: center;
        flex-direction: column;
        max-width: var(--px-44);
        min-width: var(--px-44);
        min-height: var(--px-44);
        outline: 2px solid transparent;
    }

        .load-photo-tech .techs-photo.selected {
            border-radius: 100%;
            transform: scale(1.2);
            margin: 0 var(--px-12);
            outline: 2px solid var(--bs-blue);
        }

        .load-photo-tech .techs-photo .index-tech {
            top: -4px;
            left: -6px;
            display: flex;
            position: absolute;
            width: var(--px-20);
            align-items: center;
            height: var(--px-20);
            justify-content: center;
            border-radius: var(--px-20);
            font: normal normal 900 var(--s-10);
            background: var(--theme-mode-border);
        }

        .load-photo-tech .techs-photo span,
        .load-photo-tech .techs-photo img {
            width: 100%;
            display: flex;
            overflow: hidden;
            align-items: center;
            height: var(--px-44);
            justify-content: center;
            text-transform: uppercase;
            border-radius: var(--px-50);
            font: normal normal 500 var(--s-22);
            color: var(--theme-mode-text-white);
            border: 1px solid var(--theme-mode-border);
        }

        .load-photo-tech .techs-photo p {
            white-space: nowrap;
            color: var(--bs-blue);
            font: normal normal 700 var(--s-10);
        }

#turn-tracker-page-body-id .body-tracker .row-start-tracker .tech-turns {
    width: 100%;
    height: 100%;
    padding: 4px;
    display: grid;
    grid-gap: 8px;
    overflow: auto;
    align-items: center;
    align-content: center;
    grid-auto-flow: column;
    grid-template-columns: 1fr max-content;
    grid-template-rows: min-content min-content min-content;
}

#turn-tracker-page-body-id .body-tracker .row-start-tracker .grid-area {
    height: 100%;
    display: grid;
    grid-gap: 4px;
    align-items: center;
    color: var(--theme-mode-text);
    grid-template-columns: min-content 1fr;
}

    #turn-tracker-page-body-id .body-tracker .row-start-tracker .grid-area.name,
    #turn-tracker-page-body-id .body-tracker .row-start-tracker .grid-area.service {
        grid-column: span 2;
    }

    #turn-tracker-page-body-id .body-tracker .row-start-tracker .grid-area p {
        color: var(--theme-mode-text);
        font: normal normal 600 var(--s-12);
    }

        #turn-tracker-page-body-id .body-tracker .row-start-tracker .grid-area p.name {
            grid-column: span 2;
            color: var(--theme-mode-text);
            font: normal normal 600 var(--s-14);
        }

    #turn-tracker-page-body-id .body-tracker .row-start-tracker .grid-area span,
    #turn-tracker-page-body-id .body-tracker .row-start-tracker .grid-area.bold span {
        color: var(--theme-mode-text);
        font: normal normal 700 var(--s-12);
    }

    #turn-tracker-page-body-id .body-tracker .row-start-tracker .grid-area.service span {
        color: var(--bs-green);
    }

    #turn-tracker-page-body-id .body-tracker .row-start-tracker .grid-area.turn span {
        color: var(--bs-danger);
    }

#turn-tracker-page-body-id .body-tracker .row-end-tracker {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    min-height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    flex-direction: row;
    align-items: center;
    line-height: var(--px-120);
    justify-content: flex-start;
    background-size: var(--px-140), 100% !important;
}

    #turn-tracker-page-body-id .body-tracker .row-end-tracker .box-ticket--tracker:not(.ticket-view) {
        display: flex;
        border-radius: 4px;
        min-width: var(--px-130);
        max-width: var(--px-130);
        flex-direction: row;
        margin: var(--px-5);
        height: 100%;
        max-height: 90%;
        box-shadow: var(--shadow-1);
        background: var(--theme-mode-bs-100);
        position: relative;
        padding: var(--px-5);
        cursor: pointer;
    }

    #turn-tracker-page-body-id .body-tracker .row-end-tracker .box-ticket--tracker[status="7"] .ticket-line-1,
    #turn-tracker-page-body-id .body-tracker .row-end-tracker .box-ticket--tracker[status="7"] .ticket-line-2 {
        text-decoration: line-through;
    }

    #turn-tracker-page-body-id .body-tracker .row-end-tracker .box-ticket--tracker .box--1 {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: auto;
        overflow: hidden;
    }

    #turn-tracker-page-body-id .body-tracker .row-end-tracker .box-ticket--tracker .box--2 {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: auto;
        align-items: flex-end;
        padding-right: 5px;
        overflow: hidden;
        white-space: nowrap;
    }

    #turn-tracker-page-body-id .body-tracker .row-end-tracker .box-ticket--tracker span,
    #turn-tracker-page-body-id .body-tracker .row-end-tracker .box-ticket--tracker div {
        font: normal normal 700 var(--s-11);
    }

    #turn-tracker-page-body-id .body-tracker .row-end-tracker .box-ticket--tracker .strong {
        font: normal normal 700 var(--s-11);
        color: var(--theme-mode-text-dark);
    }

    #turn-tracker-page-body-id .body-tracker .row-end-tracker .box-ticket--tracker .total span {
        font: normal normal 700 var(--s-12);
        color: var(--theme-mode-text-dark);
    }

    #turn-tracker-page-body-id .body-tracker .row-end-tracker .box-ticket--tracker .service span {
        font: normal normal 700 var(--s-12);
        color: var(--theme-mode-text-dark);
    }

    #turn-tracker-page-body-id .body-tracker .row-end-tracker .box-ticket--tracker.addMore {
        background: unset;
        box-shadow: unset;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        #turn-tracker-page-body-id .body-tracker .row-end-tracker .box-ticket--tracker.addMore.drop-target .box--addMore {
            right: 4px;
            bottom: 4px;
        }

        #turn-tracker-page-body-id .body-tracker .row-end-tracker .box-ticket--tracker.addMore .box--addMore {
            display: flex;
            align-items: center;
            justify-content: center;
            height: var(--px-30);
            width: var(--px-30);
            border-radius: 100%;
            background: unset;
            cursor: pointer;
            position: absolute;
            bottom: 0;
            right: 0;
            color: var(--theme-mode-text);
        }

            #turn-tracker-page-body-id .body-tracker .row-end-tracker .box-ticket--tracker.addMore .box--addMore:hover {
                background: var(--theme-mode-bs-200);
                box-shadow: 0px 1px 10px #00000029;
            }

            #turn-tracker-page-body-id .body-tracker .row-end-tracker .box-ticket--tracker.addMore .box--addMore i {
                font-size: var(--px-15);
                color: var(--bs-blue)
            }

        #turn-tracker-page-body-id .body-tracker .row-end-tracker .box-ticket--tracker.addMore .box--addTicket {
            display: flex;
            overflow: hidden;
            cursor: pointer;
            width: var(--px-40);
            align-items: center;
            height: var(--px-40);
            color: var(--bs-blue);
            justify-content: center;
            border-radius: var(--px-40);
            background: var(--theme-mode-bs-200);
        }

            #turn-tracker-page-body-id .body-tracker .row-end-tracker .box-ticket--tracker.addMore .box--addTicket i {
                font-size: var(--px-16);
            }

#turn-tracker-page-body-id .box-ticket--tracker.index {
    border: inherit !important;
    box-shadow: unset !important;
    background: var(--theme-mode-bs-400) !important;
}

#turn-logs-modal .area-seat-map-form {
    display: flex;
    gap: var(--px-10);
    width: 100%;
    padding: var(--px-22);
    overflow: hidden;
    flex-direction: column;
    border-radius: var(--px-12);
    background: var(--theme-mode-bs-300);
}

.modal-dialog .header-modal-operation {
    flex: 1;
    display: flex;
    gap: var(--px-10);
    flex-direction: column;
    max-height: var(--px-60);
}

    .modal-dialog .header-modal-operation .title {
        font: normal normal 700 var(--s-22);
        color: var(--theme-mode-text);
    }

    .modal-dialog .header-modal-operation .text {
        font: italic normal 500 var(--s-16);
    }

.general-ui-info-turn--tracker {
    display: flex;
    overflow: hidden;
    flex-direction: row;
    max-width: var(--px-350);
    background: var(--theme-mode-bs-300);
}

    .general-ui-info-turn--tracker[typeof="view"] .info-left--tracker {
        left: 0;
        transition: left .28s;
    }

    .general-ui-info-turn--tracker[typeof="action"] .info-left--tracker,
    .general-ui-info-turn--tracker[typeof="view"] .add-subs-right--tracker,
    .general-ui-info-turn--tracker[typeof="action"] .add-subs-right--tracker {
        transition: left .28s;
        left: calc(var(--px-350) * -1);
    }

    .general-ui-info-turn--tracker[typeof="view"] .add-subs-right--tracker {
        transition: left .28s;
        left: var(--px-350);
    }

    .general-ui-info-turn--tracker .info-left--tracker {
        display: flex;
        min-width: 100%;
        position: relative;
        flex-direction: column;
    }

    .general-ui-info-turn--tracker .header-tech--tracker {
        display: flex;
        gap: var(--px-10);
        align-items: center;
        height: var(--px-100);
        padding: var(--px-14);
        border-bottom: 1px solid var(--theme-mode-border);
    }

        .general-ui-info-turn--tracker .header-tech--tracker .techs-photo {
            display: flex;
            align-items: center;
            justify-content: center;
            width: var(--px-60);
            height: var(--px-60);
        }

            .general-ui-info-turn--tracker .header-tech--tracker .techs-photo span,
            .general-ui-info-turn--tracker .header-tech--tracker .techs-photo img {
                width: 100%;
                height: 100%;
                display: flex;
                overflow: hidden;
                align-items: center;
                justify-content: center;
                text-transform: uppercase;
                border-radius: var(--px-50);
                color: var(--theme-mode-text-dark);
                font: normal normal 700 var(--s-22);
                border: 1px solid var(--theme-mode-border);
            }

        .general-ui-info-turn--tracker .header-tech--tracker .end--tracker {
            display: grid;
            grid-template-areas:
                "a b"
                "c b";
            grid-template-columns: 2fr 1fr;
        }

            .general-ui-info-turn--tracker .header-tech--tracker .end--tracker p {
                font: normal normal 700 var(--s-17);
                color: var(--theme-mode-text);
                grid-area: a;
            }

            .general-ui-info-turn--tracker .header-tech--tracker .end--tracker button {
                font: normal normal 700 var(--s-14);
                color: var(--theme-mode-text-white);
                background: var(--bs-blue);
                grid-area: b;
                max-width: var(--px-100);
                padding: 0 var(--px-10);
                border: none;
                outline: none;
            }

                .general-ui-info-turn--tracker .header-tech--tracker .end--tracker button:hover {
                    opacity: .6
                }

            .general-ui-info-turn--tracker .header-tech--tracker .end--tracker div {
                grid-area: c;
            }

    .general-ui-info-turn--tracker .body-tech--tracker {
        display: flex;
        padding: var(--px-14);
        flex-direction: column;
        color: var(--theme-mode-text);
        grid-template-columns: 1fr 1fr;
    }

        .general-ui-info-turn--tracker .body-tech--tracker .row--tracker {
            display: flex;
            align-items: center;
            height: var(--px-26);
            justify-content: space-between;
            font: normal normal 600 var(--s-15);
        }

            .general-ui-info-turn--tracker .body-tech--tracker .row--tracker.bold {
                font: normal normal 700 var(--s-16);
                color: var(--bs-blue)
            }

            .general-ui-info-turn--tracker .body-tech--tracker .row--tracker.amount {
                font: normal normal 700 var(--s-16);
                color: var(--bs-danger);
            }

.add-subs-right--tracker {
    display: flex;
    min-width: 100%;
    position: relative;
    flex-direction: column;
}

    .add-subs-right--tracker .header-adjust-bonus--tracker {
        padding: var(--px-14);
        text-transform: uppercase;
    }

        .add-subs-right--tracker .header-adjust-bonus--tracker p {
            text-align: center;
            font: normal normal 700 var(--s-16);
        }

    .add-subs-right--tracker .body-adjust-bonus--tracker {
        display: flex;
        padding: var(--px-14);
        flex-direction: column;
    }

        .add-subs-right--tracker .body-adjust-bonus--tracker .type-of-adjust-bonus {
            width: 100%;
            display: flex;
            padding: 6px;
            border-radius: 4px;
            align-items: center;
            height: var(--px-44);
            justify-content: center;
            margin-bottom: var(--px-20);
            background: var(--theme-mode-bs-100);
        }

        .add-subs-right--tracker .body-adjust-bonus--tracker .tab-mode {
            flex: 1;
            height: 95%;
            display: flex;
            cursor: pointer;
            border-radius: 4px;
            align-items: center;
            justify-content: center;
        }

            .add-subs-right--tracker .body-adjust-bonus--tracker .tab-mode.active {
                background: var(--theme-mode-bs-400);
            }

            .add-subs-right--tracker .body-adjust-bonus--tracker .tab-mode p {
                opacity: .7;
                color: var(--theme-mode-text);
                font: normal normal 700 var(--s-14);
            }

            .add-subs-right--tracker .body-adjust-bonus--tracker .tab-mode.active p {
                opacity: 1;
                color: var(--bs-blue);
                font: normal normal 700 var(--s-14);
            }

    .add-subs-right--tracker .enter-turn--tracker {
        display: flex;
        align-items: center;
        flex-direction: row;
        justify-content: space-between
    }

    .add-subs-right--tracker p.title {
        font: normal normal 700 var(--s-16);
    }

    .add-subs-right--tracker .enter-turn--tracker .number-adjust-ip--tracker input {
        border-radius: 4px;
        height: var(--px-36);
        padding: 0 var(--px-8);
        color: var(--theme-mode-text);
        border: 1px solid var(--bs-blue);
        background: var(--theme-mode-bs-300);
    }

    .add-subs-right--tracker .enter-reason--tracker {
        margin-top: var(--px-20);
    }

        .add-subs-right--tracker .enter-reason--tracker .checkbox-option-select {
            padding: 4px;
            height: auto;
            border-radius: 4px;
            margin: var(--px-10) 0;
        }

        .add-subs-right--tracker .enter-reason--tracker textarea {
            width: 100%;
            border-radius: 4px;
            outline: unset;
            padding: var(--px-10);
            min-height: var(--px-100);
            border: 2px solid transparent;
            background: var(--bs-gray-300);
            font: normal normal 600 var(--s-16);
            color: var(--theme-mode-text);
            transition: all 0.2s ease-out;
            pointer-events: none;
            opacity: 0.4;
        }

            .add-subs-right--tracker .enter-reason--tracker textarea.active {
                opacity: 1;
                pointer-events: all;
                border: 2px solid var(--bs-blue);
                background: var(--theme-mode-bs-400)
            }

    .add-subs-right--tracker .save-change--tracker {
        display: flex;
        cursor: pointer;
        align-items: center;
        justify-content: center;
        height: var(--px-36);
        background: var(--bs-blue);
        border-radius: 4px;
        margin-top: var(--px-10);
        font: normal normal bold var(--s-17);
        color: var(--theme-mode-text-white);
        text-transform: uppercase;
    }

        .add-subs-right--tracker .save-change--tracker.disable {
            pointer-events: none;
            opacity: .5;
        }

#turn-tracker-page-body-id .ticket-heading {
    display: flex;
    align-items: center;
    flex-direction: row;
    padding: var(--px-16);
}

    #turn-tracker-page-body-id .ticket-heading p {
        font: normal normal 700 var(--s-18);
    }

    #turn-tracker-page-body-id .ticket-heading span {
        display: flex;
        margin-left: 5px;
        border-radius: 4px;
        align-items: center;
        width: var(--px-20);
        height: var(--px-20);
        justify-content: center;
        background: var(--bs-blue);
        color: var(--theme-mode-text-white);
        font: normal normal 700 var(--s-11);
    }

#turn-tracker-page-body-id .btn-collapse-form-ticket {
    position: absolute;
    right: var(--px-10);
    top: var(--px-24);
    color: var(--theme-mode-text);
    background: var(--theme-mode-bs-200);
    border: 1px solid var(--theme-mode-border);
    width: var(--px-30);
    height: var(--px-30);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 10;
}

    #turn-tracker-page-body-id .btn-collapse-form-ticket i {
        transition: all .3s;
    }

        #turn-tracker-page-body-id .btn-collapse-form-ticket i.fa-rotate-180 {
            color: var(--bs-blue);
            font-weight: 800;
        }

.sale-invoice-modal-form {
    display: flex;
    border-radius: 8px;
    flex-direction: column;
    max-width: var(--px-440);
    min-width: var(--px-440);
    background: var(--theme-mode-bs-300);
}

    .sale-invoice-modal-form .header-invoice {
        width: 100%;
        display: flex;
        gap: var(--px-10);
        align-items: center;
        flex-direction: column;
        justify-content: center;
        color: var(--theme-mode-text);
        padding: var(--px-40) var(--px-24) 0 var(--px-24);
    }

        .sale-invoice-modal-form .header-invoice .h-1 {
            font: normal normal 700 var(--s-20);
        }

        .sale-invoice-modal-form .header-invoice .h-2,
        .sale-invoice-modal-form .header-invoice .h-3 {
            color: var(--bs-gray-600);
            font: normal normal 500 var(--s-15);
        }

            .sale-invoice-modal-form .header-invoice .h-3 strong {
                color: var(--bs-blue);
            }

        .sale-invoice-modal-form .header-invoice .h-4 {
            display: flex;
            border-radius: 4px;
            background: #C0F0D1;
            align-items: center;
            height: var(--px-26);
            width: var(--px-100);
            color: var(--bs-green);
            justify-content: center;
            text-transform: uppercase;
            font: normal normal 700 var(--s-13);
        }

    .sale-invoice-modal-form .body-invoice {
        gap: 4px;
        width: 100%;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        padding: var(--px-24);
    }

        .sale-invoice-modal-form .body-invoice .one-row {
            width: 100%;
            display: grid;
            align-items: center;
            height: var(--px-28);
            color: var(--bs-gray-600);
            font: normal normal 600 var(--s-14);
            grid-template-columns: 1fr min-content;
        }

            .sale-invoice-modal-form .body-invoice .one-row.line-top {
                align-items: end;
                min-height: var(--px-36);
                border-top: 1px solid var(--theme-mode-border);
            }

            .sale-invoice-modal-form .body-invoice .one-row .row-1 {
            }

            .sale-invoice-modal-form .body-invoice .one-row .row-2 {
                color: var(--theme-mode-text);
                font: normal normal 600 var(--s-16);
            }

            .sale-invoice-modal-form .body-invoice .one-row .row-3 {
                color: var(--theme-mode-text);
                font: normal normal 600 var(--s-17);
            }

            .sale-invoice-modal-form .body-invoice .one-row .row-4 {
                color: var(--theme-mode-text);
            }

            .sale-invoice-modal-form .body-invoice .one-row .row-5 {
                color: var(--theme-mode-text);
            }

            .sale-invoice-modal-form .body-invoice .one-row .row-6 {
                color: var(--theme-mode-text);
                font: normal normal 700 var(--s-17);
            }

        .sale-invoice-modal-form .body-invoice .list-item-service {
            width: 100%;
            display: flex;
            overflow: auto;
            gap: var(--px-10);
            position: relative;
            flex-direction: column;
            max-height: var(--px-300);
            margin-bottom: var(--px-14);
        }

            .sale-invoice-modal-form .body-invoice .list-item-service::-webkit-scrollbar {
                max-width: 0;
                background-color: unset;
            }

            .sale-invoice-modal-form .body-invoice .list-item-service .item-row {
                gap: 4px;
                width: 100%;
                display: flex;
                align-items: center;
                height: var(--px-60);
                min-height: var(--px-60);
                justify-content: space-between;
                border-bottom: 2px solid var(--theme-mode-border);
            }

                .sale-invoice-modal-form .body-invoice .list-item-service .item-row .row-start {
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    color: var(--theme-mode-text);
                    font: normal normal 600 var(--s-17);
                }

                    .sale-invoice-modal-form .body-invoice .list-item-service .item-row .row-start .start-2 {
                        color: var(--bs-gray-600);
                        font-weight: 500;
                    }

                .sale-invoice-modal-form .body-invoice .list-item-service .item-row .row-end {
                    height: 100%;
                    display: flex;
                    align-items: flex-start;
                    font: normal normal 700 var(--s-15);
                }

                    .sale-invoice-modal-form .body-invoice .list-item-service .item-row .row-end .quantity {
                        color: var(--bs-gray-600);
                        font: normal normal 500 var(--s-15);
                    }

                    .sale-invoice-modal-form .body-invoice .list-item-service .item-row .row-end .price {
                        margin-left: 4px;
                        font: normal normal 600 var(--s-16);
                    }


/* SEATS */
section.seats-map-append {
    width: 100%;
    height: 100%;
    display: flex;
    overflow: hidden;
    flex-direction: column;
}

    section.seats-map-append div.modal-body-seatsmap {
        flex: 1;
        width: 100%;
        display: flex;
        overflow: hidden;
        flex-direction: column;
    }

div.body-seats-map .library-seats {
    max-width: var(--px-460);
    background: var(--theme-mode-bs-100);
    border-radius: var(--px-16);
}

    div.body-seats-map .library-seats .body-append-form {
        padding: 0 var(--px-4);
    }

#canvasContainer-seats div.area-listener-drop-ticket.dragEnter {
    transform: scale(1.1);
}

    #canvasContainer-seats div.area-listener-drop-ticket.dragEnter .table-detail {
        border: 2px dashed var(--bs-main)
    }


#seat-map-assign-modal .modal-content {
    min-width: var(--px-640);
    max-width: var(--px-998);
    min-height: var(--px-600);
    border-radius: var(--px-12);
}

#seat-map-assign-modal .area-seat-map-form {
    flex: 1;
    display: flex;
    overflow: hidden;
    gap: var(--px-10);
    padding: var(--px-22);
    flex-direction: column;
    border-radius: var(--px-12);
    background: var(--theme-mode-bs-300);
}

    #seat-map-assign-modal .area-seat-map-form .seat-map-assign-append {
        flex: 1;
        display: flex;
        gap: var(--px-16);
        overflow: hidden;
        flex-direction: column;
    }

        #seat-map-assign-modal .area-seat-map-form .seat-map-assign-append img {
            border-radius: 8px;
            height: var(--px-200);
            max-height: var(--px-200);
            background: var(--theme-mode-bs-100);
        }

        #seat-map-assign-modal .area-seat-map-form .seat-map-assign-append .select-area {
            display: flex;
            gap: var(--px-10);
            flex-direction: row;
            align-items: center;
        }

            #seat-map-assign-modal .area-seat-map-form .seat-map-assign-append .select-area button {
                margin: 0;
                display: flex;
                gap: var(--px-10);
                align-items: center;
                color: var(--theme-mode-text);
                font: normal normal 700 var(--s-16);
                border: 1px solid var(--theme-mode-border);
            }

                #seat-map-assign-modal .area-seat-map-form .seat-map-assign-append .select-area button.active {
                    color: var(--bs-blue);
                    border: 1px solid var(--bs-blue);
                }

                #seat-map-assign-modal .area-seat-map-form .seat-map-assign-append .select-area button::after {
                    content: '';
                }

                #seat-map-assign-modal .area-seat-map-form .seat-map-assign-append .select-area button p {
                    opacity: 1;
                }

        #seat-map-assign-modal .area-seat-map-form .seat-map-assign-append .seat-map-assign {
            width: 100%;
            flex: 1;
            display: flex;
            overflow: auto;
            flex-wrap: wrap;
            gap: var(--px-10);
            flex-direction: column;
            align-content: flex-start;
        }

.dropdown.action-more {
    display: flex;
    align-items: center;
    background: inherit;
}

.header-salon-center .dropdown.action-more {
    grid-area: c;
}

.dropdown.action-more .dropdown-toggle {
    border: 0;
    padding: 0;
    outline: unset;
    box-shadow: unset;
    background: inherit;
    width: var(--px-44);
    height: var(--px-44);
    font-size: var(--px-18);
    border-radius: 100%;
}

    .dropdown.action-more .dropdown-toggle:hover {
        color: white;
        background: var(--main-color);
    }

    .dropdown.action-more .dropdown-toggle::after {
        content: '';
        display: none !important;
    }

.dropdown.action-more.tier-group {
    position: absolute;
    right: 0;
}

.header-modal-operations {
    display: flex;
    gap: var(--px-6);
    flex-direction: column;
}

    .header-modal-operations p {
        color: var(--bs-gray);
        font: normal normal 500 var(--s-14);
    }

        .header-modal-operations p.title {
            color: var(--theme-mode-text);
            font: normal normal 600 var(--s-18);
        }

/* Modal custom*/
.settings-panel.show-to-be-modal {
    top: 50%;
    border: 0;
    left: 50%;
    height: 80%;
    position: fixed;
    min-height: unset;
    border-radius: 8px;
    transform: translate(-50%, -50%);
}

    .settings-panel.show-to-be-modal .settings-panel .settings-heading {
        border-radius: 8px;
    }

    .settings-panel.show-to-be-modal .settings-panel .settings-heading {
        border-radius: 8px;
    }


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

    .seats-map-table .box--table {
        display: flex;
        position: absolute;
        width: var(--px-100);
        height: var(--px-80);
        flex-direction: column;
        color: var(--theme-mode-text);
    }

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

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

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

.box--table[status="2"] .table-detail {
    border-color: var(--tix-wait);
}

.box--table[status="3"] .table-detail {
    border-color: var(--tix-inservice);
}

.box--table[status="2"] circle {
    color: var(--tix-wait);
}

.box--table[status="3"] circle {
    color: var(--tix-inservice);
}

.table-detail .durations {
    display: flex;
    gap: var(--px-8);
    align-items: center;
    font: normal normal 400 var(--s-12);
}

.table-detail .seat {
    color: var(--bs-pink);
    font: normal normal 700 var(--s-13);
}

.table-detail .btn-inverse-danger:not(.btn-inverse-light) {
    background: unset;
    font: normal normal 600 var(--s-12);
}

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

.box--table .line-1 {
    font: normal normal 600 var(--s-12);
}

.box--table .time {
    color: var(--bs-gray-700);
    font: normal normal 600 var(--s-10);
}

.box--table:hover {
    cursor: pointer;
}

.ticket-view {
    border-radius: 4px;
    min-width: var(--px-130);
    max-width: var(--px-130);
    flex-direction: row;
    margin: var(--px-5);
    height: 100%;
    max-height: 90%;
    box-shadow: var(--shadow-1);
    background: #FFF;
    position: relative;
    padding: var(--px-5);
    cursor: pointer;
    /*/*/
    padding: 0 !important;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-between;
    background: var(--theme-mode-bs-300);
}

    .ticket-view .ticket-line-1,
    .ticket-view .ticket-line-2 {
        flex: 1.4;
        width: 100%;
        display: flex;
        align-items: center;
        padding: 0 var(--px-10);
        justify-content: space-between;
        color: var(--theme-mode-text);
    }

        .ticket-view .ticket-line-1 .line-1 {
            font: normal normal 700 var(--s-11);
        }

        .ticket-view .ticket-line-2 p {
            gap: 4px;
            display: flex;
            align-items: center;
            font: normal normal 700 var(--s-11);
        }

        .ticket-view .ticket-line-2 .turn {
            display: -webkit-box;
            color: var(--bs-green);
            font: normal normal 700 var(--s-11);
        }

        .ticket-view .ticket-line-2 .cards-seat:hover {
            padding: 0 2px;
            cursor: pointer;
            border-radius: 4px;
            transition: all .2s;
        }

    .ticket-view span.seat {
        color: #FFF;
        padding: 1px;
        display: flex;
        margin-right: 4px;
        border-radius: 4px;
        align-items: center;
        justify-content: center;
        width: var(--px-26);
        background: var(--bs-blue);
        font: normal normal 700 var(--s-11);
        height: var(--px-26);
    }

    .ticket-view .ticket-line-3 {
        flex: 1;
        width: 100%;
        display: flex;
        align-items: center;
        padding: 2px var(--px-10);
        border-radius: 0 0 4px 4px;
        background: var(--bs-gray-600);
        justify-content: space-between;
        color: var(--theme-mode-text-white);
        border-top: 1px dashed var(--bs-white);
    }

    .ticket-view[status="2"] .ticket-line-3 {
        background: var(--tix-checkin);
    }

    .ticket-view[status="3"] .ticket-line-3 {
        background: var(--tix-inservice);
    }

    .ticket-view[status="8"] .ticket-line-3 {
        background: var(--tix-done);
    }

    .ticket-view[status="7"] .ticket-line-3 {
        background: var(--bs-gray-500);
    }

    .ticket-view .ticket-line-3 p {
        font: normal normal 700 var(--s-10);
    }

    .ticket-view .ticket-line-3 .durations {
        display: flex;
        font-size: 9px;
        align-items: center;
    }

    .ticket-view i.reservation {
        top: -12px;
        width: 24px;
        height: 24px;
        left: -12px;
        display: flex;
        padding: 3px 0;
        font-size: 13px;
        position: absolute;
        border-radius: 24px;
        align-items: center;
        color: var(--bs-white);
        justify-content: center;
        box-shadow: var(--shadow-1);
        background: var(--bs-danger);
    }

.ticket-line-3 .durations span {
    font-size: 9px;
    background: unset;
    color: var(--theme-mode-text);
}


.ticket-view.info-seat-view {
    position: absolute;
    min-width: var(--px-80);
    max-width: var(--px-80);
    max-height: var(--px-44);
}

    .ticket-view.info-seat-view .ticket-line-2,
    .ticket-view.info-seat-view .ticket-line-3 {
        padding: 2px 4px
    }

    .ticket-view.info-seat-view.select-seat-popup {
        position: relative;
        min-width: var(--px-140);
        max-width: var(--px-140);
        min-height: var(--px-80);
        max-height: var(--px-80);
    }

        .ticket-view.info-seat-view.select-seat-popup .reservation {
            top: unset;
            left: unset;
            position: relative;
        }

        .ticket-view.info-seat-view.select-seat-popup .ticket-line-2 p {
            font: normal normal 6 00 var(--s-14);
        }

.ticket-view.select-seat-popup .ticket-line-3 .durations span {
    font-size: 12px;
    background: unset;
    color: var(--theme-mode-text-white);
}

.ticket-view.select-seat-popup .ticket-line-3 {
    min-height: var(--px-32);
    max-height: var(--px-32);
}

.ticket-view p.wrap-line-1 {
    display: -webkit-box;
}

.open {
}

.theme-setting-wrapper {
    position: relative;
}