:root {
  --primary-color: #1f2937;
  --btn-color: #1f2937;
  --btn-text-color: #fff;
}

.fonnte-form * {
  box-sizing: border-box;
  font-family: inherit;
}

.fonnte-form input,
.fonnte-form textarea,
.fonnte-form select {
  border: 1px solid lightgray !important;
  border-radius: 5px !important;
  padding: 12px 8px !important;
  line-height: 1.5;
}

.fonnte-form input[type="checkbox"],
.fonnte-form input[type="radio"] {
  margin-top: 0px;
  padding: 0 !important;
}

.fonnte-form .hidden {
  display: none !important;
}

.fonnte-form .fonnte-multiple-wrapper {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

.fonnte-form .fonnte-field-wrapper {
  display: flex;
  flex-direction: column;
  padding: 16px;
  width: 100%;
}

.fonnte-form .fonnte-option-wrapper {
  margin: 5px;
}

.fonnte-form .fonnte-field-label {
  margin-bottom: 8px;
  font-weight: 500;
}
.fonnte-form .fonnte-option-label {
  margin-left: 4px;
}

.fonnte-form .fonnte-field-footer {
  margin-top: 8px;
  font-style: italic;
}

.fonnte-form select {
  max-width: unset !important;
}

.fonnte-form .fonnte-field-wrapper-clicked {
  background: rgba(from var(--primary-color) r g b / 0.05);
  border-radius: 5px;
  position: relative;
}

.fonnte-form .form-box [type="submit"] {
  background-color: var(--btn-color);
  color: var(--btn-text-color);
  border: 1px solid var(--btn-color);
  padding: 12px 16px;
  border-radius: 5px;
  cursor: pointer;
}

.fonnte-form .form-layout {
  display: flex;
  flex-wrap: wrap;
}
.fonnte-form .required {
  color: red;
  margin-left: 5px;
}
.fonnte-form .fonnte-form-error-text {
  color: red;
  font-size: small;
  margin-top: 5px;
}