input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus
input:-webkit-autofill, 
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
 
  -webkit-text-fill-color: inherit !important;
   -moz-text-fill-color: inherit !important;
  -webkit-box-shadow: 0 0 0px 1000px #FFFFFF inset;
  transition: background-color 5000s ease-in-out 0s;
}

body{
	background:#fff;
	border-top-width:20px; 
	display:grid; grid-template-columns:50% 50%;
	min-height:calc(100vh - 0px);
}

.graphic{text-align:center;}
.graphic img{top:10%; max-width:80%;}

.userForm{background:#f3f6f9; padding:40px 80px; text-align:center;}
.userForm h2{font-size:24px; font-weight:500; margin-bottom:15px;}
.userForm h3{
	background-image: -moz-linear-gradient( 0deg, rgb( 35, 104, 203 ) 0%, rgb( 57, 174, 229 ) 100%);
	background-image: -webkit-linear-gradient( 0deg, rgb( 35, 104, 203 ) 0%, rgb( 57, 174, 229 ) 100%);
	font-size:40px; font-weight:700;
	color:#fff;
	display:inline-block;
	padding:5px 25px;
	margin-bottom:45px;
	border-radius:8px;
}
.userForm h4{
	font-weight:400; font-size:19px;
	color:#7388a5; letter-spacing:0.5px;
	margin-bottom:45px;
}
.userForm ul{
	background:#fff;
	border-radius:15px;
	box-shadow:0px 3px 31px 0px rgba(16, 56, 113, 0.09);
	margin:0px 10%;
	overflow:hidden;
}
.userForm ul li .validation{height:auto;}
.userForm ul li input[type="email"],
.userForm ul li input[type="password"],
.userForm ul li input[type="text"]{
	border-bottom:1px solid #f3f3f3;
	width:100%; 
	font-weight:400; font-size:17px; color:#5c718e;
	background:none;
	padding:18px 25px;
	letter-spacing:0.5px;
}
.userForm ul li input[type="email"]:focus,
.userForm ul li input[type="password"]:focus,
.userForm ul li input[type="text"]:focus{
	border-bottom-color:#2671ce;
}

.loginButtonPanel{padding:30px 20px;}
.loginButtonPanel:after{content:" "; display:block; clear:both;}
.loginButtonPanel .buttonLeft{float:left; font-size:13px; text-align:left;}
.loginButtonPanel .buttonLeft label{font-size:13px; margin-bottom:6px;}
.loginButtonPanel .buttonLeft a{color:#5f7592; text-decoration:underline;}
.loginButtonPanel .submitBtn{float:right;}

.submitBtn .btn{padding:10px 26px;}

/* 
	===============================	
	FOR IPAD  1024
	===============================
*/
@media only screen and (max-width:1050px)
{
	.accessSystem{
		border-top:5px solid #2368cb;
		grid-template-columns:45% 55%;
	}
	.userForm h3{font-size:35px;}
	.userForm ul{margin:0px;}	
}

/* 
	===============================	
	FOR IPAD 768
	===============================	
*/
@media only screen and (max-width:980px)
{
	.accessSystem{grid-template-columns:100%;}
	.graphic{padding:10px; height:35vh;}
	.graphic img{ top:0px;}
	.userForm ul{margin:0px 10%;}
}	

/* 
	===============================	
	For Mobile
	===============================	
*/
@media only screen and (max-width:767px)
{
	.accessSystem{
		background:#fff;
		border:none;	
		/*display:flex; align-items:center;*/		
		background-image:url('../../images/mobile_login_bg.png');
		background-repeat:no-repeat;
		background-size:100%;
	}
	.graphic{display:none;}
	.userForm{padding:15px; background:none; z-index:2; padding-top:15%; min-height:calc(100vh - 200px);}
	.userForm h2{color:#fff;}
	.userForm h3{font-size:28px; margin-bottom:35px; background:#fff!important; color:#195da6;}
	.userForm h4{font-size:16px; margin-bottom:35px; color:#fff;}
	.userForm ul{margin:0px 5%; box-shadow:0px 3px 31px 0px rgba(2, 2, 2, 0.3);}
	
	.userForm .menuFooter{}
}