.map-container {
  position: relative;
  z-index: 998;
}

#dataviz-container {
  position: absolute;
  top: 12%;
  right: 2%;
  width: 575px;
  height: 579px;
  background-color: #ffffff;
}

#dataviz-container .layer {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  display: none;
}

#dataviz-container .layer.active {
  display: block;
}

.selector-container {
  position: absolute;
  top: 10px;
  left: 40px;
  width: 90%;
  height: 5em;
}

.selector-container .form-group {
  background-color: #fff;
  margin-right: 5px;
  width: 172px;
}

.selector-container .form-group label{
  display: block;
  font-weight: normal;
  padding: 4px 8px 5px;
}

.selector-container .form-inline .form-control {
  border: 0;
  width: 100%;
}

.map-layer-legend {
  position: absolute;
  bottom: 15%;
  left: 10px;
  width: 65px;
  height: 285px;
  background-color: #ffffff;
}

.slider-container {
  position: absolute;
  bottom: 2%;
  left: 10px;
  width: 70%;
  height: 2.7em;
  padding: 0.9em;
  background-color: #ffffff;
}

.slider-container .slider-arrow {
  width: 15px;
  float: left;
  margin: -3px 5px;
}

.slider-container #year-slider {
  float: left;
  width: -webkit-calc(100% - 50px);
  width:    -moz-calc(100% - 50px);
  width:      -o-calc(100% - 50px);
  width:         calc(100% - 50px);
}

#custom-handle {
  width: 3em;
  height: 1.6em;
  top: 50%;
  margin-top: -.8em;
  text-align: center;
  line-height: 1.6em;
}

#info {
  position: absolute;
  height: 1px;
  width: 1px;
  z-index: 100;
}

.tooltip-arrow {
  display: none;
}

.tooltip .tooltip-inner {
  background-color: #fff;
  color: #333;
}

text.tick-mark {
  font-size: 12px;
  font-weight: bold;
  color: black;
}

text.axistext {
  font-weight: bold;
}

.disabled-container {
  pointer-events: none;
  opacity: 0.4;
}