#dynamicContent { position: relative; }

#loaderModal {
  position:         absolute;
  width:            100%;
  height:           100%;
  z-index:          999999;
  background-color: rgba(125,125,125,0.25);
}

#loaderModal img { position: absolute; top: 167px; left: 335px; }

/*
 * Prev/Next/Returns
 */
 #prevNexReturns {
   display:         flex;
   justify-content: space-between;
   align-items:     baseline;
}
#prevNexReturns > * { flex: 1; }

 .prevNext {
   font-size:   0.8em;
   font-weight: bold;
   color:      #0057a5;
   cursor:      pointer;
  }
 /* End Prev/Next/Returns */

 /* Return Radio Buttons */
#return { margin: 0.1em 0; white-space: nowrap; }

/* hide radio button */
input.return-selection { position: absolute; opacity: 0; }

label.return-selection-label {
  cursor:        pointer;
  font-weight:   normal;
  display:       inline-block;
  text-align:    center;
  font-size:     14px;
  padding:       2px !important;
  border-radius: 0.25rem;
  height:        100%;
  border:        solid 1px transparent;
  width:         70px;
  border-color:  #ccc;
  color:         #777;
  margin:        auto 1px;
}

label.return-selection-label:hover {
  border-color:     #777 !important;
  background-color: #ddd;
}

.return-selection:checked ~ label.return-selection-label {
  cursor:           default;
  background-color: #777 !important;
  border-color:     #777;
  color:            #ffffff;
}

.return-selection:checked ~ label.return-selection-label:hover {
  border-color:     #777 !important;
  background-color: #777 !important;
}
/* End Return Radio Buttons */

/*
 * Leaflet Map
 */
#map-canvas { height: 455px; width: 732px; border: solid 1px #ddd; background-color: #fff; }
.lealet-container { background: rgba(0,0,0,0.0) !important; }
.leaflet-control-easyPrint { display: none; }

/* Map Title */
#mapTitle {
  margin-top:     -7px !important;
  font-family:    "open Sans", Helvetica, Arial, sans-serif;
  font-size:      16px;
  font-weight:    bold;
  color:          #777777;
  text-shadow:    -1px -1px 0 #fff,
                   1px -1px 0 #fff,
                  -1px  1px 0 #fff,
                   1px  1px 0 #fff;
  white-space:    nowrap;
  padding:        0;
  vertical-align: baseline;
}

#dateDisplay {
  margin-top:  -7px !important;
  font-family: "open Sans", Helvetica, Arial, sans-serif;
  font-size:   14px;
  white-space: nowrap;
  color:       #666666;
  text-shadow: -1px -1px 0 #fff,
                1px -1px 0 #fff,
               -1px  1px 0 #fff,
                1px  1px 0 #fff;
  text-align:  right;
}
/* End Map Title */

/* Hover Info */
.leaflet-bottom.leaflet-left { width: 100%; }

.hoverValues { width: 95%; }

#hoverInfo {
  padding:       6px 8px;
  background:    rgba(255,255,255,0.8);
  box-shadow:    0 0 15px rgba(0,0,0,0.2);
  border-radius: 5px;
  margin-bottom: -1px;
}

#hoverLocationName { font-size: 15px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; }

#hoverInstructions { font-weight: normal; font-style: italic; font-size: 0.8em; }

#highlightValues { display: flex; justify-content: space-between; }

.hoverReturn { flex: 1; font-size: 14px; font-family: Arial, Helvetica, sans-serif; }

.hoverReturnTitle {
  font-weight: bold;
  display:     inline-block;
}

.hoverReturnValue {
  display:    inline-block;
}
/* End Hover Ino */

/* Text Labels */
.textLabels {
  min-width:     50px;
  border-radius: 50px;
  left:          -25px;
  text-align:    center;
  min-height:    1.5em;
  font-family:   Arial, sans-serif, "open Sans", Helvetica;
  font-size:     0.9em;
  cursor:        default !important;
  color:         #000;
  text-shadow:   -1px -1px 0 #fff,
                  1px -1px 0 #fff,
                 -1px  1px 0 #fff,
                  1px  1px 0 #fff;
}

.cityTextLabels { top: -1.15em; }
/* End Text Labels */

/* Legend */
.legend {
  font-family: "open Sans", Helvetica, Arial, sans-serif;
  margin-left: 3px !important;
  white-space: nowrap;
}

.legend span.key,
.legend span.label {
  display:     inline-block;
  text-align:  center;
  opacity:     1;
  font-size:   0.8em;
  width:       26px;
  white-space: nowrap;
}

.legend span.key {
  height:        1em;
  border-top:    solid 1px #aaa;
  border-bottom: solid 1px #aaa;
  margin-bottom: -0.75em;
}
.legend span.key:first-of-type { border-left: solid 1px #aaa; margin-left: 10px; }
.legend span.key:last-of-type { border-right: solid 1px #aaa !important; }

.legend span.label { background: rgba(255,255,255,0.5); }

/* rank legend */
.legend span.rankLabel,
.legend span.rankKey {
  display:    inline-block;
  text-align: center;
  opacity:    1;
  height:     18px;
}

.legend span.rankKey {
  border-top:    solid 1px #ddd;
  border-bottom: solid 1px #ddd;
}

.legend span.left-arrow {
  display:        inline-block;
  vertical-align: -5px;
  border:         solid 9px transparent;
  border-left:    none;
}

.legend span.right-arrow {
  display:        inline-block;
  vertical-align: -5px;
  border:         solid 9px transparent;
  border-right:   none;
}

.legend span.rankKey { text-shadow: none !important; }
/* End Legend */

/* End Leaflet Map */

/* mapOptions */
#mapOptions { margin-bottom: 3em; }
/* End mapOptions */

/* showText */
input#showText { position: absolute; opacity: 0; }

label#showTextLabel {
  cursor:        pointer;
  font-weight:   normal;
  display:       inline-block;
  text-align:    center;
  font-size:     12px;
  padding:       2px !important;
  border-radius: 0.25rem;
  height:        100%;
  border:        solid 1px transparent;
  transition:    border 0.5s;
  /*border-color:  #2EA3E3;*/
  color:         #1E59A6;
  margin:        3px 0;
}

label#showTextLabel:hover {
  border-color: #1E59A6 !important;
}

#showText:checked ~ label#showTextLabel {
  background-color: #1E59A6 !important;
  border-color:     #1E59A6;
  color:            #ffffff;
}

#showText:checked ~ label#showTextLabel:hover {
  color: #AFDEF6 !important;
}
/* End showText */

/* Save as PNG */
#saveAsPng {
  cursor:        pointer;
  font-weight:   normal;
  display:       inline-block;
  text-align:    center;
  font-size:     12px;
  padding:       2px !important;
  border-radius: 0.25rem;
  font-size:     0.8em;
  height:        100%;
  border:        solid 1px transparent;
  transition:    border 0.5s;
/*  border-color:  #2EA3E3;*/
  color:         #1E59A6;
  margin:        3px 0;
}

#saveAsPng:hover {
  border-color:     #1E59A6 !important;
/*  background-color: #AFDEF6;*/
}

#saveAsPng:active {
  background-color: #1E59A6 !important;
  border-color:     #1E59A6;
  color:            #ffffff;
}
/* End showText */

/*
 * Data Table
 */
#table-data-download,
#all-months-download {
  float:       left;
  white-space: nowrap;
}

#table-data-download { width: 60%; }
/* End Data Table */