.side-menu {
    height: 100%;
    width: 17em;
    position: fixed;
    z-index: 100;
    top: 0;
    left: -18em;
    background-color:var(--sub-menu-bg-color);
    color:var(--sub-menu-text-color);
    /*border-right: var(--default-border);*/
    overflow-x: hidden;
    overflow-y: auto;
    transition: 0.3s;
    box-shadow: none;

}
.side-menu.open {
    left: 0rem;
    transition: 0.2s;
    box-shadow: var(--sub-menu-shadow);
}
.side-menu-modal {
    height: 100%; /* 100% Full-height */
    width: 100%; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 99; /* Stay on top */
    top: 0;
    left: -200%;
    background-color:#000;
    opacity: 0;

}
.side-menu-modal.open {
    left:0;
    opacity: 0.5;
    transition: opacity 0.5s;
}
.side-menu-top {
    float:left;
    left:0;
    top:0;
    width:100%;
    height: calc(var(--top-menu-height) + var(--top-menu-height));
    background-color:var(--top-menu-bg-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--top-menu-text-color);
}
.side-menu-items > div {
    clear:left;
    float:left;
    width:100%;
    background-color: var(--item-bg-color);
    color: var(--main-text-color);
    height: 2em;
    border-bottom: var(--default-border);
    display: flex;
    align-items: center;
    padding: 0.7em;
}