#map {height: 550px;} 
#sidebar {
    position: absolute;
    top:10px;
    left: 10px;
    z-index: 500;
    width: 200px;
    opacity: .9;
}         
#legend {
    position: absolute;
    bottom:10px;
    right: 10px;
    z-index: 500;
    width: 300px;
    opacity: .9;
}
.popup {
    height: 550px;
}

.usa-modal--lg .usa-modal__main {
    padding-bottom: 2rem;
    padding-top: 1.25rem;
    width: 100%;
    max-width: unset;
}

.circle {
    width: 18px !important;
    height:18px !important;
    border-radius: 50%;
    box-shadow: 4px 4px 3px rgb(43, 43, 43); /* see http://www.w3schools.com/css/css3_shadows.asp */
    -moz-box-shadow: 4px 4px 3px rgb(43, 43, 43);
    -webkit-box-shadow: 4px 4px 3px rgb(43, 43, 43);
}

.red {
    background-color: red;
}

.yellow {
    background-color: #FFC000;
}

.green {
    background-color: #AAFF00;
}

.white {
    background-color: white;
}

.circle-lake, .circle-other { border: 2px solid black;}