#message-alert {
    visibility: hidden;
    background-color: #FF5722;
    color: rgba(0,0,0,.87);
    width: 90vw;
    font-weight:200;
    left: 5vw;
    margin: auto;
    padding: 20px;
    text-align:center;
    z-index: 9999999;
    font-size: 18px;
    margin-top: 10px;
    top: 30px;
    position: fixed;
}

#message-alert.show-success {
    /*border-left: 4px solid green;
    border-right: 4px solid green;*/
    background-color: #00897B;
  visibility: visible;
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
  color: rgba(0,0,0,.87);
}

#message-alert.show-warning {
    /*border-left: 4px solid #ffb74d;
    border-right: 4px solid #ffb74d;*/
  visibility: visible;
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
#message-alert.show-error {
    /*border-left: 4px solid red;
    border-right: 4px solid red;*/
  visibility: visible;
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@-webkit-keyframes fadein {
  from {top: 0; opacity: 0;} 
  to {top: 30px; opacity: 1;}
}

@keyframes fadein {
  from {top: 0; opacity: 0;}
  to {top: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {top: 30px; opacity: 1;} 
  to {top: 0; opacity: 0;}
}

@keyframes fadeout {
from {top: 30px; opacity: 1;}
to {top: 0; opacity: 0;}
}