.accessSystem{
  background:#fff;
  display:grid; grid-template-columns:65% 35%; min-height:100vh;
  overflow-y:scroll;
}
.graphic{
	background:url('../../images/bottom_graphic.png');
	background-repeat:no-repeat;
	background-position:bottom;
	background-size:100%;
	max-width:450px;
}
.rightPanel{background:linear-gradient(360deg, #F9EF80 0%, #F7B433 100%);}
.graphic h1{
  /*font-family: 'Segoe UI';
  font-weight:900; font-size:24px; line-height:32px; */
  color:#48378A;
  padding-left:45px; padding-top:36px;
}
.graphic .logo h1{
	font-weight:500; font-size:25px; line-height:35px;
	text-align:center;
	color:#0D0D0D;
	padding-top:10px;
}
.graphic .logo img{width:45%;}

.graphicText{
  width:92%;
  display:grid;
  align-content:center;
  padding-left:45px; margin-top:16px;
}

.graphicText h2{
  font-family:'Poppins';
  font-style:normal; font-weight:700; font-size:28px; line-height:38px;
  color:#0D0D0D;
}

/* ============= */    
.rightPanel {background-color:#FF5A00;}
.userForm .gradientBox {
  border-radius: 10px;
	background-color: #fff;
	box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.08);
	padding: 40px 40px;
	text-align: center;
	margin-top: 40px;
	min-height: calc(100vh - 80px);
}

.userForm {
	border-radius:15px;
	background:#FFF;
	box-shadow:0px 0px 40px 0px rgba(0, 0, 0, 0.08);
	position:relative;
	top:0px; right:50%;
}
.userForm .alert{text-align:center;}

.userForm h3{
  font-weight:400; font-size:32px; line-height:48px;
  text-align:center;
  letter-spacing:0.01em;
  color:#0D0D0D;
}
.userForm h4{
	font-size:16px; font-weight:400;
	color:#535353;
	letter-spacing:0.5px;
	padding:15px 0px; margin-bottom:20px;
	text-align:center;
}

.userForm ul li {margin-bottom:20px;}
.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:1px solid #A8A8A9;
	width:100%;
	font-weight:400; font-size:16px;
	color:#0D0D0D;
	padding:9px 16px 9px 50px;
	background-color:#FBF9F7;
}
.passwordField a span{top:calc(50% - 13px);}
.userForm ul li input[type="email"]:focus,
.userForm ul li input[type="password"]:focus,
.userForm ul li input[type="text"]:focus{border:1px solid #efefef;}
.userForm ul li .validation{text-align:left;}

.userForm ul li .emailIcon{
	background:url('../../images/mail-icon.svg');
	background-repeat:no-repeat;
	background-size:20px;
    background-position:16px;
}
.userForm ul li .passwordIcon{
	background:url('../../images/lock-icon.svg');
	background-repeat:no-repeat;
	background-size:20px;
    background-position:16px;
 }

/*========*/
.loginButtonPanel:after{content:" "; display:block; clear:both;}
.loginButtonPanel .buttonLeft{text-align:right; font-size:13px; margin-bottom:24px;}
.loginButtonPanel .buttonLeft label{font-size:13px; margin-top:0px; float:left; color: #8C7A70;}
.loginButtonPanel .buttonLeft a{color:#8C7A70; text-decoration:underline; font-size:13px; font-weight:400; padding-bottom: 10px;}

.loginButton .submitBtn{max-width:100%;}

/*================*/
.privacyPolicy{text-align:right; padding:15px 0px;}
.privacyPolicy a {
	font-size:14px; font-weight:400;
	color:rgb( 255, 255, 255); opacity:0.7;
	letter-spacing:0.5px;	
	text-decoration:underline;
}
.ipAddress P{color:#535353;}

/* 
	===============================	
	FOR IPAD  1024
	===============================
*/
@media only screen and (max-width:1050px)
{
	
}

/* 
	===============================	
	FOR IPAD 768
	===============================	
*/
@media only screen and (max-width:980px){
	.accessSystem{display:block;}
	.graphic{max-width:100%; background-image:none;}
	.graphic .logo{display:block; text-align:center;}
	.graphicText{margin-top:10px;}
	.userForm.gradientBox {padding:15px; margin:0px;box-shadow:none;}
	.userForm h4{margin-bottom:0px;}
	.gradientBox{min-height:100vh; display:grid; align-items:center; overflow:hidden;}
	.userForm .gradientBox{min-height:100vh;}
	.userForm{right:0px;}
	.rightPanel{background:#fff;}
	.submitBtn{max-width:100%!important;}
}	

/* 
	===============================	
	For Mobile
	===============================	
*/

@media only screen and (max-width:767px){
	
	/*==============*/
	.graphic{background-image:none;}
	.graphic h1{padding-left:0px;}
	.graphicText{margin-top:10px;}
	.graphic .logo{display:block; text-align:center;}
	.userForm.gradientBox {padding:15px; margin:0px;box-shadow:none;}
	.userForm h4{margin-bottom:0px;}
	
}