/* =============================================================================

   CSC Supermatch — Theme CSS
   Version 3.0
   Last Update: May 2026

   TABLE OF CONTENTS
   ─────────────────────────────────────────────────────────────────────
   1.  Google Fonts Import
   2.  CSS Custom Properties (:root tokens)
       2a. Brand Colours
       2b. Typography
       2c. Headings (h1–h5)
       2d. Buttons
       2e. Inputs & Forms
       2f. Layout & Spacing
       2g. Components (Spinner, Auth, Accordion, Alerts, OTP)
   3.  Bootstrap Token Overrides
   4.  Base / Reset
   5.  Typography
   6.  Headings
   7.  Layout — Page & Wrapper
   8.  Header — Brand & Progress
   9.  Cards
   10. Search Results
   11. Forms & Inputs
   12. Buttons
   13. Footer
   14. Accordion
   15. Alerts & Error Messages
   16. OTP Inputs
   17. Lists
   18. Spinner / Loading
   19. Authentication
   20. CORE CSS Overrides (CSC_CORE_SM_CSS colour + font fixes)
   21. ChandlerVerify Plugin Overrides
   22. Utilities
   ─────────────────────────────────────────────────────────────────────
============================================================================= */


/* =============================================================================
   1. GOOGLE FONTS IMPORT
============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:ital,wght@0,400..900;1,400..900&display=swap');


/* =============================================================================
   2. CSS CUSTOM PROPERTIES
   All brand values live here. Edit tokens to update the entire file.
============================================================================= */

:root {

  /* ── 2a. Brand Colours ─────────────────────────────────────────────────── */

  --cx-color-navy:          #00263b;
  --cx-color-blue:          #0e4866;
  --cx-color-steel-grey:    #a1abb2;
  --cx-color-teal:          #1dcece;
  --cx-color-dark-teal:     #00616b;
  --cx-color-light-teal:    #a5efed;
  --cx-color-gold:          #c6aa76;
  --cx-color-light-gold:    #e1cfad;
  --cx-color-cool-grey:     #f4f1f0;
  --cx-color-white:         #ffffff;

  /* ── 2b. Typography ────────────────────────────────────────────────────── */

  --cx-font-body:           "Schibsted Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --cx-font-heading:        "Schibsted Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --cx-font-buttons:        "Schibsted Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  --cx-primary-text-color:   #00263b;
  --cx-secondary-text-color: #00263b;

  --cx-body-font-size:       16px;
  --cx-body-font-weight:     400;
  --cx-body-line-height:     1.6;

  --cx-link-color:           var(--cx-color-teal);
  --cx-link-color-hover:     var(--cx-color-dark-teal);
  --cx-link-text-decoration: none;
  --cx-link-text-decoration-hover: underline;

  /* ── 2c. Headings ──────────────────────────────────────────────────────── */

  --cx-h1-font-family:      var(--cx-font-heading);
  --cx-h1-weight:           700;
  --cx-h1-size-desktop:     32px;
  --cx-h1-size-tablet:      28px;
  --cx-h1-size-mobile:      24px;
  --cx-h1-margin-bottom:    20px;

  --cx-h2-font-family:      var(--cx-font-heading);
  --cx-h2-weight:           700;
  --cx-h2-size-desktop:     28px;
  --cx-h2-size-tablet:      22px;
  --cx-h2-size-mobile:      20px;
  --cx-h2-margin-bottom:    20px;

  --cx-h3-font-family:      var(--cx-font-heading);
  --cx-h3-weight:           700;
  --cx-h3-size-desktop:     22px;
  --cx-h3-size-tablet:      20px;
  --cx-h3-size-mobile:      18px;
  --cx-h3-margin-bottom:    16px;

  --cx-h4-font-family:      var(--cx-font-heading);
  --cx-h4-weight:           600;
  --cx-h4-size-desktop:     18px;
  --cx-h4-size-tablet:      18px;
  --cx-h4-size-mobile:      16px;
  --cx-h4-margin-bottom:    12px;

  --cx-h5-font-family:      var(--cx-font-heading);
  --cx-h5-weight:           600;
  --cx-h5-size-desktop:     16px;
  --cx-h5-size-tablet:      16px;
  --cx-h5-size-mobile:      16px;
  --cx-h5-margin-bottom:    12px;

  /* ── 2d. Buttons ───────────────────────────────────────────────────────── */

  --cx-button-font-size:           1rem;
  --cx-button-font-weight:         600;
  --cx-button-border-width:        2px;
  --cx-button-border-radius:       48px;
  --cx-button-padding:             11px 30px;
  --cx-button-min-width-desktop:   160px;
  --cx-button-min-width-tablet:    140px;
  --cx-button-min-width-mobile:    120px;
  --cx-button-text-decoration:     none;
  --cx-button-text-decoration-hover: none;

  /* Primary */
  --cx-button-primary-bg:           #0e4866;
  --cx-button-primary-text:         #ffffff;
  --cx-button-primary-border:       #0e4866;
  --cx-button-primary-hover-bg:     #00263b;
  --cx-button-primary-hover-text:   #ffffff;
  --cx-button-primary-hover-border: #00263b;
  --cx-button-primary-active-bg:    #00263b;
  --cx-button-primary-active-text:  #ffffff;
  --cx-button-primary-active-border:#00263b;
  --cx-button-primary-focus-bg:     #0e4866;
  --cx-button-primary-focus-text:   #ffffff;
  --cx-button-primary-focus-border: #0e4866;

  /* Secondary */
  --cx-button-secondary-bg:           #1dcece;
  --cx-button-secondary-text:         #ffffff;
  --cx-button-secondary-border:       #1dcece;
  --cx-button-secondary-hover-bg:     #00616b;
  --cx-button-secondary-hover-text:   #ffffff;
  --cx-button-secondary-hover-border: #00616b;
  --cx-button-secondary-active-bg:    #00616b;
  --cx-button-secondary-active-text:  #ffffff;
  --cx-button-secondary-active-border:#00616b;
  --cx-button-secondary-focus-bg:     #00616b;
  --cx-button-secondary-focus-text:   #ffffff;
  --cx-button-secondary-focus-border: #00616b;

  /* ── 2e. Inputs & Forms ────────────────────────────────────────────────── */

  --cx-input-border-radius:        4px;
  --cx-input-border-color:         #a1abb2;
  --cx-input-bg-color:             #ffffff;
  --cx-input-border-width:         1px;
  --cx-input-border-color-focus:   #1dcece;
  --cx-input-border-width-focus:   2px;
  --cx-input-label-weight:         600;
  --cx-input-min-height:           50px;
  --cx-input-boxshadow-color-focus: rgba(14, 72, 102, 0.35);
  --cx-input-outline-width-focus:  2px;
  --cx-input-outline-offset-focus: 2px;

  /* Checkbox */
  --cx-checkbox-size:               24px;
  --cx-checkbox-border-width:       2px;
  --cx-checkbox-radius:             0px;
  --cx-checkbox-border-color:       #00263b;
  --cx-checkbox-border-checked-color: #0e4866;
  --cx-checkbox-bg:                 #ffffff;
  --cx-checkbox-bg-checked:         #0e4866;
  --cx-checkbox-accent-color:       #ffffff;

  /* ── 2f. Layout & Spacing ──────────────────────────────────────────────── */

  --cx-body-background-color:      #f4f1f0;
  --cx-card-background-color:      #ffffff;
  --cx-border-color:               #a1abb2;
  --cx-border-color-light:         #d0d0ce;

  /* ── 2g. Components ────────────────────────────────────────────────────── */

  --cx-spinner-color:              #1dcece;
  --cx-spinner-top-color:          #ffffff;
  --cx-spinner-size:               50px;
  --cx-spinner-border-width:       5px;

  --cx-auth-icon-border-color:     #00616b;
  --cx-auth-icon-bg:               #ffffff;

  --cx-accordion-border-color:     #a1abb2;
  --cx-accordion-text-color:       #00263b;

  --cx-alert-icon-color:           #1dcece;
  --cx-alert-border-color:         #1dcece;
  --cx-alert-border-width:         2px;

  --cx-otp-border-color:           #00263b;
  --cx-otp-border-color-focus:     #1dcece;

  --cx-footer-border-color:        #d0d0ce;
  --cx-footer-bg:                  #ffffff;
  --cx-footer-text-color:          #00263b;
}


/* =============================================================================
   3. BOOTSTRAP TOKEN OVERRIDES
   Overrides Bootstrap 5 default tokens so hover states, focus rings,
   and link colours all match the CSC brand palette.
============================================================================= */

:root {
  --bs-link-color:              #1dcece;
  --bs-link-hover-color:        #00616b;
  --bs-link-color-rgb:          29, 206, 206;
  --bs-link-hover-color-rgb:    0, 97, 107;

  /* Focus ring — matches CSC Blue button colour to blend naturally */
  --bs-focus-ring-color:        rgba(14, 72, 102, 0.35);
  --bs-btn-focus-box-shadow:    0 0 0 3px rgba(14, 72, 102, 0.35);

  /* Form controls */
  --bs-border-color:            #a1abb2;

  /* Body */
  --bs-body-font-family:        "Schibsted Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --bs-body-color:              #00263b;
  --bs-body-bg:                 #d0d0ce;
}


/* =============================================================================
   4. BASE / RESET
============================================================================= */

body {
  padding: 0;
  font-family: var(--cx-font-body) !important;
  color: var(--cx-primary-text-color);
  font-size: var(--cx-body-font-size);
  font-weight: var(--cx-body-font-weight);
  line-height: var(--cx-body-line-height);
  background-color: var(--cx-body-background-color);
}

a {
  color: var(--cx-link-color);
  text-decoration: var(--cx-link-text-decoration);
}

a:not([role="button"]):not('.btn'):hover {
  color: var(--cx-link-color-hover);
  text-decoration: var(--cx-link-text-decoration-hover);
}

hr {
  opacity: 1;
  border-top-color: var(--cx-border-color);
}

@media (max-width: 1199px) {
  .container {
    max-width: 100%;
    padding: 0;
  }
}


/* =============================================================================
   5. TYPOGRAPHY
============================================================================= */

.paragraph {
  font-weight: 400;
  color: var(--cx-primary-text-color);
  padding-top: 40px;
  padding-bottom: 40px;
  font-family: var(--cx-font-body);
}

@media screen and (max-width: 767px) {
  .paragraph {
    font-size: 14px;
    line-height: 20px;
  }
}

@media screen and (max-width: 479px) {
  .paragraph {
    font-size: 12px;
  }
}

.semi-bold {
  color: var(--cx-primary-text-color);
  font-family: var(--cx-font-body);
  font-weight: 600;
}

.page-title {
  color: var(--cx-primary-text-color);
  font-weight: 600;
}

@media screen and (max-width: 479px) {
  .page-title {
    display: flex;
    font-size: 12px;
  }
}

.page-number {
  padding-left: 10px;
}

@media screen and (max-width: 479px) {
  .page-number {
    font-size: 12px;
  }
}

.total-value-label {
  color: var(--cx-primary-text-color);
  font-size: 20px;
  line-height: 26px;
  font-weight: 600;
  text-align: left;
}

@media screen and (max-width: 767px) {
  .total-value-label {
    font-size: 14px;
    line-height: 24px;
  }
}

.total-value {
  color: var(--cx-primary-text-color);
  font-size: 26px;
  line-height: 32px;
  font-weight: 600;
}

@media screen and (max-width: 767px) {
  .total-value {
    font-size: 20px;
    line-height: 28px;
  }
}

.fund-total-value {
  margin-top: 35px;
  font-size: 26px;
  line-height: 32px;
  font-weight: 600;
}

@media screen and (max-width: 479px) {
  .fund-total-value {
    font-size: 1.4em;
  }
}

.footnote-paragraph {
  font-size: 14px;
  line-height: 26px;
}

.footnote-ol {
  padding-top: 10px;
  padding-bottom: 0px;
  color: var(--cx-primary-text-color);
  font-size: 14px;
  line-height: 24px;
}

.text-size-regular {
  color: var(--cx-secondary-text-color);
  font-family: var(--cx-font-body);
  font-size: 16px;
  line-height: 1.6;
}

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


/* =============================================================================
   6. HEADINGS
============================================================================= */

h1, .h1 {
  font-family: var(--cx-h1-font-family);
  font-weight: var(--cx-h1-weight);
  font-size: var(--cx-h1-size-desktop);
  color: var(--cx-primary-text-color);
  line-height: 1.2;
  margin-bottom: var(--cx-h1-margin-bottom);
}

h2, .h2 {
  font-family: var(--cx-h2-font-family);
  font-weight: var(--cx-h2-weight);
  font-size: var(--cx-h2-size-desktop);
  color: var(--cx-primary-text-color);
  line-height: 1.25;
  margin-bottom: var(--cx-h2-margin-bottom);
}

h3, .h3 {
  font-family: var(--cx-h3-font-family);
  font-weight: var(--cx-h3-weight);
  font-size: var(--cx-h3-size-desktop);
  color: var(--cx-primary-text-color);
  line-height: 1.3;
  margin-bottom: var(--cx-h3-margin-bottom);
}

h4, .h4 {
  font-family: var(--cx-h4-font-family);
  font-weight: var(--cx-h4-weight);
  font-size: var(--cx-h4-size-desktop);
  color: var(--cx-primary-text-color);
  line-height: 1.35;
  margin-bottom: var(--cx-h4-margin-bottom);
}

h5, .h5 {
  font-family: var(--cx-h5-font-family);
  font-weight: var(--cx-h5-weight);
  font-size: var(--cx-h5-size-desktop);
  color: var(--cx-primary-text-color);
  line-height: 1.4;
  margin-bottom: var(--cx-h5-margin-bottom);
}

h6, .h6 {
  font-family: var(--cx-font-heading);
  font-weight: 600;
  color: var(--cx-primary-text-color);
  line-height: 1.4;
  margin-bottom: 12px;
}

h1.error-header {
  margin-bottom: var(--cx-h1-margin-bottom);
  font-size: var(--cx-h1-size-desktop);
  font-weight: var(--cx-h1-weight);
  color: var(--cx-primary-text-color);
  font-family: var(--cx-h1-font-family);
  line-height: 1.2;
}

@media screen and (max-width: 1199px) {
  h1.error-header {
    font-size: var(--cx-h1-size-tablet);
  }
}

@media screen and (max-width: 767px) {
  h1.error-header {
    font-size: var(--cx-h1-size-mobile);
  }
}

/* Tablet heading sizes */
@media screen and (max-width: 1199px) {
  h1, .h1 { font-size: var(--cx-h1-size-tablet); }
  h2, .h2 { font-size: var(--cx-h2-size-tablet); }
  h3, .h3 { font-size: var(--cx-h3-size-tablet); }
  h4, .h4 { font-size: var(--cx-h4-size-tablet); }
  h5, .h5 { font-size: var(--cx-h5-size-tablet); }
  .card.card-primary .card-header-title { font-size: var(--cx-h2-size-tablet); }
}

/* Mobile heading sizes */
@media screen and (max-width: 767px) {
  h1, .h1 { font-size: var(--cx-h1-size-mobile); }
  h2, .h2 { font-size: var(--cx-h2-size-mobile); }
  h3, .h3 { font-size: var(--cx-h3-size-mobile); }
  h4, .h4 { font-size: var(--cx-h4-size-mobile); }
  h5, .h5 { font-size: var(--cx-h5-size-mobile); }
  .card.card-primary .card-header-title { font-size: var(--cx-h2-size-mobile); }
}


/* =============================================================================
   7. LAYOUT — PAGE & WRAPPER
============================================================================= */

.page-wrapper {
  position: relative;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  align-items: stretch;
  background-color: var(--cx-body-background-color);
}

@media screen and (max-width: 479px) {
  .page-wrapper {
    background-color: var(--cx-color-white);
  }
}

.global-content-section {
  display: flex;
  min-height: 70vh;
  padding-top: 140px;
  padding-bottom: 140px;
  flex-direction: column;
  align-items: center;
}

@media (max-width: 991px) {
  .global-content-section {
    padding-top: 0px;
    padding-bottom: 40px;
  }
}

@media (min-width: 992px) {
  .col-lg-10 {
    flex: 0 0 auto;
    width: 100%;
  }
}


/* =============================================================================
   8. HEADER — BRAND & PROGRESS
============================================================================= */

.global-header-section {
  padding: 0;
  display: block;
  position: sticky;
  top: 0px;
  z-index: 9999;
}

/* Brand bar */

.brand-section {
  display: flex;
  width: 100%;
  height: 80px;
  padding: 20px 40px;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--cx-border-color);
  background-color: #00263b;
}

@media screen and (max-width: 767px) {
  .brand-section {
    height: 64px;
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

@media screen and (max-width: 479px) {
  .brand-section {
    padding: 12px 20px;
  }
}

.logo {
  width: 200px;
  height: auto;
}

@media screen and (max-width: 479px) {
  .logo {
    width: 140px;
    height: auto;
  }
}

/* Progress bar */

.progress-section {
  display: flex;
  padding: 20px 40px;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 0px solid var(--cx-border-color);
  background-color: var(--cx-color-white);
}

@media screen and (max-width: 479px) {
  .progress-section {
    padding: 15px 20px;
    border-bottom: 0px;
  }
}

.progress-title-wrapper {
  display: flex;
  align-items: center;
}

.page-number-highlight {
  font-weight: 600;
}

.page-progress-name {
  padding-right: 10px;
  font-weight: 600;
  color: var(--cx-primary-text-color);
}

@media screen and (max-width: 479px) {
  .page-progress-name {
    display: none;
  }
}

/* Partner logos */

.partner-logo-section {
  padding-top: 12px;
  padding-bottom: 32px;
}

.partner-logo-wrapper {
  display: flex;
  align-items: flex-start;
}

.partner-label {
  padding-right: 10px;
  font-size: 14px;
}

.partner-logo {
  width: 80px;
}


/* =============================================================================
   9. CARDS
============================================================================= */

.card {
  margin-bottom: 10px;
  border-width: 0;
  background-color: var(--cx-card-background-color);
}

@media (max-width: 1199px) {
  .card {
    border-radius: 0;
  }
}

@media screen and (max-width: 479px) {
  .card {
    border-bottom: 1px solid var(--cx-border-color);
    margin-bottom: 0;
  }
}

/* Card header */

.card .card-header {
  padding: 0;
  margin: 0;
  background-color: var(--cx-card-background-color);
  color: var(--cx-primary-text-color);
  font-weight: 600;
  border-width: 0;
}

.card.card-primary .card-header-title {
  margin-bottom: var(--cx-h2-margin-bottom);
  font-size: var(--cx-h2-size-desktop);
  line-height: 1.25;
  font-weight: var(--cx-h2-weight);
}

@media screen and (max-width: 767px) {
  .card.card-primary .card-header-title {
    font-size: 24px;
    line-height: 28px;
  }
}

.card.card-secondary .card-header-title {
  margin-bottom: 20px;
  font-size: 20px;
  line-height: 28px;
  font-weight: var(--cx-h2-weight);
}

/* Card body */

.card .card-body {
  padding: 60px 100px;
}

@media screen and (max-width: 991px) {
  .card .card-body {
    padding: 60px;
  }
}

@media screen and (max-width: 479px) {
  .card .card-body {
    padding: 30px 24px;
  }
}

/* Card titles */

.card-primary-title {
  margin-top: 0px;
  margin-bottom: 0px;
  padding-bottom: 20px;
  color: var(--cx-primary-text-color);
  font-size: 26px;
  line-height: 32px;
  font-weight: 700;
  text-align: left;
}

@media screen and (max-width: 767px) {
  .card-primary-title {
    font-size: 20px;
    line-height: 28px;
  }
}

.card-header-sub-title {
  padding: 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}

@media screen and (max-width: 767px) {
  .card-header-sub-title,
  .card-sub-header {
    font-size: 14px;
    line-height: 20px;
  }
}

.card-sub-header {
  margin-top: 0px;
  margin-bottom: 0px;
  color: var(--cx-secondary-text-color);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}


/* =============================================================================
   10. SEARCH RESULTS
============================================================================= */

.search-results-card {
  margin-bottom: 20px;
  flex-direction: column;
  border: 1px solid var(--cx-border-color);
}

.search-results-card .search-upper-section {
  padding: 40px;
}

@media screen and (max-width: 479px) {
  .search-results-card .search-upper-section {
    padding: 20px;
  }
}

.search-results-card .search-mid-section {
  padding: 20px 40px;
  border-top: 1px solid var(--cx-border-color);
}

@media screen and (max-width: 479px) {
  .search-results-card .search-mid-section,
  .search-mid-section {
    padding: 20px;
  }
}

.search-results-card .search-lower-section {
  border-top: 1px solid var(--cx-border-color);
}

.search-results-card .search-lower-section [data-bs-toggle="collapse"] {
  padding: 20px 20px 20px 40px;
  font-weight: 600;
  text-decoration: none;
  color: var(--cx-primary-text-color);
}

@media screen and (max-width: 479px) {
  .search-results-card .search-lower-section [data-bs-toggle="collapse"] {
    padding: 20px;
    font-size: 14px;
  }
}

.fund-info-accordion {
  padding: 20px 40px;
  font-size: 14px;
  line-height: 24px;
}

@media screen and (max-width: 479px) {
  .fund-info-accordion {
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
  }
}

.search-results-card .results-alert-icon {
  font-size: 20px;
  color: var(--cx-alert-icon-color);
  margin-right: 5px;
}


/* =============================================================================
   11. FORMS & INPUTS
============================================================================= */

/* Focus styles */

input:focus-visible,
a:focus-visible,
button:focus-visible {
  outline-color: var(--cx-input-border-color-focus) !important;
  outline-offset: var(--cx-input-outline-offset-focus) !important;
  outline-style: solid !important;
  outline-width: var(--cx-input-outline-width-focus) !important;
  box-shadow: none !important;
}

/* Exclude logo and brand wrapper links from focus ring */
.brand-section a:focus-visible,
.brand-section a:focus,
.logo:focus-visible,
.footer-logo:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

button:focus {
  box-shadow: none !important;
}

/* Form label */

.form-label {
  font-size: 14px;
  font-weight: var(--cx-input-label-weight);
  color: var(--cx-primary-text-color);
}

/* Input field */

.form-control,
.input-field-wrapper .form-control {
  height: var(--cx-input-min-height);
  background-color: var(--cx-input-bg-color);
  border-width: var(--cx-input-border-width);
  border-style: solid;
  border-color: var(--cx-input-border-color);
  border-radius: var(--cx-input-border-radius);
  color: var(--cx-secondary-text-color);
  font-family: var(--cx-font-body);
}

.form-control:focus {
  border-color: var(--cx-input-border-color-focus);
  border-width: var(--cx-input-border-width-focus);
  box-shadow: 0 0 0 var(--cx-input-outline-width-focus) var(--cx-input-boxshadow-color-focus);
  color: var(--cx-secondary-text-color);
}

.form-control-auth {
  height: var(--cx-input-min-height);
  background-color: var(--cx-input-bg-color);
  border-width: var(--cx-input-border-width);
  border-style: solid;
  border-color: var(--cx-input-border-color);
  border-radius: var(--cx-input-border-radius);
  padding-left: 15px;
  padding-right: 15px;
  width: 100%;
  font-family: var(--cx-font-body);
  color: var(--cx-secondary-text-color);
}

@media screen and (max-width: 479px) {
  .form-control-auth {
    font-size: 16px;
    height: 45px;
  }
}

/* Input field with dollar sign */

.input_field {
  border: var(--cx-input-border-width) solid var(--cx-input-border-color);
  border-radius: var(--cx-input-border-radius);
  background-color: var(--cx-input-bg-color);
  min-width: 200px;
  height: 46px;
  margin-bottom: 0;
  padding-left: 40px;
  padding-right: 20px;
  font-family: var(--cx-font-body);
  color: var(--cx-secondary-text-color);
}

.input_field:focus {
  border-color: var(--cx-input-border-color-focus);
  border-width: var(--cx-input-border-width-focus);
}

.input_field::placeholder {
  color: var(--cx-border-color);
  font-family: var(--cx-font-body);
  font-weight: 400;
}

/* Checkboxes */

.form-check {
  padding-left: 2.2em;
  margin-bottom: 0;
  font-weight: 600;
}

.form-check .form-check-input {
  margin-left: -2.2em;
  margin-top: 0;
}

.form-check-input {
  width: var(--cx-checkbox-size);
  height: var(--cx-checkbox-size);
  min-height: var(--cx-checkbox-size);
  min-width: var(--cx-checkbox-size);
  border-width: var(--cx-checkbox-border-width);
  border-color: var(--cx-checkbox-border-color);
  background-color: var(--cx-checkbox-bg);
  box-shadow: none !important;
}

.form-check-input:focus-visible {
  border-color: var(--cx-input-border-color-focus);
}

.form-check-input:checked {
  background-color: var(--cx-checkbox-bg-checked);
  border-color: var(--cx-checkbox-border-checked-color);
}

.form-check-input[type=checkbox] {
  border-radius: var(--cx-checkbox-radius);
}

.form-check-input[type=checkbox]:focus {
  border-color: var(--cx-input-border-color-focus);
}

@media screen and (max-width: 767px) {
  .form-check-label {
    padding-right: 0px;
    padding-left: 0px;
    font-size: 14px;
  }
}


/* =============================================================================
   12. BUTTONS
============================================================================= */

.btn {
  min-width: var(--cx-button-min-width-desktop);
  padding: var(--cx-button-padding);
  border-style: solid;
  border-width: var(--cx-button-border-width);
  font-size: var(--cx-button-font-size);
  font-weight: var(--cx-button-font-weight);
  line-height: 1.5;
  text-align: center;
  text-decoration: var(--cx-button-text-decoration);
  border-radius: var(--cx-button-border-radius);
  white-space: nowrap;
  font-family: var(--cx-font-buttons);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.btn:hover,
.btn:focus {
  text-decoration: var(--cx-button-text-decoration-hover);
}

@media screen and (max-width: 1199px) {
  .btn {
    min-width: var(--cx-button-min-width-tablet);
  }
}

@media screen and (max-width: 767px) {
  .btn {
    min-width: var(--cx-button-min-width-mobile);
  }
}

/* Primary button */

.btn.btn-primary {
  background-color: var(--cx-button-primary-bg);
  color: var(--cx-button-primary-text);
  border-color: var(--cx-button-primary-border);
  --bs-btn-focus-shadow-rgb: 14, 72, 102;
}

.btn.btn-primary:hover {
  background-color: var(--cx-button-primary-hover-bg);
  color: var(--cx-button-primary-hover-text);
  border-color: var(--cx-button-primary-hover-border);
}

.btn.btn-primary:active {
  background-color: var(--cx-button-primary-active-bg);
  color: var(--cx-button-primary-active-text);
  border-color: var(--cx-button-primary-active-border);
}

.btn.btn-primary:focus,
.btn.btn-primary:focus-visible {
  background-color: var(--cx-button-primary-focus-bg);
  color: var(--cx-button-primary-focus-text);
  border-color: var(--cx-button-primary-focus-border);
  box-shadow: 0 0 0 3px rgba(14, 72, 102, 0.35);
}

/* Secondary / Outline button */

.btn.btn-outline,
.btn-outline {
  background-color: var(--cx-button-secondary-bg);
  color: var(--cx-button-secondary-text);
  border-color: var(--cx-button-secondary-border);
}

.btn.btn-outline:hover,
.btn-outline:hover {
  background-color: var(--cx-button-secondary-hover-bg);
  color: var(--cx-button-secondary-hover-text);
  border-color: var(--cx-button-secondary-hover-border);
}

.btn.btn-outline:active,
.btn-outline:active {
  background-color: var(--cx-button-secondary-active-bg);
  color: var(--cx-button-secondary-active-text);
  border-color: var(--cx-button-secondary-active-border);
}

.btn.btn-outline:focus,
.btn-outline:focus {
  background-color: var(--cx-button-secondary-focus-bg);
  color: var(--cx-button-secondary-focus-text);
  border-color: var(--cx-button-secondary-focus-border);
  box-shadow: var(--bs-btn-focus-box-shadow);
}

/* Navigation button spacing */

.content-login-navigation.nav-wrapper {
  margin-top: 40px;
  margin-bottom: 40px;
}

.content-mfa-navigation.nav-wrapper {
  margin-top: 40px;
  margin-bottom: 20px;
}

.content-results-navigation {
  gap: 0.5rem;
}

div#btnResend {
  text-decoration: underline;
  cursor: pointer;
}

.auth-button-wrapper {
  padding-top: 20px;
}

@media screen and (max-width: 479px) {
  .auth-button-wrapper {
    padding-top: 20px;
    padding-bottom: 40px;
  }
}


/* =============================================================================
   13. FOOTER
============================================================================= */

.global-footer-section {
  padding: 60px 0;
  position: sticky;
  left: 0%;
  top: 100%;
  right: 0%;
  bottom: 0%;
  border-top: 1px solid var(--cx-footer-border-color);
  background: var(--cx-footer-bg);
}

@media (max-width: 1199px) {
  .global-footer-section {
    padding: 44px 24px 30px 24px;
    position: relative;
    margin-top: auto;
    border-top: 0;
  }
}

.footer-paragraph {
  color: var(--cx-footer-text-color);
  font-size: 14px;
  line-height: 20px;
  background-color: var(--cx-footer-bg);
  font-family: var(--cx-font-body);
}

.footer-upper-section {
  justify-content: space-between;
  display: flex;
}

.footer-brand-wrapper,
.footer-contact-wrapper,
.footer-logo-wrapper {
  display: flex;
  align-items: flex-start;
}

.footer-message {
  margin-left: 40px;
}

.footer-email {
  align-items: center;
  padding-right: 100px;
  display: flex;
}

.footer-phone {
  align-items: center;
  display: flex;
}

.footer-logo {
  width: 200px;
}

.footer-icon {
  width: 25px;
  margin-right: 20px;
}

.footer-msg-title {
  color: var(--cx-footer-text-color);
  margin-bottom: 5px;
  font-family: var(--cx-font-body);
  font-size: 18px;
  font-weight: 600;
}

.footer-msg-text {
  color: var(--cx-footer-text-color);
  font-family: var(--cx-font-body);
  font-size: 16px;
}

.footer-link {
  color: var(--cx-footer-text-color);
  font-family: var(--cx-font-body);
  font-weight: 600;
  text-decoration: none;
}

@media screen and (max-width: 991px) {
  .footer-upper-section,
  .footer-brand-wrapper {
    flex-direction: column;
  }

  .footer-contact-wrapper {
    padding-top: 40px;
  }

  .footer-message {
    margin-top: 20px;
    margin-left: 0;
  }
}

@media screen and (max-width: 479px) {
  .footer-contact-wrapper {
    flex-direction: column;
  }

  .footer-phone {
    margin-top: 20px;
  }

  .footer-icon {
    width: 20px;
  }

  .footer-msg-title {
    font-size: 16px;
  }

  .footer-msg-text {
    font-size: 14px;
  }

  .footer-logo {
    width: 140px;
  }
}


/* =============================================================================
   14. ACCORDION
============================================================================= */

.accordion-button {
  padding: 20px 20px 20px 0;
  border-color: transparent transparent var(--cx-accordion-border-color);
  color: var(--cx-accordion-text-color);
  border-radius: 0 !important;
  font-weight: 700;
  font-family: var(--cx-font-body);
  background-color: var(--cx-card-background-color);
}

.accordion .accordion-button:not(.collapsed) {
  background-color: var(--cx-card-background-color);
  color: var(--cx-accordion-text-color);
  border-bottom: 1px solid var(--cx-accordion-border-color);
}

.accordion-item {
  border-radius: 0 !important;
  border-width: 0 0 1px;
}

.accordion-button:not(.collapsed)::after {
  background-image: var(--bs-accordion-btn-icon);
}


/* =============================================================================
   15. ALERTS & ERROR MESSAGES
============================================================================= */

.alert-icon {
  color: var(--cx-alert-icon-color);
  font-size: 20px;
}

.error-message {
  border: var(--cx-alert-border-width) solid var(--cx-alert-border-color);
  padding: 20px;
}

@media screen and (max-width: 479px) {
  .error-message .error-message-title,
  .error-message .error-message-content {
    font-size: 14px;
    line-height: 20px;
  }
}

.error-message-section:not(:last-child) {
  margin-bottom: 10px;
}


/* =============================================================================
   16. OTP INPUTS
============================================================================= */

.otp-inputs-wrapper input {
  width: 48px;
  height: 48px;
  font-size: 18px;
  border: 2px solid var(--cx-otp-border-color);
  border-radius: 4px;
  font-weight: 600;
  text-align: center;
  display: inline-block;
  font-family: var(--cx-font-body);
}

.otp-inputs-wrapper input:focus {
  outline: none !important;
  border-color: var(--cx-otp-border-color-focus);
}

@media screen and (max-width: 479px) {
  .otp-inputs-wrapper input {
    width: 40px;
    height: 40px;
  }
}


/* =============================================================================
   17. LISTS
============================================================================= */

.numbered-list,
.ordered-list {
  padding-left: 20px;
}

.numbered-list > li {
  list-style-type: decimal;
}

.numbered-list > li:not(:last-child) {
  margin-bottom: 10px;
}

.ordered-list > li:not(:last-child) {
  margin-bottom: 20px;
}


/* =============================================================================
   18. SPINNER / LOADING
============================================================================= */

.spinner {
  width: var(--cx-spinner-size);
  height: var(--cx-spinner-size);
  border: var(--cx-spinner-border-width) solid var(--cx-spinner-color);
  border-top: var(--cx-spinner-border-width) solid var(--cx-spinner-top-color);
  border-radius: 50%;
  -webkit-animation: rotate 1.2s linear infinite;
  -moz-animation: rotate 1.2s linear infinite;
  animation: rotate 1.2s linear infinite;
}

@-webkit-keyframes rotate {
  from { -webkit-transform: rotate(0deg); }
  to   { -webkit-transform: rotate(360deg); }
}

@-moz-keyframes rotate {
  from { -moz-transform: rotate(0deg); }
  to   { -moz-transform: rotate(360deg); }
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}


/* =============================================================================
   19. AUTHENTICATION
============================================================================= */

.login-form-wrapper {
  display: flex;
  width: 50%;
  padding-top: 20px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
}

.auth-vertical-line {
  min-height: 100%;
  min-width: 35px;
  background-image: url('https://chandlersalesdemo-test-cdn.cxengine.com.au/resources/chandlersalesdemo/tg/19/vertical-line.png');
  background-position: 50%;
  background-size: 1px;
  background-repeat: repeat-y;
  display: flex;
  justify-content: center;
}

.auth-vertical-line-hidden {
  min-height: 100%;
  min-width: 35px;
  display: flex;
  justify-content: center;
}

.auth-step-wrapper {
  display: flex;
  justify-content: flex-start;
}

.auth-icon-outer {
  width: 25px;
  height: 25px;
  border: 2px solid var(--cx-auth-icon-border-color);
  background-color: var(--cx-auth-icon-bg);
  border-radius: 50%;
}

.auth-icon {
  display: block;
  width: 35px;
  height: 35px;
  min-height: 35px;
  min-width: 35px;
}

.auth-step-content {
  width: 100%;
  padding-right: 10px;
  padding-bottom: 60px;
  padding-left: 20px;
}

.auth-step-content.nopad {
  padding-bottom: 0px;
}

.authentication-outer {
  margin-top: 20px;
}

@media screen and (max-width: 767px) {
  .login-form-wrapper {
    width: auto;
  }
}

@media screen and (max-width: 479px) {
  .login-form-wrapper {
    padding-top: 20px;
  }

  .auth-step-content {
    padding-bottom: 20px;
  }

  .auth-vertical-line {
    background-size: 1px;
    background-repeat: repeat-y;
    background-attachment: scroll;
  }

  .auth-vertical-line-hidden {
    background-size: 2px;
    background-repeat: repeat-y;
    background-attachment: scroll;
  }
}


/* =============================================================================
   20. CORE CSS OVERRIDES
   Overrides colour and font values from CSC_CORE_SM_CSS.css which still
   reference old brand colours (#20355a, #032d60) and Gilroy font.
============================================================================= */

/* Body background */
body {
  background-color: var(--cx-body-background-color) !important;
}

/* Header row */
.header .row {
  border-bottom: 1px solid var(--cx-border-color);
  background-color: var(--cx-color-white);
}

/* General text classes from CORE */
.semi-bold,
.card-sub-header,
.text-size-regular {
  color: var(--cx-primary-text-color);
  font-family: var(--cx-font-body);
}

/* Rollover section border */
.fund_rollover-type-section {
  border-top: 1px solid var(--cx-border-color);
}

/* Input placeholder */
.input_field::placeholder {
  color: var(--cx-border-color);
  font-family: var(--cx-font-body);
}

/* Status / Progress stepper from CORE */

.status_circle-outer {
  border: 2px solid var(--cx-primary-text-color);
  background-color: var(--cx-color-white);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.status_circle-outer.is-active {
  background-color: var(--cx-color-blue);
  border-color: var(--cx-color-blue);
}

.status_circle-outer.is-done {
  border-color: var(--cx-color-teal);
  background-color: var(--cx-color-teal);
  color: var(--cx-color-white);
}

.status_label {
  color: var(--cx-primary-text-color);
  font-family: var(--cx-font-body);
  padding-top: 10px;
  font-size: 14px;
  font-weight: 500;
}

.status_progress-line {
  background-color: var(--cx-border-color);
}

.progress-bar {
  background-color: var(--cx-color-blue);
  color: var(--cx-color-white);
}


/* =============================================================================
   21. CHANDLERVERIFY PLUGIN — FULL OVERRIDE
   This section contains the complete ChandlerVerify CSS rebased to CSC brand
   colours and tokens. It replaces ChandlerVerify.v2.0.min.css entirely for
   all colour, font, and component styling.

   Colour mapping from ChandlerVerify defaults → CSC brand:
   #2da1d6  (active blue)     → #00616b  Dark Teal
   #2ea426  (success green)   → #00616b  Dark Teal
   #7d7d7d  (inactive grey)   → #a1abb2  Steel Grey
   #f00     (error red)       → #f00     kept as error red (universal)
   #004085  (consent text)    → #00263b  Navy
   #cce5ff  (consent bg)      → #a5efed  Light Teal
   #b8daff  (consent border)  → #1dcece  Teal
   #1e73be  (modal links)     → #1dcece  Teal
   #495057  (dropdown text)   → #00263b  Navy
   #ced4da  (dropdown border) → #a1abb2  Steel Grey
============================================================================= */

/* --- General container --- */

.ChandlerVerify-container,
#surveyWrapper .ChandlerVerify-container {
  color: var(--cx-primary-text-color) !important;
  font-family: var(--cx-font-body) !important;
}

/* --- Headings --- */

.ChandlerVerify-container h1,
#surveyWrapper .ChandlerVerify-container h1 {
  color: var(--cx-primary-text-color) !important;
  font-family: var(--cx-font-heading) !important;
  font-size: var(--cx-h1-size-desktop) !important;
  font-weight: var(--cx-h1-weight) !important;
  margin-bottom: 55px !important;
  line-height: 1.2 !important;
}

.ChandlerVerify-container h2,
#surveyWrapper .ChandlerVerify-container h2 {
  color: var(--cx-primary-text-color) !important;
  font-family: var(--cx-font-heading) !important;
  font-weight: var(--cx-h2-weight);
}

.ChandlerVerify-container h3,
#surveyWrapper .ChandlerVerify-container h3 {
  color: var(--cx-primary-text-color) !important;
  font-family: var(--cx-font-heading) !important;
  font-weight: var(--cx-h3-weight);
}

/* --- Links --- */

.ChandlerVerify-container a,
#surveyWrapper .ChandlerVerify-container a {
  color: var(--cx-link-color) !important;
  cursor: pointer;
}

.ChandlerVerify-container a:hover,
#surveyWrapper .ChandlerVerify-container a:hover {
  color: var(--cx-link-color-hover) !important;
}

.ChandlerVerify-container a.link {
  text-decoration: underline;
  cursor: pointer;
}

.ChandlerVerify-container a[data-modal-message],
.ChandlerVerify-container a.terms {
  text-decoration: underline;
  color: #00263b !important;
}

/* Powered by ChandlerVerify footer link — keep their brand blue */
.ChandlerVerify-container .panelFooter a.blue,
.ChandlerVerify-container a.blue.font-weight-bold {
  color: #1e73be !important;
}

/* --- Address autocomplete dropdown --- */

.cv-psma {
  border: 1px solid var(--cx-border-color);
  position: absolute;
  width: calc(100% - 30px);
  z-index: 1050;
  background-color: var(--cx-color-white);
}

.cv-psma a {
  padding: .5em;
  width: 100%;
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  color: var(--cx-primary-text-color);
}

.cv-psma a:hover,
.cv-psma a.active,
.cv-psma a:focus,
.cv-psma a:active {
  background-color: var(--cx-color-cool-grey);
}

.ChandlerVerify-container .address-form .cv-psma-search {
  position: relative;
}

.ChandlerVerify-container .address-form .cv-psma {
  width: 100%;
}

@media (min-width: 992px) {
  .ChandlerVerify-container .address-form {
    max-width: 600px;
  }

  .ChandlerVerify-container.verify-address .ConsentPrompt {
    max-width: 600px;
  }

  .ChandlerVerify-container.verify-address .panelButtons {
    max-width: 600px;
  }
}

/* --- Progressbar --- */

.ChandlerVerify-container .progressbar {
  counter-reset: step;
  min-height: 75px;
  padding-left: 0;
}

.ChandlerVerify-container .progressbar li {
  list-style-type: none;
  width: 25%;
  float: left;
  font-size: 12px;
  position: relative;
  text-align: center;
  text-transform: uppercase;
  color: var(--cx-color-dark-teal) !important;
}

/* Default / inactive circle */
.ChandlerVerify-container .progressbar li:before {
  width: 30px;
  height: 30px;
  content: counter(step);
  counter-increment: step;
  line-height: 26px;
  border: 2px solid var(--cx-color-dark-teal) !important;
  display: block;
  text-align: center;
  margin: 0 auto 10px auto;
  border-radius: 50%;
  background-color: var(--cx-color-white) !important;
  color: var(--cx-color-dark-teal) !important;
}

/* Active circle — filled Dark Teal */
.ChandlerVerify-container .progressbar li.active {
  color: var(--cx-color-dark-teal) !important;
}

.ChandlerVerify-container .progressbar li.active:before {
  background-color: var(--cx-color-dark-teal) !important;
  border-color: var(--cx-color-dark-teal) !important;
  color: var(--cx-color-white) !important;
}

.ChandlerVerify-container .progressbar li.active > span {
  border-bottom: 2px solid;
  padding-bottom: 3px;
  display: inline-block;
}

/* Completed circle — filled Dark Teal */
.ChandlerVerify-container .progressbar li.completed {
  color: var(--cx-color-dark-teal) !important;
}

.ChandlerVerify-container .progressbar li.completed:before {
  background-color: var(--cx-color-dark-teal) !important;
  border-color: var(--cx-color-dark-teal) !important;
  color: var(--cx-color-white) !important;
}

/* Connector line — Navy */
.ChandlerVerify-container .progressbar li:first-child:after {
  content: none;
}

.ChandlerVerify-container .progressbar li:after {
  width: calc(100% - 50px);
  height: 2px;
  content: '';
  position: absolute;
  background-color: var(--cx-primary-text-color) !important;
  top: 15px;
  left: calc(-50% + 25px);
  z-index: 50;
}

.ChandlerVerify-container .progressbar li.active:after,
.ChandlerVerify-container .progressbar li.completed:after {
  background-color: var(--cx-primary-text-color) !important;
}

/* --- Consent prompt --- */

.ChandlerVerify-container .ConsentPrompt {
  padding: 20px 20px 20px 60px !important;
  margin-top: 1rem;
  color: var(--cx-primary-text-color);
  background-color: var(--cx-color-light-teal);
  border-color: var(--cx-color-teal);
  border: 1px solid var(--cx-color-teal);
  border-radius: .25rem;
}

@media (min-width: 1200px) {
  .ChandlerVerify-container .ConsentPrompt {
    margin-right: 60px;
    padding: 24px 24px 24px 60px !important;
  }
}

@media (max-width: 1199px) {
  .ChandlerVerify-container .ConsentPrompt {
    padding: 20px 20px 20px 60px !important;
  }
}

@media (max-width: 767px) {
  .ChandlerVerify-container .ConsentPrompt {
    padding: 16px 16px 16px 56px !important;
  }
}

@media (max-width: 479px) {
  .ChandlerVerify-container .ConsentPrompt {
    padding: 14px 14px 14px 50px !important;
  }
}

.ChandlerVerify-container .ConsentPrompt p:last-of-type {
  margin-bottom: 0;
}

.ChandlerVerify-container .ConsentPrompt p:first-of-type {
  margin-top: 0;
}

/* --- Form inputs --- */

/* Input focus — match Supermatch form style (single outline, no double border) */
.ChandlerVerify-container .form-control:focus,
.ChandlerVerify-container .verify-input input:focus,
.ChandlerVerify-container .verify-input select:focus {
  outline-color: var(--cx-input-border-color-focus) !important;
  outline-offset: var(--cx-input-outline-offset-focus) !important;
  outline-style: solid !important;
  outline-width: var(--cx-input-outline-width-focus) !important;
  border-color: var(--cx-input-border-color) !important;
  box-shadow: none !important;
}

.ChandlerVerify-container .verify-input,
.ChandlerVerify-container .form-group {
  margin-bottom: .5rem;
}

.ChandlerVerify-container .verify-input label {
  margin-bottom: .1rem;
}

.ChandlerVerify-container .verify-input.invalid input,
.ChandlerVerify-container .verify-input.invalid select {
  border-color: #f00;
}

.ChandlerVerify-container .verify-input.invalid input[type=checkbox] {
  outline: 1px solid #f00;
}

.ChandlerVerify-container .validation-label {
  font-size: 12px;
  margin: 0;
  color: #f00;
  min-height: 18px;
  display: block;
}

.ChandlerVerify-container .form-check-input {
  height: 24px;
  width: 24px;
  min-height: 24px;
  min-width: 24px;
  margin-left: -2.2em !important;
  border-width: 2px;
  border-color: var(--cx-checkbox-border-color);
  border-radius: var(--cx-checkbox-radius);
}

.ChandlerVerify-container .form-check-input:checked {
  background-color: var(--cx-checkbox-bg-checked);
  border-color: var(--cx-checkbox-border-checked-color);
}

.ChandlerVerify-container .form-check {
  padding-left: 2.2em !important;
}

/* ConsentPrompt — override the entire box to use flex layout
   so checkbox and text sit cleanly side by side with even padding */
.ChandlerVerify-container .ConsentPrompt {
  display: flex !important;
  align-items: flex-start !important;
  gap: 16px !important;
  padding: 20px !important;
}

.ChandlerVerify-container .ConsentPrompt .verify-input.form-group,
.ChandlerVerify-container .ConsentPrompt form {
  display: contents !important;
}

.ChandlerVerify-container .ConsentPrompt .form-check {
  display: contents !important;
  padding: 0 !important;
  margin: 0 !important;
}

.ChandlerVerify-container .ConsentPrompt .form-check-input {
  flex-shrink: 0 !important;
  float: none !important;
  margin: 2px 0 0 0 !important;
  position: static !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
}

.ChandlerVerify-container .ConsentPrompt .form-check-label {
  flex: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

/* Date fields */
.ChandlerVerify-container .verify-input[data-type=datetime] .date-day {
  display: inline-block;
  max-width: 50px;
  margin-right: 5px;
  padding-left: 10px;
}

.ChandlerVerify-container .verify-input[data-type=datetime] .date-month {
  display: inline-block;
  max-width: 50px;
  margin-right: 5px;
  margin-left: 5px;
  padding-left: 10px;
}

.ChandlerVerify-container .verify-input[data-type=datetime] .date-year {
  display: inline-block;
  max-width: 90px;
  margin-left: 5px;
  padding-left: 10px;
}

@media (min-width: 768px) {
  .ChandlerVerify-container .verify-input[data-type=datetime] .date-day {
    max-width: 80px;
    margin-right: 10px;
    padding-left: 20px;
  }

  .ChandlerVerify-container .verify-input[data-type=datetime] .date-month {
    max-width: 80px;
    margin-right: 10px;
    margin-left: 10px;
    padding-left: 20px;
  }

  .ChandlerVerify-container .verify-input[data-type=datetime] .date-year {
    max-width: 130px;
    margin-left: 10px;
    padding-left: 20px;
  }
}

/* --- Results --- */

.ChandlerVerify-container .results.results-success h3 {
  color: var(--cx-color-dark-teal);
}

.ChandlerVerify-container .results.results-error h3 {
  color: #f00;
}

.ChandlerVerify-container .results ul {
  list-style-type: none;
  padding-left: 5px;
}

.ChandlerVerify-container .results li:before {
  font-size: 20px;
  line-height: 20px;
  font-weight: bold;
  margin-right: 8px;
}

.ChandlerVerify-container .results-error li::before {
  color: #f00;
  content: "✘";
}

.ChandlerVerify-container .results-success li::before {
  color: var(--cx-color-dark-teal);
  content: "✓";
}

.ChandlerVerify-container .results:not(:first-of-type) {
  border-top: 1px solid var(--cx-border-color);
}

.ChandlerVerify-container .results {
  padding-top: 10px;
  padding-bottom: 5px;
}

.ChandlerVerify-container p.success-tick::before {
  color: var(--cx-color-dark-teal);
  content: "✓";
  margin-right: 8px;
}

.ChandlerVerify-container p.fail-tick::before {
  color: #f00;
  content: "✘";
  margin-right: 8px;
}

.ChandlerVerify-container ul.verificationresults {
  margin-left: 2rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

/* --- Status colours --- */

.ChandlerVerify-container .green {
  color: var(--cx-color-dark-teal);
}

.ChandlerVerify-container .red {
  color: #f00;
}

/* --- Modal --- */

.ChandlerVerify-container .panelModal {
  display: none;
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, .6);
}

.ChandlerVerify-container .modal-content-wrapper {
  background-color: var(--cx-color-white);
  margin: 120px auto;
  padding: 20px;
  padding-top: 30px;
  border: 1px solid var(--cx-border-color);
  width: 95%;
  max-width: 500px;
}

@media (min-width: 992px) {
  .ChandlerVerify-container .modal-content-wrapper {
    margin: 15% auto;
    width: 80%;
  }
}

.ChandlerVerify-container .modal-cont ul {
  margin: 20px;
}

.ChandlerVerify-container span.close,
.ChandlerVerify-container span.close-button {
  color: var(--cx-color-steel-grey);
  float: right;
  font-size: 28px;
  line-height: 14px;
  font-weight: bold;
  cursor: pointer;
}

.ChandlerVerify-container span.close:hover,
.ChandlerVerify-container span.close:focus,
.ChandlerVerify-container span.close-button:hover {
  color: var(--cx-primary-text-color);
  text-decoration: none;
  cursor: pointer;
}

.ChandlerVerify-container .panelModal .close-buttons {
  text-align: right;
  margin-top: 30px;
}

/* --- Timed progress bar --- */

.timed-submission-progress-bar-wrapper .timed-progress-bar {
  width: 100%;
}

.timed-submission-progress-bar-wrapper .progress {
  width: 100%;
  background-color: var(--cx-color-cool-grey);
  margin-top: 20px;
  margin-bottom: 20px;
  height: 10px;
}

.timed-submission-progress-bar-wrapper .progress-bar {
  width: 0%;
  height: 10px;
  background-color: var(--cx-color-dark-teal);
  text-align: center;
  color: var(--cx-color-white);
}

/* --- OCR results --- */

.ChandlerVerify-container .ocr-results table td.strong {
  font-weight: bold;
  padding-right: 15px;
}

.ChandlerVerify-container .ocr-results a.btn {
  margin-right: 15px;
  margin-top: 15px;
}

/* --- Output images --- */

.ChandlerVerify-container .output {
  margin-top: 15px;
}

.ChandlerVerify-container a.view-image {
  display: block;
  margin-top: 10px;
  text-decoration: underline;
}

.ChandlerVerify-container .output img {
  max-width: 100%;
  height: auto;
  margin-bottom: 10px;
}

/* --- Preview image --- */

.ChandlerVerify-container .preview-image {
  display: none;
}

@media (min-width: 992px) {
  .ChandlerVerify-container .preview-image {
    display: block;
    margin-top: 5px;
    text-align: center;
  }

  .ChandlerVerify-container .preview-image img {
    display: block;
    width: auto;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 15px;
  }
}

/* --- Animations --- */

.ChandlerVerify-container .fade-out-image {
  animation: chandlerVerifyFadeOut 1s;
  opacity: 0;
}

@keyframes chandlerVerifyFadeOut {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

/* --- Camera overlay --- */

.ChandlerVerify-container .camera-overlay {
  background-color: #000;
  z-index: 1000;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  color: #eee;
}

.ChandlerVerify-container .camera-overlay select {
  margin-top: 40px;
  min-width: 250px;
  text-align: center;
}

.ChandlerVerify-container .camera-overlay .close-camera-overlay {
  position: absolute;
  top: 10px;
  right: 30px;
  bottom: auto;
  left: auto;
  height: 30px;
  width: 30px;
  font-size: 35px;
  line-height: 30px;
  z-index: 1002;
}

.ChandlerVerify-container .camera-overlay .close-camera-overlay a {
  color: #eee;
}

.ChandlerVerify-container .camera-overlay a.close-link {
  cursor: pointer;
}

.ChandlerVerify-container .camera-permission {
  margin-top: 100px;
}

.ChandlerVerify-container .camera-selector {
  z-index: 1001;
  background-color: rgba(0, 0, 0, .7);
  width: 100%;
  text-align: center;
  height: 60px;
}

.ChandlerVerify-container .camera-selector a,
.ChandlerVerify-container .camera-selector select {
  margin-left: auto;
  margin-right: auto;
}

.ChandlerVerify-container .camera-take {
  z-index: 100;
  padding-bottom: 10px;
  padding-top: 10px;
  width: 100%;
  height: 80px;
}

.ChandlerVerify-container .camera-take a {
  border-color: var(--cx-color-dark-teal);
  border-style: solid;
  background-color: var(--cx-color-cool-grey);
  height: 60px;
  width: 60px;
  border-radius: 30px;
  font-size: 24px;
  cursor: pointer;
  border-width: 4px;
  display: flex;
  margin-left: auto;
  margin-right: auto;
  align-items: center;
  justify-content: space-around;
}

.ChandlerVerify-container .camera-take a .icon {
  margin-right: 0;
}

.ChandlerVerify-container .camera-switch {
  color: var(--cx-color-white);
  width: 40px;
  font-size: 35px;
  cursor: pointer;
  margin-top: 10px;
  display: flex;
}

.ChandlerVerify-container .camera-switch .icon {
  fill: #eee;
}

.ChandlerVerify-container .camera-menu {
  background-color: var(--cx-color-cool-grey);
  color: var(--cx-primary-text-color);
  padding: 5px 10px;
  border-radius: 10px;
  margin-top: 10px;
  display: inline-block;
  position: relative;
}

.ChandlerVerify-container a.camera-menu-button {
  display: block;
  cursor: pointer;
  padding: 8px 10px;
  border-bottom: 1px solid var(--cx-border-color);
}

.ChandlerVerify-container a.camera-menu-button:last-of-type {
  border-bottom: 0;
}

.ChandlerVerify-container .camera-menu::before {
  content: "";
  position: absolute;
  top: -25px;
  left: 50%;
  margin-left: -14px;
  border-width: 16px;
  border-style: solid;
  border-color: transparent transparent var(--cx-color-cool-grey) transparent;
}

.ChandlerVerify-container .camera-border {
  position: fixed;
  box-shadow: 0 0 100px 100px rgba(0, 0, 0, .8);
  top: 10px;
  right: 10px;
  left: 10px;
  bottom: 10px;
}

.ChandlerVerify-container .camera-border > div:not(.camera-instructions) {
  height: 30px;
  width: 30px;
  border-color: var(--cx-color-white);
  border-style: solid;
  position: absolute;
}

.ChandlerVerify-container .camera-border .camera-instructions {
  position: relative;
  margin-top: -30px;
  margin-left: -15px;
  margin-right: -15px;
  text-align: center;
  font-size: .9rem;
}

.ChandlerVerify-container .camera-border .top-left {
  border-top-width: 2px;
  border-bottom-width: 0;
  border-left-width: 2px;
  border-right-width: 0;
  top: 0;
  left: 0;
}

.ChandlerVerify-container .camera-border .top-right {
  border-top-width: 2px;
  border-bottom-width: 0;
  border-left-width: 0;
  border-right-width: 2px;
  top: 0;
  right: 0;
}

.ChandlerVerify-container .camera-border .bottom-left {
  border-top-width: 0;
  border-bottom-width: 2px;
  border-left-width: 2px;
  border-right-width: 0;
  bottom: 0;
  left: 0;
}

.ChandlerVerify-container .camera-border .bottom-right {
  border-top-width: 0;
  border-bottom-width: 2px;
  border-left-width: 0;
  border-right-width: 2px;
  bottom: 0;
  right: 0;
}

.ChandlerVerify-container .camera-border .camera-instructions.center {
  position: fixed;
  top: 50%;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 24px;
  margin-left: 0;
  margin-right: 0;
  padding: 10px;
}

.ChandlerVerify-container .camera-border .camera-instructions.center .timer {
  margin-top: 5px;
}

.ChandlerVerify-container #camera-view.inverted {
  transform: scaleX(-1);
  filter: FlipH;
}

.ChandlerVerify-container #camera-canvas,
.ChandlerVerify-container #camera-view {
  position: fixed;
  height: 100%;
  left: 0;
  right: 0;
  width: 100%;
  object-fit: contain;
}

@media (orientation: landscape) and (max-width: 992px) {
  .ChandlerVerify-container .camera-selector {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 60px;
    display: flex;
    align-items: center;
  }

  .ChandlerVerify-container .camera-overlay .close-camera-overlay {
    left: 15px;
    right: auto;
  }

  .ChandlerVerify-container .camera-take {
    position: absolute;
    right: 15px;
    height: 100%;
    width: 60px;
    top: calc(50% - 30px);
  }

  .ChandlerVerify-container .camera-menu::before {
    position: absolute;
    top: calc(50% - 13px);
    left: 0;
    margin-left: -26px;
    border-color: transparent var(--cx-color-cool-grey) transparent transparent;
  }

  .ChandlerVerify-container .camera-menu {
    margin-left: 15px;
  }

  .ChandlerVerify-container .camera-menu a {
    min-width: 300px;
  }
}

/* --- Buttons — override ChandlerVerify hardcoded values --- */

.ChandlerVerify-container .panelButtons .btn,
.ChandlerVerify-container .btn.btn-primary,
.ChandlerVerify-container .btn.btn-outline,
.ChandlerVerify-container .btn.btn-secondary {
  padding: var(--cx-button-padding) !important;
  min-width: var(--cx-button-min-width-desktop) !important;
  border-radius: var(--cx-button-border-radius) !important;
  font-size: var(--cx-button-font-size) !important;
  font-weight: var(--cx-button-font-weight) !important;
  font-family: var(--cx-font-buttons) !important;
}

/* Skip/back buttons — secondary style */
.ChandlerVerify-container .btn.btn-outline-primary.d-none.btn-skip,
.ChandlerVerify-container .btn.btn-secondary.btn-previous {
  background-color: var(--cx-button-secondary-bg) !important;
  color: var(--cx-button-secondary-text) !important;
  border-color: var(--cx-button-secondary-border) !important;
}

.ChandlerVerify-container .btn.btn-outline-primary.d-none.btn-skip:hover,
.ChandlerVerify-container .btn.btn-secondary.btn-previous:hover {
  background-color: var(--cx-button-secondary-hover-bg) !important;
  border-color: var(--cx-button-secondary-hover-border) !important;
}

@media screen and (max-width: 1199px) {
  .ChandlerVerify-container .panelButtons .btn,
  .ChandlerVerify-container .btn.btn-primary,
  .ChandlerVerify-container .btn.btn-outline {
    min-width: var(--cx-button-min-width-tablet) !important;
  }
}

@media screen and (max-width: 767px) {
  .ChandlerVerify-container .panelButtons .btn,
  .ChandlerVerify-container .btn.btn-primary,
  .ChandlerVerify-container .btn.btn-outline {
    min-width: var(--cx-button-min-width-mobile) !important;
  }
}

/* --- Form inline misc --- */

.ChandlerVerify-container .form-check-inline {
  margin-bottom: 1rem;
}


/* =============================================================================
   22. UTILITIES
============================================================================= */

.hidden {
  display: none !important;
}

.a {
  color: var(--cx-link-color);
  font-weight: 600;
}

.search-rollover-options-section {
  gap: 1em;
  padding-top: 20px;
}

.rollover-options-buttons {
  gap: 1em;
}

.flex_inline-field {
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.flex_button-group {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  display: flex;
}

.form-block {
  margin-bottom: 0;
}

.partial-amount-warning-message {
  color: orange;
  padding-left: 1em;
}