@charset "utf-8";

body{ border:none; padding:0; margin:0; font-family:Verdana, Geneva, sans-serif; font-size:10px;}
#hr1{ border:1px solid black;}
#hr2{ border:2px solid black;}

#header{width:100%; height:150px; background:red;}
#logo{width:10%; height:70%; background:url(../img/logo.png); background-size:100% 100%; float:left; margin:2%;}
#logokop{width:10%; height:70%; background:url(../img/logokop.png); background-size:100% 100%; float:left; margin:2%;}
#logo2{width:10%; height:80px; background:url(../img/logo.png); background-size:100% 100%; float: none; position:absolute; z-index:999; right:2%;}

#tagline{ width:86%; height:100%; float:left; font-size:3EM;}
#tagline2{ width:94%; height:auto; background:none; float:left; color:#fff; padding:2% 3% 2% 3%}
#tagline3{ width:94%; height:auto; background:#fff; float:left; font-size:12px; padding:0% 3% 0% 3%}


#frmcv{ width:100%; height:auto; background:#fff; position:relative;}
#canvastop{width:31%; height:150px; border:none; border-radius:20px; background:url(../img/ttd.png); background-size:100% 100%; position:relative;}
#signatureCanvas{ border:3px dashed #333; z-index:999; border-radius:10px; margin-bottom:5%; position:absolute; left:0;}


#tblfrm{ font-size:1.5em;}
#frmpage{ width:80%; height:auto; box-shadow:0px 0px 20px #333; background:#fff;}

#frmone{width:95%;background:#fff; margin:2%;}
#frmone2{width:95%;background:#fff; margin:2%;}





#frmfom{ width:45%; overflow:hidden; float:left; padding:2%;}
#inp, #button, select, .nik{ width:100%; height:40px; text-align:center; outline:none; border:0px solid #ccc; border-bottom:#CCC solid 1px; margin-bottom:1%; cursor:pointer; border-radius:10px;}
.tom{ background:#09F; color:#fff; font-weight:bold; width:20%;}
.tomr{ background:#F00; color:#fff; font-weight:bold;}
.inp{width:100%; height:40px; text-align:center; outline:none; border:0px solid #ccc; border-bottom:#CCC solid 1px; margin-bottom:1%; cursor:pointer; border-radius:10px;}

#note{width:100%; float:left; font-size:1em;}
#noreg, #wilayah{ width:48.5%; height:40px; float:left; text-align:center; outline:none; border:1px solid #ccc; margin-bottom:1%; cursor:pointer; border-radius:10px;}

#frmfoto{ width:100%; float:left; background:#fff;}
#frmktp{width:43.4%; height:100px; float:left; border:3px dashed #456; border-radius:10px; margin:3%;}

#chka{width:100%; height:40px; float:left;}
#chk{width:10%; height:10%;}


#frmktp{width:43.55%; height:250px; border:1px dashed #333; border-radius:10px; overflow:hidden; float:left;}


/*INDEX PAGE*/

#page{width:100vw; height:auto; background:#FFF; box-shadow:0px 0px 20px #000; float:left; position:relative;}
#slide{ width:100%; height:400px; background:red;}

#cap{width:100%; height:100px; background:rgba(0,0,0,0.5); position:absolute; top:0; text-align:left;}
#btn{ width:5%; height:80px; border-radius:10px; cursor:pointer; margin:10px; border:none; background:rgba(255,255,255,0.5);}
#dft{ width:5%; height:80px; border-radius:10px; cursor:pointer; margin:10px; border:none; background:rgba(255,255,255,0.5); display:none;}

#toma{ width:50%; height:40px; background: rgba(0%,40%,100%,.5); color:#456; position:absolute; top:20%; left:25%; z-index:99; border:none; border-radius:10px; color:#fff; cursor:pointer;}


/*MENU*/



#menu {position:absolute; bottom:10px; width:100%;display: none;overflow: hidden;height: 0;transition: height 2s;z-index:999;}
#menu.expanded {display: block; height: 150px;transition:2s;}
#dft.expanded {display: block; width:5%; height:80px; border-radius:10px; cursor:pointer; margin:10px; border:none; background:rgba(255,255,255,0.5); float:left;}
#btn1{width:10%; height:40%; border-radius:10px; border:none; background:rgba(0,0,0,0.5); color:#fff; border:2px solid #fff; cursor:pointer; }
#btn1:hover{width:10%; height:40%; border-radius:10px; border:none; background:rgba(0,100,255,0.5); color:#fff; border:2px solid #0CF; }


/*SDM PAGE*/


#allpie{width:100%; height:auto; background:#EEE; float:left;}
#dtchart{width:50%; height:200px; float:left; background:#eee; font-size:2em;}
#myPieChart {width: 50%; height: auto; float:left;}

#pnlsdm{width:100%; height:auto; background:rgba(0,0,0,0.5); float:left;}
#tmsdm{ width:15%; height:100px; margin:5% 0% 5% 0%; border:none; border-radius:10px; cursor:pointer; font-size:2em; background:rgba(0,0,0,0.3)}
#tmsdm:hover{ width:15%; height:100px; margin:5% 0% 5% 0%; border:1px solid #0FF; border-radius:10px; cursor:pointer; font-size:2em; background:rgba(0,0,255,0.3);color:#fff;}

#pp,#pd,#pw,#pc,#pac,#pr{ width:95%; height:40px; text-align:center; font-size:2em; border:none; outline:none; border-radius:10px; margin-bottom:5%;}


/*SKU PAGE*/

#anggota1,#simpatisan1,#penggalangan1,#politik1,#perusahaan1{ width:95%; height:40px; text-align:center; font-size:1.5em; border:none; outline:none; border-radius:10px; margin-bottom:5%; box-shadow:inset 0px 0px 10px 5px #000;}


/*mop PAGE*/

#pp1,#pd1,#pw1,#pc1,#pac1,#pr1{ width:95%; height:40px; text-align:center; font-size:1.5em; border:none; outline:none; border-radius:10px; margin-bottom:5%; box-shadow:inset 0px 0px 10px 5px #000;}




/* HHOS */
.bgchos{background:url(../img/nelayantani.jpg) no-repeat; background-size:100% 100vh; text-align:center;}

.pnlch{ margin-top:5%; width:100%; position:absolute; bottom:15%;}
.tomch{width:15%; height:100px; margin:1%; border-radius:20px; background:rgba(0,0,0,.5); color:#fff; cursor:pointer; border:2px solid #fff; font-weight:bold;}
.tomch:hover{width:15%; height:100px; margin:1%; border-radius:20px; background:rgba(255,0,0,.8); color:#fff; cursor:pointer; border:2px solid #fff; font-weight:bold;}



/*PEMBAYARAN*/
.pnlpay{position:relative;width:50%; font-family: calibri; box-shadow:#000 0px 0px 100px; padding:1%; border-radius:10px;}


/*PAGE IURAN KOPERASI*/
.pnlnav{width:20%; height:100vh; background:#345; position:fixed; left:0; top:0;}
.pnliuall{ width:80%; height:100vh; position:fixed; top:0; right:0; background:#ebebeb; overflow:scroll;}
.logopnl{ width:100%; height:120px; background:black; color:#fff; display:flex;flex-direction: column-reverse;justify-content: space-around;align-items: center;}
.ftlogo{ border-radius:100px; width:100px; height:100px;}
.pnliu{width: 40%;
    height: 100px;
    background: #fff;
    margin: 2% 5% 0% 5%;
    display: flex;
    align-items: center;
    justify-content: center;
    float: left;
    flex-direction: column;
    box-shadow: 0px 0px 0px -4px;
    border-top: 6px solid #ff020c;
    border-radius:10px;
    text-align:center;
    
}
.pnlct{width: 50%;
    height: 100%;
    background: dimgrey;
    display: flex;
    align-items: center;
    justify-content: space-around;
	border-radius:100px;}
.pnldt{ width:100%; height:200px; background:green;}
.tomnav{ width:100%; height:50px; border:none; margin-top:1%; cursor:pointer;}
.pnltbliur{ width:100%;}
.tombyiu{cursor:pointer; width:20%; height:40px; background:red; border-top-left-radius:10px; border-top-right-radius:10px; border:none; color:#fff; margin:1%;}
.tombukti{ width:50%; height:40px; background:#09F; border:none; border-radius:10px;color:#fff; cursor:pointer;}
.tarik{width:100%; /*height:100vh;*/ height:auto; background:none; display:flex;align-items: center;
justify-content: center;flex-direction: column;}
.tbltab{width:50%;}






@media only screen and (max-width: 800px) {

#header{width:90%; height:auto; background: red; padding:5%;}
#logo{width:50px; height:50px; background:url(../img/logo.png); background-size:100% 100%; float: none;}
#logokop{width:50px; height:50px; background:url(../img/logokop.png); background-size:100% 100%; float: none;}
#logo2{width:10%; height:50px; background:url(../img/logo.png); background-size:100% 100%; float: none; position: absolute; z-index:999; right:4%; top:2%;}

#tagline{ width:100%; height:100%; float:left; font-size:1.5em;}
#tagline2{ width:94%; height:30%; background:#fff; float:left; padding:2% 3% 2% 3%; font-weight:bold; color:#000;}
#tagline3{ width:94%; height:auto; background:#fff; float:left; font-size:10px; padding:0% 3% 0% 3%}


#frmcv{ width:100%; background:#fff; position:relative;}
#canvastop{width:90%; height:150px; border:none; border-radius:20px; background:url(../img/ttd.png); background-size:100% 100%; position:relative;}
#signatureCanvas{ border:3px dashed #EEE; z-index:999; border-radius:10px; position:absolute; left:0px; width:100%; height:100%;}


#tblfrm{ font-size:1.2em;}
#frmpage{ width:100%; height:auto; box-shadow:0px 0px 20px #333; background:#fff;}

#frmone{width:95%;background: #fff; margin:2%;}
#frmfom{ width:95%; overflow:hidden;}
#inp, #button, select{ width:100%; height:40px; text-align:center; outline:none; border:0px solid #ccc; border-bottom:#CCC solid 1px; margin-bottom:1%; cursor:pointer; border-radius:10px;}
.inp{width:100%; height:40px; text-align:center; outline:none; border:0px solid #ccc; border-bottom:#CCC solid 1px; margin-bottom:1%; cursor:pointer; border-radius:10px;}



#note{width:100%; float:left; font-size:1.2em;}
#noreg, #wilayah{ width:48.13%; height:40px; float:left; text-align:center; outline:none; border:1px solid #ccc; margin-bottom:1%; cursor:pointer; border-radius:10px;}

#frmfoto{ width:100%; float:left; background:#fff;}
#frmktp{width:42.2%; height:100px; float:left; border:3px dashed #EEE; border-radius:10px; margin:3%;}

#chka{width:100%; height:40px; float:left;}
#chk{width:10%; height:10%;}


/*INDEX PAGE*/

#page{width:100vw; height:100vh; background:none; box-shadow:0px 0px 20px #000;}
#slide{ width:100%; height:400px; background:red;}

#cap{width:100%; height:100px; background:rgba(0,0,0,0.5); position:absolute; top:0; text-align:left;}
#btn{ width:20%; height:80%; border-radius:10px; cursor:pointer; margin:10px; border:none; background:rgba(255,255,255,0.5);}


/*MENU*/



#menu {position:absolute; bottom:70px; width:100%;display: none;overflow: hidden;height: 0;transition: height 2s;z-index:999;}
#menu.expanded {display: block; height: 150px;transition:2s;}
#dft.expanded {display: block; width:20%; height:80px; border-radius:10px; cursor:pointer; margin:10px; border:none; background:rgba(255,255,255,0.5); float:left;}
#btn1{width:20%; height:40%; border-radius:10px; border:none; background:rgba(0,0,0,0.5); color:#fff; border:2px solid #fff; cursor:pointer; }
#btn1:hover{width:20%; height:40%; border-radius:10px; border:none; background:rgba(0,100,255,0.5); color:#fff; border:2px solid #0CF; }


/*SDM PAGE*/


#allpie{width:100%; height:auto; background:#EEE; float:left;}
#dtchart{width:100%; height:auto; float:left; background:#EEE;}
#myPieChart {width: 100%; height:auto; float:left;}

#pnlsdm{width:100%; height:auto; background:rgba(0,0,0,0.5); float:left;}
#tmsdm{ width:15%; height:100px; margin:5% 0% 5% 0%; border:none; border-radius:10px; cursor:pointer; font-size:2em; background:rgba(0,0,0,0.3)}
#tmsdm:hover{ width:15%; height:100px; margin:5% 0% 5% 0%; border:1px solid #0FF; border-radius:10px; cursor:pointer; font-size:2em; background:rgba(0,0,255,0.3);color:#fff;}
#pp,#pd,#pw,#pc,#pac,#pr{ width:95%; height:40px; text-align:center; font-size:2em; border:none; outline:none; border-radius:10px; margin-bottom:5%;}




/* HHOS */
.bgchos{ background:url(../img/nelayantani.jpg) no-repeat; background-size:100% 100vh;}
.pnlch{ margin-top:5%; width:100%; position:absolute; bottom:15%;}
.tomch{width:30%; height:100px; margin:1%; border-radius:20px; background:rgba(0,0,0,.5); color:#fff; cursor:pointer; border:2px solid #fff; font-weight:bold;}
.tomch:hover{width:15%; height:100px; margin:1%; border-radius:20px; background:rgba(255,0,0,.8); color:#fff; cursor:pointer; border:2px solid #fff; font-weight:bold;}



/*PEMBAYARAN*/
.pnlpay{width:100%; font-family: calibri; box-shadow:#000 0px 0px 100px; padding:1%; border-radius:10px;}



/*PAGE IURAN KOPERASI*/
.pnlnav{width:100%; height:100%; background:#345; position:fixed; left:0; top:0;}
.pnliuall{ width:100%; height:80vh; position:fixed; top:21%; right:0; background:#fff; overflow:scroll;}
.logopnl{ width:100%; height:120px; background:black; color:#fff; display:flex;flex-direction: column-reverse;justify-content: space-around;align-items: center;}
.ftlogo{ border-radius:100px; width:100px; height:100px;}
.pnliu{width: 40%;
    height: 100px;
    background: #fff;
    margin: 2% 5% 0% 5%;
    display: flex;
    align-items: center;
    justify-content: center;
    float: left;
    flex-direction: column;
    box-shadow: 2px 5px 8px -4px;
    border-top: 6px solid #ff020c;
    text-align:center;
}
.pnlct{width: 50%;
    height: 100%;
    background: dimgrey;
    display: flex;
    align-items: center;
    justify-content: space-around;
	border-radius:100px;}
.pnldt{ width:100%; height:200px; background:green;}
.tomnav{ width:32.7%; height:50px; border:none; margin-top:1%; cursor:pointer;}
.pnltbliur{ width:100%;}
.tombyiu{cursor:pointer; width:20%; height:40px; background:red; border-top-left-radius:10px; border-top-right-radius:10px; border:none; color:#fff; margin:1%;}
.tombukti{ width:50%; height:40px; background:#09F; border:none; border-radius:10px;color:#fff; cursor:pointer;}
.tarik{width: 100%;
    /*height: 79vh;*/
    height:auto;
    background: #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    
}
.tbltab{width:100%;}




}