@charset "UTF-8";
/**
 * Tegel Lite - All Components
 * 
 * This file imports all Tegel Lite components.
 * Use this when you need most or all components in your project.
 * 
 * Usage:
 * <link rel="stylesheet" href="node_modules/@scania/tegel-lite/dist/scania-variables.css">
 * <link rel="stylesheet" href="node_modules/@scania/tegel-lite/dist/traton-variables.css">
 * <link rel="stylesheet" href="node_modules/@scania/tegel-lite/dist/global.css">
 * <link rel="stylesheet" href="node_modules/@scania/tegel-lite/dist/components.css">
 */
.tl-accordion {
  /* Border & Background */
  --accordion-border: var(--color-foreground-border-discrete);
  --accordion-background: transparent;
  /* Hover backgrounds */
  --accordion-background-hover-primary: var(--color-background-layer-01);
  --accordion-background-hover-secondary: var(--color-background-layer-02);
  --accordion-background-hover: var(--accordion-background-hover-primary);
  /* Focus & Active states */
  --accordion-background-focus: var(--color-background-layer-01);
  --accordion-background-active: var(--color-background-layer-02);
  /* Text & Icon colours */
  --accordion-text: var(--color-foreground-text-strong);
  --accordion-icon: var(--color-foreground-icon-strong);
  /* Borders & Disabled */
  --accordion-border-focus: var(--color-foreground-border-strong);
  --accordion-text-disabled: var(--color-foreground-text-disabled);
}

/* Mode variants */
.tl-mode-light .tl-accordion--primary,
.tl-mode-light .tl-accordion .tl-accordion--primary {
  background-color: var(--accordion-background-hover-secondary);
  --accordion-background-hover: var(--accordion-background-hover-primary);
}

.tl-mode-light .tl-accordion--secondary,
.tl-mode-light .tl-accordion .tl-accordion--secondary {
  background-color: var(--accordion-background-hover-primary);
  --accordion-background-hover: var(--accordion-background-hover-secondary);
}

.tl-mode-dark .tl-accordion--primary,
.tl-mode-dark .tl-accordion .tl-accordion--primary {
  background-color: var(--accordion-background-hover-secondary);
  --accordion-background-hover: var(--accordion-background-hover-primary);
}

.tl-mode-dark .tl-accordion--secondary,
.tl-mode-dark .tl-accordion .tl-accordion--secondary {
  background-color: var(--accordion-background-hover-primary);
  --accordion-background-hover: var(--accordion-background-hover-secondary);
}

/* Typography Usage mixins */
.tl-accordion__item {
  box-sizing: border-box;
}
.tl-accordion__item * {
  box-sizing: border-box;
}
.tl-accordion__item {
  list-style: none;
  color: var(--accordion-text);
  position: relative;
  border-top: 1px solid var(--accordion-border);
  width: 100%;
}
.tl-accordion__item button {
  border: none;
}
.tl-accordion__item:last-child {
  margin-bottom: -1px;
  border-bottom: 1px solid var(--accordion-border);
}
.tl-accordion__item:hover:not(.tl-accordion__item--expanded):not(.tl-accordion__item--disabled) .tl-accordion__header-icon-start,
.tl-accordion__item:hover:not(.tl-accordion__item--expanded):not(.tl-accordion__item--disabled) .tl-accordion__header-icon-end {
  background-color: var(--accordion-background-hover);
}
.tl-accordion__item:active:not(.tl-accordion__item--disabled) .tl-accordion__header-icon-start,
.tl-accordion__item:active:not(.tl-accordion__item--disabled) .tl-accordion__header-icon-end {
  background-color: var(--accordion-background-active);
}
.tl-accordion__item {
  /* Focus state  */
}
.tl-accordion__item:has(.tl-accordion__header-icon-start:focus-visible), .tl-accordion__item:has(.tl-accordion__header-icon-end:focus-visible) {
  outline: 2px solid var(--color-foreground-border-accent-focus);
  outline-offset: 1px;
  background-color: var(--accordion-background-focus);
}
.tl-accordion__item--disabled:hover, .tl-accordion__item--disabled:active {
  background-color: transparent;
}
.tl-accordion__item--less-padding .tl-accordion__panel {
  padding-right: var(--tds-spacing-element-16);
}

.tl-accordion__title {
  flex-grow: 2;
  text-align: left;
  color: var(--color-foreground-text-strong);
}
.tl-accordion__item--disabled .tl-accordion__title {
  color: var(--accordion-text-disabled);
}
.tl-accordion__item--icon-start .tl-accordion__header-icon-start .tl-accordion__title {
  order: 1;
}

.tl-accordion__panel {
  cursor: default;
  padding: var(--tds-spacing-element-8) var(--tds-spacing-layout-64) var(--tds-spacing-element-32) var(--tds-spacing-element-16);
  display: none;
  font-family: var(--detail-03-font-family);
  font-size: var(--detail-03-font-size);
  line-height: var(--detail-03-line-height);
  font-weight: var(--detail-03-font-weight);
  letter-spacing: var(--detail-03-letter-spacing);
  text-transform: var(--detail-03-text-transform);
}
.tl-accordion__panel p {
  margin: 0;
  padding: 0;
}
.tl-accordion__item--disabled .tl-accordion__panel {
  color: var(--accordion-text-disabled);
  cursor: not-allowed;
}
.tl-accordion__item--expanded .tl-accordion__panel {
  display: block;
  padding-bottom: 31px;
}

.tl-accordion__header-icon-start,
.tl-accordion__header-icon-end {
  box-sizing: border-box;
}
.tl-accordion__header-icon-start *,
.tl-accordion__header-icon-end * {
  box-sizing: border-box;
}
.tl-accordion__header-icon-start,
.tl-accordion__header-icon-end {
  font-family: var(--headline-07-font-family);
  font-size: var(--headline-07-font-size);
  line-height: var(--headline-07-line-height);
  font-weight: var(--headline-07-font-weight);
  letter-spacing: var(--headline-07-letter-spacing);
  text-transform: var(--headline-07-text-transform);
  cursor: pointer;
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--tds-spacing-element-16);
  background-color: var(--accordion-background);
  position: relative;
}
.tl-accordion__header-icon-start::after,
.tl-accordion__header-icon-end::after {
  content: "";
  width: 16px;
  height: 16px;
  background-color: var(--accordion-icon);
  mask-image: var(--icon-chevron_down-svg);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  transform-origin: center;
  transition: transform 0.15s ease-in-out;
  flex-shrink: 0;
}
.tl-accordion__item--disabled .tl-accordion__header-icon-start::after,
.tl-accordion__item--disabled .tl-accordion__header-icon-end::after {
  background-color: var(--accordion-text-disabled);
}
.tl-accordion__item--expanded .tl-accordion__header-icon-start::after,
.tl-accordion__item--expanded .tl-accordion__header-icon-end::after {
  transform: rotate(180deg);
}
.tl-accordion__header-icon-start button,
.tl-accordion__header-icon-end button {
  all: unset;
  box-sizing: border-box;
}
.tl-accordion__header-icon-start button *,
.tl-accordion__header-icon-end button * {
  box-sizing: border-box;
}
.tl-accordion__header-icon-start button,
.tl-accordion__header-icon-end button {
  font-family: var(--headline-07-font-family);
  font-size: var(--headline-07-font-size);
  line-height: var(--headline-07-line-height);
  font-weight: var(--headline-07-font-weight);
  letter-spacing: var(--headline-07-letter-spacing);
  text-transform: var(--headline-07-text-transform);
  cursor: pointer;
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--tds-spacing-element-16);
  background-color: var(--accordion-background);
}
.tl-accordion__header-icon-start .tl-accordion__icon,
.tl-accordion__header-icon-end .tl-accordion__icon {
  transform-origin: center;
  transition: transform 0.15s ease-in-out;
  color: var(--accordion-icon);
}
.tl-accordion__item--disabled .tl-accordion__header-icon-start,
.tl-accordion__item--disabled .tl-accordion__header-icon-end {
  color: var(--accordion-text-disabled);
  cursor: not-allowed;
}
.tl-accordion__item--expanded .tl-accordion__header-icon-start,
.tl-accordion__item--expanded .tl-accordion__header-icon-end {
  background-color: var(--color-background-surface-100);
}
.tl-accordion__header-icon-start:active,
.tl-accordion__header-icon-end:active {
  outline: none;
}
.tl-accordion__header-icon-start:focus, .tl-accordion__header-icon-start:focus-visible, .tl-accordion__header-icon-start:focus-within,
.tl-accordion__header-icon-end:focus,
.tl-accordion__header-icon-end:focus-visible,
.tl-accordion__header-icon-end:focus-within {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

.tl-accordion__header-icon-start::after {
  order: 0;
  margin-right: var(--tds-spacing-element-16);
}
.tl-accordion__item--expanded .tl-accordion__header-icon-start::after {
  margin-left: 0;
  margin-right: var(--tds-spacing-element-16);
}

.tl-accordion__header-icon-end::after {
  margin-left: var(--tds-spacing-element-32);
}
.tl-accordion__item--expanded .tl-accordion__header-icon-end::after {
  margin-right: 0;
  margin-left: var(--tds-spacing-element-32);
}

.tl-accordion {
  display: block;
  box-sizing: border-box;
}
.tl-accordion * {
  box-sizing: border-box;
}
.tl-accordion {
  width: 100%;
  background-color: var(--accordion-background);
}
.tl-accordion--hide-last-border .tl-accordion__item:last-child {
  border-bottom: none;
}

.tl-accordion__header-icon-start,
.tl-accordion__header-icon-end {
  position: relative;
}

/**
 * Do not edit directly, this file was auto-generated.
 */
.tl-badge,
tds-badge {
  --component-badge-text: var(--color-brand-neutral-white);
  --component-badge-background: var(--color-system-danger-subtle);
}

.traton .tl-badge,
.traton tds-badge {
  --component-badge-text: var(--color-brand-neutral-black);
  --component-badge-background: var(--color-system-warning-subtle);
}

.tl-badge {
  --badge-background-color: var(--component-badge-background);
  --badge-color-text: var(--component-badge-text);
}

.tl-badge {
  box-sizing: border-box;
}
.tl-badge * {
  box-sizing: border-box;
}
.tl-badge {
  display: block;
  border-radius: 12px;
  background-color: var(--badge-background-color);
  text-align: center;
}
.tl-badge--sm {
  height: 8px;
  width: 8px;
  line-height: 8px;
}
.tl-badge--lg {
  height: 20px;
  line-height: 20px;
  width: 20px;
}
.tl-badge--pill {
  display: inline-block;
  width: unset;
  padding-left: 8px;
  padding-right: 8px;
}
.tl-badge--hidden {
  display: none;
}

.tl-badge__text {
  font-size: 12px;
  color: var(--badge-color-text);
  font-family: var(--detail-01-font-family);
  font-weight: bold;
}

:root,
.tl-mode-light,
.tl-mode-dark {
  --banner-text: var(--color-foreground-text-strong);
  --banner-close-icon: var(--color-foreground-icon-strong);
  --banner-background-default: var(--color-background-layer-01);
  --banner-prefix-default: var(--color-foreground-icon-strong);
  --banner-background-info: var(--color-system-info-discrete);
  --banner-prefix-info: var(--color-system-info-default);
  --banner-background-error: var(--color-system-danger-discrete);
  --banner-prefix-error: var(--color-system-danger-default);
}

.tl-banner {
  display: flex;
  background-color: var(--banner-background-default);
  padding: 16px 20px;
  position: relative;
}
.tl-banner--error {
  background-color: var(--banner-background-error);
}
.tl-banner--information {
  background-color: var(--banner-background-info);
}
.tl-banner--error .tl-banner__icon {
  color: var(--banner-prefix-error);
}
.tl-banner--information .tl-banner__icon {
  color: var(--banner-prefix-info);
}

.tl-banner__icon {
  padding-right: 12px;
  color: var(--banner-prefix-default);
  flex-shrink: 0;
}

.tl-banner__content {
  color: var(--banner-text);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.tl-banner__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tl-banner__header {
  font-family: var(--headline-06-font-family);
  font-size: var(--headline-06-font-size);
  line-height: var(--headline-06-line-height);
  font-weight: var(--headline-06-font-weight);
  letter-spacing: var(--headline-06-letter-spacing);
  text-transform: var(--headline-06-text-transform);
  margin: 0;
}

.tl-banner__subheader {
  display: block;
  font-family: var(--detail-02-font-family);
  font-size: var(--detail-02-font-size);
  line-height: var(--detail-02-line-height);
  font-weight: var(--detail-02-font-weight);
  letter-spacing: var(--detail-02-letter-spacing);
  text-transform: var(--detail-02-text-transform);
  margin: 0;
}

.tl-banner__actions {
  display: block;
  width: fit-content;
  padding-top: 12px;
}

.tl-banner__close {
  color: var(--banner-close-icon);
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 20px;
  width: 20px;
}
.tl-banner__close:focus-visible {
  outline: 2px solid var(--tds-focus-outline-color);
  box-shadow: 0 0 0 1px var(--tds-white);
  outline-offset: 1px;
  z-index: 1;
}

.tl-block {
  --block-background: var(--color-background-layer-01);
  --block-text-color: var(--color-foreground-text-strong);
  --block-background-mode-primary: var(--color-background-layer-01);
  --block-background-mode-secondary: var(--color-background-layer-02);
  --block-background-even: var(--color-background-layer-01);
  --block-background-odd: var(--color-background-layer-02);
  --block-padding: 16px;
  --block-border-radius: 4px;
}

.tl-block {
  box-sizing: border-box;
}
.tl-block * {
  box-sizing: border-box;
}
.tl-block {
  font-family: var(--detail-01-font-family);
  font-size: var(--detail-01-font-size);
  line-height: var(--detail-01-line-height);
  font-weight: var(--detail-01-font-weight);
  letter-spacing: var(--detail-01-letter-spacing);
  text-transform: var(--detail-01-text-transform);
  background-color: var(--block-background);
  color: var(--block-text-color);
  border-radius: var(--block-border-radius);
  padding: var(--block-padding);
}
.tl-block h2 {
  font-family: var(--headline-02-font-family);
  font-size: var(--headline-02-font-size);
  line-height: var(--headline-02-line-height);
  font-weight: var(--headline-02-font-weight);
  letter-spacing: var(--headline-02-letter-spacing);
  text-transform: var(--headline-02-text-transform);
}
.tl-block p {
  font-family: var(--body-01-font-family);
  font-size: var(--body-01-font-size);
  line-height: var(--body-01-line-height);
  font-weight: var(--body-01-font-weight);
  letter-spacing: var(--body-01-letter-spacing);
  text-transform: var(--body-01-text-transform);
}
.tl-block--primary {
  background-color: var(--block-background-mode-primary);
}
.tl-block--secondary {
  background-color: var(--block-background-mode-secondary);
}

.tl-block--primary .tl-block {
  background-color: var(--block-background-odd);
}

.tl-block--primary .tl-block .tl-block {
  background-color: var(--block-background-even);
}

.tl-block--primary .tl-block .tl-block .tl-block {
  background-color: var(--block-background-odd);
}

.tl-block--primary .tl-block .tl-block .tl-block .tl-block {
  background-color: var(--block-background-even);
}

.tl-block--secondary .tl-block {
  background-color: var(--block-background-even);
}

.tl-block--secondary .tl-block .tl-block {
  background-color: var(--block-background-odd);
}

.tl-block--secondary .tl-block .tl-block .tl-block {
  background-color: var(--block-background-even);
}

.tl-block--secondary .tl-block .tl-block .tl-block .tl-block {
  background-color: var(--block-background-odd);
}

.tl-block--primary .tl-block h3,
.tl-block--secondary .tl-block h3 {
  font-family: var(--headline-04-font-family);
  font-size: var(--headline-04-font-size);
  line-height: var(--headline-04-line-height);
  font-weight: var(--headline-04-font-weight);
  letter-spacing: var(--headline-04-letter-spacing);
  text-transform: var(--headline-04-text-transform);
}
.tl-block--primary .tl-block p,
.tl-block--secondary .tl-block p {
  font-family: var(--detail-03-font-family);
  font-size: var(--detail-03-font-size);
  line-height: var(--detail-03-line-height);
  font-weight: var(--detail-03-font-weight);
  letter-spacing: var(--detail-03-letter-spacing);
  text-transform: var(--detail-03-text-transform);
}

.tl-block--primary .tl-block .tl-block h4,
.tl-block--secondary .tl-block .tl-block h4 {
  font-family: var(--headline-06-font-family);
  font-size: var(--headline-06-font-size);
  line-height: var(--headline-06-line-height);
  font-weight: var(--headline-06-font-weight);
  letter-spacing: var(--headline-06-letter-spacing);
  text-transform: var(--headline-06-text-transform);
}
.tl-block--primary .tl-block .tl-block p,
.tl-block--secondary .tl-block .tl-block p {
  font-family: var(--detail-03-font-family);
  font-size: var(--detail-03-font-size);
  line-height: var(--detail-03-line-height);
  font-weight: var(--detail-03-font-weight);
  letter-spacing: var(--detail-03-letter-spacing);
  text-transform: var(--detail-03-text-transform);
}

.tl-breadcrumbs {
  --breadcrumb-label: var(--color-foreground-text-strong);
  --breadcrumb-hover: var(--color-foreground-text-strong);
  --breadcrumb-current: var(--color-foreground-text-subtle);
  --breadcrumb-separator-color: var(--color-foreground-text-strong);
  --breadcrumb-separator-margin: 4px;
  --breadcrumb-separator-width: 4px;
  --breadcrumb-separator-height: 8px;
  --breadcrumb-focus-outline-color: var(--color-foreground-border-accent-focus);
  --breadcrumb-focus-outline-width: 2px;
}

.tl-breadcrumbs {
  box-sizing: border-box;
}
.tl-breadcrumbs * {
  box-sizing: border-box;
}
.tl-breadcrumbs ol {
  font-family: var(--detail-02-font-family);
  font-size: var(--detail-02-font-size);
  line-height: var(--detail-02-line-height);
  font-weight: var(--detail-02-font-weight);
  letter-spacing: var(--detail-02-letter-spacing);
  text-transform: var(--detail-02-text-transform);
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
}
.tl-breadcrumbs li {
  display: inline-block;
}
.tl-breadcrumbs li::after {
  content: "›";
  color: var(--breadcrumb-separator-color);
  margin-right: var(--breadcrumb-separator-margin);
  margin-left: var(--breadcrumb-separator-margin);
  display: inline-block;
  width: var(--breadcrumb-separator-width);
  height: var(--breadcrumb-separator-height);
}
.tl-breadcrumbs li:has([aria-current])::after {
  display: none;
}
.tl-breadcrumbs a {
  font-family: var(--detail-02-font-family);
  font-size: var(--detail-02-font-size);
  line-height: var(--detail-02-line-height);
  font-weight: var(--detail-02-font-weight);
  letter-spacing: var(--detail-02-letter-spacing);
  text-transform: var(--detail-02-text-transform);
  color: var(--breadcrumb-label);
  text-decoration: none;
  transition: color 0.2s ease;
}
.tl-breadcrumbs a:hover {
  color: var(--breadcrumb-hover);
  text-decoration: underline;
}
.tl-breadcrumbs a:focus-visible {
  outline: var(--breadcrumb-focus-outline-width) solid var(--breadcrumb-focus-outline-color);
}
.tl-breadcrumbs a[aria-current=page] {
  pointer-events: none;
  cursor: default;
  color: var(--breadcrumb-current);
}
.tl-breadcrumbs a[aria-current=page]:hover {
  text-decoration: none;
  cursor: not-allowed;
}

/**
 * Do not edit directly, this file was auto-generated.
 */
.tl-button,
tds-button,
.tl-mode-light .tl-button,
.tds-mode-light tds-button {
  --component-button-primary-text: var(--color-brand-neutral-white);
}

.scania .tds-mode-dark tds-button,
.scania .tl-mode-dark .tl-button {
  --component-button-primary-text: var(--color-brand-neutral-white);
}

.tds-mode-dark tds-button,
.tl-mode-dark .tl-button {
  --component-button-primary-text: var(--color-brand-neutral-black);
}

.tl-button {
  --button-transparent: transparent;
  --button-white: var(--color-brand-neutral-white);
  --button-black: var(--color-brand-neutral-black);
  --button-radius: var(--dimension-radius-for-surface-clickable);
  --button-sm-only-icon-padding: 11px;
  --button-md-only-icon-padding: 13px;
  --button-lg-only-icon-padding: 17px;
  --button-primary-background: var(--color-background-accent-primary-default);
  --button-primary-background-hover: var(--color-background-accent-primary-hover);
  --button-primary-background-active: var(--color-background-accent-primary-pressed);
  --button-primary-background-disabled: var(--color-background-accent-primary-disabled);
  --button-primary-color: var(--component-button-primary-text);
  --button-primary-color-disabled: var(--color-foreground-text-disabled);
  --button-primary-border-color: var(--button-transparent);
  --button-primary-border-color-disabled: var(--button-transparent);
  --button-primary-background-focus: var(--color-background-accent-primary-focus);
  --button-primary-color-focus: var(--component-button-primary-text);
  --button-primary-border-color-focus: var(--color-foreground-border-accent-focus);
  --button-primary-outline-color-focus: var(--color-foreground-border-accent-focus);
  --button-secondary-background: var(--button-transparent);
  --button-secondary-color: var(--color-foreground-text-strong);
  --button-secondary-border-color: var(--color-foreground-border-soft);
  --button-secondary-border-color-hover: var(--color-foreground-border-subtle);
  --button-secondary-border-color-active: var(--color-foreground-border-strong);
  --button-secondary-background-disabled: var(--button-transparent);
  --button-secondary-color-disabled: var(--color-foreground-text-disabled);
  --button-secondary-border-color-disabled: var(--color-foreground-border-discrete);
  --button-secondary-background-focus: var(--button-transparent);
  --button-secondary-color-focus: var(--color-foreground-text-strong);
  --button-secondary-border-color-focus: var(--color-foreground-border-accent-focus);
  --button-secondary-outline-color-focus: var(--color-foreground-border-accent-focus);
  --button-ghost-background: var(--button-transparent);
  --button-ghost-color: var(--color-foreground-text-strong);
  --button-ghost-border-color: var(--button-transparent);
  --button-ghost-border-color-hover: var(--color-foreground-border-subtle);
  --button-ghost-border-color-active: var(--color-foreground-border-strong);
  --button-ghost-color-disabled: var(--color-foreground-text-disabled);
  --button-ghost-border-color-disabled: var(--button-transparent);
  --button-ghost-background-focus: var(--button-transparent);
  --button-ghost-color-focus: var(--color-foreground-text-strong);
  --button-ghost-border-color-focus: var(--color-foreground-border-accent-focus);
  --button-ghost-outline-color-focus: var(--color-foreground-border-accent-focus);
  --button-danger-background: var(--color-background-accent-danger-default);
  --button-danger-color: var(--button-white);
  --button-danger-border-color: var(--button-transparent);
  --button-danger-background-hover: var(--color-background-accent-danger-hover);
  --button-danger-background-active: var(--color-background-accent-danger-pressed);
  --button-danger-background-disabled: var(--color-background-accent-danger-disabled);
  --button-danger-color-disabled: var(--color-foreground-text-disabled);
  --button-danger-border-color-disabled: var(--button-transparent);
  --button-danger-border-color-active: var(--color-background-accent-danger-pressed);
  --button-danger-background-focus: var(--color-background-accent-danger-focus);
  --button-danger-color-focus: var(--button-white);
  --button-danger-border-color-focus: var(--button-transparent);
  --button-danger-outline-color-focus: var(--color-foreground-border-accent-focus);
}
.tl-button .tl-button--primary {
  --button-primary-background-disabled: var(--color-background-accent-primary-disabled);
  --button-danger-background-disabled: var(--color-background-accent-danger-disabled);
}
.tl-button .tl-button--secondary {
  --button-primary-background-disabled: var(--button-white);
  --button-danger-background-disabled: var(--button-white);
}

.scania .tl-button {
  --button-outline-width: 2px;
}

.traton .tl-button {
  --button-outline-width: 4px;
}

/* Base button styles */
.tl-button {
  box-sizing: border-box;
}
.tl-button * {
  box-sizing: border-box;
}
.tl-button {
  font-family: var(--detail-02-font-family);
  font-size: var(--detail-02-font-size);
  line-height: var(--detail-02-line-height);
  font-weight: var(--detail-02-font-weight);
  letter-spacing: var(--detail-02-letter-spacing);
  text-transform: var(--detail-02-text-transform);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  border-radius: var(--button-radius);
  border: 1px solid var(--button-secondary-border-color);
  box-shadow: none;
  position: relative;
  text-decoration: none;
  cursor: pointer;
}
.tl-button:focus-visible {
  outline: var(--button-outline-width) solid var(--color-foreground-border-accent-focus);
  outline-offset: calc(var(--button-outline-width) * -1);
}
.tl-button {
  /* Variants */
}
.tl-button--primary {
  background-color: var(--button-primary-background);
  color: var(--button-primary-color);
  border-color: var(--button-primary-border-color);
}
.tl-button--primary:hover:not(:disabled) {
  background-color: var(--button-primary-background-hover);
}
.tl-button--primary:disabled {
  background-color: var(--button-primary-background-disabled);
  color: var(--button-primary-color-disabled);
  border-color: var(--button-primary-border-color-disabled);
  cursor: not-allowed;
  opacity: 0.6;
}
.tl-button--primary:focus-visible:not(:disabled) {
  background: var(--button-primary-background-focus);
  border-color: var(--button-primary-border-color-focus);
  color: var(--button-primary-color-focus);
  outline-color: var(--button-primary-outline-color-focus);
}
.tl-button--primary:active:not(:disabled):focus-visible {
  outline: none;
  outline-offset: none;
}
.tl-button--primary:active:not(:disabled) {
  background-color: var(--button-primary-background-active);
  border-color: var(--button-primary-background-active);
}
.tl-button--secondary {
  background-color: var(--button-secondary-background);
  color: var(--button-secondary-color);
  border-color: var(--button-secondary-border-color);
}
.tl-button--secondary:hover:not(:disabled) {
  border-color: var(--button-secondary-border-color-hover);
}
.tl-button--secondary:disabled {
  background-color: var(--button-secondary-background-disabled);
  color: var(--button-secondary-color-disabled);
  border-color: var(--button-secondary-border-color-disabled);
  cursor: not-allowed;
  opacity: 0.6;
}
.tl-button--secondary:focus-visible:not(:disabled) {
  background: var(--button-secondary-background-focus);
  border-color: var(--button-secondary-border-color-focus);
  color: var(--button-secondary-color-focus);
  outline-color: var(--button-secondary-outline-color-focus);
}
.tl-button--secondary:active:not(:disabled):focus-visible {
  outline: none;
}
.tl-button--secondary:active:not(:disabled) {
  border-color: var(--button-secondary-border-color-active);
}
.tl-button--ghost {
  background-color: var(--button-ghost-background);
  color: var(--button-ghost-color);
  border-color: var(--button-ghost-border-color);
}
.tl-button--ghost:hover:not(:disabled) {
  border-color: var(--button-ghost-border-color-hover);
}
.tl-button--ghost:disabled {
  color: var(--button-ghost-color-disabled);
  cursor: not-allowed;
  opacity: 0.6;
}
.tl-button--ghost:focus-visible:not(:disabled) {
  background: var(--button-ghost-background-focus);
  border-color: var(--button-ghost-border-color-focus);
  color: var(--button-ghost-color-focus);
  outline-color: var(--button-ghost-outline-color-focus);
}
.tl-button--ghost:active:not(:disabled):focus-visible {
  outline: none;
}
.tl-button--ghost:active:not(:disabled) {
  border-color: var(--button-ghost-border-color-active);
}
.tl-button--danger {
  background-color: var(--button-danger-background);
  color: var(--button-danger-color);
  border-color: var(--button-danger-border-color);
}
.tl-button--danger:hover:not(:disabled) {
  background-color: var(--button-danger-background-hover);
}
.tl-button--danger:disabled {
  background-color: var(--button-danger-background-disabled);
  color: var(--button-danger-color-disabled);
  border-color: var(--button-danger-border-color-disabled);
  cursor: not-allowed;
  opacity: 0.6;
}
.tl-button--danger:focus-visible:not(:disabled) {
  background: var(--button-danger-background-focus);
  border-color: var(--button-danger-border-color-focus);
  color: var(--button-danger-color-focus);
  outline-color: var(--button-danger-outline-color-focus);
}
.tl-button--danger:active:not(:disabled):focus-visible {
  outline: none;
}
.tl-button--danger:active:not(:disabled) {
  background-color: var(--button-danger-background-active);
  border-color: var(--button-danger-border-color-active);
}
.tl-button {
  /* Sizes */
}
.tl-button--xs {
  padding: var(--tds-spacing-element-4) var(--tds-spacing-element-8);
  height: 24px;
}
.tl-button--sm {
  padding: var(--tds-spacing-element-12);
  height: 40px;
}
.tl-button--md {
  padding: var(--tds-spacing-element-16);
  height: 48px;
}
.tl-button--lg {
  padding: var(--tds-spacing-element-20);
  height: 56px;
}
.tl-button {
  /* Icon specific styles */
}
.tl-button--icon.tl-button--sm {
  padding: 10px var(--tds-spacing-element-12);
}
.tl-button--icon.tl-button--sm .tl-icon {
  margin-left: var(--tds-spacing-element-12);
}
.tl-button--icon.tl-button--md {
  padding: 14px var(--tds-spacing-element-16);
}
.tl-button--icon.tl-button--md .tl-icon {
  margin-left: var(--tds-spacing-element-16);
}
.tl-button--icon.tl-button--lg {
  padding: 18px var(--tds-spacing-element-20);
}
.tl-button--icon.tl-button--lg .tl-icon {
  margin-left: var(--tds-spacing-element-20);
}
.tl-button {
  /* Only icon specific styles */
}
.tl-button--only-icon.tl-button--sm {
  padding: var(--button-sm-only-icon-padding);
}
.tl-button--only-icon.tl-button--sm .tl-icon {
  margin-left: 0;
}
.tl-button--only-icon.tl-button--md {
  padding: var(--button-md-only-icon-padding);
}
.tl-button--only-icon.tl-button--md .tl-icon {
  margin-left: 0;
}
.tl-button--only-icon.tl-button--lg {
  padding: var(--button-lg-only-icon-padding);
}
.tl-button--only-icon.tl-button--lg .tl-icon {
  margin-left: 0;
}
.tl-button {
  /* Full width */
}
.tl-button--full-width {
  width: 100%;
}

/**
 * Do not edit directly, this file was auto-generated.
 */
.tl-card,
tds-card {
  --component-card-secondary: var(--color-background-layer-02);
  --component-card-primary: var(--color-background-layer-01);
  --component-card-padding-padding: var(--scania-unit-16);
}

.tl-card {
  --card-background: var(--tds-white);
  --card-background-primary: var(--component-card-primary);
  --card-background-secondary: var(--component-card-secondary);
  --card-box-primary: 0 3px 3px rgb(0 0 0 / 15%), 0 -1px 1px rgb(0 0 0 / 1%);
  --card-box-secondary: 0 -1px 1px rgb(0 0 0 / 5%), 0 3px 3px rgb(0 0 0 / 10%);
  --card-box: var(--card-box-primary);
  --card-box-hover: 0 -1px 1px rgb(0 0 0 / 5%), 0 3px 3px rgb(0 0 0 / 20%);
  --card-box-pressed: 0 -1px 1px rgb(0 0 0 / 5%), 0 1px 3px rgb(0 0 0 / 20%);
  --card-headline: var(--color-foreground-text-strong);
  --card-sub-headline: var(--color-foreground-text-subtle);
  --card-body-color: var(--color-foreground-text-defined);
  --card-divider: var(--color-foreground-border-discrete);
  --card-icon-color: var(--color-foreground-icon-strong);
  /* Paddings */
  --card-body-padding: 0 16px;
  --card-header-padding: 16px;
  --card-slotted-padding: 16px;
  --card-divider-margin: 16px 16px 0;
}
.tl-card--primary {
  --card-box: var(--card-box-primary);
}
.tl-card.tl-card--mode-variant-secondary {
  --card-box: var(--card-box-secondary);
}

.scania .tl-card {
  /* Paddings */
  --card-body-padding: 0 16px;
  --card-header-padding: 16px;
  --card-slotted-padding: 16px;
  --card-divider-margin: 16px 16px 0;
}
.scania .tl-card--primary {
  --card-box: var(--card-box-primary);
}
.scania .tl-card--secondary {
  --card-box: var(--card-box-primary);
}

.traton .tl-card {
  --card-box: none;
  --card-background: transparent;
  --card-box-hover: none;
  --card-box-pressed: none;
  /* Paddings and margins */
  --card-body-padding: 0;
  --card-header-padding: 16px 16px 16px 0;
  --card-slotted-padding: 16px 16px 16px 0;
  --card-divider-margin: 16px 0 0;
}
.traton .tl-card--primary {
  --card-box: none;
  --card-background: transparent;
}
.traton .tl-card--secondary {
  --card-box: none;
  --card-background: transparent;
}

/* Dark mode */
.tl-mode-dark {
  --card-background-primary: var(--tds-grey-900);
  --card-background-secondary: var(--tds-grey-850);
}
.tl-mode-dark .tl-card {
  --card-background: var(--card-background-primary);
}
.tl-mode-dark .tl-card--primary {
  --card-box: var(--card-box-primary);
  --card-background: var(--card-background-primary);
}
.tl-mode-dark .tl-card--secondary {
  --card-box: var(--card-box-primary);
  --card-background: var(--card-background-secondary);
}

.traton .tl-mode-dark .tl-card--primary {
  --card-background: transparent;
}
.traton .tl-mode-dark .tl-card--secondary {
  --card-background: transparent;
}

.tl-card {
  box-sizing: border-box;
}
.tl-card * {
  box-sizing: border-box;
}
.tl-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  box-shadow: var(--card-box);
  background-color: var(--card-background);
  border-radius: 4px;
  overflow: hidden;
}
.tl-card--clickable {
  width: 100%;
  border: none;
  text-align: left;
  padding: 0;
}
.tl-card--clickable:focus-visible {
  outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
  box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
  outline-offset: 1px;
}
.tl-card--clickable:active {
  box-shadow: var(--card-box-pressed);
}
.tl-card--clickable:hover {
  box-shadow: var(--card-box-hover);
  cursor: pointer;
}
.tl-card--stretch {
  height: 100%;
  width: 100%;
}

.tl-card__header {
  font-family: var(--headline-06-font-family);
  font-size: var(--headline-06-font-size);
  line-height: var(--headline-06-line-height);
  font-weight: var(--headline-06-font-weight);
  letter-spacing: var(--headline-06-letter-spacing);
  text-transform: var(--headline-06-text-transform);
  padding: var(--card-header-padding);
  display: flex;
  align-items: center;
}
.tl-card__header--below {
  padding-top: 16px;
}

.tl-card__thumbnail {
  inline-size: 36px;
  block-size: 36px;
  border-radius: 100%;
  margin-right: 16px;
}

.tl-card__headings {
  display: flex;
  flex-direction: column;
  inline-size: 100%;
  gap: 4px;
}

.tl-card__title {
  color: var(--card-headline);
}

.tl-card__subtitle {
  color: var(--card-sub-headline);
}

.tl-card__image {
  inline-size: 100%;
  block-size: auto;
  display: block;
}

.tl-card__divider {
  display: block;
  margin: var(--card-divider-margin);
  background-color: var(--card-divider);
  block-size: 1px;
}

.tl-card__body {
  display: block;
  word-wrap: break-word;
}
.tl-card--stretch .tl-card__body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.tl-card__content {
  font-family: var(--detail-03-font-family);
  font-size: var(--detail-03-font-size);
  line-height: var(--detail-03-line-height);
  font-weight: var(--detail-03-font-weight);
  letter-spacing: var(--detail-03-letter-spacing);
  text-transform: var(--detail-03-text-transform);
  color: var(--card-body-color);
  padding: var(--card-body-padding);
  margin-bottom: 16px;
  margin-top: 16px;
  max-inline-size: 336px;
}
.tl-card--stretch .tl-card__body .tl-card__content {
  max-inline-size: unset;
  flex-grow: 1;
}
.tl-card--expandable .tl-card__body .tl-card__content {
  display: none;
}
.tl-card--expanded .tl-card__body .tl-card__content {
  display: block;
}

.tl-card__bottom-row {
  display: flex;
  padding: var(--card-slotted-padding);
  align-items: flex-end;
  align-self: stretch;
}

.tl-card__actions {
  display: flex;
  align-items: flex-end;
  flex: 1 0 0;
  align-self: stretch;
}

.tl-card--expandable .tl-card__body .tl-card__header .tl-icon {
  transition: transform 160ms ease-in-out, opacity 120ms ease-in-out;
}
.tl-card--expanded .tl-card__body .tl-card__header .tl-icon {
  transform: rotate(180deg);
}
.tl-card__bottom-row .tl-icon {
  color: var(--card-icon-color);
}

.tl-checkbox {
  --checkbox-label: var(--color-foreground-text-strong);
  --checkbox-label-disabled: var(--color-foreground-text-disabled);
  --checkbox-icon: var(--color-foreground-icon-strong);
  --checkbox-fill: var(--color-foreground-icon-inverse-strong);
  --checkbox-fill-disabled: var(--color-background-accent-primary-disabled);
  --checkbox-border: var(--color-foreground-border-strong);
  --checkbox-border-hover: var(--color-foreground-border-subtle);
  --checkbox-border-focus: var(--color-foreground-border-accent-focus);
  --checkbox-border-disabled: var(--color-foreground-border-discrete);
  --checkbox-background-opacity-hover: 0.12;
  --checkbox-background-opacity-focus: 0.24;
  --checkbox-background-img: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  --checkbox-background-img-indeterminate: url("data:image/svg+xml;utf8,<svg width='8' height='2' viewBox='0 0 8 2' fill='none' xmlns='http://www.w3.org/2000/svg'><rect y='0.5' width='8' height='1' rx='0.5' fill='%23ffffff'/></svg>");
  --checkbox-background-img-disabled: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%23b0b7c4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  --checkbox-background-img-indeterminate-disabled: url("data:image/svg+xml;utf8,<svg width='8' height='2' viewBox='0 0 8 2' fill='none' xmlns='http://www.w3.org/2000/svg'><rect y='0.5' width='8' height='1' rx='0.5' fill='%23b0b7c4'/></svg>");
}

.tl-mode-dark .tl-checkbox {
  --checkbox-background-img: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%230D0F13' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  --checkbox-background-img-indeterminate: url("data:image/svg+xml;utf8,<svg width='8' height='2' viewBox='0 0 8 2' fill='none' xmlns='http://www.w3.org/2000/svg'><rect y='0.5' width='8' height='1' rx='0.5' fill='%230D0F13'/></svg>");
  --checkbox-background-img-disabled: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%2356657A' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  --checkbox-background-img-indeterminate-disabled: url("data:image/svg+xml;utf8,<svg width='8' height='2' viewBox='0 0 8 2' fill='none' xmlns='http://www.w3.org/2000/svg'><rect y='0.5' width='8' height='1' rx='0.5' fill='%2356657A'/></svg>");
}

.scania .tl-checkbox {
  --checkbox-focus-width: 20px;
  --checkbox-focus-height: 20px;
  --checkbox-focus-left: 2px;
  --checkbox-focus-top: 2px;
}

.traton .tl-checkbox {
  --checkbox-focus-width: 22px;
  --checkbox-focus-height: 22px;
  --checkbox-focus-left: 1px;
  --checkbox-focus-top: 1px;
}

.tl-checkbox {
  box-sizing: border-box;
}
.tl-checkbox * {
  box-sizing: border-box;
}
.tl-checkbox {
  font-family: var(--detail-02-font-family);
  font-size: var(--detail-02-font-size);
  line-height: var(--detail-02-line-height);
  font-weight: var(--detail-02-font-weight);
  letter-spacing: var(--detail-02-letter-spacing);
  text-transform: var(--detail-02-text-transform);
  display: flex;
  align-items: center;
  color: var(--checkbox-label);
}
.tl-checkbox:has(:disabled) {
  cursor: not-allowed;
}

.tl-checkbox__input {
  appearance: none;
  outline: none;
  margin: 0;
  border: 0;
  border-radius: 2px;
  width: 24px;
  height: 24px;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  align-self: flex-start;
}
.tl-checkbox__input::before, .tl-checkbox__input::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
}
.tl-checkbox__input::before {
  width: 20px;
  height: 20px;
  left: 2px;
  top: 2px;
  border-radius: 4px;
}
.tl-checkbox__input::after {
  border: 1px solid var(--checkbox-border);
  background-color: var(--checkbox-fill);
  width: 16px;
  height: 16px;
  left: 4px;
  top: 4px;
  border-radius: 2px;
}
.tl-checkbox__input:not(:disabled):hover::before {
  background-color: var(--checkbox-border-hover);
}
.tl-checkbox__input:focus-visible::before {
  background-color: var(--checkbox-border-focus);
  transition: opacity 0.2s ease-in-out;
  width: var(--checkbox-focus-width);
  height: var(--checkbox-focus-height);
  left: var(--checkbox-focus-left);
  top: var(--checkbox-focus-top);
}
.tl-checkbox__input:hover:focus-visible::before {
  width: 20px;
  height: 20px;
  left: 2px;
  top: 2px;
  background-color: var(--checkbox-border-hover);
}
.tl-checkbox__input:disabled {
  cursor: not-allowed;
}
.tl-checkbox__input:disabled::after {
  border-color: var(--checkbox-border-disabled);
  background-color: var(--checkbox-fill-disabled);
}
.tl-checkbox__input:disabled:hover::before {
  display: none;
}
.tl-checkbox__input:checked::after {
  background-image: var(--checkbox-background-img);
  background-color: var(--checkbox-border);
  background-repeat: no-repeat;
  background-position: center;
  border-color: var(--checkbox-border);
}
.tl-checkbox__input:checked:not(:disabled):hover::after {
  border-color: var(--checkbox-border-hover);
}
.tl-checkbox__input:checked:disabled::after {
  background-image: var(--checkbox-background-img-disabled);
  background-color: var(--checkbox-fill-disabled);
  border-color: var(--checkbox-border-disabled);
}
.tl-checkbox__input:checked:focus-visible::before {
  background-color: var(--checkbox-border-focus);
}
.tl-checkbox__input--indeterminate::after {
  background-image: var(--checkbox-background-img-indeterminate);
  background-color: var(--checkbox-border);
  background-repeat: no-repeat;
  background-position: center;
  border-color: var(--checkbox-border);
}
.tl-checkbox__input--indeterminate:not(:disabled):hover::after {
  border-color: var(--checkbox-border-hover);
}
.tl-checkbox__input--indeterminate:disabled::after {
  background-image: var(--checkbox-background-img-indeterminate-disabled);
  background-color: var(--checkbox-fill-disabled);
  border-color: var(--checkbox-border-disabled);
}
.tl-checkbox__input--indeterminate:focus-visible::before {
  background-color: var(--checkbox-border-focus);
}

.tl-checkbox__label {
  color: var(--checkbox-label);
  padding-left: var(--tds-spacing-element-4);
  padding-top: var(--tds-spacing-element-4);
  padding-bottom: var(--tds-spacing-element-4);
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
}
.tl-checkbox:has(:disabled) .tl-checkbox__label {
  color: var(--checkbox-label-disabled);
  cursor: not-allowed;
}

.tl-checkbox__input--indeterminate::after {
  background-image: var(--checkbox-background-img-indeterminate);
  background-color: var(--checkbox-border);
  background-repeat: no-repeat;
  background-position: center;
  border-color: var(--checkbox-border);
}
.tl-checkbox__input--indeterminate:not(:disabled):hover::after {
  border-color: var(--checkbox-border-hover);
}
.tl-checkbox__input--indeterminate:disabled::after {
  background-image: var(--checkbox-background-img-indeterminate-disabled);
  background-color: var(--checkbox-fill-disabled);
  border-color: var(--checkbox-border-disabled);
}
.tl-checkbox__input--indeterminate:focus-visible::before {
  background-color: var(--checkbox-border-focus);
}

.tl-chip {
  --chip-text: var(--color-foreground-text-strong);
  --chip-text-active: var(--component-chip-foreground-inverse);
  --chip-background: var(--component-chip-color-default);
  --chip-background-active: var(--component-chip-color-selected);
  --chip-background-disabled: var(--component-chip-color-disabled);
  --chip-text-disabled: var(--color-foreground-text-disabled);
  --chip-text-checked-disabled: var(--component-chip-foreground-foreground-disabled-selected);
  --chip-background-active-hover: var(--component-chip-color-hover-on-selected);
  --chip-background-hover: var(--component-chip-color-hover);
  --chip-background-focus: var(--component-chip-color-focused);
  --chip-border-radius: var(--component-chip-border-radius);
  --chip-focused-on-selected: var(--component-chip-color-focused-on-selected);
  --component-chip-color-focused-on-selected: var(--color-system-info-subtle);
  --component-chip-color-disabled: var(--color-background-surface-100);
  --component-chip-color-focused: var(--color-background-layer-02);
  --component-chip-color-hover: var(--color-background-surface-600);
  --component-chip-color-selected: var(--color-brand-primary-400);
  --component-chip-color-disabled-selected: var(--color-brand-primary-400);
  --component-chip-color-hover-on-selected: var(--color-system-info-default);
  --component-chip-color-default: var(--color-background-surface-200);
  --component-chip-foreground-inverse: var(--color-foreground-text-inverse-strong);
  --component-chip-foreground-foreground-disabled-selected: var(
    --color-foreground-text-inverse-subtle
  );
  --component-chip-border-selected-focus-border: var(--color-system-info-default);
}

:root .tl-chip,
.scania .tl-chip {
  --component-chip-border-radius: 16px;
}
:root .tl-mode-light .tl-chip,
.scania .tl-mode-light .tl-chip {
  --component-chip-color-hover: var(--color-background-surface-300);
  --component-chip-foreground-foreground-disabled-selected: var(
    --color-foreground-text-inverse-subtle
  );
}
:root .tl-mode-dark .tl-chip,
.scania .tl-mode-dark .tl-chip {
  --component-chip-color-default: var(--color-background-surface-400);
  --component-chip-color-focused-on-selected: var(--color-system-info-discrete);
  --component-chip-color-hover-on-selected: var(--color-system-info-default);
  --component-chip-foreground-foreground-disabled-selected: var(--color-foreground-text-subtle);
  --component-chip-foreground-inverse: var(--color-foreground-text-strong);
}

.traton .tl-chip {
  --component-chip-border-radius: 2px;
}
.traton .tl-mode-light .tl-chip {
  --component-chip-color-default: var(--color-background-surface-200);
  --component-chip-color-selected: var(--color-background-surface-300);
  --component-chip-color-hover-on-selected: var(--color-background-surface-400);
  --component-chip-foreground-inverse: var(--color-foreground-text-strong);
  --component-chip-color-focused-on-selected: var(--component-chip-color-focused);
  --component-chip-foreground-foreground-disabled-selected: var(--color-background-surface-200);
}
.traton .tl-mode-dark .tl-chip {
  --component-chip-color-default: var(--color-background-surface-300);
  --component-chip-color-disabled: var(--color-background-surface-200);
  --component-chip-foreground-inverse: var(--color-foreground-text-inverse-strong);
  --component-chip-color-focused-on-selected: var(--color-background-surface-700);
  --component-chip-color-hover-on-selected: var(--color-background-surface-800);
}

.tl-chip {
  font-family: var(--detail-02-font-family);
  font-size: var(--detail-02-font-size);
  line-height: var(--detail-02-line-height);
  font-weight: var(--detail-02-font-weight);
  letter-spacing: var(--detail-02-letter-spacing);
  text-transform: var(--detail-02-text-transform);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--chip-border-radius);
  border: none;
  background-color: var(--chip-background);
  color: var(--chip-text);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  text-decoration: none;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out, outline-color 0.15s ease-in-out;
}
.tl-chip:hover {
  background-color: var(--chip-background-hover);
}
.tl-chip:focus-visible {
  outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
  box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
  outline-offset: 1px;
  background-color: var(--chip-background-focus);
}
.tl-chip--sm {
  padding: 0 12px;
  min-height: 24px;
  gap: 6px;
}
.tl-chip--lg {
  padding: 0 16px;
  min-height: 32px;
  gap: 8px;
}
.tl-chip--selected {
  background-color: var(--chip-background-active);
  color: var(--chip-text-active);
}
.tl-chip--selected:hover {
  background-color: var(--chip-background-active-hover);
}
.tl-chip--selected:focus-visible {
  outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
  box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
  outline-offset: 1px;
  background-color: var(--chip-focused-on-selected);
}
.tl-chip:disabled {
  cursor: not-allowed;
  pointer-events: none;
  background-color: var(--chip-background-disabled);
  color: var(--chip-text-disabled);
}
.tl-chip:disabled.tl-chip--selected {
  background-color: var(--chip-background-active);
  color: var(--chip-text-checked-disabled);
}
.tl-chip--lg.tl-chip--prefix:not(.tl-chip--suffix) {
  padding: 0 16px 0 8px;
}
.tl-chip--lg.tl-chip--suffix:not(.tl-chip--prefix) {
  padding: 0 8px 0 16px;
}
.tl-chip--lg.tl-chip--prefix.tl-chip--suffix {
  padding: 0 8px;
}
.tl-chip--sm.tl-chip--prefix:not(.tl-chip--suffix) {
  padding: 0 12px 0 6px;
}
.tl-chip--sm.tl-chip--suffix:not(.tl-chip--prefix) {
  padding: 0 6px 0 12px;
}
.tl-chip--sm.tl-chip--prefix.tl-chip--suffix {
  padding: 0 6px;
}

.tl-datetime {
  --datetime-background-primary: var(--color-background-layer-01);
  --datetime-background-secondary: var(--color-background-layer-02);
  --datetime-background: var(--datetime-background-primary);
  --datetime-text: var(--color-foreground-text-strong);
  --datetime-icon: var(--color-foreground-icon-strong);
  --datetime-placeholder: var(--color-foreground-text-subtle);
  --datetime-background-disabled-primary: var(--color-background-layer-01);
  --datetime-background-disabled-secondary: var(--color-background-layer-02);
  --datetime-background-disabled: var(--datetime-background-disabled-primary);
  --datetime-text-disabled: var(--color-foreground-text-disabled);
  --datetime-placeholder-disabled: var(--color-foreground-text-disabled);
  --datetime-label-disabled: var(--color-foreground-text-disabled);
  --datetime-icon-disabled: var(--color-foreground-text-disabled);
  --datetime-label: var(--color-foreground-text-strong);
  --datetime-label-inside: var(--color-foreground-text-strong);
  --datetime-placeholder-focus: var(--tds-grey-500);
  --datetime-highlight-bar: var(--color-foreground-border-accent-focus);
  --datetime-helper: var(--color-foreground-text-defined);
  --datetime-helper-error: var(--color-system-danger-default);
  --datetime-icon-error: var(--color-system-danger-default);
}
.tl-datetime--primary {
  --datetime-background: var(--datetime-background-primary);
  --datetime-background-disabled: var(--datetime-background-disabled-primary);
}
.tl-datetime--secondary {
  --datetime-background: var(--datetime-background-secondary);
  --datetime-background-disabled: var(--datetime-background-disabled-secondary);
}

.tl-datetime,
.scania .tl-datetime {
  /* Datetime: units */
  --datetime-border-radius: 4px 4px 0 0;
  /* Datetime: box-shadow */
  --datetime-box-shadow: 0 -1px 0 0 var(--color-foreground-border-soft);
  --datetime-box-shadow-hover: 0 -1px 0 0 var(--color-foreground-border-strong);
  --datetime-box-shadow-focus: 0 -2px 0 0 var(--color-foreground-border-accent-focus);
  --datetime-box-shadow-disabled: none;
  --datetime-box-shadow-error: 0 -1px 0 0 var(--color-system-danger-default);
  --datetime-box-shadow-error-hover: 0 -1px 0 0 var(--color-system-danger-default);
  --datetime-box-shadow-error-focus: 0 -2px 0 0 var(--color-system-danger-default);
  --datetime-highlight: var(--datetime-highlight-bar);
  --datetime-highlight-error: var(--color-system-danger-default);
  /* Datetime: border colors */
  --datetime-border-color-left: transparent;
  --datetime-border-color-right: transparent;
  --datetime-border-color-bottom: var(--color-foreground-border-soft);
  --datetime-border-color-top: transparent;
  /* Datetime: border colors on hover */
  --datetime-border-color-left-hover: transparent;
  --datetime-border-color-right-hover: transparent;
  --datetime-border-color-bottom-hover: var(--color-foreground-border-strong);
  --datetime-border-color-top-hover: transparent;
  /* Datetime: border colors on success */
  --datetime-border-color-left-success: transparent;
  --datetime-border-color-right-success: transparent;
  --datetime-border-color-bottom-success: var(--color-foreground-border-strong);
  --datetime-border-color-top-success: transparent;
  /* Datetime: border colors on focus */
  --datetime-border-color-left-focus: transparent;
  --datetime-border-color-right-focus: transparent;
  --datetime-border-color-bottom-focus: var(--color-foreground-border-strong);
  --datetime-border-color-top-focus: transparent;
  --datetime-outline-color-focus: none;
  /* Datetime: border colors on error */
  --datetime-border-color-left-error: transparent;
  --datetime-border-color-right-error: transparent;
  --datetime-border-color-bottom-error: var(--color-system-danger-default);
  --datetime-border-color-top-error: transparent;
  /* Datetime: bar colors */
  --datetime-bar-color-focus: var(--color-foreground-border-accent-focus);
  --datetime-bar-color-error: var(--color-system-danger-default);
  /* Datetime: disabled */
  --datetime-disabled-bottom-bar: transparent;
}

.traton .tl-datetime {
  /* Datetime: units */
  --datetime-border-radius: 4px 4px 4px 4px;
  /* Datetime: box-shadow */
  --datetime-box-shadow: 0 0 0 1px var(--color-foreground-border-soft);
  --datetime-box-shadow-hover: 0 0 0 1px var(--color-foreground-border-strong);
  --datetime-box-shadow-focus: 0 0 0 2px var(--color-foreground-border-accent-focus);
  --datetime-box-shadow-disabled: none;
  --datetime-box-shadow-error: 0 0 0 1px var(--color-system-danger-default);
  --datetime-box-shadow-error-hover: 0 0 0 1px var(--color-system-danger-default);
  --datetime-box-shadow-error-focus: 0 0 0 2px var(--color-system-danger-default);
  --datetime-highlight: transparent;
  --datetime-highlight-error: transparent;
  /* Datetime: border colors */
  --datetime-border-color-left: var(--color-foreground-border-soft);
  --datetime-border-color-right: var(--color-foreground-border-soft);
  --datetime-border-color-bottom: var(--color-foreground-border-soft);
  --datetime-border-color-top: var(--color-foreground-border-soft);
  /* Datetime: border colors on hover */
  --datetime-border-color-left-hover: var(--color-foreground-border-strong);
  --datetime-border-color-right-hover: var(--color-foreground-border-strong);
  --datetime-border-color-bottom-hover: var(--color-foreground-border-strong);
  --datetime-border-color-top-hover: var(--color-foreground-border-strong);
  /* Datetime: border colors on success */
  --datetime-border-color-left-success: var(--color-foreground-border-strong);
  --datetime-border-color-right-success: var(--color-foreground-border-strong);
  --datetime-border-color-bottom-success: var(--color-foreground-border-strong);
  --datetime-border-color-top-success: var(--color-foreground-border-strong);
  /* Datetime: border colors on focus */
  --datetime-border-color-left-focus: var(--color-foreground-border-accent-focus);
  --datetime-border-color-right-focus: var(--color-foreground-border-accent-focus);
  --datetime-border-color-bottom-focus: var(--color-foreground-border-accent-focus);
  --datetime-border-color-top-focus: var(--color-foreground-border-accent-focus);
  --datetime-outline-color-focus: var(--color-foreground-border-accent-focus);
  /* Datetime: border colors on error */
  --datetime-border-color-left-error: var(--color-system-danger-default);
  --datetime-border-color-right-error: var(--color-system-danger-default);
  --datetime-border-color-bottom-error: var(--color-system-danger-default);
  --datetime-border-color-top-error: var(--color-system-danger-default);
  /* Datetime: bar colors */
  --datetime-bar-color-focus: transparent;
  --datetime-bar-color-error: transparent;
  /* Datetime: disabled */
  --datetime-disabled-bottom-bar: none;
}

.tl-datetime {
  display: block;
  min-width: 208px;
  background: unset;
}
.tl-datetime--no-min-width {
  min-width: auto;
}
.tl-datetime {
  /* Native picker visuals */
}
.tl-datetime input[type=datetime-local]::-webkit-inner-spin-button, .tl-datetime input[type=datetime-local]::-webkit-calendar-picker-indicator,
.tl-datetime input[type=date]::-webkit-inner-spin-button,
.tl-datetime input[type=date]::-webkit-calendar-picker-indicator,
.tl-datetime input[type=month]::-webkit-inner-spin-button,
.tl-datetime input[type=month]::-webkit-calendar-picker-indicator,
.tl-datetime input[type=week]::-webkit-inner-spin-button,
.tl-datetime input[type=week]::-webkit-calendar-picker-indicator,
.tl-datetime input[type=time]::-webkit-inner-spin-button,
.tl-datetime input[type=time]::-webkit-calendar-picker-indicator {
  opacity: 0;
}

.tl-datetime__label {
  font-family: var(--detail-05-font-family);
  font-size: var(--detail-05-font-size);
  line-height: var(--detail-05-line-height);
  font-weight: var(--detail-05-font-weight);
  letter-spacing: var(--detail-05-letter-spacing);
  text-transform: var(--detail-05-text-transform);
  display: block;
  margin-bottom: var(--tds-spacing-element-8);
  color: var(--datetime-label);
}
.tl-datetime:has(input:disabled) .tl-datetime__label {
  color: var(--datetime-label-disabled);
  cursor: not-allowed;
}

.tl-datetime__wrapper {
  border-radius: var(--datetime-border-radius);
  position: relative;
  height: 56px;
  box-sizing: border-box;
  background-color: var(--datetime-background);
}
.tl-datetime--md .tl-datetime__wrapper {
  height: 48px;
}
.tl-datetime--sm .tl-datetime__wrapper {
  height: 40px;
}
.tl-datetime:has(input:disabled) .tl-datetime__wrapper {
  cursor: not-allowed;
}
.tl-datetime__wrapper {
  /* CSS-generated icon */
}
.tl-datetime__wrapper::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 18px;
  width: 20px;
  height: 20px;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 20px 20px;
  background-color: var(--datetime-icon);
  pointer-events: none;
  /* Default: calendar icon for date/datetime inputs */
  mask-image: var(--icon-calendar-svg);
  /* Firefox - hide our custom icon since Firefox shows its own */
}
@supports (-moz-appearance: none) {
  .tl-datetime__wrapper::after {
    display: none;
  }
}
.tl-datetime__wrapper {
  /* Change to clock icon for time input */
}
.tl-datetime__wrapper:has(input[type=time])::after {
  mask-image: var(--icon-clock-svg);
}
.tl-datetime--error .tl-datetime__wrapper::after {
  background-color: var(--datetime-icon-error);
}
.tl-datetime__wrapper {
  /* Disabled state */
}
.tl-datetime:has(input:disabled) .tl-datetime__wrapper::after {
  background-color: var(--datetime-icon-disabled);
}

.tl-datetime__input {
  box-sizing: border-box;
}
.tl-datetime__input * {
  box-sizing: border-box;
}
.tl-datetime__input {
  font-family: var(--detail-02-font-family);
  font-size: var(--detail-02-font-size);
  line-height: var(--detail-02-line-height);
  font-weight: var(--detail-02-font-weight);
  letter-spacing: var(--detail-02-letter-spacing);
  text-transform: var(--detail-02-text-transform);
  border-radius: var(--datetime-border-radius);
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  border: none;
  outline: none;
  height: 100%;
  color: var(--datetime-text);
  background-color: var(--datetime-background);
  padding: var(--tds-spacing-element-20) var(--tds-spacing-element-16);
  box-shadow: inset var(--datetime-box-shadow);
  transition: box-shadow 0.2s;
}
.tl-datetime__input:focus {
  box-shadow: inset var(--datetime-box-shadow-focus);
}
.tl-datetime:hover .tl-datetime__input:not(:focus):not(:disabled) {
  box-shadow: inset var(--datetime-box-shadow-hover);
}
.tl-datetime--error .tl-datetime__input {
  box-shadow: inset var(--datetime-box-shadow-error);
}
.tl-datetime--error .tl-datetime__input:focus {
  box-shadow: inset var(--datetime-box-shadow-error-focus);
}
.tl-datetime--error:hover .tl-datetime__input:not(:focus):not(:disabled) {
  box-shadow: inset var(--datetime-box-shadow-error-hover);
}
.tl-datetime--error .tl-datetime__input:disabled {
  box-shadow: inset var(--datetime-box-shadow-error);
}
.tl-datetime__input::placeholder {
  opacity: 1;
  color: var(--datetime-placeholder);
}
.tl-datetime__input:focus::placeholder {
  color: var(--datetime-placeholder-focus);
}
.tl-datetime__input {
  /* WebKit datetime fields */
}
.tl-datetime__input::-webkit-datetime-edit-text {
  -webkit-text-fill-color: var(--datetime-text);
}
.tl-datetime__input::-webkit-datetime-edit-month-field {
  -webkit-text-fill-color: var(--datetime-text);
}
.tl-datetime__input::-webkit-datetime-edit-day-field {
  -webkit-text-fill-color: var(--datetime-text);
}
.tl-datetime__input::-webkit-datetime-edit-year-field {
  -webkit-text-fill-color: var(--datetime-text);
}
.tl-datetime__input::-webkit-datetime-edit-hour-field {
  -webkit-text-fill-color: var(--datetime-text);
}
.tl-datetime__input::-webkit-datetime-edit-minute-field {
  -webkit-text-fill-color: var(--datetime-text);
}
.tl-datetime__input::-webkit-datetime-edit-second-field {
  -webkit-text-fill-color: var(--datetime-text);
}
.tl-datetime__input::-webkit-datetime-edit-millisecond-field {
  -webkit-text-fill-color: var(--datetime-text);
}
.tl-datetime__input::-webkit-datetime-edit-meridiem-field {
  -webkit-text-fill-color: var(--datetime-text);
}
.tl-datetime__input:disabled {
  background-color: var(--datetime-background-disabled);
  color: var(--datetime-text-disabled);
  box-shadow: inset var(--datetime-box-shadow-disabled);
  cursor: not-allowed;
}
.tl-datetime__input:disabled::placeholder {
  color: var(--datetime-placeholder-disabled);
}
.tl-datetime__input:disabled ~ .tl-datetime__label-inside {
  color: var(--datetime-label-disabled);
}
.tl-datetime__input:disabled {
  /* WebKit datetime fields - disabled state */
}
.tl-datetime__input:disabled::-webkit-datetime-edit-text {
  -webkit-text-fill-color: var(--datetime-text-disabled);
}
.tl-datetime__input:disabled::-webkit-datetime-edit-month-field {
  -webkit-text-fill-color: var(--datetime-text-disabled);
}
.tl-datetime__input:disabled::-webkit-datetime-edit-day-field {
  -webkit-text-fill-color: var(--datetime-text-disabled);
}
.tl-datetime__input:disabled::-webkit-datetime-edit-year-field {
  -webkit-text-fill-color: var(--datetime-text-disabled);
}
.tl-datetime__input:disabled::-webkit-datetime-edit-hour-field {
  -webkit-text-fill-color: var(--datetime-text-disabled);
}
.tl-datetime__input:disabled::-webkit-datetime-edit-minute-field {
  -webkit-text-fill-color: var(--datetime-text-disabled);
}
.tl-datetime__input:disabled::-webkit-datetime-edit-second-field {
  -webkit-text-fill-color: var(--datetime-text-disabled);
}
.tl-datetime__input:disabled::-webkit-datetime-edit-millisecond-field {
  -webkit-text-fill-color: var(--datetime-text-disabled);
}
.tl-datetime__input:disabled::-webkit-datetime-edit-meridiem-field {
  -webkit-text-fill-color: var(--datetime-text-disabled);
}
.tl-datetime--label-inside .tl-datetime__input {
  padding-top: var(--tds-spacing-element-24);
  padding-bottom: 15px;
}
.tl-datetime--md.tl-datetime--label-inside .tl-datetime__input {
  padding-top: var(--tds-spacing-element-20);
  padding-bottom: 11px;
}
.tl-datetime--sm .tl-datetime__input {
  padding: var(--tds-spacing-element-16);
}

.tl-datetime__label-inside {
  font-family: var(--detail-07-font-family);
  font-size: var(--detail-07-font-size);
  line-height: var(--detail-07-line-height);
  font-weight: var(--detail-07-font-weight);
  letter-spacing: var(--detail-07-letter-spacing);
  text-transform: var(--detail-07-text-transform);
  position: absolute;
  pointer-events: none;
  color: var(--datetime-label-inside);
  left: 16px;
  transition: 0.1s ease all;
}
.tl-datetime--lg .tl-datetime__label-inside {
  top: 12px;
}
.tl-datetime--md .tl-datetime__label-inside {
  top: 8px;
}
.tl-datetime--sm .tl-datetime__label-inside {
  display: none;
}

.tl-datetime__helper {
  font-family: var(--detail-05-font-family);
  font-size: var(--detail-05-font-size);
  line-height: var(--detail-05-line-height);
  font-weight: var(--detail-05-font-weight);
  letter-spacing: var(--detail-05-letter-spacing);
  text-transform: var(--detail-05-text-transform);
  display: inline-flex;
  gap: 8px;
  padding-top: var(--tds-spacing-element-4);
  color: var(--datetime-helper);
  /* CSS-generated error icon */
}
.tl-datetime__helper::before {
  content: "";
  width: 16px;
  height: 16px;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  flex-shrink: 0;
  display: none;
}
.tl-datetime--error .tl-datetime__helper {
  color: var(--datetime-helper-error);
}
.tl-datetime--error .tl-datetime__helper::before {
  display: inline-flex;
  mask-image: var(--icon-error-svg);
  background-color: var(--datetime-helper-error);
}
.tl-datetime__helper {
  /* Disabled state (should not override error text/icon color) */
}
.tl-datetime:has(input:disabled):not(.tl-datetime--error) .tl-datetime__helper {
  color: var(--color-foreground-text-disabled);
}

.tl-divider {
  --divider-background: var(--color-foreground-border-discrete);
  --divider-background-strong: var(--color-foreground-border-strong);
  --divider-background-discrete: var(--color-foreground-border-discrete);
}

.tl-divider {
  box-sizing: border-box;
}
.tl-divider * {
  box-sizing: border-box;
}
.tl-divider {
  background-color: var(--divider-background);
}
.tl-divider--expressive {
  background-color: var(--divider-background-strong);
}
.tl-divider--discrete {
  background-color: var(--divider-background-discrete);
}
.tl-divider--horizontal {
  width: 100%;
  height: 1px;
}
.tl-divider--vertical {
  height: 100%;
  width: 1px;
}

/**
 * Do not edit directly, this file was auto-generated.
 */
.tl-dropdown,
tds-dropdown {
  --component-dropdown-list-item-secondary-hover: var(--color-background-layer-03);
  --component-dropdown-list-item-secondary-focus: var(--color-background-layer-03);
  --component-dropdown-list-item-focus: var(--color-background-layer-02);
  --component-dropdown-list-item-hover: var(--color-background-layer-02);
  --component-dropdown-secondary-hover: var(--color-background-layer-03);
  --component-dropdown-secondary-focus: var(--color-background-layer-03);
  --component-dropdown-focus: var(--color-background-surface-300);
  --component-dropdown-hover: var(--color-background-surface-100);
}

.tl-dropdown-option {
  --dropdown-option-background: var(--color-background-layer-01);
  --dropdown-option-background-hover: var(--component-dropdown-hover);
  --dropdown-option-background-selected: var(--component-dropdown-focus);
  --dropdown-option-disabled: var(--color-foreground-text-disabled);
  --dropdown-option-border: var(--color-foreground-border-discrete);
}

.tl-dropdown {
  --dropdown-background: var(--color-background-layer-01);
}
.tl-dropdown--primary {
  --dropdown-background: var(--color-background-layer-01);
}
.tl-dropdown--secondary {
  --dropdown-background: var(--color-background-layer-02);
}
.tl-dropdown {
  --dropdown-text: var(--color-foreground-text-strong);
  --dropdown-helper-text: var(--color-foreground-text-defined);
  --dropdown-placeholder: var(--color-foreground-text-subtle);
  --dropdown-disabled: var(--color-foreground-text-disabled);
  --dropdown-icon: var(--color-foreground-icon-strong);
  --dropdown-clear-icon: var(--color-foreground-icon-subtle);
  --dropdown-error: var(--color-system-danger-default);
  --dropdown-error-focus: var(--color-system-danger-subtle);
}

.tl-dropdown,
.scania .tl-dropdown {
  /* Changed box shadow variables to work with bottom inside border design. Remove comments when a11y changes are applied */
  /* Changed box shadow variables to work with bottom inside border design. Can be removed when a11y changes are applied */
  --dropdown-border: 0 -1px 0 0 var(--color-foreground-border-soft);
  --dropdown-border-hover: 0 -1px 0 0 var(--color-foreground-border-strong);
  --dropdown-border-focus: 0 -2px 0 0 var(--color-foreground-border-accent-focus);
  --dropdown-border-active: 0 -1px 0 0 var(--color-foreground-border-strong);
  --dropdown-border-error: 0 -1px 0 0 var(--dropdown-error);
  --dropdown-border-error-hover: 0 -1px 0 0 var(--dropdown-error);
  --dropdown-border-error-focus: 0 -2px 0 0 var(--dropdown-error-focus);
  --dropdown-spacing-4: 4px;
  --dropdown-border-radius: var(--dropdown-spacing-4) var(--dropdown-spacing-4) 0 0;
  --dropdown-list-border-radius-down: 0 0 var(--dropdown-spacing-4) var(--dropdown-spacing-4);
  --dropdown-list-border-radius-up: var(--dropdown-spacing-4) var(--dropdown-spacing-4) 0 0;
  --dropdown-text: var(--color-foreground-text-strong);
  --dropdown-option-disabled: var(--color-foreground-text-disabled);
  --dropdown-option-background: var(--color-background-layer-01);
  --dropdown-option-background-hover: var(--component-dropdown-hover);
  --dropdown-option-background-selected: var(--component-dropdown-focus);
  --dropdown-option-border: var(--color-foreground-border-discrete);
  --dropdown-helper-text: var(--color-foreground-text-defined);
  --dropdown-placeholder: var(--color-foreground-text-subtle);
}

.traton .tl-dropdown {
  --dropdown-border: 0 0 0 1px var(--color-foreground-border-soft);
  --dropdown-border-hover: 0 0 0 1px var(--color-foreground-border-strong);
  --dropdown-border-focus: 0 0 0 2px var(--color-foreground-border-accent-focus);
  --dropdown-border-active: 0 0 0 1px var(--color-foreground-border-strong);
  --dropdown-border-error: 0 0 0 1px var(--dropdown-error);
  --dropdown-border-error-hover: 0 0 0 1px var(--dropdown-error);
  --dropdown-border-error-focus: 0 0 0 1px var(--dropdown-error-focus);
  --dropdown-spacing-4: 4px;
  --dropdown-border-radius: var(--dropdown-spacing-4) var(--dropdown-spacing-4)
    var(--dropdown-spacing-4) var(--dropdown-spacing-4);
}
.traton .tl-dropdown--primary {
  --dropdown-background: var(--color-background-layer-01);
}
.traton .tl-dropdown--primary .tl-dropdown-option {
  --dropdown-option-background: var(--color-background-layer-01);
}
.traton .tl-dropdown--secondary {
  --dropdown-background: var(--color-background-layer-02);
}
.traton .tl-dropdown--secondary .tl-dropdown-option {
  --dropdown-option-background: var(--color-background-layer-02);
}

:host,
:root {
  --tl-scrollbar-width-standard: thin;
  --tl-scrollbar-width: 10px;
  --tl-scrollbar-height: 10px;
  --tl-scrollbar-thumb-border-width: 3px;
  --tl-scrollbar-thumb-border-hover-width: 2px;
}

body {
  scrollbar-width: thin;
}

.tl-dropdown {
  width: 208px;
  position: relative;
}
.tl-dropdown:has(:is(.tl-dropdown__button, .tl-dropdown__select, .tl-dropdown__input):disabled) {
  cursor: not-allowed;
}

.tl-dropdown__input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

:is(.tl-dropdown__button, .tl-dropdown__select, .tl-dropdown__input) {
  height: 56px;
}
.tl-dropdown--md :is(.tl-dropdown__button, .tl-dropdown__select, .tl-dropdown__input) {
  height: 48px;
}
.tl-dropdown--sm :is(.tl-dropdown__button, .tl-dropdown__select, .tl-dropdown__input) {
  height: 40px;
}
:is(.tl-dropdown__button, .tl-dropdown__select, .tl-dropdown__input) {
  font-family: var(--detail-02-font-family);
  font-size: var(--detail-02-font-size);
  line-height: var(--detail-02-line-height);
  font-weight: var(--detail-02-font-weight);
  letter-spacing: var(--detail-02-letter-spacing);
  text-transform: var(--detail-02-text-transform);
  width: 100%;
  border: none;
  appearance: none;
  background: var(--dropdown-background);
  color: var(--dropdown-text);
  box-shadow: inset var(--dropdown-border);
  border-radius: var(--dropdown-border-radius);
  position: relative;
  outline: none;
  text-align: left;
  cursor: pointer;
  padding-inline: var(--tds-spacing-element-16);
  transition: box-shadow 0.2s, border-radius 0.2s, background 0.2s;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
:is(.tl-dropdown__button, .tl-dropdown__select, .tl-dropdown__input):hover {
  box-shadow: inset var(--dropdown-border-hover);
}
:is(.tl-dropdown__button, .tl-dropdown__select, .tl-dropdown__input):focus-visible {
  box-shadow: inset var(--dropdown-border-focus);
}
.tl-dropdown--error :is(.tl-dropdown__button, .tl-dropdown__select, .tl-dropdown__input) {
  box-shadow: inset var(--dropdown-border-error);
}
.tl-dropdown--error :is(.tl-dropdown__button, .tl-dropdown__select, .tl-dropdown__input):focus-visible {
  box-shadow: inset var(--dropdown-border-error-focus);
}
:is(.tl-dropdown__button, .tl-dropdown__select, .tl-dropdown__input):disabled {
  color: var(--dropdown-disabled);
  background: var(--dropdown-background-disabled, var(--dropdown-background));
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}

.tl-dropdown:has([aria-expanded=true]) .tl-dropdown__button {
  box-shadow: inset var(--dropdown-border-active);
}

.tl-dropdown__input {
  cursor: text;
}

.tl-dropdown__select {
  padding-top: 2px;
  cursor: pointer;
  display: block;
}
.tl-dropdown__select:disabled {
  background: var(--dropdown-background) !important;
}

.tl-dropdown__input,
.tl-dropdown__select {
  box-sizing: border-box;
  width: 100%;
  padding-right: 36px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tl-dropdown__input:focus,
.tl-dropdown__select:focus {
  padding-right: 69px;
}

.tl-dropdown__input-clear {
  display: none;
  position: absolute;
  top: 50%;
  right: 45px;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background: transparent;
  cursor: pointer;
  border: 0;
  padding: 0;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.tl-dropdown__input-clear::before {
  content: "";
  width: 16px;
  height: 16px;
  background-color: var(--dropdown-clear-icon);
  mask-image: var(--icon-cross-svg);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  pointer-events: none;
  display: block;
}
.tl-dropdown__input-clear:focus, .tl-dropdown__input-clear:focus-visible {
  outline: 2px solid var(--color-foreground-border-accent-focus);
  outline-offset: 2px;
}

.tl-dropdown__input-wrapper:has(.tl-dropdown__input[aria-expanded=true]:not(:placeholder-shown)) .tl-dropdown__input-clear {
  display: inline-flex;
}

.tl-dropdown__input-wrapper::before {
  content: "";
  position: absolute;
  right: 40px;
  top: 1px;
  bottom: 0;
  margin: auto 0;
  height: 16px;
  width: 1px;
  background: var(--dropdown-clear-icon);
  z-index: 1;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}

.tl-dropdown__input-wrapper:has(.tl-dropdown__input[aria-expanded=true]:not(:placeholder-shown))::before {
  opacity: 1;
}

.tl-dropdown__button::after,
.tl-dropdown__input-wrapper::after {
  content: "";
  position: absolute;
  right: var(--tds-spacing-element-16);
  top: 50%;
  transform: translateY(-50%);
  width: var(--tds-spacing-element-16);
  height: var(--tds-spacing-element-16);
  background-color: var(--dropdown-icon);
  mask-image: var(--icon-chevron_down-svg);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  pointer-events: none;
  transition: transform 0.2s;
}
.tl-dropdown:has(.tl-dropdown__select:disabled) .tl-dropdown__button::after, .tl-dropdown:has(.tl-dropdown__button:disabled) .tl-dropdown__button::after, .tl-dropdown:has(.tl-dropdown__input:disabled) .tl-dropdown__button::after,
.tl-dropdown:has(.tl-dropdown__select:disabled) .tl-dropdown__input-wrapper::after,
.tl-dropdown:has(.tl-dropdown__button:disabled) .tl-dropdown__input-wrapper::after,
.tl-dropdown:has(.tl-dropdown__input:disabled) .tl-dropdown__input-wrapper::after {
  background-color: var(--dropdown-disabled);
}

.tl-dropdown--lg:not(.tl-dropdown--label-inside):has(.tl-dropdown__select):not(:has(.tl-dropdown__helper))::after {
  content: "";
  position: absolute;
  right: var(--tds-spacing-element-16);
  top: calc(50% + 11px);
  transform: translateY(-50%);
  width: var(--tds-spacing-element-16);
  height: var(--tds-spacing-element-16);
  background-color: var(--dropdown-icon);
  mask-image: var(--icon-chevron_down-svg);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  pointer-events: none;
  transition: transform 0.2s;
}

.tl-dropdown--lg:not(.tl-dropdown--label-inside):has(.tl-dropdown__select:disabled):not(:has(.tl-dropdown__helper))::after {
  background-color: var(--dropdown-disabled);
}

.tl-dropdown--md:not(.tl-dropdown--label-inside):has(.tl-dropdown__select):not(:has(.tl-dropdown__helper))::after {
  content: "";
  position: absolute;
  right: var(--tds-spacing-element-16);
  top: calc(50% + 11px);
  transform: translateY(-50%);
  width: var(--tds-spacing-element-16);
  height: var(--tds-spacing-element-16);
  background-color: var(--dropdown-icon);
  mask-image: var(--icon-chevron_down-svg);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  pointer-events: none;
  transition: transform 0.2s;
}

.tl-dropdown--md:not(.tl-dropdown--label-inside):has(.tl-dropdown__select:disabled):not(:has(.tl-dropdown__helper))::after {
  background-color: var(--dropdown-disabled);
}

.tl-dropdown--sm:not(.tl-dropdown--label-inside):has(.tl-dropdown__select):not(:has(.tl-dropdown__helper))::after {
  content: "";
  position: absolute;
  right: var(--tds-spacing-element-16);
  top: calc(50% + 11px);
  transform: translateY(-50%);
  width: var(--tds-spacing-element-16);
  height: var(--tds-spacing-element-16);
  background-color: var(--dropdown-icon);
  mask-image: var(--icon-chevron_down-svg);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  pointer-events: none;
  transition: transform 0.2s;
}

.tl-dropdown--sm:not(.tl-dropdown--label-inside):has(.tl-dropdown__select:disabled):not(:has(.tl-dropdown__helper))::after {
  background-color: var(--dropdown-disabled);
}

.tl-dropdown:not(.tl-dropdown--label-inside):has(.tl-dropdown__label):has(:is(.tl-dropdown__button, .tl-dropdown__input)) .tl-dropdown__button::after,
.tl-dropdown:not(.tl-dropdown--label-inside):has(.tl-dropdown__label):has(:is(.tl-dropdown__button, .tl-dropdown__input)) .tl-dropdown__input-wrapper::after {
  top: calc(50% + 1px);
}

.tl-dropdown--label-inside:has(.tl-dropdown__select):not(:has(.tl-dropdown__helper))::after {
  content: "";
  position: absolute;
  right: var(--tds-spacing-element-16);
  top: 50%;
  transform: translateY(-50%);
  width: var(--tds-spacing-element-16);
  height: var(--tds-spacing-element-16);
  background-color: var(--dropdown-icon);
  mask-image: var(--icon-chevron_down-svg);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  pointer-events: none;
  transition: transform 0.2s;
}

.tl-dropdown--label-inside:has(.tl-dropdown__select:disabled):not(:has(.tl-dropdown__helper))::after {
  background-color: var(--dropdown-disabled);
}

.tl-dropdown:not(:has(.tl-dropdown__label)):has(.tl-dropdown__select):not(:has(.tl-dropdown__helper))::after {
  content: "";
  position: absolute;
  right: var(--tds-spacing-element-16);
  top: 50%;
  transform: translateY(-50%);
  width: var(--tds-spacing-element-16);
  height: var(--tds-spacing-element-16);
  background-color: var(--dropdown-icon);
  mask-image: var(--icon-chevron_down-svg);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  pointer-events: none;
  transition: transform 0.2s;
}

.tl-dropdown:not(:has(.tl-dropdown__label)):has(.tl-dropdown__select:disabled):not(:has(.tl-dropdown__helper))::after {
  background-color: var(--dropdown-disabled);
}

.tl-dropdown--label-inside:has(.tl-dropdown__select):has(.tl-dropdown__helper)::after {
  content: "";
  position: absolute;
  right: var(--tds-spacing-element-16);
  top: calc(50% - 10px);
  transform: translateY(-50%);
  width: var(--tds-spacing-element-16);
  height: var(--tds-spacing-element-16);
  background-color: var(--dropdown-icon);
  mask-image: var(--icon-chevron_down-svg);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  pointer-events: none;
  transition: transform 0.2s;
}

.tl-dropdown--label-inside:has(.tl-dropdown__select:disabled):has(.tl-dropdown__helper)::after {
  background-color: var(--dropdown-disabled);
}

.tl-dropdown:not(:has(.tl-dropdown__label)):has(.tl-dropdown__select):has(.tl-dropdown__helper)::after {
  content: "";
  position: absolute;
  right: var(--tds-spacing-element-16);
  top: calc(50% - 10px);
  transform: translateY(-50%);
  width: var(--tds-spacing-element-16);
  height: var(--tds-spacing-element-16);
  background-color: var(--dropdown-icon);
  mask-image: var(--icon-chevron_down-svg);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  pointer-events: none;
  transition: transform 0.2s;
}

.tl-dropdown:not(:has(.tl-dropdown__label)):has(.tl-dropdown__select:disabled):has(.tl-dropdown__helper)::after {
  background-color: var(--dropdown-disabled);
}

.tl-dropdown:not(.tl-dropdown--label-inside):has(.tl-dropdown__label):has(.tl-dropdown__select):has(.tl-dropdown__helper)::after {
  content: "";
  position: absolute;
  right: var(--tds-spacing-element-16);
  top: calc(50% + 1px);
  transform: translateY(-50%);
  width: var(--tds-spacing-element-16);
  height: var(--tds-spacing-element-16);
  background-color: var(--dropdown-icon);
  mask-image: var(--icon-chevron_down-svg);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  pointer-events: none;
  transition: transform 0.2s;
}

.tl-dropdown:not(.tl-dropdown--label-inside):has(.tl-dropdown__label):has(.tl-dropdown__select:disabled):has(.tl-dropdown__helper)::after {
  background-color: var(--dropdown-disabled);
}

.tl-dropdown--md:not(.tl-dropdown--label-inside):has(.tl-dropdown__label):has(.tl-dropdown__select):has(.tl-dropdown__helper)::after {
  top: calc(50% + 1px);
}

.tl-dropdown--sm:not(.tl-dropdown--label-inside):has(.tl-dropdown__label):has(.tl-dropdown__select):has(.tl-dropdown__helper)::after {
  top: calc(50% + 1px);
}

.tl-dropdown:has([aria-expanded=true]):is(.tl-dropdown__button,
.tl-dropdown__input-wrapper)::after {
  transform: translateY(-50%) rotate(180deg);
}

.tl-dropdown:has(.tl-dropdown__select:disabled) .tl-dropdown__label, .tl-dropdown:has(.tl-dropdown__button:disabled) .tl-dropdown__label, .tl-dropdown:has(.tl-dropdown__input:disabled) .tl-dropdown__label {
  color: var(--color-foreground-text-disabled);
}
.tl-dropdown:not(.tl-dropdown--label-inside) .tl-dropdown__label {
  font-family: var(--detail-05-font-family);
  font-size: var(--detail-05-font-size);
  line-height: var(--detail-05-line-height);
  font-weight: var(--detail-05-font-weight);
  letter-spacing: var(--detail-05-letter-spacing);
  text-transform: var(--detail-05-text-transform);
  color: var(--dropdown-text);
  display: block;
  margin-bottom: var(--tds-spacing-element-4);
}
.tl-dropdown--label-inside .tl-dropdown__label {
  font-family: var(--detail-02-font-family);
  font-size: var(--detail-02-font-size);
  line-height: var(--detail-02-line-height);
  font-weight: var(--detail-02-font-weight);
  letter-spacing: var(--detail-02-letter-spacing);
  text-transform: var(--detail-02-text-transform);
  position: absolute;
  left: var(--tds-spacing-element-16);
  width: auto;
  pointer-events: none;
  background: transparent;
  z-index: 1;
  transition: transform 0.15s, font-size 0.15s, color 0.15s, top 0.15s;
  transform-origin: top left;
  color: var(--dropdown-label-inside);
  top: 50%;
  transform: translateY(-50%);
}

.tl-dropdown--label-inside:has(:is(.tl-dropdown__input:focus,
.tl-dropdown__input:not(:placeholder-shown),
.tl-dropdown__text:not(:empty))) .tl-dropdown__label,
.tl-dropdown--label-inside:has(.tl-dropdown__select option:not([value=""]):checked) .tl-dropdown__label {
  font-family: var(--detail-07-font-family);
  font-size: var(--detail-07-font-size);
  line-height: var(--detail-07-line-height);
  font-weight: var(--detail-07-font-weight);
  letter-spacing: var(--detail-07-letter-spacing);
  text-transform: var(--detail-07-text-transform);
  color: var(--dropdown-label-inside-active, var(--dropdown-label-inside));
  top: 7.5px;
  transform: none;
}

.tl-dropdown--lg.tl-dropdown--label-inside:has(:is(.tl-dropdown__input:focus,
.tl-dropdown__input:not(:placeholder-shown),
.tl-dropdown__text:not(:empty))) .tl-dropdown__label,
.tl-dropdown--lg.tl-dropdown--label-inside:has(.tl-dropdown__select option:not([value=""]):checked) .tl-dropdown__label {
  top: 12.5px;
}

.tl-dropdown--md.tl-dropdown--label-inside:has(:is(.tl-dropdown__input:focus,
.tl-dropdown__input:not(:placeholder-shown),
.tl-dropdown__text:not(:empty))) .tl-dropdown__label,
.tl-dropdown--md.tl-dropdown--label-inside:has(.tl-dropdown__select option:not([value=""]):checked) .tl-dropdown__label {
  top: 8.5px;
}

.tl-dropdown--sm.tl-dropdown--label-inside:has(:is(.tl-dropdown__input:focus,
.tl-dropdown__input:not(:placeholder-shown),
.tl-dropdown__text:not(:empty))) .tl-dropdown__label,
.tl-dropdown--sm.tl-dropdown--label-inside:has(.tl-dropdown__select option:not([value=""]):checked) .tl-dropdown__label {
  display: none;
}

.tl-dropdown--label-inside:not(:has(.tl-dropdown__text:not(:empty))):not(:has(.tl-dropdown__input:focus)):not(:has(.tl-dropdown__input:not(:placeholder-shown))):not(:has(.tl-dropdown__select option:not([value=""]):checked)) .tl-dropdown__label {
  top: 50%;
  transform: translateY(-50%);
}

.tl-dropdown--label-inside:has(.tl-dropdown__helper):not(:has(.tl-dropdown__text:not(:empty))):not(:has(.tl-dropdown__input:focus)):not(:has(.tl-dropdown__input:not(:placeholder-shown))):not(:has(.tl-dropdown__select option:not([value=""]):checked)) .tl-dropdown__label {
  top: calc(50% - 9.5px);
}

:is(.tl-dropdown--md, .tl-dropdown--lg).tl-dropdown--label-inside:has(:is(.tl-dropdown__input:focus, .tl-dropdown__input:not(:placeholder-shown))) .tl-dropdown__input {
  padding-top: 10px;
}

:is(.tl-dropdown--md, .tl-dropdown--lg).tl-dropdown--label-inside:has(.tl-dropdown__text:not(:empty)) .tl-dropdown__text {
  padding-top: 10px;
}

.tl-dropdown--label-inside:has(.tl-dropdown__select option:not([value=""]):checked) .tl-dropdown__select {
  padding-top: 12.5px;
}

:is(.tl-dropdown--md, .tl-dropdown--lg).tl-dropdown--label-inside:has(.tl-dropdown__select option:not([value=""]):checked) .tl-dropdown__select {
  padding-top: 10px;
}

.tl-dropdown--sm.tl-dropdown--label-inside:has(.tl-dropdown__select option:not([value=""]):checked) .tl-dropdown__select {
  padding-top: 2px;
}

.tl-dropdown--label-inside .tl-dropdown__input::placeholder {
  color: transparent;
}

.tl-dropdown__list {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 500;
  width: 100%;
  background: var(--dropdown-background);
  box-shadow: 0 2px 3px 0 var(--dropdown-option-border);
  border-radius: var(--dropdown-list-border-radius-down, var(--dropdown-border-radius-up));
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 320px;
  overflow-y: auto;
  pointer-events: none;
  visibility: hidden;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s 0.2s;
}
.tl-dropdown__list::-webkit-scrollbar {
  width: var(--tl-scrollbar-width);
}
.tl-dropdown__list::-webkit-scrollbar-track {
  background: var(--tl-scrollbar-track-color);
}
.tl-dropdown__list::-webkit-scrollbar-thumb {
  border-radius: 40px;
  background: var(--tl-scrollbar-thumb-color);
  border-width: var(--tl-scrollbar-thumb-border-width);
  border-style: solid;
  border-color: transparent;
  background-clip: padding-box;
}
.tl-dropdown__list::-webkit-scrollbar-thumb:hover {
  border-width: var(--tl-scrollbar-thumb-border-hover-width);
}
.tl-dropdown__list::-webkit-scrollbar-button {
  height: 0;
  width: 0;
}
@supports not selector(::-webkit-scrollbar) {
  .tl-dropdown__list {
    scrollbar-color: var(--tl-scrollbar-thumb-color) var(--tl-scrollbar-track-color);
    scrollbar-width: var(--tl-scrollbar-width-standard);
  }
}
.tl-mode-dark .tl-dropdown__list {
  box-shadow: none;
}
.tl-dropdown--dropup .tl-dropdown__list {
  top: auto;
  bottom: 100%;
  border-radius: var(--dropdown-list-border-radius-up, var(--dropdown-border-radius-up));
  transform-origin: bottom;
}

.tl-dropdown:has(.tl-dropdown__button[aria-expanded=true]) .tl-dropdown__list,
.tl-dropdown:has(.tl-dropdown__input[aria-expanded=true]) .tl-dropdown__list {
  visibility: visible;
  transform: scaleY(1);
  pointer-events: auto;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s 0s;
}

.tl-dropdown:has(.tl-dropdown__helper) .tl-dropdown__list {
  transform: translateY(-20px) scaleY(0);
}

.tl-dropdown:has(.tl-dropdown__helper):has(.tl-dropdown__button[aria-expanded=true]) .tl-dropdown__list,
.tl-dropdown:has(.tl-dropdown__helper):has(.tl-dropdown__input[aria-expanded=true]) .tl-dropdown__list {
  transform: translateY(-20px) scaleY(1);
}

.tl-dropdown.tl-dropdown--dropup .tl-dropdown__list {
  transform: translateY(-2px) scaleY(0);
}

.tl-dropdown.tl-dropdown--dropup:has(.tl-dropdown__button[aria-expanded=true]) .tl-dropdown__list,
.tl-dropdown.tl-dropdown--dropup:has(.tl-dropdown__input[aria-expanded=true]) .tl-dropdown__list {
  transform: translateY(-2px) scaleY(1);
}

.tl-dropdown.tl-dropdown--dropup:not(.tl-dropdown--label-inside) .tl-dropdown__list {
  transform: translateY(18px) scaleY(0);
}

.tl-dropdown.tl-dropdown--dropup:not(.tl-dropdown--label-inside):has(.tl-dropdown__button[aria-expanded=true]) .tl-dropdown__list,
.tl-dropdown.tl-dropdown--dropup:not(.tl-dropdown--label-inside):has(.tl-dropdown__input[aria-expanded=true]) .tl-dropdown__list {
  transform: translateY(18px) scaleY(1);
}

.tl-dropdown__option {
  font-family: var(--detail-02-font-family);
  font-size: var(--detail-02-font-size);
  line-height: var(--detail-02-line-height);
  font-weight: var(--detail-02-font-weight);
  letter-spacing: var(--detail-02-letter-spacing);
  text-transform: var(--detail-02-text-transform);
  display: flex;
  align-items: center;
  padding-inline: var(--tds-spacing-element-16);
  height: 48px;
  cursor: pointer;
  color: var(--dropdown-text);
  box-sizing: border-box;
  transition: background 0.15s, color 0.15s;
  outline: none;
  position: relative;
  border-bottom: 1px solid var(--dropdown-option-border);
}
.tl-dropdown__option:hover {
  background: var(--dropdown-option-background-hover);
}
.tl-dropdown__option:focus-visible {
  box-shadow: inset 0 0 0 2px var(--color-foreground-border-accent-focus);
  z-index: 2;
}
.tl-dropdown__option--selected {
  background: var(--dropdown-option-background-selected);
}
.tl-dropdown__option:not(:has(.tl-checkbox))::after {
  content: "";
  position: absolute;
  right: var(--tds-spacing-element-16);
  width: 16px;
  height: 16px;
  background-color: var(--dropdown-icon);
  mask-image: var(--icon-tick-svg);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
}
.tl-dropdown__option--selected:not(:has(.tl-checkbox))::after {
  opacity: 1;
}
.tl-dropdown__option--disabled {
  color: var(--dropdown-disabled);
  cursor: not-allowed;
  background: var(--dropdown-background);
}
.tl-dropdown__option--disabled:hover {
  background: var(--dropdown-background);
}
.tl-dropdown__option--disabled .tl-checkbox__label {
  color: var(--dropdown-disabled);
}
.tl-dropdown__option--no-result {
  color: var(--dropdown-disabled);
}
.tl-dropdown__option .tl-checkbox {
  pointer-events: none;
}
.tl-dropdown__option:not(.tl-dropdown__option--disabled) .tl-checkbox__label {
  color: var(--dropdown-text);
}

.tl-dropdown__helper {
  font-family: var(--detail-05-font-family);
  font-size: var(--detail-05-font-size);
  line-height: var(--detail-05-line-height);
  font-weight: var(--detail-05-font-weight);
  letter-spacing: var(--detail-05-letter-spacing);
  text-transform: var(--detail-05-text-transform);
  color: var(--dropdown-helper-text);
  padding-top: 4px;
  display: flex;
  gap: 8px;
  position: relative;
}
.tl-dropdown:has(.tl-dropdown__select:disabled) .tl-dropdown__helper, .tl-dropdown:has(.tl-dropdown__button:disabled) .tl-dropdown__helper, .tl-dropdown:has(.tl-dropdown__input:disabled) .tl-dropdown__helper {
  color: var(--color-foreground-text-disabled);
}
.tl-dropdown--error .tl-dropdown__helper::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 16px;
  height: 16px;
  background-color: var(--dropdown-error);
  mask-image: var(--icon-info-svg);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}
.tl-dropdown--error:has(.tl-dropdown__select:disabled) .tl-dropdown__helper::before, .tl-dropdown--error:has(.tl-dropdown__button:disabled) .tl-dropdown__helper::before, .tl-dropdown--error:has(.tl-dropdown__input:disabled) .tl-dropdown__helper::before {
  background-color: var(--color-foreground-text-disabled);
}
.tl-dropdown--error .tl-dropdown__helper {
  padding-left: 24px;
}

.tl-dropdown--error:not(:has(:is(.tl-dropdown__select, .tl-dropdown__button, .tl-dropdown__input):disabled)) {
  --dropdown-border: var(--dropdown-border-error);
  --dropdown-border-hover: var(--dropdown-border-error-hover);
  --dropdown-helper-text: var(--dropdown-error);
}

.tl-dropdown__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: calc(100% - 52px);
  position: relative;
  top: 1px;
}
.tl-dropdown__text:empty::before {
  content: attr(data-placeholder);
  color: var(--dropdown-placeholder);
  padding-top: 2px;
}
.tl-dropdown__text:not(:empty) {
  display: inline;
}

.tl-dropdown--sm.tl-dropdown--label-inside .tl-dropdown__text:not(:empty) {
  padding-top: 10px;
}

:has(:is(.tl-dropdown__select, .tl-dropdown__button, .tl-dropdown__input):disabled) .tl-dropdown__text:empty::before {
  color: var(--dropdown-disabled);
  cursor: not-allowed;
}

.tl-dropdown__input::placeholder,
.tl-dropdown:has(.tl-dropdown__select option[value=""]:checked) .tl-dropdown__select {
  color: var(--dropdown-placeholder);
  border-radius: var(--dropdown-border-radius);
  box-shadow: none;
  transition: box-shadow 0.2s;
}

.tl-dropdown:has(.tl-dropdown__select option[value=""]:checked) .tl-dropdown__select {
  padding-top: 3px;
}

.tl-dropdown:has(.tl-dropdown__select option[value=""]:checked) .tl-dropdown__select:disabled {
  color: var(--dropdown-disabled);
  cursor: not-allowed;
}

.tl-dropdown:not(.tl-dropdown--label-inside) .tl-dropdown__input:disabled::placeholder {
  color: var(--dropdown-disabled);
  cursor: not-allowed;
}

.tl-dropdown__input::placeholder {
  transform: translateY(0.5px);
  padding-top: 2px;
}

:is(.traton, .scania) .tl-dropdown__select {
  box-shadow: none;
}
:is(.traton, .scania) .tl-dropdown__select:hover:not(:disabled) {
  border-color: var(--color-foreground-border-strong);
}
:is(.traton, .scania) .tl-dropdown__select:focus-visible {
  border-width: 2px;
  border-color: var(--color-foreground-border-accent-focus);
}
:is(.traton, .scania) .tl-dropdown__select:active:not(:disabled) {
  border-color: var(--color-foreground-border-strong);
}
:is(.traton, .scania) .tl-dropdown__select:disabled {
  border-color: transparent;
  -webkit-text-fill-color: var(--dropdown-disabled);
  opacity: 1;
}

.traton .tl-dropdown__select {
  border: 1px solid var(--color-foreground-border-soft);
}
.traton .tl-dropdown__select:disabled {
  border-color: transparent;
}

.scania .tl-dropdown__select {
  border-bottom: 1px solid var(--color-foreground-border-soft);
}
.scania .tl-dropdown__select:disabled {
  border-color: transparent;
}

:is(.traton, .scania) .tl-dropdown--error .tl-dropdown__select {
  border-color: var(--dropdown-error);
}
:is(.traton, .scania) .tl-dropdown--error .tl-dropdown__select:focus-visible {
  border-color: var(--dropdown-error-focus);
}
:is(.traton, .scania) .tl-dropdown--error .tl-dropdown__select:disabled {
  border-color: transparent;
}

/**
 * Do not edit directly, this file was auto-generated.
 */
.tl-footer,
tds-footer {
  --component-footer-text-color-copyright: var(--color-foreground-text-soft);
  --component-footer-text-color-link-text: var(--color-brand-primary-50);
  --component-footer-primary: var(--scania-color-blue-900);
  --component-footer-border: var(--scania-color-blue-800);
}

:root .tl-footer,
:root tds-footer,
.scania .tl-footer,
.scania tds-footer {
  --component-footer-primary: var(--scania-color-blue-900);
  --component-footer-border: var(--scania-color-blue-700);
  --component-footer-text-color-copyright: var(--color-foreground-text-inverse-soft);
  --component-footer-text-color-link-text: var(--color-foreground-text-brand);
  --component-footer-logotype-cdn: var(--tds-background-image-scania-wordmark-white-svg);
  --component-footer-logotype-local: var(--tds-background-image-scania-wordmark-white-svg-local);
}
:root .tds-mode-light tds-footer,
:root .tds-mode-light .tl-footer,
.scania .tds-mode-light tds-footer,
.scania .tds-mode-light .tl-footer {
  --component-footer-text-color-copyright: var(--color-foreground-text-inverse-soft);
  --component-footer-text-color-link-text: var(--color-foreground-text-brand);
  --component-footer-logotype-cdn: var(--tds-background-image-scania-wordmark-white-svg);
  --component-footer-logotype-local: var(--tds-background-image-scania-wordmark-white-svg-local);
}
:root .tds-mode-dark tds-footer,
:root .tds-mode-dark .tl-footer,
.scania .tds-mode-dark tds-footer,
.scania .tds-mode-dark .tl-footer {
  --component-footer-text-color-copyright: var(--color-foreground-text-soft);
  --component-footer-text-color-link-text: var(--color-brand-primary-50);
  --component-footer-logotype-cdn: var(--tds-background-image-scania-wordmark-white-svg);
  --component-footer-logotype-local: var(--tds-background-image-scania-wordmark-white-svg-local);
}

.traton tds-footer,
.traton .tl-footer {
  --component-footer-primary: var(--traton-color-grey-50);
  --component-footer-border: var(--traton-color-transparent-invisible-light);
  --component-footer-text-color-copyright: var(--traton-color-transparent-600);
  --component-footer-text-color-link-text: var(--color-foreground-text-strong);
  --component-footer-logotype-cdn: var(--traton-logotype-black-svg);
  --component-footer-logotype-local: var(--traton-logotype-black-svg-local);
}
.traton .tds-mode-light tds-footer,
.traton .tds-mode-light .tl-footer {
  --component-footer-text-color-copyright: var(--traton-color-transparent-600);
  --component-footer-logotype-cdn: var(--traton-logotype-black-svg);
  --component-footer-logotype-local: var(--traton-logotype-black-svg-local);
}
.traton .tds-mode-dark tds-footer,
.traton .tds-mode-dark .tl-footer {
  --component-footer-text-color-copyright: var(--traton-color-transparent-inverse-600);
  --component-footer-primary: var(--traton-color-blue-1000);
  --component-footer-logotype-cdn: var(--traton-logotype-white-svg);
  --component-footer-logotype-local: var(--traton-logotype-white-svg-local);
}

.tl-footer {
  --footer-top-background-primary: var(--color-background-layer-01);
  --footer-top-background-secondary: var(--color-background-base);
  --footer-top-background: var(--color-background-layer-01);
  --footer-top-divider: var(--color-foreground-border-discrete);
  --footer-top-links-desktop: var(--color-foreground-text-subtle);
  --footer-top-links: var(--component-footer-text-color-link-text);
  --footer-top-links-background-hover: var(--color-background-surface-300);
  --footer-top-button-active: var(--color-background-surface-300);
  --footer-main-background: var(--component-footer-primary);
  --footer-main-links: var(--color-foreground-text-accent-brand);
  --footer-main-divider: var(--component-footer-border);
  --footer-main-copyright: var(--component-footer-text-color-copyright);
}
.tl-footer.tl-footer--primary {
  --footer-top-background: var(--footer-top-background-primary);
}
.tl-footer.tl-footer--secondary {
  --footer-top-background: var(--footer-top-background-secondary);
}

.tl-footer__group {
  display: block;
}
.tl-footer__group.tl-footer__main-top--start {
  display: flex;
}

.tl-footer__top-title {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  text-align: left;
  width: auto;
  font-family: var(--headline-07-font-family);
  font-size: var(--headline-07-font-size);
  line-height: var(--headline-07-line-height);
  font-weight: var(--headline-07-font-weight);
  letter-spacing: var(--headline-07-letter-spacing);
  text-transform: var(--headline-07-text-transform);
  color: var(--footer-top-links-desktop);
  cursor: default;
}
.tl-footer__top-title:focus {
  outline: none;
}

.tl-footer__link {
  font-family: var(--headline-07-font-family);
  font-size: var(--headline-07-font-size);
  line-height: var(--headline-07-line-height);
  font-weight: var(--headline-07-font-weight);
  letter-spacing: var(--headline-07-letter-spacing);
  text-transform: var(--headline-07-text-transform);
  color: var(--footer-top-links);
  text-decoration: none;
}
.tl-footer__link:hover {
  text-decoration: underline;
}
.tl-footer__link:focus-visible {
  outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
  box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
  outline-offset: 1px;
  z-index: 1;
}

@media (max-width: 992px) {
  .tl-footer__group .tl-footer__link {
    display: none;
  }
  .tl-footer__group--expanded .tl-footer__link {
    display: block;
    border-bottom: 1px solid var(--footer-top-divider);
    padding: 19.5px 40px;
    font-weight: normal;
  }
  .tl-footer__group--expanded .tl-footer__link:hover {
    background-color: var(--footer-top-links-background-hover);
  }
  .tl-footer__top-title {
    font-family: var(--headline-07-font-family);
    font-size: var(--headline-07-font-size);
    line-height: var(--headline-07-line-height);
    font-weight: var(--headline-07-font-weight);
    letter-spacing: var(--headline-07-letter-spacing);
    text-transform: var(--headline-07-text-transform);
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    color: var(--footer-top-links);
    padding: 19.5px 52px 19.5px 24px;
    position: relative;
    border-bottom: 1px solid var(--footer-top-divider);
    cursor: pointer;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    text-align: left;
  }
  .tl-footer__top-title::after {
    content: "";
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-color: var(--footer-top-links);
    mask-image: var(--icon-chevron_down-svg);
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    transition: transform 0.3s ease;
  }
  .tl-footer__top-title:active {
    background-color: var(--footer-top-button-active);
  }
  .tl-footer__top-title:focus-visible {
    outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
    box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
    outline-offset: -2px;
    z-index: 1;
  }
  .tl-footer__group--expanded .tl-footer__top-title::after {
    transform: translateY(-50%) rotate(180deg);
  }
}
.tl-footer__main .tl-footer__link {
  font-family: var(--headline-07-font-family);
  font-size: var(--headline-07-font-size);
  line-height: var(--headline-07-line-height);
  font-weight: var(--headline-07-font-weight);
  letter-spacing: var(--headline-07-letter-spacing);
  text-transform: var(--headline-07-text-transform);
  display: inline-block;
  color: var(--footer-main-links);
  text-decoration: none;
}
.tl-footer__main .tl-footer__link:focus-visible {
  outline: var(--dimension-radius-focus-width) solid var(--color-foreground-border-accent-focus);
  box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
  outline-offset: 1px;
  z-index: 1;
}
.tl-footer__main .tl-footer__link:hover {
  text-decoration: underline;
}

.tl-footer {
  display: block;
}

.tl-footer__top {
  box-sizing: border-box;
  background-color: var(--footer-top-background);
  padding: 40px;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: 40px 24px;
}

.tl-footer__main {
  background-color: var(--footer-main-background);
  padding: 0 40px;
}

.tl-footer__main-top {
  padding: 40px 0;
  display: flex;
  justify-content: space-between;
}
.tl-footer__main-top--end {
  margin-left: auto;
}

.tl-footer__main-bottom {
  padding: 40px 0;
  display: flex;
  border-top: 1px solid var(--footer-main-divider);
}
.tl-footer__main-bottom .tl-footer__copyright {
  font-family: var(--detail-02-font-family);
  font-size: var(--detail-02-font-size);
  line-height: var(--detail-02-line-height);
  font-weight: var(--detail-02-font-weight);
  letter-spacing: var(--detail-02-letter-spacing);
  text-transform: var(--detail-02-text-transform);
  margin: 0;
  color: var(--footer-main-copyright);
  max-width: calc(100% - 117px - 16px);
}
.tl-footer__main-bottom .tl-footer__brand {
  background-image: var(--component-footer-logotype-cdn), var(--component-footer-logotype-local);
  background-repeat: no-repeat;
  background-size: 117px;
  background-position: right;
  width: 117px;
  height: 20px;
  padding: 0;
  margin: 0;
  margin-left: auto;
  font-size: 0;
  line-height: 0;
  text-indent: -9999px;
}

.tl-footer__top .tl-footer__group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.tl-footer__top .tl-footer__group:first-child:nth-last-child(1) {
  flex: 0 0 100%;
}
.tl-footer__top .tl-footer__group:first-child:nth-last-child(2), .tl-footer__top .tl-footer__group:nth-child(2):nth-last-child(1) {
  flex: 0 0 calc(50% - 12px);
}
.tl-footer__top .tl-footer__group:first-child:nth-last-child(3), .tl-footer__top .tl-footer__group:nth-child(2):nth-last-child(2), .tl-footer__top .tl-footer__group:nth-child(3):nth-last-child(1) {
  flex: 0 0 calc(33.333% - 16px);
}
.tl-footer__top .tl-footer__group:first-child:nth-last-child(n+4), .tl-footer__top .tl-footer__group:first-child:nth-last-child(n+4) ~ .tl-footer__group {
  flex: 0 0 calc(25% - 18px);
}
.tl-footer__main-top--start .tl-footer__group, .tl-footer__main-top--end .tl-footer__group {
  display: flex;
  column-gap: 24px;
}

@media (max-width: 992px) {
  .tl-footer__top {
    display: block;
    width: 100%;
    padding: 0;
    overflow-x: hidden;
  }
  .tl-footer__top .tl-footer__group {
    gap: 0;
  }
  .tl-footer__main-top--start .tl-footer__group {
    flex-direction: column;
    gap: 8px;
  }
  .tl-footer__main {
    padding: 0 24px;
  }
  .tl-footer__main-top {
    flex-direction: column;
    row-gap: 48px;
    padding: 24px 0;
  }
  .tl-footer__main-top--end {
    flex-direction: row;
    gap: 8px;
    margin-left: unset;
  }
  .tl-footer__main-bottom {
    align-items: flex-start;
    padding: 24px 0 40px;
  }
  .tl-footer__main-bottom .tl-footer__brand {
    background-position: right;
  }
}
/**
 * Do not edit directly, this file was auto-generated.
 */
.scania tds-header,
.scania .tl-header {
  /* State & interaction colors */
  --component-header-color-background-open: var(--color-foreground-border-accent-focus);
  --component-header-color-foreground-selected: var(--color-foreground-icon-strong);
  --component-header-dropdown-item-background: var(--color-background-layer-02);
  --component-header-avatar-item-background: var(--color-background-layer-02);
  --component-header-app-launcher-meny-background: var(--color-background-layer-02);
  /* Sizing & spacing */
  --component-header-brand-logo-size: 30px;
  --component-header-space-profile-padding: 16px;
  --component-header-item-image-size: 34px;
  --component-header-item-image-left: 10px;
  --component-header-item-width: none;
  --component-header-item-border-right: 1px solid var(--header-basic-element-border);
  /* Borders */
  --component-header-border: none;
  /* Typography */
  --component-header-font-family-headline: var(--scania-font-family-display);
  --component-header-font-weight: var(--scania-font-weight-regular);
  --component-header-text-transform: none;
}
.scania {
  /* ── Light-mode overrides ───────────────────── */
}
.scania .tds-mode-light tds-header,
.scania .tds-mode-light .tl-header {
  --component-header-color-background: var(--color-brand-primary-800);
  --component-header-color-foreground-strong: var(--color-foreground-icon-inverse-strong);
  --component-header-color-background-hover: var(--color-brand-primary-700);
  --component-header-color-background-border: var(--color-brand-primary-700);
  --component-header-color-background-pressed: var(--color-brand-neutral-white);
  --component-header-color-background-selected: var(--color-brand-primary-700);
}
.scania {
  /* ── Dark-mode overrides ───────────────────── */
}
.scania .tds-mode-dark tds-header,
.scania .tds-mode-dark .tl-header {
  --component-header-color-background: var(--color-brand-primary-900);
  --component-header-color-foreground-strong: var(--color-foreground-icon-strong);
  --component-header-color-background-hover: var(--color-brand-primary-800);
  --component-header-color-background-border: var(--color-brand-primary-800);
  --component-header-color-background-pressed: var(--color-brand-primary-800);
  --component-header-color-background-selected: var(--color-brand-primary-800);
}

.traton tds-header,
.traton .tl-header {
  /* Base colors */
  --component-header-color-background: var(--color-background-base);
  --component-header-color-background-hover: var(--color-background-layer-01);
  --component-header-color-background-open: transparent;
  --component-header-color-foreground-strong: var(--color-foreground-icon-strong);
  --component-header-color-background-border: var(--traton-color-transparent-invisible-light);
  --component-header-color-background-pressed: var(--color-background-base);
  --component-header-color-foreground-selected: var(--color-foreground-icon-strong);
  /* Dropdown & launcher */
  --component-header-dropdown-item-background: var(--color-background-layer-01);
  --component-header-avatar-item-background: var(--color-background-layer-01);
  --component-header-app-launcher-meny-background: var(--color-background-layer-01);
  /* Sizing & spacing */
  --component-header-brand-logo-size: 106px;
  --component-header-space-profile-padding: 20px;
  --component-header-item-image-size: 24px;
  --component-header-item-image-left: 15px;
  --component-header-item-width: 122px;
  --component-header-item-border-right: none;
  /* Borders */
  --component-header-border: 2px solid var(--header-nav-item-border-active);
  /* Typography */
  --component-header-font-family-headline: var(--traton-font-family-display);
  --component-header-font-weight: var(--traton-font-weight-medium);
  --component-header-text-transform: uppercase;
}
.traton {
  /* ── Light-mode overrides ───────────────────── */
}
.traton .tds-mode-light tds-header,
.traton .tds-mode-light .tl-header {
  --component-header-color-background-selected: var(--color-background-layer-01);
}
.traton {
  /* ── Dark-mode overrides ───────────────────── */
}
.traton .tds-mode-dark tds-header,
.traton .tds-mode-dark .tl-header {
  --component-header-color-background-selected: var(--color-background-surface-100);
}

/*
  Tegel Lite specific overrides
  Keep this in last to ensure it has the highest specificity for Tegel Lite
*/
.scania .tl-header {
  --component-header-item-width: 30px;
  --component-header-dropdown-box-shadow: 0 3px 3px rgb(0 0 0 / 15%), 0 -1px 1px rgb(0 0 0 / 1%);
}

.traton .tl-header {
  --component-header-dropdown-box-shadow: none;
}

.tl-header {
  /* Layout */
  --tds-header-height: 64px;
  --tds-header-list-item-md-height: 48px;
  /* App launcher dropdown background */
  --tds-header-app-launcher-menu-background: var(--header-app-launcher-menu-background);
  /* Base text */
  --header-nav-item: var(--component-header-color-foreground-strong);
  /* Nav-item states */
  --header-nav-item-background-hover: var(--color-background-surface-100);
  --header-nav-item-background-selected: var(--component-header-dropdown-item-background);
  --header-nav-item-border-pressed: var(--color-foreground-border-accent-focus);
  --header-item-hover: var(--component-header-color-background-hover);
  /* Dropdown menu items */
  --header-nav-dropdown-item-background: var(--component-header-dropdown-item-background);
  --header-nav-dropdown-item-border: var(--color-foreground-border-discrete);
  /* Dropdown “opened” state */
  --tds-header-nav-item-dropdown-opened-background: var(--tds-white);
  --tds-header-nav-item-dropdown-opened-background-hover: var(--tds-grey-100);
  --tds-header-nav-item-dropdown-opened-background-selected: var(--tds-grey-100);
  --tds-header-nav-item-dropdown-opened-background-pressed: var(--tds-grey-300);
  --header-nav-item-dropdown-opened: var(--component-header-color-foreground-selected);
  /* Basic element ("Bento") separators & backgrounds */
  --header-basic-element-border: var(--component-header-color-background-border);
  --header-basic-element-border-open: var(--component-header-color-background-open);
  --header-basic-element-background-pressed: var(--component-header-dropdown-item-background);
  --header-basic-element-background-selected: var(--component-header-dropdown-item-background);
  /* Avatar dropdown */
  --header-avatar-item-background: var(--component-header-avatar-item-background);
  --header-avatar-item: var(--color-foreground-text-soft);
  /* App launcher (list) */
  --header-app-launcher-menu-background: var(--component-header-app-launcher-meny-background);
  --header-app-launcher-category-title: var(--color-foreground-text-soft);
  --header-app-launcher-item: var(--color-foreground-text-defined);
  /* App launcher (grid) */
  --header-app-launcher-grid-category-title: var(--color-foreground-text-soft);
  --header-app-launcher-grid-hover-background: var(--color-background-surface-200);
  /* Brand symbol */
  --header-brand-item-width: var(--component-header-item-width);
  /* Brand logo */
  --header-brand-logo-size: var(--component-header-brand-logo-size);
  /* Header item */
  --header-item-image-left: var(--component-header-item-image-left);
  --header-item-image-size: var(--component-header-item-image-size);
  --header-item-border-right: var(--component-header-item-border-right);
  /* Header title */
  --header-font-weight: var(--component-header-font-weight);
  --header-font-family-headline: var(--component-header-font-family-headline);
  --header-text-transform: var(--component-header-text-transform);
  --header-dropdown-box-shadow: var(--component-header-dropdown-box-shadow);
}

.scania {
  /* Light mode - explicit light mode class */
}
.scania .tl-mode-light .tl-header {
  --header-background: var(--color-brand-primary-800);
  --header-nav-item: var(--color-foreground-icon-inverse-strong);
  --header-item-hover: var(--color-brand-primary-700);
  --header-basic-element-border: var(--color-brand-primary-700);
  --header-basic-element-background-pressed: var(--color-brand-neutral-white);
  --header-basic-element-background-selected: var(--color-brand-primary-700);
}
.scania {
  /* Dark mode - override with dark colors */
}
.scania .tl-mode-dark .tl-header {
  --header-background: var(--color-brand-primary-900);
  --header-nav-item: var(--color-foreground-icon-strong);
  --header-item-hover: var(--color-brand-primary-800);
  --header-basic-element-border: var(--color-brand-primary-800);
  --header-basic-element-background-pressed: var(--color-brand-primary-800);
  --header-basic-element-background-selected: var(--color-brand-primary-800);
}
.scania {
  /* Default .tl-header (works for no mode specified - defaults to light) */
}
.scania .tl-header {
  /* Brand logo */
  --header-logotype-local: var(--tds-background-image-scania-symbol-svg-local);
  --header-logotype-cdn: var(--tds-background-image-scania-symbol-svg);
  --component-header-space-profile-padding: 16px;
  /* Background defaults to light mode */
  --header-background: var(--color-brand-primary-800);
  --header-nav-item: var(--color-foreground-icon-inverse-strong);
  --header-item-hover: var(--color-brand-primary-700);
  --header-basic-element-border: var(--color-brand-primary-700);
  --header-basic-element-background-pressed: var(--color-brand-neutral-white);
  --header-basic-element-background-selected: var(--color-brand-primary-700);
}

.traton .tl-mode-dark .tl-header {
  /* Brand logo - White for dark mode */
  --header-logotype-local: var(--traton-logotype-white-svg-local);
  --header-logotype-cdn: var(--traton-logotype-white-svg);
  /* Background - uses base from traton tokens */
  --header-background: var(--color-background-base);
  --header-nav-item: var(--color-foreground-icon-strong);
  --header-item-hover: var(--color-background-layer-01);
  --header-basic-element-border: var(--traton-color-transparent-invisible-light);
  --header-basic-element-background-pressed: var(--color-background-base);
  --header-basic-element-background-selected: var(--color-background-surface-100);
}
.traton .tl-mode-light .tl-header {
  /* Brand logo - Black for light mode */
  --header-logotype-local: var(--traton-logotype-black-svg-local);
  --header-logotype-cdn: var(--traton-logotype-black-svg);
  /* Background - uses base from traton tokens */
  --header-background: var(--color-background-base);
  --header-nav-item: var(--color-foreground-icon-strong);
  --header-item-hover: var(--color-background-layer-01);
  --header-basic-element-border: var(--traton-color-transparent-invisible-light);
  --header-basic-element-background-pressed: var(--color-background-base);
  --header-basic-element-background-selected: var(--color-background-layer-01);
}
.traton .tl-header {
  /* Brand logo - Black as default (for no mode specified) */
  --header-logotype-local: var(--traton-logotype-black-svg-local);
  --header-logotype-cdn: var(--traton-logotype-black-svg);
  --component-header-space-profile-padding: 20px;
  --header-background: transparent;
}

/* Header Elements */
.tl-header__item-wrapper {
  all: unset;
  box-sizing: border-box;
}
.tl-header__item-wrapper * {
  box-sizing: border-box;
}
.tl-header__item-wrapper {
  font-family: var(--headline-07-font-family);
  font-size: var(--headline-07-font-size);
  line-height: var(--headline-07-line-height);
  font-weight: var(--headline-07-font-weight);
  letter-spacing: var(--headline-07-letter-spacing);
  text-transform: var(--headline-07-text-transform);
  background-color: var(--header-background);
  border-right: 1px solid var(--header-basic-element-border);
  color: var(--header-nav-item);
  width: 100%;
  height: 100%;
  cursor: pointer;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tl-header__item-wrapper:has(.tl-header__brand) {
  padding: 0 19px;
}
.tl-header__item-wrapper:hover {
  background-color: var(--header-item-hover);
}
.tl-header__item-wrapper:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--color-foreground-border-accent-focus);
}
.tl-header__item-wrapper:active {
  padding-top: 2px;
  padding-bottom: 2px;
  background-color: var(--header-basic-element-background-selected);
  box-shadow: inset 0 0 0 2px var(--header-nav-item-border-pressed);
}

.tl-header__item-wrapper .tl-link__icon {
  position: relative;
  margin-left: -6px;
  left: 3px;
  transition: background 0.2s ease-in-out, color 0.2s ease-in-out;
}

/** The breakpoint at which the layout changes from fixed size to full-width. */
.tl-header__dropdown-wrapper {
  all: unset;
  box-sizing: border-box;
}
.tl-header__dropdown-wrapper * {
  box-sizing: border-box;
}
.tl-header__dropdown-wrapper {
  background-color: var(--header-background);
  border-right: 1px solid var(--header-basic-element-border);
  color: var(--header-nav-item);
  width: 100%;
  height: 100%;
  cursor: pointer;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tl-header__dropdown-wrapper:hover {
  background-color: var(--header-item-hover);
}
.tl-header__dropdown-wrapper:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--color-foreground-border-accent-focus);
}
.tl-header__dropdown-wrapper:active {
  background-color: var(--header-basic-element-background-selected);
  box-shadow: inset 0 0 0 2px var(--color-foreground-border-accent-focus);
}
.tl-header__dropdown-wrapper--open {
  background-color: var(--component-header-color-background-pressed);
  color: var(--header-nav-item-dropdown-opened);
  position: relative;
}
.tl-header__dropdown-wrapper--open:hover {
  background-color: var(--component-header-color-background-pressed);
}
.tl-header__dropdown-wrapper--open:active {
  background-color: var(--component-header-color-background-pressed);
  box-shadow: inset 0 0 0 2px var(--color-foreground-border-accent-focus);
}
.tl-header__dropdown-wrapper--selected {
  border-bottom: 4px solid var(--header-nav-item-border-pressed);
}

.tl-header__dropdown-wrapper-user {
  all: unset;
  box-sizing: border-box;
}
.tl-header__dropdown-wrapper-user * {
  box-sizing: border-box;
}
.tl-header__dropdown-wrapper-user {
  background-color: var(--header-background);
  border-right: 1px solid var(--header-basic-element-border);
  color: var(--header-nav-item);
  width: 100%;
  height: 100%;
  cursor: pointer;
  padding: var(--component-header-space-profile-padding);
  display: flex;
  align-items: center;
  gap: 8px;
}
.tl-header__dropdown-wrapper-user:hover {
  background-color: var(--header-item-hover);
}
.tl-header__dropdown-wrapper-user:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--color-foreground-border-accent-focus);
}
.tl-header__dropdown-wrapper-user:active {
  background-color: var(--header-basic-element-background-selected);
  box-shadow: inset 0 0 0 2px var(--color-foreground-border-accent-focus);
}
.tl-header__dropdown-wrapper-user--open {
  background-color: var(--component-header-color-background-pressed);
  color: var(--header-nav-item-dropdown-opened);
  position: relative;
}
.tl-header__dropdown-wrapper-user--open:hover {
  background-color: var(--component-header-color-background-pressed);
}
.tl-header__dropdown-wrapper-user--open:active {
  background-color: var(--component-header-color-background-pressed);
  box-shadow: inset 0 0 0 2px var(--color-foreground-border-accent-focus);
}
.tl-header__dropdown-wrapper-user--selected {
  border-bottom: 4px solid var(--header-nav-item-border-pressed);
}

.tl-header__dropdown-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
  transform-origin: center center;
}
.tl-header__dropdown-icon--rotated {
  transform: rotate(180deg);
}

.tl-header__dropdown-menu {
  all: unset;
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--tds-header-app-launcher-menu-background);
  box-shadow: var(--header-dropdown-box-shadow);
  min-width: 190px;
  max-height: calc(100vh - var(--tds-header-height));
  overflow-y: auto;
}
.tl-header__dropdown-menu::-webkit-scrollbar {
  width: var(--tl-scrollbar-width);
}
.tl-header__dropdown-menu::-webkit-scrollbar-track {
  background: var(--tl-scrollbar-track-color);
}
.tl-header__dropdown-menu::-webkit-scrollbar-thumb {
  border-radius: 40px;
  background: var(--tl-scrollbar-thumb-color);
  border-width: var(--tl-scrollbar-thumb-border-width);
  border-style: solid;
  border-color: transparent;
  background-clip: padding-box;
}
.tl-header__dropdown-menu::-webkit-scrollbar-thumb:hover {
  border-width: var(--tl-scrollbar-thumb-border-hover-width);
}
.tl-header__dropdown-menu::-webkit-scrollbar-button {
  height: 0;
  width: 0;
}
@supports not selector(::-webkit-scrollbar) {
  .tl-header__dropdown-menu {
    scrollbar-color: var(--tl-scrollbar-thumb-color) var(--tl-scrollbar-track-color);
    scrollbar-width: var(--tl-scrollbar-width-standard);
  }
}
@media all and (max-width: 384px) {
  .tl-header__dropdown-menu {
    width: 100vw;
  }
}
.tl-header__dropdown-menu--open {
  display: block;
}

.tl-header__user-menu {
  all: unset;
  display: none;
  position: fixed;
  top: var(--tds-header-height);
  right: 0;
  left: auto;
  background: var(--tds-header-app-launcher-menu-background);
  box-shadow: var(--header-dropdown-box-shadow);
  min-width: 290px;
  max-height: calc(100vh - var(--tds-header-height));
  overflow-y: auto;
  border-radius: 4px;
}
.tl-header__user-menu::-webkit-scrollbar {
  width: var(--tl-scrollbar-width);
}
.tl-header__user-menu::-webkit-scrollbar-track {
  background: var(--tl-scrollbar-track-color);
}
.tl-header__user-menu::-webkit-scrollbar-thumb {
  border-radius: 40px;
  background: var(--tl-scrollbar-thumb-color);
  border-width: var(--tl-scrollbar-thumb-border-width);
  border-style: solid;
  border-color: transparent;
  background-clip: padding-box;
}
.tl-header__user-menu::-webkit-scrollbar-thumb:hover {
  border-width: var(--tl-scrollbar-thumb-border-hover-width);
}
.tl-header__user-menu::-webkit-scrollbar-button {
  height: 0;
  width: 0;
}
@supports not selector(::-webkit-scrollbar) {
  .tl-header__user-menu {
    scrollbar-color: var(--tl-scrollbar-thumb-color) var(--tl-scrollbar-track-color);
    scrollbar-width: var(--tl-scrollbar-width-standard);
  }
}
.tl-header__user-menu--open {
  display: block;
}

.tl-header__launcher-menu {
  all: unset;
  display: none;
  position: fixed;
  top: var(--tds-header-height);
  right: 0;
  left: auto;
  background: var(--tds-header-app-launcher-menu-background);
  box-shadow: var(--header-dropdown-box-shadow);
  min-width: 320px;
  max-height: calc(100vh - var(--tds-header-height));
  overflow-y: auto;
}
.tl-header__launcher-menu::-webkit-scrollbar {
  width: var(--tl-scrollbar-width);
}
.tl-header__launcher-menu::-webkit-scrollbar-track {
  background: var(--tl-scrollbar-track-color);
}
.tl-header__launcher-menu::-webkit-scrollbar-thumb {
  border-radius: 40px;
  background: var(--tl-scrollbar-thumb-color);
  border-width: var(--tl-scrollbar-thumb-border-width);
  border-style: solid;
  border-color: transparent;
  background-clip: padding-box;
}
.tl-header__launcher-menu::-webkit-scrollbar-thumb:hover {
  border-width: var(--tl-scrollbar-thumb-border-hover-width);
}
.tl-header__launcher-menu::-webkit-scrollbar-button {
  height: 0;
  width: 0;
}
@supports not selector(::-webkit-scrollbar) {
  .tl-header__launcher-menu {
    scrollbar-color: var(--tl-scrollbar-thumb-color) var(--tl-scrollbar-track-color);
    scrollbar-width: var(--tl-scrollbar-width-standard);
  }
}
.tl-header__launcher-menu--open {
  display: block;
}

.tl-header__launcher-menu-grid {
  all: unset;
  display: none;
  position: fixed;
  top: var(--tds-header-height);
  right: 0;
  left: auto;
  background: var(--tds-header-app-launcher-menu-background);
  box-shadow: var(--header-dropdown-box-shadow);
  min-width: 320px;
  max-height: calc(100vh - var(--tds-header-height));
  overflow-y: auto;
  border-radius: 4px;
}
.tl-header__launcher-menu-grid::-webkit-scrollbar {
  width: var(--tl-scrollbar-width);
}
.tl-header__launcher-menu-grid::-webkit-scrollbar-track {
  background: var(--tl-scrollbar-track-color);
}
.tl-header__launcher-menu-grid::-webkit-scrollbar-thumb {
  border-radius: 40px;
  background: var(--tl-scrollbar-thumb-color);
  border-width: var(--tl-scrollbar-thumb-border-width);
  border-style: solid;
  border-color: transparent;
  background-clip: padding-box;
}
.tl-header__launcher-menu-grid::-webkit-scrollbar-thumb:hover {
  border-width: var(--tl-scrollbar-thumb-border-hover-width);
}
.tl-header__launcher-menu-grid::-webkit-scrollbar-button {
  height: 0;
  width: 0;
}
@supports not selector(::-webkit-scrollbar) {
  .tl-header__launcher-menu-grid {
    scrollbar-color: var(--tl-scrollbar-thumb-color) var(--tl-scrollbar-track-color);
    scrollbar-width: var(--tl-scrollbar-width-standard);
  }
}
.tl-header__launcher-menu-grid--open {
  display: block;
}

.tl-header__dropdown-menu-item {
  display: block;
  box-sizing: border-box;
  height: var(--tds-header-list-item-md-height);
  width: 100%;
}
.tl-header__dropdown-menu-item:not(:last-child) {
  border-bottom: 1px solid var(--header-nav-dropdown-item-border);
}
.tl-header__dropdown-menu-item--selected {
  background-color: var(--header-nav-item-background-selected);
  padding-right: 4px;
  border-left: 4px solid var(--header-nav-item-border-pressed);
}

.tl-header__user-menu-item {
  background-color: var(--header-avatar-item-background);
  display: flex;
  height: 84px;
}

.tl-header__user-menu-box {
  gap: 16px;
  width: 100%;
  padding: 0 16px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--header-nav-dropdown-item-border);
}

.tl-header__user-menu-image {
  width: var(--header-item-image-size);
  height: var(--header-item-image-size);
  border-radius: 50%;
  overflow: hidden;
}

.tl-header__user-menu-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tl-header__user-menu-header {
  font-family: var(--detail-06-font-family);
  font-size: var(--detail-06-font-size);
  line-height: var(--detail-06-line-height);
  font-weight: var(--detail-06-font-weight);
  letter-spacing: var(--detail-06-letter-spacing);
  text-transform: var(--detail-06-text-transform);
  color: var(--color-foreground-text-defined);
}

.tl-header__user-menu-subheader {
  font-family: var(--headline-07-font-family);
  font-size: var(--headline-07-font-size);
  line-height: var(--headline-07-line-height);
  font-weight: var(--headline-07-font-weight);
  letter-spacing: var(--headline-07-letter-spacing);
  text-transform: var(--headline-07-text-transform);
  color: var(--header-avatar-item);
}

.tl-header__launcher-menu-list {
  box-sizing: border-box;
  padding: 12px;
  margin: 0;
  list-style: none;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  background-color: var(--header-nav-dropdown-item-background);
}

.tl-header__launcher-menu-item {
  display: block;
  width: 96px;
  height: 96px;
}

.tl-header__launcher-menu-title {
  all: unset;
  box-sizing: border-box;
  font-family: var(--text-component-title-02-font-family);
  font-size: var(--text-component-title-02-font-size);
  line-height: var(--text-component-title-02-line-height);
  font-weight: var(--text-component-title-02-font-weight);
  letter-spacing: var(--text-component-title-02-letter-spacing);
  text-transform: var(--text-component-title-02-text-transform);
  background-color: var(--header-nav-dropdown-item-background);
  color: var(--header-app-launcher-grid-category-title);
  height: 48px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--header-nav-dropdown-item-border);
  margin: 0;
}

.tl-header__dropdown-menu-item a,
.tl-header__dropdown-menu-item button {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 24px;
  width: 100%;
  font-family: var(--detail-02-font-family);
  font-size: var(--detail-02-font-size);
  line-height: var(--detail-02-line-height);
  font-weight: var(--detail-02-font-weight);
  letter-spacing: var(--detail-02-letter-spacing);
  text-transform: var(--detail-02-text-transform);
  background-color: var(--header-nav-dropdown-item-background);
  color: var(--color-foreground-text-defined);
}
.tl-header__dropdown-menu-item a:hover,
.tl-header__dropdown-menu-item button:hover {
  background-color: var(--header-nav-item-background-hover);
  cursor: pointer;
}
.tl-header__dropdown-menu-item a:focus-visible,
.tl-header__dropdown-menu-item button:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--color-foreground-border-accent-focus);
}
.tl-header__dropdown-menu-item--selected a,
.tl-header__dropdown-menu-item--selected button {
  background-color: var(--header-nav-item-background-selected);
}
.tl-header__launcher-menu-item a,
.tl-header__launcher-menu-item button {
  all: unset;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 0 12px;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 8px;
  font-family: var(--detail-05-font-family);
  font-size: var(--detail-05-font-size);
  line-height: var(--detail-05-line-height);
  font-weight: var(--detail-05-font-weight);
  letter-spacing: var(--detail-05-letter-spacing);
  text-transform: var(--detail-05-text-transform);
  background-color: var(--header-nav-dropdown-item-background);
  color: var(--color-foreground-text-defined);
  border-radius: 4px;
  transition: background-color 150ms ease;
}
.tl-header__launcher-menu-item a:hover,
.tl-header__launcher-menu-item button:hover {
  background-color: var(--header-app-launcher-grid-hover-background);
  cursor: pointer;
}
.tl-header__launcher-menu-item a:focus-visible,
.tl-header__launcher-menu-item button:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--color-foreground-border-accent-focus);
}

.tl-header__user-menu-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tl-header__title {
  all: unset;
  box-sizing: border-box;
}
.tl-header__title * {
  box-sizing: border-box;
}
.tl-header__title {
  border-right: 1px solid var(--header-basic-element-border);
  height: 100%;
}

.tl-header__title-text {
  font-size: 14px;
  padding: 4px 32px 0 16px;
  color: var(--header-nav-item);
  font-weight: var(--header-font-weight);
  font-family: var(--header-font-family-headline);
  text-transform: var(--header-text-transform);
  letter-spacing: normal;
  position: relative;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.tl-header__brand {
  display: block;
  width: var(--header-brand-item-width);
  height: 30px;
  background-image: var(--header-logotype-local), var(--header-logotype-cdn);
  background-size: var(--header-brand-logo-size) auto;
  background-position: center;
  background-repeat: no-repeat;
}

.tl-header {
  display: block;
  height: var(--tds-header-height);
  background-color: var(--header-background);
  width: 100%;
}

.tl-header__nav {
  box-sizing: border-box;
}
.tl-header__nav * {
  box-sizing: border-box;
}
.tl-header__nav {
  background-color: var(--header-background);
  width: 100%;
  display: block;
}

.tl-header__list {
  display: flex;
  justify-content: center;
  align-items: center;
  height: var(--tds-header-height);
  list-style: none;
  padding: 0;
  margin: 0;
}

.tl-header__item {
  display: none;
  height: 100%;
}
@media (min-width: 992px) {
  .tl-header__item {
    display: block;
  }
}
.tl-header__item:has(.tl-icon--burger), .tl-header__item:has(.tl-header__brand) {
  display: block;
}

.tl-header__dropdown {
  display: none;
  font-family: var(--headline-07-font-family);
  font-size: var(--headline-07-font-size);
  line-height: var(--headline-07-line-height);
  font-weight: var(--headline-07-font-weight);
  letter-spacing: var(--headline-07-letter-spacing);
  text-transform: var(--headline-07-text-transform);
  height: 100%;
  position: relative;
}
@media (min-width: 992px) {
  .tl-header__dropdown {
    display: block;
  }
}
.tl-header__dropdown:has(.tl-icon--bento) {
  display: block;
}

.tl-header__middle-spacer {
  display: block;
  flex-grow: 1;
  height: var(--tds-header-height);
  border-right: 1px solid var(--header-basic-element-border);
}

/**
 * Do not edit directly, this file was auto-generated.
 */
.tl-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  flex-shrink: 0;
  color: inherit;
  mask-image: none;
}
.tl-icon--24v_battery {
  mask-image: var(--icon-24v_battery-svg);
  background-color: currentcolor;
}
.tl-icon--24v_battery_inactive {
  mask-image: var(--icon-24v_battery_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--acceleration {
  mask-image: var(--icon-acceleration-svg);
  background-color: currentcolor;
}
.tl-icon--acceleration_inactive {
  mask-image: var(--icon-acceleration_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--adblue {
  mask-image: var(--icon-adblue-svg);
  background-color: currentcolor;
}
.tl-icon--adblue_inactive {
  mask-image: var(--icon-adblue_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--arrow_diagonal {
  mask-image: var(--icon-arrow_diagonal-svg);
  background-color: currentcolor;
}
.tl-icon--arrow_down {
  mask-image: var(--icon-arrow_down-svg);
  background-color: currentcolor;
}
.tl-icon--arrow_left {
  mask-image: var(--icon-arrow_left-svg);
  background-color: currentcolor;
}
.tl-icon--arrow_right {
  mask-image: var(--icon-arrow_right-svg);
  background-color: currentcolor;
}
.tl-icon--arrow_up {
  mask-image: var(--icon-arrow_up-svg);
  background-color: currentcolor;
}
.tl-icon--audio {
  mask-image: var(--icon-audio-svg);
  background-color: currentcolor;
}
.tl-icon--audio_inactive {
  mask-image: var(--icon-audio_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--award {
  mask-image: var(--icon-award-svg);
  background-color: currentcolor;
}
.tl-icon--back {
  mask-image: var(--icon-back-svg);
  background-color: currentcolor;
}
.tl-icon--backward {
  mask-image: var(--icon-backward-svg);
  background-color: currentcolor;
}
.tl-icon--backward_inactive {
  mask-image: var(--icon-backward_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--bento {
  mask-image: var(--icon-bento-svg);
  background-color: currentcolor;
}
.tl-icon--bug {
  mask-image: var(--icon-bug-svg);
  background-color: currentcolor;
}
.tl-icon--bug_inactive {
  mask-image: var(--icon-bug_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--burger {
  mask-image: var(--icon-burger-svg);
  background-color: currentcolor;
}
.tl-icon--bus {
  mask-image: var(--icon-bus-svg);
  background-color: currentcolor;
}
.tl-icon--bus_inactive {
  mask-image: var(--icon-bus_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--cab_door {
  mask-image: var(--icon-cab_door-svg);
  background-color: currentcolor;
}
.tl-icon--calendar {
  mask-image: var(--icon-calendar-svg);
  background-color: currentcolor;
}
.tl-icon--calendar_inactive {
  mask-image: var(--icon-calendar_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--camera {
  mask-image: var(--icon-camera-svg);
  background-color: currentcolor;
}
.tl-icon--camera_inactive {
  mask-image: var(--icon-camera_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--card {
  mask-image: var(--icon-card-svg);
  background-color: currentcolor;
}
.tl-icon--cart {
  mask-image: var(--icon-cart-svg);
  background-color: currentcolor;
}
.tl-icon--charging_complete {
  mask-image: var(--icon-charging_complete-svg);
  background-color: currentcolor;
}
.tl-icon--charging_failed {
  mask-image: var(--icon-charging_failed-svg);
  background-color: currentcolor;
}
.tl-icon--charging_speed {
  mask-image: var(--icon-charging_speed-svg);
  background-color: currentcolor;
}
.tl-icon--charging_speed_inactive {
  mask-image: var(--icon-charging_speed_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--charging_stopped {
  mask-image: var(--icon-charging_stopped-svg);
  background-color: currentcolor;
}
.tl-icon--chevron_down {
  mask-image: var(--icon-chevron_down-svg);
  background-color: currentcolor;
}
.tl-icon--chevron_left {
  mask-image: var(--icon-chevron_left-svg);
  background-color: currentcolor;
}
.tl-icon--chevron_right {
  mask-image: var(--icon-chevron_right-svg);
  background-color: currentcolor;
}
.tl-icon--chevron_up {
  mask-image: var(--icon-chevron_up-svg);
  background-color: currentcolor;
}
.tl-icon--clock {
  mask-image: var(--icon-clock-svg);
  background-color: currentcolor;
}
.tl-icon--clock_inactive {
  mask-image: var(--icon-clock_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--configurator {
  mask-image: var(--icon-configurator-svg);
  background-color: currentcolor;
}
.tl-icon--contact {
  mask-image: var(--icon-contact-svg);
  background-color: currentcolor;
}
.tl-icon--contact_inactive {
  mask-image: var(--icon-contact_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--cookie {
  mask-image: var(--icon-cookie-svg);
  background-color: currentcolor;
}
.tl-icon--cookie_inactive {
  mask-image: var(--icon-cookie_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--coolant_level {
  mask-image: var(--icon-coolant_level-svg);
  background-color: currentcolor;
}
.tl-icon--coolant_level_inactive {
  mask-image: var(--icon-coolant_level_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--copy {
  mask-image: var(--icon-copy-svg);
  background-color: currentcolor;
}
.tl-icon--cross {
  mask-image: var(--icon-cross-svg);
  background-color: currentcolor;
}
.tl-icon--cup {
  mask-image: var(--icon-cup-svg);
  background-color: currentcolor;
}
.tl-icon--cup_inactive {
  mask-image: var(--icon-cup_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--dashboard {
  mask-image: var(--icon-dashboard-svg);
  background-color: currentcolor;
}
.tl-icon--department {
  mask-image: var(--icon-department-svg);
  background-color: currentcolor;
}
.tl-icon--department_inactive {
  mask-image: var(--icon-department_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--departure_scheduling {
  mask-image: var(--icon-departure_scheduling-svg);
  background-color: currentcolor;
}
.tl-icon--departure_scheduling_inactive {
  mask-image: var(--icon-departure_scheduling_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--diamond {
  mask-image: var(--icon-diamond-svg);
  background-color: currentcolor;
}
.tl-icon--diamond_inactive {
  mask-image: var(--icon-diamond_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--document {
  mask-image: var(--icon-document-svg);
  background-color: currentcolor;
}
.tl-icon--document_check {
  mask-image: var(--icon-document_check-svg);
  background-color: currentcolor;
}
.tl-icon--document_doc {
  mask-image: var(--icon-document_doc-svg);
  background-color: currentcolor;
}
.tl-icon--document_eye {
  mask-image: var(--icon-document_eye-svg);
  background-color: currentcolor;
}
.tl-icon--document_pdf {
  mask-image: var(--icon-document_pdf-svg);
  background-color: currentcolor;
}
.tl-icon--document_plus {
  mask-image: var(--icon-document_plus-svg);
  background-color: currentcolor;
}
.tl-icon--document_plus_inactive {
  mask-image: var(--icon-document_plus_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--document_ppt {
  mask-image: var(--icon-document_ppt-svg);
  background-color: currentcolor;
}
.tl-icon--document_tool {
  mask-image: var(--icon-document_tool-svg);
  background-color: currentcolor;
}
.tl-icon--document_wrong {
  mask-image: var(--icon-document_wrong-svg);
  background-color: currentcolor;
}
.tl-icon--document_xls {
  mask-image: var(--icon-document_xls-svg);
  background-color: currentcolor;
}
.tl-icon--dollar {
  mask-image: var(--icon-dollar-svg);
  background-color: currentcolor;
}
.tl-icon--doner {
  mask-image: var(--icon-doner-svg);
  background-color: currentcolor;
}
.tl-icon--double_kebab {
  mask-image: var(--icon-double_kebab-svg);
  background-color: currentcolor;
}
.tl-icon--download {
  mask-image: var(--icon-download-svg);
  background-color: currentcolor;
}
.tl-icon--driving_licence {
  mask-image: var(--icon-driving_licence-svg);
  background-color: currentcolor;
}
.tl-icon--driving_licence_inactive {
  mask-image: var(--icon-driving_licence_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--drop {
  mask-image: var(--icon-drop-svg);
  background-color: currentcolor;
}
.tl-icon--drop_inactive {
  mask-image: var(--icon-drop_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--edit {
  mask-image: var(--icon-edit-svg);
  background-color: currentcolor;
}
.tl-icon--edit_inactive {
  mask-image: var(--icon-edit_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--email {
  mask-image: var(--icon-email-svg);
  background-color: currentcolor;
}
.tl-icon--engine {
  mask-image: var(--icon-engine-svg);
  background-color: currentcolor;
}
.tl-icon--engine_inactive {
  mask-image: var(--icon-engine_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--environment {
  mask-image: var(--icon-environment-svg);
  background-color: currentcolor;
}
.tl-icon--environment_inactive {
  mask-image: var(--icon-environment_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--error {
  mask-image: var(--icon-error-svg);
  background-color: currentcolor;
}
.tl-icon--exit {
  mask-image: var(--icon-exit-svg);
  background-color: currentcolor;
}
.tl-icon--expand {
  mask-image: var(--icon-expand-svg);
  background-color: currentcolor;
}
.tl-icon--expand_inactive {
  mask-image: var(--icon-expand_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--export {
  mask-image: var(--icon-export-svg);
  background-color: currentcolor;
}
.tl-icon--export_inactive {
  mask-image: var(--icon-export_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--eye {
  mask-image: var(--icon-eye-svg);
  background-color: currentcolor;
}
.tl-icon--eye_inactive {
  mask-image: var(--icon-eye_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--face_dissatisfied {
  mask-image: var(--icon-face_dissatisfied-svg);
  background-color: currentcolor;
}
.tl-icon--face_neutral {
  mask-image: var(--icon-face_neutral-svg);
  background-color: currentcolor;
}
.tl-icon--face_satisfied {
  mask-image: var(--icon-face_satisfied-svg);
  background-color: currentcolor;
}
.tl-icon--factory {
  mask-image: var(--icon-factory-svg);
  background-color: currentcolor;
}
.tl-icon--factory_inactive {
  mask-image: var(--icon-factory_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--ferry {
  mask-image: var(--icon-ferry-svg);
  background-color: currentcolor;
}
.tl-icon--ferry_inactive {
  mask-image: var(--icon-ferry_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--filters {
  mask-image: var(--icon-filters-svg);
  background-color: currentcolor;
}
.tl-icon--filters_inactive {
  mask-image: var(--icon-filters_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--flash {
  mask-image: var(--icon-flash-svg);
  background-color: currentcolor;
}
.tl-icon--flash_inactive {
  mask-image: var(--icon-flash_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--folder {
  mask-image: var(--icon-folder-svg);
  background-color: currentcolor;
}
.tl-icon--forward {
  mask-image: var(--icon-forward-svg);
  background-color: currentcolor;
}
.tl-icon--forward_inactive {
  mask-image: var(--icon-forward_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--fuel {
  mask-image: var(--icon-fuel-svg);
  background-color: currentcolor;
}
.tl-icon--fuel_gauge {
  mask-image: var(--icon-fuel_gauge-svg);
  background-color: currentcolor;
}
.tl-icon--fuel_gauge_inactive {
  mask-image: var(--icon-fuel_gauge_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--fuel_inactive {
  mask-image: var(--icon-fuel_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--gift {
  mask-image: var(--icon-gift-svg);
  background-color: currentcolor;
}
.tl-icon--gift_inactive {
  mask-image: var(--icon-gift_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--global {
  mask-image: var(--icon-global-svg);
  background-color: currentcolor;
}
.tl-icon--guided_tour {
  mask-image: var(--icon-guided_tour-svg);
  background-color: currentcolor;
}
.tl-icon--guided_tour_inactive {
  mask-image: var(--icon-guided_tour_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--hatch_open {
  mask-image: var(--icon-hatch_open-svg);
  background-color: currentcolor;
}
.tl-icon--hatch_open_1 {
  mask-image: var(--icon-hatch_open_1-svg);
  background-color: currentcolor;
}
.tl-icon--hatch_open_2 {
  mask-image: var(--icon-hatch_open_2-svg);
  background-color: currentcolor;
}
.tl-icon--hatch_open_inactive {
  mask-image: var(--icon-hatch_open_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--heart {
  mask-image: var(--icon-heart-svg);
  background-color: currentcolor;
}
.tl-icon--heart_inactive {
  mask-image: var(--icon-heart_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--heating_inactive_screen {
  mask-image: var(--icon-heating_inactive_screen-svg);
  background-color: currentcolor;
}
.tl-icon--history {
  mask-image: var(--icon-history-svg);
  background-color: currentcolor;
}
.tl-icon--history_inactive {
  mask-image: var(--icon-history_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--home {
  mask-image: var(--icon-home-svg);
  background-color: currentcolor;
}
.tl-icon--home_inactive {
  mask-image: var(--icon-home_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--idea {
  mask-image: var(--icon-idea-svg);
  background-color: currentcolor;
}
.tl-icon--idea_inactive {
  mask-image: var(--icon-idea_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--image {
  mask-image: var(--icon-image-svg);
  background-color: currentcolor;
}
.tl-icon--image_add {
  mask-image: var(--icon-image_add-svg);
  background-color: currentcolor;
}
.tl-icon--image_inactive {
  mask-image: var(--icon-image_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--image_set {
  mask-image: var(--icon-image_set-svg);
  background-color: currentcolor;
}
.tl-icon--info {
  mask-image: var(--icon-info-svg);
  background-color: currentcolor;
}
.tl-icon--insights {
  mask-image: var(--icon-insights-svg);
  background-color: currentcolor;
}
.tl-icon--kebab {
  mask-image: var(--icon-kebab-svg);
  background-color: currentcolor;
}
.tl-icon--key {
  mask-image: var(--icon-key-svg);
  background-color: currentcolor;
}
.tl-icon--key_inactive {
  mask-image: var(--icon-key_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--language {
  mask-image: var(--icon-language-svg);
  background-color: currentcolor;
}
.tl-icon--layer {
  mask-image: var(--icon-layer-svg);
  background-color: currentcolor;
}
.tl-icon--layer_inactive {
  mask-image: var(--icon-layer_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--link {
  mask-image: var(--icon-link-svg);
  background-color: currentcolor;
}
.tl-icon--link_broken {
  mask-image: var(--icon-link_broken-svg);
  background-color: currentcolor;
}
.tl-icon--list {
  mask-image: var(--icon-list-svg);
  background-color: currentcolor;
}
.tl-icon--list_inactive {
  mask-image: var(--icon-list_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--lock {
  mask-image: var(--icon-lock-svg);
  background-color: currentcolor;
}
.tl-icon--lock_inactive {
  mask-image: var(--icon-lock_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--map_cursor {
  mask-image: var(--icon-map_cursor-svg);
  background-color: currentcolor;
}
.tl-icon--map_cursor_inactive {
  mask-image: var(--icon-map_cursor_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--maximize_fullscreen {
  mask-image: var(--icon-maximize_fullscreen-svg);
  background-color: currentcolor;
}
.tl-icon--meatballs {
  mask-image: var(--icon-meatballs-svg);
  background-color: currentcolor;
}
.tl-icon--merge {
  mask-image: var(--icon-merge-svg);
  background-color: currentcolor;
}
.tl-icon--merge_inactive {
  mask-image: var(--icon-merge_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--message {
  mask-image: var(--icon-message-svg);
  background-color: currentcolor;
}
.tl-icon--message_inactive {
  mask-image: var(--icon-message_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--microphone {
  mask-image: var(--icon-microphone-svg);
  background-color: currentcolor;
}
.tl-icon--microphone_inactive {
  mask-image: var(--icon-microphone_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--mileage {
  mask-image: var(--icon-mileage-svg);
  background-color: currentcolor;
}
.tl-icon--mileage_inactive {
  mask-image: var(--icon-mileage_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--minimize_fullscreen {
  mask-image: var(--icon-minimize_fullscreen-svg);
  background-color: currentcolor;
}
.tl-icon--minus {
  mask-image: var(--icon-minus-svg);
  background-color: currentcolor;
}
.tl-icon--navigate {
  mask-image: var(--icon-navigate-svg);
  background-color: currentcolor;
}
.tl-icon--navigate_inactive {
  mask-image: var(--icon-navigate_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--notification {
  mask-image: var(--icon-notification-svg);
  background-color: currentcolor;
}
.tl-icon--notification_inactive {
  mask-image: var(--icon-notification_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--notification_snooze {
  mask-image: var(--icon-notification_snooze-svg);
  background-color: currentcolor;
}
.tl-icon--oil_level {
  mask-image: var(--icon-oil_level-svg);
  background-color: currentcolor;
}
.tl-icon--oil_level_inactive {
  mask-image: var(--icon-oil_level_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--paperclip {
  mask-image: var(--icon-paperclip-svg);
  background-color: currentcolor;
}
.tl-icon--pause {
  mask-image: var(--icon-pause-svg);
  background-color: currentcolor;
}
.tl-icon--pause_inactive {
  mask-image: var(--icon-pause_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--phone {
  mask-image: var(--icon-phone-svg);
  background-color: currentcolor;
}
.tl-icon--phone_inactive {
  mask-image: var(--icon-phone_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--pie_chart {
  mask-image: var(--icon-pie_chart-svg);
  background-color: currentcolor;
}
.tl-icon--pin {
  mask-image: var(--icon-pin-svg);
  background-color: currentcolor;
}
.tl-icon--pin_inactive {
  mask-image: var(--icon-pin_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--placeholder {
  mask-image: var(--icon-placeholder-svg);
  background-color: currentcolor;
}
.tl-icon--play {
  mask-image: var(--icon-play-svg);
  background-color: currentcolor;
}
.tl-icon--play_inactive {
  mask-image: var(--icon-play_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--plus {
  mask-image: var(--icon-plus-svg);
  background-color: currentcolor;
}
.tl-icon--powerplug {
  mask-image: var(--icon-powerplug-svg);
  background-color: currentcolor;
}
.tl-icon--powerplug_inactive {
  mask-image: var(--icon-powerplug_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--print {
  mask-image: var(--icon-print-svg);
  background-color: currentcolor;
}
.tl-icon--print_inactive {
  mask-image: var(--icon-print_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--privacy {
  mask-image: var(--icon-privacy-svg);
  background-color: currentcolor;
}
.tl-icon--privacy_inactive {
  mask-image: var(--icon-privacy_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--profile {
  mask-image: var(--icon-profile-svg);
  background-color: currentcolor;
}
.tl-icon--profile_inactive {
  mask-image: var(--icon-profile_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--prohibited {
  mask-image: var(--icon-prohibited-svg);
  background-color: currentcolor;
}
.tl-icon--proportions {
  mask-image: var(--icon-proportions-svg);
  background-color: currentcolor;
}
.tl-icon--proportions_inactive {
  mask-image: var(--icon-proportions_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--range {
  mask-image: var(--icon-range-svg);
  background-color: currentcolor;
}
.tl-icon--range_inactive {
  mask-image: var(--icon-range_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--redirect {
  mask-image: var(--icon-redirect-svg);
  background-color: currentcolor;
}
.tl-icon--refresh {
  mask-image: var(--icon-refresh-svg);
  background-color: currentcolor;
}
.tl-icon--refresh_inactive {
  mask-image: var(--icon-refresh_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--reload {
  mask-image: var(--icon-reload-svg);
  background-color: currentcolor;
}
.tl-icon--reload_inactive {
  mask-image: var(--icon-reload_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--repeat {
  mask-image: var(--icon-repeat-svg);
  background-color: currentcolor;
}
.tl-icon--report {
  mask-image: var(--icon-report-svg);
  background-color: currentcolor;
}
.tl-icon--report_inactive {
  mask-image: var(--icon-report_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--route {
  mask-image: var(--icon-route-svg);
  background-color: currentcolor;
}
.tl-icon--route_inactive {
  mask-image: var(--icon-route_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--save {
  mask-image: var(--icon-save-svg);
  background-color: currentcolor;
}
.tl-icon--save_inactive {
  mask-image: var(--icon-save_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--search {
  mask-image: var(--icon-search-svg);
  background-color: currentcolor;
}
.tl-icon--send {
  mask-image: var(--icon-send-svg);
  background-color: currentcolor;
}
.tl-icon--send_inactive {
  mask-image: var(--icon-send_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--settings {
  mask-image: var(--icon-settings-svg);
  background-color: currentcolor;
}
.tl-icon--share {
  mask-image: var(--icon-share-svg);
  background-color: currentcolor;
}
.tl-icon--shuffle {
  mask-image: var(--icon-shuffle-svg);
  background-color: currentcolor;
}
.tl-icon--skip_backwards {
  mask-image: var(--icon-skip_backwards-svg);
  background-color: currentcolor;
}
.tl-icon--skip_forward {
  mask-image: var(--icon-skip_forward-svg);
  background-color: currentcolor;
}
.tl-icon--smartphone {
  mask-image: var(--icon-smartphone-svg);
  background-color: currentcolor;
}
.tl-icon--smartphone_inactive {
  mask-image: var(--icon-smartphone_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--sorting {
  mask-image: var(--icon-sorting-svg);
  background-color: currentcolor;
}
.tl-icon--speedometer {
  mask-image: var(--icon-speedometer-svg);
  background-color: currentcolor;
}
.tl-icon--speedometer_inactive {
  mask-image: var(--icon-speedometer_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--star {
  mask-image: var(--icon-star-svg);
  background-color: currentcolor;
}
.tl-icon--support {
  mask-image: var(--icon-support-svg);
  background-color: currentcolor;
}
.tl-icon--target {
  mask-image: var(--icon-target-svg);
  background-color: currentcolor;
}
.tl-icon--target_inactive {
  mask-image: var(--icon-target_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--temperature {
  mask-image: var(--icon-temperature-svg);
  background-color: currentcolor;
}
.tl-icon--temperature_inactive {
  mask-image: var(--icon-temperature_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--text {
  mask-image: var(--icon-text-svg);
  background-color: currentcolor;
}
.tl-icon--text_inactive {
  mask-image: var(--icon-text_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--thumbs_down {
  mask-image: var(--icon-thumbs_down-svg);
  background-color: currentcolor;
}
.tl-icon--thumbs_up {
  mask-image: var(--icon-thumbs_up-svg);
  background-color: currentcolor;
}
.tl-icon--tick {
  mask-image: var(--icon-tick-svg);
  background-color: currentcolor;
}
.tl-icon--timer {
  mask-image: var(--icon-timer-svg);
  background-color: currentcolor;
}
.tl-icon--tool {
  mask-image: var(--icon-tool-svg);
  background-color: currentcolor;
}
.tl-icon--tool_inactive {
  mask-image: var(--icon-tool_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--trailer {
  mask-image: var(--icon-trailer-svg);
  background-color: currentcolor;
}
.tl-icon--trailer_inactive {
  mask-image: var(--icon-trailer_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--trash {
  mask-image: var(--icon-trash-svg);
  background-color: currentcolor;
}
.tl-icon--trash_inactive {
  mask-image: var(--icon-trash_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--truck {
  mask-image: var(--icon-truck-svg);
  background-color: currentcolor;
}
.tl-icon--truck_inactive {
  mask-image: var(--icon-truck_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--undo {
  mask-image: var(--icon-undo-svg);
  background-color: currentcolor;
}
.tl-icon--undo_inactive {
  mask-image: var(--icon-undo_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--unlock {
  mask-image: var(--icon-unlock-svg);
  background-color: currentcolor;
}
.tl-icon--upload {
  mask-image: var(--icon-upload-svg);
  background-color: currentcolor;
}
.tl-icon--video {
  mask-image: var(--icon-video-svg);
  background-color: currentcolor;
}
.tl-icon--video_inactive {
  mask-image: var(--icon-video_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--wallet {
  mask-image: var(--icon-wallet-svg);
  background-color: currentcolor;
}
.tl-icon--warning {
  mask-image: var(--icon-warning-svg);
  background-color: currentcolor;
}
.tl-icon--weight {
  mask-image: var(--icon-weight-svg);
  background-color: currentcolor;
}
.tl-icon--weight_inactive {
  mask-image: var(--icon-weight_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--wifi {
  mask-image: var(--icon-wifi-svg);
  background-color: currentcolor;
}
.tl-icon--wifi_inactive {
  mask-image: var(--icon-wifi_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--windscreen_heating {
  mask-image: var(--icon-windscreen_heating-svg);
  background-color: currentcolor;
}
.tl-icon--windscreen_heating_inactive {
  mask-image: var(--icon-windscreen_heating_inactive-svg);
  background-color: currentcolor;
}
.tl-icon--12 {
  width: 12px;
  height: 12px;
}
.tl-icon--14 {
  width: 14px;
  height: 14px;
}
.tl-icon--16 {
  width: 16px;
  height: 16px;
}
.tl-icon--18 {
  width: 18px;
  height: 18px;
}
.tl-icon--20 {
  width: 20px;
  height: 20px;
}
.tl-icon--22 {
  width: 22px;
  height: 22px;
}
.tl-icon--24 {
  width: 24px;
  height: 24px;
}
.tl-icon--26 {
  width: 26px;
  height: 26px;
}
.tl-icon--28 {
  width: 28px;
  height: 28px;
}
.tl-icon--30 {
  width: 30px;
  height: 30px;
}
.tl-icon--32 {
  width: 32px;
  height: 32px;
}
.tl-icon--34 {
  width: 34px;
  height: 34px;
}
.tl-icon--36 {
  width: 36px;
  height: 36px;
}
.tl-icon--38 {
  width: 38px;
  height: 38px;
}
.tl-icon--40 {
  width: 40px;
  height: 40px;
}
.tl-icon--42 {
  width: 42px;
  height: 42px;
}
.tl-icon--44 {
  width: 44px;
  height: 44px;
}
.tl-icon--46 {
  width: 46px;
  height: 46px;
}
.tl-icon--48 {
  width: 48px;
  height: 48px;
}
.tl-icon--50 {
  width: 50px;
  height: 50px;
}
.tl-icon--52 {
  width: 52px;
  height: 52px;
}
.tl-icon--54 {
  width: 54px;
  height: 54px;
}
.tl-icon--56 {
  width: 56px;
  height: 56px;
}
.tl-icon--58 {
  width: 58px;
  height: 58px;
}
.tl-icon--60 {
  width: 60px;
  height: 60px;
}
.tl-icon--62 {
  width: 62px;
  height: 62px;
}
.tl-icon--64 {
  width: 64px;
  height: 64px;
}
.tl-icon--66 {
  width: 66px;
  height: 66px;
}
.tl-icon--68 {
  width: 68px;
  height: 68px;
}
.tl-icon--70 {
  width: 70px;
  height: 70px;
}
.tl-icon--72 {
  width: 72px;
  height: 72px;
}
.tl-icon--74 {
  width: 74px;
  height: 74px;
}
.tl-icon--76 {
  width: 76px;
  height: 76px;
}
.tl-icon--78 {
  width: 78px;
  height: 78px;
}
.tl-icon--80 {
  width: 80px;
  height: 80px;
}
.tl-icon--82 {
  width: 82px;
  height: 82px;
}
.tl-icon--84 {
  width: 84px;
  height: 84px;
}
.tl-icon--86 {
  width: 86px;
  height: 86px;
}
.tl-icon--88 {
  width: 88px;
  height: 88px;
}
.tl-icon--90 {
  width: 90px;
  height: 90px;
}
.tl-icon--92 {
  width: 92px;
  height: 92px;
}
.tl-icon--94 {
  width: 94px;
  height: 94px;
}
.tl-icon--96 {
  width: 96px;
  height: 96px;
}

/* Component variables */
.tl-link {
  --link: var(--color-foreground-text-accent-default);
  --link-hover: var(--color-foreground-text-accent-default);
  --link-focus-outline-width: 2px;
  --link-visited: var(--color-foreground-text-accent-visited);
  --link-disabled: var(--color-foreground-text-disabled);
  --link-focus-outline-color: var(--color-foreground-border-accent-focus);
}

.tl-banner .tl-link {
  --link: var(--color-system-info-default);
}

.tl-toast .tl-link {
  --link: var(--color-system-info-default);
  --link-hover: var(--color-foreground-text-accent-default);
}

.traton .tl-link {
  --link-focus-outline-width: 4px;
}

.tl-link-text {
  font-family: var(--detail-02-font-family);
  font-size: var(--detail-02-font-size);
  line-height: var(--detail-02-line-height);
  font-weight: var(--detail-02-font-weight);
  letter-spacing: var(--detail-02-letter-spacing);
  text-transform: var(--detail-02-text-transform);
}

.tl-link {
  display: inline-flex;
  color: var(--link);
  text-decoration: none;
  cursor: pointer;
  outline: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
}
.tl-link:focus-visible {
  outline: var(--link-focus-outline-width) solid var(--link-focus-outline-color);
  outline-offset: 1px;
  text-decoration: none;
}
.tl-link:active {
  text-decoration-color: var(--link);
}
.tl-link:hover {
  color: var(--link-hover);
  text-decoration-color: var(--link-hover);
}
.tl-link:visited {
  color: var(--link-visited);
  text-decoration-color: var(--link-visited);
}
.tl-link--disabled {
  color: var(--link-disabled);
  text-decoration-color: var(--link-disabled);
  pointer-events: none;
  cursor: not-allowed;
}
.tl-link--disabled:visited {
  color: var(--link-disabled);
  text-decoration-color: var(--link-disabled);
}
.tl-link--underline {
  text-decoration: underline;
}
.tl-link--underline:hover {
  text-decoration: underline;
}
.tl-link--standalone {
  font-family: var(--detail-02-font-family);
  font-size: var(--detail-02-font-size);
  line-height: var(--detail-02-line-height);
  font-weight: var(--detail-02-font-weight);
  letter-spacing: var(--detail-02-letter-spacing);
  text-transform: var(--detail-02-text-transform);
}

.tl-link__icon {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  color: inherit;
}
.tl-link:hover .tl-link__icon .tl-icon {
  color: var(--link-hover);
}
.tl-link:visited .tl-link__icon .tl-icon {
  color: var(--link-visited);
}
.tl-link:active .tl-link__icon .tl-icon {
  color: var(--link);
}

.tl-message {
  --message-main-background: var(--color-background-layer-01);
  --message-mode-primary-background: var(--color-background-layer-01);
  --message-mode-secondary-background: var(--color-background-layer-02);
  --message-main-text-color: var(--color-foreground-text-strong);
  /* Info */
  --message-info-border-color: var(--color-system-info-subtle);
  --message-info-icon-color: var(--color-system-info-default);
  /* Success */
  --message-success-border-color: var(--color-system-success-subtle);
  --message-success-icon-color: var(--color-system-success-default);
  /* Error */
  --message-error-background: var(--color-system-danger-discrete);
  --message-error-border-color: var(--color-system-danger-subtle);
  --message-error-icon-color: var(--color-system-danger-default);
  --message-error-header-text-color: var(--color-system-danger-default);
  /* Warning */
  --message-warning-border-color: var(--color-system-warning-subtle);
  --message-warning-icon-color: var(--color-system-warning-default);
}

.tl-message--primary {
  --message-main-background: var(--message-mode-primary-background);
}
.tl-message--secondary {
  --message-main-background: var(--message-mode-secondary-background);
}

.tl-message__wrapper {
  display: flex;
  padding: 16px;
  background-color: var(--message-main-background);
  border-radius: 4px;
  position: relative;
}
.tl-message--information .tl-message__wrapper {
  border-left: 4px solid var(--message-info-border-color);
}
.tl-message--success .tl-message__wrapper {
  border-left: 4px solid var(--message-success-border-color);
}
.tl-message--warning .tl-message__wrapper {
  border-left: 4px solid var(--message-warning-border-color);
}
.tl-message--error .tl-message__wrapper {
  background-color: var(--message-error-background);
  border-left: 4px solid var(--message-error-border-color);
}
.tl-message--minimal .tl-message__wrapper {
  border: none;
  padding: 0;
  background-color: transparent;
}

.tl-message__wrapper::before {
  content: "";
  display: inline-block;
  margin-right: 16px;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background-color: currentcolor;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}
.tl-message--information .tl-message__wrapper::before {
  mask-image: var(--icon-info-svg);
  color: var(--message-info-icon-color);
}
.tl-message--success .tl-message__wrapper::before {
  mask-image: var(--icon-tick-svg);
  color: var(--message-success-icon-color);
}
.tl-message--warning .tl-message__wrapper::before {
  mask-image: var(--icon-warning-svg);
  color: var(--message-warning-icon-color);
}
.tl-message--error .tl-message__wrapper::before {
  mask-image: var(--icon-error-svg);
  color: var(--message-error-icon-color);
}
.tl-message--minimal .tl-message__wrapper::before {
  margin-right: 8px;
}
.tl-message--no-icon .tl-message__wrapper::before {
  display: none;
}

.tl-message__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--message-main-text-color);
  padding: 2px 0;
}

.tl-message__header {
  font-family: var(--headline-07-font-family);
  font-size: var(--headline-07-font-size);
  line-height: var(--headline-07-line-height);
  font-weight: var(--headline-07-font-weight);
  letter-spacing: var(--headline-07-letter-spacing);
  text-transform: var(--headline-07-text-transform);
}
.tl-message--minimal .tl-message__header {
  font-family: var(--detail-02-font-family);
  font-size: var(--detail-02-font-size);
  line-height: var(--detail-02-line-height);
  font-weight: var(--detail-02-font-weight);
  letter-spacing: var(--detail-02-letter-spacing);
  text-transform: var(--detail-02-text-transform);
}
.tl-message--error.tl-message--minimal .tl-message__header {
  color: var(--message-error-header-text-color);
}

.tl-message__subheader {
  font-family: var(--detail-02-font-family);
  font-size: var(--detail-02-font-size);
  line-height: var(--detail-02-line-height);
  font-weight: var(--detail-02-font-weight);
  letter-spacing: var(--detail-02-letter-spacing);
  text-transform: var(--detail-02-text-transform);
  color: var(--message-main-text-color);
}
.tl-message--minimal .tl-message__subheader {
  display: none;
}

/**
 * Do not edit directly, this file was auto-generated.
 */
:root,
.tds-mode-light,
.scania .tds-mode-light {
  --component-shadow-hover: var(--scania-color-transparent-shadow-250);
  --component-shadow-default: var(--scania-color-transparent-shadow-150);
  --component-shadow-pressed: var(--scania-color-transparent-shadow-250);
  --component-shadow-dragged: var(--scania-color-transparent-shadow-200);
  --component-shadow-base-modifier: var(--scania-color-transparent-shadow-100);
  --component-shadow-focus: var(--scania-color-transparent-shadow-350);
}

.tds-mode-dark,
.scania .tds-mode-dark {
  --component-shadow-hover: var(--scania-color-transparent-invisible-dark);
  --component-shadow-default: var(--scania-color-transparent-invisible-dark);
  --component-shadow-pressed: var(--scania-color-transparent-invisible-dark);
  --component-shadow-dragged: var(--scania-color-transparent-invisible-dark);
  --component-shadow-base-modifier: var(--scania-color-transparent-invisible-dark);
  --component-shadow-focus: var(--scania-color-transparent-invisible-dark);
}

.traton,
.traton .tds-mode-light,
.traton .tds-mode-dark {
  --component-shadow-hover: var(--traton-color-transparent-invisible-dark);
  --component-shadow-default: var(--traton-color-transparent-invisible-dark);
  --component-shadow-pressed: var(--traton-color-transparent-invisible-dark);
  --component-shadow-dragged: var(--traton-color-transparent-invisible-dark);
  --component-shadow-base-modifier: var(--traton-color-transparent-invisible-dark);
  --component-shadow-focus: var(--traton-color-transparent-invisible-dark);
}

/* Component variables */
.tl-modal,
:root {
  --modal-scroll-bar-thumb: var(--color-foreground-icon-discrete);
  --modal-background: var(--color-background-layer-02);
  --modal-backdrop: var(--color-background-overlay);
  --modal-text: var(--color-foreground-text-strong);
  --modal-cross-svg: var(--color-foreground-text-strong);
  --modal-shadow: 0 2px 3px 0 var(--component-shadow-base-modifier);
  --component-shadow-base-modifier: var(--scania-color-transparent-invisible-dark);
}

/* MIXINS */
.tl-modal {
  box-sizing: border-box;
}
.tl-modal * {
  box-sizing: border-box;
}
.tl-modal {
  background-color: var(--modal-background);
  box-shadow: var(--modal-shadow);
  margin: auto;
  position: relative;
  border-radius: 4px;
  max-height: 85vh;
  overflow-y: auto;
  pointer-events: auto;
  z-index: 1001;
}
.tl-modal::-webkit-scrollbar {
  width: var(--tl-scrollbar-width);
}
.tl-modal::-webkit-scrollbar-track {
  background: var(--tl-scrollbar-track-color);
}
.tl-modal::-webkit-scrollbar-thumb {
  border-radius: 40px;
  background: var(--tl-scrollbar-thumb-color);
  border-width: var(--tl-scrollbar-thumb-border-width);
  border-style: solid;
  border-color: transparent;
  background-clip: padding-box;
}
.tl-modal::-webkit-scrollbar-thumb:hover {
  border-width: var(--tl-scrollbar-thumb-border-hover-width);
}
.tl-modal::-webkit-scrollbar-button {
  height: 0;
  width: 0;
}
@supports not selector(::-webkit-scrollbar) {
  .tl-modal {
    scrollbar-color: var(--tl-scrollbar-thumb-color) var(--tl-scrollbar-track-color);
    scrollbar-width: var(--tl-scrollbar-width-standard);
  }
}
.tl-modal {
  display: none;
}
.tl-modal--visible {
  display: block;
}
.tl-modal--visible.tl-modal--sticky {
  display: flex;
  flex-direction: column;
}
.tl-modal--sticky {
  overflow: hidden;
}

@media (min-width: 320px) {
  .tl-modal--xs {
    width: 100%;
  }
  .tl-modal--sm {
    width: 100%;
  }
  .tl-modal--md {
    width: 100%;
  }
  .tl-modal--lg {
    width: 100%;
  }
}
@media (min-width: 672px) {
  .tl-modal--xs {
    width: 50%;
  }
  .tl-modal--sm {
    width: 62.5%;
  }
  .tl-modal--md {
    width: 75%;
  }
  .tl-modal--lg {
    width: 100%;
  }
}
@media (min-width: 1056px) {
  .tl-modal--xs {
    width: 31.25%;
  }
  .tl-modal--sm {
    width: 43.75%;
  }
  .tl-modal--md {
    width: 62.5%;
  }
  .tl-modal--lg {
    width: 75%;
  }
}
@media (min-width: 1312px) {
  .tl-modal--xs {
    width: 31.25%;
  }
  .tl-modal--sm {
    width: 37.5%;
  }
  .tl-modal--md {
    width: 62.5%;
  }
  .tl-modal--lg {
    width: 75%;
  }
}
@media (min-width: 1584px) {
  .tl-modal--xs {
    width: 25%;
  }
  .tl-modal--sm {
    width: 37.5%;
  }
  .tl-modal--md {
    width: 50%;
  }
  .tl-modal--lg {
    width: 75%;
  }
}
@media (max-width: 320px) {
  .tl-modal--md,
  .tl-modal--lg,
  .tl-modal--sm {
    height: 100%;
  }
}
.tl-modal__header {
  display: flex;
  padding: 16px;
  position: sticky;
  top: 0;
  background-color: var(--modal-background);
  z-index: 1;
}

.tl-modal__title {
  font-family: var(--headline-05-font-family);
  font-size: var(--headline-05-font-size);
  line-height: var(--headline-05-line-height);
  font-weight: var(--headline-05-font-weight);
  letter-spacing: var(--headline-05-letter-spacing);
  text-transform: var(--headline-05-text-transform);
  color: var(--modal-text);
  margin: 0;
  flex: 1;
}

.tl-modal__body {
  font-family: var(--body-01-font-family);
  font-size: var(--body-01-font-size);
  line-height: var(--body-01-line-height);
  font-weight: var(--body-01-font-weight);
  letter-spacing: var(--body-01-letter-spacing);
  text-transform: var(--body-01-text-transform);
  color: var(--modal-text);
  padding: 0 16px 16px;
}
.tl-modal__body::-webkit-scrollbar {
  width: var(--tl-scrollbar-width);
}
.tl-modal__body::-webkit-scrollbar-track {
  background: var(--tl-scrollbar-track-color);
}
.tl-modal__body::-webkit-scrollbar-thumb {
  border-radius: 40px;
  background: var(--tl-scrollbar-thumb-color);
  border-width: var(--tl-scrollbar-thumb-border-width);
  border-style: solid;
  border-color: transparent;
  background-clip: padding-box;
}
.tl-modal__body::-webkit-scrollbar-thumb:hover {
  border-width: var(--tl-scrollbar-thumb-border-hover-width);
}
.tl-modal__body::-webkit-scrollbar-button {
  height: 0;
  width: 0;
}
@supports not selector(::-webkit-scrollbar) {
  .tl-modal__body {
    scrollbar-color: var(--tl-scrollbar-thumb-color) var(--tl-scrollbar-track-color);
    scrollbar-width: var(--tl-scrollbar-width-standard);
  }
}
.tl-modal--sticky .tl-modal__body {
  max-height: calc(85vh - 36px);
  overflow-y: auto;
}

.tl-modal__actions {
  background-color: var(--modal-background);
  padding: 24px 16px 16px;
  display: flex;
  gap: 16px;
}
.tl-modal--sticky .tl-modal__actions {
  position: sticky;
  bottom: 0;
}

.tl-modal__close {
  margin: 0 0 auto auto;
  background-color: transparent;
  border: 0;
  padding: 0;
  appearance: unset;
  display: inline-block;
  height: auto;
  color: var(--modal-text);
  cursor: pointer;
}
.tl-modal__close:focus {
  outline: 2px solid var(--tds-focus-outline-color);
  box-shadow: 0 0 0 1px var(--tds-white);
  outline-offset: 1px;
  z-index: 1;
}

.tl-modal__overlay {
  box-sizing: border-box;
}
.tl-modal__overlay * {
  box-sizing: border-box;
}
.tl-modal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--modal-backdrop);
  pointer-events: auto;
  z-index: 1000;
  display: none;
}
.tl-modal__overlay.tl-modal--visible {
  display: block;
}

.tl-popover-canvas {
  --popover-canvas-text: var(--color-foreground-text-strong);
  --popover-canvas-background: var(--color-background-layer-01);
}
.tl-popover-canvas--primary {
  --popover-canvas-background: var(--color-background-layer-01);
}
.tl-popover-canvas--secondary {
  --popover-canvas-background: var(--color-background-layer-02);
}

.scania .tl-popover-canvas {
  --popover-canvas-box-shadow: 0 3px 3px rgb(0 0 0 / 15%), 0 -1px 1px rgb(0 0 0 / 10%);
}

.traton .tl-popover-canvas {
  --popover-canvas-box-shadow: none;
}

.tl-popover-canvas {
  display: inline-block;
  color: var(--popover-canvas-text);
  background-color: var(--popover-canvas-background);
  box-shadow: var(--popover-canvas-box-shadow);
  border-radius: 4px;
  pointer-events: none;
  z-index: 1000;
  visibility: hidden;
}
.tl-popover-canvas--visible {
  visibility: visible;
  pointer-events: auto;
}
.tl-popover-canvas--animation-fade {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 120ms ease-out, transform 120ms ease-out;
}
.tl-popover-canvas--visible.tl-popover-canvas--animation-fade {
  opacity: 1;
  transform: translateY(0);
}

.tl-popover-canvas__content {
  font-family: var(--body-01-font-family);
  font-size: var(--body-01-font-size);
  line-height: var(--body-01-line-height);
  font-weight: var(--body-01-font-weight);
  letter-spacing: var(--body-01-letter-spacing);
  text-transform: var(--body-01-text-transform);
  padding: 16px;
}

.tl-popover-canvas__header {
  font-family: var(--headline-05-font-family);
  font-size: var(--headline-05-font-size);
  line-height: var(--headline-05-line-height);
  font-weight: var(--headline-05-font-weight);
  letter-spacing: var(--headline-05-letter-spacing);
  text-transform: var(--headline-05-text-transform);
  margin: 0 0 8px;
}

.tl-popover-canvas__actions {
  display: flex;
  gap: 8px;
  justify-content: space-between;
  align-items: center;
}

.tl-popover-menu {
  --popover-menu-text: var(--color-foreground-text-strong);
  --popover-menu-background: var(--color-background-layer-01);
  --popover-menu-background-hover: var(--color-background-layer-02);
  --popover-menu-item-outline-focus: var(--color-foreground-border-accent-focus);
  --popover-menu-item-disabled: var(--color-foreground-text-disabled);
  --popover-menu-item-icon-disabled: var(--color-foreground-icon-disabled);
}
.tl-popover-menu--primary {
  --popover-menu-background: var(--color-background-layer-01);
  --popover-menu-background-hover: var(--color-background-layer-02);
}
.tl-popover-menu--secondary {
  --popover-menu-background: var(--color-background-layer-02);
  --popover-menu-background-hover: var(--color-background-layer-01);
}

.scania .tl-popover-menu {
  --popover-menu-box-shadow: 0 3px 3px rgb(0 0 0 / 15%), 0 -1px 1px rgb(0 0 0 / 10%);
}

.traton .tl-popover-menu {
  --popover-menu-box-shadow: none;
}

.tl-popover-menu__item-wrapper {
  box-sizing: border-box;
}
.tl-popover-menu__item-wrapper * {
  box-sizing: border-box;
}
.tl-popover-menu__item-wrapper {
  display: block;
  padding: 16px 0;
}

.tl-popover-menu__item {
  all: unset;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  color: var(--popover-menu-text);
  position: relative;
  transition: background-color var(--tds-motion-duration-fast-02) var(--tds-motion-easing-easy);
  font-family: var(--detail-02-font-family);
  font-size: var(--detail-02-font-size);
  line-height: var(--detail-02-line-height);
  font-weight: var(--detail-02-font-weight);
  letter-spacing: var(--detail-02-letter-spacing);
  text-transform: var(--detail-02-text-transform);
}
.tl-popover-menu__item:hover {
  cursor: pointer;
  background-color: var(--popover-menu-background-hover);
}
.tl-popover-menu__item:focus-visible {
  outline: 1px solid var(--popover-menu-item-outline-focus);
  outline-offset: -1px;
}

.tl-popover-menu__item--disabled {
  all: unset;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  cursor: not-allowed;
  color: var(--popover-menu-item-disabled);
  pointer-events: none;
}
.tl-popover-menu__item--disabled:hover {
  background-color: inherit;
}
.tl-popover-menu__item--disabled:focus, .tl-popover-menu__item--disabled:focus-visible, .tl-popover-menu__item--disabled:active {
  outline: none;
  box-shadow: none;
}

.tl-popover-menu__item--disabled .tl-icon {
  color: var(--popover-menu-item-icon-disabled);
}

.tl-popover-menu {
  box-sizing: border-box;
}
.tl-popover-menu * {
  box-sizing: border-box;
}
.tl-popover-menu {
  overflow: hidden;
  width: 160px;
  background-color: var(--popover-menu-background);
  box-shadow: var(--popover-menu-box-shadow);
  border-radius: 4px;
  z-index: 900;
  pointer-events: none;
  visibility: hidden;
}
.tl-popover-menu--visible {
  visibility: visible;
  pointer-events: auto;
}
.tl-popover-menu--fluid {
  width: max-content;
  display: inline-block;
}
.tl-popover-menu--animation-fade {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 120ms ease-out, transform 120ms ease-out;
}
.tl-popover-menu--visible.tl-popover-menu--animation-fade {
  opacity: 1;
  transform: translateY(0);
}
.tl-popover-menu .tl-divider {
  width: calc(100% - 12px);
  margin: 6px;
}

.tl-radio-button {
  --radio-button-background-hover: var(--color-foreground-border-discrete);
  --radio-button-background-inverse: var(--color-foreground-icon-inverse-strong);
  --radio-button-background-disabled: var(--color-background-accent-primary-disabled);
  --radio-button-border: var(--color-foreground-border-strong);
  --radio-button-label: var(--color-foreground-text-strong);
  --radio-button-label-disabled: var(--color-foreground-text-disabled);
  --radio-button-border-disabled: var(--color-foreground-border-discrete);
  --radio-button-focus: var(--color-foreground-border-accent-focus);
  --radio-button-checked-disabled: var(--color-foreground-icon-disabled);
  --radio-button-spacing-4: var(--tds-spacing-element-4) 0 var(--tds-spacing-element-4)
    var(--tds-spacing-element-4);
  --radio-button-focus-outline-color: var(--color-foreground-border-accent-focus);
  --radio-button-focus-outline-width: 2px;
}

.scania .tl-radio-button {
  --radio-button-focus-outline-width: 2px;
}

.traton .tl-radio-button {
  --radio-button-focus-outline-width: 4px;
}

/* Block */
.tl-radio-button {
  box-sizing: border-box;
}
.tl-radio-button * {
  box-sizing: border-box;
}
.tl-radio-button {
  font-family: var(--detail-02-font-family);
  font-size: var(--detail-02-font-size);
  line-height: var(--detail-02-line-height);
  font-weight: var(--detail-02-font-weight);
  letter-spacing: var(--detail-02-letter-spacing);
  text-transform: var(--detail-02-text-transform);
  color: var(--radio-button-label);
  display: flex;
  align-items: center;
  gap: var(--radio-button-spacing-8);
}
.tl-radio-button:has(:disabled) {
  cursor: not-allowed;
}

/* Elements */
/* INPUT — visible radio circle */
.tl-radio-button__input {
  appearance: none;
  outline: none;
  margin: 0;
  border: 0;
  inline-size: 24px;
  block-size: 24px;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  border-radius: 50%;
}
.tl-radio-button__input::before, .tl-radio-button__input::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  box-sizing: border-box;
}
.tl-radio-button__input {
  /* focus "pulse" background holder */
}
.tl-radio-button__input::before {
  inline-size: 22px;
  block-size: 22px;
  left: 1px;
  top: 1px;
}
.tl-radio-button__input {
  /* base inner circle + ring */
}
.tl-radio-button__input::after {
  background-color: var(--radio-button-background-inverse);
  border: 1px solid var(--radio-button-border);
  inline-size: 16px;
  block-size: 16px;
  left: 4px;
  top: 4px;
}
.tl-radio-button__input {
  /* Focus */
}
.tl-radio-button__input:focus::before {
  background-color: var(--radio-button-focus);
  animation: rb-focus 0.4s cubic-bezier(0.65, 0.05, 0.38, 0.95) forwards;
}
.tl-radio-button__input:focus::after {
  outline: var(--radio-button-focus-outline-width) solid var(--radio-button-focus-outline-color);
}
.tl-radio-button__input {
  /* Checked */
}
.tl-radio-button__input:checked::after {
  border: 4px solid var(--radio-button-border);
}
.tl-radio-button__input {
  /* Checked + focus */
}
.tl-radio-button__input:checked:focus::after {
  outline: var(--radio-button-focus-outline-width) solid var(--radio-button-focus-outline-color);
}
.tl-radio-button__input {
  /* Hover */
}
.tl-radio-button:not(:has(:disabled)):hover .tl-radio-button__input::after {
  outline: var(--radio-button-focus-outline-width) solid var(--radio-button-background-hover);
}
.tl-radio-button__input {
  /* Disabled */
}
.tl-radio-button__input:disabled {
  cursor: not-allowed;
}
.tl-radio-button__input:disabled::before {
  outline: 1px solid var(--radio-button-border-disabled);
  outline-offset: -4px;
}
.tl-radio-button__input:disabled::after {
  background-color: var(--radio-button-background-disabled);
  border-color: var(--radio-button-background-disabled);
  outline: none;
}
.tl-radio-button__input:disabled:checked::before {
  border: 1px solid var(--radio-button-border-disabled);
  display: block;
  inline-size: 16px;
  block-size: 16px;
  left: 3px;
  top: 3px;
  box-sizing: content-box;
}
.tl-radio-button__input:disabled:checked::after {
  border: 4px solid var(--radio-button-background-disabled);
  background-color: var(--radio-button-checked-disabled);
  left: 4px;
  top: 4px;
}

/* LABEL — text only */
.tl-radio-button__label {
  cursor: pointer;
  padding-left: 4px;
}
.tl-radio-button:has(:disabled) .tl-radio-button__label {
  cursor: not-allowed;
  color: var(--radio-button-label-disabled);
}

/* Focus animation */
@keyframes rb-focus {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
  }
}
/**
 * Do not edit directly, this file was auto-generated.
 */
:root .tl-side-menu,
:root tds-side-menu,
.scania .tl-side-menu,
.scania tds-side-menu {
  --component-side-menu-color-divider: var(--color-foreground-border-discrete);
  --component-side-menu-radius-corner: var(--scania-unit-0);
  --component-side-menu-size-close-icon-size: var(--scania-unit-20);
  --component-side-menu-size-icon: var(--scania-unit-24);
  --component-side-menu-space-collapsed-item-left-right-inner-icon-padding: 22px;
  --component-side-menu-space-sub-menu-item-chevron-right-padding: var(--scania-unit-16);
  --component-side-menu-space-sub-menu-item-left: 22px;
  --component-side-menu-space-sub-menu-item-profile-gap: var(--scania-unit-16);
  --component-side-menu-space-sub-menu-item-profile-left: var(--scania-unit-16);
  --component-side-menu-space-sub-menu-item-profile-top-bottom: 18px;
  --component-side-menu-space-sub-menu-item-selected-marker-height: 68px;
  --component-side-menu-space-sub-menu-item-top-and-bottom: 22px;
  --component-side-menu-space-sub-page-left-no-icon: var(--scania-unit-24);
  --component-side-menu-space-sub-page-left-profile: var(--scania-unit-64);
  --component-side-menu-space-sub-page-left-with-icon: 58px;
  --component-side-menu-space-sub-page-selected-marker-height: var(--scania-unit-48);
  --component-side-menu-space-sub-page-selected-marker-width: var(--scania-unit-4);
  --component-side-menu-space-sub-page-top-bottom: var(--scania-unit-16);
  --component-side-menu-space-sub-page-top-group: var(--scania-unit-0);
  --component-side-menu-space-top-level-bottom-collapsible: var(--scania-unit-0);
  --component-side-menu-space-top-level-left: var(--scania-unit-0);
  --component-side-menu-space-top-level-top: var(--scania-unit-0);
  --component-side-menu-space-top-level-vertical-gap-padding: var(--scania-unit-0);
  --component-side-menu-text-items-font-family: var(--scania-font-family-semi-condensed);
  --component-side-menu-text-items-font-weight: var(--scania-font-weight-bold);
  --component-side-menu-text-items-font-size: 14px;
  --component-side-menu-text-items-line-height: 16px;
  --component-side-menu-text-items-letter-spacing: -0.14px;
  --component-side-menu-text-items-text-transform: none;
}

.traton .tl-side-menu,
.traton tds-side-menu {
  --component-side-menu-color-divider: var(--traton-color-transparent-invisible-light);
  --component-side-menu-radius-corner: var(--traton-unit-8);
  --component-side-menu-size-close-icon-size: var(--traton-unit-20);
  --component-side-menu-size-icon: var(--traton-unit-16);
  --component-side-menu-space-collapsed-item-left-right-inner-icon-padding: var(--traton-unit-12);
  --component-side-menu-space-sub-menu-item-chevron-right-padding: var(--traton-unit-12);
  --component-side-menu-space-sub-menu-item-left: var(--traton-unit-12);
  --component-side-menu-space-sub-menu-item-profile-gap: var(--traton-unit-8);
  --component-side-menu-space-sub-menu-item-profile-left: var(--traton-unit-8);
  --component-side-menu-space-sub-menu-item-profile-top-bottom: var(--traton-unit-4);
  --component-side-menu-space-sub-menu-item-selected-marker-height: var(--traton-unit-40);
  --component-side-menu-space-sub-menu-item-top-and-bottom: var(--traton-unit-8);
  --component-side-menu-space-sub-page-left-no-icon: 14px;
  --component-side-menu-space-sub-page-left-profile: var(--traton-unit-48);
  --component-side-menu-space-sub-page-left-with-icon: var(--traton-unit-40);
  --component-side-menu-space-sub-page-selected-marker-height: 32px;
  --component-side-menu-space-sub-page-selected-marker-width: var(--traton-unit-8);
  --component-side-menu-space-sub-page-top-bottom: var(--traton-unit-8);
  --component-side-menu-space-sub-page-top-group: var(--traton-unit-4);
  --component-side-menu-space-top-level-bottom-collapsible: var(--traton-unit-16);
  --component-side-menu-space-top-level-left: var(--traton-unit-16);
  --component-side-menu-space-top-level-top: var(--traton-unit-14);
  --component-side-menu-space-top-level-vertical-gap-padding: var(--traton-unit-16);
  --component-side-menu-text-items-font-family: var(--traton-font-family-default);
  --component-side-menu-text-items-font-weight: var(--traton-font-weight-medium);
  --component-side-menu-text-items-font-size: 14px;
  --component-side-menu-text-items-line-height: 18px;
  --component-side-menu-text-items-letter-spacing: 0;
  --component-side-menu-text-items-text-transform: none;
}

.tl-side-menu {
  --side-menu-background-cover: var(--color-background-base);
  --side-menu-item-state-hover: var(--color-background-layer-01);
  --side-menu-item-state-active: var(--color-background-surface-100);
  --side-menu-item-state-selected: var(--color-background-layer-01);
  --side-menu-single-subitem-selected-border-color: var(--color-foreground-border-accent-focus);
  --side-menu-dropdown-list-item-color: var(--color-foreground-text-defined);
  --side-menu-subnav-background: var(--color-background-layer-01);
  --side-menu-single-item-color: var(--color-foreground-text-strong);
  --side-menu-bottom-menu-border-top: var(--component-side-menu-color-divider);
  --tds-header-app-launcher-menu-bg: var(--color-background-base);
  --tds-nav-item-border-color: var(--color-foreground-border-accent-focus);
  --tds-nav-dropdown-menu-box: 0 3px 3px rgb(0 0 0 / 15%), 0 -1px 1px rgb(0 0 0 / 1%);
  --side-menu-dropdown-list-item-custom-background: var(--side-menu-background-cover);
  --side-menu-dropdown-list-item-custom-background-hover: var(--side-menu-item-state-hover);
  --side-menu-dropdown-list-item-custom-background-active: var(--side-menu-item-state-active);
  --side-menu-dropdown-list-item-custom-background-selected: var(--side-menu-item-state-selected);
}

.scania .tl-side-menu {
  --side-menu-bottom-menu-border-top-collapsed: 1px solid var(--color-foreground-border-discrete);
  --side-menu-close-button-wrapper-height: auto;
  --side-menu-collapsed-button-size: 68px;
  --side-menu-collapsed-dropdown-background-active: var(--color-background-surface-100);
  --side-menu-collapsed-dropdown-background-hover: var(--color-background-layer-01);
  --side-menu-collapsed-dropdown-background-selected: var(--color-background-layer-01);
  --side-menu-collapsed-dropdown-background: var(--color-background-base);
  --side-menu-collapsed-dropdown-heading-padding-left: 24px;
  --side-menu-dropdown-list-item-height: 48px;
  --side-menu-profile-user-image-size: 34px;
  --side-menu-single-item-height: 68px;
  --side-menu-subnav-border-radius: 0;
  --side-menu-subnav-box-shadow: var(--tds-nav-dropdown-menu-box);
  --side-menu-text-item-font-family: 'Scania Sans Semi Condensed', arial, 'Helvetica Neue';
  --side-menu-text-item-font-size: 14px;
  --side-menu-text-item-font-weight: 700;
  --side-menu-text-item-line-height: 16px;
  --side-menu-text-item-letter-spacing: -0.14px;
  --side-menu-sub-item-with-icon: 56px;
  --side-menu-sub-item-with-user-image: 72px;
}

.traton .tl-side-menu {
  --side-menu-bottom-menu-border-top-collapsed: none;
  --side-menu-close-button-wrapper-height: 64px;
  --side-menu-collapsed-button-size: 72px;
  --side-menu-collapsed-dropdown-background-active: var(--color-background-surface-200);
  --side-menu-collapsed-dropdown-background-hover: var(--color-background-surface-100);
  --side-menu-collapsed-dropdown-background-selected: var(--color-background-surface-100);
  --side-menu-collapsed-dropdown-background: var(--color-background-layer-01);
  --side-menu-collapsed-dropdown-heading-padding-left: 14px;
  --side-menu-dropdown-list-item-height: 32px;
  --side-menu-profile-user-image-size: 25.5px;
  --side-menu-single-item-height: 40px;
  --side-menu-subnav-border-radius: 4px;
  --side-menu-subnav-box-shadow: none;
  --side-menu-text-item-font-family: 'TRATON Type Text';
  --side-menu-text-item-font-size: 14px;
  --side-menu-text-item-font-weight: 500;
  --side-menu-text-item-line-height: 18px;
  --side-menu-text-item-letter-spacing: 0;
  --side-menu-sub-item-with-icon: 38px;
  --side-menu-sub-item-with-user-image: 46px;
}

.tl-side-menu--collapsed {
  --side-menu-dropdown-list-item-custom-background: var(--side-menu-collapsed-dropdown-background);
  --side-menu-dropdown-list-item-custom-background-hover: var(
    --side-menu-collapsed-dropdown-background-hover
  );
  --side-menu-dropdown-list-item-custom-background-active: var(
    --side-menu-collapsed-dropdown-background-active
  );
  --side-menu-dropdown-list-item-custom-background-selected: var(
    --side-menu-collapsed-dropdown-background-selected
  );
}

.tl-side-menu__item {
  all: unset;
  box-sizing: border-box;
  height: var(--side-menu-single-item-height);
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--component-side-menu-space-sub-menu-item-top-and-bottom) var(--component-side-menu-space-sub-menu-item-chevron-right-padding) var(--component-side-menu-space-sub-menu-item-top-and-bottom) var(--component-side-menu-space-sub-menu-item-left);
  border: none;
  background-color: var(--side-menu-background-cover);
  color: var(--side-menu-single-item-color);
  cursor: pointer;
  position: relative;
  border-radius: var(--component-side-menu-radius-corner);
  font-family: var(--side-menu-text-item-font-family);
  font-size: var(--side-menu-text-item-font-size);
  font-weight: var(--side-menu-text-item-font-weight);
  line-height: var(--side-menu-text-item-line-height);
  letter-spacing: var(--side-menu-text-item-letter-spacing);
}
.tl-side-menu__item:focus-visible {
  outline: 2px solid var(--color-foreground-border-accent-focus);
  outline-offset: -2px;
}
.tl-side-menu__item:hover {
  background-color: var(--side-menu-item-state-hover);
}
.tl-side-menu__item:active {
  background-color: var(--side-menu-item-state-active);
}
.tl-side-menu__item--selected {
  position: relative;
  background-color: var(--side-menu-item-state-selected);
}
.tl-side-menu__item--selected:active {
  background-color: var(--side-menu-item-state-selected);
}
.tl-side-menu__item--selected:hover {
  background-color: var(--side-menu-item-state-selected-hover, var(--side-menu-item-state-selected));
}
.tl-side-menu__item--selected::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: var(--component-side-menu-space-sub-page-selected-marker-width);
  height: var(--component-side-menu-space-sub-menu-item-selected-marker-height);
  background-color: var(--side-menu-single-subitem-selected-border-color);
  border-radius: var(--component-side-menu-radius-corner) 0 0 var(--component-side-menu-radius-corner);
}

.tl-side-menu__dropdown {
  display: flex;
  flex-direction: column;
  font-family: var(--side-menu-text-item-font-family);
  font-size: var(--side-menu-text-item-font-size);
  font-weight: var(--side-menu-text-item-font-weight);
  line-height: var(--side-menu-text-item-line-height);
  letter-spacing: var(--side-menu-text-item-letter-spacing);
}
.tl-side-menu__dropdown .tl-side-menu__item::after {
  content: "";
  position: absolute;
  right: var(--component-side-menu-space-sub-menu-item-chevron-right-padding);
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background-color: currentcolor;
  mask-image: var(--icon-chevron_down-svg);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  pointer-events: none;
  transition: transform 0.2s ease-in-out;
}
.tl-side-menu__dropdown--open .tl-side-menu__item::after {
  transform: translateY(-50%) rotate(180deg);
}
.tl-side-menu__dropdown--open .tl-side-menu__dropdown-menu {
  display: block;
}

.tl-side-menu__dropdown-menu {
  display: none;
  flex-direction: column;
}

.tl-side-menu__dropdown-header {
  display: none;
  padding: 16px var(--side-menu-collapsed-dropdown-heading-padding-left) 15px;
  min-height: 48px;
  border-bottom: 1px solid var(--side-menu-bottom-menu-border-top);
}

.tl-side-menu__dropdown-list {
  margin-top: var(--component-side-menu-space-sub-page-top-group);
  padding: 0;
  list-style: none;
  border-radius: 0;
  background-color: var(--tds-header-app-launcher-menu-bg);
  display: flex;
  flex-direction: column;
  gap: var(--component-side-menu-space-top-level-vertical-gap-padding);
}

.tl-side-menu__dropdown-item {
  all: unset;
  box-sizing: border-box;
  border-right: 1px solid var(--tds-nav-item-border-color);
  display: flex;
  align-items: center;
  height: var(--side-menu-dropdown-list-item-height);
  padding: 0 var(--component-side-menu-space-sub-page-left-no-icon);
  width: 100%;
  background-color: var(--side-menu-dropdown-list-item-custom-background);
  color: var(--side-menu-dropdown-list-item-color);
  border: none;
  border-radius: var(--component-side-menu-radius-corner);
  position: relative;
  cursor: pointer;
  font-family: var(--body-02-font-family);
  font-size: var(--body-02-font-size);
  line-height: var(--body-02-line-height);
  font-weight: var(--body-02-font-weight);
  letter-spacing: var(--body-02-letter-spacing);
  text-transform: var(--body-02-text-transform);
}
.tl-side-menu__dropdown-item:hover {
  background-color: var(--side-menu-dropdown-list-item-custom-background-hover);
}
.tl-side-menu__dropdown-item:active {
  background-color: var(--side-menu-dropdown-list-item-custom-background-active);
}
.tl-side-menu__dropdown-item:focus {
  outline: 2px solid var(--color-foreground-border-accent-focus);
  outline-offset: -2px;
}
.tl-side-menu__dropdown-item--selected {
  background-color: var(--side-menu-dropdown-list-item-custom-background-selected);
  color: var(--color-foreground-text-strong);
  font-family: var(--text-component-title-01-font-family);
  font-size: var(--text-component-title-01-font-size);
  font-weight: var(--text-component-title-01-font-weight);
  line-height: var(--text-component-title-01-line-height);
  letter-spacing: var(--text-component-title-01-letter-spacing);
}
.tl-side-menu__dropdown-item--selected:active {
  background-color: var(--side-menu-item-state-selected-hover, var(--side-menu-item-state-selected));
}
.tl-side-menu__dropdown-item--selected::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--component-side-menu-space-sub-page-selected-marker-width);
  height: var(--component-side-menu-space-sub-page-selected-marker-height);
  background-color: var(--side-menu-single-subitem-selected-border-color);
  border-radius: var(--component-side-menu-radius-corner) 0 0 var(--component-side-menu-radius-corner);
}

.tl-side-menu__dropdown:has(.tl-side-menu__item .tl-icon) .tl-side-menu__dropdown-item {
  padding-left: var(--side-menu-sub-item-with-icon);
}

.tl-side-menu__dropdown:has(.tl-side-menu__item .tl-side-menu__user .tl-side-menu__user-image) .tl-side-menu__dropdown-item {
  padding-left: var(--side-menu-sub-item-with-user-image);
}

.tl-side-menu__user {
  display: flex;
  align-items: center;
  gap: var(--component-side-menu-space-sub-menu-item-profile-gap);
  font-family: var(--side-menu-text-item-font-family);
  font-size: var(--side-menu-text-item-font-size);
  font-weight: var(--side-menu-text-item-font-weight);
  line-height: var(--side-menu-text-item-line-height);
  letter-spacing: var(--side-menu-text-item-letter-spacing);
}

.tl-side-menu__user-image {
  height: var(--side-menu-profile-user-image-size);
}
.tl-side-menu__user-image * {
  width: var(--side-menu-profile-user-image-size);
  height: var(--side-menu-profile-user-image-size);
  border-radius: 50%;
}

.tl-side-menu__user-label {
  display: block;
  color: var(--side-menu-single-item-color);
}
.tl-side-menu__user-label .subheader {
  color: var(--color-foreground-text-subtle);
}

.tl-side-menu {
  pointer-events: none;
  display: block;
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 500;
  font-family: var(--component-side-menu-text-items-font-family);
  font-size: var(--component-side-menu-text-items-font-size);
  font-weight: var(--component-side-menu-text-items-font-weight);
  line-height: var(--component-side-menu-text-items-line-height);
  letter-spacing: var(--component-side-menu-text-items-letter-spacing);
}

.tl-side-menu__list,
.tl-side-menu__list li,
.tl-side-menu__upper-list,
.tl-side-menu__upper-list li,
.tl-side-menu__end-list,
.tl-side-menu__end-list li {
  display: flex;
  flex-direction: column;
  gap: var(--component-side-menu-space-top-level-vertical-gap-padding);
}

.tl-side-menu__wrapper {
  height: inherit;
}

.tl-side-menu__wrapper--closed {
  display: none;
}
@media (min-width: 992px) {
  .tl-side-menu--persistent .tl-side-menu__wrapper--closed {
    display: block;
  }
}

.tl-side-menu__overlay {
  position: fixed;
  inset: 0;
  background-color: black;
  opacity: 0;
  pointer-events: auto;
}
.tl-side-menu__wrapper--open .tl-side-menu__overlay {
  opacity: 0.4;
}

.tl-side-menu__close {
  margin: 0 var(--component-side-menu-space-top-level-left);
  border-bottom: 1px solid var(--side-menu-bottom-menu-border-top);
  height: var(--side-menu-close-button-wrapper-height);
  opacity: 0;
}
.tl-side-menu__wrapper--open .tl-side-menu__close {
  opacity: 1;
}

.tl-side-menu__wrapper--empty .tl-side-menu__upper-list {
  display: none;
}

.tl-side-menu__wrapper--empty .tl-side-menu__end-list {
  margin-top: 0;
}
.tl-side-menu__wrapper--empty .tl-side-menu__end-list > * {
  border-bottom: 1px solid var(--side-menu-bottom-menu-border-top);
}

.tl-side-menu__collapse {
  display: none;
  border-top: 1px solid var(--side-menu-bottom-menu-border-top);
}
@media (min-width: 992px) {
  .tl-side-menu--persistent .tl-side-menu__collapse {
    display: flex;
    flex-direction: row;
  }
  .tl-side-menu--collapsed .tl-side-menu__collapse .tl-side-menu__collapse-text {
    display: none;
  }
}
.tl-side-menu__collapse .tl-side-menu__item .tl-icon {
  flex-shrink: 0;
  color: var(--side-menu-single-item-color);
}

.tl-side-menu__aside {
  background-color: var(--side-menu-background-cover);
  width: 80%;
  height: inherit;
  position: relative;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

:where(.tl-side-menu__aside *) {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.tl-side-menu__list-wrapper {
  padding: 0 var(--component-side-menu-space-top-level-left);
  padding-top: var(--component-side-menu-space-top-level-top);
  padding-bottom: var(--component-side-menu-space-top-level-top);
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  flex-grow: 1;
  overflow-y: auto;
}
.tl-side-menu__list-wrapper::-webkit-scrollbar {
  width: var(--tl-scrollbar-width);
}
.tl-side-menu__list-wrapper::-webkit-scrollbar-track {
  background: var(--tl-scrollbar-track-color);
}
.tl-side-menu__list-wrapper::-webkit-scrollbar-thumb {
  border-radius: 40px;
  background: var(--tl-scrollbar-thumb-color);
  border-width: var(--tl-scrollbar-thumb-border-width);
  border-style: solid;
  border-color: transparent;
  background-clip: padding-box;
}
.tl-side-menu__list-wrapper::-webkit-scrollbar-thumb:hover {
  border-width: var(--tl-scrollbar-thumb-border-hover-width);
}
.tl-side-menu__list-wrapper::-webkit-scrollbar-button {
  height: 0;
  width: 0;
}
@supports not selector(::-webkit-scrollbar) {
  .tl-side-menu__list-wrapper {
    scrollbar-color: var(--tl-scrollbar-thumb-color) var(--tl-scrollbar-track-color);
    scrollbar-width: var(--tl-scrollbar-width-standard);
  }
}

.tl-side-menu__navigation {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.tl-side-menu__upper-list > * {
  border-bottom: 1px solid var(--side-menu-bottom-menu-border-top);
}

@media (min-width: 992px) {
  .tl-side-menu--persistent {
    pointer-events: auto;
    position: static;
    width: 272px;
    height: auto;
    border-right: 1px solid var(--side-menu-bottom-menu-border-top);
  }
  .tl-side-menu--persistent .tl-side-menu__overlay {
    display: none;
  }
  .tl-side-menu--persistent .tl-side-menu__close {
    display: none;
  }
  .tl-side-menu--persistent .tl-side-menu__aside {
    width: 272px;
  }
  .tl-side-menu--collapsed .tl-side-menu__aside {
    width: var(--side-menu-collapsed-button-size);
  }
  .tl-side-menu--collapsed {
    width: calc(var(--side-menu-collapsed-button-size) + 1px); /* +1px for border */
    box-sizing: border-box;
  }
  .tl-side-menu--collapsed .tl-side-menu__dropdown .tl-side-menu__item::after {
    display: none;
  }
  .tl-side-menu--collapsed .tl-side-menu__dropdown:hover .tl-side-menu__dropdown-menu {
    display: block;
  }
  .tl-side-menu--collapsed .tl-side-menu__dropdown:hover::after {
    content: "";
    position: absolute;
    left: 75%;
    top: 0;
    width: 14px;
    height: 100%;
  }
  .tl-side-menu--collapsed .tl-side-menu__dropdown-menu {
    --side-menu-width: 69px;
    position: absolute;
    left: var(--side-menu-width);
    box-shadow: var(--side-menu-subnav-box-shadow);
    background-color: var(--side-menu-subnav-background);
    padding: var(--component-side-menu-space-top-level-left);
    padding-top: 0;
    border-radius: var(--side-menu-subnav-border-radius);
    display: none;
    flex-direction: column;
  }
  .tl-side-menu--collapsed .tl-side-menu__dropdown-header {
    display: flex;
    align-items: center;
  }
  .tl-side-menu--collapsed .tl-side-menu__item {
    padding-top: var(--component-side-menu-space-collapsed-item-left-right-inner-icon-padding);
    padding-right: var(--component-side-menu-space-collapsed-item-left-right-inner-icon-padding);
    padding-bottom: var(--component-side-menu-space-collapsed-item-left-right-inner-icon-padding);
    padding-left: var(--component-side-menu-space-collapsed-item-left-right-inner-icon-padding);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    color: rgba(90, 90, 90, 0);
    overflow: hidden;
  }
  .tl-side-menu--collapsed .tl-side-menu__item .tl-icon {
    color: var(--side-menu-single-item-color);
    margin-left: 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .tl-side-menu__wrapper--closed {
    display: block;
  }
  .tl-side-menu__dropdown:has(.tl-side-menu__user),
  li:has(.tl-side-menu__user) {
    display: none;
  }
}
@media (max-width: 992px) {
  .tl-side-menu__wrapper--open {
    pointer-events: auto;
    z-index: 500;
  }
}
@media (max-width: 384px) {
  .tl-side-menu__aside {
    width: 100%;
  }
}
@media (min-width: 992px) {
  .tl-side-menu:not(.tl-side-menu--persistent) {
    display: none;
  }
}
.tl-slider {
  --slider-label: var(--color-foreground-text-strong);
  --slider-thumb: var(--color-foreground-icon-strong);
  --slider-track: var(--color-background-surface-300);
  --slider-track-fill: var(--color-foreground-icon-strong);
  --slider-divider: var(--color-background-surface-300);
  --slider-divider-values: var(--color-foreground-text-defined);
  --slider-input-focused: var(--color-foreground-border-accent-focus);
  --slider-input-value: var(--color-foreground-text-defined);
  --slider-disabled: var(--color-background-surface-300);
  --slider-disabled-text: var(--color-foreground-text-disabled);
  --slider-value-tooltip-background: var(--color-background-inverse-layer-03);
  --slider-value-tooltip: var(--color-foreground-text-inverse-strong);
  --slider-input-background: var(--color-background-layer-01);
  --slider-input-box-shadow: 0 -1px 0 0 var(--color-foreground-border-soft);
}

.tl-slider,
.scania .tl-slider {
  --slider-border-radius: 4px 4px 0 0;
}

.traton .tl-slider {
  --slider-border-radius: 4px;
  --slider-input-box-shadow: 0 0 0 1px var(--color-foreground-border-soft);
}

.tl-slider {
  box-sizing: border-box;
}
.tl-slider * {
  box-sizing: border-box;
}
.tl-slider {
  width: 100%;
}
.tl-slider:has(input[type=range][readonly]):not(:has(input[type=range]:disabled)) {
  pointer-events: none;
}

.tl-slider__label {
  font-family: var(--detail-05-font-family);
  font-size: var(--detail-05-font-size);
  line-height: var(--detail-05-line-height);
  font-weight: var(--detail-05-font-weight);
  letter-spacing: var(--detail-05-letter-spacing);
  text-transform: var(--detail-05-text-transform);
  user-select: none;
  color: var(--slider-label);
  display: block;
  margin-bottom: 24px;
  margin-left: -2px;
}
.tl-slider:has(.tl-slider__value-divider-label) .tl-slider__label {
  margin-bottom: 44px;
}
.tl-slider:has(.tl-slider__control-minus, .tl-slider__control-plus) .tl-slider__label {
  margin-bottom: 2px;
  padding-left: 11px;
  margin-left: 0;
}
.tl-slider:has(.tl-slider__control-minus, .tl-slider__control-plus):has(.tl-slider__value-divider-label) .tl-slider__label {
  margin-bottom: 20px;
  padding-left: 11px;
  margin-left: 0;
}
.tl-slider:has(.tl-slider__input-wrapper) .tl-slider__label {
  margin-bottom: 2px;
  margin-left: 0;
}
.tl-slider:has(input[type=range]:disabled) .tl-slider__label {
  color: var(--slider-disabled-text);
}

.tl-slider__track-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
}
.tl-slider__track-wrapper:has(.tl-slider__input-wrapper) {
  gap: 16px;
  align-items: center;
  height: 41px;
}

.tl-slider__control-minus,
.tl-slider__control-plus {
  flex-shrink: 0;
  border: none;
}

.tl-slider__track {
  position: relative;
  flex: 1;
  min-height: 2px;
  background-color: var(--slider-track);
  border-radius: var(--slider-border-radius);
}
.tl-slider__track-wrapper:has(.tl-slider__input-wrapper) .tl-slider__track {
  height: 2px;
  align-self: center;
}
.tl-slider__track::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  bottom: -10px;
  cursor: pointer;
  z-index: 0;
}
.tl-slider__track:focus {
  outline: 0;
}
.tl-slider__track:focus .tl-slider__thumb-inner {
  width: 24px;
  height: 24px;
}
.tl-slider__track:focus .tl-slider__thumb-inner::before {
  display: block;
  opacity: 0.08;
}
.tl-slider__track:focus-within .tl-slider__thumb-inner {
  outline: 2px solid var(--slider-input-focused);
  box-shadow: 0 0 0 1px var(--color-background-layer-01);
  outline-offset: 1px;
  z-index: 1;
}
.tl-slider__track:disabled {
  cursor: not-allowed;
  background-color: var(--slider-disabled);
}
.tl-slider__track:disabled::after {
  cursor: not-allowed;
}

.tl-slider__value {
  font-family: var(--detail-02-font-family);
  font-size: var(--detail-02-font-size);
  line-height: var(--detail-02-line-height);
  font-weight: var(--detail-02-font-weight);
  letter-spacing: var(--detail-02-letter-spacing);
  text-transform: var(--detail-02-text-transform);
  user-select: none;
  color: var(--slider-input-value);
  flex-shrink: 0;
  align-self: center;
}
.tl-slider:has(input[type=range]:disabled) .tl-slider__value {
  color: var(--slider-disabled-text);
}

.tl-slider__input-wrapper {
  flex-shrink: 0;
  width: auto;
  height: auto;
  min-width: auto;
  margin-left: 0;
  align-self: center;
  border-radius: var(--slider-border-radius);
}
.tl-slider__input-wrapper.tl-text-field:not(.tl-text-field--label-inside):has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled))::before {
  width: 16px;
  height: 16px;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}

.tl-slider__input-wrapper .tl-slider__input-field {
  width: var(--slider-input-width, 56px);
  padding: 12px;
  text-align: center;
  appearance: textfield;
  border: none;
  background-color: var(--slider-input-background);
  color: var(--slider-input-value);
  border-radius: var(--slider-border-radius);
  box-shadow: inset var(--slider-input-box-shadow);
}
.tl-slider__input-wrapper .tl-slider__input-field--decimal {
  width: 56px;
}
.tl-slider__input-wrapper .tl-slider__input-field::-webkit-outer-spin-button, .tl-slider__input-wrapper .tl-slider__input-field::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

.tl-slider__input-wrapper:has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)) .tl-slider__input-field[readonly] {
  width: 74px;
  padding-right: 39px;
}

.tl-slider__value-tooltip {
  font-family: var(--detail-01-font-family);
  font-size: var(--detail-01-font-size);
  line-height: var(--detail-01-line-height);
  font-weight: var(--detail-01-font-weight);
  letter-spacing: var(--detail-01-letter-spacing);
  text-transform: var(--detail-01-text-transform);
  user-select: none;
  border-radius: 4px;
  padding: 8px 11px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 100%;
  margin-bottom: 8px;
  background-color: var(--slider-value-tooltip-background);
  color: var(--slider-value-tooltip);
  display: none;
  white-space: nowrap;
  z-index: 10;
}
.tl-slider__value-tooltip::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -6px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--slider-value-tooltip-background);
}
.tl-slider__thumb:hover .tl-slider__value-tooltip {
  display: block;
}
.tl-slider:has(input[type=range]:disabled) .tl-slider__value-tooltip {
  display: none;
}

.tl-slider__thumb {
  position: absolute;
  z-index: 1;
}

.tl-slider__thumb-inner {
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background-color: var(--slider-thumb);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  overflow: visible;
}
.tl-slider__thumb-inner::before {
  content: " ";
  display: none;
  width: 48px;
  height: 48px;
  background-color: var(--slider-thumb);
  position: absolute;
  border-radius: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.17;
}
.tl-slider__thumb-inner:hover::before {
  display: block;
}
.tl-slider__thumb-inner--pressed {
  width: 24px;
  height: 24px;
}
.tl-slider__thumb-inner--pressed::before {
  display: block;
  opacity: 0.35;
}
.tl-slider--small .tl-slider__thumb-inner {
  width: 16px;
  height: 16px;
}
.tl-slider--small .tl-slider__thumb-inner::before {
  width: 40px;
  height: 40px;
}
.tl-slider--small .tl-slider__thumb-inner.tl-slider__thumb-inner--pressed {
  width: 20px;
  height: 20px;
}
.tl-slider:has(input[type=range]:disabled) .tl-slider__thumb-inner {
  background-color: var(--slider-disabled);
  cursor: not-allowed;
}
.tl-slider:has(input[type=range]:disabled) .tl-slider__thumb-inner::before {
  display: none;
}

.tl-slider__value-dividers {
  pointer-events: none;
  position: absolute;
  display: flex;
  justify-content: space-between;
  width: 100%;
  top: 0;
  z-index: 0;
}

.tl-slider__value-divider {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 16px;
}

.tl-slider__value-divider-line {
  position: absolute;
  width: 1px;
  height: 16px;
  background-color: var(--slider-divider);
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}
.tl-slider:has(input[type=range]:disabled) .tl-slider__value-divider-line {
  background-color: var(--slider-disabled);
}

.tl-slider__value-divider-label {
  font-family: var(--detail-05-font-family);
  font-size: var(--detail-05-font-size);
  line-height: var(--detail-05-line-height);
  font-weight: var(--detail-05-font-weight);
  letter-spacing: var(--detail-05-letter-spacing);
  text-transform: var(--detail-05-text-transform);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 16px;
  width: 50px;
  text-align: center;
  white-space: nowrap;
  user-select: none;
  color: var(--slider-divider-values);
}
.tl-slider:has(input[type=range]:disabled) .tl-slider__value-divider-label {
  color: var(--slider-disabled-text);
}

.tl-slider__track-fill {
  background-color: var(--slider-track-fill);
  border-radius: 2px;
  height: 4px;
  position: absolute;
  left: 0;
  top: -1px;
  z-index: 1;
}
.tl-slider:has(input[type=range]:disabled) .tl-slider__track-fill {
  background-color: var(--slider-disabled);
}

.tl-slider__native-input {
  display: none;
}

/**
 * Do not edit directly, this file was auto-generated.
 */
.tl-spinner,
tds-spinner {
  --component-spinner-color: var(--color-system-info-default);
}

/* Component variables  */
.tl-spinner {
  --tl-spinner-background: var(--component-spinner-color);
  --tl-spinner-background-inverted: var(--color-brand-neutral-white);
  --tl-spinner-speed: 1.8s;
  --tl-spinner-speed-lg: 2s;
  --tl-spinner-radius-xs: 8px;
  --tl-spinner-radius-sm: 12px;
  --tl-spinner-radius-md: 26px;
  --tl-spinner-radius-lg: 42px;
  --tl-spinner-stroke-width-xs: 3px;
  --tl-spinner-stroke-width-sm: 4px;
  --tl-spinner-stroke-width-md: 6px;
  --tl-spinner-stroke-width-lg: 8px;
  --tl-spinner-PI: 3.14159265358979;
  --tl-spinner-radius: var(--tl-spinner-radius-lg);
  --tl-spinner-stroke-width: var(--tl-spinner-stroke-width-lg);
  --tl-spinner-animation-speed: var(--tl-spinner-speed-lg);
}

.tl-spinner {
  box-sizing: border-box;
}
.tl-spinner * {
  box-sizing: border-box;
}
.tl-spinner {
  display: block;
  width: calc(var(--tl-spinner-radius) * 2);
  height: calc(var(--tl-spinner-radius) * 2);
  transform: scale(-1, 1) rotate(-90deg);
}
.tl-spinner--xs {
  --tl-spinner-radius: var(--tl-spinner-radius-xs);
  --tl-spinner-stroke-width: var(--tl-spinner-stroke-width-xs);
  --tl-spinner-animation-speed: var(--tl-spinner-speed);
}
.tl-spinner--sm {
  --tl-spinner-radius: var(--tl-spinner-radius-sm);
  --tl-spinner-stroke-width: var(--tl-spinner-stroke-width-sm);
  --tl-spinner-animation-speed: var(--tl-spinner-speed);
}
.tl-spinner--md {
  --tl-spinner-radius: var(--tl-spinner-radius-md);
  --tl-spinner-stroke-width: var(--tl-spinner-stroke-width-md);
  --tl-spinner-animation-speed: var(--tl-spinner-speed);
}
.tl-spinner--lg {
  --tl-spinner-radius: var(--tl-spinner-radius-lg);
  --tl-spinner-stroke-width: var(--tl-spinner-stroke-width-lg);
  --tl-spinner-animation-speed: var(--tl-spinner-speed-lg);
}
.tl-spinner--default {
  stroke: var(--tl-spinner-background);
}
.tl-spinner--inverted {
  stroke: var(--tl-spinner-background-inverted);
}

.tl-spinner__circle {
  cx: var(--tl-spinner-radius);
  cy: var(--tl-spinner-radius);
  r: calc(var(--tl-spinner-radius) - var(--tl-spinner-stroke-width) / 2);
  fill: none;
  --tl-spinner-stroke-dash: calc((2 * var(--tl-spinner-PI)) * var(--tl-spinner-radius));
  stroke-dasharray: var(--tl-spinner-stroke-dash);
  stroke-width: var(--tl-spinner-stroke-width);
  animation: tl-spinner-dash var(--tl-spinner-animation-speed) cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite;
}

@keyframes tl-spinner-dash {
  from {
    stroke-dashoffset: calc(-1 * var(--tl-spinner-stroke-dash));
  }
  to {
    stroke-dashoffset: var(--tl-spinner-stroke-dash);
  }
}
/**
 * Do not edit directly, this file was auto-generated.
 */
.tl-stepper,
tds-stepper {
  --component-stepper-success: var(--color-system-success-default);
}

.tl-stepper {
  --stepper-current-number-with-border: var(--color-foreground-border-strong);
  --stepper-icon-step-border-warning: var(--color-system-danger-default);
  --stepper-icon-step-border-success: var(--component-stepper-success);
  --stepper-icon-step-checkmark: var(--color-foreground-icon-inverse-strong);
  --stepper-label-text-upcoming: var(--color-foreground-text-disabled);
  --stepper-label-border-upcoming: var(--color-foreground-border-discrete);
  --stepper-divider-line: var(--color-foreground-icon-disabled);
}

.tl-stepper__step {
  position: relative;
  display: flex;
  justify-content: start;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.tl-stepper--label-below .tl-stepper__step {
  flex-direction: column;
}
.tl-stepper--lg .tl-stepper__step {
  font-family: var(--detail-01-font-family);
  font-size: var(--detail-01-font-size);
  line-height: var(--detail-01-line-height);
  font-weight: var(--detail-01-font-weight);
  letter-spacing: var(--detail-01-letter-spacing);
  text-transform: var(--detail-01-text-transform);
  padding: 0 20px;
}
.tl-stepper--sm .tl-stepper__step {
  font-family: var(--detail-05-font-family);
  font-size: var(--detail-05-font-size);
  line-height: var(--detail-05-line-height);
  font-weight: var(--detail-05-font-weight);
  letter-spacing: var(--detail-05-letter-spacing);
  text-transform: var(--detail-05-text-transform);
  padding: 0 20px;
}
.tl-stepper--horizontal:not(.tl-stepper--label-aside) .tl-stepper__list > .tl-stepper__step {
  flex: 1 1 0;
  min-inline-size: 60px;
}
.tl-stepper--horizontal.tl-stepper--label-aside .tl-stepper__list > .tl-stepper__step {
  flex: 0 0 auto;
  min-inline-size: auto;
}
.tl-stepper--horizontal.tl-stepper--label-aside.tl-stepper--hide-labels .tl-stepper__list > .tl-stepper__step {
  min-inline-size: 40px;
}
.tl-stepper--horizontal.tl-stepper--sm:not(.tl-stepper--label-aside) .tl-stepper__list > .tl-stepper__step {
  min-inline-size: 40px;
}
.tl-stepper--horizontal.tl-stepper--sm.tl-stepper--label-aside.tl-stepper--hide-labels .tl-stepper__list > .tl-stepper__step {
  min-inline-size: 48px;
}
.tl-stepper--lg .tl-stepper__step:last-of-type::after, .tl-stepper--sm .tl-stepper__step:last-of-type::after {
  display: none;
}
.tl-stepper--vertical.tl-stepper--lg .tl-stepper__step:last-of-type::after, .tl-stepper--vertical.tl-stepper--sm .tl-stepper__step:last-of-type::after {
  display: none;
}
.tl-stepper--lg .tl-stepper__step::after {
  content: " ";
  position: absolute;
  background-color: var(--stepper-divider-line);
}
.tl-stepper--lg.tl-stepper--vertical .tl-stepper__step::after {
  height: 36px;
  width: 1px;
  top: 40px;
  left: 36px;
}
.tl-stepper--lg.tl-stepper--horizontal .tl-stepper__step::after {
  height: 1px;
  left: calc(50% + 15px + 8px);
  right: calc(-50% + 15px + 8px);
  top: 16px;
}
.tl-stepper--lg.tl-stepper--horizontal.tl-stepper--label-aside:not(.tl-stepper--hide-labels) .tl-stepper__step::after {
  height: 1px;
  top: 16px;
  width: 10px;
  left: auto;
  right: -10px;
}
.tl-stepper--sm.tl-stepper--vertical .tl-stepper__step::after {
  content: " ";
  position: absolute;
  background-color: var(--stepper-divider-line);
  height: 20px;
  width: 1px;
  top: 34px;
  left: 32px;
}
.tl-stepper--sm.tl-stepper--horizontal .tl-stepper__step::after {
  content: " ";
  position: absolute;
  background-color: var(--stepper-divider-line);
  height: 1px;
  left: calc(50% + 12px + 8px);
  right: calc(-50% + 12px + 8px);
  top: 13px;
}
.tl-stepper--sm.tl-stepper--horizontal.tl-stepper--label-aside:not(.tl-stepper--hide-labels) .tl-stepper__step::after {
  content: " ";
  position: absolute;
  background-color: var(--stepper-divider-line);
  height: 1px;
  top: 13px;
  width: 10px;
  left: auto;
  right: -10px;
}

.tl-stepper__node {
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-radius: 100px;
  border-width: 1px;
  border-style: solid;
  text-align: center;
  position: relative;
}
.tl-stepper--lg .tl-stepper__node {
  height: 30px;
  min-width: 30px;
  font-size: 14px;
}
.tl-stepper--sm .tl-stepper__node {
  height: 24px;
  min-width: 24px;
}
.tl-stepper__step--error .tl-stepper__node {
  border-color: var(--stepper-icon-step-border-warning);
  color: var(--stepper-icon-step-border-warning);
}
.tl-stepper__step--success .tl-stepper__node {
  background-color: var(--stepper-icon-step-border-success);
  border-color: var(--stepper-icon-step-border-success);
  color: var(--stepper-icon-step-checkmark);
}
.tl-stepper__step--current .tl-stepper__node {
  color: var(--stepper-current-number-with-border);
}
.tl-stepper__step--upcoming .tl-stepper__node {
  border-color: var(--stepper-label-border-upcoming);
  color: var(--stepper-label-text-upcoming);
}
.tl-stepper__step--success .tl-stepper__node, .tl-stepper__step--error .tl-stepper__node {
  justify-content: center;
}
.tl-stepper__step--success .tl-stepper__node::after, .tl-stepper__step--error .tl-stepper__node::after {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  background-color: currentcolor;
}
.tl-stepper__step--success .tl-stepper__node::after {
  mask-image: var(--icon-tick-svg);
}
.tl-stepper__step--error .tl-stepper__node::after {
  mask-image: var(--icon-warning-svg);
}

.tl-stepper--sm .tl-stepper__step--success .tl-stepper__node::after,
.tl-stepper--sm .tl-stepper__step--error .tl-stepper__node::after {
  width: 16px;
  height: 16px;
}

.tl-stepper__label {
  text-align: center;
}
.tl-stepper--lg .tl-stepper__label {
  font-family: var(--detail-01-font-family);
  font-size: var(--detail-01-font-size);
  line-height: var(--detail-01-line-height);
  font-weight: var(--detail-01-font-weight);
  letter-spacing: var(--detail-01-letter-spacing);
  text-transform: var(--detail-01-text-transform);
  font-size: 14px;
}
.tl-stepper--sm .tl-stepper__label {
  font-family: var(--detail-05-font-family);
  font-size: var(--detail-05-font-size);
  line-height: var(--detail-05-line-height);
  font-weight: var(--detail-05-font-weight);
  letter-spacing: var(--detail-05-letter-spacing);
  text-transform: var(--detail-05-text-transform);
}
.tl-stepper__step--upcoming .tl-stepper__label {
  color: var(--stepper-label-text-upcoming);
  opacity: var(--tds-stepper-label-text-opacity-upcoming);
}
.tl-stepper--hide-labels .tl-stepper__label {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.tl-stepper {
  box-sizing: border-box;
}
.tl-stepper * {
  box-sizing: border-box;
}
.tl-stepper {
  display: table;
  table-layout: fixed;
  width: 100%;
  list-style: none;
}

.tl-stepper__list {
  display: flex;
  justify-content: space-evenly;
  min-width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}
.tl-stepper:not(.tl-stepper--label-aside) .tl-stepper__list {
  width: 100%;
}
.tl-stepper--horizontal:not(.tl-stepper--label-aside) .tl-stepper__list {
  justify-content: flex-start;
}
.tl-stepper--horizontal.tl-stepper--label-aside .tl-stepper__list {
  display: flex;
  justify-content: flex-start;
  min-width: 100%;
}
.tl-stepper--horizontal.tl-stepper--label-aside.tl-stepper--hide-labels .tl-stepper__list {
  display: flex;
  justify-content: flex-start;
}
.tl-stepper--vertical .tl-stepper__list {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 52px;
  min-width: 0;
}
.tl-stepper--vertical.tl-stepper--sm .tl-stepper__list {
  gap: 36px;
}

/**
 * Do not edit directly, this file was auto-generated.
 */
.tl-table,
tds-table {
  --component-table-secondary-cell: var(--color-background-layer-02);
  --component-table-pagination-dropdown: var(--color-background-layer-01);
  --component-table-pagination-base: var(--color-background-surface-200);
  --component-table-cell-hover: var(--color-background-surface-100);
  --component-table-cell: var(--color-background-layer-01);
}

.traton .tl-table,
.traton tds-table {
  --component-table-pagination-base: var(--color-background-surface-300);
}

.tl-table {
  /* Table-text */
  --table-text: var(--color-foreground-text-strong);
  /* Table-body-cell */
  --table-body-cell-hover: var(--component-table-cell-hover);
  /* Table-body-row */
  --table-body-row: var(--component-table-cell);
  --table-body-row-hover: var(--component-table-cell-hover);
  --table-zebra-mode: var(--component-table-secondary-cell);
  --table-body-row-selected: var(--color-background-surface-300);
  --table-body-row-selected-hover: var(--color-background-surface-400);
  /* Table input body */
  --table-input-focus: var(--color-background-layer-02);
  --table-input-hover: var(--color-background-layer-03);
  --table-input-disabled: var(--color-background-layer-01);
  --table-input-text-disabled: var(--color-foreground-text-subtle);
  /* Table input header */
  --table-input-header-icon: var(--color-foreground-icon-soft);
  --table-input-header-placeholder: var(--color-foreground-text-subtle);
  --table-input-header-focus: var(--color-background-layer-01);
  /* Table-footer */
  --table-footer: var(--component-table-pagination-base);
  --table-footer-page-selector-input: var(--component-table-pagination-dropdown);
  --table-footer-page-selector-input-hover: var(--color-background-layer-03);
  --table-footer-page-selector-input-disabled: var(--color-background-layer-01);
  --table-footer-button-hover: var(--color-background-surface-300);
  /* Table-header */
  --table-header: var(--color-background-surface-300);
  --table-header-hover: var(--color-background-surface-400);
  --table-header-button: var(--color-background-surface-200);
  --table-header-button-hover: var(--color-background-surface-300);
  --table-header-button-focus: var(--color-foreground-border-accent-focus);
  /* Table-toolbar */
  --table-toolbar: var(--color-background-surface-400);
  --table-toolbar-searchbar: var(--component-table-pagination-dropdown);
  --table-toolbar-searchbar-hover: var(--component-table-pagination-base);
  --table-toolbar-searchbar-border-bottom: var(--color-foreground-border-accent-focus);
  /* Divider */
  --table-divider: var(--color-foreground-border-discrete);
  /* Table-icons */
  --table-icon: var(--color-foreground-icon-strong);
  --table-icon-disabled: var(--color-foreground-icon-disabled);
}
.tl-table.tl-table--primary {
  --table-body-row: var(--component-table-cell);
  --table-body-row-hover: var(--component-table-cell-hover);
  --table-body-cell-hover: var(--component-table-cell-hover);
  --table-zebra-mode: var(--component-table-secondary-cell);
}
.tl-table.tl-table--secondary {
  --table-body-row: var(--component-table-secondary-cell);
  --table-body-row-hover: var(--component-table-cell-hover);
  --table-body-cell-hover: var(--component-table-cell-hover);
  --table-zebra-mode: var(--component-table-cell);
}

.tl-mode-dark .tl-table.tl-table--secondary {
  --table-body-cell-hover: var(--color-background-surface-300);
  --table-body-row-hover: var(--color-background-surface-300);
}

.tl-table__footer {
  display: table-footer-group;
  height: var(--tds-spacing-element-48);
}
.tl-table--compact .tl-table__footer {
  height: var(--tds-spacing-element-32);
}

.tl-table__footer .tl-dropdown__text {
  max-width: calc(100% - 20px);
}

.tl-table__footer .tl-dropdown--sm :is(.tl-dropdown__button, .tl-dropdown__select, .tl-dropdown__input),
.tl-table__footer .tl-dropdown__option {
  height: 29px;
}

.tl-table__footer-row {
  display: table-row;
  border-bottom: 1px solid var(--table-divider);
  background-color: var(--table-footer);
  color: var(--table-text);
  transition: background-color 200ms ease;
}

.tl-table__footer-cell {
  padding: 0 var(--tds-spacing-element-16);
}

.tl-table__pagination {
  height: var(--tds-spacing-element-48);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tl-table--compact .tl-table__pagination {
  height: var(--tds-spacing-element-32);
}

.tl-table__row-selector,
.tl-table__page-selector {
  display: flex;
  align-items: center;
}

.tl-table__rows-per-page {
  margin-right: var(--tds-spacing-element-16);
  display: flex;
  align-items: center;
}

.tl-table__rows-per-page-label {
  margin-right: var(--tds-spacing-element-8);
  font-family: var(--detail-02-font-family);
}

.tl-table__page-selector-input {
  background-color: var(--table-footer-page-selector-input);
  border-radius: var(--tds-spacing-element-4);
  color: var(--table-text);
  margin-right: var(--tds-spacing-element-4);
  padding-right: var(--tds-spacing-element-8);
  width: 74px;
  height: 30px;
  border: none;
  transition: background-color 250ms ease;
  font-family: var(--detail-02-font-family);
}
.tl-table__page-selector-input:hover {
  background-color: var(--table-footer-page-selector-input-hover);
}
.tl-table__page-selector-input:disabled {
  color: var(--table-footer-page-selector-input-color-disabled);
}
.tl-table--compact .tl-table__page-selector-input {
  height: var(--tds-spacing-element-24);
}

.tl-table__footer-text {
  padding: 1px 22px 0 0;
  font-family: var(--detail-02-font-family);
}
.tl-table__footer-text span {
  font-family: var(--detail-02-font-family);
}

.tl-table__footer-button {
  border-radius: var(--tds-spacing-element-4);
  color: var(--table-icon);
  height: var(--tds-spacing-element-32);
  width: var(--tds-spacing-element-32);
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  background-color: transparent;
  cursor: pointer;
  transition: background-color 250ms ease;
}
.tl-table__footer-button:hover {
  background-color: var(--table-footer-button-hover);
}
.tl-table__footer-button:disabled {
  color: var(--table-icon-disabled);
  cursor: default;
}
.tl-table__footer-button:disabled:hover {
  background-color: transparent;
}
.tl-table--compact .tl-table__footer-button {
  height: 28px;
  width: 28px;
}

.tl-table {
  box-sizing: border-box;
}
.tl-table * {
  box-sizing: border-box;
}
.tl-table {
  border-collapse: collapse;
  display: table;
  color: var(--table-text);
}
.tl-table--responsive {
  width: 100%;
}
.tl-table--horizontal-scroll {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}
.tl-table--horizontal-scroll::-webkit-scrollbar {
  height: var(--tl-scrollbar-height);
}
.tl-table--horizontal-scroll::-webkit-scrollbar-track {
  background: var(--tl-scrollbar-track-color);
}
.tl-table--horizontal-scroll::-webkit-scrollbar-thumb {
  border-radius: 40px;
  background: var(--tl-scrollbar-thumb-color);
  border-width: var(--tl-scrollbar-thumb-border-width);
  border-style: solid;
  border-color: transparent;
  background-clip: padding-box;
}
.tl-table--horizontal-scroll::-webkit-scrollbar-thumb:hover {
  border-width: var(--tl-scrollbar-thumb-border-hover-width);
}
.tl-table--horizontal-scroll::-webkit-scrollbar-button {
  height: 0;
  width: 0;
}
@supports not selector(::-webkit-scrollbar) {
  .tl-table--horizontal-scroll {
    scrollbar-color: var(--tl-scrollbar-thumb-color) var(--tl-scrollbar-track-color);
    scrollbar-width: var(--tl-scrollbar-width-standard);
  }
}
.tl-table--primary {
  --table-body-row: var(--component-table-cell);
  --table-body-row-hover: var(--component-table-cell-hover);
  --table-zebra-mode: var(--component-table-secondary-cell);
}
.tl-table--secondary {
  --table-body-row: var(--component-table-secondary-cell);
  --table-body-row-hover: var(--component-table-cell-hover);
  --table-zebra-mode: var(--component-table-cell);
}

.tl-table__header {
  display: table-header-group;
}

.tl-table__body {
  display: table-row-group;
}

.tl-table__row {
  display: table-row;
  border-bottom: 1px solid var(--table-divider);
  background-color: var(--table-body-row);
  transition: background-color 200ms ease;
  color: var(--table-text);
}
.tl-table__row:hover:not(.tl-table__row--expanded) {
  background-color: var(--table-body-row-hover);
  border-bottom-color: var(--table-divider);
}
.tl-table__row--selected {
  background-color: var(--table-body-row-selected);
}
.tl-table__row--selected:hover {
  background-color: var(--table-body-row-selected-hover);
}
.tl-table--clickable .tl-table__row, .tl-table__row--clickable {
  cursor: pointer;
}
.tl-table__row--clickable:focus-visible {
  outline: 2px solid var(--table-header-button-focus);
  outline-offset: -2px;
}
.tl-table--zebra-rows-odd .tl-table__body .tl-table__row:nth-child(odd) {
  background-color: var(--table-zebra-mode);
}
.tl-table--zebra-rows-even .tl-table__body .tl-table__row:nth-child(even) {
  background-color: var(--table-zebra-mode);
}

.tl-table__header-cell {
  display: table-cell;
  padding: 16px;
  background-color: var(--table-header);
  border-bottom: 1px solid var(--table-divider);
  font-family: var(--headline-07-font-family);
  font-size: var(--headline-07-font-size);
  line-height: var(--headline-07-line-height);
  font-weight: var(--headline-07-font-weight);
  letter-spacing: var(--headline-07-letter-spacing);
  text-transform: var(--headline-07-text-transform);
  color: var(--table-text);
  text-align: left;
  transition: background-color 200ms ease;
  min-width: 192px;
}
.tl-table__header-cell:hover:not(.tl-table__header-cell--checkbox):not(.tl-table__header-cell--expand) {
  background-color: var(--table-header-hover);
}
.tl-table__header-cell:first-of-type {
  border-top-left-radius: 4px;
}
.tl-table__header-cell:last-of-type {
  border-top-right-radius: 4px;
}
.tl-table:has(.tl-table__toolbar) .tl-table__header-cell:first-of-type, .tl-table__header-cell:has(.tl-table__header-input-wrapper):first-of-type {
  border-top-left-radius: 0;
}
.tl-table:has(.tl-table__toolbar) .tl-table__header-cell:last-of-type, .tl-table__header-cell:has(.tl-table__header-input-wrapper):last-of-type {
  border-top-right-radius: 0;
}
.tl-table__header-cell:has(.tl-table__header-input-wrapper), .tl-table--no-header-padding .tl-table__header-cell, .tl-table__header-cell--sortable {
  padding: 0;
}
.tl-table__header-cell--checkbox, .tl-table__header-cell--expand {
  min-width: 48px;
  width: 48px;
  padding: 0;
  text-align: center;
  background-color: var(--table-header);
}
.tl-table--compact .tl-table__header-cell {
  height: 32px;
  padding: 8px 16px;
}
.tl-table--compact .tl-table__header-cell--checkbox, .tl-table--compact .tl-table__header-cell--expand, .tl-table--compact .tl-table__header-cell:has(.tl-table__header-input-wrapper) {
  padding: 0;
}
.tl-table--no-min-width .tl-table__header-cell {
  min-width: unset;
}
.tl-table--header-text-align-left .tl-table__header-cell {
  text-align: left;
}
.tl-table--header-text-align-start .tl-table__header-cell {
  text-align: start;
}
.tl-table--header-text-align-center .tl-table__header-cell {
  text-align: center;
}
.tl-table--header-text-align-right .tl-table__header-cell {
  text-align: right;
}
.tl-table--header-text-align-end .tl-table__header-cell {
  text-align: end;
}

.tl-table__header-button {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: start;
  flex-direction: row;
  width: 100%;
  height: 100%;
  padding: 16px;
  background-color: transparent;
  border: none;
  cursor: pointer;
  transition: background-color 200ms ease;
  font-family: var(--headline-07-font-family);
  font-size: var(--headline-07-font-size);
  line-height: var(--headline-07-line-height);
  font-weight: var(--headline-07-font-weight);
  letter-spacing: var(--headline-07-letter-spacing);
  text-transform: var(--headline-07-text-transform);
  color: var(--table-text);
  text-align: left;
}
.tl-table__header-button:focus-visible, .tl-table__header-button:focus, .tl-table__header-button:active {
  outline: 2px solid var(--table-header-button-focus);
  outline-offset: -2px;
}
.tl-table--compact .tl-table__header-button {
  padding: 0;
}

.tl-table__header-button-text {
  color: var(--table-text);
  text-align: left;
}

.tl-table__header-button-icon {
  flex: 0 0 16px;
  height: 16px;
  width: 16px;
  opacity: 0;
  transform-origin: center;
  transition: opacity 200ms ease-in, transform 200ms ease;
  color: var(--table-text);
}

.tl-table__header-button:focus-visible .tl-table__header-button-icon,
.tl-table__header-button:focus .tl-table__header-button-icon,
.tl-table__header-button:active .tl-table__header-button-icon,
.tl-table__header-button:hover .tl-table__header-button-icon {
  opacity: 1;
}

.tl-table__header-cell--is-sorted {
  background-color: var(--table-header-button);
}

.tl-table__header-cell--is-sorted:hover {
  background-color: var(--table-header-button-hover);
}

.tl-table__header-cell--is-sorted .tl-table__header-button-icon {
  opacity: 1;
}

.tl-table__header-cell--is-sorted .tl-table__header-button-icon--rotate {
  transform: rotate(180deg);
}

.tl-table__body-cell {
  display: table-cell;
  padding: 16px;
  background-color: transparent;
  color: var(--table-text);
  font-family: var(--detail-02-font-family);
  font-size: var(--detail-02-font-size);
  line-height: var(--detail-02-line-height);
  font-weight: var(--detail-02-font-weight);
  letter-spacing: var(--detail-02-letter-spacing);
  text-transform: var(--detail-02-text-transform);
  transition: background-color 200ms ease;
  min-width: 192px;
}
.tl-table__body-cell:focus {
  background-color: var(--table-input-focus);
}
.tl-table__body-cell:hover:not(.tl-table__body-cell--checkbox) {
  background-color: var(--table-body-cell-hover);
}
.tl-table__row--expanded .tl-table__body-cell:hover:not(.tl-table__body-cell--checkbox) {
  background-color: var(--table-body-row-selected);
}
.tl-table__body-cell--column-highlight {
  background-color: var(--table-body-cell-hover);
}
.tl-table__body-cell--checkbox, .tl-table__body-cell--expand {
  min-width: 48px;
  width: 48px;
  padding: 0;
  text-align: center;
  background-color: inherit;
}
.tl-table--compact .tl-table__body-cell {
  height: 32px;
  padding: 8px 16px;
}
.tl-table--no-min-width .tl-table__body-cell {
  min-width: unset;
}
.tl-table--vertical-dividers .tl-table__body-cell:not(:last-child):not(.tl-table__body-cell--expand) {
  border-right: 1px solid var(--table-divider);
}
.tl-table--zebra-columns-odd .tl-table__body-cell:nth-child(odd) {
  background-color: var(--table-zebra-mode);
}
.tl-table--zebra-columns-even .tl-table__body-cell:nth-child(even) {
  background-color: var(--table-zebra-mode);
}
.tl-table--cell-text-align-left .tl-table__body-cell {
  text-align: left;
}
.tl-table--cell-text-align-start .tl-table__body-cell {
  text-align: start;
}
.tl-table--cell-text-align-center .tl-table__body-cell {
  text-align: center;
}
.tl-table--cell-text-align-right .tl-table__body-cell {
  text-align: right;
}
.tl-table--cell-text-align-end .tl-table__body-cell {
  text-align: end;
}
.tl-table--no-padding .tl-table__body-cell {
  padding: 0;
}
.tl-table__row:hover:not(.tl-table__row--expanded) .tl-table__body-cell {
  background-color: var(--table-body-row-hover);
}
.tl-table__row--selected:hover:not(.tl-table__row--expanded) .tl-table__body-cell {
  background-color: var(--table-body-row-selected-hover);
}
.tl-table__row--expanded .tl-table__body-cell {
  background-color: var(--table-body-row-selected);
}

.tl-table__toolbar {
  box-sizing: border-box;
}
.tl-table__toolbar * {
  box-sizing: border-box;
}
.tl-table__toolbar {
  display: table-caption;
  position: relative;
  background-color: var(--table-toolbar);
  color: var(--table-text);
  padding: 0 var(--tds-spacing-element-16);
  height: 64px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.tl-table--compact .tl-table__toolbar {
  height: 56px;
}

.tl-table__upper-bar {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
}

.tl-table__actionbar-left {
  display: flex;
  align-items: center;
}

.tl-table__title {
  font-family: var(--headline-07-font-family);
  font-size: var(--headline-07-font-size);
  line-height: var(--headline-07-line-height);
  font-weight: var(--headline-07-font-weight);
  letter-spacing: var(--headline-07-letter-spacing);
  text-transform: var(--headline-07-text-transform);
  display: flex;
  align-self: baseline;
  text-align: left;
  letter-spacing: var(--tds-headline-07-ls);
  padding-top: var(--tds-spacing-element-16);
  margin-right: var(--tds-spacing-element-8);
}

.tl-table__actionbar-right {
  display: flex;
  align-self: center;
  column-gap: 8px;
  position: relative;
}

.tl-table__actionbar-right .tl-text-field:not(.tl-text-field--input-visible) {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  width: 40px;
  min-width: 40px;
  max-width: 40px;
  height: 40px;
}

.tl-table__actionbar-right .tl-text-field:not(.tl-text-field--input-visible) .tl-text-field__input {
  display: none;
}

.tl-table__actionbar-right .tl-text-field:not(.tl-text-field--input-visible)::before {
  content: "";
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 4px 4px 0 0;
  background-color: transparent;
  transition: background-color 250ms ease;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
}

.tl-table__actionbar-right .tl-text-field:not(.tl-text-field--input-visible) .tl-text-field__suffix--icon {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(calc(-50% - 1px));
  z-index: 1;
  pointer-events: none;
}

.tl-table__actionbar-right .tl-text-field:not(.tl-text-field--input-visible):hover::before {
  background-color: var(--table-toolbar-searchbar-hover);
}

.tl-table__header-input-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.tl-table__header-input-wrapper .tl-icon {
  color: var(--table-input-header-icon);
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  pointer-events: none;
}

.tl-table__header-input {
  box-sizing: border-box;
  font-family: var(--detail-02-font-family);
  font-size: var(--detail-02-font-size);
  line-height: var(--detail-02-line-height);
  font-weight: var(--detail-02-font-weight);
  letter-spacing: var(--detail-02-letter-spacing);
  text-transform: var(--detail-02-text-transform);
  color: var(--table-text);
  padding: 0 var(--tds-spacing-element-16);
  width: 100%;
  border-radius: 0;
  background-color: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  outline: none;
}
.tl-table--compact .tl-table__header-input {
  height: 32px;
}
.tl-table__header-input {
  padding-left: 35px;
  height: 48px;
}
.tl-table__header-input::placeholder {
  color: var(--table-input-header-placeholder);
}
.tl-table__header-input:focus {
  background-color: var(--table-input-header-focus);
  border-bottom: 2px solid var(--color-foreground-border-accent-focus);
}

.tl-table__body-cell .tl-text-field {
  height: 48px;
  min-width: auto;
  padding-bottom: 0;
  cursor: pointer;
}

.tl-table--compact .tl-table__body-cell .tl-text-field {
  height: 32px;
}

.tl-table__body-cell .tl-text-field .tl-text-field__input,
.tl-table__body-cell .tl-text-field .tl-text-field__input:hover {
  box-shadow: 0 0 0 0 transparent;
}

.tl-table__body-cell .tl-text-field .tl-text-field__input:focus {
  box-shadow: inset var(--text-field-box-shadow-focus);
  background-color: var(--table-input-focus);
}

.tl-table--compact .tl-table__body-cell .tl-text-field .tl-text-field__input {
  height: 32px;
}

.tl-table__body-cell .tl-text-field .tl-text-field__suffix--icon {
  display: none;
}

.tl-table__body-cell .tl-text-field:hover .tl-text-field__suffix--icon,
.tl-table__body-cell .tl-text-field:has(.tl-text-field__input:focus) .tl-text-field__suffix--icon {
  display: inline-block;
}

.tl-table__body-cell .tl-text-field.tl-text-field--disabled .tl-text-field__suffix--icon {
  display: inline-block;
}

.tl-table__body-cell--expand {
  position: relative;
}
.tl-table--compact .tl-table__body-cell--expand {
  padding: 0;
}
.tl-table__body-cell--expand:has(.tl-table__expand-input:focus), .tl-table__body-cell--expand:has(.tl-table__expand-input:focus-visible), .tl-table__body-cell--expand:has(.tl-table__expand-input:active) {
  outline: 2px solid var(--table-header-button-focus);
  box-shadow: 0 0 0 1px var(--color-brand-neutral-white);
  outline-offset: -1px;
  z-index: 1;
}

.tl-table__expand-control-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 46px;
  cursor: pointer;
  padding: 0 16px;
  position: relative;
}
.tl-table--compact .tl-table__expand-control-container {
  height: 30px;
}

.tl-table__expand-input {
  all: unset;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  cursor: pointer;
}

.tl-table__expand-icon {
  height: 16px;
  width: 16px;
  transition: transform 200ms ease;
  transform: rotate(0);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--table-text);
}

.tl-table__row--expanded {
  background-color: var(--table-body-row-selected);
  border-bottom: none;
}

.tl-table__row--expanded .tl-table__expand-icon {
  transform: rotate(180deg);
}

.tl-table__expand-row {
  display: none;
  transition: background-color 200ms ease;
  background-color: var(--table-body-row-selected);
  border-bottom: 1px solid var(--table-divider);
}
.tl-table__expand-row--expanded {
  display: table-row;
}

.tl-table__expand-row-cell {
  max-width: 1px;
  overflow: auto;
  padding: 16px 16px 16px 66px;
  color: var(--table-text);
  background-color: var(--table-body-row-selected);
}
.tl-table__expand-row-cell::-webkit-scrollbar {
  height: var(--tl-scrollbar-height);
}
.tl-table__expand-row-cell::-webkit-scrollbar-track {
  background: var(--tl-scrollbar-track-color);
}
.tl-table__expand-row-cell::-webkit-scrollbar-thumb {
  border-radius: 40px;
  background: var(--tl-scrollbar-thumb-color);
  border-width: var(--tl-scrollbar-thumb-border-width);
  border-style: solid;
  border-color: transparent;
  background-clip: padding-box;
}
.tl-table__expand-row-cell::-webkit-scrollbar-thumb:hover {
  border-width: var(--tl-scrollbar-thumb-border-hover-width);
}
.tl-table__expand-row-cell::-webkit-scrollbar-button {
  height: 0;
  width: 0;
}
@supports not selector(::-webkit-scrollbar) {
  .tl-table__expand-row-cell {
    scrollbar-color: var(--tl-scrollbar-thumb-color) var(--tl-scrollbar-track-color);
    scrollbar-width: var(--tl-scrollbar-width-standard);
  }
}
.tl-table--compact .tl-table__expand-row-cell {
  padding: 8px 16px 8px 66px;
}
.tl-table__expand-row-cell--overflow-visible {
  overflow: visible;
}
.tl-table__expand-row-cell--overflow-hidden {
  overflow: hidden;
}

.tl-table.tl-table--primary .tl-text-field__input {
  background-color: var(--component-table-cell);
}
.tl-table.tl-table--secondary .tl-text-field__input {
  background-color: var(--component-table-secondary-cell);
}

.tl-table--compact .tl-table__header-cell--checkbox {
  padding-left: 16px;
}

.tl-table__header-cell--checkbox {
  padding: 16px;
}

.tl-table__body-cell--checkbox {
  padding: 16px;
}

/* tl-folder-tabs.scss (overlay buttons, no JS) */
.tl-folder-tabs {
  --folder-tabs-scroll-button-surface: var(--color-background-surface-200);
  --folder-tabs-scroll-button-surface-hover: var(--color-background-surface-300);
  --folder-tabs-scroll-button-surface-active: var(--color-background-surface-400);
  --folder-tabs-scroll-button-text: var(--color-foreground-text-soft);
}

.tl-folder-tabs__tab {
  --folder-tab-surface: var(--color-background-surface-200);
  --folder-tab-surface-selected: var(--color-background-layer-01);
  --folder-tab-surface-hover: var(--color-background-surface-300);
  --folder-tab-border-selected: var(--color-foreground-border-accent-focus);
  --folder-tab-divider: var(--color-foreground-icon-discrete);
  --folder-tab-text: var(--color-foreground-text-soft);
  --folder-tab-text-disabled: var(--color-foreground-text-disabled);
}

.tl-folder-tabs--primary .tl-folder-tabs__tab {
  --folder-tab-surface-selected: var(--color-background-layer-01);
}

.tl-folder-tabs--secondary .tl-folder-tabs__tab {
  --folder-tab-surface-selected: var(--color-background-layer-02);
}

/* tl-folder-tabs.scss (overlay buttons, no JS) */
.tl-folder-tabs__tab {
  all: unset;
  font-family: var(--headline-07-font-family);
  font-size: var(--headline-07-font-size);
  line-height: var(--headline-07-line-height);
  font-weight: var(--headline-07-font-weight);
  letter-spacing: var(--headline-07-letter-spacing);
  text-transform: var(--headline-07-text-transform);
  box-sizing: border-box;
  position: relative;
  display: inline-flex;
  align-items: center;
  min-inline-size: 142px;
  inline-size: auto;
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 16px;
  text-align: left;
  cursor: pointer;
  border-left: 1px solid transparent;
  border-top: 2px solid var(--folder-tab-surface);
  background-color: var(--folder-tab-surface);
  color: var(--folder-tab-text);
}
.tl-folder-tabs__tab + .tl-folder-tabs__tab {
  border-left-color: var(--folder-tab-divider);
}
.tl-folder-tabs__tab:focus-visible {
  outline: 2px solid currentcolor;
  outline-offset: -4px;
  box-shadow: none;
}
.tl-folder-tabs__tab:hover:not(.tl-folder-tabs__tab--disabled):not(.tl-folder-tabs__tab--selected) {
  background-color: var(--folder-tab-surface-hover);
  border-top-color: var(--folder-tab-surface-hover);
  color: var(--folder-tab-text);
}
.tl-folder-tabs__tab--selected {
  background-color: var(--folder-tab-surface-selected);
  border-top-color: var(--folder-tab-border-selected);
  color: var(--folder-tab-text);
}
.tl-folder-tabs__tab--selected::after {
  content: "";
  position: absolute;
  top: 0;
  right: -1px;
  bottom: 0;
  width: 1px;
  background-color: var(--folder-tab-surface-selected);
  z-index: 1;
}
.tl-folder-tabs__tab--disabled {
  color: var(--folder-tab-text-disabled);
  cursor: not-allowed;
  user-select: none;
}
.tl-folder-tabs__tab--disabled:focus-visible {
  outline: none;
  box-shadow: none;
}

.tl-folder-tabs {
  box-sizing: border-box;
}
.tl-folder-tabs * {
  box-sizing: border-box;
}
.tl-folder-tabs {
  display: flex;
  overflow-x: scroll;
  scrollbar-width: none;
  position: relative;
  outline: 0;
}
.tl-folder-tabs::-webkit-scrollbar {
  display: none;
}

/* Overlay buttons (optional in markup; visible via media query) */
.tl-folder-tabs__scroll-button {
  background-color: var(--folder-tab-surface);
  color: var(--folder-tabs-scroll-button-text);
  min-width: 48px;
  border: 0;
  justify-content: center;
  align-items: center;
  position: sticky;
  cursor: pointer;
}
.tl-folder-tabs__scroll-button:hover {
  background-color: var(--folder-tabs-scroll-button-surface-hover);
}
.tl-folder-tabs__scroll-button:active {
  background-color: var(--folder-tabs-scroll-button-surface-active);
}

/* left/right anchoring over the track */
.tl-folder-tabs__scroll-button--left {
  left: 0;
  z-index: 1;
}

.tl-folder-tabs__scroll-button--right {
  right: 0;
  z-index: 1;
}

.tl-folder-tabs__scroll-button svg {
  fill: var(--folder-tabs-scroll-button-text);
}

.tl-inline-tabs {
  /* Horizontal divider */
  --inline-tabs-horizontal-divider: var(--color-foreground-icon-discrete);
  /* Mode variant backgrounds */
  --inline-tabs-tab-background-primary: var(--scania-color-transparent-invisible-light);
  --inline-tabs-tab-background-secondary: var(--scania-color-transparent-invisible-dark);
  --inline-tabs-tab-background: var(--inline-tabs-tab-background-primary);
  /* Scroll button */
  --inline-tabs-scroll-button-text: var(--color-foreground-icon-strong);
  --inline-tabs-scroll-button-background: var(--inline-tabs-tab-background);
  --inline-tabs-scroll-button-background-hover: var(--inline-tabs-tab-background);
  --inline-tabs-scroll-button-background-active: var(--inline-tabs-tab-background);
}
.tl-inline-tabs--primary {
  --inline-tabs-tab-background: var(--inline-tabs-tab-background-primary);
}
.tl-inline-tabs--secondary {
  --inline-tabs-tab-background: var(--inline-tabs-tab-background-secondary);
}

.traton .tl-inline-tabs {
  --inline-tabs-tab-background-primary: var(--traton-color-transparent-invisible-light);
  --inline-tabs-tab-background-secondary: var(--traton-color-transparent-invisible-dark);
}

.tl-inline-tabs__tab {
  /* Tab */
  --inline-tabs-tab: var(--color-foreground-text-soft);
  --inline-tabs-tab-selected: var(--color-foreground-text-strong);
  --inline-tabs-tab-disabled: var(--color-foreground-text-disabled);
  --inline-tabs-tab-hover: var(--color-foreground-text-strong);
  --inline-tabs-tab-focus: var(--color-foreground-border-accent-focus);
  --inline-tabs-tab-indicator-active: var(--color-foreground-border-accent-focus);
  --inline-tabs-tab-indicator-hover: var(--color-foreground-border-discrete);
}

.tl-inline-tabs__tab {
  all: unset;
  margin-right: 32px;
  box-sizing: border-box;
}
.tl-inline-tabs__tab * {
  box-sizing: border-box;
}
.tl-inline-tabs__tab {
  font-family: var(--headline-07-font-family);
  font-size: var(--headline-07-font-size);
  line-height: var(--headline-07-line-height);
  font-weight: var(--headline-07-font-weight);
  letter-spacing: var(--headline-07-letter-spacing);
  text-transform: var(--headline-07-text-transform);
  color: var(--inline-tabs-tab);
  text-decoration: none;
  display: block;
  position: relative;
  transition: color 0.15s ease-in-out 0s;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
  padding: 20px 4px;
}
.tl-inline-tabs__tab:focus-visible {
  outline: none;
}
.tl-inline-tabs__tab:focus-visible::before {
  content: "";
  position: absolute;
  inset: 18px 0;
  border-radius: 2px;
  box-shadow: 0 0 0 2px var(--inline-tabs-tab-focus) inset;
  z-index: 2;
  pointer-events: none;
}
.tl-inline-tabs__tab::after {
  background-color: var(--inline-tabs-tab-indicator-hover);
  content: " ";
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  margin-left: auto;
  width: 0%;
  margin-right: auto;
  height: 2px;
  z-index: 1;
  transition: width 0.15s ease-in-out 0s;
}
.tl-inline-tabs__tab:not(.tl-inline-tabs__tab--selected)::after {
  width: 0%;
}
.tl-inline-tabs__tab:hover {
  cursor: pointer;
  color: var(--inline-tabs-tab-hover);
}
.tl-inline-tabs__tab:hover::after {
  width: 100%;
}
.tl-inline-tabs__tab--selected {
  color: var(--inline-tabs-tab-selected);
}
.tl-inline-tabs__tab--selected::after {
  background-color: var(--inline-tabs-tab-indicator-active);
  width: 100%;
}
.tl-inline-tabs__tab--disabled {
  color: var(--inline-tabs-tab-disabled);
  pointer-events: none;
  cursor: not-allowed;
}
.tl-inline-tabs__tab--disabled::after {
  content: none;
}
.tl-inline-tabs__tab--disabled:focus-visible::before {
  box-shadow: none;
}

.tl-inline-tabs {
  box-sizing: border-box;
}
.tl-inline-tabs * {
  box-sizing: border-box;
}
.tl-inline-tabs {
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  width: 100%;
  overflow-x: scroll;
  scrollbar-width: none;
  gap: 16px;
  position: relative;
  background-color: var(--inline-tabs-tab-background);
}
.tl-inline-tabs::-webkit-scrollbar {
  display: none;
}
.tl-inline-tabs::after {
  border-bottom: 1px solid var(--inline-tabs-horizontal-divider);
  content: " ";
  display: block;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
}

.tl-inline-tabs__scroll-button {
  background-color: transparent;
  color: var(--inline-tabs-scroll-button-text);
  cursor: pointer;
  min-width: 48px;
  border: 0;
  display: block;
  justify-content: center;
  align-items: center;
  opacity: 1;
  position: sticky;
}

.tl-inline-tabs__scroll-button--right {
  right: 0;
  z-index: 1;
}

.tl-inline-tabs__scroll-button--left {
  left: 0;
  z-index: 1;
}

.tl-inline-tabs__scroll-button svg {
  fill: var(--inline-tabs-scroll-button-text);
}

.tl-navigation-tabs__tab {
  /* tds-navigation-tab variables */
  --navigation-tabs-tab: var(--color-foreground-text-soft);
  --navigation-tabs-tab-selected: var(--color-foreground-text-strong);
  --navigation-tabs-tab-hover: var(--color-foreground-text-strong);
  --navigation-tabs-tab-focus: var(--color-foreground-text-strong);
  --navigation-tabs-tab-disabled: var(--color-foreground-text-disabled);
  --navigation-tabs-tab-indicator-hover: var(--color-foreground-border-discrete);
  --navigation-tabs-tab-indicator-active: var(--color-foreground-border-accent-focus);
}

.tl-navigation-tabs {
  /* tds-navigation-tabs variables */
  --navigation-tabs-horizontal-divider: var(--color-foreground-icon-discrete);
  --navigation-tabs-tab-background-primary: var(--scania-color-transparent-invisible-light);
  --navigation-tabs-tab-background-secondary: var(--scania-color-transparent-invisible-dark);
  --navigation-tabs-tab-background: var(--navigation-tabs-tab-background-primary);
  --navigation-tabs-scroll-button-icon: var(--color-foreground-icon-strong);
  --navigation-tabs-scroll-button-background: var(--navigation-tabs-tab-background);
  --navigation-tabs-scroll-button-background-hover: var(--navigation-tabs-tab-background);
  --navigation-tabs-scroll-button-background-active: var(--navigation-tabs-tab-background);
}
.tl-navigation-tabs--primary {
  --navigation-tabs-tab-background: var(--navigation-tabs-tab-background-primary);
}
.tl-navigation-tabs--secondary {
  --navigation-tabs-tab-background: var(--navigation-tabs-tab-background-secondary);
}

.traton .tl-navigation-tabs {
  --navigation-tabs-tab-background-primary: var(--traton-color-transparent-invisible-light);
  --navigation-tabs-tab-background-secondary: var(--traton-color-transparent-invisible-dark);
}

.tl-navigation-tabs__tab {
  all: unset;
  margin-right: 32px;
  box-sizing: border-box;
}
.tl-navigation-tabs__tab * {
  box-sizing: border-box;
}
.tl-navigation-tabs__tab {
  font-family: var(--headline-07-font-family);
  font-size: var(--headline-07-font-size);
  line-height: var(--headline-07-line-height);
  font-weight: var(--headline-07-font-weight);
  letter-spacing: var(--headline-07-letter-spacing);
  text-transform: var(--headline-07-text-transform);
  color: var(--navigation-tabs-tab);
  text-decoration: none;
  display: block;
  position: relative;
  transition: color 0.15s ease-in-out 0s;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
  padding: 26px 4px;
}
.tl-navigation-tabs__tab:focus-visible {
  outline: none;
}
.tl-navigation-tabs__tab:focus-visible::before {
  content: "";
  position: absolute;
  inset: 18px 0;
  border-radius: 2px;
  box-shadow: 0 0 0 2px var(--navigation-tabs-tab-focus) inset;
  z-index: 2;
  pointer-events: none;
}
.tl-navigation-tabs__tab::after {
  background-color: var(--navigation-tabs-tab-indicator-hover);
  content: " ";
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  margin-left: auto;
  width: 0%;
  margin-right: auto;
  height: 2px;
  z-index: 1;
  transition: width 0.15s ease-in-out 0s;
}
.tl-navigation-tabs__tab:not(.tl-navigation-tabs__tab--selected)::after {
  width: 0%;
}
.tl-navigation-tabs__tab:hover {
  cursor: pointer;
  color: var(--navigation-tabs-tab-hover);
}
.tl-navigation-tabs__tab:hover::after {
  width: 100%;
}
.tl-navigation-tabs__tab--selected {
  color: var(--navigation-tabs-tab-selected);
}
.tl-navigation-tabs__tab--selected::after {
  background-color: var(--navigation-tabs-tab-indicator-active);
  width: 100%;
}
.tl-navigation-tabs__tab--disabled {
  color: var(--navigation-tabs-tab-disabled);
  pointer-events: none;
  cursor: not-allowed;
}
.tl-navigation-tabs__tab--disabled::after {
  content: none;
}
.tl-navigation-tabs__tab--disabled:focus-visible::before {
  box-shadow: none;
}

.tl-navigation-tabs {
  box-sizing: border-box;
}
.tl-navigation-tabs * {
  box-sizing: border-box;
}
.tl-navigation-tabs {
  background-color: var(--navigation-tabs-tab-background);
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  width: 100%;
  overflow-x: scroll;
  scrollbar-width: none;
  gap: 16px;
  position: relative;
}
.tl-navigation-tabs::-webkit-scrollbar {
  display: none;
}
.tl-navigation-tabs::after {
  border-bottom: 1px solid var(--navigation-tabs-horizontal-divider);
  content: " ";
  display: block;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
}

.tl-navigation-tabs__scroll-button {
  background-color: transparent;
  color: var(--navigation-tabs-scroll-button-icon);
  cursor: pointer;
  min-width: 48px;
  border: 0;
  display: block;
  justify-content: center;
  align-items: center;
  opacity: 1;
  position: sticky;
}

.tl-navigation-tabs__scroll-button--right {
  right: 0;
  z-index: 1;
}

.tl-navigation-tabs__scroll-button--left {
  left: 0;
  z-index: 1;
}

.tl-navigation-tabs__scroll-button svg {
  fill: var(--navigation-tabs-scroll-button-color);
}

.tl-text-field {
  --text-field-background: var(--color-background-layer-01);
  --text-field-text: var(--color-foreground-text-strong);
  --text-field-placeholder: var(--color-foreground-text-subtle);
  --text-field-affix: var(--color-foreground-text-defined);
  --text-field-label: var(--color-foreground-text-strong);
  --text-field-label-inside: var(--color-foreground-text-strong);
  --text-field-label-inside-left: 16px;
  --text-field-affix-width-icon: 35px;
  --text-field-affix-width-text: 8px;
  --text-field-border-bottom-readonly: var(--color-foreground-border-strong);
  --text-field-helper: var(--color-foreground-text-defined);
  --text-field-error: var(--color-system-danger-default);
  --text-field-affix-error: var(--color-foreground-text-defined);
  --text-field-background-disabled: var(--color-background-layer-01);
  --text-field-text-disabled: var(--color-foreground-text-disabled);
  --text-field-placeholder-disabled: var(--color-foreground-text-disabled);
  --text-field-label-disabled: var(--color-foreground-text-disabled);
  --text-field-affix-disabled: var(--color-foreground-text-disabled);
  --text-field-textcounter: var(--color-foreground-text-defined);
}
.tl-text-field--primary {
  --text-field-background: var(--color-background-layer-01);
  --text-field-background-disabled: var(--color-background-layer-01);
}
.tl-text-field--secondary {
  --text-field-background: var(--color-background-layer-02);
  --text-field-background-disabled: var(--color-background-layer-02);
}

.tl-text-field,
.scania .tl-text-field {
  --text-field-border-radius: 4px 4px 0 0;
  --text-field-box-shadow: 0 -1px 0 0 var(--color-foreground-border-soft);
  --text-field-box-shadow-hover: 0 -1px 0 0 var(--color-foreground-border-strong);
  --text-field-box-shadow-focus: 0 -2px 0 0 var(--color-foreground-border-accent-focus);
  --text-field-box-shadow-error: 0 -1px 0 0 var(--color-system-danger-default);
  --text-field-box-shadow-error-hover: 0 -1px 0 0 var(--color-system-danger-default);
  --text-field-box-shadow-error-focus: 0 -2px 0 0 var(--color-system-danger-default);
  --text-field-box-shadow-success: 0 -1px 0 0 var(--color-foreground-border-strong);
  --text-field-bar-focus: var(--color-foreground-border-accent-focus);
  --text-field-bar-error: var(--color-system-danger-default);
  --text-field-focus-outline: none;
  --text-field-focus-outline-error: none;
  --text-field-focus-outline-offset: 0;
}

.traton .tl-text-field {
  --text-field-border-radius: 4px 4px 4px 4px;
  --text-field-box-shadow: 0 0 0 1px var(--color-foreground-border-soft);
  --text-field-box-shadow-hover: 0 0 0 1px var(--color-foreground-border-strong);
  --text-field-box-shadow-focus: 0 0 0 2px var(--color-foreground-border-accent-focus);
  --text-field-box-shadow-success: 0 0 0 1px var(--color-foreground-border-strong);
  --text-field-box-shadow-error: 0 0 0 1px var(--color-system-danger-default);
  --text-field-box-shadow-error-hover: 0 0 0 1px var(--color-system-danger-default);
  --text-field-box-shadow-error-focus: 0 0 0 2px var(--color-system-danger-default);
  --text-field-focus-outline: 2px solid var(--color-foreground-border-accent-focus);
  --text-field-focus-outline-error: 2px solid var(--color-system-danger-default);
  --text-field-focus-outline-offset: 0;
  --text-field-bar-focus: transparent;
  --text-field-bar-error: transparent;
}

.tl-text-field {
  display: block;
  position: relative;
  width: 100%;
  min-width: 208px;
  border-radius: var(--text-field-border-radius);
  box-sizing: border-box;
}
.tl-text-field--no-min-width {
  min-width: auto;
}
.tl-text-field:has(.tl-text-field__input:disabled) {
  cursor: not-allowed;
}
.tl-text-field .tl-icon {
  background-color: var(--text-field-affix);
}
:has(.tl-text-field__input:disabled) .tl-text-field .tl-icon {
  background-color: var(--text-field-affix-disabled);
}

.tl-text-field__input-wrapper {
  position: relative;
}
.tl-text-field:has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)):not(.tl-text-field--hide-readonly-icon) .tl-text-field__input-wrapper::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 20px;
  height: 20px;
  background-color: var(--text-field-text);
  mask-image: var(--icon-edit_inactive-svg);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  transform: translateY(-50%);
  z-index: 1;
}

.tl-text-field__input {
  all: unset;
  border-radius: var(--text-field-border-radius);
  background-color: var(--text-field-background);
  color: var(--text-field-text);
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  border: none;
  outline: none;
}
.tl-text-field__input::placeholder {
  color: var(--text-field-placeholder);
}
.tl-text-field__input:disabled {
  background-color: var(--text-field-background-disabled);
  color: var(--text-field-text-disabled);
  user-select: none;
  pointer-events: none;
}
.tl-text-field__input:disabled::placeholder {
  color: var(--text-field-placeholder-disabled);
}
.tl-text-field__input {
  font-family: var(--detail-02-font-family);
  font-size: var(--detail-02-font-size);
  line-height: var(--detail-02-line-height);
  font-weight: var(--detail-02-font-weight);
  letter-spacing: var(--detail-02-letter-spacing);
  text-transform: var(--detail-02-text-transform);
  text-align: left;
  color: var(--text-field-text);
  flex: 1;
  order: 2;
  box-shadow: inset var(--text-field-box-shadow);
  transition: box-shadow 0.2s;
}
.tl-text-field__input:focus {
  box-shadow: inset var(--text-field-box-shadow-focus);
}
.tl-text-field:hover .tl-text-field__input:not(:focus):not(:disabled) {
  box-shadow: inset var(--text-field-box-shadow-hover);
}
.tl-text-field--error .tl-text-field__input {
  box-shadow: inset var(--text-field-box-shadow-error);
}
.tl-text-field--error .tl-text-field__input:focus {
  box-shadow: inset var(--text-field-box-shadow-error-focus);
}
.tl-text-field--error:hover .tl-text-field__input:not(:focus):not(:disabled) {
  box-shadow: inset var(--text-field-box-shadow-error-hover);
}
.tl-text-field--success:not(:has(.tl-text-field__input[readonly])):not(:has(.tl-text-field__input:disabled)) .tl-text-field__input:not(:focus) {
  box-shadow: inset var(--text-field-box-shadow-success);
}
.tl-text-field__input:disabled {
  box-shadow: none;
  background-color: var(--text-field-background-disabled);
  color: var(--text-field-text-disabled);
  cursor: not-allowed;
  pointer-events: none;
}
:has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)) .tl-text-field__input {
  box-shadow: inset var(--text-field-box-shadow);
}
:has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)) .tl-text-field__input:focus {
  box-shadow: inset var(--text-field-box-shadow-focus);
}
:has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)):hover .tl-text-field__input:not(:focus) {
  box-shadow: inset var(--text-field-box-shadow-hover);
}
:has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)) .tl-text-field__input {
  user-select: auto;
  caret-color: transparent;
  cursor: default;
  pointer-events: none;
}
.tl-text-field:has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)):not(.tl-text-field--hide-readonly-icon) .tl-text-field__input {
  padding-right: 54px;
}
.tl-text-field--lg .tl-text-field__input {
  padding: var(--tds-spacing-element-20) var(--tds-spacing-element-16);
  height: 56px;
}
.tl-text-field--md .tl-text-field__input {
  padding: var(--tds-spacing-element-16);
  height: 48px;
}
.tl-text-field--sm .tl-text-field__input {
  padding: var(--tds-spacing-element-12) var(--tds-spacing-element-16);
  height: 40px;
}
.tl-text-field--label-inside.tl-text-field--lg .tl-text-field__input {
  padding-top: var(--tds-spacing-element-24);
  padding-bottom: 15px;
}
.tl-text-field--label-inside.tl-text-field--md .tl-text-field__input {
  padding-top: var(--tds-spacing-element-20);
  padding-bottom: 11px;
}
.tl-text-field--label-inside.tl-text-field--sm .tl-text-field__input:not(:focus):placeholder-shown {
  padding-top: var(--tds-spacing-element-16);
  padding-bottom: 7px;
}
.tl-text-field:has(.tl-text-field__prefix--icon) .tl-text-field__input {
  padding-left: 44px;
}
.tl-text-field:has(.tl-text-field__prefix--text) .tl-text-field__input {
  padding-left: calc(16px + var(--text-field-affix-width-text) + 8px);
}
.tl-text-field:has(.tl-text-field__suffix--icon) .tl-text-field__input {
  padding-right: 44px;
}
.tl-text-field:has(.tl-text-field__suffix--text) .tl-text-field__input {
  padding-right: calc(16px + var(--text-field-affix-width-text) + 8px);
}
.tl-text-field--label-inside .tl-text-field__input::placeholder {
  color: transparent !important;
}
.tl-text-field:not(.tl-text-field--label-inside) .tl-text-field__input:disabled::placeholder {
  color: var(--text-field-placeholder-disabled) !important;
}

.tl-text-field:not(.tl-text-field--label-inside) .tl-text-field__label {
  font-family: var(--detail-05-font-family);
  font-size: var(--detail-05-font-size);
  line-height: var(--detail-05-line-height);
  font-weight: var(--detail-05-font-weight);
  letter-spacing: var(--detail-05-letter-spacing);
  text-transform: var(--detail-05-text-transform);
  display: block;
  margin-bottom: 8px;
  color: var(--text-field-label);
}
.tl-text-field--label-inside .tl-text-field__label {
  font-family: var(--detail-02-font-family);
  font-size: var(--detail-02-font-size);
  line-height: var(--detail-02-line-height);
  font-weight: var(--detail-02-font-weight);
  letter-spacing: var(--detail-02-letter-spacing);
  text-transform: var(--detail-02-text-transform);
  position: absolute;
  top: 50%;
  left: var(--text-field-label-inside-left, 16px);
  color: var(--text-field-label-inside);
  pointer-events: none;
  transform: translateY(-50%);
  transform-origin: top left;
  transition: transform 0.15s, font-size 0.15s, color 0.15s, top 0.15s;
  z-index: 1;
}
.tl-text-field--label-inside:has(.tl-text-field__prefix--icon) .tl-text-field__label {
  left: 44px;
}
.tl-text-field--label-inside:has(.tl-text-field__prefix--text) .tl-text-field__label {
  left: calc(16px + var(--text-field-affix-width-text) + 8px);
}
.tl-text-field--label-inside.tl-text-field--lg:has(.tl-text-field__input:focus) .tl-text-field__label, .tl-text-field--label-inside.tl-text-field--lg:has(.tl-text-field__input:not(:placeholder-shown)) .tl-text-field__label, .tl-text-field--label-inside.tl-text-field--md:has(.tl-text-field__input:focus) .tl-text-field__label, .tl-text-field--label-inside.tl-text-field--md:has(.tl-text-field__input:not(:placeholder-shown)) .tl-text-field__label {
  font-family: var(--detail-07-font-family);
  font-size: var(--detail-07-font-size);
  line-height: var(--detail-07-line-height);
  font-weight: var(--detail-07-font-weight);
  letter-spacing: var(--detail-07-letter-spacing);
  text-transform: var(--detail-07-text-transform);
  top: 8px;
  transform: translateY(0);
  transition: 0.1s ease all;
}
.tl-text-field--label-inside.tl-text-field--lg:has(.tl-text-field__prefix--icon):has(.tl-text-field__input:focus) .tl-text-field__label, .tl-text-field--label-inside.tl-text-field--lg:has(.tl-text-field__prefix--icon):has(.tl-text-field__input:not(:placeholder-shown)) .tl-text-field__label, .tl-text-field--label-inside.tl-text-field--md:has(.tl-text-field__prefix--icon):has(.tl-text-field__input:focus) .tl-text-field__label, .tl-text-field--label-inside.tl-text-field--md:has(.tl-text-field__prefix--icon):has(.tl-text-field__input:not(:placeholder-shown)) .tl-text-field__label {
  left: 44px;
}
.tl-text-field--label-inside.tl-text-field--lg:has(.tl-text-field__prefix--text):has(.tl-text-field__input:focus) .tl-text-field__label, .tl-text-field--label-inside.tl-text-field--lg:has(.tl-text-field__prefix--text):has(.tl-text-field__input:not(:placeholder-shown)) .tl-text-field__label, .tl-text-field--label-inside.tl-text-field--md:has(.tl-text-field__prefix--text):has(.tl-text-field__input:focus) .tl-text-field__label, .tl-text-field--label-inside.tl-text-field--md:has(.tl-text-field__prefix--text):has(.tl-text-field__input:not(:placeholder-shown)) .tl-text-field__label {
  left: calc(16px + var(--text-field-affix-width-text) + 8px);
}
.tl-text-field--label-inside.tl-text-field--sm:has(.tl-text-field__input:focus) .tl-text-field__label, .tl-text-field--label-inside.tl-text-field--sm:has(.tl-text-field__input:not(:placeholder-shown)) .tl-text-field__label {
  opacity: 0;
  visibility: hidden;
}
.tl-text-field--label-inside:has(.tl-text-field__input:disabled) .tl-text-field__label {
  color: var(--text-field-label-disabled);
}
.tl-text-field:not(.tl-text-field--label-inside):has(.tl-text-field__input:disabled) .tl-text-field__label {
  color: var(--text-field-label-disabled);
}

.tl-text-field__bottom {
  display: flex;
  gap: 8px;
  padding-top: 4px;
}

.tl-text-field__helper {
  font-family: var(--detail-05-font-family);
  font-size: var(--detail-05-font-size);
  line-height: var(--detail-05-line-height);
  font-weight: var(--detail-05-font-weight);
  letter-spacing: var(--detail-05-letter-spacing);
  text-transform: var(--detail-05-text-transform);
  color: var(--text-field-helper);
  position: relative;
}
:has(.tl-text-field__input:disabled) .tl-text-field__helper {
  color: var(--color-foreground-text-disabled);
}
.tl-text-field--error .tl-text-field__helper {
  padding-left: 24px;
}
.tl-text-field--error .tl-text-field__helper::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 16px;
  height: 16px;
  background-color: var(--text-field-error);
  mask-image: var(--icon-error-svg);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}
.tl-text-field--error:has(.tl-text-field__input[readonly]) .tl-text-field__helper {
  padding-left: 0;
}
.tl-text-field--error:has(.tl-text-field__input[readonly]) .tl-text-field__helper::before {
  display: none;
}
.tl-text-field--error:not(:has(.tl-text-field__input[readonly])):not(:has(.tl-text-field__input:disabled)) .tl-text-field__helper {
  color: var(--text-field-error);
}
.tl-text-field--error:has(.tl-text-field__input:disabled) .tl-text-field__helper::before {
  background-color: var(--color-foreground-text-disabled);
}

.tl-text-field__charcounter {
  font-family: var(--detail-05-font-family);
  font-size: var(--detail-05-font-size);
  line-height: var(--detail-05-line-height);
  font-weight: var(--detail-05-font-weight);
  letter-spacing: var(--detail-05-letter-spacing);
  text-transform: var(--detail-05-text-transform);
  margin-left: auto;
  color: var(--text-field-textcounter);
}
:has(.tl-text-field__input:disabled) .tl-text-field__charcounter {
  color: var(--color-foreground-text-disabled);
}
.tl-text-field--error:not(:has(.tl-text-field__input[readonly])):not(:has(.tl-text-field__input:disabled)) .tl-text-field__charcounter {
  color: var(--text-field-error);
}
.tl-text-field--error:not(:has(.tl-text-field__input[readonly])):not(:has(.tl-text-field__input:disabled)) .tl-text-field__charcounter .tl-text-field__charcounter-divider {
  color: var(--text-field-error);
}

.tl-text-field__charcounter-divider {
  color: var(--color-foreground-text-disabled);
}

.tl-text-field__prefix {
  font-family: var(--detail-02-font-family);
  font-size: var(--detail-02-font-size);
  line-height: var(--detail-02-line-height);
  font-weight: var(--detail-02-font-weight);
  letter-spacing: var(--detail-02-letter-spacing);
  text-transform: var(--detail-02-text-transform);
  color: var(--text-field-affix);
  align-self: center;
  display: flex;
  align-items: center;
  z-index: 1;
  position: relative;
}
.tl-text-field__prefix--text, .tl-text-field__prefix--icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}
:has(.tl-text-field__input:disabled) .tl-text-field__prefix--text, :has(.tl-text-field__input:disabled) .tl-text-field__prefix--icon {
  color: var(--text-field-affix-disabled);
}
:has(.tl-text-field__input:disabled) .tl-text-field__prefix--text > *, :has(.tl-text-field__input:disabled) .tl-text-field__prefix--icon > * {
  color: var(--text-field-affix-disabled);
}
:has(.tl-text-field__input:disabled) .tl-text-field__prefix--text .tl-icon, :has(.tl-text-field__input:disabled) .tl-text-field__prefix--icon .tl-icon {
  background-color: var(--text-field-affix-disabled);
}
:has(.tl-text-field__input:disabled) .tl-text-field__prefix--icon.tl-icon {
  background-color: var(--text-field-affix-disabled);
}

.tl-text-field__suffix {
  font-family: var(--detail-02-font-family);
  font-size: var(--detail-02-font-size);
  line-height: var(--detail-02-line-height);
  font-weight: var(--detail-02-font-weight);
  letter-spacing: var(--detail-02-letter-spacing);
  text-transform: var(--detail-02-text-transform);
  color: var(--text-field-affix);
  align-self: center;
  display: flex;
  align-items: center;
  z-index: 1;
  position: relative;
}
.tl-text-field__suffix--text, .tl-text-field__suffix--icon {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}
:has(.tl-text-field__input:disabled) .tl-text-field__suffix--text, :has(.tl-text-field__input:disabled) .tl-text-field__suffix--icon {
  color: var(--text-field-affix-disabled);
}
:has(.tl-text-field__input:disabled) .tl-text-field__suffix--text > *, :has(.tl-text-field__input:disabled) .tl-text-field__suffix--icon > * {
  color: var(--text-field-affix-disabled);
}
:has(.tl-text-field__input:disabled) .tl-text-field__suffix--text .tl-icon,
:has(.tl-text-field__input:disabled) .tl-text-field__suffix--text > .tl-icon, :has(.tl-text-field__input:disabled) .tl-text-field__suffix--icon .tl-icon,
:has(.tl-text-field__input:disabled) .tl-text-field__suffix--icon > .tl-icon {
  background-color: var(--text-field-affix-disabled) !important;
}
:has(.tl-text-field__input:disabled) .tl-text-field__suffix--icon.tl-icon {
  background-color: var(--text-field-affix-disabled);
}

.tl-text-field--label-inside:has(.tl-text-field__input:focus) .tl-text-field__label,
.tl-text-field--label-inside:has(.tl-text-field__input:not(:placeholder-shown)) .tl-text-field__label {
  font-family: var(--detail-07-font-family);
  font-size: var(--detail-07-font-size);
  line-height: var(--detail-07-line-height);
  font-weight: var(--detail-07-font-weight);
  letter-spacing: var(--detail-07-letter-spacing);
  text-transform: var(--detail-07-text-transform);
  top: 7.5px;
  left: var(--text-field-label-inside-left, 16px);
  transform: none;
}
.tl-text-field--label-inside:has(.tl-text-field__prefix--icon) .tl-text-field--label-inside:has(.tl-text-field__input:focus) .tl-text-field__label,
.tl-text-field--label-inside:has(.tl-text-field__prefix--icon) .tl-text-field--label-inside:has(.tl-text-field__input:not(:placeholder-shown)) .tl-text-field__label {
  left: 44px;
}
.tl-text-field--label-inside:has(.tl-text-field__prefix--text) .tl-text-field--label-inside:has(.tl-text-field__input:focus) .tl-text-field__label,
.tl-text-field--label-inside:has(.tl-text-field__prefix--text) .tl-text-field--label-inside:has(.tl-text-field__input:not(:placeholder-shown)) .tl-text-field__label {
  left: calc(16px + var(--text-field-affix-width-text) + 8px);
}

.tl-textarea {
  --textarea-background-primary: var(--color-background-layer-01);
  --textarea-background-secondary: var(--color-background-layer-02);
  --textarea-background: var(--textarea-background-primary);
  --textarea-text: var(--color-foreground-text-strong);
  --textarea-background-disabled: var(--textarea-background-primary);
  --textarea-text-disabled: var(--color-foreground-text-disabled);
  --textarea-placeholder-disabled: var(--color-foreground-text-disabled);
  --textarea-label-disabled: var(--color-foreground-text-disabled);
  --textarea-label: var(--color-foreground-text-strong);
  --textarea-label-inside: var(--color-foreground-text-strong);
  --textarea-label-inside-left: 16px;
  --textarea-placeholder: var(--color-foreground-text-subtle);
  --textarea-helper: var(--color-foreground-text-defined);
  --textarea-error: var(--color-system-danger-default);
  --textarea-textcounter: var(--color-foreground-text-defined);
  --textarea-resize-icon: var(--color-foreground-text-subtle);
}
.tl-textarea--primary {
  --textarea-background: var(--textarea-background-primary);
  --textarea-background-disabled: var(--textarea-background-primary);
}
.tl-textarea--secondary {
  --textarea-background: var(--textarea-background-secondary);
  --textarea-background-disabled: var(--textarea-background-secondary);
}

.tl-textarea,
.scania .tl-textarea {
  --textarea-border-radius: 4px 4px 0 0;
  --textarea-box-shadow: 0 -1px 0 0 var(--color-foreground-border-soft);
  --textarea-box-shadow-hover: 0 -1px 0 0 var(--color-foreground-border-strong);
  --textarea-box-shadow-focus: 0 -2px 0 0 var(--color-foreground-border-accent-focus);
  --textarea-box-shadow-error: 0 -1px 0 0 var(--color-system-danger-default);
  --textarea-box-shadow-error-hover: 0 -1px 0 0 var(--color-system-danger-default);
  --textarea-box-shadow-error-focus: 0 -2px 0 0 var(--color-system-danger-default);
  --textarea-box-shadow-success: 0 -1px 0 0 var(--color-foreground-border-strong);
}

.traton .tl-textarea {
  --textarea-border-radius: 4px;
  --textarea-box-shadow: 0 0 0 1px var(--color-foreground-border-soft);
  --textarea-box-shadow-hover: 0 0 0 1px var(--color-foreground-border-strong);
  --textarea-box-shadow-focus: 0 0 0 2px var(--color-foreground-border-accent-focus);
  --textarea-box-shadow-error: 0 0 0 1px var(--color-system-danger-default);
  --textarea-box-shadow-error-hover: 0 0 0 1px var(--color-system-danger-default);
  --textarea-box-shadow-error-focus: 0 0 0 2px var(--color-system-danger-default);
  --textarea-box-shadow-success: 0 0 0 1px var(--color-foreground-border-strong);
}

.tl-textarea {
  display: block;
  position: relative;
  width: 100%;
  min-width: 208px;
  padding-bottom: 1px;
  border-radius: var(--textarea-border-radius);
  box-sizing: border-box;
}
.tl-textarea--no-min-width {
  min-width: auto;
}
.tl-textarea:has(.tl-textarea__input:disabled) {
  cursor: not-allowed;
}
.tl-textarea:has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)):not(.tl-textarea--hide-readonly-icon)::before {
  content: "";
  position: absolute;
  top: 18px;
  right: 18px;
  width: 16px;
  height: 16px;
  background-color: var(--textarea-text);
  mask-image: var(--icon-edit_inactive-svg);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  z-index: 1;
}
.traton .tl-textarea:has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)):not(.tl-textarea--hide-readonly-icon)::before {
  top: 20px;
  right: 16px;
}
.tl-textarea:not(.tl-textarea--label-inside):has(.tl-textarea__label):has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)):not(.tl-textarea--hide-readonly-icon)::before {
  top: 42px;
}
.traton .tl-textarea:not(.tl-textarea--label-inside):has(.tl-textarea__label):has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)):not(.tl-textarea--hide-readonly-icon)::before {
  top: 44px;
}
.tl-textarea:not(.tl-textarea--label-inside):not(:has(.tl-textarea__label)):has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)):not(.tl-textarea--hide-readonly-icon)::before {
  top: 17px;
}
.traton .tl-textarea:not(.tl-textarea--label-inside):not(:has(.tl-textarea__label)):has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)):not(.tl-textarea--hide-readonly-icon)::before {
  top: 19px;
}
.tl-textarea::after {
  content: "";
  position: absolute;
  bottom: 3px;
  right: 3px;
  width: 12px;
  height: 12px;
  background-color: var(--textarea-resize-icon);
  mask-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.8536 0.853553C12.0488 0.658291 12.0488 0.341709 11.8536 0.146447C11.6583 -0.0488155 11.3417 -0.0488155 11.1464 0.146447L0.146447 11.1464C-0.0488155 11.3417 -0.0488155 11.6583 0.146447 11.8536C0.341709 12.0488 0.658291 12.0488 0.853553 11.8536L11.8536 0.853553ZM11.8536 4.64645C12.0488 4.84171 12.0488 5.15829 11.8536 5.35355L5.35355 11.8536C5.15829 12.0488 4.84171 12.0488 4.64645 11.8536C4.45118 11.6583 4.45118 11.3417 4.64645 11.1464L11.1464 4.64645C11.3417 4.45118 11.6583 4.45118 11.8536 4.64645ZM11.8536 8.64645C12.0488 8.84171 12.0488 9.15829 11.8536 9.35355L9.35355 11.8536C9.15829 12.0488 8.84171 12.0488 8.64645 11.8536C8.45118 11.6583 8.45118 11.3417 8.64645 11.1464L11.1464 8.64645C11.3417 8.45118 11.6583 8.45118 11.8536 8.64645Z' fill='currentColor'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  pointer-events: none;
  z-index: 1;
}
.traton .tl-textarea::after {
  bottom: 5px;
  right: 4px;
}
.tl-textarea:not(.tl-textarea--label-inside)::after {
  bottom: 5px;
}
.traton .tl-textarea:not(.tl-textarea--label-inside)::after {
  bottom: 5px;
}
.tl-textarea:has(.tl-textarea__bottom)::after {
  bottom: 25px;
}
.traton .tl-textarea:has(.tl-textarea__bottom)::after {
  bottom: 27px;
}
.tl-textarea :has(.tl-textarea__input:disabled)::after {
  background-color: var(--color-foreground-text-disabled);
}

.tl-textarea__input {
  all: unset;
  border-radius: var(--textarea-border-radius);
  background-color: var(--textarea-background);
  color: var(--textarea-text);
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  border: none;
  outline: none;
}
.tl-textarea__input::placeholder {
  color: var(--textarea-placeholder);
}
.tl-textarea__input:disabled {
  background-color: var(--textarea-background-disabled);
  color: var(--textarea-text-disabled);
  user-select: none;
  pointer-events: none;
}
.tl-textarea__input:disabled::placeholder {
  color: var(--textarea-placeholder-disabled);
}
.tl-textarea__input {
  font-family: var(--detail-02-font-family);
  font-size: var(--detail-02-font-size);
  line-height: var(--detail-02-line-height);
  font-weight: var(--detail-02-font-weight);
  letter-spacing: var(--detail-02-letter-spacing);
  text-transform: var(--detail-02-text-transform);
  display: block;
  position: relative;
  width: 100%;
  padding: var(--tds-spacing-element-20) var(--tds-spacing-element-16);
  color: var(--textarea-text);
  resize: vertical;
  box-shadow: inset var(--textarea-box-shadow);
  transition: box-shadow 0.2s;
  z-index: 0;
}
.tl-textarea__input::placeholder {
  transform: translateY(1px);
}
.tl-textarea__input:focus {
  box-shadow: inset var(--textarea-box-shadow-focus);
}
.tl-textarea__input::-webkit-resizer {
  display: none;
}
.tl-textarea:hover .tl-textarea__input:not(:focus):not(:disabled) {
  box-shadow: inset var(--textarea-box-shadow-hover);
}
.tl-textarea--error .tl-textarea__input {
  box-shadow: inset var(--textarea-box-shadow-error);
}
.tl-textarea--error .tl-textarea__input:focus {
  box-shadow: inset var(--textarea-box-shadow-error-focus);
}
.tl-textarea--error:hover .tl-textarea__input:not(:focus):not(:disabled) {
  box-shadow: inset var(--textarea-box-shadow-error-hover);
}
.tl-textarea--success:not(:has(.tl-textarea__input[readonly])):not(:has(.tl-textarea__input:disabled)) .tl-textarea__input:not(:focus) {
  box-shadow: inset var(--textarea-box-shadow-success);
}
.tl-textarea__input:disabled {
  box-shadow: none;
  color: var(--textarea-text-disabled);
  cursor: not-allowed;
  pointer-events: none;
}
:has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)) .tl-textarea__input {
  box-shadow: inset var(--textarea-box-shadow);
}
:has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)) .tl-textarea__input:focus {
  box-shadow: inset var(--textarea-box-shadow-focus);
}
:has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)):hover .tl-textarea__input:not(:focus) {
  box-shadow: inset var(--textarea-box-shadow-hover);
}
.tl-textarea--label-inside .tl-textarea__input {
  padding-top: 26px;
  padding-bottom: 15px;
}
.tl-textarea--label-inside .tl-textarea__input::placeholder {
  color: transparent;
  transform: translateY(1px);
}
.tl-textarea--label-inside .tl-textarea__input:disabled::placeholder {
  color: var(--textarea-placeholder-disabled) !important;
}
:has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)) .tl-textarea__input {
  user-select: auto;
  caret-color: transparent;
  cursor: default;
  pointer-events: none;
}
:has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)):not(.tl-textarea__input--hide-readonly-icon) .tl-textarea__input {
  padding-right: 50px;
}

.tl-textarea:not(.tl-textarea--label-inside) .tl-textarea__label {
  font-family: var(--detail-05-font-family);
  font-size: var(--detail-05-font-size);
  line-height: var(--detail-05-line-height);
  font-weight: var(--detail-05-font-weight);
  letter-spacing: var(--detail-05-letter-spacing);
  text-transform: var(--detail-05-text-transform);
  display: block;
  margin-bottom: 8px;
  color: var(--textarea-label);
}
.tl-textarea--label-inside .tl-textarea__label {
  font-family: var(--detail-02-font-family);
  font-size: var(--detail-02-font-size);
  line-height: var(--detail-02-line-height);
  font-weight: var(--detail-02-font-weight);
  letter-spacing: var(--detail-02-letter-spacing);
  text-transform: var(--detail-02-text-transform);
  position: absolute;
  top: 21px;
  left: var(--textarea-label-inside-left, 16px);
  color: var(--textarea-label-inside);
  pointer-events: none;
  transform: none;
  transform-origin: top left;
  transition: transform 0.15s, font-size 0.15s, color 0.15s, top 0.15s;
  z-index: 1;
}
.tl-textarea--label-inside:has(.tl-textarea__input:disabled) .tl-textarea__label {
  font-family: var(--detail-07-font-family);
  font-size: var(--detail-07-font-size);
  line-height: var(--detail-07-line-height);
  font-weight: var(--detail-07-font-weight);
  letter-spacing: var(--detail-07-letter-spacing);
  text-transform: var(--detail-07-text-transform);
  top: 8px;
  color: var(--textarea-label-disabled);
  transform: translateY(0);
}
.tl-textarea:not(.tl-textarea--label-inside):has(.tl-textarea__input:disabled) .tl-textarea__label {
  color: var(--textarea-label-disabled);
}

.tl-textarea__bottom {
  display: flex;
  gap: 8px;
  padding-top: 4px;
}

.tl-textarea__helper {
  font-family: var(--detail-05-font-family);
  font-size: var(--detail-05-font-size);
  line-height: var(--detail-05-line-height);
  font-weight: var(--detail-05-font-weight);
  letter-spacing: var(--detail-05-letter-spacing);
  text-transform: var(--detail-05-text-transform);
  color: var(--textarea-helper);
  position: relative;
}
:has(.tl-textarea__input:disabled) .tl-textarea__helper {
  color: var(--color-foreground-text-disabled);
}
.tl-textarea--error .tl-textarea__helper {
  padding-left: 24px;
}
.tl-textarea--error .tl-textarea__helper::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 16px;
  height: 16px;
  background-color: var(--textarea-error);
  mask-image: var(--icon-error-svg);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}
.tl-textarea--error:has(.tl-textarea__input[readonly]) .tl-textarea__helper {
  padding-left: 0;
}
.tl-textarea--error:has(.tl-textarea__input[readonly]) .tl-textarea__helper::before {
  display: none;
}
.tl-textarea--error:not(:has(.tl-textarea__input[readonly])):not(:has(.tl-textarea__input:disabled)) .tl-textarea__helper {
  color: var(--textarea-error);
}
.tl-textarea--error:has(.tl-textarea__input:disabled) .tl-textarea__helper::before {
  background-color: var(--color-foreground-text-disabled);
}

.tl-textarea__charcounter {
  font-family: var(--detail-05-font-family);
  font-size: var(--detail-05-font-size);
  line-height: var(--detail-05-line-height);
  font-weight: var(--detail-05-font-weight);
  letter-spacing: var(--detail-05-letter-spacing);
  text-transform: var(--detail-05-text-transform);
  margin-left: auto;
  color: var(--textarea-textcounter);
}
:has(.tl-textarea__input:disabled) .tl-textarea__charcounter {
  color: var(--color-foreground-text-disabled);
}
.tl-textarea--error:not(:has(.tl-textarea__input[readonly])):not(:has(.tl-textarea__input:disabled)) .tl-textarea__charcounter {
  color: var(--textarea-error);
}
.tl-textarea--error:not(:has(.tl-textarea__input[readonly])):not(:has(.tl-textarea__input:disabled)) .tl-textarea__charcounter .tl-textarea__charcounter-divider {
  color: var(--textarea-error);
}

.tl-textarea__charcounter-divider {
  color: var(--color-foreground-text-disabled);
}

.tl-textarea--label-inside:has(.tl-textarea__input:focus) .tl-textarea__label,
.tl-textarea--label-inside:has(.tl-textarea__input:not(:placeholder-shown)) .tl-textarea__label {
  font-family: var(--detail-07-font-family);
  font-size: var(--detail-07-font-size);
  line-height: var(--detail-07-line-height);
  font-weight: var(--detail-07-font-weight);
  letter-spacing: var(--detail-07-letter-spacing);
  text-transform: var(--detail-07-text-transform);
  top: 12.5px;
  transform: none;
}

.tl-toast {
  --toast-background: var(--color-background-inverse-base);
  --toast-headline: var(--color-foreground-text-inverse-strong);
  --toast-subheadline: var(--color-foreground-text-inverse-soft);
  --toast-dismiss: var(--color-foreground-text-inverse-strong);
  --toast-icon-error: var(--color-system-danger-default);
  --toast-icon-success: var(--color-system-success-default);
  --toast-icon-warning: var(--color-system-warning-default);
  --toast-icon-info: var(--color-system-info-default);
}

.tl-toast {
  z-index: 800;
  display: flex;
  width: 348px;
  background-color: var(--toast-background);
  border-radius: 4px;
}
.tl-toast--information {
  border-left: 4px solid var(--toast-icon-info);
}
.tl-toast--success {
  border-left: 4px solid var(--toast-icon-success);
}
.tl-toast--error {
  border-left: 4px solid var(--toast-icon-error);
}
.tl-toast--warning {
  border-left: 4px solid var(--toast-icon-warning);
}
.tl-toast--hide {
  display: none;
  visibility: hidden;
}

.tl-toast__icon {
  padding: 14px 0 0 12px;
  color: var(--toast-icon-info);
  flex-shrink: 0;
}

.tl-toast__content {
  padding: 16px 0 16px 10px;
  display: flex;
  flex-direction: column;
  flex: 1;
  max-width: 250px;
  word-break: break-word;
}

.tl-toast__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tl-toast__header {
  font-family: var(--headline-07-font-family);
  font-size: var(--headline-07-font-size);
  line-height: var(--headline-07-line-height);
  font-weight: var(--headline-07-font-weight);
  letter-spacing: var(--headline-07-letter-spacing);
  text-transform: var(--headline-07-text-transform);
  color: var(--toast-headline);
  margin: 0;
}

.tl-toast__subheader {
  font-family: var(--detail-02-font-family);
  font-size: var(--detail-02-font-size);
  line-height: var(--detail-02-line-height);
  font-weight: var(--detail-02-font-weight);
  letter-spacing: var(--detail-02-letter-spacing);
  text-transform: var(--detail-02-text-transform);
  color: var(--toast-subheadline);
  margin: 0;
}

.tl-toast__actions {
  padding-top: 12px;
}

.tl-toast__close {
  height: 20px;
  width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 14px 14px 0 22px;
  border: none;
  background: transparent;
  color: var(--toast-dismiss);
  cursor: pointer;
}
.tl-toast__close:focus-visible {
  outline: 2px solid var(--tds-focus-outline-color);
  box-shadow: 0 0 0 1px var(--tds-white);
  outline-offset: 1px;
  z-index: 1;
}

.tl-toast--error .tl-toast__icon {
  color: var(--toast-icon-error);
}
.tl-toast--success .tl-toast__icon {
  color: var(--toast-icon-success);
}
.tl-toast--warning .tl-toast__icon {
  color: var(--toast-icon-warning);
}

.tl-toggle {
  --toggle-switch: var(--color-brand-neutral-white);
  --toggle-text: var(--color-foreground-text-strong);
  --toggle-disabled: var(--color-foreground-icon-disabled);
  --toggle-background-on: var(--color-system-success-default);
  --toggle-background-off: var(--color-foreground-icon-subtle);
  --toggle-border-focus: var(--color-foreground-border-accent-focus);
}

.tl-toggle:has(input[type=checkbox]:disabled) {
  cursor: not-allowed;
}

.tl-toggle__input {
  appearance: initial;
  margin: 0;
  width: 44px;
  height: 24px;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
}
.tl-toggle__input::after, .tl-toggle__input::before {
  transition: all var(--tds-motion-duration-moderate-01) var(--tds-motion-easing-scania);
  content: "";
  position: absolute;
  box-sizing: border-box;
}
.tl-toggle__input::before {
  /* Slider */
  background-color: var(--toggle-background-off);
  border: 2px solid transparent;
  border-radius: 16px;
  left: 0;
  height: 24px;
  width: 44px;
}
.tl-toggle__input {
  /* Switch */
}
.tl-toggle__input::after {
  background-color: var(--toggle-switch);
  border-radius: 50%;
  left: 4px;
  top: 4px;
  width: 16px;
  height: 16px;
}
.tl-toggle__input:focus-visible {
  outline: 2px solid var(--tds-focus-outline-color);
  box-shadow: 0 0 0 1px var(--tds-white);
  outline-offset: 1px;
  z-index: 1;
  border-radius: 16px;
}
.tl-toggle__input:focus-visible::before {
  background-color: var(--toggle-disabled);
}
.tl-toggle__input:hover::before {
  background-color: var(--toggle-background-off);
}
.tl-toggle__input:checked::before {
  background-color: var(--toggle-background-on);
}
.tl-toggle__input:checked::after {
  left: 24px;
}
.tl-toggle__input:disabled {
  pointer-events: none;
  cursor: not-allowed;
}
.tl-toggle__input:disabled::before {
  background-color: var(--toggle-disabled);
}
.tl-toggle__input:disabled::after {
  background-color: var(--toggle-switch);
}
.tl-toggle__input:disabled:checked::before {
  background-color: var(--toggle-disabled);
}
.tl-toggle__input:disabled:checked::after {
  background-color: var(--toggle-switch);
}
.tl-toggle__input--sm {
  width: 28px;
  height: 16px;
}
.tl-toggle__input--sm::before {
  width: 28px;
  height: 16px;
}
.tl-toggle__input--sm::after {
  width: 8px;
  height: 8px;
}
.tl-toggle__input--sm:checked::before {
  background-color: var(--toggle-background-on);
}
.tl-toggle__input--sm:checked::after {
  left: 16px;
}
.tl-toggle__input--sm:disabled::before {
  background-color: var(--toggle-disabled);
}
.tl-toggle__input--sm:disabled::after {
  background-color: var(--toggle-switch);
}

.tl-toggle__headline {
  font-family: var(--detail-02-font-family);
  font-size: var(--detail-02-font-size);
  line-height: var(--detail-02-line-height);
  font-weight: var(--detail-02-font-weight);
  letter-spacing: var(--detail-02-letter-spacing);
  text-transform: var(--detail-02-text-transform);
  color: var(--toggle-text);
  margin-bottom: 12px;
}
.tl-toggle:has(input[type=checkbox]:disabled) .tl-toggle__headline {
  color: var(--toggle-disabled);
  user-select: none;
  cursor: not-allowed;
}

.tl-toggle__label {
  font-family: var(--detail-02-font-family);
  font-size: var(--detail-02-font-size);
  line-height: var(--detail-02-line-height);
  font-weight: var(--detail-02-font-weight);
  letter-spacing: var(--detail-02-letter-spacing);
  text-transform: var(--detail-02-text-transform);
  color: var(--toggle-text);
  cursor: pointer;
  user-select: none;
  display: inline-block;
  vertical-align: middle;
  padding-left: 8px;
}
input[type=checkbox]:disabled ~ .tl-toggle__label {
  color: var(--toggle-disabled);
  pointer-events: none;
  cursor: not-allowed;
}

.tl-tooltip {
  --tooltip-text: var(--color-foreground-text-inverse-strong);
  --tooltip-background: var(--color-background-inverse-layer-03);
}

.scania {
  --tl-tooltip-line-height: 17px;
}

.traton {
  --tl-tooltip-line-height: 16px;
}

.tl-tooltip {
  font-family: var(--detail-05-font-family);
  font-size: var(--detail-05-font-size);
  line-height: var(--detail-05-line-height);
  font-weight: var(--detail-05-font-weight);
  letter-spacing: var(--detail-05-letter-spacing);
  text-transform: var(--detail-05-text-transform);
  position: fixed;
  z-index: var(--tds-z-index-tooltip, 1000);
  padding: 8px;
  max-width: 204px;
  width: max-content;
  white-space: normal;
  word-wrap: break-word;
  background-color: var(--tooltip-background, #333);
  color: var(--tooltip-text, #fff);
  box-sizing: border-box;
  line-height: var(--tl-tooltip-line-height);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  border-radius: 4px;
}
.tl-tooltip--visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.tl-tooltip--top-start {
  border-radius: 4px 4px 4px 0;
}
.tl-tooltip--top-end {
  border-radius: 4px 4px 0;
}
.tl-tooltip--bottom-start {
  border-radius: 0 4px 4px;
}
.tl-tooltip--bottom-end {
  border-radius: 4px 0 4px 4px;
}
.tl-tooltip--left-start {
  border-radius: 4px 0 4px 4px;
}
.tl-tooltip--left-end {
  border-radius: 4px 4px 0;
}
.tl-tooltip--right-start {
  border-radius: 0 4px 4px;
}
.tl-tooltip--right-end {
  border-radius: 4px 4px 4px 0;
}
/* appended from tl-checkbox-vars.css */
.tl-checkbox {
  --checkbox-label: var(--color-foreground-text-strong);
  --checkbox-label-disabled: var(--color-foreground-text-disabled);
  --checkbox-icon: var(--color-foreground-icon-strong);
  --checkbox-fill: var(--color-foreground-icon-inverse-strong);
  --checkbox-fill-disabled: var(--color-background-accent-primary-disabled);
  --checkbox-border: var(--color-foreground-border-strong);
  --checkbox-border-hover: var(--color-foreground-border-subtle);
  --checkbox-border-focus: var(--color-foreground-border-accent-focus);
  --checkbox-border-disabled: var(--color-foreground-border-discrete);
  --checkbox-background-opacity-hover: 0.12;
  --checkbox-background-opacity-focus: 0.24;
  --checkbox-background-img: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  --checkbox-background-img-indeterminate: url("data:image/svg+xml;utf8,<svg width='8' height='2' viewBox='0 0 8 2' fill='none' xmlns='http://www.w3.org/2000/svg'><rect y='0.5' width='8' height='1' rx='0.5' fill='%23ffffff'/></svg>");
  --checkbox-background-img-disabled: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%23b0b7c4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  --checkbox-background-img-indeterminate-disabled: url("data:image/svg+xml;utf8,<svg width='8' height='2' viewBox='0 0 8 2' fill='none' xmlns='http://www.w3.org/2000/svg'><rect y='0.5' width='8' height='1' rx='0.5' fill='%23b0b7c4'/></svg>");
}

.tl-mode-dark .tl-checkbox {
  --checkbox-background-img: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%230D0F13' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  --checkbox-background-img-indeterminate: url("data:image/svg+xml;utf8,<svg width='8' height='2' viewBox='0 0 8 2' fill='none' xmlns='http://www.w3.org/2000/svg'><rect y='0.5' width='8' height='1' rx='0.5' fill='%230D0F13'/></svg>");
  --checkbox-background-img-disabled: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%2356657A' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  --checkbox-background-img-indeterminate-disabled: url("data:image/svg+xml;utf8,<svg width='8' height='2' viewBox='0 0 8 2' fill='none' xmlns='http://www.w3.org/2000/svg'><rect y='0.5' width='8' height='1' rx='0.5' fill='%2356657A'/></svg>");
}

.scania .tl-checkbox {
  --checkbox-focus-width: 20px;
  --checkbox-focus-height: 20px;
  --checkbox-focus-left: 2px;
  --checkbox-focus-top: 2px;
}

.traton .tl-checkbox {
  --checkbox-focus-width: 22px;
  --checkbox-focus-height: 22px;
  --checkbox-focus-left: 1px;
  --checkbox-focus-top: 1px;
}
/* appended from tl-step.css */
/* Typography Usage mixins */
/**
 * Do not edit directly, this file was auto-generated.
 */
.tl-stepper,
tds-stepper {
  --component-stepper-success: var(--color-system-success-default);
}

.tl-stepper {
  --stepper-current-number-with-border: var(--color-foreground-border-strong);
  --stepper-icon-step-border-warning: var(--color-system-danger-default);
  --stepper-icon-step-border-success: var(--component-stepper-success);
  --stepper-icon-step-checkmark: var(--color-foreground-icon-inverse-strong);
  --stepper-label-text-upcoming: var(--color-foreground-text-disabled);
  --stepper-label-border-upcoming: var(--color-foreground-border-discrete);
  --stepper-divider-line: var(--color-foreground-icon-disabled);
}

.tl-stepper__step {
  position: relative;
  display: flex;
  justify-content: start;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.tl-stepper--label-below .tl-stepper__step {
  flex-direction: column;
}
.tl-stepper--lg .tl-stepper__step {
  font-family: var(--detail-01-font-family);
  font-size: var(--detail-01-font-size);
  line-height: var(--detail-01-line-height);
  font-weight: var(--detail-01-font-weight);
  letter-spacing: var(--detail-01-letter-spacing);
  text-transform: var(--detail-01-text-transform);
  padding: 0 20px;
}
.tl-stepper--sm .tl-stepper__step {
  font-family: var(--detail-05-font-family);
  font-size: var(--detail-05-font-size);
  line-height: var(--detail-05-line-height);
  font-weight: var(--detail-05-font-weight);
  letter-spacing: var(--detail-05-letter-spacing);
  text-transform: var(--detail-05-text-transform);
  padding: 0 20px;
}
.tl-stepper--horizontal:not(.tl-stepper--label-aside) .tl-stepper__list > .tl-stepper__step {
  flex: 1 1 0;
  min-inline-size: 60px;
}
.tl-stepper--horizontal.tl-stepper--label-aside .tl-stepper__list > .tl-stepper__step {
  flex: 0 0 auto;
  min-inline-size: auto;
}
.tl-stepper--horizontal.tl-stepper--label-aside.tl-stepper--hide-labels .tl-stepper__list > .tl-stepper__step {
  min-inline-size: 40px;
}
.tl-stepper--horizontal.tl-stepper--sm:not(.tl-stepper--label-aside) .tl-stepper__list > .tl-stepper__step {
  min-inline-size: 40px;
}
.tl-stepper--horizontal.tl-stepper--sm.tl-stepper--label-aside.tl-stepper--hide-labels .tl-stepper__list > .tl-stepper__step {
  min-inline-size: 48px;
}
.tl-stepper--lg .tl-stepper__step:last-of-type::after, .tl-stepper--sm .tl-stepper__step:last-of-type::after {
  display: none;
}
.tl-stepper--vertical.tl-stepper--lg .tl-stepper__step:last-of-type::after, .tl-stepper--vertical.tl-stepper--sm .tl-stepper__step:last-of-type::after {
  display: none;
}
.tl-stepper--lg .tl-stepper__step::after {
  content: " ";
  position: absolute;
  background-color: var(--stepper-divider-line);
}
.tl-stepper--lg.tl-stepper--vertical .tl-stepper__step::after {
  height: 36px;
  width: 1px;
  top: 40px;
  left: 36px;
}
.tl-stepper--lg.tl-stepper--horizontal .tl-stepper__step::after {
  height: 1px;
  left: calc(50% + 15px + 8px);
  right: calc(-50% + 15px + 8px);
  top: 16px;
}
.tl-stepper--lg.tl-stepper--horizontal.tl-stepper--label-aside:not(.tl-stepper--hide-labels) .tl-stepper__step::after {
  height: 1px;
  top: 16px;
  width: 10px;
  left: auto;
  right: -10px;
}
.tl-stepper--sm.tl-stepper--vertical .tl-stepper__step::after {
  content: " ";
  position: absolute;
  background-color: var(--stepper-divider-line);
  height: 20px;
  width: 1px;
  top: 34px;
  left: 32px;
}
.tl-stepper--sm.tl-stepper--horizontal .tl-stepper__step::after {
  content: " ";
  position: absolute;
  background-color: var(--stepper-divider-line);
  height: 1px;
  left: calc(50% + 12px + 8px);
  right: calc(-50% + 12px + 8px);
  top: 13px;
}
.tl-stepper--sm.tl-stepper--horizontal.tl-stepper--label-aside:not(.tl-stepper--hide-labels) .tl-stepper__step::after {
  content: " ";
  position: absolute;
  background-color: var(--stepper-divider-line);
  height: 1px;
  top: 13px;
  width: 10px;
  left: auto;
  right: -10px;
}

.tl-stepper__node {
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-radius: 100px;
  border-width: 1px;
  border-style: solid;
  text-align: center;
  position: relative;
}
.tl-stepper--lg .tl-stepper__node {
  height: 30px;
  min-width: 30px;
  font-size: 14px;
}
.tl-stepper--sm .tl-stepper__node {
  height: 24px;
  min-width: 24px;
}
.tl-stepper__step--error .tl-stepper__node {
  border-color: var(--stepper-icon-step-border-warning);
  color: var(--stepper-icon-step-border-warning);
}
.tl-stepper__step--success .tl-stepper__node {
  background-color: var(--stepper-icon-step-border-success);
  border-color: var(--stepper-icon-step-border-success);
  color: var(--stepper-icon-step-checkmark);
}
.tl-stepper__step--current .tl-stepper__node {
  color: var(--stepper-current-number-with-border);
}
.tl-stepper__step--upcoming .tl-stepper__node {
  border-color: var(--stepper-label-border-upcoming);
  color: var(--stepper-label-text-upcoming);
}
.tl-stepper__step--success .tl-stepper__node, .tl-stepper__step--error .tl-stepper__node {
  justify-content: center;
}
.tl-stepper__step--success .tl-stepper__node::after, .tl-stepper__step--error .tl-stepper__node::after {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  background-color: currentcolor;
}
.tl-stepper__step--success .tl-stepper__node::after {
  mask-image: var(--icon-tick-svg);
}
.tl-stepper__step--error .tl-stepper__node::after {
  mask-image: var(--icon-warning-svg);
}

.tl-stepper--sm .tl-stepper__step--success .tl-stepper__node::after,
.tl-stepper--sm .tl-stepper__step--error .tl-stepper__node::after {
  width: 16px;
  height: 16px;
}

.tl-stepper__label {
  text-align: center;
}
.tl-stepper--lg .tl-stepper__label {
  font-family: var(--detail-01-font-family);
  font-size: var(--detail-01-font-size);
  line-height: var(--detail-01-line-height);
  font-weight: var(--detail-01-font-weight);
  letter-spacing: var(--detail-01-letter-spacing);
  text-transform: var(--detail-01-text-transform);
  font-size: 14px;
}
.tl-stepper--sm .tl-stepper__label {
  font-family: var(--detail-05-font-family);
  font-size: var(--detail-05-font-size);
  line-height: var(--detail-05-line-height);
  font-weight: var(--detail-05-font-weight);
  letter-spacing: var(--detail-05-letter-spacing);
  text-transform: var(--detail-05-text-transform);
}
.tl-stepper__step--upcoming .tl-stepper__label {
  color: var(--stepper-label-text-upcoming);
  opacity: var(--tds-stepper-label-text-opacity-upcoming);
}
.tl-stepper--hide-labels .tl-stepper__label {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}