main.css

html,
body,
#viewDiv {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

.esri-display-object > svg > g:nth-child(3) {
  transition: opacity .2s ease-in;
  opacity: 0;
}
.g-hidden {
  opacity: 0;
}
.g-visible {
  opacity: 1 !important;
}

/* custom theme */
.red-theme .esri-widget,
.red-theme .esri-widget-button,
.red-theme .esri-menu,
.red-theme .esri-popup__main-container,
.red-theme .esri-popup .esri-pointer-direction,
.red-theme .esri-popup .esri-popup__pointer-direction,
.red-theme .esri-button {
  background-color: rgba(211,47,47,0.75);
  color: black;
}
.red-theme .esri-widget-button:focus,
.red-theme .esri-widget-button:hover,
.red-theme .esri-menu li:focus,
.red-theme .esri-menu li:hover {
  background-color: rgb(250,47,47);
  color: black;
}
.red-theme .esri-widget-button:focus {
  outline-color: black;
}
.red-theme .esri-button:focus,
.red-theme .esri-button:hover,
.red-theme .esri-popup__button {
  color: black;
}
.red-theme .esri-popup__footer .esri-popup__action:focus {
  outline-color: black;
}
.red-theme .esri-widget a {
  color: #e4e4e4;;
  text-decoration: underline;
}
.red-theme .esri-popup-renderer,
.red-theme .esri-zoom.esri-widget.esri-component {
  background-color: transparent;
}
.red-theme .esri-popup__content {
  overflow-y: hidden;
}

.credits {
  display: none;
  padding: 5px;
  line-height: 1.5em;
  z-index: 2; /* higher than esri-popup */
}
.credits a {
  margin: 0 7px;
  font-weight: bold;
}

.map-controls {
  padding: 5px;
  width: 250px;
  text-align: center;
  line-height: initial;
  display: none;
}

/* when .map-controls element is set to view ui position "manual" */
.esri-ui-manual-container>.esri-component.map-controls {
  top: 0;
  right: 0;
  font-size: 0.7em;
}

.map-controls .slider-controls {
  font-size: 1.3em;
  font-weight: bold;
}

.map-controls .slider-controls .range-slider {
  width: 100%;
  margin: 0;
}

/* c3 charts */
#summaryChart .c3-line-whales,
#harborChart .c3-line-whales {
  stroke-width: 3px;
}