/* Styles for the single course page in the account section */
.single-course-container {
	height: 100% !important;
}
.single-course-container * {
	color: #000 !important;
}
.single-course-container .section-one-container {
	height: inherit;
	display: flex;
	gap: 100px;
	padding-right: 4% !important;
}

.single-course-container .section-one-container .left-col .return-to-course-archive a {
	background: #FC5D01;
	font-size: max(1vw, 14px);
	display: flex;
	gap: 10px; 
	width: max-content;
	padding: 10px 15px;
	border-radius: 26px;
	box-shadow: 5px 5px 10px 1px #0003;
	font-weight: 800;
}
.single-course-container .section-one-container .left-col .return-to-course-archive a span {
	color: #fff !important;
}
.single-course-container .section-one-container .course-image-container img {
	width: 100%;
}
.single-course-container .section-one-container .right-col {
	flex: 4; 
}
.single-course-container .section-one-container .left-col {
	flex: 5;
}
.single-course-container .section-one-container .left-col .left-meta-container {
	display: flex;
	flex-direction: column;
	gap: 30px;
	border-left: solid 4px #FC5D01;
	padding-left: 20px;    
} 
.single-course-container .section-one-container .left-col .left-meta-container .course-categories p {
	color: #FC5D01 !important;
	font-weight: 600;
}
.single-course-container .section-one-container .right-col {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.single-course-container .section-one-container .left-col {
	display: flex;
	flex-direction: column;
	gap: 40px;
}
.single-course-container .section-one-container .right-col .progression-tracker {
	width: 100%;
	flex-direction: column;
	display: flex;
	align-self: center;
} 
.single-course-container .section-one-container .right-col .progression-tracker .track {
  width: 100%;
  height: 15px;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
}
.single-course-container .section-two-container {
	padding-right: 4% !important;
}
.section-one-container {
	max-height: 400px;
}
.section-two-container .lessons-container {
	display: grid;
	background: #fff;
	padding: 5% !important;
	border-radius: 25px;
	height: auto;
	transition: all .25s;
}
.section-two-container .lessons-container > div {
	display: grid;
	grid-template-columns: 60px auto 300px max-content;
	align-items: center;
	padding: 15px 0 !important;
	border-bottom: solid 1px #707070;
	transition: all .25s;
	height: 80px; 
	overflow: hidden;  
} 
.section-two-container .lessons-container > div.active {  
	height: 100%; 
}
.section-two-container .lessons-container > div.active .video-link img {
	filter: grayscale(0);
	opacity: 1;
	transform: rotate(90deg);
}
.section-two-container .lessons-container .video-lesson-container {
	border: none;
	grid-area: span 1 / span 4 !important;
}
.section-two-container .lessons-container > div > div {
	display: flex; 
}   
.section-two-container .lessons-container .mark-as-complete form input,
.section-two-container .lessons-container .mark-as-complete form {
	height: 46px !important;
	width: 46px !important;
	padding: 0 !important;
}
.section-two-container .lessons-container .mark-as-complete.completed form input {
	filter: grayscale(0);
	background-image: url(/wp-content/uploads/2022/03/marked-as-complete-icon.svg);
	opacity: 1;
}
.section-two-container .lessons-container > div > div form input {
	filter: grayscale(1);
	opacity: .5;
	background: #FC5D01;
}
.section-two-container .lessons-container > div > div form input:hover {
	filter: grayscale(1);
	opacity: .5;
	background-image: url(/wp-content/uploads/2022/03/marked-as-complete-icon.svg);
}
.section-two-container .lessons-container .download-link img {
	pointer-events: none;
}
.section-two-container .lessons-container .download-link img,
.section-two-container .lessons-container .video-link img {
	opacity: .5;
	filter: grayscale(1);
	transition: all .25s; 
	cursor: pointer;
} 
.section-two-container .lessons-container .download-link a:hover img,
.section-two-container .lessons-container .video-link img:hover {
	filter: grayscale(0);
	opacity: 1;
} 
.section-two-container .lessons-container .video-lesson-container {
	overflow: hidden;
	display: block !important;
	padding: 0 !important;
	transition: all .25s; 
	opacity: 0; 
	pointer-events: none;    
} 
.section-two-container .lessons-container .video-lesson-container.active {
	pointer-events: auto;
	opacity: 1; 
}
.lessons-container .video-lesson-container iframe {
	width: 100% !important;
	padding: 5% !important;
}
.lessons-container .lesson-title h2 {
  font-family: bebas-neue-pro;
	font-size: max(2vw, 20px);
}
.section-two-container .lessons-container {
	position: relative;
}
.section-two-container .lessons-container::before {
	position: absolute;
	content: "Mark As Complete";
	top: 0;
	right: 0;
	padding-right: 5%;
	padding-top: 3%;
	font-weight: 800;
}
.woocommerce-MyAccount-content .single-course-container .section-three-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 5% !important;
	padding: 5% !important;
	background: #fff;
	position: relative;
}
.woocommerce-MyAccount-content .single-course-container .section-three-container::before {
	position: absolute;
	content: "";
	height: 100%; 
	width: 100%;
	background: #fff;
	right: 100%;
}
.woocommerce-MyAccount-content .single-course-container .section-three-container .review-message h2 {
  font-family: bebas-neue-pro;
	font-size: max(2.5vw, 20px);
}
.woocommerce-MyAccount-content .single-course-container .section-three-container a {
	white-space: nowrap;
	background: #FC5D01;
	color: #fff !important;
	padding: 10px 15px;
	border-radius: 26px;
	font-weight: 800;
	font-size: max(1vw, 14px);
	box-shadow: 5px 5px 10px 1px #0002;
}