.back-green-0001{
    background-color: green;
    font-size: 16rem;
    color: beige;
    border-radius: 5px;
    border: 3px double whitesmoke;
}
.back-orange-0001{
    background-color: orange;
    font-size: 16rem;
    color: beige;
    border-radius: 5px;
    border: 3px double whitesmoke;
}
.back-red-0001{
    background-color: red;
    font-size: 16rem;
    color: beige;
    border-radius: 5px;
    border: 3px double whitesmoke;
}
.back-blue-0001{
    background-color: blue;
    font-size: 16rem;
    color: beige;
    border-radius: 5px;
    border: 3px double whitesmoke;
}

.js-success-0001{
    position: fixed;
    top: -60px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    height: 50px;
    transition: var(--transmition-05s);
}
.js-success-0001.active-0001{  
    top: 40px;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: var(--transmition-05s);
}

.js-danger-0001{
    position: fixed;
    top: -60px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    height: 50px;
    transition: var(--transmition-05s);
}
.js-danger-0001.active-0001{ 
    top: 40px;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: var(--transmition-05s);
}

.js-errors-0001{
    position: fixed;
    top: -60px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    height: 50px;
    transition: var(--transmition-05s);
}
.js-errors-0001.active-0001{  
    top: 40px;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: var(--transmition-05s);
}

.js-info-0001{
    position: fixed;
    top: -60px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    height: 50px;
    transition: var(--transmition-05s);
}
.js-info-0001.active-0001{  
    top: 40px;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: var(--transmition-05s);
}

/* ********************************************************* */
.back-green-0002{
    background-color: green;
    font-size: 16rem;
    color: beige;
    border-radius: 5px;
    border: 3px double whitesmoke;
}
.back-orange-0002{
    background-color: orange;
    font-size: 16rem;
    color: beige;
    border-radius: 5px;
    border: 3px double whitesmoke;
}
.back-red-0002{
    background-color: red;
    font-size: 16rem;
    color: beige;
    border-radius: 5px;
    border: 3px double whitesmoke;
}
.back-blue-0002{
    background-color: blue;
    font-size: 16rem;
    color: beige;
    border-radius: 5px;
    border: 3px double whitesmoke;
}

.js-success-0002{
    position: fixed;
    left: -300px;
    top: 10px;
    width: 280px;
    height: 50px;
    transition: var(--transmition-05s);
}
.js-success-0002.active-0002{   
    left: 10px;
    top: 10px;
    transition: var(--transmition-05s);
}

.js-danger-0002{
    position: fixed;
    left: -300px;
    top: 10px;
    width: 280px;
    height: 50px;
    transition: var(--transmition-05s);
}
.js-danger-0002.active-0002{   
    left: 10px;
    top: 10px;
    transition: var(--transmition-05s);
}

.js-errors-0002{
    position: fixed;
    left: -300px;
    top: 10px;
    width: 280px;
    height: 50px;
    transition: var(--transmition-05s);
}
.js-errors-0002.active-0002{   
    left: 10px;
    top: 10px;
    transition: var(--transmition-05s);
}

.js-info-0002{
    position: fixed;
    left: -300px;
    top: 10px;
    width: 280px;
    height: 50px;
    transition: var(--transmition-05s);
}
.js-info-0002.active-0002{   
    left: 10px;
    top: 10px;
    transition: var(--transmition-05s);
}

/* ********************************************************* */
.back-green-0003{
    background-color: green;
    font-size: 16rem;
    color: beige;
    border-radius: 5px 25px 25px 5px;
    border: 3px double whitesmoke;
}
.back-orange-0003{
    background-color: orange;
    font-size: 16rem;
    color: beige;
    border-radius: 5px 25px 25px 5px;
    border: 3px double whitesmoke;
}
.back-red-0003{
    background-color: red;
    font-size: 16rem;
    color: beige;
    border-radius: 5px 25px 25px 5px;
    border: 3px double whitesmoke;
}
.back-blue-0003{
    background-color: blue;
    font-size: 16rem;
    color: beige;
    border-radius: 5px 25px 25px 5px;
    border: 3px double whitesmoke;
}

.js-success-0003{
    position: fixed;
    left: -300px;
    top: 10px;
    width: 280px;
    height: 50px;
    transition: var(--transmition-05s);
}
.js-success-0003.active-0003{   
    left: 10px;
    top: 10px;
    transition: var(--transmition-05s);
}

.js-danger-0003{
    position: fixed;
    left: -300px;
    top: 10px;
    width: 280px;
    height: 50px;
    transition: var(--transmition-05s);
}
.js-danger-0003.active-0003{   
    left: 10px;
    top: 10px;
    transition: var(--transmition-05s);
}

.js-errors-0003{
    position: fixed;
    left: -300px;
    top: 10px;
    width: 280px;
    height: 50px;
    transition: var(--transmition-05s);
}
.js-errors-0003.active-0003{   
    left: 10px;
    top: 10px;
    transition: var(--transmition-05s);
}

.js-info-0003{
    position: fixed;
    left: -300px;
    top: 10px;
    width: 280px;
    height: 50px;
    transition: var(--transmition-05s);
}
.js-info-0003.active-0003{   
    left: 10px;
    top: 10px;
    transition: var(--transmition-05s);
}

/* ********************************************************* */
.back-green-0004{
    background-color: green;
    font-size: 16rem;
    color: beige;
    border-radius: 5px 25px 25px 5px;
    border: 3px double whitesmoke;
}
.back-orange-0004{
    background-color: orange;
    font-size: 16rem;
    color: beige;
    border-radius: 5px 25px 25px 5px;
    border: 3px double whitesmoke;
}
.back-red-0004{
    background-color: red;
    font-size: 16rem;
    color: beige;
    border-radius: 5px 25px 25px 5px;
    border: 3px double whitesmoke;
}
.back-blue-0004{
    background-color: blue;
    font-size: 16rem;
    color: beige;
    border-radius: 5px 25px 25px 5px;
    border: 3px double whitesmoke;
}

.js-success-0004{
    position: fixed;
    left: -300px;
    top: 10px;
    width: 280px;
    height: 60vh;
    transition: var(--transmition-05s);
}
.js-success-0004.active-0004{   
    left: 10px;
    top: 10px;
    transition: var(--transmition-05s);
}

.js-danger-0004{
    position: fixed;
    left: -300px;
    top: 10px;
    width: 280px;
    height: 60vh;
    transition: var(--transmition-05s);
}
.js-danger-0004.active-0004{   
    left: 10px;
    top: 10px;
    transition: var(--transmition-05s);
}

.js-errors-0004{
    position: fixed;
    left: -300px;
    top: 10px;
    width: 280px;
    height: 60vh;
    transition: var(--transmition-05s);
}
.js-errors-0004.active-0004{   
    left: 10px;
    top: 10px;
    transition: var(--transmition-05s);
}

.js-info-0004{
    position: fixed;
    left: -300px;
    top: 10px;
    width: 280px;
    height: 60vh;
    transition: var(--transmition-05s);
}
.js-info-0004.active-0004{   
    left: 10px;
    top: 10px;
    transition: var(--transmition-05s);
}

/* ********************************************************* */
.back-green-0005{
    background-color: whitesmoke;
    font-size: 16rem;
    color: green;
    border-radius: 5px;
    border: 3px solid green;
}
.back-orange-0005{
    background-color: whitesmoke;
    font-size: 16rem;
    color: orange;
    border-radius: 5px;
    border: 3px solid orange;
}
.back-red-0005{
    background-color: whitesmoke;
    font-size: 16rem;
    color: red;
    border-radius: 5px;
    border: 3px solid red;
}
.back-blue-0005{
    background-color: whitesmoke;
    font-size: 16rem;
    color: blue;
    border-radius: 5px;
    border: 3px solid blue;
}

.js-success-0005{
    position: fixed;
    top: -60px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 280px;
    height: 50px;
    border-radius: 25px;
    transition: var(--transmition-05s);
}
.js-success-0005.active-0005{  
    top: 40px;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: var(--transmition-05s);
}

.js-danger-0005{
    position: fixed;
    top: -60px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 280px;
    height: 50px;
    border-radius: 25px;
    transition: var(--transmition-05s);
}
.js-danger-0005.active-0005{ 
    top: 40px;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: var(--transmition-05s);
}

.js-errors-0005{
    position: fixed;
    top: -60px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 280px;
    height: 50px;
    border-radius: 25px;
    transition: var(--transmition-05s);
}
.js-errors-0005.active-0005{  
    top: 40px;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: var(--transmition-05s);
}

.js-info-0005{
    position: fixed;
    top: -60px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 280px;
    height: 50px;
    border-radius: 25px;
    transition: var(--transmition-05s);
}
.js-info-0005.active-0005{  
    top: 40px;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: var(--transmition-05s);
}

/* ********************************************************* */
.back-green-0006{
    background-color: whitesmoke;
    font-size: 16rem;
    color: green;
    border-radius: 5px;
    border: 3px solid green;
}
.back-orange-0006{
    background-color: whitesmoke;
    font-size: 16rem;
    color: orange;
    border-radius: 5px;
    border: 3px solid orange;
}
.back-red-0006{
    background-color: whitesmoke;
    font-size: 16rem;
    color: red;
    border-radius: 5px;
    border: 3px solid red;
}
.back-blue-0006{
    background-color: whitesmoke;
    font-size: 16rem;
    color: blue;
    border-radius: 5px;
    border: 3px solid blue;
}

.js-success-0006{
    position: fixed;
    top: -60px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 280px;
    height: 50px;
    border-radius: 25px;
    transition: var(--transmition-05s);
    overflow: hidden;
}
.js-success-0006.active-0006{  
    top: 40px;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: var(--transmition-05s);
}
.js-success-timer-0006{
    position: absolute;
    bottom: 5px;
    width: 100%;
    height: 2px;
    background-color: green;
    transition: 2s ease-in-out;
}
.js-success-timer-0006.active-timer-0006{
    bottom: 5px;
    width: 0%;
    opacity: 0.1;
}

.js-danger-0006{
    position: fixed;
    top: -60px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 280px;
    height: 50px;
    border-radius: 25px;
    transition: var(--transmition-05s);
}
.js-danger-0006.active-0006{ 
    top: 40px;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: var(--transmition-05s);
}
.js-danger-timer-0006{
    position: absolute;
    bottom: 5px;
    width: 100%;
    height: 2px;
    background-color: orange;
    transition: 2s ease-in-out;
}
.js-danger-timer-0006.active-timer-0006{
    bottom: 5px;
    width: 0%;
    opacity: 0.1;
}

.js-errors-0006{
    position: fixed;
    top: -60px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 280px;
    height: 50px;
    border-radius: 25px;
    transition: var(--transmition-05s);
}
.js-errors-0006.active-0006{  
    top: 40px;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: var(--transmition-05s);
}
.js-errors-timer-0006{
    position: absolute;
    bottom: 5px;
    width: 100%;
    height: 2px;
    background-color: red;
    transition: 2s ease-in-out;
}
.js-errors-timer-0006.active-timer-0006{
    bottom: 5px;
    width: 0%;
    opacity: 0.1;
}

.js-info-0006{
    position: fixed;
    top: -60px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 280px;
    height: 50px;
    border-radius: 25px;
    transition: var(--transmition-05s);
}
.js-info-0006.active-0006{  
    top: 40px;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: var(--transmition-05s);
}
.js-info-timer-0006{
    position: absolute;
    bottom: 5px;
    width: 100%;
    height: 2px;
    background-color:  blue;
    transition: 2s ease-in-out;
}
.js-info-timer-0006.active-timer-0006{
    bottom: 5px;
    width: 0%;
    opacity: 0.1;
}

/* ********************************************************* */
.back-green-0007{
    background-color: whitesmoke;
    font-size: 16rem;
    color: green;
    border-radius: 5px;
    border: 3px solid green;
}
.back-orange-0007{
    background-color: whitesmoke;
    font-size: 16rem;
    color: orange;
    border-radius: 5px;
    border: 3px solid orange;
}
.back-red-0007{
    background-color: whitesmoke;
    font-size: 16rem;
    color: red;
    border-radius: 5px;
    border: 3px solid red;
}
.back-blue-0007{
    background-color: whitesmoke;
    font-size: 16rem;
    color: blue;
    border-radius: 5px;
    border: 3px solid blue;
}

.js-success-0007{
    position: fixed;
    bottom: -100px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 280px;
    height: 50px;
    border-radius: 25px;
    transition: var(--transmition-05s);
    overflow: hidden;
}
.js-success-0007.active-0007{  
    bottom: 10px;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: var(--transmition-05s);
    animation: gummy-0007 1s ease-in-out;
}

.js-success-timer-0007{
    position: absolute;
    bottom: 5px;
    width: 100%;
    height: 2px;
    background-color: green;
    transition: 2s ease-in-out;
}
.js-success-timer-0007.active-timer-0007{
    bottom: 5px;
    width: 0%;
    opacity: 0.1;
}

.js-danger-0007{
    position: fixed;
    bottom: -100px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 280px;
    height: 50px;
    border-radius: 25px;
    transition: var(--transmition-05s);
    overflow: hidden;
}
.js-danger-0007.active-0007{ 
    bottom: 10px;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: var(--transmition-05s);
    animation: gummy-0007 1s ease-in-out;
}
.js-danger-timer-0007{
    position: absolute;
    bottom: 5px;
    width: 100%;
    height: 2px;
    background-color: orange;
    transition: 2s ease-in-out;
}
.js-danger-timer-0007.active-timer-0007{
    bottom: 5px;
    width: 0%;
    opacity: 0.1;
}

.js-errors-0007{
    position: fixed;
    bottom: -100px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 280px;
    height: 50px;
    border-radius: 25px;
    transition: var(--transmition-05s);
    overflow: hidden;
}
.js-errors-0007.active-0007{  
    bottom: 10px;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: var(--transmition-05s);
    animation: gummy-0007 1s ease-in-out;
}
.js-errors-timer-0007{
    position: absolute;
    bottom: 5px;
    width: 100%;
    height: 2px;
    background-color: red;
    transition: 2s ease-in-out;
}
.js-errors-timer-0007.active-timer-0007{
    bottom: 5px;
    width: 0%;
    opacity: 0.1;
}

.js-info-0007{
    position: fixed;
    bottom: -100px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 280px;
    height: 50px;
    border-radius: 25px;
    transition: var(--transmition-05s);
    overflow: hidden;
}
.js-info-0007.active-0007{  
    bottom: 10px;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: var(--transmition-05s);
    animation: gummy-0007 1s ease-in-out;
}
.js-info-timer-0007{
    position: absolute;
    bottom: 5px;
    width: 100%;
    height: 2px;
    background-color:  blue;
    transition: 2s ease-in-out;
}
.js-info-timer-0007.active-timer-0007{
    bottom: 5px;
    width: 0%;
    opacity: 0.1;
}

@keyframes gummy-0007 {
    0%, 100%{
        width: 280px;
        height: 50px;
    }
    20%{
        width: 260px;
        height: 40px;
    }
    40%{
        width: 290px;
        height: 30px;
    }
    60%{
        width: 240px;
        height: 50px;
    }
    80%{
        width: 290px;
        height: 60px;
    }    
}

/* ********************************************************* */
.back-green-0008{
    background-color: whitesmoke;
    font-size: 16rem;
    color: green;
    border-radius: 5px;
    border: 3px solid green;
}
.back-orange-0008{
    background-color: whitesmoke;
    font-size: 16rem;
    color: orange;
    border-radius: 5px;
    border: 3px solid orange;
}
.back-red-0008{
    background-color: whitesmoke;
    font-size: 16rem;
    color: red;
    border-radius: 5px;
    border: 3px solid red;
}
.back-blue-0008{
    background-color: whitesmoke;
    font-size: 16rem;
    color: blue;
    border-radius: 5px;
    border: 3px solid blue;
}

.js-success-0008{
    position: fixed;
    bottom: -100px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 280px;
    height: 50px;
    border-radius: 25px;
    transition: var(--transmition-05s);
    overflow: hidden;
}
.js-success-0008.active-0008{  
    bottom: 10px;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: var(--transmition-05s);
    animation: gummy-0008 1s ease-in-out;
}

.js-success-timer-0008a{
    position: absolute;
    top: 5px;
    width: 90%;
    height: 5px;
    border-radius: 5px;
    background-color: green;
    transition: 2s ease-in-out;
    transition-delay: .5s;
}
.js-success-timer-0008a.active-timer-0008{
    top: 5px;
    width: 0%;
    opacity: 0.1;
}

.js-success-timer-0008b{
    position: absolute;
    bottom: 5px;
    width: 90%;
    height: 5px;
    border-radius: 5px;
    background-color: green;
    transition: 2s ease-in-out;
    transition-delay: .5s;
}
.js-success-timer-0008b.active-timer-0008{
    bottom: 5px;
    width: 0%;
    opacity: 0.1;
}

.js-danger-0008{
    position: fixed;
    bottom: -100px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 280px;
    height: 50px;
    border-radius: 25px;
    transition: var(--transmition-05s);
    overflow: hidden;
}
.js-danger-0008.active-0008{ 
    bottom: 10px;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: var(--transmition-05s);
    animation: gummy-0008 1s ease-in-out;
}
.js-danger-timer-0008a{
    position: absolute;
    top: 5px;
    width: 90%;
    height: 5px;
    border-radius: 5px;
    background-color: orange;
    transition: 2s ease-in-out;
    transition-delay: .5s;
}
.js-danger-timer-0008a.active-timer-0008{
    top: 5px;
    width: 0%;
    opacity: 0.1;
}
.js-danger-timer-0008b{
    position: absolute;
    bottom: 5px;
    width: 90%;
    height: 5px;
    border-radius: 5px;
    background-color: orange;
    transition: 2s ease-in-out;
    transition-delay: .5s;
}
.js-danger-timer-0008b.active-timer-0008{
    bottom: 5px;
    width: 0%;
    opacity: 0.1;
}

.js-errors-0008{
    position: fixed;
    bottom: -100px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 280px;
    height: 50px;
    border-radius: 25px;
    transition: var(--transmition-05s);
    overflow: hidden;
}
.js-errors-0008.active-0008{  
    bottom: 10px;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: var(--transmition-05s);
    animation: gummy-0008 1s ease-in-out;
}
.js-errors-timer-0008a{
    position: absolute;
    top: 5px;
    width: 90%;
    height: 5px;
    border-radius: 5px;
    background-color: red;
    transition: 2s ease-in-out;
    transition-delay: .5s;
}
.js-errors-timer-0008a.active-timer-0008{
    top: 5px;
    width: 0%;
    opacity: 0.1;
}
.js-errors-timer-0008b{
    position: absolute;
    bottom: 5px;
    width: 90%;
    height: 5px;
    border-radius: 5px;
    background-color: red;
    transition: 2s ease-in-out;
    transition-delay: .5s;
}
.js-errors-timer-0008b.active-timer-0008{
    bottom: 5px;
    width: 0%;
    opacity: 0.1;
}

.js-info-0008{
    position: fixed;
    bottom: -100px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 280px;
    height: 50px;
    border-radius: 25px;
    transition: var(--transmition-05s);
    overflow: hidden;
}
.js-info-0008.active-0008{  
    bottom: 10px;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: var(--transmition-05s);
    animation: gummy-0008 1s ease-in-out;
}
.js-info-timer-0008a{
    position: absolute;
    top: 5px;
    width: 90%;
    height: 5px;
    border-radius: 5px;
    background-color:  blue;
    transition: 2s ease-in-out;
    transition-delay: .5s;
}
.js-info-timer-0008a.active-timer-0008{
    top: 5px;
    width: 0%;
    opacity: 0.1;
}
.js-info-timer-0008b{
    position: absolute;
    bottom: 5px;
    width: 90%;
    height: 5px;
    border-radius: 5px;
    background-color:  blue;
    transition: 2s ease-in-out;
    transition-delay: .5s;
}
.js-info-timer-0008b.active-timer-0008{
    bottom: 5px;
    width: 0%;
    opacity: 0.1;
}

@keyframes gummy-0008 {
    0%, 100%{
        width: 280px;
        height: 50px;
    }
    20%{
        width: 260px;
        height: 40px;
    }
    40%{
        width: 290px;
        height: 30px;
    }
    60%{
        width: 240px;
        height: 50px;
    }
    80%{
        width: 290px;
        height: 60px;
    }    
}

/* ********************************************************* */
.btn-success-0009{
    background-color: green;
    width: 160px;
    height: 25px;
    padding: 10px;
    border: solid transparent;
    border-radius: 5px;
    border-width: 0 0 4px;
    color: rgba(255, 255, 255, 1);
    transform: translateZ(0);
    transition: filter .2s;
    outline: none;
    cursor: pointer;
}
.btn-danger-0009{
    background-color: orange;
    width: 160px;
    height: 25px;
    padding: 10px;
    border: solid transparent;
    border-radius: 5px;
    border-width: 0 0 4px;
    color: rgba(255, 255, 255, 1);
    transform: translateZ(0);
    transition: filter .2s;
    outline: none;
    cursor: pointer;
}

.btn-error-0009{
    background-color: red;
    width: 160px;
    height: 25px;
    padding: 10px;
    border: solid transparent;
    border-radius: 5px;
    border-width: 0 0 4px;
    color: rgba(255, 255, 255, 1);
    transform: translateZ(0);
    transition: filter .2s;
    outline: none;
    cursor: pointer;
}

.btn-info-0009{
    background-color: blue;
    width: 160px;
    height: 25px;
    padding: 10px;
    border: solid transparent;
    border-radius: 5px;
    border-width: 0 0 4px;
    color: rgba(255, 255, 255, 1);
    transform: translateZ(0);
    transition: filter .2s;
    outline: none;
    cursor: pointer;
}
.btn-success-0009:hover{
    filter: brightness(1.4);
}
.btn-danger-0009:hover{
    filter: brightness(1.4);
}
.btn-error-0009:hover{
    filter: brightness(1.4);
}
.btn-info-0009:hover{
    filter: brightness(1.4);
}

.js-success-0009{
    position: fixed;
    top: -100px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 280px;
    height: 50px;
    background-color: green;
    padding: 10px;
    border: solid transparent;
    border-radius: 5px;
    border-width: 0 0 4px;
    color: rgba(255, 255, 255, 1);
    transition: var(--transmition-05s);
}
.js-success-0009.active-0009{  
    top: 50px;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: var(--transmition-05s);
    animation: gummy-0009 1s ease-in-out;
}

.js-danger-0009{
    position: fixed;
    top: -100px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 280px;
    height: 50px;
    background-color: orange;
    padding: 10px;
    border: solid transparent;
    border-radius: 5px;
    border-width: 0 0 4px;
    color: rgba(255, 255, 255, 1);
    transition: var(--transmition-05s);
}
.js-danger-0009.active-0009{ 
    top: 50px;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: var(--transmition-05s);
    animation: gummy-0009 1s ease-in-out;
}

.js-errors-0009{
    position: fixed;
    top: -100px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 280px;
    height: 50px;
    background-color: red;
    padding: 10px;
    border: solid transparent;
    border-radius: 5px;
    border-width: 0 0 4px;
    color: rgba(255, 255, 255, 1);
    transition: var(--transmition-05s);
}
.js-errors-0009.active-0009{  
    top: 50px;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: var(--transmition-05s);
    animation: gummy-0009 1s ease-in-out;
}

.js-info-0009{
    position: fixed;
    top: -100px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 280px;
    height: 50px;
    background-color: blue;
    padding: 10px;
    border: solid transparent;
    border-radius: 5px;
    border-width: 0 0 4px;
    color: rgba(255, 255, 255, 1);
    transition: var(--transmition-05s);
}
.js-info-0009.active-0009{  
    top: 50px;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: var(--transmition-05s);
    animation: gummy-0009 1s ease-in-out;
}

@keyframes gummy-0009 {
    0%, 100%{
        width: 280px;
        height: 50px;
    }
    20%{
        width: 260px;
        height: 40px;
    }
    40%{
        width: 290px;
        height: 30px;
    }
    60%{
        width: 240px;
        height: 50px;
    }
    80%{
        width: 290px;
        height: 60px;
    }    
}

/* ********************************************************* */
.btn-success-0010{
    color: rgba(255, 255, 255, 1);
    width: 160px;
    height: 25px;
    padding: 10px;
    cursor: pointer;
    border-radius: 5px;
    transition: all 150ms ease-in-out;    
    border: 1px solid green;
    background-image: linear-gradient(-180deg, greenyellow 0%, green 100%);
    box-shadow: 0 0.5rem 0.625rem 0 rgba(0,0,0,0.2),
                0 -0.125rem 0.75rem green inset,
                0 0.375rem 0.125rem rgba(255,255,255, 0.4) inset,
                0 0.125rem 0.25rem 0 greenyellow inset;
}
.btn-danger-0010{
    color: rgba(255, 255, 255, 1);
    width: 160px;
    height: 25px;
    padding: 10px;
    cursor: pointer;
    border-radius: 5px;
    transition: all 150ms ease-in-out;    
    border: 1px solid orange;
    background-image: linear-gradient(-180deg, rgb(255, 194, 81) 0%, orange 100%);
    box-shadow: 0 0.5rem 0.625rem 0 rgba(0,0,0,0.2),
                0 -0.125rem 0.75rem orange inset,
                0 0.375rem 0.125rem rgba(255,255,255, 0.4) inset,
                0 0.125rem 0.25rem 0 rgb(255, 194, 81) inset;
}

.btn-error-0010{
    color: rgba(255, 255, 255, 1);
    width: 160px;
    height: 25px;
    padding: 10px;
    cursor: pointer;
    border-radius: 5px;
    transition: all 150ms ease-in-out;    
    border: 1px solid red;
    background-image: linear-gradient(-180deg, rgb(254, 81, 81) 0%, red 100%);
    box-shadow: 0 0.5rem 0.625rem 0 rgba(0,0,0,0.2),
                0 -0.125rem 0.75rem red inset,
                0 0.375rem 0.125rem rgba(255,255,255, 0.4) inset,
                0 0.125rem 0.25rem 0 rgb(254, 81, 81) inset;
}

.btn-info-0010{
    color: rgba(255, 255, 255, 1);
    width: 160px;
    height: 25px;
    padding: 10px;
    cursor: pointer;
    border-radius: 5px;
    transition: all 150ms ease-in-out;    
    border: 1px solid blue;
    background-image: linear-gradient(-180deg, rgb(81, 81, 255) 0%, blue 100%);
    box-shadow: 0 0.5rem 0.625rem 0 rgba(0,0,0,0.2),
                0 -0.125rem 0.75rem blue inset,
                0 0.375rem 0.125rem rgba(255,255,255, 0.4) inset,
                0 0.125rem 0.25rem 0 rgb(81, 81, 255) inset;
}
.btn-success-0010:hover{
    filter: brightness(1.4);
}
.btn-danger-0010:hover{
    filter: brightness(1.4);
}
.btn-error-0010:hover{
    filter: brightness(1.4);
}
.btn-info-0010:hover{
    filter: brightness(1.4);
}

.js-success-0010{
    position: fixed;
    top: -100px;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 50px;
    padding: 10px;
    width: 280px;
    border-radius: 5px; 
    border: 1px solid green;
    background-image: linear-gradient(-180deg, greenyellow 0%, green 100%);
    box-shadow: 0 0.5rem 0.625rem 0 rgba(0,0,0,0.2),
                0 -0.125rem 0.75rem green inset,
                0 0.375rem 0.125rem rgba(255,255,255, 0.4) inset,
                0 0.125rem 0.25rem 0 greenyellow inset;
}
.js-success-0010.active-0010{  
    top: 50px;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: var(--transmition-05s);
    animation: gummy-0010 1s ease-in-out;
}

.js-danger-0010{
    position: fixed;
    top: -100px;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 50px;
    padding: 10px;
    width: 280px;
    border-radius: 5px; 
    border: 1px solid orange;
    background-image: linear-gradient(-180deg, rgb(255, 194, 81) 0%, orange 100%);
    box-shadow: 0 0.5rem 0.625rem 0 rgba(0,0,0,0.2),
                0 -0.125rem 0.75rem orange inset,
                0 0.375rem 0.125rem rgba(255,255,255, 0.4) inset,
                0 0.125rem 0.25rem 0 rgb(255, 194, 81) inset;
}
.js-danger-0010.active-0010{ 
    top: 50px;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: var(--transmition-05s);
    animation: gummy-0010 1s ease-in-out;
}

.js-errors-0010{
    position: fixed;
    top: -100px;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 50px;
    padding: 10px;
    width: 280px;
    border-radius: 5px; 
    border: 1px solid red;
    background-image: linear-gradient(-180deg, rgb(254, 81, 81) 0%, red 100%);
    box-shadow: 0 0.5rem 0.625rem 0 rgba(0,0,0,0.2),
                0 -0.125rem 0.75rem red inset,
                0 0.375rem 0.125rem rgba(255,255,255, 0.4) inset,
                0 0.125rem 0.25rem 0 rgb(254, 81, 81) inset;
}
.js-errors-0010.active-0010{  
    top: 50px;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: var(--transmition-05s);
    animation: gummy-0010 1s ease-in-out;
}

.js-info-0010{
    position: fixed;
    top: -100px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 280px;
    height: 50px;   
    padding: 10px;
    border-radius: 5px;
    border: 1px solid blue;
    background-image: linear-gradient(-180deg, rgb(81, 81, 255) 0%, blue 100%);
    box-shadow: 0 0.5rem 0.625rem 0 rgba(0,0,0,0.2),
                0 -0.125rem 0.75rem blue inset,
                0 0.375rem 0.125rem rgba(255,255,255, 0.4) inset,
                0 0.125rem 0.25rem 0 rgb(81, 81, 255) inset;
}
.js-info-0010.active-0010{  
    top: 50px;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: var(--transmition-05s);
    animation: gummy-0010 1s ease-in-out;
}

@keyframes gummy-0010 {
    0%, 100%{
        width: 280px;
        height: 50px;
    }
    20%{
        width: 260px;
        height: 40px;
    }
    40%{
        width: 290px;
        height: 30px;
    }
    60%{
        width: 240px;
        height: 50px;
    }
    80%{
        width: 290px;
        height: 60px;
    }    
}

/* ********************************************************* */