.loginBody{ background: url("../img/loginBgImg.jpg") no-repeat center bottom; width: 100vw; height: 100vh; overflow: hidden; position: absolute;}
.loginWrap{ height: 100%; position: relative; z-index: 2;}
#particlesBox{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; opacity: 0.5;}

a{ color:#fff;}
.loginBody .container{ height: 100%;}
.login-panel{ margin-top:150px;}
.login-screen{ max-width:500px; padding:0; margin: 0 auto; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}
.login-screen .well{ border-radius: 12px; padding: 40px 60px; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); background: rgba(255,255,255, 0.04); border-color: rgba(255,255,255, 0.1);}
.login-screen .copyright{ text-align: center;}
@media(max-width:767px){
    .login-screen {
        padding:0 20px;
    }
}
.profile-img-card{ width: 100px; height: 100px; margin: 0 auto; display: block; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%;}
.profile-name-card{ text-align: center;}
#login-form{ width: 300px; margin-top: 4px;}
#login-form .input-group{ width: 100%; height: 46px; padding: 12px 0;}
#login-form .input-group .input-box{ width: 100%; height: 40px; padding: 0 24px 0 40px; background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.02); border-radius: 20px; position: relative;}
#login-form .input-group .glyphicon{ float: left; width: 20px; height: 32px; line-height: 32px; position: absolute; top: 4px; left: 20px; font-size: 14px; color: #fff; opacity: 0.8;}
#login-form .input-group .form-control{ width: 100%; height: 32px; line-height: 32px; padding: 0 12px; background-color: transparent; border-color: transparent; color: #fff; font-size: 14px;}
#login-form .input-group .form-control::-webkit-input-placeholder{ color: #f1f1f1;}

#login-form .input-group input:-webkit-autofill{ -webkit-text-fill-color: #ededed !important; -webkit-box-shadow: 0 0 0px 1000px transparent inset !important; background-color: transparent; background-image: none; transition: background-color 50000s ease-in-out 0s;}
#login-form .input-group input{ background-color: transparent; color: #fff; caret-color: #fff;}

#login-form .form-group{ min-height: 32px; margin-bottom: 4px; float: none;}
#login-form .form-group .keepLogin{ line-height: 32px; display: inline-block; color: #F0F0F0;}
#login-form .form-group .keepLogin input[type="checkbox"]{ width: 14px; height: 14px; line-height: 14px; margin: 0; display: inline-block; text-align: center; vertical-align: middle; position: relative;}
#login-form .form-group .keepLogin input[type="checkbox"]::before{ content: ""; position: absolute; top: 0; left: 0; background: #fff; width: 100%; height: 100%; border: 1px solid #d9d9d9; border-radius: 2px;}
#login-form .form-group .keepLogin input[type="checkbox"]:checked::before{ content: "\2714"; background-color: #fff; position: absolute; top: 0; left: 0; width: 100%; border: 0px solid #4b5cc4; color: #4b5cc4; font-size: 16px; font-weight: bold;}
#login-form .form-group .btn{ box-shadow: 0 -0px 0 0 rgba(143,64,248,.5),0px 0 0 0 rgba(39,200,255,.5); position: relative; transition: all .25s ease; overflow: hidden; background: transparent; border-color: transparent;}
#login-form .form-group .btn:hover{ transform: translate(0,-6px); box-shadow: 10px -10px 25px 0 rgba(143,64,248,.1),-10px 10px 25px 0 rgba(39,200,255,.15);}
#login-form .form-group .btn:hover::after{ transform: rotate(150deg);}
#login-form .form-group .btn::after{ content:''; width: 600px; height: 600px; position: absolute; top: -200px; left: -100px; background-color: #fff; background-image: linear-gradient(225deg,#27d86c 0,#26caf8 50%,#c625d0 100%); z-index: -1; transition: all .5s ease; opacity: 0.5;}