.alert-overlay { position: fixed; display: flex; top: 0; right: 0; bottom: 0; left: 0; justify-content: center; align-items: center; z-index: 99999; }
.alert-overlay:before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: #000; opacity: .5; }
.alert-wrapper { position: relative; display: flex; background: #FFF; opacity: 1; border-radius: 10px; flex-direction: column; align-items: center; }
.alert-image { margin: 0 auto 25px; max-width: 100%; height: unset; }
.alert-icon { width: auto; }
.alert-icon.done { fill: #388E3C; }
.alert-icon.question { fill: #87ADBD; }
.alert-icon.alert { fill: #E1811F; }
.alert-icon.error { fill: #E52521; }
.alert-title { margin: 0 auto 15px; color: var(--mainBlue); font-size: 1.4rem; font-weight: 900; text-align: center; font-family: "Open sans", sans-serif; }
.alert-abstract { color: #222; text-align: center; font-family: "Open sans", sans-serif; }
.alert-buttons { display: flex; justify-content: flex-end; }
.alert-button { display: flex; color: #FFF; text-align: center; text-transform: uppercase; font-family: "Open sans", sans-serif; background-color: #FF7B00; border-radius: 5px; align-items: center; justify-content: center; cursor: pointer; user-select: none; transition: .25s; border: 1px solid #FF7B00; font-weight: 700; }
.alert-button.confirm { background-color: var(--mainBlue); }
.alert-button.deny { background-color: #a50000; }
.alert-button > svg { display: none; }

.alert-close-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: transparent;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    line-height: 1;
}

.alert-close-btn:hover {
    color: #f00;  /* facoltativo: colore al passaggio */
}

@media (pointer: fine) {
    .alert-button:hover { 
        color: #FF7B00;
        background-color: transparent;
    }
    .alert-button.confirm:hover { 
        color: var(--mainBlue);
    }
    .alert-button.deny:hover { 
        color: #a50000; 
    }
}
@media (max-width: 550px){
    .alert-wrapper {
        width: 84vw;
        padding: 5vw 8vw 7vw;
    }
    svg.alert-icon {
        height: 11vw;
        margin-bottom: 2vw;
    }
    .alert-abstract {
        font-size: 3.6vw;
        line-height: 4.4vw;
        margin-bottom: 5vw;
    }
    .alert-buttons {
        grid-gap: 1.8vw;
    }
    .alert-button {
        font-size: 3.6vw;
        padding: 0.5vw 8vw;
    }
}
@media (min-width: 551px) and (max-width: 766.9px){
    .alert-wrapper {
        width: 80vw;
        padding: 4vw 6vw 6vw;
    }
    svg.alert-icon {
        height: 8vw;
        margin-bottom: 1vw;
    }
    .alert-abstract {
        font-size: 2.6vw;
        line-height: 3.2vw;
        margin-bottom: 4vw;
    }
    .alert-buttons {
        grid-gap: 1.8vw;
    }
    .alert-button {
        font-size: 2.6vw;
        padding: 0.5vw 6.5vw;
    }
}
@media (min-width: 767px) and (max-width: 899.9px){
    .alert-wrapper {
        width: 60vw;
        padding: 3vw 5vw 4vw;
    }
    svg.alert-icon {
        height: 6.5vw;
        margin-bottom: 1vw;
    }
    .alert-abstract {
        font-size: 1.89vw;
        line-height: 2.4vw;
        margin-bottom: 2.5vw;
    }
    .alert-buttons {
        grid-gap: 1.5vw;
    }
    .alert-button {
        font-size: 1.89vw;
        padding: 0.4vw 4.5vw;
    }
}
@media (min-width: 900px) and (max-width: 1099.9px){
    .alert-wrapper {
        width: 44vw;
        padding: 2vw 4vw 3vw;
    }
    svg.alert-icon {
        height: 5vw;
        margin-bottom: 1vw;
    }
    .alert-abstract {
        font-size: 1.23vw;
        line-height: 1.6vw;
        margin-bottom: 2vw;
    }
    .alert-buttons {
        grid-gap: 1vw;
    }
    .alert-button {
        font-size: 1.23vw;
        padding: 0.4vw 3.5vw;
    }
}
@media (min-width: 1100px) and (max-width: 1400px){
    .alert-wrapper {
        width: 36vw;
        padding: 2vw 3vw;
    }
    svg.alert-icon {
        height: 4vw;
        margin-bottom: 1vw;
    }
    .alert-abstract {
        font-size: 1vw;
        line-height: 1.3vw;
        margin-bottom: 1.8vw;
    }
    .alert-buttons {
        grid-gap: 1vw;
    }
    .alert-button {
        font-size: 1vw;
        padding: 0.3vw 2.5vw;
    }
}
@media (min-width: 1401px){
    .alert-wrapper {
        width: 29vw;
        padding: 2vw 3vw;
    }
    svg.alert-icon {
        height: 3vw;
        margin-bottom: 1vw;
    }
    .alert-abstract {
        font-size: 0.8vw;
        line-height: 1vw;
        margin-bottom: 1.5vw;
    }
    .alert-buttons {
        grid-gap: 1vw;
    }
    .alert-button {
        font-size: 0.8vw;
        padding: 0.3vw 2vw;
    }
}
.alert-abstract textarea.deal-contact-message {
    padding: 15px;
    width: 400px;
    height: 250px;
    color: var(--greyText);
    font-size: 1.125rem;
    background-color: #FFF;
    border: 1px solid #E5E5E5;
    border-radius: 10px;
    outline: none;
    resize: none;
    box-sizing: border-box;
    margin-top: 15px;
    transition: .25s;
}
.alert-abstract textarea.deal-contact-message:focus {
    border-color: var(--mainBlue);
}