intergalactic 15.88.0 → 15.89.0

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

@@ -1,1422 +0,0 @@
-: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;
-}