.Theme {
  --graphics-size-xs: 12px;
  --graphics-size-s: 16px;
  --graphics-size-m: 24px;
  --graphics-size-l: 32px;
  --graphics-size-xl: 40px;
  --graphics-size-2xl: 60px;
  --graphics-size-3xl: 80px;
  --graphics-size-4xl: 120px;
}

  .Theme *::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  .Theme *::-webkit-scrollbar-track {
    background-color: var(--color-scroll-bg);
  }

  .Theme *::-webkit-scrollbar-corner {
    background-color: var(--color-scroll-bg);
  }

  .Theme *::-webkit-scrollbar-thumb {
    background-color: var(--color-scroll-thumb);
    border-radius: 4px;
  }

  .Theme *::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-scroll-thumb-hover);
  }

/* stylelint-disable */
.Theme_color_ssoLight {
  /* //////////////////////////////
  // Цвета фонов /////////////// */
  --color-bg-default: rgb(255, 255, 255); /* Цвет дефолта */
  --color-bg-secondary: #f7f9fb; /* Цвет дефолта */
  --color-bg-brand: rgb(0, 113, 178); /* Цвет фона брендированый */
  --color-bg-link: rgb(34, 195, 142); /* Цвет фона ссылки */
  --color-bg-border: rgba(0, 65, 102, 0.2); /* Цвет границ */
  --color-bg-stripe:
    rgba(0, 32, 51, 0.05); /* Цвет зебры (например, при окрашивании фона строк таблицы через одну) */

  --color-bg-ghost: rgba(0, 32, 51, 0.08); /* Цвет затенения */
  --color-bg-tone: rgba(0, 0, 0, 0.35); /* Цвет паранджи */
  --color-bg-soft: rgba(255, 255, 255, 0.9); /* Цвет молока */
  --color-bg-system:
    rgb(222, 228, 232); /* Цвет фона системнный */

  --color-bg-normal: rgb(86, 185, 242); /* Цвет фона нейтральный */
  --color-bg-success: rgb(34, 195, 142); /* Цвет фона успеха */
  --color-bg-caution: rgb(242, 201, 76); /* Цвет фона осторожности */
  --color-bg-warning: rgb(243, 139, 0); /* Цвет фона предупреждения */
  --color-bg-alert: rgb(198, 7, 76); /* Цвет фона ошибки */
  --color-bg-critical: rgb(51, 0, 15); /* Цвет фона системнный */

  /* //////////////////////////////
  // Цвета текста ////////////// */
  --color-typo-primary: rgb(0, 32, 51); /* Цвет основного текста */
  --color-typo-secondary: #0a1129; /* Цвет второстепенного текста */
  --color-typo-ghost: #788bac; /* Цвет дополнительного текста */
  --color-typo-brand: rgb(0, 113, 178); /* Цвет брендового текста */
  --color-typo-system:
    rgb(151, 178, 196); /* Цвет фона системнный */

  --color-typo-normal: rgb(51, 180, 255); /* Цвет фона нейтральный */
  --color-typo-success: rgb(9, 179, 123); /* Цвет текста успеха */
  --color-typo-caution:
    rgb(255, 161, 10); /* Цвет текста осторожности */

  --color-typo-warning:
    rgb(232, 117, 2); /* Цвет текста предупреждения */

  --color-typo-alert: rgb(165, 3, 63); /* Цвет текста ошибки */
  --color-typo-critical: rgb(51, 0, 15); /* Цвет фона системнный */
  --color-typo-link: rgb(3, 166, 109); /* Цвет основной ссылки */
  --color-typo-link-minor:
    rgb(58, 120, 100); /* Цвет второстепенной ссылки */

  --color-typo-link-hover: rgb(51, 219, 163); /* Цвет ховера ссылки */

  /* //////////////////////////////
  // Цвета скроллбара ////////////// */
  --color-scroll-bg: rgba(0, 66, 105, 0.06);
  --color-scroll-thumb: rgba(0, 66, 105, 0.24);
  --color-scroll-thumb-hover: rgba(0, 66, 105, 0.32);

  /* /////////////////////////////
  // Цвета контролов /////////// */

  /* Default */
  --color-control-bg-default: rgb(255, 255, 255); /* Цвет фона контрола */
  --color-control-typo-default:
    rgb(0, 32, 51); /* Цвет основного текста контрола */
  --color-control-typo-placeholder: #788bac; /* Цвет плейсхолдера контрола */
  --color-control-bg-border-default: #dae4f5; /* Цвет фона бордеров котрола */
  --color-control-bg-border-default-hover:
    rgba(0, 66, 105, 0.52); /* Цвет фона бордеров контрола по ховеру */

  --color-control-bg-border-focus:
    rgb(56, 220, 165); /* Цвет аутлайна контролов при фокусе */ /* TODO заменить на правило целиком */
  --color-control-bg-focus:
    rgba(34, 195, 142, 0.3); /* Цвет тени в состонии фокуса */

  --color-control-bg-active:
    rgba(34, 195, 142, 0.5); /* Цвет тени в состонии нажатия  */

  /* Primary */
  --color-control-bg-primary:
    rgb(14, 203, 129); /* Цвет фона активного контрола */

  --color-control-bg-primary-hover:
    rgb(56, 220, 165); /* Цвет фона активного контрола по ховеру */

  --color-control-typo-primary:
    rgb(255, 255, 255); /* Цвет акцентного текста */

  --color-control-typo-primary-hover:
    rgb(255, 255, 255); /* Цвет акцентного текста */

  /* Secondary */
  --color-control-bg-secondary:
    rgba(255, 255, 255, 0); /* Цвет фона бордеров котрола */

  --color-control-bg-border-secondary:
    rgb(34, 195, 142); /* Цвет фона бордеров котрола */

  --color-control-bg-border-secondary-hover:
    rgb(56, 220, 165); /* Цвет фона бордеров контрола по ховеру */

  --color-control-typo-secondary:
    rgb(34, 195, 142); /* Цвет второстепеного текста контрола */

  --color-control-typo-secondary-hover:
    rgb(56, 220, 165); /* Цвет акцентного текста */

  /* Ghost */
  --color-control-bg-ghost:
    rgba(0, 66, 105, 0.07); /* Цвет фона дополнительного контрола */

  --color-control-bg-ghost-hover:
    rgba(0, 66, 105, 0.05); /* Цвет фона дополнительного контрола по ховеру */

  --color-control-typo-ghost:
    rgba(0, 57, 92, 0.8); /* Цвет дополнительного текста контрола */

  --color-control-typo-ghost-hover:
    rgba(0, 57, 92, 0.75); /* Цвет акцентного текста */

  /* Clear */
  --color-control-bg-clear:
    rgba(0, 66, 105, 0); /* Цвет фона чистого контрола */

  --color-control-bg-clear-hover:
    rgba(0, 66, 105, 0.05); /* Цвет фона чистого контрола по ховеру */

  --color-control-typo-clear:
    rgba(0, 57, 92, 0.8); /* Цвет акцентного текста */

  --color-control-typo-clear-hover:
    rgba(0, 57, 92, 0.75); /* Цвет акцентного текста */

  /* Disable */
  --color-control-bg-disable: #dae4f5; /* Цвет фона неактивного контрола */
  --color-control-bg-border-disable:
    rgba(0, 66, 105, 0); /* Цвет фона бордеров неактивного контрола */

  --color-control-typo-disable: #788bac; /* Цвет основного текста неактивного контрола */

  /* /////////////////////////////
  // Цвета тени /////////// */
  --color-shadow-group-1: rgba(0, 32, 51, 0.02);
  --color-shadow-group-2: rgba(0, 32, 51, 0.16);
  --color-shadow-layer-1: rgba(0, 32, 51, 0.04);
  --color-shadow-layer-2: rgba(0, 32, 51, 0.12);
  --color-shadow-modal-1: rgba(0, 32, 51, 0.04);
  --color-shadow-modal-2: rgba(0, 32, 51, 0.12);
}
/* stylelint-enable */

/* stylelint-disable */
.Theme_color_ssoDark {
  /* //////////////////////////////
  // Цвета фонов /////////////// */
  --color-bg-default: rgb(34, 39, 43); /* Цвет дефолта */
  --color-bg-secondary: rgb(22, 26, 29); /* Дополнительный цвет фона */
  --color-bg-brand: rgb(0, 113, 178); /* Цвет фона брендированный */
  --color-bg-link: rgb(173, 86, 250); /* Цвет фона ссылки */
  --color-bg-border: rgba(255, 255, 255, 0.2); /* Цвет границ */
  --color-bg-stripe:
    rgba(246, 251, 253, 0.06); /* Цвет зебры (например, при окрашивании фона строк таблицы через одну) */

  --color-bg-ghost: rgba(246, 251, 253, 0.1); /* Цвет затенения */
  --color-bg-tone: rgba(6, 20, 25, 0.85); /* Цвет паранджи */
  --color-bg-soft: rgba(255, 255, 255, 0.9); /* Цвет молока */
  --color-bg-system:
    rgb(77, 82, 91); /* Цвет фона системнный */

  --color-bg-normal: rgb(10, 165, 255); /* Цвет фона нейтральный */
  --color-bg-success: rgb(34, 195, 142); /* Цвет фона успеха */
  --color-bg-caution: rgb(242, 201, 76); /* Цвет фона осторожности */
  --color-bg-warning: rgb(243, 139, 0); /* Цвет фона предупреждения */
  --color-bg-alert: rgb(204, 0, 75); /* Цвет фона ошибки */
  --color-bg-critical: rgb(51, 0, 15); /* Цвет фона системнный */

  /* //////////////////////////////
  // Цвета текста ////////////// */
  --color-typo-primary: rgb(250, 250, 250); /* Цвет основного текста */
  --color-typo-secondary: rgba(255, 255, 255, 0.6); /* Цвет второстепенного текста */
  --color-typo-ghost: rgba(255, 255, 255, 0.3); /* Цвет дополнительного текста */
  --color-typo-brand: rgb(0, 113, 178); /* Цвет брендового текста */
  --color-typo-system:
    rgb(99, 110, 131); /* Цвет фона системнный */

  --color-typo-normal: rgb(0, 155, 245); /* Цвет фона нейтральный */
  --color-typo-success: rgb(15, 174, 121); /* Цвет текста успеха */
  --color-typo-caution:
    rgb(248, 199, 53); /* Цвет текста осторожности */

  --color-typo-warning:
    rgb(230, 130, 0); /* Цвет текста предупреждения */

  --color-typo-alert: rgb(185, 4, 70); /* Цвет текста ошибки */
  --color-typo-critical: rgb(97, 0, 29); /* Цвет фона системнный */
  --color-typo-link:
    rgb(199, 146, 252); /* Цвет основной ссылки */

  --color-typo-link-minor:
    rgb(219, 205, 233); /* Цвет второстепенной ссылки */

  --color-typo-link-hover:
    rgb(235, 215, 254); /* Цвет ховера ссылки */

  /* //////////////////////////////
  // Цвета скроллбара ////////////// */
  --color-scroll-bg: rgba(246, 251, 253, 0.06);
  --color-scroll-thumb: rgba(246, 251, 253, 0.24);
  --color-scroll-thumb-hover: rgba(246, 251, 253, 0.32);

  /* /////////////////////////////
  // Цвета контролов /////////// */

  /* Default */
  --color-control-bg-default: rgb(34, 39, 43); /* Цвет фона контрола */
  --color-control-typo-default:
    rgba(255, 255, 255, 0.8); /* Цвет основного текста контрола */

  --color-control-typo-placeholder:
    rgba(255, 255, 255, 0.35); /* Цвет плейсхолдера контрола */

  --color-control-bg-border-default:
    rgba(246, 251, 253, 0.28); /* Цвет фона бордеров котрола */

  --color-control-bg-border-default-hover:
    rgba(246, 251, 253, 0.52); /* Цвет фона бордеров контрола по ховеру */

  --color-control-bg-border-focus:
    rgb(198, 136, 251); /* Цвет аутлайна контролов при фокусе */ /* TODO заменить на правило целиком */
  --color-control-bg-focus:
    rgba(173, 86, 250, 0.4); /* Цвет тени в состонии фокуса */

  --color-control-bg-active:
    rgba(173, 86, 250, 0.7); /* Цвет тени в состонии нажатия  */

  /* Primary */
  --color-control-bg-primary:
    rgb(14, 203, 129); /* Цвет фона активного контрола */

  --color-control-bg-primary-hover:
    rgb(56, 220, 165); /* Цвет фона активного контрола по ховеру */

  --color-control-typo-primary:
    rgb(255, 255, 255); /* Цвет акцентного текста */

  --color-control-typo-primary-hover:
    rgb(255, 255, 255); /* Цвет акцентного текста */

  /* Secondary */
  --color-control-bg-secondary:
    rgba(34, 39, 43, 0); /* Цвет фона бордеров котрола */

  --color-control-bg-border-secondary:
    rgb(173, 86, 250); /* Цвет фона бордеров котрола */

  --color-control-bg-border-secondary-hover:
    rgb(195, 131, 251); /* Цвет фона бордеров контрола по ховеру */

  --color-control-typo-secondary:
    rgb(199, 146, 252); /* Цвет второстепеного текста контрола */

  --color-control-typo-secondary-hover:
    rgb(235, 215, 254); /* Цвет акцентного текста */

  /* Ghost */
  --color-control-bg-ghost:
    rgba(250, 250, 250, 0.16); /* Цвет фона дополнительного контрола */

  --color-control-bg-ghost-hover:
    rgba(250, 250, 250, 0.23); /* Цвет фона дополнительного контрола по ховеру */

  --color-control-typo-ghost:
    rgba(255, 255, 255, 0.75); /* Цвет дополнительного текста контрола */

  --color-control-typo-ghost-hover:
    rgba(255, 255, 255, 0.9); /* Цвет акцентного текста */

  /* Clear */
  --color-control-bg-clear:
    rgba(250, 250, 250, 0); /* Цвет фона чистого контрола */

  --color-control-bg-clear-hover:
    rgba(250, 250, 250, 0.23); /* Цвет фона чистого контрола по ховеру */

  --color-control-typo-clear: rgba(255, 255, 255, 0.75); /* Цвет акцентного текста */
  --color-control-typo-clear-hover:
    rgba(255, 255, 255, 0.9); /* Цвет акцентного текста */

  /* Disable */
  --color-control-bg-disable:
    rgba(250, 250, 250, 0.16); /* Цвет фона неактивного контрола */

  --color-control-bg-border-disable:
    rgba(250, 250, 250, 0); /* Цвет фона бордеров неактивного контрола */

  --color-control-typo-disable:
    rgba(255, 255, 255, 0.24); /* Цвет основного текста неактивного контрола */

  /* /////////////////////////////
  // Цвета тени /////////// */
  --color-shadow-group-1: rgba(0, 0, 0, 0.08);
  --color-shadow-group-2: rgba(0, 0, 0, 0.32);
  --color-shadow-layer-1: rgba(0, 0, 0, 0.08);
  --color-shadow-layer-2: rgba(0, 0, 0, 0.32);
  --color-shadow-modal-1: rgba(0, 0, 0, 0.08);
  --color-shadow-modal-2: rgba(0, 0, 0, 0.32);
}
/* stylelint-enable */

.Theme_control_ssoLight {
  --control-radius: 8px; /* Основной радиус скругления контроллов */
  --control-border-width: 1px; /* Основная толщина контроллов */
  --control-height-l: var(--space-4xl);
  --control-height-m: var(--space-3xl);
  --control-height-s: var(--space-2xl);
  --control-height-xs: var(--space-xl);
  --control-box-size-s: var(--space-s);
  --control-box-size-m: var(--space-m);
  --control-box-size-l: var(--space-l);
  --control-space-l: var(--space-xl);
  --control-space-m: var(--space-l);
  --control-space-s: var(--space-m);
  --control-space-xs: var(--space-s);
  --control-text-size-l: var(--size-text-l);
  --control-text-size-m: var(--size-text-m);
  --control-text-size-s: var(--size-text-s);
  --control-text-size-xs: var(--size-text-xs);
}

@font-face {
  font-family: 'Gotham Pro';
  src: url(/e8ddda7220a05cf00f1c.woff) format('woff');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Gotham Pro';
  src: url(/1c262bae1f403fe781a2.woff) format('woff');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Gotham Pro';
  src: url(/b8ef8e03f8636e1831c5.woff) format('woff');
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: 'Gotham Pro';
  src: url(/922fd60af5ac485241a8.woff) format('woff');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'Gotham Pro';
  src: url(/3c379e6305b34250be8a.woff) format('woff');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Gotham Pro';
  src: url(/3c379e6305b34250be8a.woff) format('woff');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Gotham Pro';
  src: url(/a9ee7ec72e501ce07ad0.woff) format('woff');
  font-weight: bold;
  font-style: italic;
}

@font-face {
  font-family: 'Gotham Pro';
  src: url(/9e3de47599b8a119a2b3.woff) format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Gotham Pro';
  src: url(/8fe33c1d73904ae929eb.woff) format('woff');
  font-weight: 600;
  font-style: italic;
}

@font-face {
  font-family: 'Gotham Pro';
  src: url(/8fe33c1d73904ae929eb.woff) format('woff');
  font-weight: 500;
  font-style: italic;
}

@font-face {
  font-family: 'Gotham Pro';
  src: url(/baacd6c70f39c1dd79af.woff) format('woff');
  font-weight: 900;
  font-style: italic;
}

@font-face {
  font-family: 'Gotham Pro';
  src: url(/857b77971bb6f992c25e.woff) format('woff');
  font-weight: 300;
  font-style: italic;
}

.Theme_font_ssoLight {
  --font-primary:
    'Gotham Pro',
    'Segoe UI',
    -apple-system,
    BlinkMacSystemFont,
    'Roboto',
    'Oxygen',
    'Ubuntu',
    'Cantarell',
    'Fira Sans',
    'Droid Sans',
    'Helvetica Neue',
    sans-serif;
  --font-mono:
    source-code-pro,
    Menlo,
    Monaco,
    Consolas,
    'Courier New',
    monospace;
  font-family: var(--font-primary);
}

.Theme_size_ssoLight {
  /* Размер текста */
  --size-text-2xs: 10px;
  --size-text-xs: 12px;
  --size-text-s: 14px;
  --size-text-m: 16px;
  --size-text-l: 18px;
  --size-text-xl: 20px;
  --size-text-2xl: 24px;
  --size-text-3xl: 32px;
  --size-text-4xl: 48px;
  --size-text-5xl: 72px;
  --size-text-6xl: 96px;

  /* Межстрочный интервал */
  --line-height-text-2xs: 1.1em;
  --line-height-text-xs: 1.2em;
  --line-height-text-s: 1.4em;
  --line-height-text-m: 1.5em;
  --line-height-text-l: 1.6em;

  /* Ширина шрифта */
  --font-weight-text-thin: 100;
  --font-weight-text-extralight: 100;
  --font-weight-text-light: 300;
  --font-weight-text-regular: normal;
  --font-weight-text-medium: 500;
  --font-weight-text-semibold: 600;
  --font-weight-text-bold: bold;
  --font-weight-text-extrabold: 800;
  --font-weight-text-black: 900;
}

.Theme_space_ssoLight {
  /* Отступы */
  --space-3xs: 2px;
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-s: 12px;
  --space-m: 16px;
  --space-l: 20px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 40px;
  --space-4xl: 48px;
  --space-5xl: 72px;
  --space-6xl: 96px;
}

.Theme_shadow_ssoLight {
  /* Тени */
  --shadow-group:
    0 2px 2px var(--color-shadow-group-1),
    0 2px 8px var(--color-shadow-group-2);
  --shadow-layer:
    0 4px 4px var(--color-shadow-layer-1),
    0 8px 24px var(--color-shadow-layer-2);
  --shadow-modal:
    0 8px 8px var(--color-shadow-modal-1),
    0 12px 28px var(--color-shadow-modal-2);
}

/* stylelint-disable */
.MixAuth {
  --mix-auth-container-padding: var(--space-xl) var(--space-xl) var(--space-2xl);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  box-sizing: border-box;
  padding: var(--mix-auth-container-padding);
  background: var(--color-bg-default);
  border-radius: var(--space-l);
}
.MixAuth-Container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
  }
.MixAuth a {
    text-decoration: none;
  }
.MixAuth_withBottomContainer {
    padding: 0;
  }
.MixAuth_withBottomContainer .MixAuth-Container {
      padding: var(--mix-auth-container-padding);
    }
.MixAuth-Additional {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    height: 69px;
    padding: var(--space-l);
    border-top: 1px solid #00416633;
    transition: background-color 0.3s;
  }
.MixAuth-Additional:hover {
      background: var(--color-control-bg-clear-hover);
    }
.MixAuth-Additional:hover > .Text_view_link {
        text-decoration: underline;
      }
.MixAuth-Close {
    position: absolute;
    top: var(--space-m);
    right: var(--space-m);
  }

.Login {
  position: relative;
  width: 360px;
  background-color: var(--color-bg-default);
}

  .Login-Container {
    gap: var(--space-l);
  }

  .Login-Player > iframe {
      height: 214px;
    }

  .Login-Checkbox {
    --control-radius: var(--space-2xs);
  }

  .Login-Forgot {
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    gap: var(--space-m);
    width: 100%;
    margin-top: 3px;
    direction: var(--text-direction);
    margin-bottom: 6px;
    padding: 0 4px;
  }

  .Login-Additional {
    flex-direction: row;
    gap: var(--space-xs);
  }

.Flex {
  display: flex;
  flex-direction: var(--flex-direction);
  justify-content: var(--flex-justify);
  align-items: var(--flex-align);
  flex-wrap: var(--flex-wrap);
  gap: var(--flex-gap);
}

.FormikInput {
  --formik-input-state-color: var(--color-control-bg-border-default);
}

  .FormikInput-Star {
    margin-left: var(--space-2xs);
    color: var(--color-typo-alert);
  }

  .FormikInput-Input {
    width: 100%;
  }

  .FormikInput-Input .FieldCaption {
      margin-top: calc(var(--space-xs) + var(--space-3xs));
      margin-left: var(--space-m);
      font-weight: var(--font-weight-text-semibold);
    }

  .FormikInput-Input .TextField-Icon {
      color: var(--color-typo-ghost);
    }

  .FormikInput_width_full {
      width: 100%;
    }

  .FormikInput_state_alert {
      --formik-input-state-color: var(--color-bg-alert);
    }

  .FormikInput-PhoneInput {
    position: relative;
    display: inline-flex;
    box-sizing: border-box;
    max-width: 100%;
    height: 48px;
    min-height: var(--control-height-m);
    border: 1px solid var(--color-control-bg-border-default);
    border-radius: var(--control-radius);
    font-size: var(--control-text-size-m);
    transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
  }

  .FormikInput-PhoneInput:hover {
      border-color: var(--color-control-bg-border-default-hover);
    }

  .FormikInput-PhoneInput * {
      font-family: var(--font-primary);
      font-size: var(--input-font-size) !important;
    }

  .FormikInput-PhoneInput_state {
      border-color: var(--formik-input-state-color);
    }

  .FormikInput-PhoneInput .flag-dropdown {
      background: none !important;
      border: none;
      border-right: 1px solid var(--color-control-bg-border-default);
    }

  .FormikInput-PhoneInput .country > .country-name {
        color: var(--color-typo-primary);
      }

  .FormikInput-PhoneInput .country > span.dial-code {
        color: var(--color-typo-secondary) !important;
      }

  .FormikInput-PhoneInput .country-list {
      background: var(--color-control-bg-default) !important;
    }

  .FormikInput-PhoneInput .country-list .highlight {
        background: var(--color-bg-secondary) !important;
      }

  .FormikInput-PhoneInput .selected-flag,
    .FormikInput-PhoneInput .selected-flag.open {
      background: var(--color-bg-secondary) !important;
      border-radius: var(--control-radius) 0 0 var(--control-radius) !important;
    }

  .FormikInput-PhoneFormControl.form-control {
    overflow: hidden;
    width: 100% !important;
    height: auto !important;
    color: var(--color-control-typo-default);
    background: var(--color-control-bg-default) !important;
    border: none !important;
    border-radius: var(--control-radius);
    font-family: var(--font-primary);
  }

  .FormikInput-Label {
    width: 100%;
    margin: 0 0 var(--space-xs);
  }

  .FormikInput-Description {
    margin: 0 0 var(--space-xs);
  }

  .FormikInput-Caption {
    width: 100%;
    margin: var(--space-2xs) 0 0;
  }

:root {
  --green-color: #0ecb81;
}

.MfaConnectModal {
  min-height: -moz-max-content;
  min-height: max-content;
  padding: var(--space-xl);
}

.MfaConnectModal_stage_suggestion {
      max-width: 300px;
    }

.MfaConnectModal_stage_connection {
      min-width: 624px;
    }

.MfaConnectModal_stage_connection .Text {
        white-space: break-spaces;
      }

@media screen and (max-width: 800px) {

.MfaConnectModal_stage_connection {
        min-width: 320px;
        max-width: 320px
    }
      }

.MfaConnectModal-Choice > .ChoiceGroup-Label {
      flex: 1;
    }

.MfaConnectModal-Root {
    z-index: 10;
  }

.MfaConnectModal-Buttons {
    width: 100%;
  }

.MfaConnectModal-Controls {
    width: 100%;
  }

.MfaConnectModal-Inputs {
    flex: 1;
  }

.MfaConnectModal-QR {
    width: 100%;
    margin: 32px 0;
  }

.MfaConnectModal-QR__input {
      margin-top: var(--space-m);
    }

.MfaConnectModal-QR__input .TextField {
        flex: 1;
      }

.MfaConnectModal-Buttons {
    margin-top: 28px;
  }

.MfaConnectModal-Buttons > * {
      flex: 1;
    }

@media screen and (max-width: 800px) {

.MfaConnectModal-Buttons {
      margin-top: 20px
  }
    }

.MfaConnectModal-Card {
    padding: var(--space-m);
    border: 1px solid var(--color-control-bg-border-default);
    border-radius: 12px;
  }

.MfaConnectModal-Card a {
      color: var(--green-color);
      text-decoration: none;
    }

.MfaConnectModal-Card svg {
      flex: none;
    }

@media screen and (max-width: 800px) {

.MfaConnectModal-Card {
      padding: var(--space-s)
  }
    }

.MfaConnectModal-Description {
    margin-top: var(--space-m);
  }

@media screen and (max-width: 800px) {

.MfaConnectModal-Description {
      margin-top: var(--space-s);
      font-size: 14px
  }
    }

@media screen and (max-width: 800px) {

.MfaConnectModal-Title {
      font-size: 22px
  }
    }

.MfaConnectModal-Devices {
    display: grid;
    margin: 28px 0 var(--space-m);
    gap: var(--space-m);
    grid-template-columns: 1fr 1fr;
  }

.MfaConnectModal-Devices__icon {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 48px;
      height: 48px;
      background-color: #ecfdf4;
      border-radius: 7px;
    }

@media screen and (max-width: 800px) {

.MfaConnectModal-Devices__icon {
        width: 40px;
        height: 40px
    }
      }

.MfaConnectModal-Devices__radio {
      position: relative;
      z-index: 1;
      width: 24px;
      height: 24px;
      background-color: transparent;
      border: 1px solid var(--color-control-bg-border-default);
      border-radius: 50%;
      cursor: pointer;
      transition: all 0.15s linear;
    }

.MfaConnectModal-Devices__radio::after {
        content: '';
        position: absolute;
        z-index: 5;
        top: 50%;
        left: 50%;
        width: 10px;
        height: 10px;
        background-color: #fff;
        border-radius: 50%;
        transform: translate(-50%, -50%);
      }

.MfaConnectModal-Devices__radio--active {
        background-color: var(--green-color);
        border-color: var(--green-color);
      }

.MfaConnectModal-Devices__name {
      flex: 1;
    }

@media screen and (max-width: 800px) {

.MfaConnectModal-Devices {
      grid-template-columns: 1fr;
      margin: var(--space-m) 0 var(--space-s);
      gap: var(--space-s)
  }
    }

div[class*='AutoComplete-List'] {
  z-index: 20;
}

.FormikCheckbox {
  --control-radius: 4px;
}

  .FormikCheckbox_error {
    background: rgba(235, 87, 87, 0.3);
    border-color: var(--color-bg-alert);
    border-radius: var(--control-radius);
  }

.Providers {
  width: 100%;
}

  .Providers-Button {
    display: inline-flex;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    width: var(--space-3xl);
    height: var(--space-3xl);
    margin: 0;
    padding: 0;
    background: none;
    background: var(--color-control-bg-ghost);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s;
  }

  .Providers-Button:hover {
      background: var(--color-control-bg-ghost-hover);
    }

  .Providers-Button:disabled {
      background: var(--color-control-bg-disable);
      cursor: not-allowed;
    }

  .Providers-Image {
    width: var(--space-2xl);
    height: var(--space-2xl);
    -o-object-fit: cover;
       object-fit: cover;
  }

.Registration {
  position: relative;
  width: 100%;
  background-color: var(--color-bg-default);
}

  .Registration-Title {
    margin-bottom: var(--space-m);
  }

  .Registration-Container {
    gap: var(--space-m);
  }

  .Registration-Agreement {
    margin: var(--space-xl) 0;
  }

  .Registration-Agreement a {
      color: var(--color-typo-link);
    }

  .Registration-Agreement a:hover {
        text-decoration: underline;
      }

  @media screen and (max-width: 700px) {

  .Registration-Grid.Grid {
      display: flex;
      flex-direction: column
  }
    }

  .Registration-GridDivider {
    grid-column: 1 / 3;
    width: 100%;
    height: 1px;
    background: var(--color-bg-border);
  }

  .Registration-Additional {
    flex-direction: row;
    gap: var(--space-xs);
  }

.ActionModal {
  max-width: 500px;
  min-height: -moz-max-content;
  min-height: max-content;
  padding: var(--space-xl);
}

.Recovery {
  position: relative;
  width: 360px;
  background-color: var(--color-bg-default);
}

  .Recovery-Title {
    margin-bottom: var(--space-m);
  }

  .Recovery-Container {
    gap: var(--space-m);
  }

  .Recovery-Additional {
    flex-direction: row;
    min-height: calc(var(--space-2xl) * 2);
    color: var(--color-typo-link);
    border-radius: 0;
    gap: var(--space-xs);
  }

  .Recovery-Additional:hover {
      color: var(--color-typo-link-hover);
    }

.RecoveryPassword {
  position: relative;
  width: 376px;
  background-color: var(--color-bg-default);
}

  .RecoveryPassword-Title {
    margin-bottom: var(--space-m);
  }

  .RecoveryPassword-Container {
    gap: var(--space-m);
  }

  .RecoveryPassword-Additional {
    flex-direction: row;
    gap: var(--space-xs);
  }

.UnverifiedEmail {
  max-width: 400px;
}

  .UnverifiedEmail-Title {
    white-space: pre-wrap;
    word-break: break-word;
  }

  .UnverifiedEmail-Buttons {
    width: 100%;
  }

  .UnverifiedEmail-Button {
    min-width: calc(calc(100% - var(--space-m)) / 2);
  }

  .UnverifiedEmail-Button_alert {
      background-color: var(--color-bg-alert);
    }

  .UnverifiedEmail-Button_alert:hover {
        background-color: var(--color-typo-alert);
      }

  .UnverifiedEmail-Button_success {
      background-color: var(--color-bg-success);
    }

  .UnverifiedEmail-Button_success:hover {
        background-color: var(--color-typo-success);
      }

.CodeInput {
  --input-size: var(--space-4xl);
}

  .CodeInput-Input {
    width: var(--input-size);
    height: var(--input-size);
    margin: 0;
    padding: 0;
    color: var(--color-control-typo-default);
    background-color: var(--color-control-bg-ghost);
    border: none;
    border-radius: var(--control-radius);
    font-size: var(--size-text-2xl);
    text-align: center;
    transition: background-color 0.3s, color 0.3s;
  }

  .CodeInput-Input:hover {
      background: var(--color-control-bg-ghost-hover);
    }

  .CodeInput-Input:disabled,
    .CodeInput-Input_loading {
      color: var(--color-control-typo-disable);
      background: var(--color-control-bg-disable);
      pointer-events: none;
    }

  .CodeInput input::-webkit-outer-spin-button,
  .CodeInput input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .CodeInput input[type='number'] {
    -moz-appearance: textfield;
  }

.MultiFactor {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  background: var(--color-bg-default);
  border-radius: var(--space-l);
  gap: var(--space-4xl);
}

  @media screen and (max-width: 800px) {.MultiFactor {
    flex-direction: column;
    justify-content: center;
    align-items: center
}
  }

  .MultiFactor-Link {
    cursor: pointer;
  }

  .MultiFactor-Link:hover {
      color: var(--color-typo-link-hover);
      text-decoration: underline;
    }

  .MultiFactor-Loader {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--space-l);
  }

  .MultiFactor-Loader .ProgressSpin {
      width: var(--space-5xl);
      height: var(--space-5xl);
      color: var(--color-control-bg-primary);
    }

  @media screen and (max-width: 800px) {

  .MultiFactor-Wrapper {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center
  }
    }

.MFA {
  background: var(--color-bg-default);
  border-radius: var(--space-l);
}

  @media screen and (max-width: 800px) {.MFA {
    flex-direction: column;
    align-items: center
}
  }

  .MFA-Image {
    width: 400px;
  }

  @media screen and (max-width: 800px) {

  .MFA-Image {
      width: 250px
  }
    }

  .MFA-Image > *:not(.ResponsesImage) {
      display: none;
    }

  @media screen and (max-width: 800px) {
      .MFA-Wrapper > .Text {
        font-size: var(--size-text-xl);
        text-align: center;
      }
    }

  .MFA-Wrapper {
    align-items: flex-start;
    height: 100%;
    margin: auto;
}

  .MFA-Controls {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
  }

  .MFA-QR {
    width: 100%;
  }

.Accounts {
  position: relative;
  width: 360px;
  background-color: var(--color-bg-default);
}

  .Accounts-Loader {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: var(--color-scroll-thumb-hover);
    border-radius: var(--space-l);
  }

  .Accounts-Button {
    position: absolute;
    top: var(--space-4xl);
    left: calc(-1 * var(--space-l));
    background: var(--color-bg-default);
    box-shadow: var(--shadow-group);
  }

  .Accounts-Button:hover {
      background: var(--color-bg-secondary);
    }

  @media screen and (max-width: 800px) {

  .Accounts-Button {
      display: none
  }
    }

  .Accounts-Additional {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    cursor: pointer;
    gap: var(--space-m);
  }

  .Accounts-Block {
    width: 100%;
  }

  .Accounts-Divider {
    width: 100%;
    margin: var(--space-2xs) 0 var(--space-s);
    border-top: 1px solid var(--color-bg-border);
  }

  .Accounts-Icon {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: calc(var(--space-3xl) + var(--space-2xs));
    min-height: calc(var(--space-3xl) + var(--space-2xs));
    background: var(--color-bg-ghost);
    border-radius: 50%;
  }

.AccountsCard {
  box-sizing: border-box;
  width: 100%;
  background: transparent;
  border-radius: var(--space-l);
  cursor: pointer;
  transition: background-color 0.3s;
}

  .AccountsCard:hover {
    background: var(--color-bg-secondary);
  }

  .AccountsCard-Wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: var(--space-m);
  }

  .AccountsCard-Info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--space-2xs);
  }

  .AccountsCard-Avatar {
    position: relative;
  }

  .AccountsCard-Username,
  .AccountsCard-Email {
    overflow: hidden;
    max-width: 190px;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .AccountsCard-Badge {
    position: absolute;
    z-index: 1;
    right: calc(-1 * var(--space-2xs));
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--space-s);
    height: var(--space-s);
    background: var(--color-bg-default);
    border: 2px solid var(--color-bg-success);
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--color-bg-default);
  }

  .AccountsCard-Badge > .icons--Icon {
      --icon-size: var(--space-xs);
    }

.Tooltip {
  z-index: 3000;
}

.MFASuccess {
  max-width: min(400px, 90vw);
  background: var(--color-bg-default);
  border-radius: var(--space-l);
}

.Gradient {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 17, 41, 0.5);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

  .Gradient-Overlay {
    position: absolute;
    right: 0;
    left: -380px;
    overflow: hidden;
    min-width: 100vw;
    height: 100vh;
  }

  .Gradient-Canvas {
    position: absolute;
    width: 100%;
    height: 100%;
  }

.PageWrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
  background: var(--color-bg-tone);
}

  .PageWrapper_dimension_mobile {
      margin-bottom: 0;
    }

  .PageWrapper-Modal {
    overflow: visible;
    min-width: auto;
    max-width: min(1000px, 100%);
    max-height: 100%;
    margin: var(--space-l);
    background-color: transparent;
    border-radius: 0;
    box-shadow: none;
  }

  .PageWrapper-Modal::-webkit-scrollbar-thumb,
    .PageWrapper-Modal::-webkit-scrollbar {
      display: none;
    }

  .PageWrapper-Modal span,
    .PageWrapper-Modal a,
    .PageWrapper-Modal p,
    .PageWrapper-Modal pre,
    .PageWrapper-Modal h1,
    .PageWrapper-Modal h2,
    .PageWrapper-Modal h3,
    .PageWrapper-Modal h4,
    .PageWrapper-Modal h5,
    .PageWrapper-Modal h6,
    .PageWrapper-Modal b,
    .PageWrapper-Modal i,
    .PageWrapper-Modal em,
    .PageWrapper-Modal input,
    .PageWrapper-Modal label {
      direction: var(--text-direction);
    }

  .PageWrapper .Modal-Overlay {
    background: var(--color-bg-tone);
  }

  .PageWrapper-Player > iframe {
      height: 214px;
    }

  .PageWrapper-Controls {
    position: absolute;
    z-index: 3;
    top: var(--space-xl);
    right: var(--space-xl);
  }

  .PageWrapper-Controls .Button-Icon {
      color: #fff;
    }

  .PageWrapper-Controls_dimension_mobile {
        position: relative;
        top: auto;
        right: auto;
        padding: var(--space-m) calc(var(--space-2xl) - var(--space-2xs)) 0;
        background: var(--color-bg-default);
        border-radius: var(--space-l) var(--space-l) 0 0;
      }

  .PageWrapper-Controls_dimension_mobile .Button-Icon {
          color: var(--color-typo-primary);
        }

  .PageWrapper-Gradient {
    position: sticky;
  }

  .PageWrapper-Root {
    z-index: 2;
    overflow: auto;
    padding: 0;
  }

  .PageWrapper-Root .Modal-Overlay {
      position: sticky;
    }

  @media screen and (max-width: 800px) {

  .PageWrapper-Root {
      box-sizing: border-box;
      max-width: 100vw;
      max-height: 100vh
  }
    }

  .PageWrapper-Loader {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
  }

  .PageWrapper-Spin {
    width: var(--space-6xl);
    height: var(--space-6xl);
    color: var(--color-bg-default);
    transform: scale(2);
  }

  .PageWrapper-Content {
    position: relative;
  }

  .PageWrapper-Content_withVideo {
      margin-top: var(--space-xl);
    }

  .PageWrapper-Content_dimension_mobile {
      background: var(--color-bg-default);
      border-radius: var(--space-l);
    }

.LanguageSelector-Menu .ContextMenuItem[data-content='active'] {
      color: var(--color-control-typo-secondary);
    }

.OauthSponsor {
  position: relative;
  width: 100%;
  background-color: var(--color-bg-default);
}

  .OauthSponsor-Container {
    gap: var(--space-m);
    max-width: 361px;
  }

  .OauthSponsor-Additional {
    cursor: pointer;
  }

  .OauthSponsor-Title {
    text-align: center;
  }

.WarningModal {
  box-sizing: border-box;
}

  .WarningModal-Wrapper {
    max-width: 361px;
    padding: 20px;
  }

  .WarningModal-OauthModal {
    z-index: 10;
  }

  .WarningModal-Buttons {
    margin-top: 100px;
  }

  .WarningModal-Subtitle {
    margin: 15px 0;
    text-align: center;
  }

body {
  --color-bg-lime: #88da36;
  overflow-x: hidden;
  overflow-y: auto;
  width: 100vw;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  background: var(--color-bg-default);
  line-height: 1;
  -webkit-font-smoothing: antialiased;
}

#root {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
}

.h-toast {
  padding: 12px;
  color: var(--color-typo-primary);
  font-size: 20px;
}

.h-toast-dark {
  background-color: var(--color-bg-system);
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}

.Checkbox {
  gap: var(--space-xs);
}

.Checkbox-Label {
    margin: 0;
  }


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