.booking-form legend {
    font-size: 30px;
    line-height: 1.2;
    margin-bottom: 38px;
}

.booking-header {
    display: flex;
    justify-content: center;
    padding: 25px;
}

.booking-controls {
    padding-top: var(--xs);
}

.booking-form-progress ul {
    display: grid;
    grid-template-columns: max-content 48px max-content 48px max-content 48px max-content;
    place-content: center;
    list-style: none;
    padding-left: 0;
}

.booking-form-progress li {
    font-size: 13px;
    position: relative;
    text-align: center;
    font-weight: 500;
}

.booking-form-progress [aria-current="step"] ~ li {
    opacity: 0.5;
    text-shadow: unset;
}

.booking-form-progress li[aria-hidden] {
    padding-top: 10px;
}

.booking-form-progress li::before {
    content: '';
    display: block;
    padding: 5px;
    max-width: 30px;
    border: 10px solid var(--dark-blue);
    border-radius: 50px;
    margin: 0 auto 5px;
}

.booking-form-progress li[aria-hidden]::before {
    width: 100%;
    max-width: 100%;
    border: unset;
    margin: unset;
    background: var(--dark-blue);
}

.booking-form {
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    width: 100%;
    max-width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin: 0 auto;
}

.booking-form > fieldset {
    grid-column: 1;
    grid-row: 1;
    opacity: 0;
    position: relative;
    z-index: -1;
    transition: opacity 0.25s linear, z-index 0.25s linear 0.25s;
    pointer-events: none;
}

.booking-form legend {
    text-align: center;
}

.booking-form button {
    text-transform: uppercase;
}

.booking-form > .active {
    pointer-events: auto;
    opacity: 1;
    z-index: 1;
}

.booking-services {
    display: flex;
    justify-content: center;
    list-style: none;
    /* grid-gap: 10px; */
    width: 100%;
    padding-left: 0;
    margin-bottom: 0;
    margin-right: -15px;
    margin-left: -15px;
    will-change: transform, opacity;
}

.booking-services-controls {
    margin-top: 32px;
}

.booking-services .booking-card {
    border: 1px solid var(--dark-blue);
    background-color: #fff;
    text-align: center;
    color: var(--dark-blue);
    text-transform: initial;
    margin: 0 auto;
    padding-top: 45px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    align-items: center;
    height: 100%;
    width: 100%;
    flex: 1;
    transform: scale(1);
    border-radius: 10px;
    transition: all 0.25s ease-out;
    transition-property: background-color, color, transform, opacity;
}

.booking-card + .booking-card {
    display: none;
    overflow: hidden;
}

.booking-card.checked {
    display: none;
}

.booking-card.checked + .booking-card {
    display: block;
    position: absolute;
}

.booking-services[data-state="BookingService1"] > li:not(#BookingService1),
.booking-services[data-state="BookingService2"] > li:not(#BookingService2),
.booking-services[data-state="BookingService3"] > li:not(#BookingService3),
.booking-services[data-state="BookingService4"] > li:not(#BookingService4),
.booking-services[data-state="BookingService5"] > li:not(#BookingService5) {
    opacity: 0;
    z-index: -1;
    
}

.booking-services[data-state="BookingService1"] > #BookingService1,
.booking-services[data-state="BookingService2"] > #BookingService2,
.booking-services[data-state="BookingService3"] > #BookingService3,
.booking-services[data-state="BookingService4"] > #BookingService4,
.booking-services[data-state="BookingService5"] > #BookingService5 {
    max-width: calc(100% / 2);
}

.booking-services:hover .booking-card {
    transform: scale(0.95);
    opacity: 0.75;
}

.booking-services:hover .booking-card.checked:hover,
.booking-services:hover .booking-card.checked,
.booking-services:hover .booking-card:hover {
    transform: scale(1.05);
    opacity: 1;
    background-color: var(--dark-blue);
    color: white;
}

.booking-services:hover .booking-card.checked,
.booking-services:hover .booking-card:hover:active {
    transform: scale(1);
}

.booking-unsure {
    text-align: center;
}    

.booking-unsure a {
    font-weight: 600;
}

.booking-card .card-icon {
    height: 100%;
    max-height: 65px;
    margin-bottom: 20px;
    color: #000046;
    transition: fill 0.25s ease-out;
}

.booking-card.checked .card-icon,
.booking-card:hover .card-icon {
    color: inherit;
}

.booking-card.checked {
    background-color: var(--dark-blue);
    color: #fff;
}

.booking-card .card-content {
    font-size: var(--heading-5);
    margin-bottom: 0.5rem;
    font-weight: 500;
    line-height: 1.2;
}

.booking-services > li {
    max-width: min(218px, calc(100% / 12 * 5));
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-right: 5px;
    padding-left: 5px;
    transition: max-width 0.25s ease-out;
}

@media (min-width: 992px) {
}

@media (min-width: 1200px) {
    .booking-form {
        max-width: 1140px;
    }
}

.booking-service-input {
    position: absolute;
}

.booking-controls {
    margin-right: -15px;
    margin-left: -15px;
    display: grid;
    grid-template-columns: repeat(2, min-content);
    justify-content: space-between;
}
.booking-controls > .btn {
    max-width: min-content;
}

.booking-service:not(.flipped) {
    opacity: 0;
}

.booking-information .form-col {
    padding-top: 20px;
}

.booking-information .error-message {
    color: var(--danger);
    font-size: 14px;
}

.password-requirements .error {
    color: var(--danger);
}

.information-card {
    padding: 24px 36px 42px;
    border: 2px solid var(--dark-blue-opacity-half);
}

.information-card .information-icon {
    text-align: center;
}

.information-card .information-subtitle {
    font-size: 21px;
    color: var(--dark-blue);
    text-align: center;
    font-weight: 500;
    margin-bottom: 34px;
}

.information-card .information-content {
    color: var(--light-blue);
    font-size: 15px;
}

.booking-information .btn {
    width: 100%;
    margin-top: 24px;
}

.btn-icon [data-icon] {
    margin-right: 0.9em;
    font-size: 11px;
}

.error-container {
    padding-left: 0;
    list-style: none;
    font-size: 13px;
}

.error-container > li + li {
    margin-top: 0.5em;
}

.password-container {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    align-content: center;
}

.password-container > button {
    color: var(--light-blue);
    border: unset;
    background-color: transparent;
    margin-right: 1px;
    padding: 0.55em;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    place-items: center;
}

.password-container [data-icon] {
    grid-column: 1 / 1;
    grid-row: 1 / 1;
    transform: scale(0.95);
    transition: transform 0.25s ease-out;
}

.btn-show-password:focus {
    outline: unset;
}

.btn-show-password:active:hover [data-icon] {
    transform: scale(0.9);
}

.btn-show-password:hover [data-icon],
.btn-show-password:focus [data-icon] {
    transform: scale(1.15);
}

.password-container[data-state="visible"] .fa-eye,
.password-container[data-state="hidden"] .fa-eye-slash {
    opacity: 0;
}

.password-requirements,
.password-notice {
    font-size: 11px;
    color: var(--black);
    font-style: italic;
}
.password-requirements {
    list-style-position: inside;
    padding-left: 0.5em;
}
.datepicker {
    border-radius: 5px;
    border: 2px solid var(--light-gray);
    padding: 12px;
}

.datepicker-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.datepicker-grid.years,
.datepicker-grid.months {
    grid-template-columns: repeat(4, 1fr);
}

/*
.datepicker-grid,
.datepicker-main,
.datepicker-picker {
    width: 100%;
}
*/

.datepicker-controls {
    align-items: center;
    justify-content: center;
    display: grid;
    grid-template-columns: min-content max-content min-content;
    max-width: min-content;
    margin: 0 auto;
}

.datepicker-picker span {
    border-radius: 20px;
}

.datepicker-controls .button {
    height: auto;
    width: auto;
    transition: background-color 0.25s ease-out;
}

.datepicker .view-switch {
    flex: 0 0 auto;
    color: var(--red);
    padding-right: 8px;
    padding-left: 8px;
    margin-right: 8px;
    margin-left: 8px;
}

.datepicker-header .datepicker-controls .button {
    font-weight: 500;
    font-size: 14px;
    line-height: 1;
    text-transform: initial;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.datepicker-header .datepicker-controls .button:first-of-type,
.datepicker-header .datepicker-controls .button:last-of-type {
    background-color: var(--light-gray);
}

.datepicker-header .datepicker-controls .button:first-of-type {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

.datepicker-header .datepicker-controls .button:last-of-type {
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    
}

.datepicker-header .datepicker-controls .button:first-of-type:hover,
.datepicker-header .datepicker-controls .button:last-of-type:hover {
    background-color: var(--dark-blue);
}

.datepicker-header .datepicker-controls .view-switch {
    font-size: 21px;
    line-height: 1.25;
}

.datepicker-cell {
    grid-column: var(--grid-col);
    font-size: 14px;
    transition: all 0.25s ease-out;
    transition-property: opacity, background-color, color;
}

.year-col-1,
.month-col-1,
.day-col-1 {
    --grid-col: 1;
}

.year-col-2,
.month-col-2,
.day-col-2 {
    --grid-col: 2;
}

.year-col-3
.month-col-3,
.day-col-3 {
    --grid-col: 3;
}

.year-col-4
.month-col-4,
.day-col-4 {
    --grid-col: 4;
}

.day-col-5 {
    --grid-col: 5;
}

.day-col-6 {
    --grid-col: 6;
}

.day-col-7 {
    --grid-col: 7;
}

.datepicker-cell.today:not(.selected):not(.disabled) {
    background-color: transparent;
    border: 1px solid var(--light-gray);
    color: var(--light-gray);
}

.datepicker-cell.selected:hover,
.datepicker-cell.selected {
    color: var(--black);
    background-color: var(--yellow);
    font-weight: 500;
}
.datepicker-cell.selected:hover {
    opacity: 0.75;
}

.datepicker-cell.day.next,
.datepicker-cell.day.prev {
    opacity: 0;
    pointer-events: none;
    display: none;
}

.schedule-grid {
    display: grid;
    grid-template-columns: minmax(290px, min-content) 1fr;
    grid-gap: 60px;
    justify-content: center;
    width: 100%;
    max-width: 550px;
    margin: 0 auto;
}

.schedule-grid .schedule-times-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(100px, 1fr));
    grid-auto-rows: auto;
    grid-gap: 15px 10px;
}

.schedule-times-grid .times-classes,
.schedule-times-grid .times-message,
.schedule-times-grid .times-title {
    grid-column: 1 / -1;
    margin: 0;
}

.schedule-times-grid .times-classes {
    /* Polyfill for sub-grid */
    display: grid;
    grid: inherit;
    grid-gap: inherit;
}

.schedule-times-grid .times-title ~ .times-title {
    margin-top: 15px;
}

.schedule-times-grid .times-message {
    font-size: 13px;
    color: var(--dark-blue);
}

.schedule-times-grid .times-button {
    padding-top: 10px;
    padding-bottom: 10px;
    color: var(--dark-blue);
    --bottom-adjustment: -1px;
}

.schedule-times-grid .times-button:hover {
    color: white;
    border-color: var(--dark-blue);
    background-color: var(--dark-blue);
}

.schedule-times-grid .times-button:focus {
    box-shadow: 0 0 0 0.2rem rgba(5,5,64, 0.25);
}