.positionTracker {
    width: 15px;
    height: 15px;
    box-shadow: 0 0 0 1px #2331A8;
    margin-left: -7px;
    border-radius: 50%;
    background-color: $main;
    position: absolute;
    left: 0;
    z-index: 98;
    top: 3px;
    transition: all 0.2s ease-out;
&:hover,
&:focus {
     transition: all 0.1s ease-in;
     width: 20px;
     height: 20px;
     top: 1px;
     left: -2px;
 }

}

.greenTracker {
    background-color: #42AE5E!important;
    box-shadow: 0 0 0 1px #42AE5E;
}

.progress {
    height: 10px;
    padding: 8px 0;
    cursor: pointer;
    width: 100%;
    max-width: 100%;
    position: relative;
    display: flex;
    align-items: center;

}


.skipInterval {
    position: absolute;
    top: 3px;
    height: 10px;
    bottom: 0;
    background: repeating-linear-gradient( 125deg, #efefef, #efefef 3px, #ddd 3px, #efefef 5px );
    pointer-events: none;
    z-index: 2;
}


.event {
    position: absolute;
    width: 2px;
    height: 10px;
    background: $main;
    z-index: 3;
    pointer-events: none;
}

.redEvent {
    position: absolute;
    width: 2px;
    height: 10px;
    background: $red;
    z-index: 3;
    pointer-events: none;
}

.markup {
    position: absolute;
    width: 2px;
    height: 8px;
    margin-left: -8px;
&:hover {
     z-index: 9999;
 }
}

.markup.info {
    background: $blue2;
}

.popup {
    max-width: 300px !important;
    overflow: hidden;
    text-overflow: ellipsis;
& span {
      display: block;
      max-height: 200px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
  }
}

.timeline {
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0;
    height: 10px;
    border: 1px solid $gray-light;
    display: flex;
    align-items: center;
}

.clickRage {
    position: absolute;
    width: 2px;
    height: 8px;
    margin-left: -1px;
}

.returningLocation {
    position: absolute;
    height: 20%;
    border-radius: 50%;
    width: 12px;
}

.feedbackIcon {
    position: absolute;
    margin-top: -20px;
    margin-left: -9px;
    background-color: $gray-lightest;
    padding: 2px;
    box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.1);

& .tooltipArrow {
      width: 50px;
      height: 25px;
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      overflow: hidden;
&::after {
     content: "";
     position: absolute;
     width: 6px;
     height: 6px;
     background: $gray-lightest;
     transform: translateX(-50%) translateY(50%) rotate(45deg);
     bottom: 100%;
     left: 50%;
     box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.1);
 }
}
}

.timeTooltip {
    position: absolute;
    padding: 0.25rem;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    background: black;
    top: -35px;
    color: white;

&:after {
     content:'';
     position: absolute;
     top: 100%;
     left: 0;
     right: 0;
     margin: 0 auto;
     width: 0;
     height: 0;
     border-top: solid 5px black;
     border-left: solid 5px transparent;
     border-right: solid 5px transparent;
 }
}
