.login-page { margin: 0; padding: 0; position: relative; background: #264869;}
.login-wrapper { width: 100%; position: relative; }
.login-drop img { min-width: 100%; min-height: 100%; }
.login-drop { z-index: 0 !important; position: absolute; top: 0px; height: 320px !important; overflow: hidden; background: #fff; width: 100%}
.login-drop-2 {
	z-index: 90 !important;
	position: absolute;
	height: 380px !important;
	overflow: hidden;
	background: #fff;
	width: 100%;
	opacity: 0.7;
	top: 0;
}
.login-drop-3 {
	z-index: 90 !important;
	position: absolute;
	height: 335px !important;
	overflow: hidden;
	background: #fff;
	width: 100%;
	opacity: 0.7;
	top: 0;
}
.login-drop-bg {
	z-index: -3 !important;
	position: absolute;
	overflow: hidden;
	font-size: 31em;
	color: #fff;
	width: 100%;
	opacity: 0.1;
	text-align: center;
}
.top-brand { color: #666; font-size: 1.6em; line-height: 1.2em; text-align: center;}
.top-brand span { font-size: 1.3em; color: #444 }

.login-box-ex { margin: 1% auto 0 auto; }

.logo-brand { text-align: center; margin: 0 0 15px 0 }
.logo-brand p a { color: #fff; }
.text-logo-login {
	font-size: 11px;
	color: white;
	line-height: 13px;
	text-align: center;
}
.center-block {
	display: block;
	margin-right: auto;
	margin-left: auto;
}
.fit-logo img { width: 85px;}
.login-box-body { border: 1px solid #d3e1ed; padding: 5px 20px}
.login-logo { letter-spacing: -1px; font-size: 4.0em; line-height: 23px; color: #fff;  margin: 0 0 10px 0; padding: 15px 0 5px 0;}
.login-logo small { font-size: 0.3em; letter-spacing: 0}
.login-instansi { letter-spacing: -1px; text-align: center; font-size: 1.8em; line-height: 1.1em; 
	color: #fff;margin: 0; padding: 10px 0 5px 0;} /*background: url('../images/drop.png'); */
.clear { clear: both }
.hide { display: none; }


.footer { font-size: 11px; line-height: 13px; position: absolute; top: 0; z-index: 100; color: #fff }
.register-box  {margin-top: 50px 0 0 0; padding: 10px 0; width: 100%; height: 130px; } /*background: url('../images/drop.png');*/
.login-box-register { background: #fff; margin: 0; padding: 5px 0; color: #000; }
.login-box-register h3 { text-align: center; letter-spacing: -1px}

.control-label { text-align: right; font-weight: lighter; font-size: 1.2em; padding-top: 5px; }

.role-iconic { -webkit-border-radius: 5px; border-radius: 5px; margin: 0; text-align: center;}
.role-iconic img { width: 75%; margin: 10px 3px;}

.role-head {
	color: #555;
	font-size: 1.5em;
	padding: 0;
	margin: 6px -15px;
	line-height: 0.8em;
}
.role-head small { font-size: 0.5em; font-weight: 100; letter-spacing: 0; line-height: 0.1em;  }

@media (max-width: 320px) {
.top-brand { font-size: 0.7em; } 
.role-head { color: #555; font-size: 2.0em; padding-left: 20%; } 
.btn-login { margin-bottom: 30px;}
}

@media (max-width: 400px) {
.role-head { color: #555; font-size: 2.2em; padding-left: 20%; } 
}

.box-btn-keluar { margin: 10px 0 20px 0; padding-top: 10px; border-top: 1px dotted #fff }