:root {
        /*Side Nav*/
        /*Base */
        --sidenav-border: #606060;
        --sidenav-border-accent: var(--light-green);
        --sidenav-text: white;
        --sidenav-text-accent: var(--light-green);
    
            /*Default */
        --sidenav-bg: #383838;
        --sidenav-content: #282828;
    
            /*Hover */
        --sidenav-hov: #303030;
        --sidenav-content-hov: #202020;    
    
            /*Active */
        --sidenav-active: #383838;
        --sidenav-content-active: #282828;
}

.sn-container {
    border: var(--sidenav-border) solid 1.5px;
    border-top: var(--sidenav-border-accent) solid 5px;
    border-bottom: var(--sidenav-border-accent) solid 2px;
    display: flex;
    flex-direction: column;
}

.sn-item {
    --padding: 18px;
    background-color: var(--sidenav-bg);
    color: var(--sidenav-text);
    text-align: left;
    font-size: 15px;
    padding: var(--padding);
    border: none;
    border-bottom: var(--sidenav-border) solid 1.5px;
    text-decoration: none;
}

.sn-item:last-child {
    border-bottom: none;
}
  
.sn-item:hover {
    background-color: var(--sidenav-hov);
    color: var(--sidenav-text);
}

.sn-item.active,
.sn-item:active {
    background-color: var(--sidenav-active);
    color: var(--sidenav-text-accent);
}

.sn-content {
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    background-color: var(--sidenav-content);
    color: var(--sidenav-text);
}

.sn-content#open {
    display: block !important;
}

.sn-content * {
    display: block;
    font-size: 15px;
}

.sn-content .sn-item {
    background-color: var(--sidenav-content);
    color: var(--sidenav-text);
    padding-left: calc(var(--padding) + 6px);
}

.sn-content .sn-item:hover {
    background-color: var(--sidenav-content-hov);
    color: var(--sidenav-text);
}

.sn-content .sn-item.active,
.sn-content .sn-item:active {
    background-color: var(--sidenav-content-active);
    color: var(--sidenav-text-accent);
}