.info-button { position: relative; }
.info-button .fa-info-circle { position: absolute; top: 0; left: 5px; font-size: 0.85em; }

form#disaster-select { line-height: 150%; }
#disaster-select-selects { flex-wrap: wrap; justify-content: space-evenly; align-items: baseline; }
#disaster-select-selects > div { flex: 0 1 auto; text-align: center; margin: 0.5rem auto; display: flex; justify-content: space-between; align-items: baseline; }
#disaster-select-selects > div > * { flex: 0 1 auto; }
#disaster-select-selects > div > label { margin-right: 5px; }

@media (min-width: 576px) and (max-width:  767px) {
  #disaster-select-selects > div > label { width: 95px; text-align: left; }
  #disaster-select-selects > div > select { width: 361px; }
  .update-btn { text-align: right; }
  .cpiToggleControls { text-align: center; }
}
@media (min-width: 768px) and (max-width:  991px) {
  #disaster-select-selects > div > label { width: 95px; text-align: left; }
  #disaster-select-selects > div > select { width: 175px; }
  .update-btn { text-align: center; }
  .cpiToggleControls { text-align: right; }
}
@media (min-width: 992px) and (max-width: 1199px) {
  #disaster-select-selects > div > label { width: 95px; text-align: left; }
  #disaster-select-selects > div > select { width: 265px; }
  .update-btn { text-align: center; }
  .cpiToggleControls { text-align: right; }
}
@media (min-width: 1200px) {
  #disaster-select-selects > div > select { max-width: 140px; }
  .update-btn { text-align: center; }
  .cpiToggleControls { text-align: right; }
}

#disaster-select-btns { flex-wrap: wrap; }

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

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

.conus-map {
  width:            100%;
  background-color: #ffffff !important;
}

.ak-map {
  position:         absolute;
  bottom:           130px;
  left:             15px;
  width:            20%;
  height:           0;
  padding-top:      20%;
  z-index:          1001;
  background-color: #ffffff !important;
}

.hi-map {
  position:         absolute;
  left:             21%;
  width:            18%;
  height:           0;
  padding-top:      12%;
  z-index:          1001;
  background-color: #ffffff !important;
}

#hi-state-map { bottom: 170px; }

.pr-map {
  position:         absolute;
  bottom:           130px;
  left:             53%;
  width:            10%;
  height:           0;
  padding-top:      12%;
  z-index:          1001;
  background-color: #ffffff !important;
}

.vi-map {
  position:         absolute;
  bottom:           155px;
  left:             78%;
  width:            8%;
  height:           0;
  padding-top:      5%;
  z-index:          1001;
  background-color: #ffffff !important;
}

#map-container {
  width:    1110px;
  margin:   0.5em auto;
  padding:  5px;
  border:   solid 1px #c6cace;
  position: relative;
}

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

.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);
  box-shadow:    0 0 15px rgba(0,0,0,0.2);
  border-radius: 8px;
}
.info h4 {
  margin:      0;
  color:       #8d9297;
  font-family: Arial, Helvetica, sans-serif;
  display:     block;
  font-weight: bold;
}

@media (max-width: 767px) { .conus-map { height: 695px; } .info h4 { font-size: 16px !important; } }
@media (min-width: 768px) and (max-width:  991px) { .conus-map { height: 700px; } .info h4 { font-size: 18px !important; } }
@media (min-width: 992px) and (max-width: 1199px) { .conus-map { height: 775px; } .info h4 { font-size: 22px !important; } }
@media (min-width: 1200px) { .conus-map { height: 785px; } .info h4 { font-size: 26px !important; } }

#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; }
}
@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;
}

.caption { margin: 1em 0; }

#state-formatted-data { display: flex; justify-content: flex-start; font-size: 0.9em; line-height: 2em; margin: 1em auto; }

#state-formatted-data div { margin-right: 1em; }

/* County Mapping *
 ******************/
#map-selection { display: flex; justify-content: flex-start; align-items: center; margin: 1em auto; }
#slide-opacity { cursor: grab; margin: auto 5px; width: 100px; }
#slide-opacity:active { cursor: grabbing; }
/* turn off range value display in IE/Edge */
#slide-opacity::-ms-tooltip { display: none; }

.leaflet-top.leaflet-left { width: calc(100% - 80px); }
.county-map-title-container { width: 100%; }
#county-map-title {
  position: relative;
  width:    100%;
  height:   50px;
}
#county-map1-title,
#county-map2-title {
  font-size:    24px;
  line-height:  1.3em;
  position:     absolute;
  width:        100%;
  height:       100%;
  margin-top:   0 !important;
}
#county-map1-title { opacity: 1; }
#county-map2-title { opacity: 0; }

.county-map-legend-title { font-size: 16px; }

#ak-county-map { left: 5px !important; }
#hi-county-map { bottom: 130px; }
#ak-county-map,
#hi-county-map {
  border: #c6cace solid 1px;
}

#county-info { width: 100%; display: flex; }
#county-info > * { white-space: nowrap; }
.county-info-variables { flex-basis: 10%; }
.county-info-column { flex-basis: 30%; }
#county-info > * > *:not(h4) { margin-bottom: 10px; }
#county-info > *:not(:last-of-type) { margin-right: 1%; }
.county-info-variables { flex-grow: 0; }
.county-info-bar .progress { background-color: #c6cace !important; }
.county-info-bar .progress .future-damages-value { display: inline-block; width: 100%; margin: auto 1em; }
.county-info-bar .progress .lo-val { margin-left: 5px; }
.county-info-bar .progress,
.county-info-bar .progress .progress-bar { border-radius: 0 !important; }
.county-info-bar .progress .progress-bar.bordered-progress-bar { border: solid 1px #1c1d1f; }
.county-info-bar .progress .progress-bar .hi-val { text-shadow: 1px 1px #000; }

#county-map-container .leaflet-bottom.leaflet-right { width: 23%; }
.bottom-right { width: 100%; }

#county-map-container .leaflet-bottom.leaflet-left { width: calc(100% - 20px); }

#reset-zoom-div { text-align: right; }

#county-map-legend {
  position:      relative;
  width:         100%;
  height:        50px;
  margin-bottom: 130px;
}

#county-map1-legend,
#county-map2-legend {position: absolute; width: 100%; height: 100%; }
#county-map1-legend { opacity: 1; }
#county-map2-legend { opacity: 0; }

.county-map-key { width: 100%; height: 15px; }
.county-map-values { display: flex; justify-content: space-between; width: 100%; height: 15px; }

.future-damages-values { width: calc(100% + 1em); margin-left: -0.5em; }
.future-damages-values > * { flex: 0 1 0px; text-align: center; }

.sovi-key {
  background: linear-gradient(90deg,
    rgb(250, 255, 245)   0%,
    rgb(199, 232, 192)  20%,
    rgb(129, 237,  14)  40%,
    rgb(102, 186,  11)  60%,
    rgb( 60, 110,   7)  80%,
    rgb( 76,  90,  55) 100%
  );
}

.agricultural-damage-key {
  background: linear-gradient(90deg,
    rgb( 24, 150,  69)  11.11%,
    rgb(108, 188,  87)  22.22%,
    rgb(177, 216, 120)  33.33%,
    rgb(227, 236, 172)  44.44%,
    rgb(231, 228, 114)  55.55%,
    rgb(245, 140,  78)  66.66%,
    rgb(236, 108,  66)  77.77%,
    rgb(215,  32,  43)  88.88%,
    rgb(155,  31,  27) 100.00%
  );
}

.mortality-key {
  background: linear-gradient(90deg,
    /**/
    rgb( 10, 111, 184)  14.29%,
    rgb( 93, 171, 204)  28.57%,
    rgb(183, 213, 235)  42.86%,
    rgb(211, 211, 211)  42.87%,
    rgb(239, 190, 170)  57.14%,
    rgb(236, 114,  93)  71.43%,
    rgb(231,  52,  56)  85.71%,
    rgb(175,  30,  32) 100.00%
  );
}

.energy-expenditures-key{
  background: linear-gradient(90deg,
    /**/
    rgb( 37, 123, 185)  16.67%,
    rgb(147, 197, 220)  33.33%,
    rgb(219, 236, 204)  50.00%,
    rgb(253, 218, 150)  66.67%,
    rgb(249, 142,  81)  83.33%,
    rgb(215,  33,  36) 100.00%
  );
}

.labor-high-risk-key {
  background: linear-gradient(90deg,
    rgb(255, 248, 240)  14.29%,
    rgb(255, 221, 193)  28.57%,
    rgb(251, 189, 128)  42.86%,
    rgb(247, 144,  70)  57.14%,
    rgb(236, 102,  35)  71.43%,
    rgb(198,  65,  41)  85.71%,
    rgb(127,  40,  25) 100.00%
  );
}

.coastal-damage-key {
  background: linear-gradient(90deg,
    rgb(255, 255, 255)   0.01%,
    rgb(254, 202, 186)  33.33%,
    rgb(240, 144, 121)  50.00%,
    rgb(237,  82,  52)  66.67%,
    rgb(192,  34,  40)  83.33%,
    rgb(107,   6,  19) 100.00%
  );
}

.total-damages-key {
  background: linear-gradient(90deg,
    /**/
    rgb( 15, 116,  55)  11.11%,
    rgb( 39, 176,  75)  22.22%,
    rgb(137, 200,  99)  33.33%,
    rgb(239, 203, 150)  44.44%,
    rgb(243, 164,  96)  55.56%,
    rgb(245, 132,  67)  66.67%,
    rgb(241,  37,  45)  77.78%,
    rgb(192,  31,  41)  88.89%,
    rgb(128,  21,  27) 100.00%
  );
}
/*
.leaflet-tooltip.mapTooltip { z-index: 1001; }
.leaflet-tooltip.mapTooltip .mouseover-station-title { font-weight: bold; white-space: normal; font-size: 1.1em; }
.leaflet-tooltip.mapTooltip > * { display: flex; justify-content: space-between; }
.leaflet-tooltip.mapTooltip > * > *:first-of-type { font-weight: bold; margin-right: 5px; }
*/
/******************
 * County Mapping */