/**
*   NOTIFICATIONS
*
*/
#notification-container{
    width: 100%;
    height: 0;
}
.notification-center-error, .notification-center-success{
    display: flex;
    position: absolute;
    height: min-content;
    min-height: 4rem;
    width: 80%;
    left: calc((100vw - 80%)/2);
    top: -10rem;
    border-radius: 5px;
    justify-content: center;
    align-items: center;
    z-index: 1100;
    color: white;
    background-color: blueviolet;
    transform: translateY(0rem);
    padding: 25px;
}
.notification-center-error-closed, .notification-center-success-closed{
    transform: translateY(0rem);
    transition: all 800ms cubic-bezier(0.075, 0.82, 0.165, 1);
}
.notification-center-success-opened{
    animation: slide 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform: translateY(12rem);
}
.notification-center-error-opened{
    animation: stumble 800ms linear;
    transform-origin: 50% 50%;
    transform: translateY(12rem);
}
@keyframes slide {
    0%{transform: translateY(0rem);}
    85%{transform: translateY(12rem);}
    90%{transform: translateY(12.2rem);}
    100%{transform: translateY(12.0rem);}
}
@keyframes stumble {
    0% {transform: translateY(0rem)}
    20% {transform: translateY(12rem)}
    30% {transform: rotate(1deg) translateY(12rem)}
    40% {transform: rotate(-2deg) translateY(12rem)}
    50% {transform: rotate(1.6deg) translateY(12rem)}
    60% {transform: rotate(-1.2deg) translateY(12rem)}
    70% {transform: rotate(0) translateY(12rem)}
    100% {transform: rotate(0) translateY(12rem)}
}
.notification-center-error-opened{
    transition: all 300ms linear;
    background-color: rgba(255, 178, 178, 0.703);
}
.notification-center-success-opened{
    background-color: rgba(110, 110, 245, 0.9);
}
@media screen and (max-width: 767px){
    #notification-container{
        position: fixed;
        top: 0;
    }
}