.loadingbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 8px;
  background: #3a86ff;
}

.toe {
  &__filters {
    display: flex;
    justify-content: center;
    align-items: center;

    span {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .2px;
      display: block;
      padding: 3px 12px;
      line-height: 20px;
      margin: 0 5px;
      box-shadow: 0 0 0 1px #eee;
      user-select: none;

      &:hover {
        box-shadow: 0 0 0 1px #333;
      }
    }

    input {
      display: none;

      &:checked + span {
        box-shadow: 0 0 0 2px #3a86ff;
      }
    }
  }

  .titans {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 200px;
    margin: 20px auto 60px;

    li {
      flex: 0 0 25%;
      width: 25%;
      max-width: 25%;
    }

    img {
      opacity: .5;
      max-width: 46px;
      margin: 2px;
    }

    input {
      display: none;

      &:checked + img {
        opacity: 1;
      }
    }
  }

  table {
    width: 700px;
    margin: 0 auto;

    tfoot {
      td {
        font-weight: bold;
        padding: 40px 0 20px;
      }
    }

    thead {
      font-weight: 600;
      color: #261CD1;

      th {
        padding-bottom: 20px;
        font-weight: 600;
      }
    }

    td {
      padding: 5px 10px;
      text-align: center;
      vertical-align: middle;
      border: solid $white;
      border-width: 2px 0;
    }

    .missed td:first-child {
      border-left: 8px solid #ffadad;
    }
  }

  img {
    max-width: 32px;
    background: black;
    border-radius: 50%;
    vertical-align: middle;
    margin: 1px;
    border: 1px solid #666;
  }
}