@media (max-width: 767px) {
  label:not([for="roIndicator"])  { width: 60px; }
  select:not(#roIndicator) { width: calc(100% - 65px); }
  label[for="roIndicator"]  { width: 90px; }
  select#roIndicator { width: calc(100% - 95px); }
}
@media (min-width: 768px) {
  #indicator { max-width: 225px; }
}

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

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

.overlay > img {
  position:   absolute;
  top:        33%;
  left:       50%;
  transform:  translate(-50%,-50%);
  background: radial-gradient(circle, #ffffff 0, #ffffff 20px, transparent 20px, transparent 100%);
}

#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 65px 0 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: 575px) {
  .tooltip-title { display: none; }
}

@media (max-width: 991px) {
  .tooltip-title { font-size: 16px; }
}
@media (min-width: 992px) {
  .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: 66px; }

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

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

#map-legend span.lowest { margin-right: -12px; }
#map-legend span.highest { margin-left: -12px; }

[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; }

@media (max-width: 767px) {
  #usDataDisplay { margin-bottom: 50px; }
}

@media (max-width: 399px) {
  #map-legend { margin-left: -10px; }
}