table {
  border-collapse: collapse;
  text-align: center;
  width: 100%;
  word-break: break-word;

  td,
  th {
    border: 1.2pt solid black;
  }
}

#attempts-table-container {
  position: relative;

  #leaderboard-empty {
    display: none;
  }

  &:not(:has(.row.visible)) {
    #leaderboard-empty {
      display: block;
    }
    #attempts-table,
    #attempts-table-delete {
      display: none;
    }
  }

  #attempts-table-delete {
    top: -0.75rem;
    right: -0.75rem;
  }

  /* if hover is available */
  @media not all and (hover: none) {
    &:not(:hover) .bx {
      display: none;
    }
  }

  #attempts-table {
    white-space: nowrap;

    td:is(.user, .timestamp) {
      cursor: pointer;
      color: blue;

      &:hover {
        text-decoration: underline;
      }
    }

    @media (width < 700px) {
      :has(.modules.visible) {
        .result .percentage {
          display: none;
        }
      }
    }
    @media (width < 600px) {
      :has(.modules.visible) {
        .duration {
          display: none;
        }
      }
    }
    @media (width < 500px) {
      .result .percentage {
        display: none;
      }
    }
    @media (width < 400px) {
      .modules,
      .duration {
        display: none;
      }

      .result .percentage {
        display: initial;
      }
    }
  }
}