.popup {
    position: fixed;
    width: 450px;
    height: 550px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: none;
    padding: 20px;
    transition: width 0.5s, height 0.5s, top 0.5s, left 0.5s, transform 0.5s; /* Transizioni per animare il cambiamento di dimensione e posizione */
}


.popup-xmas {
    position: fixed;
    width: 450px;
    height: 580px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: none;
    padding: 20px;
    transition: width 0.5s, height 0.5s, top 0.5s, left 0.5s, transform 0.5s; /* Transizioni per animare il cambiamento di dimensione e posizione */
    background-image: url('/img/christmastree180.png');
    background-position: top left; /* Posiziona l'immagine in alto a sinistra */
    background-repeat: no-repeat; /* Evita la ripetizione dell'immagine */
    background-size: 160px auto; /* Larghezza fissa a 100px, altezza proporzionale */
    height: auto; /* Altezza regolata dal contenuto */
}

.popup-easter {
    position: fixed;
    width: 450px;
    height: 600px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: none;
    padding: 20px;
    transition: width 0.5s, height 0.5s, top 0.5s, left 0.5s, transform 0.5s; /* Transizioni per animare il cambiamento di dimensione e posizione */
    background-image: url('/img/easter2025.png');
    background-position: top left; /* Posiziona l'immagine in alto a sinistra */
    background-repeat: no-repeat; /* Evita la ripetizione dell'immagine */
    background-size: 100px auto; /* Larghezza fissa a 100px, altezza proporzionale */
    height: auto; /* Altezza regolata dal contenuto */
}

.popup-summer {
    position: fixed;
    width: 450px;
    height: 580px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: none;
    padding: 20px;
    transition: width 0.5s, height 0.5s, top 0.5s, left 0.5s, transform 0.5s; /* Transizioni per animare il cambiamento di dimensione e posizione */
    background-image: url('/img/summersale.gif');
    background-position: top left; /* Posiziona l'immagine in alto a sinistra */
    background-repeat: no-repeat; /* Evita la ripetizione dell'immagine */
    height: auto; /* Altezza regolata dal contenuto */
}


.popup-worldbackupday {
    position: fixed;
    width: 450px;
    height: 580px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: none;
    padding: 20px;
    transition: width 0.5s, height 0.5s, top 0.5s, left 0.5s, transform 0.5s; /* Transizioni per animare il cambiamento di dimensione e posizione */
    height: auto; /* L'altezza si adatta al contenuto */
}


.popup-content {
    text-align: center;
    padding: 20px;
    color: black;
}

    .popup-content h1 {
        color: black;
    }

.close-button {
    position: absolute;
    top: 1px;
    right: 1px;
    font-size: 30px;
    cursor: pointer;
    background-color: white;
    border-radius: 30%;
    width: 28px;
    height: 28px;
    text-align: center;
    line-height: 25px;
    border: 1px solid gray; /* Colore del bordo del cerchio grigio */
    color: gray; /* Colore della X grigio */
}

/* Media query per dispositivi mobili */
@media only screen and (max-width: 600px) {
    .popup {
        width: 90%;
    }
}

.popupimg {
}

/* Media query per dispositivi mobili */
@media only screen and (max-width: 600px) {
    .popupimg {
        width: 60%;
    }
}


/* Media query per dispositivi mobili 
@media only screen and (max-width: 600px) {
    .close-button {
        right: 20px; 
    }


.popup-generic-content {
    text-align: left;
    padding: 20px;
    color: black;
    font-size:12pt;
}


#questionButton {
    vertical-align: middle; /* Allinea verticalmente al centro */
    

#questionButton {
    vertical-align: middle; /* Allinea verticalmente al centro */
    margin-bottom: -2px; /* Aggiusta lo spazio in basso per un migliore allineamento */
}