:root {
  --primary-hsl: 200deg, 100%, 31%;
  --primary: hsl(var(--primary-hsl));
}
html.dark {
  --primary-hsl: 199deg, 80%, 64%;
}
.no-auth-wrapper {
  background-image: none !important;
}
.noauth-container > .image {
  background-image: url('/company-brand/hero.svg?v=3') !important;
  background-position: center;
  background-size: cover;
}
.no-auth-wrapper > .logo {
  display: flex;
  justify-content: center;
  margin-inline: auto;
}
.no-auth-wrapper > .logo img.logo {
  inline-size: 244px;
  max-inline-size: min(244px, 80vw);
  max-block-size: 68px;
}
/* The native loading illustration is a separate hardcoded inline SVG. */
.vikunja-loading > svg.logo {
  background: url('/company-brand/shield.png?v=1') center / contain no-repeat;
  inline-size: 96px !important;
  block-size: 96px !important;
  margin-block-end: 20px;
}
.vikunja-loading > svg.logo > * { visibility: hidden; }
svg.logo {
  background: url('/company-brand/logo-light.svg?v=1') center / contain no-repeat;
}
html.dark svg.logo { background-image: url('/company-brand/logo-dark.svg?v=1'); }
svg.logo > * { visibility: hidden; }
.offline {
  background-image: url('/company-brand/hero.svg?v=3') !important;
}