@charset "utf-8";

body{background:#eee;}

html, body {
	height:100%;
	min-height: 100%;
}

.loginModal label{
	padding-right:1em;
	font-weight:bold;
}   

.loginModal a{line-height:3em;}

.loginModal .logo{
	text-align:center; 
	margin:0 auto 1em 0;
}

/* 	================================================= 
	#Desktop
	Note: Design for a width greater than 767px */
@media only screen and (min-width: 768px) {	
	.grid-container-login{ display: block; }
	#header { display:none; }
	#main { display: block; }
	#footer { display:none; }
	
	.loginModal{
		width:98%;  
		max-width:500px;
		min-height:100px;
		display:block;
		
		position:absolute;
		left: 50%;
		top: 50%;
		
		-moz-transform: translateX(-50%) translateY(-50%);
		-webkit-transform: translateX(-50%) translateY(-50%);
		-o-transform: translateX(-50%) translateY(-50%);
		-ms-transform: translateX(-50%) translateY(-50%);
		transform: translate(-50%, -50%);
		
		background:#fff; 
		box-sizing:border-box;
		padding:1em;  
		
		border:1px solid #ccc;
		-webkit-border-radius: 4px;
		border-radius: 4px;
	
		-webkit-box-shadow: 0 0 10px 1px rgba(200,200,200,.5);
		box-shadow: 0 0 10px 1px rgba(200,200,200,.5);
		overflow:visible;
		
		text-align:center;
	}
}


/* 	================================================= 
	#Mobile
	Note: Design for a width less than 767px */
@media only screen and (max-width: 767px) {
	/** ADMIN GRID LAYOUT */
	.grid-container-login {
		display: grid;
		height: 100%;
		grid-template-columns: 1fr;
		grid-template-rows: auto 1fr auto;
		grid-gap: 0 0;
		grid-template-areas: "Header" "Main" "Footer";
	}
	
	#header { grid-area: Header; text-align:center; background:#fff; }
	#main { grid-area: Main; padding-top:1em; }
	#footer { grid-area: Footer; text-align:center; background:#5E5934; color:#fff; }
	
	/* IE grid support */
	@media all and (-ms-high-contrast:none) {
		.grid-container-login {
			display: -ms-grid;
			-ms-grid-columns: 1fr;
			-ms-grid-rows: 1auto 1fr 1auto;
		}
	}
	
	.loginModal{
		min-height:100px;
		display:block;
		position:absolute;
		top: 50%;
		width:100%;  
		
		-moz-transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translate(0, -50%);
		
		box-sizing:border-box;
		padding:1em;
	}
	
	.loginModal .logo{ display:none; }
}