mapillary-js/styles/DirectionComponent.css

.Directions {
    display: block;
    position: absolute;
    bottom: 75px;
    left: 50%;
    pointer-events: none;
}

.DirectionsWrapper {
    display: block;
    position: absolute;
    width: 100%;
    height: 100px;
    bottom: 0;
    overflow: visible;
    pointer-events: none;
}

.DirectionsArrowStep,
.DirectionsArrowPano,
.DirectionsArrowDisabled {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -27px;
    margin-top: -27px;
    width: 54px;
    height: 54px;
    pointer-events: all;
}

.DirectionsArrowStep,
.DirectionsArrowPano {
    opacity: 0.8;
}

.DirectionsArrowStep,
.DirectionsArrowDisabled {
    background: url(./arrow-up-white.svg);
    background-size: contain;
}

.DirectionsArrowDisabled {
    opacity: 0.2;
    z-index: -10;
}

.DirectionsArrowPano {
    background: url(./arrow-up-wheat.svg);
    background-size: contain;
}

.DirectionsArrowStep:hover,
.DirectionsArrowPano:hover {
    cursor: pointer;
    cursor: hand;
    opacity: 1 !important;
}


.TurnLeft,
.TurnRight,
.TurnAround {
    opacity: 0.8;
    position: absolute;
    height: 54px;
    width: 54px;
    bottom: 40px;
    cursor: pointer;
    cursor: hand;
    pointer-events: all;
}

.TurnLeft,
.TurnRight {
    filter: drop-shadow(0px 2px 1px rgba(0, 0, 0, 0.8));
}

.TurnAround {
    filter: drop-shadow(-2px 0px 1px rgba(0, 0, 0, 0.8));
}

.TurnLeft:hover,
.TurnRight:hover,
.TurnAround:hover {
    opacity: 1;
}

.TurnLeft {
   left: 10px;
   background: url(./arrow-left.svg);
   background-size: contain;
   transform: rotateX(60deg);
}

.TurnRight {
    right: 10px;
    background: url(./arrow-left.svg);
    background-size: contain;
    transform: rotateX(60deg) scaleX(-1);
}

.TurnAround {
    left: 10px;
    bottom: 0px;
    background: url(./arrow-left.svg);
    background-size: contain;
    transform: rotateX(60deg) rotateZ(270deg) scale(1.15, 1.15);
}