/* CSS Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
/* Remove default body margin */
body {
  margin: 0;
  font-family: sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Remove default styling for lists */
ul,
ol {
  list-style: none;
}
/* Remove default text decoration */
a {
  text-decoration: none;
  color: inherit;
}
/* Remove default styling for images */
img {
  max-width: 100%;
  display: block;
  height: auto;
}
/* Remove default form element styling */
button,
input,
textarea,
select {
  font: inherit;
  margin: 0;
  border: none;
  background: none;
  color: inherit;
}
/* Remove default button appearance */
button {
  cursor: pointer;
  background-color: transparent;
}
/* Set default HTML and body height */
html,
body {
  height: 100%;
}
/* Ensure tables don't have unexpected borders and spacing */
table {
  border-collapse: collapse;
  border-spacing: 0;
}
/* Reset heading and paragraph margins */
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}
/*******************************/
/*** Netz variables ***/
/*****************************/
/* Breakpoints */
:root {
  --spacings-50-a-xxx-large: 96px;
  --spacings-50-a-xx-large: 64px;
  --spacings-50-a-x-large: 48px;
  --spacings-50-a-large: 32px;
  --spacings-50-a-medium-plus: 24px;
  --spacings-75-b-xxx-large: 144px;
  --spacings-50-a-medium: 16px;
  --spacings-75-b-xx-large: 96px;
  --spacings-50-a-small: 12px;
  --spacings-50-a-x-small-plus: 10px;
  --spacings-75-b-x-large: 72px;
  --spacings-50-a-x-small: 8px;
  --spacings-50-a-xx-small: 6px;
  --spacings-50-a-xxx-small: 4px;
  --spacings-75-b-large: 48px;
  --spacings-75-b-medium-plus: 36px;
  --spacings-75-b-medium: 24px;
  --spacings-75-b-small: 18px;
  --spacings-75-b-x-small-plus: 15px;
  --spacings-75-b-x-small: 12px;
  --spacings-75-b-xx-small: 9px;
  --spacings-75-b-xxx-small: 6px;
  --spacings-100-c-xxx-large: 192px;
  --spacings-100-c-xx-large: 128px;
  --spacings-100-c-x-large: 96px;
  --spacings-100-c-large: 64px;
  --spacings-100-c-medium-plus: 48px;
  --spacings-100-c-medium: 32px;
  --spacings-100-c-small: 24px;
  --spacings-100-c-x-small-plus: 20px;
  --spacings-100-c-x-small: 16px;
  --spacings-100-c-xx-small: 12px;
  --spacings-100-c-xxx-small: 8px;
  --spacings-100-c-xxxx-small: 4px;
  --typography-headline-h1: 31px;
  --button-typography-large: 20px;
  --grid-width: 0px;
  --components-gap-section-vertical: var(--spacings-75-b-large);
  --components-maxwidth-_text: 320px;
  --components-maxwidth-_component-default: 320px;
  --components-maxwidth-_component-narrow: 320px;
  --components-maxwidth-_component-wide: 320px;
  --components-gap-section-vertical-narrow: var(--spacings-75-b-medium-plus);
  --components-gap-section-horizontal: var(--spacings-75-b-large);
  --components-gap-section-padding: var(--spacings-50-a-xx-large);
  --components-gap-section-padding-narrow: var(--spacings-50-a-large);
  --components-gap-elements-row: var(--spacings-100-c-x-small);
  --components-gap-elements-row-narrow: var(--spacings-100-c-xx-small);
  --components-gap-elements-row-seperator: var(--spacings-75-b-large);
  --components-gap-elements-row-seperator-narrow: var(--spacings-75-b-medium);
  --components-gap-inner-elements: var(--spacings-75-b-medium);
  --components-gap-box-padding-vertical: var(--spacings-75-b-large);
  --components-gap-box-padding-horizontal: var(--spacings-50-a-medium-plus);
  --elements-large-corner-radius: 16px;
  --elements-default-corner-radius: 8px;
  --elements-small-corner-radius: 4px;
  --elements-inner-corner-radius: 2px;
  --forms-large-cornerradius: 8px;
  --forms-default-cornerradius: 6px;
  --elements-corner-radius-padding: 2px;
  --elements-image-corner-radius: 8px;
  --grid-gutter: 16px;
  --grid-margin: 20px;
  --button-typography-default: 16px;
  --button-typography-small: 13px;
  --button-typography-large-lineheight: 28px;
  --button-typography-default-lineheight: 24px;
  --button-typography-small-lineheight: 20px;
  --button-typography-large-letterspacing: 0px;
  --button-typography-default-letterspacing: 0px;
  --button-typography-small-letterspacing: 0px;
  --button-large-minwidth: 128px;
  --button-default-minwidth: 96px;
  --button-small-minwidth: 64px;
  --button-large-padding-horizontal: 32px;
  --button-default-padding-horizontal: 24px;
  --button-small-padding-horizontal: 16px;
  --button-large-padding-vertical: 8px;
  --button-default-padding-vertical: 6px;
  --button-small-padding-vertical: 4px;
  --button-large-gap: 12px;
  --button-default-gap: 8px;
  --button-small-gap: 4px;
  --button-large-cornerradius: 8px;
  --button-default-cornerradius: 6px;
  --button-small-cornerradius: 4px;
  --button-large-size: var(--sizes-large);
  --elements-circle-shape: 256px;
  --button-default-size: var(--sizes-default);
  --button-small-size: var(--sizes-small);
  --elements-large-size: var(--sizes-large);
  --elements-default-size: var(--sizes-default);
  --elements-small-size: var(--sizes-small);
  --typography-headline-h2: 27px;
  --button-circle-button-large-size: var(--sizes-large);
  --button-circle-button-default-size: var(--sizes-default);
  --button-circle-button-small-size: var(--sizes-small);
  --typography-headline-h3: 24px;
  --typography-headline-h4: 21px;
  --typography-headline-h5: 19px;
  --typography-headline-h6: 17px;
  --typography-headline-h1-padding: 24px;
  --typography-headline-h2-padding: 24px;
  --typography-headline-h3-padding: 24px;
  --typography-headline-h4-padding: 24px;
  --typography-headline-h5-padding: 16px;
  --typography-headline-h6-padding: 16px;
  --typography-headline-h1-lineheight: 120%;
  --typography-headline-h2-lineheight: 120%;
  --typography-headline-h3-lineheight: 120%;
  --typography-headline-h4-lineheight: 120%;
  --typography-headline-h5-lineheight: 120%;
  --typography-headline-h6-lineheight: 120%;
  --typography-headline-h1-letterspacing: 0px;
  --typography-headline-h2-letterspacing: 0px;
  --typography-headline-h3-letterspacing: 0px;
  --typography-headline-h4-letterspacing: 0px;
  --typography-headline-h5-letterspacing: 0px;
  --typography-headline-h6-letterspacing: 0px;
  --typography-text-xx-large: 21px;
  --typography-icons-96-responsive: 64px;
  --typography-icons-48-responsive: 32px;
  --typography-icons-40-responsive: 30px;
  --typography-text-x-large: 19px;
  --typography-text-large: 17px;
  --typography-text-medium: 15px;
  --typography-text-small: 13px;
  --typography-text-x-small: 11px;
  --typography-text-p-padding: 16px;
  --typography-text-lineheight: 160%;
  --typography-text-letterspacing: 0px;
  --forms-small-cornerradius: 4px;
  --forms-checkbox-corner-radius: 3px;
  --forms-_offset-large: 4px;
  --forms-_offset-default: 2px;
  --forms-_offset-small: 1px;
  --forms-large-size: var(--sizes-large);
  --forms-default-size: var(--sizes-default);
  --forms-small-size: var(--sizes-small);
  --components-navigation-height: 64px;
  --breakpoint: Mobile;
  --components-numbers-numbers-large: 33px;
  --components-numbers-numbers-default: 27px;
  --components-numbers-numbers-letterspacing: 0px;
  --elements-chips: 32px;
  /* Tablet */
}
@media (min-width: 768px) {
  :root {
    --spacings-50-a-xxx-large: 144px;
    --spacings-50-a-xx-large: 96px;
    --spacings-50-a-x-large: 64px;
    --spacings-50-a-large: 48px;
    --spacings-50-a-medium-plus: 32px;
    --spacings-75-b-xxx-large: 168px;
    --spacings-50-a-medium: 24px;
    --spacings-75-b-xx-large: 112px;
    --spacings-50-a-small: 16px;
    --spacings-50-a-x-small-plus: 15px;
    --spacings-75-b-x-large: 84px;
    --spacings-50-a-x-small: 12px;
    --spacings-50-a-xx-small: 9px;
    --spacings-50-a-xxx-small: 6px;
    --spacings-75-b-large: 56px;
    --spacings-75-b-medium-plus: 42px;
    --spacings-75-b-medium: 28px;
    --spacings-75-b-small: 21px;
    --spacings-75-b-x-small-plus: 17px;
    --spacings-75-b-x-small: 14px;
    --spacings-75-b-xx-small: 10px;
    --spacings-75-b-xxx-small: 7px;
    --spacings-100-c-xxx-large: 192px;
    --spacings-100-c-xx-large: 128px;
    --spacings-100-c-x-large: 96px;
    --spacings-100-c-large: 64px;
    --spacings-100-c-medium-plus: 48px;
    --spacings-100-c-medium: 32px;
    --spacings-100-c-small: 24px;
    --spacings-100-c-x-small-plus: 20px;
    --spacings-100-c-x-small: 16px;
    --spacings-100-c-xx-small: 12px;
    --spacings-100-c-xxx-small: 8px;
    --spacings-100-c-xxxx-small: 4px;
    --typography-headline-h1: 44px;
    --button-typography-large: 21px;
    --grid-width: 0px;
    --components-gap-section-vertical: var(--spacings-75-b-large);
    --components-maxwidth-_text: 884px;
    --components-maxwidth-_component-default: 884px;
    --components-maxwidth-_component-narrow: 730px;
    --components-maxwidth-_component-wide: 884px;
    --components-gap-section-vertical-narrow: var(--spacings-75-b-medium-plus);
    --components-gap-section-horizontal: var(--grid-gutter);
    --components-gap-section-padding: var(--spacings-50-a-xx-large);
    --components-gap-section-padding-narrow: var(--spacings-50-a-large);
    --components-gap-elements-row: var(--spacings-100-c-medium);
    --components-gap-elements-row-narrow: var(--spacings-100-c-xx-small);
    --components-gap-elements-row-seperator: var(--spacings-75-b-large);
    --components-gap-elements-row-seperator-narrow: var(--spacings-75-b-medium-plus);
    --components-gap-inner-elements: var(--grid-gutter);
    --components-gap-box-padding-vertical: var(--spacings-75-b-large);
    --components-gap-box-padding-horizontal: var(--spacings-50-a-medium-plus);
    --elements-large-corner-radius: 18px;
    --elements-default-corner-radius: 12px;
    --elements-small-corner-radius: 4px;
    --elements-inner-corner-radius: 2px;
    --forms-large-cornerradius: 8px;
    --forms-default-cornerradius: 6px;
    --elements-corner-radius-padding: 2px;
    --elements-image-corner-radius: 12px;
    --grid-gutter: 40px;
    --grid-margin: 48px;
    --button-typography-default: 17px;
    --button-typography-small: 14px;
    --button-typography-large-lineheight: 28px;
    --button-typography-default-lineheight: 24px;
    --button-typography-small-lineheight: 20px;
    --button-typography-large-letterspacing: 0px;
    --button-typography-default-letterspacing: 0px;
    --button-typography-small-letterspacing: 0px;
    --button-large-minwidth: 144px;
    --button-default-minwidth: 112px;
    --button-small-minwidth: 80px;
    --button-large-padding-horizontal: 40px;
    --button-default-padding-horizontal: 28px;
    --button-small-padding-horizontal: 20px;
    --button-large-padding-vertical: 8px;
    --button-default-padding-vertical: 6px;
    --button-small-padding-vertical: 4px;
    --button-large-gap: 12px;
    --button-default-gap: 8px;
    --button-small-gap: 4px;
    --button-large-cornerradius: 8px;
    --button-default-cornerradius: 6px;
    --button-small-cornerradius: 4px;
    --button-large-size: var(--sizes-large);
    --elements-circle-shape: 256px;
    --button-default-size: var(--sizes-default);
    --button-small-size: var(--sizes-small);
    --elements-large-size: var(--sizes-large);
    --elements-default-size: var(--sizes-default);
    --elements-small-size: var(--sizes-small);
    --typography-headline-h2: 36px;
    --button-circle-button-large-size: var(--sizes-large);
    --button-circle-button-default-size: var(--sizes-default);
    --button-circle-button-small-size: var(--sizes-small);
    --typography-headline-h3: 30px;
    --typography-headline-h4: 25px;
    --typography-headline-h5: 22px;
    --typography-headline-h6: 19px;
    --typography-headline-h1-padding: 24px;
    --typography-headline-h2-padding: 24px;
    --typography-headline-h3-padding: 24px;
    --typography-headline-h4-padding: 24px;
    --typography-headline-h5-padding: 24px;
    --typography-headline-h6-padding: 16px;
    --typography-headline-h1-lineheight: 120%;
    --typography-headline-h2-lineheight: 120%;
    --typography-headline-h3-lineheight: 120%;
    --typography-headline-h4-lineheight: 120%;
    --typography-headline-h5-lineheight: 120%;
    --typography-headline-h6-lineheight: 120%%;
    --typography-headline-h1-letterspacing: 0px;
    --typography-headline-h2-letterspacing: 0px;
    --typography-headline-h3-letterspacing: 0px;
    --typography-headline-h4-letterspacing: 0px;
    --typography-headline-h5-letterspacing: 0px;
    --typography-headline-h6-letterspacing: 0px;
    --typography-text-xx-large: 25px;
    --typography-icons-96-responsive: 80px;
    --typography-icons-48-responsive: 40px;
    --typography-icons-40-responsive: 35px;
    --typography-text-x-large: 22px;
    --typography-text-large: 19px;
    --typography-text-medium: 16px;
    --typography-text-small: 14px;
    --typography-text-x-small: 12px;
    --typography-text-p-padding: 16px;
    --typography-text-lineheight: 160%;
    --typography-text-letterspacing: 0px;
    --forms-small-cornerradius: 4px;
    --forms-checkbox-corner-radius: 3px;
    --forms-_offset-large: 6px;
    --forms-_offset-default: 3px;
    --forms-_offset-small: 1px;
    --forms-large-size: var(--sizes-large);
    --forms-default-size: var(--sizes-default);
    --forms-small-size: var(--sizes-small);
    --components-navigation-height: 64px;
    --breakpoint: Tablet;
    --components-numbers-numbers-large: 48px;
    --components-numbers-numbers-default: 36px;
    --components-numbers-numbers-letterspacing: 0px;
    --elements-chips: 36px;
  }
}
:root {
  /* Desktop */
}
@media (min-width: 1200px) {
  :root {
    --spacings-50-a-xxx-large: 192px;
    --spacings-50-a-xx-large: 128px;
    --spacings-50-a-x-large: 96px;
    --spacings-50-a-large: 64px;
    --spacings-50-a-medium-plus: 48px;
    --spacings-75-b-xxx-large: 192px;
    --spacings-50-a-medium: 32px;
    --spacings-75-b-xx-large: 128px;
    --spacings-50-a-small: 24px;
    --spacings-50-a-x-small-plus: 20px;
    --spacings-75-b-x-large: 96px;
    --spacings-50-a-x-small: 16px;
    --spacings-50-a-xx-small: 12px;
    --spacings-50-a-xxx-small: 8px;
    --spacings-75-b-large: 64px;
    --spacings-75-b-medium-plus: 48px;
    --spacings-75-b-medium: 32px;
    --spacings-75-b-small: 24px;
    --spacings-75-b-x-small-plus: 20px;
    --spacings-75-b-x-small: 16px;
    --spacings-75-b-xx-small: 12px;
    --spacings-75-b-xxx-small: 8px;
    --spacings-100-c-xxx-large: 192px;
    --spacings-100-c-xx-large: 128px;
    --spacings-100-c-x-large: 96px;
    --spacings-100-c-large: 64px;
    --spacings-100-c-medium-plus: 48px;
    --spacings-100-c-medium: 32px;
    --spacings-100-c-small: 24px;
    --spacings-100-c-x-small-plus: 20px;
    --spacings-100-c-x-small: 16px;
    --spacings-100-c-xx-small: 12px;
    --spacings-100-c-xxx-small: 8px;
    --spacings-100-c-xxxx-small: 4px;
    --typography-headline-h1: 58px;
    --button-typography-large: 21px;
    --grid-width: 56px;
    --components-gap-section-vertical: var(--spacings-75-b-large);
    --components-maxwidth-_text: 1136px;
    --components-maxwidth-_component-default: 1136px;
    --components-maxwidth-_component-narrow: 896px;
    --components-maxwidth-_component-wide: 1376px;
    --components-gap-section-vertical-narrow: var(--spacings-75-b-medium-plus);
    --components-gap-section-horizontal: var(--grid-gutter);
    --components-gap-section-padding: var(--spacings-50-a-xx-large);
    --components-gap-section-padding-narrow: var(--spacings-50-a-large);
    --components-gap-elements-row: var(--spacings-100-c-medium-plus);
    --components-gap-elements-row-narrow: var(--spacings-100-c-x-small);
    --components-gap-elements-row-seperator: var(--spacings-75-b-large);
    --components-gap-elements-row-seperator-narrow: var(--spacings-75-b-medium-plus);
    --components-gap-inner-elements: var(--grid-gutter);
    --components-gap-box-padding-vertical: var(--spacings-75-b-large);
    --components-gap-box-padding-horizontal: var(--spacings-50-a-large);
    --elements-large-corner-radius: 20px;
    --elements-default-corner-radius: 12px;
    --elements-small-corner-radius: 6px;
    --elements-inner-corner-radius: 4px;
    --forms-large-cornerradius: 8px;
    --forms-default-cornerradius: 6px;
    --elements-corner-radius-padding: 2px;
    --elements-image-corner-radius: 12px;
    --grid-gutter: 64px;
    --grid-margin: 64px;
    --button-typography-default: 17px;
    --button-typography-small: 15px;
    --button-typography-large-lineheight: 28px;
    --button-typography-default-lineheight: 24px;
    --button-typography-small-lineheight: 20px;
    --button-typography-large-letterspacing: 0px;
    --button-typography-default-letterspacing: 0px;
    --button-typography-small-letterspacing: 0px;
    --button-large-minwidth: 160px;
    --button-default-minwidth: 128px;
    --button-small-minwidth: 96px;
    --button-large-padding-horizontal: 48px;
    --button-default-padding-horizontal: 32px;
    --button-small-padding-horizontal: 24px;
    --button-large-padding-vertical: 8px;
    --button-default-padding-vertical: 6px;
    --button-small-padding-vertical: 4px;
    --button-large-gap: 12px;
    --button-default-gap: 8px;
    --button-small-gap: 4px;
    --button-large-cornerradius: 8px;
    --button-default-cornerradius: 6px;
    --button-small-cornerradius: 4px;
    --button-large-size: var(--sizes-large);
    --elements-circle-shape: 256px;
    --button-default-size: var(--sizes-default);
    --button-small-size: var(--sizes-small);
    --elements-large-size: var(--sizes-large);
    --elements-default-size: var(--sizes-default);
    --elements-small-size: var(--sizes-small);
    --typography-headline-h2: 46px;
    --button-circle-button-large-size: var(--sizes-large);
    --button-circle-button-default-size: var(--sizes-default);
    --button-circle-button-small-size: var(--sizes-small);
    --typography-headline-h3: 36px;
    --typography-headline-h4: 29px;
    --typography-headline-h5: 25px;
    --typography-headline-h6: 21px;
    --typography-headline-h1-padding: 32px;
    --typography-headline-h2-padding: 24px;
    --typography-headline-h3-padding: 24px;
    --typography-headline-h4-padding: 24px;
    --typography-headline-h5-padding: 24px;
    --typography-headline-h6-padding: 16px;
    --typography-headline-h1-lineheight: 120%;
    --typography-headline-h2-lineheight: 120%;
    --typography-headline-h3-lineheight: 120%;
    --typography-headline-h4-lineheight: 120%;
    --typography-headline-h5-lineheight: 120%;
    --typography-headline-h6-lineheight: 120%;
    --typography-headline-h1-letterspacing: 0px;
    --typography-headline-h2-letterspacing: 0px;
    --typography-headline-h3-letterspacing: 0px;
    --typography-headline-h4-letterspacing: 0px;
    --typography-headline-h5-letterspacing: 0px;
    --typography-headline-h6-letterspacing: 0px;
    --typography-text-xx-large: 29px;
    --typography-icons-96-responsive: 96px;
    --typography-icons-48-responsive: 48px;
    --typography-icons-40-responsive: 40px;
    --typography-text-x-large: 25px;
    --typography-text-large: 21px;
    --typography-text-medium: 17px;
    --typography-text-small: 15px;
    --typography-text-x-small: 13px;
    --typography-text-p-padding: 16px;
    --typography-text-lineheight: 160%;
    --typography-text-letterspacing: 0px;
    --forms-small-cornerradius: 4px;
    --forms-checkbox-corner-radius: 3px;
    --forms-_offset-large: 7px;
    --forms-_offset-default: 3px;
    --forms-_offset-small: 2px;
    --forms-large-size: var(--sizes-large);
    --forms-default-size: var(--sizes-default);
    --forms-small-size: var(--sizes-small);
    --components-navigation-height: 80px;
    --breakpoint: Desktop;
    --components-numbers-numbers-large: 64px;
    --components-numbers-numbers-default: 46px;
    --components-numbers-numbers-letterspacing: 0px;
    --elements-chips: 40px;
  }
}
/* Theme */
:root,
[data-theme=light] {
  --text-style-headline: var(--color-primary-cd-color-4);
  --elements-decoration-color: var(--color-primary-cd-color-1);
  --text-style-headline-secondary: var(--color-primary-cd-color-1);
  --text-style-text-primary: var(--color-primary-cd-color-4);
  --text-style-text-secondary: rgba(112, 112, 112, 1);
  --text-style-link: var(--color-primary-cd-color-2);
  --tables-table-row-uneven: var(--color-transparency-darken-4);
  --tables-header-divider: var(--color-primary-cd-color-3);
  --tables-header-divider-stroke: 2px;
  --tables-table-divider: var(--color-transparency-darken-15);
  --tables-table-divider-stroke: 1px;
  --background-default: var(--color-primary-white);
  --background-alternative: var(--color-gray-scale-100);
  --background-light-box: var(--color-gray-scale-100);
  --background-dark-box: var(--color-primary-cd-color-1);
  --form-style-outline: var(--text-style-text-secondary);
  --form-style-hover-outline: var(--color-gray-scale-600);
  --form-style-stroke-width: 1px;
  --form-style-hover-stroke-width: 2px;
  --form-style-background: var(--color-primary-white);
  --form-style-hover-background: var(--color-primary-white);
  --form-style-focus-outline: var(--interaction-focus);
  --form-style-focus-stroke-width: 2px;
  --form-style-focus-background: var(--color-primary-white);
  --form-style-label: var(--text-style-text-secondary);
  --form-style-placeholder-text: var(--text-style-text-secondary);
  --form-style-help-text: var(--text-style-text-secondary);
  --form-style-hover-placeholder-text: var(--text-style-text-secondary);
  --form-style-focus-placeholder-text: var(--text-style-text-secondary);
  --form-style-filled-text: var(--text-style-text-primary);
  --form-style-hover-filled-text: var(--text-style-text-primary);
  --form-style-focus-filled-text: var(--text-style-text-primary);
  --elements-active-front: var(--color-primary-white);
  --elements-active-back: var(--color-primary-cd-color-1);
  --elements-passive-front: var(--color-transparency-darken-60);
  --elements-passive-back: var(--color-transparency-darken-10);
  --elements-divider-stroke: var(--color-transparency-darken-15);
  --form-style-locked: var(--color-transparency-darken-10);
  --elements-shadow: var(--color-transparency-darken-15);
  --elements-shadow-strong: var(--color-transparency-darken-15);
  --tab-active-outline: var(--color-primary-cd-color-2);
  --tab-active-stroke-width: 2px;
  --interaction-hover: var(--color-transparency-darken-4);
  --interaction-hover-strong: var(--color-transparency-darken-15);
  --interaction-hover-alternative: var(--color-transparency-lighten-10);
  --interaction-hover-alternative-strong: var(--color-transparency-lighten-20);
  --interaction-active: var(--color-secondary-secondary-2);
  --button-style-primary-front: var(--color-primary-white);
  --interaction-focus: var(--color-primary-cd-color-4);
  --button-style-primary-back: var(--color-primary-cd-color-2);
  --button-style-primary-stroke: var(--color-primary-transparent);
  --button-style-primary-stroke-width: 0px;
  --button-style-primary-front-hover: var(--color-primary-white);
  --button-style-primary-back-hover: var(--color-transparency-darken-20);
  --button-style-primary-stroke-hover: var(--color-primary-transparent);
  --button-style-primary-stroke-width-hover: 0px;
  --button-style-secondary-front: var(--color-primary-cd-color-2);
  --button-style-secondary-back: var(--color-primary-transparent);
  --button-style-secondary-stroke: var(--color-primary-cd-color-2);
  --button-style-secondary-stroke-width: 1px;
  --button-style-secondary-front-hover: var(--color-primary-cd-color-2);
  --button-style-secondary-back-hover: var(--color-transparency-darken-5);
  --button-style-secondary-stroke-hover: var(--color-primary-cd-color-2);
  --button-style-secondary-stroke-width-hover: 2px;
  --badges-solid-text: var(--color-primary-white);
  --badges-solid-color: var(--color-primary-cd-color-1);
  --badges-outline-text: var(--color-primary-cd-color-3);
  --badges-outline-stroke: var(--color-primary-cd-color-3);
  --state-success: rgba(26, 128, 0, 1);
  --state-success-background: rgba(26, 128, 0, 0.08);
  --badges-success-text: var(--color-primary-white);
  --badges-success-color: rgba(26, 128, 0, 1);
  --badges-warning-text: var(--text-style-text-primary);
  --state-warning: rgba(191, 121, 0, 1);
  --state-warning-background: rgba(255, 184, 0, 0.08);
  --badges-warning-color: rgba(255, 184, 0, 1);
  --state-error: rgba(192, 11, 0, 1);
  --state-error-background: rgba(192, 11, 0, 0.08);
  --state-info: rgba(77, 163, 255, 1);
  --badges-error-text: var(--color-primary-white);
  --state-info-background: rgba(77, 163, 255, 0.08);
  --badges-error-color: rgba(192, 11, 0, 1);
  --elements-stroke: 1px;
  --elements-stroke-hover: 1px;
  --elements-stroke-active: 2px;
  --elements-stroke-strong: 2px;
  --elements-stroke-strong-hover: 2px;
  --elements-stroke-strong-active: 2px;
  --elements-interaction-indicator: 8px;
  --interaction-stroke-width-focus: 2px;
}
/* Dark */
[data-theme=grey] {
  --text-style-headline: var(--color-primary-cd-color-4);
  --elements-decoration-color: var(--color-primary-cd-color-1);
  --text-style-headline-secondary: var(--color-primary-cd-color-1);
  --text-style-text-primary: var(--color-primary-cd-color-4);
  --text-style-text-secondary: rgba(112, 112, 112, 1);
  --text-style-link: var(--color-primary-cd-color-2);
  --tables-table-row-uneven: var(--color-transparency-darken-4);
  --tables-header-divider: var(--color-primary-cd-color-3);
  --tables-header-divider-stroke: 2px;
  --tables-table-divider: var(--color-transparency-darken-15);
  --tables-table-divider-stroke: 1px;
  --background-default: var(--color-gray-scale-100);
  --background-alternative: var(--color-primary-white);
  --background-light-box: var(--color-primary-white);
  --background-dark-box: var(--color-primary-cd-color-1);
  --form-style-outline: var(--text-style-text-secondary);
  --form-style-hover-outline: var(--color-gray-scale-600);
  --form-style-stroke-width: 1px;
  --form-style-hover-stroke-width: 2px;
  --form-style-background: var(--color-primary-white);
  --form-style-hover-background: var(--color-primary-white);
  --form-style-focus-outline: var(--interaction-focus);
  --form-style-focus-stroke-width: 2px;
  --form-style-focus-background: var(--color-primary-white);
  --form-style-label: var(--text-style-text-secondary);
  --form-style-placeholder-text: var(--text-style-text-secondary);
  --form-style-help-text: var(--text-style-text-secondary);
  --form-style-hover-placeholder-text: var(--text-style-text-secondary);
  --form-style-focus-placeholder-text: var(--text-style-text-secondary);
  --form-style-filled-text: var(--text-style-text-primary);
  --form-style-hover-filled-text: var(--text-style-text-primary);
  --form-style-focus-filled-text: var(--text-style-text-primary);
  --elements-active-front: var(--color-primary-white);
  --elements-active-back: var(--color-primary-cd-color-1);
  --elements-passive-front: var(--color-transparency-darken-60);
  --elements-passive-back: var(--color-transparency-darken-10);
  --elements-divider-stroke: var(--color-transparency-darken-15);
  --form-style-locked: var(--color-transparency-darken-10);
  --elements-shadow: var(--color-transparency-darken-15);
  --elements-shadow-strong: var(--color-transparency-darken-15);
  --tab-active-outline: var(--color-primary-cd-color-2);
  --tab-active-stroke-width: 2px;
  --interaction-hover: var(--color-transparency-darken-4);
  --interaction-hover-strong: var(--color-transparency-darken-15);
  --interaction-hover-alternative: var(--color-transparency-lighten-10);
  --interaction-hover-alternative-strong: var(--color-transparency-lighten-20);
  --interaction-active: var(--color-secondary-secondary-2);
  --button-style-primary-front: var(--color-primary-white);
  --interaction-focus: var(--color-primary-cd-color-4);
  --button-style-primary-back: var(--color-primary-cd-color-2);
  --button-style-primary-stroke: var(--color-primary-transparent);
  --button-style-primary-stroke-width: 0px;
  --button-style-primary-front-hover: var(--color-primary-white);
  --button-style-primary-back-hover: var(--color-transparency-darken-20);
  --button-style-primary-stroke-hover: var(--color-primary-transparent);
  --button-style-primary-stroke-width-hover: 0px;
  --button-style-secondary-front: var(--color-primary-cd-color-2);
  --button-style-secondary-back: var(--color-primary-transparent);
  --button-style-secondary-stroke: var(--color-primary-cd-color-2);
  --button-style-secondary-stroke-width: 1px;
  --button-style-secondary-front-hover: var(--color-primary-cd-color-2);
  --button-style-secondary-back-hover: var(--color-transparency-darken-5);
  --button-style-secondary-stroke-hover: var(--color-primary-cd-color-2);
  --button-style-secondary-stroke-width-hover: 2px;
  --badges-solid-text: var(--color-primary-white);
  --badges-solid-color: var(--color-primary-cd-color-1);
  --badges-outline-text: var(--color-primary-cd-color-3);
  --badges-outline-stroke: var(--color-primary-cd-color-3);
  --state-success: rgba(26, 128, 0, 1);
  --state-success-background: rgba(26, 128, 0, 0.08);
  --badges-success-text: var(--color-primary-white);
  --badges-success-color: rgba(26, 128, 0, 1);
  --badges-warning-text: var(--text-style-text-primary);
  --state-warning: rgba(191, 121, 0, 1);
  --state-warning-background: rgba(255, 184, 0, 0.08);
  --badges-warning-color: rgba(255, 184, 0, 1);
  --state-error: rgba(192, 11, 0, 1);
  --state-error-background: rgba(192, 11, 0, 0.08);
  --state-info: rgba(77, 163, 255, 1);
  --badges-error-text: var(--color-primary-white);
  --state-info-background: rgba(77, 163, 255, 0.08);
  --badges-error-color: rgba(192, 11, 0, 1);
  --elements-stroke: 1px;
  --elements-stroke-hover: 1px;
  --elements-stroke-active: 2px;
  --elements-stroke-strong: 2px;
  --elements-stroke-strong-hover: 2px;
  --elements-stroke-strong-active: 2px;
  --elements-interaction-indicator: 8px;
  --interaction-stroke-width-focus: 2px;
}
/* Dark */
[data-theme=dark] {
  --text-style-headline: var(--color-primary-white);
  --elements-decoration-color: var(--color-primary-white);
  --text-style-headline-secondary: var(--color-primary-white);
  --text-style-text-primary: var(--color-primary-white);
  --text-style-text-secondary: var(--color-transparency-lighten-70);
  --text-style-link: var(--color-secondary-secondary-3);
  --tables-table-row-uneven: var(--color-transparency-lighten-5);
  --tables-header-divider: var(--color-primary-white);
  --tables-header-divider-stroke: 2px;
  --tables-table-divider: var(--color-transparency-lighten-80);
  --tables-table-divider-stroke: 1px;
  --background-default: var(--color-primary-cd-color-4);
  --background-alternative: var(--color-primary-cd-color-1);
  --background-light-box: rgba(76, 76, 76, 1);
  --background-dark-box: var(--color-primary-cd-color-4);
  --form-style-outline: var(--color-gray-scale-200);
  --form-style-hover-outline: var(--color-gray-scale-400);
  --form-style-stroke-width: 1px;
  --form-style-hover-stroke-width: 2px;
  --form-style-background: var(--color-primary-transparent);
  --form-style-hover-background: var(--color-primary-white);
  --form-style-focus-outline: var(--interaction-focus);
  --form-style-focus-stroke-width: 2px;
  --form-style-focus-background: var(--color-primary-white);
  --form-style-label: var(--color-primary-white);
  --form-style-placeholder-text: var(--text-style-text-secondary);
  --form-style-help-text: var(--text-style-text-secondary);
  --form-style-hover-placeholder-text: var(--color-gray-scale-600);
  --form-style-focus-placeholder-text: var(--color-gray-scale-600);
  --form-style-filled-text: var(--text-style-text-primary);
  --form-style-hover-filled-text: var(--color-gray-scale-900);
  --form-style-focus-filled-text: var(--color-gray-scale-900);
  --elements-active-front: var(--color-primary-cd-color-4);
  --elements-active-back: var(--color-primary-white);
  --elements-passive-front: var(--color-transparency-lighten-90);
  --elements-passive-back: var(--color-transparency-lighten-5);
  --elements-divider-stroke: var(--color-transparency-lighten-40);
  --form-style-locked: var(--color-transparency-lighten-10);
  --elements-shadow: var(--color-transparency-darken-20);
  --elements-shadow-strong: var(--color-transparency-darken-70);
  --tab-active-outline: var(--color-primary-white);
  --tab-active-stroke-width: 2px;
  --interaction-hover: var(--color-transparency-darken-10);
  --interaction-hover-strong: var(--color-transparency-lighten-40);
  --interaction-hover-alternative: var(--color-transparency-darken-5);
  --interaction-hover-alternative-strong: var(--color-transparency-darken-12);
  --interaction-active: var(--color-secondary-secondary-2);
  --button-style-primary-front: var(--color-primary-cd-color-2);
  --interaction-focus: var(--color-primary-cd-color-4);
  --button-style-primary-back: var(--color-primary-white);
  --button-style-primary-stroke: var(--color-primary-transparent);
  --button-style-primary-stroke-width: 0px;
  --button-style-primary-front-hover: var(--color-primary-cd-color-2);
  --button-style-primary-back-hover: var(--color-transparency-darken-5);
  --button-style-primary-stroke-hover: var(--color-primary-transparent);
  --button-style-primary-stroke-width-hover: 0px;
  --button-style-secondary-front: var(--color-primary-white);
  --button-style-secondary-back: var(--color-primary-transparent);
  --button-style-secondary-stroke: var(--color-primary-white);
  --button-style-secondary-stroke-width: 1px;
  --button-style-secondary-front-hover: var(--color-primary-white);
  --button-style-secondary-back-hover: var(--color-transparency-darken-10);
  --button-style-secondary-stroke-hover: var(--color-primary-white);
  --button-style-secondary-stroke-width-hover: 2px;
  --badges-solid-text: var(--color-primary-cd-color-1);
  --badges-solid-color: var(--color-primary-white);
  --badges-outline-text: var(--color-primary-white);
  --badges-outline-stroke: var(--color-primary-white);
  --state-success: rgba(126, 201, 110, 1);
  --state-success-background: rgba(126, 201, 110, 0.1);
  --badges-success-text: rgba(26, 128, 0, 1);
  --badges-success-color: var(--color-primary-white);
  --badges-warning-text: var(--color-primary-cd-color-4);
  --state-warning: rgba(255, 184, 0, 1);
  --state-warning-background: rgba(255, 184, 0, 0.1);
  --badges-warning-color: var(--color-primary-white);
  --state-error: rgba(246, 153, 147, 1);
  --state-error-background: rgba(246, 153, 147, 0.1);
  --state-info: rgba(106, 180, 255, 1);
  --badges-error-text: rgba(192, 11, 0, 1);
  --state-info-background: rgba(106, 180, 255, 0.1);
  --badges-error-color: var(--color-primary-white);
  --elements-stroke: 1px;
  --elements-stroke-hover: 1px;
  --elements-stroke-active: 2px;
  --elements-stroke-strong: 2px;
  --elements-stroke-strong-hover: 2px;
  --elements-stroke-strong-active: 2px;
  --elements-interaction-indicator: 8px;
  --interaction-stroke-width-focus: 2px;
}
/* BASICS */
/* Mode 1 */
:root {
  --color-primary-cd-color-1: rgba(224, 0, 27, 1);
  --color-secondary-secondary-1: rgba(163, 0, 19, 1);
  --color-secondary-secondary-2: rgba(184, 220, 194, 1);
  --color-secondary-secondary-3: rgba(172, 205, 214, 1);
  --color-secondary-secondary-4: rgba(191, 191, 191, 1);
  --color-secondary-secondary-5: rgba(128, 128, 128, 1);
  --color-primary-cd-color-2: rgba(80, 110, 91, 1);
  --color-primary-cd-color-3: rgba(118, 118, 118, 1);
  --color-transparency-darken-4: rgba(0, 0, 0, 0.04);
  --color-transparency-lighten-5: rgba(255, 255, 255, 0.05);
  --color-primary-cd-color-4: rgba(67, 67, 67, 1);
  --color-transparency-darken-5: rgba(0, 0, 0, 0.05);
  --color-primary-white: rgba(255, 255, 255, 1);
  --color-transparency-lighten-10: rgba(255, 255, 255, 0.1);
  --color-transparency-lighten-12: rgba(255, 255, 255, 0.12);
  --color-transparency-lighten-15: rgba(255, 255, 255, 0.15);
  --color-transparency-lighten-20: rgba(255, 255, 255, 0.2);
  --color-transparency-lighten-30: rgba(255, 255, 255, 0.3);
  --color-transparency-lighten-40: rgba(255, 255, 255, 0.4);
  --color-transparency-lighten-50: rgba(255, 255, 255, 0.5);
  --color-transparency-lighten-60: rgba(255, 255, 255, 0.6);
  --color-transparency-lighten-70: rgba(255, 255, 255, 0.7);
  --color-transparency-lighten-80: rgba(255, 255, 255, 0.8);
  --color-transparency-lighten-90: rgba(255, 255, 255, 0.9);
  --color-transparency-darken-10: rgba(0, 0, 0, 0.1);
  --color-transparency-darken-12: rgba(0, 0, 0, 0.12);
  --color-transparency-darken-15: rgba(0, 0, 0, 0.15);
  --color-transparency-darken-20: rgba(0, 0, 0, 0.2);
  --color-transparency-darken-30: rgba(0, 0, 0, 0.3);
  --color-transparency-darken-40: rgba(0, 0, 0, 0.4);
  --color-transparency-darken-50: rgba(0, 0, 0, 0.5);
  --color-transparency-darken-60: rgba(0, 0, 0, 0.6);
  --color-transparency-darken-70: rgba(0, 0, 0, 0.7);
  --color-transparency-darken-80: rgba(0, 0, 0, 0.8);
  --color-transparency-darken-90: rgba(0, 0, 0, 0.9);
  --color-primary-black: rgba(0, 0, 0, 1);
  --color-gray-scale-50: rgba(250, 250, 250, 1);
  --color-gray-scale-100: rgba(245, 245, 245, 1);
  --color-gray-scale-200: rgba(238, 238, 238, 1);
  --color-gray-scale-300: rgba(224, 224, 224, 1);
  --color-gray-scale-400: rgba(189, 189, 189, 1);
  --color-gray-scale-500: rgba(158, 158, 158, 1);
  --color-gray-scale-600: rgba(117, 117, 117, 1);
  --color-gray-scale-700: rgba(97, 97, 97, 1);
  --color-gray-scale-800: rgba(66, 66, 66, 1);
  --color-gray-scale-900: rgba(33, 33, 33, 1);
  --color-primary-transparent: rgba(255, 255, 255, 0);
  --typography-corporate-font-1: Outfit;
  --typography-corporate-font-2: Inter;
  --typography-icon-font: Font Awesome 6 Pro;
  --typography-icon-font-weight: Solid;
  --typography-h1-font: var(--typography-corporate-font-1);
  --typography-h1-fontweight: Medium;
  --typography-h1-fontweight-strong: Bold;
  --typography-h2-font: var(--typography-corporate-font-1);
  --typography-h2-fontweight: Medium;
  --typography-h2-fontweight-strong: Bold;
  --typography-h3-font: var(--typography-corporate-font-1);
  --typography-h3-fontweight: Medium;
  --typography-h3-fontweight-strong: Bold;
  --typography-h4-font: var(--typography-corporate-font-1);
  --typography-h4-fontweight: Medium;
  --typography-h4-fontweight-strong: Bold;
  --typography-h5-font: var(--typography-corporate-font-1);
  --typography-h5-fontweight: Medium;
  --typography-h5-fontweight-strong: Bold;
  --typography-h6-font: var(--typography-corporate-font-1);
  --typography-h6-fontweight: Medium;
  --typography-h6-fontweight-strong: Bold;
  --typography-text-font: var(--typography-corporate-font-2);
  --typography-text-fontweight: Regular;
  --typography-text-fontweight-strong: Bold;
  --typography-button-font: var(--typography-corporate-font-2);
  --typography-button-fontweight: SemiBold;
  --sizes-x-large: 64px;
  --sizes-large: 56px;
  --sizes-default: 48px;
  --sizes-small: 40px;
  --sizes-x-small: 32px;
}
/* Custom Variables */
:root {
  --component-max-width: 1375px;
  --navigation-header-height-desktop: 122px;
  --navigation-header-height-tablet: 100px;
  --navigation-header-height-mobile: 76px;
  --navigation-main-height-desktop: 108px;
  --navigation-nav-height-desktop: 82px;
  --navigation-nav-height-tablet: 62px;
  --navigation-nav-height-mobile: 44px;
  --navigation-meta-height-desktop: 40px;
  --navigation-meta-height-tablet: 36px;
  --navigation-meta-height-mobile: 32px;
  --navigation-logo-header-width-desktop: 132px;
  --navigation-logo-header-height-desktop: 112px;
  --navigation-logo-header-height-tablet: 92px;
  --navigation-logo-header-height-mobile: 72px;
  --navigation-logo-icon-width-desktop: 72px;
  --navigation-logo-icon-height-desktop: 68px;
  --navigation-logo-icon-width-tablet: 60px;
  --navigation-logo-icon-height-tablet: 56px;
  --navigation-logo-icon-width-mobile: 48px;
  --navigation-logo-icon-height-mobile: 45px;
  --navigation-main-list-margin-left: 240px;
  --icon-height-mobile: 46px;
  --icon-customer-portal-width: 30px;
  --element-large-cornerradius: 16px;
  --element-tab-angle-size: 20px;
  --element-tab-angle-position-x: -16px;
  --element-tab-angle-position-y: 20px;
  --element-logo-edge-position-x-before: -16px;
  --element-logo-edge-position-x-after: -17px;
  --element-logo-edge-position-y: -16px;
  --video-height-mobile: 360px;
  --video-height-desktop: 640px;
  --hero-content-padding-mobile: 20px;
  --hero-content-search-form-input-height-mobile: 50px;
  --hero-content-search-form-button-height-mobile: 48px;
  --hero-content-search-form-input-height-desktop: 80px;
  --hero-content-search-form-button-height-desktop: 80px;
  --hero-content-search-title-gap-desktop: 6px;
  --hero-content-search-title-padding-top-desktop: 14px;
  --input-stroke-color: #c5c5c5;
  --button-icon-size: 20px;
  --box-height: 96px;
  --box-icon-right-size: 48px;
  --element-content-padding: 20px;
  --text-image-height-desktop: 630px;
  --text-image-gap-desktop: 74px;
  --text-image-text-container-max-width: 409px;
  --button-small-height: 48px;
  --overlay-transparency-darken-10: linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1));
  --overlay-transparency-darken-15: linear-gradient(0deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15));
  --overlay-transparency-darken-20: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
  --statistics-header-max-width: 368px;
  --statistics-content-max-width: 802px;
  --statistics-padding-bottom-desktop: 25px;
  --video-text-video-height-mobile: 640px;
  --video-text-video-height-desktop: 720px;
  --video-text-text-padding-left: 176px;
  --card-height-mobile: 460px;
  --card-height-desktop: 501px;
  --card-width-mobile: 280px;
  --card-width-desktop: 300px;
  --card-image-size-mobile: var(--card-width-mobile);
  --card-image-size-desktop: var(--card-width-desktop);
  --footer-border-top-color: #d8d8d8;
  --footer-contact-btn-icon-size: 20px;
  --profile-page-main-gap: 25px;
  --profile-page-sidenav-padding-x-mobile: 23px;
  --profile-page-sidenav-divider-position: -16px;
  --notification-bg: #fffae8;
  --notification-succeed-bg: #f1faef;
  --input-xs-input-size: 80px;
  --input-sm-input-size: 160px;
  --input-xl-input-size: 224px;
  --input-radio-element-gap: 27px;
  --input-radio-element-label-padding-left: 30px;
  --input-radio-element-radio-row-gap: 25px;
  --input-text-max-width: 280px;
  --input-textfield-max-width: 320px;
  --main-container-max-width: 800px;
  --customer-login-padding-top-mobile: 31px;
  --customer-login-padding-bottom-mobile: 64px;
  --customer-login-padding-top-desktop: 100px;
  --customer-login-padding-bottom-desktop: 118px;
  --customer-login-max-width: 1200px;
  --customer-login-form-image-content-gap-desktop: 171px;
  --customer-login-form-image-content-gap-mobile: 16px;
  --customer-login-form-container-max-width: 408px;
  --customer-login-h1-margin-bottom: -8px;
  --customer-login-form-container-gap: 16px;
  --customer-login-image-container-max-with: 720px;
  --customer-login-form-gap-desktop: 32px;
  --customer-login-form-gap-mobile: 24px;
  --customer-login-form-rows-gap: 16px;
  --customer-login-divider-margin-top: 8px;
  --customer-login-divider-margin-bottom: 8px;
  --customer-dashboard-mobile-nav-padding-y: 24px;
  --customer-dashboard-mobile-nav-select-item-gap: 6px;
  --customer-dashboard-padding-bottom-mobile: 64px;
  --customer-dashboard-info-card-container-gap-mobile: 24px;
  --customer-dashboard-info-card-container-gap-desktop: 32px;
  --customer-dashboard-info-card-padding-x-mobile: 16px;
  --customer-dashboard-info-card-padding-x-desktop: 32px;
  --customer-dashboard-info-card-padding-y-mobile: 24px;
  --customer-dashboard-info-card-padding-y-desktop: 32px;
  --customer-dashboard-info-cards-container-row-gap-mobile: 24px;
  --customer-dashboard-info-cards-container-row-gap-desktop: 32px;
  --customer-dashboard-info-card-gap-mobile: 24px;
  --customer-dashboard-info-card-gap-desktop: 24px;
  --customer-dashboard-info-card-rows-gap-mobile: 16px;
  --customer-dashboard-info-card-rows-gap-desktop: 24px;
  --customer-dashboard-info-card-col-items-inline-gap: 8px;
  --customer-dashboard-info-card-col-items-column-small-gap: 4px;
  --customer-dashboard-info-card-col-items-column-medium-gap: 8px;
  --customer-dashboard-info-card-col-items-column-big-gap: 16px;
  --customer-dashboard-info-card-grid-item-gap: 24px;
  --customer-dashboard-content-gap-mobile: 32px;
  --customer-dashboard-content-gap: 32px;
  --customer-dashboard-select-meter-gap: 16px;
  --customer-dashboard-meter-chip-padding-y-mobile: 8.5px;
  --customer-dashboard-meter-chip-padding-y-desktop: 5.5px;
  --customer-dashboard-meter-chip-category-container-gap: 8px;
  --customer-dashboard-consumption-content-padding-x-mobile: 16px;
  --customer-dashboard-consumption-content-padding-x-desktop: 32px;
  --customer-dashboard-consumption-content-padding-y-mobile: 28px;
  --customer-dashboard-consumption-content-padding-y-desktop: 32px;
  --customer-dashboard-consumption-content-gap: 24px;
  --customer-dashboard-date-select-container-gap-mobile: 16px;
  --customer-dashboard-date-select-container-gap-desktop: 24px;
  --customer-dashboard-date-select-inner-gap: 10px;
  --customer-dashboard-time-span-chip-padding-x-mobile: 16px;
  --customer-dashboard-time-span-chips-gap-mobile: 8px;
  --customer-dashboard-time-span-chips-gap-desktop: 17px;
  --customer-dashboard-gap-desktop: 20px;
  --customer-dashboard-padding-top-desktop: 64px;
  --customer-dashboard-padding-bottom-desktop: 128px;
  --customer-dashboard-consumption-feed-in-container-gap-desktop: 64px;
  --customer-dashboard-simlar-household-container-gap: 16px;
  --customer-dashboard-side-nav-padding-bottom: 32px;
  --google-maps-height-mobile: 376px;
  --google-maps-height-desktop: 536px;
  --circle-button-small-font-size: 20px;
  --circle-button-default-font-size: 24px;
  --circle-button-large-font-size: 28px;
}
/* Headlines styles generator */
/* Columns mixin */
/*******************************/
/*** Netz variables ***/
/*****************************/
:root {
  --typography-text-input-mobile: 16px;
}
@media (min-width: 1200px) {
  :root {
    --typography-text-input-mobile: 17px;
  }
}
.text-primary, .tooltip-block .tooltip-container .tooltip-content {
  color: var(--text-style-text-primary);
}
.text-secondary, .input .info-block, .input-default .info-block {
  color: var(--text-style-text-secondary);
}
.text-decoration {
  color: var(--elements-decoration-color);
}
.text-headline {
  color: var(--color-primary-cd-color-4);
}
.text-label, .form-container form .form-row .form-group label {
  color: var(--color-primary-cd-color-2);
}
.text-help {
  color: var(--form-style-help-text);
}
.text-filled, .input-element,
.select-element {
  color: var(--form-style-filled-text);
}
.text-link-small {
  color: var(--text-style-link);
}
.text-link {
  color: var(--text-style-link);
}
*:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-strong, .form-container form .form-row .form-group label:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), *.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
*.select-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
  font-weight: 700;
}
*:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-x-small, .input *.info-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .input-default *.info-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .input *.success-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .input-default *.success-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .input *.error-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.input *.error-empty-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .input-default *.error-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.input-default *.error-empty-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .tooltip-block button:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .tooltip-block .tooltip-container .tooltip-content *.tooltip-text:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
  font-family: var(--typography-text-font);
  font-size: var(--typography-text-x-small);
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: var(--typography-text-letterspacing);
}
*:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-x-small.text-strong, .input *.info-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-strong, .input-default *.info-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-strong, .input *.success-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-strong, .input-default *.success-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-strong, .input *.error-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-strong,
.input *.error-empty-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-strong, .input-default *.error-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-strong,
.input-default *.error-empty-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-strong, .tooltip-block button:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-strong, .tooltip-block .tooltip-container .tooltip-content *.tooltip-text:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-strong, .form-container form .form-row .form-group label:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-x-small, .input .form-container form .form-row .form-group label.info-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .form-container form .form-row .form-group .input label.info-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .input-default .form-container form .form-row .form-group label.info-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .form-container form .form-row .form-group .input-default label.info-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .input .form-container form .form-row .form-group label.success-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .form-container form .form-row .form-group .input label.success-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .input-default .form-container form .form-row .form-group label.success-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .form-container form .form-row .form-group .input-default label.success-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .input .form-container form .form-row .form-group label.error-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .form-container form .form-row .form-group .input label.error-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.input .form-container form .form-row .form-group label.error-empty-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.form-container form .form-row .form-group .input label.error-empty-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .input-default .form-container form .form-row .form-group label.error-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .form-container form .form-row .form-group .input-default label.error-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.input-default .form-container form .form-row .form-group label.error-empty-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.form-container form .form-row .form-group .input-default label.error-empty-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .tooltip-block .tooltip-container .tooltip-content .form-container form .form-row .form-group label.tooltip-text:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .form-container form .form-row .form-group .tooltip-block .tooltip-container .tooltip-content label.tooltip-text:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), *.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-x-small, .input *.info-block.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .input-default *.info-block.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .input *.success-block.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .input-default *.success-block.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .input *.error-block.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.input *.error-empty-block.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .input-default *.error-block.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.input-default *.error-empty-block.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .tooltip-block button.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .tooltip-block .tooltip-container .tooltip-content *.tooltip-text.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
*.select-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-x-small,
.input *.info-block.select-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.input-default *.info-block.select-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.input *.success-block.select-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.input-default *.success-block.select-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.input *.error-block.select-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.input *.error-empty-block.select-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.input-default *.error-block.select-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.input-default *.error-empty-block.select-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.tooltip-block button.select-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.tooltip-block .tooltip-container .tooltip-content *.tooltip-text.select-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-x-small-strong, .tooltip-block .tooltip-container .tooltip-content *.tooltip-title:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
  font-weight: 700;
}
*:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-small, .form-container form .form-row .form-group label:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
  font-family: var(--typography-text-font);
  font-size: var(--typography-text-small);
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: var(--typography-text-letterspacing);
}
*:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-small.text-strong, .form-container form .form-row .form-group label:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), *.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-small,
*.select-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-small, *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-small-strong {
  font-weight: 700;
}
*:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-medium, *.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
*.select-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .form-row-optional *.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6)::placeholder, a.text-link:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
  font-family: var(--typography-text-font);
  font-size: var(--typography-text-medium);
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: var(--typography-text-letterspacing);
}
*:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-medium.text-strong, .form-container form .form-row .form-group label:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-medium, .form-container form .form-row .form-group label.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.form-container form .form-row .form-group label.select-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .form-row-optional .form-container form .form-row .form-group label.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6)::placeholder, .form-container form .form-row .form-group .form-row-optional label.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6)::placeholder, *.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .form-row-optional *.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6)::placeholder,
*.select-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-medium-strong, table:not(.duet-date__table) thead tr td:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):before,
table:not(.duet-date__table) tbody tr td:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):before, a.text-link:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
  font-weight: 700;
}
*:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-large, *.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(:disabled)::placeholder,
*.select-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(:disabled)::placeholder {
  font-family: var(--typography-text-font);
  font-size: var(--typography-text-large);
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: var(--typography-text-letterspacing);
}
*:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-large.text-strong, .form-container form .form-row .form-group label:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-large, .form-container form .form-row .form-group label.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(:disabled)::placeholder,
.form-container form .form-row .form-group label.select-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(:disabled)::placeholder, *.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-large, *.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(:disabled)::placeholder,
*.select-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-large,
*.select-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(:disabled)::placeholder, *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-large-strong {
  font-weight: 700;
}
*:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-x-large {
  font-family: var(--typography-text-font);
  font-size: var(--typography-text-x-large);
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: var(--typography-text-letterspacing);
}
*:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-x-large.text-strong, .form-container form .form-row .form-group label:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-x-large, *.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-x-large,
*.select-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-x-large, *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-x-large-strong {
  font-weight: 700;
}
*:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-xx-large {
  font-family: var(--typography-text-font);
  font-size: var(--typography-text-xx-large);
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: var(--typography-text-letterspacing);
}
*:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-xx-large.text-strong, .form-container form .form-row .form-group label:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-xx-large, *.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-xx-large,
*.select-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-xx-large, *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-xx-large-strong {
  font-weight: 700;
}
.text-line-limit-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
}
.text-line-limit-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.text-line-limit-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
}
.text-line-limit-4 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
}
.text-line-limit-5 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  -webkit-box-orient: vertical;
}
.text-line-limit-6 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  -webkit-box-orient: vertical;
}
.text-line-limit-7 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 7;
  line-clamp: 7;
  -webkit-box-orient: vertical;
}
.text-line-limit-8 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 8;
  line-clamp: 8;
  -webkit-box-orient: vertical;
}
.text-line-limit-9 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 9;
  line-clamp: 9;
  -webkit-box-orient: vertical;
}
.text-line-limit-10 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 10;
  line-clamp: 10;
  -webkit-box-orient: vertical;
}
.text-strong, .form-container form .form-row .form-group label, .input-element,
.select-element,
b {
  font-weight: 700;
}
.text-regular {
  font-weight: 400;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--typography-corporate-font-2);
  color: var(--text-style-headline);
}
h1.strong,
h1 .strong,
h2.strong,
h2 .strong,
h3.strong,
h3 .strong,
h4.strong,
h4 .strong,
h5.strong,
h5 .strong,
h6.strong,
h6 .strong {
  font-weight: 700;
}
h1.secondary,
h2.secondary,
h3.secondary,
h4.secondary,
h5.secondary,
h6.secondary {
  color: var(--text-style-headline-secondary);
}
h1 span,
h2 span,
h3 span,
h4 span,
h5 span,
h6 span {
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
  line-height: inherit;
}
h1 span.secondary,
h2 span.secondary,
h3 span.secondary,
h4 span.secondary,
h5 span.secondary,
h6 span.secondary {
  color: var(--text-style-headline-secondary);
  font-weight: 700;
}
.icon-font {
  font-family: var(--typography-icon-font);
  font-style: normal;
  font-weight: 900;
  line-height: 100%;
}
.icon-font-20 {
  font-size: 20px;
}
.icon-font-16 {
  font-size: 16px;
}
h1 {
  font-family: var(--typography-h1-font);
  font-size: var(--typography-headline-h1);
  line-height: var(--typography-headline-h1-lineheight);
  letter-spacing: var(--typography-headline-h1-letterspacing);
  font-weight: 500;
  display: block;
}
.h1 {
  font-family: var(--typography-h1-font);
  font-size: var(--typography-headline-h1);
  line-height: var(--typography-headline-h1-lineheight);
  letter-spacing: var(--typography-headline-h1-letterspacing);
}
h2 {
  font-family: var(--typography-h2-font);
  font-size: var(--typography-headline-h2);
  line-height: var(--typography-headline-h2-lineheight);
  letter-spacing: var(--typography-headline-h2-letterspacing);
  font-weight: 500;
  display: block;
}
.h2 {
  font-family: var(--typography-h2-font);
  font-size: var(--typography-headline-h2);
  line-height: var(--typography-headline-h2-lineheight);
  letter-spacing: var(--typography-headline-h2-letterspacing);
}
h3 {
  font-family: var(--typography-h3-font);
  font-size: var(--typography-headline-h3);
  line-height: var(--typography-headline-h3-lineheight);
  letter-spacing: var(--typography-headline-h3-letterspacing);
  font-weight: 500;
  display: block;
}
.h3 {
  font-family: var(--typography-h3-font);
  font-size: var(--typography-headline-h3);
  line-height: var(--typography-headline-h3-lineheight);
  letter-spacing: var(--typography-headline-h3-letterspacing);
}
h4 {
  font-family: var(--typography-h4-font);
  font-size: var(--typography-headline-h4);
  line-height: var(--typography-headline-h4-lineheight);
  letter-spacing: var(--typography-headline-h4-letterspacing);
  font-weight: 500;
  display: block;
}
.h4 {
  font-family: var(--typography-h4-font);
  font-size: var(--typography-headline-h4);
  line-height: var(--typography-headline-h4-lineheight);
  letter-spacing: var(--typography-headline-h4-letterspacing);
}
h5 {
  font-family: var(--typography-h5-font);
  font-size: var(--typography-headline-h5);
  line-height: var(--typography-headline-h5-lineheight);
  letter-spacing: var(--typography-headline-h5-letterspacing);
  font-weight: 500;
  display: block;
}
.h5 {
  font-family: var(--typography-h5-font);
  font-size: var(--typography-headline-h5);
  line-height: var(--typography-headline-h5-lineheight);
  letter-spacing: var(--typography-headline-h5-letterspacing);
}
h6 {
  font-family: var(--typography-h6-font);
  font-size: var(--typography-headline-h6);
  line-height: var(--typography-headline-h6-lineheight);
  letter-spacing: var(--typography-headline-h6-letterspacing);
  font-weight: 500;
  display: block;
}
.h6 {
  font-family: var(--typography-h6-font);
  font-size: var(--typography-headline-h6);
  line-height: var(--typography-headline-h6-lineheight);
  letter-spacing: var(--typography-headline-h6-letterspacing);
}
/* Desktop */
@media (min-width: 992px) {
  .text-large-desktop {
    font-family: var(--typography-corporate-font-1);
    font-style: normal;
    font-size: var(--typography-text-large);
    line-height: var(--typography-text-lineheight);
  }
  .text-medium-desktop {
    font-family: var(--typography-corporate-font-1);
    font-style: normal;
    font-size: var(--typography-text-medium);
    line-height: var(--typography-text-lineheight);
  }
}
p a {
  display: inline;
  font-size: inherit;
  font-family: inherit;
}
a {
  display: inline;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--spacings-100-c-x-small-plus);
  align-self: stretch;
  width: fit-content;
  gap: var(--button-default-gap);
  color: var(--button-style-secondary-front);
  text-align: center;
  font-family: var(--typography-button-font);
  font-size: var(--button-typography-default);
  font-style: normal;
  font-weight: 600;
  line-height: var(--button-typography-default-lineheight);
  letter-spacing: var(--button-typography-default-letterspacing);
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}
a i {
  font-size: 90%;
  line-height: inherit;
  padding: 0px 5px;
}
ol,
ul {
  font-weight: 400;
  font-family: var(--typography-text-font);
}
ol {
  list-style: inside;
  list-style-type: decimal;
}
ul {
  list-style: inside;
  list-style-type: revert;
}
a.meta-header-link {
  padding: var(--button-small-padding-vertical) 0;
}
a .link-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
a.text-link {
  color: var(--color-secondary-secondary-4);
}
a.btn-rounded {
  border-radius: 50%;
  width: var(--sizes-small);
  height: var(--sizes-small);
  background: var(--color-primary-cd-color-2);
  display: flex;
  align-items: center;
  justify-content: center;
}
a.main-navigation-link,
button.main-navigation-link {
  white-space: nowrap;
  padding: var(--spacings-100-c-xxxx-small);
  justify-content: center;
  align-items: center;
  gap: var(--spacings-100-c-xxxx-small);
  color: var(--text-style-text-primary);
  font-family: var(--typography-text-font);
  font-size: var(--typography-text-medium);
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: var(--typography-text-letterspacing);
}
a.main-navigation-link.important-link,
button.main-navigation-link.important-link {
  font-weight: 700;
}
a.main-navigation-link {
  font-weight: 400;
  font-size: var(--typography-text-medium);
}
.btn-link {
  max-width: fit-content;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  align-self: stretch;
  text-align: center;
  color: var(--button-style-secondary-front);
  font-family: var(--typography-button-font);
  font-style: normal;
  font-weight: 600;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}
.btn-link-default {
  font-size: var(--button-typography-default);
  line-height: var(--button-typography-default-lineheight);
  letter-spacing: var(--button-typography-default-letterspacing);
}
.btn-link-small {
  font-size: var(--button-typography-small);
  line-height: var(--button-typography-small-lineheight);
  letter-spacing: var(--button-typography-small-letterspacing);
}
.btn-link .btn-content {
  gap: var(--button-default-gap);
}
.btn-link:hover:not(:disabled) {
  text-decoration: underline;
}
.btn-link:disabled {
  opacity: 0.4;
}
.form-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacings-75-b-medium);
  padding: var(--spacings-75-b-medium) var(--spacings-50-a-medium);
  background: var(--background-alternative);
  border-radius: var(--elements-default-corner-radius);
  border: solid 1px var(--elements-divider-stroke);
}
.form-container form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacings-75-b-medium);
}
.form-container form .form-row {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacings-50-a-medium);
}
.form-container form .form-row .form-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacings-100-c-xxx-small);
}
.form-container form .form-row .form-group label {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 4.5px;
}
.input-element,
.select-element {
  height: var(--sizes-default);
  padding: 0 var(--spacings-75-b-x-small-plus);
  background: var(--form-style-background);
  border: solid 1px var(--form-style-outline);
  border-radius: var(--forms-large-cornerradius);
}
.input-element:disabled,
.select-element:disabled {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), #ffffff;
}
.select-element {
  display: flex;
  align-items: center;
  background-image: url('data:image/svg+xml,<svg width="15" height="8" viewBox="0 0 15 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.78125 7.46875L0.53125 1.21875C0.296875 0.984375 0.296875 0.554688 0.53125 0.320312C0.765625 0.0859375 1.19531 0.0859375 1.42969 0.320312L7.25 6.14062L13.0312 0.320312C13.2656 0.0859375 13.6953 0.0859375 13.9297 0.320312C14.1641 0.554688 14.1641 0.984375 13.9297 1.21875L7.67969 7.46875C7.44531 7.70312 7.01562 7.70312 6.78125 7.46875Z" fill="%23434343"/></svg>');
  background-repeat: no-repeat;
  background-position: calc(100% - 32px) 50%;
}
.input-info {
  width: 100%;
}
.radio-element {
  display: flex;
  gap: var(--input-radio-element-gap);
}
.radio-element .radio-description {
  display: flex;
  flex-direction: column;
}
.radio-element .radio,
.radio-element .radio-description {
  width: 50%;
}
.divider {
  width: 100%;
  height: 1px;
  background: var(--elements-divider-stroke);
  margin: 0;
  border: none;
}
.radio input[type=radio] {
  position: absolute;
  opacity: 0;
}
.radio input[type=radio] + .radio-label:before {
  content: "";
  background: transparent;
  border-radius: 100%;
  border: 2px solid var(--form-style-outline);
  display: inline-block;
  width: 16px;
  height: 16px;
  position: relative;
  top: 3px;
  margin-right: 4.5px;
  vertical-align: top;
  cursor: pointer;
  text-align: center;
}
.radio input[type=radio]:checked + .radio-label:before {
  width: 12px;
  height: 12px;
  background-color: var(--form-style-active-front);
  border-color: var(--form-style-active-back);
  border-width: 4px;
}
.radio input[type=radio]:focus + .radio-label:before {
  outline: none;
  border-color: var(--form-style-active-back);
}
.radio .radio-label .label-sub-text {
  display: block;
  padding-left: var(--input-radio-element-label-padding-left);
}
.input-date-row {
  max-width: var(--components-maxwidth-_text);
}
.input-date-row .input-element {
  background-image: url('data:image/svg+xml,<svg width="18" height="21" viewBox="0 0 18 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.875 0.5C5.1875 0.5 5.5 0.8125 5.5 1.125V3H13V1.125C13 0.8125 13.2734 0.5 13.625 0.5C13.9375 0.5 14.25 0.8125 14.25 1.125V3H15.5C16.8672 3 18 4.13281 18 5.5V6.75V8V18C18 19.4062 16.8672 20.5 15.5 20.5H3C1.59375 20.5 0.5 19.4062 0.5 18V8V6.75V5.5C0.5 4.13281 1.59375 3 3 3H4.25V1.125C4.25 0.8125 4.52344 0.5 4.875 0.5ZM16.75 8H1.75V18C1.75 18.7031 2.29688 19.25 3 19.25H15.5C16.1641 19.25 16.75 18.7031 16.75 18V8ZM15.5 4.25H3C2.29688 4.25 1.75 4.83594 1.75 5.5V6.75H16.75V5.5C16.75 4.83594 16.1641 4.25 15.5 4.25Z" fill="%23434343"/></svg>');
  background-repeat: no-repeat;
  background-position: calc(100% - 32px) 50%;
  padding-right: 55px;
}
.form-row-optional label {
  display: flex;
  justify-content: space-between;
}
.form-row-optional .input-element::placeholder {
  color: var(--form-style-placeholder-text);
}
/* Desktop */
@media (min-width: 992px) {
  .form-container {
    gap: var(--profile-page-main-gap);
  }
  .form-container form {
    gap: var(--profile-page-main-gap);
  }
  .form-container form .form-row {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--spacings-100-c-x-small);
  }
  .form-container form .form-row.radio-row {
    flex-direction: column;
    gap: var(--input-radio-element-radio-row-gap);
  }
  .xs-input-size {
    width: var(--input-xs-input-size);
  }
  .sm-input-size {
    width: var(--input-sm-input-size);
  }
  .xl-input-size {
    max-width: var(--input-xl-input-size);
  }
  .full-width-input-size {
    width: 100%;
  }
}
.input {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacings-100-c-xxx-small);
}
.input:has(textarea) .input-wrapper .input-field {
  resize: vertical;
}
.input:not(:has(textarea.input-field)) {
  max-width: var(--input-text-max-width);
}
.input:has(.input-field:disabled:not(.locked)), .input:has(select:disabled:not(.locked)), .input:has(duet-date-picker:disabled:not(.locked)) {
  opacity: 0.4;
  cursor: default;
}
.input:has(.input-field.locked) .lock-icon, .input:has(duet-date-picker.locked) .lock-icon {
  display: flex;
}
.input:has(.input-field:not(.locked)) .lock-icon, .input:has(.input-field:disabled:not(.locked)) .lock-icon, .input:has(duet-date-picker:not(.locked)) .lock-icon, .input:has(duet-date-picker:disabled:not(.locked)) .lock-icon {
  display: none;
}
.input .criteria-block {
  display: none;
}
.input .input-wrapper {
  position: relative;
}
.input .input-wrapper .icon {
  position: absolute;
  right: var(--spacings-75-b-x-small-plus);
  top: calc(50% - 10px);
  font-size: 20px;
  font-weight: 900;
  line-height: 100%;
  color: var(--form-style-filled-text);
}
.input .input-wrapper .icon.error-icon {
  display: none;
  color: var(--state-error);
}
.input .input-wrapper .icon.success-icon {
  display: none;
  color: var(--state-success);
}
.input.validated .criteria-block {
  display: block;
}
.input.validated .criteria-block.no-icons ul li .criteria-icon {
  display: none;
}
.input.validated .criteria-block:not(.no-icons) ul li.criteria.fulfilled .criteria-icon.criteria-fulfilled {
  display: flex;
}
.input.validated .criteria-block:not(.no-icons) ul li.criteria.fulfilled .criteria-icon.criteria-not-fulfilled {
  display: none;
}
.input.validated .criteria-block:not(.no-icons) ul li.criteria .criteria-icon {
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  line-height: 100%;
  align-self: center;
  width: 15px;
  justify-content: center;
}
.input.validated .criteria-block:not(.no-icons) ul li.criteria .criteria-icon.criteria-fulfilled {
  display: none;
}
.input.validated .criteria-block:not(.no-icons) ul li.criteria .criteria-icon.criteria-not-fulfilled {
  display: flex;
}
.input.validated .criteria-block ul {
  list-style: none;
  list-style-type: none;
}
.input.validated .criteria-block ul li.criteria {
  display: flex;
  flex-direction: row;
  gap: var(--spacings-100-c-xxxx-small);
}
.input.validated.error .input-wrapper input, .input.validated.success .input-wrapper input {
  padding-right: calc(var(--spacings-75-b-x-small-plus) + 20px);
}
.input.validated.error .labels-block label.primary-label {
  color: var(--state-error);
}
.input.validated.error .input-field {
  border: var(--form-style-focus-stroke-width) solid var(--state-error);
}
.input.validated.error duet-date-picker .duet-date__input-wrapper input.duet-date__input {
  box-shadow: 0 0 0 1px var(--state-error);
  border: var(--form-style-stroke-width) solid var(--state-error);
}
.input.validated.error .input-wrapper .icon.error-icon {
  display: flex;
}
.input.validated.error .criteria-block {
  display: none;
}
.input.validated.error .info-block {
  display: none;
}
.input.validated.error.error-invalid .error-block {
  display: block;
}
.input.validated.error.error-empty .error-empty-block {
  display: block;
}
.input.validated.success .labels-block label.primary-label {
  color: var(--state-success);
}
.input.validated.success .input-field {
  border: var(--form-style-focus-stroke-width) solid var(--state-success);
}
.input.validated.success duet-date-picker .duet-date__input-wrapper input.duet-date__input {
  box-shadow: 0 0 0 1px var(--state-success);
  border: var(--form-style-stroke-width) solid var(--state-success);
}
.input.validated.success .input-wrapper .icon.success-icon {
  display: flex;
}
.input.validated.success .error-block,
.input.validated.success .error-empty-block {
  display: none;
}
.input.validated.success .info-block {
  display: block;
}
.input.validated.success:has(.success-block) .info-block {
  display: none;
}
.input.validated.success:has(.success-block) .success-block {
  display: block;
}
.input:has(.input-field[required]) .labels-block .secondary-label {
  display: none;
}
.input .labels-block, .input-default .labels-block {
  display: flex;
  align-items: flex-end;
  gap: var(--spacings-100-c-xxx-small);
  align-self: stretch;
}
.input .labels-block .primary-label, .input-default .labels-block .primary-label {
  flex: 1 0 0;
  color: var(--form-style-label);
  display: flex;
  font-family: var(--typography-text-font);
  font-size: var(--typography-text-small);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  letter-spacing: var(--typography-text-letterspacing);
  gap: var(--spacings-100-c-xxxx-small);
}
.input .labels-block .primary-label .lock-icon, .input-default .labels-block .primary-label .lock-icon {
  color: var(--form-style-label);
  text-align: right;
  align-items: center;
  font-family: var(--typography-icon-font);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  line-height: 100%;
}
.input .labels-block .secondary-label, .input-default .labels-block .secondary-label {
  color: var(--text-style-text-secondary);
  text-align: right;
  font-family: var(--typography-text-font);
  font-size: var(--typography-text-x-small);
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: var(--typography-text-letterspacing);
}
.input .input-wrapper textarea.input-field, .input-default .input-wrapper textarea.input-field {
  overflow: auto;
}
.input .input-wrapper duet-date-picker .duet-date__input-wrapper:hover .duet-date__toggle:not(:hover):not(:focus) .duet-date__toggle-icon:first-child, .input .input-wrapper duet-date-picker .duet-date__input-wrapper:focus-within .duet-date__toggle:not(:hover):not(:focus) .duet-date__toggle-icon:first-child, .input-default .input-wrapper duet-date-picker .duet-date__input-wrapper:hover .duet-date__toggle:not(:hover):not(:focus) .duet-date__toggle-icon:first-child, .input-default .input-wrapper duet-date-picker .duet-date__input-wrapper:focus-within .duet-date__toggle:not(:hover):not(:focus) .duet-date__toggle-icon:first-child {
  color: var(--form-style-focus-filled-text);
  fill: var(--form-style-focus-filled-text);
}
.input .input-wrapper .input-field,
.input .input-wrapper duet-date-picker .duet-date__input-wrapper input.duet-date__input, .input-default .input-wrapper .input-field,
.input-default .input-wrapper duet-date-picker .duet-date__input-wrapper input.duet-date__input {
  display: flex;
  padding: 0px var(--spacings-75-b-x-small-plus);
  flex-direction: column;
  align-items: flex-start;
  flex: 1 0 0;
  align-self: stretch;
  min-height: var(--forms-default-size);
  width: 100%;
  border-radius: var(--forms-default-cornerradius);
  border: var(--form-style-stroke-width) solid var(--form-style-outline);
  background: var(--form-style-background);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  resize: none;
  color: var(--form-style-filled-text);
  font-family: var(--typography-text-font);
  font-size: var(--typography-text-input-mobile);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  letter-spacing: var(--typography-text-letterspacing);
}
.input .input-wrapper .input-field::placeholder,
.input .input-wrapper duet-date-picker .duet-date__input-wrapper input.duet-date__input::placeholder, .input-default .input-wrapper .input-field::placeholder,
.input-default .input-wrapper duet-date-picker .duet-date__input-wrapper input.duet-date__input::placeholder {
  color: var(--form-style-placeholder-text);
  font-weight: 400;
}
.input .input-wrapper .input-field.locked,
.input .input-wrapper duet-date-picker .duet-date__input-wrapper input.duet-date__input.locked, .input-default .input-wrapper .input-field.locked,
.input-default .input-wrapper duet-date-picker .duet-date__input-wrapper input.duet-date__input.locked {
  border-radius: var(--forms-default-cornerradius);
  border: var(--form-style-stroke-width) solid var(--form-style-outline);
  background: var(--form-style-locked);
}
.input .input-wrapper .input-field:not(:read-only):focus,
.input .input-wrapper duet-date-picker .duet-date__input-wrapper input.duet-date__input:not(:read-only):focus, .input-default .input-wrapper .input-field:not(:read-only):focus,
.input-default .input-wrapper duet-date-picker .duet-date__input-wrapper input.duet-date__input:not(:read-only):focus {
  color: var(--form-style-focus-filled-text);
  border-color: var(--form-style-focus-outline);
  box-shadow: 0 0 0 1px var(--form-style-focus-outline);
  background: var(--form-style-focus-background);
}
.input .input-wrapper .input-field:not(:read-only):focus::placeholder,
.input .input-wrapper duet-date-picker .duet-date__input-wrapper input.duet-date__input:not(:read-only):focus::placeholder, .input-default .input-wrapper .input-field:not(:read-only):focus::placeholder,
.input-default .input-wrapper duet-date-picker .duet-date__input-wrapper input.duet-date__input:not(:read-only):focus::placeholder {
  color: var(--form-style-focus-placeholder-text);
  font-weight: 400;
}
.input .input-wrapper .input-field:not(:read-only):hover,
.input .input-wrapper duet-date-picker .duet-date__input-wrapper input.duet-date__input:not(:read-only):hover, .input-default .input-wrapper .input-field:not(:read-only):hover,
.input-default .input-wrapper duet-date-picker .duet-date__input-wrapper input.duet-date__input:not(:read-only):hover {
  color: var(--form-style-hover-filled-text);
  border-color: var(--form-style-hover-outline);
  box-shadow: 0 0 0 1px var(--form-style-hover-outline);
  background: var(--form-style-hover-background);
}
.input .input-wrapper .input-field:not(:read-only):hover::placeholder,
.input .input-wrapper duet-date-picker .duet-date__input-wrapper input.duet-date__input:not(:read-only):hover::placeholder, .input-default .input-wrapper .input-field:not(:read-only):hover::placeholder,
.input-default .input-wrapper duet-date-picker .duet-date__input-wrapper input.duet-date__input:not(:read-only):hover::placeholder {
  color: var(--form-style-hover-placeholder-text);
  font-weight: 400;
}
.input .success-block, .input-default .success-block {
  display: none;
  color: var(--state-success);
}
.input .error-block,
.input .error-empty-block, .input-default .error-block,
.input-default .error-empty-block {
  display: none;
  color: var(--state-error);
}
.input-large .labels-block .primary-label {
  font-size: var(--typography-text-medium);
}
.input-large .input-wrapper .input-field,
.input-large .input-wrapper duet-date-picker .duet-date__input-wrapper input.duet-date__input {
  padding: 0px var(--spacings-75-b-small);
  border-radius: var(--forms-large-cornerradius);
  min-height: var(--forms-large-size);
  font-size: var(--typography-text-large);
}
.input-large .input-wrapper .input-field::placeholder,
.input-large .input-wrapper duet-date-picker .duet-date__input-wrapper input.duet-date__input::placeholder {
  color: var(--form-style-placeholder-text);
  font-weight: 400;
}
.input-small .input-wrapper .input-field,
.input-small .input-wrapper duet-date-picker .duet-date__input-wrapper input.duet-date__input {
  padding: 0px var(--spacings-75-b-x-small);
  min-height: var(--forms-small-size);
  font-size: var(--typography-text-small);
}
.input-small .input-wrapper .input-field::placeholder,
.input-small .input-wrapper duet-date-picker .duet-date__input-wrapper input.duet-date__input::placeholder {
  color: var(--form-style-placeholder-text);
  font-weight: 400;
}
.tooltip-block {
  position: relative;
}
.tooltip-block button {
  color: var(--text-style-link);
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}
.tooltip-block .tooltip-container {
  display: none;
  position: absolute;
  left: 0px;
  top: 30px;
  width: 80svw;
  padding: var(--spacings-75-b-xx-small);
  flex-direction: row;
  justify-content: flex-end;
  align-items: flex-start;
  gap: var(--spacings-100-c-xx-small);
  border-radius: var(--elements-small-corner-radius);
  background: var(--background-default);
  box-shadow: 0px 2px 16px 0px var(--elements-shadow);
  z-index: 100;
  opacity: 0;
  transition: opacity 0.3s;
  max-width: 286px;
}
@media (min-width:768px) {
  .tooltip-block .tooltip-container {
    left: calc(100% + 15px);
    top: -4px;
  }
}
.tooltip-block .tooltip-container.show-transition {
  display: flex;
}
.tooltip-block .tooltip-container.show {
  opacity: 1;
}
.tooltip-block .tooltip-container.moved-tooltip {
  top: 30px;
}
.tooltip-block .tooltip-container.moved-tooltip .tooltip-content:before {
  content: "";
  position: absolute;
  left: 8px;
  top: calc(-1 * var(--spacings-75-b-xx-small) - 8px);
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid var(--background-default);
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  z-index: 5;
}
.tooltip-block .tooltip-container .tooltip-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacings-100-c-xxxx-small);
  flex: 1 0 0;
}
.tooltip-block .tooltip-container .tooltip-content:before {
  content: "";
  position: absolute;
  left: 8px;
  top: calc(-1 * var(--spacings-75-b-xx-small) - 8px);
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid var(--background-default);
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  z-index: 5;
}
@media (min-width:768px) {
  .tooltip-block .tooltip-container .tooltip-content:before {
    left: calc(-1 * var(--spacings-75-b-xx-small) - 7px);
    top: 8px;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 12px solid transparent;
    border-right: 12px solid var(--background-default);
  }
}
.tooltip-block .tooltip-container .tooltip-content img {
  aspect-ratio: 16/9;
  width: 100%;
  border-radius: var(--elements-image-corner-radius);
}
.tooltip-block .tooltip-container .close-btn {
  color: var(--text-style-headline);
  font-size: 14px;
  font-style: normal;
  font-weight: 900;
  line-height: 100%;
}
table:not(.duet-date__table) {
  width: fit-content;
  border-collapse: collapse;
  color: var(--text-style-headline);
  font-family: var(--typography-text-font);
  font-size: var(--typography-text-medium);
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: var(--typography-text-letterspacing);
  text-align: left;
  width: 100%;
}
@media (min-width:768px) {
  table:not(.duet-date__table) {
    width: fit-content;
  }
}
table:not(.duet-date__table) thead {
  border-bottom: var(--tables-header-divider-stroke) solid var(--tables-header-divider);
  display: none;
}
@media (min-width:768px) {
  table:not(.duet-date__table) thead {
    display: table-header-group;
  }
}
@media not (min-width:768px) {
  table:not(.duet-date__table) tbody {
    display: grid;
  }
}
table:not(.duet-date__table) tbody tr:nth-child(odd) {
  background: var(--tables-table-row-uneven);
}
table:not(.duet-date__table) thead tr,
table:not(.duet-date__table) tbody tr {
  border-bottom: var(--tables-table-divider-stroke) solid var(--tables-table-divider);
  padding: var(--spacings-100-c-xxx-small);
}
@media (min-width:768px) {
  table:not(.duet-date__table) thead tr .text-right,
  table:not(.duet-date__table) tbody tr .text-right {
    text-align: right;
  }
  table:not(.duet-date__table) thead tr .text-center,
  table:not(.duet-date__table) tbody tr .text-center {
    text-align: center;
  }
}
table:not(.duet-date__table) thead tr th.xx-large,
table:not(.duet-date__table) thead tr td.xx-large,
table:not(.duet-date__table) tbody tr th.xx-large,
table:not(.duet-date__table) tbody tr td.xx-large {
  width: 250px;
}
table:not(.duet-date__table) thead tr th.x-large,
table:not(.duet-date__table) thead tr td.x-large,
table:not(.duet-date__table) tbody tr th.x-large,
table:not(.duet-date__table) tbody tr td.x-large {
  width: 220px;
}
table:not(.duet-date__table) thead tr th.large,
table:not(.duet-date__table) thead tr td.large,
table:not(.duet-date__table) tbody tr th.large,
table:not(.duet-date__table) tbody tr td.large {
  width: 192px;
}
table:not(.duet-date__table) thead tr th.normal,
table:not(.duet-date__table) thead tr td.normal,
table:not(.duet-date__table) thead tr th,
table:not(.duet-date__table) thead tr td,
table:not(.duet-date__table) tbody tr th.normal,
table:not(.duet-date__table) tbody tr td.normal,
table:not(.duet-date__table) tbody tr th,
table:not(.duet-date__table) tbody tr td {
  width: 150px;
}
table:not(.duet-date__table) thead tr th.small,
table:not(.duet-date__table) thead tr td.small,
table:not(.duet-date__table) tbody tr th.small,
table:not(.duet-date__table) tbody tr td.small {
  width: 128px;
  max-width: 128px;
}
table:not(.duet-date__table) thead tr th,
table:not(.duet-date__table) tbody tr th {
  font-weight: 700;
  padding-top: var(--spacings-100-c-xxx-small);
  padding-bottom: var(--spacings-100-c-xxx-small);
}
table:not(.duet-date__table) thead tr th:first-of-type,
table:not(.duet-date__table) tbody tr th:first-of-type {
  padding-left: var(--spacings-100-c-xxx-small);
}
table:not(.duet-date__table) thead tr th:last-of-type,
table:not(.duet-date__table) tbody tr th:last-of-type {
  padding-right: var(--spacings-100-c-xxx-small);
}
table:not(.duet-date__table) thead tr td,
table:not(.duet-date__table) tbody tr td {
  justify-content: center;
  align-items: center;
  align-self: stretch;
}
@media (min-width:768px) {
  table:not(.duet-date__table) thead tr td,
  table:not(.duet-date__table) tbody tr td {
    padding: var(--spacings-100-c-xxx-small) 0px;
  }
  table:not(.duet-date__table) thead tr td:first-of-type,
  table:not(.duet-date__table) tbody tr td:first-of-type {
    padding-left: var(--spacings-100-c-xxx-small);
  }
  table:not(.duet-date__table) thead tr td:last-of-type,
  table:not(.duet-date__table) tbody tr td:last-of-type {
    padding-right: var(--spacings-100-c-xxx-small);
  }
}
@media not (min-width:768px) {
  table:not(.duet-date__table) thead tr td,
  table:not(.duet-date__table) tbody tr td {
    display: flex;
    width: 100%;
    justify-content: start;
    padding: 0;
    color: var(--text-style-headline);
  }
  table:not(.duet-date__table) thead tr td:before,
  table:not(.duet-date__table) tbody tr td:before {
    display: flex;
    content: attr(data-label) ":";
    color: var(--text-style-headline);
    padding-right: 5px;
  }
}
.grid, .variable-width-grid-parent {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gutter);
}
.grid > div, .variable-width-grid-parent > div {
  width: 100%;
  max-width: unset;
  grid-column: 1/span 12;
}
@media (min-width:768px) {
  .grid > div.narrow, .variable-width-grid-parent > div.narrow {
    grid-column: 2/span 10;
  }
}
@media (min-width:1200px) {
  .grid > div, .variable-width-grid-parent > div {
    grid-column: 2/span 10;
  }
  .grid > div.narrow, .variable-width-grid-parent > div.narrow {
    grid-column: 3/span 8;
  }
  .grid > div.wide, .variable-width-grid-parent > div.wide {
    grid-column: 1/span 12;
  }
}
.variable-width-grid-parent {
  width: 100%;
  justify-content: center;
  align-self: center;
}
@media (min-width:1200px) {
  .variable-width-grid-parent {
    max-width: var(--components-maxwidth-_component-wide);
  }
}
.variable-width-grid-parent .variable-width-grid {
  display: grid;
  width: 100%;
  justify-content: center;
  align-items: flex-start;
  gap: var(--grid-gutter);
  row-gap: var(--components-gap-section-vertical);
  align-self: stretch;
  grid-column: 1/span 12;
  grid-template-columns: repeat(12, 1fr);
}
.variable-width-grid-parent .variable-width-grid > :nth-child(even),
.variable-width-grid-parent .variable-width-grid > :nth-child(odd) {
  grid-column: span 12;
}
.variable-width-grid-parent .variable-width-grid > img,
.variable-width-grid-parent .variable-width-grid > picture {
  border-radius: var(--elements-image-corner-radius);
}
@media (min-width:1200px) {
  .variable-width-grid-parent .variable-width-grid {
    grid-column: 2/span 10;
    grid-template-columns: repeat(10, 1fr);
  }
}
@media (min-width:768px) {
  .variable-width-grid-parent .variable-width-grid.full-width > :nth-child(even),
  .variable-width-grid-parent .variable-width-grid.full-width > :nth-child(odd) {
    grid-column: span 12;
  }
  .variable-width-grid-parent .variable-width-grid > :nth-child(even),
  .variable-width-grid-parent .variable-width-grid > :nth-child(odd), .variable-width-grid-parent .variable-width-grid.width-50-50 > :nth-child(even),
  .variable-width-grid-parent .variable-width-grid.width-50-50 > :nth-child(odd) {
    grid-column: span 6;
  }
  .variable-width-grid-parent .variable-width-grid.width-40-60 > :nth-child(odd) {
    grid-column: span 4;
  }
  .variable-width-grid-parent .variable-width-grid.width-40-60 > :nth-child(even) {
    grid-column: span 8;
  }
  .variable-width-grid-parent .variable-width-grid.width-60-40 > :nth-child(odd) {
    grid-column: span 8;
  }
  .variable-width-grid-parent .variable-width-grid.width-60-40 > :nth-child(even) {
    grid-column: span 4;
  }
}
@media (min-width:984px) {
  .variable-width-grid-parent .variable-width-grid.full-width > :nth-child(even),
  .variable-width-grid-parent .variable-width-grid.full-width > :nth-child(odd) {
    grid-column: 2/span 10;
  }
  .variable-width-grid-parent .variable-width-grid:before, .variable-width-grid-parent .variable-width-grid.width-50-50:before {
    content: "";
  }
  .variable-width-grid-parent .variable-width-grid > :nth-child(even),
  .variable-width-grid-parent .variable-width-grid > :nth-child(odd), .variable-width-grid-parent .variable-width-grid.width-50-50 > :nth-child(even),
  .variable-width-grid-parent .variable-width-grid.width-50-50 > :nth-child(odd) {
    grid-column: span 5;
  }
  .variable-width-grid-parent .variable-width-grid.width-40-60 > :nth-child(odd) {
    grid-column: span 4;
  }
  .variable-width-grid-parent .variable-width-grid.width-40-60 > :nth-child(even) {
    grid-column: span 6;
  }
  .variable-width-grid-parent .variable-width-grid.width-60-40 > :nth-child(odd) {
    grid-column: span 6;
  }
  .variable-width-grid-parent .variable-width-grid.width-60-40 > :nth-child(even) {
    grid-column: span 4;
  }
}
@media (min-width:1200px) {
  .variable-width-grid-parent .variable-width-grid.full-width > :nth-child(even),
  .variable-width-grid-parent .variable-width-grid.full-width > :nth-child(odd) {
    grid-column: 1/span 10;
  }
  .variable-width-grid-parent .variable-width-grid:before, .variable-width-grid-parent .variable-width-grid.width-50-50:before {
    content: "";
    display: none;
  }
}
div.input-group {
  width: 100%;
}
@media (min-width:768px) {
  div.input-group.width-70 {
    width: 70%;
  }
  div.input-group.width-60 {
    width: 60%;
  }
  div.input-group.width-50 {
    width: 50%;
  }
  div.input-group.width-40 {
    width: 40%;
  }
  div.input-group.width-35 {
    width: 35%;
  }
  div.input-group.width-34 {
    width: 34%;
  }
  div.input-group.width-32 {
    width: 32%;
  }
  div.input-group.width-30 {
    width: 30%;
  }
  div.input-group.width-28 {
    width: 28%;
  }
  div.input-group.width-25 {
    width: 25%;
  }
  div.input-group.width-23 {
    width: 23%;
  }
  div.input-group.width-22 {
    width: 22%;
  }
  div.input-group.width-20 {
    width: 20%;
  }
  div.input-group.width-16 {
    width: 16%;
  }
  div.input-group.width-14 {
    width: 14%;
  }
  div.input-group.width-12 {
    width: 12%;
  }
  div.input-group.width-11 {
    width: 11%;
  }
  div.input-group.width-10 {
    width: 10%;
  }
  div.input-group.width-9 {
    width: 9%;
  }
}
div.service-container .service-wrapper {
  padding-top: var(--spacings-75-b-small);
}
@media (min-width:1200px) {
  div.service-container .service-wrapper .form-wrapper.no-stepper {
    grid-column: 3/span 8;
  }
}
div.service-container .service-wrapper .form-wrapper .step-container .content-block {
  width: 100%;
}
div.service-container .service-wrapper .form-wrapper .step-container .content-block .text-block {
  width: 100%;
}
@media (max-width: 768px) {
  div.service-container .service-wrapper .form-wrapper .step-container .content-block {
    padding-left: var(--grid-margin);
    padding-right: var(--grid-margin);
  }
}
div.service-container .service-wrapper .form-wrapper .step-container .form-group.locked {
  pointer-events: none;
}
div.service-container .service-wrapper .form-wrapper .step-container .form-group.locked .input-wrapper input:not(.phone-input) textarea,
div.service-container .service-wrapper .form-wrapper .step-container .form-group.locked .input-wrapper div.input-field {
  background: var(--form-style-locked);
  border: var(--form-style-stroke-width) solid var(--form-style-outline);
  border-radius: var(--forms-default-cornerradius);
}
div.service-container .service-wrapper .form-wrapper .step-container .notification.background {
  z-index: 1;
}
div.service-container .service-wrapper .form-wrapper .step-container .notification.background > i {
  color: var(--text-style-text-secondary);
}
div.service-container .service-wrapper .form-wrapper .step-container .radiogroup {
  display: flex;
  flex-direction: column;
  gap: var(--spacings-100-c-xx-small);
}
div.service-container .service-wrapper .form-wrapper .step-container .radiogroup span.primary-label {
  font-weight: 700;
  color: var(--form-style-label);
  font-size: var(--typography-text-small);
  line-height: 160%;
  letter-spacing: var(--typography-text-letterspacing);
  font-family: var(--typography-text-font);
}
div.service-container .service-wrapper .form-wrapper .step-container .input.validated.error .duet-date__input-wrapper {
  border: 2px solid var(--state-error);
  border-radius: 8px;
}
div.service-container .service-wrapper .form-wrapper span.info-text {
  font-weight: 400;
  color: var(--text-style-text-secondary);
  font-family: var(--typography-text-font);
  font-style: normal;
  line-height: 160%;
  letter-spacing: var(--typography-text-letterspacing);
  font-size: var(--typography-text-small);
}
div.service-container .service-wrapper .form-wrapper div.button-container {
  flex-direction: column-reverse;
}
@media (min-width:768px) {
  div.service-container .service-wrapper .form-wrapper div.button-container {
    flex-direction: row;
  }
}
div.service-container .service-wrapper .form-wrapper div.button-container .loader {
  display: none;
}
div.service-container .service-wrapper .form-wrapper div.button-container .btn-commit-label {
  display: none;
}
div.service-container .service-wrapper .form-wrapper div.button-container button.btn.commit .btn-commit-label {
  display: block;
}
div.service-container .service-wrapper .form-wrapper div.button-container button.btn.commit .btn-next-label {
  display: none;
}
div.service-container .service-wrapper .form-wrapper div.button-container button.btn.load .btn-label {
  display: none;
}
div.service-container .service-wrapper .form-wrapper div.button-container button.btn.load .btn-icon {
  display: none;
}
div.service-container .service-wrapper .form-wrapper div.button-container button.btn.load .loader {
  width: var(--button-icon-size);
  height: var(--button-icon-size);
  border: var(--forms-checkbox-corner-radius) solid;
  border-bottom-color: transparent;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}
@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
div.service-container .service-wrapper .share-block {
  gap: 10px;
  display: flex;
  flex-direction: row;
}
div.service-container .service-wrapper .share-block div {
  align-content: center;
  word-break: keep-all;
  hyphens: none;
}
div.service-container .service-wrapper .share-block .icon-block {
  display: flex;
  align-items: flex-start;
  gap: var(--spacings-100-c-xxx-small);
}
div.service-container .service-wrapper .share-block .icon-block a,
div.service-container .service-wrapper .share-block .icon-block .copy-link {
  text-decoration: none;
  color: var(--button-style-secondary-front);
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
  justify-content: center;
  cursor: pointer;
}
div.service-container .service-wrapper .share-block .icon-block a:hover, div.service-container .service-wrapper .share-block .icon-block a:focus,
div.service-container .service-wrapper .share-block .icon-block .copy-link:hover,
div.service-container .service-wrapper .share-block .icon-block .copy-link:focus {
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--color-gray-scale-200);
  background: var(--color-gray-scale-200);
}
div.service-container .service-wrapper .share-block .icon-block a i,
div.service-container .service-wrapper .share-block .icon-block .copy-link i {
  width: 24px;
  height: 24px;
  font-size: 100%;
  padding: 0;
  align-content: center;
  cursor: pointer;
}
div.service-container .service-wrapper .share-block .icon-block .copy-link {
  position: relative;
}
div.service-container .service-wrapper .share-block .icon-block .copy-link span {
  display: none;
  background: var(--color-gray-scale-300);
  padding: 5px 10px;
  border-radius: var(--typography-text-small);
  font-size: var(--typography-text-small);
  position: absolute;
  bottom: 130%;
  left: 50%;
  transform: translateX(-50%);
}
div.service-container .service-wrapper .share-block .icon-block .copy-link span.show {
  display: block;
}
div.service-container .service-wrapper .step-global-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacings-75-b-small);
  padding: var(--spacings-75-b-small) var(--grid-margin);
}
@media (min-width:768px) {
  div.service-container .service-wrapper .step-global-container {
    padding: var(--spacings-75-b-small) 0;
  }
}
div.service-container .service-wrapper .step-global-container div.error-container {
  background: var(--state-error-background);
  border-radius: var(--elements-default-corner-radius);
  display: flex;
  align-items: center;
  gap: var(--spacings-75-b-x-small-plus);
  padding: var(--spacings-75-b-xx-small) var(--spacings-75-b-small);
  border: var(--elements-stroke) solid var(--elements-divider-stroke);
  width: 100%;
}
div.service-container .service-wrapper .step-global-container div.error-container .error-icon {
  color: var(--badges-error-color);
  font-size: var(--typography-text-x-large);
  align-content: center;
}
div.service-container .service-wrapper .step-global-container div.error-container .error-message {
  display: flex;
  gap: 1rem;
  align-items: center;
}
div.service-container .service-wrapper .row.form-inputs {
  width: 100%;
  flex-direction: column;
}
@media (min-width:768px) {
  div.service-container .service-wrapper .row.form-inputs {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
  }
}
@media (max-width: 768px) {
  div.service-container .service-wrapper .row.form-inputs {
    gap: 8px;
    display: flex;
  }
}
div.service-container .service-wrapper .row.with-gap {
  row-gap: var(--spacings-75-b-small);
  column-gap: var(--spacings-50-a-small);
}
@media (max-width: 768px) {
  #activateSmartMeterInterfaceForm .meter-number-row {
    max-width: 75%;
  }
}
#activateSmartMeterInterfaceForm #removeMeterNumber {
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  margin-left: var(--spacings-100-c-x-small);
  color: var(--button-style-secondary-front);
}
#activateSmartMeterInterfaceForm #removeMeterNumber i {
  width: 18px;
  height: 20px;
}
#deliveryRequestForm .segmented-control-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--spacings-100-c-xx-small);
}
#deliveryRequestForm .segmented-control-wrapper .info-text {
  color: var(--form-style-label);
}
#deliveryRequestForm .checkbox .input-wrapper {
  align-items: start;
}
#deliveryRequestForm .checkbox .input-wrapper input {
  margin-top: var(--forms-_offset-default);
}
div.service-container calorific-table {
  width: 100%;
  gap: var(--spacings-75-b-small);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
div.service-container calorific-table div.table-override {
  width: 100%;
}
div.service-container calorific-table div.table-override > table {
  width: 100%;
}
/* CSS Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
/* Remove default body margin */
body {
  margin: 0;
  font-family: sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Remove default styling for lists */
ul,
ol {
  list-style: none;
}
/* Remove default text decoration */
a {
  text-decoration: none;
  color: inherit;
}
/* Remove default styling for images */
img {
  max-width: 100%;
  display: block;
  height: auto;
}
/* Remove default form element styling */
button,
input,
textarea,
select {
  font: inherit;
  margin: 0;
  border: none;
  background: none;
  color: inherit;
}
/* Remove default button appearance */
button {
  cursor: pointer;
  background-color: transparent;
}
/* Set default HTML and body height */
html,
body {
  height: 100%;
}
/* Ensure tables don't have unexpected borders and spacing */
table {
  border-collapse: collapse;
  border-spacing: 0;
}
/* Reset heading and paragraph margins */
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}
/*******************************/
/*** Netz variables ***/
/*****************************/
/* Breakpoints */
:root {
  --spacings-50-a-xxx-large: 96px;
  --spacings-50-a-xx-large: 64px;
  --spacings-50-a-x-large: 48px;
  --spacings-50-a-large: 32px;
  --spacings-50-a-medium-plus: 24px;
  --spacings-75-b-xxx-large: 144px;
  --spacings-50-a-medium: 16px;
  --spacings-75-b-xx-large: 96px;
  --spacings-50-a-small: 12px;
  --spacings-50-a-x-small-plus: 10px;
  --spacings-75-b-x-large: 72px;
  --spacings-50-a-x-small: 8px;
  --spacings-50-a-xx-small: 6px;
  --spacings-50-a-xxx-small: 4px;
  --spacings-75-b-large: 48px;
  --spacings-75-b-medium-plus: 36px;
  --spacings-75-b-medium: 24px;
  --spacings-75-b-small: 18px;
  --spacings-75-b-x-small-plus: 15px;
  --spacings-75-b-x-small: 12px;
  --spacings-75-b-xx-small: 9px;
  --spacings-75-b-xxx-small: 6px;
  --spacings-100-c-xxx-large: 192px;
  --spacings-100-c-xx-large: 128px;
  --spacings-100-c-x-large: 96px;
  --spacings-100-c-large: 64px;
  --spacings-100-c-medium-plus: 48px;
  --spacings-100-c-medium: 32px;
  --spacings-100-c-small: 24px;
  --spacings-100-c-x-small-plus: 20px;
  --spacings-100-c-x-small: 16px;
  --spacings-100-c-xx-small: 12px;
  --spacings-100-c-xxx-small: 8px;
  --spacings-100-c-xxxx-small: 4px;
  --typography-headline-h1: 31px;
  --button-typography-large: 20px;
  --grid-width: 0px;
  --components-gap-section-vertical: var(--spacings-75-b-large);
  --components-maxwidth-_text: 320px;
  --components-maxwidth-_component-default: 320px;
  --components-maxwidth-_component-narrow: 320px;
  --components-maxwidth-_component-wide: 320px;
  --components-gap-section-vertical-narrow: var(--spacings-75-b-medium-plus);
  --components-gap-section-horizontal: var(--spacings-75-b-large);
  --components-gap-section-padding: var(--spacings-50-a-xx-large);
  --components-gap-section-padding-narrow: var(--spacings-50-a-large);
  --components-gap-elements-row: var(--spacings-100-c-x-small);
  --components-gap-elements-row-narrow: var(--spacings-100-c-xx-small);
  --components-gap-elements-row-seperator: var(--spacings-75-b-large);
  --components-gap-elements-row-seperator-narrow: var(--spacings-75-b-medium);
  --components-gap-inner-elements: var(--spacings-75-b-medium);
  --components-gap-box-padding-vertical: var(--spacings-75-b-large);
  --components-gap-box-padding-horizontal: var(--spacings-50-a-medium-plus);
  --elements-large-corner-radius: 16px;
  --elements-default-corner-radius: 8px;
  --elements-small-corner-radius: 4px;
  --elements-inner-corner-radius: 2px;
  --forms-large-cornerradius: 8px;
  --forms-default-cornerradius: 6px;
  --elements-corner-radius-padding: 2px;
  --elements-image-corner-radius: 8px;
  --grid-gutter: 16px;
  --grid-margin: 20px;
  --button-typography-default: 16px;
  --button-typography-small: 13px;
  --button-typography-large-lineheight: 28px;
  --button-typography-default-lineheight: 24px;
  --button-typography-small-lineheight: 20px;
  --button-typography-large-letterspacing: 0px;
  --button-typography-default-letterspacing: 0px;
  --button-typography-small-letterspacing: 0px;
  --button-large-minwidth: 128px;
  --button-default-minwidth: 96px;
  --button-small-minwidth: 64px;
  --button-large-padding-horizontal: 32px;
  --button-default-padding-horizontal: 24px;
  --button-small-padding-horizontal: 16px;
  --button-large-padding-vertical: 8px;
  --button-default-padding-vertical: 6px;
  --button-small-padding-vertical: 4px;
  --button-large-gap: 12px;
  --button-default-gap: 8px;
  --button-small-gap: 4px;
  --button-large-cornerradius: 8px;
  --button-default-cornerradius: 6px;
  --button-small-cornerradius: 4px;
  --button-large-size: var(--sizes-large);
  --elements-circle-shape: 256px;
  --button-default-size: var(--sizes-default);
  --button-small-size: var(--sizes-small);
  --elements-large-size: var(--sizes-large);
  --elements-default-size: var(--sizes-default);
  --elements-small-size: var(--sizes-small);
  --typography-headline-h2: 27px;
  --button-circle-button-large-size: var(--sizes-large);
  --button-circle-button-default-size: var(--sizes-default);
  --button-circle-button-small-size: var(--sizes-small);
  --typography-headline-h3: 24px;
  --typography-headline-h4: 21px;
  --typography-headline-h5: 19px;
  --typography-headline-h6: 17px;
  --typography-headline-h1-padding: 24px;
  --typography-headline-h2-padding: 24px;
  --typography-headline-h3-padding: 24px;
  --typography-headline-h4-padding: 24px;
  --typography-headline-h5-padding: 16px;
  --typography-headline-h6-padding: 16px;
  --typography-headline-h1-lineheight: 120%;
  --typography-headline-h2-lineheight: 120%;
  --typography-headline-h3-lineheight: 120%;
  --typography-headline-h4-lineheight: 120%;
  --typography-headline-h5-lineheight: 120%;
  --typography-headline-h6-lineheight: 120%;
  --typography-headline-h1-letterspacing: 0px;
  --typography-headline-h2-letterspacing: 0px;
  --typography-headline-h3-letterspacing: 0px;
  --typography-headline-h4-letterspacing: 0px;
  --typography-headline-h5-letterspacing: 0px;
  --typography-headline-h6-letterspacing: 0px;
  --typography-text-xx-large: 21px;
  --typography-icons-96-responsive: 64px;
  --typography-icons-48-responsive: 32px;
  --typography-icons-40-responsive: 30px;
  --typography-text-x-large: 19px;
  --typography-text-large: 17px;
  --typography-text-medium: 15px;
  --typography-text-small: 13px;
  --typography-text-x-small: 11px;
  --typography-text-p-padding: 16px;
  --typography-text-lineheight: 160%;
  --typography-text-letterspacing: 0px;
  --forms-small-cornerradius: 4px;
  --forms-checkbox-corner-radius: 3px;
  --forms-_offset-large: 4px;
  --forms-_offset-default: 2px;
  --forms-_offset-small: 1px;
  --forms-large-size: var(--sizes-large);
  --forms-default-size: var(--sizes-default);
  --forms-small-size: var(--sizes-small);
  --components-navigation-height: 64px;
  --breakpoint: Mobile;
  --components-numbers-numbers-large: 33px;
  --components-numbers-numbers-default: 27px;
  --components-numbers-numbers-letterspacing: 0px;
  --elements-chips: 32px;
  /* Tablet */
}
@media (min-width: 768px) {
  :root {
    --spacings-50-a-xxx-large: 144px;
    --spacings-50-a-xx-large: 96px;
    --spacings-50-a-x-large: 64px;
    --spacings-50-a-large: 48px;
    --spacings-50-a-medium-plus: 32px;
    --spacings-75-b-xxx-large: 168px;
    --spacings-50-a-medium: 24px;
    --spacings-75-b-xx-large: 112px;
    --spacings-50-a-small: 16px;
    --spacings-50-a-x-small-plus: 15px;
    --spacings-75-b-x-large: 84px;
    --spacings-50-a-x-small: 12px;
    --spacings-50-a-xx-small: 9px;
    --spacings-50-a-xxx-small: 6px;
    --spacings-75-b-large: 56px;
    --spacings-75-b-medium-plus: 42px;
    --spacings-75-b-medium: 28px;
    --spacings-75-b-small: 21px;
    --spacings-75-b-x-small-plus: 17px;
    --spacings-75-b-x-small: 14px;
    --spacings-75-b-xx-small: 10px;
    --spacings-75-b-xxx-small: 7px;
    --spacings-100-c-xxx-large: 192px;
    --spacings-100-c-xx-large: 128px;
    --spacings-100-c-x-large: 96px;
    --spacings-100-c-large: 64px;
    --spacings-100-c-medium-plus: 48px;
    --spacings-100-c-medium: 32px;
    --spacings-100-c-small: 24px;
    --spacings-100-c-x-small-plus: 20px;
    --spacings-100-c-x-small: 16px;
    --spacings-100-c-xx-small: 12px;
    --spacings-100-c-xxx-small: 8px;
    --spacings-100-c-xxxx-small: 4px;
    --typography-headline-h1: 44px;
    --button-typography-large: 21px;
    --grid-width: 0px;
    --components-gap-section-vertical: var(--spacings-75-b-large);
    --components-maxwidth-_text: 884px;
    --components-maxwidth-_component-default: 884px;
    --components-maxwidth-_component-narrow: 730px;
    --components-maxwidth-_component-wide: 884px;
    --components-gap-section-vertical-narrow: var(--spacings-75-b-medium-plus);
    --components-gap-section-horizontal: var(--grid-gutter);
    --components-gap-section-padding: var(--spacings-50-a-xx-large);
    --components-gap-section-padding-narrow: var(--spacings-50-a-large);
    --components-gap-elements-row: var(--spacings-100-c-medium);
    --components-gap-elements-row-narrow: var(--spacings-100-c-xx-small);
    --components-gap-elements-row-seperator: var(--spacings-75-b-large);
    --components-gap-elements-row-seperator-narrow: var(--spacings-75-b-medium-plus);
    --components-gap-inner-elements: var(--grid-gutter);
    --components-gap-box-padding-vertical: var(--spacings-75-b-large);
    --components-gap-box-padding-horizontal: var(--spacings-50-a-medium-plus);
    --elements-large-corner-radius: 18px;
    --elements-default-corner-radius: 12px;
    --elements-small-corner-radius: 4px;
    --elements-inner-corner-radius: 2px;
    --forms-large-cornerradius: 8px;
    --forms-default-cornerradius: 6px;
    --elements-corner-radius-padding: 2px;
    --elements-image-corner-radius: 12px;
    --grid-gutter: 40px;
    --grid-margin: 48px;
    --button-typography-default: 17px;
    --button-typography-small: 14px;
    --button-typography-large-lineheight: 28px;
    --button-typography-default-lineheight: 24px;
    --button-typography-small-lineheight: 20px;
    --button-typography-large-letterspacing: 0px;
    --button-typography-default-letterspacing: 0px;
    --button-typography-small-letterspacing: 0px;
    --button-large-minwidth: 144px;
    --button-default-minwidth: 112px;
    --button-small-minwidth: 80px;
    --button-large-padding-horizontal: 40px;
    --button-default-padding-horizontal: 28px;
    --button-small-padding-horizontal: 20px;
    --button-large-padding-vertical: 8px;
    --button-default-padding-vertical: 6px;
    --button-small-padding-vertical: 4px;
    --button-large-gap: 12px;
    --button-default-gap: 8px;
    --button-small-gap: 4px;
    --button-large-cornerradius: 8px;
    --button-default-cornerradius: 6px;
    --button-small-cornerradius: 4px;
    --button-large-size: var(--sizes-large);
    --elements-circle-shape: 256px;
    --button-default-size: var(--sizes-default);
    --button-small-size: var(--sizes-small);
    --elements-large-size: var(--sizes-large);
    --elements-default-size: var(--sizes-default);
    --elements-small-size: var(--sizes-small);
    --typography-headline-h2: 36px;
    --button-circle-button-large-size: var(--sizes-large);
    --button-circle-button-default-size: var(--sizes-default);
    --button-circle-button-small-size: var(--sizes-small);
    --typography-headline-h3: 30px;
    --typography-headline-h4: 25px;
    --typography-headline-h5: 22px;
    --typography-headline-h6: 19px;
    --typography-headline-h1-padding: 24px;
    --typography-headline-h2-padding: 24px;
    --typography-headline-h3-padding: 24px;
    --typography-headline-h4-padding: 24px;
    --typography-headline-h5-padding: 24px;
    --typography-headline-h6-padding: 16px;
    --typography-headline-h1-lineheight: 120%;
    --typography-headline-h2-lineheight: 120%;
    --typography-headline-h3-lineheight: 120%;
    --typography-headline-h4-lineheight: 120%;
    --typography-headline-h5-lineheight: 120%;
    --typography-headline-h6-lineheight: 120%%;
    --typography-headline-h1-letterspacing: 0px;
    --typography-headline-h2-letterspacing: 0px;
    --typography-headline-h3-letterspacing: 0px;
    --typography-headline-h4-letterspacing: 0px;
    --typography-headline-h5-letterspacing: 0px;
    --typography-headline-h6-letterspacing: 0px;
    --typography-text-xx-large: 25px;
    --typography-icons-96-responsive: 80px;
    --typography-icons-48-responsive: 40px;
    --typography-icons-40-responsive: 35px;
    --typography-text-x-large: 22px;
    --typography-text-large: 19px;
    --typography-text-medium: 16px;
    --typography-text-small: 14px;
    --typography-text-x-small: 12px;
    --typography-text-p-padding: 16px;
    --typography-text-lineheight: 160%;
    --typography-text-letterspacing: 0px;
    --forms-small-cornerradius: 4px;
    --forms-checkbox-corner-radius: 3px;
    --forms-_offset-large: 6px;
    --forms-_offset-default: 3px;
    --forms-_offset-small: 1px;
    --forms-large-size: var(--sizes-large);
    --forms-default-size: var(--sizes-default);
    --forms-small-size: var(--sizes-small);
    --components-navigation-height: 64px;
    --breakpoint: Tablet;
    --components-numbers-numbers-large: 48px;
    --components-numbers-numbers-default: 36px;
    --components-numbers-numbers-letterspacing: 0px;
    --elements-chips: 36px;
  }
}
:root {
  /* Desktop */
}
@media (min-width: 1200px) {
  :root {
    --spacings-50-a-xxx-large: 192px;
    --spacings-50-a-xx-large: 128px;
    --spacings-50-a-x-large: 96px;
    --spacings-50-a-large: 64px;
    --spacings-50-a-medium-plus: 48px;
    --spacings-75-b-xxx-large: 192px;
    --spacings-50-a-medium: 32px;
    --spacings-75-b-xx-large: 128px;
    --spacings-50-a-small: 24px;
    --spacings-50-a-x-small-plus: 20px;
    --spacings-75-b-x-large: 96px;
    --spacings-50-a-x-small: 16px;
    --spacings-50-a-xx-small: 12px;
    --spacings-50-a-xxx-small: 8px;
    --spacings-75-b-large: 64px;
    --spacings-75-b-medium-plus: 48px;
    --spacings-75-b-medium: 32px;
    --spacings-75-b-small: 24px;
    --spacings-75-b-x-small-plus: 20px;
    --spacings-75-b-x-small: 16px;
    --spacings-75-b-xx-small: 12px;
    --spacings-75-b-xxx-small: 8px;
    --spacings-100-c-xxx-large: 192px;
    --spacings-100-c-xx-large: 128px;
    --spacings-100-c-x-large: 96px;
    --spacings-100-c-large: 64px;
    --spacings-100-c-medium-plus: 48px;
    --spacings-100-c-medium: 32px;
    --spacings-100-c-small: 24px;
    --spacings-100-c-x-small-plus: 20px;
    --spacings-100-c-x-small: 16px;
    --spacings-100-c-xx-small: 12px;
    --spacings-100-c-xxx-small: 8px;
    --spacings-100-c-xxxx-small: 4px;
    --typography-headline-h1: 58px;
    --button-typography-large: 21px;
    --grid-width: 56px;
    --components-gap-section-vertical: var(--spacings-75-b-large);
    --components-maxwidth-_text: 1136px;
    --components-maxwidth-_component-default: 1136px;
    --components-maxwidth-_component-narrow: 896px;
    --components-maxwidth-_component-wide: 1376px;
    --components-gap-section-vertical-narrow: var(--spacings-75-b-medium-plus);
    --components-gap-section-horizontal: var(--grid-gutter);
    --components-gap-section-padding: var(--spacings-50-a-xx-large);
    --components-gap-section-padding-narrow: var(--spacings-50-a-large);
    --components-gap-elements-row: var(--spacings-100-c-medium-plus);
    --components-gap-elements-row-narrow: var(--spacings-100-c-x-small);
    --components-gap-elements-row-seperator: var(--spacings-75-b-large);
    --components-gap-elements-row-seperator-narrow: var(--spacings-75-b-medium-plus);
    --components-gap-inner-elements: var(--grid-gutter);
    --components-gap-box-padding-vertical: var(--spacings-75-b-large);
    --components-gap-box-padding-horizontal: var(--spacings-50-a-large);
    --elements-large-corner-radius: 20px;
    --elements-default-corner-radius: 12px;
    --elements-small-corner-radius: 6px;
    --elements-inner-corner-radius: 4px;
    --forms-large-cornerradius: 8px;
    --forms-default-cornerradius: 6px;
    --elements-corner-radius-padding: 2px;
    --elements-image-corner-radius: 12px;
    --grid-gutter: 64px;
    --grid-margin: 64px;
    --button-typography-default: 17px;
    --button-typography-small: 15px;
    --button-typography-large-lineheight: 28px;
    --button-typography-default-lineheight: 24px;
    --button-typography-small-lineheight: 20px;
    --button-typography-large-letterspacing: 0px;
    --button-typography-default-letterspacing: 0px;
    --button-typography-small-letterspacing: 0px;
    --button-large-minwidth: 160px;
    --button-default-minwidth: 128px;
    --button-small-minwidth: 96px;
    --button-large-padding-horizontal: 48px;
    --button-default-padding-horizontal: 32px;
    --button-small-padding-horizontal: 24px;
    --button-large-padding-vertical: 8px;
    --button-default-padding-vertical: 6px;
    --button-small-padding-vertical: 4px;
    --button-large-gap: 12px;
    --button-default-gap: 8px;
    --button-small-gap: 4px;
    --button-large-cornerradius: 8px;
    --button-default-cornerradius: 6px;
    --button-small-cornerradius: 4px;
    --button-large-size: var(--sizes-large);
    --elements-circle-shape: 256px;
    --button-default-size: var(--sizes-default);
    --button-small-size: var(--sizes-small);
    --elements-large-size: var(--sizes-large);
    --elements-default-size: var(--sizes-default);
    --elements-small-size: var(--sizes-small);
    --typography-headline-h2: 46px;
    --button-circle-button-large-size: var(--sizes-large);
    --button-circle-button-default-size: var(--sizes-default);
    --button-circle-button-small-size: var(--sizes-small);
    --typography-headline-h3: 36px;
    --typography-headline-h4: 29px;
    --typography-headline-h5: 25px;
    --typography-headline-h6: 21px;
    --typography-headline-h1-padding: 32px;
    --typography-headline-h2-padding: 24px;
    --typography-headline-h3-padding: 24px;
    --typography-headline-h4-padding: 24px;
    --typography-headline-h5-padding: 24px;
    --typography-headline-h6-padding: 16px;
    --typography-headline-h1-lineheight: 120%;
    --typography-headline-h2-lineheight: 120%;
    --typography-headline-h3-lineheight: 120%;
    --typography-headline-h4-lineheight: 120%;
    --typography-headline-h5-lineheight: 120%;
    --typography-headline-h6-lineheight: 120%;
    --typography-headline-h1-letterspacing: 0px;
    --typography-headline-h2-letterspacing: 0px;
    --typography-headline-h3-letterspacing: 0px;
    --typography-headline-h4-letterspacing: 0px;
    --typography-headline-h5-letterspacing: 0px;
    --typography-headline-h6-letterspacing: 0px;
    --typography-text-xx-large: 29px;
    --typography-icons-96-responsive: 96px;
    --typography-icons-48-responsive: 48px;
    --typography-icons-40-responsive: 40px;
    --typography-text-x-large: 25px;
    --typography-text-large: 21px;
    --typography-text-medium: 17px;
    --typography-text-small: 15px;
    --typography-text-x-small: 13px;
    --typography-text-p-padding: 16px;
    --typography-text-lineheight: 160%;
    --typography-text-letterspacing: 0px;
    --forms-small-cornerradius: 4px;
    --forms-checkbox-corner-radius: 3px;
    --forms-_offset-large: 7px;
    --forms-_offset-default: 3px;
    --forms-_offset-small: 2px;
    --forms-large-size: var(--sizes-large);
    --forms-default-size: var(--sizes-default);
    --forms-small-size: var(--sizes-small);
    --components-navigation-height: 80px;
    --breakpoint: Desktop;
    --components-numbers-numbers-large: 64px;
    --components-numbers-numbers-default: 46px;
    --components-numbers-numbers-letterspacing: 0px;
    --elements-chips: 40px;
  }
}
/* Theme */
:root,
[data-theme=light] {
  --text-style-headline: var(--color-primary-cd-color-4);
  --elements-decoration-color: var(--color-primary-cd-color-1);
  --text-style-headline-secondary: var(--color-primary-cd-color-1);
  --text-style-text-primary: var(--color-primary-cd-color-4);
  --text-style-text-secondary: rgba(112, 112, 112, 1);
  --text-style-link: var(--color-primary-cd-color-2);
  --tables-table-row-uneven: var(--color-transparency-darken-4);
  --tables-header-divider: var(--color-primary-cd-color-3);
  --tables-header-divider-stroke: 2px;
  --tables-table-divider: var(--color-transparency-darken-15);
  --tables-table-divider-stroke: 1px;
  --background-default: var(--color-primary-white);
  --background-alternative: var(--color-gray-scale-100);
  --background-light-box: var(--color-gray-scale-100);
  --background-dark-box: var(--color-primary-cd-color-1);
  --form-style-outline: var(--text-style-text-secondary);
  --form-style-hover-outline: var(--color-gray-scale-600);
  --form-style-stroke-width: 1px;
  --form-style-hover-stroke-width: 2px;
  --form-style-background: var(--color-primary-white);
  --form-style-hover-background: var(--color-primary-white);
  --form-style-focus-outline: var(--interaction-focus);
  --form-style-focus-stroke-width: 2px;
  --form-style-focus-background: var(--color-primary-white);
  --form-style-label: var(--text-style-text-secondary);
  --form-style-placeholder-text: var(--text-style-text-secondary);
  --form-style-help-text: var(--text-style-text-secondary);
  --form-style-hover-placeholder-text: var(--text-style-text-secondary);
  --form-style-focus-placeholder-text: var(--text-style-text-secondary);
  --form-style-filled-text: var(--text-style-text-primary);
  --form-style-hover-filled-text: var(--text-style-text-primary);
  --form-style-focus-filled-text: var(--text-style-text-primary);
  --elements-active-front: var(--color-primary-white);
  --elements-active-back: var(--color-primary-cd-color-1);
  --elements-passive-front: var(--color-transparency-darken-60);
  --elements-passive-back: var(--color-transparency-darken-10);
  --elements-divider-stroke: var(--color-transparency-darken-15);
  --form-style-locked: var(--color-transparency-darken-10);
  --elements-shadow: var(--color-transparency-darken-15);
  --elements-shadow-strong: var(--color-transparency-darken-15);
  --tab-active-outline: var(--color-primary-cd-color-2);
  --tab-active-stroke-width: 2px;
  --interaction-hover: var(--color-transparency-darken-4);
  --interaction-hover-strong: var(--color-transparency-darken-15);
  --interaction-hover-alternative: var(--color-transparency-lighten-10);
  --interaction-hover-alternative-strong: var(--color-transparency-lighten-20);
  --interaction-active: var(--color-secondary-secondary-2);
  --button-style-primary-front: var(--color-primary-white);
  --interaction-focus: var(--color-primary-cd-color-4);
  --button-style-primary-back: var(--color-primary-cd-color-2);
  --button-style-primary-stroke: var(--color-primary-transparent);
  --button-style-primary-stroke-width: 0px;
  --button-style-primary-front-hover: var(--color-primary-white);
  --button-style-primary-back-hover: var(--color-transparency-darken-20);
  --button-style-primary-stroke-hover: var(--color-primary-transparent);
  --button-style-primary-stroke-width-hover: 0px;
  --button-style-secondary-front: var(--color-primary-cd-color-2);
  --button-style-secondary-back: var(--color-primary-transparent);
  --button-style-secondary-stroke: var(--color-primary-cd-color-2);
  --button-style-secondary-stroke-width: 1px;
  --button-style-secondary-front-hover: var(--color-primary-cd-color-2);
  --button-style-secondary-back-hover: var(--color-transparency-darken-5);
  --button-style-secondary-stroke-hover: var(--color-primary-cd-color-2);
  --button-style-secondary-stroke-width-hover: 2px;
  --badges-solid-text: var(--color-primary-white);
  --badges-solid-color: var(--color-primary-cd-color-1);
  --badges-outline-text: var(--color-primary-cd-color-3);
  --badges-outline-stroke: var(--color-primary-cd-color-3);
  --state-success: rgba(26, 128, 0, 1);
  --state-success-background: rgba(26, 128, 0, 0.08);
  --badges-success-text: var(--color-primary-white);
  --badges-success-color: rgba(26, 128, 0, 1);
  --badges-warning-text: var(--text-style-text-primary);
  --state-warning: rgba(191, 121, 0, 1);
  --state-warning-background: rgba(255, 184, 0, 0.08);
  --badges-warning-color: rgba(255, 184, 0, 1);
  --state-error: rgba(192, 11, 0, 1);
  --state-error-background: rgba(192, 11, 0, 0.08);
  --state-info: rgba(77, 163, 255, 1);
  --badges-error-text: var(--color-primary-white);
  --state-info-background: rgba(77, 163, 255, 0.08);
  --badges-error-color: rgba(192, 11, 0, 1);
  --elements-stroke: 1px;
  --elements-stroke-hover: 1px;
  --elements-stroke-active: 2px;
  --elements-stroke-strong: 2px;
  --elements-stroke-strong-hover: 2px;
  --elements-stroke-strong-active: 2px;
  --elements-interaction-indicator: 8px;
  --interaction-stroke-width-focus: 2px;
}
/* Dark */
[data-theme=grey] {
  --text-style-headline: var(--color-primary-cd-color-4);
  --elements-decoration-color: var(--color-primary-cd-color-1);
  --text-style-headline-secondary: var(--color-primary-cd-color-1);
  --text-style-text-primary: var(--color-primary-cd-color-4);
  --text-style-text-secondary: rgba(112, 112, 112, 1);
  --text-style-link: var(--color-primary-cd-color-2);
  --tables-table-row-uneven: var(--color-transparency-darken-4);
  --tables-header-divider: var(--color-primary-cd-color-3);
  --tables-header-divider-stroke: 2px;
  --tables-table-divider: var(--color-transparency-darken-15);
  --tables-table-divider-stroke: 1px;
  --background-default: var(--color-gray-scale-100);
  --background-alternative: var(--color-primary-white);
  --background-light-box: var(--color-primary-white);
  --background-dark-box: var(--color-primary-cd-color-1);
  --form-style-outline: var(--text-style-text-secondary);
  --form-style-hover-outline: var(--color-gray-scale-600);
  --form-style-stroke-width: 1px;
  --form-style-hover-stroke-width: 2px;
  --form-style-background: var(--color-primary-white);
  --form-style-hover-background: var(--color-primary-white);
  --form-style-focus-outline: var(--interaction-focus);
  --form-style-focus-stroke-width: 2px;
  --form-style-focus-background: var(--color-primary-white);
  --form-style-label: var(--text-style-text-secondary);
  --form-style-placeholder-text: var(--text-style-text-secondary);
  --form-style-help-text: var(--text-style-text-secondary);
  --form-style-hover-placeholder-text: var(--text-style-text-secondary);
  --form-style-focus-placeholder-text: var(--text-style-text-secondary);
  --form-style-filled-text: var(--text-style-text-primary);
  --form-style-hover-filled-text: var(--text-style-text-primary);
  --form-style-focus-filled-text: var(--text-style-text-primary);
  --elements-active-front: var(--color-primary-white);
  --elements-active-back: var(--color-primary-cd-color-1);
  --elements-passive-front: var(--color-transparency-darken-60);
  --elements-passive-back: var(--color-transparency-darken-10);
  --elements-divider-stroke: var(--color-transparency-darken-15);
  --form-style-locked: var(--color-transparency-darken-10);
  --elements-shadow: var(--color-transparency-darken-15);
  --elements-shadow-strong: var(--color-transparency-darken-15);
  --tab-active-outline: var(--color-primary-cd-color-2);
  --tab-active-stroke-width: 2px;
  --interaction-hover: var(--color-transparency-darken-4);
  --interaction-hover-strong: var(--color-transparency-darken-15);
  --interaction-hover-alternative: var(--color-transparency-lighten-10);
  --interaction-hover-alternative-strong: var(--color-transparency-lighten-20);
  --interaction-active: var(--color-secondary-secondary-2);
  --button-style-primary-front: var(--color-primary-white);
  --interaction-focus: var(--color-primary-cd-color-4);
  --button-style-primary-back: var(--color-primary-cd-color-2);
  --button-style-primary-stroke: var(--color-primary-transparent);
  --button-style-primary-stroke-width: 0px;
  --button-style-primary-front-hover: var(--color-primary-white);
  --button-style-primary-back-hover: var(--color-transparency-darken-20);
  --button-style-primary-stroke-hover: var(--color-primary-transparent);
  --button-style-primary-stroke-width-hover: 0px;
  --button-style-secondary-front: var(--color-primary-cd-color-2);
  --button-style-secondary-back: var(--color-primary-transparent);
  --button-style-secondary-stroke: var(--color-primary-cd-color-2);
  --button-style-secondary-stroke-width: 1px;
  --button-style-secondary-front-hover: var(--color-primary-cd-color-2);
  --button-style-secondary-back-hover: var(--color-transparency-darken-5);
  --button-style-secondary-stroke-hover: var(--color-primary-cd-color-2);
  --button-style-secondary-stroke-width-hover: 2px;
  --badges-solid-text: var(--color-primary-white);
  --badges-solid-color: var(--color-primary-cd-color-1);
  --badges-outline-text: var(--color-primary-cd-color-3);
  --badges-outline-stroke: var(--color-primary-cd-color-3);
  --state-success: rgba(26, 128, 0, 1);
  --state-success-background: rgba(26, 128, 0, 0.08);
  --badges-success-text: var(--color-primary-white);
  --badges-success-color: rgba(26, 128, 0, 1);
  --badges-warning-text: var(--text-style-text-primary);
  --state-warning: rgba(191, 121, 0, 1);
  --state-warning-background: rgba(255, 184, 0, 0.08);
  --badges-warning-color: rgba(255, 184, 0, 1);
  --state-error: rgba(192, 11, 0, 1);
  --state-error-background: rgba(192, 11, 0, 0.08);
  --state-info: rgba(77, 163, 255, 1);
  --badges-error-text: var(--color-primary-white);
  --state-info-background: rgba(77, 163, 255, 0.08);
  --badges-error-color: rgba(192, 11, 0, 1);
  --elements-stroke: 1px;
  --elements-stroke-hover: 1px;
  --elements-stroke-active: 2px;
  --elements-stroke-strong: 2px;
  --elements-stroke-strong-hover: 2px;
  --elements-stroke-strong-active: 2px;
  --elements-interaction-indicator: 8px;
  --interaction-stroke-width-focus: 2px;
}
/* Dark */
[data-theme=dark] {
  --text-style-headline: var(--color-primary-white);
  --elements-decoration-color: var(--color-primary-white);
  --text-style-headline-secondary: var(--color-primary-white);
  --text-style-text-primary: var(--color-primary-white);
  --text-style-text-secondary: var(--color-transparency-lighten-70);
  --text-style-link: var(--color-secondary-secondary-3);
  --tables-table-row-uneven: var(--color-transparency-lighten-5);
  --tables-header-divider: var(--color-primary-white);
  --tables-header-divider-stroke: 2px;
  --tables-table-divider: var(--color-transparency-lighten-80);
  --tables-table-divider-stroke: 1px;
  --background-default: var(--color-primary-cd-color-4);
  --background-alternative: var(--color-primary-cd-color-1);
  --background-light-box: rgba(76, 76, 76, 1);
  --background-dark-box: var(--color-primary-cd-color-4);
  --form-style-outline: var(--color-gray-scale-200);
  --form-style-hover-outline: var(--color-gray-scale-400);
  --form-style-stroke-width: 1px;
  --form-style-hover-stroke-width: 2px;
  --form-style-background: var(--color-primary-transparent);
  --form-style-hover-background: var(--color-primary-white);
  --form-style-focus-outline: var(--interaction-focus);
  --form-style-focus-stroke-width: 2px;
  --form-style-focus-background: var(--color-primary-white);
  --form-style-label: var(--color-primary-white);
  --form-style-placeholder-text: var(--text-style-text-secondary);
  --form-style-help-text: var(--text-style-text-secondary);
  --form-style-hover-placeholder-text: var(--color-gray-scale-600);
  --form-style-focus-placeholder-text: var(--color-gray-scale-600);
  --form-style-filled-text: var(--text-style-text-primary);
  --form-style-hover-filled-text: var(--color-gray-scale-900);
  --form-style-focus-filled-text: var(--color-gray-scale-900);
  --elements-active-front: var(--color-primary-cd-color-4);
  --elements-active-back: var(--color-primary-white);
  --elements-passive-front: var(--color-transparency-lighten-90);
  --elements-passive-back: var(--color-transparency-lighten-5);
  --elements-divider-stroke: var(--color-transparency-lighten-40);
  --form-style-locked: var(--color-transparency-lighten-10);
  --elements-shadow: var(--color-transparency-darken-20);
  --elements-shadow-strong: var(--color-transparency-darken-70);
  --tab-active-outline: var(--color-primary-white);
  --tab-active-stroke-width: 2px;
  --interaction-hover: var(--color-transparency-darken-10);
  --interaction-hover-strong: var(--color-transparency-lighten-40);
  --interaction-hover-alternative: var(--color-transparency-darken-5);
  --interaction-hover-alternative-strong: var(--color-transparency-darken-12);
  --interaction-active: var(--color-secondary-secondary-2);
  --button-style-primary-front: var(--color-primary-cd-color-2);
  --interaction-focus: var(--color-primary-cd-color-4);
  --button-style-primary-back: var(--color-primary-white);
  --button-style-primary-stroke: var(--color-primary-transparent);
  --button-style-primary-stroke-width: 0px;
  --button-style-primary-front-hover: var(--color-primary-cd-color-2);
  --button-style-primary-back-hover: var(--color-transparency-darken-5);
  --button-style-primary-stroke-hover: var(--color-primary-transparent);
  --button-style-primary-stroke-width-hover: 0px;
  --button-style-secondary-front: var(--color-primary-white);
  --button-style-secondary-back: var(--color-primary-transparent);
  --button-style-secondary-stroke: var(--color-primary-white);
  --button-style-secondary-stroke-width: 1px;
  --button-style-secondary-front-hover: var(--color-primary-white);
  --button-style-secondary-back-hover: var(--color-transparency-darken-10);
  --button-style-secondary-stroke-hover: var(--color-primary-white);
  --button-style-secondary-stroke-width-hover: 2px;
  --badges-solid-text: var(--color-primary-cd-color-1);
  --badges-solid-color: var(--color-primary-white);
  --badges-outline-text: var(--color-primary-white);
  --badges-outline-stroke: var(--color-primary-white);
  --state-success: rgba(126, 201, 110, 1);
  --state-success-background: rgba(126, 201, 110, 0.1);
  --badges-success-text: rgba(26, 128, 0, 1);
  --badges-success-color: var(--color-primary-white);
  --badges-warning-text: var(--color-primary-cd-color-4);
  --state-warning: rgba(255, 184, 0, 1);
  --state-warning-background: rgba(255, 184, 0, 0.1);
  --badges-warning-color: var(--color-primary-white);
  --state-error: rgba(246, 153, 147, 1);
  --state-error-background: rgba(246, 153, 147, 0.1);
  --state-info: rgba(106, 180, 255, 1);
  --badges-error-text: rgba(192, 11, 0, 1);
  --state-info-background: rgba(106, 180, 255, 0.1);
  --badges-error-color: var(--color-primary-white);
  --elements-stroke: 1px;
  --elements-stroke-hover: 1px;
  --elements-stroke-active: 2px;
  --elements-stroke-strong: 2px;
  --elements-stroke-strong-hover: 2px;
  --elements-stroke-strong-active: 2px;
  --elements-interaction-indicator: 8px;
  --interaction-stroke-width-focus: 2px;
}
/* BASICS */
/* Mode 1 */
:root {
  --color-primary-cd-color-1: rgba(224, 0, 27, 1);
  --color-secondary-secondary-1: rgba(163, 0, 19, 1);
  --color-secondary-secondary-2: rgba(184, 220, 194, 1);
  --color-secondary-secondary-3: rgba(172, 205, 214, 1);
  --color-secondary-secondary-4: rgba(191, 191, 191, 1);
  --color-secondary-secondary-5: rgba(128, 128, 128, 1);
  --color-primary-cd-color-2: rgba(80, 110, 91, 1);
  --color-primary-cd-color-3: rgba(118, 118, 118, 1);
  --color-transparency-darken-4: rgba(0, 0, 0, 0.04);
  --color-transparency-lighten-5: rgba(255, 255, 255, 0.05);
  --color-primary-cd-color-4: rgba(67, 67, 67, 1);
  --color-transparency-darken-5: rgba(0, 0, 0, 0.05);
  --color-primary-white: rgba(255, 255, 255, 1);
  --color-transparency-lighten-10: rgba(255, 255, 255, 0.1);
  --color-transparency-lighten-12: rgba(255, 255, 255, 0.12);
  --color-transparency-lighten-15: rgba(255, 255, 255, 0.15);
  --color-transparency-lighten-20: rgba(255, 255, 255, 0.2);
  --color-transparency-lighten-30: rgba(255, 255, 255, 0.3);
  --color-transparency-lighten-40: rgba(255, 255, 255, 0.4);
  --color-transparency-lighten-50: rgba(255, 255, 255, 0.5);
  --color-transparency-lighten-60: rgba(255, 255, 255, 0.6);
  --color-transparency-lighten-70: rgba(255, 255, 255, 0.7);
  --color-transparency-lighten-80: rgba(255, 255, 255, 0.8);
  --color-transparency-lighten-90: rgba(255, 255, 255, 0.9);
  --color-transparency-darken-10: rgba(0, 0, 0, 0.1);
  --color-transparency-darken-12: rgba(0, 0, 0, 0.12);
  --color-transparency-darken-15: rgba(0, 0, 0, 0.15);
  --color-transparency-darken-20: rgba(0, 0, 0, 0.2);
  --color-transparency-darken-30: rgba(0, 0, 0, 0.3);
  --color-transparency-darken-40: rgba(0, 0, 0, 0.4);
  --color-transparency-darken-50: rgba(0, 0, 0, 0.5);
  --color-transparency-darken-60: rgba(0, 0, 0, 0.6);
  --color-transparency-darken-70: rgba(0, 0, 0, 0.7);
  --color-transparency-darken-80: rgba(0, 0, 0, 0.8);
  --color-transparency-darken-90: rgba(0, 0, 0, 0.9);
  --color-primary-black: rgba(0, 0, 0, 1);
  --color-gray-scale-50: rgba(250, 250, 250, 1);
  --color-gray-scale-100: rgba(245, 245, 245, 1);
  --color-gray-scale-200: rgba(238, 238, 238, 1);
  --color-gray-scale-300: rgba(224, 224, 224, 1);
  --color-gray-scale-400: rgba(189, 189, 189, 1);
  --color-gray-scale-500: rgba(158, 158, 158, 1);
  --color-gray-scale-600: rgba(117, 117, 117, 1);
  --color-gray-scale-700: rgba(97, 97, 97, 1);
  --color-gray-scale-800: rgba(66, 66, 66, 1);
  --color-gray-scale-900: rgba(33, 33, 33, 1);
  --color-primary-transparent: rgba(255, 255, 255, 0);
  --typography-corporate-font-1: Outfit;
  --typography-corporate-font-2: Inter;
  --typography-icon-font: Font Awesome 6 Pro;
  --typography-icon-font-weight: Solid;
  --typography-h1-font: var(--typography-corporate-font-1);
  --typography-h1-fontweight: Medium;
  --typography-h1-fontweight-strong: Bold;
  --typography-h2-font: var(--typography-corporate-font-1);
  --typography-h2-fontweight: Medium;
  --typography-h2-fontweight-strong: Bold;
  --typography-h3-font: var(--typography-corporate-font-1);
  --typography-h3-fontweight: Medium;
  --typography-h3-fontweight-strong: Bold;
  --typography-h4-font: var(--typography-corporate-font-1);
  --typography-h4-fontweight: Medium;
  --typography-h4-fontweight-strong: Bold;
  --typography-h5-font: var(--typography-corporate-font-1);
  --typography-h5-fontweight: Medium;
  --typography-h5-fontweight-strong: Bold;
  --typography-h6-font: var(--typography-corporate-font-1);
  --typography-h6-fontweight: Medium;
  --typography-h6-fontweight-strong: Bold;
  --typography-text-font: var(--typography-corporate-font-2);
  --typography-text-fontweight: Regular;
  --typography-text-fontweight-strong: Bold;
  --typography-button-font: var(--typography-corporate-font-2);
  --typography-button-fontweight: SemiBold;
  --sizes-x-large: 64px;
  --sizes-large: 56px;
  --sizes-default: 48px;
  --sizes-small: 40px;
  --sizes-x-small: 32px;
}
/* Custom Variables */
:root {
  --component-max-width: 1375px;
  --navigation-header-height-desktop: 122px;
  --navigation-header-height-tablet: 100px;
  --navigation-header-height-mobile: 76px;
  --navigation-main-height-desktop: 108px;
  --navigation-nav-height-desktop: 82px;
  --navigation-nav-height-tablet: 62px;
  --navigation-nav-height-mobile: 44px;
  --navigation-meta-height-desktop: 40px;
  --navigation-meta-height-tablet: 36px;
  --navigation-meta-height-mobile: 32px;
  --navigation-logo-header-width-desktop: 132px;
  --navigation-logo-header-height-desktop: 112px;
  --navigation-logo-header-height-tablet: 92px;
  --navigation-logo-header-height-mobile: 72px;
  --navigation-logo-icon-width-desktop: 72px;
  --navigation-logo-icon-height-desktop: 68px;
  --navigation-logo-icon-width-tablet: 60px;
  --navigation-logo-icon-height-tablet: 56px;
  --navigation-logo-icon-width-mobile: 48px;
  --navigation-logo-icon-height-mobile: 45px;
  --navigation-main-list-margin-left: 240px;
  --icon-height-mobile: 46px;
  --icon-customer-portal-width: 30px;
  --element-large-cornerradius: 16px;
  --element-tab-angle-size: 20px;
  --element-tab-angle-position-x: -16px;
  --element-tab-angle-position-y: 20px;
  --element-logo-edge-position-x-before: -16px;
  --element-logo-edge-position-x-after: -17px;
  --element-logo-edge-position-y: -16px;
  --video-height-mobile: 360px;
  --video-height-desktop: 640px;
  --hero-content-padding-mobile: 20px;
  --hero-content-search-form-input-height-mobile: 50px;
  --hero-content-search-form-button-height-mobile: 48px;
  --hero-content-search-form-input-height-desktop: 80px;
  --hero-content-search-form-button-height-desktop: 80px;
  --hero-content-search-title-gap-desktop: 6px;
  --hero-content-search-title-padding-top-desktop: 14px;
  --input-stroke-color: #c5c5c5;
  --button-icon-size: 20px;
  --box-height: 96px;
  --box-icon-right-size: 48px;
  --element-content-padding: 20px;
  --text-image-height-desktop: 630px;
  --text-image-gap-desktop: 74px;
  --text-image-text-container-max-width: 409px;
  --button-small-height: 48px;
  --overlay-transparency-darken-10: linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1));
  --overlay-transparency-darken-15: linear-gradient(0deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15));
  --overlay-transparency-darken-20: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
  --statistics-header-max-width: 368px;
  --statistics-content-max-width: 802px;
  --statistics-padding-bottom-desktop: 25px;
  --video-text-video-height-mobile: 640px;
  --video-text-video-height-desktop: 720px;
  --video-text-text-padding-left: 176px;
  --card-height-mobile: 460px;
  --card-height-desktop: 501px;
  --card-width-mobile: 280px;
  --card-width-desktop: 300px;
  --card-image-size-mobile: var(--card-width-mobile);
  --card-image-size-desktop: var(--card-width-desktop);
  --footer-border-top-color: #d8d8d8;
  --footer-contact-btn-icon-size: 20px;
  --profile-page-main-gap: 25px;
  --profile-page-sidenav-padding-x-mobile: 23px;
  --profile-page-sidenav-divider-position: -16px;
  --notification-bg: #fffae8;
  --notification-succeed-bg: #f1faef;
  --input-xs-input-size: 80px;
  --input-sm-input-size: 160px;
  --input-xl-input-size: 224px;
  --input-radio-element-gap: 27px;
  --input-radio-element-label-padding-left: 30px;
  --input-radio-element-radio-row-gap: 25px;
  --input-text-max-width: 280px;
  --input-textfield-max-width: 320px;
  --main-container-max-width: 800px;
  --customer-login-padding-top-mobile: 31px;
  --customer-login-padding-bottom-mobile: 64px;
  --customer-login-padding-top-desktop: 100px;
  --customer-login-padding-bottom-desktop: 118px;
  --customer-login-max-width: 1200px;
  --customer-login-form-image-content-gap-desktop: 171px;
  --customer-login-form-image-content-gap-mobile: 16px;
  --customer-login-form-container-max-width: 408px;
  --customer-login-h1-margin-bottom: -8px;
  --customer-login-form-container-gap: 16px;
  --customer-login-image-container-max-with: 720px;
  --customer-login-form-gap-desktop: 32px;
  --customer-login-form-gap-mobile: 24px;
  --customer-login-form-rows-gap: 16px;
  --customer-login-divider-margin-top: 8px;
  --customer-login-divider-margin-bottom: 8px;
  --customer-dashboard-mobile-nav-padding-y: 24px;
  --customer-dashboard-mobile-nav-select-item-gap: 6px;
  --customer-dashboard-padding-bottom-mobile: 64px;
  --customer-dashboard-info-card-container-gap-mobile: 24px;
  --customer-dashboard-info-card-container-gap-desktop: 32px;
  --customer-dashboard-info-card-padding-x-mobile: 16px;
  --customer-dashboard-info-card-padding-x-desktop: 32px;
  --customer-dashboard-info-card-padding-y-mobile: 24px;
  --customer-dashboard-info-card-padding-y-desktop: 32px;
  --customer-dashboard-info-cards-container-row-gap-mobile: 24px;
  --customer-dashboard-info-cards-container-row-gap-desktop: 32px;
  --customer-dashboard-info-card-gap-mobile: 24px;
  --customer-dashboard-info-card-gap-desktop: 24px;
  --customer-dashboard-info-card-rows-gap-mobile: 16px;
  --customer-dashboard-info-card-rows-gap-desktop: 24px;
  --customer-dashboard-info-card-col-items-inline-gap: 8px;
  --customer-dashboard-info-card-col-items-column-small-gap: 4px;
  --customer-dashboard-info-card-col-items-column-medium-gap: 8px;
  --customer-dashboard-info-card-col-items-column-big-gap: 16px;
  --customer-dashboard-info-card-grid-item-gap: 24px;
  --customer-dashboard-content-gap-mobile: 32px;
  --customer-dashboard-content-gap: 32px;
  --customer-dashboard-select-meter-gap: 16px;
  --customer-dashboard-meter-chip-padding-y-mobile: 8.5px;
  --customer-dashboard-meter-chip-padding-y-desktop: 5.5px;
  --customer-dashboard-meter-chip-category-container-gap: 8px;
  --customer-dashboard-consumption-content-padding-x-mobile: 16px;
  --customer-dashboard-consumption-content-padding-x-desktop: 32px;
  --customer-dashboard-consumption-content-padding-y-mobile: 28px;
  --customer-dashboard-consumption-content-padding-y-desktop: 32px;
  --customer-dashboard-consumption-content-gap: 24px;
  --customer-dashboard-date-select-container-gap-mobile: 16px;
  --customer-dashboard-date-select-container-gap-desktop: 24px;
  --customer-dashboard-date-select-inner-gap: 10px;
  --customer-dashboard-time-span-chip-padding-x-mobile: 16px;
  --customer-dashboard-time-span-chips-gap-mobile: 8px;
  --customer-dashboard-time-span-chips-gap-desktop: 17px;
  --customer-dashboard-gap-desktop: 20px;
  --customer-dashboard-padding-top-desktop: 64px;
  --customer-dashboard-padding-bottom-desktop: 128px;
  --customer-dashboard-consumption-feed-in-container-gap-desktop: 64px;
  --customer-dashboard-simlar-household-container-gap: 16px;
  --customer-dashboard-side-nav-padding-bottom: 32px;
  --google-maps-height-mobile: 376px;
  --google-maps-height-desktop: 536px;
  --circle-button-small-font-size: 20px;
  --circle-button-default-font-size: 24px;
  --circle-button-large-font-size: 28px;
}
/* Headlines styles generator */
/* Columns mixin */
/*******************************/
/*** Netz variables ***/
/*****************************/
:root {
  --typography-text-input-mobile: 16px;
}
@media (min-width: 1200px) {
  :root {
    --typography-text-input-mobile: 17px;
  }
}
.text-primary, .tooltip-block .tooltip-container .tooltip-content {
  color: var(--text-style-text-primary);
}
.text-secondary, .input .info-block, .input-default .info-block {
  color: var(--text-style-text-secondary);
}
.text-decoration {
  color: var(--elements-decoration-color);
}
.text-headline {
  color: var(--color-primary-cd-color-4);
}
.text-label, .form-container form .form-row .form-group label {
  color: var(--color-primary-cd-color-2);
}
.text-help {
  color: var(--form-style-help-text);
}
.text-filled, .input-element,
.select-element {
  color: var(--form-style-filled-text);
}
.text-link-small {
  color: var(--text-style-link);
}
.text-link {
  color: var(--text-style-link);
}
*:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-strong, .form-container form .form-row .form-group label:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), *.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
*.select-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
  font-weight: 700;
}
*:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-x-small, .input[data-type=meterreading] *.error-incomplete-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.input[data-type=meterreading] *.error-invalid-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .input *.info-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .input-default *.info-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .input *.success-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .input-default *.success-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .input *.error-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.input *.error-empty-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .input-default *.error-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.input-default *.error-empty-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .tooltip-block button:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .tooltip-block .tooltip-container .tooltip-content *.tooltip-text:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
  font-family: var(--typography-text-font);
  font-size: var(--typography-text-x-small);
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: var(--typography-text-letterspacing);
}
*:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-x-small.text-strong, .input[data-type=meterreading] *.error-incomplete-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-strong,
.input[data-type=meterreading] *.error-invalid-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-strong, .input *.info-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-strong, .input-default *.info-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-strong, .input *.success-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-strong, .input-default *.success-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-strong, .input *.error-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-strong,
.input *.error-empty-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-strong, .input-default *.error-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-strong,
.input-default *.error-empty-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-strong, .tooltip-block button:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-strong, .tooltip-block .tooltip-container .tooltip-content *.tooltip-text:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-strong, .form-container form .form-row .form-group label:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-x-small, .input[data-type=meterreading] .form-container form .form-row .form-group label.error-incomplete-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .form-container form .form-row .form-group .input[data-type=meterreading] label.error-incomplete-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.input[data-type=meterreading] .form-container form .form-row .form-group label.error-invalid-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.form-container form .form-row .form-group .input[data-type=meterreading] label.error-invalid-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .input .form-container form .form-row .form-group label.info-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .form-container form .form-row .form-group .input label.info-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .input-default .form-container form .form-row .form-group label.info-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .form-container form .form-row .form-group .input-default label.info-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .input .form-container form .form-row .form-group label.success-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .form-container form .form-row .form-group .input label.success-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .input-default .form-container form .form-row .form-group label.success-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .form-container form .form-row .form-group .input-default label.success-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .input .form-container form .form-row .form-group label.error-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .form-container form .form-row .form-group .input label.error-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.input .form-container form .form-row .form-group label.error-empty-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.form-container form .form-row .form-group .input label.error-empty-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .input-default .form-container form .form-row .form-group label.error-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .form-container form .form-row .form-group .input-default label.error-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.input-default .form-container form .form-row .form-group label.error-empty-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.form-container form .form-row .form-group .input-default label.error-empty-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .tooltip-block .tooltip-container .tooltip-content .form-container form .form-row .form-group label.tooltip-text:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .form-container form .form-row .form-group .tooltip-block .tooltip-container .tooltip-content label.tooltip-text:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), *.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-x-small, .input[data-type=meterreading] *.error-incomplete-block.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.input[data-type=meterreading] *.error-invalid-block.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .input *.info-block.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .input-default *.info-block.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .input *.success-block.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .input-default *.success-block.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .input *.error-block.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.input *.error-empty-block.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .input-default *.error-block.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.input-default *.error-empty-block.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .tooltip-block button.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .tooltip-block .tooltip-container .tooltip-content *.tooltip-text.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
*.select-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-x-small,
.input[data-type=meterreading] *.error-incomplete-block.select-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.input[data-type=meterreading] *.error-invalid-block.select-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.input *.info-block.select-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.input-default *.info-block.select-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.input *.success-block.select-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.input-default *.success-block.select-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.input *.error-block.select-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.input *.error-empty-block.select-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.input-default *.error-block.select-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.input-default *.error-empty-block.select-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.tooltip-block button.select-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.tooltip-block .tooltip-container .tooltip-content *.tooltip-text.select-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-x-small-strong, .tooltip-block .tooltip-container .tooltip-content *.tooltip-title:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
  font-weight: 700;
}
*:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-small, .form-container form .form-row .form-group label:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
  font-family: var(--typography-text-font);
  font-size: var(--typography-text-small);
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: var(--typography-text-letterspacing);
}
*:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-small.text-strong, .form-container form .form-row .form-group label:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), *.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-small,
*.select-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-small, *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-small-strong {
  font-weight: 700;
}
*:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-medium, *.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
*.select-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .form-row-optional *.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6)::placeholder, a.text-link:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
  font-family: var(--typography-text-font);
  font-size: var(--typography-text-medium);
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: var(--typography-text-letterspacing);
}
*:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-medium.text-strong, .form-container form .form-row .form-group label:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-medium, .form-container form .form-row .form-group label.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.form-container form .form-row .form-group label.select-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .form-row-optional .form-container form .form-row .form-group label.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6)::placeholder, .form-container form .form-row .form-group .form-row-optional label.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6)::placeholder, *.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .form-row-optional *.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6)::placeholder,
*.select-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-medium-strong, table:not(.duet-date__table) thead tr td:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):before,
table:not(.duet-date__table) tbody tr td:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):before, a.text-link:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
  font-weight: 700;
}
*:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-large, *.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(:disabled)::placeholder,
*.select-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(:disabled)::placeholder {
  font-family: var(--typography-text-font);
  font-size: var(--typography-text-large);
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: var(--typography-text-letterspacing);
}
*:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-large.text-strong, .form-container form .form-row .form-group label:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-large, .form-container form .form-row .form-group label.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(:disabled)::placeholder,
.form-container form .form-row .form-group label.select-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(:disabled)::placeholder, *.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-large, *.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(:disabled)::placeholder,
*.select-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-large,
*.select-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(:disabled)::placeholder, *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-large-strong {
  font-weight: 700;
}
*:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-x-large {
  font-family: var(--typography-text-font);
  font-size: var(--typography-text-x-large);
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: var(--typography-text-letterspacing);
}
*:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-x-large.text-strong, .form-container form .form-row .form-group label:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-x-large, *.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-x-large,
*.select-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-x-large, *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-x-large-strong {
  font-weight: 700;
}
*:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-xx-large {
  font-family: var(--typography-text-font);
  font-size: var(--typography-text-xx-large);
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: var(--typography-text-letterspacing);
}
*:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-xx-large.text-strong, .form-container form .form-row .form-group label:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-xx-large, *.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-xx-large,
*.select-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-xx-large, *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-xx-large-strong {
  font-weight: 700;
}
.text-line-limit-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
}
.text-line-limit-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.text-line-limit-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
}
.text-line-limit-4 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
}
.text-line-limit-5 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  -webkit-box-orient: vertical;
}
.text-line-limit-6 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  -webkit-box-orient: vertical;
}
.text-line-limit-7 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 7;
  line-clamp: 7;
  -webkit-box-orient: vertical;
}
.text-line-limit-8 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 8;
  line-clamp: 8;
  -webkit-box-orient: vertical;
}
.text-line-limit-9 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 9;
  line-clamp: 9;
  -webkit-box-orient: vertical;
}
.text-line-limit-10 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 10;
  line-clamp: 10;
  -webkit-box-orient: vertical;
}
.text-strong, .form-container form .form-row .form-group label, .input-element,
.select-element,
b {
  font-weight: 700;
}
.text-regular {
  font-weight: 400;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--typography-corporate-font-2);
  color: var(--text-style-headline);
}
h1.strong,
h1 .strong,
h2.strong,
h2 .strong,
h3.strong,
h3 .strong,
h4.strong,
h4 .strong,
h5.strong,
h5 .strong,
h6.strong,
h6 .strong {
  font-weight: 700;
}
h1.secondary,
h2.secondary,
h3.secondary,
h4.secondary,
h5.secondary,
h6.secondary {
  color: var(--text-style-headline-secondary);
}
h1 span,
h2 span,
h3 span,
h4 span,
h5 span,
h6 span {
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
  line-height: inherit;
}
h1 span.secondary,
h2 span.secondary,
h3 span.secondary,
h4 span.secondary,
h5 span.secondary,
h6 span.secondary {
  color: var(--text-style-headline-secondary);
  font-weight: 700;
}
.icon-font {
  font-family: var(--typography-icon-font);
  font-style: normal;
  font-weight: 900;
  line-height: 100%;
}
.icon-font-20 {
  font-size: 20px;
}
.icon-font-16 {
  font-size: 16px;
}
h1 {
  font-family: var(--typography-h1-font);
  font-size: var(--typography-headline-h1);
  line-height: var(--typography-headline-h1-lineheight);
  letter-spacing: var(--typography-headline-h1-letterspacing);
  font-weight: 500;
  display: block;
}
.h1 {
  font-family: var(--typography-h1-font);
  font-size: var(--typography-headline-h1);
  line-height: var(--typography-headline-h1-lineheight);
  letter-spacing: var(--typography-headline-h1-letterspacing);
}
h2 {
  font-family: var(--typography-h2-font);
  font-size: var(--typography-headline-h2);
  line-height: var(--typography-headline-h2-lineheight);
  letter-spacing: var(--typography-headline-h2-letterspacing);
  font-weight: 500;
  display: block;
}
.h2 {
  font-family: var(--typography-h2-font);
  font-size: var(--typography-headline-h2);
  line-height: var(--typography-headline-h2-lineheight);
  letter-spacing: var(--typography-headline-h2-letterspacing);
}
h3 {
  font-family: var(--typography-h3-font);
  font-size: var(--typography-headline-h3);
  line-height: var(--typography-headline-h3-lineheight);
  letter-spacing: var(--typography-headline-h3-letterspacing);
  font-weight: 500;
  display: block;
}
.h3 {
  font-family: var(--typography-h3-font);
  font-size: var(--typography-headline-h3);
  line-height: var(--typography-headline-h3-lineheight);
  letter-spacing: var(--typography-headline-h3-letterspacing);
}
h4 {
  font-family: var(--typography-h4-font);
  font-size: var(--typography-headline-h4);
  line-height: var(--typography-headline-h4-lineheight);
  letter-spacing: var(--typography-headline-h4-letterspacing);
  font-weight: 500;
  display: block;
}
.h4 {
  font-family: var(--typography-h4-font);
  font-size: var(--typography-headline-h4);
  line-height: var(--typography-headline-h4-lineheight);
  letter-spacing: var(--typography-headline-h4-letterspacing);
}
h5 {
  font-family: var(--typography-h5-font);
  font-size: var(--typography-headline-h5);
  line-height: var(--typography-headline-h5-lineheight);
  letter-spacing: var(--typography-headline-h5-letterspacing);
  font-weight: 500;
  display: block;
}
.h5 {
  font-family: var(--typography-h5-font);
  font-size: var(--typography-headline-h5);
  line-height: var(--typography-headline-h5-lineheight);
  letter-spacing: var(--typography-headline-h5-letterspacing);
}
h6 {
  font-family: var(--typography-h6-font);
  font-size: var(--typography-headline-h6);
  line-height: var(--typography-headline-h6-lineheight);
  letter-spacing: var(--typography-headline-h6-letterspacing);
  font-weight: 500;
  display: block;
}
.h6 {
  font-family: var(--typography-h6-font);
  font-size: var(--typography-headline-h6);
  line-height: var(--typography-headline-h6-lineheight);
  letter-spacing: var(--typography-headline-h6-letterspacing);
}
/* Desktop */
@media (min-width: 992px) {
  .text-large-desktop {
    font-family: var(--typography-corporate-font-1);
    font-style: normal;
    font-size: var(--typography-text-large);
    line-height: var(--typography-text-lineheight);
  }
  .text-medium-desktop {
    font-family: var(--typography-corporate-font-1);
    font-style: normal;
    font-size: var(--typography-text-medium);
    line-height: var(--typography-text-lineheight);
  }
}
p a {
  display: inline;
  font-size: inherit;
  font-family: inherit;
}
a {
  display: inline;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--spacings-100-c-x-small-plus);
  align-self: stretch;
  width: fit-content;
  gap: var(--button-default-gap);
  color: var(--button-style-secondary-front);
  text-align: center;
  font-family: var(--typography-button-font);
  font-size: var(--button-typography-default);
  font-style: normal;
  font-weight: 600;
  line-height: var(--button-typography-default-lineheight);
  letter-spacing: var(--button-typography-default-letterspacing);
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}
a i {
  font-size: 90%;
  line-height: inherit;
  padding: 0px 5px;
}
ol,
ul {
  font-weight: 400;
  font-family: var(--typography-text-font);
}
ol {
  list-style: inside;
  list-style-type: decimal;
}
ul {
  list-style: inside;
  list-style-type: revert;
}
a.meta-header-link {
  padding: var(--button-small-padding-vertical) 0;
}
a .link-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
a.text-link {
  color: var(--color-secondary-secondary-4);
}
a.btn-rounded {
  border-radius: 50%;
  width: var(--sizes-small);
  height: var(--sizes-small);
  background: var(--color-primary-cd-color-2);
  display: flex;
  align-items: center;
  justify-content: center;
}
a.main-navigation-link,
button.main-navigation-link {
  white-space: nowrap;
  padding: var(--spacings-100-c-xxxx-small);
  justify-content: center;
  align-items: center;
  gap: var(--spacings-100-c-xxxx-small);
  color: var(--text-style-text-primary);
  font-family: var(--typography-text-font);
  font-size: var(--typography-text-medium);
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: var(--typography-text-letterspacing);
}
a.main-navigation-link.important-link,
button.main-navigation-link.important-link {
  font-weight: 700;
}
a.main-navigation-link {
  font-weight: 400;
  font-size: var(--typography-text-medium);
}
.btn-link {
  max-width: fit-content;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  align-self: stretch;
  text-align: center;
  color: var(--button-style-secondary-front);
  font-family: var(--typography-button-font);
  font-style: normal;
  font-weight: 600;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}
.btn-link-default {
  font-size: var(--button-typography-default);
  line-height: var(--button-typography-default-lineheight);
  letter-spacing: var(--button-typography-default-letterspacing);
}
.btn-link-small {
  font-size: var(--button-typography-small);
  line-height: var(--button-typography-small-lineheight);
  letter-spacing: var(--button-typography-small-letterspacing);
}
.btn-link .btn-content {
  gap: var(--button-default-gap);
}
.btn-link:hover:not(:disabled) {
  text-decoration: underline;
}
.btn-link:disabled {
  opacity: 0.4;
}
.form-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacings-75-b-medium);
  padding: var(--spacings-75-b-medium) var(--spacings-50-a-medium);
  background: var(--background-alternative);
  border-radius: var(--elements-default-corner-radius);
  border: solid 1px var(--elements-divider-stroke);
}
.form-container form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacings-75-b-medium);
}
.form-container form .form-row {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacings-50-a-medium);
}
.form-container form .form-row .form-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacings-100-c-xxx-small);
}
.form-container form .form-row .form-group label {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 4.5px;
}
.input-element,
.select-element {
  height: var(--sizes-default);
  padding: 0 var(--spacings-75-b-x-small-plus);
  background: var(--form-style-background);
  border: solid 1px var(--form-style-outline);
  border-radius: var(--forms-large-cornerradius);
}
.input-element:disabled,
.select-element:disabled {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), #ffffff;
}
.select-element {
  display: flex;
  align-items: center;
  background-image: url('data:image/svg+xml,<svg width="15" height="8" viewBox="0 0 15 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.78125 7.46875L0.53125 1.21875C0.296875 0.984375 0.296875 0.554688 0.53125 0.320312C0.765625 0.0859375 1.19531 0.0859375 1.42969 0.320312L7.25 6.14062L13.0312 0.320312C13.2656 0.0859375 13.6953 0.0859375 13.9297 0.320312C14.1641 0.554688 14.1641 0.984375 13.9297 1.21875L7.67969 7.46875C7.44531 7.70312 7.01562 7.70312 6.78125 7.46875Z" fill="%23434343"/></svg>');
  background-repeat: no-repeat;
  background-position: calc(100% - 32px) 50%;
}
.input-info {
  width: 100%;
}
.radio-element {
  display: flex;
  gap: var(--input-radio-element-gap);
}
.radio-element .radio-description {
  display: flex;
  flex-direction: column;
}
.radio-element .radio,
.radio-element .radio-description {
  width: 50%;
}
.divider {
  width: 100%;
  height: 1px;
  background: var(--elements-divider-stroke);
  margin: 0;
  border: none;
}
.radio input[type=radio] {
  position: absolute;
  opacity: 0;
}
.radio input[type=radio] + .radio-label:before {
  content: "";
  background: transparent;
  border-radius: 100%;
  border: 2px solid var(--form-style-outline);
  display: inline-block;
  width: 16px;
  height: 16px;
  position: relative;
  top: 3px;
  margin-right: 4.5px;
  vertical-align: top;
  cursor: pointer;
  text-align: center;
}
.radio input[type=radio]:checked + .radio-label:before {
  width: 12px;
  height: 12px;
  background-color: var(--form-style-active-front);
  border-color: var(--form-style-active-back);
  border-width: 4px;
}
.radio input[type=radio]:focus + .radio-label:before {
  outline: none;
  border-color: var(--form-style-active-back);
}
.radio .radio-label .label-sub-text {
  display: block;
  padding-left: var(--input-radio-element-label-padding-left);
}
.input-date-row {
  max-width: var(--components-maxwidth-_text);
}
.input-date-row .input-element {
  background-image: url('data:image/svg+xml,<svg width="18" height="21" viewBox="0 0 18 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.875 0.5C5.1875 0.5 5.5 0.8125 5.5 1.125V3H13V1.125C13 0.8125 13.2734 0.5 13.625 0.5C13.9375 0.5 14.25 0.8125 14.25 1.125V3H15.5C16.8672 3 18 4.13281 18 5.5V6.75V8V18C18 19.4062 16.8672 20.5 15.5 20.5H3C1.59375 20.5 0.5 19.4062 0.5 18V8V6.75V5.5C0.5 4.13281 1.59375 3 3 3H4.25V1.125C4.25 0.8125 4.52344 0.5 4.875 0.5ZM16.75 8H1.75V18C1.75 18.7031 2.29688 19.25 3 19.25H15.5C16.1641 19.25 16.75 18.7031 16.75 18V8ZM15.5 4.25H3C2.29688 4.25 1.75 4.83594 1.75 5.5V6.75H16.75V5.5C16.75 4.83594 16.1641 4.25 15.5 4.25Z" fill="%23434343"/></svg>');
  background-repeat: no-repeat;
  background-position: calc(100% - 32px) 50%;
  padding-right: 55px;
}
.form-row-optional label {
  display: flex;
  justify-content: space-between;
}
.form-row-optional .input-element::placeholder {
  color: var(--form-style-placeholder-text);
}
/* Desktop */
@media (min-width: 992px) {
  .form-container {
    gap: var(--profile-page-main-gap);
  }
  .form-container form {
    gap: var(--profile-page-main-gap);
  }
  .form-container form .form-row {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--spacings-100-c-x-small);
  }
  .form-container form .form-row.radio-row {
    flex-direction: column;
    gap: var(--input-radio-element-radio-row-gap);
  }
  .xs-input-size {
    width: var(--input-xs-input-size);
  }
  .sm-input-size {
    width: var(--input-sm-input-size);
  }
  .xl-input-size {
    max-width: var(--input-xl-input-size);
  }
  .full-width-input-size {
    width: 100%;
  }
}
.input {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacings-100-c-xxx-small);
}
.input:has(textarea) .input-wrapper .input-field {
  resize: vertical;
}
.input:not(:has(textarea.input-field)) {
  max-width: var(--input-text-max-width);
}
.input:has(.input-field:disabled:not(.locked)), .input:has(select:disabled:not(.locked)), .input:has(duet-date-picker:disabled:not(.locked)) {
  opacity: 0.4;
  cursor: default;
}
.input:has(.input-field.locked) .lock-icon, .input:has(duet-date-picker.locked) .lock-icon {
  display: flex;
}
.input:has(.input-field:not(.locked)) .lock-icon, .input:has(.input-field:disabled:not(.locked)) .lock-icon, .input:has(duet-date-picker:not(.locked)) .lock-icon, .input:has(duet-date-picker:disabled:not(.locked)) .lock-icon {
  display: none;
}
.input .criteria-block {
  display: none;
}
.input .input-wrapper {
  position: relative;
}
.input .input-wrapper .icon {
  position: absolute;
  right: var(--spacings-75-b-x-small-plus);
  top: calc(50% - 10px);
  font-size: 20px;
  font-weight: 900;
  line-height: 100%;
  color: var(--form-style-filled-text);
}
.input .input-wrapper .icon.error-icon {
  display: none;
  color: var(--state-error);
}
.input .input-wrapper .icon.success-icon {
  display: none;
  color: var(--state-success);
}
.input.validated .criteria-block {
  display: block;
}
.input.validated .criteria-block.no-icons ul li .criteria-icon {
  display: none;
}
.input.validated .criteria-block:not(.no-icons) ul li.criteria.fulfilled .criteria-icon.criteria-fulfilled {
  display: flex;
}
.input.validated .criteria-block:not(.no-icons) ul li.criteria.fulfilled .criteria-icon.criteria-not-fulfilled {
  display: none;
}
.input.validated .criteria-block:not(.no-icons) ul li.criteria .criteria-icon {
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  line-height: 100%;
  align-self: center;
  width: 15px;
  justify-content: center;
}
.input.validated .criteria-block:not(.no-icons) ul li.criteria .criteria-icon.criteria-fulfilled {
  display: none;
}
.input.validated .criteria-block:not(.no-icons) ul li.criteria .criteria-icon.criteria-not-fulfilled {
  display: flex;
}
.input.validated .criteria-block ul {
  list-style: none;
  list-style-type: none;
}
.input.validated .criteria-block ul li.criteria {
  display: flex;
  flex-direction: row;
  gap: var(--spacings-100-c-xxxx-small);
}
.input.validated.error .input-wrapper input, .input.validated.success .input-wrapper input {
  padding-right: calc(var(--spacings-75-b-x-small-plus) + 20px);
}
.input.validated.error .labels-block label.primary-label {
  color: var(--state-error);
}
.input.validated.error .input-field {
  border: var(--form-style-focus-stroke-width) solid var(--state-error);
}
.input.validated.error duet-date-picker .duet-date__input-wrapper input.duet-date__input {
  box-shadow: 0 0 0 1px var(--state-error);
  border: var(--form-style-stroke-width) solid var(--state-error);
}
.input.validated.error .input-wrapper .icon.error-icon {
  display: flex;
}
.input.validated.error .criteria-block {
  display: none;
}
.input.validated.error .info-block {
  display: none;
}
.input.validated.error.error-invalid .error-block {
  display: block;
}
.input.validated.error.error-empty .error-empty-block {
  display: block;
}
.input.validated.success .labels-block label.primary-label {
  color: var(--state-success);
}
.input.validated.success .input-field {
  border: var(--form-style-focus-stroke-width) solid var(--state-success);
}
.input.validated.success duet-date-picker .duet-date__input-wrapper input.duet-date__input {
  box-shadow: 0 0 0 1px var(--state-success);
  border: var(--form-style-stroke-width) solid var(--state-success);
}
.input.validated.success .input-wrapper .icon.success-icon {
  display: flex;
}
.input.validated.success .error-block,
.input.validated.success .error-empty-block {
  display: none;
}
.input.validated.success .info-block {
  display: block;
}
.input.validated.success:has(.success-block) .info-block {
  display: none;
}
.input.validated.success:has(.success-block) .success-block {
  display: block;
}
.input:has(.input-field[required]) .labels-block .secondary-label {
  display: none;
}
.input .labels-block, .input-default .labels-block {
  display: flex;
  align-items: flex-end;
  gap: var(--spacings-100-c-xxx-small);
  align-self: stretch;
}
.input .labels-block .primary-label, .input-default .labels-block .primary-label {
  flex: 1 0 0;
  color: var(--form-style-label);
  display: flex;
  font-family: var(--typography-text-font);
  font-size: var(--typography-text-small);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  letter-spacing: var(--typography-text-letterspacing);
  gap: var(--spacings-100-c-xxxx-small);
}
.input .labels-block .primary-label .lock-icon, .input-default .labels-block .primary-label .lock-icon {
  color: var(--form-style-label);
  text-align: right;
  align-items: center;
  font-family: var(--typography-icon-font);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  line-height: 100%;
}
.input .labels-block .secondary-label, .input-default .labels-block .secondary-label {
  color: var(--text-style-text-secondary);
  text-align: right;
  font-family: var(--typography-text-font);
  font-size: var(--typography-text-x-small);
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: var(--typography-text-letterspacing);
}
.input .input-wrapper textarea.input-field, .input-default .input-wrapper textarea.input-field {
  overflow: auto;
}
.input .input-wrapper duet-date-picker .duet-date__input-wrapper:hover .duet-date__toggle:not(:hover):not(:focus) .duet-date__toggle-icon:first-child, .input .input-wrapper duet-date-picker .duet-date__input-wrapper:focus-within .duet-date__toggle:not(:hover):not(:focus) .duet-date__toggle-icon:first-child, .input-default .input-wrapper duet-date-picker .duet-date__input-wrapper:hover .duet-date__toggle:not(:hover):not(:focus) .duet-date__toggle-icon:first-child, .input-default .input-wrapper duet-date-picker .duet-date__input-wrapper:focus-within .duet-date__toggle:not(:hover):not(:focus) .duet-date__toggle-icon:first-child {
  color: var(--form-style-focus-filled-text);
  fill: var(--form-style-focus-filled-text);
}
.input .input-wrapper .input-field,
.input .input-wrapper duet-date-picker .duet-date__input-wrapper input.duet-date__input, .input-default .input-wrapper .input-field,
.input-default .input-wrapper duet-date-picker .duet-date__input-wrapper input.duet-date__input {
  display: flex;
  padding: 0px var(--spacings-75-b-x-small-plus);
  flex-direction: column;
  align-items: flex-start;
  flex: 1 0 0;
  align-self: stretch;
  min-height: var(--forms-default-size);
  width: 100%;
  border-radius: var(--forms-default-cornerradius);
  border: var(--form-style-stroke-width) solid var(--form-style-outline);
  background: var(--form-style-background);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  resize: none;
  color: var(--form-style-filled-text);
  font-family: var(--typography-text-font);
  font-size: var(--typography-text-input-mobile);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  letter-spacing: var(--typography-text-letterspacing);
}
.input .input-wrapper .input-field::placeholder,
.input .input-wrapper duet-date-picker .duet-date__input-wrapper input.duet-date__input::placeholder, .input-default .input-wrapper .input-field::placeholder,
.input-default .input-wrapper duet-date-picker .duet-date__input-wrapper input.duet-date__input::placeholder {
  color: var(--form-style-placeholder-text);
  font-weight: 400;
}
.input .input-wrapper .input-field.locked,
.input .input-wrapper duet-date-picker .duet-date__input-wrapper input.duet-date__input.locked, .input-default .input-wrapper .input-field.locked,
.input-default .input-wrapper duet-date-picker .duet-date__input-wrapper input.duet-date__input.locked {
  border-radius: var(--forms-default-cornerradius);
  border: var(--form-style-stroke-width) solid var(--form-style-outline);
  background: var(--form-style-locked);
}
.input .input-wrapper .input-field:not(:read-only):focus,
.input .input-wrapper duet-date-picker .duet-date__input-wrapper input.duet-date__input:not(:read-only):focus, .input-default .input-wrapper .input-field:not(:read-only):focus,
.input-default .input-wrapper duet-date-picker .duet-date__input-wrapper input.duet-date__input:not(:read-only):focus {
  color: var(--form-style-focus-filled-text);
  border-color: var(--form-style-focus-outline);
  box-shadow: 0 0 0 1px var(--form-style-focus-outline);
  background: var(--form-style-focus-background);
}
.input .input-wrapper .input-field:not(:read-only):focus::placeholder,
.input .input-wrapper duet-date-picker .duet-date__input-wrapper input.duet-date__input:not(:read-only):focus::placeholder, .input-default .input-wrapper .input-field:not(:read-only):focus::placeholder,
.input-default .input-wrapper duet-date-picker .duet-date__input-wrapper input.duet-date__input:not(:read-only):focus::placeholder {
  color: var(--form-style-focus-placeholder-text);
  font-weight: 400;
}
.input .input-wrapper .input-field:not(:read-only):hover,
.input .input-wrapper duet-date-picker .duet-date__input-wrapper input.duet-date__input:not(:read-only):hover, .input-default .input-wrapper .input-field:not(:read-only):hover,
.input-default .input-wrapper duet-date-picker .duet-date__input-wrapper input.duet-date__input:not(:read-only):hover {
  color: var(--form-style-hover-filled-text);
  border-color: var(--form-style-hover-outline);
  box-shadow: 0 0 0 1px var(--form-style-hover-outline);
  background: var(--form-style-hover-background);
}
.input .input-wrapper .input-field:not(:read-only):hover::placeholder,
.input .input-wrapper duet-date-picker .duet-date__input-wrapper input.duet-date__input:not(:read-only):hover::placeholder, .input-default .input-wrapper .input-field:not(:read-only):hover::placeholder,
.input-default .input-wrapper duet-date-picker .duet-date__input-wrapper input.duet-date__input:not(:read-only):hover::placeholder {
  color: var(--form-style-hover-placeholder-text);
  font-weight: 400;
}
.input .success-block, .input-default .success-block {
  display: none;
  color: var(--state-success);
}
.input .error-block,
.input .error-empty-block, .input-default .error-block,
.input-default .error-empty-block {
  display: none;
  color: var(--state-error);
}
.input-large .labels-block .primary-label {
  font-size: var(--typography-text-medium);
}
.input-large .input-wrapper .input-field,
.input-large .input-wrapper duet-date-picker .duet-date__input-wrapper input.duet-date__input {
  padding: 0px var(--spacings-75-b-small);
  border-radius: var(--forms-large-cornerradius);
  min-height: var(--forms-large-size);
  font-size: var(--typography-text-large);
}
.input-large .input-wrapper .input-field::placeholder,
.input-large .input-wrapper duet-date-picker .duet-date__input-wrapper input.duet-date__input::placeholder {
  color: var(--form-style-placeholder-text);
  font-weight: 400;
}
.input-small .input-wrapper .input-field,
.input-small .input-wrapper duet-date-picker .duet-date__input-wrapper input.duet-date__input {
  padding: 0px var(--spacings-75-b-x-small);
  min-height: var(--forms-small-size);
  font-size: var(--typography-text-small);
}
.input-small .input-wrapper .input-field::placeholder,
.input-small .input-wrapper duet-date-picker .duet-date__input-wrapper input.duet-date__input::placeholder {
  color: var(--form-style-placeholder-text);
  font-weight: 400;
}
.tooltip-block {
  position: relative;
}
.tooltip-block button {
  color: var(--text-style-link);
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}
.tooltip-block .tooltip-container {
  display: none;
  position: absolute;
  left: 0px;
  top: 30px;
  width: 80svw;
  padding: var(--spacings-75-b-xx-small);
  flex-direction: row;
  justify-content: flex-end;
  align-items: flex-start;
  gap: var(--spacings-100-c-xx-small);
  border-radius: var(--elements-small-corner-radius);
  background: var(--background-default);
  box-shadow: 0px 2px 16px 0px var(--elements-shadow);
  z-index: 100;
  opacity: 0;
  transition: opacity 0.3s;
  max-width: 286px;
}
@media (min-width:768px) {
  .tooltip-block .tooltip-container {
    left: calc(100% + 15px);
    top: -4px;
  }
}
.tooltip-block .tooltip-container.show-transition {
  display: flex;
}
.tooltip-block .tooltip-container.show {
  opacity: 1;
}
.tooltip-block .tooltip-container.moved-tooltip {
  top: 30px;
}
.tooltip-block .tooltip-container.moved-tooltip .tooltip-content:before {
  content: "";
  position: absolute;
  left: 8px;
  top: calc(-1 * var(--spacings-75-b-xx-small) - 8px);
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid var(--background-default);
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  z-index: 5;
}
.tooltip-block .tooltip-container .tooltip-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacings-100-c-xxxx-small);
  flex: 1 0 0;
}
.tooltip-block .tooltip-container .tooltip-content:before {
  content: "";
  position: absolute;
  left: 8px;
  top: calc(-1 * var(--spacings-75-b-xx-small) - 8px);
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid var(--background-default);
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  z-index: 5;
}
@media (min-width:768px) {
  .tooltip-block .tooltip-container .tooltip-content:before {
    left: calc(-1 * var(--spacings-75-b-xx-small) - 7px);
    top: 8px;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 12px solid transparent;
    border-right: 12px solid var(--background-default);
  }
}
.tooltip-block .tooltip-container .tooltip-content img {
  aspect-ratio: 16/9;
  width: 100%;
  border-radius: var(--elements-image-corner-radius);
}
.tooltip-block .tooltip-container .close-btn {
  color: var(--text-style-headline);
  font-size: 14px;
  font-style: normal;
  font-weight: 900;
  line-height: 100%;
}
table:not(.duet-date__table) {
  width: fit-content;
  border-collapse: collapse;
  color: var(--text-style-headline);
  font-family: var(--typography-text-font);
  font-size: var(--typography-text-medium);
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: var(--typography-text-letterspacing);
  text-align: left;
  width: 100%;
}
@media (min-width:768px) {
  table:not(.duet-date__table) {
    width: fit-content;
  }
}
table:not(.duet-date__table) thead {
  border-bottom: var(--tables-header-divider-stroke) solid var(--tables-header-divider);
  display: none;
}
@media (min-width:768px) {
  table:not(.duet-date__table) thead {
    display: table-header-group;
  }
}
@media not (min-width:768px) {
  table:not(.duet-date__table) tbody {
    display: grid;
  }
}
table:not(.duet-date__table) tbody tr:nth-child(odd) {
  background: var(--tables-table-row-uneven);
}
table:not(.duet-date__table) thead tr,
table:not(.duet-date__table) tbody tr {
  border-bottom: var(--tables-table-divider-stroke) solid var(--tables-table-divider);
  padding: var(--spacings-100-c-xxx-small);
}
@media (min-width:768px) {
  table:not(.duet-date__table) thead tr .text-right,
  table:not(.duet-date__table) tbody tr .text-right {
    text-align: right;
  }
  table:not(.duet-date__table) thead tr .text-center,
  table:not(.duet-date__table) tbody tr .text-center {
    text-align: center;
  }
}
table:not(.duet-date__table) thead tr th.xx-large,
table:not(.duet-date__table) thead tr td.xx-large,
table:not(.duet-date__table) tbody tr th.xx-large,
table:not(.duet-date__table) tbody tr td.xx-large {
  width: 250px;
}
table:not(.duet-date__table) thead tr th.x-large,
table:not(.duet-date__table) thead tr td.x-large,
table:not(.duet-date__table) tbody tr th.x-large,
table:not(.duet-date__table) tbody tr td.x-large {
  width: 220px;
}
table:not(.duet-date__table) thead tr th.large,
table:not(.duet-date__table) thead tr td.large,
table:not(.duet-date__table) tbody tr th.large,
table:not(.duet-date__table) tbody tr td.large {
  width: 192px;
}
table:not(.duet-date__table) thead tr th.normal,
table:not(.duet-date__table) thead tr td.normal,
table:not(.duet-date__table) thead tr th,
table:not(.duet-date__table) thead tr td,
table:not(.duet-date__table) tbody tr th.normal,
table:not(.duet-date__table) tbody tr td.normal,
table:not(.duet-date__table) tbody tr th,
table:not(.duet-date__table) tbody tr td {
  width: 150px;
}
table:not(.duet-date__table) thead tr th.small,
table:not(.duet-date__table) thead tr td.small,
table:not(.duet-date__table) tbody tr th.small,
table:not(.duet-date__table) tbody tr td.small {
  width: 128px;
  max-width: 128px;
}
table:not(.duet-date__table) thead tr th,
table:not(.duet-date__table) tbody tr th {
  font-weight: 700;
  padding-top: var(--spacings-100-c-xxx-small);
  padding-bottom: var(--spacings-100-c-xxx-small);
}
table:not(.duet-date__table) thead tr th:first-of-type,
table:not(.duet-date__table) tbody tr th:first-of-type {
  padding-left: var(--spacings-100-c-xxx-small);
}
table:not(.duet-date__table) thead tr th:last-of-type,
table:not(.duet-date__table) tbody tr th:last-of-type {
  padding-right: var(--spacings-100-c-xxx-small);
}
table:not(.duet-date__table) thead tr td,
table:not(.duet-date__table) tbody tr td {
  justify-content: center;
  align-items: center;
  align-self: stretch;
}
@media (min-width:768px) {
  table:not(.duet-date__table) thead tr td,
  table:not(.duet-date__table) tbody tr td {
    padding: var(--spacings-100-c-xxx-small) 0px;
  }
  table:not(.duet-date__table) thead tr td:first-of-type,
  table:not(.duet-date__table) tbody tr td:first-of-type {
    padding-left: var(--spacings-100-c-xxx-small);
  }
  table:not(.duet-date__table) thead tr td:last-of-type,
  table:not(.duet-date__table) tbody tr td:last-of-type {
    padding-right: var(--spacings-100-c-xxx-small);
  }
}
@media not (min-width:768px) {
  table:not(.duet-date__table) thead tr td,
  table:not(.duet-date__table) tbody tr td {
    display: flex;
    width: 100%;
    justify-content: start;
    padding: 0;
    color: var(--text-style-headline);
  }
  table:not(.duet-date__table) thead tr td:before,
  table:not(.duet-date__table) tbody tr td:before {
    display: flex;
    content: attr(data-label) ":";
    color: var(--text-style-headline);
    padding-right: 5px;
  }
}
.grid, .variable-width-grid-parent {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gutter);
}
.grid > div, .variable-width-grid-parent > div {
  width: 100%;
  max-width: unset;
  grid-column: 1/span 12;
}
@media (min-width:768px) {
  .grid > div.narrow, .variable-width-grid-parent > div.narrow {
    grid-column: 2/span 10;
  }
}
@media (min-width:1200px) {
  .grid > div, .variable-width-grid-parent > div {
    grid-column: 2/span 10;
  }
  .grid > div.narrow, .variable-width-grid-parent > div.narrow {
    grid-column: 3/span 8;
  }
  .grid > div.wide, .variable-width-grid-parent > div.wide {
    grid-column: 1/span 12;
  }
}
.variable-width-grid-parent {
  width: 100%;
  justify-content: center;
  align-self: center;
}
@media (min-width:1200px) {
  .variable-width-grid-parent {
    max-width: var(--components-maxwidth-_component-wide);
  }
}
.variable-width-grid-parent .variable-width-grid {
  display: grid;
  width: 100%;
  justify-content: center;
  align-items: flex-start;
  gap: var(--grid-gutter);
  row-gap: var(--components-gap-section-vertical);
  align-self: stretch;
  grid-column: 1/span 12;
  grid-template-columns: repeat(12, 1fr);
}
.variable-width-grid-parent .variable-width-grid > :nth-child(even),
.variable-width-grid-parent .variable-width-grid > :nth-child(odd) {
  grid-column: span 12;
}
.variable-width-grid-parent .variable-width-grid > img,
.variable-width-grid-parent .variable-width-grid > picture {
  border-radius: var(--elements-image-corner-radius);
}
@media (min-width:1200px) {
  .variable-width-grid-parent .variable-width-grid {
    grid-column: 2/span 10;
    grid-template-columns: repeat(10, 1fr);
  }
}
@media (min-width:768px) {
  .variable-width-grid-parent .variable-width-grid.full-width > :nth-child(even),
  .variable-width-grid-parent .variable-width-grid.full-width > :nth-child(odd) {
    grid-column: span 12;
  }
  .variable-width-grid-parent .variable-width-grid > :nth-child(even),
  .variable-width-grid-parent .variable-width-grid > :nth-child(odd), .variable-width-grid-parent .variable-width-grid.width-50-50 > :nth-child(even),
  .variable-width-grid-parent .variable-width-grid.width-50-50 > :nth-child(odd) {
    grid-column: span 6;
  }
  .variable-width-grid-parent .variable-width-grid.width-40-60 > :nth-child(odd) {
    grid-column: span 4;
  }
  .variable-width-grid-parent .variable-width-grid.width-40-60 > :nth-child(even) {
    grid-column: span 8;
  }
  .variable-width-grid-parent .variable-width-grid.width-60-40 > :nth-child(odd) {
    grid-column: span 8;
  }
  .variable-width-grid-parent .variable-width-grid.width-60-40 > :nth-child(even) {
    grid-column: span 4;
  }
}
@media (min-width:984px) {
  .variable-width-grid-parent .variable-width-grid.full-width > :nth-child(even),
  .variable-width-grid-parent .variable-width-grid.full-width > :nth-child(odd) {
    grid-column: 2/span 10;
  }
  .variable-width-grid-parent .variable-width-grid:before, .variable-width-grid-parent .variable-width-grid.width-50-50:before {
    content: "";
  }
  .variable-width-grid-parent .variable-width-grid > :nth-child(even),
  .variable-width-grid-parent .variable-width-grid > :nth-child(odd), .variable-width-grid-parent .variable-width-grid.width-50-50 > :nth-child(even),
  .variable-width-grid-parent .variable-width-grid.width-50-50 > :nth-child(odd) {
    grid-column: span 5;
  }
  .variable-width-grid-parent .variable-width-grid.width-40-60 > :nth-child(odd) {
    grid-column: span 4;
  }
  .variable-width-grid-parent .variable-width-grid.width-40-60 > :nth-child(even) {
    grid-column: span 6;
  }
  .variable-width-grid-parent .variable-width-grid.width-60-40 > :nth-child(odd) {
    grid-column: span 6;
  }
  .variable-width-grid-parent .variable-width-grid.width-60-40 > :nth-child(even) {
    grid-column: span 4;
  }
}
@media (min-width:1200px) {
  .variable-width-grid-parent .variable-width-grid.full-width > :nth-child(even),
  .variable-width-grid-parent .variable-width-grid.full-width > :nth-child(odd) {
    grid-column: 1/span 10;
  }
  .variable-width-grid-parent .variable-width-grid:before, .variable-width-grid-parent .variable-width-grid.width-50-50:before {
    content: "";
    display: none;
  }
}
div.input-group {
  width: 100%;
}
@media (min-width:768px) {
  div.input-group.width-70 {
    width: 70%;
  }
  div.input-group.width-60 {
    width: 60%;
  }
  div.input-group.width-50 {
    width: 50%;
  }
  div.input-group.width-40 {
    width: 40%;
  }
  div.input-group.width-35 {
    width: 35%;
  }
  div.input-group.width-34 {
    width: 34%;
  }
  div.input-group.width-32 {
    width: 32%;
  }
  div.input-group.width-30 {
    width: 30%;
  }
  div.input-group.width-28 {
    width: 28%;
  }
  div.input-group.width-25 {
    width: 25%;
  }
  div.input-group.width-23 {
    width: 23%;
  }
  div.input-group.width-22 {
    width: 22%;
  }
  div.input-group.width-20 {
    width: 20%;
  }
  div.input-group.width-16 {
    width: 16%;
  }
  div.input-group.width-14 {
    width: 14%;
  }
  div.input-group.width-12 {
    width: 12%;
  }
  div.input-group.width-11 {
    width: 11%;
  }
  div.input-group.width-10 {
    width: 10%;
  }
  div.input-group.width-9 {
    width: 9%;
  }
}
meter-reading-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacings-75-b-small);
}
.input[data-type=meterreading].error.error-incomplete .error-incomplete-block {
  display: block;
}
.input[data-type=meterreading].error.error-invalid .error-invalid-block {
  display: block;
}
.input[data-type=meterreading] .error-incomplete-block,
.input[data-type=meterreading] .error-invalid-block {
  display: none;
  color: var(--state-error);
}
/* CSS Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
/* Remove default body margin */
body {
  margin: 0;
  font-family: sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Remove default styling for lists */
ul,
ol {
  list-style: none;
}
/* Remove default text decoration */
a {
  text-decoration: none;
  color: inherit;
}
/* Remove default styling for images */
img {
  max-width: 100%;
  display: block;
  height: auto;
}
/* Remove default form element styling */
button,
input,
textarea,
select {
  font: inherit;
  margin: 0;
  border: none;
  background: none;
  color: inherit;
}
/* Remove default button appearance */
button {
  cursor: pointer;
  background-color: transparent;
}
/* Set default HTML and body height */
html,
body {
  height: 100%;
}
/* Ensure tables don't have unexpected borders and spacing */
table {
  border-collapse: collapse;
  border-spacing: 0;
}
/* Reset heading and paragraph margins */
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}
/*******************************/
/*** Netz variables ***/
/*****************************/
/* Breakpoints */
:root {
  --spacings-50-a-xxx-large: 96px;
  --spacings-50-a-xx-large: 64px;
  --spacings-50-a-x-large: 48px;
  --spacings-50-a-large: 32px;
  --spacings-50-a-medium-plus: 24px;
  --spacings-75-b-xxx-large: 144px;
  --spacings-50-a-medium: 16px;
  --spacings-75-b-xx-large: 96px;
  --spacings-50-a-small: 12px;
  --spacings-50-a-x-small-plus: 10px;
  --spacings-75-b-x-large: 72px;
  --spacings-50-a-x-small: 8px;
  --spacings-50-a-xx-small: 6px;
  --spacings-50-a-xxx-small: 4px;
  --spacings-75-b-large: 48px;
  --spacings-75-b-medium-plus: 36px;
  --spacings-75-b-medium: 24px;
  --spacings-75-b-small: 18px;
  --spacings-75-b-x-small-plus: 15px;
  --spacings-75-b-x-small: 12px;
  --spacings-75-b-xx-small: 9px;
  --spacings-75-b-xxx-small: 6px;
  --spacings-100-c-xxx-large: 192px;
  --spacings-100-c-xx-large: 128px;
  --spacings-100-c-x-large: 96px;
  --spacings-100-c-large: 64px;
  --spacings-100-c-medium-plus: 48px;
  --spacings-100-c-medium: 32px;
  --spacings-100-c-small: 24px;
  --spacings-100-c-x-small-plus: 20px;
  --spacings-100-c-x-small: 16px;
  --spacings-100-c-xx-small: 12px;
  --spacings-100-c-xxx-small: 8px;
  --spacings-100-c-xxxx-small: 4px;
  --typography-headline-h1: 31px;
  --button-typography-large: 20px;
  --grid-width: 0px;
  --components-gap-section-vertical: var(--spacings-75-b-large);
  --components-maxwidth-_text: 320px;
  --components-maxwidth-_component-default: 320px;
  --components-maxwidth-_component-narrow: 320px;
  --components-maxwidth-_component-wide: 320px;
  --components-gap-section-vertical-narrow: var(--spacings-75-b-medium-plus);
  --components-gap-section-horizontal: var(--spacings-75-b-large);
  --components-gap-section-padding: var(--spacings-50-a-xx-large);
  --components-gap-section-padding-narrow: var(--spacings-50-a-large);
  --components-gap-elements-row: var(--spacings-100-c-x-small);
  --components-gap-elements-row-narrow: var(--spacings-100-c-xx-small);
  --components-gap-elements-row-seperator: var(--spacings-75-b-large);
  --components-gap-elements-row-seperator-narrow: var(--spacings-75-b-medium);
  --components-gap-inner-elements: var(--spacings-75-b-medium);
  --components-gap-box-padding-vertical: var(--spacings-75-b-large);
  --components-gap-box-padding-horizontal: var(--spacings-50-a-medium-plus);
  --elements-large-corner-radius: 16px;
  --elements-default-corner-radius: 8px;
  --elements-small-corner-radius: 4px;
  --elements-inner-corner-radius: 2px;
  --forms-large-cornerradius: 8px;
  --forms-default-cornerradius: 6px;
  --elements-corner-radius-padding: 2px;
  --elements-image-corner-radius: 8px;
  --grid-gutter: 16px;
  --grid-margin: 20px;
  --button-typography-default: 16px;
  --button-typography-small: 13px;
  --button-typography-large-lineheight: 28px;
  --button-typography-default-lineheight: 24px;
  --button-typography-small-lineheight: 20px;
  --button-typography-large-letterspacing: 0px;
  --button-typography-default-letterspacing: 0px;
  --button-typography-small-letterspacing: 0px;
  --button-large-minwidth: 128px;
  --button-default-minwidth: 96px;
  --button-small-minwidth: 64px;
  --button-large-padding-horizontal: 32px;
  --button-default-padding-horizontal: 24px;
  --button-small-padding-horizontal: 16px;
  --button-large-padding-vertical: 8px;
  --button-default-padding-vertical: 6px;
  --button-small-padding-vertical: 4px;
  --button-large-gap: 12px;
  --button-default-gap: 8px;
  --button-small-gap: 4px;
  --button-large-cornerradius: 8px;
  --button-default-cornerradius: 6px;
  --button-small-cornerradius: 4px;
  --button-large-size: var(--sizes-large);
  --elements-circle-shape: 256px;
  --button-default-size: var(--sizes-default);
  --button-small-size: var(--sizes-small);
  --elements-large-size: var(--sizes-large);
  --elements-default-size: var(--sizes-default);
  --elements-small-size: var(--sizes-small);
  --typography-headline-h2: 27px;
  --button-circle-button-large-size: var(--sizes-large);
  --button-circle-button-default-size: var(--sizes-default);
  --button-circle-button-small-size: var(--sizes-small);
  --typography-headline-h3: 24px;
  --typography-headline-h4: 21px;
  --typography-headline-h5: 19px;
  --typography-headline-h6: 17px;
  --typography-headline-h1-padding: 24px;
  --typography-headline-h2-padding: 24px;
  --typography-headline-h3-padding: 24px;
  --typography-headline-h4-padding: 24px;
  --typography-headline-h5-padding: 16px;
  --typography-headline-h6-padding: 16px;
  --typography-headline-h1-lineheight: 120%;
  --typography-headline-h2-lineheight: 120%;
  --typography-headline-h3-lineheight: 120%;
  --typography-headline-h4-lineheight: 120%;
  --typography-headline-h5-lineheight: 120%;
  --typography-headline-h6-lineheight: 120%;
  --typography-headline-h1-letterspacing: 0px;
  --typography-headline-h2-letterspacing: 0px;
  --typography-headline-h3-letterspacing: 0px;
  --typography-headline-h4-letterspacing: 0px;
  --typography-headline-h5-letterspacing: 0px;
  --typography-headline-h6-letterspacing: 0px;
  --typography-text-xx-large: 21px;
  --typography-icons-96-responsive: 64px;
  --typography-icons-48-responsive: 32px;
  --typography-icons-40-responsive: 30px;
  --typography-text-x-large: 19px;
  --typography-text-large: 17px;
  --typography-text-medium: 15px;
  --typography-text-small: 13px;
  --typography-text-x-small: 11px;
  --typography-text-p-padding: 16px;
  --typography-text-lineheight: 160%;
  --typography-text-letterspacing: 0px;
  --forms-small-cornerradius: 4px;
  --forms-checkbox-corner-radius: 3px;
  --forms-_offset-large: 4px;
  --forms-_offset-default: 2px;
  --forms-_offset-small: 1px;
  --forms-large-size: var(--sizes-large);
  --forms-default-size: var(--sizes-default);
  --forms-small-size: var(--sizes-small);
  --components-navigation-height: 64px;
  --breakpoint: Mobile;
  --components-numbers-numbers-large: 33px;
  --components-numbers-numbers-default: 27px;
  --components-numbers-numbers-letterspacing: 0px;
  --elements-chips: 32px;
  /* Tablet */
}
@media (min-width: 768px) {
  :root {
    --spacings-50-a-xxx-large: 144px;
    --spacings-50-a-xx-large: 96px;
    --spacings-50-a-x-large: 64px;
    --spacings-50-a-large: 48px;
    --spacings-50-a-medium-plus: 32px;
    --spacings-75-b-xxx-large: 168px;
    --spacings-50-a-medium: 24px;
    --spacings-75-b-xx-large: 112px;
    --spacings-50-a-small: 16px;
    --spacings-50-a-x-small-plus: 15px;
    --spacings-75-b-x-large: 84px;
    --spacings-50-a-x-small: 12px;
    --spacings-50-a-xx-small: 9px;
    --spacings-50-a-xxx-small: 6px;
    --spacings-75-b-large: 56px;
    --spacings-75-b-medium-plus: 42px;
    --spacings-75-b-medium: 28px;
    --spacings-75-b-small: 21px;
    --spacings-75-b-x-small-plus: 17px;
    --spacings-75-b-x-small: 14px;
    --spacings-75-b-xx-small: 10px;
    --spacings-75-b-xxx-small: 7px;
    --spacings-100-c-xxx-large: 192px;
    --spacings-100-c-xx-large: 128px;
    --spacings-100-c-x-large: 96px;
    --spacings-100-c-large: 64px;
    --spacings-100-c-medium-plus: 48px;
    --spacings-100-c-medium: 32px;
    --spacings-100-c-small: 24px;
    --spacings-100-c-x-small-plus: 20px;
    --spacings-100-c-x-small: 16px;
    --spacings-100-c-xx-small: 12px;
    --spacings-100-c-xxx-small: 8px;
    --spacings-100-c-xxxx-small: 4px;
    --typography-headline-h1: 44px;
    --button-typography-large: 21px;
    --grid-width: 0px;
    --components-gap-section-vertical: var(--spacings-75-b-large);
    --components-maxwidth-_text: 884px;
    --components-maxwidth-_component-default: 884px;
    --components-maxwidth-_component-narrow: 730px;
    --components-maxwidth-_component-wide: 884px;
    --components-gap-section-vertical-narrow: var(--spacings-75-b-medium-plus);
    --components-gap-section-horizontal: var(--grid-gutter);
    --components-gap-section-padding: var(--spacings-50-a-xx-large);
    --components-gap-section-padding-narrow: var(--spacings-50-a-large);
    --components-gap-elements-row: var(--spacings-100-c-medium);
    --components-gap-elements-row-narrow: var(--spacings-100-c-xx-small);
    --components-gap-elements-row-seperator: var(--spacings-75-b-large);
    --components-gap-elements-row-seperator-narrow: var(--spacings-75-b-medium-plus);
    --components-gap-inner-elements: var(--grid-gutter);
    --components-gap-box-padding-vertical: var(--spacings-75-b-large);
    --components-gap-box-padding-horizontal: var(--spacings-50-a-medium-plus);
    --elements-large-corner-radius: 18px;
    --elements-default-corner-radius: 12px;
    --elements-small-corner-radius: 4px;
    --elements-inner-corner-radius: 2px;
    --forms-large-cornerradius: 8px;
    --forms-default-cornerradius: 6px;
    --elements-corner-radius-padding: 2px;
    --elements-image-corner-radius: 12px;
    --grid-gutter: 40px;
    --grid-margin: 48px;
    --button-typography-default: 17px;
    --button-typography-small: 14px;
    --button-typography-large-lineheight: 28px;
    --button-typography-default-lineheight: 24px;
    --button-typography-small-lineheight: 20px;
    --button-typography-large-letterspacing: 0px;
    --button-typography-default-letterspacing: 0px;
    --button-typography-small-letterspacing: 0px;
    --button-large-minwidth: 144px;
    --button-default-minwidth: 112px;
    --button-small-minwidth: 80px;
    --button-large-padding-horizontal: 40px;
    --button-default-padding-horizontal: 28px;
    --button-small-padding-horizontal: 20px;
    --button-large-padding-vertical: 8px;
    --button-default-padding-vertical: 6px;
    --button-small-padding-vertical: 4px;
    --button-large-gap: 12px;
    --button-default-gap: 8px;
    --button-small-gap: 4px;
    --button-large-cornerradius: 8px;
    --button-default-cornerradius: 6px;
    --button-small-cornerradius: 4px;
    --button-large-size: var(--sizes-large);
    --elements-circle-shape: 256px;
    --button-default-size: var(--sizes-default);
    --button-small-size: var(--sizes-small);
    --elements-large-size: var(--sizes-large);
    --elements-default-size: var(--sizes-default);
    --elements-small-size: var(--sizes-small);
    --typography-headline-h2: 36px;
    --button-circle-button-large-size: var(--sizes-large);
    --button-circle-button-default-size: var(--sizes-default);
    --button-circle-button-small-size: var(--sizes-small);
    --typography-headline-h3: 30px;
    --typography-headline-h4: 25px;
    --typography-headline-h5: 22px;
    --typography-headline-h6: 19px;
    --typography-headline-h1-padding: 24px;
    --typography-headline-h2-padding: 24px;
    --typography-headline-h3-padding: 24px;
    --typography-headline-h4-padding: 24px;
    --typography-headline-h5-padding: 24px;
    --typography-headline-h6-padding: 16px;
    --typography-headline-h1-lineheight: 120%;
    --typography-headline-h2-lineheight: 120%;
    --typography-headline-h3-lineheight: 120%;
    --typography-headline-h4-lineheight: 120%;
    --typography-headline-h5-lineheight: 120%;
    --typography-headline-h6-lineheight: 120%%;
    --typography-headline-h1-letterspacing: 0px;
    --typography-headline-h2-letterspacing: 0px;
    --typography-headline-h3-letterspacing: 0px;
    --typography-headline-h4-letterspacing: 0px;
    --typography-headline-h5-letterspacing: 0px;
    --typography-headline-h6-letterspacing: 0px;
    --typography-text-xx-large: 25px;
    --typography-icons-96-responsive: 80px;
    --typography-icons-48-responsive: 40px;
    --typography-icons-40-responsive: 35px;
    --typography-text-x-large: 22px;
    --typography-text-large: 19px;
    --typography-text-medium: 16px;
    --typography-text-small: 14px;
    --typography-text-x-small: 12px;
    --typography-text-p-padding: 16px;
    --typography-text-lineheight: 160%;
    --typography-text-letterspacing: 0px;
    --forms-small-cornerradius: 4px;
    --forms-checkbox-corner-radius: 3px;
    --forms-_offset-large: 6px;
    --forms-_offset-default: 3px;
    --forms-_offset-small: 1px;
    --forms-large-size: var(--sizes-large);
    --forms-default-size: var(--sizes-default);
    --forms-small-size: var(--sizes-small);
    --components-navigation-height: 64px;
    --breakpoint: Tablet;
    --components-numbers-numbers-large: 48px;
    --components-numbers-numbers-default: 36px;
    --components-numbers-numbers-letterspacing: 0px;
    --elements-chips: 36px;
  }
}
:root {
  /* Desktop */
}
@media (min-width: 1200px) {
  :root {
    --spacings-50-a-xxx-large: 192px;
    --spacings-50-a-xx-large: 128px;
    --spacings-50-a-x-large: 96px;
    --spacings-50-a-large: 64px;
    --spacings-50-a-medium-plus: 48px;
    --spacings-75-b-xxx-large: 192px;
    --spacings-50-a-medium: 32px;
    --spacings-75-b-xx-large: 128px;
    --spacings-50-a-small: 24px;
    --spacings-50-a-x-small-plus: 20px;
    --spacings-75-b-x-large: 96px;
    --spacings-50-a-x-small: 16px;
    --spacings-50-a-xx-small: 12px;
    --spacings-50-a-xxx-small: 8px;
    --spacings-75-b-large: 64px;
    --spacings-75-b-medium-plus: 48px;
    --spacings-75-b-medium: 32px;
    --spacings-75-b-small: 24px;
    --spacings-75-b-x-small-plus: 20px;
    --spacings-75-b-x-small: 16px;
    --spacings-75-b-xx-small: 12px;
    --spacings-75-b-xxx-small: 8px;
    --spacings-100-c-xxx-large: 192px;
    --spacings-100-c-xx-large: 128px;
    --spacings-100-c-x-large: 96px;
    --spacings-100-c-large: 64px;
    --spacings-100-c-medium-plus: 48px;
    --spacings-100-c-medium: 32px;
    --spacings-100-c-small: 24px;
    --spacings-100-c-x-small-plus: 20px;
    --spacings-100-c-x-small: 16px;
    --spacings-100-c-xx-small: 12px;
    --spacings-100-c-xxx-small: 8px;
    --spacings-100-c-xxxx-small: 4px;
    --typography-headline-h1: 58px;
    --button-typography-large: 21px;
    --grid-width: 56px;
    --components-gap-section-vertical: var(--spacings-75-b-large);
    --components-maxwidth-_text: 1136px;
    --components-maxwidth-_component-default: 1136px;
    --components-maxwidth-_component-narrow: 896px;
    --components-maxwidth-_component-wide: 1376px;
    --components-gap-section-vertical-narrow: var(--spacings-75-b-medium-plus);
    --components-gap-section-horizontal: var(--grid-gutter);
    --components-gap-section-padding: var(--spacings-50-a-xx-large);
    --components-gap-section-padding-narrow: var(--spacings-50-a-large);
    --components-gap-elements-row: var(--spacings-100-c-medium-plus);
    --components-gap-elements-row-narrow: var(--spacings-100-c-x-small);
    --components-gap-elements-row-seperator: var(--spacings-75-b-large);
    --components-gap-elements-row-seperator-narrow: var(--spacings-75-b-medium-plus);
    --components-gap-inner-elements: var(--grid-gutter);
    --components-gap-box-padding-vertical: var(--spacings-75-b-large);
    --components-gap-box-padding-horizontal: var(--spacings-50-a-large);
    --elements-large-corner-radius: 20px;
    --elements-default-corner-radius: 12px;
    --elements-small-corner-radius: 6px;
    --elements-inner-corner-radius: 4px;
    --forms-large-cornerradius: 8px;
    --forms-default-cornerradius: 6px;
    --elements-corner-radius-padding: 2px;
    --elements-image-corner-radius: 12px;
    --grid-gutter: 64px;
    --grid-margin: 64px;
    --button-typography-default: 17px;
    --button-typography-small: 15px;
    --button-typography-large-lineheight: 28px;
    --button-typography-default-lineheight: 24px;
    --button-typography-small-lineheight: 20px;
    --button-typography-large-letterspacing: 0px;
    --button-typography-default-letterspacing: 0px;
    --button-typography-small-letterspacing: 0px;
    --button-large-minwidth: 160px;
    --button-default-minwidth: 128px;
    --button-small-minwidth: 96px;
    --button-large-padding-horizontal: 48px;
    --button-default-padding-horizontal: 32px;
    --button-small-padding-horizontal: 24px;
    --button-large-padding-vertical: 8px;
    --button-default-padding-vertical: 6px;
    --button-small-padding-vertical: 4px;
    --button-large-gap: 12px;
    --button-default-gap: 8px;
    --button-small-gap: 4px;
    --button-large-cornerradius: 8px;
    --button-default-cornerradius: 6px;
    --button-small-cornerradius: 4px;
    --button-large-size: var(--sizes-large);
    --elements-circle-shape: 256px;
    --button-default-size: var(--sizes-default);
    --button-small-size: var(--sizes-small);
    --elements-large-size: var(--sizes-large);
    --elements-default-size: var(--sizes-default);
    --elements-small-size: var(--sizes-small);
    --typography-headline-h2: 46px;
    --button-circle-button-large-size: var(--sizes-large);
    --button-circle-button-default-size: var(--sizes-default);
    --button-circle-button-small-size: var(--sizes-small);
    --typography-headline-h3: 36px;
    --typography-headline-h4: 29px;
    --typography-headline-h5: 25px;
    --typography-headline-h6: 21px;
    --typography-headline-h1-padding: 32px;
    --typography-headline-h2-padding: 24px;
    --typography-headline-h3-padding: 24px;
    --typography-headline-h4-padding: 24px;
    --typography-headline-h5-padding: 24px;
    --typography-headline-h6-padding: 16px;
    --typography-headline-h1-lineheight: 120%;
    --typography-headline-h2-lineheight: 120%;
    --typography-headline-h3-lineheight: 120%;
    --typography-headline-h4-lineheight: 120%;
    --typography-headline-h5-lineheight: 120%;
    --typography-headline-h6-lineheight: 120%;
    --typography-headline-h1-letterspacing: 0px;
    --typography-headline-h2-letterspacing: 0px;
    --typography-headline-h3-letterspacing: 0px;
    --typography-headline-h4-letterspacing: 0px;
    --typography-headline-h5-letterspacing: 0px;
    --typography-headline-h6-letterspacing: 0px;
    --typography-text-xx-large: 29px;
    --typography-icons-96-responsive: 96px;
    --typography-icons-48-responsive: 48px;
    --typography-icons-40-responsive: 40px;
    --typography-text-x-large: 25px;
    --typography-text-large: 21px;
    --typography-text-medium: 17px;
    --typography-text-small: 15px;
    --typography-text-x-small: 13px;
    --typography-text-p-padding: 16px;
    --typography-text-lineheight: 160%;
    --typography-text-letterspacing: 0px;
    --forms-small-cornerradius: 4px;
    --forms-checkbox-corner-radius: 3px;
    --forms-_offset-large: 7px;
    --forms-_offset-default: 3px;
    --forms-_offset-small: 2px;
    --forms-large-size: var(--sizes-large);
    --forms-default-size: var(--sizes-default);
    --forms-small-size: var(--sizes-small);
    --components-navigation-height: 80px;
    --breakpoint: Desktop;
    --components-numbers-numbers-large: 64px;
    --components-numbers-numbers-default: 46px;
    --components-numbers-numbers-letterspacing: 0px;
    --elements-chips: 40px;
  }
}
/* Theme */
:root,
[data-theme=light] {
  --text-style-headline: var(--color-primary-cd-color-4);
  --elements-decoration-color: var(--color-primary-cd-color-1);
  --text-style-headline-secondary: var(--color-primary-cd-color-1);
  --text-style-text-primary: var(--color-primary-cd-color-4);
  --text-style-text-secondary: rgba(112, 112, 112, 1);
  --text-style-link: var(--color-primary-cd-color-2);
  --tables-table-row-uneven: var(--color-transparency-darken-4);
  --tables-header-divider: var(--color-primary-cd-color-3);
  --tables-header-divider-stroke: 2px;
  --tables-table-divider: var(--color-transparency-darken-15);
  --tables-table-divider-stroke: 1px;
  --background-default: var(--color-primary-white);
  --background-alternative: var(--color-gray-scale-100);
  --background-light-box: var(--color-gray-scale-100);
  --background-dark-box: var(--color-primary-cd-color-1);
  --form-style-outline: var(--text-style-text-secondary);
  --form-style-hover-outline: var(--color-gray-scale-600);
  --form-style-stroke-width: 1px;
  --form-style-hover-stroke-width: 2px;
  --form-style-background: var(--color-primary-white);
  --form-style-hover-background: var(--color-primary-white);
  --form-style-focus-outline: var(--interaction-focus);
  --form-style-focus-stroke-width: 2px;
  --form-style-focus-background: var(--color-primary-white);
  --form-style-label: var(--text-style-text-secondary);
  --form-style-placeholder-text: var(--text-style-text-secondary);
  --form-style-help-text: var(--text-style-text-secondary);
  --form-style-hover-placeholder-text: var(--text-style-text-secondary);
  --form-style-focus-placeholder-text: var(--text-style-text-secondary);
  --form-style-filled-text: var(--text-style-text-primary);
  --form-style-hover-filled-text: var(--text-style-text-primary);
  --form-style-focus-filled-text: var(--text-style-text-primary);
  --elements-active-front: var(--color-primary-white);
  --elements-active-back: var(--color-primary-cd-color-1);
  --elements-passive-front: var(--color-transparency-darken-60);
  --elements-passive-back: var(--color-transparency-darken-10);
  --elements-divider-stroke: var(--color-transparency-darken-15);
  --form-style-locked: var(--color-transparency-darken-10);
  --elements-shadow: var(--color-transparency-darken-15);
  --elements-shadow-strong: var(--color-transparency-darken-15);
  --tab-active-outline: var(--color-primary-cd-color-2);
  --tab-active-stroke-width: 2px;
  --interaction-hover: var(--color-transparency-darken-4);
  --interaction-hover-strong: var(--color-transparency-darken-15);
  --interaction-hover-alternative: var(--color-transparency-lighten-10);
  --interaction-hover-alternative-strong: var(--color-transparency-lighten-20);
  --interaction-active: var(--color-secondary-secondary-2);
  --button-style-primary-front: var(--color-primary-white);
  --interaction-focus: var(--color-primary-cd-color-4);
  --button-style-primary-back: var(--color-primary-cd-color-2);
  --button-style-primary-stroke: var(--color-primary-transparent);
  --button-style-primary-stroke-width: 0px;
  --button-style-primary-front-hover: var(--color-primary-white);
  --button-style-primary-back-hover: var(--color-transparency-darken-20);
  --button-style-primary-stroke-hover: var(--color-primary-transparent);
  --button-style-primary-stroke-width-hover: 0px;
  --button-style-secondary-front: var(--color-primary-cd-color-2);
  --button-style-secondary-back: var(--color-primary-transparent);
  --button-style-secondary-stroke: var(--color-primary-cd-color-2);
  --button-style-secondary-stroke-width: 1px;
  --button-style-secondary-front-hover: var(--color-primary-cd-color-2);
  --button-style-secondary-back-hover: var(--color-transparency-darken-5);
  --button-style-secondary-stroke-hover: var(--color-primary-cd-color-2);
  --button-style-secondary-stroke-width-hover: 2px;
  --badges-solid-text: var(--color-primary-white);
  --badges-solid-color: var(--color-primary-cd-color-1);
  --badges-outline-text: var(--color-primary-cd-color-3);
  --badges-outline-stroke: var(--color-primary-cd-color-3);
  --state-success: rgba(26, 128, 0, 1);
  --state-success-background: rgba(26, 128, 0, 0.08);
  --badges-success-text: var(--color-primary-white);
  --badges-success-color: rgba(26, 128, 0, 1);
  --badges-warning-text: var(--text-style-text-primary);
  --state-warning: rgba(191, 121, 0, 1);
  --state-warning-background: rgba(255, 184, 0, 0.08);
  --badges-warning-color: rgba(255, 184, 0, 1);
  --state-error: rgba(192, 11, 0, 1);
  --state-error-background: rgba(192, 11, 0, 0.08);
  --state-info: rgba(77, 163, 255, 1);
  --badges-error-text: var(--color-primary-white);
  --state-info-background: rgba(77, 163, 255, 0.08);
  --badges-error-color: rgba(192, 11, 0, 1);
  --elements-stroke: 1px;
  --elements-stroke-hover: 1px;
  --elements-stroke-active: 2px;
  --elements-stroke-strong: 2px;
  --elements-stroke-strong-hover: 2px;
  --elements-stroke-strong-active: 2px;
  --elements-interaction-indicator: 8px;
  --interaction-stroke-width-focus: 2px;
}
/* Dark */
[data-theme=grey] {
  --text-style-headline: var(--color-primary-cd-color-4);
  --elements-decoration-color: var(--color-primary-cd-color-1);
  --text-style-headline-secondary: var(--color-primary-cd-color-1);
  --text-style-text-primary: var(--color-primary-cd-color-4);
  --text-style-text-secondary: rgba(112, 112, 112, 1);
  --text-style-link: var(--color-primary-cd-color-2);
  --tables-table-row-uneven: var(--color-transparency-darken-4);
  --tables-header-divider: var(--color-primary-cd-color-3);
  --tables-header-divider-stroke: 2px;
  --tables-table-divider: var(--color-transparency-darken-15);
  --tables-table-divider-stroke: 1px;
  --background-default: var(--color-gray-scale-100);
  --background-alternative: var(--color-primary-white);
  --background-light-box: var(--color-primary-white);
  --background-dark-box: var(--color-primary-cd-color-1);
  --form-style-outline: var(--text-style-text-secondary);
  --form-style-hover-outline: var(--color-gray-scale-600);
  --form-style-stroke-width: 1px;
  --form-style-hover-stroke-width: 2px;
  --form-style-background: var(--color-primary-white);
  --form-style-hover-background: var(--color-primary-white);
  --form-style-focus-outline: var(--interaction-focus);
  --form-style-focus-stroke-width: 2px;
  --form-style-focus-background: var(--color-primary-white);
  --form-style-label: var(--text-style-text-secondary);
  --form-style-placeholder-text: var(--text-style-text-secondary);
  --form-style-help-text: var(--text-style-text-secondary);
  --form-style-hover-placeholder-text: var(--text-style-text-secondary);
  --form-style-focus-placeholder-text: var(--text-style-text-secondary);
  --form-style-filled-text: var(--text-style-text-primary);
  --form-style-hover-filled-text: var(--text-style-text-primary);
  --form-style-focus-filled-text: var(--text-style-text-primary);
  --elements-active-front: var(--color-primary-white);
  --elements-active-back: var(--color-primary-cd-color-1);
  --elements-passive-front: var(--color-transparency-darken-60);
  --elements-passive-back: var(--color-transparency-darken-10);
  --elements-divider-stroke: var(--color-transparency-darken-15);
  --form-style-locked: var(--color-transparency-darken-10);
  --elements-shadow: var(--color-transparency-darken-15);
  --elements-shadow-strong: var(--color-transparency-darken-15);
  --tab-active-outline: var(--color-primary-cd-color-2);
  --tab-active-stroke-width: 2px;
  --interaction-hover: var(--color-transparency-darken-4);
  --interaction-hover-strong: var(--color-transparency-darken-15);
  --interaction-hover-alternative: var(--color-transparency-lighten-10);
  --interaction-hover-alternative-strong: var(--color-transparency-lighten-20);
  --interaction-active: var(--color-secondary-secondary-2);
  --button-style-primary-front: var(--color-primary-white);
  --interaction-focus: var(--color-primary-cd-color-4);
  --button-style-primary-back: var(--color-primary-cd-color-2);
  --button-style-primary-stroke: var(--color-primary-transparent);
  --button-style-primary-stroke-width: 0px;
  --button-style-primary-front-hover: var(--color-primary-white);
  --button-style-primary-back-hover: var(--color-transparency-darken-20);
  --button-style-primary-stroke-hover: var(--color-primary-transparent);
  --button-style-primary-stroke-width-hover: 0px;
  --button-style-secondary-front: var(--color-primary-cd-color-2);
  --button-style-secondary-back: var(--color-primary-transparent);
  --button-style-secondary-stroke: var(--color-primary-cd-color-2);
  --button-style-secondary-stroke-width: 1px;
  --button-style-secondary-front-hover: var(--color-primary-cd-color-2);
  --button-style-secondary-back-hover: var(--color-transparency-darken-5);
  --button-style-secondary-stroke-hover: var(--color-primary-cd-color-2);
  --button-style-secondary-stroke-width-hover: 2px;
  --badges-solid-text: var(--color-primary-white);
  --badges-solid-color: var(--color-primary-cd-color-1);
  --badges-outline-text: var(--color-primary-cd-color-3);
  --badges-outline-stroke: var(--color-primary-cd-color-3);
  --state-success: rgba(26, 128, 0, 1);
  --state-success-background: rgba(26, 128, 0, 0.08);
  --badges-success-text: var(--color-primary-white);
  --badges-success-color: rgba(26, 128, 0, 1);
  --badges-warning-text: var(--text-style-text-primary);
  --state-warning: rgba(191, 121, 0, 1);
  --state-warning-background: rgba(255, 184, 0, 0.08);
  --badges-warning-color: rgba(255, 184, 0, 1);
  --state-error: rgba(192, 11, 0, 1);
  --state-error-background: rgba(192, 11, 0, 0.08);
  --state-info: rgba(77, 163, 255, 1);
  --badges-error-text: var(--color-primary-white);
  --state-info-background: rgba(77, 163, 255, 0.08);
  --badges-error-color: rgba(192, 11, 0, 1);
  --elements-stroke: 1px;
  --elements-stroke-hover: 1px;
  --elements-stroke-active: 2px;
  --elements-stroke-strong: 2px;
  --elements-stroke-strong-hover: 2px;
  --elements-stroke-strong-active: 2px;
  --elements-interaction-indicator: 8px;
  --interaction-stroke-width-focus: 2px;
}
/* Dark */
[data-theme=dark] {
  --text-style-headline: var(--color-primary-white);
  --elements-decoration-color: var(--color-primary-white);
  --text-style-headline-secondary: var(--color-primary-white);
  --text-style-text-primary: var(--color-primary-white);
  --text-style-text-secondary: var(--color-transparency-lighten-70);
  --text-style-link: var(--color-secondary-secondary-3);
  --tables-table-row-uneven: var(--color-transparency-lighten-5);
  --tables-header-divider: var(--color-primary-white);
  --tables-header-divider-stroke: 2px;
  --tables-table-divider: var(--color-transparency-lighten-80);
  --tables-table-divider-stroke: 1px;
  --background-default: var(--color-primary-cd-color-4);
  --background-alternative: var(--color-primary-cd-color-1);
  --background-light-box: rgba(76, 76, 76, 1);
  --background-dark-box: var(--color-primary-cd-color-4);
  --form-style-outline: var(--color-gray-scale-200);
  --form-style-hover-outline: var(--color-gray-scale-400);
  --form-style-stroke-width: 1px;
  --form-style-hover-stroke-width: 2px;
  --form-style-background: var(--color-primary-transparent);
  --form-style-hover-background: var(--color-primary-white);
  --form-style-focus-outline: var(--interaction-focus);
  --form-style-focus-stroke-width: 2px;
  --form-style-focus-background: var(--color-primary-white);
  --form-style-label: var(--color-primary-white);
  --form-style-placeholder-text: var(--text-style-text-secondary);
  --form-style-help-text: var(--text-style-text-secondary);
  --form-style-hover-placeholder-text: var(--color-gray-scale-600);
  --form-style-focus-placeholder-text: var(--color-gray-scale-600);
  --form-style-filled-text: var(--text-style-text-primary);
  --form-style-hover-filled-text: var(--color-gray-scale-900);
  --form-style-focus-filled-text: var(--color-gray-scale-900);
  --elements-active-front: var(--color-primary-cd-color-4);
  --elements-active-back: var(--color-primary-white);
  --elements-passive-front: var(--color-transparency-lighten-90);
  --elements-passive-back: var(--color-transparency-lighten-5);
  --elements-divider-stroke: var(--color-transparency-lighten-40);
  --form-style-locked: var(--color-transparency-lighten-10);
  --elements-shadow: var(--color-transparency-darken-20);
  --elements-shadow-strong: var(--color-transparency-darken-70);
  --tab-active-outline: var(--color-primary-white);
  --tab-active-stroke-width: 2px;
  --interaction-hover: var(--color-transparency-darken-10);
  --interaction-hover-strong: var(--color-transparency-lighten-40);
  --interaction-hover-alternative: var(--color-transparency-darken-5);
  --interaction-hover-alternative-strong: var(--color-transparency-darken-12);
  --interaction-active: var(--color-secondary-secondary-2);
  --button-style-primary-front: var(--color-primary-cd-color-2);
  --interaction-focus: var(--color-primary-cd-color-4);
  --button-style-primary-back: var(--color-primary-white);
  --button-style-primary-stroke: var(--color-primary-transparent);
  --button-style-primary-stroke-width: 0px;
  --button-style-primary-front-hover: var(--color-primary-cd-color-2);
  --button-style-primary-back-hover: var(--color-transparency-darken-5);
  --button-style-primary-stroke-hover: var(--color-primary-transparent);
  --button-style-primary-stroke-width-hover: 0px;
  --button-style-secondary-front: var(--color-primary-white);
  --button-style-secondary-back: var(--color-primary-transparent);
  --button-style-secondary-stroke: var(--color-primary-white);
  --button-style-secondary-stroke-width: 1px;
  --button-style-secondary-front-hover: var(--color-primary-white);
  --button-style-secondary-back-hover: var(--color-transparency-darken-10);
  --button-style-secondary-stroke-hover: var(--color-primary-white);
  --button-style-secondary-stroke-width-hover: 2px;
  --badges-solid-text: var(--color-primary-cd-color-1);
  --badges-solid-color: var(--color-primary-white);
  --badges-outline-text: var(--color-primary-white);
  --badges-outline-stroke: var(--color-primary-white);
  --state-success: rgba(126, 201, 110, 1);
  --state-success-background: rgba(126, 201, 110, 0.1);
  --badges-success-text: rgba(26, 128, 0, 1);
  --badges-success-color: var(--color-primary-white);
  --badges-warning-text: var(--color-primary-cd-color-4);
  --state-warning: rgba(255, 184, 0, 1);
  --state-warning-background: rgba(255, 184, 0, 0.1);
  --badges-warning-color: var(--color-primary-white);
  --state-error: rgba(246, 153, 147, 1);
  --state-error-background: rgba(246, 153, 147, 0.1);
  --state-info: rgba(106, 180, 255, 1);
  --badges-error-text: rgba(192, 11, 0, 1);
  --state-info-background: rgba(106, 180, 255, 0.1);
  --badges-error-color: var(--color-primary-white);
  --elements-stroke: 1px;
  --elements-stroke-hover: 1px;
  --elements-stroke-active: 2px;
  --elements-stroke-strong: 2px;
  --elements-stroke-strong-hover: 2px;
  --elements-stroke-strong-active: 2px;
  --elements-interaction-indicator: 8px;
  --interaction-stroke-width-focus: 2px;
}
/* BASICS */
/* Mode 1 */
:root {
  --color-primary-cd-color-1: rgba(224, 0, 27, 1);
  --color-secondary-secondary-1: rgba(163, 0, 19, 1);
  --color-secondary-secondary-2: rgba(184, 220, 194, 1);
  --color-secondary-secondary-3: rgba(172, 205, 214, 1);
  --color-secondary-secondary-4: rgba(191, 191, 191, 1);
  --color-secondary-secondary-5: rgba(128, 128, 128, 1);
  --color-primary-cd-color-2: rgba(80, 110, 91, 1);
  --color-primary-cd-color-3: rgba(118, 118, 118, 1);
  --color-transparency-darken-4: rgba(0, 0, 0, 0.04);
  --color-transparency-lighten-5: rgba(255, 255, 255, 0.05);
  --color-primary-cd-color-4: rgba(67, 67, 67, 1);
  --color-transparency-darken-5: rgba(0, 0, 0, 0.05);
  --color-primary-white: rgba(255, 255, 255, 1);
  --color-transparency-lighten-10: rgba(255, 255, 255, 0.1);
  --color-transparency-lighten-12: rgba(255, 255, 255, 0.12);
  --color-transparency-lighten-15: rgba(255, 255, 255, 0.15);
  --color-transparency-lighten-20: rgba(255, 255, 255, 0.2);
  --color-transparency-lighten-30: rgba(255, 255, 255, 0.3);
  --color-transparency-lighten-40: rgba(255, 255, 255, 0.4);
  --color-transparency-lighten-50: rgba(255, 255, 255, 0.5);
  --color-transparency-lighten-60: rgba(255, 255, 255, 0.6);
  --color-transparency-lighten-70: rgba(255, 255, 255, 0.7);
  --color-transparency-lighten-80: rgba(255, 255, 255, 0.8);
  --color-transparency-lighten-90: rgba(255, 255, 255, 0.9);
  --color-transparency-darken-10: rgba(0, 0, 0, 0.1);
  --color-transparency-darken-12: rgba(0, 0, 0, 0.12);
  --color-transparency-darken-15: rgba(0, 0, 0, 0.15);
  --color-transparency-darken-20: rgba(0, 0, 0, 0.2);
  --color-transparency-darken-30: rgba(0, 0, 0, 0.3);
  --color-transparency-darken-40: rgba(0, 0, 0, 0.4);
  --color-transparency-darken-50: rgba(0, 0, 0, 0.5);
  --color-transparency-darken-60: rgba(0, 0, 0, 0.6);
  --color-transparency-darken-70: rgba(0, 0, 0, 0.7);
  --color-transparency-darken-80: rgba(0, 0, 0, 0.8);
  --color-transparency-darken-90: rgba(0, 0, 0, 0.9);
  --color-primary-black: rgba(0, 0, 0, 1);
  --color-gray-scale-50: rgba(250, 250, 250, 1);
  --color-gray-scale-100: rgba(245, 245, 245, 1);
  --color-gray-scale-200: rgba(238, 238, 238, 1);
  --color-gray-scale-300: rgba(224, 224, 224, 1);
  --color-gray-scale-400: rgba(189, 189, 189, 1);
  --color-gray-scale-500: rgba(158, 158, 158, 1);
  --color-gray-scale-600: rgba(117, 117, 117, 1);
  --color-gray-scale-700: rgba(97, 97, 97, 1);
  --color-gray-scale-800: rgba(66, 66, 66, 1);
  --color-gray-scale-900: rgba(33, 33, 33, 1);
  --color-primary-transparent: rgba(255, 255, 255, 0);
  --typography-corporate-font-1: Outfit;
  --typography-corporate-font-2: Inter;
  --typography-icon-font: Font Awesome 6 Pro;
  --typography-icon-font-weight: Solid;
  --typography-h1-font: var(--typography-corporate-font-1);
  --typography-h1-fontweight: Medium;
  --typography-h1-fontweight-strong: Bold;
  --typography-h2-font: var(--typography-corporate-font-1);
  --typography-h2-fontweight: Medium;
  --typography-h2-fontweight-strong: Bold;
  --typography-h3-font: var(--typography-corporate-font-1);
  --typography-h3-fontweight: Medium;
  --typography-h3-fontweight-strong: Bold;
  --typography-h4-font: var(--typography-corporate-font-1);
  --typography-h4-fontweight: Medium;
  --typography-h4-fontweight-strong: Bold;
  --typography-h5-font: var(--typography-corporate-font-1);
  --typography-h5-fontweight: Medium;
  --typography-h5-fontweight-strong: Bold;
  --typography-h6-font: var(--typography-corporate-font-1);
  --typography-h6-fontweight: Medium;
  --typography-h6-fontweight-strong: Bold;
  --typography-text-font: var(--typography-corporate-font-2);
  --typography-text-fontweight: Regular;
  --typography-text-fontweight-strong: Bold;
  --typography-button-font: var(--typography-corporate-font-2);
  --typography-button-fontweight: SemiBold;
  --sizes-x-large: 64px;
  --sizes-large: 56px;
  --sizes-default: 48px;
  --sizes-small: 40px;
  --sizes-x-small: 32px;
}
/* Custom Variables */
:root {
  --component-max-width: 1375px;
  --navigation-header-height-desktop: 122px;
  --navigation-header-height-tablet: 100px;
  --navigation-header-height-mobile: 76px;
  --navigation-main-height-desktop: 108px;
  --navigation-nav-height-desktop: 82px;
  --navigation-nav-height-tablet: 62px;
  --navigation-nav-height-mobile: 44px;
  --navigation-meta-height-desktop: 40px;
  --navigation-meta-height-tablet: 36px;
  --navigation-meta-height-mobile: 32px;
  --navigation-logo-header-width-desktop: 132px;
  --navigation-logo-header-height-desktop: 112px;
  --navigation-logo-header-height-tablet: 92px;
  --navigation-logo-header-height-mobile: 72px;
  --navigation-logo-icon-width-desktop: 72px;
  --navigation-logo-icon-height-desktop: 68px;
  --navigation-logo-icon-width-tablet: 60px;
  --navigation-logo-icon-height-tablet: 56px;
  --navigation-logo-icon-width-mobile: 48px;
  --navigation-logo-icon-height-mobile: 45px;
  --navigation-main-list-margin-left: 240px;
  --icon-height-mobile: 46px;
  --icon-customer-portal-width: 30px;
  --element-large-cornerradius: 16px;
  --element-tab-angle-size: 20px;
  --element-tab-angle-position-x: -16px;
  --element-tab-angle-position-y: 20px;
  --element-logo-edge-position-x-before: -16px;
  --element-logo-edge-position-x-after: -17px;
  --element-logo-edge-position-y: -16px;
  --video-height-mobile: 360px;
  --video-height-desktop: 640px;
  --hero-content-padding-mobile: 20px;
  --hero-content-search-form-input-height-mobile: 50px;
  --hero-content-search-form-button-height-mobile: 48px;
  --hero-content-search-form-input-height-desktop: 80px;
  --hero-content-search-form-button-height-desktop: 80px;
  --hero-content-search-title-gap-desktop: 6px;
  --hero-content-search-title-padding-top-desktop: 14px;
  --input-stroke-color: #c5c5c5;
  --button-icon-size: 20px;
  --box-height: 96px;
  --box-icon-right-size: 48px;
  --element-content-padding: 20px;
  --text-image-height-desktop: 630px;
  --text-image-gap-desktop: 74px;
  --text-image-text-container-max-width: 409px;
  --button-small-height: 48px;
  --overlay-transparency-darken-10: linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1));
  --overlay-transparency-darken-15: linear-gradient(0deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15));
  --overlay-transparency-darken-20: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
  --statistics-header-max-width: 368px;
  --statistics-content-max-width: 802px;
  --statistics-padding-bottom-desktop: 25px;
  --video-text-video-height-mobile: 640px;
  --video-text-video-height-desktop: 720px;
  --video-text-text-padding-left: 176px;
  --card-height-mobile: 460px;
  --card-height-desktop: 501px;
  --card-width-mobile: 280px;
  --card-width-desktop: 300px;
  --card-image-size-mobile: var(--card-width-mobile);
  --card-image-size-desktop: var(--card-width-desktop);
  --footer-border-top-color: #d8d8d8;
  --footer-contact-btn-icon-size: 20px;
  --profile-page-main-gap: 25px;
  --profile-page-sidenav-padding-x-mobile: 23px;
  --profile-page-sidenav-divider-position: -16px;
  --notification-bg: #fffae8;
  --notification-succeed-bg: #f1faef;
  --input-xs-input-size: 80px;
  --input-sm-input-size: 160px;
  --input-xl-input-size: 224px;
  --input-radio-element-gap: 27px;
  --input-radio-element-label-padding-left: 30px;
  --input-radio-element-radio-row-gap: 25px;
  --input-text-max-width: 280px;
  --input-textfield-max-width: 320px;
  --main-container-max-width: 800px;
  --customer-login-padding-top-mobile: 31px;
  --customer-login-padding-bottom-mobile: 64px;
  --customer-login-padding-top-desktop: 100px;
  --customer-login-padding-bottom-desktop: 118px;
  --customer-login-max-width: 1200px;
  --customer-login-form-image-content-gap-desktop: 171px;
  --customer-login-form-image-content-gap-mobile: 16px;
  --customer-login-form-container-max-width: 408px;
  --customer-login-h1-margin-bottom: -8px;
  --customer-login-form-container-gap: 16px;
  --customer-login-image-container-max-with: 720px;
  --customer-login-form-gap-desktop: 32px;
  --customer-login-form-gap-mobile: 24px;
  --customer-login-form-rows-gap: 16px;
  --customer-login-divider-margin-top: 8px;
  --customer-login-divider-margin-bottom: 8px;
  --customer-dashboard-mobile-nav-padding-y: 24px;
  --customer-dashboard-mobile-nav-select-item-gap: 6px;
  --customer-dashboard-padding-bottom-mobile: 64px;
  --customer-dashboard-info-card-container-gap-mobile: 24px;
  --customer-dashboard-info-card-container-gap-desktop: 32px;
  --customer-dashboard-info-card-padding-x-mobile: 16px;
  --customer-dashboard-info-card-padding-x-desktop: 32px;
  --customer-dashboard-info-card-padding-y-mobile: 24px;
  --customer-dashboard-info-card-padding-y-desktop: 32px;
  --customer-dashboard-info-cards-container-row-gap-mobile: 24px;
  --customer-dashboard-info-cards-container-row-gap-desktop: 32px;
  --customer-dashboard-info-card-gap-mobile: 24px;
  --customer-dashboard-info-card-gap-desktop: 24px;
  --customer-dashboard-info-card-rows-gap-mobile: 16px;
  --customer-dashboard-info-card-rows-gap-desktop: 24px;
  --customer-dashboard-info-card-col-items-inline-gap: 8px;
  --customer-dashboard-info-card-col-items-column-small-gap: 4px;
  --customer-dashboard-info-card-col-items-column-medium-gap: 8px;
  --customer-dashboard-info-card-col-items-column-big-gap: 16px;
  --customer-dashboard-info-card-grid-item-gap: 24px;
  --customer-dashboard-content-gap-mobile: 32px;
  --customer-dashboard-content-gap: 32px;
  --customer-dashboard-select-meter-gap: 16px;
  --customer-dashboard-meter-chip-padding-y-mobile: 8.5px;
  --customer-dashboard-meter-chip-padding-y-desktop: 5.5px;
  --customer-dashboard-meter-chip-category-container-gap: 8px;
  --customer-dashboard-consumption-content-padding-x-mobile: 16px;
  --customer-dashboard-consumption-content-padding-x-desktop: 32px;
  --customer-dashboard-consumption-content-padding-y-mobile: 28px;
  --customer-dashboard-consumption-content-padding-y-desktop: 32px;
  --customer-dashboard-consumption-content-gap: 24px;
  --customer-dashboard-date-select-container-gap-mobile: 16px;
  --customer-dashboard-date-select-container-gap-desktop: 24px;
  --customer-dashboard-date-select-inner-gap: 10px;
  --customer-dashboard-time-span-chip-padding-x-mobile: 16px;
  --customer-dashboard-time-span-chips-gap-mobile: 8px;
  --customer-dashboard-time-span-chips-gap-desktop: 17px;
  --customer-dashboard-gap-desktop: 20px;
  --customer-dashboard-padding-top-desktop: 64px;
  --customer-dashboard-padding-bottom-desktop: 128px;
  --customer-dashboard-consumption-feed-in-container-gap-desktop: 64px;
  --customer-dashboard-simlar-household-container-gap: 16px;
  --customer-dashboard-side-nav-padding-bottom: 32px;
  --google-maps-height-mobile: 376px;
  --google-maps-height-desktop: 536px;
  --circle-button-small-font-size: 20px;
  --circle-button-default-font-size: 24px;
  --circle-button-large-font-size: 28px;
}
/* Headlines styles generator */
/* Columns mixin */
/*******************************/
/*** Netz variables ***/
/*****************************/
:root {
  --typography-text-input-mobile: 16px;
}
@media (min-width: 1200px) {
  :root {
    --typography-text-input-mobile: 17px;
  }
}
.text-primary, .tooltip-block .tooltip-container .tooltip-content {
  color: var(--text-style-text-primary);
}
.text-secondary, .input .info-block, .input-default .info-block {
  color: var(--text-style-text-secondary);
}
.text-decoration {
  color: var(--elements-decoration-color);
}
.text-headline {
  color: var(--color-primary-cd-color-4);
}
.text-label, .form-container form .form-row .form-group label {
  color: var(--color-primary-cd-color-2);
}
.text-help {
  color: var(--form-style-help-text);
}
.text-filled, .input-element,
.select-element {
  color: var(--form-style-filled-text);
}
.text-link-small {
  color: var(--text-style-link);
}
.text-link {
  color: var(--text-style-link);
}
*:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-strong, .form-container form .form-row .form-group label:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), *.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
*.select-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
  font-weight: 700;
}
*:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-x-small, .input *.info-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .input-default *.info-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .input *.success-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .input-default *.success-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .input *.error-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.input *.error-empty-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .input-default *.error-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.input-default *.error-empty-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .tooltip-block button:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .tooltip-block .tooltip-container .tooltip-content *.tooltip-text:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
  font-family: var(--typography-text-font);
  font-size: var(--typography-text-x-small);
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: var(--typography-text-letterspacing);
}
*:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-x-small.text-strong, .input *.info-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-strong, .input-default *.info-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-strong, .input *.success-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-strong, .input-default *.success-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-strong, .input *.error-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-strong,
.input *.error-empty-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-strong, .input-default *.error-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-strong,
.input-default *.error-empty-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-strong, .tooltip-block button:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-strong, .tooltip-block .tooltip-container .tooltip-content *.tooltip-text:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-strong, .form-container form .form-row .form-group label:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-x-small, .input .form-container form .form-row .form-group label.info-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .form-container form .form-row .form-group .input label.info-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .input-default .form-container form .form-row .form-group label.info-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .form-container form .form-row .form-group .input-default label.info-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .input .form-container form .form-row .form-group label.success-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .form-container form .form-row .form-group .input label.success-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .input-default .form-container form .form-row .form-group label.success-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .form-container form .form-row .form-group .input-default label.success-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .input .form-container form .form-row .form-group label.error-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .form-container form .form-row .form-group .input label.error-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.input .form-container form .form-row .form-group label.error-empty-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.form-container form .form-row .form-group .input label.error-empty-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .input-default .form-container form .form-row .form-group label.error-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .form-container form .form-row .form-group .input-default label.error-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.input-default .form-container form .form-row .form-group label.error-empty-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.form-container form .form-row .form-group .input-default label.error-empty-block:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .tooltip-block .tooltip-container .tooltip-content .form-container form .form-row .form-group label.tooltip-text:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .form-container form .form-row .form-group .tooltip-block .tooltip-container .tooltip-content label.tooltip-text:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), *.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-x-small, .input *.info-block.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .input-default *.info-block.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .input *.success-block.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .input-default *.success-block.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .input *.error-block.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.input *.error-empty-block.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .input-default *.error-block.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.input-default *.error-empty-block.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .tooltip-block button.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .tooltip-block .tooltip-container .tooltip-content *.tooltip-text.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
*.select-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-x-small,
.input *.info-block.select-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.input-default *.info-block.select-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.input *.success-block.select-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.input-default *.success-block.select-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.input *.error-block.select-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.input *.error-empty-block.select-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.input-default *.error-block.select-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.input-default *.error-empty-block.select-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.tooltip-block button.select-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.tooltip-block .tooltip-container .tooltip-content *.tooltip-text.select-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-x-small-strong, .tooltip-block .tooltip-container .tooltip-content *.tooltip-title:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
  font-weight: 700;
}
*:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-small, .plan-info *.polygon-info-list:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .plan-info *.error-text:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .form-container form .form-row .form-group label:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
  font-family: var(--typography-text-font);
  font-size: var(--typography-text-small);
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: var(--typography-text-letterspacing);
}
*:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-small.text-strong, .plan-info *.polygon-info-list:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-strong, .plan-info *.error-text:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-strong, .form-container form .form-row .form-group label:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), *.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-small, .plan-info *.polygon-info-list.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .plan-info *.error-text.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
*.select-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-small,
.plan-info *.polygon-info-list.select-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.plan-info *.error-text.select-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-small-strong, .plan-info .form-switch *.tab:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .plan-info .form-switch .number-search-wrapper .search-input-group .search-label-wrapper *.primary-label:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .plan-info .form-switch .found-address .address-label-wrapper .label-area *.primary-label:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
  font-weight: 700;
}
*:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-medium, *.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
*.select-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .form-row-optional *.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6)::placeholder, a.text-link:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
  font-family: var(--typography-text-font);
  font-size: var(--typography-text-medium);
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: var(--typography-text-letterspacing);
}
*:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-medium.text-strong, .form-container form .form-row .form-group label:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-medium, .form-container form .form-row .form-group label.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.form-container form .form-row .form-group label.select-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .form-row-optional .form-container form .form-row .form-group label.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6)::placeholder, .form-container form .form-row .form-group .form-row-optional label.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6)::placeholder, *.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), .form-row-optional *.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6)::placeholder,
*.select-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6), *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-medium-strong, table:not(.duet-date__table) thead tr td:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):before,
table:not(.duet-date__table) tbody tr td:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):before, a.text-link:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
  font-weight: 700;
}
*:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-large, *.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(:disabled)::placeholder,
*.select-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(:disabled)::placeholder {
  font-family: var(--typography-text-font);
  font-size: var(--typography-text-large);
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: var(--typography-text-letterspacing);
}
*:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-large.text-strong, .form-container form .form-row .form-group label:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-large, .form-container form .form-row .form-group label.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(:disabled)::placeholder,
.form-container form .form-row .form-group label.select-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(:disabled)::placeholder, *.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-large, *.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(:disabled)::placeholder,
*.select-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-large,
*.select-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(:disabled)::placeholder, *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-large-strong {
  font-weight: 700;
}
*:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-x-large {
  font-family: var(--typography-text-font);
  font-size: var(--typography-text-x-large);
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: var(--typography-text-letterspacing);
}
*:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-x-large.text-strong, .form-container form .form-row .form-group label:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-x-large, *.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-x-large,
*.select-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-x-large, *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-x-large-strong {
  font-weight: 700;
}
*:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-xx-large {
  font-family: var(--typography-text-font);
  font-size: var(--typography-text-xx-large);
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: var(--typography-text-letterspacing);
}
*:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-xx-large.text-strong, .form-container form .form-row .form-group label:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-xx-large, *.input-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-xx-large,
*.select-element:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-xx-large, *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6).text-xx-large-strong {
  font-weight: 700;
}
.text-line-limit-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
}
.text-line-limit-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.text-line-limit-3 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
}
.text-line-limit-4 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
}
.text-line-limit-5 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  -webkit-box-orient: vertical;
}
.text-line-limit-6 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  -webkit-box-orient: vertical;
}
.text-line-limit-7 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 7;
  line-clamp: 7;
  -webkit-box-orient: vertical;
}
.text-line-limit-8 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 8;
  line-clamp: 8;
  -webkit-box-orient: vertical;
}
.text-line-limit-9 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 9;
  line-clamp: 9;
  -webkit-box-orient: vertical;
}
.text-line-limit-10 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 10;
  line-clamp: 10;
  -webkit-box-orient: vertical;
}
.text-strong, .form-container form .form-row .form-group label, .input-element,
.select-element,
b {
  font-weight: 700;
}
.text-regular {
  font-weight: 400;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--typography-corporate-font-2);
  color: var(--text-style-headline);
}
h1.strong,
h1 .strong,
h2.strong,
h2 .strong,
h3.strong,
h3 .strong,
h4.strong,
h4 .strong,
h5.strong,
h5 .strong,
h6.strong,
h6 .strong {
  font-weight: 700;
}
h1.secondary,
h2.secondary,
h3.secondary,
h4.secondary,
h5.secondary,
h6.secondary {
  color: var(--text-style-headline-secondary);
}
h1 span,
h2 span,
h3 span,
h4 span,
h5 span,
h6 span {
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
  line-height: inherit;
}
h1 span.secondary,
h2 span.secondary,
h3 span.secondary,
h4 span.secondary,
h5 span.secondary,
h6 span.secondary {
  color: var(--text-style-headline-secondary);
  font-weight: 700;
}
.icon-font {
  font-family: var(--typography-icon-font);
  font-style: normal;
  font-weight: 900;
  line-height: 100%;
}
.icon-font-20 {
  font-size: 20px;
}
.icon-font-16 {
  font-size: 16px;
}
h1 {
  font-family: var(--typography-h1-font);
  font-size: var(--typography-headline-h1);
  line-height: var(--typography-headline-h1-lineheight);
  letter-spacing: var(--typography-headline-h1-letterspacing);
  font-weight: 500;
  display: block;
}
.h1 {
  font-family: var(--typography-h1-font);
  font-size: var(--typography-headline-h1);
  line-height: var(--typography-headline-h1-lineheight);
  letter-spacing: var(--typography-headline-h1-letterspacing);
}
h2 {
  font-family: var(--typography-h2-font);
  font-size: var(--typography-headline-h2);
  line-height: var(--typography-headline-h2-lineheight);
  letter-spacing: var(--typography-headline-h2-letterspacing);
  font-weight: 500;
  display: block;
}
.h2 {
  font-family: var(--typography-h2-font);
  font-size: var(--typography-headline-h2);
  line-height: var(--typography-headline-h2-lineheight);
  letter-spacing: var(--typography-headline-h2-letterspacing);
}
h3 {
  font-family: var(--typography-h3-font);
  font-size: var(--typography-headline-h3);
  line-height: var(--typography-headline-h3-lineheight);
  letter-spacing: var(--typography-headline-h3-letterspacing);
  font-weight: 500;
  display: block;
}
.h3 {
  font-family: var(--typography-h3-font);
  font-size: var(--typography-headline-h3);
  line-height: var(--typography-headline-h3-lineheight);
  letter-spacing: var(--typography-headline-h3-letterspacing);
}
h4 {
  font-family: var(--typography-h4-font);
  font-size: var(--typography-headline-h4);
  line-height: var(--typography-headline-h4-lineheight);
  letter-spacing: var(--typography-headline-h4-letterspacing);
  font-weight: 500;
  display: block;
}
.h4 {
  font-family: var(--typography-h4-font);
  font-size: var(--typography-headline-h4);
  line-height: var(--typography-headline-h4-lineheight);
  letter-spacing: var(--typography-headline-h4-letterspacing);
}
h5 {
  font-family: var(--typography-h5-font);
  font-size: var(--typography-headline-h5);
  line-height: var(--typography-headline-h5-lineheight);
  letter-spacing: var(--typography-headline-h5-letterspacing);
  font-weight: 500;
  display: block;
}
.h5 {
  font-family: var(--typography-h5-font);
  font-size: var(--typography-headline-h5);
  line-height: var(--typography-headline-h5-lineheight);
  letter-spacing: var(--typography-headline-h5-letterspacing);
}
h6 {
  font-family: var(--typography-h6-font);
  font-size: var(--typography-headline-h6);
  line-height: var(--typography-headline-h6-lineheight);
  letter-spacing: var(--typography-headline-h6-letterspacing);
  font-weight: 500;
  display: block;
}
.h6 {
  font-family: var(--typography-h6-font);
  font-size: var(--typography-headline-h6);
  line-height: var(--typography-headline-h6-lineheight);
  letter-spacing: var(--typography-headline-h6-letterspacing);
}
/* Desktop */
@media (min-width: 992px) {
  .text-large-desktop {
    font-family: var(--typography-corporate-font-1);
    font-style: normal;
    font-size: var(--typography-text-large);
    line-height: var(--typography-text-lineheight);
  }
  .text-medium-desktop {
    font-family: var(--typography-corporate-font-1);
    font-style: normal;
    font-size: var(--typography-text-medium);
    line-height: var(--typography-text-lineheight);
  }
}
p a {
  display: inline;
  font-size: inherit;
  font-family: inherit;
}
a {
  display: inline;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--spacings-100-c-x-small-plus);
  align-self: stretch;
  width: fit-content;
  gap: var(--button-default-gap);
  color: var(--button-style-secondary-front);
  text-align: center;
  font-family: var(--typography-button-font);
  font-size: var(--button-typography-default);
  font-style: normal;
  font-weight: 600;
  line-height: var(--button-typography-default-lineheight);
  letter-spacing: var(--button-typography-default-letterspacing);
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}
a i {
  font-size: 90%;
  line-height: inherit;
  padding: 0px 5px;
}
ol,
ul {
  font-weight: 400;
  font-family: var(--typography-text-font);
}
ol {
  list-style: inside;
  list-style-type: decimal;
}
ul {
  list-style: inside;
  list-style-type: revert;
}
a.meta-header-link {
  padding: var(--button-small-padding-vertical) 0;
}
a .link-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
a.text-link {
  color: var(--color-secondary-secondary-4);
}
a.btn-rounded {
  border-radius: 50%;
  width: var(--sizes-small);
  height: var(--sizes-small);
  background: var(--color-primary-cd-color-2);
  display: flex;
  align-items: center;
  justify-content: center;
}
a.main-navigation-link,
button.main-navigation-link {
  white-space: nowrap;
  padding: var(--spacings-100-c-xxxx-small);
  justify-content: center;
  align-items: center;
  gap: var(--spacings-100-c-xxxx-small);
  color: var(--text-style-text-primary);
  font-family: var(--typography-text-font);
  font-size: var(--typography-text-medium);
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: var(--typography-text-letterspacing);
}
a.main-navigation-link.important-link,
button.main-navigation-link.important-link {
  font-weight: 700;
}
a.main-navigation-link {
  font-weight: 400;
  font-size: var(--typography-text-medium);
}
.btn-link {
  max-width: fit-content;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  align-self: stretch;
  text-align: center;
  color: var(--button-style-secondary-front);
  font-family: var(--typography-button-font);
  font-style: normal;
  font-weight: 600;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}
.btn-link-default {
  font-size: var(--button-typography-default);
  line-height: var(--button-typography-default-lineheight);
  letter-spacing: var(--button-typography-default-letterspacing);
}
.btn-link-small {
  font-size: var(--button-typography-small);
  line-height: var(--button-typography-small-lineheight);
  letter-spacing: var(--button-typography-small-letterspacing);
}
.btn-link .btn-content {
  gap: var(--button-default-gap);
}
.btn-link:hover:not(:disabled) {
  text-decoration: underline;
}
.btn-link:disabled {
  opacity: 0.4;
}
.form-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacings-75-b-medium);
  padding: var(--spacings-75-b-medium) var(--spacings-50-a-medium);
  background: var(--background-alternative);
  border-radius: var(--elements-default-corner-radius);
  border: solid 1px var(--elements-divider-stroke);
}
.form-container form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacings-75-b-medium);
}
.form-container form .form-row {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacings-50-a-medium);
}
.form-container form .form-row .form-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacings-100-c-xxx-small);
}
.form-container form .form-row .form-group label {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 4.5px;
}
.input-element,
.select-element {
  height: var(--sizes-default);
  padding: 0 var(--spacings-75-b-x-small-plus);
  background: var(--form-style-background);
  border: solid 1px var(--form-style-outline);
  border-radius: var(--forms-large-cornerradius);
}
.input-element:disabled,
.select-element:disabled {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), #ffffff;
}
.select-element {
  display: flex;
  align-items: center;
  background-image: url('data:image/svg+xml,<svg width="15" height="8" viewBox="0 0 15 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.78125 7.46875L0.53125 1.21875C0.296875 0.984375 0.296875 0.554688 0.53125 0.320312C0.765625 0.0859375 1.19531 0.0859375 1.42969 0.320312L7.25 6.14062L13.0312 0.320312C13.2656 0.0859375 13.6953 0.0859375 13.9297 0.320312C14.1641 0.554688 14.1641 0.984375 13.9297 1.21875L7.67969 7.46875C7.44531 7.70312 7.01562 7.70312 6.78125 7.46875Z" fill="%23434343"/></svg>');
  background-repeat: no-repeat;
  background-position: calc(100% - 32px) 50%;
}
.input-info {
  width: 100%;
}
.radio-element {
  display: flex;
  gap: var(--input-radio-element-gap);
}
.radio-element .radio-description {
  display: flex;
  flex-direction: column;
}
.radio-element .radio,
.radio-element .radio-description {
  width: 50%;
}
.divider {
  width: 100%;
  height: 1px;
  background: var(--elements-divider-stroke);
  margin: 0;
  border: none;
}
.radio input[type=radio] {
  position: absolute;
  opacity: 0;
}
.radio input[type=radio] + .radio-label:before {
  content: "";
  background: transparent;
  border-radius: 100%;
  border: 2px solid var(--form-style-outline);
  display: inline-block;
  width: 16px;
  height: 16px;
  position: relative;
  top: 3px;
  margin-right: 4.5px;
  vertical-align: top;
  cursor: pointer;
  text-align: center;
}
.radio input[type=radio]:checked + .radio-label:before {
  width: 12px;
  height: 12px;
  background-color: var(--form-style-active-front);
  border-color: var(--form-style-active-back);
  border-width: 4px;
}
.radio input[type=radio]:focus + .radio-label:before {
  outline: none;
  border-color: var(--form-style-active-back);
}
.radio .radio-label .label-sub-text {
  display: block;
  padding-left: var(--input-radio-element-label-padding-left);
}
.input-date-row {
  max-width: var(--components-maxwidth-_text);
}
.input-date-row .input-element {
  background-image: url('data:image/svg+xml,<svg width="18" height="21" viewBox="0 0 18 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.875 0.5C5.1875 0.5 5.5 0.8125 5.5 1.125V3H13V1.125C13 0.8125 13.2734 0.5 13.625 0.5C13.9375 0.5 14.25 0.8125 14.25 1.125V3H15.5C16.8672 3 18 4.13281 18 5.5V6.75V8V18C18 19.4062 16.8672 20.5 15.5 20.5H3C1.59375 20.5 0.5 19.4062 0.5 18V8V6.75V5.5C0.5 4.13281 1.59375 3 3 3H4.25V1.125C4.25 0.8125 4.52344 0.5 4.875 0.5ZM16.75 8H1.75V18C1.75 18.7031 2.29688 19.25 3 19.25H15.5C16.1641 19.25 16.75 18.7031 16.75 18V8ZM15.5 4.25H3C2.29688 4.25 1.75 4.83594 1.75 5.5V6.75H16.75V5.5C16.75 4.83594 16.1641 4.25 15.5 4.25Z" fill="%23434343"/></svg>');
  background-repeat: no-repeat;
  background-position: calc(100% - 32px) 50%;
  padding-right: 55px;
}
.form-row-optional label {
  display: flex;
  justify-content: space-between;
}
.form-row-optional .input-element::placeholder {
  color: var(--form-style-placeholder-text);
}
/* Desktop */
@media (min-width: 992px) {
  .form-container {
    gap: var(--profile-page-main-gap);
  }
  .form-container form {
    gap: var(--profile-page-main-gap);
  }
  .form-container form .form-row {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--spacings-100-c-x-small);
  }
  .form-container form .form-row.radio-row {
    flex-direction: column;
    gap: var(--input-radio-element-radio-row-gap);
  }
  .xs-input-size {
    width: var(--input-xs-input-size);
  }
  .sm-input-size {
    width: var(--input-sm-input-size);
  }
  .xl-input-size {
    max-width: var(--input-xl-input-size);
  }
  .full-width-input-size {
    width: 100%;
  }
}
.input {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacings-100-c-xxx-small);
}
.input:has(textarea) .input-wrapper .input-field {
  resize: vertical;
}
.input:not(:has(textarea.input-field)) {
  max-width: var(--input-text-max-width);
}
.input:has(.input-field:disabled:not(.locked)), .input:has(select:disabled:not(.locked)), .input:has(duet-date-picker:disabled:not(.locked)) {
  opacity: 0.4;
  cursor: default;
}
.input:has(.input-field.locked) .lock-icon, .input:has(duet-date-picker.locked) .lock-icon {
  display: flex;
}
.input:has(.input-field:not(.locked)) .lock-icon, .input:has(.input-field:disabled:not(.locked)) .lock-icon, .input:has(duet-date-picker:not(.locked)) .lock-icon, .input:has(duet-date-picker:disabled:not(.locked)) .lock-icon {
  display: none;
}
.input .criteria-block {
  display: none;
}
.input .input-wrapper {
  position: relative;
}
.input .input-wrapper .icon {
  position: absolute;
  right: var(--spacings-75-b-x-small-plus);
  top: calc(50% - 10px);
  font-size: 20px;
  font-weight: 900;
  line-height: 100%;
  color: var(--form-style-filled-text);
}
.input .input-wrapper .icon.error-icon {
  display: none;
  color: var(--state-error);
}
.input .input-wrapper .icon.success-icon {
  display: none;
  color: var(--state-success);
}
.input.validated .criteria-block {
  display: block;
}
.input.validated .criteria-block.no-icons ul li .criteria-icon {
  display: none;
}
.input.validated .criteria-block:not(.no-icons) ul li.criteria.fulfilled .criteria-icon.criteria-fulfilled {
  display: flex;
}
.input.validated .criteria-block:not(.no-icons) ul li.criteria.fulfilled .criteria-icon.criteria-not-fulfilled {
  display: none;
}
.input.validated .criteria-block:not(.no-icons) ul li.criteria .criteria-icon {
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  line-height: 100%;
  align-self: center;
  width: 15px;
  justify-content: center;
}
.input.validated .criteria-block:not(.no-icons) ul li.criteria .criteria-icon.criteria-fulfilled {
  display: none;
}
.input.validated .criteria-block:not(.no-icons) ul li.criteria .criteria-icon.criteria-not-fulfilled {
  display: flex;
}
.input.validated .criteria-block ul {
  list-style: none;
  list-style-type: none;
}
.input.validated .criteria-block ul li.criteria {
  display: flex;
  flex-direction: row;
  gap: var(--spacings-100-c-xxxx-small);
}
.input.validated.error .input-wrapper input, .input.validated.success .input-wrapper input {
  padding-right: calc(var(--spacings-75-b-x-small-plus) + 20px);
}
.input.validated.error .labels-block label.primary-label {
  color: var(--state-error);
}
.input.validated.error .input-field {
  border: var(--form-style-focus-stroke-width) solid var(--state-error);
}
.input.validated.error duet-date-picker .duet-date__input-wrapper input.duet-date__input {
  box-shadow: 0 0 0 1px var(--state-error);
  border: var(--form-style-stroke-width) solid var(--state-error);
}
.input.validated.error .input-wrapper .icon.error-icon {
  display: flex;
}
.input.validated.error .criteria-block {
  display: none;
}
.input.validated.error .info-block {
  display: none;
}
.input.validated.error.error-invalid .error-block {
  display: block;
}
.input.validated.error.error-empty .error-empty-block {
  display: block;
}
.input.validated.success .labels-block label.primary-label {
  color: var(--state-success);
}
.input.validated.success .input-field {
  border: var(--form-style-focus-stroke-width) solid var(--state-success);
}
.input.validated.success duet-date-picker .duet-date__input-wrapper input.duet-date__input {
  box-shadow: 0 0 0 1px var(--state-success);
  border: var(--form-style-stroke-width) solid var(--state-success);
}
.input.validated.success .input-wrapper .icon.success-icon {
  display: flex;
}
.input.validated.success .error-block,
.input.validated.success .error-empty-block {
  display: none;
}
.input.validated.success .info-block {
  display: block;
}
.input.validated.success:has(.success-block) .info-block {
  display: none;
}
.input.validated.success:has(.success-block) .success-block {
  display: block;
}
.input:has(.input-field[required]) .labels-block .secondary-label {
  display: none;
}
.input .labels-block, .input-default .labels-block {
  display: flex;
  align-items: flex-end;
  gap: var(--spacings-100-c-xxx-small);
  align-self: stretch;
}
.input .labels-block .primary-label, .input-default .labels-block .primary-label {
  flex: 1 0 0;
  color: var(--form-style-label);
  display: flex;
  font-family: var(--typography-text-font);
  font-size: var(--typography-text-small);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  letter-spacing: var(--typography-text-letterspacing);
  gap: var(--spacings-100-c-xxxx-small);
}
.input .labels-block .primary-label .lock-icon, .input-default .labels-block .primary-label .lock-icon {
  color: var(--form-style-label);
  text-align: right;
  align-items: center;
  font-family: var(--typography-icon-font);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  line-height: 100%;
}
.input .labels-block .secondary-label, .input-default .labels-block .secondary-label {
  color: var(--text-style-text-secondary);
  text-align: right;
  font-family: var(--typography-text-font);
  font-size: var(--typography-text-x-small);
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: var(--typography-text-letterspacing);
}
.input .input-wrapper textarea.input-field, .input-default .input-wrapper textarea.input-field {
  overflow: auto;
}
.input .input-wrapper duet-date-picker .duet-date__input-wrapper:hover .duet-date__toggle:not(:hover):not(:focus) .duet-date__toggle-icon:first-child, .input .input-wrapper duet-date-picker .duet-date__input-wrapper:focus-within .duet-date__toggle:not(:hover):not(:focus) .duet-date__toggle-icon:first-child, .input-default .input-wrapper duet-date-picker .duet-date__input-wrapper:hover .duet-date__toggle:not(:hover):not(:focus) .duet-date__toggle-icon:first-child, .input-default .input-wrapper duet-date-picker .duet-date__input-wrapper:focus-within .duet-date__toggle:not(:hover):not(:focus) .duet-date__toggle-icon:first-child {
  color: var(--form-style-focus-filled-text);
  fill: var(--form-style-focus-filled-text);
}
.input .input-wrapper .input-field,
.input .input-wrapper duet-date-picker .duet-date__input-wrapper input.duet-date__input, .input-default .input-wrapper .input-field,
.input-default .input-wrapper duet-date-picker .duet-date__input-wrapper input.duet-date__input {
  display: flex;
  padding: 0px var(--spacings-75-b-x-small-plus);
  flex-direction: column;
  align-items: flex-start;
  flex: 1 0 0;
  align-self: stretch;
  min-height: var(--forms-default-size);
  width: 100%;
  border-radius: var(--forms-default-cornerradius);
  border: var(--form-style-stroke-width) solid var(--form-style-outline);
  background: var(--form-style-background);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  resize: none;
  color: var(--form-style-filled-text);
  font-family: var(--typography-text-font);
  font-size: var(--typography-text-input-mobile);
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  letter-spacing: var(--typography-text-letterspacing);
}
.input .input-wrapper .input-field::placeholder,
.input .input-wrapper duet-date-picker .duet-date__input-wrapper input.duet-date__input::placeholder, .input-default .input-wrapper .input-field::placeholder,
.input-default .input-wrapper duet-date-picker .duet-date__input-wrapper input.duet-date__input::placeholder {
  color: var(--form-style-placeholder-text);
  font-weight: 400;
}
.input .input-wrapper .input-field.locked,
.input .input-wrapper duet-date-picker .duet-date__input-wrapper input.duet-date__input.locked, .input-default .input-wrapper .input-field.locked,
.input-default .input-wrapper duet-date-picker .duet-date__input-wrapper input.duet-date__input.locked {
  border-radius: var(--forms-default-cornerradius);
  border: var(--form-style-stroke-width) solid var(--form-style-outline);
  background: var(--form-style-locked);
}
.input .input-wrapper .input-field:not(:read-only):focus,
.input .input-wrapper duet-date-picker .duet-date__input-wrapper input.duet-date__input:not(:read-only):focus, .input-default .input-wrapper .input-field:not(:read-only):focus,
.input-default .input-wrapper duet-date-picker .duet-date__input-wrapper input.duet-date__input:not(:read-only):focus {
  color: var(--form-style-focus-filled-text);
  border-color: var(--form-style-focus-outline);
  box-shadow: 0 0 0 1px var(--form-style-focus-outline);
  background: var(--form-style-focus-background);
}
.input .input-wrapper .input-field:not(:read-only):focus::placeholder,
.input .input-wrapper duet-date-picker .duet-date__input-wrapper input.duet-date__input:not(:read-only):focus::placeholder, .input-default .input-wrapper .input-field:not(:read-only):focus::placeholder,
.input-default .input-wrapper duet-date-picker .duet-date__input-wrapper input.duet-date__input:not(:read-only):focus::placeholder {
  color: var(--form-style-focus-placeholder-text);
  font-weight: 400;
}
.input .input-wrapper .input-field:not(:read-only):hover,
.input .input-wrapper duet-date-picker .duet-date__input-wrapper input.duet-date__input:not(:read-only):hover, .input-default .input-wrapper .input-field:not(:read-only):hover,
.input-default .input-wrapper duet-date-picker .duet-date__input-wrapper input.duet-date__input:not(:read-only):hover {
  color: var(--form-style-hover-filled-text);
  border-color: var(--form-style-hover-outline);
  box-shadow: 0 0 0 1px var(--form-style-hover-outline);
  background: var(--form-style-hover-background);
}
.input .input-wrapper .input-field:not(:read-only):hover::placeholder,
.input .input-wrapper duet-date-picker .duet-date__input-wrapper input.duet-date__input:not(:read-only):hover::placeholder, .input-default .input-wrapper .input-field:not(:read-only):hover::placeholder,
.input-default .input-wrapper duet-date-picker .duet-date__input-wrapper input.duet-date__input:not(:read-only):hover::placeholder {
  color: var(--form-style-hover-placeholder-text);
  font-weight: 400;
}
.input .success-block, .input-default .success-block {
  display: none;
  color: var(--state-success);
}
.input .error-block,
.input .error-empty-block, .input-default .error-block,
.input-default .error-empty-block {
  display: none;
  color: var(--state-error);
}
.input-large .labels-block .primary-label {
  font-size: var(--typography-text-medium);
}
.input-large .input-wrapper .input-field,
.input-large .input-wrapper duet-date-picker .duet-date__input-wrapper input.duet-date__input {
  padding: 0px var(--spacings-75-b-small);
  border-radius: var(--forms-large-cornerradius);
  min-height: var(--forms-large-size);
  font-size: var(--typography-text-large);
}
.input-large .input-wrapper .input-field::placeholder,
.input-large .input-wrapper duet-date-picker .duet-date__input-wrapper input.duet-date__input::placeholder {
  color: var(--form-style-placeholder-text);
  font-weight: 400;
}
.input-small .input-wrapper .input-field,
.input-small .input-wrapper duet-date-picker .duet-date__input-wrapper input.duet-date__input {
  padding: 0px var(--spacings-75-b-x-small);
  min-height: var(--forms-small-size);
  font-size: var(--typography-text-small);
}
.input-small .input-wrapper .input-field::placeholder,
.input-small .input-wrapper duet-date-picker .duet-date__input-wrapper input.duet-date__input::placeholder {
  color: var(--form-style-placeholder-text);
  font-weight: 400;
}
.tooltip-block {
  position: relative;
}
.tooltip-block button {
  color: var(--text-style-link);
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}
.tooltip-block .tooltip-container {
  display: none;
  position: absolute;
  left: 0px;
  top: 30px;
  width: 80svw;
  padding: var(--spacings-75-b-xx-small);
  flex-direction: row;
  justify-content: flex-end;
  align-items: flex-start;
  gap: var(--spacings-100-c-xx-small);
  border-radius: var(--elements-small-corner-radius);
  background: var(--background-default);
  box-shadow: 0px 2px 16px 0px var(--elements-shadow);
  z-index: 100;
  opacity: 0;
  transition: opacity 0.3s;
  max-width: 286px;
}
@media (min-width:768px) {
  .tooltip-block .tooltip-container {
    left: calc(100% + 15px);
    top: -4px;
  }
}
.tooltip-block .tooltip-container.show-transition {
  display: flex;
}
.tooltip-block .tooltip-container.show {
  opacity: 1;
}
.tooltip-block .tooltip-container.moved-tooltip {
  top: 30px;
}
.tooltip-block .tooltip-container.moved-tooltip .tooltip-content:before {
  content: "";
  position: absolute;
  left: 8px;
  top: calc(-1 * var(--spacings-75-b-xx-small) - 8px);
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid var(--background-default);
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  z-index: 5;
}
.tooltip-block .tooltip-container .tooltip-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacings-100-c-xxxx-small);
  flex: 1 0 0;
}
.tooltip-block .tooltip-container .tooltip-content:before {
  content: "";
  position: absolute;
  left: 8px;
  top: calc(-1 * var(--spacings-75-b-xx-small) - 8px);
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid var(--background-default);
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  z-index: 5;
}
@media (min-width:768px) {
  .tooltip-block .tooltip-container .tooltip-content:before {
    left: calc(-1 * var(--spacings-75-b-xx-small) - 7px);
    top: 8px;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 12px solid transparent;
    border-right: 12px solid var(--background-default);
  }
}
.tooltip-block .tooltip-container .tooltip-content img {
  aspect-ratio: 16/9;
  width: 100%;
  border-radius: var(--elements-image-corner-radius);
}
.tooltip-block .tooltip-container .close-btn {
  color: var(--text-style-headline);
  font-size: 14px;
  font-style: normal;
  font-weight: 900;
  line-height: 100%;
}
table:not(.duet-date__table) {
  width: fit-content;
  border-collapse: collapse;
  color: var(--text-style-headline);
  font-family: var(--typography-text-font);
  font-size: var(--typography-text-medium);
  font-style: normal;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: var(--typography-text-letterspacing);
  text-align: left;
  width: 100%;
}
@media (min-width:768px) {
  table:not(.duet-date__table) {
    width: fit-content;
  }
}
table:not(.duet-date__table) thead {
  border-bottom: var(--tables-header-divider-stroke) solid var(--tables-header-divider);
  display: none;
}
@media (min-width:768px) {
  table:not(.duet-date__table) thead {
    display: table-header-group;
  }
}
@media not (min-width:768px) {
  table:not(.duet-date__table) tbody {
    display: grid;
  }
}
table:not(.duet-date__table) tbody tr:nth-child(odd) {
  background: var(--tables-table-row-uneven);
}
table:not(.duet-date__table) thead tr,
table:not(.duet-date__table) tbody tr {
  border-bottom: var(--tables-table-divider-stroke) solid var(--tables-table-divider);
  padding: var(--spacings-100-c-xxx-small);
}
@media (min-width:768px) {
  table:not(.duet-date__table) thead tr .text-right,
  table:not(.duet-date__table) tbody tr .text-right {
    text-align: right;
  }
  table:not(.duet-date__table) thead tr .text-center,
  table:not(.duet-date__table) tbody tr .text-center {
    text-align: center;
  }
}
table:not(.duet-date__table) thead tr th.xx-large,
table:not(.duet-date__table) thead tr td.xx-large,
table:not(.duet-date__table) tbody tr th.xx-large,
table:not(.duet-date__table) tbody tr td.xx-large {
  width: 250px;
}
table:not(.duet-date__table) thead tr th.x-large,
table:not(.duet-date__table) thead tr td.x-large,
table:not(.duet-date__table) tbody tr th.x-large,
table:not(.duet-date__table) tbody tr td.x-large {
  width: 220px;
}
table:not(.duet-date__table) thead tr th.large,
table:not(.duet-date__table) thead tr td.large,
table:not(.duet-date__table) tbody tr th.large,
table:not(.duet-date__table) tbody tr td.large {
  width: 192px;
}
table:not(.duet-date__table) thead tr th.normal,
table:not(.duet-date__table) thead tr td.normal,
table:not(.duet-date__table) thead tr th,
table:not(.duet-date__table) thead tr td,
table:not(.duet-date__table) tbody tr th.normal,
table:not(.duet-date__table) tbody tr td.normal,
table:not(.duet-date__table) tbody tr th,
table:not(.duet-date__table) tbody tr td {
  width: 150px;
}
table:not(.duet-date__table) thead tr th.small,
table:not(.duet-date__table) thead tr td.small,
table:not(.duet-date__table) tbody tr th.small,
table:not(.duet-date__table) tbody tr td.small {
  width: 128px;
  max-width: 128px;
}
table:not(.duet-date__table) thead tr th,
table:not(.duet-date__table) tbody tr th {
  font-weight: 700;
  padding-top: var(--spacings-100-c-xxx-small);
  padding-bottom: var(--spacings-100-c-xxx-small);
}
table:not(.duet-date__table) thead tr th:first-of-type,
table:not(.duet-date__table) tbody tr th:first-of-type {
  padding-left: var(--spacings-100-c-xxx-small);
}
table:not(.duet-date__table) thead tr th:last-of-type,
table:not(.duet-date__table) tbody tr th:last-of-type {
  padding-right: var(--spacings-100-c-xxx-small);
}
table:not(.duet-date__table) thead tr td,
table:not(.duet-date__table) tbody tr td {
  justify-content: center;
  align-items: center;
  align-self: stretch;
}
@media (min-width:768px) {
  table:not(.duet-date__table) thead tr td,
  table:not(.duet-date__table) tbody tr td {
    padding: var(--spacings-100-c-xxx-small) 0px;
  }
  table:not(.duet-date__table) thead tr td:first-of-type,
  table:not(.duet-date__table) tbody tr td:first-of-type {
    padding-left: var(--spacings-100-c-xxx-small);
  }
  table:not(.duet-date__table) thead tr td:last-of-type,
  table:not(.duet-date__table) tbody tr td:last-of-type {
    padding-right: var(--spacings-100-c-xxx-small);
  }
}
@media not (min-width:768px) {
  table:not(.duet-date__table) thead tr td,
  table:not(.duet-date__table) tbody tr td {
    display: flex;
    width: 100%;
    justify-content: start;
    padding: 0;
    color: var(--text-style-headline);
  }
  table:not(.duet-date__table) thead tr td:before,
  table:not(.duet-date__table) tbody tr td:before {
    display: flex;
    content: attr(data-label) ":";
    color: var(--text-style-headline);
    padding-right: 5px;
  }
}
.grid, .variable-width-grid-parent {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gutter);
}
.grid > div, .variable-width-grid-parent > div {
  width: 100%;
  max-width: unset;
  grid-column: 1/span 12;
}
@media (min-width:768px) {
  .grid > div.narrow, .variable-width-grid-parent > div.narrow {
    grid-column: 2/span 10;
  }
}
@media (min-width:1200px) {
  .grid > div, .variable-width-grid-parent > div {
    grid-column: 2/span 10;
  }
  .grid > div.narrow, .variable-width-grid-parent > div.narrow {
    grid-column: 3/span 8;
  }
  .grid > div.wide, .variable-width-grid-parent > div.wide {
    grid-column: 1/span 12;
  }
}
.variable-width-grid-parent {
  width: 100%;
  justify-content: center;
  align-self: center;
}
@media (min-width:1200px) {
  .variable-width-grid-parent {
    max-width: var(--components-maxwidth-_component-wide);
  }
}
.variable-width-grid-parent .variable-width-grid {
  display: grid;
  width: 100%;
  justify-content: center;
  align-items: flex-start;
  gap: var(--grid-gutter);
  row-gap: var(--components-gap-section-vertical);
  align-self: stretch;
  grid-column: 1/span 12;
  grid-template-columns: repeat(12, 1fr);
}
.variable-width-grid-parent .variable-width-grid > :nth-child(even),
.variable-width-grid-parent .variable-width-grid > :nth-child(odd) {
  grid-column: span 12;
}
.variable-width-grid-parent .variable-width-grid > img,
.variable-width-grid-parent .variable-width-grid > picture {
  border-radius: var(--elements-image-corner-radius);
}
@media (min-width:1200px) {
  .variable-width-grid-parent .variable-width-grid {
    grid-column: 2/span 10;
    grid-template-columns: repeat(10, 1fr);
  }
}
@media (min-width:768px) {
  .variable-width-grid-parent .variable-width-grid.full-width > :nth-child(even),
  .variable-width-grid-parent .variable-width-grid.full-width > :nth-child(odd) {
    grid-column: span 12;
  }
  .variable-width-grid-parent .variable-width-grid > :nth-child(even),
  .variable-width-grid-parent .variable-width-grid > :nth-child(odd), .variable-width-grid-parent .variable-width-grid.width-50-50 > :nth-child(even),
  .variable-width-grid-parent .variable-width-grid.width-50-50 > :nth-child(odd) {
    grid-column: span 6;
  }
  .variable-width-grid-parent .variable-width-grid.width-40-60 > :nth-child(odd) {
    grid-column: span 4;
  }
  .variable-width-grid-parent .variable-width-grid.width-40-60 > :nth-child(even) {
    grid-column: span 8;
  }
  .variable-width-grid-parent .variable-width-grid.width-60-40 > :nth-child(odd) {
    grid-column: span 8;
  }
  .variable-width-grid-parent .variable-width-grid.width-60-40 > :nth-child(even) {
    grid-column: span 4;
  }
}
@media (min-width:984px) {
  .variable-width-grid-parent .variable-width-grid.full-width > :nth-child(even),
  .variable-width-grid-parent .variable-width-grid.full-width > :nth-child(odd) {
    grid-column: 2/span 10;
  }
  .variable-width-grid-parent .variable-width-grid:before, .variable-width-grid-parent .variable-width-grid.width-50-50:before {
    content: "";
  }
  .variable-width-grid-parent .variable-width-grid > :nth-child(even),
  .variable-width-grid-parent .variable-width-grid > :nth-child(odd), .variable-width-grid-parent .variable-width-grid.width-50-50 > :nth-child(even),
  .variable-width-grid-parent .variable-width-grid.width-50-50 > :nth-child(odd) {
    grid-column: span 5;
  }
  .variable-width-grid-parent .variable-width-grid.width-40-60 > :nth-child(odd) {
    grid-column: span 4;
  }
  .variable-width-grid-parent .variable-width-grid.width-40-60 > :nth-child(even) {
    grid-column: span 6;
  }
  .variable-width-grid-parent .variable-width-grid.width-60-40 > :nth-child(odd) {
    grid-column: span 6;
  }
  .variable-width-grid-parent .variable-width-grid.width-60-40 > :nth-child(even) {
    grid-column: span 4;
  }
}
@media (min-width:1200px) {
  .variable-width-grid-parent .variable-width-grid.full-width > :nth-child(even),
  .variable-width-grid-parent .variable-width-grid.full-width > :nth-child(odd) {
    grid-column: 1/span 10;
  }
  .variable-width-grid-parent .variable-width-grid:before, .variable-width-grid-parent .variable-width-grid.width-50-50:before {
    content: "";
    display: none;
  }
}
div.input-group {
  width: 100%;
}
@media (min-width:768px) {
  div.input-group.width-70 {
    width: 70%;
  }
  div.input-group.width-60 {
    width: 60%;
  }
  div.input-group.width-50 {
    width: 50%;
  }
  div.input-group.width-40 {
    width: 40%;
  }
  div.input-group.width-35 {
    width: 35%;
  }
  div.input-group.width-34 {
    width: 34%;
  }
  div.input-group.width-32 {
    width: 32%;
  }
  div.input-group.width-30 {
    width: 30%;
  }
  div.input-group.width-28 {
    width: 28%;
  }
  div.input-group.width-25 {
    width: 25%;
  }
  div.input-group.width-23 {
    width: 23%;
  }
  div.input-group.width-22 {
    width: 22%;
  }
  div.input-group.width-20 {
    width: 20%;
  }
  div.input-group.width-16 {
    width: 16%;
  }
  div.input-group.width-14 {
    width: 14%;
  }
  div.input-group.width-12 {
    width: 12%;
  }
  div.input-group.width-11 {
    width: 11%;
  }
  div.input-group.width-10 {
    width: 10%;
  }
  div.input-group.width-9 {
    width: 9%;
  }
}
.plan-info .form-switch {
  display: flex;
  width: 100%;
  padding: var(--spacings-75-b-small, 24px);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacings-75-b-small, 24px);
  border-radius: var(--Elements-Small-Corner-Radius, 6px);
  background: var(--Color-Transparency-Lighten-70, rgba(255, 255, 255, 0.7));
}
.plan-info .form-switch .tabs {
  display: flex;
  width: 100%;
  border-bottom: 1px solid var(--Elements-Divider-Stroke, rgba(0, 0, 0, 0.15));
}
.plan-info .form-switch .tab {
  flex: 0 0 0;
  color: var(--text-style-text-secondary);
}
.plan-info .form-switch .tab.active {
  color: var(--Text-Style-Text-Primary, #434343);
  border-bottom: var(--Elements-Stroke-Active, 3px) solid var(--Tab-Active-Outline, #e0001b);
}
.plan-info .form-switch .number-search-wrapper {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  gap: var(--spacings-100-cx-small, 16px);
  align-self: stretch;
}
.plan-info .form-switch .number-search-wrapper .search-input-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacings-100-cxxxx-small, 8px);
  width: 80%;
}
.plan-info .form-switch .number-search-wrapper .search-input-group .search-label-wrapper {
  display: flex;
  align-items: flex-end;
  gap: var(--spacings-100-cxxx-small, 8px);
  align-self: stretch;
}
.plan-info .form-switch .number-search-wrapper .search-input-group .search-label-wrapper .primary-label {
  color: var(--form-style-label);
}
.plan-info .form-switch .number-search-wrapper .search-input-group .serach-input-field {
  display: flex;
  min-height: var(--Forms-Default-Size, 48px);
  padding: 0 var(--spacings-75-bx-small, 16px);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  border-radius: var(--Forms-Default-Cornerradius, 6px);
  border: var(--Form-Style-Stroke-Width, 1px) solid var(--Form-Style-Outline, #707070);
  background: var(--Form-Style-Background, #fff);
}
.plan-info .form-switch .number-search-wrapper .number-input-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacings-100-cxxxx-small, 4px);
  flex: 1 0 0;
}
.plan-info .form-switch .number-search-wrapper .search-button-group {
  display: flex;
  justify-items: flex-end;
  width: 20%;
}
@media (max-width: 768px) {
  .plan-info .form-switch .number-search-wrapper {
    flex-direction: column;
    align-items: stretch;
  }
  .plan-info .form-switch .number-search-wrapper .search-input-group,
  .plan-info .form-switch .number-search-wrapper .search-button-group,
  .plan-info .form-switch .number-search-wrapper .number-input-group {
    width: 100%;
  }
}
.plan-info .form-switch .number-search-wrapper .loader {
  display: none;
}
.plan-info .form-switch .number-search-wrapper .btn-commit-label {
  display: block;
}
.plan-info .form-switch .number-search-wrapper button.btn.load .btn-label {
  display: none;
}
.plan-info .form-switch .number-search-wrapper button.btn.load .btn-icon {
  display: none;
}
.plan-info .form-switch .number-search-wrapper button.btn.load .loader {
  width: var(--button-icon-size);
  height: var(--button-icon-size);
  border: var(--forms-checkbox-corner-radius) solid;
  border-bottom-color: transparent;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}
@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.plan-info .form-switch .found-address {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacings-100-cxxxx-small, 4px);
  align-self: stretch;
}
.plan-info .form-switch .found-address .address-label-wrapper {
  display: flex;
  align-items: flex-end;
  gap: var(--spacings-100-cxxx-small, 8px);
  align-self: stretch;
}
.plan-info .form-switch .found-address .address-label-wrapper .label-area {
  display: flex;
  align-items: center;
  gap: var(--spacings-100-cxxxx-small, 4px);
  flex: 1 0 0;
}
.plan-info .form-switch .found-address .address-label-wrapper .label-area .lock-icon {
  color: var(--form-style-label);
  text-align: right;
  align-items: center;
  font-family: var(--typography-icon-font);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  line-height: 100%;
}
.plan-info .form-switch .found-address .address-label-wrapper .label-area .primary-label {
  color: var(--form-style-label);
}
.plan-info .form-switch .found-address .input-address-wrapper {
  display: flex;
  min-height: var(--Forms-Default-Size, 48px);
  padding: 0 var(--spacings-75-bx-small, 16px);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  border-radius: var(--Forms-Default-Cornerradius, 6px);
  border: var(--Form-Style-Stroke-Width, 1px) solid var(--Form-Style-Outline, #707070);
  background: linear-gradient(0deg, var(--Form-Style-Locked, rgba(0, 0, 0, 0.1)) 0%, var(--Form-Style-Locked, rgba(0, 0, 0, 0.1)) 100%), var(--Form-Style-Background, #fff);
}
.plan-info .form-switch .found-address input {
  display: flex;
  align-items: center;
  align-self: stretch;
}
.plan-info .polygon-info-list {
  color: var(--Text-Style-Text-Primary, #434343);
}
.plan-info .full-width {
  width: 100%;
}
.plan-info .width-20 {
  width: 20%;
}
.plan-info .notification-text ul {
  list-style: disc;
  list-style-position: outside;
  padding-left: 1.4em;
}