/* ==================================================================
   poggle web theme · v1
   Everything outside /app: the login page and website pages.
   ================================================================== */

body {
  font-family: var(--pg-font) !important;
  background-color: var(--pg-cream);
  color: var(--pg-ink);
}

/* ---------- login page --------------------------------------------- */
.for-login,
.for-signup,
.for-forgot,
.for-login-with-email-link {
  background-color: var(--pg-cream);
}

.for-login .page-card,
.for-signup .page-card,
.for-forgot .page-card,
.login-content.page-card {
  background: var(--pg-paper);
  border: 1px solid var(--pg-line);
  border-radius: var(--pg-r-md);
  box-shadow: var(--pg-shadow-float);
  padding: var(--pg-s6) var(--pg-s5);
}

/* the brand above the card */
.page-card-head img,
.for-login .app-logo,
.login-content img.app-logo {
  height: 56px !important;
  width: auto !important;
  max-width: 220px;
  border-radius: 12px;
}

.for-login h4,
.for-login .page-card-head,
.login-content h4 {
  font-family: var(--pg-font);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--pg-ink);
}

/* inputs */
.for-login .form-control,
.login-content .form-control {
  border: 2px solid var(--pg-line);
  border-radius: var(--pg-r-sm);
  padding: 11px 14px;
  font-size: 15px;
  background: var(--pg-paper);
  color: var(--pg-ink);
}

.for-login .form-control:focus,
.login-content .form-control:focus {
  border-color: var(--pg-blue);
  box-shadow: none;
  outline: none;
}

/* the login button — pink pill */
.for-login .btn-primary,
.for-login .btn-login,
.login-content .btn-primary {
  background-color: var(--pg-pink) !important;
  border-color: var(--pg-pink) !important;
  color: #fff !important;
  border-radius: var(--pg-r-pill) !important;
  font-weight: 800;
  font-size: 15px;
  padding: 12px 24px;
}

.for-login .btn-primary:hover {
  filter: brightness(0.95);
}

.for-login a,
.login-content a {
  color: var(--pg-blue);
}

/* ---------- website chrome ------------------------------------------ */
.navbar-light,
.web-footer {
  background-color: var(--pg-cream) !important;
  border-color: var(--pg-line) !important;
}

.navbar-brand img {
  height: 30px;
  width: auto;
}

.web-footer,
.web-footer .footer-logo-extension {
  color: var(--pg-muted);
}

.btn-primary,
.btn-primary-light {
  background-color: var(--pg-pink) !important;
  border-color: var(--pg-pink) !important;
  border-radius: var(--pg-r-pill) !important;
  font-weight: 800;
}