wabtec-internal-volt-basic-components 1.2.0 → 1.4.0

package/dist/collection/components/topbar/vds-topbar.css

@@ -0,0 +1,961 @@
+:root {
+  font-family: "Roboto Flex", sans-serif, sans-serif;
+  box-sizing: border-box;
+}
+
+:root body {
+  --color-background-disabled:rgba(33, 49, 66, 0.3215686275);
+  --color-background-brand-default:#007DBA;
+  --color-background-brand-hover:#056CA0;
+  --color-background-brand-press:#095B87;
+  --color-background-caution-default:#D0A60B;
+  --color-background-caution-lowest-default:#FFF9E5;
+  --color-background-caution-lowest-hover:#FEF3CC;
+  --color-background-caution-lowest-press:#FEE899;
+  --color-background-danger-default:#F34336;
+  --color-background-danger-high-default:#F34336;
+  --color-background-danger-high-hover:#C83E38;
+  --color-background-danger-high-press:#9D3A3A;
+  --color-background-danger-lowest-default:#FEECEB;
+  --color-background-danger-lowest-hover:#FCD9D6;
+  --color-background-danger-lowest-press:#FAB3AE;
+  --color-background-general-default:#8F9295;
+  --color-background-general-lowest-default:#f7f7f7;
+  --color-background-general-lowest-hover:#EEEEEE;
+  --color-background-general-lowest-press:#DEDEDE;
+  --color-background-healthy-default:#7FAE1B;
+  --color-background-healthy-lowest-default:#F2F7E8;
+  --color-background-healthy-lowest-hover:#E5EED1;
+  --color-background-healthy-lowest-press:#CBDEA3;
+  --color-background-information-default:#056CA0;
+  --color-background-information-lowest-default:#E6F2F8;
+  --color-background-information-lowest-hover:#CCE5F1;
+  --color-background-information-lowest-press:#99CBE3;
+  --color-background-neutral-default:#E8E9EB;
+  --color-background-neutral-hover:#CFD3D7;
+  --color-background-neutral-press:#C4C8CE;
+  --color-background-neutral-lowest-default:#F9FAFA;
+  --color-background-neutral-lowest-hover:#E8E9EB;
+  --color-background-neutral-lowest-press:#CFD3D7;
+  --color-background-warning-default:#D17739;
+  --color-background-warning-lowest-default:#FFF3EB;
+  --color-background-warning-lowest-hover:#FFE7D7;
+  --color-background-warning-lowest-press:#FFD0B0;
+  --color-border-high:#041821;
+  --color-border-medium:rgba(4, 24, 33, 0.6392156863);
+  --color-border-low:rgba(4, 24, 33, 0.3215686275);
+  --color-border-lower:rgba(4, 24, 33, 0.1607843137);
+  --color-border-lowest:rgba(4, 24, 33, 0.0784313725);
+  --color-border-brand:#007DBA;
+  --color-border-brand-hover:#CCE5F1;
+  --color-border-disabled:rgba(33, 49, 66, 0.3215686275);
+  --color-border-danger:#C83E38;
+  --color-border-healthy:#6B9321;
+  --color-border-caution:#D0A60B;
+  --color-border-warning:#D17739;
+  --color-border-information:#056CA0;
+  --color-border-general:#8F9295;
+  --color-border-focus-1:#ffffff;
+  --color-border-focus-2:#133953;
+  --color-border-white-high:#ffffff;
+  --color-border-white-medium:rgba(255, 255, 255, 0.6392156863);
+  --color-border-white-low:rgba(255, 255, 255, 0.3215686275);
+  --color-border-white-lower:rgba(255, 255, 255, 0.1607843137);
+  --color-border-white-lowest:rgba(255, 255, 255, 0.1215686275);
+  --color-icon-high:#041821;
+  --color-icon-medium:rgba(4, 24, 33, 0.6392156863);
+  --color-icon-low:rgba(4, 24, 33, 0.3215686275);
+  --color-icon-disabled:rgba(33, 49, 66, 0.3215686275);
+  --color-icon-healthy:#6B9321;
+  --color-icon-caution:#D0A60B;
+  --color-icon-warning:#D17739;
+  --color-icon-danger:#C83E38;
+  --color-icon-information:#056CA0;
+  --color-icon-general:#8F9295;
+  --color-icon-brand-default:#007DBA;
+  --color-icon-brand-hover:#056CA0;
+  --color-icon-brand-press:#095B87;
+  --color-icon-white-high:#ffffff;
+  --color-icon-white-medium:rgba(255, 255, 255, 0.6392156863);
+  --color-icon-white-low:rgba(255, 255, 255, 0.3215686275);
+  --color-interaction-black-medium:rgba(16, 25, 36, 0.6392156863);
+  --color-interaction-black-low:rgba(16, 25, 36, 0.3215686275);
+  --color-interaction-black-lower:rgba(16, 25, 36, 0.1607843137);
+  --color-interaction-black-lowest:rgba(16, 25, 36, 0.1215686275);
+  --color-interaction-brand-medium:rgba(0, 125, 186, 0.6392156863);
+  --color-interaction-brand-low:rgba(0, 122, 184, 0.3215686275);
+  --color-interaction-brand-lower:rgba(0, 125, 186, 0.1607843137);
+  --color-interaction-brand-lowest:rgba(0, 125, 186, 0.1215686275);
+  --color-interaction-danger-medium:rgba(200, 62, 56, 0.6392156863);
+  --color-interaction-danger-low:rgba(200, 62, 56, 0.3215686275);
+  --color-interaction-danger-lower:rgba(200, 62, 56, 0.1607843137);
+  --color-interaction-danger-lowest:rgba(200, 62, 56, 0.1215686275);
+  --color-interaction-white-medium:rgba(255, 255, 255, 0.6392156863);
+  --color-interaction-white-low:rgba(255, 255, 255, 0.3215686275);
+  --color-interaction-white-lower:rgba(255, 255, 255, 0.1607843137);
+  --color-interaction-white-lowest:rgba(255, 255, 255, 0.1215686275);
+  --color-interaction-backdrop:rgba(0, 0, 0, 0.3215686275);
+  --color-link-default:#007DBA;
+  --color-link-hover:#056CA0;
+  --color-link-press:#095B87;
+  --color-text-high:#041821;
+  --color-text-medium:rgba(4, 24, 33, 0.6392156863);
+  --color-text-low:rgba(4, 24, 33, 0.3215686275);
+  --color-text-disabled:rgba(33, 49, 66, 0.3215686275);
+  --color-text-brand:#007DBA;
+  --color-text-caution-high:#46482E;
+  --color-text-caution-medium:#D0A60B;
+  --color-text-danger-high:#47323D;
+  --color-text-danger-medium:#C83E38;
+  --color-text-general-high:#364351;
+  --color-text-general-medium:#8F9295;
+  --color-text-healthy-high:#2C4333;
+  --color-text-healthy-medium:#6B9321;
+  --color-text-information-high:#133953;
+  --color-text-information-medium:#056CA0;
+  --color-text-warning-high:#463C3A;
+  --color-text-warning-medium:#D17739;
+  --color-text-white-high:#ffffff;
+  --color-text-white-medium:rgba(255, 255, 255, 0.6392156863);
+  --color-text-white-low:rgba(255, 255, 255, 0.3215686275);
+  --surface-higher:#ffffff;
+  --surface-high:#ffffff;
+  --surface-medium:#ffffff;
+  --surface-low:#FBFBFB;
+  --surface-lower:#F2F3F5;
+  --surface-neutral-default:#ffffff;
+  --surface-neutral-hover:#E8E9EB;
+  --surface-neutral-press:#CFD3D7;
+  --surface-overlay-default:#213142;
+  --surface-overlay-hover:#334152;
+  --surface-overlay-press:#6F7986;
+  --surface-elevation-01:0px 0px 3px 0px rgba(29, 46, 64, 0.1), 0px 3px 3px 0px rgba(29, 46, 64, 0.1);
+  --surface-elevation-02:0px 0px 6px 0px rgba(29, 46, 64, 0.1), 0px 6px 6px 0px rgba(29, 46, 64, 0.1);
+  --surface-elevation-03:0px 0px 12px 0px rgba(29, 46, 64, 0.1), 0px 12px 12px 0px rgba(29, 46, 64, 0.1);
+  --surface-elevation-04:0px 0px 24px 0px rgba(29, 46, 64, 0.1), 0px 24px 24px 0px rgba(29, 46, 64, 0.1);
+  --box-shadow-color-01:rgba(0, 0, 0, 0.12);
+  --box-shadow-color-02:rgba(0, 0, 0, 0.14);
+  --size-56:3.5rem;
+  --size-44:2.75rem;
+  --size-36:2.25rem;
+  --size-32:2rem;
+  --size-28:1.75rem;
+  --size-24:1.5rem;
+  --size-20:1.25rem;
+  --size-16:1rem;
+  --size-14:0.875rem;
+  --size-12:0.75rem;
+  --size-10:0.625rem;
+  --font-light:300;
+  --font-semibold:600;
+  --font-bold:800;
+  --height-64:4rem;
+  --height-52:3.25rem;
+  --height-44:2.75rem;
+  --height-40:2.5rem;
+  --height-36:2.25rem;
+  --height-32:2rem;
+  --height-28:1.75rem;
+  --height-24:1.5rem;
+  --height-20:1.25rem;
+  --height-16:1rem;
+  --height-12:0.75rem;
+}
+
+:root .theme-light {
+  --color-background-disabled:rgba(33, 49, 66, 0.3215686275);
+  --color-background-brand-default:#007DBA;
+  --color-background-brand-hover:#056CA0;
+  --color-background-brand-press:#095B87;
+  --color-background-caution-default:#D0A60B;
+  --color-background-caution-lowest-default:#FFF9E5;
+  --color-background-caution-lowest-hover:#FEF3CC;
+  --color-background-caution-lowest-press:#FEE899;
+  --color-background-danger-default:#F34336;
+  --color-background-danger-high-default:#F34336;
+  --color-background-danger-high-hover:#C83E38;
+  --color-background-danger-high-press:#9D3A3A;
+  --color-background-danger-lowest-default:#FEECEB;
+  --color-background-danger-lowest-hover:#FCD9D6;
+  --color-background-danger-lowest-press:#FAB3AE;
+  --color-background-general-default:#8F9295;
+  --color-background-general-lowest-default:#f7f7f7;
+  --color-background-general-lowest-hover:#EEEEEE;
+  --color-background-general-lowest-press:#DEDEDE;
+  --color-background-healthy-default:#7FAE1B;
+  --color-background-healthy-lowest-default:#F2F7E8;
+  --color-background-healthy-lowest-hover:#E5EED1;
+  --color-background-healthy-lowest-press:#CBDEA3;
+  --color-background-information-default:#056CA0;
+  --color-background-information-lowest-default:#E6F2F8;
+  --color-background-information-lowest-hover:#CCE5F1;
+  --color-background-information-lowest-press:#99CBE3;
+  --color-background-neutral-default:#E8E9EB;
+  --color-background-neutral-hover:#CFD3D7;
+  --color-background-neutral-press:#C4C8CE;
+  --color-background-neutral-lowest-default:#F9FAFA;
+  --color-background-neutral-lowest-hover:#E8E9EB;
+  --color-background-neutral-lowest-press:#CFD3D7;
+  --color-background-warning-default:#D17739;
+  --color-background-warning-lowest-default:#FFF3EB;
+  --color-background-warning-lowest-hover:#FFE7D7;
+  --color-background-warning-lowest-press:#FFD0B0;
+  --color-border-high:#041821;
+  --color-border-medium:rgba(4, 24, 33, 0.6392156863);
+  --color-border-low:rgba(4, 24, 33, 0.3215686275);
+  --color-border-lower:rgba(4, 24, 33, 0.1607843137);
+  --color-border-lowest:rgba(4, 24, 33, 0.0784313725);
+  --color-border-brand:#007DBA;
+  --color-border-brand-hover:#CCE5F1;
+  --color-border-disabled:rgba(33, 49, 66, 0.3215686275);
+  --color-border-danger:#C83E38;
+  --color-border-healthy:#6B9321;
+  --color-border-caution:#D0A60B;
+  --color-border-warning:#D17739;
+  --color-border-information:#056CA0;
+  --color-border-general:#8F9295;
+  --color-border-focus-1:#ffffff;
+  --color-border-focus-2:#133953;
+  --color-border-white-high:#ffffff;
+  --color-border-white-medium:rgba(255, 255, 255, 0.6392156863);
+  --color-border-white-low:rgba(255, 255, 255, 0.3215686275);
+  --color-border-white-lower:rgba(255, 255, 255, 0.1607843137);
+  --color-border-white-lowest:rgba(255, 255, 255, 0.1215686275);
+  --color-icon-high:#041821;
+  --color-icon-medium:rgba(4, 24, 33, 0.6392156863);
+  --color-icon-low:rgba(4, 24, 33, 0.3215686275);
+  --color-icon-disabled:rgba(33, 49, 66, 0.3215686275);
+  --color-icon-healthy:#6B9321;
+  --color-icon-caution:#D0A60B;
+  --color-icon-warning:#D17739;
+  --color-icon-danger:#C83E38;
+  --color-icon-information:#056CA0;
+  --color-icon-general:#8F9295;
+  --color-icon-brand-default:#007DBA;
+  --color-icon-brand-hover:#056CA0;
+  --color-icon-brand-press:#095B87;
+  --color-icon-white-high:#ffffff;
+  --color-icon-white-medium:rgba(255, 255, 255, 0.6392156863);
+  --color-icon-white-low:rgba(255, 255, 255, 0.3215686275);
+  --color-interaction-black-medium:rgba(16, 25, 36, 0.6392156863);
+  --color-interaction-black-low:rgba(16, 25, 36, 0.3215686275);
+  --color-interaction-black-lower:rgba(16, 25, 36, 0.1607843137);
+  --color-interaction-black-lowest:rgba(16, 25, 36, 0.1215686275);
+  --color-interaction-brand-medium:rgba(0, 125, 186, 0.6392156863);
+  --color-interaction-brand-low:rgba(0, 122, 184, 0.3215686275);
+  --color-interaction-brand-lower:rgba(0, 125, 186, 0.1607843137);
+  --color-interaction-brand-lowest:rgba(0, 125, 186, 0.1215686275);
+  --color-interaction-danger-medium:rgba(200, 62, 56, 0.6392156863);
+  --color-interaction-danger-low:rgba(200, 62, 56, 0.3215686275);
+  --color-interaction-danger-lower:rgba(200, 62, 56, 0.1607843137);
+  --color-interaction-danger-lowest:rgba(200, 62, 56, 0.1215686275);
+  --color-interaction-white-medium:rgba(255, 255, 255, 0.6392156863);
+  --color-interaction-white-low:rgba(255, 255, 255, 0.3215686275);
+  --color-interaction-white-lower:rgba(255, 255, 255, 0.1607843137);
+  --color-interaction-white-lowest:rgba(255, 255, 255, 0.1215686275);
+  --color-interaction-backdrop:rgba(0, 0, 0, 0.3215686275);
+  --color-link-default:#007DBA;
+  --color-link-hover:#056CA0;
+  --color-link-press:#095B87;
+  --color-text-high:#041821;
+  --color-text-medium:rgba(4, 24, 33, 0.6392156863);
+  --color-text-low:rgba(4, 24, 33, 0.3215686275);
+  --color-text-disabled:rgba(33, 49, 66, 0.3215686275);
+  --color-text-brand:#007DBA;
+  --color-text-caution-high:#46482E;
+  --color-text-caution-medium:#D0A60B;
+  --color-text-danger-high:#47323D;
+  --color-text-danger-medium:#C83E38;
+  --color-text-general-high:#364351;
+  --color-text-general-medium:#8F9295;
+  --color-text-healthy-high:#2C4333;
+  --color-text-healthy-medium:#6B9321;
+  --color-text-information-high:#133953;
+  --color-text-information-medium:#056CA0;
+  --color-text-warning-high:#463C3A;
+  --color-text-warning-medium:#D17739;
+  --color-text-white-high:#ffffff;
+  --color-text-white-medium:rgba(255, 255, 255, 0.6392156863);
+  --color-text-white-low:rgba(255, 255, 255, 0.3215686275);
+  --surface-higher:#ffffff;
+  --surface-high:#ffffff;
+  --surface-medium:#ffffff;
+  --surface-low:#FBFBFB;
+  --surface-lower:#F2F3F5;
+  --surface-neutral-default:#ffffff;
+  --surface-neutral-hover:#E8E9EB;
+  --surface-neutral-press:#CFD3D7;
+  --surface-overlay-default:#213142;
+  --surface-overlay-hover:#334152;
+  --surface-overlay-press:#6F7986;
+  --surface-elevation-01:0px 0px 3px 0px rgba(29, 46, 64, 0.1), 0px 3px 3px 0px rgba(29, 46, 64, 0.1);
+  --surface-elevation-02:0px 0px 6px 0px rgba(29, 46, 64, 0.1), 0px 6px 6px 0px rgba(29, 46, 64, 0.1);
+  --surface-elevation-03:0px 0px 12px 0px rgba(29, 46, 64, 0.1), 0px 12px 12px 0px rgba(29, 46, 64, 0.1);
+  --surface-elevation-04:0px 0px 24px 0px rgba(29, 46, 64, 0.1), 0px 24px 24px 0px rgba(29, 46, 64, 0.1);
+  --box-shadow-color-01:rgba(0, 0, 0, 0.12);
+  --box-shadow-color-02:rgba(0, 0, 0, 0.14);
+  --size-56:3.5rem;
+  --size-44:2.75rem;
+  --size-36:2.25rem;
+  --size-32:2rem;
+  --size-28:1.75rem;
+  --size-24:1.5rem;
+  --size-20:1.25rem;
+  --size-16:1rem;
+  --size-14:0.875rem;
+  --size-12:0.75rem;
+  --size-10:0.625rem;
+  --font-light:300;
+  --font-semibold:600;
+  --font-bold:800;
+  --height-64:4rem;
+  --height-52:3.25rem;
+  --height-44:2.75rem;
+  --height-40:2.5rem;
+  --height-36:2.25rem;
+  --height-32:2rem;
+  --height-28:1.75rem;
+  --height-24:1.5rem;
+  --height-20:1.25rem;
+  --height-16:1rem;
+  --height-12:0.75rem;
+}
+
+:root .theme-dark {
+  --color-background-disabled:rgba(161, 167, 176, 0.3215686275);
+  --color-background-brand-default:#056CA0;
+  --color-background-brand-hover:#095B87;
+  --color-background-brand-press:#0E4A6C;
+  --color-background-caution-default:#FED133;
+  --color-background-caution-lowest-default:#2F3834;
+  --color-background-caution-lowest-hover:#46482E;
+  --color-background-caution-lowest-press:#746722;
+  --color-background-danger-default:#C83E38;
+  --color-background-danger-high-default:#C83E38;
+  --color-background-danger-high-hover:#9D3A3A;
+  --color-background-danger-high-press:#72363B;
+  --color-background-danger-lowest-default:#72363B;
+  --color-background-danger-lowest-hover:#47323D;
+  --color-background-danger-lowest-press:#2E2B3A;
+  --color-background-general-default:#BDBDBD;
+  --color-background-general-lowest-default:#273646;
+  --color-background-general-lowest-hover:#364351;
+  --color-background-general-lowest-press:#535D67;
+  --color-background-healthy-default:#B2CE76;
+  --color-background-healthy-lowest-default:#223637;
+  --color-background-healthy-lowest-hover:#2C4333;
+  --color-background-healthy-lowest-press:#415E2D;
+  --color-background-information-default:#3397C7;
+  --color-background-information-lowest-default:#153147;
+  --color-background-information-lowest-hover:#133953;
+  --color-background-information-lowest-press:#0E4A6C;
+  --color-background-neutral-default:#101924;
+  --color-background-neutral-hover:#213142;
+  --color-background-neutral-press:#334152;
+  --color-background-neutral-lowest-default:#0B121A;
+  --color-background-neutral-lowest-hover:#101924;
+  --color-background-neutral-lowest-press:#213142;
+  --color-background-warning-default:#FFA261;
+  --color-background-warning-lowest-default:#2F323A;
+  --color-background-warning-lowest-hover:#463C3A;
+  --color-background-warning-lowest-press:#745039;
+  --color-border-high:#ffffff;
+  --color-border-medium:rgba(255, 255, 255, 0.6392156863);
+  --color-border-low:rgba(255, 255, 255, 0.3215686275);
+  --color-border-lower:rgba(255, 255, 255, 0.1607843137);
+  --color-border-lowest:rgba(255, 255, 255, 0.1215686275);
+  --color-border-brand:#66B1D5;
+  --color-border-brand-hover:#133953;
+  --color-border-disabled:rgba(161, 167, 176, 0.3215686275);
+  --color-border-danger:#F78E86;
+  --color-border-healthy:#98BE48;
+  --color-border-warning:#FFA261;
+  --color-border-caution:#FED133;
+  --color-border-information:#66B1D5;
+  --color-border-general:#CDCDCD;
+  --color-border-focus-1:#041821;
+  --color-border-focus-2:#CCE5F1;
+  --color-border-white-high:#041821;
+  --color-border-white-medium:rgba(4, 24, 33, 0.6392156863);
+  --color-border-white-low:rgba(4, 24, 33, 0.3215686275);
+  --color-border-white-lower:rgba(4, 24, 33, 0.1607843137);
+  --color-border-white-lowest:rgba(4, 24, 33, 0.0784313725);
+  --color-icon-high:#ffffff;
+  --color-icon-medium:rgba(255, 255, 255, 0.6392156863);
+  --color-icon-low:rgba(255, 255, 255, 0.3215686275);
+  --color-icon-disabled:rgba(161, 167, 176, 0.3215686275);
+  --color-icon-healthy:#98BE48;
+  --color-icon-caution:#FED133;
+  --color-icon-warning:#FFA261;
+  --color-icon-danger:#F78E86;
+  --color-icon-information:#66B1D5;
+  --color-icon-general:#CDCDCD;
+  --color-icon-brand-default:#66B1D5;
+  --color-icon-brand-hover:#99CBE3;
+  --color-icon-brand-press:#CCE5F1;
+  --color-icon-white-high:#041821;
+  --color-icon-white-medium:rgba(4, 24, 33, 0.6392156863);
+  --color-icon-white-low:rgba(4, 24, 33, 0.3215686275);
+  --color-interaction-black-medium:rgba(255, 255, 255, 0.6392156863);
+  --color-interaction-black-low:rgba(255, 255, 255, 0.3215686275);
+  --color-interaction-black-lower:rgba(255, 255, 255, 0.1607843137);
+  --color-interaction-black-lowest:rgba(255, 255, 255, 0.1215686275);
+  --color-interaction-brand-medium:rgba(102, 177, 213, 0.6392156863);
+  --color-interaction-brand-low:rgba(102, 177, 213, 0.3215686275);
+  --color-interaction-brand-lower:rgba(102, 177, 213, 0.1607843137);
+  --color-interaction-brand-lowest:rgba(102, 177, 213, 0.1215686275);
+  --color-interaction-danger-medium:rgba(245, 104, 94, 0.6392156863);
+  --color-interaction-danger-low:rgba(245, 104, 94, 0.3215686275);
+  --color-interaction-danger-lower:rgba(245, 104, 94, 0.1607843137);
+  --color-interaction-danger-lowest:rgba(245, 104, 94, 0.1215686275);
+  --color-interaction-white-medium:rgba(16, 25, 36, 0.6392156863);
+  --color-interaction-white-low:rgba(16, 25, 36, 0.3215686275);
+  --color-interaction-white-lower:rgba(16, 25, 36, 0.1607843137);
+  --color-interaction-white-lowest:rgba(16, 25, 36, 0.1215686275);
+  --color-interaction-backdrop:rgba(0, 0, 0, 0.6392156863);
+  --color-link-default:#66B1D5;
+  --color-link-hover:#99CBE3;
+  --color-link-press:#CCE5F1;
+  --color-text-high:#ffffff;
+  --color-text-medium:rgba(255, 255, 255, 0.6392156863);
+  --color-text-low:rgba(255, 255, 255, 0.3215686275);
+  --color-text-disabled:rgba(161, 167, 176, 0.6392156863);
+  --color-text-brand:#007DBA;
+  --color-text-caution-high:#FEE899;
+  --color-text-caution-medium:#FEDC66;
+  --color-text-danger-high:#FAB3AE;
+  --color-text-danger-medium:#F78E86;
+  --color-text-general-high:#DEDEDE;
+  --color-text-general-medium:#CDCDCD;
+  --color-text-healthy-high:#CBDEA3;
+  --color-text-healthy-medium:#B2CE76;
+  --color-text-information-high:#99CBE3;
+  --color-text-information-medium:#66B1D5;
+  --color-text-warning-high:#FFD0B0;
+  --color-text-warning-medium:#FFB988;
+  --color-text-white-high:#041821;
+  --color-text-white-medium:rgba(4, 24, 33, 0.6392156863);
+  --color-text-white-low:rgba(4, 24, 33, 0.3215686275);
+  --surface-higher:#192938;
+  --surface-high:#162431;
+  --surface-medium:#0E0E0E;
+  --surface-low:#000000;
+  --surface-lower:#0E0E0E;
+  --surface-neutral-default:#101924;
+  --surface-neutral-hover:#213142;
+  --surface-neutral-press:#6F7986;
+  --surface-overlay-default:#ffffff;
+  --surface-overlay-hover:#E8E9EB;
+  --surface-overlay-press:#CFD3D7;
+  --surface-elevation-01:0px 0px 3px 0px rgba(0, 0, 0, 0.3), 0px 3px 3px 0px rgba(0, 0, 0, 0.3);
+  --surface-elevation-02:0px 0px 6px 0px rgba(0, 0, 0, 0.3), 0px 6px 6px 0px rgba(0, 0, 0, 0.3);
+  --surface-elevation-03:0px 0px 12px 0px rgba(0, 0, 0, 0.3), 0px 12px 12px 0px rgba(0, 0, 0, 0.3);
+  --surface-elevation-04:0px 0px 24px 0px rgba(0, 0, 0, 0.3), 0px 24px 24px 0px rgba(0, 0, 0, 0.3);
+  --box-shadow-color-01:rgba(0, 0, 0, 0.24);
+  --box-shadow-color-02:rgba(0, 0, 0, 0.28);
+  --size-56:3.5rem;
+  --size-44:2.75rem;
+  --size-36:2.25rem;
+  --size-32:2rem;
+  --size-28:1.75rem;
+  --size-24:1.5rem;
+  --size-20:1.25rem;
+  --size-16:1rem;
+  --size-14:0.875rem;
+  --size-12:0.75rem;
+  --size-10:0.625rem;
+  --font-light:300;
+  --font-semibold:600;
+  --font-bold:800;
+  --height-64:4rem;
+  --height-52:3.25rem;
+  --height-44:2.75rem;
+  --height-40:2.5rem;
+  --height-36:2.25rem;
+  --height-32:2rem;
+  --height-28:1.75rem;
+  --height-24:1.5rem;
+  --height-20:1.25rem;
+  --height-16:1rem;
+  --height-12:0.75rem;
+}
+
+@font-face {
+  font-family: "Roboto Flex";
+  src: url("../assets/fonts/Roboto_Flex/RobotoFlex-VariableFont_GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf") format("truetype");
+  font-weight: 100 1000;
+  font-stretch: 25% 151%;
+  font-style: normal;
+}
+:root body {
+  --spacing-00:0rem;
+  --spacing-01:0.125rem;
+  --spacing-02:0.25rem;
+  --spacing-03:0.5rem;
+  --spacing-04:0.75rem;
+  --spacing-05:1rem;
+  --spacing-06:1.25rem;
+  --spacing-07:1.5rem;
+  --spacing-08:1.75rem;
+  --spacing-09:2rem;
+  --spacing-10:2.25rem;
+  --spacing-11:2.5rem;
+  --spacing-12:2.75rem;
+  --spacing-13:3rem;
+  --spacing-14:3.25rem;
+  --spacing-15:3.5rem;
+  --spacing-16:3.75rem;
+  --spacing-17:4rem;
+  --spacing-18:4.25rem;
+  --spacing-19:4.5rem;
+  --spacing-20:4.75rem;
+  --spacing-21:5rem;
+  --opacity-64:0.64;
+  --opacity-32:0.32;
+  --opacity-16:0.16;
+  --opacity-08:0.08;
+  --radius-sharp:var(--spacing-00);
+  --radius-medium:var(--spacing-02);
+  --radius-large:var(--spacing-03);
+  --radius-pill:var(--spacing-16);
+  --radius-circle:50%;
+  --static-brand-0:#ffffff;
+  --static-brand-50:#E6F2F8;
+  --static-brand-100:#CCE5F1;
+  --static-brand-200:#99CBE3;
+  --static-brand-300:#66B1D5;
+  --static-brand-400:#3397C7;
+  --static-brand-500:#007DBA;
+  --static-brand-main:#007DBA;
+  --static-brand-600:#056CA0;
+  --static-brand-700:#095B87;
+  --static-brand-800:#0E4A6C;
+  --static-brand-900:#133953;
+  --static-brand-950:#153147;
+  --static-brand-1000:#041821;
+  --static-brand-1000-medium:rgba(4, 24, 33, 0.6392156863);
+  --static-brand-1000-low:rgba(4, 24, 33, 0.3215686275);
+  --static-brand-1000-lower:rgba(4, 24, 33, 0.1607843137);
+  --static-brand-1000-lowest:rgba(4, 24, 33, 0.0784313725);
+  --static-green-0:#ffffff;
+  --static-green-50:#F2F7E8;
+  --static-green-100:#E5EED1;
+  --static-green-200:#CBDEA3;
+  --static-green-300:#B2CE76;
+  --static-green-400:#98BE48;
+  --static-green-500:#7FAE1B;
+  --static-green-main:#7FAE1B;
+  --static-green-600:#6B9321;
+  --static-green-700:#557827;
+  --static-green-800:#415E2D;
+  --static-green-900:#2C4333;
+  --static-green-950:#223637;
+  --static-yellow-0:#ffffff;
+  --static-yellow-50:#FFF9E5;
+  --static-yellow-100:#FEF3CC;
+  --static-yellow-200:#FEE899;
+  --static-yellow-300:#FEDC66;
+  --static-yellow-400:#FED133;
+  --static-yellow-500:#FEC600;
+  --static-yellow-main:#FEC600;
+  --static-yellow-600:#D0A60B;
+  --static-yellow-700:#A18717;
+  --static-yellow-800:#746722;
+  --static-yellow-900:#46482E;
+  --static-yellow-950:#2F3834;
+  --static-red-0:#ffffff;
+  --static-red-50:#FEECEB;
+  --static-red-100:#FCD9D6;
+  --static-red-200:#FAB3AE;
+  --static-red-300:#F78E86;
+  --static-red-400:#F5685E;
+  --static-red-500:#F34336;
+  --static-red-main:#F34336;
+  --static-red-600:#C83E38;
+  --static-red-700:#9D3A3A;
+  --static-red-800:#72363B;
+  --static-red-900:#47323D;
+  --static-red-950:#2E2B3A;
+  --static-grey-0:#ffffff;
+  --static-grey-50:#f7f7f7;
+  --static-grey-100:#EEEEEE;
+  --static-grey-200:#DEDEDE;
+  --static-grey-300:#CDCDCD;
+  --static-grey-400:#BDBDBD;
+  --static-grey-500:#ADADAD;
+  --static-grey-main:#ADADAD;
+  --static-grey-600:#8F9295;
+  --static-grey-700:#71787F;
+  --static-grey-800:#535D67;
+  --static-grey-900:#364351;
+  --static-grey-950:#273646;
+  --static-orange-0:#ffffff;
+  --static-orange-50:#FFF3EB;
+  --static-orange-100:#FFE7D7;
+  --static-orange-200:#FFD0B0;
+  --static-orange-300:#FFB988;
+  --static-orange-400:#FFA261;
+  --static-orange-500:#FF8B3A;
+  --static-orange-main:#FF8B3A;
+  --static-orange-600:#D17739;
+  --static-orange-700:#A2633A;
+  --static-orange-800:#745039;
+  --static-orange-900:#463C3A;
+  --static-orange-950:#2F323A;
+  --static-dataviz-cat-sea-green:#0FB5AE;
+  --static-dataviz-cat-palatinate-blue:#4046CA;
+  --static-dataviz-cat-tangerine:#F68511;
+  --static-dataviz-cat-magenta:#DE3D82;
+  --static-dataviz-cat-tropical-indigo:#7E84FA;
+  --static-dataviz-cat-malachite:#72E06A;
+  --static-dataviz-cat-azure:#147AF3;
+  --static-dataviz-cat-violet:#7326D3;
+  --static-dataviz-cat-yellow:#E8C600;
+  --static-dataviz-cat-alloy-orange:#CB5D00;
+  --static-dataviz-cat-green:#008F5D;
+  --static-dataviz-cat-lime:#BCE931;
+  --static-dataviz-seq-viridis-50:#FDE725;
+  --static-dataviz-seq-viridis-100:#D2E21B;
+  --static-dataviz-seq-viridis-150:#A5DB36;
+  --static-dataviz-seq-viridis-200:#7AD151;
+  --static-dataviz-seq-viridis-250:#54C568;
+  --static-dataviz-seq-viridis-300:#35B779;
+  --static-dataviz-seq-viridis-350:#22A884;
+  --static-dataviz-seq-viridis-400:#1F988B;
+  --static-dataviz-seq-viridis-450:#23888E;
+  --static-dataviz-seq-viridis-500:#2A788E;
+  --static-dataviz-seq-viridis-550:#31688E;
+  --static-dataviz-seq-viridis-600:#39568C;
+  --static-dataviz-seq-viridis-650:#414487;
+  --static-dataviz-seq-viridis-700:#472F7D;
+  --static-dataviz-seq-viridis-750:#481A6C;
+  --static-dataviz-seq-viridis-800:#440154;
+  --static-dataviz-seq-magma-50:#FCFDBF;
+  --static-dataviz-seq-magma-100:#FDDEA0;
+  --static-dataviz-seq-magma-150:#FEBF84;
+  --static-dataviz-seq-magma-200:#FE9F6D;
+  --static-dataviz-seq-magma-250:#FA7F5E;
+  --static-dataviz-seq-magma-300:#F1605D;
+  --static-dataviz-seq-magma-350:#DE4968;
+  --static-dataviz-seq-magma-400:#C43C75;
+  --static-dataviz-seq-magma-450:#A8327D;
+  --static-dataviz-seq-magma-500:#8C2981;
+  --static-dataviz-seq-magma-550:#721F81;
+  --static-dataviz-seq-magma-600:#57157E;
+  --static-dataviz-seq-magma-650:#3B0F70;
+  --static-dataviz-seq-magma-700:#20114B;
+  --static-dataviz-seq-magma-750:#0B0924;
+  --static-dataviz-seq-magma-800:#000004;
+  --static-dataviz-seq-rose-50:#FFF4DE;
+  --static-dataviz-seq-rose-100:#FFDDD8;
+  --static-dataviz-seq-rose-150:#FFC6D2;
+  --static-dataviz-seq-rose-200:#FCAFCB;
+  --static-dataviz-seq-rose-250:#F898C4;
+  --static-dataviz-seq-rose-300:#F380BC;
+  --static-dataviz-seq-rose-350:#ED67B4;
+  --static-dataviz-seq-rose-400:#E64BAC;
+  --static-dataviz-seq-rose-450:#D03EA0;
+  --static-dataviz-seq-rose-500:#B93495;
+  --static-dataviz-seq-rose-550:#A12A8B;
+  --static-dataviz-seq-rose-600:#892282;
+  --static-dataviz-seq-rose-650:#701C7A;
+  --static-dataviz-seq-rose-700:#551672;
+  --static-dataviz-seq-rose-750:#37126C;
+  --static-dataviz-seq-rose-800:#001066;
+  --static-dataviz-seq-forest-50:#FFFFE0;
+  --static-dataviz-seq-forest-100:#E2F5BD;
+  --static-dataviz-seq-forest-150:#C5EA99;
+  --static-dataviz-seq-forest-200:#A6DF73;
+  --static-dataviz-seq-forest-250:#8FD16C;
+  --static-dataviz-seq-forest-300:#79C365;
+  --static-dataviz-seq-forest-350:#62B55E;
+  --static-dataviz-seq-forest-400:#4CA658;
+  --static-dataviz-seq-forest-450:#3B9752;
+  --static-dataviz-seq-forest-500:#31884F;
+  --static-dataviz-seq-forest-550:#28794C;
+  --static-dataviz-seq-forest-600:#1E6A48;
+  --static-dataviz-seq-forest-650:#155B45;
+  --static-dataviz-seq-forest-700:#0E4D41;
+  --static-dataviz-seq-forest-750:#073F3E;
+  --static-dataviz-seq-forest-800:#00313A;
+  --static-dataviz-seq-cerulean-50:#EAFFF1;
+  --static-dataviz-seq-cerulean-100:#C9F1E4;
+  --static-dataviz-seq-cerulean-150:#A7E3D7;
+  --static-dataviz-seq-cerulean-200:#85D5CA;
+  --static-dataviz-seq-cerulean-250:#6CC5C0;
+  --static-dataviz-seq-cerulean-300:#58B4B9;
+  --static-dataviz-seq-cerulean-350:#44A2B1;
+  --static-dataviz-seq-cerulean-400:#3091AA;
+  --static-dataviz-seq-cerulean-450:#2880A0;
+  --static-dataviz-seq-cerulean-500:#246E96;
+  --static-dataviz-seq-cerulean-550:#215D8B;
+  --static-dataviz-seq-cerulean-600:#1D4C81;
+  --static-dataviz-seq-cerulean-650:#1C3B77;
+  --static-dataviz-seq-cerulean-700:#1B296D;
+  --static-dataviz-seq-cerulean-750:#1A1662;
+  --static-dataviz-seq-cerulean-800:#180055;
+  --static-dataviz-div-orange-yellow-seafoam-0:#580000;
+  --static-dataviz-div-orange-yellow-seafoam-50:#79260B;
+  --static-dataviz-div-orange-yellow-seafoam-100:#9C4511;
+  --static-dataviz-div-orange-yellow-seafoam-150:#BD651A;
+  --static-dataviz-div-orange-yellow-seafoam-200:#DD8629;
+  --static-dataviz-div-orange-yellow-seafoam-250:#F5AD52;
+  --static-dataviz-div-orange-yellow-seafoam-300:#FED693;
+  --static-dataviz-div-orange-yellow-seafoam-350:#FFFFE0;
+  --static-dataviz-div-orange-yellow-seafoam-400:#BBE4D1;
+  --static-dataviz-div-orange-yellow-seafoam-450:#76C7BE;
+  --static-dataviz-div-orange-yellow-seafoam-500:#3EA8A6;
+  --static-dataviz-div-orange-yellow-seafoam-550:#208288;
+  --static-dataviz-div-orange-yellow-seafoam-600:#076769;
+  --static-dataviz-div-orange-yellow-seafoam-650:#00494B;
+  --static-dataviz-div-orange-yellow-seafoam-700:#002C2D;
+  --static-dataviz-div-red-yellow-blue-0:#4A001E;
+  --static-dataviz-div-red-yellow-blue-50:#751232;
+  --static-dataviz-div-red-yellow-blue-100:#A52747;
+  --static-dataviz-div-red-yellow-blue-150:#C65154;
+  --static-dataviz-div-red-yellow-blue-200:#E47961;
+  --static-dataviz-div-red-yellow-blue-250:#F0A882;
+  --static-dataviz-div-red-yellow-blue-300:#FAD4AC;
+  --static-dataviz-div-red-yellow-blue-350:#FFFFE0;
+  --static-dataviz-div-red-yellow-blue-400:#BCE2CF;
+  --static-dataviz-div-red-yellow-blue-450:#89C0C4;
+  --static-dataviz-div-red-yellow-blue-500:#579EB9;
+  --static-dataviz-div-red-yellow-blue-550:#397AA8;
+  --static-dataviz-div-red-yellow-blue-600:#1C5796;
+  --static-dataviz-div-red-yellow-blue-650:#163771;
+  --static-dataviz-div-red-yellow-blue-700:#10194D;
+  --static-dataviz-div-red-blue-0:#4A001E;
+  --static-dataviz-div-red-blue-50:#731331;
+  --static-dataviz-div-red-blue-100:#9F2945;
+  --static-dataviz-div-red-blue-150:#CC415A;
+  --static-dataviz-div-red-blue-200:#E06E85;
+  --static-dataviz-div-red-blue-250:#ED9AB0;
+  --static-dataviz-div-red-blue-300:#F8C3D9;
+  --static-dataviz-div-red-blue-350:#FAF0FF;
+  --static-dataviz-div-red-blue-400:#C6D0F2;
+  --static-dataviz-div-red-blue-450:#92B2DE;
+  --static-dataviz-div-red-blue-500:#5D94CB;
+  --static-dataviz-div-red-blue-550:#2F74B3;
+  --static-dataviz-div-red-blue-600:#265191;
+  --static-dataviz-div-red-blue-650:#163670;
+  --static-dataviz-div-red-blue-700:#0B194C;
+  --static-white:#ffffff;
+  --static-white-medium:rgba(255, 255, 255, 0.6392156863);
+  --static-white-low:rgba(255, 255, 255, 0.3215686275);
+  --static-white-lower:rgba(255, 255, 255, 0.1607843137);
+  --static-white-lowest:rgba(255, 255, 255, 0.1215686275);
+  --static-black:#000000;
+  --static-black-medium:rgba(0, 0, 0, 0.6392156863);
+  --static-black-low:rgba(0, 0, 0, 0.3215686275);
+  --static-black-lower:rgba(0, 0, 0, 0.1607843137);
+  --static-black-lowest:rgba(0, 0, 0, 0.1215686275);
+  --elevation-shadow-0:none;
+  --elevation-shadow-1:0 0 2px var(--box-shadow-color-01), 0 1px 2px var(--box-shadow-color-02);
+  --elevation-shadow-2:0 0 2px var(--box-shadow-color-01), 0 2px 4px var(--box-shadow-color-02);
+  --elevation-shadow-3:0 0 2px var(--box-shadow-color-01), 0 4px 8px var(--box-shadow-color-02);
+  --elevation-shadow-5:0 0 2px var(--box-shadow-color-01), 0 8px 16px var(--box-shadow-color-02);
+  --elevation-shadow-8:0 0 8px var(--box-shadow-color-01), 0 14px 28px var(--box-shadow-color-02);
+  --elevation-shadow-17:0 0 8px var(--box-shadow-color-01), 0 32px 64px var(--box-shadow-color-02);
+  --elevation-layer-0:0;
+  --elevation-layer-1:1;
+  --elevation-layer-2:3;
+  --elevation-layer-3:6;
+  --elevation-layer-4:8;
+  --elevation-layer-5:12;
+  --elevation-layer-6:16;
+  --elevation-layer-7:20;
+  --elevation-layer-8:24;
+  --elevation-layer-9:28;
+  --elevation-layer-10:32;
+  --border-thickness-01:0.0625rem;
+  --border-thickness-02:0.078125rem;
+  --border-thickness-03:0.09375rem;
+  --border-thickness-04:0.109375rem;
+  --border-thickness-05:0.125rem;
+  --border-thickness-06:0.140625rem;
+  --border-thickness-07:0.15625rem;
+  --border-thickness-08:0.171875rem;
+  --border-thickness-09:0.1875rem;
+  --duration-instant:0ms;
+  --duration-short:100ms;
+  --duration-medium:200ms;
+  --duration-long:300ms;
+  --duration-extra-long:500ms;
+  --easing-standard:cubic-bezier(0.2, 0, 0, 1);
+  --easing-emphasized:cubic-bezier(0.2, 0, 0, 1);
+  --easing-decelerate:cubic-bezier(0, 0, 0, 1);
+  --easing-accelerate:cubic-bezier(0.3, 0, 1, 1);
+  --easing-linear:linear;
+}
+
+:root body .vds-font-display-large {
+  font-size: 3.5rem;
+  font-weight: 300;
+  line-height: 4rem;
+  letter-spacing: normal;
+}
+
+:root body .vds-font-display-medium {
+  font-size: 2.75rem;
+  font-weight: 300;
+  line-height: 3.25rem;
+  letter-spacing: normal;
+}
+
+:root body .vds-font-display-small {
+  font-size: 2.25rem;
+  font-weight: 300;
+  line-height: 2.75rem;
+  letter-spacing: normal;
+}
+
+:root body .vds-font-headline-large {
+  font-size: 2rem;
+  font-weight: 600;
+  line-height: 2.5rem;
+  letter-spacing: normal;
+}
+
+:root body .vds-font-headline-medium {
+  font-size: 1.75rem;
+  font-weight: 600;
+  line-height: 2.25rem;
+  letter-spacing: normal;
+}
+
+:root body .vds-font-headline-small {
+  font-size: 1.5rem;
+  font-weight: 600;
+  line-height: 2rem;
+  letter-spacing: normal;
+}
+
+:root body .vds-font-title-large {
+  font-size: 1.25rem;
+  font-weight: 600;
+  line-height: 1.75rem;
+  letter-spacing: 0.00875rem;
+}
+
+:root body .vds-font-title-medium {
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 1.5rem;
+  letter-spacing: normal;
+}
+
+:root body .vds-font-title-small {
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 1.25rem;
+  letter-spacing: normal;
+}
+
+:root body .vds-font-title-extra-small {
+  font-size: 0.75rem;
+  font-weight: 600;
+  line-height: 1rem;
+  letter-spacing: 0.00875rem;
+}
+
+:root body .vds-font-title-2x-small {
+  font-size: 0.625rem;
+  font-weight: 600;
+  line-height: 0.75rem;
+  letter-spacing: 0.00875rem;
+}
+
+:root body .vds-font-body-large {
+  font-size: 1rem;
+  font-weight: 300;
+  line-height: 1.5rem;
+  letter-spacing: normal;
+}
+
+:root body .vds-font-body-medium {
+  font-size: 0.875rem;
+  font-weight: 300;
+  line-height: 1.25rem;
+  letter-spacing: normal;
+}
+
+:root body .vds-font-body-small {
+  font-size: 0.75rem;
+  font-weight: 300;
+  line-height: 1rem;
+  letter-spacing: normal;
+}
+
+/* This mixing can be used to implement font styling. 
+ * to do so, you need to import the scss file and used @include font-style(title, medium);
+ * This will implement styling according to the $volt-font-styles map
+ */
+.vds__divider {
+  width: 0.0625rem;
+  height: 1rem;
+  margin: var(--spacing-01);
+  background-color: var(--color-border-low);
+}
+
+.content_divider_vertical {
+  opacity: 0.16;
+  background: var(--color-border-high);
+  height: 1rem;
+  width: 1px;
+}
+
+.vds-header_content-section {
+  display: flex;
+  gap: var(--spacing-03);
+}
+
+:host {
+  display: block;
+  --vds-topbar-background-color: var(--surface-low);
+  --vds-topbar-border-color: var(--color-border-lowest);
+  --vds-topbar-header-gap: var(--spacing-02);
+}
+:host .vds__topbar {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  background: var(--vds-topbar-background-color);
+  border-bottom: 1px solid var(--vds-topbar-border-color);
+}
+:host .vds__topbar--no-border {
+  border-bottom: none;
+}
+:host .vds__topbar--container {
+  display: flex;
+  align-items: center;
+  padding: var(--spacing-05);
+  flex: 1 0 auto;
+  min-height: 36px;
+  gap: var(--vds-topbar-header-gap);
+}
+:host .vds__topbar--left {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  min-width: 0;
+  flex: 1 0 auto;
+}
+:host .vds__topbar--center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1 1 auto;
+  min-width: 0;
+  width: 100%;
+}
+:host .vds__topbar--right {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  min-width: 0;
+  flex: 1 0 auto;
+}
+:host .vds__topbar--bottom {
+  display: block;
+  width: 100%;
+}