#general-msg {
  content: "";
  display: table;
  clear: both;
  margin: 0 auto;
    float: left;
    width: 100%;
    padding: 1%;
    background: #f5f5f5;
    position: absolute;
    top:0;

    animation: getar-msg 0.82s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 600px;
    animation-iteration-count: 1;
    z-index: 1000;
}

.msg-response{
display: block;
padding: 8px;
border-radius: 12px;
width: 100%;
}

[data-key], [data-response] {
display: block;
width: 100%;
padding: 5px;
}


.success {
  background: #ddffdd !important;
  color: black;
}

.info{
  background:#D9E9F4 !important;
  color: black;
}

.warning{
  background: #ffffcc !important;
  color: black;
}

.error{
  background: #ffdddd !important;
  color: black;
}

.top-msg{
  position: absolute;
  top:0;
}

.bottom-msg{
  position: absolute;
  bottom:0;
}



@keyframes getar-msg {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%, 80% {
    transform: translate3d(8px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-7px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(28px, 0, 0);
  }
}