/* Formulier-UI: geldt op de hele site (keuzehulp, offerte, bespaarhulp). */

/* ---------- tooltips breder en leesbaar ---------- */
/*
 * De tooltips zijn absoluut gepositioneerd binnen het 18px brede info-icoon, dus
 * ze krimpen naar een paar tekens per regel en worden heel lang. Hier krijgen ze
 * een vaste breedte en links uitgelijnde tekst. De selector heeft een body-prefix
 * omdat de plugin-CSS later in de pagina wordt geladen.
 */
body .gform_wrapper.gravity-theme .gform_fields .gfield_radio .gchoice label p i .tooltip,
body .gform_wrapper.gravity-theme .gform_fields .gfield_checkbox .gchoice label p i .tooltip,
body .gform_wrapper.gravity-theme .gform_fields .waarom .tooltip,
body .gform_wrapper.gravity-theme .gform_fields h2 i .tooltip {
  width: 280px !important;
  max-width: 280px !important;
  padding: 10px 14px !important;
  text-align: left !important;
  line-height: 1.45 !important;
}

@media all and (max-width: 991px) {
  body .gform_wrapper.gravity-theme .gform_fields .gfield_radio .gchoice label p i .tooltip,
  body .gform_wrapper.gravity-theme .gform_fields .gfield_checkbox .gchoice label p i .tooltip {
    left: auto !important;
    right: 26px !important;
  }
}

@media all and (max-width: 767px) {
  body .gform_wrapper.gravity-theme .gform_fields .gfield_radio .gchoice label p i .tooltip,
  body .gform_wrapper.gravity-theme .gform_fields .gfield_checkbox .gchoice label p i .tooltip,
  body .gform_wrapper.gravity-theme .gform_fields .waarom .tooltip,
  body .gform_wrapper.gravity-theme .gform_fields h2 i .tooltip {
    width: 210px !important;
    max-width: 210px !important;
  }
}

/* ---------- knoppen en keuzekaarten in formulieren ---------- */
.gform_wrapper input[type="submit"],
.gform_wrapper button,
.gform_wrapper .gform_button,
.gform_wrapper .gform_next_button,
.gform_wrapper .gform_previous_button,
.gform_wrapper .gchoice,
.gform_wrapper .gchoice label {
  cursor: pointer;
}

/* ---------- keuzekaarten: 30px padding links en rechts ---------- */
/*
 * De label had geen padding, waardoor de tekst tegen de linkerrand stond en het
 * info-icoon (absoluut gepositioneerd op right: 0 binnen de <p>) tegen de
 * rechterrand. Padding op de label zet beide 30px naar binnen.
 */
.gform_wrapper.gravity-theme .gform_fields .gfield_radio .gchoice label,
.gform_wrapper.gravity-theme .gform_fields .gfield_checkbox .gchoice label {
  padding-left: 30px !important;
  padding-right: 30px !important;
}