#livability-map {
    width: 100%;
    height: 600px;
}

#livability-leaflet {
    width: 100%;
    height: 100%;
}

#livability-map aside {
    position: absolute;
    z-index: 2000; /* leaflet map has up to 1000 as a z-index, and this overlay should go on top of that */

    left: -32em;
    top: 1em;
    bottom: 1em;
    width: 30em;

    border-radius: 1em;

    padding: 1em;

    overflow-y: scroll;
    opacity: 0;
    background-color: white;
    color: black;
    pointer-events: none;

    box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.20), inset 0px 5px 15px rgba(0, 0, 0, 0.1);
    transition: opacity 0.6s linear, left 0.6s ease-out;
}

#livability-map aside.visible {
    left: 1em;
    opacity: 1;
    pointer-events: auto;
}

#livability-map aside button {
    position: absolute;
    top: 1em;
    right: 1em;
}

#livability-map .gallery {
    overflow-x: scroll;
    white-space: nowrap;
}