body {
  font-family: sans-serif, Arial;
  background-color: #1f1f1f;
  color: #f0f0f0;
}

.vertical-scroll {
  height: 100%;
  overflow-y: auto;
}

h1 {
  color: #a0c0a0;
  margin-bottom: 0px;
  margin-top: 5px;
  margin-right: 20px;
  white-space: nowrap;
}

h2, h3, h4 {
  color: #a0c0a0;
  margin-top: 30;
  margin-bottom: 10px;
}

table {
  border-spacing: 0px;
  border: 1px;
}

.table-container {
  padding: 8px;
  overflow-x: auto;
}

.column-container {
  display: flex;
  align-items: center;
  flex-direction: column;
  flex-wrap: wrap;
}

.column {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.title {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 10px;
  padding-top: 20px;
  flex-wrap: wrap;
}

img  {
  padding-top: 8px;
}

th, td {
  border: 1px solid #000000;
  padding: 8px;
  text-align: left;
  text-align: center;
}

tr:nth-child(even) {
  background-color: #565656;
}

tr:nth-child(odd) {
  background-color: #606060;
}

th {
  background-color: #309050;
}

td {
  font-size: large;
}

.warning {
  border: 3px solid #e0e010 !important;
  background-color: #050505 !important;
  color: #e03020 !important;
  border-radius: 6px;
}

input {
  background-color: #b0b0b0;
  color: #000000;
  border-radius: 6px;
  padding: 2px;
  font-size: large;
  width: 130px;
}

.output {
  background-color: #808080;
}

select {
  background-color: #b0b0b0;
  color: #000000;
  border-radius: 6px;
  padding: 2px;
  font-size: large;
  width: 130px;
}

.num-input {
  width: 90px;
}

button {
  background-color: #2e5f40;
  color: #f0f0f0;
  border-radius: 6px;
  padding: 5px;
  height: 35px;
  padding-inline: 8px;
}

.buttons, .logo-row {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: center;
}

.buttons {
  padding-top: 8px;
  visibility: hidden;
}

.focused {
  background-color: #2e9f50;
  color: #f0f0f0;
}

*:disabled,
*[disabled] {
  color: #252525 !important;
  background-color: #606060 !important;
}

.top-ui {
  display: flex;
}
.top-column {
  padding: 2px;
  padding-right: 20px;
}

footer {
  display: flex;
  justify-content: space-around;
  padding: 20px;
  padding-top: 0px;
  font-size: 14px;
}
.footer-column {
  width: 30%;
  justify-content: center;
  text-align: center;
}

.footer-title {
  color: #608060;
  margin-bottom: 0px;
}

.footer-text {
  color: #606060;
}

@media (max-width: 630px) {
  .footer, .column {
      flex-direction: column;
      text-align: center;
      align-items: center;
  }
  .footer-column {
      margin-bottom: 10px;
      width: auto;
  }
  .buttons {
    visibility: visible;
  }
  .top-ui {
      flex-direction: column;
  }
  .top-column {
      margin-bottom: 10px;
      width: auto;
  }
  .title {
    padding-bottom: 0px;
    padding-top: 0px;
  }
  .h1 {
    margin-right: 8px;
  }
}

.tooltip-trigger {
  border-bottom: 1px dotted #ffffff;
  width: max-content;
}

.tooltip {
  position: relative;
  display: inline-block;
  justify-content: center;
}

.tooltip .tooltiptext {
  visibility: hidden;
  background-color: #233f27;
  color: #fff;
  text-align: left;
  border-radius: 6px;
  padding: 5px;
  position: relative;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

.red {
  background-color: #782818 !important;
}

.yellow {
  background-color: #787818 !important;
}

.green {
  background-color: #408d83 !important;
}

.dark-green {
  background-color: #1b4d46 !important;
}

.blue {
  background-color: #20407b !important;
}



.light-blue {
  background-color: #5272ad !important;
}

.medium-blue {
  background-color: #34548f !important;
}



.white-blue {
  background-color: #74a1cf !important;
}

.gray {
  background-color: #707898 !important;
}

.dark-gray {
  background-color: #2f2f2f !important;
}