.alert-messages {
  position: fixed;
  right: 15px;
  left: 15px;
  bottom: auto;
  top: 15px;
  margin-left: auto;
  margin-right: auto;
  z-index: 9999;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  flex-direction: column !important;
  pointer-events: none !important;
}
.alert-messages > div {
  position: relative;
  width: auto;
  max-width: 100%;
  cursor: pointer;
  -webkit-animation-name: showMessage;
  -webkit-animation-duration: 0.3s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-fill-mode: forwards;
  animation-name: showMessage;
  animation-duration: 0.3s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  -moz-animation-name: showMessage;
  -moz-animation-duration: 0.3s;
  -moz-animation-timing-function: linear;
  -moz-animation-fill-mode: forwards;
}
@media (max-width: 400px) {
  .alert-messages > div {
    max-width: 100%;
  }
}
.alert-messages > div.hidding {
  -webkit-animation-name: hideMessage;
  -webkit-animation-duration: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-name: hideMessage;
  animation-duration: 0.3s;
  animation-timing-function: linear;
  -moz-animation-name: hideMessage;
  -moz-animation-duration: 0.3s;
  -moz-animation-timing-function: linear;
}
.alert-messages > div > div {
  border-width: 1px;
  border-style: solid;
  border-left-width: 5px;
  margin-left: auto !important;
  pointer-events: all !important;
  padding: 2rem;
  margin-top: 5rem;
  margin-bottom: 2rem;
  margin-right: 2rem;
  border-radius: 5px;
}
.alert-messages > div > div.bg-success {
  background-color: rgba(230, 255, 230, 0.9) !important;
  border-color: #28a745 !important;
  color: #28a745 !important;
}
.alert-messages > div > div.bg-danger {
  background-color: rgba(255, 220, 220, 0.9) !important;
  border-color: #b30000 !important;
  color: #b30000 !important;
}
.alert-messages > div > div.bg-warning {
  background-color: rgba(255, 243, 204, 0.9) !important;
  border-color: #ffc107 !important;
  color: #ffc107 !important;
}
.alert-messages > div > div.bg-info {
  background-color: rgba(230, 245, 255, 0.9) !important;
  border-color: rgba(23, 162, 184) !important;
  color: #17a2b8 !important;
}
.alert-messages > div > div > span > i {
  font-size: 24px;
  margin-right: 15px;
  vertical-align: middle;
}
.alert-messages > div > div > span > i.success {
  color: #28a745;
}
.alert-messages > div > div > span > i.info {
  color: #17a2b8;
}
.alert-messages > div > div > span > i.danger {
  color: #b30000;
}
.alert-messages > div > div > span > i.warning {
  color: #ffc107;
}
@keyframes showMessage {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes showMessage {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes showMessage {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes hideMessage {
  0% {
    opacity: 1;
    display: flex;
  }
  99% {
    display: flex;
  }
  100% {
    opacity: 0;
    display: none;
  }
}
@-webkit-keyframes hideMessage {
  0% {
    opacity: 1;
    display: flex;
  }
  99% {
    display: flex;
  }
  100% {
    opacity: 0;
    display: none;
  }
}
@-moz-keyframes hideMessage {
  0% {
    opacity: 1;
    display: flex;
  }
  99% {
    display: flex;
  }
  100% {
    opacity: 0;
    display: none;
  }
}