@charset "utf-8";
/* CSS Document */

body{
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 11px;
	margin: 0;
	background: #eef5ea;
	color: #243127;
}

a{
	color: #2e7d32;
	text-decoration: none;
}

a:hover{
	color: #1f5c24;
}


.atas {
	font:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#808080;
}

.atas2 {
	font:Arial, Helvetica, sans-serif;
	font-size:12px;
	background:#0CF;
}

.menu {
	font:Arial, Helvetica, sans-serif;
	font-size:12px;
}

.tulis {
	font:Franklin Gothic;
	font-size:12px;
	color:#000;
}
.tulis2 {
	font-family:Century Gothic;
	font-size:11px;
	color:#000;
}
.tulis22 {
	font-family:Century Gothic;
	font-size:11px;
	color:#F00;
}

.tulis3 {
	color : #000000;
	font-size : 13px;
	font-family:"Times New Roman", Times, serif;
}

.tulis4 {
	color : #000000;
	font-size : 14px;
	font-family:"Times New Roman", Times, serif;
}

#middle{
	position: relative;
	border: 0px solid blue;
	border-bottom: 0px;
	width: 100%;
	min-height:100vh;
	background:
		radial-gradient(circle at top right, rgba(164, 214, 94, 0.35), transparent 28%),
		linear-gradient(180deg, #f9fcf6 0%, #edf5e8 48%, #e4efde 100%);

}

#home{
    /*opacity:0.8;filter:alpha(opacity=80);*/
	background: transparent;
	min-height: 100%;
}

#home2{
    /*opacity:0.8;filter:alpha(opacity=80);*/
	background: transparent;
	height: 400px;
	min-height:100%;
}

.kiri{
	position: relative;
	text-align:left;
	border: 0px solid black;
	border-bottom: 0px;
	height: 250px;
	opacity:1;filter:alpha(opacity=100);
	background: transparent;
}

.bwh{
	position: relative;
	text-align:left;
	border: 0px solid black;
	border-bottom: 0px;
	min-height: 35px; width: 100%;
	background: linear-gradient(90deg, #173b16 0%, #2f6f2d 55%, #7aa11c 100%);
}
.footer{
	min-height: 26px;
	text-align: center;
	font: 11px Verdana, Arial, Helvetica, sans-serif;
	border-bottom: 0px;
	background: #173b16;
}
.callcenter{
	color:#ffffff;
	font-family:Tahoma;
	font-size:8.5pt;
}

#tengah{
	margin-left:10px;
	padding-left: 5px;
	border : 1px inset #cdcdcd;
	border-right: inset #cdcdcd;
	border-bottom : inset #cdcdcd;
	border-left: outset #cdcdcd;
	border-top : outset #cdcdcd;
	width: 97%;
}

.teks{
font: 11px Verdana, Arial, Helvetica, sans-serif;
}

.bing{
	margin-left:10px;
	border : 1px solid inset #cdcdcd;
	border-right: inset #cdcdcd;
	border-bottom : inset #cdcdcd;
	border-left: outset #cdcdcd;
	border-top : outset #cdcdcd;
	width: 400px;
-moz-border-radius-bottomleft: 8%;
-moz-border-radius-topright: 8%;
-webkit-border-bottom-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
-moz-border-radius-bottomright: 8%;
-moz-border-radius-topleft: 8%;
-webkit-border-bottom-right-radius: 8px;
-webkit-border-top-left-radius: 8px;
}

.fieldx{
	border : 0px inset white;
	font-size:11px;
	font-family:Arial, Helvetica, sans-serif;
}

.field{
	border : 1px inset white;
	font-size:11px;
	font-family:Century Gothic;
}

.field_submit{
	border : 1px inset white;
	width:100px;
	height:30px;
	font-size:11px;
	font-family: verdana;
	background:url(img/masuk.png);
	color:#396f8a;
	font-family:Tahoma, Geneva, sans-serif;
	font-size:11pt;
	font-weight:bold;
}

.login1{
	font-size:25px;
	font-family:Tahoma, Geneva, sans-serif;
}

#login{
opacity:0.9;filter:alpha(opacity=90);
	border:2px inset white;
	position: relative;
	background-color:#95a7a0;
	-moz-border-radius-bottomright: 3%;
	-webkit-border-bottom-right-radius: 10px;
	-moz-border-radius-bottomleft: 3%;
	-webkit-border-bottom-left-radius: 10px;
	-moz-border-radius-topright: 3%;
	-webkit-border-top-right-radius: 10px;
	-moz-border-radius-topleft: 3%;
	-webkit-border-top-left-radius: 10px;
}
.garis{
	font: 13px Verdana, Arial, Helvetica, sans-serif;
	border-left : 1px solid black;
	border-top : 1px solid black;
	border-right : 1px solid black;
	border-bottom : 1px solid black;
}
.garis2{
	font: 13px Verdana, Arial, Helvetica, sans-serif;
	border-top : 1px solid black;
	border-right : 1px solid black;
	border-bottom : 1px solid black;
}
.garis3{
	font: 13px Verdana, Arial, Helvetica, sans-serif;
	border-right : 1px solid black;
	border-bottom : 1px solid black;
}
.hidden_ab{
	border : 0px;
	border-bottom : 1px solid black;
	border-top: 1px solid black;
}
.hidden_aba{
	border : 0px;
	border-bottom : 1px solid black;
}
.field_out{
	border : 1px outset white;
	font-size:11px;
	font-family: verdana;
}

.hidden{
	border : 0px;
}
.hidden1{
	border : 0px;
	color : red;
}
.tebal{
	font: bold 20px Arial;
}
.averous{
	font: bold 30px Tahoma;
	color:#910011;
}
.desc{
	font: bold 20px Bodoni;
	color:#ffffff;
}
.desc2{
	font: 11pt verdana;
	color:#ffffff;
}
.field{
	border : 1px inset white;
	font-size:11px;
	font-family: verdana;
}

.path{
	font-family: Century Gothic;
	font-size: 11px;
	text-decoration:none;
	color:#000;
}
.path:hover{
	font-family: Century Gothic;
	font-size: 11px;
	text-decoration:none;
	color:#89DD43;	
}

.app-shell{
	width: 100%;
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 20px 28px;
	box-sizing: border-box;
}

.app-layout{
	display: table;
	width: 100%;
	border-spacing: 0;
}

.app-sidebar,
.app-main{
	display: table-cell;
	vertical-align: top;
}

.app-sidebar{
	width: 300px;
	padding: 24px 20px 0 0;
	box-sizing: border-box;
}

.app-main{
	padding-top: 24px;
	box-sizing: border-box;
}

.dashboard-panel{
	background: rgba(255,255,255,0.94);
	border: 1px solid #dbe8d6;
	border-radius: 24px;
	box-shadow: 0 18px 40px rgba(33, 70, 25, 0.12);
	padding: 36px;
	box-sizing: border-box;
}

.dashboard-hero{
	background: linear-gradient(135deg, rgba(24, 59, 22, 0.96), rgba(53, 125, 42, 0.9) 58%, rgba(163, 205, 84, 0.82));
	border-radius: 28px;
	padding: 36px;
	color: #ffffff;
	position: relative;
	overflow: hidden;
	box-shadow: 0 20px 42px rgba(27, 70, 27, 0.18);
}

.dashboard-hero:before,
.dashboard-hero:after{
	content: "";
	position: absolute;
	border-radius: 999px;
	background: rgba(255,255,255,0.09);
}

.dashboard-hero:before{
	width: 220px;
	height: 220px;
	right: -70px;
	top: -70px;
}

.dashboard-hero:after{
	width: 180px;
	height: 180px;
	right: 90px;
	bottom: -100px;
}

.dashboard-hero-content{
	position: relative;
	z-index: 1;
}

.dashboard-eyebrow{
	display: inline-block;
	padding: 8px 14px;
	border-radius: 999px;
	background: rgba(255,255,255,0.16);
	font: bold 11px Verdana, Arial, Helvetica, sans-serif;
	letter-spacing: 1px;
	text-transform: uppercase;
	margin-bottom: 18px;
}

.dashboard-title{
	margin: 0 0 12px;
	font: bold 34px Georgia, "Times New Roman", Times, serif;
	line-height: 1.18;
}

.dashboard-subtitle{
	margin: 0;
	font: 15px/1.7 Verdana, Arial, Helvetica, sans-serif;
	max-width: 620px;
	color: #ecf8e5;
}

.dashboard-grid{
	margin-top: 24px;
	display: table;
	width: 100%;
	border-spacing: 18px 0;
	margin-left: -18px;
	margin-right: -18px;
}

.dashboard-card{
	display: table-cell;
	width: 33.33%;
	background: #ffffff;
	border: 1px solid #dfead7;
	border-radius: 18px;
	padding: 22px 20px;
	box-shadow: 0 12px 24px rgba(41, 86, 29, 0.08);
	box-sizing: border-box;
}

.dashboard-card-label{
	margin: 0 0 8px;
	font: bold 11px Verdana, Arial, Helvetica, sans-serif;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: #6c8360;
}

.dashboard-card-value{
	margin: 0;
	font: bold 20px Georgia, "Times New Roman", Times, serif;
	color: #183b16;
	line-height: 1.4;
}

.dashboard-note{
	margin-top: 26px;
	padding: 18px 20px;
	background: #f5faef;
	border-left: 4px solid #7fa91c;
	border-radius: 14px;
	font: 13px/1.7 Verdana, Arial, Helvetica, sans-serif;
	color: #445543;
}

.site-header{
	padding-top: 18px;
}

.site-banner{
	position: relative;
	border-radius: 0 0 28px 28px;
	overflow: hidden;
	box-shadow: 0 22px 42px rgba(31, 67, 21, 0.18);
	background: #264a1f;
}

.site-banner img{
	display: block;
	width: 100%;
	height: auto;
}

.site-banner-overlay{
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: linear-gradient(90deg, rgba(17, 33, 8, 0.22), rgba(255,255,255,0));
}

.site-toolbar{
	padding: 12px 24px;
	display: table;
	width: 100%;
	box-sizing: border-box;
}

.site-toolbar-left,
.site-toolbar-right{
	display: table-cell;
	vertical-align: middle;
}

.site-toolbar-right{
	text-align: right;
	font: 11px Verdana, Arial, Helvetica, sans-serif;
	color: #e9f4df;
}

.site-toolbar-right a{
	color: #ffffff;
	font-weight: bold;
}

.site-footer-wrap{
	padding: 20px 0 0;
}

.site-footer-card{
	background: #173b16;
	border-radius: 18px;
	padding: 14px 18px;
	box-shadow: 0 10px 24px rgba(20, 50, 14, 0.16);
}

.site-footer-card a{
	color: #dff3c5;
	font-weight: bold;
}

.login-page{
	min-height: 100vh;
	padding: 32px 20px;
	box-sizing: border-box;
	background:
		radial-gradient(circle at top right, rgba(150, 197, 54, 0.42), transparent 24%),
		radial-gradient(circle at left bottom, rgba(29, 87, 25, 0.22), transparent 26%),
		linear-gradient(180deg, #f9fcf7 0%, #edf6e8 54%, #e5f0df 100%);
}

.login-shell{
	max-width: 1120px;
	margin: 0 auto;
	min-height: calc(100vh - 64px);
	display: table;
	width: 100%;
	border-spacing: 0;
}

.login-brand,
.login-panel-cell{
	display: table-cell;
	vertical-align: middle;
	width: 50%;
}

.login-brand{
	padding: 30px 40px 30px 0;
	box-sizing: border-box;
}

.login-brand-card{
	position: relative;
	padding: 42px;
	border-radius: 30px;
	background: linear-gradient(135deg, rgba(17, 39, 10, 0.95), rgba(45, 109, 36, 0.92) 55%, rgba(170, 211, 84, 0.84));
	box-shadow: 0 24px 48px rgba(28, 63, 20, 0.2);
	color: #ffffff;
	overflow: hidden;
}

.login-brand-card:before,
.login-brand-card:after{
	content: "";
	position: absolute;
	border-radius: 999px;
	background: rgba(255,255,255,0.09);
}

.login-brand-card:before{
	width: 280px;
	height: 280px;
	top: -120px;
	right: -110px;
}

.login-brand-card:after{
	width: 180px;
	height: 180px;
	bottom: -70px;
	left: -60px;
}

.login-brand-content{
	position: relative;
	z-index: 1;
}

.login-badge{
	display: inline-block;
	padding: 8px 14px;
	border-radius: 999px;
	background: rgba(255,255,255,0.14);
	font: bold 11px Verdana, Arial, Helvetica, sans-serif;
	letter-spacing: 1px;
	text-transform: uppercase;
	margin-bottom: 18px;
}

.login-logo-mark{
	display: inline-block;
	padding: 12px 20px;
	margin-bottom: 22px;
	background: #ffffff;
	color: #111111;
	border-radius: 18px;
	font: bold 22px Georgia, "Times New Roman", Times, serif;
	letter-spacing: 1px;
	box-shadow: 0 14px 26px rgba(17, 27, 11, 0.18);
}

.login-heading{
	margin: 0 0 14px;
	font: bold 38px Georgia, "Times New Roman", Times, serif;
	line-height: 1.15;
}

.login-copy{
	margin: 0;
	font: 15px/1.8 Verdana, Arial, Helvetica, sans-serif;
	max-width: 480px;
	color: #eef6e3;
}

.login-points{
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
}

.login-points li{
	margin-bottom: 12px;
	padding-left: 24px;
	position: relative;
	font: 13px/1.6 Verdana, Arial, Helvetica, sans-serif;
	color: #eff7e7;
}

.login-points li:before{
	content: "";
	position: absolute;
	left: 0;
	top: 7px;
	width: 10px;
	height: 10px;
	border-radius: 999px;
	background: #d7ef8d;
	box-shadow: 0 0 0 5px rgba(215, 239, 141, 0.18);
}

.login-panel-cell{
	padding-left: 20px;
	box-sizing: border-box;
}

.login-panel{
	background: rgba(255,255,255,0.96);
	border: 1px solid #dce8d4;
	border-radius: 28px;
	padding: 38px 34px;
	box-shadow: 0 22px 44px rgba(31, 71, 22, 0.12);
	box-sizing: border-box;
	max-width: 430px;
	margin-left: auto;
}

.login-panel h1{
	margin: 0 0 10px;
	font: bold 30px Georgia, "Times New Roman", Times, serif;
	line-height: 1.2;
	color: #163814;
	text-transform: none;
	height: auto;
}

.login-panel p{
	margin: 0 0 24px;
	font: 13px/1.7 Verdana, Arial, Helvetica, sans-serif;
	color: #5b6b58;
}

.login-form-row{
	margin-bottom: 18px;
}

.login-form-label{
	display: block;
	margin-bottom: 7px;
	font: bold 11px Verdana, Arial, Helvetica, sans-serif;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: #55704d;
}

.login-input{
	width: 100%;
	height: 50px;
	padding: 0 16px;
	box-sizing: border-box;
	border: 1px solid #cfe0c8;
	border-radius: 14px;
	background: #f8fbf5;
	font: 15px Verdana, Arial, Helvetica, sans-serif;
	color: #203020;
}

.login-input:focus{
	border-color: #7aa11c;
	background: #ffffff;
	outline: none;
	box-shadow: 0 0 0 3px rgba(122, 161, 28, 0.14);
}

.login-error{
	margin: 6px 0 0;
	padding: 10px 12px;
	border-radius: 12px;
	background: #fff1f0;
	border: 1px solid #f0c3bf;
	font: 11px/1.5 Verdana, Arial, Helvetica, sans-serif;
	color: #b53022;
}

.login-submit{
	width: 100%;
	height: 52px;
	border: 0;
	border-radius: 14px;
	background: linear-gradient(90deg, #183b16 0%, #2d6d24 55%, #8aaf1e 100%);
	font: bold 14px Verdana, Arial, Helvetica, sans-serif;
	color: #ffffff;
	cursor: pointer;
	box-shadow: 0 16px 30px rgba(38, 82, 27, 0.22);
}

.login-submit:hover{
	background: linear-gradient(90deg, #122f11 0%, #24561d 55%, #779715 100%);
}

.login-help{
	margin-top: 18px;
	font: 11px/1.7 Verdana, Arial, Helvetica, sans-serif;
	color: #6e7f68;
	text-align: center;
}

.login-help strong{
	color: #183b16;
}

@media screen and (max-width: 960px){
	.login-shell,
	.app-layout,
	.site-toolbar,
	.dashboard-grid{
		display: block;
	}

	.login-brand,
	.login-panel-cell,
	.app-sidebar,
	.app-main,
	.site-toolbar-left,
	.site-toolbar-right,
	.dashboard-card{
		display: block;
		width: auto;
	}

	.login-brand{
		padding: 0 0 24px;
	}

	.login-panel-cell{
		padding-left: 0;
	}

	.login-panel{
		max-width: none;
		margin-left: 0;
	}

	.app-shell{
		padding-left: 14px;
		padding-right: 14px;
	}

	.app-sidebar{
		padding: 18px 0 0;
	}

	.app-main{
		padding-top: 18px;
	}

	.site-toolbar-right{
		text-align: left;
		padding-top: 8px;
	}

	.dashboard-grid{
		margin: 20px 0 0;
	}

	.dashboard-card{
		margin-bottom: 14px;
	}

	.dashboard-panel,
	.dashboard-hero,
	.login-panel,
	.login-brand-card{
		padding: 24px;
		border-radius: 22px;
	}

	.dashboard-title,
	.login-heading{
		font-size: 30px;
	}

	.site-banner{
		border-radius: 0 0 22px 22px;
	}

	.site-banner img{
		min-height: 120px;
		object-fit: cover;
	}

	#menu-admin .glossymenu{
		width: auto;
	}

	#menu-admin .kotakbayang,
	#menu-admin .kotakbayang2{
		margin-left: 0;
		margin-right: 0;
	}

	#menu-admin .poskiri,
	#menu-admin .poskanan{
		position: static;
		left: auto;
		width: auto;
		padding-left: 0;
	}

	#menu-admin .poskanan{
		padding-top: 0;
	}

	#menu-admin .posdua{
		padding-left: 0;
	}
}

@media screen and (max-width: 640px){
	.login-page{
		padding: 18px 12px;
	}

	.login-brand-card,
	.login-panel,
	.dashboard-panel,
	.dashboard-hero{
		padding: 20px 18px;
	}

	.login-heading,
	.dashboard-title{
		font-size: 26px;
	}

	.login-copy,
	.dashboard-subtitle{
		font-size: 13px;
	}

	.site-toolbar{
		padding-left: 16px;
		padding-right: 16px;
	}
}

.path2{
	font-family: Century Gothic;
	font-size: 11px;
	text-decoration:none;
	color:#234987;
	font-weight:bold;
}
.path2:hover{
	font-family: Century Gothic;
	font-size: 11px;
	text-decoration:none;
	font-weight:bold;
	color:#098765;	
} 

.path3{
	font-family: Century Gothic;
	font-size: 11px;
	text-decoration:none;
	color:#991145;
	font-weight:bold;
}
.path3:hover{
	font-family: Century Gothic;
	font-size: 11px;
	text-decoration:none;
	font-weight:bold;
	color:#33987D;	
} 

.center{
	text-align:center;
}

.kanan{
	text-align:right;
}

.invisible {
	height:0;
	width:0;
	border: 0;	
}

.tombolsimpan{
	border : 0px outset white;
	font-size:11px;
	font-family: verdana;
	font-weight:bold;
	color: black;
	background-image:url(img/masuk.jpg);
	height:28px;
	width:103px;
	-moz-box-shadow: #ffffff 1px 1px 1px;
	-webkit-box-shadow: #ffffff 1px 1px 1px;
}

.tombolsimpan2{
	border : 0px outset white;
	font-size:11px;
	font-family: verdana;
	font-weight:bold;
	color: black;
	background-image:url(./img/tombolmasuk.png);
	height:28px;
	width:103px;
	-moz-box-shadow: #ffffff 1px 1px 1px;
	-webkit-box-shadow: #ffffff 1px 1px 1px;
}

.invisible2{
	background-color:#d2232a;
	border : 1px outset white;
	font-size:8pt;
	text-decoration:blink;
	font-family: century gothic;
	font-weight:bold;
	color: #d5e800;
	height:18px;
	width:40px;
}

.cancel{
	border : 0px outset white;
	font-family:Tahoma;
	font-size : 11px;
	width:16px;
	height:16px;
	background:url(img/hapus.png) 0 0 no-repeat;
}

.terimadari {
	color : #000000;
	font-size : 25px;
	font-family:"Times New Roman", Times, serif;
}

.nokwt {
	color : #000000;
	font-size : 15px;
	font-family:"Times New Roman", Times, serif;
}

.banyaknya {
	color : #000000;
	font-size : 20px;
	font-family:"Times New Roman", Times, serif;
}

.tulis1 {
	color : #000000;
	font-size : 15px;
	font-family:"Times New Roman", Times, serif;
}
.terbilang{
	border : 2px outset;
	font-size:20px;
	font-family:"Times New Roman", Times, serif;
}


.style9 {
	font-size: 25px;
	font-weight: bold;
	font-family:"Times New Roman", Times, serif;
}

.style10 {
	font-size: 45px;
	font-weight: bold;
	font-family:"Times New Roman", Times, serif;
}

<!-- next halaman -->

.first{
	border : 1px inset white;
	background:url(img/first.gif) 0 0 repeat-x;
	font-size:9px;
	width:17px;
	font-family:Century Gothic;
}
.prev{
	border : 1px inset white;
	background:url(img/first.gif) 0 0 repeat-x;
	font-size:9px;
	width:17px;
	font-family:Century Gothic;
}

.prev2{
	border : 1px inset white;
	background:url(img/prev.gif) 0 0 repeat-x;
	font-size:9px;
	width:17px;
	font-family:Century Gothic;
}
.next{
	border : 1px inset white;
	background:url(img/next.gif) 0 0 repeat-x;
	font-size:9px;
	width:17px;
	font-family:Century Gothic;
}

.last{
	border : 1px inset white;
	background:url(img/last.gif) 0 0 repeat-x;
	font-size:9px;
	width:17px;
	font-family:Century Gothic;
}
.depan{
	top:10%;
	left:45%;
	width:40%;
	color:#000;
	font-family:"Times New Roman", Times, serif;
	background-color:#FFF;
	position : absolute; 
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	border-left: 1px solid black;
	border-right: 1px solid black;
	border-top-left-radius: 50px;
	border-bottom-left-radius: 50px;
	border-top-right-radius: 50px;
	border-bottom-right-radius: 50px;
}