* {
    transition: all 0.3s ease;
}

/* Основные настройки бокового меню */
.sidebar {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    row-gap: 8px;
    align-items: normal;
    /**/
    width: 300px;
    color: var(--white);
    background: var(--gradient_Base_Style);
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    padding: 10px 10px 10px 8px;
    z-index: 99;
    user-select: none;
}

    .sidebar.close {
        width: 72px;
        align-items: center;
    }

/* Резметка смысловых блоков бокового меню  */
/* В других проектах менять позиции блоков через свойство order */
.menu_button_block {
    flex: 0 0 48;
}

.organization_block {
    flex: 0 0 80px;
}

.user_block {
    flex: 0 0 160px;
}

.section_links_block {
    flex: 1 1 auto;
}

.logout_button_block {
    flex: 0 0 48px;
}

.developer_block {
    flex: 0 1 48px;
}

/* Настройки ссылок */
.sidebar a {
    color: var(--white);
    text-decoration: none;
}

/* Стили иконок */
.sidebar .icon {
    width: 50px;
    height: 50px;
    text-align: center;
    padding: 16px 0;
    border-radius: var(--rounding_8px);
    font-size: 18px;
    background-position: center;
    background-repeat: no-repeat;
}
    .sidebar .icon.meetings {
        background-image: url('/img/lk/icon_calendar.svg');
    }
    .sidebar .icon.equeue,
    .sidebar .icon.queue {
        background-image: url('/img/lk/icon_calendar_add.svg');
    }
    .sidebar .icon.consultations {
        background-image: url('/img/lk/icon_list.svg');
    }
    .sidebar .icon.consultations-new,
    .sidebar .icon.new-consultation,
    .sidebar .icon.create-consultation {
        background-image: url('/img/lk/icon_new.svg');
    }
    .sidebar .icon.account {
        background-image: url('/img/lk/icon_manage_account.svg');
    }
    .sidebar .icon.about {
        background-image: url('/img/lk/icon_info.svg');
    }
    .sidebar .icon.polls {
        background-image: url("/img/lk/icon_document.svg");
    }


/* Переопреление размера иконоки для кнопки меню */
.menu_button_block #btn {
    font-size: 24px;
    padding: 13px 0;
}

    /* Эффект наведения на кнопку меню */
    .menu_button_block #btn:hover {
        background: var(--middle_blue);
        border-radius: var(--rounding_8px);
        cursor: pointer;
    }

/* Настройки позиционирования кнопки меню открыть/закрыть в схлопнутой версии */
.sidebar.close .menu_button_block {
    align-self: center;
}

/* Настройки позиционирования кнопки меню открыть/закрыть в раскрытой версии */
.sidebar .menu_button_block {
    align-self: flex-end;
}

/* Блок организации */
/* Показать блок в раскрытой версии меню */
.sidebar .organization_block {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

/* Размеры для контейнра с логотипом */
.organization_block .logo {
    width: 48px;
    height: auto;
}

    .organization_block .logo img {
        width: 100%;
    }

/* Стили текстового блока организации */
.organization_block .name {
    font-size: 25px;
    text-transform: uppercase;
}

    .organization_block .name span {
        color: var(--gosassitent_color_blue);
        font-weight: 500;
    }

/* Блок организации для схлопнутой версии бокового меню */
/* Скрыть текстовые поля, оставить логотип */
.sidebar.close .organization_block .name {
    display: none;
}

/* Блок пользователя */
/* Ограничение размера иконки в блоке пользователя */
.user_block .photo {
    width: 48px;
    height: 48px;
    margin: 0 auto 10px;
}

    .user_block .photo img {
        width: 100%;
    }

/* Настройки текстового поля */
.user_block .name {
    text-align: center;
    font-size: 18px;
}

/* Скрыть ФИО пользователя в схлопнутой версии бокового меню */
.sidebar.close .user_block .name {
    display: none;
}

/* Ссылки на внутренние разделы */
/* Родительский блок ссылок на разделы */
.section_links_block .link a {
    display: flex;
    column-gap: 10px;
    border-radius: var(--rounding_8px);
    align-items: center;
    text-decoration: none;
}

    /* Эффект наведения на ссылку раздела в раскрытой версии меню */
    .section_links_block .link a:hover {
        background-color: var(--middle_blue);
    }

    /* Убрать эффект "дергания" элементов в процессе раскрыти и схлопывания */
    /* Убирается за счет запрета на переносы, тем самым не образуется вторая строка */
    .section_links_block .link a .links_name {
        white-space: nowrap;
    }

    @media (max-width:300px) {
        .section_links_block .link a .links_name {
            display: flex;
            white-space: normal;
        }
    }

/* Активный, выбранный элемент(раздел) в раскрытой версии бового меню */
.section_links_block .link .active {
    background-color: var(--middle_blue);
}

/* Цвет фона ячейки с иконкой, активного элемента в схлопнутой версии меню */
.sidebar.close .section_links_block .link .active .icon {
    background-color: var(--middle_blue);
}

/* Цвет фона ячейки с иконкой, не активного элемента, в раскрытой версии */
.section_links_block .link a .icon {
    background-color: var(--middle_blue);
}

/* Цвет фона ячейки с иконкой, не активного элемента, в схлопнутой версии */
.sidebar.close .section_links_block .link a .icon {
    background-color: var(--navy_blue);
}

/* Цвет фона ячейки с иконкой, не активного элемента, в схлопнутой версии, при наведении */
.sidebar.close .section_links_block .link a:hover .icon {
    background-color: var(--middle_blue);
}

/* Текстовый блок ссылок на внутренние разделы, схлопнутая версия  */
.sidebar.close .link a .links_name {
    display: none;
}

/* Отступы для ссылок на внутренние разделы и обнуление отступов последнего элемента */
.section_links_block .link:not(:last-child) {
    margin-bottom: 8px;
    position: relative;
}

/* Индикатор сообщений */
.section_links_block .link.msg_indicator::after {
    position: absolute;
    top: 4px;
    left: 4px;
    content: "";
    width: 6px;
    height: 6px;
    background-color: #ffffff;
    border-radius: 50%;
    animation-name: blink;
    animation-timing-function: linear;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}

/* Всплывающие подсказки */
/* Настройки родительского блока для всплывающих подсказок */
.section_links_block .link,
.logout_button_block .button {
    position: relative;
}

    .section_links_block .link .tooltip,
    .logout_button_block .button .tooltip {
        position: absolute;
        top: -20px;
        left: calc(100% + 15px);
        z-index: 3;
        background: var(--white);
        color: var(--black);
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
        padding: 6px 12px;
        border-radius: 4px;
        font-size: 15px;
        font-weight: 400;
        display: none; /* скрыть изначально */
        white-space: nowrap;
    }

/* Показать при наведении(display: inline-block) */
.sidebar.close .section_links_block .link:hover .tooltip,
.sidebar.close .logout_button_block .button:hover .tooltip {
    display: inline-block;
    top: 50%;
    transform: translateY(-50%);
}

/* Скрыть при раскрытой версии бокового меню */
.section_links_block .link .tooltip,
.logout_button_block .button .tooltip {
    display: none;
}

/* Блок logout_button_block(кнопка выхода) */
/* Оцентровать элементы блока logout_button_block(кнопка выхода), иконка и текстовое поле */
.logout_button_block .button a {
    display: flex;
    justify-content: center;
    align-items: center;
    background: none;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--rounding_8px);
}

/* Скрытие текстового блока в схлопнутой версии, элемент кнопки выхода */
.sidebar.close .logout_button_block .button a .links_name {
    display: none;
}

/* Эффект наведения в схлопнутой/раскрытой версии, элемент кнопки выхода */
.sidebar.close .logout_button_block .button a:hover,
.logout_button_block .button a:hover {
    background-color: var(--middle_blue);
    border: 2px solid rgba(255, 255, 255, 0);
}

/* Блок разработчика */
/* ДЛЯ БОКОВОГО МЕНЮ И СТРАНИЦЫ АВТОРИЗАЦИИ ! */
/* Стили родительского блока ссылки на разработчика — "разработчик / логотип разработчика / Асофт" */
.sidebar .developer_block a > div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px 8px 6px;
    border-radius: var(--rounding_8px);
}

/* Ограничить размер блока с логотипом в блоке "логотип разработчика", в схлопнутой версии бокового меню*/
/* Для бокового меню и страницы авторизации */
.sidebar .developer_block a img {
    width: auto;
    height: 30px;
}
.sidebar .developer_block .short_logo {
    display: none;
}

/* Скрыть блоки текстовых полей в схлопнутой версии бокового меню */
.sidebar.close .developer_block a > div > div:first-child,
.sidebar.close .developer_block a > div > div:last-child {
    display: none;
}

/* Стили текстового поля "Асофт" */
.sidebar .developer_block a > div > div:last-child {
    text-transform: uppercase;
}

/* Эффект наведения на блок разработчика, раскрытая версия */
.sidebar .developer_block a:hover > div {
    background: var(--black_transparency_30);
}

/* Эффект наведения на блок разработчика, скрытая версия */
.sidebar.close .developer_block a:hover > div {
    background: none;
    opacity: 0.7;
}

.sidebar.close .developer_block .short_logo {
    display: block;
}

@media (max-width: 560px) {

    /* Стили меню */
    .sidebar {
        width: auto;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 40px 10px 120px;
    }

        /* Элемент подложка для кнопки меню и логотипа в схлопнутой версии */
        .sidebar::after {
            content: "";
            display: block;
            position: fixed;
            border-top: 2px solid rgba(255, 255, 255, 0.3);
            left: 0;
            right: 0;
            bottom: 0;
            height: 68px;
            background-color: var(--dark_blue);
            /*background-image: linear-gradient(180deg, #843730, #511511);*/
            z-index: 190;
        }

        /* Схлопнутая версия меню */
        .sidebar.close {
            flex-direction: row;
            width: auto;
            height: 68px;
            padding: 4px;
        }

        /* Настройки кнопки меню */
        .sidebar .menu_button_block {
            order: 5;
            align-self: flex-start;
            position: fixed;
            bottom: 10px;
            left: 10px;
            z-index: 201;
        }

        /* Настройки стилей блока организации в схлопнутой и раскытой версии */
        .sidebar .organization_block {
            order: 6;
            position: fixed;
            bottom: 12px;
            right: 20px;
            z-index: 200;
        }

        /* Отобразить скрытый блок в блоке организации */
        .sidebar.close .organization_block .name {
            display: initial; /* включить параметры по умолчнию, показать */
        }

    /* уменьшить размер шрифта и рамер контейнера для логотипа организации */
    .organization_block .name {
        font-size: 20px;
    }

    /* Ограничить размер логотипа в блоке организации, в схлопнутой и раскрытой версии */
    .sidebar.close .organization_block .logo,
    .organization_block .logo {
        width: 40px;
    }

        .organization_block .logo img {
            width: 100%;
            height: auto;
        }

    /* Скрыть блоки меню для схлопнутой версии */
    .sidebar.close .user_block,
    .sidebar.close .section_links_block,
    .sidebar.close .logout_button_block,
    .sidebar.close .developer_block {
        display: none;
    }


    /* Переопредить размеры флекс элементов в родительскои блоке */
    /* Элементы .menu_button_block и .organization_block вне потока флекс контейнера, так как их позиция фиксированная */
    .sidebar .user_block {
        flex: 0 1 auto;
    }

    .sidebar .section_links_block {
        flex: 1 1 auto;
        padding-top: 40px;
    }

    .sidebar .logout_button_block {
        flex: 0 1 auto;
    }

    .sidebar .developer_block {
        flex: 0 1 auto;
    }
}

@media (max-width: 420px) {
    /* Убрать всплывающие подсказки при разрешение экрана меньше 420px */
    .sidebar li .tooltip {
        display: none;
    }
}