.marker {
    position: relative;
    top: -15px !important;
    left: -15px !important;
    width: 30px;
    height: 30px;
    --marker-color-light: color-mix(in srgb, var(--marker-color) 30%, white 70%);
    --marker-color-dark: color-mix(in srgb, var(--marker-color) 70%, black 30%);
}

.marker .marker-shape {
    position: relative;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background-color: var(--marker-color);
    border: 3px solid var(--marker-color-dark);
}

.marker.marker-pin {
    top: -40px !important;
}
.marker.marker-pin-large {
    top: -36px
}

.marker-pin::before {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 12px solid var(--marker-color-dark);
}

.marker-pin-large::before {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-top: 9px solid var(--marker-color-dark);
}

.marker .marker-shape span {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
}

/* Circle shape */
.marker .marker-circle {
    border-radius: 50%;
}

/* Square shape */
.marker-square {
    border-radius: 4px;
}

/* Pentagon shape */
.marker .marker-shape.marker-pentagon {
    border: 0;
    background-color: var(--marker-color-dark);
    clip-path: polygon(
            50% 0%,
            100% 38%,
            82% 100%,
            18% 100%,
            0% 38%
    );
}

.marker .marker-shape.marker-pentagon::before {
    content: "";
    width: 85%;
    height: 85%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--marker-color);
    clip-path: polygon(
            50% 0%,
            100% 38%,
            82% 100%,
            18% 100%,
            0% 38%
    );
}

/* Hexagon shape */
.marker .marker-shape.marker-hexagon {
    border: 0;
    background-color: var(--marker-color-dark);
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); /*polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);*/
}

.marker .marker-shape.marker-hexagon::before {
    content: "";
    width: 85%;
    height: 85%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--marker-color);
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}


/* CLUSTER */
.yetiweb-cluster {
    position: absolute;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    margin: -18px 0 0 -18px;
    background-color: color-mix(in srgb, var(--marker-color), transparent 70%);
    left: 50%;
    top: 50%;
    box-sizing: border-box;
    --marker-color-dark: color-mix(in srgb, var(--marker-color) 70%, black 30%);
    border: 1px solid var(--marker-color-dark);
    color: white;
}

.yetiweb-cluster::before {
    content: '';
    width: 30px;
    height: 30px;
    position: absolute;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--marker-color);
    --marker-color-dark: color-mix(in srgb, var(--marker-color) 70%, black 30%);
    border: 2px solid var(--marker-color-dark);
}

.yetiweb-cluster span {
    position: absolute;
    font-size: 14px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* --- BLU (1-8) --- */
.marker-blue-1 { --marker-color: #0d47a1; }
.marker-blue-2 { --marker-color: #1565c0; }
.marker-blue-3 { --marker-color: #1976d2; }
.marker-blue-4 { --marker-color: #1e88e5; }
.marker-blue-5 { --marker-color: #2196f3; }
.marker-blue-6 { --marker-color: #42a5f5; }
.marker-blue-7 { --marker-color: #64b5f6; }
.marker-blue-8 { --marker-color: #90caf9; }

/* --- AZZURRO & CYAN (9-16) --- */
.marker-cyan-1 { --marker-color: #006064; }
.marker-cyan-2 { --marker-color: #00838f; }
.marker-cyan-3 { --marker-color: #0097a7; }
.marker-cyan-4 { --marker-color: #00acc1; }
.marker-cyan-5 { --marker-color: #00bcd4; }
.marker-cyan-6 { --marker-color: #26c6da; }
.marker-cyan-7 { --marker-color: #4dd0e1; }
.marker-cyan-8 { --marker-color: #80deea; }

/* --- TEAL & VERDE ACQUA (17-24) --- */
.marker-teal-1 { --marker-color: #004d40; }
.marker-teal-2 { --marker-color: #00695c; }
.marker-teal-3 { --marker-color: #00796b; }
.marker-teal-4 { --marker-color: #00897b; }
.marker-teal-5 { --marker-color: #009688; }
.marker-teal-6 { --marker-color: #26a69a; }
.marker-teal-7 { --marker-color: #4db6ac; }
.marker-teal-8 { --marker-color: #80cbc4; }

/* --- VERDE (25-32) --- */
.marker-green-1 { --marker-color: #1b5e20; }
.marker-green-2 { --marker-color: #2e7d32; }
.marker-green-3 { --marker-color: #388e3c; }
.marker-green-4 { --marker-color: #43a047; }
.marker-green-5 { --marker-color: #4caf50; }
.marker-green-6 { --marker-color: #66bb6a; }
.marker-green-7 { --marker-color: #81c784; }
.marker-green-8 { --marker-color: #a5d6a7; }

/* --- LIME & GIALLO (33-40) --- */
.marker-lime-1 { --marker-color: #827717; }
.marker-lime-2 { --marker-color: #9e9d24; }
.marker-lime-3 { --marker-color: #afb42b; }
.marker-yellow-1 { --marker-color: #fbc02d; }
.marker-yellow-2 { --marker-color: #fdd835; }
.marker-yellow-3 { --marker-color: #ffeb3b; }
.marker-amber-1 { --marker-color: #ffb300; }
.marker-amber-2 { --marker-color: #ffca28; }

/* --- ARANCIO & CORALLO (41-48) --- */
.marker-orange-1 { --marker-color: #e65100; }
.marker-orange-2 { --marker-color: #ef6c00; }
.marker-orange-3 { --marker-color: #f57c00; }
.marker-orange-4 { --marker-color: #fb8c00; }
.marker-orange-5 { --marker-color: #ff9800; }
.marker-deeporange-1 { --marker-color: #bf360c; }
.marker-deeporange-2 { --marker-color: #d84315; }
.marker-deeporange-3 { --marker-color: #ff5722; }

/* --- ROSSO & ROSA (49-56) --- */
.marker-red-1 { --marker-color: #b71c1c; }
.marker-red-2 { --marker-color: #c62828; }
.marker-red-3 { --marker-color: #d32f2f; }
.marker-red-4 { --marker-color: #f44336; }
.marker-pink-1 { --marker-color: #880e4f; }
.marker-pink-2 { --marker-color: #ad1457; }
.marker-pink-3 { --marker-color: #c2185b; }
.marker-pink-4 { --marker-color: #e91e63; }

/* --- VIOLA & INDACO (57-64) --- */
.marker-purple-1 { --marker-color: #4a148c; }
.marker-purple-2 { --marker-color: #6a1b9a; }
.marker-purple-3 { --marker-color: #8e24aa; }
.marker-purple-4 { --marker-color: #9c27b0; }
.marker-indigo-1 { --marker-color: #1a237e; }
.marker-indigo-2 { --marker-color: #283593; }
.marker-indigo-3 { --marker-color: #303f9f; }
.marker-indigo-4 { --marker-color: #3f51b5; }

/* --- GRIGI (65-72) --- */
.marker-gray-1 { --marker-color: #212121; }
.marker-gray-2 { --marker-color: #424242; }
.marker-gray-3 { --marker-color: #616161; }
.marker-gray-4 { --marker-color: #757575; }
.marker-gray-5 { --marker-color: #9e9e9e; }
.marker-gray-6 { --marker-color: #bdbdbd; }
.marker-gray-7 { --marker-color: #e0e0e0; }
.marker-gray-8 { --marker-color: #eeeeee; }


/* --- SNOW MAP COLOR --- */
.marker-snow-1 { --marker-color: #FFFFFF; color: black;}
.marker-snow-2 { --marker-color: #E0F7FA; color: black;}
.marker-snow-3 { --marker-color: #81D4FA; color: black; }
.marker-snow-4 { --marker-color: #0288D1; color: white; }
.marker-snow-5 { --marker-color: #01579B; color: white;}

/** --- TEMPERATURE MAP COLOR --- */
.marker-temperature-1 { --marker-color: #003366; }
.marker-temperature-2 { --marker-color: #3366FF; }
.marker-temperature-3 { --marker-color: #66CCFF; }
.marker-temperature-4 { --marker-color: #ADD8E6; }
.marker-temperature-5 { --marker-color: #F0F0F0; }
.marker-temperature-6 { --marker-color: #FFCC00; }
.marker-temperature-7 { --marker-color: #FF9933; }
.marker-temperature-8 { --marker-color: #FF3300; }
.marker-temperature-9 { --marker-color: #990000; }