input.table-filter { margin: 0 auto; display: block; height: 30px; width: 20%; }
table.sp-table {
  margin: 10px auto;
  border-spacing: 0.2rem;
  font-size: 14px;
  font-family: sans-serif;
}
table.sp-table thead {
  background: #272c35;
  color: white;
  position: relative;
  cursor: pointer;
}
table.sp-table thead th {
  padding: 20px;
}
table.sp-table thead th span {
  padding-left: 2px;
  font-size: 0.8em;
  font-style: italic;
  color: #969696;
}
table.sp-table tr:nth-child(even) td {
  background: rgba(10, 96, 126, 0.2);
}
table.sp-table tr:nth-child(odd) td {
  background: rgba(106, 138, 167, 0.1);
}
table.sp-table tr td {
  text-align: left;
  padding: 20px;
}
table.sp-table tfoot {
  background: #E6E6E6;
  color: #333;
}
table.sp-table tfoot ul.navigation {
  list-style-type: none;
  float: right;
}
table.sp-table tfoot ul.navigation .text {
  font-size: 0.8em;
  font-style: italic;
  margin-right: 5px;
}
table.sp-table tfoot ul.navigation .button {
  webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-size: 0.8em;
  color: white;
  border-radius: 2px;
  padding: 3px;
  text-decoration: none;
}
table.sp-table tfoot ul.navigation .disabled {
  color: black;
  pointer-events: none;
  cursor: default;
}
table.sp-table tfoot ul.navigation select {
  padding: 1px;
}
table.sp-table tfoot ul.navigation li {
  display: inline;
}
table.sp-table tfoot ul.navigation li span {
  font-style: italic;
  font-size: 0.8em;
}
@media only screen and (max-width: 65.5em) {
  table.sp-table { font-size: 12px; }
  table.sp-table thead th { padding: 20px 0; }
  table.sp-table tr td { text-align: center; padding: 20px 2px; }
}
@media only screen and (max-width: 35.5em) {
  input.table-filter { width: 40%; }
  table.sp-table { font-size: 8px; }
  table.sp-table thead th { padding: 10px 0; }
  table.sp-table tr td { padding: 10px 2px; }
}