*{font-family: 'Roboto',sans-serif; font-weight: 300;}
body{height: 100%;margin: 0; font-family: 'Roboto',sans-serif;}

.wrapper{background: url("/tpl/basic/img/bgi.png") no-repeat 0 60%;-webkit-background-size: cover;background-size: cover;width: 100%;height: 100%;position: absolute;}
.container{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(235,235,235,.8);background-image:  url("/tpl/basic/img/dotted.png");background-repeat: repeat;-webkit-background-size: 603px 609px;background-size: 603px 609px;background-position: 50% -150px;}


.logo {text-align: center; margin:10px 0 30px 0;height: 55px;}
.form-group{width: 280px;margin: 100px auto 0 auto;text-align: center; background: #fff; padding: 50px;box-shadow: 0 0 5px 1px #ddd;}

input[type=text],input[type=password] {padding:15px;border:thin solid #ddd;font-weight: 300;display: inline-block;width: calc(100% - 30px);}
.auth-form > div:not(.auth-err) {margin:15px 0; background: #f0f0f0;}
.auth-form div:not(.auth-err) > i {color:#555;font-size:12px;display: inline-block;width:30px;text-align: center;}


::-webkit-input-placeholder {color:#8494a7;}
::-moz-placeholder          {color:#8494a7;}
:-moz-placeholder           {color:#8494a7;}
:-ms-input-placeholder      {color:#8494a7;}
input:focus{outline: none;}


input[type=submit] {background: #216998; color:#fff;border:0; cursor: pointer;width:100%;padding:15px 0;margin:10px 0}
input[type=submit]:active {background:#3498db;}


.auth-err {background:#cc5d58 !important; color:#fff; padding:15px;font-size: 14px; text-align: left !important;}
.auth-err i {margin:0 5px 0 0; color:#fff !important;}