/* ------------- */
/* sidebar panel */
/* ------------- */

.sidebar-panel {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    min-width: 232px;
    background-color: rgb(42, 54, 71);
}

@media (max-width: 900px) {
    .sidebar-panel {
        height: 80px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
}



/* ------------ */
/* sidebar logo */
/* ------------ */

.sidebar-logo {
    height: 121.97px;
    width: 100.03px;
    margin-top: 64px;
}

@media (max-width: 900px) {
    .sidebar-logo {
        display: none;
    }
}



/* ----------- */
/* sidebar nav */
/* ----------- */

#sidebar-nav {
    display: flex;
    flex-direction: column;
    width: 100%;
}

@media (max-width: 900px) {
    #sidebar-nav {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding-left: 16px;
        padding-right: 16px;
    }
}

.sidebar-nav-member {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    padding: 8px 56px;
    font-size: 16px;
    color: rgb(205, 205, 205);
}

@media (max-width: 900px) {
    .sidebar-nav-member {
        height: 76px;
        min-width: 80px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        border-radius: 10px;
        padding: 0;

        &>.f-s-w-16px-400 {
            font-size: 14px;
        }
    }
}

.sidebar-icon {
    height: 30px;
    width: 30px;
    background-size: contain;
    background-repeat: no-repeat;
}

.sidebar-icon-summary {
    background-image: url('../assets/img/icon_summary_side.png');
}

.sidebar-icon-add_task {
    background-image: url('../assets/img/icon_add_task_side.png');
}

.sidebar-icon-board {
    background-image: url('../assets/img/icon_board_side.png');
}

.sidebar-icon-contacts {
    background-image: url('../assets/img/icon_contacs_side.png');
}

.sidebar-t-d-none {
    text-decoration: none;
}

.sidebar-t-highlighted {
    color: rgb(255, 255, 255) !important;
    background-color: rgb(10, 25, 49);
}

.sidebar-t-d-none:hover {
    cursor: pointer;
    color: rgb(255, 255, 255);
    background-color: rgb(10, 25, 49);

    .sidebar-icon-summary {
        background-image: url('../assets/img/icon_summary_side_hover.png');
    }

    .sidebar-icon-add_task {
        background-image: url('../assets/img/icons_add_task_side_hover.png');
    }

    .sidebar-icon-board {
        background-image: url('../assets/img/icon_board_side_hover.png');
    }

    .sidebar-icon-contacts {
        background-image: url('../assets/img/icon_contacts_side_hover.png');
    }
}

.sidebar-icon-summary-highlighted {
    background-image: url('../assets/img/icon_summary_side_hover.png') !important;
}

.sidebar-icon-add_task-highlighted {
    background-image: url('../assets/img/icons_add_task_side_hover.png') !important;
}

.sidebar-icon-board-highlighted {
    background-image: url('../assets/img/icon_board_side_hover.png') !important;
}

.sidebar-icon-contacts-highlighted {
    background-image: url('../assets/img/icon_contacts_side_hover.png') !important;
}

@media (max-width: 900px) {
    .sidebar-add-task_board {
        width: 100%;
        display: flex;
        flex-direction: row-reverse;
        justify-content: center;
        align-items: center;
        gap: calc((100% - 160px) / 3);
    }
}



/* -------------- */
/* sidebar footer */
/* -------------- */

.sidebar-footer {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 4px;
    width: 100%;
    margin-bottom: 64px;
}

@media (max-width: 900px) {
    .sidebar-footer {
        display: none;
    }
}