.Text_font_primary {
      font-family: var(--font-primary);
    }
    .Text_font_mono {
      font-family: var(--font-mono);
    }
  .Text_align_center {
      text-align: center;
    }
  .Text_align_left {
      text-align: left;
    }
  .Text_align_right {
      text-align: right;
    }
  .Text_cursor_pointer {
      cursor: pointer;
    }
  .Text_decoration_underline {
      text-decoration: underline;
    }
  .Text_display_block {
      display: block;
    }
  .Text_display_inlineBlock {
      display: inline-block;
    }
  .Text_display_inline {
      display: inline;
    }
  .Text_size_2xs {
      font-size: var(--size-text-2xs);
    }
  .Text_size_xs {
      font-size: var(--size-text-xs);
    }
  .Text_size_s {
      font-size: var(--size-text-s);
    }
  .Text_size_m {
      font-size: var(--size-text-m);
    }
  .Text_size_l {
      font-size: var(--size-text-l);
    }
  .Text_size_xl {
      font-size: var(--size-text-xl);
    }
  .Text_size_2xl {
      font-size: var(--size-text-2xl);
    }
  .Text_size_3xl {
      font-size: var(--size-text-3xl);
    }
  .Text_size_4xl {
      font-size: var(--size-text-4xl);
    }
  .Text_size_5xl {
      font-size: var(--size-text-5xl);
    }
  .Text_size_6xl {
      font-size: var(--size-text-6xl);
    }
  .Text_lineHeight_xs {
      line-height: var(--line-height-text-xs);
    }
  .Text_lineHeight_2xs {
      line-height: var(--line-height-text-2xs);
    }
  .Text_lineHeight_s {
      line-height: var(--line-height-text-s);
    }
  .Text_lineHeight_m {
      line-height: var(--line-height-text-m);
    }
  .Text_lineHeight_l {
      line-height: var(--line-height-text-l);
    }
  .Text_spacing_xs {
      letter-spacing: 0.06em;
    }
  .Text_spacing_s {
      letter-spacing: 0.1em;
    }
  .Text_spacing_m {
      letter-spacing: 0.14em;
    }
  .Text_spacing_l {
      letter-spacing: 0.2em;
    }
  .Text_fontStyle_italic {
      font-style: italic;
    }
  .Text_transform_uppercase {
      text-transform: uppercase;
    }
  .Text_type_blockquote {
      margin-bottom: var(--space-l);
      margin-left: var(--space-4xl);
      padding-left: var(--space-m);
      border-left: var(--space-xxs) solid var(--color-bg-brand);
    }
  .Text_type_h1,
    .Text_type_h2,
    .Text_type_h3 {
      margin: 2em 0 1em;
    }
  .Text_type_p {
      margin: 0 0 0.9em;
    }
  .Text_type_p:not(:last-child) {
        margin-bottom: 0;
      }
  .Text_view_alert {
      color: var(--color-typo-alert);
    }
  .Text_view_brand {
      color: var(--color-typo-brand);
    }
  .Text_view_ghost {
      color: var(--color-typo-ghost);
    }
  .Text_view_link {
      color: var(--color-typo-link);
      -webkit-transition: 0.3s ease;
      transition: 0.3s ease;
    }
  .Text_view_link :hover {
        color: var(--color-typo-link-hover);
      }
  .Text_view_linkMinor {
      color: var(--color-typo-link-minor);
      -webkit-transition: 0.3s ease;
      transition: 0.3s ease;
    }
  .Text_view_linkMinor :hover {
        color: var(--color-typo-link-hover);
      }
  .Text_view_primary {
      color: var(--color-typo-primary);
    }
  .Text_view_secondary {
      color: var(--color-typo-secondary);
    }
  .Text_view_success {
      color: var(--color-typo-success);
    }
  .Text_view_warning {
      color: var(--color-typo-warning);
    }
  .Text_weight_thin {
      font-weight: var(--font-weight-text-thin);
    }
  .Text_weight_light {
      font-weight: var(--font-weight-text-light);
    }
  .Text_weight_regular {
      font-weight: var(--font-weight-text-regular);
    }
  .Text_weight_semibold {
      font-weight: var(--font-weight-text-semibold);
    }
  .Text_weight_bold {
      font-weight: var(--font-weight-text-bold);
    }
  .Text_weight_black {
      font-weight: var(--font-weight-text-black);
    }
  .Text_width_default {
      max-width: 75ch;
    }
  .Text_truncate {
    overflow: hidden;
    max-width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

.Icon {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  overflow: hidden;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: var(--icon-size);
  height: var(--icon-size);
  line-height: 0;
}

  .Icon_size_xs {
      --icon-size: var(--graphics-size-xs);
    }

  .Icon_size_s {
      --icon-size: var(--graphics-size-s);
    }

  .Icon_size_m {
      --icon-size: var(--graphics-size-m);
    }

  .Icon_view_alert {
      color: var(--color-typo-alert);
    }

  .Icon_view_brand {
      color: var(--color-typo-brand);
    }

  .Icon_view_ghost {
      color: var(--color-typo-ghost);
    }

  .Icon_view_link {
      color: var(--color-typo-link);
    }

  .Icon_view_primary {
      color: var(--color-typo-primary);
    }

  .Icon_view_secondary {
      color: var(--color-typo-secondary);
    }

  .Icon_view_success {
      color: var(--color-typo-success);
    }

  .Icon_view_warning {
      color: var(--color-typo-warning);
    }

  .Icon_view_disabled {
      color: var(--color-control-typo-disable);
    }

  .Icon-Svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: currentcolor;
  }

.Button {
  position: relative;
  display: inline-block;
  overflow: hidden;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  max-width: 100%;
  height: var(--button-height);
  padding: 0 var(--button-space);
  background: transparent;
  border: none;
  border-radius: var(--control-radius);
  font-family: var(--font-primary);
  font-size: var(--button-font-size);
  font-weight: var(--font-weight-text-regular);
  line-height: var(--button-height);
  white-space: nowrap;
  text-decoration: none;
  text-overflow: ellipsis;
  cursor: pointer;
  -webkit-transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, fill 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, fill 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease,
    color 0.15s ease, fill 0.15s ease;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease,
    color 0.15s ease, fill 0.15s ease, -webkit-box-shadow 0.15s ease;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-appearance: none;
}

  .Button:hover {
    color: var(--color-hover);
  }

  .Button_form_brick {
      border-radius: 0;
    }

  .Button_form_round {
      padding-right: calc(var(--button-space) * 1.2);
      padding-left: calc(var(--button-space) * 1.2);
      border-radius: 99rem;
    }

  .Button_form_brickDefault {
      border-radius: 0 var(--control-radius) var(--control-radius) 0;
    }

  .Button_form_defaultBrick {
      border-radius: var(--control-radius) 0 0 var(--control-radius);
    }

  .Button_form_brickRound {
      padding-right: calc(var(--button-space) * 1.2);
      border-radius: 0 99rem 99rem 0;
    }

  .Button_form_roundBrick {
      padding-left: calc(var(--button-space) * 1.2);
      border-radius: 99rem 0 0 99rem;
    }

  .Button_size_xs {
      --button-height: var(--control-height-xs);
      --button-font-size: var(--control-text-size-xs);
      --button-space: var(--control-space-xs);
    }

  .Button_size_s {
      --button-height: var(--control-height-s);
      --button-font-size: var(--control-text-size-s);
      --button-space: var(--control-space-s);
    }

  .Button_size_m {
      --button-height: var(--control-height-m);
      --button-font-size: var(--control-text-size-m);
      --button-space: var(--control-space-m);
    }

  .Button_size_l {
      --button-height: var(--control-height-l);
      --button-font-size: var(--control-text-size-l);
      --button-space: var(--control-space-l);
    }

  .Button_view_clear {
      --color-hover: var(--color-control-typo-clear-hover);
      color: var(--color-control-typo-clear);
      background-color: var(--color-control-bg-clear);
    }

  .Button_view_clear:hover {
        background-color: var(--color-control-bg-clear-hover);
      }

  .Button_view_ghost {
      --color-hover: var(--color-control-typo-ghost-hover);
      color: var(--color-control-typo-ghost);
      background-color: var(--color-control-bg-ghost);
    }

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

  .Button_view_primary {
      --color-hover: var(--color-control-typo-primary-hover);
      color: var(--color-control-typo-primary);
      background-color: var(--color-control-bg-primary);
    }

  .Button_view_primary:hover {
        background-color: var(--color-control-bg-primary-hover);
      }

  .Button_view_secondary {
      --color-hover: var(--color-control-typo-secondary-hover);
      color: var(--color-control-typo-secondary);
      background-color: var(--color-control-bg-secondary);
      border: var(--control-border-width) solid var(--color-control-bg-border-secondary);
      line-height: calc(var(--button-height) - var(--control-border-width) * 2);
    }

  .Button_view_secondary:hover {
        background-color: var(--color-control-bg-secondary-hover);
        border-color: var(--color-control-bg-border-secondary-hover);
      }

  .Button_disabled,
  .Button_loading {
    background-color: var(--color-control-bg-disable);
    border-color: transparent;
    cursor: not-allowed;
    pointer-events: none;
  }

  .Button_disabled {
    color: var(--color-control-typo-disable);
  }

  .Button_loading {
    color: transparent;
  }

  .Button_width_full {
      width: 100%;
    }

  .Button_onlyIcon {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: var(--button-height);
    padding: 0;
  }

  .Button_withIcon {
    --icon-indent: calc(var(--button-space) * 0.7);
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }

  .Button-Icon {
    display: block;
    -ms-flex-negative: 0;
        flex-shrink: 0;
  }

  .Button-Icon_position_left {
        margin-right: var(--icon-indent);
      }

  .Button-Icon_position_right {
        margin-left: var(--icon-indent);
      }

  .Button-Label {
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    -ms-flex-negative: 1;
        flex-shrink: 1;
  }

  .Button_loading .Button-Loader {
    --loaderBackgroundColor: var(--color-control-typo-disable);
    position: absolute;
  }

.MixFocus:not(.MixFocus_before):focus,
  .MixFocus:not(.MixFocus_before):focus:hover,
  .MixFocus:not(.MixFocus_before)[class*='_focus'],
  .MixFocus:not(.MixFocus_before)[class*='_focus']:hover,
  .MixFocus_before:focus::before,
  .MixFocus_before:focus:hover::before,
  .MixFocus_before[class*='_focus']::before,
  .MixFocus_before[class*='_focus']:hover::before {
    outline: none;
    -webkit-box-shadow: 0 0 0 3px var(--color-control-bg-focus);
            box-shadow: 0 0 0 3px var(--color-control-bg-focus);
    -webkit-animation: Animation--MixFocus 0.5s ease-in;
            animation: Animation--MixFocus 0.5s ease-in;
  }
  .MixFocus:not(.MixFocus_before):focus:active,
  .MixFocus:not(.MixFocus_before):focus:active:hover,
  .MixFocus:not(.MixFocus_before)[class*='_focus']:active,
  .MixFocus:not(.MixFocus_before)[class*='_focus']:active:hover,
  .MixFocus_before:focus:active::before,
  .MixFocus_before:focus:active:hover::before,
  .MixFocus_before[class*='_focus']:active::before,
  .MixFocus_before[class*='_focus']:active:hover::before {
    -webkit-animation-name: none !important;
            animation-name: none !important;
  }

@-webkit-keyframes Animation--MixFocus {
  from {
    -webkit-box-shadow: 0 0 0 0 var(--color-control-bg-focus), 0 0 0 0 var(--color-control-bg-active);
            box-shadow: 0 0 0 0 var(--color-control-bg-focus), 0 0 0 0 var(--color-control-bg-active);
  }

  to {
    -webkit-box-shadow: 0 0 0 3px var(--color-control-bg-focus), 0 0 0 6px transparent;
            box-shadow: 0 0 0 3px var(--color-control-bg-focus), 0 0 0 6px transparent;
  }
}

@keyframes Animation--MixFocus {
  from {
    -webkit-box-shadow: 0 0 0 0 var(--color-control-bg-focus), 0 0 0 0 var(--color-control-bg-active);
            box-shadow: 0 0 0 0 var(--color-control-bg-focus), 0 0 0 0 var(--color-control-bg-active);
  }

  to {
    -webkit-box-shadow: 0 0 0 3px var(--color-control-bg-focus), 0 0 0 6px transparent;
            box-shadow: 0 0 0 3px var(--color-control-bg-focus), 0 0 0 6px transparent;
  }
}

.Loader {
  --backgroundColor: var(--loaderBackgroundColor, var(--color-control-bg-primary));
  position: relative;
  top: 50%;
  left: 50%;
  width: 100%;
  height: calc(100% - var(--loader-size));
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

  .Loader::before {
    content: '';
    position: absolute;
    top: calc(50% - (var(--loader-size) * 0.5));
    left: calc(50% - (var(--loader-size) * 2.5));
    width: var(--loader-size);
    height: var(--loader-size);
    background: var(--backgroundColor);
    border-radius: 50%;
    -webkit-animation: loader 1s ease infinite;
            animation: loader 1s ease infinite;
  }

  .Loader::after {
    content: '';
    position: absolute;
    top: calc(50% - (var(--loader-size) * 0.5));
    left: calc(50% + (var(--loader-size) * 1.5));
    width: var(--loader-size);
    height: var(--loader-size);
    background: var(--backgroundColor);
    border-radius: 50%;
    -webkit-animation: loader 1s -0.36s ease infinite;
            animation: loader 1s -0.36s ease infinite;
  }

  .Loader-Dot {
    position: absolute;
    top: calc(50% - (var(--loader-size) * 0.5));
    left: calc(50% - (var(--loader-size) * 0.5));
    width: var(--loader-size);
    height: var(--loader-size);
    background: var(--backgroundColor);
    border-radius: 50%;
    -webkit-animation: loader 1s -0.18s ease infinite;
            animation: loader 1s -0.18s ease infinite;
  }

  .Loader_size_s {
      --loader-size: 4px;
    }

  .Loader_size_m {
      --loader-size: 8px;
    }

@-webkit-keyframes loader {
  50% {
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
  }
}

@keyframes loader {
  50% {
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
  }
}

.Modal {
  --modal-window-animate-space: var(--space-xl);
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: var(--space-5xl);
}

  .Modal:not(.Modal_hasOverlay) {
    pointer-events: none;
  }

  .Modal-Window {
    position: absolute;
    overflow: auto;
    min-width: 400px;
    max-width: 90%;
    min-height: 200px;
    max-height: 90%;
    background-color: var(--color-bg-default);
    border-radius: var(--control-radius);
    -webkit-box-shadow: var(--shadow-modal);
            box-shadow: var(--shadow-modal);
    pointer-events: auto;
  }

  .Modal-Window_position_center {
        -ms-flex-item-align: safe center;
            align-self: safe center;
      }

  .Modal-Window_position_top {
        -ms-flex-item-align: safe flex-start;
            align-self: safe flex-start;
      }

  .Modal-Overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    background: var(--color-bg-tone);
    border: none;
  }

  .Modal_animate_appear .Modal-Overlay, .Modal_animate_enter .Modal-Overlay, .Modal_animate_exit .Modal-Overlay, .Modal_animate_appearActive .Modal-Overlay, .Modal_animate_enterActive .Modal-Overlay, .Modal_animate_exitActive .Modal-Overlay {
        -webkit-transition: opacity 0.24s ease;
        transition: opacity 0.24s ease;
      }

  .Modal_animate_appear .Modal-Window, .Modal_animate_enter .Modal-Window, .Modal_animate_exit .Modal-Window, .Modal_animate_appearActive .Modal-Window, .Modal_animate_enterActive .Modal-Window, .Modal_animate_exitActive .Modal-Window {
        -webkit-transition: opacity 0.24s, -webkit-transform 0.24s;
        transition: opacity 0.24s, -webkit-transform 0.24s;
        transition: opacity 0.24s, transform 0.24s;
        transition: opacity 0.24s, transform 0.24s, -webkit-transform 0.24s;
      }

  .Modal_animate_appear .Modal-Overlay, .Modal_animate_enter .Modal-Overlay {
        opacity: 0;
      }

  .Modal_animate_appear .Modal-Window, .Modal_animate_enter .Modal-Window {
        opacity: 0;
        -webkit-transform: translate(0, calc(-1 * var(--modal-window-animate-space)));
                transform: translate(0, calc(-1 * var(--modal-window-animate-space)));
      }

  .Modal_animate_appearActive .Modal-Overlay, .Modal_animate_enterActive .Modal-Overlay {
        opacity: 1;
      }

  .Modal_animate_appearActive .Modal-Window, .Modal_animate_enterActive .Modal-Window {
        opacity: 1;
        -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
      }

  .Modal_animate_exit .Modal-Overlay {
        opacity: 1;
      }

  .Modal_animate_exit .Modal-Window {
        opacity: 1;
        -webkit-transform: translate(0, 0);
                transform: translate(0, 0);
      }

  .Modal_animate_exitActive .Modal-Overlay {
        opacity: 0;
      }

  .Modal_animate_exitActive .Modal-Window {
        opacity: 0;
        -webkit-transform: translate(0, var(--modal-window-animate-space));
                transform: translate(0, var(--modal-window-animate-space));
      }

.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_gpnDefault {
  /* //////////////////////////////
  // Цвета фонов /////////////// */
  --color-bg-default: rgb(255, 255, 255); /* Цвет дефолта */
  --color-bg-secondary: rgb(236, 241, 244); /* Цвет дефолта */
  --color-bg-brand: rgb(0, 113, 178); /* Цвет фона брендированый */
  --color-bg-link: rgb(0, 120, 210); /* Цвет фона ссылки */
  --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, 32, 51, 0.85); /* Цвет паранджи */
  --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(235, 87, 87); /* Цвет фона ошибки */
  --color-bg-critical: rgb(51, 0, 15); /* Цвет фона системнный */

  /* //////////////////////////////
  // Цвета текста ////////////// */
  --color-typo-primary: rgb(0, 32, 51); /* Цвет основного текста */
  --color-typo-secondary: rgba(0, 32, 51, 0.6); /* Цвет второстепенного текста */
  --color-typo-ghost: rgba(0, 32, 51, 0.3); /* Цвет дополнительного текста */
  --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(235, 51, 51); /* Цвет текста ошибки */
  --color-typo-critical: rgb(51, 0, 15); /* Цвет фона системнный */
  --color-typo-link: rgb(0, 120, 210); /* Цвет основной ссылки */
  --color-typo-link-minor: rgb(28, 86, 130); /* Цвет второстепенной ссылки */
  --color-typo-link-hover: rgb(0, 142, 250); /* Цвет ховера ссылки */

  /* //////////////////////////////
  // Цвета скроллбара ////////////// */
  --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: rgba(0, 32, 51, 0.35); /* Цвет плейсхолдера контрола */
  --color-control-bg-border-default: rgba(0, 66, 105, 0.28); /* Цвет фона бордеров котрола */

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

  --color-control-bg-border-focus: rgb(0, 145, 255); /* Цвет аутлайна контролов при фокусе */ /* TODO заменить на правило целиком */
  --color-control-bg-focus: rgba(0, 120, 210, 0.3); /* Цвет тени в состонии фокуса */
  --color-control-bg-active: rgba(0, 120, 210, 0.5); /* Цвет тени в состонии нажатия  */

  /* Primary */
  --color-control-bg-primary: rgb(0, 120, 210); /* Цвет фона активного контрола */
  --color-control-bg-primary-hover: rgb(0, 145, 255); /* Цвет фона активного контрола по ховеру */

  --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(0, 120, 210); /* Цвет фона бордеров котрола */

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

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

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

  /* 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: rgba(0, 66, 105, 0.07); /* Цвет фона неактивного контрола */
  --color-control-bg-border-disable: rgba(0, 66, 105, 0); /* Цвет фона бордеров неактивного контрола */

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

  /* /////////////////////////////
  // Цвета тени /////////// */
  --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_gpnDark {
  /* //////////////////////////////
  // Цвета фонов /////////////// */
  --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(0, 120, 210); /* Цвет фона ссылки */
  --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(254, 67, 67); /* Цвет фона ошибки */
  --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(247, 59, 59); /* Цвет текста ошибки */
  --color-typo-critical: rgb(97, 0, 29); /* Цвет фона системнный */
  --color-typo-link: rgb(15, 159, 255); /* Цвет основной ссылки */
  --color-typo-link-minor: rgb(111, 165, 200); /* Цвет второстепенной ссылки */

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

  /* //////////////////////////////
  // Цвета скроллбара ////////////// */
  --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(5, 147, 255); /* Цвет аутлайна контролов при фокусе */ /* TODO заменить на правило целиком */
  --color-control-bg-focus: rgba(0, 120, 210, 0.4); /* Цвет тени в состонии фокуса */
  --color-control-bg-active: rgba(0, 120, 210, 0.7); /* Цвет тени в состонии нажатия  */

  /* Primary */
  --color-control-bg-primary: rgb(0, 120, 210); /* Цвет фона активного контрола */
  --color-control-bg-primary-hover: rgb(0, 145, 255); /* Цвет фона активного контрола по ховеру */

  --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(0, 120, 210); /* Цвет фона бордеров котрола */

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

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

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

  /* 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_gpnDefault {
  --control-radius: 4px; /* Основной радиус скругления контроллов */
  --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-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);
}

.Theme_font_gpnDefault {
  --font-primary: 'Inter', '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_gpnDefault {
  /* Размер текста */
  --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-semibold: 600;
  --font-weight-text-bold: bold;
  --font-weight-text-extrabold: 800;
  --font-weight-text-black: 900;
}

.Theme_space_gpnDefault {
  /* Отступы */
  --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_gpnDefault {
  /* Тени */
  --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 */
.Theme_color_gpnDisplay {
  /* //////////////////////////////
  // Цвета фонов /////////////// */
  --color-bg-default: rgb(0, 32, 51); /* Цвет дефолта */
  --color-bg-secondary: rgb(0, 45, 71); /* Цвет дефолта */
  --color-bg-brand: rgb(0, 113, 178); /* Цвет фона брендированый */
  --color-bg-link: rgb(0, 120, 210); /* Цвет фона ссылки */
  --color-bg-border: rgba(246, 251, 253, 0.28); /* Цвет границ */
  --color-bg-stripe: rgba(246, 251, 253, 0.05); /* Цвет зебры (например, при окрашивании фона строк таблицы через одну) */

  --color-bg-ghost: rgba(246, 251, 253, 0.08); /* Цвет затенения */
  --color-bg-tone: rgba(0, 22, 31, 0.85); /* Цвет паранджи */
  --color-bg-soft: rgba(255, 255, 255, 0.9); /* Цвет молока */
  --color-bg-system: rgb(49, 85, 129); /* Цвет фона системнный */

  --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(245, 77, 77); /* Цвет фона ошибки */
  --color-bg-critical: rgb(51, 0, 15); /* Цвет фона системнный */

  /* //////////////////////////////
  // Цвета текста ////////////// */
  --color-typo-primary: rgb(238, 248, 251); /* Цвет основного текста */
  --color-typo-secondary: rgba(246, 251, 253, 0.6); /* Цвет второстепенного текста */
  --color-typo-ghost: rgba(246, 251, 253, 0.3); /* Цвет дополнительного текста */
  --color-typo-brand: rgb(0, 113, 178); /* Цвет брендового текста */
  --color-typo-system: rgb(64, 114, 176); /* Цвет фона системнный */

  --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(237, 69, 69); /* Цвет текста ошибки */
  --color-typo-critical: rgb(97, 0, 29); /* Цвет фона системнный */
  --color-typo-link: rgb(15, 159, 255); /* Цвет основной ссылки */
  --color-typo-link-minor: rgb(111, 165, 200); /* Цвет второстепенной ссылки */

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

  /* //////////////////////////////
  // Цвета скроллбара ////////////// */
  --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(0, 32, 51); /* Цвет фона контрола */
  --color-control-typo-default: rgba(246, 251, 253, 0.8); /* Цвет основного текста контрола */
  --color-control-typo-placeholder: rgba(246, 251, 253, 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(5, 147, 255); /* Цвет аутлайна контролов при фокусе */ /* TODO заменить на правило целиком */
  --color-control-bg-focus: rgba(0, 120, 210, 0.4); /* Цвет тени в состонии фокуса */
  --color-control-bg-active: rgba(0, 120, 210, 0.8); /* Цвет тени в состонии нажатия  */

  /* Primary */
  --color-control-bg-primary: rgb(0, 120, 210); /* Цвет фона активного контрола */
  --color-control-bg-primary-hover: rgb(0, 145, 255); /* Цвет фона активного контрола по ховеру */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.Checkbox {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  font-family: var(--font-sans);
  cursor: pointer;
}

  .Checkbox_size_m {
      --checkbox-font-size: var(--control-text-size-m);
      --checkbox-size: var(--control-box-size-m);
      --checkbox-offset: var(--space-xs);
    }

  .Checkbox_size_l {
      --checkbox-font-size: var(--control-text-size-l);
      --checkbox-size: var(--control-box-size-l);
      --checkbox-offset: var(--space-s);
    }

  .Checkbox_view_primary {
      --checkbox-checked-border: var(--color-control-bg-primary);
      --checkbox-checked-background: var(--color-control-bg-primary);
      --checkbox-checked-check: var(--color-control-typo-primary);
      --checkbox-checked-border-hover: var(--color-control-bg-primary-hover);
      --checkbox-checked-background-hover: var(--color-control-bg-primary-hover);
    }

  .Checkbox_view_ghost {
      --checkbox-checked-border: var(--color-control-bg-border-default);
      --checkbox-checked-background: var(--color-control-bg-ghost);
      --checkbox-checked-check: var(--color-control-typo-ghost);
      --checkbox-checked-border-hover: var(--color-control-bg-border-default);
      --checkbox-checked-background-hover: var(--color-control-bg-ghost-hover);
    }

  .Checkbox_intermediate .Checkbox-Input,
    .Checkbox_intermediate .Checkbox-Input:checked,
    .Checkbox_intermediate:hover .Checkbox-Input,
    .Checkbox_intermediate:hover .Checkbox-Input:checked {
      background-color: var(--checkbox-checked-background);
      border-color: var(--checkbox-checked-border);
    }

  .Checkbox_intermediate .Checkbox-Input::before, .Checkbox_intermediate .Checkbox-Input:checked::before, .Checkbox_intermediate:hover .Checkbox-Input::before, .Checkbox_intermediate:hover .Checkbox-Input:checked::before {
        background-color: var(--checkbox-checked-check);
        border: none;
        opacity: 1;
        -webkit-transition: opacity 0.15s, background-color 0.08s 0.04s, -webkit-transform 0.15s;
        transition: opacity 0.15s, background-color 0.08s 0.04s, -webkit-transform 0.15s;
        transition: opacity 0.15s, transform 0.15s, background-color 0.08s 0.04s;
        transition: opacity 0.15s, transform 0.15s, background-color 0.08s 0.04s, -webkit-transform 0.15s;
        -webkit-transform: rotate(0) scale(1, 0.35) translate(0, -50%);
                transform: rotate(0) scale(1, 0.35) translate(0, -50%);
      }

  .Checkbox_disabled {
    pointer-events: none;
  }

  .Checkbox_disabled .Checkbox-Input:disabled {
      background-color: var(--color-control-bg-disable);
      border-color: transparent;
    }

  .Checkbox_disabled .Checkbox-Input:disabled::before {
        border-color: var(--color-control-typo-disable);
      }

  .Checkbox_disabled.Checkbox_intermediate .Checkbox-Input:disabled::before {
        background-color: var(--color-control-typo-disable);
      }

  .Checkbox_disabled .Checkbox-Input:disabled ~ .Checkbox-Label {
      color: var(--color-control-typo-disable);
    }

  .Checkbox_align_center {
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
    }

  .Checkbox_align_top {
      -webkit-box-align: top;
          -ms-flex-align: top;
              align-items: top;
    }

  .Checkbox_align_top .Checkbox-Input {
        margin-top: var(--space-3xs);
      }

  .Checkbox-Label {
    margin-left: var(--checkbox-offset);
    color: var(--color-control-typo-default);
    font-size: var(--checkbox-font-size);
  }

  .Checkbox-Input {
    position: relative;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    margin: 0;
    padding: 0;
    background-color: transparent;
    border: var(--control-border-width) solid var(--color-control-bg-border-default);
    border-radius: var(--control-radius);
    cursor: pointer;
    -webkit-transition: border-color 0.15s, background-color 0.15s;
    transition: border-color 0.15s, background-color 0.15s;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    -webkit-appearance: none;
  }

  .Checkbox-Input::before {
      content: '';
      position: absolute;
      z-index: 1;
      top: calc(var(--checkbox-size) / 2 - 1px);
      left: calc(var(--checkbox-size) / 5 - 1px);
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
      width: calc(var(--checkbox-size) * 0.6);
      height: calc(var(--checkbox-size) * 0.35);
      background-color: var(--color-control-bg-affect);
      border-left: 2px solid var(--checkbox-checked-check);
      border-bottom: 2px solid var(--checkbox-checked-check);
      opacity: 0;
      -webkit-transition: opacity 0.15s, background-color 0.08s, -webkit-transform 0.15s;
      transition: opacity 0.15s, background-color 0.08s, -webkit-transform 0.15s;
      transition: opacity 0.15s, transform 0.15s, background-color 0.08s;
      transition: opacity 0.15s, transform 0.15s, background-color 0.08s, -webkit-transform 0.15s;
      -webkit-transform: rotate(-50deg) scale(0, 1);
              transform: rotate(-50deg) scale(0, 1);
      -webkit-transform-origin: 0 0;
              transform-origin: 0 0;
    }

  .Checkbox-Input:checked {
    background-color: var(--checkbox-checked-background);
    border-color: var(--checkbox-checked-border);
  }

  .Checkbox-Input:checked::before {
      opacity: 1;
      -webkit-transform: rotate(-50deg) scale(1, 1);
              transform: rotate(-50deg) scale(1, 1);
    }

  .Checkbox:hover .Checkbox-Input {
    border-color: var(--color-control-bg-border-default-hover);
  }

  .Checkbox:hover .Checkbox-Input:checked {
      background-color: var(--checkbox-checked-background-hover);
      border-color: var(--checkbox-checked-border-hover);
    }

.DatePickerDropdown {
  --transition-spase: var(--space-2xs);
  padding: var(--space-l);
  background: var(--color-bg-default);
  -webkit-box-shadow: var(--shadow-layer);
          box-shadow: var(--shadow-layer);
}

  .DatePickerDropdown_form_default {
      border-radius: var(--control-radius);
    }

  .DatePickerDropdown_form_brick {
      border-radius: 0;
    }

  .DatePickerDropdown_form_round {
      border-radius: var(--space-l);
    }

.MixPopoverAnimate {
  --mix-dropdown-animate-space: var(--space-s);
  --mix-dropdown-animate-transform: translate(0, var(--mix-dropdown-animate-space));
}

  .MixPopoverAnimate_animate_exit {
      opacity: 1;
      -webkit-transform: translate(0);
              transform: translate(0);
    }

  .MixPopoverAnimate_animate_enter,
    .MixPopoverAnimate_animate_exitActive,
    .MixPopoverAnimate_animate_exitDone,
    .MixPopoverAnimate_animate_exited,
    .MixPopoverAnimate_animate_exiting,
    .MixPopoverAnimate_animate_unmounted {
      opacity: 0;
      pointer-events: none;
      -webkit-transform: var(--mix-dropdown-animate-transform);
              transform: var(--mix-dropdown-animate-transform);
    }

  .MixPopoverAnimate_animate_enterDone,
    .MixPopoverAnimate_animate_enterActive,
    .MixPopoverAnimate_animate_entered,
    .MixPopoverAnimate_animate_entering {
      opacity: 1;
      -webkit-transform: translate(0);
              transform: translate(0);
    }

  .MixPopoverAnimate_animate_entered,
    .MixPopoverAnimate_animate_entering,
    .MixPopoverAnimate_animate_exiting,
    .MixPopoverAnimate_animate_enterDone,
    .MixPopoverAnimate_animate_exitActive,
    .MixPopoverAnimate_animate_enterActive,
    .MixPopoverAnimate_animate_exitDone {
      -webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
      transition: opacity 0.2s, -webkit-transform 0.2s;
      transition: opacity 0.2s, transform 0.2s;
      transition: opacity 0.2s, transform 0.2s, -webkit-transform 0.2s;
    }

  .MixPopoverAnimate_direction_downCenter,
    .MixPopoverAnimate_direction_downRight,
    .MixPopoverAnimate_direction_downLeft,
    .MixPopoverAnimate_direction_downStartLeft,
    .MixPopoverAnimate_direction_downStartRight {
      --mix-dropdown-animate-transform: translate(0, var(--mix-dropdown-animate-space));
    }

  .MixPopoverAnimate_direction_upCenter,
    .MixPopoverAnimate_direction_upRight,
    .MixPopoverAnimate_direction_upLeft,
    .MixPopoverAnimate_direction_upStartLeft,
    .MixPopoverAnimate_direction_upStartRight {
      --mix-dropdown-animate-transform: translate(0, calc(-1 * var(--mix-dropdown-animate-space)));
    }

  .MixPopoverAnimate_direction_leftUp,
    .MixPopoverAnimate_direction_leftCenter,
    .MixPopoverAnimate_direction_leftDown,
    .MixPopoverAnimate_direction_leftStartUp,
    .MixPopoverAnimate_direction_leftStartDown {
      --mix-dropdown-animate-transform: translate(calc(-1 * var(--mix-dropdown-animate-space)), 0);
    }

  .MixPopoverAnimate_direction_rightUp,
    .MixPopoverAnimate_direction_rightCenter,
    .MixPopoverAnimate_direction_rightDown,
    .MixPopoverAnimate_direction_rightStartUp,
    .MixPopoverAnimate_direction_rightStartDown {
      --mix-dropdown-animate-transform: translate(var(--mix-dropdown-animate-space), 0);
    }

.DateTimeLabel {
  text-transform: capitalize;
}

.DateTimeMonth {
  --date-time-item-width: var(--control-height-s);
  --date-time-item-height: var(--control-height-s);
  --date-time-cell-vertical-gap: var(--space-3xs);
  --date-time-cell-horisontal-gap: var(--space-3xs);
  --date-time-cell-width: calc(
    var(--date-time-item-width) + (var(--date-time-cell-horisontal-gap) * 2)
  );
  --date-time-cell-height: calc(
    var(--date-time-item-height) + (var(--date-time-cell-vertical-gap) * 2)
  );
  --date-time-grid-columns: 7;
  --date-time-grid-row-gap: 0;
}

/* 
--date-time-grid-columns 
--date-time-cell-width
--date-time-grid-row-gap

задаются сверху
*/

.DateTimeGrid {
  display: grid;
  grid-template-columns: repeat(var(--date-time-grid-columns), var(--date-time-cell-width));
  grid-row-gap: var(--date-time-grid-row-gap);
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
}

/* 
--date-time-cell-width
--date-time-cell-height
--date-time-cell-vertical-gap
--date-time-cell-horisontal-ga

задаются сверху
*/

.DateTimeCell {
  --bg-color: var(--color-control-bg-ghost);
  --visible-height: calc(var(--date-time-cell-height) - (var(--date-time-cell-horisontal-gap) * 2));
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: var(--date-time-cell-width);
  height: var(--date-time-cell-height);
}

.DateTimeCell_range::before {
      content: '';
      position: absolute;
      top: var(--date-time-cell-vertical-gap);
      right: 0;
      left: 0;
      bottom: var(--date-time-cell-vertical-gap);
      background: var(--bg-color);
    }

.DateTimeCell_range_first::before,
    .DateTimeCell_range_last::before {
      content: '';
      position: absolute;
      top: var(--date-time-cell-vertical-gap);
      bottom: var(--date-time-cell-vertical-gap);
      background: var(--bg-color);
    }

.DateTimeCell_range_first::before {
      right: 0;
      left: var(--date-time-cell-horisontal-gap);
      border-radius: var(--visible-height) 0 0 var(--visible-height);
    }

.DateTimeCell_range_last::before {
      right: var(--date-time-cell-horisontal-gap);
      left: 0;
      border-radius: 0 var(--visible-height) var(--visible-height) 0;
    }

/* 
--date-time-item-width
--date-time-item-height

задаются сверху
*/

.DateTimeItem {
  --item-bg-color: transparent;
  --item-bg-color-hover: transparent;
  --item-border-color: var(--color-control-bg-primary);
  --item-border-color-hover: var(--color-control-bg-primary-hover);
  --item-event-color: var(--color-control-bg-primary);
  --item-event-color-hover: var(--color-control-bg-primary-hover);
  --item-text-color: var(--color-typo-primary);
  --item-text-color-hover: var(--color-control-bg-primary-hover);
  --bg-color: var(--item-bg-color);
  --event-color: var(--item-event-color);
  --border-color: var(--item-border-color);
  --text-color: var(--item-text-color);
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: var(--date-time-item-width);
  height: var(--date-time-item-height);
  color: var(--text-color);
  background: var(--bg-color);
  border: none;
  border-radius: calc(var(--date-time-item-height) / 2);
  font-size: var(--size-text-s);
  line-height: var(--date-time-item-height);
  text-transform: capitalize;
  -webkit-transition: background 0.2s, color 0.2s, -webkit-box-shadow 0.2s;
  transition: background 0.2s, color 0.2s, -webkit-box-shadow 0.2s;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s, -webkit-box-shadow 0.2s;
}

.DateTimeItem:hover {
    --bg-color: var(--item-bg-color-hover);
    --event-color: var(--item-event-color-hover);
    --border-color: var(--item-border-color-hover);
    --text-color: var(--item-text-color-hover);
  }

.DateTimeItem_selected {
    --item-bg-color: var(--color-control-bg-primary);
    --item-bg-color-hover: var(--color-control-bg-primary-hover);
    --item-border-color: transparent;
    --item-border-color-hover: transparent;
    --item-event-color: var(--color-control-typo-primary);
    --item-event-color-hover: var(--color-control-typo-primary);
    --item-text-color: var(--color-typo-primary);
    --item-text-color-hover: var(--color-typo-primary);
  }

.DateTimeItem:not(.DateTimeItem_disabled) {
    cursor: pointer;
  }

.DateTimeItem_disabled {
    --item-bg-color: transparent;
    --item-bg-color-hover: transparent;
    --item-border-color: var(--color-control-bg-primary);
    --item-border-color-hover: var(--color-control-bg-primary);
    --item-event-color: var(--color-control-typo-disable);
    --item-event-color-hover: var(--color-control-typo-disable);
    --item-text-color: var(--color-control-typo-disable);
    --item-text-color-hover: var(--color-control-typo-disable);
  }

.DateTimeItem_selected.date-timeItem_disabled {
    --item-bg-color: var(--color-control-bg-disable);
    --item-bg-color-hover: var(--color-control-bg-disable);
    --item-border-color: transparent;
    --item-border-color-hover: transparent;
    --item-event-color: var(--color-control-typo-disable);
    --item-event-color-hover: var(--color-control-typo-disable);
    --item-text-color: var(--color-control-typo-disable);
    --item-text-color-hover: var(--color-control-typo-disable);
  }

.DateTimeItem_event::before {
      content: '';
      position: absolute;
      bottom: var(--space-2xs);
      width: var(--space-2xs);
      height: var(--space-2xs);
      background: var(--event-color);
      border-radius: 50%;
      -webkit-transition: background 0.2s;
      transition: background 0.2s;
    }

.DateTimeItem_current {
    -webkit-box-shadow: inset 0 0 0 1.3px var(--border-color);
            box-shadow: inset 0 0 0 1.3px var(--border-color);
  }

.DateTimeToggler {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: calc(var(--date-time-cell-width) * 7);
}

  .DateTimeToggler:not(.DateTimeToggler_withPrevButton) {
    padding-left: var(--control-height-s);
  }

  .DateTimeToggler:not(.DateTimeToggler_withNextButton) {
    padding-right: var(--control-height-s);
  }

  .DateTimeToggler-Label {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    margin: 0 var(--space-xs);
  }

  .DateTimeToggler-Button_direction_prev {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }

.DateTime10Years {
  --date-time-item-width: calc(var(--control-height-s) * 7 / var(--date-time-grid-columns));
  --date-time-item-height: var(--control-height-s);
  --date-time-cell-vertical-gap: var(--space-3xs);
  --date-time-cell-horisontal-gap: calc(var(--space-3xs) * 7 / var(--date-time-grid-columns));
  --date-time-cell-width: calc(
    var(--date-time-item-width) + (var(--date-time-cell-horisontal-gap) * 2)
  );
  --date-time-cell-height: calc(
    var(--date-time-item-height) + (var(--date-time-cell-vertical-gap) * 2)
  );
  --date-time-grid-columns: 4;
  --date-time-grid-row-gap: calc(var(--control-height-s) * 5 / 3);
}

.DateTime10YearSlider {
  --date-time-cell-width: calc(var(--control-height-s) + (var(--space-3xs) * 2));
  --item-width: calc((var(--date-time-cell-width) * 14 - var(--control-height-m) * 2) / 11);
  --parent-width: calc(var(--item-width) * 10);
}

/*
задается сверху
--item-width
--parent-width
*/

.DateTimeSlider {
  --slider-height: var(--control-height-m);
  --slider-width: calc(var(--date-time-cell-width) * 14 + var(--space-m));
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: var(--slider-width);
}

.DateTimeSlider-Slider {
    position: relative;
    overflow: hidden;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    height: var(--slider-height);
    margin: 0 var(--space-xs);
    background: var(--color-control-bg-ghost);
    border-radius: var(--control-radius);
  }

.DateTimeSlider-Button_direction_prev {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }

.DateTimeSlider-SliderBody {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
  }

.DateTimeSlider-Parent {
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: var(--parent-width);
    height: 100%;
    -webkit-transition: -webkit-transform 0.5s;
    transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
    transition: transform 0.5s, -webkit-transform 0.5s;
  }

.DateTimeSlider-Parent_position_0 {
        -webkit-transform: translateX(calc(var(--parent-width) * -1));
                transform: translateX(calc(var(--parent-width) * -1));
      }

.DateTimeSlider-Parent_position_1 {
        -webkit-transform: translateX(0);
                transform: translateX(0);
      }

.DateTimeSlider-Parent_position_2 {
        -webkit-transform: translateX(calc(var(--parent-width)));
                transform: translateX(calc(var(--parent-width)));
      }

.DateTimeSlider-Parent_position_3 {
        -webkit-transform: translateX(calc(var(--parent-width) * 2));
                transform: translateX(calc(var(--parent-width) * 2));
      }

.DateTimeSlider-Parent_selected::before {
        content: '';
        position: absolute;
        left: var(--value-offset);
        bottom: 0;
        width: var(--value-width);
        height: var(--space-3xs);
        background-color: var(--color-control-bg-primary);
        pointer-events: none;
      }

/* исправляет разрыв между полосками */

.DateTimeSlider-Parent_selected + .DateTimeSlider-Parent_selected::before {
        left: calc(var(--value-offset) - 1px);
        width: calc(var(--value-width) + 1px);
      }

.DateTimeSlider-ParentLabel {
    position: absolute;
    right: 0;
    -webkit-transition: color 0.2s, -webkit-transform 0.5s;
    transition: color 0.2s, -webkit-transform 0.5s;
    transition: transform 0.5s, color 0.2s;
    transition: transform 0.5s, color 0.2s, -webkit-transform 0.5s;
  }

.DateTimeSlider-ParentLabel_position_0 {
        -webkit-transform: translateX(calc(var(--item-width) * -13));
                transform: translateX(calc(var(--item-width) * -13));
      }

.DateTimeSlider-ParentLabel_position_1 {
        -webkit-transform: translateX(calc((var(--parent-width) + var(--item-width)) / -2 + 50%));
                transform: translateX(calc((var(--parent-width) + var(--item-width)) / -2 + 50%));
      }

.DateTimeSlider-ParentLabel_position_2 {
        -webkit-transform: translateX(calc(var(--space-2xs) * -1));
                transform: translateX(calc(var(--space-2xs) * -1));
      }

.DateTimeSlider-ParentLabel_position_3 {
        -webkit-transform: translateX(calc(var(--parent-width)));
                transform: translateX(calc(var(--parent-width)));
      }

.DateTimeSlider-Item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    width: var(--item-width);
    height: 100%;
    margin-bottom: var(--space-3xs);
    background: transparent;
    border: none;
    outline: transparent;
    cursor: pointer;
  }

.DateTimeSlider-ItemLabel {
    width: var(--item-width);
    height: var(--space-m);
    margin-bottom: var(--space-3xs);
  }

.DateTimeSlider-Selector {
    position: absolute;
    width: calc(var(--item-width) * 2);
    height: var(--slider-height);
    background-color: var(--color-control-bg-ghost);
    border-radius: var(--control-radius);
    -webkit-transition: -webkit-transform 0.3s;
    transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;
    -webkit-transform: translateX(calc(var(--item-width) * var(--current-item)));
            transform: translateX(calc(var(--item-width) * var(--current-item)));
  }

.DateTime100YearSlider {
  --date-time-cell-width: calc(var(--control-height-s) + (var(--space-3xs) * 2));
  --item-width: calc((var(--date-time-cell-width) * 14 - var(--control-height-m) * 2) / 11);
  --parent-width: calc(var(--item-width) * 10);
}

.DateTimeMixLayout_view_classic {
      --date-time-cell-width: calc(var(--control-height-s) + (var(--space-3xs) * 2));
      width: calc(var(--date-time-cell-width) * 7);
    }
    .DateTimeMixLayout_view_book {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
    }
  .DateTimeMixLayout-Label,
  .DateTimeMixLayout-Slider {
    margin-bottom: var(--space-s);
  }
  .DateTimeMixLayout-PageWrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .DateTimeMixLayout-Page:not(:last-child) {
      margin-right: var(--space-m);
    }

.DateTimeYear {
  --date-time-item-width: calc(var(--control-height-s) * 7 / var(--date-time-grid-columns));
  --date-time-item-height: var(--control-height-s);
  --date-time-cell-vertical-gap: var(--space-3xs);
  --date-time-cell-horisontal-gap: calc(var(--space-3xs) * 7 / var(--date-time-grid-columns));
  --date-time-cell-width: calc(
    var(--date-time-item-width) + (var(--date-time-cell-horisontal-gap) * 2)
  );
  --date-time-cell-height: calc(
    var(--date-time-item-height) + (var(--date-time-cell-vertical-gap) * 2)
  );
  --date-time-grid-columns: 4;
  --date-time-grid-row-gap: calc(var(--control-height-s) * 5 / 3);
}

.DateTimeYearSlider {
  --date-time-cell-width: calc(var(--control-height-s) + (var(--space-3xs) * 2));
  --item-width: calc((var(--date-time-cell-width) * 14 - var(--control-height-m) * 2) / 13);
  --parent-width: calc(var(--item-width) * 12);
}

/*
--root-padding-left
задается из компонента
*/

.DateTimeTypeDateTime_withTime {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

.DateTimeTypeDateTime_withTime::after {
      content: '';
      position: absolute;
      top: 0;
      left: calc(
        (var(--control-height-s) + (var(--space-3xs) * 2)) * 7 + var(--space-s) +
          var(--root-padding-left)
      );
      display: block;
      width: 1px;
      height: 100%;
      background: var(--color-bg-border);
    }

.DateTimeTypeDateTime-Date_withTime {
      padding-right: var(--space-s);
    }

.DateTimeTypeDateTime-Time {
    padding-left: var(--space-s);
  }

/*
задается из компонета
--label-length
*/

.DateTimeTypeTime {
  width: calc((var(--control-height-s) + (var(--space-3xs) * 2)) * 3);
}

.DateTimeTypeTime-Grid {
    --date-time-item-width: var(--control-height-s);
    --date-time-item-height: var(--control-height-s);
    --date-time-cell-vertical-gap: var(--space-3xs);
    --date-time-cell-horisontal-gap: var(--space-3xs);
    --date-time-cell-width: calc(
      var(--date-time-item-width) + (var(--date-time-cell-horisontal-gap) * 2)
    );
    --date-time-cell-height: calc(
      var(--date-time-item-height) + (var(--date-time-cell-vertical-gap) * 2)
    );
    --date-time-grid-columns: 1;
    --date-time-grid-row-gap: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    height: calc(var(--date-time-cell-height) * 7);
  }

.DateTimeTypeTime-Label {
    display: block;
    height: var(--control-height-s);
    margin-bottom: var(--space-s);
    line-height: var(--control-height-s);
  }

.DateTimeTimeColumn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

  .DateTimeTimeColumn-Label {
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
  }

  .DateTimeTimeColumn-ScrollWrapper {
    overflow-y: scroll;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
    scrollbar-width: none;
  }

  .DateTimeTimeColumn-ScrollWrapper::-webkit-scrollbar {
      width: 0;
      height: 0;
    }

  .DateTimeTimeColumn-FakeElemet {
    height: calc(100% - var(--date-time-cell-height));
  }

.Popover {
  position: absolute;
  visibility: var(--popover-visibility);
  width: var(--popover-width);
  pointer-events: var(--popover-pointer-events);
}

  .Popover_direction_downCenter,
    .Popover_direction_downRight,
    .Popover_direction_downLeft,
    .Popover_direction_downStartLeft,
    .Popover_direction_downStartRight {
      top: calc(var(--popover-top) + var(--popover-offset));
      left: var(--popover-left);
    }

  .Popover_direction_upCenter,
    .Popover_direction_upRight,
    .Popover_direction_upLeft,
    .Popover_direction_upStartLeft,
    .Popover_direction_upStartRight {
      top: calc(var(--popover-top) - var(--popover-offset));
      left: var(--popover-left);
    }

  .Popover_direction_leftUp,
    .Popover_direction_leftCenter,
    .Popover_direction_leftDown,
    .Popover_direction_leftStartUp,
    .Popover_direction_leftStartDown {
      top: var(--popover-top);
      left: calc(var(--popover-left) - var(--popover-offset));
    }

  .Popover_direction_rightUp,
    .Popover_direction_rightCenter,
    .Popover_direction_rightDown,
    .Popover_direction_rightStartUp,
    .Popover_direction_rightStartDown {
      top: var(--popover-top);
      left: calc(var(--popover-left) + var(--popover-offset));
    }

.DatePickerAdditionalControls {
  --date-picker-cell-width: calc(var(--control-height-s) + (var(--space-3xs) * 2));
  padding-top: var(--space-l);
}

  .DatePickerAdditionalControls_type_date.DatePickerAdditionalControls_view_classic,
  .DatePickerAdditionalControls_type_year.DatePickerAdditionalControls_view_classic,
  .DatePickerAdditionalControls_type_month.DatePickerAdditionalControls_view_classic {
    width: calc(var(--date-picker-cell-width) * 7);
  }

  .DatePickerAdditionalControls_type_date.DatePickerAdditionalControls_view_book,
  .DatePickerAdditionalControls_type_year.DatePickerAdditionalControls_view_book,
  .DatePickerAdditionalControls_type_month.DatePickerAdditionalControls_view_book,
  .DatePickerAdditionalControls_type_date.DatePickerAdditionalControls_view_slider,
  .DatePickerAdditionalControls_type_year.DatePickerAdditionalControls_view_slider,
  .DatePickerAdditionalControls_type_month.DatePickerAdditionalControls_view_slider {
    width: calc(var(--date-picker-cell-width) * 14 + var(--space-m));
  }

  .DatePickerAdditionalControls_type_time {
    width: calc(var(--date-picker-cell-width) * 3);
  }

  .DatePickerAdditionalControls_type_date-time {
    width: calc(var(--date-picker-cell-width) * 10 + var(--space-s) * 2);
  }

  .DatePickerAdditionalControls_contentType_array {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      gap: var(--space-s);
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
    }

.TextField {
  --caption-margin-left: calc(var(--input-space) + var(--control-border-width));
  --counter-button-icon-color: var(--color-control-typo-ghost);
  --counter-button-background: transparent;
  --clear-button-color: var(--color-control-typo-clear);
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

  .TextField_width_full {
    width: 100%;
  }

  .TextField_size_xs {
      --input-height: var(--control-height-xs);
      --input-font-size: var(--control-text-size-xs);
      --input-space: calc(var(--control-space-xs) * 0.5);
    }

  .TextField_size_s {
      --input-height: var(--control-height-s);
      --input-font-size: var(--control-text-size-s);
      --input-space: calc(var(--control-space-s) * 0.5);
    }

  .TextField_size_m {
      --input-height: var(--control-height-m);
      --input-font-size: var(--control-text-size-m);
      --input-space: calc(var(--control-space-m) * 0.5);
    }

  .TextField_size_l {
      --input-height: var(--control-height-l);
      --input-font-size: var(--control-text-size-l);
      --input-space: calc(var(--control-space-l) * 0.5);
    }

  .TextField_labelPosition_top {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
    }

  .TextField_labelPosition_top > *:not(:last-child) {
        margin-bottom: var(--space-xs);
      }

  .TextField_labelPosition_left {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row;
    }

  .TextField_labelPosition_left .TextField-Label {
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        height: var(--input-height);
      }

  .TextField_labelPosition_left > *:not(:last-child) {
        margin-right: var(--space-s);
      }

  .TextField-Body {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 100%;
  }

  .TextField-Body .TextField-Caption {
      margin-top: var(--space-2xs);
      margin-left: var(--caption-margin-left);
    }

  .TextField_view_clear .TextField-Caption {
      --caption-margin-left: 0;
    }

  .TextField-InputContainer {
    position: relative;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    max-width: 100%;
    min-height: var(--input-height);
    font-family: var(--font-primary);
    font-weight: var(--font-weight-text-regular);
    -webkit-transition: border-color 0.15s, background-color 0.15s, -webkit-box-shadow 0.15s;
    transition: border-color 0.15s, background-color 0.15s, -webkit-box-shadow 0.15s;
    transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
    transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s, -webkit-box-shadow 0.15s;
  }

  .TextField-InputContainer_disabled {
      --counter-button-background: var(--color-control-bg-disable);
      --counter-button-icon-color: var(--color-control-typo-disable);
    }

  .TextField-InputContainer_view_clear,
    .TextField-InputContainer_view_clear:hover,
    .TextField-InputContainer_view_clear:focus {
      padding: 0;
      color: var(--color-control-typo-default);
    }

  .TextField-InputContainer_view_clear.TextField-InputContainer_disabled, .TextField-InputContainer_view_clear:hover.TextField-InputContainer_disabled, .TextField-InputContainer_view_clear:focus.TextField-InputContainer_disabled {
        pointer-events: none;
      }

  .TextField-InputContainer_view_clear.TextField-InputContainer_disabled .TextField-Input, .TextField-InputContainer_view_clear:hover.TextField-InputContainer_disabled .TextField-Input, .TextField-InputContainer_view_clear:focus.TextField-InputContainer_disabled .TextField-Input {
          color: var(--color-control-typo-disable);
        }

  .TextField-InputContainer_view_clear.TextField-InputContainer_disabled .TextField-Input:-webkit-autofill,
          .TextField-InputContainer_view_clear.TextField-InputContainer_disabled .TextField-Input:-webkit-autofill:hover,
          .TextField-InputContainer_view_clear.TextField-InputContainer_disabled .TextField-Input:-webkit-autofill:focus,
          .TextField-InputContainer_view_clear:hover.TextField-InputContainer_disabled .TextField-Input:-webkit-autofill,
          .TextField-InputContainer_view_clear:hover.TextField-InputContainer_disabled .TextField-Input:-webkit-autofill:hover,
          .TextField-InputContainer_view_clear:hover.TextField-InputContainer_disabled .TextField-Input:-webkit-autofill:focus,
          .TextField-InputContainer_view_clear:focus.TextField-InputContainer_disabled .TextField-Input:-webkit-autofill,
          .TextField-InputContainer_view_clear:focus.TextField-InputContainer_disabled .TextField-Input:-webkit-autofill:hover,
          .TextField-InputContainer_view_clear:focus.TextField-InputContainer_disabled .TextField-Input:-webkit-autofill:focus {
            -webkit-text-fill-color: var(--color-control-typo-disable);
          }

  .TextField-InputContainer_view_clear.TextField-InputContainer_disabled .TextField-Input::-webkit-input-placeholder, .TextField-InputContainer_view_clear:hover.TextField-InputContainer_disabled .TextField-Input::-webkit-input-placeholder, .TextField-InputContainer_view_clear:focus.TextField-InputContainer_disabled .TextField-Input::-webkit-input-placeholder {
          color: var(--color-control-typo-disable);
        }

  .TextField-InputContainer_view_clear.TextField-InputContainer_disabled .TextField-Input::-moz-placeholder, .TextField-InputContainer_view_clear:hover.TextField-InputContainer_disabled .TextField-Input::-moz-placeholder, .TextField-InputContainer_view_clear:focus.TextField-InputContainer_disabled .TextField-Input::-moz-placeholder {
          color: var(--color-control-typo-disable);
        }

  .TextField-InputContainer_view_clear.TextField-InputContainer_disabled .TextField-Input:-ms-input-placeholder, .TextField-InputContainer_view_clear:hover.TextField-InputContainer_disabled .TextField-Input:-ms-input-placeholder, .TextField-InputContainer_view_clear:focus.TextField-InputContainer_disabled .TextField-Input:-ms-input-placeholder {
          color: var(--color-control-typo-disable);
        }

  .TextField-InputContainer_view_clear.TextField-InputContainer_disabled .TextField-Input::-ms-input-placeholder, .TextField-InputContainer_view_clear:hover.TextField-InputContainer_disabled .TextField-Input::-ms-input-placeholder, .TextField-InputContainer_view_clear:focus.TextField-InputContainer_disabled .TextField-Input::-ms-input-placeholder {
          color: var(--color-control-typo-disable);
        }

  .TextField-InputContainer_view_clear.TextField-InputContainer_disabled .TextField-Input::placeholder, .TextField-InputContainer_view_clear:hover.TextField-InputContainer_disabled .TextField-Input::placeholder, .TextField-InputContainer_view_clear:focus.TextField-InputContainer_disabled .TextField-Input::placeholder {
          color: var(--color-control-typo-disable);
        }

  .TextField-InputContainer_view_clear.TextField-InputContainer_disabled .TextField-Side_type_string,
        .TextField-InputContainer_view_clear.TextField-InputContainer_disabled.TextField-InputContainer_withValue .TextField-Side_type_string,
        .TextField-InputContainer_view_clear:hover.TextField-InputContainer_disabled .TextField-Side_type_string,
        .TextField-InputContainer_view_clear:hover.TextField-InputContainer_disabled.TextField-InputContainer_withValue .TextField-Side_type_string,
        .TextField-InputContainer_view_clear:focus.TextField-InputContainer_disabled .TextField-Side_type_string,
        .TextField-InputContainer_view_clear:focus.TextField-InputContainer_disabled.TextField-InputContainer_withValue .TextField-Side_type_string {
          color: var(--color-control-typo-disable);
        }

  .TextField-InputContainer_view_clear.TextField-InputContainer_disabled.TextField-InputContainer .TextField-Icon,
        .TextField-InputContainer_view_clear.TextField-InputContainer_disabled.TextField-InputContainer_withValue .TextField-Icon,
        .TextField-InputContainer_view_clear:hover.TextField-InputContainer_disabled.TextField-InputContainer .TextField-Icon,
        .TextField-InputContainer_view_clear:hover.TextField-InputContainer_disabled.TextField-InputContainer_withValue .TextField-Icon,
        .TextField-InputContainer_view_clear:focus.TextField-InputContainer_disabled.TextField-InputContainer .TextField-Icon,
        .TextField-InputContainer_view_clear:focus.TextField-InputContainer_disabled.TextField-InputContainer_withValue .TextField-Icon {
          color: var(--color-control-typo-disable);
        }

  .TextField-InputContainer_view_default {
      --container-border-color: var(--color-control-bg-border-default);
      overflow-x: hidden;
      padding: 0 var(--input-space);
      color: var(--color-control-typo-default);
      background: var(--color-control-bg-default);
      border: var(--control-border-width) solid var(--container-border-color);
      border-radius: var(--control-radius);
    }

  .TextField-InputContainer_view_default:hover {
        border-color: var(--color-control-bg-border-default-hover);
      }

  .TextField-InputContainer_view_default.TextField-InputContainer_status_alert {
          --container-border-color: var(--color-bg-alert);
        }

  .TextField-InputContainer_view_default.TextField-InputContainer_status_success {
          --container-border-color: var(--color-bg-success);
        }

  .TextField-InputContainer_view_default.TextField-InputContainer_status_warning {
          --container-border-color: var(--color-bg-warning);
        }

  .TextField-InputContainer_view_default .TextField-Input {
        color: var(--color-control-typo-default);
      }

  .TextField-InputContainer_view_default .TextField-Input::-webkit-input-placeholder {
          color: var(--color-control-typo-placeholder);
        }

  .TextField-InputContainer_view_default .TextField-Input::-moz-placeholder {
          color: var(--color-control-typo-placeholder);
        }

  .TextField-InputContainer_view_default .TextField-Input:-ms-input-placeholder {
          color: var(--color-control-typo-placeholder);
        }

  .TextField-InputContainer_view_default .TextField-Input::-ms-input-placeholder {
          color: var(--color-control-typo-placeholder);
        }

  .TextField-InputContainer_view_default .TextField-Input::placeholder {
          color: var(--color-control-typo-placeholder);
        }

  .TextField-InputContainer_view_default .TextField-Input:-webkit-autofill,
        .TextField-InputContainer_view_default .TextField-Input:-webkit-autofill:hover,
        .TextField-InputContainer_view_default .TextField-Input:-webkit-autofill:focus {
          -webkit-text-fill-color: var(--color-control-typo-default);
        }

  .TextField-InputContainer_view_default .TextField-Side_type_string {
          color: var(--color-control-typo-placeholder);
        }

  .TextField-InputContainer_view_default.TextField-InputContainer_focus {
        z-index: 1;
        border-color: var(--color-control-bg-border-focus);
        outline: none;
      }

  .TextField-InputContainer_view_default.TextField-InputContainer_focus.TextField-InputContainer_form_clearClear {
          -webkit-box-shadow: var(--control-border-width) 0 var(--color-control-bg-border-focus),
            calc(-1 * var(--control-border-width)) 0 var(--color-control-bg-border-focus);
                  box-shadow: var(--control-border-width) 0 var(--color-control-bg-border-focus),
            calc(-1 * var(--control-border-width)) 0 var(--color-control-bg-border-focus);
        }

  .TextField-InputContainer_view_default.TextField-InputContainer_focus.TextField-InputContainer_form_defaultClear,
        .TextField-InputContainer_view_default.TextField-InputContainer_focus.TextField-InputContainer_form_brickClear,
        .TextField-InputContainer_view_default.TextField-InputContainer_focus.TextField-InputContainer_form_roundClear {
          -webkit-box-shadow: var(--control-border-width) 0 var(--color-control-bg-border-focus);
                  box-shadow: var(--control-border-width) 0 var(--color-control-bg-border-focus);
        }

  .TextField-InputContainer_view_default.TextField-InputContainer_focus.TextField-InputContainer_form_clearDefault,
        .TextField-InputContainer_view_default.TextField-InputContainer_focus.TextField-InputContainer_form_clearBrick,
        .TextField-InputContainer_view_default.TextField-InputContainer_focus.TextField-InputContainer_form_clearRound {
          -webkit-box-shadow: calc(-1 * var(--control-border-width)) 0 var(--color-control-bg-border-focus);
                  box-shadow: calc(-1 * var(--control-border-width)) 0 var(--color-control-bg-border-focus);
        }

  .TextField-InputContainer_view_default.TextField-InputContainer_disabled {
        --clear-button-color: var(--color-control-typo-disable);
        background: var(--color-control-bg-disable);
        border-color: var(--color-control-bg-border-disable);
        pointer-events: none;
      }

  .TextField-InputContainer_view_default.TextField-InputContainer_disabled .TextField-Input {
          color: var(--color-control-typo-disable);
        }

  .TextField-InputContainer_view_default.TextField-InputContainer_disabled .TextField-Input::-webkit-input-placeholder {
          color: var(--color-control-typo-disable);
        }

  .TextField-InputContainer_view_default.TextField-InputContainer_disabled .TextField-Input::-moz-placeholder {
          color: var(--color-control-typo-disable);
        }

  .TextField-InputContainer_view_default.TextField-InputContainer_disabled .TextField-Input:-ms-input-placeholder {
          color: var(--color-control-typo-disable);
        }

  .TextField-InputContainer_view_default.TextField-InputContainer_disabled .TextField-Input::-ms-input-placeholder {
          color: var(--color-control-typo-disable);
        }

  .TextField-InputContainer_view_default.TextField-InputContainer_disabled .TextField-Input::placeholder {
          color: var(--color-control-typo-disable);
        }

  .TextField-InputContainer_view_default.TextField-InputContainer_disabled .TextField-Side_type_string,
        .TextField-InputContainer_view_default.TextField-InputContainer_disabled.TextField-InputContainer_withValue .TextField-Side_type_string {
          color: var(--color-control-typo-disable);
        }

  .TextField-InputContainer_view_default.TextField-InputContainer_disabled.TextField-InputContainer .TextField-Icon,
        .TextField-InputContainer_view_default.TextField-InputContainer_disabled.TextField-InputContainer_withValue .TextField-Icon {
          color: var(--color-control-typo-disable);
        }

  .TextField-InputContainer_form_defaultClear {
        border-right-width: 0;
        border-radius: var(--control-radius) 0 0 var(--control-radius);
      }

  .TextField-InputContainer_form_defaultBrick {
        border-radius: var(--control-radius) 0 0 var(--control-radius);
      }

  .TextField-InputContainer_form_round {
        padding-right: calc(var(--input-space) * 1.6);
        padding-left: calc(var(--input-space) * 1.6);
        border-radius: calc(var(--input-height) / 2);
      }

  .TextField-InputContainer_form_roundBrick {
        padding-left: calc(var(--input-space) * 1.6);
        border-radius: calc(var(--input-height) / 2) 0 0 calc(var(--input-height) / 2);
      }

  .TextField-InputContainer_form_roundClear {
        padding-left: calc(var(--input-space) * 1.6);
        border-right-width: 0;
        border-radius: calc(var(--input-height) / 2) 0 0 calc(var(--input-height) / 2);
      }

  .TextField-InputContainer_form_brick {
        border-radius: 0;
      }

  .TextField-InputContainer_form_brickDefault {
        border-radius: 0 var(--control-radius) var(--control-radius) 0;
      }

  .TextField-InputContainer_form_brickRound {
        padding-right: calc(var(--input-space) * 1.6);
        border-radius: 0 calc(var(--input-height) / 2) calc(var(--input-height) / 2) 0;
      }

  .TextField-InputContainer_form_brickClear {
        border-right-width: 0;
        border-radius: 0;
      }

  .TextField-InputContainer_form_clearDefault {
        border-left-width: 0;
        border-radius: 0 var(--control-radius) var(--control-radius) 0;
      }

  .TextField-InputContainer_form_clearBrick {
        border-left-width: 0;
        border-radius: 0;
      }

  .TextField-InputContainer_form_clearRound {
        padding-right: calc(var(--input-space) * 1.6);
        border-left-width: 0;
        border-radius: 0 calc(var(--input-height) / 2) calc(var(--input-height) / 2) 0;
      }

  .TextField-InputContainer_form_clearClear {
        border-width: 0;
        border-top-width: var(--control-border-width);
        border-bottom-width: var(--control-border-width);
        border-radius: 0;
      }

  .TextField-InputContainer_withValue .TextField-Side.TextField-Side_type_string {
        color: var(--color-control-typo-default);
      }

  .TextField-InputContainer_withValue .TextField-Icon {
        color: var(--color-typo-secondary);
      }

  .TextField-InputContainer_type_number {
      padding-right: 0;
    }

  .TextField-InputContainer_type_textarea .TextField-Input {
        resize: none;
        display: block;
        min-width: 0;
        padding-top: calc(
          (var(--input-height) - (var(--control-border-width) * 2) - var(--line-height-text-m)) / 2
        );
        padding-bottom: calc(
          (var(--input-height) - (var(--control-border-width) * 2) - var(--line-height-text-m)) / 2
        );
        line-height: var(--line-height-text-m);
      }

  .TextField-Counter {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: var(--space-xl);
    height: calc(var(--input-height) - (var(--control-border-width) * 2));
  }

  .TextField-CounterButton {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    overflow-y: hidden;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: var(--space-xl);
    margin: 0;
    padding: 0;
    color: var(--counter-button-icon-color);
    background-color: var(--counter-button-background);
    border: none;
    cursor: pointer;
    -webkit-transition: background-color 0.15s;
    transition: background-color 0.15s;
  }

  .TextField-ClearButton {
    height: calc(var(--input-height) - (var(--control-border-width) * 2));
    margin: 0;
    margin-left: var(--input-space);
    padding: 0;
    color: var(--clear-button-color);
    background-color: transparent;
    border: none;
    cursor: pointer;
  }

  .TextField-ClearButton:hover {
      --clear-button-color: var(--color-control-typo-clear-hover);
    }

  .TextField-ClearButtonIcon {
    position: relative;
    top: 1px;
  }

  .TextField-Input {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    width: 100%;
    min-width: 80px;
    height: calc(var(--input-height) - (var(--control-border-width) * 2));
    padding: 0;
    color: currentColor;
    background: transparent;
    border: none;
    outline: none;
    font-family: var(--font-primary);
    font-size: var(--input-font-size);
  }

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

  .TextField-Input[type='number'] {
      -moz-appearance: textfield;
    }

  .TextField-Input:focus {
      outline: none;
    }

  .TextField-Input:-webkit-autofill,
    .TextField-Input:-webkit-autofill:hover,
    .TextField-Input:-webkit-autofill:focus {
      border: none;
      -webkit-box-shadow: 0 0 0 1000px transparent inset;
      -webkit-transition: background-color 5000s ease-in-out 0s;
      transition: background-color 5000s ease-in-out 0s;
    }

  .TextField-Side {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    height: calc(var(--input-height) - (var(--control-border-width) * 2));
  }

  .TextField-Side_position_left {
        margin-right: var(--input-space);
      }

  .TextField-Side_position_right {
        margin-left: var(--input-space);
      }

  .TextField-Side_type_string {
        font-size: var(--input-font-size);
        white-space: nowrap;
      }

  .TextField-Icon {
    color: var(--color-control-typo-placeholder);
  }

.FieldLabel-Star {
    margin-left: var(--space-3xs);
    color: var(--color-bg-alert);
  }

.DatePickerMixRangeField {
  --caption-margin-left: calc(var(--input-space) + var(--control-border-width));
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

  .DatePickerMixRangeField_size_xs {
      --input-height: var(--control-height-xs);
      --input-space: calc(var(--control-space-xs) * 0.5);
    }

  .DatePickerMixRangeField_size_s {
      --input-height: var(--control-height-s);
      --input-space: calc(var(--control-space-s) * 0.5);
    }

  .DatePickerMixRangeField_size_m {
      --input-height: var(--control-height-m);
      --input-space: calc(var(--control-space-m) * 0.5);
    }

  .DatePickerMixRangeField_size_l {
      --input-height: var(--control-height-l);
      --input-space: calc(var(--control-space-l) * 0.5);
    }

  .DatePickerMixRangeField_view_clear {
      --caption-margin-left: 0;
    }

  .DatePickerMixRangeField_width_full {
    width: 100%;
  }

  .DatePickerMixRangeField-Field {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }

  .DatePickerMixRangeField-Fields {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

  .DatePickerMixRangeField_labelPosition_top {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
    }

  .DatePickerMixRangeField_labelPosition_top > *:not(:last-child) {
        margin-bottom: var(--space-xs);
      }

  .DatePickerMixRangeField_labelPosition_left {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row;
    }

  .DatePickerMixRangeField_labelPosition_left .DatePickerFieldTypeDateRange-Label {
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        height: var(--input-height);
      }

  .DatePickerMixRangeField_labelPosition_left > *:not(:last-child) {
        margin-right: var(--space-s);
      }

  .DatePickerMixRangeField-Body {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 100%;
  }

  .DatePickerMixRangeField-Caption {
    margin-top: var(--space-2xs);
    margin-left: var(--caption-margin-left);
  }