.contact-form__fieldset {
  box-sizing: border-box;
  width: 96%;
  padding: 2%;
  margin: 2%;
  border-style: dashed;
  border-width: 2px;
  border-radius: 2px;
  border-color: lightgray;
}
.contact-form__fieldset__legend {
  font-size: 1.25rem;
}
.contact-form__fieldset__label {
  font-size: 1rem;
}
.contact-form__fieldset__input, .contact-form__fieldset__input-textarea, .contact-form__fieldset__input-select, .contact-form__fieldset__input-text,
.contact-form__fieldset__input-email {
  box-sizing: border-box;
  width: 100%;
  padding: 0.5rem;
  margin: 0;
  border-style: solid;
  border-width: 2px;
  border-radius: 2px;
  border-color: gray;
  outline-style: none;
  outline-width: 2px;
  outline-color: salmon;
  font-family: "Times New Roman", Times, serif;
  font-size: 1rem;
  background-color: white;
}
.contact-form__fieldset__input:invalid:focus, .contact-form__fieldset__input-textarea:invalid:focus, .contact-form__fieldset__input-select:invalid:focus, .contact-form__fieldset__input-text:invalid:focus,
.contact-form__fieldset__input-email:invalid:focus {
  border-color: salmon;
  outline-style: solid;
}
.contact-form__fieldset__input:disabled, .contact-form__fieldset__input-textarea:disabled, .contact-form__fieldset__input-select:disabled, .contact-form__fieldset__input-text:disabled,
.contact-form__fieldset__input-email:disabled {
  border-color: lightgray;
  background-color: whitesmoke;
  color: gray;
}
.contact-form__fieldset__input-text,
.contact-form__fieldset__input-email {
  margin-bottom: 2%;
}
.contact-form__fieldset__input-select {
  margin-bottom: 2%;
}
.contact-form__fieldset__input-textarea {
  min-height: 100px;
  resize: vertical;
}
.contact-form__info__response-text, .contact-form__info__send-failure-text, .contact-form__info__send-success-text {
  box-sizing: border-box;
  border-style: solid;
  border-width: 0 0 0 4px;
  font-size: 1rem;
  font-weight: bolder;
  text-align: center;
}
.contact-form__info__response-text > span, .contact-form__info__send-failure-text > span, .contact-form__info__send-success-text > span {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  vertical-align: middle;
  height: 100%;
  margin: auto 1rem;
}
.contact-form__info__send-success-text {
  border-color: green;
  background-color: lightgreen;
}
.contact-form__info__send-failure-text {
  border-color: salmon;
  background-color: lightsalmon;
}
.contact-form__info__spinner {
  box-sizing: border-box;
  aspect-ratio: 1;
  border: 0.4rem solid white;
  border-radius: 50%;
  border-top: 0.4rem solid tomato;
  animation: spinning 2s linear infinite;
}
@keyframes spinning {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.contact-form__info__ok-button {
  box-sizing: border-box;
  aspect-ratio: 2/1;
  border-style: none;
  border-radius: 4px;
  background-color: none;
  font-family: "Times New Roman", Times, serif;
  font-size: 1rem;
  font-weight: bold;
}
.contact-form__info__ok-button:disabled {
  color: gray;
}
@media (hover: hover) {
  .contact-form__info__ok-button {
    transition: background-color 0.2s, transform 0.2s;
  }
  .contact-form__info__ok-button:enabled {
    cursor: pointer;
  }
  .contact-form__info__ok-button:enabled:active {
    background-color: whitesmoke;
  }
  .contact-form__info__ok-button:enabled:hover {
    background-color: lightgray;
    transform: translate(0, -2px);
  }
}
.contact-form__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: end;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  background-image: linear-gradient(to bottom, rgba(245, 245, 245, 0.95), whitesmoke);
}
.contact-form__info[hidden] {
  display: none;
}
.contact-form__info__spinner {
  height: 3rem;
  padding: 0;
  margin: 2rem auto;
}
.contact-form__info__response-text, .contact-form__info__send-success-text, .contact-form__info__send-failure-text {
  width: 96%;
  height: 4rem;
  padding: 0;
  margin: 0 auto;
}
.contact-form__info__ok-button {
  display: block;
  width: 6rem;
  padding: 0;
  margin: 2rem;
  margin: 2rem auto;
}
.contact-form__info__ok-button[hidden] {
  display: none;
}
.contact-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  border-style: solid;
  border-width: 2px;
  border-radius: 4px;
  border-color: gray;
  background-color: whitesmoke;
}
.contact-form > .server-action-button {
  transition: opacity 0.2s ease-in-out;
}
.contact-form:invalid > .server-action-button {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}
/*# sourceMappingURL=contact-form.css.map */