:root{
    --sb-left-Space: 2.5%;
    --sb-hover-color: rgba(0, 0, 0, 0.03);
    --sb-item-padding: 5px;
    --sb-icon-padding: 5px;
}

.sidebar{
    background-color: #E6E6E6;
}

.sb-nav .sb-label a{
    color: inherit;
    text-decoration: none;
}
.sb-active > .sb-item .sb-label{
    font-weight: bold;
}
.sb-item-box{
    cursor: pointer;
}
.sb-sub-items{
    transition: max-height .5s ease-in-out, opacity .5s ease-in-out;
    position: relative;
    overflow: hidden;
}
.sb-nav .sb-closed > .sb-sub-items{
    max-height: 0;
    opacity: 0;
}
.sb-nav .sb-opened > .sb-cat .fas{
    transform: rotate(0deg);
}
.sb-nav .sb-cat .fas{
    transform: rotate(-90deg);
    transition: transform .5s ease-in-out;
    padding: 0 2px;
}
.sb-nav ul, .sb-nav li{
    margin: 0;
    padding: 0;
    list-style: none;
}
.sb-icon-post{
    vertical-align: middle;
    padding: 0 var(--sb-icon-padding);
    font-size: 0.4em;
}
.sb-icon-cat{
    vertical-align: middle;
    padding: 0 var(--sb-icon-padding);
}
.sb-nav .sb-img{
    padding: 0 var(--sb-icon-padding);
    height: 1rem;
}
.sb-nav .sb-img-div{
    min-width: calc(1rem + 2 * var(--sb-icon-padding));
}
.sb-nav .sb-item:hover{
    background-color: var(--sb-hover-color);
}
.sb-nav .sb-item{
    padding: var(--sb-item-padding);
    display: flex;
    flex-direction: row;
    vertical-align: middle;
}
.sb-nav .sb-cat{
}
.sb-nav .sb-item-level-1 .sb-item{
    padding-left: calc(var(--sb-left-Space) * 1 + var(--sb-item-padding));
}
.sb-nav .sb-item-level-2 .sb-item{
    padding-left: calc(var(--sb-left-Space) * 2 + var(--sb-item-padding));
}
.sb-nav .sb-item-level-3 .sb-item{
    padding-left: calc(var(--sb-left-Space) * 3 + var(--sb-item-padding));
}
.sb-icon, .sb-label{
    vertical-align: middle;
    padding: 0 2px;
    width: auto;
}
.sb-nav .sb-item-level-0 > .sb-cat, .sb-nav .sb-item-level-0 > .sb-cat .sb-icon-cat{
    font-weight: bold;
}