@charset "UTF-8";
/*

This file is the main file for SDDS-theme component
it contains all imports
*/
/*
Import foundation into theme components
*/
@import url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/scania-sans.css");

:root,
html {
  --sdds-background-image-scania-wordmark-png: url(https://cdn.digitaldesign.scania.com/logotype/1.0.0/scania_wordmark/scania-wordmark.png);
  --sdds-background-image-scania-wordmark-svg: url(https://cdn.digitaldesign.scania.com/logotype/1.0.0/scania_wordmark/scania-wordmark.svg);
  --sdds-background-image-scania-wordmark-white-png: url(https://cdn.digitaldesign.scania.com/logotype/1.0.0/scania_wordmark-white/scania-wordmark-white.png);
  --sdds-background-image-scania-wordmark-white-svg: url(https://cdn.digitaldesign.scania.com/logotype/1.0.0/scania_wordmark-white/scania-wordmark-white.svg);
  --sdds-background-image-scania-symbol-png: url(https://cdn.digitaldesign.scania.com/logotype/1.0.0/scania_symbol/scania-symbol.png);
  --sdds-background-image-scania-symbol-svg: url(https://cdn.digitaldesign.scania.com/logotype/1.0.0/scania_symbol/scania-symbol.svg);
  --sdds-background-image-scania-logotype-png: url(https://cdn.digitaldesign.scania.com/logotype/1.0.0/scania_logotype/scania-logotype.png);
  --sdds-background-image-scania-logotype-svg: url(https://cdn.digitaldesign.scania.com/logotype/1.0.0/scania_logotype/scania-logotype.svg);
}

:root,
html {
  --sdds-font-size-base: 14px;
  --sdds-font-weight-normal: 400;
  --sdds-font-weight-base: var(--font-weight-normal);
  --sdds-line-height-base: 1.5;
  --sdds-font-family-sans-serif: 'Scania Sans Semi Condensed', 'Scania Sans Condensed', arial, helvetica,
    sans-serif;
  --sdds-font-family-sans: 'Scania Sans', arial, helvetica, sans-serif;
  --sdds-font-family-monospace: var(--font-family-sans-serif);
  --sdds-font-family-base: var(--font-family-sans-serif);
  --sdds-headings-font-family: 'Scania Sans Semi Condensed', arial, helvetica, sans-serif;
  --sdds-font-family-regular: 'Scania Sans', arial, helvetica, sans-serif;
  --sdds-font-family-semi-condensed: 'Scania Sans Semi Condensed', 'Scania Sans Condensed', arial, helvetica,
    sans-serif;
  --sdds-font-family-headline: 'Scania Sans Headline', arial, helvetica, sans-serif;
  --sdds-font-family-bold: 'Scania Sans', arial, helvetica, sans-serif;
  --sdds-font-family-semi-condensed-bold: 'Scania Sans Semi Condensed', arial, helvetica, sans-serif;
  --sdds-font-family-headline-bold: 'Scania Sans Headline', arial, helvetica, sans-serif;
}

/*
  Contains spacing variables for the layout
*/
.sdds-headline-01 {
  font-family: "Scania Sans Headline", arial, helvetica, sans-serif;
  font-weight: bold;
  font-size: 40px;
  line-height: 40px;
  letter-spacing: 0;
}

.sdds-headline-02 {
  font-family: "Scania Sans", arial, helvetica, sans-serif;
  font-weight: bold;
  font-size: 32px;
  line-height: 32px;
  letter-spacing: -0.04em;
}

.sdds-headline-03 {
  font-family: "Scania Sans", arial, helvetica, sans-serif;
  font-weight: bold;
  font-size: 24px;
  line-height: 24px;
  letter-spacing: -0.03em;
}

.sdds-headline-04 {
  font-family: "Scania Sans", arial, helvetica, sans-serif;
  font-weight: bold;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: -0.01em;
}

.sdds-headline-05 {
  font-family: "Scania Sans", arial, helvetica, sans-serif;
  font-weight: bold;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.02em;
}

.sdds-headline-06 {
  font-family: "Scania Sans", arial, helvetica, sans-serif;
  font-weight: bold;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.02em;
}

.sdds-headline-07 {
  font-family: "Scania Sans Semi Condensed", arial, helvetica, sans-serif;
  font-weight: bold;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.01em;
}

.sdds-paragraph-01 {
  font-family: "Scania Sans", arial, helvetica, sans-serif;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: -0.03em;
}

.sdds-paragraph-02 {
  font-family: "Scania Sans", arial, helvetica, sans-serif;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: -0.01em;
}

.sdds-body-01 {
  font-family: "Scania Sans", arial, helvetica, sans-serif;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.02em;
}

.sdds-body-02 {
  font-family: "Scania Sans", arial, helvetica, sans-serif;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.01em;
}

.sdds-detail-01 {
  font-family: "Scania Sans Semi Condensed", "Scania Sans Condensed", arial, helvetica, sans-serif;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.01em;
}

.sdds-detail-02 {
  font-family: "Scania Sans Semi Condensed", "Scania Sans Condensed", arial, helvetica, sans-serif;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.01em;
}

.sdds-detail-03 {
  font-family: "Scania Sans Semi Condensed", "Scania Sans Condensed", arial, helvetica, sans-serif;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.01em;
}

.sdds-detail-04 {
  font-family: "Scania Sans", arial, helvetica, sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.08em;
}

.sdds-detail-05 {
  font-family: "Scania Sans Semi Condensed", "Scania Sans Condensed", arial, helvetica, sans-serif;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0;
}

.sdds-detail-06 {
  font-family: "Scania Sans", arial, helvetica, sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 10px;
  line-height: 16px;
  letter-spacing: 0.08em;
}

.sdds-detail-07 {
  font-family: "Scania Sans Semi Condensed", "Scania Sans Condensed", arial, helvetica, sans-serif;
  font-size: 10px;
  line-height: 2rem;
  letter-spacing: 0;
}

.sdds-expressive-headline-01 {
  font-family: "Scania Sans Headline", arial, helvetica, sans-serif;
  font-weight: bold;
  font-size: 80px;
  line-height: 80px;
  letter-spacing: 0;
}

.sdds-expressive-headline-02 {
  font-family: "Scania Sans Headline", arial, helvetica, sans-serif;
  font-weight: bold;
  font-size: 56px;
  line-height: 56px;
  letter-spacing: 0;
}

h1 {
  font-family: "Scania Sans Headline", arial, helvetica, sans-serif;
  font-weight: bold;
  font-size: 40px;
  line-height: 40px;
  letter-spacing: 0;
}

h2 {
  font-family: "Scania Sans", arial, helvetica, sans-serif;
  font-weight: bold;
  font-size: 32px;
  line-height: 32px;
  letter-spacing: -0.04em;
}

h3 {
  font-family: "Scania Sans", arial, helvetica, sans-serif;
  font-weight: bold;
  font-size: 24px;
  line-height: 24px;
  letter-spacing: -0.03em;
}

h4 {
  font-family: "Scania Sans", arial, helvetica, sans-serif;
  font-weight: bold;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: -0.01em;
}

h5 {
  font-family: "Scania Sans", arial, helvetica, sans-serif;
  font-weight: bold;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.02em;
}

h6 {
  font-family: "Scania Sans", arial, helvetica, sans-serif;
  font-weight: bold;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.02em;
}

.h7 {
  font-family: "Scania Sans Semi Condensed", arial, helvetica, sans-serif;
  font-weight: bold;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.01em;
}

:root,
html {
  --sdds-spacing-layout-8: 8px;
  --sdds-spacing-layout-16: 16px;
  --sdds-spacing-layout-24: 24px;
  --sdds-spacing-layout-32: 32px;
  --sdds-spacing-layout-48: 48px;
  --sdds-spacing-layout-64: 64px;
  --sdds-spacing-layout-72: 72px;
  --sdds-spacing-layout-96: 96px;
  --sdds-spacing-layout-128: 128px;
  --sdds-spacing-layout-160: 160px;
  --sdds-spacing-element-2: 2px;
  --sdds-spacing-element-4: 4px;
  --sdds-spacing-element-8: 8px;
  --sdds-spacing-element-12: 12px;
  --sdds-spacing-element-16: 16px;
  --sdds-spacing-element-20: 20px;
  --sdds-spacing-element-24: 24px;
  --sdds-spacing-element-32: 32px;
  --sdds-spacing-element-40: 40px;
  --sdds-spacing-element-48: 48px;
  --sdds-screen-s: 320px;
  --sdds-screen-md: 672px;
  --sdds-screen-l: 1056px;
  --sdds-screen-xl: 1312px;
  --sdds-screen-xxl: 1584px;
  --sdds-grid-xs: 0;
  --sdds-grid-sm: 608px;
  --sdds-grid-md: 800px;
  --sdds-grid-lg: 992px;
  --sdds-grid-xlg: 1184px;
  --sdds-grid-xxlg: 1376px;
  --sdds-grid-max: 1584px;
}

:root,
html {
  --sdds-grey-958: #0d0f13;
  --sdds-grey-900: #1d2229;
  --sdds-grey-868: #242a33;
  --sdds-grey-846: #2b323d;
  --sdds-grey-800: #37414f;
  --sdds-grey-700: #56657a;
  --sdds-grey-600: #868fa2;
  --sdds-grey-500: #b0b7c4;
  --sdds-grey-400: #cdd1db;
  --sdds-grey-300: #dbdfe6;
  --sdds-grey-200: #e7e9ee;
  --sdds-grey-100: #edeff3;
  --sdds-grey-50: #f9fafb;
  --sdds-blue-900: #001533;
  --sdds-blue-800: #041e42;
  --sdds-blue-700: #0f3263;
  --sdds-blue-600: #16417f;
  --sdds-blue-500: #2058a8;
  --sdds-blue-400: #2b70d3;
  --sdds-blue-300: #4a89f3;
  --sdds-blue-200: #87afe8;
  --sdds-blue-100: #bacde8;
  --sdds-blue-50: #e4e9f1;
  --sdds-red-900: #450307;
  --sdds-red-800: #6a080f;
  --sdds-red-700: #950a16;
  --sdds-red-600: #d6001c;
  --sdds-red-500: #de2b36;
  --sdds-red-400: #f35359;
  --sdds-red-300: #f58e90;
  --sdds-red-200: #f8b6b7;
  --sdds-red-100: #fadbdc;
  --sdds-red-50: #fdf4f5;
  --sdds-green-900: #112616;
  --sdds-green-800: #1c3822;
  --sdds-green-700: #2c5234;
  --sdds-green-600: #386e44;
  --sdds-green-500: #438151;
  --sdds-green-400: #539e63;
  --sdds-green-300: #89b691;
  --sdds-green-200: #a6d1ad;
  --sdds-green-100: #caebd0;
  --sdds-green-50: #f1f8f2;
  --sdds-orange-900: #331103;
  --sdds-orange-800: #893b15;
  --sdds-orange-700: #c65416;
  --sdds-orange-600: #eb6200;
  --sdds-orange-500: #fa6e23;
  --sdds-orange-400: #f98a67;
  --sdds-orange-300: #f9a38d;
  --sdds-orange-200: #f9cac0;
  --sdds-orange-100: #fbe3df;
  --sdds-orange-50: #fdf5f3;
  --sdds-cta: #0f3263;
  --sdds-negative: #ff2340;
  --sdds-warning: #f1c21b;
  --sdds-positive: #1dab8b;
  --sdds-information: #2b70d3;
  --sdds-black: #000;
  --sdds-white: #fff;
  --sdds-blue: #041e42;
  --sdds-red: #d6001c;
}





:root,
html {
  font-size: 4px;
}

* {
  box-sizing: border-box;
}

html,
body {
  display: flex;
  flex-direction: column;
  visibility: visible;
}

html {
  height: 100%;
}

body {
  font-family: 'Scania Sans Semi Condensed', 'Scania Sans Condensed', Arial, Helvetica, sans-serif;
  font-size: 14px;
  margin: 0;
  flex: 1;
}

html,
.sdds-mode-light {
  color: var(--sdds-grey-958);
}

.sdds-mode-dark {
  color: var(--sdds-white);
}

:root {
  --sdds-divider-light: var(--sdds-grey-300);
  --sdds-divider-light-vertical: var(--sdds-grey-300);
  --sdds-divider-light-border-top: var(--sdds-grey-300);
  --sdds-divider-light-border-right: var(--sdds-grey-300);
  --sdds-divider-light-border-bottom: var(--sdds-grey-300);
  --sdds-divider-light-border-left: var(--sdds-grey-300);
  --sdds-divider-dark: var(--sdds-grey-868);
  --sdds-divider-dark-vertical: var(--sdds-grey-868);
  --sdds-divider-dark-border-top: var(--sdds-grey-868);
  --sdds-divider-dark-border-right: var(--sdds-grey-868);
  --sdds-divider-dark-border-bottom: var(--sdds-grey-868);
  --sdds-divider-dark-border-left: var(--sdds-grey-868);
  --sdds-divider-coloured: var(--sdds-blue-600);
  --sdds-divider-coloured-vertical: var(--sdds-blue-600);
  --sdds-divider-coloured-border-top: var(--sdds-blue-600);
  --sdds-divider-coloured-border-right: var(--sdds-blue-600);
  --sdds-divider-coloured-border-bottom: var(--sdds-blue-600);
  --sdds-divider-coloured-border-left: var(--sdds-blue-600);
}

.sdds-divider-light {
  background-color: var(--sdds-divider-light);
  height: 1px;
}

.sdds-divider-light-vertical {
  background-color: var(--sdds-divider-light-vertical);
  height: 100%;
  width: 1px;
}

.sdds-divider-light-border-top {
  border-top: 1px solid var(--sdds-divider-light-border-top);
}

.sdds-divider-light-border-right {
  border-right: 1px solid var(--sdds-divider-light-border-right);
}

.sdds-divider-light-border-bottom {
  border-bottom: 1px solid var(--sdds-divider-light-border-bottom);
}

.sdds-divider-light-border-left {
  border-left: 1px solid var(--sdds-divider-light-border-left);
}

.sdds-divider-dark {
  background-color: var(--sdds-divider-dark);
  height: 1px;
}

.sdds-divider-dark-vertical {
  background-color: var(--sdds-divider-dark-vertical);
  height: 100%;
  width: 1px;
}

.sdds-divider-dark-border-top {
  border-top: 1px solid var(--sdds-divider-dark-border-top);
}

.sdds-divider-dark-border-right {
  border-right: 1px solid var(--sdds-divider-dark-border-right);
}

.sdds-divider-dark-border-bottom {
  border-bottom: 1px solid var(--sdds-divider-dark-border-bottom);
}

.sdds-divider-dark-border-left {
  border-left: 1px solid var(--sdds-divider-dark-border-left);
}

.sdds-divider-coloured {
  background-color: var(--sdds-divider-coloured);
  height: 1px;
}

.sdds-divider-coloured-vertical {
  background-color: var(--sdds-divider-coloured-vertical);
  height: 100%;
  width: 1px;
}

.sdds-divider-coloured-border-top {
  border-top: 1px solid var(--sdds-divider-coloured-border-top);
}

.sdds-divider-coloured-border-right {
  border-right: 1px solid var(--sdds-divider-coloured-border-right);
}

.sdds-divider-coloured-border-bottom {
  border-bottom: 1px solid var(--sdds-divider-coloured-border-bottom);
}

.sdds-divider-coloured-border-left {
  border-left: 1px solid var(--sdds-divider-coloured-border-left);
}



:root,
html {
  --sdds-banner-bg-default: var(--sdds-grey-50);
  --sdds-banner-bg-info: var(--sdds-grey-300);
  --sdds-banner-bg-error: var(--sdds-red-100);
  --sdds-banner-prefix-default-color: var(--sdds-grey-700);
  --sdds-banner-prefix-info-color: var(--sdds-blue-400);
  --sdds-banner-prefix-error-color: var(--sdds-red-500);
}

.sdds-banner {
  background-color: var(--sdds-banner-bg-default);
  padding: var(--sdds-spacing-element-16);
  display: flex;
}

.sdds-banner.sdds-banner-info {
  background-color: var(--sdds-banner-bg-info);
}

.sdds-banner.sdds-banner-error {
  background-color: var(--sdds-banner-bg-error);
}

.sdds-banner-prefix {
  display: inline-flex;
  flex-basis: 16px;
  height: 16px;
  width: 100%;
  margin-right: var(--sdds-spacing-element-12);
  font-size: 4rem;
  color: var(--sdds-banner-prefix-default-color);
  margin-top: -2px;
  padding-left: 4px;
}

.sdds-banner-info .sdds-banner-prefix {
  color: var(--sdds-banner-prefix-info-color);
}

.sdds-banner-error .sdds-banner-prefix {
  color: var(--sdds-banner-prefix-error-color);
}

.sdds-banner-body {
  flex-grow: 1;
  padding-right: 24px;
}

.sdds-banner-close {
  flex-basis: 20px;
  height: 20px;
  width: 20px;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.40533 2.34321C3.11244 2.05031 2.63756 2.05031 2.34467 2.34321C2.05178 2.6361 2.05178 3.11097 2.34467 3.40387L6.94093 8.00012L2.34478 12.5963C2.05189 12.8892 2.05189 13.364 2.34478 13.6569C2.63768 13.9498 3.11255 13.9498 3.40544 13.6569L8.00159 9.06078L12.5977 13.6569C12.8906 13.9498 13.3655 13.9498 13.6584 13.6569C13.9513 13.364 13.9513 12.8891 13.6584 12.5963L9.06225 8.00012L13.6585 3.40388C13.9514 3.11098 13.9514 2.63611 13.6585 2.34322C13.3656 2.05032 12.8907 2.05032 12.5978 2.34322L8.00159 6.93946L3.40533 2.34321Z' fill='%23171719'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  margin-top: -2px;
  flex-shrink: 0;
}

.sdds-banner-header {
  margin: 0;
}

.sdds-banner-header+.sdds-banner-link,
.sdds-banner-header+.sdds-banner-subheader {
  margin-top: 4px;
}

.sdds-banner-subheader {
  font-family: "Scania Sans Semi Condensed", "Scania Sans Condensed", arial, helvetica, sans-serif;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.01em;
}

.sdds-banner-subheader+.sdds-banner-link {
  margin-top: var(--sdds-spacing-element-16);
}

.sdds-banner-link {
  display: block;
  font-family: "Scania Sans Semi Condensed", "Scania Sans Condensed", arial, helvetica, sans-serif;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.01em;
}

:root,
html {
  --sdds-btn-primary-background: var(--sdds-blue-600);
  --sdds-btn-primary-color: var(--sdds-white);
  --sdds-btn-primary-border-color: transparent;
  --sdds-btn-primary-background-hover: var(--sdds-blue-500);
  --sdds-btn-primary-color-hover: var(--sdds-white);
  --sdds-btn-primary-border-color-hover: transparent;
  --sdds-btn-primary-background-active: var(--sdds-blue-700);
  --sdds-btn-primary-color-active: var(--sdds-white);
  --sdds-btn-primary-border-color-active: transparent;
  --sdds-btn-primary-background-focus: var(--sdds-blue-400);
  --sdds-btn-primary-color-focus: var(--sdds-white);
  --sdds-btn-primary-border-color-focus: var(--sdds-blue-600);
  --sdds-btn-primary-outline-color-focus: var(--sdds-blue-600);
  --sdds-btn-primary-background-disabled: var(--sdds-white);
  --sdds-btn-primary-color-disabled: var(--sdds-grey-400);
  --sdds-btn-primary-border-color-disabled: transparent;
  --sdds-btn-secondary-background: transparent;
  --sdds-btn-secondary-color: var(--sdds-black);
  --sdds-btn-secondary-border-color: rgb(0 0 0 / 38%);
  --sdds-btn-secondary-background-hover: var(--sdds-blue-500);
  --sdds-btn-secondary-color-hover: var(--sdds-white);
  --sdds-btn-secondary-border-color-hover: var(--sdds-blue-500);
  --sdds-btn-secondary-background-active: transparent;
  --sdds-btn-secondary-color-active: var(--sdds-black);
  --sdds-btn-secondary-border-color-active: rgb(0 0 0 / 87%);
  --sdds-btn-secondary-background-focus: transparent;
  --sdds-btn-secondary-color-focus: var(--sdds-black);
  --sdds-btn-secondary-border-color-focus: var(--sdds-blue-300);
  --sdds-btn-secondary-outline-color-focus: var(--sdds-blue-300);
  --sdds-btn-secondary-background-disabled: transparent;
  --sdds-btn-secondary-color-disabled: rgb(0 0 0 / 38%);
  --sdds-btn-secondary-border-color-disabled: rgb(0 0 0 / 38%);
  --sdds-btn-ghost-background: transparent;
  --sdds-btn-ghost-color: var(--sdds-black);
  --sdds-btn-ghost-border-color: transparent;
  --sdds-btn-ghost-background-hover: transparent;
  --sdds-btn-ghost-color-hover: var(--sdds-black);
  --sdds-btn-ghost-border-color-hover: rgb(0 0 0 / 60%);
  --sdds-btn-ghost-background-active: transparent;
  --sdds-btn-ghost-color-active: var(--sdds-black);
  --sdds-btn-ghost-border-color-active: rgb(0 0 0 / 87%);
  --sdds-btn-ghost-background-focus: transparent;
  --sdds-btn-ghost-color-focus: var(--sdds-black);
  --sdds-btn-ghost-border-color-focus: var(--sdds-blue-300);
  --sdds-btn-ghost-outline-color-focus: var(--sdds-blue-300);
  --sdds-btn-ghost-background-disabled: transparent;
  --sdds-btn-ghost-color-disabled: rgb(0 0 0 / 38%);
  --sdds-btn-ghost-border-color-disabled: transparent;
  --sdds-btn-danger-background: var(--sdds-red-600);
  --sdds-btn-danger-color: var(--sdds-white);
  --sdds-btn-danger-border-color: transparent;
  --sdds-btn-danger-background-hover: var(--sdds-red-500);
  --sdds-btn-danger-color-hover: var(--sdds-white);
  --sdds-btn-danger-border-color-hover: transparent;
  --sdds-btn-danger-background-active: var(--sdds-red-700);
  --sdds-btn-danger-color-active: var(--sdds-white);
  --sdds-btn-danger-border-color-active: transparent;
  --sdds-btn-danger-background-focus: var(--sdds-red-400);
  --sdds-btn-danger-color-focus: var(--sdds-white);
  --sdds-btn-danger-border-color-focus: var(--sdds-red-700);
  --sdds-btn-danger-outline-color-focus: var(--sdds-red-700);
  --sdds-btn-danger-background-disabled: var(--sdds-white);
  --sdds-btn-danger-color-disabled: rgb(0 0 0 / 38%);
  --sdds-btn-danger-border-color-disabled: transparent;
}

:root .sdds-on-white-bg,
html .sdds-on-white-bg {
  --sdds-btn-primary-background-disabled: var(--sdds-grey-50);
  --sdds-btn-danger-background-disabled: var(--sdds-grey-50);
}

.sdds-btn {
  font-family: "Scania Sans Semi Condensed", "Scania Sans Condensed", arial, helvetica, sans-serif;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.01em;
  display: inline-block;
  border-radius: 1rem;
  border: none;
  box-shadow: none;
  position: relative;
  text-decoration: none;
  cursor: pointer;
  height: 14rem;
  padding: var(--sdds-spacing-element-20);
  border: 1px solid;
}

.sdds-btn:disabled,
.sdds-btn.disabled {
  cursor: unset;
}

.sdds-btn:focus {
  outline: 2px solid var(--sdds-blue-400);
  outline-offset: -2px;
}

.sdds-btn .sdds-btn-icon,
.sdds-btn.sdds-btn-icon {
  fill: var(--sdds-grey-50);
  color: var(--sdds-grey-50);
  font-size: 4rem;
}

.sdds-btn .sdds-btn-icon {
  margin-left: var(--sdds-spacing-element-32);
  width: 16px;
  height: 16px;
  line-height: 0;
}

.sdds-btn.sdds-btn-sm {
  padding: var(--sdds-spacing-element-12);
  height: 10rem;
}

.sdds-btn.sdds-btn-sm:focus {
  outline: 2px solid var(--sdds-blue-400);
  outline-offset: -2px;
}

.sdds-btn.sdds-btn-sm .sdds-btn-icon {
  margin-left: var(--sdds-spacing-element-24);
}

.sdds-btn.sdds-btn-md {
  padding: var(--sdds-spacing-element-16);
  height: 12rem;
}

.sdds-btn.sdds-btn-md:focus {
  outline: 2px solid var(--sdds-blue-400);
  outline-offset: -2px;
}

.sdds-btn.sdds-btn-md .sdds-btn-icon {
  margin-left: var(--sdds-spacing-element-24);
}

.sdds-btn.sdds-btn-fullbleed {
  width: inherit;
  text-align: center;
}

.sdds-btn.sdds-btn-fullbleed .sdds-btn-icon,
.sdds-btn.sdds-btn-fullbleed.sdds-btn-icon {
  margin-left: var(--sdds-spacing-element-8);
}

.sdds-btn.sdds-btn-primary {
  background: var(--sdds-btn-primary-background);
  border-color: var(--sdds-btn-primary-border-color);
  color: var(--sdds-btn-primary-color);
  outline-color: var(--sdds-btn-primary-outline-color);
}

.sdds-btn.sdds-btn-primary:hover {
  background: var(--sdds-btn-primary-background-hover);
  border-color: var(--sdds-btn-primary-border-color-hover);
  color: var(--sdds-btn-primary-color-hover);
  outline-color: var(--sdds-btn-primary-outline-color-hover);
}

.sdds-btn.sdds-btn-primary:focus {
  background: var(--sdds-btn-primary-background-focus);
  border-color: var(--sdds-btn-primary-border-color-focus);
  color: var(--sdds-btn-primary-color-focus);
  outline-color: var(--sdds-btn-primary-outline-color-focus);
}

.sdds-btn.sdds-btn-primary:active,
.sdds-btn.sdds-btn-primary.active {
  background: var(--sdds-btn-primary-background-active);
  border-color: var(--sdds-btn-primary-border-color-active);
  color: var(--sdds-btn-primary-color-active);
  outline-color: var(--sdds-btn-primary-outline-color-active);
}

.sdds-btn.sdds-btn-primary.disabled,
.sdds-btn.sdds-btn-primary:disabled {
  cursor: not-allowed;
  background: var(--sdds-btn-primary-background-disabled);
  cursor: not-allowed;
  border-color: var(--sdds-btn-primary-border-color-disabled);
  cursor: not-allowed;
  color: var(--sdds-btn-primary-color-disabled);
  cursor: not-allowed;
  outline-color: var(--sdds-btn-primary-outline-color-disabled);
}

.sdds-btn.sdds-btn-primary.disabled .sdds-btn-icon,
.sdds-btn.sdds-btn-primary.disabled.sdds-btn-icon,
.sdds-btn.sdds-btn-primary:disabled .sdds-btn-icon,
.sdds-btn.sdds-btn-primary:disabled.sdds-btn-icon {
  color: var(--sdds-grey-300);
}

.sdds-btn.sdds-btn-primary.disabled .sdds-btn-icon,
.sdds-btn.sdds-btn-primary.disabled.sdds-btn-icon,
.sdds-btn.sdds-btn-primary:disabled .sdds-btn-icon,
.sdds-btn.sdds-btn-primary:disabled.sdds-btn-icon {
  color: var(--sdds-grey-300);
}

.sdds-btn.sdds-btn-primary.disabled .sdds-btn-icon,
.sdds-btn.sdds-btn-primary.disabled.sdds-btn-icon,
.sdds-btn.sdds-btn-primary:disabled .sdds-btn-icon,
.sdds-btn.sdds-btn-primary:disabled.sdds-btn-icon {
  color: var(--sdds-grey-300);
}

.sdds-btn.sdds-btn-primary.disabled .sdds-btn-icon,
.sdds-btn.sdds-btn-primary.disabled.sdds-btn-icon,
.sdds-btn.sdds-btn-primary:disabled .sdds-btn-icon,
.sdds-btn.sdds-btn-primary:disabled.sdds-btn-icon {
  color: var(--sdds-grey-300);
}

.sdds-btn.sdds-btn-secondary {
  background: var(--sdds-btn-secondary-background);
  border-color: var(--sdds-btn-secondary-border-color);
  color: var(--sdds-btn-secondary-color);
  outline-color: var(--sdds-btn-secondary-outline-color);
}

.sdds-btn.sdds-btn-secondary:hover {
  background: var(--sdds-btn-secondary-background-hover);
  border-color: var(--sdds-btn-secondary-border-color-hover);
  color: var(--sdds-btn-secondary-color-hover);
  outline-color: var(--sdds-btn-secondary-outline-color-hover);
}

.sdds-btn.sdds-btn-secondary:focus {
  background: var(--sdds-btn-secondary-background-focus);
  border-color: var(--sdds-btn-secondary-border-color-focus);
  color: var(--sdds-btn-secondary-color-focus);
  outline-color: var(--sdds-btn-secondary-outline-color-focus);
}

.sdds-btn.sdds-btn-secondary:active,
.sdds-btn.sdds-btn-secondary.active {
  background: var(--sdds-btn-secondary-background-active);
  border-color: var(--sdds-btn-secondary-border-color-active);
  color: var(--sdds-btn-secondary-color-active);
  outline-color: var(--sdds-btn-secondary-outline-color-active);
}

.sdds-btn.sdds-btn-secondary.disabled,
.sdds-btn.sdds-btn-secondary:disabled {
  cursor: not-allowed;
  background: var(--sdds-btn-secondary-background-disabled);
  cursor: not-allowed;
  border-color: var(--sdds-btn-secondary-border-color-disabled);
  cursor: not-allowed;
  color: var(--sdds-btn-secondary-color-disabled);
  cursor: not-allowed;
  outline-color: var(--sdds-btn-secondary-outline-color-disabled);
}

.sdds-btn.sdds-btn-secondary.disabled .sdds-btn-icon,
.sdds-btn.sdds-btn-secondary.disabled.sdds-btn-icon,
.sdds-btn.sdds-btn-secondary:disabled .sdds-btn-icon,
.sdds-btn.sdds-btn-secondary:disabled.sdds-btn-icon {
  color: var(--sdds-grey-300);
}

.sdds-btn.sdds-btn-secondary.disabled .sdds-btn-icon,
.sdds-btn.sdds-btn-secondary.disabled.sdds-btn-icon,
.sdds-btn.sdds-btn-secondary:disabled .sdds-btn-icon,
.sdds-btn.sdds-btn-secondary:disabled.sdds-btn-icon {
  color: var(--sdds-grey-300);
}

.sdds-btn.sdds-btn-secondary.disabled .sdds-btn-icon,
.sdds-btn.sdds-btn-secondary.disabled.sdds-btn-icon,
.sdds-btn.sdds-btn-secondary:disabled .sdds-btn-icon,
.sdds-btn.sdds-btn-secondary:disabled.sdds-btn-icon {
  color: var(--sdds-grey-300);
}

.sdds-btn.sdds-btn-secondary.disabled .sdds-btn-icon,
.sdds-btn.sdds-btn-secondary.disabled.sdds-btn-icon,
.sdds-btn.sdds-btn-secondary:disabled .sdds-btn-icon,
.sdds-btn.sdds-btn-secondary:disabled.sdds-btn-icon {
  color: var(--sdds-grey-300);
}

.sdds-btn.sdds-btn-ghost {
  background: var(--sdds-btn-ghost-background);
  border-color: var(--sdds-btn-ghost-border-color);
  color: var(--sdds-btn-ghost-color);
  outline-color: var(--sdds-btn-ghost-outline-color);
}

.sdds-btn.sdds-btn-ghost:hover {
  background: var(--sdds-btn-ghost-background-hover);
  border-color: var(--sdds-btn-ghost-border-color-hover);
  color: var(--sdds-btn-ghost-color-hover);
  outline-color: var(--sdds-btn-ghost-outline-color-hover);
}

.sdds-btn.sdds-btn-ghost:focus {
  background: var(--sdds-btn-ghost-background-focus);
  border-color: var(--sdds-btn-ghost-border-color-focus);
  color: var(--sdds-btn-ghost-color-focus);
  outline-color: var(--sdds-btn-ghost-outline-color-focus);
}

.sdds-btn.sdds-btn-ghost:active,
.sdds-btn.sdds-btn-ghost.active {
  background: var(--sdds-btn-ghost-background-active);
  border-color: var(--sdds-btn-ghost-border-color-active);
  color: var(--sdds-btn-ghost-color-active);
  outline-color: var(--sdds-btn-ghost-outline-color-active);
}

.sdds-btn.sdds-btn-ghost.disabled,
.sdds-btn.sdds-btn-ghost:disabled {
  cursor: not-allowed;
  background: var(--sdds-btn-ghost-background-disabled);
  cursor: not-allowed;
  border-color: var(--sdds-btn-ghost-border-color-disabled);
  cursor: not-allowed;
  color: var(--sdds-btn-ghost-color-disabled);
  cursor: not-allowed;
  outline-color: var(--sdds-btn-ghost-outline-color-disabled);
}

.sdds-btn.sdds-btn-ghost.disabled .sdds-btn-icon,
.sdds-btn.sdds-btn-ghost.disabled.sdds-btn-icon,
.sdds-btn.sdds-btn-ghost:disabled .sdds-btn-icon,
.sdds-btn.sdds-btn-ghost:disabled.sdds-btn-icon {
  color: var(--sdds-grey-300);
}

.sdds-btn.sdds-btn-ghost.disabled .sdds-btn-icon,
.sdds-btn.sdds-btn-ghost.disabled.sdds-btn-icon,
.sdds-btn.sdds-btn-ghost:disabled .sdds-btn-icon,
.sdds-btn.sdds-btn-ghost:disabled.sdds-btn-icon {
  color: var(--sdds-grey-300);
}

.sdds-btn.sdds-btn-ghost.disabled .sdds-btn-icon,
.sdds-btn.sdds-btn-ghost.disabled.sdds-btn-icon,
.sdds-btn.sdds-btn-ghost:disabled .sdds-btn-icon,
.sdds-btn.sdds-btn-ghost:disabled.sdds-btn-icon {
  color: var(--sdds-grey-300);
}

.sdds-btn.sdds-btn-ghost.disabled .sdds-btn-icon,
.sdds-btn.sdds-btn-ghost.disabled.sdds-btn-icon,
.sdds-btn.sdds-btn-ghost:disabled .sdds-btn-icon,
.sdds-btn.sdds-btn-ghost:disabled.sdds-btn-icon {
  color: var(--sdds-grey-300);
}

.sdds-btn.sdds-btn-danger {
  background: var(--sdds-btn-danger-background);
  border-color: var(--sdds-btn-danger-border-color);
  color: var(--sdds-btn-danger-color);
  outline-color: var(--sdds-btn-danger-outline-color);
}

.sdds-btn.sdds-btn-danger:hover {
  background: var(--sdds-btn-danger-background-hover);
  border-color: var(--sdds-btn-danger-border-color-hover);
  color: var(--sdds-btn-danger-color-hover);
  outline-color: var(--sdds-btn-danger-outline-color-hover);
}

.sdds-btn.sdds-btn-danger:focus {
  background: var(--sdds-btn-danger-background-focus);
  border-color: var(--sdds-btn-danger-border-color-focus);
  color: var(--sdds-btn-danger-color-focus);
  outline-color: var(--sdds-btn-danger-outline-color-focus);
}

.sdds-btn.sdds-btn-danger:active,
.sdds-btn.sdds-btn-danger.active {
  background: var(--sdds-btn-danger-background-active);
  border-color: var(--sdds-btn-danger-border-color-active);
  color: var(--sdds-btn-danger-color-active);
  outline-color: var(--sdds-btn-danger-outline-color-active);
}

.sdds-btn.sdds-btn-danger.disabled,
.sdds-btn.sdds-btn-danger:disabled {
  cursor: not-allowed;
  background: var(--sdds-btn-danger-background-disabled);
  cursor: not-allowed;
  border-color: var(--sdds-btn-danger-border-color-disabled);
  cursor: not-allowed;
  color: var(--sdds-btn-danger-color-disabled);
  cursor: not-allowed;
  outline-color: var(--sdds-btn-danger-outline-color-disabled);
}

.sdds-btn.sdds-btn-danger.disabled .sdds-btn-icon,
.sdds-btn.sdds-btn-danger.disabled.sdds-btn-icon,
.sdds-btn.sdds-btn-danger:disabled .sdds-btn-icon,
.sdds-btn.sdds-btn-danger:disabled.sdds-btn-icon {
  color: var(--sdds-grey-300);
}

.sdds-btn.sdds-btn-danger.disabled .sdds-btn-icon,
.sdds-btn.sdds-btn-danger.disabled.sdds-btn-icon,
.sdds-btn.sdds-btn-danger:disabled .sdds-btn-icon,
.sdds-btn.sdds-btn-danger:disabled.sdds-btn-icon {
  color: var(--sdds-grey-300);
}

.sdds-btn.sdds-btn-danger.disabled .sdds-btn-icon,
.sdds-btn.sdds-btn-danger.disabled.sdds-btn-icon,
.sdds-btn.sdds-btn-danger:disabled .sdds-btn-icon,
.sdds-btn.sdds-btn-danger:disabled.sdds-btn-icon {
  color: var(--sdds-grey-300);
}

.sdds-btn.sdds-btn-danger.disabled .sdds-btn-icon,
.sdds-btn.sdds-btn-danger.disabled.sdds-btn-icon,
.sdds-btn.sdds-btn-danger:disabled .sdds-btn-icon,
.sdds-btn.sdds-btn-danger:disabled.sdds-btn-icon {
  color: var(--sdds-grey-300);
}

:root,
html {
  --sdds-card-bg: var(--sdds-white);
  --sdds-card-box: 0 3px 3px rgb(0 0 0 / 15%), 0 -1px 1px rgb(0 0 0 / 1%);
  --sdds-card-box-hover: 0 -1px 1px rgb(0 0 0 / 5%), 0 3px 3px rgb(0 0 0 / 20%);
  --sdds-card-box-pressed:
    0 -1px 1px rgb(0 0 0 / 5%),
    0 1px 3px rgb(0 0 0 / 20%);
  --sdds-card-headline: var(--sdds-grey-958);
  --sdds-card-sub-headline: var(--sdds-grey-600);
}

:root .sdds-on-white-bg,
html .sdds-on-white-bg {
  --sdds-card-box: 0 3px 3px rgb(0 0 0 / 10%), 0 -1px 1px rgb(0 0 0 / 5%);
}

.sdds-card {
  background-color: var(--sdds-card-bg);
  border-radius: 1rem;
  box-shadow: var(--sdds-card-box);
}

.sdds-card.sdds-clickable {
  cursor: pointer;
}

.sdds-card.sdds-clickable:hover {
  box-shadow: var(--sdds-card-box-hover);
}

.sdds-card.sdds-clickable:active {
  box-shadow: var(--sdds-card-box-pressed);
}

.sdds-card.sdds-card-img-left {
  display: flex;
}

.sdds-card.sdds-card-img-left .sdds-card-img {
  height: auto;
  width: auto;
  border-radius: 1rem 0 0 1rem;
}

.sdds-card .sdds-card-header,
.sdds-card .sdds-card-header-avatar {
  padding: var(--sdds-spacing-element-16);
}

.sdds-card .sdds-card-header+.sdds-card-body,
.sdds-card .sdds-card-header-avatar+.sdds-card-body {
  padding-top: 0;
}

.sdds-card .sdds-card-header+.sdds-card-img,
.sdds-card .sdds-card-header-avatar+.sdds-card-img {
  border-radius: 0;
}

.sdds-card .sdds-card-header-avatar {
  display: flex;
}

.sdds-card .sdds-card-header-avatar .sdds-card-headlines,
.sdds-card .sdds-card-header-avatar .sdds-card-avatar {
  vertical-align: top;
}

.sdds-card .sdds-card-header-avatar .sdds-card-avatar {
  margin-right: 16px;
  overflow: hidden;
  height: 36px;
  width: 36px;
  border-radius: 50%;
}

.sdds-card .sdds-card-header-avatar .sdds-card-avatar img,
.sdds-card .sdds-card-header-avatar .sdds-card-avatar svg {
  height: 100%;
  width: 100%;
}

.sdds-card .sdds-card-headline,
.sdds-card .sdds-card-sub-headline {
  margin: 0;
}

.sdds-card .sdds-card-headline {
  color: var(--sdds-card-headline);
  margin-bottom: var(--sdds-spacing-element-4);
}

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

.sdds-card .sdds-divider-light-border-top {
  margin: 0 var(--sdds-spacing-element-16);
}

.sdds-card .sdds-card-img {
  height: 100%;
  width: 100%;
  border-radius: 1rem 1rem 0 0;
}

.sdds-card .sdds-card-body {
  font-family: "Scania Sans Semi Condensed", "Scania Sans Condensed", arial, helvetica, sans-serif;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: -0.01em;
  padding: var(--sdds-spacing-element-16);
}

.sdds-card .sdds-card-footer {
  padding: var(--sdds-spacing-element-16);
}

.sdds-card .sdds-card-footer a {
  padding-right: var(--sdds-spacing-element-16);
}

:root,
html {
  --sdds-checkbox-color: var(--sdds-grey-900);
  --sdds-checkbox-interaction-01: var(--sdds-blue-800);
  --sdds-checkbox-interaction-02: var(--sdds-white);
  --sdds-checkbox-bg-hover: var(--sdds-blue-800);
  --sdds-checkbox-bg-focus: var(--sdds-blue-800);
  --sdds-checkbox-disabled: var(--sdds-grey-400);
}

.sdds-checkbox-item {
  font-family: "Scania Sans Semi Condensed", "Scania Sans Condensed", arial, helvetica, sans-serif;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.01em;
  color: var(--sdds-checkbox-text);
  display: flex;
  align-items: center;
  margin-left: -1rem;
}

.sdds-checkbox-item .sdds-form-input[type=checkbox] {
  appearance: none;
  outline: none;
  margin: 0;
  border: 0;
  border-radius: 2px;
  width: 6rem;
  height: 6rem;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  align-self: flex-start;
}

.sdds-checkbox-item .sdds-form-input[type=checkbox]+label {
  padding-left: var(--sdds-spacing-element-8);
  padding-top: var(--sdds-spacing-element-4);
  padding-bottom: var(--sdds-spacing-element-4);
  cursor: pointer;
}

.sdds-checkbox-item .sdds-form-input[type=checkbox]::before,
.sdds-checkbox-item .sdds-form-input[type=checkbox]::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
  border-radius: 2px;
}

.sdds-checkbox-item .sdds-form-input[type=checkbox]::before {
  width: 6rem;
  height: 6rem;
  left: 0;
  top: 0;
}

.sdds-checkbox-item .sdds-form-input[type=checkbox]::after {
  border: 1px solid var(--sdds-checkbox-interaction-01);
  background-color: var(--sdds-checkbox-interaction-02);
  width: 4rem;
  height: 4rem;
  left: 1rem;
  top: 1rem;
}

.sdds-checkbox-item .sdds-form-input[type=checkbox]:hover::before {
  background-color: var(--sdds-checkbox-bg-hover);
  opacity: 0.12;
}

.sdds-checkbox-item .sdds-form-input[type=checkbox]:focus::before {
  background-color: var(--sdds-checkbox-bg-focus);
  opacity: 0.24;
  animation: cb-focus 0.4s cubic-bezier(0.65, 0.05, 0.38, 0.95) forwards;
}

.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled,
.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled {
  cursor: default;
}

.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled::after,
.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled::after {
  border-color: var(--sdds-grey-500);
}

.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled+label,
.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled+label {
  color: var(--sdds-grey-600);
  cursor: default;
}

.sdds-checkbox-item .sdds-form-input[type=checkbox]:disabled:hover::before,
.sdds-checkbox-item .sdds-form-input[type=checkbox].disabled:hover::before {
  display: none;
}

.sdds-form-input[type=checkbox]:checked::after {
  background-color: var(--sdds-checkbox-interaction-01);
  background-image: 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='white' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
}

.sdds-form-input[type=checkbox]:checked:disabled:hover::before,
.sdds-form-input[type=checkbox]:checked:disabled::before,
.sdds-form-input[type=checkbox]:checked.disabled:hover::before,
.sdds-form-input[type=checkbox]:checked.disabled::before {
  display: block;
  width: 4rem;
  height: 4rem;
  left: 1rem;
  top: 1rem;
  border: 1px solid var(--sdds-grey-500);
}

.sdds-form-input[type=checkbox]:checked:disabled::after,
.sdds-form-input[type=checkbox]:checked.disabled::after {
  background-color: var(--sdds-checkbox-interaction-02);
  color: var(--sdds-grey-500);
  background-image: 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='%23b1b7c4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

@keyframes cb-focus {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  50% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 0;
  }
}


:root,
html {
  --sdds-dropdown-bg: var(--sdds-white);
  --sdds-dropdown-bg-hover: var(--sdds-grey-50);
}

:root .sdds-on-white-bg,
html .sdds-on-white-bg {
  --sdds-dropdown-bg: var(--sdds-grey-50);
  --sdds-dropdown-bg-hover: var(--sdds-grey-100);
}

.sdds-dropdown-helper {
  font-family: "Scania Sans Semi Condensed", "Scania Sans Condensed", arial, helvetica, sans-serif;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0;
  color: var(--sdds-grey-700);
  margin-top: var(--sdds-spacing-element-4);
  display: flex;
}

.sdds-dropdown-helper .sdds-dropdown-error-icon {
  width: 16px;
  height: 16px;
  padding-right: 9px;
  display: none;
}

.sdds-dropdown-label-inside {
  font-family: "Scania Sans Semi Condensed", "Scania Sans Condensed", arial, helvetica, sans-serif;
  font-size: 10px;
  line-height: 2rem;
  letter-spacing: 0;
  color: var(--sdds-grey-700);
}

.sdds-dropdown-label-outside {
  font-family: "Scania Sans Semi Condensed", "Scania Sans Condensed", arial, helvetica, sans-serif;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0;
  display: block;
  color: var(--sdds-grey-958);
  margin-bottom: var(--sdds-spacing-element-8);
}

.sdds-dropdown {
  position: relative;
}

.sdds-dropdown select {
  font-family: "Scania Sans Semi Condensed", "Scania Sans Condensed", arial, helvetica, sans-serif;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.01em;
  color: var(--sdds-grey-958);
  display: flex;
  align-items: center;
  background-color: var(--sdds-dropdown-bg);
  cursor: pointer;
  transition: box-shadow 0.1s ease-in, border-bottom-color 150ms ease;
  border-radius: 1rem 1rem 0 0;
  border: none;
  border-bottom: 1px solid var(--sdds-grey-400);
  box-shadow: none;
  width: 100%;
  text-align: left;
  outline: none;
  padding: 5rem 4rem;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg class='sdds-dropdown-arrow' width='12' height='7' viewBox='0 0 12 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='currentColor' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round' /%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  border-bottom-color: var(--sdds-grey-800);
}

.sdds-dropdown select:hover {
  border-bottom-color: var(--sdds-grey-600);
}

.sdds-dropdown select:focus::before {
  content: " ";
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: 0;
  width: 100%;
  border-bottom: 2px solid var(--sdds-blue-400);
}

.sdds-dropdown select:active,
.sdds-dropdown select.active .sdds-dropdown select.selected {
  border-bottom-color: var(--sdds-grey-800);
}

.sdds-dropdown select.is-filter {
  transition: border 0.1s ease-in 0.1s;
  cursor: text;
}

.sdds-dropdown select:focus {
  border-bottom: 2px solid var(--sdds-blue-400);
}

.sdds-dropdown select:disabled {
  cursor: not-allowed;
  border-bottom: none;
  color: var(--sdds-grey-400);
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg class='sdds-dropdown-arrow' width='12' height='7' viewBox='0 0 12 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23cdd1db' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round' /%3E%3C/svg%3E");
}

.sdds-dropdown.sdds-dropdown-medium select {
  padding: 4rem;
}

.sdds-dropdown.sdds-dropdown-small select {
  padding: 3rem 4rem;
}

.sdds-dropdown.sdds-dropdown--error select {
  border-color: var(--sdds-negative);
}

.sdds-dropdown.sdds-dropdown--error .sdds-dropdown-helper {
  color: var(--sdds-negative);
}


html,
:root {
  --sdds-nav-dropdown-menu-box: 0 3px 3px rgb(0 0 0 / 15%), 0 -1px 1px rgb(0 0 0 / 1%);
  --sdds-nav-dropdown-item-border-radius: 0 0 4px 4px;
}

:root {
  --sdds-link: var(--sdds-blue-500);
  --sdds-link-hover: var(--sdds-blue-400);
  --sdds-link-focus: var(--sdds-blue-400);
  --sdds-link-visited: var(--sdds-blue-400);
  --sdds-link-disabled: var(--sdds-grey-400);
}

.sdds-link {
  cursor: pointer;
  outline: none;
}

.sdds-link,
.sdds-link.active,
.sdds-link:active {
  color: var(--sdds-link);
  text-decoration: underline;
  text-decoration-color: var(--sdds-link);
}

.sdds-link:hover {
  color: var(--sdds-link-hover);
  text-decoration: underline;
  text-decoration-color: var(--sdds-link-hover);
}

.sdds-link:visited {
  color: var(--sdds-link-visited);
  text-decoration-color: var(--sdds-link-visited);
}

.sdds-link:focus {
  color: var(--sdds-link-focus);
  text-decoration: none;
  outline: 2px solid var(--sdds-blue-400);
  outline-offset: -2px;
}

.sdds-link:disabled,
.sdds-link.disabled {
  color: var(--sdds-link-disabled);
  text-decoration-color: var(--sdds-link-disabled);
  pointer-events: none;
}

.sdds-link--no-underline {
  text-decoration: none;
}

.sdds-link--no-underline:hover {
  text-decoration: none;
}



:root,
html {
  --sdds-modal-backdrop: rgba(0 0 0 / 40%);
  --sdds-modal-bg: var(--sdds-white);
}


:root,
html {
  --sdds-radio-button-color: var(--sdds-grey-958);
  --sdds-radio-button-interaction-01: var(--sdds-blue-800);
  --sdds-radio-button-interaction-02: var(--sdds-white);
  --sdds-radio-button-bg-hover: var(--sdds-blue-800);
  --sdds-radio-button-bg-focus: var(--sdds-blue-800);
  --sdds-radio-button-disabled: var(--sdds-grey-400);
}

.sdds-radio-button-group {
  font-family: "Scania Sans Semi Condensed", "Scania Sans Condensed", arial, helvetica, sans-serif;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.01em;
  color: var(--sdds-radio-button-color);
}

.sdds-radio-button-group .sdds-radio-item {
  display: flex;
  align-items: center;
  margin-left: -1rem;
}

.sdds-radio-button-group .sdds-form-input[type=radio]:checked,
.sdds-radio-button-group .sdds-form-input[type=radio]:not(:checked) {
  appearance: none;
  outline: none;
  margin: 0;
  border: 0;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  align-self: flex-start;
}

.sdds-radio-button-group .sdds-form-input[type=radio]:checked+label,
.sdds-radio-button-group .sdds-form-input[type=radio]:not(:checked)+label {
  padding-left: var(--sdds-spacing-element-4);
  padding-top: var(--sdds-spacing-element-4);
  padding-bottom: var(--sdds-spacing-element-4);
  cursor: pointer;
}

.sdds-radio-button-group .sdds-form-input[type=radio]:checked::before,
.sdds-radio-button-group .sdds-form-input[type=radio]:checked::after,
.sdds-radio-button-group .sdds-form-input[type=radio]:not(:checked)::before,
.sdds-radio-button-group .sdds-form-input[type=radio]:not(:checked)::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  box-sizing: border-box;
}

.sdds-radio-button-group .sdds-form-input[type=radio]:checked::before,
.sdds-radio-button-group .sdds-form-input[type=radio]:not(:checked)::before {
  width: 6rem;
  height: 6rem;
  left: 0;
  top: 0;
}

.sdds-radio-button-group .sdds-form-input[type=radio]:checked::after,
.sdds-radio-button-group .sdds-form-input[type=radio]:not(:checked)::after {
  border: 1px solid var(--sdds-radio-button-interaction-01);
  background-color: var(--sdds-radio-button-interaction-02);
  width: 4rem;
  height: 4rem;
  left: 1rem;
  top: 1rem;
}

.sdds-radio-button-group .sdds-form-input[type=radio]:checked:hover::before,
.sdds-radio-button-group .sdds-form-input[type=radio]:not(:checked):hover::before {
  background-color: var(--sdds-radio-button-bg-hover);
  opacity: 0.12;
}

.sdds-radio-button-group .sdds-form-input[type=radio]:checked:focus::before,
.sdds-radio-button-group .sdds-form-input[type=radio]:not(:checked):focus::before {
  background-color: var(--sdds-radio-button-bg-focus);
  opacity: 0.24;
  animation: rb-focus 0.4s cubic-bezier(0.65, 0.05, 0.38, 0.95) forwards;
}

.sdds-radio-button-group .sdds-form-input[type=radio]:checked:disabled,
.sdds-radio-button-group .sdds-form-input[type=radio]:checked.disabled,
.sdds-radio-button-group .sdds-form-input[type=radio]:not(:checked):disabled,
.sdds-radio-button-group .sdds-form-input[type=radio]:not(:checked).disabled {
  cursor: default;
}

.sdds-radio-button-group .sdds-form-input[type=radio]:checked:disabled::after,
.sdds-radio-button-group .sdds-form-input[type=radio]:checked.disabled::after,
.sdds-radio-button-group .sdds-form-input[type=radio]:not(:checked):disabled::after,
.sdds-radio-button-group .sdds-form-input[type=radio]:not(:checked).disabled::after {
  border-color: var(--sdds-grey-500);
}

.sdds-radio-button-group .sdds-form-input[type=radio]:checked:disabled+label,
.sdds-radio-button-group .sdds-form-input[type=radio]:checked.disabled+label,
.sdds-radio-button-group .sdds-form-input[type=radio]:not(:checked):disabled+label,
.sdds-radio-button-group .sdds-form-input[type=radio]:not(:checked).disabled+label {
  color: var(--sdds-grey-600);
  cursor: default;
}

.sdds-radio-button-group .sdds-form-input[type=radio]:checked:disabled:hover::before,
.sdds-radio-button-group .sdds-form-input[type=radio]:checked.disabled:hover::before,
.sdds-radio-button-group .sdds-form-input[type=radio]:not(:checked):disabled:hover::before,
.sdds-radio-button-group .sdds-form-input[type=radio]:not(:checked).disabled:hover::before {
  display: none;
  opacity: 1;
}

.sdds-radio-button-group .sdds-form-input[type=radio]:checked::after {
  border: 4px solid var(--sdds-radio-button-interaction-01);
}

.sdds-radio-button-group .sdds-form-input[type=radio]:checked:disabled:hover::before,
.sdds-radio-button-group .sdds-form-input[type=radio]:checked:disabled::before,
.sdds-radio-button-group .sdds-form-input[type=radio]:checked.disabled:hover::before,
.sdds-radio-button-group .sdds-form-input[type=radio]:checked.disabled::before {
  display: block;
  width: 4rem;
  height: 4rem;
  left: 1rem;
  top: 1rem;
  border: 1px solid var(--sdds-grey-500);
  box-sizing: content-box;
}

.sdds-radio-button-group .sdds-form-input[type=radio]:checked:disabled::after,
.sdds-radio-button-group .sdds-form-input[type=radio]:checked.disabled::after {
  border: 4px solid var(--sdds-radio-button-interaction-02);
  background-color: var(--sdds-grey-500);
  left: calc(1rem + 1px);
  top: calc(1rem + 1px);
}

@keyframes rb-focus {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  50% {
    transform: scale(1);
    opacity: 0.24;
  }

  100% {
    transform: scale(1);
    opacity: 0;
  }
}




:root,
html {
  --sdds-textfield-color: var(--sdds-grey-868);
  --sdds-textfield-bg: var(--sdds-white);
  --sdds-textfield-border-bottom: var(--sdds-grey-400);
  --sdds-textfield-placeholder: var(--sdds-grey-500);
  --sdds-textfield-border-bottom-hover: var(--sdds-grey-600);
  --sdds-textfield-disabled-bg: var(--sdds-white);
  --sdds-textfield-disabled-color: var(--sdds-grey-400);
  --sdds-textfield-disabled-placeholder: var(--sdds-grey-400);
  --sdds-textfield-disabled-label: var(--sdds-grey-400);
  --sdds-textfield-disabled-ps-color: var(--sdds-grey-400);
  --sdds-textfield-label-color: var(--sdds-grey-958);
  --sdds-textfield-label-inside-color: var(--sdds-grey-700);
  --sdds-textfield-placeholder-focus-color: var(--sdds-grey-500);
  --sdds-textfield-bar: var(--sdds-blue-400);
  --sdds-textfield-helper: var(--sdds-grey-700);
  --sdds-textfield-border-bottom-success: var(--sdds-grey-800);
  --sdds-textfield-border-bottom-error: var(--sdds-red-500);
  --sdds-textfield-helper-error: var(--sdds-red-500);
  --sdds-textfield-bar-error: var(--sdds-red-500);
  --sdds-textfield-icon-error: var(--sdds-red-500);
  --sdds-textfield-textcounter: var(--sdds-grey-700);
  --sdds-textfield-textcounter-divider: var(--sdds-grey-500);
  --sdds-textfield-ps-color: var(--sdds-grey-600);
  --sdds-textfield-resize-icon: var(--sdds-grey-500);
  --sdds-textarea-border-bottom: var(--sdds-grey-400);
  --sdds-textarea-border-bottom-hover: var(--sdds-grey-600);
}

:root .sdds-on-white-bg,
html .sdds-on-white-bg {
  --sdds-textfield-bg: var(--sdds-grey-50);
}

.sdds-textfield-input {
  border-radius: 1rem 1rem 0 0;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  border: none;
  outline: none;
  height: 100%;
  color: var(--sdds-textfield-color);
  background-color: var(--sdds-textfield-bg);
  font-family: "Scania Sans Semi Condensed", "Scania Sans Condensed", arial, helvetica, sans-serif;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.01em;
  padding: var(--sdds-spacing-element-20) var(--sdds-spacing-element-16);
}

.sdds-textfield-input::placeholder {
  opacity: 1;
  color: var(--sdds-textfield-placeholder);
}

.sdds-textfield-input:focus::placeholder {
  color: var(--sdds-textfield-placeholder-focus-color);
}

.sdds-textfield-input:disabled {
  background-color: var(--sdds-textfield-disabled-bg);
  color: var(--sdds-textfield-disabled-color);
}

.sdds-textfield-input:disabled::placeholder {
  color: var(--sdds-textfield-disabled-placeholder);
}

.sdds-textfield-input:disabled~.sdds-textfield-label-inside {
  color: var(--sdds-textfield-disabled-label);
}

.sdds-textfield-input-md {
  border-radius: 1rem 1rem 0 0;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  border: none;
  outline: none;
  height: 100%;
  color: var(--sdds-textfield-color);
  background-color: var(--sdds-textfield-bg);
  font-family: "Scania Sans Semi Condensed", "Scania Sans Condensed", arial, helvetica, sans-serif;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.01em;
  padding: var(--sdds-spacing-element-16);
}

.sdds-textfield-input-md::placeholder {
  opacity: 1;
  color: var(--sdds-textfield-placeholder);
}

.sdds-textfield-input-md:focus::placeholder {
  color: var(--sdds-textfield-placeholder-focus-color);
}

.sdds-textfield-input-md:disabled {
  background-color: var(--sdds-textfield-disabled-bg);
  color: var(--sdds-textfield-disabled-color);
}

.sdds-textfield-input-md:disabled::placeholder {
  color: var(--sdds-textfield-disabled-placeholder);
}

.sdds-textfield-input-md:disabled~.sdds-textfield-label-inside {
  color: var(--sdds-textfield-disabled-label);
}

.sdds-textfield-input-sm {
  border-radius: 1rem 1rem 0 0;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  border: none;
  outline: none;
  height: 100%;
  color: var(--sdds-textfield-color);
  background-color: var(--sdds-textfield-bg);
  font-family: "Scania Sans Semi Condensed", "Scania Sans Condensed", arial, helvetica, sans-serif;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.01em;
  padding: var(--sdds-spacing-element-16);
}

.sdds-textfield-input-sm::placeholder {
  opacity: 1;
  color: var(--sdds-textfield-placeholder);
}

.sdds-textfield-input-sm:focus::placeholder {
  color: var(--sdds-textfield-placeholder-focus-color);
}

.sdds-textfield-input-sm:disabled {
  background-color: var(--sdds-textfield-disabled-bg);
  color: var(--sdds-textfield-disabled-color);
}

.sdds-textfield-input-sm:disabled::placeholder {
  color: var(--sdds-textfield-disabled-placeholder);
}

.sdds-textfield-input-sm:disabled~.sdds-textfield-label-inside {
  color: var(--sdds-textfield-disabled-label);
}

.sdds-textfield-container {
  border-radius: 1rem 1rem 0 0;
  display: flex;
  position: relative;
  height: 56px;
  box-sizing: border-box;
  background-color: var(--sdds-textfield-bg);
  border-bottom: 1px solid var(--sdds-textfield-border-bottom);
  transition: border-bottom-color 200ms ease;
}

.sdds-textfield-container:hover {
  border-bottom-color: var(--sdds-textfield-border-bottom-hover);
}

.sdds-form-textfield-md .sdds-textfield-container {
  height: 48px;
}

.sdds-form-textfield-sm .sdds-textfield-container {
  height: 40px;
}

.sdds-textfield-input-container {
  position: relative;
  width: 100%;
}


.sdds-textfield-slot-wrap-label>* {
  font-family: "Scania Sans Semi Condensed", "Scania Sans Condensed", arial, helvetica, sans-serif;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0;
  display: block;
  margin-bottom: var(--sdds-spacing-element-8);
  color: var(--sdds-textfield-label-color);
}

.sdds-textfield-label-inside {
  font-family: "Scania Sans Semi Condensed", "Scania Sans Condensed", arial, helvetica, sans-serif;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.01em;
  position: absolute;
  pointer-events: none;
  color: var(--sdds-textfield-label-inside-color);
  left: 16px;
}

.sdds-form-textfield {
  display: block;
  min-width: 208px;
}

.sdds-form-textfield-nomin {
  min-width: auto;
}

.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input {
  padding-top: var(--sdds-spacing-element-24);
  padding-bottom: 15px;
}

.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input~.sdds-textfield-label-inside {
  top: 20px;
}

.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input::placeholder {
  color: transparent;
}

.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input::input-placeholder {
  color: transparent;
}

.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input:placeholder {
  color: transparent;
}

.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input ::placeholder {
  color: transparent;
}

.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input:focus::placeholder {
  transition: color 0.35s ease;
  color: var(--sdds-textfield-placeholder-focus-color);
}

.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-md {
  padding-top: var(--sdds-spacing-element-20);
  padding-bottom: 11px;
}

.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-md~.sdds-textfield-label-inside {
  top: 16px;
}

.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-md::placeholder {
  color: transparent;
}

.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-md::input-placeholder {
  color: transparent;
}

.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-md:placeholder {
  color: transparent;
}

.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-md ::placeholder {
  color: transparent;
}

.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-md:focus::placeholder {
  transition: color 0.35s ease;
  color: var(--sdds-textfield-placeholder-focus-color);
}

.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-sm {
  padding-top: var(--sdds-spacing-element-20);
  padding-bottom: 11px;
}

.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-sm~.sdds-textfield-label-inside {
  top: 16px;
}

.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-sm::placeholder {
  color: transparent;
}

.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-sm::input-placeholder {
  color: transparent;
}

.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-sm:placeholder {
  color: transparent;
}

.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-sm ::placeholder {
  color: transparent;
}

.sdds-form-textfield.sdds-textfield-container-label-inside .sdds-textfield-input-sm:focus::placeholder {
  transition: color 0.35s ease;
  color: var(--sdds-textfield-placeholder-focus-color);
}

.sdds-form-textfield.sdds-textfield-container-label-inside.sdds-textfield-focus .sdds-textfield-input-sm~.sdds-textfield-label-inside,
.sdds-form-textfield.sdds-textfield-container-label-inside.sdds-textfield-data .sdds-textfield-input-sm~.sdds-textfield-label-inside {
  font-family: "Scania Sans Semi Condensed", "Scania Sans Condensed", arial, helvetica, sans-serif;
  font-size: 10px;
  line-height: 2rem;
  letter-spacing: 0;
  transition: 0.1s ease all;
  top: 8px;
}

.sdds-form-textfield.sdds-textfield-container-label-inside.sdds-textfield-focus .sdds-textfield-input-md~.sdds-textfield-label-inside,
.sdds-form-textfield.sdds-textfield-container-label-inside.sdds-textfield-data .sdds-textfield-input-md~.sdds-textfield-label-inside {
  font-family: "Scania Sans Semi Condensed", "Scania Sans Condensed", arial, helvetica, sans-serif;
  font-size: 10px;
  line-height: 2rem;
  letter-spacing: 0;
  transition: 0.1s ease all;
  top: 8px;
}

.sdds-form-textfield.sdds-textfield-container-label-inside.sdds-textfield-focus .sdds-textfield-input~.sdds-textfield-label-inside,
.sdds-form-textfield.sdds-textfield-container-label-inside.sdds-textfield-data .sdds-textfield-input~.sdds-textfield-label-inside {
  font-family: "Scania Sans Semi Condensed", "Scania Sans Condensed", arial, helvetica, sans-serif;
  font-size: 10px;
  line-height: 2rem;
  letter-spacing: 0;
  transition: 0.1s ease all;
  top: 12px;
}

.sdds-textfield-bar {
  position: absolute;
  width: 100%;
}

.sdds-textfield-bar::before,
.sdds-textfield-bar::after {
  content: "";
  height: 2px;
  top: 54px;
  width: 0;
  position: absolute;
  background: var(--sdds-textfield-bar);
  transition: 0.35s ease all;
}

.sdds-form-textfield-md .sdds-textfield-bar::before,
.sdds-form-textfield-md .sdds-textfield-bar::after {
  top: 46px;
}

.sdds-form-textfield-sm .sdds-textfield-bar::before,
.sdds-form-textfield-sm .sdds-textfield-bar::after {
  top: 40px;
}

.sdds-textfield-bar::before {
  left: 50%;
}

.sdds-textfield-bar::after {
  right: 50%;
}

.sdds-textfield-focus .sdds-textfield-bar::before,
.sdds-textfield-focus .sdds-textfield-bar::after {
  width: 50%;
}

.sdds-textfield-helper {
  font-family: "Scania Sans Semi Condensed", "Scania Sans Condensed", arial, helvetica, sans-serif;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0;
  display: flex;
  justify-content: space-between;
  padding-top: var(--sdds-spacing-element-4);
  color: var(--sdds-textfield-helper);
}

.sdds-textfield-helper .sdds-textfield-textcounter {
  margin-left: auto;
}

.sdds-textfield-helper .sdds-textfield-helper-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}



.sdds-form-textfield-disabled .sdds-textfield-container {
  border-bottom-color: transparent;
}

.sdds-form-textfield-disabled .sdds-textfield-slot-wrap-prefix>*,
.sdds-form-textfield-disabled .sdds-textfield-slot-wrap-suffix>* {
  color: var(--sdds-textfield-disabled-ps-color);
}

.sdds-form-textfield-disabled .sdds-textfield-slot-wrap-label>* {
  color: var(--sdds-textfield-disabled-label);
}

.sdds-textfield-icon__readonly {
  display: none;
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
}

.sdds-textfield-icon__readonly-label {
  display: none;
  position: absolute;
  right: 18px;
  bottom: -24px;
  font-family: "Scania Sans Semi Condensed", "Scania Sans Condensed", arial, helvetica, sans-serif;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0;
  padding: 8px;
  color: var(--sdds-white);
  background-color: var(--sdds-grey-800);
  white-space: nowrap;
  border-radius: 4px 0 4px 4px;
}

.sdds-form-textfield-readonly {
  pointer-events: none;
}

.sdds-form-textfield-readonly .sdds-textfield-icon__readonly {
  display: block;
}

.sdds-form-textfield-readonly .sdds-textfield-icon__readonly:hover~.sdds-textfield-icon__readonly-label {
  display: block;
}

.sdds-form-textfield-readonly .sdds-textfield-input {
  padding-right: 54px;
  background-color: transparent;
}

.sdds-form-textfield-readonly .sdds-textfield-container {
  background-color: transparent;
}

.sdds-form-textfield-success .sdds-textfield-container {
  border-bottom-color: var(--sdds-textfield-border-bottom-success);
}

.sdds-form-textfield-error .sdds-textfield-helper {
  color: var(--sdds-textfield-helper-error);
}

.sdds-form-textfield-error .sdds-textfield-container {
  border-bottom-color: var(--sdds-textfield-border-bottom-error);
}

.sdds-form-textfield-error .sdds-textfield-bar::before,
.sdds-form-textfield-error .sdds-textfield-bar::after {
  background: var(--sdds-textfield-bar-error);
}

.sdds-form-textfield-error slot[name=sdds-prefix]::slotted(sdds-icon),
.sdds-form-textfield-error slot[name=sdds-suffix]::slotted(sdds-icon) {
  color: var(--sdds-textfield-icon-error);
}

.sdds-textfield-helper-error-state {
  display: flex;
  flex-wrap: nowrap;
}

.sdds-textfield-helper-error-state svg {
  margin-right: 8px;
}

.sdds-textfield-textcounter {
  font-family: "Scania Sans Semi Condensed", "Scania Sans Condensed", arial, helvetica, sans-serif;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0;
  color: var(--sdds-textfield-textcounter);
  float: right;
}

.sdds-textfield-textcounter .sdds-textfield-textcounter-divider {
  color: var(--sdds-textfield-textcounter-divider);
}

.sdds-message {
  display: block;
  padding: 16px 32px 16px 20px;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  color: var(--sdds-grey-958);
  background-color: var(--sdds-grey-50);
  margin-bottom: 12px;
  /* modifiers */
  /* types */
}

.sdds-message-single {
  font-family: "Scania Sans Semi Condensed", arial, helvetica, sans-serif;
  font-weight: bold;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.01em;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  max-width: 486px;
}

.sdds-message-extended {
  font-family: "Scania Sans Semi Condensed", "Scania Sans Condensed", arial, helvetica, sans-serif;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.01em;
  margin-top: 4px !important;
  margin-bottom: 0 !important;
  max-width: 486px;
}

.sdds-message::before {
  content: " ";
  display: block;
  position: absolute;
  width: 4px;
  left: 0;
  top: 0;
  bottom: 0;
  background-color: var(--sdds-information);
}

.sdds-message-icon {
  height: 20px;
  width: 20px;
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.sdds-message-icon path {
  fill: var(--sdds-information);
}

.sdds-message__icon-active {
  padding: 18px 32px 18px 20px;
}

.sdds-message__icon-active .sdds-message-single,
.sdds-message__icon-active .sdds-message-extended {
  padding-left: 36px;
}

.sdds-message__extended-active .sdds-message-icon {
  top: 16px;
  left: 20px;
  transform: translateY(0%);
}

.sdds-message-minimal {
  background-color: transparent !important;
}

.sdds-message-minimal::before {
  display: none;
}

.sdds-message-minimal .sdds-message-single {
  font-family: "Scania Sans Semi Condensed", "Scania Sans Condensed", arial, helvetica, sans-serif;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.01em;
  font-weight: normal;
  padding-left: 8px;
}

.sdds-message-minimal .sdds-message-icon {
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.sdds-message__type-informative {
  color: var(--sdds-grey-958);
  background-color: var(--sdds-grey-50);
}

.sdds-message__type-informative.sdds-message-ongrey {
  background-color: var(--sdds-white);
}

.sdds-message__type-informative::before {
  background-color: var(--sdds-information);
}

.sdds-message__type-informative .sdds-message-icon {
  display: none;
}

.sdds-message__type-informative .sdds-message-icon--informative {
  display: block;
}

.sdds-message__type-informative .sdds-message-icon path {
  fill: var(--sdds-information);
}

.sdds-message__type-error {
  color: var(--sdds-grey-958);
  background-color: var(--sdds-red-50);
}

.sdds-message__type-error::before {
  background-color: var(--sdds-negative);
}

.sdds-message__type-error .sdds-message-icon {
  display: none;
}

.sdds-message__type-error .sdds-message-icon--error {
  display: block;
}

.sdds-message__type-error .sdds-message-icon path {
  fill: var(--sdds-negative);
}

.sdds-message__type-warning {
  color: var(--sdds-grey-958);
  background-color: var(--sdds-grey-50);
}

.sdds-message__type-warning.sdds-message-ongrey {
  background-color: var(--sdds-white);
}

.sdds-message__type-warning::before {
  background-color: var(--sdds-warning);
}

.sdds-message__type-warning .sdds-message-icon {
  display: none;
}

.sdds-message__type-warning .sdds-message-icon--warning {
  display: block;
}

.sdds-message__type-warning .sdds-message-icon path {
  fill: var(--sdds-warning);
}

.sdds-message__type-success {
  color: var(--sdds-grey-958);
  background-color: var(--sdds-grey-50);
}

.sdds-message__type-success.sdds-message-ongrey {
  background-color: var(--sdds-white);
}

.sdds-message__type-success::before {
  background-color: var(--sdds-positive);
}

.sdds-message__type-success .sdds-message-icon {
  display: none;
}

.sdds-message__type-success .sdds-message-icon--success {
  display: block;
}

.sdds-message__type-success .sdds-message-icon path {
  fill: var(--sdds-positive);
}