/* BOOTSTRAP OVERRIDES (these are bugs that hopefully will get fixed) */
.invalid-feedback {
  margin-top: 0;
  padding-top: 0.25rem;
}

.invalid-feedback.text-left {
  padding-left: 0.25rem;
}

.input-group.is-invalid > input,
.input-group.is-invalid > select,
.input-group.is-invalid > .input-group-prepend,
.input-group.is-invalid > .input-group-append > .input-group-text {
  border-color: #dc3545 !important;
}

.is-invalid .dropdown-toggle {
  border-color: #dc3545 !important;
}

.input-group.is-invalid > .input-group-append > .input-group-text {
  color: #dc3545;
  background-color: rgba(220, 53, 69, 0.25);
}

.input-group.is-invalid ~ .invalid-feedback {
  display: block;
}

.input-group.is-valid > input,
.input-group.is-valid > select,
.input-group.is-valid > .input-group-prepend,
.input-group.is-valid > .input-group-append > .input-group-text {
  border-color: #28a745;
}

.input-group.is-valid > .input-group-append > .input-group-text {
  color: #28a745;
  background-color: rgba(40, 167, 69, 0.25);
}

.is-valid ~ .valid-feedback {
  display: block;
}

.is-invalid ~ .invalid-feedback {
  display: block;
}

.form-group > .invalid-feedback {
  display: block;
}

/* Animation for validator */
@keyframes shake {
  10%, 90% {
    transform: translate(-1px, 0);
  }
  20%, 80% {
    transform: translate(2px, 0);
  }
  30%, 50%, 70% {
    transform: translate(-4px, 0);
  }
  40%, 60% {
    transform: translate(4px, 0);
  }
}
.invalid-feedback-animate {
  animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  transform: translate(0, 0);
}