.webform-submission-form {
  font-size: 14px;
  line-height: 24px;
}

.webform-submission-form input {
  font-size: 14px;
}

[data-drupal-selector="edit-contact-information"] label {
  font-weight: 550;
  color: #1A1A1A;
}

div div [data-drupal-selector="edit-preferred-method-of-communication-check-all-that-apply"] .fieldset-legend {
  font-weight: 550;
  color: #1A1A1A;
  font-size: 14px;
  line-height: 24px;
}

.error-message:before,
.custom-error-message:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-55%);
  width: 16px;
  height: 16px;
  background-image: url(/themes/custom/ivnational/image/error-icon.svg);
  background-size: cover;
}

.error-message,
.custom-error-message {
  position: relative;
  padding-left: 30px;
  font-weight: var(--weight-number-400, 400);
  line-height: var(--line-height-leading-5, 20px);
  margin-top: 8px;
  margin-bottom: 8px;
}

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

#block-pagetitle {
  display: none;
}

.form-type-processed-text {
  font-family: GaspoSlab, sans-serif;
  color: #006680;
  font-size: 24px;
  line-height: 120%;
  font-weight: 500;
}

.form-type-processed-text p {
  margin-bottom: 24px;
}

.webform-submission-form:has(.this-is-page-1) .form-type-processed-text p {
  margin-bottom: 32px;
}

[data-drupal-selector="edit-contact-information"] > legend {
  margin-bottom: 24px;
}

.webform-submission-form .fieldset-wrapper > .js-form-item {
  margin-bottom: 24px !important;
}

#edit-enter-your-address--wrapper {
  margin-bottom: 0 !important;
}

.webform-submission-form .fieldset-wrapper > * label {
  margin-bottom: 8px;
}

.node__content > div:first-child {
  border-bottom: 1px solid #e5e5e5;
}

.fieldset-legend {
  color: #1A1A1A;
  font-size: 14px;
  font-weight: 550;
  line-height: 24px;
}

.fieldset-legend span,
label span {
  color: #808080;
  font-weight: 400;
  margin-left: 8px;
}

.this-is-page-1 > .form-item > legend .fieldset-legend {
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
}

[data-drupal-selector="edit-preferred-method-of-communication-check-all-that-apply"] label {
  padding-top: 3px;
}

.form-check .form-check-input {
  margin-top: 3px;
}

[data-drupal-selector="edit-preferred-method-of-communication-check-all-that-apply"] input.form-check-input {
  margin-top: 7px;
}

.webform-submission-form {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  padding: 48px;
  background: #fff;
  margin-top: 48px;
  margin-bottom: 48px;
  border-radius: 16px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.05),
    0 1px 1px -0.5px rgba(0, 0, 0, 0.05),
    0 3px 3px -1.5px rgba(0, 0, 0, 0.05),
    0 6px 6px -3px rgba(0, 0, 0, 0.05),
    0 12px 12px -6px rgba(0, 0, 0, 0.05),
    0 24px 24px -12px rgba(0, 0, 0, 0.05),
    0 48px 48px -24px rgba(0, 0, 0, 0.05);
}

header#header {
  display: none;
}

div#main-wrapper {
  margin-top: inherit;
  padding-top: inherit;
  border: inherit;
}

.node__content {
  margin-top: inherit;
}

footer.site-footer {
  display: none;
}

@media (min-width: 768px) {
  .webform-progress {
    position: absolute;
    transform: translate(-50%, -210px);
    width: 40vw;
    margin: auto;
    left: 50%;
  }
}

@media (max-width: 767px) {
  .progress-tracker {
    margin-top: 0;
    margin-bottom: 32px;
  }
}

div div .form-control:not(.form-submit),
div div .form-select {
  width: 100%;
}

.webform-progress-tracker .progress-step.is-complete .progress-marker::before,
.webform-progress-tracker .progress-step.is-complete:hover .progress-marker::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="33" height="32" viewBox="0 0 33 32" fill="none"><rect x="0.632812" width="32" height="32" rx="16" fill="%23006680"/><path fill-rule="evenodd" clip-rule="evenodd" d="M23.3367 10.1525C23.4152 10.2122 23.4812 10.2867 23.5309 10.3719C23.5806 10.457 23.613 10.5512 23.6263 10.6489C23.6396 10.7466 23.6335 10.846 23.6083 10.9413C23.5832 11.0367 23.5394 11.1261 23.4797 11.2045L15.4797 21.7045C15.4148 21.7896 15.3324 21.8598 15.2382 21.9104C15.1439 21.961 15.0399 21.9909 14.9332 21.998C14.8264 22.0051 14.7194 21.9892 14.6193 21.9516C14.5192 21.9139 14.4282 21.8552 14.3527 21.7795L9.85266 17.2795C9.72018 17.1374 9.64806 16.9493 9.65148 16.755C9.65491 16.5607 9.73362 16.3753 9.87104 16.2379C10.0085 16.1005 10.1938 16.0218 10.3881 16.0184C10.5824 16.0149 10.7705 16.0871 10.9127 16.2195L14.8067 20.1125L22.2867 10.2955C22.407 10.1375 22.5852 10.0337 22.7821 10.0069C22.9789 9.98005 23.1784 10.0324 23.3367 10.1525Z" fill="white"/></svg>');
  height: 32px;
  width: 33px;
  top: -4px;
}

.webform-progress-tracker .progress-step.is-active .progress-marker::before {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="33" height="32" viewBox="0 0 33 32" fill="none"><rect x="1.63281" y="1" width="30" height="30" rx="15" fill="white"/><rect x="1.63281" y="1" width="30" height="30" rx="15" stroke="%23006680" stroke-width="2"/><rect x="11.6328" y="11" width="10" height="10" rx="5" fill="%23006680"/></svg>');
  height: 32px;
  width: 33px;
  top: -4px;
}

.webform-progress-tracker .progress-step:not(.is-active) .progress-marker::before,
.webform-progress-tracker .progress-step:hover .progress-marker::before,
.webform-progress-tracker .progress-step .progress-marker::after {
  background-color: #e5e5e5;
}

.webform-progress-tracker .progress-step.is-complete .progress-marker::before,
.webform-progress-tracker .progress-step.is-complete:hover .progress-marker::before,
.webform-progress-tracker .progress-step.is-complete .progress-marker::after {
  background-color: #006680;
}

.webform-progress-tracker .progress-marker::before {
  content: '';
}

.webform-progress-tracker .progress-title {
  display: none;
}

body:has(.webform-submission-form) .sidebar_first {
  display: none;
}

.light-gray-background {
  min-height: 100vh;
}


input.webform-button--previous {
  background-color: #fff !important;
  color:#414651 !important;
  &:hover {
    background-color: #f7f7f7 !important;
  }
}

.webform-submission-form input.form-submit {
  will-change: color;
  will-change: border;
}

.webform-submission-volunteer-form .form-actions {
  display: block;
}

.webform-submission-volunteer-form .form-actions .button {
  width: 100%;
}
.webform-submission-volunteer-form .webform-button--previous {
  margin-bottom: 16px !important;
}

@media (min-width: 768px) {
  .webform-submission-volunteer-form .form-actions {
    align-self: flex-end;
    margin-left: -48px;
    margin-right: -48px;
    padding-left: 16px;
    padding-right: 16px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    min-height: 82px;
    align-items: center;
    border-radius: 0 0 16px 16px;
    border-top: 1px solid var(--border-secondary-200, #e5e5e5);
    background: var(--bg-secondary-50, #f7f7f7);
  }
  .webform-submission-volunteer-form .form-actions .button {
    width: auto;
  }

  .webform-submission-volunteer-form .webform-button--previous {
    margin-bottom: 0 !important;
  }

  .webform-submission-form {
    padding-bottom: 0;
  }
}

@media (max-width: 767px) {
  input.webform-button--previous {
    margin-bottom: 16px;
  }
}

.form-control.is-invalid,
.was-validated .form-control:invalid,
.form-select.is-invalid,
.was-validated .form-select:invalid {
  border-color: #dc2626;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M18 10C18 12.1217 17.1571 14.1566 15.6569 15.6569C14.1566 17.1571 12.1217 18 10 18C7.87827 18 5.84344 17.1571 4.34315 15.6569C2.84285 14.1566 2 12.1217 2 10C2 7.87827 2.84285 5.84344 4.34315 4.34315C5.84344 2.84285 7.87827 2 10 2C12.1217 2 14.1566 2.84285 15.6569 4.34315C17.1571 5.84344 18 7.87827 18 10ZM10 5C10.1989 5 10.3897 5.07902 10.5303 5.21967C10.671 5.36032 10.75 5.55109 10.75 5.75V10.25C10.75 10.4489 10.671 10.6397 10.5303 10.7803C10.3897 10.921 10.1989 11 10 11C9.80109 11 9.61032 10.921 9.46967 10.7803C9.32902 10.6397 9.25 10.4489 9.25 10.25V5.75C9.25 5.55109 9.32902 5.36032 9.46967 5.21967C9.61032 5.07902 9.80109 5 10 5ZM10 15C10.2652 15 10.5196 14.8946 10.7071 14.7071C10.8946 14.5196 11 14.2652 11 14C11 13.7348 10.8946 13.4804 10.7071 13.2929C10.5196 13.1054 10.2652 13 10 13C9.73478 13 9.48043 13.1054 9.29289 13.2929C9.10536 13.4804 9 13.7348 9 14C9 14.2652 9.10536 14.5196 9.29289 14.7071C9.48043 14.8946 9.73478 15 10 15Z" fill="%23ef4444"/></svg>');
}

div#main-wrapper {
  background: #f7f7f7;
}

input.webform-button--next,
input.webform-button--next:hover {
  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="M5.52827 3.52925C5.78862 3.2689 6.21073 3.2689 6.47108 3.52925L10.4711 7.52925C10.7314 7.7896 10.7314 8.21171 10.4711 8.47206L6.47108 12.4721C6.21073 12.7324 5.78862 12.7324 5.52827 12.4721C5.26792 12.2117 5.26792 11.7896 5.52827 11.5292L9.05687 8.00065L5.52827 4.47206C5.26792 4.21171 5.26792 3.7896 5.52827 3.52925Z" fill="white"/></svg>');
  background-size: cover;
  background-position: top 15px right 18px;
  background-size: 16px;
  background-repeat: no-repeat;
  padding-right: 43px !important;
}

input.webform-button--previous,
input.webform-button--previous:hover {
  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="M10.4711 3.52925C10.7314 3.7896 10.7314 4.21171 10.4711 4.47206L6.94248 8.00065L10.4711 11.5292C10.7314 11.7896 10.7314 12.2117 10.4711 12.4721C10.2107 12.7324 9.78862 12.7324 9.52827 12.4721L5.52827 8.47206C5.26792 8.21171 5.26792 7.7896 5.52827 7.52925L9.52827 3.52925C9.78862 3.2689 10.2107 3.2689 10.4711 3.52925Z" fill="%231A1A1A"/></svg>');
  background-size: cover;
  background-position: top 15px left 18px;
  background-size: 16px;
  background-repeat: no-repeat;
  padding-left: 43px !important;
}

.webform-submission-form input.form-submit {
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 16px;
}

.webform-confirmation__message *:first-child {
  color: #006680;
  font-family: GaspoSlab, sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  margin-bottom: 16px;
}

.webform-confirmation__message {
  margin-bottom: 24px;
}

.webform-confirmation__back {
  padding-bottom: 48px;
}

.webform-confirmation__back .btn-outline-text-gray {
  padding: 16px 24px;
  margin-bottom: 0;
}

.checkbox .mb-3 {
  margin-bottom: 8px !important;
}

[data-drupal-selector="edit-preferred-method-of-communication-check-all-that-apply"] .js-form-item {
  margin-bottom: 0 !important;
}

.js-form-type-checkbox label {
  font-weight: 350;
}