@media screen and (max-width: 667px) {
  body {
      overflow-x: hidden !important;
  }
  .container {
      max-width: 100% !important;
      overflow-x: hidden !important;
  }
}

@media screen and (min-width: 667px){
  #datetime-slider {
    transform: translate(0px, 200%);
  }
}

#datetime-slider {
  height: 9px;
}


.noUi-connect {
  background: #016cee;
}

.noUi-horizontal .noUi-handle {
  width: 16px;
  height: 16px;
  right: -8px;
  top: -5px;
  border-radius: 50%;
  background: #016cee;
  cursor: pointer;
  border: none;
  box-shadow: none;
}

.noUi-handle:after, .noUi-handle:before {
  content: none;
}

#map {
  height: 250px;
}

.plot-header {
  text-align: center
}

.plot-description {
  /* text-align: justify */
}

.plot-placeholder {
  text-align: center;
  font-style: italic;
}

.aqi-button {
  background-color: #2c3e50;
  color: #fff;
}

.leaflet-popup-content-wrapper {
  background:#2c3e50;
  color:#fff;
  font-size:16px;
  line-height:24px;
}
.leaflet-popup-content-wrapper a {
  color:rgba(255,255,255,1);
}
.leaflet-popup-tip-container {
  width:35px;
  height:15px;
}

#suggestions-container {
  /* width: 100%; */
  /* position: absolute; */
  /* top: 26px; */
  /* left: 0; */
  /* margin-top: 10px; */
  /* overflow: auto; */
  /* display: none; */
}

#suggestions-list .suggestion {
  font-size: 13px;
  padding: 7px;
  background: white;
  border-top: 1px solid #f1f1f1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

#suggestions-list .suggestion:first-child {
  border: none;
}

#suggestions-list .suggestion.selected,
#suggestions-list .suggestion:hover {
  background: #7FDFFF;
  border-color: #7FDFFF;
}