:root {
  /*****************************************************************
  ** W.I.P. THEME'ING                                             **
  ** THESE CSS VARIABLES ARE SHARED AMONG LIGHT AND DARK MODE     **
  ** DARK MODE AND LIGHT MODE USES THESE VARIABLES, SO CHANGING   **
  ** THEM, MIGHT IMPACT BOTH MODES. DO NOT CHANGE UNLESS YOU KNOW **
  ** WHAT YOU ARE DOING.                                          **
  *****************************************************************/
  --forest-50: #e8f7f8;
  --forest-75: #b0e4e8;
  --forest-100: #92d8dd;
  --forest-200: #67c8d0;
  --forest-300: #32a0a9;
  --forest-400: #007a84;
  --forest-500: #045b62;
  --purple-50: #f3ecf9;
  --purple-75: #ddc9ed;
  --purple-100: #c7a7e2;
  --purple-200: #b388d8;
  --purple-300: #985dcb;
  --purple-400: #6b2f9f;
  --purple-500: #542c77;
  --green-50: #e3f2e5;
  --green-75: #c4e3c7;
  --green-100: #acd7af;
  --green-200: #6eb973;
  --green-300: #3eac44;
  --green-400: #00844d;
  --green-500: #04623b;
  --blue-50: #e3e9f7;
  --blue-75: #c7d2ef;
  --blue-100: #b4c2e9;
  --blue-150: #9db8ef;
  --blue-200: #889fdd;
  --blue-300: #5575ce;
  --blue-325: #3694ff;
  --blue-350: #3654ab;
  --blue-400: #1a42b2;
  --blue-500: #1b3888;
  --blue-700: #4e505e;
  --pink-400: #ffc0cb;
  --pink-700: #ef5f71;
  --red-50: #ffece5;
  --red-75: #f0bead;
  --red-100: #eaa28a;
  --red-200: #e3805f;
  --red-250: #ff7c69;
  --red-300: #e34e1c;
  --red-400: #c72800;
  --red-500: #a82605;
  --orange-200: #faad14;
  --orange-300: #ff9181;
  --orange-400: #ff7c69;
  --orange-500: #ff715c;
  --yellow-50: #fcebca;
  --yellow-75: #f8d081;
  --yellow-100: #f8d081;
  --yellow-200: #f6be51;
  --yellow-300: #ffa800;
  --yellow-400: #ec9c00;
  --yellow-500: #bb7907;
  --yellow-600: #9E6800;
  --neutral-10: #fafbfb;
  --neutral-20: #f5f7f7;
  --neutral-30: #ebeef0;
  --neutral-40: #dee3e6;
  --neutral-50: #bfc9ce;
  --neutral-60: #b0bcc2;
  --neutral-70: #a3b1b8;
  --neutral-80: #94a5ad;
  --neutral-90: #8598a1;
  --neutral-100: #758b95;
  --neutral-200: #667e89;
  --neutral-300: #57717e;
  --neutral-400: #4a6674;
  --neutral-500: #3b5a68;
  --neutral-600: #2e4f5e;
  --neutral-700: #1c4050;
  --neutral-800: #0d3345;
  --neutral-900: #00283b;
  --dark-10: #fafafa;
  --dark-20: #f6f6f6;
  --dark-30: #ececec;
  --dark-40: #e0e0e0;
  --dark-50: #c3c3c3;
  --dark-60: #b6b6b6;
  --dark-70: #a9a9a9;
  --dark-80: #9c9c9c;
  --dark-90: #8e8e8e;
  --dark-100: #7f7f7f;
  --dark-200: #717171;
  --dark-300: #636363;
  --dark-400: #575757;
  --dark-500: #494949;
  --dark-600: #3d3d3d;
  --dark-700: #2c2c2c;
  --dark-800: #1e1e1e;
  --dark-900: #121212;
  --black: #000000;
  --white: #ffffff;

  --typography-h900-font-size: 32px;
  --typography-h900-line-height: 38px;
  --typography-h900-font-weight: 600;

  --typography-h800-font-size: 26px;
  --typography-h800-line-height: 32px;
  --typography-h800-font-weight: 500;

  --typography-h700-font-size: 16px;
  --typography-h700-line-height: 24px;
  --typography-h700-font-weight: 600;

  --typography-h600-font-size: 18px;
  --typography-h600-line-height: 24px;
  --typography-h600-font-weight: 500;

  --typography-h500-font-size: 16px;
  --typography-h500-line-height: 22px;
  --typography-h500-font-weight: 500;

  --typography-h400-font-size: 14px;
  --typography-h400-line-height: 21px;
  --typography-h400-font-weight: 600;

  --typography-h300-font-size: 12px;
  --typography-h300-line-height: 18px;
  --typography-h300-font-weight: 600;

  --typography-h200-font-size: 12px;
  --typography-h200-line-height: 16px;
  --typography-h200-font-weight: 400;

  --typography-h200-semi-font-size: 12px;
  --typography-h200-semi-line-height: 16px;
  --typography-h200-semi-font-weight: 600;

  --typography-h100-font-size: 11px;
  --typography-h100-line-height: 18px;
  --typography-h100-font-weight: 600;

  --typography-ui-font-size: 14px;
  --typography-ui-line-height: 20px;
  --typography-ui-font-weight: 400;

  --typography-ui-medium-font-size: 14px;
  --typography-ui-medium-line-height: 20px;
  --typography-ui-medium-font-weight: 500;

  --typography-ui-semi-font-size: 14px;
  --typography-ui-semi-line-height: 20px;
  --typography-ui-semi-font-weight: 600;

  --typography-ui-bold-font-size: 14px;
  --typography-ui-bold-line-height: 20px;
  --typography-ui-bold-font-weight: 800;

  --typography-paragraph-font-size: 14px;
  --typography-paragraph-line-height: 20px;
  --typography-paragraph-font-weight: 400;

  --typography-small-font-size: 13px;
  --typography-small-line-height: 16px;
  --typography-small-font-weight: 400;

  --typography-link-font-size: 14px;
  --typography-link-line-height: 20px;
  --typography-link-font-weight: 500;

  --typography-input-font-size: 14px;
  --typography-input-line-height: 32px;
  --typography-input-font-weight: 400;

  --font-family: Muli, sans-serif;

  --border-radius-xs: 4px;
  --border-radius-s: 6px;
  --border-radius-m: 8px;

  --sidebar-logo-url: '';
  --topbar-logo-url: '';
}

:root {
  /*****************************************************************
  ** W.I.P. THEME'ING                                             **
  ** LIGHT MODE VARIABLES, PRIMARLY POINTING TO SHARED VARIABLES. **
  ** DO NOT CHANGE ANYTHING UNLESS YOU KNOW WHAT YOU ARE DOING.   **
  *****************************************************************/
  --box-shadow-xs: 0px 1px 1px rgba(0, 40, 59, 0.25), 0px 0px 1px rgba(0, 40, 59, 0.31);
  --box-shadow-s: 0px 3px 5px rgba(0, 40, 59, 0.2), 0px 0px 1px rgba(0, 40, 59, 0.31);
  --box-shadow-m: 0px 8px 12px rgba(0, 40, 59, 0.15), 0px 0px 1px rgba(0, 40, 59, 0.31);
  --box-shadow-l: 0px 10px 18px rgba(0, 40, 59, 0.15), 0px 0px 1px rgba(0, 40, 59, 0.31);
  --box-shadow-xl: 0px 18px 28px rgba(0, 40, 59, 0.15), 0px 0px 1px rgba(0, 40, 59, 0.31);

   --size-xs: 13px;
   --size-sm: 16px;
   --size-md: 24px;
   --size-lg: 30px;
   /* Size used on modals where it can't be fixed, since it should adapt based on text length
   --size-xl: 75px; */
   --size-xxl: 120px;
   --size-xxxl: 200px;

  --text-color-primary: var(--neutral-900);
  --text-color-secondary: var(--neutral-300);
  --text-color-forest: var(--forest-400);
  --text-color-blue: var(--blue-400);
  --text-color-green: var(--green-400);
  --text-color-yellow: var(--yellow-500);
  --text-color-red: var(--red-400);
  --text-color-tertiary: var(--neutral-500);

  --primary-main: var(--forest-400);
  --primary-light: var(--forest-300);
  --primary-dark: var(--forest-500);
  --primary-contrast-text: var(--white);

  --secondary-main: var(--white);
  --secondary-light: var(--neutral-30);
  --secondary-dark: var(--neutral-50);
  --secondary-contrast-text: var(--neutral-900);

  --accent-main: var(--purple-400);
  --accent-light: var(--purple-300);
  --accent-dark: var(--purple-500);
  --accent-contrast-text: var(--white);

  --success-main: var(--green-400);
  --success-light: var(--green-300);
  --success-dark: var(--green-500);
  --success-contrast-text: var(--white);

  --info-main: var(--blue-400);
  --info-light: var(--blue-300);
  --info-dark: var(--blue-500);
  --info-contrast-text: var(--white);

  --error-main: var(--red-400);
  --error-light: var(--red-300);
  --error-dark: var(--red-500);
  --error-contrast-text: var(--white);

  --warning-main: var(--yellow-400);
  --warning-light: var(--yellow-300);
  --warning-dark: var(--yellow-500);
  --warning-contrast-text: var(--black);

  /* --ui-main: var(--neutral-100); */
  --ui-main: #d6d6d6; /* Legacy color, shoul be replaced eventually */
  --ui-light: var(--neutral-50);
  --ui-dark: var(--neutral-300);

  --background-container: var(--white);
  --modal-overlay: rgba(0, 0, 0, 0.4);
  --divider-color: var(--neutral-40);

  /* Custom widget theming below*/

  --bg-common-transparent: var(--transparent);
  --bg-common-default: var(--neutral-20);
  --bg-common-higher: var(--neutral-900);
  --bg-common-high: var(--neutral-300);
  --bg-common-low: var(--neutral-40);
  --bg-common-lower: var(--white);
  --bg-common-tertiary: var(--neutral-30);

  --border-common-transparent: var(--transparent);
  --border-common-default: var(--neutral-40);
  --border-common-higher: var(--neutral-600);
  --border-common-high: var(--neutral-300);
  --border-common-low: var(--neutral-100);
  --border-common-lower: var(--neutral-50);

  --border-primary-default: var(--forest-400);
  --border-primary-higher: var(--forest-500);
  --border-primary-high: var(--forest-300);
  --border-primary-low: var(--forest-75);
  --border-primary-lower: var(--forest-50);

  --border-secondary-default: var(--neutral-600);
  --border-secondary-higher: var(--neutral-900);
  --border-secondary-high: var(--neutral-300);
  --border-secondary-low: var(--neutral-70);
  --border-secondary-lower: var(--neutral-30);

  --border-tertiary-default: var(--purple-400);
  --border-tertiary-higher: var(--purple-500);
  --border-tertiary-high: var(--purple-300);
  --border-tertiary-low: var(--purple-75);
  --border-tertiary-lower: var(--purple-50);

  --border-inverse-lower: var(--dark-50);

  --border-danger-default: var(--red-400);
  --border-danger-higher: var(--red-500);
  --border-danger-high: var(--red-300);
  --border-danger-low: var(--red-75);
  --border-danger-lower: var(--red-50);

  --border-success-default: var(--green-400);
  --border-success-higher: var(--green-500);
  --border-success-high: var(--green-300);
  --border-success-low: var(--green-75);
  --border-success-lower: var(--green-50);

  --border-info-default: var(--blue-400);
  --border-info-higher: var(--blue-500);
  --border-info-high: var(--blue-300);
  --border-info-low: var(--blue-75);
  --border-info-lower: var(--blue-50);

  --border-warning-default: var(--yellow-500);
  --border-warning-higher: var(--yellow-600);
  --border-warning-high: var(--yellow-300);
  --border-warning-low: var(--yellow-75);
  --border-warning-lower: var(--yellow-50);

  --border-static-dark: var(--black);

  --fg-common-default: var(--neutral-900);
  --fg-common-higher: var(--neutral-600);
  --fg-common-high: var(--neutral-300);
  --fg-common-low: var(--neutral-100);
  --fg-common-lower: var(--neutral-50);
  --fg-common-inverse: var(--white);

  --fg-inverse-high: var(--white);
  --fg-inverse-medium: var(--neutral-50);
  --fg-inverse-low: var(--neutral-100);

  --fg-static-dark: var(--neutral-900);
  --fg-static-light: var(--white);

  --fg-primary-default: var(--forest-400);
  --fg-primary-higher: var(--forest-500);
  --fg-primary-high: var(--forest-300);
  --fg-primary-low: var(--forest-75);
  --fg-primary-lower: var(--forest-50);
  --fg-primary-inverse: var(--white);

  --fg-secondary-default: var(--neutral-600);
  --fg-secondary-higher: var(--neutral-900);
  --fg-secondary-high: var(--neutral-300);
  --fg-secondary-low: var(--neutral-70);
  --fg-secondary-lower: var(--neutral-30);
  --fg-secondary-inverse: var(--neutral-900);
  --fg-secondary-tertiary: var(--neutral-500);

  --fg-tertiary-default: var(--purple-400);
  --fg-tertiary-higher: var(--purple-500);
  --fg-tertiary-high: var(--purple-300);
  --fg-tertiary-low: var(--purple-75);
  --fg-tertiary-lower: var(--purple-50);
  --fg-tertiary-inverse: var(--white);

  --fg-danger-default: var(--red-400);
  --fg-danger-higher: var(--red-500);
  --fg-danger-high: var(--red-300);
  --fg-danger-low: var(--red-75);
  --fg-danger-lower: var(--red-50);
  --fg-danger-inverse: var(--white);

  --fg-success-default: var(--green-400);
  --fg-success-higher: var(--green-500);
  --fg-success-high: var(--green-300);
  --fg-success-low: var(--green-75);
  --fg-success-lower: var(--green-50);
  --fg-success-inverse: var(--white);

  --fg-info-default: var(--blue-400);
  --fg-info-higher: var(--blue-500);
  --fg-info-high: var(--blue-300);
  --fg-info-low: var(--blue-75);
  --fg-info-lower: var(--blue-50);
  --fg-info-inverse: var(--white);
  --fg-info-tertiary: var(--blue-700);

  --fg-warning-default: var(--yellow-400);
  --fg-warning-higher: var(--yellow-600);
  --fg-warning-high: var(--yellow-300);
  --fg-warning-low: var(--yellow-75);
  --fg-warning-lower: var(--yellow-50);
  --fg-warning-inverse: var(--neutral-900);

  --bg-inverse-high: var(--neutral-900);
  --bg-inverse-medium: var(--neutral-600);
  --bg-inverse-low: var(--neutral-300);

  --bg-static-dark: var(--neutral-900);
  --bg-static-light: var(--white);

  --bg-primary-default: var(--forest-400);
  --bg-primary-higher: var(--forest-500);
  --bg-primary-high: var(--forest-300);
  --bg-primary-low: var(--forest-75);
  --bg-primary-lower: var(--forest-50);

  --bg-secondary-default: var(--neutral-30);
  --bg-secondary-higher: var(--neutral-50);
  --bg-secondary-high: var(--neutral-40);
  --bg-secondary-low: var(--neutral-20);
  --bg-secondary-lower: var(--neutral-10);

  --bg-static-high: var(--neutral-70);
  --bg-static-dark: var(--black);

  --bg-tertiary-default: var(--purple-400);
  --bg-tertiary-higher: var(--purple-500);
  --bg-tertiary-high: var(--purple-300);
  --bg-tertiary-low: var(--purple-75);
  --bg-tertiary-lower: var(--purple-50);

  --bg-quaternary-default: var(--neutral-30);
  --bg-quaternary-higher: var(--neutral-500);
  --bg-quaternary-high: var(--primary-main, --neutral-300);
  --bg-quaternary-low: var(--neutral-75);
  --bg-quaternary-lower: var(--neutral-20);

  --bg-danger-default: var(--red-400);
  --bg-danger-higher: var(--red-500);
  --bg-danger-high: var(--red-300);
  --bg-danger-low: var(--red-75);
  --bg-danger-lower: var(--red-50);

  --bg-success-default: var(--green-400);
  --bg-success-higher: var(--green-500);
  --bg-success-high: var(--green-300);
  --bg-success-low: var(--green-75);
  --bg-success-lower: var(--green-50);

  --bg-info-default: var(--blue-400);
  --bg-info-higher: var(--blue-500);
  --bg-info-high: var(--blue-300);
  --bg-info-low: var(--blue-75);
  --bg-info-lower: var(--blue-50);

  --bg-warning-default: var(--yellow-400);
  --bg-warning-higher: var(--yellow-500);
  --bg-warning-high: var(--yellow-300);
  --bg-warning-low: var(--yellow-75);
  --bg-warning-lower: var(--yellow-50);

  --elevation-1: 0px 1px 1px 0px rgba(0, 40, 59, 0.25), 0px 0px 1px 0px rgba(0, 40, 59, 0.31);
  --elevation-2: 0px 3px 5px 0px rgba(0, 40, 59, 0.2), 0px 0px 1px 0px rgba(0, 40, 59, 0.31);
  --elevation-4: 0px 10px 18px 0px rgba(0, 40, 59, 0.15), 0px 0px 1px 0px rgba(0, 40, 59, 0.31);
}

:root.dark {
  /*****************************************************************
  ** W.I.P. THEME'ING                                             **
  ** DARK MODE VARIABLES, PRIMARLY POINTING TO SHARED VARIABLES.  **
  ** DO NOT CHANGE ANYTHING UNLESS YOU KNOW WHAT YOU ARE DOING.   **
  *****************************************************************/
  --box-shadow-xs: 0px 1px 1px rgba(0, 0, 0, 0.25), 0px 0px 1px rgba(0, 0, 0, 0.31);
  --box-shadow-s: 0px 3px 5px rgba(0, 0, 0, 0.2), 0px 0px 1px rgba(0, 0, 0, 0.31);
  --box-shadow-m: 0px 8px 12px rgba(0, 0, 0, 0.15), 0px 0px 1px rgba(0, 0, 0, 0.31);
  --box-shadow-l: 0px 10px 18px rgba(0, 0, 0, 0.15), 0px 0px 1px rgba(0, 0, 0, 0.31);
  --box-shadow-xl: 0px 18px 28px rgba(0, 0, 0, 0.15), 0px 0px 1px rgba(0, 0, 0, 0.31);

  --text-color-primary: var(--dark-10);
  --text-color-secondary: var(--dark-50);
  --text-color-forest: var(--forest-200);
  --text-color-blue: var(--blue-200);
  --text-color-green: var(--green-200);
  --text-color-yellow: var(--yellow-200);
  --text-color-red: var(--red-200);

  --primary-main: var(--forest-400);
  --primary-light: var(--forest-300);
  --primary-dark: var(--forest-500);
  --primary-contrast-text: var(--white);

  --bg-primary-default: var(--forest-400);
  --bg-common-lower: var(--dark-700);
  --bg-static-light: var(--dark-800);
  --border-common-low: var(--dark-500);
  --bg-secondary-higher: var(--dark-300);

  --fg-inverse-high: var(--dark-10);

  --secondary-main: var(--dark-500);
  --secondary-light: var(--dark-400);
  --secondary-dark: var(--dark-600);
  --secondary-contrast-text: var(--dark-10);
  
  --accent-main: var(--purple-400);
  --accent-light: var(--purple-300);
  --accent-dark: var(--purple-500);
  --accent-contrast-text: var(--white);
  
  --success-main: var(--green-400);
  --success-light: var(--green-300);
  --success-dark: var(--green-500);
  --success-contrast-text: var(--white);
  
  --info-main: var(--blue-400);
  --info-light: var(--blue-300);
  --info-dark: var(--blue-500);
  --info-contrast-text: var(--white);
  
  --error-main: var(--red-400);
  --error-light: var(--red-300);
  --error-dark: var(--red-500);
  --error-contrast-text: var(--white);
  
  --warning-main: var(--yellow-400);
  --warning-light: var(--yellow-300);
  --warning-dark: var(--yellow-500);
  --warning-contrast-text: var(--black);

  --ui-main: var(--dark-100);
  --ui-light: var(--dark-50);
  --ui-dark: var(--dark-300);

  --background-container: var(--dark-700);
  --modal-overlay: rgba(0, 0, 0, .5);
  --divider-color: var(--dark-500)
}

.typography-h900 {
  font-size: var(--typography-h900-font-size);
  font-weight: var(--typography-h900-font-weight);
  line-height: var(--typography-h900-line-height);
}
.typography-h800 {
  font-size: var(--typography-h800-font-size);
  font-weight: var(--typography-h800-font-weight);
  line-height: var(--typography-h800-line-height);
}
.typography-h700 {
  font-size: var(--typography-h700-font-size);
  font-weight: var(--typography-h700-font-weight);
  line-height: var(--typography-h700-line-height);
}
.typography-h600 {
  font-size: var(--typography-h600-font-size);
  font-weight: var(--typography-h600-font-weight);
  line-height: var(--typography-h600-line-height);
}
.typography-h500 {
  font-size: var(--typography-h500-font-size);
  font-weight: var(--typography-h500-font-weight);
  line-height: var(--typography-h500-line-height);
}
.typography-h400 {
  font-size: var(--typography-h400-font-size);
  font-weight: var(--typography-h400-font-weight);
  line-height: var(--typography-h400-line-height);
}
.typography-h300 {
  font-size: var(--typography-h300-font-size);
  font-weight: var(--typography-h300-font-weight);
  line-height: var(--typography-h300-line-height);
}
.typography-h200 {
  font-size: var(--typography-h200-font-size);
  font-weight: var(--typography-h200-font-weight);
  line-height: var(--typography-h200-line-height);
}
.typography-h200-semi {
  font-size: var(--typography-h200-semi-font-size);
  font-weight: var(--typography-h200-semi-font-weight);
  line-height: var(--typography-h200-semi-line-height);
}
.typography-h100 {
  font-size: var(--typography-h100-font-size);
  font-weight: var(--typography-h100-font-weight);
  line-height: var(--typography-h100-line-height);
}
.typography-ui {
  font-size: var(--typography-ui-font-size);
  font-weight: var(--typography-ui-font-weight);
  line-height: var(--typography-ui-line-height);
}
.typography-ui-medium {
  font-size: var(--typography-ui-medium-font-size);
  font-weight: var(--typography-ui-medium-font-weight);
  line-height: var(--typography-ui-medium-line-height);
}
.typography-ui-semi {
  font-size: var(--typography-ui-semi-font-size);
  font-weight: var(--typography-ui-semi-font-weight);
  line-height: var(--typography-ui-semi-line-height);
}
.typography-paragraph {
  font-size: var(--typography-paragraph-font-size);
  font-weight: var(--typography-paragraph-font-weight);
  line-height: var(--typography-paragraph-line-height);
}
.typography-small {
  font-size: var(--typography-small-font-size);
  font-weight: var(--typography-small-font-weight);
  line-height: var(--typography-small-line-height);
}
.typography-link {
  font-size: var(--typography-link-font-size);
  font-weight: var(--typography-link-font-weight);
  line-height: var(--typography-link-line-height);
  color: var(--primary-main);
}
.typography-link:hover {
  color: var(--primary-dark);
}

/** DEPRECATED THEME'ING BELOW **/
/*******************************/
:root {
  --grey-10: var(--dark-10);
  --grey-20: var(--dark-20);
  --grey-30: var(--dark-30);
  --grey-40: var(--dark-40);
  --grey-50: var(--dark-50);
  --grey-60: var(--dark-60);
  --grey-70: var(--dark-70);
  --grey-80: var(--dark-80);
  --grey-90: var(--dark-90);
  --grey-100: var(--dark-100);
  --grey-200: var(--dark-200);
  --grey-300: var(--dark-300);
  --grey-400: var(--dark-400);
  --grey-500: var(--dark-500);
  --grey-600: var(--dark-600);
  --grey-700: var(--dark-700);
  --grey-800: var(--dark-800);
  --grey-900: var(--dark-900);

  --d-input-placeholder-color: inherit;
  --d-input-color: inherit;
  --d-input-disabled-color: inherit;
  --d-input-disabled-background-color: inherit;
  --d-input-field-label-color: inherit;

  --d-input-placeholder-color: #000000;
  --d-input-color: #000000;
  --d-input-disabled-color: #000000;
  --d-input-disabled-background-color: inherit;
  --d-input-field-label-color: #000000;

  --tia-primary-button-bg-color: var(--primary-main);
  --primary-button-color-hover: var(--primary-light);
  --primary-button-activecolor-background: var(--primary-dark);
  --primary-button-focus-border-color: var(--primary-dark);

  --tertiary-button-font-color: var(--primary-main);
  --tertiary-button-border-color-hover: var(--primary-light);
  --tertiary-button-font-color-hover: var(--primary-light);
  --tertiary-button-border-color-focus: var(--primary-dark);
  --tertiary-button-font-color-focus: var(--primary-dark);
  --tertiary-button-color: var(--white);
  --tertiary-button-color-hover: var(--white);
  --tertiary-button-box-shadow: var(--box-shadow-xs);

  --minimal-button-font-color: var(--primary-main);

  --ds-basket-color-basket-icons: var(--primary-main);

  --tia-color-primary: var(--primary-main);
  --fourthiary-button-font-color: var(--primary-main);
  --fourthiary-button-border-color-focus: var(--primary-main);
  --tia-icon-third-color: var(--primary-main);

  --ds-basket-color-basket-info-price: var(--primary-light);
  --ds-basket-color-basket-offer-information-border-active: var(--info-light);

  --d-toggle-background-active-color: var(--primary-main);
  --d-toggle-disabled-active-background-color: #37767ca9;

  --ds-basket-border-input-modal-focus: var(--info-light);

  --ds-basket-color-opportunity-basket-dropdown-background-on-hover: var(--grey-20);

  --ds-basket-color-basket-checkbox-checked: var(--primary-main);
  --ds-basket-color-opportunity-basket-quote-dropdown-background-on-hover: var(--grey-20);

  --ds-basket-font-family-modal: var(--font-family);
  --ds-basket-background-color-modal: var(--background-container);
  --ds-basket-color-text-modal-title: var(--text-color-primary);
  --ds-basket-color-text-modal-content: var(--text-color-primary);
  --ds-basket-font-weight-modal-content: var(--typography-paragraph-font-weight);
  --ds-basket-font-size-modal-content: var(--typography-paragraph-font-size);
  --ds-basket-text-color-cancel-button-modal: var(--secondary-contrast-text);
  --ds-basket-color-cancel-button-modal: var(--secondary-main);
  --ds-basket-border-color-cancel-button-modal: none;
  --ds-basket-text-color-button-modal-hover: var(--primary-light);
  --ds-basket-color-button-modal-hover: var(--secondary-main);
  --ds-basket-border-color-button-modal-hover: var(--primary-light);
  --ds-basket-color-submit-button-modal: var(--primary-main);
  --ds-basket-border-color-submit-button-modal: none;
  --ds-basket-color-button-primary-modal-hover: var(--primary-light);
  --ds-basket-border-color-button-primary-modal-hover: none;
  --ds-basket-text-color-input-modal: var(--text-color-secondary);
  --ds-basket-background-input-modal-hover: none;
  --ds-basket-background-input-modal-focus: none;
  --ds-basket-border-input-modal-focus: var(--primary-light);
  --ds-basket-font-weight-modal-title: var(--typography-h700-font-weight);
  --ds-basket-font-size-modal-title: var(--typography-h700-font-size);
  --ds-basker-font-weight-button-modal: var(--typography-input-font-weight);
  --ds-basket-height-button-modal: var(--typography-input-line-height);
  --ds-basket-font-size-button-modal: var(--typography-input-font-size);
  --ds-basket-font-size-input-text-modal: var(--typography-input-font-size);
}

div[data-radix-popper-content-wrapper] {
  z-index: 50 !important;
}