/*!
 * 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);
}