$timelineColor: rgb(33,168,244);

:host {
  flex: 1;
}

:host .container app-box {
  margin: 0.5rem;
}
// make up for left, right and top margin on outer boxes
:host .row-layout {
  margin: -0.5rem;
  margin-bottom: 1rem;
}


md-card-title {
  display: flex;
  font-size: 20px;
  align-items: center;
}

.timeline {
  border-top: 2px solid $timelineColor;
  display: flex;
  justify-content: space-around;
  flex-direction: row;


  .timeline-item {
    position: relative;
    padding-top: 0.3em;
    font-size: 14px;

    $markerRadius: 3px;

    .marker {
      position: absolute;
      top: -$markerRadius - 1px;
      width: $markerRadius*2;
      height: $markerRadius*2;
      border-radius: 100%;
      display: block;
      margin: 0 auto;
      background: $timelineColor;
    }

    .title {
      font-weight: bold;
    }

    .subtitle {

    }
  }
}