/*
// Copyright 2017 Google Inc. All Rights Reserved.
// Modifications copyright 2019 1C.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//      http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
*/

.mdc-simple-menu {
    display: inline-block;
    min-width: 170px;
    border-radius: 4px;
    border: 1px solid #efefed;
    background-color: #fff;
    white-space: nowrap;
    box-shadow: 0px 4px 6px rgba(35, 35, 32, 0.15);
    max-height: inherit;
    overflow: auto;
    align-self: stretch;
}

.mdc-list-item {
    position: relative;
    padding: 0 12px;
    line-height: 40px !important;
    cursor: pointer;
}

.mdc-list-item.select {
    background-color: #fafafa;
}

.mdc-list-item:not(:first-child) {
    border-top: 1px solid #efefed;
}

.mdc-list-item-image {
    margin-right: 8px;
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
}

.mdc-list-submenu {
    padding-right: 32px;
}

.mdc-list-submenu .mdc-simple-menu {
    position: fixed;
    overflow: auto;
    margin-left: 32px;
    z-index: 1;
}

.mdc-list-submenu > .mdc-list-item-title:after {
    font-size: 0.7em;
    content: '\A0\A0\25B6';
    position: absolute;
    right: 16px;
    z-index: 0;
}

.app_mobile .mdc-simple-menu {
    display: block;
    position: static;
    width: 100%;
    box-shadow: none;
    border: none;
}

.app_mobile .mdc-list-submenu.select {
    padding-bottom: 8px;
}

.app_mobile .mdc-list-submenu .mdc-simple-menu {
    position: static;
    margin-left: 0;
}

.app_mobile .mdc-list-item {
    padding: 0 32px 0 16px;
}

.app_mobile .mdc-list-item.select:after {
    content: '\A0\A0\25BC';
}

.app_mobile .mdc-list-item-image {
    margin-right: 8px;
}

.app_mobile .mdc-list-item-title {
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.mdc-list-item-title {
    width: 100%;
    display: inline-block;
    line-height: 48px;
}

.mdc-list-item-image ~ .mdc-list-item-title {
    line-height: 56px;
    width: calc(100% - 36px);
}

:root {
    --INTERFACE_FONT_FAMILY: 'Almarai', Arial, sans-serif;
    --INTERFACE_BG_05: rgba(0,0,0,0.05);
    --INTERFACE_BG_08: rgba(0,0,0,0.08);
    --INTERFACE_BG_1: rgba(0,0,0,0.1);
    --INTERFACE_BG_2: rgba(0,0,0,0.2);
    --INTERFACE_BG_3: rgba(0,0,0,0.3);
    --INTERFACE_BG_4: rgba(0,0,0,0.4);
    --INTERFACE_BG_5: rgba(0,0,0,0.5);

    --INTERFACE_BACKGROUND_COLOR: #FFF;
    --INTERFACE_COLOR: #4B4B4B;
    --INTERFACE_COLOR_INTENSIVE: rgba(0,0,0,1);
    --INTERFACE_COLOR_ONE: #E6E6E6;
    --INTERFACE_COLOR_HINT: #CCC;

    --INTERFACE_LINK_COLOR: #1C55AE;
    --INTERFACE_ACCENT_COLOR: #009646;
    --IMPORTANT_BACKGROUND_COLOR: #FFD700;
    --IMPORTANT_COLOR: var(--INTERFACE_COLOR);

    --INTERFACE_BORDER_COLOR: #A0A0A0;
    --INTERFACE_BORDER_COLOR_LIGHT: #B3B3B3;

    --HEAD_BACKGROUND_COLOR: #FBED9E;
    --HEAD_HOVER_BACKGROUND_COLOR: #E2D485;
    --HEAD_FOCUS_BACKGROUND_COLOR: #BCAE5F;

    --INTERFACE_SCROLLBAR_TRACK_BACKGROUND_COLOR: #D6D6D6;
    --INTERFACE_SCROLLBAR_THUMB_BACKGROUND_COLOR: #9A9A9A;
    --INTERFACE_SCROLLBAR_THUMB_HOVER_BACKGROUND_COLOR: #757575;
    --INTERFACE_SCROLLBAR_BUTTON_BACKGROUND_COLOR: #C2C2C2;
    --INTERFACE_SCROLLBAR_BUTTON_HOVER_BACKGROUND_COLOR: #202020;

    --INTERFACE_COLOR_ORANGE: #FACC1F;
    --INTERFACE_COLOR_RED: #FF2424;
    --INTERFACE_COLOR_GREEN: #009646;
    --INTERFACE_PRESS_HEIGHT: 2.025em;
    --ECS_PADDING: 0.6em;
    --PRIMARY_COLOR_BACKGROUND: #FBED9E;
    --PRIMARY_COLOR_TEXT: #333;
    --SECONDARY_COLOR_BACKGROUND: #FFFFD9;
    --SECONDARY_COLOR_TEXT: #333;
    --ACTIVITY_COLOR_BACKGROUND: #FACC1F;
    --ACTIVITY_COLOR_BACKGROUND_75: #FEF2C7;
    --ACTIVITY_COLOR_TEXT: #333;
    --ACCENT_COLOR_BACKGROUND: #009646;
    --ACCENT_COLOR_TEXT: #009646;
    --IMPORTANT_COLOR_BACKGROUND: #FFE100;
    --IMPORTANT_COLOR_TEXT: #333;
    --ECS_VIDEO_BACKGROUND_TRANSPARENT: RGBA(51,51,51,0.75);

    --SHADOW_WIDTH: 3px;
    --SHADOW_SPREAD: -1px;
    --SHADOW_ALPHA: 0.5;
}

@media (prefers-color-scheme: dark) {
    :root {
        --INTERFACE_BG_05: rgba(255,255,255,0.05);
        --INTERFACE_BG_08: rgba(255,255,255,0.08);
        --INTERFACE_BG_1: rgba(255,255,255,0.1);
        --INTERFACE_BG_2: rgba(255,255,255,0.2);
        --INTERFACE_BG_3: rgba(255,255,255,0.3);
        --INTERFACE_BG_4: rgba(255,255,255,0.4);
        --INTERFACE_BG_5: rgba(255,255,255,0.5);

        --INTERFACE_BACKGROUND_COLOR: #363636;
        --INTERFACE_COLOR: #CCCCCC;
        --INTERFACE_COLOR_INTENSIVE: rgba(255,255,255,1);
        --INTERFACE_COLOR_ONE: #2E2E2E;
        --INTERFACE_COLOR_HINT: #4C4C4C;

        --INTERFACE_BORDER_COLOR: #5F5F5F;
        --INTERFACE_BORDER_COLOR_LIGHT: #4C4C4C;

        --INTERFACE_LINK_COLOR: #8AB4F8;
        --INTERFACE_ACCENT_COLOR: #7DC667;
        --IMPORTANT_BACKGROUND_COLOR: #2C599E;
        --IMPORTANT_COLOR: var(--INTERFACE_COLOR);

        --HEAD_BACKGROUND_COLOR: #292A2D;
        --HEAD_HOVER_BACKGROUND_COLOR: #343538;
        --HEAD_FOCUS_BACKGROUND_COLOR: #404144;

        --INTERFACE_SCROLLBAR_TRACK_BACKGROUND_COLOR: #414347;
        --INTERFACE_SCROLLBAR_THUMB_BACKGROUND_COLOR: #56595E;
        --INTERFACE_SCROLLBAR_THUMB_HOVER_BACKGROUND_COLOR: #64676D;
        --INTERFACE_SCROLLBAR_BUTTON_BACKGROUND_COLOR: #56595E;
        --INTERFACE_SCROLLBAR_BUTTON_HOVER_BACKGROUND_COLOR: #64676D;
    }
}


/* это всего лиш кусочек от оригинала - разнести оригинал? */
.ecs-body { /*line-height: 1.2; */cursor: default; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-touch-callout: none; overflow: hidden; position: absolute; top: 0; right: 0; bottom: 0; left: 0; -moz-user-select: none; -webkit-user-select: none;}
.ecs-base button, .ecs-base code, .ecs-base em, .ecs-base input, .ecs-base strong, .ecs-base textarea, .ecs-base var {font: inherit;}
.ecs-base {color: var(--INTERFACE_COLOR); background-color: var(--INTERFACE_BACKGROUND_COLOR); font-family: var(--INTERFACE_FONT_FAMILY); font-size: var(--INTERFACE_FONT_SIZE);}
.ecs-base a {color: var(--INTERFACE_LINK_COLOR);}

.ecs-base input, .ecs-base textarea {background-color: var(--INTERFACE_BACKGROUND_COLOR); color: var(--INTERFACE_COLOR); border: 0 none; text-align: inherit; -moz-user-select: text; -webkit-user-select: text;}
.ipad input, .ipad-safari6 input, .ipad textarea, .ipad-safari6 textarea {-webkit-appearance: none; border-radius: 0;}

/* ------------ base ------- .2 стили для иконок свг */
.ecs-base svg {fill: inherit; position: relative; width: inherit; height: inherit; max-width: 100%; max-height: 100%; pointer-events: none;}
/* [text-rendering] атрибут для svg-диаграмы */
.ecs-base svg[text-rendering] {pointer-events: auto;}
.ico {fill: var(--INTERFACE_COLOR); display: inline-flex; flex: 0 0 auto; justify-content: center; align-items: center; position: relative; width: 16px; height: 16px}
.ico-24 {padding: 4px;}
.iHoverRound:not(.disabled):HOVER:before {content: ''; border-radius: 50%; opacity: 0.15; box-shadow: 0 0 0 1em inset; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.iHoverDark {fill: var(--INTERFACE_COLOR); color: var(--INTERFACE_COLOR); cursor: pointer;}
.iHoverDark:HOVER {fill: var(--INTERFACE_COLOR_INTENSIVE); color: var(--INTERFACE_COLOR_INTENSIVE);}
.iHoverOpacity {cursor: pointer;}
.iHoverOpacity:not(:HOVER) {opacity: 0.7;}
.ico.disabled {opacity: 0.5;}
.hiddenContainer {position: absolute; top: -100000px;}

.highlight {color: var(--INTERFACE_ACCENT_COLOR); font-weight: bold;}

html[dir=rtl] {text-align: right;}
html[dir=rtl] .rtlScale {transform: scaleX(-1);}

.taS, [dir=rtl] [dir=ltr] .taS {text-align: left;}
.taE, [dir=rtl] [dir=ltr] .taE {text-align: right;}
[dir=rtl] .taS {text-align: right;}
[dir=rtl] .taE {text-align: left;}

html .floatStart {float: left;}
html .floatEnd {float: right;}
html[dir=rtl] .floatStart {float: right;}
html[dir=rtl] .floatEnd {float: left;}

.absolute {position: absolute;}
.relative {position: relative;}

.fullSize {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}

.maxSize {max-width: 100%; max-height: 100%;}

.movable {position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(255, 255, 255, 0.01); z-index: 10000000;}

.anchor {position: absolute; max-width: 0; max-height: 0;}
.noselect {-ms-user-select: none; -moz-user-select: none; -webkit-user-select: none;}

.loading {display: block; background-size: 100%; position: absolute; width: 80px; height: 80px; animation: loading 1s linear infinite; background: url(images/_loading.524613398c0ec15393807e2bb7b2e79e.svg) no-repeat center center;}
.ecsVideo .loading {align-self: center;}
/*@keyframes loading {0% {
    -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg);}
    100% {-webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg);}
}*/

/* //////////// train -------  Паровозики ------- ///////
      .0 хаки для IE10
      .1 общие стили
      .2 хаки для мест использование паровозиков (ECS)

   train - класс для контрола:
   - trainWrap - доп.класс вертикальных паровозиков (адресаты ECS)
   - trainLink - доп.класс подчеркивания при наведении
   - disabled - доп.класс для недоступного состояния

   trainItem - один паровозик
   trainItemBox - внутренность паровозика
   trainName - левый вагон
   trainTitle - правый вагон
   trainClose - крестик закрытия
   //////////////////////////////////////////////////////////// */
/* ------------ train ------- .1 общие стили */
.trainClose {fill: inherit;}
.train, .trainItem {box-sizing: border-box;}
.train {display: flex; height: inherit; margin: 0 -4px; overflow: hidden;}
.trainWrap {flex-wrap: wrap;}
.trainItem {display: inherit; align-items: center; background-color: var(--INTERFACE_BG_05); color: var(--INTERFACE_COLOR); border-radius: 0.2em; position: relative; margin: 0 4px; padding: 0 0.25em; overflow: hidden;}
.trainItemBox {display: inherit; align-items: baseline; position: relative; line-height: 1.5em; overflow: hidden;}
.trainLink .trainItemBox:HOVER:before {content: ''; display: block; border-top: 1px solid; position: absolute; top: 1.2em; right: 0; left: 0;}
.trainName {opacity: 0.7;}
.trainTitle {margin: 0 0.3em;}
.disabled.train:after {content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
.disabled.train .trainItem {opacity: 0.5;}
/* /end ------- train ------- .1 общие стили */
/* ------------ train ------- .2 хаки для мест использование паровозиков (ECS) */
.ecsAnswer .train {max-height: 6.3em; padding: 0 0.3em; margin: 0; line-height: normal; overflow-y: auto;}
.ecsAnswer .trainItem {height: 1.8em; margin: 0.3em 0.15em 0;}
.ecsMessage .train {height: 1.8em;}
.ecsMessage .trainItem {margin-top: 0;}
/* /end ------- train ------- .2 хаки для мест использование паровозиков (ECS) */
/* /end /////// train ------- //////////////////////// */
/* //////////// command + buttons ------- Коммандная панель + Кнопки
      .0 хаки IE10 и IE11
      .1 каркас командной панели
      .2 общие стили для кнопок, внутренностей, состояний
      .3 Отличие самостоятельной кнопки
      .4 компактный режим
      .5 хак для Safari и iPad
      .6 стили для масштабирования
      .7 .lfl - старый лейаутер

   !!!!!!! ВНИМАНИЕ: - commandHeight - проба установки высота, по необходимости

   frameCommand - оболочка командной панели:
   command - командная панель:
   - taE, taC - выравнивание кнопок справа / по центру
   - commandField - наличие в панели поля ввода
   - commandFieldBox - контейнер поля ввода в панели
   - commandRight - кнопки правой части
   - commandSeparator - группа кнопок
   - commandSeparatorCompact - компактная группа кнопок

   framePress/frameButton - оболочка кнопки
   framePressSearch - оболочка кнопки расширенного поиска
   pressMorePadding - отступ между кнопками правой и левой части при наличии кнопки еще
   pressBefore - отступ между кнопками отдельным контейнером
   pressBeforeMore - перед кнопкой еще надо отличить отступ
   pressDisplay - аналог style: display: none; для кнопки
   press - кнопка:
   - pressMore - добавочный класс для кнопки еще
   - pressCommand - добавочный класс для кнопки командной панели
   - pressButton - добавочный класс для самостоятельной кнопки
   дополнительное оформление кнопки:
   - pressActive - кнопка с оформлением при активности
   - pressNone - кнопка без оформления
   - pressLink - гиперссылка командной панели
   состояние кнопки:
   - pressDefault - дефолтная кнопка
   - pressChecked - чекнутая кнопка
   - pressDisabled - недоступная кнопка
   форма кнопки:
   - pressOval - овальная кнопка
   pressImg - картинка
   pressBox - текст
   - pressBoxTitle - вложженый контейнер текста для pressButton
   pressDrop - стрелка подменю

   #ServCntButton .press - показатели производительности
   //////////////////////////////////////////////////////////// */

:root {
    --PRESS_BORDER_RADIUS: 2px;
    --PRESS_OVAL_RADIUS: 250px;

    --PRESS_BORDER_COLOR: var(--INTERFACE_BG_3);
    --PRESS_BORDER_BOTTOM_COLOR: var(--INTERFACE_BG_4);
    --PRESS_BACKGROUND_COLOR: var(--INTERFACE_BACKGROUND_COLOR);
    --PRESS_HOVER_BACKGROUND_COLOR: rgba(255,255,255,0.08);
}
@media (prefers-color-scheme: dark) {
    :root {
        --PRESS_HOVER_BACKGROUND_COLOR: rgba(0,0,0,0.08);
    }
}
/* ------------ CommandBar + Buttons ------- .1 каркас командной панели */
/* наследование высот */
/* наследование высот */
.frameCommand, .command, .commandRight, .commandSeparator, .framePress, .press {height: inherit;}
.commandHeight {height: var(--INTERFACE_PRESS_HEIGHT);}
/* сам каркас панели */
.command {position: relative; width: 100%; z-index: 0; word-spacing: 1.2em; word-break: break-all;}
/* выравнивание кнопок в панели */
.taC .command {display: inline-block; vertical-align: top;}
.commandRight {max-width: 100%; text-align: inherit; word-spacing: 0;}
/* сепараторы */
.commandSeparator {vertical-align: top; word-spacing: 0;}
.commandSeparatorCompact {padding: 0 1px; white-space: pre;}
.commandSeparatorCompact .framePress {margin: 0 -1px;}
.commandSeparatorCompact .pressBefore, .commandSeparatorCompact .pressBefore:before {display: inline-block; font-size: 0 !important; width: 1px;}

.commandSeparatorCompact .pressFirst + .framePress .pressOval {border-top-left-radius: var(--PRESS_OVAL_RADIUS); border-bottom-left-radius: var(--PRESS_OVAL_RADIUS);}
.commandSeparatorCompact .pressLast + .framePress .pressOval {    border-top-right-radius: var(--PRESS_OVAL_RADIUS);     border-bottom-right-radius: var(--PRESS_OVAL_RADIUS);}
html[dir=rtl] .commandSeparatorCompact .pressFirst + .framePress .pressOval i,
html[dir=rtl] .commandSeparatorCompact .pressLast + .framePress .pressOval i {transform: scaleX(-1);}
.commandSeparatorCompact .press {border-radius: 2px;}
/* контейнер поля ввода в командной панели */
.commandFieldBox {display: inline-block; position: relative; width: 15em; height: inherit; vertical-align: top;}
.commandFieldBox .field {position: relative; height: inherit;}
.commandFieldBox + .commandFieldBox {margin-left: 0.7em;}
/* /end ------- command + buttons ------- .1 каркас командной панели */

/* ------------ command + buttons ------- .2 общие стили для кнопок, внутренностей, состояний */
/* framePress - контейнер для кнопки командной панели */
.framePress {display: inline-block; position: relative; vertical-align: top;}
/* framePressSearch - заглушка для скрытия кнопок между полем и "еще" */
.framePressSearch {display: inline-block; width: 3.1em; height: inherit;}
/* аналог display: none; для кнопки */
.pressDisplay, .pressDisplay + .framePress {display: none;}
/* pressBefore - отступ между кнопками */
.pressBefore:first-child {display: inline-block; width: 0.000001em; height: inherit; vertical-align: top;}
.pressBeforeMore:first-child {width: 0;}
.pressBefore:before {content: ' '; font-size: 2.4em; line-height: 0;}
/* press - кнопка */
.press:before, .press i, .press i:before {border-radius: inherit;}
/* значение  padding: 0 0.45em; должно соответствовать значению константы WebUI.Button.prototype.doPictResize_ в buttonui */
.press {display: inline-flex; align-items: center; justify-content: center; border-radius: var(--PRESS_BORDER_RADIUS); color: var(--INTERFACE_COLOR); fill: var(--INTERFACE_COLOR); font-family: var(--INTERFACE_FONT_FAMILY); font-size: 1em; position: relative;padding: 0 0.45em; vertical-align: top; word-spacing: normal; z-index: 0; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}
.press {border-width: 0 1px; border-style: solid; border-color: transparent; max-width: 100%;}
/* max-height если размер картинки больше, чем размер контейнера */
.pressImg {flex: 0 0 auto; background-repeat: no-repeat; background-position: center; background-size: contain; position: relative; width: 16px; height: 16px; max-height: 100%;}
.pressBox {flex: 1 1 auto; position: relative; max-height: 100%; min-height: 1.2em; line-height: 1.2; text-align: center; text-decoration: inherit; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;}
.pressCommand .pressBox, .pressButton .pressBoxTitle {border-width: 0 0.45em; border-style: solid; border-color: transparent;}
.pressCommand .pressBox {white-space: pre;}
.pressDrop {display: inherit; position: relative; height: 0;}
.pressDrop:after {content: ''; display: block; font-size: 0.9em; border-width: 0.25em 0.25em 0; border-style: solid; border-left-color: transparent; border-right-color: transparent;}
.pressImg + .pressDrop:before {content: ''; display: block; width: 0.45em; overflow: hidden;}
.pressNone .pressImg + .pressDrop:before, .pressLink .pressImg + .pressDrop:before {width: 0.15em;}
/*  */
.press i {border: 1px solid var(--PRESS_BORDER_COLOR); border-bottom-color: var(--PRESS_BORDER_BOTTOM_COLOR); background-color: var(--PRESS_BACKGROUND_COLOR); background-repeat: repeat-x; background-position: left bottom, 0 0; position: absolute; top: 0; right: -1px; bottom: 1px; left: -1px; z-index: -1; -webkit-box-shadow: 0 1px 0 0 var(--INTERFACE_BG_2); box-shadow: 0 1px 0 0 var(--INTERFACE_BG_2); background-image: linear-gradient(0deg, var(--INTERFACE_BG_05) 0%, rgba(255,255,255,0.1) 100%);}

/* картинки справа */
.pressImgRight .pressImg {order: 3;}
/* овальные кнопки */
.pressOval {border-radius: var(--PRESS_OVAL_RADIUS);}
/* кнопка-пометка */
.pressChecked i {border-color: var(--INTERFACE_BORDER_COLOR); background-image: url({{base}}e1csys/mngsrv/_pressChecked.png?sysver={{version}}); background-position: 0 0; -webkit-box-shadow: 0 2px 0 -1px var(--INTERFACE_BG_2) inset; box-shadow: 0 2px 0 -1px var(--INTERFACE_BG_2) inset;}
/* цвет текста кнопок-ссылок */
.pressLink {color: var(--INTERFACE_LINK_COLOR);}

/* кнопки без оформления */
.pressActive:not(.focus):not(.pressChecked):not(:HOVER):not(:ACTIVE) i, .pressNone i, .pressLink i {display: none;}
.pressNone, .pressLink {cursor: pointer; border-width: 0; border-radius: 0; padding-right: 0 !important; padding-left: 0 !important;}
.pressNone .pressImg, .pressLink .pressImg {margin: 0 0.15em;}
.pressNone.pressCommand .pressBox, .pressLink.pressCommand .pressBox,
.pressNone.pressButton .pressBoxTitle, .pressLink.pressButton .pressBoxTitle {border-width: 0 0.15em;}
.pressNone:HOVER .pressBox, .pressNone:ACTIVE .pressBox {text-decoration: underline;}

/* :HOVER, :ACTIVE и тд */
.press:not(.pressNone):not(.pressLink):ACTIVE > span, .press:not(.pressNone):not(.pressLink):ACTIVE > svg {top: 1px;}
.press:HOVER i:before, .press:ACTIVE i:before,
.pressChecked i:before {content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
.press:HOVER i:before, .press:ACTIVE i:before {
    -webkit-box-shadow: 0 0 0 1px var(--PRESS_BORDER_COLOR);
    box-shadow: 0 0 0 1px var(--PRESS_BORDER_COLOR);
}
.press:HOVER i:before {background-color: var(--PRESS_HOVER_BACKGROUND_COLOR);}
.press:ACTIVE i:before, .pressChecked i:before {background-color: var(--INTERFACE_BG_05);}
.pressChecked:HOVER i:before {background-color: rgba(0, 0, 0, 0.035);}
.pressChecked:ACTIVE i:before {background-color: var(--INTERFACE_BG_08);}
.press:ACTIVE i {background-image: none; -webkit-box-shadow: 0 2px 0 0 var(--INTERFACE_BG_2) inset; box-shadow: 0 2px 0 0 var(--INTERFACE_BG_2) inset;}

/* состояние фокуса */
.focus.press:after {content: ''; background-color: rgba(255,255,255,0.01); position: absolute; top: 2px; right: 1px; bottom: 3px; left: 1px;}
.focus.pressCommand:after, .focus.pressButton.pressNone:after {border: 1px dotted #000; border-image: url({{base}}e1csys/mngsrv/_focus.png?sysver={{version}}) 1 1 1 1 repeat repeat;}
.focus.pressNone:after, .focus.pressLink:after {right: 0; left: 0;}
.focus.pressButton.pressNone:after {top: 0; bottom: 0;}

/* кнопка по умолчанию */
.pressDefault {color: var(--IMPORTANT_COLOR_TEXT);}
.pressDefault i {background-color: var(--IMPORTANT_COLOR_BACKGROUND);}

/* кнопке "еще" немного другое оформление */
.pressMore .pressBox {padding: 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; /*-moz-box-sizing: border-box; -webkit-box-sizing: border-box;*/}
/* перед кнопкой "еще" отступ по умолсчанию скрыт и нужен только если есть поле ввода */
.pressBeforeMore {display: none !important;}
.commandField .pressBeforeMore {display: inline !important;}
/* commandMore - кнопка "еще" видима */
.commandMore {width: auto;}
.commandMore .pressMore, .commandMore .pressMorePadding {display: inline-flex;}
/* pressMore - кнопка "еще" и отступ (pressMorePadding) между "еще" и кнопками левой части, если есть кнопка еще */
/* аккуратно с условием! 20171397 и 20171524 */
.pressMore, .command:not(.commandMore) .cloud + .pressMorePadding, .command:not(.commandMore) .pressBeforeMore + .framePress + .pressMorePadding {display: none;}
.pressMorePadding {width: 0.65em; height: inherit; background: rgba(0,0,0,0);}
/* для сжатия кнопки "еще" */
.commandRight, .commandFieldBox, .framePress, .pressMore, .pressMore .pressBox {max-width: 100%;}

/* недоступность */
.pressCommand.pressDisabled:not(.pressActive):not(.pressNone):not(.pressLink):before, .pressDisabled.pressActive.pressChecked:before {content: ''; background-color: rgba(255,255,255,0.5); position: absolute; top: -1px; right: -1px; bottom: -1px; left: -1px; z-index: 1;}

.pressActive.pressDisabled:not(.pressChecked), .pressNone.pressDisabled, .pressLink.pressDisabled {opacity: 0.5;}
.command .pressDisabled, .ecsHeaderBtns .pressDisabled, .ecsButton .pressDisabled {z-index: -1;}
/* /end ------- command + buttons ------- .2 общие стили для кнопок, внутренностей, состояний */

/* ------------ command + buttons ------- .3 Отличие самостоятельной кнопки */
/* frameButton - контейнер для самостоятельной кнопки
.frameButton {
    overflow: hidden;
@mixin full_size(0);
}
.pressButton {
    white-space: nowrap;
    text-align: center;
@mixin full_size(0);
}
.pressButton .pressImg {
    max-width: 100%;
}
.pressButton .pressBox {
    display: flex;
    width: 100%;
    overflow: hidden;
}
.pressButton .pressBoxTitle {
    width: 100%;
    padding: 2px 0;
    overflow: hidden;
    text-overflow: ellipsis;
}*/
/* Кнопка "расширенный поиск"
.pressButton .pressDrop {
    order: 1;
}
.pressButton .pressDrop + .pressBox {
    display: block !important;
}
.frameButton.pressDisabled:after {
    content: '';
    background-color: transparent;
@mixin full_size(0);
}
.frameButton.pressDisabled .press:not(.pressActive):not(.pressNone):before {
    content: '';
    background-color: RGBA_COLOR_WHITE;
    position: absolute;
    top: 0;
    right: -1px;
    bottom: 1px;
    left: -1px;
    z-index: 1;
}
.frameButton.pressDisabled .pressActive, .frameButton.pressDisabled .pressNone {
    opacity: 0.5;
}*/

/* Кнопка "Показатели производительности"
#ServCntButton .press {
    padding: 0 0 1px 0;
}
*/
/* /end ------- command + buttons ------- .3 Отличие самостоятельной кнопки */

/* ------------ command + buttons ------- .4 компактный режим
.ICompactWeb .pressBefore:before {
    font-size: 21px;
}
.ICompactWeb .press {
    font-family: DEFAULT_GUI_FONT_FAMILY;
    font-size: DEFAULT_GUI_FONT_SIZE;
    padding-right: 4px;
    padding-left: 4px;
}
.ICompactWeb .pressCommand .pressBox, .ICompactWeb .pressButton .pressBoxTitle {
    border-width: 0 3px;
}*/
/* /end ------- command + buttons ------- .4 компактный режим */
/* ------------ command + buttons ------- .6 стили для масштабирования
.zoom85 .pressImg {
    width: 14px;
    height: 14px;
}
.zoom125 .pressImg {
    width: 20px;
    height: 20px;
}
.zoom150 .pressImg {
    width: 24px;
    height: 24px;
}
.zoom175 .pressImg {
    width: 28px;
    height: 28px;
}
.zoom200 .pressImg {
    width: 32px;
    height: 32px;
}
.zoom300 .pressImg {
    width: 48px;
    height: 48px;
}
.zoom400 .pressImg {
    width: 64px;
    height: 64px;
}*/
/* /end ------- command + buttons ------- .6 стили для масштабирования */

/* ------------ command + buttons ------- .7 .lfl - старый лейаутер
.lfl .command {
    height: 26px;
    top: 2px;
    overflow: hidden;
}
.lfl .press {
    padding: 0 5px;
}
.lfl .pressButton .pressBoxTitle {
    padding: 0 5px;
}
.ICompactWeb .lfl .command {
    height: 22px;
}
.ICompactWeb .lfl .press {
    padding: 0 2px;
}*/
/* /end ------- command + buttons ------- .7 .lfl - старый лейаутер */
/* /end /////// command + buttons ------- //////////////////////// */

/* //////////// topline ------- Заголовок формы ------- ///////
      .0 хаки IE10
      .1 общие стили
      .2 отличия режимов

   !!!!!!! ВНИМАНИЕ: - смотри .cloud .topline

   !!!!!!! Внимание:
   - cloud - отличия для заголовока окна, поиск по комментарию "топлайн (.topline)"
   - toplineHomeHide - навешивается глубоко наверху - выключает домик где бы он ни был
   - notNormalMainWindowMode - навешивается глубоко наверху - режим отличный от нормального

   frameTopline - оболочка контрола
   - toplineAllSurf / toplineModalSurf - серфейс топлайна (весь / без кнопок навигации)
   topline - контейнер контрола
   toplineLeft, toplineCenter, toplineRight - ячейки/стороны топлайна
   toplineBox + toplineBoxTitle - заголовок топлайна, с подсказкой при необходимости

   toplinePress - кнопки левой части
   - toplineHome, toplinePrev, toplineNext, toplineStar - принадлежность кнопки
   disabled - недоступная кнопка

   //////////////////////////////////////////////////////////// */

/* ------------ topline ------- .1 общие стили */
.toplineHome, .toplineNav, .toplineCenter, .toplineStar, .toplineBox {
    margin: 0 4px;
}
.toplineLeft, .toplineCenter, .toplineRight, .toplineNav {
    height: inherit;
}
.frameTopline, .topline {
    position: absolute;
    height: 42px;
    right: 0;
    left: 0;
    overflow: hidden;
}
.topline {
    font-weight: normal;
    height: 24px;
    padding: 9px;
}
.topline svg {
    fill: #707070;
}
.toplineLeft, .toplineCenter, .toplineRight {
    position: relative;
}
.toplineLeft {
    z-index: 0;
}
.toplineRight {
    margin: 0 -3px;
}
.toplineRight > * {
    margin: 0 3px 20px;
}
.toplineRight .press {
    word-break: break-all;
}

.topline .pressCommand i {
    bottom: 0;
}
.toplineNext {
    border-left-color: var(--INTERFACE_BG_2) !important;
}

.toplineStar use:first-child {
    fill: transparent;
}
.active.toplineStar use:first-child {
    fill: var(--INTERFACE_COLOR_ORANGE);
}
.toplineStar use + use {
    opacity: 0.2;
}
.toplineStar:HOVER use + use {
    opacity: 0.3;
}
.disabled.toplineStar {
    position: relative;
    z-index: -1;
}

.toplineBox, .toplineBoxTitle {
    display: block;
    overflow: hidden;
}
.toplineBox {
    font-size: 14pt;
    position: relative;
    width: 100%;
    min-width: 2em;
    height: 1.5em;
    line-height: 1.5em;
}
.toplineBox:after {
    content: attr(data-title);
    display: block;
    color: var(--INTERFACE_COLOR);
    position: absolute;
    width: 100%;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 0;
}
.toplineBoxTitle {
    position: absolute;
    right: 0;
    top: -1.5em;
    left: 0;
    z-index: 1;
}
.toplineBoxTitle:before {
    content: attr(title);
    display: inline-block;
    color: transparent;
    word-break: break-all;
}

/* Сёрфейс топлайна */
.toplineAllSurf .topline:after, .toplineModalSurf .topline:after {
    content: '';
    background-color: var(--INTERFACE_BG_05);
    position: absolute;
    top: -12px;
    right: 0;
    bottom: -12px;
    left: 0;
}
.toplineModalSurf .toplineLeft {
    background: #fff;
    z-index: 1;
    box-shadow: 0 0 0 8px #fff;
}
/* /end ------- topline ------- .1 общие стили */
/* ------------ topline ------- .2 отличия режимов */
/* Скрывает домики для всех форм (например, при наличии панели открытых и домика в ней) */
.toplineHomeHide .toplineHome {
    display: none;
}
/* режим отличный от нормального */
.notNormalMainWindowMode .toplineCenter {
    margin: 0;
}
/* облачное отличие топлайн (.topline)  */
.cloud .toplineLeft, .cloud .disabled.toplineStar {
    display: none;
}
/* минимайзное отличие топлайн (.topline) */
.cloudMinimize .frameTopline, .cloudMinimize .topline {
    height: 20px;
    padding: 0;
}
.cloudMinimize .toplineBox {
    font-size: var(--INTERFACE_FONT_SIZE);
}
.cloudMinimize .topline .ico {
    margin: 0;
    padding: 2px 8px;
}
.cloudMinimize .topline .ico:before {
    border-radius: 0;
}
/* /end ------- topline ------- .2  отличия режимов */
/* /end /////// topline ------- //////////////////////// */

.frameSubmenu {background: var(--INTERFACE_BACKGROUND_COLOR); position: relative; top: 0; padding: 1px 2px 0; margin: -2px -3px; z-index: 0;}
.submenu {display: block; position: relative; margin: 3px 0; padding: 0 2px; z-index: 1;}
.submenu:before {content: ''; border-top: 1px solid var(--INTERFACE_COLOR_HINT); position: absolute; top: -2px; right: 2px; bottom: 0; left: 2px;}

.submenuBlock {display: flex; justify-content: space-between; fill: var(--INTERFACE_COLOR); position: relative; line-height: 1.2em; z-index: 0;}
.submenuName, .submenuTitle {display: inherit; position: relative;}
.submenuName {white-space: nowrap; margin: .6em 1.2em;}
.submenuTitle {margin: .6em 1.6em; opacity: .5;}
.submenuIco {background-repeat: no-repeat; background-position: center center; position: absolute; width: 1em; height: 1em;}
.submenuText {margin: 0 2.4em;}
.submenuDrop {align-self: center; display: block; border-width: .4em; border-right-width: 0; border-style: solid; border-top-color: transparent; border-bottom-color: transparent; height: 0; margin: 0 .5em; line-height: 0;}

.submenuBlockChecked .submenuName:before {content: ''; border: 1px solid var(--ACTIVITY_COLOR_BACKGROUND);  /* TODO background: url(...) */background-size: 1.2em; position: absolute; top: -0.3em; right: -0.3em; bottom: -0.3em; left: -0.3em; width: 1.2em; height: 1.2em; margin: -1px; padding: 0.3em; z-index: -1;}
.submenuBlockChecked .submenuName:before, .submenuBlockChecked .submenuIco {background-color: var(--ACTIVITY_COLOR_BACKGROUND_75);}

.submenuBlockDisabled.submenuBlock {z-index: -1;}
.submenuBlockDisabled .submenuName, .submenuBlockDisabled .submenuDrop {opacity: 0.5;}
.submenuBlock.select {fill: var(--ACTIVITY_COLOR_TEXT); color: var(--ACTIVITY_COLOR_TEXT); background-color: var(--ACTIVITY_COLOR_BACKGROUND);}

#editDropDown {color: var(--INTERFACE_COLOR); background-color: var(--INTERFACE_BACKGROUND_COLOR); width: 100%; height: 100%; overflow: hidden;}
#editDropDown > div + div, .eddSeparator {border-top: 1px solid var(--INTERFACE_BORDER_COLOR_LIGHT);}
.eddSeparator, .eddList {margin: 0.075em 0;}
.eddTop, .eddBottom {flex: 1 1 auto; color: var(--INTERFACE_COLOR); padding: 0.45em 1.2em;}
.eddTop {margin-top: 0.15em; line-height: 1.8em;}
.eddMiddle {overflow-y: auto; overflow-x: hidden; white-space: nowrap; line-height: 2.175em;}
.eddBottom {display: flex; align-items: center; justify-content: space-between; position: relative;}
.eddList LI { display: flex; align-items: center; padding: 0 0.6em; white-space: pre; overflow: hidden; text-overflow: ellipsis;}
.eddList LI > div, .eddSearch, .eddIco {margin: 0 0.6em;}
.eddIco {background-repeat: no-repeat; background-position: center center; background-size: contain; width: 1em; height: 1em; fill: var(--INTERFACE_COLOR); justify-content: center; align-items: center; display: inline-flex;}
.eddPlus {display: inline-block; color: var(--INTERFACE_COLOR_GREEN); font-family: Arial, sans-serif; font-size: 1.6em; font-weight: bold; vertical-align: middle; line-height: 0;}
.eddList LI.select {color: var(--ACTIVITY_COLOR_TEXT); background-color: var(--ACTIVITY_COLOR_BACKGROUND);}

.cloud {
    background: var(--INTERFACE_BACKGROUND_COLOR);
    position: absolute;
    max-width: 100%;
    line-height: 1.2;
}
.cloudDD {
    border-radius: 1px;
    -webkit-box-shadow: 0 0 0 3px var(--INTERFACE_COLOR_ONE);
    box-shadow: 0 0 0 3px var(--INTERFACE_COLOR_ONE);
}
.cloudDB {
    border: 4px double var(--INTERFACE_BORDER_COLOR);
}
.cloudBox {
    display: flex;
    flex-direction: column;
    padding: 0 10px 10px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
.cloudRow {
    flex: 0 0 auto;
    position: relative;
    overflow: hidden;
}
.cloudMinimize .cloudBox {
    padding: 0;
}

/* //////////// ------- Содержание:
   //////////// ECS ------- Мои обсуждения
   //////////// ecsCloud ------- Облака для ECS
   //////////// ecsVideo ------- Групповые видеозвонки
   //////////// ecsUnread ------- Непрочитанные сообщения (captionbar, opened, topline)
   //////////////////////////////////////////////////////////// */

/* //////////// ECS ------- Мои обсуждения ------- ///////
      .1 общие стили - каркасы
      .2 поля ввода
      .3 списки тем / участников
      .4 болталка
      .5 пути к типам файлов, приложенных к сообщению ECS и прочие иконки для файлов

   ecsMain - неконтекстное обсуждение
   ecsContext - контекстное обсуждение
   ecsThemes - список тем/участников

   ecsTopline - заголовочная область неконтекстного обсуждения
   ecsHeader - заголовочный контент

   ecsAvatar - определение аватара
   + (еще в cloudCard, captionbar)
   ecsStatus - круг доступности (user online)
   - ecsStatusDnd - круг недоступности
   - ecsStatusAway - круг желтый
   - ecsStatusBlocked - круг серый

   ecsSettings - ссылка "Настройки"
   pressImg + disabled

   ecsOnAir - идет видеозвонок (меняется иконка камеры)
   ecsNotifyHigh - оповещать обо всех новых сообщениях
   ecsNotifyMedium - не беспокоить
   ecsNotifyOff - оповещать только о новых сообщениях, адресованных мне

   ecsSearch - контейнер поля поиска :
   - ecsSearchShow - показать поле поиска в неконтекстных обсуждениях

   ecsEdit - label поля ввода
   - ecsEditLine - наличие у поля подчеркивания
   - focus - фокусирование подчеркивания
   > ecsEditField - оболочка вокруг инпута с фокусной линией

   ecsSearchHighLight, ecsSearchCurrentHighLight - подсветка поиска в чате

   ecsList - список тем
   > ecsListItem :
     - select - активная тема
     - болд - непрочитанная тема
     > ecsListItemBox - название темы

   ecsMembersGroup - группа участников видеозвонка
   ecsMembersCount - количество участников видеозвонка
   ecsMembers - список участников неконтекстных обсжудений
   > ecsMembersItem - один участник

   ecsChat + ecsChatBlock - чат
   ecsChatDate - дата
   ecsChatTyping - надпись "Печатает..."

   ecsChatItem - одно сообщение :
   - ecsChatItemOwner - собственное сообщение
   - ecsChatItemJoined - присоединенное сообщение
   - ecsChatItemService - системное сообщение
   - ecsMessageSelect - выбранное сообщение
   - ecsMessageEdit - редактируемое сообщение
   - ecsMessageBlink - переход к сообщению по ссылке

   ecsChatWho - блок "автор"
   ecsChatWhom - строка "кому" контекстных обсуждений
   > ecsChatName - одно имя
     - select - "я"

   ecsChatBox - текст сообщения

   > ecsChatInfo - время и иконки :
     - escHasNotLoadedAttachment - процесс загрузки файлов
     > ecsChatInfoIco - иконка если есть

   > ecsChatText - текст сообщения
     > ecsChatTextDeleted - удаленное сообщение
     > ecsChatBR - разделитель между текстом и аттачами
     > ecsChatFile - аттач
     > ecsChatActions + ecsChatAction - какие-то экшены (ссылки)

   ecsAnswer - область ответа контекстного обсуждения
   > ecsMessage - поле ответа
     - ecsMessageEdit - поле ответа в режиме редактирования

классы, названия которых используются для js, но не нужны для лишнего css :
   ecsChatMember - участник в новых участниках
   ecsChatMore - ссылка "Показать еще"
   ecsChatTextLink - ссылки

   //////////////////////////////////////////////////////////// */

/* ------------ ECS ------- .1 общие стили - каркасы */
/* классы для истории - вставить при необходимости */
/* перечисления с общими характеристиками */
.ecsThemes, .ecsMain, .ecsContext {font-size: var(--INTERFACE_FONT_SIZE); color: var(--INTERFACE_COLOR); position: absolute; line-height: 1.2; z-index: 0;}
.ecsHeader > div, .framePress, .ecsButton, .cloud .ecsEdit, .ecsSearch, .ecsSearch .ecsEdit {height: var(--INTERFACE_PRESS_HEIGHT);}
.ecsHeader .pressImg, .pressImg.spriteECS {background-size: auto;}
.ecsHeader .disabled.pressImg {opacity: 0.5; z-index: -1;}
.ecsChatDate, .ecsChatBox, .ecsChatName {-moz-user-select: text; -webkit-user-select: text;}
.ecsChatItemService .ecsChatText, .ecsChatTyping, .ecsChatTextDeleted {color: var(--INTERFACE_BG_4); font-style: italic;}
/* каркас */
.ecsContext {border-width: 0 8px; border-style: solid; border-color: transparent;}
.ecsContext .ecsHeader {border-bottom: 1px solid var(--INTERFACE_BG_2); position: absolute; top: 0; right: 0; left: 0; z-index: 2;}
.ecsAvatar {display: inline-flex; justify-content: flex-end; align-items: flex-end; background-repeat: no-repeat; background-position: center top; background-size: cover; border-radius: 50%; width: 1em; height: 1em;}
/* стили для состояния пользователя на аватаре, cloudCard, captionbar */
.ecsStatus:before {content: ''; display: inline-block; flex: 0 0 auto; background-color: #64C846; background-clip: padding-box; border: 2px solid #FFF; border-radius: 50%; width: 0.2em; height: 0.2em; min-width: 6px; min-height: 6px;}
.ecsStatusDnd:before {background-color: var(--INTERFACE_COLOR_RED);}
.ecsStatusAway:before {background: #FADB1F;}
.ecsStatusBlocked:before {background: var(--INTERFACE_BG_5);}
.captionbar .ecsStatus:before, #DnDBtn:before {border-width: 1px; width: 7px; height: 7px;}
.captionbar .ecsStatus:not(.ecsStatusDnd):before {content: none;}
.captionbar .ecsStatus:before {margin: 0 4px;}
#DnDBtn {margin-right: -0.3em; margin-left: -0.3em;}
#DnDBtn:before {width: 0.6em; height: 0.6em; margin: 0 0.6em;}
#DnDBtn:after {content: ''; display: inline-block; flex: 0 0 auto; border-width: 0.225em 0.225em 0; border-style: solid; border-color: var(--INTERFACE_COLOR) transparent; margin: 0 0.3em;}
/*  */
.ecsTopline {position: absolute;}
.ecsTopline .toplineBox {font-size: 1.3em; font-weight: bold; margin: 0 0.3em;}
/* кнопка "настройки" */
.ecsSettings {height: 1.2em; margin: 0.6em 0 0.3em; overflow: hidden;}
.ecsSettings * {margin: 0 0.225em;}
/* кнопки "камера - камера с плюсом", "колокольчики" */
.ecs-base.ecsOnAir a[data-cmd="startVideo"],
.ecs-base:not(.ecsOnAir) a[data-cmd="addVideo"] {display: none;}
.ecsNotifyHigh use:nth-child(2), .ecsNotifyHigh use:nth-child(3),
.ecsNotifyMedium use:first-child, .ecsNotifyMedium use:nth-child(3),
.ecsNotifyOff use:first-child, .ecsNotifyOff use:nth-child(2) {display: none;}
/* подсветка фона при поиске */
.ecsSearchHighLight{background-color: #ffad03;}
.ecsSearchCurrentHighLight{background-color: #88ff00;}
/* /end ------- ECS ------- .1 общие стили - каркасы */
/* ------------ ECS ------- .2 поля ввода  */
/* поле ввода */
.ecsEdit {display: flex; align-items: center; color: var(--INTERFACE_COLOR); fill: var(--INTERFACE_COLOR); position: relative; width: 100%; height: 1.8em; z-index: 0;}
.ecsEdit > * {margin: 0 0.15em;}
.ecsEdit i {fill: inherit;}
.ecsEditField {position: relative; width: 100%;}
/* состояния подчеркивания и фокуса */
.ecsEditLine:before {content: ''; border-top: 1px solid var(--INTERFACE_BG_2); position: absolute; top: 100%; right: 0; left: 0; margin-top: -2px;}
.focus.ecsEdit:before {border-top-width: 2px; border-color: var(--ACTIVITY_COLOR_BACKGROUND);}
.cardBig .ecsEditLine:before {border-top-width: 1px;}
.cardBig .ecsEditLine:not(.select):before {content: none;}
/* окно вставки изображения */
.cloudPastedImage .ecsEdit:after {content: '.png'; position: relative;}
/* отсутствие подчеркивания и фокуса */
.ecsContext .ecsHeader .ecsEdit:before {content: none;}
/* открывашка для заголовка */
.ecsTopline .ecsSearch {display: none; flex: 0 1 auto; width: 265px; min-width: 8em;}
.ecsSearchShow {display: none;}
.ecsSearchShow + .ecsSearch  {display: inline-block;}
/* области ответов */
.ecsAnswer .ecsEdit {width: auto; margin-right: var(--ECS_PADDING); margin-left: var(--ECS_PADDING);}
.ecsAnswer .ecsMessage {padding: 0 var(--ECS_PADDING); box-sizing: border-box;}
/* цвет подсказки ввода */
.ecsMessage textarea::-moz-placeholder {color: var(--INTERFACE_COLOR);}
.ecsMessage textarea::-webkit-input-placeholder {color: var(--INTERFACE_BG_4);}
.ecsMessage textarea:-ms-input-placeholder, .ecsEditField .editInput:-ms-input-placeholder {color: #A1A1A1;}
/* конструкция для троеточия только для placeholder */
.ecsEditField[placeholder]:before {content: attr(placeholder); color: var(--INTERFACE_BG_4); position: absolute; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.ecsEditField .editInput {background: var(--INTERFACE_BACKGROUND_COLOR); position: relative; height: auto;}
.ecsEditField .editInput:placeholder-shown {background: transparent;}
.ecsEditField .editInput::-moz-placeholder {color: transparent;}
.ecsEditField .editInput::-webkit-input-placeholder {color: transparent;}
/* кнопки ответить/редактировать/не применять поля ввода */
.ecsMessage i.disabled {position: relative; opacity: 0.4; z-index: -1;}
.ecsMessage i.disabled, .ecsMessage .iEcsEditCancel {display: none;}
.ecsMessageEdit i.disabled, .ecsMessageEdit .iEcsEditCancel {display: block;}
/* /end ------- ECS ------- .2 поля ввода */
/* ------------ ECS ------- .3 списки тем / участников */
.ecsList {overflow-y: auto;}
.ecsListItem  {width: 100%; margin: 0.3em -0.3em; padding: 0.3em; box-sizing: border-box;}
.ecsListItem:first-child {margin-top: 0;}
.ecsListItem:before {content: ''; display: inline-block; width: 0.3em;}
.ecsListItemBox {padding-right: 0.6em; padding-left: 0.6em; white-space: pre; overflow: hidden; text-overflow: ellipsis; line-height: 1.2em;}
.ecsListItemHint {display: block; opacity: 0.6;}
.select.ecsListItem {background-color: var(--ACTIVITY_COLOR_BACKGROUND); color: var(--ACTIVITY_COLOR_TEXT);}
/*  */
.ecsMembers {overflow-y: auto;}
.ecsMembersItem {padding: 0.3em 0.15em;}
.ecsMembersItem > * {margin: 0 0.15em;}
.ecsThemes .ecsMembersItem:not(:HOVER) i {display: none;}
.ecsThemes .ecsMembersItem:HOVER {background-color: var(--INTERFACE_BG_2); cursor: pointer;}
.ecsThemes .ecsMembersItem .ecsListItemBox {font-size: 0.8em;}

/* группа списка участников (приглашение в видеозвонок) */
.ecsMembersGroup .ecsMembersItem:first-child {font-weight: bold;}
.ecsMembersGroup .ecsMembersItem:only-child {display: none;}
.ecsMembersGroup .ecsMembersItem + .ecsMembersItem:before {content: ''; display: block; flex: 0 0 auto; width: 24px;}
/* счетчик */
.ecsMembersCount {border-top: 1px solid var(--INTERFACE_BG_4); padding-top: 4px;}
.ecsMembersCount span {color: var(--INTERFACE_COLOR);}
/* /end ------- ECS ------- .3 списки тем / участников */
/* ------------ ECS ------- .4 болталка */
.ecsMain .ecsChat, .ecsMain .ecsAnswer {padding: 0 0 0 50px;}
html[dir=rtl] .ecsMain .ecsChat, html[dir=rtl] .ecsMain .ecsAnswer {padding: 0 50px 0 0;}
.ecsChat, .ecsAnswer {position: relative; width: 100%; max-width: 780px; overflow-y: auto; box-sizing: border-box;}
.ecsContext .ecsChat {margin-top: 32px;}
.ecsChatBlock {position: relative; width: 100%; padding-bottom: 26px; z-index: 0;}
/* 108px состоят из:
 * - ECS.UI.PanelBase.splitterOffsetTop (100px)
 * - ECS.UI.Splitter.size (8px) */
.ecsAnswer {max-height: calc(100% - 108px); overflow: inherit;}
/* надпись "Печатает..." */
.ecsChatTyping {position: absolute; right: var(--ECS_PADDING); bottom: 2px; left: var(--ECS_PADDING);}
.ecsChatTyping:before {content: ''; flex: 0 0 auto; display: inline-block; background: url(images/_typing.68e718ca31250ca8b894137f365cb1af.svg) no-repeat 0 center; width: 18px;}
.ecsChatTyping div {margin: 0 6px;}
/* дата */
.ecsChatDate {background-color: var(--INTERFACE_BACKGROUND_COLOR); color: var(--INTERFACE_BG_4); position: sticky; top: 0; width: 100%; padding: 0 24px; margin: 24px -48px -12px; line-height: 1.2rem; z-index: 1; box-shadow: 0 -8px 16px 0 var(--INTERFACE_BACKGROUND_COLOR)}
.ecsChatDate:before {content: ''; display: block; border-top: 1px solid var(--INTERFACE_BG_05); width: 100%; margin: 0 -24px;}
.ecsChatDate div {background: var(--INTERFACE_BACKGROUND_COLOR); padding: 0 4px;}
.ecsChatTyping + .ecsChatDate {margin-top: 0;}

/* блок сообщения */
.ecsChatItem {border-top: 16px solid transparent; position: relative; margin-top: 16px; padding: 0 var(--ECS_PADDING);}
.ecsMain .ecsAvatar {margin: 0 -56px; position: absolute;}
/* кто-кому */
.ecsChatWho {margin: 0 0 0.6em; line-height: 1.2rem;}
.ecsContext .ecsChatWho {min-height: 40px; margin-right: 4px; margin-left: 4px;}
.select.ecsChatName {color: #f38000;}
.ecsChatWhom {color: var(--INTERFACE_BG_4);}
.ecsChatWhom:before {content: ' \2192\A0';}
html[dir=rtl] .ecsChatWhom:before {content: ' \2190\A0';}
.ecsOwner .ecsChatWhom:before {content: attr(data-title) ' \2192\A0';}
html[dir=rtl] .ecsOwner .ecsChatWhom:before {content: attr(data-title) ' \2190\A0';}
.ecsOwner .ecsChatName.bold {color: var(--INTERFACE_ACCENT_COLOR);}
/* Установка контента для стилей описания имени пользователя. Иначе имя пользователя грузится
 чуть дольше, чем текст сообщений и получаем баги скроллирования */
.select.ecsChatName {
    color: #f38000;
}
.ecsChatName:empty:before {
    content: '\A0';
}

/* ecsChat + ecsChatBlock - чат
     - ecsChatF2F - доп.класс для обсуждения один-на-один */
.ecsChatF2F [data-cmd="reply"] {display: none;}

/* содержимое */
.ecsChatBox {padding: 6px; margin: -6px; transition: .5s; -webkit-transition: .5s; -moz-transition: .5s;}
.ecsMessageBlink .ecsChatBox {background-color: var(--INTERFACE_BG_2);}
.ecsMessageEdit .ecsChatBox {outline: 1px solid var(--INTERFACE_ACCENT_COLOR);}
.ecsMessageSelect .ecsChatBox {outline: 1px solid var(--INTERFACE_BG_3);}
/* колонка с тех.информацией */
.ecsChatInfo {flex-direction: row-reverse; flex: 0 0 auto; align-items: center; align-self: baseline; color: var(--INTERFACE_BG_4); min-width: 60px;}
.ecsChatInfo .fs-8 {margin: 0 0.3em;}
/* контент */
.ecsChatText, .ecsChatText span {max-height: 1000000px;}
.ecsChatText {position: relative; width: 100%; word-wrap: break-word; overflow: hidden; cursor: text;}
.ecsChatText span[data-depth] {display: flex; align-items: stretch;}
.ecsChatText span[data-depth] i {order: -1; border-left: 2px solid var(--INTERFACE_LINK_COLOR); margin: 0 3px;}
.ecsChatText span[data-depth] span {flex: 1 1; min-height: 1.2em; white-space: pre-wrap; word-wrap: break-word; word-break: break-word;}

.ecsChatText span[data-depth]:not([data-depth="0"]) {font-style: italic; color: var(--INTERFACE_COLOR); max-width: 100%; margin: 8px -3px;}
.ecsChatText span[data-depth]:not([data-depth="0"]):first-child {margin-top: 0;}
.ecsChatText span[data-depth]:not([data-depth="0"]) + span[data-depth]:not([data-depth="0"]) {margin-top: -8px;}

.ecsChatText span[data-depth]:not([data-depth="0"]):before {content: ''; margin: 0 2px;}

.ecsChatFile {display: inline-block; align-self: flex-start; max-width: 100%; margin-top: 0.3em; cursor: pointer;}
.ecsChatFile span {pointer-events: none;}
.ecsChatFile:first-child {margin-top: 0;}
.ecsChatBR + .ecsChatFile {margin-top: 0.6em;}
.escHasNotLoadedAttachment + .ecsChatText .ecsChatFile {color: var(--INTERFACE_BG_4); cursor: default;}
/* ecsChatActions */
.ecsChatActions {word-spacing: 1em;}
.ecsChatAction {word-spacing: normal;}
/* присоединенное сообщение без аватара */
.ecsChatItemJoined.ecsChatItem {margin-top: 0;}
.ecsChatItemJoined .ecsChatWhoShow, .ecsChatItemJoined .ecsAvatar {display: none;}
/* /end ------- ECS ------- .4 болталка */
/* ------------ ECS ------- .5 пути к типам файлов, приложенных к сообщению ECS и прочие иконки для файлов */
.ecsChatFile:before {content: ''; display: inline-block; background-size: contain; width: 1.2em; height: 1.2em; vertical-align: middle;}
.ecsChatFile span {margin: 0 4px; vertical-align: middle;}
.iFileArchive:before {background-image: url(images/_fileTypeArchive.f62160d057cfe59d855cf11be6a5e197.svg);}
.iFileAudio:before {background-image: url(images/_fileTypeAudio.f3eb3f08dcd8fdbaadd41e9be8bcef75.svg);}
.iFileEPF:before {background-image: url(images/_fileTypeEPF.3c7cd2120ab0bcd1141241e76976f577.svg);}
.iFileERF:before {background-image: url(images/_fileTypeERF.7aeb55b8ed974d2dd57a93a4a7687998.svg);}
.iFileExcel:before {background-image: url(images/_fileTypeExcel.21aafc15fc5236efa7f9bfd9e2b561b6.svg);}
.iFileGEO:before {background-image: url(images/_fileTypeGEO.4ac9d9b6b5fec245a7a2865942ad48e9.svg);}
.iFileGRS:before {background-image: url(images/_fileTypeGRS.5396c40ebce2f20de71fd8463049c447.svg);}
.iFileHTML:before {background-image: url(images/_fileTypeHTML.822dec03cd6a9aeb2ede6e28f890abb7.svg);}
.iFileImage:before {background-image: url(images/_fileTypeImage.65f86f8106b2d735370146a8458aa1ef.svg);}
.iFileMXL:before {background-image: url(images/_fileTypeMXL.9120dff1cd81cd61503e5c36fa1a036d.svg);}
.iFileODC:before {background-image: url(images/_fileTypeODC.1cb5ed3bde335b9d4259b4be3453a804.svg);}
.iFileODF:before {background-image: url(images/_fileTypeODF.6e7586935459d397b0cfd35a4c0ed8e5.svg);}
.iFileODG:before {background-image: url(images/_fileTypeODG.28928e8c89b05d5cd003a840c05993d7.svg);}
.iFileODS:before {background-image: url(images/_fileTypeODS.f7f4b26f0200736863704d343f0268eb.svg);}
.iFileODT:before {background-image: url(images/_fileTypeODT.179138622cd821022e97e942a359e93f.svg);}
.iFilePDF:before {background-image: url(images/_fileTypePDF.4bbaa5ecbc1b377340ec128aefedab54.svg);}
.iFilePowerPoint:before {background-image: url(images/_fileTypePowerPoint.cffcd742488899742b823280b48fb158.svg);}
.iFileText:before {background-image: url(images/_fileTypeText.1381fa396bdd4a6f3bc838c310b886e6.svg);}
.iFileUnknown:before {background-image: url(images/_fileTypeUnknown.156c1d085c28a775049433c7e73e9f09.svg);}
.iFileVideo:before {background-image: url(images/_fileTypeVideo.7c2091e696d3f6bd0df2a1291d6e5b5a.svg);}
.iFileWord:before {background-image: url(images/_fileTypeWord.730d512b3de5ae5642ac10074b29d157.svg);}
/* /end ------- ECS ------- .5 пути к типам файлов, приложенных к сообщению ECS и прочие иконки для файлов */
/* /end /////// ECS ------- //////////////////////// */

/* //////////// ecsCloud ------- Облака для ECS ------- ///////
      .1 визитка - logout & ecs
      .2 редактирование аватара

   !!!!!!! Внимание: - (ecs.gss, выше) #DnDBtn:before - не забывать про статус юзера

   cloudPastedImage - вставка изображения

   cloudCard - визитка - logout & ecs
   - cardBig - logout
   - cardSmall - ecs
   cardBox - контент
   > ecsAvatar - аватар (общий класс)
   > cardInfo - текст
   cardLine - линия выхода (logout)
   logoutExitIco - иконка ссылки "завершить работу"

   avaEditRightButton
   avaEdit
   avaEditArea - область редактирования
   - avaEditAreaNoResize -
   avaEditRound - круг
   avaEditMove - перемещение
   avaEditSize - область ресайза
   - avaEditSizeTL - top-left
   - avaEditSizeTC - top-center
   - avaEditSizeTR - top-right
   - avaEditSizeRC - right-center
   - avaEditSizeBR - bottom-right
   - avaEditSizeBC - bottom-center
   - avaEditSizeBL - bottom-left
   - avaEditSizeLC - left-center

   //////////////////////////////////////////////////////////// */
/* ------------ ecsCloud ------- .1 визитка - logout & ecs */
.cloudCard {min-width: 350px; overflow: hidden;}
.cardBig {max-width: 400px;}
.cardLine {fill: var(--INTERFACE_COLOR); border-top: 1px solid var(--INTERFACE_BG_2); position: relative; padding: 2px;}
.cardBig .cardLine {background: var(--INTERFACE_BG_1); padding: 0.8em 1.2em;}
.cardBox .ecsAvatar {margin: 6px;}
.cardInfo {padding: 6px;}
.cloudCard #LogoutClose {margin: -6px;}
/*.cardBig span {position: relative; margin-right: 0.3em; margin-left: 0.3em;}*/
/* смена ссылки на поле ввода */
.cardBig .ecsEdit:not(.select) .ecsEditField {width: 0; overflow: hidden;}
.cardBig .select.ecsEdit a {display: none;}
/*  */
.cardInfo div[id] {position: relative;}
.cardInfo .i16 + * {margin: 0 0.3em;}
.cardInfo *[data-content]:empty:after {content: attr(data-content);}
.cardSmall .cardInfo *[data-content]:empty:after {content: attr(data-content); color: var(--INTERFACE_BG_4);}
.cardBig .cardInfo *[data-content]:empty:after {color: var(--INTERFACE_LINK_COLOR); text-decoration: underline;}
.cardBig .cardInfo a:not(:empty) {color: var(--INTERFACE_COLOR);}
/* /end ------- ecsCloud ------- .1 визитка - logout & ecs */
/* ------------ ecsCloud ------- .2 редактирование аватара */
.avaEdit {position: relative; width: 250px; height: 250px; overflow: hidden;}
.avaEditArea {position: absolute; padding: 1px;}
.avaEditAreaNoResize .avaEditRound {border-width: 0;}
.avaEditAreaNoResize i {display: none;}
.avaEditRound {border: 1px dashed var(--INTERFACE_BACKGROUND_COLOR); border-image: url({{base}}e1csys/mngsrv/_focus_ecs.png?sysver={{version}}) 1 1 1 1 repeat repeat; overflow: hidden; box-shadow: 0 0 0 500px var(--INTERFACE_BG_5);}
.avaEditRound div {border-radius: 50%; width: 100%; height: 100%; box-shadow: 0 0 0 47px var(--INTERFACE_BG_5);}
.avaEditRightButton * {width: 100%;}
.avaEditRightButton div + div {margin-top: 8px;}
/* ресайз */
.avaEditMove {position: absolute; top: 4px; right: 4px; bottom: 4px; left: 4px; cursor: move;}
.avaEditSize {border: 4px solid transparent; font-size: 0; position: absolute;}
.avaEditSize:before {content: ''; display: inline-block; background: var(--INTERFACE_BACKGROUND_COLOR); width: 5px; height: 5px;}
.avaEditSizeTL, .avaEditSizeTC, .avaEditSizeTR {top: -6px;}
.avaEditSizeTR, .avaEditSizeRC, .avaEditSizeBR {right: -6px;}
.avaEditSizeBR, .avaEditSizeBC, .avaEditSizeBL {bottom: -6px;}
.avaEditSizeTL, .avaEditSizeBL, .avaEditSizeLC {left: -6px;}
.avaEditSizeTC, .avaEditSizeBC {left: 50%; margin-left: -6px;}
.avaEditSizeRC, .avaEditSizeLC {top: 50%; margin-top: -6px;}
.avaEditSizeTL, .avaEditSizeBR {cursor: se-resize;}
.avaEditSizeTR, .avaEditSizeBL {cursor: sw-resize;}
.avaEditSizeTC, .avaEditSizeBC {cursor: n-resize;}
.avaEditSizeRC, .avaEditSizeLC {cursor: w-resize;}
/* /end ------- ecsCloud ------- .2 редактирование аватара */
/* /end /////// ecsCloud ------- //////////////////////// */

/* //////////// ecsVideo ------- Групповые видеозвонки ------- ///////
      .1 общие стили

   ecsIncoming - окно входящего звонка
   screenSharing - демонстрация экрана
   cloudMinimize - минимайз окна видеозвонка

   ecsVideo - окно видеозвонка
   ecsVideoText - служебный текст посреди окна вместо звонка
   ecsVideoPress - главные кнопки

   ecsVideoChat - оболочка видео чата (мозаика)
   ecsVideoUsers (ecsVideoList + videoMine) - контейнер правой части с участниками
   ecsVideoList - оболочка списка участников:
   videoList - список участников
   videoItem - контейнер для юзера в списке (используется для группировки в js списка в правильном порядке):
   - videoItemOnline - группа с видео
   - videoItemNoVideo - группа с нет видео
   - videoItemPending - группа соединение
   - videoItemRejected - группа сбросили

   videoMine - мое видео
   - videoMineNone - отсутствие моего видео

   videoUser - участник:
   - videoUserOff - состояние с аватаром, когда нет еще видео
   - videoUserSolo - один участник с одним видео - отменяет курсоры
   videoUserName - имя участника
   videoUserStatus - статус + крестик:

   - videoStatusPending .spriteECS - соединение
   - videoStatusNoVideo .spriteECS - нет камеры
   - videoStatusRejected .spriteECS - сброшенный звонок
   - videoStatusDiscarded .spriteECS - сброшенный, потому что нет оборудования никакого
   - videoStatusQualityAverage .spriteECS - желтое соединение
   - videoStatusQualityBad .spriteECS - красное соединение
   - videoStatusQualityGood .spriteECS - (пустое) зеленое соединение
   - videoStatusScreenSharing .spriteECS - демонстарция экрана

   mixer - стили для микрофона

   //////////////////////////////////////////////////////////// */
/* ------------ ecsVideo ------- .1 общие стили */
/*  */
.ecsVideoChat, .ecsVideoUsers, .ecsVideoList, .videoList, .videoItem {position: relative;}
.ecsVideoPress, .ecsVideo video, .videoUser, .videoUserName, .videoUserStatus, .videoMine, .videoMine .videoUser {position: absolute;}
.videoUser, .videoMine, .videoItem:not(:empty) {width: 9em; height: 6.75em;}
.videoItem:empty {width: 0;}
.ecsVideo video {width: 100%; height: 100%;}

/* окно видеозвонка */
.ecsVideo {color: #FFF; background: #1F1F1F url(images/_conferenceBack.e10db5e34274d5f1c9a4cfd0e1ac59b4.svg); background-size: cover;}
/* служебный текст посреди окна вместо звонка */
.ecsVideoText:before {content: attr(data-content); font-size: 1.3em; text-align: center;}
.ecsVideoText div {display: none;}
/* главные кнопки */
.ecsVideoPress {border-width: 0.3em 0; border-style: solid; border-color: transparent; width: 100%; max-height: 3em; bottom: 0; overflow: hidden; z-index: 5; pointer-events: none;}
.ecsVideoPress span {margin: 0 0.3em; pointer-events: auto;}
/* оболочка списка участников */
.ecsVideoUsers {opacity: 1; z-index: 2;}
.ecsVideoList {background-color: #333; overflow: hidden; max-height: 100%;}

/* один участник */
.videoUser {border: 1px solid #333; margin: 0 100%; text-align: center; box-sizing: border-box;}
.videoUserName {padding: 0.3em; right: 0; left: 0;}
.videoUser:not(.videoUserOff) .videoUserName {background: var(--ECS_VIDEO_BACKGROUND_TRANSPARENT);}
.videoUserStatus {margin: 0.3em;}
.ecsVideoList .videoUserName {font-size: 0.8em;}
.ecsVideoList .videoUserStatus {top: 0; right: 0; left: 0;}

/* сложность появления имени одного участника */
.videoUserName, .videoChat .videoStatusScreenSharing:only-child .videoUserName {opacity: 0;}
.videoUserOff .videoUserName, .videoUser:HOVER .videoUserName,
.videoChat .videoStatusScreenSharing:only-child .videoUserName:HOVER {opacity: 1;}

/* состояние с аватаром, когда нет еще видео */
.videoUserOff video, .videoUser:not(.videoUserOff) .ecsAvatar {display: none;}

/* мое видео */
.videoMine {bottom: 0; z-index: 3;}
.videoMineNone {display: none;}
.videoMine:not(.videoMineNone) + .ecsVideoList {max-height: calc(100% - 6.75em);}
.videoMine .videoUser {margin: auto;}
.videoMine video {right: 0; transform: scale(-1, 1);}

/* список участников */
.videoItem:HOVER .videoUser {border-color: var(--INTERFACE_COLOR_ORANGE);}
.videoItem .videoUser {margin: 0;}/* а почему тут нет border-color: #000; */
.videoItem video {top: 0; left: 0;}
.videoItem .videoUserName {bottom: 0;}
.videoUser:not(.videoStatusPending):not(.videoStatusRejected):not(.videoStatusDiscarded) .videoRemoveConferee {display: none;}

/* плюшки на видео в списке */
.videoStatusRejected, .videoStatusDiscarded {background: #462826;}

/* главное окно (мозаика) */
.videoChat {font-size: var(--INTERFACE_FONT_SIZE); min-width: 100%; min-height: 100%;}
.videoChat .videoUser {display: flex; border-width: 0.15em; border-color: transparent;}
.videoChat video, .videoChat canvas {align-self: center; max-width: 100%; max-height: 100%;}
.videoChat .videoUserName {top: 0; padding-right: 1.8em; padding-left: 1.8em;}

/* демонстрация экрана - !!!!! - перенесено в desktop.css
.videoStatusScreenSharing:after {content: ''; flex: 1 1 100%;}
.screenSharing .ecsVideoUsers:not(:HOVER), .screenSharing .ecsVideoPress:not(:HOVER) {opacity: 0;}
.screenSharing .ecsVideoUsers {position: absolute; top: 0; bottom: 0; width: 4.5em; z-index: 6;}
.screenSharing .ecsVideoPress {background: var(--ECS_VIDEO_BACKGROUND_TRANSPARENT); bottom: -0.8em; pointer-events: auto;}
.screenSharing .ecsVideoUsers:HOVER {width: 9em;}
.screenSharing .ecsVideoPress:HOVER {bottom: 0;}
.screenSharing .videoChat video {align-self: flex-start; position: relative; max-width: 9em; max-height: 6.75em;}
.screenSharing .videoChat video:not(:HOVER) {opacity: 0.5;}*/

/* окно входящего звонка */
.ecsIncoming {padding: 0 0.15em 0.15em;}
.ecsIncoming .ecsVideoPress {background: var(--INTERFACE_BG_05); position: relative;}
.ecsIncoming .ecsVideoPress span {margin: 0 1.05em;}
.ecsIncoming .iPressRound:before {opacity: 1;}
.ecsIncoming .fs-9 {line-height: 1.8em;}

/* отображение доступности элементов для Minimize */
.cloudMinimize .ecsVideoPress, .cloudMinimize .ecsVideoUsers {display: none;}
.cloudMinimize .ecsVideo:not(.ecsVideoText):HOVER .ecsVideoPress {display: flex;}
.cloudMinimize [data-cmd~=addUser],
.cloudMinimize [data-cmd~=openConv],
.cloudMinimize [data-cmd~=desktopSharing] {display: none;}
.cloudMinimize .ecsVideoChatBox {width: 100% !important; height: 100% !important;}
.cloudMinimize .videoChat .videoUser {border-width: 0; cursor: default !important;}
.cloudMinimize .videoUser:first-child {z-index: 1;}

/* курсоры */
.videoList .videoUser:not(.videoUserOff), .videoChat .videoUser:not(.videoUserSolo) {cursor: url(images/_confereeZoomIn.6c0e001a7dc6ad713f236eb5ff3a0de4.cur), default;}
.videoChat .videoUser:only-child:not(.videoUserSolo) {cursor: url(images/_confereeZoomOut.c11469b15560db461ef02744c4bdc851.cur), default;}
.screenSharing .videoChat .videoUser {cursor: not-allowed !important;}
/* анимация */
.ecsVideoUsers, .ecsVideoPress {transition: width 0.5s, bottom 0.5s, opacity 0.5s; -webkit-transition: width 0.5s, bottom 0.5s, opacity 0.5s; -moz-transition: width 0.5s, bottom 0.5s, opacity 0.5s;}

.videoUser, .videoItem, .videoItem span {transition: width 0.5s, height 0.5s, top 0.5s, margin 0.5s; -webkit-transition: width 0.5s, height 0.5s, top 0.5s, margin 0.5s; -moz-transition: width 0.5s, height 0.5s, top 0.5s, margin 0.5s;}

.cloudMinimize .videoUser {transition: all 0s ease 0s; -webkit-transition: all 0s ease 0s; -moz-transition: all 0s ease 0s;}

.videoUserName {transition: opacity 0.5s; -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; transition-delay: 0.2s; -moz-transition-delay: 0.2s; -webkit-transition-delay: 0.2s;}

.mixer {background: radial-gradient(circle, rgba(100,100,100,0.25) 35%, rgb(255, 255, 255) 30%); background-size: 6% auto; position: relative; height: 16px; display: block; overflow: hidden;}

.mixer div {border-radius: 16px; position: absolute; height: 100%; z-index: -1;}

/* /end ------- ecsVideo ------- .1 общие стили */
/* /end /////// ecsVideo ------- //////////////////////// */

/* //////////// ecsUnread ------- Непрочитанные сообщения (captionbar, opened, topline) ------- ///////
      .1 общие стили

   ecsCameraFill - индикация видеозвонка/трансляции экрана в captionbar
   ecsUnread - общий класс для отметки непрочитанных сообщений ECS
   ecsDingDong - колоколящий колокольчик
   ecsNone - отсутствие соединения с сервером в панели открытых
   //////////////////////////////////////////////////////////// */
/* ------------ ecsUnread ------- .1 общие стили */
/* замена иконок колокольчика и камеры/монитора */
a.ecsUnread svg.sNotify, a.ecsDingDong svg.sNotify,
a:not(.ecsUnread) svg.sNotifyFill, a.ecsDingDong svg.sNotifyFill {display: none;}
.ecsScreenSharing .sCameraFill, .ecsCameraFill:not(.ecsScreenSharing) .sMonitor {display: none;}
/* общее оформление для красных кружочков в captionbar (кол-во непрочитанных, не беспокоить, видеозвонок) */
.ecsUnread .flexCenter, .ecsCameraFill:before, .cardDnD:before, .cardDnDOn:before {background-color: red; background-clip: content-box; padding: 1px; box-shadow: 0 0 0 1px rgba(255,255,255,0.75) inset; box-sizing: border-box;}
/* цифры непрочитанных */
.ecsUnread .flexCenter {font-weight: bold; color: var(--INTERFACE_BACKGROUND_COLOR); border-radius: 50%; position: absolute; width: 16px; height: 16px; top: -2px;}
.ecsUnread .flexCenter:before {content: attr(data-title);}
html[dir=ltr] .captionbar .ecsUnread .flexCenter {right: -2px;}
html[dir=ltr] .openedItem .ecsUnread .flexCenter {right: -8px;}
html[dir=rtl] .captionbar .ecsUnread .flexCenter {left: -2px;}
html[dir=rtl] .openedItem .ecsUnread .flexCenter {left: -8px;}
/*  */
.captionbar .ecsUnread:before, .ecsCameraFill:before, .ecsRoundRed:before {content: ''; border-radius: 50%; position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
.ecsUnread:before {background: var(--INTERFACE_COLOR_GREEN); box-shadow: 0 0 0 1px rgba(0,255,119,0.5) inset;}
.ecsDingDong:before {background-image: url({{base}}e1cib/convertPicture?sysver={{version}}&url=e1csys%2Fmngsrv%2F_notifyUnreadDingDong.zip&scale=100&interfaceVar=16); background-position: center;}
/* использование парных svg в бабликах обсуждений */
.ecsRoundRed:before {background: var(--INTERFACE_COLOR_RED); box-shadow: 0 0 0 1px rgba(255,255,255,0.5) inset;}
#ecsPanelButton:not(.ecsNone) use + use, .topline .ico:not(.ecsUnread) use + use {display: none;}
.ecsUnread {fill: var(--INTERFACE_COLOR_GREEN) !important;}
.ecsNone {fill: var(--INTERFACE_BG_4);}
/* /end ------- ecsUnread ------- .1 общие стили */
/* /end /////// ecsUnread ------- //////////////////////// */

/* //////////// resize -------  Ресайз ------- ///////
      .1 общие стили

   resize - общий класс для элемента ресайза:
   доп.класс положения:
   - resizeTL - Top Left
   - resizeTC - Top Center
   - resizeTR - Top Right
   - resizeCR - Center Right
   - resizeBR - Bottom Right
   - resizeBC - Bottom Center
   - resizeBL - Bottom Left
   - resizeCL - Center Left
   //////////////////////////////////////////////////////////// */
/* ------------ resize ------- .1 общие стили */
.resize {
    display: inline-block;
    position: absolute;
    min-width: 10px;
    min-height: 10px;
}

.resizeTL, .resizeTC, .resizeTR {
    top: -4px;
}
.resizeTR, .resizeCR, .resizeBR {
    right: -4px;
}
.resizeBR, .resizeBC, .resizeBL {
    bottom: -4px;
}
.resizeTL, .resizeBL, .resizeCL {
    left: -4px;
}
.resizeTC, .resizeBC {
    left: 6px;
    right: 6px;
}
.resizeCR, .resizeCL {
    top: 6px;
    bottom: 6px;
}

.resizeTL {
    cursor: nw-resize;
}
.resizeTC {
    cursor: n-resize;
}
.resizeTR {
    cursor: ne-resize;
}
.resizeCR {
    cursor: e-resize;
}
.resizeBR {
    cursor: se-resize;
}
.resizeBC {
    cursor: s-resize;
}
.resizeBL {
    cursor: sw-resize;
}
.resizeCL {
    cursor: w-resize;
}
/* /end ------- resize ------- .1 общие стили */
/* /end /////// resize ------- //////////////////////// */
.flexInlineCenter {display: inline-flex; justify-content: center; align-items: center;}
.flexCenter {display: flex; justify-content: center; align-items: center;}
.flex {display: flex;}
.flex-inline {display: inline-flex;}
.flex-row-reverse {display: flex; flex-direction: row-reverse;}
.flex-column {display: flex; flex-direction: column;}
.flex-wrap {flex-wrap: wrap;}
.flex-ai-start {align-items: flex-start;}
.flex-ai-center {align-items: center;}
.flex-ai-stretch {align-items: stretch;}
.flex-ai-end {align-items: flex-end;}
.flex-as-center {align-self: center;}
.flex-jc-center {justify-content: center;}
.flex-jc-between {justify-content: space-between;}
.flex-jc-end {justify-content: flex-end;}
.flex-0-0-auto {flex: 0 0 auto;}
.flex-0-0-100 {flex: 0 0 100%;}
.flex-0-1-auto {flex: 0 1 auto;}
.flex-0-1-100 {flex: 0 1 100%;}
.flex-1-0-auto {flex: 1 0 auto;}
.flex-1-0-100 {flex: 1 0 100%;}
.flex-1-1-auto {flex: 1 1 auto;}
.flex-1-1-50 {flex: 1 1 50%;}
.flex-1-1-100 {flex: 1 1 100%;}

.dIB {display: inline-block;}

.color-black {color: #000;}
.color-black-2 {color: #333;}
.color-red {color: var(--INTERFACE_COLOR_RED);}
.color-link {color: var(--INTERFACE_LINK_COLOR);}
.color-gray-7 {color: #A0A0A0;}

.h1 {font-size: 14pt;}
.fs-8 {font-size: 8pt;}
.fs-8MS {font-size: 8pt; font-family: "MS Sans Serif", Arial, Verdana,sans-serif;}
.fs-9 {font-size: 9pt;}
.fs-12 {font-size: 12pt;}
.fs-14 {font-size: 14pt;}
.fs-15 {font-size: 15pt;}
.bold {font-weight: bold;}
.italic {font-style: italic;}

.m-2 {margin: 2px;}
.m-4 {margin: 4px;}
.m-8 {margin: 8px;}
.m-12 {margin: 12px;}
.m-16 {margin: 16px;}
.m-20 {margin: 20px;}
.mt-2 {margin-top: 2px;}
.mt-4 {margin-top: 4px;}
.mt-8 {margin-top: 8px;}
.mt-12 {margin-top: 12px;}
.mt-16 {margin-top: 16px;}
.mt-20 {margin-top: 20px;}
.mt-24 {margin-top: 24px;}
.mr-16 {margin-right: 16px;}
.mr-20 {margin-right: 20px;}
.mlr-10 {margin: 0 10px;}
.p-8 {padding: 8px;}
.p-10 {padding: 10px;}
.p-20 {padding: 20px;}
.pt-8 {padding-top: 8px;}
.plr-8 {padding: 0 8px;}
.pl-20 {padding-left: 20px;}

.taL {text-align: left;}
.taC {text-align: center !important;}
.taR {text-align: right;}

.hidden {overflow: hidden;}
.nowrap {white-space: nowrap;}
.dots {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.noPointerEvents {pointer-events: none;}
.iAM {display: inline-block; margin: -3px 0;}
.underline {text-decoration: underline;}
.pointer {cursor: pointer;}
.hover-line:HOVER {text-decoration: underline; cursor: pointer;}
.hoverLineChild:HOVER * {text-decoration: underline; cursor: pointer;}
.ellipsis {overflow: hidden; text-overflow: ellipsis;}
.line-through {text-decoration: line-through;}
.hyperlink {color: var(--INTERFACE_LINK_COLOR); text-decoration: underline; cursor: pointer;}
/* /end ------- base ------- .1 базовые классы  */
/* ------------ base ------- .2 размеры как бы иконок */
/*.ICompactWeb .zoomI, .zoom85 .zoomI {font-size: 14px;}
.zoomI {font-size: 16px;}
.zoom125 .zoomI {font-size: 20px;}
.zoom150 .zoomI {font-size: 24px;}
.zoom175 .zoomI {font-size: 28px;}
.zoom200 .zoomI {font-size: 32px;}
.zoom300 .zoomI {font-size: 48px;}
.zoom400 .zoomI {font-size: 64px;}

.i12 {width: 12px; height: 12px;}
.i16 {width: 16px; height: 16px;}
.i20 {width: 20px; height: 20px;}
.i24 {width: 24px; height: 24px;}
.i32 {width: 32px; height: 32px;}
.i40 {width: 40px; height: 40px;}
.i64 {width: 64px; height: 64px;}
.i96 {width: 96px; height: 96px;}
.fs16 {font-size: 16px;}
.fs20 {font-size: 20px;}
.fs24 {font-size: 24px;}
.fs32 {font-size: 32px;}
.fs40 {font-size: 40px;}
.fs64 {font-size: 64px;}
.fs96 {font-size: 96px;}*/
/* /end ------- base ------- .2 размеры как бы иконок */
/* ------------ base ------- .3 оформительские классы */
.panelsBack {background-color: #FFF;}
.panelsBorder {border-width: 1px; border-style: solid; border-color: rgba(0,0,0,0.4);}
.shadowPaddings {padding: 0 var(--SHADOW_WIDTH) var(--SHADOW_WIDTH) 0;}
.panelsShadow {-webkit-box-shadow: 2px 2px var(--SHADOW_WIDTH) var(--SHADOW_SPREAD) rgba(0,0,0,var(--SHADOW_ALPHA)); box-shadow: 2px 2px var(--SHADOW_WIDTH) var(--SHADOW_SPREAD) rgba(0,0,0,var(--SHADOW_ALPHA)); }
.panelsShade {-webkit-box-shadow: 0 0 7px 0 rgba(0,0,0,0.2); box-shadow: 0 0 7px 0 rgba(0,0,0,0.2);}
.ePrimaryBack {background-color: var(--PRIMARY_COLOR_BACKGROUND);}
.ePrimaryColor {color: var(--PRIMARY_COLOR_TEXT);}
/* Цвет дополнительной навигации (панель функций) */
.eSecondaryBack {background-color: var(--SECONDARY_COLOR_BACKGROUND);}
.eSecondaryColor {color: var(--SECONDARY_COLOR_TEXT);}
/* Цвет активности (фокус) */
.eActivityBack {background-color: var(--ACTIVITY_COLOR_BACKGROUND);}
.eActivityBack75 {background-color: var(--ACTIVITY_COLOR_BACKGROUND_75);}
.eActivityColor {color: var(--ACTIVITY_COLOR_TEXT);}
.eActivityBorder {border-color: var(--ACTIVITY_COLOR_BACKGROUND);}
/* Цвет акцентирования (зеленый) */
.eAccentBack {background-color: var(--ACCENT_COLOR_BACKGROUND);}
.eAccentColor {color: var(--ACCENT_COLOR_TEXT); fill: var(--ACCENT_COLOR_TEXT);}
/* Цвет важного (дефолтная кнопка) */
.eImportantBack {background-color: var(--IMPORTANT_COLOR_BACKGROUND);}
.eImportantColor {color: var(--IMPORTANT_COLOR_TEXT);}
/* /end ------- base ------- .3 оформительские классы */
/* /end /////// base ------- //////////////////////// */




/*
   main
   - mainMenu
     - head
        - logo
        - currentUser
     - menu
   - mainContent
     - head
     - content
   popupArea
     - popupView
 */

/* -  - */
* {scrollbar-width: thin;}
.wh-100 {width: 100%; height: 100%;}
.ecs-base input {font-size: 1em; width: 100%; height: auto;}
.none {display: none;}
.inline {display: inline;}

/* -  - */
.command {height: var(--INTERFACE_PRESS_HEIGHT);}
.pressDefault {font-weight: bold;}
.ecsThemes {order: 2; position: relative;}
.cloudBox {flex: 1 1 100%; position: relative; overflow: hidden;}
.cloudBox:not(.ecsIncoming) {padding: 0 0.9em 0.675em;}
.ecsHeader {align-items: center; position: relative; height: 2.4em; padding: 0.3em;}

/* -  - */
.ecsList, .ecsThemes .ecsMembersItem, .ecsChatBlock {-webkit-overflow-scrolling: touch;}
.main, .frameMenu, .ecsContent {background-color: var(--INTERFACE_BACKGROUND_COLOR); position: relative; width: 100%; height: 100%; overflow: hidden;}

/* -  - */
.toplineHome, .toplineNav, .toplineCenter, .toplineStar, .cardInfoName {margin-right: 0.3em; margin-left: 0.3em;}

/* -  - */
.head {background-color: var(--HEAD_BACKGROUND_COLOR); border-bottom: 1px solid rgba(0,0,0,0.3); position: relative; height: 2.4em; padding-right: 0.75em; padding-left: 0.75em; line-height: 2.4em; overflow: hidden; box-sizing: border-box;}
.head > * {padding-right: 0.3em; padding-left: 0.3em;}
.frame {flex: 1 1 60%; position: relative; overflow: hidden;}
.frameMenu {order: -1; max-width: 360px; padding-bottom: 0.6em; box-sizing: border-box;}
.frameContent {position: relative; overflow-x: hidden; padding-top: 3.6em; padding-bottom: 0.5em; background-color: var(--INTERFACE_BACKGROUND_COLOR)}

/* - mini captionbar - */
.logo {width: 2.4em !important;}
.captionbarTitle {flex: 1 20 auto; min-width: 5em;}
.captionbarIco {flex: 0 0 auto; align-self: stretch;}
.captionbarIco .ico {display: flex; flex: 0 0 auto; align-self: stretch; justify-content: center; align-items: center; border-width: 0.15em 0.225em; border-style: solid; border-color: transparent; position: relative; width: 1.95em; height: 1.95em; margin: 0 0.075em;}
.captionbarIco .ico:HOVER {background-color: var(--HEAD_HOVER_BACKGROUND_COLOR);}
.captionbarIco .ico:FOCUS {background-color: var(--HEAD_FOCUS_BACKGROUND_COLOR);}
.captionbarIco svg {width: 1.2em; height: 1.2em;}
.captionbarUser {flex: 0 10 auto; height: 100%; overflow: hidden;}
.captionbarUser div {width: 100%; height: 100%;}

/* - особенность своей визитки - */
.cardInfoEditable > *:not(label) {margin-right: 0.15em; margin-left: 0.15em;}
.cardInfo > .cardInfoEditable {align-items: center; height: var(--INTERFACE_PRESS_HEIGHT);}
.cardInfo .i16 + * {-moz-user-select: text; -webkit-user-select: text; user-select: text;}
.cardBig .ecsEditLine:not(.select):before {content: '';}
.cardBig .cardLine {padding: 0.8em 0.6em;}
.cardBig .cardInfoName, .cardInfoEditable *[data-content] {text-decoration: underline; cursor: pointer;}
.cardSmall .cardLine {justify-content: flex-end;}

/* -  - */
.frameTopline {position: relative; flex: 0 0 auto;}
.ecsTopline {top: 0; right: 0; left: 0;}
.frameTopline, .topline {height: 3.225em;}
.topline {height: 1.8em; margin: 0.6em; padding: 0;}
.cloudMinimize .frameTopline, .cloudMinimize .topline {margin: 0;}
.toplineRight {margin: 0 -0.225em;}
.toplineRight > * {margin: 0 0.225em;}
.toplineBoxTitle {z-index: auto;}

/* ?????? а это что?? .ecsInviter {height: 1.2em;}*/

/* -  - */
.popupArea {pointer-events: none;}
.popupView {pointer-events: auto; display: flex; flex-direction: column; align-items: flex-start; max-width: 90%; max-height: 90%;}
.modal:before {content: ''; position: fixed; left: 0; right: 0; top: 0; bottom: 0;}
.movable {position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0); z-index: 10000000;}

/* подобие сплиттера */
.borderSolidH {border-top: 1px solid var(--INTERFACE_BG_5); width: 100%; margin: 0.6em 0;}
.borderDashedH {border-top: 1px dashed #CCC; width: 100%; margin: 0.45em 0;}
.borderDashedV {border-right: 1px dashed #CCC; height: 100%; margin: 0 0.45em;}
.ecsThemes + .borderDashedV {display: block;}

/* из sprite.gss */
.pressIco {display: inline-flex; justify-content: center; position: relative; z-index: 0;}
.pressIco > * {align-self: center;}
.iPressRound:before {content: ''; background: #FFF; border-radius: 50%; position: absolute; top: 2px; right: 2px; bottom: 2px; left: 2px; z-index: -1; opacity: 0.7;}
.iPressRound {fill: #4B4B4B;}
.iPressRound.crossed:after {content: ''; position: absolute; width: 100%; height: 100%; background: url(images/_crossed.8a1d5e99dbcc86137e6f70cdd0ef7898.svg) center center no-repeat; background-size: contain; pointer-events: none;}
.iPressRound.crossed.exclamation:after {background: url(images/_crossed.8a1d5e99dbcc86137e6f70cdd0ef7898.svg) center center no-repeat, url(images/_exclamation.d16373f9030080c0d925a67cc295f22c.svg) left top no-repeat; background-size: contain;}
.iPressRound.exclamation svg {opacity: 0.5;}
.iPressRound:not(.exclamation):HOVER:before {top: 0; right: 0; bottom: 0; left: 0; opacity: 1;}
.iPressRound:not(.exclamation):HOVER svg {transform: scale(1.1);}
.iPressRoundGreen:before {background: var(--INTERFACE_COLOR_GREEN);}
.iPressRoundRed:before {background: var(--INTERFACE_COLOR_RED);}

/* перебитие на em */
.zoomI {font-size: 1.2em;}
.i12, svg.i12 {width: 0.9em; height: 0.9em;}
.i16, svg.i16 {width: 1.2em; height: 1.2em;}
.i20, svg.i20 {width: 1.5em; height: 1.5em;}
.i24, svg.i24 {width: 1.8em; height: 1.8em;}
.i32, svg.i32 {width: 2.4em; height: 2.4em;}
.i40, svg.i40 {width: 3em; height: 3em;}
.i64, svg.i64 {width: 4.8em; height: 4.8em;}
.i96, svg.i96 {width: 7.2em; height: 7.2em;}
.fs16 {font-size: 1.2em;}
.fs20 {font-size: 1.5em;}
.fs24 {font-size: 1.8em;}
.fs32 {font-size: 2.4em;}
.fs40 {font-size: 3em;}
.fs64 {font-size: 4.8em;}
.fs96 {font-size: 7.2em;}

.h-32 {height: 2.4em;}
.m-2 {margin: 0.15em;}
.m-4 {margin: 0.3em;}
.m-8 {margin: 0.6em;}
.m-12 {margin: 0.9em;}
.m-16 {margin: 1.2em;}
.m-20 {margin: 1.25em;}
.mt-2 {margin-top: 0.15em;}
.mt-4 {margin-top: 0.3em;}
.mt-8 {margin-top: 0.6em;}
.mt-12 {margin-top: 0.9em;}
.mt-16 {margin-top: 1em;}
.mt-20 {margin-top: 1.5em;}
.mt-24 {margin-top: 1.8em;}
.mt-36 {margin-top: 2.7em;}
.mr-16 {margin-right: 1em;}
.mr-20 {margin-right: 1.5em;}
.mlr-4 {margin: 0 0.3em;}
.mlr-10 {margin: 0 0.625em;}
.p-8 {padding: 0.6em;}
.p-10 {padding: 0.75em;}
.p-20 {padding: 1.5em;}
.pt-8 {padding-top: 0.6em;}
.h1 {font-size: 1.4em;}
.fs-8 {font-size: 0.8em;}
.fs-8MS {font-size: 0.8em;}
.fs-9 {font-size: 0.9em;}
.fs-12 {font-size: 1.2em;}
.fs-14 {font-size: 1.4em;}
.fs-15 {font-size: 1.5em;}

/* fills */
.back {fill: var(--INTERFACE_BACKGROUND_COLOR);}
.fore {fill: var(--INTERFACE_COLOR);}
.submenuIco {fill: inherit;}
.fillWhite {fill: #FFF;}
.fillRed {fill: #FF4748;}
.fillYellow {fill: #FACC1F;}
.fillGreen {fill: #009646;}
.fillOnline {fill: #61c849;}

/* упрощенные радиобатоны */
.radioBtn {display: inline-block; background-color: var(--INTERFACE_BACKGROUND_COLOR); border: 0.06667em solid var(--INTERFACE_BORDER_COLOR_LIGHT); position: relative; border-radius: 50%; width: 1em; height: 1em; box-sizing: border-box;}
.radioBtn svg {fill: var(--ACCENT_COLOR_BACKGROUND); position: absolute; width: 100%; height: 100%;}
.radioBtn:not(.select) svg {opacity: 0;}
.radio:not(.radioDisabled):HOVER, .radio:not(.radioDisabled):ACTIVE {border-color: var(--INTERFACE_COLOR);}
.radioBtn:not(.radioDisabled):ACTIVE:after {content: ''; border-radius: 50%; position: absolute; top: -1px; right: -1px; bottom: -1px; left: -1px; box-shadow: 0 0.1em 0.2em -0.1em #000 inset;}

.ico, .ecsChatDate, .ecsStatus:before {
    box-sizing: content-box;
}


/* //////////// radio/checkBox/switch -------  Радиобатоны/Чекбоксы/Выключатели ------- ///////
      .1 радио и чекбоксы (radio и checkbox) (хаки IE10)
      .2 выключатели (switch) (хаки IE10)
      .3 стили для масштабирования
      .4 какие-то еще галочки для грида
      .5 радиобатоны - что то старое

   !!!!!!! ВНИМАНИЕ: - места использования .ecsMembersItem, .grid

   radio - переключатель радиобатон
   - select - дополнительный класс для состояния выбранного элемента
   - radioDisabled - дополнительный класс для состояния недоступности

   checkbox - переключатель чекбокс
   - select - дополнительный класс для состояния выбранного элемента
   - checkboxDisabled - дополнительный класс для состояния недоступности
   - checkboxThreeState - дополнительный класс для третьего состояния

   switch - переключатель выключатель
   - select - дополнительный класс для состояния выбранного элемента
   - switchDisabled - дополнительный класс для состояния недоступности
   switchProgress - полоска
   switchSlider - круг
   //////////////////////////////////////////////////////////// */
/* ------------ radio/checkBox/switch ------- .1 радио и чекбоксы (radio и checkbox) */
/* inline-flex - обязательно inline, иначе ломается изменить форму */
.radio, .checkbox {
    display: inline-flex;
    border-color: var(--INTERFACE_BORDER_COLOR);
    background-repeat: no-repeat;
    position: relative;
    width: 1em;
    height: 1em;
    z-index: 0;
}
.checkbox {
    fill: var(--ACCENT_COLOR_BACKGROUND);
}

.radio:before, .checkbox:before {
    content: '';
    background-color: var(--INTERFACE_BACKGROUND_COLOR);
    border-width: 0.06667em;
    border-style: solid;
    border-color: inherit;
    position: absolute;
    width: 1em;
    height: 1em;
    box-sizing: border-box;
}
.radio:before {
    border-radius: 50%;
}
.checkbox:before {
    border-radius: 0.125em;
}
/*  */
.radio.select:after {
    content: '';
    border-radius: 50%;
    background-color: var(--ACCENT_COLOR_BACKGROUND);
    position: absolute;
    top: 0.3335em;
    right: 0.3335em;
    bottom: 0.3335em;
    left: 0.3335em;
}

.checkbox svg {
    pointer-events: none;
    position: absolute;
    margin: 0 1px;
}
.checkbox:not(.select) svg {
    display: none;
}
.checkboxThreeState:after {
    content: '';
    display: block;
    border: 3px solid transparent;
    background: var(--INTERFACE_BORDER_COLOR);
    background-clip: content-box;
    border-radius: 0.075em;
    position: absolute;
    width: 1em;
    height: 1em;
    box-sizing: border-box;
}
.checkboxDisabled.select, .gridCheckboxDisabled .checkbox.select {
    fill: var(--INTERFACE_BORDER_COLOR_LIGHT);
}
.radioDisabled, .checkboxDisabled {
    border-color: var(--INTERFACE_BORDER_COLOR_LIGHT);
}
.radioDisabled.select:after, .checkboxThreeState.checkboxDisabled:after {
    background-color: var(--INTERFACE_BORDER_COLOR_LIGHT);
}
.radio:not(.radioDisabled):HOVER, .radio:not(.radioDisabled):ACTIVE,
.checkbox:not(.checkboxDisabled):HOVER, .checkbox:not(.checkboxDisabled):ACTIVE,
.ecsMembersItem:HOVER .checkbox:not(.checkboxDisabled), .ecsMembersItem:ACTIVE .checkbox:not(.checkboxDisabled)
{
    border-color: var(--INTERFACE_COLOR);
}
.checkboxThreeState:not(.checkboxDisabled):HOVER:after, .checkboxThreeState:not(.checkboxDisabled):ACTIVE:after,
.ecsMembersItem:HOVER .checkboxThreeState:not(.checkboxDisabled):after, .ecsMembersItem:ACTIVE .checkboxThreeState:not(.checkboxDisabled):after
{
    background-color: var(--INTERFACE_COLOR);
}
.radio:not(.radioDisabled):ACTIVE:before, .checkbox:not(.checkboxDisabled):ACTIVE:before,
.ecsMembersItem:ACTIVE .checkbox:not(.checkboxDisabled):before
{
    -webkit-box-shadow: 0 0.1em 0.2em -0.1em #000 inset;
    box-shadow: 0 0.1em 0.2em -0.1em #000 inset;
}
.ICompactWeb .grid .checkbox {
    margin-top: 2px;
}
.ICompactWeb .radio.zoomI, .zoom85 .radio.zoomI, .zoom85 .checkbox.zoomI:before, .ICompactWeb .checkbox.zoomI:before,
.ICompactWeb .checkbox.zoomI:after, .zoom85 .checkbox.zoomI:after {
    font-size: 12px;
}
.ICompactWeb .checkbox.zoomI:after, .zoom85 .checkbox.zoomI:after {
    border-width: 2px;
}
.radio.zoomI, .checkbox.zoomI:before, .checkbox.zoomI:after {
    font-size: 0.9375em;
    margin: 0.0703125em;
}
.zoom125 .radio.zoomI, .zoom125 .checkbox.zoomI:before, .zoom125 .checkbox.zoomI:after {
    font-size: 19px;
}
.zoom125 .checkbox.zoomI:after {
    border-width: 4px;
}
.zoom150 .radio.zoomI, .zoom150 .checkbox.zoomI:before, .zoom150 .checkbox.zoomI:after {
    font-size: 23px;
}
.zoom150 .checkbox.zoomI:after {
    border-width: 5px;
}
.zoom175 .radio.zoomI, .zoom175 .checkbox.zoomI:before, .zoom175 .checkbox.zoomI:after {
    font-size: 27px;
}
.zoom175 .checkbox.zoomI:after {
    border-width: 6px;
}
.zoom200 .radio.zoomI, .zoom200 .checkbox.zoomI:before, .zoom200 .checkbox.zoomI:after {
    font-size: 30px;
    margin: 2px;
}
.zoom200 .checkbox.zoomI:after {
    border-width: 7px;
}
.zoom300 .radio.zoomI, .zoom300 .checkbox.zoomI:before, .zoom300 .checkbox.zoomI:after {
    font-size: 45px;
    margin: 3px;
}
.zoom300 .checkbox.zoomI:after {
    border-width: 9px;
}
.zoom400 .radio.zoomI, .zoom400 .checkbox.zoomI:before, .zoom400 .checkbox.zoomI:after {
    font-size: 60px;
    margin: 4px;
}
.zoom400 .checkbox.zoomI:after {
    border-width: 12px;
}
/* /end ------- radio/checkBox/switch ------- .1 радиобатоны и чекбоксы (radio и checkbox) */

/* ------------ radio/checkBox/switch ------- .2 выключатели (switch) */

/* выключатели */
.switch {
    position: absolute;
    width: 100%;
    height: 100%;
}
/* выключатели - ползунок */
.switchProgress {
    border-radius: 0.375em;
    background-color: var(--INTERFACE_BORDER_COLOR_LIGHT);
    position: absolute;
    height: .7875em;
    top: 0.25em;
    right: 0.0625em;
    left: 0.0625em;
    overflow: hidden;
}
.switchProgress:before {
    content: '';
    background-color: var(--ACCENT_COLOR_BACKGROUND);
    position: absolute;
    width: 0;
    top: 0;
    bottom: 0;
}
/* выключатели - круг */
.switchSlider {
    display: flex;
    position: absolute;
    width: 100%;
}
.switchSlider:before {
    content: '';
    display: block;
    width: 0;
}
.switchSlider:after {
    content: '';
    display: block;
    flex: 0 0 auto;
    border: 0.0625em solid var(--INTERFACE_BORDER_COLOR);
    border-radius: 50%;
    background: var(--INTERFACE_BACKGROUND_COLOR);
    background-clip: content-box;
    width: 1.25em;
    height: 1.25em;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-shadow: 0 0 0 0.625em var(--INTERFACE_BACKGROUND_COLOR) inset, 0 0.0625em 0 0 rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 0 0 0.625em var(--INTERFACE_BACKGROUND_COLOR) inset, 0 0.0625em 0 0 rgba(0,0,0,0.2);
}
/* выключатели - наведение/нажатие */
.switch:not(.switchDisabled):HOVER .switchSlider:after, .switch:not(.switchDisabled):ACTIVE .switchSlider:after {
    border-color: var(--INTERFACE_COLOR);
}
.switchDisabled .switchSlider:after {
    -webkit-box-shadow: 0 0 0 1em #e6e6e6 inset;
    box-shadow: 0 0 0 1em #e6e6e6 inset
}
/* выключатели - недоступные */
.switchDisabled .switchProgress {
    opacity: 0.5;
}
.switchDisabled .switchSlider:after {
    border-color: rgba(0,0,0,0.2);
}
/* выключатели - анимация */
.select.switch .switchProgress:before, .select.switch .switchSlider:before {
    width: 100%;
}
.switchProgress:before, .switchSlider:before {
    transition: width .2s;
    -webkit-transition: width .2s;
    -moz-transition: width .2s;
    -ms-transition: width .2s;
}
/* /end ------- radio/checkBox/switch ------- .2 выключатели (switch) */

/* ------------ radio/checkBox/switch ------- .3 какие-то еще галочки для грида */
.checkboxReadOnly:before, .gridCheckboxReadOnly .checkbox:before, .gridCheckboxDisabled .checkbox:before {
    content: none;
}
.checkboxReadOnly.checkboxThreeState:after, .gridCheckboxReadOnly .checkboxThreeState:after {
    background-color: var(--INTERFACE_COLOR) !important;
}
.gridCheckboxDisabled .checkbox.checkboxThreeState:after {
    background-color: var(--INTERFACE_BORDER_COLOR_LIGHT) !important;
}
/* /end ------- radio/checkBox/switch ------- .3 какие-то еще галочки */

/* ------------ radio/checkBox/switch ------- .4 радиобатоны - что то старое */
/* радиобатон - что то старое и непонятное */
/* .lfl возможно только для старого лейаутера */
.radioLabel {
    position: relative;
    top: 0;
    outline: none;
    font-size: 1em;
    white-space: pre-wrap;
}
.radioTable {
    height: 100%;
    width: 100%;
}
.radioTable td {
    vertical-align: top;
}
.radioTable td + td {
    padding-left: 5px;
}
.radioLabel.focus {
    outline: 1px dotted #030514;
    outline-offset: -1px;
}
.radioLabel span {
    position: relative;
}
.lfl .radio, .lfl .checkbox {
    width: 17px;
    height: 17px;
}
.ICompactWeb .lfl .radio, .ICompactWeb .lfl .checkbox {
    width: 17px;
    height: 17px;
}
/* /end ------- radio/checkBox/switch ------- .4 радиобатоны - что то старое */
/* /end /////// radio/checkBox/switch ------- //////////////////////// */

.ProseMirror {
    padding: 8px 16px;
    cursor: text;
    font-size: 14px;
    line-height: 1.5;
}

.ProseMirror h1 {
    padding: 16px 0;
    font-size: 36px;
    line-height: 1.3;
    font-weight: normal;
}

.ProseMirror h2 {
    padding: 14px 0;
    font-size: 32px;
    line-height: 1.3;
    font-weight: normal;
    font-style: italic;
}

.ProseMirror h3 {
    padding: 12px 0;
    font-size: 28px;
    line-height: 1.3;
    font-weight: normal;
}

.ProseMirror h4 {
    padding: 11px 0;
    font-size: 24px;
    line-height: 1.4;
    font-weight: normal;
    font-style: italic;
}

.ProseMirror h5 {
    padding: 9px 0;
    font-size: 21px;
    line-height: 1.4;
    font-weight: normal;
}

.ProseMirror h6 {
    padding: 8px 0;
    font-size: 18px;
    line-height: 1.4;
    font-weight: normal;
    font-style: italic;
}

.ProseMirror ol,
.ProseMirror ul {
    padding-left: 24px;
    margin: 8px 0 8px 20px;
}

.ProseMirror ol ol,
.ProseMirror ol ul,
.ProseMirror ul ol,
.ProseMirror ul ul {
    margin-left: 16px;
}

.ProseMirror ol {
    counter-reset: item;
}

.ProseMirror li {
    position: relative;
}

.ProseMirror ol > li {
    list-style-type: decimal;
    counter-increment: item;
}

.ProseMirror ol ol > li {
    display: block;
    padding-left: 8px;
}

.ProseMirror ol ol > li:before {
    content: counters(item, ".") ". ";
    position: absolute;
    right: 100%;
}

.ProseMirror ul > li {
    list-style-type: disc;
}

.ProseMirror p {
    margin: 8px 0;
}

.ProseMirror a {
    color: #1481b8;
    text-decoration: none;
}

.ProseMirror.ProseMirror__clickable-links a {
    cursor: pointer;
}

.ProseMirror blockquote {
    margin: 2px 0;
    padding: 10px 0 10px 15px;
    border-left: 5px solid #ddd;
}

.ProseMirror blockquote p {
    margin-top: 0;
    margin-bottom: 0;
}

.ProseMirror pre {
    margin: 8px 0;
    padding: 14px;
    background-color: #fefef8;
    border: 1px solid #d9d9d9;
    letter-spacing: -0.7px;
}

.ProseMirror img {
    vertical-align: middle;
}
/* https://github.com/ProseMirror/prosemirror-view/blob/master/style/prosemirror.css */

.ProseMirror {
  position: relative;
}

.ProseMirror {
  word-wrap: break-word;
  white-space: pre-wrap;
  white-space: break-spaces;
  -webkit-font-variant-ligatures: none;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0; /* the above doesn't seem to work in Edge */
}

.ProseMirror pre {
  white-space: pre-wrap;
}

.ProseMirror li {
  position: relative;
}

.ProseMirror-hideselection *::selection { background: transparent; }
.ProseMirror-hideselection *::-moz-selection { background: transparent; }
.ProseMirror-hideselection { caret-color: transparent; }

.ProseMirror-selectednode {
  outline: 2px solid #8cf;
}

/* Make sure li selections wrap around markers */

li.ProseMirror-selectednode {
  outline: none;
}

li.ProseMirror-selectednode:after {
  content: "";
  position: absolute;
  left: -32px;
  right: -2px; top: -2px; bottom: -2px;
  border: 2px solid #8cf;
  pointer-events: none;
}

.layeredGroup
{
    min-width: 100%;
    min-height: 100%;
    display: flex;
    position: relative;
}

.groundItem
{
    min-width: 100%;
    min-height: 100%;
    display: flex;
}

.isDesktop * {
    scrollbar-color: #C9C9C9 transparent;
    scrollbar-width: thin;
}

.isDesktop ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: transparent;
}

.isDesktop ::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: #C9C9C9;
}

.isDesktop ::-webkit-scrollbar-thumb:hover {
    background-color: #6E6E6E;
}


:root
{
    --safe-area-inset-top: env(safe-area-inset-top);
    --safe-area-inset-right: env(safe-area-inset-right);
    --safe-area-inset-bottom: env(safe-area-inset-bottom);
    --safe-area-inset-left: env(safe-area-inset-left);
}

:root {-moz-text-size-adjust: none; -webkit-text-size-adjust: none;}

html
{
    background-color: #fff;
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
body, div, p, th, td, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, select
{
    margin: 0;
    padding: 0;
}
fieldset, img
{
    border: 0;
}
li
{
    list-style: none;
}
a, *[tabindex], map area, button
{
    outline: medium none;
}
input, textarea
{
    overflow: auto;
    user-select: text;
    resize: none;
}
input:focus, textarea:focus, button:focus,
input:active, textarea:active, button:active
{
    outline-width: 0;
    outline: medium none;
}
input::-ms-clear
{
    display: none;
}
textarea::-ms-clear
{
    display: none;
}
input::-ms-reveal
{
    display: none;
}
textarea::-ms-reveal
{
    display: none;
}
body
{
    color: rgba(0, 0, 0, 0.87);
    font-size: 10pt;
    background-color: var(--vscode-editor-background, #fff);
    overflow: auto;
    line-height: 1.2;
    cursor: default;
    /* TODO need li? */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-touch-callout: none;
    /* TODO mixin */
    position: absolute; /**/
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -2;

    /* Запрещает обновление страницы при скролле страницы вверх в мобильных браузерах.
     Но оставляет визуальный эффект пере-прокрутки */
    overscroll-behavior-y: contain;

    /* Включает плавную инерциальную прокрутку скролла в мобильном сафари */
    -webkit-overflow-scrolling: touch;

    user-select: text;
}
.dots
{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cp
{
    cursor: pointer;
}
.height-100
{
    height: 100%;
}
.appContainer
{
    font-family: Roboto, sans-serif;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;

    width: 100%;
    height: 100%;
    overflow: auto;
    position: absolute;
    display: flex;

    padding-top: var(--safe-area-inset-top);
    padding-right: var(--safe-area-inset-right);
    padding-bottom: var(--safe-area-inset-bottom);
    padding-left: var(--safe-area-inset-left);
}
.emptyImage
{
    border-style: dashed;
    border-width: 1px;
    border-color: gray;
    padding: 8px;
    display: inline-block;
}

*,
*:before,
*:after {
    will-change: auto !important;
    box-sizing: border-box;
}

.flexStretch
{
    flex: 1;
}

.blockShadow
{
    box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 5px -1px, rgba(0, 0, 0, 0.14) 0px 5px 8px 0px, rgba(0, 0, 0, 0.12) 0px 1px 14px 0px;
}

.mdc-dialog__backdrop
{
    /* @alternate */
    background-color: #404040;
    position: fixed;
    top: 0;
    left: 0;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    opacity: 0.6;
}

::-webkit-caps-lock-indicator,
::-webkit-contacts-auto-fill-button,
::-webkit-credentials-auto-fill-button {
    display: none;
    visibility: hidden;
    pointer-events: none;
    position: absolute;
    right: 0;
}


@font-face {
    font-family: 'Roboto';
    src: local('Roboto'), local('Roboto-Regular'),
    url(fonts/Roboto-Regular.fd317bd152694dfa37a03aef78b76ec4.woff2) format('woff2'),
    url(fonts/Roboto-Regular.26a727d8c91494ad7c189a31fac4a91e.woff) format('woff'),
    url(fonts/Roboto-Regular.18d44f79b3979ec168862093208c6d7d.ttf) format('ttf');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto';
    src: local('Roboto Thin'), local('Roboto-Thin'),
    url(fonts/Roboto-Thin.f3d101973b3a7ebf1746975a5e2e8393.woff2) format('woff2'),
    url(fonts/Roboto-Thin.7495e6afb769fba56853cce679bf6b22.woff) format('woff'),
    url(fonts/Roboto-Thin.d1e42f1b6d0c32271f8e68515563a213.ttf) format('ttf');
    font-weight: 100;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto';
    src:  local('Roboto Light'), local('Roboto-Light'),
    url(fonts/Roboto-Light.8d7611b03a7e90a08d38df37fa1be782.woff2) format('woff2'),
    url(fonts/Roboto-Light.2d87e7f19ca7d0a1f0b411d3ccc30c19.woff) format('woff'),
    url(fonts/Roboto-Light.c6cdfded4630ba6d9a2dceb70aa4fe0f.ttf) format('ttf');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto';
    src: local('Roboto Black Italic'), local('Roboto-BlackItalic'),
    url(fonts/Roboto-BlackItalic.c8f2ac17e5fd216bc0f93f8019e5ceda.woff2) format('woff2'),
    url(fonts/Roboto-BlackItalic.fca0061bf317ad26790f20e687ed3220.woff) format('woff'),
    url(fonts/Roboto-BlackItalic.18a576bf7ceb253929ac1f7bdfe6d467.ttf) format('ttf');
    font-weight: 900;
    font-style: italic;
}
@font-face {
    font-family: 'Roboto';
    src: local('Roboto Bold'), local('Roboto-Bold'),
    url(fonts/Roboto-Bold.3b20863e11a00f4dc5b3647ee31b6b3b.woff2) format('woff2'),
    url(fonts/Roboto-Bold.5d67c8dbf3dd425cf90398c042bcbe4c.woff) format('woff'),
    url(fonts/Roboto-Bold.7c18188784f21915f42a5b3bc9d91e20.ttf) format('ttf');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto';
    src: local('Roboto Italic'), local('Roboto-Italic'),
    url(fonts/Roboto-Italic.f9ee50bef89784c206fa324802819da6.woff2) format('woff2'),
    url(fonts/Roboto-Italic.de9d3b6ae9ad6769bb1b8b19fd1a1026.woff) format('woff'),
    url(fonts/Roboto-Italic.9da6e8b1803fec548ee0720f620f93f5.ttf) format('ttf');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'Roboto';
    src: local('Roboto Thin Italic'), local('Roboto-ThinItalic'),
    url(fonts/Roboto-ThinItalic.feffec1c7d4fbbd15c36b64ce31b21d2.woff2) format('woff2'),
    url(fonts/Roboto-ThinItalic.521afd33ccc31ec90ff20695d3813da4.woff) format('woff'),
    url(fonts/Roboto-ThinItalic.2cbc2256ef5afbf04c18beeee4478e55.ttf) format('ttf');
    font-weight: 100;
    font-style: italic;
}
@font-face {
    font-family: 'Roboto';
    src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'),
    url(fonts/Roboto-BoldItalic.f3a2677418b69847191892d4de222312.woff2) format('woff2'),
    url(fonts/Roboto-BoldItalic.6f2cf24f80f5f6c6360c4f137038cc9a.woff) format('woff'),
    url(fonts/Roboto-BoldItalic.9098d3de14ef1cfae7be4f195fe1a174.ttf) format('ttf');
    font-weight: bold;
    font-style: italic;
}
@font-face {
    font-family: 'Roboto';
    src: local('Roboto Light Italic'), local('Roboto-LightItalic'),
    url(fonts/Roboto-LightItalic.ec8d9dab607aaa49b2c86a8184497d6b.woff2) format('woff2'),
    url(fonts/Roboto-LightItalic.dd6c9f6b29b1b32c2eff790903501a38.woff) format('woff'),
    url(fonts/Roboto-LightItalic.afd48b813752d70b936e73d99b5dca35.ttf) format('ttf');
    font-weight: 300;
    font-style: italic;
}
@font-face {
    font-family: 'Roboto';
    src: local('Roboto Medium'), local('Roboto-Medium'),
    url(fonts/Roboto-Medium.8fa6797ead4cf98699440338bbc12449.woff2) format('woff2'),
    url(fonts/Roboto-Medium.40c802e3a51ddde03eb4c36dbedb8c77.woff) format('woff'),
    url(fonts/Roboto-Medium.d52f011be65b281ba8ca1c3f689cf133.ttf) format('ttf');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto';
    src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'),
    url(fonts/Roboto-MediumItalic.ce1baefaaf70e577ece34a760b8bffab.woff2) format('woff2'),
    url(fonts/Roboto-MediumItalic.fb3c59d8f524e5b52f8b32cce3defa58.woff) format('woff'),
    url(fonts/Roboto-MediumItalic.c1d8fbd29929d048c8d065d1be3bc35d.ttf) format('ttf');
    font-weight: 500;
    font-style: italic;
}
@font-face {
    font-family: 'Roboto';
    src: local('Roboto Black'), local('Roboto-Black'),
    url(fonts/Roboto-Black.22f26af0c7f9e3892c3a81e20ab45c3f.woff2) format('woff2'),
    url(fonts/Roboto-Black.595194dafb44cca9e48962e28ca7f1bd.woff) format('woff'),
    url(fonts/Roboto-Black.3234b3e853eabe9fc936cd7a133055ad.ttf) format('ttf');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto Mono';
    src: local('Roboto Mono Light'), local('RobotoMono-Light'),
        url(fonts/RobotoMono-Light.19aa2c8ef063720b327edab59dc55632.woff2) format('woff2'),
        url(fonts/RobotoMono-Light.ebd8d2716412b1c1a784e4f92603a639.woff) format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto Mono';
    src: local('Roboto Mono Italic'), local('RobotoMono-Italic'),
        url(fonts/RobotoMono-Italic.8bb9fff61cde62499d54fb5ee9a015f8.woff2) format('woff2'),
        url(fonts/RobotoMono-Italic.4806ab32fc8937f1520d3e0230ab67a6.woff) format('woff');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Roboto Mono';
    src: local('Roboto Mono Thin Italic'), local('RobotoMono-ThinItalic'),
        url(fonts/RobotoMono-ThinItalic.c409604af94e0ce5272c4ac5ded8cd18.woff2) format('woff2'),
        url(fonts/RobotoMono-ThinItalic.be76fd121cc4e0acf8d67467715bd20e.woff) format('woff');
    font-weight: 100;
    font-style: italic;
}

@font-face {
    font-family: 'Roboto Mono';
    src: local('Roboto Mono Medium Italic'), local('RobotoMono-MediumItalic'),
        url(fonts/RobotoMono-MediumItalic.979f5a747af47ee3a19560632bd0870c.woff2) format('woff2'),
        url(fonts/RobotoMono-MediumItalic.69326aa6b2b76643dd9c3aa546c9f72c.woff) format('woff');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Roboto Mono';
    src: local('Roboto Mono Bold Italic'), local('RobotoMono-BoldItalic'),
        url(fonts/RobotoMono-BoldItalic.74a518e2e0ed239d79f55ed9648a3849.woff2) format('woff2'),
        url(fonts/RobotoMono-BoldItalic.a135ab106abb19660758767450607150.woff) format('woff');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Roboto Mono';
    src: local('Roboto Mono Thin'), local('RobotoMono-Thin'),
        url(fonts/RobotoMono-Thin.1f96134618f95c6bdd8e64d9bc12adb0.woff2) format('woff2'),
        url(fonts/RobotoMono-Thin.bad503ea74a64aee75163b227a82ccf9.woff) format('woff');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto Mono';
    src: local('Roboto Mono Bold'), local('RobotoMono-Bold'),
        url(fonts/RobotoMono-Bold.8379b57a68a2008b23dabcbda2482f2a.woff2) format('woff2'),
        url(fonts/RobotoMono-Bold.04cdeeec5a07892821d122b4eb1a0652.woff) format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto Mono';
    src: local('Roboto Mono'), local('RobotoMono-Regular'),
        url(fonts/RobotoMono-Regular.ac86866c10adaa8a06bba58c5c896fc6.woff2) format('woff2'),
        url(fonts/RobotoMono-Regular.5b216bd740a21288742dcaec4ac61556.woff) format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto Mono';
    src: local('Roboto Mono Light Italic'), local('RobotoMono-LightItalic'),
        url(fonts/RobotoMono-LightItalic.8cfbf61b87d191e02ccf544919bef651.woff2) format('woff2'),
        url(fonts/RobotoMono-LightItalic.c7334314ac810a74d9a01a736c91a9c1.woff) format('woff');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Roboto Mono';
    src: local('Roboto Mono Medium'), local('RobotoMono-Medium'),
        url(fonts/RobotoMono-Medium.5203f17c157a0de5e22d4f3f44ea4abc.woff2) format('woff2'),
        url(fonts/RobotoMono-Medium.c2760f5e9848d2431fcfdfdf4fa5ca1f.woff) format('woff');
    font-weight: 500;
    font-style: normal;
}


@font-face {
    font-family: 'asterisk';
    src: local('asterisk'),
    url(fonts/asterisk.4fb70be02b3c1d913e4687186ca0aa11.woff2) format('woff2'),
    url(fonts/asterisk.d3d4420bbd7c50d6d753e450259a333e.woff) format('woff'),
    url(fonts/asterisk.0a10d53dc7efdf6bed8f3acb581d23c4.ttf) format('ttf');
    font-weight: normal;
    font-style: normal;
}