/*
* This file is used for generating the global styles for the Tegel Lite package.
* It is a copy of the global.scss file in the core package, buwithout the web component styles.
* Once the Web Components imports are removed from the global.scss file, that file can be used for Tegel Lite as well.
*/
:root {
  --unit-2: 2px;
  --unit-4: 4px;
  --unit-8: 8px;
  --unit-12: 12px;
  --unit-16: 16px;
  --unit-20: 20px;
  --unit-24: 24px;
  --unit-32: 32px;
  --unit-40: 40px;
  --unit-48: 48px;
  --unit-56: 56px;
  --unit-64: 64px;
  --unit-80: 80px;
  --unit-96: 96px;
  --unit-120: 120px;
}

:root {
  --radius-none: 0;
  --radius-full: 9999px;
}

:root,
html {
  --tds-spacing-layout-8: 8px;
  --tds-spacing-layout-16: 16px;
  --tds-spacing-layout-24: 24px;
  --tds-spacing-layout-32: 32px;
  --tds-spacing-layout-48: 48px;
  --tds-spacing-layout-64: 64px;
  --tds-spacing-layout-72: 72px;
  --tds-spacing-layout-96: 96px;
  --tds-spacing-layout-128: 128px;
  --tds-spacing-layout-160: 160px;
  --tds-spacing-element-2: 2px;
  --tds-spacing-element-4: 4px;
  --tds-spacing-element-8: 8px;
  --tds-spacing-element-12: 12px;
  --tds-spacing-element-16: 16px;
  --tds-spacing-element-20: 20px;
  --tds-spacing-element-24: 24px;
  --tds-spacing-element-32: 32px;
  --tds-spacing-element-40: 40px;
  --tds-spacing-element-48: 48px;
}

:root,
html {
  /* ========================================================================
     Motion Duration Variables
     ======================================================================= */
  /* Instantaneous */
  --tds-motion-duration-instant: 0ms;
  /* Fast durations */
  --tds-motion-duration-fast-01: 100ms;
  --tds-motion-duration-fast-02: 150ms;
  /* Moderate durations */
  --tds-motion-duration-moderate-01: 200ms;
  --tds-motion-duration-moderate-02: 300ms;
  /* Slow durations */
  --tds-motion-duration-slow-01: 400ms;
  --tds-motion-duration-slow-02: 500ms;
  /* ========================================================================
     Motion Easing Variables
     ======================================================================= */
  /* Scania-standard easing */
  --tds-motion-easing-scania: cubic-bezier(0.4, 0, 0, 1);
  /* Easing for entering elements (e.g., sliding in or zooming in) */
  --tds-motion-easing-enter: cubic-bezier(0.1, 0.9, 0.2, 1);
  /* Easing for exiting elements (e.g., sliding out or zooming out) */
  --tds-motion-easing-exit: cubic-bezier(0.7, 0, 1, 0.5);
  /* General-purpose easing for smooth animations */
  --tds-motion-easing-easy: cubic-bezier(0.33, 0, 0.67, 1);
  /* Linear easing for uniform motion */
  --tds-motion-easing-linear: cubic-bezier(0, 0, 1, 1);
  /* Ease-in-out easing for combined smooth entrance and exit */
  --tds-motion-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  /* ========================================================================
      Motion Transition Variables
     ======================================================================= */
  /* ### Fade ### */
  --tds-motion-fade-in: tds-fade-in var(--tds-motion-duration-slow-02)
    var(--tds-motion-easing-enter) forwards;
  --tds-motion-fade-out: tds-fade-out var(--tds-motion-duration-moderate-01)
    var(--tds-motion-easing-exit) forwards;
  /* ### Zoom ### */
  --tds-motion-zoom-in: tds-zoom-in var(--tds-motion-duration-fast-02)
    var(--tds-motion-easing-enter) forwards;
  --tds-motion-zoom-out: tds-zoom-out var(--tds-motion-duration-fast-02)
    var(--tds-motion-easing-exit) forwards;
  /* ### Slide ### */
  --tds-motion-slide-in-top: tds-slide-in-top var(--tds-motion-duration-slow-02)
    var(--tds-motion-easing-enter) forwards;
  --tds-motion-slide-in-bottom: tds-slide-in-bottom var(--tds-motion-duration-slow-02)
    var(--tds-motion-easing-enter) forwards;
  --tds-motion-slide-in-left: tds-slide-in-left var(--tds-motion-duration-slow-02)
    var(--tds-motion-easing-enter) forwards;
  --tds-motion-slide-in-right: tds-slide-in-right var(--tds-motion-duration-slow-02)
    var(--tds-motion-easing-enter) forwards;
  --tds-motion-slide-out-top: tds-slide-out-top var(--tds-motion-duration-slow-02)
    var(--tds-motion-easing-exit) forwards;
  --tds-motion-slide-out-bottom: tds-slide-out-bottom var(--tds-motion-duration-slow-02)
    var(--tds-motion-easing-exit) forwards;
  --tds-motion-slide-out-left: tds-slide-out-left var(--tds-motion-duration-slow-02)
    var(--tds-motion-easing-exit) forwards;
  --tds-motion-slide-out-right: tds-slide-out-right var(--tds-motion-duration-slow-02)
    var(--tds-motion-easing-exit) forwards;
  /* ### Slide Short ### */
  --tds-motion-slide-in-short-top: tds-slide-top-short var(--tds-motion-duration-slow-02)
    var(--tds-motion-easing-enter) forwards;
  --tds-motion-slide-in-short-right: tds-slide-right-short var(--tds-motion-duration-slow-02)
    var(--tds-motion-easing-enter) forwards;
  --tds-motion-slide-in-short-bottom: tds-slide-bottom-short var(--tds-motion-duration-slow-02)
    var(--tds-motion-easing-enter) forwards;
  --tds-motion-slide-in-short-left: tds-slide-left-short var(--tds-motion-duration-slow-02)
    var(--tds-motion-easing-enter) forwards;
  --tds-motion-slide-out-short-top: tds-slide-out-top-short var(--tds-motion-duration-slow-02)
    var(--tds-motion-easing-exit) forwards;
  --tds-motion-slide-out-short-bottom: tds-slide-out-bottom-short var(--tds-motion-duration-slow-02)
    var(--tds-motion-easing-exit) forwards;
  --tds-motion-slide-out-short-left: tds-slide-out-left-short var(--tds-motion-duration-slow-02)
    var(--tds-motion-easing-exit) forwards;
  --tds-motion-slide-out-short-right: tds-slide-out-right-short var(--tds-motion-duration-slow-02)
    var(--tds-motion-easing-exit) forwards;
  /* ### Collapse ### */
  --tds-motion-collapse-in: tds-collapse-in var(--tds-motion-duration-slow-02)
    var(--tds-motion-easing-enter) forwards;
  --tds-motion-collapse-out: tds-collapse-out var(--tds-motion-duration-slow-02)
    var(--tds-motion-easing-exit) forwards;
  /* ### Rotate ### */
  --tds-motion-rotate: tds-rotate var(--tds-motion-duration-slow-02) var(--tds-motion-easing-linear)
    forwards;
  /* ### Shake ### */
  --tds-motion-shake: tds-shake var(--tds-motion-duration-slow-02) var(--tds-motion-easing-linear)
    forwards;
  /* ### Blink ### */
  --tds-motion-blink: tds-blink calc(var(--tds-motion-duration-slow-02) * 2)
    var(--tds-motion-easing-scania) infinite;
  /* ### Pulse ### */
  --tds-motion-pulse: tds-pulse calc(var(--tds-motion-duration-slow-02) * 2)
    var(--tds-motion-easing-scania) infinite;
  /* ========================================================================
        Motion Animation Variables
       ======================================================================= */
  --tds-motion-zoom-enter: tds-fade-in var(--tds-motion-duration-slow-02)
    var(--tds-motion-easing-enter) forwards,
    tds-zoom-in var(--tds-motion-duration-fast-02) var(--tds-motion-easing-scania) forwards;
  --tds-motion-zoom-exit: tds-fade-out var(--tds-motion-duration-fast-02)
    var(--tds-motion-easing-exit) forwards,
    tds-zoom-out var(--tds-motion-duration-fast-02) var(--tds-motion-easing-exit) forwards;
  --tds-motion-collapse-enter: tds-fade-in var(--tds-motion-duration-slow-02)
    var(--tds-motion-easing-linear) forwards,
    tds-collapse-in-hidden var(--tds-motion-duration-slow-02) var(--tds-motion-easing-scania)
    forwards;
  --tds-motion-collapse-exit: tds-fade-out var(--tds-motion-duration-slow-02)
    var(--tds-motion-easing-exit) forwards,
    tds-collapse-out var(--tds-motion-duration-slow-02) var(--tds-motion-easing-exit) forwards;
  --tds-motion-slide-enter: tds-fade-in var(--tds-motion-duration-slow-02)
    var(--tds-motion-easing-enter) forwards,
    tds-slide-bottom-short var(--tds-motion-duration-slow-02) var(--tds-motion-easing-enter)
    forwards;
  --tds-motion-slide-exit: tds-fade-out var(--tds-motion-duration-slow-02)
    var(--tds-motion-easing-exit) forwards,
    tds-slide-out-bottom-short var(--tds-motion-duration-slow-02) var(--tds-motion-easing-exit)
    forwards;
  --tds-motion-elevate-enter: tds-fade-in var(--tds-motion-duration-slow-02)
    var(--tds-motion-easing-enter) forwards,
    tds-slide-in-bottom-hidden var(--tds-motion-duration-slow-02) var(--tds-motion-easing-scania)
    forwards,
    tds-zoom-in var(--tds-motion-duration-slow-02) var(--tds-motion-easing-scania) forwards;
  --tds-motion-elevate-exit: tds-fade-out var(--tds-motion-duration-moderate-01)
    var(--tds-motion-easing-exit) forwards,
    tds-zoom-out var(--tds-motion-duration-slow-02) var(--tds-motion-easing-scania) forwards;
}

/* =======================================================================
   Motion keyframes
 ========================================================================== */
/* ### Fade ### */
@keyframes tds-fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    visibility: visible;
  }
}
@keyframes tds-fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}
/* Scale */
@keyframes tds-zoom-in {
  0% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes tds-zoom-out {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.9);
  }
}
/* Slide */
@keyframes tds-slide-in-top {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes tds-slide-in-bottom {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes tds-slide-in-left {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes tds-slide-in-right {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes tds-slide-out-top {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}
@keyframes tds-slide-out-bottom {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(100%);
  }
}
@keyframes tds-slide-out-bottom-hidden {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(100%);
  }
}
@keyframes tds-slide-out-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes tds-slide-out-right {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}
/* Slide short */
@keyframes tds-slide-top-short {
  0% {
    transform: translateY(-16px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes tds-slide-bottom-short {
  0% {
    transform: translateY(16px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes tds-slide-left-short {
  0% {
    transform: translateX(-16px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes tds-slide-right-short {
  0% {
    transform: translateX(16px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes tds-slide-out-top-short {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-16px);
  }
}
@keyframes tds-slide-out-bottom-short {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(16px);
  }
}
@keyframes tds-slide-out-left-short {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-16px);
  }
}
@keyframes tds-slide-out-right-short {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(16px);
  }
}
/* Rotate */
@keyframes tds-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}
@keyframes tds-rotate-back {
  0% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
/* Shake */
@keyframes tds-shake {
  0%, 100% {
    transform: translateX(0);
  }
  10% {
    transform: translateX(-9px);
  }
  20% {
    transform: translateX(8px);
  }
  30% {
    transform: translateX(-7px);
  }
  40% {
    transform: translateX(6px);
  }
  50% {
    transform: translateX(-5px);
  }
  60% {
    transform: translateX(4px);
  }
  70% {
    transform: translateX(-3px);
  }
  80% {
    transform: translateX(2px);
  }
  90% {
    transform: translateX(-1px);
  }
}
/* ### Blink ### */
@keyframes tds-blink {
  0%, to {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
}
/* ### Pulse ### */
@keyframes tds-pulse {
  50% {
    scale: 0.9;
  }
}
/*
* heart pulse animation
*/
@keyframes tds-pulse-2 {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(0.9);
  }
  35% {
    transform: scale(1);
  }
  45% {
    transform: scale(0.9);
  }
  55% {
    transform: scale(1);
  }
}
/* ### Stroke ### */
@keyframes tds-stroke {
  0% {
    stroke-dashoffset: 2%;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
/* ### Collapse ### */
@keyframes tds-collapse-in {
  from {
    transform-origin: top;
    transform: scaleY(0);
  }
  to {
    transform-origin: top;
    transform: scaleY(1);
  }
}
@keyframes tds-collapse-in-hidden {
  from {
    transform-origin: top;
    transform: scaleY(0);
  }
  to {
    transform-origin: top;
    transform: scaleY(1);
  }
}
@keyframes tds-collapse-out {
  0% {
    transform: scaleY(1);
    transform-origin: top;
  }
  100% {
    transform: scaleY(0);
    transform-origin: top;
  }
}
@keyframes tds-collapse-width-in {
  0% {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
@keyframes tds-collapse-width-out {
  0% {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}
@supports not (((height: 1lh) and (animation-timeline: none)) or ((height: 1lh) and (margin-trim: none))) {
  * {
    --collapse-size: unset;
    --collapse-width-size: unset;
  }
}
@property --collapse-size {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0px;
}
@property --collapse-width-size {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0px;
}
@keyframes collapse-in {
  0% {
    height: var(--collapse-size, 0);
    overflow: hidden;
  }
  to {
    height: var(--ui-transition-height);
    overflow: hidden;
  }
}
@keyframes collapse-out {
  0% {
    height: var(--ui-transition-height);
    overflow: hidden;
  }
  to {
    height: var(--collapse-size, 0);
    overflow: hidden;
  }
}
@keyframes collapse-width-in {
  0% {
    width: var(--collapse-width-size, 0);
    overflow: hidden;
  }
  to {
    width: var(--ui-transition-width);
    overflow: hidden;
  }
}
@keyframes collapse-width-out {
  0% {
    width: var(--ui-transition-width);
    overflow: hidden;
  }
  to {
    width: var(--collapse-width-size, 0);
    overflow: hidden;
  }
}
@keyframes animate-svg-stroke-1 {
  0% {
    stroke-dasharray: 2230px;
    stroke-dashoffset: 2230px;
  }
  1% {
    stroke-dashoffset: 2230px;
  }
  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 2230px;
  }
}
:root,
html {
  --tds-black-100: rgb(0, 0, 0);
  --tds-black-87: rgba(0, 0, 0, 0.87);
  --tds-black-48: rgba(0, 0, 0, 0.48);
  --tds-black-38: rgba(0, 0, 0, 0.38);
  --tds-white-100: rgb(255, 255, 255);
  --tds-white-87: rgba(255, 255, 255, 0.87);
  --tds-white-48: rgba(255, 255, 255, 0.48);
  --tds-white-38: rgba(255, 255, 255, 0.38);
  --tds-white-05: rgba(255, 255, 255, 0.05);
  --tds-grey-1000: #000000;
  --tds-grey-958: #0b0c0f;
  --tds-grey-950: #0b0c0f;
  --tds-grey-900: #15181d;
  --tds-grey-868: #242a33;
  --tds-grey-850: #1c222b;
  --tds-grey-846: #2b323d;
  --tds-grey-800: #242c37;
  --tds-grey-750: #2d3643;
  --tds-grey-700: #3a4554;
  --tds-grey-650: #475467;
  --tds-grey-600: #4e5e75;
  --tds-grey-500: #5f728c;
  --tds-grey-400: #6e829f;
  --tds-grey-350: #7e90a9;
  --tds-grey-300: #93a2b7;
  --tds-grey-250: #b4becd;
  --tds-grey-200: #d1d7e0;
  --tds-grey-150: #e0e5eb;
  --tds-grey-100: #edeff3;
  --tds-grey-50: #f6f7f9;
  --tds-grey-00: #ffffff;
  --tds-blue-900: #001533;
  --tds-blue-800: #041e42;
  --tds-blue-700: #0f3263;
  --tds-blue-600: #16417f;
  --tds-blue-500: #2058a8;
  --tds-blue-400: #2a6ecf;
  --tds-blue-300: #4a89f3;
  --tds-blue-200: #87afe8;
  --tds-blue-100: #bacde8;
  --tds-blue-50: #d8dde5;
  --tds-red-900: #350004;
  --tds-red-800: #480008;
  --tds-red-700: #6c0011;
  --tds-red-600: #8a0012;
  --tds-red-500: #b20018;
  --tds-red-400: #d1001b;
  --tds-red-300: #ea4851;
  --tds-red-200: #fc8a88;
  --tds-red-100: #ffb9b8;
  --tds-red-50: #ffdfe3;
  --tds-green-900: #001a12;
  --tds-green-800: #00251b;
  --tds-green-700: #0a382e;
  --tds-green-600: #004c3b;
  --tds-green-500: #00664f;
  --tds-green-400: #008064;
  --tds-green-300: #009e7e;
  --tds-green-200: #65bda5;
  --tds-green-100: #9bd9c2;
  --tds-green-50: #d3eee7;
  --tds-yellow-900: #361b07;
  --tds-yellow-800: #4d260a;
  --tds-yellow-700: #6b3b10;
  --tds-yellow-600: #975717;
  --tds-yellow-500: #b87c14;
  --tds-yellow-400: #eaad06;
  --tds-yellow-300: #f1c21b;
  --tds-yellow-200: #f4d65d;
  --tds-yellow-100: #f8e596;
  --tds-yellow-50: #f9eec3;
  --tds-cta: #0f3263;
  --tds-negative: #ff2340;
  --tds-warning: #f1c21b;
  --tds-positive: #1dab8b;
  --tds-information: #2a6ecf;
  --tds-black: #000;
  --tds-white: #fff;
  --tds-blue: #041e42;
  --tds-red: #8a0012;
}

.tds-background-black-100 {
  background-color: rgb(0, 0, 0);
}

.tds-background-black-87 {
  background-color: rgba(0, 0, 0, 0.87);
}

.tds-background-black-48 {
  background-color: rgba(0, 0, 0, 0.48);
}

.tds-background-black-38 {
  background-color: rgba(0, 0, 0, 0.38);
}

.tds-background-white-100 {
  background-color: rgb(255, 255, 255);
}

.tds-background-white-87 {
  background-color: rgba(255, 255, 255, 0.87);
}

.tds-background-white-48 {
  background-color: rgba(255, 255, 255, 0.48);
}

.tds-background-white-38 {
  background-color: rgba(255, 255, 255, 0.38);
}

.tds-background-white-05 {
  background-color: rgba(255, 255, 255, 0.05);
}

.tds-background-grey-1000 {
  background-color: #000000;
}

.tds-background-grey-958 {
  background-color: #0b0c0f;
}

.tds-background-grey-950 {
  background-color: #0b0c0f;
}

.tds-background-grey-900 {
  background-color: #15181d;
}

.tds-background-grey-868 {
  background-color: #242a33;
}

.tds-background-grey-850 {
  background-color: #1c222b;
}

.tds-background-grey-846 {
  background-color: #2b323d;
}

.tds-background-grey-800 {
  background-color: #242c37;
}

.tds-background-grey-750 {
  background-color: #2d3643;
}

.tds-background-grey-700 {
  background-color: #3a4554;
}

.tds-background-grey-650 {
  background-color: #475467;
}

.tds-background-grey-600 {
  background-color: #4e5e75;
}

.tds-background-grey-500 {
  background-color: #5f728c;
}

.tds-background-grey-400 {
  background-color: #6e829f;
}

.tds-background-grey-350 {
  background-color: #7e90a9;
}

.tds-background-grey-300 {
  background-color: #93a2b7;
}

.tds-background-grey-250 {
  background-color: #b4becd;
}

.tds-background-grey-200 {
  background-color: #d1d7e0;
}

.tds-background-grey-150 {
  background-color: #e0e5eb;
}

.tds-background-grey-100 {
  background-color: #edeff3;
}

.tds-background-grey-50 {
  background-color: #f6f7f9;
}

.tds-background-grey-00 {
  background-color: #ffffff;
}

.tds-background-blue-900 {
  background-color: #001533;
}

.tds-background-blue-800 {
  background-color: #041e42;
}

.tds-background-blue-700 {
  background-color: #0f3263;
}

.tds-background-blue-600 {
  background-color: #16417f;
}

.tds-background-blue-500 {
  background-color: #2058a8;
}

.tds-background-blue-400 {
  background-color: #2a6ecf;
}

.tds-background-blue-300 {
  background-color: #4a89f3;
}

.tds-background-blue-200 {
  background-color: #87afe8;
}

.tds-background-blue-100 {
  background-color: #bacde8;
}

.tds-background-blue-50 {
  background-color: #d8dde5;
}

.tds-background-red-900 {
  background-color: #350004;
}

.tds-background-red-800 {
  background-color: #480008;
}

.tds-background-red-700 {
  background-color: #6c0011;
}

.tds-background-red-600 {
  background-color: #8a0012;
}

.tds-background-red-500 {
  background-color: #b20018;
}

.tds-background-red-400 {
  background-color: #d1001b;
}

.tds-background-red-300 {
  background-color: #ea4851;
}

.tds-background-red-200 {
  background-color: #fc8a88;
}

.tds-background-red-100 {
  background-color: #ffb9b8;
}

.tds-background-red-50 {
  background-color: #ffdfe3;
}

.tds-background-green-900 {
  background-color: #001a12;
}

.tds-background-green-800 {
  background-color: #00251b;
}

.tds-background-green-700 {
  background-color: #0a382e;
}

.tds-background-green-600 {
  background-color: #004c3b;
}

.tds-background-green-500 {
  background-color: #00664f;
}

.tds-background-green-400 {
  background-color: #008064;
}

.tds-background-green-300 {
  background-color: #009e7e;
}

.tds-background-green-200 {
  background-color: #65bda5;
}

.tds-background-green-100 {
  background-color: #9bd9c2;
}

.tds-background-green-50 {
  background-color: #d3eee7;
}

.tds-background-yellow-900 {
  background-color: #361b07;
}

.tds-background-yellow-800 {
  background-color: #4d260a;
}

.tds-background-yellow-700 {
  background-color: #6b3b10;
}

.tds-background-yellow-600 {
  background-color: #975717;
}

.tds-background-yellow-500 {
  background-color: #b87c14;
}

.tds-background-yellow-400 {
  background-color: #eaad06;
}

.tds-background-yellow-300 {
  background-color: #f1c21b;
}

.tds-background-yellow-200 {
  background-color: #f4d65d;
}

.tds-background-yellow-100 {
  background-color: #f8e596;
}

.tds-background-yellow-50 {
  background-color: #f9eec3;
}

.tds-background-cta {
  background-color: #0f3263;
}

.tds-background-negative {
  background-color: #ff2340;
}

.tds-background-warning {
  background-color: #f1c21b;
}

.tds-background-positive {
  background-color: #1dab8b;
}

.tds-background-information {
  background-color: #2a6ecf;
}

.tds-background-black {
  background-color: #000;
}

.tds-background-white {
  background-color: #fff;
}

.tds-background-blue {
  background-color: #041e42;
}

.tds-background-red {
  background-color: #8a0012;
}

.tds-text-black-100 {
  color: rgb(0, 0, 0);
}

.tds-text-black-87 {
  color: rgba(0, 0, 0, 0.87);
}

.tds-text-black-48 {
  color: rgba(0, 0, 0, 0.48);
}

.tds-text-black-38 {
  color: rgba(0, 0, 0, 0.38);
}

.tds-text-white-100 {
  color: rgb(255, 255, 255);
}

.tds-text-white-87 {
  color: rgba(255, 255, 255, 0.87);
}

.tds-text-white-48 {
  color: rgba(255, 255, 255, 0.48);
}

.tds-text-white-38 {
  color: rgba(255, 255, 255, 0.38);
}

.tds-text-white-05 {
  color: rgba(255, 255, 255, 0.05);
}

.tds-text-grey-1000 {
  color: #000000;
}

.tds-text-grey-958 {
  color: #0b0c0f;
}

.tds-text-grey-950 {
  color: #0b0c0f;
}

.tds-text-grey-900 {
  color: #15181d;
}

.tds-text-grey-868 {
  color: #242a33;
}

.tds-text-grey-850 {
  color: #1c222b;
}

.tds-text-grey-846 {
  color: #2b323d;
}

.tds-text-grey-800 {
  color: #242c37;
}

.tds-text-grey-750 {
  color: #2d3643;
}

.tds-text-grey-700 {
  color: #3a4554;
}

.tds-text-grey-650 {
  color: #475467;
}

.tds-text-grey-600 {
  color: #4e5e75;
}

.tds-text-grey-500 {
  color: #5f728c;
}

.tds-text-grey-400 {
  color: #6e829f;
}

.tds-text-grey-350 {
  color: #7e90a9;
}

.tds-text-grey-300 {
  color: #93a2b7;
}

.tds-text-grey-250 {
  color: #b4becd;
}

.tds-text-grey-200 {
  color: #d1d7e0;
}

.tds-text-grey-150 {
  color: #e0e5eb;
}

.tds-text-grey-100 {
  color: #edeff3;
}

.tds-text-grey-50 {
  color: #f6f7f9;
}

.tds-text-grey-00 {
  color: #ffffff;
}

.tds-text-blue-900 {
  color: #001533;
}

.tds-text-blue-800 {
  color: #041e42;
}

.tds-text-blue-700 {
  color: #0f3263;
}

.tds-text-blue-600 {
  color: #16417f;
}

.tds-text-blue-500 {
  color: #2058a8;
}

.tds-text-blue-400 {
  color: #2a6ecf;
}

.tds-text-blue-300 {
  color: #4a89f3;
}

.tds-text-blue-200 {
  color: #87afe8;
}

.tds-text-blue-100 {
  color: #bacde8;
}

.tds-text-blue-50 {
  color: #d8dde5;
}

.tds-text-red-900 {
  color: #350004;
}

.tds-text-red-800 {
  color: #480008;
}

.tds-text-red-700 {
  color: #6c0011;
}

.tds-text-red-600 {
  color: #8a0012;
}

.tds-text-red-500 {
  color: #b20018;
}

.tds-text-red-400 {
  color: #d1001b;
}

.tds-text-red-300 {
  color: #ea4851;
}

.tds-text-red-200 {
  color: #fc8a88;
}

.tds-text-red-100 {
  color: #ffb9b8;
}

.tds-text-red-50 {
  color: #ffdfe3;
}

.tds-text-green-900 {
  color: #001a12;
}

.tds-text-green-800 {
  color: #00251b;
}

.tds-text-green-700 {
  color: #0a382e;
}

.tds-text-green-600 {
  color: #004c3b;
}

.tds-text-green-500 {
  color: #00664f;
}

.tds-text-green-400 {
  color: #008064;
}

.tds-text-green-300 {
  color: #009e7e;
}

.tds-text-green-200 {
  color: #65bda5;
}

.tds-text-green-100 {
  color: #9bd9c2;
}

.tds-text-green-50 {
  color: #d3eee7;
}

.tds-text-yellow-900 {
  color: #361b07;
}

.tds-text-yellow-800 {
  color: #4d260a;
}

.tds-text-yellow-700 {
  color: #6b3b10;
}

.tds-text-yellow-600 {
  color: #975717;
}

.tds-text-yellow-500 {
  color: #b87c14;
}

.tds-text-yellow-400 {
  color: #eaad06;
}

.tds-text-yellow-300 {
  color: #f1c21b;
}

.tds-text-yellow-200 {
  color: #f4d65d;
}

.tds-text-yellow-100 {
  color: #f8e596;
}

.tds-text-yellow-50 {
  color: #f9eec3;
}

.tds-text-cta {
  color: #0f3263;
}

.tds-text-negative {
  color: #ff2340;
}

.tds-text-warning {
  color: #f1c21b;
}

.tds-text-positive {
  color: #1dab8b;
}

.tds-text-information {
  color: #2a6ecf;
}

.tds-text-black {
  color: #000;
}

.tds-text-white {
  color: #fff;
}

.tds-text-blue {
  color: #041e42;
}

.tds-text-red {
  color: #8a0012;
}

/** The breakpoint at which the layout changes from fixed size to full-width. */
/**
 * Do not edit directly, this file was auto-generated.
 */
:root,
.tds-mode-light,
.scania .tds-mode-light,
.scania.tds-mode-light,
.scania .tl-mode-light,
.scania.tl-mode-light {
  --component-scrollbar-background-thumb-default: var(--color-border-subtle);
  --component-scrollbar-background-thumb-hover: var(--color-border-soft);
  --component-scrollbar-background-track-default: var(--scania-color-transparent-invisible-light);
  --component-scrollbar-border-radius-default: var(--scania-unit-8);
  --component-scrollbar-size-thumb-default: var(--scania-unit-4);
  --component-scrollbar-size-thumb-hover: 6;
}

.traton .tds-mode-light,
.traton.tds-mode-light,
.traton .tl-mode-light,
.traton.tl-mode-light {
  --component-scrollbar-background-thumb-default: var(--color-border-subtle);
  --component-scrollbar-background-thumb-hover: var(--color-border-soft);
  --component-scrollbar-background-track-default: var(--traton-color-transparent-invisible-light);
  --component-scrollbar-border-radius-default: var(--traton-unit-8);
  --component-scrollbar-size-thumb-default: var(--traton-unit-4);
  --component-scrollbar-size-thumb-hover: 6;
}

.tds-mode-dark,
.scania .tds-mode-dark,
.scania.tds-mode-dark,
.scania .tl-mode-dark,
.scania.tl-mode-dark {
  --component-scrollbar-background-thumb-default: var(--color-border-subtle);
  --component-scrollbar-background-thumb-hover: var(--color-border-soft);
  --component-scrollbar-background-track-default: var(--scania-color-transparent-invisible-dark);
  --component-scrollbar-border-radius-default: var(--scania-unit-8);
  --component-scrollbar-size-thumb-default: var(--scania-unit-4);
  --component-scrollbar-size-thumb-hover: 6;
}

.traton .tds-mode-dark,
.traton.tds-mode-dark,
.traton .tl-mode-dark,
.traton.tl-mode-dark {
  --component-scrollbar-background-thumb-default: var(--color-border-subtle);
  --component-scrollbar-background-thumb-hover: var(--color-border-soft);
  --component-scrollbar-background-track-default: var(--traton-color-transparent-invisible-dark);
  --component-scrollbar-border-radius-default: var(--traton-unit-8);
  --component-scrollbar-size-thumb-default: var(--traton-unit-4);
  --component-scrollbar-size-thumb-hover: 6;
}

:root,
.tl-mode-light,
.tds-mode-light {
  --tl-scrollbar-track-color: transparent;
  --tl-scrollbar-thumb-color: var(--component-scrollbar-background-thumb-default);
  --tl-scrollbar-thumb-border-radius: calc(var(--component-scrollbar-width-radius-default) * 1px);
  --tl-scrollbar-hover-thumb-border-radius: calc(
    var(--component-scrollbar-width-radius-hover) * 1px
  );
}

.tl-mode-dark,
.tds-mode-dark {
  --tl-scrollbar-thumb-color: var(--component-scrollbar-background-thumb-default);
  --tl-scrollbar-thumb-border-radius: calc(var(--component-scrollbar-width-radius-default) * 1px);
  --tl-scrollbar-hover-thumb-border-radius: calc(
    var(--component-scrollbar-width-radius-hover) * 1px
  );
}

/**
 * Do not edit directly, this file was auto-generated.
 */
:root,
.tds-mode-light,
.scania .tds-mode-light,
.scania.tds-mode-light,
.scania .tl-mode-light,
.scania.tl-mode-light {
  --component--focus-ring-radius-none: var(--scania-unit-0);
  --component--focus-ring-radius-extra-small: 1;
  --component--focus-ring-radius-small: 2;
  --component--focus-ring-radius-medium: 3;
  --component--focus-ring-radius-large: 4;
  --component--focus-ring-radius-extra-large: 5;
  --component--focus-ring-radius-full: var(--scania-unit-9999);
  --component--focus-ring-color-strong: var(--color-system-info-default);
  --component--focus-ring-color-discrete: var(--scania-color-base-white);
}

.traton .tds-mode-light,
.traton.tds-mode-light,
.traton .tl-mode-light,
.traton.tl-mode-light {
  --component--focus-ring-radius-none: var(--traton-unit-0);
  --component--focus-ring-radius-extra-small: 1;
  --component--focus-ring-radius-small: 2;
  --component--focus-ring-radius-medium: 3;
  --component--focus-ring-radius-large: 4;
  --component--focus-ring-radius-extra-large: 5;
  --component--focus-ring-radius-full: var(--traton-unit-9999);
  --component--focus-ring-color-strong: var(--color-system-info-default);
  --component--focus-ring-color-discrete: var(--traton-color-base-white);
}

.tds-mode-dark,
.scania .tds-mode-dark,
.scania.tds-mode-dark,
.scania .tl-mode-dark,
.scania.tl-mode-dark {
  --component--focus-ring-radius-none: var(--scania-unit-0);
  --component--focus-ring-radius-extra-small: 1;
  --component--focus-ring-radius-small: 2;
  --component--focus-ring-radius-medium: 3;
  --component--focus-ring-radius-large: 4;
  --component--focus-ring-radius-extra-large: 5;
  --component--focus-ring-radius-full: var(--scania-unit-9999);
  --component--focus-ring-color-strong: var(--color-system-info-default);
  --component--focus-ring-color-discrete: var(--scania-color-base-white);
}

.traton .tds-mode-dark,
.traton.tds-mode-dark,
.traton .tl-mode-dark,
.traton.tl-mode-dark {
  --component--focus-ring-radius-none: var(--traton-unit-0);
  --component--focus-ring-radius-extra-small: 1;
  --component--focus-ring-radius-small: 2;
  --component--focus-ring-radius-medium: 3;
  --component--focus-ring-radius-large: 4;
  --component--focus-ring-radius-extra-large: 5;
  --component--focus-ring-radius-full: var(--traton-unit-9999);
  --component--focus-ring-color-strong: var(--color-system-info-default);
  --component--focus-ring-color-discrete: var(--traton-color-base-white);
}

body {
  font-family: var(--body-01-font-family);
  font-size: 14px;
  margin: 0;
  flex: 1;
}

h1 {
  font-family: var(--headline-01-font-family);
}

h2 {
  font-family: var(--headline-02-font-family);
}

h3 {
  font-family: var(--headline-03-font-family);
}

h4 {
  font-family: var(--headline-04-font-family);
}

h5 {
  font-family: var(--headline-05-font-family);
}

h6 {
  font-family: var(--headline-06-font-family);
}

:root,
.tl-mode-light {
  color: var(--color-foreground-text-strong);
  background-color: var(--color-background-base);
}
:root.tl-mode-variant-primary, :root .tl-mode-variant-primary,
.tl-mode-light.tl-mode-variant-primary,
.tl-mode-light .tl-mode-variant-primary {
  color: var(--color-foreground-text-strong);
  background-color: var(--color-background-base);
}
:root.tl-mode-variant-secondary, :root .tl-mode-variant-secondary,
.tl-mode-light.tl-mode-variant-secondary,
.tl-mode-light .tl-mode-variant-secondary {
  color: var(--color-foreground-text-strong);
  background-color: var(--color-background-layer-01);
}

.tl-mode-dark {
  color: var(--color-foreground-text-strong);
  background-color: var(--color-background-base);
}
.tl-mode-dark.tl-mode-variant-primary, .tl-mode-dark .tl-mode-variant-primary {
  color: var(--color-foreground-text-strong);
  background-color: var(--color-background-base);
}
.tl-mode-dark.tl-mode-variant-secondary, .tl-mode-dark .tl-mode-variant-secondary {
  color: var(--color-foreground-text-strong);
  background-color: var(--color-background-layer-01);
}