/* ========================================
   SCAPOR MARKER
   ======================================== */

.scapor-marker-wrapper {
    background: transparent;
    border: none;
}


/* ========================================
   MARKER
   ======================================== */

.scapor-marker {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-sizing: border-box;
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
}


/* ========================================
   INNERER PUNKT
   ======================================== */

.marker-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #ffffff;
    border: 4px solid;
    box-sizing: border-box;
}


/* ========================================
   AKTIVER SPOT
   ======================================== */

.active-marker {
    background: rgba(210, 70, 70, 0.18);
    border:
        2px solid #9B2C2C;
    box-shadow:
        0 0 0 3px #ffffff,
        0 4px 12px
        rgba(210, 70, 70, 0.30);
}


.active-marker .marker-dot {
    border-color:
        #9B2C2C;
}


/* ========================================
   GESPEICHERTER SPOT
   ======================================== */

.saved-marker {
    background: rgba(16, 42, 67, 0.18);
    border:
        2px solid #102A43;
    box-shadow:
        0 0 0 3px #ffffff,
        0 4px 12px
        rgba(16, 42, 67, 0.30);
}


.saved-marker .marker-dot {
    border-color:
        #102A43;
}


/* ========================================
   HOVER
   ======================================== */

.scapor-marker:hover {
    transform:
        scale(1.12);
}