/* 
Theme Name: RNZ - WP Courseware
Theme URI: https://renzozamora.com
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

:root{
	--font-size: 15px;
	--default-width: calc( 100vw - 40px );
	--max-width: 1400px;
	--main-color:#5165F7;
	--main-color-hover:#495CDE;
	--secondary-color:#29B95F;
	--secondary-color-hover:#239e51;
}

body{
	background-color:#fff;
	color:#495255;
	font-size:15px;
	line-height: 1.7em;
}
a{
	color:var(--main-color);
}

:is( input:not([type='radio']):not([type='checkbox']):not([type='submit']), textarea, select ){
	box-sizing:border-box;
	border:1px solid #e2e7ed;
	font-size: var(--font-size, 15px);
	padding:10px;
	transition:all .2s;
}
:is( input:not([type='radio']):not([type='checkbox']):not([type='submit']), textarea, select ):focus{
	box-shadow: 0 0 0 0.2rem rgb(0 123 255 / 25%);
}


.vstyle{
	display:grid;
	grid-template-columns:330px calc( 100% - 330px );
	width: var(--default-width, 1400px);
	max-width: var(--max-width, 100%);
	margin-left:auto;
	margin-right:auto;
	margin-top:40px;
	margin-bottom:40px;
	border-radius:30px;
	box-shadow:0 0 45px 7px rgb(0 0 0 / 16%);
}

#vheader{
	align-items: flex-start;
	align-content: flex-start;
	background-color:#f9f9f9;
	border-radius:30px 0 0 30px;
	display:flex;
	flex-direction:column;
	padding:30px;
}
#vheader .rnz-toggle-panel, #vheader-mobile{
	display:none;
}
#vcontent{
	background-color:#fff;
	border-radius:0 30px 30px 0;
	overflow:hidden;
	padding:30px;
}
#footer-vertical{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	grid-gap:10px;
	margin-bottom:40px;
}

#logo{
	width:100%;
	margin-bottom:30px;
	user-select:none;
}
#logo figure{
	margin:0 !important;
	padding:0 !important;
	position: relative;
	overflow:hidden;
	height:100px;
	width:100% !important;
}
#logo figure img{
	top:0;
	bottom:0;
	left:0;
	right:0;
	position: absolute;
	height:100%;
	object-fit:contain;
	width:100%;
}

body:is(.single-wpcw_course, .single-course_unit) #vcontent{
	padding:0;
}

/* VMENU */
#vmenu-wrap{
	display:flex;
	width:100%;
}
#vmenu{
	display:flex;
	flex-direction:column;
	gap:10px;
	list-style:none;
	margin:0;
	padding:0;
	width:100%;
}
#vmenu > li{
	display:flex;
	width:100%;
}
#vmenu > li > a{
	border-radius:15px;
	color:#000;
	display:flex;
	font-size:15px;
	padding:10px 20px;
	transition:all ease-in-out 500ms;
	align-items:center;
	align-content:center;
	width:100%;
	gap:10px;
	position: relative;
}
#vmenu > li > a::after{
	display: block;
	height: 100%;
	content: '';
	width: 15px;
	border-radius: 15px 0 0 15px;
	background: transparent;
	position: absolute;
	transform: translateX(30px);
	transition:all ease-in-out 500ms;
	right: 0;
}
#vmenu > li > a:hover, #vmenu > li > a:hover::after{
	background-color: #eee;
}
#vmenu > li.current-menu-item > a, #vmenu > li.current-menu-item > a::after{
	background-color: var(--main-color);
	color:#fff;
}

#vmenu > li > a > .menu-item-icon{
	position:relative;
	width:30px;
	height:30px;
	padding:0;
	margin:0;
	user-select:none;
}
#vmenu > li > a > .menu-item-icon > img{
	filter: invert(48%) sepia(0%) saturate(2364%) hue-rotate(331deg) brightness(97%) contrast(85%);
}
#vmenu > li.current-menu-item > a > .menu-item-icon > img{
	filter: invert(100%);
}

/* EDIT ACCOUNT */
.rnz-account-panel .wpcw-student-account-navigation{
	display:none !important;
}

/* COMMENTS */
.vstyle #comments{
	border-top:1px solid #E2E7ED;
	margin-top:20px;
	padding-top:20px;
}
.vstyle #comments .logged-in-as a{
	color:var(--secondary-color);
}
.vstyle #comments .submit{
	background-color:var(--secondary-color);
	border:none;
	color:#fff;
	line-height:1em;
	padding:15px;
	border-radius:13px;
	font-weight: 600;
	transition:all .2s;
}
.vstyle #comments .submit:hover{
	background-color:var(--secondary-color-hover);
}
/* COURSE SINGLE */
.course-header, .unit-header{
	background-color:#F6F6F9;
	padding:40px;
	padding-top:60px;
}
.course-header h1, .unit-header h1{
	font-size:2.4em;
	font-weight: 600;
	margin:0
}
.course-content{
	display:grid;
	grid-template-columns:calc(100% - 330px - 40px) 330px;
	grid-gap:40px;
	padding:40px;
}

/* UNIT-SINGLE */
.unit-header{
	padding-top:40px;
}
.unit-content{
	padding:40px;
}
.unit-course-title{
	color:#495255;
	margin-bottom:6px;
}
.unit-course-title a{
	font-weight: 500;
	color:var(--secondary-color) !important;
}
.wpcw_fe_progress_box_pending{
	background-color: #EAF9EF;
	border-radius:13px;
	border:0;
}
.wpcw_fe_progress_box_complete{
	border-radius:13px;
	border-color:#E2E7ED;
}
.wpcw_fe_quiz_submit_data input.fe_btn_completion, a.fe_btn_completion{
	background-color: #29B95F;
	border:0;
	font-weight: 600;
	padding: 16px 15px;
	border-radius: 13px;
	transition:all .2s;
}
.wpcw_fe_quiz_submit_data input.fe_btn_completion:hover, a.fe_btn_completion:hover{
	background-color: #239e51;
}

.wpcw_fe_navigation_box{
	display:flex;
	gap:10px;
	justify-content:center;
	justify-items:center;
}
.wpcw_fe_navigation_box .fe_btn_navigation{
	padding:15px 25px;
	border-radius:80px;
	background-color:var(--main-color);
	border:0;
	transition:all .2s;
	font-weight:600;
}
.wpcw_fe_navigation_box .fe_btn_navigation:hover{
	background-color:var(--main-color-hover);
}

/* EXAM */
.wpcw_fe_quiz_box_pending{
	background-color: transparent;
	padding:0;
	border:none;
}
.wpcw_fe_quiz_box fieldset{
	padding:0;
	border:none;
}

/* MY COURSES */
.wpcw-course-list-item{
	align-items: center;
	box-shadow:0 0.2px 2.1px -6px rgb(0 0 0 / 2%), 0 0.6px 5.4px -6px rgb(0 0 0 / 3%), 0 1.2px 11px -6px rgb(0 0 0 / 4%), 0 2.6px 22.6px -6px rgb(0 0 0 / 5%), 0 7px 62px -6px rgb(0 0 0 / 7%) !important;
	border-radius: 18px;
	display: grid;
	grid-gap:20px;
	grid-template-columns: auto 120px 150px;
	margin-bottom: 15px;
	padding: 10px 15px;
	transition: all ease-in-out 300ms;
	width: 100%;
}
.wpcw-course-list-item:hover{
	box-shadow:4px 3px 14px 2px rgb(0 0 0 / 16%) !important;
}
.wpcw-course-list-item  .course-meta{
	display:flex;
	justify-content:flex-start;
	gap:20px;
	align-items:center;
	align-content:center;
}
.wpcw-course-list-item .course-image figure{
	height:65px;
	margin:0;
	overflow:hidden;
	padding:0;
	position:relative;
	border-radius:13px;
	width:65px;
	user-select:none;
}
.wpcw-course-list-item .course-image figure img, .course-entry .course-image figure img, #vmenu > li > a > .menu-item-icon > img{
	bottom:0;
	height:100%;
	left:0;
	position:absolute;
	right:0;
	top:0;
	object-fit: cover;
	width:100%;
}
.wpcw-course-list-item .course-title{
	font-size:1em;
	font-weight:600;
	margin:0;
}
.wpcw-course-list-item .course-title a{
	color:#000;
}
.wpcw-course-list-item .progress, .rnz-course-progress{
	display:flex;
	flex-direction: column;
	gap:8px;
}
.wpcw-course-list-item .progress .progress-data-value, .rnz-course-progress .progress-data-value{
	color: var(--secondary-color);
	font-weight: bold;
}
.wpcw-course-list-item .progress .progress-bar, .rnz-course-progress .progress-bar{
	width: 100%;
	height: 8px;
	border-radius: 50px;
	background: #dedede;
}
.wpcw-course-list-item .progress .progress-bar-value, .rnz-course-progress .progress-bar-value{
	height: 100%;
	width: auto;
	background: var(--secondary-color);
	border-radius: 50px;
}
.wpcw-course-list-item .continue-course{
	background:var(--main-color);
	display: flex;
	align-items: center;
	min-width: 150px;
	justify-content: center;
	padding: 15px 13px;
	border-radius: 13px !important;
	color: #ffffff;
	transition:all .2s;
}
.wpcw-course-list-item .continue-course:hover{
	background:var(--main-color-hover);
}

/* COURSE ARCHIVE */
.course-entries{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	grid-gap:30px;
}
.course-entry{
	border:1px solid #e4e6f1;
	background-color:#fff;
}
.course-entry .course-image{
	position:relative;
}
.course-entry .course-image figure{
	position:relative;
	padding:0;
	margin:0;
	height:200px;
	user-select:none;
}
.course-entry .course-image .post-badge.enrolled{
	background-color:var(--main-color);
	color:#fff;
	padding: 5px 10px;
	position:absolute;
	top: 20px;
	left: 20px;
	margin: 0;
	font-size: 10px;
	line-height: 1;
	letter-spacing: .08em;
	pointer-events: none;
	text-transform: uppercase;
	white-space: nowrap;
	z-index:2;
}
.course-entry .post-body{
	padding:24px;
}
.course-entry .post-body .course-title{
	font-size: 18px;
	font-weight: 600;
	margin:0;
	margin-bottom:20px;
}
.course-entry .post-body .course-title a{
	color:#000;
}
.course-entry .post-body .course-meta{
	display:flex;
	justify-content: space-between;
	align-items:center;
	align-content:center;
}
.course-entry .post-body .course-meta .course-meta__author{
	font-size:12px;
}
.course-entry .post-body .course-meta .course-meta__price{
	font-size:18px;
	font-weight:600;
	color:var(--secondary-color);
}
.course-entry .course-action{
	margin-top:20px;
}
.course-entry .course-action .continue-course, .course-entry .course-action .wpcw-button.wpcw-button-primary{
	background: var(--main-color);
	display: flex;
	align-items: center;
	width:100%;
	justify-content: center;
	line-height:1.7em;
	padding: 12px 13px !important;
	font-weight: normal !important;
	border-radius: 8px !important;
	color: #ffffff;
	transition: all .2s;

}

/* POST SINGLE */
.post-header .post-title{
	font-weight:600;
	margin-bottom:40px;
}

/* COURSE SUMMARY */
.rnz-course-summary{
	display:flex;
	flex-direction:column;
	gap:15px;
	list-style:none;
	padding:0;
	margin:0;
}
.rnz-course-summary .lessons{
	display:flex;
	flex-direction:column;
	list-style:none;
	padding:0;
	margin:0;
}
.rnz-course-summary .lessons-header{
	font-size:14px;
	background-color: #f0f3f6!important;
	border-left:1px solid #E2E7ED;
	border-right:1px solid #E2E7ED;
	padding: 1.125em 1.2em;
}
.rnz-course-summary .lessons-header > span{
	position: relative;
	padding-left:calc(1.2em + 10px);
	font-weight:600;
}
.rnz-course-summary .lessons-header > span::before{
	content:'';
	background-image:url('assets/images/document.svg');
	background-repeat:no-repeat;
	background-position:center;
	background-size:contain;
	width:1.2em;
	height:1.2em;
	position:absolute;
	left:0;
	top:50%;
	transform:translateY(-50%);
}
.rnz-course-summary .lesson > .item-content{
	font-size:15px;
	background-color:#fff;
	border:1px solid #E2E7ED;
	padding:1.125em 1.2em;
	display:grid;
	grid-template-columns: auto 25px;
	grid-gap: 10px;
}
.rnz-course-summary .module .lesson > .item-content{
	font-size:14px;
}
.rnz-course-summary .module .lesson:not(:last-of-type) > .item-content{
	border-bottom:none;
}
.rnz-course-summary .lesson.current > .item-content{
	border-color:var(--main-color);
}
.rnz-course-summary .module .lesson.current + .lesson > .item-content{
	border-top-color:var(--main-color);
}
.rnz-course-summary .item-content > .item-name{
	color:#495255;
	font-weight:500;
}
.rnz-course-summary a.item-content > .item-name:hover{
	color:var(--main-color);
}

.rnz-course-progress{
	margin-bottom:30px;
}
.nav-course-summary .rnz-course-progress .progress-data{
	font-size:13px;
	text-align:right;
}
.wpcw_checkmark{
	background-color: var(--secondary-color);
	font-size:12px;
}
.wpcw_checkmark:before{
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

/* TABS */

.rnz-tabs{
	border-bottom: 1px solid rgba(166, 169, 192, 0.2);
	list-style:none;
	display:flex;
	justify-content:center;
	margin-bottom:40px;
	padding:0;
}
.rnz-tabs > li{
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 0;
	text-align: center;
	display:flex;
	justify-content:stretch;
	align-items:stretch;
	position:relative;
	transition:all .3s;
}
.rnz-tabs > li > a{
	display:flex;
	padding:15px 15px;
	width:100%;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	transition:all .3s;
	color:#A6A9C0;
	font-weight:700;
}

.rnz-tabs > li > a > figure{
	position:relative;
	height:24px;
	width:24px;
	margin-bottom:7px !important;
}
.rnz-tabs > li:first-of-type, .rnz-tabs > li:first-of-type > a{
	border-radius:10px 0 0 10px;
}
.rnz-tabs > li:last-of-type, .rnz-tabs > li:last-of-type > a{
	border-radius:0 10px 10px 0;
}
.rnz-tabs > li > a > figure > img, .woocommerce-mini-cart-item figure img{
	object-fit:contain;
	position:absolute;
	height:100%;
	width:100%;
	top:0;
	bottom:0;
	left:0;
	right:0;
}
.rnz-tabs > li > a::after{
	content:'';
	width:100%;
	position:absolute;
	right:0;
	left:0;
	bottom:0;
	background-color:var(--main-color);
	height:0;
	border-radius:10px 10px 0 0;
	transition:all .2s;
}
.rnz-tabs > li.current:after{
	opacity:1;
}

.rnz-tabs > li.current > a{
	color:#0E1D47;
}
.rnz-tabs > li.current > a::after{
	height:4px;
}
.rnz-tab-content:not(.current){
	display:none;
}

/* HEADER COURSE UNIT */
.header-tabs{
	width:100% !important;
}
.header-tabs > .rnz-tabs{
	display:grid;
	grid-template-columns:repeat(2,1fr);
}
.nav-course-summary .rnz-course-summary{
	gap:5px;
}
.nav-course-summary .rnz-course-summary > .lesson > .item-content{
	font-size:13px;
}

/* WPCW FORMS */
.wpcw-form-row{
	position:relative;
	margin-top:15px !important;
	margin-bottom:25px !important;
}
.wpcw-form-row > label{
	font-size:13px;
	font-weight: bold;
	user-select: none;
	margin-bottom:10px;
}

/* RESPONSIVE */
.responsive-video{
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}
.responsive-video iframe{
	position: absolute;
	top: 0; 
	left: 0;
	width: 100%;
	height: 100%;
}

@media screen and (min-width:1201px){
	.course-content > aside{
		margin-top:-140px;
	}
	.course-header{
		display:grid;
		grid-template-columns: calc(100% - 330px - 40px) 330px;
	}
}
@media screen and (max-width:1200px){
	.course-entries{
		grid-template-columns: repeat(2,1fr);
	}
}
@media screen and (max-width:670px){
	.vstyle{
		border-radius:0;
		grid-template-columns: minmax(0,1fr);
		width:100vw;
		margin-top:0;
	}
	body.rnz-fixed-panel{
		overflow-y:hidden;
	}
	#vheader{
		border-radius:0;
		position:fixed;
		top:60px;
		bottom:0;
		left:0;
		right:0;
		height:100vh;
		transform:translateX(-100vw);
		transition:all .2s;
		overflow-y:auto;
		z-index:999;
	}
	#vheader-mobile{
		position: relative;
		background-color: #f9f9f9;
		z-index: 1;
	}
	#vheader-mobile a{
		color:#000;
		font-weight:500;
	}
	#vheader .rnz-toggle-panel, #vheader-mobile .rnz-toggle-panel > span{
		display: flex;
		position:absolute;
		top:20px;
		right:20px;
		height:20px;
		width:20px;
		z-index:9;
		background: #e4e4e4;
		padding: 20px;
		border-radius: 10px;
	}
	#vheader-mobile .rnz-toggle-panel > span{
		top:50%;
		transform:translateY(-50%);
	}
	#vheader .rnz-toggle-panel > span, #vheader-mobile .rnz-toggle-panel > span > i{
		background-image: url('assets/images/close.svg');
		background-position:center;
		background-size: contain;
		background-repeat: no-repeat;
		width:20px;
		height:20px;
		display: flex;
		filter:invert(48%) sepia(0%) saturate(2364%) hue-rotate(331deg) brightness(97%) contrast(85%);
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
	}
	#vheader-mobile .rnz-toggle-panel > span > i{
		background-image: url('assets/images/menu.svg');
	}
	#vheader.active{
		transform:translateX(0);
	}
	#vheader-mobile{
		display:flex;
		padding:30px;
	}
	#vcontent{
		border-radius:0;
	}
	body:is(.single-course_unit, .single-wpcw_course) #vcontent{
		padding:0;
	}
	.wpcw-course-list-item{
		grid-template-columns: calc(56% - 20px) 44%;
		grid-gap:15px 20px;
	}
	.wpcw-course-list-item .course-meta{
		grid-column: span 2;
		border-bottom:1px solid #ccc;
		padding-bottom:15px;
	}
	.wpcw-course-list-item .continue-course{
		min-width:100%;
	}
	.course-entries,.course-content{
		grid-template-columns:minmax(0,1fr);
	}
	.course-content > section{
		order:2;
	}
	.course-content > aside{
		order:1;
	}
}