@import "https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700,700i,900,900i&display=swap";
body{font-family:'Roboto',sans-serif;font-weight:400;color:#666;font-size:16px;line-height:24px;overflow-x:hidden;background-color:#fff}
html,body{margin:0;padding:0;width:100%;height:100%}
article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block}
ul,li{margin:0;padding:0}
a{font-family:'Roboto',sans-serif;font-weight:400;font-size:16px;color:#4077bb;font-weight:400;text-decoration:none;-webkit-transition:all .5s ease-out;-moz-transition:all .5s ease-out;-ms-transition:all .5s ease-out;-o-transition:all .5s ease-out;transition:all .5s ease-out}
a:hover{text-decoration:underline}
a:focus{outline:none;text-decoration:none}
img{border:0 none}
p{margin:0 0 25px}
.login-page{width:100%;background:#fff url(../images/bg-log.jpg) no-repeat}
.right-information{background-size:cover;top:0;width:100%;bottom:0;min-height:100vh;text-align:left;z-index:999;opacity:1;border-radius:100% 0 0 100%;position:relative;display:flex;justify-content:center;align-items:center;padding:30px}
.right-information:before{width:100%;right:0;right:0;top:0;bottom:0;background:url(../images/right-login-bg.jpg) no-repeat;content:"";border-top-left-radius:50%;border-bottom-left-radius:50%;position:absolute}
.right-information:after{width:100%;right:0;right:0;top:0;bottom:0;background:rgba(3,50,88,.7);content:"";border-top-left-radius:70%;border-bottom-left-radius:70%;position:absolute;z-index:1}
.login-page .container{max-width:100%;width:100%;margin:0 auto;position:relative;z-index:2}
.login-page .left-information{min-height:100vh;position:relative;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;justify-content:center;align-items:center;padding:30px}
.login-page .login-left{margin:0 auto;max-width:350px;margin:0 auto;width:100%;display:block}
.login-page .dropdown-toggle::after{font-size:20px;position:relative;top:5px;right:4px}
.login-page .login-left .top-area{max-width:350px;width:100%;text-align:center;margin:0 auto}
.login-page .login-left .top-area img{display:block;margin:0 auto 30px;width:250px}
.login-page .login-left .top-area h3{text-align:center;color:#0489FF;font-size:25px;font-weight:600;margin:0 0 3px}
.login-page .login-left .top-area h4{text-align:center;color:#72736e;font-size:18px;font-weight:400;margin-bottom:50px}
.login-page .login-form .id-filed{position:relative}
.login-page .login-form .id-filed select{width:100px;text-decoration:none;height:45px;background-color:#0489FF;position:absolute;right:0;font-family:'Roboto','fontAweSome';color:#fff;padding-top:0;padding-left:15px;outline:none;text-align:center;font-size:15px;border-top-right-radius:25px;border-bottom-right-radius:25px}
.login-page .login-form .id-filed option{background-color:#fff;color:#333;padding:20px}
.input-container{display:flex;width:100%;margin-bottom:15px}
.icon{padding:15px;background:#0489FF;color:#fff;min-width:50px;text-align:center;font-size:20px}
.input-field{width:100%;padding:10px;outline:none;border:1px solid #d6d6d6;color:#666;font-size:16px}
.input-field:focus{border:1px solid #0489FF}
.login-page .login-form .submit{border-radius:30px;text-align:center;color:#fff;font-weight:600;background-color:#0489FF;width:100%;height:45px;border:0;cursor:pointer}
.login-page .login-form .submit:hover{background-color:#000;transition:all .5s ease-out}
.login-page .login-form .form-footer{padding-bottom:10px;margin-top:25px}
.login-page .login-form label{color:#0489FF;font-size:15px}
.login-page .login-form a{color:#0489FF;font-size:15px}
.login-page .login-right h1,.login-page .login-right h2,.login-page .login-right h3,.login-page .login-right h4,.login-page .login-right h5,.login-page .login-right h6{color:#FDB03E}
.login-page .login-right h3{font-size:26px;margin:0 0 10px;font-weight:500}
.login-page .login-right{color:#fff;font-size:16px;font-weight:400;line-height:26px;padding-left:10%;padding-right:15px;position:relative;z-index:3}
.login-page .social-links{display:flex;color:#fff;font-size:35px}
.login-page .social-links a{display:inline-block;color:#fff;font-size:22px;margin:0 12px 0 0}
.login-page .social-links a:hover{color:#0489FF}
.login-page ::-webkit-input-placeholder{color:#717171;font-size:13px;opacity:1}
.login-page :-ms-input-placeholder{color:#717171;font-size:13px;opacity:1}
.login-page ::placeholder{color:#717171;font-size:13px;opacity:1}
.login-form{max-width:380px;margin:0 auto}
.login-page .login-form .dropdown-item{color:#333;font-size:14px;font-weight:400}
.login-page .login-form .dropdown-item:active{color:#333;font-size:14px;font-weight:400;background:none}
.login-page .login-right p{margin:0 0 15px}
.form-header {text-align: center; color: #0489FF;}
#login_error {border-left: 4px solid #dc3232; background-color: #fbf0f0; box-shadow: 0 1px 1px 0 rgba(0,0,0,.1); margin: 5px 0px 20px; padding: 8px 10px; font-size: 13px; color: #dc3232;}
#login_success {border-left: 4px solid #009a00; background-color: #f3fde3; box-shadow: 0 1px 1px 0 rgba(0,0,0,.1); margin: 5px 0px 20px; padding: 8px 10px; font-size: 13px; color: #009a00;}
#login_error p, #login_success p {margin: 0 auto;padding: 0; line-height: 18px;}
input[type=checkbox]{display:none}
input[type=checkbox] + label:before{font-family:FontAwesome;display:inline-block;font-size:21px;vertical-align:bottom;content:"\f096";letter-spacing:10px;width:30px}
input[type=checkbox]:checked + label:before{content:"\f046";letter-spacing:10px;width:30px}
@media (max-width:991px) and (min-width:768px) {
.login-page .login-left .top-area h3{font-size:22px}
.login-page .login-left .top-area h4{font-size:18px}
.login-page:before{display:none}
.login-page:after{display:none}
.login-page .login-right{margin:0 auto;font-size:15px;line-height:27px;padding:100px 30px 50px 20px}
.login-right:before{width:100%;left:0;height:90%;right:0;top:auto;bottom:0;background:url(../images/right-login-bg.jpg) no-repeat center center;content:"";border-top-left-radius:0;border-bottom-left-radius:0;position:absolute}
.login-right:after{width:100%;left:0;right:0;height:90%;top:auto;bottom:0;background:rgba(3,50,88,.9);content:"";border-top-left-radius:0;border-bottom-left-radius:0;position:absolute;z-index:1}
.login-right div{position:relative;z-index:2}
.login-page .login-form .form-footer{padding-bottom:15px}
.login-page .right-information{min-height:0;padding:0}
.right-information:before{display:none}
.right-information:after{display:none}
.login-page .left-information{min-height:0}
}
@media (max-width:767px) {
.login-page .login-left .top-area h3{font-size:20px}
.login-page .login-left .top-area h4{font-size:15px}
.login-page:before{display:none}
.login-page:after{display:none}
.login-page .login-right{margin:0 auto;font-size:14px;line-height:27px;padding:100px 30px 50px 20px}
.login-right:before{width:100%;left:0;height:90%;right:0;top:auto;bottom:0;background:url(../images/right-login-bg.jpg) no-repeat center center;content:"";border-top-left-radius:0;border-bottom-left-radius:0;position:absolute}
.login-right:after{width:100%;left:0;right:0;height:90%;top:auto;bottom:0;background:rgba(3,50,88,.9);content:"";border-top-left-radius:0;border-bottom-left-radius:0;position:absolute;z-index:1}
.login-right div{position:relative;z-index:2}
.login-page .login-right h3{font-size:20px}
.login-page .login-right{font-size:15px}
.login-page .social-links a{font-size:18px;margin:0 10px 0 0}
.login-page .login-form .form-footer{padding-bottom:15px}
.login-page .right-information{min-height:0;padding:0}
.right-information:before{display:none}
.right-information:after{display:none}
.login-page .left-information{min-height:0}
}