:root {
    --notification-width: 400px;
    --notification-height: 195px;
    --notification-header-height: 35px;
    --notification-body-height: 160px;
}

.notification-background {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    opacity: 0.5;
    z-index: 99998;
    backdrop-filter: blur(450px);
}

.notification {
    position: fixed;
    bottom: var(--padding);
    right: var(--padding);
    width: var(--notification-width) !important;
    max-width: 90vw;
    height: var(--notification-height) !important;
    background-color: var(--blue) !important;
    color: var(--white) !important;
    box-shadow: 10px 10px 10px var(--overlay-green) !important;
    z-index: 99999 !important;
    border-radius: var(--radius);
}

    .notification > .notification-header {
        height: var(--notification-header-height);
        padding: var(--padding);
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        font-size: 1.2rem;
        color: inherit !important;
    }

        .notification > .notification-header > i {
            font-size: 1.2rem;
            color: inherit !important;
        }

    .notification > .notification-body {
        width: var(--notification-width);
        max-width: 90vw;
        height: var(--notification-body-height);
        padding: var(--padding);
        align-items: center;
        justify-content: center;
        border-radius: var(--radius);
        text-align: center;
        overflow: hidden;
        overflow-y: auto;
        color: inherit !important;
    }

        .notification > .notification-body::-webkit-scrollbar-track,
        .notification > .notification-body::-webkit-scrollbar {
            width: calc(var(--padding) * 1.2);
            background: transparent;
            box-shadow: none;
            border-radius: var(--radius);
        }
        .notification > .notification-body::-webkit-scrollbar-thumb {
            width: calc(var(--padding) * 0.8);
            background: rgba(255,255,255,0.2);
            box-shadow: none;
            border-radius: var(--radius);
        }

    .notification.ok {
        background-color: var(--green) !important;
        color: var(--white) !important;
        box-shadow: 10px 10px 10px var(--overlay-green) !important;
    }

    .notification.ko {
        background-color: var(--red) !important;
        color: var(--white) !important;
        box-shadow: 10px 10px 10px var(--overlay-red) !important;
    }

@media (min-width: 768px) {
    /*.notification {
        width: var(--notification-width) !important;
        height: var(--notification-height) !important;
        top: 50% !important;
        margin-top: calc(var(--notification-height)/-2);
        left: 50% !important;
        margin-left: calc(var(--notification-width)/-2);
    }*/
}

.notification > .notification-close {
    position: absolute;
    right: calc(var(--padding) * 1);
    top: calc(var(--padding) * 1);
    cursor: pointer;
}