/*  *Theme Name: Sales Genius
 *  *Version: 1.1
 *  *Author: PING */

/* ===========================
 * 0. COLOR OVERRIDE
 * 1. GENERAL
 * 1.1 NAVIGATION
 * 1.2 WEBSITE
 * 2.1 COURSE DETAILS
 * 2.2 COURSE LESSON PAGES
 * 3. CONTACT PAGE
 * 4. CURSUSSEN PAGE
 * 5. JOUW DASHBOARD PAGE - SALES SCAN
 * 6.0 SALES SCAN
 * 6.1 PROFILE DROPDOWN
 * 6.2 IF NOT LOGGED IN BUTTONS
 * 7. SALESGENIUS ICONS
 * 8. WOOCOMMERCE OVERRIDE
 * 9. REPORT DASHBOARD
 * 10. GROUPMANAGEMENT
 * 10.1 CUSTOM SEAT MANAGMENT (plekken)
 * 11. PRICING / CHECKOUT
 * 12. VRAAG DE EXPERT / CHAT
 * 13. VRAAG DE AI / CHAT
 * 14. LEARNDASH REVIEWS
 * =========================== */





/* ============================= 0. COLOR OVERRIDE =================================== */

/* Add the classes below which need the template colors override */

/* SalesGenius - Blue : #5271FF */

.ping_course-grid .ld-secondary-background {
	background-color: #5271FF !important;
}

.ping_course-grid .ld-secondary-color {
	color: #5271FF !important;
}

/* Font color - Darkest blue : #272E38 */

/* Background color - Darker blue : #272747 */

/* Background color - light grayblue : #F3F3F9 */


/* ============================= 0. COLOR OVERRIDE - END ============================== */


/* -------- 1. GENERAL */

html {
	font-size: 18px;
}

p {
	font-weight: 300;
	font-size: 1rem;
}

body>.woocommerce,
body>div[data-elementor-post-type="page"],
body>div[data-elementor-post-type="single-post"] {
	min-height: calc(100dvh - 370px);
}

.fit-content-height{
	height: fit-content;
}

/* footer spacing fix */

html:has(footer)::after {
	content: '';
    position: absolute;
    background: #292747;
    height: 30px;
    min-width: 100dvw;
    z-index: -1;
}

.ping_profile-page{
    min-height: max-content;
    background-color: #f3f3f9;
    height: calc(100vh - 335px);
}

a.textlink-light{
	color: #B6C9FF !important;
	text-decoration: none;
}

a.textlink-light:hover{
	text-decoration: underline;
}

@media (max-width: 768px){
	.footer-menu-mobile .elementor-nav-menu{
	justify-content: center;
	}
	
	#ping_chat-toggle {
    position: absolute;
    top: 0;
    left: none;
}
}
/* -------- 1.1 NAVIGATION */

.learndash-wrapper .ld-focus .ld-focus-header .ld-mobile-nav span{
    background-color: #B6C9FF;
    height: 2px;
    margin: 6px 0;
    width: 20px;
    border-radius: 4px;
}

@media (max-width: 1200px){
.elementor-38 .elementor-element.elementor-element-41788fe .elementor-nav-menu--main .elementor-item{
	padding: 10px 5px;
	}
}

/* Hide mobile inlog */
.menu-item-4627,
.menu-item-4628,
.menu-item-4867,
.logged-in .menu-item-4627,
.logged-in .menu-item-4628{	
	display: none !important;
}

@media (max-width: 1024px){
	
	/* Website Top - buttons */
	.menu-item-4627, .menu-item-4628, .logged-in .menu-item-4867{
	display: block !important;
	}
	
	/* inloggen - button */
	.menu-item-4627 > a{
    font-size: 17px;
    font-family: "Mukta", Sans-serif;
    font-weight: 600;
    padding: 13px 20px;
	border-style: solid;
    border: 1px solid #fff !important;
    border-radius: 100px;
    line-height: 20px;
	margin: 2rem auto 1.5rem !important;
    max-width: 320px;
	min-width: fit-content;
	}
	
	/* Naar leeromgving - button */
	.menu-item-4867 > a,
	/* Licentie kopen - button */
	.menu-item-4628 > a{
	font-size: 17px;
    font-family: "Mukta", Sans-serif;
    font-weight: 600;
    padding: 13px 20px;
    border: 1px solid #5271FF;
    border-radius: 100px;
    background-color: #5271FF !important;
    line-height: 20px;
	margin: 1.5rem auto 3rem !important;
    max-width: 320px;
	min-width: fit-content;
	}
	
	.ping_notlogged_in_wrapper{
	display: none !important;
	}
}

/* -------- 1.2 WEBSITE */

.image-overlay.yellow .elementor-widget-container:before{
    background: linear-gradient(165deg, rgba(254, 234, 117, 0) 35%, rgba(255, 223, 54, 1) 100%);
}

.image-overlay.green .elementor-widget-container:before{
	background: linear-gradient(165deg, rgba(69,188,165,0) 33%, rgba(89,208,185,1) 100%);

}

.image-overlay.red .elementor-widget-container:before{
    background: linear-gradient(165deg, rgba(250,95,134,0) 35%, rgba(250,95,134,1) 100%);
}

.image-overlay.blue .elementor-widget-container:before{
	background-image: linear-gradient(165deg, rgba(0, 145, 180, 0) 35%, rgba(0, 145, 180, 1) 100%);
}

.ping_home-cta .elementor-widget-container {
	box-shadow: 0px 0px 120px -20px rgba(81.99999999999996, 113, 255, 0.38) !important;
    width: 900px;
	max-width: 80vw;
	margin: auto;
}

.acc-num-title .e-n-accordion-item-title-text{
	display: flex;
    align-items: flex-start;
}

span.acc-num{
	padding-right:2rem;
	font-weight: 900;
}

.ping_home-carousel-container .swiper{
	overflow: hidden !important;
}

/* -------- 2.1 COURSE DETAILS */

#ping_course-sidebar .ld-icon-arrow-down:before,
:not(.ld-lesson-section-heading) a:hover {
	color: #5271FF;
	background: transparent;
}

.ping_custom_course_start_button {
	padding: 5px 20px 5px 20px !important;
}

.ping_listitem-container{
	padding: 30px;
}

.ping_listitem-container ul {
	font-size: 1rem;
	line-height: 1.2rem;
}

.ping_listitem-container h4 {
	padding: 0;
	margin: 0;
}

.ping_course-details-summary {
	font-family: "Mukta", Sans-serif;
	font-weight: bold;
}


.ping_course-content .ld-section-heading h2 {
	font-family: "Mukta", Sans-serif;
	font-weight: bold;
}

.ping_course-content .ld-item-list-items {
	font-size: 1rem;
}

.ping_course-content .ld-expand-button {
	background: none;
	border-radius: unset;
	color: #5271FF;
	display: flex;
	flex-direction: row-reverse;
	padding: 0 0.5em 0;
	font-weight: 300;
}

.ping_course-content .ld-tabs-content {
	padding: 0;
}

.ping_course-content .learndash-wrapper .ld-status-incomplete.ld-status-icon {
	border: 2.5px solid #A7BCF5;
	height: 20px;
	width: 20px;
	flex-basis: 20px;
	/* toch verbergen? */
	display: none;
}

.ping_cursus-details .learndash-wrapper .ld-item-list{
	margin: 0;
}

.ping_cursus-details .ld-item-list.ld-course-list .ld-section-heading, .ping_cursus-details .ld-item-list.ld-lesson-list .ld-section-heading {
	margin-bottom: 0;
}

.learndash-wrapper .ld-item-list .ld-item-list-item {
	border-width: 1px;
	border-radius: unset;
	margin: 0.25em 0;
}

.ping_course-content .learndash-wrapper .ld-expand-button .ld-text {
	padding-right: 0.33em
}

.ping_course-info-container .elementor-shortcode {
	color: #272E38;
	font-size: 1rem;
	text-align: right;
}

.ping_course-info-container .ping_course-progress .elementor-shortcode {
	color: #5271FF;
	font-weight: 600;
	text-transform: lowercase;
}

.ping_course-details-header .ping_category-icon img {
	height: 300px;
}

@media (max-width:768px){
.ping_course-details-header .ping_category-icon img {
	height: 200px;
	}
}

.ping_cursus-details .ld-item-list.ld-course-list .ld-section-heading h2, .ping_cursus-details .ld-item-list.ld-lesson-list .ld-section-heading h2, .ping_cursus-details .ld-item-list-section-heading{
padding-left: 20px;
}

/* -------- 2.1.2 COURSE DETAILS - progressbar */


#ping_course-detail-progression {
	padding: 20px 30px 10px;
	margin: 0;
	gap: 0;
	line-height: 0;
	background-color: #DFE2FF;
    border-radius: 20px;
	margin-bottom:20px;
}

/* Show progress percentage ONLY */
.progress-percentage-only .ld-progress-steps,
.progress-percentage-only .ld-progress-bar {
	display: none;
}

.progress-percentage-only .ld-progress.ld-progress-inline {
	margin-top: 8px;
}

.ping_custom_course_progress_topsection .progress-percentage-only .ld-progress.ld-progress-inline {
	margin: 0px;
}

.progress-percentage-only .ld-progress-percentage,
#ping_course-detail-progression p {
	font-size: 18px;
}

/* Show progresbar ONLY */
.progress-bar-only .ld-progress-steps,
.progress-bar-only .ld-progress-percentage {
	display: none;
}

.progress-bar-only .learndash-wrapper.learndash-widget .ld-progress .ld-progress-bar {
	background-color: #B6C9FFed;
}

.ping_custom_course_progress_title{
	font-size: 18px;
}

.ping_custom_course_progress_topsection{
	display: flex;
    align-items: center;
    justify-content: space-between;
}

/* -------- 2.2 COURSE LESSONS PAGES - Sidebar */

#ping-focus-main :is(p, a, li, .ld-lesson-section-heading, .ld-lesson-title, p *, a *, li *),
#ping_course-content :is(p, a, li, .ld-lesson-section-heading, .ld-lesson-title, p *, a *, li *),
#ping_course-sidebar :is(p, a, li, .ld-lesson-section-heading, .ld-lesson-title, p *, a *, li *) {
	font-size: 18px;
	line-height: 24px;
	letter-spacing: 0px;
}

#ping-focus-main a:hover,
#ping_course-content a:hover,
#ping_course-sidebar a:hover {
	color: #5271FF;
}

#ping_course-sidebar {
	border-color: #EFF2F7 !important;
}

#ping_course-sidebar * {
	border-color: #EFF2F7 !important;
}

#ping_course-sidebar .ld-table-list-items {
	padding: 0em;
}

#ping_course-sidebar .ld-table-list-items * {
	font-size: 15px;
}

#ping_course-sidebar .ld-table-list.ld-topic-list {
	background-color: #EFF2F7 !important;
}

#ping_course-sidebar .ld-table-list.ld-topic-list:before {
	right: unset;
}

#ping_course-sidebar .ld-lesson-section-heading {
	font-weight: 700;
	color: #000;
}

#ping_course-sidebar .ld-lesson-title {
	font-weight: 300;
}

#ping_course-sidebar .ld-lesson-item.ld-is-current-lesson .ld-lesson-title {
	color: #272E38;
	font-weight: 500;
}

#ping_course-sidebar .ld-status-icon {
	margin-top: 4px;
}


#ping_course-sidebar .ld-course-navigation-heading {
	background-color: #000 !important;
	padding: 0.5rem 2rem;
}

/* --- Sidebar-trigger, bijgewerkt voor LearnDash 5.x — 03-08-2026 ------
   Drie wijzigingen in 5.1.8 die hier doorheen fietsten:
     1. <span class="ld-focus-sidebar-trigger">  ->  <button ...>
        Een button brengt eigen achtergrond, rand en padding mee.
     2. De trigger ging van `height: 75px; width: 50px` naar
        `height: 100%`. Met een geforceerde achtergrond werd dat een
        balk over de volle sidebarhoogte, en het klikgebied ook.
     3. De opmaak verhuisde van de trigger naar .ld-icon, dat nu
        `border: 2px solid white` en `padding: 8px` meekrijgt plus een
        hover die naar wit/blauw omklapt.
   ------------------------------------------------------------------ */

#ping_course-sidebar .ld-focus-sidebar-trigger {
	background-color: transparent !important;
	border: 0;
	padding: 0;
	width: 28px;
	height: 60px;
}

#ping_course-sidebar .ld-focus-sidebar-trigger .ld-icon,
#ping_course-sidebar .ld-icon-arrow-right,
#ping_course-sidebar .ld-icon-arrow-left {
	background-color: #272E38 !important;
	border: 0 !important;
	border-radius: 4px;
	padding: 0;
	height: 50px;
	margin-top: 5px;
	width: 28px;
	color: #fff;
}

/* LearnDash klapt de knop bij hover/focus om naar wit met blauwe rand.
   Hier vasthouden aan de donkere variant. */
#ping_course-sidebar .ld-focus-sidebar-trigger:hover .ld-icon,
#ping_course-sidebar .ld-focus-sidebar-trigger:focus .ld-icon {
	background-color: #272E38 !important;
	border-color: transparent !important;
	color: #fff;
}

/* Het is nu een echte button, dus toetsenbordfocus moet zichtbaar
   blijven — maar in de huisstijl in plaats van LearnDash' witte ring,
   en niet bij muisbediening. */
#ping_course-sidebar .ld-focus-sidebar-trigger:focus .ld-icon {
	outline: none;
}

#ping_course-sidebar .ld-focus-sidebar-trigger:focus-visible .ld-icon {
	outline: 2px solid #5271FF;
	outline-offset: 2px;
}

/* Het pijltje werd alleen verticaal gecentreerd; horizontaal viel het
   op zijn plek door LearnDash' `padding: 8px` op .ld-icon. Die padding
   is hierboven op 0 gezet, dus nu ook expliciet horizontaal centreren. */
#ping_course-sidebar .ld-icon-arrow-right:after,
#ping_course-sidebar .ld-icon-arrow-right:before,
#ping_course-sidebar .ld-icon-arrow-left:before,
#ping_course-sidebar .ld-icon-arrow-left:after {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 13px;
}

#ping_course-sidebar .ld-expand-button.ld-button-alternate .ld-icon {
	background-color: transparent !important;
}

#ping_course-sidebar .ld-expand-button {
	padding-left: 1.5em;
}

#ping_course-sidebar .ld-course-navigation .ld-status-icon.ld-status-incomplete {
	min-height: 18px;
	min-width: 18px;
	border-color: #EFF2F7 !important;
	background-color: #F2F4FF !important;
}

#ping_course-sidebar .ld-table-list-items .ld-status-icon.ld-status-incomplete,
#ping_course-sidebar .ld-table-list.ld-topic-list .ld-status-icon.ld-status-incomplete {
	background-color: #FFF !important;
	border-color: #FFF !important;
}

#ping_course-sidebar .ld-is-current-lesson .ld-lesson-item-preview .ld-status-incomplete,
#ping_course-sidebar .ld-is-current-item .ld-status-incomplete {
	border: 1.5px solid #5271FF;
}

#ping_course-sidebar .ld-status-complete {
	background-color: #5271FF;
	min-width: 18px;
	min-height: 18px;
}

.ld-icon-quiz:before{
	color: #5271FF;
}

#ping_course-sidebar .ld-icon-checkmark:before {
	font-size: 10px;
}

#ping_course-sidebar .ld-course-navigation .ld-status-icon.ld-status-in-progress {
	border-color: #5271FF #e2e7ed #e2e7ed #5271FF !important;
}

#ping_course-sidebar .ld-icon-arrow-down:before,
:not(.ld-lesson-section-heading) a:hover {
	color: #5271FF;
}

/* Was `color: unset`, wat voor een geerfde eigenschap als `inherit` werkt.
   De cursustitel nam bij hover dus de kleur van zijn ouder over en viel weg
   tegen de zwarte achtergrond van .ld-course-navigation-heading. Nu expliciet
   wit, in alle statussen — gelijk aan de rustkleur. */
#ping_course-sidebar .ping_course-title a,
#ping_course-sidebar .ping_course-title a:hover,
#ping_course-sidebar .ping_course-title a:focus {
	color: #fff;
}

/* LearnDash 5.x heeft de zichtbare tekst ('3 Onderwerpen') verplaatst van
   .ld-text naar het nieuwe .ld-expand-text; .ld-text bevat nu het verborgen
   toggle-label. Beide selecteren, zodat de styling blijft kloppen. */
#ping_course-sidebar .ld-expand-button.ld-button-alternate .ld-text,
#ping_course-sidebar .ld-expand-button.ld-button-alternate .ld-expand-text {
	color: #5271FF;
	font-weight: 100;
}

#ping_course-sidebar p.ping_course-title {
	display: flex;
	gap: 5px;
}

/* ------- 2.3 COURSE LESSONS PAGES - the_content(); */

#ping_course-content {
	max-width: calc(100vw - 350px);
	width: 100%;
	padding-left: 12vw;
	padding-right: 12vw;
}

@media screen and (max-width: 1200px){
#ping_course-content {
	max-width: unset;
	width: 100%;
	padding-left: 2rem;
	padding-right: 2rem;
	}
}


#ping_course-content:not(:has(.is-type-video)) .ld-tab-content {
	padding-left: 1rem;
	padding-right: 1rem;
}

.learndash-wrapper .ld-breadcrumbs,
.learndash-wrapper .ld-table-list .ld-table-list-header {
	background: #F2F4FF !important;
}

.learndash-wrapper .ld-table-list .ld-table-list-header {
	color: #272E38;
	font-weight: 300;
}

.learndash-wrapper .ld-table-list .ld-table-list-header .ld-lesson-list-progress {
	color: #5271FF;
	font-weight: 500;
}

#ping_course-content .ld-lesson-topic-list .ld-status-complete,
.single-sfwd-courses .learndash-wrapper .ld-status-icon.ld-status-complete {
	background-color: #5271FF;
	max-width: 18px;
	max-height: 18px;
	margin-top: 2px;
}

#ping_course-content .learndash-wrapper .ld-lesson-topic-list .ld-status-incomplete.ld-status-icon {
	max-width: 18px;
	max-height: 18px;
	border-color: #EFF2F7;
	background-color: #F2F4FF;
	margin-top: 2px;
}

#ping_course-content .ld-icon-checkmark:before,
.single-sfwd-courses .learndash-wrapper .ld-status-icon.ld-status-complete .ld-icon-checkmark:before {
	font-size: 10px;
}

/* LearnDash 5.x rendert de breadcrumbs als <ol>/<li> in plaats van <span>,
   en zet .ld-breadcrumbs-segments li a op font-weight: 700. De oude selector
   ('... segments span a') matchte daardoor niets meer. Nu op de link zelf,
   los van het wrapper-element. */
#ping_course-content .learndash-wrapper .ld-breadcrumbs .ld-breadcrumbs-segments a {
	font-size: 15px;
	font-weight: 100;
	color: #5271FF;
}

#ping_course-content:has(.is-type-video) {
	padding: 0;
}

#ping_course-content:has(.is-type-video) iframe {
	width: 100%;
	height: calc(100vh - 300px);
}

@media screen and (max-width: 768px) {
	#ping_course-content:has(.is-type-video) iframe {
		aspect-ratio: 16 / 9;
		height: auto;
		margin-top: -30px;
	}
}

@media screen and (orientation: landscape) {
	#ping_course-content:has(.is-type-video) iframe {
		height: calc(100vh - 90px);
	}
}

/* If sidebar is minimized on a page with a video */
body:has(#ping_course-sidebar .ld-focus-sidebar-trigger > .ld-icon-arrow-left) #ping_course-content:has(.is-type-video) {
	max-width: calc(100vw - 50px);
}

#ping_course-content:has(.is-type-video) .learndash-wrapper .ld-tabs {
	margin: 0;
	margin-top: 19px;
}

#ping_course-content .is-type-video {
	background-color: #000;
	margin: 0;
}

#ping_course-content:has(.is-type-video) .ld-topic-status,
#ping_course-content:has(.is-type-video) .ld-lesson-status,
#ping_course-content:has(.is-type-video) .ping_lesson-title,
#ping_course-content:not(:has(.is-type-video)) .ping_buttons-wrapper h4,
#ping_course-content:has(.is-type-video) h2,
.ld-focus-header .ping_buttons-wrapper {
	display: none;
}

#ping_course-content:not(:has(.is-type-video)) .ping_buttons-wrapper .ld-content-actions {
	border-top: 0;
}

#ping_course-content .ping_primary-btn .ld-button,
.ping_quiz-content .wpProQuiz_content .wpProQuiz_button:not(.wpProQuiz_button_reShowQuestion),
.learndash-wrapper .ld-quiz-actions input[name=reShowQuestion], .learndash-wrapper .ld-quiz-actions input[name=restartQuiz],
.learndash-wrapper .wpProQuiz_content a#quiz_continue_link{
	background-color: #5271FF;
	font-family: "Mukta", Sans-serif;
	font-size: 18px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0px;
	fill: #FFFFFF;
	color: #FFFFFF;
	border-radius: 50px;
	padding: 12px 20px 12px 20px;
	white-space: nowrap;
}

#ping_course-content .ping_quiz-content .wpProQuiz_content .wpProQuiz_button.wpProQuiz_button_restartQuiz{
    background-color: #ffffff !important;
    border: 2px solid #5271FF;
    color: #5271FF;
}

#ping_course-content .learndash-wrapper .ld-quiz-actions input[name=reShowQuestion]:hover{
	color: #FFFFFF;
    background-color: #4461E7;
    border-color: #4461E7;
}

.learndash-wrapper .wpProQuiz_content a#quiz_continue_link{
	background-color: #019e7c;
}

#ping_course-content input[type=submit].learndash_mark_complete_button {
	background-color: #5271FF;
	font-family: "Mukta", Sans-serif;
	font-size: 18px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0px;
	fill: #FFFFFF;
	color: #FFFFFF;
	border-radius: 50px !important;
	white-space: nowrap;
	padding-right: 50px;
}

#ping_course-content .learndash-wrapper:not(.ld-registration__outer-wrapper) #sfwd-mark-complete:after,
#ping_course-content .learndash-wrapper:not(.ld-registration__outer-wrapper) .sfwd-mark-complete:after {
	font-size: 18px;
	right: 1em;
}

.learndash_post_sfwd-lessons .learndash-wrapper .ld-content-actions .ld-content-action a,
#ping_course-content .ping_secundary-btn .ld-button {
	background-color: #FFFFFF;
	font-family: "Mukta", Sans-serif;
	font-size: 18px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0px;
	fill: #5271FF;
	color: #5271FF;
	border: solid 2px #5271FF !important;
	border-radius: 50px !important;
	padding: 12px 20px 12px 20px;
	white-space: nowrap;
}

#ping_course-content .ping_buttons-wrapper .ld-content-actions {
	padding: 1em;
}

#ping_course-content .ping_buttons-wrapper h4 {
	padding: 0 1.5em;
}

.learndash-wrapper .ld-focus .ld-focus-header,
.learndash-wrapper .ld-focus .ld-focus-header .ld-user-menu,
#ping_course-sidebar .ld-course-navigation-heading,
.learndash-wrapper .ld-focus .ld-focus-header .ld-progress,
.learndash-wrapper .ld-focus.ld-focus-position-right .ld-focus-sidebar{
	border: none;
}
.learndash-wrapper .ld-focus.ld-focus-position-right .ld-focus-sidebar .ld-focus-sidebar-wrapper{
border-left: 1px solid #e2e7ed;
}

/* ------- 2.4 COURSE LESSONS PAGES - Progress.php; */


.ping_progress-bar .ld-progress-stats {
	justify-content: space-between !important;
	width: 100% !important;
	font-size: 13px;
}

.ping_progress-bar {
	align-items: start !important;
}

#ping_focus-main .ping_progress-bar .ld-progress-bar {
	height: 4px;
}

.ping_progress-bar .ld-progress-wrap {
	max-width: 380px !important;
}

#ping_focus-main .ld-brand-logo {
	flex: 0 0 240px;
}

.ping_text-white {
	color: #fff !important;
}

.ld-progress-bar-percentage {
	background-color: #5271ff !important;
}



/* -------- 3. CONTACT PAGE */

.ping_contact-info-container,
.ping_course-info-container {
	height: fit-content;
}

.ping_contactform .elementor-button[type="submit"]:hover,
.ping_contactform input[type="checkbox"],
#form-field-voorwaarden-0 {
	cursor: pointer;
}

.ping_login-form input,
.ping_contactform input{
	font-family: "Mukta", Sans-serif;
	font-size: 18px;
	color: #272E38 !important;
	border: 1px solid #e5e5ef !important;
}

.ping_login-form a,
.ping_contactform a{
	text-transform: none;
	font-size: 18px !important;
}

.ping_login-form a,
.ping_contactform a:nth-of-type(1) :hover{
	color: #000;
}

.ping_login-form a:nth-of-type(2) {
    color: #5271FF;
    text-decoration: underline;
}


.ping_login-form button[type=submit],
.ping_contactform button[type=submit]{
	background-color: #5271FF !important;
	font-family: "Mukta", Sans-serif;
	font-size: 18px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0px;
	fill: #FFFFFF;
	color: #FFFFFF;
	border-style: solid;
	border-width: 1px 1px 1px 1px;
	border-radius: 50px 50px 50px 50px;
	padding: 12px 50px 12px 50px;
	cursor: pointer;
}

.ping_login-form .elementor-form-fields-wrapper,
.ping_contactform .elementor-form-fields-wrapper{
	justify-content: space-between;
}

.ping_login-form .elementor-field-type-checkbox,
.ping_contactform .elementor-field-type-acceptance,
.ping_login-form .elementor-field-type-submit,
.ping_contactform .elementor-field-type-submit{
	width: fit-content;
	margin-top: 18px;
}

.elementor-login__logged-in-message{
	font-size: 18px;
    padding: 12px 24px;
    background-color: #F2F4FF;
    text-align: center;
    border-radius: 15px;
}

.elementor-field-type-recaptcha_v3{
	width: 1px;
    height: 1px;
    position: absolute;
	visibility: hidden;
}

/* -------- 3. CONTACT PAGE - Global */

form input[type=text]:not(#adminbar-search),
form input[type=number],
form input[type=email],
form input[type=tel],
form input[type=password],
form textarea{
	font-family: "Mukta", Sans-serif;
	background-color: #ffffff !important;
	border-color: #e5e5ef !important;
	border-width: 1px !important;
	border-radius: 5px !important;
	font-size: 18px !important;
	min-height: 47px !important;
	padding: 6px 16px !important;
	font-weight: 300 !important;
	color: #272E38 !important;
}

form button[type=submit] {
	background-color: #5271FF;
	font-family: "Mukta", Sans-serif;
	font-size: 18px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0px;
	fill: #FFFFFF;
	color: #FFFFFF;
	border-style: solid;
	border-width: 1px 1px 1px 1px;
	border-radius: 50px 50px 50px 50px;
	padding: 12px 50px 12px 50px;
}

form input[type=checkbox] {
	border-color: #e5e5ef !important;
}

form label {
	font-size: 15px;
	color: #272E38;
}

/* -------- 4. CURSUSSEN PAGE */



/* -------- 5. JOUW DASHBOARD PAGE - SALES SCAN */
.ping_sales_scan_check_wrapper {
	position: absolute;
	top: 0%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: #F8F9FD;
	border-radius: 18px;
	padding: 20px;
	z-index: 9999;
	box-shadow: 0px 0px 120px -20px rgba(81.99999999999996, 113, 255, 0.38);
	width: 900px;
	max-width: 80vw;
	text-align: center;
}
@media (max-width: 768px) {
	.ping_sales_scan_check_wrapper {
		width: 90%; /* Adjust width to fit smaller screens */
		padding: 15px;
	}

	/* Additional adjustments for even smaller screens */
	@media (max-width: 480px) {
		.ping_sales_scan_check_wrapper {
			width: 100%;
			padding: 10px;
			top: 10%; /* Adjust position for small screens */
		}
	}
}
.ping_sales_scan_button {
	padding: 8px 35px;
	background-color: #5271FF;
	color: white;
	border-radius: 50px;
	text-align: center;
	cursor: pointer;
	width: fit-content;
	margin: 30px auto 20px;
	font-size: 18px;
	font-weight: 600;
}

.ping_sales_scan_explain {
	color: #5271FF;
	/* Different color for the explain button */
	text-align: center;
	text-decoration: underline;
	font-size: 18px;
	padding-top: 6px;
	padding-bottom: 12px;
	
	display:none;
}

.ping_sales_scan_button:hover {
	background-color: #4864e4;
}

.ping_sales_scan_explain:hover {
	color: #4864e4;
}

/* -------- 6. LMS QUIZ PAGE */
.ping_quiz-content .wpProQuiz_content .wpProQuiz_quiz .wpProQuiz_list .wpProQuiz_listItem .wpProQuiz_question .wpProQuiz_question_text {
	background-color: #F2F4FF !important;
	align-items: center;
	border-radius: 6px;
	display: flex;
	justify-content: space-between;
	padding: .5em 1em;
}

.ping_quiz-content .wpProQuiz_content .wpProQuiz_quiz .wpProQuiz_list .wpProQuiz_listItem .wpProQuiz_question .wpProQuiz_question_text p {
	font-size: 23px !important;
}

.ping_quiz-content .wpProQuiz_content .wpProQuiz_quiz .wpProQuiz_list .wpProQuiz_listItem .wpProQuiz_answerCorrectIncomplete label,
.ping_quiz-content .wpProQuiz_content .wpProQuiz_quiz .wpProQuiz_list .wpProQuiz_listItem .wpProQuiz_answerCorrect label {
	background-color: #F2FBF5 !important;
	border-color: #00c349;
	color: #000;
}

.ping_quiz-content .wpProQuiz_content .wpProQuiz_quiz .wpProQuiz_list .wpProQuiz_listItem .wpProQuiz_answerIncorrectIncomplete label,
.ping_quiz-content .wpProQuiz_content .wpProQuiz_quiz .wpProQuiz_list .wpProQuiz_listItem .wpProQuiz_answerIncorrect label {
	background-color: #FFF6F5 !important;
	border-color: #f11414;
	color: #000;
}

/* LearnDash 5.x rendert de antwoordenlijst niet meer als <ul>/<li>:
   <ul class="wpProQuiz_questionList">  ->  <div class="wpProQuiz_questionList">
   <li class="wpProQuiz_questionListItem">  ->  <div class="wpProQuiz_questionListItem">
   De classes zijn gelijk gebleven, de elementen niet. Alle selectors
   hieronder liepen via `ul` en `li` en matchten daardoor niets meer —
   inclusief de complete opmaak van de radio buttons. Nu op de classes,
   zodat een volgende elementwissel er niet opnieuw doorheen fietst. */
.ping_quiz-content .wpProQuiz_content .wpProQuiz_quiz .wpProQuiz_list .wpProQuiz_listItem .wpProQuiz_question .wpProQuiz_questionList .wpProQuiz_answerIncorrectIncomplete label input[type="radio"]:checked,
.ping_quiz-content .wpProQuiz_content .wpProQuiz_quiz .wpProQuiz_list .wpProQuiz_listItem .wpProQuiz_question .wpProQuiz_questionList .wpProQuiz_answerIncorrect label input[type="radio"]:checked {
	border-color: #f11414;
}

.ping_quiz-content .wpProQuiz_content .wpProQuiz_quiz .wpProQuiz_list .wpProQuiz_listItem .wpProQuiz_question .wpProQuiz_questionList .wpProQuiz_answerIncorrectIncomplete label input[type="radio"]:checked::before,
.ping_quiz-content .wpProQuiz_content .wpProQuiz_quiz .wpProQuiz_list .wpProQuiz_listItem .wpProQuiz_question .wpProQuiz_questionList .wpProQuiz_answerIncorrect label input[type="radio"]:checked::before {
	background-color: #f11414;
}

.ping_quiz-content .wpProQuiz_content .wpProQuiz_quiz .wpProQuiz_list .wpProQuiz_listItem .wpProQuiz_question .wpProQuiz_questionList .wpProQuiz_answerCorrectIncomplete label input[type="radio"]:checked,
.ping_quiz-content .wpProQuiz_content .wpProQuiz_quiz .wpProQuiz_list .wpProQuiz_listItem .wpProQuiz_question .wpProQuiz_questionList .wpProQuiz_answerCorrect label input[type="radio"]:checked {
	border-color: #00c349;
}

.ping_quiz-content .wpProQuiz_content .wpProQuiz_quiz .wpProQuiz_list .wpProQuiz_listItem .wpProQuiz_question .wpProQuiz_questionList .wpProQuiz_answerCorrectComplete label input[type="radio"]:checked::before,
.ping_quiz-content .wpProQuiz_content .wpProQuiz_quiz .wpProQuiz_list .wpProQuiz_listItem .wpProQuiz_question .wpProQuiz_questionList .wpProQuiz_answerCorrect label input[type="radio"]:checked::before {
	background-color: #00c349;
}

.ping_quiz-content .wpProQuiz_content .wpProQuiz_quiz .wpProQuiz_list .wpProQuiz_listItem .wpProQuiz_question .wpProQuiz_questionListItem label {
	display: flex;
	align-items: center;
	/* Vertically center, if needed */
}

/* Hide the default radio button */
.ping_quiz-content .wpProQuiz_content .wpProQuiz_quiz .wpProQuiz_list .wpProQuiz_listItem .wpProQuiz_question .wpProQuiz_questionListItem label input[type="radio"] {
	appearance: none;
	/* Removes default styling for radios */
	-webkit-appearance: none;
	-moz-appearance: none;
	width: 18px;
	height: 18px;
	border: 2px solid #F2F4FF;
	background-color: #F2F4FF;
	border-radius: 50%;
	cursor: pointer;
	position: relative;
}

/* Add background color when checked */
.ping_quiz-content .wpProQuiz_content .wpProQuiz_quiz .wpProQuiz_list .wpProQuiz_listItem .wpProQuiz_question .wpProQuiz_questionListItem label input[type="radio"]:checked {
	background-color: #EFF2F7;
	border-color: #00A2E8;
}

/* Optional: add inner dot for checked state */
.ping_quiz-content .wpProQuiz_content .wpProQuiz_quiz .wpProQuiz_list .wpProQuiz_listItem .wpProQuiz_question .wpProQuiz_questionListItem label input[type="radio"]:checked::before {
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	background-color: #00A2E8;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.ping_quiz-content .wpProQuiz_content .wpProQuiz_sending div .course_progress .sending_progress_bar {
	background: #5271FF !important;
}


.ping_quiz-content .wpProQuiz_content .wpProQuiz_quiz .wpProQuiz_list .wpProQuiz_listItem {
	margin: 25px 0px;
	border-radius: 20px;
	background-color: #fff;
}

.ping_quiz-content .wpProQuiz_content .wpProQuiz_quiz .wpProQuiz_list .wpProQuiz_listItem .wpProQuiz_response {
	margin-bottom: 60px;
}

.ping_quiz-result{
	display: flex;
    padding: .5em 1em;
	border-radius: 6px;
    background-color: #F8F9FD;
    align-items: center;
	justify-content: space-between;
}

.ping_quiz-result h4{
	font-size: 18px;
	color: #272E38;
	}

.ping_quiz-result .wpProQuiz_quiz_time{
	font-weight: 300;
	font-size: 18px;
	color: #272E38;
}

.ping_quiz-score{
	display: flex;
    align-items: center;
	gap: 6px;
}

.ping_quiz-score .wpProQuiz_graded_points,
.ping_quiz-score .wpProQuiz_points{
    background-color: transparent !important;
	color: #272E38;
	font-weight: 500;
	font-size: 18px;
	border: none;
}

/* -------- 6.0 SALESSCAN CSS */

body.learndash-cpt-sfwd-courses-2087-parent { /* << Let op het is het ID van de cursuspagina dus mocht dit veranderen.. dan aanpassen! */
	/* hier komen uitzonderingen */
}

.wpProQuiz_button{
text-align: center !important;
}

.learndash-wrapper .wpProQuiz_content .wpProQuiz_questionListItem label.is-selected, .learndash-wrapper .wpProQuiz_content .wpProQuiz_questionListItem label:focus-within,
.ping_quiz-content .wpProQuiz_content .wpProQuiz_quiz .wpProQuiz_list .wpProQuiz_listItem .wpProQuiz_question .wpProQuiz_questionListItem label input[type="radio"]:checked{
	border-color: #5271ff !important;
}

.ping_quiz-content .wpProQuiz_content .wpProQuiz_quiz .wpProQuiz_list .wpProQuiz_listItem .wpProQuiz_question .wpProQuiz_questionListItem label input[type="radio"]:checked::before{
	background-color: #5271ff !important;
}

#ping_course-content .wpProQuiz_answerIncorrect .is-selected{
	border: 2px solid #FE513E !important;
}

#ping_course-content .wpProQuiz_answerCorrect .is-selected{
	border: 2px solid #07B436 !important;
}



/* -------- 6.1 PROFILE DROPDOWN */

.ping_custom-dashboard-dropdown-title-wrapper {
	display: flex;
}

@media (max-width:768px){
	.ping_custom-dashboard-dropdown-title-wrapper{
		padding-left: 30px;
	}
}

.ping_custom-dashboard-dropdown {
	position: relative;
	display: inline-block;
	font-family: "Mukta", Sans-serif;
	color: #ffffff;
	/* Match the text color */
}

.ping_dropdown-role {
	font-size: 14px;
	font-weight: 500;
	color: #999999;
	/* Grey for the role */
	display: block;
	margin-bottom: -14px;
}

.ping_dropdown-title {
	cursor: pointer;
    font-weight: 500;
    font-size: 16px;
    color: #ffffff;
    align-items: center;
    font-family: "Mukta", Sans-serif;
    line-height: 20px;
    display: block;
    max-width: 100px;
    min-width: 5vw;
}

.ping_custom-dashboard-dropdown-title-wrapper{
	margin-top: 5px;
}

.ping_dropdown-arrow {
	margin-top: -2px;
	transition: transform 0.3s ease;
	stroke: #ffffff;
	/* Ensure the arrow is white */
	width: 24px;
}

.ping_custom-dashboard-dropdown:hover .ping_dropdown-arrow,
.ping_user-menu:hover .ping_dropdown-arrow {
	transform: rotate(180deg);
	/* Rotate the arrow on hover */
}

.ping_dropdown-menu {
	display: none;
	position: absolute;
	background-color: #ffffff;
	border-radius: 8px;
	padding: 20px;
    width: max-content !important;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
	right: 0;
	z-index: 9999;
	top: -8px;
}

#ping_focus-main .ping_user-menu .ping_dropdown-menu{
	top: 30px;
	display: grid;
}



.ping_dropdown-role {
	font-family: "Mukta", Sans-serif;
	font-size: 15px;
	font-weight: 100;
	color: #B6C9FF;
}

/* .ping_dropdown-title {
	font-family: "Mukta", Sans-serif;
	font-size: 18px;
}
 */
.ping_custom-dashboard-dropdown {
	height: 100%;
	display: flex;
}

@media only screen and (min-width: 1024px) {
	.ping_user-menu {
		flex: 0 0 350px !important;
	}
}

.ping_custom-dashboard-dropdown:hover .ping_dropdown-menu,
.ping_user-menu:hover .ping_dropdown-menu {
	display: block;
	padding: 12px 20px;
}

.ping_custom-dashboard-dropdown:hover .ping_dropdown-menu li a,
.ping_user-menu .ping_dropdown-menu a {
	font-family: "Mukta", Sans-serif;
	font-size: 15px;
	color: #272747 !important;
}

.ping_custom-dashboard-dropdown:hover .ping_dropdown-menu li a:hover,
.ping_user-menu .ping_dropdown-menu a:hover {
	color: #5271FF !important;
	background: none !important;
}

.ping_custom-dashboard-dropdown:hover .ping_dropdown-menu li:last-child a,
.ping_user-menu .ping_dropdown-menu a:last-child {
	color: #FE513F !important;
}

.learndash-wrapper .ld-focus .ld-focus-header .ping_user-menu .ld-user-menu-items a {
	background-color: #fff;
	border-bottom: unset;
	color: #5271FF;
	display: unset;
	font-family: "Mukta", Sans-serif;
	font-size: 15px;
	font-weight: 300;
	padding: unset;
	position: unset;
	white-space: nowrap;
}

.ping_user-menu .ping_dropdown-menu:before {
	border: none !important;
}

.ping_dropdown-menu li {
	list-style: none;
	text-align: left;
}

.ping-admin-unread-count-background {
    position: absolute;
    right: -8px;
    top: -4px;
	height:20px;
    width: 20px;
    background-color: #F73568; /* Red background */
    border-radius: 50%; /* Makes it a circle */
    display: flex; /* Center the text */
    align-items: center; /* Vertically center */
    justify-content: center; /* Horizontally center */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Optional shadow for a nice touch */
}

.ping-admin-unread-count {
    color: white; /* White text */
    font-size: 14px; /* Adjust font size as needed */
    font-weight: bold; /* Make the number bold */
    line-height: 1; /* Prevent extra spacing */
    text-align: center; /* Center the text */
}


/* -------- 6.2 IF NOT LOGGED IN BUTTONS */
.ping_notlogged_in_wrapper {
	width: 300px;
	display: flex;
	justify-content: space-between;
}

.ping_custom_login_button {
	font-size: 17px;
	font-family: "Mukta", Sans-serif;
	font-weight: 600;
	padding: 13px 20px;
	border: 1px solid #fff;
	border-radius: 100px;
	line-height: 20px;
}

.ping_custom_login_button:hover{
	background-color: #00000033;
}

.ping_custom_login_button:hover a{
	color:#ffffff !important;
}


.ping_custom_buy_license_button,
.ping_custom_go_to_dashboard{
	font-size: 17px;
	font-family: "Mukta", Sans-serif;
	font-weight: 600;
	padding: 13px 20px;
	border: 1px solid #5271FF;
	border-radius: 100px;
	background-color: #5271FF;
	line-height: 20px;
}


.ping_custom_buy_license_button:hover,
.ping_custom_go_to_dashboard:hover{
	background-color: #4461E7 !important;
}

.ping_notlogged_in_wrapper a,
.ping_notlogged_in_wrapper a:hover,
.ping_custom_go_to_dashboard a,
.ping_custom_go_to_dashboard a:hover{
	color: #ffffff !important;
}

/* -------- 7. SALESGENIUS ICONS */


.ld-icon-content:before {
	font-family: "salesgenius";
	content: '\e848';
}

/* -------- 8. WOOCOMMERCE OVERRIDE */

.ping_profile-page .woocommerce p,
.ping_profile-page .woocommerce-Addresses address {
	font-size: 18px !important;
	color: #272E38;
	font-family: "Mukta", Sans-serif;
}

.ping_profile-page .woocommerce-MyAccount-navigation {
	background-color: #F2F4FF;
	margin: 30px !important;
	margin-right: 15px !important;
	border-radius: 15px 15px 15px 15px;
	border: none;
	padding-bottom: 0;
	height: max-content;
}

.ping_profile-page .woocommerce-MyAccount-navigation a {
	color: #272E38;
}

.ping_profile-page .woocommerce-MyAccount-navigation-link.is-active a,
.ping_profile-page .woocommerce-MyAccount-navigation-link a:hover {
	color: #5271FF !important;
	background: none !important;
}

.ping_profile-page .woocommerce-MyAccount-navigation-link--customer-logout a,
.ping_profile-page .woocommerce-MyAccount-navigation-link--customer-logout a:hover {
	color: #FE513F !important;
	background: none !important;
	border-top: 1px solid #DFE2FF;
	border-radius: 0 !important;
	box-shadow: none;
}

.ping_profile-page .woocommerce-MyAccount-content {
	width: calc(100vw - 375px) !important;
	margin: 30px !important;
	margin-left: 15px !important;
	border-radius: 15px;
	box-shadow: none;
}

.ping_profile-page .woocommerce {
	background-color: #F3F3F9;
	display: flex;
}

.ping_profile-page .woocommerce-info {
	background-color: transparent;
	font-size: 18px;
	font-family: "Mukta", Sans-serif;
	color: #272E38;
}

.ping_profile-page .woocommerce a.button,
.ping_profile-page .woocommerce button {
	background-color: #5271FF !important;
	font-family: "Mukta", Sans-serif !important;
	font-size: 18px !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	letter-spacing: 0px !important;
	fill: #FFFFFF !important;
	color: #FFFFFF !important;
	border-style: solid !important;
	border-width: 1px 1px 1px 1px !important;
	border-radius: 50px 50px 50px 50px !important;
	padding: 12px 20px 12px 20px !important;
}

.ping_profile-page .woocommerce-Addresses h2 {
	font-family: "Poppins", Sans-serif;
	font-size: 24px;
	color: #272E38;
}

.ping_profile-page .woocommerce-Addresses a {
	font-size: 18px !important;
	color: #5271FF;
	font-family: "Mukta", Sans-serif;
}

.ping_profile-page .addresses .title .edit {
	float: unset;
}

.ping_profile-page .woocommerce form .form-row input.input-text,
.ping_profile-page .woocommerce form .form-row textarea {
	padding: 8px 12px;
	border: 1px solid #C4C6C9;
	border-radius: 5px;
	font-family: "Mukta", Sans-serif;
	color: #272E38;
	font-size: 18px;
	font-weight: 300;
}

.ping_profile-page .woocommerce-MyAccount-content {
	color: #272E38 !important;
	font-size: 18px !important;
	font-weight: 500;
	font-family: "Mukta", Sans-serif !important;
}

.ping_profile-page .woocommerce-MyAccount-content fieldset {
	border: none;
	background-color: #FCF5F8;
	border-radius: 12px;
	margin-top: 24px;
}

.ping_profile-page .woocommerce-form-row span:has(em) {
	background-color: #ECF2FF;
	font-size: 15px;
	padding: 0px 12px;
}


/* -------- 9. REPORT DASHBOARD */

.ping_report-dashboard * {
	font-size: 15px;
}

.ping_report-dashboard .wp-block-columns img {
	width: 15px;
	height: auto;
}

.ping_report-dashboard .wisdm-filter-item {
	padding: 15px;
}

.ping_report-dashboard {
	background-color: #f3f3f9;
	padding: 0;
	margin: 0;
}

.ping_report-title {
	max-width: 1400px !important;
	width: 100%;
	color: #fff;
	margin: auto;
	padding-top: 50px;
}

.ping_report-title-container {
	background-color: transparent;
	background-image: linear-gradient(180deg, #282747 0%, #1A2763 100%);
	padding: 0;
	margin: 0;
	height: 400px;
}

.pagination-section button:hover {
	background-color: #5271FF !important;
}

.qre-reports-content .back-button:hover:hover {
	background-image: url("https://salesgenius.nl/wp-content/plugins/learndash-propanel/assets/public/images/Left-Arrow.png") !important;
	background-repeat: no-repeat;
    background-position: 10px center;
    background-size: 6px;
}

.pagination-section button {
	cursor: pointer;
}

.qre-reports-content .back-button {
	background-color: #5271FF !important;
	color: #FFFFFF !important;
}

.qre-reports-content .user-info-section .thumbnail {
	display: none !important;
}

.qre-reports-content .user-info-section {
	box-shadow: unset !important;
	padding: 0 !important;
}

.qre-reports-content .user-info-section .information .name span {
	font-size: 24px !important;
}

.ping_report-type-select .wisdm-learndash-reports-report-filters #wisdm-learndash-report-filters-container {
	min-height: 180px;
	border-radius: 15px;
}

.wisdm-learndash-reports-report-filters .wisdm-learndash-reports-chart-block .react-tabs__tab[aria-selected="false"] {
	color: #5271FF !important;
}

.wisdm-learndash-reports-report-filters .wisdm-learndash-reports-chart-block .react-tabs__tab-list .react-tabs__tab--selected {
	background: #5271FF !important;
}

.quiz-report-filters-wrapper .select-view {
	display: none;
}

/* hide all filterfield */
.ping_report-type-select wisdm-learndash-reports-course-report-tools-wrap:has(.admin-group-category-container) .wisdm-learndash-reports-report-filters:not(.admin-group-category-container) .selector:nth-child(2), /* for admin */
.ping_report-type-select .wisdm-learndash-reports-course-report-tools-wrap .wisdm-learndash-reports-report-filters.admin-group-category-container,
.ping_report-type-select .wisdm-learndash-reports-course-report-tools-wrap .wisdm-learndash-reports-report-filters .selector {
	display: none !important;
}

/* only show curssussen */
.ping_report-type-select .wisdm-learndash-reports-course-report-tools-wrap:has(.admin-group-category-container) .wisdm-learndash-reports-report-filters .selector:first-child, /* for admin */
.ping_report-type-select .wisdm-learndash-reports-course-report-tools-wrap:not(:has(.admin-group-category-container)) .wisdm-learndash-reports-report-filters:not(.admin-group-category-container) .selector:nth-child(2), /* for Groepsleider */
.ping_report-type-select .wisdm-learndash-reports-course-report-tools-wrap .wisdm-learndash-reports-report-filters .selector.lr-apply{
	display: block !important;
	max-width: 540px;
}

.wisdm-learndash-reports-report-filters{
	padding:0;
	margin:0;
	width:100% !important;
	justify-content: center;
}

.ping_report-type-select {
	background-color: #F8F9FD;
	border-radius: 16px 16px 16px 16px;
	box-shadow: 0px 0px 120px -20px rgba(81.99999999999996, 113, 255, 0.38);
	width: 900px;
	max-width: 80vw;
	margin: auto;
	margin-top: -150px;
	border-radius: 15px;
}

.ping_report-type-select .wisdm-learndash-reports-course-report-tools-wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.wisdm-learndash-reports-chart-block .react-tabs__tab-list {
	left: 50%;
	width: 100%;
	transform: translateX(-50%);
	display: flex;
	justify-content: center;
}

.wp-block-wisdm-learndash-reports-course-progress-rate{
	width: 100% !important;
}

.refresh-data .chart_update_time {
	position: absolute;
	bottom: 30px;
	right: -30px;
}

.refresh-data .chart_update_time,
.refresh-data .chart-refresh-icon {
	color: #ffffff;
}


.ping_report-type-select .course-report-by,
.ping_report-type-select .quiz-report-types {
	display: flex;
	justify-content: center;
	margin: 0px 20% 20px;
	background-color: #ecf2ff;
	padding: 6px;
	border-radius: 10px;
	gap: 12px;
}

.ping_report-type-select .quiz-report-types {
	margin: 0px 17.5% 20px;
}

.course-report-by label,
.quiz-report-types label {
	margin-right: unset;
	color: #272E38;
	font-size: 18px;
	padding: 2px 12px;
}

.ping_report-dashboard .error,
.ping_report-dashboard .error-message {
	font-size: 15px;
	line-height: 1.25em;
	background-color: #fae3e3;
	padding: 1em;
	border-radius: 15px;
	color: #bd1818;
}

.course-report-by label.checked,
.quiz-report-types label.checked {
	background: #fff;
	border-radius: 8px;
}

.course-report-by input[type="radio"],
.quiz-report-types input[type="radio"] {
	display: none !important;
}

.ping_report-type-select .admin-group-category-container {
	margin-bottom: 20px !important;
	width: 33%;
}

.ping_report-type-select .admin-group-category-container {
	margin-bottom: 20px !important;
	width: 33%;
}

.ping_report-type-select .wisdm-learndash-reports-course-report-tools-wrap .wisdm-learndash-reports-report-filters:not(.admin-group-category-container) {
	width: 66%;
}

.select-control,
div#js-daterangepicker-predefined {
	border: 1px solid #C4C6C9;
	border-radius: 5px;
	font-family: "Mukta", Sans-serif;
	color: #272E38;
	font-size: 18px;
	font-weight: 300;
	box-shadow: none;
}

.learner-specific-course-reports .select-control {
	width: 100% !important;
}

@media screen and (max-width: 767px) {
	.quiz-reporting-custom-filters {
		flex-direction: column;
	}
	
	.filter-wrap {
		flex-direction: column;
	}
	
	.custom-filters .filter-wrap .quiz-reporting-custom-filters .selector {
		width: 100%;
	}
	
	.custom-filters .filter-wrap .quiz-reporting-custom-filters {
		margin: 0 40px;
		width: 100%;
	}
	
	.custom-filters .filter-wrap .quiz-reporting-custom-filters {
		width: 100%;
		margin-top: 20px;
	}
}

.previous-page, .next-page {
	background-color: #5271FF !important;
	font-family: "Mukta", Sans-serif !important;
	font-size: 19px !important;
	font-weight: 600 !important;
	padding: 13px 0 !important;
	letter-spacing: 0px !important;
	color: #FFFFFF !important;
	border-style: solid !important;
	border-width: 2px 2px 2px 2px !important;
	border-color: #5271FF !important;
	border-radius: 50px 50px 50px 50px !important;
	text-decoration: normal !important;
}

div.wp-block-wisdm-learndash-reports-quiz-reports, div.wp-block-wisdm-learndash-reports-quiz-reports {
	margin-top: 0 !important;
}

@media screen and (max-width: 1024px) {
	.ping_report-type-select .course-report-by, .ping_report-type-select .quiz-report-types {
		margin: 0 !important;
		margin-bottom: 20px !important;
	}
}

.refresh-data .chart_update_time {
	margin: 7px 0 43px !important;
}

.button-customize-preview {
	display: none;
}

.apply-filters button, .apply-filters {
	cursor: pointer;
}

.wisdm-learndash-reports-report-filters,
.wisdm-learndash-reports-report-filters-for-users {
	width: 100%;
}

.ping_report-type-select .selector.lr-learner .select-control {
	width: 540px;
}

div#js-daterangepicker-predefined {
	padding: 12px 40px 12px 18px;
}

.ping_report-dashboard .top-card-container {
	width: 300px;
	background-color: #DFE2FF;
}

.ping_report-dashboard .wisdm-graph-loading {
	border-radius: 15px !important;
	box-shadow: none;
	border: none;
}

.ping_report-dashboard .top-card-container,
.ping_report-dashboard .graph-card-container {
	border-radius: 15px !important;
	box-shadow: none;
	border: none;
	padding: 50px 30px;
}

.ping_report-dashboard .top-card-container:has(.wisdm-graph-loading),
.ping_report-dashboard .graph-card-container:has(.wisdm-graph-loading) {
	min-height: auto;
	width: 100%;
	background-color: transparent;
}

.ping_report-dashboard .wisdm-learndash-reports-report-filters .wisdm-learndash-reports-chart-block:has(.wisdm-graph-loading) {
	margin-bottom: 150px;
}

.wisdm-graph-loading {
	flex-direction: row-reverse;
	justify-content: center;
	align-items: center;
	gap: 0.5em;

	height: fit-content;
	widtH: fit-content;
	padding: 0.5rem 1.5rem;
	position: relative;
	left: 50%;
	transform: translate(-50%);
	background-color: #fff !important;
}

.wisdm-graph-loading img {
	width: 30px;
	height: auto;
}

.ping_report-dashboard .wisdm-reports .graph-card-container .wisdm-graph-loading::before,
.ping_report-dashboard .wisdm-learndash-reports-report-filters .graph-card-container .wisdm-graph-loading::before {
	font-family: "Mukta", Sans-serif;
	color: #272E38;
	font-size: 15px;
	font-weight: 300;
	content: 'Een moment geduld, de gegevens worden geladen...';
	height: 50px;
	display: flex;
	align-items: center;
}



.ping_report-subtitle {
	padding-left: 40px;
}

.ping_report-overview {
	display: flex;
	flex-direction: row-reverse;
	padding: 10px 20px;
}

div.wp-block-wisdm-learndash-reports-course-progress-rate {
	margin-top: 0 !important;
}

@media (max-width:768px){
	.ping_report-overview{
			height: initial;
		    flex-direction: column;
			align-items: center;
	}
	
	.ping_report-overview .wp-block-column{
	display: flex;
    justify-content: center;
	}
}

.ping_report-overview .wisdm-ld-reports-title {
	height: 1px;
}

.ping_report-overview.wisdm-learndash-reports-date-filters {
	margin: 0px;
}

.wisdm-learndash-reports-date-filters {
	margin-bottom: 0 !important;
	margin-top: 20px;
}


.ping_report-dashboard .chart-summary {
	margin-bottom: 30px;
	box-shadow: none !important;
	border-radius: 15px !important;
	border: 1px solid #F3F3F9 !important;
}

.apply-filters button{
	display: flex;
    align-items: center;
    justify-content: center;
    text-transform: none;
    font-size: 18px;
}

.selector.lr-apply{
	margin: 0 !important;
}

/* -------- 10. GROUPMANAGEMENT */

body:is(.page-id-1705, .page-id-1706, .page-id-1707, .page-id-1708, .page-id-1709) {
	background: #f3f3f9;
}

.uo-groups {
	font-family: "Mukta", Sans-serif;
	color: #272E38;
	font-size: 18px;
	font-weight: 300;
	box-shadow: none;
}

.select2-selection__rendered {
	font-family: "Mukta", Sans-serif;
	color: #272E38;
	font-size: 18px;
	font-weight: 300;
}

.select2-dropdown * {
	font-family: "Mukta", Sans-serif;
	color: #272E38;
	font-size: 15px;
	font-weight: 300;
}

.select2-dropdown {
	margin-top: 10px;
}

input.select2-search__field {
	max-width: 100% !important;
}

.uo-groups h2,
.uo-groups .uo-looks-like-h3,
.uo-groups h3 {
	font-family: "Mukta", Sans-serif;
	font-size: 24px;
	font-weight: 700;
	color: #272E38;
}

.uo-groups .group-table-heading {
	font-size: 18px;
}

.uo-groups .uo-groups-table thead tr,
.uo-groups .uo-groups-table thead tr th {
	background-color: #DFE2FF;
	color: #272E38;
}

.uo-groups .uo-groups-table a {
	color: #5271FF;
}

.dashicons-external:before {
	display: none;
}

.uo-groups .uo-btn:hover,
.uo-groups .uo-btn:focus,
.uo-groups .uo-btn:active {
	border-color: #5271FF;
	color: #5271FF;
}

.uo-groups-list-of-btns .uo-groups-list .uo-btn {
	font-family: "Mukta", Sans-serif;
	font-size: 15px;
	font-weight: 300;
	line-height: 31px;
	letter-spacing: 0px;
	padding: 10px 15px;
}


.uo-groups-list-of-btns .uo-groups-list .uo-btn:hover {
	background: none;
	border: none;
	color: #5271FF;
	font-family: "Mukta", Sans-serif;
	font-size: 15px;
	font-weight: 300;
	line-height: 31px;
	letter-spacing: 0px;
	padding: 10px 15px;
}

/* -------- 10.1 CUSTOM SEAT MANAGMENT (plekken) */
.ping_custom-seat-manage-button {
	font-family: "Mukta", Sans-serif;
    font-size: 19px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0px;
    color: #FFFFFF;
    background-color: #5271FF;
    border-color: #5271FF;
    border-width: 1px;
    border-radius: 50px;
    padding: 17px 76px 17px 76px;
	cursor: pointer;
}
.ping_custom-seat-manage-button:hover {
	color: #FFFFFF;
    background-color: #4461E7;
    border-color: #4461E7;
}

.ping_seatmanagement-modal {
	display: none;
	position: fixed;
	z-index: 999;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0, 0, 0, 0.5);
}

.ping_seatmanagement-modal-content {
	background: #fff;
	margin: 15% auto;
	padding: 20px;
	border-radius: 10px;
	width: 35%;
	box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
	text-align: center;
	position: relative;
}

.ping_seatmanagement-modal-content p {
	font-size: 15px;
    line-height: initial;
    margin-top: 8px;
	font-weight: 400;
}

.ping_seatmanagement-modal-header {
	font-size: 1.5em;
	margin-bottom: 20px;
	font-weight: bold;
}

.ping_seatmanagement-modal-close {
	position: absolute;
	top: 10px;
	right: 20px;
	font-size: 1.5em;
	font-weight: bold;
	color: #333;
	cursor: pointer;
}

.ping_seatmanagement-modal-close:hover {
	color: #000;
}

.ping_seatmanagement-modal-buttons {
	display: flex;
	justify-content: center;
	gap: 20px;
	margin-top: 20px;
}

.ping_seatmanagement-modal-open-button {
	padding: 10px 20px;
	background-color: #0073aa;
	color: white;
	border: none;
	border-radius: 5px;
	cursor: pointer;
}

.ping_seatmanagement-modal-open-button:hover {
	color: #FFFFFF;
    background-color: #4461E7;
    border-color: #4461E7;
}

#group-management-header__selector .select2-container {
	z-index: unset;
	margin-top: -6px;
    margin-left: 10px;
}

/* Error Message Styling */
.ping_custom-teammanagement-error {
    color: #ff4d4f; /* Bright red for errors */
    background-color: #ffe6e6; /* Light red background */
    border: 1px solid #ff4d4f; /* Red border */
    padding: 10px;
    border-radius: 5px;
    font-weight: bold;
    margin-top: 10px;
    text-align: center;
}

/* Success Message Styling */
.ping_custom-teammanagement-succes {
    color: #4caf50; /* Green for success */
    background-color: #e6f9e6; /* Light green background */
    border: 1px solid #4caf50; /* Green border */
    padding: 10px;
    border-radius: 5px;
    font-weight: bold;
    margin-top: 10px;
    text-align: center;
}

.uo-row .uo-table-row .uo-table-header{
	background-color: #dfe2ff;
    color: #262e39;
}

.uo-groups .uo-groups-table .user_edit_link{
	color: #5271ff;
}

#ping_seatmanagement-open-modal-btn{
	background: none;
    border: none;
    color: #5271ff;
    font-size: 18px;
    font-weight: 100;
    float: right;
	margin-top: -9px;
}

@media (max-width: 768px){
	.uo-groups .uo-groups-selector form{
		display: block;
	}

	#group-management-header__selector .uo-select,
	#group-management-header__selector .select2-container{
		margin-left: 0;
	}
}

/* -------- 11. PRICING / CHECKOUT */

/* ------ summary */
.ping_voordelen-unfold summary {
	list-style: none;
}

.ping_voordelen-unfold summary::after {
	content: '';
	width: 18px;
	height: 10px;
	background: url(/wp-content/uploads/2024/09/Path-157.svg) no-repeat;
	margin-left: .5em;
	background-size: cover;
	transition: 0.2s;
	display: inline-block;
}

.ping_voordelen-unfold details[open]>summary::after {
	transform: rotate(180deg);
}

.ping_voordelen-unfold summary::-webkit-details-marker {
	display: none;
}


@media (max-width: 768px){
	.pricing-table	.e-n-tabs-heading{ 
		display: flex;
		align-items: center;
		margin-bottom: 2rem;
	}
	
	.pricing-table .e-n-tabs-heading button{ 
	    margin: 0 !important;
	}
}
/* ------ General */

.pvp-priceplan-text {
    min-height: 85px;
}


.ping_seats-pricingplan {
	text-align: center;
}

.ping_seats-pricingplan label {
	display: none !important;
}


.ping_seats-pricingplan input{
	font-family: "Mukta", Sans-serif;
	font-size: 18px;
	color: #272E38 !important;
	border: 1px solid #e5e5ef !important;
	width: 80px;
}

.woocommerce-billing-fields__field-wrapper input,
.woocommerce-billing-fields__field-wrapper .woocommerce-input-wrapper select span,
.woocommerce-billing-fields__field-wrapper .woocommerce-input-wrapper select span *{
	font-family: "Mukta", Sans-serif !important;
	font-size: 18px !important;
	color: #272E38 !important;
	border: 1px solid #e5e5ef !important;
}

.ping_seats-pricingplan .btn-container {
	display: flex;
	flex-direction: column;
	gap: 15px;
	justify-content: space-around;
	align-items: center;
	margin-top: 50px;
}

.ping_seats-pricingplan .btn-container a{
	text-decoration: underline;
	color: #5271FF;
	text-transform: none;
	font-size: 18px;
}

.ping_seats-pricingplan .btn-container button[type=submit]{
	background-color: #5271FF !important;
	font-family: "Mukta", Sans-serif;
	font-size: 18px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0px;
	fill: #FFFFFF;
	color: #FFFFFF;
	border-style: solid;
	border-width: 1px 1px 1px 1px;
	border-radius: 50px 50px 50px 50px;
	padding: 12px 50px 12px 50px;
	cursor: pointer;
}

.ping_seats-pricingplan button.single_add_to_cart_button.button.alt:hover {
	background-color: #4461E7 !important;
	color: #FFFFFF;
}

.ping_seats-pricingplan h4 {
	color: #272E38;
	font-size: 18px;
	line-height: 1.2;
	text-transform: none;
}

.ping-prijsplan-tabel{
	background-color: #fff;
}

.ping-prijsplan-grid-item{
	height: 100%;
	padding: 0px !important;
	margin:0 !important;
	display: inherit;
	border-bottom: solid 4px #e2e2e2;
}

.ping-prijsplan-grid-item-end{
	height: 100%;
	padding: 0px !important;
	margin:0 !important;
	display: inherit;
}
.ping-prijsplan-grid-item-mid{
	height: 100%;
	padding: 0px !important;
	margin:0 !important;
	display: inherit;
	border-bottom: solid 4px #e2e2e2;
}

.ping-pricing-table-tooltiptext{
	display:none;
	padding-left: 10px;
	position: absolute !important;
	top: 20px;
	background-color:#fff;
	border-radius: 25px;
	pointer-events:none;
}
.ping-pricing-table-tooltip:hover + .ping-pricing-table-tooltiptext {
	cursor:pointer;
  display: block; /* Show the element on hover */
}
/* ------ Checkout */
.woocommerce-page.woocommerce-checkout form #order_review td.product-name{
    max-width: fit-content;
}


.elementor-widget-woocommerce-checkout-page .woocommerce .shop_table tr.cart-subtotal{
	display: none;
}

.shop_table tfoot{
	position: relative;
	margin-bottom: 10px;
}

.shop_table tfoot::before{
	content:'';
	min-width:100%;
	min-height:1px;
	position: absolute;
	background-color: #e5e5ef !important;
}

#billing_address_2_field label{
	height: 0px !important;
}


.select2-container--open.e-woo-select2-wrapper .select2-dropdown--below{
	top:-10px;
}
.ping_course-content div div div div .ld-course-status{
	display: none !important;
}
input:invalid {
    border: 2px solid red;
    background-color: #ffe6e6;
}

input:invalid:focus {
    outline: 2px solid red;
}
.status.status-completed{
	pointer-events: none;
	cursor: text;
}

/* -------- 12. VRAAG DE EXPERT / CHAT POPUP */


#goto-chat-container .ping-course-question-button-container{
    position: fixed;
    bottom: 0;
    right: 0;
	padding: 1.5rem;
}

#goto-chat-container .ping-course-question-button-container button{
	cursor: pointer;
	font-size: 15px;
    font-weight: 300;
    border-radius: 50px 50px 0px 50px;
	padding-right: 40px;
}

#goto-chat-container .ping-course-question-button-container button::after{
    font-family: "salesgenius";
    content: '\e849';
    font-size: 24px;
    position: absolute;
    right: 35px;
}

/* -------- 12. VRAAG DE AI / CHAT - toggle */

   #ping_chat-toggle .row {
        display: table-row;
    }

    #ping_chat-toggle .button-cover,
    #ping_chat-toggle .knobs,
    #ping_chat-toggle .layer {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }

    #ping_chat-toggle .button {
        position: relative;
        top: 50%;
        width: 340px;
        height: 44px;
        margin: 40px auto 0 auto;
        overflow: hidden;
        border-radius: 50px !important;
    }

    #ping_chat-toggle .checkbox {
        position: relative;
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
        opacity: 0;
        cursor: pointer;
        z-index: 3;
    }

    #ping_chat-toggle .knobs {
        z-index: 2;
    }

    #ping_chat-toggle  .layer {
        width: 100%;
        background-color: #ebf7fc;
        transition: 0.3s ease all;
        z-index: 1;
    }


    /* Button 10 */
    #ping_chat-toggle  #button-10 .knobs:before,
    #ping_chat-toggle  #button-10 .knobs:after,
    #ping_chat-toggle  #button-10 .knobs span {
        position: absolute;
        top: 4px;
		width: 130px;
        height: 10px;
        font-size: 18px;
        font-weight: bold;
        text-align: center;
        line-height: 1;
        padding: 9px 4px;
        border-radius: 2px;
        transition: 0.3s ease all;
    }

    #ping_chat-toggle #button-10 .knobs:before {
        content: "";
        background-color: #5271FF;
        left: 6px;
        font-family: "Mukta", Sans-serif;
        font-size: 1rem;
        font-weight: 600;
        line-height: 1;
        letter-spacing: 0px;
        fill: #FFFFFF;
        color: #FFFFFF;
        border-style: solid;
        border-width: 1px 1px 1px 1px;
        border-radius: 50px 50px 50px 50px;
        padding: 12px 1.333rem 12px 1.333rem;
        cursor: pointer;
        white-space: nowrap;
        width: 160px;
    	height: 36px;
    }

    #ping_chat-toggle #button-10 .knobs:after {
        content: "Genius Roleplay";
        right: 15px;
		width: 160px;
        color: #1f275b;
    }

    #ping_chat-toggle  #button-10 .knobs span {
        display: inline-block;
        left: 20px;
        color: #fff;
        z-index: 1;
    }

   	#ping_chat-toggle #button-10 .checkbox:checked+.knobs span {
        color: #5271ff;
    }

    #ping_chat-toggle #button-10 .checkbox:checked+.knobs:before {
		left: 155px;
		width: 180px;
        background-color: #1f275b;
    }

    #ping_chat-toggle #button-10 .checkbox:checked+.knobs:after {
        color: #fff;
    }

	#ping_chat-toggle input:disabled {
		pointer-events: none;
	}
	
	#ping_chat-toggle input:disabled + .knobs {
		opacity: 0.7;
	}

	.ping-gc-question-wrappe input:disabled, .ping-gc-question-wrapper button:disabled {
    	opacity: 0.7;
    	pointer-events: none;
	}

	.ping-sgc-message-text * {
		font-size: 12px !important;
	}

	.ping-sgc-message-text ol {
		padding: 0 10px;
	}

	.ping-sgc-message-text > :first-child {
		margin-top: 0;
	}

	.ping-sgc-message-text > :last-child {
		margin-bottom: 0;
	}


/* ============================= 14. LEARNDASH REVIEWS =================================== */


.learndash-course-reviews-container .average-review .average-review-label {
		display: block;
    font-size: 18px;
    line-height: 2.5;
		width:100%;
}
input[value="Plaats Recentie"] {
    margin-top: 20px;
}
.ld-icon-comments:before {
    font-size: 30px;
    position: relative;
}
.learndash-course-reviews-form form div .grid-x .small-12 label[for="learndash-course-reviews-review-title"]{
	display: block;
	width: 100%;
}

.learndash-course-reviews-form form div .grid-x .small-12 label[for="learndash-course-reviews-review"]{
	display: block;
	width: 100%;
}
.learndash-course-reviews-author img{
	display:none;
}
.learndash-course-reviews-metadata span a{
	font-weight: inherit;
	font-size: inherit;
	color:#000;
	pointer-events:none;
}
.learndash-course-reviews-metadata  a{
	font-weight: inherit;
	font-size: inherit;
	color:#000;
	pointer-events:none;
}
.learndash-course-reviews-metadata  .edit-link a{
	font-weight: unset;
	font-size: unset;
	color: blue;
	pointer-events: unset;
}
.learndash-course-reviews-metadata  .edit-link a:hover{
	font-style:underline;
}
.learndash-wrapper .ld-tabs .ld-tabs-content .ld-tab-content{
	padding: 18px;
}
.learndash-course-reviews-author div .review-title{
	font-size:18px;
}
.learndash-course-reviews-review-stars{
	font-size:48px;
}
.learndash-course-reviews-metadata{
	font-size:18px;
}
.learndash-course-reviews-author div .learndash-course-reviews-review-stars{
	font-size:24px;
}
.ping_forgot_password{
	color: black !important;
}
.ping_forgot_password:hover{
	color: #5271FF !important;
}

.wp-block-column { 
	overflow-wrap: unset;
    word-break: unset;
}

.learndash-course-grid {
	position: relative !important;
}

.scroll-container::after {
	top: 0 !important;
	height: 560px !important;
}
/* swiper fix */
.elementor-swiper-button {
    position: absolute;
    width: 40px !important;
    height: 40px !important;
    max-width: 40px !important;
}
.page-id-14 .elementor-swiper-button {
    position: absolute;
    width: 40px;
    height: 40px;
    max-width: 40px;
}
.ping-watgajeleren .elementor-icon-list-item:has(.elementor-icon-list-text:empty) {
  display: none;
}


/* ============================= 15. FAQ VIDEO'S =================================== */

.salesgenius-faq-videos {
	display: flex;
	flex-direction: column;
	gap: 45px;
	width: 100%;
}

.salesgenius-faq-video-category {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.salesgenius-faq-video-category__header {
	max-width: 850px;
}

.salesgenius-faq-video-category__header h2 {
	color: #272747;
	font-family: "Poppins", sans-serif;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.2;
	margin: 0 0 10px;
	text-transform: none;
}

.salesgenius-faq-video-category__intro,
.salesgenius-faq-video-category__intro p {
	color: #272E38;
	font-family: "Poppins", sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.6;
	margin: 0;
	text-transform: none;
}

.salesgenius-faq-video-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

.salesgenius-faq-video-card {
	background-color: #F8F9FD;
	border-radius: 15px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: transform .2s ease, box-shadow .2s ease;
}

.salesgenius-faq-video-card:hover {
	box-shadow: 0 18px 45px rgba(26, 39, 99, .08);
	transform: translateY(-2px);
}

.salesgenius-faq-video-card__media {
	aspect-ratio: 16 / 9;
	background-color: #1A2763;
	position: relative;
	width: 100%;
}

.salesgenius-faq-video-card__media iframe {
	border: 0;
	display: block;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

.salesgenius-faq-video-card__video-link {
	align-items: center;
	color: #fff;
	display: flex;
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	height: 100%;
	justify-content: center;
	margin: 0;
	text-decoration: underline;
	width: 100%;
}

.salesgenius-faq-video-card__duration {
	background-color: #fff;
	border-radius: 5px;
	bottom: 12px;
	color: #272E38;
	font-family: "Poppins", sans-serif;
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	padding: 7px 9px;
	position: absolute;
	right: 12px;
}

.salesgenius-faq-video-card__content {
	padding: 20px;
}

.salesgenius-faq-video-card__content h3 {
	color: #272747;
	font-family: "Poppins", sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	margin: 0;
	text-transform: none;
}

.salesgenius-faq-video-card__description {
	margin-top: 10px;
}

.salesgenius-faq-video-card__description,
.salesgenius-faq-video-card__description p {
	color: #272E38;
	font-family: "Poppins", sans-serif;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.6;
	margin-bottom: 0;
	text-transform: none;
}

@media (min-width: 768px) {
	.salesgenius-faq-video-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 992px) {
	.salesgenius-faq-videos {
		gap: 70px;
	}

	.salesgenius-faq-video-category {
		gap: 25px;
	}

	.salesgenius-faq-video-category__header h2 {
		font-size: 35px;
	}

	.salesgenius-faq-video-category__intro,
	.salesgenius-faq-video-category__intro p {
		font-size: 16px;
	}

	.salesgenius-faq-video-grid {
		grid-template-columns: repeat(var(--faq-video-columns, 3), minmax(0, 1fr));
	}

	.salesgenius-faq-video-card__content {
		padding: 25px;
	}

	.salesgenius-faq-video-card__content h3 {
		font-size: 18px;
	}

	.salesgenius-faq-video-card__description,
	.salesgenius-faq-video-card__description p {
		font-size: 14px;
	}
}

/* ------------------------------------------------------------------
   .screen-reader-text — 03-08-2026

   LearnDash voegt sinds 4.21.4 toegankelijkheidsteksten toe aan onder
   andere de uitklapknoppen:

       <span class="screen-reader-text">Lessen</span>

   Dat is de WordPress-standaardclass voor tekst die alleen voor
   screenreaders bedoeld is. WordPress levert daar zelf geen front-end
   CSS voor — themes horen die te definieren. Dit thema is standalone
   (geen parent) en had de regel niet, en LearnDash levert 'm ook niet
   mee. Gevolg: die teksten werden zichtbaar en vielen over de knoptekst
   heen ("Lessen" over "Uitklappen").

   Onderstaande is de standaardimplementatie uit WordPress core.
   ------------------------------------------------------------------ */

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* Zichtbaar maken zodra er met het toetsenbord naartoe genavigeerd wordt
   (skip-links en dergelijke) — anders is de focus onzichtbaar. */
.screen-reader-text:focus {
	background-color: #fff;
	clip-path: none;
	color: #272E38;
	display: block;
	font-size: 1rem;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Extra vangnet, hoger gewicht: LearnDash zet deze spans binnen knoppen die
   het thema zelf op display:flex zet. Mocht een andere regel de generieke
   .screen-reader-text hierboven overrulen, dan wint deze alsnog. */
.learndash-wrapper .screen-reader-text,
.ping_course-content .screen-reader-text,
#ping_course-sidebar .screen-reader-text,
#ping_course-content .screen-reader-text {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* ------------------------------------------------------------------
   Focusring op de uitklapknoppen — 03-08-2026

   LearnDash had altijd al de regel
       .learndash-wrapper .ld-expand-button:focus { outline: 2px solid ... }
   maar tot 4.17 was dat element een <div>/<span> en dus niet focusbaar,
   dus die regel vuurde nooit. Sinds 4.21.4 is het een <button> en krijg
   je na een muisklik een blauwe rand om de knop.

   Hieronder halen we die weg voor muisgebruik, maar houden we 'm intact
   voor toetsenbordnavigatie (:focus-visible). Zonder die uitzondering
   kan iemand die met Tab navigeert niet meer zien waar hij staat.
   !important is nodig omdat LearnDash deze regel via zijn eigen
   kleureninstellingen inline met !important meestuurt.
   ------------------------------------------------------------------ */

.learndash-wrapper .ld-expand-button:focus:not(:focus-visible) {
	outline: none !important;
	outline-offset: 0 !important;
	box-shadow: none !important;
}


/* ------------------------------------------------------------------
   Onderpadding les-items in de sidebar — 03-08-2026

   LearnDash 4.17 had hier alleen `padding: 1em`. In 5.1.8 is daar
   `padding-bottom: 0.5em` bij gekomen, waardoor de items onderin
   krap tegen elkaar aan komen te staan. Hiermee zetten we het
   gelijk terug naar rondom 1em.
   ------------------------------------------------------------------ */

#ping_course-sidebar .ld-lesson-item .ld-lesson-item-preview {
	padding-bottom: 1em;
}

/* ------------------------------------------------------------------
   Gebruikersmenu in focus mode — 03-08-2026

   LearnDash stuurt via learndash_30_custom_colors() een inline <style>
   mee die dit menu forceert:

     .ld-focus-header .ld-user-menu .ld-user-menu-items a:not([disabled])
         { background-color: <accentkleur> !important; }
     .ld-focus-header .ld-user-menu .ld-user-menu-items a
         { color: white !important; }

   Dat blok werd voor de update helemaal niet uitgestuurd, omdat de
   opgeslagen accentkleur toen gelijk was aan LearnDash' standaard.
   Sinds 5.1.8 wijkt hij af en wordt het blok wel geprint — inclusief
   die !important's, die de eerdere themaregels (0,2,0) overrulen.

   Onderstaande selectors zitten op hetzelfde gewicht als die van
   LearnDash plus een extra class, en ping-style.css wordt op
   prioriteit 100 ingeladen (LearnDash op 10), dus deze winnen.
   ------------------------------------------------------------------ */

.learndash-wrapper .ld-focus .ld-focus-header .ld-user-menu .ld-user-menu-items a:not([disabled]),
.learndash-wrapper .ld-focus .ld-focus-header .ping_user-menu .ld-user-menu-items a:not([disabled]) {
	background-color: transparent !important;
	color: #000 !important;
	font-weight: 300;
	border-bottom: 0;
}

/* Uitloggen is altijd het laatste item */
.learndash-wrapper .ld-focus .ld-focus-header .ld-user-menu .ld-user-menu-items a:not([disabled]):last-child,
.learndash-wrapper .ld-focus .ld-focus-header .ping_user-menu .ld-user-menu-items a:not([disabled]):last-child {
	color: #FE513F !important;
}

/* ------------------------------------------------------------------
   "0% afgerond" wit houden — 03-08-2026

   Het element is <div class="ld-progress-percentage ld-secondary-color
   ping_text-white">. LearnDash' inline kleurenblok bevat

       .learndash-wrapper .ld-secondary-color { color: <secundair> !important; }

   met specificiteit 0,2,0. De bestaande .ping_text-white staat op
   0,1,0 en verliest daarvan, ook al heeft die !important — bij gelijke
   !important-status wint de zwaarste selector.

   De tweede selector hieronder staat op 0,6,0 en wint ook van een
   eventuele eigen regel op .ld-progress-percentage.
   ------------------------------------------------------------------ */

.learndash-wrapper .ping_text-white,
.learndash-wrapper .ld-progress .ld-progress-heading .ld-progress-stats .ld-progress-percentage.ping_text-white {
	color: #fff !important;
}

/* ------------------------------------------------------------------
   Quizknoppen: witte tekst — 03-08-2026

   Nieuw in LearnDash 5: learndash_30_custom_colors() bepaalt de
   tekstkleur van primaire knoppen automatisch met

       Color::pick_foreground_color( $primary, '#ffffff', '#000000' )

   Die kiest simpelweg de kleur met de hoogste contrastratio. Tegen
   #00a2e8 is dat zwart (7,33 : 1 tegenover 2,86 : 1 voor wit) en tegen
   #5271FF ook (5,16 : 1 tegenover 4,07 : 1). Toegankelijk gerekend,
   maar niet wat je wilt zien op een merkkleur-knop.

   Die regel staat zonder !important in het inline blok, maar op
   specificiteit 0,6,0 — hoger dan de bestaande themaregel op 0,4,0.
   Vandaar hier expliciet.

   Let op: dit geldt voor elke accentkleur die niet donker genoeg is.
   Zet je die later anders, dan blijft deze regel nodig.
   ------------------------------------------------------------------ */

.learndash-wrapper .wpProQuiz_content .wpProQuiz_button:not([disabled]):not(.wpProQuiz_button_reShowQuestion):not(.wpProQuiz_button_restartQuiz),
.learndash-wrapper .wpProQuiz_content .wpProQuiz_button2:not([disabled]) {
	color: #fff !important;
}

/* ------------------------------------------------------------------
   Ruimte onder de quizvraag — 03-08-2026

   LearnDash 5.x heeft de vraag omgebouwd voor toegankelijkheid:

     4.17    <div class="wpProQuiz_question">
                 <div class="wpProQuiz_question_text">
     5.1.8   <fieldset class="wpProQuiz_question">
                 <legend class="wpProQuiz_question_text">

   Een <legend> is geen gewoon blok. De browser rendert die als het
   opschrift van de fieldset en plaatst hem in de rand-onderbreking,
   buiten de normale flow. Marges duwen de inhoud eronder dan niet weg —
   vandaar dat `margin-bottom: 10px` uit wpProQuiz_front.css geen effect
   meer heeft, terwijl de regel zelf ongewijzigd is.

   Met een expliciete display, `float: none` en `width: 100%` doet de
   legend weer mee in de normale flow en werkt de marge zoals verwacht.
   Alleen gescoped op de vraagtekst, zodat de screen-reader-legends die
   LearnDash elders in de quiz gebruikt onaangeroerd blijven.
   ------------------------------------------------------------------ */

.wpProQuiz_content fieldset.wpProQuiz_question > legend.wpProQuiz_question_text {
	display: flex;
	float: none;
	width: 100%;
	margin-bottom: 10px;
}

/* ------------------------------------------------------------------
   Focusring op de quiz-radio's — 03-08-2026

   Nieuw in LearnDash 5.x:

     .wpProQuiz_questionList input.wpProQuiz_questionInput:focus {
         outline-style: auto;
     }

   In 4.17 bestond die regel niet. `outline-style: auto` vraagt om de
   standaard focusring van de browser, en dat is in Chrome sinds v86
   een dubbele zwart-witte ring — vandaar die zwarte rand zodra je een
   antwoord aanklikt.

   Weghalen is hier geen optie: radio's worden met de pijltjestoetsen
   bediend, dus zonder zichtbare focus is de quiz niet te doen zonder
   muis. In plaats daarvan een ring in de huisstijlkleur, en alleen
   verbergen bij muisbediening (:focus-visible blijft intact voor
   toetsenbord).
   ------------------------------------------------------------------ */

.learndash-wrapper .wpProQuiz_content .wpProQuiz_questionList input.wpProQuiz_questionInput:focus {
	outline: 2px solid #5271FF;
	outline-offset: 2px;
}

.learndash-wrapper .wpProQuiz_content .wpProQuiz_questionList input.wpProQuiz_questionInput:focus:not(:focus-visible) {
	outline: none;
}

/* ------------------------------------------------------------------
   Stap-afgerond-melding verbergen — 03-08-2026

   Nieuw in LearnDash 5: learndash_30_show_step_completed_alert() toont
   na het afronden van een les of onderwerp een groene melding met een
   knop naar de volgende stap. Die functie bestond in 4.17 nog niet.

   De tekst zit niet in de Nederlandse vertaling ("Great Job! You've
   completed this les - Keep it going!") en de melding past niet in het
   ontwerp, dus uit.

   Bewust via CSS en niet via een template-override: de functie wordt
   rechtstreeks aangeroepen vanuit lesson.php en topic.php, dus
   uitschakelen zou twee extra template-overrides kosten die bij elke
   LearnDash-update opnieuw uit de pas gaan lopen. Dat is precies het
   probleem dat we net hebben opgeruimd.

   `display: none` haalt het blok ook uit de accessibility tree, dus
   screenreaders lezen de role="alert" niet meer voor.
   ------------------------------------------------------------------ */

.ld-alert--step-completed {
	display: none !important;
}

/* ------------------------------------------------------------------
   Uitzondering: "% afgerond" in de merkkleur binnen
   #ping_course-detail-progression — 03-08-2026

   De regel hierboven zet .ping_text-white overal op wit. In dit blok
   staat een lichte lila achtergrond (#DFE2FF), dus daar is wit
   onleesbaar. Alleen hier terug naar de merkkleur.

   Specificiteit 1,6,0 (ID + 6 klassen) — wint van de 0,6,0 hierboven,
   en van LearnDash' inline .ld-secondary-color (0,2,0 !important).
   ------------------------------------------------------------------ */

#ping_course-detail-progression .ping_text-white,
#ping_course-detail-progression .learndash-wrapper .ping_text-white,
#ping_course-detail-progression .learndash-wrapper .ld-progress .ld-progress-heading .ld-progress-stats .ld-progress-percentage.ping_text-white {
	color: #5271FF !important;
}