/*!
 * Helvetia Design System — Full Bundle (Base + Components + Utilities)
 * @package     @baloise/ds-css
 * @version     20.0.0-next.8
 * @license     Apache-2.0
 * @copyright   Copyright © 2026 Helvetia
 * @homepage    https://baloise-design-system.vercel.app
 * @repository  git+https://github.com/baloise/design-system.git
 */
/*!
 * Helvetia Design System — Base (Tokens + Normalize + Structure)
 * @package     @baloise/ds-css
 * @version     20.0.0-next.8
 * @license     Apache-2.0
 * @copyright   Copyright © 2026 Helvetia
 * @homepage    https://baloise-design-system.vercel.app
 * @repository  git+https://github.com/baloise/design-system.git
 */
@charset "UTF-8";
/* Document
 * ========================================================================== */
/**
 * Fix the numeric font variant inheritance in all browsers (opinionated).
 * This makes number characters use a fixed-width font, which is typically desirable for
 * displaying tabular data, such as in a calendar or a stock ticker.
 */
* {
  font-variant-numeric: tabular-nums;
}

/**
 * 1. Add border box sizing in all browsers (opinionated).
 * 2. Backgrounds do not repeat by default (opinionated).
 * 3. Masks do not repeat by default (opinionated).
 */
*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  background-repeat: no-repeat; /* 2 */
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat; /* 3 */
}

/**
 * 1. Add text decoration inheritance in all browsers (opinionated).
 * 2. Add vertical alignment inheritance in all browsers (opinionated).
 */
::before,
::after {
  text-decoration: inherit; /* 1 */
  vertical-align: inherit; /* 2 */
}

/**
 * 1. Use the default cursor in all browsers (opinionated).
 * 2. Change the line height in all browsers (opinionated).
 * 3. Breaks words to prevent overflow in all browsers (opinionated).
 * 4. Use a 4-space tab width in all browsers (opinionated).
 * 5. Remove the grey highlight on links in iOS (opinionated).
 * 6. Prevent adjustments of font size after orientation changes in iOS.
 */
:where(:root) {
  cursor: default; /* 1 */
  line-height: 1.5; /* 2 */
  overflow-wrap: break-word; /* 3 */
  -moz-tab-size: 4; /* 4 */
  -o-tab-size: 4;
     tab-size: 4; /* 4 */
  -webkit-tap-highlight-color: transparent; /* 5 */
  -webkit-text-size-adjust: 100%; /* 6 */
  -moz-text-size-adjust: 100%;
       text-size-adjust: 100%; /* 6 */
}

/* Sections
 * ========================================================================== */
/**
 * Remove the margin in all browsers (opinionated).
 */
:where(body) {
  margin: 0;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Edge, Firefox, and Safari.
 */
:where(h1),
:where(h2),
:where(h3),
:where(h4),
:where(h5) {
  margin: 0;
}

/* Grouping content
 * ========================================================================== */
/**
 * Remove the margin on nested lists in Chrome, Edge, and Safari.
 */
:where(dl, ol, ul) :where(dl, ol, ul) {
  margin: 0;
}

/**
 * Add the correct box sizing in Firefox.
 */
:where(hr) {
  height: 0;
}

/**
 * Remove the list style on navigation lists in all browsers (opinionated).
 */
:where(nav) :where(ol, ul) {
  list-style-type: none;
  padding: 0;
}

/**
 * Prevent VoiceOver from ignoring list semantics in Safari (opinionated).
 */
:where(nav li)::before {
  content: "​";
  float: left;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 * 3. Prevent overflow of the container in all browsers (opinionated).
 */
:where(pre) {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
  overflow: auto; /* 3 */
  margin: 0;
}

/* Text-level semantics
 * ========================================================================== */
/**
 * Add the correct text decoration in Safari.
 */
:where(abbr[title]) {
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
:where(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.
 */
:where(code, kbd, samp) {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
:where(small) {
  font-size: 80%;
}

/* Embedded content
 * ========================================================================== */
/*
 * Change the alignment on media elements in all browsers (opinionated).
 */
:where(audio, canvas, iframe, img, svg, video) {
  vertical-align: middle;
}

/**
 * Remove the border on iframes in all browsers (opinionated).
 */
:where(iframe) {
  border-style: none;
}

/**
 * Change the fill color to match the text color in all browsers (opinionated).
 */
:where(svg:not([fill])) {
  fill: currentColor;
}

/* Tabular data
 * ========================================================================== */
/**
 * 1. Collapse border spacing in all browsers (opinionated).
 * 2. Correct table border color in Chrome, Edge, and Safari.
 * 3. Remove text indentation from table contents in Chrome, Edge, and Safari.
 */
:where(table) {
  border-collapse: collapse; /* 1 */
  border-color: currentColor; /* 2 */
  text-indent: 0; /* 3 */
}

/* Forms
 * ========================================================================== */
/**
 * Remove the margin on controls in Safari.
 */
:where(button, input, select) {
  margin: 0;
}

/**
 * Correct the inability to style buttons in iOS and Safari.
 */
:where(button, [type=button i], [type=reset i], [type=submit i]) {
  -webkit-appearance: button;
}

/**
 * Change the inconsistent appearance in all browsers (opinionated).
 */
:where(fieldset) {
  margin: 0;
  padding: 0;
  border: none;
}

:where(legend) {
  padding: 0;
  float: left;
  width: 100%;
}

/**
 * Add the correct vertical alignment in Chrome, Edge, and Firefox.
 */
:where(progress) {
  vertical-align: baseline;
}

/**
 * 1. Remove the margin in Firefox and Safari.
 * 3. Change the resize direction in all browsers (opinionated).
 */
:where(textarea) {
  margin: 0; /* 1 */
  resize: vertical; /* 3 */
}

/**
 * 1. Correct the odd appearance in Chrome, Edge, and Safari.
 * 2. Correct the outline style in Safari.
 */
:where([type=search i]) {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Safari.
 */
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/**
 * Correct the text style of placeholders in Chrome, Edge, and Safari.
 */
::-webkit-input-placeholder {
  color: inherit;
}

/**
 * Remove the inner padding in Chrome, Edge, and Safari on macOS.
 */
::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style upload buttons 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 styles in Safari.
 */
:where(dialog) {
  background-color: white;
  border: solid;
  color: black;
  height: -moz-fit-content;
  height: fit-content;
  left: 0;
  margin: auto;
  padding: 1em;
  position: absolute;
  right: 0;
  width: -moz-fit-content;
  width: fit-content;
}

:where(dialog:not([open])) {
  display: none;
}

/*
 * Add the correct display in Safari.
 */
:where(details > summary:first-of-type) {
  display: list-item;
}

/* Accessibility
 * ========================================================================== */
/**
 * Change the cursor on busy elements in all browsers (opinionated).
 */
:where([aria-busy=true i]) {
  cursor: progress;
}

/*
 * Change the cursor on disabled, not-editable, or otherwise
 * inoperable elements in all browsers (opinionated).
 */
:where([aria-disabled=true i], [disabled]) {
  cursor: not-allowed;
}

/*
 * Change the display on visually hidden accessible elements
 * in all browsers (opinionated).
 */
:where([aria-hidden=false i][hidden]) {
  display: initial;
}

:where([aria-hidden=false i][hidden]:not(:focus)) {
  clip: rect(0, 0, 0, 0);
  position: absolute;
}

/**
  * @deprecated Use desktop with t-shirt size breakpoints instead
  */
html {
  min-width: 300px;
  overflow-x: hidden;
  overflow-y: scroll;
}

html,
:host {
  background-color: var(--ds-body-color-background);
  font-size: var(--ds-body-text-size);
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
     -moz-text-size-adjust: 100%;
          text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-overflow-scrolling: auto;
}

*:focus {
  -webkit-tap-highlight-color: transparent;
  outline: none;
  touch-action: manipulation;
}

article,
aside,
figure,
footer,
header,
hgroup,
section {
  display: block;
}

body,
button,
input,
optgroup,
select,
textarea {
  font-family: var(--ds-body-family);
}

body {
  color: var(--ds-body-color);
  font-size: var(--ds-body-size);
  font-weight: var(--ds-body-weight);
  line-height: var(--ds-body-line-height);
  -webkit-overflow-scrolling: auto;
}

button {
  color: inherit;
}

p:not(.text, .title, .subtitle, .heading) {
  hyphens: auto;
  margin: 0;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
p:not(.text, .title, .subtitle, .heading) strong {
  color: currentColor;
}

small {
  font-size: var(--ds-alias-text-size-sm);
}

span {
  font-style: inherit;
  font-weight: inherit;
}

b,
strong {
  color: inherit;
  font-weight: var(--ds-alias-text-weight-bold);
}

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

input[type=checkbox],
input[type=radio] {
  vertical-align: baseline;
}

.has-sticky-footer {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.has-sticky-footer main {
  padding-bottom: 2.5rem;
}
.has-sticky-footer ds-footer,
.has-sticky-footer footer.footer {
  margin-top: auto;
}
/*!
 * Helvetia Design System — Components
 * @package     @baloise/ds-css
 * @version     20.0.0-next.8
 * @license     Apache-2.0
 * @copyright   Copyright © 2026 Helvetia
 * @homepage    https://baloise-design-system.vercel.app
 * @repository  git+https://github.com/baloise/design-system.git
 */
@charset "UTF-8";
/**
  * @deprecated Use desktop with t-shirt size breakpoints instead
  */
.table:not(:last-child), .table-container:not(:last-child) {
  margin-bottom: 0.25rem;
}

/**
  * Mixin to support host and non-host mode for hybrid components.
  * The mixin takes care of the correct selector and allows to write the styles only once.
  * The $selectors parameter can be a single selector or a list of selectors.
  * The $is-host parameter determines if the component is in host mode or not.
  */
/**
  * Mixin sets the selector for host and non-host mode.
  * The styles are wrapped in a :host selector and only applied if the component is used in host mode.
  * The $is-host parameter determines if the component is in host mode or not.
  * The $selector parameter is the selector for non-host mode and can be a single selector or a list of selectors.
  */
/**
  * Mixin generates styles for an element of a component for host and non-host mode.
  * The styles are wrapped in a :host selector and only applied if the component is used in host mode.
  * The $is-host parameter determines if the component is in host mode or not.
  * The $selector parameter is the selector for non-host mode and can be a single selector or a list of selectors.
  */
/**
  * Mixin only generates styles for host mode.
  * The styles are wrapped in a :host selector and only applied if the component is used in host mode.
  * The $is-host parameter determines if the component is in host mode or not.
  */
/**
  * Mixin only generates styles for non-host mode.
  * The styles are not wrapped in a :host selector and only applied if the component is used in non-host mode.
  * The $is-host parameter determines if the component is in host mode or not.
  */
/**
  * Mixin to support host and non-host mode for hybrid components.
  * The mixin takes care of the correct selector and allows to write the styles only once.
  * The $selectors parameter can be a single selector or a list of selectors.
  * The $is-host parameter determines if the component is in host mode or not.
  */
/**
  * Mixin to support host and non-host mode for hybrid components.
  * The mixin takes care of the correct selector and allows to write the styles only once.
  * The $selectors parameter can be a single selector or a list of selectors.
  * The $is-host parameter determines if the component is in host mode or not.
  * The $use-host parameter determines if the component should use the :host selector or not.
  */
/**
  * Mixin to define the host base variables and display property for a component.
  */
/**
 * Variables
 * --------------------------------
 * Define here the css variables for the component to be able to use it in host or non-host mode
 * These variables can be used in the component styles below and later on be overridden in themes.
 */
details.accordion {
  --_accordion-focus: var(--accordion-focus, var(--mod-accordion-focus, var(--ds-alias-interaction-focus-color-base)));
  /* Marker icons (SVG via mask so we can color with currentColor) */
  --accordion-marker-chevron: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2010%2010'%3E%3Cpath%20fill='black'%20d='M5,7.874a1.238,1.238,0,0,1-.879-.364L.206,3.393A.75.75,0,1,1,1.294,2.36L4.819,6.072a.249.249,0,0,0,.362,0L8.706,2.36A.75.75,0,1,1,9.794,3.393L5.9,7.5A1.269,1.269,0,0,1,5,7.874Z'/%3E%3C/svg%3E");
  --accordion-marker-plus: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2014%2014'%3E%3Cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M8%201C8%200.447715%207.55228%200%207%200C6.44772%200%206%200.447715%206%201V6H1C0.447715%206%200%206.44772%200%207C0%207.55228%200.447715%208%201%208H6V13C6%2013.5523%206.44772%2014%207%2014C7.55228%2014%208%2013.5523%208%2013V8H13C13.5523%208%2014%207.55228%2014%207C14%206.44772%2013.5523%206%2013%206H8V1Z'/%3E%3C/svg%3E");
  --accordion-marker-minus: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2014%2014'%3E%3Cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M0%207C0%206.44772%200.447715%206%201%206H13C13.5523%206%2014%206.44772%2014%207C14%207.55228%2013.5523%208%2013%208H1C0.447715%208%200%207.55228%200%207Z'/%3E%3C/svg%3E");
  /* Default marker variant */
  --_accordion-marker-icon: var(--accordion-marker-icon, var(--mod-accordion-marker-icon, var(--accordion-marker-chevron)));
  --_accordion-marker-size: var(--accordion-marker-size, var(--mod-accordion-marker-size, 1rem));
  --_accordion-summary-color-hover: var(--accordion-summary-color-hover, var(--mod-accordion-summary-color-hover, var(--ds-accordion-summary-color-hover)));
  --_accordion-summary-color-active: var(--accordion-summary-color-active, var(--mod-accordion-summary-color-active, var(--ds-accordion-summary-color-active)));
  --_accordion-radius: var(--accordion-radius, var(--mod-accordion-radius, var(--ds-accordion-radius-base)));
}

/**
  * Basic Component Styles
  * --------------------------------
  * Define here the component styles using the mixin to support host and non-host mode for hybrid components.
  */
details.accordion {
  display: block;
  position: relative;
}

details.accordion > summary:not(.button) {
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
@media (hover: hover) and (pointer: fine) {
  details.accordion > summary:not(.button):hover, details.accordion > summary:not(.button).is-hovered {
    color: var(--_accordion-summary-color-hover);
  }
  details.accordion > summary:not(.button):hover ds-icon, details.accordion > summary:not(.button).is-hovered ds-icon {
    --icon-color: var(--_accordion-summary-color-hover);
  }
  details.accordion > summary:not(.button):hover:after, details.accordion > summary:not(.button).is-hovered:after {
    background: var(--_accordion-summary-color-hover);
  }
}
details.accordion > summary:not(.button):active, details.accordion > summary:not(.button).is-pressed {
  color: var(--_accordion-summary-color-active);
}
details.accordion > summary:not(.button):active ds-icon, details.accordion > summary:not(.button).is-pressed ds-icon {
  --icon-color: var(--_accordion-summary-color-active);
}
details.accordion > summary:not(.button):active:after, details.accordion > summary:not(.button).is-pressed:after {
  background: var(--_accordion-summary-color-active);
}
details.accordion > summary:not(.button):focus-visible:not(:active):before, details.accordion > summary:not(.button).is-focused:not(:active):before {
  box-shadow: var(--ds-alias-interaction-focus-color-border) 0 0 0 2px, var(--_accordion-focus) 0 0 0 5px !important;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  border-radius: var(--_accordion-radius);
}

details.accordion > summary {
  /* Hide the native disclosure triangle */
  list-style: none;
}
details.accordion > summary::-webkit-details-marker {
  display: none;
}
details.accordion > summary::marker {
  content: "";
}

details.accordion > summary::after {
  content: "";
  flex: 0 0 auto;
  min-width: var(--_accordion-marker-size);
  width: 1.5rem;
  height: var(--_accordion-marker-size);
  background-color: currentcolor;
  -webkit-mask-image: var(--_accordion-marker-icon);
          mask-image: var(--_accordion-marker-icon);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  transform-origin: center;
  cursor: pointer;
}
details.accordion[open]:not(.has-marker-plus, .has-marker-plus-minus) > summary::after {
  transform: rotate(180deg);
}
details.accordion.has-marker-plus[open] > summary::after {
  transform: rotate(45deg);
}
details.accordion {
  /* No marker variant */
}
details.accordion.has-marker-none > summary::after {
  display: none;
}
details.accordion.has-marker-left > summary::after {
  order: -1;
}
details.accordion.has-marker-left > summary:not(.button) {
  justify-content: flex-start;
}

.accordion.has-marker-plus {
  --mod-accordion-marker-icon: var(--accordion-marker-plus);
}
.accordion.has-marker-plus-minus {
  --mod-accordion-marker-icon: var(--accordion-marker-plus);
}
.accordion.has-marker-plus-minus[open] {
  --mod-accordion-marker-icon: var(--accordion-marker-minus);
}

/**
 * Animation: smooth open/close
 * --------------------------------
 * - Animates the `.content` wrapper element inside `<details>`
 */
:root {
  interpolate-size: allow-keywords;
}

@media (prefers-reduced-motion: no-preference) {
  details.accordion > summary::after {
    transition: transform 300ms ease;
  }
  details > .content {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: content-visibility 0.3s, grid-template-rows 0.3s;
    transition-behavior: allow-discrete;
  }
  details > .content > * {
    min-height: 0;
    transition: visibility 0.3s;
    visibility: hidden;
  }
  details[open] > .content {
    grid-template-rows: 1fr;
  }
  details[open] > .content > * {
    visibility: visible;
  }
}
/*
 * Visual variant: place summary at the bottom.
 * Uses :has() to reserve space so the summary is visible even when closed.
 */
details.accordion:has(> summary.button.at-end) {
  padding-bottom: 3rem;
}

details.accordion:has(> summary.button.is-small.at-end) {
  padding-bottom: 2rem;
}

details.accordion > summary.button.at-end {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

/* Keep content from being covered by the bottom-positioned summary */
details.accordion:has(> summary.button.at-end) > summary.button.at-end ~ * {
  padding-bottom: 3rem;
}

details.accordion:has(> summary.button.is-small.at-end) > summary.button.is-small.at-end ~ * {
  padding-bottom: 2rem;
}

/* Optional: show different summary text based on open/closed (CSS-only)
 * Markup:
 *   <span class="accordion-label" aria-hidden="true">
 *     <span class="is-closed">…</span>
 *     <span class="is-open">…</span>
 *   </span>
 */
ds-accordion .is-open,
details.accordion > summary .accordion-label > .is-open,
details.accordion > summary > .is-open {
  display: none;
}

ds-accordion[open] .is-closed,
details.accordion[open] > summary .accordion-label > .is-closed,
details.accordion[open] > summary > .is-closed {
  display: none;
}

ds-accordion[open] .is-open,
details.accordion[open] > summary .accordion-label > .is-open,
details.accordion[open] > summary > .is-open {
  display: inline;
}

/**
 * Variables
 * --------------------------------
 * Define here the css variables for the component to be able to use it in host or non-host mode
 * These variables can be used in the component styles below and later on be overridden in themes.
 */
.button {
  --_button-position: var(--button-position, var(--mod-button-position, static));
  --_button-top: var(--button-top, var(--mod-button-top));
  --_button-right: var(--button-right, var(--mod-button-right));
  --_button-bottom: var(--button-bottom, var(--mod-button-bottom));
  --_button-left: var(--button-left, var(--mod-button-left));
  position: var(--_button-position);
  top: var(--_button-top);
  right: var(--_button-right);
  bottom: var(--_button-bottom);
  left: var(--_button-left);
  --_button-m: var(--button-m, var(--mod-button-m, 0));
  --_button-my: var(--button-my, var(--mod-button-my));
  --_button-mx: var(--button-mx, var(--mod-button-mx));
  --_button-ml: var(--button-ml, var(--mod-button-ml));
  --_button-mr: var(--button-mr, var(--mod-button-mr));
  --_button-mt: var(--button-mt, var(--mod-button-mt));
  --_button-mb: var(--button-mb, var(--mod-button-mb));
  margin: var(--_button-m);
  margin-inline: var(--_button-mx);
  margin-block: var(--_button-my);
  margin-left: var(--_button-ml);
  margin-right: var(--_button-mr);
  margin-top: var(--_button-mt);
  margin-bottom: var(--_button-mb);
  --_button-font-family: var(--button-font-family, var(--mod-button-font-family, var(--ds-button-family)));
  --_button-font-weight: var(--button-font-weight, var(--mod-button-font-weight, var(--ds-button-weight)));
  --_button-font-size: var(--button-font-size, var(--mod-button-font-size, var(--ds-button-size-base)));
  --_button-line-height: var(--button-line-height, var(--mod-button-line-height, var(--ds-button-line-height)));
  --_button-radius: var(--button-radius, var(--mod-button-radius, var(--ds-button-radius-base)));
  --_button-color-text: var(--button-color-text, var(--mod-button-color-text, var(--ds-button-color-primary-base-text)));
  --_button-color-border: var(--button-color-border, var(--mod-button-color-border, var(--ds-button-color-primary-base-border)));
  --_button-color-background: var(--button-color-background, var(--mod-button-color-background, var(--ds-button-color-primary-base-background)));
  --_button-color-text-hover: var(--button-color-text-hover, var(--mod-button-color-text-hover, var(--ds-button-color-primary-hover-text)));
  --_button-color-border-hover: var(--button-color-border-hover, var(--mod-button-color-border-hover, var(--ds-button-color-primary-hover-border)));
  --_button-color-background-hover: var(--button-color-background-hover, var(--mod-button-color-background-hover, var(--ds-button-color-primary-hover-background)));
  --_button-color-text-active: var(--button-color-text-active, var(--mod-button-color-text-active, var(--ds-button-color-primary-active-text)));
  --_button-color-border-active: var(--button-color-border-active, var(--mod-button-color-border-active, var(--ds-button-color-primary-active-border)));
  --_button-color-background-active: var(--button-color-background-active, var(--mod-button-color-background-active, var(--ds-button-color-primary-active-background)));
  --_button-width: var(--button-width, var(--mod-button-width, var(--ds-button-width, fit-content)));
  --_button-border-style: var(--button-border-style, var(--mod-button-border-style, solid));
  --_button-gap: var(--button-gap, var(--mod-button-gap, 0.5rem));
  --_button-min-height: var(--button-min-height, var(--mod-button-min-height, 3rem));
  --_button-min-width: var(--button-min-width, var(--mod-button-min-width, 3rem));
  --_button-padding-inline: var(--button-padding-inline, var(--mod-button-padding-inline, 1.5rem));
  --_button-box-shadow: var(--button-box-shadow, var(--mod-button-box-shadow, none));
  --_button-text-shadow: var(--button-text-shadow, var(--mod-button-text-shadow, none));
  --_button-focus-shadow: var(--button-focus-shadow, var(--mod-button-focus-shadow, var(--ds-alias-interaction-focus-color-base)));
}

/**
  * Basic Component Styles
  * --------------------------------
  * Define here the component styles using the mixin to support host and non-host mode for hybrid components.
  */
.button {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-user-drag: none; /* Chrome, Safari */
  user-drag: none; /* Non-standard, limited support */
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}
@media print {
  .button {
    display: none !important;
  }
}
.button {
  -webkit-appearance: auto;
     -moz-appearance: auto;
          appearance: auto;
  position: relative;
  display: inline-flex;
  flex-wrap: nowrap;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  word-break: normal;
  box-shadow: none;
  outline: none;
  box-sizing: border-box;
  text-decoration: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  box-shadow: var(--_button-box-shadow);
  text-shadow: var(--_button-text-shadow);
  touch-action: manipulation;
  transition-property: color, background-color, border-color, box-shadow, text-shadow;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
  font-size: var(--_button-font-size);
  font-family: var(--_button-font-family);
  font-weight: var(--_button-font-weight);
  line-height: var(--_button-line-height);
  border-radius: var(--_button-radius);
  border-style: var(--_button-border-style);
  border-width: var(--ds-alias-border-width-base);
  width: var(--_button-width, -moz-fit-content);
  width: var(--_button-width, fit-content);
  min-width: var(--_button-min-width);
  min-height: var(--_button-min-height);
  gap: var(--_button-gap);
  padding-inline: var(--_button-padding-inline);
  background-color: var(--_button-color-background);
  color: var(--_button-color-text);
  border-color: var(--_button-color-border);
}
.button::-moz-focus-inner {
  border: 0;
}
.button {
  --spinner-size: 1.5rem;
  --icon-color: var(--_button-color-text);
}
.button:focus, .button:active {
  outline: none;
}
@media (hover: hover) and (pointer: fine) {
  .button:focus-visible:not(:active), .button.is-focused:not(:active) {
    box-shadow: var(--ds-alias-interaction-focus-color-border) 0 0 0 2px, var(--_button-focus-shadow) 0 0 0 5px !important;
  }
}
@media (hover: hover) and (pointer: fine) {
  .button:hover, .button.is-hovered {
    --icon-color: var(--_button-color-text-hover);
    color: var(--_button-color-text-hover);
    background-color: var(--_button-color-background-hover);
    border-color: var(--_button-color-border-hover);
  }
}
.button:active, .button.is-pressed {
  --icon-color: var(--_button-color-text-active);
  background-color: var(--_button-color-background-active);
  color: var(--_button-color-text-active);
  border-color: var(--_button-color-border-active);
  translate: 0 0.5px;
}

.button.is-wide {
  width: 100%;
  flex: 1 1 auto;
}

.button.is-link {
  text-decoration: underline;
  text-underline-offset: 0.25rem;
  text-decoration-thickness: var(--ds-link-border-width);
}

.button .badge,
.button ds-badge {
  --badge-position: absolute;
  --badge-top: -0.5rem;
  --badge-right: -0.5rem;
}

/**
  * Variants and States
  * --------------------------------
  * Define here the variants and states like size or colors for the component.
  */
.button.is-primary:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading) {
  --mod-button-color-text: var(--ds-button-color-primary-base-text);
  --mod-button-color-background: var(--ds-button-color-primary-base-background);
  --mod-button-color-border: var(--ds-button-color-primary-base-border);
  --mod-button-color-text-hover: var(--ds-button-color-primary-hover-text);
  --mod-button-color-background-hover: var(--ds-button-color-primary-hover-background);
  --mod-button-color-border-hover: var(--ds-button-color-primary-hover-border);
  --mod-button-color-text-active: var(--ds-button-color-primary-active-text);
  --mod-button-color-background-active: var(--ds-button-color-primary-active-background);
  --mod-button-color-border-active: var(--ds-button-color-primary-active-border);
}

.button.is-secondary:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading) {
  --mod-button-color-text: var(--ds-button-color-secondary-base-text);
  --mod-button-color-background: var(--ds-button-color-secondary-base-background);
  --mod-button-color-border: var(--ds-button-color-secondary-base-border);
  --mod-button-color-text-hover: var(--ds-button-color-secondary-hover-text);
  --mod-button-color-background-hover: var(--ds-button-color-secondary-hover-background);
  --mod-button-color-border-hover: var(--ds-button-color-secondary-hover-border);
  --mod-button-color-text-active: var(--ds-button-color-secondary-active-text);
  --mod-button-color-background-active: var(--ds-button-color-secondary-active-background);
  --mod-button-color-border-active: var(--ds-button-color-secondary-active-border);
}

.button.is-tertiary:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading) {
  --mod-button-color-text: var(--ds-button-color-tertiary-base-text);
  --mod-button-color-background: var(--ds-button-color-tertiary-base-background);
  --mod-button-color-border: var(--ds-button-color-tertiary-base-border);
  --mod-button-color-text-hover: var(--ds-button-color-tertiary-hover-text);
  --mod-button-color-background-hover: var(--ds-button-color-tertiary-hover-background);
  --mod-button-color-border-hover: var(--ds-button-color-tertiary-hover-border);
  --mod-button-color-text-active: var(--ds-button-color-tertiary-active-text);
  --mod-button-color-background-active: var(--ds-button-color-tertiary-active-background);
  --mod-button-color-border-active: var(--ds-button-color-tertiary-active-border);
}

.button.is-tertiary-yellow:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading) {
  --mod-button-color-text: var(--ds-button-color-tertiary-yellow-base-text);
  --mod-button-color-background: var(--ds-button-color-tertiary-yellow-base-background);
  --mod-button-color-border: var(--ds-button-color-tertiary-yellow-base-border);
  --mod-button-color-text-hover: var(--ds-button-color-tertiary-yellow-hover-text);
  --mod-button-color-background-hover: var(--ds-button-color-tertiary-yellow-hover-background);
  --mod-button-color-border-hover: var(--ds-button-color-tertiary-yellow-hover-border);
  --mod-button-color-text-active: var(--ds-button-color-tertiary-yellow-active-text);
  --mod-button-color-background-active: var(--ds-button-color-tertiary-yellow-active-background);
  --mod-button-color-border-active: var(--ds-button-color-tertiary-yellow-active-border);
}

.button.is-tertiary-purple:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading) {
  --mod-button-color-text: var(--ds-button-color-tertiary-purple-base-text);
  --mod-button-color-background: var(--ds-button-color-tertiary-purple-base-background);
  --mod-button-color-border: var(--ds-button-color-tertiary-purple-base-border);
  --mod-button-color-text-hover: var(--ds-button-color-tertiary-purple-hover-text);
  --mod-button-color-background-hover: var(--ds-button-color-tertiary-purple-hover-background);
  --mod-button-color-border-hover: var(--ds-button-color-tertiary-purple-hover-border);
  --mod-button-color-text-active: var(--ds-button-color-tertiary-purple-active-text);
  --mod-button-color-background-active: var(--ds-button-color-tertiary-purple-active-background);
  --mod-button-color-border-active: var(--ds-button-color-tertiary-purple-active-border);
}

.button.is-tertiary-green:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading) {
  --mod-button-color-text: var(--ds-button-color-tertiary-green-base-text);
  --mod-button-color-background: var(--ds-button-color-tertiary-green-base-background);
  --mod-button-color-border: var(--ds-button-color-tertiary-green-base-border);
  --mod-button-color-text-hover: var(--ds-button-color-tertiary-green-hover-text);
  --mod-button-color-background-hover: var(--ds-button-color-tertiary-green-hover-background);
  --mod-button-color-border-hover: var(--ds-button-color-tertiary-green-hover-border);
  --mod-button-color-text-active: var(--ds-button-color-tertiary-green-active-text);
  --mod-button-color-background-active: var(--ds-button-color-tertiary-green-active-background);
  --mod-button-color-border-active: var(--ds-button-color-tertiary-green-active-border);
}

.button.is-tertiary-red:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading) {
  --mod-button-color-text: var(--ds-button-color-tertiary-red-base-text);
  --mod-button-color-background: var(--ds-button-color-tertiary-red-base-background);
  --mod-button-color-border: var(--ds-button-color-tertiary-red-base-border);
  --mod-button-color-text-hover: var(--ds-button-color-tertiary-red-hover-text);
  --mod-button-color-background-hover: var(--ds-button-color-tertiary-red-hover-background);
  --mod-button-color-border-hover: var(--ds-button-color-tertiary-red-hover-border);
  --mod-button-color-text-active: var(--ds-button-color-tertiary-red-active-text);
  --mod-button-color-background-active: var(--ds-button-color-tertiary-red-active-background);
  --mod-button-color-border-active: var(--ds-button-color-tertiary-red-active-border);
}

.button.is-info:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading) {
  --mod-button-color-text: var(--ds-button-color-info-base-text);
  --mod-button-color-background: var(--ds-button-color-info-base-background);
  --mod-button-color-border: var(--ds-button-color-info-base-border);
  --mod-button-color-text-hover: var(--ds-button-color-info-hover-text);
  --mod-button-color-background-hover: var(--ds-button-color-info-hover-background);
  --mod-button-color-border-hover: var(--ds-button-color-info-hover-border);
  --mod-button-color-text-active: var(--ds-button-color-info-active-text);
  --mod-button-color-background-active: var(--ds-button-color-info-active-background);
  --mod-button-color-border-active: var(--ds-button-color-info-active-border);
}

.button.is-success:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading) {
  --mod-button-color-text: var(--ds-button-color-success-base-text);
  --mod-button-color-background: var(--ds-button-color-success-base-background);
  --mod-button-color-border: var(--ds-button-color-success-base-border);
  --mod-button-color-text-hover: var(--ds-button-color-success-hover-text);
  --mod-button-color-background-hover: var(--ds-button-color-success-hover-background);
  --mod-button-color-border-hover: var(--ds-button-color-success-hover-border);
  --mod-button-color-text-active: var(--ds-button-color-success-active-text);
  --mod-button-color-background-active: var(--ds-button-color-success-active-background);
  --mod-button-color-border-active: var(--ds-button-color-success-active-border);
}

.button.is-warning:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading) {
  --mod-button-color-text: var(--ds-button-color-warning-base-text);
  --mod-button-color-background: var(--ds-button-color-warning-base-background);
  --mod-button-color-border: var(--ds-button-color-warning-base-border);
  --mod-button-color-text-hover: var(--ds-button-color-warning-hover-text);
  --mod-button-color-background-hover: var(--ds-button-color-warning-hover-background);
  --mod-button-color-border-hover: var(--ds-button-color-warning-hover-border);
  --mod-button-color-text-active: var(--ds-button-color-warning-active-text);
  --mod-button-color-background-active: var(--ds-button-color-warning-active-background);
  --mod-button-color-border-active: var(--ds-button-color-warning-active-border);
}

.button.is-danger:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading) {
  --mod-button-color-text: var(--ds-button-color-danger-base-text);
  --mod-button-color-background: var(--ds-button-color-danger-base-background);
  --mod-button-color-border: var(--ds-button-color-danger-base-border);
  --mod-button-color-text-hover: var(--ds-button-color-danger-hover-text);
  --mod-button-color-background-hover: var(--ds-button-color-danger-hover-background);
  --mod-button-color-border-hover: var(--ds-button-color-danger-hover-border);
  --mod-button-color-text-active: var(--ds-button-color-danger-active-text);
  --mod-button-color-background-active: var(--ds-button-color-danger-active-background);
  --mod-button-color-border-active: var(--ds-button-color-danger-active-border);
}

.button.is-link:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading) {
  --mod-button-color-text: var(--ds-button-color-link-base-text);
  --mod-button-color-background: var(--ds-button-color-link-base-background);
  --mod-button-color-border: var(--ds-button-color-link-base-border);
  --mod-button-color-text-hover: var(--ds-button-color-link-hover-text);
  --mod-button-color-background-hover: var(--ds-button-color-link-hover-background);
  --mod-button-color-border-hover: var(--ds-button-color-link-hover-border);
  --mod-button-color-text-active: var(--ds-button-color-link-active-text);
  --mod-button-color-background-active: var(--ds-button-color-link-active-background);
  --mod-button-color-border-active: var(--ds-button-color-link-active-border);
}

.button.is-text:not(.is-inverted):not(.is-dashed):not(.is-disabled):not(.is-loading) {
  --mod-button-color-text: var(--ds-button-color-text-base-text);
  --mod-button-color-background: var(--ds-button-color-text-base-background);
  --mod-button-color-border: var(--ds-button-color-text-base-border);
  --mod-button-color-text-hover: var(--ds-button-color-text-hover-text);
  --mod-button-color-background-hover: var(--ds-button-color-text-hover-background);
  --mod-button-color-border-hover: var(--ds-button-color-text-hover-border);
  --mod-button-color-text-active: var(--ds-button-color-text-active-text);
  --mod-button-color-background-active: var(--ds-button-color-text-active-background);
  --mod-button-color-border-active: var(--ds-button-color-text-active-border);
}

.button.is-primary.is-inverted:not(.is-dashed):not(.is-disabled):not(.is-loading) {
  --mod-button-color-text: var(--ds-button-color-inverted-base-text);
  --mod-button-color-background: var(--ds-button-color-inverted-base-background);
  --mod-button-color-border: var(--ds-button-color-inverted-base-border);
  --mod-button-color-text-hover: var(--ds-button-color-inverted-hover-text);
  --mod-button-color-background-hover: var(--ds-button-color-inverted-hover-background);
  --mod-button-color-border-hover: var(--ds-button-color-inverted-hover-border);
  --mod-button-color-text-active: var(--ds-button-color-inverted-active-text);
  --mod-button-color-background-active: var(--ds-button-color-inverted-active-background);
  --mod-button-color-border-active: var(--ds-button-color-inverted-active-border);
}

.button.is-tertiary-yellow.is-inverted:not(.is-dashed):not(.is-disabled):not(.is-loading) {
  --mod-button-color-text: var(--ds-button-color-inverted-base-text);
  --mod-button-color-background: var(--ds-button-color-inverted-base-background);
  --mod-button-color-border: var(--ds-button-color-inverted-base-border);
  --mod-button-color-text-hover: var(--ds-button-color-inverted-hover-text);
  --mod-button-color-background-hover: var(--ds-button-color-inverted-hover-background);
  --mod-button-color-border-hover: var(--ds-button-color-inverted-hover-border);
  --mod-button-color-text-active: var(--ds-button-color-inverted-active-text);
  --mod-button-color-background-active: var(--ds-button-color-inverted-active-background);
  --mod-button-color-border-active: var(--ds-button-color-inverted-active-border);
}

.button.is-tertiary-purple.is-inverted:not(.is-dashed):not(.is-disabled):not(.is-loading) {
  --mod-button-color-text: var(--ds-button-color-inverted-base-text);
  --mod-button-color-background: var(--ds-button-color-inverted-base-background);
  --mod-button-color-border: var(--ds-button-color-inverted-base-border);
  --mod-button-color-text-hover: var(--ds-button-color-inverted-hover-text);
  --mod-button-color-background-hover: var(--ds-button-color-inverted-hover-background);
  --mod-button-color-border-hover: var(--ds-button-color-inverted-hover-border);
  --mod-button-color-text-active: var(--ds-button-color-inverted-active-text);
  --mod-button-color-background-active: var(--ds-button-color-inverted-active-background);
  --mod-button-color-border-active: var(--ds-button-color-inverted-active-border);
}

.button.is-tertiary-green.is-inverted:not(.is-dashed):not(.is-disabled):not(.is-loading) {
  --mod-button-color-text: var(--ds-button-color-inverted-base-text);
  --mod-button-color-background: var(--ds-button-color-inverted-base-background);
  --mod-button-color-border: var(--ds-button-color-inverted-base-border);
  --mod-button-color-text-hover: var(--ds-button-color-inverted-hover-text);
  --mod-button-color-background-hover: var(--ds-button-color-inverted-hover-background);
  --mod-button-color-border-hover: var(--ds-button-color-inverted-hover-border);
  --mod-button-color-text-active: var(--ds-button-color-inverted-active-text);
  --mod-button-color-background-active: var(--ds-button-color-inverted-active-background);
  --mod-button-color-border-active: var(--ds-button-color-inverted-active-border);
}

.button.is-tertiary-red.is-inverted:not(.is-dashed):not(.is-disabled):not(.is-loading) {
  --mod-button-color-text: var(--ds-button-color-inverted-base-text);
  --mod-button-color-background: var(--ds-button-color-inverted-base-background);
  --mod-button-color-border: var(--ds-button-color-inverted-base-border);
  --mod-button-color-text-hover: var(--ds-button-color-inverted-hover-text);
  --mod-button-color-background-hover: var(--ds-button-color-inverted-hover-background);
  --mod-button-color-border-hover: var(--ds-button-color-inverted-hover-border);
  --mod-button-color-text-active: var(--ds-button-color-inverted-active-text);
  --mod-button-color-background-active: var(--ds-button-color-inverted-active-background);
  --mod-button-color-border-active: var(--ds-button-color-inverted-active-border);
}

.button.is-info.is-inverted:not(.is-dashed):not(.is-disabled):not(.is-loading) {
  --mod-button-color-text: var(--ds-button-color-inverted-base-text);
  --mod-button-color-background: var(--ds-button-color-inverted-base-background);
  --mod-button-color-border: var(--ds-button-color-inverted-base-border);
  --mod-button-color-text-hover: var(--ds-button-color-inverted-hover-text);
  --mod-button-color-background-hover: var(--ds-button-color-inverted-hover-background);
  --mod-button-color-border-hover: var(--ds-button-color-inverted-hover-border);
  --mod-button-color-text-active: var(--ds-button-color-inverted-active-text);
  --mod-button-color-background-active: var(--ds-button-color-inverted-active-background);
  --mod-button-color-border-active: var(--ds-button-color-inverted-active-border);
}

.button.is-success.is-inverted:not(.is-dashed):not(.is-disabled):not(.is-loading) {
  --mod-button-color-text: var(--ds-button-color-inverted-base-text);
  --mod-button-color-background: var(--ds-button-color-inverted-base-background);
  --mod-button-color-border: var(--ds-button-color-inverted-base-border);
  --mod-button-color-text-hover: var(--ds-button-color-inverted-hover-text);
  --mod-button-color-background-hover: var(--ds-button-color-inverted-hover-background);
  --mod-button-color-border-hover: var(--ds-button-color-inverted-hover-border);
  --mod-button-color-text-active: var(--ds-button-color-inverted-active-text);
  --mod-button-color-background-active: var(--ds-button-color-inverted-active-background);
  --mod-button-color-border-active: var(--ds-button-color-inverted-active-border);
}

.button.is-warning.is-inverted:not(.is-dashed):not(.is-disabled):not(.is-loading) {
  --mod-button-color-text: var(--ds-button-color-inverted-base-text);
  --mod-button-color-background: var(--ds-button-color-inverted-base-background);
  --mod-button-color-border: var(--ds-button-color-inverted-base-border);
  --mod-button-color-text-hover: var(--ds-button-color-inverted-hover-text);
  --mod-button-color-background-hover: var(--ds-button-color-inverted-hover-background);
  --mod-button-color-border-hover: var(--ds-button-color-inverted-hover-border);
  --mod-button-color-text-active: var(--ds-button-color-inverted-active-text);
  --mod-button-color-background-active: var(--ds-button-color-inverted-active-background);
  --mod-button-color-border-active: var(--ds-button-color-inverted-active-border);
}

.button.is-danger.is-inverted:not(.is-dashed):not(.is-disabled):not(.is-loading) {
  --mod-button-color-text: var(--ds-button-color-inverted-base-text);
  --mod-button-color-background: var(--ds-button-color-inverted-base-background);
  --mod-button-color-border: var(--ds-button-color-inverted-base-border);
  --mod-button-color-text-hover: var(--ds-button-color-inverted-hover-text);
  --mod-button-color-background-hover: var(--ds-button-color-inverted-hover-background);
  --mod-button-color-border-hover: var(--ds-button-color-inverted-hover-border);
  --mod-button-color-text-active: var(--ds-button-color-inverted-active-text);
  --mod-button-color-background-active: var(--ds-button-color-inverted-active-background);
  --mod-button-color-border-active: var(--ds-button-color-inverted-active-border);
}

.button.is-secondary.is-inverted:not(.is-disabled):not(.is-loading) {
  --mod-button-color-text: var(--ds-button-color-inverted-secondary-base-text);
  --mod-button-color-background: var(--ds-button-color-inverted-secondary-base-background);
  --mod-button-color-border: var(--ds-button-color-inverted-secondary-base-border);
  --mod-button-color-text-hover: var(--ds-button-color-inverted-secondary-hover-text);
  --mod-button-color-background-hover: var(--ds-button-color-inverted-secondary-hover-background);
  --mod-button-color-border-hover: var(--ds-button-color-inverted-secondary-hover-border);
  --mod-button-color-text-active: var(--ds-button-color-inverted-secondary-active-text);
  --mod-button-color-background-active: var(--ds-button-color-inverted-secondary-active-background);
  --mod-button-color-border-active: var(--ds-button-color-inverted-secondary-active-border);
}

.button.is-tertiary.is-inverted:not(.is-disabled):not(.is-loading) {
  --mod-button-color-text: var(--ds-button-color-inverted-tertiary-base-text);
  --mod-button-color-background: var(--ds-button-color-inverted-tertiary-base-background);
  --mod-button-color-border: var(--ds-button-color-inverted-tertiary-base-border);
  --mod-button-color-text-hover: var(--ds-button-color-inverted-tertiary-hover-text);
  --mod-button-color-background-hover: var(--ds-button-color-inverted-tertiary-hover-background);
  --mod-button-color-border-hover: var(--ds-button-color-inverted-tertiary-hover-border);
  --mod-button-color-text-active: var(--ds-button-color-inverted-tertiary-active-text);
  --mod-button-color-background-active: var(--ds-button-color-inverted-tertiary-active-background);
  --mod-button-color-border-active: var(--ds-button-color-inverted-tertiary-active-border);
}

.button.is-text.is-inverted:not(.is-disabled):not(.is-loading) {
  --mod-button-color-text: var(--ds-button-color-inverted-text-base-text);
  --mod-button-color-background: var(--ds-button-color-inverted-text-base-background);
  --mod-button-color-border: var(--ds-button-color-inverted-text-base-border);
  --mod-button-color-text-hover: var(--ds-button-color-inverted-text-hover-text);
  --mod-button-color-background-hover: var(--ds-button-color-inverted-text-hover-background);
  --mod-button-color-border-hover: var(--ds-button-color-inverted-text-hover-border);
  --mod-button-color-text-active: var(--ds-button-color-inverted-text-active-text);
  --mod-button-color-background-active: var(--ds-button-color-inverted-text-active-background);
  --mod-button-color-border-active: var(--ds-button-color-inverted-text-active-border);
}

.button.is-link.is-inverted:not(.is-disabled):not(.is-loading) {
  --mod-button-color-text: var(--ds-button-color-inverted-link-base-text);
  --mod-button-color-background: var(--ds-button-color-inverted-link-base-background);
  --mod-button-color-border: var(--ds-button-color-inverted-link-base-border);
  --mod-button-color-text-hover: var(--ds-button-color-inverted-link-hover-text);
  --mod-button-color-background-hover: var(--ds-button-color-inverted-link-hover-background);
  --mod-button-color-border-hover: var(--ds-button-color-inverted-link-hover-border);
  --mod-button-color-text-active: var(--ds-button-color-inverted-link-active-text);
  --mod-button-color-background-active: var(--ds-button-color-inverted-link-active-background);
  --mod-button-color-border-active: var(--ds-button-color-inverted-link-active-border);
}

.button.is-sm, .button.is-small {
  --mod-button-font-size: var(--ds-button-size-sm);
  --mod-button-min-height: 2rem;
  --mod-button-min-width: 2rem;
  --mod-button-padding-inline: 0.75rem;
}

.button.is-lg, .button.is-large {
  --mod-button-font-size: var(--ds-button-size-lg);
  --mod-button-min-height: 3.5rem;
  --mod-button-min-width: 3.5rem;
  --mod-button-padding-inline: 1.5rem;
}

.button.is-xl {
  --mod-button-font-size: var(--ds-button-size-xl);
  --mod-button-min-height: 5.5rem;
  --mod-button-min-width: 5.5rem;
  --mod-button-padding-inline: 1.5rem;
}

.button.is-flat {
  --mod-button-padding-inline: 0;
  --mod-button-min-height: 1.75rem;
}

.button.is-rounded {
  --mod-button-radius: var(--ds-button-radius-rounded);
}

.button.is-square:not(.is-sm), .button.is-square:not(.is-small) {
  --mod-button-padding-inline: 0;
  --mod-button-gap: 0;
  --mod-button-min-height: 3rem;
  --mod-button-min-width: 3rem;
  --icon-size: 1.5rem;
}
.button.is-square.is-sm, .button.is-square.is-small {
  --mod-button-padding-inline: 0;
  --mod-button-gap: 0;
  --mod-button-min-height: 2rem;
  --mod-button-min-width: 2rem;
  --icon-size: var(--ds-icon-size-sm);
}

.button.is-circle:not(.is-sm), .button.is-circle:not(.is-small) {
  --mod-button-radius: var(--ds-button-radius-rounded);
  --mod-button-padding-inline: 0;
  --mod-button-gap: 0;
  --mod-button-min-height: 3rem;
  --mod-button-min-width: 3rem;
  --icon-size: 1.5rem;
}
.button.is-circle.is-small, .button.is-circle.is-sm {
  --mod-button-radius: var(--ds-button-radius-rounded);
  --mod-button-padding-inline: 0;
  --mod-button-gap: 0;
  --mod-button-min-height: 2rem;
  --mod-button-min-width: 2rem;
  --icon-size: var(--ds-icon-size-sm);
}

.button.is-tertiary-purple.is-dashed {
  --mod-button-border-style: dashed;
  --icon-shape: var(--_button-color-border);
  --mod-button-color-text: var(--ds-button-color-tertiary-purple-dashed-base-text);
  --mod-button-color-background: var(--ds-button-color-tertiary-purple-dashed-base-background);
  --mod-button-color-border: var(--ds-button-color-tertiary-purple-dashed-base-border);
  --mod-button-color-text-hover: var(--ds-button-color-tertiary-purple-dashed-hover-text);
  --mod-button-color-background-hover: var(--ds-button-color-tertiary-purple-dashed-hover-background);
  --mod-button-color-border-hover: var(--ds-button-color-tertiary-purple-dashed-hover-border);
  --mod-button-color-text-active: var(--ds-button-color-tertiary-purple-dashed-active-text);
  --mod-button-color-background-active: var(--ds-button-color-tertiary-purple-dashed-active-background);
  --mod-button-color-border-active: var(--ds-button-color-tertiary-purple-dashed-active-border);
}

.button.is-tertiary-red.is-dashed {
  --mod-button-border-style: dashed;
  --icon-shape: var(--_button-color-border);
  --mod-button-color-text: var(--ds-button-color-tertiary-red-dashed-base-text);
  --mod-button-color-background: var(--ds-button-color-tertiary-red-dashed-base-background);
  --mod-button-color-border: var(--ds-button-color-tertiary-red-dashed-base-border);
  --mod-button-color-text-hover: var(--ds-button-color-tertiary-red-dashed-hover-text);
  --mod-button-color-background-hover: var(--ds-button-color-tertiary-red-dashed-hover-background);
  --mod-button-color-border-hover: var(--ds-button-color-tertiary-red-dashed-hover-border);
  --mod-button-color-text-active: var(--ds-button-color-tertiary-red-dashed-active-text);
  --mod-button-color-background-active: var(--ds-button-color-tertiary-red-dashed-active-background);
  --mod-button-color-border-active: var(--ds-button-color-tertiary-red-dashed-active-border);
}

.button.is-tertiary-green.is-dashed {
  --mod-button-border-style: dashed;
  --icon-shape: var(--_button-color-border);
  --mod-button-color-text: var(--ds-button-color-tertiary-green-dashed-base-text);
  --mod-button-color-background: var(--ds-button-color-tertiary-green-dashed-base-background);
  --mod-button-color-border: var(--ds-button-color-tertiary-green-dashed-base-border);
  --mod-button-color-text-hover: var(--ds-button-color-tertiary-green-dashed-hover-text);
  --mod-button-color-background-hover: var(--ds-button-color-tertiary-green-dashed-hover-background);
  --mod-button-color-border-hover: var(--ds-button-color-tertiary-green-dashed-hover-border);
  --mod-button-color-text-active: var(--ds-button-color-tertiary-green-dashed-active-text);
  --mod-button-color-background-active: var(--ds-button-color-tertiary-green-dashed-active-background);
  --mod-button-color-border-active: var(--ds-button-color-tertiary-green-dashed-active-border);
}

.button.is-tertiary-yellow.is-dashed {
  --mod-button-border-style: dashed;
  --icon-shape: var(--_button-color-border);
  --mod-button-color-text: var(--ds-button-color-tertiary-yellow-dashed-base-text);
  --mod-button-color-background: var(--ds-button-color-tertiary-yellow-dashed-base-background);
  --mod-button-color-border: var(--ds-button-color-tertiary-yellow-dashed-base-border);
  --mod-button-color-text-hover: var(--ds-button-color-tertiary-yellow-dashed-hover-text);
  --mod-button-color-background-hover: var(--ds-button-color-tertiary-yellow-dashed-hover-background);
  --mod-button-color-border-hover: var(--ds-button-color-tertiary-yellow-dashed-hover-border);
  --mod-button-color-text-active: var(--ds-button-color-tertiary-yellow-dashed-active-text);
  --mod-button-color-background-active: var(--ds-button-color-tertiary-yellow-dashed-active-background);
  --mod-button-color-border-active: var(--ds-button-color-tertiary-yellow-dashed-active-border);
}

.button.has-shadow:not(.is-link, .is-text) {
  --mod-button-box-shadow: var(--ds-alias-shadow-box-base);
}
.button.is-text.has-shadow, .button.is-link.has-shadow {
  --mod-button-text-shadow: var(--ds-alias-shadow-text);
}

.button.has-no-wrap {
  display: inline-block;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: -moz-available;
  max-width: -webkit-fill-available;
  max-width: stretch;
}

.button:is(input[type=checkbox], input[type=radio])[aria-label]::after {
  --_button-content: attr(aria-label);
  content: var(--_button-content);
}
.button:is(input[type=checkbox], input[type=radio]) {
  --mod-button-color-text: var(--ds-button-color-secondary-base-text);
  --mod-button-color-background: var(--ds-button-color-secondary-base-background);
  --mod-button-color-border: var(--ds-button-color-secondary-base-border);
  --mod-button-color-text-hover: var(--ds-button-color-secondary-hover-text);
  --mod-button-color-background-hover: var(--ds-button-color-secondary-hover-background);
  --mod-button-color-border-hover: var(--ds-button-color-secondary-hover-border);
  --mod-button-color-text-active: var(--ds-button-color-secondary-active-text);
  --mod-button-color-background-active: var(--ds-button-color-secondary-active-background);
  --mod-button-color-border-active: var(--ds-button-color-secondary-active-border);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  vertical-align: middle;
}
.button:is(input[type=checkbox], input[type=radio]):where(input:checked) {
  --mod-button-color-text: var(--ds-button-color-primary-base-text);
  --mod-button-color-background: var(--ds-button-color-primary-base-background);
  --mod-button-color-border: var(--ds-button-color-primary-base-border);
  --mod-button-color-text-hover: var(--ds-button-color-primary-hover-text);
  --mod-button-color-background-hover: var(--ds-button-color-primary-hover-background);
  --mod-button-color-border-hover: var(--ds-button-color-primary-hover-border);
  --mod-button-color-text-active: var(--ds-button-color-primary-active-text);
  --mod-button-color-background-active: var(--ds-button-color-primary-active-background);
  --mod-button-color-border-active: var(--ds-button-color-primary-active-border);
  isolation: isolate;
}

fieldset[disabled] .button, fieldset[disabled] .button:hover, fieldset[disabled] .button.is-hovered, fieldset[disabled] .button:active, fieldset[disabled] .button.is-pressed, fieldset[disabled] .button:focus, fieldset[disabled] .button.is-focused,
.button.is-loading,
.button.is-loading:hover,
.button.is-loading.is-hovered,
.button.is-loading:active,
.button.is-loading.is-pressed,
.button.is-loading:focus,
.button.is-loading.is-focused,
.button.is-disabled,
.button.is-disabled:hover,
.button.is-disabled.is-hovered,
.button.is-disabled:active,
.button.is-disabled.is-pressed,
.button.is-disabled:focus,
.button.is-disabled.is-focused,
.button.is-inverted.is-disabled,
.button.is-inverted.is-disabled:hover,
.button.is-inverted.is-disabled.is-hovered,
.button.is-inverted.is-disabled:active,
.button.is-inverted.is-disabled.is-pressed,
.button.is-inverted.is-disabled:focus,
.button.is-inverted.is-disabled.is-focused,
.button[disabled],
.button[disabled]:hover,
.button[disabled].is-hovered,
.button[disabled]:active,
.button[disabled].is-pressed,
.button[disabled]:focus,
.button[disabled].is-focused {
  pointer-events: none;
  opacity: 1;
  box-shadow: none;
  text-decoration: none;
  cursor: default;
  translate: 0 0;
  background-color: var(--ds-button-color-disabled-base-background);
  border-color: var(--ds-button-color-disabled-base-border);
  color: var(--ds-button-color-disabled-base-text);
}
fieldset[disabled] .button > ds-icon, fieldset[disabled] .button:hover > ds-icon, fieldset[disabled] .button.is-hovered > ds-icon, fieldset[disabled] .button:active > ds-icon, fieldset[disabled] .button.is-pressed > ds-icon, fieldset[disabled] .button:focus > ds-icon, fieldset[disabled] .button.is-focused > ds-icon,
.button.is-loading > ds-icon,
.button.is-loading:hover > ds-icon,
.button.is-loading.is-hovered > ds-icon,
.button.is-loading:active > ds-icon,
.button.is-loading.is-pressed > ds-icon,
.button.is-loading:focus > ds-icon,
.button.is-loading.is-focused > ds-icon,
.button.is-disabled > ds-icon,
.button.is-disabled:hover > ds-icon,
.button.is-disabled.is-hovered > ds-icon,
.button.is-disabled:active > ds-icon,
.button.is-disabled.is-pressed > ds-icon,
.button.is-disabled:focus > ds-icon,
.button.is-disabled.is-focused > ds-icon,
.button.is-inverted.is-disabled > ds-icon,
.button.is-inverted.is-disabled:hover > ds-icon,
.button.is-inverted.is-disabled.is-hovered > ds-icon,
.button.is-inverted.is-disabled:active > ds-icon,
.button.is-inverted.is-disabled.is-pressed > ds-icon,
.button.is-inverted.is-disabled:focus > ds-icon,
.button.is-inverted.is-disabled.is-focused > ds-icon,
.button[disabled] > ds-icon,
.button[disabled]:hover > ds-icon,
.button[disabled].is-hovered > ds-icon,
.button[disabled]:active > ds-icon,
.button[disabled].is-pressed > ds-icon,
.button[disabled]:focus > ds-icon,
.button[disabled].is-focused > ds-icon {
  --icon-color: var(--ds-button-color-disabled-base-text);
}
fieldset[disabled] .button > ds-spinner, fieldset[disabled] .button:hover > ds-spinner, fieldset[disabled] .button.is-hovered > ds-spinner, fieldset[disabled] .button:active > ds-spinner, fieldset[disabled] .button.is-pressed > ds-spinner, fieldset[disabled] .button:focus > ds-spinner, fieldset[disabled] .button.is-focused > ds-spinner,
.button.is-loading > ds-spinner,
.button.is-loading:hover > ds-spinner,
.button.is-loading.is-hovered > ds-spinner,
.button.is-loading:active > ds-spinner,
.button.is-loading.is-pressed > ds-spinner,
.button.is-loading:focus > ds-spinner,
.button.is-loading.is-focused > ds-spinner,
.button.is-disabled > ds-spinner,
.button.is-disabled:hover > ds-spinner,
.button.is-disabled.is-hovered > ds-spinner,
.button.is-disabled:active > ds-spinner,
.button.is-disabled.is-pressed > ds-spinner,
.button.is-disabled:focus > ds-spinner,
.button.is-disabled.is-focused > ds-spinner,
.button.is-inverted.is-disabled > ds-spinner,
.button.is-inverted.is-disabled:hover > ds-spinner,
.button.is-inverted.is-disabled.is-hovered > ds-spinner,
.button.is-inverted.is-disabled:active > ds-spinner,
.button.is-inverted.is-disabled.is-pressed > ds-spinner,
.button.is-inverted.is-disabled:focus > ds-spinner,
.button.is-inverted.is-disabled.is-focused > ds-spinner,
.button[disabled] > ds-spinner,
.button[disabled]:hover > ds-spinner,
.button[disabled].is-hovered > ds-spinner,
.button[disabled]:active > ds-spinner,
.button[disabled].is-pressed > ds-spinner,
.button[disabled]:focus > ds-spinner,
.button[disabled].is-focused > ds-spinner {
  --spinner-color: var(--ds-button-color-disabled-base-text);
}
fieldset[disabled] .button > ds-spinner.is-circle, fieldset[disabled] .button:hover > ds-spinner.is-circle, fieldset[disabled] .button.is-hovered > ds-spinner.is-circle, fieldset[disabled] .button:active > ds-spinner.is-circle, fieldset[disabled] .button.is-pressed > ds-spinner.is-circle, fieldset[disabled] .button:focus > ds-spinner.is-circle, fieldset[disabled] .button.is-focused > ds-spinner.is-circle,
.button.is-loading > ds-spinner.is-circle,
.button.is-loading:hover > ds-spinner.is-circle,
.button.is-loading.is-hovered > ds-spinner.is-circle,
.button.is-loading:active > ds-spinner.is-circle,
.button.is-loading.is-pressed > ds-spinner.is-circle,
.button.is-loading:focus > ds-spinner.is-circle,
.button.is-loading.is-focused > ds-spinner.is-circle,
.button.is-disabled > ds-spinner.is-circle,
.button.is-disabled:hover > ds-spinner.is-circle,
.button.is-disabled.is-hovered > ds-spinner.is-circle,
.button.is-disabled:active > ds-spinner.is-circle,
.button.is-disabled.is-pressed > ds-spinner.is-circle,
.button.is-disabled:focus > ds-spinner.is-circle,
.button.is-disabled.is-focused > ds-spinner.is-circle,
.button.is-inverted.is-disabled > ds-spinner.is-circle,
.button.is-inverted.is-disabled:hover > ds-spinner.is-circle,
.button.is-inverted.is-disabled.is-hovered > ds-spinner.is-circle,
.button.is-inverted.is-disabled:active > ds-spinner.is-circle,
.button.is-inverted.is-disabled.is-pressed > ds-spinner.is-circle,
.button.is-inverted.is-disabled:focus > ds-spinner.is-circle,
.button.is-inverted.is-disabled.is-focused > ds-spinner.is-circle,
.button[disabled] > ds-spinner.is-circle,
.button[disabled]:hover > ds-spinner.is-circle,
.button[disabled].is-hovered > ds-spinner.is-circle,
.button[disabled]:active > ds-spinner.is-circle,
.button[disabled].is-pressed > ds-spinner.is-circle,
.button[disabled]:focus > ds-spinner.is-circle,
.button[disabled].is-focused > ds-spinner.is-circle {
  --spinner-circle-color-border-background: var(--ds-global-color-grey-4);
  --spinner-circle-color-border-progress: var(--ds-button-color-disabled-base-text);
}

.buttons {
  --_buttons-align-items: var(--buttons-align-items, var(--mod-buttons-align-items, center));
  --_buttons-justify-content: var(--buttons-justify-content, var(--mod-buttons-justify-content, flex-start));
  --_buttons-direction: var(--buttons-direction, var(--mod-buttons-direction, row));
  --_buttons-gap: var(--buttons-gap, var(--mod-buttons-gap, 0.25rem));
  --_buttons-wrap: var(--buttons-wrap, var(--mod-buttons-wrap, wrap));
  display: flex;
  gap: var(--_buttons-gap);
  flex-direction: var(--_buttons-direction);
  align-items: var(--_buttons-align-items);
  justify-content: var(--_buttons-justify-content);
  flex-wrap: var(--_buttons-wrap);
  width: 100%;
}
@media screen and (max-width: 768px) {
  .buttons ::slotted(.button:not(.is-square, .is-circle)),
  .buttons .button:not(.is-square, .is-circle) {
    flex: 1 1 auto;
  }
  .buttons ::slotted(ds-button:not(.is-square, .is-circle)),
  .buttons ds-button:not(.is-square, .is-circle) {
    flex: 1 1 auto;
    --button-width: 100%;
  }
}
.buttons.as-col-reverse {
  --mod-buttons-direction: column-reverse;
}
.buttons.as-row-reverse {
  --mod-buttons-direction: row-reverse;
}
.buttons.as-row {
  --mod-buttons-direction: row;
}
.buttons.as-col {
  --mod-buttons-direction: column;
}
@media screen and (max-width: 768px) {
  .buttons.as-col ::slotted(.button),
  .buttons.as-col .button,
  .buttons.as-col ::slotted(ds-button),
  .buttons.as-col ds-button, .buttons.as-col-reverse ::slotted(.button),
  .buttons.as-col-reverse .button,
  .buttons.as-col-reverse ::slotted(ds-button),
  .buttons.as-col-reverse ds-button {
    width: 100%;
  }
}
@media screen and (min-width: 769px) {
  .buttons.as-col.is-center, .buttons.as-col.is-centered, .buttons.as-col-reverse.is-center, .buttons.as-col-reverse.is-centered {
    --mod-buttons-align-items: center;
  }
  .buttons.as-col.is-left, .buttons.as-col-reverse.is-left {
    --mod-buttons-align-items: flex-start;
  }
  .buttons.as-col.is-right, .buttons.as-col-reverse.is-right {
    --mod-buttons-align-items: flex-end;
  }
}
@media screen and (min-width: 769px) {
  .buttons.as-row.is-center, .buttons.as-row.is-centered, .buttons.is-center:not(.as-col), .buttons.is-centered:not(.as-col) {
    --mod-buttons-justify-content: center;
  }
  .buttons.as-row.is-left, .buttons.is-left:not(.as-col) {
    --mod-buttons-justify-content: flex-start;
  }
  .buttons.as-row.is-right, .buttons.is-right:not(.as-col) {
    --mod-buttons-justify-content: flex-end;
  }
}
@media screen and (min-width: 769px) {
  .buttons.is-wide ::slotted(.button:not(.is-square, .is-circle)),
  .buttons.is-wide .button:not(.is-square, .is-circle),
  .buttons.is-wide ::slotted(ds-button:not(.is-square, .is-circle)),
  .buttons.is-wide ds-button:not(.is-square, .is-circle) {
    flex: 1 1 auto;
    --button-width: 100%;
  }
}

/**
 * Variables
 * --------------------------------
 * Define here the css variables for the component to be able to use it in host or non-host mode
 * These variables can be used in the component styles below and later on be overridden in themes.
 */
.card {
  --_card-position: var(--card-position, var(--mod-card-position, static));
  --_card-top: var(--card-top, var(--mod-card-top));
  --_card-right: var(--card-right, var(--mod-card-right));
  --_card-bottom: var(--card-bottom, var(--mod-card-bottom));
  --_card-left: var(--card-left, var(--mod-card-left));
  position: var(--_card-position);
  top: var(--_card-top);
  right: var(--_card-right);
  bottom: var(--_card-bottom);
  left: var(--_card-left);
  --_card-m: var(--card-m, var(--mod-card-m, 0));
  --_card-my: var(--card-my, var(--mod-card-my));
  --_card-mx: var(--card-mx, var(--mod-card-mx));
  --_card-ml: var(--card-ml, var(--mod-card-ml));
  --_card-mr: var(--card-mr, var(--mod-card-mr));
  --_card-mt: var(--card-mt, var(--mod-card-mt));
  --_card-mb: var(--card-mb, var(--mod-card-mb));
  margin: var(--_card-m);
  margin-inline: var(--_card-mx);
  margin-block: var(--_card-my);
  margin-left: var(--_card-ml);
  margin-right: var(--_card-mr);
  margin-top: var(--_card-mt);
  margin-bottom: var(--_card-mb);
  --_card-color-background: var(--card-color-background, var(--mod-card-color-background, var(--ds-card-color-base-background)));
  --_card-color-text: var(--card-color-text, var(--mod-card-color-text, var(--ds-card-color-base-text)));
  --_card-color-border: var(--card-color-border, var(--mod-card-color-border, var(--ds-card-color-base-border, transparent)));
  --_card-radius: var(--card-radius, var(--mod-card-radius, var(--ds-card-radius-base)));
  --_card-border-width: var(--card-border-width, var(--mod-card-border-width, 0rem));
  --_card-border-style: var(--card-border-style, var(--mod-card-border-style, solid));
  --_card-shadow: var(--card-shadow, var(--mod-card-shadow, var(--ds-card-shadow-base)));
  --_card-gap: var(--card-gap, var(--mod-card-gap, var(--ds-card-space-base-device)));
  --_card-padding-left: var(--card-padding-left, var(--mod-card-padding-left, var(--ds-card-space-base-device)));
  --_card-padding-right: var(--card-padding-right, var(--mod-card-padding-right, var(--ds-card-space-base-device)));
  --_card-padding-top: var(--card-padding-top, var(--mod-card-padding-top, var(--ds-card-space-base-device)));
  --_card-padding-bottom: var(--card-padding-bottom, var(--mod-card-padding-bottom, var(--ds-card-space-base-device)));
  --_card-header-grid-template-columns: var(--card-header-grid-template-columns, var(--mod-card-header-grid-template-columns, 1fr auto));
  --_card-header-margin-left: var(--card-header-margin-left, var(--mod-card-header-margin-left, 0));
  --_card-header-grid-template-areas: var(
    --card-header-grid-template-areas,
    var(--mod-card-header-grid-template-areas, 'title .' 'subtitle subtitle')
  );
}

/**
  * Basic Component Styles
  * --------------------------------
  * Define here the component styles using the mixin to support host and non-host mode for hybrid components.
  */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  color: var(--_card-color-text);
  background-color: var(--_card-color-background);
  border-radius: var(--_card-radius);
  border-color: var(--_card-color-border);
  border-width: var(--_card-border-width);
  border-style: var(--_card-border-style);
  box-shadow: var(--_card-shadow);
  gap: var(--_card-gap);
  padding-left: calc(var(--_card-padding-left) - var(--_card-border-width));
  padding-right: calc(var(--_card-padding-right) - var(--_card-border-width));
  padding-top: calc(var(--_card-padding-top) - var(--_card-border-width));
  padding-bottom: calc(var(--_card-padding-bottom) - var(--_card-border-width));
  text-decoration: none;
}
.card .card-header {
  --button-font-size: var(--ds-button-size-sm);
  --button-min-height: 2rem;
  --button-min-width: 2rem;
  --button-padding-inline: 0.75rem;
  --tags-display: flex;
  --tags-mt: 0.25rem;
}
@media screen and (min-width: 769px) {
  .card .card-header {
    --buttons-wrap: nowrap;
    --tags-display: inline-flex;
    --tags-mt: 0;
  }
}
.card .card-header {
  -moz-column-gap: calc(var(--_card-gap) / 2);
       column-gap: calc(var(--_card-gap) / 2);
  display: grid;
  align-items: start;
  grid-auto-rows: auto;
  margin-left: var(--_card-header-margin-left);
  grid-template-columns: var(--_card-header-grid-template-columns);
  grid-template-areas: var(--_card-header-grid-template-areas);
}
.card .card-header ds-icon,
.card .card-header ::slotted(ds-icon) {
  grid-area: icon;
}
.card .card-header > .tag, .card .card-header > .tags, .card .card-header > ds-tag, .card .card-header > ds-tag-group,
.card .card-header ::slotted(ds-tag),
.card .card-header ::slotted(ds-tag-group) {
  grid-area: tag;
  margin-bottom: 1rem;
}
.card .card-header .title,
.card .card-header ds-card-title {
  grid-area: title;
}
.card .card-header > p,
.card .card-header .subtitle,
.card .card-header ds-card-subtitle {
  grid-area: subtitle;
}
.card .card-header .title,
.card .card-header .subtitle,
.card .card-header .heading {
  margin: 0;
}
.card .card-content {
  font-family: var(--ds-alias-text-family-body);
  font-weight: var(--ds-alias-text-weight-regular);
}
.card .card-content strong,
.card .card-content b {
  font-weight: var(--ds-alias-text-weight-bold);
}
.card .card-content h1,
.card .card-content h2,
.card .card-content h3,
.card .card-content h4,
.card .card-content h5,
.card .card-content h6,
.card .card-content ds-heading {
  font-family: var(--ds-alias-text-family-heading);
  font-weight: var(--ds-heading-font-weight);
}
.card .card-content h1,
.card .card-content [role=heading][aria-level="1"] {
  font-size: var(--ds-heading-1-size-device);
}
.card .card-content h2,
.card .card-content [role=heading][aria-level="2"] {
  font-size: var(--ds-heading-2-size-device);
}
.card .card-content h3,
.card .card-content [role=heading][aria-level="3"] {
  font-size: var(--ds-heading-3-size-device);
}
.card .card-content h4,
.card .card-content [role=heading][aria-level="4"] {
  font-size: var(--ds-heading-4-size-device);
}
.card .card-content h5,
.card .card-content [role=heading][aria-level="5"] {
  font-size: var(--ds-heading-5-size-device);
}
.card .card-content ds-heading:not(:last-child),
.card .card-content h1:is(.title, .subtitle, .heading):not(:last-child) {
  --heading-mb: var(--ds-alias-space-xs-device);
}
.card .card-content h1:not(.title, .subtitle, .heading, :last-child) {
  margin-bottom: var(--ds-alias-space-xs-device);
}
.card .card-content h2:is(.title, .subtitle, .heading):not(:last-child) {
  --heading-mb: var(--ds-alias-space-xs-device);
}
.card .card-content h2:not(.title, .subtitle, .heading, :last-child) {
  margin-bottom: var(--ds-alias-space-xs-device);
}
.card .card-content h3:is(.title, .subtitle, .heading):not(:last-child) {
  --heading-mb: var(--ds-alias-space-xs-device);
}
.card .card-content h3:not(.title, .subtitle, .heading, :last-child) {
  margin-bottom: var(--ds-alias-space-xs-device);
}
.card .card-content h4:is(.title, .subtitle, .heading):not(:last-child) {
  --heading-mb: var(--ds-alias-space-xs-device);
}
.card .card-content h4:not(.title, .subtitle, .heading, :last-child) {
  margin-bottom: var(--ds-alias-space-xs-device);
}
.card .card-content h5:is(.title, .subtitle, .heading):not(:last-child) {
  --heading-mb: var(--ds-alias-space-2xs-device);
}
.card .card-content h5:not(.title, .subtitle, .heading, :last-child) {
  margin-bottom: var(--ds-alias-space-2xs-device);
}
.card .card-content ds-text:not(:last-child),
.card .card-content p.text:not(:last-child) {
  --text-mb: var(--ds-alias-space-base-device);
}
.card .card-content p:not(.text, :last-child) {
  margin-bottom: var(--ds-alias-space-base-device);
}
.card .card-content > :is(h1, h2, h3, h4, h5, h6, ds-heading) + p.text,
.card .card-content > :is(h1, h2, h3, h4, h5, h6, ds-heading) + ds-text {
  --text-mt: var(--ds-alias-space-base-device);
}
.card .card-content > :is(h1, h2, h3, h4, h5, h6, ds-heading) + p:not(.text, ds-text) {
  margin-top: var(--ds-alias-space-base-device);
}
.card .card-actions {
  --_buttons-align-items: var(--buttons-align-items, var(--mod-buttons-align-items, center));
  --_buttons-justify-content: var(--buttons-justify-content, var(--mod-buttons-justify-content, flex-start));
  --_buttons-direction: var(--buttons-direction, var(--mod-buttons-direction, row));
  --_buttons-gap: var(--buttons-gap, var(--mod-buttons-gap, 0.25rem));
  --_buttons-wrap: var(--buttons-wrap, var(--mod-buttons-wrap, wrap));
  display: flex;
  gap: var(--_buttons-gap);
  flex-direction: var(--_buttons-direction);
  align-items: var(--_buttons-align-items);
  justify-content: var(--_buttons-justify-content);
  flex-wrap: var(--_buttons-wrap);
  width: 100%;
}
@media screen and (max-width: 768px) {
  .card .card-actions ::slotted(.button:not(.is-square, .is-circle)),
  .card .card-actions .button:not(.is-square, .is-circle) {
    flex: 1 1 auto;
  }
  .card .card-actions ::slotted(ds-button:not(.is-square, .is-circle)),
  .card .card-actions ds-button:not(.is-square, .is-circle) {
    flex: 1 1 auto;
    --button-width: 100%;
  }
}
.card .card-actions.as-col-reverse {
  --mod-buttons-direction: column-reverse;
}
.card .card-actions.as-row-reverse {
  --mod-buttons-direction: row-reverse;
}
.card .card-actions.as-row {
  --mod-buttons-direction: row;
}
.card .card-actions.as-col {
  --mod-buttons-direction: column;
}
@media screen and (max-width: 768px) {
  .card .card-actions.as-col ::slotted(.button),
  .card .card-actions.as-col .button,
  .card .card-actions.as-col ::slotted(ds-button),
  .card .card-actions.as-col ds-button, .card .card-actions.as-col-reverse ::slotted(.button),
  .card .card-actions.as-col-reverse .button,
  .card .card-actions.as-col-reverse ::slotted(ds-button),
  .card .card-actions.as-col-reverse ds-button {
    width: 100%;
  }
}
@media screen and (min-width: 769px) {
  .card .card-actions.as-col.is-center, .card .card-actions.as-col.is-centered, .card .card-actions.as-col-reverse.is-center, .card .card-actions.as-col-reverse.is-centered {
    --mod-buttons-align-items: center;
  }
  .card .card-actions.as-col.is-left, .card .card-actions.as-col-reverse.is-left {
    --mod-buttons-align-items: flex-start;
  }
  .card .card-actions.as-col.is-right, .card .card-actions.as-col-reverse.is-right {
    --mod-buttons-align-items: flex-end;
  }
}
@media screen and (min-width: 769px) {
  .card .card-actions.as-row.is-center, .card .card-actions.as-row.is-centered, .card .card-actions.is-center:not(.as-col), .card .card-actions.is-centered:not(.as-col) {
    --mod-buttons-justify-content: center;
  }
  .card .card-actions.as-row.is-left, .card .card-actions.is-left:not(.as-col) {
    --mod-buttons-justify-content: flex-start;
  }
  .card .card-actions.as-row.is-right, .card .card-actions.is-right:not(.as-col) {
    --mod-buttons-justify-content: flex-end;
  }
}
@media screen and (min-width: 769px) {
  .card .card-actions.is-wide ::slotted(.button:not(.is-square, .is-circle)),
  .card .card-actions.is-wide .button:not(.is-square, .is-circle),
  .card .card-actions.is-wide ::slotted(ds-button:not(.is-square, .is-circle)),
  .card .card-actions.is-wide ds-button:not(.is-square, .is-circle) {
    flex: 1 1 auto;
    --button-width: 100%;
  }
}
.card.align-center {
  align-items: center;
  --buttons-align-items: center;
  --buttons-justify-content: center;
}
.card.align-right {
  --buttons-align-items: flex-end;
  --buttons-justify-content: flex-end;
}

.card picture {
  --picture-img-radius: var(--_card-radius);
}

.card.is-fullheight {
  height: 100%;
}
.card.is-fullheight .card-content,
.card.is-fullheight .card-content > .stack,
.card.is-fullheight .card-content > .flex,
.card.is-fullheight .card-content > .is-flex {
  height: 100%;
}

.card > .badge:first-child,
.card > ds-badge:first-child {
  --badge-position: absolute;
  --badge-top: 0;
  transform: translate(calc(50% + var(--_card-gap)), -50%);
  align-self: flex-end;
}

.card > .tag.is-center:first-child,
.card > ds-tag[position=center]:first-child {
  --tag-position: absolute;
  --tag-top: 0;
  align-self: center;
  transform: translateY(-50%);
}
.card > .tag.is-left:first-child,
.card > ds-tag[position=left]:first-child {
  --tag-position: absolute;
  --tag-top: 0;
  align-self: flex-start;
  transform: translateY(-50%);
}
.card > .tag.is-right:first-child,
.card > ds-tag[position=right]:first-child {
  --tag-position: absolute;
  --tag-top: 0;
  align-self: flex-end;
  transform: translateY(-50%);
}

/**
  * Variants and States
  * --------------------------------
  * Define here the variants and states like size or colors for the component.
  */
.card.is-square {
  --mod-card-radius: var(--ds-card-radius-square);
}

.card.is-flat {
  --mod-card-radius: var(--ds-card-radius-flat);
  --mod-card-shadow: var(--ds-card-shadow-flat);
}

.card.is-dense {
  --mod-card-shadow: var(--ds-card-shadow-flat);
  --mod-card-padding-left: 0;
  --mod-card-padding-right: 0;
  --mod-card-padding-top: 0;
  --mod-card-padding-bottom: 0;
}

.card.is-outlined {
  --mod-card-shadow: var(--ds-card-shadow-flat);
  --mod-card-border-width: var(--ds-card-outline-width);
  --mod-card-border-style: dashed;
  --mod-card-color-border: var(--ds-card-color-base-outline, transparent);
}

.card.is-white {
  --mod-card-color-background: var(--ds-card-color-white-background);
  --mod-card-color-text: var(--ds-card-color-white-text);
  --mod-card-color-border: var(--ds-card-color-white-border, transparent);
}
.card.is-white.is-outlined {
  --mod-card-color-border: var(--ds-card-color-white-outline, transparent);
}

.card.is-primary {
  --mod-card-color-background: var(--ds-card-color-primary-background);
  --mod-card-color-text: var(--ds-card-color-primary-text);
  --mod-card-color-border: var(--ds-card-color-primary-border, transparent);
}
.card.is-primary.is-outlined {
  --mod-card-color-border: var(--ds-card-color-primary-outline, transparent);
}

.card.is-primary-light {
  --mod-card-color-background: var(--ds-card-color-primary-light-background);
  --mod-card-color-text: var(--ds-card-color-primary-light-text);
  --mod-card-color-border: var(--ds-card-color-primary-light-border, transparent);
}
.card.is-primary-light.is-outlined {
  --mod-card-color-border: var(--ds-card-color-primary-light-outline, transparent);
}

.card.is-info {
  --mod-card-color-background: var(--ds-card-color-info-background);
  --mod-card-color-text: var(--ds-card-color-info-text);
  --mod-card-color-border: var(--ds-card-color-info-border, transparent);
}
.card.is-info.is-outlined {
  --mod-card-color-border: var(--ds-card-color-info-outline, transparent);
}

.card.is-success {
  --mod-card-color-background: var(--ds-card-color-success-background);
  --mod-card-color-text: var(--ds-card-color-success-text);
  --mod-card-color-border: var(--ds-card-color-success-border, transparent);
}
.card.is-success.is-outlined {
  --mod-card-color-border: var(--ds-card-color-success-outline, transparent);
}

.card.is-warning {
  --mod-card-color-background: var(--ds-card-color-warning-background);
  --mod-card-color-text: var(--ds-card-color-warning-text);
  --mod-card-color-border: var(--ds-card-color-warning-border, transparent);
}
.card.is-warning.is-outlined {
  --mod-card-color-border: var(--ds-card-color-warning-outline, transparent);
}

.card.is-danger {
  --mod-card-color-background: var(--ds-card-color-danger-background);
  --mod-card-color-text: var(--ds-card-color-danger-text);
  --mod-card-color-border: var(--ds-card-color-danger-border, transparent);
}
.card.is-danger.is-outlined {
  --mod-card-color-border: var(--ds-card-color-danger-outline, transparent);
}

.card.is-grey {
  --mod-card-color-background: var(--ds-card-color-grey-background);
  --mod-card-color-text: var(--ds-card-color-grey-text);
  --mod-card-color-border: var(--ds-card-color-grey-border, transparent);
}
.card.is-grey.is-outlined {
  --mod-card-color-border: var(--ds-card-color-grey-outline, transparent);
}

.card.is-grey-light {
  --mod-card-color-background: var(--ds-card-color-grey-light-background);
  --mod-card-color-text: var(--ds-card-color-grey-light-text);
  --mod-card-color-border: var(--ds-card-color-grey-light-border, transparent);
}
.card.is-grey-light.is-outlined {
  --mod-card-color-border: var(--ds-card-color-grey-light-outline, transparent);
}

.card.is-red {
  --mod-card-color-background: var(--ds-card-color-red-background);
  --mod-card-color-text: var(--ds-card-color-red-text);
  --mod-card-color-border: var(--ds-card-color-red-border, transparent);
}
.card.is-red.is-outlined {
  --mod-card-color-border: var(--ds-card-color-red-outline, transparent);
}

.card.is-red-light {
  --mod-card-color-background: var(--ds-card-color-red-light-background);
  --mod-card-color-text: var(--ds-card-color-red-light-text);
  --mod-card-color-border: var(--ds-card-color-red-light-border, transparent);
}
.card.is-red-light.is-outlined {
  --mod-card-color-border: var(--ds-card-color-red-light-outline, transparent);
}

.card.is-red-lighter {
  --mod-card-color-background: var(--ds-card-color-red-lighter-background);
  --mod-card-color-text: var(--ds-card-color-red-lighter-text);
  --mod-card-color-border: var(--ds-card-color-red-lighter-border, transparent);
}
.card.is-red-lighter.is-outlined {
  --mod-card-color-border: var(--ds-card-color-red-lighter-outline, transparent);
}

.card.is-green {
  --mod-card-color-background: var(--ds-card-color-green-background);
  --mod-card-color-text: var(--ds-card-color-green-text);
  --mod-card-color-border: var(--ds-card-color-green-border, transparent);
}
.card.is-green.is-outlined {
  --mod-card-color-border: var(--ds-card-color-green-outline, transparent);
}

.card.is-green-light {
  --mod-card-color-background: var(--ds-card-color-green-light-background);
  --mod-card-color-text: var(--ds-card-color-green-light-text);
  --mod-card-color-border: var(--ds-card-color-green-light-border, transparent);
}
.card.is-green-light.is-outlined {
  --mod-card-color-border: var(--ds-card-color-green-light-outline, transparent);
}

.card.is-green-lighter {
  --mod-card-color-background: var(--ds-card-color-green-lighter-background);
  --mod-card-color-text: var(--ds-card-color-green-lighter-text);
  --mod-card-color-border: var(--ds-card-color-green-lighter-border, transparent);
}
.card.is-green-lighter.is-outlined {
  --mod-card-color-border: var(--ds-card-color-green-lighter-outline, transparent);
}

.card.is-purple {
  --mod-card-color-background: var(--ds-card-color-purple-background);
  --mod-card-color-text: var(--ds-card-color-purple-text);
  --mod-card-color-border: var(--ds-card-color-purple-border, transparent);
}
.card.is-purple.is-outlined {
  --mod-card-color-border: var(--ds-card-color-purple-outline, transparent);
}

.card.is-purple-light {
  --mod-card-color-background: var(--ds-card-color-purple-light-background);
  --mod-card-color-text: var(--ds-card-color-purple-light-text);
  --mod-card-color-border: var(--ds-card-color-purple-light-border, transparent);
}
.card.is-purple-light.is-outlined {
  --mod-card-color-border: var(--ds-card-color-purple-light-outline, transparent);
}

.card.is-purple-lighter {
  --mod-card-color-background: var(--ds-card-color-purple-lighter-background);
  --mod-card-color-text: var(--ds-card-color-purple-lighter-text);
  --mod-card-color-border: var(--ds-card-color-purple-lighter-border, transparent);
}
.card.is-purple-lighter.is-outlined {
  --mod-card-color-border: var(--ds-card-color-purple-lighter-outline, transparent);
}

.card.is-yellow {
  --mod-card-color-background: var(--ds-card-color-yellow-background);
  --mod-card-color-text: var(--ds-card-color-yellow-text);
  --mod-card-color-border: var(--ds-card-color-yellow-border, transparent);
}
.card.is-yellow.is-outlined {
  --mod-card-color-border: var(--ds-card-color-yellow-outline, transparent);
}

.card.is-yellow-light {
  --mod-card-color-background: var(--ds-card-color-yellow-light-background);
  --mod-card-color-text: var(--ds-card-color-yellow-light-text);
  --mod-card-color-border: var(--ds-card-color-yellow-light-border, transparent);
}
.card.is-yellow-light.is-outlined {
  --mod-card-color-border: var(--ds-card-color-yellow-light-outline, transparent);
}

.card.is-yellow-lighter {
  --mod-card-color-background: var(--ds-card-color-yellow-lighter-background);
  --mod-card-color-text: var(--ds-card-color-yellow-lighter-text);
  --mod-card-color-border: var(--ds-card-color-yellow-lighter-border, transparent);
}
.card.is-yellow-lighter.is-outlined {
  --mod-card-color-border: var(--ds-card-color-yellow-lighter-outline, transparent);
}

.card.has-space-sm {
  --mod-card-gap: var(--ds-card-space-sm-device);
}
.card.has-space-sm:not(.is-dense) {
  --mod-card-padding-left: var(--ds-card-space-sm-device);
  --mod-card-padding-right: var(--ds-card-space-sm-device);
  --mod-card-padding-top: var(--ds-card-space-sm-device);
  --mod-card-padding-bottom: var(--ds-card-space-sm-device);
}

.card.has-space-md {
  --mod-card-gap: var(--ds-card-space-md-device);
}
.card.has-space-md:not(.is-dense) {
  --mod-card-padding-left: var(--ds-card-space-md-device);
  --mod-card-padding-right: var(--ds-card-space-md-device);
  --mod-card-padding-top: var(--ds-card-space-md-device);
  --mod-card-padding-bottom: var(--ds-card-space-md-device);
}

.card.has-space-lg {
  --mod-card-gap: var(--ds-card-space-lg-device);
}
.card.has-space-lg:not(.is-dense) {
  --mod-card-padding-left: var(--ds-card-space-lg-device);
  --mod-card-padding-right: var(--ds-card-space-lg-device);
  --mod-card-padding-top: var(--ds-card-space-lg-device);
  --mod-card-padding-bottom: var(--ds-card-space-lg-device);
}

.card.is-tile {
  --mod-card-header-grid-template-columns: auto 1fr auto;
  --mod-card-header-grid-template-areas: 'icon title .' 'icon subtitle subtitle';
}
@media screen and (min-width: 769px) {
  .card.is-tile {
    --mod-card-padding-left: calc(
      var(--ds-card-space-base-device) + var(--ds-icon-tile-size-lg-device) + calc(var(--_card-gap) / 2)
    );
    --mod-card-header-margin-left: calc(calc(var(--ds-icon-tile-size-lg-device) * -1) - calc(var(--_card-gap) / 2));
  }
}

.image-teaser .card {
  margin-top: calc(var(--_card-gap) * -1 * 2);
  margin-left: calc(var(--_card-gap));
  margin-right: calc(var(--_card-gap));
  max-width: -moz-fit-content;
  max-width: fit-content;
}
@media screen and (min-width: 769px) {
  .image-teaser.is-wide .card {
    width: 75%;
    margin-left: calc(var(--_card-gap) * 2);
    margin-right: calc(var(--_card-gap));
  }
  .image-teaser.is-wide.is-center .card {
    margin-left: auto;
    margin-right: auto;
  }
  .image-teaser.is-wide.is-right .card {
    margin-left: auto;
    margin-right: calc(var(--_card-gap) * 2);
  }
}
@media screen and (min-width: 1024px) {
  .image-teaser.is-wide .card {
    width: 50%;
  }
}

a.image-link,
button.image-link {
  cursor: pointer;
}
a.image-link picture,
button.image-link picture {
  display: block;
  overflow: hidden;
}
a.image-link img,
button.image-link img {
  display: block;
  transition: all 0.4s ease-out;
}
@media (hover: hover) and (pointer: fine) {
  a.image-link img:hover, a.image-link img.is-hovered,
  button.image-link img:hover,
  button.image-link img.is-hovered {
    transform: scale(1.1);
  }
}
a.image-link img:active, a.image-link img.is-pressed,
button.image-link img:active,
button.image-link img.is-pressed {
  transform: scale(1.1);
}

/**
  * Basic Component Styles
  * --------------------------------
  * Define here the component styles using the mixin to support host and non-host mode for hybrid components.
  */
.checkbox-group {
  display: grid;
  gap: 0.25rem;
}
@media screen and (min-width: 769px) {
  .checkbox-group {
    display: flex;
    gap: 1rem;
  }
}

.checkbox-group.is-vertical {
  display: grid;
  gap: 0.25rem;
}

/**
 * Control Mixins
 * --------------------------------
 * $wrapper — the element that contains input[type="checkbox"] + label.
 *   Web component: ':host'
 *   CSS-only:      '.checkbox'
 */
/**
 * CSS-only checkbox / switch toggle: apply .checkbox to the wrapper <label>.
 *
 *   Checkbox:
 *   <label class="checkbox">
 *     <input type="checkbox">
 *     Label text
 *   </label>
 *
 */
.checkbox {
  --_checkbox-gap: var(--checkbox-gap, var(--mod-checkbox-gap, 0.5rem));
  --_checkbox-label-base-color: var(--checkbox-label-base-color, var(--mod-checkbox-label-base-color, inherit));
  --_checkbox-label-hover-color: var(--checkbox-label-hover-color, var(--mod-checkbox-label-hover-color, var(--ds-global-color-sky-5)));
  --_checkbox-label-active-color: var(--checkbox-label-active-color, var(--mod-checkbox-label-active-color, var(--ds-global-color-primary-6)));
  --_checkbox-size: var(--checkbox-size, var(--mod-checkbox-size, 1.5rem));
  --_checkbox-border-width: var(--checkbox-border-width, var(--mod-checkbox-border-width, var(--ds-alias-border-width-base)));
  --_checkbox-radius: var(--checkbox-radius, var(--mod-checkbox-radius, var(--ds-alias-radius-base)));
  --_checkbox-tile-radius: var(--checkbox-tile-radius, var(--mod-checkbox-tile-radius, var(--ds-alias-radius-base)));
  --_checkbox-tile-padding: var(--checkbox-tile-padding, var(--mod-checkbox-tile-padding, 1rem));
  --_checkbox-tile-border-width: var(--checkbox-tile-border-width, var(--mod-checkbox-tile-border-width, var(--ds-alias-border-width-base)));
  --_checkbox-tile-base-background-color: var(--checkbox-tile-base-background-color, var(--mod-checkbox-tile-base-background-color, inherit));
  --_checkbox-tile-base-border-color: var(--checkbox-tile-base-border-color, var(--mod-checkbox-tile-base-border-color, var(--ds-global-color-grey-3)));
  --_checkbox-tile-hover-background-color: var(--checkbox-tile-hover-background-color, var(--mod-checkbox-tile-hover-background-color, var(--ds-global-color-grey-0)));
  --_checkbox-tile-hover-border-color: var(--checkbox-tile-hover-border-color, var(--mod-checkbox-tile-hover-border-color, var(--ds-global-color-sky-5)));
  --_checkbox-tile-active-background-color: var(--checkbox-tile-active-background-color, var(--mod-checkbox-tile-active-background-color, var(--ds-global-color-grey-0)));
  --_checkbox-tile-active-border-color: var(--checkbox-tile-active-border-color, var(--mod-checkbox-tile-active-border-color, var(--ds-global-color-primary-6)));
  --_checkbox-unchecked-base-color-background: var(--checkbox-unchecked-base-color-background, var(--mod-checkbox-unchecked-base-color-background, transparent));
  --_checkbox-unchecked-base-color-border: var(--checkbox-unchecked-base-color-border, var(--mod-checkbox-unchecked-base-color-border, var(--ds-global-color-primary-5)));
  --_checkbox-unchecked-hover-color-background: var(--checkbox-unchecked-hover-color-background, var(--mod-checkbox-unchecked-hover-color-background, var(--ds-global-color-grey-1)));
  --_checkbox-unchecked-hover-color-border: var(--checkbox-unchecked-hover-color-border, var(--mod-checkbox-unchecked-hover-color-border, var(--ds-global-color-sky-5)));
  --_checkbox-unchecked-active-color-background: var(--checkbox-unchecked-active-color-background, var(--mod-checkbox-unchecked-active-color-background, var(--ds-global-color-grey-2)));
  --_checkbox-unchecked-active-color-border: var(--checkbox-unchecked-active-color-border, var(--mod-checkbox-unchecked-active-color-border, var(--ds-global-color-primary-6)));
  --_checkbox-checked-base-color-background: var(--checkbox-checked-base-color-background, var(--mod-checkbox-checked-base-color-background, var(--ds-global-color-primary-5)));
  --_checkbox-checked-base-color-border: var(--checkbox-checked-base-color-border, var(--mod-checkbox-checked-base-color-border, var(--ds-global-color-primary-5)));
  --_checkbox-checked-base-color-icon: var(--checkbox-checked-base-color-icon, var(--mod-checkbox-checked-base-color-icon, var(--ds-global-color-white)));
  --_checkbox-checked-hover-color-background: var(--checkbox-checked-hover-color-background, var(--mod-checkbox-checked-hover-color-background, var(--ds-global-color-sky-5)));
  --_checkbox-checked-hover-color-border: var(--checkbox-checked-hover-color-border, var(--mod-checkbox-checked-hover-color-border, var(--ds-global-color-sky-5)));
  --_checkbox-checked-active-color-background: var(--checkbox-checked-active-color-background, var(--mod-checkbox-checked-active-color-background, var(--ds-global-color-primary-6)));
  --_checkbox-checked-active-color-border: var(--checkbox-checked-active-color-border, var(--mod-checkbox-checked-active-color-border, var(--ds-global-color-primary-6)));
}

.checkbox {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-user-drag: none; /* Chrome, Safari */
  user-drag: none; /* Non-standard, limited support */
  display: inline-flex;
  align-items: center;
  gap: var(--_checkbox-gap);
  cursor: pointer;
  user-select: none;
  color: var(--_checkbox-label-base-color);
  font-family: var(--ds-global-font-family-text);
  line-height: var(--ds-typography-line-height-base);
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  min-height: 3rem;
}
@media (hover: hover) and (pointer: fine) {
  .checkbox:hover {
    color: var(--_checkbox-label-hover-color);
  }
}
.checkbox:active {
  color: var(--_checkbox-label-active-color);
}

.checkbox input[type=checkbox] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  flex: none;
  display: inline-flex;
  width: var(--_checkbox-size);
  height: var(--_checkbox-size);
  background: var(--_checkbox-unchecked-base-color-background);
  border: var(--_checkbox-border-width) solid var(--_checkbox-unchecked-base-color-border);
  border-radius: var(--_checkbox-radius);
  vertical-align: top;
  cursor: pointer;
  transition: background 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

.checkbox input[type=checkbox]:disabled {
  cursor: default;
}

.checkbox input[type=checkbox]:focus-visible {
  outline: var(--ds-alias-interaction-focus-width, 2px) solid var(--ds-alias-interaction-focus-color-base);
  outline-offset: 2px;
  border-radius: var(--_checkbox-radius);
}

.checkbox input[type=checkbox]:not(:disabled):hover,
.checkbox:hover input[type=checkbox]:not(:disabled):not(:checked) {
  background: var(--_checkbox-unchecked-hover-color-background);
  border-color: var(--_checkbox-unchecked-hover-color-border);
}

.checkbox input[type=checkbox]:not(:disabled):active,
.checkbox:active input[type=checkbox]:not(:disabled):not(:checked) {
  background: var(--_checkbox-unchecked-active-color-background);
  border-color: var(--_checkbox-unchecked-active-color-border);
}

.checkbox input[type=checkbox]:checked {
  background: var(--_checkbox-checked-base-color-background);
  border-color: var(--_checkbox-checked-base-color-border);
}

.checkbox input[type=checkbox]:checked:not(:disabled):hover,
.checkbox:hover input[type=checkbox]:checked:not(:disabled) {
  background: var(--_checkbox-checked-hover-color-background);
  border-color: var(--_checkbox-checked-hover-color-border);
}

.checkbox input[type=checkbox]:checked:not(:disabled):active,
.checkbox:active input[type=checkbox]:checked:not(:disabled) {
  background: var(--_checkbox-checked-active-color-background);
  border-color: var(--_checkbox-checked-active-color-border);
}

.checkbox input[type=checkbox]::after {
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  -webkit-mask-size: 70%;
          mask-size: 70%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
  opacity: 0;
  transform: translateY(-0.5rem);
}

.checkbox input[type=checkbox]:checked::after {
  background-color: var(--_checkbox-checked-base-color-icon);
  opacity: 1;
  transform: translateY(0);
  -webkit-mask-image: url("data:image/svg+xml,<svg viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M13.637 1.19792C14.0627 1.54974 14.1227 2.18006 13.7708 2.60579L5.73084 12.335L5.72842 12.3379C5.54554 12.5575 5.31602 12.7336 5.05655 12.8534C4.79707 12.9731 4.51417 13.0336 4.22842 13.0302L4.22752 13.0302C3.93709 13.0266 3.65125 12.9573 3.39146 12.8274C3.13254 12.6979 2.9062 12.5117 2.72931 12.2826C2.72871 12.2818 2.72812 12.281 2.72752 12.2802L0.210633 9.04426C-0.128437 8.60831 -0.0499029 7.98003 0.386044 7.64096C0.821992 7.30189 1.45027 7.38043 1.78934 7.81638L4.25291 10.9838L12.2291 1.33176C12.5809 0.906034 13.2113 0.846112 13.637 1.19792Z'/></svg>");
          mask-image: url("data:image/svg+xml,<svg viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M13.637 1.19792C14.0627 1.54974 14.1227 2.18006 13.7708 2.60579L5.73084 12.335L5.72842 12.3379C5.54554 12.5575 5.31602 12.7336 5.05655 12.8534C4.79707 12.9731 4.51417 13.0336 4.22842 13.0302L4.22752 13.0302C3.93709 13.0266 3.65125 12.9573 3.39146 12.8274C3.13254 12.6979 2.9062 12.5117 2.72931 12.2826C2.72871 12.2818 2.72812 12.281 2.72752 12.2802L0.210633 9.04426C-0.128437 8.60831 -0.0499029 7.98003 0.386044 7.64096C0.821992 7.30189 1.45027 7.38043 1.78934 7.81638L4.25291 10.9838L12.2291 1.33176C12.5809 0.906034 13.2113 0.846112 13.637 1.19792Z'/></svg>");
}

.checkbox.is-invalid:not(.is-disabled) {
  --mod-checkbox-label-base-color: var(--ds-global-color-danger-4);
  --mod-checkbox-label-hover-color: var(--ds-global-color-danger-5);
  --mod-checkbox-label-active-color: var(--ds-global-color-danger-6);
  --mod-checkbox-unchecked-base-color-background: transparent;
  --mod-checkbox-unchecked-base-color-border: var(--ds-divider-color-danger);
  --mod-checkbox-unchecked-hover-color-background: var(--ds-global-color-grey-2);
  --mod-checkbox-unchecked-hover-color-border: var(--ds-divider-color-danger-dark);
  --mod-checkbox-unchecked-active-color-background: var(--ds-global-color-grey-2);
  --mod-checkbox-unchecked-active-color-border: var(--ds-divider-color-danger-darker);
  --mod-checkbox-checked-base-color-background: var(--ds-divider-color-danger);
  --mod-checkbox-checked-base-color-border: var(--ds-divider-color-danger);
  --mod-checkbox-checked-hover-color-background: var(--ds-divider-color-danger-dark);
  --mod-checkbox-checked-hover-color-border: var(--ds-divider-color-danger-dark);
  --mod-checkbox-checked-active-color-background: var(--ds-divider-color-danger-darker);
  --mod-checkbox-checked-active-color-border: var(--ds-divider-color-danger-darker);
}

.checkbox.is-disabled {
  cursor: default;
  pointer-events: none;
  --mod-checkbox-label-base-color: var(--ds-global-color-grey-5);
  --mod-checkbox-label-hover-color: var(--ds-global-color-grey-5);
  --mod-checkbox-label-active-color: var(--ds-global-color-grey-5);
  --mod-checkbox-unchecked-base-color-background: var(--ds-global-color-grey-2);
  --mod-checkbox-unchecked-base-color-border: var(--ds-alias-border-color-disabled);
  --mod-checkbox-checked-base-color-background: var(--ds-alias-border-color-disabled);
  --mod-checkbox-checked-base-color-border: var(--ds-alias-border-color-disabled);
}

/**
 * Container provides a responsive width-constrained wrapper for page content.
 * Centers content with responsive horizontal padding and supports multiple max-width variants
 * for different layout needs (base, fluid, compact).
 *
 * @variant is-fluid - Fluid container with maximum width set to fluid breakpoint.
 * @variant is-compact - Compact container with reduced maximum width for narrower layouts.
 */
.container {
  flex-grow: 1;
  margin: 0 auto;
  position: relative;
  width: auto;
  padding-left: var(--ds-alias-container-space-device);
  padding-right: var(--ds-alias-container-space-device);
}
@media screen and (min-width: 1024px) {
  .container {
    max-width: var(--ds-alias-container-width-base);
  }
}
.container.is-fluid {
  max-width: var(--ds-alias-container-width-fluid) !important;
}
.container.is-compact {
  max-width: var(--ds-alias-container-width-compact) !important;
}

/**
 * Variables
 * --------------------------------
 * Define here the css variables for the component to be able to use it in host or non-host mode
 * These variables can be used in the component styles below and later on be overridden in themes.
 */
hr, .divider {
  --_divider-position: var(--divider-position, var(--mod-divider-position, static));
  --_divider-top: var(--divider-top, var(--mod-divider-top));
  --_divider-right: var(--divider-right, var(--mod-divider-right));
  --_divider-bottom: var(--divider-bottom, var(--mod-divider-bottom));
  --_divider-left: var(--divider-left, var(--mod-divider-left));
  position: var(--_divider-position);
  top: var(--_divider-top);
  right: var(--_divider-right);
  bottom: var(--_divider-bottom);
  left: var(--_divider-left);
  --_divider-m: var(--divider-m, var(--mod-divider-m, 0));
  --_divider-my: var(--divider-my, var(--mod-divider-my));
  --_divider-mx: var(--divider-mx, var(--mod-divider-mx));
  --_divider-ml: var(--divider-ml, var(--mod-divider-ml));
  --_divider-mr: var(--divider-mr, var(--mod-divider-mr));
  --_divider-mt: var(--divider-mt, var(--mod-divider-mt));
  --_divider-mb: var(--divider-mb, var(--mod-divider-mb));
  margin: var(--_divider-m);
  margin-inline: var(--_divider-mx);
  margin-block: var(--_divider-my);
  margin-left: var(--_divider-ml);
  margin-right: var(--_divider-mr);
  margin-top: var(--_divider-mt);
  margin-bottom: var(--_divider-mb);
  --_divider-color: var(--divider-color, var(--mod-divider-color, var(--ds-divider-color-base)));
  --_divider-width: var(--divider-width, var(--mod-divider-width, var(--ds-divider-width)));
  --_divider-radius: var(--divider-radius, var(--mod-divider-radius, var(--ds-divider-radius)));
  --_divider-space: var(--divider-space, var(--mod-divider-space, 0));
}

/**
  * Basic Component Styles
  * --------------------------------
  * Define here the component styles using the mixin to support host and non-host mode for hybrid components.
  */
hr, .divider {
  display: block;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: var(--_divider-radius);
  height: var(--_divider-width);
  background-color: var(--_divider-color);
}

/**
  * Variants and States
  * --------------------------------
  * Define here the variants and states like size or colors for the component.
  */
hr:not(.is-vertical), hr.is-horizontal, .divider:not(.is-vertical), .divider.is-horizontal {
  flex: 1 0 100%;
  width: 100%;
  min-height: var(--_divider-width);
  height: var(--_divider-width);
  margin-top: var(--_divider-space);
  margin-bottom: var(--_divider-space);
}
hr.is-vertical, .divider.is-vertical {
  height: auto;
  flex-shrink: 0;
  align-self: stretch;
  width: var(--_divider-width);
  margin-left: var(--_divider-space);
  margin-right: var(--_divider-space);
}

hr.is-primary, .divider.is-primary {
  --mod-divider-color: var(--ds-divider-color-primary);
}

hr.is-primary-light, .divider.is-primary-light {
  --mod-divider-color: var(--ds-divider-color-primary-light);
}

hr.is-primary-dark, .divider.is-primary-dark {
  --mod-divider-color: var(--ds-divider-color-primary-dark);
}

hr.is-grey-light, .divider.is-grey-light {
  --mod-divider-color: var(--ds-divider-color-grey-light);
}

hr.is-grey, .divider.is-grey {
  --mod-divider-color: var(--ds-divider-color-grey);
}

hr.is-grey-dark, .divider.is-grey-dark {
  --mod-divider-color: var(--ds-divider-color-grey-dark);
}

hr.is-warning, .divider.is-warning {
  --mod-divider-color: var(--ds-divider-color-warning);
}

hr.is-success, .divider.is-success {
  --mod-divider-color: var(--ds-divider-color-success);
}

hr.is-danger, .divider.is-danger {
  --mod-divider-color: var(--ds-divider-color-danger);
}

hr.is-danger-dark, .divider.is-danger-dark {
  --mod-divider-color: var(--ds-divider-color-danger-dark);
}

hr.is-danger-darker, .divider.is-danger-darker {
  --mod-divider-color: var(--ds-divider-color-danger-darker);
}

hr.is-white, .divider.is-white {
  --mod-divider-color: var(--ds-divider-color-white);
}

hr.is-light-blue, .divider.is-light-blue {
  --mod-divider-color: var(--ds-divider-color-light-blue);
}

hr.has-space-none, .divider.has-space-none {
  --mod-divider-space: var(--ds-alias-space-none-device);
}

hr.has-space-2xs, .divider.has-space-2xs {
  --mod-divider-space: var(--ds-alias-space-2xs-device);
}

hr.has-space-xs, .divider.has-space-xs {
  --mod-divider-space: var(--ds-alias-space-xs-device);
}

hr.has-space-sm, .divider.has-space-sm {
  --mod-divider-space: var(--ds-alias-space-sm-device);
}

hr.has-space-base, .divider.has-space-base {
  --mod-divider-space: var(--ds-alias-space-base-device);
}

hr.has-space-md, .divider.has-space-md {
  --mod-divider-space: var(--ds-alias-space-md-device);
}

hr.has-space-lg, .divider.has-space-lg {
  --mod-divider-space: var(--ds-alias-space-lg-device);
}

hr.has-space-xl, .divider.has-space-xl {
  --mod-divider-space: var(--ds-alias-space-xl-device);
}

hr.has-space-2xl, .divider.has-space-2xl {
  --mod-divider-space: var(--ds-alias-space-2xl-device);
}

hr.has-space-3xl, .divider.has-space-3xl {
  --mod-divider-space: var(--ds-alias-space-3xl-device);
}

hr.is-dashed:not(.is-vertical), .divider.is-dashed:not(.is-vertical) {
  background: repeating-linear-gradient(90deg, var(--_divider-color) 0, var(--_divider-color) 8px, transparent 8px, transparent 16px);
}
hr.is-dashed.is-vertical, .divider.is-dashed.is-vertical {
  background: repeating-linear-gradient(180deg, var(--_divider-color) 0, var(--_divider-color) 8px, transparent 8px, transparent 16px);
}

/*
 * Light DOM utilities for ds-footer.
 * Keep footer links in normal anchor markup for SEO crawlers.
 */
.ds-footer-link-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

/**
 * Form provides a flexible CSS-only component for building responsive form layouts with a 12-column grid system.
 * Supports field grouping, responsive sizing variants, and validation state styling.
 *
 * @variant is-invalid - Invalid form field state with error indicator icon and danger color.
 * @variant is-half - Form column width of 50% (6 out of 12 columns).
 * @variant is-one-third - Form column width of 33.33% (4 out of 12 columns).
 * @variant is-two-thirds - Form column width of 66.66% (8 out of 12 columns).
 * @variant is-one-quarter - Form column width of 25% (3 out of 12 columns).
 * @variant is-three-quarters - Form column width of 75% (9 out of 12 columns).
 * @variant is-full - Form column width of 100% (full width).
 * @variant tablet:is-* - Responsive tablet breakpoint sizing variants for form columns.
 * @variant desktop:is-* - Responsive desktop breakpoint sizing variants for form columns.
 */
/**
 * Field Layout Mixins
 * --------------------------------
 */
/**
 * Container Mixins
 * --------------------------------
 */
/**
 * Label Mixins
 * --------------------------------
 */
/**
 * Description Mixins
 * --------------------------------
 */
/**
 * Variables
 * --------------------------------
 * Define here the css variables for the component to be able to use it in host or non-host mode
 * These variables can be used in the component styles below and later on be overridden in themes.
 *
 * @prop --form-field-gap - Gap between form field elements (label, input, help text).
 *
 * @prop --form-container-background - Background color of form control container.
 * @prop --form-container-border-color - Border color of form control container.
 * @prop --form-container-border-width - Border width of form control container.
 * @prop --form-container-radius - Border radius of form control container.
 * @prop --form-container-hover-background - Background color on hover state.
 * @prop --form-container-active-background - Background color on active state.
 * @prop --form-container-focus-background - Background color on focus state.
 * @prop --form-container-hover-border - Border color on hover state.
 * @prop --form-container-active-border - Border color on active state.
 * @prop --form-container-focus-border - Border color on focus state.
 *
 * @prop --form-label-color - Text color of form label.
 * @prop --form-label-family - Font family of form label.
 * @prop --form-label-weight - Font weight of form label.
 * @prop --form-label-line-height - Line height of form label.
 * @prop --form-label-size - Font size of form label.
 *
 * @prop --form-description-color - Text color of form description/help text.
 * @prop --form-description-family - Font family of form description.
 * @prop --form-description-weight - Font weight of form description.
 * @prop --form-description-line-height - Line height of form description.
 * @prop --form-description-size - Font size of form description.
 */
.field {
  --_form-field-gap: var(--form-field-gap, var(--mod-form-field-gap, 0.25rem));
  --_form-label-color: var(--form-label-color, var(--mod-form-label-color, var(--ds-form-label-color-base)));
  --_form-label-family: var(--form-label-family, var(--mod-form-label-family, var(--ds-form-label-family)));
  --_form-label-weight: var(--form-label-weight, var(--mod-form-label-weight, var(--ds-form-label-weight)));
  --_form-label-line-height: var(--form-label-line-height, var(--mod-form-label-line-height, var(--ds-form-label-line-height)));
  --_form-label-size: var(--form-label-size, var(--mod-form-label-size, var(--ds-form-label-size-device)));
  --_form-container-background: var(--form-container-background, var(--mod-form-container-background, var(--ds-form-container-color-base-background)));
  --_form-container-border-color: var(--form-container-border-color, var(--mod-form-container-border-color, var(--ds-form-container-color-base-border)));
  --_form-container-border-width: var(--form-container-border-width, var(--mod-form-container-border-width, var(--ds-form-container-border-width)));
  --_form-container-radius: var(--form-container-radius, var(--mod-form-container-radius, var(--ds-form-container-radius)));
  --_form-container-hover-background: var(--form-container-hover-background, var(--mod-form-container-hover-background, var(--ds-form-container-color-hover-background)));
  --_form-container-active-background: var(--form-container-active-background, var(--mod-form-container-active-background, var(--ds-form-container-color-active-background)));
  --_form-container-focus-background: var(--form-container-focus-background, var(--mod-form-container-focus-background, var(--ds-form-container-color-focus-background)));
  --_form-container-hover-border: var(--form-container-hover-border, var(--mod-form-container-hover-border, var(--ds-form-container-color-hover-border)));
  --_form-container-active-border: var(--form-container-active-border, var(--mod-form-container-active-border, var(--ds-form-container-color-active-border)));
  --_form-container-focus-border: var(--form-container-focus-border, var(--mod-form-container-focus-border, var(--ds-form-container-color-focus-border)));
  --_form-description-color: var(--form-description-color, var(--mod-form-description-color, var(--ds-form-description-color-base)));
  --_form-description-family: var(--form-description-family, var(--mod-form-description-family, var(--ds-form-description-family)));
  --_form-description-weight: var(--form-description-weight, var(--mod-form-description-weight, var(--ds-form-description-weight)));
  --_form-description-line-height: var(--form-description-line-height, var(--mod-form-description-line-height, var(--ds-form-description-line-height)));
  --_form-description-size: var(--form-description-size, var(--mod-form-description-size, var(--ds-form-description-size-device)));
}

/**
  * Basic Component Styles
  * --------------------------------
  * Define here the component styles using the mixin to support host and non-host mode for hybrid components.
  */
.field {
  position: relative;
  display: grid;
  gap: var(--_form-field-gap);
}
.field :where(fieldset) {
  margin: 0;
  padding: 0;
  border: none;
}
.field :where(legend) {
  padding: 0;
  float: left;
  width: 100%;
}
.field .label {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: block;
  box-sizing: content-box;
  hyphens: auto;
  overflow-wrap: break-word;
  text-wrap: balance;
  min-width: 0;
  color: var(--_form-label-color);
  font-family: var(--_form-label-family);
  font-weight: var(--_form-label-weight);
  font-size: var(--_form-label-size);
  line-height: var(--_form-label-line-height);
}
.field .control {
  box-sizing: border-box;
  clear: both;
  display: flex;
  width: 100%;
  align-items: center;
  min-height: 3rem;
  gap: 0.25rem;
  padding-inline: 0.5rem;
  background: var(--_form-container-background);
  border: var(--_form-container-border-width) solid var(--_form-container-border-color);
  border-radius: var(--_form-container-radius);
}
@media (hover: hover) and (pointer: fine) {
  .field .control:hover, .field .control.is-hovered {
    background: var(--_form-container-hover-background);
    border-color: var(--_form-container-hover-border);
  }
}
.field .control:active, .field .control.is-pressed {
  background: var(--_form-container-active-background);
  border-color: var(--_form-container-active-border);
}
.field .control:focus-within:not(:active), .field .control.is-focused:not(:active) {
  background: var(--_form-container-focus-background);
  border-color: var(--_form-container-focus-border);
}
.field .help {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: flex;
  box-sizing: content-box;
  hyphens: auto;
  overflow-wrap: break-word;
  text-wrap: balance;
  min-width: 0;
  gap: 0.25rem;
  min-height: 1.125rem;
  color: var(--_form-description-color);
  font-family: var(--_form-description-family);
  font-weight: var(--_form-description-weight);
  font-size: var(--_form-description-size);
  line-height: var(--_form-description-line-height);
}
.field .help ds-icon {
  --icon-color: var(--_form-description-color);
}

.field {
  width: 100%;
  flex: 1;
}

.field + .field,
.ds-field + .ds-field {
  margin-top: 0.5rem;
}

.field:not(:last-child),
.ds-field:not(:last-child) {
  margin-bottom: 0.25rem;
}

.field.is-danger .help::before,
.field.is-invalid .help::before {
  content: "";
  height: 1rem;
  width: 0.875rem;
  -webkit-mask-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22black%22 viewBox=%220 0 14 14%22><path d=%22M7 0c.69 0 1.25.514 1.25 1.148v5.508c0 .634-.56 1.148-1.25 1.148S5.75 7.29 5.75 6.656V1.148C5.75.514 6.31 0 7 0m0 14c1.104 0 2-.822 2-1.836s-.896-1.836-2-1.836-2 .822-2 1.836S5.895 14 7 14%22/></svg>");
          mask-image: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 fill=%22black%22 viewBox=%220 0 14 14%22><path d=%22M7 0c.69 0 1.25.514 1.25 1.148v5.508c0 .634-.56 1.148-1.25 1.148S5.75 7.29 5.75 6.656V1.148C5.75.514 6.31 0 7 0m0 14c1.104 0 2-.822 2-1.836s-.896-1.836-2-1.836-2 .822-2 1.836S5.895 14 7 14%22/></svg>");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
  background: var(--ds-form-description-color-danger);
}

.field:not(:has(.help)) {
  margin-bottom: 1.375rem;
}

.form {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  row-gap: 0.25rem;
  margin-inline: -1rem;
}
.form .form-col {
  flex: 0 0 100%;
  padding-inline: 1rem;
}
.form .form-col.is-1 {
  flex: 0 0 8.3333333333%;
}
.form .form-col.is-2 {
  flex: 0 0 16.6666666667%;
}
.form .form-col.is-3 {
  flex: 0 0 25%;
}
.form .form-col.is-4 {
  flex: 0 0 33.3333333333%;
}
.form .form-col.is-5 {
  flex: 0 0 41.6666666667%;
}
.form .form-col.is-6 {
  flex: 0 0 50%;
}
.form .form-col.is-7 {
  flex: 0 0 58.3333333333%;
}
.form .form-col.is-8 {
  flex: 0 0 66.6666666667%;
}
.form .form-col.is-9 {
  flex: 0 0 75%;
}
.form .form-col.is-10 {
  flex: 0 0 83.3333333333%;
}
.form .form-col.is-11 {
  flex: 0 0 91.6666666667%;
}
.form .form-col.is-12, .form .form-col.is-full, .form .form-col.is-fullwidth {
  flex: 0 0 100%;
}
.form .form-col.is-half {
  flex: 0 0 50%;
}
.form .form-col.is-one-third {
  flex: 0 0 33.3333333333%;
}
.form .form-col.is-two-thirds {
  flex: 0 0 66.6666666667%;
}
.form .form-col.is-one-quarter {
  flex: 0 0 25%;
}
.form .form-col.is-three-quarters {
  flex: 0 0 75%;
}
@media screen and (min-width: 769px) {
  .form .form-col.tablet\:is-1 {
    flex: 0 0 8.3333333333%;
  }
  .form .form-col.tablet\:is-2 {
    flex: 0 0 16.6666666667%;
  }
  .form .form-col.tablet\:is-3 {
    flex: 0 0 25%;
  }
  .form .form-col.tablet\:is-4 {
    flex: 0 0 33.3333333333%;
  }
  .form .form-col.tablet\:is-5 {
    flex: 0 0 41.6666666667%;
  }
  .form .form-col.tablet\:is-6 {
    flex: 0 0 50%;
  }
  .form .form-col.tablet\:is-7 {
    flex: 0 0 58.3333333333%;
  }
  .form .form-col.tablet\:is-8 {
    flex: 0 0 66.6666666667%;
  }
  .form .form-col.tablet\:is-9 {
    flex: 0 0 75%;
  }
  .form .form-col.tablet\:is-10 {
    flex: 0 0 83.3333333333%;
  }
  .form .form-col.tablet\:is-11 {
    flex: 0 0 91.6666666667%;
  }
  .form .form-col.tablet\:is-12, .form .form-col.tablet\:is-full, .form .form-col.tablet\:is-fullwidth {
    flex: 0 0 100%;
  }
  .form .form-col.tablet\:is-half {
    flex: 0 0 50%;
  }
  .form .form-col.tablet\:is-one-third {
    flex: 0 0 33.3333333333%;
  }
  .form .form-col.tablet\:is-two-thirds {
    flex: 0 0 66.6666666667%;
  }
  .form .form-col.tablet\:is-one-quarter {
    flex: 0 0 25%;
  }
  .form .form-col.tablet\:is-three-quarters {
    flex: 0 0 75%;
  }
}
@media screen and (min-width: 1024px) {
  .form .form-col.desktop\:is-1 {
    flex: 0 0 8.3333333333%;
  }
  .form .form-col.desktop\:is-2 {
    flex: 0 0 16.6666666667%;
  }
  .form .form-col.desktop\:is-3 {
    flex: 0 0 25%;
  }
  .form .form-col.desktop\:is-4 {
    flex: 0 0 33.3333333333%;
  }
  .form .form-col.desktop\:is-5 {
    flex: 0 0 41.6666666667%;
  }
  .form .form-col.desktop\:is-6 {
    flex: 0 0 50%;
  }
  .form .form-col.desktop\:is-7 {
    flex: 0 0 58.3333333333%;
  }
  .form .form-col.desktop\:is-8 {
    flex: 0 0 66.6666666667%;
  }
  .form .form-col.desktop\:is-9 {
    flex: 0 0 75%;
  }
  .form .form-col.desktop\:is-10 {
    flex: 0 0 83.3333333333%;
  }
  .form .form-col.desktop\:is-11 {
    flex: 0 0 91.6666666667%;
  }
  .form .form-col.desktop\:is-12, .form .form-col.desktop\:is-full, .form .form-col.desktop\:is-fullwidth {
    flex: 0 0 100%;
  }
  .form .form-col.desktop\:is-half {
    flex: 0 0 50%;
  }
  .form .form-col.desktop\:is-one-third {
    flex: 0 0 33.3333333333%;
  }
  .form .form-col.desktop\:is-two-thirds {
    flex: 0 0 66.6666666667%;
  }
  .form .form-col.desktop\:is-one-quarter {
    flex: 0 0 25%;
  }
  .form .form-col.desktop\:is-three-quarters {
    flex: 0 0 75%;
  }
}

/**
  * Variants and States
  * --------------------------------
  * Define here the variants and states like size or colors for the component.
  */
.field.is-invalid,
.field.is-danger {
  --mod-form-container-border-color: var(--ds-form-container-color-danger-border);
  --mod-form-description-color: var(--ds-form-description-color-danger);
  --mod-form-container-hover-border: var(--ds-form-container-color-danger-border);
  --mod-form-container-active-border: var(--ds-form-container-color-danger-border);
}

.field.is-valid,
.field.is-success {
  --mod-form-container-border-color: var(--ds-form-container-color-success-border);
  --mod-form-description-color: var(--ds-form-description-color-success);
  --mod-form-container-hover-border: var(--ds-form-container-color-success-border);
  --mod-form-container-active-border: var(--ds-form-container-color-success-border);
}

.field.is-warning {
  --mod-form-container-border-color: var(--ds-form-container-color-warning-border);
  --mod-form-description-color: var(--ds-form-description-color-warning);
  --mod-form-container-hover-border: var(--ds-form-container-color-warning-border);
  --mod-form-container-active-border: var(--ds-form-container-color-warning-border);
}

.field.is-disabled,
.field.is-disabled .label,
.field.is-disabled .help,
.field.is-disabled .input,
.field.is-disabled .textarea,
.field.is-disabled .select {
  pointer-events: none;
  cursor: default;
}
.field.is-disabled {
  --mod-form-container-background: var(--ds-form-container-color-disabled-background);
  --mod-form-container-border-color: var(--ds-form-container-color-disabled-border);
  --mod-form-label-color: var(--ds-form-label-color-disabled);
  --mod-form-description-color: var(--ds-form-description-color-disabled);
  --mod-form-color: var(--ds-form-control-color-value-disabled);
  --mod-form-placeholder: var(--ds-form-control-color-placeholder-disabled);
  --mod-input-color: var(--ds-form-control-color-value-disabled);
  --mod-input-placeholder: var(--ds-form-control-color-placeholder-disabled);
  --mod-textarea-color: var(--ds-form-control-color-value-disabled);
  --mod-textarea-placeholder: var(--ds-form-control-color-placeholder-disabled);
  --mod-select-color: var(--ds-form-control-color-value-disabled);
  --mod-select-placeholder: var(--ds-form-control-color-placeholder-disabled);
}

.grid {
  --ds-column-gap: 1rem;
}

.grid {
  flex-basis: 0;
  flex-grow: 1;
  flex-shrink: 1;
}

.col {
  display: block;
  flex-basis: 0;
  flex-grow: 1;
  flex-shrink: 1;
  padding: var(--ds-column-gap);
}
.grid.is-mobile > .col.is-narrow {
  flex: none;
  width: unset;
}
.grid.is-mobile > .col.is-full {
  flex: none;
  width: 100%;
}
.grid.is-mobile > .col.is-three-quarters {
  flex: none;
  width: 75%;
}
.grid.is-mobile > .col.is-two-thirds {
  flex: none;
  width: 66.6666%;
}
.grid.is-mobile > .col.is-half {
  flex: none;
  width: 50%;
}
.grid.is-mobile > .col.is-one-third {
  flex: none;
  width: 33.3333%;
}
.grid.is-mobile > .col.is-one-quarter {
  flex: none;
  width: 25%;
}
.grid.is-mobile > .col.is-one-fifth {
  flex: none;
  width: 20%;
}
.grid.is-mobile > .col.is-two-fifths {
  flex: none;
  width: 40%;
}
.grid.is-mobile > .col.is-three-fifths {
  flex: none;
  width: 60%;
}
.grid.is-mobile > .col.is-four-fifths {
  flex: none;
  width: 80%;
}
.grid.is-mobile > .col.is-offset-three-quarters {
  margin-left: 75%;
}
.grid.is-mobile > .col.is-offset-two-thirds {
  margin-left: 66.6666%;
}
.grid.is-mobile > .col.is-offset-half {
  margin-left: 50%;
}
.grid.is-mobile > .col.is-offset-one-third {
  margin-left: 33.3333%;
}
.grid.is-mobile > .col.is-offset-one-quarter {
  margin-left: 25%;
}
.grid.is-mobile > .col.is-offset-one-fifth {
  margin-left: 20%;
}
.grid.is-mobile > .col.is-offset-two-fifths {
  margin-left: 40%;
}
.grid.is-mobile > .col.is-offset-three-fifths {
  margin-left: 60%;
}
.grid.is-mobile > .col.is-offset-four-fifths {
  margin-left: 80%;
}
.grid.is-mobile > .col.is-0 {
  flex: none;
  width: 0%;
}
.grid.is-mobile > .col.is-offset-0 {
  margin-left: 0%;
}
.grid.is-mobile > .col.is-1 {
  flex: none;
  width: 8.3333333333%;
}
.grid.is-mobile > .col.is-offset-1 {
  margin-left: 8.3333333333%;
}
.grid.is-mobile > .col.is-2 {
  flex: none;
  width: 16.6666666667%;
}
.grid.is-mobile > .col.is-offset-2 {
  margin-left: 16.6666666667%;
}
.grid.is-mobile > .col.is-3 {
  flex: none;
  width: 25%;
}
.grid.is-mobile > .col.is-offset-3 {
  margin-left: 25%;
}
.grid.is-mobile > .col.is-4 {
  flex: none;
  width: 33.3333333333%;
}
.grid.is-mobile > .col.is-offset-4 {
  margin-left: 33.3333333333%;
}
.grid.is-mobile > .col.is-5 {
  flex: none;
  width: 41.6666666667%;
}
.grid.is-mobile > .col.is-offset-5 {
  margin-left: 41.6666666667%;
}
.grid.is-mobile > .col.is-6 {
  flex: none;
  width: 50%;
}
.grid.is-mobile > .col.is-offset-6 {
  margin-left: 50%;
}
.grid.is-mobile > .col.is-7 {
  flex: none;
  width: 58.3333333333%;
}
.grid.is-mobile > .col.is-offset-7 {
  margin-left: 58.3333333333%;
}
.grid.is-mobile > .col.is-8 {
  flex: none;
  width: 66.6666666667%;
}
.grid.is-mobile > .col.is-offset-8 {
  margin-left: 66.6666666667%;
}
.grid.is-mobile > .col.is-9 {
  flex: none;
  width: 75%;
}
.grid.is-mobile > .col.is-offset-9 {
  margin-left: 75%;
}
.grid.is-mobile > .col.is-10 {
  flex: none;
  width: 83.3333333333%;
}
.grid.is-mobile > .col.is-offset-10 {
  margin-left: 83.3333333333%;
}
.grid.is-mobile > .col.is-11 {
  flex: none;
  width: 91.6666666667%;
}
.grid.is-mobile > .col.is-offset-11 {
  margin-left: 91.6666666667%;
}
.grid.is-mobile > .col.is-12 {
  flex: none;
  width: 100%;
}
.grid.is-mobile > .col.is-offset-12 {
  margin-left: 100%;
}
@media screen and (max-width: 768px) {
  .col.mobile\:is-narrow {
    flex: none;
    width: unset;
  }
  .col.mobile\:is-full {
    flex: none;
    width: 100%;
  }
  .col.mobile\:is-three-quarters {
    flex: none;
    width: 75%;
  }
  .col.mobile\:is-two-thirds {
    flex: none;
    width: 66.6666%;
  }
  .col.mobile\:is-half {
    flex: none;
    width: 50%;
  }
  .col.mobile\:is-one-third {
    flex: none;
    width: 33.3333%;
  }
  .col.mobile\:is-one-quarter {
    flex: none;
    width: 25%;
  }
  .col.mobile\:is-one-fifth {
    flex: none;
    width: 20%;
  }
  .col.mobile\:is-two-fifths {
    flex: none;
    width: 40%;
  }
  .col.mobile\:is-three-fifths {
    flex: none;
    width: 60%;
  }
  .col.mobile\:is-four-fifths {
    flex: none;
    width: 80%;
  }
  .col.mobile\:is-offset-three-quarters {
    margin-left: 75%;
  }
  .col.mobile\:is-offset-two-thirds {
    margin-left: 66.6666%;
  }
  .col.mobile\:is-offset-half {
    margin-left: 50%;
  }
  .col.mobile\:is-offset-one-third {
    margin-left: 33.3333%;
  }
  .col.mobile\:is-offset-one-quarter {
    margin-left: 25%;
  }
  .col.mobile\:is-offset-one-fifth {
    margin-left: 20%;
  }
  .col.mobile\:is-offset-two-fifths {
    margin-left: 40%;
  }
  .col.mobile\:is-offset-three-fifths {
    margin-left: 60%;
  }
  .col.mobile-offset-four-fifths {
    margin-left: 80%;
  }
  .col.mobile\:is-0 {
    flex: none;
    width: 0%;
  }
  .col.mobile\:is-offset-0 {
    margin-left: 0%;
  }
  .col.mobile\:is-1 {
    flex: none;
    width: 8.3333333333%;
  }
  .col.mobile\:is-offset-1 {
    margin-left: 8.3333333333%;
  }
  .col.mobile\:is-2 {
    flex: none;
    width: 16.6666666667%;
  }
  .col.mobile\:is-offset-2 {
    margin-left: 16.6666666667%;
  }
  .col.mobile\:is-3 {
    flex: none;
    width: 25%;
  }
  .col.mobile\:is-offset-3 {
    margin-left: 25%;
  }
  .col.mobile\:is-4 {
    flex: none;
    width: 33.3333333333%;
  }
  .col.mobile\:is-offset-4 {
    margin-left: 33.3333333333%;
  }
  .col.mobile\:is-5 {
    flex: none;
    width: 41.6666666667%;
  }
  .col.mobile\:is-offset-5 {
    margin-left: 41.6666666667%;
  }
  .col.mobile\:is-6 {
    flex: none;
    width: 50%;
  }
  .col.mobile\:is-offset-6 {
    margin-left: 50%;
  }
  .col.mobile\:is-7 {
    flex: none;
    width: 58.3333333333%;
  }
  .col.mobile\:is-offset-7 {
    margin-left: 58.3333333333%;
  }
  .col.mobile\:is-8 {
    flex: none;
    width: 66.6666666667%;
  }
  .col.mobile\:is-offset-8 {
    margin-left: 66.6666666667%;
  }
  .col.mobile\:is-9 {
    flex: none;
    width: 75%;
  }
  .col.mobile\:is-offset-9 {
    margin-left: 75%;
  }
  .col.mobile\:is-10 {
    flex: none;
    width: 83.3333333333%;
  }
  .col.mobile\:is-offset-10 {
    margin-left: 83.3333333333%;
  }
  .col.mobile\:is-11 {
    flex: none;
    width: 91.6666666667%;
  }
  .col.mobile\:is-offset-11 {
    margin-left: 91.6666666667%;
  }
  .col.mobile\:is-12 {
    flex: none;
    width: 100%;
  }
  .col.mobile\:is-offset-12 {
    margin-left: 100%;
  }
}
@media screen and (min-width: 769px) {
  .col.is-narrow, .col.tablet\:is-narrow {
    flex: none;
    width: unset;
  }
  .col.is-full, .col.tablet\:is-full {
    flex: none;
    width: 100%;
  }
  .col.is-three-quarters, .col.tablet\:is-three-quarters {
    flex: none;
    width: 75%;
  }
  .col.is-two-thirds, .col.tablet\:is-two-thirds {
    flex: none;
    width: 66.6666%;
  }
  .col.is-half, .col.tablet\:is-half {
    flex: none;
    width: 50%;
  }
  .col.is-one-third, .col.tablet\:is-one-third {
    flex: none;
    width: 33.3333%;
  }
  .col.is-one-quarter, .col.tablet\:is-one-quarter {
    flex: none;
    width: 25%;
  }
  .col.is-one-fifth, .col.tablet\:is-one-fifth {
    flex: none;
    width: 20%;
  }
  .col.is-two-fifths, .col.tablet\:is-two-fifths {
    flex: none;
    width: 40%;
  }
  .col.is-three-fifths, .col.tablet\:is-three-fifths {
    flex: none;
    width: 60%;
  }
  .col.is-four-fifths, .col.tablet\:is-four-fifths {
    flex: none;
    width: 80%;
  }
  .col.is-offset-three-quarters, .col.tablet\:is-offset-three-quarters {
    margin-left: 75%;
  }
  .col.is-offset-two-thirds, .col.tablet\:is-offset-two-thirds {
    margin-left: 66.6666%;
  }
  .col.is-offset-half, .col.tablet\:is-offset-half {
    margin-left: 50%;
  }
  .col.is-offset-one-third, .col.tablet\:is-offset-one-third {
    margin-left: 33.3333%;
  }
  .col.is-offset-one-quarter, .col.tablet\:is-offset-one-quarter {
    margin-left: 25%;
  }
  .col.is-offset-one-fifth, .col.tablet\:is-offset-one-fifth {
    margin-left: 20%;
  }
  .col.is-offset-two-fifths, .col.tablet\:is-offset-two-fifths {
    margin-left: 40%;
  }
  .col.is-offset-three-fifths, .col.tablet\:is-offset-three-fifths {
    margin-left: 60%;
  }
  .col.is-offset-four-fifths, .col.tablet\:is-offset-four-fifths {
    margin-left: 80%;
  }
  .col.is-0, .col.tablet\:is-0 {
    flex: none;
    width: 0%;
  }
  .col.is-offset-0, .col.tablet\:is-offset-0 {
    margin-left: 0%;
  }
  .col.is-1, .col.tablet\:is-1 {
    flex: none;
    width: 8.3333333333%;
  }
  .col.is-offset-1, .col.tablet\:is-offset-1 {
    margin-left: 8.3333333333%;
  }
  .col.is-2, .col.tablet\:is-2 {
    flex: none;
    width: 16.6666666667%;
  }
  .col.is-offset-2, .col.tablet\:is-offset-2 {
    margin-left: 16.6666666667%;
  }
  .col.is-3, .col.tablet\:is-3 {
    flex: none;
    width: 25%;
  }
  .col.is-offset-3, .col.tablet\:is-offset-3 {
    margin-left: 25%;
  }
  .col.is-4, .col.tablet\:is-4 {
    flex: none;
    width: 33.3333333333%;
  }
  .col.is-offset-4, .col.tablet\:is-offset-4 {
    margin-left: 33.3333333333%;
  }
  .col.is-5, .col.tablet\:is-5 {
    flex: none;
    width: 41.6666666667%;
  }
  .col.is-offset-5, .col.tablet\:is-offset-5 {
    margin-left: 41.6666666667%;
  }
  .col.is-6, .col.tablet\:is-6 {
    flex: none;
    width: 50%;
  }
  .col.is-offset-6, .col.tablet\:is-offset-6 {
    margin-left: 50%;
  }
  .col.is-7, .col.tablet\:is-7 {
    flex: none;
    width: 58.3333333333%;
  }
  .col.is-offset-7, .col.tablet\:is-offset-7 {
    margin-left: 58.3333333333%;
  }
  .col.is-8, .col.tablet\:is-8 {
    flex: none;
    width: 66.6666666667%;
  }
  .col.is-offset-8, .col.tablet\:is-offset-8 {
    margin-left: 66.6666666667%;
  }
  .col.is-9, .col.tablet\:is-9 {
    flex: none;
    width: 75%;
  }
  .col.is-offset-9, .col.tablet\:is-offset-9 {
    margin-left: 75%;
  }
  .col.is-10, .col.tablet\:is-10 {
    flex: none;
    width: 83.3333333333%;
  }
  .col.is-offset-10, .col.tablet\:is-offset-10 {
    margin-left: 83.3333333333%;
  }
  .col.is-11, .col.tablet\:is-11 {
    flex: none;
    width: 91.6666666667%;
  }
  .col.is-offset-11, .col.tablet\:is-offset-11 {
    margin-left: 91.6666666667%;
  }
  .col.is-12, .col.tablet\:is-12 {
    flex: none;
    width: 100%;
  }
  .col.is-offset-12, .col.tablet\:is-offset-12 {
    margin-left: 100%;
  }
}
@media screen and (max-width: 1023px) {
  .col.touch\:is-narrow {
    flex: none;
    width: unset;
  }
  .col.touch\:is-full {
    flex: none;
    width: 100%;
  }
  .col.touch\:is-three-quarters {
    flex: none;
    width: 75%;
  }
  .col.touch\:is-two-thirds {
    flex: none;
    width: 66.6666%;
  }
  .col.touch\:is-half {
    flex: none;
    width: 50%;
  }
  .col.touch\:is-one-third {
    flex: none;
    width: 33.3333%;
  }
  .col.touch\:is-one-quarter {
    flex: none;
    width: 25%;
  }
  .col.touch\:is-one-fifth {
    flex: none;
    width: 20%;
  }
  .col.touch\:is-two-fifths {
    flex: none;
    width: 40%;
  }
  .col.touch\:is-three-fifths {
    flex: none;
    width: 60%;
  }
  .col.touch\:is-four-fifths {
    flex: none;
    width: 80%;
  }
  .col.touch\:is-offset-three-quarters {
    margin-left: 75%;
  }
  .col.touch\:is-offset-two-thirds {
    margin-left: 66.6666%;
  }
  .col.touch\:is-offset-half {
    margin-left: 50%;
  }
  .col.touch\:is-offset-one-third {
    margin-left: 33.3333%;
  }
  .col.touch\:is-offset-one-quarter {
    margin-left: 25%;
  }
  .col.touch\:is-offset-one-fifth {
    margin-left: 20%;
  }
  .col.touch\:is-offset-two-fifths {
    margin-left: 40%;
  }
  .col.touch\:is-offset-three-fifths {
    margin-left: 60%;
  }
  .col.touch\:is-offset-four-fifths {
    margin-left: 80%;
  }
  .col.touch\:is-0 {
    flex: none;
    width: 0%;
  }
  .col.touch\:is-offset-0 {
    margin-left: 0%;
  }
  .col.touch\:is-1 {
    flex: none;
    width: 8.3333333333%;
  }
  .col.touch\:is-offset-1 {
    margin-left: 8.3333333333%;
  }
  .col.touch\:is-2 {
    flex: none;
    width: 16.6666666667%;
  }
  .col.touch\:is-offset-2 {
    margin-left: 16.6666666667%;
  }
  .col.touch\:is-3 {
    flex: none;
    width: 25%;
  }
  .col.touch\:is-offset-3 {
    margin-left: 25%;
  }
  .col.touch\:is-4 {
    flex: none;
    width: 33.3333333333%;
  }
  .col.touch\:is-offset-4 {
    margin-left: 33.3333333333%;
  }
  .col.touch\:is-5 {
    flex: none;
    width: 41.6666666667%;
  }
  .col.touch\:is-offset-5 {
    margin-left: 41.6666666667%;
  }
  .col.touch\:is-6 {
    flex: none;
    width: 50%;
  }
  .col.touch\:is-offset-6 {
    margin-left: 50%;
  }
  .col.touch\:is-7 {
    flex: none;
    width: 58.3333333333%;
  }
  .col.touch\:is-offset-7 {
    margin-left: 58.3333333333%;
  }
  .col.touch\:is-8 {
    flex: none;
    width: 66.6666666667%;
  }
  .col.touch\:is-offset-8 {
    margin-left: 66.6666666667%;
  }
  .col.touch\:is-9 {
    flex: none;
    width: 75%;
  }
  .col.touch\:is-offset-9 {
    margin-left: 75%;
  }
  .col.touch\:is-10 {
    flex: none;
    width: 83.3333333333%;
  }
  .col.touch\:is-offset-10 {
    margin-left: 83.3333333333%;
  }
  .col.touch\:is-11 {
    flex: none;
    width: 91.6666666667%;
  }
  .col.touch\:is-offset-11 {
    margin-left: 91.6666666667%;
  }
  .col.touch\:is-12 {
    flex: none;
    width: 100%;
  }
  .col.touch\:is-offset-12 {
    margin-left: 100%;
  }
}
@media screen and (min-width: 1024px) {
  .col.desktop\:is-narrow {
    flex: none;
    width: unset;
  }
  .col.desktop\:is-full {
    flex: none;
    width: 100%;
  }
  .col.desktop\:is-three-quarters {
    flex: none;
    width: 75%;
  }
  .col.desktop\:is-two-thirds {
    flex: none;
    width: 66.6666%;
  }
  .col.desktop\:is-half {
    flex: none;
    width: 50%;
  }
  .col.desktop\:is-one-third {
    flex: none;
    width: 33.3333%;
  }
  .col.desktop\:is-one-quarter {
    flex: none;
    width: 25%;
  }
  .col.desktop\:is-one-fifth {
    flex: none;
    width: 20%;
  }
  .col.desktop\:is-two-fifths {
    flex: none;
    width: 40%;
  }
  .col.desktop\:is-three-fifths {
    flex: none;
    width: 60%;
  }
  .col.desktop\:is-four-fifths {
    flex: none;
    width: 80%;
  }
  .col.desktop\:is-offset-three-quarters {
    margin-left: 75%;
  }
  .col.desktop\:is-offset-two-thirds {
    margin-left: 66.6666%;
  }
  .col.desktop\:is-offset-half {
    margin-left: 50%;
  }
  .col.desktop\:is-offset-one-third {
    margin-left: 33.3333%;
  }
  .col.desktop\:is-offset-one-quarter {
    margin-left: 25%;
  }
  .col.desktop\:is-offset-one-fifth {
    margin-left: 20%;
  }
  .col.desktop\:is-offset-two-fifths {
    margin-left: 40%;
  }
  .col.desktop\:is-offset-three-fifths {
    margin-left: 60%;
  }
  .col.desktop\:is-offset-four-fifths {
    margin-left: 80%;
  }
  .col.desktop\:is-0 {
    flex: none;
    width: 0%;
  }
  .col.desktop\:is-offset-0 {
    margin-left: 0%;
  }
  .col.desktop\:is-1 {
    flex: none;
    width: 8.3333333333%;
  }
  .col.desktop\:is-offset-1 {
    margin-left: 8.3333333333%;
  }
  .col.desktop\:is-2 {
    flex: none;
    width: 16.6666666667%;
  }
  .col.desktop\:is-offset-2 {
    margin-left: 16.6666666667%;
  }
  .col.desktop\:is-3 {
    flex: none;
    width: 25%;
  }
  .col.desktop\:is-offset-3 {
    margin-left: 25%;
  }
  .col.desktop\:is-4 {
    flex: none;
    width: 33.3333333333%;
  }
  .col.desktop\:is-offset-4 {
    margin-left: 33.3333333333%;
  }
  .col.desktop\:is-5 {
    flex: none;
    width: 41.6666666667%;
  }
  .col.desktop\:is-offset-5 {
    margin-left: 41.6666666667%;
  }
  .col.desktop\:is-6 {
    flex: none;
    width: 50%;
  }
  .col.desktop\:is-offset-6 {
    margin-left: 50%;
  }
  .col.desktop\:is-7 {
    flex: none;
    width: 58.3333333333%;
  }
  .col.desktop\:is-offset-7 {
    margin-left: 58.3333333333%;
  }
  .col.desktop\:is-8 {
    flex: none;
    width: 66.6666666667%;
  }
  .col.desktop\:is-offset-8 {
    margin-left: 66.6666666667%;
  }
  .col.desktop\:is-9 {
    flex: none;
    width: 75%;
  }
  .col.desktop\:is-offset-9 {
    margin-left: 75%;
  }
  .col.desktop\:is-10 {
    flex: none;
    width: 83.3333333333%;
  }
  .col.desktop\:is-offset-10 {
    margin-left: 83.3333333333%;
  }
  .col.desktop\:is-11 {
    flex: none;
    width: 91.6666666667%;
  }
  .col.desktop\:is-offset-11 {
    margin-left: 91.6666666667%;
  }
  .col.desktop\:is-12 {
    flex: none;
    width: 100%;
  }
  .col.desktop\:is-offset-12 {
    margin-left: 100%;
  }
}
@media screen and (min-width: 1440px) {
  .col.widescreen\:is-narrow {
    flex: none;
    width: unset;
  }
  .col.widescreen\:is-full {
    flex: none;
    width: 100%;
  }
  .col.widescreen\:is-three-quarters {
    flex: none;
    width: 75%;
  }
  .col.widescreen\:is-two-thirds {
    flex: none;
    width: 66.6666%;
  }
  .col.widescreen\:is-half {
    flex: none;
    width: 50%;
  }
  .col.widescreen\:is-one-third {
    flex: none;
    width: 33.3333%;
  }
  .col.widescreen\:is-one-quarter {
    flex: none;
    width: 25%;
  }
  .col.widescreen\:is-one-fifth {
    flex: none;
    width: 20%;
  }
  .col.widescreen\:is-two-fifths {
    flex: none;
    width: 40%;
  }
  .col.widescreen\:is-three-fifths {
    flex: none;
    width: 60%;
  }
  .col.widescreen\:is-four-fifths {
    flex: none;
    width: 80%;
  }
  .col.widescreen\:is-offset-three-quarters {
    margin-left: 75%;
  }
  .col.widescreen\:is-offset-two-thirds {
    margin-left: 66.6666%;
  }
  .col.widescreen\:is-offset-half {
    margin-left: 50%;
  }
  .col.widescreen\:is-offset-one-third {
    margin-left: 33.3333%;
  }
  .col.widescreen\:is-offset-one-quarter {
    margin-left: 25%;
  }
  .col.widescreen\:is-offset-one-fifth {
    margin-left: 20%;
  }
  .col.widescreen\:is-offset-two-fifths {
    margin-left: 40%;
  }
  .col.widescreen\:is-offset-three-fifths {
    margin-left: 60%;
  }
  .col.widescreen\:is-offset-four-fifths {
    margin-left: 80%;
  }
  .col.widescreen\:is-0 {
    flex: none;
    width: 0%;
  }
  .col.widescreen\:is-offset-0 {
    margin-left: 0%;
  }
  .col.widescreen\:is-1 {
    flex: none;
    width: 8.3333333333%;
  }
  .col.widescreen\:is-offset-1 {
    margin-left: 8.3333333333%;
  }
  .col.widescreen\:is-2 {
    flex: none;
    width: 16.6666666667%;
  }
  .col.widescreen\:is-offset-2 {
    margin-left: 16.6666666667%;
  }
  .col.widescreen\:is-3 {
    flex: none;
    width: 25%;
  }
  .col.widescreen\:is-offset-3 {
    margin-left: 25%;
  }
  .col.widescreen\:is-4 {
    flex: none;
    width: 33.3333333333%;
  }
  .col.widescreen\:is-offset-4 {
    margin-left: 33.3333333333%;
  }
  .col.widescreen\:is-5 {
    flex: none;
    width: 41.6666666667%;
  }
  .col.widescreen\:is-offset-5 {
    margin-left: 41.6666666667%;
  }
  .col.widescreen\:is-6 {
    flex: none;
    width: 50%;
  }
  .col.widescreen\:is-offset-6 {
    margin-left: 50%;
  }
  .col.widescreen\:is-7 {
    flex: none;
    width: 58.3333333333%;
  }
  .col.widescreen\:is-offset-7 {
    margin-left: 58.3333333333%;
  }
  .col.widescreen\:is-8 {
    flex: none;
    width: 66.6666666667%;
  }
  .col.widescreen\:is-offset-8 {
    margin-left: 66.6666666667%;
  }
  .col.widescreen\:is-9 {
    flex: none;
    width: 75%;
  }
  .col.widescreen\:is-offset-9 {
    margin-left: 75%;
  }
  .col.widescreen\:is-10 {
    flex: none;
    width: 83.3333333333%;
  }
  .col.widescreen\:is-offset-10 {
    margin-left: 83.3333333333%;
  }
  .col.widescreen\:is-11 {
    flex: none;
    width: 91.6666666667%;
  }
  .col.widescreen\:is-offset-11 {
    margin-left: 91.6666666667%;
  }
  .col.widescreen\:is-12 {
    flex: none;
    width: 100%;
  }
  .col.widescreen\:is-offset-12 {
    margin-left: 100%;
  }
}
@media screen and (min-width: 1920px) {
  .col.fullhd\:is-narrow {
    flex: none;
    width: unset;
  }
  .col.fullhd\:is-full {
    flex: none;
    width: 100%;
  }
  .col.fullhd\:is-three-quarters {
    flex: none;
    width: 75%;
  }
  .col.fullhd\:is-two-thirds {
    flex: none;
    width: 66.6666%;
  }
  .col.fullhd\:is-half {
    flex: none;
    width: 50%;
  }
  .col.fullhd\:is-one-third {
    flex: none;
    width: 33.3333%;
  }
  .col.fullhd\:is-one-quarter {
    flex: none;
    width: 25%;
  }
  .col.fullhd\:is-one-fifth {
    flex: none;
    width: 20%;
  }
  .col.fullhd\:is-two-fifths {
    flex: none;
    width: 40%;
  }
  .col.fullhd\:is-three-fifths {
    flex: none;
    width: 60%;
  }
  .col.fullhd\:is-four-fifths {
    flex: none;
    width: 80%;
  }
  .col.fullhd\:is-offset-three-quarters {
    margin-left: 75%;
  }
  .col.fullhd\:is-offset-two-thirds {
    margin-left: 66.6666%;
  }
  .col.fullhd\:is-offset-half {
    margin-left: 50%;
  }
  .col.fullhd\:is-offset-one-third {
    margin-left: 33.3333%;
  }
  .col.fullhd\:is-offset-one-quarter {
    margin-left: 25%;
  }
  .col.fullhd\:is-offset-one-fifth {
    margin-left: 20%;
  }
  .col.fullhd\:is-offset-two-fifths {
    margin-left: 40%;
  }
  .col.fullhd\:is-offset-three-fifths {
    margin-left: 60%;
  }
  .col.fullhd\:is-offset-four-fifths {
    margin-left: 80%;
  }
  .col.fullhd\:is-0 {
    flex: none;
    width: 0%;
  }
  .col.fullhd\:is-offset-0 {
    margin-left: 0%;
  }
  .col.fullhd\:is-1 {
    flex: none;
    width: 8.3333333333%;
  }
  .col.fullhd\:is-offset-1 {
    margin-left: 8.3333333333%;
  }
  .col.fullhd\:is-2 {
    flex: none;
    width: 16.6666666667%;
  }
  .col.fullhd\:is-offset-2 {
    margin-left: 16.6666666667%;
  }
  .col.fullhd\:is-3 {
    flex: none;
    width: 25%;
  }
  .col.fullhd\:is-offset-3 {
    margin-left: 25%;
  }
  .col.fullhd\:is-4 {
    flex: none;
    width: 33.3333333333%;
  }
  .col.fullhd\:is-offset-4 {
    margin-left: 33.3333333333%;
  }
  .col.fullhd\:is-5 {
    flex: none;
    width: 41.6666666667%;
  }
  .col.fullhd\:is-offset-5 {
    margin-left: 41.6666666667%;
  }
  .col.fullhd\:is-6 {
    flex: none;
    width: 50%;
  }
  .col.fullhd\:is-offset-6 {
    margin-left: 50%;
  }
  .col.fullhd\:is-7 {
    flex: none;
    width: 58.3333333333%;
  }
  .col.fullhd\:is-offset-7 {
    margin-left: 58.3333333333%;
  }
  .col.fullhd\:is-8 {
    flex: none;
    width: 66.6666666667%;
  }
  .col.fullhd\:is-offset-8 {
    margin-left: 66.6666666667%;
  }
  .col.fullhd\:is-9 {
    flex: none;
    width: 75%;
  }
  .col.fullhd\:is-offset-9 {
    margin-left: 75%;
  }
  .col.fullhd\:is-10 {
    flex: none;
    width: 83.3333333333%;
  }
  .col.fullhd\:is-offset-10 {
    margin-left: 83.3333333333%;
  }
  .col.fullhd\:is-11 {
    flex: none;
    width: 91.6666666667%;
  }
  .col.fullhd\:is-offset-11 {
    margin-left: 91.6666666667%;
  }
  .col.fullhd\:is-12 {
    flex: none;
    width: 100%;
  }
  .col.fullhd\:is-offset-12 {
    margin-left: 100%;
  }
}

.grid {
  margin-left: calc(var(--ds-column-gap) * -1);
  margin-right: calc(var(--ds-column-gap) * -1);
  margin-top: calc(var(--ds-column-gap) * -1);
}
.grid:last-child {
  margin-bottom: calc(var(--ds-column-gap) * -1);
}
.grid:not(:last-child) {
  margin-bottom: calc(1.5rem - var(--ds-column-gap));
}
.grid.is-centered {
  justify-content: center;
}
.grid.is-gapless {
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
}
.grid.is-gapless > .col {
  margin: 0;
  padding: 0 !important;
}
.grid.is-gapless:not(:last-child) {
  margin-bottom: 1.5rem;
}
.grid.is-gapless:last-child {
  margin-bottom: 0;
}
.grid.is-mobile {
  display: flex;
}
.grid.is-multiline {
  flex-wrap: wrap;
}
.grid.is-vcentered {
  align-items: center;
}
@media screen and (min-width: 769px) {
  .grid:not(.is-desktop) {
    display: flex;
  }
}
@media screen and (min-width: 1024px) {
  .grid.is-desktop {
    display: flex;
  }
}

/**
 * Variables
 * --------------------------------
 * Define here the css variables for the component to be able to use it in host or non-host mode
 * These variables can be used in the component styles below and later on be overridden in themes.
 */
.heading, .title, .subtitle {
  --_heading-position: var(--heading-position, var(--mod-heading-position, static));
  --_heading-top: var(--heading-top, var(--mod-heading-top));
  --_heading-right: var(--heading-right, var(--mod-heading-right));
  --_heading-bottom: var(--heading-bottom, var(--mod-heading-bottom));
  --_heading-left: var(--heading-left, var(--mod-heading-left));
  position: var(--_heading-position);
  top: var(--_heading-top);
  right: var(--_heading-right);
  bottom: var(--_heading-bottom);
  left: var(--_heading-left);
  --_heading-m: var(--heading-m, var(--mod-heading-m, 0));
  --_heading-my: var(--heading-my, var(--mod-heading-my));
  --_heading-mx: var(--heading-mx, var(--mod-heading-mx));
  --_heading-ml: var(--heading-ml, var(--mod-heading-ml));
  --_heading-mr: var(--heading-mr, var(--mod-heading-mr));
  --_heading-mt: var(--heading-mt, var(--mod-heading-mt));
  --_heading-mb: var(--heading-mb, var(--mod-heading-mb));
  margin: var(--_heading-m);
  margin-inline: var(--_heading-mx);
  margin-block: var(--_heading-my);
  margin-left: var(--_heading-ml);
  margin-right: var(--_heading-mr);
  margin-top: var(--_heading-mt);
  margin-bottom: var(--_heading-mb);
  --_heading-color: var(--heading-color, var(--mod-heading-color, inherit));
  --_heading-family: var(--heading-family, var(--mod-heading-family, var(--ds-heading-font-family)));
  --_heading-weight: var(--heading-weight, var(--mod-heading-weight, var(--ds-heading-font-weight)));
  --_heading-line-height: var(--heading-line-height, var(--mod-heading-line-height, var(--ds-heading-line-height)));
  --_heading-font-size: var(--heading-font-size, var(--mod-heading-font-size, var(--ds-heading-1-size-device)));
  --_heading-space: var(--heading-space, var(--mod-heading-space, var(--ds-heading-1-space)));
  --_heading-shadow: var(--heading-shadow, var(--mod-heading-shadow, none));
  --_heading-text-align: var(--heading-text-align, var(--mod-heading-text-align, inherit));
}

/**
  * Basic Component Styles
  * --------------------------------
  * Define here the component styles using the mixin to support host and non-host mode for hybrid components.
  */
.heading, .title, .subtitle {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: block;
  box-sizing: content-box;
  hyphens: auto;
  overflow-wrap: break-word;
  text-wrap: balance;
  color: var(--_heading-color);
  font-family: var(--_heading-family);
  font-weight: var(--_heading-weight);
  font-size: var(--_heading-font-size);
  line-height: var(--_heading-line-height);
  text-align: var(--_heading-text-align);
  text-shadow: var(--_heading-shadow);
}
.heading em:not(.text),
.heading span:not(.text), .title em:not(.text),
.title span:not(.text), .subtitle em:not(.text),
.subtitle span:not(.text) {
  font-weight: inherit;
}
.heading b,
.heading strong,
.heading .is-bold, .title b,
.title strong,
.title .is-bold, .subtitle b,
.subtitle strong,
.subtitle .is-bold {
  font-weight: var(--ds-alias-text-weight-bold);
}
.heading.is-bold, .title.is-bold, .subtitle.is-bold {
  font-weight: var(--ds-alias-text-weight-bold);
}
.heading.is-centered, .title.is-centered, .subtitle.is-centered {
  text-align: center;
}
.heading.is-right, .title.is-right, .subtitle.is-right {
  text-align: right;
}
.heading.is-justified, .title.is-justified, .subtitle.is-justified {
  text-align: justify;
}

.heading.has-no-wrap, .title.has-no-wrap, .subtitle.has-no-wrap {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

/**
  * Variants and States
  * --------------------------------
  * Define here the variants and states like size or colors for the component.
  */
.heading.has-shadow, .title.has-shadow, .subtitle.has-shadow {
  --mod-heading-shadow: var(--ds-heading-shadow);
}

.heading.subtitle, .heading.is-subtitle, .title.subtitle, .title.is-subtitle, .subtitle.subtitle, .subtitle.is-subtitle {
  --mod-heading-family: var(--ds-heading-subtitle-font-family);
  --mod-heading-weight: var(--ds-heading-subtitle-font-weight);
  --mod-heading-line-height: var(--ds-heading-subtitle-line-height);
}

.heading.is-primary, .title.is-primary, .subtitle.is-primary {
  --mod-heading-color: var(--ds-heading-primary-color-base);
}

.heading.is-success, .title.is-success, .subtitle.is-success {
  --mod-heading-color: var(--ds-heading-success-color-base);
}

.heading.is-warning, .title.is-warning, .subtitle.is-warning {
  --mod-heading-color: var(--ds-heading-warning-color-base);
}

.heading.is-danger, .title.is-danger, .subtitle.is-danger {
  --mod-heading-color: var(--ds-heading-danger-color-base);
}

.heading.is-white, .title.is-white, .subtitle.is-white {
  --mod-heading-color: var(--ds-heading-white-color-base);
}

.heading.is-black, .title.is-black, .subtitle.is-black {
  --mod-heading-color: var(--ds-heading-black-color-base);
}

.heading.is-1, .title.is-1, .subtitle.is-1 {
  --mod-heading-font-size: var(--ds-heading-1-size-device);
  --mod-heading-space: var(--ds-heading-1-space);
}
.heading.is-level-1, .title.is-level-1, .subtitle.is-level-1 {
  --mod-heading-font-size: var(--ds-heading-1-size-device);
  --mod-heading-space: var(--ds-heading-1-space);
}
.heading.is-3xl, .title.is-3xl, .subtitle.is-3xl {
  --mod-heading-font-size: var(--ds-heading-1-size-device);
  --mod-heading-space: var(--ds-heading-1-space);
}
.heading.is-2, .title.is-2, .subtitle.is-2 {
  --mod-heading-font-size: var(--ds-heading-2-size-device);
  --mod-heading-space: var(--ds-heading-2-space);
}
.heading.is-level-2, .title.is-level-2, .subtitle.is-level-2 {
  --mod-heading-font-size: var(--ds-heading-2-size-device);
  --mod-heading-space: var(--ds-heading-2-space);
}
.heading.is-2xl, .title.is-2xl, .subtitle.is-2xl {
  --mod-heading-font-size: var(--ds-heading-2-size-device);
  --mod-heading-space: var(--ds-heading-2-space);
}
.heading.is-3, .title.is-3, .subtitle.is-3 {
  --mod-heading-font-size: var(--ds-heading-3-size-device);
  --mod-heading-space: var(--ds-heading-3-space);
}
.heading.is-level-3, .title.is-level-3, .subtitle.is-level-3 {
  --mod-heading-font-size: var(--ds-heading-3-size-device);
  --mod-heading-space: var(--ds-heading-3-space);
}
.heading.is-xl, .title.is-xl, .subtitle.is-xl {
  --mod-heading-font-size: var(--ds-heading-3-size-device);
  --mod-heading-space: var(--ds-heading-3-space);
}
.heading.is-4, .title.is-4, .subtitle.is-4 {
  --mod-heading-font-size: var(--ds-heading-4-size-device);
  --mod-heading-space: var(--ds-heading-4-space);
}
.heading.is-level-4, .title.is-level-4, .subtitle.is-level-4 {
  --mod-heading-font-size: var(--ds-heading-4-size-device);
  --mod-heading-space: var(--ds-heading-4-space);
}
.heading.is-lg, .title.is-lg, .subtitle.is-lg {
  --mod-heading-font-size: var(--ds-heading-4-size-device);
  --mod-heading-space: var(--ds-heading-4-space);
}
.heading.is-5, .title.is-5, .subtitle.is-5 {
  --mod-heading-font-size: var(--ds-heading-5-size-device);
  --mod-heading-space: var(--ds-heading-5-space);
}
.heading.is-level-5, .title.is-level-5, .subtitle.is-level-5 {
  --mod-heading-font-size: var(--ds-heading-5-size-device);
  --mod-heading-space: var(--ds-heading-5-space);
}
.heading.is-base, .title.is-base, .subtitle.is-base {
  --mod-heading-font-size: var(--ds-heading-5-size-device);
  --mod-heading-space: var(--ds-heading-5-space);
}
.heading.is-display-1, .title.is-display-1, .subtitle.is-display-1 {
  --mod-heading-font-size: var(--ds-heading-display-1-size-device);
  --mod-heading-space: var(--ds-heading-display-1-space);
}
.heading.is-5xl, .title.is-5xl, .subtitle.is-5xl {
  --mod-heading-font-size: var(--ds-heading-display-1-size-device);
  --mod-heading-space: var(--ds-heading-display-1-space);
}
.heading.is-display-2, .title.is-display-2, .subtitle.is-display-2 {
  --mod-heading-font-size: var(--ds-heading-display-2-size-device);
  --mod-heading-space: var(--ds-heading-display-2-space);
}
.heading.is-4xl, .title.is-4xl, .subtitle.is-4xl {
  --mod-heading-font-size: var(--ds-heading-display-2-size-device);
  --mod-heading-space: var(--ds-heading-display-2-space);
}

h1.title,
h1 .title,
h1.subtitle,
h1 .subtitle,
h1.heading,
h1 .heading,
[role=heading][aria-level="1"].title,
[role=heading][aria-level="1"] .title,
[role=heading][aria-level="1"].subtitle,
[role=heading][aria-level="1"] .subtitle,
[role=heading][aria-level="1"].heading,
[role=heading][aria-level="1"] .heading {
  --mod-heading-font-size: var(--ds-heading-1-size-device);
  --mod-heading-space: var(--ds-heading-1-space);
}

h2.title,
h2 .title,
h2.subtitle,
h2 .subtitle,
h2.heading,
h2 .heading,
[role=heading][aria-level="2"].title,
[role=heading][aria-level="2"] .title,
[role=heading][aria-level="2"].subtitle,
[role=heading][aria-level="2"] .subtitle,
[role=heading][aria-level="2"].heading,
[role=heading][aria-level="2"] .heading {
  --mod-heading-font-size: var(--ds-heading-2-size-device);
  --mod-heading-space: var(--ds-heading-2-space);
}

h3.title,
h3 .title,
h3.subtitle,
h3 .subtitle,
h3.heading,
h3 .heading,
[role=heading][aria-level="3"].title,
[role=heading][aria-level="3"] .title,
[role=heading][aria-level="3"].subtitle,
[role=heading][aria-level="3"] .subtitle,
[role=heading][aria-level="3"].heading,
[role=heading][aria-level="3"] .heading {
  --mod-heading-font-size: var(--ds-heading-3-size-device);
  --mod-heading-space: var(--ds-heading-3-space);
}

h4.title,
h4 .title,
h4.subtitle,
h4 .subtitle,
h4.heading,
h4 .heading,
[role=heading][aria-level="4"].title,
[role=heading][aria-level="4"] .title,
[role=heading][aria-level="4"].subtitle,
[role=heading][aria-level="4"] .subtitle,
[role=heading][aria-level="4"].heading,
[role=heading][aria-level="4"] .heading {
  --mod-heading-font-size: var(--ds-heading-4-size-device);
  --mod-heading-space: var(--ds-heading-4-space);
}

h5.title,
h5 .title,
h5.subtitle,
h5 .subtitle,
h5.heading,
h5 .heading,
[role=heading][aria-level="5"].title,
[role=heading][aria-level="5"] .title,
[role=heading][aria-level="5"].subtitle,
[role=heading][aria-level="5"] .subtitle,
[role=heading][aria-level="5"].heading,
[role=heading][aria-level="5"] .heading {
  --mod-heading-font-size: var(--ds-heading-5-size-device);
  --mod-heading-space: var(--ds-heading-5-space);
}

.heading.has-space-all, .title.has-space-all, .subtitle.has-space-all {
  --mod-heading-mt: var(--_heading-space);
  --mod-heading-mb: var(--_heading-space);
}
.heading.has-space-top, .title.has-space-top, .subtitle.has-space-top {
  --mod-heading-mt: var(--_heading-space);
  --mod-heading-mb: 0;
}
.heading.has-space-bottom, .title.has-space-bottom, .subtitle.has-space-bottom {
  --mod-heading-mb: var(--_heading-space);
}
.heading.has-space-none, .title.has-space-none, .subtitle.has-space-none {
  --mod-heading-mb: 0;
  --mod-heading-mt: 0;
}

/**
 * General Mixins
 * --------------------------------
 */
/**
 * Control Mixins
 * --------------------------------
 */
/**
 * Variables
 * --------------------------------
 * Define here the css variables for the component to be able to use it in host or non-host mode
 * These variables can be used in the component styles below and later on be overridden in themes.
 */
.input {
  --_input-family: var(--input-family, var(--mod-input-family, var(--ds-form-control-family)));
  --_input-weight: var(--input-weight, var(--mod-input-weight, var(--ds-form-control-weight)));
  --_input-line-height: var(--input-line-height, var(--mod-input-line-height, var(--ds-form-control-line-height)));
  --_input-size: var(--input-size, var(--mod-input-size, var(--ds-form-control-size-device)));
  --_input-color: var(--input-color, var(--mod-input-color, var(--ds-form-control-color-value-base)));
  --_input-placeholder: var(--input-placeholder, var(--mod-input-placeholder, var(--ds-form-control-color-placeholder-base)));
}

/**
  * Basic Component Styles
  * --------------------------------
  * Define here the component styles using the mixin to support host and non-host mode for hybrid components.
  */
.input {
  border: none;
  outline: none;
  box-shadow: none;
  position: relative;
  background: inherit;
  flex: 1;
  color: var(--_input-color);
  font-family: var(--_input-family);
  font-weight: var(--_input-weight);
  font-size: var(--_input-size);
  line-height: var(--_input-line-height);
  border-radius: var(--_input-container-radius);
}
.input::-moz-placeholder {
  color: var(--_input-placeholder);
}
.input::placeholder {
  color: var(--_input-placeholder);
}
.input::-moz-placeholder {
  color: var(--_input-placeholder);
}
.input::-webkit-input-placeholder {
  color: var(--_input-placeholder);
}
.input:-moz-placeholder {
  color: var(--_input-placeholder);
}
.input:-ms-input-placeholder {
  color: var(--_input-placeholder);
}

/**
 * Variables
 * --------------------------------
 * Define here the css variables for the component to be able to use it in host or non-host mode
 * These variables can be used in the component styles below and later on be overridden in themes.
 */
.label {
  --_label-position: var(--label-position, var(--mod-label-position, static));
  --_label-top: var(--label-top, var(--mod-label-top));
  --_label-right: var(--label-right, var(--mod-label-right));
  --_label-bottom: var(--label-bottom, var(--mod-label-bottom));
  --_label-left: var(--label-left, var(--mod-label-left));
  position: var(--_label-position);
  top: var(--_label-top);
  right: var(--_label-right);
  bottom: var(--_label-bottom);
  left: var(--_label-left);
  --_label-m: var(--label-m, var(--mod-label-m, 0));
  --_label-my: var(--label-my, var(--mod-label-my));
  --_label-mx: var(--label-mx, var(--mod-label-mx));
  --_label-ml: var(--label-ml, var(--mod-label-ml));
  --_label-mr: var(--label-mr, var(--mod-label-mr));
  --_label-mt: var(--label-mt, var(--mod-label-mt));
  --_label-mb: var(--label-mb, var(--mod-label-mb));
  margin: var(--_label-m);
  margin-inline: var(--_label-mx);
  margin-block: var(--_label-my);
  margin-left: var(--_label-ml);
  margin-right: var(--_label-mr);
  margin-top: var(--_label-mt);
  margin-bottom: var(--_label-mb);
  --_label-color: var(--label-color, var(--mod-label-color, inherit));
  --_label-family: var(--label-family, var(--mod-label-family, var(--ds-label-family)));
  --_label-weight: var(--label-weight, var(--mod-label-weight, var(--ds-label-weight)));
  --_label-line-height: var(--label-line-height, var(--mod-label-line-height, var(--ds-label-line-height)));
  --_label-size: var(--label-size, var(--mod-label-size, var(--ds-label-size-base-device)));
}

/**
  * Basic Component Styles
  * --------------------------------
  * Define here the component styles using the mixin to support host and non-host mode for hybrid components.
  */
.label {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: block;
  box-sizing: content-box;
  hyphens: auto;
  overflow-wrap: break-word;
  text-wrap: balance;
  min-width: 0;
  color: var(--_label-color);
  font-family: var(--_label-family);
  font-weight: var(--_label-weight);
  font-size: var(--_label-size);
  line-height: var(--_label-line-height);
}

.label.has-no-wrap {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

/**
  * Variants and States
  * --------------------------------
  * Define here the variants and states like size or colors for the component.
  */
.label.is-lg {
  --mod-label-family: var(--ds-alias-text-family-heading);
}
.label.is-xl {
  --mod-label-family: var(--ds-alias-text-family-heading);
}
.label.is-2xl {
  --mod-label-family: var(--ds-alias-text-family-heading);
}
.label.is-3xl {
  --mod-label-family: var(--ds-alias-text-family-heading);
}

.label.is-xxx-large {
  --mod-label-size: var(--ds-label-size-3xl-device);
}
.label.is-3xl {
  --mod-label-size: var(--ds-label-size-3xl-device);
}
.label.is-xx-large {
  --mod-label-size: var(--ds-label-size-2xl-device);
}
.label.is-2xl {
  --mod-label-size: var(--ds-label-size-2xl-device);
}
.label.is-x-large {
  --mod-label-size: var(--ds-label-size-xl-device);
}
.label.is-xl {
  --mod-label-size: var(--ds-label-size-xl-device);
}
.label.is-large {
  --mod-label-size: var(--ds-label-size-lg-device);
}
.label.is-lg {
  --mod-label-size: var(--ds-label-size-lg-device);
}
.label.is-normal {
  --mod-label-size: var(--ds-label-size-base-device);
}
.label.is-base {
  --mod-label-size: var(--ds-label-size-base-device);
}
.label.is-small {
  --mod-label-size: var(--ds-label-size-sm-device);
}
.label.is-sm {
  --mod-label-size: var(--ds-label-size-sm-device);
}

.label.is-success {
  --mod-label-color: var(--ds-label-color-success);
}
.label.is-warning {
  --mod-label-color: var(--ds-label-color-warning);
}
.label.is-danger {
  --mod-label-color: var(--ds-label-color-danger);
}
.label.is-hovered {
  --mod-label-color: var(--ds-label-color-base-hover);
}
.label.is-pressed {
  --mod-label-color: var(--ds-label-color-base-active);
}
.label.is-danger.is-hovered {
  --mod-label-color: var(--ds-label-color-danger-hover);
}
.label.is-danger.is-pressed {
  --mod-label-color: var(--ds-label-color-danger-active);
}
.label.is-disabled {
  --mod-label-color: var(--ds-label-color-disabled) !important;
}

/**
 * Link provides semantic, accessible anchor element styling with interactive states and color variants.
 * Supports hover, active, and focus states with smooth transitions and inverted color scheme.
 * Works with inline content and integrates with ds-icon components for icon support.
 *
 * @variant is-hovered - Hover state styling with color transition.
 * @variant is-active - Active/pressed state styling.
 * @variant is-focused - Focus state with focus ring styling.
 * @variant is-inverted - Inverted color scheme for use on dark backgrounds.
 */
/**
 * Variables
 * --------------------------------
 * Define here the css variables for the component to be able to use it in host or non-host mode
 * These variables can be used in the component styles below and later on be overridden in themes.
 *
 * @prop --link-color - Base text color of the link.
 * @prop --link-color-hover - Text color on hover state.
 * @prop --link-color-active - Text color on active/pressed state.
 * @prop --link-family - Font family of the link.
 * @prop --link-weight - Font weight of the link.
 * @prop --link-radius - Border radius of the link focus ring.
 * @prop --link-border-width - Text decoration thickness (underline width).
 * @prop --link-underline-offset - Offset of the underline from text baseline.
 * @prop --link-focus - Focus ring color.
 */
a.link:not(.button),
a.is-link:not(.button) {
  --_link-focus: var(--link-focus, var(--mod-link-focus, var(--ds-alias-interaction-focus-color-base)));
  --_link-color: var(--link-color, var(--mod-link-color, var(--ds-link-color-base)));
  --_link-color-hover: var(--link-color-hover, var(--mod-link-color-hover, var(--ds-link-color-base-hover)));
  --_link-color-active: var(--link-color-active, var(--mod-link-color-active, var(--ds-link-color-base-active)));
  --_link-family: var(--link-family, var(--mod-link-family, var(--ds-link-family)));
  --_link-weight: var(--link-weight, var(--mod-link-weight, var(--ds-link-weight)));
  --_link-radius: var(--link-radius, var(--mod-link-radius, var(--ds-alias-radius-base)));
  --_link-border-width: var(--link-border-width, var(--mod-link-border-width, var(--ds-link-border-width)));
  --_link-underline-offset: var(--link-underline-offset, var(--mod-link-underline-offset, var(--ds-link-underline-offset, 0.25rem)));
}

/**
  * Basic Style
  */
.content > a:-moz-any-link:not(.button) {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  cursor: pointer;
  hyphens: auto;
  margin: 0;
  overflow-wrap: break-word;
  font-family: var(--_link-family);
  font-weight: var(--_link-weight);
  border-radius: var(--_link-radius);
  outline: none;
  text-decoration: underline;
  text-underline-offset: var(--_link-underline-offset);
  text-decoration-thickness: var(--_link-border-width);
  -moz-transition-property: color, background-color, border-color, box-shadow;
  transition-property: color, background-color, border-color, box-shadow;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
a.link:not(.button),
a.is-link:not(.button),
.content > a:any-link:not(.button) {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  cursor: pointer;
  hyphens: auto;
  margin: 0;
  overflow-wrap: break-word;
  font-family: var(--_link-family);
  font-weight: var(--_link-weight);
  border-radius: var(--_link-radius);
  outline: none;
  text-decoration: underline;
  text-underline-offset: var(--_link-underline-offset);
  text-decoration-thickness: var(--_link-border-width);
  transition-property: color, background-color, border-color, box-shadow;
  transition-duration: 0.2s;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.content > a:-moz-any-link:not(.button)::-moz-focus-inner {
  border: 0;
}
a.link:not(.button)::-moz-focus-inner,
a.is-link:not(.button)::-moz-focus-inner,
.content > a:any-link:not(.button)::-moz-focus-inner {
  border: 0;
}
.content > a:-moz-any-link:not(.button) > strong {
  color: currentcolor;
}
a.link:not(.button) > strong,
a.is-link:not(.button) > strong,
.content > a:any-link:not(.button) > strong {
  color: currentcolor;
}
.content > a:-moz-any-link:not(.button) {
  color: var(--_link-color);
}
a.link:not(.button),
a.is-link:not(.button),
.content > a:any-link:not(.button) {
  color: var(--_link-color);
}
.content > a:-moz-any-link:not(.button) ds-icon {
  --icon-color: var(--_link-color);
}
a.link:not(.button) ds-icon,
a.is-link:not(.button) ds-icon,
.content > a:any-link:not(.button) ds-icon {
  --icon-color: var(--_link-color);
}
@media (hover: hover) and (pointer: fine) {
  .content > a:-moz-any-link:not(.button):hover, .content > a:-moz-any-link:not(.button).is-hovered {
    color: var(--_link-color-hover);
  }
  a.link:not(.button):hover, a.link:not(.button).is-hovered,
  a.is-link:not(.button):hover,
  a.is-link:not(.button).is-hovered,
  .content > a:any-link:not(.button):hover,
  .content > a:any-link:not(.button).is-hovered {
    color: var(--_link-color-hover);
  }
  .content > a:-moz-any-link:not(.button):hover ds-icon, .content > a:-moz-any-link:not(.button).is-hovered ds-icon {
    --icon-color: var(--_link-color-hover);
  }
  a.link:not(.button):hover ds-icon, a.link:not(.button).is-hovered ds-icon,
  a.is-link:not(.button):hover ds-icon,
  a.is-link:not(.button).is-hovered ds-icon,
  .content > a:any-link:not(.button):hover ds-icon,
  .content > a:any-link:not(.button).is-hovered ds-icon {
    --icon-color: var(--_link-color-hover);
  }
}
.content > a:-moz-any-link:not(.button):active, .content > a:-moz-any-link:not(.button).is-active {
  color: var(--_link-color-active);
}
a.link:not(.button):active, a.link:not(.button).is-active,
a.is-link:not(.button):active,
a.is-link:not(.button).is-active,
.content > a:any-link:not(.button):active,
.content > a:any-link:not(.button).is-active {
  color: var(--_link-color-active);
}
.content > a:-moz-any-link:not(.button):active ds-icon, .content > a:-moz-any-link:not(.button).is-active ds-icon {
  --icon-color: var(--_link-color-active);
}
a.link:not(.button):active ds-icon, a.link:not(.button).is-active ds-icon,
a.is-link:not(.button):active ds-icon,
a.is-link:not(.button).is-active ds-icon,
.content > a:any-link:not(.button):active ds-icon,
.content > a:any-link:not(.button).is-active ds-icon {
  --icon-color: var(--_link-color-active);
}
.content > a:-moz-any-link:not(.button):focus-visible:not(:active), .content > a:-moz-any-link:not(.button).is-focused:not(:active) {
  box-shadow: var(--ds-alias-interaction-focus-color-border) 0 0 0 2px, var(--_link-focus) 0 0 0 5px !important;
}
a.link:not(.button):focus-visible:not(:active), a.link:not(.button).is-focused:not(:active),
a.is-link:not(.button):focus-visible:not(:active),
a.is-link:not(.button).is-focused:not(:active),
.content > a:any-link:not(.button):focus-visible:not(:active),
.content > a:any-link:not(.button).is-focused:not(:active) {
  box-shadow: var(--ds-alias-interaction-focus-color-border) 0 0 0 2px, var(--_link-focus) 0 0 0 5px !important;
}
.content > a:-moz-any-link:not(.button).is-inverted {
  --mod-link-color: var(--ds-link-color-inverted);
  --mod-link-color-hover: var(--ds-link-color-inverted-hover);
  --mod-link-color-active: var(--ds-link-color-inverted-active);
  --mod-link-focus: var(--ds-alias-interaction-focus-color-inverted);
}
a.link:not(.button).is-inverted,
a.is-link:not(.button).is-inverted,
.content > a:any-link:not(.button).is-inverted {
  --mod-link-color: var(--ds-link-color-inverted);
  --mod-link-color-hover: var(--ds-link-color-inverted-hover);
  --mod-link-color-active: var(--ds-link-color-inverted-active);
  --mod-link-focus: var(--ds-alias-interaction-focus-color-inverted);
}

/**
 * Variables
 * --------------------------------
 * Define here the css variables for the component to be able to use it in host or non-host mode
 * These variables can be used in the component styles below and later on be overridden in themes.
 *
 * @prop --description-list-grid-term: Defines the grid column size for the term (dt) element.
 * @prop --description-list-grid-detail: Defines the grid column size for the detail (dd) element.
 * @prop --description-list-grid-row-gap: Defines the gap between rows in the description list.
 * @prop --description-list-grid-column-gap: Defines the gap between columns in the description list.
 * @prop --description-list-term-color: Defines the text color for the term (dt) element.
 * @prop --description-list-term-weight: Defines the font weight for the term (dt) element.
 * @prop --description-list-detail-color: Defines the text color for the detail (dd) element.
 * @prop --description-list-detail-weight: Defines the font weight for the detail (dd) element.
 */
dl.description-list {
  --_description-list-grid-term: var(--description-list-grid-term, var(--mod-description-list-grid-term, 1fr));
  --_description-list-grid-detail: var(--description-list-grid-detail, var(--mod-description-list-grid-detail, 1fr));
  --_description-list-grid-row-gap: var(--description-list-grid-row-gap, var(--mod-description-list-grid-row-gap, var(--ds-alias-space-2xs-device)));
  --_description-list-grid-column-gap: var(--description-list-grid-column-gap, var(--mod-description-list-grid-column-gap, var(--ds-alias-space-base-device)));
  --_description-list-term-color: var(--description-list-term-color, var(--mod-description-list-term-color, var(--ds-description-list-term-color)));
  --_description-list-term-weight: var(--description-list-term-weight, var(--mod-description-list-term-weight, var(--ds-description-list-term-weight)));
  --_description-list-detail-color: var(--description-list-detail-color, var(--mod-description-list-detail-color, var(--ds-description-list-detail-color)));
  --_description-list-detail-weight: var(--description-list-detail-weight, var(--mod-description-list-detail-weight, var(--ds-description-list-detail-weight)));
}

/**
  * Basic Component Styles
  * --------------------------------
  * Define here the component styles using the mixin to support host and non-host mode for hybrid components.
  */
dl.description-list {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: var(--_description-list-grid-row-gap);
}
@media screen and (min-width: 769px) {
  dl.description-list {
    grid-template-columns: var(--_description-list-grid-term) var(--_description-list-grid-detail);
    -moz-column-gap: var(--_description-list-grid-column-gap);
         column-gap: var(--_description-list-grid-column-gap);
  }
}
dl.description-list dt {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  color: var(--_description-list-term-color);
  font-weight: var(--_description-list-term-weight);
}
dl.description-list dd {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  color: var(--_description-list-detail-color);
  font-weight: var(--_description-list-detail-weight);
}
@media screen and (max-width: 768px) {
  dl.description-list dd:not(:last-child) {
    margin-bottom: 1rem;
  }
}

/**
 * Variables
 * --------------------------------
 * Define here the css variables for the component to be able to use it in host or non-host mode
 * These variables can be used in the component styles below and later on be overridden in themes.
 *
 * @prop --ordered-list-mb: Defines the margin-bottom for the ordered list.
 * @prop --ordered-list-style-type: Defines the list style type for the ordered list.
 * @prop --ordered-list-style-position: Defines the list style position for the ordered list.
 * @prop --ordered-list-marker-color: Defines the color of the list marker for the ordered list.
 * @prop --unordered-list-mb: Defines the margin-bottom for the unordered list.
 * @prop --unordered-list-style-type: Defines the list style type for the unordered list.
 * @prop --unordered-list-style-position: Defines the list style position for the unordered list.
 * @prop --unordered-list-marker-color: Defines the color of the list marker for the unordered list.
 * @prop --unordered-list-marker-radius: Defines the border radius of the list marker for the unordered list.
 * @prop --unordered-list-marker-icon: Defines the icon for the list marker for the unordered list.
 */
ol.ordered-list {
  --_ordered-list-mb: var(--ordered-list-mb, var(--mod-ordered-list-mb, 1.5rem));
  --_ordered-list-style-type: var(--ordered-list-style-type, var(--mod-ordered-list-style-type, inherit));
  --_ordered-list-style-position: var(--ordered-list-style-position, var(--mod-ordered-list-style-position, inherit));
}

ol.ordered-list li {
  --_ordered-list-marker-color: var(--ordered-list-marker-color, var(--mod-ordered-list-marker-color, var(--ds-list-marker-base)));
}

ul.unordered-list {
  --_unordered-list-mb: var(--unordered-list-mb, var(--mod-unordered-list-mb, 1.5rem));
  --_unordered-list-style-type: var(--unordered-list-style-type, var(--mod-unordered-list-style-type, disc));
  --_unordered-list-style-position: var(--unordered-list-style-position, var(--mod-unordered-list-style-position, inherit));
}

ul.unordered-list li {
  --_unordered-list-marker-color: var(--unordered-list-marker-color, var(--mod-unordered-list-marker-color, var(--ds-list-marker-base)));
  --_unordered-list-marker-radius: var(--unordered-list-marker-radius, var(--mod-unordered-list-marker-radius, var(--ds-list-marker-radius)));
  --_unordered-list-marker-icon: var(--unordered-list-marker-icon, var(--mod-unordered-list-marker-icon, url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 14 14"><path fill-rule="evenodd" d="M13.637 1.198a1 1 0 0 1 .134 1.408l-8.04 9.729-.003.003a1.92 1.92 0 0 1-1.5.692 1.92 1.92 0 0 1-1.499-.747l-.001-.003L.21 9.044a1 1 0 0 1 1.578-1.228l2.464 3.168 7.976-9.652a1 1 0 0 1 1.408-.134" clip-rule="evenodd"/></svg>')));
}

/**
  * Basic Component Styles
  * --------------------------------
  * Define here the component styles using the mixin to support host and non-host mode for hybrid components.
  */
ol.ordered-list {
  margin-left: 2rem;
}
ol.ordered-list:not(:last-child) {
  margin-bottom: var(--_ordered-list-mb);
}
@media screen and (min-width: 1024px) {
  ol.ordered-list {
    --mod-ordered-list-mb: 2rem;
  }
}
ol.ordered-list > li {
  list-style-position: var(--_ordered-list-style-position);
  list-style-type: var(--_ordered-list-style-type);
}
ol.ordered-list > li::marker {
  font-weight: var(--ds-alias-text-weight-bold);
  font-family: var(--ds-alias-text-family-heading);
}
ol.ordered-list.is-alpha {
  --mod-ordered-list-style-type: upper-alpha;
}
ol.ordered-list.is-inside {
  --mod-ordered-list-style-position: inside;
  margin-left: 0;
}

ul.unordered-list {
  margin-left: 2rem;
}
ul.unordered-list:not(:last-child) {
  margin-bottom: var(--_unordered-list-mb);
}
@media screen and (min-width: 1024px) {
  ul.unordered-list {
    --mod-unordered-list-mb: 2rem;
  }
}
ul.unordered-list > li {
  list-style-position: var(--_unordered-list-style-position);
  list-style-type: var(--_unordered-list-style-type);
}
ul.unordered-list.is-inside {
  --mod-_unordered-list-style-position: inside;
  margin-left: 0;
}

ul.unordered-list.has-bullet-circle > li::marker,
ul.unordered-list > li.has-bullet-circle::marker {
  content: none;
}
ul.unordered-list.has-bullet-circle > li::before,
ul.unordered-list > li.has-bullet-circle::before {
  content: "";
  position: absolute;
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  font-size: 0.75rem;
  margin-left: -1.25rem;
  margin-top: 0.313rem;
  border-radius: var(--_unordered-list-marker-radius);
  background: var(--_unordered-list-marker-color);
}

ul.unordered-list.has-icons > li,
ul.unordered-list.has-icon-check > li,
ul.unordered-list > li.has-icon-check,
ul.unordered-list.has-icon-close > li,
ul.unordered-list > li.has-icon-close {
  --mod-unordered-list-style-type: none;
}
ul.unordered-list.has-icons > li::marker,
ul.unordered-list.has-icon-check > li::marker,
ul.unordered-list > li.has-icon-check::marker,
ul.unordered-list.has-icon-close > li::marker,
ul.unordered-list > li.has-icon-close::marker {
  content: none !important;
}
ul.unordered-list.has-icons > li::before,
ul.unordered-list.has-icon-check > li::before,
ul.unordered-list > li.has-icon-check::before,
ul.unordered-list.has-icon-close > li::before,
ul.unordered-list > li.has-icon-close::before {
  content: "";
  position: absolute;
  display: inline-block;
  width: 0.875rem;
  height: 0.875rem;
  margin-left: -1.25rem;
  margin-top: 0.313rem;
  background-color: var(--_unordered-list-marker-color);
  -webkit-mask-image: var(--_unordered-list-marker-icon);
          mask-image: var(--_unordered-list-marker-icon);
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}

ol.ordered-list > li,
ul.unordered-list > li {
  hyphens: auto;
}
ol.ordered-list > li::marker,
ul.unordered-list > li::marker {
  color: var(--_unordered-list-marker-color);
}
ol.ordered-list > li:not(:last-child),
ul.unordered-list > li:not(:last-child) {
  margin-bottom: 1rem;
}
ol.ordered-list.is-compact,
ul.unordered-list.is-compact {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
ol.ordered-list.is-compact li,
ul.unordered-list.is-compact li {
  margin-bottom: 0.25rem;
}

/**
  * Variants and States
  * --------------------------------
  * Define here the variants and states like size or colors for the component.
  */
ul.unordered-list.has-bullet-circle > li,
ul.unordered-list > li.has-bullet-circle {
  --mod-unordered-list-marker-color: var(--ds-list-marker-green);
}

ul.unordered-list.has-bullet-purple > li, ul.unordered-list.is-purple > li, ul.unordered-list > li.is-purple, ul.unordered-list > li.has-bullet-purple {
  --mod-unordered-list-marker-color: var(--ds-list-marker-purple);
}

ul.unordered-list.has-bullet-red > li, ul.unordered-list.is-red > li, ul.unordered-list > li.is-red, ul.unordered-list > li.has-bullet-red {
  --mod-unordered-list-marker-color: var(--ds-list-marker-red);
}

ul.unordered-list.has-bullet-yellow > li, ul.unordered-list.is-yellow > li, ul.unordered-list > li.is-yellow, ul.unordered-list > li.has-bullet-yellow {
  --mod-unordered-list-marker-color: var(--ds-list-marker-yellow);
}

ul.unordered-list.has-bullet-green > li, ul.unordered-list.is-green > li, ul.unordered-list > li.is-green, ul.unordered-list > li.has-bullet-green {
  --mod-unordered-list-marker-color: var(--ds-list-marker-green);
}

ul.unordered-list.is-success > li, ul.unordered-list > li.is-success {
  --mod-unordered-list-marker-color: var(--ds-list-marker-success);
}
ul.unordered-list.is-warning > li, ul.unordered-list > li.is-warning {
  --mod-unordered-list-marker-color: var(--ds-list-marker-warning);
}
ul.unordered-list.is-danger > li, ul.unordered-list > li.is-danger {
  --mod-unordered-list-marker-color: var(--ds-list-marker-danger);
}

ul.unordered-list.has-icon-close > li,
ul.unordered-list > li.has-icon-close {
  --mod-unordered-list-marker-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" focusable="false" aria-hidden="true"><path fill-rule="evenodd" d="M1.70711 0.292893C1.31658 -0.0976311 0.683417 -0.0976311 0.292893 0.292893C-0.0976311 0.683417 -0.0976311 1.31658 0.292893 1.70711L5.58579 7L0.292893 12.2929C-0.0976311 12.6834 -0.0976311 13.3166 0.292893 13.7071C0.683417 14.0976 1.31658 14.0976 1.70711 13.7071L7 8.41421L12.2929 13.7071C12.6834 14.0976 13.3166 14.0976 13.7071 13.7071C14.0976 13.3166 14.0976 12.6834 13.7071 12.2929L8.41421 7L13.7071 1.70711C14.0976 1.31658 14.0976 0.683417 13.7071 0.292893C13.3166 -0.0976311 12.6834 -0.0976311 12.2929 0.292893L7 5.58579L1.70711 0.292893Z" clip-rule="evenodd"/></svg>');
}

ol.ordered-list.is-inverted,
ul.unordered-list.is-inverted {
  color: var(--ds-alias-text-color-white);
  --mod-ordered-list-marker-color: var(--ds-alias-text-color-white);
  --mod-unordered-list-marker-color: var(--ds-alias-text-color-white);
}

/**
 * Variables
 * --------------------------------
 * Define here the css variables for the component to be able to use it in host or non-host mode
 * These variables can be used in the component styles below and later on be overridden in themes.
 */
ul.list .item,
ol.list .item,
ul.list li details,
ol.list li details {
  --_list-item-focus: var(--list-item-focus, var(--mod-list-item-focus, var(--ds-alias-interaction-focus-color-base)));
  --_list-item-grid-template-columns: var(--list-item-grid-template-columns, var(--mod-list-item-grid-template-columns, 1fr));
  --_list-item-min-height: var(--list-item-min-height, var(--mod-list-item-min-height, 3.5rem));
  --_list-item-gap: var(--list-item-gap, var(--mod-list-item-gap, 1rem));
  --_list-item-space: var(--list-item-space, var(--mod-list-item-space, 0.5rem));
  --_list-item-content-gap: var(--list-item-content-gap, var(--mod-list-item-content-gap, 1px));
  --_list-item-color: var(--list-item-color, var(--mod-list-item-color, inherit));
  --_list-item-border-color: var(--list-item-border-color, var(--mod-list-item-border-color, var(--ds-list-item-border-color)));
  --_list-item-border-width: var(--list-item-border-width, var(--mod-list-item-border-width, var(--ds-list-item-border-width, 2px)));
  --_list-item-border-radius: var(--list-item-border-radius, var(--mod-list-item-border-radius, 12px));
  --_list-item-accordion-py: var(--list-item-accordion-py, var(--mod-list-item-accordion-py, var(--ds-alias-space-base-device)));
  --_list-item-action-icon-size: var(--list-item-action-icon-size, var(--mod-list-item-action-icon-size, var(--ds-icon-size-xs)));
  --_list-item-title-size: var(--list-item-title-size, var(--mod-list-item-title-size, var(--ds-heading-5-size-device)));
  --_list-item-title-weight: var(--list-item-title-weight, var(--mod-list-item-title-weight, var(--ds-alias-text-weight-bold)));
  --_list-item-title-family: var(--list-item-title-family, var(--mod-list-item-title-family, var(--ds-global-font-family-heading)));
  --_list-item-text-family: var(--list-item-text-family, var(--mod-list-item-text-family, var(--ds-global-font-family-body)));
  --_list-item-text-weight: var(--list-item-text-weight, var(--mod-list-item-text-weight, var(--ds-alias-text-weight-regular)));
  --_list-item-text-size: var(--list-item-text-size, var(--mod-list-item-text-size, var(--ds-alias-text-size-sm-device)));
}

/**
  * Mixins
  * --------------------------------
  */
/**
  * Basic Component Styles
  * --------------------------------
  * Define here the component styles using the mixin to support host and non-host mode for hybrid components.
  */
ul.list,
ol.list {
  display: block;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

ol.list li,
ul.list li {
  position: relative;
  display: grid;
  box-sizing: border-box;
}

ol.list li:not(.item),
ul.list li:not(.item) {
  grid-template-columns: 1fr;
}

ol.list li.item,
ol.list li .item,
ul.list li.item,
ul.list li .item {
  min-height: var(--_list-item-min-height);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--_list-item-gap);
  width: 100%;
  color: var(--_list-item-color);
  background: inherit;
  border: none;
  align-self: stretch;
  text-align: left;
  font-family: var(--_list-item-title-family);
  padding: var(--_list-item-space) 0;
  padding-bottom: calc(var(--_list-item-space) + 2px);
}
ol.list li.item ds-icon,
ol.list li .item ds-icon,
ul.list li.item ds-icon,
ul.list li .item ds-icon {
  flex-shrink: 0;
}
ol.list li.item .item-content + ds-icon,
ol.list li .item .item-content + ds-icon,
ul.list li.item .item-content + ds-icon,
ul.list li .item .item-content + ds-icon {
  --icon-size: var(--_list-item-action-icon-size);
  --icon-inner-size: var(--_list-item-action-icon-size);
}
ol.list li.item .item-content,
ol.list li .item .item-content,
ul.list li.item .item-content,
ul.list li .item .item-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--_list-item-content-gap);
}
ol.list li.item .item-title,
ol.list li .item .item-title,
ul.list li.item .item-title,
ul.list li .item .item-title {
  font-family: var(--_list-item-title-family);
  font-weight: var(--_list-item-title-weight);
  font-size: var(--_list-item-title-size);
  margin: 0;
}
ol.list li.item .item-text,
ol.list li.item .item-subtitle,
ol.list li .item .item-text,
ol.list li .item .item-subtitle,
ul.list li.item .item-text,
ul.list li.item .item-subtitle,
ul.list li .item .item-text,
ul.list li .item .item-subtitle {
  font-family: var(--_list-item-text-family);
  font-weight: var(--_list-item-text-weight);
  font-size: var(--_list-item-text-size);
  margin: 0;
}
ol.list li.item:after,
ol.list li .item:after,
ul.list li.item:after,
ul.list li .item:after {
  content: "";
  border-radius: 12px;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--_list-item-border-width);
  background: var(--_list-item-border-color);
}

/**
  * Link inside list item
  */
ol.list li a.item,
ol.list li button.item,
ul.list li a.item,
ul.list li button.item {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-user-drag: none; /* Chrome, Safari */
  user-drag: none; /* Non-standard, limited support */
  cursor: pointer;
  hyphens: auto;
  overflow-wrap: break-word;
  font-family: var(--_list-item-title-family);
  font-weight: var(--ds-alias-text-weight-bold);
  color: var(--ds-link-color-base);
  outline: none;
  text-decoration: none;
}
ol.list li a.item::-moz-focus-inner,
ol.list li button.item::-moz-focus-inner,
ul.list li a.item::-moz-focus-inner,
ul.list li button.item::-moz-focus-inner {
  border: 0;
}
@media (hover: hover) and (pointer: fine) {
  ol.list li a.item:hover, ol.list li a.item.is-hovered,
  ol.list li button.item:hover,
  ol.list li button.item.is-hovered,
  ul.list li a.item:hover,
  ul.list li a.item.is-hovered,
  ul.list li button.item:hover,
  ul.list li button.item.is-hovered {
    --mod-list-item-border-color: var(--ds-link-color-base-hover);
    color: var(--ds-link-color-base-hover);
  }
  ol.list li a.item:hover ds-icon, ol.list li a.item.is-hovered ds-icon,
  ol.list li button.item:hover ds-icon,
  ol.list li button.item.is-hovered ds-icon,
  ul.list li a.item:hover ds-icon,
  ul.list li a.item.is-hovered ds-icon,
  ul.list li button.item:hover ds-icon,
  ul.list li button.item.is-hovered ds-icon {
    --icon-color: var(--ds-link-color-base-hover);
  }
}
ol.list li a.item:active, ol.list li a.item.is-pressed,
ol.list li button.item:active,
ol.list li button.item.is-pressed,
ul.list li a.item:active,
ul.list li a.item.is-pressed,
ul.list li button.item:active,
ul.list li button.item.is-pressed {
  --mod-list-item-border-color: var(--ds-link-color-base-active);
  color: var(--ds-link-color-base-active);
}
ol.list li a.item:active ds-icon, ol.list li a.item.is-pressed ds-icon,
ol.list li button.item:active ds-icon,
ol.list li button.item.is-pressed ds-icon,
ul.list li a.item:active ds-icon,
ul.list li a.item.is-pressed ds-icon,
ul.list li button.item:active ds-icon,
ul.list li button.item.is-pressed ds-icon {
  --icon-color: var(--ds-link-color-base-active);
}
ol.list li a.item:focus-visible:not(:active):before, ol.list li a.item.is-focused:not(:active):before,
ol.list li button.item:focus-visible:not(:active):before,
ol.list li button.item.is-focused:not(:active):before,
ul.list li a.item:focus-visible:not(:active):before,
ul.list li a.item.is-focused:not(:active):before,
ul.list li button.item:focus-visible:not(:active):before,
ul.list li button.item.is-focused:not(:active):before {
  box-shadow: var(--ds-alias-interaction-focus-color-border) 0 0 0 2px, var(--_list-item-focus) 0 0 0 5px !important;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  border-radius: var(--ds-alias-radius-base);
}

/**
  * Accordion inside list item
  */
ol.list li details,
ul.list li details {
  position: relative;
  padding: 0;
}
ol.list li details:after,
ul.list li details:after {
  content: "";
  border-radius: 12px;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--_list-item-border-width);
  background: var(--_list-item-border-color);
}
ol.list li details, ol.list li details summary,
ul.list li details,
ul.list li details summary {
  min-height: 2.5rem;
}
ol.list li details summary,
ul.list li details summary {
  padding: 0.5rem 0;
  position: relative;
}
ol.list li details summary:before,
ul.list li details summary:before {
  content: "";
  border-radius: 12px;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--_list-item-border-width);
  background: var(--_list-item-border-color);
}

/**
  * Disabled
  */
ul.list li.item.is-disabled,
ul.list li .item.is-disabled,
ol.list li.item.is-disabled,
ol.list li .item.is-disabled {
  pointer-events: none !important;
  cursor: default !important;
  color: var(--ds-list-item-disabled);
}
ul.list li.item.is-disabled ds-icon,
ul.list li .item.is-disabled ds-icon,
ol.list li.item.is-disabled ds-icon,
ol.list li .item.is-disabled ds-icon {
  --icon-color: var(--ds-list-item-disabled);
}

/**
  * Component Styles
  * --------------------------------
  */
ds-item [slot=content] {
  font-size: var(--ds-alias-text-size-sm);
  font-family: var(--ds-alias-text-family-body);
  font-weight: var(--ds-alias-text-weight-regular);
}
ds-item [slot=content] strong,
ds-item [slot=content] b {
  font-weight: var(--ds-alias-text-weight-bold);
}
ds-item [slot=content] h1,
ds-item [slot=content] h2,
ds-item [slot=content] h3,
ds-item [slot=content] h4,
ds-item [slot=content] h5,
ds-item [slot=content] h6,
ds-item [slot=content] ds-heading {
  font-family: var(--ds-alias-text-family-heading);
  font-weight: var(--ds-heading-font-weight);
}
ds-item [slot=content] h1,
ds-item [slot=content] [role=heading][aria-level="1"] {
  font-size: var(--ds-heading-1-size-device);
}
ds-item [slot=content] h2,
ds-item [slot=content] [role=heading][aria-level="2"] {
  font-size: var(--ds-heading-2-size-device);
}
ds-item [slot=content] h3,
ds-item [slot=content] [role=heading][aria-level="3"] {
  font-size: var(--ds-heading-3-size-device);
}
ds-item [slot=content] h4,
ds-item [slot=content] [role=heading][aria-level="4"] {
  font-size: var(--ds-heading-4-size-device);
}
ds-item [slot=content] h5,
ds-item [slot=content] [role=heading][aria-level="5"] {
  font-size: var(--ds-heading-5-size-device);
}

/**
 * Variables
 * --------------------------------
 * Define here the css variables for the component to be able to use it in host or non-host mode
 * These variables can be used in the component styles below and later on be overridden in themes.
 */
.notification {
  --_notification-position: var(--notification-position, var(--mod-notification-position, static));
  --_notification-top: var(--notification-top, var(--mod-notification-top));
  --_notification-right: var(--notification-right, var(--mod-notification-right));
  --_notification-bottom: var(--notification-bottom, var(--mod-notification-bottom));
  --_notification-left: var(--notification-left, var(--mod-notification-left));
  position: var(--_notification-position);
  top: var(--_notification-top);
  right: var(--_notification-right);
  bottom: var(--_notification-bottom);
  left: var(--_notification-left);
  --_notification-m: var(--notification-m, var(--mod-notification-m, 0));
  --_notification-my: var(--notification-my, var(--mod-notification-my));
  --_notification-mx: var(--notification-mx, var(--mod-notification-mx));
  --_notification-ml: var(--notification-ml, var(--mod-notification-ml));
  --_notification-mr: var(--notification-mr, var(--mod-notification-mr));
  --_notification-mt: var(--notification-mt, var(--mod-notification-mt));
  --_notification-mb: var(--notification-mb, var(--mod-notification-mb));
  margin: var(--_notification-m);
  margin-inline: var(--_notification-mx);
  margin-block: var(--_notification-my);
  margin-left: var(--_notification-ml);
  margin-right: var(--_notification-mr);
  margin-top: var(--_notification-mt);
  margin-bottom: var(--_notification-mb);
  --_notification-radius: var(--notification-radius, var(--mod-notification-radius, var(--ds-notification-radius)));
  --_notification-color-background: var(--notification-color-background, var(--mod-notification-color-background, var(--ds-notification-base-color-background)));
  --_notification-color-border: var(--notification-color-border, var(--mod-notification-color-border, var(--ds-notification-base-color-border)));
  --_notification-color-text: var(--notification-color-text, var(--mod-notification-color-text, var(--ds-notification-base-color-text)));
  --_notification-heading-family: var(--notification-heading-family, var(--mod-notification-heading-family, var(--ds-alias-text-family-heading)));
  --_notification-heading-weight: var(--notification-heading-weight, var(--mod-notification-heading-weight, var(--ds-alias-text-weight-bold)));
  --_notification-heading-size: var(--notification-heading-size, var(--mod-notification-heading-size, var(--ds-alias-text-size-lg-device)));
  --_notification-heading-line-height: var(--notification-heading-line-height, var(--mod-notification-heading-line-height, var(--ds-alias-text-line-height-heading)));
  --_notification-content-family: var(--notification-content-family, var(--mod-notification-content-family, var(--ds-alias-text-family-body)));
  --_notification-content-weight: var(--notification-content-weight, var(--mod-notification-content-weight, inherit));
  --_notification-content-size: var(--notification-content-size, var(--mod-notification-content-size, var(--ds-alias-text-size-base-device)));
  --_notification-content-line-height: var(--notification-content-line-height, var(--mod-notification-content-line-height, var(--ds-alias-text-line-height-body)));
  --_notification-icon: var(--notification-icon, var(--mod-notification-icon, var(--ds-notification-base-color-icon)));
  --_notification-icon-display: var(--notification-icon-display, var(--mod-notification-icon-display, block));
  --_notification-space: var(--notification-space, var(--mod-notification-space, var(--ds-card-space-base-device, 1.5rem)));
  --_notification-icon-space: var(--notification-icon-space, var(--mod-notification-icon-space, 1.5rem));
  --_notification-close-offset: var(--notification-close-offset, var(--mod-notification-close-offset, 2rem));
  --_notification-gap: var(--notification-gap, var(--mod-notification-gap, 0.125rem));
  --_notification-close-position: var(--notification-close-position, var(--mod-notification-close-position, absolute));
  --_notification-close-right: var(--notification-close-right, var(--mod-notification-close-right, var(--_notification-space)));
  --_notification-close-top: var(--notification-close-top, var(--mod-notification-close-top, var(--_notification-space)));
  --_notification-animation-start-opacity: var(--notification-animation-start-opacity, var(--mod-notification-animation-start-opacity, 1));
  --_notification-animation-start-transform: var(--notification-animation-start-transform, var(--mod-notification-animation-start-transform, none));
  --_notification-animation-transition: var(--notification-animation-transition, var(--mod-notification-animation-transition, none));
  --_notification-animation-end-opacity: var(--notification-animation-end-opacity, var(--mod-notification-animation-end-opacity, 1));
  --_notification-animation-end-transform: var(--notification-animation-end-transform, var(--mod-notification-animation-end-transform, none));
}

/**
  * Basic Component Styles
  * --------------------------------
  * Define here the component styles using the mixin to support host and non-host mode for hybrid components.
  */
.notification {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  flex: 1;
  position: relative;
  hyphens: auto;
  border: var(--ds-alias-border-width-base) solid var(--_notification-color-border);
  border-radius: var(--_notification-radius);
  background: var(--_notification-color-background);
  color: var(--_notification-color-text);
  padding-top: var(--_notification-space);
  padding-right: var(--_notification-space);
  padding-bottom: var(--_notification-space);
  padding-left: calc(var(--_notification-space) + var(--_notification-icon-space));
  display: flex;
  flex-direction: column;
  gap: var(--_notification-gap);
}
.notification ds-close,
.notification .close {
  position: var(--_notification-close-position);
  top: var(--_notification-close-top);
  right: var(--_notification-close-right);
}
.notification > h2 {
  font-family: var(--_notification-heading-family);
  font-weight: var(--_notification-heading-weight);
  line-height: var(--_notification-heading-line-height);
  font-size: var(--_notification-heading-size);
  margin: 0 !important;
}
.notification:has(.close) > h2::before, .notification:has(ds-close) > h2::before {
  content: "";
  float: right;
  width: 24px;
  height: calc(var(--_notification-heading-line-height) * 16px); /* height of one line */
}
.notification > span, .notification > p {
  font-family: var(--_notification-content-family);
  font-size: var(--_notification-content-size);
  font-weight: var(--_notification-content-weight);
  line-height: var(--_notification-content-line-height);
  margin: 0 !important;
}
.notification::before {
  display: var(--_notification-icon-display);
  background-color: currentColor;
  color: currentColor;
  forced-color-adjust: preserve-parent-color;
  position: absolute;
  height: 1.5rem;
  width: 1.5rem;
  left: -0.25rem;
  top: calc((var(--_notification-space)));
  transform: translateX(var(--_notification-space));
  content: "";
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  mask-image: var(--_notification-icon);
  -webkit-mask-image: var(--_notification-icon);
}

/**
  * Variants
  * --------------------------------
  * Define here the variants and states like size or colors for the component.
  */
.notification.has-no-icon {
  --mod-notification-icon-display: none;
  --mod-notification-icon-space: 0rem;
}

.notification.is-info {
  --mod-notification-color-text: var(--ds-notification-info-color-text);
  --mod-notification-color-border: var(--ds-notification-info-color-border);
  --mod-notification-color-background: var(--ds-notification-info-color-background);
  --mod-notification-icon: var(--ds-notification-info-color-icon);
}
.notification.is-success {
  --mod-notification-color-text: var(--ds-notification-success-color-text);
  --mod-notification-color-border: var(--ds-notification-success-color-border);
  --mod-notification-color-background: var(--ds-notification-success-color-background);
  --mod-notification-icon: var(--ds-notification-success-color-icon);
}
.notification.is-warning {
  --mod-notification-color-text: var(--ds-notification-warning-color-text);
  --mod-notification-color-border: var(--ds-notification-warning-color-border);
  --mod-notification-color-background: var(--ds-notification-warning-color-background);
  --mod-notification-icon: var(--ds-notification-warning-color-icon);
}
.notification.is-danger {
  --mod-notification-color-text: var(--ds-notification-danger-color-text);
  --mod-notification-color-border: var(--ds-notification-danger-color-border);
  --mod-notification-color-background: var(--ds-notification-danger-color-background);
  --mod-notification-icon: var(--ds-notification-danger-color-icon);
}
.notification.is-outline-base {
  --mod-notification-color-text: var(--ds-notification-outline-base-color-text);
  --mod-notification-color-border: var(--ds-notification-outline-base-color-border);
  --mod-notification-color-background: var(--ds-notification-outline-base-color-background);
  --mod-notification-icon: var(--ds-notification-outline-base-color-icon);
}
.notification.is-outline-purple {
  --mod-notification-color-text: var(--ds-notification-outline-purple-color-text);
  --mod-notification-color-border: var(--ds-notification-outline-purple-color-border);
  --mod-notification-color-background: var(--ds-notification-outline-purple-color-background);
  --mod-notification-icon: var(--ds-notification-outline-purple-color-icon);
}
.notification.is-outline-green {
  --mod-notification-color-text: var(--ds-notification-outline-green-color-text);
  --mod-notification-color-border: var(--ds-notification-outline-green-color-border);
  --mod-notification-color-background: var(--ds-notification-outline-green-color-background);
  --mod-notification-icon: var(--ds-notification-outline-green-color-icon);
}
.notification.is-outline-yellow {
  --mod-notification-color-text: var(--ds-notification-outline-yellow-color-text);
  --mod-notification-color-border: var(--ds-notification-outline-yellow-color-border);
  --mod-notification-color-background: var(--ds-notification-outline-yellow-color-background);
  --mod-notification-icon: var(--ds-notification-outline-yellow-color-icon);
}
.notification.is-outline-red {
  --mod-notification-color-text: var(--ds-notification-outline-red-color-text);
  --mod-notification-color-border: var(--ds-notification-outline-red-color-border);
  --mod-notification-color-background: var(--ds-notification-outline-red-color-background);
  --mod-notification-icon: var(--ds-notification-outline-red-color-icon);
}

.notification.is-sm {
  --mod-notification-space: var(--ds-card-space-sm-device);
}
.notification.is-md {
  --mod-notification-space: var(--ds-card-space-md-device);
}
.notification.is-lg {
  --mod-notification-space: var(--ds-card-space-lg-device);
}

picture {
  --_picture-img-radius: var(--picture-img-radius, var(--ds-alias-radius-lg));
  display: block;
  border-radius: var(--_picture-img-radius);
}

picture img {
  display: block;
  width: 100%;
  max-width: 100%;
  max-inline-size: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
  block-size: auto;
  border-radius: var(--_picture-img-radius);
}

/**
  * Basic Component Styles
  * --------------------------------
  * Define here the component styles using the mixin to support host and non-host mode for hybrid components.
  */
.radio-group {
  display: grid;
  gap: 0.25rem;
}
@media screen and (min-width: 769px) {
  .radio-group {
    display: flex;
    gap: 1rem;
  }
}

.radio-group.is-vertical {
  display: grid;
  gap: 0.25rem;
}

/**
 * Control Mixins
 * --------------------------------
 * $wrapper — the element that contains input[type="radio"] + label.
 *   Web component: ':host'
 *   CSS-only:      '.radio'
 */
/**
 * CSS-only radio / switch toggle: apply .radio to the wrapper <label>.
 *
 *   Radio:
 *   <label class="radio">
 *     <input type="radio">
 *     Label text
 *   </label>
 *
 */
.radio {
  --_radio-gap: var(--radio-gap, var(--mod-radio-gap, 0.5rem));
  --_radio-label-base-color: var(--radio-label-base-color, var(--mod-radio-label-base-color, inherit));
  --_radio-label-hover-color: var(--radio-label-hover-color, var(--mod-radio-label-hover-color, var(--ds-global-color-sky-5)));
  --_radio-label-active-color: var(--radio-label-active-color, var(--mod-radio-label-active-color, var(--ds-global-color-primary-6)));
  --_radio-size: var(--radio-size, var(--mod-radio-size, 1.5rem));
  --_radio-border-width: var(--radio-border-width, var(--mod-radio-border-width, var(--ds-alias-border-width-base)));
  --_radio-radius: var(--radio-radius, var(--mod-radio-radius, var(--ds-alias-radius-rounded)));
  --_radio-tile-radius: var(--radio-tile-radius, var(--mod-radio-tile-radius, var(--ds-alias-radius-base)));
  --_radio-tile-padding: var(--radio-tile-padding, var(--mod-radio-tile-padding, 1rem));
  --_radio-tile-border-width: var(--radio-tile-border-width, var(--mod-radio-tile-border-width, var(--ds-alias-border-width-base)));
  --_radio-tile-base-background-color: var(--radio-tile-base-background-color, var(--mod-radio-tile-base-background-color, inherit));
  --_radio-tile-base-border-color: var(--radio-tile-base-border-color, var(--mod-radio-tile-base-border-color, var(--ds-global-color-grey-3)));
  --_radio-tile-hover-background-color: var(--radio-tile-hover-background-color, var(--mod-radio-tile-hover-background-color, var(--ds-global-color-grey-0)));
  --_radio-tile-hover-border-color: var(--radio-tile-hover-border-color, var(--mod-radio-tile-hover-border-color, var(--ds-global-color-sky-5)));
  --_radio-tile-active-background-color: var(--radio-tile-active-background-color, var(--mod-radio-tile-active-background-color, var(--ds-global-color-grey-0)));
  --_radio-tile-active-border-color: var(--radio-tile-active-border-color, var(--mod-radio-tile-active-border-color, var(--ds-global-color-primary-6)));
  --_radio-unchecked-base-color-background: var(--radio-unchecked-base-color-background, var(--mod-radio-unchecked-base-color-background, transparent));
  --_radio-unchecked-base-color-border: var(--radio-unchecked-base-color-border, var(--mod-radio-unchecked-base-color-border, var(--ds-global-color-primary-5)));
  --_radio-unchecked-hover-color-background: var(--radio-unchecked-hover-color-background, var(--mod-radio-unchecked-hover-color-background, var(--ds-global-color-grey-1)));
  --_radio-unchecked-hover-color-border: var(--radio-unchecked-hover-color-border, var(--mod-radio-unchecked-hover-color-border, var(--ds-global-color-sky-5)));
  --_radio-unchecked-active-color-background: var(--radio-unchecked-active-color-background, var(--mod-radio-unchecked-active-color-background, var(--ds-global-color-grey-2)));
  --_radio-unchecked-active-color-border: var(--radio-unchecked-active-color-border, var(--mod-radio-unchecked-active-color-border, var(--ds-global-color-primary-6)));
  --_radio-checked-base-color-background: var(--radio-checked-base-color-background, var(--mod-radio-checked-base-color-background, var(--ds-global-color-primary-5)));
  --_radio-checked-base-color-border: var(--radio-checked-base-color-border, var(--mod-radio-checked-base-color-border, var(--ds-global-color-primary-5)));
  --_radio-checked-base-color-icon: var(--radio-checked-base-color-icon, var(--mod-radio-checked-base-color-icon, var(--ds-global-color-white)));
  --_radio-checked-hover-color-background: var(--radio-checked-hover-color-background, var(--mod-radio-checked-hover-color-background, var(--ds-global-color-sky-5)));
  --_radio-checked-hover-color-border: var(--radio-checked-hover-color-border, var(--mod-radio-checked-hover-color-border, var(--ds-global-color-sky-5)));
  --_radio-checked-active-color-background: var(--radio-checked-active-color-background, var(--mod-radio-checked-active-color-background, var(--ds-global-color-primary-6)));
  --_radio-checked-active-color-border: var(--radio-checked-active-color-border, var(--mod-radio-checked-active-color-border, var(--ds-global-color-primary-6)));
}

.radio {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-user-drag: none; /* Chrome, Safari */
  user-drag: none; /* Non-standard, limited support */
  display: inline-flex;
  align-items: center;
  gap: var(--_radio-gap);
  cursor: pointer;
  user-select: none;
  color: var(--_radio-label-base-color);
  font-family: var(--ds-global-font-family-text);
  line-height: var(--ds-typography-line-height-base);
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  min-height: 3rem;
}
@media (hover: hover) and (pointer: fine) {
  .radio:hover {
    color: var(--_radio-label-hover-color);
  }
}
.radio:active {
  color: var(--_radio-label-active-color);
}

.radio input[type=radio] {
  position: relative;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  flex: none;
  display: inline-flex;
  width: var(--_radio-size);
  height: var(--_radio-size);
  background: var(--_radio-unchecked-base-color-background);
  border: var(--_radio-border-width) solid var(--_radio-unchecked-base-color-border);
  border-radius: var(--_radio-radius);
  vertical-align: top;
  cursor: pointer;
  transition: background 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

.radio input[type=radio]:disabled {
  cursor: default;
}

.radio input[type=radio]:focus-visible {
  outline: var(--ds-alias-interaction-focus-width, 2px) solid var(--ds-alias-interaction-focus-color-base);
  outline-offset: 2px;
  border-radius: var(--_radio-radius);
}

.radio input[type=radio]:not(:disabled):hover,
.radio:hover input[type=radio]:not(:disabled):not(:checked) {
  background: var(--_radio-unchecked-hover-color-background);
  border-color: var(--_radio-unchecked-hover-color-border);
}

.radio input[type=radio]:not(:disabled):active,
.radio:active input[type=radio]:not(:disabled):not(:checked) {
  background: var(--_radio-unchecked-active-color-background);
  border-color: var(--_radio-unchecked-active-color-border);
}

.radio input[type=radio]:checked {
  background: var(--_radio-checked-base-color-background);
  border-color: var(--_radio-checked-base-color-border);
}

.radio input[type=radio]:checked:not(:disabled):hover,
.radio:hover input[type=radio]:checked:not(:disabled) {
  background: var(--_radio-checked-hover-color-background);
  border-color: var(--_radio-checked-hover-color-border);
}

.radio input[type=radio]:checked:not(:disabled):active,
.radio:active input[type=radio]:checked:not(:disabled) {
  background: var(--_radio-checked-active-color-background);
  border-color: var(--_radio-checked-active-color-border);
}

.radio input[type=radio]::after {
  content: "";
  display: block;
  border-radius: var(--_radio-radius);
  height: 0;
  width: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  background: transparent;
  transition: opacity 0.3s ease-in-out, width 0.3s ease-in-out, height 0.3s ease-in-out;
}

.radio input[type=radio]:checked::after {
  background-color: var(--_radio-checked-base-color-icon);
  height: 0.5rem;
  width: 0.5rem;
  opacity: 1;
}

.radio.is-invalid:not(.is-disabled) {
  --mod-radio-label-base-color: var(--ds-global-color-danger-4);
  --mod-radio-label-hover-color: var(--ds-global-color-danger-5);
  --mod-radio-label-active-color: var(--ds-global-color-danger-6);
  --mod-radio-unchecked-base-color-background: transparent;
  --mod-radio-unchecked-base-color-border: var(--ds-divider-color-danger);
  --mod-radio-unchecked-hover-color-background: var(--ds-global-color-danger-1);
  --mod-radio-unchecked-hover-color-border: var(--ds-divider-color-danger-dark);
  --mod-radio-unchecked-active-color-background: var(--ds-global-color-danger-1);
  --mod-radio-unchecked-active-color-border: var(--ds-divider-color-danger-darker);
  --mod-radio-checked-base-color-background: var(--ds-divider-color-danger);
  --mod-radio-checked-base-color-border: var(--ds-divider-color-danger);
  --mod-radio-checked-hover-color-background: var(--ds-divider-color-danger-dark);
  --mod-radio-checked-hover-color-border: var(--ds-divider-color-danger-dark);
  --mod-radio-checked-active-color-background: var(--ds-divider-color-danger-darker);
  --mod-radio-checked-active-color-border: var(--ds-divider-color-danger-darker);
}

.radio.is-disabled {
  cursor: default;
  pointer-events: none;
  --mod-radio-label-base-color: var(--ds-global-color-grey-5);
  --mod-radio-label-hover-color: var(--ds-global-color-grey-5);
  --mod-radio-label-active-color: var(--ds-global-color-grey-5);
  --mod-radio-unchecked-base-color-background: var(--ds-global-color-grey-2);
  --mod-radio-unchecked-base-color-border: var(--ds-alias-border-color-disabled);
  --mod-radio-checked-base-color-background: var(--ds-alias-border-color-disabled);
  --mod-radio-checked-base-color-border: var(--ds-alias-border-color-disabled);
}

/**
 * Variables
 * --------------------------------
 * Define here the css variables for the component to be able to use it in host or non-host mode
 * These variables can be used in the component styles below and later on be overridden in themes.
 */
/**
  * Basic Component Styles
  * --------------------------------
  * Define here the component styles using the mixin to support host and non-host mode for hybrid components.
  *
  * $include-pill: true  → CSS-only mode: sliding pill via ::after + @for transforms on the last label
  * $include-pill: false → web component mode: pill is a JS-driven <div id="pill">
  */
/**
  * Variants and States
  * --------------------------------
  * Define here the variants and states like size or colors for the component.
  */
/**
 * CSS-only segment: apply .segment to the container <div>.
 *
 *   <fieldset class="field">
 *     <legend class="label">Label</legend>
 *     <div class="segment [is-wide] [is-vertical] [is-vertical-on-mobile] [is-danger] [is-disabled]">
 *       <label>
 *         <input type="radio" name="group" value="a" />
 *         <span>Option A</span>
 *         <span class="description">Optional description</span>
 *       </label>
 *       ...
 *     </div>
 *     <p class="help">Description text</p>
 *   </fieldset>
 */
.segment {
  --_segment-radius: var(--segment-radius, var(--mod-segment-radius, var(--ds-segment-radius)));
  --_segment-background: var(--segment-background, var(--mod-segment-background, var(--ds-segment-background)));
  --_segment-gap: var(--segment-gap, var(--mod-segment-gap, var(--ds-segment-gap)));
  --_segment-padding: var(--segment-padding, var(--mod-segment-padding, var(--ds-segment-padding)));
  --_segment-item-height: var(--segment-item-height, var(--mod-segment-item-height, var(--ds-segment-item-height)));
  --_segment-item-padding-inline: var(--segment-item-padding-inline, var(--mod-segment-item-padding-inline, var(--ds-segment-item-padding-inline)));
  --_segment-item-padding-block: var(--segment-item-padding-block, var(--mod-segment-item-padding-block, var(--ds-segment-item-padding-block)));
  --_segment-item-icon-size: var(--segment-item-icon-size, var(--mod-segment-item-icon-size, var(--ds-segment-item-icon-size)));
  --_segment-item-icon-gap: var(--segment-item-icon-gap, var(--mod-segment-item-icon-gap, var(--ds-segment-item-icon-gap)));
  --_segment-item-font-weight: var(--segment-item-font-weight, var(--mod-segment-item-font-weight, var(--ds-segment-item-font-weight)));
  --_segment-description-font-size: var(--segment-description-font-size, var(--mod-segment-description-font-size, var(--ds-segment-description-font-size)));
  --_segment-description-font-weight: var(--segment-description-font-weight, var(--mod-segment-description-font-weight, var(--ds-segment-description-font-weight)));
  --_segment-focus-color: var(--segment-focus-color, var(--mod-segment-focus-color, var(--ds-segment-focus-color)));
  --_segment-item-unselected-color-base: var(--segment-item-unselected-color-base, var(--mod-segment-item-unselected-color-base, var(--ds-segment-item-unselected-color-base)));
  --_segment-item-unselected-color-hover: var(--segment-item-unselected-color-hover, var(--mod-segment-item-unselected-color-hover, var(--ds-segment-item-unselected-color-hover)));
  --_segment-item-unselected-color-active: var(--segment-item-unselected-color-active, var(--mod-segment-item-unselected-color-active, var(--ds-segment-item-unselected-color-active)));
  --_segment-item-selected-color-base: var(--segment-item-selected-color-base, var(--mod-segment-item-selected-color-base, var(--ds-segment-item-selected-color-base)));
  --_segment-item-selected-color-hover: var(--segment-item-selected-color-hover, var(--mod-segment-item-selected-color-hover, var(--ds-segment-item-selected-color-hover)));
  --_segment-item-selected-color-active: var(--segment-item-selected-color-active, var(--mod-segment-item-selected-color-active, var(--ds-segment-item-selected-color-active)));
  --_segment-item-selected-background: var(--segment-item-selected-background, var(--mod-segment-item-selected-background, var(--ds-segment-item-selected-background)));
  --_segment-divider-color: var(--segment-divider-color, var(--mod-segment-divider-color, var(--ds-segment-divider-color)));
}

.segment {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  width: -moz-max-content;
  width: max-content;
  gap: var(--_segment-gap);
  padding: var(--_segment-padding);
  border-radius: var(--_segment-radius);
  background: var(--_segment-background);
}
.segment label {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 2;
  padding-inline: calc(var(--_segment-item-padding-inline) + var(--_segment-item-icon-size) + var(--_segment-item-icon-gap));
  padding-block: calc(var(--_segment-item-padding-block));
  min-height: var(--_segment-item-height);
  border-radius: inherit;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-weight: var(--_segment-item-font-weight);
  color: var(--_segment-item-unselected-color-base);
  --icon-color: var(--_segment-item-unselected-color-base);
}
.segment label .description {
  font-size: var(--_segment-description-font-size);
  font-weight: var(--_segment-description-font-weight);
  text-align: center;
}
.segment label ds-icon {
  --icon-mt: 0.25rem;
  --icon-mb: 0.25rem;
}
.segment label #content {
  display: grid;
}
.segment label::before {
  content: "";
  position: absolute;
  left: var(--_segment-item-padding-inline);
  top: 50%;
  transform: translateY(-50%);
  width: var(--_segment-item-icon-size);
  height: var(--_segment-item-icon-size);
  background-color: var(--_segment-item-selected-color-base);
  -webkit-mask-image: url("data:image/svg+xml,<svg viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M13.637 1.19792C14.0627 1.54974 14.1227 2.18006 13.7708 2.60579L5.73084 12.335L5.72842 12.3379C5.54554 12.5575 5.31602 12.7336 5.05655 12.8534C4.79707 12.9731 4.51417 13.0336 4.22842 13.0302L4.22752 13.0302C3.93709 13.0266 3.65125 12.9573 3.39146 12.8274C3.13254 12.6979 2.9062 12.5117 2.72931 12.2826C2.72871 12.2818 2.72812 12.281 2.72752 12.2802L0.210633 9.04426C-0.128437 8.60831 -0.0499029 7.98003 0.386044 7.64096C0.821992 7.30189 1.45027 7.38043 1.78934 7.81638L4.25291 10.9838L12.2291 1.33176C12.5809 0.906034 13.2113 0.846112 13.637 1.19792Z'/></svg>");
          mask-image: url("data:image/svg+xml,<svg viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M13.637 1.19792C14.0627 1.54974 14.1227 2.18006 13.7708 2.60579L5.73084 12.335L5.72842 12.3379C5.54554 12.5575 5.31602 12.7336 5.05655 12.8534C4.79707 12.9731 4.51417 13.0336 4.22842 13.0302L4.22752 13.0302C3.93709 13.0266 3.65125 12.9573 3.39146 12.8274C3.13254 12.6979 2.9062 12.5117 2.72931 12.2826C2.72871 12.2818 2.72812 12.281 2.72752 12.2802L0.210633 9.04426C-0.128437 8.60831 -0.0499029 7.98003 0.386044 7.64096C0.821992 7.30189 1.45027 7.38043 1.78934 7.81638L4.25291 10.9838L12.2291 1.33176C12.5809 0.906034 13.2113 0.846112 13.637 1.19792Z'/></svg>");
  -webkit-mask-size: 75%;
          mask-size: 75%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  opacity: 0;
  transition: opacity 160ms ease-in-out;
}
@media (hover: hover) and (pointer: fine) {
  .segment label:not(:has(input:checked)):hover {
    color: var(--_segment-item-unselected-color-hover);
    --icon-color: var(--_segment-item-unselected-color-hover);
  }
}
.segment label:not(:has(input:checked)):active {
  color: var(--_segment-item-unselected-color-active);
  --icon-color: var(--_segment-item-unselected-color-active);
}
@media (hover: hover) and (pointer: fine) {
  .segment label:has(input:checked):hover {
    color: var(--_segment-item-selected-color-hover);
    --icon-color: var(--_segment-item-selected-color-hover);
  }
  .segment label:has(input:checked):hover::before {
    background-color: var(--_segment-item-selected-color-hover);
  }
}
.segment label:has(input:checked):active {
  color: var(--_segment-item-selected-color-active);
  --icon-color: var(--_segment-item-selected-color-active);
}
.segment label:has(input:checked):active::before {
  background-color: var(--_segment-item-selected-color-active);
}
.segment label:has(input:checked) {
  color: var(--_segment-item-selected-color-base);
  --icon-color: var(--_segment-item-selected-color-base);
}
.segment label input[type=radio] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  border-radius: inherit;
  cursor: pointer;
}
.segment label input[type=radio]:focus-visible {
  outline: var(--ds-alias-interaction-focus-width, 2px) solid var(--_segment-focus-color);
  outline-offset: 2px;
  border-radius: inherit;
}
.segment label:not(:last-of-type)::after {
  content: "";
  position: absolute;
  right: calc(var(--_segment-gap) * -0.5 - 1px);
  top: 0;
  bottom: 0;
  width: 2px;
  border-radius: 2px;
  background-color: var(--_segment-divider-color);
  opacity: 1;
  transition: opacity 160ms ease;
  z-index: -1;
}
.segment label:last-of-type {
  z-index: 1;
}
.segment label:last-of-type::after {
  content: "";
  display: none;
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--_segment-item-selected-background);
  border-radius: inherit;
  clip-path: inset(0 round var(--_segment-radius));
  transition: transform 160ms cubic-bezier(0.4, 0, 0.2, 1), clip-path 80ms ease;
}
.segment label:has(input:checked) ~ :last-of-type::after, .segment label:has(input:checked):last-of-type::after {
  display: block;
}
.segment label:nth-last-of-type(2):has(input:checked) ~ label:last-of-type::after {
  transform: translateX(calc(1 * -100% - 1 * var(--_segment-gap)));
}
.segment label:nth-last-of-type(3):has(input:checked) ~ label:last-of-type::after {
  transform: translateX(calc(2 * -100% - 2 * var(--_segment-gap)));
}
.segment label:nth-last-of-type(4):has(input:checked) ~ label:last-of-type::after {
  transform: translateX(calc(3 * -100% - 3 * var(--_segment-gap)));
}
.segment label:nth-last-of-type(5):has(input:checked) ~ label:last-of-type::after {
  transform: translateX(calc(4 * -100% - 4 * var(--_segment-gap)));
}
.segment label:nth-last-of-type(6):has(input:checked) ~ label:last-of-type::after {
  transform: translateX(calc(5 * -100% - 5 * var(--_segment-gap)));
}
.segment label:nth-last-of-type(7):has(input:checked) ~ label:last-of-type::after {
  transform: translateX(calc(6 * -100% - 6 * var(--_segment-gap)));
}
.segment label:nth-last-of-type(8):has(input:checked) ~ label:last-of-type::after {
  transform: translateX(calc(7 * -100% - 7 * var(--_segment-gap)));
}
.segment label:nth-last-of-type(9):has(input:checked) ~ label:last-of-type::after {
  transform: translateX(calc(8 * -100% - 8 * var(--_segment-gap)));
}
.segment label:has(input:checked):active ~ label:last-of-type::after, .segment label:last-of-type:has(input:checked):active::after {
  clip-path: inset(2px round var(--_segment-radius));
}

.segment.is-vertical {
  grid-auto-flow: row;
  grid-auto-columns: 1fr;
  width: auto;
}
.segment.is-vertical label {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
  text-align: left;
  padding-inline-start: var(--_segment-item-padding-inline);
  padding-inline-end: calc(var(--_segment-item-padding-inline) + var(--_segment-item-icon-size) + var(--_segment-item-icon-gap));
}
.segment.is-vertical label:has(input:checked)::before {
  opacity: 1;
}
.segment.is-vertical label .description {
  text-align: left;
}
.segment.is-vertical label::before {
  left: auto;
  right: var(--_segment-item-padding-inline);
}
.segment.is-vertical label span + span {
  font-size: var(--_segment-description-font-size);
}
.segment.is-vertical label:not(:last-of-type)::after {
  right: 0;
  top: auto;
  bottom: calc(var(--_segment-gap) * -0.5 - 1px);
  width: auto;
  left: 0;
  height: 2px;
}
.segment.is-vertical label:nth-last-of-type(2):has(input:checked) ~ label:last-of-type::after {
  transform: translateY(calc(1 * -100% - 1 * var(--_segment-gap)));
}
.segment.is-vertical label:nth-last-of-type(3):has(input:checked) ~ label:last-of-type::after {
  transform: translateY(calc(2 * -100% - 2 * var(--_segment-gap)));
}
.segment.is-vertical label:nth-last-of-type(4):has(input:checked) ~ label:last-of-type::after {
  transform: translateY(calc(3 * -100% - 3 * var(--_segment-gap)));
}
.segment.is-vertical label:nth-last-of-type(5):has(input:checked) ~ label:last-of-type::after {
  transform: translateY(calc(4 * -100% - 4 * var(--_segment-gap)));
}
.segment.is-vertical label:nth-last-of-type(6):has(input:checked) ~ label:last-of-type::after {
  transform: translateY(calc(5 * -100% - 5 * var(--_segment-gap)));
}
.segment.is-vertical label:nth-last-of-type(7):has(input:checked) ~ label:last-of-type::after {
  transform: translateY(calc(6 * -100% - 6 * var(--_segment-gap)));
}
.segment.is-vertical label:nth-last-of-type(8):has(input:checked) ~ label:last-of-type::after {
  transform: translateY(calc(7 * -100% - 7 * var(--_segment-gap)));
}
.segment.is-vertical label:nth-last-of-type(9):has(input:checked) ~ label:last-of-type::after {
  transform: translateY(calc(8 * -100% - 8 * var(--_segment-gap)));
}

@media screen and (max-width: 768px) {
  .segment.is-vertical-on-mobile {
    grid-auto-flow: row;
    grid-auto-columns: 1fr;
    width: auto;
  }
  .segment.is-vertical-on-mobile label {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    text-align: left;
    padding-inline-start: var(--_segment-item-padding-inline);
    padding-inline-end: calc(var(--_segment-item-padding-inline) + var(--_segment-item-icon-size) + var(--_segment-item-icon-gap));
  }
  .segment.is-vertical-on-mobile label:has(input:checked)::before {
    opacity: 1;
  }
  .segment.is-vertical-on-mobile label .description {
    text-align: left;
  }
  .segment.is-vertical-on-mobile label::before {
    left: auto;
    right: var(--_segment-item-padding-inline);
  }
  .segment.is-vertical-on-mobile label span + span {
    font-size: var(--_segment-description-font-size);
  }
  .segment.is-vertical-on-mobile label:not(:last-of-type)::after {
    right: 0;
    top: auto;
    bottom: calc(var(--_segment-gap) * -0.5 - 1px);
    width: auto;
    left: 0;
    height: 2px;
  }
  .segment.is-vertical-on-mobile label:nth-last-of-type(2):has(input:checked) ~ label:last-of-type::after {
    transform: translateY(calc(1 * -100% - 1 * var(--_segment-gap)));
  }
  .segment.is-vertical-on-mobile label:nth-last-of-type(3):has(input:checked) ~ label:last-of-type::after {
    transform: translateY(calc(2 * -100% - 2 * var(--_segment-gap)));
  }
  .segment.is-vertical-on-mobile label:nth-last-of-type(4):has(input:checked) ~ label:last-of-type::after {
    transform: translateY(calc(3 * -100% - 3 * var(--_segment-gap)));
  }
  .segment.is-vertical-on-mobile label:nth-last-of-type(5):has(input:checked) ~ label:last-of-type::after {
    transform: translateY(calc(4 * -100% - 4 * var(--_segment-gap)));
  }
  .segment.is-vertical-on-mobile label:nth-last-of-type(6):has(input:checked) ~ label:last-of-type::after {
    transform: translateY(calc(5 * -100% - 5 * var(--_segment-gap)));
  }
  .segment.is-vertical-on-mobile label:nth-last-of-type(7):has(input:checked) ~ label:last-of-type::after {
    transform: translateY(calc(6 * -100% - 6 * var(--_segment-gap)));
  }
  .segment.is-vertical-on-mobile label:nth-last-of-type(8):has(input:checked) ~ label:last-of-type::after {
    transform: translateY(calc(7 * -100% - 7 * var(--_segment-gap)));
  }
  .segment.is-vertical-on-mobile label:nth-last-of-type(9):has(input:checked) ~ label:last-of-type::after {
    transform: translateY(calc(8 * -100% - 8 * var(--_segment-gap)));
  }
}
.segment {
  grid-auto-columns: 1fr;
  width: auto;
}

.segment.is-danger:not(.is-disabled) {
  --mod-segment-description-color: var(--ds-global-color-danger-4);
  --mod-segment-item-unselected-color-base: var(--ds-global-color-danger-4);
  --mod-segment-item-unselected-color-hover: var(--ds-global-color-danger-5);
  --mod-segment-item-unselected-color-active: var(--ds-global-color-danger-6);
  --mod-segment-item-selected-color-base: var(--ds-global-color-white);
  --mod-segment-item-selected-color-hover: var(--ds-global-color-white);
  --mod-segment-item-selected-color-active: var(--ds-global-color-white);
  --mod-segment-background: var(--ds-global-color-danger-1);
  --mod-segment-item-selected-background: var(--ds-global-color-danger-4);
}

.segment.is-disabled {
  cursor: default;
  pointer-events: none;
  --mod-segment-label-color: var(--ds-global-color-grey-5);
  --mod-segment-description-color: var(--ds-global-color-grey-5);
  --mod-segment-item-unselected-color-base: var(--ds-global-color-grey-5);
  --mod-segment-item-unselected-color-hover: var(--ds-global-color-grey-5);
  --mod-segment-item-unselected-color-active: var(--ds-global-color-grey-5);
  --mod-segment-item-selected-color-base: var(--ds-global-color-grey-6);
  --mod-segment-item-selected-color-hover: var(--ds-global-color-grey-6);
  --mod-segment-item-selected-color-active: var(--ds-global-color-grey-6);
  --mod-segment-item-selected-background: var(--ds-global-color-grey-3);
}

/**
 * Select provides a native HTML select element with styled wrapper, integrated form field support,
 * and visual indicators (chevron icon) for different states. Supports disabled and validation states.
 *
 * @variant is-invalid - Invalid select state with red chevron icon indicator.
 */
/**
 * Variables
 * --------------------------------
 * Define here the css variables for the component to be able to use it in host or non-host mode
 * These variables can be used in the component styles below and later on be overridden in themes.
 *
 * @prop --select-family - Font family of the select control.
 * @prop --select-weight - Font weight of the select control.
 * @prop --select-line-height - Line height of the select control.
 * @prop --select-size - Font size of the select control.
 * @prop --select-color - Text color of the select control value.
 * @prop --select-placeholder - Text color of the select placeholder text.
 */
.select {
  --_select-family: var(--select-family, var(--mod-select-family, var(--ds-form-control-family)));
  --_select-weight: var(--select-weight, var(--mod-select-weight, var(--ds-form-control-weight)));
  --_select-line-height: var(--select-line-height, var(--mod-select-line-height, var(--ds-form-control-line-height)));
  --_select-size: var(--select-size, var(--mod-select-size, var(--ds-form-control-size-device)));
  --_select-color: var(--select-color, var(--mod-select-color, var(--ds-form-control-color-value-base)));
  --_select-placeholder: var(--select-placeholder, var(--mod-select-placeholder, var(--ds-form-control-color-placeholder-base)));
}

/**
 * Basic Component Styles
 * --------------------------------
 */
.field .select {
  border: none;
  outline: none;
  box-shadow: none;
  position: relative;
  background: inherit;
  flex: 1;
  color: var(--_select-color);
  font-family: var(--_select-family);
  font-weight: var(--_select-weight);
  font-size: var(--_select-size);
  line-height: var(--_select-line-height);
  border-radius: var(--_select-container-radius);
}
.field .select::-moz-placeholder {
  color: var(--_select-placeholder);
}
.field .select::placeholder {
  color: var(--_select-placeholder);
}
.field .select::-moz-placeholder {
  color: var(--_select-placeholder);
}
.field .select::-webkit-input-placeholder {
  color: var(--_select-placeholder);
}
.field .select:-moz-placeholder {
  color: var(--_select-placeholder);
}
.field .select:-ms-input-placeholder {
  color: var(--_select-placeholder);
}
.field .control select {
  flex: 1;
  min-width: 0;
  outline: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: transparent;
  border: none;
  height: 1.5rem;
  padding-inline-end: 1.5rem;
  font: inherit;
  cursor: pointer;
}
.field .control select:disabled {
  cursor: default;
}
.field .control select:focus {
  outline: none;
}
.field .control:has(select)::after {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  content: "";
  width: 0.75rem;
  height: 0.75rem;
  background-image: url('data:image/svg+xml;utf8,<svg fill="%23000D6E" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true"><path d="M5,7.874a1.238,1.238,0,0,1-.879-.364L.206,3.393A.75.75,0,1,1,1.294,2.36L4.819,6.072a.249.249,0,0,0,.362,0L8.706,2.36A.75.75,0,1,1,9.794,3.393L5.9,7.5A1.269,1.269,0,0,1,5,7.874Z" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
}
.field .control:has(select:disabled)::after {
  background-image: url('data:image/svg+xml;utf8,<svg fill="%23999999" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true"><path d="M5,7.874a1.238,1.238,0,0,1-.879-.364L.206,3.393A.75.75,0,1,1,1.294,2.36L4.819,6.072a.249.249,0,0,0,.362,0L8.706,2.36A.75.75,0,1,1,9.794,3.393L5.9,7.5A1.269,1.269,0,0,1,5,7.874Z" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"/></svg>');
}
.field .control.is-invalid::after {
  background-image: url('data:image/svg+xml;utf8,<svg fill="%23D32F2F" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true"><path d="M5,7.874a1.238,1.238,0,0,1-.879-.364L.206,3.393A.75.75,0,1,1,1.294,2.36L4.819,6.072a.249.249,0,0,0,.362,0L8.706,2.36A.75.75,0,1,1,9.794,3.393L5.9,7.5A1.269,1.269,0,0,1,5,7.874Z" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"/></svg>');
}

/**
  * Mixins
  */
/**
  * Basic Style
  */
.stack,
.stack-content {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-flow: column nowrap;
}

.stack {
  gap: 1rem;
}

.stack-content {
  flex: 1;
  height: 100%;
  gap: 0.25rem;
}

.stack > .stack,
.stack > .stack-content {
  align-self: stretch;
}

.stack.is-horizontal > .stack-content {
  align-self: center;
}

.stack.has-wrap,
.stack-content.has-wrap {
  flex-wrap: wrap;
}
.stack.as-row, .stack.is-horizontal, .stack.has-direction-row,
.stack-content.as-row,
.stack-content.is-horizontal,
.stack-content.has-direction-row {
  flex-flow: row nowrap;
  align-items: center;
}
.stack.as-row-reverse, .stack.is-horizontal-reverse, .stack.has-direction-row-reverse,
.stack-content.as-row-reverse,
.stack-content.is-horizontal-reverse,
.stack-content.has-direction-row-reverse {
  flex-flow: row-reverse nowrap;
  align-items: center;
}
.stack.as-col-reverse, .stack.is-vertical-reverse, .stack.has-direction-column-reverse,
.stack-content.as-col-reverse,
.stack-content.is-vertical-reverse,
.stack-content.has-direction-column-reverse {
  flex-flow: column-reverse nowrap;
}
.stack:not(.as-row,
.as-row-reverse,
.has-direction-row,
.has-direction-row-reverse,
.is-horizontal,
.is-horizontal-reverse).align-top-left, .stack:not(.as-row,
.as-row-reverse,
.has-direction-row,
.has-direction-row-reverse,
.is-horizontal,
.is-horizontal-reverse).align-top-start,
.stack-content:not(.as-row,
.as-row-reverse,
.has-direction-row,
.has-direction-row-reverse,
.is-horizontal,
.is-horizontal-reverse).align-top-left,
.stack-content:not(.as-row,
.as-row-reverse,
.has-direction-row,
.has-direction-row-reverse,
.is-horizontal,
.is-horizontal-reverse).align-top-start {
  justify-content: flex-start;
  align-items: flex-start;
}
.stack:not(.as-row,
.as-row-reverse,
.has-direction-row,
.has-direction-row-reverse,
.is-horizontal,
.is-horizontal-reverse).align-top, .stack:not(.as-row,
.as-row-reverse,
.has-direction-row,
.has-direction-row-reverse,
.is-horizontal,
.is-horizontal-reverse).align-top-center,
.stack-content:not(.as-row,
.as-row-reverse,
.has-direction-row,
.has-direction-row-reverse,
.is-horizontal,
.is-horizontal-reverse).align-top,
.stack-content:not(.as-row,
.as-row-reverse,
.has-direction-row,
.has-direction-row-reverse,
.is-horizontal,
.is-horizontal-reverse).align-top-center {
  justify-content: flex-start;
  align-items: center;
}
.stack:not(.as-row,
.as-row-reverse,
.has-direction-row,
.has-direction-row-reverse,
.is-horizontal,
.is-horizontal-reverse).align-top-right, .stack:not(.as-row,
.as-row-reverse,
.has-direction-row,
.has-direction-row-reverse,
.is-horizontal,
.is-horizontal-reverse).align-top-end,
.stack-content:not(.as-row,
.as-row-reverse,
.has-direction-row,
.has-direction-row-reverse,
.is-horizontal,
.is-horizontal-reverse).align-top-right,
.stack-content:not(.as-row,
.as-row-reverse,
.has-direction-row,
.has-direction-row-reverse,
.is-horizontal,
.is-horizontal-reverse).align-top-end {
  justify-content: flex-start;
  align-items: flex-end;
}
.stack:not(.as-row,
.as-row-reverse,
.has-direction-row,
.has-direction-row-reverse,
.is-horizontal,
.is-horizontal-reverse).align-start, .stack:not(.as-row,
.as-row-reverse,
.has-direction-row,
.has-direction-row-reverse,
.is-horizontal,
.is-horizontal-reverse).align-center-left, .stack:not(.as-row,
.as-row-reverse,
.has-direction-row,
.has-direction-row-reverse,
.is-horizontal,
.is-horizontal-reverse).align-center-start,
.stack-content:not(.as-row,
.as-row-reverse,
.has-direction-row,
.has-direction-row-reverse,
.is-horizontal,
.is-horizontal-reverse).align-start,
.stack-content:not(.as-row,
.as-row-reverse,
.has-direction-row,
.has-direction-row-reverse,
.is-horizontal,
.is-horizontal-reverse).align-center-left,
.stack-content:not(.as-row,
.as-row-reverse,
.has-direction-row,
.has-direction-row-reverse,
.is-horizontal,
.is-horizontal-reverse).align-center-start {
  justify-content: center;
  align-items: flex-start;
}
.stack:not(.as-row,
.as-row-reverse,
.has-direction-row,
.has-direction-row-reverse,
.is-horizontal,
.is-horizontal-reverse).align-center,
.stack-content:not(.as-row,
.as-row-reverse,
.has-direction-row,
.has-direction-row-reverse,
.is-horizontal,
.is-horizontal-reverse).align-center {
  justify-content: center;
  align-items: center;
}
.stack:not(.as-row,
.as-row-reverse,
.has-direction-row,
.has-direction-row-reverse,
.is-horizontal,
.is-horizontal-reverse).align-end, .stack:not(.as-row,
.as-row-reverse,
.has-direction-row,
.has-direction-row-reverse,
.is-horizontal,
.is-horizontal-reverse).align-center-right, .stack:not(.as-row,
.as-row-reverse,
.has-direction-row,
.has-direction-row-reverse,
.is-horizontal,
.is-horizontal-reverse).align-center-end,
.stack-content:not(.as-row,
.as-row-reverse,
.has-direction-row,
.has-direction-row-reverse,
.is-horizontal,
.is-horizontal-reverse).align-end,
.stack-content:not(.as-row,
.as-row-reverse,
.has-direction-row,
.has-direction-row-reverse,
.is-horizontal,
.is-horizontal-reverse).align-center-right,
.stack-content:not(.as-row,
.as-row-reverse,
.has-direction-row,
.has-direction-row-reverse,
.is-horizontal,
.is-horizontal-reverse).align-center-end {
  justify-content: center;
  align-items: flex-end;
}
.stack:not(.as-row,
.as-row-reverse,
.has-direction-row,
.has-direction-row-reverse,
.is-horizontal,
.is-horizontal-reverse).align-bottom-left, .stack:not(.as-row,
.as-row-reverse,
.has-direction-row,
.has-direction-row-reverse,
.is-horizontal,
.is-horizontal-reverse).align-bottom-start,
.stack-content:not(.as-row,
.as-row-reverse,
.has-direction-row,
.has-direction-row-reverse,
.is-horizontal,
.is-horizontal-reverse).align-bottom-left,
.stack-content:not(.as-row,
.as-row-reverse,
.has-direction-row,
.has-direction-row-reverse,
.is-horizontal,
.is-horizontal-reverse).align-bottom-start {
  justify-content: flex-end;
  align-items: flex-start;
}
.stack:not(.as-row,
.as-row-reverse,
.has-direction-row,
.has-direction-row-reverse,
.is-horizontal,
.is-horizontal-reverse).align-bottom, .stack:not(.as-row,
.as-row-reverse,
.has-direction-row,
.has-direction-row-reverse,
.is-horizontal,
.is-horizontal-reverse).align-bottom-center,
.stack-content:not(.as-row,
.as-row-reverse,
.has-direction-row,
.has-direction-row-reverse,
.is-horizontal,
.is-horizontal-reverse).align-bottom,
.stack-content:not(.as-row,
.as-row-reverse,
.has-direction-row,
.has-direction-row-reverse,
.is-horizontal,
.is-horizontal-reverse).align-bottom-center {
  justify-content: flex-end;
  align-items: center;
}
.stack:not(.as-row,
.as-row-reverse,
.has-direction-row,
.has-direction-row-reverse,
.is-horizontal,
.is-horizontal-reverse).align-bottom-right, .stack:not(.as-row,
.as-row-reverse,
.has-direction-row,
.has-direction-row-reverse,
.is-horizontal,
.is-horizontal-reverse).align-bottom-end,
.stack-content:not(.as-row,
.as-row-reverse,
.has-direction-row,
.has-direction-row-reverse,
.is-horizontal,
.is-horizontal-reverse).align-bottom-right,
.stack-content:not(.as-row,
.as-row-reverse,
.has-direction-row,
.has-direction-row-reverse,
.is-horizontal,
.is-horizontal-reverse).align-bottom-end {
  justify-content: flex-end;
  align-items: flex-end;
}
.stack.as-row.align-top-left, .stack.as-row.align-top-start, .stack.is-horizontal.align-top-left, .stack.is-horizontal.align-top-start, .stack.has-direction-row.align-top-left, .stack.has-direction-row.align-top-start, .stack.as-row-reverse.align-top-left, .stack.as-row-reverse.align-top-start, .stack.is-horizontal-reverse.align-top-left, .stack.is-horizontal-reverse.align-top-start, .stack.has-direction-row-reverse.align-top-left, .stack.has-direction-row-reverse.align-top-start,
.stack-content.as-row.align-top-left,
.stack-content.as-row.align-top-start,
.stack-content.is-horizontal.align-top-left,
.stack-content.is-horizontal.align-top-start,
.stack-content.has-direction-row.align-top-left,
.stack-content.has-direction-row.align-top-start,
.stack-content.as-row-reverse.align-top-left,
.stack-content.as-row-reverse.align-top-start,
.stack-content.is-horizontal-reverse.align-top-left,
.stack-content.is-horizontal-reverse.align-top-start,
.stack-content.has-direction-row-reverse.align-top-left,
.stack-content.has-direction-row-reverse.align-top-start {
  align-items: flex-start;
  justify-content: flex-start;
}
.stack.as-row.align-top, .stack.as-row.align-top-center, .stack.is-horizontal.align-top, .stack.is-horizontal.align-top-center, .stack.has-direction-row.align-top, .stack.has-direction-row.align-top-center, .stack.as-row-reverse.align-top, .stack.as-row-reverse.align-top-center, .stack.is-horizontal-reverse.align-top, .stack.is-horizontal-reverse.align-top-center, .stack.has-direction-row-reverse.align-top, .stack.has-direction-row-reverse.align-top-center,
.stack-content.as-row.align-top,
.stack-content.as-row.align-top-center,
.stack-content.is-horizontal.align-top,
.stack-content.is-horizontal.align-top-center,
.stack-content.has-direction-row.align-top,
.stack-content.has-direction-row.align-top-center,
.stack-content.as-row-reverse.align-top,
.stack-content.as-row-reverse.align-top-center,
.stack-content.is-horizontal-reverse.align-top,
.stack-content.is-horizontal-reverse.align-top-center,
.stack-content.has-direction-row-reverse.align-top,
.stack-content.has-direction-row-reverse.align-top-center {
  align-items: flex-start;
  justify-content: center;
}
.stack.as-row.align-top-right, .stack.as-row.align-top-end, .stack.is-horizontal.align-top-right, .stack.is-horizontal.align-top-end, .stack.has-direction-row.align-top-right, .stack.has-direction-row.align-top-end, .stack.as-row-reverse.align-top-right, .stack.as-row-reverse.align-top-end, .stack.is-horizontal-reverse.align-top-right, .stack.is-horizontal-reverse.align-top-end, .stack.has-direction-row-reverse.align-top-right, .stack.has-direction-row-reverse.align-top-end,
.stack-content.as-row.align-top-right,
.stack-content.as-row.align-top-end,
.stack-content.is-horizontal.align-top-right,
.stack-content.is-horizontal.align-top-end,
.stack-content.has-direction-row.align-top-right,
.stack-content.has-direction-row.align-top-end,
.stack-content.as-row-reverse.align-top-right,
.stack-content.as-row-reverse.align-top-end,
.stack-content.is-horizontal-reverse.align-top-right,
.stack-content.is-horizontal-reverse.align-top-end,
.stack-content.has-direction-row-reverse.align-top-right,
.stack-content.has-direction-row-reverse.align-top-end {
  align-items: flex-start;
  justify-content: flex-end;
}
.stack.as-row.align-start, .stack.as-row.align-center-left, .stack.as-row.align-center-start, .stack.is-horizontal.align-start, .stack.is-horizontal.align-center-left, .stack.is-horizontal.align-center-start, .stack.has-direction-row.align-start, .stack.has-direction-row.align-center-left, .stack.has-direction-row.align-center-start, .stack.as-row-reverse.align-start, .stack.as-row-reverse.align-center-left, .stack.as-row-reverse.align-center-start, .stack.is-horizontal-reverse.align-start, .stack.is-horizontal-reverse.align-center-left, .stack.is-horizontal-reverse.align-center-start, .stack.has-direction-row-reverse.align-start, .stack.has-direction-row-reverse.align-center-left, .stack.has-direction-row-reverse.align-center-start,
.stack-content.as-row.align-start,
.stack-content.as-row.align-center-left,
.stack-content.as-row.align-center-start,
.stack-content.is-horizontal.align-start,
.stack-content.is-horizontal.align-center-left,
.stack-content.is-horizontal.align-center-start,
.stack-content.has-direction-row.align-start,
.stack-content.has-direction-row.align-center-left,
.stack-content.has-direction-row.align-center-start,
.stack-content.as-row-reverse.align-start,
.stack-content.as-row-reverse.align-center-left,
.stack-content.as-row-reverse.align-center-start,
.stack-content.is-horizontal-reverse.align-start,
.stack-content.is-horizontal-reverse.align-center-left,
.stack-content.is-horizontal-reverse.align-center-start,
.stack-content.has-direction-row-reverse.align-start,
.stack-content.has-direction-row-reverse.align-center-left,
.stack-content.has-direction-row-reverse.align-center-start {
  align-items: center;
  justify-content: flex-start;
}
.stack.as-row.align-center, .stack.is-horizontal.align-center, .stack.has-direction-row.align-center, .stack.as-row-reverse.align-center, .stack.is-horizontal-reverse.align-center, .stack.has-direction-row-reverse.align-center,
.stack-content.as-row.align-center,
.stack-content.is-horizontal.align-center,
.stack-content.has-direction-row.align-center,
.stack-content.as-row-reverse.align-center,
.stack-content.is-horizontal-reverse.align-center,
.stack-content.has-direction-row-reverse.align-center {
  align-items: center;
  justify-content: center;
}
.stack.as-row.align-end, .stack.as-row.align-center-right, .stack.as-row.align-center-end, .stack.is-horizontal.align-end, .stack.is-horizontal.align-center-right, .stack.is-horizontal.align-center-end, .stack.has-direction-row.align-end, .stack.has-direction-row.align-center-right, .stack.has-direction-row.align-center-end, .stack.as-row-reverse.align-end, .stack.as-row-reverse.align-center-right, .stack.as-row-reverse.align-center-end, .stack.is-horizontal-reverse.align-end, .stack.is-horizontal-reverse.align-center-right, .stack.is-horizontal-reverse.align-center-end, .stack.has-direction-row-reverse.align-end, .stack.has-direction-row-reverse.align-center-right, .stack.has-direction-row-reverse.align-center-end,
.stack-content.as-row.align-end,
.stack-content.as-row.align-center-right,
.stack-content.as-row.align-center-end,
.stack-content.is-horizontal.align-end,
.stack-content.is-horizontal.align-center-right,
.stack-content.is-horizontal.align-center-end,
.stack-content.has-direction-row.align-end,
.stack-content.has-direction-row.align-center-right,
.stack-content.has-direction-row.align-center-end,
.stack-content.as-row-reverse.align-end,
.stack-content.as-row-reverse.align-center-right,
.stack-content.as-row-reverse.align-center-end,
.stack-content.is-horizontal-reverse.align-end,
.stack-content.is-horizontal-reverse.align-center-right,
.stack-content.is-horizontal-reverse.align-center-end,
.stack-content.has-direction-row-reverse.align-end,
.stack-content.has-direction-row-reverse.align-center-right,
.stack-content.has-direction-row-reverse.align-center-end {
  align-items: center;
  justify-content: flex-end;
}
.stack.as-row.align-bottom-left, .stack.as-row.align-bottom-start, .stack.is-horizontal.align-bottom-left, .stack.is-horizontal.align-bottom-start, .stack.has-direction-row.align-bottom-left, .stack.has-direction-row.align-bottom-start, .stack.as-row-reverse.align-bottom-left, .stack.as-row-reverse.align-bottom-start, .stack.is-horizontal-reverse.align-bottom-left, .stack.is-horizontal-reverse.align-bottom-start, .stack.has-direction-row-reverse.align-bottom-left, .stack.has-direction-row-reverse.align-bottom-start,
.stack-content.as-row.align-bottom-left,
.stack-content.as-row.align-bottom-start,
.stack-content.is-horizontal.align-bottom-left,
.stack-content.is-horizontal.align-bottom-start,
.stack-content.has-direction-row.align-bottom-left,
.stack-content.has-direction-row.align-bottom-start,
.stack-content.as-row-reverse.align-bottom-left,
.stack-content.as-row-reverse.align-bottom-start,
.stack-content.is-horizontal-reverse.align-bottom-left,
.stack-content.is-horizontal-reverse.align-bottom-start,
.stack-content.has-direction-row-reverse.align-bottom-left,
.stack-content.has-direction-row-reverse.align-bottom-start {
  align-items: flex-end;
  justify-content: flex-start;
}
.stack.as-row.align-bottom, .stack.as-row.align-bottom-center, .stack.is-horizontal.align-bottom, .stack.is-horizontal.align-bottom-center, .stack.has-direction-row.align-bottom, .stack.has-direction-row.align-bottom-center, .stack.as-row-reverse.align-bottom, .stack.as-row-reverse.align-bottom-center, .stack.is-horizontal-reverse.align-bottom, .stack.is-horizontal-reverse.align-bottom-center, .stack.has-direction-row-reverse.align-bottom, .stack.has-direction-row-reverse.align-bottom-center,
.stack-content.as-row.align-bottom,
.stack-content.as-row.align-bottom-center,
.stack-content.is-horizontal.align-bottom,
.stack-content.is-horizontal.align-bottom-center,
.stack-content.has-direction-row.align-bottom,
.stack-content.has-direction-row.align-bottom-center,
.stack-content.as-row-reverse.align-bottom,
.stack-content.as-row-reverse.align-bottom-center,
.stack-content.is-horizontal-reverse.align-bottom,
.stack-content.is-horizontal-reverse.align-bottom-center,
.stack-content.has-direction-row-reverse.align-bottom,
.stack-content.has-direction-row-reverse.align-bottom-center {
  align-items: flex-end;
  justify-content: center;
}
.stack.as-row.align-bottom-right, .stack.as-row.align-bottom-end, .stack.is-horizontal.align-bottom-right, .stack.is-horizontal.align-bottom-end, .stack.has-direction-row.align-bottom-right, .stack.has-direction-row.align-bottom-end, .stack.as-row-reverse.align-bottom-right, .stack.as-row-reverse.align-bottom-end, .stack.is-horizontal-reverse.align-bottom-right, .stack.is-horizontal-reverse.align-bottom-end, .stack.has-direction-row-reverse.align-bottom-right, .stack.has-direction-row-reverse.align-bottom-end,
.stack-content.as-row.align-bottom-right,
.stack-content.as-row.align-bottom-end,
.stack-content.is-horizontal.align-bottom-right,
.stack-content.is-horizontal.align-bottom-end,
.stack-content.has-direction-row.align-bottom-right,
.stack-content.has-direction-row.align-bottom-end,
.stack-content.as-row-reverse.align-bottom-right,
.stack-content.as-row-reverse.align-bottom-end,
.stack-content.is-horizontal-reverse.align-bottom-right,
.stack-content.is-horizontal-reverse.align-bottom-end,
.stack-content.has-direction-row-reverse.align-bottom-right,
.stack-content.has-direction-row-reverse.align-bottom-end {
  align-items: flex-end;
  justify-content: flex-end;
}

/**
 * Text Alignment for stack-content
 */
.stack-content, .stack-content.align-top-left, .stack-content.align-top-start, .stack-content.align-start, .stack-content.align-center-left, .stack-content.align-center-start, .stack-content.align-bottom-left, .stack-content.align-bottom-start {
  text-align: left;
}
.stack-content.align-top, .stack-content.align-top-center, .stack-content.align-center, .stack-content.align-bottom, .stack-content.align-bottom-center {
  text-align: center;
}
.stack-content.align-top-right, .stack-content.align-top-end, .stack-content.align-end, .stack-content.align-center-right, .stack-content.align-center-end, .stack-content.align-bottom-right, .stack-content.align-bottom-end {
  text-align: right;
}
.stack-content.text-left {
  text-align: left !important;
}
.stack-content.text-center {
  text-align: center !important;
}
.stack-content.text-right {
  text-align: right !important;
}

.stack.fit-content,
.stack-content.fit-content {
  flex: unset;
  width: -moz-fit-content;
  width: fit-content;
}
.stack.p-2xs,
.stack-content.p-2xs {
  padding: var(--ds-alias-space-2xs-device);
}
.stack.p-xs,
.stack-content.p-xs {
  padding: var(--ds-alias-space-xs-device);
}
.stack.p-sm,
.stack-content.p-sm {
  padding: var(--ds-alias-space-sm-device);
}
.stack.p-base,
.stack-content.p-base {
  padding: var(--ds-alias-space-base-device);
}
.stack.p-md,
.stack-content.p-md {
  padding: var(--ds-alias-space-md-device);
}
.stack.p-lg,
.stack-content.p-lg {
  padding: var(--ds-alias-space-lg-device);
}
.stack.p-xl,
.stack-content.p-xl {
  padding: var(--ds-alias-space-xl-device);
}
.stack.p-2xl,
.stack-content.p-2xl {
  padding: var(--ds-alias-space-2xl-device);
}
.stack.px-2xs,
.stack-content.px-2xs {
  padding-left: var(--ds-alias-space-2xs-device);
  padding-right: var(--ds-alias-space-2xs-device);
}
.stack.px-xs,
.stack-content.px-xs {
  padding-left: var(--ds-alias-space-xs-device);
  padding-right: var(--ds-alias-space-xs-device);
}
.stack.px-sm,
.stack-content.px-sm {
  padding-left: var(--ds-alias-space-sm-device);
  padding-right: var(--ds-alias-space-sm-device);
}
.stack.px-base,
.stack-content.px-base {
  padding-left: var(--ds-alias-space-base-device);
  padding-right: var(--ds-alias-space-base-device);
}
.stack.px-md,
.stack-content.px-md {
  padding-left: var(--ds-alias-space-md-device);
  padding-right: var(--ds-alias-space-md-device);
}
.stack.px-lg,
.stack-content.px-lg {
  padding-left: var(--ds-alias-space-lg-device);
  padding-right: var(--ds-alias-space-lg-device);
}
.stack.px-xl,
.stack-content.px-xl {
  padding-left: var(--ds-alias-space-xl-device);
  padding-right: var(--ds-alias-space-xl-device);
}
.stack.px-2xl,
.stack-content.px-2xl {
  padding-left: var(--ds-alias-space-2xl-device);
  padding-right: var(--ds-alias-space-2xl-device);
}
.stack.py-2xs,
.stack-content.py-2xs {
  padding-top: var(--ds-alias-space-2xs-device);
  padding-bottom: var(--ds-alias-space-2xs-device);
}
.stack.py-xs,
.stack-content.py-xs {
  padding-top: var(--ds-alias-space-xs-device);
  padding-bottom: var(--ds-alias-space-xs-device);
}
.stack.py-sm,
.stack-content.py-sm {
  padding-top: var(--ds-alias-space-sm-device);
  padding-bottom: var(--ds-alias-space-sm-device);
}
.stack.py-base,
.stack-content.py-base {
  padding-top: var(--ds-alias-space-base-device);
  padding-bottom: var(--ds-alias-space-base-device);
}
.stack.py-md,
.stack-content.py-md {
  padding-top: var(--ds-alias-space-md-device);
  padding-bottom: var(--ds-alias-space-md-device);
}
.stack.py-lg,
.stack-content.py-lg {
  padding-top: var(--ds-alias-space-lg-device);
  padding-bottom: var(--ds-alias-space-lg-device);
}
.stack.py-xl,
.stack-content.py-xl {
  padding-top: var(--ds-alias-space-xl-device);
  padding-bottom: var(--ds-alias-space-xl-device);
}
.stack.py-2xl,
.stack-content.py-2xl {
  padding-top: var(--ds-alias-space-2xl-device);
  padding-bottom: var(--ds-alias-space-2xl-device);
}
.stack.p-none,
.stack-content.p-none {
  padding: 0;
}
.stack.px-none,
.stack-content.px-none {
  padding-left: 0;
  padding-right: 0;
}
.stack.py-none,
.stack-content.py-none {
  padding-top: 0;
  padding-bottom: 0;
}
.stack.gap-auto, .stack.gap-x-auto, .stack.gap-col-auto, .stack.gap-y-auto, .stack.gap-row-auto, .stack.has-space-auto, .stack.has-space-col-auto, .stack.has-space-row-auto,
.stack-content.gap-auto,
.stack-content.gap-x-auto,
.stack-content.gap-col-auto,
.stack-content.gap-y-auto,
.stack-content.gap-row-auto,
.stack-content.has-space-auto,
.stack-content.has-space-col-auto,
.stack-content.has-space-row-auto {
  justify-content: space-between;
}
.stack.gap-none, .stack.has-space-none,
.stack-content.gap-none,
.stack-content.has-space-none {
  gap: 0;
}
@media screen and (min-width: 769px) {
  .stack.gap-none, .stack.has-space-none,
  .stack-content.gap-none,
  .stack-content.has-space-none {
    gap: 0;
  }
}
@media screen and (min-width: 1024px) {
  .stack.gap-none, .stack.has-space-none,
  .stack-content.gap-none,
  .stack-content.has-space-none {
    gap: 0;
  }
}
.stack.gap-x-none, .stack.gap-col-none, .stack.has-space-col-none,
.stack-content.gap-x-none,
.stack-content.gap-col-none,
.stack-content.has-space-col-none {
  -moz-column-gap: 0;
       column-gap: 0;
}
@media screen and (min-width: 769px) {
  .stack.gap-x-none, .stack.gap-col-none, .stack.has-space-col-none,
  .stack-content.gap-x-none,
  .stack-content.gap-col-none,
  .stack-content.has-space-col-none {
    -moz-column-gap: 0;
         column-gap: 0;
  }
}
@media screen and (min-width: 1024px) {
  .stack.gap-x-none, .stack.gap-col-none, .stack.has-space-col-none,
  .stack-content.gap-x-none,
  .stack-content.gap-col-none,
  .stack-content.has-space-col-none {
    -moz-column-gap: 0;
         column-gap: 0;
  }
}
.stack.gap-y-none, .stack.gap-row-none, .stack.has-space-row-none,
.stack-content.gap-y-none,
.stack-content.gap-row-none,
.stack-content.has-space-row-none {
  row-gap: 0;
}
@media screen and (min-width: 769px) {
  .stack.gap-y-none, .stack.gap-row-none, .stack.has-space-row-none,
  .stack-content.gap-y-none,
  .stack-content.gap-row-none,
  .stack-content.has-space-row-none {
    row-gap: 0;
  }
}
@media screen and (min-width: 1024px) {
  .stack.gap-y-none, .stack.gap-row-none, .stack.has-space-row-none,
  .stack-content.gap-y-none,
  .stack-content.gap-row-none,
  .stack-content.has-space-row-none {
    row-gap: 0;
  }
}
.stack.gap-2xs, .stack.has-space-2xs,
.stack-content.gap-2xs,
.stack-content.has-space-2xs {
  gap: var(--ds-alias-space-2xs-device);
}
.stack.gap-xs, .stack.has-space-xs,
.stack-content.gap-xs,
.stack-content.has-space-xs {
  gap: var(--ds-alias-space-xs-device);
}
.stack.gap-sm, .stack.has-space-sm,
.stack-content.gap-sm,
.stack-content.has-space-sm {
  gap: var(--ds-alias-space-sm-device);
}
.stack.gap-base, .stack.has-space-base,
.stack-content.gap-base,
.stack-content.has-space-base {
  gap: var(--ds-alias-space-base-device);
}
.stack.gap-md, .stack.has-space-md,
.stack-content.gap-md,
.stack-content.has-space-md {
  gap: var(--ds-alias-space-md-device);
}
.stack.gap-lg, .stack.has-space-lg,
.stack-content.gap-lg,
.stack-content.has-space-lg {
  gap: var(--ds-alias-space-lg-device);
}
.stack.gap-xl, .stack.has-space-xl,
.stack-content.gap-xl,
.stack-content.has-space-xl {
  gap: var(--ds-alias-space-xl-device);
}
.stack.gap-2xl, .stack.has-space-2xl,
.stack-content.gap-2xl,
.stack-content.has-space-2xl {
  gap: var(--ds-alias-space-2xl-device);
}
.stack.gap-x-2xs, .stack.gap-col-2xs, .stack.has-space-col-2xs,
.stack-content.gap-x-2xs,
.stack-content.gap-col-2xs,
.stack-content.has-space-col-2xs {
  -moz-column-gap: var(--ds-alias-space-2xs-device);
       column-gap: var(--ds-alias-space-2xs-device);
}
.stack.gap-x-xs, .stack.gap-col-xs, .stack.has-space-col-xs,
.stack-content.gap-x-xs,
.stack-content.gap-col-xs,
.stack-content.has-space-col-xs {
  -moz-column-gap: var(--ds-alias-space-xs-device);
       column-gap: var(--ds-alias-space-xs-device);
}
.stack.gap-x-sm, .stack.gap-col-sm, .stack.has-space-col-sm,
.stack-content.gap-x-sm,
.stack-content.gap-col-sm,
.stack-content.has-space-col-sm {
  -moz-column-gap: var(--ds-alias-space-sm-device);
       column-gap: var(--ds-alias-space-sm-device);
}
.stack.gap-x-base, .stack.gap-col-base, .stack.has-space-col-base,
.stack-content.gap-x-base,
.stack-content.gap-col-base,
.stack-content.has-space-col-base {
  -moz-column-gap: var(--ds-alias-space-base-device);
       column-gap: var(--ds-alias-space-base-device);
}
.stack.gap-x-md, .stack.gap-col-md, .stack.has-space-col-md,
.stack-content.gap-x-md,
.stack-content.gap-col-md,
.stack-content.has-space-col-md {
  -moz-column-gap: var(--ds-alias-space-md-device);
       column-gap: var(--ds-alias-space-md-device);
}
.stack.gap-x-lg, .stack.gap-col-lg, .stack.has-space-col-lg,
.stack-content.gap-x-lg,
.stack-content.gap-col-lg,
.stack-content.has-space-col-lg {
  -moz-column-gap: var(--ds-alias-space-lg-device);
       column-gap: var(--ds-alias-space-lg-device);
}
.stack.gap-x-xl, .stack.gap-col-xl, .stack.has-space-col-xl,
.stack-content.gap-x-xl,
.stack-content.gap-col-xl,
.stack-content.has-space-col-xl {
  -moz-column-gap: var(--ds-alias-space-xl-device);
       column-gap: var(--ds-alias-space-xl-device);
}
.stack.gap-x-2xl, .stack.gap-col-2xl, .stack.has-space-col-2xl,
.stack-content.gap-x-2xl,
.stack-content.gap-col-2xl,
.stack-content.has-space-col-2xl {
  -moz-column-gap: var(--ds-alias-space-2xl-device);
       column-gap: var(--ds-alias-space-2xl-device);
}
.stack.gap-y-2xs, .stack.gap-row-2xs, .stack.has-space-row-2xs,
.stack-content.gap-y-2xs,
.stack-content.gap-row-2xs,
.stack-content.has-space-row-2xs {
  row-gap: var(--ds-alias-space-2xs-device);
}
.stack.gap-y-xs, .stack.gap-row-xs, .stack.has-space-row-xs,
.stack-content.gap-y-xs,
.stack-content.gap-row-xs,
.stack-content.has-space-row-xs {
  row-gap: var(--ds-alias-space-xs-device);
}
.stack.gap-y-sm, .stack.gap-row-sm, .stack.has-space-row-sm,
.stack-content.gap-y-sm,
.stack-content.gap-row-sm,
.stack-content.has-space-row-sm {
  row-gap: var(--ds-alias-space-sm-device);
}
.stack.gap-y-base, .stack.gap-row-base, .stack.has-space-row-base,
.stack-content.gap-y-base,
.stack-content.gap-row-base,
.stack-content.has-space-row-base {
  row-gap: var(--ds-alias-space-base-device);
}
.stack.gap-y-md, .stack.gap-row-md, .stack.has-space-row-md,
.stack-content.gap-y-md,
.stack-content.gap-row-md,
.stack-content.has-space-row-md {
  row-gap: var(--ds-alias-space-md-device);
}
.stack.gap-y-lg, .stack.gap-row-lg, .stack.has-space-row-lg,
.stack-content.gap-y-lg,
.stack-content.gap-row-lg,
.stack-content.has-space-row-lg {
  row-gap: var(--ds-alias-space-lg-device);
}
.stack.gap-y-xl, .stack.gap-row-xl, .stack.has-space-row-xl,
.stack-content.gap-y-xl,
.stack-content.gap-row-xl,
.stack-content.has-space-row-xl {
  row-gap: var(--ds-alias-space-xl-device);
}
.stack.gap-y-2xl, .stack.gap-row-2xl, .stack.has-space-row-2xl,
.stack-content.gap-y-2xl,
.stack-content.gap-row-2xl,
.stack-content.has-space-row-2xl {
  row-gap: var(--ds-alias-space-2xl-device);
}

.stack > ds-radio {
  margin-top: -0.25rem;
}

ds-content > ds-text,
.stack-content > ds-text,
ds-content > .text,
.stack-content > .text,
.stack > ds-text,
.stack > ds-label,
.stack > ds-heading,
.stack > ds-heading:not(:last-child),
.stack > .label,
.stack > .heading,
.stack > .heading:not(:last-child),
.stack > .title,
.stack > .title:not(:last-child),
.stack > .subtitle,
.stack > .subtitle:not(:last-child),
.stack > .link,
.stack > .is-link,
.stack > p {
  margin: 0;
}

/**
 * Variables
 * --------------------------------
 * Define here the css variables for the component to be able to use it in host or non-host mode
 * These variables can be used in the component styles below and later on be overridden in themes.
 */
.table {
  --_table-position: var(--table-position, var(--mod-table-position, static));
  --_table-top: var(--table-top, var(--mod-table-top));
  --_table-right: var(--table-right, var(--mod-table-right));
  --_table-bottom: var(--table-bottom, var(--mod-table-bottom));
  --_table-left: var(--table-left, var(--mod-table-left));
  position: var(--_table-position);
  top: var(--_table-top);
  right: var(--_table-right);
  bottom: var(--_table-bottom);
  left: var(--_table-left);
  --_table-m: var(--table-m, var(--mod-table-m, 0));
  --_table-my: var(--table-my, var(--mod-table-my));
  --_table-mx: var(--table-mx, var(--mod-table-mx));
  --_table-ml: var(--table-ml, var(--mod-table-ml));
  --_table-mr: var(--table-mr, var(--mod-table-mr));
  --_table-mt: var(--table-mt, var(--mod-table-mt));
  --_table-mb: var(--table-mb, var(--mod-table-mb));
  margin: var(--_table-m);
  margin-inline: var(--_table-mx);
  margin-block: var(--_table-my);
  margin-left: var(--_table-ml);
  margin-right: var(--_table-mr);
  margin-top: var(--_table-mt);
  margin-bottom: var(--_table-mb);
  --_table-color: var(--table-color, var(--mod-table-color, var(--ds-table-color)));
  --_table-background-color: var(--table-background-color, var(--mod-table-background-color, var(--ds-table-background-color)));
  --_table-body-background-color: var(--table-body-background-color, var(--mod-table-body-background-color, var(--ds-table-body-background-color)));
  --_table-cell-border-color: var(--table-cell-border-color, var(--mod-table-cell-border-color, var(--ds-table-cell-border-color)));
  --_table-cell-border-width: var(--table-cell-border-width, var(--mod-table-cell-border-width, var(--ds-table-cell-border-width)));
  --_table-cell-padding: var(--table-cell-padding, var(--mod-table-cell-padding, var(--ds-table-cell-padding)));
  --_table-cell-heading-color: var(--table-cell-heading-color, var(--mod-table-cell-heading-color, var(--ds-table-cell-heading-color)));
  --_table-head-background-color: var(--table-head-background-color, var(--mod-table-head-background-color, var(--ds-table-head-background-color)));
  --_table-head-cell-border-color: var(--table-head-cell-border-color, var(--mod-table-head-cell-border-color, var(--ds-table-head-cell-border-color)));
  --_table-head-cell-border-width: var(--table-head-cell-border-width, var(--mod-table-head-cell-border-width, var(--ds-table-head-cell-border-width)));
  --_table-head-cell-color: var(--table-head-cell-color, var(--mod-table-head-cell-color, var(--ds-table-head-cell-color)));
  --_table-head-font-family: var(--table-head-font-family, var(--mod-table-head-font-family, var(--ds-table-head-font-family)));
  --_table-head-font-size: var(--table-head-font-size, var(--mod-table-head-font-size, var(--ds-table-head-font-size)));
  --_table-foot-background-color: var(--table-foot-background-color, var(--mod-table-foot-background-color, var(--ds-table-foot-background-color)));
  --_table-foot-cell-border-width: var(--table-foot-cell-border-width, var(--mod-table-foot-cell-border-width, var(--ds-table-foot-cell-border-width)));
  --_table-foot-cell-color: var(--table-foot-cell-color, var(--mod-table-foot-cell-color, var(--ds-table-foot-cell-color)));
  --_table-row-background-color-hover: var(--table-row-background-color-hover, var(--mod-table-row-background-color-hover, var(--ds-table-row-background-color-hover)));
  --_table-row-background-color-active: var(--table-row-background-color-active, var(--mod-table-row-background-color-active, var(--ds-table-row-background-color-active)));
  --_table-row-color-active: var(--table-row-color-active, var(--mod-table-row-color-active, var(--ds-table-row-color-active)));
  --_table-striped-row-even-background-color-base: var(--table-striped-row-even-background-color-base, var(--mod-table-striped-row-even-background-color-base, var(--ds-table-striped-row-even-background-color-base)));
  --_table-striped-row-even-background-color-hover: var(--table-striped-row-even-background-color-hover, var(--mod-table-striped-row-even-background-color-hover, var(--ds-table-striped-row-even-background-color-hover)));
  --_table-narrow-cell-padding: var(--table-narrow-cell-padding, var(--mod-table-narrow-cell-padding, 0.25em 0.5em));
  --_table-bordered-cell-border-width: var(--table-bordered-cell-border-width, var(--mod-table-bordered-cell-border-width, 2px));
}

/**
  * Basic Component Styles
  * --------------------------------
  * Define here the component styles using the mixin to support host and non-host mode for hybrid components.
  */
.table {
  background-color: var(--_table-background-color);
  color: var(--_table-color);
}
.table td,
.table th {
  border-style: solid;
  border-color: var(--_table-cell-border-color);
  border-width: var(--_table-cell-border-width);
  padding: var(--_table-cell-padding);
  vertical-align: middle;
}
.table td.is-narrow,
.table th.is-narrow {
  white-space: nowrap;
  width: 1%;
}
.table td.is-selected,
.table th.is-selected {
  background-color: var(--_table-row-background-color-active);
  color: var(--_table-row-color-active);
}
.table td.is-selected a,
.table td.is-selected strong,
.table th.is-selected a,
.table th.is-selected strong {
  color: currentColor;
}
.table th {
  color: var(--_table-cell-heading-color);
}
.table th:not([align]) {
  text-align: inherit;
}
.table tr.is-selected {
  background-color: var(--_table-row-background-color-active);
  color: var(--_table-row-color-active);
}
.table tr.is-selected a,
.table tr.is-selected strong {
  color: currentColor;
}
.table tr.is-selected td,
.table tr.is-selected th {
  color: currentColor;
}
.table thead {
  background-color: var(--_table-head-background-color);
}
.table thead td,
.table thead th {
  border-width: var(--_table-head-cell-border-width);
  color: var(--_table-head-cell-color);
}
.table tfoot {
  background-color: var(--_table-foot-background-color);
}
.table tfoot td,
.table tfoot th {
  border-width: var(--_table-foot-cell-border-width);
  color: var(--_table-foot-cell-color);
}
.table tbody {
  background-color: var(--_table-body-background-color);
}
.table tbody tr:last-child td,
.table tbody tr:last-child th {
  border-bottom-width: 0;
}
.table.is-bordered th {
  border-top-width: var(--_table-bordered-cell-border-width);
  border-left-width: var(--_table-bordered-cell-border-width);
  border-right-width: var(--_table-bordered-cell-border-width);
  border-top-color: var(--_table-cell-border-color);
  border-left-color: var(--_table-cell-border-color);
  border-right-color: var(--_table-cell-border-color);
}
.table.is-bordered td {
  border-width: var(--_table-bordered-cell-border-width);
}
.table.is-bordered tr:last-child td {
  border-bottom-width: var(--_table-bordered-cell-border-width);
}
.table.is-wide {
  width: 100%;
}
.table.is-hoverable tbody tr:not(.is-selected):hover {
  background-color: var(--_table-row-background-color-hover);
}
.table.is-hoverable.is-striped tbody tr:not(.is-selected):hover {
  background-color: var(--_table-row-background-color-hover);
}
.table.is-hoverable.is-striped tbody tr:not(.is-selected):hover:nth-child(even) {
  background-color: var(--_table-striped-row-even-background-color-hover);
}
.table.is-narrow td,
.table.is-narrow th {
  padding: var(--_table-narrow-cell-padding);
}
.table.is-striped tbody tr:not(.is-selected):nth-child(even) {
  background-color: var(--_table-striped-row-even-background-color-base);
}

.table-container {
  -webkit-overflow-scrolling: touch;
  overflow: auto;
  overflow-y: hidden;
  max-width: 100%;
}

table.table {
  display: table !important;
  border-spacing: 0;
  margin: 0;
}
table.table thead tr {
  border-top: 0;
}
table.table thead th {
  font-family: var(--_table-head-font-family);
  border-color: var(--_table-head-cell-border-color);
  border-bottom-width: 2px;
}
table.table th:not([align]) {
  text-align: left;
}
table.table td,
table.table th {
  font-size: var(--_table-head-font-size);
  vertical-align: middle;
  color: var(--_table-color);
  text-align: left;
}
table.table td .ds-checkbox,
table.table th .ds-checkbox {
  padding: 0;
  margin-top: 1px;
}
table.table td {
  color: var(--_table-color);
  hyphens: auto;
}
table.table td.has-buttons {
  padding: 2px;
}
table.table td.has-buttons .ds-button {
  margin-right: 0.25rem;
}
table.table td.has-buttons .ds-button:last-child {
  margin-right: 0px;
}
table.table td.has-buttons .buttons {
  justify-content: flex-end;
  padding: 3px;
}

/**
 * Variables
 * --------------------------------
 * Define here the css variables for the component to be able to use it in host or non-host mode
 * These variables can be used in the component styles below and later on be overridden in themes.
 */
.tag:not(.token) {
  --_tag-position: var(--tag-position, var(--mod-tag-position, static));
  --_tag-top: var(--tag-top, var(--mod-tag-top));
  --_tag-right: var(--tag-right, var(--mod-tag-right));
  --_tag-bottom: var(--tag-bottom, var(--mod-tag-bottom));
  --_tag-left: var(--tag-left, var(--mod-tag-left));
  position: var(--_tag-position);
  top: var(--_tag-top);
  right: var(--_tag-right);
  bottom: var(--_tag-bottom);
  left: var(--_tag-left);
  --_tag-m: var(--tag-m, var(--mod-tag-m, 0));
  --_tag-my: var(--tag-my, var(--mod-tag-my));
  --_tag-mx: var(--tag-mx, var(--mod-tag-mx));
  --_tag-ml: var(--tag-ml, var(--mod-tag-ml));
  --_tag-mr: var(--tag-mr, var(--mod-tag-mr));
  --_tag-mt: var(--tag-mt, var(--mod-tag-mt));
  --_tag-mb: var(--tag-mb, var(--mod-tag-mb));
  margin: var(--_tag-m);
  margin-inline: var(--_tag-mx);
  margin-block: var(--_tag-my);
  margin-left: var(--_tag-ml);
  margin-right: var(--_tag-mr);
  margin-top: var(--_tag-mt);
  margin-bottom: var(--_tag-mb);
  --_tag-min-height: var(--tag-min-height, var(--mod-tag-min-height, 2rem));
  --_tag-gap: var(--tag-gap, var(--mod-tag-gap, 0.25rem));
  --_tag-px: var(--tag-px, var(--mod-tag-px, var(--ds-tag-space-padding-x-base)));
  --_tag-py: var(--tag-py, var(--mod-tag-py, var(--ds-tag-space-padding-y-base)));
  --_tag-radius: var(--tag-radius, var(--mod-tag-radius, var(--ds-tag-radius-base)));
  --_tag-color: var(--tag-color, var(--mod-tag-color, var(--ds-tag-base-color-text-base)));
  --_tag-bg: var(--tag-bg, var(--mod-tag-bg, var(--ds-tag-base-color-bg-base)));
  --_tag-line-height: var(--tag-line-height, var(--mod-tag-line-height, 1));
  --_tag-font-family: var(--tag-font-family, var(--mod-tag-font-family, var(--ds-tag-font-family)));
  --_tag-font-size: var(--tag-font-size, var(--mod-tag-font-size, var(--ds-tag-font-size-base)));
  --_tag-font-weight: var(--tag-font-weight, var(--mod-tag-font-weight, var(--ds-tag-font-weight-base)));
  --_tag-close-mr: var(--tag-close-mr, var(--mod-tag-close-mr, -0.25rem));
}

/**
  * Basic Component Styles
  * --------------------------------
  * Define here the component styles using the mixin to support host and non-host mode for hybrid components.
  */
.tag:not(.token) {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-user-drag: none; /* Chrome, Safari */
  user-drag: none; /* Non-standard, limited support */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: bottom;
  box-sizing: border-box;
  gap: var(--_tag-gap);
  width: -moz-fit-content;
  width: fit-content;
  min-height: var(--_tag-min-height);
  padding-block: var(--_tag-py);
  padding-inline: var(--_tag-px);
  border-radius: var(--_tag-radius);
  color: var(--_tag-color);
  background-color: var(--_tag-bg);
  font-family: var(--_tag-font-family);
  line-height: var(--_tag-line-height);
  font-size: var(--_tag-font-size);
  font-weight: var(--_tag-font-weight);
}
.tag:not(.token) > .close,
.tag:not(.token) > ds-close {
  --close-mr: var(--_tag-close-mr);
}
.tag:not(.token) > ds-icon {
  --icon-size: 0.875rem;
}

/**
  * Variants and States
  * --------------------------------
  * Define here the variants and states like size or colors for the component.
  */
.tag:not(.token).is-primary {
  --icon-color: var(--ds-tag-primary-color-text-base);
  --mod-tag-color: var(--ds-tag-primary-color-text-base);
  --mod-tag-bg: var(--ds-tag-primary-color-bg-base);
}

.tag:not(.token).is-grey {
  --icon-color: var(--ds-tag-grey-color-text-base);
  --mod-tag-color: var(--ds-tag-grey-color-text-base);
  --mod-tag-bg: var(--ds-tag-grey-color-bg-base);
}

.tag:not(.token).is-success {
  --icon-color: var(--ds-tag-success-color-text-base);
  --mod-tag-color: var(--ds-tag-success-color-text-base);
  --mod-tag-bg: var(--ds-tag-success-color-bg-base);
}

.tag:not(.token).is-info {
  --icon-color: var(--ds-tag-info-color-text-base);
  --mod-tag-color: var(--ds-tag-info-color-text-base);
  --mod-tag-bg: var(--ds-tag-info-color-bg-base);
}

.tag:not(.token).is-warning {
  --icon-color: var(--ds-tag-warning-color-text-base);
  --mod-tag-color: var(--ds-tag-warning-color-text-base);
  --mod-tag-bg: var(--ds-tag-warning-color-bg-base);
}

.tag:not(.token).is-danger {
  --icon-color: var(--ds-tag-danger-color-text-base);
  --mod-tag-color: var(--ds-tag-danger-color-text-base);
  --mod-tag-bg: var(--ds-tag-danger-color-bg-base);
}

.tag:not(.token).is-purple {
  --icon-color: var(--ds-tag-purple-color-text-base);
  --mod-tag-color: var(--ds-tag-purple-color-text-base);
  --mod-tag-bg: var(--ds-tag-purple-color-bg-base);
}

.tag:not(.token).is-red {
  --icon-color: var(--ds-tag-red-color-text-base);
  --mod-tag-color: var(--ds-tag-red-color-text-base);
  --mod-tag-bg: var(--ds-tag-red-color-bg-base);
}

.tag:not(.token).is-yellow {
  --icon-color: var(--ds-tag-yellow-color-text-base);
  --mod-tag-color: var(--ds-tag-yellow-color-text-base);
  --mod-tag-bg: var(--ds-tag-yellow-color-bg-base);
}

.tag:not(.token).is-green {
  --icon-color: var(--ds-tag-green-color-text-base);
  --mod-tag-color: var(--ds-tag-green-color-text-base);
  --mod-tag-bg: var(--ds-tag-green-color-bg-base);
}

.tag:not(.token).is-purple-dark {
  --icon-color: var(--ds-tag-purple-dark-color-text-base);
  --mod-tag-color: var(--ds-tag-purple-dark-color-text-base);
  --mod-tag-bg: var(--ds-tag-purple-dark-color-bg-base);
}

.tag:not(.token).is-red-dark {
  --icon-color: var(--ds-tag-red-dark-color-text-base);
  --mod-tag-color: var(--ds-tag-red-dark-color-text-base);
  --mod-tag-bg: var(--ds-tag-red-dark-color-bg-base);
}

.tag:not(.token).is-yellow-dark {
  --icon-color: var(--ds-tag-yellow-dark-color-text-base);
  --mod-tag-color: var(--ds-tag-yellow-dark-color-text-base);
  --mod-tag-bg: var(--ds-tag-yellow-dark-color-bg-base);
}

.tag:not(.token).is-green-dark {
  --icon-color: var(--ds-tag-green-dark-color-text-base);
  --mod-tag-color: var(--ds-tag-green-dark-color-text-base);
  --mod-tag-bg: var(--ds-tag-green-dark-color-bg-base);
}

.tag:not(.token).is-purple-light {
  --icon-color: var(--ds-tag-purple-light-color-text-base);
  --mod-tag-color: var(--ds-tag-purple-light-color-text-base);
  --mod-tag-bg: var(--ds-tag-purple-light-color-bg-base);
}

.tag:not(.token).is-red-light {
  --icon-color: var(--ds-tag-red-light-color-text-base);
  --mod-tag-color: var(--ds-tag-red-light-color-text-base);
  --mod-tag-bg: var(--ds-tag-red-light-color-bg-base);
}

.tag:not(.token).is-yellow-light {
  --icon-color: var(--ds-tag-yellow-light-color-text-base);
  --mod-tag-color: var(--ds-tag-yellow-light-color-text-base);
  --mod-tag-bg: var(--ds-tag-yellow-light-color-bg-base);
}

.tag:not(.token).is-green-light {
  --icon-color: var(--ds-tag-green-light-color-text-base);
  --mod-tag-color: var(--ds-tag-green-light-color-text-base);
  --mod-tag-bg: var(--ds-tag-green-light-color-bg-base);
}

.tag:not(.token).is-primary {
  --close-color-icon: var(--ds-close-inverted-icon-color-base);
  --close-color-background-hover: var(--ds-close-inverted-color-background-hover);
  --close-color-background-active: var(--ds-close-inverted-color-background-active);
  --close-color-focus: var(--ds-alias-interaction-focus-color-inverted);
}

.tag:not(.token).is-grey {
  --close-color-icon: var(--ds-close-inverted-icon-color-base);
  --close-color-background-hover: var(--ds-close-inverted-color-background-hover);
  --close-color-background-active: var(--ds-close-inverted-color-background-active);
  --close-color-focus: var(--ds-alias-interaction-focus-color-inverted);
}

.tag:not(.token).is-info {
  --close-color-icon: var(--ds-close-inverted-icon-color-base);
  --close-color-background-hover: var(--ds-close-inverted-color-background-hover);
  --close-color-background-active: var(--ds-close-inverted-color-background-active);
  --close-color-focus: var(--ds-alias-interaction-focus-color-inverted);
}

.tag:not(.token).is-success {
  --close-color-icon: var(--ds-close-inverted-icon-color-base);
  --close-color-background-hover: var(--ds-close-inverted-color-background-hover);
  --close-color-background-active: var(--ds-close-inverted-color-background-active);
  --close-color-focus: var(--ds-alias-interaction-focus-color-inverted);
}

.tag:not(.token).is-danger {
  --close-color-icon: var(--ds-close-inverted-icon-color-base);
  --close-color-background-hover: var(--ds-close-inverted-color-background-hover);
  --close-color-background-active: var(--ds-close-inverted-color-background-active);
  --close-color-focus: var(--ds-alias-interaction-focus-color-inverted);
}

.tag:not(.token).is-purple-dark {
  --close-color-icon: var(--ds-close-inverted-icon-color-base);
  --close-color-background-hover: var(--ds-close-inverted-color-background-hover);
  --close-color-background-active: var(--ds-close-inverted-color-background-active);
  --close-color-focus: var(--ds-alias-interaction-focus-color-inverted);
}

.tag:not(.token).is-red-dark {
  --close-color-icon: var(--ds-close-inverted-icon-color-base);
  --close-color-background-hover: var(--ds-close-inverted-color-background-hover);
  --close-color-background-active: var(--ds-close-inverted-color-background-active);
  --close-color-focus: var(--ds-alias-interaction-focus-color-inverted);
}

.tag:not(.token).is-yellow-dark {
  --close-color-icon: var(--ds-close-inverted-icon-color-base);
  --close-color-background-hover: var(--ds-close-inverted-color-background-hover);
  --close-color-background-active: var(--ds-close-inverted-color-background-active);
  --close-color-focus: var(--ds-alias-interaction-focus-color-inverted);
}

.tag:not(.token).is-green-dark {
  --close-color-icon: var(--ds-close-inverted-icon-color-base);
  --close-color-background-hover: var(--ds-close-inverted-color-background-hover);
  --close-color-background-active: var(--ds-close-inverted-color-background-active);
  --close-color-focus: var(--ds-alias-interaction-focus-color-inverted);
}

.tag:not(.token).is-square {
  --mod-tag-radius: var(--ds-tag-radius-square);
}
.tag:not(.token).is-pill {
  --mod-tag-radius: var(--ds-tag-radius-pill);
}

.tag:not(.token).is-sm {
  --mod-tag-min-height: 1.5rem;
  --mod-tag-py: var(--ds-tag-space-padding-y-sm);
  --mod-tag-px: var(--ds-tag-space-padding-x-sm);
  --mod-tag-font-size: var(--ds-tag-font-size-sm);
  --mod-tag-font-weight: var(--ds-tag-font-weight-sm);
}
.tag:not(.token).is-sm > .close,
.tag:not(.token).is-sm > ds-close {
  --close-padding: 0.25rem;
  --close-size-icon: 10px;
}
.tag:not(.token).is-md {
  --mod-tag-min-height: 2.5rem;
  --mod-tag-py: var(--ds-tag-space-padding-y-md);
  --mod-tag-px: var(--ds-tag-space-padding-x-md);
  --mod-tag-font-size: var(--ds-tag-font-size-md);
  --mod-tag-font-weight: var(--ds-tag-font-weight-md);
}
.tag:not(.token).is-lg {
  --mod-tag-min-height: 3rem;
  --mod-tag-py: var(--ds-tag-space-padding-y-lg);
  --mod-tag-px: var(--ds-tag-space-padding-x-lg);
  --mod-tag-font-size: var(--ds-tag-font-size-lg);
  --mod-tag-font-weight: var(--ds-tag-font-weight-lg);
}

/**
  * Tags container
  * --------------------------------
  * Define here the styles for tags container to be able to use a flex layout with gap.
  */
.tags {
  --_tags-m: var(--tags-m, var(--mod-tags-m, 0));
  --_tags-my: var(--tags-my, var(--mod-tags-my));
  --_tags-mx: var(--tags-mx, var(--mod-tags-mx));
  --_tags-ml: var(--tags-ml, var(--mod-tags-ml));
  --_tags-mr: var(--tags-mr, var(--mod-tags-mr));
  --_tags-mt: var(--tags-mt, var(--mod-tags-mt));
  --_tags-mb: var(--tags-mb, var(--mod-tags-mb));
  margin: var(--_tags-m);
  margin-inline: var(--_tags-mx);
  margin-block: var(--_tags-my);
  margin-left: var(--_tags-ml);
  margin-right: var(--_tags-mr);
  margin-top: var(--_tags-mt);
  margin-bottom: var(--_tags-mb);
  --_tags-gap: var(--tags-gap, var(--mod-tags-gap, 0.25rem));
  --_tags-display: var(--tags-display, var(--mod-tags-display, inline-flex));
  display: var(--_tags-display);
  gap: var(--_tags-gap);
  vertical-align: middle;
}

.tags + .tags {
  margin-top: var(--_tag-gap);
}

ds-tag-group + ds-tag-group {
  margin-top: var(--_tag-gap);
}

/**
 * Variables
 * --------------------------------
 * Define here the css variables for the component to be able to use it in host or non-host mode
 * These variables can be used in the component styles below and later on be overridden in themes.
 */
.text {
  --_text-position: var(--text-position, var(--mod-text-position, static));
  --_text-top: var(--text-top, var(--mod-text-top));
  --_text-right: var(--text-right, var(--mod-text-right));
  --_text-bottom: var(--text-bottom, var(--mod-text-bottom));
  --_text-left: var(--text-left, var(--mod-text-left));
  position: var(--_text-position);
  top: var(--_text-top);
  right: var(--_text-right);
  bottom: var(--_text-bottom);
  left: var(--_text-left);
  --_text-m: var(--text-m, var(--mod-text-m, 0));
  --_text-my: var(--text-my, var(--mod-text-my));
  --_text-mx: var(--text-mx, var(--mod-text-mx));
  --_text-ml: var(--text-ml, var(--mod-text-ml));
  --_text-mr: var(--text-mr, var(--mod-text-mr));
  --_text-mt: var(--text-mt, var(--mod-text-mt));
  --_text-mb: var(--text-mb, var(--mod-text-mb));
  margin: var(--_text-m);
  margin-inline: var(--_text-mx);
  margin-block: var(--_text-my);
  margin-left: var(--_text-ml);
  margin-right: var(--_text-mr);
  margin-top: var(--_text-mt);
  margin-bottom: var(--_text-mb);
  --_text-color: var(--text-color, var(--mod-text-color, inherit));
  --_text-align: var(--text-align, var(--mod-text-align, inherit));
  --_text-family: var(--text-family, var(--mod-text-family, var(--ds-body-family)));
  --_text-weight: var(--text-weight, var(--mod-text-weight, var(--ds-body-weight)));
  --_text-line-height: var(--text-line-height, var(--mod-text-line-height, var(--ds-body-line-height)));
  --_text-size: var(--text-size, var(--mod-text-size, var(--ds-alias-text-size-base-device)));
  --_text-shadow: var(--text-shadow, var(--mod-text-shadow, var(--ds-alias-shadow-text)));
  --_text-space: var(--text-space, var(--mod-text-space, var(--ds-body-space)));
  --_text-shadow: var(--text-shadow, var(--mod-text-shadow, none));
}

/**
  * Basic Component Styles
  * --------------------------------
  * Define here the component styles using the mixin to support host and non-host mode for hybrid components.
  */
.text {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: block;
  box-sizing: content-box;
  hyphens: auto;
  overflow-wrap: break-word;
  text-wrap: balance;
  text-align: var(--_text-align);
  color: var(--_text-color);
  font-family: var(--_text-family);
  font-weight: var(--_text-weight);
  line-height: var(--_text-line-height);
  font-size: var(--_text-size);
  text-shadow: var(--_text-shadow);
}
.text b,
.text strong,
.text .is-bold {
  font-weight: var(--ds-alias-text-weight-bold);
}

.text.is-centered {
  --mod-text-align: center;
}
.text.is-right {
  --mod-text-align: right;
}
.text.is-justified {
  --mod-text-align: justify;
}

.text.has-no-wrap {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

/**
  * Variants and States
  * --------------------------------
  * Define here the variants and states like size or colors for the component.
  */
.text.is-light {
  --mod-text-weight: var(--ds-alias-text-weight-light);
}
.text.is-regular {
  --mod-text-weight: var(--ds-alias-text-weight-regular);
}
.text.is-bold {
  --mod-text-weight: var(--ds-alias-text-weight-bold);
}

.text.has-shadow {
  --mod-text-shadow: var(--ds-alias-text-shadow);
}

.text.is-inline {
  display: inline;
}

.text.is-white {
  --mod-text-color: var(--ds-alias-text-color-white);
}

.text.is-black {
  --mod-text-color: var(--ds-alias-text-color-black);
}

.text.is-primary {
  --mod-text-color: var(--ds-alias-text-color-primary);
}

.text.is-primary-hover {
  --mod-text-color: var(--ds-alias-text-color-primary-hover);
}

.text.is-primary-active {
  --mod-text-color: var(--ds-alias-text-color-primary-active);
}

.text.is-inverted-primary {
  --mod-text-color: var(--ds-alias-text-color-inverted-primary);
}

.text.is-inverted-primary-hover {
  --mod-text-color: var(--ds-alias-text-color-inverted-primary-hover);
}

.text.is-inverted-primary-active {
  --mod-text-color: var(--ds-alias-text-color-inverted-primary-active);
}

.text.is-primary-light {
  --mod-text-color: var(--ds-alias-text-color-primary-light);
}

.text.is-hint {
  --mod-text-color: var(--ds-alias-text-color-hint);
}

.text.is-grey-light {
  --mod-text-color: var(--ds-alias-text-color-grey-light);
}

.text.is-grey {
  --mod-text-color: var(--ds-alias-text-color-grey);
}

.text.is-grey-dark {
  --mod-text-color: var(--ds-alias-text-color-grey-dark);
}

.text.is-disabled {
  --mod-text-color: var(--ds-alias-text-color-disabled);
}

.text.is-inverted-disabled {
  --mod-text-color: var(--ds-alias-text-color-inverted-disabled);
}

.text.is-info {
  --mod-text-color: var(--ds-alias-text-color-info);
}

.text.is-warning {
  --mod-text-color: var(--ds-alias-text-color-warning);
}

.text.is-success {
  --mod-text-color: var(--ds-alias-text-color-success);
}

.text.is-danger {
  --mod-text-color: var(--ds-alias-text-color-danger);
}

.text.is-danger-hover {
  --mod-text-color: var(--ds-alias-text-color-danger-hover);
}

.text.is-danger-active {
  --mod-text-color: var(--ds-alias-text-color-danger-active);
}

.text.is-xxxxx-large {
  --mod-text-size: var(--ds-alias-text-size-5xl-device);
}
.text.is-5xl {
  --mod-text-size: var(--ds-alias-text-size-5xl-device);
}
.text.is-xxxx-large {
  --mod-text-size: var(--ds-alias-text-size-4xl-device);
}
.text.is-4xl {
  --mod-text-size: var(--ds-alias-text-size-4xl-device);
}
.text.is-xxx-large {
  --mod-text-size: var(--ds-alias-text-size-3xl-device);
}
.text.is-3xl {
  --mod-text-size: var(--ds-alias-text-size-3xl-device);
}
.text.is-xx-large {
  --mod-text-size: var(--ds-alias-text-size-2xl-device);
}
.text.is-2xl {
  --mod-text-size: var(--ds-alias-text-size-2xl-device);
}
.text.is-x-large {
  --mod-text-size: var(--ds-alias-text-size-xl-device);
}
.text.is-xl {
  --mod-text-size: var(--ds-alias-text-size-xl-device);
}
.text.is-large {
  --mod-text-size: var(--ds-alias-text-size-lg-device);
}
.text.is-lead {
  --mod-text-size: var(--ds-alias-text-size-lg-device);
}
.text.is-lg {
  --mod-text-size: var(--ds-alias-text-size-lg-device);
}
.text.is-medium {
  --mod-text-size: var(--ds-alias-text-size-md-device);
}
.text.is-block {
  --mod-text-size: var(--ds-alias-text-size-md-device);
}
.text.is-md {
  --mod-text-size: var(--ds-alias-text-size-md-device);
}
.text.is-normal {
  --mod-text-size: var(--ds-alias-text-size-base-device);
}
.text.is-base {
  --mod-text-size: var(--ds-alias-text-size-base-device);
}
.text.is-small {
  --mod-text-size: var(--ds-alias-text-size-sm-device);
}
.text.is-sm {
  --mod-text-size: var(--ds-alias-text-size-sm-device);
}
.text.is-x-small {
  --mod-text-size: var(--ds-alias-text-size-xs-device);
}
.text.is-xs {
  --mod-text-size: var(--ds-alias-text-size-xs-device);
}

.text.is-heading, .text.is-title {
  --mod-text-family: var(--ds-alias-text-family-heading);
  --mod-text-weight: var(--ds-alias-text-weight-bold);
  --mod-text-line-height: var(--ds-alias-text-line-height-heading);
}
.text.is-subtitle {
  --mod-text-family: var(--ds-alias-text-family-heading);
  --mod-text-weight: var(--ds-alias-text-weight-light);
  --mod-text-line-height: var(--ds-alias-text-line-height-heading);
}

.text.has-space-all {
  --mod-text-mt: var(--_text-space);
  --mod-text-mb: var(--_text-space);
}
.text.has-space-top {
  --mod-text-mt: var(--_text-space);
  --mod-text-mb: 0;
}
.text.has-space-bottom {
  --mod-text-mb: var(--_text-space);
}
.text.has-space-none {
  --mod-text-mb: 0;
  --mod-text-mt: 0;
}

/**
 * Control Mixins (delegated to input.mixin)
 * --------------------------------
 */
/**
 * Container Mixins (textarea-specific)
 * --------------------------------
 * Same design tokens as input but:
 * - align-items: flex-start (text anchored to top)
 * - padding-block instead of fixed min-height
 * - resize: vertical on the native textarea
 */
/**
 * Select-specific Mixins
 * --------------------------------
 */
/**
 * Variables
 * --------------------------------
 * Define here the css variables for the component to be able to use it in host or non-host mode
 * These variables can be used in the component styles below and later on be overridden in themes.
 */
.textarea {
  --_input-family: var(--input-family, var(--mod-input-family, var(--ds-form-control-family)));
  --_input-weight: var(--input-weight, var(--mod-input-weight, var(--ds-form-control-weight)));
  --_input-line-height: var(--input-line-height, var(--mod-input-line-height, var(--ds-form-control-line-height)));
  --_input-size: var(--input-size, var(--mod-input-size, var(--ds-form-control-size-device)));
  --_input-color: var(--input-color, var(--mod-input-color, var(--ds-form-control-color-value-base)));
  --_input-placeholder: var(--input-placeholder, var(--mod-input-placeholder, var(--ds-form-control-color-placeholder-base)));
}

/**
 * Basic Component Styles
 * --------------------------------
 */
.field .textarea {
  border: none;
  outline: none;
  box-shadow: none;
  position: relative;
  background: inherit;
  flex: 1;
  color: var(--_input-color);
  font-family: var(--_input-family);
  font-weight: var(--_input-weight);
  font-size: var(--_input-size);
  line-height: var(--_input-line-height);
  border-radius: var(--_input-container-radius);
}
.field .textarea::-moz-placeholder {
  color: var(--_input-placeholder);
}
.field .textarea::placeholder {
  color: var(--_input-placeholder);
}
.field .textarea::-moz-placeholder {
  color: var(--_input-placeholder);
}
.field .textarea::-webkit-input-placeholder {
  color: var(--_input-placeholder);
}
.field .textarea:-moz-placeholder {
  color: var(--_input-placeholder);
}
.field .textarea:-ms-input-placeholder {
  color: var(--_input-placeholder);
}
.field .control {
  align-items: flex-start;
  padding-block: 0.5rem;
}
.field .control textarea {
  resize: vertical;
}

/**
 * Time Input provides a native HTML time input element with styled wrapper,
 * integrated form field support, and state styling. Supports disabled and validation states.
 *
 * @variant is-disabled - Disabled time input state with greyed out appearance.
 * @variant is-danger - Invalid time input state with red border and error styling.
 * @variant is-success - Valid time input state with green border and success styling.
 * @variant is-warning - Warning time input state with yellow border and warning styling.
 */
/**
 * Variables
 * --------------------------------
 * Define here the css variables for the component to be able to use it in host or non-host mode
 * These variables can be used in the component styles below and later on be overridden in themes.
 *
 * @prop --time-input-family - Font family of the time input control.
 * @prop --time-input-weight - Font weight of the time input control.
 * @prop --time-input-line-height - Line height of the time input control.
 * @prop --time-input-size - Font size of the time input control.
 * @prop --time-input-color - Text color of the time input control value.
 * @prop --time-input-placeholder - Text color of the time input placeholder text.
 */
.time-input {
  --_time-input-family: var(--time-input-family, var(--mod-time-input-family, var(--ds-form-control-family)));
  --_time-input-weight: var(--time-input-weight, var(--mod-time-input-weight, var(--ds-form-control-weight)));
  --_time-input-line-height: var(--time-input-line-height, var(--mod-time-input-line-height, var(--ds-form-control-line-height)));
  --_time-input-size: var(--time-input-size, var(--mod-time-input-size, var(--ds-form-control-size-device)));
  --_time-input-color: var(--time-input-color, var(--mod-time-input-color, var(--ds-form-control-color-value-base)));
  --_time-input-placeholder: var(--time-input-placeholder, var(--mod-time-input-placeholder, var(--ds-form-control-color-placeholder-base)));
}

/**
 * Basic Component Styles
 * --------------------------------
 */
.field .time-input {
  border: none;
  outline: none;
  box-shadow: none;
  position: relative;
  background: inherit;
  flex: 1;
  color: var(--_time-input-color);
  font-family: var(--_time-input-family);
  font-weight: var(--_time-input-weight);
  font-size: var(--_time-input-size);
  line-height: var(--_time-input-line-height);
  border-radius: var(--_time-input-container-radius);
}
.field .time-input::-moz-placeholder {
  color: var(--_time-input-placeholder);
}
.field .time-input::placeholder {
  color: var(--_time-input-placeholder);
}
.field .time-input::-moz-placeholder {
  color: var(--_time-input-placeholder);
}
.field .time-input::-webkit-input-placeholder {
  color: var(--_time-input-placeholder);
}
.field .time-input:-moz-placeholder {
  color: var(--_time-input-placeholder);
}
.field .time-input:-ms-input-placeholder {
  color: var(--_time-input-placeholder);
}
.field .control input[type=time] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: none;
  border: none;
  background: transparent;
  box-shadow: none;
  flex: 1;
  min-width: 0;
  padding: 0 0.5rem;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.field .control input[type=time]:focus {
  outline: none;
}
.field .control input[type=time]:disabled {
  cursor: default;
}

/**
 * Control Mixins
 * --------------------------------
 * $wrapper — the element that contains input[type="checkbox"] + label.
 *   Web component: ':host'
 *   CSS-only:      '.toggle'
 */
/**
 * CSS-only toggle / switch toggle: apply .toggle
 *   Checkbox:
 *   <label class="toggle">
 *     <input type="checkbox">
 *     Label text
 *   </label>
 *
 */
.toggle {
  --_toggle-gap: var(--toggle-gap, var(--mod-toggle-gap, 0.5rem));
  --_toggle-label-base-color: var(--toggle-label-base-color, var(--mod-toggle-label-base-color, inherit));
  --_toggle-label-hover-color: var(--toggle-label-hover-color, var(--mod-toggle-label-hover-color, var(--ds-global-color-sky-5)));
  --_toggle-label-active-color: var(--toggle-label-active-color, var(--mod-toggle-label-active-color, var(--ds-global-color-primary-6)));
  --_toggle-height: var(--toggle-height, var(--mod-toggle-height, 1.5rem));
  --_toggle-width: var(--toggle-width, var(--mod-toggle-width, 2.5rem));
  --_toggle-border-width: var(--toggle-border-width, var(--mod-toggle-border-width, var(--ds-alias-border-width-base)));
  --_toggle-radius: var(--toggle-radius, var(--mod-toggle-radius, var(--ds-alias-radius-rounded)));
  --_toggle-padding-y: var(--toggle-padding-y, var(--mod-toggle-padding-y, 0.25rem));
  --_toggle-min-height: var(--toggle-min-height, var(--mod-toggle-min-height, 3rem));
  --_toggle-tile-radius: var(--toggle-tile-radius, var(--mod-toggle-tile-radius, var(--ds-alias-radius-base)));
  --_toggle-tile-padding: var(--toggle-tile-padding, var(--mod-toggle-tile-padding, 1rem));
  --_toggle-tile-border-width: var(--toggle-tile-border-width, var(--mod-toggle-tile-border-width, var(--ds-alias-border-width-base)));
  --_toggle-tile-base-background-color: var(--toggle-tile-base-background-color, var(--mod-toggle-tile-base-background-color, inherit));
  --_toggle-tile-base-border-color: var(--toggle-tile-base-border-color, var(--mod-toggle-tile-base-border-color, var(--ds-global-color-grey-3)));
  --_toggle-tile-hover-background-color: var(--toggle-tile-hover-background-color, var(--mod-toggle-tile-hover-background-color, var(--ds-global-color-grey-2)));
  --_toggle-tile-hover-border-color: var(--toggle-tile-hover-border-color, var(--mod-toggle-tile-hover-border-color, var(--ds-global-color-sky-5)));
  --_toggle-tile-active-background-color: var(--toggle-tile-active-background-color, var(--mod-toggle-tile-active-background-color, var(--ds-global-color-grey-2)));
  --_toggle-tile-active-border-color: var(--toggle-tile-active-border-color, var(--mod-toggle-tile-active-border-color, var(--ds-global-color-primary-6)));
  --_toggle-unchecked-base-color-background: var(--toggle-unchecked-base-color-background, var(--mod-toggle-unchecked-base-color-background, var(--ds-global-color-grey-3)));
  --_toggle-unchecked-base-color-tick: var(--toggle-unchecked-base-color-tick, var(--mod-toggle-unchecked-base-color-tick, var(--ds-global-color-primary-5)));
  --_toggle-unchecked-hover-color-background: var(--toggle-unchecked-hover-color-background, var(--mod-toggle-unchecked-hover-color-background, var(--ds-global-color-grey-3)));
  --_toggle-unchecked-hover-color-tick: var(--toggle-unchecked-hover-color-tick, var(--mod-toggle-unchecked-hover-color-tick, var(--ds-global-color-sky-5)));
  --_toggle-unchecked-active-color-background: var(--toggle-unchecked-active-color-background, var(--mod-toggle-unchecked-active-color-background, var(--ds-global-color-grey-3)));
  --_toggle-unchecked-active-color-tick: var(--toggle-unchecked-active-color-tick, var(--mod-toggle-unchecked-active-color-tick, var(--ds-global-color-primary-6)));
  --_toggle-checked-base-color-background: var(--toggle-checked-base-color-background, var(--mod-toggle-checked-base-color-background, var(--ds-global-color-success-4)));
  --_toggle-checked-base-color-tick: var(--toggle-checked-base-color-tick, var(--mod-toggle-checked-base-color-tick, var(--ds-global-color-white)));
  --_toggle-checked-base-color-icon: var(--toggle-checked-base-color-icon, var(--mod-toggle-checked-base-color-icon, var(--ds-global-color-white)));
  --_toggle-checked-hover-color-background: var(--toggle-checked-hover-color-background, var(--mod-toggle-checked-hover-color-background, var(--ds-global-color-success-5)));
  --_toggle-checked-hover-color-tick: var(--toggle-checked-hover-color-tick, var(--mod-toggle-checked-hover-color-tick, var(--ds-global-color-white)));
  --_toggle-checked-active-color-background: var(--toggle-checked-active-color-background, var(--mod-toggle-checked-active-color-background, var(--ds-global-color-success-6)));
  --_toggle-checked-active-color-tick: var(--toggle-checked-active-color-tick, var(--mod-toggle-checked-active-color-tick, var(--ds-global-color-white)));
}

.toggle {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-user-drag: none; /* Chrome, Safari */
  user-drag: none; /* Non-standard, limited support */
  display: inline-flex;
  align-items: center;
  gap: var(--_toggle-gap);
  cursor: pointer;
  user-select: none;
  color: var(--_toggle-label-base-color);
  font-family: var(--ds-global-font-family-text);
  line-height: var(--ds-typography-line-height-base);
  padding-top: var(--_toggle-padding-y);
  padding-bottom: var(--_toggle-padding-y);
  min-height: var(--_toggle-min-height);
}
@media (hover: hover) and (pointer: fine) {
  .toggle:hover {
    color: var(--_toggle-label-hover-color);
  }
}
.toggle:active {
  color: var(--_toggle-label-active-color);
}

.toggle input[type=checkbox] {
  position: relative;
  justify-content: flex-start;
  align-items: center;
  padding: 4px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  flex: none;
  display: inline-flex;
  width: var(--_toggle-width);
  height: var(--_toggle-height);
  background: var(--_toggle-unchecked-base-color-background);
  border: var(--_toggle-border-width) solid var(--_toggle-unchecked-base-color-border);
  border-radius: var(--_toggle-radius);
  vertical-align: top;
  cursor: pointer;
}

.toggle input[type=checkbox]:disabled {
  cursor: default;
}

.toggle input[type=checkbox]:focus-visible {
  outline: var(--ds-alias-interaction-focus-width, 2px) solid var(--ds-alias-interaction-focus-color-base);
  outline-offset: 2px;
  border-radius: var(--_toggle-radius);
}

.toggle input[type=checkbox]:not(:disabled):hover,
.toggle:hover input[type=checkbox]:not(:disabled):not(:checked) {
  background: var(--_toggle-unchecked-hover-color-background);
}
.toggle input[type=checkbox]:not(:disabled):hover::before,
.toggle:hover input[type=checkbox]:not(:disabled):not(:checked)::before {
  background: var(--_toggle-unchecked-hover-color-tick);
}

.toggle input[type=checkbox]:not(:disabled):active,
.toggle:active input[type=checkbox]:not(:disabled):not(:checked) {
  background: var(--_toggle-unchecked-active-color-background);
}
.toggle input[type=checkbox]:not(:disabled):active::before,
.toggle:active input[type=checkbox]:not(:disabled):not(:checked)::before {
  background: var(--_toggle-unchecked-active-color-tick);
}

.toggle input[type=checkbox]:checked {
  background: var(--_toggle-checked-base-color-background);
}
.toggle input[type=checkbox]:checked::before {
  background: var(--_toggle-checked-base-color-tick);
}

.toggle input[type=checkbox]:checked:not(:disabled):hover,
.toggle:hover input[type=checkbox]:checked:not(:disabled) {
  background: var(--_toggle-checked-hover-color-background);
}
.toggle input[type=checkbox]:checked:not(:disabled):hover::before,
.toggle:hover input[type=checkbox]:checked:not(:disabled)::before {
  background: var(--_toggle-checked-hover-color-tick);
}

.toggle input[type=checkbox]:checked:not(:disabled):active,
.toggle:active input[type=checkbox]:checked:not(:disabled) {
  background: var(--_toggle-checked-active-color-background);
}
.toggle input[type=checkbox]:checked:not(:disabled):active::before,
.toggle:active input[type=checkbox]:checked:not(:disabled)::before {
  background: var(--_toggle-checked-active-color-tick);
}

.toggle input[type=checkbox]::before {
  display: block;
  content: "";
  width: 1rem;
  height: 1rem;
  background: var(--_toggle-unchecked-base-color-tick);
  border-radius: var(--_toggle-radius);
  transition: transform 0.3s ease-in-out;
  z-index: 1;
}

.toggle input[type=checkbox]:checked::before {
  transform: translateX(100%);
}

.toggle input[type=checkbox]::after {
  position: absolute;
  display: block;
  content: "";
  -webkit-mask-size: 100%;
          mask-size: 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  left: 5px;
  width: 12px;
  height: 12px;
  transition: opacity 0.3s ease-in-out;
  opacity: 0;
  z-index: 0;
}

.toggle input[type=checkbox]:checked::after {
  opacity: 1;
  background-color: var(--_toggle-checked-base-color-icon);
  -webkit-mask-image: url("data:image/svg+xml,<svg viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M13.637 1.19792C14.0627 1.54974 14.1227 2.18006 13.7708 2.60579L5.73084 12.335L5.72842 12.3379C5.54554 12.5575 5.31602 12.7336 5.05655 12.8534C4.79707 12.9731 4.51417 13.0336 4.22842 13.0302L4.22752 13.0302C3.93709 13.0266 3.65125 12.9573 3.39146 12.8274C3.13254 12.6979 2.9062 12.5117 2.72931 12.2826C2.72871 12.2818 2.72812 12.281 2.72752 12.2802L0.210633 9.04426C-0.128437 8.60831 -0.0499029 7.98003 0.386044 7.64096C0.821992 7.30189 1.45027 7.38043 1.78934 7.81638L4.25291 10.9838L12.2291 1.33176C12.5809 0.906034 13.2113 0.846112 13.637 1.19792Z'/></svg>");
          mask-image: url("data:image/svg+xml,<svg viewBox='0 0 14 14' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M13.637 1.19792C14.0627 1.54974 14.1227 2.18006 13.7708 2.60579L5.73084 12.335L5.72842 12.3379C5.54554 12.5575 5.31602 12.7336 5.05655 12.8534C4.79707 12.9731 4.51417 13.0336 4.22842 13.0302L4.22752 13.0302C3.93709 13.0266 3.65125 12.9573 3.39146 12.8274C3.13254 12.6979 2.9062 12.5117 2.72931 12.2826C2.72871 12.2818 2.72812 12.281 2.72752 12.2802L0.210633 9.04426C-0.128437 8.60831 -0.0499029 7.98003 0.386044 7.64096C0.821992 7.30189 1.45027 7.38043 1.78934 7.81638L4.25291 10.9838L12.2291 1.33176C12.5809 0.906034 13.2113 0.846112 13.637 1.19792Z'/></svg>");
}

.toggle.is-dense {
  --mod-toggle-min-height: 2rem;
  --mod-toggle-padding-y: 0;
}

.toggle.is-invalid:not(.is-disabled) {
  --mod-toggle-label-base-color: var(--ds-global-color-danger-4);
  --mod-toggle-label-hover-color: var(--ds-global-color-danger-5);
  --mod-toggle-label-active-color: var(--ds-global-color-danger-6);
  --mod-toggle-unchecked-base-color-background: var(--ds-global-color-danger-1);
  --mod-toggle-unchecked-base-color-tick: var(--ds-global-color-danger-4);
  --mod-toggle-unchecked-hover-color-background: var(--ds-global-color-danger-1);
  --mod-toggle-unchecked-hover-color-tick: var(--ds-global-color-danger-5);
  --mod-toggle-unchecked-active-color-background: var(--ds-global-color-danger-1);
  --mod-toggle-unchecked-active-color-tick: var(--ds-global-color-danger-6);
  --mod-toggle-checked-base-color-background: var(--ds-global-color-danger-4);
  --mod-toggle-checked-base-color-tick: var(--ds-global-color-white);
  --mod-toggle-checked-hover-color-background: var(--ds-global-color-danger-5);
  --mod-toggle-checked-hover-color-tick: var(--ds-global-color-white);
  --mod-toggle-checked-active-color-background: var(--ds-global-color-danger-6);
  --mod-toggle-checked-active-color-tick: var(--ds-global-color-white);
}

.toggle.is-disabled {
  cursor: default;
  pointer-events: none;
  --mod-toggle-label-base-color: var(--ds-global-color-grey-5);
  --mod-toggle-label-hover-color: var(--ds-global-color-grey-5);
  --mod-toggle-label-active-color: var(--ds-global-color-grey-5);
  --mod-toggle-unchecked-base-color-background: var(--ds-global-color-grey-3);
  --mod-toggle-unchecked-base-color-tick: var(--ds-global-color-grey-5);
  --mod-toggle-checked-base-color-background: var(--ds-global-color-grey-5);
  --mod-toggle-checked-base-color-tick: var(--ds-global-color-grey-3);
}
/**
 * Do not edit directly, this file was auto-generated.
 */

:root, :host {
  --ds-alias-interaction-focus-size-inner: 2;
  --ds-alias-interaction-focus-size-outer: 5;
  --ds-alias-interaction-focus-size-inner-inset: 3;
  --ds-alias-interaction-focus-size-outer-inset: 5;
  --ds-backdrop-filter: blur(4px);
  --ds-footer-space-gap-column: 0.5rem 1rem;
  --ds-footer-space-link-gap: 0.5rem 1.5rem;
  --ds-footer-space-padding-base: 2rem;
  --ds-heading-color-base: inherit;
  --ds-card-color-base-text: inherit;
  --ds-card-color-white-text: inherit;
  --ds-card-color-info-text: inherit;
  --ds-card-color-success-text: inherit;
  --ds-card-color-warning-text: inherit;
  --ds-card-color-danger-text: inherit;
  --ds-card-color-grey-light-text: inherit;
  --ds-card-color-grey-text: inherit;
  --ds-card-color-red-lighter-text: inherit;
  --ds-card-color-red-light-text: inherit;
  --ds-card-color-red-text: inherit;
  --ds-card-color-purple-lighter-text: inherit;
  --ds-card-color-purple-light-text: inherit;
  --ds-card-color-purple-text: inherit;
  --ds-card-color-green-lighter-text: inherit;
  --ds-card-color-green-light-text: inherit;
  --ds-card-color-green-text: inherit;
  --ds-card-color-yellow-lighter-text: inherit;
  --ds-card-color-yellow-light-text: inherit;
  --ds-card-color-yellow-text: inherit;
  --ds-close-color-background-hover: rgba(0, 7, 57, 0.1);
  --ds-close-color-background-active: rgba(0, 7, 57, 0.2);
  --ds-close-inverted-color-background-hover: rgba(255, 255, 255, 0.3);
  --ds-close-inverted-color-background-active: rgba(255, 255, 255, 0.5);
  --ds-notification-base-color-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M5.52 3.448C6.452 2.521 7.716 2 9.033 2s2.562 0.521 3.493 1.448C13.478 4.374 14.001 5.632 14.001 6.942v4.413c0 0.31 0.124 0.605 0.344 0.824 0.249 0.248 0.445 0.342 0.719 0.342 0.278 0 0.503 0.224 0.503 0.501 0 0.277-0.225 0.501-0.503 0.501H3.003c-0.278 0-0.503-0.224-0.503-0.501 0-0.277 0.225-0.501 0.503-0.501 0.275 0 0.47-0.094 0.719-0.342 0.219-0.219 0.344-0.514 0.344-0.824V6.942c0-1.311 0.523-2.569 1.456-3.494zM7.274 15.25c0-0.414 0.338-0.75 0.754-0.75h2.01c0.416 0 0.754 0.336 0.754 0.75s-0.338 0.75-0.754 0.75h-2.01c-0.416 0-0.754-0.336-0.754-0.75z" fill="black"/></svg>');
  --ds-notification-info-color-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M6.176 13.705c-0.65 0-1.176 0.514-1.176 1.147 0 0.635 0.526 1.149 1.176 1.149h2.824h2.824c0.65 0 1.176-0.514 1.176-1.149 0-0.633-0.526-1.147-1.176-1.147h-1.647V8.426c0-0.634-0.526-1.147-1.176-1.147H7.118C6.468 7.279 5.941 7.792 5.941 8.426c0 0.633 0.526 1.147 1.176 1.147h0.706v4.132H6.176zM10.882 3.836c0 1.014-0.843 1.836-1.882 1.836S7.118 4.85 7.118 3.836C7.118 2.822 7.96 2 9 2s1.882 0.822 1.882 1.836z" fill="black"/></svg>');
  --ds-notification-success-color-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M15.637 3.247c0.426 0.379 0.486 1.059 0.134 1.518L7.73 15.251l-0.002 0.003c-0.183 0.237-0.413 0.426-0.672 0.555-0.26 0.13-0.543 0.195-0.829 0.191-0.291-0.004-0.577-0.08-0.837-0.219-0.259-0.14-0.485-0.341-0.662-0.588l-2.517-3.488c-0.339-0.47-0.261-1.147 0.175-1.512 0.436-0.365 1.064-0.28 1.403 0.19l2.463 3.414 7.976-10.403c0.352-0.459 0.982-0.524 1.408-0.144z" fill="black"/></svg>');
  --ds-notification-warning-color-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M9.333 2c0.805 0 1.458 0.514 1.458 1.148v5.508c0 0.634-0.653 1.148-1.458 1.148s-1.458-0.514-1.458-1.148V3.148C7.875 2.514 8.528 2 9.333 2zM9.333 16c1.289 0 2.334-0.822 2.334-1.836s-1.045-1.836-2.334-1.836S7 13.15 7 14.164 8.044 16 9.333 16z" fill="black"/></svg>');
  --ds-notification-danger-color-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M9.333 2c0.805 0 1.458 0.514 1.458 1.148v5.508c0 0.634-0.653 1.148-1.458 1.148s-1.458-0.514-1.458-1.148V3.148C7.875 2.514 8.528 2 9.333 2zM9.333 16c1.289 0 2.334-0.822 2.334-1.836s-1.045-1.836-2.334-1.836S7 13.15 7 14.164 8.044 16 9.333 16z" fill="black"/></svg>');
  --ds-notification-outline-base-color-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M5.52 3.448C6.452 2.521 7.716 2 9.033 2s2.562 0.521 3.493 1.448C13.478 4.374 14.001 5.632 14.001 6.942v4.413c0 0.31 0.124 0.605 0.344 0.824 0.249 0.248 0.445 0.342 0.719 0.342 0.278 0 0.503 0.224 0.503 0.501 0 0.277-0.225 0.501-0.503 0.501H3.003c-0.278 0-0.503-0.224-0.503-0.501 0-0.277 0.225-0.501 0.503-0.501 0.275 0 0.47-0.094 0.719-0.342 0.219-0.219 0.344-0.514 0.344-0.824V6.942c0-1.311 0.523-2.569 1.456-3.494zM7.274 15.25c0-0.414 0.338-0.75 0.754-0.75h2.01c0.416 0 0.754 0.336 0.754 0.75s-0.338 0.75-0.754 0.75h-2.01c-0.416 0-0.754-0.336-0.754-0.75z" fill="black"/></svg>');
  --ds-notification-outline-purple-color-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M6.176 13.705c-0.65 0-1.176 0.514-1.176 1.147 0 0.635 0.526 1.149 1.176 1.149h2.824h2.824c0.65 0 1.176-0.514 1.176-1.149 0-0.633-0.526-1.147-1.176-1.147h-1.647V8.426c0-0.634-0.526-1.147-1.176-1.147H7.118C6.468 7.279 5.941 7.792 5.941 8.426c0 0.633 0.526 1.147 1.176 1.147h0.706v4.132H6.176zM10.882 3.836c0 1.014-0.843 1.836-1.882 1.836S7.118 4.85 7.118 3.836C7.118 2.822 7.96 2 9 2s1.882 0.822 1.882 1.836z" fill="black"/></svg>');
  --ds-notification-outline-green-color-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M15.637 3.247c0.426 0.379 0.486 1.059 0.134 1.518L7.73 15.251l-0.002 0.003c-0.183 0.237-0.413 0.426-0.672 0.555-0.26 0.13-0.543 0.195-0.829 0.191-0.291-0.004-0.577-0.08-0.837-0.219-0.259-0.14-0.485-0.341-0.662-0.588l-2.517-3.488c-0.339-0.47-0.261-1.147 0.175-1.512 0.436-0.365 1.064-0.28 1.403 0.19l2.463 3.414 7.976-10.403c0.352-0.459 0.982-0.524 1.408-0.144z" fill="black"/></svg>');
  --ds-notification-outline-yellow-color-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M9.333 2c0.805 0 1.458 0.514 1.458 1.148v5.508c0 0.634-0.653 1.148-1.458 1.148s-1.458-0.514-1.458-1.148V3.148C7.875 2.514 8.528 2 9.333 2zM9.333 16c1.289 0 2.334-0.822 2.334-1.836s-1.045-1.836-2.334-1.836S7 13.15 7 14.164 8.044 16 9.333 16z" fill="black"/></svg>');
  --ds-notification-outline-red-color-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M9.333 2c0.805 0 1.458 0.514 1.458 1.148v5.508c0 0.634-0.653 1.148-1.458 1.148s-1.458-0.514-1.458-1.148V3.148C7.875 2.514 8.528 2 9.333 2zM9.333 16c1.289 0 2.334-0.822 2.334-1.836s-1.045-1.836-2.334-1.836S7 13.15 7 14.164 8.044 16 9.333 16z" fill="black"/></svg>');
  --ds-link-family: inherit;
  --ds-navbar-base-layout-height: 5rem;
  --ds-navbar-base-hamburger-transition-duration: 0.2s;
  --ds-navbar-base-sidebar-max-width: 25rem;
  --ds-navbar-base-sidebar-slide-duration: 300ms;
  --ds-navbar-base-sidebar-backdrop-color: #000000;
  --ds-navbar-base-sidebar-panel-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
  --ds-navbar-base-menu-item-transition-duration: 0.2s;
  --ds-segment-item-icon-gap: 0.375rem;
  --ds-accordion-summary-color-base: inherit;
  --ds-tabs-panel-padding: 1rem 0;
  --ds-tabs-tab-padding: 0.25rem 1rem;
  --ds-tab-panel-padding: 1rem 0;
  --ds-steps-circle-size: 2rem;
  --ds-steps-circle-size-sm: 1.5rem;
  --ds-steps-panel-padding: 1rem 0;
  --ds-step-panel-padding: 1rem 0;
  --ds-carousel-dot-size: 8px;
  --ds-carousel-dot-size-active: 10px;
  --ds-table-cell-padding: 0.5em 0.75em;
  --ds-table-cell-border-width: 0 0 2px;
  --ds-table-head-cell-border-width: 0 0 1px;
  --ds-table-foot-cell-border-width: 0 0 0;
  --ds-popup-min-width: 16rem;
  --ds-drawer-max-height: 85dvh;
  --ds-global-size-border-0: 0rem;
  --ds-global-size-border-1: 0.0625rem;
  --ds-global-size-border-2: 0.125rem;
  --ds-global-size-border-3: 0.25rem;
  --ds-global-size-radius-0: 0rem;
  --ds-global-size-radius-1: 0.25rem;
  --ds-global-size-radius-2: 0.75rem;
  --ds-global-size-radius-3: 9999px;
  --ds-global-size-breakpoint-1: 769px;
  --ds-global-size-breakpoint-2: 1024px;
  --ds-global-size-breakpoint-3: 1280px;
  --ds-global-size-breakpoint-4: 1440px;
  --ds-global-size-breakpoint-5: 1920px;
  --ds-global-size-container-1: 320px;
  --ds-global-size-container-2: 480px;
  --ds-global-size-container-3: 640px;
  --ds-global-size-container-4: 896px;
  --ds-global-size-container-5: 1496px;
  --ds-global-size-container-full: 100%;
  --ds-global-size-space-0: 0rem;
  --ds-global-size-space-1: 0.0625rem;
  --ds-global-size-space-2: 0.125rem;
  --ds-global-size-space-4: 0.25rem;
  --ds-global-size-space-8: 0.5rem;
  --ds-global-size-space-12: 0.75rem;
  --ds-global-size-space-14: 0.875rem;
  --ds-global-size-space-16: 1rem;
  --ds-global-size-space-20: 1.25rem;
  --ds-global-size-space-24: 1.5rem;
  --ds-global-size-space-32: 2rem;
  --ds-global-size-space-40: 2.5rem;
  --ds-global-size-space-48: 3rem;
  --ds-global-size-space-56: 3.5rem;
  --ds-global-size-space-64: 4rem;
  --ds-global-size-space-72: 4.5rem;
  --ds-global-size-space-96: 6rem;
  --ds-global-size-space-128: 8rem;
  --ds-global-size-space-auto: auto;
  --ds-global-color-white: #ffffff;
  --ds-global-color-black: #000000;
  --ds-global-color-neutral: rgba(255, 255, 255, 0);
  --ds-global-color-danger-1: #fce8e6;
  --ds-global-color-danger-2: #f7a299;
  --ds-global-color-danger-3: #f05d4d;
  --ds-global-color-danger-4: #ea1800;
  --ds-global-color-danger-5: #cb1501;
  --ds-global-color-danger-6: #a01100;
  --ds-global-color-warning-1: #fff9e8;
  --ds-global-color-warning-2: #ffe5a3;
  --ds-global-color-warning-3: #ffd25e;
  --ds-global-color-warning-4: #ffbe19;
  --ds-global-color-warning-5: #f99319;
  --ds-global-color-warning-6: #c97612;
  --ds-global-color-success-1: #e8f3ec;
  --ds-global-color-success-2: #a1cfb3;
  --ds-global-color-success-3: #5bab7a;
  --ds-global-color-success-4: #168741;
  --ds-global-color-success-5: #116b34;
  --ds-global-color-success-6: #0b5227;
  --ds-global-color-info-1: #e8f1fb;
  --ds-global-color-info-2: #a4c9ed;
  --ds-global-color-info-3: #60a0e0;
  --ds-global-color-info-4: #1c77d2;
  --ds-global-color-info-5: #155ba3;
  --ds-global-color-info-6: #0e457b;
  --ds-global-color-sky-1: #e5f1fe;
  --ds-global-color-sky-2: #a7d1fa;
  --ds-global-color-sky-3: #56a7f5;
  --ds-global-color-sky-4: #6672cc;
  --ds-global-color-sky-5: #0014aa;
  --ds-global-color-sky-6: #000a55;
  --ds-global-color-grey-0: #fafafa;
  --ds-global-color-grey-1: #f0f0f0;
  --ds-global-color-grey-2: #e0e0e0;
  --ds-global-color-grey-3: #d0d0d0;
  --ds-global-color-grey-4: #b6b6b6;
  --ds-global-color-grey-5: #747474;
  --ds-global-color-grey-6: #313131;
  --ds-global-color-yellow-1: #fff9e8;
  --ds-global-color-yellow-2: #ffecbc;
  --ds-global-color-yellow-3: #fae052;
  --ds-global-color-yellow-4: #ffbe19;
  --ds-global-color-yellow-5: #fa9319;
  --ds-global-color-yellow-6: #b24a00;
  --ds-global-color-red-1: #ffeef1;
  --ds-global-color-red-2: #ffd7d7;
  --ds-global-color-red-3: #ffaca6;
  --ds-global-color-red-4: #ff596f;
  --ds-global-color-red-5: #d9304c;
  --ds-global-color-red-6: #99172d;
  --ds-global-color-green-1: #e9fbf7;
  --ds-global-color-green-2: #cbf2ec;
  --ds-global-color-green-3: #94e3d4;
  --ds-global-color-green-4: #21d9ac;
  --ds-global-color-green-5: #00b28f;
  --ds-global-color-green-6: #1b5951;
  --ds-global-color-purple-1: #f9f3ff;
  --ds-global-color-purple-2: #e1d9ff;
  --ds-global-color-purple-3: #b8b2ff;
  --ds-global-color-purple-4: #be82fa;
  --ds-global-color-purple-5: #9f52cc;
  --ds-global-color-purple-6: #6c2273;
  --ds-global-color-primary-1: #e5e7f0;
  --ds-global-color-primary-2: #b3b6d4;
  --ds-global-color-primary-3: #656ea8;
  --ds-global-color-primary-4: #293485;
  --ds-global-color-primary-5: #000d6e;
  --ds-global-color-primary-6: #000739;
  --ds-global-font-shadow-0: none;
  --ds-global-font-shadow-1: 0px 0px 4px rgba(0, 0, 0, 0.15), 0px 4px 12px rgba(0, 0, 0, 0.25), 0px 0px 80px rgba(0, 0, 0, 0.5);
  --ds-global-font-size-0: 0rem;
  --ds-global-font-size-12: 0.75rem;
  --ds-global-font-size-14: 0.875rem;
  --ds-global-font-size-16: 1rem;
  --ds-global-font-size-18: 1.125rem;
  --ds-global-font-size-20: 1.25rem;
  --ds-global-font-size-24: 1.5rem;
  --ds-global-font-size-28: 1.75rem;
  --ds-global-font-size-32: 2rem;
  --ds-global-font-size-40: 2.5rem;
  --ds-global-font-size-48: 3rem;
  --ds-global-font-size-80: 5rem;
  --ds-global-font-size-176: 11rem;
  --ds-global-font-family-heading: "BaloiseCreateHeadline", "Arial", "sans-serif";
  --ds-global-font-family-body: "BaloiseCreateText", "Arial", "sans-serif";
  --ds-global-font-weight-300: 300;
  --ds-global-font-weight-400: 400;
  --ds-global-font-weight-700: 700;
  --ds-global-font-line-height-1: 1;
  --ds-global-font-line-height-2: 1.3;
  --ds-global-font-line-height-3: 1.5;
  --ds-global-font-line-height-4: 2;
  --ds-global-elevation-shadow-0: none;
  --ds-global-elevation-shadow-1: 0 2px 5px 1px rgba(0, 7, 57, 0.12);
  --ds-global-elevation-shadow-2: 0 4px 4px 0 rgba(0, 7, 57, 0.15);
  --ds-global-elevation-shadow-3: 0 0 10px 0 rgba(0, 7, 57, 0.15);
  --ds-global-elevation-shadow-4: 0 0 30px 0 rgba(0, 7, 57, 0.15);
  --ds-global-elevation-z-index-100: 100;
  --ds-global-elevation-z-index-200: 200;
  --ds-global-elevation-z-index-300: 300;
  --ds-global-elevation-z-index-400: 400;
  --ds-global-elevation-z-index-1000: 1000;
  --ds-global-elevation-z-index-1100: 1100;
  --ds-global-elevation-z-index-1200: 1200;
  --ds-global-elevation-z-index-1300: 1300;
  --ds-global-elevation-z-index-behind-all: -999999;
  --ds-global-elevation-opacity-0: 0;
  --ds-global-elevation-opacity-30: 0.3;
  --ds-global-elevation-opacity-40: 0.4;
  --ds-global-elevation-opacity-50: 0.5;
  --ds-global-elevation-opacity-60: 0.6;
  --ds-global-elevation-opacity-80: 0.8;
  --ds-global-elevation-opacity-100: 1;
  --ds-alias-background-color-white: var(--ds-global-color-white);
  --ds-alias-background-color-selected: var(--ds-global-color-primary-2);
  --ds-alias-background-color-hover: var(--ds-global-color-grey-0);
  --ds-alias-background-color-highlight: var(--ds-global-color-primary-1);
  --ds-alias-background-color-disabled: var(--ds-global-color-grey-2);
  --ds-alias-background-color-transparent: var(--ds-global-color-neutral);
  --ds-alias-background-color-sky-light: var(--ds-global-color-sky-1);
  --ds-alias-background-color-sky: var(--ds-global-color-sky-2);
  --ds-alias-background-color-sky-dark: var(--ds-global-color-sky-3);
  --ds-alias-background-color-info: var(--ds-global-color-info-3);
  --ds-alias-background-color-info-light: var(--ds-global-color-info-2);
  --ds-alias-background-color-info-dark: var(--ds-global-color-info-4);
  --ds-alias-background-color-info-darker: var(--ds-global-color-info-5);
  --ds-alias-background-color-info-darkest: var(--ds-global-color-info-6);
  --ds-alias-background-color-success: var(--ds-global-color-success-3);
  --ds-alias-background-color-success-lighter: var(--ds-global-color-success-1);
  --ds-alias-background-color-success-light: var(--ds-global-color-success-2);
  --ds-alias-background-color-success-dark: var(--ds-global-color-success-4);
  --ds-alias-background-color-success-darker: var(--ds-global-color-success-5);
  --ds-alias-background-color-success-darkest: var(--ds-global-color-success-6);
  --ds-alias-background-color-warning-lighter: var(--ds-global-color-warning-1);
  --ds-alias-background-color-warning-light: var(--ds-global-color-warning-2);
  --ds-alias-background-color-warning: var(--ds-global-color-warning-3);
  --ds-alias-background-color-warning-dark: var(--ds-global-color-warning-4);
  --ds-alias-background-color-warning-darker: var(--ds-global-color-warning-5);
  --ds-alias-background-color-warning-darkest: var(--ds-global-color-warning-6);
  --ds-alias-background-color-danger-lighter: var(--ds-global-color-danger-1);
  --ds-alias-background-color-danger-light: var(--ds-global-color-danger-2);
  --ds-alias-background-color-danger: var(--ds-global-color-danger-3);
  --ds-alias-background-color-danger-dark: var(--ds-global-color-danger-4);
  --ds-alias-background-color-danger-darker: var(--ds-global-color-danger-5);
  --ds-alias-background-color-danger-darkest: var(--ds-global-color-danger-6);
  --ds-alias-background-color-grey-lighter: var(--ds-global-color-grey-0);
  --ds-alias-background-color-grey-light: var(--ds-global-color-grey-1);
  --ds-alias-background-color-grey: var(--ds-global-color-grey-2);
  --ds-alias-background-color-grey-dark: var(--ds-global-color-grey-3);
  --ds-alias-background-color-grey-darker: var(--ds-global-color-grey-4);
  --ds-alias-background-color-primary-lighter: var(--ds-global-color-primary-1);
  --ds-alias-background-color-primary-light: var(--ds-global-color-primary-3);
  --ds-alias-background-color-primary: var(--ds-global-color-primary-5);
  --ds-alias-background-color-primary-hover: var(--ds-global-color-sky-5);
  --ds-alias-background-color-primary-active: var(--ds-global-color-primary-6);
  --ds-alias-background-color-primary-dark: var(--ds-global-color-primary-4);
  --ds-alias-background-color-green-lighter: var(--ds-global-color-green-1);
  --ds-alias-background-color-green-light: var(--ds-global-color-green-2);
  --ds-alias-background-color-green: var(--ds-global-color-green-3);
  --ds-alias-background-color-purple-lighter: var(--ds-global-color-purple-1);
  --ds-alias-background-color-purple-light: var(--ds-global-color-purple-2);
  --ds-alias-background-color-purple: var(--ds-global-color-purple-3);
  --ds-alias-background-color-red-lighter: var(--ds-global-color-red-1);
  --ds-alias-background-color-red-light: var(--ds-global-color-red-2);
  --ds-alias-background-color-red: var(--ds-global-color-red-3);
  --ds-alias-background-color-yellow-lighter: var(--ds-global-color-yellow-1);
  --ds-alias-background-color-yellow-light: var(--ds-global-color-yellow-2);
  --ds-alias-background-color-yellow: var(--ds-global-color-yellow-3);
  --ds-alias-border-color-white: var(--ds-global-color-white);
  --ds-alias-border-color-base: var(--ds-global-color-grey-3);
  --ds-alias-border-color-inverted: var(--ds-global-color-white);
  --ds-alias-border-color-disabled: var(--ds-global-color-grey-3);
  --ds-alias-border-color-disabled-inverted: var(--ds-global-color-primary-3);
  --ds-alias-border-color-grey-light: var(--ds-global-color-grey-2);
  --ds-alias-border-color-grey: var(--ds-global-color-grey-3);
  --ds-alias-border-color-grey-dark: var(--ds-global-color-grey-4);
  --ds-alias-border-color-primary-light: var(--ds-global-color-primary-3);
  --ds-alias-border-color-primary: var(--ds-global-color-primary-5);
  --ds-alias-border-color-primary-hover: var(--ds-global-color-sky-5);
  --ds-alias-border-color-primary-active: var(--ds-global-color-primary-6);
  --ds-alias-border-color-inverted-primary: var(--ds-global-color-primary-4);
  --ds-alias-border-color-inverted-primary-hover: var(--ds-global-color-sky-2);
  --ds-alias-border-color-inverted-primary-active: var(--ds-global-color-sky-4);
  --ds-alias-border-color-info: var(--ds-global-color-info-4);
  --ds-alias-border-color-info-hover: var(--ds-global-color-info-5);
  --ds-alias-border-color-info-active: var(--ds-global-color-info-6);
  --ds-alias-border-color-success: var(--ds-global-color-success-4);
  --ds-alias-border-color-success-hover: var(--ds-global-color-success-5);
  --ds-alias-border-color-success-active: var(--ds-global-color-success-6);
  --ds-alias-border-color-warning: var(--ds-global-color-warning-4);
  --ds-alias-border-color-warning-hover: var(--ds-global-color-warning-5);
  --ds-alias-border-color-warning-active: var(--ds-global-color-warning-6);
  --ds-alias-border-color-danger: var(--ds-global-color-danger-4);
  --ds-alias-border-color-danger-hover: var(--ds-global-color-danger-5);
  --ds-alias-border-color-danger-active: var(--ds-global-color-danger-6);
  --ds-alias-border-color-green: var(--ds-global-color-green-4);
  --ds-alias-border-color-green-hover: var(--ds-global-color-green-5);
  --ds-alias-border-color-green-active: var(--ds-global-color-green-6);
  --ds-alias-border-color-purple: var(--ds-global-color-purple-4);
  --ds-alias-border-color-purple-hover: var(--ds-global-color-purple-5);
  --ds-alias-border-color-purple-active: var(--ds-global-color-purple-6);
  --ds-alias-border-color-red: var(--ds-global-color-red-4);
  --ds-alias-border-color-red-hover: var(--ds-global-color-red-5);
  --ds-alias-border-color-red-active: var(--ds-global-color-red-6);
  --ds-alias-border-color-yellow: var(--ds-global-color-yellow-4);
  --ds-alias-border-color-yellow-hover: var(--ds-global-color-yellow-5);
  --ds-alias-border-color-yellow-active: var(--ds-global-color-yellow-6);
  --ds-alias-border-width-none: var(--ds-global-size-border-0);
  --ds-alias-border-width-base: var(--ds-global-size-border-2);
  --ds-alias-border-width-md: var(--ds-global-size-border-3);
  --ds-alias-breakpoint-tablet: var(--ds-global-size-breakpoint-1);
  --ds-alias-breakpoint-desktop: var(--ds-global-size-breakpoint-2);
  --ds-alias-breakpoint-desktop-lg: var(--ds-global-size-breakpoint-3); /** HighDefinition */
  --ds-alias-breakpoint-desktop-xl: var(--ds-global-size-breakpoint-4); /** Widescreen */
  --ds-alias-breakpoint-desktop-2xl: var(--ds-global-size-breakpoint-5); /** FullHD */
  --ds-alias-container-space-mobile: var(--ds-global-size-space-16);
  --ds-alias-container-space-tablet: var(--ds-global-size-space-40);
  --ds-alias-container-space-desktop: var(--ds-global-size-space-48);
  --ds-alias-container-width-modal: var(--ds-global-size-container-3);
  --ds-alias-container-width-compact: var(--ds-global-size-container-4);
  --ds-alias-container-width-base: var(--ds-global-size-container-5);
  --ds-alias-container-width-fluid: var(--ds-global-size-container-full);
  --ds-alias-interaction-focus-color-base: var(--ds-global-color-purple-6);
  --ds-alias-interaction-focus-color-inverted: var(--ds-global-color-yellow-3);
  --ds-alias-opacity-hidden: var(--ds-global-elevation-opacity-0);
  --ds-alias-opacity-half: var(--ds-global-elevation-opacity-50);
  --ds-alias-opacity-disabled: var(--ds-global-elevation-opacity-60);
  --ds-alias-opacity-backdrop: var(--ds-global-elevation-opacity-80);
  --ds-alias-opacity-full: var(--ds-global-elevation-opacity-100);
  --ds-alias-radius-none: var(--ds-global-size-radius-0);
  --ds-alias-radius-base: var(--ds-global-size-radius-1);
  --ds-alias-radius-lg: var(--ds-global-size-radius-2);
  --ds-alias-radius-rounded: var(--ds-global-size-radius-3);
  --ds-alias-space-none-mobile: var(--ds-global-size-space-0);
  --ds-alias-space-none-tablet: var(--ds-global-size-space-0);
  --ds-alias-space-none-desktop: var(--ds-global-size-space-0);
  --ds-alias-space-auto-mobile: var(--ds-global-size-space-auto);
  --ds-alias-space-auto-tablet: var(--ds-global-size-space-auto);
  --ds-alias-space-auto-desktop: var(--ds-global-size-space-auto);
  --ds-alias-space-2xs-mobile: var(--ds-global-size-space-4);
  --ds-alias-space-2xs-tablet: var(--ds-global-size-space-4);
  --ds-alias-space-2xs-desktop: var(--ds-global-size-space-4);
  --ds-alias-space-xs-mobile: var(--ds-global-size-space-8);
  --ds-alias-space-xs-tablet: var(--ds-global-size-space-8);
  --ds-alias-space-xs-desktop: var(--ds-global-size-space-8);
  --ds-alias-space-sm-mobile: var(--ds-global-size-space-12);
  --ds-alias-space-sm-tablet: var(--ds-global-size-space-12);
  --ds-alias-space-sm-desktop: var(--ds-global-size-space-12);
  --ds-alias-space-base-mobile: var(--ds-global-size-space-16);
  --ds-alias-space-base-tablet: var(--ds-global-size-space-16);
  --ds-alias-space-base-desktop: var(--ds-global-size-space-16);
  --ds-alias-space-md-mobile: var(--ds-global-size-space-20);
  --ds-alias-space-md-tablet: var(--ds-global-size-space-20);
  --ds-alias-space-md-desktop: var(--ds-global-size-space-24);
  --ds-alias-space-lg-mobile: var(--ds-global-size-space-24);
  --ds-alias-space-lg-tablet: var(--ds-global-size-space-24);
  --ds-alias-space-lg-desktop: var(--ds-global-size-space-32);
  --ds-alias-space-xl-mobile: var(--ds-global-size-space-32);
  --ds-alias-space-xl-tablet: var(--ds-global-size-space-40);
  --ds-alias-space-xl-desktop: var(--ds-global-size-space-48);
  --ds-alias-space-2xl-mobile: var(--ds-global-size-space-48);
  --ds-alias-space-2xl-tablet: var(--ds-global-size-space-56);
  --ds-alias-space-2xl-desktop: var(--ds-global-size-space-64);
  --ds-alias-space-3xl-mobile: var(--ds-global-size-space-56);
  --ds-alias-space-3xl-tablet: var(--ds-global-size-space-72);
  --ds-alias-space-3xl-desktop: var(--ds-global-size-space-96);
  --ds-alias-space-4xl-mobile: var(--ds-global-size-space-64);
  --ds-alias-space-4xl-tablet: var(--ds-global-size-space-96);
  --ds-alias-space-4xl-desktop: var(--ds-global-size-space-128);
  --ds-alias-text-shadow: var(--ds-global-font-shadow-1);
  --ds-alias-text-size-none-mobile: var(--ds-global-font-size-0);
  --ds-alias-text-size-none-tablet: var(--ds-global-font-size-0);
  --ds-alias-text-size-none-desktop: var(--ds-global-font-size-0);
  --ds-alias-text-size-xs-mobile: var(--ds-global-font-size-12);
  --ds-alias-text-size-xs-tablet: var(--ds-global-font-size-12);
  --ds-alias-text-size-xs-desktop: var(--ds-global-font-size-12);
  --ds-alias-text-size-sm-mobile: var(--ds-global-font-size-14);
  --ds-alias-text-size-sm-tablet: var(--ds-global-font-size-14);
  --ds-alias-text-size-sm-desktop: var(--ds-global-font-size-14);
  --ds-alias-text-size-base-mobile: var(--ds-global-font-size-16);
  --ds-alias-text-size-base-tablet: var(--ds-global-font-size-16);
  --ds-alias-text-size-base-desktop: var(--ds-global-font-size-16);
  --ds-alias-text-size-md-mobile: var(--ds-global-font-size-16);
  --ds-alias-text-size-md-tablet: var(--ds-global-font-size-18);
  --ds-alias-text-size-md-desktop: var(--ds-global-font-size-18);
  --ds-alias-text-size-lg-mobile: var(--ds-global-font-size-18);
  --ds-alias-text-size-lg-tablet: var(--ds-global-font-size-18);
  --ds-alias-text-size-lg-desktop: var(--ds-global-font-size-18);
  --ds-alias-text-size-xl-mobile: var(--ds-global-font-size-20);
  --ds-alias-text-size-xl-tablet: var(--ds-global-font-size-24);
  --ds-alias-text-size-xl-desktop: var(--ds-global-font-size-24);
  --ds-alias-text-size-2xl-mobile: var(--ds-global-font-size-24);
  --ds-alias-text-size-2xl-tablet: var(--ds-global-font-size-32);
  --ds-alias-text-size-2xl-desktop: var(--ds-global-font-size-32);
  --ds-alias-text-size-3xl-mobile: var(--ds-global-font-size-28);
  --ds-alias-text-size-3xl-tablet: var(--ds-global-font-size-40);
  --ds-alias-text-size-3xl-desktop: var(--ds-global-font-size-40);
  --ds-alias-text-size-4xl-mobile: var(--ds-global-font-size-32);
  --ds-alias-text-size-4xl-tablet: var(--ds-global-font-size-48);
  --ds-alias-text-size-4xl-desktop: var(--ds-global-font-size-48);
  --ds-alias-text-size-5xl-mobile: var(--ds-global-font-size-48);
  --ds-alias-text-size-5xl-tablet: var(--ds-global-font-size-80);
  --ds-alias-text-size-5xl-desktop: var(--ds-global-font-size-80);
  --ds-alias-text-family-heading: var(--ds-global-font-family-heading);
  --ds-alias-text-family-body: var(--ds-global-font-family-body);
  --ds-alias-text-line-height-single: var(--ds-global-font-line-height-1);
  --ds-alias-text-line-height-heading: var(--ds-global-font-line-height-2);
  --ds-alias-text-line-height-body: var(--ds-global-font-line-height-3);
  --ds-alias-text-line-height-double: var(--ds-global-font-line-height-4);
  --ds-alias-text-weight-light: var(--ds-global-font-weight-300);
  --ds-alias-text-weight-regular: var(--ds-global-font-weight-400);
  --ds-alias-text-weight-bold: var(--ds-global-font-weight-700);
  --ds-alias-text-color-white: var(--ds-global-color-white);
  --ds-alias-text-color-primary-light: var(--ds-global-color-primary-3);
  --ds-alias-text-color-placeholder: var(--ds-global-color-primary-2);
  --ds-alias-text-color-disabled: var(--ds-global-color-grey-5);
  --ds-alias-text-color-info: var(--ds-global-color-info-4);
  --ds-alias-text-color-warning: var(--ds-global-color-yellow-6);
  --ds-alias-text-color-success: var(--ds-global-color-success-4);
  --ds-alias-text-color-danger: var(--ds-global-color-danger-4);
  --ds-alias-text-color-danger-hover: var(--ds-global-color-danger-5);
  --ds-alias-text-color-danger-active: var(--ds-global-color-danger-6);
  --ds-alias-text-color-primary: var(--ds-global-color-primary-5);
  --ds-alias-text-color-primary-hover: var(--ds-global-color-sky-5);
  --ds-alias-text-color-primary-active: var(--ds-global-color-primary-6);
  --ds-alias-text-color-inverted-primary-hover: var(--ds-global-color-sky-2);
  --ds-alias-text-color-inverted-primary-active: var(--ds-global-color-info-3);
  --ds-alias-text-color-grey-light: var(--ds-global-color-grey-4);
  --ds-alias-text-color-grey: var(--ds-global-color-grey-5);
  --ds-alias-text-color-grey-dark: var(--ds-global-color-grey-6);
  --ds-alias-text-color-sky-dark: var(--ds-global-color-sky-3);
  --ds-alias-shadow-text: var(--ds-global-font-shadow-1);
  --ds-alias-shadow-box-none: var(--ds-global-elevation-shadow-0);
  --ds-alias-shadow-box-header: var(--ds-global-elevation-shadow-2);
  --ds-alias-shadow-box-base: var(--ds-global-elevation-shadow-3);
  --ds-alias-shadow-box-elevated: var(--ds-global-elevation-shadow-4);
  --ds-alias-z-index-deep: var(--ds-global-elevation-z-index-behind-all);
  --ds-alias-z-index-masked: var(--ds-global-elevation-z-index-100);
  --ds-alias-z-index-mask: var(--ds-global-elevation-z-index-200);
  --ds-alias-z-index-sticky: var(--ds-global-elevation-z-index-300);
  --ds-alias-z-index-navigation: var(--ds-global-elevation-z-index-400);
  --ds-alias-z-index-popup: var(--ds-global-elevation-z-index-1000);
  --ds-alias-z-index-modal: var(--ds-global-elevation-z-index-1100);
  --ds-alias-z-index-toast: var(--ds-global-elevation-z-index-1200);
  --ds-alias-z-index-tooltip: var(--ds-global-elevation-z-index-1300);
  --ds-heading-shadow: var(--ds-global-font-shadow-1);
  --ds-icon-tile-size-base-mobile: var(--ds-global-size-space-32);
  --ds-icon-tile-size-base-tablet: var(--ds-global-size-space-48);
  --ds-icon-tile-size-lg-mobile: var(--ds-global-size-space-48);
  --ds-icon-tile-size-lg-tablet: var(--ds-global-size-space-64);
  --ds-icon-tile-size-xl-mobile: var(--ds-global-size-space-64);
  --ds-icon-tile-size-xl-tablet: var(--ds-global-size-space-96);
  --ds-icon-size-xs: var(--ds-global-font-size-12);
  --ds-icon-size-sm: var(--ds-global-font-size-14);
  --ds-icon-size-base: var(--ds-global-font-size-16);
  --ds-icon-size-md: var(--ds-global-font-size-24);
  --ds-icon-size-lg: var(--ds-global-font-size-32);
  --ds-icon-size-xl: var(--ds-global-font-size-40);
  --ds-icon-size-2xl: var(--ds-global-font-size-80);
  --ds-icon-size-3xl: var(--ds-global-font-size-176);
  --ds-form-control-color-placeholder-success: var(--ds-global-color-success-2);
  --ds-form-control-color-placeholder-warning: var(--ds-global-color-warning-4);
  --ds-form-control-color-placeholder-danger: var(--ds-global-color-danger-2);
  --ds-notification-outline-base-color-border: var(--ds-global-color-primary-2);
  --ds-modal-backdrop-filter: var(--ds-backdrop-filter);
  --ds-navbar-base-layout-padding: var(--ds-global-size-space-16);
  --ds-navbar-base-brand-gap: var(--ds-global-size-space-8);
  --ds-navbar-base-hamburger-padding: var(--ds-global-size-space-8);
  --ds-navbar-base-hamburger-width: var(--ds-global-size-space-48);
  --ds-navbar-base-hamburger-height: var(--ds-global-size-space-48);
  --ds-navbar-base-sidebar-panel-border-top: 1px solid var(--ds-global-color-white);
  --ds-navbar-base-sidebar-content-gap: var(--ds-global-size-space-16);
  --ds-navbar-base-sidebar-content-padding-inline: var(--ds-global-size-space-24);
  --ds-navbar-base-sidebar-content-padding-block: var(--ds-global-size-space-24);
  --ds-navbar-base-sidebar-item-min-height: var(--ds-global-size-space-48);
  --ds-navbar-base-sidebar-item-padding-block: var(--ds-global-size-space-12);
  --ds-navbar-base-sidebar-item-padding-inline: var(--ds-global-size-space-8);
  --ds-navbar-base-sidebar-item-chevron-color: var(--ds-global-color-primary-5);
  --ds-navbar-base-sidebar-item-chevron-size: var(--ds-global-size-space-16);
  --ds-navbar-base-menu-gap: var(--ds-global-size-space-32);
  --ds-navbar-base-menu-start-gap: var(--ds-global-size-space-2);
  --ds-navbar-base-menu-end-gap: var(--ds-global-size-space-8);
  --ds-navbar-base-menu-item-padding-block: var(--ds-global-size-space-8);
  --ds-navbar-base-menu-item-padding-inline: var(--ds-global-size-space-16);
  --ds-navbar-base-container-gap: var(--ds-global-size-space-32);
  --ds-navbar-base-content-gap: var(--ds-global-size-space-8);
  --ds-navbar-base-button-color-text-base: var(--ds-global-color-white);
  --ds-navbar-base-button-color-text-hover: var(--ds-global-color-primary-5);
  --ds-navbar-base-button-color-text-active: var(--ds-global-color-primary-5);
  --ds-navbar-base-button-color-background-base: var(--ds-global-color-primary-4);
  --ds-navbar-base-button-color-background-hover: var(--ds-global-color-sky-2);
  --ds-navbar-base-button-color-background-active: var(--ds-global-color-white);
  --ds-navbar-base-button-color-border-base: var(--ds-global-color-primary-4);
  --ds-navbar-base-button-color-border-hover: var(--ds-global-color-sky-2);
  --ds-navbar-base-button-color-border-active: var(--ds-global-color-white);
  --ds-navbar-light-background: var(--ds-global-color-white);
  --ds-navbar-light-sidebar-panel-border-top: 1px solid var(--ds-global-color-grey-3);
  --ds-navbar-light-button-color-background-base: var(--ds-global-color-grey-1);
  --ds-navbar-light-button-color-background-hover: var(--ds-global-color-sky-1);
  --ds-navbar-light-button-color-background-active: var(--ds-global-color-sky-1);
  --ds-navbar-light-button-color-border-base: var(--ds-global-color-grey-1);
  --ds-navbar-light-button-color-border-hover: var(--ds-global-color-sky-1);
  --ds-navbar-light-button-color-border-active: var(--ds-global-color-sky-1);
  --ds-snackbar-primary-color-progress-bar-base: var(--ds-global-color-primary-5);
  --ds-snackbar-primary-color-progress-background-base: var(--ds-global-color-primary-2);
  --ds-snackbar-success-color-progress-bar-base: var(--ds-global-color-success-6);
  --ds-snackbar-success-color-progress-background-base: var(--ds-global-color-success-3);
  --ds-snackbar-info-color-progress-bar-base: var(--ds-global-color-info-6);
  --ds-snackbar-info-color-progress-background-base: var(--ds-global-color-info-3);
  --ds-snackbar-warning-color-progress-bar-base: var(--ds-global-color-warning-6);
  --ds-snackbar-warning-color-progress-background-base: var(--ds-global-color-warning-3);
  --ds-snackbar-danger-color-progress-bar-base: var(--ds-global-color-danger-6);
  --ds-snackbar-danger-color-progress-background-base: var(--ds-global-color-danger-3);
  --ds-toast-primary-color-progress-bar-base: var(--ds-global-color-primary-5);
  --ds-toast-primary-color-progress-background-base: var(--ds-global-color-primary-2);
  --ds-toast-success-color-progress-bar-base: var(--ds-global-color-success-6);
  --ds-toast-success-color-progress-background-base: var(--ds-global-color-success-3);
  --ds-toast-info-color-progress-bar-base: var(--ds-global-color-info-6);
  --ds-toast-info-color-progress-background-base: var(--ds-global-color-info-3);
  --ds-toast-warning-color-progress-bar-base: var(--ds-global-color-warning-6);
  --ds-toast-warning-color-progress-background-base: var(--ds-global-color-warning-3);
  --ds-toast-danger-color-progress-bar-base: var(--ds-global-color-danger-6);
  --ds-toast-danger-color-progress-background-base: var(--ds-global-color-danger-3);
  --ds-tag-purple-dark-color-bg-base: var(--ds-global-color-purple-6);
  --ds-tag-red-dark-color-bg-base: var(--ds-global-color-red-6);
  --ds-tag-green-dark-color-bg-base: var(--ds-global-color-green-6);
  --ds-tag-yellow-dark-color-bg-base: var(--ds-global-color-yellow-6);
  --ds-segment-item-height: var(--ds-global-size-space-40);
  --ds-segment-item-unselected-color-base: var(--ds-global-color-primary-4);
  --ds-segment-item-selected-color-base: var(--ds-global-color-primary-4);
  --ds-pagination-dots-inactive-color: var(--ds-global-color-white);
  --ds-progress-bar-background-purple: var(--ds-global-color-purple-2);
  --ds-progress-bar-background-yellow: var(--ds-global-color-yellow-2);
  --ds-progress-bar-background-red: var(--ds-global-color-red-2);
  --ds-progress-bar-background-green: var(--ds-global-color-green-2);
  --ds-progress-bar-line-color-purple: var(--ds-global-color-purple-6);
  --ds-progress-bar-line-color-yellow: var(--ds-global-color-yellow-6);
  --ds-progress-bar-line-color-red: var(--ds-global-color-red-6);
  --ds-progress-bar-line-color-green: var(--ds-global-color-green-6);
  --ds-tabs-color-purple-hover: var(--ds-global-color-purple-5);
  --ds-tabs-color-green-hover: var(--ds-global-color-green-5);
  --ds-tabs-color-red-hover: var(--ds-global-color-red-5);
  --ds-tabs-color-yellow-hover: var(--ds-global-color-yellow-5);
  --ds-alias-interaction-focus-color-border: var(--ds-alias-background-color-white);
  --ds-alias-interaction-focus-color-end: var(--ds-alias-interaction-focus-color-base);
  --ds-alias-interaction-focus-color-inverted-end: var(--ds-alias-interaction-focus-color-inverted);
  --ds-alias-text-color-hint: var(--ds-alias-text-color-primary-light);
  --ds-alias-text-color-inverted-disabled: var(--ds-alias-text-color-primary-light);
  --ds-alias-text-color-inverted-primary: var(--ds-alias-text-color-white);
  --ds-backdrop-opacity: var(--ds-alias-opacity-backdrop);
  --ds-footer-color-background: var(--ds-alias-background-color-primary);
  --ds-footer-color-text: var(--ds-alias-text-color-white);
  --ds-footer-color-link-base: var(--ds-alias-text-color-white);
  --ds-footer-space-content-padding-top: var(--ds-alias-space-md-mobile);
  --ds-footer-space-gap-row: var(--ds-alias-space-base-mobile);
  --ds-footer-space-language-gap: var(--ds-alias-space-xs-mobile);
  --ds-footer-space-bottom-gap: var(--ds-alias-space-base-mobile);
  --ds-footer-space-social-gap: var(--ds-alias-space-xs-mobile);
  --ds-footer-space-social-icon-size: var(--ds-alias-space-lg-mobile);
  --ds-footer-space-social-icon-gap: var(--ds-alias-space-xs-mobile);
  --ds-footer-space-slotted-margin-right: var(--ds-alias-space-base-mobile);
  --ds-footer-space-content-max-width: var(--ds-alias-container-width-base);
  --ds-footer-typography-font-size: var(--ds-alias-text-size-sm-mobile);
  --ds-footer-typography-language-family: var(--ds-alias-text-family-heading);
  --ds-footer-typography-language-weight: var(--ds-alias-text-weight-bold);
  --ds-heading-1-space: var(--ds-alias-space-xs-mobile);
  --ds-heading-1-size-mobile: var(--ds-alias-text-size-3xl-mobile);
  --ds-heading-1-size-tablet: var(--ds-alias-text-size-3xl-tablet);
  --ds-heading-1-size-desktop: var(--ds-alias-text-size-3xl-desktop);
  --ds-heading-2-space: var(--ds-alias-space-xs-mobile);
  --ds-heading-2-size-mobile: var(--ds-alias-text-size-2xl-mobile);
  --ds-heading-2-size-tablet: var(--ds-alias-text-size-2xl-tablet);
  --ds-heading-2-size-desktop: var(--ds-alias-text-size-2xl-desktop);
  --ds-heading-3-space: var(--ds-alias-space-xs-mobile);
  --ds-heading-3-size-mobile: var(--ds-alias-text-size-xl-mobile);
  --ds-heading-3-size-tablet: var(--ds-alias-text-size-xl-tablet);
  --ds-heading-3-size-desktop: var(--ds-alias-text-size-xl-desktop);
  --ds-heading-4-space: var(--ds-alias-space-xs-mobile);
  --ds-heading-4-size-mobile: var(--ds-alias-text-size-lg-mobile);
  --ds-heading-4-size-tablet: var(--ds-alias-text-size-lg-tablet);
  --ds-heading-4-size-desktop: var(--ds-alias-text-size-lg-desktop);
  --ds-heading-5-space: var(--ds-alias-space-xs-mobile);
  --ds-heading-5-size-mobile: var(--ds-alias-text-size-base-mobile);
  --ds-heading-5-size-tablet: var(--ds-alias-text-size-base-tablet);
  --ds-heading-5-size-desktop: var(--ds-alias-text-size-base-desktop);
  --ds-heading-font-family: var(--ds-alias-text-family-heading);
  --ds-heading-font-weight: var(--ds-alias-text-weight-bold);
  --ds-heading-line-height: var(--ds-alias-text-line-height-heading);
  --ds-heading-primary-color-base: var(--ds-alias-text-color-primary);
  --ds-heading-white-color-base: var(--ds-alias-text-color-white);
  --ds-heading-info-color-base: var(--ds-alias-text-color-info);
  --ds-heading-success-color-base: var(--ds-alias-text-color-success);
  --ds-heading-warning-color-base: var(--ds-alias-text-color-warning);
  --ds-heading-danger-color-base: var(--ds-alias-text-color-danger);
  --ds-heading-display-1-space: var(--ds-alias-space-base-mobile);
  --ds-heading-display-1-size-mobile: var(--ds-alias-text-size-5xl-mobile);
  --ds-heading-display-1-size-tablet: var(--ds-alias-text-size-5xl-tablet);
  --ds-heading-display-1-size-desktop: var(--ds-alias-text-size-5xl-desktop);
  --ds-heading-display-2-space: var(--ds-alias-space-base-mobile);
  --ds-heading-display-2-size-mobile: var(--ds-alias-text-size-4xl-mobile);
  --ds-heading-display-2-size-tablet: var(--ds-alias-text-size-4xl-tablet);
  --ds-heading-display-2-size-desktop: var(--ds-alias-text-size-4xl-desktop);
  --ds-heading-subtitle-font-family: var(--ds-alias-text-family-heading);
  --ds-heading-subtitle-line-height: var(--ds-alias-text-line-height-heading);
  --ds-heading-subtitle-font-weight: var(--ds-alias-text-weight-light);
  --ds-badge-size-sm: var(--ds-alias-space-sm-mobile);
  --ds-badge-size-base: var(--ds-alias-space-lg-mobile);
  --ds-badge-size-lg: var(--ds-alias-space-xl-mobile);
  --ds-badge-font-family: var(--ds-alias-text-family-heading);
  --ds-badge-font-weight: var(--ds-alias-text-weight-bold);
  --ds-badge-font-size-sm: var(--ds-alias-text-size-none-mobile);
  --ds-badge-font-size-base: var(--ds-alias-text-size-xs-mobile);
  --ds-badge-font-size-lg: var(--ds-alias-text-size-base-mobile);
  --ds-badge-base-color-text: var(--ds-alias-text-color-primary);
  --ds-badge-base-color-background: var(--ds-alias-background-color-red);
  --ds-badge-info-color-text: var(--ds-alias-text-color-primary);
  --ds-badge-info-color-background: var(--ds-alias-background-color-purple);
  --ds-badge-success-color-text: var(--ds-alias-text-color-primary);
  --ds-badge-success-color-background: var(--ds-alias-background-color-green);
  --ds-badge-warning-color-text: var(--ds-alias-text-color-primary);
  --ds-badge-warning-color-background: var(--ds-alias-background-color-yellow-light);
  --ds-badge-danger-color-text: var(--ds-alias-text-color-primary);
  --ds-badge-danger-color-background: var(--ds-alias-background-color-red);
  --ds-badge-red-color-text: var(--ds-alias-text-color-primary);
  --ds-badge-red-color-background: var(--ds-alias-background-color-red);
  --ds-badge-purple-color-text: var(--ds-alias-text-color-primary);
  --ds-badge-purple-color-background: var(--ds-alias-background-color-purple);
  --ds-badge-green-color-text: var(--ds-alias-text-color-primary);
  --ds-badge-green-color-background: var(--ds-alias-background-color-green);
  --ds-badge-yellow-color-text: var(--ds-alias-text-color-primary);
  --ds-badge-yellow-color-background: var(--ds-alias-background-color-yellow);
  --ds-badge-grey-color-text: var(--ds-alias-text-color-grey);
  --ds-badge-grey-color-background: var(--ds-alias-background-color-grey-light);
  --ds-button-family: var(--ds-alias-text-family-heading);
  --ds-button-weight: var(--ds-alias-text-weight-bold);
  --ds-button-line-height: var(--ds-alias-text-line-height-heading);
  --ds-button-size-sm: var(--ds-alias-text-size-sm-mobile);
  --ds-button-size-base: var(--ds-alias-text-size-base-mobile);
  --ds-button-size-lg: var(--ds-alias-text-size-lg-mobile);
  --ds-button-size-xl: var(--ds-alias-text-size-2xl-mobile);
  --ds-button-radius-base: var(--ds-alias-radius-base);
  --ds-button-radius-rounded: var(--ds-alias-radius-rounded);
  --ds-button-color-primary-base-text: var(--ds-alias-text-color-white);
  --ds-button-color-primary-base-background: var(--ds-alias-background-color-primary);
  --ds-button-color-primary-base-border: var(--ds-alias-border-color-primary);
  --ds-button-color-primary-hover-text: var(--ds-alias-text-color-white);
  --ds-button-color-primary-hover-background: var(--ds-alias-background-color-primary-hover);
  --ds-button-color-primary-hover-border: var(--ds-alias-border-color-primary-hover);
  --ds-button-color-primary-active-text: var(--ds-alias-text-color-white);
  --ds-button-color-primary-active-background: var(--ds-alias-background-color-primary-active);
  --ds-button-color-primary-active-border: var(--ds-alias-border-color-primary-active);
  --ds-button-color-secondary-base-text: var(--ds-alias-background-color-primary);
  --ds-button-color-secondary-base-background: var(--ds-alias-background-color-transparent);
  --ds-button-color-secondary-base-border: var(--ds-alias-border-color-primary);
  --ds-button-color-secondary-hover-text: var(--ds-alias-text-color-primary-hover);
  --ds-button-color-secondary-hover-background: var(--ds-alias-background-color-sky-light);
  --ds-button-color-secondary-hover-border: var(--ds-alias-border-color-primary-hover);
  --ds-button-color-secondary-active-text: var(--ds-alias-text-color-primary-active);
  --ds-button-color-secondary-active-background: var(--ds-alias-background-color-sky-light);
  --ds-button-color-secondary-active-border: var(--ds-alias-border-color-primary-active);
  --ds-button-color-tertiary-base-text: var(--ds-alias-background-color-primary);
  --ds-button-color-tertiary-base-background: var(--ds-alias-background-color-transparent);
  --ds-button-color-tertiary-base-border: var(--ds-alias-background-color-transparent);
  --ds-button-color-tertiary-hover-text: var(--ds-alias-text-color-primary-hover);
  --ds-button-color-tertiary-hover-background: var(--ds-alias-background-color-sky-light);
  --ds-button-color-tertiary-hover-border: var(--ds-alias-background-color-sky-light);
  --ds-button-color-tertiary-active-text: var(--ds-alias-text-color-primary-active);
  --ds-button-color-tertiary-active-background: var(--ds-alias-background-color-sky-light);
  --ds-button-color-tertiary-active-border: var(--ds-alias-background-color-sky-light);
  --ds-button-color-tertiary-purple-base-text: var(--ds-alias-background-color-primary);
  --ds-button-color-tertiary-purple-base-background: var(--ds-alias-background-color-purple-lighter);
  --ds-button-color-tertiary-purple-base-border: var(--ds-alias-background-color-purple-lighter);
  --ds-button-color-tertiary-purple-hover-text: var(--ds-alias-text-color-primary);
  --ds-button-color-tertiary-purple-hover-background: var(--ds-alias-background-color-purple-lighter);
  --ds-button-color-tertiary-purple-hover-border: var(--ds-alias-border-color-purple-hover);
  --ds-button-color-tertiary-purple-active-text: var(--ds-alias-text-color-primary-active);
  --ds-button-color-tertiary-purple-active-background: var(--ds-alias-background-color-purple-lighter);
  --ds-button-color-tertiary-purple-active-border: var(--ds-alias-border-color-purple-active);
  --ds-button-color-tertiary-green-base-text: var(--ds-alias-background-color-primary);
  --ds-button-color-tertiary-green-base-background: var(--ds-alias-background-color-green-lighter);
  --ds-button-color-tertiary-green-base-border: var(--ds-alias-background-color-green-lighter);
  --ds-button-color-tertiary-green-hover-text: var(--ds-alias-text-color-primary);
  --ds-button-color-tertiary-green-hover-background: var(--ds-alias-background-color-green-lighter);
  --ds-button-color-tertiary-green-hover-border: var(--ds-alias-border-color-green-hover);
  --ds-button-color-tertiary-green-active-text: var(--ds-alias-text-color-primary-active);
  --ds-button-color-tertiary-green-active-background: var(--ds-alias-background-color-green-lighter);
  --ds-button-color-tertiary-green-active-border: var(--ds-alias-border-color-green-active);
  --ds-button-color-tertiary-red-base-text: var(--ds-alias-background-color-primary);
  --ds-button-color-tertiary-red-base-background: var(--ds-alias-background-color-red-lighter);
  --ds-button-color-tertiary-red-base-border: var(--ds-alias-background-color-red-lighter);
  --ds-button-color-tertiary-red-hover-text: var(--ds-alias-text-color-primary);
  --ds-button-color-tertiary-red-hover-background: var(--ds-alias-background-color-red-lighter);
  --ds-button-color-tertiary-red-hover-border: var(--ds-alias-border-color-red-hover);
  --ds-button-color-tertiary-red-active-text: var(--ds-alias-text-color-primary-active);
  --ds-button-color-tertiary-red-active-background: var(--ds-alias-background-color-red-lighter);
  --ds-button-color-tertiary-red-active-border: var(--ds-alias-border-color-red-active);
  --ds-button-color-tertiary-yellow-base-text: var(--ds-alias-background-color-primary);
  --ds-button-color-tertiary-yellow-base-background: var(--ds-alias-background-color-yellow-lighter);
  --ds-button-color-tertiary-yellow-base-border: var(--ds-alias-background-color-yellow-lighter);
  --ds-button-color-tertiary-yellow-hover-text: var(--ds-alias-text-color-primary);
  --ds-button-color-tertiary-yellow-hover-background: var(--ds-alias-background-color-yellow-lighter);
  --ds-button-color-tertiary-yellow-hover-border: var(--ds-alias-border-color-yellow-hover);
  --ds-button-color-tertiary-yellow-active-text: var(--ds-alias-text-color-primary-active);
  --ds-button-color-tertiary-yellow-active-background: var(--ds-alias-background-color-yellow-lighter);
  --ds-button-color-tertiary-yellow-active-border: var(--ds-alias-border-color-yellow-active);
  --ds-button-color-info-base-text: var(--ds-alias-background-color-primary);
  --ds-button-color-info-base-background: var(--ds-alias-background-color-sky-light);
  --ds-button-color-info-base-border: var(--ds-alias-background-color-sky-light);
  --ds-button-color-info-hover-text: var(--ds-alias-text-color-primary-hover);
  --ds-button-color-info-hover-background: var(--ds-alias-background-color-sky-light);
  --ds-button-color-info-hover-border: var(--ds-alias-border-color-info);
  --ds-button-color-info-active-text: var(--ds-alias-text-color-primary-active);
  --ds-button-color-info-active-background: var(--ds-alias-background-color-sky-light);
  --ds-button-color-info-active-border: var(--ds-alias-border-color-info-active);
  --ds-button-color-success-base-text: var(--ds-alias-background-color-primary);
  --ds-button-color-success-base-background: var(--ds-alias-background-color-success-lighter);
  --ds-button-color-success-base-border: var(--ds-alias-background-color-success-lighter);
  --ds-button-color-success-hover-text: var(--ds-alias-text-color-primary-hover);
  --ds-button-color-success-hover-background: var(--ds-alias-background-color-success-lighter);
  --ds-button-color-success-hover-border: var(--ds-alias-border-color-success-hover);
  --ds-button-color-success-active-text: var(--ds-alias-text-color-primary-active);
  --ds-button-color-success-active-background: var(--ds-alias-background-color-success-lighter);
  --ds-button-color-success-active-border: var(--ds-alias-border-color-success-active);
  --ds-button-color-warning-base-text: var(--ds-alias-background-color-primary);
  --ds-button-color-warning-base-background: var(--ds-alias-background-color-warning-lighter);
  --ds-button-color-warning-base-border: var(--ds-alias-background-color-warning-lighter);
  --ds-button-color-warning-hover-text: var(--ds-alias-text-color-primary);
  --ds-button-color-warning-hover-background: var(--ds-alias-background-color-warning-lighter);
  --ds-button-color-warning-hover-border: var(--ds-alias-border-color-warning-hover);
  --ds-button-color-warning-active-text: var(--ds-alias-text-color-primary);
  --ds-button-color-warning-active-background: var(--ds-alias-background-color-warning-lighter);
  --ds-button-color-warning-active-border: var(--ds-alias-border-color-warning-active);
  --ds-button-color-danger-base-text: var(--ds-alias-background-color-primary);
  --ds-button-color-danger-base-background: var(--ds-alias-background-color-danger-lighter);
  --ds-button-color-danger-base-border: var(--ds-alias-background-color-danger-lighter);
  --ds-button-color-danger-hover-text: var(--ds-alias-text-color-primary-hover);
  --ds-button-color-danger-hover-background: var(--ds-alias-background-color-danger-lighter);
  --ds-button-color-danger-hover-border: var(--ds-alias-border-color-danger-hover);
  --ds-button-color-danger-active-text: var(--ds-alias-text-color-primary-active);
  --ds-button-color-danger-active-background: var(--ds-alias-background-color-danger-lighter);
  --ds-button-color-danger-active-border: var(--ds-alias-border-color-danger-active);
  --ds-button-color-disabled-base-text: var(--ds-alias-text-color-disabled);
  --ds-button-color-disabled-base-background: var(--ds-alias-background-color-disabled);
  --ds-button-color-disabled-base-border: var(--ds-alias-background-color-disabled);
  --ds-button-color-disabled-hover-text: var(--ds-alias-text-color-disabled);
  --ds-button-color-disabled-hover-background: var(--ds-alias-background-color-disabled);
  --ds-button-color-disabled-hover-border: var(--ds-alias-background-color-disabled);
  --ds-button-color-disabled-active-text: var(--ds-alias-text-color-disabled);
  --ds-button-color-disabled-active-background: var(--ds-alias-background-color-disabled);
  --ds-button-color-disabled-active-border: var(--ds-alias-background-color-disabled);
  --ds-button-color-link-base-text: var(--ds-alias-background-color-primary);
  --ds-button-color-link-base-background: var(--ds-alias-background-color-transparent);
  --ds-button-color-link-base-border: var(--ds-alias-background-color-transparent);
  --ds-button-color-link-hover-text: var(--ds-alias-text-color-primary-hover);
  --ds-button-color-link-hover-background: var(--ds-alias-background-color-transparent);
  --ds-button-color-link-hover-border: var(--ds-alias-background-color-transparent);
  --ds-button-color-link-active-text: var(--ds-alias-text-color-primary-active);
  --ds-button-color-link-active-background: var(--ds-alias-background-color-transparent);
  --ds-button-color-link-active-border: var(--ds-alias-background-color-transparent);
  --ds-button-color-inverted-base-text: var(--ds-alias-background-color-primary);
  --ds-button-color-inverted-base-background: var(--ds-alias-background-color-white);
  --ds-button-color-inverted-base-border: var(--ds-alias-background-color-white);
  --ds-button-color-inverted-hover-text: var(--ds-alias-background-color-primary);
  --ds-button-color-inverted-hover-background: var(--ds-alias-background-color-sky);
  --ds-button-color-inverted-hover-border: var(--ds-alias-background-color-sky);
  --ds-button-color-inverted-active-text: var(--ds-alias-text-color-white);
  --ds-button-color-inverted-active-background: var(--ds-alias-background-color-primary-hover);
  --ds-button-color-inverted-active-border: var(--ds-alias-background-color-primary-hover);
  --ds-button-color-inverted-secondary-base-text: var(--ds-alias-text-color-white);
  --ds-button-color-inverted-secondary-base-background: var(--ds-alias-background-color-transparent);
  --ds-button-color-inverted-secondary-base-border: var(--ds-alias-background-color-white);
  --ds-button-color-inverted-secondary-hover-text: var(--ds-alias-text-color-white);
  --ds-button-color-inverted-secondary-hover-background: var(--ds-alias-background-color-primary-light);
  --ds-button-color-inverted-secondary-hover-border: var(--ds-alias-background-color-sky-dark);
  --ds-button-color-inverted-secondary-active-text: var(--ds-alias-text-color-white);
  --ds-button-color-inverted-secondary-active-background: var(--ds-alias-background-color-primary-light);
  --ds-button-color-inverted-secondary-active-border: var(--ds-alias-background-color-primary-hover);
  --ds-button-color-inverted-tertiary-base-text: var(--ds-alias-background-color-primary);
  --ds-button-color-inverted-tertiary-base-background: var(--ds-alias-background-color-grey-light);
  --ds-button-color-inverted-tertiary-base-border: var(--ds-alias-background-color-grey-light);
  --ds-button-color-inverted-tertiary-hover-text: var(--ds-alias-text-color-primary);
  --ds-button-color-inverted-tertiary-hover-background: var(--ds-alias-background-color-sky-light);
  --ds-button-color-inverted-tertiary-hover-border: var(--ds-alias-background-color-sky-light);
  --ds-button-color-inverted-tertiary-active-text: var(--ds-alias-text-color-primary-active);
  --ds-button-color-inverted-tertiary-active-background: var(--ds-alias-background-color-sky);
  --ds-button-color-inverted-tertiary-active-border: var(--ds-alias-background-color-sky);
  --ds-button-color-inverted-link-base-background: var(--ds-alias-background-color-transparent);
  --ds-button-color-inverted-link-base-border: var(--ds-alias-background-color-transparent);
  --ds-button-color-inverted-link-hover-text: var(--ds-alias-text-color-inverted-primary-hover);
  --ds-button-color-inverted-link-hover-background: var(--ds-alias-background-color-transparent);
  --ds-button-color-inverted-link-hover-border: var(--ds-alias-background-color-transparent);
  --ds-button-color-inverted-link-active-text: var(--ds-alias-text-color-inverted-primary-active);
  --ds-button-color-inverted-link-active-background: var(--ds-alias-background-color-transparent);
  --ds-button-color-inverted-link-active-border: var(--ds-alias-background-color-transparent);
  --ds-button-color-tertiary-purple-dashed-base-text: var(--ds-alias-background-color-primary);
  --ds-button-color-tertiary-purple-dashed-base-background: var(--ds-alias-background-color-purple-lighter);
  --ds-button-color-tertiary-purple-dashed-base-border: var(--ds-alias-background-color-purple);
  --ds-button-color-tertiary-purple-dashed-hover-text: var(--ds-alias-text-color-primary);
  --ds-button-color-tertiary-purple-dashed-hover-background: var(--ds-alias-background-color-purple-lighter);
  --ds-button-color-tertiary-purple-dashed-hover-border: var(--ds-alias-border-color-purple-hover);
  --ds-button-color-tertiary-purple-dashed-active-text: var(--ds-alias-text-color-primary-active);
  --ds-button-color-tertiary-purple-dashed-active-background: var(--ds-alias-background-color-purple-lighter);
  --ds-button-color-tertiary-purple-dashed-active-border: var(--ds-alias-border-color-purple-active);
  --ds-button-color-tertiary-green-dashed-base-text: var(--ds-alias-background-color-primary);
  --ds-button-color-tertiary-green-dashed-base-background: var(--ds-alias-background-color-green-lighter);
  --ds-button-color-tertiary-green-dashed-base-border: var(--ds-alias-background-color-green);
  --ds-button-color-tertiary-green-dashed-hover-text: var(--ds-alias-text-color-primary);
  --ds-button-color-tertiary-green-dashed-hover-background: var(--ds-alias-background-color-green-lighter);
  --ds-button-color-tertiary-green-dashed-hover-border: var(--ds-alias-border-color-green-hover);
  --ds-button-color-tertiary-green-dashed-active-text: var(--ds-alias-text-color-primary-active);
  --ds-button-color-tertiary-green-dashed-active-background: var(--ds-alias-background-color-green-lighter);
  --ds-button-color-tertiary-green-dashed-active-border: var(--ds-alias-border-color-green-active);
  --ds-button-color-tertiary-red-dashed-base-text: var(--ds-alias-background-color-primary);
  --ds-button-color-tertiary-red-dashed-base-background: var(--ds-alias-background-color-red-lighter);
  --ds-button-color-tertiary-red-dashed-base-border: var(--ds-alias-background-color-red);
  --ds-button-color-tertiary-red-dashed-hover-text: var(--ds-alias-text-color-primary);
  --ds-button-color-tertiary-red-dashed-hover-background: var(--ds-alias-background-color-red-lighter);
  --ds-button-color-tertiary-red-dashed-hover-border: var(--ds-alias-border-color-red-hover);
  --ds-button-color-tertiary-red-dashed-active-text: var(--ds-alias-text-color-primary-active);
  --ds-button-color-tertiary-red-dashed-active-background: var(--ds-alias-background-color-red-lighter);
  --ds-button-color-tertiary-red-dashed-active-border: var(--ds-alias-border-color-red-active);
  --ds-button-color-tertiary-yellow-dashed-base-text: var(--ds-alias-background-color-primary);
  --ds-button-color-tertiary-yellow-dashed-base-background: var(--ds-alias-background-color-yellow-lighter);
  --ds-button-color-tertiary-yellow-dashed-base-border: var(--ds-alias-background-color-yellow);
  --ds-button-color-tertiary-yellow-dashed-hover-text: var(--ds-alias-text-color-primary);
  --ds-button-color-tertiary-yellow-dashed-hover-background: var(--ds-alias-background-color-yellow-lighter);
  --ds-button-color-tertiary-yellow-dashed-hover-border: var(--ds-alias-border-color-yellow-hover);
  --ds-button-color-tertiary-yellow-dashed-active-text: var(--ds-alias-text-color-primary-active);
  --ds-button-color-tertiary-yellow-dashed-active-background: var(--ds-alias-background-color-yellow-lighter);
  --ds-button-color-tertiary-yellow-dashed-active-border: var(--ds-alias-border-color-yellow-active);
  --ds-button-color-text-base-text: var(--ds-alias-background-color-primary);
  --ds-button-color-text-base-background: var(--ds-alias-background-color-transparent);
  --ds-button-color-text-base-border: var(--ds-alias-background-color-transparent);
  --ds-button-color-text-hover-text: var(--ds-alias-text-color-primary-hover);
  --ds-button-color-text-hover-background: var(--ds-alias-background-color-transparent);
  --ds-button-color-text-hover-border: var(--ds-alias-background-color-transparent);
  --ds-button-color-text-active-text: var(--ds-alias-text-color-primary-active);
  --ds-button-color-text-active-background: var(--ds-alias-background-color-transparent);
  --ds-button-color-text-active-border: var(--ds-alias-background-color-transparent);
  --ds-body-color: var(--ds-alias-text-color-primary);
  --ds-body-family: var(--ds-alias-text-family-body);
  --ds-body-line-height: var(--ds-alias-text-line-height-body);
  --ds-body-size: var(--ds-alias-text-size-base-mobile);
  --ds-body-space: var(--ds-alias-space-base-mobile);
  --ds-body-weight: var(--ds-alias-text-weight-regular);
  --ds-card-radius-base: var(--ds-alias-radius-lg);
  --ds-card-radius-square: var(--ds-alias-radius-base);
  --ds-card-shadow-flat: var(--ds-alias-shadow-box-none);
  --ds-card-shadow-base: var(--ds-alias-shadow-box-base);
  --ds-card-shadow-hover: var(--ds-alias-shadow-box-elevated);
  --ds-card-color-base-background: var(--ds-alias-background-color-white);
  --ds-card-color-base-outline: var(--ds-alias-border-color-grey);
  --ds-card-color-white-background: var(--ds-alias-background-color-white);
  --ds-card-color-white-outline: var(--ds-alias-border-color-grey);
  --ds-card-color-primary-text: var(--ds-alias-text-color-white);
  --ds-card-color-primary-background: var(--ds-alias-background-color-primary);
  --ds-card-color-info-background: var(--ds-alias-background-color-info);
  --ds-card-color-success-background: var(--ds-alias-background-color-success);
  --ds-card-color-warning-background: var(--ds-alias-background-color-warning);
  --ds-card-color-danger-background: var(--ds-alias-background-color-danger);
  --ds-card-color-grey-light-background: var(--ds-alias-background-color-grey-light);
  --ds-card-color-grey-light-outline: var(--ds-alias-border-color-grey-dark);
  --ds-card-color-grey-background: var(--ds-alias-background-color-grey);
  --ds-card-color-grey-outline: var(--ds-alias-border-color-grey-dark);
  --ds-card-color-red-lighter-background: var(--ds-alias-background-color-red-lighter);
  --ds-card-color-red-lighter-outline: var(--ds-alias-background-color-red);
  --ds-card-color-red-light-background: var(--ds-alias-background-color-red-light);
  --ds-card-color-red-light-outline: var(--ds-alias-background-color-red);
  --ds-card-color-red-background: var(--ds-alias-background-color-red);
  --ds-card-color-red-outline: var(--ds-alias-background-color-red);
  --ds-card-color-purple-lighter-background: var(--ds-alias-background-color-purple-lighter);
  --ds-card-color-purple-lighter-outline: var(--ds-alias-background-color-purple);
  --ds-card-color-purple-light-background: var(--ds-alias-background-color-purple-light);
  --ds-card-color-purple-light-outline: var(--ds-alias-background-color-purple);
  --ds-card-color-purple-background: var(--ds-alias-background-color-purple);
  --ds-card-color-purple-outline: var(--ds-alias-background-color-purple);
  --ds-card-color-green-lighter-background: var(--ds-alias-background-color-green-lighter);
  --ds-card-color-green-lighter-outline: var(--ds-alias-background-color-green);
  --ds-card-color-green-light-background: var(--ds-alias-background-color-green-light);
  --ds-card-color-green-light-outline: var(--ds-alias-background-color-green);
  --ds-card-color-green-background: var(--ds-alias-background-color-green);
  --ds-card-color-green-outline: var(--ds-alias-background-color-green);
  --ds-card-color-yellow-lighter-background: var(--ds-alias-background-color-yellow-lighter);
  --ds-card-color-yellow-lighter-outline: var(--ds-alias-background-color-yellow);
  --ds-card-color-yellow-light-background: var(--ds-alias-background-color-yellow-light);
  --ds-card-color-yellow-light-outline: var(--ds-alias-background-color-yellow);
  --ds-card-color-yellow-background: var(--ds-alias-background-color-yellow);
  --ds-card-color-yellow-outline: var(--ds-alias-background-color-yellow);
  --ds-card-space-sm-mobile: var(--ds-alias-space-base-mobile);
  --ds-card-space-sm-tablet: var(--ds-alias-space-base-mobile);
  --ds-card-space-sm-desktop: var(--ds-alias-space-base-mobile);
  --ds-card-space-base-mobile: var(--ds-alias-space-base-mobile);
  --ds-card-space-base-tablet: var(--ds-alias-space-lg-mobile);
  --ds-card-space-base-desktop: var(--ds-alias-space-lg-mobile);
  --ds-card-space-md-mobile: var(--ds-alias-space-base-mobile);
  --ds-card-space-md-tablet: var(--ds-alias-space-lg-mobile);
  --ds-card-space-md-desktop: var(--ds-alias-space-xl-mobile);
  --ds-card-space-lg-mobile: var(--ds-alias-space-base-mobile);
  --ds-card-space-lg-tablet: var(--ds-alias-space-xl-mobile);
  --ds-card-space-lg-desktop: var(--ds-alias-space-2xl-mobile);
  --ds-card-outline-width: var(--ds-alias-border-width-base);
  --ds-close-radius: var(--ds-alias-radius-rounded);
  --ds-close-color-background-base: var(--ds-alias-background-color-transparent);
  --ds-close-color-background-disabled: var(--ds-alias-background-color-grey);
  --ds-close-icon-color-base: var(--ds-alias-text-color-primary);
  --ds-close-icon-color-disabled: var(--ds-alias-text-color-disabled);
  --ds-close-inverted-icon-color-base: var(--ds-alias-text-color-white);
  --ds-date-calendar-family: var(--ds-alias-text-family-body);
  --ds-date-calendar-weight: var(--ds-alias-text-weight-bold);
  --ds-date-calendar-radius: var(--ds-alias-radius-base);
  --ds-date-calendar-shadow: var(--ds-alias-shadow-box-base);
  --ds-date-calendar-color-inner-border: var(--ds-alias-border-color-grey);
  --ds-date-calendar-color-current-date: var(--ds-alias-text-color-primary);
  --ds-date-calendar-color-text: var(--ds-alias-text-color-primary);
  --ds-date-calendar-color-disabled: var(--ds-alias-text-color-disabled);
  --ds-date-calendar-color-day-hover-background: var(--ds-alias-background-color-hover);
  --ds-date-calendar-color-day-active-background: var(--ds-alias-background-color-sky);
  --ds-date-calendar-color-day-selected-background: var(--ds-alias-background-color-primary-dark);
  --ds-date-calendar-color-day-selected-hover-background: var(--ds-alias-background-color-primary-hover);
  --ds-date-calendar-size-mobile: var(--ds-alias-text-size-base-mobile);
  --ds-date-calendar-size-tablet: var(--ds-alias-text-size-base-tablet);
  --ds-date-calendar-size-desktop: var(--ds-alias-text-size-base-desktop);
  --ds-date-calendar-day-weight-base: var(--ds-alias-text-weight-regular);
  --ds-date-calendar-day-weight-selected: var(--ds-alias-text-weight-bold);
  --ds-date-calendar-day-name-family: var(--ds-alias-text-family-heading);
  --ds-date-calendar-day-name-weight: var(--ds-alias-text-weight-bold);
  --ds-date-calendar-nav-radius: var(--ds-alias-radius-base);
  --ds-date-calendar-nav-color-base: var(--ds-alias-text-color-primary);
  --ds-date-calendar-nav-color-hover: var(--ds-alias-text-color-primary-hover);
  --ds-date-calendar-nav-color-active: var(--ds-alias-text-color-primary-active);
  --ds-date-calendar-nav-color-disabled: var(--ds-alias-text-color-disabled);
  --ds-date-trigger-color-disabled: var(--ds-alias-text-color-disabled);
  --ds-date-trigger-color-hover: var(--ds-alias-text-color-primary-hover);
  --ds-date-trigger-color-active: var(--ds-alias-text-color-primary-active);
  --ds-date-popup-shadow: var(--ds-alias-shadow-box-base);
  --ds-description-list-term-color: var(--ds-alias-text-color-primary-light);
  --ds-description-list-term-weight: var(--ds-alias-text-weight-regular);
  --ds-description-list-detail-color: var(--ds-alias-text-color-primary);
  --ds-description-list-detail-weight: var(--ds-alias-text-weight-regular);
  --ds-divider-radius: var(--ds-alias-radius-rounded);
  --ds-divider-width: var(--ds-alias-border-width-base);
  --ds-divider-color-base: var(--ds-alias-border-color-grey);
  --ds-divider-color-primary-light: var(--ds-alias-border-color-primary-light);
  --ds-divider-color-primary: var(--ds-alias-border-color-primary);
  --ds-divider-color-light-blue: var(--ds-alias-border-color-primary-hover);
  --ds-divider-color-primary-dark: var(--ds-alias-border-color-primary-active);
  --ds-divider-color-grey-light: var(--ds-alias-border-color-grey-light);
  --ds-divider-color-grey: var(--ds-alias-border-color-grey);
  --ds-divider-color-grey-dark: var(--ds-alias-border-color-grey-dark);
  --ds-divider-color-warning: var(--ds-alias-border-color-warning);
  --ds-divider-color-success: var(--ds-alias-border-color-success);
  --ds-divider-color-danger: var(--ds-alias-border-color-danger);
  --ds-divider-color-danger-dark: var(--ds-alias-border-color-danger-hover);
  --ds-divider-color-danger-darker: var(--ds-alias-border-color-danger-active);
  --ds-divider-color-white: var(--ds-alias-border-color-white);
  --ds-icon-color-primary: var(--ds-alias-text-color-primary);
  --ds-icon-color-primary-light: var(--ds-alias-text-color-primary-light);
  --ds-icon-color-success: var(--ds-alias-text-color-success);
  --ds-icon-color-info: var(--ds-alias-text-color-info);
  --ds-icon-color-warning: var(--ds-alias-text-color-warning);
  --ds-icon-color-danger: var(--ds-alias-text-color-danger);
  --ds-icon-color-white: var(--ds-alias-text-color-white);
  --ds-icon-color-grey: var(--ds-alias-text-color-grey);
  --ds-icon-color-disabled: var(--ds-alias-text-color-grey-dark);
  --ds-icon-tile-radius: var(--ds-alias-radius-base);
  --ds-icon-tile-color-purple: var(--ds-alias-background-color-purple-lighter);
  --ds-icon-tile-color-red: var(--ds-alias-background-color-red-lighter);
  --ds-icon-tile-color-green: var(--ds-alias-background-color-green-lighter);
  --ds-icon-tile-color-yellow: var(--ds-alias-background-color-yellow-lighter);
  --ds-form-container-radius: var(--ds-alias-radius-base);
  --ds-form-container-border-width: var(--ds-alias-border-width-base);
  --ds-form-container-color-base-background: var(--ds-alias-background-color-white);
  --ds-form-container-color-base-border: var(--ds-alias-border-color-grey);
  --ds-form-container-color-hover-background: var(--ds-alias-background-color-hover);
  --ds-form-container-color-hover-border: var(--ds-alias-border-color-grey);
  --ds-form-container-color-active-background: var(--ds-alias-background-color-hover);
  --ds-form-container-color-active-border: var(--ds-alias-border-color-primary);
  --ds-form-container-color-focus-background: var(--ds-alias-background-color-hover);
  --ds-form-container-color-focus-border: var(--ds-alias-border-color-primary);
  --ds-form-container-color-success-background: var(--ds-alias-background-color-success-lighter);
  --ds-form-container-color-success-border: var(--ds-alias-text-color-success);
  --ds-form-container-color-warning-background: var(--ds-alias-background-color-warning-lighter);
  --ds-form-container-color-warning-border: var(--ds-alias-text-color-warning);
  --ds-form-container-color-danger-background: var(--ds-alias-background-color-danger-lighter);
  --ds-form-container-color-danger-border: var(--ds-alias-text-color-danger);
  --ds-form-container-color-disabled-background: var(--ds-alias-background-color-disabled);
  --ds-form-container-color-disabled-border: var(--ds-alias-border-color-disabled);
  --ds-form-label-family: var(--ds-alias-text-family-body);
  --ds-form-label-weight: var(--ds-alias-text-weight-bold);
  --ds-form-label-line-height: var(--ds-alias-text-line-height-body);
  --ds-form-label-color-base: var(--ds-alias-text-color-primary);
  --ds-form-label-color-success: var(--ds-alias-text-color-success);
  --ds-form-label-color-warning: var(--ds-alias-text-color-warning);
  --ds-form-label-color-danger: var(--ds-alias-text-color-danger);
  --ds-form-label-color-disabled: var(--ds-alias-text-color-disabled);
  --ds-form-label-size-mobile: var(--ds-alias-text-size-sm-mobile);
  --ds-form-label-size-tablet: var(--ds-alias-text-size-sm-tablet);
  --ds-form-label-size-desktop: var(--ds-alias-text-size-sm-desktop);
  --ds-form-label-color-2-base: var(--ds-alias-text-color-primary);
  --ds-form-label-color-2-success: var(--ds-alias-text-color-success);
  --ds-form-label-color-2-warning: var(--ds-alias-text-color-warning);
  --ds-form-label-color-2-danger: var(--ds-alias-text-color-danger);
  --ds-form-label-color-2-disabled: var(--ds-alias-text-color-disabled);
  --ds-form-label-size-2-mobile: var(--ds-alias-text-size-sm-mobile);
  --ds-form-label-size-2-tablet: var(--ds-alias-text-size-sm-tablet);
  --ds-form-label-size-2-desktop: var(--ds-alias-text-size-sm-desktop);
  --ds-form-control-family: var(--ds-alias-text-family-body);
  --ds-form-control-weight: var(--ds-alias-text-weight-regular);
  --ds-form-control-line-height: var(--ds-alias-text-line-height-body);
  --ds-form-control-font-size-mobile: var(--ds-alias-text-size-base-mobile);
  --ds-form-control-font-size-tablet: var(--ds-alias-text-size-base-tablet);
  --ds-form-control-font-size-desktop: var(--ds-alias-text-size-base-desktop);
  --ds-form-control-color-value-base: var(--ds-alias-text-color-primary);
  --ds-form-control-color-value-success: var(--ds-alias-text-color-success);
  --ds-form-control-color-value-warning: var(--ds-alias-text-color-warning);
  --ds-form-control-color-value-danger: var(--ds-alias-text-color-danger);
  --ds-form-control-color-value-disabled: var(--ds-alias-text-color-grey-dark);
  --ds-form-control-color-placeholder-base: var(--ds-alias-text-color-placeholder);
  --ds-form-control-color-placeholder-disabled: var(--ds-alias-text-color-disabled);
  --ds-form-description-family: var(--ds-alias-text-family-body);
  --ds-form-description-weight: var(--ds-alias-text-weight-regular);
  --ds-form-description-line-height: var(--ds-alias-text-line-height-body);
  --ds-form-description-color-base: var(--ds-alias-text-color-primary-light);
  --ds-form-description-color-success: var(--ds-alias-text-color-success);
  --ds-form-description-color-warning: var(--ds-alias-text-color-warning);
  --ds-form-description-color-danger: var(--ds-alias-text-color-danger);
  --ds-form-description-color-disabled: var(--ds-alias-text-color-disabled);
  --ds-form-description-size-mobile: var(--ds-alias-text-size-xs-mobile);
  --ds-form-description-size-tablet: var(--ds-alias-text-size-xs-tablet);
  --ds-form-description-size-desktop: var(--ds-alias-text-size-xs-desktop);
  --ds-select-radius: var(--ds-alias-radius-base);
  --ds-select-container-radius: var(--ds-alias-radius-base);
  --ds-select-container-border-width: var(--ds-alias-border-width-base);
  --ds-select-container-color-base-background: var(--ds-alias-background-color-white);
  --ds-select-container-color-base-border: var(--ds-alias-border-color-grey);
  --ds-select-container-color-hover-background: var(--ds-alias-background-color-hover);
  --ds-select-container-color-hover-border: var(--ds-alias-border-color-grey);
  --ds-select-container-color-active-background: var(--ds-alias-background-color-hover);
  --ds-select-container-color-active-border: var(--ds-alias-border-color-primary);
  --ds-select-container-color-focus-background: var(--ds-alias-background-color-hover);
  --ds-select-container-color-focus-border: var(--ds-alias-border-color-primary);
  --ds-select-container-color-success-background: var(--ds-alias-background-color-success-lighter);
  --ds-select-container-color-success-border: var(--ds-alias-text-color-success);
  --ds-select-container-color-warning-background: var(--ds-alias-background-color-warning-lighter);
  --ds-select-container-color-warning-border: var(--ds-alias-text-color-warning);
  --ds-select-container-color-danger-background: var(--ds-alias-background-color-danger-lighter);
  --ds-select-container-color-danger-border: var(--ds-alias-text-color-danger);
  --ds-select-container-color-disabled-background: var(--ds-alias-background-color-disabled);
  --ds-select-container-color-disabled-border: var(--ds-alias-border-color-disabled);
  --ds-select-label-family: var(--ds-alias-text-family-body);
  --ds-select-label-weight: var(--ds-alias-text-weight-bold);
  --ds-select-label-line-height: var(--ds-alias-text-line-height-body);
  --ds-select-label-color-base: var(--ds-alias-text-color-primary);
  --ds-select-label-color-success: var(--ds-alias-text-color-success);
  --ds-select-label-color-warning: var(--ds-alias-text-color-warning);
  --ds-select-label-color-danger: var(--ds-alias-text-color-danger);
  --ds-select-label-color-disabled: var(--ds-alias-text-color-disabled);
  --ds-select-label-size-mobile: var(--ds-alias-text-size-sm-mobile);
  --ds-select-label-size-tablet: var(--ds-alias-text-size-sm-tablet);
  --ds-select-label-size-desktop: var(--ds-alias-text-size-sm-desktop);
  --ds-select-control-family: var(--ds-alias-text-family-body);
  --ds-select-control-weight: var(--ds-alias-text-weight-regular);
  --ds-select-control-line-height: var(--ds-alias-text-line-height-body);
  --ds-select-control-font-size-mobile: var(--ds-alias-text-size-base-mobile);
  --ds-select-control-font-size-tablet: var(--ds-alias-text-size-base-tablet);
  --ds-select-control-font-size-desktop: var(--ds-alias-text-size-base-desktop);
  --ds-select-control-color-value-base: var(--ds-alias-text-color-primary);
  --ds-select-control-color-value-disabled: var(--ds-alias-text-color-disabled);
  --ds-select-control-color-placeholder-base: var(--ds-alias-text-color-primary-light);
  --ds-select-control-color-placeholder-disabled: var(--ds-alias-text-color-disabled);
  --ds-select-description-family: var(--ds-alias-text-family-body);
  --ds-select-description-weight: var(--ds-alias-text-weight-regular);
  --ds-select-description-line-height: var(--ds-alias-text-line-height-body);
  --ds-select-description-color-base: var(--ds-alias-text-color-primary-light);
  --ds-select-description-color-success: var(--ds-alias-text-color-success);
  --ds-select-description-color-warning: var(--ds-alias-text-color-warning);
  --ds-select-description-color-danger: var(--ds-alias-text-color-danger);
  --ds-select-description-color-disabled: var(--ds-alias-text-color-disabled);
  --ds-select-description-size-mobile: var(--ds-alias-text-size-xs-mobile);
  --ds-select-description-size-tablet: var(--ds-alias-text-size-xs-tablet);
  --ds-select-description-size-desktop: var(--ds-alias-text-size-xs-desktop);
  --ds-select-chip-family: var(--ds-alias-text-family-body);
  --ds-select-chip-color-base-background: var(--ds-alias-background-color-grey);
  --ds-select-chip-color-base-text: var(--ds-alias-text-color-primary);
  --ds-select-color-disabled: var(--ds-alias-text-color-disabled);
  --ds-select-color-success: var(--ds-alias-text-color-success);
  --ds-select-color-error: var(--ds-alias-text-color-danger);
  --ds-select-color-background-base: var(--ds-alias-background-color-transparent);
  --ds-select-color-text-base: var(--ds-alias-text-color-primary);
  --ds-select-color-primary-base: var(--ds-alias-text-color-primary);
  --ds-select-color-placeholder-base: var(--ds-alias-text-color-placeholder);
  --ds-select-color-border-base: var(--ds-alias-border-color-grey-light);
  --ds-select-color-highlight-base: var(--ds-alias-background-color-yellow-light);
  --ds-select-color-focus-base: var(--ds-alias-background-color-hover);
  --ds-select-color-focus-ring-base: var(--ds-alias-interaction-focus-color-base);
  --ds-select-content-family: var(--ds-alias-text-family-body);
  --ds-select-content-shadow: var(--ds-alias-shadow-box-base);
  --ds-select-content-color-background-base: var(--ds-alias-background-color-white);
  --ds-select-search-color-text-base: var(--ds-alias-text-color-primary);
  --ds-select-option-color-text-base: var(--ds-alias-text-color-primary);
  --ds-select-option-color-text-selected: var(--ds-alias-text-color-primary);
  --ds-select-option-color-text-highlight: var(--ds-alias-text-color-primary);
  --ds-select-option-color-text-disabled: var(--ds-alias-text-color-disabled);
  --ds-select-option-color-border-base: var(--ds-alias-border-color-grey-light);
  --ds-select-option-color-icon-selected: var(--ds-alias-text-color-primary);
  --ds-select-option-color-background-base: var(--ds-alias-background-color-transparent);
  --ds-select-option-color-background-selected: var(--ds-alias-background-color-selected);
  --ds-select-option-color-background-hover: var(--ds-alias-background-color-hover);
  --ds-select-option-color-background-highlight: var(--ds-alias-background-color-highlight);
  --ds-select-option-color-background-disabled: var(--ds-alias-background-color-disabled);
  --ds-select-option-weight-selected: var(--ds-alias-text-weight-bold);
  --ds-select-optgroup-weight: var(--ds-alias-text-weight-bold);
  --ds-select-optgroup-color-background-base: var(--ds-alias-background-color-grey-light);
  --ds-select-optgroup-color-text-base: var(--ds-alias-text-color-primary);
  --ds-select-icon-color-base: var(--ds-alias-text-color-primary);
  --ds-select-icon-color-hover: var(--ds-alias-text-color-primary-hover);
  --ds-select-icon-color-active: var(--ds-alias-text-color-primary-active);
  --ds-select-checkbox-color-border-base: var(--ds-alias-border-color-primary);
  --ds-select-checkbox-color-border-selected: var(--ds-alias-border-color-primary);
  --ds-select-checkbox-color-background-selected: var(--ds-alias-background-color-primary);
  --ds-notification-radius: var(--ds-alias-radius-lg);
  --ds-notification-base-color-background: var(--ds-alias-background-color-grey-light);
  --ds-notification-base-color-border: var(--ds-alias-background-color-grey-light);
  --ds-notification-base-color-text: var(--ds-alias-text-color-primary);
  --ds-notification-info-color-background: var(--ds-alias-background-color-info-light);
  --ds-notification-info-color-border: var(--ds-alias-background-color-info-light);
  --ds-notification-info-color-text: var(--ds-alias-text-color-primary);
  --ds-notification-success-color-background: var(--ds-alias-background-color-success-light);
  --ds-notification-success-color-border: var(--ds-alias-background-color-success-light);
  --ds-notification-success-color-text: var(--ds-alias-text-color-primary);
  --ds-notification-warning-color-background: var(--ds-alias-background-color-warning-light);
  --ds-notification-warning-color-border: var(--ds-alias-background-color-warning-light);
  --ds-notification-warning-color-text: var(--ds-alias-text-color-primary);
  --ds-notification-danger-color-background: var(--ds-alias-background-color-danger-light);
  --ds-notification-danger-color-border: var(--ds-alias-background-color-danger-light);
  --ds-notification-danger-color-text: var(--ds-alias-text-color-primary);
  --ds-notification-outline-base-color-background: var(--ds-alias-background-color-white);
  --ds-notification-outline-base-color-text: var(--ds-alias-text-color-primary);
  --ds-notification-outline-purple-color-background: var(--ds-alias-background-color-purple-lighter);
  --ds-notification-outline-purple-color-border: var(--ds-alias-border-color-purple);
  --ds-notification-outline-purple-color-text: var(--ds-alias-text-color-primary);
  --ds-notification-outline-green-color-background: var(--ds-alias-background-color-green-lighter);
  --ds-notification-outline-green-color-border: var(--ds-alias-border-color-green);
  --ds-notification-outline-green-color-text: var(--ds-alias-text-color-primary);
  --ds-notification-outline-yellow-color-background: var(--ds-alias-background-color-yellow-lighter);
  --ds-notification-outline-yellow-color-border: var(--ds-alias-border-color-yellow);
  --ds-notification-outline-yellow-color-text: var(--ds-alias-text-color-primary);
  --ds-notification-outline-red-color-background: var(--ds-alias-background-color-red-lighter);
  --ds-notification-outline-red-color-border: var(--ds-alias-border-color-red);
  --ds-notification-outline-red-color-text: var(--ds-alias-text-color-primary);
  --ds-label-family: var(--ds-alias-text-family-body);
  --ds-label-weight: var(--ds-alias-text-weight-bold);
  --ds-label-line-height: var(--ds-alias-text-line-height-body);
  --ds-label-color-base: var(--ds-alias-text-color-primary);
  --ds-label-color-base-hover: var(--ds-alias-text-color-primary-hover);
  --ds-label-color-base-active: var(--ds-alias-text-color-primary-active);
  --ds-label-color-disabled: var(--ds-alias-text-color-disabled);
  --ds-label-color-success: var(--ds-alias-text-color-success);
  --ds-label-color-warning: var(--ds-alias-text-color-warning);
  --ds-label-color-danger: var(--ds-alias-text-color-danger);
  --ds-label-color-danger-hover: var(--ds-alias-text-color-danger-hover);
  --ds-label-color-danger-active: var(--ds-alias-text-color-danger-active);
  --ds-label-size-3xl-mobile: var(--ds-alias-text-size-3xl-mobile);
  --ds-label-size-3xl-tablet: var(--ds-alias-text-size-3xl-tablet);
  --ds-label-size-3xl-desktop: var(--ds-alias-text-size-3xl-desktop);
  --ds-label-size-2xl-mobile: var(--ds-alias-text-size-2xl-mobile);
  --ds-label-size-2xl-tablet: var(--ds-alias-text-size-2xl-tablet);
  --ds-label-size-2xl-desktop: var(--ds-alias-text-size-2xl-desktop);
  --ds-label-size-xl-mobile: var(--ds-alias-text-size-xl-mobile);
  --ds-label-size-xl-tablet: var(--ds-alias-text-size-xl-tablet);
  --ds-label-size-xl-desktop: var(--ds-alias-text-size-xl-desktop);
  --ds-label-size-lg-mobile: var(--ds-alias-text-size-lg-mobile);
  --ds-label-size-lg-tablet: var(--ds-alias-text-size-lg-tablet);
  --ds-label-size-lg-desktop: var(--ds-alias-text-size-lg-tablet);
  --ds-label-size-md-mobile: var(--ds-alias-text-size-md-mobile);
  --ds-label-size-md-tablet: var(--ds-alias-text-size-md-tablet);
  --ds-label-size-md-desktop: var(--ds-alias-text-size-md-desktop);
  --ds-label-size-base-mobile: var(--ds-alias-text-size-base-mobile);
  --ds-label-size-base-tablet: var(--ds-alias-text-size-base-tablet);
  --ds-label-size-base-desktop: var(--ds-alias-text-size-base-tablet);
  --ds-label-size-sm-mobile: var(--ds-alias-text-size-sm-mobile);
  --ds-label-size-sm-tablet: var(--ds-alias-text-size-sm-tablet);
  --ds-label-size-sm-desktop: var(--ds-alias-space-sm-desktop);
  --ds-link-weight: var(--ds-alias-text-weight-bold);
  --ds-link-border-width: var(--ds-alias-border-width-base);
  --ds-link-color-base: var(--ds-alias-text-color-primary);
  --ds-link-color-base-hover: var(--ds-alias-text-color-primary-hover);
  --ds-link-color-base-active: var(--ds-alias-text-color-primary-active);
  --ds-link-color-inverted-hover: var(--ds-alias-text-color-inverted-primary-hover);
  --ds-link-color-inverted-active: var(--ds-alias-text-color-inverted-primary-active);
  --ds-list-marker-base: var(--ds-alias-background-color-primary);
  --ds-list-marker-inverted: var(--ds-alias-background-color-white);
  --ds-list-marker-green: var(--ds-alias-background-color-green);
  --ds-list-marker-purple: var(--ds-alias-background-color-purple);
  --ds-list-marker-red: var(--ds-alias-background-color-red);
  --ds-list-marker-yellow: var(--ds-alias-background-color-yellow);
  --ds-list-marker-radius: var(--ds-alias-radius-rounded);
  --ds-list-item-disabled: var(--ds-alias-text-color-disabled);
  --ds-list-item-border-color: var(--ds-alias-border-color-grey);
  --ds-modal-width: var(--ds-alias-container-width-modal);
  --ds-modal-color-base-background: var(--ds-alias-background-color-white);
  --ds-modal-radius-base: var(--ds-alias-radius-lg);
  --ds-modal-heading-family: var(--ds-alias-text-family-heading);
  --ds-modal-heading-weight: var(--ds-alias-text-weight-bold);
  --ds-modal-heading-line-height: var(--ds-alias-text-line-height-heading);
  --ds-modal-heading-size-mobile: var(--ds-alias-text-size-2xl-mobile);
  --ds-modal-heading-size-tablet: var(--ds-alias-text-size-2xl-tablet);
  --ds-modal-heading-size-desktop: var(--ds-alias-text-size-2xl-desktop);
  --ds-navbar-base-layout-background: var(--ds-alias-background-color-primary);
  --ds-navbar-base-layout-shadow: var(--ds-alias-shadow-box-header);
  --ds-navbar-base-layout-z-index: var(--ds-alias-z-index-navigation);
  --ds-navbar-base-brand-focus-radius: var(--ds-alias-radius-base);
  --ds-navbar-base-title-color: var(--ds-alias-text-color-white);
  --ds-navbar-base-title-font-family: var(--ds-alias-text-family-heading);
  --ds-navbar-base-title-font-weight: var(--ds-alias-text-weight-bold);
  --ds-navbar-base-title-font-size: var(--ds-alias-text-size-xl-mobile);
  --ds-navbar-base-hamburger-radius: var(--ds-alias-radius-base);
  --ds-navbar-base-sidebar-panel-background: var(--ds-alias-background-color-white);
  --ds-navbar-base-sidebar-item-font-size: var(--ds-alias-text-size-base-mobile);
  --ds-navbar-base-sidebar-item-font-weight: var(--ds-alias-text-weight-bold);
  --ds-navbar-base-sidebar-item-font-family: var(--ds-alias-text-family-heading);
  --ds-navbar-base-sidebar-item-color-base: var(--ds-alias-text-color-primary);
  --ds-navbar-base-sidebar-item-color-hover: var(--ds-alias-text-color-primary);
  --ds-navbar-base-sidebar-item-color-active: var(--ds-alias-text-color-primary);
  --ds-navbar-base-sidebar-item-background-active: var(--ds-alias-background-color-primary-lighter);
  --ds-navbar-base-sidebar-item-background-hover: var(--ds-alias-background-color-primary-lighter);
  --ds-navbar-base-sidebar-item-divider-color: var(--ds-alias-border-color-grey);
  --ds-navbar-base-sidebar-item-divider-color-active: var(--ds-alias-border-color-primary);
  --ds-navbar-base-menu-item-font-size: var(--ds-alias-text-size-base-mobile);
  --ds-navbar-base-menu-item-border-radius: var(--ds-alias-radius-base);
  --ds-navbar-base-menu-item-color-base: var(--ds-alias-text-color-white);
  --ds-navbar-base-menu-item-color-hover: var(--ds-alias-text-color-inverted-primary-hover);
  --ds-navbar-base-menu-item-color-selected-hover: var(--ds-alias-text-color-inverted-primary-hover);
  --ds-navbar-base-menu-item-color-active: var(--ds-alias-text-color-inverted-primary-active);
  --ds-navbar-base-focus-color-start: var(--ds-alias-interaction-focus-color-inverted);
  --ds-navbar-base-focus-color-end: var(--ds-alias-interaction-focus-color-inverted);
  --ds-navbar-light-title-color: var(--ds-alias-text-color-primary);
  --ds-navbar-light-menu-item-color-base: var(--ds-alias-text-color-primary);
  --ds-navbar-light-menu-item-color-hover: var(--ds-alias-text-color-primary-hover);
  --ds-navbar-light-menu-item-color-selected: var(--ds-alias-text-color-primary-active);
  --ds-navbar-light-menu-item-color-active: var(--ds-alias-text-color-primary-active);
  --ds-navbar-light-button-color-text-base: var(--ds-alias-text-color-primary);
  --ds-navbar-light-button-color-text-hover: var(--ds-alias-text-color-primary-hover);
  --ds-navbar-light-button-color-text-active: var(--ds-alias-text-color-primary-active);
  --ds-snackbar-radius: var(--ds-alias-radius-base);
  --ds-snackbar-primary-color-border-base: var(--ds-alias-background-color-grey-light);
  --ds-snackbar-primary-color-text-base: var(--ds-alias-text-color-primary);
  --ds-snackbar-primary-color-background-base: var(--ds-alias-background-color-grey-light);
  --ds-snackbar-success-color-border-base: var(--ds-alias-background-color-success-light);
  --ds-snackbar-success-color-text-base: var(--ds-alias-text-color-primary);
  --ds-snackbar-success-color-background-base: var(--ds-alias-background-color-success-light);
  --ds-snackbar-info-color-border-base: var(--ds-alias-background-color-info-light);
  --ds-snackbar-info-color-text-base: var(--ds-alias-text-color-primary);
  --ds-snackbar-info-color-background-base: var(--ds-alias-background-color-info-light);
  --ds-snackbar-warning-color-border-base: var(--ds-alias-background-color-warning-light);
  --ds-snackbar-warning-color-text-base: var(--ds-alias-text-color-primary);
  --ds-snackbar-warning-color-background-base: var(--ds-alias-background-color-warning-light);
  --ds-snackbar-danger-color-border-base: var(--ds-alias-background-color-danger-light);
  --ds-snackbar-danger-color-text-base: var(--ds-alias-text-color-primary);
  --ds-snackbar-danger-color-background-base: var(--ds-alias-background-color-danger-light);
  --ds-spinner-size: var(--ds-alias-space-2xl-mobile);
  --ds-spinner-circle-border-width: var(--ds-alias-border-width-md);
  --ds-spinner-circle-size: var(--ds-alias-space-lg-mobile);
  --ds-spinner-circle-color-background: var(--ds-alias-background-color-grey);
  --ds-spinner-circle-color-progress: var(--ds-alias-background-color-primary);
  --ds-spinner-inverted-circle-color-background: var(--ds-alias-background-color-white);
  --ds-spinner-inverted-circle-color-progress: var(--ds-alias-background-color-primary);
  --ds-toast-radius: var(--ds-alias-radius-base);
  --ds-toast-primary-color-border-base: var(--ds-alias-background-color-grey-light);
  --ds-toast-primary-color-text-base: var(--ds-alias-text-color-primary);
  --ds-toast-primary-color-background-base: var(--ds-alias-background-color-grey-light);
  --ds-toast-success-color-border-base: var(--ds-alias-background-color-success-light);
  --ds-toast-success-color-text-base: var(--ds-alias-text-color-primary);
  --ds-toast-success-color-background-base: var(--ds-alias-background-color-success-light);
  --ds-toast-info-color-border-base: var(--ds-alias-background-color-info-light);
  --ds-toast-info-color-text-base: var(--ds-alias-text-color-primary);
  --ds-toast-info-color-background-base: var(--ds-alias-background-color-info-light);
  --ds-toast-warning-color-border-base: var(--ds-alias-background-color-warning-light);
  --ds-toast-warning-color-text-base: var(--ds-alias-text-color-primary);
  --ds-toast-warning-color-background-base: var(--ds-alias-background-color-warning-light);
  --ds-toast-danger-color-border-base: var(--ds-alias-background-color-danger-light);
  --ds-toast-danger-color-text-base: var(--ds-alias-text-color-primary);
  --ds-toast-danger-color-background-base: var(--ds-alias-background-color-danger-light);
  --ds-tag-font-family: var(--ds-alias-text-family-body);
  --ds-tag-font-line-height: var(--ds-alias-text-line-height-body);
  --ds-tag-font-size-base: var(--ds-alias-text-size-base-mobile);
  --ds-tag-font-size-sm: var(--ds-alias-text-size-sm-mobile);
  --ds-tag-font-size-md: var(--ds-alias-text-size-base-mobile);
  --ds-tag-font-size-lg: var(--ds-alias-text-size-base-mobile);
  --ds-tag-font-weight-base: var(--ds-alias-text-weight-bold);
  --ds-tag-font-weight-sm: var(--ds-alias-text-weight-regular);
  --ds-tag-font-weight-md: var(--ds-alias-text-weight-bold);
  --ds-tag-font-weight-lg: var(--ds-alias-text-weight-bold);
  --ds-tag-space-padding-y-base: var(--ds-alias-space-2xs-mobile);
  --ds-tag-space-padding-y-sm: var(--ds-alias-space-none-mobile);
  --ds-tag-space-padding-y-md: var(--ds-alias-space-xs-mobile);
  --ds-tag-space-padding-y-lg: var(--ds-alias-space-sm-mobile);
  --ds-tag-space-padding-x-base: var(--ds-alias-space-sm-mobile);
  --ds-tag-space-padding-x-sm: var(--ds-alias-space-sm-mobile);
  --ds-tag-space-padding-x-md: var(--ds-alias-space-base-mobile);
  --ds-tag-space-padding-x-lg: var(--ds-alias-space-lg-mobile);
  --ds-tag-radius-base: var(--ds-alias-radius-lg);
  --ds-tag-radius-square: var(--ds-alias-radius-base);
  --ds-tag-radius-pill: var(--ds-alias-radius-rounded);
  --ds-tag-primary-color-text-base: var(--ds-alias-text-color-white);
  --ds-tag-primary-color-bg-base: var(--ds-alias-background-color-primary);
  --ds-tag-grey-color-text-base: var(--ds-alias-text-color-primary);
  --ds-tag-grey-color-bg-base: var(--ds-alias-background-color-grey-dark);
  --ds-tag-info-color-text-base: var(--ds-alias-text-color-white);
  --ds-tag-info-color-bg-base: var(--ds-alias-background-color-info-dark);
  --ds-tag-success-color-text-base: var(--ds-alias-text-color-white);
  --ds-tag-success-color-bg-base: var(--ds-alias-background-color-success-dark);
  --ds-tag-warning-color-text-base: var(--ds-alias-text-color-primary);
  --ds-tag-warning-color-bg-base: var(--ds-alias-background-color-warning-dark);
  --ds-tag-danger-color-text-base: var(--ds-alias-text-color-white);
  --ds-tag-danger-color-bg-base: var(--ds-alias-background-color-danger-dark);
  --ds-tag-purple-color-text-base: var(--ds-alias-text-color-primary);
  --ds-tag-purple-color-bg-base: var(--ds-alias-background-color-purple);
  --ds-tag-purple-light-color-text-base: var(--ds-alias-text-color-primary);
  --ds-tag-purple-light-color-bg-base: var(--ds-alias-background-color-purple-light);
  --ds-tag-purple-dark-color-text-base: var(--ds-alias-text-color-white);
  --ds-tag-red-color-text-base: var(--ds-alias-text-color-primary);
  --ds-tag-red-color-bg-base: var(--ds-alias-background-color-red);
  --ds-tag-red-light-color-text-base: var(--ds-alias-text-color-primary);
  --ds-tag-red-light-color-bg-base: var(--ds-alias-background-color-red-light);
  --ds-tag-red-dark-color-text-base: var(--ds-alias-text-color-white);
  --ds-tag-green-color-text-base: var(--ds-alias-text-color-primary);
  --ds-tag-green-color-bg-base: var(--ds-alias-background-color-green);
  --ds-tag-green-light-color-text-base: var(--ds-alias-text-color-primary);
  --ds-tag-green-light-color-bg-base: var(--ds-alias-background-color-green-light);
  --ds-tag-green-dark-color-text-base: var(--ds-alias-text-color-white);
  --ds-tag-yellow-color-text-base: var(--ds-alias-text-color-primary);
  --ds-tag-yellow-color-bg-base: var(--ds-alias-background-color-yellow);
  --ds-tag-yellow-light-color-text-base: var(--ds-alias-text-color-primary);
  --ds-tag-yellow-light-color-bg-base: var(--ds-alias-background-color-yellow-light);
  --ds-tag-yellow-dark-color-text-base: var(--ds-alias-text-color-white);
  --ds-tag-base-color-text-base: var(--ds-alias-text-color-primary);
  --ds-tag-base-color-bg-base: var(--ds-alias-background-color-grey);
  --ds-segment-radius: var(--ds-alias-radius-base);
  --ds-segment-background: var(--ds-alias-background-color-grey-light);
  --ds-segment-gap: var(--ds-alias-space-2xs-mobile);
  --ds-segment-padding: var(--ds-alias-space-2xs-mobile);
  --ds-segment-divider-color: var(--ds-alias-border-color-grey);
  --ds-segment-focus-color: var(--ds-alias-interaction-focus-color-base);
  --ds-segment-description-font-size: var(--ds-alias-text-size-sm-mobile);
  --ds-segment-description-font-weight: var(--ds-alias-text-weight-regular);
  --ds-segment-item-padding-inline: var(--ds-alias-space-base-mobile);
  --ds-segment-item-padding-block: var(--ds-alias-space-2xs-mobile);
  --ds-segment-item-font-weight: var(--ds-alias-text-weight-bold);
  --ds-segment-item-unselected-color-hover: var(--ds-alias-text-color-primary-hover);
  --ds-segment-item-unselected-color-active: var(--ds-alias-text-color-primary-active);
  --ds-segment-item-selected-background: var(--ds-alias-background-color-purple-light);
  --ds-segment-item-selected-color-hover: var(--ds-alias-text-color-primary-hover);
  --ds-segment-item-selected-color-active: var(--ds-alias-text-color-primary-active);
  --ds-segment-item-icon-size: var(--ds-alias-space-base-mobile);
  --ds-checkbox-radius: var(--ds-alias-radius-base);
  --ds-checkbox-font-family: var(--ds-alias-text-family-body);
  --ds-checkbox-line-height: var(--ds-alias-text-line-height-body);
  --ds-checkbox-label-color-hover: var(--ds-alias-text-color-primary-hover);
  --ds-checkbox-label-color-active: var(--ds-alias-text-color-primary-active);
  --ds-checkbox-border-width: var(--ds-alias-border-width-base);
  --ds-checkbox-focus-color: var(--ds-alias-interaction-focus-color-base);
  --ds-checkbox-tile-radius: var(--ds-alias-radius-base);
  --ds-checkbox-tile-border-width: var(--ds-alias-border-width-base);
  --ds-checkbox-tile-color-base-border: var(--ds-alias-border-color-grey);
  --ds-checkbox-tile-color-hover-background: var(--ds-alias-background-color-hover);
  --ds-checkbox-tile-color-hover-border: var(--ds-alias-border-color-primary-hover);
  --ds-checkbox-tile-color-active-background: var(--ds-alias-background-color-hover);
  --ds-checkbox-tile-color-active-border: var(--ds-alias-border-color-primary-active);
  --ds-checkbox-unchecked-color-base-border: var(--ds-alias-border-color-primary);
  --ds-checkbox-unchecked-color-hover-background: var(--ds-alias-background-color-hover);
  --ds-checkbox-unchecked-color-hover-border: var(--ds-alias-border-color-primary-hover);
  --ds-checkbox-unchecked-color-active-background: var(--ds-alias-background-color-hover);
  --ds-checkbox-unchecked-color-active-border: var(--ds-alias-border-color-primary-active);
  --ds-checkbox-checked-color-base-background: var(--ds-alias-background-color-primary);
  --ds-checkbox-checked-color-base-border: var(--ds-alias-border-color-primary);
  --ds-checkbox-checked-color-base-icon: var(--ds-alias-text-color-white);
  --ds-checkbox-checked-color-hover-background: var(--ds-alias-background-color-primary-hover);
  --ds-checkbox-checked-color-hover-border: var(--ds-alias-border-color-primary-hover);
  --ds-checkbox-checked-color-active-background: var(--ds-alias-background-color-primary-active);
  --ds-checkbox-checked-color-active-border: var(--ds-alias-border-color-primary-active);
  --ds-radio-radius: var(--ds-alias-radius-rounded);
  --ds-radio-font-family: var(--ds-alias-text-family-body);
  --ds-radio-line-height: var(--ds-alias-text-line-height-body);
  --ds-radio-label-color-hover: var(--ds-alias-text-color-primary-hover);
  --ds-radio-label-color-active: var(--ds-alias-text-color-primary-active);
  --ds-radio-border-width: var(--ds-alias-border-width-base);
  --ds-radio-focus-color: var(--ds-alias-interaction-focus-color-base);
  --ds-radio-tile-radius: var(--ds-alias-radius-base);
  --ds-radio-tile-border-width: var(--ds-alias-border-width-base);
  --ds-radio-tile-color-base-border: var(--ds-alias-border-color-grey);
  --ds-radio-tile-color-hover-background: var(--ds-alias-background-color-hover);
  --ds-radio-tile-color-hover-border: var(--ds-alias-border-color-primary-hover);
  --ds-radio-tile-color-active-background: var(--ds-alias-background-color-hover);
  --ds-radio-tile-color-active-border: var(--ds-alias-border-color-primary-active);
  --ds-radio-unchecked-color-base-border: var(--ds-alias-border-color-primary);
  --ds-radio-unchecked-color-hover-background: var(--ds-alias-background-color-hover);
  --ds-radio-unchecked-color-hover-border: var(--ds-alias-border-color-primary-hover);
  --ds-radio-unchecked-color-active-background: var(--ds-alias-background-color-hover);
  --ds-radio-unchecked-color-active-border: var(--ds-alias-border-color-primary-active);
  --ds-radio-checked-color-base-background: var(--ds-alias-background-color-primary);
  --ds-radio-checked-color-base-border: var(--ds-alias-border-color-primary);
  --ds-radio-checked-color-base-icon: var(--ds-alias-text-color-white);
  --ds-radio-checked-color-hover-background: var(--ds-alias-background-color-primary-hover);
  --ds-radio-checked-color-hover-border: var(--ds-alias-border-color-primary-hover);
  --ds-radio-checked-color-active-background: var(--ds-alias-background-color-primary-active);
  --ds-radio-checked-color-active-border: var(--ds-alias-border-color-primary-active);
  --ds-pagination-dots-background: var(--ds-alias-background-color-grey-light);
  --ds-pagination-dots-radius: var(--ds-alias-radius-base);
  --ds-pagination-dots-active-color: var(--ds-alias-background-color-primary);
  --ds-pagination-text-weight: var(--ds-alias-text-weight-bold);
  --ds-pagination-elevation-sticky: var(--ds-alias-z-index-sticky);
  --ds-progress-bar-background-light: var(--ds-alias-text-color-white);
  --ds-progress-bar-background-dark: var(--ds-alias-background-color-grey-light);
  --ds-progress-bar-line-radius: var(--ds-alias-radius-rounded);
  --ds-progress-bar-line-color-primary: var(--ds-alias-background-color-primary);
  --ds-accordion-summary-font-family: var(--ds-alias-text-family-body);
  --ds-accordion-summary-font-weight: var(--ds-alias-text-weight-regular);
  --ds-accordion-summary-font-line-height: var(--ds-alias-text-line-height-body);
  --ds-accordion-summary-font-size-mobile: var(--ds-alias-text-size-base-mobile);
  --ds-accordion-summary-font-size-tablet: var(--ds-alias-text-size-base-tablet);
  --ds-accordion-summary-font-size-desktop: var(--ds-alias-text-size-base-desktop);
  --ds-accordion-summary-color-hover: var(--ds-alias-text-color-primary-hover);
  --ds-accordion-summary-color-active: var(--ds-alias-text-color-primary-active);
  --ds-accordion-radius-base: var(--ds-alias-radius-base);
  --ds-tabs-gap: var(--ds-alias-border-width-base);
  --ds-tabs-border-color: var(--ds-alias-border-color-grey);
  --ds-tabs-indicator-height: var(--ds-alias-border-width-base);
  --ds-tabs-vertical-gap: var(--ds-alias-space-lg-mobile);
  --ds-tabs-scroll-fade-background: var(--ds-alias-background-color-white);
  --ds-tabs-tab-font-family: var(--ds-alias-text-family-heading);
  --ds-tabs-tab-font-size: var(--ds-alias-text-size-base-mobile);
  --ds-tabs-tab-font-weight: var(--ds-alias-text-weight-bold);
  --ds-tabs-tab-font-weight-selected: var(--ds-alias-text-weight-bold);
  --ds-tabs-tab-color-focus: var(--ds-alias-interaction-focus-color-base);
  --ds-tabs-tab-color-base: var(--ds-alias-text-color-primary-light);
  --ds-tabs-tab-color-hover: var(--ds-alias-text-color-primary-hover);
  --ds-tabs-tab-color-active: var(--ds-alias-text-color-primary-active);
  --ds-tabs-tab-color-selected: var(--ds-alias-text-color-primary);
  --ds-tabs-tab-border-color-selected: var(--ds-alias-border-color-primary);
  --ds-tabs-color-purple: var(--ds-alias-background-color-purple);
  --ds-tabs-color-green: var(--ds-alias-background-color-green);
  --ds-tabs-color-red: var(--ds-alias-background-color-red);
  --ds-tabs-color-yellow: var(--ds-alias-background-color-yellow);
  --ds-steps-connector-color: var(--ds-alias-border-color-grey);
  --ds-steps-connector-color-filled: var(--ds-alias-background-color-primary);
  --ds-steps-connector-height: var(--ds-alias-border-width-base);
  --ds-steps-circle-color-bg: var(--ds-alias-background-color-grey);
  --ds-steps-circle-color-bg-selected: var(--ds-alias-background-color-primary);
  --ds-steps-circle-color-bg-done: var(--ds-alias-background-color-primary);
  --ds-steps-circle-color-bg-invalid: var(--ds-alias-background-color-danger);
  --ds-steps-circle-color-bg-disabled: var(--ds-alias-background-color-grey);
  --ds-steps-circle-color-text: var(--ds-alias-text-color-primary);
  --ds-steps-circle-color-text-selected: var(--ds-alias-text-color-white);
  --ds-steps-circle-color-text-done: var(--ds-alias-text-color-white);
  --ds-steps-circle-color-text-invalid: var(--ds-alias-text-color-white);
  --ds-steps-circle-color-text-disabled: var(--ds-alias-text-color-primary);
  --ds-steps-step-font-family: var(--ds-alias-text-family-heading);
  --ds-steps-step-font-size: var(--ds-alias-text-size-base-mobile);
  --ds-steps-step-font-size-sm: var(--ds-alias-text-size-sm-mobile);
  --ds-steps-step-font-weight: var(--ds-alias-text-weight-bold);
  --ds-steps-step-color-base: var(--ds-alias-text-color-primary-light);
  --ds-steps-step-color-selected: var(--ds-alias-text-color-primary);
  --ds-steps-step-color-focus: var(--ds-alias-interaction-focus-color-base);
  --ds-steps-color-purple: var(--ds-alias-background-color-purple);
  --ds-steps-color-green: var(--ds-alias-background-color-green);
  --ds-steps-color-red: var(--ds-alias-background-color-red);
  --ds-steps-color-yellow: var(--ds-alias-background-color-yellow);
  --ds-carousel-gap: var(--ds-alias-space-base-mobile);
  --ds-carousel-scroll-fade-bg: var(--ds-alias-background-color-white);
  --ds-carousel-dot-color: var(--ds-alias-border-color-grey);
  --ds-carousel-dot-color-active: var(--ds-alias-border-color-primary);
  --ds-carousel-control-color: var(--ds-alias-text-color-primary);
  --ds-carousel-scroll-btn-background-active: var(--ds-alias-background-color-primary);
  --ds-carousel-scroll-btn-background-active-hover: var(--ds-alias-background-color-primary-hover);
  --ds-carousel-scroll-btn-background-active-pressed: var(--ds-alias-background-color-primary-active);
  --ds-carousel-scroll-btn-color-active: var(--ds-alias-text-color-white);
  --ds-tooltip-bg: var(--ds-alias-background-color-primary-active);
  --ds-tooltip-color: var(--ds-alias-text-color-white);
  --ds-tooltip-radius: var(--ds-alias-radius-base);
  --ds-tooltip-shadow: var(--ds-alias-shadow-box-base);
  --ds-tooltip-line-height: var(--ds-alias-text-line-height-body);
  --ds-tooltip-z-index: var(--ds-alias-z-index-tooltip);
  --ds-tooltip-px: var(--ds-alias-space-sm-mobile);
  --ds-tooltip-py: var(--ds-alias-space-xs-mobile);
  --ds-tooltip-font-family: var(--ds-alias-text-family-body);
  --ds-tooltip-font-size: var(--ds-alias-text-size-sm-desktop);
  --ds-table-color: var(--ds-alias-text-color-primary);
  --ds-table-background-color: var(--ds-alias-background-color-white);
  --ds-table-body-background-color: var(--ds-alias-background-color-transparent);
  --ds-table-cell-border-color: var(--ds-alias-border-color-grey-light);
  --ds-table-cell-heading-color: var(--ds-alias-text-color-primary);
  --ds-table-head-cell-color: var(--ds-alias-text-color-primary);
  --ds-table-head-cell-border-color: var(--ds-alias-border-color-primary);
  --ds-table-head-background-color: var(--ds-alias-background-color-transparent);
  --ds-table-head-font-size: var(--ds-alias-text-size-base-mobile);
  --ds-table-head-font-family: var(--ds-alias-text-family-heading);
  --ds-table-foot-cell-color: var(--ds-alias-text-color-primary);
  --ds-table-foot-background-color: var(--ds-alias-background-color-transparent);
  --ds-table-row-background-color-hover: var(--ds-alias-background-color-grey-light);
  --ds-table-row-background-color-active: var(--ds-alias-background-color-grey-light);
  --ds-table-row-color-active: var(--ds-alias-text-color-primary);
  --ds-table-striped-row-even-background-color-base: var(--ds-alias-background-color-grey-lighter);
  --ds-table-striped-row-even-background-color-hover: var(--ds-alias-background-color-grey-light);
  --ds-popup-background: var(--ds-alias-background-color-white);
  --ds-popup-radius: var(--ds-alias-radius-base);
  --ds-popup-shadow: var(--ds-alias-shadow-box-base);
  --ds-popup-padding: var(--ds-alias-space-md-mobile);
  --ds-popup-z-index: var(--ds-alias-z-index-popup);
  --ds-popup-backdrop-background: var(--ds-alias-background-color-primary-active);
  --ds-popup-backdrop-opacity: var(--ds-alias-opacity-backdrop);
  --ds-drawer-background: var(--ds-alias-background-color-white);
  --ds-drawer-radius: var(--ds-alias-radius-lg);
  --ds-drawer-padding: var(--ds-alias-space-md-mobile);
  --ds-drawer-backdrop-background: var(--ds-alias-background-color-primary-active);
  --ds-drawer-backdrop-opacity: var(--ds-alias-opacity-backdrop);
  --ds-file-upload-label-font-family: var(--ds-alias-text-family-body);
  --ds-file-upload-label-font-weight: var(--ds-alias-text-weight-bold);
  --ds-file-upload-label-text-size: var(--ds-alias-text-size-base-mobile);
  --ds-file-upload-label-text-line-height: var(--ds-alias-text-line-height-body);
  --ds-file-upload-label-text-color: var(--ds-alias-text-color-primary);
  --ds-file-upload-drop-zone-border-color-base: var(--ds-alias-border-color-grey);
  --ds-file-upload-drop-zone-border-color-hover: var(--ds-alias-border-color-primary);
  --ds-file-upload-drop-zone-border-color-active: var(--ds-alias-border-color-primary);
  --ds-file-upload-drop-zone-border-color-focus: var(--ds-alias-border-color-primary);
  --ds-file-upload-drop-zone-border-color-danger: var(--ds-alias-text-color-danger);
  --ds-file-upload-drop-zone-border-color-success: var(--ds-alias-text-color-success);
  --ds-file-upload-drop-zone-border-color-warning: var(--ds-alias-text-color-warning);
  --ds-file-upload-drop-zone-background-color-base: var(--ds-alias-background-color-transparent);
  --ds-file-upload-drop-zone-background-color-hover: var(--ds-alias-background-color-hover);
  --ds-file-upload-drop-zone-background-color-active: var(--ds-alias-background-color-hover);
  --ds-file-upload-drop-zone-background-color-disabled: var(--ds-alias-background-color-disabled);
  --ds-file-upload-drop-zone-text-color-hover: var(--ds-alias-text-color-primary-hover);
  --ds-file-upload-drop-zone-text-color-active: var(--ds-alias-text-color-primary-active);
  --ds-file-upload-file-list-background-color: var(--ds-alias-background-color-grey-light);
  --ds-file-upload-file-name-text-color: var(--ds-alias-text-color-primary);
  --ds-file-upload-file-size-text-color: var(--ds-alias-text-color-primary-light);
  --ds-alias-interaction-focus-color-start: var(--ds-alias-interaction-focus-color-border);
  --ds-alias-interaction-focus-color-inverted-start: var(--ds-alias-interaction-focus-color-border);
  --ds-footer-color-link-hover: var(--ds-button-color-inverted-link-hover-text);
  --ds-button-color-inverted-link-base-text: var(--ds-alias-text-color-inverted-primary);
  --ds-link-color-inverted: var(--ds-alias-text-color-inverted-primary);
  --ds-list-marker-success: var(--ds-icon-color-success);
  --ds-list-marker-warning: var(--ds-icon-color-warning);
  --ds-list-marker-danger: var(--ds-icon-color-danger);
  --ds-modal-backdrop-opacity: var(--ds-backdrop-opacity);
  --ds-navbar-base-menu-item-color-selected: var(--ds-alias-text-color-inverted-primary);
  --ds-navbar-light-focus-color-end: var(--ds-alias-interaction-focus-color-end);
  --ds-pagination-disabled-text-color: var(--ds-button-color-disabled-base-text);
  --ds-file-upload-drop-zone-text-color-disabled: var(--ds-button-color-disabled-base-text);
  --ds-file-upload-icon-color-disabled: var(--ds-button-color-disabled-base-text);
  --ds-file-upload-control-font-family: var(--ds-form-control-family);
  --ds-file-upload-control-font-weight: var(--ds-form-control-weight);
  --ds-file-upload-control-text-size: var(--ds-form-control-font-size-mobile);
  --ds-file-upload-control-text-line-height: var(--ds-form-control-line-height);
  --ds-file-upload-control-text-color-base: var(--ds-form-control-color-value-base);
  --ds-file-upload-control-placeholder-color-base: var(--ds-form-control-color-placeholder-base);
  --ds-file-upload-description-font-family: var(--ds-form-description-family);
  --ds-file-upload-description-font-weight: var(--ds-form-description-weight);
  --ds-file-upload-description-text-size: var(--ds-form-description-size-mobile);
  --ds-file-upload-description-text-line-height: var(--ds-form-description-line-height);
  --ds-file-upload-description-text-color-base: var(--ds-form-description-color-base);
  --ds-file-upload-description-text-color-danger: var(--ds-form-description-color-danger);
  --ds-file-upload-description-text-color-success: var(--ds-form-description-color-success);
  --ds-file-upload-description-text-color-warning: var(--ds-form-description-color-warning);
  --ds-navbar-light-focus-color-start: var(--ds-alias-interaction-focus-color-start);

  /* Base tokens */
  --ds-alias-container-space: var(--ds-global-size-space-16);
  --ds-alias-space-none: var(--ds-global-size-space-0);
  --ds-alias-space-auto: var(--ds-global-size-space-auto);
  --ds-alias-space-2xs: var(--ds-global-size-space-4);
  --ds-alias-space-xs: var(--ds-global-size-space-8);
  --ds-alias-space-sm: var(--ds-global-size-space-12);
  --ds-alias-space-base: var(--ds-global-size-space-16);
  --ds-alias-space-md: var(--ds-global-size-space-20);
  --ds-alias-space-lg: var(--ds-global-size-space-24);
  --ds-alias-space-xl: var(--ds-global-size-space-32);
  --ds-alias-space-2xl: var(--ds-global-size-space-48);
  --ds-alias-space-3xl: var(--ds-global-size-space-56);
  --ds-alias-space-4xl: var(--ds-global-size-space-64);
  --ds-alias-text-size-none: var(--ds-global-font-size-0);
  --ds-alias-text-size-xs: var(--ds-global-font-size-12);
  --ds-alias-text-size-sm: var(--ds-global-font-size-14);
  --ds-alias-text-size-base: var(--ds-global-font-size-16);
  --ds-alias-text-size-md: var(--ds-global-font-size-16);
  --ds-alias-text-size-lg: var(--ds-global-font-size-18);
  --ds-alias-text-size-xl: var(--ds-global-font-size-20);
  --ds-alias-text-size-2xl: var(--ds-global-font-size-24);
  --ds-alias-text-size-3xl: var(--ds-global-font-size-28);
  --ds-alias-text-size-4xl: var(--ds-global-font-size-32);
  --ds-alias-text-size-5xl: var(--ds-global-font-size-48);
  --ds-icon-tile-size-base: var(--ds-global-size-space-32);
  --ds-icon-tile-size-lg: var(--ds-global-size-space-48);
  --ds-icon-tile-size-xl: var(--ds-global-size-space-64);
  --ds-heading-1-size: var(--ds-alias-text-size-3xl-mobile);
  --ds-heading-2-size: var(--ds-alias-text-size-2xl-mobile);
  --ds-heading-3-size: var(--ds-alias-text-size-xl-mobile);
  --ds-heading-4-size: var(--ds-alias-text-size-lg-mobile);
  --ds-heading-5-size: var(--ds-alias-text-size-base-mobile);
  --ds-heading-display-1-size: var(--ds-alias-text-size-5xl-mobile);
  --ds-heading-display-2-size: var(--ds-alias-text-size-4xl-mobile);
  --ds-card-space-sm: var(--ds-alias-space-base-mobile);
  --ds-card-space-base: var(--ds-alias-space-base-mobile);
  --ds-card-space-md: var(--ds-alias-space-base-mobile);
  --ds-card-space-lg: var(--ds-alias-space-base-mobile);
  --ds-date-calendar-size: var(--ds-alias-text-size-base-mobile);
  --ds-form-label-size: var(--ds-alias-text-size-sm-mobile);
  --ds-form-label-size-2: var(--ds-alias-text-size-sm-mobile);
  --ds-form-control-font-size: var(--ds-alias-text-size-base-mobile);
  --ds-form-description-size: var(--ds-alias-text-size-xs-mobile);
  --ds-select-label-size: var(--ds-alias-text-size-sm-mobile);
  --ds-select-control-font-size: var(--ds-alias-text-size-base-mobile);
  --ds-select-description-size: var(--ds-alias-text-size-xs-mobile);
  --ds-label-size-3xl: var(--ds-alias-text-size-3xl-mobile);
  --ds-label-size-2xl: var(--ds-alias-text-size-2xl-mobile);
  --ds-label-size-xl: var(--ds-alias-text-size-xl-mobile);
  --ds-label-size-lg: var(--ds-alias-text-size-lg-mobile);
  --ds-label-size-md: var(--ds-alias-text-size-md-mobile);
  --ds-label-size-base: var(--ds-alias-text-size-base-mobile);
  --ds-label-size-sm: var(--ds-alias-text-size-sm-mobile);
  --ds-modal-heading-size: var(--ds-alias-text-size-2xl-mobile);
  --ds-accordion-summary-font-size: var(--ds-alias-text-size-base-mobile);

  /* Device tokens */
  --ds-alias-container-space-device: var(--ds-global-size-space-16);
  --ds-alias-space-none-device: var(--ds-global-size-space-0);
  --ds-alias-space-auto-device: var(--ds-global-size-space-auto);
  --ds-alias-space-2xs-device: var(--ds-global-size-space-4);
  --ds-alias-space-xs-device: var(--ds-global-size-space-8);
  --ds-alias-space-sm-device: var(--ds-global-size-space-12);
  --ds-alias-space-base-device: var(--ds-global-size-space-16);
  --ds-alias-space-md-device: var(--ds-global-size-space-20);
  --ds-alias-space-lg-device: var(--ds-global-size-space-24);
  --ds-alias-space-xl-device: var(--ds-global-size-space-32);
  --ds-alias-space-2xl-device: var(--ds-global-size-space-48);
  --ds-alias-space-3xl-device: var(--ds-global-size-space-56);
  --ds-alias-space-4xl-device: var(--ds-global-size-space-64);
  --ds-alias-text-size-none-device: var(--ds-global-font-size-0);
  --ds-alias-text-size-xs-device: var(--ds-global-font-size-12);
  --ds-alias-text-size-sm-device: var(--ds-global-font-size-14);
  --ds-alias-text-size-base-device: var(--ds-global-font-size-16);
  --ds-alias-text-size-md-device: var(--ds-global-font-size-16);
  --ds-alias-text-size-lg-device: var(--ds-global-font-size-18);
  --ds-alias-text-size-xl-device: var(--ds-global-font-size-20);
  --ds-alias-text-size-2xl-device: var(--ds-global-font-size-24);
  --ds-alias-text-size-3xl-device: var(--ds-global-font-size-28);
  --ds-alias-text-size-4xl-device: var(--ds-global-font-size-32);
  --ds-alias-text-size-5xl-device: var(--ds-global-font-size-48);
  --ds-icon-tile-size-base-device: var(--ds-global-size-space-32);
  --ds-icon-tile-size-lg-device: var(--ds-global-size-space-48);
  --ds-icon-tile-size-xl-device: var(--ds-global-size-space-64);
  --ds-heading-1-size-device: var(--ds-alias-text-size-3xl-mobile);
  --ds-heading-2-size-device: var(--ds-alias-text-size-2xl-mobile);
  --ds-heading-3-size-device: var(--ds-alias-text-size-xl-mobile);
  --ds-heading-4-size-device: var(--ds-alias-text-size-lg-mobile);
  --ds-heading-5-size-device: var(--ds-alias-text-size-base-mobile);
  --ds-heading-display-1-size-device: var(--ds-alias-text-size-5xl-mobile);
  --ds-heading-display-2-size-device: var(--ds-alias-text-size-4xl-mobile);
  --ds-card-space-sm-device: var(--ds-alias-space-base-mobile);
  --ds-card-space-base-device: var(--ds-alias-space-base-mobile);
  --ds-card-space-md-device: var(--ds-alias-space-base-mobile);
  --ds-card-space-lg-device: var(--ds-alias-space-base-mobile);
  --ds-date-calendar-size-device: var(--ds-alias-text-size-base-mobile);
  --ds-form-label-size-device: var(--ds-alias-text-size-sm-mobile);
  --ds-form-label-size-2-device: var(--ds-alias-text-size-sm-mobile);
  --ds-form-control-font-size-device: var(--ds-alias-text-size-base-mobile);
  --ds-form-description-size-device: var(--ds-alias-text-size-xs-mobile);
  --ds-select-label-size-device: var(--ds-alias-text-size-sm-mobile);
  --ds-select-control-font-size-device: var(--ds-alias-text-size-base-mobile);
  --ds-select-description-size-device: var(--ds-alias-text-size-xs-mobile);
  --ds-label-size-3xl-device: var(--ds-alias-text-size-3xl-mobile);
  --ds-label-size-2xl-device: var(--ds-alias-text-size-2xl-mobile);
  --ds-label-size-xl-device: var(--ds-alias-text-size-xl-mobile);
  --ds-label-size-lg-device: var(--ds-alias-text-size-lg-mobile);
  --ds-label-size-md-device: var(--ds-alias-text-size-md-mobile);
  --ds-label-size-base-device: var(--ds-alias-text-size-base-mobile);
  --ds-label-size-sm-device: var(--ds-alias-text-size-sm-mobile);
  --ds-modal-heading-size-device: var(--ds-alias-text-size-2xl-mobile);
  --ds-accordion-summary-font-size-device: var(--ds-alias-text-size-base-mobile);
}

/* Device tokens: Tablet */

@media (min-width: 769px) {
:root, :host {
  --ds-alias-breakpoint-device: var(--ds-global-size-breakpoint-1);
  --ds-alias-container-space-device: var(--ds-global-size-space-40);
  --ds-alias-space-none-device: var(--ds-global-size-space-0);
  --ds-alias-space-auto-device: var(--ds-global-size-space-auto);
  --ds-alias-space-2xs-device: var(--ds-global-size-space-4);
  --ds-alias-space-xs-device: var(--ds-global-size-space-8);
  --ds-alias-space-sm-device: var(--ds-global-size-space-12);
  --ds-alias-space-base-device: var(--ds-global-size-space-16);
  --ds-alias-space-md-device: var(--ds-global-size-space-20);
  --ds-alias-space-lg-device: var(--ds-global-size-space-24);
  --ds-alias-space-xl-device: var(--ds-global-size-space-40);
  --ds-alias-space-2xl-device: var(--ds-global-size-space-56);
  --ds-alias-space-3xl-device: var(--ds-global-size-space-72);
  --ds-alias-space-4xl-device: var(--ds-global-size-space-96);
  --ds-alias-text-size-none-device: var(--ds-global-font-size-0);
  --ds-alias-text-size-xs-device: var(--ds-global-font-size-12);
  --ds-alias-text-size-sm-device: var(--ds-global-font-size-14);
  --ds-alias-text-size-base-device: var(--ds-global-font-size-16);
  --ds-alias-text-size-md-device: var(--ds-global-font-size-18);
  --ds-alias-text-size-lg-device: var(--ds-global-font-size-18);
  --ds-alias-text-size-xl-device: var(--ds-global-font-size-24);
  --ds-alias-text-size-2xl-device: var(--ds-global-font-size-32);
  --ds-alias-text-size-3xl-device: var(--ds-global-font-size-40);
  --ds-alias-text-size-4xl-device: var(--ds-global-font-size-48);
  --ds-alias-text-size-5xl-device: var(--ds-global-font-size-80);
  --ds-icon-tile-size-base-device: var(--ds-global-size-space-48);
  --ds-icon-tile-size-lg-device: var(--ds-global-size-space-64);
  --ds-icon-tile-size-xl-device: var(--ds-global-size-space-96);
  --ds-heading-1-size-device: var(--ds-alias-text-size-3xl-tablet);
  --ds-heading-2-size-device: var(--ds-alias-text-size-2xl-tablet);
  --ds-heading-3-size-device: var(--ds-alias-text-size-xl-tablet);
  --ds-heading-4-size-device: var(--ds-alias-text-size-lg-tablet);
  --ds-heading-5-size-device: var(--ds-alias-text-size-base-tablet);
  --ds-heading-display-1-size-device: var(--ds-alias-text-size-5xl-tablet);
  --ds-heading-display-2-size-device: var(--ds-alias-text-size-4xl-tablet);
  --ds-card-space-sm-device: var(--ds-alias-space-base-mobile);
  --ds-card-space-base-device: var(--ds-alias-space-lg-mobile);
  --ds-card-space-md-device: var(--ds-alias-space-lg-mobile);
  --ds-card-space-lg-device: var(--ds-alias-space-xl-mobile);
  --ds-date-calendar-size-device: var(--ds-alias-text-size-base-tablet);
  --ds-form-label-size-device: var(--ds-alias-text-size-sm-tablet);
  --ds-form-label-size-2-device: var(--ds-alias-text-size-sm-tablet);
  --ds-form-control-font-size-device: var(--ds-alias-text-size-base-tablet);
  --ds-form-description-size-device: var(--ds-alias-text-size-xs-tablet);
  --ds-select-label-size-device: var(--ds-alias-text-size-sm-tablet);
  --ds-select-control-font-size-device: var(--ds-alias-text-size-base-tablet);
  --ds-select-description-size-device: var(--ds-alias-text-size-xs-tablet);
  --ds-label-size-3xl-device: var(--ds-alias-text-size-3xl-tablet);
  --ds-label-size-2xl-device: var(--ds-alias-text-size-2xl-tablet);
  --ds-label-size-xl-device: var(--ds-alias-text-size-xl-tablet);
  --ds-label-size-lg-device: var(--ds-alias-text-size-lg-tablet);
  --ds-label-size-md-device: var(--ds-alias-text-size-md-tablet);
  --ds-label-size-base-device: var(--ds-alias-text-size-base-tablet);
  --ds-label-size-sm-device: var(--ds-alias-text-size-sm-tablet);
  --ds-modal-heading-size-device: var(--ds-alias-text-size-2xl-tablet);
  --ds-accordion-summary-font-size-device: var(--ds-alias-text-size-base-tablet);
}
}

/* Device tokens: Desktop */

@media (min-width: 1024px) {
:root, :host {
  --ds-alias-breakpoint-device: var(--ds-global-size-breakpoint-2);
  --ds-alias-container-space-device: var(--ds-global-size-space-48);
  --ds-alias-space-none-device: var(--ds-global-size-space-0);
  --ds-alias-space-auto-device: var(--ds-global-size-space-auto);
  --ds-alias-space-2xs-device: var(--ds-global-size-space-4);
  --ds-alias-space-xs-device: var(--ds-global-size-space-8);
  --ds-alias-space-sm-device: var(--ds-global-size-space-12);
  --ds-alias-space-base-device: var(--ds-global-size-space-16);
  --ds-alias-space-md-device: var(--ds-global-size-space-24);
  --ds-alias-space-lg-device: var(--ds-global-size-space-32);
  --ds-alias-space-xl-device: var(--ds-global-size-space-48);
  --ds-alias-space-2xl-device: var(--ds-global-size-space-64);
  --ds-alias-space-3xl-device: var(--ds-global-size-space-96);
  --ds-alias-space-4xl-device: var(--ds-global-size-space-128);
  --ds-alias-text-size-none-device: var(--ds-global-font-size-0);
  --ds-alias-text-size-xs-device: var(--ds-global-font-size-12);
  --ds-alias-text-size-sm-device: var(--ds-global-font-size-14);
  --ds-alias-text-size-base-device: var(--ds-global-font-size-16);
  --ds-alias-text-size-md-device: var(--ds-global-font-size-18);
  --ds-alias-text-size-lg-device: var(--ds-global-font-size-18);
  --ds-alias-text-size-xl-device: var(--ds-global-font-size-24);
  --ds-alias-text-size-2xl-device: var(--ds-global-font-size-32);
  --ds-alias-text-size-3xl-device: var(--ds-global-font-size-40);
  --ds-alias-text-size-4xl-device: var(--ds-global-font-size-48);
  --ds-alias-text-size-5xl-device: var(--ds-global-font-size-80);
  --ds-heading-1-size-device: var(--ds-alias-text-size-3xl-desktop);
  --ds-heading-2-size-device: var(--ds-alias-text-size-2xl-desktop);
  --ds-heading-3-size-device: var(--ds-alias-text-size-xl-desktop);
  --ds-heading-4-size-device: var(--ds-alias-text-size-lg-desktop);
  --ds-heading-5-size-device: var(--ds-alias-text-size-base-desktop);
  --ds-heading-display-1-size-device: var(--ds-alias-text-size-5xl-desktop);
  --ds-heading-display-2-size-device: var(--ds-alias-text-size-4xl-desktop);
  --ds-card-space-sm-device: var(--ds-alias-space-base-mobile);
  --ds-card-space-base-device: var(--ds-alias-space-lg-mobile);
  --ds-card-space-md-device: var(--ds-alias-space-xl-mobile);
  --ds-card-space-lg-device: var(--ds-alias-space-2xl-mobile);
  --ds-date-calendar-size-device: var(--ds-alias-text-size-base-desktop);
  --ds-form-label-size-device: var(--ds-alias-text-size-sm-desktop);
  --ds-form-label-size-2-device: var(--ds-alias-text-size-sm-desktop);
  --ds-form-control-font-size-device: var(--ds-alias-text-size-base-desktop);
  --ds-form-description-size-device: var(--ds-alias-text-size-xs-desktop);
  --ds-select-label-size-device: var(--ds-alias-text-size-sm-desktop);
  --ds-select-control-font-size-device: var(--ds-alias-text-size-base-desktop);
  --ds-select-description-size-device: var(--ds-alias-text-size-xs-desktop);
  --ds-label-size-3xl-device: var(--ds-alias-text-size-3xl-desktop);
  --ds-label-size-2xl-device: var(--ds-alias-text-size-2xl-desktop);
  --ds-label-size-xl-device: var(--ds-alias-text-size-xl-desktop);
  --ds-label-size-lg-device: var(--ds-alias-text-size-lg-tablet);
  --ds-label-size-md-device: var(--ds-alias-text-size-md-desktop);
  --ds-label-size-base-device: var(--ds-alias-text-size-base-tablet);
  --ds-label-size-sm-device: var(--ds-alias-space-sm-desktop);
  --ds-modal-heading-size-device: var(--ds-alias-text-size-2xl-desktop);
  --ds-accordion-summary-font-size-device: var(--ds-alias-text-size-base-desktop);
}
}


/* layer: preflights */
.focus\:text-white:focus { color: var(--ds-alias-text-color-white) !important; }
.hover\:text-white:hover { color: var(--ds-alias-text-color-white) !important; }
.active\:text-white:active { color: var(--ds-alias-text-color-white) !important; }
.focus\:text-primary-light:focus { color: var(--ds-alias-text-color-primary-light) !important; }
.hover\:text-primary-light:hover { color: var(--ds-alias-text-color-primary-light) !important; }
.active\:text-primary-light:active { color: var(--ds-alias-text-color-primary-light) !important; }
.focus\:text-hint:focus { color: var(--ds-alias-text-color-hint) !important; }
.hover\:text-hint:hover { color: var(--ds-alias-text-color-hint) !important; }
.active\:text-hint:active { color: var(--ds-alias-text-color-hint) !important; }
.focus\:text-placeholder:focus { color: var(--ds-alias-text-color-placeholder) !important; }
.hover\:text-placeholder:hover { color: var(--ds-alias-text-color-placeholder) !important; }
.active\:text-placeholder:active { color: var(--ds-alias-text-color-placeholder) !important; }
.focus\:text-disabled:focus { color: var(--ds-alias-text-color-disabled) !important; }
.hover\:text-disabled:hover { color: var(--ds-alias-text-color-disabled) !important; }
.active\:text-disabled:active { color: var(--ds-alias-text-color-disabled) !important; }
.focus\:text-inverted-disabled:focus { color: var(--ds-alias-text-color-inverted-disabled) !important; }
.hover\:text-inverted-disabled:hover { color: var(--ds-alias-text-color-inverted-disabled) !important; }
.active\:text-inverted-disabled:active { color: var(--ds-alias-text-color-inverted-disabled) !important; }
.focus\:text-info:focus { color: var(--ds-alias-text-color-info) !important; }
.hover\:text-info:hover { color: var(--ds-alias-text-color-info) !important; }
.active\:text-info:active { color: var(--ds-alias-text-color-info) !important; }
.focus\:text-warning:focus { color: var(--ds-alias-text-color-warning) !important; }
.hover\:text-warning:hover { color: var(--ds-alias-text-color-warning) !important; }
.active\:text-warning:active { color: var(--ds-alias-text-color-warning) !important; }
.focus\:text-success:focus { color: var(--ds-alias-text-color-success) !important; }
.hover\:text-success:hover { color: var(--ds-alias-text-color-success) !important; }
.active\:text-success:active { color: var(--ds-alias-text-color-success) !important; }
.focus\:text-danger:focus { color: var(--ds-alias-text-color-danger) !important; }
.hover\:text-danger:hover { color: var(--ds-alias-text-color-danger) !important; }
.active\:text-danger:active { color: var(--ds-alias-text-color-danger) !important; }
.focus\:text-danger-hover:focus { color: var(--ds-alias-text-color-danger-hover) !important; }
.hover\:text-danger-hover:hover { color: var(--ds-alias-text-color-danger-hover) !important; }
.active\:text-danger-hover:active { color: var(--ds-alias-text-color-danger-hover) !important; }
.focus\:text-danger-active:focus { color: var(--ds-alias-text-color-danger-active) !important; }
.hover\:text-danger-active:hover { color: var(--ds-alias-text-color-danger-active) !important; }
.active\:text-danger-active:active { color: var(--ds-alias-text-color-danger-active) !important; }
.focus\:text-primary:focus { color: var(--ds-alias-text-color-primary) !important; }
.hover\:text-primary:hover { color: var(--ds-alias-text-color-primary) !important; }
.active\:text-primary:active { color: var(--ds-alias-text-color-primary) !important; }
.focus\:text-primary-hover:focus { color: var(--ds-alias-text-color-primary-hover) !important; }
.hover\:text-primary-hover:hover { color: var(--ds-alias-text-color-primary-hover) !important; }
.active\:text-primary-hover:active { color: var(--ds-alias-text-color-primary-hover) !important; }
.focus\:text-primary-active:focus { color: var(--ds-alias-text-color-primary-active) !important; }
.hover\:text-primary-active:hover { color: var(--ds-alias-text-color-primary-active) !important; }
.active\:text-primary-active:active { color: var(--ds-alias-text-color-primary-active) !important; }
.focus\:text-inverted-primary:focus { color: var(--ds-alias-text-color-inverted-primary) !important; }
.hover\:text-inverted-primary:hover { color: var(--ds-alias-text-color-inverted-primary) !important; }
.active\:text-inverted-primary:active { color: var(--ds-alias-text-color-inverted-primary) !important; }
.focus\:text-inverted-primary-hover:focus { color: var(--ds-alias-text-color-inverted-primary-hover) !important; }
.hover\:text-inverted-primary-hover:hover { color: var(--ds-alias-text-color-inverted-primary-hover) !important; }
.active\:text-inverted-primary-hover:active { color: var(--ds-alias-text-color-inverted-primary-hover) !important; }
.focus\:text-inverted-primary-active:focus { color: var(--ds-alias-text-color-inverted-primary-active) !important; }
.hover\:text-inverted-primary-active:hover { color: var(--ds-alias-text-color-inverted-primary-active) !important; }
.active\:text-inverted-primary-active:active { color: var(--ds-alias-text-color-inverted-primary-active) !important; }
.focus\:text-grey-light:focus { color: var(--ds-alias-text-color-grey-light) !important; }
.hover\:text-grey-light:hover { color: var(--ds-alias-text-color-grey-light) !important; }
.active\:text-grey-light:active { color: var(--ds-alias-text-color-grey-light) !important; }
.focus\:text-grey:focus { color: var(--ds-alias-text-color-grey) !important; }
.hover\:text-grey:hover { color: var(--ds-alias-text-color-grey) !important; }
.active\:text-grey:active { color: var(--ds-alias-text-color-grey) !important; }
.focus\:text-grey-dark:focus { color: var(--ds-alias-text-color-grey-dark) !important; }
.hover\:text-grey-dark:hover { color: var(--ds-alias-text-color-grey-dark) !important; }
.active\:text-grey-dark:active { color: var(--ds-alias-text-color-grey-dark) !important; }
.focus\:text-sky-dark:focus { color: var(--ds-alias-text-color-sky-dark) !important; }
.hover\:text-sky-dark:hover { color: var(--ds-alias-text-color-sky-dark) !important; }
.active\:text-sky-dark:active { color: var(--ds-alias-text-color-sky-dark) !important; }
/* layer: default */
.m-none{margin:var(--ds-alias-space-none-device) !important;}
.m-auto{margin:var(--ds-alias-space-auto-device) !important;}
.m-2xs,
.m-xx-small{margin:var(--ds-alias-space-2xs-device) !important;}
.m-x-small,
.m-xs{margin:var(--ds-alias-space-xs-device) !important;}
.m-sm,
.m-small{margin:var(--ds-alias-space-sm-device) !important;}
.m-base,
.m-normal{margin:var(--ds-alias-space-base-device) !important;}
.m-md,
.m-medium{margin:var(--ds-alias-space-md-device) !important;}
.m-large,
.m-lg{margin:var(--ds-alias-space-lg-device) !important;}
.m-x-large,
.m-xl{margin:var(--ds-alias-space-xl-device) !important;}
.m-2xl,
.m-xx-large{margin:var(--ds-alias-space-2xl-device) !important;}
.m-3xl,
.m-xxx-large{margin:var(--ds-alias-space-3xl-device) !important;}
.m-4xl,
.m-xxxx-large{margin:var(--ds-alias-space-4xl-device) !important;}
.mx-none{margin-left:var(--ds-alias-space-none-device) !important;margin-right:var(--ds-alias-space-none-device) !important;}
.mx-auto{margin-left:var(--ds-alias-space-auto-device) !important;margin-right:var(--ds-alias-space-auto-device) !important;}
.mx-2xs,
.mx-xx-small{margin-left:var(--ds-alias-space-2xs-device) !important;margin-right:var(--ds-alias-space-2xs-device) !important;}
.mx-x-small,
.mx-xs{margin-left:var(--ds-alias-space-xs-device) !important;margin-right:var(--ds-alias-space-xs-device) !important;}
.mx-sm,
.mx-small{margin-left:var(--ds-alias-space-sm-device) !important;margin-right:var(--ds-alias-space-sm-device) !important;}
.mx-base,
.mx-normal{margin-left:var(--ds-alias-space-base-device) !important;margin-right:var(--ds-alias-space-base-device) !important;}
.mx-md,
.mx-medium{margin-left:var(--ds-alias-space-md-device) !important;margin-right:var(--ds-alias-space-md-device) !important;}
.mx-large,
.mx-lg{margin-left:var(--ds-alias-space-lg-device) !important;margin-right:var(--ds-alias-space-lg-device) !important;}
.mx-x-large,
.mx-xl{margin-left:var(--ds-alias-space-xl-device) !important;margin-right:var(--ds-alias-space-xl-device) !important;}
.mx-2xl,
.mx-xx-large{margin-left:var(--ds-alias-space-2xl-device) !important;margin-right:var(--ds-alias-space-2xl-device) !important;}
.mx-3xl,
.mx-xxx-large{margin-left:var(--ds-alias-space-3xl-device) !important;margin-right:var(--ds-alias-space-3xl-device) !important;}
.mx-4xl,
.mx-xxxx-large{margin-left:var(--ds-alias-space-4xl-device) !important;margin-right:var(--ds-alias-space-4xl-device) !important;}
.my-none{margin-top:var(--ds-alias-space-none-device) !important;margin-bottom:var(--ds-alias-space-none-device) !important;}
.my-auto{margin-top:var(--ds-alias-space-auto-device) !important;margin-bottom:var(--ds-alias-space-auto-device) !important;}
.my-2xs,
.my-xx-small{margin-top:var(--ds-alias-space-2xs-device) !important;margin-bottom:var(--ds-alias-space-2xs-device) !important;}
.my-x-small,
.my-xs{margin-top:var(--ds-alias-space-xs-device) !important;margin-bottom:var(--ds-alias-space-xs-device) !important;}
.my-sm,
.my-small{margin-top:var(--ds-alias-space-sm-device) !important;margin-bottom:var(--ds-alias-space-sm-device) !important;}
.my-base,
.my-normal{margin-top:var(--ds-alias-space-base-device) !important;margin-bottom:var(--ds-alias-space-base-device) !important;}
.my-md,
.my-medium{margin-top:var(--ds-alias-space-md-device) !important;margin-bottom:var(--ds-alias-space-md-device) !important;}
.my-large,
.my-lg{margin-top:var(--ds-alias-space-lg-device) !important;margin-bottom:var(--ds-alias-space-lg-device) !important;}
.my-x-large,
.my-xl{margin-top:var(--ds-alias-space-xl-device) !important;margin-bottom:var(--ds-alias-space-xl-device) !important;}
.my-2xl,
.my-xx-large{margin-top:var(--ds-alias-space-2xl-device) !important;margin-bottom:var(--ds-alias-space-2xl-device) !important;}
.my-3xl,
.my-xxx-large{margin-top:var(--ds-alias-space-3xl-device) !important;margin-bottom:var(--ds-alias-space-3xl-device) !important;}
.my-4xl,
.my-xxxx-large{margin-top:var(--ds-alias-space-4xl-device) !important;margin-bottom:var(--ds-alias-space-4xl-device) !important;}
.mt-none{margin-top:var(--ds-alias-space-none-device) !important;}
.mt-auto{margin-top:var(--ds-alias-space-auto-device) !important;}
.mt-2xs,
.mt-xx-small{margin-top:var(--ds-alias-space-2xs-device) !important;}
.mt-x-small,
.mt-xs{margin-top:var(--ds-alias-space-xs-device) !important;}
.mt-sm,
.mt-small{margin-top:var(--ds-alias-space-sm-device) !important;}
.mt-base,
.mt-normal{margin-top:var(--ds-alias-space-base-device) !important;}
.mt-md,
.mt-medium{margin-top:var(--ds-alias-space-md-device) !important;}
.mt-large,
.mt-lg{margin-top:var(--ds-alias-space-lg-device) !important;}
.mt-x-large,
.mt-xl{margin-top:var(--ds-alias-space-xl-device) !important;}
.mt-2xl,
.mt-xx-large{margin-top:var(--ds-alias-space-2xl-device) !important;}
.mt-3xl,
.mt-xxx-large{margin-top:var(--ds-alias-space-3xl-device) !important;}
.mt-4xl,
.mt-xxxx-large{margin-top:var(--ds-alias-space-4xl-device) !important;}
.mr-none{margin-right:var(--ds-alias-space-none-device) !important;}
.mr-auto{margin-right:var(--ds-alias-space-auto-device) !important;}
.mr-2xs,
.mr-xx-small{margin-right:var(--ds-alias-space-2xs-device) !important;}
.mr-x-small,
.mr-xs{margin-right:var(--ds-alias-space-xs-device) !important;}
.mr-sm,
.mr-small{margin-right:var(--ds-alias-space-sm-device) !important;}
.mr-base,
.mr-normal{margin-right:var(--ds-alias-space-base-device) !important;}
.mr-md,
.mr-medium{margin-right:var(--ds-alias-space-md-device) !important;}
.mr-large,
.mr-lg{margin-right:var(--ds-alias-space-lg-device) !important;}
.mr-x-large,
.mr-xl{margin-right:var(--ds-alias-space-xl-device) !important;}
.mr-2xl,
.mr-xx-large{margin-right:var(--ds-alias-space-2xl-device) !important;}
.mr-3xl,
.mr-xxx-large{margin-right:var(--ds-alias-space-3xl-device) !important;}
.mr-4xl,
.mr-xxxx-large{margin-right:var(--ds-alias-space-4xl-device) !important;}
.mb-none{margin-bottom:var(--ds-alias-space-none-device) !important;}
.mb-auto{margin-bottom:var(--ds-alias-space-auto-device) !important;}
.mb-2xs,
.mb-xx-small{margin-bottom:var(--ds-alias-space-2xs-device) !important;}
.mb-x-small,
.mb-xs{margin-bottom:var(--ds-alias-space-xs-device) !important;}
.mb-sm,
.mb-small{margin-bottom:var(--ds-alias-space-sm-device) !important;}
.mb-base,
.mb-normal{margin-bottom:var(--ds-alias-space-base-device) !important;}
.mb-md,
.mb-medium{margin-bottom:var(--ds-alias-space-md-device) !important;}
.mb-large,
.mb-lg{margin-bottom:var(--ds-alias-space-lg-device) !important;}
.mb-x-large,
.mb-xl{margin-bottom:var(--ds-alias-space-xl-device) !important;}
.mb-2xl,
.mb-xx-large{margin-bottom:var(--ds-alias-space-2xl-device) !important;}
.mb-3xl,
.mb-xxx-large{margin-bottom:var(--ds-alias-space-3xl-device) !important;}
.mb-4xl,
.mb-xxxx-large{margin-bottom:var(--ds-alias-space-4xl-device) !important;}
.ml-none{margin-left:var(--ds-alias-space-none-device) !important;}
.ml-auto{margin-left:var(--ds-alias-space-auto-device) !important;}
.ml-2xs,
.ml-xx-small{margin-left:var(--ds-alias-space-2xs-device) !important;}
.ml-x-small,
.ml-xs{margin-left:var(--ds-alias-space-xs-device) !important;}
.ml-sm,
.ml-small{margin-left:var(--ds-alias-space-sm-device) !important;}
.ml-base,
.ml-normal{margin-left:var(--ds-alias-space-base-device) !important;}
.ml-md,
.ml-medium{margin-left:var(--ds-alias-space-md-device) !important;}
.ml-large,
.ml-lg{margin-left:var(--ds-alias-space-lg-device) !important;}
.ml-x-large,
.ml-xl{margin-left:var(--ds-alias-space-xl-device) !important;}
.ml-2xl,
.ml-xx-large{margin-left:var(--ds-alias-space-2xl-device) !important;}
.ml-3xl,
.ml-xxx-large{margin-left:var(--ds-alias-space-3xl-device) !important;}
.ml-4xl,
.ml-xxxx-large{margin-left:var(--ds-alias-space-4xl-device) !important;}
.p-none{padding:var(--ds-alias-space-none-device) !important;}
.p-auto{padding:var(--ds-alias-space-auto-device) !important;}
.p-2xs,
.p-xx-small{padding:var(--ds-alias-space-2xs-device) !important;}
.p-x-small,
.p-xs{padding:var(--ds-alias-space-xs-device) !important;}
.p-sm,
.p-small{padding:var(--ds-alias-space-sm-device) !important;}
.p-base,
.p-normal{padding:var(--ds-alias-space-base-device) !important;}
.p-md,
.p-medium{padding:var(--ds-alias-space-md-device) !important;}
.p-large,
.p-lg{padding:var(--ds-alias-space-lg-device) !important;}
.p-x-large,
.p-xl{padding:var(--ds-alias-space-xl-device) !important;}
.p-2xl,
.p-xx-large{padding:var(--ds-alias-space-2xl-device) !important;}
.p-3xl,
.p-xxx-large{padding:var(--ds-alias-space-3xl-device) !important;}
.p-4xl,
.p-xxxx-large{padding:var(--ds-alias-space-4xl-device) !important;}
.px-none{padding-left:var(--ds-alias-space-none-device) !important;padding-right:var(--ds-alias-space-none-device) !important;}
.px-auto{padding-left:var(--ds-alias-space-auto-device) !important;padding-right:var(--ds-alias-space-auto-device) !important;}
.px-2xs,
.px-xx-small{padding-left:var(--ds-alias-space-2xs-device) !important;padding-right:var(--ds-alias-space-2xs-device) !important;}
.px-x-small,
.px-xs{padding-left:var(--ds-alias-space-xs-device) !important;padding-right:var(--ds-alias-space-xs-device) !important;}
.px-sm,
.px-small{padding-left:var(--ds-alias-space-sm-device) !important;padding-right:var(--ds-alias-space-sm-device) !important;}
.px-base,
.px-normal{padding-left:var(--ds-alias-space-base-device) !important;padding-right:var(--ds-alias-space-base-device) !important;}
.px-md,
.px-medium{padding-left:var(--ds-alias-space-md-device) !important;padding-right:var(--ds-alias-space-md-device) !important;}
.px-large,
.px-lg{padding-left:var(--ds-alias-space-lg-device) !important;padding-right:var(--ds-alias-space-lg-device) !important;}
.px-x-large,
.px-xl{padding-left:var(--ds-alias-space-xl-device) !important;padding-right:var(--ds-alias-space-xl-device) !important;}
.px-2xl,
.px-xx-large{padding-left:var(--ds-alias-space-2xl-device) !important;padding-right:var(--ds-alias-space-2xl-device) !important;}
.px-3xl,
.px-xxx-large{padding-left:var(--ds-alias-space-3xl-device) !important;padding-right:var(--ds-alias-space-3xl-device) !important;}
.px-4xl,
.px-xxxx-large{padding-left:var(--ds-alias-space-4xl-device) !important;padding-right:var(--ds-alias-space-4xl-device) !important;}
.py-none{padding-top:var(--ds-alias-space-none-device) !important;padding-bottom:var(--ds-alias-space-none-device) !important;}
.py-auto{padding-top:var(--ds-alias-space-auto-device) !important;padding-bottom:var(--ds-alias-space-auto-device) !important;}
.py-2xs,
.py-xx-small{padding-top:var(--ds-alias-space-2xs-device) !important;padding-bottom:var(--ds-alias-space-2xs-device) !important;}
.py-x-small,
.py-xs{padding-top:var(--ds-alias-space-xs-device) !important;padding-bottom:var(--ds-alias-space-xs-device) !important;}
.py-sm,
.py-small{padding-top:var(--ds-alias-space-sm-device) !important;padding-bottom:var(--ds-alias-space-sm-device) !important;}
.py-base,
.py-normal{padding-top:var(--ds-alias-space-base-device) !important;padding-bottom:var(--ds-alias-space-base-device) !important;}
.py-md,
.py-medium{padding-top:var(--ds-alias-space-md-device) !important;padding-bottom:var(--ds-alias-space-md-device) !important;}
.py-large,
.py-lg{padding-top:var(--ds-alias-space-lg-device) !important;padding-bottom:var(--ds-alias-space-lg-device) !important;}
.py-x-large,
.py-xl{padding-top:var(--ds-alias-space-xl-device) !important;padding-bottom:var(--ds-alias-space-xl-device) !important;}
.py-2xl,
.py-xx-large{padding-top:var(--ds-alias-space-2xl-device) !important;padding-bottom:var(--ds-alias-space-2xl-device) !important;}
.py-3xl,
.py-xxx-large{padding-top:var(--ds-alias-space-3xl-device) !important;padding-bottom:var(--ds-alias-space-3xl-device) !important;}
.py-4xl,
.py-xxxx-large{padding-top:var(--ds-alias-space-4xl-device) !important;padding-bottom:var(--ds-alias-space-4xl-device) !important;}
.pt-none{padding-top:var(--ds-alias-space-none-device) !important;}
.pt-auto{padding-top:var(--ds-alias-space-auto-device) !important;}
.pt-2xs,
.pt-xx-small{padding-top:var(--ds-alias-space-2xs-device) !important;}
.pt-x-small,
.pt-xs{padding-top:var(--ds-alias-space-xs-device) !important;}
.pt-sm,
.pt-small{padding-top:var(--ds-alias-space-sm-device) !important;}
.pt-base,
.pt-normal{padding-top:var(--ds-alias-space-base-device) !important;}
.pt-md,
.pt-medium{padding-top:var(--ds-alias-space-md-device) !important;}
.pt-large,
.pt-lg{padding-top:var(--ds-alias-space-lg-device) !important;}
.pt-x-large,
.pt-xl{padding-top:var(--ds-alias-space-xl-device) !important;}
.pt-2xl,
.pt-xx-large{padding-top:var(--ds-alias-space-2xl-device) !important;}
.pt-3xl,
.pt-xxx-large{padding-top:var(--ds-alias-space-3xl-device) !important;}
.pt-4xl,
.pt-xxxx-large{padding-top:var(--ds-alias-space-4xl-device) !important;}
.pr-none{padding-right:var(--ds-alias-space-none-device) !important;}
.pr-auto{padding-right:var(--ds-alias-space-auto-device) !important;}
.pr-2xs,
.pr-xx-small{padding-right:var(--ds-alias-space-2xs-device) !important;}
.pr-x-small,
.pr-xs{padding-right:var(--ds-alias-space-xs-device) !important;}
.pr-sm,
.pr-small{padding-right:var(--ds-alias-space-sm-device) !important;}
.pr-base,
.pr-normal{padding-right:var(--ds-alias-space-base-device) !important;}
.pr-md,
.pr-medium{padding-right:var(--ds-alias-space-md-device) !important;}
.pr-large,
.pr-lg{padding-right:var(--ds-alias-space-lg-device) !important;}
.pr-x-large,
.pr-xl{padding-right:var(--ds-alias-space-xl-device) !important;}
.pr-2xl,
.pr-xx-large{padding-right:var(--ds-alias-space-2xl-device) !important;}
.pr-3xl,
.pr-xxx-large{padding-right:var(--ds-alias-space-3xl-device) !important;}
.pr-4xl,
.pr-xxxx-large{padding-right:var(--ds-alias-space-4xl-device) !important;}
.pb-none{padding-bottom:var(--ds-alias-space-none-device) !important;}
.pb-auto{padding-bottom:var(--ds-alias-space-auto-device) !important;}
.pb-2xs,
.pb-xx-small{padding-bottom:var(--ds-alias-space-2xs-device) !important;}
.pb-x-small,
.pb-xs{padding-bottom:var(--ds-alias-space-xs-device) !important;}
.pb-sm,
.pb-small{padding-bottom:var(--ds-alias-space-sm-device) !important;}
.pb-base,
.pb-normal{padding-bottom:var(--ds-alias-space-base-device) !important;}
.pb-md,
.pb-medium{padding-bottom:var(--ds-alias-space-md-device) !important;}
.pb-large,
.pb-lg{padding-bottom:var(--ds-alias-space-lg-device) !important;}
.pb-x-large,
.pb-xl{padding-bottom:var(--ds-alias-space-xl-device) !important;}
.pb-2xl,
.pb-xx-large{padding-bottom:var(--ds-alias-space-2xl-device) !important;}
.pb-3xl,
.pb-xxx-large{padding-bottom:var(--ds-alias-space-3xl-device) !important;}
.pb-4xl,
.pb-xxxx-large{padding-bottom:var(--ds-alias-space-4xl-device) !important;}
.pl-none{padding-left:var(--ds-alias-space-none-device) !important;}
.pl-auto{padding-left:var(--ds-alias-space-auto-device) !important;}
.pl-2xs,
.pl-xx-small{padding-left:var(--ds-alias-space-2xs-device) !important;}
.pl-x-small,
.pl-xs{padding-left:var(--ds-alias-space-xs-device) !important;}
.pl-sm,
.pl-small{padding-left:var(--ds-alias-space-sm-device) !important;}
.pl-base,
.pl-normal{padding-left:var(--ds-alias-space-base-device) !important;}
.pl-md,
.pl-medium{padding-left:var(--ds-alias-space-md-device) !important;}
.pl-large,
.pl-lg{padding-left:var(--ds-alias-space-lg-device) !important;}
.pl-x-large,
.pl-xl{padding-left:var(--ds-alias-space-xl-device) !important;}
.pl-2xl,
.pl-xx-large{padding-left:var(--ds-alias-space-2xl-device) !important;}
.pl-3xl,
.pl-xxx-large{padding-left:var(--ds-alias-space-3xl-device) !important;}
.pl-4xl,
.pl-xxxx-large{padding-left:var(--ds-alias-space-4xl-device) !important;}
.flex-direction-row{flex-direction:row !important;}
.flex-direction-row-reverse{flex-direction:row-reverse !important;}
.flex-direction-column{flex-direction:column !important;}
.flex-direction-column-reverse{flex-direction:column-reverse !important;}
.flex-wrap{flex-wrap:wrap !important;}
.flex-wrap-reverse{flex-wrap:wrap-reverse !important;}
.flex-nowrap{flex-wrap:nowrap !important;}
.flex-1{flex:1 1 0% !important;}
.flex-auto{flex:1 1 auto !important;}
.flex-initial{flex:0 1 auto !important;}
.flex-none{flex:none !important;}
.align-content-start{align-content:start !important;}
.align-content-end{align-content:end !important;}
.align-content-center{align-content:center !important;}
.align-content-baseline{align-content:baseline !important;}
.align-content-space-between{align-content:space-between !important;}
.align-content-space-around{align-content:space-around !important;}
.align-content-space-evenly{align-content:space-evenly !important;}
.align-items-start{align-items:start !important;}
.align-items-end{align-items:end !important;}
.align-items-center{align-items:center !important;}
.align-items-baseline{align-items:baseline !important;}
.align-items-stretch{align-items:stretch !important;}
.align-self-start{align-self:start !important;}
.align-self-end{align-self:end !important;}
.align-self-center{align-self:center !important;}
.align-self-baseline{align-self:baseline !important;}
.align-self-stretch{align-self:stretch !important;}
.justify-content-start{justify-content:start !important;}
.justify-content-end{justify-content:end !important;}
.justify-content-center{justify-content:center !important;}
.justify-content-space-between{justify-content:space-between !important;}
.justify-content-space-around{justify-content:space-around !important;}
.justify-content-space-evenly{justify-content:space-evenly !important;}
.gap-none{gap:var(--ds-alias-space-none-device) !important;}
.gap-auto{gap:var(--ds-alias-space-auto-device) !important;}
.gap-2xs,
.gap-xx-small{gap:var(--ds-alias-space-2xs-device) !important;}
.gap-x-small,
.gap-xs{gap:var(--ds-alias-space-xs-device) !important;}
.gap-sm,
.gap-small{gap:var(--ds-alias-space-sm-device) !important;}
.gap-base,
.gap-normal{gap:var(--ds-alias-space-base-device) !important;}
.gap-md,
.gap-medium{gap:var(--ds-alias-space-md-device) !important;}
.gap-large,
.gap-lg{gap:var(--ds-alias-space-lg-device) !important;}
.gap-x-large,
.gap-xl{gap:var(--ds-alias-space-xl-device) !important;}
.gap-2xl,
.gap-xx-large{gap:var(--ds-alias-space-2xl-device) !important;}
.gap-3xl,
.gap-xxx-large{gap:var(--ds-alias-space-3xl-device) !important;}
.gap-4xl,
.gap-xxxx-large{gap:var(--ds-alias-space-4xl-device) !important;}
.column-gap-none{-moz-column-gap:var(--ds-alias-space-none-device) !important;column-gap:var(--ds-alias-space-none-device) !important;}
.column-gap-auto{-moz-column-gap:var(--ds-alias-space-auto-device) !important;column-gap:var(--ds-alias-space-auto-device) !important;}
.column-gap-2xs,
.column-gap-xx-small{-moz-column-gap:var(--ds-alias-space-2xs-device) !important;column-gap:var(--ds-alias-space-2xs-device) !important;}
.column-gap-x-small,
.column-gap-xs{-moz-column-gap:var(--ds-alias-space-xs-device) !important;column-gap:var(--ds-alias-space-xs-device) !important;}
.column-gap-sm,
.column-gap-small{-moz-column-gap:var(--ds-alias-space-sm-device) !important;column-gap:var(--ds-alias-space-sm-device) !important;}
.column-gap-base,
.column-gap-normal{-moz-column-gap:var(--ds-alias-space-base-device) !important;column-gap:var(--ds-alias-space-base-device) !important;}
.column-gap-md,
.column-gap-medium{-moz-column-gap:var(--ds-alias-space-md-device) !important;column-gap:var(--ds-alias-space-md-device) !important;}
.column-gap-large,
.column-gap-lg{-moz-column-gap:var(--ds-alias-space-lg-device) !important;column-gap:var(--ds-alias-space-lg-device) !important;}
.column-gap-x-large,
.column-gap-xl{-moz-column-gap:var(--ds-alias-space-xl-device) !important;column-gap:var(--ds-alias-space-xl-device) !important;}
.column-gap-2xl,
.column-gap-xx-large{-moz-column-gap:var(--ds-alias-space-2xl-device) !important;column-gap:var(--ds-alias-space-2xl-device) !important;}
.column-gap-3xl,
.column-gap-xxx-large{-moz-column-gap:var(--ds-alias-space-3xl-device) !important;column-gap:var(--ds-alias-space-3xl-device) !important;}
.column-gap-4xl,
.column-gap-xxxx-large{-moz-column-gap:var(--ds-alias-space-4xl-device) !important;column-gap:var(--ds-alias-space-4xl-device) !important;}
.row-gap-none{row-gap:var(--ds-alias-space-none-device) !important;}
.row-gap-auto{row-gap:var(--ds-alias-space-auto-device) !important;}
.row-gap-2xs,
.row-gap-xx-small{row-gap:var(--ds-alias-space-2xs-device) !important;}
.row-gap-x-small,
.row-gap-xs{row-gap:var(--ds-alias-space-xs-device) !important;}
.row-gap-sm,
.row-gap-small{row-gap:var(--ds-alias-space-sm-device) !important;}
.row-gap-base,
.row-gap-normal{row-gap:var(--ds-alias-space-base-device) !important;}
.row-gap-md,
.row-gap-medium{row-gap:var(--ds-alias-space-md-device) !important;}
.row-gap-large,
.row-gap-lg{row-gap:var(--ds-alias-space-lg-device) !important;}
.row-gap-x-large,
.row-gap-xl{row-gap:var(--ds-alias-space-xl-device) !important;}
.row-gap-2xl,
.row-gap-xx-large{row-gap:var(--ds-alias-space-2xl-device) !important;}
.row-gap-3xl,
.row-gap-xxx-large{row-gap:var(--ds-alias-space-3xl-device) !important;}
.row-gap-4xl,
.row-gap-xxxx-large{row-gap:var(--ds-alias-space-4xl-device) !important;}
.hidden{display:none !important;}
.block{display:block !important;}
.inline{display:inline !important;}
.inline-block{display:inline-block !important;}
.flex{display:flex !important;}
.inline-flex{display:inline-flex !important;}
.static{position:static !important;}
.relative{position:relative !important;}
.absolute{position:absolute !important;}
.fixed{position:fixed !important;}
.sticky{position:sticky !important;}
.overflow-auto{overflow:auto !important;}
.overflow-hidden{overflow:hidden !important;}
.overflow-visible{overflow:visible !important;}
.overflow-scroll{overflow:scroll !important;}
.overflow-x-auto{overflow-x:auto !important;}
.overflow-x-hidden{overflow-x:hidden !important;}
.overflow-x-visible{overflow-x:visible !important;}
.overflow-x-scroll{overflow-x:scroll !important;}
.overflow-y-auto{overflow-y:auto !important;}
.overflow-y-hidden{overflow-y:hidden !important;}
.overflow-y-visible{overflow-y:visible !important;}
.overflow-y-scroll{overflow-y:scroll !important;}
.vertical-align-top{vertical-align:top !important;}
.vertical-align-middle{vertical-align:middle !important;}
.vertical-align-bottom{vertical-align:bottom !important;}
.top-0{top:0 !important;}
.top-auto{top:auto !important;}
.top-50{top:50% !important;}
.top-100{top:100% !important;}
.top-1rem{top:1rem !important;}
.top-0-5rem{top:0.5rem !important;}
.top-0-25rem{top:0.25rem !important;}
.right-0{right:0 !important;}
.right-auto{right:auto !important;}
.right-50{right:50% !important;}
.right-100{right:100% !important;}
.right-1rem{right:1rem !important;}
.bottom-0{bottom:0 !important;}
.bottom-auto{bottom:auto !important;}
.bottom-50{bottom:50% !important;}
.bottom-100{bottom:100% !important;}
.bottom-1rem{bottom:1rem !important;}
.left-0{left:0 !important;}
.left-auto{left:auto !important;}
.left-50{left:50% !important;}
.left-100{left:100% !important;}
.left-1rem{left:1rem !important;}
.active\:bg-white:active,
.bg-white,
.focus\:bg-white:focus,
.hover\:bg-white:hover:not(:active){background-color:var(--ds-alias-background-color-white) !important;}
.active\:bg-selected:active,
.bg-selected,
.focus\:bg-selected:focus,
.hover\:bg-selected:hover:not(:active){background-color:var(--ds-alias-background-color-selected) !important;}
.active\:bg-hover:active,
.bg-hover,
.focus\:bg-hover:focus,
.hover\:bg-hover:hover:not(:active){background-color:var(--ds-alias-background-color-hover) !important;}
.active\:bg-highlight:active,
.bg-highlight,
.focus\:bg-highlight:focus,
.hover\:bg-highlight:hover:not(:active){background-color:var(--ds-alias-background-color-highlight) !important;}
.active\:bg-disabled:active,
.bg-disabled,
.focus\:bg-disabled:focus,
.hover\:bg-disabled:hover:not(:active){background-color:var(--ds-alias-background-color-disabled) !important;}
.active\:bg-transparent:active,
.bg-transparent,
.focus\:bg-transparent:focus,
.hover\:bg-transparent:hover:not(:active){background-color:var(--ds-alias-background-color-transparent) !important;}
.active\:bg-sky-light:active,
.bg-sky-light,
.focus\:bg-sky-light:focus,
.hover\:bg-sky-light:hover:not(:active){background-color:var(--ds-alias-background-color-sky-light) !important;}
.active\:bg-sky:active,
.bg-sky,
.focus\:bg-sky:focus,
.hover\:bg-sky:hover:not(:active){background-color:var(--ds-alias-background-color-sky) !important;}
.active\:bg-sky-dark:active,
.bg-sky-dark,
.focus\:bg-sky-dark:focus,
.hover\:bg-sky-dark:hover:not(:active){background-color:var(--ds-alias-background-color-sky-dark) !important;}
.active\:bg-info:active,
.bg-info,
.focus\:bg-info:focus,
.hover\:bg-info:hover:not(:active){background-color:var(--ds-alias-background-color-info) !important;}
.active\:bg-info-light:active,
.bg-info-light,
.focus\:bg-info-light:focus,
.hover\:bg-info-light:hover:not(:active){background-color:var(--ds-alias-background-color-info-light) !important;}
.active\:bg-info-dark:active,
.bg-info-dark,
.focus\:bg-info-dark:focus,
.hover\:bg-info-dark:hover:not(:active){background-color:var(--ds-alias-background-color-info-dark) !important;}
.active\:bg-info-darker:active,
.bg-info-darker,
.focus\:bg-info-darker:focus,
.hover\:bg-info-darker:hover:not(:active){background-color:var(--ds-alias-background-color-info-darker) !important;}
.active\:bg-info-darkest:active,
.bg-info-darkest,
.focus\:bg-info-darkest:focus,
.hover\:bg-info-darkest:hover:not(:active){background-color:var(--ds-alias-background-color-info-darkest) !important;}
.active\:bg-success:active,
.bg-success,
.focus\:bg-success:focus,
.hover\:bg-success:hover:not(:active){background-color:var(--ds-alias-background-color-success) !important;}
.active\:bg-success-lighter:active,
.bg-success-lighter,
.focus\:bg-success-lighter:focus,
.hover\:bg-success-lighter:hover:not(:active){background-color:var(--ds-alias-background-color-success-lighter) !important;}
.active\:bg-success-light:active,
.bg-success-light,
.focus\:bg-success-light:focus,
.hover\:bg-success-light:hover:not(:active){background-color:var(--ds-alias-background-color-success-light) !important;}
.active\:bg-success-dark:active,
.bg-success-dark,
.focus\:bg-success-dark:focus,
.hover\:bg-success-dark:hover:not(:active){background-color:var(--ds-alias-background-color-success-dark) !important;}
.active\:bg-success-darker:active,
.bg-success-darker,
.focus\:bg-success-darker:focus,
.hover\:bg-success-darker:hover:not(:active){background-color:var(--ds-alias-background-color-success-darker) !important;}
.active\:bg-success-darkest:active,
.bg-success-darkest,
.focus\:bg-success-darkest:focus,
.hover\:bg-success-darkest:hover:not(:active){background-color:var(--ds-alias-background-color-success-darkest) !important;}
.active\:bg-warning-lighter:active,
.bg-warning-lighter,
.focus\:bg-warning-lighter:focus,
.hover\:bg-warning-lighter:hover:not(:active){background-color:var(--ds-alias-background-color-warning-lighter) !important;}
.active\:bg-warning-light:active,
.bg-warning-light,
.focus\:bg-warning-light:focus,
.hover\:bg-warning-light:hover:not(:active){background-color:var(--ds-alias-background-color-warning-light) !important;}
.active\:bg-warning:active,
.bg-warning,
.focus\:bg-warning:focus,
.hover\:bg-warning:hover:not(:active){background-color:var(--ds-alias-background-color-warning) !important;}
.active\:bg-warning-dark:active,
.bg-warning-dark,
.focus\:bg-warning-dark:focus,
.hover\:bg-warning-dark:hover:not(:active){background-color:var(--ds-alias-background-color-warning-dark) !important;}
.active\:bg-warning-darker:active,
.bg-warning-darker,
.focus\:bg-warning-darker:focus,
.hover\:bg-warning-darker:hover:not(:active){background-color:var(--ds-alias-background-color-warning-darker) !important;}
.active\:bg-warning-darkest:active,
.bg-warning-darkest,
.focus\:bg-warning-darkest:focus,
.hover\:bg-warning-darkest:hover:not(:active){background-color:var(--ds-alias-background-color-warning-darkest) !important;}
.active\:bg-danger-lighter:active,
.bg-danger-lighter,
.focus\:bg-danger-lighter:focus,
.hover\:bg-danger-lighter:hover:not(:active){background-color:var(--ds-alias-background-color-danger-lighter) !important;}
.active\:bg-danger-light:active,
.bg-danger-light,
.focus\:bg-danger-light:focus,
.hover\:bg-danger-light:hover:not(:active){background-color:var(--ds-alias-background-color-danger-light) !important;}
.active\:bg-danger:active,
.bg-danger,
.focus\:bg-danger:focus,
.hover\:bg-danger:hover:not(:active){background-color:var(--ds-alias-background-color-danger) !important;}
.active\:bg-danger-dark:active,
.bg-danger-dark,
.focus\:bg-danger-dark:focus,
.hover\:bg-danger-dark:hover:not(:active){background-color:var(--ds-alias-background-color-danger-dark) !important;}
.active\:bg-danger-darker:active,
.bg-danger-darker,
.focus\:bg-danger-darker:focus,
.hover\:bg-danger-darker:hover:not(:active){background-color:var(--ds-alias-background-color-danger-darker) !important;}
.active\:bg-danger-darkest:active,
.bg-danger-darkest,
.focus\:bg-danger-darkest:focus,
.hover\:bg-danger-darkest:hover:not(:active){background-color:var(--ds-alias-background-color-danger-darkest) !important;}
.active\:bg-grey-lighter:active,
.bg-grey-lighter,
.focus\:bg-grey-lighter:focus,
.hover\:bg-grey-lighter:hover:not(:active){background-color:var(--ds-alias-background-color-grey-lighter) !important;}
.active\:bg-grey-light:active,
.bg-grey-light,
.focus\:bg-grey-light:focus,
.hover\:bg-grey-light:hover:not(:active){background-color:var(--ds-alias-background-color-grey-light) !important;}
.active\:bg-grey:active,
.bg-grey,
.focus\:bg-grey:focus,
.hover\:bg-grey:hover:not(:active){background-color:var(--ds-alias-background-color-grey) !important;}
.active\:bg-grey-dark:active,
.bg-grey-dark,
.focus\:bg-grey-dark:focus,
.hover\:bg-grey-dark:hover:not(:active){background-color:var(--ds-alias-background-color-grey-dark) !important;}
.active\:bg-grey-darker:active,
.bg-grey-darker,
.focus\:bg-grey-darker:focus,
.hover\:bg-grey-darker:hover:not(:active){background-color:var(--ds-alias-background-color-grey-darker) !important;}
.active\:bg-primary-lighter:active,
.bg-primary-lighter,
.focus\:bg-primary-lighter:focus,
.hover\:bg-primary-lighter:hover:not(:active){background-color:var(--ds-alias-background-color-primary-lighter) !important;}
.active\:bg-primary-light:active,
.bg-primary-light,
.focus\:bg-primary-light:focus,
.hover\:bg-primary-light:hover:not(:active){background-color:var(--ds-alias-background-color-primary-light) !important;}
.active\:bg-primary:active,
.bg-primary,
.focus\:bg-primary:focus,
.hover\:bg-primary:hover:not(:active){background-color:var(--ds-alias-background-color-primary) !important;}
.active\:bg-primary-hover:active,
.bg-primary-hover,
.focus\:bg-primary-hover:focus,
.hover\:bg-primary-hover:hover:not(:active){background-color:var(--ds-alias-background-color-primary-hover) !important;}
.active\:bg-primary-active:active,
.bg-primary-active,
.focus\:bg-primary-active:focus,
.hover\:bg-primary-active:hover:not(:active){background-color:var(--ds-alias-background-color-primary-active) !important;}
.active\:bg-primary-dark:active,
.bg-primary-dark,
.focus\:bg-primary-dark:focus,
.hover\:bg-primary-dark:hover:not(:active){background-color:var(--ds-alias-background-color-primary-dark) !important;}
.active\:bg-green-lighter:active,
.bg-green-lighter,
.focus\:bg-green-lighter:focus,
.hover\:bg-green-lighter:hover:not(:active){background-color:var(--ds-alias-background-color-green-lighter) !important;}
.active\:bg-green-light:active,
.bg-green-light,
.focus\:bg-green-light:focus,
.hover\:bg-green-light:hover:not(:active){background-color:var(--ds-alias-background-color-green-light) !important;}
.active\:bg-green:active,
.bg-green,
.focus\:bg-green:focus,
.hover\:bg-green:hover:not(:active){background-color:var(--ds-alias-background-color-green) !important;}
.active\:bg-purple-lighter:active,
.bg-purple-lighter,
.focus\:bg-purple-lighter:focus,
.hover\:bg-purple-lighter:hover:not(:active){background-color:var(--ds-alias-background-color-purple-lighter) !important;}
.active\:bg-purple-light:active,
.bg-purple-light,
.focus\:bg-purple-light:focus,
.hover\:bg-purple-light:hover:not(:active){background-color:var(--ds-alias-background-color-purple-light) !important;}
.active\:bg-purple:active,
.bg-purple,
.focus\:bg-purple:focus,
.hover\:bg-purple:hover:not(:active){background-color:var(--ds-alias-background-color-purple) !important;}
.active\:bg-red-lighter:active,
.bg-red-lighter,
.focus\:bg-red-lighter:focus,
.hover\:bg-red-lighter:hover:not(:active){background-color:var(--ds-alias-background-color-red-lighter) !important;}
.active\:bg-red-light:active,
.bg-red-light,
.focus\:bg-red-light:focus,
.hover\:bg-red-light:hover:not(:active){background-color:var(--ds-alias-background-color-red-light) !important;}
.active\:bg-red:active,
.bg-red,
.focus\:bg-red:focus,
.hover\:bg-red:hover:not(:active){background-color:var(--ds-alias-background-color-red) !important;}
.active\:bg-yellow-lighter:active,
.bg-yellow-lighter,
.focus\:bg-yellow-lighter:focus,
.hover\:bg-yellow-lighter:hover:not(:active){background-color:var(--ds-alias-background-color-yellow-lighter) !important;}
.active\:bg-yellow-light:active,
.bg-yellow-light,
.focus\:bg-yellow-light:focus,
.hover\:bg-yellow-light:hover:not(:active){background-color:var(--ds-alias-background-color-yellow-light) !important;}
.active\:bg-yellow:active,
.bg-yellow,
.focus\:bg-yellow:focus,
.hover\:bg-yellow:hover:not(:active){background-color:var(--ds-alias-background-color-yellow) !important;}
.active\:bg-black:active,
.bg-black,
.focus\:bg-black:focus,
.hover\:bg-black:hover:not(:active){background-color:var(--ds-global-color-black) !important;}
.active\:bg-neutral:active,
.bg-neutral,
.focus\:bg-neutral:focus,
.hover\:bg-neutral:hover:not(:active){background-color:var(--ds-global-color-neutral) !important;}
.active\:bg-danger-1:active,
.bg-danger-1,
.focus\:bg-danger-1:focus,
.hover\:bg-danger-1:hover:not(:active){background-color:var(--ds-global-color-danger-1) !important;}
.active\:bg-danger-2:active,
.bg-danger-2,
.focus\:bg-danger-2:focus,
.hover\:bg-danger-2:hover:not(:active){background-color:var(--ds-global-color-danger-2) !important;}
.active\:bg-danger-3:active,
.bg-danger-3,
.focus\:bg-danger-3:focus,
.hover\:bg-danger-3:hover:not(:active){background-color:var(--ds-global-color-danger-3) !important;}
.active\:bg-danger-4:active,
.bg-danger-4,
.focus\:bg-danger-4:focus,
.hover\:bg-danger-4:hover:not(:active){background-color:var(--ds-global-color-danger-4) !important;}
.active\:bg-danger-5:active,
.bg-danger-5,
.focus\:bg-danger-5:focus,
.hover\:bg-danger-5:hover:not(:active){background-color:var(--ds-global-color-danger-5) !important;}
.active\:bg-danger-6:active,
.bg-danger-6,
.focus\:bg-danger-6:focus,
.hover\:bg-danger-6:hover:not(:active){background-color:var(--ds-global-color-danger-6) !important;}
.active\:bg-warning-1:active,
.bg-warning-1,
.focus\:bg-warning-1:focus,
.hover\:bg-warning-1:hover:not(:active){background-color:var(--ds-global-color-warning-1) !important;}
.active\:bg-warning-2:active,
.bg-warning-2,
.focus\:bg-warning-2:focus,
.hover\:bg-warning-2:hover:not(:active){background-color:var(--ds-global-color-warning-2) !important;}
.active\:bg-warning-3:active,
.bg-warning-3,
.focus\:bg-warning-3:focus,
.hover\:bg-warning-3:hover:not(:active){background-color:var(--ds-global-color-warning-3) !important;}
.active\:bg-warning-4:active,
.bg-warning-4,
.focus\:bg-warning-4:focus,
.hover\:bg-warning-4:hover:not(:active){background-color:var(--ds-global-color-warning-4) !important;}
.active\:bg-warning-5:active,
.bg-warning-5,
.focus\:bg-warning-5:focus,
.hover\:bg-warning-5:hover:not(:active){background-color:var(--ds-global-color-warning-5) !important;}
.active\:bg-warning-6:active,
.bg-warning-6,
.focus\:bg-warning-6:focus,
.hover\:bg-warning-6:hover:not(:active){background-color:var(--ds-global-color-warning-6) !important;}
.active\:bg-success-1:active,
.bg-success-1,
.focus\:bg-success-1:focus,
.hover\:bg-success-1:hover:not(:active){background-color:var(--ds-global-color-success-1) !important;}
.active\:bg-success-2:active,
.bg-success-2,
.focus\:bg-success-2:focus,
.hover\:bg-success-2:hover:not(:active){background-color:var(--ds-global-color-success-2) !important;}
.active\:bg-success-3:active,
.bg-success-3,
.focus\:bg-success-3:focus,
.hover\:bg-success-3:hover:not(:active){background-color:var(--ds-global-color-success-3) !important;}
.active\:bg-success-4:active,
.bg-success-4,
.focus\:bg-success-4:focus,
.hover\:bg-success-4:hover:not(:active){background-color:var(--ds-global-color-success-4) !important;}
.active\:bg-success-5:active,
.bg-success-5,
.focus\:bg-success-5:focus,
.hover\:bg-success-5:hover:not(:active){background-color:var(--ds-global-color-success-5) !important;}
.active\:bg-success-6:active,
.bg-success-6,
.focus\:bg-success-6:focus,
.hover\:bg-success-6:hover:not(:active){background-color:var(--ds-global-color-success-6) !important;}
.active\:bg-info-1:active,
.bg-info-1,
.focus\:bg-info-1:focus,
.hover\:bg-info-1:hover:not(:active){background-color:var(--ds-global-color-info-1) !important;}
.active\:bg-info-2:active,
.bg-info-2,
.focus\:bg-info-2:focus,
.hover\:bg-info-2:hover:not(:active){background-color:var(--ds-global-color-info-2) !important;}
.active\:bg-info-3:active,
.bg-info-3,
.focus\:bg-info-3:focus,
.hover\:bg-info-3:hover:not(:active){background-color:var(--ds-global-color-info-3) !important;}
.active\:bg-info-4:active,
.bg-info-4,
.focus\:bg-info-4:focus,
.hover\:bg-info-4:hover:not(:active){background-color:var(--ds-global-color-info-4) !important;}
.active\:bg-info-5:active,
.bg-info-5,
.focus\:bg-info-5:focus,
.hover\:bg-info-5:hover:not(:active){background-color:var(--ds-global-color-info-5) !important;}
.active\:bg-info-6:active,
.bg-info-6,
.focus\:bg-info-6:focus,
.hover\:bg-info-6:hover:not(:active){background-color:var(--ds-global-color-info-6) !important;}
.active\:bg-sky-1:active,
.bg-sky-1,
.focus\:bg-sky-1:focus,
.hover\:bg-sky-1:hover:not(:active){background-color:var(--ds-global-color-sky-1) !important;}
.active\:bg-sky-2:active,
.bg-sky-2,
.focus\:bg-sky-2:focus,
.hover\:bg-sky-2:hover:not(:active){background-color:var(--ds-global-color-sky-2) !important;}
.active\:bg-sky-3:active,
.bg-sky-3,
.focus\:bg-sky-3:focus,
.hover\:bg-sky-3:hover:not(:active){background-color:var(--ds-global-color-sky-3) !important;}
.active\:bg-sky-4:active,
.bg-sky-4,
.focus\:bg-sky-4:focus,
.hover\:bg-sky-4:hover:not(:active){background-color:var(--ds-global-color-sky-4) !important;}
.active\:bg-sky-5:active,
.bg-sky-5,
.focus\:bg-sky-5:focus,
.hover\:bg-sky-5:hover:not(:active){background-color:var(--ds-global-color-sky-5) !important;}
.active\:bg-sky-6:active,
.bg-sky-6,
.focus\:bg-sky-6:focus,
.hover\:bg-sky-6:hover:not(:active){background-color:var(--ds-global-color-sky-6) !important;}
.active\:bg-grey-0:active,
.bg-grey-0,
.focus\:bg-grey-0:focus,
.hover\:bg-grey-0:hover:not(:active){background-color:var(--ds-global-color-grey-0) !important;}
.active\:bg-grey-1:active,
.bg-grey-1,
.focus\:bg-grey-1:focus,
.hover\:bg-grey-1:hover:not(:active){background-color:var(--ds-global-color-grey-1) !important;}
.active\:bg-grey-2:active,
.bg-grey-2,
.focus\:bg-grey-2:focus,
.hover\:bg-grey-2:hover:not(:active){background-color:var(--ds-global-color-grey-2) !important;}
.active\:bg-grey-3:active,
.bg-grey-3,
.focus\:bg-grey-3:focus,
.hover\:bg-grey-3:hover:not(:active){background-color:var(--ds-global-color-grey-3) !important;}
.active\:bg-grey-4:active,
.bg-grey-4,
.focus\:bg-grey-4:focus,
.hover\:bg-grey-4:hover:not(:active){background-color:var(--ds-global-color-grey-4) !important;}
.active\:bg-grey-5:active,
.bg-grey-5,
.focus\:bg-grey-5:focus,
.hover\:bg-grey-5:hover:not(:active){background-color:var(--ds-global-color-grey-5) !important;}
.active\:bg-grey-6:active,
.bg-grey-6,
.focus\:bg-grey-6:focus,
.hover\:bg-grey-6:hover:not(:active){background-color:var(--ds-global-color-grey-6) !important;}
.active\:bg-yellow-1:active,
.bg-yellow-1,
.focus\:bg-yellow-1:focus,
.hover\:bg-yellow-1:hover:not(:active){background-color:var(--ds-global-color-yellow-1) !important;}
.active\:bg-yellow-2:active,
.bg-yellow-2,
.focus\:bg-yellow-2:focus,
.hover\:bg-yellow-2:hover:not(:active){background-color:var(--ds-global-color-yellow-2) !important;}
.active\:bg-yellow-3:active,
.bg-yellow-3,
.focus\:bg-yellow-3:focus,
.hover\:bg-yellow-3:hover:not(:active){background-color:var(--ds-global-color-yellow-3) !important;}
.active\:bg-yellow-4:active,
.bg-yellow-4,
.focus\:bg-yellow-4:focus,
.hover\:bg-yellow-4:hover:not(:active){background-color:var(--ds-global-color-yellow-4) !important;}
.active\:bg-yellow-5:active,
.bg-yellow-5,
.focus\:bg-yellow-5:focus,
.hover\:bg-yellow-5:hover:not(:active){background-color:var(--ds-global-color-yellow-5) !important;}
.active\:bg-yellow-6:active,
.bg-yellow-6,
.focus\:bg-yellow-6:focus,
.hover\:bg-yellow-6:hover:not(:active){background-color:var(--ds-global-color-yellow-6) !important;}
.active\:bg-red-1:active,
.bg-red-1,
.focus\:bg-red-1:focus,
.hover\:bg-red-1:hover:not(:active){background-color:var(--ds-global-color-red-1) !important;}
.active\:bg-red-2:active,
.bg-red-2,
.focus\:bg-red-2:focus,
.hover\:bg-red-2:hover:not(:active){background-color:var(--ds-global-color-red-2) !important;}
.active\:bg-red-3:active,
.bg-red-3,
.focus\:bg-red-3:focus,
.hover\:bg-red-3:hover:not(:active){background-color:var(--ds-global-color-red-3) !important;}
.active\:bg-red-4:active,
.bg-red-4,
.focus\:bg-red-4:focus,
.hover\:bg-red-4:hover:not(:active){background-color:var(--ds-global-color-red-4) !important;}
.active\:bg-red-5:active,
.bg-red-5,
.focus\:bg-red-5:focus,
.hover\:bg-red-5:hover:not(:active){background-color:var(--ds-global-color-red-5) !important;}
.active\:bg-red-6:active,
.bg-red-6,
.focus\:bg-red-6:focus,
.hover\:bg-red-6:hover:not(:active){background-color:var(--ds-global-color-red-6) !important;}
.active\:bg-green-1:active,
.bg-green-1,
.focus\:bg-green-1:focus,
.hover\:bg-green-1:hover:not(:active){background-color:var(--ds-global-color-green-1) !important;}
.active\:bg-green-2:active,
.bg-green-2,
.focus\:bg-green-2:focus,
.hover\:bg-green-2:hover:not(:active){background-color:var(--ds-global-color-green-2) !important;}
.active\:bg-green-3:active,
.bg-green-3,
.focus\:bg-green-3:focus,
.hover\:bg-green-3:hover:not(:active){background-color:var(--ds-global-color-green-3) !important;}
.active\:bg-green-4:active,
.bg-green-4,
.focus\:bg-green-4:focus,
.hover\:bg-green-4:hover:not(:active){background-color:var(--ds-global-color-green-4) !important;}
.active\:bg-green-5:active,
.bg-green-5,
.focus\:bg-green-5:focus,
.hover\:bg-green-5:hover:not(:active){background-color:var(--ds-global-color-green-5) !important;}
.active\:bg-green-6:active,
.bg-green-6,
.focus\:bg-green-6:focus,
.hover\:bg-green-6:hover:not(:active){background-color:var(--ds-global-color-green-6) !important;}
.active\:bg-purple-1:active,
.bg-purple-1,
.focus\:bg-purple-1:focus,
.hover\:bg-purple-1:hover:not(:active){background-color:var(--ds-global-color-purple-1) !important;}
.active\:bg-purple-2:active,
.bg-purple-2,
.focus\:bg-purple-2:focus,
.hover\:bg-purple-2:hover:not(:active){background-color:var(--ds-global-color-purple-2) !important;}
.active\:bg-purple-3:active,
.bg-purple-3,
.focus\:bg-purple-3:focus,
.hover\:bg-purple-3:hover:not(:active){background-color:var(--ds-global-color-purple-3) !important;}
.active\:bg-purple-4:active,
.bg-purple-4,
.focus\:bg-purple-4:focus,
.hover\:bg-purple-4:hover:not(:active){background-color:var(--ds-global-color-purple-4) !important;}
.active\:bg-purple-5:active,
.bg-purple-5,
.focus\:bg-purple-5:focus,
.hover\:bg-purple-5:hover:not(:active){background-color:var(--ds-global-color-purple-5) !important;}
.active\:bg-purple-6:active,
.bg-purple-6,
.focus\:bg-purple-6:focus,
.hover\:bg-purple-6:hover:not(:active){background-color:var(--ds-global-color-purple-6) !important;}
.active\:bg-primary-1:active,
.bg-primary-1,
.focus\:bg-primary-1:focus,
.hover\:bg-primary-1:hover:not(:active){background-color:var(--ds-global-color-primary-1) !important;}
.active\:bg-primary-2:active,
.bg-primary-2,
.focus\:bg-primary-2:focus,
.hover\:bg-primary-2:hover:not(:active){background-color:var(--ds-global-color-primary-2) !important;}
.active\:bg-primary-3:active,
.bg-primary-3,
.focus\:bg-primary-3:focus,
.hover\:bg-primary-3:hover:not(:active){background-color:var(--ds-global-color-primary-3) !important;}
.active\:bg-primary-4:active,
.bg-primary-4,
.focus\:bg-primary-4:focus,
.hover\:bg-primary-4:hover:not(:active){background-color:var(--ds-global-color-primary-4) !important;}
.active\:bg-primary-5:active,
.bg-primary-5,
.focus\:bg-primary-5:focus,
.hover\:bg-primary-5:hover:not(:active){background-color:var(--ds-global-color-primary-5) !important;}
.active\:bg-primary-6:active,
.bg-primary-6,
.focus\:bg-primary-6:focus,
.hover\:bg-primary-6:hover:not(:active){background-color:var(--ds-global-color-primary-6) !important;}
.radius-none{border-radius:var(--ds-alias-radius-none) !important;}
.radius-top-none{border-top-left-radius:var(--ds-alias-radius-none) !important;border-top-right-radius:var(--ds-alias-radius-none) !important;}
.radius-bottom-none{border-bottom-left-radius:var(--ds-alias-radius-none) !important;border-bottom-right-radius:var(--ds-alias-radius-none) !important;}
.radius-top-left-none{border-top-left-radius:var(--ds-alias-radius-none) !important;}
.radius-top-right-none{border-top-right-radius:var(--ds-alias-radius-none) !important;}
.radius-bottom-left-none{border-bottom-left-radius:var(--ds-alias-radius-none) !important;}
.radius-bottom-right-none{border-bottom-right-radius:var(--ds-alias-radius-none) !important;}
.radius{border-radius:var(--ds-alias-radius-base) !important;}
.radius-top{border-top-left-radius:var(--ds-alias-radius-base) !important;border-top-right-radius:var(--ds-alias-radius-base) !important;}
.radius-bottom{border-bottom-left-radius:var(--ds-alias-radius-base) !important;border-bottom-right-radius:var(--ds-alias-radius-base) !important;}
.radius-top-left{border-top-left-radius:var(--ds-alias-radius-base) !important;}
.radius-top-right{border-top-right-radius:var(--ds-alias-radius-base) !important;}
.radius-bottom-left{border-bottom-left-radius:var(--ds-alias-radius-base) !important;}
.radius-bottom-right{border-bottom-right-radius:var(--ds-alias-radius-base) !important;}
.radius-lg{border-radius:var(--ds-alias-radius-lg) !important;}
.radius-top-lg{border-top-left-radius:var(--ds-alias-radius-lg) !important;border-top-right-radius:var(--ds-alias-radius-lg) !important;}
.radius-bottom-lg{border-bottom-left-radius:var(--ds-alias-radius-lg) !important;border-bottom-right-radius:var(--ds-alias-radius-lg) !important;}
.radius-top-left-lg{border-top-left-radius:var(--ds-alias-radius-lg) !important;}
.radius-top-right-lg{border-top-right-radius:var(--ds-alias-radius-lg) !important;}
.radius-bottom-left-lg{border-bottom-left-radius:var(--ds-alias-radius-lg) !important;}
.radius-bottom-right-lg{border-bottom-right-radius:var(--ds-alias-radius-lg) !important;}
.radius-rounded{border-radius:var(--ds-alias-radius-rounded) !important;}
.radius-top-rounded{border-top-left-radius:var(--ds-alias-radius-rounded) !important;border-top-right-radius:var(--ds-alias-radius-rounded) !important;}
.radius-bottom-rounded{border-bottom-left-radius:var(--ds-alias-radius-rounded) !important;border-bottom-right-radius:var(--ds-alias-radius-rounded) !important;}
.radius-top-left-rounded{border-top-left-radius:var(--ds-alias-radius-rounded) !important;}
.radius-top-right-rounded{border-top-right-radius:var(--ds-alias-radius-rounded) !important;}
.radius-bottom-left-rounded{border-bottom-left-radius:var(--ds-alias-radius-rounded) !important;}
.radius-bottom-right-rounded{border-bottom-right-radius:var(--ds-alias-radius-rounded) !important;}
.active\:border-white:active,
.border-white,
.hover\:border-white:hover:not(:active){border-color:var(--ds-alias-border-color-white) !important;border-width:var(--ds-alias-border-width-base) !important;border-style:solid;}
.active\:border-top-white:active,
.border-top-white,
.hover\:border-top-white:hover:not(:active){border-top-color:var(--ds-alias-border-color-white) !important;border-top-width:var(--ds-alias-border-width-base) !important;border-top-style:solid;}
.active\:border-bottom-white:active,
.border-bottom-white,
.hover\:border-bottom-white:hover:not(:active){border-bottom-color:var(--ds-alias-border-color-white) !important;border-bottom-width:var(--ds-alias-border-width-base) !important;border-bottom-style:solid;}
.active\:border-left-white:active,
.border-left-white,
.hover\:border-left-white:hover:not(:active){border-left-color:var(--ds-alias-border-color-white) !important;border-left-width:var(--ds-alias-border-width-base) !important;border-left-style:solid;}
.active\:border-right-white:active,
.border-right-white,
.hover\:border-right-white:hover:not(:active){border-right-color:var(--ds-alias-border-color-white) !important;border-right-width:var(--ds-alias-border-width-base) !important;border-right-style:solid;}
.active\:border-base:active,
.active\:border:active,
.border,
.border-base,
.hover\:border-base:hover:not(:active),
.hover\:border:hover:not(:active){border-color:var(--ds-alias-border-color-base) !important;border-width:var(--ds-alias-border-width-base) !important;border-style:solid;}
.active\:border-top-base:active,
.active\:border-top:active,
.border-top,
.border-top-base,
.hover\:border-top-base:hover:not(:active),
.hover\:border-top:hover:not(:active){border-top-color:var(--ds-alias-border-color-base) !important;border-top-width:var(--ds-alias-border-width-base) !important;border-top-style:solid;}
.active\:border-bottom-base:active,
.active\:border-bottom:active,
.border-bottom,
.border-bottom-base,
.hover\:border-bottom-base:hover:not(:active),
.hover\:border-bottom:hover:not(:active){border-bottom-color:var(--ds-alias-border-color-base) !important;border-bottom-width:var(--ds-alias-border-width-base) !important;border-bottom-style:solid;}
.active\:border-left-base:active,
.active\:border-left:active,
.border-left,
.border-left-base,
.hover\:border-left-base:hover:not(:active),
.hover\:border-left:hover:not(:active){border-left-color:var(--ds-alias-border-color-base) !important;border-left-width:var(--ds-alias-border-width-base) !important;border-left-style:solid;}
.active\:border-right-base:active,
.active\:border-right:active,
.border-right,
.border-right-base,
.hover\:border-right-base:hover:not(:active),
.hover\:border-right:hover:not(:active){border-right-color:var(--ds-alias-border-color-base) !important;border-right-width:var(--ds-alias-border-width-base) !important;border-right-style:solid;}
.active\:border-inverted:active,
.border-inverted,
.hover\:border-inverted:hover:not(:active){border-color:var(--ds-alias-border-color-inverted) !important;border-width:var(--ds-alias-border-width-base) !important;border-style:solid;}
.active\:border-top-inverted:active,
.border-top-inverted,
.hover\:border-top-inverted:hover:not(:active){border-top-color:var(--ds-alias-border-color-inverted) !important;border-top-width:var(--ds-alias-border-width-base) !important;border-top-style:solid;}
.active\:border-bottom-inverted:active,
.border-bottom-inverted,
.hover\:border-bottom-inverted:hover:not(:active){border-bottom-color:var(--ds-alias-border-color-inverted) !important;border-bottom-width:var(--ds-alias-border-width-base) !important;border-bottom-style:solid;}
.active\:border-left-inverted:active,
.border-left-inverted,
.hover\:border-left-inverted:hover:not(:active){border-left-color:var(--ds-alias-border-color-inverted) !important;border-left-width:var(--ds-alias-border-width-base) !important;border-left-style:solid;}
.active\:border-right-inverted:active,
.border-right-inverted,
.hover\:border-right-inverted:hover:not(:active){border-right-color:var(--ds-alias-border-color-inverted) !important;border-right-width:var(--ds-alias-border-width-base) !important;border-right-style:solid;}
.active\:border-disabled:active,
.border-disabled,
.hover\:border-disabled:hover:not(:active){border-color:var(--ds-alias-border-color-disabled) !important;border-width:var(--ds-alias-border-width-base) !important;border-style:solid;}
.active\:border-top-disabled:active,
.border-top-disabled,
.hover\:border-top-disabled:hover:not(:active){border-top-color:var(--ds-alias-border-color-disabled) !important;border-top-width:var(--ds-alias-border-width-base) !important;border-top-style:solid;}
.active\:border-bottom-disabled:active,
.border-bottom-disabled,
.hover\:border-bottom-disabled:hover:not(:active){border-bottom-color:var(--ds-alias-border-color-disabled) !important;border-bottom-width:var(--ds-alias-border-width-base) !important;border-bottom-style:solid;}
.active\:border-left-disabled:active,
.border-left-disabled,
.hover\:border-left-disabled:hover:not(:active){border-left-color:var(--ds-alias-border-color-disabled) !important;border-left-width:var(--ds-alias-border-width-base) !important;border-left-style:solid;}
.active\:border-right-disabled:active,
.border-right-disabled,
.hover\:border-right-disabled:hover:not(:active){border-right-color:var(--ds-alias-border-color-disabled) !important;border-right-width:var(--ds-alias-border-width-base) !important;border-right-style:solid;}
.active\:border-disabled-inverted:active,
.border-disabled-inverted,
.hover\:border-disabled-inverted:hover:not(:active){border-color:var(--ds-alias-border-color-disabled-inverted) !important;border-width:var(--ds-alias-border-width-base) !important;border-style:solid;}
.active\:border-top-disabled-inverted:active,
.border-top-disabled-inverted,
.hover\:border-top-disabled-inverted:hover:not(:active){border-top-color:var(--ds-alias-border-color-disabled-inverted) !important;border-top-width:var(--ds-alias-border-width-base) !important;border-top-style:solid;}
.active\:border-bottom-disabled-inverted:active,
.border-bottom-disabled-inverted,
.hover\:border-bottom-disabled-inverted:hover:not(:active){border-bottom-color:var(--ds-alias-border-color-disabled-inverted) !important;border-bottom-width:var(--ds-alias-border-width-base) !important;border-bottom-style:solid;}
.active\:border-left-disabled-inverted:active,
.border-left-disabled-inverted,
.hover\:border-left-disabled-inverted:hover:not(:active){border-left-color:var(--ds-alias-border-color-disabled-inverted) !important;border-left-width:var(--ds-alias-border-width-base) !important;border-left-style:solid;}
.active\:border-right-disabled-inverted:active,
.border-right-disabled-inverted,
.hover\:border-right-disabled-inverted:hover:not(:active){border-right-color:var(--ds-alias-border-color-disabled-inverted) !important;border-right-width:var(--ds-alias-border-width-base) !important;border-right-style:solid;}
.active\:border-grey-light:active,
.border-grey-light,
.hover\:border-grey-light:hover:not(:active){border-color:var(--ds-alias-border-color-grey-light) !important;border-width:var(--ds-alias-border-width-base) !important;border-style:solid;}
.active\:border-top-grey-light:active,
.border-top-grey-light,
.hover\:border-top-grey-light:hover:not(:active){border-top-color:var(--ds-alias-border-color-grey-light) !important;border-top-width:var(--ds-alias-border-width-base) !important;border-top-style:solid;}
.active\:border-bottom-grey-light:active,
.border-bottom-grey-light,
.hover\:border-bottom-grey-light:hover:not(:active){border-bottom-color:var(--ds-alias-border-color-grey-light) !important;border-bottom-width:var(--ds-alias-border-width-base) !important;border-bottom-style:solid;}
.active\:border-left-grey-light:active,
.border-left-grey-light,
.hover\:border-left-grey-light:hover:not(:active){border-left-color:var(--ds-alias-border-color-grey-light) !important;border-left-width:var(--ds-alias-border-width-base) !important;border-left-style:solid;}
.active\:border-right-grey-light:active,
.border-right-grey-light,
.hover\:border-right-grey-light:hover:not(:active){border-right-color:var(--ds-alias-border-color-grey-light) !important;border-right-width:var(--ds-alias-border-width-base) !important;border-right-style:solid;}
.active\:border-grey:active,
.border-grey,
.hover\:border-grey:hover:not(:active){border-color:var(--ds-alias-border-color-grey) !important;border-width:var(--ds-alias-border-width-base) !important;border-style:solid;}
.active\:border-top-grey:active,
.border-top-grey,
.hover\:border-top-grey:hover:not(:active){border-top-color:var(--ds-alias-border-color-grey) !important;border-top-width:var(--ds-alias-border-width-base) !important;border-top-style:solid;}
.active\:border-bottom-grey:active,
.border-bottom-grey,
.hover\:border-bottom-grey:hover:not(:active){border-bottom-color:var(--ds-alias-border-color-grey) !important;border-bottom-width:var(--ds-alias-border-width-base) !important;border-bottom-style:solid;}
.active\:border-left-grey:active,
.border-left-grey,
.hover\:border-left-grey:hover:not(:active){border-left-color:var(--ds-alias-border-color-grey) !important;border-left-width:var(--ds-alias-border-width-base) !important;border-left-style:solid;}
.active\:border-right-grey:active,
.border-right-grey,
.hover\:border-right-grey:hover:not(:active){border-right-color:var(--ds-alias-border-color-grey) !important;border-right-width:var(--ds-alias-border-width-base) !important;border-right-style:solid;}
.active\:border-grey-dark:active,
.border-grey-dark,
.hover\:border-grey-dark:hover:not(:active){border-color:var(--ds-alias-border-color-grey-dark) !important;border-width:var(--ds-alias-border-width-base) !important;border-style:solid;}
.active\:border-top-grey-dark:active,
.border-top-grey-dark,
.hover\:border-top-grey-dark:hover:not(:active){border-top-color:var(--ds-alias-border-color-grey-dark) !important;border-top-width:var(--ds-alias-border-width-base) !important;border-top-style:solid;}
.active\:border-bottom-grey-dark:active,
.border-bottom-grey-dark,
.hover\:border-bottom-grey-dark:hover:not(:active){border-bottom-color:var(--ds-alias-border-color-grey-dark) !important;border-bottom-width:var(--ds-alias-border-width-base) !important;border-bottom-style:solid;}
.active\:border-left-grey-dark:active,
.border-left-grey-dark,
.hover\:border-left-grey-dark:hover:not(:active){border-left-color:var(--ds-alias-border-color-grey-dark) !important;border-left-width:var(--ds-alias-border-width-base) !important;border-left-style:solid;}
.active\:border-right-grey-dark:active,
.border-right-grey-dark,
.hover\:border-right-grey-dark:hover:not(:active){border-right-color:var(--ds-alias-border-color-grey-dark) !important;border-right-width:var(--ds-alias-border-width-base) !important;border-right-style:solid;}
.active\:border-primary-light:active,
.border-primary-light,
.hover\:border-primary-light:hover:not(:active){border-color:var(--ds-alias-border-color-primary-light) !important;border-width:var(--ds-alias-border-width-base) !important;border-style:solid;}
.active\:border-top-primary-light:active,
.border-top-primary-light,
.hover\:border-top-primary-light:hover:not(:active){border-top-color:var(--ds-alias-border-color-primary-light) !important;border-top-width:var(--ds-alias-border-width-base) !important;border-top-style:solid;}
.active\:border-bottom-primary-light:active,
.border-bottom-primary-light,
.hover\:border-bottom-primary-light:hover:not(:active){border-bottom-color:var(--ds-alias-border-color-primary-light) !important;border-bottom-width:var(--ds-alias-border-width-base) !important;border-bottom-style:solid;}
.active\:border-left-primary-light:active,
.border-left-primary-light,
.hover\:border-left-primary-light:hover:not(:active){border-left-color:var(--ds-alias-border-color-primary-light) !important;border-left-width:var(--ds-alias-border-width-base) !important;border-left-style:solid;}
.active\:border-right-primary-light:active,
.border-right-primary-light,
.hover\:border-right-primary-light:hover:not(:active){border-right-color:var(--ds-alias-border-color-primary-light) !important;border-right-width:var(--ds-alias-border-width-base) !important;border-right-style:solid;}
.active\:border-primary:active,
.border-primary,
.hover\:border-primary:hover:not(:active){border-color:var(--ds-alias-border-color-primary) !important;border-width:var(--ds-alias-border-width-base) !important;border-style:solid;}
.active\:border-top-primary:active,
.border-top-primary,
.hover\:border-top-primary:hover:not(:active){border-top-color:var(--ds-alias-border-color-primary) !important;border-top-width:var(--ds-alias-border-width-base) !important;border-top-style:solid;}
.active\:border-bottom-primary:active,
.border-bottom-primary,
.hover\:border-bottom-primary:hover:not(:active){border-bottom-color:var(--ds-alias-border-color-primary) !important;border-bottom-width:var(--ds-alias-border-width-base) !important;border-bottom-style:solid;}
.active\:border-left-primary:active,
.border-left-primary,
.hover\:border-left-primary:hover:not(:active){border-left-color:var(--ds-alias-border-color-primary) !important;border-left-width:var(--ds-alias-border-width-base) !important;border-left-style:solid;}
.active\:border-right-primary:active,
.border-right-primary,
.hover\:border-right-primary:hover:not(:active){border-right-color:var(--ds-alias-border-color-primary) !important;border-right-width:var(--ds-alias-border-width-base) !important;border-right-style:solid;}
.active\:border-primary-hover:active,
.border-primary-hover,
.hover\:border-primary-hover:hover:not(:active){border-color:var(--ds-alias-border-color-primary-hover) !important;border-width:var(--ds-alias-border-width-base) !important;border-style:solid;}
.active\:border-top-primary-hover:active,
.border-top-primary-hover,
.hover\:border-top-primary-hover:hover:not(:active){border-top-color:var(--ds-alias-border-color-primary-hover) !important;border-top-width:var(--ds-alias-border-width-base) !important;border-top-style:solid;}
.active\:border-bottom-primary-hover:active,
.border-bottom-primary-hover,
.hover\:border-bottom-primary-hover:hover:not(:active){border-bottom-color:var(--ds-alias-border-color-primary-hover) !important;border-bottom-width:var(--ds-alias-border-width-base) !important;border-bottom-style:solid;}
.active\:border-left-primary-hover:active,
.border-left-primary-hover,
.hover\:border-left-primary-hover:hover:not(:active){border-left-color:var(--ds-alias-border-color-primary-hover) !important;border-left-width:var(--ds-alias-border-width-base) !important;border-left-style:solid;}
.active\:border-right-primary-hover:active,
.border-right-primary-hover,
.hover\:border-right-primary-hover:hover:not(:active){border-right-color:var(--ds-alias-border-color-primary-hover) !important;border-right-width:var(--ds-alias-border-width-base) !important;border-right-style:solid;}
.active\:border-primary-active:active,
.border-primary-active,
.hover\:border-primary-active:hover:not(:active){border-color:var(--ds-alias-border-color-primary-active) !important;border-width:var(--ds-alias-border-width-base) !important;border-style:solid;}
.active\:border-top-primary-active:active,
.border-top-primary-active,
.hover\:border-top-primary-active:hover:not(:active){border-top-color:var(--ds-alias-border-color-primary-active) !important;border-top-width:var(--ds-alias-border-width-base) !important;border-top-style:solid;}
.active\:border-bottom-primary-active:active,
.border-bottom-primary-active,
.hover\:border-bottom-primary-active:hover:not(:active){border-bottom-color:var(--ds-alias-border-color-primary-active) !important;border-bottom-width:var(--ds-alias-border-width-base) !important;border-bottom-style:solid;}
.active\:border-left-primary-active:active,
.border-left-primary-active,
.hover\:border-left-primary-active:hover:not(:active){border-left-color:var(--ds-alias-border-color-primary-active) !important;border-left-width:var(--ds-alias-border-width-base) !important;border-left-style:solid;}
.active\:border-right-primary-active:active,
.border-right-primary-active,
.hover\:border-right-primary-active:hover:not(:active){border-right-color:var(--ds-alias-border-color-primary-active) !important;border-right-width:var(--ds-alias-border-width-base) !important;border-right-style:solid;}
.active\:border-inverted-primary:active,
.border-inverted-primary,
.hover\:border-inverted-primary:hover:not(:active){border-color:var(--ds-alias-border-color-inverted-primary) !important;border-width:var(--ds-alias-border-width-base) !important;border-style:solid;}
.active\:border-top-inverted-primary:active,
.border-top-inverted-primary,
.hover\:border-top-inverted-primary:hover:not(:active){border-top-color:var(--ds-alias-border-color-inverted-primary) !important;border-top-width:var(--ds-alias-border-width-base) !important;border-top-style:solid;}
.active\:border-bottom-inverted-primary:active,
.border-bottom-inverted-primary,
.hover\:border-bottom-inverted-primary:hover:not(:active){border-bottom-color:var(--ds-alias-border-color-inverted-primary) !important;border-bottom-width:var(--ds-alias-border-width-base) !important;border-bottom-style:solid;}
.active\:border-left-inverted-primary:active,
.border-left-inverted-primary,
.hover\:border-left-inverted-primary:hover:not(:active){border-left-color:var(--ds-alias-border-color-inverted-primary) !important;border-left-width:var(--ds-alias-border-width-base) !important;border-left-style:solid;}
.active\:border-right-inverted-primary:active,
.border-right-inverted-primary,
.hover\:border-right-inverted-primary:hover:not(:active){border-right-color:var(--ds-alias-border-color-inverted-primary) !important;border-right-width:var(--ds-alias-border-width-base) !important;border-right-style:solid;}
.active\:border-inverted-primary-hover:active,
.border-inverted-primary-hover,
.hover\:border-inverted-primary-hover:hover:not(:active){border-color:var(--ds-alias-border-color-inverted-primary-hover) !important;border-width:var(--ds-alias-border-width-base) !important;border-style:solid;}
.active\:border-top-inverted-primary-hover:active,
.border-top-inverted-primary-hover,
.hover\:border-top-inverted-primary-hover:hover:not(:active){border-top-color:var(--ds-alias-border-color-inverted-primary-hover) !important;border-top-width:var(--ds-alias-border-width-base) !important;border-top-style:solid;}
.active\:border-bottom-inverted-primary-hover:active,
.border-bottom-inverted-primary-hover,
.hover\:border-bottom-inverted-primary-hover:hover:not(:active){border-bottom-color:var(--ds-alias-border-color-inverted-primary-hover) !important;border-bottom-width:var(--ds-alias-border-width-base) !important;border-bottom-style:solid;}
.active\:border-left-inverted-primary-hover:active,
.border-left-inverted-primary-hover,
.hover\:border-left-inverted-primary-hover:hover:not(:active){border-left-color:var(--ds-alias-border-color-inverted-primary-hover) !important;border-left-width:var(--ds-alias-border-width-base) !important;border-left-style:solid;}
.active\:border-right-inverted-primary-hover:active,
.border-right-inverted-primary-hover,
.hover\:border-right-inverted-primary-hover:hover:not(:active){border-right-color:var(--ds-alias-border-color-inverted-primary-hover) !important;border-right-width:var(--ds-alias-border-width-base) !important;border-right-style:solid;}
.active\:border-inverted-primary-active:active,
.border-inverted-primary-active,
.hover\:border-inverted-primary-active:hover:not(:active){border-color:var(--ds-alias-border-color-inverted-primary-active) !important;border-width:var(--ds-alias-border-width-base) !important;border-style:solid;}
.active\:border-top-inverted-primary-active:active,
.border-top-inverted-primary-active,
.hover\:border-top-inverted-primary-active:hover:not(:active){border-top-color:var(--ds-alias-border-color-inverted-primary-active) !important;border-top-width:var(--ds-alias-border-width-base) !important;border-top-style:solid;}
.active\:border-bottom-inverted-primary-active:active,
.border-bottom-inverted-primary-active,
.hover\:border-bottom-inverted-primary-active:hover:not(:active){border-bottom-color:var(--ds-alias-border-color-inverted-primary-active) !important;border-bottom-width:var(--ds-alias-border-width-base) !important;border-bottom-style:solid;}
.active\:border-left-inverted-primary-active:active,
.border-left-inverted-primary-active,
.hover\:border-left-inverted-primary-active:hover:not(:active){border-left-color:var(--ds-alias-border-color-inverted-primary-active) !important;border-left-width:var(--ds-alias-border-width-base) !important;border-left-style:solid;}
.active\:border-right-inverted-primary-active:active,
.border-right-inverted-primary-active,
.hover\:border-right-inverted-primary-active:hover:not(:active){border-right-color:var(--ds-alias-border-color-inverted-primary-active) !important;border-right-width:var(--ds-alias-border-width-base) !important;border-right-style:solid;}
.active\:border-info:active,
.border-info,
.hover\:border-info:hover:not(:active){border-color:var(--ds-alias-border-color-info) !important;border-width:var(--ds-alias-border-width-base) !important;border-style:solid;}
.active\:border-top-info:active,
.border-top-info,
.hover\:border-top-info:hover:not(:active){border-top-color:var(--ds-alias-border-color-info) !important;border-top-width:var(--ds-alias-border-width-base) !important;border-top-style:solid;}
.active\:border-bottom-info:active,
.border-bottom-info,
.hover\:border-bottom-info:hover:not(:active){border-bottom-color:var(--ds-alias-border-color-info) !important;border-bottom-width:var(--ds-alias-border-width-base) !important;border-bottom-style:solid;}
.active\:border-left-info:active,
.border-left-info,
.hover\:border-left-info:hover:not(:active){border-left-color:var(--ds-alias-border-color-info) !important;border-left-width:var(--ds-alias-border-width-base) !important;border-left-style:solid;}
.active\:border-right-info:active,
.border-right-info,
.hover\:border-right-info:hover:not(:active){border-right-color:var(--ds-alias-border-color-info) !important;border-right-width:var(--ds-alias-border-width-base) !important;border-right-style:solid;}
.active\:border-info-hover:active,
.border-info-hover,
.hover\:border-info-hover:hover:not(:active){border-color:var(--ds-alias-border-color-info-hover) !important;border-width:var(--ds-alias-border-width-base) !important;border-style:solid;}
.active\:border-top-info-hover:active,
.border-top-info-hover,
.hover\:border-top-info-hover:hover:not(:active){border-top-color:var(--ds-alias-border-color-info-hover) !important;border-top-width:var(--ds-alias-border-width-base) !important;border-top-style:solid;}
.active\:border-bottom-info-hover:active,
.border-bottom-info-hover,
.hover\:border-bottom-info-hover:hover:not(:active){border-bottom-color:var(--ds-alias-border-color-info-hover) !important;border-bottom-width:var(--ds-alias-border-width-base) !important;border-bottom-style:solid;}
.active\:border-left-info-hover:active,
.border-left-info-hover,
.hover\:border-left-info-hover:hover:not(:active){border-left-color:var(--ds-alias-border-color-info-hover) !important;border-left-width:var(--ds-alias-border-width-base) !important;border-left-style:solid;}
.active\:border-right-info-hover:active,
.border-right-info-hover,
.hover\:border-right-info-hover:hover:not(:active){border-right-color:var(--ds-alias-border-color-info-hover) !important;border-right-width:var(--ds-alias-border-width-base) !important;border-right-style:solid;}
.active\:border-info-active:active,
.border-info-active,
.hover\:border-info-active:hover:not(:active){border-color:var(--ds-alias-border-color-info-active) !important;border-width:var(--ds-alias-border-width-base) !important;border-style:solid;}
.active\:border-top-info-active:active,
.border-top-info-active,
.hover\:border-top-info-active:hover:not(:active){border-top-color:var(--ds-alias-border-color-info-active) !important;border-top-width:var(--ds-alias-border-width-base) !important;border-top-style:solid;}
.active\:border-bottom-info-active:active,
.border-bottom-info-active,
.hover\:border-bottom-info-active:hover:not(:active){border-bottom-color:var(--ds-alias-border-color-info-active) !important;border-bottom-width:var(--ds-alias-border-width-base) !important;border-bottom-style:solid;}
.active\:border-left-info-active:active,
.border-left-info-active,
.hover\:border-left-info-active:hover:not(:active){border-left-color:var(--ds-alias-border-color-info-active) !important;border-left-width:var(--ds-alias-border-width-base) !important;border-left-style:solid;}
.active\:border-right-info-active:active,
.border-right-info-active,
.hover\:border-right-info-active:hover:not(:active){border-right-color:var(--ds-alias-border-color-info-active) !important;border-right-width:var(--ds-alias-border-width-base) !important;border-right-style:solid;}
.active\:border-success:active,
.border-success,
.hover\:border-success:hover:not(:active){border-color:var(--ds-alias-border-color-success) !important;border-width:var(--ds-alias-border-width-base) !important;border-style:solid;}
.active\:border-top-success:active,
.border-top-success,
.hover\:border-top-success:hover:not(:active){border-top-color:var(--ds-alias-border-color-success) !important;border-top-width:var(--ds-alias-border-width-base) !important;border-top-style:solid;}
.active\:border-bottom-success:active,
.border-bottom-success,
.hover\:border-bottom-success:hover:not(:active){border-bottom-color:var(--ds-alias-border-color-success) !important;border-bottom-width:var(--ds-alias-border-width-base) !important;border-bottom-style:solid;}
.active\:border-left-success:active,
.border-left-success,
.hover\:border-left-success:hover:not(:active){border-left-color:var(--ds-alias-border-color-success) !important;border-left-width:var(--ds-alias-border-width-base) !important;border-left-style:solid;}
.active\:border-right-success:active,
.border-right-success,
.hover\:border-right-success:hover:not(:active){border-right-color:var(--ds-alias-border-color-success) !important;border-right-width:var(--ds-alias-border-width-base) !important;border-right-style:solid;}
.active\:border-success-hover:active,
.border-success-hover,
.hover\:border-success-hover:hover:not(:active){border-color:var(--ds-alias-border-color-success-hover) !important;border-width:var(--ds-alias-border-width-base) !important;border-style:solid;}
.active\:border-top-success-hover:active,
.border-top-success-hover,
.hover\:border-top-success-hover:hover:not(:active){border-top-color:var(--ds-alias-border-color-success-hover) !important;border-top-width:var(--ds-alias-border-width-base) !important;border-top-style:solid;}
.active\:border-bottom-success-hover:active,
.border-bottom-success-hover,
.hover\:border-bottom-success-hover:hover:not(:active){border-bottom-color:var(--ds-alias-border-color-success-hover) !important;border-bottom-width:var(--ds-alias-border-width-base) !important;border-bottom-style:solid;}
.active\:border-left-success-hover:active,
.border-left-success-hover,
.hover\:border-left-success-hover:hover:not(:active){border-left-color:var(--ds-alias-border-color-success-hover) !important;border-left-width:var(--ds-alias-border-width-base) !important;border-left-style:solid;}
.active\:border-right-success-hover:active,
.border-right-success-hover,
.hover\:border-right-success-hover:hover:not(:active){border-right-color:var(--ds-alias-border-color-success-hover) !important;border-right-width:var(--ds-alias-border-width-base) !important;border-right-style:solid;}
.active\:border-success-active:active,
.border-success-active,
.hover\:border-success-active:hover:not(:active){border-color:var(--ds-alias-border-color-success-active) !important;border-width:var(--ds-alias-border-width-base) !important;border-style:solid;}
.active\:border-top-success-active:active,
.border-top-success-active,
.hover\:border-top-success-active:hover:not(:active){border-top-color:var(--ds-alias-border-color-success-active) !important;border-top-width:var(--ds-alias-border-width-base) !important;border-top-style:solid;}
.active\:border-bottom-success-active:active,
.border-bottom-success-active,
.hover\:border-bottom-success-active:hover:not(:active){border-bottom-color:var(--ds-alias-border-color-success-active) !important;border-bottom-width:var(--ds-alias-border-width-base) !important;border-bottom-style:solid;}
.active\:border-left-success-active:active,
.border-left-success-active,
.hover\:border-left-success-active:hover:not(:active){border-left-color:var(--ds-alias-border-color-success-active) !important;border-left-width:var(--ds-alias-border-width-base) !important;border-left-style:solid;}
.active\:border-right-success-active:active,
.border-right-success-active,
.hover\:border-right-success-active:hover:not(:active){border-right-color:var(--ds-alias-border-color-success-active) !important;border-right-width:var(--ds-alias-border-width-base) !important;border-right-style:solid;}
.active\:border-warning:active,
.border-warning,
.hover\:border-warning:hover:not(:active){border-color:var(--ds-alias-border-color-warning) !important;border-width:var(--ds-alias-border-width-base) !important;border-style:solid;}
.active\:border-top-warning:active,
.border-top-warning,
.hover\:border-top-warning:hover:not(:active){border-top-color:var(--ds-alias-border-color-warning) !important;border-top-width:var(--ds-alias-border-width-base) !important;border-top-style:solid;}
.active\:border-bottom-warning:active,
.border-bottom-warning,
.hover\:border-bottom-warning:hover:not(:active){border-bottom-color:var(--ds-alias-border-color-warning) !important;border-bottom-width:var(--ds-alias-border-width-base) !important;border-bottom-style:solid;}
.active\:border-left-warning:active,
.border-left-warning,
.hover\:border-left-warning:hover:not(:active){border-left-color:var(--ds-alias-border-color-warning) !important;border-left-width:var(--ds-alias-border-width-base) !important;border-left-style:solid;}
.active\:border-right-warning:active,
.border-right-warning,
.hover\:border-right-warning:hover:not(:active){border-right-color:var(--ds-alias-border-color-warning) !important;border-right-width:var(--ds-alias-border-width-base) !important;border-right-style:solid;}
.active\:border-warning-hover:active,
.border-warning-hover,
.hover\:border-warning-hover:hover:not(:active){border-color:var(--ds-alias-border-color-warning-hover) !important;border-width:var(--ds-alias-border-width-base) !important;border-style:solid;}
.active\:border-top-warning-hover:active,
.border-top-warning-hover,
.hover\:border-top-warning-hover:hover:not(:active){border-top-color:var(--ds-alias-border-color-warning-hover) !important;border-top-width:var(--ds-alias-border-width-base) !important;border-top-style:solid;}
.active\:border-bottom-warning-hover:active,
.border-bottom-warning-hover,
.hover\:border-bottom-warning-hover:hover:not(:active){border-bottom-color:var(--ds-alias-border-color-warning-hover) !important;border-bottom-width:var(--ds-alias-border-width-base) !important;border-bottom-style:solid;}
.active\:border-left-warning-hover:active,
.border-left-warning-hover,
.hover\:border-left-warning-hover:hover:not(:active){border-left-color:var(--ds-alias-border-color-warning-hover) !important;border-left-width:var(--ds-alias-border-width-base) !important;border-left-style:solid;}
.active\:border-right-warning-hover:active,
.border-right-warning-hover,
.hover\:border-right-warning-hover:hover:not(:active){border-right-color:var(--ds-alias-border-color-warning-hover) !important;border-right-width:var(--ds-alias-border-width-base) !important;border-right-style:solid;}
.active\:border-warning-active:active,
.border-warning-active,
.hover\:border-warning-active:hover:not(:active){border-color:var(--ds-alias-border-color-warning-active) !important;border-width:var(--ds-alias-border-width-base) !important;border-style:solid;}
.active\:border-top-warning-active:active,
.border-top-warning-active,
.hover\:border-top-warning-active:hover:not(:active){border-top-color:var(--ds-alias-border-color-warning-active) !important;border-top-width:var(--ds-alias-border-width-base) !important;border-top-style:solid;}
.active\:border-bottom-warning-active:active,
.border-bottom-warning-active,
.hover\:border-bottom-warning-active:hover:not(:active){border-bottom-color:var(--ds-alias-border-color-warning-active) !important;border-bottom-width:var(--ds-alias-border-width-base) !important;border-bottom-style:solid;}
.active\:border-left-warning-active:active,
.border-left-warning-active,
.hover\:border-left-warning-active:hover:not(:active){border-left-color:var(--ds-alias-border-color-warning-active) !important;border-left-width:var(--ds-alias-border-width-base) !important;border-left-style:solid;}
.active\:border-right-warning-active:active,
.border-right-warning-active,
.hover\:border-right-warning-active:hover:not(:active){border-right-color:var(--ds-alias-border-color-warning-active) !important;border-right-width:var(--ds-alias-border-width-base) !important;border-right-style:solid;}
.active\:border-danger:active,
.border-danger,
.hover\:border-danger:hover:not(:active){border-color:var(--ds-alias-border-color-danger) !important;border-width:var(--ds-alias-border-width-base) !important;border-style:solid;}
.active\:border-top-danger:active,
.border-top-danger,
.hover\:border-top-danger:hover:not(:active){border-top-color:var(--ds-alias-border-color-danger) !important;border-top-width:var(--ds-alias-border-width-base) !important;border-top-style:solid;}
.active\:border-bottom-danger:active,
.border-bottom-danger,
.hover\:border-bottom-danger:hover:not(:active){border-bottom-color:var(--ds-alias-border-color-danger) !important;border-bottom-width:var(--ds-alias-border-width-base) !important;border-bottom-style:solid;}
.active\:border-left-danger:active,
.border-left-danger,
.hover\:border-left-danger:hover:not(:active){border-left-color:var(--ds-alias-border-color-danger) !important;border-left-width:var(--ds-alias-border-width-base) !important;border-left-style:solid;}
.active\:border-right-danger:active,
.border-right-danger,
.hover\:border-right-danger:hover:not(:active){border-right-color:var(--ds-alias-border-color-danger) !important;border-right-width:var(--ds-alias-border-width-base) !important;border-right-style:solid;}
.active\:border-danger-hover:active,
.border-danger-hover,
.hover\:border-danger-hover:hover:not(:active){border-color:var(--ds-alias-border-color-danger-hover) !important;border-width:var(--ds-alias-border-width-base) !important;border-style:solid;}
.active\:border-top-danger-hover:active,
.border-top-danger-hover,
.hover\:border-top-danger-hover:hover:not(:active){border-top-color:var(--ds-alias-border-color-danger-hover) !important;border-top-width:var(--ds-alias-border-width-base) !important;border-top-style:solid;}
.active\:border-bottom-danger-hover:active,
.border-bottom-danger-hover,
.hover\:border-bottom-danger-hover:hover:not(:active){border-bottom-color:var(--ds-alias-border-color-danger-hover) !important;border-bottom-width:var(--ds-alias-border-width-base) !important;border-bottom-style:solid;}
.active\:border-left-danger-hover:active,
.border-left-danger-hover,
.hover\:border-left-danger-hover:hover:not(:active){border-left-color:var(--ds-alias-border-color-danger-hover) !important;border-left-width:var(--ds-alias-border-width-base) !important;border-left-style:solid;}
.active\:border-right-danger-hover:active,
.border-right-danger-hover,
.hover\:border-right-danger-hover:hover:not(:active){border-right-color:var(--ds-alias-border-color-danger-hover) !important;border-right-width:var(--ds-alias-border-width-base) !important;border-right-style:solid;}
.active\:border-danger-active:active,
.border-danger-active,
.hover\:border-danger-active:hover:not(:active){border-color:var(--ds-alias-border-color-danger-active) !important;border-width:var(--ds-alias-border-width-base) !important;border-style:solid;}
.active\:border-top-danger-active:active,
.border-top-danger-active,
.hover\:border-top-danger-active:hover:not(:active){border-top-color:var(--ds-alias-border-color-danger-active) !important;border-top-width:var(--ds-alias-border-width-base) !important;border-top-style:solid;}
.active\:border-bottom-danger-active:active,
.border-bottom-danger-active,
.hover\:border-bottom-danger-active:hover:not(:active){border-bottom-color:var(--ds-alias-border-color-danger-active) !important;border-bottom-width:var(--ds-alias-border-width-base) !important;border-bottom-style:solid;}
.active\:border-left-danger-active:active,
.border-left-danger-active,
.hover\:border-left-danger-active:hover:not(:active){border-left-color:var(--ds-alias-border-color-danger-active) !important;border-left-width:var(--ds-alias-border-width-base) !important;border-left-style:solid;}
.active\:border-right-danger-active:active,
.border-right-danger-active,
.hover\:border-right-danger-active:hover:not(:active){border-right-color:var(--ds-alias-border-color-danger-active) !important;border-right-width:var(--ds-alias-border-width-base) !important;border-right-style:solid;}
.active\:border-green:active,
.border-green,
.hover\:border-green:hover:not(:active){border-color:var(--ds-alias-border-color-green) !important;border-width:var(--ds-alias-border-width-base) !important;border-style:solid;}
.active\:border-top-green:active,
.border-top-green,
.hover\:border-top-green:hover:not(:active){border-top-color:var(--ds-alias-border-color-green) !important;border-top-width:var(--ds-alias-border-width-base) !important;border-top-style:solid;}
.active\:border-bottom-green:active,
.border-bottom-green,
.hover\:border-bottom-green:hover:not(:active){border-bottom-color:var(--ds-alias-border-color-green) !important;border-bottom-width:var(--ds-alias-border-width-base) !important;border-bottom-style:solid;}
.active\:border-left-green:active,
.border-left-green,
.hover\:border-left-green:hover:not(:active){border-left-color:var(--ds-alias-border-color-green) !important;border-left-width:var(--ds-alias-border-width-base) !important;border-left-style:solid;}
.active\:border-right-green:active,
.border-right-green,
.hover\:border-right-green:hover:not(:active){border-right-color:var(--ds-alias-border-color-green) !important;border-right-width:var(--ds-alias-border-width-base) !important;border-right-style:solid;}
.active\:border-green-hover:active,
.border-green-hover,
.hover\:border-green-hover:hover:not(:active){border-color:var(--ds-alias-border-color-green-hover) !important;border-width:var(--ds-alias-border-width-base) !important;border-style:solid;}
.active\:border-top-green-hover:active,
.border-top-green-hover,
.hover\:border-top-green-hover:hover:not(:active){border-top-color:var(--ds-alias-border-color-green-hover) !important;border-top-width:var(--ds-alias-border-width-base) !important;border-top-style:solid;}
.active\:border-bottom-green-hover:active,
.border-bottom-green-hover,
.hover\:border-bottom-green-hover:hover:not(:active){border-bottom-color:var(--ds-alias-border-color-green-hover) !important;border-bottom-width:var(--ds-alias-border-width-base) !important;border-bottom-style:solid;}
.active\:border-left-green-hover:active,
.border-left-green-hover,
.hover\:border-left-green-hover:hover:not(:active){border-left-color:var(--ds-alias-border-color-green-hover) !important;border-left-width:var(--ds-alias-border-width-base) !important;border-left-style:solid;}
.active\:border-right-green-hover:active,
.border-right-green-hover,
.hover\:border-right-green-hover:hover:not(:active){border-right-color:var(--ds-alias-border-color-green-hover) !important;border-right-width:var(--ds-alias-border-width-base) !important;border-right-style:solid;}
.active\:border-green-active:active,
.border-green-active,
.hover\:border-green-active:hover:not(:active){border-color:var(--ds-alias-border-color-green-active) !important;border-width:var(--ds-alias-border-width-base) !important;border-style:solid;}
.active\:border-top-green-active:active,
.border-top-green-active,
.hover\:border-top-green-active:hover:not(:active){border-top-color:var(--ds-alias-border-color-green-active) !important;border-top-width:var(--ds-alias-border-width-base) !important;border-top-style:solid;}
.active\:border-bottom-green-active:active,
.border-bottom-green-active,
.hover\:border-bottom-green-active:hover:not(:active){border-bottom-color:var(--ds-alias-border-color-green-active) !important;border-bottom-width:var(--ds-alias-border-width-base) !important;border-bottom-style:solid;}
.active\:border-left-green-active:active,
.border-left-green-active,
.hover\:border-left-green-active:hover:not(:active){border-left-color:var(--ds-alias-border-color-green-active) !important;border-left-width:var(--ds-alias-border-width-base) !important;border-left-style:solid;}
.active\:border-right-green-active:active,
.border-right-green-active,
.hover\:border-right-green-active:hover:not(:active){border-right-color:var(--ds-alias-border-color-green-active) !important;border-right-width:var(--ds-alias-border-width-base) !important;border-right-style:solid;}
.active\:border-purple:active,
.border-purple,
.hover\:border-purple:hover:not(:active){border-color:var(--ds-alias-border-color-purple) !important;border-width:var(--ds-alias-border-width-base) !important;border-style:solid;}
.active\:border-top-purple:active,
.border-top-purple,
.hover\:border-top-purple:hover:not(:active){border-top-color:var(--ds-alias-border-color-purple) !important;border-top-width:var(--ds-alias-border-width-base) !important;border-top-style:solid;}
.active\:border-bottom-purple:active,
.border-bottom-purple,
.hover\:border-bottom-purple:hover:not(:active){border-bottom-color:var(--ds-alias-border-color-purple) !important;border-bottom-width:var(--ds-alias-border-width-base) !important;border-bottom-style:solid;}
.active\:border-left-purple:active,
.border-left-purple,
.hover\:border-left-purple:hover:not(:active){border-left-color:var(--ds-alias-border-color-purple) !important;border-left-width:var(--ds-alias-border-width-base) !important;border-left-style:solid;}
.active\:border-right-purple:active,
.border-right-purple,
.hover\:border-right-purple:hover:not(:active){border-right-color:var(--ds-alias-border-color-purple) !important;border-right-width:var(--ds-alias-border-width-base) !important;border-right-style:solid;}
.active\:border-purple-hover:active,
.border-purple-hover,
.hover\:border-purple-hover:hover:not(:active){border-color:var(--ds-alias-border-color-purple-hover) !important;border-width:var(--ds-alias-border-width-base) !important;border-style:solid;}
.active\:border-top-purple-hover:active,
.border-top-purple-hover,
.hover\:border-top-purple-hover:hover:not(:active){border-top-color:var(--ds-alias-border-color-purple-hover) !important;border-top-width:var(--ds-alias-border-width-base) !important;border-top-style:solid;}
.active\:border-bottom-purple-hover:active,
.border-bottom-purple-hover,
.hover\:border-bottom-purple-hover:hover:not(:active){border-bottom-color:var(--ds-alias-border-color-purple-hover) !important;border-bottom-width:var(--ds-alias-border-width-base) !important;border-bottom-style:solid;}
.active\:border-left-purple-hover:active,
.border-left-purple-hover,
.hover\:border-left-purple-hover:hover:not(:active){border-left-color:var(--ds-alias-border-color-purple-hover) !important;border-left-width:var(--ds-alias-border-width-base) !important;border-left-style:solid;}
.active\:border-right-purple-hover:active,
.border-right-purple-hover,
.hover\:border-right-purple-hover:hover:not(:active){border-right-color:var(--ds-alias-border-color-purple-hover) !important;border-right-width:var(--ds-alias-border-width-base) !important;border-right-style:solid;}
.active\:border-purple-active:active,
.border-purple-active,
.hover\:border-purple-active:hover:not(:active){border-color:var(--ds-alias-border-color-purple-active) !important;border-width:var(--ds-alias-border-width-base) !important;border-style:solid;}
.active\:border-top-purple-active:active,
.border-top-purple-active,
.hover\:border-top-purple-active:hover:not(:active){border-top-color:var(--ds-alias-border-color-purple-active) !important;border-top-width:var(--ds-alias-border-width-base) !important;border-top-style:solid;}
.active\:border-bottom-purple-active:active,
.border-bottom-purple-active,
.hover\:border-bottom-purple-active:hover:not(:active){border-bottom-color:var(--ds-alias-border-color-purple-active) !important;border-bottom-width:var(--ds-alias-border-width-base) !important;border-bottom-style:solid;}
.active\:border-left-purple-active:active,
.border-left-purple-active,
.hover\:border-left-purple-active:hover:not(:active){border-left-color:var(--ds-alias-border-color-purple-active) !important;border-left-width:var(--ds-alias-border-width-base) !important;border-left-style:solid;}
.active\:border-right-purple-active:active,
.border-right-purple-active,
.hover\:border-right-purple-active:hover:not(:active){border-right-color:var(--ds-alias-border-color-purple-active) !important;border-right-width:var(--ds-alias-border-width-base) !important;border-right-style:solid;}
.active\:border-red:active,
.border-red,
.hover\:border-red:hover:not(:active){border-color:var(--ds-alias-border-color-red) !important;border-width:var(--ds-alias-border-width-base) !important;border-style:solid;}
.active\:border-top-red:active,
.border-top-red,
.hover\:border-top-red:hover:not(:active){border-top-color:var(--ds-alias-border-color-red) !important;border-top-width:var(--ds-alias-border-width-base) !important;border-top-style:solid;}
.active\:border-bottom-red:active,
.border-bottom-red,
.hover\:border-bottom-red:hover:not(:active){border-bottom-color:var(--ds-alias-border-color-red) !important;border-bottom-width:var(--ds-alias-border-width-base) !important;border-bottom-style:solid;}
.active\:border-left-red:active,
.border-left-red,
.hover\:border-left-red:hover:not(:active){border-left-color:var(--ds-alias-border-color-red) !important;border-left-width:var(--ds-alias-border-width-base) !important;border-left-style:solid;}
.active\:border-right-red:active,
.border-right-red,
.hover\:border-right-red:hover:not(:active){border-right-color:var(--ds-alias-border-color-red) !important;border-right-width:var(--ds-alias-border-width-base) !important;border-right-style:solid;}
.active\:border-red-hover:active,
.border-red-hover,
.hover\:border-red-hover:hover:not(:active){border-color:var(--ds-alias-border-color-red-hover) !important;border-width:var(--ds-alias-border-width-base) !important;border-style:solid;}
.active\:border-top-red-hover:active,
.border-top-red-hover,
.hover\:border-top-red-hover:hover:not(:active){border-top-color:var(--ds-alias-border-color-red-hover) !important;border-top-width:var(--ds-alias-border-width-base) !important;border-top-style:solid;}
.active\:border-bottom-red-hover:active,
.border-bottom-red-hover,
.hover\:border-bottom-red-hover:hover:not(:active){border-bottom-color:var(--ds-alias-border-color-red-hover) !important;border-bottom-width:var(--ds-alias-border-width-base) !important;border-bottom-style:solid;}
.active\:border-left-red-hover:active,
.border-left-red-hover,
.hover\:border-left-red-hover:hover:not(:active){border-left-color:var(--ds-alias-border-color-red-hover) !important;border-left-width:var(--ds-alias-border-width-base) !important;border-left-style:solid;}
.active\:border-right-red-hover:active,
.border-right-red-hover,
.hover\:border-right-red-hover:hover:not(:active){border-right-color:var(--ds-alias-border-color-red-hover) !important;border-right-width:var(--ds-alias-border-width-base) !important;border-right-style:solid;}
.active\:border-red-active:active,
.border-red-active,
.hover\:border-red-active:hover:not(:active){border-color:var(--ds-alias-border-color-red-active) !important;border-width:var(--ds-alias-border-width-base) !important;border-style:solid;}
.active\:border-top-red-active:active,
.border-top-red-active,
.hover\:border-top-red-active:hover:not(:active){border-top-color:var(--ds-alias-border-color-red-active) !important;border-top-width:var(--ds-alias-border-width-base) !important;border-top-style:solid;}
.active\:border-bottom-red-active:active,
.border-bottom-red-active,
.hover\:border-bottom-red-active:hover:not(:active){border-bottom-color:var(--ds-alias-border-color-red-active) !important;border-bottom-width:var(--ds-alias-border-width-base) !important;border-bottom-style:solid;}
.active\:border-left-red-active:active,
.border-left-red-active,
.hover\:border-left-red-active:hover:not(:active){border-left-color:var(--ds-alias-border-color-red-active) !important;border-left-width:var(--ds-alias-border-width-base) !important;border-left-style:solid;}
.active\:border-right-red-active:active,
.border-right-red-active,
.hover\:border-right-red-active:hover:not(:active){border-right-color:var(--ds-alias-border-color-red-active) !important;border-right-width:var(--ds-alias-border-width-base) !important;border-right-style:solid;}
.active\:border-yellow:active,
.border-yellow,
.hover\:border-yellow:hover:not(:active){border-color:var(--ds-alias-border-color-yellow) !important;border-width:var(--ds-alias-border-width-base) !important;border-style:solid;}
.active\:border-top-yellow:active,
.border-top-yellow,
.hover\:border-top-yellow:hover:not(:active){border-top-color:var(--ds-alias-border-color-yellow) !important;border-top-width:var(--ds-alias-border-width-base) !important;border-top-style:solid;}
.active\:border-bottom-yellow:active,
.border-bottom-yellow,
.hover\:border-bottom-yellow:hover:not(:active){border-bottom-color:var(--ds-alias-border-color-yellow) !important;border-bottom-width:var(--ds-alias-border-width-base) !important;border-bottom-style:solid;}
.active\:border-left-yellow:active,
.border-left-yellow,
.hover\:border-left-yellow:hover:not(:active){border-left-color:var(--ds-alias-border-color-yellow) !important;border-left-width:var(--ds-alias-border-width-base) !important;border-left-style:solid;}
.active\:border-right-yellow:active,
.border-right-yellow,
.hover\:border-right-yellow:hover:not(:active){border-right-color:var(--ds-alias-border-color-yellow) !important;border-right-width:var(--ds-alias-border-width-base) !important;border-right-style:solid;}
.active\:border-yellow-hover:active,
.border-yellow-hover,
.hover\:border-yellow-hover:hover:not(:active){border-color:var(--ds-alias-border-color-yellow-hover) !important;border-width:var(--ds-alias-border-width-base) !important;border-style:solid;}
.active\:border-top-yellow-hover:active,
.border-top-yellow-hover,
.hover\:border-top-yellow-hover:hover:not(:active){border-top-color:var(--ds-alias-border-color-yellow-hover) !important;border-top-width:var(--ds-alias-border-width-base) !important;border-top-style:solid;}
.active\:border-bottom-yellow-hover:active,
.border-bottom-yellow-hover,
.hover\:border-bottom-yellow-hover:hover:not(:active){border-bottom-color:var(--ds-alias-border-color-yellow-hover) !important;border-bottom-width:var(--ds-alias-border-width-base) !important;border-bottom-style:solid;}
.active\:border-left-yellow-hover:active,
.border-left-yellow-hover,
.hover\:border-left-yellow-hover:hover:not(:active){border-left-color:var(--ds-alias-border-color-yellow-hover) !important;border-left-width:var(--ds-alias-border-width-base) !important;border-left-style:solid;}
.active\:border-right-yellow-hover:active,
.border-right-yellow-hover,
.hover\:border-right-yellow-hover:hover:not(:active){border-right-color:var(--ds-alias-border-color-yellow-hover) !important;border-right-width:var(--ds-alias-border-width-base) !important;border-right-style:solid;}
.active\:border-yellow-active:active,
.border-yellow-active,
.hover\:border-yellow-active:hover:not(:active){border-color:var(--ds-alias-border-color-yellow-active) !important;border-width:var(--ds-alias-border-width-base) !important;border-style:solid;}
.active\:border-top-yellow-active:active,
.border-top-yellow-active,
.hover\:border-top-yellow-active:hover:not(:active){border-top-color:var(--ds-alias-border-color-yellow-active) !important;border-top-width:var(--ds-alias-border-width-base) !important;border-top-style:solid;}
.active\:border-bottom-yellow-active:active,
.border-bottom-yellow-active,
.hover\:border-bottom-yellow-active:hover:not(:active){border-bottom-color:var(--ds-alias-border-color-yellow-active) !important;border-bottom-width:var(--ds-alias-border-width-base) !important;border-bottom-style:solid;}
.active\:border-left-yellow-active:active,
.border-left-yellow-active,
.hover\:border-left-yellow-active:hover:not(:active){border-left-color:var(--ds-alias-border-color-yellow-active) !important;border-left-width:var(--ds-alias-border-width-base) !important;border-left-style:solid;}
.active\:border-right-yellow-active:active,
.border-right-yellow-active,
.hover\:border-right-yellow-active:hover:not(:active){border-right-color:var(--ds-alias-border-color-yellow-active) !important;border-right-width:var(--ds-alias-border-width-base) !important;border-right-style:solid;}
.active\:border-none:active,
.border-none,
.hover\:border-none:hover:not(:active){border:none !important;}
.active\:border-top-none:active,
.border-top-none,
.hover\:border-top-none:hover:not(:active){border-top:none !important;}
.active\:border-bottom-none:active,
.border-bottom-none,
.hover\:border-bottom-none:hover:not(:active){border-bottom:none !important;}
.active\:border-left-none:active,
.border-left-none,
.hover\:border-left-none:hover:not(:active){border-left:none !important;}
.active\:border-right-none:active,
.border-right-none,
.hover\:border-right-none:hover:not(:active){border-right:none !important;}
.active\:border-width-none:active,
.border-width-none,
.hover\:border-width-none:hover:not(:active){border-width:var(--ds-alias-border-width-none) !important;}
.active\:border-width-base:active,
.border-width-base,
.hover\:border-width-base:hover:not(:active){border-width:var(--ds-alias-border-width-base) !important;}
.active\:border-width-md:active,
.border-width-md,
.hover\:border-width-md:hover:not(:active){border-width:var(--ds-alias-border-width-md) !important;}
.z-index-deep{z-index:var(--ds-alias-z-index-deep) !important;}
.z-index-masked{z-index:var(--ds-alias-z-index-masked) !important;}
.z-index-mask{z-index:var(--ds-alias-z-index-mask) !important;}
.z-index-sticky{z-index:var(--ds-alias-z-index-sticky) !important;}
.z-index-navigation{z-index:var(--ds-alias-z-index-navigation) !important;}
.z-index-popup{z-index:var(--ds-alias-z-index-popup) !important;}
.z-index-modal{z-index:var(--ds-alias-z-index-modal) !important;}
.z-index-toast{z-index:var(--ds-alias-z-index-toast) !important;}
.z-index-tooltip{z-index:var(--ds-alias-z-index-tooltip) !important;}
.opacity-hidden{opacity:var(--ds-alias-opacity-hidden) !important;}
.opacity-half{opacity:var(--ds-alias-opacity-half) !important;}
.opacity-disabled{opacity:var(--ds-alias-opacity-disabled) !important;}
.opacity-backdrop{opacity:var(--ds-alias-opacity-backdrop) !important;}
.opacity-full{opacity:var(--ds-alias-opacity-full) !important;}
.active\:shadow-none:active,
.focus\:shadow-none:focus,
.hover\:shadow-none:hover:not(:active),
.shadow-none{box-shadow:var(--ds-alias-shadow-box-none) !important;}
.active\:shadow-header:active,
.focus\:shadow-header:focus,
.hover\:shadow-header:hover:not(:active),
.shadow-header{box-shadow:var(--ds-alias-shadow-box-header) !important;}
.active\:shadow:active,
.focus\:shadow:focus,
.hover\:shadow:hover:not(:active),
.shadow{box-shadow:var(--ds-alias-shadow-box-base) !important;}
.active\:shadow-elevated:active,
.focus\:shadow-elevated:focus,
.hover\:shadow-elevated:hover:not(:active),
.shadow-elevated{box-shadow:var(--ds-alias-shadow-box-elevated) !important;}
.text-shadow{text-shadow:var(--ds-alias-shadow-text) !important;}
.text-shadow-none{text-shadow:none !important;}
.select-none{-webkit-user-select:none !important;-moz-user-select:none !important;user-select:none !important;}
.select-text{-webkit-user-select:text !important;-moz-user-select:text !important;user-select:text !important;}
.select-all{-webkit-user-select:all !important;-moz-user-select:all !important;user-select:all !important;}
.select-auto{-webkit-user-select:auto !important;-moz-user-select:auto !important;user-select:auto !important;}
.cursor-auto{cursor:auto !important;}
.cursor-pointer{cursor:pointer !important;}
.cursor-wait{cursor:wait !important;}
.cursor-move{cursor:move !important;}
.cursor-not-allowed{cursor:not-allowed !important;}
.pointer-events-auto{pointer-events:auto !important;}
.pointer-events-none{pointer-events:none !important;}
.h-full{height:100% !important;}
.h-screen{height:100vh !important;}
.h-auto{height:auto-content !important;}
.h-min{height:-moz-min-content !important;height:min-content !important;}
.h-max{height:-moz-max-content !important;height:max-content !important;}
.h-fit{height:-moz-fit-content !important;height:fit-content !important;}
.h-1rem{height:1rem !important;}
.h-2rem{height:2rem !important;}
.h-3rem{height:3rem !important;}
.h-4rem{height:4rem !important;}
.h-5rem{height:5rem !important;}
.h-6rem{height:6rem !important;}
.h-7rem{height:7rem !important;}
.h-8rem{height:8rem !important;}
.h-9rem{height:9rem !important;}
.h-10rem{height:10rem !important;}
.h-11rem{height:11rem !important;}
.h-12rem{height:12rem !important;}
.h-13rem{height:13rem !important;}
.h-14rem{height:14rem !important;}
.h-15rem{height:15rem !important;}
.h-16rem{height:16rem !important;}
.h-17rem{height:17rem !important;}
.h-18rem{height:18rem !important;}
.h-19rem{height:19rem !important;}
.h-20rem{height:20rem !important;}
.h-21rem{height:21rem !important;}
.h-22rem{height:22rem !important;}
.h-23rem{height:23rem !important;}
.h-24rem{height:24rem !important;}
.h-25rem{height:25rem !important;}
.h-26rem{height:26rem !important;}
.h-27rem{height:27rem !important;}
.h-28rem{height:28rem !important;}
.h-29rem{height:29rem !important;}
.h-30rem{height:30rem !important;}
.w-12,
.w-full{width:100% !important;}
.w-screen{width:100vw !important;}
.w-auto{width:auto-content !important;}
.w-min{width:-moz-min-content !important;width:min-content !important;}
.w-max{width:-moz-max-content !important;width:max-content !important;}
.w-fit{width:-moz-fit-content !important;width:fit-content !important;}
.w-1rem{width:1rem !important;}
.w-2rem{width:2rem !important;}
.w-3rem{width:3rem !important;}
.w-4rem{width:4rem !important;}
.w-5rem{width:5rem !important;}
.w-6rem{width:6rem !important;}
.w-7rem{width:7rem !important;}
.w-8rem{width:8rem !important;}
.w-9rem{width:9rem !important;}
.w-10rem{width:10rem !important;}
.w-11rem{width:11rem !important;}
.w-12rem{width:12rem !important;}
.w-13rem{width:13rem !important;}
.w-14rem{width:14rem !important;}
.w-15rem{width:15rem !important;}
.w-16rem{width:16rem !important;}
.w-17rem{width:17rem !important;}
.w-18rem{width:18rem !important;}
.w-19rem{width:19rem !important;}
.w-20rem{width:20rem !important;}
.w-21rem{width:21rem !important;}
.w-22rem{width:22rem !important;}
.w-23rem{width:23rem !important;}
.w-24rem{width:24rem !important;}
.w-25rem{width:25rem !important;}
.w-26rem{width:26rem !important;}
.w-27rem{width:27rem !important;}
.w-28rem{width:28rem !important;}
.w-29rem{width:29rem !important;}
.w-30rem{width:30rem !important;}
.w-1{width:8.33% !important;}
.w-2{width:16.67% !important;}
.w-3{width:25% !important;}
.w-4{width:33.33% !important;}
.w-5{width:41.67% !important;}
.w-6{width:50% !important;}
.w-7{width:58.33% !important;}
.w-8{width:66.67% !important;}
.w-9{width:75% !important;}
.w-10{width:83.33% !important;}
.w-11{width:91.67% !important;}
.min-h-0{min-height:0 !important;}
.min-h-auto{min-height:auto !important;}
.min-h-full{min-height:100% !important;}
.min-h-screen{min-height:100vh !important;}
.min-h-min{min-height:-moz-min-content !important;min-height:min-content !important;}
.min-h-max{min-height:-moz-max-content !important;min-height:max-content !important;}
.min-h-fit{min-height:-moz-fit-content !important;min-height:fit-content !important;}
.max-h-0{max-height:0 !important;}
.max-h-auto{max-height:auto !important;}
.max-h-full{max-height:100% !important;}
.max-h-screen{max-height:100vh !important;}
.min-w-0{min-width:0 !important;}
.min-w-auto{min-width:auto !important;}
.min-w-full{min-width:100% !important;}
.min-w-screen{min-width:100vw !important;}
.min-w-min{min-width:-moz-min-content !important;min-width:min-content !important;}
.min-w-max{min-width:-moz-max-content !important;min-width:max-content !important;}
.min-w-fit{min-width:-moz-fit-content !important;min-width:fit-content !important;}
.max-w-0{max-width:0 !important;}
.max-w-auto{max-width:auto !important;}
.max-w-full{max-width:100% !important;}
.max-w-screen{max-width:100vw !important;}
.max-w-min{max-width:-moz-min-content !important;max-width:min-content !important;}
.max-w-max{max-width:-moz-max-content !important;max-width:max-content !important;}
.max-w-fit{max-width:-moz-fit-content !important;max-width:fit-content !important;}
.text-white{color:var(--ds-alias-text-color-white) !important;}
.text-primary-light{color:var(--ds-alias-text-color-primary-light) !important;}
.text-hint{color:var(--ds-alias-text-color-hint) !important;}
.text-placeholder{color:var(--ds-alias-text-color-placeholder) !important;}
.text-disabled{color:var(--ds-alias-text-color-disabled) !important;}
.text-inverted-disabled{color:var(--ds-alias-text-color-inverted-disabled) !important;}
.text-info{color:var(--ds-alias-text-color-info) !important;}
.text-warning{color:var(--ds-alias-text-color-warning) !important;}
.text-success{color:var(--ds-alias-text-color-success) !important;}
.text-danger{color:var(--ds-alias-text-color-danger) !important;}
.text-danger-hover{color:var(--ds-alias-text-color-danger-hover) !important;}
.text-danger-active{color:var(--ds-alias-text-color-danger-active) !important;}
.text-primary{color:var(--ds-alias-text-color-primary) !important;}
.text-primary-hover{color:var(--ds-alias-text-color-primary-hover) !important;}
.text-primary-active{color:var(--ds-alias-text-color-primary-active) !important;}
.text-inverted-primary{color:var(--ds-alias-text-color-inverted-primary) !important;}
.text-inverted-primary-hover{color:var(--ds-alias-text-color-inverted-primary-hover) !important;}
.text-inverted-primary-active{color:var(--ds-alias-text-color-inverted-primary-active) !important;}
.text-grey-light{color:var(--ds-alias-text-color-grey-light) !important;}
.text-grey{color:var(--ds-alias-text-color-grey) !important;}
.text-grey-dark{color:var(--ds-alias-text-color-grey-dark) !important;}
.text-sky-dark{color:var(--ds-alias-text-color-sky-dark) !important;}
.text-none{font-size:var(--ds-alias-text-size-none-device) !important;}
.text-x-small,
.text-xs{font-size:var(--ds-alias-text-size-xs-device) !important;}
.text-sm,
.text-small{font-size:var(--ds-alias-text-size-sm-device) !important;}
.text-base,
.text-normal{font-size:var(--ds-alias-text-size-base-device) !important;}
.text-md,
.text-medium{font-size:var(--ds-alias-text-size-md-device) !important;}
.text-large,
.text-lg{font-size:var(--ds-alias-text-size-lg-device) !important;}
.text-x-large,
.text-xl{font-size:var(--ds-alias-text-size-xl-device) !important;}
.text-2xl,
.text-xx-large{font-size:var(--ds-alias-text-size-2xl-device) !important;}
.text-3xl,
.text-xxx-large{font-size:var(--ds-alias-text-size-3xl-device) !important;}
.text-4xl,
.text-xxxx-large{font-size:var(--ds-alias-text-size-4xl-device) !important;}
.text-5xl,
.text-xxxxx-large{font-size:var(--ds-alias-text-size-5xl-device) !important;}
.font-family-heading{font-family:var(--ds-alias-text-family-heading) !important;}
.font-family-body{font-family:var(--ds-alias-text-family-body) !important;}
.font-weight-light{font-weight:var(--ds-alias-text-weight-light) !important;}
.font-weight-regular{font-weight:var(--ds-alias-text-weight-regular) !important;}
.font-weight-bold{font-weight:var(--ds-alias-text-weight-bold) !important;}
.line-height-single{line-height:var(--ds-alias-text-line-height-single) !important;}
.line-height-heading{line-height:var(--ds-alias-text-line-height-heading) !important;}
.line-height-body{line-height:var(--ds-alias-text-line-height-body) !important;}
.line-height-double{line-height:var(--ds-alias-text-line-height-double) !important;}
.text-align-left{text-align:left !important;}
.text-align-center{text-align:center !important;}
.text-align-right{text-align:right !important;}
.text-align-justify{text-align:justify !important;}
.uppercase{text-transform:uppercase !important;}
.lowercase{text-transform:lowercase !important;}
.capitalize{text-transform:capitalize !important;}
.text-overflow-ellipsis{text-overflow:ellipsis !important;}
.text-overflow-clip{text-overflow:clip !important;}
.white-space-nowrap{white-space:nowrap !important;}
.white-space-normal{white-space:normal !important;}
@media screen and (max-width: 1023px){
.touch\:flex-direction-row{flex-direction:row !important;}
.touch\:flex-direction-row-reverse{flex-direction:row-reverse !important;}
.touch\:flex-direction-column{flex-direction:column !important;}
.touch\:flex-direction-column-reverse{flex-direction:column-reverse !important;}
.touch\:flex-wrap{flex-wrap:wrap !important;}
.touch\:flex-wrap-reverse{flex-wrap:wrap-reverse !important;}
.touch\:flex-nowrap{flex-wrap:nowrap !important;}
.touch\:flex-1{flex:1 1 0% !important;}
.touch\:flex-auto{flex:1 1 auto !important;}
.touch\:flex-initial{flex:0 1 auto !important;}
.touch\:flex-none{flex:none !important;}
.touch\:align-content-start{align-content:start !important;}
.touch\:align-content-end{align-content:end !important;}
.touch\:align-content-center{align-content:center !important;}
.touch\:align-content-baseline{align-content:baseline !important;}
.touch\:align-content-space-between{align-content:space-between !important;}
.touch\:align-content-space-around{align-content:space-around !important;}
.touch\:align-content-space-evenly{align-content:space-evenly !important;}
.touch\:align-items-start{align-items:start !important;}
.touch\:align-items-end{align-items:end !important;}
.touch\:align-items-center{align-items:center !important;}
.touch\:align-items-baseline{align-items:baseline !important;}
.touch\:align-items-stretch{align-items:stretch !important;}
.touch\:align-self-start{align-self:start !important;}
.touch\:align-self-end{align-self:end !important;}
.touch\:align-self-center{align-self:center !important;}
.touch\:align-self-baseline{align-self:baseline !important;}
.touch\:align-self-stretch{align-self:stretch !important;}
.touch\:justify-content-start{justify-content:start !important;}
.touch\:justify-content-end{justify-content:end !important;}
.touch\:justify-content-center{justify-content:center !important;}
.touch\:justify-content-space-between{justify-content:space-between !important;}
.touch\:justify-content-space-around{justify-content:space-around !important;}
.touch\:justify-content-space-evenly{justify-content:space-evenly !important;}
.touch\:gap-none{gap:var(--ds-alias-space-none-device) !important;}
.touch\:gap-auto{gap:var(--ds-alias-space-auto-device) !important;}
.touch\:gap-2xs,
.touch\:gap-xx-small{gap:var(--ds-alias-space-2xs-device) !important;}
.touch\:gap-x-small,
.touch\:gap-xs{gap:var(--ds-alias-space-xs-device) !important;}
.touch\:gap-sm,
.touch\:gap-small{gap:var(--ds-alias-space-sm-device) !important;}
.touch\:gap-base,
.touch\:gap-normal{gap:var(--ds-alias-space-base-device) !important;}
.touch\:gap-md,
.touch\:gap-medium{gap:var(--ds-alias-space-md-device) !important;}
.touch\:gap-large,
.touch\:gap-lg{gap:var(--ds-alias-space-lg-device) !important;}
.touch\:gap-x-large,
.touch\:gap-xl{gap:var(--ds-alias-space-xl-device) !important;}
.touch\:gap-2xl,
.touch\:gap-xx-large{gap:var(--ds-alias-space-2xl-device) !important;}
.touch\:gap-3xl,
.touch\:gap-xxx-large{gap:var(--ds-alias-space-3xl-device) !important;}
.touch\:gap-4xl,
.touch\:gap-xxxx-large{gap:var(--ds-alias-space-4xl-device) !important;}
.touch\:column-gap-none{-moz-column-gap:var(--ds-alias-space-none-device) !important;column-gap:var(--ds-alias-space-none-device) !important;}
.touch\:column-gap-auto{-moz-column-gap:var(--ds-alias-space-auto-device) !important;column-gap:var(--ds-alias-space-auto-device) !important;}
.touch\:column-gap-2xs,
.touch\:column-gap-xx-small{-moz-column-gap:var(--ds-alias-space-2xs-device) !important;column-gap:var(--ds-alias-space-2xs-device) !important;}
.touch\:column-gap-x-small,
.touch\:column-gap-xs{-moz-column-gap:var(--ds-alias-space-xs-device) !important;column-gap:var(--ds-alias-space-xs-device) !important;}
.touch\:column-gap-sm,
.touch\:column-gap-small{-moz-column-gap:var(--ds-alias-space-sm-device) !important;column-gap:var(--ds-alias-space-sm-device) !important;}
.touch\:column-gap-base,
.touch\:column-gap-normal{-moz-column-gap:var(--ds-alias-space-base-device) !important;column-gap:var(--ds-alias-space-base-device) !important;}
.touch\:column-gap-md,
.touch\:column-gap-medium{-moz-column-gap:var(--ds-alias-space-md-device) !important;column-gap:var(--ds-alias-space-md-device) !important;}
.touch\:column-gap-large,
.touch\:column-gap-lg{-moz-column-gap:var(--ds-alias-space-lg-device) !important;column-gap:var(--ds-alias-space-lg-device) !important;}
.touch\:column-gap-x-large,
.touch\:column-gap-xl{-moz-column-gap:var(--ds-alias-space-xl-device) !important;column-gap:var(--ds-alias-space-xl-device) !important;}
.touch\:column-gap-2xl,
.touch\:column-gap-xx-large{-moz-column-gap:var(--ds-alias-space-2xl-device) !important;column-gap:var(--ds-alias-space-2xl-device) !important;}
.touch\:column-gap-3xl,
.touch\:column-gap-xxx-large{-moz-column-gap:var(--ds-alias-space-3xl-device) !important;column-gap:var(--ds-alias-space-3xl-device) !important;}
.touch\:column-gap-4xl,
.touch\:column-gap-xxxx-large{-moz-column-gap:var(--ds-alias-space-4xl-device) !important;column-gap:var(--ds-alias-space-4xl-device) !important;}
.touch\:row-gap-none{row-gap:var(--ds-alias-space-none-device) !important;}
.touch\:row-gap-auto{row-gap:var(--ds-alias-space-auto-device) !important;}
.touch\:row-gap-2xs,
.touch\:row-gap-xx-small{row-gap:var(--ds-alias-space-2xs-device) !important;}
.touch\:row-gap-x-small,
.touch\:row-gap-xs{row-gap:var(--ds-alias-space-xs-device) !important;}
.touch\:row-gap-sm,
.touch\:row-gap-small{row-gap:var(--ds-alias-space-sm-device) !important;}
.touch\:row-gap-base,
.touch\:row-gap-normal{row-gap:var(--ds-alias-space-base-device) !important;}
.touch\:row-gap-md,
.touch\:row-gap-medium{row-gap:var(--ds-alias-space-md-device) !important;}
.touch\:row-gap-large,
.touch\:row-gap-lg{row-gap:var(--ds-alias-space-lg-device) !important;}
.touch\:row-gap-x-large,
.touch\:row-gap-xl{row-gap:var(--ds-alias-space-xl-device) !important;}
.touch\:row-gap-2xl,
.touch\:row-gap-xx-large{row-gap:var(--ds-alias-space-2xl-device) !important;}
.touch\:row-gap-3xl,
.touch\:row-gap-xxx-large{row-gap:var(--ds-alias-space-3xl-device) !important;}
.touch\:row-gap-4xl,
.touch\:row-gap-xxxx-large{row-gap:var(--ds-alias-space-4xl-device) !important;}
.touch\:hidden{display:none !important;}
.touch\:block{display:block !important;}
.touch\:inline{display:inline !important;}
.touch\:inline-block{display:inline-block !important;}
.touch\:flex{display:flex !important;}
.touch\:inline-flex{display:inline-flex !important;}
.touch\:static{position:static !important;}
.touch\:relative{position:relative !important;}
.touch\:absolute{position:absolute !important;}
.touch\:fixed{position:fixed !important;}
.touch\:sticky{position:sticky !important;}
.touch\:overflow-auto{overflow:auto !important;}
.touch\:overflow-hidden{overflow:hidden !important;}
.touch\:overflow-visible{overflow:visible !important;}
.touch\:overflow-scroll{overflow:scroll !important;}
.touch\:overflow-x-auto{overflow-x:auto !important;}
.touch\:overflow-x-hidden{overflow-x:hidden !important;}
.touch\:overflow-x-visible{overflow-x:visible !important;}
.touch\:overflow-x-scroll{overflow-x:scroll !important;}
.touch\:overflow-y-auto{overflow-y:auto !important;}
.touch\:overflow-y-hidden{overflow-y:hidden !important;}
.touch\:overflow-y-visible{overflow-y:visible !important;}
.touch\:overflow-y-scroll{overflow-y:scroll !important;}
.touch\:vertical-align-top{vertical-align:top !important;}
.touch\:vertical-align-middle{vertical-align:middle !important;}
.touch\:vertical-align-bottom{vertical-align:bottom !important;}
.touch\:top-0{top:0 !important;}
.touch\:top-auto{top:auto !important;}
.touch\:top-50{top:50% !important;}
.touch\:top-100{top:100% !important;}
.touch\:top-1rem{top:1rem !important;}
.touch\:top-0-5rem{top:0.5rem !important;}
.touch\:top-0-25rem{top:0.25rem !important;}
.touch\:right-0{right:0 !important;}
.touch\:right-auto{right:auto !important;}
.touch\:right-50{right:50% !important;}
.touch\:right-100{right:100% !important;}
.touch\:right-1rem{right:1rem !important;}
.touch\:bottom-0{bottom:0 !important;}
.touch\:bottom-auto{bottom:auto !important;}
.touch\:bottom-50{bottom:50% !important;}
.touch\:bottom-100{bottom:100% !important;}
.touch\:bottom-1rem{bottom:1rem !important;}
.touch\:left-0{left:0 !important;}
.touch\:left-auto{left:auto !important;}
.touch\:left-50{left:50% !important;}
.touch\:left-100{left:100% !important;}
.touch\:left-1rem{left:1rem !important;}
.touch\:z-index-deep{z-index:var(--ds-alias-z-index-deep) !important;}
.touch\:z-index-masked{z-index:var(--ds-alias-z-index-masked) !important;}
.touch\:z-index-mask{z-index:var(--ds-alias-z-index-mask) !important;}
.touch\:z-index-sticky{z-index:var(--ds-alias-z-index-sticky) !important;}
.touch\:z-index-navigation{z-index:var(--ds-alias-z-index-navigation) !important;}
.touch\:z-index-popup{z-index:var(--ds-alias-z-index-popup) !important;}
.touch\:z-index-modal{z-index:var(--ds-alias-z-index-modal) !important;}
.touch\:z-index-toast{z-index:var(--ds-alias-z-index-toast) !important;}
.touch\:z-index-tooltip{z-index:var(--ds-alias-z-index-tooltip) !important;}
.touch\:opacity-hidden{opacity:var(--ds-alias-opacity-hidden) !important;}
.touch\:opacity-half{opacity:var(--ds-alias-opacity-half) !important;}
.touch\:opacity-disabled{opacity:var(--ds-alias-opacity-disabled) !important;}
.touch\:opacity-backdrop{opacity:var(--ds-alias-opacity-backdrop) !important;}
.touch\:opacity-full{opacity:var(--ds-alias-opacity-full) !important;}
.touch\:shadow-none{box-shadow:var(--ds-alias-shadow-box-none) !important;}
.touch\:shadow-header{box-shadow:var(--ds-alias-shadow-box-header) !important;}
.touch\:shadow{box-shadow:var(--ds-alias-shadow-box-base) !important;}
.touch\:shadow-elevated{box-shadow:var(--ds-alias-shadow-box-elevated) !important;}
.touch\:text-shadow{text-shadow:var(--ds-alias-shadow-text) !important;}
.touch\:text-shadow-none{text-shadow:none !important;}
.touch\:select-none{-webkit-user-select:none !important;-moz-user-select:none !important;user-select:none !important;}
.touch\:select-text{-webkit-user-select:text !important;-moz-user-select:text !important;user-select:text !important;}
.touch\:select-all{-webkit-user-select:all !important;-moz-user-select:all !important;user-select:all !important;}
.touch\:select-auto{-webkit-user-select:auto !important;-moz-user-select:auto !important;user-select:auto !important;}
.touch\:cursor-auto{cursor:auto !important;}
.touch\:cursor-pointer{cursor:pointer !important;}
.touch\:cursor-wait{cursor:wait !important;}
.touch\:cursor-move{cursor:move !important;}
.touch\:cursor-not-allowed{cursor:not-allowed !important;}
.touch\:pointer-events-auto{pointer-events:auto !important;}
.touch\:pointer-events-none{pointer-events:none !important;}
}
@media screen and (max-width: 768px){
.mobile\:flex-direction-row{flex-direction:row !important;}
.mobile\:flex-direction-row-reverse{flex-direction:row-reverse !important;}
.mobile\:flex-direction-column{flex-direction:column !important;}
.mobile\:flex-direction-column-reverse{flex-direction:column-reverse !important;}
.mobile\:flex-wrap{flex-wrap:wrap !important;}
.mobile\:flex-wrap-reverse{flex-wrap:wrap-reverse !important;}
.mobile\:flex-nowrap{flex-wrap:nowrap !important;}
.mobile\:flex-1{flex:1 1 0% !important;}
.mobile\:flex-auto{flex:1 1 auto !important;}
.mobile\:flex-initial{flex:0 1 auto !important;}
.mobile\:flex-none{flex:none !important;}
.mobile\:align-content-start{align-content:start !important;}
.mobile\:align-content-end{align-content:end !important;}
.mobile\:align-content-center{align-content:center !important;}
.mobile\:align-content-baseline{align-content:baseline !important;}
.mobile\:align-content-space-between{align-content:space-between !important;}
.mobile\:align-content-space-around{align-content:space-around !important;}
.mobile\:align-content-space-evenly{align-content:space-evenly !important;}
.mobile\:align-items-start{align-items:start !important;}
.mobile\:align-items-end{align-items:end !important;}
.mobile\:align-items-center{align-items:center !important;}
.mobile\:align-items-baseline{align-items:baseline !important;}
.mobile\:align-items-stretch{align-items:stretch !important;}
.mobile\:align-self-start{align-self:start !important;}
.mobile\:align-self-end{align-self:end !important;}
.mobile\:align-self-center{align-self:center !important;}
.mobile\:align-self-baseline{align-self:baseline !important;}
.mobile\:align-self-stretch{align-self:stretch !important;}
.mobile\:justify-content-start{justify-content:start !important;}
.mobile\:justify-content-end{justify-content:end !important;}
.mobile\:justify-content-center{justify-content:center !important;}
.mobile\:justify-content-space-between{justify-content:space-between !important;}
.mobile\:justify-content-space-around{justify-content:space-around !important;}
.mobile\:justify-content-space-evenly{justify-content:space-evenly !important;}
.mobile\:gap-none{gap:var(--ds-alias-space-none-device) !important;}
.mobile\:gap-auto{gap:var(--ds-alias-space-auto-device) !important;}
.mobile\:gap-2xs,
.mobile\:gap-xx-small{gap:var(--ds-alias-space-2xs-device) !important;}
.mobile\:gap-x-small,
.mobile\:gap-xs{gap:var(--ds-alias-space-xs-device) !important;}
.mobile\:gap-sm,
.mobile\:gap-small{gap:var(--ds-alias-space-sm-device) !important;}
.mobile\:gap-base,
.mobile\:gap-normal{gap:var(--ds-alias-space-base-device) !important;}
.mobile\:gap-md,
.mobile\:gap-medium{gap:var(--ds-alias-space-md-device) !important;}
.mobile\:gap-large,
.mobile\:gap-lg{gap:var(--ds-alias-space-lg-device) !important;}
.mobile\:gap-x-large,
.mobile\:gap-xl{gap:var(--ds-alias-space-xl-device) !important;}
.mobile\:gap-2xl,
.mobile\:gap-xx-large{gap:var(--ds-alias-space-2xl-device) !important;}
.mobile\:gap-3xl,
.mobile\:gap-xxx-large{gap:var(--ds-alias-space-3xl-device) !important;}
.mobile\:gap-4xl,
.mobile\:gap-xxxx-large{gap:var(--ds-alias-space-4xl-device) !important;}
.mobile\:column-gap-none{-moz-column-gap:var(--ds-alias-space-none-device) !important;column-gap:var(--ds-alias-space-none-device) !important;}
.mobile\:column-gap-auto{-moz-column-gap:var(--ds-alias-space-auto-device) !important;column-gap:var(--ds-alias-space-auto-device) !important;}
.mobile\:column-gap-2xs,
.mobile\:column-gap-xx-small{-moz-column-gap:var(--ds-alias-space-2xs-device) !important;column-gap:var(--ds-alias-space-2xs-device) !important;}
.mobile\:column-gap-x-small,
.mobile\:column-gap-xs{-moz-column-gap:var(--ds-alias-space-xs-device) !important;column-gap:var(--ds-alias-space-xs-device) !important;}
.mobile\:column-gap-sm,
.mobile\:column-gap-small{-moz-column-gap:var(--ds-alias-space-sm-device) !important;column-gap:var(--ds-alias-space-sm-device) !important;}
.mobile\:column-gap-base,
.mobile\:column-gap-normal{-moz-column-gap:var(--ds-alias-space-base-device) !important;column-gap:var(--ds-alias-space-base-device) !important;}
.mobile\:column-gap-md,
.mobile\:column-gap-medium{-moz-column-gap:var(--ds-alias-space-md-device) !important;column-gap:var(--ds-alias-space-md-device) !important;}
.mobile\:column-gap-large,
.mobile\:column-gap-lg{-moz-column-gap:var(--ds-alias-space-lg-device) !important;column-gap:var(--ds-alias-space-lg-device) !important;}
.mobile\:column-gap-x-large,
.mobile\:column-gap-xl{-moz-column-gap:var(--ds-alias-space-xl-device) !important;column-gap:var(--ds-alias-space-xl-device) !important;}
.mobile\:column-gap-2xl,
.mobile\:column-gap-xx-large{-moz-column-gap:var(--ds-alias-space-2xl-device) !important;column-gap:var(--ds-alias-space-2xl-device) !important;}
.mobile\:column-gap-3xl,
.mobile\:column-gap-xxx-large{-moz-column-gap:var(--ds-alias-space-3xl-device) !important;column-gap:var(--ds-alias-space-3xl-device) !important;}
.mobile\:column-gap-4xl,
.mobile\:column-gap-xxxx-large{-moz-column-gap:var(--ds-alias-space-4xl-device) !important;column-gap:var(--ds-alias-space-4xl-device) !important;}
.mobile\:row-gap-none{row-gap:var(--ds-alias-space-none-device) !important;}
.mobile\:row-gap-auto{row-gap:var(--ds-alias-space-auto-device) !important;}
.mobile\:row-gap-2xs,
.mobile\:row-gap-xx-small{row-gap:var(--ds-alias-space-2xs-device) !important;}
.mobile\:row-gap-x-small,
.mobile\:row-gap-xs{row-gap:var(--ds-alias-space-xs-device) !important;}
.mobile\:row-gap-sm,
.mobile\:row-gap-small{row-gap:var(--ds-alias-space-sm-device) !important;}
.mobile\:row-gap-base,
.mobile\:row-gap-normal{row-gap:var(--ds-alias-space-base-device) !important;}
.mobile\:row-gap-md,
.mobile\:row-gap-medium{row-gap:var(--ds-alias-space-md-device) !important;}
.mobile\:row-gap-large,
.mobile\:row-gap-lg{row-gap:var(--ds-alias-space-lg-device) !important;}
.mobile\:row-gap-x-large,
.mobile\:row-gap-xl{row-gap:var(--ds-alias-space-xl-device) !important;}
.mobile\:row-gap-2xl,
.mobile\:row-gap-xx-large{row-gap:var(--ds-alias-space-2xl-device) !important;}
.mobile\:row-gap-3xl,
.mobile\:row-gap-xxx-large{row-gap:var(--ds-alias-space-3xl-device) !important;}
.mobile\:row-gap-4xl,
.mobile\:row-gap-xxxx-large{row-gap:var(--ds-alias-space-4xl-device) !important;}
.mobile\:hidden{display:none !important;}
.mobile\:block{display:block !important;}
.mobile\:inline{display:inline !important;}
.mobile\:inline-block{display:inline-block !important;}
.mobile\:flex{display:flex !important;}
.mobile\:inline-flex{display:inline-flex !important;}
.mobile\:static{position:static !important;}
.mobile\:relative{position:relative !important;}
.mobile\:absolute{position:absolute !important;}
.mobile\:fixed{position:fixed !important;}
.mobile\:sticky{position:sticky !important;}
.mobile\:overflow-auto{overflow:auto !important;}
.mobile\:overflow-hidden{overflow:hidden !important;}
.mobile\:overflow-visible{overflow:visible !important;}
.mobile\:overflow-scroll{overflow:scroll !important;}
.mobile\:overflow-x-auto{overflow-x:auto !important;}
.mobile\:overflow-x-hidden{overflow-x:hidden !important;}
.mobile\:overflow-x-visible{overflow-x:visible !important;}
.mobile\:overflow-x-scroll{overflow-x:scroll !important;}
.mobile\:overflow-y-auto{overflow-y:auto !important;}
.mobile\:overflow-y-hidden{overflow-y:hidden !important;}
.mobile\:overflow-y-visible{overflow-y:visible !important;}
.mobile\:overflow-y-scroll{overflow-y:scroll !important;}
.mobile\:vertical-align-top{vertical-align:top !important;}
.mobile\:vertical-align-middle{vertical-align:middle !important;}
.mobile\:vertical-align-bottom{vertical-align:bottom !important;}
.mobile\:top-0{top:0 !important;}
.mobile\:top-auto{top:auto !important;}
.mobile\:top-50{top:50% !important;}
.mobile\:top-100{top:100% !important;}
.mobile\:top-1rem{top:1rem !important;}
.mobile\:top-0-5rem{top:0.5rem !important;}
.mobile\:top-0-25rem{top:0.25rem !important;}
.mobile\:right-0{right:0 !important;}
.mobile\:right-auto{right:auto !important;}
.mobile\:right-50{right:50% !important;}
.mobile\:right-100{right:100% !important;}
.mobile\:right-1rem{right:1rem !important;}
.mobile\:bottom-0{bottom:0 !important;}
.mobile\:bottom-auto{bottom:auto !important;}
.mobile\:bottom-50{bottom:50% !important;}
.mobile\:bottom-100{bottom:100% !important;}
.mobile\:bottom-1rem{bottom:1rem !important;}
.mobile\:left-0{left:0 !important;}
.mobile\:left-auto{left:auto !important;}
.mobile\:left-50{left:50% !important;}
.mobile\:left-100{left:100% !important;}
.mobile\:left-1rem{left:1rem !important;}
.mobile\:z-index-deep{z-index:var(--ds-alias-z-index-deep) !important;}
.mobile\:z-index-masked{z-index:var(--ds-alias-z-index-masked) !important;}
.mobile\:z-index-mask{z-index:var(--ds-alias-z-index-mask) !important;}
.mobile\:z-index-sticky{z-index:var(--ds-alias-z-index-sticky) !important;}
.mobile\:z-index-navigation{z-index:var(--ds-alias-z-index-navigation) !important;}
.mobile\:z-index-popup{z-index:var(--ds-alias-z-index-popup) !important;}
.mobile\:z-index-modal{z-index:var(--ds-alias-z-index-modal) !important;}
.mobile\:z-index-toast{z-index:var(--ds-alias-z-index-toast) !important;}
.mobile\:z-index-tooltip{z-index:var(--ds-alias-z-index-tooltip) !important;}
.mobile\:opacity-hidden{opacity:var(--ds-alias-opacity-hidden) !important;}
.mobile\:opacity-half{opacity:var(--ds-alias-opacity-half) !important;}
.mobile\:opacity-disabled{opacity:var(--ds-alias-opacity-disabled) !important;}
.mobile\:opacity-backdrop{opacity:var(--ds-alias-opacity-backdrop) !important;}
.mobile\:opacity-full{opacity:var(--ds-alias-opacity-full) !important;}
.mobile\:shadow-none{box-shadow:var(--ds-alias-shadow-box-none) !important;}
.mobile\:shadow-header{box-shadow:var(--ds-alias-shadow-box-header) !important;}
.mobile\:shadow{box-shadow:var(--ds-alias-shadow-box-base) !important;}
.mobile\:shadow-elevated{box-shadow:var(--ds-alias-shadow-box-elevated) !important;}
.mobile\:text-shadow{text-shadow:var(--ds-alias-shadow-text) !important;}
.mobile\:text-shadow-none{text-shadow:none !important;}
.mobile\:select-none{-webkit-user-select:none !important;-moz-user-select:none !important;user-select:none !important;}
.mobile\:select-text{-webkit-user-select:text !important;-moz-user-select:text !important;user-select:text !important;}
.mobile\:select-all{-webkit-user-select:all !important;-moz-user-select:all !important;user-select:all !important;}
.mobile\:select-auto{-webkit-user-select:auto !important;-moz-user-select:auto !important;user-select:auto !important;}
.mobile\:cursor-auto{cursor:auto !important;}
.mobile\:cursor-pointer{cursor:pointer !important;}
.mobile\:cursor-wait{cursor:wait !important;}
.mobile\:cursor-move{cursor:move !important;}
.mobile\:cursor-not-allowed{cursor:not-allowed !important;}
.mobile\:pointer-events-auto{pointer-events:auto !important;}
.mobile\:pointer-events-none{pointer-events:none !important;}
}
@media screen and (min-width: 1024px){
.desktop\:flex-direction-row{flex-direction:row !important;}
.desktop\:flex-direction-row-reverse{flex-direction:row-reverse !important;}
.desktop\:flex-direction-column{flex-direction:column !important;}
.desktop\:flex-direction-column-reverse{flex-direction:column-reverse !important;}
.desktop\:flex-wrap{flex-wrap:wrap !important;}
.desktop\:flex-wrap-reverse{flex-wrap:wrap-reverse !important;}
.desktop\:flex-nowrap{flex-wrap:nowrap !important;}
.desktop\:flex-1{flex:1 1 0% !important;}
.desktop\:flex-auto{flex:1 1 auto !important;}
.desktop\:flex-initial{flex:0 1 auto !important;}
.desktop\:flex-none{flex:none !important;}
.desktop\:align-content-start{align-content:start !important;}
.desktop\:align-content-end{align-content:end !important;}
.desktop\:align-content-center{align-content:center !important;}
.desktop\:align-content-baseline{align-content:baseline !important;}
.desktop\:align-content-space-between{align-content:space-between !important;}
.desktop\:align-content-space-around{align-content:space-around !important;}
.desktop\:align-content-space-evenly{align-content:space-evenly !important;}
.desktop\:align-items-start{align-items:start !important;}
.desktop\:align-items-end{align-items:end !important;}
.desktop\:align-items-center{align-items:center !important;}
.desktop\:align-items-baseline{align-items:baseline !important;}
.desktop\:align-items-stretch{align-items:stretch !important;}
.desktop\:align-self-start{align-self:start !important;}
.desktop\:align-self-end{align-self:end !important;}
.desktop\:align-self-center{align-self:center !important;}
.desktop\:align-self-baseline{align-self:baseline !important;}
.desktop\:align-self-stretch{align-self:stretch !important;}
.desktop\:justify-content-start{justify-content:start !important;}
.desktop\:justify-content-end{justify-content:end !important;}
.desktop\:justify-content-center{justify-content:center !important;}
.desktop\:justify-content-space-between{justify-content:space-between !important;}
.desktop\:justify-content-space-around{justify-content:space-around !important;}
.desktop\:justify-content-space-evenly{justify-content:space-evenly !important;}
.desktop\:gap-none{gap:var(--ds-alias-space-none-device) !important;}
.desktop\:gap-auto{gap:var(--ds-alias-space-auto-device) !important;}
.desktop\:gap-2xs,
.desktop\:gap-xx-small{gap:var(--ds-alias-space-2xs-device) !important;}
.desktop\:gap-x-small,
.desktop\:gap-xs{gap:var(--ds-alias-space-xs-device) !important;}
.desktop\:gap-sm,
.desktop\:gap-small{gap:var(--ds-alias-space-sm-device) !important;}
.desktop\:gap-base,
.desktop\:gap-normal{gap:var(--ds-alias-space-base-device) !important;}
.desktop\:gap-md,
.desktop\:gap-medium{gap:var(--ds-alias-space-md-device) !important;}
.desktop\:gap-large,
.desktop\:gap-lg{gap:var(--ds-alias-space-lg-device) !important;}
.desktop\:gap-x-large,
.desktop\:gap-xl{gap:var(--ds-alias-space-xl-device) !important;}
.desktop\:gap-2xl,
.desktop\:gap-xx-large{gap:var(--ds-alias-space-2xl-device) !important;}
.desktop\:gap-3xl,
.desktop\:gap-xxx-large{gap:var(--ds-alias-space-3xl-device) !important;}
.desktop\:gap-4xl,
.desktop\:gap-xxxx-large{gap:var(--ds-alias-space-4xl-device) !important;}
.desktop\:column-gap-none{-moz-column-gap:var(--ds-alias-space-none-device) !important;column-gap:var(--ds-alias-space-none-device) !important;}
.desktop\:column-gap-auto{-moz-column-gap:var(--ds-alias-space-auto-device) !important;column-gap:var(--ds-alias-space-auto-device) !important;}
.desktop\:column-gap-2xs,
.desktop\:column-gap-xx-small{-moz-column-gap:var(--ds-alias-space-2xs-device) !important;column-gap:var(--ds-alias-space-2xs-device) !important;}
.desktop\:column-gap-x-small,
.desktop\:column-gap-xs{-moz-column-gap:var(--ds-alias-space-xs-device) !important;column-gap:var(--ds-alias-space-xs-device) !important;}
.desktop\:column-gap-sm,
.desktop\:column-gap-small{-moz-column-gap:var(--ds-alias-space-sm-device) !important;column-gap:var(--ds-alias-space-sm-device) !important;}
.desktop\:column-gap-base,
.desktop\:column-gap-normal{-moz-column-gap:var(--ds-alias-space-base-device) !important;column-gap:var(--ds-alias-space-base-device) !important;}
.desktop\:column-gap-md,
.desktop\:column-gap-medium{-moz-column-gap:var(--ds-alias-space-md-device) !important;column-gap:var(--ds-alias-space-md-device) !important;}
.desktop\:column-gap-large,
.desktop\:column-gap-lg{-moz-column-gap:var(--ds-alias-space-lg-device) !important;column-gap:var(--ds-alias-space-lg-device) !important;}
.desktop\:column-gap-x-large,
.desktop\:column-gap-xl{-moz-column-gap:var(--ds-alias-space-xl-device) !important;column-gap:var(--ds-alias-space-xl-device) !important;}
.desktop\:column-gap-2xl,
.desktop\:column-gap-xx-large{-moz-column-gap:var(--ds-alias-space-2xl-device) !important;column-gap:var(--ds-alias-space-2xl-device) !important;}
.desktop\:column-gap-3xl,
.desktop\:column-gap-xxx-large{-moz-column-gap:var(--ds-alias-space-3xl-device) !important;column-gap:var(--ds-alias-space-3xl-device) !important;}
.desktop\:column-gap-4xl,
.desktop\:column-gap-xxxx-large{-moz-column-gap:var(--ds-alias-space-4xl-device) !important;column-gap:var(--ds-alias-space-4xl-device) !important;}
.desktop\:row-gap-none{row-gap:var(--ds-alias-space-none-device) !important;}
.desktop\:row-gap-auto{row-gap:var(--ds-alias-space-auto-device) !important;}
.desktop\:row-gap-2xs,
.desktop\:row-gap-xx-small{row-gap:var(--ds-alias-space-2xs-device) !important;}
.desktop\:row-gap-x-small,
.desktop\:row-gap-xs{row-gap:var(--ds-alias-space-xs-device) !important;}
.desktop\:row-gap-sm,
.desktop\:row-gap-small{row-gap:var(--ds-alias-space-sm-device) !important;}
.desktop\:row-gap-base,
.desktop\:row-gap-normal{row-gap:var(--ds-alias-space-base-device) !important;}
.desktop\:row-gap-md,
.desktop\:row-gap-medium{row-gap:var(--ds-alias-space-md-device) !important;}
.desktop\:row-gap-large,
.desktop\:row-gap-lg{row-gap:var(--ds-alias-space-lg-device) !important;}
.desktop\:row-gap-x-large,
.desktop\:row-gap-xl{row-gap:var(--ds-alias-space-xl-device) !important;}
.desktop\:row-gap-2xl,
.desktop\:row-gap-xx-large{row-gap:var(--ds-alias-space-2xl-device) !important;}
.desktop\:row-gap-3xl,
.desktop\:row-gap-xxx-large{row-gap:var(--ds-alias-space-3xl-device) !important;}
.desktop\:row-gap-4xl,
.desktop\:row-gap-xxxx-large{row-gap:var(--ds-alias-space-4xl-device) !important;}
.desktop\:hidden{display:none !important;}
.desktop\:block{display:block !important;}
.desktop\:inline{display:inline !important;}
.desktop\:inline-block{display:inline-block !important;}
.desktop\:flex{display:flex !important;}
.desktop\:inline-flex{display:inline-flex !important;}
.desktop\:static{position:static !important;}
.desktop\:relative{position:relative !important;}
.desktop\:absolute{position:absolute !important;}
.desktop\:fixed{position:fixed !important;}
.desktop\:sticky{position:sticky !important;}
.desktop\:overflow-auto{overflow:auto !important;}
.desktop\:overflow-hidden{overflow:hidden !important;}
.desktop\:overflow-visible{overflow:visible !important;}
.desktop\:overflow-scroll{overflow:scroll !important;}
.desktop\:overflow-x-auto{overflow-x:auto !important;}
.desktop\:overflow-x-hidden{overflow-x:hidden !important;}
.desktop\:overflow-x-visible{overflow-x:visible !important;}
.desktop\:overflow-x-scroll{overflow-x:scroll !important;}
.desktop\:overflow-y-auto{overflow-y:auto !important;}
.desktop\:overflow-y-hidden{overflow-y:hidden !important;}
.desktop\:overflow-y-visible{overflow-y:visible !important;}
.desktop\:overflow-y-scroll{overflow-y:scroll !important;}
.desktop\:vertical-align-top{vertical-align:top !important;}
.desktop\:vertical-align-middle{vertical-align:middle !important;}
.desktop\:vertical-align-bottom{vertical-align:bottom !important;}
.desktop\:top-0{top:0 !important;}
.desktop\:top-auto{top:auto !important;}
.desktop\:top-50{top:50% !important;}
.desktop\:top-100{top:100% !important;}
.desktop\:top-1rem{top:1rem !important;}
.desktop\:top-0-5rem{top:0.5rem !important;}
.desktop\:top-0-25rem{top:0.25rem !important;}
.desktop\:right-0{right:0 !important;}
.desktop\:right-auto{right:auto !important;}
.desktop\:right-50{right:50% !important;}
.desktop\:right-100{right:100% !important;}
.desktop\:right-1rem{right:1rem !important;}
.desktop\:bottom-0{bottom:0 !important;}
.desktop\:bottom-auto{bottom:auto !important;}
.desktop\:bottom-50{bottom:50% !important;}
.desktop\:bottom-100{bottom:100% !important;}
.desktop\:bottom-1rem{bottom:1rem !important;}
.desktop\:left-0{left:0 !important;}
.desktop\:left-auto{left:auto !important;}
.desktop\:left-50{left:50% !important;}
.desktop\:left-100{left:100% !important;}
.desktop\:left-1rem{left:1rem !important;}
.desktop\:z-index-deep{z-index:var(--ds-alias-z-index-deep) !important;}
.desktop\:z-index-masked{z-index:var(--ds-alias-z-index-masked) !important;}
.desktop\:z-index-mask{z-index:var(--ds-alias-z-index-mask) !important;}
.desktop\:z-index-sticky{z-index:var(--ds-alias-z-index-sticky) !important;}
.desktop\:z-index-navigation{z-index:var(--ds-alias-z-index-navigation) !important;}
.desktop\:z-index-popup{z-index:var(--ds-alias-z-index-popup) !important;}
.desktop\:z-index-modal{z-index:var(--ds-alias-z-index-modal) !important;}
.desktop\:z-index-toast{z-index:var(--ds-alias-z-index-toast) !important;}
.desktop\:z-index-tooltip{z-index:var(--ds-alias-z-index-tooltip) !important;}
.desktop\:opacity-hidden{opacity:var(--ds-alias-opacity-hidden) !important;}
.desktop\:opacity-half{opacity:var(--ds-alias-opacity-half) !important;}
.desktop\:opacity-disabled{opacity:var(--ds-alias-opacity-disabled) !important;}
.desktop\:opacity-backdrop{opacity:var(--ds-alias-opacity-backdrop) !important;}
.desktop\:opacity-full{opacity:var(--ds-alias-opacity-full) !important;}
.desktop\:shadow-none{box-shadow:var(--ds-alias-shadow-box-none) !important;}
.desktop\:shadow-header{box-shadow:var(--ds-alias-shadow-box-header) !important;}
.desktop\:shadow{box-shadow:var(--ds-alias-shadow-box-base) !important;}
.desktop\:shadow-elevated{box-shadow:var(--ds-alias-shadow-box-elevated) !important;}
.desktop\:text-shadow{text-shadow:var(--ds-alias-shadow-text) !important;}
.desktop\:text-shadow-none{text-shadow:none !important;}
.desktop\:select-none{-webkit-user-select:none !important;-moz-user-select:none !important;user-select:none !important;}
.desktop\:select-text{-webkit-user-select:text !important;-moz-user-select:text !important;user-select:text !important;}
.desktop\:select-all{-webkit-user-select:all !important;-moz-user-select:all !important;user-select:all !important;}
.desktop\:select-auto{-webkit-user-select:auto !important;-moz-user-select:auto !important;user-select:auto !important;}
.desktop\:cursor-auto{cursor:auto !important;}
.desktop\:cursor-pointer{cursor:pointer !important;}
.desktop\:cursor-wait{cursor:wait !important;}
.desktop\:cursor-move{cursor:move !important;}
.desktop\:cursor-not-allowed{cursor:not-allowed !important;}
.desktop\:pointer-events-auto{pointer-events:auto !important;}
.desktop\:pointer-events-none{pointer-events:none !important;}
}
@media screen and (min-width: 1024px) and (max-width: 1279px){
.desktop-only\:flex-direction-row{flex-direction:row !important;}
.desktop-only\:flex-direction-row-reverse{flex-direction:row-reverse !important;}
.desktop-only\:flex-direction-column{flex-direction:column !important;}
.desktop-only\:flex-direction-column-reverse{flex-direction:column-reverse !important;}
.desktop-only\:flex-wrap{flex-wrap:wrap !important;}
.desktop-only\:flex-wrap-reverse{flex-wrap:wrap-reverse !important;}
.desktop-only\:flex-nowrap{flex-wrap:nowrap !important;}
.desktop-only\:flex-1{flex:1 1 0% !important;}
.desktop-only\:flex-auto{flex:1 1 auto !important;}
.desktop-only\:flex-initial{flex:0 1 auto !important;}
.desktop-only\:flex-none{flex:none !important;}
.desktop-only\:align-content-start{align-content:start !important;}
.desktop-only\:align-content-end{align-content:end !important;}
.desktop-only\:align-content-center{align-content:center !important;}
.desktop-only\:align-content-baseline{align-content:baseline !important;}
.desktop-only\:align-content-space-between{align-content:space-between !important;}
.desktop-only\:align-content-space-around{align-content:space-around !important;}
.desktop-only\:align-content-space-evenly{align-content:space-evenly !important;}
.desktop-only\:align-items-start{align-items:start !important;}
.desktop-only\:align-items-end{align-items:end !important;}
.desktop-only\:align-items-center{align-items:center !important;}
.desktop-only\:align-items-baseline{align-items:baseline !important;}
.desktop-only\:align-items-stretch{align-items:stretch !important;}
.desktop-only\:align-self-start{align-self:start !important;}
.desktop-only\:align-self-end{align-self:end !important;}
.desktop-only\:align-self-center{align-self:center !important;}
.desktop-only\:align-self-baseline{align-self:baseline !important;}
.desktop-only\:align-self-stretch{align-self:stretch !important;}
.desktop-only\:justify-content-start{justify-content:start !important;}
.desktop-only\:justify-content-end{justify-content:end !important;}
.desktop-only\:justify-content-center{justify-content:center !important;}
.desktop-only\:justify-content-space-between{justify-content:space-between !important;}
.desktop-only\:justify-content-space-around{justify-content:space-around !important;}
.desktop-only\:justify-content-space-evenly{justify-content:space-evenly !important;}
.desktop-only\:gap-none{gap:var(--ds-alias-space-none-device) !important;}
.desktop-only\:gap-auto{gap:var(--ds-alias-space-auto-device) !important;}
.desktop-only\:gap-2xs,
.desktop-only\:gap-xx-small{gap:var(--ds-alias-space-2xs-device) !important;}
.desktop-only\:gap-x-small,
.desktop-only\:gap-xs{gap:var(--ds-alias-space-xs-device) !important;}
.desktop-only\:gap-sm,
.desktop-only\:gap-small{gap:var(--ds-alias-space-sm-device) !important;}
.desktop-only\:gap-base,
.desktop-only\:gap-normal{gap:var(--ds-alias-space-base-device) !important;}
.desktop-only\:gap-md,
.desktop-only\:gap-medium{gap:var(--ds-alias-space-md-device) !important;}
.desktop-only\:gap-large,
.desktop-only\:gap-lg{gap:var(--ds-alias-space-lg-device) !important;}
.desktop-only\:gap-x-large,
.desktop-only\:gap-xl{gap:var(--ds-alias-space-xl-device) !important;}
.desktop-only\:gap-2xl,
.desktop-only\:gap-xx-large{gap:var(--ds-alias-space-2xl-device) !important;}
.desktop-only\:gap-3xl,
.desktop-only\:gap-xxx-large{gap:var(--ds-alias-space-3xl-device) !important;}
.desktop-only\:gap-4xl,
.desktop-only\:gap-xxxx-large{gap:var(--ds-alias-space-4xl-device) !important;}
.desktop-only\:column-gap-none{-moz-column-gap:var(--ds-alias-space-none-device) !important;column-gap:var(--ds-alias-space-none-device) !important;}
.desktop-only\:column-gap-auto{-moz-column-gap:var(--ds-alias-space-auto-device) !important;column-gap:var(--ds-alias-space-auto-device) !important;}
.desktop-only\:column-gap-2xs,
.desktop-only\:column-gap-xx-small{-moz-column-gap:var(--ds-alias-space-2xs-device) !important;column-gap:var(--ds-alias-space-2xs-device) !important;}
.desktop-only\:column-gap-x-small,
.desktop-only\:column-gap-xs{-moz-column-gap:var(--ds-alias-space-xs-device) !important;column-gap:var(--ds-alias-space-xs-device) !important;}
.desktop-only\:column-gap-sm,
.desktop-only\:column-gap-small{-moz-column-gap:var(--ds-alias-space-sm-device) !important;column-gap:var(--ds-alias-space-sm-device) !important;}
.desktop-only\:column-gap-base,
.desktop-only\:column-gap-normal{-moz-column-gap:var(--ds-alias-space-base-device) !important;column-gap:var(--ds-alias-space-base-device) !important;}
.desktop-only\:column-gap-md,
.desktop-only\:column-gap-medium{-moz-column-gap:var(--ds-alias-space-md-device) !important;column-gap:var(--ds-alias-space-md-device) !important;}
.desktop-only\:column-gap-large,
.desktop-only\:column-gap-lg{-moz-column-gap:var(--ds-alias-space-lg-device) !important;column-gap:var(--ds-alias-space-lg-device) !important;}
.desktop-only\:column-gap-x-large,
.desktop-only\:column-gap-xl{-moz-column-gap:var(--ds-alias-space-xl-device) !important;column-gap:var(--ds-alias-space-xl-device) !important;}
.desktop-only\:column-gap-2xl,
.desktop-only\:column-gap-xx-large{-moz-column-gap:var(--ds-alias-space-2xl-device) !important;column-gap:var(--ds-alias-space-2xl-device) !important;}
.desktop-only\:column-gap-3xl,
.desktop-only\:column-gap-xxx-large{-moz-column-gap:var(--ds-alias-space-3xl-device) !important;column-gap:var(--ds-alias-space-3xl-device) !important;}
.desktop-only\:column-gap-4xl,
.desktop-only\:column-gap-xxxx-large{-moz-column-gap:var(--ds-alias-space-4xl-device) !important;column-gap:var(--ds-alias-space-4xl-device) !important;}
.desktop-only\:row-gap-none{row-gap:var(--ds-alias-space-none-device) !important;}
.desktop-only\:row-gap-auto{row-gap:var(--ds-alias-space-auto-device) !important;}
.desktop-only\:row-gap-2xs,
.desktop-only\:row-gap-xx-small{row-gap:var(--ds-alias-space-2xs-device) !important;}
.desktop-only\:row-gap-x-small,
.desktop-only\:row-gap-xs{row-gap:var(--ds-alias-space-xs-device) !important;}
.desktop-only\:row-gap-sm,
.desktop-only\:row-gap-small{row-gap:var(--ds-alias-space-sm-device) !important;}
.desktop-only\:row-gap-base,
.desktop-only\:row-gap-normal{row-gap:var(--ds-alias-space-base-device) !important;}
.desktop-only\:row-gap-md,
.desktop-only\:row-gap-medium{row-gap:var(--ds-alias-space-md-device) !important;}
.desktop-only\:row-gap-large,
.desktop-only\:row-gap-lg{row-gap:var(--ds-alias-space-lg-device) !important;}
.desktop-only\:row-gap-x-large,
.desktop-only\:row-gap-xl{row-gap:var(--ds-alias-space-xl-device) !important;}
.desktop-only\:row-gap-2xl,
.desktop-only\:row-gap-xx-large{row-gap:var(--ds-alias-space-2xl-device) !important;}
.desktop-only\:row-gap-3xl,
.desktop-only\:row-gap-xxx-large{row-gap:var(--ds-alias-space-3xl-device) !important;}
.desktop-only\:row-gap-4xl,
.desktop-only\:row-gap-xxxx-large{row-gap:var(--ds-alias-space-4xl-device) !important;}
.desktop-only\:hidden{display:none !important;}
.desktop-only\:block{display:block !important;}
.desktop-only\:inline{display:inline !important;}
.desktop-only\:inline-block{display:inline-block !important;}
.desktop-only\:flex{display:flex !important;}
.desktop-only\:inline-flex{display:inline-flex !important;}
.desktop-only\:static{position:static !important;}
.desktop-only\:relative{position:relative !important;}
.desktop-only\:absolute{position:absolute !important;}
.desktop-only\:fixed{position:fixed !important;}
.desktop-only\:sticky{position:sticky !important;}
.desktop-only\:overflow-auto{overflow:auto !important;}
.desktop-only\:overflow-hidden{overflow:hidden !important;}
.desktop-only\:overflow-visible{overflow:visible !important;}
.desktop-only\:overflow-scroll{overflow:scroll !important;}
.desktop-only\:overflow-x-auto{overflow-x:auto !important;}
.desktop-only\:overflow-x-hidden{overflow-x:hidden !important;}
.desktop-only\:overflow-x-visible{overflow-x:visible !important;}
.desktop-only\:overflow-x-scroll{overflow-x:scroll !important;}
.desktop-only\:overflow-y-auto{overflow-y:auto !important;}
.desktop-only\:overflow-y-hidden{overflow-y:hidden !important;}
.desktop-only\:overflow-y-visible{overflow-y:visible !important;}
.desktop-only\:overflow-y-scroll{overflow-y:scroll !important;}
.desktop-only\:vertical-align-top{vertical-align:top !important;}
.desktop-only\:vertical-align-middle{vertical-align:middle !important;}
.desktop-only\:vertical-align-bottom{vertical-align:bottom !important;}
.desktop-only\:top-0{top:0 !important;}
.desktop-only\:top-auto{top:auto !important;}
.desktop-only\:top-50{top:50% !important;}
.desktop-only\:top-100{top:100% !important;}
.desktop-only\:top-1rem{top:1rem !important;}
.desktop-only\:top-0-5rem{top:0.5rem !important;}
.desktop-only\:top-0-25rem{top:0.25rem !important;}
.desktop-only\:right-0{right:0 !important;}
.desktop-only\:right-auto{right:auto !important;}
.desktop-only\:right-50{right:50% !important;}
.desktop-only\:right-100{right:100% !important;}
.desktop-only\:right-1rem{right:1rem !important;}
.desktop-only\:bottom-0{bottom:0 !important;}
.desktop-only\:bottom-auto{bottom:auto !important;}
.desktop-only\:bottom-50{bottom:50% !important;}
.desktop-only\:bottom-100{bottom:100% !important;}
.desktop-only\:bottom-1rem{bottom:1rem !important;}
.desktop-only\:left-0{left:0 !important;}
.desktop-only\:left-auto{left:auto !important;}
.desktop-only\:left-50{left:50% !important;}
.desktop-only\:left-100{left:100% !important;}
.desktop-only\:left-1rem{left:1rem !important;}
.desktop-only\:z-index-deep{z-index:var(--ds-alias-z-index-deep) !important;}
.desktop-only\:z-index-masked{z-index:var(--ds-alias-z-index-masked) !important;}
.desktop-only\:z-index-mask{z-index:var(--ds-alias-z-index-mask) !important;}
.desktop-only\:z-index-sticky{z-index:var(--ds-alias-z-index-sticky) !important;}
.desktop-only\:z-index-navigation{z-index:var(--ds-alias-z-index-navigation) !important;}
.desktop-only\:z-index-popup{z-index:var(--ds-alias-z-index-popup) !important;}
.desktop-only\:z-index-modal{z-index:var(--ds-alias-z-index-modal) !important;}
.desktop-only\:z-index-toast{z-index:var(--ds-alias-z-index-toast) !important;}
.desktop-only\:z-index-tooltip{z-index:var(--ds-alias-z-index-tooltip) !important;}
.desktop-only\:opacity-hidden{opacity:var(--ds-alias-opacity-hidden) !important;}
.desktop-only\:opacity-half{opacity:var(--ds-alias-opacity-half) !important;}
.desktop-only\:opacity-disabled{opacity:var(--ds-alias-opacity-disabled) !important;}
.desktop-only\:opacity-backdrop{opacity:var(--ds-alias-opacity-backdrop) !important;}
.desktop-only\:opacity-full{opacity:var(--ds-alias-opacity-full) !important;}
.desktop-only\:shadow-none{box-shadow:var(--ds-alias-shadow-box-none) !important;}
.desktop-only\:shadow-header{box-shadow:var(--ds-alias-shadow-box-header) !important;}
.desktop-only\:shadow{box-shadow:var(--ds-alias-shadow-box-base) !important;}
.desktop-only\:shadow-elevated{box-shadow:var(--ds-alias-shadow-box-elevated) !important;}
.desktop-only\:text-shadow{text-shadow:var(--ds-alias-shadow-text) !important;}
.desktop-only\:text-shadow-none{text-shadow:none !important;}
.desktop-only\:select-none{-webkit-user-select:none !important;-moz-user-select:none !important;user-select:none !important;}
.desktop-only\:select-text{-webkit-user-select:text !important;-moz-user-select:text !important;user-select:text !important;}
.desktop-only\:select-all{-webkit-user-select:all !important;-moz-user-select:all !important;user-select:all !important;}
.desktop-only\:select-auto{-webkit-user-select:auto !important;-moz-user-select:auto !important;user-select:auto !important;}
.desktop-only\:cursor-auto{cursor:auto !important;}
.desktop-only\:cursor-pointer{cursor:pointer !important;}
.desktop-only\:cursor-wait{cursor:wait !important;}
.desktop-only\:cursor-move{cursor:move !important;}
.desktop-only\:cursor-not-allowed{cursor:not-allowed !important;}
.desktop-only\:pointer-events-auto{pointer-events:auto !important;}
.desktop-only\:pointer-events-none{pointer-events:none !important;}
}
@media screen and (min-width: 1280px){
.desktop-lg\:flex-direction-row{flex-direction:row !important;}
.desktop-lg\:flex-direction-row-reverse{flex-direction:row-reverse !important;}
.desktop-lg\:flex-direction-column{flex-direction:column !important;}
.desktop-lg\:flex-direction-column-reverse{flex-direction:column-reverse !important;}
.desktop-lg\:flex-wrap{flex-wrap:wrap !important;}
.desktop-lg\:flex-wrap-reverse{flex-wrap:wrap-reverse !important;}
.desktop-lg\:flex-nowrap{flex-wrap:nowrap !important;}
.desktop-lg\:flex-1{flex:1 1 0% !important;}
.desktop-lg\:flex-auto{flex:1 1 auto !important;}
.desktop-lg\:flex-initial{flex:0 1 auto !important;}
.desktop-lg\:flex-none{flex:none !important;}
.desktop-lg\:align-content-start{align-content:start !important;}
.desktop-lg\:align-content-end{align-content:end !important;}
.desktop-lg\:align-content-center{align-content:center !important;}
.desktop-lg\:align-content-baseline{align-content:baseline !important;}
.desktop-lg\:align-content-space-between{align-content:space-between !important;}
.desktop-lg\:align-content-space-around{align-content:space-around !important;}
.desktop-lg\:align-content-space-evenly{align-content:space-evenly !important;}
.desktop-lg\:align-items-start{align-items:start !important;}
.desktop-lg\:align-items-end{align-items:end !important;}
.desktop-lg\:align-items-center{align-items:center !important;}
.desktop-lg\:align-items-baseline{align-items:baseline !important;}
.desktop-lg\:align-items-stretch{align-items:stretch !important;}
.desktop-lg\:align-self-start{align-self:start !important;}
.desktop-lg\:align-self-end{align-self:end !important;}
.desktop-lg\:align-self-center{align-self:center !important;}
.desktop-lg\:align-self-baseline{align-self:baseline !important;}
.desktop-lg\:align-self-stretch{align-self:stretch !important;}
.desktop-lg\:justify-content-start{justify-content:start !important;}
.desktop-lg\:justify-content-end{justify-content:end !important;}
.desktop-lg\:justify-content-center{justify-content:center !important;}
.desktop-lg\:justify-content-space-between{justify-content:space-between !important;}
.desktop-lg\:justify-content-space-around{justify-content:space-around !important;}
.desktop-lg\:justify-content-space-evenly{justify-content:space-evenly !important;}
.desktop-lg\:gap-none{gap:var(--ds-alias-space-none-device) !important;}
.desktop-lg\:gap-auto{gap:var(--ds-alias-space-auto-device) !important;}
.desktop-lg\:gap-2xs,
.desktop-lg\:gap-xx-small{gap:var(--ds-alias-space-2xs-device) !important;}
.desktop-lg\:gap-x-small,
.desktop-lg\:gap-xs{gap:var(--ds-alias-space-xs-device) !important;}
.desktop-lg\:gap-sm,
.desktop-lg\:gap-small{gap:var(--ds-alias-space-sm-device) !important;}
.desktop-lg\:gap-base,
.desktop-lg\:gap-normal{gap:var(--ds-alias-space-base-device) !important;}
.desktop-lg\:gap-md,
.desktop-lg\:gap-medium{gap:var(--ds-alias-space-md-device) !important;}
.desktop-lg\:gap-large,
.desktop-lg\:gap-lg{gap:var(--ds-alias-space-lg-device) !important;}
.desktop-lg\:gap-x-large,
.desktop-lg\:gap-xl{gap:var(--ds-alias-space-xl-device) !important;}
.desktop-lg\:gap-2xl,
.desktop-lg\:gap-xx-large{gap:var(--ds-alias-space-2xl-device) !important;}
.desktop-lg\:gap-3xl,
.desktop-lg\:gap-xxx-large{gap:var(--ds-alias-space-3xl-device) !important;}
.desktop-lg\:gap-4xl,
.desktop-lg\:gap-xxxx-large{gap:var(--ds-alias-space-4xl-device) !important;}
.desktop-lg\:column-gap-none{-moz-column-gap:var(--ds-alias-space-none-device) !important;column-gap:var(--ds-alias-space-none-device) !important;}
.desktop-lg\:column-gap-auto{-moz-column-gap:var(--ds-alias-space-auto-device) !important;column-gap:var(--ds-alias-space-auto-device) !important;}
.desktop-lg\:column-gap-2xs,
.desktop-lg\:column-gap-xx-small{-moz-column-gap:var(--ds-alias-space-2xs-device) !important;column-gap:var(--ds-alias-space-2xs-device) !important;}
.desktop-lg\:column-gap-x-small,
.desktop-lg\:column-gap-xs{-moz-column-gap:var(--ds-alias-space-xs-device) !important;column-gap:var(--ds-alias-space-xs-device) !important;}
.desktop-lg\:column-gap-sm,
.desktop-lg\:column-gap-small{-moz-column-gap:var(--ds-alias-space-sm-device) !important;column-gap:var(--ds-alias-space-sm-device) !important;}
.desktop-lg\:column-gap-base,
.desktop-lg\:column-gap-normal{-moz-column-gap:var(--ds-alias-space-base-device) !important;column-gap:var(--ds-alias-space-base-device) !important;}
.desktop-lg\:column-gap-md,
.desktop-lg\:column-gap-medium{-moz-column-gap:var(--ds-alias-space-md-device) !important;column-gap:var(--ds-alias-space-md-device) !important;}
.desktop-lg\:column-gap-large,
.desktop-lg\:column-gap-lg{-moz-column-gap:var(--ds-alias-space-lg-device) !important;column-gap:var(--ds-alias-space-lg-device) !important;}
.desktop-lg\:column-gap-x-large,
.desktop-lg\:column-gap-xl{-moz-column-gap:var(--ds-alias-space-xl-device) !important;column-gap:var(--ds-alias-space-xl-device) !important;}
.desktop-lg\:column-gap-2xl,
.desktop-lg\:column-gap-xx-large{-moz-column-gap:var(--ds-alias-space-2xl-device) !important;column-gap:var(--ds-alias-space-2xl-device) !important;}
.desktop-lg\:column-gap-3xl,
.desktop-lg\:column-gap-xxx-large{-moz-column-gap:var(--ds-alias-space-3xl-device) !important;column-gap:var(--ds-alias-space-3xl-device) !important;}
.desktop-lg\:column-gap-4xl,
.desktop-lg\:column-gap-xxxx-large{-moz-column-gap:var(--ds-alias-space-4xl-device) !important;column-gap:var(--ds-alias-space-4xl-device) !important;}
.desktop-lg\:row-gap-none{row-gap:var(--ds-alias-space-none-device) !important;}
.desktop-lg\:row-gap-auto{row-gap:var(--ds-alias-space-auto-device) !important;}
.desktop-lg\:row-gap-2xs,
.desktop-lg\:row-gap-xx-small{row-gap:var(--ds-alias-space-2xs-device) !important;}
.desktop-lg\:row-gap-x-small,
.desktop-lg\:row-gap-xs{row-gap:var(--ds-alias-space-xs-device) !important;}
.desktop-lg\:row-gap-sm,
.desktop-lg\:row-gap-small{row-gap:var(--ds-alias-space-sm-device) !important;}
.desktop-lg\:row-gap-base,
.desktop-lg\:row-gap-normal{row-gap:var(--ds-alias-space-base-device) !important;}
.desktop-lg\:row-gap-md,
.desktop-lg\:row-gap-medium{row-gap:var(--ds-alias-space-md-device) !important;}
.desktop-lg\:row-gap-large,
.desktop-lg\:row-gap-lg{row-gap:var(--ds-alias-space-lg-device) !important;}
.desktop-lg\:row-gap-x-large,
.desktop-lg\:row-gap-xl{row-gap:var(--ds-alias-space-xl-device) !important;}
.desktop-lg\:row-gap-2xl,
.desktop-lg\:row-gap-xx-large{row-gap:var(--ds-alias-space-2xl-device) !important;}
.desktop-lg\:row-gap-3xl,
.desktop-lg\:row-gap-xxx-large{row-gap:var(--ds-alias-space-3xl-device) !important;}
.desktop-lg\:row-gap-4xl,
.desktop-lg\:row-gap-xxxx-large{row-gap:var(--ds-alias-space-4xl-device) !important;}
.desktop-lg\:hidden{display:none !important;}
.desktop-lg\:block{display:block !important;}
.desktop-lg\:inline{display:inline !important;}
.desktop-lg\:inline-block{display:inline-block !important;}
.desktop-lg\:flex{display:flex !important;}
.desktop-lg\:inline-flex{display:inline-flex !important;}
.desktop-lg\:static{position:static !important;}
.desktop-lg\:relative{position:relative !important;}
.desktop-lg\:absolute{position:absolute !important;}
.desktop-lg\:fixed{position:fixed !important;}
.desktop-lg\:sticky{position:sticky !important;}
.desktop-lg\:overflow-auto{overflow:auto !important;}
.desktop-lg\:overflow-hidden{overflow:hidden !important;}
.desktop-lg\:overflow-visible{overflow:visible !important;}
.desktop-lg\:overflow-scroll{overflow:scroll !important;}
.desktop-lg\:overflow-x-auto{overflow-x:auto !important;}
.desktop-lg\:overflow-x-hidden{overflow-x:hidden !important;}
.desktop-lg\:overflow-x-visible{overflow-x:visible !important;}
.desktop-lg\:overflow-x-scroll{overflow-x:scroll !important;}
.desktop-lg\:overflow-y-auto{overflow-y:auto !important;}
.desktop-lg\:overflow-y-hidden{overflow-y:hidden !important;}
.desktop-lg\:overflow-y-visible{overflow-y:visible !important;}
.desktop-lg\:overflow-y-scroll{overflow-y:scroll !important;}
.desktop-lg\:vertical-align-top{vertical-align:top !important;}
.desktop-lg\:vertical-align-middle{vertical-align:middle !important;}
.desktop-lg\:vertical-align-bottom{vertical-align:bottom !important;}
.desktop-lg\:top-0{top:0 !important;}
.desktop-lg\:top-auto{top:auto !important;}
.desktop-lg\:top-50{top:50% !important;}
.desktop-lg\:top-100{top:100% !important;}
.desktop-lg\:top-1rem{top:1rem !important;}
.desktop-lg\:top-0-5rem{top:0.5rem !important;}
.desktop-lg\:top-0-25rem{top:0.25rem !important;}
.desktop-lg\:right-0{right:0 !important;}
.desktop-lg\:right-auto{right:auto !important;}
.desktop-lg\:right-50{right:50% !important;}
.desktop-lg\:right-100{right:100% !important;}
.desktop-lg\:right-1rem{right:1rem !important;}
.desktop-lg\:bottom-0{bottom:0 !important;}
.desktop-lg\:bottom-auto{bottom:auto !important;}
.desktop-lg\:bottom-50{bottom:50% !important;}
.desktop-lg\:bottom-100{bottom:100% !important;}
.desktop-lg\:bottom-1rem{bottom:1rem !important;}
.desktop-lg\:left-0{left:0 !important;}
.desktop-lg\:left-auto{left:auto !important;}
.desktop-lg\:left-50{left:50% !important;}
.desktop-lg\:left-100{left:100% !important;}
.desktop-lg\:left-1rem{left:1rem !important;}
.desktop-lg\:z-index-deep{z-index:var(--ds-alias-z-index-deep) !important;}
.desktop-lg\:z-index-masked{z-index:var(--ds-alias-z-index-masked) !important;}
.desktop-lg\:z-index-mask{z-index:var(--ds-alias-z-index-mask) !important;}
.desktop-lg\:z-index-sticky{z-index:var(--ds-alias-z-index-sticky) !important;}
.desktop-lg\:z-index-navigation{z-index:var(--ds-alias-z-index-navigation) !important;}
.desktop-lg\:z-index-popup{z-index:var(--ds-alias-z-index-popup) !important;}
.desktop-lg\:z-index-modal{z-index:var(--ds-alias-z-index-modal) !important;}
.desktop-lg\:z-index-toast{z-index:var(--ds-alias-z-index-toast) !important;}
.desktop-lg\:z-index-tooltip{z-index:var(--ds-alias-z-index-tooltip) !important;}
.desktop-lg\:opacity-hidden{opacity:var(--ds-alias-opacity-hidden) !important;}
.desktop-lg\:opacity-half{opacity:var(--ds-alias-opacity-half) !important;}
.desktop-lg\:opacity-disabled{opacity:var(--ds-alias-opacity-disabled) !important;}
.desktop-lg\:opacity-backdrop{opacity:var(--ds-alias-opacity-backdrop) !important;}
.desktop-lg\:opacity-full{opacity:var(--ds-alias-opacity-full) !important;}
.desktop-lg\:shadow-none{box-shadow:var(--ds-alias-shadow-box-none) !important;}
.desktop-lg\:shadow-header{box-shadow:var(--ds-alias-shadow-box-header) !important;}
.desktop-lg\:shadow{box-shadow:var(--ds-alias-shadow-box-base) !important;}
.desktop-lg\:shadow-elevated{box-shadow:var(--ds-alias-shadow-box-elevated) !important;}
.desktop-lg\:text-shadow{text-shadow:var(--ds-alias-shadow-text) !important;}
.desktop-lg\:text-shadow-none{text-shadow:none !important;}
.desktop-lg\:select-none{-webkit-user-select:none !important;-moz-user-select:none !important;user-select:none !important;}
.desktop-lg\:select-text{-webkit-user-select:text !important;-moz-user-select:text !important;user-select:text !important;}
.desktop-lg\:select-all{-webkit-user-select:all !important;-moz-user-select:all !important;user-select:all !important;}
.desktop-lg\:select-auto{-webkit-user-select:auto !important;-moz-user-select:auto !important;user-select:auto !important;}
.desktop-lg\:cursor-auto{cursor:auto !important;}
.desktop-lg\:cursor-pointer{cursor:pointer !important;}
.desktop-lg\:cursor-wait{cursor:wait !important;}
.desktop-lg\:cursor-move{cursor:move !important;}
.desktop-lg\:cursor-not-allowed{cursor:not-allowed !important;}
.desktop-lg\:pointer-events-auto{pointer-events:auto !important;}
.desktop-lg\:pointer-events-none{pointer-events:none !important;}
}
@media screen and (min-width: 1440px){
.desktop-xl\:flex-direction-row{flex-direction:row !important;}
.desktop-xl\:flex-direction-row-reverse{flex-direction:row-reverse !important;}
.desktop-xl\:flex-direction-column{flex-direction:column !important;}
.desktop-xl\:flex-direction-column-reverse{flex-direction:column-reverse !important;}
.desktop-xl\:flex-wrap{flex-wrap:wrap !important;}
.desktop-xl\:flex-wrap-reverse{flex-wrap:wrap-reverse !important;}
.desktop-xl\:flex-nowrap{flex-wrap:nowrap !important;}
.desktop-xl\:flex-1{flex:1 1 0% !important;}
.desktop-xl\:flex-auto{flex:1 1 auto !important;}
.desktop-xl\:flex-initial{flex:0 1 auto !important;}
.desktop-xl\:flex-none{flex:none !important;}
.desktop-xl\:align-content-start{align-content:start !important;}
.desktop-xl\:align-content-end{align-content:end !important;}
.desktop-xl\:align-content-center{align-content:center !important;}
.desktop-xl\:align-content-baseline{align-content:baseline !important;}
.desktop-xl\:align-content-space-between{align-content:space-between !important;}
.desktop-xl\:align-content-space-around{align-content:space-around !important;}
.desktop-xl\:align-content-space-evenly{align-content:space-evenly !important;}
.desktop-xl\:align-items-start{align-items:start !important;}
.desktop-xl\:align-items-end{align-items:end !important;}
.desktop-xl\:align-items-center{align-items:center !important;}
.desktop-xl\:align-items-baseline{align-items:baseline !important;}
.desktop-xl\:align-items-stretch{align-items:stretch !important;}
.desktop-xl\:align-self-start{align-self:start !important;}
.desktop-xl\:align-self-end{align-self:end !important;}
.desktop-xl\:align-self-center{align-self:center !important;}
.desktop-xl\:align-self-baseline{align-self:baseline !important;}
.desktop-xl\:align-self-stretch{align-self:stretch !important;}
.desktop-xl\:justify-content-start{justify-content:start !important;}
.desktop-xl\:justify-content-end{justify-content:end !important;}
.desktop-xl\:justify-content-center{justify-content:center !important;}
.desktop-xl\:justify-content-space-between{justify-content:space-between !important;}
.desktop-xl\:justify-content-space-around{justify-content:space-around !important;}
.desktop-xl\:justify-content-space-evenly{justify-content:space-evenly !important;}
.desktop-xl\:gap-none{gap:var(--ds-alias-space-none-device) !important;}
.desktop-xl\:gap-auto{gap:var(--ds-alias-space-auto-device) !important;}
.desktop-xl\:gap-2xs,
.desktop-xl\:gap-xx-small{gap:var(--ds-alias-space-2xs-device) !important;}
.desktop-xl\:gap-x-small,
.desktop-xl\:gap-xs{gap:var(--ds-alias-space-xs-device) !important;}
.desktop-xl\:gap-sm,
.desktop-xl\:gap-small{gap:var(--ds-alias-space-sm-device) !important;}
.desktop-xl\:gap-base,
.desktop-xl\:gap-normal{gap:var(--ds-alias-space-base-device) !important;}
.desktop-xl\:gap-md,
.desktop-xl\:gap-medium{gap:var(--ds-alias-space-md-device) !important;}
.desktop-xl\:gap-large,
.desktop-xl\:gap-lg{gap:var(--ds-alias-space-lg-device) !important;}
.desktop-xl\:gap-x-large,
.desktop-xl\:gap-xl{gap:var(--ds-alias-space-xl-device) !important;}
.desktop-xl\:gap-2xl,
.desktop-xl\:gap-xx-large{gap:var(--ds-alias-space-2xl-device) !important;}
.desktop-xl\:gap-3xl,
.desktop-xl\:gap-xxx-large{gap:var(--ds-alias-space-3xl-device) !important;}
.desktop-xl\:gap-4xl,
.desktop-xl\:gap-xxxx-large{gap:var(--ds-alias-space-4xl-device) !important;}
.desktop-xl\:column-gap-none{-moz-column-gap:var(--ds-alias-space-none-device) !important;column-gap:var(--ds-alias-space-none-device) !important;}
.desktop-xl\:column-gap-auto{-moz-column-gap:var(--ds-alias-space-auto-device) !important;column-gap:var(--ds-alias-space-auto-device) !important;}
.desktop-xl\:column-gap-2xs,
.desktop-xl\:column-gap-xx-small{-moz-column-gap:var(--ds-alias-space-2xs-device) !important;column-gap:var(--ds-alias-space-2xs-device) !important;}
.desktop-xl\:column-gap-x-small,
.desktop-xl\:column-gap-xs{-moz-column-gap:var(--ds-alias-space-xs-device) !important;column-gap:var(--ds-alias-space-xs-device) !important;}
.desktop-xl\:column-gap-sm,
.desktop-xl\:column-gap-small{-moz-column-gap:var(--ds-alias-space-sm-device) !important;column-gap:var(--ds-alias-space-sm-device) !important;}
.desktop-xl\:column-gap-base,
.desktop-xl\:column-gap-normal{-moz-column-gap:var(--ds-alias-space-base-device) !important;column-gap:var(--ds-alias-space-base-device) !important;}
.desktop-xl\:column-gap-md,
.desktop-xl\:column-gap-medium{-moz-column-gap:var(--ds-alias-space-md-device) !important;column-gap:var(--ds-alias-space-md-device) !important;}
.desktop-xl\:column-gap-large,
.desktop-xl\:column-gap-lg{-moz-column-gap:var(--ds-alias-space-lg-device) !important;column-gap:var(--ds-alias-space-lg-device) !important;}
.desktop-xl\:column-gap-x-large,
.desktop-xl\:column-gap-xl{-moz-column-gap:var(--ds-alias-space-xl-device) !important;column-gap:var(--ds-alias-space-xl-device) !important;}
.desktop-xl\:column-gap-2xl,
.desktop-xl\:column-gap-xx-large{-moz-column-gap:var(--ds-alias-space-2xl-device) !important;column-gap:var(--ds-alias-space-2xl-device) !important;}
.desktop-xl\:column-gap-3xl,
.desktop-xl\:column-gap-xxx-large{-moz-column-gap:var(--ds-alias-space-3xl-device) !important;column-gap:var(--ds-alias-space-3xl-device) !important;}
.desktop-xl\:column-gap-4xl,
.desktop-xl\:column-gap-xxxx-large{-moz-column-gap:var(--ds-alias-space-4xl-device) !important;column-gap:var(--ds-alias-space-4xl-device) !important;}
.desktop-xl\:row-gap-none{row-gap:var(--ds-alias-space-none-device) !important;}
.desktop-xl\:row-gap-auto{row-gap:var(--ds-alias-space-auto-device) !important;}
.desktop-xl\:row-gap-2xs,
.desktop-xl\:row-gap-xx-small{row-gap:var(--ds-alias-space-2xs-device) !important;}
.desktop-xl\:row-gap-x-small,
.desktop-xl\:row-gap-xs{row-gap:var(--ds-alias-space-xs-device) !important;}
.desktop-xl\:row-gap-sm,
.desktop-xl\:row-gap-small{row-gap:var(--ds-alias-space-sm-device) !important;}
.desktop-xl\:row-gap-base,
.desktop-xl\:row-gap-normal{row-gap:var(--ds-alias-space-base-device) !important;}
.desktop-xl\:row-gap-md,
.desktop-xl\:row-gap-medium{row-gap:var(--ds-alias-space-md-device) !important;}
.desktop-xl\:row-gap-large,
.desktop-xl\:row-gap-lg{row-gap:var(--ds-alias-space-lg-device) !important;}
.desktop-xl\:row-gap-x-large,
.desktop-xl\:row-gap-xl{row-gap:var(--ds-alias-space-xl-device) !important;}
.desktop-xl\:row-gap-2xl,
.desktop-xl\:row-gap-xx-large{row-gap:var(--ds-alias-space-2xl-device) !important;}
.desktop-xl\:row-gap-3xl,
.desktop-xl\:row-gap-xxx-large{row-gap:var(--ds-alias-space-3xl-device) !important;}
.desktop-xl\:row-gap-4xl,
.desktop-xl\:row-gap-xxxx-large{row-gap:var(--ds-alias-space-4xl-device) !important;}
.desktop-xl\:hidden{display:none !important;}
.desktop-xl\:block{display:block !important;}
.desktop-xl\:inline{display:inline !important;}
.desktop-xl\:inline-block{display:inline-block !important;}
.desktop-xl\:flex{display:flex !important;}
.desktop-xl\:inline-flex{display:inline-flex !important;}
.desktop-xl\:static{position:static !important;}
.desktop-xl\:relative{position:relative !important;}
.desktop-xl\:absolute{position:absolute !important;}
.desktop-xl\:fixed{position:fixed !important;}
.desktop-xl\:sticky{position:sticky !important;}
.desktop-xl\:overflow-auto{overflow:auto !important;}
.desktop-xl\:overflow-hidden{overflow:hidden !important;}
.desktop-xl\:overflow-visible{overflow:visible !important;}
.desktop-xl\:overflow-scroll{overflow:scroll !important;}
.desktop-xl\:overflow-x-auto{overflow-x:auto !important;}
.desktop-xl\:overflow-x-hidden{overflow-x:hidden !important;}
.desktop-xl\:overflow-x-visible{overflow-x:visible !important;}
.desktop-xl\:overflow-x-scroll{overflow-x:scroll !important;}
.desktop-xl\:overflow-y-auto{overflow-y:auto !important;}
.desktop-xl\:overflow-y-hidden{overflow-y:hidden !important;}
.desktop-xl\:overflow-y-visible{overflow-y:visible !important;}
.desktop-xl\:overflow-y-scroll{overflow-y:scroll !important;}
.desktop-xl\:vertical-align-top{vertical-align:top !important;}
.desktop-xl\:vertical-align-middle{vertical-align:middle !important;}
.desktop-xl\:vertical-align-bottom{vertical-align:bottom !important;}
.desktop-xl\:top-0{top:0 !important;}
.desktop-xl\:top-auto{top:auto !important;}
.desktop-xl\:top-50{top:50% !important;}
.desktop-xl\:top-100{top:100% !important;}
.desktop-xl\:top-1rem{top:1rem !important;}
.desktop-xl\:top-0-5rem{top:0.5rem !important;}
.desktop-xl\:top-0-25rem{top:0.25rem !important;}
.desktop-xl\:right-0{right:0 !important;}
.desktop-xl\:right-auto{right:auto !important;}
.desktop-xl\:right-50{right:50% !important;}
.desktop-xl\:right-100{right:100% !important;}
.desktop-xl\:right-1rem{right:1rem !important;}
.desktop-xl\:bottom-0{bottom:0 !important;}
.desktop-xl\:bottom-auto{bottom:auto !important;}
.desktop-xl\:bottom-50{bottom:50% !important;}
.desktop-xl\:bottom-100{bottom:100% !important;}
.desktop-xl\:bottom-1rem{bottom:1rem !important;}
.desktop-xl\:left-0{left:0 !important;}
.desktop-xl\:left-auto{left:auto !important;}
.desktop-xl\:left-50{left:50% !important;}
.desktop-xl\:left-100{left:100% !important;}
.desktop-xl\:left-1rem{left:1rem !important;}
.desktop-xl\:z-index-deep{z-index:var(--ds-alias-z-index-deep) !important;}
.desktop-xl\:z-index-masked{z-index:var(--ds-alias-z-index-masked) !important;}
.desktop-xl\:z-index-mask{z-index:var(--ds-alias-z-index-mask) !important;}
.desktop-xl\:z-index-sticky{z-index:var(--ds-alias-z-index-sticky) !important;}
.desktop-xl\:z-index-navigation{z-index:var(--ds-alias-z-index-navigation) !important;}
.desktop-xl\:z-index-popup{z-index:var(--ds-alias-z-index-popup) !important;}
.desktop-xl\:z-index-modal{z-index:var(--ds-alias-z-index-modal) !important;}
.desktop-xl\:z-index-toast{z-index:var(--ds-alias-z-index-toast) !important;}
.desktop-xl\:z-index-tooltip{z-index:var(--ds-alias-z-index-tooltip) !important;}
.desktop-xl\:opacity-hidden{opacity:var(--ds-alias-opacity-hidden) !important;}
.desktop-xl\:opacity-half{opacity:var(--ds-alias-opacity-half) !important;}
.desktop-xl\:opacity-disabled{opacity:var(--ds-alias-opacity-disabled) !important;}
.desktop-xl\:opacity-backdrop{opacity:var(--ds-alias-opacity-backdrop) !important;}
.desktop-xl\:opacity-full{opacity:var(--ds-alias-opacity-full) !important;}
.desktop-xl\:shadow-none{box-shadow:var(--ds-alias-shadow-box-none) !important;}
.desktop-xl\:shadow-header{box-shadow:var(--ds-alias-shadow-box-header) !important;}
.desktop-xl\:shadow{box-shadow:var(--ds-alias-shadow-box-base) !important;}
.desktop-xl\:shadow-elevated{box-shadow:var(--ds-alias-shadow-box-elevated) !important;}
.desktop-xl\:text-shadow{text-shadow:var(--ds-alias-shadow-text) !important;}
.desktop-xl\:text-shadow-none{text-shadow:none !important;}
.desktop-xl\:select-none{-webkit-user-select:none !important;-moz-user-select:none !important;user-select:none !important;}
.desktop-xl\:select-text{-webkit-user-select:text !important;-moz-user-select:text !important;user-select:text !important;}
.desktop-xl\:select-all{-webkit-user-select:all !important;-moz-user-select:all !important;user-select:all !important;}
.desktop-xl\:select-auto{-webkit-user-select:auto !important;-moz-user-select:auto !important;user-select:auto !important;}
.desktop-xl\:cursor-auto{cursor:auto !important;}
.desktop-xl\:cursor-pointer{cursor:pointer !important;}
.desktop-xl\:cursor-wait{cursor:wait !important;}
.desktop-xl\:cursor-move{cursor:move !important;}
.desktop-xl\:cursor-not-allowed{cursor:not-allowed !important;}
.desktop-xl\:pointer-events-auto{pointer-events:auto !important;}
.desktop-xl\:pointer-events-none{pointer-events:none !important;}
}
@media screen and (min-width: 1920px){
.desktop-2xl\:flex-direction-row{flex-direction:row !important;}
.desktop-2xl\:flex-direction-row-reverse{flex-direction:row-reverse !important;}
.desktop-2xl\:flex-direction-column{flex-direction:column !important;}
.desktop-2xl\:flex-direction-column-reverse{flex-direction:column-reverse !important;}
.desktop-2xl\:flex-wrap{flex-wrap:wrap !important;}
.desktop-2xl\:flex-wrap-reverse{flex-wrap:wrap-reverse !important;}
.desktop-2xl\:flex-nowrap{flex-wrap:nowrap !important;}
.desktop-2xl\:flex-1{flex:1 1 0% !important;}
.desktop-2xl\:flex-auto{flex:1 1 auto !important;}
.desktop-2xl\:flex-initial{flex:0 1 auto !important;}
.desktop-2xl\:flex-none{flex:none !important;}
.desktop-2xl\:align-content-start{align-content:start !important;}
.desktop-2xl\:align-content-end{align-content:end !important;}
.desktop-2xl\:align-content-center{align-content:center !important;}
.desktop-2xl\:align-content-baseline{align-content:baseline !important;}
.desktop-2xl\:align-content-space-between{align-content:space-between !important;}
.desktop-2xl\:align-content-space-around{align-content:space-around !important;}
.desktop-2xl\:align-content-space-evenly{align-content:space-evenly !important;}
.desktop-2xl\:align-items-start{align-items:start !important;}
.desktop-2xl\:align-items-end{align-items:end !important;}
.desktop-2xl\:align-items-center{align-items:center !important;}
.desktop-2xl\:align-items-baseline{align-items:baseline !important;}
.desktop-2xl\:align-items-stretch{align-items:stretch !important;}
.desktop-2xl\:align-self-start{align-self:start !important;}
.desktop-2xl\:align-self-end{align-self:end !important;}
.desktop-2xl\:align-self-center{align-self:center !important;}
.desktop-2xl\:align-self-baseline{align-self:baseline !important;}
.desktop-2xl\:align-self-stretch{align-self:stretch !important;}
.desktop-2xl\:justify-content-start{justify-content:start !important;}
.desktop-2xl\:justify-content-end{justify-content:end !important;}
.desktop-2xl\:justify-content-center{justify-content:center !important;}
.desktop-2xl\:justify-content-space-between{justify-content:space-between !important;}
.desktop-2xl\:justify-content-space-around{justify-content:space-around !important;}
.desktop-2xl\:justify-content-space-evenly{justify-content:space-evenly !important;}
.desktop-2xl\:gap-none{gap:var(--ds-alias-space-none-device) !important;}
.desktop-2xl\:gap-auto{gap:var(--ds-alias-space-auto-device) !important;}
.desktop-2xl\:gap-2xs,
.desktop-2xl\:gap-xx-small{gap:var(--ds-alias-space-2xs-device) !important;}
.desktop-2xl\:gap-x-small,
.desktop-2xl\:gap-xs{gap:var(--ds-alias-space-xs-device) !important;}
.desktop-2xl\:gap-sm,
.desktop-2xl\:gap-small{gap:var(--ds-alias-space-sm-device) !important;}
.desktop-2xl\:gap-base,
.desktop-2xl\:gap-normal{gap:var(--ds-alias-space-base-device) !important;}
.desktop-2xl\:gap-md,
.desktop-2xl\:gap-medium{gap:var(--ds-alias-space-md-device) !important;}
.desktop-2xl\:gap-large,
.desktop-2xl\:gap-lg{gap:var(--ds-alias-space-lg-device) !important;}
.desktop-2xl\:gap-x-large,
.desktop-2xl\:gap-xl{gap:var(--ds-alias-space-xl-device) !important;}
.desktop-2xl\:gap-2xl,
.desktop-2xl\:gap-xx-large{gap:var(--ds-alias-space-2xl-device) !important;}
.desktop-2xl\:gap-3xl,
.desktop-2xl\:gap-xxx-large{gap:var(--ds-alias-space-3xl-device) !important;}
.desktop-2xl\:gap-4xl,
.desktop-2xl\:gap-xxxx-large{gap:var(--ds-alias-space-4xl-device) !important;}
.desktop-2xl\:column-gap-none{-moz-column-gap:var(--ds-alias-space-none-device) !important;column-gap:var(--ds-alias-space-none-device) !important;}
.desktop-2xl\:column-gap-auto{-moz-column-gap:var(--ds-alias-space-auto-device) !important;column-gap:var(--ds-alias-space-auto-device) !important;}
.desktop-2xl\:column-gap-2xs,
.desktop-2xl\:column-gap-xx-small{-moz-column-gap:var(--ds-alias-space-2xs-device) !important;column-gap:var(--ds-alias-space-2xs-device) !important;}
.desktop-2xl\:column-gap-x-small,
.desktop-2xl\:column-gap-xs{-moz-column-gap:var(--ds-alias-space-xs-device) !important;column-gap:var(--ds-alias-space-xs-device) !important;}
.desktop-2xl\:column-gap-sm,
.desktop-2xl\:column-gap-small{-moz-column-gap:var(--ds-alias-space-sm-device) !important;column-gap:var(--ds-alias-space-sm-device) !important;}
.desktop-2xl\:column-gap-base,
.desktop-2xl\:column-gap-normal{-moz-column-gap:var(--ds-alias-space-base-device) !important;column-gap:var(--ds-alias-space-base-device) !important;}
.desktop-2xl\:column-gap-md,
.desktop-2xl\:column-gap-medium{-moz-column-gap:var(--ds-alias-space-md-device) !important;column-gap:var(--ds-alias-space-md-device) !important;}
.desktop-2xl\:column-gap-large,
.desktop-2xl\:column-gap-lg{-moz-column-gap:var(--ds-alias-space-lg-device) !important;column-gap:var(--ds-alias-space-lg-device) !important;}
.desktop-2xl\:column-gap-x-large,
.desktop-2xl\:column-gap-xl{-moz-column-gap:var(--ds-alias-space-xl-device) !important;column-gap:var(--ds-alias-space-xl-device) !important;}
.desktop-2xl\:column-gap-2xl,
.desktop-2xl\:column-gap-xx-large{-moz-column-gap:var(--ds-alias-space-2xl-device) !important;column-gap:var(--ds-alias-space-2xl-device) !important;}
.desktop-2xl\:column-gap-3xl,
.desktop-2xl\:column-gap-xxx-large{-moz-column-gap:var(--ds-alias-space-3xl-device) !important;column-gap:var(--ds-alias-space-3xl-device) !important;}
.desktop-2xl\:column-gap-4xl,
.desktop-2xl\:column-gap-xxxx-large{-moz-column-gap:var(--ds-alias-space-4xl-device) !important;column-gap:var(--ds-alias-space-4xl-device) !important;}
.desktop-2xl\:row-gap-none{row-gap:var(--ds-alias-space-none-device) !important;}
.desktop-2xl\:row-gap-auto{row-gap:var(--ds-alias-space-auto-device) !important;}
.desktop-2xl\:row-gap-2xs,
.desktop-2xl\:row-gap-xx-small{row-gap:var(--ds-alias-space-2xs-device) !important;}
.desktop-2xl\:row-gap-x-small,
.desktop-2xl\:row-gap-xs{row-gap:var(--ds-alias-space-xs-device) !important;}
.desktop-2xl\:row-gap-sm,
.desktop-2xl\:row-gap-small{row-gap:var(--ds-alias-space-sm-device) !important;}
.desktop-2xl\:row-gap-base,
.desktop-2xl\:row-gap-normal{row-gap:var(--ds-alias-space-base-device) !important;}
.desktop-2xl\:row-gap-md,
.desktop-2xl\:row-gap-medium{row-gap:var(--ds-alias-space-md-device) !important;}
.desktop-2xl\:row-gap-large,
.desktop-2xl\:row-gap-lg{row-gap:var(--ds-alias-space-lg-device) !important;}
.desktop-2xl\:row-gap-x-large,
.desktop-2xl\:row-gap-xl{row-gap:var(--ds-alias-space-xl-device) !important;}
.desktop-2xl\:row-gap-2xl,
.desktop-2xl\:row-gap-xx-large{row-gap:var(--ds-alias-space-2xl-device) !important;}
.desktop-2xl\:row-gap-3xl,
.desktop-2xl\:row-gap-xxx-large{row-gap:var(--ds-alias-space-3xl-device) !important;}
.desktop-2xl\:row-gap-4xl,
.desktop-2xl\:row-gap-xxxx-large{row-gap:var(--ds-alias-space-4xl-device) !important;}
.desktop-2xl\:hidden{display:none !important;}
.desktop-2xl\:block{display:block !important;}
.desktop-2xl\:inline{display:inline !important;}
.desktop-2xl\:inline-block{display:inline-block !important;}
.desktop-2xl\:flex{display:flex !important;}
.desktop-2xl\:inline-flex{display:inline-flex !important;}
.desktop-2xl\:static{position:static !important;}
.desktop-2xl\:relative{position:relative !important;}
.desktop-2xl\:absolute{position:absolute !important;}
.desktop-2xl\:fixed{position:fixed !important;}
.desktop-2xl\:sticky{position:sticky !important;}
.desktop-2xl\:overflow-auto{overflow:auto !important;}
.desktop-2xl\:overflow-hidden{overflow:hidden !important;}
.desktop-2xl\:overflow-visible{overflow:visible !important;}
.desktop-2xl\:overflow-scroll{overflow:scroll !important;}
.desktop-2xl\:overflow-x-auto{overflow-x:auto !important;}
.desktop-2xl\:overflow-x-hidden{overflow-x:hidden !important;}
.desktop-2xl\:overflow-x-visible{overflow-x:visible !important;}
.desktop-2xl\:overflow-x-scroll{overflow-x:scroll !important;}
.desktop-2xl\:overflow-y-auto{overflow-y:auto !important;}
.desktop-2xl\:overflow-y-hidden{overflow-y:hidden !important;}
.desktop-2xl\:overflow-y-visible{overflow-y:visible !important;}
.desktop-2xl\:overflow-y-scroll{overflow-y:scroll !important;}
.desktop-2xl\:vertical-align-top{vertical-align:top !important;}
.desktop-2xl\:vertical-align-middle{vertical-align:middle !important;}
.desktop-2xl\:vertical-align-bottom{vertical-align:bottom !important;}
.desktop-2xl\:top-0{top:0 !important;}
.desktop-2xl\:top-auto{top:auto !important;}
.desktop-2xl\:top-50{top:50% !important;}
.desktop-2xl\:top-100{top:100% !important;}
.desktop-2xl\:top-1rem{top:1rem !important;}
.desktop-2xl\:top-0-5rem{top:0.5rem !important;}
.desktop-2xl\:top-0-25rem{top:0.25rem !important;}
.desktop-2xl\:right-0{right:0 !important;}
.desktop-2xl\:right-auto{right:auto !important;}
.desktop-2xl\:right-50{right:50% !important;}
.desktop-2xl\:right-100{right:100% !important;}
.desktop-2xl\:right-1rem{right:1rem !important;}
.desktop-2xl\:bottom-0{bottom:0 !important;}
.desktop-2xl\:bottom-auto{bottom:auto !important;}
.desktop-2xl\:bottom-50{bottom:50% !important;}
.desktop-2xl\:bottom-100{bottom:100% !important;}
.desktop-2xl\:bottom-1rem{bottom:1rem !important;}
.desktop-2xl\:left-0{left:0 !important;}
.desktop-2xl\:left-auto{left:auto !important;}
.desktop-2xl\:left-50{left:50% !important;}
.desktop-2xl\:left-100{left:100% !important;}
.desktop-2xl\:left-1rem{left:1rem !important;}
.desktop-2xl\:z-index-deep{z-index:var(--ds-alias-z-index-deep) !important;}
.desktop-2xl\:z-index-masked{z-index:var(--ds-alias-z-index-masked) !important;}
.desktop-2xl\:z-index-mask{z-index:var(--ds-alias-z-index-mask) !important;}
.desktop-2xl\:z-index-sticky{z-index:var(--ds-alias-z-index-sticky) !important;}
.desktop-2xl\:z-index-navigation{z-index:var(--ds-alias-z-index-navigation) !important;}
.desktop-2xl\:z-index-popup{z-index:var(--ds-alias-z-index-popup) !important;}
.desktop-2xl\:z-index-modal{z-index:var(--ds-alias-z-index-modal) !important;}
.desktop-2xl\:z-index-toast{z-index:var(--ds-alias-z-index-toast) !important;}
.desktop-2xl\:z-index-tooltip{z-index:var(--ds-alias-z-index-tooltip) !important;}
.desktop-2xl\:opacity-hidden{opacity:var(--ds-alias-opacity-hidden) !important;}
.desktop-2xl\:opacity-half{opacity:var(--ds-alias-opacity-half) !important;}
.desktop-2xl\:opacity-disabled{opacity:var(--ds-alias-opacity-disabled) !important;}
.desktop-2xl\:opacity-backdrop{opacity:var(--ds-alias-opacity-backdrop) !important;}
.desktop-2xl\:opacity-full{opacity:var(--ds-alias-opacity-full) !important;}
.desktop-2xl\:shadow-none{box-shadow:var(--ds-alias-shadow-box-none) !important;}
.desktop-2xl\:shadow-header{box-shadow:var(--ds-alias-shadow-box-header) !important;}
.desktop-2xl\:shadow{box-shadow:var(--ds-alias-shadow-box-base) !important;}
.desktop-2xl\:shadow-elevated{box-shadow:var(--ds-alias-shadow-box-elevated) !important;}
.desktop-2xl\:text-shadow{text-shadow:var(--ds-alias-shadow-text) !important;}
.desktop-2xl\:text-shadow-none{text-shadow:none !important;}
.desktop-2xl\:select-none{-webkit-user-select:none !important;-moz-user-select:none !important;user-select:none !important;}
.desktop-2xl\:select-text{-webkit-user-select:text !important;-moz-user-select:text !important;user-select:text !important;}
.desktop-2xl\:select-all{-webkit-user-select:all !important;-moz-user-select:all !important;user-select:all !important;}
.desktop-2xl\:select-auto{-webkit-user-select:auto !important;-moz-user-select:auto !important;user-select:auto !important;}
.desktop-2xl\:cursor-auto{cursor:auto !important;}
.desktop-2xl\:cursor-pointer{cursor:pointer !important;}
.desktop-2xl\:cursor-wait{cursor:wait !important;}
.desktop-2xl\:cursor-move{cursor:move !important;}
.desktop-2xl\:cursor-not-allowed{cursor:not-allowed !important;}
.desktop-2xl\:pointer-events-auto{pointer-events:auto !important;}
.desktop-2xl\:pointer-events-none{pointer-events:none !important;}
}
@media screen and (min-width: 769px){
.tablet\:flex-direction-row{flex-direction:row !important;}
.tablet\:flex-direction-row-reverse{flex-direction:row-reverse !important;}
.tablet\:flex-direction-column{flex-direction:column !important;}
.tablet\:flex-direction-column-reverse{flex-direction:column-reverse !important;}
.tablet\:flex-wrap{flex-wrap:wrap !important;}
.tablet\:flex-wrap-reverse{flex-wrap:wrap-reverse !important;}
.tablet\:flex-nowrap{flex-wrap:nowrap !important;}
.tablet\:flex-1{flex:1 1 0% !important;}
.tablet\:flex-auto{flex:1 1 auto !important;}
.tablet\:flex-initial{flex:0 1 auto !important;}
.tablet\:flex-none{flex:none !important;}
.tablet\:align-content-start{align-content:start !important;}
.tablet\:align-content-end{align-content:end !important;}
.tablet\:align-content-center{align-content:center !important;}
.tablet\:align-content-baseline{align-content:baseline !important;}
.tablet\:align-content-space-between{align-content:space-between !important;}
.tablet\:align-content-space-around{align-content:space-around !important;}
.tablet\:align-content-space-evenly{align-content:space-evenly !important;}
.tablet\:align-items-start{align-items:start !important;}
.tablet\:align-items-end{align-items:end !important;}
.tablet\:align-items-center{align-items:center !important;}
.tablet\:align-items-baseline{align-items:baseline !important;}
.tablet\:align-items-stretch{align-items:stretch !important;}
.tablet\:align-self-start{align-self:start !important;}
.tablet\:align-self-end{align-self:end !important;}
.tablet\:align-self-center{align-self:center !important;}
.tablet\:align-self-baseline{align-self:baseline !important;}
.tablet\:align-self-stretch{align-self:stretch !important;}
.tablet\:justify-content-start{justify-content:start !important;}
.tablet\:justify-content-end{justify-content:end !important;}
.tablet\:justify-content-center{justify-content:center !important;}
.tablet\:justify-content-space-between{justify-content:space-between !important;}
.tablet\:justify-content-space-around{justify-content:space-around !important;}
.tablet\:justify-content-space-evenly{justify-content:space-evenly !important;}
.tablet\:gap-none{gap:var(--ds-alias-space-none-device) !important;}
.tablet\:gap-auto{gap:var(--ds-alias-space-auto-device) !important;}
.tablet\:gap-2xs,
.tablet\:gap-xx-small{gap:var(--ds-alias-space-2xs-device) !important;}
.tablet\:gap-x-small,
.tablet\:gap-xs{gap:var(--ds-alias-space-xs-device) !important;}
.tablet\:gap-sm,
.tablet\:gap-small{gap:var(--ds-alias-space-sm-device) !important;}
.tablet\:gap-base,
.tablet\:gap-normal{gap:var(--ds-alias-space-base-device) !important;}
.tablet\:gap-md,
.tablet\:gap-medium{gap:var(--ds-alias-space-md-device) !important;}
.tablet\:gap-large,
.tablet\:gap-lg{gap:var(--ds-alias-space-lg-device) !important;}
.tablet\:gap-x-large,
.tablet\:gap-xl{gap:var(--ds-alias-space-xl-device) !important;}
.tablet\:gap-2xl,
.tablet\:gap-xx-large{gap:var(--ds-alias-space-2xl-device) !important;}
.tablet\:gap-3xl,
.tablet\:gap-xxx-large{gap:var(--ds-alias-space-3xl-device) !important;}
.tablet\:gap-4xl,
.tablet\:gap-xxxx-large{gap:var(--ds-alias-space-4xl-device) !important;}
.tablet\:column-gap-none{-moz-column-gap:var(--ds-alias-space-none-device) !important;column-gap:var(--ds-alias-space-none-device) !important;}
.tablet\:column-gap-auto{-moz-column-gap:var(--ds-alias-space-auto-device) !important;column-gap:var(--ds-alias-space-auto-device) !important;}
.tablet\:column-gap-2xs,
.tablet\:column-gap-xx-small{-moz-column-gap:var(--ds-alias-space-2xs-device) !important;column-gap:var(--ds-alias-space-2xs-device) !important;}
.tablet\:column-gap-x-small,
.tablet\:column-gap-xs{-moz-column-gap:var(--ds-alias-space-xs-device) !important;column-gap:var(--ds-alias-space-xs-device) !important;}
.tablet\:column-gap-sm,
.tablet\:column-gap-small{-moz-column-gap:var(--ds-alias-space-sm-device) !important;column-gap:var(--ds-alias-space-sm-device) !important;}
.tablet\:column-gap-base,
.tablet\:column-gap-normal{-moz-column-gap:var(--ds-alias-space-base-device) !important;column-gap:var(--ds-alias-space-base-device) !important;}
.tablet\:column-gap-md,
.tablet\:column-gap-medium{-moz-column-gap:var(--ds-alias-space-md-device) !important;column-gap:var(--ds-alias-space-md-device) !important;}
.tablet\:column-gap-large,
.tablet\:column-gap-lg{-moz-column-gap:var(--ds-alias-space-lg-device) !important;column-gap:var(--ds-alias-space-lg-device) !important;}
.tablet\:column-gap-x-large,
.tablet\:column-gap-xl{-moz-column-gap:var(--ds-alias-space-xl-device) !important;column-gap:var(--ds-alias-space-xl-device) !important;}
.tablet\:column-gap-2xl,
.tablet\:column-gap-xx-large{-moz-column-gap:var(--ds-alias-space-2xl-device) !important;column-gap:var(--ds-alias-space-2xl-device) !important;}
.tablet\:column-gap-3xl,
.tablet\:column-gap-xxx-large{-moz-column-gap:var(--ds-alias-space-3xl-device) !important;column-gap:var(--ds-alias-space-3xl-device) !important;}
.tablet\:column-gap-4xl,
.tablet\:column-gap-xxxx-large{-moz-column-gap:var(--ds-alias-space-4xl-device) !important;column-gap:var(--ds-alias-space-4xl-device) !important;}
.tablet\:row-gap-none{row-gap:var(--ds-alias-space-none-device) !important;}
.tablet\:row-gap-auto{row-gap:var(--ds-alias-space-auto-device) !important;}
.tablet\:row-gap-2xs,
.tablet\:row-gap-xx-small{row-gap:var(--ds-alias-space-2xs-device) !important;}
.tablet\:row-gap-x-small,
.tablet\:row-gap-xs{row-gap:var(--ds-alias-space-xs-device) !important;}
.tablet\:row-gap-sm,
.tablet\:row-gap-small{row-gap:var(--ds-alias-space-sm-device) !important;}
.tablet\:row-gap-base,
.tablet\:row-gap-normal{row-gap:var(--ds-alias-space-base-device) !important;}
.tablet\:row-gap-md,
.tablet\:row-gap-medium{row-gap:var(--ds-alias-space-md-device) !important;}
.tablet\:row-gap-large,
.tablet\:row-gap-lg{row-gap:var(--ds-alias-space-lg-device) !important;}
.tablet\:row-gap-x-large,
.tablet\:row-gap-xl{row-gap:var(--ds-alias-space-xl-device) !important;}
.tablet\:row-gap-2xl,
.tablet\:row-gap-xx-large{row-gap:var(--ds-alias-space-2xl-device) !important;}
.tablet\:row-gap-3xl,
.tablet\:row-gap-xxx-large{row-gap:var(--ds-alias-space-3xl-device) !important;}
.tablet\:row-gap-4xl,
.tablet\:row-gap-xxxx-large{row-gap:var(--ds-alias-space-4xl-device) !important;}
.tablet\:hidden{display:none !important;}
.tablet\:block{display:block !important;}
.tablet\:inline{display:inline !important;}
.tablet\:inline-block{display:inline-block !important;}
.tablet\:flex{display:flex !important;}
.tablet\:inline-flex{display:inline-flex !important;}
.tablet\:static{position:static !important;}
.tablet\:relative{position:relative !important;}
.tablet\:absolute{position:absolute !important;}
.tablet\:fixed{position:fixed !important;}
.tablet\:sticky{position:sticky !important;}
.tablet\:overflow-auto{overflow:auto !important;}
.tablet\:overflow-hidden{overflow:hidden !important;}
.tablet\:overflow-visible{overflow:visible !important;}
.tablet\:overflow-scroll{overflow:scroll !important;}
.tablet\:overflow-x-auto{overflow-x:auto !important;}
.tablet\:overflow-x-hidden{overflow-x:hidden !important;}
.tablet\:overflow-x-visible{overflow-x:visible !important;}
.tablet\:overflow-x-scroll{overflow-x:scroll !important;}
.tablet\:overflow-y-auto{overflow-y:auto !important;}
.tablet\:overflow-y-hidden{overflow-y:hidden !important;}
.tablet\:overflow-y-visible{overflow-y:visible !important;}
.tablet\:overflow-y-scroll{overflow-y:scroll !important;}
.tablet\:vertical-align-top{vertical-align:top !important;}
.tablet\:vertical-align-middle{vertical-align:middle !important;}
.tablet\:vertical-align-bottom{vertical-align:bottom !important;}
.tablet\:top-0{top:0 !important;}
.tablet\:top-auto{top:auto !important;}
.tablet\:top-50{top:50% !important;}
.tablet\:top-100{top:100% !important;}
.tablet\:top-1rem{top:1rem !important;}
.tablet\:top-0-5rem{top:0.5rem !important;}
.tablet\:top-0-25rem{top:0.25rem !important;}
.tablet\:right-0{right:0 !important;}
.tablet\:right-auto{right:auto !important;}
.tablet\:right-50{right:50% !important;}
.tablet\:right-100{right:100% !important;}
.tablet\:right-1rem{right:1rem !important;}
.tablet\:bottom-0{bottom:0 !important;}
.tablet\:bottom-auto{bottom:auto !important;}
.tablet\:bottom-50{bottom:50% !important;}
.tablet\:bottom-100{bottom:100% !important;}
.tablet\:bottom-1rem{bottom:1rem !important;}
.tablet\:left-0{left:0 !important;}
.tablet\:left-auto{left:auto !important;}
.tablet\:left-50{left:50% !important;}
.tablet\:left-100{left:100% !important;}
.tablet\:left-1rem{left:1rem !important;}
.tablet\:z-index-deep{z-index:var(--ds-alias-z-index-deep) !important;}
.tablet\:z-index-masked{z-index:var(--ds-alias-z-index-masked) !important;}
.tablet\:z-index-mask{z-index:var(--ds-alias-z-index-mask) !important;}
.tablet\:z-index-sticky{z-index:var(--ds-alias-z-index-sticky) !important;}
.tablet\:z-index-navigation{z-index:var(--ds-alias-z-index-navigation) !important;}
.tablet\:z-index-popup{z-index:var(--ds-alias-z-index-popup) !important;}
.tablet\:z-index-modal{z-index:var(--ds-alias-z-index-modal) !important;}
.tablet\:z-index-toast{z-index:var(--ds-alias-z-index-toast) !important;}
.tablet\:z-index-tooltip{z-index:var(--ds-alias-z-index-tooltip) !important;}
.tablet\:opacity-hidden{opacity:var(--ds-alias-opacity-hidden) !important;}
.tablet\:opacity-half{opacity:var(--ds-alias-opacity-half) !important;}
.tablet\:opacity-disabled{opacity:var(--ds-alias-opacity-disabled) !important;}
.tablet\:opacity-backdrop{opacity:var(--ds-alias-opacity-backdrop) !important;}
.tablet\:opacity-full{opacity:var(--ds-alias-opacity-full) !important;}
.tablet\:shadow-none{box-shadow:var(--ds-alias-shadow-box-none) !important;}
.tablet\:shadow-header{box-shadow:var(--ds-alias-shadow-box-header) !important;}
.tablet\:shadow{box-shadow:var(--ds-alias-shadow-box-base) !important;}
.tablet\:shadow-elevated{box-shadow:var(--ds-alias-shadow-box-elevated) !important;}
.tablet\:text-shadow{text-shadow:var(--ds-alias-shadow-text) !important;}
.tablet\:text-shadow-none{text-shadow:none !important;}
.tablet\:select-none{-webkit-user-select:none !important;-moz-user-select:none !important;user-select:none !important;}
.tablet\:select-text{-webkit-user-select:text !important;-moz-user-select:text !important;user-select:text !important;}
.tablet\:select-all{-webkit-user-select:all !important;-moz-user-select:all !important;user-select:all !important;}
.tablet\:select-auto{-webkit-user-select:auto !important;-moz-user-select:auto !important;user-select:auto !important;}
.tablet\:cursor-auto{cursor:auto !important;}
.tablet\:cursor-pointer{cursor:pointer !important;}
.tablet\:cursor-wait{cursor:wait !important;}
.tablet\:cursor-move{cursor:move !important;}
.tablet\:cursor-not-allowed{cursor:not-allowed !important;}
.tablet\:pointer-events-auto{pointer-events:auto !important;}
.tablet\:pointer-events-none{pointer-events:none !important;}
}
@media screen and (min-width: 769px) and (max-width: 1023px){
.tablet-only\:flex-direction-row{flex-direction:row !important;}
.tablet-only\:flex-direction-row-reverse{flex-direction:row-reverse !important;}
.tablet-only\:flex-direction-column{flex-direction:column !important;}
.tablet-only\:flex-direction-column-reverse{flex-direction:column-reverse !important;}
.tablet-only\:flex-wrap{flex-wrap:wrap !important;}
.tablet-only\:flex-wrap-reverse{flex-wrap:wrap-reverse !important;}
.tablet-only\:flex-nowrap{flex-wrap:nowrap !important;}
.tablet-only\:flex-1{flex:1 1 0% !important;}
.tablet-only\:flex-auto{flex:1 1 auto !important;}
.tablet-only\:flex-initial{flex:0 1 auto !important;}
.tablet-only\:flex-none{flex:none !important;}
.tablet-only\:align-content-start{align-content:start !important;}
.tablet-only\:align-content-end{align-content:end !important;}
.tablet-only\:align-content-center{align-content:center !important;}
.tablet-only\:align-content-baseline{align-content:baseline !important;}
.tablet-only\:align-content-space-between{align-content:space-between !important;}
.tablet-only\:align-content-space-around{align-content:space-around !important;}
.tablet-only\:align-content-space-evenly{align-content:space-evenly !important;}
.tablet-only\:align-items-start{align-items:start !important;}
.tablet-only\:align-items-end{align-items:end !important;}
.tablet-only\:align-items-center{align-items:center !important;}
.tablet-only\:align-items-baseline{align-items:baseline !important;}
.tablet-only\:align-items-stretch{align-items:stretch !important;}
.tablet-only\:align-self-start{align-self:start !important;}
.tablet-only\:align-self-end{align-self:end !important;}
.tablet-only\:align-self-center{align-self:center !important;}
.tablet-only\:align-self-baseline{align-self:baseline !important;}
.tablet-only\:align-self-stretch{align-self:stretch !important;}
.tablet-only\:justify-content-start{justify-content:start !important;}
.tablet-only\:justify-content-end{justify-content:end !important;}
.tablet-only\:justify-content-center{justify-content:center !important;}
.tablet-only\:justify-content-space-between{justify-content:space-between !important;}
.tablet-only\:justify-content-space-around{justify-content:space-around !important;}
.tablet-only\:justify-content-space-evenly{justify-content:space-evenly !important;}
.tablet-only\:gap-none{gap:var(--ds-alias-space-none-device) !important;}
.tablet-only\:gap-auto{gap:var(--ds-alias-space-auto-device) !important;}
.tablet-only\:gap-2xs,
.tablet-only\:gap-xx-small{gap:var(--ds-alias-space-2xs-device) !important;}
.tablet-only\:gap-x-small,
.tablet-only\:gap-xs{gap:var(--ds-alias-space-xs-device) !important;}
.tablet-only\:gap-sm,
.tablet-only\:gap-small{gap:var(--ds-alias-space-sm-device) !important;}
.tablet-only\:gap-base,
.tablet-only\:gap-normal{gap:var(--ds-alias-space-base-device) !important;}
.tablet-only\:gap-md,
.tablet-only\:gap-medium{gap:var(--ds-alias-space-md-device) !important;}
.tablet-only\:gap-large,
.tablet-only\:gap-lg{gap:var(--ds-alias-space-lg-device) !important;}
.tablet-only\:gap-x-large,
.tablet-only\:gap-xl{gap:var(--ds-alias-space-xl-device) !important;}
.tablet-only\:gap-2xl,
.tablet-only\:gap-xx-large{gap:var(--ds-alias-space-2xl-device) !important;}
.tablet-only\:gap-3xl,
.tablet-only\:gap-xxx-large{gap:var(--ds-alias-space-3xl-device) !important;}
.tablet-only\:gap-4xl,
.tablet-only\:gap-xxxx-large{gap:var(--ds-alias-space-4xl-device) !important;}
.tablet-only\:column-gap-none{-moz-column-gap:var(--ds-alias-space-none-device) !important;column-gap:var(--ds-alias-space-none-device) !important;}
.tablet-only\:column-gap-auto{-moz-column-gap:var(--ds-alias-space-auto-device) !important;column-gap:var(--ds-alias-space-auto-device) !important;}
.tablet-only\:column-gap-2xs,
.tablet-only\:column-gap-xx-small{-moz-column-gap:var(--ds-alias-space-2xs-device) !important;column-gap:var(--ds-alias-space-2xs-device) !important;}
.tablet-only\:column-gap-x-small,
.tablet-only\:column-gap-xs{-moz-column-gap:var(--ds-alias-space-xs-device) !important;column-gap:var(--ds-alias-space-xs-device) !important;}
.tablet-only\:column-gap-sm,
.tablet-only\:column-gap-small{-moz-column-gap:var(--ds-alias-space-sm-device) !important;column-gap:var(--ds-alias-space-sm-device) !important;}
.tablet-only\:column-gap-base,
.tablet-only\:column-gap-normal{-moz-column-gap:var(--ds-alias-space-base-device) !important;column-gap:var(--ds-alias-space-base-device) !important;}
.tablet-only\:column-gap-md,
.tablet-only\:column-gap-medium{-moz-column-gap:var(--ds-alias-space-md-device) !important;column-gap:var(--ds-alias-space-md-device) !important;}
.tablet-only\:column-gap-large,
.tablet-only\:column-gap-lg{-moz-column-gap:var(--ds-alias-space-lg-device) !important;column-gap:var(--ds-alias-space-lg-device) !important;}
.tablet-only\:column-gap-x-large,
.tablet-only\:column-gap-xl{-moz-column-gap:var(--ds-alias-space-xl-device) !important;column-gap:var(--ds-alias-space-xl-device) !important;}
.tablet-only\:column-gap-2xl,
.tablet-only\:column-gap-xx-large{-moz-column-gap:var(--ds-alias-space-2xl-device) !important;column-gap:var(--ds-alias-space-2xl-device) !important;}
.tablet-only\:column-gap-3xl,
.tablet-only\:column-gap-xxx-large{-moz-column-gap:var(--ds-alias-space-3xl-device) !important;column-gap:var(--ds-alias-space-3xl-device) !important;}
.tablet-only\:column-gap-4xl,
.tablet-only\:column-gap-xxxx-large{-moz-column-gap:var(--ds-alias-space-4xl-device) !important;column-gap:var(--ds-alias-space-4xl-device) !important;}
.tablet-only\:row-gap-none{row-gap:var(--ds-alias-space-none-device) !important;}
.tablet-only\:row-gap-auto{row-gap:var(--ds-alias-space-auto-device) !important;}
.tablet-only\:row-gap-2xs,
.tablet-only\:row-gap-xx-small{row-gap:var(--ds-alias-space-2xs-device) !important;}
.tablet-only\:row-gap-x-small,
.tablet-only\:row-gap-xs{row-gap:var(--ds-alias-space-xs-device) !important;}
.tablet-only\:row-gap-sm,
.tablet-only\:row-gap-small{row-gap:var(--ds-alias-space-sm-device) !important;}
.tablet-only\:row-gap-base,
.tablet-only\:row-gap-normal{row-gap:var(--ds-alias-space-base-device) !important;}
.tablet-only\:row-gap-md,
.tablet-only\:row-gap-medium{row-gap:var(--ds-alias-space-md-device) !important;}
.tablet-only\:row-gap-large,
.tablet-only\:row-gap-lg{row-gap:var(--ds-alias-space-lg-device) !important;}
.tablet-only\:row-gap-x-large,
.tablet-only\:row-gap-xl{row-gap:var(--ds-alias-space-xl-device) !important;}
.tablet-only\:row-gap-2xl,
.tablet-only\:row-gap-xx-large{row-gap:var(--ds-alias-space-2xl-device) !important;}
.tablet-only\:row-gap-3xl,
.tablet-only\:row-gap-xxx-large{row-gap:var(--ds-alias-space-3xl-device) !important;}
.tablet-only\:row-gap-4xl,
.tablet-only\:row-gap-xxxx-large{row-gap:var(--ds-alias-space-4xl-device) !important;}
.tablet-only\:hidden{display:none !important;}
.tablet-only\:block{display:block !important;}
.tablet-only\:inline{display:inline !important;}
.tablet-only\:inline-block{display:inline-block !important;}
.tablet-only\:flex{display:flex !important;}
.tablet-only\:inline-flex{display:inline-flex !important;}
.tablet-only\:static{position:static !important;}
.tablet-only\:relative{position:relative !important;}
.tablet-only\:absolute{position:absolute !important;}
.tablet-only\:fixed{position:fixed !important;}
.tablet-only\:sticky{position:sticky !important;}
.tablet-only\:overflow-auto{overflow:auto !important;}
.tablet-only\:overflow-hidden{overflow:hidden !important;}
.tablet-only\:overflow-visible{overflow:visible !important;}
.tablet-only\:overflow-scroll{overflow:scroll !important;}
.tablet-only\:overflow-x-auto{overflow-x:auto !important;}
.tablet-only\:overflow-x-hidden{overflow-x:hidden !important;}
.tablet-only\:overflow-x-visible{overflow-x:visible !important;}
.tablet-only\:overflow-x-scroll{overflow-x:scroll !important;}
.tablet-only\:overflow-y-auto{overflow-y:auto !important;}
.tablet-only\:overflow-y-hidden{overflow-y:hidden !important;}
.tablet-only\:overflow-y-visible{overflow-y:visible !important;}
.tablet-only\:overflow-y-scroll{overflow-y:scroll !important;}
.tablet-only\:vertical-align-top{vertical-align:top !important;}
.tablet-only\:vertical-align-middle{vertical-align:middle !important;}
.tablet-only\:vertical-align-bottom{vertical-align:bottom !important;}
.tablet-only\:top-0{top:0 !important;}
.tablet-only\:top-auto{top:auto !important;}
.tablet-only\:top-50{top:50% !important;}
.tablet-only\:top-100{top:100% !important;}
.tablet-only\:top-1rem{top:1rem !important;}
.tablet-only\:top-0-5rem{top:0.5rem !important;}
.tablet-only\:top-0-25rem{top:0.25rem !important;}
.tablet-only\:right-0{right:0 !important;}
.tablet-only\:right-auto{right:auto !important;}
.tablet-only\:right-50{right:50% !important;}
.tablet-only\:right-100{right:100% !important;}
.tablet-only\:right-1rem{right:1rem !important;}
.tablet-only\:bottom-0{bottom:0 !important;}
.tablet-only\:bottom-auto{bottom:auto !important;}
.tablet-only\:bottom-50{bottom:50% !important;}
.tablet-only\:bottom-100{bottom:100% !important;}
.tablet-only\:bottom-1rem{bottom:1rem !important;}
.tablet-only\:left-0{left:0 !important;}
.tablet-only\:left-auto{left:auto !important;}
.tablet-only\:left-50{left:50% !important;}
.tablet-only\:left-100{left:100% !important;}
.tablet-only\:left-1rem{left:1rem !important;}
.tablet-only\:z-index-deep{z-index:var(--ds-alias-z-index-deep) !important;}
.tablet-only\:z-index-masked{z-index:var(--ds-alias-z-index-masked) !important;}
.tablet-only\:z-index-mask{z-index:var(--ds-alias-z-index-mask) !important;}
.tablet-only\:z-index-sticky{z-index:var(--ds-alias-z-index-sticky) !important;}
.tablet-only\:z-index-navigation{z-index:var(--ds-alias-z-index-navigation) !important;}
.tablet-only\:z-index-popup{z-index:var(--ds-alias-z-index-popup) !important;}
.tablet-only\:z-index-modal{z-index:var(--ds-alias-z-index-modal) !important;}
.tablet-only\:z-index-toast{z-index:var(--ds-alias-z-index-toast) !important;}
.tablet-only\:z-index-tooltip{z-index:var(--ds-alias-z-index-tooltip) !important;}
.tablet-only\:opacity-hidden{opacity:var(--ds-alias-opacity-hidden) !important;}
.tablet-only\:opacity-half{opacity:var(--ds-alias-opacity-half) !important;}
.tablet-only\:opacity-disabled{opacity:var(--ds-alias-opacity-disabled) !important;}
.tablet-only\:opacity-backdrop{opacity:var(--ds-alias-opacity-backdrop) !important;}
.tablet-only\:opacity-full{opacity:var(--ds-alias-opacity-full) !important;}
.tablet-only\:shadow-none{box-shadow:var(--ds-alias-shadow-box-none) !important;}
.tablet-only\:shadow-header{box-shadow:var(--ds-alias-shadow-box-header) !important;}
.tablet-only\:shadow{box-shadow:var(--ds-alias-shadow-box-base) !important;}
.tablet-only\:shadow-elevated{box-shadow:var(--ds-alias-shadow-box-elevated) !important;}
.tablet-only\:text-shadow{text-shadow:var(--ds-alias-shadow-text) !important;}
.tablet-only\:text-shadow-none{text-shadow:none !important;}
.tablet-only\:select-none{-webkit-user-select:none !important;-moz-user-select:none !important;user-select:none !important;}
.tablet-only\:select-text{-webkit-user-select:text !important;-moz-user-select:text !important;user-select:text !important;}
.tablet-only\:select-all{-webkit-user-select:all !important;-moz-user-select:all !important;user-select:all !important;}
.tablet-only\:select-auto{-webkit-user-select:auto !important;-moz-user-select:auto !important;user-select:auto !important;}
.tablet-only\:cursor-auto{cursor:auto !important;}
.tablet-only\:cursor-pointer{cursor:pointer !important;}
.tablet-only\:cursor-wait{cursor:wait !important;}
.tablet-only\:cursor-move{cursor:move !important;}
.tablet-only\:cursor-not-allowed{cursor:not-allowed !important;}
.tablet-only\:pointer-events-auto{pointer-events:auto !important;}
.tablet-only\:pointer-events-none{pointer-events:none !important;}
}