.sidebar-wrapper {
    display: block;
}

.sidebar {
    min-width: 25%;
    max-width: 40%;
    height: 100%;
    position: relative;
    top: 0;
    left: 0;
    /* top layer */
    z-index: 9999;
}

.overlay {
    display: none;
    position: relative;
    /* full screen */
    width: 100vw;
    height: 100%;
    /* transparent black */
    background: rgba(0, 0, 0, 0.7);
    /* middle layer, i.e. appears below the sidebar */
    z-index: 998;
    opacity: 0;
    /* animate the transition */
    transition: all 0.5s ease-in-out;
}
    /* display .overlay when it has the .active class */
    .overlay.active {
        display: block;
        opacity: 1;
    }

.sidebar-dismiss {
    /*width: 35px;
    height: 35px;
    top right corner of the sidebar */
    /*top: 10px;
    right: 10px;*/
}