/*
 * DO NOT EDIT THIS FILE.
 * Edit .pcss.css file instead and recompile.
*/

/**
 * @file
 * Visual styles for form components.
 */

/*
  Custom CSS properties and mixins.
  These are "compiled" by postcss/postcss-custom-properties for IE11 compatibility.
  CSS variables (those that start with --) are included in the generated CSS. Sass style variables (those that start with $) are for internal processing.
*/

/* Internal variables */

/*1px */

/*16px */

/*4px */

/*5.33333333px */

/*8px */

/*12px */

/*20px */

/*24px, */

/*32px */

/*44px (named after omicron variant BS.2.75.2) */

/*48px */

/*desktop + 32px; */

/*max-width + 64px; */

/* RGB colors, useful for when you need to include a color in an RGBA set. */

/* Mixins */

/* */

/* Hide elements visually, but keep them available for screen-readers. */

/* */

/* Used for information required for screen-reader users to understand and use */

/* the site where visual display is undesirable. Information provided in this */

/* manner should be kept concise, to avoid unnecessary burden on the user. */

/* "!important" is used to prevent unintentional overrides. */

/* */

form .field-multiple-table {
  margin: 0;
}

form .field-multiple-table .field-multiple-drag {
  width: 30px;
  padding-right: 0; /* LTR */
}

[dir="rtl"] form .field-multiple-table .field-multiple-drag {
  padding-left: 0;
}

form .field-multiple-table .field-multiple-drag .tabledrag-handle {
  padding-right: 0.5em; /* LTR */
}

[dir="rtl"] form .field-multiple-table .field-multiple-drag .tabledrag-handle {
  padding-right: 0;
  padding-left: 0.5em;
}

form .field-add-more-submit {
  margin: 0.5em 0 0;
}

/**
 * Markup generated by Form API.
 */

.form-item,
.form-actions {
  margin-top: 1em;
  margin-bottom: 1em;
}

tr.odd .form-item,
tr.even .form-item {
  margin-top: 0;
  margin-bottom: 0;
}

.form-composite > .fieldset-wrapper > .description,
.form-item .description {
  font-size: 0.85em;
}

label.option {
  display: inline;
  font-weight: normal;
}

.form-composite > legend,
.label,
label:not(.option) {
  display: inline;
  margin: 0 0 var(--quarter-space);
  padding: 0;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: 500;
  font-family: var(--sans-serif);
}

.form-checkboxes .form-item,
.form-radios .form-item {
  margin-top: 0.4em;
  margin-bottom: 0.4em;
}

.form-type-radio, .form-type-checkbox {
  display: flex;
  align-items: center;
  gap: var(--half-space);
}

.form-type-radio .description, .form-type-checkbox .description {
    margin-left: 2.4em; /* LTR */
  }

[dir="rtl"] .form-type-radio .description,
[dir="rtl"] .form-type-checkbox .description {
  margin-right: 2.4em;
  margin-left: 0;
}

.marker {
  color: #e00;
}

.form-required:after {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 0.3em;
  content: "";
  vertical-align: super;
  /* Use a background image to prevent screen readers from announcing the text. */
  background-image: url(../../images/icons/required.svg);
  background-repeat: no-repeat;
  background-size: 6px 6px;
}

abbr.tabledrag-changed,
abbr.ajax-changed {
  border-bottom: none;
}

.form-item input.error,
.form-item textarea.error,
.form-item select.error {
  border: 2px solid red;
}

/* Inline error messages. */

.form-item--error-message:before {
  display: inline-block;
  width: 14px;
  height: 14px;
  content: "";
  vertical-align: sub;
  background: url(../../images/icons/error.svg) no-repeat;
  background-size: contain;
}

[type="text"], [type="email"], [type="search"], [type="tel"] {
  border-radius: var(--base-border-radius);
  border: solid 2px var(--c-gray);
  min-height: 3rem; /*48px */
  background-color: var(--c-light-mist);
  /*@media (width > $desktop) { */
  /*  min-height: 2.75rem; //44px */
  /*  font-size: var(--fs-small); */
  /*  line-height: var(--lh-small); */
  /*} */
  padding-left: var(--dodrant-space);
  padding-right: var(--dodrant-space);
}

@media (max-width: 700px) {

[type="text"], [type="email"], [type="search"], [type="tel"] {
    width: 100%
}
  }

select {
  width: 100%;
  -webkit-appearance: none;
          appearance: none;
  min-height: 3rem; /*48px */
  padding: var(--dodrant-space);
  background-color: var(--c-light-mist);
  position: relative;
  background-image: url(../../images/down_arrow.svg);
  background-repeat: no-repeat;
  background-position: right 10px center;
  border-radius: var(--base-border-radius);
  border: solid 2px var(--c-gray);
  /*@include breakpoint($medium) { */
  /*  width: auto; */
  /*} */
  /*@media (width > $desktop) { */
  /*  min-height: 2.75rem; //44px */
  /*  font-size: var(--fs-small); */
  /*  line-height: var(--lh-small); */
  /*} */
}

select::-ms-expand {
    display: none;
  }

/*&:hover { */

/*  background-color: darken($c-light-gray,5); */

/*} */

/*&:focus-visible { */

/*  @extend %is-focus; */

/*} */

select option {
    /*font-size: $default-padding; */
  }

[type="checkbox"], [type="radio"] {
  flex-shrink: 0;
  border-radius: var(--base-border-radius);
  border: solid 2px var(--c-gray);
  height: var(--quasqui-space);
  width: var(--quasqui-space);
  -webkit-appearance: none;
          appearance: none;
  background-color: var(--c-light-mist);
}

[type="checkbox"]:checked {
  background-color: var(--c-graphite);
  border-color: var(--c-graphite);
}

[type="checkbox"]:checked:after {
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg data-name='Checkbox/Checked'%3E%3Cpath d='m5.972 12.97-4.11-4.51a.742.742 0 0 1 0-.98l.894-.981a.593.593 0 0 1 .895 0l2.768 3.037 5.93-6.506a.594.594 0 0 1 .895 0l.894.981c.247.27.247.71 0 .981L6.866 12.97a.593.593 0 0 1-.894 0Z' fill='%23fff' data-name='Icons/Solid/check'/%3E%3C/g%3E%3C/svg%3E");
    width: 16px;
    height: 16px;
    display: block;
    background-repeat: no-repeat;
  }

[type="radio"] {
  border-radius: 50%;
}

[type="radio"]:checked {
    background-color: var(--c-graphite);
    border-color: var(--c-graphite);
  }

[type="radio"]:checked:after {
      width: 16px;
      height: 16px;
      display: block;
      background-repeat: no-repeat;
      content: "";
      background-image: url("data:image/svg+xml,%3Csvg data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='7.989' cy='7.989' r='3.834' fill='%23fff'/%3E%3C/svg%3E");    }