@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400&family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap');

.weight-balance {
  margin-bottom: 1.25rem;
  color: #f5f9fd;
  font-family: 'Roboto', 'sans-serif';
}

.weight-balance .total td,
.weight-balance .total input,
.weight-balance .total th {
  font-weight: bold;
}

.weight-balance th.top {
  text-align: center;
  padding: 0.25em;
  font-size: 0.75em;
}

.weight-balance th {
  text-align: right;
  padding: 0.25em;
  font-weight: normal;
}

.weight-balance input[type='text'],
.weight-balance input[type='number'] {
  width: 70px;
  text-align: right;
  color: #000000;
  padding: 5px;
  border: 2px solid #0d243c;
}

.weight-balance input[type='number']::-webkit-inner-spin-button,
.weight-balance input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.weight-balance .readonly input {
  background-color: #0d243c;
  color: #aebcca;
}

.graph {
  background-color: #f5f9fd;
  margin: 1em 0 0 0;
}

.axisLabels {
  color: #000;
}

.red {
  color: #db0000;
}

.credits {
  opacity: 0.7;
  font-size: 70%;
  color: #f5f9fd;
  font-family: 'Roboto', 'sans-serif';
}

.credits a {
  font-weight: bold;
  text-decoration: none;
  color: #f5f9fd;
}

.credits a:hover,
.credits a:focus,
.credits a:target {
  color: #eb9500;
}

.notice {
  color: #f5f9fd;
  font-family: 'Roboto', 'sans-serif';
  border: hsl(209, 61%, 19%) 1px solid;
  border-radius: 0.25rem;
  background: hsl(220, 90%, 36%);
  margin-bottom: 1.25rem;
  padding: 0.75rem 0.75rem 0;
}