/* Общие стили */
* { box-sizing: border-box !important; scrollbar-color: gray #e4e4e4; scrollbar-width: thin; }
html,body,div,span,h1,h2,h3,p,a,img,strong,ul,ol,li,form,label,table,tbody,thead,tr,th,td{margin:0px;padding:0px;border:0px;outline:0px;font-weight:inherit;font-style:inherit;font-size:100%}
html,body{background:#fff;color:#444;font-family:tahoma,arial,sans-serif;font-size:10pt;height:100%;width:100%;}
h1,h2{font-family:trebuchet ms,georgia,sans-serif;font-weight:bold;overflow:hidden;font-weight:normal;color:#444}
h1{font-size:18pt;margin-bottom:16px}
h2{font-size:16pt;margin-bottom:15px}
h3{font-size:12pt;font-weight:bold;margin-bottom:10px}
p{margin-bottom:10px;margin-top:5px}
a{color: #555;text-decoration:underline}
a:hover{color:#999}
a.dotted { text-decoration: none; border-bottom: 1px dashed black; }
input[type=text],input[type=password],input[type=submit],input[type=button],input[type=file],textarea,select{border:1px solid #b2b2b2;background:#fff;color:#444;font-family:tahoma,arial,sans-serif;font-size:10pt;padding:2px; border-radius: 2px}
input[type=checkbox]{vertical-align:middle}
textarea{resize:none; padding:2px}
input[type=submit],input[type=button]{background-color:#f0f0f0;padding:4px 5px}
input[type=submit]:hover{background-color:#ddd}
input[type=button]:hover{background-color:#ddd}
hr.tight { margin: 0; height: 1px; border: none; background-color: black; }
hr.normal { height: 1px; border: none; background-color: silver; }
.readonly { background-color: #eee !important; }
.red { color: red; }
.green { color: green; }
.hidden { display: none !important; }
.center { text-align: center; }

/* Всплывающие сообщения */
.message-ok { display: none; color: green; border: 1px solid green; border-radius: 3px; padding: 5px }
.message-error { display: none; color: red; border: 1px solid red; border-radius: 3px; padding: 5px }
.inline-hint { position: absolute; right: -20px; top: 7px; background: url(../images/question.png) left center no-repeat; background-size: contain; width: 16px; height: 16px; }

/* Классы с иконками кнопок */
.login-button { background: url('../images/login.png') left center no-repeat !important }
.new-button { background: url('../images/add.png') left center no-repeat !important }
.new-sub-button { background: url('../images/add_sub.png') left center no-repeat !important }
.edit-button { background: url('../images/edit.png') left center no-repeat !important }
.copy-button { background: url('../images/copy.png') left center no-repeat !important }
.delete-button { background: url('../images/delete.png') left center no-repeat !important }
.clear-button { background: url('../images/clear.png') left center no-repeat !important }
.save-button { background: url('../images/save.png') left center no-repeat !important }
.apply-button { background: url('../images/check.png') left center no-repeat !important }
.cancel-button { background: url('../images/cancel.png') left center no-repeat !important }
.info-button { background: url('../images/info.png') left center no-repeat !important }
.link-button { background: url('../images/link.png') left center no-repeat !important }
.default-button { background: url('../images/default.png') left center no-repeat !important }
.reload-button { background: url('../images/reload.png') left center no-repeat !important }
.file-button { background: url('../images/file.png') left center no-repeat !important }
.upload-button { background: url('../images/upload.png') left center no-repeat !important }
.export-button { background: url('../images/export.png') left center no-repeat !important }
.export-button-1 { background: url('../images/export_1.png') left center no-repeat !important }
.export-button-2 { background: url('../images/export_2.png') left center no-repeat !important }
.export-button-pos { background: url('../images/export_pos.png') left center no-repeat !important }
.select-all-button { background: url('../images/small_cb_checked_hover.png') left center no-repeat !important }
.clear-all-button { background: url('../images/small_cb_hover.png') left center no-repeat !important }
.filter-button { background: url('../images/search.png') left center no-repeat !important }
.filter-reset-button { background: url('../images/cancel.png') left center no-repeat !important }
.excel-button { background: url('../images/excel.png') left center no-repeat !important }
.run-button { background: url('../images/run.png') left center no-repeat !important }
.up-button { background: url('../images/up.png') left center no-repeat !important }
.down-button { background: url('../images/down.png') left center no-repeat !important }
.data-button { background: url('../images/data.png') left center no-repeat !important }
.bulb-button { background: url('../images/bulb.png') left center no-repeat !important }
.docws-button { background: url('../images/doc_ws.png') left center no-repeat !important }
.docwos-button { background: url('../images/doc_wos.png') left center no-repeat !important }
.send-button { background: url('../images/send.png') left center no-repeat !important }
.zero-button { background: url('../images/zero.png') left center no-repeat !important }

/* Стили для базовых элементов страниц */
.content { height: calc(100% - 30px - 15px); overflow: auto; }
.header-admin { height: 30px; background:#777; position: relative; margin: 0; top: 0; width: 100%; z-index: 100; }
.header-client { height:35px; background:#03535f; position: relative; margin: 0; top: 0; width: 100%; z-index: 100; }
.header-client .logo { position: absolute; top: 5px; left: 40px; }
.header-client .logo a { text-shadow: 3px 3px 3px #CECECE; color: white; text-decoration: none; font-size: 18px; }
.footer-admin { background:#ededed url('../images/footer-bg.png') left top repeat-x; height: 15px; padding-top: 1px; text-align: center; position: fixed; bottom: 0; width: 100%; font-size: 10px}
.footer-client { background:#03535f url('../images/footer-bg.png') left top repeat-x; height: 15px; padding-top: 1px; text-align: center; position: fixed; bottom: 0; width: 100%; font-size: 10px; color: white; }
.client-content-container { display: flex; /*height: calc(100% - 35px - 15px);*/ padding-bottom: 20px; }
.client-content-container .client-menu { width: 230px; min-width: 230px; padding-right: 2px; height: 100%; border-right: 1px silver solid; }
.client-content-container .client-content { height: 100%; width: 100%; padding: 1px; }
#preloaded-images { position: absolute; top: -9999px; }

/* Рамки */
.frame { padding: 10px;border: 1px solid #ccc;border-radius:3px;-moz-border-radius:3px;-khtml-border-radius:3px }
.frame-2 { padding: 5px; border: 1px solid #eee !important; border-radius: 3px !important; -moz-border-radius: 3px !important; -webkit-border-radius: 3px !important }
.frame-2-1 { padding: 5px; border: 1px solid #b2b2b2 !important; border-radius: 2px !important; -moz-border-radius: 2px !important; -webkit-border-radius: 2px !important }
.frame-3 { padding: 10px;border: 1px solid #ccc;border-radius:3px;-moz-border-radius:3px;-khtml-border-radius:3px; -webkit-box-shadow: 0px 0px 15px rgba(50, 50, 50, 0.75); -moz-box-shadow: 0px 0px 15px rgba(50, 50, 50, 0.75); box-shadow: 0px 0px 15px rgba(50, 50, 50, 0.75) }
.frame-invisible { padding: 10px; }

/* Панель инструментов (обычная и большая) */
.toolbar, .toolbar-large { background-color: #F5F5F5; padding: 5px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; display: flex; align-items: center; }
.toolbar { }
.toolbar-large button { font-size: 0.9em !important }
.toolbar-button { height: 30px; width: 32px}
.toolbar input[type="text"] {height: 22px; padding: 2px 3px}
.toolbar .custom-command-button  { width: auto; }

/* Форма авторизации */
.authenticate-form-container {display: flex; height: 100%;}
.authenticate-form{min-width:320px;overflow:hidden;position:relative;padding:10px 20px 5px 20px;margin: auto auto;border:1px solid #ccc;border-radius:4px;-moz-border-radius:4px;-khtml-border-radius:4px;box-shadow: 3px 2px #eee;}
.authenticate-form a{text-decoration:underline}
.authenticate-form a:hover{text-decoration:none}
.authenticate-form h1 {text-align:center}
.authenticate-form .button-block { display: flex; justify-content: space-between; align-items: center; }
.authenticate-form .button-block-center { display: flex; justify-content: center; align-items: center; }
.authenticate-form .error-block { color: red; height: 30px; text-align: center; }
.authenticate-form .counter-block { height: 30px; text-align: center; }

/* Формы регистрации, подтверждения аккаунта и восстановления пароля */
.registrate-form-container {display: flex; height: auto; flex-direction: column; align-items: center; }
.registrate-form {width:650px;overflow:hidden;position:relative;padding:10px 20px 5px 20px;/*margin: auto auto;*/border:1px solid #ccc;border-radius:4px;box-shadow: 3px 2px #eee;}
.registrate-form a{text-decoration:underline}
.registrate-form a:hover{text-decoration:none}
.registrate-form h1 {text-align:center}
.registrate-form .button-block { display: flex; justify-content: space-between; align-items: center; }
.registrate-form .error-block { color: red; height: 30px; text-align: center; }
.registrate-form .ok-block { color: green; height: 30px; text-align: center; display: none; }
.registrate-form .privacy {height: 400px; overflow-y: auto; overflow-x: auto; text-align: left;}

/* Инфопанель */
.account-info {position:absolute;right:15px;top:5px;color:#fff;padding:4px 0 2px 0;background:#bbb;border:1px solid #777;border-radius:3px; }
.account-info-admin {top:1px !important}
.account-info-client {top:1px !important; background:#81adb4 !important; border:1px solid #003366 !important }
.account-info a{color:#fff}
.account-info li{display:block;float:left;padding:0 10px 0 10px;color:#fff; border-right:none;}
.account-info-client li { line-height: 20px; }
.account-info a {padding-left:20px;padding-bottom:2px;height:14px}
.account-info .balance a{background:url('../images/wallet.png') left center no-repeat;}
.account-info .settings a{background:url('../images/profile.png') left center no-repeat;}
.account-info .signout a{background:url('../images/logout.png') left center no-repeat;}
.account-info .manual a{background:url('../images/question.png') left center no-repeat; padding-top: 4px;}

/* Главное меню - администраивная панель */
.main-menu-container { padding-left: 30px }
.main-menu-nav { list-style: none; }
.main-menu-nav:before, .main-menu-nav:after { content: " ";  display: table; }
.main-menu-nav:after { clear: both; }
.main-menu-nav ul { list-style: none; width: 9em; }
.main-menu-nav a { padding: 5px 10px; color:#fff; text-decoration: none; }
.main-menu-nav li { position: relative; }
.main-menu-nav > li { float: left; height: 30px; transition: 0.2s; }
.main-menu-nav > li > .parent { background-image: url("../images/down_arrow.png"); background-repeat: no-repeat; background-position: right; }
.main-menu-nav li li { width: 200px; box-shadow: 0px 0px 10px #222; }
.main-menu-nav > li li > .parent { background-image: url("../images/right_arrow.png"); background-repeat: no-repeat; background-position: 95% 50%; }
.main-menu-nav > li > a { display: block; }
.main-menu-nav > li > a:hover { display: block; color: #FFF6BF; }
.main-menu-nav > li:hover { background: #bbb; }
.main-menu-nav > li.active { background: #bbb; }
.main-menu-nav li  ul { position: absolute; left: -9999px; }
.main-menu-nav > li.hover > ul { left: 0; }
.main-menu-nav li li.hover ul { left: 100%; top: 0; }
.main-menu-nav li li a { display: block; background: #eee; position: relative; z-index: 100; border-bottom: 1px solid #969696; border-left: 1px solid #969696; border-right: 1px solid #969696; color: #444; }
.main-menu-nav li li a:hover { background-color: #bbb; color: white; }
.main-menu-nav li li:first-child { border-top: 1px solid #969696; }
.main-menu-nav li li li a { background:#eee; z-index:200; border-bottom: 1px solid #969696; border-left: 1px solid #969696; border-right: 1px solid #969696; color: #444; }
.main-menu-nav li li li a:hover { background-color: #bbb; color: white; }
.main-menu-nav li li li:first-child { border-top: 1px solid #969696; }

/* Главное меню - личный кабинет клиента */
.main-menu-client a { padding: 5px 5px 5px 30px; text-decoration: none; display: block; }
.main-menu-client a:hover { background-color: #e4e4e4; }
.main-menu-client a.active { background-color: #81adb4; color: white; font-weight: bold; }

/* Таблица с тремя колонками для форм редактирования (h_list) */
.form-table { }
.form-table .left-column { text-align: right; padding-right: 5px; width: 30%; font-style: italic; }
.form-table .right-column { text-align: left; }
.form-table .center-column { text-align: center; vertical-align: middle; }

/* Таблица с данными */
.data-table { border: 1px solid #eee; }
.data-table th { text-align: center; font-weight: bold; background-color: #eee; padding: 3px; }
.data-table td { text-align: center; padding: 3px;}
.data-table tr:nth-child(even) td { text-align: center; background-color: #f9f9f9; }
.data-table .total { font-weight: bold; background-color: #eee !important; }
.data-table td.left { text-align: left !important;}
.data-table td.right { text-align: right !important;}
.data-table td.bold { font-weight: bold; width: 200px; }

/* Таблица с формой */
.ctrl-table.fw { width: 100%; }
.ctrl-table.mw { width: 500px; }
.ctrl-table.lw { width: 800px; }
.ctrl-table td { text-align: center; padding: 5px 3px; position: relative; }
.ctrl-table td.w30prc { width: 30%; }
.ctrl-table td.w200px { width: 200px; }
.ctrl-table td.fw input[type=text], .ctrl-table td.fw textarea, .ctrl-table td.fw select { width: 100% !important; }
.ctrl-table td.left { text-align: left !important;}
.ctrl-table td.right { text-align: right !important;}
.ctrl-table td.bold { font-weight: bold; width: 200px; }

/* Страница статуса и виджеты */
.status-container { margin-bottom: 10px; }
.status-container .top-block { height: auto; clear: both; }
.status-container .bottom-block { height: auto; clear: both;}
.status-container .left-area { width: 50%; height: 100%; float: left; }
.status-container .right-area { width: 50%; height: 100%; float: left; }
.status-container .widget { border: 1px solid #969696; border-radius: 3px; height: 100%; margin: 5px 5px 0 5px; padding: 3px; position:relative; overflow: hidden; }
.status-container .widget .header { background-color: #969696; background: linear-gradient(to top, #c6c6c6, #969696); color: white; font-weight: bold; margin: -3px -3px 0 -3px; padding: 3px }

/* Селектор с вертикальным меню */
.app-selector { border-radius: 3px; border: 1px solid #efefef; list-style: none; }
.app-selector .ui-selectee { padding: 2px 5px; cursor: pointer; }
.app-selector .ui-selecting { background: #efefef; }
.app-selector .ui-selected, .app-selector .ui-selected span  { background: #b2b2b2; color: white !important; }

/* Селектор с чекбоксами */
.app-checkbox {padding: 0; font-weight: inherit; font-size: 12px; width: 96%; display: inline-block; vertical-align: middle }
.app-highlight-checkbox { color: white; background-color: #5cb85c !important; border-radius:2px;-moz-border-radius:2px;-khtml-border-radius:2px;}

/* Ссылки для выбора диапазона дат */
.date-period-links { display: inline }
.date-period-links a { text-decoration: none !important; border-bottom-style: dashed; border-bottom-width: 1px; margin: 0 5px; font-size: 12px  }

/* Режим "fullscreen" для ACE Editor */
.fullScreen .fullScreen-editor { height: auto!important; width: auto!important; border: 0; margin: 0; position: fixed !important; top: 0; bottom: 0; left: 0; right: 0; z-index: 10000 }
.fullScreen { overflow: hidden }
.fullScreen-hint { position: absolute; right: 2px; top: 2px; z-index: 10001; opacity: 0.5; font-size: 8px; }

/* Модифицированный jqGrid + проктуртка  */
.ui-jqgrid .ui-jqgrid-bdiv {  overflow: hidden !important; }
.ui-state-highlight { background: #eee !important; border-color: #ddd !important }
.ui-widget-content .jqgroup { background: #eee !important }
.ui-jqgrid-htable th div { height: auto !important; padding: 1px; }
.ui-jqgrid tr.jqgrow td { white-space: normal !important; position: relative; }
.scrollable-grid .ui-jqgrid-htable th div { height: auto !important; padding: 1px; }
.scrollable-grid .ui-state-highlight { background: #efefef !important; border-color: #ddd !important }
.scrollable-grid .ui-jqgrid-bdiv { overflow-x: hidden !important; overflow-y: auto !important }
.ui-jqgrid .inplace-edit-field { width: 100%; box-sizing: border-box; text-align: center; }
.ui-jqgrid tr.jqgrow td { font-size:0.98em; word-wrap: break-word; }
.ui-jqgrid tr.jqgrow td[role=gridcell]:before,
.ui-jqgrid tr[role=rowheader] th:before { content: attr(data-hint); position: absolute; right: 2px; top: 4px; color: gray; }
.ui-jqgrid tr[role=rowheader] th { position: relative; }
.ui-jqgrid input[role=textbox]:focus-visible { outline: none; }

/* Модифицированные общие классы jQueryUI  */
.ui-dialog .ui-dialog-titlebar-close { display: none !important }
.ui-accordion .ui-accordion-content { padding: 5px !important }
.ui-accordion-header.ui-state-active { border-color: #c5c5c5; background-color: #f6f6f6; color: inherit; }
.ui-accordion-header.ui-state-active .ui-icon { background-image: url("../js/jquery-ui/images/ui-icons_444444_256x240.png"); }
.ui-button { font-size: 1em !important;}
.ui-tooltip { white-space: pre-line; }
.ui-tabs .ui-tabs-nav .ui-tabs-anchor { padding: .2em .5em !important; display: flex; align-items: center; }
.ui-tabs .ui-tabs-nav .ui-tabs-anchor img { margin-right: .4em; }
.ui-dialog .ui-dialog-buttonpane {padding: 0 1em !important; }
.ui-dialog .ui-dialog-content { padding: 1em !important; }
.ui-widget-overlay { opacity: 0.5 !important; }
.ui-tabs .ui-tabs-panel { padding: 0.4em !important; }
div.ui-widget { font-size: 13px; }
.client-content-container .ui-tabs-active { background-color: #81adb4 !important; border-color: #03535f !important; }


/* Модифицированные компоненты jQueryUI timepicker и datepicker, а также дополнительные классы для контролов к ним */
.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; display:none}
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { height: 25px !important; margin-bottom: -25px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 65px;}
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }
.ui-timepicker-rtl{ direction: rtl; }
.ui-timepicker-rtl dl { text-align: right;}
.ui-timepicker-rtl dl dd { margin: 0 65px 10px 10px;}
.datetimepicker{width:125px !important; padding-right:20px !important;background:#fff url('../images/clock.png') 105px center no-repeat !important}
.datepicker{width:90px !important; padding-right:20px !important; background:#fff url('../images/calendar.png') 70px center no-repeat !important}
.timepicker{width:70px !important; padding-right:20px !important;background:#fff url('../images/clock.png') 50px center no-repeat !important}

/* Вертикальные tabs*/
.ui-tabs-vertical { width: 100%; }
.ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 24%; }
.ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
.ui-tabs-vertical .ui-tabs-nav li a { display:block; font-size: 11px; width: 99%; }
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; }
.ui-tabs-vertical .ui-tabs-panel { padding: 0 !important; float: right; width: 75%;}

/* Модифицированный чекбокс */
.checkbox-container { display: block; position: relative; padding-left: 25px; cursor: pointer; line-height: 25px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.checkbox-container input { display: none; }
.checkbox-container .checkmark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background: url(../images/small_cb.png) center center no-repeat; }
.checkbox-container:hover input ~ .checkmark { background: url(../images/small_cb_hover.png) center center no-repeat; }
.checkbox-container input:checked ~ .checkmark { background: url(../images/small_cb_checked.png) center center no-repeat; }
.checkbox-container:hover input:checked ~ .checkmark { background: url(../images/small_cb_checked_hover.png) center center no-repeat; }
.checkbox-container .container input:checked ~ .checkmark:after { display: block; }

/* Select2 с выбором нескольких элементов */
.select2 .select2-search__field { width: 250px !important; }
.select2-container--default.select2-container--focus .select2-selection--multiple { border-color: #bbb !important; max-height: 100px; overflow-y: auto }
.select2-container--default .select2-selection--multiple .select2-selection__choice { padding: 2px 5px !important; }
.select2-container--default .select2-selection--multiple .select2-selection__rendered { padding: 0 5px 4px 5px !important; }
.select2-container--default .select2-selection--single { border-radius: 2px !important; }
.select2-selection__rendered { line-height: 22px !important; }
.select2-container .select2-selection--single { height: 24px !important; }
.select2-selection__arrow { height: 22px !important; }

/* Отчеты */
.report-control-container { display: flex; align-items: center; }
.report-control-label { display: inline-flex; width: 150px; padding: 5px; justify-content: right; }
.report-control-area { display: inline-flex; text-align: left; min-width: 400px; }
.report-control-hint { display: inline-flex; text-align: left; font-size: 0.8em; padding: 5px; }
.report-control-divider { position: relative; display: inline-flex; width: 100%; justify-content: center; }
.report-control-divider div { width: 100%; height: 50%; border-bottom: 1px solid silver; position: absolute; z-index: 1; }
.report-control-divider span { background-color: #F3F5F6; color: silver; padding: 5px 10px; z-index: 2; border-radius: 3px; }
.report-control { width: 100%; }

/************************************************* Разное *************************************************/
/* Счетчики числа символов и частей */
.parts-counter { color: #666; text-align: left; }

/* Контейнер для текстового поля с кнопкой */
.field-with-button { display: inline-flex; }
.field-with-button input[type=text] { display: inline-flex; width: 200px; margin-right: 0.1em; background: #eee; }
.field-with-button button { padding: 0.1em 0.1em !important; }

/* Контейнер для текста СМС в списке */
.sms-text-grid-container { position: relative; padding-right: 30px; }
.sms-text-grid-container div { position: absolute; top: 1px; right: 1px; font-size: 0.7em; color: white; border-radius: 2px; padding: 1px 2px; opacity: 0.9; }
.sms-text-grid-container div.gsm7 { background: gray; }
.sms-text-grid-container div.ucs2 { background: navy; }

/* Контейнер для текста Viber в списке */
.vbr-text-grid-container { position: relative; padding-right: 35px; min-height: 35px; }
.vbr-text-grid-container .type { position: absolute; top: 1px; right: 1px; font-size: 0.8em; color: white; border-radius: 2px; padding: 1px 2px; opacity: 0.9; }
.vbr-text-grid-container .transactional { background: black; }
.vbr-text-grid-container .advertising { background: green; }
.vbr-text-grid-container .icons { position: absolute; bottom: 1px; right: 1px; width: 48px; display: flex; align-items: flex-end; justify-content: flex-end; }
.vbr-text-grid-container .icon { display: flex; }
.vbr-text-hint .title { font-weight: bold !important; padding-bottom: 3px; }

/* Контейнер для даты/времени сообщений в спсике */
.msg-dates-grid-container { position: relative; }
.msg-dates-grid-container div { cursor: help; }
.msg-dates-grid-container div:nth-child(1) { color: silver; }
.msg-dates-grid-container div:nth-child(2) { color: gray; }
.msg-dates-grid-container div:nth-child(3) { color: black; }

/* Контейнер для информации о биллинге сообщений в списке */
.msg-billing-grid-container { position: relative; }
.msg-billing-grid-container div { cursor: help; }
.msg-billing-grid-container div:nth-child(1) { color: gray; }
.msg-billing-grid-container div:nth-child(2) { color: black; }

/* Контейнер для дополнительной информауии по рассылке */
.bulk-extra-grid-container { position: relative; }
.bulk-extra-grid-container div:before { background-image: url(../images/status_green.png); background-size: 6px 6px; background-repeat: no-repeat; display: inline-block; width: 8px; height: 6px; content: ""; }

/* Модуль списка элементов */
.item-list__container { display: block; height: 450px; padding: 5px; overflow-y: auto; overflow-x: hidden; }
.item-list__item { display: flex; width: 100%; justify-content: space-between; padding: 5px; background-color: #f6f6f6; border-radius: 3px; margin-bottom: 5px; }
.item-list__item.center { justify-content: center; }
.item-list__text { padding-left: 25px; cursor: pointer; flex-grow: 1; white-space: pre; background: url(../images/status_off.png) left top no-repeat; }
.item-list__text.active { background: url(../images/status_good.png) left top no-repeat; }
.item-list__btn_del { background: url(../images/delete.png) center center no-repeat; cursor: pointer; width: 30px; }
.item-list__btn_new { width: 100%; margin-top: 10px; }

/* Мессенджер */
.messenger-info-panel {  }
.messenger-info-panel a { position: relative; background: url('../images/mail.png') left 1px no-repeat; width: 24px; display: inline-block; }
.messenger-info-panel a span { position: absolute; right: 0; bottom: -3px; border-radius: 5px; background-color: red; font-size: 8px; padding: 0 2px; min-width: 10px; text-align: center; line-height: 10px; color: white; }

.messenger { display: flex; height: 100%; }
.messenger .sidebar { width: 350px; height: 100%; overflow: auto; scrollbar-color: gray #e4e4e4; scrollbar-width: thin; }
.messenger .sidebar .chat-button { position: relative; border-bottom: 1px silver solid; background-color: #F5F5F5; width: 100%; height: 50px; line-height: 50px; cursor: pointer; text-align: center; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding-left: 20px; }
.messenger .sidebar .chat-button:hover { background-color: #007fff; color: white; }
.messenger .sidebar .chat-button.active { background-color: #007ffe; color: white; }
.messenger .sidebar .chat-notif-button { background: url(../images/notif_chat.png) 10px center no-repeat #F5F5F5; background-size: 40px; padding-left: 20px; }
.messenger .sidebar .chat-button .date-time { position: absolute; top: 3px; right: 3px; font-size: 10px; line-height: initial; }
.messenger .sidebar .chat-button .has-new { position: absolute; top: 3px; left: 3px; padding: 1px 5px; background-color: #0D29FC; color: white; border-radius: 5px; font-size: 10px; line-height: initial; }

.messenger .main { height: 100%; width: 100%; display: flex; flex-direction: column; }
.messenger .main .list { height: 100%; }
.messenger .main .list { padding: 10px; background-color: #60a6c2; overflow: auto; scrollbar-color: gray #e4e4e4; scrollbar-width: thin; }
.messenger .main .list .message { padding: 5px; border-radius: 3px; position: relative; margin-bottom: 20px; }
.messenger .main .list .message .date-time { font-size: 10px; text-align: left; margin-bottom: 5px; }
.messenger .main .list .message .date-time.new:before { content: ""; width: 10px; height: 10px; position: absolute; background-color: #0D29FC; border-radius: 50%; right: 10px; top: 10px; }
.messenger .main .list .message .date-time.readed:before { content: ""; width: 16px; height: 16px; position: absolute; background: url(../images/check.png) no-repeat; right: 5px; top: 5px; cursor: pointer }
.messenger .main .list .message .text { word-break: break-all; }
.messenger .main .list .message-other { margin-right: 51%; background-color: white; }
.messenger .main .list .message-other:after { content: ""; width: 0px; height: 0px; position: absolute; border-left: 10px solid white; border-right: 10px solid transparent; border-top: 10px solid white; border-bottom: 10px solid transparent; left: 10px; bottom: -15px;  }
.messenger .main .list .message-my { margin-left: 51%; background-color: #EFFDDE; }
.messenger .main .list .message-my:after { content: ""; width: 0px; height: 0px; position: absolute; border-left: 10px solid transparent; border-right: 10px solid #EFFDDE; border-top: 10px solid #EFFDDE; border-bottom: 10px solid transparent; right: 10px; bottom: -15px; }
.messenger .main .new-message-area { display: flex; justify-content: flex-start; height: 100px; }
.messenger .main .new-message-area .textarea { border: 1px silver solid; border-radius: 2px; padding: 3px 5px; height: 90px; width: 100%; overflow: auto; scrollbar-color: gray #e4e4e4; scrollbar-width: thin; word-break: break-all;  }
.messenger .main .new-message-area .textarea:focus { outline: none; }
.messenger .main .new-message-area .button { position: relative; border: 1px silver solid; border-radius: 2px; padding: 3px; width: 100px; height: 90px; cursor: pointer; background: url(../images/mail_send.png) center 10px no-repeat #F5F5F5; background-size: 50px; }
.messenger .main .new-message-area .button:hover { background-color: #007fff; color: white; }
.messenger .main .new-message-area .button .title { position: absolute; left: 0; width: 100%; text-align: center; bottom: 10px; }

/* Загрузка изображений */
.image-group { position: relative; display: flex; align-items: center; }
.image-group .upload-image { height: 50px; }
.image-group .cancel-upload { height: 50px; }
.image-group .delete-image { height: 30px; }
.image-group .button-group-vertical { width: 100px; margin-left: 10px; }
.image-preview { position: relative; line-height: 100%; display: inline-block; }
.image-preview img { max-height: 360px; max-width: 360px; border: 1px solid silver; }
.image-preview div { position: absolute; top: 0; width: 100%; display: none; height: 100%; justify-content: center; align-items: center; }
.image-preview:hover div { background-color: white; display: flex; opacity: 0.8; font-weight: bold; }

.image-crop { height: 400px !important; margin-bottom: 90px; }
.image-group .crop-block { display: flex; align-items: center; }

/* Эмоджи */
.emoji-button { height: 36px; width: 36px; background: url('../images/emoji.png') center center no-repeat; display: inline-block; position: absolute; left: -40px; bottom: -5px; border-bottom: none !important; }
.emoji-menu a { text-decoration: none; }

/* Плейсхолдеры полей для рассылки, кнопки "Отправить" и т.п. */
.template-placeholders { display: inline-block; margin-top: 20px; position: relative; }
.template-placeholders a { text-decoration: none; border-bottom: 1px dashed black; }
.send-test { display: inline-block; margin-top: 20px; }
.send-test button { padding: 2px 10px; }

/* Оплата, платежные системы и т.п. */
.charge-title { padding: 15px 30px; margin: 0; }
.payment-system-container { display: flex; align-items: center; justify-content: flex-start; padding: 30px; }
.payment-system-container .payment-system { display: flex; flex-direction: column; align-items: center; margin-right: 30px; padding: 15px; border: 1px solid silver; cursor: pointer; }
.payment-system-container .payment-system:hover { background-color: #eee; }
.payment-system-container .payment-system .img-container { width: 150px; height: 100px; display: flex; justify-content: center; align-items: center; }
.payment-system-container .payment-system .img-container img { width: 100%; }
.available-messages-container { padding: 15px 30px; }

/* Предупреждающий заголовок со списком */
.warning-title { color: red; font-size: larger; font-weight: bold; }
.warning-title ul { padding-left: 2em; font-weight: normal; }