:root {
  --opm-primary: #211f68;
  --opm-accent: #42429b;
}

body > nav.navbar {
  border-bottom-left-radius: 30px;
  border-bottom-right-radius: 30px;
  /*border-bottom: 1px solid var(--theme-color);*/
}

/* Login / signup / forgot-password pages.
   login.bundle.scss paints the primary buttons with --gray-900/--gray-800,
   so rebinding those vars here is the lightest way to brand them. */
body[data-path="login"] {
  --gray-900: var(--opm-primary);
  --gray-800: var(--opm-accent);
}

body[data-path="login"] {
  background-color: #f6f6f6;
}

body[data-path="login"] .login-content.page-card {
  background: #fff;
  border: 1px solid #e7ebf0;
  border-radius: 8px;
  padding: 2rem;
  box-shadow: inset 0 3px 0 var(--opm-primary),
    0 12px 32px rgba(33, 31, 104, 0.08);
}

body[data-path="login"] .page-card .app-logo {
  max-height: 54px;
}

body[data-path="login"] .form-control:focus {
  border-color: var(--opm-accent);
  box-shadow: 0 0 0 2px rgba(66, 66, 155, 0.25);
}

body[data-path="login"] .forgot-password-message a,
body[data-path="login"] .sign-up-message a {
  color: var(--opm-accent);
}