.sideBarWrapper {
    --sb-width: 5rem;
}


.sideBarWrapper.sb-expanded {
    --sb-width: 20rem;
}

    .sideBarWrapper.sb-expanded a span {
        width: 200px;
    }

aside {
    position: fixed;
    /* top: 0;
          left: 0;
          bottom: 0; */
    inset: 0 auto 0 0;
    padding: 1rem;
    /* width: 80px; */
    width: var(--sb-width);
    /*background-image: linear-gradient(#90c3fd, #ba71ff, #ff71b8);*/
    /*transition: width 0.5s ease-in-out;*/
}

.sidenav {
    height: 100%;
    /* border: 1px solid #000; */
}

/*    nav ul {
        list-style: none;
        height: 100%;
        display: flex;
        flex-flow: column;
        gap: 0.25rem;
    }

    nav li:last-child {
        margin-top: auto;
    }*/

    .sidenav a {
        display: flex;
        align-items: center;
        gap: 0.625rem;
        padding: 0.625rem 0.875rem;
        font-size: 1.25rem;
        line-height: 1;
        color: #fff;
        text-decoration: none;
        border-radius: 0.375rem;
        /*transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;*/
    }

        .sidenav a.active,
        .sidenav a:hover,
        .sidenav a:focus-visible {
            outline: none;
            box-shadow: inset 0 0 0 1px var(--primLightBlue);
        }

        .sidenav a span {
            font-size: 0.875rem;
            opacity: 0;
            display: none;
            /*transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;*/
        }

.sb-expanded .sidenav a span {
    opacity: 1;
    display: block;
}

.sb-expanded aside .bx-chevrons-right {
    rotate: 180deg;
}

main {
    /*margin-left: 5rem;*/
    padding: 1rem 2rem;
    /*transition: margin-left 0.5s ease-in-out;*/
}

/*@media (min-width: 768px) {
    main {
        margin-left: var(--sb-width);
    }
}*/

.placeholder {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.625rem;
    min-height: 600px;
}

    .placeholder > div {
        background-color: rgb(238, 238, 252);
        border-radius: 0.375rem;
    }

.pinned > i {
    color: var(--primBlue) !important;
    rotate: 0deg !important;
}


.sb-expanded .sidenav i.fa-chevron-right {
    display: none;
}

:not(.sb-expanded) .sidenav i.fa-thumb-tack {
    display: none;
}

.sb-expanded .sidenav i.fa-thumb-tack {
    display: block;
}