.animate-cropper {
    cursor: pointer;
    transition: transform 0.3s ease, opacity 0.3s ease; /* Usamos transform para cambiar el tamaño y opacity para cambiar la transparencia */
}

.animate-cropper:hover {
    opacity: 0.7; /* Cambia la opacidad cuando el mouse está encima */
    transform: scale(1.1); /* Escalamos la imagen un 10% más grande en hover */
}

#overlay {
    position: fixed; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5); /* Black background with opacity */
    z-index: 10000; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
}


/*Styles for maps*/
#map {
    height: 100%;
    width: 100%;
}

#sweetmesoft-map {
    height: 100%;
    width: 100%;
}

/* Estilo del halo animado */
.radar-effect {
    position: absolute;
    border: 3px solid rgba(255, 0, 0, 1);
    border-radius: 50%;
    width: 100px;
    height: 100px;
    animation: pulse 1s infinite;
    transform: translate(-50%, -50%);
}

@keyframes pulse {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.0);
        opacity: 0;
    }
}