body { overflow: scroll; background: rgb(75,72,72);
	background: radial-gradient(circle, rgba(75,72,72,1) 0%, rgba(70,70,73,1) 65%, rgba(41,38,38,1) 100%);
	position: relative; font-family: 'Helvetica', fontello, sans-serif; }

.login-form { background-color: #e2e2e2; display: block; width: 360px; margin: 0px auto;
	border-radius: 4px; 
	padding: 18px 36px;
	-webkit-box-shadow: 3px 3px 12px 0px rgba(0,0,0,0.48);
	-moz-box-shadow: 3px 3px 12px 0px rgba(0,0,0,0.48);
	box-shadow: 3px 3px 12px 0px rgba(0,0,0,0.48);
	position: absolute;
    left: 50%;
	top: 50%;
    transform: translate(-50%,50%);
}

.login-form h1 { padding: 0; margin: 0 0 18px 0; }

.login-form [type=password], 
.login-form [type=text] { width: 100% }
.login-form div:last-child { text-align: left }

.login-form label { display: block; margin-bottom: 3px }
.login-form div { margin-bottom: 12px }

.login-form [type=password], 
.login-form [type=text],
.login-form button { padding: 4px 8px } 

.topbar .logo { background-image: url(depedlaoag.png); background-size: 40px; background-repeat: no-repeat; width: 40px;
	height: 40px; float: left;  
}

.topbar { height: 40px; background-color: #016578; padding: 8px 18px; box-shadow: 2px 2px 1px 0px rgba(0, 0, 0, .38)  }
.topbar span.uhrmis { margin: 4px 0 0 50px; display: inline-block; border: 0 solid red; color: #e5e5e5;
	font-size: 1.00em; text-shadow: 1px 1px #222; display: block }
.topbar span.deped { display: block; font-size: .8em; margin-left: 80px; color: gold; 
	text-shadow: 1px 1px #222; }