.section-title {
	background-color: #dfdfdf;
	padding:          5px;
	cursor:           pointer;
}

.section-title:after {
  content:    '\002B';
  font-weight: bold;
  float:       right;
  margin-left: 5px;
}

.section-title.section-shown:after {
  content: '\2212';
}

form.recovery-form { line-height: 2.5em; }

form.recovery-form label { display: inline-block; width: 75px; }

form.recovery-form select { width: 275px; }

form.recovery-form .submit-button { width: 65px; }

#map-canvas { height: 400px; }

#opacityDiv {
  float:     left;
  font-size: 0.8em;
}
#opacityDiv * { vertical-align: middle; }
#data-opacity { display: inline-block; width: 50px; }

#basemap-div {
  float:     left;
  font-size: 0.8em;
}
/*#basemap-div label { font-weight: normal; }*/

#map-select-div {
  float:       right;
  font-size:   0.8em;
  white-space: nowrap;
}

#map-select { display: none; }

#slide-opacity { cursor: grab; }
#slide-opacity:active { cursor: grabbing; }
/* turn off range value display in IE/Edge */
#slide-opacity::-ms-tooltip { display: none; }

#mapTitle {
  color:       #000000;
  font-family: "open Sans", Helvetica, Arial, sans-serif;
  font-size:   14px;
  font-weight: bold;
  text-shadow: 1px 1px #fff;
  white-space: nowrap;
  margin:      -5px 0;
  padding:     0;
}

#metaData {
  color:       #000000;
  font-family: "open Sans", Helvetica, Arial, sans-serif;
  font-size:   11px;
  text-shadow: 1px 1px #fff;
  margin:      -5px 0;
  padding:     0;
  float:       right;
  text-align:  right;
}
#metaData div#metaData-date { white-space: nowrap; }

.leaflet-control-easyPrint,
.leaflet-control-attribution span.ext { display: none; }

.legend span.key,
.legend span.label {
  display:    inline-block;
  text-align: center;
  opacity:    1;
  font-size:  0.8em;
}

.legend span.key { height: 1em; }
.legend span.label { margin-top: -1em; }

.legend .usdmKey,
.legend .usdmLabel,
.legend .recoveryKey,
.legend .recoveryLabel { width: 26px; }
.legend .recoveryKey:first-child { margin-left: 10px; }
.legend .phdiKey,
.legend .phdiLabel,
.legend .anomKey,
.legend .anomLabel { width: 16px; }
.legend .prcpKey,
.legend .prcpLabel { width: 25px; }
.legend .prcpLabel.loftset { margin-left: -8px; }
.legend .prcpLabel.loftset + .prcpLabel { margin-left: 8px; }
.legend .nearNormal { width: 8px !important; }

#pop-up-title { font-weight: bold; margin-bottom: 0.15em; white-space: nowrap; }
#pop-up-value { color: #777777; white-space: nowrap; }

#coords { font-weight: bold; margin-bottom: 0.15em; white-space: nowrap; }
#coord-value { color: #777777; white-space: nowrap; }

#legend { white-space: nowrap; color: #000000; font-size: 11px; font-weight: bold; }
#legend * { vertical-align: middle; }
#min-legend-value { float: left; width: 20px; text-align: right; margin: 0 5px 0 0; }
#max-legend-value { float: right; text-align: left; margin: 0 0 0 5px; }

.leaflet-tooltip.mapTooltip {
  border-color: #000000;
}
.leaflet-tooltip-left.mapTooltip::before {
  border: none;
}
.leaflet-tooltip-right.mapTooltip::before {
  border: none;
}
.leaflet-tooltip-right.mapTooltip {
  margin-left: 15px;
  margin-top:  -25px;
}
.leaflet-tooltip-left.mapTooltip {
  margin-left: -13px;
  margin-top:  -25px;
}

.css-loader {
  display:           none;
  border:            5px solid #D0CFD4;
  border-radius:     50%;
  border-top:        5px solid #0159A6;
  width:             30px;
  height:            30px;
  -webkit-animation: spin 1s linear infinite; /* Safari */
  animation:         spin 1s linear infinite;
}
#save-as-png-loader { width: 11px; height: 11px; border-width: 3px; }
#basemap-loader,
#map-select-loader  { width: 10px; height: 10px; border-width: 3px; display: inline-block; }
#coord-value-loader {
  display:      block !important;
  width:        10px;
  height:       10px;
  border-width: 3px;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.mapArea {
  margin:     1em auto;
  padding:    5px;
  font-size:  0.85em;
  background: url('/shared/v1/images/noaa_loader.gif') 50% 50% no-repeat;
}

.mapArea svg path { stroke-width: 0.1; stroke: #000; cursor: pointer; }

#map_caption { font-size: 0.7em; font-style: italic; min-height: 2.85em; }

p.download a:after { content: none; }