Стилизация горизонтальной временной шкалы

Question

Я пытаюсь создать временную шкалу, привязанную к дате начала и дате окончания.В пределах этой временной шкалы есть x количество вех, представленных значком в круге.Я хотел бы, чтобы линия другого цвета представляла сегодня на этой временной шкале, но не могу заставить ее правильно перекрывать временную линию.Строка, представляющая сегодня, находится ниже временной шкалы, где я хочу, чтобы она была поверх этой линии с некоторой анимацией.Мой код ниже, и это то, что я получаю до сих пор:

.show.ng-hide,
.hide.ng-hide {
  animation-name: fadeOut;
  animation-duration: .5s;
}

.show {
  animation-name: fadeIn;
  animation-duration: .5s;
}

#timeline-wrap {
  margin: 20% 0;
  top: 100;
  position: relative;
}

#timeline {
  height: 6px;
  width: 100%;
  background-color: $color-light;
  position: relative;
}

#today_width {
  height: 6px;
  background-color: blue;
  position: relative;
}

.marker {
  z-index: 1000;
  color: #fff;
  height: 50px;
  width: 50px;
  text-align: center;
  position: absolute;
  margin-left: -25px;
  border: 2px solid black;
  background-color: white;
  border-radius: 50%;
  top: -25px;
}

.marker i {
  font-size: 1.4em;
  line-height: 48px;
}

.marker:hover {
  -moz-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  -o-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
  -webkit-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  transition: all 300ms ease;
}

.mlast {
  left: 100%
}

.timeline-panel {
  margin-top: 20%;
  min-width: 200px;
  border: 1px solid black;
  border-radius: 2px;
  position: relative;
  text-align: left;
  padding: 10px;
  float: left;
  color: black;
}

.timeline-panel:after {
  content: '';
  position: absolute;
  top: -27px;
  width: 0;
  height: 0;
  border: 12px solid transparent;
  border-bottom: 15px solid;
}

<div id="timeline-wrap">
  <div id="timeline"></div>
  <div id="today_width" style="width:{{c.data.today_width}}"></div>

  <div class="marker timeline-icon" ng-if="c.data.rpm_case.performance_cycle_start" data-toggle="tooltip" data-placement="top" title="{{c.data.rpm_case.performance_cycle_start | date:fullDate}}">
    <a href="javascript:void(0)">
      <i class="far fa-play-circle"></i>
    </a>
  </div>

  <div class="marker timeline-icon" ng-repeat="event in c.data.rpm_case.milestones | orderBy : 'milestone_start' track by $index" style="left: {{event.milestone_percentage_dur}}">
    <a href="javascript:void(0)" ng-click="showDetails = ! showDetails">
      <i class={{event.milestone_icon}}></i>
    </a>
    <div class="timeline-panel show" ng-show="showDetails">
      <div class="timeline-heading">
        <h4 class="timeline-title">{{event.milestone_name}}</h4>
        <p><small class="text-muted">
              <i class="glyphicon glyphicon-time"></i> Milestone Start: {{event.milestone_start | date : fullDate }}
              </small>
        </p>
      </div>
      <ul class="timeline-body">
        <li ng-repeat="task in event.tasks track by $index">
          <p>{{task.short_description}}</p>
          <p ng-if="task.task_state!='3'"><small class="text-muted"><i class="glyphicon glyphicon-calendar"></i> Due Date: {{task.task_due_date}}</small></p>
          <p ng-if="task.task_state=='3'"><small class="text-muted"><i class="glyphicon glyphicon-ok-sign"></i> Completed {{task.updated | date: fullDate}}</small></p>
        </li>
      </ul>
    </div>
  </div>

  <div class="marker mlast timeline-icon" ng-if="c.data.rpm_case.performance_cycle_end" data-toggle="tooltip" data-placement="top" title="{{c.data.rpm_case.performance_cycle_end | date:fullDate}}">
    <a href="javascript:void(0)">
      <i class="far fa-play-circle"></i>
    </a>
  </div>
</div>

Я понимаю, что это, вероятно, очень рудиментарная временная шкала, поэтому любые предложения по ее улучшению или повышению эффективности очень ценятся.Спасибо.