.dropdownButton_pQIU {
  border: none;
  font-weight: unset;
  vertical-align: inherit;
}

.dropdownButtonText_IB5S {
  transition: border-bottom-color .15s ease-in-out;
  border-bottom: 1px solid transparent;
}

.dropdownTrigger__gHD .dropdownButton_pQIU {
}

@media (hover: hover) {
    .dropdownTrigger__gHD .dropdownButton_pQIU:hover {
      background-color: inherit;
      color: var(--blue600)
    }

      .dropdownTrigger__gHD .dropdownButton_pQIU:hover .dropdownButtonText_IB5S {
        border-bottom-color: currentcolor;
      }
  }

.dropdownButton_pQIU .dropdownButtonText_IB5S {
  line-height: 1.1;
}

.dropdownPopper_V_sC {
  font-family: Inter, sans-serif;
}

.headerWrapper_HBHE {
  padding-top: 16px;
  grid-column: 1/5
}

  @media (min-width: 768px) {.headerWrapper_HBHE {
    grid-column: 1/7
}
  }

  @media (min-width: 1280px) {.headerWrapper_HBHE {
    grid-column: 1/11
}
  }

  @media (min-width: 1920px) {.headerWrapper_HBHE {
    grid-column: 1/9
}
  }
.headerWrapper_HBHE.headerWrapperSST_PR85 {
  padding-top: 24px;
}
.notificationWrapper_GSbK {
  grid-column: 1/-1;
}
.notificationWrapper_GSbK:not(:empty) {
  margin-bottom: 16px;
}

.gridLayout_T6jD {
  margin: 0 auto;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 16px;
  grid-auto-rows: min-content;
  padding-left: 16px;
  padding-right: 16px
}

  @media (min-width: 768px) {.gridLayout_T6jD {
    grid-template-columns: repeat(6, 1fr);
    padding-left: 24px;
    padding-right: 24px
}
  }

  @media (min-width: 1280px) {.gridLayout_T6jD {
    grid-template-columns: repeat(12, 1fr)
}
  }

.menu_a5KT {
  display: flex;
  flex-direction: column;
}

.item_ygue {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.link_iH6c.link_iH6c {
  border: none;
}

@media (hover: hover) {
  .item_ygue:hover > .link_iH6c {
    border: none;
  }
}

.wrapper_cDet {
  max-width: 100%;
  overflow: auto hidden;
  padding-top: 4px;
}

.link_OFOl {
  text-decoration: none;
  color: inherit;
}

.link_OFOl:focus-visible {
  outline: none;
}

.layoutWrapper_pv3y {
  display: flex;
  height: 100%;
  flex-direction: column;
  background-color: var(--gray-50);
}
.error_jUr0 {
}
@media (min-width: 768px) {
.error_jUr0 {
    padding-left: 32px;
    padding-right: 32px
}
  }

.modalWindow_l5HJ {
  padding: 24px
}

  @media (min-width: 768px) {.modalWindow_l5HJ {
    padding: 40px
}
  }

.wrapper_ryd9 {
    padding: 16px 16px 28px
}

    @media (min-width: 768px) {.wrapper_ryd9 {
        grid-template-columns: repeat(6, 1fr);
        padding-left: 24px;
        padding-right: 24px
}
    }

.wrapper_eQcF {
  padding-top: 16px;
  padding-bottom: 32px;
}
.productWidget_QQ6X {
  grid-column: 1/5
}
@media (min-width: 768px) {
.productWidget_QQ6X {
    grid-column: 1/7
}
  }
@media (min-width: 1280px) {
.productWidget_QQ6X {
    grid-column: 1/11
}
  }
@media (min-width: 1920px) {
.productWidget_QQ6X {
    grid-column: 1/9
}
  }
.apiWidget_f47f {
  grid-column: 1/5
}
@media (min-width: 768px) {
.apiWidget_f47f {
    grid-column: 1/7
}
  }
@media (min-width: 1280px) {
.apiWidget_f47f {
    grid-column: 1/6
}
  }
@media (min-width: 1920px) {
.apiWidget_f47f {
    grid-column: 1/5
}
  }
.appCenterWidget_prSi {
  grid-column: 1/5
}
@media (min-width: 768px) {
.appCenterWidget_prSi {
    grid-column: 1/7
}
  }
@media (min-width: 1280px) {
.appCenterWidget_prSi {
    grid-column: 6/11
}
  }
@media (min-width: 1920px) {
.appCenterWidget_prSi {
    grid-column: 5/9
}
  }
.pills_uih_ {
  grid-column: 1/5;
}
.pillsItem_xcdX {
  flex: 1 1 34%;
}
.featuredLimit_AGv3 {
  padding-top: 16px;
  padding-left: 0;
  padding-right: 0
}
@media (min-width: 525px) {
.featuredLimit_AGv3 {
    padding-left: 16px;
    padding-right: 16px
}
  }
@media (min-width: 768px) {
.featuredLimit_AGv3 {
    padding-left: 24px;
    padding-right: 24px
}
  }
.featuredLimit_AGv3:empty {
  padding-top: 0;
}

.grid_Bx1J {
  height: 526px; /* 560px - 44px header */
  padding: 0;
  display: grid
}

  @media (min-width: 1280px) {.grid_Bx1J {
    grid-template-columns: 220px auto
}
  }
.card_kbqb {
  overflow: hidden; /* hide shadow */
}

.header_cu7n {
  display: flex;
  flex-direction: column;
  gap: 8px
}

  @media (min-width: 768px) {.header_cu7n {
    flex-direction: row;
    align-items: center
}
  }
.button_Nb4I {
  flex-shrink: 0;
  width: 100%;
  max-width: 320px
}
@media (min-width: 768px) {
.button_Nb4I {
    width: auto
}
  }
.cardTitle_TxFQ {
}
@media (min-width: 768px) {
.cardTitle_TxFQ {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}
  }

.sidebar_OdaQ {
  border-right: 1px solid var(--gray-100);
  padding: 8px;
}
.menu_B2e9 {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  font-size: 16px;
}
.item_iCAi {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  padding: 12px;
  border-radius: 4px;
  width: 100%;
  color: var(--gray-800);
  text-decoration: none;
}
@media (hover: hover) {
  .item_iCAi:hover {
    background-color: var(--gray-50);
  }
}
.allUnits_gNFF {
  margin-top: auto;
}
.active_q6nE {
  background-color: var(--blue-50);
}
.dot_JL0u {
  margin-left: auto;
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 6px;
  background-color: var(--blue-300);
}

.titleWrapperFree_XPs8 {
  position: relative;
  padding: 0 var(--padding-toolkit);
  margin-top: 6px;
}

.titleWrapperFree_XPs8::after {
  position: absolute;
  z-index: 1;
  content: "";
  width: 100%;
  height: 12px;
  bottom: -12px;
  background:
    linear-gradient(
      180deg,
      rgba(255 255 255 / 100%) 0%,
      rgba(255 255 255 / 0%) 100%
    );
}

.titleWrapperPaid_cc7m {
  padding: 0 var(--padding-toolkit);
}

:root {
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --gray-50: #f4f5f9;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --gray-100: #e0e1e9;
  --gray-200: #c4c7cf;
  --gray-300: #a9abb6;
  --gray-400: #8a8e9b;
  --gray-500: #6c6e79;
  --gray-600: #484a54;
  --gray-700: #2b2e38;
  --gray-800: #191b23;
  --gray-white: #ffffff;
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --blue-50: #e9f7ff;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --blue-100: #c4e5fe;
  --blue-200: #8ecdff;
  --blue-300: #2bb3ff;
  --blue-400: #008ff8;
  --blue-500: #006dca;
  --blue-600: #044792;
  --blue-700: #002b5f;
  --blue-800: #001b3d;
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --green-50: #dbfee8;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --green-100: #9ef2c9;
  --green-200: #59ddaa;
  --green-300: #00c192;
  --green-400: #009f81;
  --green-500: #007c65;
  --green-600: #055345;
  --green-700: #00342d;
  --green-800: #00201e;
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --red-50: #fff0f7;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --red-100: #ffd7df;
  --red-200: #ffaeb5;
  --red-300: #ff8786;
  --red-400: #ff4953;
  --red-500: #d1002f;
  --red-600: #8e0016;
  --red-700: #58000a;
  --red-800: #410101;
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --orange-50: #fff3d9;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --orange-100: #ffdca2;
  --orange-200: #ffb26e;
  --orange-300: #ff8c43;
  --orange-400: #ff642d;
  --orange-500: #c33909;
  --orange-600: #8b1500;
  --orange-700: #551200;
  --orange-800: #351000;
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --yellow-50: #fdf7c8;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --yellow-100: #fce081;
  --yellow-200: #fdc23c;
  --yellow-300: #ef9800;
  --yellow-400: #d87900;
  --yellow-500: #a75800;
  --yellow-600: #743a00;
  --yellow-700: #462500;
  --yellow-800: #2c1600;
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --violet-50: #f9f2ff;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --violet-100: #edd9ff;
  --violet-200: #dcb8ff;
  --violet-300: #c695ff;
  --violet-400: #ab6cfe;
  --violet-500: #8649e1;
  --violet-600: #5925ab;
  --violet-700: #421983;
  --violet-800: #220358;
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --violet-dusty-50: #F5F4FF;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --violet-dusty-100: #E2DDFF;
  --violet-dusty-200: #BCB1E9;
  --violet-dusty-300: #A79CD6;
  --violet-dusty-400: #9083C5;
  --violet-dusty-500: #6D619F;
  --violet-dusty-600: #4D407E;
  --violet-dusty-700: #382E5E;
  --violet-dusty-800: #1D113E;
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --pink-50: #fff0ff;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --pink-100: #ffd3ff;
  --pink-200: #ffa9fa;
  --pink-300: #f67cf2;
  --pink-400: #e14adf;
  --pink-500: #b229b9;
  --pink-600: #7d0480;
  --pink-700: #4d0050;
  --pink-800: #340439;
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --salad-50: #ecfbcd;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --salad-100: #c7ee96;
  --salad-200: #9bd85d;
  --salad-300: #66c030;
  --salad-400: #35a21e;
  --salad-500: #0a7e22;
  --salad-600: #005613;
  --salad-700: #003509;
  --salad-800: #002203;
  /* 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: #8b1500;
  /* Background of the advertising primary control. */
  --intergalactic-control-primary-advertising: #5925ab;
  /* Hover state of the advertising primary control. */
  --intergalactic-control-primary-advertising-hover: #421983;
  /* Active (selected) state 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;
  /* ⚠️ Use only for illustrations. */
  --intergalactic-illustration-red: #FF788F;
  /* ⚠️ Use only for illustrations. */
  --intergalactic-illustration-orange: #FFB26E;
  /* ⚠️ Use only for illustrations. */
  --intergalactic-illustration-yellow: #FFE84D;
  /* ⚠️ Use only for illustrations. */
  --intergalactic-illustration-salad: #C7FA73;
  /* ⚠️ Use only for illustrations. */
  --intergalactic-illustration-green: #45E0A8;
  /* ⚠️ Use only for illustrations. */
  --intergalactic-illustration-blue: #6EDBFF;
  /* ⚠️ Use only for illustrations. */
  --intergalactic-illustration-violet: #B880FF;
  /* ⚠️ Use only for illustrations. */
  --intergalactic-illustration-pink: #FF7AD1;
  /* 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 FeaturePopover background with accent theme. */
  --intergalactic-feature-popover-bg: #fce081;
  /* Color of the outer border of the FeaturePopover.Spot for FeaturePopover with accent theme. */
  --intergalactic-feature-popover-dot-outer-border: #fce081;
  /* Color of the FeaturePopover background with neutral theme. */
  --intergalactic-feature-popover-bg-neutral: #1D113E;
  /* Color of the FeaturePopover.Spot for FeaturePopover with neutral theme. */
  --intergalactic-feature-popover-dot-neutral: #00c192;
  /* Color of the outer border of the FeaturePopover.Spot for FeaturePopover with neutral theme. */
  --intergalactic-feature-popover-dot-neutral-outer-border: #00c192;
  /* 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 inside an Accordion in the Table. */
  --intergalactic-table-td-cell-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: #008ff8;
  /* Color for keyboard focus outline styles for elements with invalid state. */
  --intergalactic-keyboard-focus-invalid-outline: #ff4953;
  /* Keyboard focus styles for elements with invalid state. */
  --intergalactic-keyboard-focus-invalid: 0px 0px 0px 3px rgba(255, 73, 83, 0.5);
  /* Color for keyboard focus outline styles for elements with valid state. */
  --intergalactic-keyboard-focus-valid-outline: #009f81;
  /* Keyboard focus styles for elements with valid state. */
  --intergalactic-keyboard-focus-valid: 0px 0px 0px 3px rgba(0, 159, 129, 0.5);
  /* Color for keyboard focus outline styles to use on the dark and color background. */
  --intergalactic-keyboard-focus-invert-outline: rgba(255, 255, 255, 0.8);
  /* Keyboard focus styles for use on dark backgrounds. */
  --intergalactic-keyboard-focus-invert: 0px 0px 0px 3px rgba(255, 255, 255, 0.8);
  /* Default keyboard focus box-shadow styles. */
  --intergalactic-keyboard-focus: 0px 0px 0px 3px rgba(0, 143, 248, 0.5);
  /* 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);
  --intergalactic-header-bg: #382E5E;
  --intergalactic-header-border-primary: #382E5E;
  --intergalactic-header-border-secondary: rgba(255,255,255, 0.15);
  --intergalactic-sidebar-nav-control-hover: rgba(224, 225, 233, 0.7);
  --intergalactic-sidebar-nav-control-active: #E2DDFF;
  --intergalactic-sidebar-nav-control-text-normal: #6D619F;
  --intergalactic-sidebar-nav-control-text-active: #4D407E;
  --intergalactic-sidebar-nav-control-icon-normal: #9083C5;
  --intergalactic-sidebar-nav-control-icon-active: #4D407E;
  /* 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;
}
.wrapper_lRm8 {
  border-bottom: 1px solid var(--gray-100);
  display: flex;
  gap: 4px;
  margin: 0 var(--padding-toolkit);
}
.cellAvailability_DvVX {
  margin-left: auto;
  width: 120px;
  display: none
}
@media (min-width: 768px) {
.cellAvailability_DvVX {
    display: block
}
  }
.cellButtons_ihqr {
  width: 120px;
  margin-left: 28px;
}

:root {
  --padding-toolkit: 20px;
}
.cell_ez0d {
  padding-top: 8px;
  padding-bottom: 8px;
  vertical-align: middle;
}
.cellAvailabilityWrapper_Sbn_ {
  display: none
}
@media (min-width: 1280px) {
.cellAvailabilityWrapper_Sbn_ {
    display: table-cell
}
  }
.cellAvailabilityInner_Doxi {
  display: flex;
  justify-content: flex-end;
}
.cellInner_ZeWY {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cellButtonsInner_D1p6 {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-left: 16px
}
@media (min-width: 768px) {
.cellButtonsInner_D1p6 {
    padding-left: 32px
}
  }

.wrapper_zaAm {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 12px;
  margin-bottom: 12px;
  padding: 0 var(--padding-toolkit);
  overflow: hidden;
}
.tr_gZZa {
  display: flex;
  flex-direction: row;
  gap: 4px;
}
.cellLimit_FU4x {
  flex: 1;
}
.cellAvailability_liJ1 {
  margin-left: auto;
  width: 120px;
  display: none
}
@media (min-width: 768px) {
.cellAvailability_liJ1 {
    display: block
}
  }
.cellButtons_TYa7 {
  margin-left: 28px;
  width: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.highlighted_vPxF {
  background-color: var(--gray-50);
  padding: 12px;
  border-radius: 5px;
}

.wrapper_lcf6 {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.label_mqKv {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.value_eoSe {
  white-space: nowrap;
}

.icon_mLy2 {
  vertical-align: text-top;
}

.text_LNfo {
  display: none
}

  @media (min-width: 768px) {.text_LNfo {
    display: block
}
  }
.buttonWide_EkRu.buttonWide_EkRu {
  min-width: 112px;
}
.buttonNarrow_OUsb.buttonNarrow_OUsb {
  min-width: 92px;
}

.cellAvailability_FR_y {
  display: none
}

  @media (min-width: 1280px) {.cellAvailability_FR_y {
    display: block;
    width: 120px
}
  }
.cellButton_ZVD6 {
  padding-left: 16px
}
@media (min-width: 1280px) {
.cellButton_ZVD6 {
    padding-left: 32px;
    padding-right: 4px
}
  }
.buttonWide_cbzx.buttonWide_cbzx {
  min-width: 112px;
}
.buttonNarrow_KtiE.buttonNarrow_KtiE {
  min-width: 92px;
}

.radioItem_hUCS {
  flex: 0 1 50%;
  background-color: #fff;
  border: 1px solid var(--gray-100);
  border-radius: 6px;
  padding: 12px;
}

.radioItem_hUCS:has(input[type="radio"]:checked) {
  border: 1px solid var(--blue-500);
}

.priceL_feQh {
  --font-size-l: 16px;
  --font-weight-l: 600;
}

.priceM_l0Ba {
  --font-size-m: 14px;
  --font-weight-m: 400;
}

/* integer */

.integer_UbhU.integer_UbhU {
  line-height: 1;
  letter-spacing: 1px;
  font-variant-numeric: lining-nums;
}

.priceL_feQh > .integer_UbhU {
  font-weight: var(--font-weight-l);
  font-size: 32px;
}

.priceM_l0Ba > .integer_UbhU {
  font-weight: var(--font-weight-m);
  font-size: var(--font-size-m);
}

/* fraction */

.fraction_vKHm.fraction_vKHm {
  line-height: 1;
  font-variant-numeric: lining-nums;
}

.priceL_feQh > .fraction_vKHm {
  font-weight: var(--font-weight-l);
  font-size: var(--font-size-l);
}

.priceM_l0Ba > .fraction_vKHm {
  font-weight: var(--font-weight-m);
  font-size: var(--font-size-m);
}

/* period */

.period_GtQZ.period_GtQZ {
  line-height: 1;
  margin-left: 4px;
  font-weight: var(--font-weight-m);
}

.priceL_feQh > .period_GtQZ {
  font-size: var(--font-size-l);
}

.priceM_l0Ba > .period_GtQZ {
  font-size: var(--font-size-m);
}

.tierWrapper_HETv {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 16px auto 35px;
  width: calc(100% - 25px);
  padding-left: 4px;
  flex-direction: column
}

  @media (min-width: 768px) {.tierWrapper_HETv {
    flex-direction: row
}
  }
.tierCard_ju8h {
  position: relative;
  display: block;
  border: 1px solid var(--gray-100);
  border-radius: 6px;
  padding: 12px;
  font-size: 14px;
  flex: 1 1 0;
  width: 100%
}
@media (min-width: 768px) {
.tierCard_ju8h {
    max-width: 280px /* fallback */
}
  }
/* 1 card */
.tierWrapper_HETv:has(> :nth-child(1):last-child) > .tierCard_ju8h {
}
@media (min-width: 768px) {
.tierWrapper_HETv:has(> :nth-child(1):last-child) > .tierCard_ju8h {
    max-width: 480px
}
  }
/* 2 card */
.tierWrapper_HETv:has(> :nth-child(2):last-child) > .tierCard_ju8h {
}
@media (min-width: 768px) {
.tierWrapper_HETv:has(> :nth-child(2):last-child) > .tierCard_ju8h {
    max-width: 320px
}
  }
/* 3 card or more */
.tierWrapper_HETv:has(> :nth-child(3)) > .tierCard_ju8h {
}
@media (min-width: 768px) {
.tierWrapper_HETv:has(> :nth-child(3)) > .tierCard_ju8h {
    max-width: 280px
}
  }
@media (hover: hover) {
  .tierCard_ju8h:hover {
    box-shadow: 0 0 0 2px var(--blue-200);
    border-color: transparent;
  }
}
.tierCard_ju8h:has(input:checked) {
  border-color: transparent;
  outline: 2px solid var(--blue-400);
}
.tierCard_ju8h input[type="radio"],
.tierDot_ipbt {
  position: absolute;
  right: 12px;
}
.tierDot_ipbt::before {
  transition: none;
}
.tierCard_ju8h:has(input:checked) .tierTitle_uU2k {
  color: var(--blue-500);
}
.tierListItem_zfbr {
  display: flex;
  margin-top: 8px;
  margin-bottom: 8px;
}
.ctaButtons_jm5f {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 12px 0;
  margin-bottom: 20px;
  z-index: 0;
}
.ctaButtons_jm5f::before {
  position: absolute;
  z-index: 1;
  content: "";
  width: 100%;
  height: 12px;
  top: -12px;
  background: linear-gradient(0deg, rgba(255 255 255 / 100%) 0%, rgba(255 255 255 / 0%) 100%);
}
.scrollArea_H9B6 {
  overflow: hidden;
}
[data-ui-name="Bar.Slider"] {
  z-index: 1;
}

.content_V_qv {
  padding: 14px 0 0;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.tableWrapper_U_Sd {
  border-top: 1px solid var(--gray-100);
  padding: 12px 0 0;
  margin-top: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* no border if there is no content title */

.tableWrapper_U_Sd:first-child {
  border-top: none;
  margin-top: 0;
  padding: 0;
}

.table_dE_S {
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.spinContainer_NJsE {
  display: flex;
  align-items: center;
  justify-content: center;
}

.scrollArea_Zb68 {
  overflow: hidden;
}

.scroll_s4W6 {
  display: flex;
  max-width: 100%;
  width: 100%;
  overflow: scroll hidden;
  height: 100%;
}

.wrapper_PUAD:empty {
  display: none;
}

.wrapper_PUAD {
  display: flex;
  gap: 12px;
  padding: 0 var(--padding-toolkit);
  margin-top: 12px;
}

.tierCard_WOHw {
  padding: 8px;
  border-radius: 6px;
  border: 1px solid var(--blue-400);
}

.tierCardPurchased_jjbK {
  border: 1px solid var(--gray-100);
}

.wrapper_T1mI {
  grid-column: 1 / -1;
}

.icon_tk04 {
  margin-top: 2px;
}

.wrapper_MCt0 {
  container-type: inline-size;
}

.limitRow_rAFX {
  align-items: center;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 16px
}

@container (min-width: 456px) {

.limitRow_rAFX {
    gap: 32px
}
  }

.title_m4yi {
  flex: 1;
}

.totalCell_IvIw {
  flex: 0 0 40px;
  text-align: right;
}

.divider_Cs7I.divider_Cs7I.divider_Cs7I.divider_Cs7I.divider_Cs7I {
  background-color: var(--gray-100);
}
.row_PKp1 {
  gap: var(--app-center-column-padding);
}

.cell_bHF8 {
  padding: 6px 0;
  vertical-align: middle;
  flex: 0 1 100%;
}

.cell_bHF8 + .cell_bHF8 {
  flex: 0 0 var(--app-center-column-width);
}

.buyButton_NGPr.buyButton_NGPr {
  width: 100%
}

  @container (min-width: 456px) {.buyButton_NGPr.buyButton_NGPr {
    min-width: 92px
}
  }
.row_GEwh {
  display: flex
}
@container (min-width: 456px) {
.row_GEwh {
    gap: var(--app-center-column-padding)
}
  }
/* Toggle */
.toggle_CWLY {
  display: block;
  position: relative; /* Fix for outline on focus */
  z-index: 1; /* Fix for outline on focus */
}
.emptyToggle_N0vw {
  cursor: auto;
}
.toggleRow_Oisi {
  justify-content: space-between;
  align-items: center;
  padding: 0 20px
}
@container (min-width: 456px) {
.toggleRow_Oisi {
    padding: 0
}
  }
.toggleRow_Oisi .cell_tWcC {
  padding: 12px 0;
}
/* Collapsable rows */
.collapse_gD1V {
  display: block;
  background: var(--gray-50);
  padding: 14px 20px
}
@container (min-width: 456px) {
.collapse_gD1V {
    padding: 6px var(--app-center-column-padding);
    border-radius: 6px
}
  }
.collapseRow_K4lv {
  flex-wrap: wrap;
  justify-content: space-between
}
@container (min-width: 456px) {
.collapseRow_K4lv {
    flex-wrap: nowrap
}
  }
.item_as9g {
  height: 100%;
  background: var(--gray-50);
  align-items: center;
}
.item_as9g:not(:empty) {
  padding: 6px 0;
}
.itemButton_R7ZJ {
  flex-direction: column
}
@container (min-width: 456px) {
.itemButton_R7ZJ {
    flex-direction: row
}
  }
.collapseRow_K4lv:not(:last-child) .itemButton_R7ZJ:not(:empty)::after {
  /* Line between buttons */
  content: "";
  width: 100%;
  border-bottom: 1px solid var(--gray-200);
  margin-top: 12px
}
@container (min-width: 456px) {
.collapseRow_K4lv:not(:last-child) .itemButton_R7ZJ:not(:empty)::after {
    content: none;
    border-bottom: none
}
  }
.cellTitle_Lcju {
}
@container (min-width: 456px) {
.cellTitle_Lcju {
    flex: 1 5 75%
}
  }
.cellLimit_mqLD {
  margin-left: auto
}
@container (min-width: 456px) {
.cellLimit_mqLD {
    flex: 0 0 64px
}
  }
.cellButton_dq1u {
  width: 100%
}
@container (min-width: 456px) {
.cellButton_dq1u {
    width: initial;
    flex: 0 0 var(--app-center-button-width)
}
  }
.toggleRow_Oisi .cellButton_dq1u {
}
@container (min-width: 456px) {
.toggleRow_Oisi .cellButton_dq1u {
    width: initial;
    flex: 0 0 var(--app-center-column-width)
}
  }
.cellEmpty_fIH6 {
  display: none
}
@container (min-width: 456px) {
.cellEmpty_fIH6 {
    display: block
}
  }
/* Paddings for accordion body */
.collapseRow_K4lv .cell_tWcC:first-child {
  width: 75%
}
@container (min-width: 456px) {
.collapseRow_K4lv .cell_tWcC:first-child {
    width: auto
}
  }

.cellLimit_sJhQ {
}
  @container (min-width: 456px) {.cellLimit_sJhQ {
    margin-right: calc(var(--app-center-column-width) + var(--app-center-column-padding))
}
  }

.widget_xkUM {
  container-type: inline-size;
}
.emptyWidget_NuiK {
  text-align: center;
}
.cardBody_zPKf {
  padding: 8px 0 20px
}
/* TODO: Replace (min-width: 456px) with custom-media variable once supported
   *  https://github.com/csstools/postcss-plugins/issues/1035 */
@container (min-width: 456px) {
.cardBody_zPKf {
    padding: 8px 20px 20px
}
  }
.buttonWrapper_f3Hj {
  padding: 12px 20px 0
}
@container (min-width: 456px) {
.buttonWrapper_f3Hj {
    padding: 16px 0 0
}
  }
.button_YC0W {
  width: 100%
}
@container (min-width: 456px) {
.button_YC0W {
    width: initial
}
  }

.notification_Tvf2 {
  grid-column: 1 / -1;
  flex-wrap: wrap;
  justify-content: space-between
}

  @media (min-width: 525px) {.notification_Tvf2 {
    flex-wrap: nowrap
}
  }

  @media (min-width: 1920px) {.notification_Tvf2 {
    grid-column: 1/9
}
  }
.notificationLabel_RLry {
  order: 1
}
@media (min-width: 525px) {
.notificationLabel_RLry {
    order: unset
}
  }
.notificationClose_cldx {
  order: 1;
  align-self: center
}
@media (min-width: 525px) {
.notificationClose_cldx {
    order: unset;
    align-self: unset
}
  }
.noticeContent_fojZ {
  order: 2;
  margin-top: 12px
}
@media (min-width: 525px) {
.noticeContent_fojZ {
    order: unset;
    margin-top: 0
}
  }
@media (min-width: 768px) {
.noticeContent_fojZ {
    padding-right: 250px
}
  }
.notification_Tvf2.notification_Tvf2.notification_Tvf2 {
  background-color: var(--white);
  border-color: var(--gray-100);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: contain;
  border-width: 1px 0;
  border-radius: 0
}
@media (min-width: 525px) {
.notification_Tvf2.notification_Tvf2.notification_Tvf2 {
    border-width: 1px;
    border-radius: 6px
}
  }
@media (min-width: 768px) {
.notification_Tvf2.notification_Tvf2.notification_Tvf2 {
    /* Fallback to avoid linter error */
    --background-image: '';

    background-image: var(--background-image)
}
  }

.wrapper_DlVh {
  flex: 1;
  padding-top: 16px;
  padding-bottom: 32px;
  min-height: 300px;
}
.apiUnitsWidget_VRTc {
  grid-column: 1/5
}
@media (min-width: 768px) {
.apiUnitsWidget_VRTc {
    grid-column: 1/5
}
  }
@media (min-width: 1280px) {
.apiUnitsWidget_VRTc {
    grid-column: 1/11
}
  }
@media (min-width: 1920px) {
.apiUnitsWidget_VRTc {
    grid-column: 1/8
}
  }
.apiKeyWidgetForUnavailableAPI_uN5B {
  grid-column: 1/5
}
@media (min-width: 768px) {
.apiKeyWidgetForUnavailableAPI_uN5B {
    grid-column: 1/-1
}
  }
@media (min-width: 1280px) {
.apiKeyWidgetForUnavailableAPI_uN5B {
    grid-column: 1/11
}
  }
@media (min-width: 1920px) {
.apiKeyWidgetForUnavailableAPI_uN5B {
    grid-column: 1/8
}
  }
.apiKeyWidgetForAvailableAPI_cjen {
  grid-column: 1/5
}
@media (min-width: 768px) {
.apiKeyWidgetForAvailableAPI_cjen {
    grid-column: 1/5
}
  }
@media (min-width: 1280px) {
.apiKeyWidgetForAvailableAPI_cjen {
    grid-column: 1/11
}
  }
@media (min-width: 1920px) {
.apiKeyWidgetForAvailableAPI_cjen {
    grid-column: 1/8
}
  }
.spinnerWrapper_CWH7 {
  grid-column: 1/-1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center
}
@media (min-width: 768px) {
.spinnerWrapper_CWH7 {
    justify-content: flex-start;
    margin-top: 140px
}
  }

.notification_vdbC {
  grid-column: 1/5
}

  @media (min-width: 768px) {.notification_vdbC {
    grid-column: 1/-1
}
  }

  @media (min-width: 1280px) {.notification_vdbC {
    grid-column: 1/11
}
  }

  @media (min-width: 1920px) {.notification_vdbC {
    grid-column: 1/8
}
  }
.comparisonWidget_NPso {
  grid-column: 1/5
}
@media (min-width: 768px) {
.comparisonWidget_NPso {
    grid-column: 1/5;
    grid-row: span 4
}
  }
@media (min-width: 1280px) {
.comparisonWidget_NPso {
    grid-column: 1/7
}
  }
@media (min-width: 1920px) {
.comparisonWidget_NPso {
    grid-column: 1/5
}
  }
.buyBusinessWidget_cM0o {
  grid-column: 1/5
}
@media (min-width: 768px) {
.buyBusinessWidget_cM0o {
    grid-column: 5/7;
    grid-row: span 1
}
  }
@media (min-width: 1280px) {
.buyBusinessWidget_cM0o {
    grid-column: 7/11
}
  }
@media (min-width: 1920px) {
.buyBusinessWidget_cM0o {
    grid-column: 5/8
}
  }
.startBusinessWidget_jYIT {
  grid-column: 1/5
}
@media (min-width: 768px) {
.startBusinessWidget_jYIT {
    grid-column: 5/7;
    grid-row: span 1
}
  }
@media (min-width: 1280px) {
.startBusinessWidget_jYIT {
    grid-column: 7/11
}
  }
@media (min-width: 1920px) {
.startBusinessWidget_jYIT {
    grid-column: 5/8
}
  }

.wrapper_btGg {
  display: flex;
  align-items: center;
}

:root {
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --gray-50: #f4f5f9;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --gray-100: #e0e1e9;
  --gray-200: #c4c7cf;
  --gray-300: #a9abb6;
  --gray-400: #8a8e9b;
  --gray-500: #6c6e79;
  --gray-600: #484a54;
  --gray-700: #2b2e38;
  --gray-800: #191b23;
  --gray-white: #ffffff;
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --blue-50: #e9f7ff;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --blue-100: #c4e5fe;
  --blue-200: #8ecdff;
  --blue-300: #2bb3ff;
  --blue-400: #008ff8;
  --blue-500: #006dca;
  --blue-600: #044792;
  --blue-700: #002b5f;
  --blue-800: #001b3d;
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --green-50: #dbfee8;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --green-100: #9ef2c9;
  --green-200: #59ddaa;
  --green-300: #00c192;
  --green-400: #009f81;
  --green-500: #007c65;
  --green-600: #055345;
  --green-700: #00342d;
  --green-800: #00201e;
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --red-50: #fff0f7;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --red-100: #ffd7df;
  --red-200: #ffaeb5;
  --red-300: #ff8786;
  --red-400: #ff4953;
  --red-500: #d1002f;
  --red-600: #8e0016;
  --red-700: #58000a;
  --red-800: #410101;
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --orange-50: #fff3d9;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --orange-100: #ffdca2;
  --orange-200: #ffb26e;
  --orange-300: #ff8c43;
  --orange-400: #ff642d;
  --orange-500: #c33909;
  --orange-600: #8b1500;
  --orange-700: #551200;
  --orange-800: #351000;
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --yellow-50: #fdf7c8;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --yellow-100: #fce081;
  --yellow-200: #fdc23c;
  --yellow-300: #ef9800;
  --yellow-400: #d87900;
  --yellow-500: #a75800;
  --yellow-600: #743a00;
  --yellow-700: #462500;
  --yellow-800: #2c1600;
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --violet-50: #f9f2ff;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --violet-100: #edd9ff;
  --violet-200: #dcb8ff;
  --violet-300: #c695ff;
  --violet-400: #ab6cfe;
  --violet-500: #8649e1;
  --violet-600: #5925ab;
  --violet-700: #421983;
  --violet-800: #220358;
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --violet-dusty-50: #F5F4FF;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --violet-dusty-100: #E2DDFF;
  --violet-dusty-200: #BCB1E9;
  --violet-dusty-300: #A79CD6;
  --violet-dusty-400: #9083C5;
  --violet-dusty-500: #6D619F;
  --violet-dusty-600: #4D407E;
  --violet-dusty-700: #382E5E;
  --violet-dusty-800: #1D113E;
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --pink-50: #fff0ff;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --pink-100: #ffd3ff;
  --pink-200: #ffa9fa;
  --pink-300: #f67cf2;
  --pink-400: #e14adf;
  --pink-500: #b229b9;
  --pink-600: #7d0480;
  --pink-700: #4d0050;
  --pink-800: #340439;
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --salad-50: #ecfbcd;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --salad-100: #c7ee96;
  --salad-200: #9bd85d;
  --salad-300: #66c030;
  --salad-400: #35a21e;
  --salad-500: #0a7e22;
  --salad-600: #005613;
  --salad-700: #003509;
  --salad-800: #002203;
  /* 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: #8b1500;
  /* Background of the advertising primary control. */
  --intergalactic-control-primary-advertising: #5925ab;
  /* Hover state of the advertising primary control. */
  --intergalactic-control-primary-advertising-hover: #421983;
  /* Active (selected) state 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;
  /* ⚠️ Use only for illustrations. */
  --intergalactic-illustration-red: #FF788F;
  /* ⚠️ Use only for illustrations. */
  --intergalactic-illustration-orange: #FFB26E;
  /* ⚠️ Use only for illustrations. */
  --intergalactic-illustration-yellow: #FFE84D;
  /* ⚠️ Use only for illustrations. */
  --intergalactic-illustration-salad: #C7FA73;
  /* ⚠️ Use only for illustrations. */
  --intergalactic-illustration-green: #45E0A8;
  /* ⚠️ Use only for illustrations. */
  --intergalactic-illustration-blue: #6EDBFF;
  /* ⚠️ Use only for illustrations. */
  --intergalactic-illustration-violet: #B880FF;
  /* ⚠️ Use only for illustrations. */
  --intergalactic-illustration-pink: #FF7AD1;
  /* 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 FeaturePopover background with accent theme. */
  --intergalactic-feature-popover-bg: #fce081;
  /* Color of the outer border of the FeaturePopover.Spot for FeaturePopover with accent theme. */
  --intergalactic-feature-popover-dot-outer-border: #fce081;
  /* Color of the FeaturePopover background with neutral theme. */
  --intergalactic-feature-popover-bg-neutral: #1D113E;
  /* Color of the FeaturePopover.Spot for FeaturePopover with neutral theme. */
  --intergalactic-feature-popover-dot-neutral: #00c192;
  /* Color of the outer border of the FeaturePopover.Spot for FeaturePopover with neutral theme. */
  --intergalactic-feature-popover-dot-neutral-outer-border: #00c192;
  /* 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 inside an Accordion in the Table. */
  --intergalactic-table-td-cell-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: #008ff8;
  /* Color for keyboard focus outline styles for elements with invalid state. */
  --intergalactic-keyboard-focus-invalid-outline: #ff4953;
  /* Keyboard focus styles for elements with invalid state. */
  --intergalactic-keyboard-focus-invalid: 0px 0px 0px 3px rgba(255, 73, 83, 0.5);
  /* Color for keyboard focus outline styles for elements with valid state. */
  --intergalactic-keyboard-focus-valid-outline: #009f81;
  /* Keyboard focus styles for elements with valid state. */
  --intergalactic-keyboard-focus-valid: 0px 0px 0px 3px rgba(0, 159, 129, 0.5);
  /* Color for keyboard focus outline styles to use on the dark and color background. */
  --intergalactic-keyboard-focus-invert-outline: rgba(255, 255, 255, 0.8);
  /* Keyboard focus styles for use on dark backgrounds. */
  --intergalactic-keyboard-focus-invert: 0px 0px 0px 3px rgba(255, 255, 255, 0.8);
  /* Default keyboard focus box-shadow styles. */
  --intergalactic-keyboard-focus: 0px 0px 0px 3px rgba(0, 143, 248, 0.5);
  /* 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);
  --intergalactic-header-bg: #382E5E;
  --intergalactic-header-border-primary: #382E5E;
  --intergalactic-header-border-secondary: rgba(255,255,255, 0.15);
  --intergalactic-sidebar-nav-control-hover: rgba(224, 225, 233, 0.7);
  --intergalactic-sidebar-nav-control-active: #E2DDFF;
  --intergalactic-sidebar-nav-control-text-normal: #6D619F;
  --intergalactic-sidebar-nav-control-text-active: #4D407E;
  --intergalactic-sidebar-nav-control-icon-normal: #9083C5;
  --intergalactic-sidebar-nav-control-icon-active: #4D407E;
  /* 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;
}
.row_PoJA {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  padding-left: 8px;
  padding-right: 4px
}
@media (min-width: 768px) {
.row_PoJA {
    padding-left: 20px;
    padding-right: 0
}
  }
.row_PoJA:last-of-type .cell_osvh {
  padding-bottom: 24px;
}
.cell_osvh {
  padding-top: 4px;
  padding-bottom: 4px;
}
.rowHeader_eYFg {
  align-items: center;
  border-bottom: 1px solid var(--gray-100);
}
.cellHeader_LlFX {
  padding: 8px 4px;
  white-space: nowrap
}
@media (min-width: 768px) {
.cellHeader_LlFX {
    padding: 8px 0;
    white-space: normal
}
  }
.rowHeader_eYFg + .rowCategory_I7Xl .cell_osvh {
  padding-top: 24px;
}
.rowSubCategory_GUiE .cell_osvh {
  padding-top: 4px;
}
.rowCategory_I7Xl + .rowCategory_I7Xl .cell_osvh {
  padding-top: 20px;
}
.rowSubCategory_GUiE + .rowCategory_I7Xl .cell_osvh {
  padding-top: 20px;
}
.cellName_DvSv {
  grid-column: 1/2;
}
.cellMyPlan_r6c0 {
  grid-column: 2/3;
  text-align: center
}
@media (min-width: 768px) {
.cellMyPlan_r6c0 {
    border-left: 1px solid var(--gray-100);
    border-right: 1px solid var(--gray-100)
}
  }
.cellBusiness_ANAi {
  grid-column: 3/4;
  text-align: center;
}

.cellTitle_r5R5 {
  align-self: center;
}

:root {
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --gray-50: #f4f5f9;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --gray-100: #e0e1e9;
  --gray-200: #c4c7cf;
  --gray-300: #a9abb6;
  --gray-400: #8a8e9b;
  --gray-500: #6c6e79;
  --gray-600: #484a54;
  --gray-700: #2b2e38;
  --gray-800: #191b23;
  --gray-white: #ffffff;
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --blue-50: #e9f7ff;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --blue-100: #c4e5fe;
  --blue-200: #8ecdff;
  --blue-300: #2bb3ff;
  --blue-400: #008ff8;
  --blue-500: #006dca;
  --blue-600: #044792;
  --blue-700: #002b5f;
  --blue-800: #001b3d;
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --green-50: #dbfee8;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --green-100: #9ef2c9;
  --green-200: #59ddaa;
  --green-300: #00c192;
  --green-400: #009f81;
  --green-500: #007c65;
  --green-600: #055345;
  --green-700: #00342d;
  --green-800: #00201e;
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --red-50: #fff0f7;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --red-100: #ffd7df;
  --red-200: #ffaeb5;
  --red-300: #ff8786;
  --red-400: #ff4953;
  --red-500: #d1002f;
  --red-600: #8e0016;
  --red-700: #58000a;
  --red-800: #410101;
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --orange-50: #fff3d9;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --orange-100: #ffdca2;
  --orange-200: #ffb26e;
  --orange-300: #ff8c43;
  --orange-400: #ff642d;
  --orange-500: #c33909;
  --orange-600: #8b1500;
  --orange-700: #551200;
  --orange-800: #351000;
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --yellow-50: #fdf7c8;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --yellow-100: #fce081;
  --yellow-200: #fdc23c;
  --yellow-300: #ef9800;
  --yellow-400: #d87900;
  --yellow-500: #a75800;
  --yellow-600: #743a00;
  --yellow-700: #462500;
  --yellow-800: #2c1600;
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --violet-50: #f9f2ff;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --violet-100: #edd9ff;
  --violet-200: #dcb8ff;
  --violet-300: #c695ff;
  --violet-400: #ab6cfe;
  --violet-500: #8649e1;
  --violet-600: #5925ab;
  --violet-700: #421983;
  --violet-800: #220358;
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --violet-dusty-50: #F5F4FF;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --violet-dusty-100: #E2DDFF;
  --violet-dusty-200: #BCB1E9;
  --violet-dusty-300: #A79CD6;
  --violet-dusty-400: #9083C5;
  --violet-dusty-500: #6D619F;
  --violet-dusty-600: #4D407E;
  --violet-dusty-700: #382E5E;
  --violet-dusty-800: #1D113E;
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --pink-50: #fff0ff;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --pink-100: #ffd3ff;
  --pink-200: #ffa9fa;
  --pink-300: #f67cf2;
  --pink-400: #e14adf;
  --pink-500: #b229b9;
  --pink-600: #7d0480;
  --pink-700: #4d0050;
  --pink-800: #340439;
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --salad-50: #ecfbcd;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --salad-100: #c7ee96;
  --salad-200: #9bd85d;
  --salad-300: #66c030;
  --salad-400: #35a21e;
  --salad-500: #0a7e22;
  --salad-600: #005613;
  --salad-700: #003509;
  --salad-800: #002203;
  /* 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: #8b1500;
  /* Background of the advertising primary control. */
  --intergalactic-control-primary-advertising: #5925ab;
  /* Hover state of the advertising primary control. */
  --intergalactic-control-primary-advertising-hover: #421983;
  /* Active (selected) state 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;
  /* ⚠️ Use only for illustrations. */
  --intergalactic-illustration-red: #FF788F;
  /* ⚠️ Use only for illustrations. */
  --intergalactic-illustration-orange: #FFB26E;
  /* ⚠️ Use only for illustrations. */
  --intergalactic-illustration-yellow: #FFE84D;
  /* ⚠️ Use only for illustrations. */
  --intergalactic-illustration-salad: #C7FA73;
  /* ⚠️ Use only for illustrations. */
  --intergalactic-illustration-green: #45E0A8;
  /* ⚠️ Use only for illustrations. */
  --intergalactic-illustration-blue: #6EDBFF;
  /* ⚠️ Use only for illustrations. */
  --intergalactic-illustration-violet: #B880FF;
  /* ⚠️ Use only for illustrations. */
  --intergalactic-illustration-pink: #FF7AD1;
  /* 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 FeaturePopover background with accent theme. */
  --intergalactic-feature-popover-bg: #fce081;
  /* Color of the outer border of the FeaturePopover.Spot for FeaturePopover with accent theme. */
  --intergalactic-feature-popover-dot-outer-border: #fce081;
  /* Color of the FeaturePopover background with neutral theme. */
  --intergalactic-feature-popover-bg-neutral: #1D113E;
  /* Color of the FeaturePopover.Spot for FeaturePopover with neutral theme. */
  --intergalactic-feature-popover-dot-neutral: #00c192;
  /* Color of the outer border of the FeaturePopover.Spot for FeaturePopover with neutral theme. */
  --intergalactic-feature-popover-dot-neutral-outer-border: #00c192;
  /* 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 inside an Accordion in the Table. */
  --intergalactic-table-td-cell-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: #008ff8;
  /* Color for keyboard focus outline styles for elements with invalid state. */
  --intergalactic-keyboard-focus-invalid-outline: #ff4953;
  /* Keyboard focus styles for elements with invalid state. */
  --intergalactic-keyboard-focus-invalid: 0px 0px 0px 3px rgba(255, 73, 83, 0.5);
  /* Color for keyboard focus outline styles for elements with valid state. */
  --intergalactic-keyboard-focus-valid-outline: #009f81;
  /* Keyboard focus styles for elements with valid state. */
  --intergalactic-keyboard-focus-valid: 0px 0px 0px 3px rgba(0, 159, 129, 0.5);
  /* Color for keyboard focus outline styles to use on the dark and color background. */
  --intergalactic-keyboard-focus-invert-outline: rgba(255, 255, 255, 0.8);
  /* Keyboard focus styles for use on dark backgrounds. */
  --intergalactic-keyboard-focus-invert: 0px 0px 0px 3px rgba(255, 255, 255, 0.8);
  /* Default keyboard focus box-shadow styles. */
  --intergalactic-keyboard-focus: 0px 0px 0px 3px rgba(0, 143, 248, 0.5);
  /* 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);
  --intergalactic-header-bg: #382E5E;
  --intergalactic-header-border-primary: #382E5E;
  --intergalactic-header-border-secondary: rgba(255,255,255, 0.15);
  --intergalactic-sidebar-nav-control-hover: rgba(224, 225, 233, 0.7);
  --intergalactic-sidebar-nav-control-active: #E2DDFF;
  --intergalactic-sidebar-nav-control-text-normal: #6D619F;
  --intergalactic-sidebar-nav-control-text-active: #4D407E;
  --intergalactic-sidebar-nav-control-icon-normal: #9083C5;
  --intergalactic-sidebar-nav-control-icon-active: #4D407E;
  /* 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;
}
.columns_h9Di {
  display: flex;
  flex-direction: column;
  gap: 24px
}
@media (min-width: 768px) {
.columns_h9Di {
    flex-direction: row;
    align-items: center;
    gap: 0
}
  }
.column_qltT {
}
@media (min-width: 768px) {
.column_qltT {
    padding-right: 24px
}
  }
.column_qltT + .column_qltT {
  border-top: 1px solid var(--gray-100);
  padding-top: 24px
}
@media (min-width: 768px) {
.column_qltT + .column_qltT {
    border-top: none;
    border-left: 1px solid var(--gray-100);
    padding-top: 0;
    padding-right: 0;
    padding-left: 24px
}
  }

.wrapper_U9EN {
  padding-top: 16px;
  padding-bottom: 32px;
}
.paymentsWidget_HY3n {
  grid-column: 1/-1
}
@media (min-width: 1920px) {
.paymentsWidget_HY3n {
    grid-column: 1/9
}
  }

:root {
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --gray-50: #f4f5f9;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --gray-100: #e0e1e9;
  --gray-200: #c4c7cf;
  --gray-300: #a9abb6;
  --gray-400: #8a8e9b;
  --gray-500: #6c6e79;
  --gray-600: #484a54;
  --gray-700: #2b2e38;
  --gray-800: #191b23;
  --gray-white: #ffffff;
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --blue-50: #e9f7ff;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --blue-100: #c4e5fe;
  --blue-200: #8ecdff;
  --blue-300: #2bb3ff;
  --blue-400: #008ff8;
  --blue-500: #006dca;
  --blue-600: #044792;
  --blue-700: #002b5f;
  --blue-800: #001b3d;
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --green-50: #dbfee8;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --green-100: #9ef2c9;
  --green-200: #59ddaa;
  --green-300: #00c192;
  --green-400: #009f81;
  --green-500: #007c65;
  --green-600: #055345;
  --green-700: #00342d;
  --green-800: #00201e;
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --red-50: #fff0f7;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --red-100: #ffd7df;
  --red-200: #ffaeb5;
  --red-300: #ff8786;
  --red-400: #ff4953;
  --red-500: #d1002f;
  --red-600: #8e0016;
  --red-700: #58000a;
  --red-800: #410101;
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --orange-50: #fff3d9;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --orange-100: #ffdca2;
  --orange-200: #ffb26e;
  --orange-300: #ff8c43;
  --orange-400: #ff642d;
  --orange-500: #c33909;
  --orange-600: #8b1500;
  --orange-700: #551200;
  --orange-800: #351000;
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --yellow-50: #fdf7c8;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --yellow-100: #fce081;
  --yellow-200: #fdc23c;
  --yellow-300: #ef9800;
  --yellow-400: #d87900;
  --yellow-500: #a75800;
  --yellow-600: #743a00;
  --yellow-700: #462500;
  --yellow-800: #2c1600;
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --violet-50: #f9f2ff;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --violet-100: #edd9ff;
  --violet-200: #dcb8ff;
  --violet-300: #c695ff;
  --violet-400: #ab6cfe;
  --violet-500: #8649e1;
  --violet-600: #5925ab;
  --violet-700: #421983;
  --violet-800: #220358;
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --violet-dusty-50: #F5F4FF;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --violet-dusty-100: #E2DDFF;
  --violet-dusty-200: #BCB1E9;
  --violet-dusty-300: #A79CD6;
  --violet-dusty-400: #9083C5;
  --violet-dusty-500: #6D619F;
  --violet-dusty-600: #4D407E;
  --violet-dusty-700: #382E5E;
  --violet-dusty-800: #1D113E;
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --pink-50: #fff0ff;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --pink-100: #ffd3ff;
  --pink-200: #ffa9fa;
  --pink-300: #f67cf2;
  --pink-400: #e14adf;
  --pink-500: #b229b9;
  --pink-600: #7d0480;
  --pink-700: #4d0050;
  --pink-800: #340439;
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --salad-50: #ecfbcd;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --salad-100: #c7ee96;
  --salad-200: #9bd85d;
  --salad-300: #66c030;
  --salad-400: #35a21e;
  --salad-500: #0a7e22;
  --salad-600: #005613;
  --salad-700: #003509;
  --salad-800: #002203;
  /* 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: #8b1500;
  /* Background of the advertising primary control. */
  --intergalactic-control-primary-advertising: #5925ab;
  /* Hover state of the advertising primary control. */
  --intergalactic-control-primary-advertising-hover: #421983;
  /* Active (selected) state 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;
  /* ⚠️ Use only for illustrations. */
  --intergalactic-illustration-red: #FF788F;
  /* ⚠️ Use only for illustrations. */
  --intergalactic-illustration-orange: #FFB26E;
  /* ⚠️ Use only for illustrations. */
  --intergalactic-illustration-yellow: #FFE84D;
  /* ⚠️ Use only for illustrations. */
  --intergalactic-illustration-salad: #C7FA73;
  /* ⚠️ Use only for illustrations. */
  --intergalactic-illustration-green: #45E0A8;
  /* ⚠️ Use only for illustrations. */
  --intergalactic-illustration-blue: #6EDBFF;
  /* ⚠️ Use only for illustrations. */
  --intergalactic-illustration-violet: #B880FF;
  /* ⚠️ Use only for illustrations. */
  --intergalactic-illustration-pink: #FF7AD1;
  /* 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 FeaturePopover background with accent theme. */
  --intergalactic-feature-popover-bg: #fce081;
  /* Color of the outer border of the FeaturePopover.Spot for FeaturePopover with accent theme. */
  --intergalactic-feature-popover-dot-outer-border: #fce081;
  /* Color of the FeaturePopover background with neutral theme. */
  --intergalactic-feature-popover-bg-neutral: #1D113E;
  /* Color of the FeaturePopover.Spot for FeaturePopover with neutral theme. */
  --intergalactic-feature-popover-dot-neutral: #00c192;
  /* Color of the outer border of the FeaturePopover.Spot for FeaturePopover with neutral theme. */
  --intergalactic-feature-popover-dot-neutral-outer-border: #00c192;
  /* 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 inside an Accordion in the Table. */
  --intergalactic-table-td-cell-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: #008ff8;
  /* Color for keyboard focus outline styles for elements with invalid state. */
  --intergalactic-keyboard-focus-invalid-outline: #ff4953;
  /* Keyboard focus styles for elements with invalid state. */
  --intergalactic-keyboard-focus-invalid: 0px 0px 0px 3px rgba(255, 73, 83, 0.5);
  /* Color for keyboard focus outline styles for elements with valid state. */
  --intergalactic-keyboard-focus-valid-outline: #009f81;
  /* Keyboard focus styles for elements with valid state. */
  --intergalactic-keyboard-focus-valid: 0px 0px 0px 3px rgba(0, 159, 129, 0.5);
  /* Color for keyboard focus outline styles to use on the dark and color background. */
  --intergalactic-keyboard-focus-invert-outline: rgba(255, 255, 255, 0.8);
  /* Keyboard focus styles for use on dark backgrounds. */
  --intergalactic-keyboard-focus-invert: 0px 0px 0px 3px rgba(255, 255, 255, 0.8);
  /* Default keyboard focus box-shadow styles. */
  --intergalactic-keyboard-focus: 0px 0px 0px 3px rgba(0, 143, 248, 0.5);
  /* 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);
  --intergalactic-header-bg: #382E5E;
  --intergalactic-header-border-primary: #382E5E;
  --intergalactic-header-border-secondary: rgba(255,255,255, 0.15);
  --intergalactic-sidebar-nav-control-hover: rgba(224, 225, 233, 0.7);
  --intergalactic-sidebar-nav-control-active: #E2DDFF;
  --intergalactic-sidebar-nav-control-text-normal: #6D619F;
  --intergalactic-sidebar-nav-control-text-active: #4D407E;
  --intergalactic-sidebar-nav-control-icon-normal: #9083C5;
  --intergalactic-sidebar-nav-control-icon-active: #4D407E;
  /* 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;
}

.button__56G {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  color: var(--gray-500);
  background-color: rgb(138 142 155 / 10%);
  height: 28px;
  border-radius: var(--rounded-m);
  white-space: nowrap;
  text-decoration: none;
  border: 1px solid var(--gray-200);
  padding-left: 8px;
  padding-right: 8px
}

.button__56G:focus-visible {
    box-shadow: 0 0 0 3px rgb(0 143 248 / 30%);
  }

.button__56G:active,
  .button__56G:hover,
  .button__56G:focus {
    outline: 0;
    text-decoration: none;
  }

.button__56G:hover {
    background-color: rgb(138 142 155 / 20%);
    color: var(--gray-800);
  }

.button__56G:active {
    background-color: rgb(138 142 155 / 30%);
    color: var(--gray-800);
  }

:root {
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --gray-50: #f4f5f9;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --gray-100: #e0e1e9;
  --gray-200: #c4c7cf;
  --gray-300: #a9abb6;
  --gray-400: #8a8e9b;
  --gray-500: #6c6e79;
  --gray-600: #484a54;
  --gray-700: #2b2e38;
  --gray-800: #191b23;
  --gray-white: #ffffff;
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --blue-50: #e9f7ff;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --blue-100: #c4e5fe;
  --blue-200: #8ecdff;
  --blue-300: #2bb3ff;
  --blue-400: #008ff8;
  --blue-500: #006dca;
  --blue-600: #044792;
  --blue-700: #002b5f;
  --blue-800: #001b3d;
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --green-50: #dbfee8;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --green-100: #9ef2c9;
  --green-200: #59ddaa;
  --green-300: #00c192;
  --green-400: #009f81;
  --green-500: #007c65;
  --green-600: #055345;
  --green-700: #00342d;
  --green-800: #00201e;
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --red-50: #fff0f7;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --red-100: #ffd7df;
  --red-200: #ffaeb5;
  --red-300: #ff8786;
  --red-400: #ff4953;
  --red-500: #d1002f;
  --red-600: #8e0016;
  --red-700: #58000a;
  --red-800: #410101;
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --orange-50: #fff3d9;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --orange-100: #ffdca2;
  --orange-200: #ffb26e;
  --orange-300: #ff8c43;
  --orange-400: #ff642d;
  --orange-500: #c33909;
  --orange-600: #8b1500;
  --orange-700: #551200;
  --orange-800: #351000;
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --yellow-50: #fdf7c8;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --yellow-100: #fce081;
  --yellow-200: #fdc23c;
  --yellow-300: #ef9800;
  --yellow-400: #d87900;
  --yellow-500: #a75800;
  --yellow-600: #743a00;
  --yellow-700: #462500;
  --yellow-800: #2c1600;
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --violet-50: #f9f2ff;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --violet-100: #edd9ff;
  --violet-200: #dcb8ff;
  --violet-300: #c695ff;
  --violet-400: #ab6cfe;
  --violet-500: #8649e1;
  --violet-600: #5925ab;
  --violet-700: #421983;
  --violet-800: #220358;
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --violet-dusty-50: #F5F4FF;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --violet-dusty-100: #E2DDFF;
  --violet-dusty-200: #BCB1E9;
  --violet-dusty-300: #A79CD6;
  --violet-dusty-400: #9083C5;
  --violet-dusty-500: #6D619F;
  --violet-dusty-600: #4D407E;
  --violet-dusty-700: #382E5E;
  --violet-dusty-800: #1D113E;
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --pink-50: #fff0ff;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --pink-100: #ffd3ff;
  --pink-200: #ffa9fa;
  --pink-300: #f67cf2;
  --pink-400: #e14adf;
  --pink-500: #b229b9;
  --pink-600: #7d0480;
  --pink-700: #4d0050;
  --pink-800: #340439;
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --salad-50: #ecfbcd;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --salad-100: #c7ee96;
  --salad-200: #9bd85d;
  --salad-300: #66c030;
  --salad-400: #35a21e;
  --salad-500: #0a7e22;
  --salad-600: #005613;
  --salad-700: #003509;
  --salad-800: #002203;
  /* 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: #8b1500;
  /* Background of the advertising primary control. */
  --intergalactic-control-primary-advertising: #5925ab;
  /* Hover state of the advertising primary control. */
  --intergalactic-control-primary-advertising-hover: #421983;
  /* Active (selected) state 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;
  /* ⚠️ Use only for illustrations. */
  --intergalactic-illustration-red: #FF788F;
  /* ⚠️ Use only for illustrations. */
  --intergalactic-illustration-orange: #FFB26E;
  /* ⚠️ Use only for illustrations. */
  --intergalactic-illustration-yellow: #FFE84D;
  /* ⚠️ Use only for illustrations. */
  --intergalactic-illustration-salad: #C7FA73;
  /* ⚠️ Use only for illustrations. */
  --intergalactic-illustration-green: #45E0A8;
  /* ⚠️ Use only for illustrations. */
  --intergalactic-illustration-blue: #6EDBFF;
  /* ⚠️ Use only for illustrations. */
  --intergalactic-illustration-violet: #B880FF;
  /* ⚠️ Use only for illustrations. */
  --intergalactic-illustration-pink: #FF7AD1;
  /* 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 FeaturePopover background with accent theme. */
  --intergalactic-feature-popover-bg: #fce081;
  /* Color of the outer border of the FeaturePopover.Spot for FeaturePopover with accent theme. */
  --intergalactic-feature-popover-dot-outer-border: #fce081;
  /* Color of the FeaturePopover background with neutral theme. */
  --intergalactic-feature-popover-bg-neutral: #1D113E;
  /* Color of the FeaturePopover.Spot for FeaturePopover with neutral theme. */
  --intergalactic-feature-popover-dot-neutral: #00c192;
  /* Color of the outer border of the FeaturePopover.Spot for FeaturePopover with neutral theme. */
  --intergalactic-feature-popover-dot-neutral-outer-border: #00c192;
  /* 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 inside an Accordion in the Table. */
  --intergalactic-table-td-cell-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: #008ff8;
  /* Color for keyboard focus outline styles for elements with invalid state. */
  --intergalactic-keyboard-focus-invalid-outline: #ff4953;
  /* Keyboard focus styles for elements with invalid state. */
  --intergalactic-keyboard-focus-invalid: 0px 0px 0px 3px rgba(255, 73, 83, 0.5);
  /* Color for keyboard focus outline styles for elements with valid state. */
  --intergalactic-keyboard-focus-valid-outline: #009f81;
  /* Keyboard focus styles for elements with valid state. */
  --intergalactic-keyboard-focus-valid: 0px 0px 0px 3px rgba(0, 159, 129, 0.5);
  /* Color for keyboard focus outline styles to use on the dark and color background. */
  --intergalactic-keyboard-focus-invert-outline: rgba(255, 255, 255, 0.8);
  /* Keyboard focus styles for use on dark backgrounds. */
  --intergalactic-keyboard-focus-invert: 0px 0px 0px 3px rgba(255, 255, 255, 0.8);
  /* Default keyboard focus box-shadow styles. */
  --intergalactic-keyboard-focus: 0px 0px 0px 3px rgba(0, 143, 248, 0.5);
  /* 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);
  --intergalactic-header-bg: #382E5E;
  --intergalactic-header-border-primary: #382E5E;
  --intergalactic-header-border-secondary: rgba(255,255,255, 0.15);
  --intergalactic-sidebar-nav-control-hover: rgba(224, 225, 233, 0.7);
  --intergalactic-sidebar-nav-control-active: #E2DDFF;
  --intergalactic-sidebar-nav-control-text-normal: #6D619F;
  --intergalactic-sidebar-nav-control-text-active: #4D407E;
  --intergalactic-sidebar-nav-control-icon-normal: #9083C5;
  --intergalactic-sidebar-nav-control-icon-active: #4D407E;
  /* 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;
}

.wraper_PHan {
  width: 100%;
  overflow: auto hidden;
}

.wraper_PHan [role="columnheader"]:not(:first-child) {
  border-left: 1px solid var(--intergalactic-border-secondary, #e0e1e9);
}

.wraper_PHan [name="paymentMethod"] {
  padding-right: 0;
}

.wraper_PHan [name="invoiceLink"] {
  justify-content: center;
}

.pageForm_t7Tx .pageInput_fg2Z * {
  /* Needed for correct display of Input.Addon */
  box-sizing: content-box;
}

.header_na0D {
  margin-bottom: 14px;
}

.table_QyL7 {
  margin: 0 -20px;
}

.wrapper_dj9j {
  flex-direction: column
}

  @media (min-width: 768px) {.wrapper_dj9j {
    align-items: center;
    flex-direction: row
}
  }
.inputWrapper_YOYE {
  margin-left: 4px;
  display: flex;
  flex: 0;
  width: 100%
}
@media (min-width: 768px) {
.inputWrapper_YOYE {
    width: auto
}
  }

.button_vGOb:hover > .icon_tadM {
  color: var(--gray-500);
}

@media (hover: hover) {
  .button_YDrF:hover > .icon_keA5 {
    color: var(--gray-500);
  }
}

.wrapper_JroZ {
  padding-top: 16px;
  padding-bottom: 32px;
}
.infoWidget_O2po {
  grid-column: 1/5
}
@media (min-width: 768px) {
.infoWidget_O2po {
    grid-column: 1/5
}
  }
@media (min-width: 1280px) {
.infoWidget_O2po {
    grid-column: 1/8
}
  }
@media (min-width: 1920px) {
.infoWidget_O2po {
    grid-column: 1/6
}
  }
.cardWidget_WAno {
  grid-column: 1/5
}
@media (min-width: 768px) {
.cardWidget_WAno {
    grid-column: 5/7
}
  }
@media (min-width: 1280px) {
.cardWidget_WAno {
    grid-column: 8/13
}
  }
@media (min-width: 1920px) {
.cardWidget_WAno {
    grid-column: 6/9
}
  }

.header_hoA8 {
  display: flex;
  align-items: center;
}

.cardTitle_JLUo {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.fieldsList_q7ni {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 8px
}

  @media (min-width: 768px) {.fieldsList_q7ni {
    grid-template-columns: min-content 1fr;
    grid-gap: 12px 24px
}
  }

.infoIcon_pfL0 {
  border-radius: 4px;
}

.footer_K8qX {
  border-radius: 0 0 12px 12px;
  margin-left: -24px;
  margin-right: -24px;
  padding: 24px
}

  @media (min-width: 768px) {.footer_K8qX {
    margin-left: -40px;
    margin-right: -40px;
    padding: 40px;
    padding-top: 24px
}
  }
.fieldsOverlayWrapper_OcBl {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255 255 255 / 90%);
  display: flex;
  justify-content: center;
  align-items: center;
}
.rowLabel_Iu6o {
  word-break: break-word
}
@media (min-width: 768px) {
.rowLabel_Iu6o {
    word-break: normal
}
  }
.spinContainer_dFO0 {
  position: relative;
  padding-top: 4px;
}
.visuallyhidden__O6u {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.modalWindow_eHAI {
  padding: 24px 24px 0
}
  
  @media (min-width: 768px) {.modalWindow_eHAI {
    padding: 40px 40px 0
}
  }

.wrapper_Wn5l {
  background-color: var(--gray-50);
  border-radius: 6px;
}

.wrapper_fGAR {
  background-color: var(--gray-50);
  border-radius: 6px;
}

.cardholder_y_i6 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.wrapper_EVhj {
  background-color: var(--gray-50);
  border-radius: 6px;
}

.divider_X9zP.divider_X9zP {
  background-color: var(--gray-100);
}

.wrapper_mQXK {
  flex: 1;
  padding-top: 16px;
  padding-bottom: 32px;
  min-height: 300px;
}
.creditsWidget_d9cx {
  grid-column: 1 / -1
}
@media (min-width: 1920px) {
.creditsWidget_d9cx {
    grid-column: 1/9
}
  }
.depositHistoryWidget_J6l6 {
  grid-column: 1 / -1
}
@media (min-width: 1920px) {
.depositHistoryWidget_J6l6 {
    grid-column: 1/9
}
  }
.pageNotFound_Mq7w {
  grid-column: 1 / -1
}
@media (min-width: 1920px) {
.pageNotFound_Mq7w {
    grid-column: 1/9
}
  }
.spinnerWrapper_JBgQ {
  grid-column: 1/-1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center
}
@media (min-width: 768px) {
.spinnerWrapper_JBgQ {
    justify-content: flex-start;
    margin-top: 140px
}
  }

:root {
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --gray-50: #f4f5f9;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --gray-100: #e0e1e9;
  --gray-200: #c4c7cf;
  --gray-300: #a9abb6;
  --gray-400: #8a8e9b;
  --gray-500: #6c6e79;
  --gray-600: #484a54;
  --gray-700: #2b2e38;
  --gray-800: #191b23;
  --gray-white: #ffffff;
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --blue-50: #e9f7ff;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --blue-100: #c4e5fe;
  --blue-200: #8ecdff;
  --blue-300: #2bb3ff;
  --blue-400: #008ff8;
  --blue-500: #006dca;
  --blue-600: #044792;
  --blue-700: #002b5f;
  --blue-800: #001b3d;
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --green-50: #dbfee8;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --green-100: #9ef2c9;
  --green-200: #59ddaa;
  --green-300: #00c192;
  --green-400: #009f81;
  --green-500: #007c65;
  --green-600: #055345;
  --green-700: #00342d;
  --green-800: #00201e;
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --red-50: #fff0f7;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --red-100: #ffd7df;
  --red-200: #ffaeb5;
  --red-300: #ff8786;
  --red-400: #ff4953;
  --red-500: #d1002f;
  --red-600: #8e0016;
  --red-700: #58000a;
  --red-800: #410101;
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --orange-50: #fff3d9;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --orange-100: #ffdca2;
  --orange-200: #ffb26e;
  --orange-300: #ff8c43;
  --orange-400: #ff642d;
  --orange-500: #c33909;
  --orange-600: #8b1500;
  --orange-700: #551200;
  --orange-800: #351000;
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --yellow-50: #fdf7c8;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --yellow-100: #fce081;
  --yellow-200: #fdc23c;
  --yellow-300: #ef9800;
  --yellow-400: #d87900;
  --yellow-500: #a75800;
  --yellow-600: #743a00;
  --yellow-700: #462500;
  --yellow-800: #2c1600;
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --violet-50: #f9f2ff;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --violet-100: #edd9ff;
  --violet-200: #dcb8ff;
  --violet-300: #c695ff;
  --violet-400: #ab6cfe;
  --violet-500: #8649e1;
  --violet-600: #5925ab;
  --violet-700: #421983;
  --violet-800: #220358;
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --violet-dusty-50: #F5F4FF;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --violet-dusty-100: #E2DDFF;
  --violet-dusty-200: #BCB1E9;
  --violet-dusty-300: #A79CD6;
  --violet-dusty-400: #9083C5;
  --violet-dusty-500: #6D619F;
  --violet-dusty-600: #4D407E;
  --violet-dusty-700: #382E5E;
  --violet-dusty-800: #1D113E;
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --pink-50: #fff0ff;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --pink-100: #ffd3ff;
  --pink-200: #ffa9fa;
  --pink-300: #f67cf2;
  --pink-400: #e14adf;
  --pink-500: #b229b9;
  --pink-600: #7d0480;
  --pink-700: #4d0050;
  --pink-800: #340439;
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --salad-50: #ecfbcd;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --salad-100: #c7ee96;
  --salad-200: #9bd85d;
  --salad-300: #66c030;
  --salad-400: #35a21e;
  --salad-500: #0a7e22;
  --salad-600: #005613;
  --salad-700: #003509;
  --salad-800: #002203;
  /* 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: #8b1500;
  /* Background of the advertising primary control. */
  --intergalactic-control-primary-advertising: #5925ab;
  /* Hover state of the advertising primary control. */
  --intergalactic-control-primary-advertising-hover: #421983;
  /* Active (selected) state 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;
  /* ⚠️ Use only for illustrations. */
  --intergalactic-illustration-red: #FF788F;
  /* ⚠️ Use only for illustrations. */
  --intergalactic-illustration-orange: #FFB26E;
  /* ⚠️ Use only for illustrations. */
  --intergalactic-illustration-yellow: #FFE84D;
  /* ⚠️ Use only for illustrations. */
  --intergalactic-illustration-salad: #C7FA73;
  /* ⚠️ Use only for illustrations. */
  --intergalactic-illustration-green: #45E0A8;
  /* ⚠️ Use only for illustrations. */
  --intergalactic-illustration-blue: #6EDBFF;
  /* ⚠️ Use only for illustrations. */
  --intergalactic-illustration-violet: #B880FF;
  /* ⚠️ Use only for illustrations. */
  --intergalactic-illustration-pink: #FF7AD1;
  /* 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 FeaturePopover background with accent theme. */
  --intergalactic-feature-popover-bg: #fce081;
  /* Color of the outer border of the FeaturePopover.Spot for FeaturePopover with accent theme. */
  --intergalactic-feature-popover-dot-outer-border: #fce081;
  /* Color of the FeaturePopover background with neutral theme. */
  --intergalactic-feature-popover-bg-neutral: #1D113E;
  /* Color of the FeaturePopover.Spot for FeaturePopover with neutral theme. */
  --intergalactic-feature-popover-dot-neutral: #00c192;
  /* Color of the outer border of the FeaturePopover.Spot for FeaturePopover with neutral theme. */
  --intergalactic-feature-popover-dot-neutral-outer-border: #00c192;
  /* 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 inside an Accordion in the Table. */
  --intergalactic-table-td-cell-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: #008ff8;
  /* Color for keyboard focus outline styles for elements with invalid state. */
  --intergalactic-keyboard-focus-invalid-outline: #ff4953;
  /* Keyboard focus styles for elements with invalid state. */
  --intergalactic-keyboard-focus-invalid: 0px 0px 0px 3px rgba(255, 73, 83, 0.5);
  /* Color for keyboard focus outline styles for elements with valid state. */
  --intergalactic-keyboard-focus-valid-outline: #009f81;
  /* Keyboard focus styles for elements with valid state. */
  --intergalactic-keyboard-focus-valid: 0px 0px 0px 3px rgba(0, 159, 129, 0.5);
  /* Color for keyboard focus outline styles to use on the dark and color background. */
  --intergalactic-keyboard-focus-invert-outline: rgba(255, 255, 255, 0.8);
  /* Keyboard focus styles for use on dark backgrounds. */
  --intergalactic-keyboard-focus-invert: 0px 0px 0px 3px rgba(255, 255, 255, 0.8);
  /* Default keyboard focus box-shadow styles. */
  --intergalactic-keyboard-focus: 0px 0px 0px 3px rgba(0, 143, 248, 0.5);
  /* 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);
  --intergalactic-header-bg: #382E5E;
  --intergalactic-header-border-primary: #382E5E;
  --intergalactic-header-border-secondary: rgba(255,255,255, 0.15);
  --intergalactic-sidebar-nav-control-hover: rgba(224, 225, 233, 0.7);
  --intergalactic-sidebar-nav-control-active: #E2DDFF;
  --intergalactic-sidebar-nav-control-text-normal: #6D619F;
  --intergalactic-sidebar-nav-control-text-active: #4D407E;
  --intergalactic-sidebar-nav-control-icon-normal: #9083C5;
  --intergalactic-sidebar-nav-control-icon-active: #4D407E;
  /* 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;
}
.columns_TJao {
  display: flex;
  flex-direction: column;
  gap: 24px
}
@media (min-width: 768px) {
.columns_TJao {
    flex-direction: row;
    gap: 0
}
  }
.column_nP54 {
}
@media (min-width: 768px) {
.column_nP54 {
    padding-right: 24px
}
  }
.column_nP54 + .column_nP54 {
  border-top: 1px solid var(--gray-100);
  padding-top: 24px
}
@media (min-width: 768px) {
.column_nP54 + .column_nP54 {
    border-top: none;
    border-left: 1px solid var(--gray-100);
    padding-top: 0;
    padding-left: 24px
}
  }
.column_nP54:last-of-type {
}
@media (min-width: 768px) {
.column_nP54:last-of-type {
    padding-right: 0
}
  }

.wrapper_Hzil {
  display: grid;
  grid-template-columns: min-content min-content;
  gap: 4px 8px;
}

.caption_enYJ {
  white-space: nowrap;
}

.number_NmDd {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

:root {
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --gray-50: #f4f5f9;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --gray-100: #e0e1e9;
  --gray-200: #c4c7cf;
  --gray-300: #a9abb6;
  --gray-400: #8a8e9b;
  --gray-500: #6c6e79;
  --gray-600: #484a54;
  --gray-700: #2b2e38;
  --gray-800: #191b23;
  --gray-white: #ffffff;
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --blue-50: #e9f7ff;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --blue-100: #c4e5fe;
  --blue-200: #8ecdff;
  --blue-300: #2bb3ff;
  --blue-400: #008ff8;
  --blue-500: #006dca;
  --blue-600: #044792;
  --blue-700: #002b5f;
  --blue-800: #001b3d;
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --green-50: #dbfee8;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --green-100: #9ef2c9;
  --green-200: #59ddaa;
  --green-300: #00c192;
  --green-400: #009f81;
  --green-500: #007c65;
  --green-600: #055345;
  --green-700: #00342d;
  --green-800: #00201e;
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --red-50: #fff0f7;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --red-100: #ffd7df;
  --red-200: #ffaeb5;
  --red-300: #ff8786;
  --red-400: #ff4953;
  --red-500: #d1002f;
  --red-600: #8e0016;
  --red-700: #58000a;
  --red-800: #410101;
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --orange-50: #fff3d9;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --orange-100: #ffdca2;
  --orange-200: #ffb26e;
  --orange-300: #ff8c43;
  --orange-400: #ff642d;
  --orange-500: #c33909;
  --orange-600: #8b1500;
  --orange-700: #551200;
  --orange-800: #351000;
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --yellow-50: #fdf7c8;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --yellow-100: #fce081;
  --yellow-200: #fdc23c;
  --yellow-300: #ef9800;
  --yellow-400: #d87900;
  --yellow-500: #a75800;
  --yellow-600: #743a00;
  --yellow-700: #462500;
  --yellow-800: #2c1600;
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --violet-50: #f9f2ff;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --violet-100: #edd9ff;
  --violet-200: #dcb8ff;
  --violet-300: #c695ff;
  --violet-400: #ab6cfe;
  --violet-500: #8649e1;
  --violet-600: #5925ab;
  --violet-700: #421983;
  --violet-800: #220358;
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --violet-dusty-50: #F5F4FF;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --violet-dusty-100: #E2DDFF;
  --violet-dusty-200: #BCB1E9;
  --violet-dusty-300: #A79CD6;
  --violet-dusty-400: #9083C5;
  --violet-dusty-500: #6D619F;
  --violet-dusty-600: #4D407E;
  --violet-dusty-700: #382E5E;
  --violet-dusty-800: #1D113E;
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --pink-50: #fff0ff;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --pink-100: #ffd3ff;
  --pink-200: #ffa9fa;
  --pink-300: #f67cf2;
  --pink-400: #e14adf;
  --pink-500: #b229b9;
  --pink-600: #7d0480;
  --pink-700: #4d0050;
  --pink-800: #340439;
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --salad-50: #ecfbcd;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --salad-100: #c7ee96;
  --salad-200: #9bd85d;
  --salad-300: #66c030;
  --salad-400: #35a21e;
  --salad-500: #0a7e22;
  --salad-600: #005613;
  --salad-700: #003509;
  --salad-800: #002203;
  /* 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: #8b1500;
  /* Background of the advertising primary control. */
  --intergalactic-control-primary-advertising: #5925ab;
  /* Hover state of the advertising primary control. */
  --intergalactic-control-primary-advertising-hover: #421983;
  /* Active (selected) state 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;
  /* ⚠️ Use only for illustrations. */
  --intergalactic-illustration-red: #FF788F;
  /* ⚠️ Use only for illustrations. */
  --intergalactic-illustration-orange: #FFB26E;
  /* ⚠️ Use only for illustrations. */
  --intergalactic-illustration-yellow: #FFE84D;
  /* ⚠️ Use only for illustrations. */
  --intergalactic-illustration-salad: #C7FA73;
  /* ⚠️ Use only for illustrations. */
  --intergalactic-illustration-green: #45E0A8;
  /* ⚠️ Use only for illustrations. */
  --intergalactic-illustration-blue: #6EDBFF;
  /* ⚠️ Use only for illustrations. */
  --intergalactic-illustration-violet: #B880FF;
  /* ⚠️ Use only for illustrations. */
  --intergalactic-illustration-pink: #FF7AD1;
  /* 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 FeaturePopover background with accent theme. */
  --intergalactic-feature-popover-bg: #fce081;
  /* Color of the outer border of the FeaturePopover.Spot for FeaturePopover with accent theme. */
  --intergalactic-feature-popover-dot-outer-border: #fce081;
  /* Color of the FeaturePopover background with neutral theme. */
  --intergalactic-feature-popover-bg-neutral: #1D113E;
  /* Color of the FeaturePopover.Spot for FeaturePopover with neutral theme. */
  --intergalactic-feature-popover-dot-neutral: #00c192;
  /* Color of the outer border of the FeaturePopover.Spot for FeaturePopover with neutral theme. */
  --intergalactic-feature-popover-dot-neutral-outer-border: #00c192;
  /* 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 inside an Accordion in the Table. */
  --intergalactic-table-td-cell-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: #008ff8;
  /* Color for keyboard focus outline styles for elements with invalid state. */
  --intergalactic-keyboard-focus-invalid-outline: #ff4953;
  /* Keyboard focus styles for elements with invalid state. */
  --intergalactic-keyboard-focus-invalid: 0px 0px 0px 3px rgba(255, 73, 83, 0.5);
  /* Color for keyboard focus outline styles for elements with valid state. */
  --intergalactic-keyboard-focus-valid-outline: #009f81;
  /* Keyboard focus styles for elements with valid state. */
  --intergalactic-keyboard-focus-valid: 0px 0px 0px 3px rgba(0, 159, 129, 0.5);
  /* Color for keyboard focus outline styles to use on the dark and color background. */
  --intergalactic-keyboard-focus-invert-outline: rgba(255, 255, 255, 0.8);
  /* Keyboard focus styles for use on dark backgrounds. */
  --intergalactic-keyboard-focus-invert: 0px 0px 0px 3px rgba(255, 255, 255, 0.8);
  /* Default keyboard focus box-shadow styles. */
  --intergalactic-keyboard-focus: 0px 0px 0px 3px rgba(0, 143, 248, 0.5);
  /* 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);
  --intergalactic-header-bg: #382E5E;
  --intergalactic-header-border-primary: #382E5E;
  --intergalactic-header-border-secondary: rgba(255,255,255, 0.15);
  --intergalactic-sidebar-nav-control-hover: rgba(224, 225, 233, 0.7);
  --intergalactic-sidebar-nav-control-active: #E2DDFF;
  --intergalactic-sidebar-nav-control-text-normal: #6D619F;
  --intergalactic-sidebar-nav-control-text-active: #4D407E;
  --intergalactic-sidebar-nav-control-icon-normal: #9083C5;
  --intergalactic-sidebar-nav-control-icon-active: #4D407E;
  /* 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;
}

.wrapper_KDDa [role="columnheader"]:not(:first-child) {
  border-left: 1px solid var(--intergalactic-border-secondary, #e0e1e9);
}


.creditsNotification_ePNL {
  position: relative;
  gap: 12px;
  grid-column: 1 / -1;
  flex-wrap: wrap
}

  @media (min-width: 768px) {.creditsNotification_ePNL {
    flex-wrap: nowrap
}
  }

  @media (min-width: 1920px) {.creditsNotification_ePNL {
    grid-column: 1/9
}
  }
.closeIcon_o1B2 {
  position: absolute;
  top: 16px;
  right: 16px
}
@media (min-width: 768px) {
.closeIcon_o1B2 {
    position: initial
}
  }

:root {
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --gray-50: #f4f5f9;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --gray-100: #e0e1e9;
  --gray-200: #c4c7cf;
  --gray-300: #a9abb6;
  --gray-400: #8a8e9b;
  --gray-500: #6c6e79;
  --gray-600: #484a54;
  --gray-700: #2b2e38;
  --gray-800: #191b23;
  --gray-white: #ffffff;
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --blue-50: #e9f7ff;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --blue-100: #c4e5fe;
  --blue-200: #8ecdff;
  --blue-300: #2bb3ff;
  --blue-400: #008ff8;
  --blue-500: #006dca;
  --blue-600: #044792;
  --blue-700: #002b5f;
  --blue-800: #001b3d;
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --green-50: #dbfee8;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --green-100: #9ef2c9;
  --green-200: #59ddaa;
  --green-300: #00c192;
  --green-400: #009f81;
  --green-500: #007c65;
  --green-600: #055345;
  --green-700: #00342d;
  --green-800: #00201e;
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --red-50: #fff0f7;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --red-100: #ffd7df;
  --red-200: #ffaeb5;
  --red-300: #ff8786;
  --red-400: #ff4953;
  --red-500: #d1002f;
  --red-600: #8e0016;
  --red-700: #58000a;
  --red-800: #410101;
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --orange-50: #fff3d9;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --orange-100: #ffdca2;
  --orange-200: #ffb26e;
  --orange-300: #ff8c43;
  --orange-400: #ff642d;
  --orange-500: #c33909;
  --orange-600: #8b1500;
  --orange-700: #551200;
  --orange-800: #351000;
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --yellow-50: #fdf7c8;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --yellow-100: #fce081;
  --yellow-200: #fdc23c;
  --yellow-300: #ef9800;
  --yellow-400: #d87900;
  --yellow-500: #a75800;
  --yellow-600: #743a00;
  --yellow-700: #462500;
  --yellow-800: #2c1600;
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --violet-50: #f9f2ff;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --violet-100: #edd9ff;
  --violet-200: #dcb8ff;
  --violet-300: #c695ff;
  --violet-400: #ab6cfe;
  --violet-500: #8649e1;
  --violet-600: #5925ab;
  --violet-700: #421983;
  --violet-800: #220358;
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --violet-dusty-50: #F5F4FF;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --violet-dusty-100: #E2DDFF;
  --violet-dusty-200: #BCB1E9;
  --violet-dusty-300: #A79CD6;
  --violet-dusty-400: #9083C5;
  --violet-dusty-500: #6D619F;
  --violet-dusty-600: #4D407E;
  --violet-dusty-700: #382E5E;
  --violet-dusty-800: #1D113E;
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --pink-50: #fff0ff;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --pink-100: #ffd3ff;
  --pink-200: #ffa9fa;
  --pink-300: #f67cf2;
  --pink-400: #e14adf;
  --pink-500: #b229b9;
  --pink-600: #7d0480;
  --pink-700: #4d0050;
  --pink-800: #340439;
  /* Only suitable for backgrounds. Can be completely invisible to users with low-contrast monitor or poor vision. */
  --salad-50: #ecfbcd;
  /* Use only for light strokes and active backgrounds. Suitable for minimally visible elements. */
  --salad-100: #c7ee96;
  --salad-200: #9bd85d;
  --salad-300: #66c030;
  --salad-400: #35a21e;
  --salad-500: #0a7e22;
  --salad-600: #005613;
  --salad-700: #003509;
  --salad-800: #002203;
  /* 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: #8b1500;
  /* Background of the advertising primary control. */
  --intergalactic-control-primary-advertising: #5925ab;
  /* Hover state of the advertising primary control. */
  --intergalactic-control-primary-advertising-hover: #421983;
  /* Active (selected) state 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;
  /* ⚠️ Use only for illustrations. */
  --intergalactic-illustration-red: #FF788F;
  /* ⚠️ Use only for illustrations. */
  --intergalactic-illustration-orange: #FFB26E;
  /* ⚠️ Use only for illustrations. */
  --intergalactic-illustration-yellow: #FFE84D;
  /* ⚠️ Use only for illustrations. */
  --intergalactic-illustration-salad: #C7FA73;
  /* ⚠️ Use only for illustrations. */
  --intergalactic-illustration-green: #45E0A8;
  /* ⚠️ Use only for illustrations. */
  --intergalactic-illustration-blue: #6EDBFF;
  /* ⚠️ Use only for illustrations. */
  --intergalactic-illustration-violet: #B880FF;
  /* ⚠️ Use only for illustrations. */
  --intergalactic-illustration-pink: #FF7AD1;
  /* 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 FeaturePopover background with accent theme. */
  --intergalactic-feature-popover-bg: #fce081;
  /* Color of the outer border of the FeaturePopover.Spot for FeaturePopover with accent theme. */
  --intergalactic-feature-popover-dot-outer-border: #fce081;
  /* Color of the FeaturePopover background with neutral theme. */
  --intergalactic-feature-popover-bg-neutral: #1D113E;
  /* Color of the FeaturePopover.Spot for FeaturePopover with neutral theme. */
  --intergalactic-feature-popover-dot-neutral: #00c192;
  /* Color of the outer border of the FeaturePopover.Spot for FeaturePopover with neutral theme. */
  --intergalactic-feature-popover-dot-neutral-outer-border: #00c192;
  /* 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 inside an Accordion in the Table. */
  --intergalactic-table-td-cell-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: #008ff8;
  /* Color for keyboard focus outline styles for elements with invalid state. */
  --intergalactic-keyboard-focus-invalid-outline: #ff4953;
  /* Keyboard focus styles for elements with invalid state. */
  --intergalactic-keyboard-focus-invalid: 0px 0px 0px 3px rgba(255, 73, 83, 0.5);
  /* Color for keyboard focus outline styles for elements with valid state. */
  --intergalactic-keyboard-focus-valid-outline: #009f81;
  /* Keyboard focus styles for elements with valid state. */
  --intergalactic-keyboard-focus-valid: 0px 0px 0px 3px rgba(0, 159, 129, 0.5);
  /* Color for keyboard focus outline styles to use on the dark and color background. */
  --intergalactic-keyboard-focus-invert-outline: rgba(255, 255, 255, 0.8);
  /* Keyboard focus styles for use on dark backgrounds. */
  --intergalactic-keyboard-focus-invert: 0px 0px 0px 3px rgba(255, 255, 255, 0.8);
  /* Default keyboard focus box-shadow styles. */
  --intergalactic-keyboard-focus: 0px 0px 0px 3px rgba(0, 143, 248, 0.5);
  /* 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);
  --intergalactic-header-bg: #382E5E;
  --intergalactic-header-border-primary: #382E5E;
  --intergalactic-header-border-secondary: rgba(255,255,255, 0.15);
  --intergalactic-sidebar-nav-control-hover: rgba(224, 225, 233, 0.7);
  --intergalactic-sidebar-nav-control-active: #E2DDFF;
  --intergalactic-sidebar-nav-control-text-normal: #6D619F;
  --intergalactic-sidebar-nav-control-text-active: #4D407E;
  --intergalactic-sidebar-nav-control-icon-normal: #9083C5;
  --intergalactic-sidebar-nav-control-icon-active: #4D407E;
  /* 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 {
  --app-center-button-width: 120px;
  --app-center-column-padding: 20px;
  --app-center-column-width: calc(var(--app-center-button-width) + var(--app-center-column-padding));
}
.subscription-info-root {
  height: 100%;
  font-family: Inter, sans-serif;
  overflow: hidden;
}
.subscription-info-root *,
.subscription-info-root *::before,
.subscription-info-root *::after {
  box-sizing: border-box;
}


/*# sourceMappingURL=main.50b285d0.css.map*/