@import url(https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;500&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Roboto&display=swap);
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
sub,
sup,
tt,
var,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Circe',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #002033;
  overscroll-behavior-y: contain;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

.mxRubberband {
  z-index: 100;
  position: absolute;
  background-color: blue;
}

.Popover {
  z-index: 10;
}

.canvas {
  position: absolute;
  width: 100%;
  height: 100%;
}

.sliderTrack {
  position: relative;
  background: #0078d2;
  height: 4px;
  border-radius: 4px;
}

.sliderTrack-1 {
  position: relative;
  background: #f6fbfd29;
  height: 4px;
  border-radius: 4px;
}

.WarehouseVisualizer__timelinePanel--WSq9w{position:fixed;left:0;right:0;bottom:0;background-color:rgba(0,32,51,.85);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.WarehouseVisualizer__timelinePanel--WSq9w.WarehouseVisualizer__isCollapsed--uR4Fd{height:56px}.WarehouseVisualizer__timelinePanel--WSq9w.WarehouseVisualizer__isMobile--Bfwr1{height:105px;min-height:105px;max-height:189px}.WarehouseVisualizer__timelinePanel--WSq9w.WarehouseVisualizer__isMobile--Bfwr1.WarehouseVisualizer__isCollapsed--uR4Fd{height:68px}.WarehouseVisualizer__bottomPanel--IVJ9a{display:grid;padding:0 32px;height:85px;grid-template-columns:repeat(3,1fr)}.WarehouseVisualizer__bottomPanel--IVJ9a.WarehouseVisualizer__isMobile--Bfwr1{display:flex;flex-flow:column;gap:18px;padding:0}.WarehouseVisualizer__controlsButtons--eoNRA,.WarehouseVisualizer__leftSide--XEPEO{display:flex;align-items:center}.WarehouseVisualizer__leftSide--XEPEO{justify-self:start}.WarehouseVisualizer__leftSide--XEPEO.WarehouseVisualizer__isMobile--Bfwr1{margin-left:12px;margin-top:12px;min-height:0;overflow:hidden;transition:.5s}.WarehouseVisualizer__controlsButtons--eoNRA{gap:16px;margin:auto}.WarehouseVisualizer__controlsButtons--eoNRA,.WarehouseVisualizer__controlsButtonsWrapper--yK5mU{justify-self:center;align-self:center}.WarehouseVisualizer__controlsButtonsWrapper--yK5mU.WarehouseVisualizer__isMobile--Bfwr1{display:flex;justify-content:center;align-items:center}.WarehouseVisualizer__speedBtnWrapper--haTNr{right:16px;position:absolute}.WarehouseVisualizer__fullscreenAndCollapseBtns--f6HLW{position:absolute;top:-56px;right:32px;display:flex;gap:16px}.WarehouseVisualizer__fullscreenAndCollapseBtns--f6HLW .WarehouseVisualizer__controlBtn--yGBJt{background-color:rgba(0,0,0,.6)}.WarehouseVisualizer__controlBtn--yGBJt,.WarehouseVisualizer__speedWrapper--DG6Wo{display:flex;align-items:center}.WarehouseVisualizer__controlBtn--yGBJt{width:32px;height:32px;border-radius:50%;background-color:rgba(246,251,253,.161);justify-content:center;cursor:pointer;box-shadow:none;transition:all .3s ease-in-out}.WarehouseVisualizer__controlBtn--yGBJt.WarehouseVisualizer__bigger--qX3fX{width:40px;height:40px}.WarehouseVisualizer__controlBtn--yGBJt.WarehouseVisualizer__play--PHenN img{margin-left:4px}.WarehouseVisualizer__controlBtn--yGBJt.WarehouseVisualizer__blue--Wew1Q{background-color:#0078d2}.WarehouseVisualizer__controlBtn--yGBJt.WarehouseVisualizer__infoBtn--zEXF4{position:absolute;right:16px;top:-56px}.WarehouseVisualizer__controlBtn--yGBJt:hover{box-shadow:0 2px 8px 2px rgba(217,217,217,.2)}.WarehouseVisualizer__speedWrapper--DG6Wo{justify-self:end;gap:20px}.WarehouseVisualizer__slider--ChAqJ,.WarehouseVisualizer__speedSliderWrapper--ROuTf{width:240px;height:100%}.WarehouseVisualizer__slider--ChAqJ{display:flex;width:100%;align-items:center}.WarehouseVisualizer__sliderThumb--LEHG5{font-size:1em;text-align:center;background-color:#eef8fb;border-radius:50%;cursor:pointer;border:2px solid #0078d2;box-sizing:border-box;width:16px;height:16px}.WarehouseVisualizer__sliderThumb--LEHG5.WarehouseVisualizer__isMobile--Bfwr1:after{content:"";width:45px;height:45px;position:absolute;background:0 0;left:-17px;top:-17px}.WarehouseVisualizer__sliderTrack--xZVYL{position:relative;background:rgba(246,251,253,.161);height:4px;border-radius:4px}.WarehouseVisualizer__mobileCollapseBtnWrapper--DfqAt{display:flex;justify-content:center;align-items:center;background-color:#002033;height:20px;cursor:pointer;position:relative}.WarehouseVisualizer__mobileCollapseBtnWrapper--DfqAt::after,.WarehouseVisualizer__mobileCollapseBtnWrapper--DfqAt::before{content:"";display:block;position:absolute;background-color:transparent;height:20px;width:100%}.WarehouseVisualizer__mobileCollapseBtnWrapper--DfqAt::before{top:-20px}.WarehouseVisualizer__mobileCollapseBtnWrapper--DfqAt::after{bottom:-10px}.WarehouseVisualizer__mobileCollapseBtn--gjLJR{width:72px;height:4px;background:#fff;border-radius:8px}.WarehouseVisualizer__verticalSpeedSlider--FaaSz{position:absolute;top:-413px;left:-12px;padding:24px 0;height:402px;width:56px;background:#0f2d3f;box-shadow:0 0 28px rgba(15,159,255,.12);border-radius:4px;display:flex;justify-content:center;box-sizing:border-box;z-index:1}.WarehouseVisualizer__verticalSpeedSlider--FaaSz .WarehouseVisualizer__slider--ChAqJ{width:100%;flex-flow:column}.WarehouseVisualizer__verticalSpeedSlider--FaaSz .sliderTrack{height:auto;width:4px}.WarehouseVisualizer__elementPropsWrapper--n4voa{position:fixed;top:64px;right:0;width:322px;background-color:rgba(0,32,51,.85);border-top-left-radius:4px;border-bottom-left-radius:4px;height:70%}.WarehouseVisualizer__elementPropsWrapper--n4voa .WarehouseVisualizer__header--Vxeuy{padding:24px;display:flex;justify-content:space-between;align-items:center}.WarehouseVisualizer__elementPropsWrapper--n4voa .WarehouseVisualizer__props--yLoB3{display:flex;flex-flow:column;gap:20px;padding:24px;overflow-y:auto;height:100%}.WarehouseVisualizer__prop--aOMF0{display:flex;flex-flow:column;gap:4px}.WarehouseVisualizer__modal--R4djy.WarehouseVisualizer__dateModal--SjYOu{width:470px}.WarehouseVisualizer__modal--R4djy.WarehouseVisualizer__dateModal--SjYOu .WarehouseVisualizer__dateModalItem--lz8V_{display:flex;flex-direction:column;gap:8px}.WarehouseVisualizer__modal--R4djy.WarehouseVisualizer__isMobile--Bfwr1{height:100%;width:100%;max-width:100%;max-height:100%}.WarehouseVisualizer__modal--R4djy.WarehouseVisualizer__isMobile--Bfwr1 .WarehouseVisualizer__dateModalItem--lz8V_.WarehouseVisualizer__date--UinJJ .DatePickerDropdown_form_default,.WarehouseVisualizer__modal--R4djy.WarehouseVisualizer__isMobile--Bfwr1 .WarehouseVisualizer__dateModalItem--lz8V_.WarehouseVisualizer__time--yJrPq .DatePickerDropdown_form_default{left:calc(50% - 100px)!important}.WarehouseVisualizer__modalContent--Np0LN{display:flex;flex-flow:column;gap:24px;padding:24px}
.TimeLineSlider__sliderWrapper--9dOO2{padding:0 32px}.TimeLineSlider__sliderWrapper--9dOO2.TimeLineSlider__isCollapsed--cwQP5{height:100%;display:flex;gap:24px;align-items:center;margin:0 32px}.TimeLineSlider__sliderWrapper--9dOO2.TimeLineSlider__isMobile--zM41d{height:40px;margin:0;padding:0 28px}.TimeLineSlider__sliderWrapper--9dOO2 .thumb:focus-visible{outline:0}.TimeLineSlider__slider--zjjP9{width:100%;height:40px}.TimeLineSlider__sliderThumb--QL2HT{font-size:1em;text-align:center;background-color:#eef8fb;border-radius:50%;cursor:pointer;border:2px solid #0078d2;box-sizing:border-box;top:-6px;left:-5px;width:16px;height:16px;position:absolute}.TimeLineSlider__sliderThumb--QL2HT.TimeLineSlider__isMobile--zM41d:after{content:"";width:45px;height:45px;position:absolute;background:0 0;left:-17px;top:-17px}.TimeLineSlider__sliderThumb--QL2HT+.TimeLineSlider__tooltip--XtwbA{display:none;width:35px;position:absolute;padding:2px;border-radius:4px;background:#fff;color:#002033;text-align:center;top:-57px;left:calc(50% - 14px);outline:0}.TimeLineSlider__sliderThumb--QL2HT+.TimeLineSlider__tooltip--XtwbA::after{content:"";position:absolute;background:#fff;width:9px;height:9px;rotate:45deg;left:calc(50% - 6.5px);bottom:-3px}.TimeLineSlider__sliderThumb--QL2HT:active+.TimeLineSlider__tooltip--XtwbA,.TimeLineSlider__sliderThumb--QL2HT:focus-visible+.TimeLineSlider__tooltip--XtwbA,.TimeLineSlider__sliderThumb--QL2HT:focus-within+.TimeLineSlider__tooltip--XtwbA,.TimeLineSlider__sliderThumb--QL2HT:hover+.TimeLineSlider__tooltip--XtwbA{display:block}.TimeLineSlider__sliderTrack--F5h2x{position:relative;background:rgba(246,251,253,.161);height:4px;border-radius:4px}.TimeLineSlider__controlBtn--E0kRb,.TimeLineSlider__mark--Mav6c{display:flex;align-items:center}.TimeLineSlider__controlBtn--E0kRb{width:32px;height:32px;min-width:32px;border-radius:50%;background-color:rgba(246,251,253,.161);justify-content:center;cursor:pointer;box-shadow:none;transition:all .3s ease-in-out}.TimeLineSlider__controlBtn--E0kRb.TimeLineSlider__play--DNztH img{margin-left:4px}.TimeLineSlider__controlBtn--E0kRb:hover{box-shadow:0 2px 8px 2px rgba(217,217,217,.2)}.TimeLineSlider__mark--Mav6c{margin-top:12px;font-size:12px;color:#fff;flex-flow:column;position:relative}.TimeLineSlider__mark--Mav6c:nth-child(4){left:initial!important}.TimeLineSlider__mark--Mav6c:nth-child(4) .TimeLineSlider__markTime--hbyY_{position:absolute;right:-27px;bottom:-16px}.TimeLineSlider__mark--Mav6c:last-child{right:-14px!important}.TimeLineSlider__mark--Mav6c:last-child .TimeLineSlider__markTime--hbyY_{position:absolute;left:-14px;bottom:-16px}.TimeLineSlider__mark--Mav6c .TimeLineSlider__bar--RMIfb{height:5px;width:1px;background-color:rgba(246,251,253,.28)}
.ModalHeader__root--Zx4gW{display:flex;align-items:center;justify-content:space-between;padding:24px 24px 14px;border-bottom:1px solid rgba(246,251,253,.16);border-radius:8px 8px 0 0}.ModalHeader__iconClose--fzCQ3{cursor:pointer}
.ModalActions__root--bTVJD{display:flex;justify-content:flex-end;gap:16px;border-radius:0 0 8px 8px;padding:16px 24px}.ModalActions__root--bTVJD.ModalActions__isMobile--PsJlD{width:100vw;position:fixed;left:0;bottom:0;box-sizing:border-box;justify-content:space-between}.ModalActions__root--bTVJD.ModalActions__isMobile--PsJlD button{flex-grow:1}
.Header__root--WvpOo{padding:12px 32px;display:flex;gap:20px;align-items:center;background-color:rgba(0,32,51,.9);justify-content:space-between;position:fixed;top:0;left:0;right:0;height:40px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.Header__root--WvpOo .Header__logo--U1CXH{width:140px;cursor:pointer}.Header__root--WvpOo.Header__isMobile--p2SdI{padding-left:16px;height:32px}.Header__root--WvpOo .Header__closeBtn--q0kd1{height:100%;background-color:#0078d2;display:flex;justify-content:center;align-items:center;cursor:pointer;color:#fff;aspect-ratio:1/1}.Header__root--WvpOo .Header__closeBtn--q0kd1:hover{background-color:#0a548c}.Header__root--WvpOo .Header__logo--U1CXH{height:100%}
.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);
  }

  .HeaderMenu-Link_active::before {
    max-width: 100% !important;
    height: 4px !important;
  }

.Modal {
  z-index: 10;
}

.Sidebar-Overlay {
  z-index: 10 !important;
}

.Sidebar-Window {
  z-index: 10 !important;
}

.Tooltip {
  opacity: 0;
  animation-name: tooltip;
  animation: tooltip 0.2s forwards;
}

@keyframes tooltip {
  100% {
    opacity: 1;
  }
}

* {
  -webkit-tap-highlight-color: transparent;
}

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

/* stylelint-disable */
.Theme_color_customDefaultPresetDefault {
  /* //////////////////////////////
  // Цвета фонов /////////////// */
  --color-bg-default: #002033; /* Цвет дефолта */
  --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(246, 251, 253, 0.28); /* Цвет границ */
  --color-bg-stripe: rgba(246, 251, 253, 0.05); /* Цвет зебры (например, при окрашивании фона строк таблицы через одну) */

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

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

  /* //////////////////////////////
  // Цвета текста ////////////// */
  --color-typo-primary: #EEF8FB; /* Цвет основного текста */
  --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(151, 178, 196); /* Цвет фона системнный */

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

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

  --color-typo-alert: rgb(235, 51, 51); /* Цвет текста ошибки */
  --color-typo-critical: rgb(51, 0, 15); /* Цвет фона системнный */
  --color-typo-link: rgb(0, 120, 210); /* Цвет основной ссылки */
  --color-typo-link-minor: rgb(28, 86, 130); /* Цвет второстепенной ссылки */
  --color-typo-link-hover: rgb(0, 142, 250); /* Цвет ховера ссылки */

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

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

  /* Default */
  --color-control-bg-default: #002033; /* Цвет фона контрола */
  --color-control-typo-default:  #EEF8FB; /* Цвет основного текста контрола */
  --color-control-typo-placeholder: rgba(246, 251, 253, 0.35); /* Цвет плейсхолдера контрола */
  --color-control-bg-border-default: rgba(246, 251, 253, 0.16); /* Цвет фона бордеров котрола */

  --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(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.75); /* Цвет акцентного текста */

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

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

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

  /* 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(246, 251, 253, 0.35); /* Цвет основного текста неактивного контрола */

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

.Modal-Window {
  box-shadow: 0 0 28px rgba(15, 159, 255, 0.12);
}
/* Базовые цвета, от которых выстраивается вся палитра */ /* Базовый цвет содержимого, от которого выстраиваются цвета текста, иконок, ... */ /* Базовый цвет поверхностей */ /* Проектный цвет, от которого выстраивают акцентные состояния */ /* Тонирующий цвет, от которого выстраиватся бордеры, оверлей под модальными окнами, ... */ /* Цвет ссылок и контролов, от которого выстраиваются все их состояния */ /* Цвет системнный */ /* Цвет тени */ /* Цвет успеха */ /* Цвет ошибки */ /* Цвет предупреждения */ /* Цвет осторожности */ /* Цвет нейтральный */

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

  --color-bg-ghost: rgba(246, 251, 253, 0.1); /* Цвет затенения */
  --color-bg-tone: rgba(6, 20, 25, 0.85); /* Цвет паранджи */
  --color-bg-soft: rgba(255, 255, 255, 0.9); /* Цвет молока */
  --color-bg-system: rgb(77, 82, 91); /* Цвет фона системнный */
  --color-bg-normal: rgb(10, 165, 255); /* Цвет фона нейтральный */
  --color-bg-success: rgb(34, 195, 142); /* Цвет фона успеха */
  --color-bg-caution: rgb(242, 201, 76); /* Цвет фона осторожности */
  --color-bg-warning: rgb(243, 139, 0); /* Цвет фона предупреждения */
  --color-bg-alert: rgb(254, 67, 67); /* Цвет фона ошибки */
  --color-bg-critical: rgb(51, 0, 15); /* Цвет фона системнный */

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

  --color-typo-normal: rgb(0, 155, 245); /* Цвет фона нейтральный */
  --color-typo-success: rgb(15, 174, 121); /* Цвет текста успеха */
  --color-typo-caution: rgb(248, 199, 53); /* Цвет текста осторожности */
  --color-typo-warning: rgb(230, 130, 0); /* Цвет текста предупреждения */
  --color-typo-alert: rgb(247, 59, 59); /* Цвет текста ошибки */
  --color-typo-critical: rgb(97, 0, 29); /* Цвет фона системнный */
  --color-typo-link: rgb(15, 159, 255); /* Цвет основной ссылки */
  --color-typo-link-minor: rgb(111, 165, 200); /* Цвет второстепенной ссылки */

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

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

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

  /* Default */
  --color-control-bg-default: rgb(34, 39, 43); /* Цвет фона контрола */
  --color-control-typo-default: rgba(255, 255, 255, 0.8); /* Цвет основного текста контрола */
  --color-control-typo-placeholder: rgba(255, 255, 255, 0.35); /* Цвет плейсхолдера контрола */
  --color-control-bg-border-default: rgba(246, 251, 253, 0.28); /* Цвет фона бордеров котрола */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.Theme_control_customDefaultPresetDefault {
  --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_customDefaultPresetDefault {
  --font-primary: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  --font-mono: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
  font-family: var(--font-primary);
}

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

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

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

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

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