.font-monospace {
  font-family: "Courier New", "Monaco", monospace;
}

.font-body {
  font-family: Arial, sans-serif;
}

.font-body-serif {
  font-family: Georgia, Times, "Times New Roman", serif;
}

.form-field {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-bottom: 1rem;
}
.form-field.inline {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
              -ms-grid-row-align: center;
          align-items: center;
}
.form-field.inline label {
  margin-right: 0.5rem;
  margin-bottom: 0;
}
.form-field label {
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: #333;
}
.form-field input,
.form-field select,
.form-field textarea {
  padding: 0.5rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 0.25rem;
  -webkit-transition: border-color 0.2s;
  transition: border-color 0.2s;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: #007bff;
}
.form-field input.error,
.form-field select.error,
.form-field textarea.error {
  border-color: #dc3545;
}
.form-field .form-error {
  color: #dc3545;
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

.input-sm {
  font-size: 0.875rem;
  padding: 0.25rem 0.5rem;
}

.input-lg {
  font-size: 1.25rem;
  padding: 0.75rem 1rem;
}

input:disabled,
select:disabled,
textarea:disabled {
  background-color: #f5f5f5;
  cursor: not-allowed;
}

.form-style-vertical {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}
.form-style-vertical .form-field {
  margin-bottom: 1rem;
}

.form-style-horizontal {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: auto 1fr;
      grid-template-columns: auto 1fr;
  gap: 0.5rem 1rem;
  -ms-grid-row-align: center;
      align-items: center;
}
.form-style-horizontal .form-field {
  margin-bottom: 0;
  display: contents;
}
.form-style-horizontal label {
  justify-self: end;
  -webkit-align-self: center;
      -ms-flex-item-align: center;
          align-self: center;
  margin-bottom: 0;
}

.form-buttons {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}

.form-row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}
.form-row > * {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.form-section {
  margin-bottom: 2rem;
}
.form-section > h2, .form-section > h3, .form-section > h4 {
  margin-bottom: 1rem;
  font-weight: 700;
  color: #222;
}