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

/* Определение переменных */
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;
    --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;
}

/***************** 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);
}

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

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

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

/************************************* Левое меню ********************************************************/
#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;
    cursor: pointer;
}
#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));}
#select_vkgroup {margin-bottom: 15px;}

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

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

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

/* Блок заголовка страницы */
.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;
    display: flex;
    margin-bottom: 15px;
    flex-wrap: nowrap;
    justify-content: space-between;
}

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

/* Блок роли аккаунта */
#account_role {margin-top: -15px;}
#account_role > * {color: var(--cl_danger, darkred) !important;}

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

/* Отображение крестика закрытия меню */
.close_menu {display: none;}

/* Позаголовок страницы */
.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;}

/* Отступ вниз */
.margin_bottom {margin-bottom: 10px;}
.margin_bottom_5 {margin-bottom: 5px;}

/* Каждый элемент блока поля ввода */
.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 запросов */
.template_page .spinner {
    display: none;
    animation: rotate 2s linear infinite;
    z-index: 2;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -25px 0 0 -25px;
    width: 50px;
    height: 50px;
    stroke: var(--cl_orange, #FF8D24);
}
.template_page .spinner.show_spinner {display: flex;}
.template_page .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_block {background-color: var(--cl_table_border, #b8c1ca);}
.wrapper_table table tr.rw_header {background-color: var(--cl_row_catalog, lightblue); font-weight: bold;}

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

/********************** Столбцы таблицы комментов с постов ***********************/

/* Столбец со чекбоксами */
#tbl_comments td:nth-child(1), #tbl_comments th:nth-child(1) {
    min-width: 40px;
    width: 40px;
    max-width: 40px;
    text-align: center;
}
/* Столбец со спойлерами */
#tbl_comments td:nth-child(2), #tbl_comments th:nth-child(2) {
    min-width: 40px;
    width: 40px;
    max-width: 40px;
    text-align: center;
}
/* Столбец ФИО */
#tbl_comments td:nth-child(3), #tbl_comments th:nth-child(3) {
    min-width: 100px;
    text-align: left;
    white-space: normal;
}
/* Столбец Логин */
#tbl_comments td:nth-child(4), #tbl_comments th:nth-child(4) {
    min-width: 100px;
    text-align: left;
    white-space: normal;
}
/* Столбец с id фото */
#tbl_comments td:nth-child(5), #tbl_comments th:nth-child(5) {
    min-width: 100px;
    width: 100px;
    max-width: 100px;
    text-align: center;
}
.ref_photo {cursor: pointer;}
/* Столбец с результатом */
#tbl_comments td:nth-child(7), #tbl_comments th:nth-child(7) {
    min-width: 120px;
    width: 120px;
    max-width: 120px;
    text-align: center;
}
/* Столбец с датой */
#tbl_comments td:nth-child(8), #tbl_comments th:nth-child(8) {
    min-width: 135px;
    width: 135px;
    max-width: 135px;
    text-align: center;
}
/* Столбец с типом строки */
#tbl_comments td:nth-child(9), #tbl_comments th:nth-child(9) {display: none;}
/* Столбец с id коммента */
#tbl_comments td:nth-child(10), #tbl_comments th:nth-child(10) {display: none;}
/* Столбец с ответом */
#tbl_comments td:nth-child(11), #tbl_comments th:nth-child(11) {
    min-width: 130px;
    width: 130px;
    max-width: 130px;
    text-align: center;
}

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

/********************** Столбцы таблицы альбомов ***********************/

/* Столбец со чекбоксами */
#tbl_albums td:nth-child(1), #tbl_albums th:nth-child(1) {
    min-width: 40px;
    width: 40px;
    max-width: 40px;
    text-align: center;
}
/* Столбец ID */
#tbl_albums td:nth-child(2), #tbl_albums th:nth-child(2) {
    min-width: 100px;
    width: 100px;
    max-width: 100px;
    text-align: right;
}
/* Столбец Фото/Всего */
#tbl_albums td:nth-child(3), #tbl_albums th:nth-child(3) {text-align: right;}
/* Столбец Коммент */
#tbl_albums .comm_count {text-align: right;}
/* Столбец Удалено */
#tbl_albums .del_count {text-align: right;}
/* Столбец Осталось */
#tbl_albums .noready_count {text-align: right;}
/* Столбец Готово */
#tbl_albums .ready_count {text-align: right;}

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

/* Любая ячейка заголовка в таблицах */
.wrapper_table table th {text-align: center !important;}

/* Общие стили кнопок в таблицах */
.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 {
    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 0px 0 rgba(0,0,0,0.35), inset 0 0px 0px 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 0px 0 rgba(0,0,0,0.35), inset 0 0px 0px 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 0px 0 rgba(0,0,0,0.35), inset 0 0px 0px 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 0px 0 rgba(0,0,0,0.35), inset 0 0px 0px 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: 4px 6px !important;
}

/* Кнопки добавления/удаления */
.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: 0px 8px;
    text-shadow: 1px 0 0 white, -1px 0 0 white !important;
    line-height: 16px;
}

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

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

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

/*********************** Элементы страницы массовой рассылки по коментам **********************/

/* Весь блок ввода текста массовой рассылки */
.wrapper_txtarea {}

/* Заголовок поля ввода базового текста рассылки */
.wrapper_txtarea .txtarea_header {
    line-height: var(--row_text_size, 18px);
    font-size: var(--row_text_size, 18px);
    font-weight: normal;
}

/* Текстовое поле базового сообщения рассылки */
.wrapper_txtarea .txtarea {
    min-height: 160px;
    width: 100%;
    padding: 10px 15px 0 15px;
    border: 1px solid var(--cl_text_border, black);
    border-radius: 5px;
    margin-top: 5px;
    outline: none;
}

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

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

/* Фильтр "Весь период" таблицы комментов */
.page_row_checkbox {display: flex; margin-left: 5px; cursor: default;}
.page_row_checkbox *:not(:last-child) {margin-right: 5px;}

/* Кнопки ручного блокирования/разблокирования комментов */
.but_in_cell {
    height: 28px;
    font-size: 16px;
    padding: 0 5px;
    border-radius: 5px;
    font-weight: bold;
}
.blocking_type {
    background-color: var(--cl_danger, darkred);
    color: white;
    width: 28px;
}
.allow_type {
    background-color: var(--cl_darkgreen, darkgreen);
    color: white;
    width: 28px;
}

/* Блок со свойством 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;}

/* Блок со свойством flex */
.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;}

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

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

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

/* Флажок установки роли доступа */
.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);
}

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

/* Выпадающий список */
.dropdown {
    background-color: white;
    border-radius: .25rem;
    height: 35px;
    align-self: center;
    margin-right: 10px;
}

/* Окно инфо авторизации вк */
#auth_info {
    margin-bottom: 10px;
    border: 1px solid darkgreen;
    border-radius: 5px;
    padding: 10px;
    text-align: center;
    color: darkred;
}

/* Блок ввода капчи */
.fld_captcha {
    margin-top: 5px;
}
.field_captcha {
    width: 200px;
}

/* Блок ответов на коммент (коммента и в личку) */
.answer_block {
    border: 1px darkgreen solid;
    padding: 15px;
    margin-bottom: 10px;
}

/* Позаголовок вкладок страницы */
.tab-content .subtitle {padding-top: 10px;}

/* Спадающие списки */
.vk_dropdown {
    background-color: #e4f7ff;
    font-size: 18px;
    cursor: pointer;
    border: none;
    text-align: left;
    border-radius: 5px;
    padding: 5px 8px;
}

/* Вкладки страниц */
.wrapper .nav-tabs .nav-item {color: black;}
.wrapper .nav-tabs .nav-item.active {color: #007bff;}

/* Таблица связки картинок Яндекс диска */
.td_green {color: darkgreen; font-weight: bold;}

/* Элемент загрузки файлов фона на странице товаров */
.image_upload_filesize {
    position: absolute;
    bottom: -13px;
    text-align: center;
    font-size: 7px;
    color: #ff0000;
    font-weight: 700;
    min-width: 36px;
    right: 0;
}
.image_upload_input {
    opacity: 0;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;
    width: 100%;
}
.image_upload_img {
    background: url(data:image/png;base64,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) no-repeat 50%;
    background-size: contain;
    width: 20px;
    height: 20px;
    margin-left: 1px;
    margin-top: 1px;
    transform: scale(1.1);
}
.image_upload_nofile {
    transition: all .05s ease-in;
    cursor: pointer;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.image_upload_nofile:focus, .image_upload_nofile:hover {-webkit-transform: scale(1.1); transform: scale(1.1);}
.image_upload {
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;
    background-color: #ededed;
    background-position-x: 0%;
    background-position-y: 0%;
    background-image: none;
    background-size: 100%;
    background-position: 0 50%;
    background-repeat: no-repeat;
    border: 1px dashed #bababa;
    border-radius: 4px;
}
.image_upload_small {height: 36px; width: 36px; margin-top: 2px; margin-right: 5px;}
.btn:not(:disabled):not(.disabled) {cursor: pointer;}
.image_upload_delete {
    font-weight: bold;
    position: absolute;
    bottom: 5px;
    left: 5px;
    color: #fff;
    padding: 2px 4px;
    background-color: rgb(248, 108, 107);
    border-radius: 3px;
    width: 30px;
    height: 24px;
    display: flex;
    justify-content: center;
    cursor: pointer;
}
.image_upload_small .image_upload_delete {
    position: static;
    display: none;
}
.image_upload_small:hover .image_upload_delete, .image_upload_small:focus .image_upload_delete {
    width: 34px;
    height: 34px;
    display: flex;
}
.mdi {
    font-size: 18px;
    vertical-align: middle;
    margin-right: 0px;
}

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

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

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

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

    /* Отображение крестика закрытия меню */
    .close_menu {
        display: block;
        font-weight: bold;
        cursor: pointer;
        font-size: 18px;
        padding: 10px;
        position: absolute;
        right: 0;
        top: -10px;
    }

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

}