/* The Learning Portal sign-in page, Gen 3 (class-login.php). Every rule starts html body.login.erl-login so it
   out-ranks LoginPress's own styles, which print later in the head; !important only where LoginPress uses it. */
html body.login.erl-login{
  --lg-navy:#0E4E6C;--lg-navy-h:#0C425C;--lg-blue:#0DABC9;--lg-red:#D02030;--lg-red-h:#B51B29;
  --lg-ink:#1F2A33;--lg-muted:#5B6B78;--lg-line:#DCE5EC;--lg-page:#F3F7FA;--lg-tint:#E4F3F8;
  --lg-font:'Open Sans',Calibri,'Segoe UI',Arial,sans-serif;
  margin:0;min-height:100vh;height:auto;display:flex;flex-direction:column;
  background:var(--lg-page)!important;background-image:none!important;
  font-family:var(--lg-font);color:var(--lg-ink);
}
html body.login.erl-login:after,html body.login.erl-login:before{display:none!important}
html body.login.erl-login .loginpress-show-love,html body.login.erl-login .footer-wrapper,
html body.login.erl-login #loginpress_video-background-wrapper{display:none!important}

/* the logo bar and the band */
html body.login.erl-login .erl-lg-in{max-width:1180px;margin:0 auto;padding:14px 24px;display:flex;justify-content:space-between;align-items:center;gap:16px}
html body.login.erl-login .erl-lg-top{background:#fff;border-bottom:4px solid var(--lg-red)}
html body.login.erl-login .erl-lg-top img{display:block;height:40px;width:auto}
html body.login.erl-login .erl-lg-site{font-size:14px;font-weight:700;color:var(--lg-navy);text-decoration:none}
html body.login.erl-login .erl-lg-site:hover{color:var(--lg-navy-h);text-decoration:underline}
html body.login.erl-login .erl-lg-band{background:var(--lg-navy);color:#fff;border-bottom:6px solid var(--lg-blue);
  background-image:radial-gradient(circle at 82% 40%,rgba(13,171,201,.35),transparent 40%)}
html body.login.erl-login .erl-lg-band .erl-lg-in{display:block;text-align:center;padding:34px 24px 170px}
html body.login.erl-login .erl-lg-kicker{font-size:12px;font-weight:700;letter-spacing:2px;color:#7FD6E8;margin:0 0 6px}
html body.login.erl-login .erl-lg-h{margin:0;font-size:34px;line-height:1.2;font-weight:800;color:#fff}
html body.login.erl-login .erl-lg-sub{margin:8px 0 0;color:#CFE7F0;font-size:16px}

/* the card */
html body.login.erl-login #login{
  box-sizing:border-box;width:440px;max-width:calc(100% - 32px)!important;margin:-90px auto 0;padding:0 32px 24px;position:relative;z-index:1;
  background:#fff;border-top:4px solid var(--lg-blue);border-radius:10px;box-shadow:0 4px 18px rgba(11,42,74,.10)!important;
}
html body.login.erl-login #login h1.wp-login-logo{margin:0;padding:0}
html body.login.erl-login #login .wp-login-logo a{
  width:132px!important;height:132px!important;margin:-70px auto 14px;padding:0;
  background-color:#fff;background-size:cover!important;background-position:center;background-repeat:no-repeat;
  border-radius:50%;box-shadow:0 2px 10px rgba(11,42,74,.18);text-indent:-9999px;overflow:hidden;
}
html body.login.erl-login #loginform,html body.login.erl-login #lostpasswordform,html body.login.erl-login #resetpassform,
html body.login.erl-login #registerform{
  background:transparent!important;border:0;box-shadow:none;padding:0!important;margin:0;min-height:0;overflow:visible;
}
html body.login.erl-login #login form p,html body.login.erl-login #login form .user-pass-wrap{margin:0 0 14px}
html body.login.erl-login #login label{display:block;font-size:14px;font-weight:700;color:var(--lg-navy);margin:0 0 6px;line-height:1.4}
html body.login.erl-login #login form .input,html body.login.erl-login #login input[type="text"],
html body.login.erl-login #login input[type="password"],html body.login.erl-login #login input[type="email"]{
  width:100%;margin:0;font-family:inherit;font-size:16px;line-height:1.4;padding:12px 14px;min-height:50px;
  border:2px solid var(--lg-line);border-radius:8px;background:#fff;box-shadow:none;color:var(--lg-ink);
}
html body.login.erl-login #login form .input:focus,html body.login.erl-login #login input[type="text"]:focus,
html body.login.erl-login #login input[type="password"]:focus{outline:none;border-color:var(--lg-blue);box-shadow:0 0 0 1px var(--lg-blue)}
html body.login.erl-login #login .wp-pwd{position:relative}
html body.login.erl-login #login .wp-pwd .input{padding-right:52px}
html body.login.erl-login #login .button.wp-hide-pw{top:3px;right:3px;height:44px;width:44px;min-height:0;color:var(--lg-navy);background:transparent;border:0;box-shadow:none}
html body.login.erl-login #login .button.wp-hide-pw:focus{box-shadow:0 0 0 2px var(--lg-blue)}
html body.login.erl-login #login .forgetmenot{display:flex;align-items:center;gap:8px;float:none;margin:4px 0 18px}
html body.login.erl-login #login .forgetmenot label{display:inline;margin:0;font-size:14px;font-weight:600;color:var(--lg-ink)}
html body.login.erl-login #login input[type="checkbox"]{margin:0;border:2px solid var(--lg-line);border-radius:4px;box-shadow:none}
html body.login.erl-login #login input[type="checkbox"]:checked{background:var(--lg-navy)!important;border-color:var(--lg-navy)}
html body.login.erl-login #login input[type="checkbox"]:checked::before{filter:brightness(0) invert(1)}
html body.login.erl-login #login p.submit{margin:0;clear:both}
html body.login.erl-login.wp-core-ui #login .button-primary{
  display:block;float:none;width:100%;min-height:50px;height:auto;padding:14px;margin:0;
  font-family:inherit;font-size:16px;font-weight:700;line-height:1.3;color:#fff;
  background:var(--lg-red)!important;border:0;border-radius:8px;box-shadow:none;text-shadow:none;
}
html body.login.erl-login.wp-core-ui #login .button-primary:hover,html body.login.erl-login.wp-core-ui #login .button-primary:focus{background:var(--lg-red-h)!important}
html body.login.erl-login.wp-core-ui #login .button-primary:focus{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--lg-red)}
html body.login.erl-login #nsl-custom-login-form-main .nsl-container-login-layout-below{padding:14px 0 0}

/* messages WordPress shows on the card (signed out, check your email, wrong password) */
html body.login.erl-login #login .message,html body.login.erl-login #login .notice,html body.login.erl-login #login .success,
html body.login.erl-login #login #login_error{
  margin:0 0 16px;padding:12px 14px;border:0;border-left:4px solid var(--lg-blue);border-radius:6px;
  background:var(--lg-tint);box-shadow:none;color:var(--lg-ink);font-size:14px;line-height:1.5;
}
html body.login.erl-login #login #login_error,html body.login.erl-login #login .notice-error{border-left-color:var(--lg-red);background:#FBEAEC}

/* under the button: Forgot your password?, then the support line */
html body.login.erl-login #login #nav{margin:16px 0 0;padding:0;text-align:center;font-size:14px}
html body.login.erl-login #login #nav a{color:var(--lg-navy);font-weight:600;text-decoration:underline}
html body.login.erl-login #login #nav a:hover{color:var(--lg-navy-h)}
html body.login.erl-login #login #backtoblog{margin:18px 0 0;padding:14px 0 0;border-top:1px solid var(--lg-line);text-align:center}
html body.login.erl-login .erl-lg-help{display:block;font-size:13px;line-height:1.5;color:var(--lg-muted)}
html body.login.erl-login .erl-lg-help b{color:var(--lg-navy)}
html body.login.erl-login .privacy-policy-page-link{text-align:center;margin:16px 0 0}
html body.login.erl-login .privacy-policy-page-link a{color:var(--lg-navy)}

/* below the card */
html body.login.erl-login .erl-lg-back{text-align:center;margin:18px 16px 32px;font-size:14px}
html body.login.erl-login .erl-lg-back a{color:var(--lg-navy);font-weight:600;text-decoration:underline}
html body.login.erl-login .erl-lg-foot{margin-top:auto;background:#fff;border-top:6px solid var(--lg-blue)}
html body.login.erl-login .erl-lg-foot .erl-lg-in{padding:16px 24px;font-size:13px;color:var(--lg-muted)}
html body.login.erl-login .erl-lg-foot img{display:block;height:30px;width:auto}

@media (max-width:480px){
  html body.login.erl-login .erl-lg-in{padding:12px 16px}
  html body.login.erl-login .erl-lg-band .erl-lg-in{padding:28px 16px 160px}
  html body.login.erl-login .erl-lg-h{font-size:30px}
  html body.login.erl-login .erl-lg-sub{font-size:15px}
  html body.login.erl-login #login{padding:0 22px 22px}
  html body.login.erl-login .erl-lg-top img{height:36px}
}