*{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.jpg") 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: rgb(234 234 234 / 19%);/* 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: 40px;box-shadow: 0 0 5px 1px #e9e9e9;border-radius: 6px;border-radius: 5px 3% 3% 30%;}

input[type=text],input[type=password] {padding: 5px;border:thin solid #ddd;font-weight: 300;display: inline-block;width: calc(100% - 30px);border-radius: 0 6px 6px 0;}
.auth-form > div:not(.auth-err) {margin: 10px 0;background: #f0f0f0;border-radius: 6px 6px 6px 6px;}
.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: #219888d4;color:#fff;border:0;cursor: pointer;width:100%;padding: 10px 0;margin:10px 0;border-radius: 6px 6px 6px 30px;}
input[type=submit]:active {background:#3498db;}


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