.async-form__response {
  margin: 20px 0;
  position: relative;
  width: 100%;
  font-size: 18px;
  text-align: center;
  padding-top: 60px;
}

.async-form__response::before,
.async-form__response::after {
  position: absolute;
  top: 0px;
  left: 50%;
  display: block;
}

.async-form__response--success::before {
  content: '';
  width: 17px;
  height: 28px;
  border: solid #069e04;
  border-width: 0 5px 5px 0;
  transform: translateX(-50%) rotate(45deg);
}

.async-form__response--info::before {
  content: '';
  width: 5px;
  height: 30px;
  top: 10px;
  background-color: #777;
  transform: translateX(-50%);
}
.async-form__response--info::after {
  content: '';
  width: 5px;
  height: 5px;
  background-color: #777;
  transform: translateX(-50%);
}

.async-form__response--warning::before {
  content: '';
  width: 5px;
  height: 30px;
  background-color: rgb(255, 187, 0);
  transform: translateX(-50%);
}
.async-form__response--warning::after {
  content: '';
  width: 5px;
  height: 5px;
  top: 35px;
  background-color: rgb(255, 187, 0);
  transform: translateX(-50%);
}

.async-form__response--error::before {
  content: '';
  width: 5px;
  height: 40px;
  background-color: #940d0d;
  transform: translateX(-50%) rotate(-45deg);
}
.async-form__response--error::after {
  content: '';
  width: 5px;
  height: 40px;
  background-color: #940d0d;
  transform: translateX(-50%) rotate(45deg);
}

.async-form--loading {
  opacity: 0.1;
  transition: opacity 800ms ease-out;
  pointer-events: none;
}