body {
  background-color: #336081;
  font-size: 22px;
}
@media screen and (min-width: 640px) {
  body {
    background: transparent url(../img/login-bkg.png) no-repeat;
  }
}
.wrapper {
  position: absolute;
  top: 33%;
  left: 50%;
  height: 300px;
  width: 400px;
  margin: -150px 0 0 -200px;
  text-align: center;
}
ul,
li {
  text-align: left;
}
p {
  color: #fff;
}
a {
  color: #ccc;
}
a:hover {
  color: #fff;
}
#logo {
  height: 200px;
  background: transparent url(../img/logo.svg) no-repeat center;
  background-size: 200px;
  -webkit-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.test-version {
  color: #ff5511;
}
::-webkit-input-placeholder {
  color: #000;
  opacity: 1;
  font-weight: 200;
  text-align: center;
}
::-moz-placeholder {
  color: #000;
  opacity: 1;
  font-weight: 200;
  text-align: center;
}
:-ms-input-placeholder {
  color: #000;
  opacity: 1;
  font-weight: 200;
  text-align: center;
}
input[type="text"],
input[type="password"] {
  display: block;
  width: 100%;
  border: solid 1px #bbb;
  padding: 13px 20px;
  margin-top: 15px;
}
input[type="submit"] {
  display: block;
  border: 0;
  margin: 15px auto 0 auto;
  padding: 9px 12px 11px 12px;
  box-shadow: 1px 1px 0 0 #000;
  background-color: #3992d4;
  color: #fff;
  font-weight: 400;
}
.highlight {
  margin: 10px 0 0 20px;
  color: #fb8866;
}
#login-failed,
.errornote,
.errorlist li {
  color: #fb8866;
}
.help {
  color: #eee;
  font-size: 14px;
}
footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
footer div > div {
  position: absolute;
  left: 50%;
  width: 1200px;
  margin-left: -600px;
}
footer #credits {
  height: 50px;
  padding: 10px 0;
  background: rgba(214, 225, 239, 0.9);
}
footer #credits div,
footer #credits a {
  color: #444;
  font-size: 13px;
  line-height: 20px;
  text-align: left;
}