.loader-overlay {
    position:            absolute;
    width:               100%;
    height:              100%;
    z-index:             9999;
    color:               #ffffff;
    background:          rgba(0,0,0,0.25);
    -webkit-text-stroke: 1px black;
    font-weight:         bold;
    padding-top:         150px;
    font-size:           32px;
    line-height:         110%;
    text-align:          center;
}
.noaa-loader {
    top:        225px !important;
    display:    block;
    text-align: center;
    background: radial-gradient(circle, #ffffff 0, #ffffff 20px, transparent 20px, transparent 100%);
}

#map-select { line-height: 2.5em; }

#map { max-width: calc(100% - 120px - 1.5em);}

#map-canvas {
    width:            100%;
    padding:          5px;
    border:           solid 1px #c6cace;
    background-color: #ffffff;
    margin:           1em auto;
}

@media (max-width: 767px) { #map-canvas { height: 500px; } }
@media (min-width: 768px) and (max-width:  991px) { #map-canvas { height: 550px; } }
@media (min-width: 992px) and (max-width: 1199px) { #map-canvas { height: 675px; } }
@media (min-width: 1200px) { #map-canvas { height: 685px; } }

.leaflet-top.leaflet-left {
    width: calc(100% - 63px);
}
#map-title {
    margin:  0 !important;
    padding: 0 !important;
}

.region-label {
    line-height: 1.1em;
}

.region-label.region {
    color: white;
    text-shadow:
         1px  1px 0 #000,
        -1px -1px 0 #000,  
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000;
}

.region-label.name {
    color: black;
    text-shadow:
         1px  1px 0 #fff,
        -1px -1px 0 #fff,  
         1px -1px 0 #fff,
        -1px  1px 0 #fff,
         1px  1px 0 #fff;
}

.region-label#great-lakes,
.region-label#souris-red-rainy {
    width: 145px;
}

#toggle-labels {
    display: none;
}

.flex-wrap { justify-content: flex-start; }
.flex-wrap > * { margin: 0 0 1em 0 !important; padding: 0 !important; }
.flex-wrap > *:not(:last-of-type) { margin-right: 1em !important; }

@media (min-width: 992px) {
    .region-label.region {
        font-size: 26px;
    }

    .region-label.name {
        font-size: 20px;
    }

    .flex-wrap > * { min-width: 20%; }
}

@media (min-width: 768px) and (max-width: 991px) {
    .region-label.region {
        font-size: 20px;
    }

    .region-label.name {
        font-size: 14px;
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    .region-label.region {
        font-size: 14px;
    }

    .region-label.name {
        font-size: 12px;
    }
}

@media (max-width: 575px) {
    #toggle-labels,
    .region-label.region,
    .region-label.name {
        display: none;
    }
}

.division-list,
.division-list li,
.region-list,
.region-list li { margin-left: 0; padding: 0; list-style: none; }

.division-list li { margin-left: 1em; text-indent: -1em; }
.cdId { display: inline-block; width: 0.6em; text-align: right; }

.region-list li { white-space: nowrap; }