/* [UPD 2026-10-28] heading and link colours read --ek-* variables (see THEMES):
   black / red on light backgrounds, white on dark ones. */
h1,
h2,
h3 {
color: var(--ek-heading, #000) !important;
}
/*ol li{display:list-item;padding-left:15px;list-style:decimal}
ol li::before {
content:none; background:none !important;
}
ol{ margin: 20px 0 0 20px;}*/
.colored{ color: #d70929 !important;
}
ol li::before {
background:#d70929 !important
}

.toggle-container[data-position="yes"] .slider-circle,
.toggle-container[data-position="no"] .slider-circle {
    
    background-color: #d70929 !important;
}
input[type="checkbox"]:checked {
    border: 5px solid #d70929 !important;
    opacity: 1 !important;
  
}

/* [UPD 2026-10-28] old button rules now only for the old template's header
   (.navHeader); all other buttons: see BUTTONS at the end. */
.navHeader .buttonstyles {
transition:all 0.5s;
border: 2px solid #000 !important;
color: #000 !important;
background: none !important;
}
ul li::marker{
color:#d70929 !important
}
a,
a:hover {
color: var(--ek-link, #DF2900) !important;
}
form.sc-form .sc-form__desc .sc-form__input:focus {
box-shadow: 0 0 15px rgba(0, 0, 0, 0.15) !important
}
.navHeader .buttonstyles:hover {
color: #d70929 !important;
border: 2px solid #d70929 !important;
background: #ffffff !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(22%) sepia(54%) saturate(5625%) hue-rotate(340deg) brightness(80%) contrast(114%);
}
.sc-form__submit {-webkit-box-shadow:none !important;box-shadow:none !important;text-shadow:none !important;font-size:16px !important;padding:8px 20px!important;}
.navHeader{
display:block;}
.navHeader .logo{
float:left}

.navHeader .logo img {
margin-top: 8px !important;
}
.A1 {
color: #d70929 !important;
}
.nav-content {
padding-top:10px  !important;
padding-bottom:15px  !important;
position: relative;
}
#logo-img{margin-right:50px;}
.logo a{display:block !important;float:left;}
#logo-img-2{transition: .4s;}
.optnlBtnBlck {
margin: 7px 0 0 0 !important;
}
.banner-lpart{
background: rgba(0,47,75) !important;

}

.banner-lpart * {
color: #fff !important;
}
.banner-lpart .buttonstyles {
border: 2px solid #ffffff !important;
}
body {
padding-top: 110px;
}

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


footer#footer{background:#002f4b !important}




@media screen and (max-width:768px){
    body {
        padding-top: 90px;
    }
}

@media screen and (max-width:376px){
    body {
        padding-top: 60px;
    }
}

/* ==========================================================================
   THEMES [UPD 2026-10-28]
   ELKO colours, measured on elko.no 2026-10-28:
     red   #d70929  buttons, bullets, accents (hover #b20722, pressed #a60720)
     navy  #002f4b  footer / banner: the DARK theme and the dark form card
     light #f2f2f2  their light grey section background: the LIGHT theme
                    (very close to our grey theme #f7f7f7)
   Headings stay black on light backgrounds (as before), white on dark.
   White and grey themes stay as they are.

   Why the :is(#ek#ek, *) part: the 2027 stylesheet uses long module selectors
   with !important. That part adds the weight of two IDs without matching
   anything extra, so these rules win without touching the shared stylesheet.
   ========================================================================== */
:root {
  --ek-heading: #000000;
  --ek-link: #df2900;
  --ek-btn-bg: #d70929;
  --ek-btn-text: #ffffff;
  --ek-btn-hover-bg: #b20722;
  --ek-btn-active-bg: #a60720;
  --ek-outline: #d70929;
  --ek-outline-hover-bg: #d70929;
  --ek-outline-hover-text: #ffffff;
}

/* Module backgrounds (all modules use --module-bg) */
:is(.bottom-slot, .header, .form-columns) > table:is(#ek#ek, *):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: #002f4b !important;
  --module-link: #ffffff !important;
}
:is(.bottom-slot, .header, .form-columns) > table:is(#ek#ek, *):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: #f2f2f2 !important;
  --module-link: #df2900 !important;
}
/* Modules with a background image behave as dark */
:is(.bottom-slot, .header, .form-columns) > table:is(#ek#ek, *):has(:is(.fw-bg--custom, .fwv-bg--custom, .fwt-bg--custom, .fwc-bg--custom, .fwg-bg--custom, .fwq-bg--custom)) {
  --module-link: #ffffff !important;
}

/* Text cards (05. Image + Text, older Image + Text, 07. Testimonial) */
:is(.bottom-slot, .form-columns) > table:has(.fwi-card--dark) .fwi-text:is(#ek#ek, *),
:is(.bottom-slot, .form-columns) > table:has(.fwc-card--dark) .fwc-text:is(#ek#ek, *),
:is(.bottom-slot, .form-columns) > table:has(.fwq-card--dark) .fwq-card:is(#ek#ek, *) {
  background-color: #002f4b !important;
  --module-link: #ffffff !important;
}
:is(.bottom-slot, .form-columns) > table:has(.fwi-card--light) .fwi-text:is(#ek#ek, *),
:is(.bottom-slot, .form-columns) > table:has(.fwc-card--light) .fwc-text:is(#ek#ek, *),
:is(.bottom-slot, .form-columns) > table:has(.fwq-card--light) .fwq-card:is(#ek#ek, *) {
  background-color: #f2f2f2 !important;
  --module-link: #df2900 !important;
}

/* 06. Video(s) & Text: video placeholder, arrows */
:is(.bottom-slot, .form-columns) > table:has(.fwg-cfg) .fwg-media:is(#ek#ek, *) {
  background: #002f4b !important;
}
:is(.bottom-slot, .form-columns) > table:has(.fwg-cfg):is(#ek#ek, *) {
  --fwg-arrow-color: #002f4b !important;
}
:is(.bottom-slot, .form-columns) > table:has(.fwg-cfg) .fwg-arrow:is(#ek#ek, *):hover {
  background: #f2f2f2 !important;
}

/* Form card (form style "darkgreen"): navy, white links */
#form-column:is(#ek#ek#ek, *):has(#scForm.sc-form--darkgreen),
#scForm.sc-form--darkgreen:is(#ek#ek#ek, *) {
  background-color: #002f4b !important;
}
#scForm:is(.sc-form--dark, .sc-form--darkgreen) a:not(.buttonstyles):is(#ek#ek#ek, *) {
  color: #ffffff !important;
}
/* Form heading: red on light forms, white on the dark card (the form's own rule) */

/* Dark backgrounds: white headings and links, white outline buttons; filled
   buttons stay red. Banner, dark theme, module with a background image, dark
   text cards, focus form with image, dark form, old template's banner. */
: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 {
  --ek-heading: #ffffff;
  --ek-link: #ffffff;
  --ek-outline: #ffffff;
  --ek-outline-hover-bg: #ffffff;
  --ek-outline-hover-text: #002f4b;
}
/* Light cards inside a dark module: back to the light colours */
: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 {
  --ek-heading: #000000;
  --ek-link: #df2900;
  --ek-outline: #d70929;
  --ek-outline-hover-bg: #d70929;
  --ek-outline-hover-text: #ffffff;
}

/* ==========================================================================
   BUTTONS [UPD 2026-10-28]
   As on elko.no (btn-primary / btn-outline-primary):
   - filled: red #d70929, white text; hover #b20722, pressed #a60720.
     Red on every background (it reads on navy and on images too).
   - outline: red 2px border and text, hover red fill with white text.
     On dark: white border and text, hover white fill with navy text.
   Covers .buttonstyles in every module (incl. @button_type), the form submit
   and the multi-step Next button. Buttons in the old template's red header
   (.navHeader) keep their own rules above.
   Replaces the old .buttonstyles / form .sc-form__submit rules, which lost to
   the 2027 module rules (white text on a transparent button, SE green banner
   and form).
   ========================================================================== */
:is(.buttonstyles, .sc-form__submit, .sc-msf-next):not(.navHeader *):is(#ek#ek, *) {
  border: 2px solid var(--ek-btn-bg) !important;
  background: var(--ek-btn-bg) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  color: var(--ek-btn-text) !important;
  text-decoration: none !important;
  transition: background-color .3s, color .3s, border-color .3s !important;
}
:is(.buttonstyles, .sc-form__submit, .sc-msf-next):not(.navHeader *):is(#ek#ek, *):hover:not(:disabled) {
  background: var(--ek-btn-hover-bg) !important;
  border-color: var(--ek-btn-hover-bg) !important;
  color: var(--ek-btn-text) !important;
}
:is(.buttonstyles, .sc-form__submit, .sc-msf-next):not(.navHeader *):is(#ek#ek, *):active:not(:disabled) {
  background: var(--ek-btn-active-bg) !important;
  border-color: var(--ek-btn-active-bg) !important;
}

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

/* @button_type = normal turns outline buttons into filled ones */
:is(.bottom-slot, .form-columns) > table:has(.mod-btn--normal) .buttonstyles.buttonstyles--outline:is(#ek#ek, *) {
  background: var(--ek-btn-bg) !important;
  border-color: var(--ek-btn-bg) !important;
  color: var(--ek-btn-text) !important;
}
:is(.bottom-slot, .form-columns) > table:has(.mod-btn--normal) .buttonstyles.buttonstyles--outline:is(#ek#ek, *):is(:hover, :active) {
  background: var(--ek-btn-hover-bg) !important;
  border-color: var(--ek-btn-hover-bg) !important;
  color: var(--ek-btn-text) !important;
}

/* Keyboard focus */
:is(.buttonstyles, .sc-form__submit, .sc-msf-next):not(.navHeader *):is(#ek#ek, *):focus-visible {
  outline: 2px solid var(--ek-outline) !important;
  outline-offset: 3px !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 ELKO colours, like the other modules;
   - pictos and numbers: #d70929 on light backgrounds, #ffffff on dark ones (the
     green library pictos are recoloured with a CSS filter);
   - the gradient theme and the ovals use ELKO colours instead of the
     green preset images;
   - mosaic colour tiles: dark = #002f4b, green = #d70929, light = #f2f2f2.
   ========================================================================== */
:is(.bottom-slot, .header, .form-columns) > table:is(#ek#ek, *):has(:is(.fwn-theme--dark, .fwo-theme--dark)) {
  --module-bg: #002f4b !important;
  --module-link: #ffffff !important;
}
:is(.bottom-slot, .header, .form-columns) > table:is(#ek#ek, *):has(:is(.fwn-theme--light, .fwo-theme--light)) {
  --module-bg: #f2f2f2 !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))
) {
  --ek-heading: #ffffff;
  --ek-link: #ffffff;
  --ek-outline: #ffffff;
  --ek-outline-hover-bg: #ffffff;
  --ek-outline-hover-text: #002f4b;
}
:is(.bottom-slot, .form-columns) > table:has(.fwn-cfg):is(#ek#ek, *) {
  --fwn-accent: #d70929 !important;
  --fwn-icon-filter: brightness(0) saturate(100%) invert(18%) sepia(87%) saturate(5040%) hue-rotate(342deg) brightness(82%) contrast(107%) !important;
}
:is(.bottom-slot, .form-columns) > table:has(.fwn-cfg.fwn-theme--dark):is(#ek#ek, *) {
  --fwn-accent: #ffffff !important;
  --fwn-icon-filter: brightness(0) invert(1) !important;
}
:is(.bottom-slot, .form-columns) > table:has(.fwn-cfg:is(.fwn-theme--gradient, .fwn-bg--custom)):is(#ek#ek, *) {
  --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(#ek#ek, *) {
  background-image: linear-gradient(105deg, #002f4b 0%, #002f4b 45%, #0b4f7a 100%) !important;
}
:is(.bottom-slot, .form-columns) > table:has(.fwn-cfg:is(.fwn-oval--oval1, .fwn-oval--oval2)) .fwn-icon:is(#ek#ek, *)::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, #002f4b 15%, #0b4f7a 100%) !important;
}
:is(.bottom-slot, .form-columns) > table:has(.fwn-cfg.fwn-oval--oval2) .fwn-icon:is(#ek#ek, *)::before {
  background: linear-gradient(225deg, #002f4b 15%, #0b4f7a 100%) !important;
}
:is(.bottom-slot, .form-columns) > table:has(.fwo-cfg.fwo-t1--dark) .fwo-grid > .fwo-tile:nth-of-type(1):is(#ek#ek, *) { background-color: #002f4b !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(#ek#ek, *) { background-color: #d70929 !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(#ek#ek, *) { background-color: #f2f2f2 !important; --fwo-tile-text: #d70929 !important; }
:is(.bottom-slot, .form-columns) > table:has(.fwo-cfg.fwo-t2--dark) .fwo-grid > .fwo-tile:nth-of-type(2):is(#ek#ek, *) { background-color: #002f4b !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(#ek#ek, *) { background-color: #d70929 !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(#ek#ek, *) { background-color: #f2f2f2 !important; --fwo-tile-text: #d70929 !important; }
:is(.bottom-slot, .form-columns) > table:has(.fwo-cfg.fwo-t3--dark) .fwo-grid > .fwo-tile:nth-of-type(3):is(#ek#ek, *) { background-color: #002f4b !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(#ek#ek, *) { background-color: #d70929 !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(#ek#ek, *) { background-color: #f2f2f2 !important; --fwo-tile-text: #d70929 !important; }
:is(.bottom-slot, .form-columns) > table:has(.fwo-cfg.fwo-t4--dark) .fwo-grid > .fwo-tile:nth-of-type(4):is(#ek#ek, *) { background-color: #002f4b !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(#ek#ek, *) { background-color: #d70929 !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(#ek#ek, *) { background-color: #f2f2f2 !important; --fwo-tile-text: #d70929 !important; }
:is(.bottom-slot, .form-columns) > table:has(.fwo-cfg.fwo-t5--dark) .fwo-grid > .fwo-tile:nth-of-type(5):is(#ek#ek, *) { background-color: #002f4b !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(#ek#ek, *) { background-color: #d70929 !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(#ek#ek, *) { background-color: #f2f2f2 !important; --fwo-tile-text: #d70929 !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 ELKO colours to their "on dark" set everywhere:
   headings and text white, links, bullets, pictos and numbers #ffffff, buttons as
   on the dark theme. The ELKO light theme becomes #13283a, light text
   cards #1a3347; the dark theme stays #002f4b. The SE light green from part DM
   (links, form heading, radio buttons) is replaced by #ffffff.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
:root {
  --ek-heading: #ffffff;
  --ek-link: #ffffff;
  --ek-outline: #ffffff;
  --ek-outline-hover-bg: #ffffff;
  --ek-outline-hover-text: #002f4b;
}
:is(.bottom-slot, .header, .form-columns) > table:is(#ek#ek#ek, *):has([class*="-cfg"]:is([class*="-theme--white"], [class*="-theme--none"], [class*="-theme--grey"], [class*="-theme--light"])) {
  --module-link: #ffffff !important;
}
:is(.bottom-slot, .header, .form-columns) > table:is(#ek#ek#ek, *):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: #13283a !important;
}
:is(.bottom-slot, .form-columns) > table:has(.fwi-card--light) .fwi-text:is(#ek#ek#ek, *),
:is(.bottom-slot, .form-columns) > table:has(.fwc-card--light) .fwc-text:is(#ek#ek#ek, *),
:is(.bottom-slot, .form-columns) > table:has(.fwq-cfg:is(.fwq-card--white, .fwq-card--grey, .fwq-card--light)) .fwq-card:is(#ek#ek#ek, *) {
  background-color: #1a3347 !important;
  --module-link: #ffffff !important;
  --ek-heading: #ffffff;
  --ek-link: #ffffff;
  --ek-outline: #ffffff;
  --ek-outline-hover-bg: #ffffff;
  --ek-outline-hover-text: #002f4b;
}
: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(#ek#ek#ek, *) {
  --fwn-accent: #ffffff !important;
  --fwn-icon-filter: brightness(0) invert(1) !important;
}
html body #form-column h3.A1 .B1:is(#ek#ek#ek, *) {
  color: var(--ek-heading, #ffffff) !important;
}
html body #form-column h3.A1 img#new-overlay:is(#ek#ek#ek, *),
html body .icons img:is(#ek#ek#ek, *) {
  filter: brightness(0) invert(1) !important;
}
html body #scForm input[type="radio"]:checked:is(#ek#ek#ek, *) {
  background-color: #ffffff !important;
  border-color: #ffffff !important;
  box-shadow: 0 0 0 5px #ffffff inset !important;
}
html body #scForm input[type="checkbox"]:checked:is(#ek#ek#ek, *) {
  border-color: #ffffff !important;
}
}