/******/
#risk-assessment-table .shading th.white-bg { background-color: #162e51 !important; }
/******/

/* Form */
/********/
form#disaster-select { line-height: 150%; }

#disaster-select-selects,
#disaster-select-btns {
    display:         flex;
    flex-wrap:       wrap;
    justify-content: space-between;
    gap:             1em;
    align-items:     baseline;
    margin-bottom:   1em;
}

#disaster-select-selects > div > label {
    display: inline-block;
    width:   53px;
}
#disaster-select-selects > div > input,
#disaster-select-selects > div > select { width: calc(100% - 58px); }

#disaster-select-selects > div:not(#year-slider-container) {
    flex: 0 1 auto;
}

#year-slider-container {
    flex: 1 0 auto;
}

@media (max-width: 991px) {
    #disaster-select-selects > div {
        width: 100%;
    }
}

@media (max-width: 767px) {
    #disaster-select-btns > .pn-buttons {
        width:      100%;
        text-align: center;
    }

    #disaster-select-btns > .update-btn { order: 0; }
    #disaster-select-btns > .cpiToggleControls { order: 1; }
    #disaster-select-btns > .pn-buttons { order: 2; }
}
/********/
/* Form */

#state-map-title {
    font-size:    24px;
    line-height:  1.3em;
    margin-right: 80px;
}

.map-container {
    width:    100%;
    margin:   0.5em auto;
    padding:  5px;
    border:   solid 1px #c6cace;
}

.map-container #noaa-logo {
    position: absolute;
    top:      13px;
    right:    13px;
}

@media (max-width: 767px) { .leaflet-control-zoom { display: none; } }
@media (max-width: 991px) { .info.values { display: none; } }

.leaflet-container:not(.ak-map):not(.hi-map) {
  background-color: rgba(0,0,0,0.0) !important;
}
.info {
    padding:       6px 8px;
    font:          16px/18px Arial, Helvetica, sans-serif;
    background:    rgba(255,255,255,0.8);
    border-radius: 8px;
    box-shadow:    0 0 15px rgba(0,0,0,0.2);
    box-shadow:
        0px 0px  2.2px rgba(0, 0, 0, 0.020),
        0px 0px  5.3px rgba(0, 0, 0, 0.028),
        0px 0px 10.0px rgba(0, 0, 0, 0.035),
        0px 0px 17.9px rgba(0, 0, 0, 0.042),
        0px 0px 33.4px rgba(0, 0, 0, 0.050),
        0px 0px 80.0px rgba(0, 0, 0, 0.070);
}
.info #info-title {
    margin:      0;
    color:       #8d9297;
    font-family: Arial, Helvetica, sans-serif;
    display:     block;
    font-weight: bold;
}

#state-map-container .leaflet-bottom.leaflet-right { width: calc(100% - 20px); }
.values { width: 100%; }

.disasterDisplayRow { display: flex; justify-content: space-between; }
.disasterDisplay { float: left; display: flex; justify-content: space-between; width: 22%; margin: 5px auto; white-space: nowrap; }

.disasterName,
.disasterValue { white-space: nowrap; }

.excluded { color: #c6cace; }
.excluded .ind { background-color: #f1f3f6; }

.legend { text-align: left; }
.legendHeader { font-weight: bold; text-align: center; margin: 0 0 0.3em 0; }
.legend .bin  { white-space: nowrap; display: flex; justify-content: space-between; }
.legend .bin-ind { margin-right: 5px; opacity: 1; }

@media (min-width: 992px) {
    .legend .bin, .disasterDisplay { font-size: 16px; }
    .legend .bin-ind { width: 25px; height: 25px; }
    .legend .upper-bound { display: inline; }

    #state-formatted-data {
        display:         flex;
        justify-content: space-between;
        font-size:       0.9em;
        line-height:     2em;
        gap:             1em;
    }

    #state-formatted-data > * {
        display:         flex;
        justify-content: flex-start;
        gap:             0.5em;
    }
}
@media (max-width: 991px) {
    .legend .bin, .disasterDisplay { font-size: 14px; }
    .legend .bin-ind { width: 20px; height: 20px; }
    .legend .upper-bound { display: none; }
}

#state-map-note,#as-of {
    line-height: 125% !important;
    font-size:   0.8em;
    padding-top: 0.5em;
    font-style:  italic;
}