main {
  display: flex;
  flex-direction: column;
  padding: 1em;
  align-items: center;
}

.results-wrapper {
  overflow: auto;
  max-width: 100%;
  background: linear-gradient(to right, white 30%, rgba(255, 255, 255, 0)),
    linear-gradient(to right, rgba(255, 255, 255, 0), white 70%) 0 100%,
    radial-gradient(
      farthest-side at 0% 50%,
      rgba(0, 0, 0, 0.2),
      rgba(0, 0, 0, 0)
    ),
    radial-gradient(
        farthest-side at 100% 50%,
        rgba(0, 0, 0, 0.2),
        rgba(0, 0, 0, 0)
      )
      0 100%;
  background-repeat: no-repeat;
  background-color: white;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-position: 0 0, 100%, 0 0, 100%;
  background-attachment: local, local, scroll, scroll;
}

.results-wrapper tr:nth-child(even) {background-color: #e8e8e8;}

tr {
  border-bottom: 1px solid;
}

th {
  background-color: #555;
  color: #fff;
  white-space: nowrap;
  cursor: pointer;
}


th,
td {
  text-align: left;
  padding: 0.5em 1em;
}

.active {
  font-style: italic;
}

.asc::after {
  font-style: normal;
  content: "\25B4";
  margin-left: 0.5em;
}

.desc::after {
  font-style: normal;
  content: "\25BE";
  margin-left: 0.5em;
}