/* Variables */

:root {
  /* base color primitives */
  --dxp-black-color: #000;
  --dxp-white-color: #fff;

  /* base shade primitives */
  --dxp-shade-100: #111;
  --dxp-shade-200: #222;
  --dxp-shade-300: #333;
  --dxp-shade-400: #444;
  --dxp-shade-500: #555;
  --dxp-shade-600: #666;
  --dxp-shade-700: #878787;
  --dxp-shade-800: #999;
  --dxp-shade-900: #aeaeae;
}

:root {

  /* font-family primitives */
  --dxp-font-family-primary: arial, sans-serif; /* primary font-family */
  --dxp-font-family-secondary: var(--dxp-font-family-primary); /* optional secondary font-family, e.g. for headlines */

  /* letter-spacing primitives */
  --dxp-letter-spacing-extra-tight: -0.05rem;
  --dxp-letter-spacing-tight: -0.025rem;
  --dxp-letter-spacing-default: 0rem;
  --dxp-letter-spacing-wide: 0.025rem;
  --dxp-letter-spacing-extra-wide: 0.05rem;
  --dxp-letter-spacing-ultra-wide: 0.1rem;

  /* fonts + letter-spacing primitives */
  --dxp-font-body-primary: normal normal 400 1rem/120% var(--dxp-font-family-primary);
  --dxp-letter-spacing-body-primary: var(--dxp-letter-spacing-default);
  --dxp-font-body-secondary: normal normal 400 0.9375rem/120% var(--dxp-font-family-primary);
  --dxp-letter-spacing-body-secondary: var(--dxp-letter-spacing-default);
  --dxp-font-body-tertiary: normal normal 400 0.75rem/120% var(--dxp-font-family-primary);
  --dxp-letter-spacing-body-tertiary: var(--dxp-letter-spacing-default);
  --dxp-font-h1: normal normal 600 2.25rem/120% var(--dxp-font-family-primary);
  --dxp-letter-spacing-h1: var(--dxp-letter-spacing-default);
  --dxp-font-h2: normal normal 600 1.5rem/120% var(--dxp-font-family-primary);
  --dxp-letter-spacing-h2: var(--dxp-letter-spacing-default);
  --dxp-font-h3: normal normal 600 1.25rem/120% var(--dxp-font-family-primary);
  --dxp-letter-spacing-h3: var(--dxp-letter-spacing-default);
  --dxp-font-h4: normal normal 600 1rem/120% var(--dxp-font-family-primary);
  --dxp-letter-spacing-h4: var(--dxp-letter-spacing-default);
  --dxp-font-h5: normal normal 600 1rem/120% var(--dxp-font-family-primary);
  --dxp-letter-spacing-h5: var(--dxp-letter-spacing-default);
  --dxp-font-h6: normal normal 600 1rem/120% var(--dxp-font-family-primary);
  --dxp-letter-spacing-h6: var(--dxp-letter-spacing-default);
}

/* breakpoints for fonts + letter-spacing primitives */

@media all and (width >= 769px) {

:root {
    --dxp-font-body-primary: normal normal 400 1.0625rem/120% var(--dxp-font-family-primary);
    --dxp-font-body-secondary: normal normal 400 1rem/120% var(--dxp-font-family-primary);
    --dxp-font-body-tertiary: normal normal 400 0.75rem/120% var(--dxp-font-family-primary);
    --dxp-font-h1: normal normal 600 2.75rem/120% var(--dxp-font-family-primary);
    --dxp-font-h2: normal normal 600 1.875rem/120% var(--dxp-font-family-primary);
    --dxp-font-h3: normal normal 600 1.5rem/120% var(--dxp-font-family-primary);
    --dxp-font-h4: normal normal 600 1.125rem/120% var(--dxp-font-family-primary);
    --dxp-font-h5: normal normal 600 1.125rem/120% var(--dxp-font-family-primary);
    --dxp-font-h6: normal normal 600 1.125rem/120% var(--dxp-font-family-primary)
}
  }

@media all and (width >= 1025px) {

:root {
    --dxp-font-body-primary: normal normal 400 1.125rem/120% var(--dxp-font-family-primary);
    --dxp-font-body-secondary: normal normal 400 1rem/120% var(--dxp-font-family-primary);
    --dxp-font-body-tertiary: normal normal 400 0.75rem/120% var(--dxp-font-family-primary);
    --dxp-font-h1: normal normal 600 3.25rem/120% var(--dxp-font-family-primary);
    --dxp-font-h2: normal normal 600 2.25rem/120% var(--dxp-font-family-primary);
    --dxp-font-h3: normal normal 600 1.75rem/120% var(--dxp-font-family-primary);
    --dxp-font-h4: normal normal 600 1.25rem/120% var(--dxp-font-family-primary);
    --dxp-font-h5: normal normal 600 1.25rem/120% var(--dxp-font-family-primary);
    --dxp-font-h6: normal normal 600 1.25rem/120% var(--dxp-font-family-primary)
}
  }

:root {
  /* spacing primitives */
  --dxp-spacing-05: 0.25rem;
  --dxp-spacing-1: 0.5rem;
  --dxp-spacing-2: 1rem;
  --dxp-spacing-3: 1.5rem;
  --dxp-spacing-4: 2rem;
  --dxp-spacing-5: 2.5rem;
  --dxp-spacing-6: 3rem;
  --dxp-spacing-7: 3.5rem;
  --dxp-spacing-8: 4rem;
  --dxp-spacing-9: 4.5rem;
  --dxp-spacing-10: 5rem;
  --dxp-spacing-11: 5.5rem;
  --dxp-spacing-12: 6rem;
  --dxp-spacing-13: 6.5rem;
  --dxp-spacing-14: 7rem;

  /* radius primitives */
  --dxp-radius-xs: 0.25rem;
  --dxp-radius-sm: 0.5rem;
  --dxp-radius-md: 1rem;
  --dxp-radius-lg: 1.5rem;
  --dxp-radius-xl: 2rem;
  --dxp-radius-2xl: 8rem;
  --dxp-radius-3xl: 22.5rem;

  /* line primitives */
  --dxp-line-width: 0.0625rem;
  --dxp-line-style: solid;
  --dxp-outline-width: 0.125rem; /* default outline-width (on focus) */
  --dxp-outline-offset: 0.125rem; /* default outline-offset (on focus) */
}

:root {
  /* colors: brand tokens */
  --dxp-color-brand-primary: #295bff;
  --dxp-color-brand-secondary: #fd5600;
  --dxp-color-brand-tertiary: #13a813;
  --dxp-color-brand-interactive: var(--dxp-color-brand-primary); /* optional additional color for call-2-action or similar use-cases */
  --dxp-color-brand-focus: #0d99ff; /* color for element focus outline */

  /* colors: background tokens */
  --dxp-color-background-primary: var(--dxp-white-color);
  --dxp-color-background-secondary: #fefefe;
  --dxp-color-background-tertiary: #e3e3e3;

  /* colors: foreground tokens */
  --dxp-color-foreground-primary: var(--dxp-black-color);
  --dxp-color-foreground-secondary: var(--dxp-shade-300);
  --dxp-color-foreground-tertiary: var(--dxp-shade-900);

  /* colors: status tokens */
  --dxp-color-status-error: #ff300a;
  --dxp-color-status-warning: #ffe170;
  --dxp-color-status-info: #0bf;
  --dxp-color-status-success: #80ff4d;
}

:root {
  /* layout tokens */
  --dxp-layout-content-max-width: 75rem; /* maximum content width in 12-grid system */
  --dxp-layout-content-margin: var(--dxp-spacing-2, 16px); /* horizontal outer spacing to browser edges */
  --dxp-layout-gap: var(--dxp-spacing-2, 16px); /* default gap between grid items */
}

:root {
  /* style tokens */
  --dxp-style-radius-xs: var(--dxp-radius-xs);
  --dxp-style-radius-sm: var(--dxp-radius-sm);
  --dxp-style-radius-md: var(--dxp-radius-md);
  --dxp-style-radius-lg: var(--dxp-radius-lg);
  --dxp-style-radius-xl: var(--dxp-radius-xl);
  --dxp-style-radius-2xl: var(--dxp-radius-2xl);
  --dxp-style-radius-3xl: var(--dxp-radius-3xl);
  --dxp-style-box-shadow-primary: 0.125rem 0.125rem 1rem -0.5rem rgba(0, 0, 0, 0.25);
  --dxp-style-box-shadow-secondary: var(--dxp-style-box-shadow-primary);
  --dxp-style-box-shadow-tertiary: 0 0 0 0 rgba(0, 0, 0, 0.15), 0 0 0 0 rgba(0, 0, 0, 0.15);
  --dxp-style-transition-default: color 0.3s, background 0.3s, transform 0.3s, opacity 0.3s;
  --dxp-style-svg-transition-default: fill 0.3s, stroke 0.3s;
}
/* end: Variables */
/* Utils */

.dark-on-light {
  /* only override when needed, as this should be default
   --dxp-color-background-primary: #fff;
   --dxp-color-foreground-primary: #000;
  */
}

.light-on-dark {
  --dxp-color-background-primary: #000;
  --dxp-color-foreground-primary: #fff;
}

.dxp-grid {
  display: grid;
  gap: var(--dxp-layout-gap);
}

@media all and (width >= 481px) {

.dxp-grid--2-column {
      grid-template-columns: repeat(2, 1fr)
  }
    }

@media all and (width >= 481px) {

.dxp-grid--3-column {
      grid-template-columns: repeat(2, 1fr)
  }
    }

@media all and (width >= 769px) {

.dxp-grid--3-column {
      grid-template-columns: repeat(3, 1fr)
  }
    }

@media all and (width >= 481px) {

.dxp-grid--4-column {
      grid-template-columns: repeat(2, 1fr)
  }
    }

@media all and (width >= 769px) {

.dxp-grid--4-column {
      grid-template-columns: repeat(3, 1fr)
  }
    }

@media all and (width >= 1025px) {

.dxp-grid--4-column {
      grid-template-columns: repeat(4, 1fr)
  }
    }

.dxp-flex {
  display: flex;
  gap: var(--dxp-layout-gap);
}

.dxp-flex--wrap {
    flex-wrap: wrap;
  }

.dxp-flex--left {
    align-items: start;
    justify-content: flex-start;
  }

.dxp-flex--center {
    align-items: center;
    justify-content: center;
  }

.dxp-flex--right {
    align-items: end;
    justify-content: flex-end;
  }

.dxp-flex--direction-block {
    flex-direction: column;
  }

.row {
  box-sizing: content-box;
  max-width: calc(var(--dxp-layout-content-max-width, 1200px));
  margin: 0 auto;
  padding: 0 var(--dxp-layout-content-margin, 8px);
}

.row--narrow {
    max-width: calc((var(--dxp-layout-content-max-width, 1200px) + var(--dxp-layout-content-margin)) / 12 * 8 - var(--dxp-layout-content-margin) );
  }

.row--medium {
    max-width: calc((var(--dxp-layout-content-max-width, 1200px) + var(--dxp-layout-content-margin)) / 12 * 10 - var(--dxp-layout-content-margin) );
  }

.row--full {
    max-width: none;
    padding: 0;
  }

.hide-on-mobile {
  display: none;
}

@media all and (width >= 769px) {

.hide-on-mobile {
    display: revert
}
  }

@media all and (width >= 769px) {

.hide-on-tablet {
    display: none
}
  }

@media all and (width >= 1025px) {

.hide-on-tablet {
    display: revert
}
  }

@media all and (width >= 1025px) {

.hide-on-desktop {
    display: none
}
  }
/* --- Spacing Top --- */

.spacing-top-negative {
  margin-top: calc(var(--dxp-spacing-4) * -1);
}

.spacing-top-xs {
  margin-top: var(--dxp-spacing-1);
}

.spacing-top-small {
  margin-top: var(--dxp-spacing-3);
}

.spacing-top-medium {
  margin-top: var(--dxp-spacing-5);
}

.spacing-top-large {
  margin-top: var(--dxp-spacing-13);
}

.spacing-top-xl {
  margin-top: var(--dxp-spacing-14);
}
/* --- Spacing Bottom --- */

.spacing-bottom-negative {
  margin-bottom: calc(var(--dxp-spacing-4) * -1);
}

.spacing-bottom-xs {
  margin-bottom: var(--dxp-spacing-1);
}

.spacing-bottom-small {
  margin-bottom: var(--dxp-spacing-3);
}

.spacing-bottom-medium {
  margin-bottom: var(--dxp-spacing-5);
}

.spacing-bottom-large {
  margin-bottom: var(--dxp-spacing-13);
}

.spacing-bottom-xl {
  margin-bottom: var(--dxp-spacing-14);
}
/* --- Outer Paddings --- */

.padding-none {
  padding: 0;
}

.padding-narrow {
  padding: var(--dxp-spacing-05) 0;
}

.padding-small {
  padding: var(--dxp-spacing-1) 0;
}

.padding-medium {
  padding: var(--dxp-spacing-2) 0;
}

.padding-large {
  padding: var(--dxp-spacing-3) 0;
}

.padding-high {
  padding: var(--dxp-spacing-3) 0;
}

@media all and (width >= 1025px) {

.padding-high {
    padding: var(--dxp-spacing-4) 0
}
  }
/* end: Utils */
/* Overrides */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  box-sizing: border-box;
  font-family: var(--dxp-font-family-primary);
  font-weight: 400;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

*, *:before, *:after {
  box-sizing: border-box;
  font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0); /* mobile webkit */
}
/* Sections
   ========================================================================== */

.paragraph.color_scheme {
  color: var(--dxp-color-foreground-primary, #000);
}
/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
  color: var(--dxp-color-foreground-primary, #000);
  background-color: var(--dxp-color-background-primary, #fff);
}
/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}
/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  margin: 0.67em 0;
  font-size: 2em;
}
/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  overflow: visible; /* 2 */
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
}
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace; /* 1 */
  font-size: 1em; /* 2 */
}
/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */

a {
  text-decoration: none;
  color: var(--dxp-color-brand-primary);
  background-color: transparent;
}

a:active, a:hover {
  text-decoration: underline;
  outline-width:0;
}
/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  text-decoration: underline; /* 2 */
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted; /* 2 */
  border-bottom: none; /* 1 */
}
/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b, strong {
  font-weight: bolder;
}
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code, kbd, samp {
  font-family: monospace; /* 1 */
  font-size: 1em; /* 2 */
}
/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}
/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub, sup {
  position: relative;
  vertical-align: baseline;
  font-size: 75%;
  line-height: 0;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}
/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}
/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button, input, optgroup, select, textarea {
  margin: 0; /* 2 */
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
}
/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button, input { /* 1 */
  overflow: visible;
}
/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button, select { /* 1 */
  text-transform: none;
}
/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button, [type="button"], [type="reset"], [type="submit"] {
  -webkit-appearance: button;
}
/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
  padding: 0;
  border-style: none;
}
/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {
  outline: 0.0625rem dotted ButtonText;
}
/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}
/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  display: table; /* 1 */
  box-sizing: border-box; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
  color: inherit; /* 2 */
}
/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}
/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}
/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"], [type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}
/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
  height: auto;
}
/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -0.125rem; /* 2 */
}
/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}
/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}
/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}
/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}

img, svg, video {
  max-width: 100%;
  height: auto;
}

svg:not(:root) {
  overflow: visible;
}
/** file contains drupal specific css overrides and rules. **/

body.gin--classic-toolbar header, body.gin--classic-toolbar .header {
      top: 2.4375rem;
    }

body.gin--classic-toolbar.toolbar-horizontal.toolbar-tray-open header, body.gin--classic-toolbar.toolbar-horizontal.toolbar-tray-open .header {
        top: 4.875rem;
      }

body.mercury-editor-preview {
    margin-block: 3.375rem;
  }

body.mercury-editor-preview header, body.mercury-editor-preview .header {
      display: none;
    }

/* we need some spacing on add buttons on mercury editor. */

body .layout > .js-lpb-region {
      padding-block: 2.5rem !important;
    }

body .layout > .js-lpb-region .js-lpb-component {
        min-height: 2.5rem;
      }

body .layout > .js-lpb-region .lpb-controls {
        top: auto;
        bottom: 100%;
        border-radius: 0.375rem 0.375rem 0 0;
      }

.media-library-item .media-library-item__remove.button {
    width: 2rem !important;
    height: 2rem !important;
    border-radius: 50% !important;
    background-position: center !important;
  }

.media-library-widget-modal .media-library-item--grid, .media-library-selection .media-library-item--grid {
  min-width: 8.75rem;
  max-width: 10.3125rem;
}

.dpx-drupal-tabs {
  position: fixed;
  z-index: 99;
  top: 25%;
  right: 100%;
  transition: transform 0.3s ease;
  text-align: center;
  filter: drop-shadow(-0.125rem 0.0625rem 0.3125rem rgba(0, 0, 0, 0.2));
  color: white;
}

.dpx-drupal-tabs .dpx-drupal-tabs__opener {
    position: absolute;
    top: 0;
    left: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.125rem;
    height: 3.125rem;
    padding: 0.625rem;
    cursor: pointer;
    border: 0.125rem solid white;
    border-left: none;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
    background: var(--dxp-color-brand-primary);
  }

.dpx-drupal-tabs .dpx-drupal-tabs__opener:hover {
      color: white;
      background: color-mix(in srgb, var(--dxp-color-brand-primary) 75%, #000 25%);
    }

.dpx-drupal-tabs ul.tabs > li {
      position: relative;
      display: flex;
      justify-content: center;
      margin: 0;
      padding: 0;
      text-align: left;
      white-space: nowrap;
      text-transform: uppercase;
      color: white;
      border: 0.125rem solid white;
      border-left: none;
      border-radius: 0;
      background: var(--dxp-color-brand-primary);
    }

.dpx-drupal-tabs ul.tabs > li a {
        display: block;
        width: 100%;
        padding: 0.9375rem 2.1875rem 0.9375rem 1.5625rem;
        color: white;
        background: none;

      }

.dpx-drupal-tabs ul.tabs > li a.is-active {
          font-weight: 700;
        }

.dpx-drupal-tabs ul.tabs > li svg {
        position: absolute;
        top: 50%;
        right: 0.8125rem;
        transition: right 0.3s ease;
        transform: translateY(-50%);
      }

.dpx-drupal-tabs ul.tabs > li:not(:first-of-type) {
        margin-top: -0.125rem;
      }

.dpx-drupal-tabs ul.tabs > li:hover {
        color: white;
        background: color-mix(in srgb, var(--dxp-color-brand-primary) 75%, #000 25%);
      }

.dpx-drupal-tabs ul.tabs > li:hover svg {
          right: 0.625rem;
        }

.dpx-drupal-tabs.open {
    transform: translateX(100%);
  }
/* end: Overrides */
