/** СТИЛИ ПРИЛОЖЕНИЯ */
/* https://beautifytools.com/css-minifier.php */

/* Определение переменных */
body {
    --row_top: 10px;
    --color: #373737;
    --color-primary-text-button: white;
    --height_footer: 38px;
    --cl_row_catalog: #d2f2ff;
    --cl_form_text: black;
    --cl_form_button: #ffc838;
    --body_fon: white;
    --color-lighten10: #ffba07;
    --color-lighten: #8BC34A;
    --cl_button_border: rgba(254, 190, 65, 0.80);
    --cl_button_fon: #ffc838;
    --cl_button_fon_hover: rgba(254, 190, 65, 0.80);
    --cl_button_text: black;
    --cl_input_fon: white;
    --cl_input_text: black;
    --cl_fon_block: #d2f2ff;
    --cl_fon_block_hover: rgba(205, 242, 255, 0.71);
    --cl_header_text: black;
    --cl_text: black;
    --cl_text_border: black;
    --cl_text_hover: rgba(0, 0, 0, 0.50);
    --cl_table_border: #e8e9eb;
    --cl_row_block: #d9d9d9;
    --cl_page_fon: white;
    --cl_orange: #FF8D24;
    --cl_danger: darkred;
    --cl_green: green;
    --cl_darkgreen: darkgreen;
    --cl_border_table: #b8c1ca;
    --sz_margin_page: 20px;
    --sz_width_menu: 310px;
    --sz_icon: 14px;
    --page_title_size: 22px;
    --row_subtitle_size: 20px;
    --row_text_size: 18px;
    --cl_hover_link: #1a97d5;
    --cl_list_btn_fon: #d2f2ff;
    --cl_list_btn_text: black;
}

/***************** fade *********************/
.fadeIn{
    animation-name: fadeIn;
    -webkit-animation-name: fadeIn;
    animation-duration: .5s;
    -webkit-animation-duration: 0.5s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
}
@keyframes fadeIn {
    0% {
        transform: scale(0);
        opacity: 0.0;
    }
    60% {
        transform: scale(1.1);
    }
    80% {
        transform: scale(0.9);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
@-webkit-keyframes fadeIn {
    0% {
        -webkit-transform: scale(0);
        opacity: 0.0;
    }
    60% {
        -webkit-transform: scale(1.1);
    }
    80% {
        -webkit-transform: scale(0.9);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(1);
        opacity: 1;
    }
}
.fadeOut{
    animation-name: fadeOut;
    -webkit-animation-name: fadeOut;
    animation-duration: .5s;
    -webkit-animation-duration: 0.5s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
}
@keyframes fadeOut {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    60% {
        transform: scale(0.9);
        opacity: 1;
    }
    80% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(0);
        opacity: 0;
    }
}
@-webkit-keyframes fadeOut {
    0% {
        -webkit-transform: scale(1);
        opacity: 1;
    }
    60% {
        -webkit-transform: scale(0.9);
        opacity: 1;
    }
    80% {
        -webkit-transform: scale(1.1);
    }
    100% {
        -webkit-transform: scale(1);
        opacity: 0.0;
    }
}

/***************** slideDown *********************/
.slideDownIn{
    animation-name: slideDownIn;
    -webkit-animation-name: slideDownIn;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-timing-function: ease;
    -webkit-animation-timing-function: ease;
}
@keyframes slideDownIn {
    0% {transform: translateY(-100%);}
    50% {transform: translateY(8%);}
    65% {transform: translateY(-4%);}
    80% {transform: translateY(4%);}
    95% {transform: translateY(-2%);}
    100% {transform: translateY(0%);}
}
@-webkit-keyframes slideDownIn {
    0% {-webkit-transform: translateY(-100%);}
    50% {-webkit-transform: translateY(8%);}
    65% {-webkit-transform: translateY(-4%);}
    80% {-webkit-transform: translateY(4%);}
    95% {-webkit-transform: translateY(-2%);}
    100% {-webkit-transform: translateY(0%);}
}

/* Placeholders */
::-webkit-input-placeholder {color: #414141;}
:-moz-placeholder {color: #414141;}
::-moz-placeholder {color: #414141;}

/************ Заглушки по высоте **************/
.height20 {
    height: 20px;
    width: 100%;
}

/*********************************** СТРАНИЦА АВТОРИЗАЦИИ ************************************************/
/* Весь блок формы авторизации */
#auth_phone_conteiner {
    margin: auto;
    border-radius: 5px;
    box-shadow: 1px 1px 10px #000;
    background-color: var(--cl_row_catalog, #d2f2ff) !important;
    padding: 20px;
}
/* Заголовок формы авторизации */
.authform_header {
    position: relative;
    text-align: center;
    font-size: 40px;
    color: var(--cl_form_text, black) !important;
    margin: 0 0 10px 0;
}
/* Поля формы авторизации */
.auth_fields {
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    justify-content: center;
    flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    width: 100%;
    flex-direction: column;
    align-content: center;
}
/* Поле ввода авторизации */
.auth_fields input {
    text-decoration: none;
    position: relative;
    width: 90%;
    display: block;
    margin: 9px auto;
    font-size: 18px;
    color: black;
    padding: 8px;
    background: white;
    border: none;
    text-align: center;
    outline: none;
    font-weight: bold;
    -webkit-transition: all 2s ease-in-out;
    -moz-transition: all 2s ease-in-out;
    -o-transition: all 2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
/* Поле ввода телефона в форме авторизации */
#txt_auth_phone {
    max-width: 245px;
    font-weight: normal;
}
.auth_fields input[type="button"] {
    background-color: var(--cl_form_button, #ffc838);
    color: black;
    font-weight: bold;
}
.auth_fields input[type="button"]:not([disabled]):active, .auth_fields input:not([type='button']):focus {
    outline: none;
    box-shadow: 3px 3px 10px #333;
    background: #f1fbff;
    opacity: 0.7;
}
#but_auth_phone, #but_registration {
    max-width: 243px;
    width: -webkit-fill-available;
    width: 150px;
}
#but_auth_phone:disabled, #but_registration:disabled {
    cursor: not-allowed;
    opacity: 0.4;
}
/* Блок кнопок формы */
.block_buttons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    -webkit-justify-content: center;
    justify-content: center;
    flex-direction: column;
}
/* Подсказка о подтверждении номера */
#title_help {
    display: none;
    text-align: center;
    max-width: 300px;
}
/* Поле подтверждения кода авторизации */
#txt_auth_accept {
    display: none;
    max-width: 150px;
}
/* Кнопка сброса авторизации */
#but_reset_code {
    display: none;
    width: auto;
}
/* Надпись входа по паролю */
#goto_in_password, #goto_in_restore {
    text-align: center;
    cursor: pointer;
    width: fit-content;
    align-self: center;
}
#goto_in_password:hover, #goto_in_restore:hover {
    text-decoration: underline var(--cl_hover_link, #1a97d5);
    color: var(--cl_hover_link, #1a97d5);
}

/* Блок ввода пароля */
.block_password {
    display: flex;
}

/* Поле ввода пароля */
#txt_auth_password {
    font-weight: normal;
}

/* Кнопка скрытия блока пароля(крестик) */
#close_block_passwords {
    align-self: center;
    cursor: pointer;
}
#close_block_passwords:hover {
    color: var(--cl_hover_link, #1a97d5);
}

/* Блок дозвона на номер и время */
.auth_fields #block_accept {justify-content: center;}

/***********************************************************************************************************/
.page_container_all {
    display: flex;
    flex-flow: column nowrap;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
}

/* Весь контейнер страницы height: 100vh; */
.page_container {
    display: flex;
    flex-flow: row nowrap;
    flex: 1;
    width: 100%;
    overflow: hidden;
}

/* Классы отображения/скрытия блоков */
.page_container .show_flex {display: flex !important;}
.page_container .hide_flex {display: none !important;}

/* Левая часть страницы контента */
#left_part {display: flex; flex-direction: column;}

/* Футер страницы */
.page_footer {

}

/************************************* Левое меню ********************************************************/
#LeftNavbar {
    width: var(--sz_width_menu, 260px);
    background-color: var(--cl_fon_block, #d2f2ff);
    margin-right: 20px;
    height: fit-content;
}
#LeftNavbar>* {
    display: flex;
    padding: 0 15px;
}
#LeftNavbar>li {cursor: pointer;}
#LeftNavbar>li.paging:hover {
    background-color: var(--cl_fon_block, #d2f2ff);
    filter: contrast(110%);
}
#LeftNavbar>li a {
    font-weight: normal;
    color: var(--cl_text, black);
    text-decoration: none;
}
#LeftNavbar>li.top_border {
    border-top: 1px solid var(--cl_text_border, black);
}
#LeftNavbar>li a.activated {font-weight: bold;}
#LeftNavbar>li.paging a:hover {color: var(--cl_text_hover, rgba(0, 0, 0, 0.50));}

/* Блок ниже левого меня на странице принтов */
#left_down_block {display: flex; flex-direction: column; flex-grow: 1; margin-right: 20px; padding: 10px;}
#icon_print_cur {height: 290px; width: 290px; border: 2px solid lightgray;}
#icon_print_cur img{width: 100%; max-height: 288px; padding: 3px;}

/* Логин аккаунта в левом меню */
#account_phone, #account_role {cursor: default !important;}
#account_phone>* {font-weight: bold !important;}
#account_role>* {color: var(--cl_danger, darkred) !important;}

/* Закрыть меню в мобиле */
.close_menu {display: none;}

/* Заголовок меню */
.header_menu {justify-content: flex-start;}

/*********************************  СТИЛИ СТРАНИЦ ПРИЛОЖЕНИЯ *********************************************/

/* Контент страницы без левого меню */
.template_page {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0 var(--sz_margin_page, 20px) 0 0;
    overflow: hidden;
}

/* Контент страницы без верхнего заголовка */
.wrapper {display: flex; flex-direction: column; overflow: hidden;}

/* Прокрутка на старнице настроек приложения */
#wrapper_settings, #wrapper_company_add, #wrapper_main_editor,
#wrapper_accounts_add, .wrapper_editor, #wrapper_megaorder_editor {overflow: auto; padding-right: 20px;}

/* Блок заголовка страницы */
.template_page .page_title {
    font-size: var(--page_title_size, 22px);
    font-weight: bold;
    text-align: left;
    border-bottom: 1px solid var(--cl_text_border, black);
    padding: 15px 0 15px 0;
    display: flex;
    margin-bottom: 15px;
    flex-wrap: wrap;
    justify-content: space-between;
}

/* Все элементы блока титула страницы */
.template_page .page_title * {align-self: center; margin-right: 5px;}
.template_page .page_title *:last-child {margin-right: 0;}

/* Кнопка возврата в меню(в моб. версии) */
.back_menu {
    display: none;
    cursor: pointer;
    margin-right: 5px;
}

/* Позаголовок страницы */
.subtitle {
    font-size: var(--row_subtitle_size, 20px);
    text-align: center;
    padding: 0 20px 10px 20px;
}

/* Блок с титулом и полем ввода(может включать ещё и кнопку) */
.page_rows {
    display: flex;
    flex-wrap: nowrap;
    line-height: var(--row_text_size, 18px);
    font-size: var(--row_text_size, 18px);
    font-weight: normal;
}

/* Блоки строк с переносом элентов на след. строку */
.page_rows_wrap {
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    padding: 10px 0 0 0;
    align-self: center;
}
.page_rows_wrap * {margin-bottom: 10px;}

/* Каждый элемент блока поля ввода */
.page_rows>* {align-self: center;}

/* Само поле ввода в блоке */
.page_rows input.form-control {
    margin-left: 5px;
    /*margin-right: 10px;*/
    text-align: center;
    font-weight: bold;
    color: var(--cl_input_text, black);
    font-size: var(--row_text_size);
    max-width: 320px;
}

/* Кнопка в блоке поля ввода(если включена) */
.but_page_app {
    padding: 5px 10px;
    margin-right: 10px;
    min-width: 40px;
    height: 38px;
    border-radius: 5px;
    border: 1px var(--cl_button_border, rgba(254, 190, 65, 0.80)) solid;
    background-color: var(--cl_button_fon, #ffc838);
    color: var(--cl_button_text, black);
    font-size: var(--row_text_size, 18px);
    font-weight: bold;
    cursor: pointer;
}

/* Кнопка в фокусе блока поля ввода */
.but_page_app:active:not(:disabled) {outline: 1px solid var(--cl_text_hover, rgba(0, 0, 0, 0.50));}

/* Кнопка под курсором мыши */
.but_page_app:hover:not(:disabled) {filter: contrast(110%);}

/* Кнопка под запретом */
.but_page_app:disabled {cursor: not-allowed; opacity: 0.4;}

/* Спинер загрузки для ajax запросов */
.spinner {
    display: none;
    animation: rotate 2s linear infinite;
    z-index: 3;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -25px 0 0 -25px;
    width: 50px;
    height: 50px;
    stroke: var(--cl_orange, #FF8D24);
}
.spinner.show_spinner {display: flex;}
.content-blocker {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    background-color: rgba(132, 162, 208, 0.5);
    z-index: 2;
}
.content-blocker.show {
    display: block;
    width: 100%;
    height: 100%;
}
.spinner_path {
    stroke: hsl(210, 70, 75);
    stroke-linecap: round;
    animation: dash 1.5s ease-in-out infinite;
}
@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}
@keyframes dash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}

/********************************* СТИЛИ ТАБЛИЦ СТРАНИЦ ПРИЛОЖЕНИЯ *****************************************/

/* Стиль блока с таблицей */
.wrapper_table {width: 100%; overflow: auto; height: 100%;}

/* Стиль всей таблицы */
.wrapper_table table {
    border: 1px solid #495057;
    border-collapse: collapse;
    font-size: 16px;
    min-width: 100%;
    width: max-content !important;
    cursor: default;
}

/* Заголовки таблиц */
.wrapper_table table tr.tbl_header {
    height: 36px;
    min-height: 36px;
    font-weight: bold;
    background-color: #cccccc;
}
tr.tbl_header th {padding: 3px 6px;text-align: center;}

/* Строки таблиц */
.wrapper_table table tr {
    border: 1px solid var(--cl_border_table, #b8c1ca);
    height: 32px;
    min-height: 32px;
}

/* Заблокированная и спойлерная строки */
.wrapper_table table tr.rw_header {background-color: var(--cl_row_catalog, lightblue); font-weight: bold; height: 42px;}
.wrapper_table table tr.rw_block {background-color: var(--cl_table_border, #e8e9eb);}
.wrapper_table table tr.rw_prod_block {background-color: #f0f2f4;}

/* Каждая ячейка таблицы */
.wrapper_table table td {
    border: 1px solid var(--cl_border_table, b8c1ca);
    white-space: nowrap;
    padding: 3px 6px;
}

/*********************** Кнопки в таблицах **********************/

/* Общие стили кнопок в таблицах margin: 1px 0 0 0;*/
.wrapper_table table .but_app {
    display: inline-block;
    margin: 0;
    width: auto;
    height: auto;
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-decoration: none;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
    border-radius: 3px;
    border: 1px solid rgba(0,0,0,0.50);
    border-top: 1px solid rgba(0,0,0,0.001);
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.18), inset 0 -2px 0 rgba(0,0,0,0.35), inset 0 2px 2px rgba(255,255,255,0.10);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.18), inset 0 -2px 0 rgba(0,0,0,0.35), inset 0 2px 2px rgba(255,255,255,0.10);
    -o-box-shadow: 0 0 10px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.18), inset 0 -2px 0 rgba(0,0,0,0.35), inset 0 2px 2px rgba(255,255,255,0.10);
    -ms-box-shadow: 0 0 10px rgba(0,0,0,0.35), 0px 1px 2px rgba(0,0,0,0.18), inset 0px -2px 0px rgba(0,0,0,0.35), inset 0px 2px 2px rgba(255,255,255,0.10);
    -ms-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    cursor: pointer !important;
}
.wrapper_table table .but_app:hover{
    text-decoration: none;
    -webkit-box-shadow:  0 0 10px rgba(0,0,0,0.35), 0 1px 3px rgba(0,0,0,0.18), inset 0 -3px 0 rgba(0,0,0,0.35), inset 0 14px 14px rgba(255,255,255,0.25);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.35), 0 1px 3px rgba(0,0,0,0.18), inset 0 -3px 0 rgba(0,0,0,0.35), inset 0 14px 14px rgba(255,255,255,0.25);
    -o-box-shadow: 0 0 10px rgba(0,0,0,0.35), 0 1px 3px rgba(0,0,0,0.18), inset 0 -3px 0 rgba(0,0,0,0.35), inset 0 14px 14px rgba(255,255,255,0.25);
    -ms-box-shadow: 0 0 10px rgba(0,0,0,0.35), 0px 1px 3px rgba(0,0,0,0.18), inset 0px -3px 0px rgba(0,0,0,0.35), inset 0px 14px 14px rgba(255,255,255,0.25);
    box-shadow:  0 0 10px rgba(0,0,0,0.35), 0 1px 3px rgba(0,0,0,0.18), inset 0 -3px 0 rgba(0,0,0,0.35), inset 0 14px 14px rgba(255,255,255,0.25);
}
.wrapper_table table .but_app:active{
    border-top: 1px solid rgba(0,0,0,0.55);
    -webkit-animation: none;
    -webkit-box-shadow: 0 0 1px rgba(0,0,0,0.35), 0 1px 1px rgba(0,0,0,0.18), inset 0 0 0 rgba(0,0,0,0.35), inset 0 0 0 rgba(255,255,255,0.1);
    -moz-box-shadow: 0 0 1px rgba(0,0,0,0.35), 0 1px 1px rgba(0,0,0,0.18), inset 0 0 0 rgba(0,0,0,0.35), inset 0 0 0 rgba(255,255,255,0.1);
    -o-box-shadow: 0 0 1px rgba(0,0,0,0.35), 0 1px 1px rgba(0,0,0,0.18), inset 0 0 0 rgba(0,0,0,0.35), inset 0 0 0 rgba(255,255,255,0.1);
    -ms-box-shadow: 0 0 1px rgba(0,0,0,0.35), 0 1px 1px rgba(0,0,0,0.18), inset 0 0px 0 rgba(0,0,0,0.35), inset 0 0px 0px rgba(255,255,255,0.1);
    box-shadow:  0 0 1px rgba(0,0,0,0.35), 0 1px 1px rgba(0,0,0,0.18), inset 0 0 0 rgba(0,0,0,0.35), inset 0 0 0 rgba(255,255,255,0.1);
}

/* Кнопки общего и строкового коллапса строк в таблицах */
.wrapper_table table .col_all{
    padding: 6px 12px;
    background-color: #1c3345;
    color: #fff;
}
.wrapper_table table .col_one{
    padding: 0 8px;
    background-color: #6397b4;
    color: #fff;
    min-width: 23px;
    max-width: 23px;
    max-height: 24px;
}

/* Кнопки коллапса всех строк в таблицах */
#collapse_all {
    width: 28px !important;
    height: 28px !important;
    padding: 2px 6px !important;
    text-align: center;
}

/*********************** Элементы страницы  **********************/

/* Блок строки поля ввода вместе с фильтром */
.row_filters {justify-content: space-between; flex-flow: row wrap;}

/* Сам блок фильтров справа */
.block_filters *:not(:last-child) {margin-right: 5px;}

/* Блок строки фильтра таблиц */
.list_table .filters {margin-bottom: 10px;}
.list_table .filters>* {margin: 0 0 8px 8px; height: 35px;}

/* Кнопка элемента спадающего списка dropdown */
.wrapper .dropdown .dropdown-toggle {
    padding: 0 10px;
    font-size: var(--row_text_size, 18px);
    background-color: var(--cl_list_btn_fon, #d2f2ff);
    color: var(--cl_list_btn_text, black);
}
.wrapper .dropdown .dropdown-toggle:active,
.wrapper .dropdown .dropdown-toggle:focus {outline: none !important;}

/* Блок выпадающего списка */
.wrapper .dropdown .dropdown-menu {
    margin-top: 5px;
    padding-top: unset;
    padding-bottom: unset;
    overflow-y: auto;
    overflow-x: hidden;
    height: 500px;
}

/* Каждый элемент выпадающего списка */
.wrapper .dropdown .dropdown-item {
    cursor: pointer;
    padding-left: 0.6rem;
    padding-right: 0.6rem;
}

/* Кнопки добавления/удаления */
.but_record {
    text-align: end;
    text-align: -moz-right;
    text-align: -webkit-right;
    padding: 0 7px;
    height: 24px;
    width: 24px;
    max-width: 24px;
    max-height: 24px;
    display: inline-block;
    margin: 0;
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-decoration: none;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -o-border-radius: 12px;
    -ms-border-radius: 12px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.50);
    border-top: 1px solid rgba(0,0,0,0.001);
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.18), inset 0 -2px 0 rgba(0,0,0,0.35), inset 0 2px 2px rgba(255,255,255,0.10);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.18), inset 0 -2px 0 rgba(0,0,0,0.35), inset 0 2px 2px rgba(255,255,255,0.10);
    -o-box-shadow: 0 0 10px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.18), inset 0 -2px 0 rgba(0,0,0,0.35), inset 0 2px 2px rgba(255,255,255,0.10);
    -ms-box-shadow: 0 0 10px rgba(0,0,0,0.35), 0px 1px 2px rgba(0,0,0,0.18), inset 0px -2px 0px rgba(0,0,0,0.35), inset 0px 2px 2px rgba(255,255,255,0.10);
    -ms-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
    text-shadow: -1px -1px 0 white, 1px 1px 0 white, -1px 1px 0 white, 1px -1px 0 white !important;
    /*margin-left: -1px !important;*/
}
.but_record:hover {
    text-decoration: none;
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.18), inset 0 -2px 0 rgba(0,0,0,0.35), inset 0 2px 2px rgba(255,255,255,0.10);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.18), inset 0 -2px 0 rgba(0,0,0,0.35), inset 0 2px 2px rgba(255,255,255,0.10);
    -o-box-shadow: 0 0 10px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.18), inset 0 -2px 0 rgba(0,0,0,0.35), inset 0 2px 2px rgba(255,255,255,0.10);
    -ms-box-shadow: 0 0 10px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.18), inset 0 -2px 0 rgba(0,0,0,0.35), inset 0 2px 2px rgba(255,255,255,0.10);
    box-shadow:  0 0 10px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.18), inset 0 -2px 0 rgba(0,0,0,0.35), inset 0 2px 2px rgba(255,255,255,0.10);
}
.but_record:active {
    margin: 1px 0 0 0;
    border-top: 1px solid rgba(0,0,0,0.55);
    -webkit-animation: none;
    -webkit-box-shadow: 0 0 1px rgba(0,0,0,0.35), 0 1px 1px rgba(0,0,0,0.18), inset 0 0 0 rgba(0,0,0,0.35), inset 0 0 0 rgba(255,255,255,0.1);
    -moz-box-shadow: 0 0 1px rgba(0,0,0,0.35), 0 1px 1px rgba(0,0,0,0.18), inset 0 0 0 rgba(0,0,0,0.35), inset 0 0 0 rgba(255,255,255,0.1);
    -o-box-shadow: 0 0 1px rgba(0,0,0,0.35), 0 1px 1px rgba(0,0,0,0.18), inset 0 0 0 rgba(0,0,0,0.35), inset 0 0 0 rgba(255,255,255,0.1);
    -ms-box-shadow: 0 0 1px rgba(0,0,0,0.35), 0 1px 1px rgba(0,0,0,0.18), inset 0 0px 0 rgba(0,0,0,0.35), inset 0 0px 0px rgba(255,255,255,0.1);
    box-shadow:  0 0 1px rgba(0,0,0,0.35), 0 1px 1px rgba(0,0,0,0.18), inset 0 0 0 rgba(0,0,0,0.35), inset 0 0 0 rgba(255,255,255,0.1);
}
.add_record {
    background-color: var(--cl_orange, #FF8D24);
    color: var(--cl_orange, #FF8D24);
}
.del_record {
    background-color: var(--cl_danger, darkred);
    color: white !important;
    padding: 0 8px;
    text-shadow: 1px 0 0 white, -1px 0 0 white !important;
    line-height: 16px;
}

/* Блок со свойством flex */
.flex {
    display: -ms-flexbox;
    display: -ms-flex;
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}
.flexend {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}
.flex.nowrap, .flexend.nowrap {-ms-flex-wrap: nowrap; flex-wrap: nowrap;}
.flex.wrap, .flexend.wrap {-ms-flex-wrap: wrap; flex-wrap: wrap;}
.flex.row, .flexend.row {-ms-flex-direction: row; -webkit-flex-direction: row; flex-direction: row;}
.flex.column, .flexend.column {-ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column;}
.flex.hide, .flexend.hide {display: none;}

/* Блок таблицы с фильтрами */
.list_table {overflow: hidden;}
#wrapper_main_editor .list_table {overflow: unset;}

/* Кнопки в заголовке */
.title_buttons>* {margin: 8px 0 0 5px !important;}
.title_buttons>*:first-child {margin-left: 0 !important;}
.title_buttons {margin-top: -5px;}

/* Класс скрытия элемента */
.hide_mode {display: none;}

/* Блок пустого содержимого */
.nothing_block {
    border: 1px solid darkred;
    border-radius: 5px;
    padding: 10px;
    text-align: center;
}

/* Класс отступа вниз на 10px */
.margin_bottom {margin-bottom: 10px;}
.margin_bottom20 {margin-bottom: 20px;}
.margin_top {margin-top: 10px;}

/* Цвета текста ячейки результата */
.color_green {color: darkgreen;}
.color_red {color: darkred;}

/* Фильтр по периоду */
.filter_period input.form-control {
    height: 35px;
    border: 1px solid #495057;
    color: #353535;
    font-weight: bold;
    margin: 0;
    -webkit-align-self: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-self: center;
    width: 110px;
    text-align: center;
    cursor: default !important;
}
.divider_period {margin: 0 3px; align-self: center;}

/* Поля элементов ввода */
.form-control:focus {box-shadow: unset;}

/* Ячейка выделения в таблице */
.select_cell {color: white; background-color: #0a4b78;}

/* Поле редактирования в ячейке с режимом редактирования */
.cell_edit {
    height: 28px !important;
    width: 78px !important;
    padding: 0 !important;
    line-height: 25px !important;
    outline: none !important;
    text-align: center !important;
    border: 1px solid darkgreen !important;
    vertical-align: center !important;
}

/* Флажок установки роли доступа */
.chk_role {margin-left: 5px;}

/* Инфоокно на странице редактирования пользователя */
#user_info {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    border: 3px double #ced4da;
    border-radius: 5px;
    padding: 10px;
    background: #f4f2f2;
    max-width: 330px;
    width: 330px;
}
#user_info>* {
    width: 100%;
    text-align: center;
    margin: 5px;
}
#user_info>*:first-child {font-weight: bold;}

/* Список ролей пользователя */
#user_roles {font-weight: bold; color: var(--cl_danger, darkred);}

/* Класс признака аккаунта в онлайн(зеленный) */
.is_online {
    font-weight: bold;
    color: var(--cl_darkgreen, darkgreen);
}

/* Центровка ячейки количества сессий на странице списка пользователей. */
#tbl_accounts td:nth-child(10), #tbl_accounts th:nth-child(10) {text-align: center;}

/* Обводка кнопок */
button::-moz-focus-inner {border: 0 !important;}
button:active, button:focus {outline: none !important;}
button {box-shadow: none !important;}

/* Удаление текущего файла документа(крестик) */
#delete_file_pdf {
    align-self: center;
    font-size: 18px;
    font-weight: bold;
    color: darkred;
    cursor: pointer;
}
.filters #delete_file_pdf {margin-left: 8px;}

/* Cелект выбора ролей (фильтр) на странице аккаунтов */
#filter_role_type_chosen {height: unset;}
.chosen-container .chosen-choices {padding: 2px 5px !important;}

/* Всплывающие подсказки (широкие) */
.wide_tooltip_window.tooltip .tooltip-inner {display: flex; max-width: unset; flex-direction: column;}
.wide_tooltip_window.tooltip .tooltip-inner * {align-self: center;}

/* Ссылки на редактирование/действие в сущностях */
.ref_edit_accounts {cursor: pointer;}
.ref_auth_accounts {cursor: pointer;}

/* Мерцающий текст */
@keyframes blink {
    0%, 100% {opacity: 1;}
    50% {opacity: 0;}
}
.blink-text {
    animation: blink 1s step-end infinite;
    -webkit-animation: blink 1s step-end infinite;
    transform: translateZ(0);
    font-size: 16px;
    margin-top: 12px !important;
    color: darkred;
    font-weight: 600;
}
.fast-blink {animation-duration: 0.5s;}
.slow-blink {animation-duration: 2s;}

/* Превью принтов */
.preview_print {padding: 2px;}

/* Кнопки пересоздания кеша принтов и превью */
.wrapper_table table .recreate_folder_print, .wrapper_table table .recreate_folder_preview {
    padding: 0 8px;
    background-color: darkred;
    color: #fff;
    min-width: 23px;
    max-height: 24px;
}
.wrapper_table table .recreate_folder_print {margin-right: 5px;}

/* Модальные окна bootstrap */
.modal .modal-content {max-width: calc(100vw - 60px) !important; width: auto !important;}

/******************************* МОБИЛЬНАЯ ВЕРСИЯ ********************************/
@media (max-width: 575px) {

    /* Переназначение переменных */
    body {
        --sz_margin_page: 15px;
        --page_title_size: 20px;
        --row_subtitle_size: 18px;
        --row_text_size: 16px;
    }

    /* Левое меню навигации скрыто */
    #left_part {display: none; width: 100%; margin: 0;}
    #icon_print_cur {display: none;}

    /* Закрыть меню в мобиле */
    .close_menu {
        display: block;
        font-weight: bold;
        cursor: pointer;
        font-size: 18px;
        padding: 10px;
        position: absolute;
        right: 0;
        top: -10px;
    }
    .close_menu:active {
        font-weight: 20px;
        opacity: 0.6;
    }

    /* Заголовок меню */
    .header_menu {justify-content: space-between;}

    /* Отображение кнопки возврата в меню(стрелки влево) */
    .back_menu {
        display: inline;
    }

    /* Отступ у контента страницы справа тоже */
    .template_page {padding: 0 var(--sz_margin_page, 20px) 0 var(--sz_margin_page, 20px);}

    /* Скрываем навигацию скроллинга в мобильной версии */
    .ui-ears-wrapper .ui-ear {display: none;}

}