/* GLOBAL ARCHIVE RULE */
* { 
	box-sizing: border-box; 
}
.tab button {
	margin-right:0;
	margin-left:10px;	
	}
.tab button.active {
	color:#333;
	background-color: #fff;	
	}
/* Wrapping style */
.wrapping-archive-head { overflow:hidden; color:#fff; background:linear-gradient(to right, #034DAD, #2b6ed1) }
.wrapping-archive-body { overflow:hidden; padding:0; margin:0; }
.wrapping-archive-body-column {overflow:hidden; padding:0; margin:0 }
.wrapping-archive-body-topbar { overflow:hidden; padding:0; margin:0 }
/*Head style */
.archive-head { overflow:hidden; padding:80px 0}
	.archive-head-title {overflow:hidden; float:left; width:50%; height:auto; padding:0; margin:0; }
	.archive-head-title h1 { font-size:30px; font-weight:700; text-transform:uppercase; line-height:1; padding:0; margin:0 0 40px 0; color:#fff; }
		.archive-head-title-excerpt p {
			float:left;
			width:85%;
			font-style:italic;
			line-height:1.4em;
			margin:0;
			}
		.archive-head-title-excerpt .fa-check-circle {
			float:left;
			font-size:24px;
			text-align:center;
			margin:3px 10px 3px 0;
			color:#fff;
			}			
	.archive-head-image { float:right; width:45% }	
		.archive-head-image-column {column-count:3; column-gap:20px; padding:3px;}
			.image-square{ width:98%; margin:0 0 20px 0;}
			.image-square img{ width:100%; height:auto; border:2px solid #fff; border-radius:10px}	
	@media screen and (max-width:1280px){ .archive-head { padding:80px 60px } }
	@media screen and (max-width:1024px){ .archive-head { padding:60px 40px } .archive-head-title, .archive-head-image {width:50%; } }
	@media screen and ( max-width:781px ) {	.archive-head { padding:40px 20px }.archive-head-title {width:100%; } .archive-head-title h1 { font-size:24px; margin:0 0 20px } }
/* Body style */	
.archive-body { overflow:hidden; padding:20px 0 }
	.archive-body-column { overflow:hidden; column-count:4; column-gap:20px; padding:3px }
	.archive-body-card {
		margin:0 0 20px 0;
		background:#fff;
		border-radius:5px;
		box-shadow: 0 0 3px 0 #bbb;
		break-inside: avoid;
		page-break-inside: avoid;
		-webkit-column-break-inside: avoid;
		}
	@media screen and ( max-width:1280px ) { .archive-body { padding:20px } }	
	@media screen and ( max-width:1024px ) { .archive-body-column { column-count:3 } }		
	@media screen and ( max-width:781px ) { .archive-body-column {column-count:2 } }
	@media screen and ( max-width:480px ) {	.archive-body-column { column-count:1 } .archive-body-card { margin: 0 0 30px 0 } }	
/* Menu style */	
.topbar-menu { float:right; width:515px; padding:0; margin:0 0 10px 0; }
	.postform {
		padding: 10px 40px 10px 15px;
		margin: 0;
		border-radius: 3px;
		background: #fff;
		width: 100%;
		border: 1px solid #ccc;
		cursor: pointer;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
		background-repeat: no-repeat;
		background-position: calc(100% - 15px) center;
		background-size: 14px;
		}
		.level-0 { cursor: pointer }
	#category-select{float:left; width:250px;margin-right:5px}
	#location-select{float:left; width:250px;margin-right:5px}	
.topbar-title {float:left; width:440px;}	
	.topbar-title h3 {font-size:16px; font-weight: 400; margin:10px 5px 5px 5px; color:#333}
	.topbar-title h3 [class*="fa-folder-open"] {
		font-size: 14px;
		margin-right: 5px;
		}
	@media screen and ( max-width:1024px ) {
	.topbar-title, .topbar-menu {width:100%;margin:0}
	#category-select, #location-select {width:100%;margin:0 0 10px 0}
	}	
/* Location layout */	
.boxed-archive-unit-thumb {position:relative; width:100%; height:auto; }
.boxed-archive-unit-thumb img {width:100%;border-radius:5px 5px 0 0;}
	.thumb-note-status {
		position:absolute;
		display:block;
		top:10px;
		left:10px;
		font-size:8px;
		line-height:1em;
		margin:0;
		padding:6px 7px 4px 5px;		
		border:1px solid #ccc;
		border-radius:10px;
		background-color:#12873B;
		color:#fff;	
		opacity:1;
		}				
	.boxed-archive-unit-text-sup-expand {overflow:hidden;min-height:90px;padding:0;margin:0 0 10px 0}
	.boxed-archive-unit-text-sub-shorten {overflow:hidden;min-height:40px;font-size:0.8em;padding:10px 0 0 0; border-top:1px solid #ddd; color:#666}			
	.archive-element-place .fa-map-marker-alt {font-size:10px;margin-right:10px;color:#999}
	.archive-element-place .fa-calendar {font-size:10px;margin-right:8px;color:#999}
	.archive-element-place .fa-calendar-check {font-size:10px;margin-right:8px;color:#999}
	.archive-element-place .fa-hand-holding-usd {font-size:10px;margin-right:6px;color:#999}		
	@media screen and ( max-width:480px ) {	.boxed-archive-unit-text-sup-expand,.boxed-archive-unit-text-sub-shorten { min-height:0 } }
	
/* ARCHIVE PROGRAM LAYOUT */	
/* Program header */
.program-head-area { overflow:hidden; padding:80px 0}
	.program-head-body {overflow:hidden; float:left; width:50%; height:auto; padding:0; margin:0 0 20px 0; }
		.program-head-body h1 { font-size:30px; font-weight:700; text-transform:uppercase; line-height:1; padding:0; margin:0 0 40px 0; color:#fff; }
		.program-head-body h3 { font-size:28px; font-weight:100; line-height:1; padding:0; margin:0; color:#fff; }
		.program-head-excerpt p {
			float:left;
			width:85%;
			font-style:italic;
			line-height:1.4em;
			margin:0 0 30px 0;
			}
		.program-head-excerpt .fa-check-circle {
			float:left;
			font-size:24px;
			text-align:center;
			margin:3px 10px 3px 0;
			color:#fff;
			}			
	.program-head-image { float:right; width:45% }	
		.program-head-image-box {column-count:3; column-gap:20px; padding:3px;}
			.image-box{ width:98%; margin:0 0 20px 0;}
			.image-box img{ width:100%; height:auto; border:2px solid #fff; border-radius:10px}	
@media screen and (max-width:1280px){ .program-head-area { padding:80px 60px} }
@media screen and (max-width:1024px){ .program-head-image { width:50%; } .program-head-image-box { column-count:2 } .tablet {display:none} }
@media screen and (max-width:781px){ .program-head-area { padding:40px 20px 0 20px } .program-head-body, .program-head-image {float:none; width:100%; } }

/* Program body */
.archive-program{ overflow:hidden; padding:20px 0 0 0; column-count: 3; column-gap: 20px; }
	.archive-program h1{font-size:14px;font-weight:700;}
	.archive-program h2{font-size:16px;font-weight:700;text-transform:uppercase;margin:15px 0;color:#034496}
	.archive-program a{text-decoration:none;color:#034EAF}
	.archive-program-boxed {	
		overflow:hidden;
		font-size:15px;
		padding:10px 20px 20px 20px;
		margin:0 0 20px 0;
		border: 1px solid #90aeda;
		border-radius:10px;
		background-color: #d2e3fc;
		break-inside: avoid-column;
		}
	.archive-program-boxed:hover{background-color: #BBD5FC}
	.archive-program-boxed ul {padding:0;margin:0 20px 10px 20px;line-height:1.4em}
	.archive-program-boxed ul li {padding:0 0 10px 0}
	.archive-program-boxed-nav {font-weight:600;text-align:right}
@media screen and (max-width:1280px){ .archive-program {width:90%;margin:0 5%} }
@media screen and (max-width:1024px){ .archive-program {column-count: 2;} }
@media screen and (max-width:781px){ .archive-program {column-count: 1;} }

/* ARCHIVE BLOG LAYOUT */
.background-body { border-top:1px solid #ddd}
.archive-blog {padding:5% 0}	
.archive-blog h1 { font-size:20px; font-weight:700; line-height:1em; color:#333 }
.archive-blog h2 { font-size:16px }
	.archive-blog-title { overflow:hidden; text-align:center; margin:0 0 40px 0 }		
.metadata-entry{overflow:hidden;margin:10px 0 0 0;color:#666;}
	.metadata-entry a{color:#333;}
	.metadata-entry a:hover{color:#CD0000;text-decoration:none}
	.metadata-entry-img{float:left;width:30px;height:30px;border:1px solid #ccc;-moz-border-radius:50%;border-radius:50%;margin:0 7px 0 0;background:#eee}
	.metadata-entry-img img{-moz-border-radius:50%;border-radius:50%}
	.metadata-entry-text{float:left;padding:3px 0;width:200px}
	.metadata-entry-text-author{font-size:13px;line-height:1em;color:#333}
	.metadata-entry-text-description{font-size:10px;line-height:2em;color:#333}
	.metadata-entry-share{float:right;text-align:right;margin:5px 0;}			
.content-featured{overflow:hidden;padding:3px}
	.content-featured-left{float:left;width:40.5%}
		.featured-left-box {
			overflow:hidden;
			margin:0 2px 20px 2px;
			background:#fff;
			border-radius:3px;
			box-shadow: 0 0 1px 0 #333333;
			break-inside:avoid-column;
			-webkit-backface-visibility:hidden;
			-webkit-transform: translateZ(0);
			}
			.featured-left-box a:hover{text-decoration:none}				
			.featured-left-box-thumb{width:100%; height:auto; }
				.featured-left-box-thumb img{width:100%;border-radius:3px 3px 0 0;}
			.featured-left-box-text{overflow:hidden;padding:20px}
				.featured-left-box-text-title {overflow:hidden;min-height:325px}
				.featured-left-box-text-title h2 {font-size:24px}
				.featured-left-box-text-title p {line-height:1.6em; margin:20px 0 0 0}				
	.content-featured-right{float:right;width:58%;column-count:2; column-gap:20px;}
		.featured-right-box-thumb{width:100%; height:auto; }
			.featured-right-box-thumb img{width:100%;border-radius:3px 3px 0 0;}		
		.featured-right-box-text{overflow:hidden;padding:15px}
			.featured-right-box-text-title{overflow:hidden;min-height:85px}			
.content-stories{overflow:hidden; margin:20px 0}
	.content-stories-title {
		font-size:16px;
		font-weight:700;
		text-transform:uppercase;
		line-height:1em;
		border-left:15px solid #009fe9;
		padding:2px 0 0 5px;
		margin:0 5px 20px 5px;
		color:#333;
		}
	.content-stories-column{overflow:hidden; column-count:3; column-gap:20px; padding:3px; margin:0}
	.stories-box {
		overflow:hidden;
		position:relative;
		height:auto;
		background:#ffffff;
		border-radius:3px;
		box-shadow: 0 0 1px 0 #333;
		margin:0 0 20px 0;
		break-inside: avoid;
		page-break-inside: avoid;
		-webkit-column-break-inside: avoid;
		}		
		.stories-box a:hover{text-decoration:none}	
		.stories-box-thumb{width:100%; height:auto; }
			.stories-box-thumb img{width:100%;border-radius:3px 3px 0 0;}
		.stories-box-text{overflow:hidden;padding:15px}
			.stories-box-text-title{overflow:hidden;min-height:85px}			
@media screen and (max-width:1280px){
	.archive-blog {padding:40px 20px}
	}
@media screen and (max-width:1024px){
	.content-featured-left,.content-featured-right {width:100%}
	.featured-left-box-thumb{float:left;width:45%}
	.featured-left-box-text{float:right;width:50%} /* Perbaikan typo float:right:width */
	.featured-left-box-text-title{min-height:0;padding:0;margin:0}
	.featured-left-box-text-title p{margin:10px 0}
	.featured-right-box-thumb img{height:auto}
	.content-stories-column{column-count:3}
	.featured-left-box-text-title h2 {font-size:20px}	
	}
@media screen and (max-width:800px){
	.featured-left-box-thumb {float:none;width:100%}
	.featured-left-box-text {float:none;width:90%;padding:5%}
	.content-stories-column{column-count:2}
	.featured-left-box-text-title h2 {font-size:18px}
	}
@media screen and (max-width:480px){
	.content-featured-left,.content-featured-right{width:100%}
	.content-featured-right,.content-stories-column{column-count:1;}
	.featured-left-box-text-title{padding:0 0 10px 0;margin:0 0 10px 0}
	.featured-left-box-text-title,.featured-right-box-text-title,.stories-box-text-title{min-height:0;height:auto}
	.featured-left-box-text-title h2 {font-size:16px}	
	}
	
/* ARCHIVE LOCATION */
.archive-location { padding:40px 0;}
.archive-location .fa-video { font-size:10px; color:#999 }
.archive-location .archive-location-title h1 {
    font-size: 16px;
    font-weight: 700;
    font-style: italic;
    text-transform: uppercase;
    line-height: 1.1;
}
.archive-location .archive-location-title {
    padding-left: 40px;
    margin-bottom: 20px;
    position: relative;
}	
.archive-location .archive-location-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 100%;
    border-radius: 3px;
    background-color: #1A73E8;
    transform: skewX(-20deg);
    transform-origin: bottom left;
}

.nav-list {
	justify-content: center;
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    }
    .nav-list li {
        background-color: #f0f0f0;
        border: 1px solid #b0b0b0;
        border-radius: 15px;
        padding: 5px 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background-color 0.2s ease, border-color 0.2s ease;
		}
    .nav-list li, 
	.nav-list li a {
		color: #333;
		text-decoration: none;
		font-size: 12px;
		}
        .nav-list li:has(a):hover {
            background-color: #e0e0e0;
            border-color: #909090;
            cursor: pointer;
        }
        .nav-list li:has(a):active {
            background-color: #707070;
            border-color: #505050;
            transform: scale(0.98);
        }
        .nav-list li a {
            display: block;
            width: 100%;
            height: 100%;
        }

/* ARCHIVE TAGS */
.wrapper-tag{overflow:hidden;width:1200px;margin:2.5% auto}
.content-tag{overflow:hidden}
	.content-tag h1{font-size:20px;font-weight:700;letter-spacing:-1px;text-transform:uppercase;margin:0 0 20px 0}
	.content-tag-list {	font-size:15px }
	.content-tag-list ul{column-count: 4; column-gap: 20px;margin: 0; padding: 0; }
	.content-tag-list ul li {list-style-type: none; line-height:1.2em; padding:0; margin:0 0 5px 0}
	.content-tag-list span {font-size:12px;font-style:italic;color:#666 }
	@media screen and (max-width:1280px){ .wrapper-tag{width:90%;margin:5%}.content-tag-list ul{column-count: 3;}}
	@media screen and (max-width:781px){.content-tag-list ul{column-count: 2;}}
	@media screen and (max-width:480px){.content-tag-list ul{column-count: 1;}}
	
#myInput {
  width: 100%;
  font-family: Poppins, sans-serif;
  font-size:16px;
  padding: 15px 20px;
  border: 1px solid #999;
  margin-bottom: 12px;
}

#myUL {
  padding: 0;
  margin: 0;
}

#myUL li a {
  border: 1px solid #ddd;
  margin-top: -1px;
  background-color: #f6f6f6;
  padding: 12px;
  text-decoration: none;
  color: black;
  display: block;
  break-inside: avoid-column; 
}

#myUL li a:hover:not(.header) {
  background-color: #eee;
}

/* SEARCH CSS */ 
.trainer-profile { float:left; overflow:hidden; width:260px; margin:0 0 10px 0; }
	.trainer-profile-avatar img {float:left; width:30px; height:30px; border-radius:50%; margin:0 10px 0 0;}
	.trainer-profile-text { float:left }
		.trainer-profile-text-1 { font-size:12px; font-weight:500; line-height:1.6em; padding:0; margin-top:-2px }
		.trainer-profile-text-2 { font-size:10px; font-weight:300; line-height:1.2em }
.empty-page{min-height:600px}				
.workshop-status {
	display:block;
	width:75px;
	font-size: 9px;
	font-weight:600;
	text-transform:uppercase;
	line-height:1;
	padding:5px 7px;
	margin:0 0 10px 0;
	background-color: #12873B;
	color:#fff;
	border-radius:10px;
	}
	.workshop-status .fa-check {margin-right:3px}
/* Layout */
.search-content {overflow:hidden;margin:20px 0;}
	.search-content a {text-decoration:none;font-weight:normal;color:#333}	
	.search-content h1 {font-size:24px;margin:10px 0;padding:0}
	.search-content-inner {padding:10px}	
.search-boxed { overflow:hidden; padding:20px 20px 0 20px }
	.search-boxed-left { float:left;width:30%;margin-bottom:20px}	
	.search-boxed-right { float:right;width:70%;margin-bottom:40px}	
.result-head {margin-bottom:10px;}	
.result-box { position: relative; overflow:hidden; padding:20px; margin:0 0 20px 0; border-radius:10px; box-shadow: 0 0 10px 0 #ccc; background-color:#fff}		
	.result-box-left {float:left; width:150px; margin:0 20px 0 0;}
	.result-box-left img {width:100%;height:auto;border-radius:10px}	
	.result-box-right {overflow:hidden; float:left; width:960px}
		.result-box-content {float:left; width:660px; margin:0 40px 0 0;}	
			.result-box-content p { font-size:15px; font-weight:normal; line-height:1.6em; padding:0; margin:0 0 10px 0 }
			.result-box-content h2 {font-size:18px;color:#034DAD}
			.result-box-content h3 {float:left; font-size:13px; font-weight:500; margin: 0 30px 0 0; color:#000}
			.result-box-content h3 sup {color:green}
			.result-box-content .fa-user-friends{font-size:10px;margin-right:5px; color:#333}
			.result-box-content .fa-video{font-size:10px;margin-right:5px; color:#333}
			.result-box-content .fa-exclamation-triangle {font-size:10px;margin-right:5px; color:#333}
		.result-box-detail {float:left; width:260px; margin:0;}	
			.result-box-detail p {font-size:10px; font-weight:600; margin-bottom:5px;}	
@media screen and (max-width:1280px){
	.search-content {margin:20px 10px}
	.result-box-left {width:10%;margin:0 2% 0 0}
	.result-box-right {width:88%}
	.result-box-content {width:68%; margin:0 2% 0 0;}
	.result-box-detail {width:30%; margin:0;}	
	.result-box-content p {display:none}
	.result-box-content h2 {margin:0 0 5px 0}
	.pilihan-kelas {width:300px}
	}
@media screen and (max-width:1024px){
	.result-box-left {width:18%;margin:0 2% 0 0}
	.result-box-right {width:80%}
	}	
@media screen and (max-width:781px){
	.result-box-content {width:100%}
	.result-box-content h2 {font-size:16px;}
	.result-box-left {width:28%;}
	.result-box-right {width:70%}	
	.result-box-detail {display:none}
	.search-boxed-left,.search-boxed-right { float:none; width:100%}	
	.search-boxed-left {text-align:center}
	}	
@media screen and (max-width:480px){
	.search-content {margin:0 10px}
	.search-boxed-left { margin-bottom:10px}	
	.search-boxed-right { margin-bottom:20px}		
	.result-box-left {width:100%;margin:0 0 20px 0}
	.result-box-right {width:100%}
	}