/*
	Стили, взятые из html
*/

td.top_1_2 {
    width: 100%;
    height: 90%;
    background: url('../img/backgrounds/top_1_2_110.gif') repeat-x 0px 0px;
}

div.top_1_1 {
    background: url('../img/backgrounds/top_1_1_117.gif') no-repeat 100% 0px;
}

div.top_1_3 {
    background: url('../img/backgrounds/top_1_3_110.gif') no-repeat 0px 0px;
}

td.login_1 {
    height: 2%;
    background: url('../img/backgrounds/login_1.gif') no-repeat 50% 0px;
    padding: 14px 0 0 0;
}

img.cross_1 {
    position: absolute;
    right: 70px;
    top: -13px;
}

/* Cтиль заголовка в шапке страницы */
td.siteTitle {
    width: 30%;
    white-space: nowrap;
    padding: 53px 20px 0 0;
}

/* Стиль для ячейки лого на странице входа */
td.logo {
    width: 1%;
    padding: 0 15px 10px 0;
}

/* Стиль для ячейки лого в шапке */
td.logoHeader {
    width: 1%;
    padding: 15px 0 0 0;
}

/* 
	Добавленые стили
*/
table td.right {
    text-align: right;
}

table td.center {
    text-align: center;
}

table.table_3 td span.negativeNumber {
    color: red;
}

table.list-grid td {
    /* Клиенты жаловались, что столбцы слишком широкие, если там длинная ссылка. */
    max-width: 300px;
    overflow-wrap: break-word;
}

/*
    В столбце с корзиной используются " ", и на них
    не действует "overflow-wrap: break-word;", поэтому для
    столбца с корзиной устанавливаем отдельный max-width,
    максимально широкий.
*/
table.list-grid td.basketItem {
    max-width: 1000px;
}

.details-view td {
    max-width: 300px;
    word-wrap: break-word;
}

negativeNumber {
    white-space: nowrap;
    color: red;
}

/* (МГ) Не включаю сюда input[type="button"], иначе текст кнопок Бутстрап будет некорректным. */
input[type="text"], input[type="number"], input[type="date"], input[type="password"], select, textarea {
    color: #000000 !important;
}

/* (МГ) Убрать эти стили, когда подключим кнопки Bootstrap. */
/*input[type="button"], input[type="submit"] {
    color: #000000 !important;
}*/

/* Ссылки в заголовке грида */
table.table_3 th a:link,
table.table_3 th a:visited,
table.table_3 th a:hover {
    font-weight: bold;
    font-size: 12px;
    color: #FFFFFF;
}

table.col1 th a:link,
table.col1 th a:visited,
table.col1 th a:hover {
    font-weight: bold;
    font-size: 12px;
    color: #FFFFFF;
}

/* Пейджер */
table tr.pager td {
    border-bottom: 1px solid #FFFFFF !important;
    border-right: 1px solid #FFFFFF !important;
    border-left: 1px solid #FFFFFF !important;
}

table td.pager_template_left {
    text-align: left;
    border: 1px solid #FFFFFF !important;
}

table td.pager_template_right {
    text-align: right;
    border: 1px solid #FFFFFF !important;
}

table td.pager_template_left span {
    color: #3B3B3B !important;
}

/* Цвет текста в таблицах */
table.table_3 td {
    color: #3B3B3B;
}

/* Текст элемента хлембных крошек, который не является ссылкой */
.b-path ul li {
    color: #CBDFF5;
}

/* Класс для таблице редактирования */
td.label {
    vertical-align: middle;
    padding: 5px 5px 5px 0;
}

td.control {
    vertical-align: middle;
}

    td.control div.help {
        font-size: 10px;
        color: #606060;
        padding: 0px 0px 3px 0px;
    }

/* Стиль гиперссылок "Подробнее". */
/* Не понятно почему в ИЕ без !important 
 * текст отображается не жирным, хотя в вёрстке все ок 
 * возможно из-за стилей в custom.css, но не ясно каких */
a.href_details {
    font-weight: bold !important;
}

/* Стиль гиперссылок в меню. */
/* Не понятно почему в ИЕ без !important 
 * текст отображается иногда подчеркнутым, хотя в вёрстке все ок 
 * возможно из-за стилей в custom.css, но не ясно каких */
.b-navside ul li a {
    text-decoration: none !important;
}

/* Текст ошибок валидации */
.errorMessage {
    color: Red !important;
    /*max-width: 500px;
    display: inline-block;*/
}

.errorMessage a {
    color: Red;
}

/* Заголовок для настроек аудита */
h3 {
    font: bold 12px Tahoma, Verdana, Arial;
    color: #0165B0;
    padding: 5px 0 5px 0;
    margin: 0 0 0 0;
}

/* Заголовк для настроек кабинета */
h4 {
    font: bold 12px Tahoma, Verdana, Arial;
    color: #0165B0;
    margin: 0 0 0 0;
}

/* Стиль для текста "Нет данных" в таблицах */
span.nodata {
    font: 12px Tahoma, Verdana, Arial;
    color: #808080 !important;
}

/* Стиль для текста комментариев к полям в таблицах */
.comment {
    font-size: 11px;
    color: gray;
    margin-bottom: 7px;
}

/* Стили для сортировки в гриде */
table.table_3 th div table {
    margin-left: auto;
    margin-right: auto;
    border-collapse: collapse;
    padding: 0px;
}

    table.table_3 th div table td {
        text-align: center;
        padding: 0px;
        border: none;
    }

/* Стиль для водяных знаков */
.watermark {
    color: #AAAAAA !important;
}

/* Стиль для списка с галками */
table.checkBoxList td {
    vertical-align: middle;
}

/* Стиль для выделения строк в стакане. */
tr.highlight td {
    font-weight: bold;
}

/* Стиль для выравнивания чисел в стакане. */
tr.right td {
    text-align: right;
}

tr.orderBook td {
    padding: 1px;
}

/* Стиль для ячеек с чекбоксом. */
td.checkBox {
    text-align: center;
}

/* Стиль для отступа, например, таблиц */
div.p {
    padding-top: 12px;
    padding-bottom: 12px;
}

/* Дополнительный стиль для названий полей форм. */
td.label_top {
    padding: 5px 5px 5px 0;
    vertical-align: top;
}

/* Ссылка на страницу клиента в шапке.  */
.clientDetails {
}

/* Стиль списков на странице соглашения */
ul.agreement {
    margin: 5px 0 10px 23px;
}

    ul.agreement li {
        background: none;
    }

        ul.agreement li ul {
            margin: 5px 0 10px 23px;
        }

/* Стиль для заголовка стаканов на главной веб-трейинга */
td.orderBookHeader {
    text-align: center;
    font: bold 12px Tahoma, Verdana, Arial;
    color: #0165B0;
}

/* Стиль для ссылки с пунктиром */
a.dot:link, a.dot:visited.dot, a.dot:hover {
    border-bottom: 1px dashed;
    text-decoration: none !important;
}

a.dot:hover {
    border-bottom: 1px dashed !important;
}

/* Стиль для ссылки с длинным пунктиром */
a.dashed:link, a.dashed:visited.dot, a.dashed:dashed {
    border-bottom: 3px dashed #016AB9;
    text-decoration: none !important;
}

a.dashed:hover {
    border-bottom: 3px dashed #D00000;
}

/* Класс CSS "disabled" есть и в Bootstrap. */
a.disabled, a.btn-link.disabled {
    color: #808080 !important;
    cursor: default;
    text-decoration: none !important;
    border-bottom: 0px !important;
    opacity: 1;
}

/* Стили для календаря */

.calendar-date li {
    width: 28px;
    height: 19px;
}

.calendar-date a {
    text-align: center;
}

.calendar-date .today {
    font-weight: bold;
}

.calendar-date .active {
    text-align: center;
}

    .calendar-date .active:hover {
        text-align: center;
    }

/* Стили для отмечания дат в календаре ежедневных брокерских фиксированных отчетов */
a.fixedReportRead:link, a.fixedReportRead:visited, a.fixedReportRead:hover {
    font: 12px Tahoma, Verdana, Arial !important;
    color: #016AB9 !important;
    text-decoration: underline !important;
}

a.fixedReportNotRead:link, a.fixedReportNotRead:visited, a.fixedReportNotRead:hover {
    font: bold 12px Tahoma, Verdana, Arial !important;
    color: #016AB9 !important;
    text-decoration: underline !important;
}

a.fixedReportBackofficeConfirmed:link, a.fixedReportBackofficeConfirmed:visited, a.fixedReportBackofficeConfirmed:hover {
    font: 12px Tahoma, Verdana, Arial !important;
    color: #016AB9 !important;
    background: #B4D2E9 !important;
    text-decoration: underline !important;
}

/* Стили для resizable */
.coverContainer {
    border: 1px solid #016AB9;
}

.resizableSlider {
    background-color: #EEEEEE;
    border-color: #DDDDDD;
    border-style: solid;
    border-width: 0 1px 1px;
    cursor: s-resize;
    margin-right: -8px !important;
    overflow: hidden;
}

/* Стили для collapsible panel */
.collapsiblepanel {
}

.collapsiblepanel-header {
    -webkit-border-top-left-radius: 3px;
    -webkit-border-top-right-radius: 3px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-topright: 3px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    cursor: pointer;
    height: 21px;
    font-size: 12px;
    background: url('../img/backgrounds/table_th_1.gif') repeat-x 0px 0px #F57424;
}

.collapsiblepanel-header-text {
    float: left;
    padding-left: 4px;
    padding-top: 2px;
    color: #fff;
    font-weight: bold;
}

.collapsiblepanel-image-container {
    margin-top: 2px;
    margin-right: 2px;
    float: right;
}

.collapsiblepanel-image-container-collapsed {
    width: 16px;
    height: 16px;
    background: url('../img/bullet-toggle-plus.png') repeat-x -8px -8px;
}

.collapsiblepanel-image-container-expanded {
    width: 16px;
    height: 16px;
    background: url('../img/bullet-toggle-minus.png') repeat-x -8px -8px;
}

.collapsiblepanel-content {
    border: 0px;
    border-left: 1px solid #dde4e9;
    border-right: 1px solid #dde4e9;
    border-bottom: 1px solid #dde4e9;
}

.collapsiblepanel-expanded {
}

.collapsiblepanel-collapsed {
}

/* Стили для таблицы ДС */
table.messageChainTable td {
    color: #525252;
    padding: 7px;
    border: 1px solid #DDE4E9;
}

/* Стиль для затухания аджакс таблицы */
td.faded {
    filter: alpha(opacity=60);
    opacity: 0.6;
}

/* Стили для email сообщений */
.mailMessage {
    padding-top: 3px;
    margin-bottom: 10px;
    border: 1px solid #DDE4E9;
    border-top: 1px solid #DDE4E9;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

.mailMessageCaption {
    white-space: nowrap;
}

.mailMessageText {
    margin: 7px 15px; /*padding-bottom: 20px;*/
}

.mailMessageFiles {
    margin: 5px 15px 15px 15px;
}

.mailMessageReply {
    background: #EEF1F3;
    -webkit-border-bottom-left-radius: 2px;
    -webkit-border-bottom-right-radius: 2px;
    -moz-border-radius-bottomleft: 2px;
    -moz-border-radius-bottomright: 2px;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    padding: 0;
    margin: 0;
    width: auto;
}

.mailMessageReplyButton {
    vertical-align: middle;
    padding: 4px 8px;
    white-space: nowrap;
    cursor: pointer;
}

.mailMessageReplyText {
    background-color: #CEE0F5; /* #C2D9F3; */
    -webkit-border-bottom-left-radius: 2px;
    -webkit-border-bottom-right-radius: 2px;
    -moz-border-radius-bottomleft: 2px;
    -moz-border-radius-bottomright: 2px;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
}

.table-fixed {
    table-layout: fixed;
}

.mailMessageReplyButtonSelected {
    background-color: #CEE0F5;
}

    .mailMessageReplyButtonSelected a {
    }

.mail-wrapped {
    overflow: hidden;
    white-space: nowrap;
}

.mail-text-header {
    border-right: 0px none !important;
}

.mail-text-item {
    border-right: 0px none !important;
}

.mail-paperClip-item {
    border-left: 0px none !important;
}

.chat-wrapped {
    word-wrap: break-word;
    overflow: hidden;
}

.chat-userName {
    font: bold 12px Tahoma, Verdana, Arial;
    color: #3B3B3B;
}

.chat-activeUserName {
    font: bold 12px Tahoma, Verdana, Arial;
    color: #0165B0;
}

.chat-date {
    text-align: center;
    color: #AAAAAA;
}

.chat-alternate {
}

.chat-padded {
    padding-top: 5px;
}

.chat-userTyping {
    color: #AAAAAA;
}

/* TreeViewex */
.mjs-nestedSortable-error {
    background: #fbe3e4;
    border-color: transparent;
}

ol {
    padding-left: 25px;
}

    ol.sortable, ol.sortable ol {
        list-style-type: none;
        padding-left: 0px;
    }

.sortable li div {
    cursor: pointer;
}

/*.sortable li {
    cursor: move;
}*/

.nonsortable li {
    cursor: auto !important;
}

li.mjs-nestedSortable-collapsed.mjs-nestedSortable-hovering div {
    border-color: #999;
}

.disclose, .expandEditor {
    cursor: move;
    width: 20px;
    display: none;
}

.sortable li.mjs-nestedSortable-collapsed > ol {
    display: none;
}

.sortable li.mjs-nestedSortable-branch > div > .disclose {
    display: inline-block;
}

.sortable span.ui-icon {
    display: inline-block;
    margin: 0;
    padding: 0;
}

ol, ul, pre {
    margin-top: 0;
    /*margin-bottom: 1em;*/
}

.sortable ol {
    /*padding-bottom: 10px;
    border-bottom: 1px solid #DDE4E9;*/
}

.ui-sortable-helper ol {
    border-bottom: 0;
}

li.ui-sortable-helper {
    border-top: 1px solid #DDE4E9;
}

.placeholder {
    outline: 1px dashed #4183C4;
}

/*
    Горизонтальное меню с ссылками.
*/

/* horizontal menu */
p.horizontalMenu {
    margin-top: 3px;
    margin-bottom: 15px;
}

/* Стиль для текущего (активного) элемента горизонтального меню. */
.horizontalMenu > span.horizontal-menu-item {
    background-color: #3697DE;
    padding: 4px;
    color: white;
    font-weight: bold;
    border-radius: 3px;
}

/* Стиль для остальных (не выделенных) элементов горизонтального меню. */
.horizontalMenu a {
    text-decoration: none !important;
}

/* Стили для кнопки установки плагина */
.chrome-webstore-install {
}

/* Красивая синяя кнопка. */

.blue-button {
    background: #3498db;
    background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
    background-image: -moz-linear-gradient(top, #3498db, #2980b9);
    background-image: -ms-linear-gradient(top, #3498db, #2980b9);
    background-image: -o-linear-gradient(top, #3498db, #2980b9);
    background-image: linear-gradient(to bottom, #3498db, #2980b9);
    -webkit-border-radius: 5;
    -moz-border-radius: 5;
    border-radius: 5px;
    color: #ffffff;
    font-size: 20px;
    padding: 10px 20px 10px 20px;
    text-decoration: none;
    border: 0px;
}

    .blue-button:hover {
        background: #3cb0fd;
        background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
        background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
        background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
        background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
        background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
        text-decoration: none;
    }

/* Красивая зеленая кнопка. */

.green-button {
    background: #2bc253;
    background-image: -webkit-linear-gradient(top, #2bc253, #137d23);
    background-image: -moz-linear-gradient(top, #2bc253, #137d23);
    background-image: -ms-linear-gradient(top, #2bc253, #137d23);
    background-image: -o-linear-gradient(top, #2bc253, #137d23);
    background-image: linear-gradient(to bottom, #2bc253, #137d23);
    -webkit-border-radius: 5;
    -moz-border-radius: 5;
    border-radius: 5px;
    font-family: Arial;
    color: #ffffff;
    font-size: 20px;
    padding: 10px 20px 10px 20px;
    text-decoration: none;
    border: 0px;
}

    .green-button:hover {
        background: #27d15d;
        background-image: -webkit-linear-gradient(top, #27d15d, #238c2a);
        background-image: -moz-linear-gradient(top, #27d15d, #238c2a);
        background-image: -ms-linear-gradient(top, #27d15d, #238c2a);
        background-image: -o-linear-gradient(top, #27d15d, #238c2a);
        background-image: linear-gradient(to bottom, #27d15d, #238c2a);
        text-decoration: none;
    }

.shadow {
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.25);
}

/* =========================================== */
/* Переопределение некоторых стилей Bootstrap. */
/* =========================================== */

/* Без этого логотип у нас становится почему-то маленьким. */
* {
    box-sizing: inherit;
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
}

/* Без этого иконка календарика неправильно отображается (спускается ниже, чем нужно, по отношению
    к текстовом полю).
*/
img {
    vertical-align: initial;
}

p {
    margin-top: 12px;
    margin-bottom: 12px;
}

/*
    Пришлось написать, чтобы крестик в alert'ах отображался более ровно.
    Почему-то по умолчанию он отображается не совсем так, как должен в Бутстрапе.
*/
button.close {
    position: relative;
    top: -4px;
}

/*
    Метки рядом с чекбоксами Бутстрап делает жирными.
    Где проявлялось: на странице редактирования пользователя, где
    список ролей с галками.
*/
label {
    font-weight: normal;
    margin-left: 3px;
    /* Это чтобы подписи отображались немного выше (на одном уровне с чекбоксами). */
    position: relative;
    top: -2px;
    margin-bottom: 0px;
}

/*
    Чтобы иконки Glyphicons из Bootstrap внутри гиперссылок отображались
    синим цветом, как гиперссылки.
    Без !important не срабатывало.
*/

a span.glyphicon.cogwheel {
    color: white !important;
    margin-bottom: 7px;
    font-size: 13px;
}

a span.glyphicon {
    color: #016AB9 !important;
}

a.dot:hover span.glyphicon {
    color: #D00000 !important;
}

div.collapseAlertWidthToMatchContent {
    /*
        (МГ) Пришлось это временно отключить, т. к. иначе
        $("...").fadeOut() не работает (это некоторый баг в jQuery).
    */
    /* display: inline-block !important; */
    /* (МГ) Решил задачу немного иначе: сделал максимальную фиксированную ширину. */
    max-width: 650px;
}

.toggler-collapsed {
    color: inherit !important;
}

    .toggler-collapsed a.toggler {
        display: inline-block;
    }

input[type=button]:disabled, input[type=submit]:disabled, button:disabled, select:disabled {
    color: #B9B9B9;
    background-color: rgb(235, 235, 228);
}

div.tag-container {
    display: inline-block;
    line-height: 1.9;
}

.tag {
    display: inline-block;
    white-space: nowrap;
    line-height: initial;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

/* ================================== */
/* ===== Кастомизация Bootstrap ===== */
/* ================================== */

/* Иконка (i) с подсказкой. */
span.help-tooltip {
    color: #016AB9; /* #3697DE; */
    font-size: 12px;
    top: 2px;
}

/* В заголовке таблиц (например, в отчете по выручке) иконку (i) отображаем желтой. */
th .help-tooltip {
    color: #FFF896;
}

/*
    Потребовался дополнительный стиль для случая, когда иконка (i) в заголовке таблицы
    является еще и гиперссылкой.
*/
th a span.help-tooltip {
    color: #FFF896 !important;
}

/*
    Alert Bootstrap: по умолчанию у него margin-bottom: 20px, и получается
    очень большой промежуток под alert'ом.
*/
.alert {
    margin-bottom: 12px;
}

/* Bootstrap Tooltip. */
.tooltip {
    font-size: 12px;
    font-family: "Helvetica Neue", Helvetica, Arial;
}

/* Крестик для закрытия алерта. */
button.close {
    font-family: "Segoe UI", Roboto;
}

.alert button.close {
    position: relative;
    top: -5px;
    left: 8px;
}

.btn {
    font-family: Tahoma;
    font-size: 12px;
}

h4.modal-title {
    /* Чтобы было по центру по вертикали. */
    padding-top: 3px;
}

a.alert-link {
    font-weight: bold;
}

a.btn {
    text-decoration: none !important;
    color: white !important;
}

a.btn-link {
    color: #016AB9 !important;
    text-decoration: underline !important;
    vertical-align: baseline;

    padding: 0px;
}

a.btn-link:hover {
    color: #D00000 !important;
}

/*
    Потребовалось ввести для кнопок типа <a class="btn">: их размер менялся
    при наведении мыши.
    Стиль не идеален, т. к. подходит только для кнопок стандартного размера.
*/
a.btn {
    line-height: 18px;
}

/* Конфликт с контролом для выбора цвета. */
.dropdown .dropdown-menu::before, .dropdown .dropdown-menu::after {
    content: none;
}

.dropdown a {
    color: inherit;
    text-decoration: none;
    /*
        Приходится это делать, чтобы не было подсветки.
        Почему-то реально ширина выходит за пределы DropDown, за счет
        какого-то конфликта стилей, и подсветка некрасиво "выпячивается".
    */
    width: 0%;
}

.dropdown a:hover {
    background: none !important;
    color: #D00000;
}

kbd {
    background-color: #808080 !important;
}

/* ============================= */
/* ===== Социальные кнопки ===== */
/* ============================= */

/* Куча дублирования кода, надо начать использовать SASS. */

/* === Одноклассники === */
.btn-social-ok {
    /* Цвет взял с сайта Одноклассников. */
    background-color: rgb(238,130,8) !important;
    border-color: rgb(238,130,8) !important;
}

.btn-social-ok.focus, .btn-social-ok:focus {
    /* Это базовый цвет Одноклассников + небольшая прозрачность. */
    box-shadow: 0 0 0 0.2rem rgba(238,130,8,.6) !important;
}

.btn-social-ok:hover {
    /* Этот цвет пришлось вручную делать более темным. */
    background-color: rgb(224, 119, 0) !important;
    border-color: rgb(224, 119, 0) !important;
}

/* === WhatsApp === */

.btn-social-whatsapp {
    /* Официальный цвет слишком блеклый для кнопки получился, сделал его темнее сам. */
    background-color: rgb(34, 193, 94) !important;
    border-color: rgb(34, 193, 94) !important;
}

.btn-social-whatsapp.focus, .btn-social-whatsapp:focus {
    box-shadow: 0 0 0 0.2rem rgba(34, 193, 94, .6) !important;
}

.btn-social-whatsapp:hover {
    /* Этот цвет пришлось вручную делать более темным. */
    background-color: rgb(32, 177, 87) !important;
    border-color: rgb(32, 177, 87) !important;
}

/* === Telegram === */

.btn-social-telegram {
    background-color: #0088cc !important;
    border-color: #0088cc !important;
}

.btn-social-telegram.focus, .btn-social-telegram:focus {
    /* Тот же цвет, но с прозрачностью. */
    box-shadow: 0 0 0 0.2rem rgba(0, 136, 204, .6) !important;
}

.btn-social-telegram:hover {
    /* Этот цвет пришлось вручную делать более темным. */
    background-color: #047ebb !important;
    border-color: #047ebb !important;
}

/* === Авито === */

a.btn-social-avito {
    color: rgb(59, 59, 59) !important;
    background-color: rgb(250, 250, 250) !important;
    border-color: rgb(230, 230, 230) !important;
}

.btn-social-avito.focus, .btn-social-avito:focus {
    box-shadow: 0 0 0 0.2rem rgba(220, 220, 220, 0.3) !important;
}

.btn-social-avito:hover {
    background-color: rgba(220, 220, 220, 0.5) !important;
    border-color: rgba(220, 220, 220, 0.5) !important;
}

/* === Viber === */

.btn-social-viber {
    /* Цвет из логотипа взял. */
    background-color: rgb(102, 92, 172) !important;
    border-color: rgb(102, 92, 172) !important;
}

.btn-social-viber.focus, .btn-social-viber:focus {
    box-shadow: 0 0 0 0.2rem rgba(102, 92, 172, .6) !important;
}

.btn-social-viber:hover {
    /* Этот цвет пришлось вручную делать более темным. */
    background-color: rgb(91, 82, 160) !important;
    border-color: rgb(91, 82, 160) !important;
}

/* === ВКонтакте === */

.btn-social-vk {
    /* Официальный цвет из логотипа. */
    background-color: rgb(82, 129, 183) !important;
    border-color: rgb(82, 129, 183) !important;
}

.btn-social-vk.focus, .btn-social-vk:focus {
    box-shadow: 0 0 0 0.2rem rgba(82, 129, 183, .6) !important;
}

.btn-social-vk:hover {
    /* Этот цвет пришлось вручную делать более темным. */
    background-color: rgb(79, 122, 170) !important;
    border-color: rgb(79, 122, 170) !important;
}

/* === Instagram === */

.btn-social-instagram {
    /*
        С сайта https://brandcolors.net/ взял.
        На https://en.instagram-brand.com/assets нет цветов.
    */
    background-color: rgb(131, 58, 180) !important;
    border-color: rgb(131, 58, 180) !important;
}

.btn-social-instagram.focus, .btn-social-instagram:focus {
    box-shadow: 0 0 0 0.2rem rgba(131, 58, 180, .6) !important;
}

.btn-social-instagram:hover {
    /* Этот цвет пришлось вручную делать более темным. */
    background-color: rgb(116, 53, 159) !important;
    border-color: rgb(116, 53, 159) !important;
}

/* === Facebook === */

.btn-social-facebook {
    /* С сайта http://www.color-hex.com/color-palette/185 взял. */
    background-color: rgb(59, 89, 152) !important;
    border-color: rgb(59, 89, 152) !important;
}

.btn-social-facebook.focus, .btn-social-facebook:focus {
    box-shadow: 0 0 0 0.2rem rgba(59, 89, 152, .6) !important;
}

.btn-social-facebook:hover {
    /* Этот цвет пришлось вручную делать более темным. */
    background-color: rgb(51, 76, 129) !important;
    border-color: rgb(51, 76, 129) !important;
}

/* Небольшой сдвиг иконок в кнопках вниз. */
.btn-social-vk > span,
.btn-social-ok > span,
.btn-social-whatsapp > span,
.btn-social-telegram > span,
.btn-social-instagram > span {
    position: relative;
    top: 1px;
}

.btn-social-avito > span {
    position: relative;
    top: 2.5px;
    padding-right: 1px;
}

/* ======================== */
/* ===== Другие стили ===== */
/* ======================== */

/* Иконка для перемещения строк (например, в справочниках статусов CRM и заказов). */
.moveIcon {
    color: #a9a9a9;
}

.hybrid-control-view {
    cursor: pointer;
}

.hybrid-control.view .hybrid-control-view {
    display: block;
}

.hybrid-control.view .hybrid-control-edit {
    display: none;
}

.hybrid-control.edit .hybrid-control-view {
    display: none;
}

.hybrid-control.edit .hybrid-control-edit {
    display: block;
}

/* Цитата с сообщением в ленте событий. */
.message-quote-in-ribbon-event {
    margin-top: 9px;
    margin-bottom: 3px;
    border: 1px solid #DDE4E9;
    border-radius: 3px;
    padding: 9px;
    background-color: #f8f9fa;
    max-width: 350px;
    /* Чтобы длинные ссылки переносились на новую строку. */
    overflow-wrap: break-word;
}

.message-quote-in-ribbon-event img,
.message-quote-in-ribbon-event video {
    max-width: 350px;
}

.message-quote-in-ribbon-event video {
    min-width: 350px;
}

/* Selectize */
.selectize-value {
    color: white;
    background-color: #1b9dec;
}

div.crm-status-selectize .tag-selectize-item {
    background-color: white !important;
}

div.order-status-selectize .tag-selectize-item {
    background-color: white !important;
}

.social_logo {
    width: 50px;
}

/* Tabs */
.nav.nav-tabs {
    margin: 0 0 7px 0;
}

.nav-item {
    display: inline-block;
    padding-left: 0px;
    background: none;
}

.nav-item .nav-link {
    text-decoration: none;
    color: black;
}

.nav-link.active {
    font-weight: bold;
}

/* Разное */
.pro-icon {
    cursor: default;

    position: relative;
    top: -0.5px;
}

a .pro-icon {
    cursor: pointer;
}

/* ====================================================== */
/* ===== Массовые операции над клиентами / заказами ===== */
/* ====================================================== */

.bulk-action-controls .label {
    margin-top: 5px;
    margin-bottom: 3px;
}

/* Только так криво можно подправить стиль старого контрола для выбора товара. У него захардкодено float: right. */
.bulk-action-controls .goods-selector > div {
    float: none !important;
}

.bulk-action-controls a.dot:link,
.bulk-action-controls a.dot:visited.dot,
.bulk-action-controls a.dot:hover {
    border-bottom: none !important;
    text-decoration: none !important;
}

/* Грид */

.grid-footer-buttons-container {
    margin: 7px 0px 12px 0px;
}

/* Промо-коды на странице оплаты. */
.promo-code-discount {
    color: white;
    background-color: #008000;
    font-weight: bold;
    padding: 3px 5px 3px 5px;
    border-radius: 5px;
}

.alert-danger .promo-code-discount {
    background-color: #c70517;
}

/*
    Сокращает длину гиперссылки, но клиент попросил не делать этого, т. к.
    им нужен поиск через Ctrl + f.
    В идеале нужно сделать настройку.
*/
/*a.custom-field-url {
    width: 200px;
    display: inline-block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    */
/*
        Решает проблему смещения текста чуть вверх!
        https://stackoverflow.com/a/20566810/111843
    */
/*vertical-align: bottom;
} */
.lead_form_question_answer {
    margin-bottom: 7px;
}

/* ===================================== */
/* === Стили для таблицы DetailsView === */
/* ===================================== */

/*
    Приходится делать небольшую корректировку, чтобы CheckBox отображался по центру относительно лейбла.
    Делаем именно ">", чтобы набор галок (на странице аудита, например) отображался
    без промежутков рядом с каждой галкой.
*/
table td.control > input[type="checkbox"] {
    margin-top: 6px;
}

table td.control input[type="radio"] {
    position: relative;
    top: 2px;
}

table td.control input[type="radio"] + label {
    position: relative;
    /* Логика не очень понятна, но так лейбл корректно выровнен относительно кружочка radio button. */
    top: 0px;
}

/* Иконка-карандаш. */

span.edit-icon {
    font-size: 14px;
    font-weight: bold;
    left: 1px;
    color: #016AB9;
}

/* Рассылки */

.campaign-message-sent {
    font-weight: bold;
    color: #008000;
}

.campaign-message-error {
    font-weight: bold;
    color: #ec0000;
}

.campaign-message-deleted {
    font-weight: bold;
    color: #ff9900;
}

.start-stop-campaign-button {
    padding-right: 3px;
}

.alert .glyphicon {
    /*
        Чтобы внутри alert'ов иконки-ссылки не были синими, а принимали цвет
        согласно классу alert-link.
    */
    color: inherit !important;
}

/* Для иконки карандашика, когда ссылка для редактирования заблокирована. */
.glyphicon.disabled {
    color: #808080 !important;
}

/* Боты */

a.botsTurnOnOff:link,
a.apiBlockUnblock:link {
    /* Подчеркивание будет работать только при подносе курсора мыши к ссылке. */
    border-bottom: none;
}

.botsTurnOnOff,
.apiBlockUnblock {
    font-weight: bold !important;
}

.botsTurnOnOff.isOn,
.apiBlockUnblock.isActive {
    color: green;
}

.botsTurnOnOff.isOff,
.apiBlockUnblock.isBlocked {
    color: red;
}

/* Ссылка без подчеркивания */

a.noUnderline:link {
    /* Подчеркивание отображаем только при подносе курсора мыши. */
    text-decoration: none;
}

a.noUnderline:hover {
    text-decoration: underline;
}

/* Disabled CheckBox. */

input[type=checkbox][disabled=disabled] + label {
    color: #808080;
}

div.reportFilters {
    display: inline-block;
    width: 100%;
}

.json {
    white-space: pre;
}

/*
    1) Лейбл, сколько дней назад был изменен статус.

    2) Лейбл "Архив" (для товаров, перемещенных в архив).

    Стиль у них одинаковый, хотя логика совершенно разная.
*/
span.status-changed-days,
span.archived-goods {
    color: white;
    background-color: #949494;
    font-size: 10px;
    border-radius: 3px;
    font-weight: bold;
    padding: 3px;
    /* Курсор-стрелочка. */
    cursor: default;
    /* Чтобы надпись "7 дней" не переносилась на новую строку. */
    white-space: nowrap;
}

/* Отключение черной рамки. */
textarea,
select {
    outline: none;
}

/* Иконка [NEW] в боковом меню. */
span.new-icon {
    font-size: 8px !important;
    position: relative !important;
    color: #212529 !important;
    left: 0px !important;
    width: inherit !important;
    height: inherit !important;
    vertical-align: middle;
    padding-bottom: 2px;
    padding-top: 2px;
    padding-left: 3px;
    padding-right: 3px;
    cursor: default !important;
}

div.social-link {
    white-space: nowrap;
    display: inline-block;
}

div.social-link > span.social-name {
    max-width: 200px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}

.paginggrid-add {
    margin-right: 5px;
}

span.sender > span {
    cursor: default;
}

span.wait-time {
    color: white;
    background-color: #949494c4;
    border-radius: 3px;
    font-weight: bold;
    padding: 3px;
    line-height: initial;
    cursor: default;
    font-size: 10px;
}

td span.zero {
    color: #5d5656 !important;
    color: rgba(93, 86, 86, 0.38) !important;
}