#chartdiv {
    width: 100%;
    height: 600px;
}

.captions{
    text-align: center; 
    color: gray; 
    font-size: smaller;
}


/* .legend 
    { list-style: none;   
        display: flex;
        flex-direction: column;
        align-self: center;
        justify-content: center;}
.legend li 
    { margin-right: 5vw; 
    text-align: center;}
.legend span 
    { border: 1px solid gray; float: left; width: 12px; height: 12px; margin: 2px;} */

.map-legend {
    display: flex;
    justify-content: center;
    align-items: center; 
}
.map-legend li{ 
    float: left; 
    margin-right: 25px; 
    list-style-type: none;
}
.color-box {
    float: left; 
    width: 13px; 
    height: 13px; 
    margin: 2px; 
}