.maes-viewer-grid {
  display: grid;
  margin: 3em 0;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.maes-viewer-grid .js-plotly-plot {
  /* this would have been overriden by inline CSS inside the react-plotly.js
  component if it was not marked !important */
  /* this rule is needed to make the small charts inside the MAES Viewer
  responsive */
  display: block !important;
}

.maes-select-label {
  display: inline-block;
  margin-bottom: 1rem;
  font-size: 19px;
  font-weight: bold;
}

@media only screen and (min-width: 1440px) {
  .maes-viewer-grid {
    column-gap: 2rem;
  }

  .maes-viewer-select {
    grid-column: 9/13;
    grid-row: 1/2;
  }

  .maes-viewer-charts {
    grid-column: 1/9;
    grid-row: 1/2;
    overflow-x: hidden;
  }
}

@media only screen and (max-width: 1440px) {
  .maes-viewer-grid {
    grid-template-rows: auto auto;
    /* grid-template-columns: 1fr; */
  }

  .maes-viewer-select {
    margin-bottom: 3em;
    grid-column: 1/5;
    grid-row: 1/2;
  }

  .maes-viewer-charts {
    grid-column: 1/13;
    grid-row: 2/3;
    overflow-x: hidden;
  }
}

@media only screen and (max-width: 1282px) {
  .maes-viewer-select {
    width: 100%;
    max-width: 320px;
    grid-column: 1/13;
  }
}