/* General layout of components */
/* Do not include anything within a single component here */

.app {
  min-width: 102.4rem;
}

.header {
  height: 60px;
  position: relative;
  width: 100%;
  z-index: 4;
}

.main {
  display: flex;
  height: calc(100% - 60px); /* -header height */
  width: 100%;
}

.sidebar {
  flex: 1 0 auto;
  height: 100%;
  position: relative;
  z-index: 2;
}

.visualizations {
  height: 100%;
  overflow-x: hidden;
  width: 100%;
}

.map {
  /* height: calc(100% - 120px); -histogram height */
  height: 100%;
  position: relative;
  width: 100%;
  z-index: 2;
}

.histogram {
  height: 120px;
  position: relative;
  width: 100%;
  z-index: 3;
}