:root {
    --color-black: #2F313D;
    --color-mediumblack: #484D60;
    --color-dark: #163C6E;
    --color-blue: #2f7fed;
    --color-green: #12C856;
    --color-red: #EE4A68;
    --color-darkgrey: #747d88;
    --color-grey: #cbcfd4;
    --color-lightgrey: #f2f4f7;
    --color-white: #fff;

    --control-border: 1px solid var(--color-grey);

    --control-border-radius: 5px;
    --control-height: 42px;
    --control-font-size: 0.8rem;
    --control-label-size: 0.85rem;


    --control-min-coeff: 0.666666666;

    --control-min-border-radius: calc(var(--control-border-radius) * var(--control-min-coeff));
    --control-min-height: calc(var(--control-height) * var(--control-min-coeff));
    --control-min-font-size: calc(var(--control-font-size) * var(--control-min-coeff));
}

.color-black {
    color: var(--color-black) !important;
}

.color-mediumblack {
    color: var(--color-mediumblack) !important;
}

.color-dark {
    color: var(--color-dark) !important;
}

.color-blue {
    color: var(--color-blue) !important;
}

.color-green {
    color: var(--color-green) !important;
}

.color-red {
    color: var(--color-red) !important;
}

.color-darkgrey {
    color: var(--color-darkgrey) !important;
}

.color-grey {
    color: var(--color-grey) !important;
}

.color-lightgrey {
    color: var(--color-lightgrey) !important;
}

.color-white {
    color: var(--color-white) !important;
}

.background-black {
    background-color: var(--color-black);
}

.background-mediumblack {
    background-color: var(--color-mediumblack) !important;
}

.background-dark {
    background-color: var(--color-dark) !important;
}

.background-blue {
    background-color: var(--color-blue) !important;
}

.background-green {
    background-color: var(--color-green) !important;
}

.background-red {
    background-color: var(--color-red) !important;
}

.background-darkgrey {
    background-color: var(--color-darkgrey) !important;
}

.background-grey {
    background-color: var(--color-grey) !important;
}

.background-lightgrey {
    background-color: var(--color-lightgrey) !important;
}

.background-white {
    background-color: var(--color-white) !important;
}

.border-black {
    border-color: var(--color-black);
}

.border-mediumblack {
    border-color: var(--color-mediumblack) !important;
}

.border-dark {
    border-color: var(--color-dark) !important;
}

.border-blue {
    border-color: var(--color-blue) !important;
}

.border-green {
    border-color: var(--color-green) !important;
}

.border-red {
    border-color: var(--color-red) !important;
}

.border-darkgrey {
    border-color: var(--color-darkgrey) !important;
}

.border-grey {
    border-color: var(--color-grey) !important;
}

.border-lightgrey {
    border-color: var(--color-lightgrey) !important;
}

.border-white {
    border-color: var(--color-white) !important;
}

.content-wrapper {
    width: 100%;
    min-width: 1040px;
    margin: auto;
    padding: 75px 20px 0 83px;
}

.pagination ul > li > button {
    padding: 4px 12px;
    margin-left: 10px;
    margin-right: 10px;
    line-height: 20px;
    text-decoration: none;
    background-color: #ffffff;
    border: 3px solid #dddddd;
    border-radius: 5px;
}

.flex-container {
    display: flex;
    border-radius: 6px;
    border: none;
}

.filtration {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    /* align-items: flex-end; */
    width: fit-content;
    padding-left: 0;
}

.flex {
    display: flex;
}

.flex-direction_column {
    flex-direction: column;
}

.flex-direction_row {
    flex-direction: row;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-gap_5 {
    gap: 5px;
}

.flex-gap_10 {
    gap: 10px;
}

.flex-gap_15 {
    gap: 15px;
}

.flex-gap_20 {
    gap: 20px;
}

.search__field {
    box-sizing: border-box;
    padding: 9px 20px 9px 15px;
    background: transparent;
    border: none;
}

.grid-columns_1,
.grid-columns_2,
.grid-columns_3,
.grid-columns_4 {
    display: grid;
}

.grid-columns_1 .input,
.grid-columns_2 .input,
.grid-columns_3 .input,
.grid-columns_4 .input {
    width: 100%;
}

.grid-columns_1 {
    grid-template-columns: repeat(1, 1fr);
}

.grid-columns_2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid-columns_3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid-columns_4 {
    grid-template-columns: repeat(4, 1fr);
}

.grid-column-1 {
    grid-column: 1/span 1 !important;
}

.grid-column-2 {
    grid-column: 2/span 1 !important;
}

.grid-column-3 {
    grid-column: 3/span 1 !important;
}

.grid-column-4 {
    grid-column: 4/span 1 !important;
}

.grid-unit-column-2 {
    grid-column: span 2 !important;
}

.grid-unit-column-3 {
    grid-column: span 3 !important;
}

.grid-unit-column-4 {
    grid-column: span 4 !important;
}

.grid-unit-row-2 {
    grid-row: span 2 !important;
}

.grid-unit-row-3 {
    grid-row: span 3 !important;
}

.grid-unit-row-4 {
    grid-row: span 4 !important;
}

.grid-gap_5 {
    grid-gap: 5px !important;
}

.grid-gap_10 {
    grid-gap: 10px !important;
}

.grid-gap_15 {
    grid-gap: 15px !important;
}

.grid-gap_20 {
    grid-gap: 20px !important;
}

.grid-gap_25 {
    grid-gap: 25px !important;
}

.grid-gap_30 {
    grid-gap: 30px !important;
}

.grid-gap_35 {
    grid-gap: 35px !important;
}

.grid-gap_40 {
    grid-gap: 40px !important;
}

.grid-gap_45 {
    grid-gap: 45px !important;
}

.grid-gap_50 {
    grid-gap: 50px !important;
}

.grid-gap_55 {
    grid-gap: 55px !important;
}

.grid-gap_60 {
    grid-gap: 60px !important;
}

.grid-gap_65 {
    grid-gap: 65px !important;
}

.grid-gap_70 {
    grid-gap: 70px !important;
}

.grid-gap_75 {
    grid-gap: 75px !important;
}

.grid-gap_80 {
    grid-gap: 80px !important;
}

.grid-gap_85 {
    grid-gap: 85px !important;
}

.grid-gap_90 {
    grid-gap: 90px !important;
}

.grid-gap_95 {
    grid-gap: 95px !important;
}

.grid-gap_100 {
    grid-gap: 100px !important;
}

.button,
.button_icon,
.button_arrow,
.button_white,
.button_white_border,
.button_black,
.button_mediumblackck,
.button_dark,
.button_blue,
.button_green,
.button_red,
.button_grey,
.button_shadow,
.button_lightgrey {
    display: inline-block;
    height: var(--control-height);
    min-width: 140px;
    padding: 14px 30px 13px;
    font-size: var(--control-font-size);
    line-height: 120%;
    letter-spacing: 0.01em;
    font-weight: 500;
    white-space: nowrap;
    background-color: transparent;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: var(--control-border-radius);
    transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s, color 0.3s;
    align-self: flex-end;
}

.button_icon {
    text-align: left;
    padding: 13px 15px 12px 14px;
}

.button_icon .mdi {
    font-size: 1.2em;
    margin-right: 1ch;
    vertical-align: text-top;
}

.button_arrow {
    position: relative;
    padding: 12px 45px 12px 30px;
}

.button_arrow::after {
    content: "\F0054";
    position: absolute;
    top: calc(50% - 0.3em);
    right: 15px;
    font-family: 'Material Design Icons';
    font-size: 18px;
    transition: transform 0.3s;
}

.button_arrow:hover:after {
    transform: translateX(10px);
}

.button_arrow_back {
    position: relative;
    padding: 12px 45px 12px 30px;
}

.button_arrow_back::after {
    content: "\F004D";
    position: absolute;
    top: calc(50% - 0.3em);
    left: 15px;
    font-family: "Material Design Icons";
    font-size: 18px;
    transition: transform 0.3s;
}

.button_arrow_back:hover:after {
    transform: translateX(-10px);
}

.button_white {
    color: var(--color-black);
    background-color: var(--color-white);
    border-color: var(--color-grey);
}

.button_white:hover {
    color: var(--color-white);
    background-color: var(--color-blue);
}

.button_white_border {
    color: var(--color-white);
    background-color: transparent;
    border-color: var(--color-white);
}

.button_white_border:hover {
    color: var(--color-dark);
    background-color: var(--color-white);
}

.button_grey {
    color: var(--color-white);
    background-color: var(--color-darkgrey);
}

.button_grey:hover {
    color: var(--color-white);
    background-color: var(--color-grey);
}

.button_lightgrey {
    color: var(--color-black);
    background-color: var(--color-lightgrey);
}

.button_lightgrey:hover {
    background-color: var(--color-white);
    border-color: var(--color-grey);
}

.button_mediumblackck {
    color: var(--color-white);
    background-color: var(--color-mediumblack);
}

.button_mediumblackck:hover {
    color: var(--color-mediumblack);
    background-color: var(--color-white);
    border-color: var(--color-mediumblack);
}

.button_black {
    color: var(--color-white);
    background-color: var(--color-black);
}

.button_black:hover {
    color: var(--color-black);
    background-color: var(--color-white);
    border-color: var(--color-black);
}

.button_dark {
    color: var(--color-white);
    background-color: var(--color-dark);
}

.button_dark:hover {
    color: var(--color-dark);
    background-color: var(--color-white);
    border-color: var(--color-dark);
}

.button_blue {
    color: var(--color-white);
    background-color: var(--color-blue);
}

.button_blue:hover {
    color: var(--color-blue);
    background-color: var(--color-white);
    border-color: var(--color-blue);
}

.button_green {
    color: var(--color-white);
    background-color: var(--color-green);
}

.button_green:hover {
    color: var(--color-green);
    background-color: var(--color-white);
    border-color: var(--color-green);
}

.button_red {
    color: var(--color-white);
    background-color: var(--color-red);
}

.button_red:hover {
    color: var(--color-red);
    background-color: var(--color-white);
    border-color: var(--color-red);
}

.button_shadow,
.button_shadow_white {
    color: var(--color-dark);
    background-color: var(--color-white);
    border-color: var(--color-dark);
    box-shadow: 1px 1px 1px var(--color-dark);
}

.button_shadow:hover,
.button_shadow_white:hover {
    color: var(--color-white);
    background-color: var(--color-dark);
    box-shadow: none;
}

.button_shadow_white {
    border-color: var(--color-white);
    box-shadow: 1px 1px 1px var(--color-white);
}

.button_shadow_white:hover {
    color: var(--color-dark);
    background-color: var(--color-white);
}

.button_text {
    display: inline-flex;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    width: fit-content;
    min-width: auto;
    padding: 0;
    font-weight: 500;
    color: var(--color-mediumblack);
    background: transparent;
    border: none;
    border-radius: 0px;
    cursor: pointer;
    transition: color 0.3s;
}

.button_text .icon,
.button_text .mdi {
    margin-right: 5px;
}

.button_text:hover {
    color: var(--color-blue);
}

.button_min {
    min-height: 30px;
    min-width: 80px;
    padding: 6px 12px;
}

.input-small {
    max-width: 64px;
    text-align: center;
}

.checkbox,
.checkbox_white,
.checkbox_green,
.checkbox_blue,
.checkbox_red,
.checkbox_unstandart {
    position: relative;
    display: inline-block;
    margin: 0;
    padding: 0;
    width: 16px;
    height: 16px;
    background-color: var(--color-white);
    border: none;
    border-radius: 0px;
    border-radius: 5px;
}

.checkbox__input {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    opacity: 0;
    z-index: 1;
}

.checkbox__input:checked + .checkbox__label::before {
    background-color: var(--color-darkgrey);
    border-color: var(--color-darkgrey);
}

.checkbox__input:checked + .checkbox__label::after {
    content: "\F012C";
    color: var(--color-white);
}

.checkbox__input:disabled {
    pointer-events: none;
}

.checkbox__input:disabled + .checkbox__label::before {
    background-color: var(--color-darkgrey);
    border-color: var(--color-darkgrey);
}

.checkbox__input:disabled + .checkbox__label::after {
    opacity: 0.6;
}

.checkbox__label {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.checkbox__label::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid var(--color-grey);
    border-radius: 4px;
    transition: background-color 0.2s;
}

.checkbox__label::after {
    content: "";
    position: absolute;
    top: calc(50% - 7px);
    left: calc(50% - 7px);
    font-family: 'Material Design Icons';
    font-size: 15px;
    line-height: 1;
    font-weight: bold;
}

.checkbox_white {
    background-color: transparent;
}

.checkbox_white .checkbox__label::before {
    border-color: var(--color-white);
}

.checkbox_white .checkbox__input:checked + .checkbox__label::before {
    background-color: transparent;
    border-color: var(--color-white);
}

.checkbox_white .checkbox__input:checked + .checkbox__label::after {
    color: var(--color-white);
}

.checkbox_white + .checkbox_text_label {
    color: var(--color-white);
}

.checkbox_green .checkbox__label::before {
    border-color: var(--color-green);
}

.checkbox_green .checkbox__input {
    border-color: var(--color-green);
}

.checkbox_green .checkbox__input:checked + .checkbox__label::before {
    border-color: var(--color-green);
    background-color: var(--color-green);
}

.checkbox_green .checkbox__input:checked + .checkbox__label::after {
    color: var(--color-white);
}

.checkbox_blue .checkbox__label::before {
    border-color: var(--color-blue);
}

.checkbox_blue .checkbox__input:checked + .checkbox__label::before {
    background-color: var(--color-blue);
    border-color: var(--color-blue);
}

.checkbox_blue .checkbox__input:checked + .checkbox__label::after {
    color: var(--color-white);
}

.checkbox_red .checkbox__label::before {
    border-color: var(--color-red);
}

.checkbox_red .checkbox__input:checked + .checkbox__label::before {
    background-color: var(--color-red);
    border-color: var(--color-red);
}

.checkbox_red .checkbox__input:checked + .checkbox__label::after {
    color: var(--color-white);
}

.checkbox_unstandart .checkbox__label::before {
    background-color: var(--color-blue) !important;
    border-color: var(--color-blue) !important;
}

.checkbox_unstandart .checkbox__label::after {
    content: "\F0374";
    color: var(--color-white);
    border-color: var(--color-blue);
}

.checkbox_unstandart .checkbox__input:checked + .checkbox__label::after {
    content: "\F012C";
    background-color: var(--color-blue);
    border-color: var(--color-blue);
}

.checkbox_text {
    display: inline-flex;
    align-items: center;
    font-size: var(--control-label-size);
}

.checkbox_text .checkbox + .checkbox_text_label,
.checkbox_text .checkbox_white + .checkbox_text_label,
.checkbox_text .checkbox_blue + .checkbox_text_label,
.checkbox_text .checkbox_red + .checkbox_text_label,
.checkbox_text .checkbox_unstandart + .checkbox_text_label {
    margin-left: 10px;
}

.checkbox_text_label {
    line-height: 11px;
}

.checkbox_text_label .annotation {
    display: block;
    margin-top: .2em;
}

.checkbox_text_label + .checkbox,
.checkbox_text_label + .checkbox_white,
.checkbox_text_label + .checkbox_blue,
.checkbox_text_label + .checkbox_red,
.checkbox_text_label + .checkbox_unstandart {
    margin-left: 10px;
}

.radio,
.radio_blue,
.radio_green,
.radio_red {
    position: relative;
    display: inline-block;
    margin: 0;
    padding: 0;
    width: 18px;
    height: 18px;
    border: none;
    vertical-align: bottom;
}

.radio__input {
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
}

.radio__label {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    border: 1px solid var(--color-darkgrey);
    border-radius: 50%;
}

.radio__label::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    background-color: var(--color-darkgrey);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s;
}

.radio__input:checked + .radio__label::before {
    opacity: 1;
}

.radio_blue .radio__label {
    border: 1px solid var(--color-blue);
}

.radio_blue .radio__label::before {
    background-color: var(--color-blue);
}

.radio_green .radio__label {
    border: 1px solid var(--color-green);
}

.radio_green .radio__label::before {
    background-color: var(--color-green);
}

.radio_red .radio__label {
    border: 1px solid var(--color-red);
}

.radio_red .radio__label::before {
    background-color: var(--color-red);
}

.radio_text {
    display: inline-block;
    font-size: 0.8125rem;
}

.radio_text_label {
    line-height: 18px;
}

.radio_text .radio + .radio_text_label,
.radio_text .radio_blue + .radio_text_label,
.radio_text .radio_green + .radio_text_label,
.radio_text .radio_red + .radio_text_label {
    margin-left: 5px;
}

.radio_text_label + .radio,
.radio_text_label + .radio_blue,
.radio_text_label + .radio_green,
.radio_text_label + .radio_red {
    margin-left: 5px;
}

.doc-block {
    display: flex;
    width: 300px;
    padding: 15px 20px;
    background-color: var(--color-white);
    border-radius: 5px;
    box-shadow: 0 0 4.92224px rgba(123, 135, 170, 0.3);
}

.doc-block__img {
    margin-right: 30px;
}

.doc-block__title {
    font-weight: bold;
}

.doc-block__subtitle {
    margin-top: 5px;
    color: var(--color-darkgrey);
}

.doc-block__info {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.doc-block .button_dark {
    min-width: auto;
    min-height: auto;
    margin-left: auto;
    margin-top: 5px;
    padding: 7px 12px;
}

.fieldset,
.fieldset_horizontal {
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    align-self: flex-end;
}

.fieldset_label,
.fieldset_horizontal_label,
.fieldset_clear,
.fieldset_annotation_label {
    display: block;
    font-size: var(--control-label-size);
    line-height: 120%;
    font-weight: bold;
}

.fieldset .fieldset_label + *:not(.annotation) {
    margin-top: .6ch;
}

.fieldset .fieldset_label + .annotation {
    margin-top: .1ch;
    margin-bottom: .6ch;
}

.fieldset-input-buttons {
    position: absolute;
    top: 25px;
    right: 3px;
    display: flex;
}

.fieldset-input-button_green,
.fieldset-input-button_blue,
.fieldset-input-button_red,
.fieldset-input-button_gray {
    padding: 9px 10px;
    border-radius: var(--control-min-border-radius);
    cursor: pointer;
}

.fieldset-input-button:not(:last-child) {
    margin-right: 2px;
}

.fieldset-input-button_green {
    background: var(--color-green);
    color: white;
}

.fieldset-input-button_blue {
    background: var(--color-blue);
    color: white;
}

.fieldset-input-button_red {
    background: var(--color-red);
    color: white;
}

.fieldset-input-button_gray {
    background: var(--color-grey);
    color: white;
}

.fieldset_horizontal {
    display: flex;
    align-items: center;
}

.fieldset_horizontal .fieldset_label {
    margin-right: 10px;
}

.fieldset-select {
    position: relative;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0px;
}

.fieldset-select__label {
    top: -0.7em;
    left: 2px;
    padding: 2px;
    background-color: var(--color-white);
}

.fieldset_clear {
    left: unset;
    right: 0;
    user-select: none;
    cursor: pointer;
}

.fieldset-select__container {
    display: flex;
    padding: 13px;
    border: 1px solid var(--color-grey);
    border-radius: 3px;
}

.fieldset-select__container > *:not(:last-child) {
    margin-right: 10px;
}

.file-list__item:not(:last-child) {
    margin-bottom: 5px;
}

.file-list__item .icon,
.file-list__item .mdi {
    margin: 0 5px;
}

.file-list__item .icon-close,
.file-list__item .mdi-close {
    vertical-align: middle;
    cursor: pointer;
    transition: color 0.3s;
}

.file-list__item .icon-close:hover,
.file-list__item .mdi-close:hover {
    color: var(--color-red);
}

.header {
    position: fixed;
    display: flex;
    align-items: center;
    width: 100%;
    height: 52px;
    background: var(--color-lightgrey);
    z-index: 99;
}

.header-info {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    margin-right: 25px;
    padding-left: 25px;
}

.header-info__avatar {
    position: relative;
    margin-right: 15px;
    padding: 3px;
    font-size: 21px;
    line-height: 1;
}

.header-info__avatar::after {
    content: "";
    position: absolute;
    top: 0px;
    left: -1px;
    width: 29px;
    height: 29px;
    border: 3px solid var(--color-green);
    border-radius: 50%;
}

.header-info__name {
    max-width: 200px;
    min-width: 120px;
    margin-right: 20px;
    color: var(--color-dark);
    overflow-x: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.header-info__btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    padding: 0;
    color: var(--color-dark);
    cursor: pointer;
    transition: color 0.3s;
}

.header-info__btn_icon {
    font-size: 22px;
}

.header-info__btn:hover {
    color: var(--color-green);
}

.header-info__menu {
    position: absolute;
    top: 50px;
    left: 10px;
    width: 100%;
    background: var(--color-white);
    border: 1px solid var(--color-blue);
    border-radius: 3px;
    box-shadow: 1px 0 5.18px rgba(123, 135, 170, 0.5);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.header-info__menu_item {
    display: block;
    padding: 10px 15px;
    line-height: 140%;
    color: var(--color-dark);
    text-decoration: none;
    transition: 0.3s;
}

.header-info__menu_item:hover {
    font-weight: 500;
    color: var(--color-white);
    background: var(--color-blue);
}

.header-controls {
    margin-left: auto;
    font-size: 20px;
    color: var(--color-darkgrey);
    display: flex;
}

.header-controls__item {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-left: 20px;
    transition: color 0.3s;
}

.header-controls__item:hover {
    color: var(--color-dark);
}

.header-controls__item_icon {
    font-size: 25px;
}

.header-controls__notice {
    position: relative;
}

.header-controls__notice::after {
    content: "";
    position: absolute;
    top: 2px;
    right: 0;
    width: 8px;
    height: 8px;
    background-color: var(--color-red);
    border-radius: 50%;
}

.header-logout {
    border: 2px;
    padding: 8px 20px;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
    font-size: 14px;
    margin-right: 10px;
    text-decoration: none;
    color: var(--color-white);
    font-weight: bold;
    position: fixed;
    right: 20px;
}

.input,
.textarea {
    height: var(--control-height);
    padding: calc((var(--control-height) - 1rem - 2px) / 2) 13px;
    font-size: var(--control-font-size);
    color: var(--color-dark);
    border: var(--control-border);
    border-radius: var(--control-border-radius);
    line-height: 1rem;
}

.input:not([readonly]):focus,
.textarea:not([readonly]):focus {
    outline: none;
    background-color: var(--color-lightgrey);
}

.input::-moz-placeholder,
.textarea::-moz-placeholder,
.input:-ms-input-placeholder,
.textarea:-ms-input-placeholder,
.input::-ms-input-placeholder,
.textarea::-ms-input-placeholder,
.input::placeholder,
.textarea::placeholder {
    color: var(--color-darkgrey);
}

.textarea {
    height: auto;
    width: 100%;
    resize: none;
}

.input-block {
    position: relative;
    display: inline-block;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
}

.input-block__input {
    width: 100%;
    padding: 15px 8px;
    color: var(--color-white);
    background-color: transparent;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid var(--color-white);
}

.login__form .input-block__input::-moz-placeholder {
    color: var(--color-white);
    opacity: 0.6;
}

.login__form .input-block__input:-ms-input-placeholder {
    color: var(--color-white);
    opacity: 0.6;
}

.login__form .input-block__input::-ms-input-placeholder {
    color: var(--color-white);
    opacity: 0.6;
}

.login__form .input-block__input::placeholder {
    color: var(--color-white);
    opacity: 0.6;
}

.input-block__input:focus {
    outline: none;
}

.input-block__label {
    display: block;
    color: var(--color-white);
    white-space: nowrap;
    transform: translate(8px, 0px);
}

.input-file,
.input-file_button {
    position: relative;
    margin: 0;
    padding: 20px;
    border: 1px dashed var(--color-grey);
    border-radius: 5px;
}

.input-file.active,
.input-file_button.active {
    border-color: var(--color-green);
}

.input-file__input,
.input-file_button__input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    opacity: 0;
}

.input-file__label,
.input-file_button__label {
    text-align: center;
}

.input-file__label .icon,
.input-file__label .mdi,
.input-file_button__label .icon,
.input-file_button__label .mdi {
    font-size: 50px;
    color: var(--color-grey);
}

.input-file__label_title,
.input-file_button__label_title {
    font-size: 1.4rem;
}

.input-file__preview,
.input-file_button__preview {
    display: inline-flex;
    border-radius: 5px;
}

.input-file__preview_default,
.input-file_button__preview_default {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: var(--color-grey);
    border-radius: 5px;
}

.input-file__preview_default::before,
.input-file_button__preview_default::before {
    content: "\F0EDB";
    position: absolute;
    font-family: 'Material Design Icons';
    font-size: 70px;
    color: var(--color-white);
}

.input-file__preview .icon,
.input-file__preview .mdi,
.input-file_button__preview .icon,
.input-file_button__preview .mdi {
    margin: auto 15px;
    font-size: 25px;
}

.input-file__preview_img,
.input-file_button__preview_img {
    width: 100%;
    height: 100%;
    max-height: 175px;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: left;
    object-position: left;
    border-radius: 5px;
}

.input-file_button {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    padding: 0;
    border: none;
    border-radius: 0;
}

.input-password {
    position: relative;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
}

.input-password.shown .input-password_icon::before {
    content: "\F0208";
}

.input-password .input {
    width: 100%;
}

.input-password_icon {
    position: absolute;
    top: calc(50% - 0.75em);
    right: 10px;
    font-size: 1.5em;
    color: var(--color-darkgrey);
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.input-password_icon:hover {
    opacity: 1;
}

.input-password_icon::before {
    content: "\F0209";
    font-family: 'Material Design Icons';
    font-style: normal;
}

.input-edit {
    position: relative;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0px;
}

.input-edit.shown .input-edit_icon:not(.input-edit_icon_cancel)::before {
    content: "\F012C";
}

.input-edit_icon {
    position: absolute;
    top: calc(50% - 0.65em);
    right: 10px;
    color: var(--color-darkgrey);
    font-style: normal;
    font-size: 1.3em;
    font-weight: bold;
    opacity: 0.6;
    cursor: pointer;
    transition: opacity 0.3s;
}

.input-edit_icon:hover {
    opacity: 1;
}

.input-edit_icon::before {
    content: "\F090C";
    font-family: 'Material Design Icons';
}

.input-edit_icon_cancel {
    display: none;
    right: 35px;
}

.input-edit_icon_cancel::before {
    content: "\e924";
}

.input-edit .input {
    width: 100%;
}

.input-edit .input.disabled {
    border-color: var(--color-white);
    border-bottom-color: var(--color-grey);
    border-radius: 0;
    pointer-events: none;
}

.input-w-buttons__label {
    display: block;
    font-size: var(--control-label-size);
    line-height: 120%;
    font-weight: bold;
}

.input-w-buttons__label + .input-w-controls__wrapper {
    margin-top: .5em;
}

.input-w-controls__wrapper {
    position: relative;
    display: flex;
    align-items: center;
    padding-right: 0;
    border: var(--control-border);
    border-radius: var(--control-border-radius);
}

.input-w-controls__wrapper .input {
    width: 100%;
    border: none;
}

.input-w-buttons {
    position: relative;
    margin: 0;
    padding: 0;
    border: none;
}

.input-w-buttons__wrapper {
    display: flex;
    align-items: center;
    height: var(--control-height);
    width: fit-content;
    margin-left: auto;
}

.input-w-buttons__input {
    width: 100%;
}

.input-w-buttons__input:focus + .input-w-buttons__wrapper {
    background-color: var(--color-lightgrey);
}

.input-w-buttons__wrapper .button,
.input-w-buttons__wrapper .button_icon,
.input-w-buttons__wrapper .button_arrow,
.input-w-buttons__wrapper .button_white,
.input-w-buttons__wrapper .button_white_bor,
.input-w-buttons__wrapper .button_black,
.input-w-buttons__wrapper .button_mediumblack,
.input-w-buttons__wrapper .button_dark,
.input-w-buttons__wrapper .button_blue,
.input-w-buttons__wrapper .button_green {
    position: relative;
    display: flex;
    place-items: center;
    margin: 4px 0;
    padding: 5px 10px;
    min-width: auto;
    height: calc(100% - 4px * 2);
}

.input-w-buttons__button_icon {
    padding: 5px 10px 5px 5px;
}

.input-w-buttons__icon {
    position: relative;
    display: inline-block;
    font-size: 15px;
    color: var(--color-black);
    cursor: pointer;
    opacity: .5;
    transition: opacity 0.3s, color 0.3s;
}

.input-w-buttons__icon:hover {
    color: var(--color-blue);
    opacity: 1;
}

.input-w-buttons__wrapper .button,
.input-w-buttons__wrapper .button_icon,
.input-w-buttons__wrapper .button_arrow,
.input-w-buttons__wrapper .button_white,
.input-w-buttons__wrapper .button_white_bor,
.input-w-buttons__wrapper .button_black,
.input-w-buttons__wrapper .button_mediumblack,
.input-w-buttons__wrapper .button_dark,
.input-w-buttons__wrapper .button_blue,
.input-w-buttons__wrapper .button_green,
.input-w-buttons__icon {
    margin-right: 4px;
}

.modal__overlay {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.41);
    z-index: 1000;
}

.modal__close {
    position: absolute;
    right: 30px;
    top: 16px;
    font-size: 19px;
    color: var(--color-kightgrey);
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
}

.modal__close:hover {
    transform: rotate(90deg);
}

.modal__container {
    position: fixed;
    top: 0;
    right: 0;
    min-width: 650px;
    max-width: 950px;
    height: 100%;
    max-height: 100vh;
    background-color: var(--color-white);
    box-shadow: 0 0 60px rgba(63, 61, 117, 0.2);
    border-radius: 5px 0 0 5px;
    z-index: 1001;
    overflow: hidden;
}

.modal__container_min {
    top: auto;
    bottom: 0;
    width: 430px;
    height: 90%;
}

.modal__header {
    position: relative;
    padding: 17px 35px;
    color: var(--color-white);
    background-color: var(--color-dark);
}

.modal__title {
    display: inline-flex;
    align-items: center;
    width: 100%;
    padding-right: 30px;
    font-size: 1.15rem;
    font-weight: bold;
}

.modal__title .icon,
.modal__title .mdi {
    margin-right: 10px;
    font-size: 20px;
}

.modal__subtitle {
    font-size: 0.786rem;
    line-height: 140%;
    font-weight: bold;
    color: var(--color-grey);
}

.modal__body {
    padding: 20px 35px;
    height: calc(100vh - 63px - 62px);
    overflow-y: auto;
}

.modal__footer {
    padding: 10px 35px 10px;
}

.modal.create .modal__header {
    background-color: var(--color-blue);
}

.modal-block__image-text {
    display: grid;
    grid-template-columns: 125px 1fr;
    grid-column-gap: 30px;
}

.modal-block__image {
    position: relative;
    width: 125px;
    height: 125px;
    padding: 6px;
}

.modal-block__image:hover .modal-block__image_edit {
    opacity: 0.4;
}

.modal-block__image::after {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    width: 100%;
    height: 100%;
    border: 2px solid var(--color-green);
    border-radius: 50%;
}

.modal-block__image img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 50%;
}

.modal-block__image_edit {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: var(--color-dark);
    border-radius: 50%;
    opacity: 0;
    z-index: 1;
    transition: opacity 0.3s;
}

.modal-block__image_edit_input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.modal-block__image_edit .icon,
.modal-block__image_edit .mdi {
    font-size: 50px;
    color: var(--color-white);
}

.modal-profile {
    position: relative;
    display: grid;
    grid-template-columns: 170px 1fr;
}

.modal-profile__left {
    grid-row: 1/span 100;
}

.modal-min {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    z-index: 1000;
}

.modal-min__container {
    position: fixed;
    max-height: 90vh;
    background-color: var(--color-white);
    box-shadow: 0 10px 23px rgba(0, 0, 0, 0.12);
    border-radius: 5px;
    /* overflow: hidden; */
    z-index: 1001;
}

.modal-min__header {
    width: 100%;
    padding: 10px 20px;
    font-size: 1.2em;
    font-weight: bold;
    text-decoration: none;
    color: var(--color-dark);
    border-bottom: 1px solid var(--color-grey);
    cursor: pointer;
}

.modal-min__close {
    top: 9px;
    right: 16px;
}

.modal-min__body {
    padding: 10px 20px;
}

.modal-min__body > * {
    margin: 10px 0;
}

.modal-min__body > *:first-child {
    margin-top: 0;
}

.modal-min__body > *:last-child {
    margin-bottom: 0;
    border-spacing: 0;
}

.modal-min__footer {
    padding: 10px 20px;
    display: flex;
    column-gap: 20px;
    justify-content: space-between;
    border-top: 1px solid var(--color-grey);
}

.modal-min___image {
}

.modal__overlay___image {
}

.modal-min__container___image {
    display: flex;
    flex-direction: column;
    /* height: fit-content; */
}

.modal-min__body___image {
    height: 100%;
    overflow-x: hidden;
}

.modal-min__body-image___image {
    display: block;
    max-height: 100%;
    max-width: 1000px;
}

.sidebar__block {

}

.sidebar__block-name__wrapper {
    border-bottom: 1px solid var(--color-lightgrey);
    position: relative;
    margin: 1em 0;
}

.sidebar__block-name__wrapper .sidebar__block-name {
    background: var(--color-lightgrey);
    color: var(--color-blue);
    font-weight: bolder;
    position: absolute;
    top: -1em;
    padding: 0.25em 0.5em;
}

.sidebar.closed .sidebar__block-name__wrapper .sidebar__block-name {
    display: none;
}

.sidebar__subnav {

}

.sidebar__subnav-item {
}

.sidebar__subnav-item:not(.main):hover {
    background-color: rgba(22, 60, 110, 0.5);
}

.sidebar__subnav-icon {
    margin-left: 5px;
    font-size: 1.8em;
    line-height: 1;
    margin-right: 20px;
}

.sidebar__item:not(.sidebar__logo) {
    display: flex;
    width: 100%;
    align-items: center;
}

.sidebar__item:not(.sidebar__logo):not(.sidebar-support__title):hover {
    opacity: 1;
}

.sidebar__subnav-item--active:not(.sidebar__logo) {
    background-color: var(--color-dark);
    border-color: inherit;
    color: var(
            --color-white);
    opacity: 1;
}

.sidebar__subnav-item--active:not(.sidebar__logo) .icon,
.sidebar__subnav-item--active:not(.sidebar__logo) .mdi {
    color: var(--color-white);
}

.sidebar__subnav-name {
    transition: opacity 0.3s;
    transition-delay: 0.2s;
}

.content-wrapper {
    min-width: 1250px;
    margin: auto;
    padding: 58px 30px 0 80px;
}

.content-title {
    color: #ffffff;
    font-size: 29px;
    line-height: 120%;
    font-weight: bold;
    margin-top: 12px;
    display: inline-block;
}

.content-title-buttons {
    display: inline-block;
    float: right;
    margin-top: -4px;
    margin-left: 15px;
}

.content-title-button {
    display: inline-block;
    cursor: pointer;
    padding: 10px 20px;
    color: #414a62;
    background: #ffffff;
    border: 2px solid #414a62;
    box-shadow: inset 0 0 8px 1px #414a62;
    border-radius: 10px;
    font-weight: 500;
    font-size: 16px;
    line-height: 19px;
}

.content-title-button:hover {
    box-shadow: 0 0 8px 0 #ffffff;
}

#notice-container {
    width: 350px;
    position: fixed;
    right: 10px;
    bottom: 10px;
    z-index: 99999999999;
}

.notice-message {
    display: flex;
    align-items: center;
    margin-top: 5px;
    padding: 1em 1em;
    border-radius: 5px;
    font-weight: bolder;
    cursor: default;
    text-align: center;
    transition: opacity 1000ms linear;
    position: relative;
}

.notice-close {
    position: absolute;
    top: 0;
    right: 0.25em;
    cursor: pointer;
}

.notice-close:hover {
    text-shadow: 0 0 4px white;
}

.notice-close:before {
    content: "✕";
    font-size: 1.4em;
}

.notice-icon {
    margin-right: 15px;
    font-size: 30px;
    font-weight: normal;
    opacity: 0.8;
}

.notice-icon::before {
    content: "";
    font-family: "Material Design Icons";
}

.notice-icon_error::before {
    content: "\F0028";
}

.notice-icon_warning::before {
    content: "\F0026";
}

.notice-icon_success::before {
    content: "\F05E0";
}

.notice-icon_info::before {
    content: "\F02FC";
}

.notice-error {
    color: #fff;
    background-color: var(--color-red);
}

.notice-warning {
    color: #fff;
    background-color: #ffb100;
}

.notice-info {
    color: #fff;
    background-color: var(--color-blue);
}

.notice-success {
    color: #fff;
    background-color: var(--color-green);
}

.options {
    cursor: pointer;
    position: relative;
}

.options__list {
    position: absolute;
    top: 17px;
    right: 0;
    font-family: 'IBMPlexSans';
    background: var(--color-white);
    border: 1px solid var(--color-blue);
    border-radius: 3px;
    box-shadow: 1px 0 5.18px rgba(123, 135, 170, 0.5);
    opacity: 0;
    visibility: hidden;
    z-index: 10;
    transition: opacity 0.2s;
}

.options__list.show {
    opacity: 1;
    visibility: visible;
}

.options__item {
    padding: 10px 15px;
    font-size: 0.8125rem;
    font-weight: normal;
    color: var(--color-dark);
    text-align: left;
    white-space: nowrap;
    transition: background-color 0.2s;
}

.options__item:hover {
    background: var(--color-blue);
    color: var(--color-white);
}

.options__item:first-child {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.options__item:last-child {
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}

.pagination {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}

.pagination__item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    font-size: 0.8725rem;
    font-weight: bold;
    background-color: var(--color-lightgrey);
    cursor: pointer;
    transition: background-color 0.3s;
}

.pagination__item:hover {
    background-color: var(--color-grey);
}

.pagination__item.active {
    color: var(--color-white);
    background-color: var(--color-blue);
    border-radius: 3px;
    cursor: default;
}

.pagination__item.prev,
.pagination__item.next {
    border-radius: 50%;
    font-size: 16px;
}

.pagination__item.prev.disabled,
.pagination__item.next.disabled,
.pagination__item.prev[disabled],
.pagination__item.next[disabled] {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}

.pagination__item.prev {
    margin-right: 15px;
}

.pagination__item.next {
    margin-left: 15px;
}

#loader {
    position: fixed;
    z-index: 9998;
    background: #fff;
    width: 100%;
    height: 100%;
}

.roller {
    display: inline-block;
    position: absolute;
    width: 64px;
    height: 64px;
    top: 50%;
    margin-top: -32px;
    left: 50%;
    margin-left: -32px;
}

.roller div {
    -webkit-animation: roller 1s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    animation: roller 1s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    transform-origin: 32px 32px;
}

.roller div:after {
    content: " ";
    display: block;
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    -webkit-animation: myanimation 6s infinite;
    animation: myanimation 6s infinite;
    margin: -3px 0 0 -3px;
}

.roller div:nth-child(1) {
    -webkit-animation-delay: -0.036s;
    animation-delay: -0.036s;
}

.roller div:nth-child(1):after {
    top: 50px;
    left: 50px;
}

.roller div:nth-child(2) {
    -webkit-animation-delay: -0.072s;
    animation-delay: -0.072s;
}

.roller div:nth-child(2):after {
    top: 54px;
    left: 45px;
}

.roller div:nth-child(3) {
    -webkit-animation-delay: -0.108s;
    animation-delay: -0.108s;
}

.roller div:nth-child(3):after {
    top: 57px;
    left: 39px;
}

.roller div:nth-child(4) {
    -webkit-animation-delay: -0.144s;
    animation-delay: -0.144s;
}

.roller div:nth-child(4):after {
    top: 58px;
    left: 32px;
}

.roller div:nth-child(5) {
    -webkit-animation-delay: -0.18s;
    animation-delay: -0.18s;
}

.roller div:nth-child(5):after {
    top: 57px;
    left: 25px;
}

.roller div:nth-child(6) {
    -webkit-animation-delay: -0.216s;
    animation-delay: -0.216s;
}

.roller div:nth-child(6):after {
    top: 54px;
    left: 19px;
}

.roller div:nth-child(7) {
    -webkit-animation-delay: -0.252s;
    animation-delay: -0.252s;
}

.roller div:nth-child(7):after {
    top: 50px;
    left: 14px;
}

.roller div:nth-child(8) {
    -webkit-animation-delay: -0.288s;
    animation-delay: -0.288s;
}

.roller div:nth-child(8):after {
    top: 45px;
    left: 10px;
}

.select,
.select_min,
.select-date {
    position: relative;
    display: inline-block;
    height: var(--control-height);
    width: 100%;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
}

.select::after,
.select_min::after,
.select-date::after {
    content: "\F0140";
    position: absolute;
    top: calc(50% - 0.5em);
    right: 5px;
    font-family: 'Material Design Icons';
    font-size: 25px;
    color: var(--color-blue);
    cursor: pointer;
    pointer-events: none;
}

.select.open .select__list,
.select_min.open .select__list,
.select-date.open .select__list {
    display: block;
}

.select.open::after,
.select_min.open::after,
.select-date.open::after {
    content: "\F0143";
}

.select.disabled,
.select_min.disabled,
.select-date.disabled {
    pointer-events: none;
}

.select.disabled .select__label,
.select_min.disabled .select__label,
.select-date.disabled .select__label {
    color: var(--color-grey);
    background-color: var(--color-lightgrey);
}

.select_min .select__label {
    min-width: auto;
}

.select__list {
    display: none;
    position: absolute;
    top: calc(100% - 3px);
    width: 100%;
    max-height: 300px;
    background-color: var(--color-white);
    border: 1px solid var(--color-grey);
    border-radius: 0 0 var(--control-border-radius) var(--control-border-radius);
    border-top-color: var(--color-lightgrey);
    overflow-y: auto;
    z-index: 2;
}

.select__list_top {
    top: auto;
    bottom: calc(12px * 2 + 1em);
    border-top-color: var(--color-grey);
    border-bottom-color: var(--color-lightgrey);
    border-radius: var(--control-border-radius) var(--control-border-radius) 0 0;
}

.select__list_item {
    padding: 10px 13px;
    font-size: 0.8125rem;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: background-color 0.3s;
}

.select__list_item:hover {
    background-color: var(--color-lightgrey);
}

.select__list_item.active {
    color: var(--color-white);
    background-color: var(--color-blue);
}

.select__list_item:not(:last-child) {
    border-bottom: 1px solid var(--color-lightgrey);
}

.select__input {
    cursor: pointer;
    opacity: 0;
}

.select__label {
    height: fit-content;
    min-width: 150px;
    padding-right: 30px;
    overflow: inherit;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
    background-color: var(--color-white);
}

.select__label_icon {
    padding-left: 35px;
}

.select__label_icon .icon,
.select__label_icon .mdi {
    position: absolute;
    top: calc(50% - 0.6em);
    left: .5em;
    font-size: 16px;
    line-height: 1;
    font-weight: bold;
    color: var(--color-blue);
}

.select_min {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    height: var(--control-min-height);
}

.select_min .input {
    max-width: 90px;
    padding: 7px 25px 7px 10px;
}

.select_min .select__list {
    top: calc(100% - 3px);
}

.select_min .select__list_top {
    top: auto;
    bottom: calc(100% - 3px);
}

.select_min .select__label_icon {
    padding-left: calc(16px * var(--control-min-coeff) + 1em);
}

.select_min .select__label_icon .icon,
.select_min .select__label_icon .mdi {
    font-size: calc(16px * var(--control-min-coeff));
}

.select-list {
    width: 100%;
    padding: 0;
    margin: 0;
    color: var(--color-dark);
    border-spacing: 0;
    border: 1px solid var(--color-grey);
    border-radius: var(--control-border-radius);
    overflow: hidden;
}

.select-list__header,
.select-list__body table {
    width: 100%;
}

.select-list__header {
    padding: 0 8px;
    font-size: var(--control-font-size);
    color: var(--color-darkgrey);
    text-align: left;
    background-color: var(--color-lightgrey);
}

.select-list__body {
    padding: 8px;
    overflow-y: auto;
    color: var(--color-mediumblack);
}

.select-list__body tr:hover {
    background-color: var(--color-lightgrey);
}

.select-list__body table {
    font-size: var(--control-font-size);
    border-collapse: collapse;
}

.select-list th {
    padding: 8px 7px;
    border-bottom: 1px solid var(--color-grey);
}

.select-list tr.selected td {
    background-color: var(--color-lightgrey);
}

.select-list td {
    padding: 10px;
}

.select-list td:first-child {
    border-radius: var(--control-border-radius) 0 0 var(--control-border-radius);
}

.select-list td:last-child {
    border-radius: 0 var(--control-border-radius) var(--control-border-radius) 0;
}

.select-date::before {
    content: "\F0E18";
    position: absolute;
    top: calc(50% - 0.5em);
    left: 12px;
    font-family: 'Material Design Icons';
    font-size: 1.4em;
    color: var(--color-blue);
}

.select-date .input {
    flex-shrink: 0;
    padding-left: 35px;
    padding-right: 25px;
    color: var(--color-darkgrey);
    opacity: 1;
}

.select-period {
    width: 100%;
    max-width: 600px;
    margin: 0;
    padding: 15px 20px;
    border: 1px solid var(--color-blue);
    border-radius: 4px;
}

.select-period__grid {
    padding-left: 20px;
    font-size: 0.78rem;
    font-weight: 500;
    text-align: center;
}

.select-period__grid_title {
    position: absolute;
}

.select-period__grid_top .select-period__grid_title {
    top: -17px;
    left: calc(50% - 0.5em);
}

.select-period__grid_top .checkbox_dark,
.select-period__grid_left .checkbox_dark {
    width: 17px;
    height: 17px;
    margin: 0;
    border: none;
}

.select-period__grid_left .select-period__grid_title {
    top: calc(50% - 0.5em);
    left: -18px;
}

.select-period__grid_cell {
    width: 17px;
    height: 17px;
    background-color: var(--color-grey);
    cursor: pointer;
}

.select-period__grid_cell.active {
    background-color: var(--color-green);
}

.select-period__grid th,
.select-period__grid td {
    position: relative;
    width: 17px;
    height: 17px;
    border: 2px solid var(--color-white);
    border-radius: 0px;
}

.select-period__additional {
    display: flex;
    justify-content: flex-end;
}

.select-period__footer {
    display: flex;
    align-items: center;
    padding: 8px;
    background-color: var(--color-lightgrey);
}

.select-period__footer_text {
    max-width: calc(100% - 200px);
    color: var(--color-darkgrey);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.select-range {
    display: flex;
    grid-gap: 10px;
    width: fit-content;
    border: var(--control-border);
    border-radius: var(--control-border-radius);
}

.select-range__legend {
    font-size: var(--control-label-size);
    font-weight: bold;
    text-transform: uppercase;
}

.select-range__group {
}

.select-range__wrapper {
    display: flex;
    align-items: center;
}

.select-range__wrapper > *:not(:first-child) {
    margin-left: 5px;
}

.select-range__label {
    display: block;
    margin-bottom: .5em;
    font-size: var(--control-label-size);
    font-weight: bold;
}

.select-range__separator::before {
    content: "—";
}

.select-multiple {
    position: relative;
}

.select-multiple .select__list {
    display: block;
}

.sidebar__subnav-item {
    display: flex;
    align-items: center;
    padding: 13px 17px 13px 12px;
    color: var(--color-lightgrey);
    font-size: 0.876rem;
    line-height: 100%;
    letter-spacing: 0.01em;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    opacity: 0.8;
    overflow: hidden;
    transition: background-color 0.2s, border-color 0.2s, opacity 0.4s;
}

.sidebar__subnav-item .icon,
.sidebar__subnav-item .mdi {
    font-size: 1.8em;
    line-height: 1;
    margin-right: 20px;
    margin-left: 5px;
}

.sidebar {
    position: fixed;
    display: flex;
    flex-direction: column;
    width: 235px;
    height: 100vh;
    background-color: var(--color-blue);
    box-shadow: 6px 14px 14px rgba(123, 135, 170, 0.24);
    transition: width 0.3s;
    z-index: 100;
}

.sidebar__control {
    position: absolute;
    top: 0;
    right: -35px;
    padding: 8px 8px;
    width: 35px;
    height: 51px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    background: var(--color-blue);
    /* mix-blend-mode: difference; */
    border: none;
    border-radius: 0 5px 5px 0;
    opacity: 1;
    cursor: pointer;
    transition: background-color 0.3s;
    border-left: 0.5px solid #7aafff;
}

.sidebar__control:hover {
    background-color: var(--color-black);
}

.sidebar__control_icon {
    transform: rotate(180deg);
    font-size: 22px;
}

.sidebar__logo {
    height: 52px;
    padding: 10px;
    background-color: var(--color-blue);
    opacity: 1;
}

.sidebar__logo_min {
    display: none;
}

.sidebar__logo img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
}

.sidebar-support {
    margin-top: auto;
    color: var(--color-white);
    background-color: var(--color-black);
    transition: transform 0.3s;
}

.sidebar-support__title {
    color: var(--color-white);
    background-color: #191818;
    opacity: 1;
}

.sidebar-support__contacts {
    list-style: none;
    margin: 0 auto;
    padding: 16px 25px;
    overflow: hidden;
    transition: 0.3s;
    transition-delay: 0.2s;
    border-top: 1px solid #e6e6e6;
}

.sidebar-support__contacts_item:not(:last-child) {
    margin-bottom: 10px;
}

.sidebar-support__contacts_link {
    display: inline-flex;
    align-items: center;
    color: var(--color-white);
    text-decoration: none;
    white-space: nowrap;
}

.sidebar-support__contacts_link .icon,
.sidebar-support__contacts_link .mdi {
    font-size: 12px;
    margin-right: 10px;
}

.sidebar-support__contacts .button_icon {
    margin-top: 15px;
    text-decoration: none;
}

.sidebar.closed {
    width: 64px;
}

.sidebar.closed .sidebar__control_icon {
    transform: rotate(0deg);
}

.sidebar.closed .sidebar__logo_full {
    display: none;
}

.sidebar.closed .sidebar__logo_min {
    display: block;
}

.sidebar.closed .sidebar-item span {
    opacity: 0;
    transition-delay: 0s;
}

.sidebar.closed .sidebar-support__contacts {
    opacity: 0;
    transition-delay: 0s;
}

.switcher {
    position: relative;
    display: inline-block;
    margin: 0;
    padding: 0;
    width: 46px;
    height: 22px;
    border: none;
    border-radius: 0;
}

.switcher__input {
    position: absolute;
    margin: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 10;
    cursor: pointer;
}

.switcher__input:checked + .switcher__label::before {
    background-color: var(--color-green);
}

.switcher__input:checked + .switcher__label::after {
    transform: translateX(24px);
}

.switcher__label {
    position: absolute;
    width: 100%;
    height: 100%;
}

.switcher__label::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-darkgrey);
    border: 1px solid transparent;
    border-radius: 15px;
    transition: background-color 0.3s;
}

.switcher__label::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background-color: var(--color-white);
    border-radius: 50%;
    transition: transform 0.3s;
}

.switcher_light .switcher__label::before {
    background-color: var(--color-white);
    border-color: var(--color-grey);
}

.switcher_light .switcher__label::after {
    background-color: var(--color-grey);
}

.switcher_light .switcher__input:checked + .switcher__label::before {
    border-color: var(--color-green);
}

.switcher_light .switcher__input:checked + .switcher__label::after {
    background-color: var(--color-white);
}

.switcher-text {
    display: flex;
    width: 100%;
}

.switcher-text__item {
    position: relative;
    flex: 1;
    margin: 0;
    padding: calc((var(--control-height) - 1rem - 2px) / 2) 13px;
    font-size: var(--control-font-size);
    line-height: 1rem;
    font-weight: 500;
    text-align: center;
    border: var(--control-border);
    border-radius: 0;
    background-color: var(--color-white);
    white-space: nowrap;
    transition: background-color 0.3s;
    cursor: pointer;
}

.switcher-text__item.active {
    color: var(--color-white);
    background-color: var(--color-green);
    border-color: var(--color-green);
    pointer-events: none;
}

.switcher-text__label {
}

.switcher-text__item:not(.active):hover {
    background-color: var(--color-lightgrey)
}

.switcher-text__item:first-child {
    border-radius: var(--control-border-radius) 0 0 var(--control-border-radius);
}

.switcher-text__item:last-child {
    border-radius: 0 var(--control-border-radius) var(--control-border-radius) 0;
}

.switcher-text__input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.tag,
.tag-control {
    display: inline-block;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 150px;
    padding: 6px 8px;
    font-size: 0.8rem;
    border: 1px solid var(--color-grey);
    border-radius: 5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: default;
}

.tag_grey,
.tag-control_grey {
    color: var(--color-darkgrey);
    border-color: var(--color-darkgrey);
    opacity: 0.7;
}

.tag_green,
.tag-control_green {
    color: var(--color-green);
    border-color: var(--color-green);
}

.tag_blue,
.tag-control_blue {
    color: var(--color-blue);
    border-color: var(--color-blue);
}

.tag-control {
    position: relative;
    padding-right: 20px;
}

.tag-control .icon,
.tag-control .mdi {
    position: absolute;
    top: calc(50% - 6px);
    right: 6px;
    font-size: 10px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s;
}

.tag-control .icon:hover,
.tag-control .mdi:hover {
    color: var(--color-red);
}

.table {
    width: 100%;
    font-size: 0.8725rem;
    color: var(--color-mediumblack);
    border-collapse: collapse;
}

.table th {
    padding: 5px 5px 10px;
}

.table tr:nth-child(even) td {
    background-color: var(--color-lightgrey);
}

.table tr.selected td {
    background-color: var(--color-grey);
}

.table td {
    height: 45px;
    padding-left: 5px;
    padding-right: 5px;
    text-align: center;
}

.table__head {
    color: var(--color-darkgrey);
    text-align: center;
    white-space: nowrap;
}

.table__photo {
    width: 40px;
    height: 40px;
    -o-object-fit: cover;
    object-fit: cover;
    vertical-align: middle;
}

.table__empty {
    color: var(--color-white);
}

.table__empty td {
    padding: 10px;
    font-weight: 500;
    text-align: center;
    background-color: var(--color-blue) !important;
}

.table-top-panel,
.table-top-panel_sticky {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    width: 100%;
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-grey);
}

.table-top-panel {
    padding-bottom: 15px;
}

.table-top-panel_sticky {
    position: sticky;
    top: 52px;
    padding-bottom: 5px;
    z-index: 1;
}

.table-bottom-panel,
.table-bottom-panel_sticky {
    display: inline-flex;
    align-items: center;
    width: 100%;
    background-color: var(--color-white);
}

.table-bottom-panel_sticky {
    position: sticky;
    bottom: 0;
}

.table-tools {
    margin: 0 0 0 auto;
}

.table-tools > * {
    margin-left: 10px;
}

.table-info {
    display: inline-flex;
    justify-content: flex-end;
    width: 100%;
    font-size: 0.825rem;
    font-style: italic;
    color: var(--color-darkgrey);
}

.table-info__item {
    margin-left: 10px;
}

.table-control__checkbox {
    width: 50px;
    padding-left: 5px;
    padding-right: 5px;
    text-align: center;
}

.table-control__tools {
    text-align: center;
    white-space: nowrap;
}

.table-control__tools > * {
    display: inline-block;
    padding: 3px 5px;
    font-size: 16px;
    line-height: 1;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s;
}

.table-control__tools > *:hover {
    color: var(--color-blue);
}

.table-control__move {
    width: 40px;
    text-align: center;
    cursor: -webkit-grab;
    cursor: grab;
}

.table-cell_color {
    width: 80px;
}

.table-cell_color_item {
    position: relative;
    width: 24px;
    height: 24px;
    margin: auto;
    border-radius: 50%;
}

.table-cell_color_item::before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    width: 30px;
    height: 30px;
    background-color: var(--color-white);
    border: 1px solid var(--color-grey);
    border-radius: 50%;
}

.table-cell_color_item::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 100%;
    height: 100%;
    background-color: inherit;
    border-radius: 50%;
}

.table-cell_pointer {
    position: relative;
    width: 20px;
    height: 20px;
    font-weight: bold;
    color: var(--color-white);
    background-color: var(--color-grey);
    border-radius: 50%;
}

.table-cell_pointer::before {
    content: "\F0374";
    position: absolute;
    top: calc(50% - 0.5em);
    left: calc(50% - 0.5em);
    font-family: 'Material Design Icons';
}

.table-cell_pointer.on {
    background-color: var(--color-green);
}

.table-cell_pointer.on::before {
    content: "\F012C";
}

.table-cell_condition {
    width: 100px;
    text-align: center;
    text-transform: uppercase;
}

.table-cell__tag {
    display: inline-block;
    width: 150px;
    padding: 6px 8px;
    font-size: 0.8rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-mediumblack);
    border: 1px solid var(--color-mediumblack);
    border-radius: 5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: default;
}

.table-simple {
    color: var(--color-mediumblack);
    border: var(--control-border);
    border-radius: 5px;
    overflow: hidden;
}

.table-simple__head {
    font-size: var(--control-font-size);
    color: var(--color-mediumblack);
    background-color: var(--color-lightgrey);
}

.table-simple__head th {
    padding: 6px 15px;
}

.table-simple_row {
    font-size: .9rem;
}

.table-simple_row td {
    padding: 5px 15px;
}

.filtration > *:not(:last-child) {
    margin-right: 11px;
}

.filtration-tags {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.filtration-tags__item {
    margin: 10px 5px 0 0;
}

.sorting-group {
    display: inline-flex;
    font-size: 0.8em;
    letter-spacing: -2px;
}

.sorting-group__item {
    cursor: pointer;
}

.sorting-group__item:hover {
    color: var(--color-blue);
}

.content-table_row {
    box-shadow: 0 3px 7px #d8dce0, 0 0 2px rgba(211, 211, 211, 0.52);
    border-radius: 12px;
}

.content-table_row > td {
    color: #0f2847;
    font-size: 15px;
    line-height: 18px;
    padding: 7px 10px;
    text-align: center;
}

.content-table_row > td[data-date] {
    color: #a1a1a1;
}

.content-table_row > td[data-phone] {
    color: var(--color-blue);
}

.content-table_row > td[data-photo] {
    padding-left: 0;
    padding-top: 0;
    padding-bottom: 0;
    width: 50px;
    height: 50px;
    position: relative;
}

.content-table_head > th {
    padding: 0 10px;
    text-align: center;
}

.content-table_head > th:first-child {
    padding-left: 30px;
}

.content-table_head > th[data-photo] {
    padding-left: 0;
}

.content-table_row > td[data-photo] img {
    top: 0;
    left: -2px;
    -o-object-fit: cover;
    object-fit: cover;
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

.content-table_row > td[data-edit] {
    border-right: none;
    display: flex;
    padding-right: 30px;
}

.content-table_row-cell-control {
    cursor: pointer;
    border: 1px;
    padding: 2px 5px;
    border-radius: 3px;
    margin-right: 5px;
    white-space: nowrap;
}

.content-table_row-cell-control:last-child {
    margin-right: 0;
}

.content-table_empty > td {
    text-align: center;
    background: #678ff7;
    padding: 10px;
    border-radius: 5px;
    color: #fff;
}

.tabs {
    display: inline-flex;
    width: 100%;
    border-bottom: 1px solid var(--color-grey);
}

.tabs_settings {
    margin-left: auto;
    align-self: center;
}

.tabs__list {
    display: inline-flex;
    list-style: none;
    margin: 0;
    padding: 0;
    font-weight: bold;
    color: var(--color-darkgrey);
}

.tabs__list_item {
    align-self: flex-end;
    border-bottom: 3px solid var(--color-grey);
    transition: 0.3s;
}

.tabs__list_item a {
    display: inline-block;
    padding: 5px 20px 15px;
    cursor: pointer;
}

.tabs__list_item:hover {
    border-color: var(--color-darkgrey);
}

.tabs__list_item.active {
    font-size: 1.2em;
    color: var(--color-dark);
    border-color: var(--color-dark);
}

.tabs__list_item.active a {
    cursor: default;
}

.tabs_buttons {
    align-self: center;
    margin-left: auto;
}

.tabs_button {
    align-self: flex-start;
    margin-left: auto;
    color: var(--color-darkgrey);
}

.video-block {
    position: relative;
    width: 240px;
    padding: 10px;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.video-block:hover {
    background-color: var(--color-grey);
}

.video-block:hover .video-block__title {
    background-color: var(--color-blue);
}

.video-block__video {
    position: relative;
}

.video-block__poster {
    width: 100%;
    height: 110px;
    -o-object-fit: cover;
    object-fit: cover;
    border: 1px solid var(--color-dark);
    border-radius: 8px;
}

.video-block__title {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    padding: 5px 10px;
    font-size: 1.1rem;
    line-height: 120%;
    color: var(--color-white);
    text-transform: uppercase;
    background-color: #000;
    border-radius: 3px;
    transition: background-color 0.3s;
}

.video-block__button-play {
    position: absolute;
    top: calc(50% - 20px);
    left: calc(50% - 20px);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    color: var(--color-blue);
    background-color: var(--color-lightgrey);
    border-radius: 50%;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s;
}

.video-block__button-play .icon,
.video-block__button-play .mdi {
    margin-left: 4px;
}

.video-block__button-play:hover {
    opacity: 1;
}

.video-list {
    position: relative;
    padding-right: 50px;
}

.video-list__button {
    position: absolute;
    top: calc(100px / 2 - 52px / 2);
    right: calc(-52px / 2);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 52px;
    height: 52px;
    font-size: 16px;
    color: var(--color-darkgrey);
    background-color: var(--color-white);
    border-radius: 50%;
    box-shadow: 0 4px 8px rgba(123, 135, 170, 0.25);
    cursor: pointer;
    transition: box-shadow 0.3s;
}

.video-list__button:hover {
    color: var(--color-blue);
    box-shadow: none;
}

.video-list__button::after {
    content: "\e915";
    font-family: 'icomoon';
}

.display-flex {
    display: flex !important;
}

.display-grid {
    display: grid !important;
}

.display-grid .input {
    width: 100%;
}

.align-self_start {
    align-self: start;
}

.align-self_center {
    align-self: center;
}

.align-self_end {
    align-self: flex-end;
}

.justify-content_start {
    justify-content: flex-start;
}

.justify-content_end {
    justify-content: flex-end;
}

.justify-content_between {
    justify-content: space-between;
}

.justify-content_around {
    justify-content: space-around;
}

.justify-content_center {
    justify-content: center;
}

.margin_auto {
    margin: auto !important;
}

.margin_0 {
    margin: 0px !important;
}

.margin_5 {
    margin: 5px !important;
}

.margin_10 {
    margin: 10px !important;
}

.margin_15 {
    margin: 15px !important;
}

.margin_20 {
    margin: 20px !important;
}

.margin_25 {
    margin: 25px !important;
}

.margin_30 {
    margin: 30px !important;
}

.margin_35 {
    margin: 35px !important;
}

.margin_40 {
    margin: 40px !important;
}

.margin_45 {
    margin: 45px !important;
}

.search__field_clean {
    position: absolute;
    top: 6px;
    right: 4px;
    cursor: pointer;
}

.search__field_clean::before {
    content: "\2715";
    font-size: 18px;
    font-style: normal;
}

.margin_50 {
    margin: 50px !important;
}

.margin-top_auto {
    margin-top: auto !important;
}

.margin-top_0 {
    margin-top: 0px !important;
}

.margin-top_5 {
    margin-top: 5px !important;
}

.margin-top_10 {
    margin-top: 10px !important;
}

.margin-top_15 {
    margin-top: 15px !important;
}

.margin-top_20 {
    margin-top: 20px !important;
}

.margin-top_25 {
    margin-top: 25px !important;
}

.margin-top_30 {
    margin-top: 30px !important;
}

.margin-top_35 {
    margin-top: 35px !important;
}

.margin-top_40 {
    margin-top: 40px !important;
}

.margin-top_45 {
    margin-top: 45px !important;
}

.margin-top_50 {
    margin-top: 50px !important;
}

.margin-bottom_auto {
    margin-bottom: auto !important;
}

.justify-content_start {
    justify-content: flex-start !important;
}

.justify-content_end {
    justify-content: flex-end !important;
}

.must-be-hide {
    display: none !important;
}

.margin-bottom_0 {
    margin-bottom: 0px !important;
}

.margin-bottom_5 {
    margin-bottom: 5px !important;
}

.margin-bottom_10 {
    margin-bottom: 10px !important;
}

.margin-bottom_15 {
    margin-bottom: 15px !important;
}

.margin-bottom_20 {
    margin-bottom: 20px !important;
}

.margin-bottom_25 {
    margin-bottom: 25px !important;
}

.margin-bottom_30 {
    margin-bottom: 30px !important;
}

.margin-bottom_35 {
    margin-bottom: 35px !important;
}

.margin-bottom_40 {
    margin-bottom: 40px !important;
}

.margin-bottom_45 {
    margin-bottom: 45px !important;
}

.margin-bottom_50 {
    margin-bottom: 50px !important;
}

.margin-right_auto {
    margin-right: auto !important;
}

.margin-right_0 {
    margin-right: 0px !important;
}

.margin-right_5 {
    margin-right: 5px !important;
}

.margin-right_10 {
    margin-right: 10px !important;
}

.margin-right_15 {
    margin-right: 15px !important;
}

.margin-right_20 {
    margin-right: 20px !important;
}

.margin-right_25 {
    margin-right: 25px !important;
}

.margin-right_30 {
    margin-right: 30px !important;
}

.margin-right_35 {
    margin-right: 35px !important;
}

.margin-right_40 {
    margin-right: 40px !important;
}

.margin-right_45 {
    margin-right: 45px !important;
}

.margin-right_50 {
    margin-right: 50px !important;
}

.margin-left_auto {
    margin-left: auto;
}

.margin-left_0 {
    margin-left: 0px !important;
}

.margin-left_5 {
    margin-left: 5px !important;
}

.margin-left_10 {
    margin-left: 10px !important;
}

.margin-left_15 {
    margin-left: 15px !important;
}

.margin-left_20 {
    margin-left: 20px !important;
}

.margin-left_25 {
    margin-left: 25px !important;
}

.margin-left_30 {
    margin-left: 30px !important;
}

.settings__logo {
    box-sizing: border-box;
    position: relative;
    height: 160px;
    width: 320px;
    text-align: center;
    padding: 15px 30px;
    border: 1px dashed rgba(58, 58, 107, 0.6);
    border-radius: 5px;
}

.settings__logo_img-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
}

.settings__logo_img {
    max-width: 100%;
    max-height: 100%;
}

.settings__logo_close {
    position: absolute !important;
    font-size: 18px;
    top: 5px;
    right: 10px;
    cursor: pointer;
    z-index: 7;
}

.settings__logo_close::before {
    content: "\2715";
    font-style: normal;
}

.settings__logo > .with_logo {
    background: rgba(255, 255, 255, 0.7);
    position: relative;
    width: calc(100% + 59px);
    -webkit-transform: translate(-29px, 0px);
    -ms-transform: translate(-29px, 0px);
    transform: translate(-29px, 0px);
    -webkit-transition: opacity 0.3s;
    -o-transition: opacity 0.3s;
    transition: opacity 0.3s;
}

.settings__logo > .with_logo.hide {
    opacity: 0;
    -webkit-transition: opacity 0.3s;
    -o-transition: opacity 0.3s;
    transition: opacity 0.3s;
}

.settings__logo_description {
    font-size: 0.93rem;
}

.settings__logo_ps {
    font-size: 0.86rem;
    line-height: 1rem;
    margin-bottom: auto;
}

.settings__logo_description,
.settings__logo_ps {
    opacity: 0.7;
}

.settings__logo_image {
    width: 100%;
}

.settings__logo_btn {
    width: 150px;
    position: relative;
    padding: 10px 16px;
    margin: 10px auto 5px;
    cursor: pointer;
    -webkit-transition: -webkit-box-shadow 0.3s;
    -o-transition: box-shadow 0.3s;
    transition: box-shadow 0.3s, -webkit-box-shadow 0.3s;
    background: #3a3a6b;
    color: #fff;
    -webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    border: none;
    border-radius: 25px;
    font-size: 1rem;
    text-align: center;
    line-height: 120%;
    letter-spacing: 0.02em;
    min-width: 100px;
}

.settings__logo input {
    opacity: 0;
    cursor: pointer;
}

.settings__logo_d-a-d {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 1px;
    cursor: pointer;
}

.login {
    background: linear-gradient(180deg, #616f92 0%, #3c455c 100%);
    height: 100vh;
    position: relative;
    display: grid;
}

.margin-left_35 {
    margin-left: 35px !important;
}

.margin-left_40 {
    margin-left: 40px !important;
}

.margin-left_45 {
    margin-left: 45px !important;
}

.margin-left_50 {
    margin-left: 50px !important;
}

.padding_0 {
    padding: 0;
}

.padding_5 {
    padding: 5px;
}

.padding_10 {
    padding: 10px;
}

.padding_15 {
    padding: 15px;
}

.padding_20 {
    padding: 20px;
}

.padding_25 {
    padding: 25px;
}

.padding_30 {
    padding: 30px;
}

.padding_35 {
    padding: 35px;
}

.padding_40 {
    padding: 40px;
}

.padding_45 {
    padding: 45px;
}

.padding_50 {
    padding: 50px;
}

.padding-top_0 {
    padding-top: 0px;
}

.padding-top_5 {
    padding-top: 5px;
}

.padding-top_10 {
    padding-top: 10px;
}

.padding-top_15 {
    padding-top: 15px;
}

.padding-top_20 {
    padding-top: 20px;
}

.padding-top_25 {
    padding-top: 25px;
}

.padding-top_30 {
    padding-top: 30px;
}

.padding-top_35 {
    padding-top: 35px;
}

.padding-top_40 {
    padding-top: 40px;
}

.padding-top_45 {
    padding-top: 45px;
}

.padding-top_50 {
    padding-top: 50px;
}

.padding-bottom_0 {
    padding-bottom: 0px;
}

.padding-bottom_5 {
    padding-bottom: 5px;
}

.padding-bottom_10 {
    padding-bottom: 10px;
}

.padding-bottom_15 {
    padding-bottom: 15px;
}

.padding-bottom_20 {
    padding-bottom: 20px;
}

.padding-bottom_25 {
    padding-bottom: 25px;
}

.padding-bottom_30 {
    padding-bottom: 30px;
}

.padding-bottom_35 {
    padding-bottom: 35px;
}

.padding-bottom_40 {
    padding-bottom: 40px;
}

.padding-bottom_45 {
    padding-bottom: 45px;
}

.padding-bottom_50 {
    padding-bottom: 50px;
}

.padding-right_0 {
    padding-right: 0px;
}

.padding-right_5 {
    padding-right: 5px;
}

.padding-right_10 {
    padding-right: 10px;
}

.padding-right_15 {
    padding-right: 15px;
}

.padding-right_20 {
    padding-right: 20px;
}

.padding-right_25 {
    padding-right: 25px;
}

.padding-right_30 {
    padding-right: 30px;
}

.padding-right_35 {
    padding-right: 35px;
}

.padding-right_40 {
    padding-right: 40px;
}

.padding-right_45 {
    padding-right: 45px;
}

.padding-right_50 {
    padding-right: 50px;
}

.padding-left_0 {
    padding-left: 0px;
}

.padding-left_5 {
    padding-left: 5px;
}

.padding-left_10 {
    padding-left: 10px;
}

.padding-left_15 {
    padding-left: 15px;
}

.padding-left_20 {
    padding-left: 20px;
}

.padding-left_25 {
    padding-left: 25px;
}

.padding-left_30 {
    padding-left: 30px;
}

.padding-left_35 {
    padding-left: 35px;
}

.padding-left_40 {
    padding-left: 40px;
}

.padding-left_45 {
    padding-left: 45px;
}

.padding-left_50 {
    padding-left: 50px;
}

.position-relative {
    position: relative;
}

.position-absolute {
    position: absolute;
}

.width-100-px {
    width: 100px;
}

.width-150-px {
    width: 150px;
}

.width-200-px {
    width: 200px;
}

.width-250-px {
    width: 250px;
}

.width-300-px {
    width: 300px;
}

.width_content {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}

.width_5 {
    width: 5% !important;
}

.width_10 {
    width: 10% !important;
}

.width_15 {
    width: 15% !important;
}

.width_20 {
    width: 20% !important;
}

.width_25 {
    width: 25% !important;
}

.width_30 {
    width: 30% !important;
}

.width_35 {
    width: 35% !important;
}

.width_40 {
    width: 40% !important;
}

.width_45 {
    width: 45% !important;
}

.width_50 {
    width: 50% !important;
}

.width_55 {
    width: 55% !important;
}

.width_60 {
    width: 60% !important;
}

.width_65 {
    width: 65% !important;
}

.width_70 {
    width: 70% !important;
}

.width_75 {
    width: 75% !important;
}

.width_80 {
    width: 80% !important;
}

.width_85 {
    width: 85% !important;
}

.width_90 {
    width: 90% !important;
}

.width_95 {
    width: 95% !important;
}

.width_100 {
    width: 100% !important;
}

* {
    box-sizing: border-box;
}

*::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

*::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-left: 7px solid var(--color-grey);
}

*::-webkit-scrollbar-thumb {
    background-color: var(--color-dark);
}

html {
    font-size: 14px;
    color: var(--color-dark);
}

body {
    margin: 0;
    padding: 0;
    font-family: 'IBMPlexSans';
}

a {
    text-decoration: none;
    color: inherit;
}

input,
select,
textarea,
button {
    font-family: inherit;
    resize: none;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.custom-scroll {
    overflow-y: auto;
    overflow-x: hidden;
}

.custom-scroll::-webkit-scrollbar {
    width: 3px;
}

.custom-scroll::-webkit-scrollbar-thumb {
    border-bottom: 3px solid var(--color-dark);
}

.custom-scroll::-webkit-scrollbar-track {
    border-bottom: 3px solid var(--color-grey);
}

.custom-scroll-x {
    overflow-x: auto;
    overflow-y: hidden;
}

.custom-scroll-x::-webkit-scrollbar {
    width: 3px;
}

.custom-scroll-x::-webkit-scrollbar-thumb {
    border-bottom: 3px solid var(--color-dark);
}

.custom-scroll-x::-webkit-scrollbar-track {
    border-bottom: 3px solid var(--color-grey);
}

.fix-photo {
    border: 1px dashed var(--color-grey);
    border-radius: 5px;
    width: 320px;
    height: 240px;
    object-fit: cover;
}

.success-icon::before {
    content: "\F012C";
    padding: 10px;
    font-size: 18px;
    color: var(--color-white);
    background-color: var(--color-green);
    border-radius: 50%;
}

.annotation {
    display: block;
    font-size: calc(var(--control-label-size) - .05em);
    font-weight: normal;
    color: var(--color-darkgrey);
}

.align-items_center {
    align-items: center;
}

.align-items_start {
    align-items: flex-start;
}

.align-items_end {
    align-items: flex-end;
}

.login {
    position: relative;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 20px;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: var(--color-blue) url("/assets/general/img/login_bg.png") no-repeat;
    background-position: 100% 65%;
    background-size: cover;
}

.login__block {
    width: 100%;
    max-width: 450px;
    grid-column: 3 / span 4;
}

.login__header {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.login__header img {
    width: 277px;
}

.login__form {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    grid-row-gap: 30px;
    margin-top: 90px;
}

.errors {
    color: var(--color-red);
    text-align: center;
}

.login__form input::selection {
    color: var(--color-blue);
    background: var(--color-white);
}

.login__form input::-moz-selection {
    color: var(--color-blue);
    background: var(--color-white);
}

.login__form button {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}

.preview {
    width: 100%;
    max-width: 900px;
}

.preview-main {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: calc(900px / 16 * 9);
    padding: 45px;
}

.preview-main__description {
    font-size: 1.07rem;
    line-height: 150%;
}

.preview-main .video-block__title {
    font-size: 2.857rem;
}

.preview-main .video-block__poster {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.preview-main .video-block__button-play {
    transform: scale(3);
}

.help-info {
    position: relative;
    display: inline-block;
    max-width: 900px;
    margin: 2px 5px;
    font-size: 0.85em;
    line-height: 140%;
    color: var(--color-darkgrey);
}

.help-info__title {
    text-align: right;
    cursor: pointer;
    transition: color 0.3s;
}

.help-info__title:hover {
    color: var(--color-blue);
}

.help-info__title:before {
    content: "\F02FC";
    margin-right: 5px;
    font-size: 14px;
    font-family: 'Material Design Icons';
    vertical-align: bottom;
}

.help-info li {
    margin: 0;
}

.help-info li:not(:last-child) {
    margin-bottom: 0.5em;
}

.search__field {
    padding: 9px 12px 9px 0;
    background: transparent;
    border: none;
    border-radius: 0px;
}

.search {
    display: flex;
    align-items: center;
    position: relative;
    align-self: flex-start;
}

.dropbox {
    margin: 2px 5px;
    position: relative;
    text-align: left;
    width: 35em;
    height: 7em;
    border: 2px;
    border-radius: 8px;
    background-color: #feffec;
    font-size: 0.85em;
    color: #7b7b7b;
    font-family: Arial, sans-serif;
}

.dropbox span {
    margin-top: 0.9em;
    display: block;
}

.content-title {
    color: #fff;
    font-size: 29px;
    line-height: 120%;
    font-weight: bold;
    margin-top: 12px;
    display: inline-block;
}

.content-title-buttons {
    display: inline-block;
    float: right;
    margin-top: -4px;
    margin-left: 15px;
}

.content-title-button {
    display: inline-block;
    cursor: pointer;
    padding: 10px 20px;
    color: #414a62;
    background: #fff;
    border: 2px;
    border-radius: solid;
    box-shadow: inset 0 0 8px 1px #414a62;
    border-radius: 10px;
    font-weight: 500;
    font-size: 16px;
    line-height: 19px;
}

.content-title-button:hover {
    box-shadow: 0 0 8px 0 #fff;
}

.content {
    padding: 0 10px 10px;
}

.catalog-fields__row_single {
    align-items: center;
    display: flex;
    padding: 12px 0;
}

.catalog-fields__column_left {
    flex-basis: 40%;
    text-align: right;
    color: #0f2847;
    font-weight: 500;
    padding-right: 15px;
    font-size: 16px;
    line-height: 135%;
    place-self: baseline;
}

.search__field_clean_from {
    position: absolute;
    top: 0;
    right: 45%;
    width: 12px;
    height: 20px;
    opacity: 0.3;
    cursor: pointer;
    transition: opacity 0.2s;
}

.search__field_clean_from:before {
    content: "\2715";
    font-size: 1.5em;
    font-style: normal;
}

.search__field_clean {
    position: absolute;
    top: 0;
    right: 5px;
    width: 12px;
    height: 20px;
    opacity: 0.3;
    cursor: pointer;
    transition: opacity 0.2s;
}

.search__field_clean:before {
    content: "\2715";
    font-size: 1.5em;
    font-style: normal;
}

.catalog-fields__column_right {
    flex-basis: 50%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #78909c;
    text-align: left;
    padding-left: 10px;
    place-self: baseline;
}

.table-photo td {
    padding: 3px 10px;
}

/**
    Common helpers
 */
.display-block {
    display: block !important;
}

.display-inline-block {
    display: inline-block !important;
}

.must-be-hide {
    display: none !important;
}

.text-left {
    text-align: left !important;
}

.text-center {
    text-align: center !important;
}

.text-right {
    text-align: right !important;
}

.text-uppercase {
    text-transform: uppercase !important;
}

.text-lowercase {
    text-transform: lowercase !important;
}

.text-capitalize {
    text-transform: initial;
}

.text-capitalize:first-letter {
    text-transform: capitalize !important;
}

.text-italic {
    font-style: italic !important;
}

.text-bold {
    font-weight: bold !important;
}

.text-underline {
    text-decoration: underline !important;
}

.text-decoration-none {
    text-decoration: non !important;
}

.size-full {
    width: 100%;
}

.size-half {
    width: 50%;
}

.settings {
    max-width: 850px;
}

.pictogram {
    width: 20px;
    height: 20px;
    position: relative;
    display: inline-block;
}

.pictogram:before {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    /* left: 0; */
}

.pictogram-info:before {
    content: "i";
    font-weight: bolder;
    border: 2px;
    border-radius: 50%;
    top: 0;
    left: 0;
}

@-webkit-keyframes myanimation {
    0% {
        background-color: #f00;
    }
    25% {
        background-color: #ff0;
    }
    50% {
        background-color: #008000;
    }
    75% {
        background-color: #a52a2a;
    }
    100% {
        background-color: #f00;
    }
}

@-webkit-keyframes roller {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.red,
.false {
    color: var(--color-red) !important;
}

.red-background,
.false-background {
    background-color: var(--color-red) !important;
}

.red-border,
.false-border {
    border-color: var(--color-red) !important;
}

.red-box-shadow__static,
.false-box-shadow__static {
    box-shadow: inset 0 0 9px rgba(225, 9, 0, 0.36);
}

.red-box-shadow:hover,
.false-box-shadow:hover {
    box-shadow: inset 0 0 9px rgba(225, 9, 0, 0.36);
}

.green,
.true {
    color: var(--color-green) !important;
}

.green-background,
.true-background {
    background-color: var(--color-green) !important;
}

.green-border,
.true-border {
    border-color: var(--color-green) !important;
}

.green-box-shadow__static,
.true-box-shadow__static {
    box-shadow: inset 0 0 9px rgba(0, 128, 0, 0.35);
}

.green-box-shadow:hover,
.true-box-shadow:hover {
    box-shadow: inset 0 0 9px rgba(0, 128, 0, 0.35);
}

.blue {
    color: var(--color-blue) !important;
}

.blue-background {
    background-color: var(--color-blue) !important;
}

.blue-border {
    border-color: var(--color-blue) !important;
}

.blue-box-shadow__static {
    box-shadow: inset 0 0 9px rgba(0, 140, 186, 0.36);
}

.blue-box-shadow:hover {
    box-shadow: inset 0 0 9px rgba(0, 140, 186, 0.36);
}

.yellow,
.null {
    color: #e69b1a !important;
}

.yellow-background,
.null-background {
    background-color: #e69b1a !important;
}

.yellow-border,
.null-border {
    border-color: #e69b1a !important;
}

.yellow-box-shadow__static,
.null-box-shadow__static {
    box-shadow: inset 0 0 9px rgba(230, 155, 26, 0.35);
}

.yellow-box-shadow:hover,
.null-box-shadow:hover {
    box-shadow: inset 0 0 9px rgba(230, 155, 26, 0.35);
}

.white {
    color: #fff !important;
}

.white-background {
    background-color: #fff !important;
}

.white-border {
    border-color: #fff !important;
}

.white-box-shadow__static {
    box-shadow: inset 0 0 9px rgba(255, 255, 255, 0.36);
}

.white-box-shadow:hover {
    box-shadow: inset 0 0 9px rgba(255, 255, 255, 0.36);
}

.black {
    color: var(--color-black) !important;
}

.black-background {
    background-color: var(--color-black) !important;
}

.black-border {
    border-color: var(--color-black) !important;
}

.black-box-shadow__static {
    box-shadow: inset 0 0 9px rgba(0, 0, 0, 0.35);
}

.black-box-shadow:hover {
    box-shadow: inset 0 0 9px rgba(0, 0, 0, 0.35);
}

.grey {
    color: var(--color-grey) !important;
}

.grey-background {
    background-color: var(--color-grey) !important;
}

.grey-border {
    border-color: var(--color-grey) !important;
}

.grey-box-shadow__static {
    box-shadow: inset 0 0 9px var(--color-grey);
}

.grey-box-shadow:hover {
    box-shadow: inset 0 0 9px var(--color-grey);
}

.element-pointer {
    cursor: pointer;
}

.element-help {
    cursor: help;
}

.element-unselected {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.element-default {
    cursor: default;
}

.element-disabled {
    pointer-events: none;
    opacity: 0.5;
}

.element-action,
.element-delete {
    transition: color 0.3s;
    cursor: pointer;
}

.element-action:hover {
    color: var(--color-blue);
}

.element-delete:hover {
    color: var(--color-red);
}

.hidden {
    display: none !important;
}

.faq {
    padding: 20px;
}

.faq__item {
    margin-bottom: 25px;
}

.faq__item_question {
    cursor: pointer;
    font-size: 20px;
    display: flex;
    align-items: flex-start;
    padding-bottom: 5px;
}

.faq__item_question .icon,
.faq__item_question .mdi {
    color: var(--color-blue);
    padding-top: 2px;
    margin-right: 10px;
}

.faq__item_answer {
    font-size: 18px;
    color: #414a62;
    padding-left: 30px;
    transition: all 0.2s ease-out;
    transform-origin: top;
}

.faq__item_answer.hide {
    font-size: 0;
    visibility: hidden;
    opacity: 0;
}

.faq__item_answer a {
    text-decoration: none;
    color: var(--color-blue);
}

@-webkit-keyframes myanimation {
    0% {
        background-color: #f00;
    }
    25% {
        background-color: #ff0;
    }
    50% {
        background-color: #008000;
    }
    75% {
        background-color: #a52a2a;
    }
    100% {
        background-color: #f00;
    }
}

@keyframes myanimation {
    0% {
        background-color: #f00;
    }
    25% {
        background-color: #ff0;
    }
    50% {
        background-color: #008000;
    }
    75% {
        background-color: #a52a2a;
    }
    100% {
        background-color: #f00;
    }
}

@-webkit-keyframes roller {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes roller {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

input[type="time"]::-webkit-inner-spin-button,
input[type="time"]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

.nowrap {
    white-space: nowrap;
}

.currency::after {
    content: "₽";
    display: inline-block;
    margin-left: 0.2em;
    font-size: 0.9em;
    margin-top: 0.2em;
}

.amount::after {
    content: "шт.";
    display: inline-block;
    margin-left: 0.2em;
    font-size: 0.9em;
    margin-top: 0.2em;
}

date {
    display: block;
}

.date-wrapper {
    cursor: default;
    border: var(--control-border);
    height: var(--control-height);
    padding: 5px;
    border-radius: var(--control-border-radius);
    align-items: center;
    display: flex;
}

.date-field {
    display: flex !important;
    border: 1px solid var(--color-lightgrey);
    padding: 2px 5px;
    border-radius: 3px;
    align-items: center;
    height: 1.5em;
}

.date-icon {
    display: inline-block;
    cursor: pointer;
}

.date-date {
    width: 23ch;
    display: inline-block !important;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 0 5px;
    font-size: var(--control-font-size);
}

.date-date__empty {
    opacity: 0.6;
}

.date-reset {
    display: inline-block;
    cursor: pointer;
}

daterange {
    display: block;
}

.daterange-wrapper {
    cursor: default;
    border: var(--control-border);
    height: var(--control-height);
    padding: 5px;
    border-radius: var(--control-border-radius);
    align-items: center;
    display: flex;
}

.daterange-icon {
    display: inline-block;
    cursor: pointer;
    top: calc(50% - 0.5em);
    left: 12px;
    font-family: 'Material Design Icons';
    color: var(--color-blue);
}

.daterange-date {
    width: 23ch;
    display: inline-block !important;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 0 5px;
    font-size: var(--control-font-size);
}

.daterange-date__empty {
    opacity: 0.6;
}

.daterange-reset {
    display: inline-block;
    top: calc(50% - 0.5em);
    left: 12px;
    font-family: 'Material Design Icons';
    color: var(--color-blue);
    cursor: pointer;
}

.daterange-chevron {
    font-size: 19px;
    color: var(--color-blue);
    cursor: pointer;
    pointer-events: none;
}

.matrix-selector {
}

.matrix-selector td {
    padding: 0;
}

.matrix-selector_title {
    text-transform: uppercase;
    font-size: .85em;
}

.matrix-selector_multiple {
}

.matrix-selector_cell {
}

.wrapper-wrapper {
    padding: 1.25em 5px 5px;
    border-radius: 5px;
    position: relative;
    border: 1px solid var(--color-grey);
}

.wrapper-label {
    position: absolute;
    background: #e8e8e8;
    border: 1px solid var(--color-grey);
    padding: 2px 10px;
    border-radius: 2px;
    top: -0.5em;
    left: -1px;
}

.wrapper-action {
    position: absolute;
    background: white;
    border: 1px solid var(--color-grey);
    padding: 2px 4px;
    border-radius: 2px;
    top: -0.5em;
    right: -1px;
    cursor: pointer;
}

.group {
    border: var(--control-border);
    border-radius: var(--control-border-radius);
}

.group__legend {
    font-size: var(--control-label-size);
    font-weight: bold;
    text-transform: uppercase;
    color: var(--color-blue);
}

.spin {
    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.column-setting__wrapper {
    position: absolute;
    display: grid;
    grid-gap: 5px;
    right: 34px;
    background: var(--color-white);
    white-space: nowrap;
    border: 1px solid var(--color-grey);
    padding: 5px 10px;
    z-index: 10;
}

.column-setting__item {
    color: var(--color-black);
    display: flex;
    justify-content: flex-end;
    font-weight: 500;
}

.column-setting__item-icon {
    margin-left: 5px;
    color: var(--color-blue);
    transition: color 0.3s;
    cursor: pointer;
}

.column-setting__item-icon:hover {
    color: var(--color-mediumblack);
}

define {
    display: none;
}

.separator {
    border: none;
    border-top: 1px solid var(--color-grey);
}

.characteristics-list {
    display: grid;
    grid-gap: 15px;
    padding: 10px;
    color: var(--color-mediumblack);
    background-color: var(--color-lightgrey);
    border-radius: 5px;
}

.characteristics-list__item {
    display: flex;
    align-items: flex-end;
}

.characteristics-list__name {
    flex-shrink: 0;
    line-height: 1;
    padding-right: 5px;
    font-size: .85rem;
    font-weight: bold;
}

.characteristics-list__value {
    flex-shrink: 0;
    line-height: 1;
    padding-left: 5px;
    font-size: .85rem;
    text-transform: uppercase;
}

.characteristics-list__separator {
    width: 100%;
    margin: 0;
    border: none;
    border-bottom: 1px dashed var(--color-grey);
}

.empty-data {
    width: 100%;
    padding: 10px 20px;
    font-weight: 500;
    color: var(--color-white);
    text-align: center;
    background-color: var(--color-red);
    border-radius: 5px;
}

.align-content_center {
    align-content: center;
}

.datetime-picker__date {
    position: relative;
}

.datetime-picker__date-input {
    width: 18ch;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 0 5px;
    font-size: var(--control-font-size);
    border: none;
    background-color: transparent;
    pointer-events: none;
}

.datetime-picker__date-picker {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1;
}

.daterange-icon.datetime-picker__icon::before {
    font-size: 1.3rem;
    line-height: 1;
}

.input__annotation {
    display: block;
    margin-top: 4px;
    font-size: var(--font-size-small);
    color: var(--color-text-additional);
    cursor: default;
}

.input__annotation_delete,
.input__annotation_action {
    text-align: right;
    margin-left: auto;
    cursor: pointer;
}

.input__annotation_delete:hover,
.input__annotation_action:hover {
    color: var(--color-primary);
}

.input__annotation_delete + .input__annotation_action,
.input__annotation_action + .input__annotation_action,
.input__annotation_delete + .input__annotation_delete,
.input__annotation_action + .input__annotation_delete {
    margin-left: 0;
}

.input__annotation_delete {
    text-align: right;
    margin-left: auto;
    cursor: pointer;
}

.input__annotation_delete:hover {
    color: var(--color-error);
}

.input__annotation_delete + .input__annotation_action,
.input__annotation_delete + .input__annotation_delete {
    margin-left: 0;
}

.input__annotation_error,
.input__annotation_info,
.input__annotation_success {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
}

.input__annotation_error .input__annotation-icon {
    color: var(--color-error);
}

.input__annotation_info .input__annotation-icon {
    color: var(--color-info);
}

.input__annotation_success .input__annotation-icon {
    color: var(--color-success);
}

.input__annotation_counter {
    white-space: nowrap;
    text-align: right;
    margin-left: auto;
}

.input__annotation-icon {
    margin-right: 4px;
    font-size: 1.1em;
    line-height: 1;
}

.input__annotation-container {
    /*position: absolute;*/
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: var(--font-size-small);
}

.file-loading {
    --loading-block-max-visible-files: 3;
    --loading-block-height: calc(var(--comp-height) * var(--loading-block-max-visible-files) * 2);
    --loading-block-file-height: calc(var(--comp-height) - (var(--comp-padding-horiz) / var(--loading-block-max-visible-files)));
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.file-loading__field {
    position: relative;
    height: 100%;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding: var(--comp-padding-horiz);
    text-align: center;
    background-color: var(--comp-bg);
    border: 2px dashed var(--color-lightgrey);
    border-radius: var(--comp-border-radius);
}

.file-loading__field:hover {
    background-color: var(--color-bg-additional);
}

.file-loading__field.dragged {
    background-color: var(--color-bg-additional);
    border-color: var(--color-primary);
}

.file-loading__icon {
    margin-bottom: calc(var(--comp-padding-horiz) / 2);
    font-size: var(--comp-icon-size);
    line-height: 1;
    color: var(--color-primary);
}

.file-loading__input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.file-loading__text {
    color: var(--color-text-title);
}

.file-loading__restriction {
    margin-top: 0.2em;
    font-size: 0.9em;
    color: var(--color-text-additional);
}

.file-loading__text,
.file-loading__restriction {
    max-width: 300px;
}

.file-loading__video {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.file-loading__video-input {
    margin-right: calc(var(--font-size) / 2);
}

.file-loading__preview {
    position: relative;
    height: 100%;
    width: 100%;
    max-height: calc(var(--comp-height) * 4);
    border: 2px solid var(--color-lightgrey);
    border-radius: var(--comp-border-radius);
}

.file-loading__preview.dragged {
    border: 2px dashed var(--color-primary);
}

.image-loading {
    min-height: calc(var(--comp-height) * 3);
}

.image-loading__preview {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: var(--comp-border-radius);
    opacity: 0;
}

.image-loading__update,
.image-loading__delete {
    padding: calc(var(--comp-padding-horiz) / 2);
    font-size: var(--comp-icon-size);
    color: var(--color-white);
    cursor: pointer;
    z-index: 2;
}

.image-loading__update:hover {
    color: var(--color-success);
}

.image-loading__delete:hover {
    color: var(--color-error);
}

.image-loading__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.file-loading__preview:hover .image-loading__preview {
    opacity: 1;
}

.table-cell_activity {

}

.table-cell_activity--on,
.table-cell_activity--off {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: var(--color-lightgrey);
    border-radius: 50%;
}

.table-cell_activity--on {
    background-color: var(--color-success);
}

.table-cell_activity--off {
    background-color: var(--color-error);
}

.grid {
    display: grid;
}

.grid-one-columns,
.grid-two-columns,
.grid-three-columns,
.grid-four-columns {
    display: grid;
}

.grid-one-columns .input,
.grid-two-columns .input,
.grid-three-columns .input,
.grid-four-columns .input {
    width: 100%;
}

.grid-one-columns {
    grid-template-columns: repeat(1, 1fr);
}

.grid-two-columns {
    grid-template-columns: repeat(2, 1fr);
}

.grid-two-columns_auto {
    grid-template-columns: repeat(2, auto);
}

.grid-three-columns {
    grid-template-columns: repeat(3, 1fr);
}

.grid-three-columns_auto {
    grid-template-columns: repeat(3, auto);
}

.grid-four-columns {
    grid-template-columns: repeat(4, 1fr);
}

.grid-four-columns_auto {
    grid-template-columns: repeat(4, auto);
}