/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(../font/opensans.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Rhodium Libre';
  font-style: normal;
  font-weight: 400;
  src: local('Rhodium Libre'), local('RhodiumLibre-Regular'), url(../font/rodium.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html{background:#000;}
@media print{
	html{background:#FFFFFF;}
	body *{display:none;}
	body > .cetak,body > .cetak *{display:block !important;}
	body > .cetak{ margin:50px;}
}
body{font-family: 'Open Sans', sans-serif; font-size:16px;text-align:justify; margin:0; background:#FFF;}
.headline{font-family: 'Rhodium Libre', serif; font-size:40px;margin-top:25px; line-height:100%;}
.headline-2{font-family: 'Rhodium Libre', serif; font-size:20px;}
.isi-1{padding:0 15px 0 10px; max-width:1000px; margin:auto;}
.link{color:#006633; text-decoration:underline; cursor:pointer;}
.link:hover{color:#0000CC;}


.w125{width:125px;}
.w150, .w200{width:200px;}
.w250{width:250px;}
.w350{width:350px;}
.w450{width:450px;}
.r20{margin-right:10px;}
.f12{font-size:12px;}
.f14{font-size:14px;}
.f16{font-size:16px;}
.label-tabel{margin-bottom:10px;}

#cont-header,#cont-mini-header,#c-mn0,#c-mn00{max-width:1000px; margin:0 auto; display:flex; -webkit-display:flex; flex-direction:row; -webkit-flex-direction:row; color:white; font-family:'Rhodium Libre';}
#cont-header .mn0{ border:2px solid #FFF; padding:15px 4px; margin:20px 5px; border-radius:5px; -webkit-border-radius:5px;}
#cont-mini-header .mn0{ border:2px solid transparent; padding:4px 4px; margin:2px 5px; }
.login{border:2px solid transparent !important; margin-left:auto !important;}
.mn{cursor:pointer;}
.mn:hover{text-decoration:underline;}
#cont-mini-header {padding-right:15px;}
#seg-header{height:100px; background:rgba(26,146,87,1);}
#seg-footer{background:rgba(150,150,150,1); margin-top:40px; color:#FFF; font-size:12px;}
#seg-body{min-height:calc(100vh - 360px);}
#stp-cont{ max-width:1000px; margin:auto; padding:10px;}
#logo{width:120px; height:100px; background:#CFCFCF; background:url("../img/logo_0.png") center no-repeat #F9F9BF; margin-right:25px;}
#miniheader #logo{background:#CFCFCF; background:url("../img/logo_1.png") center no-repeat; background-size:contain;height:40px;}
#c-mn0,#c-mn00{margin-left:0 !important; margin-top:auto; margin-bottom:auto;}

#miniheader{height:40px; background:rgba(26,146,87,1); -webkit-transition: all .3s linear 0s;  transition: all .3s linear 0s;position:fixed; top:-50px; width:100vw; opacity:0;}
.minishow{top:0 !important; opacity:1 !important;}

.mn0.aktif{background:#FFFFFF; color:#000000; border:2px solid transparent !important;}

#mikroheader{display:none;}
#mikroheader #logo{height:34px; width:40px; position:fixed; top:0; left:0; background:rgba(26,146,87,1); padding:2px; cursor:pointer;}
#mikroheader #logo span,#mikroheader #logo:before,#mikroheader #logo:after{background:#fff; height:2px; content:''; width:calc(100% - 12px); display:block; position:relative; margin:7px;}
#mikrotitle{height:38px; width:100%; position:fixed; top:0; left:44px;background:rgba(26,146,87,1) url(../img/logo_0.png) center right no-repeat; display:flex; align-items:center; color:#FFF; overflow:hidden; background-size:contain; background-position-x:calc(100% - 46px);}

.isi-1>ul,.isi-1>ol{padding:5px 5px 5px 15px; margin:5px;}
.isi-1>ul>li,.isi-1>ol>li{padding-bottom:15px;}
.isi-1>ul>li>ul,.isi-1>ol>li>ol{padding-left:25px;}

.maxw-600{max-width:600px; margin:auto;}
.maxw-780{max-width:780px; margin:auto;}

.baris-ket{padding:10px 0; display:flex;-webkit-display:flex; flex-wrap:wrap;}
.skedul-name{min-width:200px;flex-grow:1;}
.skedul-ket{min-width:170px; text-align:right;flex-grow:1; font-weight:bold; font-size:17px;}
.skedul-link{min-width:50px; text-align:right;flex-grow:1; font-style:italic; text-decoration:none; color:rgba(26,146,87,1);}

.kontak{min-width:135px; margin:5px 10px 5px 0; padding:5px 0 5px 35px;}
.kontak.telpon{background:url("../img/telp.png") center left no-repeat;}
.kontak.sms{background:url("../img/sms.png") center left no-repeat;}
.bulat{height:32px; width:32px; display:inline-block; }
.bulat.telegram{background:url("../img/tele.png") center no-repeat;background-size:cover;}
.bulat.whatsapp{background:url("../img/wa.png") center no-repeat;background-size:cover;}
.bulat.facebook{background:url("../img/fb.png") center no-repeat;background-size:cover;}
.bulat.twitter{background:url("../img/twitter.png") center no-repeat;background-size:cover;}
.bulat.instagram{background:url("../img/instagram.png") center no-repeat;background-size:cover;}

/*input-group*/
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button,.input select {-webkit-appearance: none; margin: 0;}
input[type=number],.input select{-moz-appearance: textfield; margin: 0;}
.input-group{margin-bottom:10px; display:flex; -webkit-display:flex; flex-wrap:wrap;-webkit-flex-wrap:wrap; flex-direction:column;}
.input-group.r{flex-direction:row; align-items:center; max-width:560px; margin:auto;padding:10px 20px;}
.input-group label{color:#006666; font-size:14px; display:block;  min-width:150px; max-width:400px;}
.input-group .input,.input-group .input-x{border:none; border-bottom:2px solid #006666; padding:4px; font-family:'Open Sans', sans-serif; font-size:16px; min-height:24px;}
.input-group .input-x:before{content:":"; padding:0 7px 0 4px;}
.input-group .input-x{border-bottom:none !important;}
.w480 .input-group.r{max-width:400px !important;}	
div.input {display:flex; frex-wrap:wrap;}
div.input select{border:none; background:none;font-size:16px; flex-grow:0;}
div.input select:last-child{flex-grow:1;}
/*end of input-group*/

/*step proses*/
	#c-step{padding:10px; background-color:#EEEEEE; margin:10px auto; max-width:980px;}
	#step{width:80%; height:10px; border:2px solid #333; border-radius:25px;margin:auto; overflow:hidden;background: rgb(214,213,207);background: linear-gradient(0deg, rgba(214,213,207,1) 4%, rgba(221,220,216,1) 86%, rgba(167,166,163,1) 97%);}
	#proses{height:100%; border:none;background: rgb(2,0,36);background: linear-gradient(0deg, rgba(2,0,36,1) 1%, rgba(9,9,121,1) 8%, rgba(0,212,255,1) 92%);}
	#c-step{text-align:center;}
	.s-label{font-size:12px; color:#666666;}
	.proses-name{font-size:16px; font-weight:bold;}
/*end step proses*/

.btn{cursor:pointer;}
.btn-hijau{border:2px solid #006666; padding:10px; background:#FFF; color:#006666;border-radius:5px;-webkit-border-radius:5px;}
.btn-merah{border:2px solid #CC0000; padding:10px; background:#FFF; color:#CC0000;border-radius:5px;-webkit-border-radius:5px;}
.btn-ditangah{margin:0 auto;}
.btn-dikanan{margin:0 0 0 auto;}
.btn-hijau:hover{background:rgba(0,102,102,1); color:#FFFFFF;}
.btn-merah:hover{background:rgba(255,204,204,1); color:#660000;}
.btn-hijau:active{border:2px solid #FFFFFF; color:#FFFFFF;background:#006666;}
.btn-merah:active{border:2px solid #FFFFFF; color:#FFFFFF;background:#CC0000;}
.btn-inline{margin:0 25px; padding:5px 15px !important;}

/*alert*/
#alert-cont{position:fixed; top:10vh; width:calc(100% - 0px); z-index:999; background:transparent; left:0px; background:#C00;}
#alert-cont > div{max-width:1000px;margin:0px auto; padding:4px; background:#C00;}
#alert-body{padding:4px 14px;}
#alert-body:before{display:inline-block; position:relative; height:20px; width:20px;border:1px solid #FFF;content:'x'; color:#FFF; border-radius:22px;-webkit-border-radius:22px; text-align:center; float:right;cursor:pointer; font-family:"Courier New", Courier, monospace;font-size: 16px !important;}
#alert-msg{color:#FFF; margin:0 30px 0 0 ; text-align:center; font-weight:bold;}
.alerthide{top:-200px !important;  -webkit-transition: top 1.3s linear 0s;  transition: top 1.3s linear 0s;}
/* end of alert */

.h-alert,.h-info,.h-sukses{padding:10px; padding-right:40px; font-weight:bold; border-top-right-radius:20px; border-bottom-right-radius:20px;}
.v-alert,.v-info,.v-sukses{padding:10px;}
.h-alert{background:url(../img/alert.svg) center right no-repeat #993300; color:#FFFFFF;}
.h-info{background:url(../img/info.svg) center right no-repeat #006666; color:#FFFFFF;}
.h-sukses{background:url(../img/sukses.svg) center right no-repeat #0066CC; color:#FFFFFF;}



/*modal*/
#overlay {position:fixed; top:0;left:0;width:100vw;height:100vh;background:#000;opacity:0.5;filter:alpha(opacity=50);z-index:988;}
#modal {position:absolute;background:rgba(0,0,0,0.2);border-radius:14px;padding:8px;z-index:989;}
#mcontent {border-radius:8px;background:#FFFFFF;color:#000000;padding:20px;padding-top:40px;}
#close{position:absolute;background:red; background-size:cover;width:27px;height:27px;display:block;text-indent:-9999px;top:-5px;right:-5px; border-radius:15px; -webkit-border-radius:15px;}
#close span:before,#close span:after{background:#fff; height:2px; content:''; width:calc(100% - 12px); display:block; position:relative; margin:7px; position:absolute; top:5px; left:-1px; transform:rotate(45deg);-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);}
#close span:after{-webkit-transform:rotate(315deg);-ms-transform:rotate(315deg);transform:rotate(315deg);}
#close:before{position:absolute;width:36px;height:36px;display:block;text-indent:-9999px;top:-5px;right:-5px; content:'';border-radius: 30px;-webkit-border-radius: 30px;z-index: -99;background: rgba(0,0,0,0.3);}
/*end of modal*/


/*loader*/
#div-loader{position:fixed; top:0; left:0; width:100%; height:100%; z-index:1000}
#loader{content:""; display:block; position:relative; left:50%; top:50%; width:150px; height:150px; margin:-75px 0 0 -75px; border-radius:50%; border:3px solid transparent; border-top-color:#3498db; 
  -webkit-animation:spin 2s linear infinite; animation:spin 2s linear infinite;}
#loader:before{content:""; position:absolute; top:5px; left:5px; right:5px; bottom:5px; border-radius:50%; border:3px solid transparent; border-left-color:#e74c3c; 
  -webkit-animation:spin 3s linear infinite; animation:spin 3s linear infinite;}
#loader:after{content:""; position:absolute; top:15px; left:15px; right:15px; bottom:15px; border-radius:50%; border:3px solid transparent; border-right-color:#f9c922; 
  -webkit-animation:spin 1.5s linear infinite; animation:spin 1.5s linear infinite;}
@-webkit-keyframes spin {
 0%{-webkit-transform:rotate(0); -ms-transform:rotate(0); transform:rotate(0) }
 100%{-webkit-transform:rotate(360deg); -ms-transform:rotate(360deg); transform:rotate(360deg) }
}
@keyframes spin {
 0%{-webkit-transform:rotate(0); -ms-transform:rotate(0); transform:rotate(0) }
 100%{-webkit-transform:rotate(360deg); -ms-transform:rotate(360deg); transform:rotate(360deg) }
}
.mr-loader{position:absolute; top:30%; left:38%; border:16px solid #f3f3f3; border-radius:50%; border-top:16px solid #3498db; width:100px; height:100px;
  -webkit-animation:spinner 2s linear infinite; animation:spinner 2s linear infinite}
@-webkit-keyframes spinner{
 0% { -webkit-transform:rotate(0); -o-transform:rotate(0); -moz-transform:rotate(0); -ms-transform:rotate(0); transform:rotate(0) }
 100% { -webkit-transform:rotate(360deg); -o-transform:rotate(360deg); -moz-transform:rotate(360deg); -ms-transform:rotate(360deg); transform:rotate(360deg) }
}
@keyframes spinner{
 0% { -webkit-transform:rotate(0); -o-transform:rotate(0); -moz-transform:rotate(0); -ms-transform:rotate(0); transform:rotate(0) }
 100% { -webkit-transform:rotate(360deg); -o-transform:rotate(360deg); -moz-transform:rotate(360deg); -ms-transform:rotate(360deg); transform:rotate(360deg) }
}
/* end of loader */

@media only screen and (max-width: 600px){
  #seg-header{height:1px;}
  #bigheader, #miniheader{display:none;}
  body{margin-top:38px;}
  #mikroheader{display:block;}
  #view:before{display:block; height:80vw; content:''; background:url('../img/view-4.jpg'); background-size:cover; padding-top:60vw; font-size:30px; color:#FFF; text-align:center; background-position:bottom; white-space:pre;}
  #ddmn{position:fixed; top:0; width:100vw; height:100vh; background:rgba(0,0,0,0); z-index:999; -webkit-transition: all .3s linear 0s;  transition: all .3s linear 0s; overflow:hidden;}
  #ddmn ul{background:rgba(26,146,87,1); width:200px; margin:38px 4px 0 4px; list-style:none; color:#FFF; padding:5px; position:relative;}
  #ddmn ul li{padding:8px 8px 8px 24px; border-bottom:1px solid #066; margin-left:5px;}
  .baris-ket,.skedul-name,.skedul-ket,.skedul-link{display:block; text-align:center;}
  
}
@media only screen and (max-width: 485px){
	.input-group.r{padding:10px 20px;}
	.input-group.r .input{width:100%;}
	.input-group.r .input-x:before{display:none;}
	.input-group.r .input-x{width:100%; border-bottom:1px solid #EEE !important;}
	.w125{width:calc(100% - 80px) !important;}
	.btn-inline{margin:auto;}
}

#cf-login .h-info{background: url(../img/kunci.png) center right no-repeat #006666;}

/* add on */
input[type=file]{display:none;}	
.gal	{
		display:flex;
		flex-direction:row; 
		align-items:center; 
		align-content:center;
		flex-wrap:wrap; 
		justify-content:center;
		
		-webkit-display:flex; 
		-webkit-flex-direction:row; 
		-webkit-align-items:center; 
		-webkit-align-content:center; 
		-webkit-flex-wrap:wrap;
		-webkit-justify-content:center;

		}
.c-gal{
		display:flex;
		-webkit-display:flex; 
		align-items:center; 
		flex-direction:column; 
		margin:5px;
		flex-wrap:wrap; 
		}
.p-gal{width:120px; height:160px; border: 6px solid #FFF; outline: 1px solid #000; background-size:contain !important; background-repeat:no-repeat!important; background-position:center !important;}
.c-gal>label{text-decoration:none !important; padding:10px 0;}
.ch-gal{width:100% !important; text-align:center; margin-top:10px; padding:5px; background:#FFDC73; font-weight:bold; border-top:5px solid #066;}
.rm{padding:10px 0; background:#EEE; width:100% !important; text-align:center; border:1px solid #000;}
.mini{font-size:12px !important; font-weight:normal !important; display:block;}
.add-gal{cursor:pointer;}