a { color:inherit; text-decoration:none; }
a:link { text-decoration: none; }
a:visited { text-decoration: none; }
a:hover { text-decoration:underline; }
a:active { text-decoration: none; }

body { background-image:url(../images/laundry_bg.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; margin:0; padding:0; font: 12px Arial, sans-serif; }
header, footer{ position: relative; height: 100%; width: 100%; display: table; }
#hcontent, #fcontent {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.v-content{ display: flex; align-items: center; }
#login_panel p { margin:5px; }
#login_panel input[type=text], input[type=password] { width:200px; height:20px; }
button i { margin-right:5px; }
#forgot_password { font-size:12px; margin-top:20px; color:#FFFFFF; }

#main_wrapper {
	display: grid;
	grid-template-columns: 1fr 500px 1fr;
	grid-template-rows: auto 80px 250px 30px auto;
	grid-template-areas:
		". . ."
		". header ."
		". login_panel ."
		". footer ."
		". . .";
	height: 100vh;
}

.header {
	grid-area: header;
	text-align: center;
	background-color: #FFFFFF;
	color: #FFFFFF;
	font-size:22px;
	font-weight:bold;
}

.login_panel {
	grid-area: login_panel;
	padding:15px 20px;
	/* background-color: #FDFE03; */
	background-image:url(../images/login_bg.jpg); background-position: center; background-repeat: no-repeat; background-size: cover;
	overflow-y: auto;
	overflow-wrap: break-word;
	word-wrap: break-word;
	hyphens: auto;
}

.footer {
	grid-area: footer;
	text-align: center;
	background-color: #333365;
	color: #FFFFFF;
}