form#extremes-select { line-height: 2.5em; margin-bottom: 1em; }

@media only screen and (min-width: 1024px) {
  form#extremes-select label { display: inline-block; width: 110px; }
  form#extremes-select select { display: inline-block; width: 225px; }
}
@media only screen and (max-width: 1023px) {
  form#extremes-select label { display: inline-block; width: 104px; }
  form#extremes-select select { display: inline-block; width: 203px; }
}
@media only screen and (max-width: 659px) {
  form#extremes-select label { display: inline-block; width: 93px; }
  form#extremes-select select { display: inline-block; width: 183px; }
}
form#extremes-select #submit { transition: background-color 0.5s; }
form#extremes-select #submit:disabled { background-color: #ddd; }

/* Loader Modal
---------------*/
#dynamicContent,
#mapCanvasDiv,
#dataTableDiv { position: relative; }

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

.loaderModal img { position: absolute; left: 335px; }
#dynamicContent-loaderModal img { top: 167px; }
#mapCanvas-loaderModal   img { top: 167px; }
#dataTable-loaderModal   img { top: 10px; }
/*------------------
  End Loader Modal */

/* Leaflet Map
--------------*/
#mapCanvas { width: 733px; height: 455px; border: solid 1px #ddd; background-color: #fff; }
.lealet-container { background: rgba(0,0,0,0.0) !important; }
.leaflet-control-easyPrint { display: none; }
.circle-marker {
  box-shadow: 4px 4px 3px #0f0; /* see http://www.w3schools.com/css/css3_shadows.asp */
  -moz-box-shadow: 4px 4px 3px #0f0;
  -webkit-box-shadow: 4px 4px 3px #0f0;
}

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

#mapTitle {
  font-family:  "open Sans", Helvetica, Arial, sans-serif;
  font-size:    16px;
  color:        #777777;
}

#hoverOutput {
  font-family: "open Sans", Helvetica, Arial, sans-serif;
  font-size:   13px;
}

.hoverInfo { 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;
  font-size:     13px;
  font-family:   Arial, Helvetica, sans-serif;
}
/* End Hover Ino */

/* Text Labels */
.textLabels {
  top:           -1em !important;
  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;
}
/* End Text Labels */

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

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

.legend #legend span.label {
  color:       #777;
  text-shadow: -1px -1px 0 #fff,
                1px -1px 0 #fff,
               -1px  1px 0 #fff,
                1px  1px 0 #fff;
}

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

/* FlyTo Buttons */
.flyToButton { cursor: pointer; border-radius: 0.25rem; font-size: 0.9em; line-height: 1.5em; }
.flyToButton:disabled { background-color: #777; cursor: default; }
/* End FlyTo Buttons */

/* Popups */
.popup-title     { font-size: 1.15em; }
.popup-elevation { color: #777; font-style: italic; font-size: 0.9em; }
.popup-normal    { display: flex; justify-content: space-between; }
.popup-element   { color: #777; margin-right: 2px; }
.popup-value     { font-weight: bold; margin-left: 2px; }
/* Popups */

/*-------------
End Leaflet Map */

#mapOptionsDiv {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
  flex-wrap:       nowrap;
  margin:          0.5em auto;
}

/* 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;
  color:         #1E59A6;
  margin:        3px 0;
}

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

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

#showText:checked ~ label#showTextLabel:hover {
  color: #1E59A6 !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;
  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 Save as PNG */

/* Data Table
---------------*/
table#extremes-data { font-size: 0.8em; margin: 2em auto; }

table#extremes-data caption {
  font-size:     14pt;
  font-weight:   bold;
  margin-bottom: 0.5em;
  padding:       0;
}

table#extremes-data td.station { text-align: left; white-space: nowrap; }
table#extremes-data td.state   { text-align: center; }
table#extremes-data td.value   { text-align: right; }
/*------------------
  End Data Table */

/* map borders' width and color */
#mapCanvas path {
  stroke: #cccccc;
}

#allStations path {
  stroke-width: 0.5;
  stroke:       #6699cc;
}