body{font-family: 'Open Sans', sans-serif; color: #000;background: #004A87; font-size: 14px;box-sizing: border-box;}
a{color: #005b95;text-decoration: none;outline: none; -webkit-transition: all 0.3s ease-in;-moz-transition: all 0.3s ease-in;transition: all 0.3s ease-in;}
a:hover {color: #11749d;text-decoration: none;outline: none; -webkit-transition: all 0.3s ease-in;-moz-transition: all 0.3s ease-in;transition: all 0.3s ease-in;}

/* error message */
.loginform_area .login_form .error {width: 100%;height: 50px;margin-bottom: 1rem;font-size: 13px;padding-top:10px;color: #dc3545;}
.loginform_area .login_form .form-group .error_input{border: 1px solid #dc3545 !important;}
.field-validation-error {color: #dc3545;}

/*New Login*/
p {font-size:14px;}
.h_100 {height:100%;}
.logo {max-width:100%; max-height:54px; margin-bottom:45px;}

.card{border-radius: 12px;overflow: hidden; margin:100px; height:calc(100vh - 200px); display:block; min-height: 500px;}
.login_bg_img{background: url(../../images/login/login_bg_img.jpg) no-repeat 0 0/cover;height: 100%;position: relative;}
.login_bg_img:after{content:""; position: absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,74,174,0.1);}

.form-control{background: #fff;height: 48px;border-radius: 4px !important;font-size: 14px;padding: 10px 12px 10px 34px; border: solid 1px #e2e2e2;}
.user_icon{position: absolute;top: 16px;left: 28px;z-index: 9;color: #b3b3b3;font-size: 18px;}
.show_pass{position: absolute;top: 16px;right: 28px;z-index: 9;color: #b3b3b3;font-size: 18px;}
.btn_login {background:#66946a; display:block; cursor:pointer; color:#fff;height: 48px; font-size:18px; font-weight:700;}
.btn_login:hover{color:#fff; opacity:0.9;}
.custom-control-label{font-size: 14px;}
.custom-control-label::after {width: 20px;height: 20px; top:2px;}
.custom-control-label::before {width: 20px;height: 20px; top:2px;}
.custom-control-input:checked ~ .custom-control-label::before {border-color: #66946a;background-color: #66946a;}

.copyright{position:absolute; bottom:10px; left:30px; z-index:999;}

/*Media*/
@media(max-width:1600px) {
.card {margin: 50px;height: calc(100vh - 100px);}
.logo {max-height: 50px; margin-bottom:30px;}
.form-control{height: 42px;}
.btn_login{height: 42px; font-size:16px;}
.user_icon {top: 12px;left: 28px;}
.show_pass{top: 12px;}
.custom-control-label::after {width: 16px;height: 16px;}
.custom-control-label::before {width: 16px;height: 16px;}
}
@media(max-width:1440px) {
.card {margin: 30px;height: calc(100vh - 60px);}
.logo {max-height: 45px; margin-bottom:25px;}
.form-control{height: 40px;}
.btn_login{height: 40px; font-size:15px;}
.user_icon {top: 12px;left: 28px;}

.form-control{height: 36px;}
.btn_login{height: 36px; font-size:16px;}
.user_icon {top: 12px;left: 28px; font-size:15px;}
.show_pass{top: 12px; font-size:15px}
}
@media(max-width:1199px) {
.card{margin: 15px;height: calc(100vh - 30px);}
body, .form-control, p, .custom-control-label{font-size: 12px;}
}
@media(max-width:991px) {
.login_bg_img{height: 200px;}
.h_100 {height:auto;}
.card {margin: 30px;height: auto;min-height: 96vh;}
}
@media(max-width:575px) {
.login_bg_img{height: 150px;}
.logo {max-height: 35px;margin-bottom: 20px;}
.card {margin: 15px;}
}