.directory {
  margin-bottom: 100px;

  .user-info {
    margin-bottom: 0;
  }

  .period-chooser {
    float: left;
  }
  .filter-name {
    float: right;
  }
  .total-rows {
    color: $primary-medium;
    text-align: right;
  }
  .spinner {
    clear: both;
  }

  table {
    width: 100%;
    margin-bottom: 1em;

    td,
    th {
      padding: 0.5em;
      text-align: left;
      border-bottom: 1px solid $primary-low;
      @media screen and (max-width: $small-width) {
        padding: 0.5em 0.25em;
      }

      .number,
      .time-read {
        font-size: $font-up-3;
        color: $primary-medium;
        @media screen and (max-width: $small-width) {
          font-size: $font-up-1;
        }
      }
      .time-read {
        white-space: nowrap;
      }
    }

    th.sortable {
      width: 13%;
      .d-icon-heart {
        color: $love;
        margin: 0 0.25em 0 0;
      }
    }
  }
  .me {
    background-color: dark-light-choose($highlight-low, $highlight-medium);
    .username a,
    .name,
    .title,
    .number,
    .time-read {
      color: $primary-medium;
    }
  }
}