input.invalid {
    /*border-color: #ff4444 !important;*/
  }

input.valid {
    border-color: #ba9d76;
  }
.error-message {
    background-color: transparent;
    color: #ff4444;
    font-size: 0.8em;
    margin-top: 5px;
    /* display: inline-block; */
    padding: .5rem 1rem;
    border-radius: 6px;
    font-weight: 800;
    display: none;
}
.invalid ~ .error-message, .form-group:has(.invalid) .error-message{
  display: inline-block;
}

.error-message.extra-font{
  font-size: 1em;
}