#container {
  width: 100%;
  min-width: 120px;
  margin: auto;
  display: grid;
}

.grid-layout {
  grid-template-rows: 80px 1fr 50px;
  grid-template-columns: 0.2fr 1fr 0.2fr;
}

.grid-layout-wide {
  grid-template-rows: 80px 1fr 50px;
  grid-template-columns: 0.1fr 1fr 0.1fr;
}

header {
  grid-column: 1 / 5;
  grid-row: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  padding: 0px;
  border-bottom: 1px solid #dee2e6 !important;
  background-color: #fff !important;
}

  header .navbar {
    padding: 4px;
  }

/*aside
{
  grid-column: 1 / 2;
  grid-row: 2 / 4;
  margin-top: 40px;
  max-width: 160px;
  min-height: 75vh;
  border-right: 1px solid rgba(222, 226, 230, 0.2);
}
*/
main {
  grid-column: 2 / 3;
  grid-row: 2 / 4;
  /*margin-top: 16px;*/
  /*min-height: 600px;*/
}

footer {
  grid-column: 1 / 5;
  grid-row: 4 / 5;
  /*background: orange;*/
}







@media only screen and (min-width: 800px) {
  .dashboard {
    display: grid;
    gap: 2rem;
    grid-template-columns: 540px 1fr;
  }

  .fosGraphs {
    display: grid;
    grid-column-gap: 2rem;
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 0.5fr));
  }

  .historySimulation {
    display: grid;
    grid-column-gap: 2rem;
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
  }
}

@media only screen and (max-width: 800px) {
  .dashboard {
    display: grid;
    gap: 1rem;
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fill, minmax(540px, 1fr));
  }

  .fosGraphs {
    display: grid;
    gap: 1rem;
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 0.5fr));
    grid-column: 1/3;
    margin-top: 560px;
    margin-left: -550px;
  }

  .historySimulation {
    display: grid;
    gap: 1rem;
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
    grid-column: 1/3;
    margin-left: -550px;
  }
}