*, :after, :before{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
body{font-family: 'Nunito Sans', sans-serif; margin: 0; width:100%; padding: 0;}
p{font-size:13px; text-decoration: none; color:#4f4f4f;line-height:20px;}
h1{color:#525252; margin: 0; padding: 0; font-size: 26px; margin-bottom: 30px; text-align: center;}
img{vertical-align: middle; max-width: 100%;}
input {outline: none;border: none;}
input:focus::-webkit-input-placeholder { color:transparent; outline:none;}
input:focus:-moz-placeholder { color:transparent; outline:none;}
input:focus::-moz-placeholder { color:transparent; outline:none;}
input:focus:-ms-input-placeholder { color:transparent; outline:none;}		

.centered{width: 100%;min-height: 100vh; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; padding: 15px; background:#00af74;}

.loginbox{width: 390px; background: #fff; border-radius: 3px; overflow: hidden; padding: 40px; -moz-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1); -o-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1); -ms-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1); box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);}
.logo{text-align: center; margin-bottom: 20px;}

/*======= Input =====*/
.wrap-input {width: 100%; position: relative; border-bottom: 1px solid #adadad; margin-bottom: 37px;}
.form-input {font-size: 15px; color: #555555; line-height: 1.2; display: block; width: 100%; height: 45px; background: transparent; padding: 0 5px;}

.focus-label {position: absolute; top: -7px; left: 5px; pointer-events: none; font-weight:bold; font-size:12px;}

.focus-span {position: absolute; display: block; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none;}
.focus-span::before {content: ""; display: block; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px;  -webkit-transition: all 0.4s; -o-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; background: #00af74;}

.focus-span::after {font-family: 'Nunito Sans', sans-serif; font-size: 15px; color: #999999; line-height: 1.2; content: attr(data-placeholder); display: block; width: 100%;
position: absolute; top: 16px; left: 0px; padding-left: 5px; -webkit-transition: all 0.4s; -o-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s;}
.form-input:focus + .focus-span::after {top: -15px; } 
.form-input:focus + .focus-span::before {width: 100%;}
.has-val.form-input + .focus-span::after {top: -15px;}
.has-val.form-input + .focus-span::before {width: 100%;}

.form-btn{background:#00af74; color: #FFF;text-decoration: none; outline:none; font-family: 'Nunito Sans', sans-serif; font-size: 20px; font-weight: 600; border-radius: 2px; padding: 6px 20px; cursor: pointer; -webkit-transition: all 0.4s; -o-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s; border: 2px solid #00af74;}
.form-btn:hover{background: transparent; color: #00af74;}


.validate-input {position: relative;}
.alert-validate::before {content: attr(data-validate); position: absolute; top: 100%; left: 0px; font-family: 'Nunito Sans', sans-serif; color: #c80000; font-size: 12px; line-height: 1; text-align: left; padding-top: 7px;}

.alert {position: relative; padding: .5rem .75rem; border: 1px solid transparent; border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; border-radius: 2px; font-size: 13px;}
.alert-info {color: #0c5460; background-color: #d1ecf1; border-color: #bee5eb; margin-top: 20px;}
.alert-info strong{display: block;}
.alert-error{color: #721c24; background-color: #f8d7da; border-color: #f5c6cb; }
.errormsg {color: red; font-size: 12px; display: block; text-align:left; position:absolute; top:100%; padding-top:5px;}
.successmsg {color: green; font-size: 12px; text-align:left; position:absolute; padding-top:5px;}
.loader {display: none;width: 200px;height: 200px;position: absolute;top: 48%;left: 48%;padding: 2px;z-index: 20}
.blockui {position: fixed; -webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease;}

.cgsupporttext {text-align:center; margin-bottom:0;}

@keyframes example {
    0%   {opacity: 1;}
    25%  {opacity: 0;}
    50%  {opacity: 1;}
    75%  {opacity: 0;}
    100% {opacity: 1;}
}
@media only screen and (max-width: 460px) {
    .loginbox{width: 100%;}
	
}