sup { font-size: 0.8em !important; }

.loader-overlay {
  position:            absolute;
  width:               100%;
  height:              100%;
  z-index:             1002;
  color:               #ffffff;
  background:          rgba(0,0,0,0.25);
  -webkit-text-stroke: 1px black;
  font-weight:         bold;
  font-size:           32px;
  line-height:         110%;
  text-align:          center;
}
.loader-overlay .noaa-loader {
  position:   absolute;
  top:        33%;
  left:       50%;
  transform:  translate(-50%,-50%);
  background: radial-gradient(circle, #ffffff 0, #ffffff 20px, transparent 20px, transparent 100%);
}

@media (max-width: 991px) {
  #citation a {
    word-break: break-all;
  }
}

.ciac {
  border:           1px #8d9297 solid !important;
  padding:          0px 0.4em;
  color:            #0050d8 !important;
  background-color: #dcdee0 !important;
}

.ciac:hover {
  background-color: #8d9297 !important;
}

.event-note {
  padding:    0 !important;
  margin:     0 !important;
  font-size:  0.8em !important;
  font-style: italic;
}

/* Disaster Colors */
/*******************/
/* checkboxes */
.drought-cbl          { border-color: #cc9900 !important; color: #cc9900; }
.flooding-cbl         { border-color: #0a47cc !important; color: #0a47cc; }
.freeze-cbl           { border-color: #0099cc !important; color: #0099cc; }
.severe-storm-cbl     { border-color: #00ac23 !important; color: #00ac23; }
.tropical-cyclone-cbl { border-color: #ffd147 !important; color: #ffd147; }
.wildfire-cbl         { border-color: #ff810a !important; color: #ff810a; }
.winter-storm-cbl     { border-color: #9900cc !important; color: #9900cc; }
.all-disasters-cbl    { border-color: #bc312e !important; color: #bc312e; }

.drought-cbl:hover,
.drought-cbl:focus,
.disaster-checkbox:checked ~ label.disaster-checkbox-label.drought-cbl:focus          { box-shadow: 0px 4px 15px rgba(204, 153,   0,0.5) !important; -moz-box-shadow: 0px 4px 15px rgba(204, 153,   0,0.5) !important; -webkit-box-shadow: 0px 4px 15px rgba(204, 153,   0,0.5) !important; }
.flooding-cbl:hover,
.flooding-cbl:focus,
.disaster-checkbox:checked ~ label.disaster-checkbox-label.flooding-cbl:focus         { box-shadow: 0px 4px 15px rgba( 10,  71, 204,0.5) !important; -moz-box-shadow: 0px 4px 15px rgba( 10,  71, 204,0.5) !important; -webkit-box-shadow: 0px 4px 15px rgba( 10,  71, 204,0.5) !important; }
.freeze-cbl:hover,
.freeze-cbl:focus,
.disaster-checkbox:checked ~ label.disaster-checkbox-label.freeze-cbl:focus           { box-shadow: 0px 4px 15px rgba( 85, 187, 221,0.5) !important; -moz-box-shadow: 0px 4px 15px rgba( 85, 187, 221,0.5) !important; -webkit-box-shadow: 0px 4px 15px rgba( 85, 187, 221,0.5) !important; }
.severe-storm-cbl:hover,
.severe-storm-cbl:focus,
.disaster-checkbox:checked ~ label.disaster-checkbox-label.severe-storm-cbl:focus     { box-shadow: 0px 4px 15px rgba(  0, 172,  35,0.5) !important; -moz-box-shadow: 0px 4px 15px rgba(  0, 172,  35,0.5) !important; -webkit-box-shadow: 0px 4px 15px rgba(  0, 172,  35,0.5) !important; }
.tropical-cyclone-cbl:hover,
.tropical-cyclone-cbl:focus,
.disaster-checkbox:checked ~ label.disaster-checkbox-label.tropical-cyclone-cbl:focus { box-shadow: 0px 4px 15px rgba(255, 209,  71,0.5) !important; -moz-box-shadow: 0px 4px 15px rgba(255, 209,  71,0.5) !important; -webkit-box-shadow: 0px 4px 15px rgba(255, 209,  71,0.5) !important; }
.wildfire-cbl:hover,
.wildfire-cbl:focus,
.disaster-checkbox:checked ~ label.disaster-checkbox-label.wildfire-cbl:focus         { box-shadow: 0px 4px 15px rgba(255, 129,  10,0.5) !important; -moz-box-shadow: 0px 4px 15px rgba(255, 129,  10,0.5) !important; -webkit-box-shadow: 0px 4px 15px rgba(255, 129,  10,0.5) !important; }
.winter-storm-cbl:hover,
.winter-storm-cbl:focus,
.disaster-checkbox:checked ~ label.disaster-checkbox-label.winter-storm-cbl:focus     { box-shadow: 0px 4px 15px rgba(153,   0, 204,0.5) !important; -moz-box-shadow: 0px 4px 15px rgba(153,   0, 204,0.5) !important; -webkit-box-shadow: 0px 4px 15px rgba(153,   0, 204,0.5) !important; }
.all-disasters-cbl:hover,
.all-disasters-cbl:focus,
.disaster-checkbox:checked ~ label.disaster-checkbox-label.all-disasters-cbl:focus    { box-shadow: 0px 4px 15px rgba(188,  49,  46,0.5) !important; -moz-box-shadow: 0px 4px 15px rgba(188,  49,  46,0.5) !important; -webkit-box-shadow: 0px 4px 15px rgba(188,  49,  46,0.5) !important; }

.disaster-checkbox:checked ~ label.disaster-checkbox-label.drought-cbl          { background-color: rgba(204, 153,   0,1) !important; color: #000000; }
.disaster-checkbox:checked ~ label.disaster-checkbox-label.flooding-cbl         { background-color: rgba( 10,  71, 204,1) !important; color: #ffffff; }
.disaster-checkbox:checked ~ label.disaster-checkbox-label.freeze-cbl           { background-color: rgba( 85, 187, 221,1) !important; color: #000000; }
.disaster-checkbox:checked ~ label.disaster-checkbox-label.severe-storm-cbl     { background-color: rgba(  0, 172,  35,1) !important; color: #000000; }
.disaster-checkbox:checked ~ label.disaster-checkbox-label.tropical-cyclone-cbl { background-color: rgba(255, 209,  71,1) !important; color: #000000; }
.disaster-checkbox:checked ~ label.disaster-checkbox-label.wildfire-cbl         { background-color: rgba(255, 129,  10,1) !important; color: #000000; }
.disaster-checkbox:checked ~ label.disaster-checkbox-label.winter-storm-cbl     { background-color: rgba(153,   0, 204,1) !important; color: #ffffff; }
.disaster-checkbox:checked ~ label.disaster-checkbox-label.all-disasters-cbl    { background-color: rgba(188,  49,  46,1) !important; color: #ffffff; }

/* indicators */
.drought-ind          { background-color: #cc9900; }
.flooding-ind         { background-color: #0a47cc; }
.freeze-ind           { background-color: #0099cc; }
.severe-storm-ind     { background-color: #00ac23; }
.tropical-cyclone-ind { background-color: #ffd147; }
.wildfire-ind         { background-color: #ff810a; }
.winter-storm-ind     { background-color: #9900cc; }
.all-disasters-ind    { background-color: #bc312e; }

/* County Mapping */
.drought-risk-key          { background: linear-gradient(90deg,rgb(255, 255, 255) 0%,rgb(204, 153,   0) 100%); }
.flooding-risk-key         { background: linear-gradient(90deg,rgb(255, 255, 255) 0%,rgb( 10,  71, 204) 100%); }
.freeze-risk-key           { background: linear-gradient(90deg,rgb(255, 255, 255) 0%,rgb( 85, 187, 221) 100%); }
.severe-storm-risk-key     { background: linear-gradient(90deg,rgb(255, 255, 255) 0%,rgb(  0, 172,  35) 100%); }
.tropical-cyclone-risk-key { background: linear-gradient(90deg,rgb(255, 255, 255) 0%,rgb(255, 209,  71) 100%); }
.wildfire-risk-key         { background: linear-gradient(90deg,rgb(255, 255, 255) 0%,rgb(255, 129,  10) 100%); }
.winter-storm-risk-key     { background: linear-gradient(90deg,rgb(255, 255, 255) 0%,rgb(153,   0, 204) 100%); }
.all-disasters-risk-key    { background: linear-gradient(90deg,rgb(255, 255, 255) 0%,rgb(188,  49,  46) 100%); }

/* Modals */
.modal.drought          .modal-title, .modal.drought          caption { color: #cc9900 !important; }
.modal.flooding         .modal-title, .modal.flooding         caption { color: #0a47cc !important; }
.modal.freeze           .modal-title, .modal.freeze           caption { color: #0099cc !important; }
.modal.severe-storm     .modal-title, .modal.severe-storm     caption { color: #00ac23 !important; }
.modal.tropical-cyclone .modal-title, .modal.tropical-cyclone caption { color: #ffd147 !important; }
.modal.wildfire         .modal-title, .modal.wildfire         caption { color: #ff810a !important; }
.modal.winter-storm     .modal-title, .modal.winter-storm     caption { color: #9900cc !important; }
.modal.all-disasters    .modal-title, .modal.all-disasters    caption { color: #bc312e !important; }

.modal.drought          table th { background-color: #cc9900 !important; }
.modal.flooding         table th { background-color: #0a47cc !important; }
.modal.freeze           table th { background-color: #0099cc !important; }
.modal.severe-storm     table th { background-color: #00ac23 !important; }
.modal.tropical-cyclone table th { background-color: #ffd147 !important; }
.modal.wildfire         table th { background-color: #ff810a !important; }
.modal.winter-storm     table th { background-color: #9900cc !important; }
.modal.all-disasters    table th { background-color: #bc312e !important; }

.modal.drought          table tr:nth-child(2n) td { background-color: #faf6e8 !important; }
.modal.flooding         table tr:nth-child(2n) td { background-color: #e9eefa !important; }
.modal.freeze           table tr:nth-child(2n) td { background-color: #e8f6fa !important; }
.modal.severe-storm     table tr:nth-child(2n) td { background-color: #e8f7eb !important; }
.modal.tropical-cyclone table tr:nth-child(2n) td { background-color: #fffbee !important; }
.modal.wildfire         table tr:nth-child(2n) td { background-color: #fff4e9 !important; }
.modal.winter-storm     table tr:nth-child(2n) td { background-color: #f6e8fa !important; }
.modal.all-disasters    table tr:nth-child(2n) td { background-color: #f9ecec !important; }
/*******************/
/* Disaster Colors */

/* Nav Bar Menu *
*****************/
#section-menu {
    position: relative;
}

#section-menu ul {
    margin-top:         0 !important;
    background-color:   #ffffff;
    -webkit-box-shadow: 0 8px 6px -6px rgba(0,0,0,0.4);  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
        -moz-box-shadow: 0 8px 6px -6px rgba(0,0,0,0.4);  /* Firefox 3.5 - 3.6 */
            box-shadow: 0 8px 6px -6px rgba(0,0,0,0.4);  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}

@media (min-width:  576px) and (max-width:  767px) { #section-menu ul li { font-size: 11px !important; } }
@media (min-width:  768px) and (max-width: 1199px) { #section-menu ul li { font-size: 17px !important; } }
@media (min-width: 1200px) { #section-menu ul li { font-size: 20px !important; } }

#show-menu {
    position: absolute;
    right:    0.5rem;
    top:      0.25rem;
}

@media (min-width: 576px) {
    #show-menu,
    #section-menu ul li#hide-menu { display: none; }
}

@media (max-width: 575px) {
    #section-menu:not(.show-mobile-menu) { display: none; }
    #section-menu.show-mobile-menu { display: block; height: 0; }

    #section-menu {
        position: absolute;
        margin:   -1rem 0 0 -1rem !important;
        width:    100%;
        z-index:  2;
    }

    #section-menu ul {
        display:          block !important;
        background-color: rgba(22, 46, 81, 0.975);
    }

    #section-menu ul li,
    #section-menu ul li a,
    #section-menu ul li span,
    #section-menu ul li.selected,
    #section-menu ul li.selected a,
    #section-menu ul li.selected span {
        display:    block !important;
        text-align: right !important;
        color:      #ffffff !important;
    }

    #section-menu ul > *.selected::before,
    #section-menu ul > *:hover::before {
        visibility: hidden;
    }

    #section-menu ul > *.selected::before,
    #section-menu ul > *:focus::before {
      background-color: transparent !important;
    }
}
/****************/
/* Nav Bar Menu */

/* CPI Toggle buttons */
/**********************/
input.cpi-toggle { position: absolute; opacity: 0; } /* hide radio button */

label.cpi-toggle-label {
  cursor:           pointer;
  padding:          0.5em !important;
  font-weight:      normal;
  font-size:        0.8em;
  border:           solid 1px #112f4e;
  color:            #112f4e;
  background-color: #ffffff;
  transition:       background-color 0.25s ease,
                    box-shadow 0.25s ease;
}

.cpiToggleControls .cpiToggleControl:first-of-type label.cpi-toggle-label { border-right-width: 0; border-radius: 8px 0 0 8px; }
.cpiToggleControls .cpiToggleControl:last-of-type  label.cpi-toggle-label { border-left-width: 0; border-radius: 0 8px 8px 0; }

input.cpi-toggle:not(:checked) ~ label.cpi-toggle-label:focus,
input.cpi-toggle:not(:checked) ~ label.cpi-toggle-label:hover {
  background-color:   #52daf2;
  color:              #112f4e;
  -webkit-box-shadow: 0px 4px 15px rgba(82,218,242,0.4) !important;
     -moz-box-shadow: 0px 4px 15px rgba(82,218,242,0.4) !important;
          box-shadow: 0px 4px 15px rgba(82,218,242,0.4) !important;
}

input.cpi-toggle:checked ~ label.cpi-toggle-label {
  cursor:           default;
  background-color: #112f4e;
  color:            #52daf2;
}
/**********************/
/* CPI Toggle buttons */

/* Forms */
/*********/
form.select-form.tall,
form.select-form .tall { line-height: 250%; }

option,optGroup { text-transform: capitalize !important; }
optgroup { font-weight: bold !important; }
/*********/
/* Forms */

/* Checkboxes *
***************/
 .checkboxes {
  display:         flex;
  flex-flow:       row wrap;
  justify-content: space-around;
  align-items:     stretch;
  padding:         0;
  margin:          1em auto;
}

.checkboxes .checkflexbox {
  text-align: center;
  margin:     0.5em auto;
}

input.disaster-checkbox { position: absolute; opacity: 0; } /* hide checkbox */

label.disaster-checkbox-label {
  cursor:        pointer;
  padding:       0.5em !important;
  width:         95%;
  height:        100%;
  border:        solid 1px transparent;
  border-radius: 8px;
  transition:    background-color 0.25s ease,
                 box-shadow 0.25s ease;
}

@media (max-width:  575px) { .checkboxes .checkflexbox { width:   25%; } label.disaster-checkbox-label { font-size: 16px !important;  } }
@media (min-width:  576px) { .checkboxes .checkflexbox { width:   45%; } label.disaster-checkbox-label { font-size: 16px !important;  } }
@media (min-width:  768px) { .checkboxes .checkflexbox { width: 150px; } label.disaster-checkbox-label { font-size: 15px !important; white-space: nowrap; } }
@media (min-width:  992px) { .checkboxes .checkflexbox { width: 110px; } label.disaster-checkbox-label { font-size: 13px !important; white-space: nowrap; } }
@media (min-width: 1200px) { .checkboxes .checkflexbox { width: 132px; } label.disaster-checkbox-label { font-size: 16px !important; white-space: nowrap; } }
/**************/
/* Checkboxes */

/* Tables */
/**********/
.ind {
  display:        inline-block;
  width:          20px;
  height:         20px;
  line-height:    20px;
  vertical-align: top;
  border-radius:  5px;
  margin:         0 5px 0 0;
  border:         1px solid #c6cace;
}
/**********/
/* Tables */

/* Modals */
/**********/
.btn-mdl {
  font-size:     0.8em !important;
  padding:       1px 2px !important;
  border-width:  1px !important;
  border-radius: 6px;
}

.modal table { margin: 0 auto; width: auto !important; }

.modal caption { font-style: normal; }
/***********/
/* Modals */

/* Mapping Pre-Load */
/********************/
.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;
}

.inset-map {
  position:         absolute;
  height:           0;
  z-index:          1001;
  background-color: #ffffff !important;
  border:           #8d9297 solid 1px;
  box-shadow:
    0.1px 0.1px 2.2px rgba(0, 0, 0, 0.02),
    0.3px 0.3px 5.3px rgba(0, 0, 0, 0.028),
    0.6px 0.6px 10px rgba(0, 0, 0, 0.035),
    1.1px 1.1px 17.9px rgba(0, 0, 0, 0.042),
    2.1px 2.1px 33.4px rgba(0, 0, 0, 0.05),
    5px 5px 80px rgba(0, 0, 0, 0.07);
}

.ak-map {
  left:        15px;
  width:       20%;
  padding-top: 20%;
}

.hi-map {
  left:        25%;
  width:       18%;
  padding-top: 12%;
}

.pr-map {
  width:       10%;
  padding-top:  7%;
}

.vi-map {
  width:        5%;
  padding-top:  5%;
}

@media (max-width: 575px) {
  .pr-map { left: 45%; }
  .vi-map { left: 60%; }
}

@media (min-width: 576px) and (max-width: 767px) {
  .pr-map { left: 50%; }
  .vi-map { left: 70%; }
}

@media (min-width: 768px) {
  .pr-map { left: 53%; }
  .vi-map { left: 75%; }
}

@media (max-width: 767px) {
  #ak-risk-map, #hi-risk-map,
  #ak-state-map, #hi-state-map, #pr-state-map, #vi-state-map { bottom: 15px; }

  #conus-state-map  { height: 695px; }
  #primary-risk-map { height: 475px; }

  .info h4 { font-size: 16px !important; }
}
@media (min-width: 768px) and (max-width: 991px) {
  #ak-risk-map, #hi-risk-map,
  #ak-state-map, #hi-state-map, #pr-state-map, #vi-state-map { bottom: 15px; }

  #conus-state-map  { height: 700px; }
  #primary-risk-map { height: 600px; }

  .info h4 { font-size: 18px !important; }
}
@media (min-width: 992px) and (max-width: 1199px) {
  #ak-risk-map, #hi-risk-map { bottom: 100px; }
  #ak-state-map, #hi-state-map, #pr-state-map, #vi-state-map { bottom: 125px; }

  #conus-state-map  { height: 775px; }
  #primary-risk-map { height: 775px; }

  .info h4 { font-size: 22px !important; }
}
@media (min-width: 1200px) {
  #ak-risk-map, #hi-risk-map { bottom: 100px; }
  #ak-state-map, #hi-state-map, #pr-state-map, #vi-state-map { bottom: 125px; }

  #conus-state-map  { height: 785px; }
  #primary-risk-map { height: 785px; }

  .info h4 { font-size: 26px !important; }
}
/********************/
/* Mapping Pre-Load */

/* noUiSlider */
/**************/
#year-slider { margin-bottom: 40px; }
.noUi-marker-horizontal.noUi-marker-large { height: 10px !important; }
.noUi-value-large { font-size: 10px; }

.noUi-value-horizontal {
  -webkit-transform: translate(-50%, 25px);
          transform: translate(-50%, 25px);
  writing-mode:      vertical-lr;
}

.active-pip {
  font-weight: bold;
  color: red !important;
}
/**************/
/* noUiSlider */