:root{
    --main-shadow-rgb: rgba(17,81,81,0.2);
    --main-color-hex:#30a7aa;
    --gray-font-color-hex:#5f6e6e;
}
*{margin: 0px;padding: 0px;font-family: 'Roboto';  outline:none;user-select:none;-moz-user-select: none;}
*:focus,*::-moz-focus-inner{outline: none !important;border: none}
input{user-select:text !important;-moz-user-select: text !important;}
.bold{font-weight: bold;}
body {margin: 0px; padding: 0px;background-color: #eaf4f4;background-image: url(../images/login/splash_screen.png);background-position-y: -347px;background-position-x: 50%;background-repeat: no-repeat;}
header{background-color: white; height: 160px; text-align: center;}
header img{padding-top: 40px;}
.login_window {background-color: white;width: 338px;min-height: 425px; position: relative; margin-top: 80px; border-radius: 30px;border: 3px solid var(--main-color-hex); margin-left: auto; margin-right: auto; text-align: center;-webkit-box-shadow: 0px 0px 25px 0px var(--main-shadow-rgb);-moz-box-shadow: 0px 0px 25px 0px var(--main-shadow-rgb);box-shadow: 0px 0px 25px 0px var(--main-shadow-rgb);}

#notification{display: none;position: absolute;top:28px;width: 100%;}
#notification #message{display: block;float: left;margin-top: 14px;}
#notification .mdi{font-size: 22px;display: block;float: left;margin: 10px 12px;}
#notification_type{width: 292px;height: 45px;margin: 0 auto;border-radius: 5px;}
.notification-error{background-color: #f5d7d7;}
.notification-error #message,.notification-error .mdi{color: #b15a5a;}
.notification-success{background-color: #32c682;}
.notification-success #message,.notification-success .mdi{color: white;}

.g-recaptcha{margin: 0 auto;height: 77px;width: 302px;}
button:hover{background-color:var(--gray-font-color-hex) }
.forget_pass:hover{color:var(--gray-font-color-hex) }
.ease,.input_div input:focus,button:hover,.forget_pass:hover{-webkit-transition: all 250ms ease-out;-moz-transition: all 250ms ease-out;-ms-transition: all 250ms ease-out;-o-transition: all 250ms ease-out;transition: all 250ms ease-out;}
.input_div {position: relative; width: 292px;height: 41px; margin: 0 auto;background-color: #f5fafa; border-radius: 25px;}
.input_div input {padding-left: 46px;font-size: 17px;height: 41px;background-color: #f5fafa; border: 2px solid transparent;  border-radius: 25px; height: 41px; width: 292px; box-sizing: border-box;}
.input_div input:focus {border: 2px solid var(--main-color-hex); border-radius: 25px;}            
.input_div i {position: absolute;z-index: 9; top: 7px;left: 8px; padding: 0px 8px; color: var(--gray-font-color-hex);font-size: 21px; }
button{width: 193px; height: 44px;border: 0px; color: white; font-size: 17px;background-color: var(--main-color-hex);  border-radius: 30px;cursor: pointer;}

.forget_pass, .back_to_login{color: var(--main-color-hex); font-size: 20px;display: block;text-decoration: none;}
.enter_details{color: var(--gray-font-color-hex);font-size: 18px;margin: 0 auto !important}
.text_center{text-align: center !important;}
.text_justify{text-align:  left !important;font-size: 14px !important;width: 300px !important;}
.spacer{height: 20px;}
.mdi-eye,.mdi-eye-off{right: 11px !important;top: 7px !important;left:initial !important;cursor: pointer;}
#forgetPass{display: none;}
.loading_bg{position: absolute;top:calc(50% - 42px);left:calc(50% - 42px);width: 84px;height: 84px;display: none;}
@media only screen and (max-width: 516px) {
    header{height: 90px;}
    .login_window {margin-top:40px;width: 325px;}
    header img{width: 55% !important;padding-top: 20px;}
}