.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;

    &__container {
      display: flex;
      align-items: flex-start;
      justify-content: center;
      flex-wrap: wrap;
      margin: 20px 0 60px;
    }

    &__shortcut {
      display: flex;
      flex-direction: column;
      margin-left: 37px;

      button {
        width: 46px;
        height: 46px;
        line-height: 46px;
        border-radius: 50%;
        margin: 2px;
        font-size: 16px;
        font-weight: 300;
        text-align: center;
        color: $white;
        border: 1px solid rgba($black, .2);
      }
    }

    &__waterteam {
      background: #359AE8;
    }

    &__fireteam {
      background: #F54A48;
    }

    &__earthteam {
      background: #4EBF41;
    }

    &__row {
      display: flex;
      align-items: flex-start;
      justify-content: center;
      flex-wrap: wrap;
      width: 100%;
      margin-top: 20px;
    }

    &__clear {
      padding: 8px 32px;
      border-radius: 16px;
      background: rgba($black, .2);
      border: 1px solid rgba($black, .2);
    }

    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;
  }
}