/*** ||||| ***/
/*** ASIDE ***/
/*** |||| ***/

aside {
    -webkit-touch-callout: none;
    /* iOS Safari */
    -webkit-user-select: none;
    /* Safari */
    -khtml-user-select: none;
    /* Konqueror HTML */
    -moz-user-select: none;
    /* Old versions of Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    position: fixed;
    display: grid;
    grid-template:
        "pad    body"
        /1fr 12fr
    ;
    width: 600px;
    height: 100vh;

    left: -100%;

    z-index: 2;
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    background-color: #276c8a3c;
}

.aside__container{
    position: absolute;
    top: 0;
    left: 0;

    padding-left: 50px;

    height: auto;
    max-height: 100vh;
    width: 100%;
    overflow: scroll;

    -ms-overflow-style: none;  /* IE и Edge */
    scrollbar-width: none;  /* Firefox */
}

.aside__container::-webkit-scrollbar {
    display: none;
  }

#aside-menu-btn {
    position: absolute;
    top: 5vh;
    /* margin-left: 14px; */
}

.container-wrapper {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    width: 100%;
    /* margin-left: 1vw; */
}

.aside-menu-item {
    list-style-type: none;
}

.menu__item {
    margin-top: 30px;

}

.menu__link {
    color: white;
    transition: color 0.3s ease-in-out;
}

.menu__link:hover {
    color: var(--secondary-color);
}

.menu_level_1 {
    font-size: 10pt;
    overflow: hidden;
    height: 100%;
    max-height: 0;
    margin: 0;
    margin-left: 30px;

    -webkit-transition: max-height .7s ease, margin 1.2s ease;
    transition: max-height .7s ease, margin 1.2s ease
}

.menu__open-subitem{
    display: inline-block;

    color: white;
    font-size: 22px;
    font-weight: bold;
    cursor: pointer;
    padding-left: 10px;

    transition: all 0.3s ease-in-out;
}

.menu__open-subitem:hover{
    color: var(--secondary-color);
}


aside div#pad {
    grid-area: pad;
}

#aside-darken {
    position: fixed;
    width: 100%;
    height: 100%;

    z-index: -1;
    background-color: rgba(0 0 0 / 0%);
}

aside nav {
    display: flex;
    position: relative;
    grid-area: body;
    width: 500px;
    padding: 10% 0;

    flex-direction: column;
    justify-content: space-between;
    align-items: baseline;
}

aside div#aside-menu-btn {
    cursor: pointer;
}

aside nav img {
    position: relative;



}

aside nav a {
    color: var(--primary-color);
    font-size: larger;
    text-decoration: none;
    font-weight: 900;


    padding: 0.5em 0;
    margin: 0.5em 0;
}







@media(max-width: 700px) {
    aside {
        width: 100%;

    }

    #aside-menu-btn {
        position: absolute;
        /* top: 41.4px; */
    }

    .aside-menu-item {
        padding-left: 2vw;
    }
}