homegrade_theme_production/resources/css/components/forms.css

form:not(.metabox-location-side):not(.metabox-location-normal):not(
    .metabox-location-advanced,
    .search-module__search-form
  ) {
  --secondary: #df1e1e;
  --secondary-darker: #bd1515;

  --gf-color-primary: var(--secondary);
  --gf-local-bg-color: var(--secondary);
  --gf-ctrl-btn-bg-color-primary: var(--secondary);

  --gform-theme-color-inside-control-primary: var(--secondary);
  --gform-theme-control-choice-check-color: var(--secondary);
  --gform-theme-control-button-background-color-control: var(--secondary);
  --gform-theme-local-background-color: var(--secondary);
  --gform-theme-control-file-drop-area-icon-color: var(--secondary);

  --gform-theme-control-button-background-color-hover-control: var(--secondary-darker);
  --gform-theme-color-inside-control-primary-darker: var(--secondary-darker);

  /* SUBMIT */
  --gform-theme-control-button-background-color-primary: var(--secondary);
  --gform-theme-control-button-background-color-focus-primary: var(--secondary);
  --gform-theme-control-button-color-primary: white;
  --gform-theme-control-button-background-color-hover-primary: var(--secondary-darker);

  --gform-theme-field-page-progress-bar-background-color-blue: var(--secondary);
  --gform-theme-local-border-color: transparent;
  --gform-theme-control-button-border-color-primary: transparent;
  --gform-theme-control-button-border-width-primary: 0px;

  --gform-theme-local-box-shadow: none;
  --gform-theme-control-box-shadow: none;
  --gform-theme-local-border-color: var(--secondary);
  --gform-theme-control-border-color-focus: var(--secondary);
  --gform-theme-control-box-shadow-focus: 0px 0 0 0px var(--secondary);

  select,
  textarea,
  input:not([type='submit']):not(
      .gform_next_button,
      .gform_previous_button,
      .search-module__search-form__input
    ) {
    @apply !border-neutral-400 !text-lg !font-semibold !border;
    line-height: 1 !important;

    &:focus-visible {
      outline: solid 1px;
      outline-offset: 3px !important;
      @apply outline-primary;
    }
  }

  input[type='text'] {
    @apply !py-6;
    text-indent: 6px !important;
  }

  input:not(
      [type='checkbox'],
      [type='submit'],
      [type='file'],
      [type='radio'],
      .gform-theme-button,
      .search-module__search-form__input
    ) {
    @apply !rounded-lg py-6;
  }
  select {
    @apply !rounded-lg !h-12 !pt-3 !text-base;
    text-indent: 6px !important;
  }

  input[type='submit'] {
    @apply !px-8 !py-3  !border-none !rounded-full !font-bold !text-lg;
  }
  input[type='file'] {
    @apply !rounded-lg;
  }
  label:not(.gform-field-label--type-sub):not(.gform-field-label--type-inline) {
    @apply !font-bold !text-neutral-900 !text-lg;
  }
  legend {
    @apply font-bold !text-neutral-900 !text-lg;
  }
  label {
    @apply !text-neutral-700 !text-base !font-medium;
  }
}

.gform_wrapper {
  .gform_title {
    @apply hidden;
  }
  .gfield_required_asterisk {
    @apply !text-3xl !inline-block;
    line-height: 0.5;
    transform: translateY(3px) !important;
    margin-top: -10px !important;
  }
  .gform_required_legend {
    .gfield_required {
      transform: translateY(12px) !important;
    }
  }
  .gfield_description {
    @apply !text-neutral-600 !text-sm !font-medium;
  }
  .gf_page_steps,
  .field_description_below {
    @apply !border-none;
  }
  .gf_step_active {
    @apply !text-secondary !font-semibold;
  }
  .gform-theme-button {
    @apply !rounded-full;
  }
  .gform_heading {
    @apply !pb-8;
  }
  .gf_progressbar {
    @apply !py-0;
  }
  .gf_progressbar_title {
    @apply !pb-3;
  }
  .gform_previous_button,
  .gform_next_button {
    @apply !border-none !bg-secondary !text-white !font-semibold !text-lg !px-6 !py-3;
  }
  .gsection_description {
    @apply !text-base;
  }
  .gsection_title {
    @apply !text-secondary !text-xl !font-bold !mb-0 !mt-4;
  }
  .gfield_validation_message {
    @apply !text-secondary !font-semibold;
  }
}
.gform_drop_area {
  @apply !bg-gray !border-neutral-400;
}

.gform_validation_errors {
  @apply !my-6;
}
.gform_confirmation_wrapper {
  @apply py-8  rounded-xl;
}
.gform_confirmation_message {
  @apply !bg-emerald-50 !text-emerald-700 !text-center !text-lg !font-semibold rounded-lg p-6;
}

.gfield_validation_message {
  @apply !text-secondary !font-semibold;
}

.gform_heading {
  @apply !hidden;
}
#gform_fields_18 {
  .publication-list {
    @apply mb-10;
  }
}
.section_titling + .gform_wrapper {
  @apply mt-16;
}

.homegrade-blocks-box-monoblock {
  .gform_wrapper {
    @apply max-w-5xl !mx-auto;
  }
}

/* .publications-amount-fr,
.publications-amount-nl {
  @apply !hidden;
} */

.field-order-paper-publications {
  @apply !grid   gap-x-12 gap-y-2;

  .brochure-order-field {
    @apply grid justify-end gap-3 items-center;
    grid-template-columns: auto 1fr 1fr auto;
    .thematique-tag,
    legend {
      @apply mt-6;
    }
    .thematique-tag {
      @apply !py-1 !px-4 !rounded-lg mr-4 flex items-center shrink-0;
      line-height: 1.7;
    }
    .thematique-icon {
      @apply w-8 mr-3 my-2;
    }
    legend {
      @apply block ml-0  !mr-auto !font-normal;
      font-weight: revert !important;
    }
    .preview-brochure {
      @apply !text-neutral-700 flex justify-center items-center w-fit mx-auto;
      &:after {
        content: ' ';
        @apply w-4 h-4 block  ml-3 bg-no-repeat bg-center bg-contain;
        background-image: url('../resources/img/graphic-assets/icone-external-link.svg');
      }
    }
    .inputs-container {
      @apply flex gap-4;
    }

    .publications-amount-fr,
    .publications-amount-nl {
      label {
        @apply block mx-auto;
      }
      input[type='number'] {
        @apply h-2 !w-16 !py-5;
      }
      #publications-amount__label-nl,
      #publications-amount__label-fr {
        @apply !text-neutral-600 uppercase !text-sm text-center;
      }
    }
    .legend {
      @apply col-start-2 col-span-2 text-neutral-500;
      line-height: 1.5;
    }
  }
}

#gform_wrapper_18 {
  @apply max-w-screen-lg;

  input[type='submit'] {
    @apply !mx-auto mt-6;
  }
  .gsection_description {
    @apply pt-2;
  }
  .gfield--type-section {
    border-bottom: 1px solid !important;
    @apply !border-neutral-300 pb-4;
  }
}