html, body {    width: 100%;    height: 100%;}
body {	background-color:#f4f4f4;    padding: 0;    margin-top:5%;}
#logo, #loginbox {    width: 30%;    margin-left: auto;    margin-right: auto;    position: relative;}
#logo img {  margin: 0 auto;    display: block;}
#loginbox { overflow: hidden !important;    text-align: left;    position: relative; border-radius: 10px; box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;}
#loginbox form{	width:100%; background:#fff;	position:relative;	top:0;	left:0; }
#loginbox label, #loginbox .flip-link, #loginbox input[type="submit"], #loginbox input[type="button"], #loginbox button, #loginbox .abcRioButtonContents { font-size: 16px !important; }
#loginbox .form-actions {	padding: 0px 50px 40px; margin-top: 0; background-color: #fff; border-top: 0}
#loginbox .form-actions .pull-left { margin-top:0px;}
#loginbox form#loginform {	z-index: 200; display:block;}
#loginbox form#loginform .login-block {	padding: 30px 30px 0px;}
#loginbox form#loginform .reset {	padding: 5px 50px 15px; text-align: right}
#loginbox form#recoverform {	z-index: 100;	    display:none;}
#loginbox .main_input_box { margin:0 auto;}
#loginbox .main_input_box .add-on { background-color: #ddd; height:42px; width:42px; display: flex; justify-content: center; align-items: center; border-radius: 10px 0 0 10px;}
#loginbox .main_input_box .align-start {text-align: left;}
#loginbox .main_input_box #show-password {position: absolute; top: 10px; right: 10px}
#loginbox .main_input_box input{ box-sizing: border-box; margin: 0px !important; padding: 20px 10px; border-radius: 0 10px 10px 0; height:30px; display:inline-block; width:100%;  border: 1px solid #dadada; margin-bottom:3px;}
#loginbox .main_input_box .recover-block{ padding: 20px 50px;}
#loginbox #recoverform .form-actions .btn-submit { height:40px; width: 65px; color: #fff; background-color: #00ab41; border: 1px solid #fefefe; border-radius: 5px; margin-bottom: 15px}
#loginbox #recoverform .form-actions .btn-submit:hover {background-color: #fff; color: #00ab41; border: 1px solid #00ab41;}
#loginbox #recoverform .form-actions .btn-back { height:40px; width: 65px; color: #fff; background-color: #6c757d; border: 1px solid #fefefe; border-radius: 5px; margin-bottom: 15px}
#loginbox #recoverform .form-actions .btn-back:hover { background-color: #fff; color: #6c757d; border: 1px solid #6c757d; }
#loginbox #loginform .form-actions .btn-submit { height:40px; width: 100%; color: #fff; background-color: #00ab41; border: 1px solid #fefefe; border-radius: 5px; margin-bottom: 15px}
#loginbox #loginform .form-actions .btn-submit:hover { background-color: #fff; color: #00ab41; border: 1px solid #00ab41;}
#loginbox #loginform .form-actions .abcRioButton.abcRioButtonLightBlue { width: 100% !important; height: 35px !important; border-radius: 5px}
#loginbox .control-group{ padding: 10px 20px; /*border-bottom:1px solid #f6f6f6;*/ margin-bottom:0px;}
.form-vertical, .form-actions {    margin-bottom: 0;}
#loginbox .normal_text{ padding:15px 10px; text-align:center; font-size:14px; line-height:20px; background:#49CCED; color:#fff; }
@media (max-width: 480px){
#logo { width: 40%; }
#loginbox{ width:90%}
#loginbox .control-group{ padding:8px 0; margin-bottom:0px;}
}
@media (max-width: 768px){
    #loginbox{ width:60%}
    }
@keyframes hideAnimation{
    0%{
      opacity: 1;
    }
    75%{
      opacity: 1;
    }
    100%{
      display: none;
      opacity: 0;
    }
  }
.a-hide {  
    animation-name: hideAnimation;
    animation-duration: 4000ms;
    animation-fill-mode: forwards;
 }