.directory {
  margin-bottom: 100px;

  .period-chooser {
    float: left;
  }
  .filter-name {
    float: right;
  }
  .total-rows {
    color: dark-light-diff($primary, $secondary, 50%, -50%);
    text-align: right;
  }
  .spinner {
    clear: both;
  }

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

    td, th {
      padding: 0.5em;
      text-align: left;
      border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);

      .number, .time-read {
        font-size: 1.4em;
        color: dark-light-diff($primary, $secondary, 50%, -50%);
      }
    }

    tr.me {
      td {
        background-color: dark-light-diff($highlight, $secondary, 70%, -80%);

        .username a, .name, .title, .number, .time-read {
          color: scale-color($highlight, $lightness: -50%);
        }
      }
    }

    th.sortable {
      cursor: pointer;
      white-space: nowrap;

      width: 13%;
      i.fa-heart {
        margin-right: 0.5em;
      }
      i.fa-chevron-down, i.fa-chevron-up {
        margin-left: 0.5em;
      }

      &:hover {
        background-color: dark-light-diff($primary, $secondary, 90%, -60%);
      }
    }
  }
}