#alerts {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99999;
    transition: all .3s ease;
}

#alerts div {
    border-radius: 12px;
    opacity: 0;
    animation: fadeIn 0.7s ease-out forwards;
    transition: all .3s ease;
    box-shadow: 0 0 50px #c30f452f;
}

#alerts div.default {
    background-color: rgba(30, 30, 30, 0.5);
    border: 2px solid rgba(255, 255, 255, 0.1);
}

#alerts div.info {
    background-color: rgba(30, 30, 30, 0.5);
    border: 2px solid rgba(255, 255, 255, 0.1);
}

#alerts div.ok {
    background-color: rgba(30, 120, 45, 0.35);
    border: 2px solid rgba(30, 120, 45, 0.9);
}

#alerts div.warning {
    background-color: rgba(120, 100, 35, 0.3);
    border: 2px solid rgba(120, 100, 35, 0.9);
}

#alerts div.error {
    background-color: rgba(140, 35, 55, 0.35);
    border: 2px solid rgba(140, 35, 55, 0.9);
}

@keyframes fadeIn {
    from {
        filter: blur(10px);
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        filter: blur(0px);
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        filter: blur(10px);
        opacity: 0;
        transform: scale(0.8);
    }
}