#messages {
    position:absolute;
    top:0;
    right:calc(22vw - 4vh);
    width:calc(25vw + 4vh);
    padding:4vh;
    max-height:calc(40vh + 30px);
    z-index:2;
    overflow-y:hidden;
}
#messages:empty {
    display:none;
}
.message {
    position:relative;
    width:100%;
    height:10vh;
    background-color:rgb(240,240,240);
    box-shadow: 0px 0px 34px 0px rgba(0,0,0,0.5);
    border-radius:5px;
    border:1px solid gainsboro;
    overflow-y:auto;
    margin-bottom:10px;
    border-left:7px solid red;
    animation:fadein 2s;
}
.message.success {
    border-left-color:#16E516;
}
.message.error {
    border-left-color:#ff0033;
}
.messageX {
    position:absolute;
    right:5px;
    top:0;
    font-size:1.5vw;
    cursor:pointer;
}
.message h3 {
    padding-top:0;
    margin-top:5px;
    margin-left:5px;
    margin-bottom:2.5px;
}
.message span {
    margin-left: 5px;
}
@keyframes fadein {
    0% {
        opacity:0;
    }
    100% {
        opacity:1;
    }
}