.menu-overlay{

    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.45);

    opacity:0;
    visibility:hidden;

    transition:.30s;

    z-index:9998;

}

.menu-overlay.show{

    opacity:1;
    visibility:visible;

}

.side-menu{

    position:fixed;

    top:80px;
    left:-320px;
    bottom:50px;

    width:300px;
    max-width:90%;

    height:auto;

    background:#ffffff;

    overflow:hidden;

    display:flex;
    flex-direction:column;

    transition:.30s;

    box-shadow:0 0 20px rgba(0,0,0,.25);

    z-index:9999;

}

.side-menu.show{

    left:0;

}

.menu-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:18px;

    border-bottom:1px solid #e5e5e5;

}

.menu-logo{

    width:42px;
    height:42px;

}

.menu-title{

    flex:1;

    margin-left:12px;

    font-size:20px;

    font-weight:700;

}

.menu-close{

    border:none;

    background:none;

    font-size:24px;

    cursor:pointer;

}

.menu-body{

    padding:12px 0;

    flex:1;

    min-height:0;

    display:flex;

    flex-direction:column;

    overflow-y:auto;

}

.menu-body > .menu-group:last-child{

    margin-top:auto;

}

.menu-group{

    padding:0;

}

.menu-divider{

    height:1px;

    background:#ececec;

    margin:10px 0;

}

.menu-item{

    display:flex;

    align-items:center;

    padding:14px 20px;

    color:#222;

    text-decoration:none;

    font-size:15px;

    transition:.20s;

}

.menu-item:hover{

    background:#f5f5f5;

}

@media (max-width:700px){

    .side-menu{

        top:auto;
        bottom:50px;

        height:auto;

        max-height:calc(100vh - 132px);

        overflow-y:auto;

        display:flex;
        flex-direction:column;

    }

    .side-menu .menu-body{

        flex:0 0 auto;

        min-height:0;

        overflow:visible;

    }

    .side-menu .menu-body > .menu-group:last-child{

        margin-top:0;

    }

}