#side-nav {
    --primary-color: var(--green);
    --primary-color-light: var(--green-light);
    --category-color: initial;
    --category-color-light: initial;

    position: sticky;
    top: var(--header-height);
    padding-top: 2.5rem;
    margin-bottom: 150px;
    background: #fff8;
    box-shadow: 0 0 10px 10px #fff8;
    border-radius: 1.5rem;
}

/*#region WELCOME TEXT */

#side-nav .welcome-text {
    line-height: 1.6rem;
}

    #side-nav .welcome-text > span:first-of-type {
        font-weight: 500;
        font-size: .9rem;
        color: black;
    }

    #side-nav .welcome-text > span:last-of-type {
        font-weight: 600;
        font-size: 1.3rem;
    }

/*#endregion */

/*#region NAVIGATION */

    .side-nav__navigation {
        display: grid;
        grid-template: "1fr 1fr";
        gap: .5rem;
        list-style: none;
        padding-left: 0;
        margin-bottom: 1.5rem;
    }

        .side-nav__navigation a {
            display: flex;
            align-items: center;
            border: 1px solid rgb(var(--grey-light));
            border-radius: 10rem;
            padding: .25rem .75rem;
            color: black;
        }

            .side-nav__navigation a img, .side-nav__navigation a i {
                padding-right: 2px;
            }
            
            .side-nav__navigation a:hover, .side-nav__navigation a.active {
                border-color: rgb(var(--grey-light));
                color: rgb(var(--green));
                background: rgb(var(--white));
            }
            .side-nav__navigation a:hover img .hover-green, .side-nav__navigation a.active img {
                filter: invert(49%) sepia(8%) saturate(2965%) hue-rotate(69deg) brightness(112%) contrast(100%);
            }

        .side-nav__navigation a span {
            font-size: .875rem;
        }

@media print, screen and (min-width : 576px) {
    .side-nav__navigation {
        grid-template: "1fr 1fr 1fr";
    }
}

@media print, screen and (min-width : 992px) {
    .side-nav__navigation {
        grid-template: "1fr 1fr 1fr 1fr 1fr 1fr";
    }
}

@media print, screen and (min-width : 1200px) {
    .side-nav__navigation {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        margin-bottom: 0;
    }

    .side-nav__navigation a {
        border-color: transparent;
    }
}

/*#endregion */