#design-login {
  text-align: center;
  background: #fff;
  padding: 20px;
  margin: 0 auto;
  width: 80vw;
}
#design-login-popup #design-login {
  padding: 10px 0;
}

@media screen and (min-width: 30em) {

  #design-login-popup #design-login {
    padding: 20px;
  }

}

@media screen and (min-width: 60em) {

  #design-login-popup #design-login {
  }

}

#design-login .login-form {
  margin: 0 auto 42px auto;
}
#design-login .login-notice {
  background: #FFEDD2;
  padding: 20px;
  margin: 0 auto 20px auto;
}
#design-login .login-form,
#design-login .login-notice {
  text-align: left;
  display: none;
}
#design-login .login-form.active,
#design-login .login-notice.active {
  display: block;
}
#design-login .login-form .login-form-content {
  width: 100%;
  margin: 0 auto 28px auto;
}
#design-login .login-form .login-form-content .login-form-label {
  text-align: left;
  color: #777;
}
#design-login .login-form .login-form-content .login-form-input {
  text-align: left;
  margin: 0 auto 14px auto;
}

@media screen and (min-width: 30em) {

  #design-login {
    width: auto;
  }
  #design-login .login-form,
  #design-login .login-notice {
    min-width: 440px;
    max-width: 520px;
    text-align: center;
  }
  #design-login .login-form .login-form-content {
    width: 80%;
  }

}

@media screen and (min-width: 60em) {

  #design-login .login-form,
  #design-login .login-notice {
    min-width: 620px;
    max-width: 800px;
  }
  #design-login .login-form .login-form-content {
    width: 70%;
  }

}

#design-login .login-form .login-form-title {
  font-weight: bold;
  text-align: center;
  margin: 0 auto 18px auto;
}
#design-login .login-form .login-form-description {
  text-align: left;
  margin: 0 auto 18px auto;
  color: #777;
}

#design-login .login-form input {
  margin-bottom: 12px;
}

#design-login .login-form input:last-child {
  margin-bottom: 0;
}

#design-login .login-form .button {
  width: 100%;
}

@media screen and (min-width: 60em) {

  #design-login .login-form .button {
    width: 74%;
  }

}

#design-login .text-links {
  display: block;
  margin: 0 auto 42px auto;
  padding: 10px 16px;
  text-align: left;
  font-size: 14px;
  background: #eee;
}
#design-login .text-links li {
  display: block;
  margin: 0 auto 12px auto;
}
#design-login .text-links li:last-child {
  margin-bottom: 0;
}
#design-login .text-links li a {}
#design-login .text-links li a.active {
  color: #666;
  text-decoration: none;
  font-weight: bold;
}
#design-login .text-links li a .fas {
  display: none;
}
#design-login .text-links li a.active .fas {
  display: inline-block;
}

@media screen and (min-width: 30em) {

  #design-login .text-links {
    text-align: center;
    margin-bottom: 20px;
  }
  #design-login .text-links li {
    display: inline;
    margin: 0 8px;
  }

}

#design-login .loading {
  margin: 0 auto 20px auto;
}
#design-login.lock .loading {
  display: block;
}
#design-login.lock .login-form {
  opacity: 0.3;
}

#design-login .login-form .login-submit-buttons {
  margin: 0 auto;
  text-align: center;
  padding: 18px 0 0 0;
}


#design-login .login-form .confirm-numbers {
  text-align: center;
}
#design-login .login-form .confirm-number {
  display: inline-block;
  text-align: center;
  width: 38px;
  font-size: 20px;
  margin: 0 4px;
}
#design-login .login-form .confirm-number.entered {
  background: #e7f0f7;
}
#design-login .login-form .confirm-number.invalid {
  background: #f7b8b8;
}

@media screen and (min-width: 30em) {

  #design-login .login-form .confirm-number {
    width: 44px;
    font-size: 22px;
    margin: 0 5px;
  }

}

@media screen and (min-width: 60em) {

  #design-login .login-form .confirm-number {
    font-size: 24px;
    width: 52px;
    margin: 0 6px;
  }

}

#design-login .login-form .confirmed-form {
  text-align: left;
}

@media screen and (min-width: 30em) {

  #design-login .login-form .confirmed-form {
    text-align: center;
  }

}



body.my-design #design-login .text-links #request-design-login-user-register-show {
  display: none;
}



#design-login .login-form.user-login {}
#design-login .login-form.user-login .button {
  display: block;
  margin: 0 auto 14px auto;
  text-align: center;
}
#design-login .login-form.user-login #login-account-selectable .button .lsf {
  font-size: 20px;
  line-height: 20px;
}
#design-login .login-form.user-login #login-account-mail {}

body.my-design #my-design-account {
  border: 1px solid #ccc;
  background: #fff;
  padding: 20px;
}
body.my-design #my-design-account .title {
  font-weight: bold;
  margin: 0 auto 14px auto;
}

#wpg-login {
  display: none;
}

#design-login-popup #close-design-login-popup {
  width: 50%;
}

@media screen and (min-width: 30em) {

  #design-login-popup #close-design-login-popup {
    width: auto;
  }

}