/* breakpoints */
form {
  /*Form variables - Most settings can be adjusted here!*/
  --color: var(--font-clr);
  --border-radius: var(--border-radius-small, 0);
  --border: 1px solid var(--color);
  --field-font-size: 1.625rem;
  --label-font-size: 1.125rem;
  --field-padding: .5em 1em;
  --field-space: 1.5em;
  --checkbox-size: 1.5rem;
  --label-bg-clr: var(--clr-grey-dark);
  --bs-body-color: var(--font-clr);
  /*Settings for active Fieldlabel*/
  --label-active-top: -1em;
  --label-inactive-top: .75em;
  --label-active-left: 1em;
  --label-active-bg-clr: var(--label-bg-clr, var(--background-color, transparent));
  /*General field styling*/
  /*Individual field styles*/
}
form select.form-select, form select, form textarea, form input {
  accent-color: var(--clr-primary);
  width: 100%;
  border-radius: var(--border-radius);
  border: var(--border);
  padding: var(--field-padding, 0.25em 0.5em);
  font-size: var(--field-font-size);
  color: var(--font-clr);
  background-color: transparent;
  transition: box-shadow 0.3s ease;
}
form select.form-select:focus-visible, form select.form-select:focus, form select:focus-visible, form select:focus, form textarea:focus-visible, form textarea:focus, form input:focus-visible, form input:focus {
  box-shadow: none;
  border-color: var(--clr-primary);
  background-color: inherit;
}
form label {
  color: var(--font-clr);
  transition: all 0.3s ease;
  line-height: 1;
  position: absolute;
  top: var(--label-inactive-top, 1em);
  left: var(--label-active-left, 1em);
  font-size: var(--field-font-size);
}
form label.active {
  position: absolute;
  top: var(--label-active-top, 0.5em);
  left: var(--label-active-left, 1em);
  background-color: var(--label-active-bg-clr, transparent);
  padding: 0.25em 0.5em;
  font-size: var(--label-font-size);
}
form label.right {
  position: relative;
  top: unset;
  left: unset;
  transform: none;
  padding: 0;
  font-size: var(--field-font-size);
  margin-bottom: 0.25em;
}
form label p {
  color: inherit;
  font-size: inherit;
}
form .field {
  position: relative;
  margin-bottom: var(--field-space);
}
form .field.userformsoptionset label, form .field.nocaptcha label, form .field.mathspamprotection label, form .field.checkbox label, form .field.dropdown label {
  position: relative;
  top: unset;
  left: unset;
  transform: none;
  padding: 0;
  font-size: var(--field-font-size);
  margin-bottom: 0.25em;
}
form .field .gdpr__field, form .field .userformsoptionset .middleColumn > div, form .field .optionset .middleColumn > div, form .field.checkbox .middleColumn {
  display: flex;
  align-items: start;
  gap: 1em;
}
form .field .gdpr__field input[type="radio"], form .field .gdpr__field input[type="checkbox"], form .field .userformsoptionset .middleColumn > div input[type="radio"], form .field .userformsoptionset .middleColumn > div input[type="checkbox"], form .field .optionset .middleColumn > div input[type="radio"], form .field .optionset .middleColumn > div input[type="checkbox"], form .field.checkbox .middleColumn input[type="radio"], form .field.checkbox .middleColumn input[type="checkbox"] {
  flex-basis: var(--checkbox-size, 1rem);
  aspect-ratio: 1;
  flex-shrink: 0;
}
form .field .gdpr__field input[type="radio"]:focus-visible, form .field .gdpr__field input[type="radio"]:focus, form .field .gdpr__field input[type="checkbox"]:focus-visible, form .field .gdpr__field input[type="checkbox"]:focus, form .field .userformsoptionset .middleColumn > div input[type="radio"]:focus-visible, form .field .userformsoptionset .middleColumn > div input[type="radio"]:focus, form .field .userformsoptionset .middleColumn > div input[type="checkbox"]:focus-visible, form .field .userformsoptionset .middleColumn > div input[type="checkbox"]:focus, form .field .optionset .middleColumn > div input[type="radio"]:focus-visible, form .field .optionset .middleColumn > div input[type="radio"]:focus, form .field .optionset .middleColumn > div input[type="checkbox"]:focus-visible, form .field .optionset .middleColumn > div input[type="checkbox"]:focus, form .field.checkbox .middleColumn input[type="radio"]:focus-visible, form .field.checkbox .middleColumn input[type="radio"]:focus, form .field.checkbox .middleColumn input[type="checkbox"]:focus-visible, form .field.checkbox .middleColumn input[type="checkbox"]:focus {
  box-shadow: none;
}
form .field .gdpr__field.gdpr__field label *, form .field .gdpr__field.gdpr__field label, form .field .userformsoptionset .middleColumn > div.gdpr__field label *, form .field .userformsoptionset .middleColumn > div.gdpr__field label, form .field .optionset .middleColumn > div.gdpr__field label *, form .field .optionset .middleColumn > div.gdpr__field label, form .field.checkbox .middleColumn.gdpr__field label *, form .field.checkbox .middleColumn.gdpr__field label {
  font-size: 1rem;
  line-height: 1.25;
  margin-bottom: 0;
  color: var(--clr-grey-light);
}
form .field .gdpr__field label {
  color: var(--white);
}
form .field .gdpr__field label.active {
  background-color: transparent;
}
form .field.optionset label {
  position: relative;
  top: unset;
  left: unset;
  transform: none;
  padding: 0;
  font-size: var(--field-font-size);
  margin-bottom: 0.25em;
}
form .field.optionset li {
  padding-left: 0;
  display: flex;
  align-items: center;
  gap: 1em;
  margin-bottom: 0.5rem;
}
form .field.optionset li input {
  flex-basis: 1rem;
  aspect-ratio: 1;
  flex-shrink: 0;
}
form .field.optionset li:before {
  display: none;
}
form .field.ss-listbox-field label.left {
  position: absolute;
  top: var(--label-active-top, 0.5em);
  left: var(--label-active-left, 1em);
  background-color: var(--label-active-bg-clr, transparent);
  padding: 0.25em 0.5em;
  font-size: var(--label-font-size);
}
form .field.ss-listbox-field label.right {
  font-size: var(--label-font-size);
}
form .field.fileattachment .dropzone-holder {
  background-color: transparent;
}
form .field.fileattachment .dropzone-holder .file-attachment-field-previews {
  list-style: none;
}
form .field.fileattachment .dropzone-holder .file-attachment-field-previews li {
  border-left-width: 2px;
  padding: 0 1rem;
}
form .field.fileattachment .dropzone-holder .file-attachment-field-previews li:before {
  display: none;
}
form .field.fileattachment .dropzone-holder .file-attachment-field-previews li .check-holder img {
  filter: invert(1);
}
form .field.fileattachment .dropzone-holder .file-attachment-field-previews li .file-progress {
  background-color: var(--clr-primary);
}
form .field.fileattachment label {
  position: relative;
  top: unset;
  left: unset;
  transform: none;
  padding: 0;
  font-size: var(--field-font-size);
  margin-bottom: 0.25em;
}
form select.form-select option, form select option {
  color: var(--black);
}
form select.form-select option:target, form select option:target {
  background-color: var(--clr-primary);
}
/*# sourceMappingURL=data:application/json,%7B%22version%22%3A3%2C%22sources%22%3A%5B%22%2Fthemes%2Fkarl24%2Fscss%2Fcomponents%2F_forms.scss%22%5D%2C%22names%22%3A%5B%5D%2C%22mappings%22%3A%22AAAA%3BAAGA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAuBE%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAcE%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAQF%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAkBE%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAIA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAIA%3BAAAA%3BAAAA%3BAAAA%3BAAOF%3BAAAA%3BAAAA%3BAAAA%3BAAaI%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAKF%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAQE%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAME%3BAAAA%3BAAAA%3BAAOA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAWF%3BAAAA%3BAAAA%3BAAEE%3BAAAA%3BAAAA%3BAAOF%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAIA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAOE%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAMA%3BAAAA%3BAAAA%3BAAQA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAIA%3BAAAA%3BAAAA%3BAAOF%3BAAAA%3BAAAA%3BAAGE%3BAAAA%3BAAAA%3BAAGE%3BAAAA%3BAAAA%3BAAAA%3BAAIE%3BAAAA%3BAAAA%3BAAKE%3BAAAA%3BAAAA%3BAAKF%3BAAAA%3BAAAA%3BAAON%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAASF%3BAAAA%3BAAAA%3BAAEE%3BAAAA%3BAAAA%22%7D */