* {
  box-sizing: border-box;
}


a.one:link, a.one:visited {
  background-color: white;
  color: black;
  border: 2px solid #0c9287;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a.one:hover, a.one:active {
  background-color: #0c9287;
  color: white;
}

a:hover {
  color: #0c9287;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  margin:0px;
}

/* The grid container */
.grid-container {
  display: grid;
  grid-template-areas: 
    'header header header header header header' 
    'left left middle middle right right'
    'form form form form form form'
    'chart1 chart1 chart1 chart1 chart1 chart1'
    'footer footer footer footer footer footer'
    'left2 left2 middle2 middle2 right2 right2'
  /*;grid-column-gap: 10px;# - if you want gap between the columns */
} 

/* Style the header */
.header {
  grid-area: header;
  background-color: #f1f1f1;
  padding: 10px;
  text-align: center;
  font-size: 30px;
}

.left,
.middle,
.right {
  padding: 10px;
}

/* Style the left column */
.left {
  grid-area: left;
}

/* Style the middle column */
.middle {
  grid-area: middle;
}

/* Style the right column */
.right {
  grid-area: right;
}

/* Style the form */
.form {
  grid-area: form;
  background-color: #f1f1f1;
  padding: 20px;
  text-align: center;
  border-radius: 5px;
}

/* Style the charts */
.chart1 {
  grid-area: chart1;
  background-color: #f1f1f1;
  padding: 10px;
}

.js-plotly-plot,
.plot-container {
          width: 95vw;
          text-align: middle;
}

/* Style the footer */
.footer {
  grid-area: footer;
  background-color: #f1f1f1;
  padding: 10px;
  text-align: left;
}

.column {
  float: left;
  width: 33.33%;
  padding: 10px;
  /* height: 300px; Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
  .grid-container  {
    grid-template-areas: 
      'header header header header header header' 
      'left left left left left left' 
      'middle middle middle middle middle middle' 
      'right right right right right right' 
      'form form form form form form'
      'chart1 chart1 chart1 chart1 chart1 chart1'
      'footer footer footer footer footer footer'
      'left2 left2 left2 left2 left2 left2'
      'middle2 middle2 middle2 middle2 middle2 middle2'
      'right2 right2 right2 right2 right2 right2';
  }
}

@media (max-width: 600px) {
  .form {
    width: 100%;
  }
}

@media only screen and (max-width: 600px) {
  .chart1 {
    width: 100%;
  }
}

@media (max-width: 600px) {
  .footer {
    width: 100%;
  }
}

/* form specs */
input[type=text], select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}


input[type=submit] {
  width: 100%;
  background-color: #03a9bd;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #038b9a;
}

.button1 {
  width: 30%;
  right: 0px;
  background-color: #b7b9b9;
  color: white;
  padding: 14px 20px;
  margin: 8px 20px 10px 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.button1:hover {
  background-color: #caa554;
}