/* Computer/People Image */
body:after {
  content: "";
  background-image: url(../images/login-images/login_illus.png);
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-75%, -50%);
  z-index: -1;
  width: 700px;
  height: 500px;
  display: none;
}

/* Green Background */
.login {
  background: #ffffff;
  background-image: url(../images/login-images/login_bg.jpg);
  background-position: right;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Zywave Logo */
#login h1 a,
.login h1 a {
  background-image: url(../images/login-images/zywave_Logo.png);
  height: 50px;
  width: 177px;
  background-size: 177px 50px;
  background-repeat: no-repeat;
  margin: 0 auto 0 0;
  padding: 0 0 0 45px;
}

/* Messages pop up */
.login #login_error,
.login .message,
.login .success {
  margin-top: 20px;
}

/* Login Form */
#login {
  width: 320px;
  padding: 8% 0 0;
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%);
}

.login form {
  background: transparent;
  border: none;
  box-shadow: none;
}

.login #login form input {
  border: none;
}

.login input[type=text]:focus,
.login input[type=password]:focus,
.login input[type=submit]:focus,
.login input[type=checkbox]:focus {
  outline: none;
  border: none;
  box-shadow: none;
}

#loginform label[for="user_login"],
#loginform label[for="user_pass"] {
  display: none;
}

#user_login,
#user_pass {
  border-radius: 50px;
  font-size: 18px;
  padding: 0 1rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

#loginform > p:nth-child(1) {
  position: relative;
}

#loginform > p:nth-child(1):before {
  content: "";
  background-image: url(../images/login-images/formicon_user.png);
  background-size: contain;
  height: 15px;
  width: 13px;
  position: absolute;
  right: 14px;
  top: 36%;
  transform: translateY(-50%);
  background-repeat: no-repeat;
}

#user_pass {
  margin: 5px 0 20px;
}

.login .button.wp-hide-pw .dashicons {
  top: 0.5rem;
}

.dashicons-visibility:before,
.dashicons-hidden:before {
  color: #5eb544;
}

input::placeholder {
  color: #b4b4b4;
  font-size: 12px;
  transform: translate3d(0, -3px, 0);
}

/* Log In Button */
#wp-submit {
  background: #2778d4;
  border-radius: 50px;
  text-transform: uppercase;
  padding: 3px 33px;
}

/* Remember Me */
.forgetmenot {
  color: #ffffff;
  margin-top: 7px 0 0 7px;
}

#rememberme {
  border-radius: 50%;
  position: relative;
}

/* Remove the default checkmark */
#rememberme:checked:before {
  display: none;
}

/* Add dot in place of the checkmark */
#rememberme:checked:after {
  content: "\2022";
  color: #000000;
  font-size: 32px;
  position: absolute;
  left: 50%;
  top: 35%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

/* Lost your password? and Go to zywave-sites links */
.login #nav,
#backtoblog {
  text-align: right;
  margin: 0;
}

#backtoblog {
  margin: 5px 0 0 0;
}

.login #nav a,
.login #backtoblog a {
  color: #ffffff;
}

body.login .language-switcher,
body.login .wpml-login-ls {
  display: none;
}

@media (min-width: 992px) {
  body:after {
    display: block;
  }
  #login {
    width: 320px;
    padding: 8% 0 0;
    margin: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(50%, -65%);
  }
}