.sidebar {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
    height: 100vh;
    width: 250px;
    display: flex;
    flex-direction: column;
    transition: width 0.3s;
}

    .sidebar.hidden {
        display: none;
    }

    .sidebar .title {
        margin: 8px 4px 0 4px;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        display: flex;
    }

        .sidebar .title button {
            height: 35px;
            width: 35px;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }

    .sidebar:not(.collapsed) .title button {
        display: none;
    }

    .sidebar.collapsed {
        width: 74px;
    }

        .sidebar.collapsed .title {
            justify-content: center;
        }

            .sidebar.collapsed .title img {
                display: none;
            }

            .sidebar.collapsed .title button {
                display: flex;
            }

    /*.sidebar .title .button {
        display: flex;
        border-radius: 20px;
    }*/

    .sidebar .title .button:hover {
        background-color: rgb(5, 39, 80);
    }

    .sidebar .user {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .sidebar.collapsed .user > div {
        display: none !important;
    }

    .sidebar.collapsed .nav-label {
        display: none;
    }

.nav-item {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
    overflow: hidden;
}

    .nav-item .nav-label {
        font-size: 18px;
        text-wrap: nowrap;
    }

    .nav-item .nav-icon {
        height: 48px;
        width: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    .nav-item:first-of-type {
        padding-top: 1rem;
    }

    .nav-item:last-of-type {
        padding-bottom: 1rem;
    }

    .nav-item ::deep a {
        color: #d7d7d7;
        border-radius: 4px;
        height: 48px;
        align-items: center;
    }

        .nav-item ::deep a.active {
            background-color: rgba(255,255,255,0.37);
            color: white;
        }

        .nav-item ::deep a:hover {
            background-color: rgba(255,255,255,0.1);
            color: white;
        }