.notification {
    display: flex;
    justify-content: center;
    align-items : center;
    position: fixed;
    width: fit-content;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 12px;
    border-radius: 5px;
    color: #3c354e;
    background: rgba(255, 255, 255, 0.8);
    opacity: 0;
    box-shadow: 0 8px 32px 0 rgb(31 38 135 / 37%);
    backdrop-filter: blur(8.5px);
    z-index: 100;
}
.notification-body i {
    margin-right: 7px;
}
.notification-body i.success {
    color: #0f9200;
}
.notification:active {
    top: 20px;
    opacity: 1;
    pointer-events: auto;
}

.notification-navbar {
    top: 40px;
    box-shadow: 0 4px 16px 0 rgba(167, 167, 167, 0.37);
    z-index: 90;
}
.notification-navbar:active {
    top: 90px;
}