.loginBox { width: 100%; height: 100vh; min-height: 100px; display: table; padding:60px 0 20px 0;}
.loginMain { display: table-cell; vertical-align: middle;}
.loginCenter { max-width: 450px; margin: auto; width: 100%; padding: 45px 42px; background: #FFFFFF; text-align: center;   box-shadow:0px 0px 40px rgba(0, 0, 0, 0.15); border-radius: 12px; position:relative;}
.loginCenter .leftLogo { text-align: center; display: inline-block;
margin-top: -90px;
    background: #fff;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    text-align: center;
    position: relative;
    box-shadow: 0px -5px 2px rgba(0, 0, 0, 0.2);
    z-index: 1;
}
.loginCenter .leftLogo img{position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;}
body.loginBody { background: #006698 url(../images/dot-bg.png);}
.loginCenter .frmTxt { width: 100%; margin: 20px auto 15px; text-align: left; position:relative; max-width: 500px;}
.LinputMain { border-bottom: 1px solid #989696; font: 400 16px/25px 'Lato',sans-serif; width: 100%; box-shadow: none;position: relative;padding: 0 0;background-color: transparent; color: #11122a;/* height: 37px;*/ display: block; margin: auto; border-radius:0;}
.loginCenter input::-webkit-input-placeholder {color: #cccccf; font: 400 16px/25px 'Lato',sans-serif ;}
.loginCenter input:-webkit-autofill { background:none;}
.LinputMain ~ .focus-border { position: absolute; bottom: 0px; left: 0; width: 100%; height: 2px;}
.LinputMain ~ .focus-border:before, .LinputMain ~  .focus-border:after { content: ""; position: absolute; bottom: 0; left: 0;width: 0;height: 100%; background-color: #00b5b8; transition: 0.4s;}
.inputError .LinputMain ~ .focus-border:before, .inputError .LinputMain ~  .focus-border:after { background-color: #ff0000;width: 100%;
    background: red;}
.LinputMain:focus ~ .focus-border:before, .LinputMain:focus ~ .focus-border:after { width: 50%; transition: 0.4s;}
.LinputMain ~ .focus-border:after { left: auto; right: 0;}
.loginCenter .frmTitle {text-transform: uppercase;font-size: 32px;color: #00b5b8;padding: 0px 0 30px;font-weight: 700;letter-spacing: 1px;margin-top: -15px;z-index: 999;}
.loginBtn { margin-bottom: 15px;}
.loginBtn input { background: #00b5b8; padding: 9px 0; border-radius: 100px;  max-width: 215px; width: 100%; line-height: 26px; margin:0px auto 0; cursor: pointer; letter-spacing: 1.4px;color: #fff; font-size: 16px; font-weight:600; text-transform: uppercase;}
/*.loginBtn input {letter-spacing: 1.4px;color: #fff; font-size: 14px; text-transform: uppercase; background:none;}*/
.rarrow {position:relative; }
.rarrow:before {    position: absolute; content:"";background-image:url(../images/arrowR.png); background-repeat:no-repeat; width:27px; height:13px; vertical-align: top; margin: 5px; transition: all 0.5s ease-in-out; top: -4px; right: 40px;}

.note_imp { color: #d1336e;}
.uname label.error, .pwd label.error { top:auto; bottom:-20px; color:#fb0101; background:none;}
.uname label.error:after, .pwd label.error:after { margin-left: -15px;  left: auto;top: -62%; -webkit-transform: rotate(180deg);-ms-    transform: rotate(180deg); -moz-transform: rotate(180deg); transform: rotate(180deg); display:none; }
.loginCenter .alert {position: absolute; bottom: 126px; left: 60%; margin-left: -24%; background: transparent; padding: 0; box-shadow: none; color: #f00; font-size: 11px; font-weight: 500;}
.loginCenter .frmTxt i { position: absolute; bottom: 50%; right: 0;font-size: 18px; color: #b7b7b7;}

/* 31-07-2017 */
.inputLabel { color: #333; transition: all 0.25s ease-in-out 0s;  -webkit-transition: all 0.25s ease-in-out 0s; position: absolute;left: 6px;bottom: 10px;}
.spanAnimate .inputLabel { color: #00b5b8; }
.spanAnimate .inputLabel { bottom: 100%; /*font-size: 12px; opacity: 0.8;*/ left:0; }
.topSpan .inputLabel {bottom: 100%; left:0;}

/* 03-08-2017 */

.frmTxt.pwd {margin-top: 30px;}
.success {color: #008000; margin-bottom: 30px; position:relative;}
.success:before { content:"\f00c"; width: 24px; height: 24px; display: inline-block; border: 2px solid #008000; text-align: center; border-radius: 50%;line-height: 21px; margin-right: 6px; font-size: 14px; font-weight: 400;font-family: FontAwesome; }
.login-error:before { content:"\f00d"; width: 24px; height: 24px; display: inline-block; border: 2px solid #f00; text-align: center; border-radius: 50%;line-height: 21px; margin-right: 6px; font-size: 14px; font-weight: 400;font-family: FontAwesome;}
.login-error { color: #f00; margin-bottom: 40px; font-weight: 500; text-transform: capitalize; margin-top: -20px; position: relative;
z-index: 12; position:relative;}
.login-error.sryError { margin-bottom: 15px;}
.forgot a {color: #11122a; font-size: 14px; font-weight: 600;}
.forgot i { color: #11122a; margin-right: 5px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease;}
.subBox { padding-top: 5px;}
.forgetTxt { color:#11122a; font-size:14px;}


@media only screen and (min-width: 1200px) {
.loginBtn input:hover ~ .rarrow:before { width: 0px; margin: 5px 0 0; right:0;}
.loginBtn input:hover { background:#005680;}
.forgot a:hover { color:#00b5b8; }
.forgot:hover i { opacity: 0; margin: 0;-webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease;transition: all 0.5s ease;}
}



@media only screen and (max-width: 767px) {
	
.loginCenter .frmTxt { width: 100%; }
.loginCenter { padding: 30px 20px;}
/*.loginBtn {margin: 10px auto 0;}*/
.loginCenter .frmTitle { padding: 20px 0;}

}

@media only screen and (max-width: 479px) {
.loginCenter { max-width: 340px;}	
/*.loginBtn {margin: 10px auto 0;}*/
.loginCenter .frmTitle { padding: 20px 0;}


	
}
@media only screen and (max-width: 350px) {
.loginCenter { max-width: 300px;}	
	
}