/**
 * Фикс стилей панели.
 *
 * @author Halimov Eduard <ed@baltpoint.com>
 */





:root {

    --app-bg-color: #edeef0;

    --text-color: #27252f;

    /* fill */
    --brand-logo-border: #75718a;
    --brand-logo-cloud: #edeef0;
    --brand-logo-phone: #fefefe;
    /* stroke */
    --brand-logo-linear-cloud: #eae9ec;
    --brand-logo-linear-phone: #eae9ec;

    --sidebar-text-color: #e2e1e5;
    --sidebar-text-color-active: #fff;
    --sidebar-text-color-hover: #efeef1;
    --sidebar-link-color: #eae9ec;
    --sidebar-bg-color: #1c1b22;
    --sidebar-bg-color-active: #2d2e37;
    --sidebar-bg-color-hover: #2d2e37;

    --profile-button-bg-color: #131415;
    --profile-button-border-color: #131415;
    --profile-button-text-color: #fff;
    --profile-button-text-light-color: #667780;

    --table-hover-color: #15141a;
    --table-hover-bg: rgba(28,27,34,.045);

    --color-phone-light: #a3b6ca;

    --tab-active-mark-color: #007bff;

    --bs-dropdown-item-border-radius: .2rem;

    .nav-tabs {
        --bs-nav-tabs-border-width: 3px;
    }

    .grid.form-group {
        --bs-gap: 10px
    }

    #post-form {
        --bs-columns: 2 !important;
        grid-template-columns: repeat(2, 1fr) !important;
    }


    --color-placeholder: #74788d;

    /*--bs-emphasis-color: var(--profile-button-text-light-color);*/


    /* Полоса прокрутки */
    --scrollbar-color: #a9adb0;
    --scrollbar-bg-color: #f9f9fd;
    /*--scrollbar-color: #4c495b;*/
    /*--scrollbar-bg-color: #f9f9fd;*/

}



body.standard-theme {

    --tab-active-mark-color: #1c1b22;

}





body.novosibirsk-theme {

    --color-blue: #51b1e8;
    --color-blue-dark: #114b88;
    --color-orange: #dd7931;

    --color-light: #a3b6ca;
    --color-lightest: #c9ccd7;

    /*--app-bg-color: #f0f1f8;*/
    --app-bg-color: #e9eaee;

    --text-color: #424242;
    --text-light-color: #6c7785;
    --text-warning-color: var(--color-orange);

    /* fill */
    --brand-logo-border: #0f4987;
    --brand-logo-cloud: var(--color-blue);
    --brand-logo-phone: #fff;
    /* stroke */
    --brand-logo-linear-cloud: var(--color-blue);
    --brand-logo-linear-phone: #0f4987;

    --sidebar-text-color: #484848;
    --sidebar-text-color-active: var(--color-blue-dark);
    --sidebar-text-color-hover: #484848;
    --sidebar-link-color: var(--color-blue-dark);
    --sidebar-bg-color: #fff;
    --sidebar-bg-color-active: #f3f8fb;
    --sidebar-bg-color-hover: #f3f8fb;

    /* Кнопки */
    --button-bg-color: var(--color-blue-dark);
    --button-hover-bg-color: #2c7bad;

    --profile-button-bg-color: #e1e5ea;
    --profile-button-border-color: #c2c8d0;
    --profile-button-text-color: #3a4046;
    --profile-button-text-light-color: #667780;

    /* Форма */
    --form-control-border: var(--color-lightest);
    --form-label-color: var(--text-light-color);


    --color-phone-light: var(--color-light);


    --tab-active-mark-color: var(--color-blue-dark);


    --role-operator-color: #119327;
    --role-manager-color: #074ecb;
    --role-administrator-color: var(--color-orange);


}









body {
    /*background-color: var(--app-bg-color) !important;*/
    /*font-size: 15px !important;*/
}


/*
 * Левый сайдбар.
 */
.aside {
    background-color: var(--sidebar-bg-color) !important;
}
.aside a, .aside p {
    color: var(--sidebar-link-color) !important;
}
.aside .nav > li > a {
    color: var(--sidebar-text-color) !important;
}
.aside .nav > li.active > a {
    color: var(--sidebar-text-color-active) !important;
    background-color: var(--sidebar-bg-color-active) !important;
}
.aside .nav > li:hover > a {
    color: var(--sidebar-text-color-hover) !important;
    background-color: var(--sidebar-bg-color-hover) !important;
}



/*
 * Кнопка профиля.
 */
.profile-container {
    background: var(--profile-button-bg-color);
    border: 1px var(--profile-button-border-color) solid;
}
.profile-container .profile-name {
    color: var(--profile-button-text-color);
}
.profile-container .profile-role {
    color: var(--profile-button-text-light-color);
}
.profile-container .profile-company {
    font-size: .9em;
    color: var(--profile-button-text-light-color);
}


/*
 * Меню.
 */
.nav-link {
    font-size: 1rem !important;
}
/* фиксация левого сайдбара */
/* фиксация наползает на сам сайдбар, т.к. сайдбар не фиксирован
*/
#main-menu-sidebar > header {
    position: sticky;
    top: 1.5rem;
}
/*  Фикс header для планшетного разрешения. Занимал не всю доступную высоту, сползало содержимое  */
@media(max-width: 991.98px){
    #main-menu-sidebar > header {
        height: 100%;
    }
}

/*
* Фикс сайдбара
*/

#main-menu-sidebar {
    position: sticky;
    top: 0;
    z-index: 999;
}

#main-menu-sidebar > nav {
    position: sticky;
    top: calc(1.5rem + 1rem + 1rem + 46px);
    height: calc(100vh - (1.5rem + 1rem + 1rem + 46px));
}

#main-menu-sidebar > nav .nav-link span {
    transition: all .34s;
}
#main-menu-sidebar > nav .nav-link {
    height: 46px;
}

/* sidebar-compact */
#main-menu-sidebar.sidebar-compact {
    width: 68px;
    max-width: 68px;
    z-index: 9;
}
#main-menu-sidebar.sidebar-compact .header-brand.order-last,
#main-menu-sidebar.sidebar-compact .profile-container > a > small,
#main-menu-sidebar.sidebar-compact > nav .nav-link span,
#main-menu-sidebar.sidebar-compact > nav .nav-item > small {
    display: none !important;
}

#main-menu-sidebar .nav-link > span {
    word-wrap: normal !important;
    word-break: normal !important;
}

#main-menu-sidebar.sidebar-compact > header {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
#main-menu-sidebar.sidebar-compact .header-brand.workspace-link {
    margin: 0;
}
#main-menu-sidebar.sidebar-compact > nav .nav-link {
    width: 46px;
    height: 46px;
}
#main-menu-sidebar.sidebar-compact > nav a.nav-link:hover {
    width: auto;
}
#main-menu-sidebar.sidebar-compact > nav a.nav-link:hover span {
    display: inline-block !important;
}
#main-menu-sidebar.sidebar-compact > nav .nav-link span {
    margin-left: 0 !important;
    transition: all .34s;
}

#main-menu-sidebar.sidebar-compact .profile-container {
    border: none !important;
    background: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    justify-content: center;
}
#main-menu-sidebar.sidebar-compact .profile-container a,
#main-menu-sidebar.sidebar-compact .profile-container img {
    margin: 0 !important;
}
/* notification */
#main-menu-sidebar.sidebar-compact .profile-container > a:last-child {
    position: absolute !important;
    display: block !important;
    right: 9px;
}
#main-menu-sidebar.sidebar-compact .profile-container > a:last-child svg {
    display: none;
}

/* ограничение длинного меню */
#main-menu-sidebar .scrollbar {
    flex-wrap: nowrap;
    height: 100%;
}
#main-menu-sidebar:not(.sidebar-compact) .scrollbar {
    overflow-y: auto;
}

/* кнопка прокрутки вверх */
#main-menu-sidebar .scroll-to-top {
    width: 100%;
    height: auto;
    position: relative;
    margin: 1rem 0;
    min-height: 2rem;
}

/* кнопка */
#sidebar-collapse-button {
    display: flex;
    justify-content: center;
    align-items: self-end;
    width: 100%;
    height: 30px;
    margin-bottom: 2px;
    border: none !important;
}
#sidebar-collapse-button:hover {
    background-color: var(--color-lightest);
}
#sidebar-collapse-button:active {
    border: none !important;
}
#sidebar-collapse-button svg {
    height: 16px;
    /*height: 12px;*/
    /*width: 12px;*/
    margin-right: .5em;
}
#main-menu-sidebar.sidebar-compact #sidebar-collapse-button svg {
    transform: rotate(180deg);
    margin-right: 0;
}


/*
 * Header. Brand.
 */
#app-name {
    font-size: 1.4rem;
}

#app-name {
    margin-left: 1rem;
}

#brand-logo {
    width: 46px;
    height: 46px;
}
#brand-logo > .border { fill: var(--brand-logo-border) }
#brand-logo > .cloud-bg { fill: var(--brand-logo-cloud) }
#brand-logo > .phone-bg { fill: var(--brand-logo-phone) }

#brand-logo > .cloud { fill: none; stroke: var(--brand-logo-linear-cloud); stroke-miterlimit: 23; stroke-width: 2.2 }
#brand-logo > .phone { fill: none; stroke: var(--brand-logo-linear-phone); stroke-miterlimit: 23; stroke-width: 2.2 }


/*
 * Область контента.
 */
.content-area {
    flex: 1 0 0;
}

.content-area .workspace {
    padding-top: .8rem !important;
}

/* Прижать футер */
.workspace {
    height: 100%;
}

/*
 * Phone. Форматирование номера телефона.
 */
.phone-region-code {
    color: var(--color-phone-light) !important;
}


/*
 * Колонка "Действия" списка данных.
 */
.cell-actions .form-group {}



/*
 * Таблица. Внутренний скролл.
 */

.table {
    min-width: max-content;
}

.table-responsive_ {
    overflow-x: auto;
}

/*
 * Таблица. Компактные строки.
 */
.table tbody tr td {
    height: 34px;
    padding: .1rem 1rem !important;
    font-size: 1rem !important;
    line-height: 1.1rem;
}
.table tbody tr td .row div {
    width: 24px;
}
.table tbody tr td .btn-icon {
    height: 24px;
    width: 24px;
    justify-content: center;
}

/*
 * Дата в таблице.
 */
.table tbody tr td time span {
    font-size: .75rem;
}

/*
 * Размер пиктограммы в таблице.
 */
.s16 svg, svg.s16 {
    width: 16px !important;
    height: 16px !important;
}
.s18 svg, svg.s18 {
    width: 18px !important;
    height: 18px !important;
}
.s24 svg, svg.s24 {
    width: 24px !important;
    height: 24px !important;
}

/*
 * Цвета в таблице.
 */
.calendar-holiday {
    color: #a92929;
}
.calendar-pre-holiday {
    color: #d76526;
}
.calendar-weekend {
    color: #38811c;
}
.calendar-default {
    color: #3a4046;
}



.action-list .btn:disabled {
    opacity: .5;
    border: none !important;
}


/*
 * Фильтр.
 */
.filter-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
    width: 100%;

    /*display: grid;*/
    /*grid-gap: 10px;*/
    /*grid-template: repeat(4, 1fr) / repeat(2, 1fr);*/
    /*grid-auto-flow: row dense; !* or 'row', 'row dense', 'column dense' *!*/
}
.filter-wrapper > * {
    /*flex: 1 18%;*/
}

/*.filter-wrapper {*/
/*    display: grid;*/
/*    grid-template-columns: repeat(6, 1fr);*/
/*    align-items: end;*/
/*    gap: 1rem;*/
/*    width: 100%;*/
/*}*/
/*.filter-wrapper > button {*/
/*    grid-column-start: 6;*/
/*}*/

.filter-wrapper > .form-group:first-child {
    width: 100%;
    max-width: 840px;
    min-width: 780px;
}

.filter-wrapper label {
    white-space: unset;
}

@media (max-width: 900px) {
    .filter-wrapper > .form-group:first-child {
        min-width: unset;
    }
}

.filter-button-action {
    border-radius: 0;
    border: 1px solid #a3c1db !important;
    box-shadow: none;
}

.filter-button-action:hover {
    border: 1px solid #a3c1db !important;
}

.is-invalid-range {
    outline: 1px solid rgba(255, 0, 0, 0.7) !important;
    outline-offset: -1px;
    color: red !important;
}

.date_from-field:has(.flatpickr-input.is-invalid-range) {
    position: relative;
}

.date_from-field:has(.flatpickr-input.is-invalid-range)::after {
    content: 'Начальная дата не может быть позже конечной';
    position: absolute;
    left: 0;
    top: 100%;
    width: max-content;
    display: block;
    color: #dc3545;
    font-size: 0.875rem;
}

/* radiobutton */
div[data-controller='radiobutton'] .btn-group {
    width: 100%;
}
div[data-controller='radiobutton'] .btn-group > * {
    width: calc(100% / 5);
}

/* поле Организация */
.inn-field { flex: auto }

/*@media (max-width: 1815px) {*/
/*    .filter-wrapper .preset-field {*/
/*        order: -1;*/
/*    }*/
/*    .filter-wrapper .disposition-field {*/
/*        order: -1;*/
/*    }*/
/*    .filter-wrapper .inn-field {*/
/*        order: -1;*/
/*    }*/
/*}*/







/*
 * Формы.
 */
/*input:not([role="combobox"]),*/
/*select {*/
/*    !*height: 2.45rem !important;*!*/
/*    min-width: 200px;*/
/*}*/

.ts-control {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Уголок для селекта */
.form-group div select ~ .form-control {
    position: relative;
    min-width: 200px;
}
.form-group div select ~ .form-control:before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 11px;
    right: 10px;
    z-index: 1;
    background: url('../../assets/images/form/chevron-down.svg') no-repeat center;
    opacity: .4;
    cursor: pointer;
}
.form-group div select ~ .form-control.dropdown-active:before {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

.ts-wrapper.multi > .ts-control > .clear-button {
    display: none;
}

.ts-wrapper.multi > .ts-control > input {
    margin-right: 26px !important;
}

.ts-wrapper.multi.has-items > .ts-control > .clear-button {
    display: inline-block;
    right: calc(.75rem + 11px);
    top: 17px;
}

label {
    color: var(--form-label-color);
}

.form-check .form-check-input {
    border: 1px #a3c1db solid;
}
.permission-list .form-check .form-check-input {
    border-color: #be2a2a;
    background-color: #be2a2a;
}
.permission-list .form-check .form-check-input:checked {
    border-color: #2b8a27;
    background-color: #2b8a27;
}
.permission-list .form-check .form-check-input:focus {
    box-shadow: 0 0 0 .25rem rgba(190, 42, 42, .25);
}
.permission-list .form-check .form-check-input:checked:focus {
    box-shadow: 0 0 0 .25rem rgba(43, 138, 39, .25);
}

/* placeholder */
.form-control::placeholder {
    color: var(--color-placeholder);
    opacity: .7;
}

.form-control:focus::placeholder {
    color: var(--color-placeholder);
    opacity: .9;
}




/*
 * Кнопки.
 */
.btn {
    height: 2.45rem;
    align-items: center;
    justify-content: center;
}

button[disabled] {
    pointer-events: auto !important;
}

.table-notification .btn {
    height: auto;
}




/*
 * Бейдж.
 */
.badge {
    padding: .1em .5em .2em;
}




/*
 * Вкладки.
 */
.nav-tabs-alt {
    display: flex;
    justify-content: space-between;
}
.action-list {
    display: flex;
    align-items: center;
    margin: 0 !important;
}
.action-list .form-group {
}
.action-list .form-group label {
    margin: 0 1rem 0 0 !important;
}
.action-list button {
    height: 24px !important;
    width: 24px !important;
    margin: 0 .3rem;
}
.standard-theme .nav-tabs-alt .nav-tabs .nav-item.active .nav-link {
    border-bottom-color: var(--tab-active-mark-color) !important;
}



/**
 * Модальное окно.
 */
/*.modal .modal-body {*/
/*    padding: 1.5rem;*/
/*}*/
/*.modal .modal-body .phone-details,*/
/*.modal .modal-body .records-player {*/
/*    width: 100%;*/
/*}*/

/* Окрашивание кнопки подтверждения удаления в модальном окне */
#submit-modal-redirectDeleteModal,
#submit-modal-companyDeleteModal,
#submit-modal-queueDeleteModal,
#submit-modal-soundDeleteModal {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #fff !important;
}
#submit-modal-redirectDeleteModal:hover,
#submit-modal-companyDeleteModal:hover,
#submit-modal-queueDeleteModal:hover,
#submit-modal-soundDeleteModal:hover {
    background-color: #d32535 !important;
    border-color: #c62232 !important;
    box-shadow: inset 0 3px 5px #00000020 !important;
}



/**
 * Список разрешений в форме.
 */
.permission-list .form-label {
    font-size: 1.2rem;
    margin-bottom: 1rem;
}





/**
 * Список спецификаций.
 *
 * Используется в списке виджета Пульса организаций `App\Widgets\ReportWidgets\StateMonitor`
 */
ul.spec-list {
    list-style-type: none;
    padding: 0;
    margin-bottom: 0;
}
ul.spec-list > li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
}

/* Заголовок столбцов списка */
ul.spec-list > li.header {
    align-items: self-end;
}
ul.spec-list > li.header > * {
    color: #1c1b228c;
    font-size: .9em;
    font-weight: 600;
    margin-bottom: .3rem;
}

/*ul.spec-list.header > li {*/
/*    font-size: .75rem;*/
/*    color: #999;*/
/*    text-transform: uppercase;*/
/*}*/
/*ul.spec-list.header > li .indicator {*/
/*    background: transparent !important;*/
/*}*/


/* Зебра списка (разделенные «полосами» ряды) */
ul.spec-list.list-striped > li {
    padding: .1rem .5rem;
}
ul.spec-list.list-striped > li:not(.header):nth-child(odd) {
    background-color: var(--table-hover-bg);
}

/* Подсветка под курсором (отзывчивость при наведении) */
ul.spec-list.list-hover > li {
    padding: .1rem .5rem;
}
ul.spec-list.list-hover > li:not(.header):not(.summary):hover {
    background-color: var(--table-hover-bg);
    color: var(--table-hover-color);
}




/**
 * Форма аутентификации.
 */
.form-signin #brand-area {
    display: none;
}
.form-signin .text-end > p {
    text-align: center;
}



/**
 * Layout Block.
 */
/*.block-layout > div:last-child > div:first-child,*/
/*.block-layout > div:last-child > div:first-child fieldset > div {*/
/*    background-color: yellow !important;*/
/*}*/
/*.block-layout > div:last-child > div:last-child {*/
/*    background-color: #0e616e !important;*/
/*}*/



/**
 * Layout Two Column. Двухколоночный макет.
 */
/*.two-column-area .left-column > fieldset > div {*/
/*    padding-right: 0 !important;*/
/*}*/
/*.two-column-area .right-column > fieldset > div {*/
/*    padding-left: 0 !important;*/
/*}*/



/**
 * Фикс экрана при активной первой вкладке.
 */
.nav-tabs-alt.first-tab-active ~ div.rounded {
    border-top-left-radius: 0 !important;
}



/* Блок с кнопкой для копирования содержимого */
/* Если нужно что-то копировать, оборачиваем в блок с классом copyable */
.copyable {
    /*margin-right: 3px;*/
    position: relative;
    display: inline-block;
    /* Ширина иконки 14 px + отступ 6 px */
    padding-right: 20px;
    /*overflow: visible;*/
}
.copyable:hover:after  {
    position: absolute;
    content: '';
    background-image: url('data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'14\' height=\'14\' viewBox=\'0 0 24 24\' aria-hidden=\'true\'%3E%3Cpath d=\'M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z\'%3E%3C/path%3E%3C/svg%3E');
    background-repeat: no-repeat;
    display: block;
    width: 14px;
    height: 14px;
    bottom: 0;
    right: 0;
    cursor: pointer;
}
.copyable:before {
    position: absolute;
    z-index: 3;
    content: 'Cкопировано';
    color: white;
    transition: opacity .23s ease-in-out;
    padding: 1px 4px 4px;
    background: #333;
    border-radius: 5px;
    /*display: block;*/
    display: none;
    top: calc(100% + 2px);
    right: -46px;
    font-size: 0.9em;
    line-height:1
}
.copyable.copied:before {
    display: block;
}

/* Подравнять шапку таблицы */
.th-copyable > div {
    padding-right: 20px;
}



/**
 * Таблицы с чекбоксами массовых действий.
 */
#checked-rows-actions-message {
    /*transition: all .5s;*/
}


.hoverable:hover {
    background-color: rgba(68, 68, 77, .1);
}




/**
 * Цвет пиктограмм в списке пользователей панели.
 */
.operator-role { fill: var(--role-operator-color) }
.manager-role { fill: var(--role-manager-color) }
.administrator-role { fill: var(--role-administrator-color) }
.user-role-icon { display: inline-block; width: 20px; height: 20px; }


/**
 * Всплывающее сообщение.
 */
.toast-wrapper .toast {
    border: 1px #ccc solid;
}
.toast-wrapper .toast-body {
    gap: 1rem;
}
.toast-wrapper .toast-body svg {
    width: 4rem;
    height: 4rem;
    line-height: 4rem;
}

.toast-wrapper .toast.toast-danger {
    border-color: #e38f97;
    background-color: #fff6f7 !important;
}
.toast-wrapper .toast.toast-danger svg {
    fill: #dc3545;
}
.toast-wrapper .toast.toast-info {
    border-color: #71c785;
    background-color: #f4fff4 !important;
}
.toast-wrapper .toast.toast-info svg {
    fill: #28a745;
}
.toast-wrapper .toast.toast-warning {
    border-color: #ecb995;
    background-color: #fffaf7 !important;
}
.toast-wrapper .toast.toast-warning svg {
    fill: #ff9915;
}



/**
 * Скроллбар.
 */
/* FireFox */
.scrollbar {
    scrollbar-color: var(--scrollbar-color) var(--scrollbar-bg-color);
    scrollbar-width: thin;
}
/* Chrome */
.scrollbar::-webkit-scrollbar {
    width: 6px;
    background-color: #f9f9fd;
    border-radius: 3px;
}
.scrollbar::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: var(--scrollbar-color);
}
.scrollbar::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .2);
    border-radius: 3px;
    background-color: var(--scrollbar-bg-color);
}