:root {
    --bg-time-off: #d5d7da;
    --bg-calendar: var(--theme-mode-bs-400);
    --quantity-hour: 0;
    --w-hour: var(--px-60);
    --min-width: var(--px-200);
    --min-width-salon: calc(var(--min-width) * 1);
    --height-row: var(--px-30);
    --min-font-size: var(--px-13);
    --max-font-size: var(--px-18);
    --mg-scale: calc(var(--px-10) * -1);
    --height-row-hour: calc(var(--height-row) * 4);
    --tix-unConfirm: #9d85ff;
    /*--tix-unConfirm: #ff9e2e;*/
}

.booking-page-body {
    width: 100%;
    height: 100%;
    display: grid;
    padding-top: 2px;
    position: relative;
    grid-template-rows: var(--px-64) 1fr;
    grid-template-columns: var(--px-280) 1fr var(--px-60);
}

    .booking-page-body #create-booking-button-tracking {
        z-index: 12;
        width: 100%;
        height: 100%;
        position: absolute;
        max-width: var(--px-260);
        background: var(--bg-calendar);
    }

    .booking-page-body #btn-create-booking {
        width: auto;
        position: relative;
        top: var(--px-6);
        left: var(--px-6);
        transition: all 0.4s ease 0s;
        height: var(--px-60);
        padding: var(--px-10);
        border-radius: var(--px-16);
        box-shadow: var(--shadow-1);
    }

    .booking-page-body .booking-action-area {
        z-index: 14;
        display: flex;
        overflow: hidden;
        transition: width 0.4s ease 0s;
        max-width: var(--px-280);
        height: 100%;
        gap: var(--px-12);
        flex-direction: column;
        background: var(--bs-gray-100);
        padding-top: var(--px-16);
    }

        .booking-page-body .booking-action-area::after {
            right: 0px;
            width: 1px;
            content: "";
            position: absolute;
            top: 0;
            height: 100%;
            /* background: var(--theme-mode-border); */
        }

        .booking-page-body .booking-action-area #create-booking-button-tracking {
            display: flex;
            align-items: center;
            height: var(--px-80);
            padding: var(--px-10);
            justify-content: flex-start;
        }

    .booking-page-body[sidecalendar="closed"] #btn-create-booking {
        border-radius: 100%;
        min-width: var(--px-60);
        max-width: var(--px-60);
    }

        .booking-page-body[sidecalendar="closed"] #btn-create-booking span {
            display: none;
        }

    .booking-page-body .btn-navigation-calendar {
        bottom: 6px;
        right: var(--px-80);
        z-index: 12;
        opacity: 0.4;
        display: flex;
        position: absolute;
        align-items: center;
        width: var(--px-60);
        height: var(--px-60);
        justify-content: center;
        box-shadow: var(--shadow-5);
        border-radius: var(--px-60);
        background: var(--bs-white);
        color: var(--theme-mode-text);
    }

        .booking-page-body .btn-navigation-calendar:hover {
            opacity: 1;
        }

        .booking-page-body .btn-navigation-calendar i {
            font-size: var(--px-20);
        }

    .booking-page-body[sidecalendar="closed"] .booking-action-area {
        width: 0;
        display: none;
    }

    .booking-page-body[sidecalendar="closed"] .booking-calendar-area {
        grid-column: 1 / 3;
    }

    .booking-page-body[sidecalendar="closed"] .btn-action-form-calendar {
    }

        .booking-page-body[sidecalendar="closed"] .btn-action-form-calendar .fa-chevron-left {
            transform: rotate(180deg);
        }

    .booking-page-body .booking-calendar-area {
        flex: 1 1 0%;
        width: 100%;
        /* height: 100%; */
        display: flex;
        overflow: auto;
        position: relative;
        flex-direction: column;
        max-height: calc(100vh - var(--px-60));
        touch-action: manipulation;
        margin-top: var(--px-12);
    }

        .booking-page-body .booking-calendar-area.scrollable-content.touch-scrolling {
            transition-duration: 0ms;
        }

        .booking-page-body .booking-calendar-area .area-hours-view {
            top: 0;
            z-index: 8;
            width: 100%;
            display: flex;
            text-align: end;
            position: sticky;
            flex-direction: row;
            align-items: flex-start;
            min-height: var(--px-90);
            max-height: var(--px-90);
            color: var(--theme-mode-text);
            font: normal normal 700 var(--s-13);
            background: var(--theme-mode-bs-400);
        }

        .booking-page-body .booking-calendar-area .header-hours {
            top: 0;
            left: 0px;
            z-index: 3;
            display: flex;
            position: sticky;
            align-items: center;
            flex-direction: column;
            min-width: var(--w-hour);
            max-width: var(--w-hour);
            min-height: var(--px-90);
            justify-content: flex-end;
            background: inherit;
            /* border-bottom: 1px solid var(--theme-mode-calendar-solid); */
        }

        .booking-page-body .booking-calendar-area .list-hour-view {
            top: 0px;
            left: 0px;
            z-index: 2;
            display: flex;
            position: sticky;
            flex-direction: column;
            min-width: var(--w-hour);
            max-width: var(--w-hour);
            background: var(--theme-mode-bs-200);
            border-right: 1px solid var(--theme-mode-calendar-solid);
        }

            .booking-page-body .booking-calendar-area .list-hour-view .item-hour {
                display: flex;
                flex-flow: column;
                position: relative;
                background: inherit;
                justify-content: flex-end;
                min-height: var(--height-row-hour);
                max-height: var(--height-row-hour);
                /* border-bottom: 1px solid var(--theme-mode-calendar-solid); */
                flex-direction: column;
                align-items: center;
            }

                .booking-page-body .booking-calendar-area .list-hour-view .item-hour p.time {
                    z-index: 3;
                    width: calc(100% - var(--px-12));
                    height: var( --px-20);
                    display: flex;
                    white-space: nowrap;
                    align-items: center;
                    padding-left: var( --px-10);
                    color: var( --theme-mode-text);
                    font: normal normal 603 var( --s-10);
                    background: inherit;
                    );
                    position: relative;
                    top: var(--px-22);
                }

                .booking-page-body .booking-calendar-area .list-hour-view .item-hour[time="0:00 AM"] {
                    display: none;
                }

                .booking-page-body .booking-calendar-area .list-hour-view .item-hour p.quantity-appt {
                    z-index: 3;
                    display: flex;
                    overflow: hidden;
                    align-items: center;
                    width: var(--px-20);
                    height: var(--px-20);
                    justify-content: center;
                    background: var(--bs-pink-o);
                    border-radius: var(--px-20);
                    color: var(--bs-pink);
                    font: normal normal 700 var(--s-12);
                    position: relative;
                    top: var(--px-20);
                }

        .booking-page-body .booking-calendar-area .header-hours.gmt span {
            white-space: nowrap;
            color: var(--theme-mode-text);
            font: normal normal 600 var(--s-11);
            display: flex;
            background: inherit;
            height: var(--px-24);
        }

        .booking-page-body .booking-calendar-area .area-calendar-view {
            width: 100%;
            display: flex;
            flex-direction: row;
        }

        .booking-page-body .booking-calendar-area .header-calendar-view {
            z-index: 1;
            width: 100%;
            display: flex;
            position: sticky;
            flex-direction: row;
            min-height: 100%;
            background: inherit;
            box-shadow: 0 3px 10px var(--theme-mode-border);
            border-bottom: 1px solid var(--theme-mode-border);
        }

            .booking-page-body .booking-calendar-area .header-calendar-view .item-day {
                flex: 1 1 0%;
                display: flex;
                align-items: center;
                flex-direction: column;
                justify-content: space-evenly;
                color: var(--theme-mode-text);
                font: normal normal 600 var(--s-12);
            }

                .booking-page-body .booking-calendar-area .header-calendar-view .item-day .day {
                    display: flex;
                    cursor: pointer;
                    width: var(--px-44);
                    border-radius: 100%;
                    align-items: center;
                    height: var(--px-44);
                    justify-content: center;
                    font: normal normal 600 var(--s-26);
                }

                    .booking-page-body .booking-calendar-area .header-calendar-view .item-day .day:hover {
                        background: var(--theme-mode-bs-300);
                    }

            .booking-page-body .booking-calendar-area .header-calendar-view .ui-tech-column {
                display: flex;
                position: relative;
                align-items: center;
                flex-direction: column;
                justify-content: space-evenly;
                background: inherit;
                color: var(--theme-mode-text);
                font: normal normal 600 var(--s-12);
                min-width: var(--min-width);
                max-width: var(--min-width);
            }

                .booking-page-body .booking-calendar-area .header-calendar-view .ui-tech-column.scale-80 div, .booking-page-body .booking-calendar-area .header-calendar-view .ui-tech-column.scale-80 p {
                    transform: scale(0.8);
                }

                .booking-page-body .booking-calendar-area .header-calendar-view .ui-tech-column.add-blocked-time::after {
                    top: 0px;
                    left: 0px;
                    z-index: -2;
                    content: "";
                    width: 100%;
                    height: 100vh;
                    position: absolute;
                    pointer-events: none;
                    background: rgba(0, 0, 0, 0.094);
                }

                .booking-page-body .booking-calendar-area .header-calendar-view .ui-tech-column.noScroll {
                    z-index: 2;
                    position: sticky;
                    left: calc(var(--min-width) + var(--w-hour)) !important;
                }

                    .booking-page-body .booking-calendar-area .header-calendar-view .ui-tech-column.noScroll:first-of-type {
                        z-index: 2;
                        position: sticky;
                        left: var(--w-hour) !important;
                    }

                    .booking-page-body .booking-calendar-area .header-calendar-view .ui-tech-column.noScroll[index="1"] {
                        box-shadow: rgba(40, 16, 16, 0.12) 3px -1px 9px 0px;
                        min-width: var(--min-width-salon);
                        max-width: var(--min-width-salon);
                    }


                .booking-page-body .booking-calendar-area .header-calendar-view .ui-tech-column .photo {
                    display: flex;
                    cursor: pointer;
                    position: relative;
                    align-items: center;
                    width: var(--px-60);
                    height: var(--px-60);
                    justify-content: center;
                    text-transform: uppercase;
                    color: var(--theme-mode-text);
                    box-shadow: var(--shadow-1);
                    border-radius: var(--px-60);
                    border: 4px solid var(--theme-mode-bs-200);
                    font: normal normal 600 var(--s-22);
                    background: var(--theme-mode-bs-200);
                }

                    .booking-page-body .booking-calendar-area .header-calendar-view .ui-tech-column .photo .quantity-appt {
                        display: flex;
                        overflow: hidden;
                        position: absolute;
                        align-items: center;
                        width: var(--px-26);
                        height: var(--px-26);
                        justify-content: center;
                        border-radius: var(--px-20);
                        color: var(--bs-pink);
                        right: calc(var(--px-10)* -1.4);
                        bottom: calc(var(--px-10)* -1.4);
                        font: normal normal 700 var(--s-14);
                        background: var(--bs-pink-o);
                        outline: 4px solid var(--bg-calendar);
                    }

                    .booking-page-body .booking-calendar-area .header-calendar-view .ui-tech-column .photo:hover, .booking-page-body .booking-calendar-area .header-calendar-view .ui-tech-column .photo:active {
                        transition: all 0.098s ease 0s;
                        outline: 3px solid var(--bs-dudu);
                    }

                    .booking-page-body .booking-calendar-area .header-calendar-view .ui-tech-column .photo img {
                        width: 100%;
                        height: 100%;
                        border-radius: 100%;
                    }

                .booking-page-body .booking-calendar-area .header-calendar-view .ui-tech-column.noScroll .photo {
                    color: var(--bs-main-900);
                    outline: unset !important;
                    !i;
                    !;
                    !;
                    !i;
                    !;
                    box-shadow: unset;
                }

                .booking-page-body .booking-calendar-area .header-calendar-view .ui-tech-column .name {
                    text-align: center;
                    font: normal normal 600 var(--s-15);
                    color: var(--theme-mode-text);
                }

        .booking-page-body .booking-calendar-area .calendar-view-column-parent .working-slot {
            flex: 1 1 0%;
            width: 100%;
            display: flex;
            position: absolute;
            min-width: var(--min-width);
            background: var(--theme-mode-bs-300);
        }

        .booking-page-body .booking-calendar-area .calendar-view-column-parent .col-calendar {
            flex: 1 1 0%;
            z-index: 3;
            display: flex;
            background-size: 8px 8px;
            max-width: var(--min-width);
            min-width: var(--min-width);
            border-right: 1px solid var(--theme-mode-calendar-solid);
        }

            .booking-page-body .booking-calendar-area .calendar-view-column-parent .col-calendar.noScroll {
                z-index: 9;
                position: sticky;
                background-size: 12px 12px;
                background-image: linear-gradient(45deg, transparent 46%, rgba(16, 25, 40, 0.2) 49%, rgba(16, 25, 40, 0.2) 51%, transparent 55%);
                min-height: calc(var(--height-row)* var(--quantity-hour));
                max-height: calc(var(--height-row)* var(--quantity-hour));
                background-color: var(--bs-gray-200);
            }

            .booking-page-body .booking-calendar-area .calendar-view-column-parent .col-calendar.online-booking {
                left: var(--w-hour) !important;
            }

            .booking-page-body .booking-calendar-area .calendar-view-column-parent .col-calendar.salon {
                box-shadow: rgba(40, 16, 16, 0.12) 6px -1px 8px 0px;
                left: calc(var(--w-hour) + var(--min-width)) !important;
                min-width: var(--min-width-salon);
                max-width: var(--min-width-salon);
            }

            .booking-page-body .booking-calendar-area .calendar-view-column-parent .col-calendar .working-slot {
                background: var(--bs-main-50) 0% 0% no-repeat padding-box;
                border-right: 1px solid var(--theme-mode-calendar-solid);
            }

                .booking-page-body .booking-calendar-area .calendar-view-column-parent .col-calendar .working-slot[idx="1"] {
                    min-width: var(--min-width-salon) !important;
                    max-width: var(--min-width-salon) !important;
                }

            .booking-page-body .booking-calendar-area .calendar-view-column-parent .col-calendar .calendar-view-row, .booking-page-body .booking-calendar-area .calendar-view-column-parent .col-calendar .calendar-view-row-hours {
                left: 0px;
            }

        .booking-page-body .booking-calendar-area .calendar-view-column-parent {
            z-index: 0;
            width: 100%;
            height: 100%;
            display: flex;
            position: relative;
            background-size: 12px 12px;
            background-image: linear-gradient(45deg, transparent 46%, rgba(16, 25, 40, 0.2) 49%, rgba(16, 25, 40, 0.2) 51%, transparent 55%);
            min-height: calc(var(--height-row)* var(--quantity-hour));
            max-height: calc(var(--height-row)* var(--quantity-hour));
            background-color: var(--bs-gray-200);
        }

            .booking-page-body .booking-calendar-area .calendar-view-column-parent .calendar-view-row {
                top: 0px;
                z-index: 1;
                width: 100%;
                height: 100%;
                min-height: 100%;
                position: absolute;
                left: 0px;
                line-height: var(--height-row);
                background-size: var(--height-row) var(--height-row), 14.2857143% 14.2857143%, 100% 100%;
                background-image: linear-gradient(0deg, #46464624 0, var(--theme-mode-calendar-light) 1px, #0000 0, #0000);
            }

            .booking-page-body .booking-calendar-area .calendar-view-column-parent .calendar-view-column {
                display: flex;
                width: 100%;
                height: inherit;
                position: relative;
            }

                .booking-page-body .booking-calendar-area .calendar-view-column-parent .calendar-view-column.weekView {
                    grid-template-columns: repeat(7, 1fr);
                    background-size: calc(14.2857%), 0%, 100%;
                }

                .booking-page-body .booking-calendar-area .calendar-view-column-parent .calendar-view-column.dayView {
                    background-size: calc(100% / var(--quantity-tech)), 0%, 100%;
                    grid-template-columns: repeat(var(--quantity-tech), minmax(var(--min-width),1fr));
                }

            .booking-page-body .booking-calendar-area .calendar-view-column-parent .calendar-view-row-hours {
                top: 0px;
                left: 0px;
                height: 100%;
                width: 100%;
                position: absolute;
                background-size: var(--height-row-hour) var(--height-row-hour), 14.2857143% 14.2857143%, 100% 100%;
                min-height: 100%;
                line-height: var(--height-row-hour);
                z-index: 1;
                background-image: linear-gradient(0deg, #46464624 0, var(--theme-mode-calendar-solid) 1px, #0000 0, #0000);
            }

                .booking-page-body .booking-calendar-area .calendar-view-column-parent .calendar-view-row-hours::after {
                    position: absolute;
                    content: "";
                    top: 0px;
                    width: calc(100%);
                    height: 1px;
                    background: var(--theme-mode-calendar-solid);
                }

            .booking-page-body .booking-calendar-area .calendar-view-column-parent .calendar-area-show-all-time {
                inset: 0px;
                z-index: 7;
                width: 100%;
                height: 100%;
                display: flex;
                position: absolute;
                flex-direction: column;
            }

                .booking-page-body .booking-calendar-area .calendar-view-column-parent .calendar-area-show-all-time .time-slot {
                    width: 100%;
                    height: var(--height-row-hour);
                    line-height: var(--height-row);
                    background-repeat: repeat-x;
                }

.btn-action-form-calendar {
    color: var(--theme-mode-text);
    background: var(--theme-mode-bs-200);
    /* border: 1px solid var(--theme-mode-border); */
    min-width: var(--px-44);
    height: var(--px-44);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px;
    z-index: 14;
    font-size: var(--px-20);
    transition: left 0.3s ease 0s;
}

    .btn-action-form-calendar:hover {
        box-shadow: var(--shadow-5);
    }

    .btn-action-form-calendar .fa-chevron-left {
        transition: all 0.4s ease 0s;
        transform: rotate(0deg);
    }

.booking-action-area .booking-filter-group-area {
    width: 100%;
    display: flex;
    gap: var(--px-10);
    overflow: hidden;
    max-height: var(--px-40);
    flex-direction: column;
    padding: 0 var(--px-10);
    min-height: var(--px-40);
    border-top: 1px solid var(--bs-gray-400);
    padding-top: var(--px-8);
}

    .booking-action-area .booking-filter-group-area.default {
        overflow: hidden;
    }

    .booking-action-area .booking-filter-group-area.filter-tech {
        max-height: unset;
        height: min-content;
    }

    .booking-action-area .booking-filter-group-area.opening {
        max-height: unset;
    }

        .booking-action-area .booking-filter-group-area.opening .form-search-tech-filter {
            width: 100% !important;
        }

.booking-filter-parent {
    background: inherit;
    overflow: hidden;
    border-radius: 4px;
}

.booking-action-area .booking-filter-group-area .append-tech-filter-calendar {
    display: flex;
    overflow: auto;
    /* gap: var(--px-8); */
    position: relative;
    flex-direction: column;
    justify-content: flex-start;
}

.booking-action-area .booking-filter-group-area .form-search-tech-filter {
    margin: 0 auto;
    width: calc(100% - var(--px-32));
    display: flex;
    overflow: hidden;
    transition: width .4s;
    border-radius: var(--px-8);
    align-items: center;
    flex-direction: row;
    min-height: var(--px-40);
    max-height: var(--px-40);
    background: var(--theme-mode-bs-300);
}

    .booking-action-area .booking-filter-group-area .form-search-tech-filter:focus-within {
        width: 100%;
    }

    .booking-action-area .booking-filter-group-area .form-search-tech-filter i {
        display: flex;
        min-width: var(--px-40);
        background: inherit;
        align-items: center;
        height: var(--px-40);
        color: var(--bs-blue);
        justify-content: center;
        border-radius: 4px 0px 0px 4px;
    }

    .booking-action-area .booking-filter-group-area .form-search-tech-filter input {
        width: 100%;
        border: none;
        height: 100%;
        outline: none;
        padding: var(--px-16);
        border-radius: 0px 4px 4px 0px;
        color: var(--theme-mode-text);
        font: normal normal 600 var(--s-14);
        background: inherit;
        padding-left: 0;
    }

.booking-filter-parent {
    z-index: 2;
    width: 100%;
    display: flex;
    cursor: pointer;
    overflow: hidden;
    gap: var(--px-10);
    align-items: center;
    flex-direction: row;
    padding: 0 var(--px-16);
    min-height: var(--px-36);
    max-height: var(--px-36);
    transition: all 0.4s ease 0s;
    color: var(--theme-mode-text);
    justify-content: space-between;
    font: normal normal 600 var(--s-16);
    border-radius: 0;
}

    .booking-filter-parent:hover {
        color: var(--bs-main);
        background: var(--bs-main-100);
    }

    .booking-filter-parent .team-member {
        display: flex;
        align-items: center;
    }

        .booking-filter-parent .team-member p {
            font: normal normal 600 var(--s-16);
        }

    .booking-filter-parent .quantity-staff-filter {
        display: flex;
        border-radius: 4px;
        align-items: center;
        margin: var(--px-4);
        width: var(--px-40);
        justify-content: center;
        min-height: var(--px-20);
        background: var(--salon-appt);
        font: normal normal 700 var(--s-13);
        color: var(--theme-mode-text-white);
    }

    .booking-filter-parent .fa-regular {
        transition: all 0.3s ease 0s;
        font-size: var(--px-14);
        color: var(--bs-main);
    }

.booking-action-area .booking-filter-group-area .checkbox-option-select {
    width: 100%;
    display: grid;
    cursor: pointer;
    align-items: center;
    min-height: var(--px-36);
    max-height: var(--px-36);
    grid-gap: var(--px-12);
}

    .booking-action-area .booking-filter-group-area .checkbox-option-select p {
        margin: 0px;
        z-index: 1000;
        text-transform: capitalize;
        color: var(--theme-mode-text);
        font: normal normal 500 var(--s-14);
    }

.booking-action-area .booking-filter-group-area .checkbox-option-select {
    display: none;
}

.booking-action-area .booking-filter-group-area .quick-info-tech {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: flex-start;
    grid-gap: 0 var(--px-16);
    flex-direction: column;
    justify-content: center;
}

    .booking-action-area .booking-filter-group-area .quick-info-tech span.turn {
        display: flex;
        gap: var(--px-4);
        align-items: center;
        color: var(--theme-mode-gray);
        font: italic normal 400 var(--s-12);
    }

        .booking-action-area .booking-filter-group-area .quick-info-tech span.turn strong {
            color: var(--theme-mode-text);
            font: normal normal 600 var(--s-12);
        }

    .booking-action-area .booking-filter-group-area .quick-info-tech .photo {
        grid-row: span 2;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--px-42);
        height: var(--px-42);
        position: relative;
        width: var(--px-42);
    }

    .booking-action-area .booking-filter-group-area .quick-info-tech .track-img-error-box,
    .booking-action-area .booking-filter-group-area .quick-info-tech img {
        display: flex;
        align-items: center;
        width: var(--px-42);
        height: var(--px-42);
        justify-content: center;
        border-radius: var(--px-42);
        border: 3px solid var(--theme-mode-bs-200);
    }

    .booking-action-area .booking-filter-group-area .quick-info-tech .index-turn {
        display: flex;
        overflow: hidden;
        position: absolute;
        align-items: center;
        width: var(--px-18);
        height: var(--px-18);
        justify-content: center;
        background: var(--theme-mode-bs-200);
        border-radius: var(--px-20);
        right: -8px;
        bottom: -2px;
        color: var(--theme-mode-text);
        font: normal normal 800 var(--s-12);
        border: 1px solid var(--theme-mode-border);
        box-shadow: var(--shadow-1);
    }

    .booking-action-area .booking-filter-group-area .quick-info-tech p {
        font: normal normal 500 var(--s-12);
    }

.booking-action-area .booking-filter-group-area:not(.opening) .tech-list-calendar {
    display: none;
}

.booking-action-area .booking-filter-group-area.opening .tech-list-calendar {
    display: flex;
}

.booking-action-area .booking-filter-group-area.opening .checkbox-option-select {
    display: flex;
}

.booking-action-area .booking-filter-group-area.opening .booking-filter-parent {
    color: var(--bs-main);
    background: var(--bs-main-100);
}

.booking-page-body .box-tix-appt-book {
    z-index: 5;
    display: flex;
    border-style: solid;
    position: absolute;
    background: var(--theme-mode-bs-200);
    flex-direction: column;
    border-radius: 0 0 6px 6px;
    border-width: 5px 1px 1px 1px;
    justify-content: flex-end;
    border-color: #A6A6A6;
    border-top-color: var(--tix-confirm);
    box-shadow: 0px 6px 10px 0px rgb(0 0 0 / 10%), 0px 1px 18px 0px rgb(0 0 0 / 12%), 0px 3px 5px -1px rgb(0 0 0 / 16%);
    /* Fix for touch issues */
    pointer-events: auto;
    user-select: auto !important; /* Allow touch interaction */
    touch-action: auto !important; /* Allow default touch behavior */
}

    .booking-page-body .box-tix-appt-book.no-status .appt-book-ser-time {
        padding-right: var(--px-8);
    }

    .booking-page-body .box-tix-appt-book.no-status .tix-status-book {
        width: 0;
    }

    .booking-page-body .box-tix-appt-book.noDrag {
    }

        .booking-page-body .box-tix-appt-book.noDrag .tix-info-book {
            pointer-events: none !important;
        }

    .booking-page-body .box-tix-appt-book.salonAppt {
        z-index: 8;
    }

    .booking-page-body .box-tix-appt-book:hover, .booking-page-body .box-tix-appt-book.popup, .booking-page-body .box-tix-appt-book:active {
        z-index: 8;
    }

    .booking-page-body .box-tix-appt-book.ticket-is-showing, .booking-page-body .box-tix-appt-book.tickets-is-showing, .booking-page-body .box-tix-appt-book.group-is-showing {
        outline: 2px solid var(--bs-blue);
        box-shadow: rgba(133, 68, 249, 0.23) 0px 1px 2px 6px !important;
    }

    .booking-page-body .box-tix-appt-book:not(.weekView).active {
        width: var(--min-column) !important;
        box-shadow: rgba(0, 0, 0, 0.5) 2px 2px 15px;
    }

    .booking-page-body .box-tix-appt-book.active .tix-info-book {
        color: var(--theme-mode-text-dark);
    }

    .booking-page-body .box-tix-appt-book.animation {
        animation: 250ms ease 0s 1 normal forwards running cd-move-in;
    }

    .booking-page-body .box-tix-appt-book.active {
        z-index: 40;
    }

    .booking-page-body .box-tix-appt-book:hover,
    .booking-page-body .box-tix-appt-book:focus {
        box-shadow: rgba(0, 0, 0, 0.5) 2px 2px 28px;
    }

        .booking-page-body .box-tix-appt-book:hover .tix-bar-resize-book,
        .booking-page-body .box-tix-appt-book:hover .tix-info-book,
        .booking-page-body .box-tix-appt-book:focus .tix-info-book {
            z-index: 4;
        }

        .booking-page-body .box-tix-appt-book:hover .tix-status-book,
        .booking-page-body .box-tix-appt-book.is-popup .tix-status-book {
            max-height: unset;
            z-index: 50;
        }

    .booking-page-body .box-tix-appt-book.opacity-processing {
        pointer-events: none;
        opacity: 0.4;
    }

    .booking-page-body .box-tix-appt-book.dragging, .booking-page-body .box-tix-appt-book.appointment-copy, .booking-page-body .box-tix-appt-book.holding-to-change-duration {
        z-index: 50;
        box-shadow: rgba(0, 0, 0, 0.533) 2px 2px 28px;
    }

        .booking-page-body .box-tix-appt-book.appointment-copy .resize-s, .booking-page-body .box-tix-appt-book.timeOff .resize-s {
            pointer-events: none !important;
        }

    .booking-page-body .box-tix-appt-book.timeOff {
        box-shadow: none;
        text-decoration: none;
        border-color: rgb(132, 132, 132) !important;
        background-size: 12px 12px !important;
        background-image: linear-gradient(45deg, transparent 46%, rgb(16 25 40 / 49%) 49%, rgba(16, 25, 40, 0.2) 51%, transparent 55%) !important;
        background-color: #c9c9c9 !important;
    }

        .booking-page-body .box-tix-appt-book.timeOff .tix-info-book {
            color: var(--theme-mode-text-dark);
        }

    .booking-page-body .box-tix-appt-book .tix-info-book {
        width: 100%;
        display: flex;
        overflow: hidden;
        height: calc(100%);
        align-items: start;
        position: relative;
        white-space: pre-line;
        justify-content: start;
        flex-direction: column;
        text-overflow: ellipsis;
        color: rgb(255, 255, 255);
        text-transform: capitalize;
        font: normal normal 600 var(--s-12);
    }

    .booking-page-body .box-tix-appt-book.black-font .tix-info-book {
        color: var(--theme-mode-text);
    }

    .booking-page-body .box-tix-appt-book .tix-info-book.line-through {
        font-style: italic;
        text-decoration: line-through;
    }

    .booking-page-body .box-tix-appt-book .tix-moved-book {
        position: absolute;
        height: var(--px-30);
        display: none;
        align-items: center;
        justify-content: center;
        flex-flow: column;
        font: normal normal 700 var(--s-12);
        color: rgb(255, 255, 255);
        top: -40px;
        left: -2px;
        cursor: pointer;
        z-index: 20;
    }

    .booking-page-body .box-tix-appt-book.dragging .tix-moved-book {
        display: grid;
        grid-gap: 8px;
        justify-items: end;
        grid-template-columns: 1fr 1fr;
    }

    .booking-page-body .box-tix-appt-book .tix-moved-book .holding-revert-appointment {
        height: 100%;
        border-radius: 4px;
        width: 95%;
        align-items: center;
        display: inline-grid;
        justify-content: center;
        box-shadow: rgba(0, 0, 0, 0.3) 0px 3px 20px;
        color: var(--theme-mode-text-white);
        background: var(--bs-gray-500) 0% 0% no-repeat padding-box;
        min-width: var(--px-80);
    }

    .booking-page-body .box-tix-appt-book .tix-moved-book .holding-moved-appointment {
        height: 100%;
        background: var(--bs-blue) 0% 0% no-repeat padding-box;
        box-shadow: rgba(0, 0, 0, 0.3) 0px 3px 20px;
        border-radius: 4px;
        width: 95%;
        display: inline-grid;
        align-items: center;
        justify-content: center;
        color: var(--theme-mode-text-white);
        min-width: var(--px-80);
    }

        .booking-page-body .box-tix-appt-book .tix-moved-book .holding-moved-appointment:hover, .booking-page-body .box-tix-appt-book .tix-moved-book .holding-revert-appointment:hover {
            opacity: 0.6;
        }

    .booking-page-body .box-tix-appt-book .tix-copy-book {
        position: absolute;
        height: var(--px-30);
        display: none;
        align-items: center;
        justify-content: center;
        flex-flow: column;
        font: normal normal 700 var(--s-12);
        color: rgb(255, 255, 255);
        top: -3px;
        right: 0px;
        cursor: pointer;
        z-index: 20;
    }

    .booking-page-body .box-tix-appt-book.clone-appointment-copy .tix-copy-book {
        display: flex;
    }

    .booking-page-body .box-tix-appt-book.holding-to-change-duration .tix-moved-book {
        display: none !important;
    }

    .booking-page-body .box-tix-appt-book .tix-copy-book .holding-drag-appointment {
        position: absolute;
        height: 24px;
        border-radius: 6px 6px 0px 0px;
        width: 72px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-flow: column;
        font: normal normal 800 var(--s-12);
        color: var(--theme-mode-text);
        bottom: var(--px-28);
        right: 0px;
        background: var(--bs-blue);
    }

    .booking-page-body .box-tix-appt-book .time {
        width: 100%;
        padding: 5px var(--px-8);
        color: var(--theme-mode-text);
        font: normal normal 500 var(--s-11);
        opacity: .8;
    }

    .booking-page-body .box-tix-appt-book .client {
        background: unset !important;
        color: var( --theme-mode-text);
        font: normal normal 700 var( --s-12);
        width: 100%;
        min-height: var(--px-20);
        padding: var(--px-4) var(--px-6);
        padding-bottom: 0;
    }

    .booking-page-body .box-tix-appt-book .appt-book-ser-time {
        width: 100%;
        display: flex;
        flex-direction: column;
        padding: 2px var(--px-8);
        padding-right: var(--px-16);
    }

        .booking-page-body .box-tix-appt-book .appt-book-ser-time .ser {
            width: 100%;
            display: flex;
            padding: 4px;
            overflow: hidden;
            flex-direction: row;
            align-items: center;
            border-radius: 4px;
            box-shadow: 1px 1px;
            border: 1px solid;
            color: var(--theme-mode-text);
            font: normal normal 500 var(--s-11);
        }

            .booking-page-body .box-tix-appt-book .appt-book-ser-time .ser i {
                font-size: var(--px-10);
                margin-right: 2px;
                box-shadow: var(--shadow-1);
                border-radius: 100%;
            }

    .booking-page-body .box-tix-appt-book.is-popup .appt-book-ser-time .ser,
    .booking-page-body .box-tix-appt-book.is-popup .time,
    .booking-page-body .box-tix-appt-book.is-popup .ser span,
    .booking-page-body .box-tix-appt-book.is-popup .client {
        color: var(--theme-mode-text-white) !important;
    }

    .booking-page-body .box-tix-appt-book .appt-book-ser-time .time {
        font: normal normal 700 var(--s-11);
        white-space: nowrap;
    }

    .booking-page-body .box-tix-appt-book .tix-info-book .noted {
        display: flex;
        padding: 0 var(--px-8);
        font: italic normal 500 var(--s-12);
    }

        .booking-page-body .box-tix-appt-book .tix-info-book .noted.empty {
            margin: 0px;
            height: 0px;
        }

        .booking-page-body .box-tix-appt-book .tix-info-book .noted mark {
            padding: 0px;
            background: unset;
            text-decoration: underline;
            color: var(--theme-mode-text);
            font: italic normal 500 var(--s-12);
        }

    .booking-page-body .box-tix-appt-book .tix-bar-resize-book {
        position: absolute;
        bottom: 0px;
        left: -6px;
        opacity: 1;
        height: var(--px-28);
        width: calc(100% + 6px);
        display: flex;
        align-items: center;
        place-content: flex-end center;
        padding: 2px;
    }

        .booking-page-body .box-tix-appt-book .tix-bar-resize-book i {
            cursor: ns-resize;
            position: relative;
            bottom: 2px;
        }

    .booking-page-body .box-tix-appt-book.active .tix-bar-resize-book,
    .booking-page-body .box-tix-appt-book:hover .tix-bar-resize-book {
        opacity: 1;
    }

    .booking-page-body .box-tix-appt-book.haspassedDate .holding-moved-appointment, .booking-page-body .box-tix-appt-book.haspassedDate .resize-s, .booking-page-body .box-tix-appt-book.block-confirm .tix-bar-resize-book.resize-s, .booking-page-body .box-tix-appt-book.block-confirm .holding-moved-appointment, .booking-page-body .box-tix-appt-book[status="3"] .tix-bar-resize-book.resize-s, .booking-page-body .box-tix-appt-book[status="4"] .tix-bar-resize-book.resize-s, .booking-page-body .box-tix-appt-book[status="7"] .tix-bar-resize-book.resize-s, .booking-page-body .box-tix-appt-book[status="8"] .tix-bar-resize-book.resize-s, .booking-page-body .box-tix-appt-book[status="9"] .tix-bar-resize-book.resize-s {
        display: none;
        pointer-events: none;
    }

    .booking-page-body .box-tix-appt-book.is-popup {
        background: var(--tix-confirm);
    }


    .booking-page-body .box-tix-appt-book[status="1"][confob="false"][bookonl="true"] {
        border-color: var(--tix-unConfirm);
    }

    .booking-page-body .box-tix-appt-book.is-popup[status="1"][confob="false"][bookonl="true"] {
        background: var(--tix-unConfirm);
    }

    /*
.booking-page-body .box-tix-appt-book[status="1"][confob="false"][bookonl="false"] .client.wrap-line-1,
.booking-page-body .box-tix-appt-book.is-popup[status="1"][confob="false"][bookonl="false"] {
    background: var(--tix-confirm);
}

.booking-page-body .box-tix-appt-book[status="1"][confob="false"][bookonl="true"] .client.wrap-line-1,
.booking-page-body .box-tix-appt-book.is-popup[status="1"][confob="false"][bookonl="true"] {
    background: var(--bs-dudu);
}

.booking-page-body .box-tix-appt-book[status="1"][confob="false"][bookonl="true"] {
    border-color: var(--bs-dudu);
}

.booking-page-body .box-tix-appt-book[status="1"][confob="true"] .client.wrap-line-1,
.booking-page-body .box-tix-appt-book.is-popup[status="1"][confob="true"] {
    background: var(--tix-confirm);
}

.booking-page-body .box-tix-appt-book[status="1"] {
    border-color: var(--tix-confirm);
}

.booking-page-body .box-tix-appt-book[status="2"] .client.wrap-line-1,
.booking-page-body .box-tix-appt-book.is-popup[status="2"] {
    background: var(--tix-wait);
}

.booking-page-body .box-tix-appt-book[status="2"] {
    border-color: var(--tix-wait);
}

.booking-page-body .box-tix-appt-book[status="3"] .client.wrap-line-1,
.booking-page-body .box-tix-appt-book.is-popup[status="3"] {
    background: var(--tix-inservice);
}

.booking-page-body .box-tix-appt-book[status="3"] {
    border-color: var(--tix-inservice);
}

.booking-page-body .box-tix-appt-book[status="8"] .client.wrap-line-1,
.booking-page-body .box-tix-appt-book.is-popup[status="8"] {
    background: rgb(249, 89, 83);
}

.booking-page-body .box-tix-appt-book[status="8"] {
    border-color: rgb(249, 89, 83);
}


*/

    .booking-page-body .box-tix-appt-book[status="7"] .client.wrap-line-1,
    .booking-page-body .box-tix-appt-book[status="9"] .client.wrap-line-1,
    .booking-page-body .box-tix-appt-book.is-popup[status="7"],
    .booking-page-body .box-tix-appt-book.is-popup[status="9"] {
        text-decoration: line-through;
        background: var(--tix-closed);
    }

    .booking-page-body .box-tix-appt-book[status="7"],
    .booking-page-body .box-tix-appt-book[status="8"],
    .booking-page-body .box-tix-appt-book[status="4"],
    .booking-page-body .box-tix-appt-book[status="9"] {
        border-color: var(--bs-gray-700);
    }

    .booking-page-body .box-tix-appt-book[status="2"]::after {
        left: 0;
        bottom: 0;
        opacity: 1;
        z-index: 12;
        width: 100%;
        content: '';
        height: 100%;
        display: flex;
        align-items: end;
        border-radius: 4px;
        position: absolute;
        background: #00000050;
        justify-content: start;
        mix-blend-mode: multiply;
        padding: 6px var( --px-16);
        font: normal normal 900 var( --s-15);
    }

    .booking-page-body .box-tix-appt-book[status="3"]::after {
        left: 0;
        bottom: 0;
        opacity: 1;
        z-index: 12;
        content: '';
        height: 100%;
        display: flex;
        align-items: end;
        border-radius: 4px;
        position: absolute;
        background: #00000092;
        justify-content: start;
        mix-blend-mode: multiply;
        padding: 6px var( --px-16);
        border-radius: 0px 4px 12px 4px;
        font: normal normal 900 var( --s-15);
        width: 100%;
    }

    .booking-page-body .box-tix-appt-book[status="4"]::after,
    .booking-page-body .box-tix-appt-book[status="7"]::after,
    .booking-page-body .box-tix-appt-book[status="9"]::after {
        left: 0;
        bottom: 0;
        opacity: 1;
        z-index: 12;
        width: 100%;
        content: '';
        height: 100%;
        display: flex;
        align-items: end;
        border-radius: 0px;
        position: absolute;
        background: #00000088;
        justify-content: start;
        mix-blend-mode: multiply;
        padding: 6px var( --px-16);
        font: normal normal 900 var( --s-15);
    }

    .booking-page-body .box-tix-appt-book[status="8"]::after,
    .booking-page-body .box-tix-appt-book[status="7"]::after {
        left: 0;
        bottom: 0;
        opacity: .3;
        z-index: 12;
        width: 100%;
        content: '';
        height: 100%;
        display: flex;
        align-items: end;
        border-radius: 0px;
        position: absolute;
        background: #000;
        justify-content: start;
        mix-blend-mode: multiply;
        padding: 6px var( --px-16);
        font: normal normal 900 var( --s-15);
    }

    .booking-page-body .box-tix-appt-book::after {
        border-radius: 0 0 6px 6px !important;
    }

    .booking-page-body .box-tix-appt-book.no-status::after {
        width: 100% !important;
    }

    .booking-page-body .box-tix-appt-book .tix-status-book {
        z-index: 123123123123;
        gap: 2px;
        top: 0;
        height: auto;
        display: flex;
        overflow: hidden;
        position: absolute;
        width: var(--px-24);
        flex-direction: column;
        padding-bottom: var(--px-2);
        right: -12px;
        background: white;
        color: var(--bs-main);
        border-radius: var(--px-12);
        box-shadow: var(--shadow-1);
        border: 1px solid var(--theme-mode-border);
        max-height: 100%;
        transition: all .4s;
    }

        .booking-page-body .box-tix-appt-book .tix-status-book .top:not(.dis-none) {
            width: var( --px-22);
            min-height: var( --px-22);
            display: flex;
            align-items: center;
            cursor: context-menu;
            justify-content: center;
            color: var(--bs-gray-600);
            border-radius: 100%;
        }

        .booking-page-body .box-tix-appt-book .tix-status-book i {
            font-size: var(--px-14);
            font-weight: 900;
        }

            .booking-page-body .box-tix-appt-book .tix-status-book i.fa-user-group {
            }

            .booking-page-body .box-tix-appt-book .tix-status-book i.fa-message-lines {
                color: var(--bs-gray-600);
            }

            .booking-page-body .box-tix-appt-book .tix-status-book i.fa-user-group-simple {
                color: var(--bs-green);
            }

            .booking-page-body .box-tix-appt-book .tix-status-book i.fa-user-xmark {
                color: var(--bs-gray-600);
            }

            .booking-page-body .box-tix-appt-book .tix-status-book i.fa-thumbs-up {
                color: var(--bs-main-400);
            }

            .booking-page-body .box-tix-appt-book .tix-status-book i.fa-mobile-button {
                color: var(--bs-gray-700);
                font-weight: 300;
                font-size: var(--px-20);
            }

            .booking-page-body .box-tix-appt-book .tix-status-book i.fa-sack-dollar {
                color: var(--bs-teal);
            }

        .booking-page-body .box-tix-appt-book .tix-status-book .bottom {
            position: absolute;
            right: var(--px-6);
        }

    .booking-page-body .box-tix-appt-book .special {
        position: absolute;
        top: calc(var(--px-7) * -1);
        left: calc(var(--px-20) * -1);
        z-index: 28;
    }

        .booking-page-body .box-tix-appt-book .special img {
            transform: scale(0.8);
        }

.booking-page-body[filter="1"] .box-tix-appt-book[bookonl="false"], .booking-page-body[filter="2"] .box-tix-appt-book[bookonl="true"] {
    display: none;
}

#booking-page-body-id .general-tix-bar {
    position: absolute;
    inset: 0px;
    z-index: 8;
}

    #booking-page-body-id .general-tix-bar.noScroll {
        width: 0px;
        z-index: 10;
        position: sticky;
        left: var(--w-hour);
    }

    #booking-page-body-id .general-tix-bar.dragProcessing .box-tix-appt-book:not(.dragging) {
        opacity: 0.4;
        pointer-events: none;
    }

    #booking-page-body-id .general-tix-bar.dragProcessing .box-tix-appt-book.clone-appointment-copy, #booking-page-body-id .general-tix-bar.dragProcessing .box-tix-appt-book.holding-to-moved {
        opacity: 0.8;
    }

#popup-container-custom-id .btn-bottom-popup-group {
    border: 0px;
    z-index: 2;
    width: 98%;
    bottom: -2px;
    display: flex;
    position: sticky;
    gap: var(--px-6);
    align-items: center;
    justify-content: center;
    background: var(--theme-mode-bs-400);
}

#popup-container-custom-id .action-operation-button-click.checkin-group {
    border: 0px;
    z-index: 2;
    width: 98%;
    bottom: 5px;
    display: flex;
    cursor: pointer;
    position: sticky;
    margin: 5px auto;
    gap: var(--px-16);
    align-items: center;
    justify-content: center;
    background: var(--tix-inservice);
    font: normal normal 700 var(--s-16);
}

#popup-container-custom-id .action-operation-button-click.decline {
    background: var(--theme-mode-bs-400);
}

#popup-container-custom-id .action-operation-button-click.decline {
    color: var(--bs-danger);
}

#popup-container-custom-id .action-operation-button-click.checkin-group p {
    font: normal normal 800 var(--s-16);
}

#popup-container-custom-id .action-operation-button-click.checkin-group i {
    font-size: var(--px-20);
}

.popup-detail-ticket-book {
    display: flex;
    position: relative;
    height: fit-content;
    width: var(--px-500);
    padding: var(--px-20);
    flex-direction: column;
}

    .popup-detail-ticket-book .header-popup {
        padding-top: var(--px-44);
    }

    .popup-detail-ticket-book .back-status {
        top: 0px;
        left: 0px;
        right: 0px;
        z-index: 0;
        display: flex;
        position: absolute;
        height: var(--px-100);
        padding: var(--px-16);
        border-radius: 4px 4px 0px 0px;
        background: var(--bs-dudu);
        justify-content: space-between;
    }

        .popup-detail-ticket-book .back-status p {
            flex: 1 1 0%;
            display: flex;
            overflow: hidden;
            white-space: nowrap;
            flex-direction: column;
            text-size-adjust: 100%;
            text-overflow: ellipsis;
            text-transform: capitalize;
            color: var(--theme-mode-text-white);
            font-style:;
            font-variant-ligatures:;
            font-variant-caps:;
            font-variant-numeric:;
            font-variant-east-asian:;
            font-variant-alternates:;
            font-variant-position:;
            font-weight:;
            font-stretch:;
            line-height:;
            font-family:;
            font-optical-sizing:;
            font-kerning:;
            font-feature-settings:;
            font-variation-settings:;
            font-size: clamp(var(--min-font-size), calc(var(--min-font-size) + 28%), var(--max-font-size));
        }

            .popup-detail-ticket-book .back-status p span {
                text-decoration: underline;
                font: normal normal 700 var(--s-12);
            }

        .popup-detail-ticket-book .back-status .action-operation-button-click {
            display: flex;
            gap: var(--px-10);
            align-items: center;
            height: var(--px-32);
            padding: 0 var(--px-16);
            margin-left: var(--px-10);
            color: var(--theme-mode-text);
            justify-content: space-around;
            background: var(--theme-mode-bs-400);
        }

            .popup-detail-ticket-book .back-status .action-operation-button-click.decline, .popup-detail-ticket-book .back-status .action-operation-button-click.decline p {
                color: var(--bs-danger);
            }

            .popup-detail-ticket-book .back-status .action-operation-button-click i {
                font-size: var(--px-20);
            }

            .popup-detail-ticket-book .back-status .action-operation-button-click p {
                color: var(--theme-mode-text);
                font: normal normal 800 var(--s-15);
            }

            .popup-detail-ticket-book .back-status .action-operation-button-click.slide i, .popup-detail-ticket-book .back-status .action-operation-button-click.slide p {
                position: absolute;
                left: -100%;
            }

    .popup-detail-ticket-book .info-client {
        z-index: 1;
        position: relative;
        display: grid;
        grid-template-areas: "photo name reminder" "photo phone reminder";
        align-items: center;
        border-radius: 8px;
        padding: var(--px-10);
        grid-gap: 2px var(--px-10);
        color: var(--theme-mode-text);
        background: var(--theme-mode-bs-300);
        grid-template-columns: var(--px-60) 1fr;
        border: 1px solid var(--theme-mode-border);
    }

        .popup-detail-ticket-book .info-client .action-operation-button-click {
            grid-area: reminder;
            color: var(--theme-mode-btn-text);
            height: 100%;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-evenly;
            border: 0px;
            outline: 0px;
            cursor: pointer;
            border-radius: 4px;
            padding: 0 var(--px-10);
            background: var(--bs-dudu-o);
        }

        .popup-detail-ticket-book .info-client .name {
            grid-area: name;
            font: normal normal 800 var(--s-18);
        }

        .popup-detail-ticket-book .info-client .phone {
            grid-area: phone;
            font: normal normal 600 var(--s-14);
        }

        .popup-detail-ticket-book .info-client .client-photo {
            grid-area: photo;
            display: flex;
            height: var(--px-60);
            align-items: center;
            justify-content: center;
            background: var(--bs-dudu-o);
            border-radius: var(--px-60);
            color: var(--theme-mode-text);
            font: normal normal 800 var(--s-22);
        }

    .popup-detail-ticket-book .client-photo span {
        color: var(--theme-mode-text-dark);
    }

    .popup-detail-ticket-book .client-photo img {
        width: 100%;
        height: 100%;
    }
    /*
    .popup-detail-ticket-book .btn-action-tracking-status {
        display: grid;
        height: var(--px-80);
        border-radius: 8px;
        justify-items: center;
        padding: var(--px-12) 0;
        grid-template-columns: repeat(auto-fit, minmax(var(--px-60), 1fr));
    }

        .popup-detail-ticket-book .btn-action-tracking-status .action-operation-button-click {
            height: 100%;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
            padding: 0px;
            outline: 0px;
            border-radius: 0px;
            cursor: pointer;
            color: var(--theme-mode-text);
        }

            .popup-detail-ticket-book .btn-action-tracking-status .action-operation-button-click:hover {
                border: 0px;
                background: var(--bs-dudu-o);
            }

            .popup-detail-ticket-book .btn-action-tracking-status .action-operation-button-click:last-of-type {
                border-right: 0px;
            }

            .popup-detail-ticket-book .btn-action-tracking-status .action-operation-button-click i {
                color: var(--theme-mode-text);
                font-size: var(--px-22);
            }

            .popup-detail-ticket-book .btn-action-tracking-status .action-operation-button-click p {
                font: normal normal 700 var(--s-12);
                color: var(--theme-mode-text);
                opacity: 0.7;
            }
*/
    .popup-detail-ticket-book .body-popup {
        display: flex;
        border-radius: 0px;
        flex-direction: column;
        padding-top: var(--px-16);
        border-top: 1px solid var(--theme-mode-border);
    }

        .popup-detail-ticket-book .body-popup .table-tech-item {
            display: flex;
            flex-direction: column;
        }

        .popup-detail-ticket-book .body-popup .tech-service {
            display: grid;
            border-radius: 4px;
            align-items: center;
            padding: var(--px-12);
            color: var(--theme-mode-text);
            background: var(--theme-mode-bs-100);
            grid-template-columns: 1fr var(--px-80) var(--px-120);
        }

            .popup-detail-ticket-book .body-popup .tech-service p {
                color: var(--theme-mode-text);
                font: normal normal 800 var(--s-12);
            }

            .popup-detail-ticket-book .body-popup .tech-service .start-space {
                display: grid;
                align-items: center;
                grid-template-columns: 1fr var(--px-60) var(--px-36);
            }

            .popup-detail-ticket-book .body-popup .tech-service .text-time {
                color: var(--bs-blue);
                font: normal normal 800 var(--s-12);
            }

            .popup-detail-ticket-book .body-popup .tech-service .action-operation-button-click {
                border: 0px;
                outline: 0px;
                display: grid;
                background: rgb(255, 255, 255);
                padding: 5px 8px;
                align-items: center;
                color: var(--theme-mode-btn-text);
                font: normal normal 700 var(--s-12);
                grid-template-columns: var(--px-20) 1fr;
            }

                .popup-detail-ticket-book .body-popup .tech-service .action-operation-button-click i {
                }

        .popup-detail-ticket-book .body-popup .item-services {
            display: grid;
            align-items: center;
            font: normal normal 600 var(--s-15);
            grid-template-columns: 1fr var(--px-80) var(--px-120);
        }

        .popup-detail-ticket-book .body-popup ul::after {
            content: "";
            border: 1px solid var(--theme-mode-bs-qs);
            position: absolute;
            top: 3px;
            bottom: 0px;
            left: var(--px-22);
            display: block;
        }

        .popup-detail-ticket-book .body-popup li {
            padding: var(--px-10);
        }

            .popup-detail-ticket-book .body-popup li::before {
                top: var(--px-15);
                height: var(--px-12);
                left: calc(var(--px-13) * -1);
                width: var(--px-12);
                border: 2px solid var(--bs-blue);
                background: var(--theme-mode-bs-qs);
            }

.booking-page-body .booking-calendar-area .general-time-line-book {
    width: 100%;
    z-index: 50;
    position: absolute;
    pointer-events: none;
    border-bottom: 1px solid rgb(228, 90, 116);
}

    .booking-page-body .booking-calendar-area .general-time-line-book::after {
        position: absolute;
        background: rgba(80, 80, 80, 0.137);
        content: "";
        left: 0px;
        height: 1e+09px;
        width: 100%;
        bottom: 0px;
    }

.booking-page-body .booking-calendar-area .general-time-box-book {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-danger);
    border-radius: var(--px-10);
    position: absolute;
    width: 97%;
    height: var(--px-20);
    margin-top: calc(var(--px-10) * -1);
    font: normal normal 500 var(--s-10);
    color: var(--theme-mode-text-white);
    border: 0px;
    top: var(--px-10);
    right: 2px;
    z-index: 5;
    white-space: nowrap;
}

.booking-page-body .booking-calendar-area .general-time-box-drag {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-teal);
    border-radius: var(--px-10);
    position: absolute;
    width: 98%;
    height: var(--px-20);
    margin-top: calc(var(--px-10) * -1);
    font: normal normal 700 var(--s-10);
    color: var(--theme-mode-text-white);
    border: 0px;
    top: var(--px-10);
    right: 2px;
    z-index: 5;
    white-space: nowrap;
}

.booking-page-body .booking-calendar-area .mouse-over-timer {
    top: 99%;
    right: 0%;
    border: 0;
    margin: 0px;
    z-index: 10;
    display: flex;
    cursor: pointer;
    position: absolute;
    align-items: center;
    white-space: nowrap;
    padding: var(--px-5);
    height: var(--height-row);
    background: var(--bs-main-100);
    transition: left 200ms ease 0s;
    place-content: center flex-start;
    color: var(--bs-main-600);
    font: normal normal 600 var(--s-14);
}

    .booking-page-body .booking-calendar-area .mouse-over-timer.drag-time, .booking-page-body .booking-calendar-area .mouse-over-timer.drag-end {
        background-size: 8px 8px;
        background-color: rgb(225, 225, 225);
        background-image: linear-gradient(45deg, transparent 46%, rgba(16, 25, 40, 0.2) 49%, rgba(16, 25, 40, 0.2) 51%, transparent 55%);
    }

    .booking-page-body .booking-calendar-area .mouse-over-timer.drag-start {
        background-size: 8px 8px;
        background-color: var(--bs-dudu-o);
        background-image: linear-gradient(45deg, transparent 46%, rgba(16, 25, 40, 0.2) 49%, rgba(16, 25, 40, 0.2) 51%, transparent 55%);
    }

    .booking-page-body .booking-calendar-area .mouse-over-timer.dis-none, .booking-page-body .booking-calendar-area .mouse-over-timer.transform {
        pointer-events: none;
    }

    .booking-page-body .booking-calendar-area .mouse-over-timer.processing-booking {
        border-radius: 4px;
        color: var(--theme-mode-text);
        background: var(--theme-mode-text-white);
        border: 2px solid var(--theme-mode-btn-text);
    }

    .booking-page-body .booking-calendar-area .mouse-over-timer.dragging-appt {
        display: none !important;
    }

.area-time-off-on-calendar {
    display: flex;
    flex-flow: column;
    padding: var(--px-10) var(--px-16) var(--px-16);
}

    .area-time-off-on-calendar p.title {
        text-align: center;
        padding-top: var(--px-10);
        color: var(--theme-mode-text);
        font: normal normal 600 var(--s-18);
    }

    .area-time-off-on-calendar .form-type-time-off {
        display: grid;
        gap: 10px;
        padding-top: var(--px-20);
        grid-template-rows: repeat(auto-fit, minmax(var(--px-50), 1fr));
        grid-template-columns: repeat(2, 1fr);
    }

        .area-time-off-on-calendar .form-type-time-off .input-type-add {
            display: flex;
            gap: var(--px-10);
            flex-direction: column;
            font: normal normal 600 var(--s-14);
        }

            .area-time-off-on-calendar .form-type-time-off .input-type-add select {
                color: var(--theme-mode-text);
                border: 1px solid var(--theme-mode-border);
            }

        .area-time-off-on-calendar .form-type-time-off .span-2 {
            grid-column: span 2;
        }

        .area-time-off-on-calendar .form-type-time-off textarea {
            border-radius: 4px;
            padding: var(--px-10);
            min-height: var(--px-100);
            color: var(--theme-mode-text);
            font: normal normal 500 var(--s-14);
            background: var(--theme-mode-bs-300);
            border: 1px solid var(--theme-mode-border);
        }

        .area-time-off-on-calendar .form-type-time-off button {
            max-height: var(--px-50);
        }

.booking-page-body .box-tix-appt-book.holding-to-moved, .booking-page-body .box-tix-appt-book.clone-appointment-copy {
    opacity: 0.8;
    border-width: 2px;
    pointer-events: none;
    border-style: dashed;
    border-color: var(--bs-dudu) !important;
}

.form-adjus-width-column-calendar {
    display: flex;
    gap: var(--px-10);
    width: var(--px-500);
    padding: var(--px-20);
    flex-direction: column;
    position: relative;
    background: var(--theme-mode-bs-200);
}

    .form-adjus-width-column-calendar .title {
        color: var(--theme-mode-text);
        font: normal normal 700 var(--s-17);
    }

    .form-adjus-width-column-calendar .title-header {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

        .form-adjus-width-column-calendar .title-header p {
            color: var(--theme-mode-text);
            font: normal normal 700 var(--s-24);
            padding: var(--px-16) 0;
            revert-layer;
            revert-layer;
            -;
            --;
            revert-layer;
            -;
            padding-top: 4px;
        }

    .form-adjus-width-column-calendar .calendar-zoom {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
    }

        .form-adjus-width-column-calendar .calendar-zoom p {
            color: var(--theme-mode-text-gray);
            font: normal normal 600 var(--s-16);
        }

    .form-adjus-width-column-calendar button {
        height: 90%;
        display: flex;
        border-radius: 4px;
        align-items: center;
        width: var(--px-100);
        justify-content: center;
        color: var(--theme-mode-text);
        font: normal normal 700 var(--s-15);
        border: 1px solid var(--theme-mode-border);
    }

    .form-adjus-width-column-calendar .range-input-adjust {
        width: 100%;
        display: flex;
        gap: var(--px-10);
        position: relative;
        align-items: center;
    }

    .form-adjus-width-column-calendar input[type="range"] {
        width: 100%;
        border-radius: 10px;
    }

    .form-adjus-width-column-calendar input[type="range"] {
        color: var(--bs-blue);
        --thumb-height: var(--px-30);
        --thumb-width: var(--px-30);
        --track-height: 10px;
        --track-color: rgba(0, 0, 0, 0.2);
        --brightness-hover: 85%;
        --brightness-down: 60%;
        --clip-edges: 0.125em;
    }

    .form-adjus-width-column-calendar input[type="range"] {
        position: relative;
        background: rgba(255, 255, 255, 0);
        overflow: hidden;
    }

        .form-adjus-width-column-calendar input[type="range"]:active {
            cursor: grabbing;
        }

        .form-adjus-width-column-calendar input[type="range"]:disabled {
            filter: grayscale(1);
            opacity: 0.3;
            cursor: not-allowed;
        }

        .form-adjus-width-column-calendar input[type="range"], .form-adjus-width-column-calendar input[type="range"]::-webkit-slider-runnable-track, .form-adjus-width-column-calendar input[type="range"]::-webkit-slider-thumb {
            appearance: none;
            transition: all 100ms ease 0s;
            height: var(--thumb-height);
        }

            .form-adjus-width-column-calendar input[type="range"]::-webkit-slider-runnable-track, .form-adjus-width-column-calendar input[type="range"]::-webkit-slider-thumb {
                position: relative;
            }

            .form-adjus-width-column-calendar input[type="range"]::-webkit-slider-thumb {
                --thumb-radius: calc((var(--thumb-height) * 0.5) - 1px);
                --clip-top: calc((var(--thumb-height) - var(--track-height)) * 0.5 - 0.5px);
                --clip-bottom: calc(var(--thumb-height) - var(--clip-top));
                --clip-further: calc(100% + 1px);
                --box-fill: calc(-100vmax - var(--thumb-width, var(--thumb-height))) 0 0 100vmax currentColor;
                width: var(--thumb-width, var(--thumb-height));
                background-image:;
                background-position-x:;
                background-position-y:;
                background-size:;
                background-repeat:;
                background-attachment:;
                background-origin:;
                background-clip:;
                background-color: rgb(255, 255, 255);
                box-shadow: var(--box-fill);
                border-radius: var(--thumb-width, var(--thumb-height));
                filter: brightness(100%);
                clip-path: polygon( 100% -1px, var(--clip-edges) -1px, 0 var(--clip-top), -100vmax var(--clip-top), -100vmax var(--clip-bottom), 0 var(--clip-bottom), var(--clip-edges) 100%, var(--clip-further) var(--clip-further) );
                display: flex;
                border: 1px solid;
            }

            .form-adjus-width-column-calendar input[type="range"]:hover::-webkit-slider-thumb {
                filter: brightness(var(--brightness-hover));
                cursor: grab;
            }

            .form-adjus-width-column-calendar input[type="range"]:active::-webkit-slider-thumb {
                filter: brightness(var(--brightness-down));
                cursor: grabbing;
            }

            .form-adjus-width-column-calendar input[type="range"]::-webkit-slider-runnable-track {
                background: linear-gradient(var(--track-color) 0 0) scroll no-repeat center / 100% calc(var(--track-height) + 1px);
            }

            .form-adjus-width-column-calendar input[type="range"]:disabled::-webkit-slider-thumb {
                cursor: not-allowed;
            }

.form-option-book-or-block {
    display: flex;
    width: var(--px-200);
    height: var(--px-100);
    padding: var(--px-12);
    flex-direction: column;
    background: var(--theme-mode-bs-200);
}

    .form-option-book-or-block button {
        flex: 1 1 0%;
        display: flex;
        overflow: hidden;
        gap: var(--px-10);
        border-radius: 4px;
        flex-direction: row;
        align-items: center;
        padding: 8px;
        color: var(--theme-mode-text);
        border: 0px !important;
        width: 100% !important;
        font-weight: 500;
    }

        .form-option-book-or-block button i {
            font-size: var(--px-18);
        }

        .form-option-book-or-block button p {
            font: normal normal 600 var(--s-13);
        }

    .form-option-book-or-block p.description {
        flex: 1 1 0%;
        display: flex;
        align-items: center;
        padding: 0px 12px;
        font: normal normal 700 var(--s-11);
    }

.dropdown-menu.filter-calendar.show {
    display: flex;
    gap: var(--px-10);
    width: var(--px-280);
    flex-direction: column;
}

    .dropdown-menu.filter-calendar.show div.checkbox-option-select {
        display: flex;
        align-items: center;
        color: var(--theme-mode-text);
    }

.confirmation-booking {
    display: flex;
    height: 100%;
    position: absolute;
    width: 100%;
    background: var(--theme-mode-bs-300);
    z-index: 150;
    flex-direction: column;
    padding: var(--px-20);
    justify-content: space-between;
    align-items: center;
    gap: var(--px-20);
    overflow: hidden;
}

    .confirmation-booking .confirm-header {
        flex: 1 1 0%;
        display: flex;
        align-items: center;
        flex-direction: column;
        max-height: var(--px-100);
        justify-content: center;
    }

        .confirmation-booking .confirm-header .text {
            color: var(--theme-mode-text);
            font: normal normal 700 var(--s-24);
        }

        .confirmation-booking .confirm-header .review {
            color: var(--theme-mode-gray);
            font: normal normal 700 var(--s-15);
        }

    .confirmation-booking .list-booking-to-confirm {
        width: 80%;
        flex: 1 1 0%;
        display: flex;
        gap: var(--px-10);
        flex-direction: column;
        overflow: auto;
        max-width: var(--px-500);
    }

        .confirmation-booking .list-booking-to-confirm .box-confirmation {
            display: flex;
            flex-direction: column;
            gap: var(--px-16);
            border: 1px solid var(--theme-mode-border);
            border-radius: var(--px-8);
            padding: var(--px-16) var(--px-24);
            background: var(--theme-mode-bs-200);
        }

        .confirmation-booking .list-booking-to-confirm .row-confirmation {
            display: grid;
            gap: var(--px-10);
            align-items: center;
            grid-template-columns: var(--px-28) 1fr;
        }

            .confirmation-booking .list-booking-to-confirm .row-confirmation .client-name-confirm {
                text-align: end;
                grid-column: span 2;
                color: var(--main-color);
                font: normal normal 800 var(--s-17);
            }

            .confirmation-booking .list-booking-to-confirm .row-confirmation .fa-light {
                font-size: var(--px-16);
                opacity: 0.7;
            }

            .confirmation-booking .list-booking-to-confirm .row-confirmation strong {
                font-weight: 700;
            }

            .confirmation-booking .list-booking-to-confirm .row-confirmation p {
                font: normal normal 700 var(--s-14);
            }

    .confirmation-booking .btn-group-confirm {
        flex: 1 1 0%;
        width: 100%;
        display: flex;
        gap: var(--px-16);
        max-height: var(--px-70);
        align-items: center;
        justify-content: center;
        flex-direction: row-reverse;
        padding: 0 var(--px-2);
    }

        .confirmation-booking .btn-group-confirm .btn-confirm-review-booking-apt {
            flex: 1;
            border: 0px;
            color: var(--theme-mode-text);
            font: normal normal 700 var(--s-15);
            background: var(--theme-mode-bs-200);
            display: flex;
            align-items: center;
            flex-direction: column-reverse;
            gap: var(--px-10);
            border: 1px solid var(--theme-mode-border);
            border-radius: var(--px-32);
        }

            .confirmation-booking .btn-group-confirm .btn-confirm-review-booking-apt.confirm {
                color: var(--main-color);
                max-width: var(--px-500);
            }

            .confirmation-booking .btn-group-confirm .btn-confirm-review-booking-apt.sms {
                color: var(--bs-info);
            }

            .confirmation-booking .btn-group-confirm .btn-confirm-review-booking-apt.email {
                color: var(--bs-red);
            }

            .confirmation-booking .btn-group-confirm .btn-confirm-review-booking-apt.both {
                color: var(--bs-green);
            }

            .confirmation-booking .btn-group-confirm .btn-confirm-review-booking-apt span {
                white-space: nowrap;
                color: var(--theme-mode-text);
                font: normal normal 700 var(--s-14);
            }

.booking-action-area .booking-filter-group-area .append-tech-filter-calendar {
    gap: var(--px-10);
}

.tech-list-calendar {
    display: flex;
    position: relative;
    align-items: center;
    min-height: var(--px-36);
    padding: 2px var(--px-20);
    color: var(--theme-mode-text);
    justify-content: space-between;
    font: normal normal 600 var(--s-15);
}

    .tech-list-calendar .color-tech {
        top: 0;
        left: 0;
        width: 4px;
        z-index: 10;
        position: absolute;
        border-radius: 4px;
        height: 100%;
    }

    .tech-list-calendar .quantity-staff-filter {
        color: var(--bs-main);
    }

.right-side-panel-action {
    flex: 1;
    display: flex;
    max-width: var(--px-60);
    justify-content: space-between;
    border-left: 1px solid var(--theme-mode-border);
    flex-direction: column;
    align-items: center;
    padding: var(--px-20) 0;
}

    .right-side-panel-action .group-btn-action {
        display: grid;
        grid-gap: var(--px-24);
        grid-template-rows: repeat(auto-fit, var(--px-44));
    }

    .right-side-panel-action button {
        border-radius: 100%;
        min-width: var(--px-44);
        height: var(--px-44);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .right-side-panel-action .group-btn-action button:hover {
        background: var(--theme-mode-bs-100);
    }

    .right-side-panel-action button i {
        font-size: var(--px-22);
    }

    .right-side-panel-action button.navigation {
        color: var(--bs-main);
    }

    .right-side-panel-action button.setting {
        color: var(--bs-gray-600);
    }

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

    .header-title-calendar p {
        font: normal normal 500 var(--s-22);
    }

    .header-title-calendar svg {
        height: var(--px-40);
    }

    .header-title-calendar .icon-cal {
        width: var(--px-40);
        position: relative;
        height: var(--px-40);
    }

    .header-title-calendar span {
        top: 60%;
        left: 50%;
        position: absolute;
        transform: translate(-50%, -50%);
        font: normal normal 500 var(--s-18);
        color: var(--theme-mode-text-white);
        z-index: 1;
        letter-spacing: 2px;
    }

.booking-header-panel {
    display: flex;
    grid-column: span 3;
    gap: var(--px-24);
    align-items: center;
    padding: 0 var(--px-16);
    border-bottom: 1px solid var(--theme-mode-border);
}

.booking-page-body .booking-calendar-area .header-calendar-view .ui-tech-column .photo .avt-special-column-calendar {
    width: var(--px-52);
    height: var(--px-52);
    border-radius: 0;
}

.btn-accept-drag-appointment {
    position: absolute;
    background: white;
    height: var(--px-32);
    width: var(--px-32);
    border-radius: var(--px-32);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 4px;
    color: var(--bs-dark);
    font-weight: 800;
    top: calc(-1 * var(--px-18));
    right: calc(-1 * var(--px-16));
    border: 1px solid var(--theme-mode-border);
    box-shadow: 0 2px 10px var(--bs-gray-500);
}

    .btn-accept-drag-appointment i {
        font-weight: 300
    }

.notice-tech-is-unavailable {
    display: flex;
    gap: var(--px-12);
    align-items: center;
    padding: var(--px-12);
    border-radius: var(--px-8);
    background: var(--tx-wait-o);
    font: normal normal 500 var(--s-14);
    position: sticky;
    bottom: var(--px-12);
    margin: 0 var(--px-12);
    z-index: 1;
}

    .notice-tech-is-unavailable i {
        color: var(--tx-wait);
        font-size: var(--px-20);
    }