/* GENERATED FILE — do not edit. Built from src/custom.css by build.sh. */
/* =============================================================================
 * endota — Zenoti online booking custom stylesheet
 * -----------------------------------------------------------------------------
 * One stylesheet for both environments. Nothing in here is environment-specific;
 * anything that needs to differ belongs in 00-config.js, not here.
 *
 * Base is the PRODUCTION stylesheet, because that is the one that is live on
 * 107 spas. Staging's copy has two defects, measured in Chromium rather than
 * assumed — an earlier version of this comment asserted the wrong one:
 *
 *   An HTML <tr> legend block is pasted inside .time-date-select .date-display.
 *   This is HARMLESS. CSS error recovery consumes the stray tokens up to that
 *   rule's closing brace; the declarations before it are kept, and every rule
 *   after it still parses. Worth deleting, but it costs nothing.
 *
 *   The file ends with an unterminated @media wrapping a nested <style>. This
 *   one IS lossy: the @media swallows the lot, and
 *   button[aria-labelledby="zen-dialog-close_dialog_22"] { display: none } has
 *   never applied on staging. (It also pins a generated dialog id, so it would
 *   be fragile even if it loaded.)
 *
 * Staging also carried a handful of rules production does not have. The 2026
 * restyle among them IS now here, scoped — see PER-SPA STYLING below. The rest
 * are small and still out, because promoting them changes production's
 * appearance and that is a separate decision: two
 * .therapistdesc-pricetime-responsive widths, .join-waitlist-label, and a
 * duplicate .outlined_input+label. See _import/DIFF-INVENTORY.md.
 * ========================================================================== */

  label#ws2-payments-header-label:after {
    content: "card details";
    font-size: 14px !important;
  }

  label#ws2-payments-header-label {
    font-size: 0px;
  }

  .quickbook-card {
    box-shadow: none !important;
  }

  div#announcementBannerTitleId {
    padding-top: 10px;
    text-align: left !important;
    justify-content: left !important;
    padding-left: 0px;
  }

  .zen-booking-header .col-md-5 {
    padding-left: 0px;
    padding-top: 10px;
  }

.powered-by-zenoti {
 display:none!important;
}

  .location-select {
    height: 0px;
    border: 0px;
  }
  .alert.alert-warning.surcharge-alert {
    background-color: #fff !important;
    border: 0px;
    margin: 0px auto;
  }

  .alert.alert-warning.surcharge-alert span {
    font-size: 0px;
  }
  div#announcement_banner {
    flex: 0 0 97%;
    max-width: 97%;
    margin: 0px auto;
    margin-bottom: 10px !important;
    padding-bottom: 10px !important;
  }

  div#couponCode:after {
    content: "Promotional Code (not a gift card barcode)";
    font-weight: bold;
    font-size: 14px;
    color: #000;
  }

  div#couponCode {
    font-size: 0px;
  }

  div#guestNoteTextId::before {
    content: "Please let us know if you are pregnant or have any specific treatment requirements.";
    font-weight: bold;
    font-size: 14px;
    color: #000;
    font-family: "value-sans-bold-pro" !important;
    width: 100%;
    float: left;
  }

  div#guestNoteTextId::after {
    content: "If you are redeeming a gift card, please check the balance and expiry date in advance. Expired gift cards cannot be extended. Your gift card must be valid on the date of your treatment. Gift cards are not redeemable on public holidays and weekend surcharges apply. Please enter the 20‑digit number located below the barcode, beginning with 6.";
    font-size: 12px !important;
    color: #000;
  }

  div#guestNoteTextId {
    font-size: 0px !important;
    padding: 10px 0px;
  }

  .pseudo-link {
    text-transform: lowercase;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .h1,
  .h2,
  .h3,
  .h4,
  .h5,
  .h6 {
    text-transform: lowercase;
    font-family: "value-sans-bold-pro" !important;
  }

  b,
  strong {
    font-weight: bolder;
    font-family: "value-sans-bold-pro" !important;
  }

  /*announcementBanner*/
  .banner {
    background-color: #d4e7e4 !important;
  }

  div#announcementBannerTitleId {
    padding-top: 10px;
  }

  /*Side Banner*/

  @font-face {
    font-family: "value-sans-regular-pro";
    src: url("https://endotaau.ap.zenoti.com/temp_data/tempassetstore/91cabe0b-cbfd-4c06-85e5-539bf7aaeb84/customassetupload/c5b4083d-5a82-48f5-a902-6d1658893530.ttf");
  }

  @font-face {
    font-family: "value-sans-bold-pro";
    src: url("https://endotaau.ap.zenoti.com/temp_data/tempassetstore/91cabe0b-cbfd-4c06-85e5-539bf7aaeb84/customassetupload/2970ace9-4b69-4ba3-828f-23d152a934fe.ttf");
  }

  button.btn.btn-secondary.zen-custom-amount-btn.action-panel {
    color: #334639 !important;
    font-weight: bold;
    border: 0px solid red;
  }

  button.btn.btn-secondary.btn-lg.btn-block {
    background: #385645 !important;
    border-radius: 50px;
    text-transform: lowercase !important;
  }

  .btn {
    text-decoration: none;
    font-size: 14px !important;
    font-weight: bold;
    font-family: "value-sans-bold-pro", sans-serif;
    border-radius: 50px;
    text-transform: lowercase !important;
  }

  button.btn.btn-primary.membershipsmoreContent {
    border: 1px solid #597462;
    border-radius: 0.25rem !important;
  }

  /*html, body {
            background: #e8e7e2 !important;
            background-color: #e8e7e2 !important
        }
    */

  html,
  body,
  #left-container {
    font-size: small;
  }

  .h5,
  h5 {
    font-size: 1.25rem !important;
  }

  .quickbook-card {
    box-shadow: 0 1px 15px rgb(0 0 0 / 15%);
    margin-left: 2% !important;
  }

  /*div#header {
        width: 100%;
        background: #fdf7f0 !important;
        background-color: #fdf7f0 !important;
        margin-bottom: 2%;
    }*/
  .header-container {
    background-color: transparent !important;
  }

  .header-container .navbar {
    background-color: transparent !important;
  }

  .header-container nav .wrapper {
    background-color: transparent !important;
  }

  .header-container .container {
    width: 100% !important;
  }

  .header-container nav ul li a {
    color: #000 !important;
  }

  .header-tab {
    border: 0px solid red !important;
    background: #f2f2f2 !important;
  }

  .logo img.img-fluid {
    max-width: 250px !important;
  }

  li.nav-item i img {
    display: none !important;
    /*filter: brightness(0) invert(1);*/
  }

  .header-container nav ul li a b {
    font-size: 14px;
    text-transform: lowercase !important;
  }

  p.zen-address {
    padding: 0px;
    margin: 0px;
    font-size: 13px;
  }

  .zen-dialog--header {
    color: #fff !important;
    /* background-color: #03b5e4!important; */
    background-color: #597462 !important;
    font-size: 18px;
    font-weight: normal !important;
  }

  .zen-dialog--header b {
    font-weight: normal !important;
  }

  .leftright,
  .rightleft {
    background-color: #334639 !important;
  }

  .location-select {
    margin-top: 10px;
  }

  .location-select a:before {
    /* color: #03b5e4; */
    color: #597462;
  }

  .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected {
    /* color: #03b5e4!important; */
    color: #597462 !important;
    background-color: #dbd7d7 !important;
  }

  .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked {
    /* background-color: #03b5e4!important; */
    background-color: #597462 !important;
    color: #fff !important;
  }

  .ng-select .ng-arrow-wrapper .ng-arrow {
    border-color: #03b5e4 transparent transparent !important;
    border-style: solid;
    border-width: 10px 10px 2.5px !important;
  }

  .ng-select.ng-select-opened > .ng-select-container .ng-arrow {
    /* border-color: transparent transparent #03b5e4!important; */
    border-color: transparent transparent #597462 !important;
    border-width: 0 10px 10px !important;
  }

  .categories .category-tab.tabactive {
    color: #fff !important;
  }

  .zen-selection--list {
    border-top: 1px solid #e0e0e0;
  }

  .service-detail span {
    font-size: 14px;
    line-height: inherit;
  }

  .service-detail p {
    font-size: 14px;
    line-height: inherit;
  }

  /* The therapist note — see blocks/93-therapist-note.js. It is appended inside
     Zenoti's own label so it inherits that label's size and colour, which on
     staging is an <h5> shouting SELECT A THERAPIST in bold. The note is a sentence,
     not a heading, so it opts out of the shouting and the weight while keeping
     everything else it inherits. */
  .endota-therapist-note {
    text-transform: none;
    font-weight: normal;
  }

  span.therapist-name {
    background: #597462 !important;
    color: #fff !important;
    border: 1px solid #597462 !important;
    text-transform: lowercase !important;
  }

  .multiple-therapist-name {
    text-transform: lowercase !important;
  }

  .categories .category-tab.tabactive {
    justify-content: left !important;
    text-transform: lowercase !important;
    font-weight: bold;
  }

  .categories .category-tab {
    text-align: left;
    text-transform: lowercase !important;
    font-weight: bold;
  }

  div#scrollToCategories {
    float: left;
    width: 25%;
    padding-right: 2%;
  }

  div#scrollToCategories a {
    font-size: 16px;
    font-weight: bold !important;
    font-family: "value-sans-bold-pro", sans-serif;
  }

  #scrollToCategories .hard--left {
    padding-left: 15px !important;
  }

  #scrollToCategories .hard--right {
    padding-right: 15px !important;
  }

  #scrollToCategories .col-3 {
    max-width: 100%;
    flex: 0 0 100%;
  }

  #scrollToCategories .col-4 {
    max-width: 100%;
    flex: 0 0 100%;
  }

  #scrollToCategories .col-6 {
    max-width: 100%;
    flex: 0 0 100%;
  }

  .services-list {
    float: left;
    width: 75%;
    font-size: 15px;
  }

  .categories .category-tab.flex-align-justify--center {
    justify-content: left !important;
  }

  .service-detail span {
    font-size: 14px;
    line-height: inherit;
    /* color: #000 !important */
  }

  .service-detail p {
    font-size: 14px;
    line-height: inherit;
  }

  .categories .category-tab.tabactive {
    background-color: #000;
    color: #fff !important;
    border: 1px solid #fff;
  }

  .service-detail span {
    font-size: 14px;
    line-height: inherit;
  }

  .service-detail p {
    font-size: 14px;
    line-height: inherit;
  }

  button.fa-plus.addMoreService.no--border {
    padding: 10px !important;
    border-radius: 55px;
    text-transform: lowercase !important;
  }

  .therapist-name {
    padding: 10px 5px !important;
    border-radius: 50px !important;
    text-transform: lowercase !important;
  }

  .time-date-select .date-display {
    width: 100%;
    height: 40px !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: bold !important;
    background: #282828 !important;
  }

  .booking-details {
    background: transparent !important;
    background-color: transparent !important;
    border: 0px solid #ccd1d9;
    color: #000 !important;
  }

  .appointment-tab {
    border-right: 1px solid #e0e0e0;
    border-left: 1px solid #e0e0e0;
  }

  .nav-pills .nav-link {
    border-radius: 0rem;
    margin-bottom: 1%;
    text-align: left !important;
  }

  .zen-membership-signin {
    background-color: #f0f8ff !important;
    padding: 10px;
    border: 1px solid #e0e0e0;
    text-align: center;
    font-weight: bold;
  }

  .outlined_input,
  .outlined_input + label {
    font-size: 14px;
  }

  zenoti-webstore .webstore-main-container .action-panel button {
    color: #fff;
    border-radius: 50px;
    text-transform: lowercase !important;
    font-family: "value-sans-bold-pro", sans-serif;
  }

  button.btn.btn-secondary.form-control {
    border: 1px solid #e0e0e0 !important;
  }

  button.btn.btn-link.zen-dialog--close.close-btn-border {
    border: 0px solid red !important;
  }

  button#createANewAccButton {
    border: 1px solid rgb(128, 128, 128) !important;
  }

  .appointment-group button.btn {
    border: 1px solid #597462;
  }

  .flex--row-center.soft-one-half.push-double--top span.soft.pointer {
    color: #fff;
    padding: 0.75rem 1.5rem;
    font-size: 1.25rem;
    border-radius: 0.3rem;
  }

  .sales-invoice-container .invoice-details-row {
    padding: 0px !important;
  }

  .therapist-list img {
    border-radius: 70%;
    border: 1px solid #e0e0e0;
    padding: 2%;
    margin: 8% 4%;
  }

  .therapist-list.push-double--bottom {
    margin-top: 20px;
  }

  .modal-footer button {
    border: 1px solid #707070;
  }

  .zen-giftcard-padding {
    border-top: 1px solid #e0e0e0;
  }

  .background-gray {
    background-color: transparent !important;
  }

  .btn-group-vertical span {
    color: #fdf7f0 !important;
  }

  #ws-booking-summary-center-app-details {
    padding-left: 0px;
    text-transform: lowercase;
  }

  .zen-booking-header {
    text-transform: lowercase !important;
  }

  .viewAllButton {
    background-color: #385645 !important;
    color: #fff !important;
    padding: 10px;
    width: 60%;
    border-radius: 0 0 40px 40px;
    margin: auto;
  }

  .viewAllButton a {
    color: #fff !important;
    font-size: 16px;
    margin-left: 5%;
  }

  .zen-total-address {
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    white-space: normal !important;
    width: 100% !important;
  }

/* Nearby Availability Button UI Updates Begin */
#btn-slots-across-centers { 
    color: #385645!important; 
    background-color: rgb(255 255 255)!important;
    border-radius: 30px!important;
    font-size: 1.1rem!important;
    border: 1px solid #385645!important;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

#btn-slots-across-centers:hover {
  color: #ffffff !important;
  background-color: #385645 !important;
}
/* Nearby Availability Button UI Updates End */

  @media screen and (max-width: 768px) {
    .row.zen-service-cls {
      margin: 0px;
    }

    .zen-booking-header {
      padding: 15px 12px !important;
    }

    .hidden-md-up.push-double--bottom button {
      font-weight: bold;
      font-size: 16px !important;
      font-family: "value-sans-bold-pro" !important;
    }

    .header-container nav .label-toggle {
      margin-top: 2em;
    }

    /*.header-container nav .label-toggle {
            background: linear-gradient(to bottom, #fff 0%, #fff 20%, transparent 20%, transparent 40%, #fff 40%, #fff 60%, transparent 60%, transparent 80%, #fff 80%, #fff 100%) !important;
            cursor: pointer;
            display: block;
            float: right;
            height: 20px;
            margin-top: 2em;
            width: 20px;
        } */

    div#header {
      width: 100%;
      padding-bottom: 1.5%;
    }

    .header-container nav nav ul {
      background-color: transparent !important;
    }

    div#scrollToCategories {
      float: left;
      width: 100%;
      padding-right: 0%;
      padding-bottom: 2%;
    }

    .services-list {
      float: none;
      width: 100%;
    }

    #scrollToCategories .hard--left {
      padding-left: 15px !important;
    }

    #scrollToCategories .hard--right {
      padding-right: 15px !important;
    }

    #scrollToCategories .col-3 {
      max-width: 100%;
      flex: 0 0 100%;
    }

    #scrollToCategories .col-4 {
      max-width: 100%;
      flex: 0 0 100%;
    }

    #scrollToCategories .col-6 {
      max-width: 100%;
      flex: 0 0 100%;
    }
  }
#ws-otp-screen-login-with-password {

    color: #fff !important;

    background: #385645 !important;

}

#ws-otp-verification-code-login-with-password
{
    color: #fff !important;
}

/* Live in production's custom-CSS field and missed when this file was
   assembled, so deploying custom.css without it would SHRINK the empty slot
   area. Keeps a day with no times tall enough to hold a message — which is
   also what 98-closed-date-message.js writes into. */
.timeslot-list {
    min-height: 50px !important;
}

/* -----------------------------------------------------------------------------
 * CARRIED OVER FROM STAGING'S FIELD
 * -----------------------------------------------------------------------------
 * Three rules that only ever existed in staging's custom-CSS field. They are
 * NOT part of the 2026 restyle, so they are global rather than scoped — and
 * they are additive: no rule in production's stylesheet targets any of these
 * selectors, so adding them changes nothing at the 106 spas that have not
 * opted into the restyle.
 * -------------------------------------------------------------------------- */

/* The therapist's price/time columns, stacked rather than side by side. */
.therapistdesc-pricetime-responsive.col-md-6:nth-of-type(2),
.therapistdesc-pricetime-responsive.col-md-6:nth-of-type(3) {
    flex: 0 0 100%;
    max-width: 100%;
}

/* Reads as a link, and not as another piece of shouting bold. */
.join-waitlist-label {
    text-decoration: underline !important;
    font-weight: normal !important;
}

/* =============================================================================
 * PER-SPA STYLING
 * -----------------------------------------------------------------------------
 * Rules scoped by a class that 05-spa-style.js puts on <html> while the guest is
 * on a spa whose row names it:
 *
 *     '<centre guid>': { name: 'Head Office', spaStyle: ['quickbookings-style'] }
 *
 * Write them as `.<class> <selector>`. The class adds specificity for free, so
 * these usually beat the Zenoti rule they are overriding without !important.
 *
 * A class name is shared vocabulary — any number of spas, in either environment,
 * can name it and get this treatment. Nothing here mentions a spa.
 *
 * quickbookings-style: the 2026 webstore restyle. Developed in staging's custom
 * CSS field as one unscoped block (the "NORTON" comment markers) and moved here
 * SCOPED, so it ships to every spa and applies only to those whose row names it.
 *
 * Scoping is the whole mechanism. Of these selectors only three overlap a rule
 * endota already has live — .viewAllButton, .viewAllButton a and
 * .header-container nav ul li a — and the class settles all three on
 * SPECIFICITY rather than source order, so it does not matter whether the old
 * rules load before or after this file. That is what makes it safe to leave the
 * Zenoti admin CSS field exactly as it is during the rollout.
 *
 * `html` is the one selector that could not simply be prefixed: the class is ON
 * <html>, so that rule is written html.quickbookings-style, not a descendant.
 * ========================================================================== */



/* =============================================================================
 * POP-UP COMPONENTS
 * -----------------------------------------------------------------------------
 * Was an inline <style> inside the head-scripts blob, plus a near-identical
 * second copy injected at runtime by the top banner under .lam-* names.
 * Both are now this one rule set. Used by the offer-removed, Moorooduc and
  * treatment and spa pop-ups.
 * ========================================================================== */
        .popup-container a {
            color: inherit;
            text-decoration: underline;
        }

        .popup-container a:hover {
            color: inherit;
            text-decoration: underline;
        }

        .popup-container a:visited {
            color: inherit;
            text-decoration: underline;
        }

        .popup-container a:focus {
            color: inherit;
            outline: 2px solid #8b7355;
            outline-offset: 2px;
            text-decoration: underline;
        }

       /* Popup overlay */
        .popup-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
        }

        /* Popup container */
        .popup-container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #ffffff;
            padding: 13px;
            border-radius: 30px;
            box-shadow: 0 8px 32px rgba(107, 91, 115, 0.2);
            max-width: 480px;
            width: 90%;
            text-align: center;
            border: 1px solid #e8e2d4;
        }

        .popup-title {
            -webkit-text-size-adjust: 100%;
            -webkit-tap-highlight-color: rgba(0,0,0,0);
            -webkit-font-smoothing: antialiased;
            --fa-font-brands: normal 400 1em/1 "Font Awesome 6 Brands";
            --fa-font-duotone: normal 900 1em/1 "Font Awesome 6 Duotone";
            --fa-font-light: normal 300 1em/1 "Font Awesome 6 Pro";
            --fa-font-regular: normal 400 1em/1 "Font Awesome 6 Pro";
            --fa-font-solid: normal 900 1em/1 "Font Awesome 6 Pro";
            --fa-font-thin: normal 100 1em/1 "Font Awesome 6 Pro";
            cursor: pointer;
            color: inherit;
            text-transform: lowercase;
            font-size: 1.25rem !important;
            line-height: inherit;
            -webkit-box-sizing: border-box;
            font-weight: bolder;
            font-family: 'value-sans-bold-pro' !important;
            margin-bottom: 20px;
        }

        .popup-message {
            -webkit-text-size-adjust: 100%;
            -webkit-tap-highlight-color: rgba(0,0,0,0);
            -webkit-font-smoothing: antialiased;
            --fa-font-brands: normal 400 1em/1 "Font Awesome 6 Brands";
            --fa-font-duotone: normal 900 1em/1 "Font Awesome 6 Duotone";
            --fa-font-light: normal 300 1em/1 "Font Awesome 6 Pro";
            --fa-font-regular: normal 400 1em/1 "Font Awesome 6 Pro";
            --fa-font-solid: normal 900 1em/1 "Font Awesome 6 Pro";
            --fa-font-thin: normal 100 1em/1 "Font Awesome 6 Pro";
            font-weight: 400;
            font-family: 'value-sans-regular-pro', sans-serif;
            cursor: pointer;
            color: inherit;
            -webkit-box-sizing: border-box;
            font-size: 14px;
            line-height: 1.2;
            margin-bottom: 35px;
            white-space: pre-line;
        }

        .popup-buttons {
            display: flex;
            flex-direction: column;
            gap: 15px;
            justify-content: center;
            align-items: stretch;
            margin-top: 35px;
            width: 100%;
        }

        .continue-button {
            -webkit-text-size-adjust: 100%;
            -webkit-tap-highlight-color: rgba(155,149,149,.5);
            visibility: visible !important;
            -webkit-font-smoothing: antialiased;
            line-height: 1.5rem;
            text-overflow: ellipsis;
            text-align: center;
            margin: 0 0 5px 0;
            text-transform: none;
            border-radius: 50px !important;
            padding: 14px 24px !important;
            height: unset;
            background: #395542;
            border: 1px solid #395542;
            color: #fff;
            cursor: pointer;
            display: block;
            font-family: 'ValueSansPro-Bold', sans-serif;
            font-weight: 500;
            font-size: 1.3rem;
            box-sizing: border-box;
            vertical-align: middle;
            text-decoration: none;
            transition: all 0.3s ease;
            width: 100%;
        }

        .continue-button:hover {
            -webkit-text-size-adjust: 100%;
            -webkit-tap-highlight-color: rgba(155,149,149,.5);
            visibility: visible !important;
            -webkit-font-smoothing: antialiased;
            line-height: 1.5rem;
            text-overflow: ellipsis;
            text-align: center;
            margin: 0 0 5px 0;
            text-transform: none;
            background: transparent !important;
            border-radius: 50px !important;
            padding: 14px 24px !important;
            height: unset;
            display: inline-block;
            font-family: 'ValueSansPro-Bold', sans-serif;
            font-weight: 500;
            font-size: 1.3rem;
            box-sizing: border-box;
            vertical-align: middle;
            cursor: pointer;
            border: 1px solid #395542;
            color: #395542;
            background-color: #fff !important;
        }

        .continue-button:focus {
            outline: 2px solid #395542;
            outline-offset: 2px;
        }

        .continue-button:active {
            background: #1f2f25;
            border-color: #1f2f25;
            transform: translateY(1px);
        }

        .cancel-button {
            -webkit-tap-highlight-color: rgba(155,149,149,.5);
            tab-size: 4;
            -webkit-text-size-adjust: 100%;
            word-break: break-word;
            font-style: normal;
            font-weight: 500;
            word-wrap: break-word;
            line-height: 24px;
            background: transparent;
            border: 1px solid rgb(57, 85, 66);
            cursor: pointer;
            display: inline-block;
            padding: 11px 40px;
            vertical-align: middle;
            outline: none;
            max-height: 54px;
            color: rgb(57, 85, 66);
            text-align: center;
            font-family: 'ValueSansPro-Bold', sans-serif;
            text-transform: lowercase !important;
            font-size: 1.3rem;
            border-radius: 50px !important;
            box-sizing: border-box;
            transition: all 0.3s ease;
        }

        .cancel-button:hover {
            background-color: rgb(57, 85, 66);
            color: #ffffff;
            border-color: rgb(57, 85, 66);
        }

        .cancel-button:focus {
            outline: 2px solid rgb(57, 85, 66);
            outline-offset: 2px;
        }

        .cancel-button:active {
            background-color: #2c4335;
            color: #ffffff;
            transform: translateY(1px);
        }

/* =============================================================================
 * BOOKING PROGRESS BAR — blocks/55-booking-progress.js
 * -----------------------------------------------------------------------------
 * Here rather than injected from the block, for the reason 05-spa-style.js
 * gives: this stylesheet is already on the page and already works, while an
 * injected <style> element is the one thing that can go missing while the
 * markup looks perfect. That is what made the banner carousel invisible.
 *
 * The block cannot express any of this inline in any case — the connectors are
 * pseudo-elements, the three states are attribute selectors, and the phone
 * wording is a container query.
 *
 * If custom.css is not redeployed alongside the bundle, the bar renders as a
 * plain list. Ugly, visible, and self-announcing — which is the failure mode to
 * want. It does not vanish.
 * ========================================================================== */
#endota-progress {
  /* A container query, not a viewport one: the bar answers to the width of the
     region it is in, so it stays right if that region is ever narrower than the
     screen. */
  container-type: inline-size;
  display: block;
  padding: 18px 8px 16px;
  font-family: value-sans-bold-pro, sans-serif;

  /* The bar stays where the block puts it — directly after the banner, inside
     the banner's own row — and takes a full line there. A flex basis of 100% is
     what claims that line, and 55-booking-progress.js allows the row to wrap
     BEFORE the bar is inserted, so this never squeezes the banner instead, which
     is exactly what it did when the wrap was missing. 1 / -1 does the same job
     in a grid, and both are inert in a plain block container. */
  box-sizing: border-box;
  width: 100%;
  flex: 0 0 100%;
  grid-column: 1 / -1;

  /* Transparent at rest: the bar sits on the page's own ground, and matching it
     exactly is what "no background" gets you for free. It only needs a surface
     once it is STUCK, when the flow scrolls underneath — and that colour is read
     off the page at that moment by 55-booking-progress.js rather than written
     here, because a hard-coded one was white and visibly not endota's ground. */
  background: transparent;
}

/* Held to the top of the viewport. NOT position: sticky — that is bounded by the
   bar's parent, which is the banner's short row, so the bar would scroll away
   with it; and moving the bar to a taller parent is what put it at the bottom of
   the page twice. Fixed does not care what any ancestor is doing.
   55-booking-progress.js adds this class when the bar's place in the flow reaches
   the top, and holds the gap open with #endota-progress-sentinel. */
#endota-progress.endota-progress-stuck {
  position: fixed;
  top: 0;
  /* No left/right/width here. Fixed positioning is relative to the viewport, so
     left:0;right:0 would stretch the bar to the window — wider than it is at
     rest, which is exactly what it did. 55-booking-progress.js sets left and
     width from the sentinel, which is still in the flow at the bar's own place
     and is therefore the exact box to keep. */
  /* High enough to beat Zenoti's own furniture, low enough to lose to a modal.
     30 was the first value and it was too timid: the calendar is elevated and
     scrolled OVER the bar instead of under it. 999 sits directly beneath our
     pop-ups at 1000, so anything that should cover the bar — theirs or ours —
     still does, and everything that should pass under it now does.
     55-booking-progress.js can override it from config if Zenoti ever raises
     something above this. */
  z-index: 999;

  /* Only while stuck. At rest a rule under a transparent bar reads as a stray
     line across the page; with the flow moving underneath it is what separates
     the two. The background colour is set from the page by the block. */
  border-bottom: 1px solid #e4e8e3;
  box-shadow: 0 1px 6px rgba(88, 165, 92, 0.12);
}

/* Holds the bar's height open in the flow while the bar is fixed, so nothing
   below jumps up at the moment it detaches. Its own line in a wrapped row, for
   the same reason the bar needs one. */
#endota-progress-sentinel {
  flex: 0 0 100%;
  width: 100%;
  grid-column: 1 / -1;
}

#endota-progress ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}

#endota-progress .endota-progress-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding-inline: 4px;
}

/* The connector, drawn as two half-rules so each step owns its own track and
   the line is built out of the steps rather than laid behind them. */
#endota-progress .endota-progress-step::before,
#endota-progress .endota-progress-step::after {
  content: "";
  position: absolute;
  top: 10px;
  height: 1px;
  width: 50%;
  background: #e4e8e3;
}
#endota-progress .endota-progress-step::before { left: 0; }
#endota-progress .endota-progress-step::after  { right: 0; }
#endota-progress .endota-progress-step:first-child::before,
#endota-progress .endota-progress-step:last-child::after { display: none; }

/* The accent. #58A55C throughout the MARKS — travelled track, completed dots,
   the current step's ring. Label text does not use it: see the note there. */
#endota-progress .endota-progress-step[data-state="done"]::before,
#endota-progress .endota-progress-step[data-state="done"]::after,
#endota-progress .endota-progress-step[data-state="current"]::before {
  background: #58A55C;
}

#endota-progress .endota-progress-dot {
  position: relative;
  z-index: 1;
  width: 21px;
  height: 21px;
  border-radius: 50px;
  background: #e4e8e3;
  display: grid;
  place-items: center;
  transition: background 0.22s ease, box-shadow 0.22s ease;
}
#endota-progress .endota-progress-dot svg { width: 11px; height: 11px; }
#endota-progress .endota-progress-dot svg path {
  fill: none;
  /* White on #58A55C is 3.02:1, which clears the 3:1 wanted for a graphic — just.
     Worth knowing it is that close: the previous accent was 2.7:1 and did not
     clear it, so a lighter green here would put the tick back under. */
  stroke: #ffffff;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#endota-progress .endota-progress-step[data-state="done"] .endota-progress-dot {
  background: #58A55C;
}
#endota-progress .endota-progress-step[data-state="current"] .endota-progress-dot {
  background: #ffffff;
  box-shadow: inset 0 0 0 2px #58A55C, 0 0 0 4px rgba(88, 165, 92, 0.20);
}

#endota-progress .endota-progress-label {
  font-size: 12px;
  line-height: 1.3;
  text-align: center;
  text-transform: lowercase;
  letter-spacing: 0.01em;
  color: #8a968d;
  transition: color 0.22s ease;
}
#endota-progress .endota-progress-step[data-state="done"] .endota-progress-label {
  color: #5d6b63;
}
#endota-progress .endota-progress-step[data-state="current"] .endota-progress-label {
  /* NOT #58A55C. As text on the page's ground that is 2.62:1, where small text
     needs 4.5:1 — it would be the least readable thing on the bar, and it is the
     one word saying where the guest is. #3C713F is the same hue and saturation
     darkened to 5.03:1. The MARKS carry the colour; the text carries the
     meaning. */
  color: #3C713F;
  font-weight: 500;
}

/* Narrow: the labels SHORTEN, they do not disappear. The full wording wraps to
   four lines at 375px and takes the bar to 92px tall; the nouns hold one line
   down to 320px at 44px. All six steps stay readable, which is the whole point
   of a progress bar, and it costs less than half the height. */
#endota-progress .endota-progress-short { display: none; }

@container (max-width: 620px) {
  #endota-progress .endota-progress-full  { display: none; }
  #endota-progress .endota-progress-short { display: inline; }
  #endota-progress .endota-progress-label { font-size: 11px; }
  #endota-progress .endota-progress-step  { gap: 8px; padding-inline: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  #endota-progress .endota-progress-dot { transition: none; }
  #endota-progress .endota-progress-label { transition: none; }
}

/* =============================================================================
 * CLOSED DATES — blocks/98-closed-date-message.js
 * -----------------------------------------------------------------------------
 * Days Zenoti has disabled but that are still worth clicking: the guest wanted
 * that date, and the click is what puts their demand into GA.
 *
 * The block marks such cells with an ATTRIBUTE, never a class:
 * 96-treatment-availability.js compares a cell's whole class attribute against
 * what it intends to write, so adding a class to a cell it manages would start a
 * fight it always wins. An attribute it does not read cannot.
 * ========================================================================== */
/* POINTER EVENTS FIRST. A calendar switches pointer-events off on a day it has
   disabled, which suppresses the click before any listener can see it — so the
   cell carried the ring, the cursor and the handler, and still did nothing.
   Nothing else in this block matters without these three lines.
   
   !important because the rule being overridden is Zenoti's own disabled
   styling, and the descendant selector because the click lands on the date
   inside the cell, not on the cell itself. */
td.daycell.disabled[data-endota-closed-clickable],
td.daycell.disabled[data-endota-closed-clickable] * {
  pointer-events: auto !important;
}

td.daycell.disabled[data-endota-closed-clickable] {
  cursor: pointer;
}

/* The day has to LOOK askable. The first version lifted the opacity 15% and set
   a pointer cursor, which against a calendar of greyed-out days is invisible —
   the feature worked and could not be found, which for something whose whole
   purpose is inviting a click is the same as not working.
   
   A DASHED RING is the answer: unmistakably interactive, and unmistakably not
   the solid fill of an available day. It says "you may ask about this one"
   without promising a slot, which is exactly the state these days are in. */
td.daycell.disabled[data-endota-closed-clickable] .datevalue {
  opacity: 1;
  border: 1px dashed #9bb59e;
  border-radius: 50px;
  color: #5d6b63;
  transition: background 0.15s ease, border-color 0.15s ease;
}
td.daycell.disabled[data-endota-closed-clickable]:hover .datevalue,
td.daycell.disabled[data-endota-closed-clickable] span[aria-label]:focus-visible + .datevalue {
  border-color: #58A55C;
  background: rgba(88, 165, 92, 0.14);
}
td.daycell.disabled[data-endota-closed-clickable] span[aria-label]:focus-visible {
  outline: 2px solid #58A55C;
  outline-offset: 2px;
}

/* While the message is up, whatever slots were left over from the last date the
   guest looked at are hidden. Without this the message sits directly above
   another day's times, which reads as though those times were bookable. */
.timeslot-list[data-endota-closed-showing] > *:not(#endota-closed-note) {
  display: none !important;
}

#endota-closed-note {
  font-family: value-sans-bold-pro, sans-serif;
  padding: 18px 16px;
  border: 1px solid #e4e8e3;
  border-left: 3px solid #58A55C;
  border-radius: 6px;
  background: #ffffff;
}
#endota-closed-note .endota-closed-note-title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 500;
  color: #3C713F;          /* the readable shade — see the progress bar's note */
  text-transform: lowercase;
}
#endota-closed-note .endota-closed-note-body {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: #5d6b63;
}

/* =============================================================================
 * AUTH DIALOG — styled treatments, blocks/99-auth-modal-text.js
 * -----------------------------------------------------------------------------
 * A named treatment rather than a rule per element: the block puts
 * data-endota-auth-style="<name>" on whatever the config's edit points at, so
 * asking for the same look on production's OTP element is a config change and
 * not a CSS one.
 * ========================================================================== */
[data-endota-auth-style="button"] {
  /* endota's outlined pill, the values .cancel-button already uses. Outlined
     rather than solid on purpose: logging in is this dialog's primary action,
     and a second solid button would compete with it. */
  display: inline-block;
  background: transparent;
  border: 1px solid rgb(57, 85, 66);
  border-radius: 50px;
  color: rgb(57, 85, 66);
  font-family: 'ValueSansPro-Bold', value-sans-bold-pro, sans-serif;
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 24px;
  text-align: center;
  text-decoration: none;          /* it is a link underneath */
  text-transform: lowercase;
  padding: 11px 40px;
  max-height: 54px;
  vertical-align: middle;
  cursor: pointer;
  box-sizing: border-box;
  transition: background 0.3s ease, color 0.3s ease;
}

[data-endota-auth-style="button"]:hover,
[data-endota-auth-style="button"]:focus-visible {
  background: rgb(57, 85, 66);
  color: #ffffff;
  text-decoration: none;
}

[data-endota-auth-style="button"]:focus-visible {
  outline: 2px solid rgb(57, 85, 66);
  outline-offset: 2px;
}

/* On a phone the dialog is narrow, and 40px of side padding on a pill that is
   already the width of the copy pushes it past the edge. */
@media (max-width: 480px) {
  [data-endota-auth-style="button"] {
    display: block;
    width: 100%;
    padding: 11px 16px;
  }
}

.quickbookings-style #main-content-start { 
   background-color: #f2f0ec!important; 
} 
.quickbookings-style .row.soft { 
   background-color: #f2f0ec!important;
} 
.quickbookings-style .sidebar { 
   border-radius: 10px 10px 10px 10px; 
   margin-top:-20px;
} 
.quickbookings-style .push-double--bottom.col-md-8 .row:has(> div.col-md-12 #business-label-heading) {
  border: 1px solid #C9C8C8; 
  border-radius:10px; 
  padding-top:15px;
  padding-bottom:15px;
}
.quickbookings-style .col-12.bg-white.border--gray.push-double--bottom { 
  border-radius:10px; 
} 
.quickbookings-style .btn.btn-secondary.form-control {
  border-radius: 30px 0 0 30px !important;
}
.quickbookings-style #serviceSearch { 
  border-radius:0 30px 30px 0!important; 
} 
.quickbookings-style #serviceSearch:focus {
  border-color: #58a55c !important;
}
.quickbookings-style label.service-detail:focus-within,

.quickbookings-style label.zen-selection--detail:focus-within,

.quickbookings-style .addon-detail:focus-within {
  outline: 2px solid #58a55c !important;
  outline-offset: 2px;
}
.quickbookings-style input:checked ~ i.icon-chec.pull-right {
  background-color: #58a55c !important;
  border: 1px solid #58a55c !important;
}
.quickbookings-style label.service-detail {
  padding-bottom: 10px !important;
}
.quickbookings-style label.service-detail:hover i.icon-chec.pull-right {
  background-color: #58a55c !important;
  border: 1px solid #58a55c !important;
}
.quickbookings-style .selected-services-list .service-detail {
  background-color: #fcfffc !important;
  border: 2px solid rgba(73, 167, 79, 0.5) !important;
}
.quickbookings-style .addon-detail input:checked ~ i.icon-chec.pull--right {
  background-color: #58a55c !important;
  border: 1px solid #58a55c !important;
}
.quickbookings-style .addon-detail label:hover i.icon-chec.pull--right {
  background-color: #58a55c !important;
  border: 1px solid #58a55c !important;
}
.quickbookings-style .zen-selection--detail input:checked ~ i.icon-chec.pull-right {
  background-color: #58a55c !important;
  border: 1px solid #58a55c !important;
}
.quickbookings-style .zen-selection--detail:hover i.icon-chec.pull-right {
  background-color: #58a55c !important;
  border: 1px solid #58a55c !important;
}
.quickbookings-style label[for="selectedTherapist"] {
  background-color: #fcfffc !important;
  border: 2px solid rgba(73, 167, 79, 0.5) !important;
}
.quickbookings-style #add-another-service-button:hover {
  background-color: #ffffff !important;
  color: rgb(56, 86, 69) !important;
  border: 1px solid rgb(56, 86, 69) !important;
}
.quickbookings-style #add-another-service-button {
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
  border: 1px solid rgb(56, 86, 69) !important;
}
.quickbookings-style #ws_bookreservation {
  border: 1px solid transparent;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}
.quickbookings-style #ws_bookreservation:hover {
  background-color: #ffffff !important;
  color: rgb(56, 86, 69) !important;
  border-color: rgb(56, 86, 69) !important;
}
.quickbookings-style .timeslot-phase-container .timeslot-detail[aria-pressed="true"] {
  background-color: #00872E !important;
  border: 1px solid #00872E !important;
  color: rgb(255, 255, 255) !important;
}
html.quickbookings-style {
  background-color: #f2f0ec !important;
}
.quickbookings-style #header.header-container {
  background-color: white !important;
  border-bottom: 1px solid #C9C8C8!important;
}
.quickbookings-style .category-tab.tabactive {
  background-color: #00872E !important;
  border: 2px solid rgba(73, 167, 79, 0.5) !important;
  color: white!important;
}
.quickbookings-style .category-tab.tabactive.category-tab.tabactive span {
  color: white!important;
}
.quickbookings-style .search-bar-icon:hover {
  background-color: #fff !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.quickbookings-style .search-bar-icon:active {
  background-color: #fff !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.quickbookings-style .search-bar-icon {
  border: none !important;
  box-shadow: none !important;
}
.quickbookings-style .search-bar-icon:hover,

.quickbookings-style .search-bar-icon:focus,

.quickbookings-style .search-bar-icon:active {
  background-color: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.quickbookings-style label[for="therapist selection snippet"] {
  border-left: none !important;
  border-right: none !important;
  border-bottom: none !important;
}
.quickbookings-style .col-md-12:has(> h3.selected-services-label) {
  background-color: #ffffff !important;
  border: 1px solid #C9C8C8 !important;
  border-radius: 10px !important;
  padding-top: 15px !important;
  padding-bottom: 15px !important;
}
.quickbookings-style .category-tab {
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out;
}
.quickbookings-style .category-tab:not(.tabactive):hover {
  background-color: #fcfffc !important;
  border: 2px solid rgba(73, 167, 79, 0.5) !important;
  color: #385645 !important;
}
.quickbookings-style #webstore_center_selection_block {
  background-color: #fcfffc !important;
  border: 2px solid rgba(73, 167, 79, 0.5) !important;
  padding-top:7px;
}
.quickbookings-style #webstore_center_selection_block .push--left.h6 {
  font-size: 1.25rem !important;
}
.quickbookings-style #webstore_center_selection_block #change_location {
  color: #58a55c !important;
  font-weight: normal !important;
  text-decoration:underline;
}
.quickbookings-style #webstore_center_selection_block #change_location:before {
  color: #58a55c !important;
}
.quickbookings-style #business-label-heading {
  font-size: 1.4rem !important;
}
.quickbookings-style #serviceSelectionid {
  font-size: 1.4rem !important;
}
.quickbookings-style #scrollToTherapist {
  font-size: 1.4rem !important;
}
.quickbookings-style #scrollToDate {
  font-size: 1.4rem !important;
  text-transform: lowercase !important;
}
.quickbookings-style .col-md-7.soft--top.soft--bottom .adaptable_h5 {
  font-size: 1.4rem !important;
}
.quickbookings-style .sidebar a[href*="google.com/maps/dir"] {
  color: #58a55c !important;
  text-decoration: underline !important;
}
.quickbookings-style .sidebar,

.quickbookings-style .sidebar a,

.quickbookings-style .sidebar h3,

.quickbookings-style .sidebar p,

.quickbookings-style .sidebar span {
  color: #385645 !important;
}
.quickbookings-style .zen-dialog--auth.zen-dialog--box {
  border-radius: 30px !important;
  overflow: hidden;
  background-color: #ffffff !important;
}
.quickbookings-style .zen-dialog--auth .zen-dialog--header {
  background-color: #385645 !important;
  color: #ffffff !important;
  border-radius: 30px 30px 0 0;
}
.quickbookings-style .zen-dialog--auth .zen-dialog--header b {
  color: #ffffff !important;
}
.quickbookings-style .zen-dialog--auth .zen-dialog--close .leftright,

.quickbookings-style .zen-dialog--auth .zen-dialog--close .rightleft {
  background-color: #ffffff !important;
}
.quickbookings-style .zen-dialog--auth .zen-btn.btn-secondary.btn-lg.btn-block {
  border: 1px solid transparent;
  border-radius: 50px !important;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}
.quickbookings-style .zen-dialog--auth .zen-btn.btn-secondary.btn-lg.btn-block:hover:not(:disabled) {
  background-color: #ffffff !important;
  color: #385645 !important;
  border-color: #385645 !important;
}
.quickbookings-style .zen-dialog--auth .outlined_input {
  border-radius: 30px !important;
  background-color: #f5f5f5 !important;
}
.quickbookings-style .zen-dialog--auth .zen-dialog--header {
  background-color: #ffffff !important;
  border-bottom: 1px solid #f3f3f3;
}
.quickbookings-style .zen-dialog--auth .zen-dialog--header span[role="heading"] {
  color: #385645 !important;
  text-transform:lowercase;
}
.quickbookings-style .zen-dialog--auth .zen-dialog--close .leftright,

.quickbookings-style .zen-dialog--auth .zen-dialog--close .rightleft {
  background-color: #385645 !important;
}
.quickbookings-style #createANewAccButton {
  color: #58a55c !important;
}
.quickbookings-style .zen-dialog--auth .outlined_input + label {
  background-color:#f5f5f5 !important;
}
.quickbookings-style button.btn.btn-secondary.btn-lg.push--sides[style*="128, 128, 128"] {
  background-color: #ffffff !important;
  color: rgb(56, 86, 69) !important;
  border: 1px solid rgb(56, 86, 69) !important;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}
.quickbookings-style button.btn.btn-secondary.btn-lg.push--sides[style*="128, 128, 128"]:hover {
  background-color: rgb(56, 86, 69) !important;
  color: #ffffff !important;
}
.quickbookings-style .zen-apply-btn,

.quickbookings-style #wsConfirmBook {
  border: 1px solid transparent;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}
.quickbookings-style .zen-apply-btn:hover:not(:disabled),

.quickbookings-style #wsConfirmBook:hover:not(:disabled) {
  background-color: #ffffff !important;
  color: rgb(56, 86, 69) !important;
  border-color: rgb(56, 86, 69) !important;
}
.quickbookings-style #ws-booking-summary-timer {
  padding:5px;
  color: #385645 !important;
  border-radius:10px;
  margin-bottom:0px;
}
.quickbookings-style .zen-terms-header {
    border: 1px solid brown;
    border-radius: 10px;
    margin-top:10px!important;
    margin-left:-15px!important;
    margin-right:-15px!important;
}
.quickbookings-style #ws_termsAndConditions {
  accent-color: #58a55c;
}
.quickbookings-style webstore-confirmation-block #main-content,

.quickbookings-style webstore-confirmation-block .webstore-main-container {
  background-color: #f2f0ec !important;
}
.quickbookings-style webstore-confirmation-block .push-double--bottom.col-md-8 {
  background-color: #ffffff !important;
  border-radius: 10px !important;
  border: 1px solid #C9C8C8 !important;
  padding-bottom:10px;
  padding-top:10px;
}
.quickbookings-style .col-md-8:has(webstore-booking-summary) > .hidden-md-up.push-double--bottom {
  margin-bottom: -20px !important;
}
.quickbookings-style webstore-confirmation-block h1 {
  margin-bottom: 10px;
}
.quickbookings-style #btn_gotohome,

.quickbookings-style #btn_book_again,

.quickbookings-style #ws-add-calendar {
  background-color: #ffffff !important;
  color: rgb(56, 86, 69) !important;
  border: 1px solid rgb(56, 86, 69) !important;
  border-radius: 50px !important;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
  padding-left:20px;
  padding-right:20px;
}
.quickbookings-style #btn_gotohome:hover,

.quickbookings-style #btn_book_again:hover,

.quickbookings-style #ws-add-calendar:hover {
  background-color: rgb(56, 86, 69) !important;
  color: #ffffff !important;
}
.quickbookings-style #ws-fill-forms-text-btn {
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}
.quickbookings-style #ws-fill-forms-text-btn:hover {
  background-color: #ffffff !important;
  color: rgb(56, 86, 69) !important;
  border: 1px solid rgb(56, 86, 69) !important;
}
.quickbookings-style #ws-fill-forms-text-btn:hover label {
  color: rgb(56, 86, 69) !important;
}
.quickbookings-style webstore-confirmation-block .service-details {
  border-radius:10px;
  padding:10px 10px 0px 10px!important;
}
.quickbookings-style #main-content {
  background-color: #f2f0ec !important;
}
.quickbookings-style .soft-double {
padding:0px;
}
.quickbookings-style webstore-confirmation-block .webstore-main-container {
  background-color: #f2f0ec !important;
}
.quickbookings-style .nav.nav-pills .nav-link {
  background-color: #ffffff !important;
  color: rgb(56, 86, 69) !important;
  border: 1px solid rgb(56, 86, 69) !important;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}
.quickbookings-style .nav.nav-pills .nav-link.active {
  background-color: rgb(56, 86, 69) !important;
  color: #ffffff !important;
}
.quickbookings-style .nav.nav-pills .nav-link:not(.active):hover {
  background-color: #fcfffc !important;
  border-color: rgba(73, 167, 79, 0.5) !important;
  color: #385645 !important;
}
.quickbookings-style .row.soft:has(#profileTabId) {
  background-color: #ffffff !important;
  border: 1px solid #C9C8C8 !important;
  border-radius: 10px !important;
  margin-top:20px;
}
.quickbookings-style .zen-dialog-nearby-search .zen-dialog--header {
  background-color: #ffffff !important;
  color: #385645 !important;
  border-bottom: 1px solid #f3f3f3;
}
.quickbookings-style .zen-dialog-nearby-search .zen-dialog--header span[role="heading"] {
  color: #385645 !important;
}
.quickbookings-style .zen-dialog-nearby-search .zen-dialog--close .leftright,

.quickbookings-style .zen-dialog-nearby-search .zen-dialog--close .rightleft {
  background-color: #385645 !important;
}
.quickbookings-style .zen-dialog-nearby-search .zen-dialog--header {
  border-radius: 30px 30px 0 0;
}
.quickbookings-style .zen-dialog-nearby-search.zen-dialog--box {
  border-radius: 30px !important;
  overflow: hidden;
}
.quickbookings-style .zen-dialog-nearby-search .zen-centers-list {
  cursor: pointer;
}
.quickbookings-style .zen-dialog-nearby-search .zen-centers-list:hover {
  background-color: #fcfffc !important;
  border: 2px solid rgba(73, 167, 79, 0.5) !important;
}
.quickbookings-style .zen-dialog-nearby-search .btn.btn-secondary.form-control {
  border-radius: 0 30px 30px 0 !important;
}
.quickbookings-style .zen-dialog-nearby-search .zen-dialog--header span[role="heading"] {
  text-transform: lowercase !important;
}
.quickbookings-style .zen-dialog-nearby-search #centersSearch {
  border-radius: 30px 0 0 30px !important;
}
.quickbookings-style .zen-membership-signin {
  display: none !important;
}
.quickbookings-style .booking-summary .adaptable_h5 {
  font-size: 1.2rem !important;
  color:#395542!important;
  text-transform:lowercase!important;
}
.quickbookings-style .booking-summary {
  color:#395542!important;
  text-transform:lowercase!important;
}
.quickbookings-style .viewAllButton {
  background-color: #ffffff !important;
  color: rgb(56, 86, 69) !important;
  border: 1px solid rgb(56, 86, 69) !important;
  width: 45% !important;
  border-top: none !important;
  margin-left: 10px !important;
  margin-right: auto !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}
.quickbookings-style .viewAllButton:hover {
  background-color: rgb(56, 86, 69) !important;
  color: #ffffff !important;
}
.quickbookings-style .viewAllButton:hover i,

.quickbookings-style .viewAllButton:hover a {
  color: #ffffff !important;
}
.quickbookings-style .viewAllButton,

.quickbookings-style .viewAllButton a,

.quickbookings-style .viewAllButton i {
  color: rgb(56, 86, 69) !important;
}
.quickbookings-style .viewAllButton:hover,

.quickbookings-style .viewAllButton:hover a,

.quickbookings-style .viewAllButton:hover i {
  color: #ffffff !important;
}
.quickbookings-style .addon-detail:has(input:checked) {
  background-color: #fcfffc !important;
  border: 2px solid rgba(73, 167, 79, 0.5) !important;
}
.quickbookings-style div.date-display:has(#scrollToTimeSlots) {
  background-color: #395542 !important;
}
.quickbookings-style .date-display {
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.quickbookings-style .date-display p {
  margin: 0 !important;
}
.quickbookings-style .zen-dialog--box:not(:has(.zen-dialog--header)) {
  border-radius: 30px !important;
  overflow: hidden;
}
.quickbookings-style .zen-dialog--box:not(:has(.zen-dialog--header)) .btn.btn-lg {
  background-color: #ffffff !important;
  color: rgb(56, 86, 69) !important;
  border: 1px solid rgb(56, 86, 69) !important;
  border-radius: 50px !important;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}
.quickbookings-style .zen-dialog--box:not(:has(.zen-dialog--header)) .col-6:last-child .btn.btn-lg {
  background-color: rgb(56, 86, 69) !important;
  color: #ffffff !important;
  border: 1px solid rgb(56, 86, 69) !important;
}
.quickbookings-style .zen-dialog--box:not(:has(.zen-dialog--header)) .btn.btn-lg:hover {
  background-color: rgb(56, 86, 69) !important;
  color: #ffffff !important;
}
.quickbookings-style .zen-dialog--box:not(:has(.zen-dialog--header)) .col-6:last-child .btn.btn-lg:hover {
  background-color: #ffffff !important;
  color: rgb(56, 86, 69) !important;
}
.quickbookings-style .zen-dialog--box:not(:has(.zen-dialog--header)) .row.soft {
  background-color: #ffffff !important;
}
.quickbookings-style .col-md-12:has(> h3.selected-services-label),

.quickbookings-style .col-md-12:has(> h3.selected-services-label) * {
  color: #395542 !important;
}
.quickbookings-style .zen-apply-btn {
  padding: .25rem 1rem !important;
  background-color: #ffffff !important;
  color: rgb(56, 86, 69) !important;
  border: 1px solid rgb(56, 86, 69) !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}
.quickbookings-style .col-md-12:has(> h3.selected-services-label) .zen-txt-color,

.quickbookings-style .col-md-12:has(> h3.selected-services-label) [class*="col-"] {
  color: #395542 !important;
}
.quickbookings-style .header-container nav ul li a {
  color: #385645 !important;
}
.quickbookings-style .row.push-double--bottom.zen-margin-bottom {
  align-items: center;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-right:15px;
  padding-left:15px;
}
.quickbookings-style .capsule {
  padding: 10px 16px !important;
}
.quickbookings-style .row.push-double--bottom.zen-margin-bottom .col-8.p-0 {
  display: flex;
  align-items: center;
}
.quickbookings-style .row.push-double--bottom.zen-margin-bottom .col-2.p-0.zen-txt-align-right:last-child {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.quickbookings-style .zen-dialog--xmd.zen-dialog--box {
  border-radius: 30px !important;
  overflow: hidden;
}
.quickbookings-style .zen-dialog--xmd .row.soft {
  background-color: #ffffff !important;
}
.quickbookings-style .zen-dialog--xmd.zen-dialog--box {
  background-color: #ffffff !important;
}
.quickbookings-style .zen-dialog--xmd .zen-dialog--header {
  background-color: #ffffff !important;
  color: #385645 !important;
  border-bottom: 1px solid #f3f3f3;
}
.quickbookings-style .zen-dialog--xmd .zen-dialog--header span[role="heading"] {
  color: #385645 !important;
  text-transform: lowercase !important;
}
.quickbookings-style .zen-dialog--xmd .close-container .leftright,

.quickbookings-style .zen-dialog--xmd .close-container .rightleft {
  background-color: #385645 !important;
}
.quickbookings-style webstore-payments {
  margin-top: 10px;
  display: block;
  background-color: #ffffff !important;
  border: 1px solid #C9C8C8 !important;
  border-radius: 10px;
  padding: 15px;
}
.quickbookings-style webstore-payments .mt-5 {
  margin-top: 0 !important;
}
.quickbookings-style #ws2-payments-header-label {
  font-size: 1.4rem;
}
.quickbookings-style webstore-payments .container.p-3.mb-2.mt-2 {
  border: none !important;
  background-color: transparent !important;
}
@media screen and (max-width: 768px) {
  .quickbookings-style #ws-fill-forms-text-btn {
    display: block !important;
    margin: 20px auto 0 !important;
  }
  .quickbookings-style #webstorev2-cb-forms-title,

  .quickbookings-style #webstorev2-cb-forms-subtitle {
    text-align: center !important;
  }
  .quickbookings-style .row:has(#ws-fill-forms-text-btn) .col-2 {
    display: none !important;
  }
  .quickbookings-style .row:has(#ws-fill-forms-text-btn) .col-10 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  .quickbookings-style .timeslot-div {
    margin-top: 10px !important;
  }
}