.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; padding: 25px 50px; margin-inline: 20px; max-width: 700px; background: #FFF; opacity: 1; border-radius: 19px; flex-direction: column; }
.alert-image { margin: 0 auto 25px; max-width: 100%; height: unset; }
.alert-icon { margin: 0 auto 25px; width: auto; height: 100px; }
.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(--black-color); font-size: 1.4rem; font-weight: 900; text-align: center; font-family: "Open sans", sans-serif; }
.alert-abstract { margin: 0 auto 30px; color: var(--black-color); font-size: 1.125rem; text-align: center; font-family: "Open sans", sans-serif; }
.alert-buttons { display: flex; gap: 12px; justify-content: flex-end; }
.alert-button { display: flex; padding: 10px 25px; min-width: 25px; color: #FFF; font-size: .9375rem; text-align: center; text-transform: uppercase; font-family: "Open sans", sans-serif; background: var(--black-color); border-radius: 15px; gap: 10px; align-items: center; justify-content: center; cursor: pointer; user-select: none; transition: .25s; }
.alert-button.confirm { color: var(--primary-text-color); background-color: var(--primary-color); }
.alert-button.deny { background-color: #a50000; }
.alert-button > svg { width: 14px; fill: #FFF; flex-shrink: 0 }

@media (pointer: fine) {
    .alert-button:hover { filter: brightness(115%) }
}

@media (max-width: 480px) {
    .alert-wrapper { padding: 25px; }
}

@media (max-width: 380px) {
    .alert-button > svg { display: none }
}