@import url(//fonts.googleapis.com/css2?family=Mulish:wght@200;700&display=swap);

html, body{font-family: 'Mulish', sans-serif;padding:0px auto;margin:0px auto;position:relative;height:100%;}
input,text,textarea{outline:none;border-collapse:collapse;border:1px solid #ccc;}
p{font-size:15px;color:#8c8c8c;text-align:justify;line-height:26px;padding:0px;margin:15px 25px;}
a{text-decoration:none;outline:none;}
h3{padding: 0px;margin: 0px;text-align: left;}

#top_panel{background:#03876f;width:100%;text-align:center;padding:0px;position:fixed;z-index:999;}
.top_wrap{background:none;width:1100px;position:relative;}
.header_menu{text-align:right;}.header_menu ul{margin:0px;padding:0px;}
.header_menu li {display:inline-block;}
.header_menu a {display:block;color:#fff;font-size:16px;padding:35px 15px;margin:0px;font-weight:bold;}
.header_menu a:hover{color:ffc600;}
.header_menu > ul > li:hover,li.active > a{color:#ffc600;}
.header_menu li:hover .dropdown{display: block; margin:0;opacity: 1;visibility: visible;}
.parent{position: relative;}
.dropdown {
	position:absolute;
    list-style:none;
    visibility: hidden;
    text-align:left;
	padding:0px;
    background:#0098d1;
	z-index:9999;
}
.dropdown li{display: block;}
.dropdown a {
    display: block;
    padding: 10px 0px 10px 15px;
    color:#fff;font-size:16px;
}
.dropdown li:hover a{text-decoration: none;background:#0379a6;}
#search{position:absolute;right:0;top:0px;border-left:1px solid #0098d1;border-right:1px solid #0098d1;padding:23px 15px;text-align:center;}#search input,text{background:none;border:none;width:100px;color:#fff;font-family:'Exo';font-size:16px;}#search input:focus{color:#444;}

#logo{position:absolute;top:10px;}#logo img{width:auto;height:70px;}

#cover{padding:200px 0px 150px 0px;width:100%;}
#cover div{color:#fff;font-size:60px;padding:20px 0px;width:800px;font-weight: bold;margin: 0px 0px 15px 0px;}
#cover a{padding:15px 40px;border-radius: 50px;background:#ffc600;color: #000;font-size: 24px;font-weight: bold;}#cover a:hover{background: #e6b800;}

#visi span{font-size:40px;font-weight: bold;color: #000;}#visi p{color:#7f8c8d;font-size:24px;text-align:center;margin:0px;padding:0px;line-height:40px;width: 70%;}

#container{width:100%;margin:0px auto;padding:0px auto;background:#eee;}
#container_wrap{padding:60px 0px;position:relative;}
#container_wrap_title{font-size:40px;font-weight: bold;color: #000;}

/*#cardtestimoni{width:330px;height:450px;margin:0px 20px;text-align:center;color:#34495e;box-shadow:2px 2px 5px #bdc3c7;background:#fff;border-radius:5px;}*/
/*#cardtestimoni img {object-fit:cover;object-position:top center;height:160px;width:100%;margin:0px 0px;border-radius:5px 5px 0px 0px;}*/
/*#cardtestimoni img:hover{opacity: 0.70;filter: alpha(opacity=70);}*/
/*#cardtestimoni p,i{font-size:20px;color:#000;padding:0px;margin:0px 20px 0px 20px;font-weight: bold;text-align:left;}*/

#card {width:330px;height:450px;margin:0px 0px;text-align:left;color:#34495e;box-shadow:2px 2px 5px #bdc3c7;background:#fff;border-radius:5px;}
#card img {object-fit:cover;object-position:top center;height:360px;width:100%;margin:0px 0px;border-radius:5px 5px 0px 0px;}
#card img:hover{opacity: 0.70;filter: alpha(opacity=70);}
#card p{font-size:20px;color:#000;padding:0px;margin:0px 20px 0px 20px;font-weight: bold;text-align:left;}


#button{background: #29a329;color:#fff;text-align:center;font-weight:bold;width:90%;font-size:14px;padding:10px 0px;border-radius:50px;margin: 20px 0px 0px 0px;}
#button:hover{background:#1f7a1f;}
#button.selesai{background: #444;}
#button.biru{background: #008ae6;}#button.biru:hover{background: #006bb3;}

#loginframe{padding-top:150px;height: 55%;}
#loginform{
	border-radius:5px;
	width:400px;
	background-color:#fff;border:1px solid #ccc;
	color:#000;font-size:16px;text-align:center;
}
#loginform input,text,select{width:100%;margin:10px 0px 0px 0px;padding:10px;outline:none;font-size:15px;border:1px solid #ccc;text-align:center;}
#loginform input:focus{border:1px solid #2980b9;background:#e4f4fe;}
#loginform #submit{font-weight:bold;cursor:pointer;border:none;border-radius:30px;background:#27ae60;color:#fff;}#loginform #submit:hover{background:#2ecc71;}
#loginform .notes{line-height:24px;padding:5px 0px;} #loginform .notes b{font-size:16px;} 
#loginform .notes a{color:#27ae60;text-decoration:underline;font-size:13px;}#loginform .notes a:hover{text-decoration:none;color:#2ecc71;}

#notif{width:100%;margin:10px 0px;padding:10px 0px;font-size:14px;text-align:center;font-weight:bold;}
#notif a{font-weight:bold;color:#27ae60;text-decoration:underline;}#notif a:hover{text-decoration:none;color:#2ecc71;}

#program{padding:50px 0px 50px 0px;width:1100px;}
#program_cover img{object-fit:cover;object-position:center center;height:350px;width:1100px;}
#program_box{border: 1px solid #ccc;margin: 20px 0px;border-radius: 5px;background: #fff;}#program_box:hover{background: #e6ffff;}
#program_box img{height: 50px;width: auto;margin: 10px 20px;}#program_box a{font-weight: bold;color: #00aaff;}#program_box a:hover{text-decoration: underline;}
#program_box_title{border-bottom: 1px solid #ccc;width: 100%;}

#footer{background:#000;padding:20px 0px;color:#ccc;}
#footer img{height:48px;width:auto;margin:10px 0px 0px 15px;}#footer img:hover{opacity: 0.70;filter: alpha(opacity=70);}
#footer_top{background:#000;padding:30px 0px;margin-bottom:10px;color:#fff;font-size:12px;}
#footer_top a{color:#ccc;font-size:14px;line-height:24px;}
#footer_top span{color:#ccc;font-size:14px;line-height:20px;font-weight:bold;}

#toTop {
    border: 2px solid #00aef0;
	height: 40px;
	width: 40px;
	border-radius: 50%;
	background:none;
    position: fixed;
    bottom: 10px;
    left: 48.5%;
    display: none;
	cursor:pointer;
}
#toTop:hover{background:#00aef0;}
#toTop:hover #arrow{border:2px solid #fff;border-left:none;border-bottom:none;}
#arrow{
	width:10px;height:10px;
	border:2px solid #00aef0;border-left:none;border-bottom:none;
	transform: rotate(315deg);margin:16px 0px 0px 0px;
}

.filter_buttons{
    display: flex;
    align-items: center;
    gap: 20px;
}

/*button{*/
/*    padding: 10px 20px;*/
/*    font-size: 18px;*/
/*    background: #fff;*/
/*    border: none;*/
/*    border-radius: 6px;*/
/*    cursor: pointer;*/
/*    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);*/
/*}*/

/*button.active{*/
/*    background: #03876f;*/
/*    color: #fff;*/
/*}*/

/*.btn {*/
/*  border: none;*/
/*  outline: none;*/
/*  padding: 12px 16px;*/
/*  background-color: #f1f1f1;*/
/*  cursor: pointer;*/
/*}*/

/*.filterable{*/
/*    margin-top: 20px;*/
/*    display: flex;*/
/*    gap: 20px;*/
/*    flex-wrap: wrap;*/
/*    flex-grow: 1;*/
/*}*/

/*.hide{display:none;}*/

/*.testimonials-container {*/
/*    position: relative;*/
/*    height: 220px;*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*}*/

/*.testimonial-card {*/
/*    max-width: 500px;*/
/*    width: 100%;*/
/*    padding: 20px;*/
/*    border-radius: 10px;*/
/*    background: #00A86B;*/
/*    color: #fff;*/
/*    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);*/
/*    opacity: 0;*/
/*    transition: opacity 0.5s ease;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    justify-content: center;*/
/*}*/

/*.testimonial-card.active {*/
/*    opacity: 1;*/
/*}*/

/*.testimonial-card p {*/
/*    font-size: 16px;*/
/*    line-height: 1.5;*/
/*    margin-bottom: 10px;*/
/*}*/

/*.testimonial-card h4 {*/
/*    font-size: 18px;*/
/*    font-weight: bold;*/
/*}*/

/*.tab {*/
/*  overflow: hidden;*/
/*  border: 1px solid #ccc;*/
/*  background-color: #f1f1f1;*/
/*}*/

/* Style the buttons inside the tab */
/*.tab button {*/
/*  background-color: inherit;*/
/*  float: left;*/
/*  border: none;*/
/*  outline: none;*/
/*  cursor: pointer;*/
/*  padding: 14px 16px;*/
/*  transition: 0.3s;*/
/*  font-size: 17px;*/
/*}*/

/* Change background color of buttons on hover */
/*.tab button:hover {*/
/*  background-color: #ddd;*/
/*}*/

/* Create an active/current tablink class */
/*.tab button.active {*/
/*  background-color: #ccc;*/
/*}*/

/* Style the tab content */
/*.tabcontent {*/
/*  display: none;*/
/*  padding: 6px 12px;*/
/*  border: 1px solid #ccc;*/
/*  border-top: none;*/
/*}*/

#tenant {position:relative;background:#21314f;width:100%;height:350px;}
#tenant_logo{position:absolute;top: 50%;left: 50%;transform: translate(-50%, -60%);}
#tenant_logo img{height:auto;width:200px;filter: brightness(0) invert(1);}
#tenant_nav{position:absolute;bottom:15px;text-align:center;left: 50%;transform: translate(-55%);}
#tenant_nav img{height:30px;width:auto;}
#tenant_nav img:hover{opacity:0.50;filter:alpha(opacity=50);}

iframe{width:640px;height:370px;}
#program_kanan{top: 0px;left: 650px;position: absolute;}#program_kanan.kolom{left: 510px;}
#program_kiri img, #program_kanan img{height:350px;width: auto;}
#program_kiri_video {height:1080px;width: auto;}
#kol1{width: 468px; height:300px;} #kol2{width:540px;height:300px;} 

#peserta{margin: 20px;border: none;font-size: 14px;border-collapse: collapse;}
#tabel_judul{background-color:#737373;font-weight:bold;color: #fff;border: 0px;}
#tabel_no{width: 100px;padding: 5px 0px;}#tabel_nama{padding: 5px 0px;width: 900px;}#tabel_ket{width: 80px;padding: 5px 0px;}
#tabel_cell{padding: 5px 0px;border-bottom: 1px solid #ccc;}
#stats{text-align:left;padding:0px;margin:20px 0px 0px 20px;}

.value td{width: 220px;padding: 0px 20px;color: #737373;}
.value img{width:auto;height:120px;margin: 0px 0px 20px 0px;}
.value div{font-weight: bold;font-size: 20px;}

@media only screen and (min-width: 1000px) {.menu_mobile{display:none;}#mobile{display:none;}#sidebar{display:none;}}

@media only screen and (max-width: 1000px) {
	#top_panel{box-shadow:none;padding: 10px 0px;}.top_wrap{background:none;width:95%;position:relative;padding:0px;} .header_menu{display:none;}
	
	/*#search{position:absolute;right:0;top:0px;border:none;border-left:1px solid #0098d1;padding:12px 10px 12px 10px;}*/
	#search{display:none;}#logo{position:absolute;top:3px;left: 3px;}#logo img{width:auto;height:50px;}	
	
	#wrapper{
		position:relative;height:100%;width:100%;right:0px;
		-webkit-transition: right 0.4s ease-in-out;
        -moz-transition: right 0.4s ease-in-out;
        -ms-transition: right 0.4s ease-in-out;
        -o-transition: right 0.4s ease-in-out;
        transition: right 0.4s ease-in-out;
	}
	
	#wrapper.open-sidebar {right:200px;} #wrapper.open-sidebar #sidebar{display:block;}
	#sidebar-toggle {display:block;position:relative;text-align:right;width:35px;padding:20px 10px;float:right;}
	#sidebar-toggle .bar{
	    display: block;float:right;
	    width: 25px;
	    margin-bottom:4px;
	    height:3px;
	    background-color:#fff;
	}
	#sidebar-toggle .bar:last-child{margin-bottom: 0;}
	#sidebar {background:#444;width:200px;height:100%;right:0px;top:0;position:fixed;display:none;}
	#sidebar img{height:20px;margin:0px 8px -3px 0px;}
	#sidebar ul {margin:0;padding:0;list-style:none;text-align:left;}
	#sidebar ul li {margin:0;border-bottom: 1px solid #2a2a2a;}
	#sidebar ul li a {
		padding:18px 0px 16px 30px;
	    font-size: 16px;font-weight:bold;
	    font-weight: 100;
	    color:#fff;
	    text-decoration: none;
	    display: block;	
	}
	#sidebar ul li:hover{background:#bbb;color:#fff;}
	#sidebar ul li.parrent{background:url(images/arrow2.gif) 180px center no-repeat;}
	#sidebar ul li ul li{border:none;}#sidebar ul li  ul li a {font-size:14px;padding:7px 0px 7px 45px;background:url(images/arrow2.gif) 30px center no-repeat;}
	.sidebarsub{background:#ecf0f1;}
	
	#desktop{display:none;}
	#container{width:100%;margin:0px;}	
	#container_wrap{width:90%;padding:0px;padding:20px 0px;}
	#container_wrap_title{font-size:26px;font-weight:bold;margin-top:15px;}
	
	h3{font-size:20px;margin:0px;line-height:24px;margin:0px;}
	
	#cover{padding:150px 0px 100px 0px;width:100%;}#cover div{color:#fff;font-size:26px;padding:10px 0px;width:85%;}
	#cover a{padding:15px 40px;border-radius: 50px;background:#ffc600;color: #000;font-size: 20px;font-weight: bold;}
	#visi{padding: 20px 0px;} #visi span{font-size:26px;}#visi p{font-size:16px;line-height:24px;width: 95%;}

	
	#card {width:100%;height:230px;margin:0px 0px 20px 0px;text-align:left;color:#34495e;box-shadow:2px 2px 5px #bdc3c7;background:#fff;border-radius:5px;}
	#card img {object-fit:cover;object-position:top center;height:150px;width:100%;margin:0px 0px 0px 0px;border-radius:5px 5px 0px 0px;}
	#card img:hover{opacity: 0.70;filter: alpha(opacity=70);}
	#card.hide{display:none;}
	
	/*#cardtestimoni{width:100%;height:300px;margin:0px 0px 20px 0px;text-align:left;color:#34495e;box-shadow:2px 2px 5px #bdc3c7;background:#fff;border-radius:5px;}*/
	/*#cardtestimoni img {object-fit:cover;object-position:top center;height:10px;width:100%;margin:0px 0px 0px 0px;border-radius:5px 5px 0px 0px;}*/
	/*#cardtestimoni img:hover{opacity: 0.70;filter: alpha(opacity=70);}*/

	#left{padding-right:0px;width:90%;}#right{position:relative;right:0px;top:0px;margin-top:30px;border-top:5px solid #ccc;padding-top:30px;}
	#left.isi{width:95%;margin:0px;border-right:none;}#right.isi{width:95%;}
	#left.isi img{width:100%;}
	
	#button{padding:10px 0px;text-align:center;font-weight:bold;width:90%;font-size:14px;padding:10px 0px;border-radius:5px;}
	#button:hover{background:#006bb3;}
	#button.visi{margin-top:30px;}
	
	#footer{background:#000;padding:15px 0px;color:#ccc;}
	#footer img{height:35px;width:auto;margin:5px 5px 0px 5px;}
	
	#toTop {left:44.6%;}

    #loginframe{padding-top:110px;height: 55%;}
    #loginform{width:90%;}
    #submit{margin:30px 0px;}

    #program{padding:80px 0px 50px 0px;width:100%;}
	#program_cover img{height:auto;width:100%;}
	#program_box{border: 1px solid #ccc;margin: 20px 0px;border-radius: 5px;}#program_box:hover{background: #f2f2f2;}
	#program_box img{height: 50px;width: auto;margin: 10px 20px;}#program_box a{font-weight: bold;color: #00aaff;}#program_box a:hover{text-decoration: underline;}
	#program_box_title{border-bottom: 1px solid #ccc;width: 100%;}

	iframe {height:220px;width: 350px;}
	#program_kanan{position:relative;left:0px;top:0px;margin: 0px;padding: 0px;text-align: left;}#program_kanan.kolom{left:0px;}
	#kol1{height:220px;width: 350px;} #kol2{width:350px;height:230px;margin-top: 15px;} 
	#program_kiri img, #program_kanan img{height:auto;width: 300px;}
	#program_kiri_video {height:auto;width: 1920px;}

	#peserta{margin: 10px;font-size: 12px;}
	#tabel_cell span{font-size: 10px;}
	#tabel_no{width: 150px;}#tabel_nama{}
	#stats{font-size: 14px;margin:10px 0px 0px 10px;}
	
	.value_mobile td{color: #737373;text-transform: uppercase;font-weight: bold;font-size: 16px;}
    .value_mobile img{width:auto;height:60px;margin: 20px 20px 20px 0px;}
    .value_m {width:auto;height:60px;margin: 20px 20px 20px 0px;}
}