/* Style legend box and text within */
.map-overlay {
    position: absolute;
    bottom: 0;
    right: 0;
    background: #fff;
    margin-right: 20px;
    font-family: Arial, sans-serif;
    overflow: auto;
    border-radius: 3px;
    z-index: 9999;
}

.map-container {
    position: fixed;
    top: 56px;    /* after inspecting console to find height of navbar to prevent overflow */
    /* left, right and bottom are set to 0 so position is fixed to the viewport */
    left: 0;
    right: 0;
    bottom: 0;
}

#legend {
    padding: 10px;
    box-shadow: 0 1px 2px rgb(0 0 0 / 10%);
    line-height: 18px;
    margin-bottom: 40px;
    /* height and width adjust to  size of content */
    height: auto; 
    width: auto;
}

/* Position content inside legend */
.legend-key {
    display: inline-block;
    border-radius: 20%;
    width: 10px;
    height: 10px;
    margin-right: 5px;
}