.hidden{
    display: none;
}

/* ============================================
   Responsive Visibility Utility Classes
   Aligned to the TPG 6-Breakpoint Grid System
   B1: 360px  – 479px  (Mobile)
   B2: 480px  – 599px  (Mobile Portrait)
   B3: 600px  – 839px  (Tablet)
   B4: 840px  – 1023px (Tablet Portrait)
   B5: 1024px – 1279px (Laptop)
   B6: 1280px +         (Desktop)
   Added in v2.14.0 — Typo corrected in v2.14.1
   ============================================ */

/* mobile-hidden: hidden on B1 (≤ 479px) */
@media (max-width: 479px) {
    .mobile-hidden { display: none !important; }
}

/* mobile-portrait-hidden: hidden on B2 (480px – 599px) */
@media (min-width: 480px) and (max-width: 599px) {
    .mobile-portrait-hidden,
    .mobile-potrait-hidden { display: none !important; }
}

/* tablet-hidden: hidden on B3 (600px – 839px) */
@media (min-width: 600px) and (max-width: 839px) {
    .tablet-hidden { display: none !important; }
}

/* tablet-portrait-hidden: hidden on B4 (840px – 1023px) */
@media (min-width: 840px) and (max-width: 1023px) {
    .tablet-portrait-hidden,
    .tablet-potrait-hidden { display: none !important; }
}

/* laptop-hidden: hidden on B5 (1024px – 1279px) */
@media (min-width: 1024px) and (max-width: 1279px) {
    .laptop-hidden { display: none !important; }
}

/* desktop-hidden: hidden on B6 (1280px +) */
@media (min-width: 1280px) {
    .desktop-hidden { display: none !important; }
}

/* End Responsive Visibility Utility Classes */

.lesson-template-single-video-lesson {
	background-color: #ffffff;
}

.lesson-template-single-video-lesson {
	background-color: #ffffff;
}

/* Favourit Button CSS */
.llms-lesson-favorite .llms-favorite-button,
.llms-lesson-list-favorite .llms-favorite-button {
    background: none;
    box-shadow: none !important;
    padding: 0 !important;
}
.llms-lesson-favorite span.llms-custom-fav-text, 
.llms-lesson-list-favorite span.llms-custom-fav-text {
    display: none;
}
.llms-lesson-favorite .llms-favorite-button .llms-custom-favorite-icon,
.llms-lesson-list-favorite .llms-favorite-button .llms-custom-favorite-icon {
    color: var(--e-global-color-f4077e1);
	font-size: 25px;
    width: 25px;
    height: 25px;
}
.llms-lesson-favorite .llms-favorite-button .llms-custom-favorite-icon.filled,
.llms-lesson-list-favorite .llms-favorite-button .llms-custom-favorite-icon.filled {
    color: var(--e-global-color-9534cd2);
}
/* Favourit Button CSS */

/* Header CSS */
.single-lesson-header,
header.single-lesson-header,
header#masthead.single-lesson-header,
.lesson-template-default .single-lesson-header {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 20px;
    justify-content: space-between;
    padding: 12px 30px;
    align-items: center;
    background-color: #ffffff !important;
}
.single-lesson-header .header-left-col {
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: flex-start;
}
.single-lesson-header .header-logo .logo {
    width: 140px;
    max-width: 100%;
}
.single-lesson-header .header-logo {
    border-right: 1px solid rgba(0,0,0,.1);
    padding-right: 15px;
}
.single-lesson-header .course-title {
    font-family: var(--e-global-typography-secondary-font-family) !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    letter-spacing: -0.22px !important;
    text-align: left !important;
    color: var(--e-global-color-d60c0a5) !important;
    margin-bottom: 0;
}
.single-lesson-header .course-title a {
    color: var(--e-global-color-d60c0a5) !important;
}


.single-lesson-header .right-header-col {
    display: flex;
    gap: 20px;
}
.progress-bar-wrap {
    display: flex;
    align-items: center;
    gap: 25px;
}
.single-lesson-header .main_progress .llms-progress {
    margin: 0;
}
.single-lesson-header .per_show {
    font-family: var(--e-global-typography-secondary-font-family);
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: -0.18px;
    text-align: left;
    color: var(--e-global-color-d60c0a5);
    display: flex;
    justify-content: space-between;
}
.single-lesson-header .main_progress {
    width: 250px;
}
.single-lesson-header .progress-bar-complete {
    background: var(--e-global-color-9534cd2) !important;
}

@media only screen and (max-width: 1023px) {
	.single-lesson-header .header-logo .logo {
		width: 110px;
	}
	.single-lesson-header .course-title {
		font-size: 18px !important;
		line-height: 24px !important;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.single-lesson-header .main_progress {
		width: 150px;
	}
	.single-lesson-header .per_show {
		font-size: 16px;
		line-height: 18px;
	}
  }
  @media only screen and (max-width: 839px) {
	.single-lesson-header .header-logo .logo {
		width: 40px;
	}
	.single-lesson-header .course-title {
		max-width: 240px;
	}
	.single-lesson-header .right-header-col {
		gap: 10px;
	}
	.single-lesson-header {
		padding: 10px 16px;
	}
	.single-lesson-header .header-left-col {
		gap: 10px;
	}
	.single-lesson-header .header-logo {
		padding-right: 10px;
	}
	.progress-bar-wrap {
		position: fixed;
		bottom: 0;
		right: 0;
		z-index: 99;
		width: 100%;
		background: #ffffff;
        padding: 7px 20px 5px;
		box-shadow: 0px 1px 5px 0px rgba(0,0,0,.2);
	}
	.single-lesson-header .main_progress {
		width: 100%;
	}
	.single-lesson-header .per_show {
		font-size: 14px;
	}
  }
  @media only screen and (max-width: 599px) {
	.single-lesson-header .course-title {
        font-size: 16px !important;
        line-height: 20px !important;
		max-width: 180px;
    }
	.single-lesson-header {
		padding: 10px;
	}
  }
  @media only screen and (max-width: 479px) {
	.single-lesson-header .course-title {
		max-width: 120px;
	}
  }
/* END Header CSS */

/* Content Area CSS */
/* Layout: Two-column (B5–B6) / Single-column (B1–B4)
   - B6 (1280px+):   .tpg-lesson-content-area 70%  |  .tpg-lesson-side-bar 30%
   - B5 (1024–1279): .tpg-lesson-content-area 68%  |  .tpg-lesson-side-bar 32%
   - B1–B4 (≤1023):  .tpg-lesson-content-area 100% |  .tpg-lesson-side-bar hidden (via utility classes)
   At B1–B4, the "Course Content" tab pane (.tpg-lesson-side-bar inside .tab-content)
   becomes visible instead, controlled by laptop-hidden / desktop-hidden utilities.
*/
.video_lesson .tpg-row {
    display: flex;
}
.video_lesson .tpg-row .tpg-lesson-content-area {
    width: 70%;
    min-width: 0;
    box-sizing: border-box;
}
@media only screen and (min-width: 1024px) and (max-width: 1279px) {
	.video_lesson .tpg-row .tpg-lesson-content-area {
		width: 68%;
	}
}
@media only screen and (max-width: 1023px) {
	.video_lesson .tpg-row {
		flex-direction: column;
	}
	.video_lesson .tpg-row .tpg-lesson-content-area {
		width: 100%;
	}
  }
/* END Content Area CSS */

/* Video Area CSS */
.video_lesson .vimeo-video.tpg-vimeo-lesson-video-wrapper {
    position: relative;
}
.video_lesson .llms-video-wrapper {
    padding: 0 110px;
    background: var(--e-global-color-d60c0a5);
}
.video_lesson .lesson-slider-nav {
	position: absolute;
	z-index: 99 !important;
	top: 50%;
	width: 40px;
	height: 40px;
	background-color: #ffffff;
	border-radius: 5px;
	transform: translateY(-50%) rotate(90deg);
	padding: 8px 8px;
}
.video_lesson .lesson-slider-nav.slider-nav-prev {
	left: 45px;
}
.video_lesson .lesson-slider-nav.slider-nav-next {
	right: 45px;
	transform: translateY(-50%) rotate(-90deg)
}
.video_lesson .lesson-slider-nav:hover {
	background-color: var(--e-global-color-9534cd2);
}
.video_lesson .lesson-slider-nav span {
	content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
}
.video_lesson .lesson-slider-nav:hover span {
	content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
}
.video_lesson .vimeo-video.tpg-vimeo-lesson-video-wrapper.playing .lesson-slider-nav {
	display: none;
}

@media only screen and (max-width: 1279px){
	.video_lesson .llms-video-wrapper {
		padding: 0;
	}
	.video_lesson .lesson-slider-nav.slider-nav-prev {
		left: 30px;
	}
	.video_lesson .lesson-slider-nav.slider-nav-next {
		right: 30px;
	}
}
@media only screen and (max-width: 839px){
	.video_lesson .lesson-slider-nav.slider-nav-prev {
		left: 20px;
	}
	.video_lesson .lesson-slider-nav.slider-nav-next {
		right: 20px;
	}
}
@media only screen and (max-width: 599px){
	.video_lesson .lesson-slider-nav {
		width: 30px;
		height: 30px;
		padding: 5px 5px;
	}
}

/* Video Empty State - for lessons without video/audio content */
.video_lesson .vimeo-video.tpg-vimeo-lesson-video-wrapper.no-media {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 aspect ratio */
    background-color: #f5f1eb;
    background-color: var(--e-global-color-51a985e, #f5f1eb);
}

.tpg-video-empty-state {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 20px;
}

.tpg-video-empty-content {
    max-width: 400px;
}

.tpg-video-empty-icon {
    width: 64px;
    height: 64px;
    color: #999999;
    margin-bottom: 20px;
}

.tpg-video-empty-title {
    font-family: var(--e-global-typography-primary-font-family, inherit) !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 30px !important;
    color: var(--e-global-color-28a26ad, #212529) !important;
    margin-bottom: 10px;
}

.tpg-video-empty-description {
    font-family: var(--e-global-typography-secondary-font-family, inherit);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--e-global-color-4cde579, #666666);
    margin-bottom: 0;
}

/* Responsive styles for video empty state */
@media (max-width: 839px) {
    .tpg-video-empty-icon {
        width: 48px;
        height: 48px;
    }
    
    .tpg-video-empty-title {
        font-size: 20px !important;
        line-height: 26px !important;
    }
    
    .tpg-video-empty-description {
        font-size: 14px;
    }
}
/* End Video Area CSS */

/* Sidebar Area CSS */
.video_lesson .tpg-row .tpg-lesson-side-bar {
    width: 30%;
    min-width: 0;
    box-sizing: border-box;
	border-left: 1px solid rgba(0, 0, 0, .1);
	background-color: var(--e-global-color-51a985e);
}
.video_lesson .tpg-row .tpg-lesson-side-bar .course-track-title {
  font-family: var(--e-global-typography-primary-font-family) !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  line-height: 30px !important;
  letter-spacing: -0.24px !important;
  color: var(--e-global-color-d60c0a5) !important;
  padding: 25px 35px 25px 15px;
  margin: 0px;
  border-bottom: 1px solid rgba(0,0,0,.1);
}
.video_lesson .tpg-row .tpg-lesson-side-bar .tpg-accordion-item {
    border-bottom: 1px solid rgba(0,0,0,.1);
}
.video_lesson .tpg-row .tpg-lesson-side-bar .tpg-accordion-item:last-child {
    border: none;
}
.video_lesson .tpg-row .tpg-lesson-side-bar .section-accordion-header{
	margin-bottom: 7px;
	font-family: var(--e-global-typography-secondary-font-family) !important;
	font-size: 18px !important;
	font-weight: 600 !important;
	line-height: 24px !important;
	color: var(--e-global-color-d60c0a5) !important;
}
.video_lesson .tpg-row .tpg-lesson-side-bar .sec-length{
	display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 16px;
	margin: 0;
}
.video_lesson .tpg-row .tpg-lesson-side-bar .sec-length-meta .icon {
    width: 18px;
    height: auto;
}
.video_lesson .tpg-row .tpg-lesson-side-bar .sec-length-meta {
	font-family: var(--e-global-typography-secondary-font-family) !important;
	font-size: 16px;
	font-weight: 400;
	line-height: 15px;
	color: var(--e-global-color-4cde579);
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: 8px;
}
.video_lesson .tpg-row .tpg-lesson-side-bar .tpg-accordion-item .section-accordion-header.lesson-section {
    margin: 0;
}
.video_lesson .tpg-row .tpg-lesson-side-bar .tpg-accordion-item .section-accordion-header.lesson-section, 
.video_lesson .tpg-row .tpg-lesson-side-bar .tpg-accordion-item .tpg-section-content {
    padding: 30px 30px 30px 15px;
}
.video_lesson .tpg-row .tpg-lesson-side-bar .tpg-accordion-item .tpg-section-content.active {
    background: #ffffff;
}

/* Remove gap between first lesson and section header above */
.video_lesson .tpg-row .tpg-lesson-side-bar .tpg-accordion-body .tpg-accordion-body-inner:first-child {
    margin-top: -30px;
}

/* Remove gap between last lesson and section panel below */
.video_lesson .tpg-row .tpg-lesson-side-bar .tpg-accordion-body .tpg-accordion-body-inner:last-child {
    margin-bottom: -30px;
}
.video_lesson .tpg-row .tpg-lesson-side-bar .tpg-accordion-header {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 15px;
	align-items: center;
	position: relative;
	cursor: pointer;

}
.video_lesson .tpg-row .tpg-lesson-side-bar .tpg-accordion-item .section-accordion-header .tpg-accordion-header::after {
	width: 12px;
	height: 12px;
	content: "";
	background-image: url('../images/tpg-down-arrow.svg');
	background-repeat: no-repeat;
	position: absolute;
    top: 50%;
    right: 0;
    height: 12px;
    transform: translateY(-50%);
}
.video_lesson .tpg-row .tpg-lesson-side-bar .tpg-accordion-item .section-accordion-header.active .tpg-accordion-header::after {
	background-image: url('../images/tpg-up-arrow.svg');
}
.video_lesson .tpg-row .tpg-lesson-side-bar .tpg-accordion-header .tpg-left {
    width: 20px;
    height: 20px;
}
.video_lesson .tpg-row .tpg-lesson-side-bar .tpg-section-content {
	display: none;
}
.video_lesson .tpg-row .tpg-lesson-side-bar .tpg-section-content.active {
	display: block;
}
.video_lesson .tpg-row .tpg-lesson-side-bar .tpg-accordion-body {
    display: flex;
    flex-direction: column;
    gap: 0; /* Remove gap for seamless hover areas */
}
.video_lesson .tpg-row .tpg-lesson-side-bar .tpg-accordion-body .tpg-accordion-body-inner {
	display: flex;
    flex-direction: row;
    gap: 20px;
	justify-content: space-between;
	flex-wrap: nowrap;
	align-items: center;
	/* Full-width clickable lesson box - fixed height to match section panels */
	height: 108.72px;
	min-height: 108.72px;
	box-sizing: border-box;
	padding: 0 20px;
	margin-left: -20px;
	margin-right: -20px;
	transition: background-color 0.2s ease;
	cursor: pointer;
	position: relative;
}

/* Lesson item hover state - full width, square edges */
.video_lesson .tpg-row .tpg-lesson-side-bar .tpg-accordion-body .tpg-accordion-body-inner:hover {
	background-color: rgba(248, 144, 79, 0.12);
}

/* Current lesson highlight - full width, square edges */
.video_lesson .tpg-row .tpg-lesson-side-bar .tpg-accordion-body .tpg-accordion-body-inner:has(.current_lesson) {
	background-color: rgba(248, 144, 79, 0.15);
	border-left: 3px solid #f8904f;
	padding-left: 17px; /* Compensate for border */
}

/* Hover on current lesson */
.video_lesson .tpg-row .tpg-lesson-side-bar .tpg-accordion-body .tpg-accordion-body-inner:has(.current_lesson):hover {
	background-color: rgba(248, 144, 79, 0.22);
}

/* Fallback for browsers that don't support :has() - style current lesson anchor */
.video_lesson .tpg-row .tpg-lesson-side-bar .tpg-accordion-body a.tpg-accordion-header.current_lesson {
	font-weight: 600;
}

/* Lesson link styles - make it fill available space */
.video_lesson .tpg-row .tpg-lesson-side-bar .tpg-accordion-body a.tpg-accordion-header {
	flex: 1;
	text-decoration: none;
	color: inherit;
	display: flex;
	align-items: center;
	gap: 10px;
}

/* Lesson title hover color */
.video_lesson .tpg-row .tpg-lesson-side-bar .tpg-accordion-body .tpg-accordion-body-inner:hover .lesson-item {
	color: #f8904f;
}

/* Keep favorite button clickable separately */
.video_lesson .tpg-row .tpg-lesson-side-bar .tpg-accordion-body .llms-lesson-list-favorite {
	position: relative;
	z-index: 2;
	flex-shrink: 0;
}
.video_lesson .tpg-row .tpg-lesson-side-bar .tpg-accordion-header .checkbox-tick.course-com-mark {
	margin: 0px;
	border-radius: 32px;
	display: inline-block;
	width: 20px !important;
	height: 20px !important;
	border: 2px solid var(--e-global-color-4cde579);
	appearance: none;
	background-color: #ffffff;
	position: relative;
}
.video_lesson .tpg-row .tpg-lesson-side-bar .tpg-accordion-header .checkbox-tick.course-com-mark.track-completed {
	background-color: var(--e-global-color-7d0e5e4);
	border-color: var(--e-global-color-7d0e5e4);
	background-size: 14px;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
	background-position: center;
}

@media only screen and (min-width: 1024px) and (max-width: 1279px) {
	.video_lesson .tpg-row .tpg-lesson-side-bar {
		width: 32%;
	}
}
@media only screen and (max-width: 1023px) {
	.video_lesson .tpg-row .tpg-lesson-side-bar {
		width: 100%;
		border-left: none;
	}
	.video_lesson .tpg-row .tpg-lesson-side-bar .tpg-accordion-item .section-accordion-header.lesson-section, 
	.video_lesson .tpg-row .tpg-lesson-side-bar .tpg-accordion-item .tpg-section-content {
		padding: 30px 15px;
	}
}
/* END Sidebar Area CSS */


/* Tab Area CSS */
.tpg-lesson-content-area .course-content-outer {
    padding: 40px 60px 80px;
	background: #ffffff;
}
@media only screen and (max-width: 1279px){
	.tpg-lesson-content-area .course-content-outer {
		padding: 40px 30px 80px;
	}
}
@media only screen and (max-width: 1023px){
	.tpg-lesson-content-area .course-content-outer {
		padding: 50px 8vw;
	}
}
@media only screen and (max-width: 839px){
	.tpg-lesson-content-area .course-content-outer {
		padding: 40px 25px;
	}
}
@media only screen and (max-width: 599px){
	.tpg-lesson-content-area .course-content-outer {
		padding: 30px 16px;
	}
}
@media only screen and (max-width: 479px){
	.tpg-lesson-content-area .course-content-outer {
		padding: 24px 16px;
	}
}
/* Course Complete, Quiz, Assignment Buttons Bar */
/* Quiz bar is an INDEPENDENT element between video and tabs */
/* It should match the width/alignment of .course-content-outer (tabs area) below */

/* Base quiz bar styling - matches .course-content-outer padding */
.course-lesson-quiz {
    margin-top: 33px !important;
    padding: 0 60px !important; /* Same horizontal padding as .course-content-outer at B6 */
    box-sizing: border-box !important;
}

/* Gray background bar */
/* Fixed 70px height, button 14px from gray bar left edge */
.course-lesson-quiz .lesson_take_the_quiz {
    background: #F0F4F7 !important;
    height: 70px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 14px !important; /* Button padding from gray bar edge */
    margin: 0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

/* Reset any conflicting wrapper styles */
.course-lesson-quiz .llms-lesson-button-wrapper {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    text-align: left;
    align-items: center;
}

.course-lesson-quiz .llms-form-field {
    padding: 0 !important;
    margin: 0 !important;
}

/* Clear div reset */
.course-lesson-quiz .clear {
    display: none !important;
}

/* Button styling - matching Figma specs */
/* B6/B5/B4: Width 164px, Height 44px, Font 18px */
/* B3/B2/B1: Width 151px, Height 44px, Font 16px */
/* All: Gradient 180deg #F88E4E to #F1612D, Shadow 0px 2px 4px rgba(0,0,0,0.25) */
.course-lesson-quiz button,
.course-lesson-quiz a.llms-lesson-link,
.course-lesson-quiz a.tpg-button,
.course-lesson-quiz a.tpg-button.primary,
.course-lesson-quiz .llms-lesson-button-wrapper a,
.course-lesson-quiz .llms-lesson-button-wrapper button {
    width: 164px !important;
    min-width: 164px !important;
    height: 44px !important;
    min-height: 44px !important;
    background: linear-gradient(180deg, #F88E4E 0%, #F1612D 100%) !important;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25) !important;
    font-family: 'Source Sans Pro', var(--e-global-typography-secondary-font-family), sans-serif !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    line-height: 24px !important;
    text-transform: uppercase !important;
    color: #FBFBFB !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    cursor: pointer;
}

.course-lesson-quiz button:hover,
.course-lesson-quiz a.llms-lesson-link:hover,
.course-lesson-quiz a.tpg-button:hover,
.course-lesson-quiz a.tpg-button.primary:hover,
.course-lesson-quiz .llms-lesson-button-wrapper a:hover,
.course-lesson-quiz .llms-lesson-button-wrapper button:hover {
    background: linear-gradient(180deg, #F99B5E 0%, #F26E3D 100%) !important;
    color: #FBFBFB !important;
}

/* B5 (1024px - 1279px): Match .course-content-outer padding of 30px */
@media only screen and (min-width: 1024px) and (max-width: 1279px) {
    .course-lesson-quiz {
        padding: 0 30px !important;
        margin-top: 33px !important;
    }
    
    .course-lesson-quiz .lesson_take_the_quiz {
        margin: 0 !important;
    }
}

/* B4 (840px - 1023px): Match .course-content-outer padding of 8vw */
@media only screen and (min-width: 840px) and (max-width: 1023px) {
    .course-lesson-quiz {
        padding: 0 8vw !important;
        margin-top: 33px !important;
    }
    
    .course-lesson-quiz .lesson_take_the_quiz {
        margin: 0 !important;
    }
}

/* B3 (600px - 839px): Match .course-content-outer padding of 25px, smaller button */
@media only screen and (min-width: 600px) and (max-width: 839px) {
    .course-lesson-quiz {
        padding: 0 25px !important;
        margin-top: 30px !important;
    }
    
    .course-lesson-quiz .lesson_take_the_quiz {
        margin: 0 !important;
    }
    
    .course-lesson-quiz button,
    .course-lesson-quiz a.llms-lesson-link,
    .course-lesson-quiz a.tpg-button,
    .course-lesson-quiz a.tpg-button.primary,
    .course-lesson-quiz .llms-lesson-button-wrapper a,
    .course-lesson-quiz .llms-lesson-button-wrapper button {
        width: 151px !important;
        min-width: 151px !important;
        font-size: 16px !important;
    }
}

/* B2 (480px - 599px): Match .course-content-outer padding of 16px, smaller button */
@media only screen and (min-width: 480px) and (max-width: 599px) {
    .course-lesson-quiz {
        padding: 0 16px !important;
        margin-top: 30px !important;
    }
    
    .course-lesson-quiz .lesson_take_the_quiz {
        margin: 0 !important;
    }
    
    .course-lesson-quiz button,
    .course-lesson-quiz a.llms-lesson-link,
    .course-lesson-quiz a.tpg-button,
    .course-lesson-quiz a.tpg-button.primary,
    .course-lesson-quiz .llms-lesson-button-wrapper a,
    .course-lesson-quiz .llms-lesson-button-wrapper button {
        width: 151px !important;
        min-width: 151px !important;
        font-size: 16px !important;
    }
}

/* B1 (< 480px): Match .course-content-outer padding of 16px, smaller button */
@media only screen and (max-width: 479px) {
    .course-lesson-quiz {
        padding: 0 16px !important;
        margin-top: 24px !important;
    }
    
    .course-lesson-quiz .lesson_take_the_quiz {
        margin: 0 !important;
    }
    
    .course-lesson-quiz button,
    .course-lesson-quiz a.llms-lesson-link,
    .course-lesson-quiz a.tpg-button,
    .course-lesson-quiz a.tpg-button.primary,
    .course-lesson-quiz .llms-lesson-button-wrapper a,
    .course-lesson-quiz .llms-lesson-button-wrapper button {
        width: 151px !important;
        min-width: 151px !important;
        font-size: 16px !important;
    }
}
/* END Course Complete, Quiz, Assignment Buttons Bar */


/* Nav Bar */
.tpg-lesson-content-area .tab_info .nav.nav-pills {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: flex-end;
	padding: 0px;
	margin: 0px;
	list-style: none;
}
.tpg-lesson-content-area .tab_info ul.nav.nav-pills li.nav-item {
	width: 100%;
	text-align: center;
}
.tpg-lesson-content-area .tab_info span.nav-link {
	font-family: var(--e-global-typography-secondary-font-family);
	font-size: 18px;
	font-weight: 500;
	line-height: 24px;
	text-transform: uppercase;
	text-align: center;
	color: var(--e-global-color-f4077e1);
	border-bottom: 2px solid var(--e-global-color-f4077e1);
	width: 100%;
	display: block;
	padding: 0px 0px 15px;
	cursor: pointer;
}
.tpg-lesson-content-area .tab_info span.nav-link.active {
	color: var(--e-global-color-d60c0a5);
	border-bottom: 2px solid var(--e-global-color-18327af);
	cursor: default;
}

@media only screen and (max-width: 839px) {
	.tpg-lesson-content-area .tab_info span.nav-link {
		padding: 0px 0px 10px;
	}
	.tab-nav-wrapper {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none; /* Firefox */
	  }
	  
	  .tab-nav-wrapper::-webkit-scrollbar {
		display: none; /* Chrome, Safari, Edge */
	  }
	  
	  .tab-nav-wrapper .nav.nav-pills {
		min-width: 800px;
		width: max-content;
		white-space: nowrap;
	  }
	  
	  .tab-nav-arrow {
		position: relative;
	}
	.tab-nav-arrow:after {
        content: "";
        background-image: url(../images/tpg-right-arrow.svg);
        width: 12px;
        height: 12px;
        position: absolute;
        top: 32%;
        right: 0;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        transform: translateY(-50%);
    }
	  
}
@media only screen and (max-width: 599px) {
    .tpg-lesson-content-area .tab_info span.nav-link {
        font-size: 16px;
		line-height: 20px;
    }

	.tab-nav-wrapper .nav.nav-pills {
		min-width: 700px;
		width: max-content;
		white-space: nowrap;
	  }
}
/* Nav Bar */

/* Tabs */
.tpg-lesson-content-area .tab-content {
    padding-top: 40px;
}
/* Override inherited .tpg-lesson-side-bar width for the "Course Content" tab pane.
   This element is nested inside .tab-content, not a direct flex child of .tpg-row,
   so it should always fill its parent container width. */
.tpg-lesson-content-area .tab-content .tpg-lesson-side-bar.tab-pane {
    width: 100%;
    border-left: none;
    background-color: transparent;
}
.tpg-lesson-content-area .tab-content .tab-pane {
	display: none;
}
.tpg-lesson-content-area .tab-content>.tab-pane.active {
	display: block;
}
.tpg-lesson-content-area .tab-content .tab-content-title-area {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-direction: row;
    flex-wrap: nowrap;
}
.tpg-lesson-content-area .tab-content .tab-content-title {
	font-family: var(--e-global-typography-primary-font-family) !important;
	font-size: 28px !important;
	font-weight: 700 !important;
	line-height: 34px !important;
	letter-spacing: -0.06px;
	color: var(--e-global-color-28a26ad) !important;
}
/* Tabs */

/* Overview */
.tpg-lesson-content-area .tab-content .llms-full-description {
  font-family: var(--e-global-typography-secondary-font-family);
  font-size: 18px;
  font-weight: 400;;
  line-height: 32px;
  letter-spacing: -0.18px;
  color: var(--e-global-color-4cde579);
}

.tpg-lesson-content-area .tab-content .tpg-author-box {
	background-color: var(--e-global-color-51a985e);
	padding: 40px;
	margin-top: 40px;
}
.tpg-lesson-content-area .tab-content .tpg-author-box-inner {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 16px;
}
.tpg-lesson-content-area .tab-content .tpg-author-box-heading {
	font-family: var(--e-global-typography-primary-font-family) !important;
	font-size: 28px !important;
	font-weight: 700 !important;
	line-height: 34px !important;
	letter-spacing: -0.06px;
	color: var(--e-global-color-28a26ad) !important;
	margin-bottom: 40px;
}
.tpg-lesson-content-area .tab-content .avator-img {
    width: 75px;
    flex-shrink: 0;
}
.tpg-lesson-content-area .tab-content .avator-img img {
	width: 75px;
	height: 75px;
	border-radius: 100%;
}
.tpg-lesson-content-area .tab-content .author-name {
	font-family: var(--e-global-typography-secondary-font-family);
	font-size: 18px;
	font-weight: 500;
	line-height: 24px;
	text-transform: uppercase;
	color: var(--e-global-color-d60c0a5);
}
.tpg-lesson-content-area .tab-content .author-degignation {
	font-family: var(--e-global-typography-secondary-font-family);
	font-size: 18px;
	font-weight: 400;
	line-height: 24px;
	letter-spacing: -0.18px;
	color: var(--e-global-color-f4077e1);
}
.tpg-lesson-content-area .tab-content .author-bio {
	font-family: var(--e-global-typography-secondary-font-family);
	font-size: 18px;
	font-weight: 400;;
	line-height: 32px;
	letter-spacing: -0.18px;
	color: var(--e-global-color-4cde579);
	margin-top: 25px;
}
/* Overview */

/* Notes */
#notes-datatable_wrapper {
    margin-top: 35px;
}
#notes-datatable_wrapper .dt-input {
    border-radius: 5px !important;
    border: solid 1px var(--e-global-color-571db8e) !important;
    background-color: var(--e-global-color-51a985e) !important;
    width: 100%;
    padding: 10px 17px !important;
}
#notes-datatable_wrapper .dt-input,
#notes-datatable_wrapper .dt-input::placeholder {
    font-family: var(--e-global-typography-secondary-font-family);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--e-global-color-f4077e1);
}
#notes-datatable_wrapper .dt-input{
	color: var(--e-global-color-4cde579);
}
#notes-datatable_wrapper .dt-layout-cell.dt-end {
    padding: 0 !important;
}
#notes-datatable_wrapper .dt-layout-row.dt-layout-table {
	margin-top: 55px;
}
#notes-datatable th,
#notes-datatable td {
	vertical-align: middle;
}
#notes-datatable th {
	font-family: var(--e-global-typography-secondary-font-family);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.5;
	text-align: left;
	text-transform: none;
	color: var(--e-global-color-text);
	padding: 0px 10px 16px !important;
	border-bottom: 1px solid var(--e-global-color-571db8e);
}
#notes-datatable .form-check-input[type="checkbox"] {
	border-radius: 3px;
    width: 17px;
    height: 17px;
    border: 1px solid var(--e-global-color-4cde579);
    box-shadow: none !important;
}
#notes-datatable .notes-list-title {
  font-family: var(--e-global-typography-secondary-font-family);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  text-align: left;
  color: var(--e-global-color-d60c0a5);
}
#notes-datatable .notes-content {
	font-family: var(--e-global-typography-secondary-font-family);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  color: var(--e-global-color-9534cd2);
  margin: 0;
}
#notes-datatable .n-time {
	font-family: var(--e-global-typography-secondary-font-family);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.5;
	text-align: left;
	color: var(--e-global-color-d60c0a5);
}
#notes-datatable .edit-update,
#notes-datatable .delete-note{
	padding: 20px;
	background-color: var(--e-global-color-9534cd2);
	display: inline-block;
	border-radius: 100%;
	width: 45px;
	height: 45px;
	box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.12), 0 4px 4px 0 rgba(0, 0, 0, 0.25);
	position: relative;
}
#notes-datatable .notes-action {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
}
#notes-datatable .edit-update img,
#notes-datatable .delete-note img,
#notes-datatable .edit-update svg,
#notes-datatable .delete-note svg{
	width: 15px;
	position: absolute;
	top: 15px;
	left: 0px;
	right: 0px;
	text-align: center;
	margin: 0 auto;
}
#notes-datatable th.select {
    width: 3% !important;
	padding-left: 0 !important;
}
#notes-datatable th.title, 
#notes-datatable th.date {
    width: calc(50% - 19%) !important;
}
#notes-datatable th.action {
    width: 15% !important;
	text-align: center;
}
#notes-datatable tbody td {
    border: none !important;
    padding: 35px 0;
}
#notes-datatable tbody tr:nth-child(even) td {
    background: var(--e-global-color-51a985e) !important;
}
div#notes-datatable_info {
    display: none;
}

.lms-popup-active{
    display: block;
}
.llms-notes-modal {
    position: fixed;
    z-index: 99999;
    top: 0; 
	left: 0;
	width: 100%;
	height: 100%;
    background: rgba(0, 0, 0, .4);
}
.lms-modal {
	width: 80%;
	max-width: 920px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #ffffff;
    padding: 43px 38px 46px 39px;
    border-radius: 5px;
    box-shadow: 0 24px 24px 0 rgba(0, 0, 0, 0.3), 0 0 24px 0 rgba(0, 0, 0, 0.22); 
}
.notes-panel-title .tab-content-title {
    margin-bottom: 0px;
}
.notes-panel-title {
	position: relative;
    margin-bottom: 30px;
}
.notes-panel-body .title-field input {
	padding: 14px 15px 10px 15px;
	border-radius: 5px;
	border: solid 1px #dce1e4;
	background-color: #f0f4f7;
	display: block;
	width: 100%;
	font-family: 'Source Sans 3';
	font-size: 18px;
	font-weight: 400;
	line-height: 1.5;
	color: #000000;
	margin-bottom: 25px;
  }
  .notes-editor-tools button {
    padding: 0  !important;
    box-shadow: none !important;
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    cursor: pointer;
}
.notes-editor-tools button i {
    color: #5E6061;
}
.notes-editor-tools button:hover i {
    color: #f8904f;
}
.notes-editor-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
    border-bottom: 1px solid #dddddd;
}
.notes-editor-wrapper {border-radius: 5px;
	border: solid 1px #dce1e4;
	background-color: #f0f4f7;
	margin-bottom: 30px;
}
.notes-textarea-body {
    min-height: 200px;
    padding: 25px;
}
.llms-note-close {
    font-family: var(--e-global-typography-secondary-font-family);
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    color: var(--e-global-color-9534cd2);
    background: transparent !important;
    box-shadow: none !important;
    cursor: pointer;
}
.lms-close.llms-note-close.close-icon {
    position: absolute;
    top: 6px;
    right: 0;
    cursor: pointer;
}
.lms-close.llms-note-close.close-icon img {
    max-width: 14px;
}

@media only screen and (max-width: 1023px) {
	#notes-datatable th.title, 
	#notes-datatable th.date {
		width: calc(50% - 18%) !important;
	}
	#notes-datatable th.action {
		width: 17% !important;
		text-align: center;
	}
}
@media only screen and (max-width: 839px) {
	.lms-modal {
		width: 80%;
		max-width: 600px;
	}
}
@media only screen and (max-width: 599px) {
	.lms-modal {
		width: 90%;
		max-width: 100%;
		padding: 40px 25px;

	}
}
/* End Notes */

/* Q&A Tab CSS*/
.tab-qa-no-questions-section {
    background-color: #f5f1eb; /* Fallback color */
    background-color: var(--e-global-color-51a985e, #f5f1eb);
    padding: 40px 20px;
    text-align: center;
}

.tab-qa-no-questions-section .tab-content-title {
    font-family: var(--e-global-typography-primary-font-family, inherit) !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 34px !important;
    letter-spacing: -0.06px;
    color: var(--e-global-color-28a26ad, #212529) !important;
    margin-bottom: 15px;
}

.tab-qa-no-questions-section .llms-qa-description {
    font-family: var(--e-global-typography-secondary-font-family, inherit);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.6;
    text-align: center;
    color: var(--e-global-color-4cde579, #666666);
}
.tab-qa-no-questions-section .llms-qa-description p {
    margin-bottom: 0;
}
.tab-qa-no-questions-section .llms-qa-description #llms-ask-btn-first,
.tab-qa-no-questions-section .llms-qa-description #llms-enroll-now {
    margin-top: 20px;
}

#lesson-qa .lms-modal {
    max-width: 800px;
    background-color: var(--e-global-color-51a985e);
    border-radius: 0;
    padding: 40px 30px;
}
#lesson-qa .lms-modal .llms-qa-close .dashicons {
    font-size: 30px !important;
}
#lesson-qa .lms-modal .llms-qa-close {
    top: 2px !important;
    cursor: pointer;
}
.llms-qa-panel-form .llms-qa-field  {
    margin-bottom: 25px;
}
.llms-qa-panel-form .llms-qa-field .form-field-label {
    font-family: var(--e-global-typography-secondary-font-family);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.43;
    color: var(--e-global-color-text);
    margin-bottom: 10px;
    display: block;
	text-transform: uppercase;
}
.llms-qa-panel-form .llms-qa-field .form-field {
    background: #ffffff;
    border: none;
    border-radius: 0;
    padding: 15px 20px;
    font-family: var(--e-global-typography-secondary-font-family);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.43;
    color: var(--e-global-color-text) !important;
}
.llms-qa-panel-form .llms-qa-field .form-field::placeholder {
    color: var(--e-global-color-text) !important;
}
.llms-qa-light-action {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    align-items: center;
}
.llms-qa-light-action .lms-close {
    background: transparent !important;
    box-shadow: none !important;
    color: var(--e-global-color-9534cd2);
    font-weight: 600;
}
.llms-qa-failed-message {
	margin-top: 20px;
    color: red;
}

.llms-qa-search-wrapper {
    display: flex;
    justify-content: space-between;
	border-bottom: 1px solid var(--e-global-color-571db8e);
    padding-bottom: 35px;
    margin-bottom: 35px;
	flex-wrap: wrap;
	gap: 30px;
}
.llms-qa-search-frm {
    display: flex;
    gap: 12px;
}
.llms-qa-search-frm .search-text {
    font-family: var(--e-global-typography-secondary-font-family);
    font-size: 14px !important;
    font-weight: 400;
    line-height: 1.43 !important;
    color: var(--e-global-color-f4077e1) !important;
    padding: 12px 20px !important;
    border: 1px solid var(--e-global-color-571db8e)!important;
    background-color: #ffffff !important;
    border-radius: 0 !important;
    width: auto !important;
    min-width: 230px;
}

.qa-header {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    align-items: center;
}
.llms-qa-question .qa-header .qa-question-title {
    font-family: var(--e-global-typography-primary-font-family);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.6;
    text-align: left;
    color: var(--e-global-color-text);
	margin-bottom: 10px;
}
.llms-qa-question .qa-header .qa-question-title .pending {
    color: var(--e-global-color-a75a058);
}
.llms-qa-question .qa-body {
    font-family: var(--e-global-typography-secondary-font-family);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--e-global-color-d60c0a5);
}
.qa-author {
    display: flex;
    gap: 10px;
    align-items: center;
}
.qa-author .avator-body {
    font-family: var(--e-global-typography-secondary-font-family);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.75;
    text-align: left;
    color: var(--e-global-color-4cde579);
}
.qa-author .avator-img {
	width: auto !important;
}
.qa-author .avator-img img {
    width: 32px !important;
    height: 32px !important;
    object-fit: cover !important;
}
.llms-qa-question {
    margin: 30px 0;
}
.qa-footer .reply-link {
    margin-top: 20px;
}
.llms-qa-question .qa-moderation-actions .tpg-btn {
    background: transparent;
    box-shadow: none;
    padding: 0;
    color: var(--e-global-color-9534cd2);
}
.llms-qa-question .qa-moderation-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    margin-top: 10px;
}
.qa-footer {
    margin-top: 15px;
}
.llms-qa-replay {
    border: 1px solid var(--e-global-color-571db8e);
    border-left: 4px solid var(--e-global-color-9534cd2);
    padding: 30px 25px;
}
.llms-qa-replay .qa-footer {
    margin-top: 30px;
}
.llms-qa-replay .avator-body .badge {
    background: var(--e-global-color-35b66cd);
    color: #ffffff;
    padding: 0px 10px;
    display: inline-block;
    margin-left: 5px;
}
.llms-qa-pagination {
    text-align: center;
    display: flex;
    justify-content: center;
    gap: 50px;
    align-items: center;
	margin-top: 70px;
}
.llms-qa-pagination .pagination-info {
    font-family: var(--e-global-typography-secondary-font-family);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.56;
    text-align: center;
    color: var(--e-global-color-text);
}
.llms-qa-pagination .qa-page-link {
    height: auto;
    line-height: 16px;
}
.llms-qa-pagination .qa-page-link .icon {
    font-size: 20px;
    width: 20px;
    height: 20px;
    color: var(--e-global-color-9534cd2);
}

.llms-qa-panel-form .ql-toolbar.ql-snow {
    border: none !important;
}
.llms-qa-panel-form .mce-toolbar-grp button {
    box-shadow: none !important;
    background: none !important;
}
.llms-qa-panel-form .mce-container {
    border: none !important;
    box-shadow: none !important;
    background: #ffffff !important;
}
.lllms-qa-panel-form .mce-container-body {
    border: none !important;
    box-shadow: none !important;
}
.llms-qa-panel-form .mce-container-body {
    border: none !important;
    box-shadow: none !important;
    background: #ffffff !important;
}

@media only screen and (max-width: 1279px) {
	.tab-qa-no-questions-section  .tab-content-title {
		font-size: 26px !important;
		line-height: 1.36 !important;
	}
}
@media only screen and (max-width: 839px) {
	.tab-qa-no-questions-section  .tab-content-title {
		font-size: 24px !important;
		line-height: 1.3 !important;
	}
	#llms-qa-wrapper .llms-qa-description {
		font-size: 18px;
		line-height: 1.5;
	}
	#lesson-qa .lms-modal {
		padding: 40px 20px;
	}
}
@media only screen and (max-width: 599px) {
	.llms-qa-pagination{
		margin-top: 50px;
		margin-bottom: 50px;
	}
}
@media only screen and (max-width: 479px) {
	.llms-qa-replay {
		padding: 20px 15px;
	}
	.llms-qa-search-frm .search-text {
		min-width: 180px;
	}
	.llms-qa-question .qa-header .qa-question-title {
		font-size: 16px;
		line-height: 1.5;
	}
	.llms-qa-question .qa-body {
		font-size: 16px;
		line-height: 1.5;
	}
	.qa-footer .reply-link {
		font-size: 14px;
	}
	.llms-qa-replay .avator-body .badge {
		padding: 0 6px;
	}
	.qa-author .avator-body {
		font-size: 15px;
		line-height: 1.5;
	}
}
/* End Q&A Tab CSS*/

/* Resources Tab CSS*/
#lesson-resources .resource-list {
    list-style: none;
    margin: 0;
    padding: 0;
	margin-top: 30px;
}
#lesson-resources .resource-list .resource-item {
    display: flex;
    align-items: center;
	justify-content: space-between;
	gap: 50px;
	background: var(--e-global-color-51a985e);
    padding: 35px;
    margin-bottom: 25px;
}
#lesson-resources .resource-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
#lesson-resources .resource-title {
    font-family: var(--e-global-typography-secondary-font-family);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.6;
    text-align: left;
    color: var(--e-global-color-text);
}
#lesson-resources .resource-icon {
    font-size: 30px;
    width: 30px;
    height: 30px;
    margin-right: 5px;
}
#lesson-resources .resource-download {
    font-family: var(--e-global-typography-secondary-font-family);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.11;
    color: var(--e-global-color-9534cd2);
}
#lesson-resources .resource-download:hover {
    color: var(--e-global-color-9534cd2);
}

@media only screen and (max-width: 1279px) {
	#lesson-resources .resource-title {
		font-size: 18px;
		line-height: 1.3;
	}
	#lesson-resources .resource-icon {
		font-size: 26px;
		width: 26px;
		height: 26px;
	}
	#lesson-resources .resource-download {
		font-size: 16px;
		line-height: 1.11;
	}
}
@media only screen and (max-width: 479px) {
	#lesson-resources .resource-list .resource-item {
		padding: 20px;
		margin-bottom: 15px;
	}
	#lesson-resources .resource-icon {
		font-size: 40px;
		width: 40px;
		height: 40px;
	}
}
/* End Resources Tab CSS*/

/* END Tab Area CSS */







/*
.course-lesson-quiz {
	padding: 30px;
}

.lesson_take_the_quiz {
	padding: 13px 12px;
	background-color: #f0f4f7;
	border: none;
	font-size: 16px;
	border-radius: 0px;
	font-family: "Source Sans Pro", sans-serif;
}

.lesson_take_the_quiz button,
.lesson_take_the_quiz a,
.lesson_take_the_quiz button:hover,
.lesson_take_the_quiz a:hover,
.lesson_take_the_quiz button:focus,
.lesson_take_the_quiz a:active {
	background: rgb(241, 98, 46);
	background: -moz-linear-gradient(0deg, rgba(241, 98, 46, 1) 0%, rgba(248, 142, 78, 1) 100%);
	background: -webkit-linear-gradient(0deg, rgba(241, 98, 46, 1) 0%, rgba(248, 142, 78, 1) 100%);
	background: linear-gradient(0deg, rgba(241, 98, 46, 1) 0%, rgba(248, 142, 78, 1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f1622e", endColorstr="#f88e4e", GradientType=1);
	border: none;
	font-size: 16px;
	padding: 11px 17px;
	border-radius: 0px;
	text-transform: uppercase;
	box-shadow: 0 3px 6px #bfc2c5;
	font-weight: 700;
	color: #fff;
	text-decoration: none;
}



#lesson-qa .qa-data {
	margin-bottom: 10px;
	margin-right: 25px;
}

#lesson-qa .qa-data h5 {
	font-size: 16px;
	font-family: "Lora";
	margin-bottom: 4px;
}

#lesson-qa .qa-data p {
	font-size: 16px;
	font-family: "Source Sans Pro", sans-serif;
}


.lesson-notes-grid .btn,
.lesson-notes-grid .btn:hover,
.lesson-notes-grid .btn:focus {
	background: rgb(241, 98, 46);
	background: -moz-linear-gradient(0deg, rgba(241, 98, 46, 1) 0%, rgba(248, 142, 78, 1) 100%);
	background: -webkit-linear-gradient(0deg, rgba(241, 98, 46, 1) 0%, rgba(248, 142, 78, 1) 100%);
	background: linear-gradient(0deg, rgba(241, 98, 46, 1) 0%, rgba(248, 142, 78, 1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f1622e", endColorstr="#f88e4e", GradientType=1);
	border: none;
	font-size: 16px;
	padding: 11px 17px;
	border-radius: 0px;
	text-transform: uppercase;
	box-shadow: 0 3px 6px #bfc2c5;
	font-weight: 700;
	color: #fff;
	text-decoration: none;
}

.tab-content .dt-search label {
	display: none;
}

.tab-content .dt-search input,
.title-field input {
	width: 100%;
	margin: 40px 0 6px;
	border: 1px solid #dce1e4 !important;
	background-color: #f0f4f7 !important;
	padding: 11px 20px;
	font-size: 18px;
	border-radius: 7px;
	height: 50px;
	color: #000 !important;
}

.form-control,
.tab-content .dt-search input,
.title-field input {
	display: block;
	font-weight: 400;
	line-height: 1.5;
	color: #212529;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-left: 20px !important;
	background-clip: padding-box;
	transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}



#llqa-wrapper {
	margin-top: 20px;
}

.llqa-item {
	border-bottom: 1px solid #ccc;
	padding: 10px 0;
}
/* Reviews Empty State - Added in v1.4.1 */
.review-first-section {
    display: block;
}

.tab-review-no-reviews-section {
    background-color: #f5f1eb; /* Fallback color */
    background-color: var(--e-global-color-51a985e, #f5f1eb);
    padding: 40px 20px;
    text-align: center;
}

.tab-review-no-reviews-section .tab-content-title {
    font-family: var(--e-global-typography-primary-font-family, inherit) !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 34px !important;
    letter-spacing: -0.06px;
    color: var(--e-global-color-28a26ad, #212529) !important;
    margin-bottom: 15px;
}

.tab-review-no-reviews-section .llms-review-description {
    font-family: var(--e-global-typography-secondary-font-family, inherit);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.6;
    text-align: center;
    color: var(--e-global-color-4cde579, #666666);
}

.tab-review-no-reviews-section .llms-review-description p {
    margin-bottom: 0;
}

.tab-review-no-reviews-section .llms-review-description .tpg-button {
    margin-top: 20px;
}

/* Responsive styles for reviews empty state */
@media (max-width: 839px) {
    .tab-review-no-reviews-section .tab-content-title {
        font-size: 22px !important;
        line-height: 28px !important;
    }
    
    .tab-review-no-reviews-section .llms-review-description {
        font-size: 16px;
    }
}

/* Notes Empty State - Added in v1.4.1 */
.notes-first-section {
    display: block;
}

.tab-notes-no-notes-section {
    background-color: #f5f1eb; /* Fallback color */
    background-color: var(--e-global-color-51a985e, #f5f1eb);
    padding: 40px 20px;
    text-align: center;
}

.tab-notes-no-notes-section .tab-content-title {
    font-family: var(--e-global-typography-primary-font-family, inherit) !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 34px !important;
    letter-spacing: -0.06px;
    color: var(--e-global-color-28a26ad, #212529) !important;
    margin-bottom: 15px;
}

.tab-notes-no-notes-section .llms-notes-description {
    font-family: var(--e-global-typography-secondary-font-family, inherit);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.6;
    text-align: center;
    color: var(--e-global-color-4cde579, #666666);
}

.tab-notes-no-notes-section .llms-notes-description p {
    margin-bottom: 0;
}

.tab-notes-no-notes-section .llms-notes-description .tpg-button {
    margin-top: 20px;
}

/* Responsive styles for notes empty state */
@media (max-width: 839px) {
    .tab-notes-no-notes-section .tab-content-title {
        font-size: 22px !important;
        line-height: 28px !important;
    }
    
    .tab-notes-no-notes-section .llms-notes-description {
        font-size: 16px;
    }
}

/* Resources Empty State - Added in v1.4.1 */
.resource-first-section {
    display: block;
}

.tab-resource-no-resources-section {
    background-color: #f5f1eb; /* Fallback color */
    background-color: var(--e-global-color-51a985e, #f5f1eb);
    padding: 40px 20px;
    text-align: center;
}

.tab-resource-no-resources-section .tab-content-title {
    font-family: var(--e-global-typography-primary-font-family, inherit) !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 34px !important;
    letter-spacing: -0.06px;
    color: var(--e-global-color-28a26ad, #212529) !important;
    margin-bottom: 15px;
}

.tab-resource-no-resources-section .llms-resource-description {
    font-family: var(--e-global-typography-secondary-font-family, inherit);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.6;
    text-align: center;
    color: var(--e-global-color-4cde579, #666666);
}

.tab-resource-no-resources-section .llms-resource-description p {
    margin-bottom: 0;
}

/* Responsive styles for resources empty state */
@media (max-width: 839px) {
    .tab-resource-no-resources-section .tab-content-title {
        font-size: 22px !important;
        line-height: 28px !important;
    }
    
    .tab-resource-no-resources-section .llms-resource-description {
        font-size: 16px;
    }
}

/* Restricted Content UI - Button styling for video empty state */
.tpg-restricted-button {
    display: inline-block;
    text-decoration: none;
    margin-top: 20px;
}

.tpg-video-empty-content .tpg-restricted-button {
    margin-top: 20px;
}

/* WooCommerce add-to-cart loading state on lesson restricted buttons
 * @since 2.17.7
 */
.tpg-video-empty-content .tpg-restricted-button.tpg-adding {
    opacity: 0.7;
    pointer-events: none;
}

/* View Basket state — subtle visual distinction
 * @since 2.17.7
 */
.tpg-video-empty-content .tpg-restricted-button.tpg-view-basket {
    /* inherits primary button styles — no override needed */
}

/* Free enrollment form within restricted content area
 * @since 2.17.7
 */
.tpg-video-empty-content .tpg-free-enroll-form {
    display: inline-block;
    margin-top: 20px;
}

.tpg-video-empty-content .tpg-free-enroll-form .llms-form-field {
    display: none;
}

.tpg-video-empty-content .tpg-free-enroll-form .tpg-restricted-button {
    margin-top: 0;
}

/* Make description text slightly bolder for prerequisite names */
.tpg-video-empty-description strong {
    color: var(--e-global-color-28a26ad, #212529);
}
/* End Restricted Content UI */

/* TPG Lesson Studio - Error / Restricted states in media slot */
.tpg-lesson-studio-media-wrapper .tpg-video-empty-state {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    padding-top: 80px;
    padding-bottom: 80px;
    background-color: var(--e-global-color-51a985e, #f5f1eb);
}
/* End TPG Lesson Studio states */

/* Locked Lesson Styles in Course Sidebar */
.tpg-accordion-body-inner.lesson-locked {
    opacity: 0.5;
}

.tpg-accordion-body-inner.lesson-locked:hover {
    opacity: 0.7;
}

.tpg-accordion-body-inner.lesson-locked .tpg-accordion-header.locked {
    cursor: pointer;
}

/* Lock icon styling */
.lesson-lock-icon {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.lesson-lock-icon svg {
    width: 18px;
    height: 18px;
    color: #999999;
}

/* Override the default checkbox-tick styles for lock icon */
.tpg-left .checkbox-tick.lesson-lock-icon {
    background: transparent !important;
    border: none !important;
}

.tpg-left .checkbox-tick.lesson-lock-icon::before,
.tpg-left .checkbox-tick.lesson-lock-icon::after {
    display: none !important;
}
/* End Locked Lesson Styles */

/* ============================================================
   Enrollment Required Card — Reusable component
   Used across Q&A, Notes, Reviews, and Resources tabs
   when a non-enrolled user views a free lesson preview.
   @since 2.17.8
   ============================================================ */

.tpg-enrollment-required-section {
    background-color: #f5f1eb; /* Fallback color */
    background-color: var(--e-global-color-51a985e, #f5f1eb);
    padding: 40px 20px;
    text-align: center;
    margin-bottom: 24px;
}

.tpg-enrollment-required-section .tab-content-title {
    font-family: var(--e-global-typography-primary-font-family, inherit) !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    line-height: 34px !important;
    letter-spacing: -0.06px;
    color: var(--e-global-color-28a26ad, #212529) !important;
    margin-bottom: 15px;
}

.tpg-enrollment-required-section .tpg-enrollment-required-description {
    font-family: var(--e-global-typography-secondary-font-family, inherit);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.6;
    text-align: center;
    color: var(--e-global-color-4cde579, #666666);
}

.tpg-enrollment-required-section .tpg-enrollment-required-description p {
    margin-bottom: 0;
}

.tpg-enrollment-required-section .tpg-enrollment-required-description .tpg-button,
.tpg-enrollment-required-section .tpg-enrollment-required-description .tpg-free-enroll-form .tpg-button {
    margin-top: 20px;
}

.tpg-enrollment-required-section .tpg-enrollment-required-description .tpg-free-enroll-form {
    display: inline-block;
}

/* Inline variant — used inside Reviews filled state (below the lock notice) */
.tpg-enrollment-required-inline {
    background-color: transparent;
    padding: 15px 0 0 0;
    text-align: left;
}

.tpg-enrollment-required-inline .tab-content-title {
    display: none;
}

.tpg-enrollment-required-inline .tpg-enrollment-required-description p {
    display: none;
}

.tpg-enrollment-required-inline .tpg-enrollment-required-description .tpg-button {
    margin-top: 0;
}

/* Q&A filled state enrollment card — add top spacing */
.tpg-qa-enroll-card {
    margin-top: 20px;
}

/* Responsive — smaller title on mobile */
@media (max-width: 839px) {
    .tpg-enrollment-required-section .tab-content-title {
        font-size: 22px !important;
        line-height: 28px !important;
    }

    .tpg-enrollment-required-section .tpg-enrollment-required-description {
        font-size: 16px;
    }
}