body {
  box-sizing: border-box;
  margin: 0;
  font-family: Optima;
  font-weight: 500;
}

h1 {
  color: blue;
}

h2 {
  color: green;
}

h3 {
  color: red;
}

.page {

}

.flex {
  flex: 1;
}

.columns, .rows {
  flex-wrap: wrap;
}

.column, .columns {
  flex-direction: column;
}

.row, .rows, .column, .columns {
  display: flex;
}

.row.start, .rows.start, .column.start, .columns.start {
  justify-content: flex-start;
}

.row.middle, .rows.middle, .column.middle, .columns.middle {
  justify-content: center;
}

.row.end, .rows.end, .column.end, .columns.end {
  justify-content: flex-end;
}

.row.space-around, .rows.space-around, .column.space-around, .columns.space-around {
  justify-content: space-around;
}

.row.space-between, .rows.space-between, .column.space-between, .columns.space-between {
  justify-content: space-between;
}

.row.c-start, .rows.c-start, .column.c-start, .columns.c-start {
  align-items: flex-start;
}

.row.c-middle, .rows.c-middle, .column.c-middle, .columns.c-middle {
  align-items: center;
}

.row.c-end, .rows.c-end, .column.c-end, .columns.c-end {
  align-items: flex-end;
}

.row.c-stretch, .rows.c-stretch, .column.c-stretch, .columns.c-stretch {
  align-items: stretch;
}

.row.c-baseline, .rows.c-baseline, .column.c-baseline, .columns.c-baseline {
  align-items: baseline;
}

.row.l-start, .rows.l-start, .column.l-start, .columns.l-start {
  align-content: flex-start;
}

.row.l-middle, .rows.l-middle, .column.l-middle, .columns.l-middle {
  align-content: center;
}

.row.l-end, .rows.l-end, .column.l-end, .columns.l-end {
  align-content: flex-end;
}

.row.l-space-around, .rows.l-space-around, .column.l-space-around, .columns.l-space-around {
  align-content: space-around;
}

.row.l-space-between, .rows.l-space-between, .column.l-space-between, .columns.l-space-between {
  align-content: space-between;
}

.f-start {
  align-self: flex-start;
}

.f-middle {
  align-self: center;
}

.f-end {
  align-self: flex-end;
}

.f-stretch {
  align-self: stretch;
}

.f-baseline {
  align-self: baseline;
}

.shadowed {
  box-shadow: 0 5px 5px 0 grey;
}

.input-container {
  flex: 1;
  min-width: 300px;
  margin-bottom: 20px;
  border: 1px solid black;
  border-radius: 3px;
  box-shadow: 0 5px 5px 0 grey;
}

.login-input-title {
  padding: 10px;
  background: lightgrey;
  height: 20px;
  line-height: 20px;
}

.login-input {
  padding: 10px;
  padding-top: 15px;
  font-size: 1.2em;
  color: green;
  border: none;
  border-bottom: 1px solid black;
  font-family: Times !important;
  cursor: pointer;
}

input:focus.login-input {
  outline: none !important;
  box-shadow: 0 0 0 1px;
}

.login-button {
  line-height: 40px;
  border: 1px solid black;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 5px 5px 0 grey;
  padding-right: 30px;
  flex: 1;
  background: lightblue;
  padding-left: 30px;
}

.login-button.selected {
  background-color: lightgreen;
}

.button {
  min-width: 130px;
  line-height: 50px;
  font-family: Optima;
  height: 50px;
  border: 1px solid black;
  padding: 0 5px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 5px 5px 0 grey;
  font-size: 1.2em;
  border-radius: 3px;
  background: lightblue;
}

.button.selected {
  background-color: lightgreen;
}

.navbar {
  background-color: lightblue;
  position: fixed;
  z-index: 1000000;
  top: 0;
  left: 0;
  right: 0;
  box-shadow: 0 5px 5px 0 grey;
}

.navbar .navbar-item {
  min-height: 40px;
  line-height: 40px;
  min-width: 90px;
  padding: 5px;
  margin-left: 10px;
  cursor: pointer;
  text-align: center;
  font-size: 1.2em;
}

.navbar .item-selected {
  background-color: #9ec4d0;
}

.fab {
  line-height: 80px;
  width: 80px;
  font-family: Optima;
  height: 80px;
  border: 1px solid black;
  text-align: center;
  z-index: 1000000;
  cursor: pointer;
  font-weight: 500;
  box-shadow: 0 5px 5px 0 grey;
  font-size: 1.5em;
  border-radius: 40px;
  background: lightblue;
}

textarea {
  font-family: Optima;
  font-weight: 500;
  padding: 12px;
  min-height: 100px;
  font-size: 1.2rem;
  border-radius: 0px;
  border: none;
  cursor: pointer;
}

input.search-input {
  height: 50px;
  flex: 1;
  cursor: pointer;
  font-size: 1.2rem;
  border: none;
  border-radius: 0px;
  padding: 2px 8px;
}

input::placeholder {
  font-style: italic;
}

input:focus.search-input {
  outline: 1px solid #2684ff !important;
  box-shadow: 0 0 0 1px;
}

.input-label {
  font-style: italic;
  color: gray;
  padding-left: 10px;
  height: 25px;
  position: relative;
  top: 30px;
}

.chart-container {
  flex: 1;
}

.chart {
  min-width: 100%;
  max-width: 100%;
  height: auto;
}

.vega-embed {
  border: 1px solid black;
}

.margin {
  margin: 10px;
}

.h-margin {
  margin-left: 10px;
  margin-right: 10px;
}

.v-margin {
  margin-top: 10px;
  margin-bottom: 10px;
}

.l-margin {
  margin-left: 10px;
}

.r-margin {
  margin-right: 10px;
}

.t-margin {
  margin-top: 10px;
}

.b-margin {
  margin-bottom: 10px;
}

.padded {
  padding: 10px;
}

.gapped {
  gap: 10px;
}

.row-gap {
  row-gap: 10px;
}

.col-gap {
  column-gap: 10px;
}

.bordered {
  border: 1px solid black;
}

.h-padded {
  padding-left: 10px;
  padding-right: 10px;
}

.v-padded {
  padding-top: 10px;
  padding-bottom: 10px;
}

.section {
  margin: 30px 10px 20px 10px;
  padding: 20px;
  border-radius: 5px;
  border: 3px solid black;
  background-color: white;
}

.header {
  font-size: 2rem;
  padding-bottom: 10px;
  color: black;
}

.subheader {
  font-size: 1.5rem;
}

.table-cell {
  min-width: 160px;
  padding-bottom: 6px;
  max-width: 160px;
  justify-content: center;
  border: 1px solid black;
  align-items: center;
  white-space: nowrap;
  flex-grow: 1;
  font-size: 16px;
  display: flex;
  flex: 1;
  padding-top: 6px;
}

.table-header-row {
  font-size: 16px;
  font-weight: bold;
}

.template-input {
  display: flex;
  flex: 1;
  min-width: 300px;
}

.error {
  font-size: 16px;
  color: red;
  margin-top: -8px;
  margin-left: 40px;
}

.iframe {
  flex-grow: 1;
  border: none;
  padding: 0;
  margin: 0;
}