.elementor-kit-9{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"inter-variable";--e-global-typography-primary-font-size:1em;--e-global-typography-primary-font-weight:400;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"inter-variable";--e-global-typography-text-font-size:1em;--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;background-color:transparent;color:#FFFFFF;font-family:"Montserrat", Sans-serif;font-size:1em;font-weight:300;background-image:radial-gradient(at center center, #051B3A 0%, #000101 100%);}.elementor-kit-9 button,.elementor-kit-9 input[type="button"],.elementor-kit-9 input[type="submit"],.elementor-kit-9 .elementor-button{background-color:transparent;font-family:"inter-variable", Sans-serif;color:#FFFFFF;background-image:linear-gradient(146deg, #4D69A1 0%, #0E043B 100%);border-radius:30px 30px 30px 30px;}.elementor-kit-9 e-page-transition{background-color:#FFBC7D;}.elementor-kit-9 p{margin-block-end:1em;}.elementor-kit-9 a{color:#665D5D;font-family:"Montserrat", Sans-serif;}.elementor-kit-9 h1{color:#FFFFFF;font-family:"Montserrat", Sans-serif;font-weight:700;}.elementor-kit-9 h2{color:#FFFFFF;font-family:"Montserrat", Sans-serif;font-size:1.3em;font-weight:700;}.elementor-kit-9 h3{color:#FFFFFF;font-family:"Montserrat", Sans-serif;font-size:1.1em;font-weight:700;}.elementor-kit-9 h4{font-family:"Montserrat", Sans-serif;}.elementor-kit-9 h5{font-family:"Montserrat", Sans-serif;}.elementor-kit-9 h6{font-family:"Montserrat", Sans-serif;}.elementor-kit-9 input:not([type="button"]):not([type="submit"]),.elementor-kit-9 textarea,.elementor-kit-9 .elementor-field-textual{background-color:#FFFFFF12;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:100%;}.e-con{--container-max-width:100%;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */blockquote {
  font-style: italic;
    font-size: 1.5em;
  color: #fff;
}




.menu-icon {
  cursor: pointer;
  display: inline-block;
  padding: 10px;
}

.bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px auto;
  background-color: #333;
  transition: 0.4s;
}

/* Transformeert het middelste streepje naar onzichtbaar */
.menu-icon.active .bar:nth-child(2) {
  opacity: 0;
}

/* Roteert het bovenste streepje */
.menu-icon.active .bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

/* Roteert het onderste streepje */
.menu-icon.active .bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}


        /* The menu link styling */
        .menulink {
            position: relative; /* Needed for the pseudo-element positioning */
            text-decoration: none;
            color: #333;
            font-size: 24px;
            padding: 8px 0;
            overflow: hidden; /* Ensures the line doesn't peek out */
        }

        /* This creates the line under the link */
        .menulink::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 2px; /* Thickness of the line */
            background-color: #fff; /* Color of the line */
            
            /* Animation setup: start scaled to 0 from the left */
            transform: scaleX(0);
            transform-origin: left; /* Animation starts from the left */
            
            /* This makes the animation smooth */
            transition: transform 0.3s ease-out;
        }

        /* When you hover over the link... */
        .menulink:hover::after {
            /* ...scale the line back to its full width */
            transform: scaleX(1);
        }


.right-scroll{
  max-height: calc(100vh - 12vh); /* 88px = je header/offset */
  overflow-y: auto;
  overflow-x: hidden;
}

.e-con.elementor-sticky--active {
  position: -webkit-sticky;
  position: sticky;
  top: 12vh !important;
  z-index: 99; /* of var(--z-index,99) */
}

/* Username link */
.usernameknop {
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  padding: 0.5em 1em;
}

.ld-login-menu {
    display: flex;
    gap: 1em; /* 1em ruimte tussen knoppen */
}

.expertsbox {
    border-radius: 15px;
}

.login-error {
    color: red;
}

.loginknop {
    color: #000 !important;
    background-color: #fff;
    border: 1px solid #000;
    border-radius: 30px;
    padding: 0.5em 1em;
    text-decoration: none;
    font-weight: 500;
    display: inline-block;
    transition: all 0.2s ease;
}

.loginknop:hover {
    color: #000 !important;
    background-color: #162f71 !important;
    border-color: #000;
    border-radius: 30px;
    padding: 0.5em 1em;
    text-decoration: none;
}


.headerbg2 {
    background-color: black;
}


.intro {
    font-size: 1.3em;
    font-weight: bold;
    color: #fff; /* wit */
}


.recap {
    background-color: #46628647;
    border-radius: 15px;
    padding: 1em;
    border: 1px solid rgba(240, 243, 246, 0.1);
    color: #fff;
}

.block {
    background-color: #46628647;
    border-radius: 15px;
    padding: 1em;
    border: 1px solid rgba(240, 243, 246, 0.1);
    color: #fff;
}

.single-sfwd-quiz,
.single-sfwd-courses,
.learndash-cpt-sfwd-lessons{

}

.ld_course_grid {
  width: 50% !important;
  float: left;
}

.elementor-kit-9 a {
    color:white;
}

.elementor-kit-9 a:hover {
    color:white !important;
}

.ld-accordion__item--lesson:hover {
  background-color: #7683E045 !important;
}

.ld-accordion__item-title:hover {
    color: white !important;
} 

.ld-accordion__item:focus-within,.ld-accordion__item:has(.ld-accordion__expand-button[aria-expanded=true]),.ld-accordion__item:hover {
    background-color: #7683E045 !important;
}

.ld-accordion__subheading {
    font-size: 2em !important;
    }

.comments-area a, .page-content a {
    text-decoration: none;
}

.entry-title {
    color: white;
}

.page-header {
    color: white;
}

.ld-course-list-items .ld_course_grid .thumbnail.course {
    background-color: rgba(240, 243, 246, 0.1) !important;
    border: 1px solid rgba(240, 243, 246, 0.1) !important;
    height: 100%;
}


.ld-course-status,
.ld-course-status-enrolled,
.ld-lesson-status {
  background-color: rgba(240, 243, 246, 0.1) !important;
}


.ld-accordion__section {
    border: 1px solid #dce1e83d !important;
}

.learndash-wrapper .ld-progress .ld-progress-bar .ld-breadcrumbs{
    background-color: #4f89d1 !important;
    border-radius: 30px !important; 
}

.learndash-wrapper .wpProQuiz_content .wpProQuiz_questionListItem:not(.ld-sortable__item).wpProQuiz_answerIncorrect label {
    background: #faeeee24 !important;
    border-color: #db0000
}

.learndash-wrapper .wpProQuiz_content .wpProQuiz_questionListItem:not(.ld-sortable__item).wpProQuiz_answerCorrect label {
    background: #eef7f126 !important;
    border-color: #2f8351
}

.learndash-wrapper .wpProQuiz_content .wpProQuiz_questionListItem:not(.ld-sortable__item).wpProQuiz_answerCorrectIncomplete label {
    background: #f7f9fc4a !important;
    border-color: #ffffff !important;

}

.learndash-wrapper .ld-breadcrumbs {
    align-items: center;
    background: #f0f3f626 !important;
    border-radius: 30px !important;
    display: flex;
    justify-content: space-between;
    padding: .5em 1em
}

.sl-section {
  border:2px solid rgba(63, 76, 148, 1);
  border-radius:20px;
  padding:1em;
  margin-bottom: 1em;
  background:rgba(12,18,40,.55);
}
.sl-section:hover {
  border:2px solid rgba(63, 76, 148, 1);
  border-radius:20px;
  padding:1em;
  margin-bottom: 1em;
  background:rgba(12,18,40,.95);
}
.sl-section-header {
  display:flex;
  align-items:center;
  gap:12px;
  justify-content:space-between;
  cursor: pointer;
}
.sl-section-title { font-weight:700; }
.sl-section-count { opacity:.7; }

.sl-section-toggle{
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 1.2em;
  color: #fff;
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  transition: background .2s, transform .15s ease;
}
.sl-section-toggle:hover{ background: rgba(63,76,148,.3); }
.sl-section-toggle.is-closed{ transform: rotate(-90deg); }

.sl-chapter-list {
  display:flex;
  flex-direction:column;
  gap:18px;
  margin-top:14px;
}
.sl-chapter {
  display:flex;
  align-items:center;
  gap:16px;
  text-decoration:none;
}
.sl-chapter:hover { background:rgba(191,190,219,.07); }

.sl-chapter-thumb-wrap{
  width:10vh; height:10vh; flex:0 0 10vh;
  border-radius:12px; overflow:hidden;
}
.sl-chapter-thumb, .sl-chapter-thumb-wrap img{
  width:100%; height:100%;
  object-fit:cover; object-position:center center;
  display:block;
}
.sl-thumb--placeholder{ width:100%; height:100%; background:rgba(255,255,255,.06); }

.sl-chapter-title{ font-weight:700; line-height:1.3; }
.sl-check{ color:#4ade80; font-weight:bold; margin-left:8px; }


/* Verberg héle standaard LD-navigatie */
.ld-content-actions, .learndash_content_actions, .ld-course-step-navigation, .ld-pagination {
  display: nne !important;
}

/* Layout: links-midden-rechts */
.ld-links {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
}

/* Jouw knoppen */
.ld-btn{display:inline-flex;align-items:center;justify-content:center;background:#2563eb;color:#fff;font-weight:600;font-size:14px;padding:.6em 1.5em;border-radius:9999px;text-decoration:none;transition:background-color .3s ease, transform .3s ease}
.ld-btn .arrow-left,.ld-btn .arrow-right{display:inline-block;transition:transform .3s ease}
.ld-btn .arrow-left{margin-right:.5em}.ld-btn .arrow-right{margin-left:.5em}
.ld-btn:hover{background:#1d4ed8}.ld-btn:hover .arrow-right{transform:translateX(4px)}.ld-btn:hover .arrow-left{transform:translateX(-4px)}
.ld-btn.disabled{background:#9ca3af;cursor:not-allowed;pointer-events:none}
.ld-prev{justify-self:start}
.ld-back{justify-self:center;background:#374151}.ld-back:hover{background:#111827}
.ld-next,.ld-complete-inline{justify-self:end}

/* Style het Mark Complete-formulier als knop rechts */
.ld-complete-inline form,
.ld-complete-inline .learndash_mark_complete_button{display:inline-block}
.ld-complete-inline input[type="submit"].learndash_mark_complete_button{
  background:#2563eb;color:#fff;font-weight:700;font-size:14px;border:0;border-radius:9999px;padding:.6em 1.5em;cursor:pointer;transition:background-color .3s ease, transform .3s ease
}
.ld-complete-inline input[type="submit"].learndash_mark_complete_button:hover{background:#1d4ed8}


/* =========================================================
   Video Wrapper + Aspect-ratio
========================================================= */
.vo-wrap {
  position: relative;
  max-width: 100%;
  display: block;
}

.vo-aspect {
  position: relative;
  width: 100%;
  aspect-ratio: var(--vo-ar, 16/9); /* krijgt waarde vanuit PHP */
  overflow: hidden;
}

/* =========================================================
   Lagen
========================================================= */
.vo-overlay,
.vo-embed-slot,
.vo-video,
.vo-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.vo-overlay {
  z-index: 2;
  cursor: pointer;
  pointer-events: auto;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* =========================================================
   Mask overlay (webp)
========================================================= */
.vo-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--vo-mask);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: .75; /* eventueel dimmen */
  pointer-events: none;
}

/* =========================================================
   Poster
========================================================= */
.vo-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.vo-poster--placeholder {
  background: #111;
}

/* =========================================================
   Content (linksonder)
========================================================= */
.vo-content {
  position: absolute;
  left: 1em;
  bottom: 1em;
  display: flex;
  flex-direction: column;
  gap: .6em;
  max-width: min(92%, 980px);
  pointer-events: none;
}

/* =========================================================
   Badge: Category + Chapter
========================================================= */
.vo-badge {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  pointer-events: none;
}

.vo-badge-cat {
  display: inline-block;
  font-weight: 800;
  letter-spacing: .02em;
  padding: .55em .8em;
  border-radius: .45em;
  font-size: clamp(8px, 1.1vw, 9px);
  line-height: 1;
  color: #fff;
  background: rgba(24, 72, 255, .9);
  text-transform: uppercase;
}

.vo-badge-ch {
  font-size: clamp(11px, 1.1vw, 14px);
  color: #cfe0ff;
  opacity: .95;
}

/* =========================================================
   Quote
========================================================= */
.vo-quote {
  font-size: clamp(8px, 2.4vw, 12px);
  line-height: 1.3;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .65);
}

/* =========================================================
   Play Button (SVG)
========================================================= */
.vo-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 3;
}

.vo-play svg {
  width: 48px;
  height: 48px;
  display: block;
}

.vo-play svg polygon {
  fill: #fff;
}

/* =========================================================
   Player
========================================================= */
.vo-video,
.vo-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
}

/* Container voor een cursus-item, geeft wat ruimte onder elk blok */
.ldpp-course {
    margin-bottom: 25px;
}

/* De hoofdknop die nu alles bevat (tekst én progress bar) */
.ldpp-btn-integrated {
    display: flex; /* We gebruiken Flexbox om de inhoud te ordenen */
    flex-direction: column; /* Stapel de elementen (tekst en balk) verticaal */
    width: 100%;
    box-sizing: border-box;
    padding: 25px; /* Iets meer padding voor een ruimtelijk gevoel */
    background-color: transparent;
    text-decoration: none;
    border: 1px solid #4a5568; /* De rand waar alles binnen moet vallen */
    border-radius: 8px;
    transition: background-color 0.2s;
}

.ldpp-btn-integrated:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* De wrapper voor de tekstuele content */
.ldpp-btn-content {
    text-align: center;
    color: #ffffff; /* Standaard tekstkleur voor alle tekst binnen deze wrapper */
    margin-bottom: 20px; /* Dit creëert de ruimte tussen de tekst en de progress bar */
}

/* Hoofdtekst in de knop */
.ldpp-action-main-text {
    display: block;
    font-size: 1.2em;
    font-weight: bold;
}

/* De naam van de cursus in de knop */
.ldpp-course-title-context {
    display: block;
    font-size: 1.1em;
    font-weight: bold;
    color: #cbd5e0;
    margin-top: 12px;
    margin-bottom: 6px;
}

/* De naam van de les (subtitel) in de knop */
.ldpp-action-sub-text {
    display: block;
    font-size: 1em;
    color: #a0aec0;
    opacity: 0.9;
}

/* Styling voor de progress bar (deze staat nu binnen de knop) */
.ldpp-bar {
    width: 100%;
    background-color: #4a5568;
    border-radius: 8px;
    height: 10px;
    overflow: hidden;
}

.ldpp-bar span {
    display: block;
    height: 100%;
    background-color: #48bb78; /* Groene voortgangskleur */
    border-radius: 8px;
    transition: width 0.5s ease-in-out;
}


/* Grid: altijd 1 kolom, full width */
.custom-course-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

/* Kaart */
.course-card {
  display: block;
  width: 100%;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255,255,255,0.02);
  text-decoration: none;
  color: inherit;
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
}

.course-card:hover {
  border-color: rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.04);
  transform: translateY(-2px);
}

/* Afbeelding blok */
.course-media {
  width: 100%;
  height: 40vh;       /* vaste hoogte */
  overflow: hidden;
  background: #0a0f1a;
}

.course-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;          /* vult blok volledig */
  object-position: center;    /* centreren */
  display: block;
}

.course-thumb--placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
}

/* Tekstbalk */
.course-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
}

.course-title {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.2;
  color: white;
}

.course-arrow {
  display: inline-flex;
  flex: 0 0 auto;
  opacity: .8;
  transition: transform .2s ease, opacity .2s ease;
}

.course-card:hover .course-arrow {
  transform: translateX(3px);
  opacity: 1;
}/* End custom CSS */