mapillary-js/styles/DirectionComponent.css

.domRenderer {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 10;
}

.Directions {
    display: block;
    position: absolute;
    width: 165px;
    height: 165px;
    bottom: -10px;
    left: 50%;
    margin-left: -82px;
    pointer-events: none;
}

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

.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;
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.8));
    cursor: pointer;
    cursor: hand;
}

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

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

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

.TurnAround {
    left: 10px;
    bottom: 0px;
    background: url(./arrow-left.svg);
    background-size: contain;
}

.InSeq {
    position: absolute;
    top: 0;
    height: 120px;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 10%,rgba(0,0,0,0.65) 50%,rgba(0,0,0,0) 90%);
    width: 24px;
}

.NextInSeq:hover,
.PrevInSeq:hover {
    opacity: 1;
}

.NextInSeq,
.PrevInSeq {
    background: url(./next-prev.svg);
    background-size: contain;
    opacity: 0.8;
    width: 24px;
    height: 48px;
    cursor: pointer;
    cursor: hand;
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.8));
}

.NextInSeq {
    margin-top: 14px;
}

.PrevInSeq {
    transform: scaleY(-1);
}

.InSeqDisabled,
.InSeqDisabled:hover {
    background: url(./next-prev.svg);
    cursor: not-allowed;
    opacity: 0.5;
}

.PanoIndication {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 32px;
    height: 24px;
    background: url(./pano-icon.svg);
    background-size: contain;
    opacity: 0.8;
}