.bg-body-minimal-bg {
  background-color: #fff;

  .minimal-footer {
    display: none;
  }
}

.sd-appt-booking {
  --oab-button-border-radius: 0;
  --oab-button-border-width: 0 0 1px 0;
  --oab-dropdown-border-radius: 2px;
  --oab-text-link-margin: 0 auto;
  --oab-text-link-padding: 0;
  --oab-text-link-width: auto;

  max-width: 1280px;
  min-height: calc(100vh - 15rem);
  margin: 0 auto 6rem;
  font-family: var(--font-family-primary);
  font-weight: var(--font-weight-normal);
  font-size: var(--desktop-font-size-base);

  .react-tel-input {
    .form-control {
      padding: 18.5px 14px 18.5px 60px;
    }

    &:dir(rtl) {
      .form-control {
        padding: 18.5px 60px 18.5px 14px;
      }
    }
  }

  .elc-appt-booking_intro-container {
    margin-top: 3rem;
  }

  .elc-appt-booking_store-selection-container {
    .elc-appt-booking_intro-container {
      margin-top: 0;
    }
  }

  .elc-appt-booking_stepper {
    margin: 3rem auto;
    max-width: 368px;

    @media (min-width: 768px) {
      max-width: 400px;
    }

    @media (min-width: 1024px) {
      max-width: 500px;
    }

    .elc-progress-bar-label,
    .elc-progress-bar-label-is-active {
      text-transform: var(--font-text-transform-uppercase);
      font-size: 0.938rem;

      @media (min-width: 768px) {
        font-size: var(--desktop-font-size-lg);
      }
    }

    .elc-progress-bar-label {
      min-width: 100px;
      max-width: 100px;
      white-space: normal;
      font-weight: var(--font-weight-light);
      letter-spacing: 0;

      @media (min-width: 768px) {
        max-width: 160px;
      }

      @media (min-width: 1024px) {
        max-width: 180px;
      }
    }

    .elc-progress-bar-label-is-active {
      color: var(--primary-default);
    }
  }

  .elc-appt-booking_service-item-action-button {
    padding: 0 1.25rem 1.25rem;
  }

  .elc-heading--1,
  .elc-heading--2 {
    font-family: var(--font-family-primary);
  }

  .elc-dropdown-label,
  .elc-dropdown-readonly-input {
    text-transform: none;
    display: block;
    color: var(--desktop-dropdown-text-active-fill);
    letter-spacing: var(--desktop-dropdown-text-active-letter-spacing);
    text-decoration: var(--desktop-dropdown-text-active-text-decoration);
    text-transform: uppercase;
    font-size: var(--mobile-dropdown-text-active-font-size);
    line-height: var(--desktop-dropdown-text-active-line-height);
    font-weight: var(--desktop-dropdown-text-active-font-weight);
    font-family: var(--desktop-dropdown-text-active-font-family);
    flex: 1;
    text-wrap: nowrap;
    text-overflow: ellipsis;

    @media (min-width: 1024px) {
      font-size: var(--desktop-dropdown-text-active-font-size);
    }
  }

  .elc-dropdown-label {
    overflow: hidden;
  }

  .elc-dropdown-readonly-input {
    max-width: 0;
    padding: 12px 0;
  }

  .elc-dropdown .elc-dropdown-wrapper {
    border: 1px solid var(--outline-variant);
    background-color: var(--desktop-dropdown-list-item-default-fill);
    cursor: pointer;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    padding-left: 8px;
    position: relative;
    border-radius: var(--oab-dropdown-border-radius);

    &:dir(rtl) {
      padding-left: initial;
      padding-right: 8px;
    }
  }

  .elc-dropdown-options-list {
    border: 1px solid var(--outline-variant);
    padding: 0;
  }

  .elc-checkbox-label,
  .elc-checkbox-label a,
  .elc-dropdown-option,
  .elc-caption {
    font-family: var(--font-family-primary);
    font-size: var(--desktop-font-size-sm);
    line-height: 20px;
  }

  .elc-checkbox-label a {
    text-decoration: underline;
  }

  .elc-dropdown-arrow {
    border: none;
    min-width: 0;
  }

  .elc-appt-booking_panel-title {
    font-family: var(--font-family-primary);
    font-size: var(--desktop-font-size-xl);
    font-weight: var(--font-weight-light);
    letter-spacing: 0;
    line-height: 1.33;
    text-transform: var(--font-text-transform-uppercase);

    @media (min-width: 768px) {
      font-size: var(--desktop-font-size-lg);
    }
  }

  .elc-appt-booking_artist-item-body-title,
  .elc-appt-booking_artist-item-body-description p {
    font-family: var(--font-family-primary);
    letter-spacing: 0;

    strong {
      font-weight: var(--font-weight-bold);
    }
  }

  .elc-appt-booking_artist-item-body-title {
    font-size: var(--desktop-font-size-lg);
    line-height: 1.28;
  }

  .elc-appt-booking_artist-item-body-description p {
    font-size: 16px;
    line-height: 1.31;
  }

  .elc-appt-booking_next-button {
    padding-bottom: 0;
  }

  .elc-appt-booking_previous-step-link-wrapper {
    .elc-button.elc-button--text {
      width: var(--oab-text-link-width);
    }
  }

  .elc-button {
    text-transform: uppercase;

    &.elc-appt-booking_next-btn-active,
    &.elc-appt-booking_next-btn-disabled,
    &.elc-appt-booking_submit-button,
    &.elc-appt-booking_select-artist-button,
    &.elc-appt-booking_selected-artist-button,
    &.elc-appt-booking_calendar-time-selected,
    &.elc-appt-booking_progress-button,
    &.elc-appt-booking_continue-shopping {
      margin: 16px auto;
      font-family: var(--desktop-button-text-primary-default-font-family);
      font-weight: var(--desktop-button-text-primary-default-font-weight);
      font-size: var(--desktop-button-text-primary-default-font-size);
      letter-spacing: var(--desktop-button-text-primary-default-letter-spacing);
      border-radius: var(--oab-button-border-radius);
      min-height: 2.75rem;
      background-color: var(--desktop-button-container-primary-default-fill);
      color: var(--color-neutral-1-50);

      &:disabled {
        background-color: var(--color-neutral-1-300);
        border: none;
      }
    }

    &.elc-appt-booking_previous-link,
    &.elc-button--text {
      padding: var(--oab-text-link-padding);
      border-color: var(--primary-default);
      border-radius: var(--oab-button-border-radius);
      border-style: solid;
      border-width: var(--oab-button-border-width);
      background: none;
      box-shadow: none;
      color: var(--primary-default);
      text-decoration: none;
      text-transform: var(--desktop-font-link-1-normal-text-case);
      letter-spacing: var(--desktop-font-link-1-normal-letter-spacing);
      line-height: var(--desktop-font-link-1-normal-line-height);
      font-size: var(--desktop-font-link-1-normal-font-size);
      font-weight: var(--desktop-font-link-1-normal-font-weight);

      &:hover {
        border-color: var(--color-neutral-1-400);
      }
    }

    &.elc-appt-booking_next-btn-active,
    &.elc-appt-booking_next-btn-disabled,
    &.elc-appt-booking_submit-button {
      width: 13rem;
    }

    &.elc-appt-booking_service-item-add,
    &.elc-appt-booking_service-item-remove,
    &.elc-appt-booking_select-artist-button {
      min-height: 2.5rem;
      border-radius: var(--oab-button-border-radius);;
      padding: 0 1.25rem;
    }

    &.elc-appt-booking_service-item-add,
    &.elc-appt-booking_select-artist-button {
      font-family: var(--desktop-button-text-primary-default-inverse-font-family);
      font-weight: var(--desktop-button-text-primary-default-inverse-font-weight);
      font-size: var(--desktop-button-text-primary-default-inverse-font-size);
      letter-spacing: var(--desktop-button-text-primary-default-inverse-letter-spacing);
      background-color: unset;
      color: var(--primary-default);
      border: 1px solid var(--primary-default);
    }

    &.elc-appt-booking_selected-artist-button:disabled,
    &.elc-appt-booking_service-item-remove {
      font-family: var(--desktop-button-text-primary-default-font-family);
      font-weight: var(--desktop-button-text-primary-default-font-weight);
      font-size: var(--desktop-button-text-primary-default-font-size);
      letter-spacing: normal;
      background-color: var(--desktop-button-container-primary-default-fill);
      color: var(--color-neutral-1-50);
    }
  }

  .elc-oab-services-grid {
    max-width: 56.25rem;
    width: 100%;
    margin: auto;

    div:first-child {
      justify-content: center;
    }

    .elc-appt-booking_service-column {
      padding: 0 0.5rem;
    }
  }

  .elc-appt-booking_service-item {
    border: 1px solid var(--color-neutral-1-200);
    background-color: var(--color-neutral-white);
  }

  .elc-appt-booking_service-item-body {
    padding: 1.25rem;

    p,
    span {
      font-family: var(--desktop-font-body-2-normal-font-family);
      font-weight: var(--desktop-font-body-2-normal-font-weight);
      font-size: var(--desktop-font-body-2-normal-font-size);
      line-height: var(--desktop-font-body-2-normal-line-height);
      letter-spacing: var(--desktop-font-body-2-normal-letter-spacing);
      color: var(--primary-default);
    }

    .elc-appt-booking_service-item-body-badge {
      text-transform: var(--desktop-font-subtitle-1-text-case);
      font-family: var(--desktop-font-subtitle-1-font-family);
      font-weight: var(--desktop-font-subtitle-1-font-weight);
      font-size: var(--desktop-font-subtitle-1-font-size);
      line-height: var(--desktop-font-subtitle-1-line-height);
      letter-spacing: var(--desktop-font-subtitle-1-letter-spacing);
      color: var(--primary-default);
    }
  }

  p.elc-subtitle--2 {
    font-size: var(--desktop-font-size-lg);
    line-height: 1.28;
    letter-spacing: 0;
  }

  .elc-appt-booking_select-date-time-container {
    padding: 0;

    p.elc-body--1 {
      font-weight: var(--desktop-font-body-1-normal-font-weight);
    }

    td {
      border: none;

      &.elc-appt-booking_calendar-day-active:hover {
        background-color: var(--color-neutral-1-50);
      }

      &.elc-appt-booking_calendar-day-active {
        font-weight: var(--desktop-font-body-1-normal-font-weight);
      }

      &.elc-appt-booking_calendar-day-selected {
        color: var(--primary-default);
        background-color: var(--desktop-button-container-primary-default-fill);
      }

      &.elc-appt-booking_calendar-day-active:hover,
      &.elc-appt-booking_calendar-day-active,
      &.elc-appt-booking_calendar-day-selected {
        border-radius: var(--oab-button-border-radius);
      }
    }

    .elc-appt-booking_calendar-time-active,
    .elc-appt-booking_calendar-time-selected {
      font-family: var(--font-family-primary);
      color: var(--primary-default);
      font-size: var(--desktop-font-body-2-normal-font-size);
      font-weight: var(--desktop-font-body-2-normal-font-weight);
      border: 1px solid var(--primary-default);
      border-radius: var(--oab-button-border-radius);
      min-width: 118px;
      margin-bottom: 10px;
      white-space: nowrap;

      &:hover {
        border: 1px solid var(--primary-default);
        background-color: var(--primary-default);
        color: var(--color-neutral-1-50);
      }
    }

    .elc-appt-booking_calendar-time-selected {
      color: var(--color-neutral-1-50);
      background-color: var(--desktop-button-container-primary-default-fill);
    }

    .elc-appt-booking_calendar-next-active,
    .elc-appt-booking_calendar-previous-active,
    .elc-appt-booking_calendar-next-disabled,
    .elc-appt-booking_calendar-previous-disabled {
      border-radius: 0;
      border: none;
    }

    .elc-appt-booking_styled-weekday-heading-cell td {
      padding: 0.75rem 1.25rem;
    }

    .elc-appt-booking_calendar-container {
      border: 0.063rem solid var(--color-neutral-1-200);
      border-radius: 0.125rem;
      background-color: var(--color-neutral-white);
    }

    .elc-appt-booking_call-store-tout {
      letter-spacing: var(--desktop-font-body-2-normal-letter-spacing);
      line-height: var(--desktop-font-body-2-normal-line-height);
      font-size: var(--desktop-font-body-2-normal-font-size);
      font-weight: var(--desktop-font-body-2-normal-font-weight);
      font-family: var(--desktop-font-body-2-normal-font-family);

      a:link {
        border-bottom: 1px solid var(--primary-default);
      }

      a:hover {
        text-decoration: none;
        border-bottom: 1px solid var(--color-neutral-1-400);
      }
    }

    .elc-appt-booking_styled-heading-cell,
    .elc-appt-booking_styled-weekday-heading-cell {
      border: none;
    }

    .elc-appt-booking_styled-weekday-heading-cell {
      color: var(--primary-default);
    }

    .elc-appt-booking_time-list-title.elc-subtitle--1 {
      font-family: var(--font-family-primary);
      font-size: var(--desktop-font-size-xl);
      font-weight: var(--desktop-font-body-2-normal-font-weight);
      letter-spacing: var(--desktop-font-body-2-normal-letter-spacing);
      line-height: var(--desktop-font-body-2-normal-line-height);
      text-align: center;
      text-transform: none;

      @media (min-width: 768px) {
        font-size: var(--desktop-font-body-2-normal-font-size);
      }
    }
  }

  .elc-appt-booking_confirmation-container,
  .elc-appt-booking_appointment-review-container {
    margin: auto;
    border-radius: 0;
    max-width: 35.125rem;
    border: 1px solid var(--color-neutral-1-200);
    background-color: var(--color-neutral-white);

    .elc-appt-booking_next-button-wrapper {
      display: grid;
      justify-content: center;

      .elc-button.elc-button--text {
        margin: var(--oab-text-link-margin);
      }
    }

    .elc-appt-booking_panel-body .elc-subtitle--1 {
      font-family: var(--font-family-primary);
      font-weight: var(--font-weight-bold);
      text-transform: none;
    }

    .elc-appt-booking_details-box p {
      margin: 0;
      font-family: var(--font-family-primary);
      font-weight: var(--font-weight-normal);
      font-size: var(--desktop-font-body-1-normal-font-size);
      letter-spacing: var(--desktop-font-body-1-normal-letter-spacing);
      line-height: var(--desktop-font-body-1-normal-line-height);

      &:last-child {
        padding-top: 0.125rem;
      }
    }

    .elc-appt-booking_service-title,
    .elc-appt-booking_location-details-title,
    .elc-appt-booking_summary-time {
      font-weight: var(--font-weight-medium);
    }

    .elc-appt-booking_service-title,
    .elc-appt-booking_location-details-title {
      padding-bottom: 0.5rem;
    }

    .elc-appt-booking_booking-summary-location-address-one,
    .elc-appt-booking_booking-summary-location-address-two,
    .elc-appt-booking_booking-summary-location-phone {
      font-weight: var(--font-weight-light);
    }

    .elc-appt-booking_booking-summary-location-phone {
      text-decoration: none;

      a,
      &:hover {
        border: none;
      }
    }

    .elc-location-getdirections-link {
      text-decoration: underline;
    }

    .elc-appt-booking_checkbox-container {
      margin: var(--desktop-checkbox-container-spacing) 0;
    }

    .elc-checkbox {
      display: flex;
      gap: 0.75rem;

      .elc-checkbox-label,
      .elc-checkbox-label a {
        font-family: var(--desktop-checkbox-text-default-font-family);
        font-size: var(--desktop-checkbox-text-default-font-size);
        line-height: var(--desktop-checkbox-text-default-line-height);
        letter-spacing: var(--desktop-checkbox-text-default-letter-spacing);
      }

      .elc-checkbox-label a {
        text-decoration: none;

        &:link {
          border-bottom: 1px solid var(--primary-default);
        }

        &:hover {
          text-decoration: none;
          border-bottom: 1px solid var(--color-neutral-1-400);
        }
      }
    }

    .elc-add-to-calendar {
      margin: 0.313rem 0 0;

      @media (min-width: 768px) {
        margin: 1.125rem;
      }
    }

    .elc-tooltip-visible-text {
      color: var(--primary-default);
      text-decoration: none;
      border-bottom: 1px solid var(--primary-default);

      &:hover {
        border-bottom: 1px solid var(--color-neutral-1-400);
      }
    }

    .elc-tooltip-hidden-text-wrapper {
      .elc-tooltip-close-button {
        background: none;
        min-width: fit-content;
      }

      a {
        text-decoration: underline;
      }
    }

    .elc-appt-booking_position-wrapper {
      &:dir(rtl) {
        left: 20px;
        right: auto;
      }
    }
  }

  .elc-appt-booking_account-container {
    .elc-appt-booking_account-title {
      font-size: 1.625rem;
      line-height: 1.2;
      font-weight: 300;
    }

    .elc-appt-booking_account-subtitle {
      font-size: 1rem;
      font-family: var(--font-family-primary);
    }

    .elc-button {
      font-family: var(--font-family-primary);

      &:hover {
        color: var(--color-button-sku);
      }
    }
  }

  div[class*='AppointmentTimeSummary__CalendarSection'] {
    width: 90%;
  }
}

.elc-appt-booking_responsive-modal.elc-responsive-modal {
  .elc-remove-icon {
    width: 20px;
    height: 20px;
  }

  .elc-appt-booking_modal-title.elc-heading--2 {
    font-family: var(--desktop-font-heading-xl-font-family);
    font-size: var(--desktop-font-heading-xl-font-size);
    font-weight: var(--desktop-font-heading-xl-font-weight);
    letter-spacing: var(--desktop-font-heading-xl-letter-spacing);
    line-height: var(--desktop-font-heading-xl-line-height);
    text-transform: var(--desktop-font-heading-xl-text-case);
    text-decoration: var(--desktop-font-heading-xl-text-decoration);

    strong {
      font-weight: 500;
    }
  }

  .elc-appt-booking_modal-content.elc-body--2 {
    letter-spacing: var(--desktop-font-body-1-normal-letter-spacing);
    line-height: var(--desktop-font-body-1-normal-line-height);
    font-size: var(--desktop-font-body-1-normal-font-size);
    font-weight: var(--desktop-font-body-1-normal-font-weight);
    font-family: var(--desktop-font-body-1-normal-font-family);

    strong {
      font-weight: 700;
    }
  }
}

.elc-tooltip-responsive-modal {
  p {
    font-family: sans-serif;
  }

  .elc-tooltip-hidden-text {
    &-wrapper {
      min-width: unset;
    }

    a {
      text-decoration: underline;
    }
  }
}