.doctor-marker-wrap {
    position: relative;
    width: 30px;
    height: 30px;
}

.doctor-marker-new {
    position: absolute;

    left: 23px;
    top: -8px;

    min-width: 28px;
    height: 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0 7px;

    border-radius: 7px 7px 7px 2px;

    background: #1769e0;
    color: #ffffff;

    font-size: 9px;
    font-weight: 900;
    letter-spacing: .6px;

    line-height: 1;

    box-shadow:
        0 4px 12px rgba(23, 105, 224, .28);

    z-index: 5;

    pointer-events: none;
}

.doctor-marker-new::before {
    content: "";

    position: absolute;

    left: -4px;
    bottom: 1px;

    width: 8px;
    height: 8px;

    background: #1769e0;

    transform: rotate(45deg);

    border-radius: 1px;

    z-index: -1;
}


/* ---------------------------------------------------------
   Ausgewählter Arzt auf der Karte
--------------------------------------------------------- */

.doctor-marker-wrap.is-selected {
    z-index: 1000;
}

.doctor-marker-wrap.is-selected .doctor-marker {
    transform: scale(1.22);
    filter:
        drop-shadow(0 4px 7px rgba(23, 105, 224, .34));
}

.doctor-marker-selected-ring {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 38px;
    height: 38px;

    border: 3px solid #1769e0;
    border-radius: 50%;

    transform:
        translate(-50%, -50%);

    box-sizing: border-box;

    background: rgba(23, 105, 224, .08);

    box-shadow:
        0 0 0 4px rgba(23, 105, 224, .12);

    pointer-events: none;

    animation:
        selectedDoctorPulse 1.6s ease-in-out infinite;
}

@keyframes selectedDoctorPulse {

    0%,
    100% {
        box-shadow:
            0 0 0 3px rgba(23, 105, 224, .14);
    }

    50% {
        box-shadow:
            0 0 0 8px rgba(23, 105, 224, .04);
    }
}