.driver-marker {
    position: relative;
    width: 18px;
    height: 18px;
    transform-origin: center center;
    transition: transform .20s ease, filter .20s ease;
}

    .driver-marker .halo {
        position: absolute;
        inset: 0;
        border-radius: 50%;
        opacity: .22;
        transform: scale(1.65);
        transition: .25s;
    }

    .driver-marker .circle {
        position: absolute;
        inset: 2px;
        border-radius: 50%;
        transition: .25s;
        box-shadow: 0 0 0 2px rgba(255,255,255,.95), 0 2px 6px rgba(0,0,0,.35);
    }

    .driver-marker .center {
        position: absolute;
        width: 6px;
        height: 6px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        background: white;
    }

    /* ONLINE */

    .driver-marker.online .halo {
        background: #18d26b;
    }

    .driver-marker.online .circle {
        background: #11b357;
    }

    /* SOS */

    .driver-marker.sos .halo {
        background: #ff3b30;
        animation: sosPulse 1.2s infinite;
    }

    .driver-marker.sos .circle {
        background: #e11d2f;
    }

    /* Movimiento */

    .driver-marker.bounce {
        animation: markerBounce .55s;
    }

@keyframes markerBounce {

    0% {
        transform: translateY(0);
    }

    30% {
        transform: translateY(-8px);
    }

    60% {
        transform: translateY(0);
    }

    80% {
        transform: translateY(-3px);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes sosPulse {

    0% {
        transform: scale(1.4);
        opacity: .45;
    }

    50% {
        transform: scale(2.0);
        opacity: .10;
    }

    100% {
        transform: scale(1.4);
        opacity: .45;
    }
}