@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);

body {
  background-color: #1F2833;
}

.logo {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

#playfab-password p.failed {
  padding: 0px 0px 0px 0px;
  font-size: 500%;
  font-weight: 150;
  text-align: center;
  color: rgb(255, 0, 0);
}

#playfab-password p.success {
  padding: 0px 0px 0px 0px;
  font-size: 500%;
  font-weight: 150;
  text-align: center;
  color: rgb(0, 255, 0);
}

#playfab-password {
  background: #c5c5c5;
  width: 400px;
  margin: 0 auto;
  margin-top: 8px;
  margin-bottom: 2%;
  font-family: 'Open Sans', sans-serif;
  transition: opacity 1s;
  -webkit-transition: opacity 1s;
}

#playfab-password h1 {
  background: #6E4981;
  padding: 20px 0;
  font-size: 140%;
  font-weight: 300;
  text-align: center;
  color: #fff;
}

#playfab-password p {
  padding: 0px 20px 20px 20px;
  font-size: 100%;
  font-weight: 100;
  text-align: center;
  color: #000;
}

div#playfab-password .playfab-container {
  background: #c5c5c5;
  padding: 6% 4%;
}

div#playfab-password input[type="password"] {
  width: 100%;
  background: #fff;
  margin-bottom: 4%;
  border: 1px solid #ccc;
  padding: 4%;
  font-family: 'Open Sans', sans-serif;
  font-size: 95%;
  color: #555;
}

div#playfab-password input[type="password"]:focus {
  outline-color: rgb(147, 103, 170);
}

div#playfab-password input[type="submit"] {
  width: 100%;
  background: #6E4981;
  border: 0;
  padding: 4%;
  font-family: 'Open Sans', sans-serif;
  font-size: 100%;
  color: #fff;
  cursor: pointer;
  transition: background .3s;
  -webkit-transition: background .3s;
}

div#playfab-password input[type="submit"]:hover {
  background: rgb(147, 103, 170);
}

div#playfab-password input[type="submit"]:focus {
  outline-color: rgb(147, 103, 170);
}