:root {
  --white: #ffffff;
  --black: #000000;
  --gray-50: #f4f5f9;
  --gray-100: #e0e1e9;
  --gray-200: #c4c7cf;
  --gray-300: #a9abb6;
  --gray-400: #8a8e9b;
  --gray-500: #6c6e79;
  --gray-600: #484a54;
  --gray-700: #2b2e38;
  --gray-800: #191b23;
  --blue-50: #e9f7ff;
  --blue-100: #c4e5fe;
  --blue-200: #8ecdff;
  --blue-300: #2bb3ff;
  --blue-400: #008ff8;
  --blue-500: #006dca;
  --blue-600: #044792;
  --blue-700: #002b5f;
  --blue-800: #001b3d;
  --green-50: #dbfee8;
  --green-100: #9ef2c9;
  --green-200: #59ddaa;
  --green-300: #00c192;
  --green-400: #009f81;
  --green-500: #007c65;
  --green-600: #055345;
  --green-700: #00342d;
  --green-800: #00201e;
  --salad-50: #ecfbcd;
  --salad-100: #c7ee96;
  --salad-200: #9bd85d;
  --salad-300: #66c030;
  --salad-400: #35a21e;
  --salad-500: #0a7e22;
  --salad-600: #005613;
  --salad-700: #003509;
  --salad-800: #002203;
  --orange-50: #fff3d9;
  --orange-100: #ffdca2;
  --orange-200: #ffb26e;
  --orange-300: #ff8c43;
  --orange-400: #ff642d;
  --orange-500: #c33909;
  --orange-600: #8b1500;
  --orange-700: #551200;
  --orange-800: #351000;
  --yellow-50: #fdf7c8;
  --yellow-100: #fce081;
  --yellow-200: #fdc23c;
  --yellow-300: #ef9800;
  --yellow-400: #d87900;
  --yellow-500: #a75800;
  --yellow-600: #743a00;
  --yellow-700: #462500;
  --yellow-800: #2c1600;
  --red-50: #fff0f7;
  --red-100: #ffd7df;
  --red-200: #ffaeb5;
  --red-300: #ff8786;
  --red-400: #ff4953;
  --red-500: #d1002f;
  --red-600: #8e0016;
  --red-700: #58000a;
  --red-800: #410101;
  --pink-50: #fff0ff;
  --pink-100: #ffd3ff;
  --pink-200: #ffa9fa;
  --pink-300: #f67cf2;
  --pink-400: #e14adf;
  --pink-500: #b229b9;
  --pink-600: #7d0480;
  --pink-700: #4d0050;
  --pink-800: #340439;
  --violet-50: #f9f2ff;
  --violet-100: #edd9ff;
  --violet-200: #dcb8ff;
  --violet-300: #c695ff;
  --violet-400: #ab6cfe;
  --violet-500: #8649e1;
  --violet-600: #5925ab;
  --violet-700: #421983;
  --violet-800: #220358;
  --brand-color: #ff642d;
  --pinterest: #bd081c;
  --instagram: #e4405f;
  --youtube: #ff0000;
  --facebook: #1877F2;
  --linkedIn: #0A66C2;
  --twitter: #1D9BF0;
  --google-my-business: #1a73e8;
  --google-blue: #1a0dab;
  --google-green: #016723;

  --keyboard-focus: var(--intergalactic-boxShadow-keyboard-focus);
  --keyborad-focus: var(--intergalactic-boxShadow-keyboard-focus);
  --keyboard-focus-valid: var(--intergalactic-boxShadow-keyboard-focus-valid);
  --keyboard-focus-invalid: var(--intergalactic-boxShadow-keyboard-focus-invalid);

  --rounded-s: 4px;
  --rounded-m: 6px;
  --rounded-l: 12px;

  --form-control-m: 28px;
  --form-control-l: 40px;

  --box-shadow-card: 0px 1px 2px 0px rgba(25, 27, 35, 0.12), 0px 0px 1px 0px rgba(25, 27, 35, 0.16);
  --box-shadow-hover: 3px 3px 30px 0px rgba(25, 27, 35, 0.15);
  --box-shadow-popper: 0px 1px 12px 0px rgba(25, 27, 35, 0.15);
  --box-shadow-modal: 0px 3px 8px 0px rgba(25, 27, 35, 0.2);
  --box-shadow-dnd: 0 0 1px rgba(25, 27, 35, 0.16), 0 12px 40px rgba(25, 27, 35, 0.16);

  --fs-100: 12px;
  --lh-100: 1.33;
  --fs-200: 14px;
  --lh-200: 1.42;
  --fs-300: 16px;
  --lh-300: 1.5;
  --fs-400: 20px;
  --lh-400: 1.2;
  --fs-500: 24px;
  --lh-500: 1.17;
  --fs-600: 32px;
  --lh-600: 1.25;
  --fs-700: 36px;
  --lh-700: 1.1;
  --fs-800: 48px;
  --lh-800: 1.17;

  --disabled-opacity: 0.3;

  --xs-screen: 320px;
  --sm-screen: 768px;
  --md-screen: 1200px;

  /* DEPRECATED START
     Deprecated variables should never be used in
     components styles but preserved for backward
     compatibility if they used in projects
     like `<Badge bg="red">alpha</Badge>`
  */
  --denim-blue: #006dca;
  --light-blue: #008ff8;
  --neon-blue: #8ecdff;
  --cyan: #2bb3ff;
  --green: #009f81;
  --dark-green: #007c65;
  --yellow: #fdc23c;
  --light-orange: #ff8c43;
  --orange: #ff642d;
  --dark-orange: #c33909;
  --red: #ff4953;
  --dark-red: #d1002f;
  --violet: #ab6cfe;
  --dark-violet: #8649e1;
  --pink: #e14adf;
  --asphalt: #6c6e79;
  --wall: #8a8e9b;
  --mist: #a9abb6;
  --mist-light: #c4c7cf;
  --stone: #a9abb6;
  --stone-light: #c4c7cf;
  --gray20: #191b23;
  --gray30: #191b23;
  --gray40: #484a54;
  --gray60: #6c6e79;
  --gray70: #a9abb6;
  --gray80: #c4c7cf;
  --gray94: #e0e1e9;
  --gray96: #f4f5f9;
  --mystic: #f4f5f9;
  --mercury: #e0e1e9;

  --blue50: #e9f7ff;
  --blue100: #c4e5fe;
  --blue400: #008ff8;
  --blue600: #044792;
  --green50: #dbfee8;
  --green100: #9ef2c9;
  --green200: #59ddaa;
  --green300: #00c192;
  --green600: #055345;
  --red50: #fff0f7;
  --red100: #ffd7df;
  --red200: #ffaeb5;
  --red300: #ff8786;
  --red600: #8e0016;
  --orange50: #fff3d9;
  --orange100: #ffdca2;
  --orange200: #ffb26e;
  --yellow100: #fce081;

  --iceberg-blue: #6fafd4;
  --salad: #8bc835;
  --granitic: #2f3439;
  --gray10: #222222;
  --sky: #e1f2ff;
  --lily: #e6f9fd;
  --marble: #f1f6f8;
  --googleplus: #e14b3f;
  --linkedin: #1a7ab2;

  --font-size_-1: 11px;
  --font-size_-2: 10px;
  --font-size_0: 12px;
  --font-size_1: 13px;
  --font-size_11: 33px;
  --font-size_12: 36px;
  --font-size_15: 48px;
  --font-size_2: 14px;
  --font-size_3: 16px;
  --font-size_5: 19px;
  --font-size_6: 21px;
  --font-size_8: 25px;
  /* DEPRECATED END */
}

@custom-media --xs-media (width < 320px);
@custom-media --sm-media (width >= 320px) and (width < 768px);
@custom-media --md-media (width >= 768px) and (width < 1200px);

: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;
  /* Used for the invalidStatePattern utils component to mark all kinds of inputs with invalid states. */
  --intergalactic-border-critical-pattern: repeating-linear-gradient(315deg, rgba(209, 0, 47, 1) 0, rgba(209, 0, 47, 1) 2px, transparent 0, transparent 50%);
  /* 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 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: #c33909;
  /* 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;
  /* Background of the advertising primary control. */
  --intergalactic-control-primary-advertising-active: #8649e1;
  /* 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 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: #fce081;
  /* 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 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);
  /* Icon color for the SliderRating component in its normal state. */
  --intergalactic-slider-rating-normal: #a9abb6;
  /* Icon color for the SliderRating component in its hovered and active states. */
  --intergalactic-slider-rating-hover-active: #fdc23c;
  /* 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: #f0f0f4;
  /* Background of the default active cell in the Table. */
  --intergalactic-table-td-cell-active: #e6e7ed;
  /* 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);
  /* Color for default keyboard focus outline styles. */
  --intergalactic-keyboard-focus-outline: rgba(0, 143, 248, 0.5);
  /* Color for default keyboard focus outline styles to use on the dark and color background. */
  --intergalactic-keyboard-focus-outline-invert: rgba(255, 255, 255, 0.7);
  /* 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 this font-size with caution for text in some additional messages. Always check its contrast and readability. */
  --intergalactic-fs-100: 12px;
  --intergalactic-fs-200: 14px;
  --intergalactic-fs-300: 16px;
  --intergalactic-fs-400: 20px;
  --intergalactic-fs-500: 24px;
  --intergalactic-fs-600: 32px;
  --intergalactic-fs-700: 36px;
  --intergalactic-fs-800: 48px;
  /* Compact letter spacing. */
  --intergalactic-compact: 0.3;
  /* Base denominator of the design system. */
  --intergalactic-scale-indent: 4px;
  /* Small size of the controls. Use it for small interactive addons. Avoid using it with the main actions. */
  --intergalactic-form-control-s: 20px;
  /* 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-extra-small: 2px;
  --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 big and small charts like bar, histogram and others. */
  --intergalactic-chart-rounded: 2px;
  /* 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: 900;
  --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 a period on the chart grid. */
  --intergalactic-chart-grid-period-bg: rgba(196, 199, 207, 0.2);
  /* Stripe color for diagonal pattern background. */
  --intergalactic-chart-grid-period-pattern: rgba(25, 27, 35, 0.15);
  /* Border for distinguishing data sets and chart dots on the chart grid. */
  --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;
}

:root {
  --white: #ffffff;
  --black: #000000;
  --gray-50: #f4f5f9;
  --gray-100: #e0e1e9;
  --gray-200: #c4c7cf;
  --gray-300: #a9abb6;
  --gray-400: #8a8e9b;
  --gray-500: #6c6e79;
  --gray-600: #484a54;
  --gray-700: #2b2e38;
  --gray-800: #191b23;
  --blue-50: #e9f7ff;
  --blue-100: #c4e5fe;
  --blue-200: #8ecdff;
  --blue-300: #2bb3ff;
  --blue-400: #008ff8;
  --blue-500: #006dca;
  --blue-600: #044792;
  --blue-700: #002b5f;
  --blue-800: #001b3d;
  --green-50: #dbfee8;
  --green-100: #9ef2c9;
  --green-200: #59ddaa;
  --green-300: #00c192;
  --green-400: #009f81;
  --green-500: #007c65;
  --green-600: #055345;
  --green-700: #00342d;
  --green-800: #00201e;
  --salad-50: #ecfbcd;
  --salad-100: #c7ee96;
  --salad-200: #9bd85d;
  --salad-300: #66c030;
  --salad-400: #35a21e;
  --salad-500: #0a7e22;
  --salad-600: #005613;
  --salad-700: #003509;
  --salad-800: #002203;
  --orange-50: #fff3d9;
  --orange-100: #ffdca2;
  --orange-200: #ffb26e;
  --orange-300: #ff8c43;
  --orange-400: #ff642d;
  --orange-500: #c33909;
  --orange-600: #8b1500;
  --orange-700: #551200;
  --orange-800: #351000;
  --yellow-50: #fdf7c8;
  --yellow-100: #fce081;
  --yellow-200: #fdc23c;
  --yellow-300: #ef9800;
  --yellow-400: #d87900;
  --yellow-500: #a75800;
  --yellow-600: #743a00;
  --yellow-700: #462500;
  --yellow-800: #2c1600;
  --red-50: #fff0f7;
  --red-100: #ffd7df;
  --red-200: #ffaeb5;
  --red-300: #ff8786;
  --red-400: #ff4953;
  --red-500: #d1002f;
  --red-600: #8e0016;
  --red-700: #58000a;
  --red-800: #410101;
  --pink-50: #fff0ff;
  --pink-100: #ffd3ff;
  --pink-200: #ffa9fa;
  --pink-300: #f67cf2;
  --pink-400: #e14adf;
  --pink-500: #b229b9;
  --pink-600: #7d0480;
  --pink-700: #4d0050;
  --pink-800: #340439;
  --violet-50: #f9f2ff;
  --violet-100: #edd9ff;
  --violet-200: #dcb8ff;
  --violet-300: #c695ff;
  --violet-400: #ab6cfe;
  --violet-500: #8649e1;
  --violet-600: #5925ab;
  --violet-700: #421983;
  --violet-800: #220358;
  --brand-color: #ff642d;
  --pinterest: #bd081c;
  --instagram: #e4405f;
  --youtube: #ff0000;
  --facebook: #1877F2;
  --linkedIn: #0A66C2;
  --twitter: #1D9BF0;
  --google-my-business: #1a73e8;
  --google-blue: #1a0dab;
  --google-green: #016723;

  --keyboard-focus: var(--intergalactic-boxShadow-keyboard-focus);
  --keyborad-focus: var(--intergalactic-boxShadow-keyboard-focus);
  --keyboard-focus-valid: var(--intergalactic-boxShadow-keyboard-focus-valid);
  --keyboard-focus-invalid: var(--intergalactic-boxShadow-keyboard-focus-invalid);

  --rounded-s: 4px;
  --rounded-m: 6px;
  --rounded-l: 12px;

  --form-control-m: 28px;
  --form-control-l: 40px;

  --box-shadow-card: 0px 1px 2px 0px rgba(25, 27, 35, 0.12), 0px 0px 1px 0px rgba(25, 27, 35, 0.16);
  --box-shadow-hover: 3px 3px 30px 0px rgba(25, 27, 35, 0.15);
  --box-shadow-popper: 0px 1px 12px 0px rgba(25, 27, 35, 0.15);
  --box-shadow-modal: 0px 3px 8px 0px rgba(25, 27, 35, 0.2);
  --box-shadow-dnd: 0 0 1px rgba(25, 27, 35, 0.16), 0 12px 40px rgba(25, 27, 35, 0.16);

  --fs-100: 12px;
  --lh-100: 1.33;
  --fs-200: 14px;
  --lh-200: 1.42;
  --fs-300: 16px;
  --lh-300: 1.5;
  --fs-400: 20px;
  --lh-400: 1.2;
  --fs-500: 24px;
  --lh-500: 1.17;
  --fs-600: 32px;
  --lh-600: 1.25;
  --fs-700: 36px;
  --lh-700: 1.1;
  --fs-800: 48px;
  --lh-800: 1.17;

  --disabled-opacity: 0.3;

  --xs-screen: 320px;
  --sm-screen: 768px;
  --md-screen: 1200px;

  /* DEPRECATED START
     Deprecated variables should never be used in
     components styles but preserved for backward
     compatibility if they used in projects
     like `<Badge bg="red">alpha</Badge>`
  */
  --denim-blue: #006dca;
  --light-blue: #008ff8;
  --neon-blue: #8ecdff;
  --cyan: #2bb3ff;
  --green: #009f81;
  --dark-green: #007c65;
  --yellow: #fdc23c;
  --light-orange: #ff8c43;
  --orange: #ff642d;
  --dark-orange: #c33909;
  --red: #ff4953;
  --dark-red: #d1002f;
  --violet: #ab6cfe;
  --dark-violet: #8649e1;
  --pink: #e14adf;
  --asphalt: #6c6e79;
  --wall: #8a8e9b;
  --mist: #a9abb6;
  --mist-light: #c4c7cf;
  --stone: #a9abb6;
  --stone-light: #c4c7cf;
  --gray20: #191b23;
  --gray30: #191b23;
  --gray40: #484a54;
  --gray60: #6c6e79;
  --gray70: #a9abb6;
  --gray80: #c4c7cf;
  --gray94: #e0e1e9;
  --gray96: #f4f5f9;
  --mystic: #f4f5f9;
  --mercury: #e0e1e9;

  --blue50: #e9f7ff;
  --blue100: #c4e5fe;
  --blue400: #008ff8;
  --blue600: #044792;
  --green50: #dbfee8;
  --green100: #9ef2c9;
  --green200: #59ddaa;
  --green300: #00c192;
  --green600: #055345;
  --red50: #fff0f7;
  --red100: #ffd7df;
  --red200: #ffaeb5;
  --red300: #ff8786;
  --red600: #8e0016;
  --orange50: #fff3d9;
  --orange100: #ffdca2;
  --orange200: #ffb26e;
  --yellow100: #fce081;

  --iceberg-blue: #6fafd4;
  --salad: #8bc835;
  --granitic: #2f3439;
  --gray10: #222222;
  --sky: #e1f2ff;
  --lily: #e6f9fd;
  --marble: #f1f6f8;
  --googleplus: #e14b3f;
  --linkedin: #1a7ab2;

  --font-size_-1: 11px;
  --font-size_-2: 10px;
  --font-size_0: 12px;
  --font-size_1: 13px;
  --font-size_11: 33px;
  --font-size_12: 36px;
  --font-size_15: 48px;
  --font-size_2: 14px;
  --font-size_3: 16px;
  --font-size_5: 19px;
  --font-size_6: 21px;
  --font-size_8: 25px;
  /* DEPRECATED END */
}

@custom-media --xs-media (width < 320px);
@custom-media --sm-media (width >= 320px) and (width < 768px);
@custom-media --md-media (width >= 768px) and (width < 1200px);


/*# sourceMappingURL=spa.vendors.1776dbc6dc03ab395002.css.map*/