.sucess, .alerta, .erro, .infos{
    position: fixed;
    top: 0;
    right: 0;
    padding: 2rem;
    max-width: 400px;
    width: 100%;
    min-width: 250px;
    background: #FFFFFF;
    display: flex;
    margin: 1rem;
    transform:translateY(-100px);
    transition:all .5s ease;
    z-index: 999999999999;

}
.sucess .icon, .alerta .icon, .erro .icon, .infos .icon{
    font-size: 6rem;

}

.sucess .sms, .alerta .sms, .erro .sms, .infos .sms{
    padding: 1rem;
}
.sucess{
    border-left: 10px solid #32BB9C;
    opacity:0;
    visibility: hidden;

}
.sucess.is-active{
    opacity:1;
    visibility: visible;
    transform:translateY(0px);
}
.sucess .icon{
   color:#32BB9C;
}

.alerta{
    border-left: 10px solid #FDCE55;
    opacity:0;
    visibility: hidden;
}
.alerta.is-active{
    opacity:1;
    visibility: visible;
    transform:translateY(0px);
}
.alerta .icon{
    color: #FDCE55;
}

.erro{
    border-left: 10px solid #DA4251;
    opacity:0;
    visibility: hidden;
}
.erro.is-active{
    opacity:1;
    visibility: visible;
    transform:translateY(0px);
}
.erro .icon{
    color: #DA4251;
}
.infos{
    border-left: 10px solid #37AEDA;
    opacity:0;
    visibility: hidden;
    transform:translateY(0px);
}
.infos.is-active{
    opacity:1;
    visibility: visible;
}
.infos .icon{
    color: #37AEDA;
}

/*content notification animation*/