@import url("https://fonts.googleapis.com/css2?family=Shantell+Sans:wght@300&display=swap");

body {
    font-family: "Shantell Sans", cursive;
}

a,
#main #main-buttons .company-name,
#main #main-content .title-main,
#main #main-content #sb_content #content-view #schedule .overview tr td.day,
#main #main-content #sb_content #content-view #schedule .overview tr td.time,
#main #main-content #sb_content #content-view .txt,
#main #main-content #sb_content #content-view #contacts li .links,
#header .nav-wrapper #sb_menu .nav li a,
.btn,
.invoice-pay-page-grid form input[type="button"],
.invoice-pay-page-grid form input[type="submit"],
#sb_booking_content .tab .excerpt-info .btn-bar .btn.select,
.current-booking-info .cap,
.current-booking-info .booking-info,
.current-booking-info .label,
#booking-result-tabs .tabs-container .tab-link,
#sb_back_to_bookings .back-to-services,
.modal-title,
.title.custom-title,
.cap,
#news-single,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: unset !important;
}

a,
a:focus,
a:hover {
    color: #a06ab4;
}

.btn.select a {
    color: #fff !important;
}

#time-settings {
    display: none;
}

/* #sb_menu_list_items_container li:nth-child(2) {
	/* hide Review tab
	display: none !important;
} */

#header {
    padding: 10px 0;
}

#header .brand .logo {
    --logo-height: 50px;
}

#header .brand .logo a img {
    max-height: var(--logo-height);
    border-radius: calc(var(--logo-height) / 2);
}

#header .header-controls {
    justify-content: space-between;
}

#header .items-wrapper {
    min-width: unset;
    gap: unset;
}

#main #main-buttons .wrapper {
    height: unset;
}

#main #main-content #sb_content .section {
    height: unset;
}

#content-view {
    padding: unset !important;
}

#content-view #about-us {
    margin-bottom: 0;
}

#about-us .title-main {
    display: none;
}

#contacts .info ul li:last-child {
    display: unset;
}
#contacts .social .brand {
    display: unset;
}
#contacts .brand a:first-child {
    max-width: unset;
}
#contacts .brand a:first-child::before {
    content: "vivilla_studio";
    position: relative;
}
#contacts .brand a:after {
    font-size: unset;
    display: unset;
    line-height: unset;
}
#contacts .brand a:first-child::after {
    background-image: radial-gradient(
        circle at 30% 107%,
        rgb(255, 220, 128),
        rgb(252, 175, 69),
        rgb(252, 175, 69),
        rgb(247, 119, 55),
        rgb(245, 96, 64),
        rgb(253, 29, 29),
        rgb(225, 48, 108),
        rgb(193, 53, 132),
        rgb(138, 58, 185),
        rgb(88, 81, 219),
        rgb(64, 93, 230)
    );
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    position: relative;
    left: 3px;
    border-radius: unset;
}

#sb-timeline #steps-nav li a,
#sb-timeline #steps-nav li .content .title-small {
    font-family: unset;
}

#sb_service_step_container .tab {
    min-height: unset !important;
}
#sb_service_step_container .tab-pd {
    padding: unset;
    margin: 10px 20px 20px;
}
#sb_service_step_container .tab-pd .content {
    height: 89%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
#sb_service_step_container .read-more {
    display: none;
}
#sb_service_step_container .btn-bar .btn {
    height: 40px;
}
#sb_service_step_container .cap.short {
    height: unset;
}
#sb_service_step_container .txt.short {
    margin-bottom: unset;
    height: fit-content;
    flex-grow: 1;
}
#sb_service_step_container .bar-service .d-flex {
    margin-bottom: unset !important;
}
#sb_service_step_container .bar-service .time,
#sb_service_step_container .bar-service .badge {
    margin-top: unset !important;
}

#sb_service_step_container .preloader:has(svg) {
    display: none;
}

#sb_service_step_container .tab.tab-col .txt ol, .tab.tab-col .txt ul {
    padding-left: revert;
}

#sb_service_step_container .tab.tab-col .txt ol li, .tab.tab-col .txt ul li {
    list-style-position: revert;
}

#sb_service_step_container .tab.tab-col .txt ol li {
    list-style-type: lower-alpha;
}

#sb_sidebar_container .timeline-sidebar .tab .txt.short {
    max-height: unset;
    margin-bottom: unset;
}
#sb_sidebar_container .bar-service .d-flex {
    margin-bottom: unset !important;
}
#sb_sidebar_container .read-more {
    display: none;
}
#sb_sidebar_container .excerpt-info .name {
    margin-bottom: unset !important;
    height: unset !important;
}

#sb_package_filter_container {
    display: none;
}

#sb_package_list_container .tab.tab-col.tab-with-popup {
    height: 100%;
    margin-bottom: 0;
}

#sb_package_list_container .preloader {
    display: none;
}

#sb_package_list_container .tab-pd {
    height: 100%;
    display: flex;
    flex-direction: column;
}

#sb_package_list_container .content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#sb_package_list_container .cap.short {
    height: unset;
}

#sb_package_list_container .txt.short {
    height: fit-content;
    flex-grow: 1;
    -webkit-line-clamp: unset;
}

#sb_package_list_container .selected-package-list.short {
    height: unset;
    margin-top: unset;
}

.invoice-pay-page .invoice-pay-page-grid .left-block--section-pd {
    padding-top: unset;
}

#sb_invoice_buttons_container,
#sb_back_btns_plugin {
    padding: unset !important;
}

.footer-links .social.buttons {
    display: none;
}

.copyright {
    color: #a06ab4 !important;
}

#sb_terms_and_conditions_alert {
    --pay-code-height: 372px;
    height: var(--pay-code-height);
    background-image: url(https://lh3.googleusercontent.com/pw/AIL4fc9H3nI_yWfMlF36FzSwO41sS6LXTSH1FQvloBQqAvPspdHIeCJFtbijXjHIlQY1_kj7TNejRrjZV7aWnLmQkkUkB-FUKPbZ1tz_JTToIZgNTfs6hGxxjFXUE9FuBKZIax2BR-dCu212HN2GO6nCrFF6);
    background-size: 317px;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: 190px;
}

#sb_terms_and_conditions_alert::before {
    content: "請於12小時內付款，並請截圖及IG DM轉達給Studio。如超過12小時仍未付款，將會自動取消預約，敬請留意🤍\A\A如預約成功後，我們將會於已登記的Email 和 IG DM 通知閣下😘\A\A詳情請瀏覽”付款教學” 🧚‍♀️";
    white-space: pre-wrap;
}

#tutorial-info {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

#tutorial-info li {
    padding-bottom: 30px !important;
}

#tutorial-info img {
    width: 320px;
    vertical-align: top;
    box-shadow: 0px 0px 7px rgb(0, 0, 0, 0.5);
}

#custom-page {
    padding: 0 !important;
    background: initial !important;
}

#custom-page .title-main {
    padding-bottom: 10px;
    color: inherit;
}

.modal-dialog .modal-content {
    overflow: auto;
}

@media (max-width: 480px) {
    #sb_time_flexible_container .hour-head {
        flex-basis: 16vw !important;
    }

    #sb_time_flexible_container .time-slot {
        max-width: 16vw !important;
    }

    #sb_time_flexible_container .cell.sb-cell  {
        border-radius: 5px !important;
    }
}

@media (max-width: 767px) {
    #header .items-wrapper .nav-item#sb_multiple_book_cart {
        display: none;
    }

    #footer {
        padding-bottom: 20px;
        margin-top: 30px !important;
    }

    #sb_menu_list_items_container li.menu-item.clearfix {
        width: 100%;
    }

    #sb_menu_list_items_container a.popup-hide {
        width: 100%;
    }

    #sb_service_step_container .cap.short {
        font-size: 14px;
        line-height: unset;
        margin-bottom: unset;
    }
    #sb_service_step_container .txt.short {
        font-size: 14px;
        max-height: unset;
    }
    #sb_service_step_container .excerpt-info {
        display: flex;
    }
    #sb_service_step_container .bar-service .d-flex {
        font-size: 12px;
    }
    #sb_service_step_container .bar-service .badge {
        font-size: 16px !important;
    }
    #sb_service_step_container .btn-bar .btn {
        height: 28px;
        font-size: 16px !important;
    }

    #sb_package_list_container .txt.short {
        max-height: unset;
    }

    #sb_package_list_container .tab.tab-col .excerpt-info {
        display: inherit;
        height: inherit;
    }

    #sb_content #main-buttons .wrapper .inner {
        padding: 10px 0 50px;
    }

    #sb_service_step_container .cap.short {
        font-size: 14px;
        line-height: unset;
        margin-bottom: unset;
    }
    #sb_service_step_container .txt.short {
        font-size: 14px;
        max-height: unset;
    }
    #sb_service_step_container .excerpt-info {
        display: flex;
    }
    #sb_service_step_container .bar-service .d-flex {
        font-size: 12px;
    }
    #sb_service_step_container .bar-service .badge {
        font-size: 16px !important;
    }
    #sb_service_step_container .btn-bar .btn {
        height: 28px;
        font-size: 16px !important;
    }

    #tutorial-info {
        display: inherit;
    }

    #tutorial-info .image-wrapper {
        display: flex;
        justify-content: center;
        margin-top: 8px;
    }

    #tutorial-info img {
        max-width: 80vw;
        max-height: 70vh;
        width: unset;
    }
}

@media (max-width: 1024px) {
    #header {
        position: fixed;
        background-color: #f5e2d3;
    }

    #header .nav-wrapper {
        background: #fff;
        top: 80px;
    }

    #header .row .col-xs-8 {
        width: 0;
        padding: 0;
    }

    #header .logo a {
        left: calc(50vw - var(--logo-height) / 2);
        position: fixed;
        z-index: 1;
    }

    #main {
        top: 70px;
    }
}