.toast-container {
  position: relative;
  z-index: 1100;
}

.toast {
  width: 400px;
  height: 80px;
  background-color: #fff;
  font-weight: 500;
  padding: 10px 30px 10px 10px;
  border: 1px solid #aaaaaa;
  margin: 15px auto;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  z-index: 1500;
  animation: moveDown 0.3s linear forwards;
}

.resizable {
    width: auto !important;
}

@keyframes moveDown {
  100% {
    transform: translateY(100%);
  }
}

.toast i {
  margin: 0 20px;
  font-size: 35px;
  color: green;
}

.toast.erro i{
  color: red;
}

.toast.invalido i{
  color: orange;
}

.toast.captcha i{
  color: orange;
}

.toast::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 5px;
  background: green;
  animation: anim 5s linear forwards;
}

@keyframes anim {
  100% {
    width: 0;
  }
}

.toast.erro::after{
  background: red;
}

.toast.invalido::after{
  background: orange;
}

.toast.captcha::after{
  background: orange;
}

#toastBox {
  position: fixed;
  top: -80px;
  right: 0;
  left: 0;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  padding: 20px;
  z-index: 1200;
  pointer-events: none;
  height: 120%;
}