#notif-root {
    position: fixed;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    z-index: 1080;
    max-width: 520px;
}

    #notif-root .notif {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 4px;
        min-width: 300px;
        margin-bottom: 10px;
        box-shadow: 0 4px 16px rgba(0,0,0,.25);
        border: 0;
        border-radius: 6px;
        padding: 10px 14px;
        color: #fff !important;
    }

.notif .close {
    position: absolute;
    top: 10px;
    right: 14px;
    color: #fff;
    opacity: .9;
    text-shadow: none;
    z-index: 2;
}

    .notif .close:hover {
        opacity: 1;
    }

#notif-root .alert-success {
    background: #4caf50 !important;
}

#notif-root .alert-info {
    background: #17a2b8 !important;
}

#notif-root .alert-warning {
    background: #f0ad4e !important;
}

#notif-root .alert-danger {
    background: #d9534f !important;
}

.notif-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

    .notif-header i {
        font-size: 16px;
    }

    .notif-header strong {
        letter-spacing: .5px;
    }

.notif-body {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .notif-body .msg {
        margin-left: 0;
    }

.notif .close {
    color: #fff;
    opacity: .9;
    text-shadow: none;
}

    .notif .close:hover {
        opacity: 1;
    }