.Select {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
}

  .Select-Delimiter {
    width: 1px;
    background-color: var(--color-control-bg-border-default);
  }

  .Select_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);
      --tag-space: calc(var(--space-xs)/2);
    }

  .Select_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);
      --tag-space: calc(var(--space-xs)/2 - var(--control-border-width));
    }

  .Select_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);
      --tag-space: calc(var(--space-s)/2 - var(--control-border-width));
    }

  .Select_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);
      --tag-space: calc(var(--space-m)/2 - var(--control-border-width));
    }

  .Select-Control {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    width: 100%;
    height: var(--input-height);
    padding: 0;
    color: currentColor;
    background: transparent;
    border: none;
    outline: none;
    font-family: var(--font-primary);
    font-weight: normal;
    line-height: calc(var(--input-height) - var(--control-border-width));
    cursor: pointer;
    -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;
  }

  .Select-Control:focus {
      outline: none;
    }

  .Select_multi .Select-Control {
    height: auto;
    min-height: var(--input-height);
  }

  .Select_view_default .Select-Control {
    padding: 0;
    color: var(--color-control-typo-default);
    background: var(--color-control-bg-default);
    border: var(--control-border-width) solid var(--color-control-bg-border-default);
    border-radius: var(--control-radius);
  }

  .Select_view_default .Select-Control:hover {
      border-color: var(--color-control-bg-border-default-hover);
    }

  .Select_view_default.Select_focused .Select-Control {
    z-index: 1;
    border-color: var(--color-control-bg-border-focus);
    outline: none;
  }

  .Select_form_round .Select-Control {
      padding-left: calc(var(--input-space)*1.6);
      border-radius: calc(var(--input-height)/2);
    }

  .Select_form_brick .Select-Control {
      border-radius: 0;
    }

  .Select_form_clear .Select-Control {
      border-width: 0;
      border-bottom-width: var(--control-border-width);
      border-radius: 0;
    }

  .Select_form_defaultClear .Select-Control {
      border-right-width: 0;
      border-radius: var(--control-radius) 0 0 var(--control-radius);
    }

  .Select_form_clearDefault .Select-Control {
      border-left-width: 0;
      border-radius: 0 var(--control-radius) var(--control-radius) 0;
    }

  .Select_form_defaultBrick .Select-Control {
      border-radius: var(--control-radius) 0 0 var(--control-radius);
    }

  .Select_form_brickDefault .Select-Control {
      border-radius: 0 var(--control-radius) var(--control-radius) 0;
    }

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

  .Select_form_brickRound .Select-Control {
      padding-right: calc(var(--input-space)*1.6);
      border-radius: 0 calc(var(--input-height)/2) 99rem calc(var(--input-height)/2);
    }

  .Select_form_brickClear .Select-Control {
      border-right-width: 0;
      border-radius: 0;
    }

  .Select_form_clearBrick .Select-Control {
      border-left-width: 0;
      border-radius: 0;
    }

  .Select_form_clearRound .Select-Control {
      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;
    }

  .Select_form_roundClear .Select-Control {
      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);
    }

  .Select_form_clearClear .Select-Control {
      border-width: 0;
      border-top-width: var(--control-border-width);
      border-bottom-width: var(--control-border-width);
      border-radius: 0;
    }

  .Select_view_default.Select_form_clear.Select_focused .Select-Control,
  .Select_view_default.Select_form_clearClear.Select_focused .Select-Control {
    -webkit-box-shadow: var(--control-border-width) 0 var(--color-control-bg-border-focus),
      calc(var(--control-border-width)*-1) 0 var(--color-control-bg-border-focus);
            box-shadow: var(--control-border-width) 0 var(--color-control-bg-border-focus),
      calc(var(--control-border-width)*-1) 0 var(--color-control-bg-border-focus);
  }

  .Select_view_default.Select_form_defaultClear.Select_focused .Select-Control,
  .Select_view_default.Select_form_brickClear.Select_focused .Select-Control,
  .Select_view_default.Select_form_roundClear.Select_focused .Select-Control {
    -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);
  }

  .Select_view_default.Select_form_clearDefault.Select_focused .Select-Control,
  .Select_view_default.Select_form_clearBrick.Select_focused .Select-Control,
  .Select_view_default.Select_form_clearRound.Select_focused .Select-Control {
    -webkit-box-shadow: calc(var(--control-border-width)*-1) 0 var(--color-control-bg-border-focus);
            box-shadow: calc(var(--control-border-width)*-1) 0 var(--color-control-bg-border-focus);
  }

  .Select_view_default.Select_disabled .Select-Control {
    color: var(--color-control-typo-disable);
    background: var(--color-control-bg-disable);
    border-color: var(--color-control-bg-border-disable);
    pointer-events: none;
  }

  .Select_view_clear .Select-Control,
  .Select_view_clear .Select-Control:hover,
  .Select_view_clear .Select-Control:focus {
    padding: 0;
    color: var(--color-control-typo-default);
  }

  .Select_view_clear .Select-Control.Select_disabled, .Select_view_clear .Select-Control:hover.Select_disabled, .Select_view_clear .Select-Control:focus.Select_disabled {
      pointer-events: none;
    }

  .Select_view_clear .Select-Control.Select_disabled .Select-Control, .Select_view_clear .Select-Control:hover.Select_disabled .Select-Control, .Select_view_clear .Select-Control:focus.Select_disabled .Select-Control {
        color: var(--color-control-typo-disable);
      }

  .Select-Indicators {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
  }

  .Select-IndicatorsDropdown {
    display: block;
    width: var(--input-height);
    margin: 0;
    padding: 0;
    color: var(--color-control-typo-disable);
    background-color: transparent;
    border: none;
    text-align: center;
    cursor: pointer;
  }

  .Select-IndicatorsDropdown:focus {
      outline: none;
    }

  .Select_form_round .Select-IndicatorsDropdown {
    border-radius: 0 calc(var(--input-height)/2) calc(var(--input-height)/2) 0;
  }

  .Select-ControlInner {
    position: relative;
    width: 100%;
  }

  .Select-ControlValueContainer {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: 0;
    padding: 0;
    color: inherit;
    background-color: transparent;
    border: none;
    font-size: var(--input-font-size);
    line-height: calc(var(--input-height) - 2px);
    text-align: left;
  }

  .Select-ControlValueContainer:focus {
      outline: none;
    }

  .Select_view_default .Select-ControlValueContainer {
    padding: 0 0 0 var(--input-space);
  }

  .Select_multi .Select-ControlValueContainer {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1;
  }

  .Select-Control[aria-expanded='true'] .Select-IndicatorsDropdown {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }

  .Select-ControlValue,
  .Select-Placeholder {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .Select_multi .Select-ControlValue {
    overflow: visible;
    padding-top: var(--tag-space);
    padding-bottom: calc(var(--tag-space) - var(--space-xs)/2);
    white-space: normal;
  }

  .Select_multi.Select_size_l .Select-ControlValue {
    padding-top: calc(var(--tag-space) - var(--control-border-width));
  }

  .Select-Placeholder {
    padding-right: var(--input-space);
    color: var(--color-control-typo-placeholder);
    font-size: var(--input-font-size);
    text-align: left;
    pointer-events: none;
  }

  .Select-Placeholder_isHidden {
      visibility: hidden;
      opacity: 0;
    }

  .Select-Control_hasInput .Select-Placeholder {
    position: absolute;
    top: 0;
    width: calc(100% - var(--input-space));
    background-color: transparent;
    line-height: calc(var(--input-height) - 2px);
  }

  .Select-DropdownIndicatorIcon {
    position: relative;
    top: 1px;
  }

  .Select-ClearIndicator {
    margin: 0;
    padding: 0 var(--space-xs);
    color: var(--color-control-typo-clear);
    background-color: transparent;
    border: none;
    cursor: pointer;
  }

  .Select-ClearIndicatorIcon {
    position: relative;
    top: 1px;
  }

  .Select-Input {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    color: inherit;
    background-color: transparent;
    border: none;
    outline: none;
    font-family: inherit;
    font-size: inherit;
    line-height: calc(var(--input-height) - 2px);
  }

  .Select-Input_hide {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      width: 100%;
      opacity: 0;
    }

  .Select_multi .Select-Input {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    min-width: 10px;
    margin-top: calc(var(--control-border-width) + var(--tag-space) - var(--space-xs)/2);
    line-height: 1;
  }

  .Select_multi.Select_size_s .Select-Input {
    margin-top: calc(var(--control-border-width)*3 + var(--tag-space) - var(--space-xs)/2);
  }

  .Select-FakeField {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    opacity: 0;
  }

  .Select-HelperInputFakeElement {
    position: absolute;
    top: 0;
    display: inline-block;
    visibility: hidden;
    overflow: hidden;
    height: 0;
    font-size: var(--input-font-size);
    white-space: nowrap;
  }

.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-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: normal;
  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);
  }
}

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

  .Checkbox-Input {
    position: relative;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    width: var(--box-size);
    height: var(--box-size);
    margin: 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;
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
      width: calc(var(--box-size)*0.6);
      height: calc(var(--box-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-Label {
    margin-left: var(--offset);
    color: var(--color-control-typo-default);
    font-size: var(--checkbox-font-size);
  }

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

  .Checkbox_size_m .Checkbox-Input::before {
          top: 0.55em;
          left: 0.15em;
        }

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

  .Checkbox_size_l .Checkbox-Input::before {
          top: 0.7em;
          left: 0.2em;
        }

  .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-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);
    }

  .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);
        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);
      }

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

  .SnackBar-Item_animate_appear,
      .SnackBar-Item_animate_enter,
      .SnackBar-Item_animate_exit,
      .SnackBar-Item_animate_appearActive,
      .SnackBar-Item_animate_enterActive,
      .SnackBar-Item_animate_exitActive {
        -webkit-transition: opacity 0.2s, -webkit-transform 0.2s;
        transition: opacity 0.2s, -webkit-transform 0.2s;
        transition: transform 0.2s, opacity 0.2s;
        transition: transform 0.2s, opacity 0.2s, -webkit-transform 0.2s;
      }

  .SnackBar-Item_animate_appear,
      .SnackBar-Item_animate_enter {
        opacity: 0;
        -webkit-transform: scale(0.5);
                transform: scale(0.5);
      }

  .SnackBar-Item_animate_appearActive,
      .SnackBar-Item_animate_enterActive {
        opacity: 1;
        -webkit-transform: scale(1);
                transform: scale(1);
      }

  .SnackBar-Item_animate_exit {
        opacity: 1;
        -webkit-transform: scale(1);
                transform: scale(1);
      }

  .SnackBar-Item_animate_exitActive {
        opacity: 0;
        -webkit-transform: scale(0.5);
                transform: scale(0.5);
      }

/* Базовые цвета, от которых выстраивается вся палитра */ /* Базовый цвет содержимого, от которого выстраиваются цвета текста, иконок, ... */ /* Базовый цвет поверхностей */ /* Проектный цвет, от которого выстраивают акцентные состояния */ /* Тонирующий цвет, от которого выстраиватся бордеры, оверлей под модальными окнами, ... */ /* Цвет ссылок и контролов, от которого выстраиваются все их состояния */ /* Цвет системнный */ /* Цвет успеха */ /* Цвет ошибки */ /* Цвет предупреждения */ /* Цвет осторожности */ /* Цвет нейтральный */

/* 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(75, 89, 99); /* Цвет фона системнный */
  --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(94, 121, 141); /* Цвет фона системнный */
  --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-nums-shadow: 0, 0, 0; /* Значения RGB для указания теней в конструкции rgba(R,G,B, alpha) */

  /* //////////////////////////////
  // Цвета скроллбара ////////////// */
  --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); /* Цвет основного текста неактивного контрола */
}
/* stylelint-enable */

.SnackBar-Item {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: var(--space-s);
    padding: var(--space-m) var(--space-2xl) var(--space-m) var(--space-m);
    color: var(--color-typo-primary);
    border-radius: var(--space-xs);
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.07), 0 2px 2px rgba(0, 0, 0, 0.07),
      0 4px 4px rgba(0, 0, 0, 0.07), 0 6px 8px rgba(0, 0, 0, 0.07), 0 8px 16px rgba(0, 0, 0, 0.07);
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.07), 0 2px 2px rgba(0, 0, 0, 0.07),
      0 4px 4px rgba(0, 0, 0, 0.07), 0 6px 8px rgba(0, 0, 0, 0.07), 0 8px 16px rgba(0, 0, 0, 0.07);
  }

    .SnackBar-Item_status_system {
        background-color: var(--color-bg-system);
      }

    .SnackBar-Item_status_normal {
        background-color: var(--color-bg-normal);
      }

    .SnackBar-Item_status_success {
        background-color: var(--color-bg-success);
      }

    .SnackBar-Item_status_warning {
        background-color: var(--color-bg-warning);
      }

    .SnackBar-Item_status_alert {
        background-color: var(--color-bg-alert);
      }
  .SnackBar-Icon {
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
    margin-right: var(--space-m);
  }
  .SnackBar-Content {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
  .SnackBar-CloseButton {
    position: absolute;
    top: var(--space-2xs);
    right: var(--space-2xs);
  }

.Text {
  line-height: var(--line-height-text-m);
}

  .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_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);
      text-decoration: none;
      cursor: pointer;
      -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);
      text-decoration: none;
      -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: 100;
    }

  .Text_weight_light {
      font-weight: 300;
    }

  .Text_weight_regular {
      font-weight: normal;
    }

  .Text_weight_semibold {
      font-weight: 600;
    }

  .Text_weight_bold {
      font-weight: bold;
    }

  .Text_weight_black {
      font-weight: 900;
    }

  .Text_width_default {
      max-width: 75ch;
    }

.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, 100, 158, 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(206, 216, 222); /* Цвет фона системнный */
  --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(132, 167, 189); /* Цвет фона системнный */
  --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(235, 109, 0); /* Цвет текста предупреждения */

  --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-nums-shadow: 0, 32, 51; /* Значения RGB для указания теней в конструкции rgba(R,G,B, alpha) */

  /* //////////////////////////////
  // Цвета скроллбара ////////////// */
  --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); /* Цвет основного текста неактивного контрола */
}
/* 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: '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: 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;
}

.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;
}

/* Базовые цвета, от которых выстраивается вся палитра */ /* Базовый цвет содержимого, от которого выстраиваются цвета текста, иконок, ... */ /* Базовый цвет поверхностей */ /* Проектный цвет, от которого выстраивают акцентные состояния */ /* Тонирующий цвет, от которого выстраиватся бордеры, оверлей под модальными окнами, ... */ /* Цвет ссылок и контролов, от которого выстраиваются все их состояния */ /* Цвет системнный */ /* Цвет успеха */ /* Цвет ошибки */ /* Цвет предупреждения */ /* Цвет осторожности */ /* Цвет нейтральный */

/* 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(255, 255, 255, 0.2); /* Цвет границ */
  --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(75, 98, 114); /* Цвет фона системнный */
  --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(96, 130, 154); /* Цвет фона системнный */
  --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-nums-shadow: 0, 3, 6; /* Значения RGB для указания теней в конструкции rgba(R,G,B, alpha) */

  /* //////////////////////////////
  // Цвета скроллбара ////////////// */
  --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); /* Цвет основного текста неактивного контрола */
}
/* stylelint-enable */

.SnackBar-ActionButtonsWrapper {
    padding-top: var(--space-2xs);
  }
  .SnackBar-ActionButton {
    margin-top: var(--space-xs);
    margin-right: var(--space-xs);
    -webkit-filter: drop-shadow(0 0 0 var(--color-bg-soft));
            filter: drop-shadow(0 0 0 var(--color-bg-soft));
  }

.SnackBar-Timer {
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
    margin-right: var(--space-m);
  }

.Timer {
  position: relative;
  display: inline-block;
  overflow: hidden;
  width: var(--timer-size);
  height: var(--timer-size);
  background-color: var(--color-control-bg-ghost);
  border-radius: 50%;
}

  .Timer_size_s {
      --timer-size: 16px;
    }

  .Timer_size_m {
      --timer-size: 24px;
    }

  .Timer-Counter {
    width: 100%;
    color: var(--color-control-typo-ghost);
    font-size: var(--size-text-xs);
    font-weight: bold;
    line-height: var(--timer-size);
    text-align: center;
  }

  .Timer-Progress.ProgressSpin {
    --animation-duration: 1s;
    position: absolute;
    top: 2px;
    left: 2px;
  }

.ProgressSpin {
  --animation-duration: 0.3s;
  color: var(--color-control-typo-ghost);
  stroke: currentColor;
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
  fill: none;
}

  .ProgressSpin_spin {
    -webkit-animation: ProgressSpin-Animate 1.2s linear infinite;
            animation: ProgressSpin-Animate 1.2s linear infinite;
  }

  .ProgressSpin-Circle_animation {
      -webkit-transition: var(--animation-duration) linear;
      transition: var(--animation-duration) linear;
    }

@-webkit-keyframes ProgressSpin-Animate {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes ProgressSpin-Animate {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

.TextField {
  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: normal;
  -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_width_full {
    width: 100%;
  }

  .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: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);
  }

  .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_view_clear,
  .TextField_view_clear:hover,
  .TextField_view_clear:focus {
    padding: 0;
    color: var(--color-control-typo-default);
  }

  .TextField_view_clear.TextField_disabled, .TextField_view_clear:hover.TextField_disabled, .TextField_view_clear:focus.TextField_disabled {
      pointer-events: none;
    }

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

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

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

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

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

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

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

  .TextField_view_clear.TextField_disabled .TextField-Side_type_string,
      .TextField_view_clear.TextField_disabled.TextField_withValue .TextField-Side_type_string,
      .TextField_view_clear:hover.TextField_disabled .TextField-Side_type_string,
      .TextField_view_clear:hover.TextField_disabled.TextField_withValue .TextField-Side_type_string,
      .TextField_view_clear:focus.TextField_disabled .TextField-Side_type_string,
      .TextField_view_clear:focus.TextField_disabled.TextField_withValue .TextField-Side_type_string {
        color: var(--color-control-typo-disable);
      }

  .TextField_view_clear.TextField_disabled.TextField .TextField-Icon,
      .TextField_view_clear.TextField_disabled.TextField_withValue .TextField-Icon,
      .TextField_view_clear:hover.TextField_disabled.TextField .TextField-Icon,
      .TextField_view_clear:hover.TextField_disabled.TextField_withValue .TextField-Icon,
      .TextField_view_clear:focus.TextField_disabled.TextField .TextField-Icon,
      .TextField_view_clear:focus.TextField_disabled.TextField_withValue .TextField-Icon {
        color: var(--color-control-typo-disable);
      }

  .TextField_view_default {
    padding: 0 var(--input-space);
    color: var(--color-control-typo-default);
    background: var(--color-control-bg-default);
    border: var(--control-border-width) solid var(--color-control-bg-border-default);
    border-radius: var(--control-radius);
  }

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

  .TextField_view_default.TextField_state_alert {
        border-color: var(--color-bg-alert);
      }

  .TextField_view_default.TextField_state_success {
        border-color: var(--color-bg-success);
      }

  .TextField_view_default.TextField_state_warning {
        border-color: var(--color-bg-warning);
      }

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

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

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

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

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

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

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

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

  .TextField_view_default.TextField_focus {
      z-index: 1;
      border-color: var(--color-control-bg-border-focus);
      outline: none;
    }

  .TextField_view_default.TextField_focus.TextField_form_clearClear {
        -webkit-box-shadow: var(--control-border-width) 0 var(--color-control-bg-border-focus),
          calc(var(--control-border-width)*-1) 0 var(--color-control-bg-border-focus);
                box-shadow: var(--control-border-width) 0 var(--color-control-bg-border-focus),
          calc(var(--control-border-width)*-1) 0 var(--color-control-bg-border-focus);
      }

  .TextField_view_default.TextField_focus.TextField_form_defaultClear,
      .TextField_view_default.TextField_focus.TextField_form_brickClear,
      .TextField_view_default.TextField_focus.TextField_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_view_default.TextField_focus.TextField_form_clearDefault,
      .TextField_view_default.TextField_focus.TextField_form_clearBrick,
      .TextField_view_default.TextField_focus.TextField_form_clearRound {
        -webkit-box-shadow: calc(var(--control-border-width)*-1) 0 var(--color-control-bg-border-focus);
                box-shadow: calc(var(--control-border-width)*-1) 0 var(--color-control-bg-border-focus);
      }

  .TextField_view_default.TextField_disabled {
      background: var(--color-control-bg-disable);
      border-color: var(--color-control-bg-border-disable);
      pointer-events: none;
    }

  .TextField_view_default.TextField_disabled .TextField-Input {
        color: var(--color-control-typo-disable);
      }

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

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

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

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

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

  .TextField_view_default.TextField_disabled .TextField-Side_type_string,
      .TextField_view_default.TextField_disabled.TextField_withValue .TextField-Side_type_string {
        color: var(--color-control-typo-disable);
      }

  .TextField_view_default.TextField_disabled.TextField .TextField-Icon,
      .TextField_view_default.TextField_disabled.TextField_withValue .TextField-Icon {
        color: var(--color-control-typo-disable);
      }

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

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

  .TextField_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_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_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_form_brick {
      border-radius: 0;
    }

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

  .TextField_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_form_brickClear {
      border-right-width: 0;
      border-radius: 0;
    }

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

  .TextField_form_clearBrick {
      border-left-width: 0;
      border-radius: 0;
    }

  .TextField_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_form_clearClear {
      border-width: 0;
      border-top-width: var(--control-border-width);
      border-bottom-width: var(--control-border-width);
      border-radius: 0;
    }

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

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

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

.SelectDropdown {
  --transition-spase: var(--space-2xs);
  z-index: 9999;
  overflow: hidden;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
  min-width: 220px;
  margin: -1px 0 -1px;
  background: var(--color-bg-default);
  border: var(--control-border-width) solid var(--color-control-bg-border-default);
  outline: none;
  opacity: 0;
  -webkit-box-shadow: 0 2px 2px rgba(var(--color-nums-shadow), 0.04),
    0 4px 16px rgba(var(--color-nums-shadow), 0.18);
          box-shadow: 0 2px 2px rgba(var(--color-nums-shadow), 0.04),
    0 4px 16px rgba(var(--color-nums-shadow), 0.18);
  font-size: var(--font-size);
  -webkit-transform: translateY(var(--transition-spase));
          transform: translateY(var(--transition-spase));
}

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

  .SelectDropdown_size_s {
      --input-height: var(--control-height-s);
      --font-size: var(--control-text-size-s);
      --input-space: calc(var(--control-space-s)*0.5);
      --list-spase: var(--space-2xs);
    }

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

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

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

  .SelectDropdown_form_brick {
      border-radius: 0;
    }

  .SelectDropdown_form_round {
      border-radius: calc(var(--input-height)*0.5);
    }

  .SelectDropdown_animate_appear,
    .SelectDropdown_animate_appearActive,
    .SelectDropdown_animate_appearDone,
    .SelectDropdown_animate_enter,
    .SelectDropdown_animate_enterActive,
    .SelectDropdown_animate_enterDone,
    .SelectDropdown_animate_exit,
    .SelectDropdown_animate_exitActive,
    .SelectDropdown_animate_exitDone {
      -webkit-transition: 0.2s ease;
      transition: 0.2s ease;
      -webkit-transition-property: opacity, -webkit-transform;
      transition-property: opacity, -webkit-transform;
      transition-property: opacity, transform;
      transition-property: opacity, transform, -webkit-transform;
    }

  .SelectDropdown_animate_appear,
    .SelectDropdown_animate_enter {
      opacity: 0;
      -webkit-transform: translateY(var(--transition-spase));
              transform: translateY(var(--transition-spase));
    }

  .SelectDropdown_animate_enterActive,
    .SelectDropdown_animate_appearActive,
    .SelectDropdown_animate_appearDone,
    .SelectDropdown_animate_enterDone {
      opacity: 1;
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }

  .SelectDropdown_animate_exit {
      opacity: 1;
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }

  .SelectDropdown_animate_exitActive,
    .SelectDropdown_animate_exitDone {
      opacity: 0;
      -webkit-transform: translateY(var(--transition-spase));
              transform: translateY(var(--transition-spase));
    }

  .SelectDropdown-LabelForNotFound {
    padding: 0 var(--space-xs);
  }

  .SelectDropdown-List {
    overflow-y: auto;
    width: 100%;
    max-height: 200px;
    padding: var(--list-spase) 0;
    line-height: 120%;
  }

.SelectCreateButton {
  position: relative;
  display: block;
  padding: var(--vertical-space) var(--horizontal-space);
  color: var(--color-control-typo-default);
  background-color: var(--color-control-bg-clear);
  border: none;
  font-size: var(--font-size);
  cursor: pointer;
}

  .SelectCreateButton_size_xs {
      --horizontal-space: calc(var(--control-space-xs)*0.5);
      --vertical-space: calc(var(--control-space-s)*0.25);
      --font-size: var(--control-text-size-xs);
    }

  .SelectCreateButton_size_s {
      --horizontal-space: calc(var(--control-space-s)*0.5);
      --vertical-space: calc(var(--control-space-s)*0.25);
      --font-size: var(--control-text-size-s);
    }

  .SelectCreateButton_size_m {
      --horizontal-space: calc(var(--control-space-m)*0.5);
      --vertical-space: calc(var(--control-space-s)*0.5);
      --font-size: var(--control-text-size-m);
    }

  .SelectCreateButton_size_l {
      --horizontal-space: calc(var(--control-space-l)*0.5);
      --vertical-space: calc(var(--control-space-s)*0.5);
      --font-size: var(--control-text-size-l);
    }

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

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

  .SelectCreateButton_indent_increased {
      padding-left: calc(var(--horizontal-space)*2.6);
    }

.SelectGroupLabel {
  padding: var(--vertical-space) var(--horizontal-space);
  color: var(--color-typo-secondary);
  border-bottom: 1px solid var(--color-bg-border);
  font-size: var(--font-size);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

  .SelectGroupLabel_size_xs {
      --horizontal-space: calc(var(--control-space-xs)*0.5);
      --vertical-space: calc(var(--control-space-s)*0.25);
      --font-size: calc(var(--control-text-size-xs) - 2px);
    }

  .SelectGroupLabel_size_s {
      --horizontal-space: calc(var(--control-space-s)*0.5);
      --vertical-space: calc(var(--control-space-s)*0.25);
      --font-size: calc(var(--control-text-size-s) - 4px);
    }

  .SelectGroupLabel_size_m {
      --horizontal-space: calc(var(--control-space-m)*0.5);
      --vertical-space: calc(var(--control-space-s)*0.5);
      --font-size: calc(var(--control-text-size-m) - 4px);
    }

  .SelectGroupLabel_size_l {
      --horizontal-space: calc(var(--control-space-l)*0.5);
      --vertical-space: calc(var(--control-space-s)*0.5);
      --font-size: calc(var(--control-text-size-l) - 4px);
    }

  .SelectGroupLabel_indent_increased {
      padding-left: calc(var(--horizontal-space)*2.6);
    }

.SelectItem {
  position: relative;
  padding: var(--vertical-space) var(--horizontal-space);
  color: var(--color-control-typo-default);
  background-color: var(--color-control-bg-clear);
  font-size: var(--font-size);
  cursor: pointer;
}

  .SelectItem_size_xs {
      --horizontal-space: calc(var(--control-space-xs)*0.5);
      --vertical-space: calc(var(--control-space-s)*0.25);
      --font-size: var(--control-text-size-xs);
    }

  .SelectItem_size_s {
      --horizontal-space: calc(var(--control-space-s)*0.5);
      --vertical-space: calc(var(--control-space-s)*0.25);
      --font-size: var(--control-text-size-s);
    }

  .SelectItem_size_m {
      --horizontal-space: calc(var(--control-space-m)*0.5);
      --vertical-space: calc(var(--control-space-s)*0.5);
      --font-size: var(--control-text-size-m);
    }

  .SelectItem_size_l {
      --horizontal-space: calc(var(--control-space-l)*0.5);
      --vertical-space: calc(var(--control-space-s)*0.5);
      --font-size: var(--control-text-size-l);
    }

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

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

  .SelectItem_multi {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }

  .SelectItem_indent_increased {
      padding-left: calc(var(--horizontal-space)*2.6);
    }

  .SelectItem:not(.SelectItem_multi)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 2px;
    background-color: transparent;
    -webkit-transition: background-color 0.2s ease-in;
    transition: background-color 0.2s ease-in;
  }

  .SelectItem:not(.SelectItem_multi).SelectItem_active::before {
    background-color: var(--color-control-bg-primary);
  }

  .SelectItem-Checkbox {
    margin-right: var(--space-xs);
  }

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

.Tooltip {
  --tooltip-bg-color: var(--color-bg-default);
  --tooltip-bg-opacity: 0.9;

  /* Задаются через js */
  --tooltip-arrow-size: 0;
  --tooltip-arrow-offset: 0;
  position: relative;
}

  .Tooltip_status_alert {
      --tooltip-bg-color: var(--color-bg-alert);
    }

  .Tooltip_status_warning {
      --tooltip-bg-color: var(--color-bg-warning);
    }

  .Tooltip_status_success {
      --tooltip-bg-color: var(--color-bg-success);
    }

  .Tooltip_status_normal {
      --tooltip-bg-color: var(--color-bg-normal);
    }

  .Tooltip[class*='status'] {
    --tooltip-bg-opacity: 1;
  }

  .Tooltip[class*='status'] .Tooltip-Content {
      text-shadow: 0 0 2px rgba(var(--color-nums-shadow), 0.16);
    }

  /* Фон отдельным элементом, чтобы можно было добавить ему opacity */

  .Tooltip-Background {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: var(--tooltip-bg-color);
    border-radius: var(--control-radius);
    opacity: var(--tooltip-bg-opacity);
    -webkit-box-shadow: 0 1px 1px rgba(var(--color-nums-shadow), 0.07),
      0 2px 2px rgba(var(--color-nums-shadow), 0.07), 0 4px 4px rgba(var(--color-nums-shadow), 0.07),
      0 6px 8px rgba(var(--color-nums-shadow), 0.07),
      0 8px 16px rgba(var(--color-nums-shadow), 0.07);
            box-shadow: 0 1px 1px rgba(var(--color-nums-shadow), 0.07),
      0 2px 2px rgba(var(--color-nums-shadow), 0.07), 0 4px 4px rgba(var(--color-nums-shadow), 0.07),
      0 6px 8px rgba(var(--color-nums-shadow), 0.07),
      0 8px 16px rgba(var(--color-nums-shadow), 0.07);
  }

  .Tooltip-Content {
    position: relative; /* чтобы отображаться над фоном */
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    width: 100%;
    padding: var(--space-xs);
  }

  .Tooltip-Content_size_s {
      max-width: 150px;
    }

  .Tooltip-Content_size_m {
      max-width: 260px;
    }

  .Tooltip-Content_size_l {
      max-width: 400px;
    }

  .Tooltip-Arrow {
    position: absolute;
    border: var(--tooltip-arrow-size) solid transparent;
    opacity: var(--tooltip-bg-opacity);
  }

  .Tooltip-Arrow_direction_upLeft,
    .Tooltip-Arrow_direction_upCenter,
    .Tooltip-Arrow_direction_upRight,
    .Tooltip-Arrow_direction_upStartLeft,
    .Tooltip-Arrow_direction_upStartRight {
      bottom: 0;
      border-top-color: var(--tooltip-bg-color);
      -webkit-transform: translateY(100%);
              transform: translateY(100%);
    }

  .Tooltip-Arrow_direction_upLeft,
    .Tooltip-Arrow_direction_downLeft,
    .Tooltip-Arrow_direction_downStartRight,
    .Tooltip-Arrow_direction_upStartRight {
      right: var(--tooltip-arrow-offset);
    }

  .Tooltip-Arrow_direction_upCenter,
    .Tooltip-Arrow_direction_downCenter {
      left: calc(50% - var(--tooltip-arrow-size));
    }

  .Tooltip-Arrow_direction_upRight,
    .Tooltip-Arrow_direction_downRight,
    .Tooltip-Arrow_direction_downStartLeft,
    .Tooltip-Arrow_direction_upStartLeft {
      left: var(--tooltip-arrow-offset);
    }

  .Tooltip-Arrow_direction_downLeft,
    .Tooltip-Arrow_direction_downCenter,
    .Tooltip-Arrow_direction_downRight,
    .Tooltip-Arrow_direction_downStartLeft,
    .Tooltip-Arrow_direction_downStartRight {
      top: 0;
      border-bottom-color: var(--tooltip-bg-color);
      -webkit-transform: translateY(-100%);
              transform: translateY(-100%);
    }

  .Tooltip-Arrow_direction_rightUp,
    .Tooltip-Arrow_direction_rightCenter,
    .Tooltip-Arrow_direction_rightDown,
    .Tooltip-Arrow_direction_rightStartUp,
    .Tooltip-Arrow_direction_rightStartDown {
      left: 0;
      border-right-color: var(--tooltip-bg-color);
      -webkit-transform: translateX(-100%);
              transform: translateX(-100%);
    }

  .Tooltip-Arrow_direction_rightUp,
    .Tooltip-Arrow_direction_leftUp,
    .Tooltip-Arrow_direction_leftStartDown,
    .Tooltip-Arrow_direction_rightStartDown {
      bottom: var(--tooltip-arrow-offset);
    }

  .Tooltip-Arrow_direction_rightCenter,
    .Tooltip-Arrow_direction_leftCenter {
      top: calc(50% - var(--tooltip-arrow-size));
    }

  .Tooltip-Arrow_direction_rightDown,
    .Tooltip-Arrow_direction_leftDown,
    .Tooltip-Arrow_direction_leftStartUp,
    .Tooltip-Arrow_direction_rightStartUp {
      top: var(--tooltip-arrow-offset);
    }

  .Tooltip-Arrow_direction_leftUp,
    .Tooltip-Arrow_direction_leftCenter,
    .Tooltip-Arrow_direction_leftDown,
    .Tooltip-Arrow_direction_leftStartUp,
    .Tooltip-Arrow_direction_leftStartDown {
      right: 0;
      border-left-color: var(--tooltip-bg-color);
      -webkit-transform: translateX(100%);
              transform: translateX(100%);
    }

.Badge {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  height: var(--badge-size);
  font-size: var(--badge-text-size);
  font-weight: 600;
  line-height: var(--badge-size);
  white-space: nowrap;
  text-decoration: none;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}

  .Badge_size_s {
      --badge-size: var(--control-box-size-l);
      --badge-text-size: var(--size-text-2xs);
      padding: 0 var(--space-2xs);
    }

  .Badge_size_m {
      --badge-size: var(--control-height-xs);
      --badge-text-size: var(--size-text-xs);
      padding: 0 var(--space-xs);
    }

  .Badge_size_l {
      --badge-size: var(--control-height-s);
      --badge-text-size: var(--size-text-s);
      padding: 0 var(--space-xs);
    }

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

  .Badge_form_round {
      border-radius: 99em;
    }

  .Badge_form_round.Badge_size_s {
        padding: 0 var(--space-xs);
      }

  .Badge_form_round.Badge_size_m {
        padding: 0 var(--space-s);
      }

  .Badge_form_round.Badge_size_l {
        padding: 0 var(--space-m);
      }

  .Badge_status_success {
      --badge-bg-color: var(--color-bg-success);
      --badge-text-color: var(--color-typo-success);
      --badge-border-color: var(--color-bg-success);
    }

  .Badge_status_error {
      --badge-bg-color: var(--color-bg-alert);
      --badge-text-color: var(--color-typo-alert);
      --badge-border-color: var(--color-bg-alert);
    }

  .Badge_status_warning {
      --badge-bg-color: var(--color-bg-warning);
      --badge-text-color: var(--color-typo-warning);
      --badge-border-color: var(--color-bg-warning);
    }

  .Badge_status_normal {
      --badge-bg-color: var(--color-bg-normal);
      --badge-text-color: var(--color-typo-normal);
      --badge-border-color: var(--color-bg-normal);
    }

  .Badge_status_system {
      --badge-bg-color: var(--color-bg-system);
      --badge-border-color: var(--color-bg-system);
    }

  .Badge_view_filled {
      color: var(--color-typo-primary);
      background: var(--badge-bg-color);
    }

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

  .Badge_view_stroked {
      color: var(--badge-text-color);
      -webkit-box-shadow: inset 0 0 0 1px var(--badge-border-color);
              box-shadow: inset 0 0 0 1px var(--badge-border-color);
    }

  .Badge_view_stroked.Badge_status_system {
          --badge-text-color: var(--color-typo-system);
        }

  .Badge_minified {
    --badge-text-size: 0;
    background: transparent;
    border-radius: 50%;
  }

  .Badge_minified.Badge_size_s {
      width: 16px;
      height: 16px;
      padding: 0;
      border: 3px solid transparent;
      -webkit-box-shadow: inset 0 0 0 10px var(--badge-bg-color);
              box-shadow: inset 0 0 0 10px var(--badge-bg-color);
    }

  .Badge_minified.Badge_size_m {
      width: 24px;
      height: 24px;
      padding: 0;
      border: 4px solid transparent;
      -webkit-box-shadow: inset 0 0 0 12px var(--badge-bg-color);
              box-shadow: inset 0 0 0 12px var(--badge-bg-color);
    }

  .Badge_minified.Badge_size_l {
      width: 32px;
      height: 32px;
      padding: 0;
      border: 5px solid transparent;
      -webkit-box-shadow: inset 0 0 0 14px var(--badge-bg-color);
              box-shadow: inset 0 0 0 14px var(--badge-bg-color);
    }

  .Badge-Icon {
    margin-right: var(--space-2xs);
    font-size: 0;
    line-height: 1em;
    -ms-flex-negative: 0;
        flex-shrink: 0;
  }

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

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

  .Radio-Input::before {
      content: '';
      position: absolute;
      top: calc(50% - var(--box-size)/2);
      left: calc(50% - var(--box-size)/2);
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
      width: var(--box-size);
      height: var(--box-size);
      border-radius: 50%;
      opacity: 0;
      -webkit-transition: background-color 0.15s, opacity 0.15s, -webkit-transform 0.15s;
      transition: background-color 0.15s, opacity 0.15s, -webkit-transform 0.15s;
      transition: background-color 0.15s, opacity 0.15s, transform 0.15s;
      transition: background-color 0.15s, opacity 0.15s, transform 0.15s, -webkit-transform 0.15s;
      -webkit-transform: scale(0, 0);
              transform: scale(0, 0);
    }

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

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

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

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

  .Radio_view_primary .Radio-Input {
        border-color: var(--color-control-bg-border-default);
      }

  .Radio_view_primary .Radio-Input::before {
          background-color: var(--color-control-bg-primary);
        }

  .Radio_view_primary .Radio-Input:checked {
        border-color: var(--color-control-bg-primary);
      }

  .Radio_view_primary .Radio-Input:checked::before {
          background-color: var(--color-control-bg-primary);
        }

  .Radio_view_primary:hover .Radio-Input:checked {
        border-color: var(--color-control-bg-primary-hover);
      }

  .Radio_view_primary:hover .Radio-Input:checked::before {
          background-color: var(--color-control-bg-primary-hover);
        }

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

  .Radio_view_ghost .Radio-Input {
        border-color: var(--color-control-bg-border-default);
      }

  .Radio_view_ghost .Radio-Input::before {
          background-color: var(--color-control-bg-primary);
        }

  .Radio_view_ghost .Radio-Input:checked {
        background-color: var(--color-control-bg-ghost);
        border-color: var(--color-control-bg-border-default);
      }

  .Radio_view_ghost .Radio-Input:checked::before {
          background-color: var(--color-control-typo-ghost);
        }

  .Radio_view_ghost:hover .Radio-Input:checked {
        background-color: var(--color-control-bg-ghost-hover);
        border-color: var(--color-control-bg-border-default);
      }

  .Radio_view_ghost:hover .Radio-Input:checked::before {
          background-color: var(--color-control-typo-ghost-hover);
        }

  .Radio-Input:checked::before {
      opacity: 1;
      -webkit-transform: scale(0.4, 0.4);
              transform: scale(0.4, 0.4);
    }

  .Radio_disabled {
    pointer-events: none;
  }

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

  .Radio_disabled .Radio-Input:disabled::before {
        background-color: var(--color-control-typo-disable);
      }

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

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

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

  .Radio_align_top .Radio-Input {
        margin-top: var(--space-3xs);
      }

.Header {
  --header-height: 60px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
  height: var(--header-height);
  padding: 0 var(--space-xl);
  background-color: var(--color-bg-default);
  border-bottom: 1px solid var(--color-bg-border);
}

  .Header-LeftSide,
  .Header-RightSide {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }

  .Header-RightSide {
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }

.HeaderLogo {
  color: var(--color-typo-primary);
  text-decoration: none;
}

.HeaderSearchBar {
  position: relative;
  width: 25vw;
  max-width: 260px;
}

  .HeaderSearchBar-Label {
    position: absolute;
    visibility: hidden;
    overflow: hidden;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
  }

  .HeaderSearchBar-Button {
    position: absolute;
    top: var(--space-2xs);
    right: var(--space-2xs);
  }

.HeaderMenu-List {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0;
    padding: 0;
    list-style-type: none;
  }
  .HeaderMenu-Item {
    margin-right: var(--space-m);
  }
  .HeaderMenu-Item:last-child {
      margin-right: 0;
    }
  .HeaderMenu-Link {
    position: relative;
    display: inline-block;
    color: var(--color-typo-secondary);
    line-height: var(--header-height);
    text-decoration: none;
    cursor: pointer;
    -webkit-transition: color 0.2s;
    transition: color 0.2s;
  }
  .HeaderMenu-Link:hover {
      color: var(--color-typo-primary);
    }
  .HeaderMenu-Link_active {
      color: var(--color-typo-primary);
      pointer-events: none;
    }
  .HeaderMenu-Link_active::before {
        content: '';
        position: absolute;
        left: 50%;
        bottom: 0;
        width: 100%;
        max-width: 40px;
        height: 4px;
        background-color: var(--color-typo-link);
        border-radius: 4px 4px 0 0;
        -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
      }

.HeaderModule {
  margin-left: var(--module-indent);
}

  .HeaderModule_indent_s {
      --module-indent: var(--space-xs);
    }

  .HeaderModule_indent_m {
      --module-indent: var(--space-m);
    }

  .HeaderModule_indent_l {
      --module-indent: var(--space-2xl);
    }

.User {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border: 0;
  border-radius: 99em;
  text-align: left;
  text-decoration: none;
  -webkit-transition: background-color 0.25s ease;
  transition: background-color 0.25s ease;
}

  .User-Block {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }

  .User-Arrow {
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
  }

  .User-AvatarWrapper {
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
    -webkit-box-sizing: content-box;
            box-sizing: content-box;
    margin-right: var(--indent);
    padding: var(--space-2xs);
    border-radius: 50%;
  }

  .User-AvatarWrapper_status_available {
        -webkit-box-shadow: inset 0 0 0 var(--space-3xs) var(--color-bg-success);
                box-shadow: inset 0 0 0 var(--space-3xs) var(--color-bg-success);
      }

  .User-AvatarWrapper_status_remote {
        -webkit-box-shadow: inset 0 0 0 var(--space-3xs) var(--color-bg-warning);
                box-shadow: inset 0 0 0 var(--space-3xs) var(--color-bg-warning);
      }

  .User-AvatarWrapper_status_out {
        -webkit-box-shadow: inset 0 0 0 var(--space-3xs) var(--color-bg-alert);
                box-shadow: inset 0 0 0 var(--space-3xs) var(--color-bg-alert);
      }

  .User-AvatarWrapper:last-child {
      margin-right: 0;
    }

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

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

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

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

  .User-Name,
  .User-Info {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }

  .User-Name {
    max-width: 20ch;
  }

  .User-Info {
    max-width: 28ch;
  }

  .User_size_s {
      --indent-r: var(--space-s);
      --indent: var(--space-xs);
      --icon-indent: var(--space-m);
    }

  .User_size_m {
      --indent-r: var(--space-m);
      --indent: var(--space-s);
      --icon-indent: var(--space-l);
    }

  .User_size_m .user__name {
        margin-bottom: var(--space-3xs);
      }

  .User_size_s:not(.user_with-arrow) {
      --indent-r: var(--space-m);
    }

  .User_size_m:not(.user_with-arrow) {
      --indent-r: var(--space-l);
    }

  .User:not(.user_minified).User_width_full {
    width: 100%;
  }

  .User:not(.user_minified).User_width_full .User-Name,
    .User:not(.user_minified).User_width_full .User-Info {
      max-width: none;
    }

  .User:not(.User_minified) .User-Arrow {
    margin-left: var(--icon-indent);
  }

  .User > *:last-child:not(:first-child) {
    margin-right: var(--indent-r);
  }

.Avatar {
  --avatar-color: transparent;
  --avatar-color-0: #f9a825;
  --avatar-color-1: #f56b00;
  --avatar-color-2: #c62828;
  --avatar-color-3: #c2185b;
  --avatar-color-4: #e92064;
  --avatar-color-5: #911fa2;
  --avatar-color-6: #9010d1;
  --avatar-color-7: #7448dd;
  --avatar-color-8: #3e3acb;
  --avatar-color-9: #2044d5;
  --avatar-color-10: #016bdc;
  --avatar-color-11: #2196f3;
  --avatar-color-12: #00bcd4;
  --avatar-color-13: #0088a3;
  --avatar-color-14: #008f7c;
  --avatar-color-15: #00a352;
  --avatar-color-16: #1abc1a;
  --avatar-color-17: #6fb80a;
  overflow: hidden;
  color: #fff;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.24)), to(rgba(255, 255, 255, 0))),
    -webkit-gradient(linear, left top, left bottom, from(var(--avatar-color)), to(var(--avatar-color)));
  background: linear-gradient(rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0)),
    linear-gradient(var(--avatar-color), var(--avatar-color));
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.1em;
}

  .Avatar_size_xs {
      width: 20px;
      height: 20px;
      font-size: 6px;
      line-height: 20px;
    }

  .Avatar_size_s {
      width: 24px;
      height: 24px;
      font-size: 8px;
      line-height: 24px;
    }

  .Avatar_size_m {
      width: 32px;
      height: 32px;
      font-size: 10px;
      line-height: 32px;
    }

  .Avatar_form_round {
      border-radius: 50%;
    }

  .Avatar_form_brick {
      border-radius: 0;
    }

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

  .Avatar-Image {
    width: 100%;
    height: 100%;
  }

.Modal {
  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-Window {
    z-index: 100;
    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: 0 4px 12px rgba(var(--color-nums-shadow), 0.08),
      0 9px 24px rgba(var(--color-nums-shadow), 0.16);
            box-shadow: 0 4px 12px rgba(var(--color-nums-shadow), 0.08),
      0 9px 24px rgba(var(--color-nums-shadow), 0.16);
  }

  .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: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    background: var(--color-bg-tone);
    border: none;
  }

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

  .Modal_animate_appear,
    .Modal_animate_enter {
      opacity: 0;
    }

  .Modal_animate_appearActive,
    .Modal_animate_enterActive {
      opacity: 1;
    }

  .Modal_animate_exit {
      opacity: 1;
    }

  .Modal_animate_exitActive {
      opacity: 0;
    }

.Tabs {
  position: relative;
  width: 100%;
}

  .Tabs::before {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
  }

  .Tabs_view_bordered::before {
      content: '';
      height: 1px;
      background-color: var(--color-bg-border);
    }

  .Tabs_size_s {
      --only-icon-size: var(--space-l);
      --tab-font-size: var(--size-text-s);
    }

  .Tabs_size_m {
      --only-icon-size: var(--space-xl);
      --tab-font-size: var(--size-text-m);
    }

  .Tabs-List {
    width: 100%;
  }

  .Tabs-Tab:not(:last-child) {
      margin-right: var(--space-m);
    }

  .Tabs-RunningLine {
    left: -1px;
    width: 1px;
    border-radius: 1px 0 0 0;
    -webkit-transition: opacity 0.2s, -webkit-transform 0.25s;
    transition: opacity 0.2s, -webkit-transform 0.25s;
    transition: opacity 0.2s, transform 0.25s;
    transition: opacity 0.2s, transform 0.25s, -webkit-transform 0.25s;
    -webkit-transform: translateX(var(--tabOffsetLeft, 0));
            transform: translateX(var(--tabOffsetLeft, 0));
  }

  .Tabs-RunningLine,
    .Tabs-RunningLine::before,
    .Tabs-RunningLine::after {
      position: absolute;
      bottom: 0;
      height: 2px;
      background-color: var(--color-bg-brand);
      -webkit-transform-origin: left center;
              transform-origin: left center;
    }

  .Tabs-RunningLine::before {
      content: '';
      left: 1px;
      width: var(--tabsWidth);
      -webkit-transition: -webkit-transform 0.25s;
      transition: -webkit-transform 0.25s;
      transition: transform 0.25s;
      transition: transform 0.25s, -webkit-transform 0.25s;
      -webkit-transform: scaleX(var(--tabRatio, 0.0001));
              transform: scaleX(var(--tabRatio, 0.0001));
    }

  .Tabs-RunningLine::after {
      content: '';
      left: 1px;
      width: 1px;
      border-radius: 0 1px 0 0;
      -webkit-transition: -webkit-transform 0.25s;
      transition: -webkit-transform 0.25s;
      transition: transform 0.25s;
      transition: transform 0.25s, -webkit-transform 0.25s;
      -webkit-transform: translateX(var(--tabWidth));
              transform: translateX(var(--tabWidth));
    }

  .Tabs-RunningLine_withOutValue {
      opacity: 0;
    }

  .Tabs-WrapperRunningLine {
    overflow: hidden;
    width: 100%;
  }

.TabsTab {
  --tab-indent: var(--space-m);
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: var(--space-xs) 0;
  color: var(--color-typo-secondary);
  background-color: transparent;
  border: none;
  font-family: var(--font);
  font-size: var(--tab-font-size);
  line-height: var(--line-height-text-s);
  cursor: pointer;
  -webkit-transition: color 0.2s;
  transition: color 0.2s;
}

  .TabsTab_checked,
  .TabsTab:hover {
    color: var(--color-typo-primary);
  }

  .TabsTab::before {
    content: '';
    position: absolute;
    top: 0;
    right: calc(var(--space-2xs)*-1);
    left: calc(var(--space-2xs)*-1);
    bottom: 0;
    display: block;
    border-radius: var(--control-radius);
  }

  .TabsTab:focus {
    outline: none;
  }

  .TabsTab:not(.TabsTab_onlyIcon) .TabsTab-Icon {
    margin-right: calc(var(--tab-indent)*0.5);
  }

  .TabsTab_onlyIcon {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: var(--only-icon-size);
  }

.FileField {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  overflow: hidden;
  max-width: 100%;
  cursor: pointer;
}

.MixVisuallyHidden {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}

.Table {
  --table-z: 0;
  --sticky-left-z: calc(var(--table-z) + 1);
  --sticky-top-z: calc(var(--sticky-left-z) + 1);
  --sticky-top-and-left-z: calc(var(--sticky-top-z) + 1);
  --resizer-z: calc(var(--sticky-top-and-left-z) + 1);
  --fast-transition: 0.15s ease-out;
  --shadow-color: rgba(var(--color-nums-shadow), 0.2);
  --table-border: 1px solid var(--color-bg-border);
  --resizer-width: 0px;
  position: relative;
  z-index: var(--table-z);
  display: grid;
  overflow: auto;
  max-width: 100%;
  max-height: 100%;
}

  .Table_size_s {
    --cell-padding-vertical: var(--space-2xs);
    --cell-padding-horizontal: var(--space-xs);
  }

  .Table_size_m {
    --cell-padding-vertical: var(--space-xs);
    --cell-padding-horizontal: var(--space-s);
  }

  .Table_size_l {
    --cell-padding-vertical: var(--space-s);
    --cell-padding-horizontal: var(--space-m);
  }

  .Table_isResizable {
    --resizer-width: 5px;
  }

  .Table_withBorderBottom {
    border-bottom: var(--table-border);
  }

  .Table-CellsRow {
    display: contents;
  }

  .Table-RowWithoutCells {
    position: sticky;
    left: 0;
    display: block;
    max-width: var(--table-width);
    background-color: var(--color-bg-default);

    grid-column: 1 / -1;
  }

  .Table_zebraStriped_even .Table-CellsRow_nth_even:not(:hover) .Table-ContentCell:not(.Table-ContentCell_isActive) {
      background-color: var(--color-bg-stripe);
    }

  .Table_zebraStriped_odd .Table-CellsRow_nth_odd:not(:hover) .Table-ContentCell:not(.Table-ContentCell_isActive) {
      background-color: var(--color-bg-stripe);
    }

  .Table-ContentCell_isActive,
    .Table-CellsRow:hover .Table-ContentCell {
      background-color: var(--color-bg-ghost);
    }

  .Table-CellsRow_withMergedCells:hover .Table-ContentCell {
      background-color: unset;
    }

  .Table-ContentCell_isDarkned {
      opacity: 0.3;
    }

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

  .Table-EmptyCell {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    height: 100%;
    padding-top: var(--cell-padding-vertical);
    padding-bottom: var(--cell-padding-vertical);
    text-align: center;
  }

.TableCell {
  --buttons-wrapper-size: 0px;
  z-index: var(--table-z);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: var(--color-typo-primary);
  background-color: var(--color-bg-default);
  grid-row-end: var(--row-span);
}

  .TableCell_withoutBorder {
    border: none;
  }

  .TableCell_isHeader {
    position: relative;
    border-bottom: 1px solid var(--color-bg-border);
    font-size: var(--size-text-xs);
    font-weight: bold;
    line-height: var(--line-height-text-s);
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .TableCell:not(.TableCell_isHeader) {
    font-size: var(--size-text-s);
    line-height: var(--line-height-text-s);
  }

  .TableCell_isResized {
    word-break: break-word;
  }

  .TableCell_isClickable {
    cursor: pointer;
  }

  .TableCell_isSortable,
  .TableCell_isFilterable {
    --buttons-wrapper-size: var(--space-xl);
  }

  .TableCell_isSortable.TableCell_isFilterable {
    --buttons-wrapper-size: var(--space-4xl);
  }

  .TableCell_stickyOnTop,
  .TableCell_stickyOnLeft {
    position: sticky;
  }

  .TableCell_stickyOnTop.TableCell_isResizer,
  .TableCell_stickyOnLeft.TableCell_isResizer {
    z-index: calc(var(--sticky-top-and-left-z) + 1);
  }

  .TableCell_stickyOnTop {
    z-index: var(--sticky-top-z);
    top: 0;
  }

  .TableCell_stickyOnLeft {
    z-index: var(--sticky-left-z);
    left: 0;
  }

  .TableCell_stickyOnLeft.TableCell_isHeader {
      z-index: var(--sticky-top-and-left-z);
    }

  .TableCell_isBorderTop {
    border-top: var(--table-border);
  }

  .TableCell_isBorderLeft {
    border-left: var(--table-border);
  }

  .TableCell-Wrapper {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    height: 100%;
    padding: var(--cell-padding-vertical) var(--cell-padding-horizontal);
    padding-right: calc(var(--cell-padding-horizontal) + var(--resizer-width) + var(--buttons-wrapper-size));
  }

  .TableCell-Wrapper_withoutPadding {
      padding: 0;
    }

  .TableCell-Wrapper_verticalAlign_top {
      -webkit-box-align: start;
          -ms-flex-align: start;
              align-items: flex-start;
    }

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

  .TableCell-Wrapper_verticalAlign_bottom {
      -webkit-box-align: end;
          -ms-flex-align: end;
              align-items: flex-end;
    }

  .TableCell-Wrapper_horizontalAlign_left {
      -webkit-box-pack: start;
          -ms-flex-pack: start;
              justify-content: flex-start;
    }

  .TableCell-Wrapper_horizontalAlign_center {
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      text-align: center;
    }

  .TableCell-Wrapper_horizontalAlign_right {
      -webkit-box-pack: end;
          -ms-flex-pack: end;
              justify-content: flex-end;
      text-align: right;
    }

  .TableCell_stickyOnLeft .TableCell-Wrapper::after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      width: var(--space-s);
      background: -webkit-gradient(linear, left top, right top, from(var(--shadow-color)), to(transparent));
      background: linear-gradient(90deg, var(--shadow-color), transparent);
      opacity: 0;
      pointer-events: none;
      -webkit-transition: opacity var(--fast-transition);
      transition: opacity var(--fast-transition);
      -webkit-transform: translateX(100%);
              transform: translateX(100%);
    }

  .TableCell_stickyOnLeft.TableCell_showVerticalShadow .TableCell-Wrapper::after {
      opacity: 1;
    }

  .TableCell_isHeader:hover .TableCell-Wrapper {
      background: var(--color-bg-stripe);
    }

.TableHeader-Row {
    display: contents;
  }
  .TableHeader-Cell_level_high .TableCell-Wrapper {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: center;
              -ms-flex-pack: center;
                  justify-content: center;
        }
  .TableHeader-Cell_level_high.TableCell_isHeader {
          border-bottom: none;
        }
  .TableHeader-Cell_level_high:hover .TableCell-Wrapper {
            background: unset;
          }
  .TableHeader-Cell_level_low {
        font-size: var(--size-text-2xs);
      }
  .TableHeader-Cell:not(.TableHeader-Cell_isFirstColumn)::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      width: 1px;
      background: var(--color-bg-border);
      opacity: 0;
      -webkit-transition: opacity var(--fast-transition);
      transition: opacity var(--fast-transition);
    }
  .TableHeader-Row:hover .TableHeader-Cell:not(.TableHeader-Cell_isFirstColumn)::after,
      .TableHeader-Row_withVerticalBorder .TableHeader-Cell:not(.TableHeader-Cell_isFirstColumn)::after {
        opacity: 1;
      }
  .TableHeader-Buttons {
    --half-cell-padding-horizontal: calc(var(--cell-padding-horizontal)*0.5);
    position: absolute;
    right: calc(var(--half-cell-padding-horizontal) + var(--resizer-width));
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .TableHeader-Buttons_verticalAlign_bottom {
      bottom: var(--cell-padding-vertical);
      -webkit-transform: translateY(calc(var(--control-height-xs)/2 - var(--graphics-size-s)/2));
              transform: translateY(calc(var(--control-height-xs)/2 - var(--graphics-size-s)/2));
    }
  .TableHeader-Buttons_verticalAlign_center {
      top: 50%;
      -webkit-transform: translateY(-50%);
              transform: translateY(-50%);
    }
  .TableHeader-Icon {
    opacity: 0;
    -webkit-transition: opacity var(--fast-transition);
    transition: opacity var(--fast-transition);
  }
  .TableHeader-Row:hover .TableHeader-Icon {
      opacity: 0.4;
    }
  .TableHeader-Cell:hover .TableHeader-Icon {
      opacity: 1;
    }
  .TableHeader-Buttons_isSortingActive .TableHeader-Icon_type_sort {
        color: var(--color-control-typo-secondary);
        opacity: 1;
      }
  .TableHeader-Buttons:hover:not(.TableHeader-Buttons_isFilterOpened) .TableHeader-Icon_type_filter,
      .TableHeader-Buttons_isFilterActive .TableHeader-Icon_type_filter {
        opacity: 1;
      }
  .TableHeader-Buttons_isFilterActive .TableHeader-Icon_type_filter {
        color: var(--color-control-typo-secondary);
      }
  .TableHeader-ShadowWrapper {
    position: sticky;
    z-index: var(--sticky-top-and-left-z);
    top: var(--table-header-height);
    left: 0;

    grid-column: 1 / -1;
  }
  .TableHeader-Shadow {
    position: relative;
  }
  .TableHeader-Shadow::before {
      content: '';
      position: absolute;
      right: 0;
      left: 0;
      bottom: 0;
      height: var(--space-s);
      background: -webkit-gradient(linear, left top, left bottom, from(var(--shadow-color)), to(transparent));
      background: linear-gradient(180deg, var(--shadow-color), transparent);
      opacity: 0;
      pointer-events: none;
      -webkit-transition: opacity var(--fast-transition);
      transition: opacity var(--fast-transition);
      -webkit-transform: translateY(100%);
              transform: translateY(100%);
    }
  .TableHeader-Shadow_show::before {
        opacity: 1;
      }

.TableFilterTooltip-Button {
    z-index: 1;
    opacity: 0;
    -webkit-transition: opacity var(--show-transition);
    transition: opacity var(--show-transition);
  }

    .TableFilterTooltip-Button:hover {
      opacity: 1;
    }

    .TableFilterTooltip-Button_isOpened {
      opacity: 1;
    }
  .TableFilterTooltip-Title {
    margin-top: var(--space-2xs);
    margin-bottom: var(--space-xs);
  }
  .TableFilterTooltip-Content {
    width: 312px;
    padding: var(--space-s);
    background-color: var(--color-bg-secondary);
    border-radius: 8px;
    -webkit-box-shadow: 0 2px 2px rgba(var(--color-nums-shadow), 0.07),
      0 4px 4px rgba(var(--color-nums-shadow), 0.07), 0 8px 8px rgba(var(--color-nums-shadow), 0.07),
      0 12px 16px rgba(var(--color-nums-shadow), 0.07),
      0 16px 32px rgba(var(--color-nums-shadow), 0.07);
            box-shadow: 0 2px 2px rgba(var(--color-nums-shadow), 0.07),
      0 4px 4px rgba(var(--color-nums-shadow), 0.07), 0 8px 8px rgba(var(--color-nums-shadow), 0.07),
      0 12px 16px rgba(var(--color-nums-shadow), 0.07),
      0 16px 32px rgba(var(--color-nums-shadow), 0.07);
  }
  .TableFilterTooltip-Select {
    width: 100%;
    height: 100px;
    color: var(--color-typo-primary);
    background: var(--color-control-bg-default);
    border-color: var(--color-bg-border);
    border-radius: var(--control-radius);
  }
  .TableFilterTooltip-Option {
    padding: var(--space-xs);
    font-size: var(--size-text-s);
  }

.TableResizer {
  --inner-line-width: 1px;
  --fast-transition: 0.15s ease-out;
  position: absolute;
  z-index: var(--resizer-z);
  top: 0;
  right: 0;
  width: var(--resizer-width);
  background-color: var(--color-bg-ghost);
  opacity: 0;
  cursor: col-resize;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-transition: opacity var(--fast-transition);
  transition: opacity var(--fast-transition);
}

  .TableResizer::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: calc(var(--resizer-width)/2 - var(--inner-line-width)/2);
    bottom: 0;
    width: var(--inner-line-width);
    background-color: var(--color-bg-link);
  }

  .TableResizer:hover,
  .TableResizer:focus,
  .TableResizer_isDragging {
    opacity: 1;
  }

  .TableResizer:not(.TableResizer_isVisible) {
    visibility: hidden;
    pointer-events: none;
  }

.TableSelectedOptionsList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding-right: var(--space-s);
  border-bottom: var(--table-border);
}

  .TableSelectedOptionsList-Options {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    padding: 0 var(--cell-padding-horizontal);
  }

  .TableSelectedOptionsList-Option {
    margin: var(--space-2xs) 0;
    margin-right: var(--space-2xs);
  }

  .TableSelectedOptionsList-Button {
    opacity: 0;
    -webkit-transition: opacity 0.15s ease-out;
    transition: opacity 0.15s ease-out;
  }

  .TableSelectedOptionsList:hover .TableSelectedOptionsList-Button {
      opacity: 1;
    }

.TagBase {
  --tag-base-typo-color: var(--color-control-typo-ghost);
  --tag-base-half-space: calc(var(--tag-base-spaсe)/2);
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  overflow: hidden;
  height: var(--tag-base-height);
  padding-top: 0;
  padding-right: var(--tag-base-spaсe);
  padding-left: var(--tag-base-spaсe);
  padding-bottom: 0;
  color: var(--tag-base-typo-color);
  background: var(--tag-base-bg-color);
  border: none;
  border-radius: var(--control-radius);
  -webkit-box-shadow: inset 0 0 0 1px var(--tag-base-border-color);
          box-shadow: inset 0 0 0 1px var(--tag-base-border-color);
  font-family: var(--font--primary);
  font-size: var(--tag-base-font-size);
  line-height: var(--tag-base-height);
  text-decoration: none;
  -webkit-transition: background 0.15s ease, color 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: background 0.15s ease, color 0.15s ease, -webkit-box-shadow 0.15s ease;
  transition: box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
  transition: box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease, -webkit-box-shadow 0.15s ease;
}

  .TagBase:focus,
  .TagBase:focus:hover {
    outline: none;
  }

  .TagBase_view_stroked {
      --tag-base-border-color: var(--color-control-bg-border-default);
      --tag-base-bg-color: var(--color-bg-default);
    }

  .TagBase_view_filled {
      --tag-base-border-color: transparent;
      --tag-base-bg-color: var(--color-control-bg-ghost);
    }

  .TagBase_withAction {
    cursor: pointer;
  }

  .TagBase_withAction.TagBase_view_stroked:hover {
        --tag-base-border-color: var(--color-control-bg-border-default-hover);
      }

  .TagBase_withAction.TagBase_view_filled:hover {
        --tag-base-bg-color: var(--color-control-bg-ghost-hover);
        --tag-base-border-color: transparent;
      }

  .TagBase_size_xs {
      --tag-base-height: var(--space-l);
      --tag-base-spaсe: var(--space-2xs);
      --tag-base-font-size: var(--size-text-xs);
    }

  .TagBase_size_s {
      --tag-base-height: var(--space-xl);
      --tag-base-spaсe: var(--space-xs);
      --tag-base-font-size: var(--size-text-xs);
    }

  .TagBase_size_m {
      --tag-base-height: calc(var(--space-2xl) - var(--space-2xs));
      --tag-base-spaсe: var(--space-xs);
      --tag-base-font-size: var(--size-text-s);
    }

  .TagBase_size_l {
      --tag-base-height: var(--space-2xl);
      --tag-base-spaсe: var(--space-s);
      --tag-base-font-size: var(--size-text-m);
    }

  .TagBase_withCancel {
    padding-right: 0;
  }

  .TagBase_withIcon {
    padding-left: 0;
  }

  .TagBase[class*='TagBase_group']::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 2px;
      height: 100%;
      background: var(--tag-base-group-color);
    }

  .TagBase_group_1 {
      --tag-base-group-color: #e92064;
    }

  .TagBase_group_2 {
      --tag-base-group-color: #b92eff;
    }

  .TagBase_group_3 {
      --tag-base-group-color: #1160ff;
    }

  .TagBase_group_4 {
      --tag-base-group-color: #0fafff;
    }

  .TagBase_group_5 {
      --tag-base-group-color: #02e2ff;
    }

  .TagBase_group_6 {
      --tag-base-group-color: #0c6;
    }

  .TagBase_group_7 {
      --tag-base-group-color: #b4d50b;
    }

  .TagBase_group_8 {
      --tag-base-group-color: #f5b800;
    }

  .TagBase_group_9 {
      --tag-base-group-color: #f56600;
    }

  .TagBase-CancelButton {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    height: var(--tag-base-height);
    padding: 0 var(--tag-base-half-space) 0 var(--tag-base-half-space);
    color: var(--color-control-typo-ghost);
    background: transparent;
    border: none;
    outline: none;
    opacity: 0.4;
    cursor: pointer;
    -webkit-transition: opacity 0.15s ease;
    transition: opacity 0.15s ease;
  }

  .TagBase-CancelButton:hover {
      background: transparent;
      outline: none;
      opacity: 1;
    }

  .TagBase-Label {
    height: var(--tag-base-height);
    line-height: var(--tag-base-height);
  }

  .TagBase-IconWrapper {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    height: var(--tag-base-height);
    padding: 0 var(--tag-base-half-space) 0 var(--tag-base-half-space);
  }

/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}