:host{
  font-weight: bold;
  width: 100%;
  height: calc(100% - 43px);
  position: absolute;
  display: grid;
}

@media screen {
  #visualization {
    display: grid;
    height: 100%;
    margin: 0;
    overflow: hidden;
    grid:
      "query-box query-box date-box" auto 
      "filters results results" 1fr
      / 25.5em 3fr auto;
  }
}

@media screen and (max-width: 900px) {
  #visualization {
    display: grid;
    margin: 0;
    overflow: hidden;
    grid:
      "query-box" auto
      "date-box" auto
      "filters" min-content
      "results" 1fr
      / 1fr;
  }
  #results {
    height: 600px;
  }
}

#query-box {
  grid-area: query-box;
  margin: 1em 0.5em 0.5em 0.5em;
}

#date-box{
  grid-area: date-box;
  display: flex;
  align-items: center;
}





#filters {
  grid-area: filters;
  overflow: auto;
}
#filterpanel {
  background-color: #f8f8f8;/*#fafafa;*/
  padding: 0.5em;
  margin: 0 0.5em 0.5em 0.5em;
  border-radius: 5px;
}

#results {
  grid-area: results;
  overflow: hidden;
  position:relative;
}

#plot-button-bar {
  display: flex;
  justify-content: space-between;
}