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

.DirectionsPerspective {
    display: block;
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 300px;
    height: 200px;
    margin-left: -150px;
}

.Directions {
    display: block;
    position: absolute;
    bottom: 50%;
    left: 50%;
}

.DirectionsCircle,
.DirectionsCircleSequence,
.DirectionsCircleDisabled,
.DirectionsCircleHighlight,
.DirectionsCircleSequenceHighlight {
    position: absolute;
    width: 68px;
    height: 68px;
    border-radius: 34px;
    top: 50%;
    left: 50%;
    margin-left: -34px;
    margin-top: -34px;
}

.DirectionsCircle,
.DirectionsCircleSequence,
.DirectionsCircleHighlight,
.DirectionsCircleSequenceHighlight {
    pointer-events: all;
}

.DirectionsCircle:hover,
.DirectionsCircleSequence:hover,
.DirectionsCircleHighlight:hover,
.DirectionsCircleSequenceHighlight:hover {
    cursor: pointer;
    cursor: hand;
}

.DirectionsCircle,
.DirectionsCircleSequence {
    background: rgba(0, 0, 0, 0.25);
}

.DirectionsCircle:hover,
.DirectionsCircleSequence:hover {
    background: rgba(0, 0, 0, 0.4);
}

.DirectionsCircleDisabled {
    background: rgba(0, 0, 0, 0.1);
    z-index: -10;
}

.DirectionsCircleHighlight,
.DirectionsCircleSequenceHighlight {
    background: rgba(0, 0, 0, 0.4);
}

.DirectionsArrowStep,
.DirectionsArrowPano,
.DirectionsArrowDisabled {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -4px;
    margin-top: 4px;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    pointer-events: none;
}

.DirectionsArrowStep,
.DirectionsArrowPano {
    opacity: 1;
}

.DirectionsArrowStep,
.DirectionsArrowDisabled {
    border-right: 10px solid white;
    border-top: 10px solid white;
}

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

.DirectionsArrowPano {
    border-right: 10px solid wheat;
    border-top: 10px solid wheat;
}

.TurnCircle,
.TurnCircleSequence,
.TurnCircleHighlight,
.TurnCircleSequenceHighlight {
    position: absolute;
    width: 56px;
    height: 56px;
    border-radius: 25px;
    pointer-events: all;
}

.TurnCircle:hover,
.TurnCircleSequence:hover,
.TurnCircleHighlight:hover,
.TurnCircleSequenceHighlight:hover {
    cursor: pointer;
    cursor: hand;
}

.TurnCircle,
.TurnCircleSequence {
    background: rgba(0, 0, 0, 0.25);
}

.TurnCircle:hover,
.TurnCircleSequence:hover {
    background: rgba(0, 0, 0, 0.4);
}

.TurnCircleHighlight,
.TurnCircleSequenceHighlight {
    background: rgba(0, 0, 0, 0.4);
}

.TurnLeft,
.TurnRight,
.TurnAround {
    position: absolute;
    height: 44px;
    width: 44px;
    left: 50%;
    top: 50%;
    pointer-events: none;
}

.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 {
   background: url(./arrow-left.svg);
   background-size: contain;
   transform: translate(-50%, -50%);
}

.TurnRight {
    background: url(./arrow-left.svg);
    background-size: contain;
    transform: translate(-50%, -50%) scaleX(-1);
}

.TurnAround {
    background: url(./arrow-left.svg);
    background-size: contain;
    transform: translate(-50%, -50%) rotateZ(270deg);
}