/* Header link styling */
p.header-link {
  margin:10px 10px 0 0;
  line-height: 24px;
  color: #626269 !important;
}
img#logo-img{margin:10px 0;}
.toggle-container[data-position="yes"] .slider-circle,
.toggle-container[data-position="no"] .slider-circle {
    
    background-color: #3a2456 !important;
}

.colored{color:#6D6D56C !important;}
/* [UPD 2026-10-28b] colour from --zg-heading: purple, white on dark backgrounds (see THEMES) */
h1,h2,h3{font-family:'Arial MT Pro', Arial, Helvetica, sans-serif !important;color:var(--zg-heading, #3a2456) !important;
}      
ol li::before{background:var(--zg-bullet, #3a2456) !important;color:var(--zg-bullet-text, #ffffff) !important;}

ul li::marker{
color:var(--zg-bullet, #3a2456) !important
}


.option-row input[type="radio"]:checked{
background-color: #3a2456;
   
    border: 1px solid #3a2456;
    box-shadow: 0px 0px 0px 5px #3a2456 inset !important;
   

}


a, a:hover{ color:var(--zg-link, #3a2456) !important;  }
.footer a:hover{color:#fff !important;}

/* Form loading state (buttons: see BUTTONS at the end) */
.loading {  
color: #fff !important;
background:#3a2456!important;
}
.white{color:#fff !important;}

input[type="checkbox"]:checked {
    border: 5px solid #3a2456 !important;
    opacity: 1 !important;
}

/* SEE https://angel-rs.github.io/css-color-filter-generator/ FOR COLOR CHANGES */
img#new-overlay, .icons img{filter: brightness(0) saturate(100%) invert(15%) sepia(14%) saturate(4406%) hue-rotate(235deg) brightness(94%) contrast(93%);}
.banner-lpart *{color:#fff !important;}

/* ==========================================================================
   THEMES [UPD 2026-10-28b]
   The module themes "light" and "dark" (and the light / dark text cards, the
   focus form and the dark form card) in Zeigo colours instead of the SE greens.
   Colours measured on zeigo.com 2026-10-28:
     dark  #2f1e47  (deep purple, zeigo.com footer)
     light #d0ecf9  (light blue, start of the zeigo.com light gradient)
     accent on dark #a0daf3 (light blue of the button gradient)
   White and grey themes stay as they are.
   On dark: headings white, links and list bullets light blue.
   The :is(#zg#zg, *) part: see BUTTONS below.
   ========================================================================== */
:root {
  --zg-purple: #3a2456;
  --zg-dark: #2f1e47;
  --zg-light: #d0ecf9;
  --zg-accent: #a0daf3;
  --zg-grad: linear-gradient(277deg, #a0daf3 25%, #42b4e6);
  --zg-heading: #3a2456;
  --zg-link: #3a2456;
  --zg-bullet: #3a2456;
  --zg-bullet-text: #ffffff;
  --zg-outline: #3a2456;
  --zg-outline-hover-bg: #3a2456;
  --zg-outline-hover-text: #ffffff;
}

/* Module backgrounds (all modules use --module-bg) */
:is(.bottom-slot, .header, .form-columns) > table:is(#zg#zg, *):has(:is(.fw-theme--dark, .fwv-theme--dark, .fwi-theme--dark, .fwt-theme--dark, .fwc-theme--dark, .fwg-theme--dark, .fwq-theme--dark, .fwf-theme--dark)) {
  --module-bg: #2f1e47 !important;
  --module-link: #a0daf3 !important;
}
:is(.bottom-slot, .header, .form-columns) > table:is(#zg#zg, *):has(:is(.fw-theme--light, .fwv-theme--light, .fwi-theme--light, .fwt-theme--light, .fwc-theme--light, .fwg-theme--light, .fwq-theme--light, .fwf-theme--light)) {
  --module-bg: #d0ecf9 !important;
  --module-link: #3a2456 !important;
}
/* Modules with a background image behave as dark: links light blue */
:is(.bottom-slot, .header, .form-columns) > table:is(#zg#zg, *):has(:is(.fw-bg--custom, .fwv-bg--custom, .fwt-bg--custom, .fwc-bg--custom, .fwg-bg--custom, .fwq-bg--custom)) {
  --module-link: #a0daf3 !important;
}

/* Text cards (05. Image + Text, older Image + Text, 07. Testimonial) */
:is(.bottom-slot, .form-columns) > table:has(.fwi-card--dark) .fwi-text:is(#zg#zg, *),
:is(.bottom-slot, .form-columns) > table:has(.fwc-card--dark) .fwc-text:is(#zg#zg, *),
:is(.bottom-slot, .form-columns) > table:has(.fwq-card--dark) .fwq-card:is(#zg#zg, *) {
  background-color: #2f1e47 !important;
  --module-link: #a0daf3 !important;
}
:is(.bottom-slot, .form-columns) > table:has(.fwi-card--light) .fwi-text:is(#zg#zg, *),
:is(.bottom-slot, .form-columns) > table:has(.fwc-card--light) .fwc-text:is(#zg#zg, *),
:is(.bottom-slot, .form-columns) > table:has(.fwq-card--light) .fwq-card:is(#zg#zg, *) {
  background-color: #d0ecf9 !important;
  --module-link: #3a2456 !important;
}

/* 06. Video(s) & Text: video placeholder, arrows */
:is(.bottom-slot, .form-columns) > table:has(.fwg-cfg) .fwg-media:is(#zg#zg, *) {
  background: #2f1e47 !important;
}
:is(.bottom-slot, .form-columns) > table:has(.fwg-cfg):is(#zg#zg, *) {
  --fwg-arrow-color: #3a2456 !important;
}
:is(.bottom-slot, .form-columns) > table:has(.fwg-cfg) .fwg-arrow:is(#zg#zg, *):hover {
  background: #d0ecf9 !important;
}

/* Form card (form style "darkgreen"): Zeigo dark purple, light blue links */
#form-column:is(#zg#zg#zg, *):has(#scForm.sc-form--darkgreen),
#scForm.sc-form--darkgreen:is(#zg#zg#zg, *) {
  background-color: #2f1e47 !important;
}
#scForm:is(.sc-form--dark, .sc-form--darkgreen) a:not(.buttonstyles):is(#zg#zg#zg, *) {
  color: #a0daf3 !important;
}

/* Dark backgrounds: white headings, light blue links and bullets, white
   outline buttons. Banner, dark theme, module with a background image, dark
   text cards, focus form on dark or image, dark form, the old template's
   banner and dark module. */
:is(.bottom-slot, .header, .form-columns) > table:is(
  :has(.fwb-cfg),
  :has(:is(.fw-theme--dark, .fwv-theme--dark, .fwi-theme--dark, .fwt-theme--dark, .fwc-theme--dark, .fwg-theme--dark, .fwq-theme--dark, .fwf-theme--dark)),
  :has(:is(.fw-bg--custom, .fwv-bg--custom, .fwt-bg--custom, .fwc-bg--custom, .fwg-bg--custom, .fwq-bg--custom)),
  :has(.fwf-cfg.fwf-img--on:not(.fwf-theme--white, .fwf-theme--grey, .fwf-theme--light))
),
:is(.bottom-slot, .form-columns) > table:has(.fwi-card--dark) .fwi-text,
:is(.bottom-slot, .form-columns) > table:has(.fwc-card--dark) .fwc-text,
:is(.bottom-slot, .form-columns) > table:has(.fwq-card--dark) .fwq-card,
#form-column:has(#scForm:is(.sc-form--dark, .sc-form--darkgreen)),
.banner-lpart,
#dark-module {
  --zg-heading: #ffffff;
  --zg-link: #a0daf3;
  --zg-bullet: #a0daf3;
  --zg-bullet-text: #2f1e47;
  --zg-outline: #ffffff;
  --zg-outline-hover-bg: #ffffff;
  --zg-outline-hover-text: #3a2456;
}
/* Light cards inside a dark module: back to purple */
:is(.bottom-slot, .form-columns) > table:has(.fwi-card--light) .fwi-text,
:is(.bottom-slot, .form-columns) > table:has(.fwc-card--light) .fwc-text,
:is(.bottom-slot, .form-columns) > table:has(.fwq-cfg:is(.fwq-card--white, .fwq-card--grey, .fwq-card--light)) .fwq-card {
  --zg-heading: #3a2456;
  --zg-link: #3a2456;
  --zg-bullet: #3a2456;
  --zg-bullet-text: #ffffff;
  --zg-outline: #3a2456;
  --zg-outline-hover-bg: #3a2456;
  --zg-outline-hover-text: #ffffff;
}

/* ==========================================================================
   BUTTONS [UPD 2026-10-28]
   Zeigo buttons as on zeigo.com (measured 2026-10-28):
   - filled: light blue gradient, purple text #3a2456, uppercase, pill shape;
     hover shifts the gradient and grows the button 3%
   - outline: 1.5px border; white on dark backgrounds (hover: white fill,
     purple text), purple on light backgrounds (hover: purple fill, white text)
   Covers .buttonstyles in every module (incl. the 2027 template modules and
   their @button_type setting), the form submit and the multi-step Next button.

   Why the :is(#zg#zg, *) part: the 2027 stylesheet styles buttons with long
   module selectors and !important. That part adds the weight of two IDs
   without matching anything extra, so these rules win on every page without
   touching the shared stylesheet. Keep it on every button rule below.
   Zeigo uses the Mark Pro font; the page keeps its own font (not licensed here).
   Colour variables (--zg-*) and the dark / light contexts: see THEMES above.
   ========================================================================== */
/* Filled (default for every button) */
:is(.buttonstyles, .sc-form__submit, .sc-msf-next):is(#zg#zg, *) {
  display: inline-block !important;
  box-sizing: border-box !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 16px 24px !important;
  border: 1.5px solid transparent !important;
  border-radius: 45px !important;
  background: var(--zg-grad) 0 0 / 200% auto !important;
  box-shadow: none !important;
  color: var(--zg-purple) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  text-align: center !important;
  scale: 1;
  transition: background-position .3s, background-color .3s, color .3s, scale .3s !important;
}
:is(.buttonstyles, .sc-form__submit, .sc-msf-next):is(#zg#zg, *):is(:hover, :active):not(:disabled) {
  background-position: 100% 0 !important;
  color: var(--zg-purple) !important;
  scale: 1.03;
}
:is(.buttonstyles, .sc-form__submit, .sc-msf-next):is(#zg#zg, *):active:not(:disabled) {
  scale: 1;
}

/* Outline: .buttonstyles--outline, all buttons with @button_type = outline,
   banner with @button_type = outline */
.buttonstyles.buttonstyles--outline:is(#zg#zg, *),
:is(.bottom-slot, .form-columns) > table:has(.mod-btn--outline) .buttonstyles:is(#zg#zg, *),
:is(.bottom-slot, .header, .form-columns) > table:has(.fwb-cfg:is(.fwb-btn--outline, .fwb-btn--light)) .buttonstyles:is(#zg#zg, *) {
  background: transparent !important;
  border-color: var(--zg-outline) !important;
  color: var(--zg-outline) !important;
}
.buttonstyles.buttonstyles--outline:is(#zg#zg, *):is(:hover, :active),
:is(.bottom-slot, .form-columns) > table:has(.mod-btn--outline) .buttonstyles:is(#zg#zg, *):is(:hover, :active),
:is(.bottom-slot, .header, .form-columns) > table:has(.fwb-cfg:is(.fwb-btn--outline, .fwb-btn--light)) .buttonstyles:is(#zg#zg, *):is(:hover, :active) {
  background: var(--zg-outline-hover-bg) !important;
  color: var(--zg-outline-hover-text) !important;
  scale: 1;
}

/* @button_type = normal turns outline buttons into filled ones */
:is(.bottom-slot, .form-columns) > table:has(.mod-btn--normal) .buttonstyles.buttonstyles--outline:is(#zg#zg, *) {
  background: var(--zg-grad) 0 0 / 200% auto !important;
  border-color: transparent !important;
  color: var(--zg-purple) !important;
}
:is(.bottom-slot, .form-columns) > table:has(.mod-btn--normal) .buttonstyles.buttonstyles--outline:is(#zg#zg, *):is(:hover, :active) {
  background-position: 100% 0 !important;
  color: var(--zg-purple) !important;
  scale: 1.03;
}

/* Keyboard focus */
:is(.buttonstyles, .sc-form__submit, .sc-msf-next):is(#zg#zg, *):focus-visible {
  outline: 2px solid var(--zg-outline) !important;
  outline-offset: 3px !important;
}

@media (prefers-reduced-motion: reduce) {
  :is(.buttonstyles, .sc-form__submit, .sc-msf-next):is(#zg#zg, *) {
    transition: none !important;
    scale: 1 !important;
  }
}

/* ==========================================================================
   NEW MODULES: 08. Icons / Info and 15. Mosaic [UPD 2026-10-30]
   Brand colours for the two newest modules (they came after this sheet):
   - dark and light themes use the Zeigo colours, like the other modules;
   - pictos and numbers: #3a2456 on light backgrounds, #a0daf3 on dark ones (the
     green library pictos are recoloured with a CSS filter);
   - the gradient theme and the ovals use Zeigo colours instead of the
     green preset images;
   - mosaic colour tiles: dark = #2f1e47, green = #3a2456, light = #d0ecf9.
   ========================================================================== */
:is(.bottom-slot, .header, .form-columns) > table:is(#zg#zg, *):has(:is(.fwn-theme--dark, .fwo-theme--dark)) {
  --module-bg: #2f1e47 !important;
  --module-link: #a0daf3 !important;
}
:is(.bottom-slot, .header, .form-columns) > table:is(#zg#zg, *):has(:is(.fwn-theme--light, .fwo-theme--light)) {
  --module-bg: #d0ecf9 !important;
}
:is(.bottom-slot, .form-columns) > table:is(
  :has(:is(.fwn-theme--dark, .fwo-theme--dark, .fwn-theme--gradient)),
  :has(:is(.fwn-bg--custom, .fwo-bg--custom))
) {
  --zg-heading: #ffffff;
  --zg-link: #a0daf3;
  --zg-bullet: #a0daf3;
  --zg-bullet-text: #2f1e47;
  --zg-outline: #ffffff;
  --zg-outline-hover-bg: #ffffff;
  --zg-outline-hover-text: #3a2456;
}
:is(.bottom-slot, .form-columns) > table:has(.fwn-cfg):is(#zg#zg, *) {
  --fwn-accent: #3a2456 !important;
  --fwn-icon-filter: brightness(0) saturate(100%) invert(14%) sepia(38%) saturate(1754%) hue-rotate(234deg) brightness(96%) contrast(93%) !important;
}
:is(.bottom-slot, .form-columns) > table:has(.fwn-cfg.fwn-theme--dark):is(#zg#zg, *) {
  --fwn-accent: #a0daf3 !important;
  --fwn-icon-filter: brightness(0) saturate(100%) invert(82%) sepia(3%) saturate(5879%) hue-rotate(176deg) brightness(105%) contrast(91%) !important;
}
:is(.bottom-slot, .form-columns) > table:has(.fwn-cfg:is(.fwn-theme--gradient, .fwn-bg--custom)):is(#zg#zg, *) {
  --fwn-accent: #ffffff !important;
  --fwn-icon-filter: brightness(0) invert(1) !important;
}
:is(.bottom-slot, .form-columns) > table:has(.fwn-cfg.fwn-theme--gradient.fwn-bg--none):is(#zg#zg, *) {
  background-image: linear-gradient(105deg, #2f1e47 0%, #2f1e47 45%, #42b4e6 100%) !important;
}
:is(.bottom-slot, .form-columns) > table:has(.fwn-cfg:is(.fwn-oval--oval1, .fwn-oval--oval2)) .fwn-icon:is(#zg#zg, *)::before {
  top: 6px !important;
  right: 10px !important;
  bottom: 6px !important;
  left: 10px !important;
  border-radius: 50% !important;
  transform: rotate(-28deg) !important;
  background: linear-gradient(45deg, #2f1e47 15%, #42b4e6 100%) !important;
}
:is(.bottom-slot, .form-columns) > table:has(.fwn-cfg.fwn-oval--oval2) .fwn-icon:is(#zg#zg, *)::before {
  background: linear-gradient(225deg, #2f1e47 15%, #42b4e6 100%) !important;
}
:is(.bottom-slot, .form-columns) > table:has(.fwo-cfg.fwo-t1--dark) .fwo-grid > .fwo-tile:nth-of-type(1):is(#zg#zg, *) { background-color: #2f1e47 !important; --fwo-tile-text: #ffffff !important; }
:is(.bottom-slot, .form-columns) > table:has(.fwo-cfg.fwo-t1--green) .fwo-grid > .fwo-tile:nth-of-type(1):is(#zg#zg, *) { background-color: #3a2456 !important; --fwo-tile-text: #ffffff !important; }
:is(.bottom-slot, .form-columns) > table:has(.fwo-cfg.fwo-t1--light) .fwo-grid > .fwo-tile:nth-of-type(1):is(#zg#zg, *) { background-color: #d0ecf9 !important; --fwo-tile-text: #3a2456 !important; }
:is(.bottom-slot, .form-columns) > table:has(.fwo-cfg.fwo-t2--dark) .fwo-grid > .fwo-tile:nth-of-type(2):is(#zg#zg, *) { background-color: #2f1e47 !important; --fwo-tile-text: #ffffff !important; }
:is(.bottom-slot, .form-columns) > table:has(.fwo-cfg.fwo-t2--green) .fwo-grid > .fwo-tile:nth-of-type(2):is(#zg#zg, *) { background-color: #3a2456 !important; --fwo-tile-text: #ffffff !important; }
:is(.bottom-slot, .form-columns) > table:has(.fwo-cfg.fwo-t2--light) .fwo-grid > .fwo-tile:nth-of-type(2):is(#zg#zg, *) { background-color: #d0ecf9 !important; --fwo-tile-text: #3a2456 !important; }
:is(.bottom-slot, .form-columns) > table:has(.fwo-cfg.fwo-t3--dark) .fwo-grid > .fwo-tile:nth-of-type(3):is(#zg#zg, *) { background-color: #2f1e47 !important; --fwo-tile-text: #ffffff !important; }
:is(.bottom-slot, .form-columns) > table:has(.fwo-cfg.fwo-t3--green) .fwo-grid > .fwo-tile:nth-of-type(3):is(#zg#zg, *) { background-color: #3a2456 !important; --fwo-tile-text: #ffffff !important; }
:is(.bottom-slot, .form-columns) > table:has(.fwo-cfg.fwo-t3--light) .fwo-grid > .fwo-tile:nth-of-type(3):is(#zg#zg, *) { background-color: #d0ecf9 !important; --fwo-tile-text: #3a2456 !important; }
:is(.bottom-slot, .form-columns) > table:has(.fwo-cfg.fwo-t4--dark) .fwo-grid > .fwo-tile:nth-of-type(4):is(#zg#zg, *) { background-color: #2f1e47 !important; --fwo-tile-text: #ffffff !important; }
:is(.bottom-slot, .form-columns) > table:has(.fwo-cfg.fwo-t4--green) .fwo-grid > .fwo-tile:nth-of-type(4):is(#zg#zg, *) { background-color: #3a2456 !important; --fwo-tile-text: #ffffff !important; }
:is(.bottom-slot, .form-columns) > table:has(.fwo-cfg.fwo-t4--light) .fwo-grid > .fwo-tile:nth-of-type(4):is(#zg#zg, *) { background-color: #d0ecf9 !important; --fwo-tile-text: #3a2456 !important; }
:is(.bottom-slot, .form-columns) > table:has(.fwo-cfg.fwo-t5--dark) .fwo-grid > .fwo-tile:nth-of-type(5):is(#zg#zg, *) { background-color: #2f1e47 !important; --fwo-tile-text: #ffffff !important; }
:is(.bottom-slot, .form-columns) > table:has(.fwo-cfg.fwo-t5--green) .fwo-grid > .fwo-tile:nth-of-type(5):is(#zg#zg, *) { background-color: #3a2456 !important; --fwo-tile-text: #ffffff !important; }
:is(.bottom-slot, .form-columns) > table:has(.fwo-cfg.fwo-t5--light) .fwo-grid > .fwo-tile:nth-of-type(5):is(#zg#zg, *) { background-color: #d0ecf9 !important; --fwo-tile-text: #3a2456 !important; }

/* ==========================================================================
   DARK MODE [UPD 2026-10-30]
   Follows the visitor's device setting, like the dark mode in the 2027
   stylesheet (part DM): the page turns #121212 and the light themes turn dark.
   This part swaps the Zeigo colours to their "on dark" set everywhere:
   headings and text white, links, bullets, pictos and numbers #a0daf3, buttons as
   on the dark theme. The Zeigo light theme becomes #221a30, light text
   cards #2c2240; the dark theme stays #2f1e47. The SE light green from part DM
   (links, form heading, radio buttons) is replaced by #a0daf3.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
:root {
  --zg-heading: #ffffff;
  --zg-link: #a0daf3;
  --zg-bullet: #a0daf3;
  --zg-bullet-text: #2f1e47;
  --zg-outline: #ffffff;
  --zg-outline-hover-bg: #ffffff;
  --zg-outline-hover-text: #3a2456;
}
:is(.bottom-slot, .header, .form-columns) > table:is(#zg#zg#zg, *):has([class*="-cfg"]:is([class*="-theme--white"], [class*="-theme--none"], [class*="-theme--grey"], [class*="-theme--light"])) {
  --module-link: #a0daf3 !important;
}
:is(.bottom-slot, .header, .form-columns) > table:is(#zg#zg#zg, *):has(:is(.fw-theme--light, .fwv-theme--light, .fwi-theme--light, .fwt-theme--light, .fwc-theme--light, .fwg-theme--light, .fwq-theme--light, .fwf-theme--light, .fwo-theme--light, .fwn-theme--light)) {
  --module-bg: #221a30 !important;
}
:is(.bottom-slot, .form-columns) > table:has(.fwi-card--light) .fwi-text:is(#zg#zg#zg, *),
:is(.bottom-slot, .form-columns) > table:has(.fwc-card--light) .fwc-text:is(#zg#zg#zg, *),
:is(.bottom-slot, .form-columns) > table:has(.fwq-cfg:is(.fwq-card--white, .fwq-card--grey, .fwq-card--light)) .fwq-card:is(#zg#zg#zg, *) {
  background-color: #2c2240 !important;
  --module-link: #a0daf3 !important;
  --zg-heading: #ffffff;
  --zg-link: #a0daf3;
  --zg-bullet: #a0daf3;
  --zg-bullet-text: #2f1e47;
  --zg-outline: #ffffff;
  --zg-outline-hover-bg: #ffffff;
  --zg-outline-hover-text: #3a2456;
}
:is(.bottom-slot, .form-columns) > table:has(.fwn-cfg:is(.fwn-theme--white, .fwn-theme--grey, .fwn-theme--light, .fwn-theme--none):not(.fwn-bg--custom)):is(#zg#zg#zg, *) {
  --fwn-accent: #a0daf3 !important;
  --fwn-icon-filter: brightness(0) saturate(100%) invert(82%) sepia(3%) saturate(5879%) hue-rotate(176deg) brightness(105%) contrast(91%) !important;
}
html body #form-column h3.A1 .B1:is(#zg#zg#zg, *) {
  color: var(--zg-heading, #ffffff) !important;
}
html body #form-column h3.A1 img#new-overlay:is(#zg#zg#zg, *),
html body .icons img:is(#zg#zg#zg, *) {
  filter: brightness(0) saturate(100%) invert(82%) sepia(3%) saturate(5879%) hue-rotate(176deg) brightness(105%) contrast(91%) !important;
}
html body #scForm input[type="radio"]:checked:is(#zg#zg#zg, *) {
  background-color: #a0daf3 !important;
  border-color: #a0daf3 !important;
  box-shadow: 0 0 0 5px #a0daf3 inset !important;
}
html body #scForm input[type="checkbox"]:checked:is(#zg#zg#zg, *) {
  border-color: #a0daf3 !important;
}
}