aside {
    width: var(--sidebar-size);
    background-color: var(--white3);
    /* margin-top: var(--header-size); */
    color: var(--dark-blue);
    height: calc(100vh - var(--header-size) - var(--footer-size));;
    position: relative;
    box-sizing: border-box;
    z-index: 2;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: width 0.2s ease;
    overflow-x: hidden;
    scrollbar-width: thin
}

aside.sidebar-open {

    position: relative;
}



.menu-icon {
    margin: 0;
    /* margin-right: 10px; */
    cursor: default;
    color: var(--white);
    position: absolute;
    /* top: calc(var(--header-size)/100); */
    left: 0px;
    transform: translateY(-50%);
    transition: left 0.3s;
    display: flex;
    align-items: center;
    user-select: none;
    z-index: 4;
    text-align: center;
    border: 3px solid var(--white3);
    border-radius: 50%;
    margin-left: 8px;
    top: calc(var(--header-size));
}

.overlay.overlay-active ~ .menu-icon {
    display: none;
}

.menu-icon i {
    cursor: pointer;
    color: var(--white3);
}

aside.sidebar-open #menu-toggle {
    background-color: var(--dark-blue);
}

#menu-toggle {
    padding: 10px;
    width: 15px;
    height: 15px;
    /* margin: 17px;
    margin-right: 13px; */
    border-radius: 50%;
    background-color: var(--dark-blue);
}


#menu-toggle:hover, #menu-toggle:active, #menu-toggle:focus, #menu-toggle:target, .sidebar-title:hover, aside.sidebar-open #menu-toggle:hover {
    background-color: var(--dark-blue2);
}



aside ul {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: calc(var(--header-size)/2);
}

aside ul a {
    text-decoration: none;
    color: var(--dark-blue);
    width: 100%;
    display: flex;
    align-items: center;
    padding: 10px 0;
    position: relative;
    transition: background-color 0.2s;
}

aside ul a:hover {
    background-color: var(--dark-blue);
    color: var(--white);
}

aside ul a.active, aside ul a.active i {
    background-color: var(--dark-blue);
    color: var(--white);
}

aside ul a li {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    position: relative;
    /* padding: 1vh 0; */
}

aside ul a i {
    font-size: 20px;
    /* color: var(--dark-blue); */
    margin-right: auto;
    margin-left: 16px;
    width: 25px;
    text-align: center;
}

.sidebar-divider {
    width: 80%;
    margin: 20px auto;
    color: var(--gray);
    border-top: 0px solid var(--light-gray);
}

@keyframes swing-once {
    0% {
        transform: rotate(0deg);
    }
    20% {
        transform: rotate(15deg);
    }
    40% {
        transform: rotate(-10deg);
    }
    60% {
        transform: rotate(5deg);
    }
    80%, 100% {
        transform: rotate(0deg);
    }
}

aside ul a:hover i {
    animation: swing-once 0.6s ease forwards;
}

aside ul a li h6 {
    display: none;
    margin-left: 10px;
    white-space: nowrap;
    padding: 0;
}

aside.sidebar-open ul a li h6 {
    display: inline-block;
    position: absolute;
    left: 55px;
}


@media (max-width: 1023px) {
    
}