form.cei-form {
  line-height:   2.5em;
  margin-bottom: 1em;
}

/* Graph *
 *********/
#chartCanvas { width: 100%; height: 500px; }
/*********
 * Graph */

/* Regional Overview *
 *********************/
#roIndicatorMenu { display: flex; }
#roIndicatorMenu .roIndicator {
  font-size:        16px;
  flex:             1;
  background-color: #f1f3f6;
  text-align:       center;
  padding:          5px;
  text-decoration:  none;
}
#roIndicatorMenu .roIndicator:hover { background-color: #dcdee0; }
#roIndicatorMenu .roIndicator.selected { background-color: #c6cace; color: #162e51; cursor: default; }

#map-container {
  position: relative;
  width:    100%;
}

.overlay {
  display:          none;
  position:         absolute;
  width:            100%;
  height:           100%;
  z-index:          1001;
  background-color: rgba(125,125,125,0.2);
  transition:       background-color 0.5s ease;
}

.overlay > #noaa-loader { position: absolute; top: calc(50% - 33px); left: calc(50% - 33px); }

#map-canvas {
  width:            100%;
  padding:          5px;
  border:           solid 1px #c6cace;
  background-color: #ffffff;
}

@media (max-width: 767px) { #map-canvas { height: 595px; } }
@media (min-width: 768px) and (max-width:  991px) { #map-canvas { height: 600px; } }
@media (min-width: 992px) and (max-width: 1199px) { #map-canvas { height: 675px; } }
@media (min-width: 1200px) { #map-canvas { height: 685px; } }

#indicator-title,
#period-title { margin: 0 !important; }

#usDataDisplay {
  color:             #1c1d1f;
  text-shadow:       1px 1px 0 #f1f3f6;
  text-align:        center;
  font-family:       "open Sans", Helvetica, Arial, sans-serif;
  font-size:         16px;
  float:             right;
  cursor:            pointer;
  width:             119px;
  height:            75px;
  background-image:  url(/monitoring-content/extremes/cei/images/transparent-conus-bg.png);
  background-repeat: no-repeat;
  border:            solid 1px #ffffff;
}

#usDataDisplay:hover { border-color: #000000; }

#usDataDisplay span {
  display:     inline-block;
  margin-top:  10px;
  color:       #1c1d1f !important;
  text-shadow: 1px 1px 0 #f1f3f6 !important;
}

.region-label {
  background:  transparent !important;
  border:      none !important;
  box-shadow:  none !important;
  text-align:  center;
  color:       #1c1d1f !important;
  text-shadow: 1px 1px 0 #f1f3f6 !important;
}


#usDataDisplay.extreme span,
.region-label.extreme { color: #f1f3f6 !important; text-shadow: 1px 1px 0 #1c1d1f !important; }

.tooltip-title { font-weight: bold; }
.tooltip-value { font-size: 16px; }

@media (max-width: 991px) { .map-logo { padding-top: 45px; } .tooltip-title { font-size: 16px; } }
@media (min-width: 992px) { .map-logo { padding-top:  0; }   .tooltip-title { font-size: 18px; } }

#map-legend { white-space: nowrap; font-size: 16px !important; }
#map-legend * { vertical-align: middle; }

#map-legend span.key {
  display:     inline-block;
  text-align:  center;
  padding:     2px;
  text-shadow: none;
}

#map-legend span.key.normal { width: 100px; }

#map-legend span.key.top-third,
#map-legend span.key.bottom-third { width: 75px; }

#map-legend span.key.top-tenth,
#map-legend span.key.bottom-tenth { width: 50px; }

#map-legend span.key.lowest,
#map-legend span.key.highest { width: 5px; }

[class^=arrow-] { display: inline-block; border:  solid 14px transparent; }
#map-legend span.key.arrow-right { border-right: none; }
#map-legend span.key.arrow-left  { border-left:  none; }
/**********************
 * Regional Overview */