.timeline {
  position: relative;
  font-size: rem-calc(14);
  color: $color-pale-sky;

  &:before {
    content: '';
    width: rem-calc(1);
    position: absolute;
    border-left: rem-calc(2) solid $color-gray-chateau;
    left: rem-calc(22);
    top: rem-calc(11);
    bottom: rem-calc(11);

    @include breakpoint(md) {
      left: rem-calc(170.4);
    }
  }

  @include breakpoint(md) {
    &.account-history {
      &:before {
        bottom: rem-calc(43);
      }
    }
  }

  > li {
    margin: rem-calc(20);

    &.box {
      padding: 0;
      border: 0;
    }

    &:first-child {
      .meta {
        &:after {
          width: 8px;
          height: 8px;
          background-color: $color-cerulean;
          border: 1px solid $color-catskill-white;
          left: -1px;

          @include breakpoint(md) {
            right: -5px;
            left: auto;
          }
        }
      }
    }
  }

  .notification-left {
    display: none;
  }

  .notification-content {
    flex-direction: column-reverse;
    align-items: flex-start;
    text-align: left;

    @include breakpoint(md) {
      flex-direction: row;
      align-items: center;
      text-align: left;
    }

    .meta {
      padding-left: rem-calc(20);
      width: rem-calc(150);
      word-break: break-word;
      position: relative;
      //flex: 0 0 rem-calc(100);

      @include breakpoint(md) {
        flex: 0 0 rem-calc(150);
        padding-right: rem-calc(20);
        padding-left: 0;
      }

      &:after {
        content: '';
        width: 6px;
        height: 6px;
        border-radius: 50%;
        position: absolute;
        background: $color-gray-chateau;
        left: 0;
        top: 50%;
        transform: translateY(-50%);

        @include breakpoint(md) {
          right: -4px;
          left: auto;
        }
      }
    }

    .next-to {
      padding-left: rem-calc(20);
      @extend .align-left;
      line-height: rem-calc(20);
      margin: 0;
      font-size: rem-calc(14);
      color: $color-pale-sky;

      a {
        color: $color-lochmara;
      }
    }

    button {
      //@extend .btn-narrow;
      //@extend .btn-white;
      margin-left: rem-calc(20);
    }
  }
}

.comment-history {
  border: 1px solid $color-french-pass;
  background: $color-pattens-blue;
  border-radius: rem-calc(5);
  width: 100%;
  display: block;
  margin-left: 1.25rem;
  text-align: left;
  padding: rem-calc(5) rem-calc(10) rem-calc(6);

  span {
    display: inline-block;
    float: left;
    font-weight: 600;
    font-size: $font-size-x-small;
    color: $color-outer-space;
    padding-left: rem-calc(10);
    margin-bottom: 2px;
    margin-top: 10px;
  }

  .show-content {
    display: inline-block;
    float: left;
    font-size: $font-size-xx-small;
    color: $color-lochmara;
    padding-left: rem-calc(10);
  }

  textarea {
    text-align: left;
    margin: 0;
    padding: rem-calc(9) rem-calc(10);
    padding-right: rem-calc(60);
    line-height: rem-calc(18);
    font-size: $font-size-xx-small;
    color: $color-pale-sky;
    overflow: hidden;

    &[readonly] {
      background: transparent;
      border: none;
      cursor: default;
      padding-right: 0;
    }

    &.max-height {
      max-height: rem-calc(84);
    }
  }

  .comments {
    padding: 0;
    textarea + .save-note {
      bottom: 8px;
    }
    .dropdown {
      float: right;
      .btn {
        background: transparent;
        border: transparent;
        line-height: 10px;
        i {
          color: $color-gray-chateau;
        }
      }
      .dropdown-menu {
        padding: 5px;
      }
    }
    button {
      right: 2px;
    }
  }
  p {
    background: transparent;
    border: none;
  }
}