main {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  padding: 1em;
  -webkit-box-align: center;
          align-items: center;
}

.table-wrapper {
  overflow: auto;
  max-width: 100%;
  background: -webkit-gradient(linear, left top, right top, color-stop(30%, white), to(rgba(255, 255, 255, 0))), -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(70%, white)) 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: 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;
}

tr {
  border-bottom: 1px solid;
}

th {
  background-color: #555;
  color: #fff;
}

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

.hidden {
  display: none;
}

button {
  font-size: inherit;
  margin: 0 0.25em;
  padding: 0.25em 0.5em;
  background-color: #555;
  color: #fff;
  border: 0;
  -webkit-transition: background-color 0.4s, color 0.4s;
  transition: background-color 0.4s, color 0.4s;
}
button:hover {
  background-color: #bbb;
  color: #000;
}

.pagination {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  margin-bottom: 1em;
  flex-wrap: wrap;
}

.page-numbers {
  margin: 1em 1em 0;
}

.page-number {
  padding: 0.5em;
  opacity: 0.5;
  cursor: pointer;
}

.active {
  opacity: 1;
}

@media screen and (min-width: 540px) {
  .backward {
    -webkit-box-ordinal-group: 2;
            order: 1;
  }

  .page-numbers {
    -webkit-box-ordinal-group: 3;
            order: 2;
    margin-top: 0;
  }

  .forward {
    -webkit-box-ordinal-group: 4;
            order: 3;
  }
}