body {
  font-family: sans-serif;
  margin: 20px;
  background-color: #1a1a1a;
  color: #e0e0e0;
}
.table-container {
  overflow-x: auto;
  margin-top: 20px;
  position: relative;
}
table {
  border: 0;
  border-collapse: collapse;
  width: 100%;
}
th,
td {
  border: 3px solid #333;
  padding: 4px;
  text-align: center;
  font-size: 12px;
  color: #1a1a1a;
}
th:first-child,
td:first-child {
  position: sticky;
  left: 0;
  background-color: #1a1a1a;
  z-index: 1;
}
.cell-0 {
  background-color: #1a1a1a;
}
.cell-1 {
  background-color: #56B4E9;
}
.cell-2 {
  background-color: #009E73;
}
.cell-3 {
  background-color: #F0E442;
}
.cell-4 {
  background-color: #D55E00;
}
.cell-5 {
  background-color: #CC79A7;
}
.hits {
  /* background-clip: content-box; */
  font-weight: bold;
}
.unit-name {
  font-weight: bold;
  white-space: nowrap;
  color: #e0e0e0;
}
.level-form {
  display: block;
  gap: 20px;
  margin-bottom: 20px;
  padding: 10px 20px 20px;
  background-color: #2d2d2d;
  border-radius: 8px;

  input {
    font-weight: bold;
  }

  input:invalid {
    border-color: #ff4444;
    background-color: #ffeeee;
  }

  ::placeholder {
    color: #999;
    opacity: 1;
    font-style: italic;
  }

  fieldset {
    background-color: #1a1a1a;
    display: inline;
    margin-top: 10px;

    legend {
      font-weight: bold;
    }

    label {
      display: block;
      margin-bottom: 5px;
      margin-top: 5px;
      color: #e0e0e0;
    }
  }
}

/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}