:root {
  --famtoes-bg: #f3f3ee;
  --famtoes-card: #ffffff;
  --famtoes-ink: #242424;
  --famtoes-muted: #6c6b67;
  --famtoes-line: #deded7;
  --famtoes-soft: #e9e9e2;
}

body {
  color: var(--famtoes-ink);
}

body.task-login {
  background: var(--famtoes-bg) !important;
}

body.task-login #layout {
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.95) 0, rgba(255,255,255,0) 38%),
    var(--famtoes-bg) !important;
}

body.task-login #layout-content {
  width: min(440px, calc(100% - 32px));
  max-width: 440px;
  padding: 48px 44px 38px;
  border: 1px solid rgba(36,36,36,.10);
  border-radius: 24px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 24px 70px rgba(24,24,20,.08);
  backdrop-filter: blur(14px);
}

body.task-login #logo {
  display: none !important;
}

body.task-login #layout-content::before {
  content: "FAMTOES.NL";
  display: block;
  margin-bottom: 12px;
  color: var(--famtoes-muted);
  font: 500 13px/1.2 Arial, sans-serif;
  letter-spacing: .22em;
  text-align: center;
}

body.task-login #login-form::before {
  content: "Familie Toes";
  display: block;
  margin: 0 0 30px;
  color: var(--famtoes-ink);
  font: italic 52px/1.05 Georgia, "Times New Roman", serif;
  letter-spacing: -.035em;
  text-align: center;
}

body.task-login #login-form::after {
  content: "Veilig inloggen op uw FamToes e-mail";
  display: block;
  margin-top: 20px;
  color: var(--famtoes-muted);
  font: 400 13px/1.5 Arial, sans-serif;
  text-align: center;
}

body.task-login .input-group {
  margin-bottom: 12px;
}

body.task-login .form-control,
body.task-login .input-group-text {
  min-height: 52px;
  border-color: var(--famtoes-line);
  background: rgba(255,255,255,.92);
  color: var(--famtoes-ink);
  box-shadow: none !important;
}

body.task-login .form-control:focus {
  border-color: var(--famtoes-ink);
}

body.task-login .btn-primary {
  min-height: 52px;
  border-color: var(--famtoes-ink) !important;
  border-radius: 8px;
  background: var(--famtoes-ink) !important;
  color: #fff !important;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: none !important;
  box-shadow: none !important;
}

body.task-login .btn-primary:hover,
body.task-login .btn-primary:focus {
  border-color: #000 !important;
  background: #000 !important;
}

body.task-login #login-footer {
  margin-top: 18px;
  color: var(--famtoes-muted);
  font-size: 12px;
}

#layout-menu,
#layout-menu .popover-header {
  background-color: var(--famtoes-ink) !important;
}

.btn-primary,
.floating-action-buttons .button {
  border-color: var(--famtoes-ink) !important;
  background-color: var(--famtoes-ink) !important;
}

.listing li.selected,
.listing tr.selected td {
  background-color: var(--famtoes-soft) !important;
  color: var(--famtoes-ink) !important;
}

@media (max-width: 575px) {
  body.task-login #layout-content {
    padding: 38px 24px 30px;
    border-radius: 18px;
  }

  body.task-login #login-form::before {
    font-size: 42px;
  }
}