a {
    margin-right: 0px;
    margin-left: 0px;
}

.top-items {
    display: flex;
    margin: auto;
    width: fit-content;
    gap: 9.6px;
    margin-top: 20px
}

.client-footer-link.larger-font.legal.right-margin.w-inline-block {
    margin-bottom: 4px;
}

.calendar-button {
    padding: 8px;
}

.text-name {
    display: inline-block;
    margin: 0px;
    padding: 0px;
    float: none;
    border: none;
    border-radius: 4px;

}

.select-main-dropdown-icon {
    margin: 0px;
}

.small-text {
    display: flex;
    width: 153px;
    height: 100%;
    padding-right: 5px;
    padding-left: 5px;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    -webkit-align-content: space-around;
    -ms-flex-line-pack: distribute;
    align-content: space-around;
    align-items: center;

}

.week-column.facility-row {
    margin: 0px;
    border: 1px solid gainsboro;
    border-radius: 5px;
    justify-content: center;
}

.week-column-header,
.week-column-header.facility {
    padding: 12px 8px;
    height: 40px;
    position: relative;
    z-index: 5;
    padding: 0px 20px;
    padding-top: 20px;
    margin-top: 30px;
}

.sa-button-container {
    display: flex;
    justify-content: center;
}

.booking-content-box.select-classes {
    height: 651px;
    top: -40px
}

.confirm {
    background-color: hsla(var(--c4), 1) !important;
    color: hsla(var(--c3), 1) !important;
    border: hsla(var(--c4), 1) !important;
}

.recurring-radio-alignment {
    display: flex;
    gap: 8px;
}

.checkout-footer-price-wrapper,
.checkout-footer-date-time-wrapper {
    color: hsla(var(--c2), 1);
}

.week-column-header-wrapper {
    color: hsla(var(--c2), 1);
}

.week-column-date,
.week-column-day {
    color: hsla(var(--c2), 1);
}

.appointment-header {
    margin-bottom: 80px;
    padding-top: 0px;
    padding-right: 0px;
    padding-left: 0px;

    border: none;
    border-radius: 5px;
    background-color: none;

}

.appointment-content {
    overflow: auto;
    margin-top: 20px;
    height: 480px;
}

.appointments-padded {
    display: flex;
    width: 92px;
    height: 44px;
    margin: 13px 16px;
    font-family: 'Inter', Open Sans, sans-serif;
    font-size: 14px;
    padding: 12px 8px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 4px;
    align-self: stretch;
}

.time-slot.facility-slot {
    display: flex;
    width: 94px;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 28px;
    margin-bottom: 12px;
    align-items: center;
    height: auto;
    flex-direction: column;
    padding: 14px 12px;

}



/* .calendar-week-select-div {
    width: 296px;
    height: 40px;
} */

.week-column-header-t1 {
    gap: 2px;
}

.calendar-slot-box.facility {
    justify-content: flex-start;
}

.back-button-img.booking-flow {
    width: 16px;
    height: 16px;
}

.onboard-back-button {
    height: 41px;
    max-width: 888px;
    margin-right: auto;
    margin-left: auto;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-top: 30px;
    border-bottom: none;
    gap: 12px;
}

.booking-footer {
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    box-shadow: 0px -4px 8px 0px rgba(145, 158, 171, 0.08);
    border-radius: 8px;
}

.captions-medium {
    /* background: hsla(var(--c4), 0.1); */
}

.attendee-list {
    padding-top: 16px;
    overflow: auto;
    height: auto;
    top: 20px;
}

.booking-content-box {
    position: relative;
}

.booking-content-box.select-classes {
    overflow: unset;
    height: 651px;
    border-radius: 8px;
    background-color: hsla(var(--c3), 1);

}

.text-capitalize {
    text-transform: capitalize !important;
}

.cursor-pointer {
    cursor: pointer !important;
}

.color-red {
    color: red !important;
}

.attendee-list, .booking-content-list-text, .select-main-dropdown-list, .checkout-footer-price-wrapper, 
.confirmation-field-label, .default-font, .booking-footer-select-box, .week-column-header, .confirmationwrapper, 
.confirmationtext-dark, .credit-wrapper, .fc2, .al-items, .attendee-name-field, .attendee-list-item, .checkoutbutton 
.text_label, .al-items, .confirmationwrapper, .modal-body-section, .booking-info__attendee-info, .trainer-wording, .terms-link {
    font-family: 'Inter',sans-serif !important;
}

.select-main-dropdown-list {
    text-transform: capitalize;
    color: hsla(var(--c2), 1) !important;
}

.swal2-popup {
    gap: 20px;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 660px !important;
    min-height: 450px;
    height: auto;
    background-color: hsla(var(--c3), 1) !important;
    border-radius: 8px !important;
}

.swal2-icon {
    border: none !important
}

.swal2-styled.swal2-confirm {
    background-color: hsla(var(--c4), 1) !important;
    border: 1px solid hsla(var(--c4), 1) !important;
    color: hsla(var(--c3), 1) !important;
    max-width: 196px !important;
    min-height: 50px;
    height: auto;
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 22px !important;
}

.swal2-html-container {
    font-family: 'Inter', sans-serif !important;
    font-size: 20px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 28px !important;
    text-align: center !important;
    color: hsla(var(--c2), 1) !important;
    padding: 4em 1.6em 0.3em !important;
}

.swal2-title {
    position: absolute !important;
    top: 0 !important;
    left: auto !important;
    width: inherit !important;
    padding: 20px 24px !important;
    color: hsla(var(--c2), 1) !important;
}

.checkout-footer {

    border: 1px solid hsla(var(--c2), 0.2);
}

.review-main-header-box {
    border: 1px solid hsla(var(--c2), 0.2);
    box-shadow: 0px 4px 4px -4px hsla(var(--c4), 0.2);
}

.modal {
    backdrop-filter: blur(4px); /* Unprefixed */
    -webkit-backdrop-filter: blur(4px); /* Safari and Firefox with prefix */
}

.modal-header {
    border-bottom: 1px solid hsla(var(--c2), 0.2)
}

.modal-footer {
    border-top: 1px solid hsla(var(--c2), 0.2)
}

.event-list {
    display: flex !important;
    margin: 0px;
}

.booking-content-box.before-booking {
    overflow: auto;
    height: 50vh;
    padding: 120px 20px 100px;
}

.booking-content-list-item {
    padding: 0px 20px 17px 20px;
    border-bottom: 0px;
}

.event-attendee-selected-items {
    display: flex;
}

#hidden-spot-time,
#hidden-date-day {
    display: none;
}

.user-box-image.booking {
    margin-right: 0px;
}

.cc-row__member-name-wrapper.is-flex.margin-bottom-5 {
    gap: 8px
}

.cs-modal-hero-section {
    padding: 0px;
    border: 1px solid hsla(var(--c2), 0.2);
    border-radius: 8px;
}

.modal-header {
    padding: 20px 24px;
}

.booking-header {
    height: auto;
    gap: 12px;
    display: flex;
    justify-content: space-between;
    padding: 8px 0px !important;
    display: flex;
    flex-direction: row !important;
}

.invoice-gap {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

@media (max-width:592px) {
    .booking-content-list-item.classes-list.w-clearfix {
        flex-wrap: wrap;

    }

    .profile-top-nav-links {
        border-bottom: none;
    }

    #class-booking-content {
        flex-wrap: nowrap;
    }

    #facility-attendee-list {
        /* height:186px; */
        overflow: hidden;
    }

    .flex-justified-left.w-clearfix {
        gap: 20px
    }

    .web-hidden {
        display: flex;
    }

    #hidden-spot-time,
    #hidden-date-day {
        display: flex;
    }

    #date-day {
        width: 50%;
    }

    #time,
    #spot,
    #date-day {
        display: none;

    }

    .top-items {
        display: none;
    }

    .booking-header {
        margin-top: 0px;
    }
}

@media (max-width:360px) {
    .swal2-popup {
        /* height: 126% !important; */
    }

    .swal2-container {
        padding: 0px !important;
    }

    .top-items {
        display: none;
    }

    .booking-header {
        margin-top: 0px;
        padding: 8px 16px;
    }

    .booking-footer {
        bottom: 78px;
    }
    .booking-back-button {
        margin-left: 0px !important;
    }

}

::-webkit-scrollbar-thumb {
    border-radius: 200px;
    background: hsla(var(--c2), 0.12);
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    border-radius: 100px;
    background: hsla(var(--c3), 1);
}

.web-hidden {
    display: none;
}

.classpack-date-selection {
    width: 100%;
    max-width: 320px;
}

.w-icon-arrow-down:before,
.w-icon-dropdown-toggle:before {
    content: none;
}

.sweet-alert .sa-error-container p {
    top: 182px;
    left: 32px;
    color: red;
}

.form-control:focus {
    border: none;
    box-shadow: none;
}

.form-control {
    height: auto !important;
    box-shadow: none;
}

.booking-content-list-item {
    font-family: 'Inter', sans-serif;
}

::placeholder {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    color: hsla(var(--c2), 1) !important;
}

.common-input {
    border: 1px solid hsla(var(--c2), 0.2);
    padding: 0px;
}

.common-input:hover {
    border: 1px solid hsla(var(--c4), 1);
}

.common-input:focus {
    border-color: 2px solid hsla(var(--c4), 1) !important;
}



.w-icon-dropdown-toggle {
    position: relative;
}

.stripe form {
    width: 100%;
    max-width: 593px;
    margin: auto;
}

.p-32-24-16 {
    padding: 32px 24px 16px;
}

.popup-bottom.flex {
    height: 366px;
    top: 0px;
    width: 100%;
    max-width: 660px;
    border-radius: 4px;
    margin: auto;
    z-index: 99;

}

.iradio_square-green.checked {
    content: "\f058"
}

/* .sweet-alert h2{
    margin: 0px;
    display: flex;
    justify-content: center;
    margin-bottom: 8px;
    font-family: 'Inter',sans-serif;
    font-size: 32px;
    font-style: normal;
    line-height: 32px;
    color: hsla(var(--c2), 1);
    font-weight: 500;
    max-width: 660px;
    top: 36px;
    position: absolute;
    display: flex !important;
}


.sweet-alert p{
    font-family: 'Inter',sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 30px;
    display: flex !important;
    text-align: center;
    color: hsla(var(--c2), 1);
    margin-bottom: 48px !important;
    position: absolute;
    top: 80px;
    justify-content: center;
}
.sweet-alert fieldset{
    padding: 48px 0px;
}
.sweet-alert fieldset{
    padding: 0px;
  
}
.sweet-alert input{
    background-color: hsla(var(--c3), 1);
    color: hsla(var(--c2), 1);
    display: flex !important;
    position: absolute;
    top: 180px;
    margin: 0px !important;
   

}
.sweet-alert{
    padding:40px 32px;
    text-align: end;
    border-radius: 12px;
    background: hsla(var(--c3), 1);
    max-width: 588px;
    width: 100%;
    min-height: 406px;
    height: auto;
   
}
.sweet-alert button{
    margin: 0px 0px 0px 16px !important;
}
.sa-button-container{
 
    width: 100%;
    justify-content: center;
    max-width: 524px;
   
    margin-top: 48px !important;
} */
.booking-content-list-item.review-item-list.sub-list-type1 {
    padding-left: 20px;
}

.confirmation-field-label {
    color: hsla(var(--c2), 1);
}

.w-input,
.w-select {
    border: 1px solid hsla(var(--c2), 0.2)
}

.booking-content-list-item.review-item-list.sub-list-type2 {
    padding-left: 20px !important;
    background-color: hsla(var(--c3), 1);
    /* padding: 12px 20px !important; */
    align-items: center;
}

#ticket-attendee-info-90 {
    width: 100%;
    max-width: 790px;
    margin: auto;
}

.booking-body {
    max-width: 888px;
    height: auto;
    margin-top: 0px;
    overflow: hidden;
    background: #FFF;
    border-radius: 8px;
}

.review-auto-pay-box {
    padding: 0px;
}

.booking-header-text {
    display: block;
    margin: 10px;
    text-align: -webkit-left;
    margin-left: 40px;
}

.booking-body-main {
    overflow: hidden;

}

.booking-add-pointer {
    padding: 13px 4px;
}

.select-main-dropdown {
    padding: 20px 24px;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 8px;
    flex: 1 0 0;
    border-radius: 8px;
    border-bottom: white;
}

.select-main-dropdown-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 0 0;
    position: relative;
    top: -28px;
    font-family: 'Inter', sans-serif !important;
}

.select-main-dropdown-title.secondary-text {
    display: inline-block;
    flex-direction: row;
    justify-content: flex-end;
}

.select-main-header-box {
    top: 48px !important;
}

.select-main-dropdown-secondar-text {
    padding-right: 0px;
    /* margin-right: 16px; */
}

.booking-footer-button {
    border-radius: 4px;
    height: 48px !important;
    padding: 0 24px !important;
    background-color: hsla(var(--c4), 0.9) !important;
    transition: .3s;
}

.booking-footer-button:hover {
    background-color: hsla(var(--c4), 1) !important;
}

.checkoutbutton {
    background: none;
}

.classseries-content-box.dark-bg {
    background: none;
}

.credit-wrapper {
    flex-direction: row;
    align-items: center;
}

.checkouttext {
    margin-top: 0px;
}

.confirmationbutton-primary.alt-changes.alt-confirm {
    background-color: hsla(var(--c4), 1);
}

.confirmationbutton-primary.alt-changes.alt-confirm:hover {
    background-color: hsla(var(--c4), 1.1);
}

.confirmationbutton-secondary.alt-changes.alt-confirm {
    border-color: hsla(var(--c4), 1);
    -webkit-text-stroke-color: hsla(var(--c4), 1);
    outline-color: hsla(var(--c4), 1);
    color: hsla(var(--c4), 1);
}

.confirmationbutton-secondary.alt-changes.alt-confirm:hover {
    border-color: hsla(var(--c4), 1);
    background-color: hsla(var(--c4), 0.08);

}

.checkout-footer-button.w-button:hover {
    text-decoration: none !important;
    background-color: hsla(var(--c4), 1.1);
    border-color: hsla(var(--c4), 1);

}

.time-slot:hover {
    color: hsla(var(--c4), 1);
    border-color: hsla(var(--c4), 1);
    background-color: hsla(var(--c4), 0.08);
}

.time-slot:focus {
    color: hsla(var(--c4), 1);
    border-color: hsla(var(--c4), 1);
}

.time-slot.facility-slot:hover {
    color: hsla(var(--c4), 1);
    border-color: hsla(var(--c4), 1);
}

.time-slot.facility-slot.selected {
    color: hsla(var(--c4), 1);
    border-color: hsla(var(--c4), 1);
    background-color: hsla(var(--c4), 0.3);
}

.checkout-footer-remove-button {
    color: hsla(var(--c4), 1);
    border-color: hsla(var(--c4), 1);
    background: hsla(var(--c3), 1);
}

.booking-review-details-cards {
    box-shadow: none;
    background-color: hsla(var(--c3), 1);
}

.classschedule-list,
.classschedule-list-1 {
    border-top: 1px solid hsla(var(--c2), 0.2);
    border-bottom: 1px solid hsla(var(--c2), 0.2)
}

.classschedule-list,
.classschedule-list-1 {
    border: 1px solid hsla(var(--c2), 0.2);
}

.checkout-footer-remove-button:hover {
    text-decoration: none !important;
    background-color: hsla(var(--c4), 0.08);
    border-color: hsla(var(--c4), 1);
}

.select-week-day.is-selected {
    color: hsla(var(--c4), 1);
    border-color: hsla(var(--c4), 1);
    background-color: hsla(var(--c4), 0.05);
}

.select-month-day.is-selected {
    color: hsla(var(--c4), 1);
    border-color: hsla(var(--c4), 1);
    background-color: hsla(var(--c4), 0.05);
}

.select-month-day:hover {
    color: hsla(var(--c4), 1);
    border-color: hsla(var(--c4), 1);
    background-color: hsla(var(--c4), 0.05);
}

.select-week-day:hover {
    color: hsla(var(--c4), 1);
    border-color: hsla(var(--c4), 1);
    background-color: hsla(var(--c4), 0.05);
}

.buy-classpack-link:hover {
    text-decoration: none !important;
    background-color: hsla(var(--c4), 0.9);
    border-color: hsla(var(--c4), 1);
}

.checkout-footer-clear-selection-button:hover {
    background-color: hsla(var(--c11g), 0.08);
}

.checkout-footer-button:hover {
    color: hsla(var(--c3), 1) !important;
}

.booking-header {
    position: relative;
    margin-top: 0px;

}

.class-soldout {
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

.class-available {
    width: 35%;
    display: flex;
    justify-content: space-between;
}

.contentboxwrapper-viewlink {
    margin-right: 0px;
}

.select-main-dropdown-row {
    margin: 0px;
}

.classpack-success-lable-box,
.classpack-success-lable-box>label,
.classseries-list-text2,
.time-spots-mobile {
    font-weight: 400 !important
}

.classpck-success-spot-box {
    width: 230px;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
}

.classbooking-select {
    margin-top: 16px !important;
}
.price-bold {
    font-weight: 600 !important;
}

@media (max-width: 991px) {

    .booking-header {
        position: relative;
        left: 0px;
        top: 0px;
        right: 0px;
        width: 100%;
        max-width: 100%;
        margin-top: 0px;
    }

    .week-column-header-box {
        width: 160px;
    }
}

@media (max-width:701px) {
    .class-soldout {
        width: 100% !important;
    }

    .booking-content-list-item.classes-list.w-clearfix {
        height: auto !important;
    }

    .class-available {
        width: 100% !important;
        display: flex;
        justify-content: space-between;
    }

    #hidden-spot-time,
    #hidden-date-day {
        display: flex;
        width: 48%;
        padding: 0px !important;
        height: 40px;
        font-size: 12px;

    }

    #time,
    #spot,
    #date-day {
        display: none;
    }

    #date-day {
        width: 50% !important;
    }
}

@media (max-width:600px) {
    .flex-justified-left {
        display: flex;
        flex-direction: column;
    }

    .select-main-header-box {
        margin-bottom: 20px;
        top: 0px !important;
    }

    #dropdown-title {
        height: 1px;
    }

    #trainer-dropdown {
        margin-bottom: 16px
    }

    .select-main-dropdown {
        font-size: 16px;
    }

    .booking-content-list-item.classes-list.w-clearfix {
        height: auto !important;
    }

    #date-day {
        width: 50% !important;
    }

    .class-soldout {
        width: 100% !important;
    }

    #hidden-spot-time,
    #hidden-date-day {
        display: flex;
        width: 48%;
        padding: 0px !important;
        height: 40px
    }

    #time,
    #spot,
    #date-day {
        display: none;
    }

    .top-items {
        display: none;
    }

    .booking-header {
        margin-top: 0px;
    }

    .w-form {
        width: 100% !important;
    }
}

@media (max-width:360px) {

    .select-main-dropdown-title {
        font-size: 16px;
    }

    .booking-content-list-item.classes-list.w-clearfix {
        height: auto !important;
    }

    .class-soldout {
        width: 100% !important;
    }

    #date-day {
        width: 50% !important;
    }

    #class-spots {
        margin-left: 0px;
    }

    #hidden-spot-time,
    #hidden-date-day {
        display: flex;
        width: 33%;
        padding: 0px !important;
        height: 40px
    }

    #time,
    #spot,
    #date-day {
        display: none;
    }

}

.booking-content-list-item.classes-list.w-clearfix {
    height: 68px;
}

#class-booking-content {
    gap: 114px;
}

.time-slot {
    display: flex;
    width: 83px;
    margin-right: 6px;
    background-color: hsla(var(--c3), 1);
}

.confirm-separator {
    height: auto;
    margin: 0px;
}

.back-button-img.booking-flow {

    width: 16px;
    height: 16px;
}


/* Theme setting */

/* COLOR STYLES */

/* default styles */
* {
    border-color: hsla(var(--c2), 0.2);
    -webkit-text-stroke-color: hsla(var(--c2), 1);
    outline-color: hsla(var(--c2), 1);
}

a {
    color: inherit;
}

p {
    color: hsla(var(--c2), 0.7);
}

*::selection {
    background: hsla(var(--c2), 1);
    color: hsla(var(--c1), 1);
}

input::placeholder,
textarea::placeholder {
    color: hsla(var(--c2), 0.4) !important;
}

.w-checkbox-input.w--redirected-checked {
    background-color: hsla(var(--c4), 1);
    border-color: hsla(var(--c4), 1);
}

.w-radio-input.w--redirected-checked {
    background-color: hsla(var(--c4), 1);
    border-color: hsla(var(--c4), 1);
}

.w-clearfix:before,
.w-clearfix:after {
    content: none;
}

.info-color {
    color: var(--information-700, #00488C);
}

.outer-container {
    margin: 0px 24px;
}

/* root swatches */
html {
    --c1g: 220, 33%, 98%;
    /* #20201e */
    --c2g: 60, 3%, 13%;
    /* #ffffff */
    --c3g: 0, 0%, 100%;
    /*default*/
    --c4g: 234, 71%, 65%;

    --c5g: 0, 1%, 21%;
    /*blossom*/
    --c6g: 321, 75%, 54%;
    /*earth*/
    --c7g: 150, 74%, 30%;
    /*bandw*/
    --c8g: 0, 0%, 0%;
    /*electra*/
    --c9g: 68, 100%, 52%;
    /*vintage*/
    --c10g: 100, 100%, 100%;
    /* danger */
    --c11g: 0, 66%, 64%;
    /* success */
    --c12g: 153, 27%, 50%;
    /* warning */
    --c13g: 37, 66%, 64%;
}

/* set mode variables */
html,
[class*="md1"] {
    /* background color for light theme */
    --c1: var(--c1g);
    /* font color for light theme #363535*/
    --c2: var(--c2g);
    /* base/surface color for light theme #ffffff*/
    --c3: var(--c3g);
}

[class*="md2"] {
    /* background color for dark theme #20201e */
    --c1: var(--c2g);
    /* font color for dark theme #ffffff*/
    --c2: var(--c3g);
    /* base/surface color in dark theme #363535 */
    --c3: var(--c5g);
}

/* apply mode colors */
html,
[class*="md1"] {
    /* 3% of primary color on white bg */
    background-color: hsla(var(--c4), 0.03);
    /* 100% font color of #20201e */
    color: hsla(var(--c2), 1);
}

[class*="md2"] {
    /* 100% font color of #20201e */
    background-color: hsla(var(--c1), 1);
    /* 100% font color of #ffffff */
    color: hsla(var(--c2), 1);
}

/* becomes primary color */
/* accents */
[class*="default"] {

    --c4: var(--c4g);
}

[class*="cobalt"] {

    --c4: var(--c4g);
}

[class*="blossom"] {
    --c4: var(--c6g);
}

[class*="nature"] {
    --c4: var(--c7g);
}

[class*="bandw"] {
    --c4: var(--c8g);
}

[class*="electra"] {
    --c4: var(--c9g);
}

[class*="vintage"] {
    --c4: var(--c10g);
}

/* background color */
/* local */
[class*="bcbg"] {
    /* 5% of primary color for background*/
    background-color: hsla(var(--c4), 0.05);
}

[class*="bcbg_3"] {
    /* 3% of primary color for background*/
    background-color: hsla(var(--c4), 0.03);
}

[class*="bcbg_0"] {
    /* 0% of primary color for background*/
    background-color: hsla(var(--c4), 0);
}

[class*="bc0"] {
    /* no background */
    background-color: transparent !important;
}

[class*="bc1"] {
    /* 100% of #20201e for background in dark mode*/
    /* 100% of --c1g for background in ligh mode */
    background-color: hsla(var(--c1), 1);
}

[class*="bc2"] {
    /* 100% of #ffffff for background in dark mode*/
    /* 100% of #363535 for background in ligh mode */
    background-color: hsla(var(--c2), 1);
}

[class*="bc3"] {
    /* 100% of #363535 for background in dark mode*/
    /* 100% of #ffffff for background in ligh mode */
    background-color: hsla(var(--c3), 1);
}

[class*="bc4"] {
    /* 100% of primary color for background in dark mode*/
    /* 100% of primary for background in ligh mode */
    background-color: hsla(var(--c4), 1);
}

/* surfaces */
[class*="bc4_h"] {
    /* 8% of primary color for surface in hover state */
    background-color: hsla(var(--c4), 0.08);
    border-color: hsla(var(--c4), 0.2);
}

[class*="bc4_s"] {
    /* 16% of primary color for surface in selected state */
    background-color: hsla(var(--c4), 0.16);
    border-color: hsla(var(--c4), 0.2);
}

[class*="bc4_s1"] {
    /* 8% of primary color for surface and 20% of primary color border in selected state */
    background-color: hsla(var(--c4), 0.08);
    border-color: hsla(var(--c4), 1);
    color: hsla(var(--c4), 1);
}

[class*="bc4_d"] {
    /* 30% of base color #ffffff for light theme */
    /* 30% of base color #363535 for light theme */
    background-color: hsla(var(--c1), 0.3);
    color: hsla(var(--c2), 0.3);
    border-color: hsla(var(--c2), 0.2);
}


/*10% alpha*/
[class*="bc1_a"] {
    /* 5% opacity of background color #20201E for dark theme */
    /* 5% opacity of background color #ffffff for light theme */
    background-color: hsla(var(--c1), 0.05);
}

[class*="bc2_a"] {
    /* 5% opacity of font color #ffffff for dark theme */
    /* 5% opacity of font color #20201E for light theme */
    background-color: hsla(var(--c2), 0.05);
}

[class*="bc3_a"] {
    /* 5% opacity of background color #--c1g for dark theme */
    /* 5% opacity of background color #363535 for light theme */
    background-color: hsla(var(--c3), 0.05);
}

[class*="bc4_a"] {
    /* 5% opacity of primary color  for dark theme */
    /* 5% opacity of primary color for light theme */
    background-color: hsla(var(--c4), 0.05);
}

/* global */
[class*="bc1g"] {
    background-color: hsla(var(--c1g), 1);
}

[class*="bc2g"] {
    background-color: hsla(var(--c2g), 1);
}

[class*="bc3g"] {
    background-color: hsla(var(--c3g), 1);
}

[class*="bc4g"] {
    background-color: hsla(var(--c4g), 1);
}

[class*="bc5g"] {
    background-color: hsla(var(--c5g), 1);
}

[class*="bc6g"] {
    background-color: hsla(var(--c6g), 1);
}

[class*="bc7g"] {
    background-color: hsla(var(--c7g), 1);
}

/* font color */
/* local */
[class*="fc0"] {
    /* transparent font */
    color: transparent !important;
}

/* text highlighter */
[class*="th"] {
    color: #758D9F;
}

/* strong fonts */
[class*="fc1"] {
    /* 100% font color of background color #20201E in dark theme */
    /* 100% font color of background color #--c1g in light theme */
    color: hsla(var(--c1), 1);
}

[class*="fc2"] {
    /* 100% font color of font color #--c1g in dark theme */
    /* 100% font color of font color #20201E in light theme */
    color: hsla(var(--c2), 1);
}

[class*="fc3"] {
    /* 100% font color of font color #ffffff in dark theme */
    /* 100% font color of font color #363535 in light theme */
    color: hsla(var(--c3), 1);
}

[class*="fc4"] {
    /* 100% fonr color of primay color */
    color: hsla(var(--c4), 1);
}

/* medium fonts */
/* 70% opacity for font color */
[class*="fc1_b"] {
    /* 70% font color of background color #20201E in dark theme */
    /* 70% font color of background color #--c1g in light theme */
    color: hsla(var(--c1), 0.7);
}

[class*="fc2_b"] {
    /* 70% font color of font color #--c1g in dark theme */
    /* 70% font color of font color #20201E in light theme */
    color: hsla(var(--c2), 0.7);
}

[class*="fc3_b"] {
    /* 70% font color of font color #ffffff in dark theme */
    /* 70% font color of font color #363535 in light theme */
    color: hsla(var(--c3), 0.7);
}

[class*="fc4_b"] {
    /* 70% font color of primay color */
    color: hsla(var(--c4), 0.7);
}

/* diabled fonts */
/* 30% opacity for font color*/
[class*="fc1_c"] {
    /* 30% font color of background color #20201E in dark theme */
    /* 30% font color of background color #--c1g in light theme */
    color: hsla(var(--c1), 0.3);
}

[class*="fc2_c"] {
    /* 30% font color of font color #--c1g in dark theme */
    /* 30% font color of font color #20201E in light theme */
    color: hsla(var(--c2), 0.3);
}

[class*="fc3_c"] {
    /* 30% font color of font color #ffffff in dark theme */
    /* 30% font color of font color #363535 in light theme */
    color: hsla(var(--c3), 0.3);
}

[class*="fc4_c"] {
    /* 30% font color of primay color */
    color: hsla(var(--c4), 0.3);
}

[class*="fc1_a"] {
    color: hsla(var(--c1), 0.1);
}

[class*="fc2_a"] {
    color: hsla(var(--c2), 0.1);
}

[class*="fc3_a"] {
    color: hsla(var(--c3), 0.1);
}

[class*="fc4_a"] {
    color: hsla(var(--c4), 0.1);
}

/* global */
[class*="fc1g"] {
    color: hsla(var(--c1g), 1);
}

[class*="fc2g"] {
    color: hsla(var(--c2g), 1);
}

[class*="fc3g"] {
    color: hsla(var(--c3g), 1);
}

[class*="fc4g"] {
    color: hsla(var(--c4g), 1);
}

[class*="fc5g"] {
    color: hsla(var(--c5g), 1);
}

[class*="fc6g"] {
    color: hsla(var(--c6g), 1);
}

[class*="fc7g"] {
    color: hsla(var(--c7g), 1);
}

/* outline, stroke, border color */
/* local */
[class*="oc0"] {
    /* no outline or transparent */
    border-color: transparent;
    -webkit-text-stroke-color: transparent;
    outline-color: transparent;
}

[class*="oc1"] {
    /* 100% border color of background color #--c1g for dark theme */
    /* 100% border color of background color #20201E for light theme */
    border-color: hsla(var(--c1), 0.2);
    -webkit-text-stroke-color: hsla(var(--c1), 1);
    outline-color: hsla(var(--c1), 1);
}


[class*="oc2"] {
    /* 100% border color of font color #fffff for dark theme */
    /* 100% border color of font color #20201E for light theme */
    border-color: hsla(var(--c2), 0.2);
    -webkit-text-stroke-color: hsla(var(--c2), 1);
    outline-color: hsla(var(--c2), 1);
}

[class*="oc3"] {
    /* 100% border color of surface color #--c1g for dark theme */
    /* 100% border color of surface color #363535 for light theme */
    border-color: hsla(var(--c3), 0.2);
    -webkit-text-stroke-color: hsla(var(--c3), 1);
    outline-color: hsla(var(--c3), 1);
}

[class*="oc4"] {
    /* 100% border color of primary color */
    border-color: hsla(var(--c4), 1);
    -webkit-text-stroke-color: hsla(var(--c4), 1);
    outline-color: hsla(var(--c4), 1);
}



/* global */
[class*="oc1g"] {
    border-color: hsla(var(--c1g), 1);
    -webkit-text-stroke-color: hsla(var(--c1g), 1);
    outline-color: hsla(var(--c1g), 1);
}

[class*="oc2g"] {
    border-color: hsla(var(--c2g), 1);
    -webkit-text-stroke-color: hsla(var(--c2g), 1);
    outline-color: hsla(var(--c2g), 1);
}

[class*="oc3g"] {
    border-color: hsla(var(--c3g), 1);
    -webkit-text-stroke-color: hsla(var(--c3g), 1);
    outline-color: hsla(var(--c3g), 1);
}

[class*="oc4g"] {
    border-color: hsla(var(--c4g), 1);
    -webkit-text-stroke-color: hsla(var(--c4g), 1);
    outline-color: hsla(var(--c4g), 1);
}

[class*="oc5g"] {
    border-color: hsla(var(--c5g), 1);
    -webkit-text-stroke-color: hsla(var(--c5g), 1);
    outline-color: hsla(var(--c5g), 1);
}

[class*="oc6g"] {
    border-color: hsla(var(--c6g), 1);
    -webkit-text-stroke-color: hsla(var(--c6g), 1);
    outline-color: hsla(var(--c6g), 1);
}

[class*="oc7g"] {
    border-color: hsla(var(--c7g), 1);
    -webkit-text-stroke-color: hsla(var(--c7g), 1);
    outline-color: hsla(var(--c7g), 1);
}

/* danger primary button*/
[class*="bc8"] {
    /* 100% danger background and 100% of font color #fffff in dark mode */
    /* 100% danger background and 100% of font color #20201E in light mode */
    background-color: hsla(var(--c11g), 1);
    color: hsla(var(--c1), 1);
}

[class*="bc8_h"] {
    /* 10% danger overlay and 100% of font color #fffff in dark mode */
    /* 10% danger overlay and 100% of font color #20201E in light mode */
    background-color: hsla(var(--c11g), 1.1);
    color: hsla(var(--c1), 1);
}

[class*="bc8_d"] {
    /* 30% primary background and 100% of font color #fffff in dark mode */
    /* 30% primary background and 100% of font color #20201E in light mode */
    background-color: hsla(var(--c11g), 0.3);
    color: hsla(var(--c1), 1);
    border-color: hsla(var(--c1), 0.2);
}

/* danger secondary and tertiary button */
[class*="bc8_1"] {
    /* 100% primary font color  and 100% of border color primary colorin dark mode */
    /* 100% primary background and 100% of font color primary color  in light mode */
    color: hsla(var(--c11g), 1);
    border-color: hsla(var(--c11g), 1);
}

/* tertiary button */
[class*="bc8_t"] {
    /* 100% primary font color  */
    color: hsla(var(--c11g), 1);
    background-color: hsla(var(--c3), 1);
}

[class*="bc8_th"] {
    /*  8% of background color danger color in dark mode */
    /*  8% of background color danger color  in light mode */
    background-color: hsla(var(--c11g), 0.08);
}

[class*="bc8_td"] {
    /*  8% of background color danger color in dark mode */
    /*  8% of background color danger color  in light mode */
    background-color: hsla(var(--c3), 1);
    color: hsla(var(--c11g), 0.3);
}

[class*="bc8_h1"] {
    /* 100% danger font color  and 8% of background color danger color in dark mode */
    /* 100% danger font color  and 8% of background color danger color  in light mode */
    background-color: hsla(var(--c11g), 0.08);
    color: hsla(var(--c11g), 1);
    border-color: hsla(var(--c3), 1);
}

[class*="bc8_d1"] {
    /* 100% danger font color  and 8% of background color danger color in dark mode */
    /* 100% danger font color  and 8% of background color danger color  in light mode */
    background-color: hsla(var(--c1), 0.3);
    color: hsla(var(--c11g), 0.3);
    border-color: hsla(var(--c11g), 0.3);
}

/* warning primary button*/
[class*="bc6"] {
    background-color: hsla(var(--c13g), 1);
    color: hsla(var(--c1), 1);
}

[class*="bc6_h"] {
    background-color: hsla(var(--c13g), 1.1);
    color: hsla(var(--c1), 1);
}

[class*="bc6_d"] {
    background-color: hsla(var(--c13g), 0.3);
    color: hsla(var(--c1), 1);
}

/* tertiary button */
[class*="bc6_t"] {
    /* 100% primary font color  */
    color: hsla(var(--c13g), 1);
    background-color: hsla(var(--c3), 1);
}

[class*="bc6_th"] {
    /*  8% of background color danger color in dark mode */
    /*  8% of background color danger color  in light mode */
    background-color: hsla(var(--c13g), 0.08);
}

[class*="bc6_td"] {
    /*  8% of background color danger color in dark mode */
    /*  8% of background color danger color  in light mode */
    background-color: hsla(var(--c3), 1);
    color: hsla(var(--c13g), 0.3);
}

/* secondary button */
[class*="bc6_1"] {
    color: hsla(var(--c13g), 1);
    border-color: hsla(var(--c13g), 1);
}

[class*="bc6_h1"] {
    background-color: hsla(var(--c13g), 0.08);
    color: hsla(var(--c13g), 1);
    border-color: hsla(var(--c13g), 1);
}

[class*="bc6_d1"] {
    background-color: hsla(var(--c1), 0.3);
    color: hsla(var(--c13g), 0.3);
    border-color: hsla(var(--c13g), 0.3);
}


/* success primary button*/
[class*="bc7"] {
    background-color: hsla(var(--c12g), 1);
    color: hsla(var(--c1), 1);
}

[class*="bc7_h"] {
    background-color: hsla(var(--c12g), 1.1);
    color: hsla(var(--c1), 1);
    border-color: hsla(var(--c12g), 0.3);
}

[class*="bc7_d"] {
    background-color: hsla(var(--c12g), 0.3);
    color: hsla(var(--c1), 1);
}

/* tertiary button */
[class*="bc7_t"] {
    /* 100% primary font color  */
    color: hsla(var(--c12g), 1);
    background-color: hsla(var(--c3), 1);
}

[class*="bc7_th"] {
    /*  8% of background color danger color in dark mode */
    /*  8% of background color danger color  in light mode */
    background-color: hsla(var(--c12g), 0.08);
}

[class*="bc7_td"] {
    /*  8% of background color danger color in dark mode */
    /*  8% of background color danger color  in light mode */
    background-color: hsla(var(--c3), 1);
    color: hsla(var(--c12g), 0.3);
}

[class*="bc7_1"] {
    color: hsla(var(--c12g), 1);
    border-color: hsla(var(--c12g), 1);
}

[class*="bc7_h1"] {
    background-color: hsla(var(--c12g), 0.08);
    color: hsla(var(--c12g), 1);
}

[class*="bc7_d1"] {
    background-color: hsla(var(--c1), 0.3);
    color: hsla(var(--c12g), 0.3);
    border-color: hsla(var(--c12g), 0.3);
}

.select-family.membership-select {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    margin: 0px;
}

.customerimage {
    margin: 0;
    width: 48px;
    height: 48px;
    border: 1px solid hsla(var(--c2), 0.2) !important;
}

.customerimage-medium {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-size: cover;
    border: 1px solid hsla(var(--c2), 0.2) !important;
}

.customerimage-small {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-size: cover;
    /* border: 1px solid hsla(var(--c2),0.2) !important; */
}

.customerimage-m-cancel {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-size: cover;
}

.profile-left {
    padding: 56px 32px;
    flex-direction: column;
    gap: 24px;
    display: flex;
    margin-top: 32px;
}

.user-selection {
    flex-direction: column;
    gap: 4px;
}

.profile-navbar-name-text {
    padding: 0px;
    font-size: 20px !important;
}

.profile-top-nav-links.w-inline-block {
    padding: 12px 16px;
    border-radius: 6px;
    justify-content: flex-start;
    display: flex;
}

.profile-top-nav-links.w-inline-block:hover {
    background-color: hsla(var(--c4), 0.03);
}

.footer-linkbox-link.logoutx {
    margin: 0px;

}

.footer-linkbox-link.logoutx:hover {
    color: hsla(var(--c4), 1) !important;
}

.profile-top-nav-links:hover {
    color: hsla(var(--c4), 1) !important;
}

.profile-top-nav-links.active {
    color: hsla(var(--c4), 1);
    background-color: hsla(var(--c1), 1);
}

.customer-account-tab {
    margin: 0px;
    padding: 16px;
    border-bottom-width: 4px !important;
}

.wcontainer {
    padding: 0px;
}

.profile-nav {
    width: 370px;
}

.profile-details {
    width: 100%;
    margin: auto;
}

.top-most-link {
    margin: 0px;
}

.top-most-link:hover .top-most-text {
    color: hsla(var(--c4), 1) !important;
}

.customerprofile-div {
    padding: 12px 24px;
    text-align: start;
    max-width: 252px;
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

.customerprofile-date {
    display: flex;
}

.headingtext1.bottommargin {
    margin: 0px;

}

.remaining-credits {
    max-width: 90px;
    width: 100%;
}

.progress {
    margin: 0px;
}

.w-list-unstyled {
    padding: 0px;
    margin: 0px;
}

.contentbox-customerprofile.mbrshp-details.mbrshp-details-pad-mob.contentbox-customerprofile-extrapad {
    padding: 0px;
}

.select-family-toggle {
    border-radius: 4px;
    height: auto;
    padding: 8px 12px 8px 16px;
    border: hsla(var(--c2), 0.2) !important;
}

.select-family-text {
    width: 100%;
}

.customer-profile-left-aligned,
.customerprofile-timeline-content-list {
    padding: 20px 24px;
    margin: 0px;
    margin-bottom: 24px;
    border: 0.5px solid hsla(var(--c2), 0.1);
    border-radius: 4px;
    box-shadow: 0px 4px 8px 0px rgba(145, 158, 171, 0.08);
}

.customerprofile-timeline-content-list {
    margin-bottom: 0px;
    background-color: hsla(var(--c3), 1);
    box-shadow: 0px 4px 8px 0px rgba(145, 158, 171, 0.08);
}

.total-credits-div {
    width: 100%;
    max-width: 54px;
}

.profile-top-nav-links {
    gap: 12px;
    justify-content: center;
    align-items: center;
}

.customerprofile-time {
    display: flex;
}

.wcontainer.profile {

    max-width: 100%;
}

.w--tab-active {
    padding: 0px;
}

.tabs-menu {
    justify-content: flex-start;
}

.n-tabs-menu {
    margin-left: 20px;
}

.profile-top-nav-links.active {
    background-color: hsla(var(--c4), 0.1);
}

.customer-account-tab,
.customer-account-tab {
    text-decoration: none;
}

.label-warning,
.label-danger {
    padding: 2px 8px;
}

.booking-footer-select-box {
    padding-top: 20px;
}

.booking-for {
    font-size: 16px;
    font-family: 'Inter', sans-serif;
    color: hsla(var(--c2), 1) !important;
    margin-right: 16px;
}

.customer-account-tab.w--current {
    color: hsla(var(--c4), 1);
    line-height: 18px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-style: normal;
    line-height: 24px;
    font-weight: 500;
}

.details-button-mob.detailsbutton.detailsbutton-center.classpack_booking,
.details-button-mob.detailsbutton.detailsbutton-center.cancel_booking_red-button {
    width: 100%;
    max-width: max-content;
    padding: 8px 12px;
}

.family-details-column-1 {
    width: 40px;
    height: 40px;
}

.detailsbutton.detailsbutton-center.details-button-mob {
    border-radius: 4px;
}

.customer-account-tab {
    background: transparent;
}

.profile-name {
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

.select-family-wrapper {
    padding: 32px 0px;
    display: flex;
    justify-content: space-between;
}

p.booking-header-title {
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;


}

#w-dropdown-toggle-1 {
    width: 280px;
    margin-left: 0px;
    padding-left: 0px !important;
}

#trainer-dropdown {
    width: 280px;
    margin: 0 0;
    top: 0px !important;
    width: 240px;
    top: 0px !important;
    margin-right: 16px;
}

#w-dropdown-list-1 {
    width: 240px;
    overflow-x: hidden;
    min-width: 0px;
    margin-left: 25px;
    top: 13px;
    max-height: 256px;
}

#w-dropdown-toggle-1 {
    width: 240px;
}

#facility-attendee-list {

    overflow: hidden;
}

.body-text-1-regular,
.body-text-1-medium,
.body-text-1-semibold {
    font-family: 'Inter', sans-serif;
    /* font-size: 16px; */
    font-style: normal;
    line-height: 24px;
}

.body-text-1-regular {
    font-weight: 400;
}

.body-text-1-medium {
    font-weight: 500;
}

.body-text-1-semibold {
    font-weight: 600;
}

.body-text-2-regular,
.body-text-2-medium,
.body-text-2-semibold {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-style: normal;
    line-height: 20px;
}

.body-text-2-regular {
    font-weight: 400;
}

#submitFamilyAddForm {
    background-color: hsla(var(--c4), 1) !important;
    border-color: hsla(var(--c4), 1) !important;
    color: hsla(var(--c2), 1);
}

.body-text-2-medium {
    font-weight: 500;
}

.body-text-2-semibold {
    font-weight: 600;
}

.subtitle-1-bold,
.subtitle-1-semibold,
.subtitle-1-medium {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-style: normal;
    line-height: 24px;
}

.subtitle-1-bold {
    font-weight: 700;
}

.subtitle-1-semibold {
    font-weight: 600;
}

.subtitle-1-medium {
    font-weight: 500;
}

.subtitle-2-bold,
.subtitle-2-semibold,
.subtitle-2-medium {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-style: normal;
    line-height: 20px;
}

.subtitle-2-bold {
    font-weight: 700;
}

.subtitle-2-semibold {
    font-weight: 600;
}

.subtitle-2-medium {
    font-weight: 500;
}

.button-text-medium-regular {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0.1px;
}

.button-text-small {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-style: normal;
    line-height: 18px;
}

.n-label {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    display: flex;
    align-items: center;
    font-family: 'Inter', sans-serif;
    font-weight: 400 !important;
    width: fit-content !important;
    font-size: 12px !important;
}

.body-text-2-semibold-black {
    font-family: 'Inter', sans-serif !important;
    font-size: 14px;
    font-style: normal;
    /* font-weight: 600; */
    line-height: 20px;
}

.classpack_booking-new {
    height: 36px !important;
}

.ElementsApp,
.ElementsApp .InputElement {
    color: hsla(var(--c3), 1) !important;
}


.subtitle-1-strong {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

.overline-text-medium {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    line-height: 12px;
    text-transform: uppercase;
}

.h5-bold,
.h5-semibold,
.h5-medium,
.h5-regular {
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-style: normal;
    line-height: 28px;
}

.h5-semibold {
    font-weight: 600;
}

.h5-medium {
    font-weight: 500;
}

.h5-regular {
    font-weight: 400;
}

.h5-bold {
    font-weight: 700;
}

.h4-semibold {
    font-weight: 600;
}

.h4-medium {
    font-weight: 500;
}

.h4-regular {
    font-weight: 400;
}

.h4-regular,
.h4-medium,
.h4-bold,
.h4-semibold {
    font-family: 'Inter', sans-serif;
    font-size: 24px !important;
    font-style: normal;
    line-height: 32px;
}

.h3-semibold,
.h3-bold,
.h3-medium,
.h3-regular {
    font-family: 'Inter', sans-serif;
    font-size: 36px;
    font-style: normal;
    line-height: 32px;
}

.h3-bold {
    font-weight: 700;
}

.h3-semibold {
    font-weight: 600;
}

.h3-medium {
    font-weight: 500;
}

.h3-regular {
    font-weight: 400;
}

.h2-bold {
    font-weight: 700;
}

.h2-semibold {
    font-weight: 600;
}

.h2-medium {
    font-weight: 500;
}

.h2-regular {
    font-weight: 400;
}

.h2-regular,
.h2-medium,
.h2-semibold,
.h2-bold {
    font-family: 'Inter', sans-serif;
    font-size: 48px;
    font-style: normal;
    line-height: 32px;
}


.captions-regular {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
}


.captions-medium {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px;
}

.f-action-box,
.r-action-box {
    height: 32px;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.f-action-box:hover {
    background: hsla(var(--c4), 0.2) !important;
}

.r-action-box:hover {
    background: hsla(0, 100%, 50%, 0.2) !important;
}

.font-medium {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 30px;
}

.checkout-footer-price-label {
    /* width: 100%; */
    font-size: 16px;
    /* max-width: 61px; */
}

.currency-price {
    width: 100%;
    /* max-width: 82px; */
    align-items: baseline;
}

#date-day,
#time,
#spot {
    width: 100%;
    padding: 0px !important;
}

#date-day {
    max-width: 240px;
    height: auto;
}

#time {
    max-width: 255px;
}

#spot {
    max-width: 240px;
}


.select-main-dropdown-row {
    margin-right: 0px;
}

#booking-content-box-class {
    /* padding-top: 70px; */
}

#select-dropdown-icon {
    display: none;
}

#attendee-list-membership {
    height: auto;
}

#footer-button {
    display: flex;
    justify-content: flex-end;
}

#submitFinalReviewFormBtn {
    width: 168px;
    display: flex;
    flex-grow: 0;

}

.panel-group {
    overflow: auto;
    height: 50vh;
}

#discountAndCouponsHeading {
    padding-bottom: 16px;
    border-bottom: 0.5px solid hsla(var(--c2), 0.2);
}

#billing-title {
    padding-bottom: 16px;
    border-bottom: 0.5px solid hsla(var(--c2), 0.2);
}

#serviceSlotList {
    /* border-bottom: 1px solid hsla(var(--c2), 0.2) */
}



#payer-name {
    border-bottom: none;
    border-radius: 8px;
    border-bottom-left-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}


.class-header {
    display: flex;
    justify-content: center;
}

.add-profile {
    width: 49%;
    display: inline-block;
}

#class-booking-content {
    display: flex;
    padding: 16px 20px;
    justify-content: flex-start;
    align-items: center;
}

.confirmation-header.alt-changes {
    padding: 0px 24px;
    margin-bottom: 0px;
}

.classpack-balance-header.alt-text {
    color: hsla(var(--c3), 1);
}

.cs-modal-form-field.alt-changes {
    background-color: hsla(var(--c3), 1);
    max-width: 350px;
    height: 48px;
    border-radius: 4px;
    width: 100%;
    color: hsla(var(--c2), 1);
    border: 1px solid hsla(var(--c2), 0.2);
}

.cs-modal-form-field.alt-changes::placeholder {
    font-size: 13.5px;
}

.sold-out-text {
    background-color: hsla(var(--c1), 0.3);
    color: hsla(var(--c2), 0.3);
    border: 1px solid hsla(var(--c2), 0.3);
    font-weight: 400 !important;
}

.add-to-waitlist:hover {
    background-color: hsla(var(--c4), 0.3);
}

.form-row,
#payment-fpx {
    width: 100%;
    max-width: 593px;
}

#payment-fpx {
    background: hsla(var(--c3), 1);
    border-radius: 4px;
    display: flex;
    padding: 12px 15px;
    height: 48px;
    align-items: center;
}

.d-flex {
    display: flex !important;
}

.d-flex.justify-content-space-between {
    padding-top: 12px;
    width: inherit;
}

.align-items-center {
    align-items: center !important;
}

.justify-content-space-between {
    justify-content: space-between;
}

.booking-content-box.select-classes {
    border: 1px solid hsla(var(--c2), 0.2);
}

.label-warning {
    background: var(--warning-100, #FFF2D9);
    color: var(--warning-600, #BF8000);
}

.label-danger {
    background: var(--error-100, #FEE2E2);
    color: var(--error-600, #DC2626);
}

.profile-nav {
    background-color: hsla(var(--c3), 1);
}

.customerprofile-div2 {
    width: 100%
}

.margin-auto {
    margin: auto 0px;
}

.back-tick {
    background: hsla(var(--c4), 1);
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 30px
}

.info-box {
    display: flex;
    gap: 6.4px
}

.confirm-pending,
.payment-pending {
    border: 2px solid hsla(var(--c4), 1);
    background: hsla(var(--c3), 1);
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    font-size: 12px;
    color: hsla(var(--c4), 1)
}

.profile-details {
    margin-top: 64px;
    padding: 0px 172px 100px 184px;
}

.schedule-tabs {
    margin-top: 0px
}

.wcontainer.profile.padded-container-top.wcontainer-lesspad-mob {
    padding-top: 12px;
}

.bottomnav-global {
    display: none;
}

.sidenav-global {
    display: flex;
}

.border-bottom {
    border-bottom: 0.5px solid #ccc;
}


.select-family-toggle.w--open {
    background-color: hsla(var(--c3), 1);
}

.swal2-styled {
    padding: 14px 20px !important;
}

.swal2-styled.swal2-cancel {
    padding: 14px 20px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: 22px !important;
    color: hsla(var(--c4), 1) !important;
    background-color: hsla(var(--c3), 1) !important;
    border: 1px solid hsla(var(--c4), 1) !important;
}

.swal2-title {
    font-family: 'Inter', sans-serif !important;
    font-size: 20px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 28px !important;
    border-bottom: 1px solid hsla(var(--c2), 0.2);
}

.swal2-actions {
    flex-direction: row-reverse;
}

.form-label1 {
    color: hsla(var(--c2), 1);
}

.user-selection.bottom {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.delete_member:not(:root) {
    overflow: hidden;
    width: 100px;
    padding-top: 120px;
}

.addeventatc {
    align-items: flex-start !important;
    color: hsla(var(--c2), 1) !important;
    background: hsla(var(--c3), 1) !important;
}

input:-internal-autofill-selected {
    background-color: hsla(var(--c4), 0.03) !important;
}

.swal2-styled.swal2-cancel:hover {
    background-color: hsla(var(--c4), 0.1) !important;
}

.profile-main-section {
    height: 100vh;
    overflow: hidden;
}

.appointment-h-n-box {
    display: flex;
    justify-content: flex-end;
    flex-direction: row-reverse;
    flex-wrap: wrap;
}

.appointment-h-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px;
    height: 36px;
    font-size: 20px;
    font-family: 'Inter', sans-serif !important;

}

#appointment-staff {
    width: 280px;
}

.appointment-h-staff-box {
    width: calc(100% - 24px);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
}
.trainer-box {
    display: none;
    align-items: center;
    justify-content: center;
}
.trainer-wording {
    margin-left: 24px;
    width: max-content;
}

.attendee-list-item-new {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 8px 0px 0px;
    border-bottom: 1px solid hsla(var(--c2), 0.2);
    padding: 8px 20px !important;
}

.w-form-label {
    font-size: 14px;
    font-family: 'Inter', sans-serif !important;
}

.custom-arrow {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: hsla(var(--c4), 0.2);
}

.custom-arrow a {
    text-decoration: none !important;
    font-size: 20px;
}

.custom-arrow a svg path {
    fill: hsla(var(--c4), 1);
}

.class-series-main-list-box {
    cursor: pointer;
    transition: .3s ease;
}

.class-series-main-list-box:hover {
    background: hsla(var(--c4), 0.1) !important;
}

.classschedule-content-box {
    transition: .3s ease;
}
/* Checkbox */

input[type=checkbox], input[type=radio] {
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    cursor: pointer;
    accent-color: hsla(var(--c4), 1);
}
.radio-box {
    display: flex;
    margin-top: 16px;
    padding: 0 24px;
}
.radio-wrapper {
    display: flex;
}
.md-radio {
    display: flex;
    margin-right: 12px;
    gap: 8px;
}
.md-radio label {
    font-family: 'Inter', sans-serif !important;
    font-size: 16px;
    margin: 0 !important;
    cursor: pointer;
    font-weight: 500 !important;
    color: hsla(var(--c2), 0.54);
}

.md-radio input[type="radio"]:checked+label {
    color: hsla(var(--c4), 1);
}

@media (max-width:1280px) {
    .profile-details {
        padding: 0px 60px 172px 60px;
    }

}

@media (max-width:990px) {
    .profile-details {
        padding: 0px 52px 186px 82px;
    }
    .event-attendee-selected-items {
        flex-direction: row-reverse !important;
        justify-content: flex-end !important;
    }
}

@media (max-width:880px) {
    .profile-details {
        padding: 0px 20px 196px 20px;
    }
}

@media (max-width: 767px) {
    .profile-details {
        /* margin-top: 61.6px !important; */
        /* padding: 0px; */
        padding-top: 56px !important;
    }

    .booking-back-button {
        margin-left: 8px !important;
    }

    .nav-container {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000000000;
    }

    .user-profile-box-mob {
        display: flex !important;
    }

    .top-most-link {
        padding: 0px !important;
    }

    .top-most-bar.top-most-bar-mob.top-most-z-index {
        height: 56px !important;
        position: fixed !important;
        top: 0;
        left: 0;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0 20px !important;
    }
    .appointment-h-n-box {
        flex-direction: column-reverse;
        align-items: flex-start;
        row-gap: 8px;
    }
    .trainer-box {
        flex-direction: column;
        align-items: flex-start;
    }
    .trainer-wording, #trainer-dropdown {
        margin-left: 0 !important;
    }
}
@media (max-width:740px){
    .profile-details{
        margin-top: 0px;
        padding: 0px;
        padding-bottom: 200px !important;
    }

    .sidenav-global {
        display: none;
    }

    .profile-main-section {
        position: relative;
    }

    .transaction-info {
        flex-direction: column;
        gap: 8px;
    }

}

@media (max-width: 600px) {
    .calendar-week-select-div {
        margin-left: 0 !important;
    }

    .flex-justified-left {
        gap: 16px !important;
    }

    .booking-header {
        /*margin-top: 8px;*/
    }

    .timezone-mob {
        padding: 0 20px;
    }
}

@media (max-width:479px) {
    .profile-details {
        margin-top: 0px;
        padding: 0px;
        padding-bottom: 200px !important;
    }

    .booking-for {
        padding-top: 0px;
    }

    .sidenav-global {
        display: none;
    }

    .profile-main-section {
        position: relative;
    }

    .transaction-info {
        flex-direction: column;
        gap: 8px;
    }

    .bottomnav-global {
        display: flex;
        position: fixed;
        bottom: -2px;
        width: 100%;
    }

    .customerimage.custimg {
        width: 24px !important;
        height: 24px !important;
    }

    .membership-select-mob,
    #w-dropdown-list-1,
    .s-dropdown-toggle {
        width: 240px !important;
    }

    .appointment-h-box {
        margin-top: -38px !important;
        padding: 0 20px;
        font-size: 16px;
    }

    .app-currency-font-size-mob-m {
        font-size: 14px !important;
    }

    .calender-input {
        max-width: unset !important;
        width: 100% !important;
    }

    .w-form-label {
        font-size: 14px;
    }

    .select-main-dropdown-title {
        font-size: 16px !important;
    }

    input {
        font-size: 16px !important
    }
    .trainer-box {
        width: 100% !important;
        row-gap: 8px;
    }

    .radio-box {
        padding: 8px 20px !important;
        flex-direction: column;
        row-gap: 8px;
    }
    .radio-wrapper {
        flex-wrap: wrap;
        row-gap: 8px;
    }
    .md-radio label, .booking-for {
        font-size: 14px;
    }

    .timezone-mob {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .attendee-list-item-new {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    .timezone-parent-wrapper.alt-flex {
        margin-right: 4px !important;
    }
    .select-main-dropdown-title {
        padding-top: 16px !important;
        padding-bottom: 16px !important;
    }
    .attendee-list-new {
        margin-top: 8px !important;
    }
    .calendar-slot-box.facility {
        justify-content: space-between;
    }
}

@media (max-width: 376px) {
    .h4-semibold {
        font-size: 20px;
    }

    .schedule-name,
    .h1-top-margin-2 {
        font-size: 18px !important;
    }
}

@media (max-width:360px) {
    .profile-details {
        margin-top: 0px;
        padding: 0px;
        padding-bottom: 200px;
    }

    .sidenav-global {
        display: none;
    }

    .profile-main-section {
        position: relative;
    }

    .transaction-info {
        flex-direction: column;
        gap: 8px;
    }

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

    .swal2-html-container {
        font-size: 16px !important;
    }

    .delete_member:not(:root) {
        width: 80px
    }

    .swal2-styled {
        padding: 8px 12px !important;
    }

    .swal2-styled.swal2-confirm {
        font-size: 12px !important;
    }

    .select-main-dropdown-row {
        font-size: 12px;
    }

    .select-main-dropdown {
        font-size: 16px;
    }

}


svg {
    border: none;
    cursor: pointer;
}

.pending {
    color: hsla(var(--c4), 1)
}

.pending-out {
    border: 2px solid hsla(var(--c2), 1);
    background: hsla(var(--c3), 1);
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    font-size: 12px;
    color: hsla(var(--c2), 1)
}

@media (max-width:360px) {
    .mob-360 {
        display: flex !important;
    }

    .web-size {
        display: none !important
    }

    .customer-account-tab {
        padding: 9px 16px !important;
        font-size: 14px !important;
    }
}

.customerprofile-timeline-content-list.customerprofile-x {
    padding: 24px;
}

.schedule-modal-details {
    display: flex;
    flex-direction: column;
    gap: 30px
}

.headingtext1.bottommargin.headingtext1-ipad {

    /* gap:8px; */
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

@media (max-width:768px) {
    .modal-dialog {
        width: 100%;
        max-width: 760px;
        margin: 10px auto;
    }

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

.cs-modal-form-field.alt-changes:hover,
.ms-options-wrap>button :hover {
    border: 1px solid hsla(var(--c4), 1);
}

.w-input:focus {
    border: 1px solid hsla(var(--c4), 1)
}

.w-checkbox-input.custom-field-input,
.w-checkbox-input {
    width: 18px;
    height: 18px;
}

#reccuranceStartsLabel:focus {
    border: 1px solid blue;
}

.swal2-input-label {
    display: flex;
    margin: 0px;
    height: 24px;
    padding: 0px 32px;
    justify-content: flex-start;
    align-items: center;
    align-self: stretch;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
}

.swal2-input {
    display: flex;
    padding: 14px 16px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    height: auto;
    align-self: stretch;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.confirmation-checkbox-field.w-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal-content {
    background-color: hsla(var(--c3), 1);
}

.booking-content-list-text.review-list-sub-item-text {
    display: contents;
}

.week-column {
    width: 141px;
}

.booking-back-button {
    position: relative;
}

.reccurence-preference-wrapper {
    height: 80vh;
}

.checkout-modal-bg {
    background-color: rgba(0, 0, 0, 0.3);
    ;
}

.checkout-footer-middle.is-reccurence {
    height: 71vh;
}

.reccurence-review-wrapper {
    background: hsla(var(--c3), 1);
    border: 1px solid hsla(var(--c2), 0.2)
}

.reccurence-review-top {
    background: hsla(var(--c4), 0.03);
}

.reccurence-review-slot {
    color: hsla(var(--c2), 1);
}

.reccurence-review-slot.disabled {
    background: hsla(var(--c2), 0.1);
    color: hsla(var(--c2), 0.3);
}

.reccurence-slot-remove-btn {
    border: 1px solid hsla(var(--c11g), 1);
    color: hsla(var(--c11g), 1);
}

.reccurence-slot-remove-btn:hover {
    background: hsla(var(--c11g), 0.3);
    border: 1px solid hsla(var(--c11g), 1);
    color: hsla(var(--c11g), 1);
}

.reccurence-review-faclity-name-wrapper,
.reccurence-review-date-wrapper {
    color: hsla(var(--c2), 1);
}

.reccurence-date-end {
    border: 1px solid
}

#prevPage,
#nextPage {
    color: hsla(var(--c2), 1);
}

.close {
    opacity: 1;
}

.booking-footer-select-dropdown {
    border: 1px solid hsla(var(--c2), 0.2);
    border-radius: 6px;
    text-decoration: none;
}

.checkout-modal {
    background: hsla(var(--c3), 1);
}

.checkout-modal-heading {
    color: hsla(var(--c2), 1);
}

.checkout-modal-text {
    color: hsla(var(--c2), 0.7);
}

.swal2-loader {
    border: none
}

.calendar-button.left-align,
.calendar-button.right-align {
    width: 100%;
}

.swal2-styled.swal2-confirm:focus {
    box-shadow: none !important;
}

.week-column-header-wrapper {
    align-items: center
}

.tabs-menu {
    height: auto;
}

.timezone-prefix {
    display: flex;
    align-items: center;
}

.timezone-parent-wrapper.alt-flex {
    padding: 4px 12px;
    gap: 8px;
    margin-right: 0px;
    border-radius: 12px;
    width: max-content;
    background: hsla(var(--c4), 0.2);
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.XS-shadow {
    box-shadow: 0px 4px 8px 0px rgba(145, 158, 171, 0.08);
}

.small-shadow {
    box-shadow: 0px 6px 12px 0px rgba(145, 158, 171, 0.11);
}

.medium-shadow {
    box-shadow: 0px 9px 18px 0px rgba(145, 158, 171, 0.15);
}

.large-shadow {
    box-shadow: 0px 13px 37px 0px rgba(145, 158, 171, 0.21);
}

.XL-shadow {
    box-shadow: 0px 20px 56px 0px rgba(145, 158, 171, 0.29);
}

.booking-back-button {
    display: flex;
    gap: 8px;
    align-items: center;
}

.contentboxwrapper-viewlink.right:hover,
.contentboxwrapper-viewlink.right:hover {
    background: transparent;
}

.profile-div-right-top.right-middle.pymnt-src-div {
    padding-bottom: 50px;
}

.headingtext {
    overflow-wrap: anywhere;
}

/* i.fa.fa-usd {
    padding: 0px !important;
} */

@media (max-width:1210px) {
    .m-hidden {
        display: none !important;
    }
}