/* AREA TAB */
.section-tab { background:#1A73E8}
.wrapping-tab {overflow:hidden;width:1200px;padding:20px 0 0 0;margin:0 auto;}
@media screen and (max-width:1280px) { .wrapping-tab {width:95%;padding:20px 2.5% 0 2.5%} }
@media screen and (max-width:1024px) { .tab button { font-size:12px; padding:10px } }	
@media screen and (max-width:480px) { .tab .fa-user-friends,.tab .fa-video {display:none } }

/* AREA HEAD */
.section-header { overflow:hidden;padding:2.5% 0;background:linear-gradient(to bottom, #034DAD, #2b6ed1) }
.wrapping-head {overflow:hidden;width:1200px;padding:40px 0;margin:0 auto}
	.section-header h1 { clear:both; line-height:1.2em; color:#fff }
	.section-header-left { float:left; width:740px }
		.workshop-status {
			overflow:hidden;
			display:block;
			float:left;
			margin:0 10px 20px 0;
			font-size: 8px;
			font-weight:600;
			text-transform:uppercase;
			line-height:1em;
			padding:3px 6px;
			background:#12873B;
			color:#fff;
			border-radius:20px;
			border:1px solid #fff;	
			}
			.workshop-status .fa-check {margin-right:3px}
		.title-head{ clear:both; color:#fff }			
			.subtitle-1 { font-size:16px; text-transform:uppercase; margin:0 0 5px 0;}
			.subtitle-2 { font-size:18px; font-weight:300; line-height:1.4em; margin:10px 0 5px 0;}
			.redirect-note {overflow:hidden;padding:20px;margin:20px 0;color:#444;background:#fff;border-radius:3px}
			.redirect-note p { float:left;width:85%;font-size:14px; line-height:1.6em;padding:0}
			.redirect-note .fa-hand-point-down {float:left;font-size:28px;padding:0;margin:10px 20px 0 10px}
			.redirect-link { 
				float:left;font-size:14px; 
				font-weight:400; 
				line-height:1em; 
				padding:10px 20px;
				margin:30px 0 60px 0; 
				color:#ffffff; 
				background:#c5221f; 
				border:2px solid #fff; 
				border-radius:20px
				}
			.redirect-link:hover{text-decoration:none;background:#9C1816}
			.redirect-link a{color:#ffffff; }
			.redirect-link a:hover {text-decoration:none}	
		.title-dash { margin-top:20px; margin-bottom:-10px; color:#fbbf10 }
		.title-trainer { font-size:14px; color:#ddd }
			.trainer-profile { float:left; overflow:hidden; width:300px; margin:10px 10px 0 0; color:#ddd }
			.trainer-profile a { color:#ddd }
			.trainer-profile a:hover { color:#fff }
			.trainer-profile-avatar img {float:left; width:50px; height:50px; border-radius:50%; margin:0 10px 10px 0;}
			.trainer-profile-text { float:left }
				.trainer-profile-text-1 { font-size:16px; font-weight:500; line-height:1.6em; margin:5px 0 0 0; padding:0; color:#fff }
				.trainer-profile-text-2 { font-size:12px; font-weight:300; line-height:1.2em }
	.section-header-right {float:right;width:400px}
		.section-header-right-img {border:1px solid #fff; border-radius:10px}	
		.section-header-right-img img {width:100%;height:auto; border-radius:10px}
		.section-header-right-hybrid {padding:10px 8px 8px 8px;margin:20px 0 0 0;color:#272C4E;background:#d7e3e9;border-radius:3px}
		.section-header-right-hybrid p {font-size:13px;line-height:1.4em;text-indent:-9px;padding:0 0 0 20px;margin:0}
		.section-header-right-hybrid .fa-info-circle {margin:0 5px 0 0}
@media screen and (max-width:1280px) { 	
	.wrapping-head {width:95%;padding:2.5%}	
	.section-header-left {width:62.5%}
	.section-header-right {width:35%}
	}	
		
/* AREA CONTENT */		
.section-content { overflow:hidden }
.wrapping-content {overflow:hidden;width:1200px;padding:40px 0;margin:0 auto;}		
	.section-content-left { float:left; width:740px }
	.section-content-left a{ font-weight:500 }
	.section-content-left p { padding:0; margin:5px 0 15px 0 }
	.section-content-left ul {list-style:none; padding:0 0 0 20px; margin:0 0 20px 0;}
	.section-content-left ul li {padding:0 0 5px 0;}
	.section-content-left ul li:before {
		font-family: 'Font Awesome 5 Free';
		font-weight: 900;
		font-size:10px;
		content: "\f00c";
		display: inline-block;
		margin-left: -18px;
		width: 18px;
		}
	.section-content-left ol {list-style:decimal; padding:0 0 0 25px; margin:0 0 20px 0;}
	.section-content-left ol li {padding:0 0 5px 3px;}		
		.training-conditions { margin:10px 0 0 0; background:#DCE7F9}
			.training-conditions-title { padding:30px 20px 0 20px }
				.training-conditions-title h2 { font-size:14px; line-height:1.2em; padding:0; margin:0; color:#034DAD}	
				.training-conditions-title i { font-size:16px; margin-right:5px }
			.training-conditions-content { overflow:hidden; font-size:0.9em; padding:20px; color:#333; line-height:1.3em;  column-count: 2; column-gap: 20px;}
				.training-conditions-content a {color:#034DAD}
				.training-conditions-content ul { padding:0 0 0 15px }
				.training-conditions-content ul li { line-height:1.5em; padding:0 0 5px 0; page-break-inside:avoid }
				.training-conditions-content p { margin:0 0 15px 0 }
				.training-conditions-content ul li:before {
					font-family: 'Font Awesome 5 Free';
					font-weight: 900;
					font-size:8px;
					content: "\f00c";
					display: inline-block;
					margin-left: -15px;
					width: 15px;
					}
				.training-conditions-content-left, .training-conditions-content-right {		
					break-inside: avoid;
					page-break-inside: avoid;
					-webkit-column-break-inside: avoid;
					}						
	.section-content-right {float:right;overflow:hidden;width:400px;margin:0 0 20px 0}				
	.section-content-right-1{padding:0;margin:0;background:#E8E8E8}	
		.section-content-right-head{overflow:hidden;padding:15px 5px 15px 20px;background:#C2570A;color:#fff}
			.status-info{float:left;font-size:0.75em;font-weight:300;color:#fff;line-height:1.4em;}
			.status-icon-scheduled{float:left;font-size:20px;width:20px;height:20px;padding:7px;margin:0 10px 0 0;color:#fff;background:#fbbf10;border-radius:50%;line-height:1em;text-align:center;vertical-align:middle;border:2px solid #fff}			
			.status-icon-running{float:left;font-size:20px;width:20px;height:20px;padding:7px;margin:0 10px 0 0;color:#fff;background:#1e8e3e;border-radius:50%;line-height:1em;text-align:center;vertical-align:middle;border:2px solid #fff}
			.status-icon-expired{float:left;font-size:32px;width:32px;height:32px;margin:0 10px 0 0;color:#fff;background:#c5221f;border-radius:50%;ine-height:1em;text-align:center;vertical-align:middle;border:2px solid #fff}
		.section-content-right-1-inner{padding:20px}		
		.section-content-right-1-section{overflow:hidden;margin:10px 0 20px 0}
			.section-content-right-1-section-icon {float:left;width:35px;height:30px;font-size:30px;padding:5px 1px 1px 1px;margin:0 15px 0 0;color:#C2570A}
			.section-content-right-1-section-icon .fa-calendar-check {margin-left:3px}
			.section-content-right-1-section-text {float:left;width:80%;font-size:15px;line-height:1.2em;padding:1px 0;color:#333}
			.section-content-right-1-section-text span {font-size:13px;color:#444}
			.section-content-right-1-section-text .tag-hari {line-height:1.6em}
			.section-content-right-1-section-text .tag-hari sup{font-size:9px;line-height:1em;padding:1px 6px;border-radius:10px 3px 3px 10px;color:#fff;background:#c5221f;white-space:nowrap;top:-7px}
			.section-content-right-1-section-text .tag-normal {font-weight:bold;line-height:1.4em}
			.section-content-right-1-section-text .tag-promo {font-size:12px;line-height:1.4em;}
			.section-content-right-1-section-text .tag-promo sup{font-size:8px;line-height:1em;padding:2px 5px;border-radius:20px 3px 3px 20px;color:#fff;background:#c5221f}
			.section-content-right-1-section-text .fa-video {font-size:6px;padding:4px;vertical-align:middle;color:#fff;background:#444;border-radius:50%}
				.text-toggle {font-size:12px;line-height:1.6em;margin:2px 0 0 0;cursor:pointer;	}
				.text-toggle span {color:#034DAD}
				.text-toggle span:hover {text-decoration:underline;color:#000}
				.asterisk-note {font-size:10px;font-style:italic;padding:0;margin:0;color:#666}
				.promo-note {font-size:12px;font-weight:500;line-height:1.4em;text-indent:-7px;padding:0;margin:10px 0 0 15px;color:#840000}
				.promo-note .fa-percentage{margin:0 5px 0 0}	
	.section-content-right-2{overflow:hidden;padding:15px 25px;margin:0 0 20px 0;border:1px solid #ddd}			
		.section-content-right-2 p {font-size:13px;line-height:1.5em;text-indent:-10px;padding:0;margin:0 0 0 10px}
		.section-content-right-2 span {font-size:15px;font-weight:600;color:#333}
		.section-content-right-2 a {cursor: pointer;font-weight:500}
		.section-content-right-2 .fa-info-circle {margin-right:2px}		
@media screen and (max-width:1280px) { 
	.wrapping-content {width:95%;padding:2.5%}	
	.section-content-left {width:62.5%}
	.section-content-right {width:35%}
	}	
@media screen and (max-width:1024px) { 	
	.wrapping-content {width:100%;padding:0}	
	.section-content { margin:0 0 20px 0; padding:0 }
		.section-content-left {width:90%;padding:0 5%;margin:0}
		.section-content-right {width:100%;padding:0;margin:0}
			.section-content-right-1{width:100%;margin:0 0 20px 0;}
			.section-content-right-2{width:80%;padding:15px 5%; margin:20px 5%}
		.training-conditions-content { column-count: 1; }		
	}	
@media screen and (max-width:800px) { 
	.section-header-left { width:100% }
	.section-header-right { width:100%; display:none } 
	.section-header-left h1{ font-size: 28px }
	}		
@media screen and (max-width:600px) { 
	.wrapping-head { width:90%; padding:5% }
	.redirect-note .fa-hand-point-down { display:none }	
	.redirect-note p { width:100% }
	}	
	
/* Element toggle id */
#toggle-jadwal{font-size:13px;line-height:1.4em}
#toggle-jadwal-online{font-size:13px;line-height:1.4em}
#toggle-diskon{font-size:13px;line-height:1.4em}
#toggle-diskon-online{font-size:13px;line-height:1.4em}	
	
/* Element show/hide toggle */
.toggle_title h2 { 
	cursor:pointer; 
	display:block; 		
	font-size:16px; 
	font-weight: 700;
	text-transform:uppercase; 
	padding:10px 15px; 
	margin:10px 0 0 0;
	background:#E8E8E8;
	color:#333;
	transition: all 0.2s ease 0s;
	}	
	.toggle_title h2:hover{ background:#CFCFCF}
	.toggle_title h2:before {
		font-family: 'Font Awesome 5 Free'; 
		font-weight: 900; 
		content: '\f07b'; 
		font-size: 14px; 
		color: #333;  
		float: left; 
		margin-right: 10px;
		}
	.toggle_title.active h2:before { 
		font-family: 'Font Awesome 5 Free'; 
		font-weight: 900; 
		content: '\f07c';
		float: left; 
		margin-right: 10px;
		}
	.toggle_title h2:after {
		font-family: 'Font Awesome 5 Free'; 
		font-weight: 900; 
		content: '\f067'; 
		font-size: 16px; 
		color: #333;  
		float: right; 
		margin-right: 10px;
		}
	.toggle_title.active h2:after { 
		font-family: 'Font Awesome 5 Free'; 
		font-weight: 900; 
		content: '\f068';
		float: right; 
		margin-right: 10px;
		}		
.toggle_content {display:none; overflow: hidden; padding:0; margin:0; background:#F5F5F5 }		
.toggle_content.show {display: block; padding:0; margin:0}			
	.toggle_content_boxed { 
		overflow:hidden; 
		font-size:0.9em; 
		line-height:1.6em; 
		padding:15px 35px 20px 15px; 
		}	
		.toggle_content_boxed p { padding:15px 0 5px 20px; margin:0 }	
		.toggle_content_boxed ul { padding:0 0 0 40px; margin:0 }
		.toggle_content_boxed ul li { padding:5px 0 0 0; margin:0 }
		.toggle_content_boxed ul li ul { padding:0 0 0 16px; margin:0 }
		.toggle_content_boxed ul li:before {
			font-family: 'Font Awesome 5 Free';
			font-weight: 900;
			font-size:14px;
			content: "\f0da";
			display: inline-block;
			margin-left: -10px;
			width: 13px;
			}
		.toggle_content_boxed ul li li:before {
			font-family: 'Font Awesome 5 Free';
			font-weight: 900;
			font-size:5px;
			content: "\f111";
			display: inline-block;
			margin-left: -10px;
			vertical-align:top;
			width: 13px;
			}				
		.toggle_content_boxed ol { font-weight:600 }
		.toggle_content_boxed ol li { padding:5px 0 0 5px; margin:0 }
		.toggle_content_boxed ol li ul { font-weight:400; padding:0 0 0 7px; margin:0 }	
		.toggle_content_boxed ol li ul li { padding:5px 0 0 5px; margin:0 }	
		.toggle_content_boxed h3 {
			font-size: 15px; 
			text-transform:uppercase; 
			line-height:1.6em; 
			padding:5px;
			margin:10px 0 0 20px;
			text-indent:-23px;
			color:#444;
			}
		.toggle_content_boxed h3:before {
			float: left; 				
			font-family: 'Font Awesome 5 Free'; 
			font-weight: 900; 
			content: '\f15c'; 
			margin-right: 23px;
			}				
		.toggle_content_boxed h4 {
			font-size: 15px;
			text-transform:capitalize; 
			line-height:1.6em;
			padding:5px;
			margin:0 0 0 20px;
			text-indent:-23px;
			color:#444;
			}
		.toggle_content_boxed h4:before {
			float: left; 
			font-family: 'Font Awesome 5 Free'; 
			font-weight: 900; 
			content: '\f138';
			margin-right: 23px;
			}