#messages {
    position: fixed;
    top: 70px;
    right: 10px;
    left: 10px;
    justify-content: right;
    display: flex;
    z-index: 1080;
    height: 0px;
    overflow: visible;
}
#messages .alert {
    box-shadow: 0 5px 5px 0 rgba(0,0,0,.4);
    display: block;
    width: auto;
    max-width: 90%;
    z-index: 1080;
    height: auto;
    max-height: 15vh;
    overflow: hidden;
    text-overflow: ellipsis;
    position: absolute;
}
#messages .alert.out {
    right: -50px;
    transform: rotateY(-35deg) rotateZ(-35deg);
    opacity: 0;
}
#messages .alert.in {
    right: 10px;
    transform: rotateY(0deg) rotateZ(0deg);
    opacity: 1;
    transition: all 0.15s;
}
#messages .alert.exit {
    animation: exitAnimation 0.25s;
}
@keyframes exitAnimation {
    0%{
        right : 10px;
    }
    100%{
        right : -100vw;
    }
}