:root{
    --color-info-background: #d9e6fb;
    --color-info-btn-hover: #86b4ff;
    --color-info: #4285f4;
    --color-success-background: #c9ffe5;
    --color-success-btn-hover: #88ffc5;
    --color-success: #09c97f;
    --color-warning-background: #fff0cc;
    --color-warning-btn-hover: #ffdb86;
    --color-warning: #f8b15d;
    --color-error-background: #ffdbdb;
    --color-error-btn-hover: #ff8787;
    --color-error: #f95668;
}

.notificationlogin{
    position: relative;
    padding: 5px;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
.notificationlogin.success{
    color: var(--color-success);
    background-color: var(--color-success-background);
    border: 1px solid var(--color-success);
}
.notificationlogin.error{
    color: var(--color-error);
    background-color: var(--color-error-background);
    border: 1px solid var(--color-error);
}

.notification{
    position: absolute;
    top: 10%;
    border-radius: 0.2rem;
    overflow: hidden;
    display: none;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    z-index: 100;
}

.notification.show{
    animation: show_slide 1s ease-in-out forwards;
    display: flex;
}
@keyframes show_slide{
    0%{
        opacity: 0;
        right: 0%;
    }
    5%{
        opacity: 0.25;
    }
    20%{
        opacity: 0.5;
    }
    40%{
        opacity: 1;
        right: 5%;
    }
    80%{
        right: 0%;
    }    
    100%{
        right: 2%;
    }
}

.notification.hide{
    animation: hide_slide 1s ease-in-out forwards;
    display: flex;
}
@keyframes hide_slide{
    0%{
        opacity: 1;
        right: 2%;
    }
    20%{
        right: 0%;
    }
    60%{
        right: 5%;
    }
    80%{
        opacity: 0.5;
    }
    95%{
        opacity: 0.25;
    }    
    100%{
        opacity: 0;
        right: 0%;
    }
}

.notification.info{
    background-color: var(--color-info-background);
    border-left: 8px solid var(--color-info);
    color: var(--color-info);
}
.notification.info .icon{
    margin-left: 1rem;
    fill: var(--color-info);
}
.notification.info .close{
    background-color: var(--color-info-background);
    padding: 1rem;
    border-top-right-radius: 0.2rem;
    border-bottom-right-radius: 0.2rem;
    display: flex;
    cursor: pointer;
    border: none;
}
.notification.info .close:hover{
    background-color: var(--color-info-btn-hover);
}
.notification.info .close svg{
    fill: var(--color-info);
}

.notification.success{
    background-color: var(--color-success-background);
    border-left: 8px solid var(--color-success);
    color: var(--color-success);
}
.notification.success .icon{
    margin-left: 1rem;
    fill: var(--color-success);
}
.notification.success .close{
    background-color: var(--color-success-background);
    padding: 1rem;
    border-top-right-radius: 0.2rem;
    border-bottom-right-radius: 0.2rem;
    display: flex;
    cursor: pointer;
    border: none;
}
.notification.success .close:hover{
    background-color: var(--color-success-btn-hover);
}
.notification.success .close svg{
    fill: var(--color-success);
}

.notification.warning{
    background-color: var(--color-warning-background);
    border-left: 8px solid var(--color-warning);
    color: var(--color-warning);
}
.notification.warning .icon{
    margin-left: 1rem;
    fill: var(--color-warning);
}
.notification.warning .close{
    background-color: var(--color-warning-background);
    padding: 1rem;
    border-top-right-radius: 0.2rem;
    border-bottom-right-radius: 0.2rem;
    display: flex;
    cursor: pointer;
    border: none;
}
.notification.warning .close:hover{
    background-color: var(--color-warning-btn-hover);
}
.notification.warning .close svg{
    fill: var(--color-warning);
}

.notification.error{
    background-color: var(--color-error-background);
    border-left: 8px solid var(--color-error);
    color: var(--color-error);
}
.notification.error .icon{
    margin-left: 1rem;
    fill: var(--color-error);
}
.notification.error .close{
    background-color: var(--color-error-background);
    padding: 1rem;
    border-top-right-radius: 0.2rem;
    border-bottom-right-radius: 0.2rem;
    display: flex;
    cursor: pointer;
    border: none;
}
.notification.error .close:hover{
    background-color: var(--color-error-btn-hover);
}
.notification.error .close svg{
    fill: var(--color-error);
}