intergalactic 15.87.0-prerelease.3 → 15.88.0

package/libs/utils/lib/themes/auto.css

@@ -0,0 +1,1422 @@
+:root {
+  /* Primary background of the interface which contains the main data and information. */
+  --intergalactic-bg-primary-neutral: #ffffff;
+  /* Hover state of the primary background of the interface which contains the main data and information. */
+  --intergalactic-bg-primary-neutral-hover: #f4f5f9;
+  /* Active (selected) state of the primary background of the interface which contains the main data and information. */
+  --intergalactic-bg-primary-neutral-active: #e0e1e9;
+  /* Accent background of the message with regular information. */
+  --intergalactic-bg-primary-info: #008ff8;
+  /* Accent background of the message or banner with information about the successful result. */
+  --intergalactic-bg-primary-success: #009f81;
+  /* Accent background of a message or a banner with a critical information. */
+  --intergalactic-bg-primary-critical: #ff4953;
+  /* Accent background of a message or a banner with a warning information. */
+  --intergalactic-bg-primary-warning: #ff642d;
+  /* Accent background of the information you want to highlight. */
+  --intergalactic-bg-primary-highlight: #fce081;
+  /* Accent background for the advertising banners and controls. */
+  --intergalactic-bg-primary-advertising: #421983;
+  /* Accented muted background for a message with regular information. */
+  --intergalactic-bg-primary-muted: #6c6e79;
+  /* Inverted version of the primary background of the interface that contains the main data and information. */
+  --intergalactic-bg-primary-invert: #191b23;
+  /* Hover state for the inverted version of the primary background of the interface that contains the main data and information. */
+  --intergalactic-bg-primary-invert-hover: #2b2e38;
+  /* Active (selected) state for the inverted version of the primary background of the interface that contains the main data and information. */
+  --intergalactic-bg-primary-invert-active: #484a54;
+  /* Secondary background of the interface which contains the main data and information. */
+  --intergalactic-bg-secondary-neutral: #f4f5f9;
+  /* Hover state of the secondary background of the interface which contains the main data and information. */
+  --intergalactic-bg-secondary-neutral-hover: #e0e1e9;
+  /* Active (selected) state of the secondary background of the interface which contains the main data and information. */
+  --intergalactic-bg-secondary-neutral-active: #c4c7cf;
+  /* Secondary background of a message with regular information. */
+  --intergalactic-bg-secondary-info: #e9f7ff;
+  /* Hover state of the secondary background of a message with regular information. */
+  --intergalactic-bg-secondary-info-hover: #c4e5fe;
+  /* Active (selected) state of the secondary background of a message with regular information. */
+  --intergalactic-bg-secondary-info-active: #8ecdff;
+  /* Secondary background of the message with success information you want to accent. */
+  --intergalactic-bg-secondary-success: #dbfee8;
+  /* Hover state of the secondary background of the message with success information you want to accent. */
+  --intergalactic-bg-secondary-success-hover: #9ef2c9;
+  /* Active (selected) state of the secondary background of the message with success information you want to accent. */
+  --intergalactic-bg-secondary-success-active: #59ddaa;
+  /* Secondary background of the message with critical information you want to accent. */
+  --intergalactic-bg-secondary-critical: #fff0f7;
+  /* Hover state of the secondary background of the message with critical information you want to accent. */
+  --intergalactic-bg-secondary-critical-hover: #ffd7df;
+  /* Active (selected) state of the secondary background of the message with critical information you want to accent. */
+  --intergalactic-bg-secondary-critical-active: #ffaeb5;
+  /* Secondary background of the message with warning information you want to accent. */
+  --intergalactic-bg-secondary-warning: #fff3d9;
+  /* Hover state of the secondary background of the message with warning information you want to accent. */
+  --intergalactic-bg-secondary-warning-hover: #ffdca2;
+  /* Active (selected) state of the secondary background of the message with critical information you want to accent. */
+  --intergalactic-bg-secondary-warning-active: #ffb26e;
+  /* Secondary background of the information you want to highlight. */
+  --intergalactic-bg-secondary-highlight: #fdf7c8;
+  /* Hover state of the secondary background of the information you want to highlight. */
+  --intergalactic-bg-secondary-highlight-hover: #fce081;
+  /* Active (selected) state of the secondary background of the information you want to highlight. */
+  --intergalactic-bg-secondary-highlight-active: #fdc23c;
+  /* Secondary background for the advertising message you want to accent. */
+  --intergalactic-bg-secondary-advertising: #f9f2ff;
+  /* Hover state of the secondary background for the advertising message you want to accent. */
+  --intergalactic-bg-secondary-advertising-hover: #edd9ff;
+  /* Active (selected) state of the secondary background for the advertising message you want to accent. */
+  --intergalactic-bg-secondary-advertising-active: #dcb8ff;
+  /* Highlighting the search results. */
+  --intergalactic-bg-highlight-results: rgba(239, 152, 0, 0.4);
+  /* Focusing values in the input. */
+  --intergalactic-bg-highlight-focus: rgba(0, 143, 248, 0.2);
+  /* Primary text. */
+  --intergalactic-text-primary: #191b23;
+  /* Secondary text. */
+  --intergalactic-text-secondary: #6c6e79;
+  /* Placeholder text only. */
+  --intergalactic-text-placeholder: #8a8e9b;
+  /* Text associated with success states and data. */
+  --intergalactic-text-success: #007c65;
+  /* Hover and active states for the text associated with success states and data. */
+  --intergalactic-text-success-hover-active: #055345;
+  /* Text associated with critical states and data. */
+  --intergalactic-text-critical: #d1002f;
+  /* Hover and active states for the text associated with critical states and data. */
+  --intergalactic-text-critical-hover-active: #8e0016;
+  /* Inverted version of the primary text. */
+  --intergalactic-text-primary-invert: #ffffff;
+  /* Inverted version of the secondary text. */
+  --intergalactic-text-secondary-invert: rgba(255, 255, 255, 0.8);
+  /* Link text. */
+  --intergalactic-text-link: #006dca;
+  /* Hover and active states for the link text. */
+  --intergalactic-text-link-hover-active: #044792;
+  /* Inverted version of the link text. Use on dark background only. */
+  --intergalactic-text-link-invert: #8ecdff;
+  /* Hover and active states of the inverted version of the link text. Use on dark background only. */
+  --intergalactic-text-link-invert-hover: #2bb3ff;
+  /* Visited link text. */
+  --intergalactic-text-link-visited: #8649e1;
+  /* Hint link text. */
+  --intergalactic-text-hint: #6c6e79;
+  /* Hover and active states of the hint link text. */
+  --intergalactic-text-hint-hover-active: #484a54;
+  /* Inverted version of the hint link text. */
+  --intergalactic-text-hint-invert: #c4c7cf;
+  /* Hover and active states of the inverted version of the hint link text. */
+  --intergalactic-text-hint-invert-hover-active: #a9abb6;
+  /* Secondary text. Use with font-size ≥20px. */
+  --intergalactic-text-large-secondary: #a9abb6;
+  /* Link text with font-size ≥20px. */
+  --intergalactic-text-large-info: #008ff8;
+  /* Hover and active states of the link text with font-size ≥20px. */
+  --intergalactic-text-large-info-hover-active: #006dca;
+  /* Text with font-size ≥20px associated with success states and data. */
+  --intergalactic-text-large-success: #009f81;
+  /* Hover and active states of the text with font-size ≥20px associated with success states and data. */
+  --intergalactic-text-large-success-hover-active: #007c65;
+  /* Text with font-size ≥20px associated with critical states and data. */
+  --intergalactic-text-large-critical: #ff4953;
+  /* Hover and active states of the text with font-size ≥20px associated with critical states and data. */
+  --intergalactic-text-large-critical-hover-active: #d1002f;
+  /* Advertising text. */
+  --intergalactic-text-advertising: #421983;
+  /* Neutral primary border. */
+  --intergalactic-border-primary: #c4c7cf;
+  /* Subtle secondary border. */
+  --intergalactic-border-secondary: #e0e1e9;
+  /* Subtle secondary border in the informational message. */
+  --intergalactic-border-info: #8ecdff;
+  /* Active border in focused input filed. */
+  --intergalactic-border-info-active: #006dca;
+  /* Subtle secondary border in the successful message and input field. */
+  --intergalactic-border-success: #59ddaa;
+  /* Active border in the focused input field with valid state. */
+  --intergalactic-border-success-active: #007c65;
+  /* Subtle secondary border in the critical message and invalid input field. */
+  --intergalactic-border-critical: #ffaeb5;
+  /* Active border in the focused input field with invalid state, and active state of the other components with invalid state. */
+  --intergalactic-border-critical-active: #d1002f;
+  /* Subtle secondary border in the warning message. */
+  --intergalactic-border-warning: #ffb26e;
+  /* Active border in components with warning intention. */
+  --intergalactic-border-warning-active: #c33909;
+  /* Inverted version of the neutral primary border. Use it for borders on the dark or color background. */
+  --intergalactic-border-primary-invert: #ffffff;
+  /* Inverted version of the neutral secondary border. Use it for borders on the dark or color background. */
+  --intergalactic-border-secondary-invert: rgba(255, 255, 255, 0.3);
+  /* Border of the Tooltip with dark theme. */
+  --intergalactic-border-tooltip-invert: #6c6e79;
+  /* Accent borders in the Table: for the accordion in the table and for the header of the secondary table. */
+  --intergalactic-border-table-accent: #a9abb6;
+  /* Border color of the second period for the comparison mode in the DatePicker. */
+  --intergalactic-border-date-picker-range-comparison: #8649e1;
+  /* Subtle background of the Switch control. */
+  --intergalactic-control-switch-bg: #a9abb6;
+  /* Background of the regular primary control. */
+  --intergalactic-control-primary-info: #008ff8;
+  /* Hover state of the regular primary control. */
+  --intergalactic-control-primary-info-hover: #006dca;
+  /* Active (selected) state of the regular primary control. */
+  --intergalactic-control-primary-info-active: #044792;
+  /* Background of the primary control with successful theme. */
+  --intergalactic-control-primary-success: #009f81;
+  /* Hover state of the primary control with successful theme. */
+  --intergalactic-control-primary-success-hover: #007c65;
+  /* Active (selected) state of the primary control with successful theme. */
+  --intergalactic-control-primary-success-active: #055345;
+  /* Background of the primary control with danger theme. */
+  --intergalactic-control-primary-critical: #ff4953;
+  /* Hover state of the primary control with danger theme. */
+  --intergalactic-control-primary-critical-hover: #d1002f;
+  /* Active (selected) state of the primary control with danger theme. */
+  --intergalactic-control-primary-critical-active: #8e0016;
+  /* Background of the advertising primary control. */
+  --intergalactic-control-primary-advertising-active: #8649e1;
+  /* Hover state of the advertising primary control. */
+  --intergalactic-control-primary-advertising: #5925ab;
+  /* Active (selected) state of the advertising primary control. */
+  --intergalactic-control-primary-advertising-hover: #421983;
+  /* Inverted background of the primary control. */
+  --intergalactic-control-primary-invert: #ffffff;
+  /* Hover state of the inverted primary control. */
+  --intergalactic-control-primary-invert-hover: #f4f5f9;
+  /* Active (selected) state of the inverted primary control. */
+  --intergalactic-control-primary-invert-active: #e0e1e9;
+  /* Background of the primary brand colored control. */
+  --intergalactic-control-primary-brand: #ff642d;
+  /* Hover state of the primary brand colored control. */
+  --intergalactic-control-primary-brand-hover: #c33909;
+  /* Active state of the primary brand colored control. */
+  --intergalactic-control-primary-brand-active: #8b1500;
+  /* Background of the regular secondary control. */
+  --intergalactic-control-secondary-neutral: rgba(138, 142, 155, 0.1);
+  /* Hover state of the regular secondary control. */
+  --intergalactic-control-secondary-neutral-hover: rgba(138, 142, 155, 0.2);
+  /* Active (selected) state of the regular secondary control. */
+  --intergalactic-control-secondary-neutral-active: rgba(138, 142, 155, 0.3);
+  /* Background of the accent secondary control. */
+  --intergalactic-control-secondary-info: rgba(0, 143, 248, 0.1);
+  /* Hover state of the accent secondary control. */
+  --intergalactic-control-secondary-info-hover: rgba(0, 143, 248, 0.2);
+  /* Active (selected) state of the accent secondary control. */
+  --intergalactic-control-secondary-info-active: rgba(0, 143, 248, 0.3);
+  /* Background of the inverted version of the secondary control. */
+  --intergalactic-control-secondary-invert: rgba(255, 255, 255, 0.05);
+  /* Hover state of the inverted version of the secondary control. */
+  --intergalactic-control-secondary-invert-hover: rgba(255, 255, 255, 0.1);
+  /* Active (selected) state of the inverted version of the secondary control. */
+  --intergalactic-control-secondary-invert-active: rgba(255, 255, 255, 0.3);
+  /* Background of the regular tertiary control. */
+  --intergalactic-control-tertiary-neutral: rgba(138, 142, 155, 0);
+  /* Hover state of the regular tertiary control. */
+  --intergalactic-control-tertiary-neutral-hover: rgba(138, 142, 155, 0.2);
+  /* Active (selected) state of the regular tertiary control. */
+  --intergalactic-control-tertiary-neutral-active: rgba(138, 142, 155, 0.3);
+  /* Background of the accent and link-lookalike tertiary control. */
+  --intergalactic-control-tertiary-info: rgba(0, 143, 248, 0);
+  /* Hover state of the accent and link-lookalike tertiary control. */
+  --intergalactic-control-tertiary-info-hover: rgba(0, 143, 248, 0.2);
+  /* Active (selected) state of the accent and link-lookalike tertiary control. */
+  --intergalactic-control-tertiary-info-active: rgba(0, 143, 248, 0.3);
+  /* Background of the inverted version of the tertiary control. */
+  --intergalactic-control-tertiary-invert: rgba(255, 255, 255, 0);
+  /* Hover state of the inverted version of the tertiary control. */
+  --intergalactic-control-tertiary-invert-hover: rgba(255, 255, 255, 0.1);
+  /* Active (selected) state of the inverted version of the tertiary control. */
+  --intergalactic-control-tertiary-invert-active: rgba(255, 255, 255, 0.3);
+  /* Primary neutral icon. */
+  --intergalactic-icon-primary-neutral: #6c6e79;
+  /* Gray background color for the hover and active states of the primary neutral icon. It’s created using a CSS filter with a brightness(0.8), applied to the gray-500 color. */
+  --intergalactic-icon-primary-neutral-hover-active: #565861;
+  /* Primary link-lookalike icon. */
+  --intergalactic-icon-primary-info: #006dca;
+  /* Blue background color for the hover and active states of the primary link-lookalike icon. It’s created using a CSS filter with a brightness(0.8), applied to the blue-500 color. */
+  --intergalactic-icon-primary-info-hover-active: #0358A1;
+  /* Primary success icon. */
+  --intergalactic-icon-primary-success: #009f81;
+  /* Green background color for the hover and active states of the primary success icon. It’s created using a CSS filter with a brightness(0.8), applied to the green-500 color. */
+  --intergalactic-icon-primary-success-hover-active: #037E68;
+  /* Primary critical icon. */
+  --intergalactic-icon-primary-critical: #ff4953;
+  /* Red background color for the hover and active states of the primary critical icon. It’s created using a CSS filter with a brightness(0.8), applied to the red-500 color. */
+  --intergalactic-icon-primary-critical-hover-active: #CC3A42;
+  /* Primary warning icon. */
+  --intergalactic-icon-primary-warning: #ff642d;
+  /* Orange background color for the hover and active states of the primary warning icon. It’s created using a CSS filter with a brightness(0.8), applied to the orange-500 color. */
+  --intergalactic-icon-primary-warning-hover-active: #CC5024;
+  /* Inverted version of the primary icon. */
+  --intergalactic-icon-primary-invert: #ffffff;
+  /* Hover and active (selected) states of the inverted version of the primary icon. */
+  --intergalactic-icon-primary-invert-hover-active: #e0e1e9;
+  /* Secondary neutral icon. */
+  --intergalactic-icon-secondary-neutral: #a9abb6;
+  /* Gray background color for the hover and active states of the secondary neutral icon. It’s created using a CSS filter with a brightness(0.8), applied to the gray-300 color. */
+  --intergalactic-icon-secondary-neutral-hover-active: #878992;
+  /* Secondary link-lookalike icon. */
+  --intergalactic-icon-secondary-info: #2bb3ff;
+  /* Blue background color for the hover and active states of the secondary link-lookalike icon. It’s created using a CSS filter with a brightness(0.8), applied to the blue-300 color. */
+  --intergalactic-icon-secondary-info-hover-active: #2290CC;
+  /* Secondary success icon. */
+  --intergalactic-icon-secondary-success: #00c192;
+  /* Green background color for the hover and active states of the secondary success icon. It’s created using a CSS filter with a brightness(0.8), applied to the green-300 color. */
+  --intergalactic-icon-secondary-success-hover-active: #049B75;
+  /* Secondary critical icon. */
+  --intergalactic-icon-secondary-critical: #ff8786;
+  /* Red background color for the hover and active states of the secondary critical icon. It’s created using a CSS filter with a brightness(0.8), applied to the red-300 color. */
+  --intergalactic-icon-secondary-critical-hover-active: #CC6C6B;
+  /* Secondary warning icon. */
+  --intergalactic-icon-secondary-warning: #ff8c43;
+  /* Orange background color for the hover and active states of the secondary warning icon. It’s created using a CSS filter with a brightness(0.8), applied to the orange-300 color. */
+  --intergalactic-icon-secondary-warning-hover-active: #CC7036;
+  /* Color for the default non-interactive icon. */
+  --intergalactic-icon-non-interactive: #191b23;
+  /* Default date-picker cell background. */
+  --intergalactic-date-picker-cell: #ffffff;
+  /* Color for marking the cell with the current date, month or year in the date-picker. */
+  --intergalactic-date-picker-cell-current: #8a8e9b;
+  /* Hover state of the default date-picker cell background. */
+  --intergalactic-date-picker-cell-hover: #e0e1e9;
+  /* Background for the cell which is included in the date range in the date-picker. */
+  --intergalactic-date-picker-cell-range: #c4e5fe;
+  /* Hover state of the background for the cell which is included in the date range in the date-picker. */
+  --intergalactic-date-picker-cell-range-hover: #8ecdff;
+  /* Active (selected) date-picker cell background. */
+  --intergalactic-date-picker-cell-active: #2bb3ff;
+  /* Hover for the active (selected) date-picker cell background. */
+  --intergalactic-date-picker-cell-active-hover: #008ff8;
+  /* Color for marking the active cell with the current date, month or year in the date-picker. */
+  --intergalactic-date-picker-cell-current-invert: rgba(255, 255, 255, 0.5);
+  /* Active (selected) date-picker cell background for comparison periods. */
+  --intergalactic-date-picker-cell-comparison-active: #8649e1;
+  /* Hover for the active (selected) date-picker cell background for comparison periods. */
+  --intergalactic-date-picker-cell-comparison-active-hover: #5925ab;
+  /* Default background color for the list item in the dropdown-menu. */
+  --intergalactic-dropdown-menu-item: #ffffff;
+  /* Hover state of the default background color for the list item in the dropdown-menu. */
+  --intergalactic-dropdown-menu-item-hover: #f4f5f9;
+  /* Active (selected) state of the default background color for the list item in the dropdown-menu. */
+  --intergalactic-dropdown-menu-item-selected: rgba(196, 229, 254, 0.7);
+  /* Hover state for the selected state of the default background color for the list item in the dropdown-menu. */
+  --intergalactic-dropdown-menu-item-selected-hover: #c4e5fe;
+  /* Color of the outer border of the FeaturePopover.Spot. */
+  --intergalactic-feature-popover-dot-outer-border: rgba(252, 224, 129, 0.3);
+  /* Background color of the ProgressBar. */
+  --intergalactic-progress-bar-bg: #e0e1e9;
+  /* Hover state of the background color of the ProgressBar. */
+  --intergalactic-progress-bar-bg-hover: #c4c7cf;
+  /* Inverted version of the background color of the ProgressBar. */
+  --intergalactic-progress-bar-bg-invert: rgba(255, 255, 255, 0.2);
+  /* Hover state for the inverted version of the background color of the ProgressBar. */
+  --intergalactic-progress-bar-bg-invert-hover: rgba(255, 255, 255, 0.4);
+  /* Value color of the ProgressBar. */
+  --intergalactic-progress-bar-value: #009f81;
+  /* Value with gradient for the ProgressBar. */
+  --intergalactic-progress-bar-value-gradient: linear-gradient(-45deg, rgba(0, 159, 129, 0.9) 25%, rgba(0, 159, 129, 1) 0%, rgba(0, 159, 129, 1) 50%, rgba(0, 159, 129, 0.9) 0%, rgba(0, 159, 129, 0.9) 75%, rgba(0, 159, 129, 1) 0%);
+  /* Null value gradient for the ProgressBar. */
+  --intergalactic-progress-bar-pattern-gradient: linear-gradient(-45deg, rgba(224, 225, 233, 0.9) 25%, rgba(224, 225, 233, 1) 0%, rgba(224, 225, 233, 1) 50%, rgba(224, 225, 233, 0.9) 0%, rgba(224, 225, 233, 0.9) 75%, rgba(224, 225, 233, 1) 0%);
+  /* Base value background for the ProgressBar. It is used to create gradients for the values. */
+  --intergalactic-progress-bar-value-bg: #000000;
+  /* Default color for the Skeleton. */
+  --intergalactic-skeleton-bg: rgba(224, 225, 233, 0.8);
+  /* Inverted version of the default color for the Skeleton. */
+  --intergalactic-skeleton-bg-invert: rgba(255, 255, 255, 0.3);
+  /* Background of the header cell in the primary Table. */
+  --intergalactic-table-th-primary-cell: #f4f5f9;
+  /* Background of the hovered header cell in the primary Table. */
+  --intergalactic-table-th-primary-cell-hover: #e0e1e9;
+  /* Background of the active header cell in the primary Table. */
+  --intergalactic-table-th-primary-cell-active: #e0e1e9;
+  /* Background of the header cell in the secondary Table. */
+  --intergalactic-table-th-secondary-cell: #ffffff;
+  /* Background gradient for sorting icon that absolute positioned in the table head. */
+  --intergalactic-table-th-gradient: linear-gradient(to right, rgba(224, 225, 233, 0) 0%, rgba(224, 225, 233, 1) 100%);
+  /* Background of the default cell in the Table. */
+  --intergalactic-table-td-cell: #ffffff;
+  /* Background of the default hovered cell in the Table. */
+  --intergalactic-table-td-cell-hover: rgb(240,240,244);
+  /* Background of the default active cell in the Table. */
+  --intergalactic-table-td-cell-active: rgb(249,249,251);
+  /* Background of the unread cell in the Table. */
+  --intergalactic-table-td-cell-unread: #f4f5f9;
+  /* Background of the cell used for Accordion or actions row, in the Table. */
+  --intergalactic-table-td-cell-actions-accordion: #f4f5f9;
+  /* Background of the selected cell in the Table. */
+  --intergalactic-table-td-cell-selected: #e9f7ff;
+  /* Background of the hovered selected cell in the Table. */
+  --intergalactic-table-td-cell-selected-hover: #c4e5fe;
+  /* Background of the active selected cell in the Table. */
+  --intergalactic-table-td-cell-selected-active: #c4e5fe;
+  /* Background of the cell with new information in the Table. */
+  --intergalactic-table-td-cell-new: #dbfee8;
+  /* Background of the hovered cell with new information in the Table. */
+  --intergalactic-table-td-cell-new-hover: #9ef2c9;
+  /* Background of the active cell with new information in the Table. */
+  --intergalactic-table-td-cell-new-active: #9ef2c9;
+  /* Background of the cell with critical information in the Table. */
+  --intergalactic-table-td-cell-critical: #fff0f7;
+  /* Background of the hovered cell with critical information in the Table. */
+  --intergalactic-table-td-cell-critical-hover: #ffd7df;
+  /* Background of the active cell with critical information in the Table. */
+  --intergalactic-table-td-cell-critical-active: #ffd7df;
+  /* Background of the cell with warning information in the Table. */
+  --intergalactic-table-td-cell-warning: #fff3d9;
+  /* Background of the hovered cell with warning information in the Table. */
+  --intergalactic-table-td-cell-warning-hover: #ffdca2;
+  /* Background of the active cell with warning information in the Table. */
+  --intergalactic-table-td-cell-warning-active: #ffdca2;
+  /* Primary brand color. */
+  --intergalactic-brand-primary: #ff642d;
+  /* Secondary brand color. */
+  --intergalactic-brand-secondary: #421983;
+  /* Pinterest brand color. */
+  --intergalactic-brand-pinterest: #bd081c;
+  /* Instagram brand color. */
+  --intergalactic-brand-instagram: #e4405f;
+  /* Youtube brand color. */
+  --intergalactic-brand-youtube: #ff0000;
+  /* Facebook brand color. */
+  --intergalactic-brand-facebook: #1877F2;
+  /* LinkedIn brand color. */
+  --intergalactic-brand-linkedIn: #0A66C2;
+  /* Twitter brand color. */
+  --intergalactic-brand-twitter: #1D9BF0;
+  /* Google brand color for the link. */
+  --intergalactic-brand-google-blue: #1a0dab;
+  /* Google green brand color for the link. */
+  --intergalactic-brand-google-green: #016723;
+  /* Google My Business brand color. */
+  --intergalactic-brand-google-my-business: #1a73e8;
+  /* Default shadow of the Card. */
+  --intergalactic-box-shadow-card: 0px 0px 1px 0px rgba(25, 27, 35, 0.16), 0px 1px 2px 0px rgba(25, 27, 35, 0.12);
+  /* Hover state for the shadow of the Card with hover state. */
+  --intergalactic-box-shadow-card-hover: 3px 3px 30px 0px rgba(25, 27, 35, 0.15);
+  /* Shadow for show that element are being drag-and-drop. */
+  --intergalactic-box-shadow-dnd: 0px 0px 1px 0px rgba(25, 27, 35, 0.16), 0px 12px 40px 0px rgba(25, 27, 35, 0.16);
+  /* Default shadow if the Modal window. */
+  --intergalactic-box-shadow-modal: 0px 3px 8px 0px rgba(25, 27, 35, 0.2);
+  /* Default shadow of all Poppers, Dropdowns and Tooltips. */
+  --intergalactic-box-shadow-popper: 0px 1px 12px 0px rgba(25, 27, 35, 0.15);
+  /* Default keyboard focus styles. */
+  --intergalactic-keyboard-focus: 0px 0px 0px 3px rgba(0, 143, 248, 0.5);
+  /* Keyboard focus styles for elements with invalid state. */
+  --intergalactic-keyboard-focus-invalid: 0px 0px 0px 3px rgba(255, 73, 83, 0.5);
+  /* Keyboard focus styles for elements with valid state. */
+  --intergalactic-keyboard-focus-valid: 0px 0px 0px 3px rgba(0, 159, 129, 0.5);
+  /* Default keyboard focus styles for using with dark background. */
+  --intergalactic-keyboard-focus-invert: 0px 0px 0px 3px rgba(255, 255, 255, 0.7);
+  /* Base font family. */
+  --intergalactic-base: Inter;
+  /* Use with font-size-800. */
+  --intergalactic-lh-800: 117%;
+  /* Use with font-size-700. */
+  --intergalactic-lh-700: 110%;
+  /* Use with font-size-600. */
+  --intergalactic-lh-600: 125%;
+  /* Use with font-size-500. */
+  --intergalactic-lh-500: 117%;
+  /* Use with font-size-400. */
+  --intergalactic-lh-400: 120%;
+  /* Use with font-size-300. */
+  --intergalactic-lh-300: 150%;
+  /* Use with font-size-200. */
+  --intergalactic-lh-200: 142%;
+  /* Use with font-size-100. */
+  --intergalactic-lh-100: 133%;
+  /* Semi-bold font weight. */
+  --intergalactic-semi-bold: 600;
+  /* Bold font weight. */
+  --intergalactic-bold: 700;
+  /* Regular font weight. */
+  --intergalactic-regular: 400;
+  /* Medium font weight. */
+  --intergalactic-medium: 500;
+  /* Use only for text in Badge component. */
+  --intergalactic-fs-50: 10px;
+  /* Use with caution for text in additional messages. Always check its contrast and readability. */
+  --intergalactic-fs-100: 12px;
+  /* Use for text in regular messages. */
+  --intergalactic-fs-200: 14px;
+  /* Use for H6 with bold font-weight, and for text in regular messages. */
+  --intergalactic-fs-300: 16px;
+  /* Use for H5 and subtitles. */
+  --intergalactic-fs-400: 20px;
+  /* Use for H4. */
+  --intergalactic-fs-500: 24px;
+  /* Use for H3. */
+  --intergalactic-fs-600: 32px;
+  /* Use for H2. */
+  --intergalactic-fs-700: 36px;
+  /* Use for H1. */
+  --intergalactic-fs-800: 48px;
+  /* Compact letter spacing. */
+  --intergalactic-compact: 0.3;
+  /* Base denominator of the design system. */
+  --intergalactic-scale-indent: 4px;
+  /* Default size of the controls. */
+  --intergalactic-form-control-m: 28px;
+  /* Large size of the controls. */
+  --intergalactic-form-control-l: 40px;
+  /* 2px */
+  --intergalactic-spacing-05x: 2px;
+  /* 4px */
+  --intergalactic-spacing-1x: 4px;
+  /* 8px */
+  --intergalactic-spacing-2x: 8px;
+  /* 12px */
+  --intergalactic-spacing-3x: 12px;
+  /* 16px */
+  --intergalactic-spacing-4x: 16px;
+  /* 20px */
+  --intergalactic-spacing-5x: 20px;
+  /* 24px */
+  --intergalactic-spacing-6x: 24px;
+  /* 32px */
+  --intergalactic-spacing-8x: 32px;
+  /* 40px */
+  --intergalactic-spacing-10x: 40px;
+  /* 56px */
+  --intergalactic-spacing-14x: 56px;
+  /* 80px */
+  --intergalactic-spacing-20x: 80px;
+  /* 96px */
+  --intergalactic-spacing-24x: 96px;
+  /* 120px */
+  --intergalactic-spacing-30x: 120px;
+  --intergalactic-rounded-small: 4px;
+  --intergalactic-rounded-medium: 6px;
+  --intergalactic-rounded-large: 12px;
+  --intergalactic-rounded-extra-large: 24px;
+  /* Use for rounding addons and small controls like Checkbox. */
+  --intergalactic-addon-rounded: 4px;
+  /* Use for rounding Badge. */
+  --intergalactic-badge-rounded: 6px;
+  /* Use for rounding Counter. */
+  --intergalactic-counter-rounded: 12px;
+  /* Use for rounding Tag. */
+  --intergalactic-tag-rounded: 24px;
+  /* Use for rounding Switch. */
+  --intergalactic-switch-rounded: 24px;
+  /* Use for rounding all form controls: Button, FilterTrigger, Input, Textarea, Pills, etc. */
+  --intergalactic-control-rounded: 6px;
+  /* Use for rounding bars: ProgressBar, SliderBar, etc. */
+  --intergalactic-progress-bar-rounded: 6px;
+  /* Use for rounding surfaces like Card, blocks, widgets, Notice, etc. */
+  --intergalactic-surface-rounded: 6px;
+  /* Use for rounding all kinds of poppers and dropdowns. */
+  --intergalactic-popper-rounded: 6px;
+  /* Use for rounding all kinds of big modal dialogs (e.g., Modal, Wizard). */
+  --intergalactic-modal-rounded: 12px;
+  /* Use for the disabled state of all kind of the controls and elements. */
+  --intergalactic-disabled-opacity: 0.3;
+  /* Extra small screens (small phones). */
+  --intergalactic-screen-extra-small: 320px;
+  /* Small screens (phones and small tablets). */
+  --intergalactic-screen-small: 768px;
+  /* Medium screens (tablets and small laptops). */
+  --intergalactic-screen-medium: 1200px;
+  /* Large screens (tablets and laptops). */
+  --intergalactic-screen-large: 1920px;
+  /* Use for cover the content under the modal dialogs. */
+  --intergalactic-overlay-primary: rgba(25, 27, 35, 0.7);
+  /* Use for the secondary modal dialogs that were opened upon the other modal dialogs. */
+  --intergalactic-overlay-secondary: rgba(25, 27, 35, 0.4);
+  /* Use as a primary cover of the content under the messages about limitations. */
+  --intergalactic-overlay-limitation-primary: #f4f5f9;
+  /* Use as a secondary cover of the content under the messages about limitations. */
+  --intergalactic-overlay-limitation-secondary: rgba(255, 255, 255, 0.85);
+  --intergalactic-z-index-deep: -999;
+  --intergalactic-z-index-overlay: 500;
+  --intergalactic-z-index-modal: 600;
+  --intergalactic-z-index-popper: 700;
+  --intergalactic-z-index-dropdown: 750;
+  --intergalactic-z-index-tooltip: 800;
+  --intergalactic-z-index-notice-bubble: 999;
+  /* Default Tooltip background. */
+  --intergalactic-tooltip-default: #ffffff;
+  /* Warning Tooltip background. */
+  --intergalactic-tooltip-warning: #ffd7df;
+  /* Inverted version of the default Tooltip background. */
+  --intergalactic-tooltip-invert: #191b23;
+  /* Neutral border of the components that are combined with neighbor-location property. */
+  --intergalactic-neighbor-location-neutral: rgba(255, 255, 255, 0.5);
+  /* Inverted border of the components that are combined with neighbor-location property. */
+  --intergalactic-neighbor-location-invert: rgba(0, 0, 0, 0.5);
+  /* Left-to-right fade shadow for the ScrollArea. */
+  --intergalactic-scroll-area-shadow-left: linear-gradient(to right, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%);
+  /* Right-to-left fade shadow for the ScrollArea. */
+  --intergalactic-scroll-area-shadow-right: linear-gradient(to left, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%);
+  /* Top-to-bottom fade shadow for the ScrollArea. */
+  --intergalactic-scroll-area-shadow-top: linear-gradient(to bottom, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%);
+  /* Bottom-to-top fade shadow for the ScrollArea. */
+  --intergalactic-scroll-area-shadow-bottom: linear-gradient(to top, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%);
+  /* Left-to-right fade shadow for the ScrollArea inside the DropdownMenu. */
+  --intergalactic-scroll-area-dropdown-menu-left: linear-gradient(to right, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%);
+  /* Right-to-left fade shadow for the ScrollArea inside the DropdownMenu. */
+  --intergalactic-scroll-area-dropdown-menu-right: linear-gradient(to left, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%);
+  /* Bottom-to-top fade shadow for the ScrollArea inside the DropdownMenu. */
+  --intergalactic-scroll-area-dropdown-menu-bottom: linear-gradient(to top, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%);
+  /* Top-to-bottom fade shadow for the ScrollArea inside the DropdownMenu. */
+  --intergalactic-scroll-area-dropdown-menu-top: linear-gradient(to bottom, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%);
+  /* Background color for ScrollBar. */
+  --intergalactic-scroll-bar-background: rgba(25, 27, 35, 0.3);
+  /* Gray background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the gray-500 color with 0.2 opacity on the white background underneath. */
+  --intergalactic-tag-primary-gray-normal: #ECEDF0;
+  /* Gray background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the gray-500 color with 0.3 opacity on the white background underneath. */
+  --intergalactic-tag-primary-gray-hover-active: #E3E4E9;
+  /* Blue background color for primary tag. It’s built with CSS filter brightness(150%) that was applied to blue-500 color with 0.2 opacity on the white background underneath. */
+  --intergalactic-tag-primary-blue-normal: #D0EEFF;
+  /* Blue background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the blue-500 color with 0.3 opacity on the white background underneath.  */
+  --intergalactic-tag-primary-blue-hover-active: #B7E4FF;
+  /* Green background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the green-500 color with 0.2 opacity on the white background underneath. */
+  --intergalactic-tag-primary-green-normal: #CFF1EA;
+  /* Green background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the green-500 color with 0.3 opacity on the white background underneath. */
+  --intergalactic-tag-primary-green-hover-active: #B7EAE0;
+  /* Orange background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the orange-500 color with 0.2 opacity on the white background underneath. */
+  --intergalactic-tag-primary-orange-normal: #FFDDD2;
+  /* Orange background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the orange-500 color with 0.3 opacity on the white background underneath. */
+  --intergalactic-tag-primary-orange-hover-active: #FFCCBB;
+  /* Red background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the red-500 color with 0.2 opacity on the white background underneath. */
+  --intergalactic-tag-primary-red-normal: #FFCEDC;
+  /* Red background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the red-500 color with 0.3 opacity on the white background underneath. */
+  --intergalactic-tag-primary-red-hover-active: #FFB6CA;
+  /* Violet background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the violet-500 color with 0.2 opacity on the white background underneath. */
+  --intergalactic-tag-primary-violet-normal: #F4E3FF;
+  /* Violet background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the violet-500 color with 0.3 opacity on the white background underneath. */
+  --intergalactic-tag-primary-violet-hover-active: #EFD5FF;
+  /* Yellow background color for the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the yellow-500 color with 0.2 opacity on the white background underneath. */
+  --intergalactic-tag-primary-yellow-normal: #FEE6D1;
+  /* Yellow background color for the hover and active states of the primary tag. It’s created using a CSS filter with a brightness of 150%, applied to the yellow-500 color with 0.3 opacity on the white background underneath. */
+  --intergalactic-tag-primary-yellow-hover-active: #FEDAB9;
+  /* Primary white tag. */
+  --intergalactic-tag-primary-white-normal: rgba(255, 255, 255, 0.15);
+  /* Hover and active (selected) state of the primary white tag. */
+  --intergalactic-tag-primary-white-hover-active: rgba(255, 255, 255, 0.3);
+  /* Gray text for the primary gray tag. */
+  --intergalactic-tag-primary-gray-text: #6c6e79;
+  /* Blue text for the primary blue tag. */
+  --intergalactic-tag-primary-blue-text: #006dca;
+  /* Green text for the primary green tag. */
+  --intergalactic-tag-primary-green-text: #007c65;
+  /* Orange text for the primary orange tag. */
+  --intergalactic-tag-primary-orange-text: #c33909;
+  /* Red text for the primary red tag. */
+  --intergalactic-tag-primary-red-text: #d1002f;
+  /* Violet text for the primary violet tag. */
+  --intergalactic-tag-primary-violet-text: #8649e1;
+  /* Yellow text for the primary yellow tag. */
+  --intergalactic-tag-primary-yellow-text: #a75800;
+  /* White text for the primary white tag. */
+  --intergalactic-tag-primary-white-text: #ffffff;
+  /* Background color for the default secondary tag. */
+  --intergalactic-tag-secondary-normal: #ffffff;
+  /* Hover and active (selected) states of the background color for the default secondary tag. */
+  --intergalactic-tag-secondary-hover-active: #f4f5f9;
+  /* White secondary tag. */
+  --intergalactic-tag-secondary-white-normal: rgba(255, 255, 255, 0);
+  /* Active state of the secondary white tag. */
+  --intergalactic-tag-secondary-white-hover-active: rgba(255, 255, 255, 0.1);
+  /* Gray text for the default secondary tag. */
+  --intergalactic-tag-secondary-gray-text: #6c6e79;
+  /* White text for the secondary white tag. */
+  --intergalactic-tag-secondary-white-text: #ffffff;
+  /* 1 color in the default list of colors for charts. */
+  --intergalactic-chart-palette-order-1: #2bb3ff;
+  /* 2 color in the default list of colors for charts. */
+  --intergalactic-chart-palette-order-2: #59ddaa;
+  /* 3 color in the default list of colors for charts. */
+  --intergalactic-chart-palette-order-3: #ff642d;
+  /* 4 color in the default list of colors for charts. */
+  --intergalactic-chart-palette-order-4: #f67cf2;
+  /* 5 color in the default list of colors for charts. */
+  --intergalactic-chart-palette-order-5: #fdc23c;
+  /* 6 color in the default list of colors for charts. */
+  --intergalactic-chart-palette-order-6: #ab6cfe;
+  /* 7 color in the default list of colors for charts. */
+  --intergalactic-chart-palette-order-7: #ff8786;
+  /* 8 color in the default list of colors for charts. */
+  --intergalactic-chart-palette-order-8: #9bd85d;
+  /* 9 color in the default list of colors for charts. */
+  --intergalactic-chart-palette-order-9: #008ff8;
+  /* 10 color in the default list of colors for charts. */
+  --intergalactic-chart-palette-order-10: #00c192;
+  /* 11 color in the default list of colors for charts. */
+  --intergalactic-chart-palette-order-11: #ffb26e;
+  /* 12 color in the default list of colors for charts. */
+  --intergalactic-chart-palette-order-12: #e14adf;
+  /* 13 color in the default list of colors for charts. */
+  --intergalactic-chart-palette-order-13: #ef9800;
+  /* 14 color in the default list of colors for charts. */
+  --intergalactic-chart-palette-order-14: #dcb8ff;
+  /* 15 color in the default list of colors for charts. */
+  --intergalactic-chart-palette-order-15: #ff4953;
+  /* 16 color in the default list of colors for charts. */
+  --intergalactic-chart-palette-order-16: #66c030;
+  /* 17 color in the default list of colors for charts. */
+  --intergalactic-chart-palette-order-17: #8ecdff;
+  /* 18 color in the default list of colors for charts. */
+  --intergalactic-chart-palette-order-18: #009f81;
+  /* 19 color in the default list of colors for charts. */
+  --intergalactic-chart-palette-order-19: #ff8c43;
+  /* 20 color in the default list of colors for charts. */
+  --intergalactic-chart-palette-order-20: #ffa9fa;
+  /* 21 color in the default list of colors for charts. */
+  --intergalactic-chart-palette-order-21: #d87900;
+  /* 22 color in the default list of colors for charts. */
+  --intergalactic-chart-palette-order-22: #c695ff;
+  /* 23 color in the default list of colors for charts. */
+  --intergalactic-chart-palette-order-23: #ffaeb5;
+  /* 24 color in the default list of colors for charts. */
+  --intergalactic-chart-palette-order-24: #35a21e;
+  /* Use it to show total value. */
+  --intergalactic-chart-palette-order-total-amount: #8a8e9b;
+  /* Use it to indicate voids, missing or some other data. */
+  --intergalactic-chart-palette-order-other-data: #c4c7cf;
+  /* Use it to show null value. */
+  --intergalactic-chart-palette-order-null: #e0e1e9;
+  /* Default chart grid line. */
+  --intergalactic-chart-grid-line: #e0e1e9;
+  /* X-axis line on the chart grid. */
+  --intergalactic-chart-grid-x-axis: #c4c7cf;
+  /* Accent line for the hover state on the chart grid. */
+  --intergalactic-chart-grid-y-accent-hover-line: #a9abb6;
+  /* Text label on the chart grid. */
+  --intergalactic-chart-grid-text-label: #6c6e79;
+  /* Background color for the hover state of a bar on the chart grid. */
+  --intergalactic-chart-grid-bar-chart-hover: rgba(196, 199, 207, 0.3);
+  /* Default background color of a bar in the BarChart. */
+  --intergalactic-chart-grid-bar-chart-base-bg: #e0e1e9;
+  /* Use for highlighting the period on the chart grid. */
+  --intergalactic-chart-grid-period-bg: rgba(196, 199, 207, 0.2);
+  /* Border of the dot that appears on the chart grid when hovered over. */
+  --intergalactic-chart-grid-border: #ffffff;
+  /* Background color for the clickable date on the X-axis of the chart grid. */
+  --intergalactic-chart-x-axis-accent-period-active: #6c6e79;
+  /* Background color for the "Start tracking" date on the X-axis of the chart grid. */
+  --intergalactic-chart-x-axis-accent-data-start-tracking: rgba(0, 159, 129, 0.2);
+  /* Should be used for more complex effects and larger scale animations (such as page transitions or moving objects on and offscreen) */
+  --intergalactic-duration-extra-slow: 500;
+  /* Should be used for more larger scale animations (such as page transitions) */
+  --intergalactic-duration-slow: 400;
+  /* Should be used for more complex effects (such as Modal) */
+  --intergalactic-duration-medium: 300;
+  /* Should be used for more complex effects (such as Dropdown or Accordion) */
+  --intergalactic-duration-fast: 200;
+  /* Should be used for simpler effects and relatively small-sized animations (such as fades or color changes) */
+  --intergalactic-duration-extra-fast: 100;
+  /* Use for small controls like Switch or Slider. */
+  --intergalactic-duration-switch: 100;
+  /* Use for components based on popper like Tooltip, Dropdown or Filter trigger. */
+  --intergalactic-duration-popper: 200;
+  /* Use for small controls like Checkbox or Radio. */
+  --intergalactic-duration-control: 200;
+  /* Use for Modal, Fullscreen Modal, Side panel or other kind of windows. */
+  --intergalactic-duration-modal: 200;
+  /* Use for Accordion. */
+  --intergalactic-duration-accordion: 200;
+  /* Use for Summary or Counter. */
+  --intergalactic-duration-counter: 200;
+}
+.dark {
+  /* Primary background of the interface which contains the main data and information. */
+  --intergalactic-bg-primary-neutral: rgba(30, 34, 49, 1);
+  /* Hover state of the primary background of the interface which contains the main data and information. */
+  --intergalactic-bg-primary-neutral-hover: rgba(54, 56, 67, 1);
+  /* Active (selected) state of the primary background of the interface which contains the main data and information. */
+  --intergalactic-bg-primary-neutral-active: rgba(54, 56, 67, 1);
+  /* Accent background of the message with regular information. */
+  --intergalactic-bg-primary-info: #008ff8;
+  /* Accent background of the message or banner with information about the successful result. */
+  --intergalactic-bg-primary-success: #009f81;
+  /* Accent background of a message or a banner with a critical information. */
+  --intergalactic-bg-primary-critical: #ff4953;
+  /* Accent background of a message or a banner with a warning information. */
+  --intergalactic-bg-primary-warning: #ff642d;
+  /* Accent background of the information you want to highlight. */
+  --intergalactic-bg-primary-highlight: #fce081;
+  /* Accent background for the advertising banners and controls. */
+  --intergalactic-bg-primary-advertising: #421983;
+  /* Accented muted background for a message with regular information. */
+  --intergalactic-bg-primary-muted: #6c6e79;
+  /* Inverted version of the primary background of the interface that contains the main data and information. */
+  --intergalactic-bg-primary-invert: #191b23;
+  /* Hover state for the inverted version of the primary background of the interface that contains the main data and information. */
+  --intergalactic-bg-primary-invert-hover: #2b2e38;
+  /* Active (selected) state for the inverted version of the primary background of the interface that contains the main data and information. */
+  --intergalactic-bg-primary-invert-active: #484a54;
+  /* Secondary background of the interface which contains the main data and information. */
+  --intergalactic-bg-secondary-neutral: rgba(45, 48, 62, 1);
+  /* Hover state of the secondary background of the interface which contains the main data and information. */
+  --intergalactic-bg-secondary-neutral-hover: #e0e1e9;
+  /* Active (selected) state of the secondary background of the interface which contains the main data and information. */
+  --intergalactic-bg-secondary-neutral-active: #c4c7cf;
+  /* Secondary background of a message with regular information. */
+  --intergalactic-bg-secondary-info: rgba(52, 68, 90, 1);
+  /* Hover state of the secondary background of a message with regular information. */
+  --intergalactic-bg-secondary-info-hover: rgba(23, 55, 83, 1);
+  /* Active (selected) state of the secondary background of a message with regular information. */
+  --intergalactic-bg-secondary-info-active: #8ecdff;
+  /* Secondary background of the message with success information you want to accent. */
+  --intergalactic-bg-secondary-success: #dbfee8;
+  /* Hover state of the secondary background of the message with success information you want to accent. */
+  --intergalactic-bg-secondary-success-hover: #9ef2c9;
+  /* Active (selected) state of the secondary background of the message with success information you want to accent. */
+  --intergalactic-bg-secondary-success-active: #59ddaa;
+  /* Secondary background of the message with critical information you want to accent. */
+  --intergalactic-bg-secondary-critical: #fff0f7;
+  /* Hover state of the secondary background of the message with critical information you want to accent. */
+  --intergalactic-bg-secondary-critical-hover: #ffd7df;
+  /* Active (selected) state of the secondary background of the message with critical information you want to accent. */
+  --intergalactic-bg-secondary-critical-active: #ffaeb5;
+  /* Secondary background of the message with warning information you want to accent. */
+  --intergalactic-bg-secondary-warning: #fff3d9;
+  /* Hover state of the secondary background of the message with warning information you want to accent. */
+  --intergalactic-bg-secondary-warning-hover: #ffdca2;
+  /* Active (selected) state of the secondary background of the message with critical information you want to accent. */
+  --intergalactic-bg-secondary-warning-active: #ffb26e;
+  /* Secondary background of the information you want to highlight. */
+  --intergalactic-bg-secondary-highlight: #fdf7c8;
+  /* Hover state of the secondary background of the information you want to highlight. */
+  --intergalactic-bg-secondary-highlight-hover: #fce081;
+  /* Active (selected) state of the secondary background of the information you want to highlight. */
+  --intergalactic-bg-secondary-highlight-active: #fdc23c;
+  /* Secondary background for the advertising message you want to accent. */
+  --intergalactic-bg-secondary-advertising: rgba(75, 49, 125, 1);
+  /* Hover state of the secondary background for the advertising message you want to accent. */
+  --intergalactic-bg-secondary-advertising-hover: #edd9ff;
+  /* Active (selected) state of the secondary background for the advertising message you want to accent. */
+  --intergalactic-bg-secondary-advertising-active: #dcb8ff;
+  /* Highlighting the search results. */
+  --intergalactic-bg-highlight-results: rgba(239, 152, 0, 0.4);
+  /* Focusing values in the input. */
+  --intergalactic-bg-highlight-focus: rgba(0, 143, 248, 0.2);
+  /* Primary text. */
+  --intergalactic-text-primary: #f4f5f9;
+  /* Secondary text. */
+  --intergalactic-text-secondary: #a9abb6;
+  /* Placeholder text only. */
+  --intergalactic-text-placeholder: #8a8e9b;
+  /* Text associated with success states and data. */
+  --intergalactic-text-success: rgba(68, 209, 164, 1);
+  /* Hover and active states for the text associated with success states and data. */
+  --intergalactic-text-success-hover-active: #055345;
+  /* Text associated with critical states and data. */
+  --intergalactic-text-critical: rgba(255, 155, 148, 1);
+  /* Hover and active states for the text associated with critical states and data. */
+  --intergalactic-text-critical-hover-active: #8e0016;
+  /* Inverted version of the primary text. */
+  --intergalactic-text-primary-invert: #ffffff;
+  /* Inverted version of the secondary text. */
+  --intergalactic-text-secondary-Invert: rgba(255, 255, 255, 0.75);
+  /* Link text. */
+  --intergalactic-text-link: #8ecdff;
+  /* Hover and active states for the link text. */
+  --intergalactic-text-link-hover-active: #2bb3ff;
+  /* Inverted version of the link text. Use on dark background only. */
+  --intergalactic-text-link-invert: #8ecdff;
+  /* Hover and active states of the inverted version of the link text. Use on dark background only. */
+  --intergalactic-text-link-invert-hover: #2bb3ff;
+  /* Visited link text. */
+  --intergalactic-text-link-visited: #8649e1;
+  /* Hint link text. */
+  --intergalactic-text-hint: #a9abb6;
+  /* Hover and active states of the hint link text. */
+  --intergalactic-text-hint-hover-active: #e0e1e9;
+  /* Inverted version of the hint link text. */
+  --intergalactic-text-hint-invert: #c4c7cf;
+  /* Hover and active states of the inverted version of the hint link text. */
+  --intergalactic-text-hint-invert-hover-active: #a9abb6;
+  /* Secondary text. Use with font-size ≥20px. */
+  --intergalactic-text-large-secondary: #a9abb6;
+  /* Link text with font-size ≥20px. */
+  --intergalactic-text-large-info: #008ff8;
+  /* Hover and active states of the link text with font-size ≥20px. */
+  --intergalactic-text-large-info-hover-active: #006dca;
+  /* Text with font-size ≥20px associated with success states and data. */
+  --intergalactic-text-large-success: #009f81;
+  /* Hover and active states of the text with font-size ≥20px associated with success states and data. */
+  --intergalactic-text-large-success-hover-active: #007c65;
+  /* Text with font-size ≥20px associated with critical states and data. */
+  --intergalactic-text-large-critical: #ff4953;
+  /* Hover and active states of the text with font-size ≥20px associated with critical states and data. */
+  --intergalactic-text-large-critical-hover-active: #d1002f;
+  --intergalactic-text-advertising: #421983;
+  /* Neutral primary border. */
+  --intergalactic-border-primary: #484a54;
+  /* Subtle secondary border. */
+  --intergalactic-border-secondary: #484a54;
+  /* Subtle secondary border in the informational message. */
+  --intergalactic-border-info: #8ecdff;
+  /* Active border in focused input filed. */
+  --intergalactic-border-info-active: #c4e5fe;
+  /* Subtle secondary border in the successful message and input field. */
+  --intergalactic-border-success: #59ddaa;
+  /* Active border in the focused input field with valid state. */
+  --intergalactic-border-success-active: #dbfee8;
+  /* Subtle secondary border in the critical message and invalid input field. */
+  --intergalactic-border-critical: #ffaeb5;
+  /* Active border in the focused input field with invalid state, and active state of the other components with invalid state. */
+  --intergalactic-border-critical-active: rgba(253, 182, 177, 1);
+  /* Subtle secondary border in the warning message. */
+  --intergalactic-border-warning: #ffb26e;
+  /* Active border in components with warning intention. */
+  --intergalactic-border-warning-active: #c33909;
+  /* Inverted version of the neutral primary border. Use it for borders on the dark or color background. */
+  --intergalactic-border-primary-invert: #ffffff;
+  /* Inverted version of the neutral secondary border. Use it for borders on the dark or color background. */
+  --intergalactic-border-secondary-invert: rgba(255, 255, 255, 0.3);
+  /* Border of the Tooltip with dark theme. */
+  --intergalactic-border-tooltip-invert: #6c6e79;
+  /* Accent borders in the Table: for the accordion in the table and for the header of the secondary table. */
+  --intergalactic-border-table-accent: #a9abb6;
+  /* Subtle background of the Switch control. */
+  --intergalactic-control-switch-bg: #a9abb6;
+  /* Background of the regular primary control. */
+  --intergalactic-control-primary-info: #008ff8;
+  /* Hover state of the regular primary control. */
+  --intergalactic-control-primary-info-hover: #006dca;
+  /* Active (selected) state of the regular primary control. */
+  --intergalactic-control-primary-info-active: #044792;
+  /* Background of the primary control with successful theme. */
+  --intergalactic-control-primary-success: #009f81;
+  /* Hover state of the primary control with successful theme. */
+  --intergalactic-control-primary-success-hover: #007c65;
+  /* Active (selected) state of the primary control with successful theme. */
+  --intergalactic-control-primary-success-active: #055345;
+  /* Background of the primary control with danger theme. */
+  --intergalactic-control-primary-critical: #ff4953;
+  /* Hover state of the primary control with danger theme. */
+  --intergalactic-control-primary-critical-hover: #d1002f;
+  /* Active (selected) state of the primary control with danger theme. */
+  --intergalactic-control-primary-critical-active: #8e0016;
+  /* Background of the advertising primary control. */
+  --intergalactic-control-primary-advertising-active: #8649e1;
+  /* Hover state of the advertising primary control. */
+  --intergalactic-control-primary-advertising: #5925ab;
+  /* Active (selected) state of the advertising primary control. */
+  --intergalactic-control-primary-advertising-hover: #421983;
+  /* Inverted background of the primary control. */
+  --intergalactic-control-primary-invert: rgba(30, 34, 49, 1);
+  /* Hover state of the inverted primary control. */
+  --intergalactic-control-primary-invert-hover: rgba(43, 46, 57, 1);
+  /* Active (selected) state of the inverted primary control. */
+  --intergalactic-control-primary-invert-active: rgba(43, 46, 57, 1);
+  --intergalactic-control-primary-brand: #ab6cfe;
+  --intergalactic-control-primary-brand-hover: #8649e1;
+  --intergalactic-control-primary-brand-active: #5925ab;
+  /* Background of the regular secondary control. */
+  --intergalactic-control-secondary-neutral: rgba(138, 142, 155, 0.1);
+  /* Hover state of the regular secondary control. */
+  --intergalactic-control-secondary-neutral-hover: rgba(138, 142, 155, 0.2);
+  /* Active (selected) state of the regular secondary control. */
+  --intergalactic-control-secondary-neutral-active: rgba(138, 142, 155, 0.3);
+  /* Background of the accent secondary control. */
+  --intergalactic-control-secondary-info: rgba(0, 143, 248, 0.1);
+  /* Hover state of the accent secondary control. */
+  --intergalactic-control-secondary-info-hover: rgba(0, 143, 248, 0.2);
+  /* Active (selected) state of the accent secondary control. */
+  --intergalactic-control-secondary-info-active: rgba(0, 143, 248, 0.3);
+  /* Background of the inverted version of the secondary control. */
+  --intergalactic-control-secondary-invert: rgba(255, 255, 255, 0.05);
+  /* Hover state of the inverted version of the secondary control. */
+  --intergalactic-control-secondary-invert-hover: rgba(255, 255, 255, 0.1);
+  /* Active (selected) state of the inverted version of the secondary control. */
+  --intergalactic-control-secondary-invert-active: rgba(255, 255, 255, 0.3);
+  /* Background of the regular tertiary control. */
+  --intergalactic-control-tertiary-neutral: rgba(138, 142, 155, 0);
+  /* Hover state of the regular tertiary control. */
+  --intergalactic-control-tertiary-neutral-hover: rgba(138, 142, 155, 0.2);
+  /* Active (selected) state of the regular tertiary control. */
+  --intergalactic-control-tertiary-neutral-active: rgba(138, 142, 155, 0.3);
+  /* Background of the accent and link-lookalike tertiary control. */
+  --intergalactic-control-tertiary-info: rgba(0, 143, 248, 0);
+  /* Hover state of the accent and link-lookalike tertiary control. */
+  --intergalactic-control-tertiary-info-hover: rgba(0, 143, 248, 0.2);
+  /* Active (selected) state of the accent and link-lookalike tertiary control. */
+  --intergalactic-control-tertiary-info-active: rgba(0, 143, 248, 0.3);
+  /* Background of the inverted version of the tertiary control. */
+  --intergalactic-control-tertiary-invert: rgba(255, 255, 255, 0);
+  /* Hover state of the inverted version of the tertiary control. */
+  --intergalactic-control-tertiary-invert-hover: rgba(255, 255, 255, 0.1);
+  /* Active (selected) state of the inverted version of the tertiary control. */
+  --intergalactic-control-tertiary-invert-active: rgba(255, 255, 255, 0.3);
+  /* Primary neutral icon. */
+  --intergalactic-icon-primary-neutral: #a9abb6;
+  /* Hover and active (selected) states of the primary neutral icon. */
+  --intergalactic-icon-primary-neutral-hover-active: #c4c7cf;
+  /* Primary link-lookalike icon. */
+  --intergalactic-icon-primary-info: #006dca;
+  /* Hover and active (selected) states of the primary link-lookalike icon. */
+  --intergalactic-icon-primary-info-hover-active: #044792;
+  /* Primary successful icon. */
+  --intergalactic-icon-primary-success: #009f81;
+  /* Hover and active (selected) states of the primary successful icon. */
+  --intergalactic-icon-primary-success-hover-active: #007c65;
+  /* Primary critical icon. */
+  --intergalactic-icon-primary-critical: #ff4953;
+  /* Hover and active (selected) states of the primary critical icon. */
+  --intergalactic-icon-primary-critical-hover-active: #d1002f;
+  /* Primary warning icon. */
+  --intergalactic-icon-primary-warning: #ff642d;
+  /* Hover and active (selected) states of the primary warning icon. */
+  --intergalactic-icon-primary-warning-hover-active: #c33909;
+  /* Inverted version of the primary icon. */
+  --intergalactic-icon-primary-invert: #ffffff;
+  /* Hover and active (selected) states of the inverted version of the primary icon. */
+  --intergalactic-icon-primary-invert-hover-active: #e0e1e9;
+  /* Secondary neutral icon. */
+  --intergalactic-icon-secondary-neutral: #c4c7cf;
+  /* Hover and active (selected) states of the secondary neutral icon. */
+  --intergalactic-icon-secondary-neutral-hover-active: #e0e1e9;
+  /* Secondary link-lookalike icon. */
+  --intergalactic-icon-secondary-info: #2bb3ff;
+  /* Hover and active (selected) states of the secondary link-lookalike icon. */
+  --intergalactic-icon-secondary-info-hover-active: #008ff8;
+  /* Secondary successful icon. */
+  --intergalactic-icon-secondary-success: #00c192;
+  /* Hover and active (selected) states of the secondary successful icon. */
+  --intergalactic-icon-secondary-success-hover-active: #009f81;
+  /* Secondary critical icon. */
+  --intergalactic-icon-secondary-critical: #ff8786;
+  /* Hover and active (selected) states of the secondary critical icon. */
+  --intergalactic-icon-secondary-critical-hover-active: #ff4953;
+  /* Secondary warning icon. */
+  --intergalactic-icon-secondary-warning: #ff8c43;
+  /* Hover and active (selected) states of the secondary warning icon. */
+  --intergalactic-icon-secondary-warning-hover-active: #ff642d;
+  /* Color for the default non-interactive icon. */
+  --intergalactic-icon-non-interactive: #f4f5f9;
+  /* Default date-picker cell background. */
+  --intergalactic-date-picker-cell: #ffffff;
+  /* Color for marking the cell with the current date, month or year in the date-picker. */
+  --intergalactic-date-picker-cell-current: #c4c7cf;
+  /* Hover state of the default date-picker cell background. */
+  --intergalactic-date-picker-cell-hover: #e0e1e9;
+  /* Background for the cell which is included in the date range in the date-picker. */
+  --intergalactic-date-picker-cell-range: #c4e5fe;
+  /* Hover state of the background for the cell which is included in the date range in the date-picker. */
+  --intergalactic-date-picker-cell-range-hover: #8ecdff;
+  /* Active (selected) date-picker cell background. */
+  --intergalactic-date-picker-cell-active: #2bb3ff;
+  /* Hover for the active (selected) date-picker cell background. */
+  --intergalactic-date-picker-cell-active-hover: #008ff8;
+  --intergalactic-date-picker-cell-current-invert: rgba(255, 255, 255, 0.3);
+  /* Default background color for the list item in the dropdown-menu. */
+  --intergalactic-dropdown-menu-item: rgba(54, 56, 67, 1);
+  /* Hover state of the default background color for the list item in the dropdown-menu. */
+  --intergalactic-dropdown-menu-item-hover: rgba(79, 82, 93, 1);
+  /* Active (selected) state of the default background color for the list item in the dropdown-menu. */
+  --intergalactic-dropdown-menu-item-selected: rgba(66, 103, 123, 1);
+  /* Hover state for the selected state of the default background color for the list item in the dropdown-menu. */
+  --intergalactic-dropdown-menu-item-selected-hover: rgba(75, 117, 139, 1);
+  /* Color of the outer border of the FeaturePopover.Spot. */
+  --intergalactic-feature-popover-dot-outer-border: rgba(252, 224, 129, 0.3);
+  /* Background color of the ProgressBar. */
+  --intergalactic-progress-bar-bg: #484a54;
+  /* Hover state of the background color of the ProgressBar. */
+  --intergalactic-progress-bar-bg-hover: #c4c7cf;
+  /* Inverted version of the background color of the ProgressBar. */
+  --intergalactic-progress-bar-bg-invert: rgba(255, 255, 255, 0.2);
+  /* Hover state for the inverted version of the background color of the ProgressBar. */
+  --intergalactic-progress-bar-bg-invert-hover: rgba(255, 255, 255, 0.4);
+  /* Value color of the ProgressBar. */
+  --intergalactic-progress-bar-value: #009f81;
+  /* Value with gradient for the ProgressBar. */
+  --intergalactic-progress-bar-value-gradient: linear-gradient(-45deg, rgba(0, 159, 129, 0.9) 25%, rgba(0, 159, 129, 1) 0%, rgba(0, 159, 129, 1) 50%, rgba(0, 159, 129, 0.9) 0%, rgba(0, 159, 129, 0.9) 75%, rgba(0, 159, 129, 1) 0%);
+  /* Null value gradient for the ProgressBar. */
+  --intergalactic-progress-bar-pattern-gradient: linear-gradient(-45deg, rgba(224, 225, 233, 0.9) 25%, rgba(224, 225, 233, 1) 0%, rgba(224, 225, 233, 1) 50%, rgba(224, 225, 233, 0.9) 0%, rgba(224, 225, 233, 0.9) 75%, rgba(224, 225, 233, 1) 0%);
+  /* Base value background for the ProgressBar. It is used to create gradients for the values. */
+  --intergalactic-progress-bar-value-bg: #000000;
+  /* Default color for the Skeleton. */
+  --intergalactic-skeleton-bg: #484a54;
+  /* Inverted version of the default color for the Skeleton. */
+  --intergalactic-skeleton-bg-invert: rgba(255, 255, 255, 0.3);
+  /* Background of the header cell in the primary Table. */
+  --intergalactic-table-th-primary-cell: rgba(62, 64, 75, 1);
+  /* Background of the hovered header cell in the primary Table. */
+  --intergalactic-table-th-primary-cell-hover: rgba(83, 85, 97, 1);
+  /* Background of the active header cell in the primary Table. */
+  --intergalactic-table-th-primary-cell-active: rgba(108, 110, 121, 1);
+  /* Background of the header cell in the secondary Table. */
+  --intergalactic-table-th-secondary-cell: rgba(62, 64, 75, 1);
+  --intergalactic-table-th-gradient: linear-gradient(to right, rgba(224, 225, 233, 0) 0%, rgba(224, 225, 233, 1) 100%);
+  /* Background of the default cell in the Table. */
+  --intergalactic-table-td-cell: #191b23;
+  /* Background of the default hovered cell in the Table. */
+  --intergalactic-table-td-cell-hover: #2b2e38;
+  /* Background of the default active cell in the Table. */
+  --intergalactic-table-td-cell-active: #2b2e38;
+  /* Background of the unread cell in the Table. */
+  --intergalactic-table-td-cell-unread: #f4f5f9;
+  /* Background of the cell used for Accordion or actions row, in the Table. */
+  --intergalactic-table-td-cell-actions-accordion: rgba(54, 56, 67, 1);
+  /* Background of the selected cell in the Table. */
+  --intergalactic-table-td-cell-selected: rgba(43, 54, 69, 1);
+  /* Background of the hovered selected cell in the Table. */
+  --intergalactic-table-td-cell-selected-hover: #c4e5fe;
+  /* Background of the active selected cell in the Table. */
+  --intergalactic-table-td-cell-selected-active: #c4e5fe;
+  /* Background of the cell with new information in the Table. */
+  --intergalactic-table-td-cell-new: #dbfee8;
+  /* Background of the hovered cell with new information in the Table. */
+  --intergalactic-table-td-cell-new-hover: #9ef2c9;
+  /* Background of the active cell with new information in the Table. */
+  --intergalactic-table-td-cell-new-active: #9ef2c9;
+  /* Background of the cell with critical information in the Table. */
+  --intergalactic-table-td-cell-critical: #fff0f7;
+  /* Background of the hovered cell with critical information in the Table. */
+  --intergalactic-table-td-cell-critical-hover: #ffd7df;
+  /* Background of the active cell with critical information in the Table. */
+  --intergalactic-table-td-cell-critical-active: #ffd7df;
+  /* Background of the cell with warning information in the Table. */
+  --intergalactic-table-td-cell-warning: #fff3d9;
+  /* Background of the hovered cell with warning information in the Table. */
+  --intergalactic-table-td-cell-warning-hover: #ffdca2;
+  /* Background of the active cell with warning information in the Table. */
+  --intergalactic-table-td-cell-warning-active: #ffdca2;
+  /* Primary brand color. */
+  --intergalactic-brand-primary: #dcb8ff;
+  /* Secondary brand color. */
+  --intergalactic-brand-secondary: #421983;
+  /* Pinterest brand color. */
+  --intergalactic-brand-pinterest: #bd081c;
+  /* Instagram brand color. */
+  --intergalactic-brand-instagram: #e4405f;
+  /* Youtube brand color. */
+  --intergalactic-brand-youtube: #ff0000;
+  /* Facebook brand color. */
+  --intergalactic-brand-facebook: #1877F2;
+  /* LinkedIn brand color. */
+  --intergalactic-brand-linkedIn: #0A66C2;
+  /* Twitter brand color. */
+  --intergalactic-brand-twitter: #1D9BF0;
+  /* Google brand color for the link. */
+  --intergalactic-brand-google-blue: #1a0dab;
+  /* Google green brand color for the link. */
+  --intergalactic-brand-google-green: #016723;
+  /* Google My Business brand color. */
+  --intergalactic-brand-google-my-business: #1a73e8;
+  /* Default shadow of the Card. */
+  --intergalactic-box-shadow-card: 0px 0px 1px 0px rgba(25, 27, 35, 0.16), 0px 1px 2px 0px rgba(25, 27, 35, 0.12);
+  /* Hover state for the shadow of the Card with hover state. */
+  --intergalactic-box-shadow-card-hover: 3px 3px 30px 0px rgba(25, 27, 35, 0.15);
+  /* Shadow for show that element are being drag-and-drop. */
+  --intergalactic-box-shadow-dnd: 0px 0px 1px 0px rgba(25, 27, 35, 0.16), 0px 12px 40px 0px rgba(25, 27, 35, 0.16);
+  /* Default shadow if the Modal window. */
+  --intergalactic-box-shadow-modal: 0px 3px 8px 0px rgba(25, 27, 35, 0.2);
+  /* Default shadow of all Poppers, Dropdowns and Tooltips. */
+  --intergalactic-box-shadow-popper: 0px 1px 15px 0px rgba(25, 27, 35, 0.6);
+  /* Default keyboard focus styles. */
+  --intergalactic-keyboard-focus: 0px 0px 0px 3px rgba(43, 179, 255, 0.8);
+  /* Keyboard focus styles for elements with invalid state. */
+  --intergalactic-keyboard-focus-invalid: 0px 0px 0px 3px rgba(246, 58, 75, 0.8);
+  /* Keyboard focus styles for elements with valid state. */
+  --intergalactic-keyboard-focus-valid: 0px 0px 0px 3px rgba(68, 209, 164, 0.8);
+  --intergalactic-base: Inter;
+  /* Use with font-size-800. */
+  --intergalactic-lh-800: 117%;
+  /* Use with font-size-700. */
+  --intergalactic-lh-700: 110%;
+  /* Use with font-size-600. */
+  --intergalactic-lh-600: 125%;
+  /* Use with font-size-500. */
+  --intergalactic-lh-500: 117%;
+  /* Use with font-size-400. */
+  --intergalactic-lh-400: 120%;
+  /* Use with font-size-300. */
+  --intergalactic-lh-300: 150%;
+  /* Use with font-size-200. */
+  --intergalactic-lh-200: 142%;
+  /* Use with font-size-100. */
+  --intergalactic-lh-100: 133%;
+  --intergalactic-semi-bold: 600;
+  --intergalactic-bold: 700;
+  --intergalactic-regular: 400;
+  --intergalactic-medium: 500;
+  /* Use only for text in Badge component. */
+  --intergalactic-fs-50: 10px;
+  /* Use with caution for text in additional messages. Always check its contrast and readability. */
+  --intergalactic-fs-100: 12px;
+  /* Use for text in regular messages. */
+  --intergalactic-fs-200: 14px;
+  /* Use for H6 with bold font-weight, and for text in regular messages. */
+  --intergalactic-fs-300: 16px;
+  /* Use for H5 and subtitles. */
+  --intergalactic-fs-400: 20px;
+  /* Use for H4. */
+  --intergalactic-fs-500: 24px;
+  /* Use for H3. */
+  --intergalactic-fs-600: 32px;
+  /* Use for H2. */
+  --intergalactic-fs-700: 36px;
+  /* Use for H1. */
+  --intergalactic-fs-800: 48px;
+  --intergalactic-compact: 0.3;
+  /* Base denominator of the design system. */
+  --intergalactic-scale-indent: 4px;
+  /* Default size of the controls. */
+  --intergalactic-form-control-m: 28px;
+  /* Large size of the controls. */
+  --intergalactic-form-control-l: 40px;
+  /* 2px */
+  --intergalactic-spacing-05x: 2px;
+  /* 4px */
+  --intergalactic-spacing-1x: 4px;
+  /* 8px */
+  --intergalactic-spacing-2x: 8px;
+  /* 12px */
+  --intergalactic-spacing-3x: 12px;
+  /* 16px */
+  --intergalactic-spacing-4x: 16px;
+  /* 20px */
+  --intergalactic-spacing-5x: 20px;
+  /* 24px */
+  --intergalactic-spacing-6x: 24px;
+  /* 32px */
+  --intergalactic-spacing-8x: 32px;
+  /* 40px */
+  --intergalactic-spacing-10x: 40px;
+  /* 56px */
+  --intergalactic-spacing-14x: 56px;
+  /* 80px */
+  --intergalactic-spacing-20x: 80px;
+  /* 96px */
+  --intergalactic-spacing-24x: 96px;
+  /* 120px */
+  --intergalactic-spacing-30x: 120px;
+  --intergalactic-rounded-small: 4px;
+  --intergalactic-rounded-medium: 6px;
+  --intergalactic-rounded-large: 12px;
+  --intergalactic-rounded-extra-large: 24px;
+  /* Use for rounding addons and small controls like Checkbox. */
+  --intergalactic-addon-rounded: 4px;
+  /* Use for rounding Badge. */
+  --intergalactic-badge-rounded: 6px;
+  /* Use for rounding Counter. */
+  --intergalactic-counter-rounded: 12px;
+  /* Use for rounding Tag. */
+  --intergalactic-tag-rounded: 24px;
+  /* Use for rounding Switch. */
+  --intergalactic-switch-rounded: 24px;
+  /* Use for rounding all form controls: Button, FilterTrigger, Input, Textarea, Pills, etc. */
+  --intergalactic-control-rounded: 6px;
+  /* Use for rounding bars: ProgressBar, SliderBar, etc. */
+  --intergalactic-progress-bar-rounded: 6px;
+  /* Use for rounding surfaces like Card, blocks, widgets, Notice, etc. */
+  --intergalactic-surface-rounded: 6px;
+  /* Use for rounding all kinds of poppers and dropdowns. */
+  --intergalactic-popper-rounded: 6px;
+  /* Use for rounding all kinds of big modal dialogs (e.g., Modal, Wizard). */
+  --intergalactic-modal-rounded: 12px;
+  /* Use for the disabled state of all kind of the controls and elements. */
+  --intergalactic-disabled-opacity: 0.3;
+  /* Extra small screens (small phones). */
+  --intergalactic-screen-extra-small: 320px;
+  /* Small screens (phones and small tablets). */
+  --intergalactic-screen-small: 768px;
+  /* Medium screens (tablets and small laptops). */
+  --intergalactic-screen-medium: 1200px;
+  /* Large screens (tablets and laptops). */
+  --intergalactic-screen-large: 1920px;
+  /* Use for cover the content under the modal dialogs. */
+  --intergalactic-overlay-primary: rgba(25, 27, 35, 0.7);
+  /* Use for the secondary modal dialogs that were opened upon the other modal dialogs. */
+  --intergalactic-overlay-secondary: rgba(25, 27, 35, 0.4);
+  /* Use as a primary cover of the content under the messages about limitations. */
+  --intergalactic-overlay-limitation-primary: #f4f5f9;
+  /* Use as a secondary cover of the content under the messages about limitations. */
+  --intergalactic-overlay-limitation-secondary: rgba(255, 255, 255, 0.85);
+  --intergalactic-z-index-deep: -999;
+  --intergalactic-z-index-overlay: 500;
+  --intergalactic-z-index-modal: 600;
+  --intergalactic-z-index-popper: 700;
+  --intergalactic-z-index-dropdown: 750;
+  --intergalactic-z-index-tooltip: 800;
+  --intergalactic-z-index-notice-bubble: 999;
+  /* Default Tooltip background. */
+  --intergalactic-tooltip-default: #484a54;
+  /* Warning Tooltip background. */
+  --intergalactic-tooltip-warning: rgba(160, 13, 42, 1);
+  /* Inverted version of the default Tooltip background. */
+  --intergalactic-tooltip-invert: #191b23;
+  /* Neutral border of the components that are combined with neighbor-location property. */
+  --intergalactic-neighbor-location-neutral: rgba(255, 255, 255, 0.5);
+  /* Inverted border of the components that are combined with neighbor-location property. */
+  --intergalactic-neighbor-location-invert: rgba(0, 0, 0, 0.5);
+  /* Left-to-right fade shadow for the ScrollArea. */
+  --intergalactic-scroll-area-shadow-left: linear-gradient(to right, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%);
+  /* Right-to-left fade shadow for the ScrollArea. */
+  --intergalactic-scroll-area-shadow-right: linear-gradient(to left, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%);
+  /* Top-to-bottom fade shadow for the ScrollArea. */
+  --intergalactic-scroll-area-shadow-top: linear-gradient(to bottom, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%);
+  /* Bottom-to-top fade shadow for the ScrollArea. */
+  --intergalactic-scroll-area-shadow-bottom: linear-gradient(to top, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%);
+  /* Left-to-right fade shadow for the ScrollArea inside the DropdownMenu. */
+  --intergalactic-scroll-area-dropdown-menu-left: linear-gradient(to right, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%);
+  /* Right-to-left fade shadow for the ScrollArea inside the DropdownMenu. */
+  --intergalactic-scroll-area-dropdown-menu-right: linear-gradient(to left, rgba(255, 255, 255, 1) 34.38%, rgba(255, 255, 255, 0) 100%);
+  /* Bottom-to-top fade shadow for the ScrollArea inside the DropdownMenu. */
+  --intergalactic-scroll-area-dropdown-menu-bottom: linear-gradient(to top, rgba(43, 46, 56, 1) 34.38%, rgba(54, 56, 67, 0) 100%);
+  /* Top-to-bottom fade shadow for the ScrollArea inside the DropdownMenu. */
+  --intergalactic-scroll-area-dropdown-menu-top: linear-gradient(to bottom, rgba(43, 46, 56, 1) 34.38%, rgba(54, 56, 67, 0) 100%);
+  /* Background color for ScrollBar. */
+  --intergalactic-scroll-bar-background: rgba(25, 27, 35, 0.3);
+  /* Primary gray tag. */
+  --intergalactic-tag-primary-gray-normal: rgba(69, 70, 81, 1);
+  /* Hover and active (selected) state of the primary gray tag. */
+  --intergalactic-tag-primary-gray-hover-active: #e0e1e9;
+  /* Primary blue tag. */
+  --intergalactic-tag-primary-blue-normal: rgba(7, 77, 141, 1);
+  /* Hover and active (selected) state of the primary blue tag. */
+  --intergalactic-tag-primary-blue-hover-active: #c4e5fe;
+  /* Primary green tag. */
+  --intergalactic-tag-primary-green-normal: rgba(9, 99, 82, 1);
+  /* Hover and active (selected) state of the primary green tag. */
+  --intergalactic-tag-primary-green-hover-active: #9ef2c9;
+  /* Primary orange tag. */
+  --intergalactic-tag-primary-orange-normal: rgba(156, 49, 11, 1);
+  /* Hover and active (selected) state of the primary orange tag. */
+  --intergalactic-tag-primary-orange-hover-active: #ffdca2;
+  /* Primary red tag. */
+  --intergalactic-tag-primary-red-normal: rgba(160, 13, 42, 1);
+  /* Hover and active (selected) state of the primary red tag. */
+  --intergalactic-tag-primary-red-hover-active: #ffd7df;
+  /* Primary violet tag. */
+  --intergalactic-tag-primary-violet-normal: rgba(95, 62, 157, 1);
+  /* Hover and active (selected) state of the primary violet tag. */
+  --intergalactic-tag-primary-violet-hover-active: #edd9ff;
+  /* Primary yellow tag. */
+  --intergalactic-tag-primary-yellow-normal: rgba(252, 224, 129, 0.5);
+  /* Hover and active (selected) state of the primary yellow tag. */
+  --intergalactic-tag-primary-yellow-hover-active: #fce081;
+  /* Primary white tag. */
+  --intergalactic-tag-primary-white-normal: rgba(255, 255, 255, 0.15);
+  /* Hover and active (selected) state of the primary white tag. */
+  --intergalactic-tag-primary-white-hover-active: rgba(255, 255, 255, 0.3);
+  /* Gray text for the primary gray tag. */
+  --intergalactic-tag-primary-gray-text: #f4f5f9;
+  /* Blue text for the primary blue tag. */
+  --intergalactic-tag-primary-blue-text: #e9f7ff;
+  /* Green text for the primary green tag. */
+  --intergalactic-tag-primary-green-text: #dbfee8;
+  /* Orange text for the primary orange tag. */
+  --intergalactic-tag-primary-orange-text: #fff3d9;
+  /* Red text for the primary red tag. */
+  --intergalactic-tag-primary-red-text: #fff0f7;
+  /* Violet text for the primary violet tag. */
+  --intergalactic-tag-primary-violet-text: rgba(244, 245, 249, 1);
+  /* Yellow text for the primary yellow tag. */
+  --intergalactic-tag-primary-yellow-text: #a75800;
+  /* White text for the primary white tag. */
+  --intergalactic-tag-primary-white-text: #ffffff;
+  /* Background color for the default secondary tag. */
+  --intergalactic-tag-secondary-normal: #ffffff;
+  /* Hover and active (selected) states of the background color for the default secondary tag. */
+  --intergalactic-tag-secondary-hover-active: #f4f5f9;
+  /* White secondary tag. */
+  --intergalactic-tag-secondary-white-normal: rgba(255, 255, 255, 0);
+  /* Active state of the secondary white tag. */
+  --intergalactic-tag-secondary-white-hover-active: rgba(255, 255, 255, 0.1);
+  /* Gray text for the default secondary tag. */
+  --intergalactic-tag-secondary-gray-text: #6c6e79;
+  /* White text for the secondary white tag. */
+  --intergalactic-tag-secondary-white-text: #ffffff;
+  /* 1 color in the default list of colors for charts. */
+  --intergalactic-chart-palette-order-1: #2bb3ff;
+  /* 2 color in the default list of colors for charts. */
+  --intergalactic-chart-palette-order-2: #59ddaa;
+  /* 3 color in the default list of colors for charts. */
+  --intergalactic-chart-palette-order-3: #ff642d;
+  /* 4 color in the default list of colors for charts. */
+  --intergalactic-chart-palette-order-4: #f67cf2;
+  /* 5 color in the default list of colors for charts. */
+  --intergalactic-chart-palette-order-5: #fdc23c;
+  /* 6 color in the default list of colors for charts. */
+  --intergalactic-chart-palette-order-6: #ab6cfe;
+  /* 7 color in the default list of colors for charts. */
+  --intergalactic-chart-palette-order-7: #ff8786;
+  /* 8 color in the default list of colors for charts. */
+  --intergalactic-chart-palette-order-8: #9bd85d;
+  /* 9 color in the default list of colors for charts. */
+  --intergalactic-chart-palette-order-9: #008ff8;
+  /* 10 color in the default list of colors for charts. */
+  --intergalactic-chart-palette-order-10: #00c192;
+  /* 11 color in the default list of colors for charts. */
+  --intergalactic-chart-palette-order-11: #ffb26e;
+  /* 12 color in the default list of colors for charts. */
+  --intergalactic-chart-palette-order-12: #e14adf;
+  /* 13 color in the default list of colors for charts. */
+  --intergalactic-chart-palette-order-13: #ef9800;
+  /* 14 color in the default list of colors for charts. */
+  --intergalactic-chart-palette-order-14: #dcb8ff;
+  /* 15 color in the default list of colors for charts. */
+  --intergalactic-chart-palette-order-15: #ff4953;
+  /* 16 color in the default list of colors for charts. */
+  --intergalactic-chart-palette-order-16: #66c030;
+  /* 17 color in the default list of colors for charts. */
+  --intergalactic-chart-palette-order-17: #8ecdff;
+  /* 18 color in the default list of colors for charts. */
+  --intergalactic-chart-palette-order-18: #009f81;
+  /* 19 color in the default list of colors for charts. */
+  --intergalactic-chart-palette-order-19: #ff8c43;
+  /* 20 color in the default list of colors for charts. */
+  --intergalactic-chart-palette-order-20: #ffa9fa;
+  /* 21 color in the default list of colors for charts. */
+  --intergalactic-chart-palette-order-21: #d87900;
+  /* 22 color in the default list of colors for charts. */
+  --intergalactic-chart-palette-order-22: #c695ff;
+  /* 23 color in the default list of colors for charts. */
+  --intergalactic-chart-palette-order-23: #ffaeb5;
+  /* 24 color in the default list of colors for charts. */
+  --intergalactic-chart-palette-order-24: #35a21e;
+  /* Use it to show total value. */
+  --intergalactic-chart-palette-order-total-amount: #8a8e9b;
+  /* Use it to indicate voids, missing or some other data. */
+  --intergalactic-chart-palette-order-other-data: #c4c7cf;
+  /* Use it to show null value. */
+  --intergalactic-chart-palette-order-null: #e0e1e9;
+  /* Default chart grid line. */
+  --intergalactic-chart-grid-line: #e0e1e9;
+  /* X-axis line on the chart grid. */
+  --intergalactic-chart-grid-x-axis: #c4c7cf;
+  /* Accent line for the hover state on the chart grid. */
+  --intergalactic-chart-grid-y-accent-hover-line: #a9abb6;
+  /* Text label on the chart grid. */
+  --intergalactic-chart-grid-text-label: #6c6e79;
+  /* Background color for the hover state of a bar on the chart grid. */
+  --intergalactic-chart-grid-bar-chart-hover: rgba(196, 199, 207, 0.3);
+  /* Default background color of a bar in the BarChart. */
+  --intergalactic-chart-grid-bar-chart-base-bg: #e0e1e9;
+  /* Use for highlighting the period on the chart grid. */
+  --intergalactic-chart-grid-period-bg: rgba(196, 199, 207, 0.2);
+  /* Border of the dot that appears on the chart grid when hovered over. */
+  --intergalactic-chart-grid-border: #ffffff;
+  /* Background color for the clickable date on the X-axis of the chart grid. */
+  --intergalactic-chart-x-axis-accent-period-active: #8a8e9b;
+  /* Background color for the "Start tracking" date on the X-axis of the chart grid. */
+  --intergalactic-chart-x-axis-accent-data-start-tracking: rgba(0, 159, 129, 0.2);
+  /* Should be used for more complex effects and larger scale animations (such as page transitions or moving objects on and offscreen) */
+  --intergalactic-duration-extra-slow: 500;
+  /* Should be used for more larger scale animations (such as page transitions) */
+  --intergalactic-duration-slow: 400;
+  /* Should be used for more complex effects (such as Modal) */
+  --intergalactic-duration-medium: 300;
+  /* Should be used for more complex effects (such as Dropdown or Accordion) */
+  --intergalactic-duration-fast: 200;
+  /* Should be used for simpler effects and relatively small-sized animations (such as fades or color changes) */
+  --intergalactic-duration-extra-fast: 100;
+  /* Use for small controls like Switch or Slider. */
+  --intergalactic-duration-switch: 100;
+  /* Use for components based on popper like Tooltip, Dropdown or Filter trigger. */
+  --intergalactic-duration-popper: 200;
+  /* Use for small controls like Checkbox or Radio. */
+  --intergalactic-duration-control: 200;
+  /* Use for Modal, Fullscreen Modal, Side panel or other kind of windows. */
+  --intergalactic-duration-modal: 200;
+  /* Use for Accordion. */
+  --intergalactic-duration-accordion: 200;
+  /* Use for Summary or Counter. */
+  --intergalactic-duration-counter: 200;
+}