input {
  font: inherit;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.general-form {
  display: flex;
  flex-direction: column;
}

.general-form.add-image-form {
  border-top: 1px solid black;
  padding: 1.5rem 2.2rem;
  gap: 1.3rem;
}

.general-form.inline-form {
  padding: 1rem 1rem;
  gap: 0.5rem;
}

.general-form.auth-form {
  align-self: center;
  min-width: 75%;
  padding: 1.5rem 2.2rem;
  gap: 1.3rem;
}

@media (max-width: 576px) {
  .general-form.auth-form {
    min-width: 85%;
  }
}

.general-form .form-title {
  font-size: 1.25rem;
  font-weight: bold;
}

.general-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.general-form .inline-form-group {
  display: flex;
  flex-direction: row;
  gap: 0.1rem;
}

.general-form input {
  border-radius: 5px;
  border: 2px solid #e7ebf3;
  transition: all 0.2s ease;
}

.general-form input:hover {
  background-color: #f0f0f0;
}

.general-form input:focus {
  outline: none; /* Removes default browser outline */
  border: 2px solid var(--action-bg);
  box-shadow: 0 0 0 2px rgba(16, 24, 40, 0.05);
}

.general-form .readonly-input:read-only {
  background-color: #f0f0f0;
}

.general-form .add-image-input {
  padding: 0.5rem;
}

.general-form .drop-zone {
  display: flex;
  min-height: 10rem;
}

.general-form .upload-image-input {
  background-color: white;
  border: 3px dashed var(--action-bg);
}

.general-form .inline-input {
  padding: 0.2rem 0.4rem;
}

.general-form.add-image-form.hidden {
  display: none;
}

.form-error {
  color: #9f1239;
}