.my-ion-list{
    max-height: 200px;
    overflow-y: auto;
    font-size: 13px!important;
}

.waypoint-wrapper{
  // padding: 8px;
  // font-weight: 500;
  // border-bottom: 1px solid #ddd;
  // background-color: #34a080;
  // text-align: center;
  // color: #fff;
  padding: 8px;
  padding-top: 4px;
  padding-bottom: 4px;
  font-weight: 500;
  border-bottom: 1px solid #ddd;
  background-color: #cecece;
  text-align: center;
  color: #000;
  font-size: 15px;
  text-align: left;
}

.routes-list-wrapper{
  font-size: 14px;
  color: #444444;

  .route-option-wrapper{

    .route-option-inner{
      padding: 8px;
      border-bottom: 1px solid #ddd;
      font-size: 14px;

      &.selected{
        background-color: rgba(102, 157, 246, 1);
        color: white;
        font-weight: 500!important;
        border-radius: 3px;
      }

      .route-heading{
        font-weight: 500;
        margin-bottom: 5px;
        font-size: 16px;
      }
    }
  }
}
.icon {
  display: inline-block;
  width: 50px;
  height: 50px;
  background-size: cover;
}

.icon-fast {
  background-image: url(./../../assets/images/fastest.svg);
}
.icon-safe {
  background-image: url(./../../assets/images/safe.svg);
}
.icon-green {
  background-image: url(./../../assets/images/green.svg);
}
.icon-safe-green {
  background-image: url(./../../assets/images/safe_green.svg);
}

.directions li span.arrow {
    display:inline-block;
    min-width:28px;
    min-height:28px;
    background-position:0px;
    background-image: url("https://heremaps.github.io/maps-api-for-javascript-examples/map-with-route-from-a-to-b/img/arrows.png");
    position:relative;
    top:8px;
  }
  .directions li span{
      font-size: 13px!important;
  }
  .directions li span.depart  {
    background-position:-28px;
  }
  .directions li span.rightUTurn  {
    background-position:-56px;
  }
  .directions li span.leftUTurn  {
    background-position:-84px;
  }
  .directions li span.rightFork  {
    background-position:-112px;
  }
  .directions li span.leftFork  {
    background-position:-140px;
  }
  .directions li span.rightMerge  {
    background-position:-112px;
  }
  .directions li span.leftMerge  {
    background-position:-140px;
  }
  .directions li span.slightRightTurn  {
    background-position:-168px;
  }
  .directions li span.slightLeftTurn{
    background-position:-196px;
  }
  .directions li span.rightTurn  {
    background-position:-224px;
  }
  .directions li span.leftTurn{
    background-position:-252px;
  }
  .directions li span.sharpRightTurn  {
    background-position:-280px;
  }
  .directions li span.sharpLeftTurn{
    background-position:-308px;
  }
  .directions li span.rightRoundaboutExit1 {
    background-position:-616px;
  }
  .directions li span.rightRoundaboutExit2 {
    background-position:-644px;
  }
  
  .directions li span.rightRoundaboutExit3 {
    background-position:-672px;
  }
  
  .directions li span.rightRoundaboutExit4 {
    background-position:-700px;
  }
  
  .directions li span.rightRoundaboutPass {
    background-position:-700px;
  }
  
  .directions li span.rightRoundaboutExit5 {
    background-position:-728px;
  }
  .directions li span.rightRoundaboutExit6 {
    background-position:-756px;
  }
  .directions li span.rightRoundaboutExit7 {
    background-position:-784px;
  }
  .directions li span.rightRoundaboutExit8 {
    background-position:-812px;
  }
  .directions li span.rightRoundaboutExit9 {
    background-position:-840px;
  }
  .directions li span.rightRoundaboutExit10 {
    background-position:-868px;
  }
  .directions li span.rightRoundaboutExit11 {
    background-position:896px;
  }
  .directions li span.rightRoundaboutExit12 {
    background-position:924px;
  }
  .directions li span.leftRoundaboutExit1  {
    background-position:-952px;
  }
  .directions li span.leftRoundaboutExit2  {
    background-position:-980px;
  }
  .directions li span.leftRoundaboutExit3  {
    background-position:-1008px;
  }
  .directions li span.leftRoundaboutExit4  {
    background-position:-1036px;
  }
  .directions li span.leftRoundaboutPass {
    background-position:1036px;
  }
  .directions li span.leftRoundaboutExit5  {
    background-position:-1064px;
  }
  .directions li span.leftRoundaboutExit6  {
    background-position:-1092px;
  }
  .directions li span.leftRoundaboutExit7  {
    background-position:-1120px;
  }
  .directions li span.leftRoundaboutExit8  {
    background-position:-1148px;
  }
  .directions li span.leftRoundaboutExit9  {
    background-position:-1176px;
  }
  .directions li span.leftRoundaboutExit10  {
    background-position:-1204px;
  }
  .directions li span.leftRoundaboutExit11  {
    background-position:-1232px;
  }
  .directions li span.leftRoundaboutExit12  {
    background-position:-1260px;
  }
  .directions li span.arrive  {
    background-position:-1288px;
  }
  .directions li span.leftRamp  {
    background-position:-392px;
  }
  .directions li span.rightRamp  {
    background-position:-420px;
  }
  .directions li span.leftExit  {
    background-position:-448px;
  }
  .directions li span.rightExit  {
    background-position:-476px;
  }
  .directions li span.ferry  {
    background-position:-1316px;
  }