.messageList {
    top: 0;
    position: fixed;
    width: 230px;
    right: 0;
    margin-top: 10px;
    margin-right: 10px;
    z-index: 99999;
    overflow: hidden;
}

notification {
    margin: 5px;
    padding: 5px;
    display: block;
    width: auto;
    border-style: solid;
    border-width: medium;
    border-radius: 7px;
    background-color: #fff;
    overflow-wrap: break-word;
    -moz-animation: notiShow 0s ease-in 1s forwards,notiAnimation 0s ease-in 10s forwards;
    /* Firefox */
    -webkit-animation: notiShow 0s ease-in 1s forwards,notiAnimation 0s ease-in 10s forwards;
    /* Safari and Chrome */
    -o-animation: notiShow 0s ease-in 1s forwards,notiAnimation 0s ease-in 10s forwards;
    /* Opera */
    animation: notiShow 0s ease-in 1s forwards,notiAnimation 0s ease-in 10s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    font-weight: bold;
}


@keyframes notiAnimation {
    to {
        width: 0px;
        height: 0px;
        opacity: 0;
        margin: 0px;
        padding: 0px;
        border: none;
    }
}

@-webkit-keyframes notiAnimation {
    100% {
        width: 0px;
        height: 0px;
        opacity: 0;
        margin: 0px;
        padding: 0px;
        border: none;
    }
}

.noti-success {
    color: darkgreen;
    border-color: darkgreen;
}

.noti-warning {
    color: darkgoldenrod;
    border-color: darkgoldenrod;
}

.noti-danger {
    color: darkred;
    border-color: darkred;
}