.af-header {}
.af-item {
  height: calc(450px/8);
  border-left: 1px solid #d2ced0;
  margin-left: 15px;
  &:last-child, &.af-fade {
    opacity: 0.5;
  }
  &:first-child {
    @extend .pos-rel;
    &:before {
      content: '';
      left: -1px;
      width: 1px;
      height: 10px;
      @extend .pos-abs;
      background: white;
    }
  }
}
.af-type {
  margin-left: -15px;
}
.af-empty-state {
  width: 100%;
  top: 35px;
  h2, h5 {
    padding: 0 5px;
    background: rgba(247, 247, 247, 0.8)
  }
  h5 {
    line-height: 1.4;
  }
  button {
    min-height: 40px;
    min-width: 220px;
    border-radius: 25px;
  }
  img {
    height: 77px;
    width: 77px;
  }
}
.af-info {
  padding: .8em;
}
.af-date {
  white-space: nowrap;
  text-overflow: ellipsis;
}
.af-marker {
  position: relative;
  right: 26px;
  top: 0px;
  color: #004a7c;
  i {
    width: 30px;
    height: 30px;
    border-radius: 100%;
    background-color: white;
    border: 1px solid #d2ced0;
    @extend .flex-center;
    @extend .flex-justify;
  }
  &:after {
    content: '';
  }
}
.af-log {
  max-width: 210px;
  overflow-x: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@media (min-width: 992px) and (max-width: 1175px) {
  .af-date { display: none; }
}

@media (max-width: 620px) {
  .af-log span { display: none; }
}
