:root {
  --fko-login-navy: #031a37;
  --fko-login-orange: #ff5a00;
  --fko-login-white: #ffffff;
  --fko-login-line: #dce4ee;
  --fko-login-muted: #536682;
}

body.login {
  display: grid;
  min-height: 100vh;
  place-items: center;
  margin: 0;
  background: var(--fko-login-navy);
  color: var(--fko-login-navy);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.login #login {
  width: min(420px, calc(100% - 32px));
  padding: 38px 0;
}

.login h1 a {
  width: 76px;
  height: 76px;
  margin-bottom: 20px;
  background-position: center;
  background-size: contain;
}

.login form {
  margin-top: 0;
  padding: 30px;
  border: 1px solid #284666;
  border-radius: 10px;
  background: var(--fko-login-white);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .24);
}

.login label { color: var(--fko-login-navy); font-weight: 700; }
.login form .input, .login input[type="text"] {
  min-height: 46px;
  border: 1px solid #b8c5d6;
  border-radius: 6px;
  background: #fff;
  color: var(--fko-login-navy);
  box-shadow: none;
}
.login form .input:focus, .login input[type="text"]:focus {
  border-color: var(--fko-login-orange);
  box-shadow: 0 0 0 2px rgba(255, 90, 0, .18);
}
.login .button-primary {
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid var(--fko-login-orange);
  border-radius: 6px;
  background: var(--fko-login-orange);
  color: #fff;
  font-weight: 800;
  text-shadow: none;
  box-shadow: none;
}
.login .button-primary:hover, .login .button-primary:focus {
  border-color: #d94b00;
  background: #d94b00;
}
.login #nav, .login #backtoblog { text-align: center; }
.login #nav a, .login #backtoblog a { color: #d7e0eb; }
.login #nav a:hover, .login #backtoblog a:hover { color: var(--fko-login-orange); }
.login .message, .login .notice, .login #login_error {
  border-left-color: var(--fko-login-orange);
  border-radius: 6px;
}
.login .privacy-policy-page-link a { color: #a9bbce; }