// Timeline

.timeline--container,
.group--info {
  & > .row {
    display: table;

    & > [class*="col-"] {
      float: none;
      display: table-cell;
      vertical-align: top;
    }
  }
}

.timeline--container {
  padding-left: 50px;
}

.timeline--content {
  margin: 30px 15px;
  padding: 0;
  list-style: none;
  position: relative;

  &:before {
    content: '';
    position: absolute;
    top: -20px;
    bottom: -20px;
    width: 5px;
    background: @black-10;
    left: 70px;
    margin-left: -10px;
  }

  & > li {
    position: relative;
    margin-bottom: 20px;

    .timeline--event {
      display: block;
      width: 40px;
      text-align: right;
      line-height: 9px;
      font-family: @font-family-Roboto;
      color: @black-50;
      padding-top: 3px;
      font-size: .9em;

      span.timeline--ampm {
        font-size: .7em;
      }
    }

    .timeline--eventLabel {
      margin: -32px 0 0 90px;
      padding: 10px;
      position: relative;
      border: 1px solid @grey-50;
      border-radius: 4px;
      background-color: @white;

      p {
        font-size: 0.8em;
        margin-bottom: 0px;
        margin-top: 5px;
        color: @grey-75;
      }

      &:after {
        right: calc(~"100% + 1px");
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
        border-right-color: @grey-50;
        border-width: 7px;
        top: 12px;
      }
    }

    .timeline--eventLabelTitle {
      border-bottom: 1px solid @grey-50;
      margin: 0px;  
      margin-bottom: 10px;
      font-size: 0.8em;
      padding: 0px;
      padding-bottom: 5px;

      span.subtitle {
        font-size: 14px;
        text-transform: uppercase;
        font-weight: 300;
        font-family: @font-family-Roboto-Light;
        padding-right: 2px;
        color: @grey-75;
      }

      & > div:last-child {
        text-align: right;
      }
    }

    .timeline--icon {
      position: absolute;
      color: @i-dark-blue;
      box-shadow: 0 0 0 2px @i-dark-blue;  
      background: @i-lite-blue;
      border-radius: 55%;
      text-align: center;
      left: 50px;
      top: 0px;
      width: 25px;
      height: 25px;
      line-height: 25px;
      font-size: 0.80em;
    }

    &.error .timeline--icon {
      color: @i-dark-red;
      box-shadow: 0 0 0 2px @i-dark-red;  
      background: @i-lite-red;
    }

    &.success .timeline--icon {
      color: @i-dark-green;
      box-shadow: 0 0 0 2px @i-dark-green;  
      background: @i-lite-green;
    }

    &.warning .timeline--icon {
      color: @i-dark-yellow;
      box-shadow: 0 0 0 2px @i-dark-yellow;  
      background: @i-lite-yellow;
    }
  }
}

.timeline--events {
  width: calc(~"100% - 40px");
  margin: 20px;
  padding: 0px;
  height: 190px;
  overflow-y: scroll;
  display: block;
  white-space: nowrap;
  padding-top: 30px;
  border: 1px solid #eee;

  & > li {
    // display: inline-block;
    padding: 0px 15px;
    position: relative;
    height: 45px;
    list-style-type: none;

    .event--date {
      position: relative;
      top: 0px;
      width: auto;
      text-align: left;

      span {
        padding-right: 15px;
        font-size: 1.1em;
      }
    }

    &:nth-child(odd) {
      background-color: @lite-white;
    }

    &:nth-child(even) {
      background-color: @lite-grey;
    }

    & > div {
      display: inline-block;
      padding-right: 20px;
      // vertical-align: middle;
      line-height: 42px;

      p {
        font-size: 0.8em;
      }

      &:first-child {
        width: 160px;
      }

      &:nth-child(2) {
        width: 105px;
      }
    }

    &.timeline--eventsTitle {
      width: calc(~"100% - 42px");
      font-size: 14px;
      text-transform: uppercase;
      font-weight: 300;
      font-family: @font-family-Roboto-Light;
      color: @grey-75;
      background-color: @white;
      position: absolute;
      top: 21px;
      left: 21px;
      z-index: 10;
      height: 30px;

      & > div {
        line-height: 30px;
      }
    }
  }
}

