/* ************************************************************************************************************** */
:root {
    --vh: 1;
    --scale: 100;
    --px-2: calc(2px * var(--scale) / 100);
    --px-4: calc(4px * var(--scale) / 100);
    --px-6: calc(6px * var(--scale) / 100);
    --px-8: calc(8px * var(--scale) / 100);
    --px-10: calc(10px * var(--scale) / 100);
    --px-12: calc(12px * var(--scale) / 100);
    --px-13: calc(13px * var(--scale) / 100);
    --px-14: calc(14px * var(--scale) / 100);
    --px-15: calc(15px * var(--scale) / 100);
    --px-16: calc(16px * var(--scale) / 100);
    --px-17: calc(17px * var(--scale) / 100);
    --px-18: calc(18px * var(--scale) / 100);
    --px-20: calc(20px * var(--scale) / 100);
    --px-22: calc(22px * var(--scale) / 100);
    --px-23: calc(23px * var(--scale) / 100);
    --px-24: calc(24px * var(--scale) / 100);
    --px-25: calc(25px * var(--scale) / 100);
    --px-26: calc(26px * var(--scale) / 100);
    --px-28: calc(28px * var(--scale) / 100);
    --px-30: calc(30px * var(--scale) / 100);
    --px-32: calc(32px * var(--scale) / 100);
    --px-33: calc(33px * var(--scale) / 100);
    --px-35: calc(35px * var(--scale) / 100);
    --px-36: calc(36px * var(--scale) / 100);
    --px-40: calc(40px * var(--scale) / 100);
    --px-42: calc(42px * var(--scale) / 100);
    --px-44: calc(44px * var(--scale) / 100);
    --px-45: calc(45px * var(--scale) / 100);
    --px-47: calc(47px * var(--scale) / 100);
    --px-48: calc(48px * var(--scale) / 100);
    --px-50: calc(50px * var(--scale) / 100);
    --px-52: calc(52px * var(--scale) / 100);
    --px-55: calc(55px * var(--scale) / 100);
    --px-60: calc(60px * var(--scale) / 100);
    --px-68: calc(68px * var(--scale) / 100);
    --px-64: calc(64px * var(--scale) / 100);
    --px-65: calc(65px * var(--scale) / 100);
    --px-70: calc(70px * var(--scale) / 100);
    --px-73: calc(73px * var(--scale) / 100);
    --px-74: calc(74px * var(--scale) / 100);
    --px-75: calc(75px * var(--scale) / 100);
    --px-78: calc(78px * var(--scale) / 100);
    --px-80: calc(80px * var(--scale) / 100);
    --px-85: calc(85px * var(--scale) / 100);
    --px-88: calc(88px * var(--scale) / 100);
    --px-89: calc(89px * var(--scale) / 100);
    --px-90: calc(90px * var(--scale) / 100);
    --px-95: calc(95px * var(--scale) / 100);
    --px-100: calc(100px * var(--scale) / 100);
    --px-105: calc(105px * var(--scale) / 100);
    --px-108: calc(108px * var(--scale) / 100);
    --px-110: calc(110px * var(--scale) / 100);
    --px-115: calc(115px * var(--scale) / 100);
    --px-120: calc(120px * var(--scale) / 100);
    --px-122: calc(122px * var(--scale) / 100);
    --px-125: calc(125px * var(--scale) / 100);
    --px-130: calc(130px * var(--scale) / 100);
    --px-135: calc(130px * var(--scale) / 100);
    --px-136: calc(136px * var(--scale) / 100);
    --px-140: calc(140px * var(--scale) / 100);
    --px-145: calc(145px * var(--scale) / 100);
    --px-150: calc(150px * var(--scale) / 100);
    --px-155: calc(155px * var(--scale) / 100);
    --px-157: calc(157px * var(--scale) / 100);
    --px-160: calc(160px * var(--scale) / 100);
    --px-165: calc(165px * var(--scale) / 100);
    --px-168: calc(168px * var(--scale) / 100);
    --px-170: calc(170px * var(--scale) / 100);
    --px-175: calc(175px * var(--scale) / 100);
    --px-180: calc(180px * var(--scale) / 100);
    --px-185: calc(185px * var(--scale) / 100);
    --px-190: calc(190px * var(--scale) / 100);
    --px-200: calc(200px * var(--scale) / 100);
    --px-210: calc(210px * var(--scale) / 100);
    --px-220: calc(220px * var(--scale) / 100);
    --px-225: calc(225px * var(--scale) / 100);
    --px-228: calc(228px * var(--scale) / 100);
    --px-230: calc(230px * var(--scale) / 100);
    --px-240: calc(240px * var(--scale) / 100);
    --px-250: calc(250px * var(--scale) / 100);
    --px-255: calc(255px * var(--scale) / 100);
    --px-260: calc(260px * var(--scale) / 100);
    --px-270: calc(270px * var(--scale) / 100);
    --px-280: calc(280px * var(--scale) / 100);
    --px-290: calc(290px * var(--scale) / 100);
    --px-300: calc(300px * var(--scale) / 100);
    --px-320: calc(320px * var(--scale) / 100);
    --px-340: calc(340px * var(--scale) / 100);
    --px-350: calc(350px * var(--scale) / 100);
    --px-360: calc(360px * var(--scale) / 100);
    --px-370: calc(370px * var(--scale) / 100);
    --px-380: calc(380px * var(--scale) / 100);
    --px-400: calc(400px * var(--scale) / 100);
    --px-410: calc(410px * var(--scale) / 100);
    --px-420: calc(420px * var(--scale) / 100);
    --px-440: calc(440px * var(--scale) / 100);
    --px-450: calc(450px * var(--scale) / 100);
    --px-460: calc(460px * var(--scale) / 100);
    --px-468: calc(468px * var(--scale) / 100);
    --px-480: calc(480px * var(--scale) / 100);
    --px-500: calc(500px * var(--scale) / 100);
    --px-550: calc(550px * var(--scale) / 100);
    --px-570: calc(570px * var(--scale) / 100);
    --px-600: calc(600px * var(--scale) / 100);
    --px-620: calc(620px * var(--scale) / 100);
    --px-640: calc(640px * var(--scale) / 100);
    --px-650: calc(650px * var(--scale) / 100);
    --px-675: calc(675px * var(--scale) / 100);
    --px-690: calc(690px * var(--scale) / 100);
    --px-700: calc(700px * var(--scale) / 100);
    --px-710: calc(710px * var(--scale) / 100);
    --px-730: calc(730px * var(--scale) / 100);
    --px-770: calc(770px * var(--scale) / 100);
    --px-800: calc(800px * var(--scale) / 100);
    --px-820: calc(820px * var(--scale) / 100);
    --px-900: calc(900px * var(--scale) / 100);
    --px-950: calc(950px * var(--scale) / 100);
    --px-970: calc(970px * var(--scale) / 100);
    --px-988: calc(988px * var(--scale) / 100);
    --px-998: calc(998px * var(--scale) / 100);
    --px-1100: calc(1100px * var(--scale) / 100);
    --px-1200: calc(1200px * var(--scale) / 100);
    /* color */
    --color-white: #fff;
}

div,
p,
span,
a,
b,
button,
input,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Montserrat";
    font-optical-sizing: auto;
    font-style: normal;
}

/* css trang ngoài */
* {
    font-family: "Montserrat";
}

p {
    margin: 0;
}

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

.pointeventnone {
    pointer-events: none;
    opacity: 0.7;
}

    .pointeventnone .table-condensed .day:not(.active) {
        color: #999;
    }

.icon-verified-client {
    margin-right: 4px;
}

.loader {
    --d: var(--px-40);
    width: var(--px-4);
    height: var(--px-4);
    border-radius: 50%;
    color: #ffffff;
    box-shadow: calc(1* var(--d)) calc(0* var(--d)) 0 0, calc(0.707* var(--d)) calc(0.707* var(--d)) 0 1px, calc(0* var(--d)) calc(1* var(--d)) 0 2px, calc(-0.707* var(--d)) calc(0.707* var(--d)) 0 3px, calc(-1* var(--d)) calc(0* var(--d)) 0 4px, calc(-0.707* var(--d)) calc(-0.707* var(--d)) 0 5px, calc(0* var(--d)) calc(-1* var(--d)) 0 6px;
    animation: l27 0.7s infinite steps(8);
}

@keyframes l27 {
    100% {
        transform: rotate(1turn)
    }
}

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #50505080;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

    .loading-overlay.active {
        display: none;
    }

body {
    background: linear-gradient(92deg, #f9e8e7, #f4cfce);
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    margin: 0px !important;
    padding: 0px !important;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
}

p.message-alert {
    margin: 0px;
    font-size: var(--px-22);
}

.form_img,
.form_img_store {
    width: var(--px-74);
    height: var(--px-74);
    border-radius: 50%;
    object-fit: cover;
}
/* welcome form */
/* .welcome-form {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(220deg, #f4d0cf, #FEF6F6);
    padding: var(--px-10);
}

.form {
    background-color: white;
    padding: var(--px-20);
    border-radius: var(--px-8);
    background: linear-gradient(220deg, #f4d0cf, #FEF6F6);
    box-shadow: 0 var(--px-4) var(--px-10) rgba(0, 0, 0, 0.1);
    width: var(--px-440);
    height: var(--px-240);
    max-width: 100%;
    max-height: 100%;
    min-width: var(--px-300);
    min-height: var(--px-200);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: auto;
}

.form_img,
.form_img_store {
    width: var(--px-74);
    height: var(--px-74);
    border-radius: 50%;
    object-fit: cover;
}

.form_title_store {
    font-size: var(--px-24);
    font-family: "Montserrat";
    font-weight: bold;
    color: #eb5781;
}

.form_title_address {
    font-size: var(--px-16);
    font-family: "Montserrat";
    font-weight: 500;
    color: #000000;
}

.form_btn_book {
    width: calc(100%);
    height: var(--px-40);
    border: 1px solid transparent;
    border-radius: var(--px-8);
    background-color: #ffffff;
    color: #41BCD5;
    font-weight: 700;
    font-size: var(--px-16);
    font-family: "Montserrat";
    text-transform: uppercase;
    cursor: pointer;
} */

/* end welcome form */

/* start container */
.container {
    height: calc(100% - var(--px-80));
    width: 100%;
    max-width: var(--px-1200);
    max-height: var(--px-770);
    background: #fff;
    border-radius: var(--px-10);
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.info-salon {
    flex: 1;
    max-height: var(--px-28);
    padding: var(--px-12);
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: var(--px-10);
    align-items: center;
    border-top-left-radius: var(--px-10);
    border-top-right-radius: var(--px-10);
    background-color: var(--color-white);
}

.page:not(.active) {
    display: none !important;
}

.info-salon .salon-logo {
    border-radius: 50%;
    width: var(--px-40);
    height: var(--px-40);
    object-fit: contain;
}

.info-salon .salon-name {
    font-size: var(--px-16);
    font-weight: 500;
}

.tab-view:not(.active) {
    display: none;
}

.tab-view {
    width: 100%;
    flex: 1;
    max-height: calc(100% - var(--px-68));
    background: #d3d3d3;
    border-radius: 0px 0px var(--px-10) var(--px-10);
    overflow: hidden;
}

.tab-chill {
    position: relative;
    height: 100%;
    background: #ebebeb;
    border-radius: 0 0 var(--px-10) var(--px-10);
    display: flex;
    flex-direction: column;
}

.tab-view-chill {
    width: 100%;
    height: 100%;
}

.tab-chill:not(.active) {
    display: none;
}

.tab-view-chill:not(.active) {
    display: none;
}

.lst-btn {
    display: flex;
    width: calc(100% - var(--px-32));
    max-width: var(--px-1200);
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: var(--px-30);
    height: 60px;
}

.btn {
    width: var(--px-200);
    height: var(--px-40);
    background: #cbc5c5;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--px-10);
    font-family: 'Montserrat';
    color: #fff;
    font-size: var(--px-18);
    font-weight: 600;
    cursor: pointer;
    border: none;
}

.btn-next {
    background-color: #ffcd00;
}

p.book-notactive {
    text-align: center;
    margin: var(--px-4);
    font-size: var(--px-20);
    font-family: 'Montserrat';
    font-weight: 600;
}

/* end container */

/* ***************************************************************************************************** */
/* css category */
.tab-service {
    display: flex;
    flex-direction: column;
    background-color: var(--color-white);
    overflow: hidden;
}

.swiper .swiper-slide {
    transition: 0.3s;
}

.center {
    flex: 1;
    display: flex;
    flex-direction: row;
    justify-content: center;
    max-height: var(--px-44);
    align-items: center;
}

.choose_categories {
    flex: 1;
    max-height: var(--px-260);
    background-color: #EBEBEB;
    padding: var(--px-16);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: var(--px-24);
}

.categoryTitle {
    font-family: "Montserrat";
    font-size: var(--px-18);
    color: #505050;
    font-weight: 500;
    text-transform: capitalize;
    text-align: center;
    padding-left: var(--px-4);
    padding-right: var(--px-4);
}

.line {
    width: var(--px-100);
    border: 0.5px solid #00000020;
}

.list_categories {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    /* gap: var(--px-8); */
    padding: 0 var(--px-16);
    scroll-behavior: smooth;
    position: relative;
}

.box_list_categories {
    display: flex;
    flex-direction: row;
    gap: var(--px-8);
    scroll-behavior: smooth;
    white-space: nowrap;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

    .box_list_categories::-webkit-scrollbar {
        display: none;
    }

.categories {
    padding: var(--px-16);
}

.lst_categories {
    width: calc(100% - var(--px-50));
    height: var(--px-200);
}

    .lst_categories .swiper-slide.active .category-item {
        background-color: #41BCD5;
    }

    .lst_categories .swiper-slide .category-item {
        width: calc(100% - var(--px-60));
        height: var(--px-150);
        border: 1px solid transparent;
        border-radius: var(--px-8);
        display: flex !important;
        background-color: #ffffff;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        box-shadow: 0px 0px var(--px-10) 0px #999999;
        cursor: pointer;
        transition: 0.3s;
        gap: var(--px-10);
        padding: var(--px-12);
    }

.box_category {
    display: flex !important;
    justify-content: center;
    align-items: center;
}

.swiper-button-next.cate-btn-swiper::after,
.swiper-button-prev.cate-btn-swiper::after {
    font-size: 29px;
    font-weight: 400;
    color: #656565;
}

.img_category {
    background: #fff;
    border-radius: 50%;
    width: var(--px-90);
    height: var(--px-90);
}

.name_category {
    text-align: center;
    font-family: "Montserrat";
    font-weight: 500;
    font-size: var(--px-16);
    color: #343434;
    text-transform: capitalize;
    margin: 0px;
    display: inline-block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
    bottom: -10px !important;
}

/* css service */
.choose_services {
    flex: 1;
    background: var(--color-white);
    border-radius: 0 0px 10px 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-evenly;
    padding: var(--px-16) var(--px-32);
    overflow: hidden;
    gap: var(--px-16);
}

.search-service {
    border-radius: var(--px-8);
    min-height: var(--px-40);
    max-height: var(--px-40);
    display: flex;
    align-items: center;
    padding: 0 var(--px-12);
    border: 1px solid #d1d1d1;
    width: -webkit-fill-available;
    justify-content: space-between;
}

    .search-service input {
        border: none;
        font-size: var(--px-14);
        font-weight: 500;
        &::placeholder

{
    color: #A7A7A7;
}

&:focus {
    outline: none;
}

}

.search-service .btn-search {
    cursor: pointer;
    font-size: var(--px-20);
    color: #505050;
}

.icon_search {
    width: var(--px-24);
    height: var(--px-24);
}

.ticket-detail {
    z-index: 99;
    display: flex;
    color: #6c6c6c;
    align-items: center;
    font-size: var(--px-20);
    justify-content: flex-end;
    /* position: absolute; */
    bottom: 10px;
    right: 10px;
}

    .ticket-detail img {
        width: 100%;
        height: 100%;
    }

.popup-detail-ticket {
    padding: 10px 15px;
    box-shadow: 0px 3px 20px #00000033;
    border: 1px solid #D1D1D1;
    border-radius: 8px;
    width: var(--px-468);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 999;
    background: #fff;
    transition: .5s all;
}

    .popup-detail-ticket.active {
        display: block !important;
    }

.name_ticket {
    color: #262626;
    font-size: var(--px-18);
    font-weight: 700;
    margin-bottom: var(--px-4);
    margin-top: 0;
    font-family: 'Montserrat';
}

.desc_ticket {
    color: #A7A7A7;
    font-size: var(--px-16);
    font-weight: 600;
    margin: 0;
    font-family: 'Montserrat';
}

.price_ticket {
    color: #00BED6;
    font-size: var(--px-16);
    font-weight: 800;
    margin-top: var(--px-4);
    font-family: 'Montserrat';
    margin-block-end: 0;
}

.remove_popup {
    position: absolute;
    top: -10px;
    left: -10px;
    background: #ffffff9e;
    width: var(--px-25);
    height: var(--px-25);
    border-radius: 50%;
    text-align: center;
    transition: .5s all;
    box-shadow: 0px 0px 10px #00000033;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .remove_popup img {
        width: var(--px-10);
        height: var(--px-10);
    }

.bg-overlay {
    background: #50505080;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 99;
    position: absolute;
    display: none;
    transition: .5s all;
}

    .bg-overlay.active {
        display: block;
    }

.slideServices {
    width: 100%;
    display: flex;
    flex-direction: row;
    overflow: hidden;
}

.list_service {
    width: 100%;
    position: relative;
    overflow: auto hidden;
    padding: var(--px-12) 0;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--px-32);
    scroll-behavior: smooth;
    align-content: flex-start;
    justify-content: flex-start;
}

.btn_next_service,
.btn_prev_service {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--px-12);
}

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

.list_service::-webkit-scrollbar {
    width: 2px;
    height: 4px;
    background-color: #F5F5F5;
    display: none;
}

.list_service::-webkit-scrollbar-thumb {
    border-radius: 8px;
    -webkit-box-shadow: inset 0 0 6px rgba(161, 151, 151, 0.3);
    background-color: #555;
}

.search-service::placeholder {
    color: #000;
    font-weight: 600;
}

.boxSlide {
    width: var(--px-140);
    text-align: center;
    font-size: var(--px-14);
    background: #fff;
    display: flex;
    align-items: center;
    transition: 0.3s;
    position: relative;
    min-height: var(--px-100);
    max-height: var(--px-100);
}

    .boxSlide .service-info {
        transition: 0.1s;
        /* box-shadow: 0px 0px 0px 1px #00000024; */
        border-radius: var(--px-8);
        text-align: center;
        background: #ffffff;
        position: relative;
        cursor: pointer;
        border: 1px solid #d1d1d1;
        z-index: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        width: 100%;
        height: 100%;
        padding: 0 var(--px-12);
    }

        .boxSlide .service-info .tick-active {
            display: none;
            position: absolute;
            top: -10px;
            right: -10px;
            content: "";
            width: var(--px-24);
            font-size: var(--px-24);
            height: var(--px-24);
            background: #fff;
            border-radius: 50%;
        }

    .boxSlide.active .service-info {
        border: 2px solid #41BCD5;
    }

        .boxSlide.active .service-info .tick-active {
            display: flex;
        }

            .boxSlide.active .service-info .tick-active i {
                color: white;
                background: #00bed5;
                border-radius: 100%;
                font-weight: 300;
            }

    .boxSlide .addon {
        height: var(--px-70);
        min-width: var(--px-16);
        background: #92d400;
        display: flex;
        font-size: var(--px-8);
        border-radius: 0 var(--px-8) var(--px-8) 0;
        z-index: 0;
        color: #505050;
        cursor: pointer;
        right: calc(-1 * var(--px-12));
        position: absolute;
        align-items: center;
        justify-content: center;
    }

        .boxSlide .addon i {
            margin-left: 2px;
        }

.swiper-button-next.service-btn-swiper,
.swiper-button-prev.service-btn-swiper {
    top: 50%;
}

    .swiper-button-next.service-btn-swiper::after,
    .swiper-button-prev.service-btn-swiper::after {
        font-size: 29px;
        font-weight: 400;
        color: #656565;
    }

.box_service_name {
    text-align: center;
    font-family: "Montserrat";
    font-weight: 600;
    font-size: var(--px-12);
    color: #343434;
    text-transform: capitalize;
    text-overflow: ellipsis;
    overflow: hidden;
    margin: 0px;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.box_service_price {
    text-align: center;
    font-family: "Montserrat";
    font-weight: 700;
    font-size: var(--px-12);
    color: #41BCD5;
    text-transform: capitalize;
    margin: 0px;
    display: flex;
    flex-direction: column;
}

/* ********************************************************************************************************************************* */
/* css chon tech */
.tab-tech {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background: #ebebeb;
    border-radius: 0 0 10px 10px;
}

.search_techs {
    width: var(--px-400);
    border-radius: var(--px-8);
    height: var(--px-40);
    display: flex;
    align-items: center;
    padding: 0 var(--px-12);
    gap: var(--px-12);
    margin: var(--px-12);
    background: white;
    border: 1px solid #d1d1d1;
}

    .search_techs input[type="text"] {
        border: 0;
        outline: 0;
        box-shadow: unset;
        background: unset;
        flex: 1;
        font-size: var(--px-14);
        font-weight: 500;
    }

        .search_techs input[type="text"]::placeholder {
            color: #9d9d9d;
        }

    .search_techs .icon {
        width: var(--px-20);
        height: var(--px-20);
        cursor: pointer;
        margin-left: var(--px-10);
    }

.box_items {
    padding: var(--px-16) var(--px-24);
    width: calc(100% - var(--px-40));
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--px-20);
    height: calc(100% - 100px);
}

.item-tech {
    position: relative;
    text-align: center;
    cursor: pointer;
    flex: 0 0 calc(100% / 6 - 10px);
    display: flex;
    flex-direction: column;
    padding-top: var(--px-60);
    user-select: none !important;
    min-width: var(--px-150);
}

    .item-tech:active {
        background: none !important;
    }

    .item-tech .img-tech {
        position: absolute;
        width: 100%;
    }

    .item-tech .tech-image {
        width: var(--px-65);
        height: var(--px-65);
        box-shadow: 0px 3px 10px #00000059;
        border: 5px solid #fff;
        border-radius: 50%;
        margin-top: -45px;
        background: #fff;
    }

    .item-tech.selected .name-tech {
        background: #41BCD5;
        color: #fff;
    }

    .item-tech.selected .check-select {
        display: block;
    }

    .item-tech .check-select {
        width: var(--px-30);
        height: var(--px-30);
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        bottom: -10px;
        display: none;
        cursor: pointer;
    }

        .item-tech .check-select img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border: 0;
            border-radius: 50%;
        }

.name-tech {
    font-family: "Montserrat";
    font-size: var(--px-18);
    font-weight: 500;
    color: #343434;
    text-align: center;
    text-transform: capitalize;
    height: var(--px-68);
    background: #fff;
    border-radius: 8px;
    box-shadow: 0px 3px 20px #00000029;
    border: 1px solid #d1d1d1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: var(--px-12);
    font-weight: 600;
}

.track-tech-error-box {
    height: var(--px-65);
    width: var(--px-65);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    background: #E8E7E7;
    opacity: 1;
    text-transform: uppercase;
    border-radius: 100%;
    margin: auto;
    margin-top: calc(-1* var(--px-50));
    border: var(--px-6) solid white;
    font-size: var(--px-30);
    font-weight: 400;
    box-shadow: 0px 5px 10px #00000029;
    font-family: 'Montserrat';
}

/* ************************************************************************************************************************* */
/* css view time */
.choose_time {
    display: flex;
    flex-direction: column;
    max-width: 1200px;
}

.tab-time {
    display: flex;
    flex-direction: column;
    max-width: 1200px;
    background: #ebebeb;
}

.tab-time-header {
    max-height: var(--px-80);
}

.calendar-box {
    flex: 1;
    /* flex mobile unset */
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--px-32);
    position: relative;
    margin: 0 auto;
    overflow: hidden;
}

    .calendar-box::after {
        content: "";
        display: block;
        width: var(--px-2);
        height: 80%;
        background-color: #d5d5d5;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: calc(50% - var(--px-24));
    }

.calendar-time {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: var(--px-12);
    overflow: hidden;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0 var(--px-24);
    max-height: var(--px-400);
    margin: auto;
}

.list_time_book {
    display: flex;
    overflow: auto;
}

.datetimepicker {
    flex: 1;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

    .datetimepicker .datepicker-inline .prev,
    .datetimepicker .datepicker-inline .next {
        height: var(--px-40);
        color: #fff;
        position: relative;
    }

        .datetimepicker .datepicker-inline .prev::after,
        .datetimepicker .datepicker-inline .next::after {
            position: absolute;
            cursor: pointer;
            height: 100%;
            width: 100%;
            display: flex;
            color: #000;
            top: 0px;
            left: 0px;
            justify-content: center;
            align-items: center;
            font-family: "Font Awesome 6 Pro";
            font-size: var(--px-20);
            font-weight: 500;
        }

        .datetimepicker .datepicker-inline .prev::after {
            content: "\f053" !important;
        }

        .datetimepicker .datepicker-inline .next::after {
            content: "\f054" !important;
        }

    .datetimepicker .datepicker-inline .datepicker-switch {
        font-size: var(--px-20);
        pointer-events: none;
        font-family: "Montserrat";
        width: 70%;
    }

    .datetimepicker tfoot {
        display: none !important;
    }

.datepicker-inline {
    padding: var(--px-16);
    background: #fff;
    box-shadow: 0px 5px 20px #00000026;
    height: var(--px-320);
    width: var(--px-320);
    margin: auto;
    border-radius: var(--px-12);
}

.datepicker-days {
    width: 100%;
    height: 100%;
}

.table-condensed {
    width: 100%;
    height: 95%;
}

.datepicker-switch {
    font-size: var(--px-14);
    text-align: center;
}

.datepicker td.disabled {
    cursor: default;
    color: #999;
}

.datepicker td.day {
    cursor: pointer;
    font-weight: 600;
    font-size: var(--px-18);
    text-align: center;
}

    .datepicker td.day.old {
        pointer-events: none;
        color: #d3d3d3;
    }

    .datepicker td.day.now {
        background: #00BED6;
        color: #fff;
        border-radius: 50%;
        font-weight: 600;
        cursor: pointer;
    }

.datepicker td.active {
    background: #00BED6 !important;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    font-family: "Montserrat";
    font-weight: 600;
}

thead tr:last-child {
    border-bottom: 1px solid #A7A7A7;
}

.table-condensed thead tr .dow {
    font-weight: 500;
    font-size: var(--px-14);
}

.datepicker td.day {
    font-weight: 500;
    font-size: var(--px-14);
}

.datetimepicker .datepicker-inline .datepicker-switch {
    font-weight: 500;
    font-size: var(--px-14);
}

.tech__ {
    display: flex;
    gap: var(--px-10);
}

.cal__tech {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    max-height: var(--px-32);
}

.tech__ p {
    font-size: var(--px-14);
    font-weight: 600;
    font-family: "Montserrat";
    color: #343434;
}

.tech_no_time {
    font-weight: 400;
    font-family: "Montserrat";
    color: #343434;
    font-size: var(--px-14);
    text-align: left;
}

    .tech_no_time u {
        color: rgb(235, 87, 129);
        font-weight: 600;
        text-transform: uppercase;
    }

.dropbtn {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: var(--px-25);
    background-color: transparent;
    padding-left: var(--px-10);
    border: 1px solid #41BCD5;
    border: none;
    overflow: hidden;
    cursor: pointer;
    align-items: center;
}

    .dropbtn h4 {
        font-family: "Montserrat";
        color: #000;
        font-weight: 700;
        font-size: var(--px-14);
    }

.dropdown {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: var(--px-115);
    width: var(--px-115);
    height: var(--px-30);
    border: 1px solid #41BCD5;
    border-radius: var(--px-6);
    background-color: #fff;
    cursor: pointer;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #fff;
    min-width: var(--px-125);
    overflow: auto;
    border-radius: var(--px-10);
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    top: var(--px-40);
    left: 0;
}

    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        border: 1px solid transparent;
        text-transform: capitalize;
    }

.dropdown a:hover {
    background-color: #41BCD5;
    color: #fff;
}

.show {
    display: block;
}

.list_time,
.list_time_mor,
.list_time_aft {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: var(--px-12);
    overflow: hidden auto;
    align-content: flex-start;
    padding-bottom: var(--px-12);
}

    .list_time::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        border-radius: var(--px-10);
        background-color: #F5F5F5;
    }

    .list_time::-webkit-scrollbar {
        width: 4px;
        background-color: #F5F5F5;
    }

    .list_time::-webkit-scrollbar-thumb {
        border-radius: var(--px-10);
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
        background-color: #555;
    }

.box_no_time {
    width: 100%;
    text-align: center;
    color: #e25681;
    font-weight: 600;
}

.box_time {
    width: var(--px-80);
    height: var(--px-32);
    max-height: var(--px-32);
    -webkit-box-flex: 0;
    text-align: center;
    background: #fff;
    box-shadow: none;
    border-radius: var(--px-6);
    transition: .5s all;
    font-family: "Montserrat";
    font-weight: 600;
    font-size: var(--px-14);
    color: #505050;
    text-align: center;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0px 2px #d1d1d1;
}

    .box_time:hover {
        background-color: #41BCD5;
        color: #fff;
    }

    .box_time.active {
        background-color: #41BCD5;
        color: #fff;
    }

/* *********************************************************************************************************************************** */
/* css add phonenumber */
.form-input {
    background: transparent;
}

.form-input-client {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fbeeed;
    border-radius: var(--px-10);
}

    .form-input-client input:focus {
        outline: none;
    }

.formInput {
    position: relative;
    width: 100%;
}

    .formInput label {
        position: absolute;
        top: 50%;
        color: #A7A7A7;
        transform: translateY(-50%);
        left: var(--px-20);
        margin-bottom: 0;
        font-size: var(--px-14);
        pointer-events: none;
        user-select: none;
        background: transparent;
        transition: .5s all;
        font-weight: 600;
    }

    .formInput input {
        width: 100%;
        height: var(--px-60);
        border: 3px solid #00000020;
        box-sizing: border-box;
        border-radius: var(--px-8);
        font-size: var(--px-18);
        font-family: 'Montserrat';
        padding: var(--px-12);
    }

        .formInput input:focus {
            border: 1px solid #00BED6 !important;
        }

            .formInput input:focus + label,
            .formInput input:not(:placeholder-shown) + label {
                top: 0;
                left: var(--px-20);
                background: #fff;
                display: inline-block;
                padding: 0 var(--px-4);
                border-radius: var(--px-4);
                font-size: var(--px-14);
                color: #00BED6;
                font-weight: 600;
            }

    .formInput img {
        position: absolute;
        right: var(--px-4);
        top: 50%;
        transform: translateY(-50%);
        width: var(--px-24);
        height: var(--px-24);
        padding: var(--px-4);
        border: 1px solid #00000080;
        border-radius: 50%;
        cursor: pointer;
    }

.form-register-client input {
    border: 3px solid #00000020;
}

    .form-register-client input:focus {
        outline: none;
    }

.box_login {
    width: var(--px-420);
    border-radius: var(--px-10);
    padding: var(--px-24);
    gap: var(--px-24);
    border: 1px solid #FEF6F6;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    display: flex;
    flex-direction: column;
    background-color: #fff;
}

    .box_login .name_store {
        font-family: "Montserrat";
        font-weight: 700;
        font-size: var(--px-20);
        color: #231F20;
        margin-left: var(--px-4);
    }

    .box_login .text_contact {
        font-family: "Montserrat";
        font-weight: 500;
        font-size: var(--px-17);
        color: #231F20;
    }

.img__ {
    width: var(--px-50);
    height: var(--px-50);
    border: 1px solid #00000020;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login_input {
    display: flex;
    flex-direction: column;
    gap: var(--px-16);
    width: 100%;
    margin-top: var(--px-20);
}

.txt_forgot {
    margin: var(--px-10);
    font-size: var(--px-14);
    font-weight: 700;
    color: #00BED6;
    letter-spacing: 0.07px;
    cursor: pointer;
}

.search {
    position: relative;
    width: 100%;
}

    .search input {
        width: 100%;
        height: var(--px-60);
        border: 3px solid #00000020;
        padding-right: 35px;
        padding-left: 15px;
        box-sizing: border-box;
        border-radius: var(--px-8);
        font-size: var(--px-18);
        font-family: 'Montserrat';
    }

    .search img {
        position: absolute;
        right: var(--px-4);
        top: 50%;
        transform: translateY(-50%);
        width: var(--px-24);
        height: var(--px-24);
        padding: var(--px-4);
        border: 1px solid #00000080;
        border-radius: 50%;
        cursor: pointer;
    }

.checkbox_ {
    width: var(--px-24);
    height: var(--px-24);
    border-radius: 50%;
    position: relative;
    pointer-events: none;
}

.custom-checkbox {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    z-index: 2;
    margin: 0;
}

.checkbox_ label {
    width: var(--px-20);
    height: var(--px-20);
    border: 1px solid #d1d1d1;
    border-radius: 50%;
    display: block;
    cursor: pointer;
    z-index: 1;
    background-color: white;
}

.custom-checkbox:checked + label {
    background-color: #505050;
    border-color: #505050;
}

    .custom-checkbox:checked + label::before {
        content: '\f00c';
        color: white;
        font-size: var(--px-10);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-family: 'Font Awesome 5 Pro';
        font-weight: 800;
    }

.container_check {
    display: block;
    position: relative;
    padding-left: 20px;
    margin-bottom: 20px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .container_check input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: var(--px-24);
    width: var(--px-24);
    background-color: #eee;
    border-radius: 50%;
}

.container_check:hover input ~ .checkmark {
    background-color: #ccc;
}

.container_check input:checked ~ .checkmark {
    background-color: #505050;
}

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

.container_check input:checked ~ .checkmark:after {
    display: block;
}

.container_check .checkmark:after {
    left: var(--px-8);
    top: var(--px-4);
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.condition {
    display: flex;
    align-items: center;
    gap: var(--px-12);
    margin-top: var(--px-16);
    font-family: "Montserrat", sans-serif;
    font-size: var(--px-12);
}

    .condition p {
        margin-left: var(--px-10);
        font-family: "Montserrat";
        font-weight: 500;
        font-size: var(--px-16);
        color: #292D32;
    }

.btn_create_client {
       background-color: #28a74500;
    color: #2cb4c9;
    border: none;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: var(--px-8);
    cursor: pointer;
    font-weight: 600;
}

.btn_ {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: var(--px-10);
    gap: var(--px-10);
}

/* *************************************************************************************************************** */
/* css form-input-pass */
.form-input-pass {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fbeeed;
    border-radius: var(--px-10);
}

.form-create-account {
    width: var(--px-420);
    height: var(--px-350);
    border-radius: var(--px-12);
    padding: var(--px-20);
    border: 1px solid #FEF6F6;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

    .form-create-account input:focus {
        outline: none;
    }

.formInput .inputPassword:focus {
    border: 1px solid #00BED6 !important;
}

    .formInput .inputPassword:focus + label {
        top: 0;
        left: var(--px-20);
        background: #fff;
        display: inline-block;
        padding: 0 5px;
        border-radius: 5px;
        font-size: var(--px-14);
        color: #00BED6;
        font-weight: 600;
    }

.form-create-account input:focus + label {
    top: 0;
    left: var(--px-15);
    background: #fff;
    display: inline-block;
    padding: 0 5px;
    border-radius: var(--px-4);
    font-size: var(--px-14);
    color: #00BED6;
    font-weight: 600;
}

.formInput .confirmPassword::placeholder {
    font-size: var(--px-14);
    color: #A7A7a7;
    font-weight: 600;
    opacity: 1;
}

.title_create_account {
    font-size: var(--px-24);
    font-weight: 700;
    color: #505050;
    text-align: center;
}

.btn_create_pass {
    width: 100%;
    height: var(--px-40);
    border: 1px solid #41BCD5;
    border-radius: var(--px-10);
    background-color: #41BCD5;
    color: #fff;
    font-family: "Montserrat";
    font-weight: 700;
    font-size: var(--px-16);
    margin-top: var(--px-15);
    text-transform: uppercase;
    cursor: pointer;
}

.formInput label {
    position: absolute;
    top: 50%;
    color: #A7A7A7;
    transform: translateY(-50%);
    left: var(--px-20);
    margin-bottom: 0;
    font-size: var(--px-14);
    pointer-events: none;
    user-select: none;
    transition: .5s all;
    font-weight: 600;
}

/* ******************************************************************************************************************************************* */
/* css cart */
.cart {
    position: absolute;
    right: 0px;
    top: var(--px-68);
    z-index: 99;
}

    .cart .cart-icon {
        top: var(--px-8);
        right: var(--px-8);
        background: #fff;
        border: 1px solid #000;
        height: var(--px-48);
        width: var(--px-48);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--px-12);
        position: absolute;
        z-index: 3;
        cursor: pointer;
        transition: 0.3s all;
    }

        .cart .cart-icon .btn-cart .count_ {
            position: absolute;
            top: 0px;
            left: -10px;
            margin: 0px;
            background: #eb5781;
            color: #fff;
            width: var(--px-20);
            height: var(--px-20);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 4;
            font-family: 'Montserrat';
            font-size: var(--px-14);
            font-weight: 600;
        }

    .cart .cart-view {
        display: flex;
        width: 0px;
        background: #fff;
        transition: 0.3s;
    }

    .cart.active {
        right: 0px;
        height: calc(100% - var(--px-68));
        top: var(--px-68);
        width: var(--px-370);
    }

        .cart.active .cart-icon {
            transition: 0.3s;
            top: var(--px-10);
            right: var(--px-410);
            border-radius: 10px 0 0 10px;
            border: 1px solid #eb5781;
            background: #eb5781;
        }

    .cart .popup-cart,
    .lst__person {
        transition: none;
    }

        .lst__person.active {
            background: #e3edf8;
        }

    .cart .cart_total {
        display: none;
    }

    .cart.active .cart-icon .btn-cart .count_ {
        color: #000;
        background: #fff;
        outline: 2px solid #eb5781;
    }

    .cart.active .cart-view {
        display: flex;
        right: 0px;
        height: calc(100% - var(--px-40));
        width: var(--px-370);
        z-index: 2;
        position: absolute;
        background: #fff;
        padding: var(--px-20);
        border-left: 3px solid #eb5781;
        border-radius: 0 0 var(--px-10) 0;
    }

.person {
    width: 100%;
    height: var(--px-600);
    max-height: var(--px-600);
    overflow-y: scroll;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: var(--px-12);
}

    .person::-webkit-scrollbar {
        display: none;
    }

.lst__person {
    border: 1px solid rgba(0, 0, 0, 0.2);
    padding: var(--px-16);
    border-radius: var(--px-8);
    display: flex;
    flex-direction: column;
    gap: var(--px-16);
    background-color: white;
    box-shadow: 0px 0px 2.6px 0px rgba(0, 0, 0, 0.15);
}

.popup-cart {
    width: 100%;
}

.cart-items {
    width: 100%;
    height: calc(100% - var(--px-40));
}

.cart__list_item {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.list__services {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--px-16);
    background: inherit;
}

.cart__name_client {
    display: flex;
    align-items: center;
    font-family: "Montserrat";
    font-weight: 700;
    font-size: var(--px-16);
    color: #231F20;
    text-transform: capitalize;
}

.cart__phone_client {
    font-family: "Montserrat";
    font-weight: 600;
    font-size: var(--px-14);
    color: #484848;
}

.item-book {
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.2);
    padding: var(--px-12);
    border-radius: var(--px-10);
    display: flex;
    flex-direction: column;
    gap: var(--px-8);
    background: inherit;
}

.item-ser-name-tech {
    display: flex;
    flex-direction: column;
    /* gap: var(--px-4); */
    position: relative;
    background: inherit;
}

    .item-ser-name-tech.child-addon {
        padding-left: var(--px-32);
        /* height: var(--px-24); */
    }

        .item-ser-name-tech.child-addon p.time {
            font-weight: 400;
            font-size: var(--px-12);
            color: rgba(112, 112, 112, 1);
        }

        .item-ser-name-tech.child-addon::after {
            position: absolute;
            content: '';
            left: var(--px-15);
            top: calc(-1 * var(--px-28));
            height: var(--px-40);
            width: var(--px-16);
            background-image: url(/Content/icon/addons.svg);
            background-origin: content-box;
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            z-index: 0;
        }

.item-name-ser,
.item-name-tech,
.item_add_on {
    display: flex;
    flex-direction: row;
    z-index: 1;
    justify-content: space-between;
    background: inherit;
}

.item-name-tech {
    padding: var(--px-12) 0;
}

.item-ser-name-tech.child-addon .item-name-tech {
    padding: 0;
}

h4 {
    margin: 0;
}

.item-name-ser h4 {
    flex: 1;
    font-family: "Montserrat";
    font-weight: 600;
    font-size: var(--px-14);
    color: rgba(35, 31, 32, 1);
}

.item-name-ser p {
    font-family: "Montserrat";
    font-weight: 600;
    font-size: var(--px-14);
    color: rgba(35, 31, 32, 1);
}

.item-name-tech p {
    font-weight: 400;
    font-size: var(--px-14);
    color: rgba(35, 31, 32, 1);
}

    .item-name-tech p.time {
        font-weight: 400;
        font-size: var(--px-12);
        color: rgba(112, 112, 112, 1);
    }

.item-name-tech h4 {
    font-weight: 400;
    font-size: var(--px-14);
    color: rgba(35, 31, 32, 1);
}

.item_add_on p {
    font-family: "Montserrat";
    font-weight: 400;
    font-size: var(--px-12);
    color: rgba(112, 112, 112, 1);
}

.btn-del {
    position: absolute;
    top: -10px;
    left: -10px;
    cursor: pointer;
    width: var(--px-15);
    height: var(--px-15);
}

    .btn-del .img_icon_del {
        width: var(--px-20);
        height: var(--px-20);
    }

button.add_on {
    width: var(--px-95);
    height: var(--px-24);
    border-radius: var(--px-4);
    padding: 4px 12px 4px 12px;
    border: 1px solid #FF9500;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #FF9500;
    color: #FFF;
    font-family: "Montserrat";
    font-weight: 600;
    font-size: var(--px-12);
    text-align: center;
    cursor: pointer;
    transition: .5s all;
    margin-left: auto;
    white-space: nowrap;
}

.cart.active .cart_total {
    display: flex;
    flex-direction: column;
}

    .cart.active .cart_total .row {
        display: flex;
        justify-content: space-between;
    }

    .cart.active .cart_total .txt_cart_total {
        font-family: "Montserrat";
        font-weight: 500;
        font-size: var(--px-16);
        color: #343434;
    }

    .cart.active .cart_total .total_price, .cart.active .cart_total .total_price_cash {
        font-family: "Montserrat";
        font-weight: 700;
        font-size: var(--px-20);
        color: #41BCD5;
    }

/* ******************************************************************************************************************************************* */
/* css addon */
.add_on_view {
    display: none;
}

    .add_on_view.tick_cart_item {
        display: flex;
        justify-content: flex-start;
    }

.add_on_view,
.cart-items {
    transition: all 0.3s ease-in-out;
}

.add_on_view {
    width: var(--px-360);
    height: calc(100% - 200px);
    flex-direction: column;
    justify-content: space-between;
    display: none;
    transition: .5s all;
    position: absolute;
    right: 0;
    top: var(--px-68);
    background-color: #fff;
    z-index: 999;
    box-shadow: -6px 0px 20px 0px #d1d1d1;
}

    .add_on_view.active {
        display: flex !important;
        flex-direction: column;
        justify-content: space-between;
    }

.header_on_view {
    flex: 1;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    max-height: var(--px-48);
    padding: 0 var(--px-16);
}

.title_name_service {
    margin: 0;
    font-size: var(--px-16);
    font-weight: 700;
    text-transform: uppercase;
    color: #505050;
}

.add_ons {
    display: flex;
    gap: var(--px-4);
    align-items: center;
    padding: 0 var(--px-16);
}

.title_add_ons {
    font-family: Montserrat;
    font-weight: 600;
    font-size: var(--px-18);
    color: rgba(35, 31, 32, 1);
    margin: 0;
}

.list_add_on {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: var(--px-24);
    cursor: pointer;
    padding: var(--px-8) var(--px-12);
}

    .list_add_on:hover {
        background-color: #EEE;
    }

.box {
    height: 100%;
    display: flex;
    gap: var(--px-6);
    align-items: center;
}

.title_service {
    margin-left: var(--px-4);
    font-family: "Montserrat";
    color: #000000;
    font-weight: 500;
    font-size: var(--px-18);
}

.list_add_on_price {
    font-family: "Montserrat";
    color: #000000;
    font-weight: 600;
    font-size: var(--px-18);
}

span.price-addon {
    color: #F28500;
    font-weight: 600;
}

span.txt-line-through {
    color: #a7a7a7;
    font-weight: 400;
    text-decoration: line-through;
}

.icon_close {
    cursor: pointer;
}

.icon_ {
    width: var(--px-16);
    height: var(--px-16);
}

.btn_clean {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: var(--px-12);
    border-top: 1px solid #d1d1d1;
}

    .btn_clean button {
        font-family: "Montserrat";
        font-weight: 700;
        font-size: var(--px-14);
        color: #F44C7F;
        text-transform: capitalize;
        cursor: pointer;
        border: none;
        background: unset;
    }

        .btn_clean button.btn__done {
            width: var(--px-150);
            height: var(--px-30);
            border-radius: var(--px-6);
            padding: 6px 26px 6px 26px;
            background-color: #51BBD3;
            color: #fff;
            font-weight: 700;
            font-size: var(--px-14);
            font-family: "Montserrat";
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            text-transform: uppercase;
            cursor: pointer;
        }

button:disabled {
    opacity: 0.4 !important;
    pointer-events: none;
}

/* ******************************************************************************************************************************************* */
/* summary */
.btn.btn-addguest {
    background: #F44C7F;
}

.container_apt {
    height: 100%;
    width: 100%;
    background: #ebebeb;
    border-radius: var(--px-12);
    position: relative;
    display: flex;
    flex-direction: column;
}

.time_out {
    position: absolute;
    right: var(--px-20);
    top: var(--px-8);
    font-family: "Montserrat";
    font-weight: 600;
    font-size: var(--px-12);
    color: #231F20;
}

.list_summary {
    display: flex;
    flex-direction: column;
    gap: var(--px-10);
    overflow: auto;
    max-height: calc(100% - var(--px-200));
}

.book_summary {
    width: 100%;
    border: 1px solid transparent;
    border-radius: var(--px-8);
    background-color: #fff;
    margin: var(--px-12);
    padding: 0 var(--px-12);
    max-width: var(--px-800);
    margin: 0 auto;
}

.header_book {
    height: var(--px-50);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: var(--px-4) var(--px-12);
}

.info_client {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-start;
}

    .info_client .icon_ {
        width: var(--px-30);
        height: var(--px-30);
    }

    .info_client .name_client {
        font-family: "Montserrat";
        font-weight: 700;
        font-size: var(--px-14);
        color: #231F20;
        display: flex;
        align-items: center;
    }

    .info_client .phone_client {
        font-family: "Montserrat";
        font-weight: 600;
        font-size: var(--px-12);
        color: #484848;
    }

.info_services {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

    .info_services .text_service {
        font-family: "Montserrat";
        font-weight: 600;
        font-size: var(--px-12);
        color: #484848;
    }

.edit_service {
    display: flex;
    flex-direction: row;
    justify-content: center;
    height: var(--px-50);
    cursor: pointer;
    align-items: center;
    gap: var(--px-4);
}

.icon_ {
    width: var(--px-16);
    height: var(--px-16);
}

.info_services .txt_edit_service {
    font-family: "Montserrat";
    font-weight: 600;
    font-size: var(--px-12);
    color: #00BED6;
    text-transform: uppercase;
}

.info_services .txt_remove_service {
    font-family: "Montserrat";
    font-weight: 600;
    font-size: var(--px-12);
    color: red;
}

.body_book {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.table_title {
    width: 100%;
    justify-content: space-between;
    text-align: center;
    display: flex;
    border-bottom: 1px solid #00BED6;
}

    .table_title .table_service_name {
        width: 40%;
        text-align: left;
        font-family: "Montserrat";
        font-size: var(--px-14);
        font-weight: 600;
        text-transform: uppercase;
    }

.table_service_tech,
.table_service_dur,
.table_service_price {
    width: 20%;
    text-align: left;
    font-family: "Montserrat";
    font-size: var(--px-14);
    font-weight: 600;
    text-transform: uppercase;
}

.table_service_price {
    display: flex;
    justify-content: flex-end;
    margin-right: var(--px-10);
}

.table_title p {
    margin: 0;
    padding: 8px 0 8px 10px;
    text-align: left;
    font-family: "Montserrat";
    font-weight: 600;
    font-size: var(--px-14);
    color: #231F20;
    text-transform: uppercase;
}

.line_book {
    width: 100%;
    border-bottom: 1px solid #00BED6;
}

.book_list_service.parent {
    width: 100%;
    height: var(--px-70);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-left: 0;
    margin-left: 0;
    position: relative;
}

    .book_list_service.parent.child-addon {
        height: var(--px-32);
    }

        .book_list_service.parent.child-addon .name_service_book {
            padding-left: var(--px-26);
            width: calc(60% - var(--px-26));
        }

        .book_list_service.parent.child-addon::after {
            position: absolute;
            content: '';
            left: var(--px-6);
            top: calc(-1 * var(--px-40));
            height: var(--px-75);
            width: var(--px-16);
            background-image: url(/Content/icon/addons.svg);
            background-origin: content-box;
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            z-index: 0;
        }

.parent .name_service_book {
    width: 38%;
    display: flex;
    flex-direction: row;
}

.parent .name_tech_child,
.parent .time_child,
.parent .price_child {
    width: 20%;
    font-family: "Montserrat";
    font-weight: 500;
    font-size: 14px;
    color: #505050;
    text-transform: capitalize;
}

.parent .price_child {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
    margin-right: var(--px-4);
}

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

    .name_service_book .name_ser {
        font-family: "Montserrat";
        font-weight: 600;
        font-size: 14px;
        color: #505050;
        text-transform: capitalize;
    }

    .name_service_book p {
        font-family: "Montserrat";
        font-weight: 400;
        font-size: 14px;
        color: #505050;
        text-transform: capitalize;
    }

.icon_close_service {
    color: #F28500;
    cursor: pointer;
}

.list_service_child {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.child {
    width: calc(100%);
    height: var(--px-20);
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: #00000020;
    border-top: 2px solid #00000020;
    justify-content: flex-end;
}

.discount_child {
    height: var(--px-25);
    display: flex;
    border: none;
    justify-content: flex-end;
}

.list_service_child .child {
    display: flex;
    justify-content: flex-end;
}

.child .name_service_book {
    width: 35%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

.child .name_tech_child,
.child .time_child,
.child .price_child {
    width: 20%;
    font-family: "Montserrat";
    font-weight: 400;
    font-size: 14px;
    color: #505050;
    text-transform: capitalize;
}

.child .price_child {
    display: flex;
    justify-content: flex-end;
    margin-right: var(--px-4);
}

.book_total {
    width: calc(100% - 2px);
    height: var(--px-70);
    border: 1px solid #fff;
    background-color: #fff;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-bottom-left-radius: var(--px-8);
    border-bottom-right-radius: var(--px-8);
}

.item_total {
    width: 38%;
    height: var(--px-50);
    display: flex;
    flex-direction: row;
    align-items: center;
}

.item_,
.item_dur {
    width: 20%;
}

.txt_item_total {
    font-family: "Montserrat";
    font-weight: 600;
    font-size: 14px;
    color: #231F20;
}

.txt_item_count,
.item_dur {
    font-family: "Montserrat";
    font-weight: 400;
    font-size: 14px;
    color: #505050;
}

.item_price {
    display: flex;
    justify-content: flex-end;
    width: 20%;
    font-family: "Montserrat";
    font-weight: 700;
    font-size: var(--px-20);
    color: #000;
    margin-right: var(--px-4);
}

.item_price_cash {
    display: flex;
    justify-content: flex-end;
    width: 20%;
    font-family: "Montserrat";
    font-weight: 700;
    font-size: var(--px-20);
    color: #F44C7F;
    margin-right: var(--px-4);
}
    .item_price span, .item_price_cash span{
        display:flex;
    }
    .item_price span img, .item_price_cash span img{
        width:25px;
        height:25px
    }
    .note_input {
        width: 100%;
        height: var(--px-48);
        border-radius: var(--px-12);
        background-color: #fff;
        margin: 0 auto;
        margin-top: var(--px-16);
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 4px var(--px-12);
        max-width: var(--px-800);
    }

    .note_input input {
        flex-grow: 1;
        border: none;
        outline: none;
        padding: var(--px-10);
        font-size: var(--px-16);
        color: #333;
        background-color: transparent;
        margin-left: var(--px-10);
    }

.time_service {
    display: flex;
    flex-direction: row;
}

    .time_service .text_service {
        margin-block-start: 0;
        margin-block-end: 0;
        text-align: right;
    }

/* ******************************************************************************************************************************************* */
/* form register */
button.btn.btn_nextAddGuest {
    background: #a9677b;
}

.form-register-client {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.form_create_client {
    width: 437px;
    height: calc(100% - var(--px-68));
    border-radius: var(--px-12);
    margin: 0 auto;
    padding: var(--px-24);
    gap: var(--px-24);
    background: #fcf0ef;
    border: 1px solid #FEF6F6;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.form_title {
    color: #EB5781;
    font-family: "Montserrat";
    font-weight: 700;
    font-size: var(--px-24);
    text-transform: capitalize;
    margin-block-start: var(--px-4);
    margin-block-end: var(--px-4);
}

.form_add_new_client {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.nice-form-group {
    display: flex;
    flex-direction: column;
    margin-top: var(--px-10);
}

    .nice-form-group > label {
        color: #231F20;
        font-family: "Montserrat";
        font-weight: 500;
        font-size: var(--px-14);
        text-transform: capitalize;
        margin-bottom: var(--px-8);
    }

    .nice-form-group > input {
        padding: var(--px-12);
        gap: var(--px-6);
        border: 1px solid transparent;
        border-radius: var(--px-10);
    }

.btn_back {
    background-color: #00000020;
}

.nice-form-group input:not([disabled]) {
    background-color: #fff;
}

.nice-form-group input[disabled] {
    background-color: #d1d1d1;
    color: #000000;
    cursor: not-allowed;
}

/* form add guest */
.form-add-guest {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.box_add_guest {
    width: var(--px-420);
    height: var(--px-230);
    border-radius: var(--px-12);
    padding: var(--px-24);
    gap: var(--px-24);
    border: 1px solid #FEF6F6;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.name_add_guest {
    font-family: "Montserrat";
    font-size: var(--px-24);
    font-weight: 700;
    color: #EB5781;
}

.text_add_guest {
    font-family: "Montserrat";
    font-size: var(--px-14);
    font-weight: 500;
    color: #292D32;
}

.btn_skip {
    background-color: #F44C7F;
}

.back {
    background-color: #00000020;
}

/* ******************************************************************************************************************************************* */
/* policy */
.policy {
    height: 80%;
    max-width: var(--px-800);
    background: #fff;
    border-radius: var(--px-12);
    position: relative;
    padding: var(--px-24);
    margin: var(--px-24);
    display: flex;
    flex-direction: column;
    gap: var(--px-16);
}

.header_policy {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-transform: capitalize;
}

.txt_title_policy {
    font-family: "Montserrat";
    font-size: var(--px-24);
    font-weight: 700;
    color: #343434;
    margin-block-end: 0;
}

.content_policy {
    padding: var(--px-12);
    text-align: left;
    overflow-y: scroll;
    max-height: 80%;
}

    .content_policy::-webkit-scrollbar {
        display: none;
    }

    .content_policy p {
        font-family: "Montserrat";
        font-size: var(--px-12);
        font-weight: 400;
        color: #231F20;
    }

/* ******************************************************************************************************************************************* */
/* card on file */
.payment {
    width: var(--px-480);
    margin-top: var(--px-20);
    height: var(--px-675);
    max-width: var(--px-730);
    background: #fff;
    border: 1px solid transparent;
    padding: var(--px-12);
    flex-direction: column;
    justify-content: space-between;
    border-radius: var(--px-10);
    margin-bottom: 5%;
    position: relative;
    transition: height 0.3s ease;
    overflow: hidden;
}

    .payment.addForm {
        height: var(--px-700);
        margin-top: var(--px-20);
    }

.card_form_payment {
    width: 100%;
    height: calc(100% - 165px);
    overflow-y: scroll;
}

    .card_form_payment::-webkit-scrollbar {
        display: none;
    }

.header_form {
    width: 100%;
    height: var(--px-50);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
}

.title_payment {
    font-family: "Montserrat";
    font-size: var(--px-24);
    font-weight: 700;
    color: #343434;
    text-transform: capitalize;
}

.txt_choose_card {
    font-family: "Montserrat";
    font-size: var(--px-14);
    font-weight: 500;
    color: #979797;
}

.list_card {
    width: calc(100% - 2px);
    height: auto;
    border-radius: var(--px-12);
    border: 1px solid #00000030;
    margin-top: var(--px-4);
    overflow: auto;
}

    .list_card::-webkit-scrollbar {
        display: none;
    }

.card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: var(--px-450);
    width: 100%;
    height: var(--px-45);
    background-color: #FFFFFF;
    padding: 0px;
    cursor: pointer;
}

.lst_data {
    display: flex;
    align-items: center;
    width: 100%;
    height: var(--px-45);
    background-color: #FFFFFF;
    padding: 0px var(--px-12);
    cursor: pointer;
}

    .lst_data.active {
        box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
        background-color: #41a2fc35;
    }

.default-logo {
    width: var(--px-30);
    height: var(--px-30);
    border: 1px solid #00000029;
    border-radius: 50%;
    object-fit: cover;
}

.img_logo_card {
    width: var(--px-30);
    height: var(--px-30);
    border: 1px solid #00000029;
    border-radius: 50%;
    object-fit: contain;
}

.card_type {
    margin-left: var(--px-10);
    font-family: "Montserrat";
    font-size: var(--px-14);
    font-weight: 500;
    color: #343434;
}

.card-checkbox {
    display: none;
}

.card-checkbox-def {
    display: none;
}

.checkbox_ label {
    display: inline-block;
    width: var(--px-20);
    height: var(--px-20);
    border: 2px solid #ccc;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
}

.card-checkbox:checked + label::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--px-12);
    height: var(--px-12);
    background-color: #41A2FC;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.card-checkbox-def:checked + label::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--px-12);
    height: var(--px-12);
    background-color: #41A2FC;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.card_total {
    margin-top: var(--px-12);
    max-width: var(--px-450);
    height: var(--px-50);
    border: 1px solid transparent;
    background-color: #D1D1D1;
    border-radius: var(--px-12);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 var(--px-12);
}

    .card_total .txt_card_total {
        font-family: "Montserrat";
        font-size: var(--px-16);
        font-weight: 600;
        color: #231F20;
    }

    .card_total .txt_card_price,
    .txt_card_pricedeposit {
        font-family: "Montserrat";
        font-size: var(--px-16);
        font-weight: 600;
        color: #231F20;
    }

.btn_back {
    width: calc(100% - var(--px-15));
    height: var(--px-40);
    border: 1px solid transparent;
    border-radius: var(--px-10);
    background-color: #00000020;
    font-family: "Montserrat";
    font-size: var(--px-16);
    font-weight: 700;
    color: #fff;
    cursor: pointer;
}

.btn_back_login {
    height: var(--px-40);
    border: 1px solid transparent;
    border-radius: var(--px-10);
    font-family: "Montserrat";
    font-size: var(--px-16);
    font-weight: 700;
    color: #fff;
    cursor: pointer;
}

.btn_confirm {
    width: calc(100% - var(--px-15));
    height: var(--px-40);
    border: 1px solid transparent;
    border-radius: var(--px-10);
    background-color: #FFCD00;
    font-family: "Montserrat";
    font-size: var(--px-16);
    font-weight: 700;
    color: #fff;
    cursor: pointer;
}

/* ******************************************************************************************************************************************* */
/* form login */
.form-login {
    width: var(--px-440);
    height: var(--px-250);
    max-width: var(--px-730);
    background: #fff;
    border-radius: var(--px-10);
    margin-bottom: 5%;
    padding: var(--px-12);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

    .form-login p {
        font-family: "Montserrat";
        font-size: var(--px-24);
        font-weight: 600;
        color: #2B2E34;
    }

.btn_login {
    width: calc(100% - 2px);
    height: var(--px-40);
    border: 1px solid #41A2FC;
    border-radius: var(10);
    background-color: #fff;
    font-family: "Montserrat";
    font-weight: 500;
    font-size: var(--px-14);
    color: #343434;
    margin-top: var(--px-4);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

    .btn_login.active {
        display: none;
    }

.line_or {
    height: var(--px-30);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

    .line_or p {
        padding: 0 var(--px-12);
    }

.form_add_card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    width: 100%;
    height: 100%;
}

    .form_add_card p {
        flex: 1;
        max-height: var(--px-20);
        font-size: var(--px-14);
        font-weight: 500;
        margin: var(--px-8) 0;
    }

.error {
    border: 1px solid red !important;
}

.form_card_name {
    height: var(--px-45);
    border: 1px solid #979797;
    border-radius: var(--px-8);
    outline: none;
    padding: 0 var(--px-12);
}

.group_form {
    height: var(--px-90);
    border-radius: var(--px-8);
    border: 1px solid #979797;
    overflow: hidden;
}

.input_form_group {
    display: flex;
    height: var(--px-45);
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.form_card_ {
    width: 100%;
    height: var(--px-45);
    border: none;
    border-bottom: 1px solid #d1d1d1;
    outline: none;
    padding: 0 var(--px-12);
    box-sizing: border-box;
}

    .form_card_ .error {
        border: 1px solid red !important;
        border-top-left-radius: var(--px-8);
        border-top-right-radius: var(--px-8);
    }

.form_card_left {
    width: 50%;
    height: 100%;
    border: none;
    border-right: 1px solid #d1d1d1;
    outline: none;
    padding: 0 var(--px-12);
    box-sizing: border-box;
}

    .form_card_left .error {
        border: 1px solid red !important;
    }

.form_card_right {
    width: 50%;
    height: 100%;
    border: none;
    outline: none;
    padding: 0 var(--px-12);
    box-sizing: border-box;
}

    .form_card_right .error {
        border: 1px solid red !important;
    }

.form_card_name:focus,
.form_card_:focus {
    outline: none;
    border-color: #ccc;
}

.sp {
    margin-top: var(--px-6);
}

.save_card {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: var(--px-10) 0 var(--px-4) 0;
}

    .save_card p {
        font-family: "Montserrat";
        font-weight: 400;
        font-size: var(--px-12);
        color: #2B2E34;
        margin-left: var(--px-10);
    }

.switch {
    display: flex;
    flex-direction: row;
    gap: var(--px-10);
}

.sms {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-radius: var(--px-24);
    width: var(--px-105);
    height: var(--px-32);
    border: 1px solid #00000020;
    cursor: pointer;
}

    .sms.active {
        border: 1px solid #41A2FC;
    }

    .sms p {
        font-family: "Montserrat";
        font-size: var(--px-12);
        font-weight: 400;
        color: #707070;
        margin-left: var(--px-4);
    }

    .sms.active p {
        color: #41A2FC;
    }

    .sms .img {
        width: var(--px-25);
        height: var(--px-25);
        background: url("/Content/image/email.svg");
    }

    .sms.active .img {
        width: var(--px-25);
        height: var(--px-25);
        background: url("/Content/image/sms.svg");
    }

.email {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-radius: var(--px-24);
    width: var(--px-105);
    height: var(--px-32);
    border: 1px solid #00000020;
    cursor: pointer;
}

    .email.active {
        border: 1px solid #41A2FC;
    }

    .email p {
        font-family: "Montserrat";
        font-size: var(--px-12);
        font-weight: 400;
        color: #707070;
        margin-left: var(--px-4);
    }

    .email.active p {
        color: #41A2FC;
    }

    .email .img {
        width: var(--px-25);
        height: var(--px-25);
        background: url("/Content/image/email.svg");
    }

    .email.active .img {
        width: var(--px-25);
        height: var(--px-25);
        background: url("/Content/image/sms.svg");
    }

.input_login {
    width: calc(100% - var(--px-20));
    height: var(--px-45);
    border: 1px solid #979797;
    border-radius: var(--px-8);
    outline: none;
    padding-left: var(--px-10);
    display: none;
}

    .input_login.phone {
        display: none;
    }

        .input_login.phone.active {
            display: block;
        }

    .input_login.email_login {
        display: none;
    }

        .input_login.email_login.active {
            display: block;
        }

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

.btn__back {
    width: calc(100% / 3);
    height: var(--px-48);
    background-color: #898989;
    border: 1px solid #898989;
    border-radius: var(--px-10);
    font-family: "Montserrat";
    font-size: var(--px-14);
    font-weight: 700;
    color: #FFFFFF;
    cursor: pointer;
}

.btn_create {
    width: calc(100% / 3);
    height: var(--px-48);
    background-color: #f44c7f;
    border: 1px solid #f44c7f;
    border-radius: var(--px-8);
    font-family: "Montserrat";
    font-size: var(--px-14);
    font-weight: 700;
    color: #FFFFFF;
    cursor: pointer;
}

.btn_create_acc {
    width: calc(100% / 2);
    height: var(--px-48);
    background-color: #41A2FC;
    border: 1px solid #41A2FC;
    border-radius: var(--px-8);
    font-family: "Montserrat";
    font-size: var(--px-14);
    font-weight: 700;
    color: #FFFFFF;
    cursor: pointer;
    text-transform: uppercase;
}

.btn_done {
    width: calc(100% / 3);
    height: var(--px-48);
    background-color: #d1d1d1;
    border: 1px solid #d1d1d1;
    border-radius: var(--px-8);
    font-family: "Montserrat";
    font-size: var(--px-14);
    font-weight: 700;
    color: #FFFFFF;
    cursor: pointer;
}

    .btn_done.active {
        background-color: #41A2FC;
    }

/* ******************************************************************************************************************************************* */
/* form create */
.form-register {
    width: var(--px-440);
    height: var(--px-300);
    max-width: var(--px-730);
    background: #fff;
    border-radius: var(--px-10);
    margin-bottom: 5%;
    padding: var(--px-12);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

    .form-register p {
        font-family: "Montserrat";
        font-size: var(--px-24);
        font-weight: 600;
        color: #2B2E34;
        text-transform: capitalize;
    }

    .form-register .sms p {
        font-family: "Montserrat";
        font-size: var(--px-12);
        font-weight: 400;
        color: #41A2FC;
        margin-left: var(--px-4);
    }

    .form-register .email p {
        font-family: "Montserrat";
        font-size: var(--px-12);
        font-weight: 400;
        color: #707070;
        margin-left: var(--px-4);
    }

.form_register_phone {
    width: 100%;
    margin-top: var(--px-10);
}

    .form_register_phone label {
        font-family: "Montserrat";
        font-size: var(--px-12);
        font-weight: 400;
        color: #707070;
        margin-bottom: var(--px-10);
    }

    .form_register_phone b {
        color: red;
    }

.input_login_register {
    width: calc(100% - var(--px-20));
    height: var(--px-48);
    border: 1px solid #979797;
    border-radius: var(--px-10);
    outline: none;
    padding-left: var(--px-10);
}

.btn_back_new_client {
    height: var(--px-40);
    border: 1px solid transparent;
    border-radius: var(--px-10);
    background-color: #00000020;
    font-family: "Montserrat";
    font-size: var(--px-16);
    font-weight: 700;
    color: #fff;
    cursor: pointer;
}

.sms_regis {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-radius: var(--px-24);
    width: var(--px-105);
    height: var(--px-32);
    border: 1px solid #00000020;
    cursor: pointer;
}

    .sms_regis.active {
        border: 1px solid #41A2FC;
    }

    .sms_regis p {
        font-family: "Montserrat";
        font-size: var(--px-12);
        font-weight: 400;
        color: #707070;
        margin-left: var(--px-4);
    }

    .sms_regis.active p {
        color: #41A2FC;
    }

    .sms_regis .img {
        width: var(--px-25);
        height: var(--px-25);
        background: url("/Content/image/email.svg");
    }

    .sms_regis.active .img {
        width: var(--px-25);
        height: var(--px-25);
        background: url("/Content/image/sms.svg");
    }

.email_regis {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-radius: var(--px-24);
    width: var(--px-105);
    height: var(--px-32);
    border: 1px solid #00000020;
    cursor: pointer;
}

    .email_regis.active {
        border: 1px solid #41A2FC;
    }

    .email_regis p {
        font-family: "Montserrat";
        font-size: var(--px-12);
        font-weight: 400;
        color: #707070;
        margin-left: var(--px-4);
    }

    .email_regis.active p {
        color: #41A2FC;
    }

    .email_regis .img {
        width: var(--px-25);
        height: var(--px-25);
        background: url("/Content/image/email.svg");
    }

    .email_regis.active .img {
        width: var(--px-25);
        height: var(--px-25);
        background: url("/Content/image/sms.svg");
    }

.phone_regis {
    display: none;
}

    .phone_regis.active {
        display: block;
    }

.email_regis_ {
    display: none;
}

    .email_regis_.active {
        display: block;
    }

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

/* ******************************************************************************************************************************************* */
/* form verify */
.form-verify {
    width: var(--px-440);
    height: var(--px-320);
    max-width: var(--px-730);
    background: #fff;
    border-radius: var(--px-10);
    margin-bottom: 5%;
    padding: var(--px-16);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

    .form-verify h1 {
        font-family: "Montserrat";
        font-size: var(--px-20);
        font-weight: 600;
        color: #292D32;
    }

    .form-verify .phone_verify_text {
        font-family: "Montserrat";
        font-size: var(--px-14);
        font-weight: 500;
        color: #505050;
    }

.inputs_container {
    display: flex;
    justify-content: center;
    gap: var(--px-10);
    margin-bottom: 2.74rem;
}

    .inputs_container input {
        width: var(--px-47);
        height: var(--px-48);
        background-color: #fff;
        border-radius: var(--px-4);
        border: 1px solid transparent;
        box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.35) inset;
        font-size: var(--px-24);
        font-weight: 700;
        color: #979797;
        text-align: center;
        padding: var(--px-4);
        transition: 220ms ease-in-out;
        outline: none;
    }

        .inputs_container input:focus {
            border-color: #979797;
        }

#countdown.clickable {
    cursor: pointer;
    color: #41A2FC;
}

.form-verify p {
    font-family: "Montserrat";
    font-size: var(--px-12);
    font-weight: 500;
    color: #505050;
}

.form-verify b {
    font-family: "Montserrat";
    font-size: var(--px-12);
    font-weight: 700;
    color: #41A2FC;
    cursor: pointer;
}

.btn_backVerify {
    width: 100%;
    height: var(--px-47);
    border-radius: var(--px-10);
    border: 1px solid #00000040;
    background-color: #00000040;
    cursor: pointer;
    font-family: "Montserrat";
    font-size: var(--px-16);
    font-weight: 700;
    color: #fff;
}

.btn_verify {
    width: 100%;
    height: var(--px-47);
    border-radius: var(--px-10);
    border: 1px solid #41A2FC85;
    background-color: #41A2FC85;
    cursor: pointer;
    font-family: "Montserrat";
    font-size: var(--px-16);
    font-weight: 700;
    color: #fff;
}

    .btn_verify.active {
        background-color: #41A2FC;
    }


/* ******************************************************************************************************************************************* */
/* appointment request */
.view-download {
    align-items: flex-start !important;
}

    .view-download b {
        font-size: var(--px-20);
    }

    .view-download span,
    .view-download p {
        font-size: var(--px-16);
    }

.about-download-row {
    align-items: flex-start !important;
}

.request_appt {
    width: 100%;
    height: 80%;
    max-width: var(--px-1200);
    border-radius: var(--px-10);
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.ticket {
    flex: 1;
    border: 1px solid var(--color-white);
    border-radius: var(--px-12);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    /* margin: 0 auto; */
    padding: var(--px-24);
    gap: var(--px-36);
    background: var(--color-white);
}

.price-ser {
    font-size: var(--px-12);
}

.top_request {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: var(--px-16);
}

.img_success {
    width: var(--px-80);
    height: var(--px-80);
}

.bottom_request {
    width: 100%;
    gap: var(--px-10);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.ticket .apt_title {
    font-size: var(--px-24);
    font-weight: 700;
    color: #231F20;
}

.ticket .apt_thanks {
    font-size: var(--px-16);
    font-weight: 500;
    color: #231F20;
    text-align: center;
    padding: 0 var(--px-32);
}

    .ticket .apt_thanks::after {
        content: "";
        display: block;
        border-bottom: 1px solid #D1D1D1;
        width: 50%;
        margin: var(--px-12) auto;
    }

.info_appt {
    width: 100%;
}

.ticket_number,
.ticket_date,
.ticket_deposit {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 var(--px-16)
}

.show-addon-selected {
    display: flex;
    color: #F44C7F;
    align-items: center;
    border-radius: var(--px-24);
    border: 1px solid #F44C7F;
    font-size: var(--px-12);
    font-weight: bold;
    justify-content: center;
    height: var(--px-18);
    width: max-content;
    margin: 0 auto;
    gap: var(--px-4);
    padding: 0 4px;
}

    .show-addon-selected i {
        font-size: 2px;
    }

.ticket_number p,
.ticket_date p,
.ticket_deposit p {
    margin-block-start: 10px;
    margin-block-end: 10px;
    font-family: "Montserrat";
    font-size: var(--px-16);
    font-weight: 500;
    color: #231F20;
}

.card_deposit {
    width: 95%;
    height: var(--px-50);
    background-color: #eee;
    border-radius: var(--px-12);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

    .card_deposit .txt_card_total {
        font-family: "Montserrat";
        font-size: var(--px-16);
        font-weight: 700;
        color: #343434;
        padding: 0 var(--px-16);
    }

    .card_deposit .txt_card_price,
    .txt_card_pricedeposit {
        font-family: "Montserrat";
        font-size: var(--px-30);
        font-weight: 700;
        color: #EB5781;
        padding: 0 var(--px-16);
    }

.btn_request {
    width: 95%;
    height: var(--px-47);
    border-radius: var(--px-10);
    border: 1px solid #41BCD5;
    background-color: #41BCD5;
    cursor: pointer;
    font-family: "Montserrat";
    font-size: var(--px-14);
    font-weight: 700;
    color: #fff;
}

/* marketing download app */
.marketing {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: left;
    flex: 1;
    margin: 0 var(--px-12);
}

.conditions {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--px-10);
}

    .conditions p {
        font-family: "Montserrat";
        font-size: var(--px-12);
        font-weight: 500;
        color: #292D32;
        text-decoration: underline;
        text-align: left;
        cursor: pointer;
    }

        .conditions p:hover {
            color: #979797;
        }

/* active form */
.page.active .payment {
    display: none;
}

    .page.active .payment.active {
        display: flex;
    }

.page.active .form-login {
    display: none;
}

    .page.active .form-login.active {
        display: flex;
    }

.page.active .form-register {
    display: none;
}

    .page.active .form-register.active {
        display: flex;
    }

.page.active .form-verify {
    display: none;
}

    .page.active .form-verify.active {
        display: flex;
    }

.page.active .request_appt {
    display: none;
}

    .page.active .request_appt.active {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-top: var(--px-24);
        gap: var(--px-16);
        height: 100%;
    }

.lst_service_add_ons {
    flex: 1;
    display: flex;
    padding: var(--px-12) 0;
    flex-direction: column;
}

.search-addons {
    border-radius: var(--px-8);
    height: var(--px-40);
    display: flex;
    align-items: center;
    padding: 0 var(--px-12);
    gap: var(--px-12);
    margin: var(--px-12);
    border: 1px solid #d1d1d1;
}

    .search-addons input {
        border: 0;
        outline: 0;
        box-shadow: unset;
        background: unset;
        flex: 1;
        font-size: var(--px-14);
        font-weight: 500;
    }

    .search-addons i {
        color: #A7A9AC;
    }

/* ******************************************************************************************************************************************* */
/* reponse */
@media (min-width: 1024px) {
    :root {
        --scale: 100;
    }

    .form {
        width: var(--px-440);
        height: var(--px-240);
    }

    /* responsive services */
    .list_service {
        max-width: 1040px;
        background-color: #fff;
        height: 250px;
    }

    .list_categories {
        display: flex;
        flex-direction: row;
    }

    .info-salon {
        padding: var(--px-20) var(--px-40);
    }
}

@media (max-width: 1023px) and (min-width: 768px) {
    :root {
        --scale: 90;
    }

    .form {
        margin-top: 8px;
        width: 100%;
    }

    .list-store {
        height: 100%;
    }
}

@media (max-width: 767px) and (min-width: 600px) {
    :root {
        --scale: 80;
    }
}

@media (max-width: 599px) {
    :root {
        --scale: 80;
    }

    .lst-btn {
        gap: var(--px-12);
    }

        .lst-btn .btn {
            width: calc(100% / 3 + 20px);
        }

    /* responsive service */
    .container {
        max-height: unset;
        border-radius: inherit;
        height: calc(100% - 60px);
    }

    .tab-view {
        height: calc(100% - var(--px-40));
        max-height: 100%;
    }

    .tab-chill {
        background: #fff;
    }

    .choose_categories {
    }

    /* categories */
    .categoryTitle {
        font-size: var(--px-16);
    }

    .list_categories {
    }

    .lst_categories {
        width: 100%;
    }

    .swiper-button-prev,
    .swiper-button-next {
        display: none;
    }

    /* services */
    .choose_services {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .search-service input {
        border: none;
        font-size: var(--px-20);
        font-weight: 500;
    }

    .search-service {
    }

    .btn_next_service,
    .btn_prev_service {
        display: none !important;
    }

    .list_service {
        gap: var(--px-17);
    }

    .boxSlide {
        width: var(--px-190);
        max-height: var(--px-120);
        height: 130px;
    }

    .popup-detail-ticket {
        width: calc(100% - var(--px-100));
    }

    /* tech */
    .tab-tech .center {
        padding: var(--px-16);
        width: 100%;
    }

    .search_techs {
    }

    .box_items {
        width: 100%;
        margin: 0 auto;
    }

    .item-tech {
        flex: 0 0 calc(33.333% - var(--px-20));
        min-width: var(--px-100);
        margin-bottom: 10px;
    }

    .name-tech {
        font-size: var(--px-18);
    }

    /* responsive time */
    .calendar-box {
        flex-direction: column;
        gap: var(--px-8);
    }

        .calendar-box::after {
            display: none;
        }

    .datepicker-inline {
    }

    .datepicker-days {
        width: 100%;
        height: 100%;
    }

    .calendar__date {
        width: 100%;
    }

    .table-condensed {
        width: 100%;
        height: 100%;
    }

    .datepicker td.day {
        font-size: var(--px-17);
    }

    .cal__tech {
    }

    .tech_no_time {
        text-align: center;
    }

    .calendar-time {
    }

    .list_time_book {
        width: 100%;
        height: var(--px-260);
    }

    .list_time_mor,
    .list_time_aft {
        gap: var(--px-8);
        width: 100%;
        height: var(--px-260);
    }

    .list_time {
        width: 100%;
    }

    .box_time {
        width: calc(100% / 3.3);
        height: var(--px-40);
        max-height: var(--px-40);
        font-size: var(--px-17);
    }

    /* login */
    .box_login {
        width: var(--px-400);
    }

    /* summary */
    .container_apt .time_out {
        top: var(--px-65);
    }

    .book_summary {
        max-width: calc(100vw - var(--px-60));
    }

    .info_services .txt_edit_service {
        display: none;
    }

    .table_title {
        padding: 0 var(--px-4);
    }

    .note_input {
        max-width: calc(100vw - var(--px-60));
    }

    /* form payment */
    .payment {
        width: calc(100vw - var(--px-60));
    }

        .payment .time_out {
            top: var(--px-20);
        }

    .input_form_group {
        width: 100%;
        height: var(--px-45);
    }

    .form_card_left,
    .form_card_right {
        width: 50%;
        height: 100%;
    }

    /* form input */
    .img__ {
        width: var(--px-60);
        height: var(--px-60);
    }

    /* form create client */
    .form_create_client {
        width: calc(100vw - 60px);
        height: calc(100% - 40px);
    }

    /* form add guest */
    .box_add_guest {
        width: calc(100vw - 60px);
    }

    /* policy */
    .policy {
        width: 100%;
        max-width: calc(100vw - var(--px-48));
    }

    .content_policy {
        padding: 0;
        max-height: 90%;
    }

    .marketing {
        width: 100%;
    }

    /* form-create-account { */
    .form-create-account {
        height: var(--px-400);
    }

    /* appt success */
    .page.active .request_appt.active {
        display: flex;
        flex-direction: column;
        width: calc(100vw - var(--px-48));
        gap: var(--px-12);
        margin: 0 auto;
    }

    .ticket {
        flex: unset;
        padding: var(--px-12);
        margin-top: var(--px-12);
    }

    /* responsive cart */
    .cart {
        top: var(--px-50);
    }

        .cart .cart-icon {
            top: var(--px-12);
        }

        .cart.active .cart-icon {
            top: -10px;
        }

        .cart.active .cart-view {
            top: -10px;
            height: calc(100% - var(--px-30));
        }

    .cart-items {
        height: calc(100% - var(--px-30));
    }

    .person {
        width: 100%;
        height: 100%;
        max-height: 100%;
    }
    /* mobile home screen */
    .form-container {
        height: auto !important;
    }

    .list-store {
        height: 100%;
        display: block !important;
        align-items: unset !important;
        flex-direction: column;
    }

    .form {
        flex: 1 !important;
        margin-top: 12px;
        min-height: 160px;
    }

    .form_title_store {
        font-size: 16px !important;
    }

    .form_title_address {
        font-size: 12px !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 170px;
    }

    .form_btn_book {
        width: 110px !important;
    }

    .lst_categories .swiper-slide .category-item {
        width: calc(100% - 25px);
        padding: 10px 5px;
    }

    .name_category {
        font-size: var(--px-20);
        width: 100%;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-weight: 600;
    }

    p.box_service_name {
        font-size: var(--px-20);
        font-weight: 500;
    }

    .box_service_price {
        font-size: var(--px-20);
    }

    .btn_clean button, .btn_clean button.btn__done {
        font-size: var(--px-17);
    }

        .btn_clean button.btn__done {
            height: var(--px-50);
        }

    .lst_service_add_ons {
        overflow: auto;
    }

    .datepicker-inline {
        height: var(--px-350);
        width: var(--px-350);
    }

    .info_client .name_client,
    .info_client .phone_client,
    .info_services .text_service {
        font-size: 13px;
    }

    .info_services .text_service {
        height: 16px;
    }

    .search_techs input[type="text"] {
        font-size: 14px;
    }

    .time_service {
        flex-direction: column;
        width: calc(100% - 20px);
    }

    .info_services {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        min-width: 180px;
    }
}

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

.view-download {
    display: flex;
    gap: var(--px-8);
    flex-direction: column;
    margin-top: var(--px-24);
}

.btn-google-play, .btn-apple-store {
    flex: 1;
    min-width: 100px !important;
    height: 44px !important;
    border: 1px solid #a7a7a7 !important;
    border-radius: 12px !important;
    padding: var(--px-12) !important;
    padding-left: var(--px-70) !important;
}

    .btn-google-play p, .btn-apple-store p {
        font-weight: 500 !important;
        font-size: 12px !important;
        margin: 0px !important;
    }

.view-download b {
    font-size: var(--px-20);
}

.about-download-row p {
    width: 100%;
    margin: 4px 0;
    color: #2c2c2c;
    font-weight: 500;
    font-size: var(--px-14);
}

.option-choose-tech {
    gap: 20px;
    width: 30%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
}

.option-choose-tech-type {
    height: 40%;
    max-height: 150px;
    font-family: "Montserrat";
    font-size: var(--px-18);
    color: #343434;
    text-align: center;
    text-transform: capitalize;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0px 3px 20px #00000029;
    border: 1px solid #d1d1d1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    font-weight: 600;
    flex-direction: column;
    width: 100%;
    max-width: 180px;
    cursor: pointer;
}

    .option-choose-tech-type.selected {
        color: #fff !important;
        background: #41bcd4 !important;
    }

        .option-choose-tech-type.selected .tech-image path {
            fill: #fff !important;
        }

    .option-choose-tech-type img {
        width: 40px;
        height: 40px;
    }

    .option-choose-tech-type span {
        font-weight: 400;
        font-size: 13px;
    }

.box_items.lst_tech {
    display: flex;
    align-items: center;
    align-content: center;
}

.option-list-tech {
    width: 65%;
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    align-content: flex-start;
    max-height: 444px;
    gap: 20px;
    overflow: auto;
}

.box_items.tech-per-service .list-service {
    width: 30%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    height: 100%;
    overflow: auto;
}

.box_items.tech-per-service .list-tech {
    width: 65%;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    flex-direction: row;
    align-content: flex-start;
    overflow: auto;
    height: 100%;
}

.it-sv.md-12 {
    display: flex;
    justify-content: space-between;
    width: calc(100% - 45px);
    background: #fff;
    height: 50px;
    padding: 20px;
    border-radius: 10px;
    cursor: pointer;
}

    .it-sv.md-12.selected {
        color: #000;
        background: #d9f2f6;
        border: 1px solid #41bcd4;
    }

    .it-sv.md-12 .it-sv-name, .it-sv.md-12 .it-sv-price {
        font-weight: 600;
        display: flex;
    }

    .it-sv.md-12.selected .it-sv-techname {
        font-weight: 600;
        font-size: 15px;
        color: #00bed5;
    }

    .it-sv.md-12 .md-6 {
        gap: 10px;
        display: flex;
        flex-direction: column;
    }

@media (max-width: 600px) {
    .lst_tech {
        width: 100%;
        padding: 10px;
        display: flex;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-content: unset !important;
        align-items: unset !important;
        height: calc(100% - 142px);
    }

    .option-choose-tech {
        display: flex;
        flex-direction: row;
        height: 100px;
        width: 100%;
    }

    .option-list-tech {
        width: 100%;
        max-height: calc(100% - 108px) !important;
    }

    .option-choose-tech-type {
        height: calc(100% - 21px);
    }

    .tech-per-service {
        display: flex;
        flex-wrap: wrap;
    }

    .box_items {
        width: -webkit-fill-available;
        margin: 0 auto;
    }

        .box_items.tech-per-service .list-service {
            width: calc(100% - 0px);
            height: 90px;
            overflow: auto;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            gap: 20px;
        }

    .it-sv.md-12 {
        min-width: 250px;
        padding: 10px;
    }

    .it-sv-name {
        font-size: 16px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 170px;
    }

    .it-sv-techname {
        font-weight: 600;
        font-size: 13px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 170px;
    }

    .box_items.tech-per-service .list-tech {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        flex-direction: row;
        align-content: flex-start;
        overflow: auto;
        height: calc(100% - 135px);
    }
}

/* update welcome screen */
.form-container {
    /* flex-direction: column; */
    width: 100%;
    height: 800px;
    justify-content: center;
    display: flex;
    white-space: wrap;
    scroll-behavior: smooth;
    overflow-y: auto;
    gap: 16px;
    align-items: center;
}

.list-store {
    justify-content: center;
    display: flex;
    padding: 10px;
    flex-wrap: wrap;
    gap: 16px;
    width: 90%;
    /* height: 100%; */
    align-items: center;
}

.welcom-page {
    width: 100%;
    height: 100vh;
}

.welcome-form::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

.welcome-form::-webkit-scrollbar-thumb {
    background-color: gray;
    border-radius: 10px;
}

.welcome-form::-webkit-scrollbar-track {
    background-color: #f0f0f0;
}

.form {
    flex: 0 0 auto;
    min-width: 300px;
    box-sizing: border-box;
    border-radius: var(--px-12);
    background: linear-gradient(220deg, #f4d0cf, #FEF6F6);
    box-shadow: 0 var(--px-4) var(--px-10) rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--px-20);
    border: 1px solid #ccc;
    position: relative;
}

.form-card {
    display: flex;
}

.store-info {
    margin-left: var(--px-12);
}

.form_img,
.logoStore {
    width: var(--px-74);
    height: var(--px-74);
    border-radius: 50%;
    object-fit: cover;
}

.form_name_store {
    font-size: var(--px-24);
    font-family: "Montserrat";
    font-weight: bold;
    color: #eb5781;
}

.form_address_store {
    font-size: var(--px-16);
    font-family: "Montserrat";
    font-weight: 500;
    color: #000000;
}

.form_btn_book {
    width: 132px;
    height: var(--px-40);
    border: 1px solid transparent;
    border-radius: var(--px-8);
    background-color: #ffffff;
    color: #41BCD5;
    font-weight: 700;
    font-size: var(--px-16);
    font-family: "Montserrat";
    text-transform: uppercase;
    cursor: pointer;
    float: right;
    position: absolute;
    right: 20px;
    bottom: 20px;
}

.showfull {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
}
.option-list-tech.show-full{
    width:100%;
}