: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_BACKGROUND_COLOR_75: rgba(255, 255, 255, 0.75);
    --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);

    --PRESS_COLOR_BACK_10: #F2F2F2;
    --PRESS_COLOR_BACK_20: #DCDCDC;
    --PRESS_COLOR_BACK_30: #C6C6C6;
    --PRESS_COLOR_BACK_40: #AFAFAF;

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


/* это всего лиш кусочек от оригинала - разнести оригинал? */
.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;}
.embedded {margin-bottom: 1.125em;}
.embedded:after {content: attr(data-content); text-transform: uppercase; position: fixed; right: 0.3em; bottom: 0.1625em; padding-right: 2.4em; background: url(images/_logo1C.dd30aac1535e816c41ceaaa00c0c22c4.svg) no-repeat right bottom; background-size: 2.1em 1.05em; pointer-events: none; font-size: 0.8em; line-height: 1em;}
html[dir=rtl] .embedded:after {right: auto; left: 0.3em; padding-right: 0; padding-left: 2.4em; background-position-x: left;}

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

.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_2.6c3390d637c40ccf8a6d5ae0271165f5.svg) no-repeat center center;}
.ecsVideo .loading {align-self: center;}

.absolute {position: absolute;}
.relative {position: relative;}
/* //////////// 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);
}
/* ------------ 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 ------- .5 хак для Safari и iPad
@if (BROWSER_SAFARI) || (BROWSER_IPAD) {
    .command {
        word-spacing: normal;
        letter-spacing: 1.2em;
    }
    .commandRight, .commandSeparator, .framePress {
        letter-spacing: normal;
    }
}
/end ------- command + buttons ------- .5 хак для Safari и iPad */

/* ------------ 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: var(--INTERFACE_COLOR);
}
.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: 1.4em;
    position: relative;
    width: 100%;
    min-width: 2em;
    height: 1.5em;
    line-height: 1.5em;
}
.toplineBox:after {
    content: attr(data-title);
    display: block;
    position: absolute;
    max-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);  background: url(images/iconEcsCheckbox.10b0472d71e4f1796a5bbeee1bad2ee5.svg) no-repeat center center; 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); box-sizing: content-box}

.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;}
.eddText {min-height: 2.175em;}
.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;
}

.cloudDark {
    background: rgba(0, 0, 0, 0.5);
}

.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;}
.ecsChatService {position: relative; width: 100%; padding: 0.75em 1.35em 0; margin: 0 -2.7em; box-sizing: content-box;}
.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%; position: relative; 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);}
.ecsListItem .iHoverDark {background: var(--INTERFACE_BACKGROUND_COLOR_75); border-radius: 50%; padding: 0.3em;}
/*  */
.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;}
.ecsChatContainer {width: 100%; display: flex; min-height: 200px; flex-direction: column; max-width: 780px; justify-content: end; flex: 1 1 0; box-sizing: border-box;}
.ecsChatBlock {position: relative; width: 100%; z-index: 0;}
/* 108px состоят из:
 * - ECS.UI.PanelBase.splitterOffsetTop (100px)
 * - ECS.UI.Splitter.size (8px) */
.ecsAnswer {max-height: calc(100% - 108px); overflow: inherit;}
/* надпись "Печатает..." */
.ecsChatTyping:before {content: ''; flex: 0 0 auto; display: inline-block; background: url(images/_typing.68e718ca31250ca8b894137f365cb1af.svg) no-repeat 0 center; background-size: auto 100%; width: 1.5em;}
.ecsChatRead.hide {width: 0; overflow: hidden;}
.ecsChatTyping div {margin: 0 0.45em;}
/* дата */
.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;}
.ecsChatDate:first-child {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; max-width: 100%; box-sizing: border-box; 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.076bd6c97ceadfa91e30bd7089a66922.svg);}
.iFileAudio:before {background-image: url(images/_fileTypeAudio.2e2919476b1b97d5da2f241bb2878382.svg);}
.iFileEPF:before {background-image: url(images/_fileTypeEPF.1f9c0c7bf176f90f88eeb53383542fa3.svg);}
.iFileERF:before {background-image: url(images/_fileTypeERF.a95c9d4736acd0fb2b9320750b789be4.svg);}
.iFileExcel:before {background-image: url(images/_fileTypeExcel.21aafc15fc5236efa7f9bfd9e2b561b6.svg);}
.iFileGEO:before {background-image: url(images/_fileTypeGEO.d2812638c75fbf2d1c5fff67be467a87.svg);}
.iFileGRS:before {background-image: url(images/_fileTypeGRS.473975ab9456c1abcf0f3d2860e18772.svg);}
.iFileHTML:before {background-image: url(images/_fileTypeHTML.d21f457a622a541321c4635be2a5093b.svg);}
.iFileImage:before {background-image: url(images/_fileTypeImage.d30641ce7c724e3eff728fd6718ad583.svg);}
.iFileMXL:before {background-image: url(images/_fileTypeMXL.a25e6f5435f776fa0f72077c4e8df451.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.bcbad261fe14a7bfae42a904ea5837a6.svg);}
.iFileUnknown:before {background-image: url(images/_fileTypeUnknown.986ce8361200ccb60ab6049c9f0ce88f.svg);}
.iFileVideo:before {background-image: url(images/_fileTypeVideo.eb4cbf54e035fad9bd771b17ae86618e.svg);}
.iFileWord:before {background-image: url(images/_fileTypeWord.730d512b3de5ae5642ac10074b29d157.svg);}

/* /end ------- ECS ------- .5 пути к типам файлов, приложенных к сообщению ECS и прочие иконки для файлов */
/* /end /////// ECS ------- //////////////////////// */
/* //////////// ecsChoice ------- Кнопки/ссылки с сообщениях ECS ------- ///////
      .0 хаки IE11
      .1 стили

   ecsChoice - общий контейнер
   - ecsChoiceLinks - вид ссылка
   - :not(.ecsChoiceLinks) - вид кнопка
   - ecsChoiceLine - в линию
   - ecsChoiceColumn - в колонку
   - ecsChoiceGrid - в сетку
   ecsChoiceBlock - линия контейнера
   ecsChoicePress - кнопка/ссылка
   > .ico - картинка
   > ecsChoicePressText - текст

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


/* /end ------- ecsChoice ------- .0 хаки IE11 */
/* ------------ ecsChoice ------- .1 стили */
.ecsChoice {margin-top: 8px;}
.ecsChoice.ecsChoiceSize {overflow: hidden;}
.ecsChoice.ecsChoiceSize div:not(.ico) {display: inline-block; white-space: nowrap; width: auto; opacity: 0;}
.ecsChoiceBlock {display: flex; gap: 8px; overflow: hidden;}
.ecsChoicePress {display: flex; justify-content: center; align-items: center; cursor: default; color: var(--INTERFACE_COLOR); width: 100%; overflow: hidden; box-sizing: border-box; -moz-user-select: none; -webkit-user-select: none;}
.ecsChoicePress .ico {padding: 0 4px;}
.ecsChoicePressText {flex: 1 1; margin: 0 4px; text-align: center;}
.ecsChoicePress div {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.ecsChoicePress.disabled div {opacity: 0.5;}
/* вид ссылка */
.ecsChoiceLinks .ecsChoicePress {color: var(--INTERFACE_LINK_COLOR);}
.ecsChoiceLinks .ico {padding: 0 2px;}
.ecsChoiceLinks .ecsChoicePressText {margin: 0 2px;}
.ecsChoiceLinks .ecsChoicePress:HOVER:not(.disabled), .ecsChoiceLinks .ecsChoicePress:ACTIVE:not(.disabled) {text-decoration: underline; cursor: pointer;}
/* вид кнопка */
.ecsChoice:not(.ecsChoiceLinks) .ecsChoicePress {background: var(--PRESS_COLOR_BACK_20); border-radius: 4px; padding: 6px 4px;}
.ecsChoice:not(.ecsChoiceLinks) .ecsChoicePress:HOVER {background: var(--PRESS_COLOR_BACK_30);}
.ecsChoice:not(.ecsChoiceLinks) .ecsChoicePress:ACTIVE {background: var(--PRESS_COLOR_BACK_40);}
.ecsChoice:not(.ecsChoiceLinks) .ecsChoicePress.disabled {background: var(--PRESS_COLOR_BACK_10); box-shadow: 0 0 0 1px inset var(--PRESS_COLOR_BACK_20);}
/* в одну линию */
.ecsChoiceLine .ecsChoicePress {flex: 1 0;}
.ecsChoiceLine .ico {margin: 0 auto;}
/* в колонку, в сетку */
.ecsChoiceColumn, .ecsChoiceGrid {display: flex; flex-direction: column; gap: 8px; max-width: 100%;}

.ecsChoiceColumn.ecsChoiceLinks .ecsChoicePress {justify-content: flex-start; width: auto;}
.ecsChoiceGrid.ecsChoiceLinks .ecsChoicePress {flex: 1 0;}
/* /end ------- ecsChoice ------- .1 стили */
/* /end /////// ecsChoice ------- //////////////////////// */

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

/* окно видеозвонка */
.ecsVideo {    display: flex;    color: #FFF;    background: #1F1F1F url(images/_conferenceBack.e10db5e34274d5f1c9a4cfd0e1ac59b4.svg);    background-size: cover;}

.ecsVideoGrid {
    justify-content: center;
    align-items: center;
}
.ecsVideo:not(.ecsVideoGrid) {
    flex-direction: row-reverse;
}

.ecsVideo:not(.ecsVideoGrid) .videoTurns, .ecsVideoGrid .videoListShow {
    display: none;
}

.ecsVideoGrid .ecsVideoUsers {
    width: 0;
}
.ecsVideo:not(.ecsVideoGrid) .ecsVideoUsers {
    padding-top: 24px;
}
.ecsVideoGrid .videoChat .videoUser {
    border-width: 0.3em;
    background: #000;
    border-color: transparent;
    background-clip: content-box;
    overflow: hidden;
}
.ecsVideo:not(.ecsVideoGrid) .videoChat .videoStatusScreenSharing .ecsAvatar, .ecsVideo:not(.ecsVideoGrid) .videoChat .videoStatusScreenSharing .videoUserName {
    display: none;
}

/* служебный текст посреди окна вместо звонка */
.ecsVideoTextMessage {font-size: 1.3em; text-align: center;}
.ecsVideoText >:not(.ecsVideoTextMessage):not(.ecsVideoReconnect) {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;}
.ecsVideoPress span:before {border: 1px solid rgba(0,0,0,0.2);}

/* оболочка списка участников */
.ecsVideoUsers {
    display: flex;
    order: -1;
    background: #0c0c0c;
    z-index: 2
}

.ecsVideoList {
    background-color: #333;
    overflow: hidden;
    max-height: 100%
}

/* прокрутка режима "сетка" */
.videoTurns {
    padding: 0 4px;
    pointer-events: none;
}
.videoTurns span.disabled {
    opacity: 0.25;
}
.videoTurns span:not(.disabled) {
    pointer-events: auto;
}

/* меню смены режима окна */
.videoMenu {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 1.2em;
    padding: 0.3em 0.3em;
    z-index: 2;
    pointer-events: none;
}

.videoMenu div {
    display: flex;
    align-items: center;
    pointer-events: auto;
}

.videoMenuContainer {z-index: 3}

/* один участник */
.videoUser {border: 1px solid #0c0c0c; 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);}
.ecsVideoList .videoUserName {font-size: 0.8em;}
.videoUserStatus {margin: 0.3em; top: 0; right: 0; left: 0;}
.videoUserOff .videoRemoveConferee  {cursor: default;}

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

/* состояние с аватаром, когда нет еще видео */
.videoUserOff > .videoUserVideo, .videoUser:not(.videoUserOff) .ecsAvatar, .videoUser:not(.videoUserOff) .ecsAvatar {display: none;}
.videoChat .videoUserOff:not(.videoUserReconnect) .ecsAvatar {font-size: 64px;}

/* мое видео */
.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;}
.videoTransform video {transform: scale(-1, 1);}

/* список участников */
.videoItem .videoUser {margin: 0;}
.videoItem video {top: 0; left: 0;}
.videoItem .videoUserName {bottom: 0;}
.videoList .videoUser.focus:after,
.ecsVideo:not(.ecsVideoSpeaker) .videoList .videoUser:not(.focus):HOVER:after,
.ecsVideo.ecsVideoGrid .videoChat .videoUser.focus:after
{
    content: '';
    border: 1px solid #FACC1F;
    pointer-events: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.videoUser.focus:after {border-width: 2px !important;}


.videoUser:not(.videoStatusPending):not(.videoStatusRejected):not(.videoStatusDiscarded) .videoRemoveConferee {display: none;}

/* кнопка открытия списка участников */
.videoListShow {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    position: relative;
    width: 0;
    height: 100%;
    z-index: 1;
}
.videoListShowPress {
    flex: 0 0 auto;
    background: #0c0c0c;
    border-radius: 5px 0 0 5px;
    position: relative;
    width: 1.2em;
    height: 3em;
}
.videoListShowPress:before {
    content: '';
    cursor: pointer;
    border-radius: inherit;
    border-width: 1px 0 1px 1px;
    border-style: solid;
    border-color: var(--INTERFACE_BORDER_COLOR_LIGHT);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.videoListShowPress:after {
    content: '';
    border-width: 0.3em 0 0.3em 0.3em;
    border-style: solid;
    border-color: transparent transparent transparent var(--INTERFACE_BORDER_COLOR);
    height: 0;
}
.videoListShowPress:not(:HOVER):before {
    opacity: 0.75;
}
.videoListShow.hide .videoListShowPress:after {
    transform: scaleX(-1);
}
.videoListShow.hide + .ecsVideoUsers {
    width: 0;
}
.ecsVideoChat .videoUserOff .videoRemoveConferee {
    top: 0;
}
.ecsVideo:not(.ecsVideoGrid) .videoListShow.hide + .ecsVideoUsers + .ecsVideoChat .videoUserOff .videoRemoveConferee{
    top: 24px;
}

/* плюшки на видео в списке */
.videoUserReconnect {
    z-index: 0;
}
.videoUserReconnect .ecsAvatar:after {
    content: '';
    background: url(images/_loading_3.e6a888891f61b6a0a99f0538b2c4f633.svg) no-repeat center;
    background-size: 100%;
    position: absolute;
    top: -8px;
    right: -8px;
    bottom: -8px;
    left: -8px;
    z-index: -1;
}
.videoStatusRejected, .videoStatusDiscarded {background: #462826;}

/* главное окно (мозаика) */
.videoChat {font-size: var(--INTERFACE_FONT_SIZE); min-width: 100%; min-height: 100%;}
.videoChat .videoUser {display: flex; justify-content: center; align-items: center; width: inherit; height: inherit;}
.videoChat video {align-self: center; width: 100%; height: 100%;}
.videoChat .videoUser:not(.videoUserOff) .videoUserName {top: 0; padding-right: 1.8em; padding-left: 1.8em;}
.videoChat .videoUserOff {flex-direction: column;}
.ecsVideo:not(.ecsVideoGrid) .videoChat .videoStatusScreenSharing .pressIco {display: none;}
.videoChat .ecsAvatar {
    border: 12px solid transparent;
    background-clip: content-box;
    margin-top: 0;
}
.videoChat .videoUserOff .videoUserName {
    position: relative;
    width: 100%;
    margin-top: 2px;
    box-sizing: border-box;
}

/* демонстрация экрана - !!!!! - перенесено в 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:not(:HOVER) {opacity: 0.5;}*/

.videoUserVideo {display: inherit; align-items: inherit; justify-content: inherit;}
.ecsVideo:not(.ecsVideoGrid) .ecsVideoChat .videoStatusScreenSharing {background: transparent; border-width: 0 !important;}
.ecsVideo:not(.ecsVideoGrid) .ecsVideoChat .videoStatusScreenSharing > .videoUserVideo {align-self: flex-start; position: relative; max-width: 9em; max-height: 6.75em; width: 100%; height: 100%;}
.ecsVideo:not(.ecsVideoGrid) .ecsVideoChat .videoStatusScreenSharing > .videoUserVideo:not(:HOVER) {opacity: 0.5;}

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

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

/* курсоры */
.ecsVideo:not(.ecsVideoSpeaker) .videoList .videoUser,
.ecsVideo.ecsVideoSpeaker .videoList .videoUser.videoStatusScreenSharing,
.ecsVideoGrid .videoUser:not(.videoTransform) {cursor: url(images/_confereeZoomIn.6c0e001a7dc6ad713f236eb5ff3a0de4.cur), default;}
.ecsVideo:not(.ecsVideoGrid) .videoChat .videoUser {cursor: url(images/_confereeZoomOut.c11469b15560db461ef02744c4bdc851.cur), default;}
.screenSharing:not(.ecsVideoGrid) .videoChat .videoUser.videoStatusScreenSharing {cursor: not-allowed}

/* анимация */
.ecsVideoList, .ecsVideoPress, .ecsVideo:not(.ecsVideoGrid) .ecsVideoUsers {
    transition: background 0.3s, width 0.3s, bottom 0.3s, opacity 0.3s;
    -webkit-transition: background 0.3s, width 0.3s, bottom 0.3s, opacity 0.3s;
    -moz-transition: background 0.3s, width 0.3s, bottom 0.3s, opacity 0.3s;
    -ms-transition: background 0.3s, width 0.3s, bottom 0.3s, opacity 0.3s;;
}

.videoUser, .videoItem, .videoItem span, .videoUserOff .videoRemoveConferee{transition: width 0.3s, height 0.3s, top 0.3s, margin 0.3s; -webkit-transition: width 0.3s, height 0.3s, top 0.3s, margin 0.3s; -moz-transition: width 0.3s, height 0.3s, top 0.3s, margin 0.3s; -ms-transition: width 0.3s, height 0.3s, top 0.3s, margin 0.3s;}

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

.videoUserName {transition: opacity 0.5s; -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -ms-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%, var(--INTERFACE_BACKGROUND_COLOR) 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;}
/* использование парных 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); fill: 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;}
.box-sizing-initial {box-sizing: initial}
/* /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
 */

/* -  - */
@supports not selector(::-webkit-scrollbar) {
    * {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;}
.logo {width: 4.8em; height: 4.8em; background: url(images/_logoLarge.d2be6ee771f7be8a98e618c3cd28e7ce.svg) center center no-repeat; background-size: contain;}
.frame {flex: 1 1 60%; position: relative; overflow: hidden;}
.frameMenu {flex: 1 1 50%; 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 - */
.captionbarLogo {width: 1.8em; height: 1.8em; padding: 0 0.4em; background: url(images/_logoSmall.78588582aa644e86637ea9605af045e4.svg) center center no-repeat; background-size: contain;}
.captionbarAppTitle {flex: 1 20 auto; min-width: 5em;}
.captionbarAppTitle:before {content: '(';}
.captionbarAppTitle:after {content: ')';}
@media (display-mode: standalone) {
    body:not(.mobile) .captionbarLogo, body:not(.mobile) .captionbarTitle, body:not(.mobile) .captionbarAppTitle:before, body:not(.mobile) .captionbarAppTitle:after {display: none;}
}
.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;}

.disconnectedMessage {display: flex; position: relative;}
.disconnectedMessage:before {
    content: "\2026";
    width: 0;
    overflow: hidden;
    -webkit-animation: ellipsis steps(4,end) 900ms infinite;
    animation: ellipsis steps(4,end) 900ms infinite;
    order: 1;
}
.disconnectedMessage:not(.toplineBox):before {
    position: absolute;
    left: 100%;
}
html[dir=rtl] .disconnectedMessage:not(.toplineBox):before {
    right: 100%;
    left: auto;
}
.toplineBox.disconnectedMessage:after {
     position: relative;
}

@keyframes ellipsis {
    to {
        width: 1.25em;
    }
}
@-webkit-keyframes ellipsis {
    to {
        width: 1.25em;
    }
}

/* ?????? а это что?? .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):not(.disabled):HOVER:before {top: 0; right: 0; bottom: 0; left: 0; opacity: 1;}
.iPressRound:not(.exclamation):not(.disabled):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;}
.i48, svg.i48 {width: 3.6em; height: 3.6em;}
.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 ------- //////////////////////// */