.table-tabs {
  font-size: 0px;
}

.table-tabs .tab + label {
  font-size: 1.88rem;
}

input.tab {
  display: none;
}
input#mobile-tab {
  display: inline;
  cursor: pointer;
  width: 4rem;
  height: 4rem;
  margin-top: 1rem;
  position: absolute;
  opacity: 0;
  z-index: 2;
  } @media (min-width: 670px) {
    input#mobile-tab {
      display: none;
  } }

input#mobile-tab:checked ~ label {
  display: block;
  background-color: white;
  padding: 2rem inherit;
  } @media (min-width: 670px) {
    input#mobile-tab:checked ~ label {
      display: inline-block;
    } }

input#mobile-tab:checked ~ label::after
{
  content: '>';
  text-align: right;
  float: right;
}

.table-tabs span.mobiletab {
  display: inline-flex;
  background-color: #6D6E71;
  width: 4px;
  height: 4px;
  margin-bottom: 0.5rem;
  margin-left: 0.25rem;
  margin-right: 0.5rem;
  border-radius:  0.3rem;
  z-index: 1;
  } @media (min-width: 670px) {
    .table-tabs span.mobiletab {
      display: none;
    } }

input#mobile-tab:checked ~ span {
  display: none;
}

.tab + label {
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
  text-align: center;
  padding: 1.5rem;
  border-right: solid thin #6D6E71;
  border-bottom: solid thin #6D6E71;
  background-color: #DDDDDD;
  } @media (max-width: 670px) {
    .tab + label {
      display: none;
      border-right: none;
    } }

.tab:last-of-type + label {
  border-right: none;
}

.tab:checked + label {
  font-weight: bold;
  border-bottom: none;
  background-color: transparent;
  } @media (max-width: 670px) {
    .tab:checked + label {
      border-left: solid thin #6D6E71;
      display: inline-block;
      margin-left: 1rem;
    } }

.table-tabs-content {
  font-size: 1.88rem;
  background-color: transparent;
  position: absolute;
  width: 100%;
  opacity: 0;
  display: none;
}
.tab:checked:nth-of-type(2) ~ .table-tabs-content:nth-of-type(1),
.tab:checked:nth-of-type(3) ~ .table-tabs-content:nth-of-type(2),
.tab:checked:nth-of-type(4) ~ .table-tabs-content:nth-of-type(3),
.tab:checked:nth-of-type(5) ~ .table-tabs-content:nth-of-type(4),
.tab:checked:nth-of-type(6) ~ .table-tabs-content:nth-of-type(5),
.tab:checked:nth-of-type(7) ~ .table-tabs-content:nth-of-type(6),
.tab:checked:nth-of-type(8) ~ .table-tabs-content:nth-of-type(7),
.tab:checked:nth-of-type(9) ~ .table-tabs-content:nth-of-type(8),
.tab:checked:nth-of-type(10) ~ .table-tabs-content:nth-of-type(9),
.tab:checked:nth-of-type(11) ~ .table-tabs-content:nth-of-type(10) {
  opacity: 1;
  position: relative;
  left: 0;
  z-index: 50;
  display: block;
}
