html,
body {
  color: #212121;
  background: #fff;
  max-width: 560px;
  margin-left: 24px;
  font-family: Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

h1 {
  font-size: 2em;
  border-bottom: 1px solid #CCC;
  padding-bottom: 4px;
}

h2 {
  font-size: 1.5em;
  margin-top: 32px;
}

h3 {
  font-size: 1.15em;
  margin-top: 24px;
}

h4 {
  font-size: 1em;
  margin-top: 16px
}

h1, h2, h3, h4 {
  margin-bottom: 0px;
}

p {
  margin-top: 8px;

}

a:link {
  color: #00f;
}

a:visited {
  color: #009;
}

a:hover {
  color: #06f;
}

a:active {
  color: #0cf;
}

.modal-section {
  display: flex;
  flex-direction: column;
  font-size: 1em;
  overflow: auto;
  line-height: 1.5;
}

.modal-section table {
  display: table;
  border-collapse: collapse;
  margin: 0 2px;
  width: 95%;
  border-spacing: 0 2px;
  max-width: 100%;
  font-size: .8em;
}

.modal-section table thead {
  display: table-header-group;
  vertical-align: middle;
}

.modal-section table thead tr th{
  text-align: center;
}

.modal-section table tr {
  display: table-row;
  text-align: center;
  vertical-align: inherit;
}
.modal-section table tr th{
  text-align: left;
}

.modal-section table tbody {
  display: table-row-group;
  vertical-align: middle;
}

.modal-section table tbody tr:last-child td:last-child{
  color: #0082ca;
}

.history-row td {
  background: rgba(67,200,178,.2);
}

.history-row td:first-child {
  text-align: right;
}

.forecast-point-row td {
  background: rgba(127,143,164,.2);
}

.forecast-point-row  td:first-child {
  text-align: right;
}

.forecast-row td {
  background: rgba(252,217,102,.2);
}

.forecast-row  td:first-child {
  text-align: right;
}

/*Border styling for blank cells and values of features known in advance*/
.modal-section tbody tr:nth-child(4) td:nth-child(6),
.modal-section tbody tr:nth-child(5) td:nth-child(6),
.modal-section tbody tr:nth-child(6) td:nth-child(6),
.modal-section tbody tr:nth-child(7) td:nth-child(6),
.modal-section tbody tr:nth-child(8) td:nth-child(6),
.modal-section tbody tr:nth-child(9) td:nth-child(6) {
  border-color: #0082ca;
  border-style: solid;
  border-width: 0 1px;
}
.modal-section tbody tr:nth-child(4) td:nth-child(6) {
  border-top-width: 1px;
}
.modal-section tbody tr:nth-child(9) td:nth-child(6) {
  border-bottom-width: 1px;
}

.modal-section tbody tr:nth-child(4) td:nth-child(4),
.modal-section tbody tr:nth-child(5) td:nth-child(4),
.modal-section tbody tr:nth-child(6) td:nth-child(4),
.modal-section tbody tr:nth-child(7) td:nth-child(4),
.modal-section tbody tr:nth-child(8) td:nth-child(4),
.modal-section tbody tr:nth-child(9) td:nth-child(4){
  border-style: solid;
  border-width: 0 0 0 1px;
}
.modal-section tbody tr:nth-child(4) td:nth-child(5),
.modal-section tbody tr:nth-child(5) td:nth-child(5),
.modal-section tbody tr:nth-child(6) td:nth-child(5),
.modal-section tbody tr:nth-child(7) td:nth-child(5),
.modal-section tbody tr:nth-child(8) td:nth-child(5),
.modal-section tbody tr:nth-child(9) td:nth-child(5) {
  border-style: solid;
  border-width: 0 1px 0 0;
}
.modal-section tbody tr:nth-child(4) td:nth-child(4),
.modal-section tbody tr:nth-child(4) td:nth-child(5) {
  border-top-width: 1px;
}
.modal-section tbody tr:nth-child(9) td:nth-child(4),
.modal-section tbody tr:nth-child(9) td:nth-child(5) {
  border-bottom-width: 1px;
}