/* hide default error for things like checkboxes since it appears inside the first checkbox*/
.js-webform-checkboxes .js-form-item label.error,
.js-webform-radios .js-form-item label.error,
.js-form-type-checkbox label.error {
  display: none !important;
}

/* toggle visiblity of the custom error message placed with js using css */
.custom-error-message-placement {
  display: none;
}
[required="required"].error ~ .custom-error-message-placement {
  display: block;
}
.js-webform-type-checkboxes:has([required="required"].error) .custom-error-message-placement {
  display: block;
}
.form-attempted .js-form-type-radios .custom-error-message-placement,
.form-attempted .js-webform-type-radios .custom-error-message-placement {
  display: block;
}
.form-attempted .js-form-type-radios:has(input[type="radio"]:checked) .custom-error-message-placement,
.form-attempted .js-webform-type-radios:has(input[type="radio"]:checked) .custom-error-message-placement {
  display: none;
}
.js-webform-checkboxes .js-form-type-checkbox .custom-error-message-placement {
  display: none !important;
}

/* styling for all webforms */
div .form-required::after {
  background-image: inherit;
}
input.form-checkbox.required + .form-check-label::after {
  background-image: inherit;
}

.fieldset-legend span,
label span {
  /* this is designed so that a span can be put in the field with the "optional" tag */
  color: #808080;
  font-weight: 400;
  margin-left: 8px;
}

/* styling for single page webforms */
.custom-error-message-placement,
label.error {
  color: #dc2626;
  position: relative;
  padding-left: 24px;
  font-weight: var(--weight-number-400, 400);
  line-height: var(--line-height-leading-5, 20px);
  margin-top: 8px;
  margin-bottom: 8px;
}

.custom-error-message-placement:before,
label.error:before {
  content: "";
  position: absolute;
  left: 0;
  width: 16px;
  height: 16px;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M16 8C16 10.1217 15.1571 12.1566 13.6569 13.6569C12.1566 15.1571 10.1217 16 8 16C5.87827 16 3.84344 15.1571 2.34315 13.6569C0.842855 12.1566 0 10.1217 0 8C0 5.87827 0.842855 3.84344 2.34315 2.34315C3.84344 0.842855 5.87827 0 8 0C10.1217 0 12.1566 0.842855 13.6569 2.34315C15.1571 3.84344 16 5.87827 16 8ZM8 3C8.19891 3 8.38968 3.07902 8.53033 3.21967C8.67098 3.36032 8.75 3.55109 8.75 3.75V8.25C8.75 8.44891 8.67098 8.63968 8.53033 8.78033C8.38968 8.92098 8.19891 9 8 9C7.80109 9 7.61032 8.92098 7.46967 8.78033C7.32902 8.63968 7.25 8.44891 7.25 8.25V3.75C7.25 3.55109 7.32902 3.36032 7.46967 3.21967C7.61032 3.07902 7.80109 3 8 3ZM8 13C8.26522 13 8.51957 12.8946 8.70711 12.7071C8.89464 12.5196 9 12.2652 9 12C9 11.7348 8.89464 11.4804 8.70711 11.2929C8.51957 11.1054 8.26522 11 8 11C7.73478 11 7.48043 11.1054 7.29289 11.2929C7.10536 11.4804 7 11.7348 7 12C7 12.2652 7.10536 12.5196 7.29289 12.7071C7.48043 12.8946 7.73478 13 8 13Z" fill="%23EF4444"/></svg>');
}

.js-form-item label {
  margin-bottom: 8px;
}
.webform-submission-form > .js-form-item > label {
  font-weight: 550;
}
.fieldset-wrapper > .js-form-item > label {
  font-weight: 550;
}
.js-form-type-webform-markup {
  max-width: 512px;
}
.js-form-type-processed-text {
  max-width: 512px;
}
.webform-submission-form {
  max-width: 512px;
  margin-left: auto;
  margin-right: auto;
}
.webform-submission-form .fieldset-legend {
  font-weight: 500;
}
.radio label {
  font-weight: inherit;
}

/* in future may want to add/move styling that targets multistep forms here */
/* (as of Jan 2024 it is just the Volunteer form that is multistep and styles were done customly in the form itself) */

.js-form-item input.error,
.js-form-item select.error {
  box-shadow: 0px 0px 0px 0px #fff inset,
    0px 0px 0px 1px var(--border-error, #fca5a5) inset;
}

/* don't show error shading for checkbox/radios */
.js-form-item input.form-checkbox.error,
.js-form-item input.form-radio.error {
  box-shadow: inherit;
}