.activity-feed {
  margin-top: $pad-large;
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 592px;

  &__header-wrap {
    .form-field {
      margin-bottom: 0;
    }
  }

  &__block {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-bottom: $pad-large;

    .avatar-wrapper {
      position: relative;
    }
  }

  &__block:before {
    content: "";
    position: relative;
    height: 50px !important;
    z-index: 0;
    top: 35px;
    left: 17px;
    border-left: 1px dashed $ui-fleet-blue-15;
    height: 100%;
  }
  &__block:last-child:before {
    border-left: 0;
  }

  &__avatar-frame {
    display: flex;
    width: 32px;
    height: 32px;
  }

  &__avatar-image {
    z-index: 2;
  }

  &__details {
    padding-left: $pad-large;

    p {
      margin: 0;
    }
  }

  &__details-topline {
    font-size: $x-small;
  }

  &__details-bottomline {
    font-size: $xx-small;
    color: $ui-fleet-black-25;
  }

  &__pagination {
    position: absolute;
    bottom: 0px;
    right: 0px;
  }

  &__load-activities-button {
    color: $core-vibrant-blue;
    height: 20px;
    vertical-align: bottom;

    .fleeticon-chevronleft,
    .fleeticon-chevronright {
      &:before {
        font-size: 0.5rem;
        font-weight: $bold;
        position: relative;
        top: -2px;
      }
    }

    .fleeticon-chevronleft {
      margin-right: $pad-small;
    }

    .fleeticon-chevronright {
      margin-left: $pad-small;
    }

    &:first-of-type {
      margin-right: $pad-large;
    }
  }

  &__no-more-activities {
    text-align: center;
  }

  &__no-activities {
    font-size: $x-small;
    p {
      margin-top: 0;
    }
  }

  &__error {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: $pad-xlarge 0;

    #error-icon {
      height: 12px;
      width: 12px;
      margin-right: 8px;
    }

    #new-tab-icon {
      height: 12px;
      width: 12px;
      margin-left: 6px;
    }

    a {
      font-size: $x-small;
      color: $core-vibrant-blue;
      font-weight: $bold;
      text-decoration: none;
    }

    &__inner {
      display: flex;
      flex-direction: row;
    }

    .info {
      &__header {
        display: block;
        color: $core-fleet-black;
        font-weight: $bold;
        font-size: $x-small;
        text-align: left;
      }
      &__data {
        display: block;
        color: $core-fleet-black;
        font-weight: normal;
        font-size: $x-small;
        text-align: left;
        margin-top: 10px;
      }
    }
  }

  .spinner {
    z-index: 11;
    opacity: 1;
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .loading-spinner {
      margin-top: 33px;
    }
  }
}
