/* ===================================
    Variables
====================================== */
:root {
    --main-red: #8b1e24;
    --dark-red: #6f181c;
    --main-blue: #00223d;
    --light-blue: #193850;
}

/* ===================================
    Form Control
====================================== */
.form-control-mytime {
    border: none;
    border-bottom: 1px solid #b2b2b2;
    padding: 12px 8px;
    background: #f0f0f0;
    letter-spacing: .7px;
    font-weight: 400;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    height: 44px;
    color: #000000 !important;
    font-size: 14px !important;
    position: relative;
    -webkit-transition: border .9s ease;
    -o-transition: border .9s ease;
    transition: border .9s ease;
    width: 100%;
    margin-bottom: 20px;
}

#confirm-promo-code .form-control-mytime {
    background: #ffffff;
}

#booking-form #booking-form-services .service .form-control-mytime {
    width: inherit;
    height: inherit;
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 0px !important;
}

/* ===================================
    Dialog UI Overrides
====================================== */
.ui-dialog.booking-form,
.ui-dialog.membership-form {
    max-width: 900px !important;
}

    .ui-dialog.booking-form .ui-dialog-buttonset.navigation-buttons,
    .ui-dialog.membership-form .ui-dialog-buttonset.navigation-buttons {
        display: flex;
        justify-content: space-between;
    }

/* ===================================
    Dialog Window Elements
====================================== */
/* General Layout */
#booking-form,
#membership-form {
    padding-top: 0px !important;
    font-weight: 300;
}

    #booking-form p,
    #membership-form p {
        font-size: 14px !important;
        line-height: 20px !important;
    }

    #booking-form hr,
    #membership-form hr {
        margin-top: .5rem !important;
        margin-bottom: .5rem !important;
    }

    #booking-form .hidden,
    #membership-form .hidden {
        display: none !important;
    }

    /* Header & Progress Bar */
    #booking-form .booking-form-header,
    #membership-form .membership-form-header {
        position: sticky;
        top: 0;
        background-color: white;
        z-index: 100;
        text-align: center;
    }

        #booking-form .booking-form-header img,
        #membership-form .membership-form-header img {
            max-width: 170px;
        }

        #booking-form .booking-form-header .booking-progress-bar,
        #membership-form .membership-form-header .membership-progress-bar {
            display: flex;
            justify-content: space-around;
        }

            #booking-form .booking-form-header .booking-progress-bar .step-container,
            #membership-form .membership-form-header .membership-progress-bar .step-container {
                font-weight: bold;
            }

                #booking-form .booking-form-header .booking-progress-bar .step-container .step,
                #membership-form .membership-form-header .membership-progress-bar .step-container .step {
                    width: 30px;
                    height: 30px;
                    border-radius: 50%;
                    background-color: #ccc;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 16px;
                    color: white;
                    margin-left: auto;
                    margin-right: auto;
                }

                    #booking-form .booking-form-header .booking-progress-bar .step-container .step.active,
                    #membership-form .membership-form-header .membership-progress-bar .step-container .step.active {
                        background-color: var(--main-red) !important;
                    }

                    #booking-form .booking-form-header .booking-progress-bar .step-container .step.clickable,
                    #membership-form .membership-form-header .membership-progress-bar .step-container .step.clickable {
                        cursor: pointer;
                    }

    /* Shared Section Headers */
    #booking-form .booking-form-locations-header,
    #booking-form .booking-form-stylists-header,
    #booking-form .booking-form-services-header,
    #booking-form .booking-form-times-header,
    #membership-form .membership-form-locations-header,
    #membership-form .membership-form-search-header,
    #membership-form .membership-form-membership-type-header {
        text-align: center;
    }

    /* Section Cards */
    #booking-form .card-header,
    #membership-form .card-header,
    #site-login-modal .card-header,
    #site-forgot-password-modal .card-header,
    #site-create-account-modal .card-header,
    #edit-personal-info-modal .card-header,
    #add-edit-address-modal .card-header,
    #edit-login-email-modal .card-header,
    #reset-password-modal .card-header,
    #replace-credit-card-modal .card-header,
    #appointment-details-modal .card-header,
    #membership-details-modal .card-header {
        background-color: var(--main-blue) !important;
        color: white;
        border: solid 3px var(--main-blue) !important;
        padding-top: 15px;
    }

    #booking-form .card-body,
    #membership-form .card-body,
    #site-login-modal .card-body,
    #site-forgot-password-modal .card-body,
    #site-create-account-modal .card-body,
    #edit-personal-info-modal .card-body,
    #add-edit-address-modal .card-body,
    #edit-login-email-modal .card-body,
    #reset-password-modal .card-body,
    #replace-credit-card-modal .card-body,
    #appointment-details-modal .card-body,
    #membership-details-modal .card-body {
        border: solid 3px var(--main-blue) !important;
        border-top-width: 0px;
    }

    #booking-form #confirm-booking .card-body,
    #membership-form #confirm-membership .card-body {
        padding: 0rem 1rem;
    }

    #booking-form #confirm-booking .row,
    #membership-form #confirm-membership .row {
        padding: 20px 0px;
    }

        #booking-form #confirm-booking .row.alternating,
        #membership-form #confirm-membership .row.alternating {
            background-color: #e6eaf0;
        }

    #booking-form #confirm-booking #confirm-id,
    #membership-form #confirm-membership #confirm-id {
        color: var(--main-red) !important;
    }

    #booking-form #paymentWindow,
    #membership-form #paymentWindow {
        height: 315px !important;
        width: 100%;
        max-width: 390px !important;
        margin: 0 auto !important;
    }

    /* location search box */
    #booking-form #locationSearch.form-control-mytime,
    #membership-form #locationSearch.form-control-mytime {
        display: block;
        width: 100%;
        padding: .375rem .75rem;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        color: var(--bs-body-color);
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-color: var(--bs-body-bg);
        background-clip: padding-box;
        border: var(--bs-border-width) solid var(--bs-border-color);
        border-radius: var(--bs-border-radius);
        transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
        margin-bottom: 0px;
    }

    /* find your location elements */
    #booking-form #fyl-selected-location-image {
        max-width: 100%;
        aspect-ratio: 1 / 1;
    }

    #booking-form .fyl-selected-location-name {
        font-size: 19pt;
        color: var(--main-blue) !important;
        font-weight: 600;
    }

    #booking-form .fyl-selected-location-detail-container {
        padding: 25px 0px;
    }

    #booking-form #fyl-location-details,
    #booking-form #fyl-selected-location-buttons {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        height: 100%;
    }

        #booking-form #fyl-location-details a {
            text-decoration: none !important;
        }

        #booking-form #fyl-selected-location-buttons .btn {
            min-width: 160px;
        }

    /* Locations, Stylists, Services, Times, Membership Types */
    #booking-form #booking-form-locations .location,
    #booking-form #booking-form-stylists .stylist,
    #booking-form #booking-form-services .service,
    #booking-form #booking-form-times .time,
    #membership-form #membership-form-locations .location,
    #membership-form #membership-form-search .membership-search-criteria,
    #membership-form #membership-form-membership-type .membership-type {
        margin: 25px 0px 0px 0px;
        font-size: 10.5pt;
        line-height: 14pt;
        -webkit-box-shadow: inset 0px 0px 0px 1px var(--main-blue) !important;
        -moz-box-shadow: inset 0px 0px 0px 1px var(--main-blue) !important;
        box-shadow: inset 0px 0px 0px 1px var(--main-blue) !important;
        cursor: pointer;
        border: solid 3px var(--main-red) !important;
        background-color: var(--main-blue) !important;
        color: white;
    }

    #booking-form #booking-form-locations .location,
    #booking-form #booking-form-stylists .stylist,
    #membership-form #membership-form-locations .location {
        min-height: 100px;
    }

    #booking-form #booking-form-services .service,
    #membership-form #membership-form-membership-type .membership-type {
        padding: 10px 0px;
    }

    #membership-form #membership-form-search .membership-search-criteria {
        margin-top: 15px;
        font-size: 9pt;
        min-height: 50px;
    }

    #booking-form #booking-form-services #services-tabs .service-price,
    #booking-form #booking-form-services #services-tabs .service-duration,
    #membership-form #membership-form-membership-type .membership-price {
        font-size: 12pt;
        font-weight: 600;
        margin: 10px 0px;
    }

    #booking-form #booking-form-times .time,
    #membership-form #membership-form-search .membership-search-criteria {
        text-align: center;
    }

    #membership-form #membership-form-search .membership-search-criteria-content {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #membership-form #membership-form-search .membership-form-search-age-selection,
    #membership-form #membership-form-search .membership-form-search-haircut-selection,
    #membership-form #membership-form-search .membership-form-search-frequency-selection,
    #membership-form #membership-form-search .membership-form-search-miscellaneous-selection {
        margin-top: 25px;
    }

    /* Selected States */
    #booking-form #booking-form-locations .location.selected,
    #booking-form #booking-form-stylists .stylist.selected,
    #booking-form #booking-form-services .service.selected,
    #booking-form #booking-form-times .time.selected,
    #membership-form #membership-form-locations .location.selected,
    #membership-form #membership-form-search .membership-search-criteria.selected,
    #membership-form #membership-form-membership-type .membership-type.selected {
        -webkit-box-shadow: inset 0px 0px 0px 1px var(--main-red) !important;
        -moz-box-shadow: inset 0px 0px 0px 1px var(--main-red) !important;
        box-shadow: inset 0px 0px 0px 1px var(--main-red) !important;
        border: solid 3px var(--main-blue) !important;
        background-color: var(--main-red) !important;
    }

    /* Location/Stylist/Service Text & Images */
    #booking-form #booking-form-locations .location .location-text,
    #booking-form #booking-form-stylists .stylist .stylist-text,
    #membership-form #membership-form-locations .location .location-text {
        display: grid;
        align-items: center;
        padding: 5px 0px 5px 10px;
    }

        #booking-form #booking-form-locations .location .location-text .location-distance,
        #membership-form #membership-form-locations .location .location-text .location-distance {
            margin-top: 5px;
            font-weight: bold;
        }

    #booking-form #booking-form-locations .location .location-image-container,
    #booking-form #booking-form-stylists .stylist .stylist-image-container,
    #membership-form #membership-form-locations .location .location-image-container {
        padding: 0px !important;
    }

    #booking-form #booking-form-locations .location .location-image,
    #booking-form #booking-form-stylists .stylist .stylist-image,
    #membership-form #membership-form-locations .location .location-image {
        max-width: 100%;
    }

    /* Addons */
    #booking-form #booking-form-services .service .addons {
        padding-right: 20px;
    }

        #booking-form #booking-form-services .service .addons .addon-checkbox {
            padding-right: 0px;
        }

            #booking-form #booking-form-services .service .addons .addon-checkbox .addon-checkbox-control {
                vertical-align: text-bottom;
            }

    /* Tabs */
    #booking-form #booking-form-services #services-tabs #tab-list {
        font-size: 10pt;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

        #booking-form #booking-form-services #services-tabs #tab-list .ui-state-active {
            background-color: var(--main-red) !important;
            border: 1px solid var(--main-blue) !important;
            border-bottom-width: 0px;
        }

    /* Select Box Styling */
    #booking-form .box,
    #membership-form .box {
        position: relative;
    }

        #booking-form .box select,
        #membership-form .box select {
            background-color: var(--main-blue) !important;
            color: white;
            padding: 10px 0px 10px 15px;
            width: 100%;
            border: none;
            font-size: 16px;
            cursor: pointer;
            box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
            border: solid 3px var(--main-red) !important;
            outline: none;
            text-indent: 1px;
            text-overflow: '';
            -o-appearance: none;
            -ms-appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
        }

        #booking-form .box::before,
        #membership-form .box::before {
            content: "\f13a";
            font-family: FontAwesome;
            position: absolute;
            top: 0;
            right: 0;
            width: 20%;
            height: 100%;
            text-align: center;
            font-size: 28px;
            line-height: 45px;
            color: rgba(255, 255, 255, 0.5) !important;
            background-color: rgba(255, 255, 255, 0.1) !important;
            pointer-events: none;
        }

        #booking-form .box:hover::before,
        #membership-form .box:hover::before {
            color: rgba(255, 255, 255, 0.6);
            background-color: rgba(255, 255, 255, 0.2);
        }

        #booking-form .box select option,
        #membership-form .box select option {
            padding: 30px;
        }

        #booking-form .box select::-ms-expand,
        #membership-form .box select::-ms-expand {
            display: none;
        }

    /* Switches */
    #membership-form .switch {
        position: relative;
        display: inline-block;
        width: 125px;
        height: 34px;
    }

        #membership-form .switch input {
            display: none;
        }

    #membership-form .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: var(--main-red) !important;
        -webkit-transition: .4s;
        transition: .4s;
    }

        #membership-form .slider:before {
            position: absolute;
            content: "";
            height: 26px;
            width: 26px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            -webkit-transition: .4s;
            transition: .4s;
        }

    #membership-form input:checked + .slider {
        background-color: var(--main-blue) !important;
    }

    #membership-form input:focus + .slider {
        box-shadow: 0 0 1px #2196F3;
    }

    #membership-form input:checked + .slider:before {
        -webkit-transform: translateX(91px);
        -ms-transform: translateX(91px);
        transform: translateX(91px);
    }

    #membership-form .on, #membership-form .off {
        color: white !important;
        position: absolute;
        transform: translate(-50%,-50%);
        top: 50%;
        left: 50%;
        font-size: 13px;
        font-weight: 600;
    }

    #membership-form .on {
        display: none;
        left: 45%;
    }

    #membership-form .off {
        left: 57%;
    }

    #membership-form input:checked + .slider .on {
        display: block;
    }

    #membership-form input:checked + .slider .off {
        display: none;
    }

    #membership-form .slider.round {
        border-radius: 34px;
    }

        #membership-form .slider.round:before {
            border-radius: 50%;
        }

    /* Spinner */
    #booking-form .spinner-container,
    #membership-form .spinner-container {
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 9999;
        background: rgba(255, 255, 255, 0.5);
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }

        #booking-form .spinner-container .spinner,
        #membership-form .spinner-container .spinner {
            border: 4px solid rgba(0, 0, 0, 0.1);
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border-left-color: #09f;
            animation: spin 1s linear infinite;
            position: absolute;
            left: 50%;
            top: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Error States */
#booking-form .form-control-mytime.ui-state-error,
#membership-form .form-control-mytime.ui-state-error {
    border: none;
    border-bottom: 1px solid #b2b2b2;
    padding: 12px 8px;
    background: #f0f0f0;
    letter-spacing: .7px;
    font-weight: 300;
    border-radius: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    height: 44px;
    color: white;
    font-size: 14px;
    position: relative;
    -webkit-transition: border .9s ease;
    -o-transition: border .9s ease;
    transition: border .9s ease;
}

/* Close Button */
#booking-form .close,
#membership-form .close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 25px;
    height: 25px;
    opacity: 0.3;
    z-index: 999999;
    border: none;
}

#booking-form #promoCodeMessage .close {
    top: inherit;
}

#booking-form .close:hover,
#membership-form .close:hover {
    opacity: 1;
}

#booking-form .close:before,
#booking-form .close:after,
#membership-form .close:before,
#membership-form .close:after {
    position: absolute;
    left: 15px;
    content: ' ';
    height: 25px;
    width: 2px;
    background-color: #333;
}

#booking-form #promoCodeMessage .close:before,
#booking-form #promoCodeMessage .close:after {
    height: 0px;
    top: 0px;
}

#booking-form .close:before,
#membership-form .close:before {
    transform: rotate(45deg);
}

#booking-form .close:after,
#membership-form .close:after {
    transform: rotate(-45deg);
}

@media (max-width: 767px) {
    /* find your location elements */
    #booking-form .fyl-location-details-container h3 {
        font-size: 18pt !important;
    }

    #booking-form .fyl-selected-location-name {
        font-size: 16pt;
    }

    #booking-form .fyl-selected-location-detail-container {
        padding: 0px 0px;
    }

    #booking-form #fyl-location-details {
        font-size: 12pt !important;
    }

    #booking-form #fyl-selected-location-buttons {
        flex-direction: row;
    }
}

@media (max-width: 649px) {
    /* find your location elements */
    #booking-form #fyl-location-details {
        font-size: 11pt !important;
        line-height: 14pt !important;
    }
}

@media (max-width: 575px) {
    /* find your location elements */
    #booking-form .fyl-selected-location-name {
        font-size: 16pt;
        line-height: 20pt !important;
    }

    #booking-form #fyl-selected-location-buttons {
        margin-top: 8px;
    }

        #booking-form #fyl-selected-location-buttons .btn {
            min-width: 145px;
        }
}

@media (max-width: 474px) {
    .ui-dialog.booking-form .ui-dialog-buttonset.navigation-buttons .btn-large,
    .ui-dialog.membership-form .ui-dialog-buttonset.navigation-buttons .btn-large {
        font-size: 10px !important;
        font-weight: 600;
        padding: 10px 10px !important;
    }

    #booking-form #locationSearch.form-control-mytime,
    #membership-form #locationSearch.form-control-mytime {
        font-size: 12px;
    }

    #booking-form .location-text,
    #membership-form .location-text,
    #booking-form .stylist-text {
        font-size: 12px !important;
    }

    #booking-form .location-name,
    #membership-form .location-name,
    #booking-form .stylist-name,
    #booking-form .service-name,
    #membership-form .membership-name {
        font-size: 16px !important;
        font-weight: 500 !important;
    }

    #booking-form .service-price,
    #membership-form .membership-price {
        font-size: 12px !important;
    }

    #booking-form .service p,
    #booking-form .service .addon-name,
    #booking-form .service .addon-price,
    #membership-form .membership-type p {
        font-size: 12px !important;
    }

    #booking-form #confirm-booking .card-body h5,
    #membership-form #confirm-membership .card-body h5 {
        font-size: 16px !important;
    }

    #booking-form #confirm-location-details,
    #membership-form #confirm-location-details,
    #booking-form #confirm-stylist-appointment-details,
    #booking-form #confirm-services,
    #membership-form #confirm-membership-name,
    #membership-form #confirm-membership-description {
        font-size: 12px !important;
        line-height: 16px !important;
    }
}

@media (max-width: 399px) {
    .ui-dialog.booking-form .ui-dialog-buttonset.navigation-buttons .btn-large,
    .ui-dialog.membership-form .ui-dialog-buttonset.navigation-buttons .btn-large {
        font-size: 9px !important;
    }

    #booking-form .btn.btn-medium,
    #membership-form .btn.btn-medium {
        padding: 7px 1.5em !important
    }

    #booking-form .step-container,
    #membership-form .step-container {
        font-size: 14px;
    }
}