/* *
 * Theming can be defined per brand, each brand has its own theme directory (`src/style/themes/**`) that holds the
 * variable overwrites and the custom scss required for that specific theme.
 **/
:root {
  --default-primary-100: #afc4fc;
  --default-primary-300: #7397fd;
  --default-primary-500: #1347d4;
  --default-primary-700: #0430a9;
  --default-primary-900: #021b5f;
  --theme-background: #fafafa;
  --default-neutral-non-invertible-alpha-light-300: rgba(255, 255, 255, 0.1490196078);
  --default-invertible-primary-100: #afc4fc;
  --default-invertible-primary-300: #7397fd;
  --default-invertible-primary-500: #1347d4;
  --default-invertible-primary-700: #0430a9;
  --default-invertible-primary-900: #021b5f;
  --default-neutral-non-invertible-alpha-grey-100: rgba(158, 158, 158, 0.0784313725);
  --default-neutral-non-invertible-alpha-grey-300: #9e9e9e26;
  --default-neutral-non-invertible-alpha-grey-500: rgba(158, 158, 158, 0.2980392157);
  --default-neutral-non-invertible-alpha-grey-700: rgba(158, 158, 158, 0.4);
  --default-neutral-non-invertible-alpha-grey-900: #9e9e9e;
  --default-neutral-invertible-alpha-dark-100: rgba(10, 10, 10, 0.0784313725);
  --default-neutral-invertible-alpha-dark-300: rgba(10, 10, 10, 0.1490196078);
  --default-neutral-invertible-alpha-dark-500: rgba(10, 10, 10, 0.2980392157);
  --default-neutral-invertible-alpha-dark-700: rgba(10, 10, 10, 0.4);
  --default-neutral-invertible-alpha-dark-900: #0a0a0a;
  --default-neutral-invertible-alpha-light-100: rgba(255, 255, 255, 0.0784313725);
  --default-neutral-invertible-alpha-light-300: rgba(255, 255, 255, 0.1490196078);
  --default-neutral-invertible-alpha-light-500: rgba(255, 255, 255, 0.2980392157);
  --default-neutral-invertible-alpha-light-700: rgba(255, 255, 255, 0.4);
  --default-neutral-invertible-alpha-light-900: #ffffff;
  --default-neutral-invertible-opaque-100: #f6f6f6;
  --default-neutral-invertible-opaque-200: #ebebeb;
  --default-neutral-invertible-opaque-300: #d8d8d8;
  --default-neutral-invertible-opaque-400: #bdbdbd;
  --default-neutral-invertible-opaque-50: #fafafa;
  --default-neutral-invertible-opaque-500: #9e9e9e;
  --default-neutral-invertible-opaque-600: #757575;
  --default-neutral-invertible-opaque-700: #616161;
  --default-neutral-invertible-opaque-800: #424242;
  --default-neutral-invertible-opaque-900: #121212;
  --default-neutral-invertible-opaque-black: #0a0a0a;
  --default-neutral-invertible-opaque-white: #ffffff;
  --color-default-non-invertible-opaque-300: #d8d8d8;
  --color-default-non-invertible-opaque-700: #616161;
  --color-default-non-invertible-opaque-900: #121212;
  --color-default-non-invertible-opaque-black: #ffffff;
  --color-default-non-invertible-opaque-white: #ffffff;
  /* Inverse Variables */
  --color-icon-default-inverse: #fafafa;
  --color-icon-subdued-inverse: #ebebeb;
  --color-icon-disabled-inverse: #9e9e9e;
  --color-icon-on-primary-inverse: #0a0a0a;
  --color-icon-info-inverse: #aac3e7;
  --color-icon-positive-inverse: #addbad;
  --color-icon-warning-inverse: #fbdd82;
  --color-icon-critical-inverse: #e88089;
  --color-icon-accent-primary-inverse: #1347d4;
  --color-icon-accent-primary-dark-inverse: #0430a9;
  --color-icon-accent-secondary-dark-inverse: #1e6fb5;
  --color-icon-on-surface-inverse: #121212;
  --color-icon-on-brand-inverse: #ffffff;
  --color-icon-label-sale-inverse: #460006;
  --color-icon-label-new-inverse: #1c2d45;
  --color-icon-progress-stepper-inverse: #ffffff;
  --color-interactive-primary-default-inverse: #ffffff;
  --color-interactive-primary-hovered-inverse: #ebebeb;
  --color-interactive-primary-pressed-inverse: #ffffff;
  --color-interactive-secondary-default-inverse: #fafafa;
  --color-interactive-secondary-hovered-inverse: #ebebeb;
  --color-interactive-secondary-pressed-inverse: #9e9e9e;
  --color-interactive-teritiary-default-inverse: #fafafa;
  --color-interactive-teritiary-hovered-inverse: #ebebeb;
  --color-interactive-teritiary-pressed-inverse: #9e9e9e;
  --color-interactive-action-default-inverse: rgba(158, 158, 158, 0.0784313725);
  --color-interactive-action-hovered-inverse: rgba(158, 158, 158, 0.1490196078);
  --color-interactive-action-pressed-inverse: rgba(158, 158, 158, 0.3019607843);
  --color-interactive-focus-default-inverse: #fafafa;
  --color-interactive-overlay-light-inverse: rgba(255, 255, 255, 0.3019607843);
  --color-stroke-default-inverse: #757575;
  --color-stroke-subdued-inverse: #616161;
  --color-stroke-strong-inverse: #fafafa;
  --color-stroke-disabled-inverse: #757575;
  --color-stroke-info-inverse: #5587d0;
  --color-stroke-positive-inverse: #5cb85c;
  --color-stroke-warning-inverse: #f8bc06;
  --color-stroke-critical-inverse: #e00016;
  --color-stroke-accent-brand-primary-inverse: #1347d4;
  --color-stroke-accent-brand-secondary-inverse: #3cbcfc;
  --color-stroke-alpha-inverse: rgba(255, 255, 255, 0.1490196078);
  --color-surface-neutral-option1-inverse: #0a0a0a;
  --color-surface-neutral-option2-inverse: #424242;
  --color-surface-neutral-option3-inverse: #616161;
  --color-surface-neutral-option4-inverse: #757575;
  --color-surface-active-inverse: #424242;
  --color-surface-disabled-inverse: #424242;
  --color-surface-info-inverse: #1c2d45;
  --color-surface-positive-inverse: #1f3d1f;
  --color-surface-warning-inverse: #533f02;
  --color-surface-critical-inverse: #460006;
  --color-surface-accent-primary-inverse: #1347d4;
  --color-surface-accent2-inverse: #afc4fc;
  --color-surface-accent3-inverse: #d8fbfe;
  --color-surface-accent4-inverse: #0b3878;
  --color-surface-accent5-inverse: #ffffff;
  --color-surface-progress-stepper-inverse: #1347d4;
  --color-surface-card-select-bg-inverse: #ffffff;
  --color-text-functional-inverse: #ffffff;
  --color-text-functional-subtle-inverse: #ebebeb;
  --color-text-title-inverse: #ffffff;
  --color-text-body-inverse: #ebebeb;
  --color-text-placeholder-inverse: #ebebeb;
  --color-text-disabled-inverse: #bdbdbd;
  --color-text-on-primary-inverse: #ffffff;
  --color-text-info-inverse: #aac3e7;
  --color-text-positive-inverse: #addbad;
  --color-text-warning-inverse: #fef2cd;
  --color-text-critical-inverse: #e88089;
  --color-text-accent-primary-inverse: #1347d4;
  --color-text-on-brand-inverse: #ffffff;
  --color-textlabel-sale-inverse: #e88089;
  --color-textlabel-new-inverse: #aac3e7;
  --color-icon-accordion-inverse: #fafafa;
  --color-interactive-overlay-dark-inverse: rgba(10, 10, 10, 0.4);
  --color-stroke-light-inverse: #0a0a0a;
  --color-surface-notification-inverse: #3cbcfc;
  --color-textprogress-stepper-inverse: #ffffff;
  /* Other Variables */
  --color-icon-default: #121212;
  --color-icon-subdued: #616161;
  --color-icon-disabled: #bdbdbd;
  --color-icon-on-primary: #ffffff;
  --color-icon-info: #395a8b;
  --color-icon-positive: #3d7b3d;
  --color-icon-warning: #a57d04;
  --color-icon-critical: #8b000d;
  --color-icon-accent-primary: #1347d4;
  --color-icon-accent-primary-dark: #0430a9;
  --color-icon-accent-secondary-dark: #1e6fb5;
  --color-icon-on-surface: #121212;
  --color-icon-on-brand: #ffffff;
  --color-icon-label-sale: #fdf2f3;
  --color-icon-label-new: #dde7f6;
  --color-icon-progress-stepper: #ffffff;
  --color-interactive-primary-default: #021b5f;
  --color-interactive-primary-hovered: #0430a9;
  --color-interactive-primary-pressed: #021b5f;
  --color-interactive-secondary-default: #121212;
  --color-interactive-secondary-hovered: #616161;
  --color-interactive-secondary-pressed: #bdbdbd;
  --color-interactive-teritiary-default: #121212;
  --color-interactive-teritiary-hovered: #616161;
  --color-interactive-teritiary-pressed: #bdbdbd;
  --color-interactive-action-default: rgba(158, 158, 158, 0.0784313725);
  --color-interactive-action-hovered: #9e9e9e26;
  --color-interactive-action-pressed: rgba(158, 158, 158, 0.2980392157);
  --color-interactive-focus-default: #121212;
  --color-interactive-overlay-light: rgba(10, 10, 10, 0.2980392157);
  --color-stroke-default: #d8d8d8;
  --color-stroke-subdued: #ebebeb;
  --color-stroke-strong: #121212;
  --color-stroke-disabled: #d8d8d8;
  --color-stroke-info: #5587d0;
  --color-stroke-positive: #5cb85c;
  --color-stroke-warning: #f8bc06;
  --color-stroke-critical: #e00016;
  --color-stroke-accent-brand-primary: #1347d4;
  --color-stroke-accent-brand-secondary: #3cbcfc;
  --color-stroke-alpha: rgba(255, 255, 255, 0.1490196078);
  --color-surface-neutral-option1: #ffffff;
  --color-surface-neutral-option2: #f6f6f6;
  --color-surface-neutral-option3: #ebebeb;
  --color-surface-neutral-option4: #d8d8d8;
  --color-surface-active: #f6f6f6;
  --color-surface-disabled: #f6f6f6;
  --color-surface-info: #dde7f6;
  --color-surface-positive: #e6f4e6;
  --color-surface-warning: #fff5d5;
  --color-surface-critical: #fdf2f3;
  --color-surface-accent-primary: #1347d4;
  --color-surface-accent2: #afc4fc;
  --color-surface-accent3: #d8fbfe;
  --color-surface-accent4: #d7fed5;
  --color-surface-accent5: #1347d4;
  --color-surface-progress-stepper: #1347d4;
  --color-surface-card-select-bg: #ffffff;
  --color-text-functional: #0a0a0a;
  --color-text-functional-subtle: #0a0a0a;
  --color-text-title: #0a0a0a;
  --color-text-body: #616161;
  --color-text-placeholder: #616161;
  --color-text-disabled: #9e9e9e;
  --color-text-on-primary: #ffffff;
  --color-text-info: #395a8b;
  --color-text-positive: #3d7b3d;
  --color-text-warning: #533f02;
  --color-text-critical: #8b000d;
  --color-text-accent-primary: #1347d4;
  --color-text-on-brand: #ffffff;
  --color-textlabel-sale: #8b000d;
  --color-textlabel-new: #395a8b;
  --color-icon-accordion: #121212;
  --color-interactive-overlay-dark: rgba(255, 255, 255, 0.4);
  --color-stroke-light: #ffffff;
  --color-surface-notification: #3cbcfc;
  --color-text-progress-stepper: #ffffff;
  --color-status-info-100: #dde7f6;
  --color-status-info-300: #aac3e7;
  --color-status-info-500: #5587d0;
  --color-status-info-700: #395a8b;
  --color-status-info-900: #1c2d45;
  --color-status-positive-100: #e6f4e6;
  --color-status-positive-300: #addbad;
  --color-status-positive-500: #5cb85c;
  --color-status-positive-700: #3d7b3d;
  --color-status-positive-900: #1f3d1f;
  --color-status-warning-100: #fff5d5;
  --color-status-warning-300: #fbdd82;
  --color-status-warning-500: #f8bc06;
  --color-status-warning-700: #a57d04;
  --color-status-warning-900: #533f02;
  --color-status-critical-100: #fdf2f3;
  --color-status-critical-300: #e88089;
  --color-status-critical-500: #e00016;
  --color-status-critical-700: #8b000d;
  --color-status-critical-900: #460006;
  --color-ecommerce-orange: #f47920;
  --color-ecommerce-yellow: #f4ad20;
  --color-campaign-simply-refresh-trim: #012169;
  --color-campaign-brilliant-white: #e1e1e1;
  --color-campaign-more-m2: #3badd0;
  --color-campaign-easycare: #ed810b;
  --color-campaign-easycare-blue-bathroom: #019eda;
  --color-campaign-easycare-green-kitchen: #69b43e;
  --color-campaign-easycare-turquoise-kitchen-bathroom: #1bb4bb;
  --color-campaign-ambiance: #5d237c;
  --color-campaign-weathershield-1: #94cef2;
  --color-campaign-weathershield-2: #d8b884;
  --color-campaign-weathershield-trim: #e03c31;
  --color-campaign-air-clean: #90c7dd;
  --color-campaign-air-clean-biobased: #74b3b1;
  --color-campaign-tranquil-dawn-coty20: #bdc3b9;
  --color-campaign-brave-ground-coty21: #9d8e7e;
  --color-campaign-new-hero-text: #ffffff;
  --color-default-secondary-1-100: #d8fbfe;
  --color-default-secondary-1-300: #89e6fe;
  --color-default-secondary-1-500: #3cbcfc;
  --color-secondary-1-700: #1e6fb5;
  --color-default-secondary-1-900: #0b3878;
  --color-default-secondary-2-100: #d7fed5;
  --color-default-secondary-2-300: #83fa97;
  --color-default-secondary-2-500: #32f177;
  --color-default-secondary-2-700: #19ad6c;
  --color-default-secondary-2-900: #097359;
  --color-white: #ffffff;
  --color-black: #0a0a0a;
  --color-neutral-50: #fafafa;
  --color-neutral-100: #f5f5f5;
  --color-neutral-200: #ebebeb;
  --color-neutral-300: #d8d8d8;
  --color-neutral-400: #bdbdbd;
  --color-neutral-500: #9e9e9e;
  --color-neutral-600: #757575;
  --color-neutral-700: #616161;
  --color-neutral-800: #424242;
  --color-neutral-900: #121212;
  --grid-columns: 12;
  --grid-columns-mobile: 6;
  --max-width: 75rem;
  --base-font: Open Sans;
  --brand-font: Open Sans;
  --typography-font-family-body: var(--base-font);
  --typography-font-family-heading: var(--brand-font);
  --typography-font-family-action: var(--brand-font);
  --font-family-body: var(--base-font);
  --spacing-none: 0rem;
  --spacing-3xl: 3.5rem;
  --spacing-4xl: 4rem;
  --spacing-4xl: 4rem;
  --spacing-5xl: 5rem;
  --spacing-5xl: 5rem;
  --spacing-6xl: 7.5rem;
  --spacing-6xl: 7.5rem;
  --spacing-xxxs: 0.125rem;
  --spacing-xxs: 0.25rem;
  --spacing-xs: 0.5rem;
  --spacing-s: 0.75rem;
  --spacing-sm: 0.75rem;
  --spacing-m: 1rem;
  --spacing-md: 1rem;
  --spacing-l: 1.5rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-xl: 2rem;
  --spacing-xxl: 3rem;
  --spacing-2xl: 3rem;
  --spacing-xxxl: 3.5rem;
  --size-xs: 1rem;
  --size-s: 1.5rem;
  --size-m: 2rem;
  --size-l: 2.5rem;
  --size-xl: 3rem;
  --size-xxl: 3.5rem;
  --size-button-badge: var(--spacing-m);
  --stroke-none: 0rem;
  --stroke-xs: 1rem;
  --stroke-s: 1.5rem;
  --stroke-m: 2rem;
  --stroke-l: 2.5rem;
  --stroke-xl: 3rem;
  --stroke-xxl: 3.5rem;
  --stroke-button-hover-border: 0rem;
  --stroke-button-focus-border: 0rem;
  --radius-none: 0rem;
  --radius-xs: 0.125rem;
  --radius-s: 0.25rem;
  --radius-m: 0.375rem;
  --radius-l: 0.5rem;
  --radius-xl: 0.625rem;
  --radius-xxl: 0.75rem;
  --radius-pill: 6250rem;
  --radius-cards-corner-radius: var(--radius-xl);
  --radius-landing-hero-corner-radius-s: var(--radius-xl);
  --radius-landing-hero-corner-radius-l: var(--radius-xl);
  --radius-landing-hero-corner-radius-m: var(--radius-xl);
  --radius-compare-card-corner-radius: var(--radius-xl);
  --radius-button-border-radius: 6250rem;
  --letter-spacing-none: 0rem;
  --letter-spacing-100: 0.0625rem;
  --paragraph-spacing-none: 0rem;
  --paragraph-spacing-100: 0.25rem;
  --paragraph-spacing-200: 0.5rem;
  --paragraph-spacing-300: 0.75rem;
  --paragraph-spacing-400: 1rem;
  --background-gradient:var(--color-surface-neutral-option1);
  --icon-radius:50%;
  --icon-button-radius: 6250rem;
  --motion-duration-fast-01: 70ms;
  --motion-duration-fast-02: 110ms;
  --motion-duration-medium-01: 160ms;
  --motion-duration-medium-02: 320ms;
  --motion-duration-slow-01: 500ms;
  --motion-duration-slow-02: 700ms;
  --motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);
  --motion-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);
  --motion-easing-expressive: cubic-bezier(0.2, 0, 0, 1);
  --motion-easing-expressive-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --motion-easing-expressive-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
}

/**
 * Calculates the relative luminance of a given color.
 *
 * The luminance is computed based on the linear RGB values of the color,
 * using the formula:
 *   Luminance = 0.2126 * Red + 0.7152 * Green + 0.0722 * Blue
 *
 * The function uses a precomputed list of linear channel values to
 * approximate the linear RGB values for the red, green, and blue channels
 * of the input color.
 *
 * @param {color} $color - The color for which to calculate the luminance.
 *                         The color should be in the RGB color space.
 * @return {number} - The calculated relative luminance of the color.
 */
/**
 * Calculates the contrast ratio between two colors based on their luminance values.
 *
 * The contrast ratio is calculated using the formula defined by the WCAG (Web Content Accessibility Guidelines).
 * A higher contrast ratio indicates better readability between the foreground and background colors.
 *
 * @param {Color} $fg - The foreground color.
 * @param {Color} $bg - The background color.
 * @return {Number} - The contrast ratio rounded to two decimal places. A value of 1 indicates no contrast,
 *                    while a value of 21 indicates the highest contrast.
 */
/**
 * Respond To (Breakpoint)
 *
 * @param {string} $name - Name of the breakpoint used in $breakpoints
 */
/**
 * Font Face
 *
 * @param {string} $name - Name of the font
 * @param {string} $folder - Subfolder inside the fonts folder
 * @param {string} $file - Name of the font-file
 * @param {string} $weight (normal) - Font weight value
 * @param {string} $style (normal) - Font style value
 * @param {string} $display (auto) - Font display value, determines how a font face is displayed based on whether and when it is downloaded and ready to use.
 */
/**
 * Mixin to apply typography styles based on a given map of selectors and breakpoints.
 */
/**
 * Size an Element
 *
 * @param {number} $width (1em) - Width of the element
 * @param {number} $height ($width) - Height of the element
 */
/**
 * This mixin should be used to set the background color and text color for an element.
 * It ensures that the text color and background color combination meets accessibility contrast standards.
 *
 * @param $color - The text color to be applied.
 * @param $background - The background color to be applied.
 * @param $opacity - (Optional) The opacity level for the background color (default is 1).
 */
.icon {
  display: inline-block;
  stroke-linecap: round;
  stroke-linejoin: round;
  width: 1.5rem;
  height: 1.5rem;
  stroke-width: 0.09375rem;
}

.icon-3xl {
  width: 7.5rem;
  height: 7.5rem;
  stroke-width: 0.375rem;
}

.icon-xxl {
  width: 3.5rem;
  height: 3.5rem;
  stroke-width: 0.21875rem;
}

.icon-xl {
  width: 3rem;
  height: 3rem;
  stroke-width: 0.1875rem;
}

.icon-l {
  width: 2rem;
  height: 2rem;
  stroke-width: 0.125rem;
}

.icon-s {
  width: 1rem;
  height: 1rem;
  stroke-width: 0.0625rem;
}

/* Mixin for custom scrollbar */
@font-face {
  font-family: "Colour Sans";
  src: url("/assets/fonts/ColourSans/colour_sans-light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Colour Sans";
  src: url("/assets/fonts/ColourSans/colour_sans-regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Colour Sans";
  src: url("/assets/fonts/ColourSans/colour_sans-bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
html {
  box-sizing: border-box;
  overflow-x: hidden;
  font-size: 16px;
}

body {
  background-color: #fafafa;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  /* Reserve the fixed-header height at first paint. The default MUST be non-zero:
   * a 0 default meant content painted at y=0 and jumped down once setHeaderPadding
   * set --akzo-header-height post-hydration (measured ~121px CLS jump on PLP).
   * JS still refines the exact height via the var. */
  padding-top: var(--akzo-header-height, 118px);
}
@media (min-width: 600px) {
  body {
    padding-top: var(--akzo-header-height, 150px);
  }
}
body {
  color: #616161;
  font-family: var(--base-font, "Open Sans"), sans-serif;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: inherit;
  -webkit-tap-highlight-color: transparent;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  font-weight: normal;
  margin: 0;
  font-size: 100%;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

dl {
  margin: 0;
  padding: 0;
}

figure {
  margin: 0;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  cursor: pointer;
  background: transparent;
  border: none;
}

img {
  border: 0;
  max-width: 100%;
  height: auto;
  display: block;
}

strong {
  font-weight: 700;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}
table th,
table td {
  padding: var(--spacing-sm) var(--spacing-md);
}
table th {
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 18px;
  font-weight: 700;
}
table td {
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 18px;
  font-weight: 400;
}

hr {
  border: none;
  height: 1px;
  margin: var(--spacing-xl) 0;
  background-color: var(--color-stroke-default);
}

input,
button,
select,
textarea {
  font: inherit;
  border: none;
  background: none;
  color: inherit;
  outline: none;
  text-overflow: ellipsis;
}

:focus {
  outline: none;
}

button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.button-test {
  background-color: #0ea5e9;
  padding: 5;
  color: #171717;
}

.theme-switcher {
  padding: 1rem;
  border-radius: 0.5rem;
}
.theme-switcher:hover {
  border-color: #0ea5e9;
}
.theme-switcher:focus {
  outline: none;
  border-color: #78716c;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.theme-description {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  color: #171717;
}

.title {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #171717;
}

.theme-dropdown {
  width: "fit-content";
  padding: 0.75rem;
  border: 2px solid #ccc;
  border-radius: 0.5rem;
  background-color: #fff;
  font-size: 1rem;
  transition: border-color 0.3s ease;
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

.content-wrapper {
  width: 100%;
  padding: 0 1.5rem;
  margin: 0 auto;
}
@media (max-width: 600px) {
  .content-wrapper {
    padding: 0 1.5rem;
  }
}
@media (min-width: 600px) {
  .content-wrapper {
    padding: 0 3rem;
  }
  .content-wrapper.no-margin-padding {
    padding: 0;
    margin: 0;
    max-width: 100%;
  }
}
@media (min-width: 904px) {
  .content-wrapper {
    padding: 0 4.5rem;
  }
}
@media (min-width: 1440px) {
  .content-wrapper {
    padding: 0;
    max-width: 75rem;
  }
}

.top-none {
  padding-top: 0 !important;
}

.top-default {
  padding-top: 1.5rem !important;
}
@media (min-width: 904px) {
  .top-default {
    padding-top: 2.25rem !important;
  }
}

.top-xl {
  padding-top: 3.375rem !important;
}
@media (min-width: 904px) {
  .top-xl {
    padding-top: 5rem !important;
  }
}

.bottom-none {
  padding-bottom: 0 !important;
}

.bottom-default {
  padding-bottom: 1.5rem !important;
}
@media (min-width: 904px) {
  .bottom-default {
    padding-bottom: 2.25rem !important;
  }
}

.bottom-xl {
  padding-bottom: 3.375rem !important;
}
@media (min-width: 904px) {
  .bottom-xl {
    padding-bottom: 5rem !important;
  }
}

.padding-top-xxs {
  padding-top: 0.25rem;
}
.padding-top-xs {
  padding-top: 0.5rem;
}
.padding-top-s {
  padding-top: 0.75rem;
}
.padding-top-m {
  padding-top: 1rem;
}
.padding-top-l {
  padding-top: 1.5rem;
}
.padding-top-xl {
  padding-top: 2rem;
}
.padding-top-xxl {
  padding-top: 3rem;
}
.padding-top-3xl {
  padding-top: 3.5rem;
}
.padding-top-4xl {
  padding-top: 4rem;
}
.padding-top-5xl {
  padding-top: 5rem;
}
.padding-top-6xl {
  padding-top: 7.5rem;
}
.padding-top-none {
  padding-top: 0;
}

.padding-bottom-xxs {
  padding-bottom: 0.25rem;
}
.padding-bottom-xs {
  padding-bottom: 0.5rem;
}
.padding-bottom-s {
  padding-bottom: 0.75rem;
}
.padding-bottom-m {
  padding-bottom: 1rem;
}
.padding-bottom-l {
  padding-bottom: 1.5rem;
}
.padding-bottom-xl {
  padding-bottom: 2rem;
}
.padding-bottom-xxl {
  padding-bottom: 3rem;
}
.padding-bottom-3xl {
  padding-bottom: 3.5rem;
}
.padding-bottom-4xl {
  padding-bottom: 4rem;
}
.padding-bottom-5xl {
  padding-bottom: 5rem;
}
.padding-bottom-6xl {
  padding-bottom: 7.5rem;
}
.padding-bottom-none {
  padding-bottom: 0;
}

.margin-top-xxs {
  margin-top: 0.25rem;
}
.margin-top-xs {
  margin-top: 0.5rem;
}
.margin-top-s {
  margin-top: 0.75rem;
}
.margin-top-m {
  margin-top: 1rem;
}
.margin-top-l {
  margin-top: 1.5rem;
}
.margin-top-xl {
  margin-top: 2rem;
}
.margin-top-xxl {
  margin-top: 3rem;
}
.margin-top-3xl {
  margin-top: 3.5rem;
}
.margin-top-4xl {
  margin-top: 4rem;
}
.margin-top-5xl {
  margin-top: 5rem;
}
.margin-top-6xl {
  margin-top: 7.5rem;
}
.margin-top-none {
  margin-top: 0;
}

.margin-bottom-xxs {
  margin-bottom: 0.25rem;
}
.margin-bottom-xs {
  margin-bottom: 0.5rem;
}
.margin-bottom-s {
  margin-bottom: 0.75rem;
}
.margin-bottom-m {
  margin-bottom: 1rem;
}
.margin-bottom-l {
  margin-bottom: 1.5rem;
}
.margin-bottom-xl {
  margin-bottom: 2rem;
}
.margin-bottom-xxl {
  margin-bottom: 3rem;
}
.margin-bottom-3xl {
  margin-bottom: 3.5rem;
}
.margin-bottom-4xl {
  margin-bottom: 4rem;
}
.margin-bottom-5xl {
  margin-bottom: 5rem;
}
.margin-bottom-6xl {
  margin-bottom: 7.5rem;
}
.margin-bottom-none {
  margin-bottom: 0;
}

.grid {
  display: flex;
  flex-wrap: wrap;
  flex-grow: 1;
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}

.col {
  flex: 0 0 auto;
  width: 100%;
  padding-right: 0.5rem;
  padding-left: 0.5rem;
}

.col-0 {
  max-width: 0%;
  flex-basis: 0%;
}

.col-push-0 {
  margin-left: 0%;
}

.col-pull-0 {
  margin-right: 0%;
}

.col-1 {
  max-width: 8.3333333333%;
  flex-basis: 8.3333333333%;
}

.col-push-1 {
  margin-left: 8.3333333333%;
}

.col-pull-1 {
  margin-right: 8.3333333333%;
}

.col-2 {
  max-width: 16.6666666667%;
  flex-basis: 16.6666666667%;
}

.col-push-2 {
  margin-left: 16.6666666667%;
}

.col-pull-2 {
  margin-right: 16.6666666667%;
}

.col-3 {
  max-width: 25%;
  flex-basis: 25%;
}

.col-push-3 {
  margin-left: 25%;
}

.col-pull-3 {
  margin-right: 25%;
}

.col-4 {
  max-width: 33.3333333333%;
  flex-basis: 33.3333333333%;
}

.col-push-4 {
  margin-left: 33.3333333333%;
}

.col-pull-4 {
  margin-right: 33.3333333333%;
}

.col-5 {
  max-width: 41.6666666667%;
  flex-basis: 41.6666666667%;
}

.col-push-5 {
  margin-left: 41.6666666667%;
}

.col-pull-5 {
  margin-right: 41.6666666667%;
}

.col-6 {
  max-width: 50%;
  flex-basis: 50%;
}

.col-push-6 {
  margin-left: 50%;
}

.col-pull-6 {
  margin-right: 50%;
}

.col-7 {
  max-width: 58.3333333333%;
  flex-basis: 58.3333333333%;
}

.col-push-7 {
  margin-left: 58.3333333333%;
}

.col-pull-7 {
  margin-right: 58.3333333333%;
}

.col-8 {
  max-width: 66.6666666667%;
  flex-basis: 66.6666666667%;
}

.col-push-8 {
  margin-left: 66.6666666667%;
}

.col-pull-8 {
  margin-right: 66.6666666667%;
}

.col-9 {
  max-width: 75%;
  flex-basis: 75%;
}

.col-push-9 {
  margin-left: 75%;
}

.col-pull-9 {
  margin-right: 75%;
}

.col-10 {
  max-width: 83.3333333333%;
  flex-basis: 83.3333333333%;
}

.col-push-10 {
  margin-left: 83.3333333333%;
}

.col-pull-10 {
  margin-right: 83.3333333333%;
}

.col-11 {
  max-width: 91.6666666667%;
  flex-basis: 91.6666666667%;
}

.col-push-11 {
  margin-left: 91.6666666667%;
}

.col-pull-11 {
  margin-right: 91.6666666667%;
}

.col-12 {
  max-width: 100%;
  flex-basis: 100%;
}

.col-push-12 {
  margin-left: 100%;
}

.col-pull-12 {
  margin-right: 100%;
}

@media (max-width: 600px) {
  .col-s-0 {
    max-width: 0%;
    flex-basis: 0%;
  }
  .col-s-push-0 {
    margin-left: 0%;
  }
  .col-s-pull-0 {
    margin-right: 0%;
  }
  .col-s-1 {
    max-width: 16.6666666667%;
    flex-basis: 16.6666666667%;
  }
  .col-s-push-1 {
    margin-left: 16.6666666667%;
  }
  .col-s-pull-1 {
    margin-right: 16.6666666667%;
  }
  .col-s-2 {
    max-width: 33.3333333333%;
    flex-basis: 33.3333333333%;
  }
  .col-s-push-2 {
    margin-left: 33.3333333333%;
  }
  .col-s-pull-2 {
    margin-right: 33.3333333333%;
  }
  .col-s-3 {
    max-width: 50%;
    flex-basis: 50%;
  }
  .col-s-push-3 {
    margin-left: 50%;
  }
  .col-s-pull-3 {
    margin-right: 50%;
  }
  .col-s-4 {
    max-width: 66.6666666667%;
    flex-basis: 66.6666666667%;
  }
  .col-s-push-4 {
    margin-left: 66.6666666667%;
  }
  .col-s-pull-4 {
    margin-right: 66.6666666667%;
  }
  .col-s-5 {
    max-width: 83.3333333333%;
    flex-basis: 83.3333333333%;
  }
  .col-s-push-5 {
    margin-left: 83.3333333333%;
  }
  .col-s-pull-5 {
    margin-right: 83.3333333333%;
  }
  .col-s-6 {
    max-width: 100%;
    flex-basis: 100%;
  }
  .col-s-push-6 {
    margin-left: 100%;
  }
  .col-s-pull-6 {
    margin-right: 100%;
  }
}
@media (min-width: 600px) {
  .grid {
    margin-left: 3rem;
    margin-right: 3rem;
  }
  .col-m-0 {
    max-width: 0%;
    flex-basis: 0%;
  }
  .col-m-push-0 {
    margin-left: 0%;
  }
  .col-m-pull-0 {
    margin-right: 0%;
  }
  .col-m-1 {
    max-width: 8.3333333333%;
    flex-basis: 8.3333333333%;
  }
  .col-m-push-1 {
    margin-left: 8.3333333333%;
  }
  .col-m-pull-1 {
    margin-right: 8.3333333333%;
  }
  .col-m-2 {
    max-width: 16.6666666667%;
    flex-basis: 16.6666666667%;
  }
  .col-m-push-2 {
    margin-left: 16.6666666667%;
  }
  .col-m-pull-2 {
    margin-right: 16.6666666667%;
  }
  .col-m-3 {
    max-width: 25%;
    flex-basis: 25%;
  }
  .col-m-push-3 {
    margin-left: 25%;
  }
  .col-m-pull-3 {
    margin-right: 25%;
  }
  .col-m-4 {
    max-width: 33.3333333333%;
    flex-basis: 33.3333333333%;
  }
  .col-m-push-4 {
    margin-left: 33.3333333333%;
  }
  .col-m-pull-4 {
    margin-right: 33.3333333333%;
  }
  .col-m-5 {
    max-width: 41.6666666667%;
    flex-basis: 41.6666666667%;
  }
  .col-m-push-5 {
    margin-left: 41.6666666667%;
  }
  .col-m-pull-5 {
    margin-right: 41.6666666667%;
  }
  .col-m-6 {
    max-width: 50%;
    flex-basis: 50%;
  }
  .col-m-push-6 {
    margin-left: 50%;
  }
  .col-m-pull-6 {
    margin-right: 50%;
  }
  .col-m-7 {
    max-width: 58.3333333333%;
    flex-basis: 58.3333333333%;
  }
  .col-m-push-7 {
    margin-left: 58.3333333333%;
  }
  .col-m-pull-7 {
    margin-right: 58.3333333333%;
  }
  .col-m-8 {
    max-width: 66.6666666667%;
    flex-basis: 66.6666666667%;
  }
  .col-m-push-8 {
    margin-left: 66.6666666667%;
  }
  .col-m-pull-8 {
    margin-right: 66.6666666667%;
  }
  .col-m-9 {
    max-width: 75%;
    flex-basis: 75%;
  }
  .col-m-push-9 {
    margin-left: 75%;
  }
  .col-m-pull-9 {
    margin-right: 75%;
  }
  .col-m-10 {
    max-width: 83.3333333333%;
    flex-basis: 83.3333333333%;
  }
  .col-m-push-10 {
    margin-left: 83.3333333333%;
  }
  .col-m-pull-10 {
    margin-right: 83.3333333333%;
  }
  .col-m-11 {
    max-width: 91.6666666667%;
    flex-basis: 91.6666666667%;
  }
  .col-m-push-11 {
    margin-left: 91.6666666667%;
  }
  .col-m-pull-11 {
    margin-right: 91.6666666667%;
  }
  .col-m-12 {
    max-width: 100%;
    flex-basis: 100%;
  }
  .col-m-push-12 {
    margin-left: 100%;
  }
  .col-m-pull-12 {
    margin-right: 100%;
  }
}
@media (min-width: 904px) {
  .grid {
    margin-left: 4.5rem;
    margin-right: 4.5rem;
  }
  .col {
    padding-right: 0.75rem;
    padding-left: 0.75rem;
  }
  .col-l-0 {
    max-width: 0%;
    flex-basis: 0%;
  }
  .col-l-push-0 {
    margin-left: 0%;
  }
  .col-l-pull-0 {
    margin-right: 0%;
  }
  .col-l-1 {
    max-width: 8.3333333333%;
    flex-basis: 8.3333333333%;
  }
  .col-l-push-1 {
    margin-left: 8.3333333333%;
  }
  .col-l-pull-1 {
    margin-right: 8.3333333333%;
  }
  .col-l-2 {
    max-width: 16.6666666667%;
    flex-basis: 16.6666666667%;
  }
  .col-l-push-2 {
    margin-left: 16.6666666667%;
  }
  .col-l-pull-2 {
    margin-right: 16.6666666667%;
  }
  .col-l-3 {
    max-width: 25%;
    flex-basis: 25%;
  }
  .col-l-push-3 {
    margin-left: 25%;
  }
  .col-l-pull-3 {
    margin-right: 25%;
  }
  .col-l-4 {
    max-width: 33.3333333333%;
    flex-basis: 33.3333333333%;
  }
  .col-l-push-4 {
    margin-left: 33.3333333333%;
  }
  .col-l-pull-4 {
    margin-right: 33.3333333333%;
  }
  .col-l-5 {
    max-width: 41.6666666667%;
    flex-basis: 41.6666666667%;
  }
  .col-l-push-5 {
    margin-left: 41.6666666667%;
  }
  .col-l-pull-5 {
    margin-right: 41.6666666667%;
  }
  .col-l-6 {
    max-width: 50%;
    flex-basis: 50%;
  }
  .col-l-push-6 {
    margin-left: 50%;
  }
  .col-l-pull-6 {
    margin-right: 50%;
  }
  .col-l-7 {
    max-width: 58.3333333333%;
    flex-basis: 58.3333333333%;
  }
  .col-l-push-7 {
    margin-left: 58.3333333333%;
  }
  .col-l-pull-7 {
    margin-right: 58.3333333333%;
  }
  .col-l-8 {
    max-width: 66.6666666667%;
    flex-basis: 66.6666666667%;
  }
  .col-l-push-8 {
    margin-left: 66.6666666667%;
  }
  .col-l-pull-8 {
    margin-right: 66.6666666667%;
  }
  .col-l-9 {
    max-width: 75%;
    flex-basis: 75%;
  }
  .col-l-push-9 {
    margin-left: 75%;
  }
  .col-l-pull-9 {
    margin-right: 75%;
  }
  .col-l-10 {
    max-width: 83.3333333333%;
    flex-basis: 83.3333333333%;
  }
  .col-l-push-10 {
    margin-left: 83.3333333333%;
  }
  .col-l-pull-10 {
    margin-right: 83.3333333333%;
  }
  .col-l-11 {
    max-width: 91.6666666667%;
    flex-basis: 91.6666666667%;
  }
  .col-l-push-11 {
    margin-left: 91.6666666667%;
  }
  .col-l-pull-11 {
    margin-right: 91.6666666667%;
  }
  .col-l-12 {
    max-width: 100%;
    flex-basis: 100%;
  }
  .col-l-push-12 {
    margin-left: 100%;
  }
  .col-l-pull-12 {
    margin-right: 100%;
  }
}
@media (min-width: 1440px) {
  .grid {
    max-width: 75rem;
    margin: 0 auto;
  }
  .col-xl-0 {
    max-width: 0%;
    flex-basis: 0%;
  }
  .col-xl-push-0 {
    margin-left: 0%;
  }
  .col-xl-pull-0 {
    margin-right: 0%;
  }
  .col-xl-1 {
    max-width: 8.3333333333%;
    flex-basis: 8.3333333333%;
  }
  .col-xl-push-1 {
    margin-left: 8.3333333333%;
  }
  .col-xl-pull-1 {
    margin-right: 8.3333333333%;
  }
  .col-xl-2 {
    max-width: 16.6666666667%;
    flex-basis: 16.6666666667%;
  }
  .col-xl-push-2 {
    margin-left: 16.6666666667%;
  }
  .col-xl-pull-2 {
    margin-right: 16.6666666667%;
  }
  .col-xl-3 {
    max-width: 25%;
    flex-basis: 25%;
  }
  .col-xl-push-3 {
    margin-left: 25%;
  }
  .col-xl-pull-3 {
    margin-right: 25%;
  }
  .col-xl-4 {
    max-width: 33.3333333333%;
    flex-basis: 33.3333333333%;
  }
  .col-xl-push-4 {
    margin-left: 33.3333333333%;
  }
  .col-xl-pull-4 {
    margin-right: 33.3333333333%;
  }
  .col-xl-5 {
    max-width: 41.6666666667%;
    flex-basis: 41.6666666667%;
  }
  .col-xl-push-5 {
    margin-left: 41.6666666667%;
  }
  .col-xl-pull-5 {
    margin-right: 41.6666666667%;
  }
  .col-xl-6 {
    max-width: 50%;
    flex-basis: 50%;
  }
  .col-xl-push-6 {
    margin-left: 50%;
  }
  .col-xl-pull-6 {
    margin-right: 50%;
  }
  .col-xl-7 {
    max-width: 58.3333333333%;
    flex-basis: 58.3333333333%;
  }
  .col-xl-push-7 {
    margin-left: 58.3333333333%;
  }
  .col-xl-pull-7 {
    margin-right: 58.3333333333%;
  }
  .col-xl-8 {
    max-width: 66.6666666667%;
    flex-basis: 66.6666666667%;
  }
  .col-xl-push-8 {
    margin-left: 66.6666666667%;
  }
  .col-xl-pull-8 {
    margin-right: 66.6666666667%;
  }
  .col-xl-9 {
    max-width: 75%;
    flex-basis: 75%;
  }
  .col-xl-push-9 {
    margin-left: 75%;
  }
  .col-xl-pull-9 {
    margin-right: 75%;
  }
  .col-xl-10 {
    max-width: 83.3333333333%;
    flex-basis: 83.3333333333%;
  }
  .col-xl-push-10 {
    margin-left: 83.3333333333%;
  }
  .col-xl-pull-10 {
    margin-right: 83.3333333333%;
  }
  .col-xl-11 {
    max-width: 91.6666666667%;
    flex-basis: 91.6666666667%;
  }
  .col-xl-push-11 {
    margin-left: 91.6666666667%;
  }
  .col-xl-pull-11 {
    margin-right: 91.6666666667%;
  }
  .col-xl-12 {
    max-width: 100%;
    flex-basis: 100%;
  }
  .col-xl-push-12 {
    margin-left: 100%;
  }
  .col-xl-pull-12 {
    margin-right: 100%;
  }
}
.col-s-visible,
.col-m-visible,
.col-l-visible {
  display: none;
  visibility: hidden;
}

.col-s-visible {
  display: inline-flex;
  visibility: visible;
}
@media (min-width: 600px) {
  .col-s-visible {
    display: none;
    visibility: hidden;
  }
}

@media (max-width: 600px) {
  .col-m-visible {
    display: none;
    visibility: hidden;
  }
}
@media (min-width: 600px) {
  .col-m-visible {
    display: inline-flex;
    visibility: visible;
  }
}

@media (min-width: 904px) {
  .col-l-visible {
    display: inline-flex;
    visibility: visible;
  }
}

.heading-xxxl,
.heading-xxl,
.heading-xl,
.heading-l,
.heading-m,
.heading-s {
  font-family: var(--brand-font, "Open Sans"), sans-serif;
}

.body,
.body-bold,
.body-s,
.body-s-bold,
.body-xs,
.body-xs-bold,
.overline,
.overline-s,
.overline-s-bold,
.overline--bold,
.strikethrough-header-s,
.strikethrough,
.strikethrough-s,
.label,
.body-link,
.body-link-bold,
.body-s-link,
.body-s-link-bold,
.body-xs-link,
.body-xs-link-bold,
.button,
.button-s,
.button-xs {
  font-family: var(--base-font, "Open Sans"), sans-serif;
}

.heading-xxxl {
  font-size: 2.5rem;
  line-height: 2.75rem;
  font-weight: 700;
}
@media (min-width: 904px) {
  .heading-xxxl {
    font-size: 4rem;
    line-height: 4rem;
  }
}

.heading-xxl {
  font-size: 2.25rem;
  line-height: 2.5rem;
  font-weight: 700;
}
@media (min-width: 904px) {
  .heading-xxl {
    font-size: 3.375rem;
    line-height: 3.5rem;
  }
}

.heading-xl {
  font-size: 2rem;
  line-height: 2.25rem;
  font-weight: 700;
}
@media (min-width: 904px) {
  .heading-xl {
    font-size: 2.75rem;
    line-height: 3rem;
  }
}

.heading-l {
  font-size: 1.75rem;
  line-height: 2rem;
  font-weight: 700;
}
@media (min-width: 904px) {
  .heading-l {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
}

.heading-m {
  font-size: 1.5rem;
  line-height: 1.75rem;
  font-weight: 700;
}
@media (min-width: 904px) {
  .heading-m {
    font-size: 1.75rem;
    line-height: 2rem;
  }
}

.heading-s {
  font-size: 1.25rem;
  line-height: 1.5rem;
  font-weight: 700;
}

.body-xs {
  font-size: 12px;
  line-height: 16px;
  margin-bottom: 16px;
  font-weight: 400;
}

.body-xs-bold {
  font-size: 12px;
  line-height: 16px;
  margin-bottom: 16px;
  font-weight: 700;
}

.body-s {
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 18px;
  font-weight: 400;
}

.body-s-bold {
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 18px;
  font-weight: 700;
}

.body {
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 20px;
  font-weight: 400;
}

.body-bold {
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 20px;
  font-weight: 700;
}

.overline {
  font-size: 14px;
  line-height: 16px;
  margin-bottom: 18px;
  font-weight: 400;
  text-transform: uppercase;
}

.overline--bold {
  font-size: 14px;
  line-height: 16px;
  margin-bottom: 18px;
  font-weight: 700;
  text-transform: uppercase;
}

.overline-s {
  font-size: 12px;
  line-height: 16px;
  margin-bottom: 18px;
  font-weight: 400;
  text-transform: uppercase;
}

.overline-s-bold {
  font-size: 12px;
  line-height: 16px;
  margin-bottom: 18px;
  font-weight: 700;
  text-transform: uppercase;
}

.strikethrough-header-s {
  font-size: 20px;
  line-height: 24px;
  margin-bottom: 24px;
  font-weight: 700;
  text-decoration: line-through;
}

.strikethrough {
  font-size: 16px;
  line-height: 20px;
  margin-bottom: 20px;
  font-weight: 400;
  text-decoration: line-through;
}

.strikethrough-s {
  font-size: 14px;
  line-height: 16px;
  margin-bottom: 18px;
  font-weight: 400;
  text-decoration: line-through;
}

.label {
  font-size: 14px;
  line-height: 16px;
  margin-bottom: 18px;
  font-weight: 600;
}

.body-link {
  font-size: 16px;
  line-height: 20px;
  margin-bottom: 20px;
  font-weight: 400;
  text-decoration: underline;
}

.body-link-bold {
  font-size: 16px;
  line-height: 20px;
  margin-bottom: 20px;
  font-weight: 700;
  text-decoration: underline;
}

.body-s-link {
  font-size: 14px;
  line-height: 16px;
  margin-bottom: 18px;
  font-weight: 400;
  text-decoration: underline;
}

.body-s-link-bold {
  font-size: 14px;
  line-height: 16px;
  margin-bottom: 18px;
  font-weight: 700;
  text-decoration: underline;
}

.body-xs-link {
  font-size: 12px;
  line-height: 16px;
  margin-bottom: 16px;
  font-weight: 400;
  text-decoration: underline;
}

.body-xs-link-bold {
  font-size: 12px;
  line-height: 16px;
  margin-bottom: 16px;
  font-weight: 700;
  text-decoration: underline;
}

.button-xs {
  font-size: 12px;
  line-height: 16px;
  margin-bottom: 16px;
  font-weight: 700;
}

.button-s {
  font-size: 14px;
  line-height: 16px;
  margin-bottom: 12px;
  font-weight: 700;
}

.button {
  font-size: 16px;
  line-height: 20px;
  margin-bottom: 12px;
  font-weight: 700;
}

:root[data-brand=flourish] {
  --default-primary-100: #ccd3e1;
  --default-primary-300: #8090b4;
  --default-primary-500: #012169;
  --default-primary-700: #011646;
  --default-primary-900: #000b23;
  --color-icon-accent-primary: #012169;
  --color-icon-accent-primary-dark: #011646;
  --color-icon-accent-secondary-dark: #1f835e;
  --color-icon-accordion: #121212;
  --color-icon-default: #121212;
  --color-icon-disabled: #bdbdbd;
  --color-icon-on-brand: #ffffff;
  --color-icon-on-primary: #ffffff;
  --color-icon-on-surface: #121212;
  --color-icon-progress-stepper: #ffffff;
  --color-icon-subdued: #616161;
  --color-interactive-action-default: #9e9e9e;
  --color-interactive-action-hovered: rgba(158, 158, 158, 0.1490196078);
  --color-interactive-action-pressed: #9e9e9e;
  --color-interactive-focus-default: #121212;
  --color-interactive-overlay-dark: rgba(255, 255, 255, 0.4);
  --color-interactive-overlay-light: rgba(10, 10, 10, 0.2980392157);
  --color-interactive-primary-default: #0a0a0a;
  --color-interactive-primary-hovered: #121212;
  --color-interactive-primary-pressed: #424242;
  --color-interactive-secondary-default: #121212;
  --color-interactive-secondary-hovered: #616161;
  --color-interactive-secondary-pressed: #bdbdbd;
  --color-stroke-accent-brand-primary: #012169;
  --color-stroke-accent-brand-secondary: #2fc48d;
  --color-stroke-alpha: #ffffff;
  --color-stroke-disabled: #d8d8d8;
  --color-stroke-light: #ffffff;
  --color-stroke-strong: #121212;
  --color-surface-accent-primary: #012169;
  --color-surface-accent2: #ccd3e1;
  --color-surface-accent3: #d5f3e8;
  --color-surface-accent5: #012169;
  --color-surface-active: #f6f6f6;
  --color-surface-card-select-bg: #ffffff;
  --color-surface-disabled: #f6f6f6;
  --color-surface-neutral-option1: #ffffff;
  --color-surface-neutral-option2: #f6f6f6;
  --color-surface-neutral-option3: #ebebeb;
  --color-surface-neutral-option4: #d8d8d8;
  --color-surface-notification: #3badd0;
  --color-surface-progress-stepper: #0a0a0a;
  --color-text-accent-primary: #012169;
  --color-text-body: #616161;
  --color-text-disabled: #9e9e9e;
  --color-text-functional: #0a0a0a;
  --color-text-on-brand: #ffffff;
  --color-text-on-primary: #ffffff;
  --color-text-placeholder: #616161;
  --color-text-progress-stepper: #ffffff;
  --color-text-title: #0a0a0a;
  --base-font: Open Sans;
  --brand-font: Colour Sans;
  --radius-button-border-radius: 4px;
  --icon-button-radius: 6250rem;
  --icon-radius: 4px;
}

/*# sourceMappingURL=flourish.css.map */