:root{--color-blue-50: #EAF7FF;--color-blue-100: #D4EEFF;--color-blue-200: #ACDFFF;--color-blue-300: #68C5FF;--color-blue-400: #3BB4FF;--color-blue-500: #20A9FF;--color-blue-600: #179BED;--color-blue-700: #0074BC;--color-blue-800: #0063A1;--color-blue-900: #004977;--color-grey-50: #F4F4F4;--color-grey-100: #E9E9E9;--color-grey-200: #D3D3D3;--color-grey-300: #BDBDBD;--color-grey-400: #A7A7A7;--color-grey-500: #919191;--color-grey-600: #747474;--color-grey-700: #575757;--color-grey-800: #3A3A3A;--color-grey-900: #1D1D1D;--color-grey-950: #0F0F0F;--color-green-50: #F1F8EC;--color-green-100: #E3F1DA;--color-green-200: #C7E2B6;--color-green-300: #ABD493;--color-green-400: #8DC570;--color-green-500: #6EB64C;--color-green-600: #4BA722;--color-green-700: #228000;--color-green-800: #187400;--color-green-900: #005B00;--color-purple-50: #FFE7F8;--color-purple-100: #FFDAF5;--color-purple-200: #FFA6E6;--color-purple-300: #FF85DD;--color-purple-400: #F06CCB;--color-purple-500: #DD56B7;--color-purple-600: #A62381;--color-purple-700: #A62381;--color-purple-800: #8C116A;--color-purple-900: #65054A;--color-red-50: #FCE5E5;--color-red-100: #F9CCCC;--color-red-200: #F6B2B2;--color-red-300: #F39999;--color-red-400: #EF8080;--color-red-500: #E63333;--color-red-600: #E00000;--color-red-700: #9E2216;--color-red-800: #930000;--color-red-900: #610000;--color-orange-50: #FFEAD9;--color-orange-100: #FFE0C7;--color-orange-200: #FFD0A9;--color-orange-300: #FFBB84;--color-orange-400: #FFAA64;--color-orange-500: #FF8725;--color-orange-600: #F16C00;--color-orange-700: #CC5C00;--color-orange-800: #AA4C00;--color-orange-900: #763500;--color-foundation-black: #000000;--color-foundation-white: #FFFFFF;--color-foundation-oikotie-black: #202020;--color-ai-purple: #9900FF;--color-ai-blue: #2230FF;--scale-0: 0;--scale-25: 0.0625rem;--scale-50: 0.125rem;--scale-100: 0.25rem;--scale-200: 0.5rem;--scale-300: 0.75rem;--scale-400: 1rem;--scale-500: 1.25rem;--scale-600: 1.5rem;--scale-700: 1.75rem;--scale-800: 2rem;--scale-900: 2.25rem;--scale-1000: 2.5rem;--scale-1100: 3rem;--scale-1200: 3.5rem;--scale-1300: 4rem;--scale-1400: 4.5rem;--scale-1500: 6rem;--scale-1600: 8rem;--scale-1700: 16rem;--scale-1800: 32rem;--font-family: Roboto, Helvetica, sans-serif;--font-weight-regular: 400;--font-weight-semibold: 600;--font-weight-bold: 700;--primary-50: var(--color-purple-50);--primary-100: var(--color-purple-100);--primary-200: var(--color-purple-200);--primary-300: var(--color-purple-300);--primary-400: var(--color-purple-400);--primary-500: var(--color-purple-500);--primary-600: var(--color-purple-600);--primary-700: var(--color-purple-700);--primary-800: var(--color-purple-800);--primary-900: var(--color-purple-900);--information-50: var(--color-blue-50);--information-100: var(--color-blue-100);--information-200: var(--color-blue-200);--information-300: var(--color-blue-300);--information-400: var(--color-blue-400);--information-500: var(--color-blue-500);--information-600: var(--color-blue-600);--information-700: var(--color-blue-700);--information-800: var(--color-blue-800);--information-900: var(--color-blue-900);--error-50: var(--color-red-50);--error-100: var(--color-red-100);--error-200: var(--color-red-200);--error-300: var(--color-red-300);--error-400: var(--color-red-400);--error-500: var(--color-red-500);--error-600: var(--color-red-600);--error-700: var(--color-red-700);--error-800: var(--color-red-800);--error-900: var(--color-red-900);--success-50: var(--color-green-50);--success-100: var(--color-green-100);--success-200: var(--color-green-200);--success-300: var(--color-green-300);--success-400: var(--color-green-400);--success-500: var(--color-green-500);--success-600: var(--color-green-600);--success-700: var(--color-green-700);--success-800: var(--color-green-800);--success-900: var(--color-green-900);--warning-50: var(--color-orange-50);--warning-100: var(--color-orange-100);--warning-200: var(--color-orange-200);--warning-300: var(--color-orange-300);--warning-400: var(--color-orange-400);--warning-500: var(--color-orange-500);--warning-600: var(--color-orange-600);--warning-700: var(--color-orange-700);--warning-800: var(--color-orange-800);--warning-900: var(--color-orange-900);--neutral-50: var(--color-grey-50);--neutral-100: var(--color-grey-100);--neutral-200: var(--color-grey-200);--neutral-300: var(--color-grey-300);--neutral-400: var(--color-grey-400);--neutral-500: var(--color-grey-500);--neutral-600: var(--color-grey-600);--neutral-700: var(--color-grey-700);--neutral-800: var(--color-grey-800);--neutral-900: var(--color-grey-900);--foundation-black: var(--color-foundation-black);--foundation-white: var(--color-foundation-white);--foundation-oikotie-black: var(--color-foundation-oikotie-black);--ai-cyan: var(--color-blue-600);--ai-purple: var(--color-ai-purple);--ai-blue: var(--color-ai-blue);--border-width-none: var(--scale-0);--border-width-xs: var(--scale-25);--border-width-sm: var(--scale-50);--border-width-md: var(--scale-100);--border-width-lg: var(--scale-200);--border-radius-none: var(--scale-0);--border-radius-xs: var(--scale-50);--border-radius-sm: var(--scale-100);--border-radius-md: var(--scale-200);--border-radius-lg: var(--scale-300);--border-radius-xl: var(--scale-400);--border-radius-2xl: var(--scale-600);--border-radius-rounded: var(--scale-1800);--border-default: var(--color-grey-300);--border-on-color: var(--color-foundation-white);--border-primary-default: var(--primary-700);--border-primary-default-hover: var(--primary-800);--border-primary-focus: var(--primary-700);--border-error-default: var(--error-600);--border-error-default-hover: var(--error-700);--border-error-focus: var(--error-600);--border-information-default: var(--information-700);--border-information-default-hover: var(--information-800);--border-information-focus: var(--information-700);--border-warning-default: var(--warning-600);--border-warning-default-hover: var(--warning-700);--border-warning-focus: var(--warning-600);--border-success-default: var(--success-600);--border-success-default-hover: var(--success-700);--border-success-focus: var(--success-600);--border-disabled-default: var(--color-grey-50);--icon-neutral-default: var(--color-grey-900);--icon-neutral-default-hover: var(--color-grey-800);--icon-neutral-on-color: var(--color-foundation-white);--icon-neutral-on-color-hover: var(--color-foundation-white);--icon-primary-default: var(--primary-700);--icon-primary-default-hover: var(--primary-800);--icon-primary-on-color: var(--color-foundation-white);--icon-primary-on-color-hover: var(--color-foundation-white);--icon-error-default: var(--error-600);--icon-error-default-hover: var(--error-700);--icon-error-on-color: var(--color-foundation-white);--icon-error-on-color-hover: var(--color-foundation-white);--icon-information-default: var(--information-700);--icon-information-default-hover: var(--information-800);--icon-information-on-color: var(--color-foundation-white);--icon-information-on-color-hover: var(--color-foundation-white);--icon-warning-default: var(--warning-600);--icon-warning-default-hover: var(--warning-700);--icon-warning-on-color: var(--color-foundation-white);--icon-warning-on-color-hover: var(--color-foundation-white);--icon-success-default: var(--success-600);--icon-success-default-hover: var(--success-700);--icon-success-on-color: var(--color-foundation-white);--icon-success-on-color-hover: var(--color-foundation-white);--icon-disabled-default: var(--color-grey-600);--icon-disabled-on-color: var(--color-grey-700);--surface-page: var(--color-foundation-white);--surface-page-secondary: var(--color-grey-50);--surface-default: var(--color-foundation-white);--surface-secondary: var(--color-grey-50);--surface-secondary-hover: var(--color-grey-100);--surface-primary-default: var(--primary-700);--surface-primary-default-hover: var(--primary-800);--surface-primary-subtle: var(--primary-50);--surface-primary-subtle-hover: var(--primary-100);--surface-error-default: var(--error-600);--surface-error-default-hover: var(--error-700);--surface-error-subtle: var(--error-50);--surface-error-subtle-hover: var(--error-100);--surface-information-default: var(--information-700);--surface-information-default-hover: var(--information-800);--surface-information-subtle: var(--information-50);--surface-information-subtle-hover: var(--information-100);--surface-warning-default: var(--warning-600);--surface-warning-default-hover: var(--warning-700);--surface-warning-subtle: var(--warning-50);--surface-warning-subtle-hover: var(--warning-100);--surface-success-default: var(--success-600);--surface-success-default-hover: var(--success-700);--surface-success-subtle: var(--success-50);--surface-success-subtle-hover: var(--success-100);--surface-neutral-default: var(--neutral-50);--surface-neutral-default-hover: var(--neutral-100);--surface-glass-dark-default: var(--neutral-800);--surface-glass-dark-default-hover: var(--neutral-100);--surface-disabled-default: var(--color-grey-50);--text-default-heading: var(--color-grey-900);--text-default-body: var(--color-grey-800);--text-default-caption: var(--color-grey-700);--text-default-placeholder: var(--color-grey-600);--text-on-color-heading: var(--color-foundation-white);--text-on-color-body: var(--color-foundation-white);--text-on-color-caption: var(--color-grey-50);--text-on-color-placeholder: var(--color-grey-50);--text-primary-default: var(--primary-700);--text-primary-default-hover: var(--primary-800);--text-primary-on-color: var(--color-foundation-white);--text-primary-on-color-hover: var(--color-foundation-white);--text-error-default: var(--error-600);--text-error-default-hover: var(--error-700);--text-error-on-color: var(--color-foundation-white);--text-error-on-color-hover: var(--color-foundation-white);--text-information-default: var(--information-700);--text-information-default-hover: var(--information-800);--text-information-on-color: var(--color-foundation-white);--text-information-on-color-hover: var(--color-foundation-white);--text-warning-default: var(--warning-600);--text-warning-default-hover: var(--warning-700);--text-warning-on-color: var(--color-foundation-white);--text-warning-on-color-hover: var(--color-foundation-white);--text-success-default: var(--success-600);--text-success-default-hover: var(--success-700);--text-success-on-color: var(--color-foundation-white);--text-success-on-color-hover: var(--color-foundation-white);--text-disabled-default: var(--color-grey-300);--text-disabled-on-color: var(--color-grey-400);--text-link-default: var(--primary-700);--text-link-default-hover: var(--primary-800);--text-link-on-color: var(--color-foundation-white);--text-link-on-color-hover: var(--color-foundation-white)}[data-component-mode=dark]{--border-default: var(--color-grey-700);--border-on-color: var(--color-foundation-white);--border-primary-default: var(--primary-800);--border-primary-default-hover: var(--primary-700);--border-primary-focus: var(--primary-800);--border-error-default: var(--error-700);--border-error-default-hover: var(--error-600);--border-error-focus: var(--error-700);--border-information-default: var(--information-800);--border-information-default-hover: var(--information-700);--border-information-focus: var(--information-800);--border-warning-default: var(--warning-700);--border-warning-default-hover: var(--warning-600);--border-warning-focus: var(--warning-700);--border-success-default: var(--success-700);--border-success-default-hover: var(--success-600);--border-success-focus: var(--success-700);--border-disabled-default: var(--color-grey-900);--icon-neutral-default: var(--color-grey-50);--icon-neutral-default-hover: var(--color-grey-100);--icon-neutral-on-color: var(--color-foundation-black);--icon-neutral-on-color-hover: var(--color-foundation-black);--icon-primary-default: var(--primary-800);--icon-primary-default-hover: var(--primary-700);--icon-primary-on-color: var(--color-foundation-black);--icon-primary-on-color-hover: var(--color-foundation-black);--icon-error-default: var(--error-700);--icon-error-default-hover: var(--error-600);--icon-error-on-color: var(--color-foundation-black);--icon-error-on-color-hover: var(--color-foundation-black);--icon-information-default: var(--information-200);--icon-information-default-hover: var(--information-300);--icon-information-on-color: var(--color-foundation-black);--icon-information-on-color-hover: var(--color-foundation-oikotie-black);--icon-warning-default: var(--warning-700);--icon-warning-default-hover: var(--warning-600);--icon-warning-on-color: var(--color-foundation-black);--icon-warning-on-color-hover: var(--color-foundation-black);--icon-success-default: var(--success-700);--icon-success-default-hover: var(--success-600);--icon-success-on-color: var(--color-foundation-black);--icon-success-on-color-hover: var(--color-foundation-black);--icon-disabled-default: var(--color-grey-400);--icon-disabled-on-color: var(--color-grey-500);--surface-page: var(--color-foundation-black);--surface-page-secondary: var(--color-grey-900);--surface-default: var(--color-foundation-black);--surface-secondary: var(--color-grey-900);--surface-secondary-hover: var(--color-grey-800);--surface-primary-default: var(--primary-200);--surface-primary-default-hover: var(--primary-400);--surface-primary-subtle: var(--primary-100);--surface-primary-subtle-hover: var(--primary-50);--surface-error-default: var(--error-700);--surface-error-default-hover: var(--error-600);--surface-error-subtle: var(--error-100);--surface-error-subtle-hover: var(--error-50);--surface-information-default: var(--information-800);--surface-information-default-hover: var(--information-700);--surface-information-subtle: var(--information-900);--surface-information-subtle-hover: var(--information-800);--surface-warning-default: var(--warning-700);--surface-warning-default-hover: var(--warning-600);--surface-warning-subtle: var(--warning-100);--surface-warning-subtle-hover: var(--warning-50);--surface-success-default: var(--success-700);--surface-success-default-hover: var(--success-600);--surface-success-subtle: var(--success-100);--surface-success-subtle-hover: var(--success-50);--surface-neutral-default: var(--neutral-700);--surface-neutral-default-hover: var(--neutral-600);--surface-glass-dark-default: var(--neutral-700);--surface-glass-dark-default-hover: var(--neutral-600);--surface-disabled-default: var(--color-grey-900);--text-default-heading: var(--color-grey-50);--text-default-body: var(--color-grey-100);--text-default-caption: var(--color-grey-200);--text-default-placeholder: var(--color-grey-300);--text-on-color-heading: var(--color-foundation-black);--text-on-color-body: var(--color-foundation-black);--text-on-color-caption: var(--color-grey-900);--text-on-color-placeholder: var(--color-grey-900);--text-primary-default: var(--primary-200);--text-primary-default-hover: var(--primary-100);--text-primary-on-color: var(--color-foundation-black);--text-primary-on-color-hover: var(--color-foundation-black);--text-error-default: var(--error-700);--text-error-default-hover: var(--error-600);--text-error-on-color: var(--color-foundation-black);--text-error-on-color-hover: var(--color-foundation-black);--text-information-default: var(--information-200);--text-information-default-hover: var(--information-100);--text-information-on-color: var(--color-foundation-black);--text-information-on-color-hover: var(--color-foundation-black);--text-warning-default: var(--warning-700);--text-warning-default-hover: var(--warning-600);--text-warning-on-color: var(--color-foundation-black);--text-warning-on-color-hover: var(--color-foundation-black);--text-success-default: var(--success-700);--text-success-default-hover: var(--success-600);--text-success-on-color: var(--color-foundation-black);--text-success-on-color-hover: var(--color-foundation-black);--text-disabled-default: var(--color-grey-700);--text-disabled-on-color: var(--color-grey-600);--text-link-default: var(--primary-200);--text-link-default-hover: var(--primary-100);--text-link-on-color: var(--color-foundation-black);--text-link-on-color-hover: var(--color-foundation-black)}