/* Inlogscherm, gelijk aan dat van het facturatiesysteem (Django-admin met
   Unfold): kolom van 24rem met logo, scheidingslijn, veld en knoppen, en op
   brede schermen de foto rechts. Kleuren zijn de Unfold-basiskleuren en het
   blauw van Reclame aan de Kust uit de instellingen van de facturatie. */

@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/inter-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/inter-latin-600-normal.woff2) format('woff2')}

:root{
  --lg-base-100:oklch(96.7% .003 264.542);
  --lg-base-200:oklch(92.8% .006 264.531);
  --lg-base-600:oklch(44.6% .03 256.802);
  --lg-base-900:oklch(21% .034 264.665);
  --lg-primair:oklch(53% .145 242);
  --lg-rood:oklch(57.7% .245 27.325);
  --lg-rood-100:oklch(93.6% .032 17.717);
  --lg-rood-700:oklch(50.5% .213 27.518);
}
*,*::before,*::after{box-sizing:border-box}
.lg-body{margin:0;background:#fff;color:var(--lg-base-600);font-family:Inter,sans-serif;font-size:14px;line-height:20px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.lg-page{display:flex;min-height:100vh;background:#fff}
.lg-kolom{display:flex;flex-grow:1;align-items:center;justify-content:center;margin-inline:auto;padding-inline:16px;position:relative}
.lg-box{width:100%}
@media (min-width:640px){.lg-box{width:24rem}}
.lg-kop{border-bottom:1px solid var(--lg-base-200);margin-bottom:32px;padding-bottom:32px}
.lg-kop img{display:block;margin-inline:auto;height:4rem;width:auto}
.lg-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
.lg-melding{margin:0 0 16px;padding:10px 12px;line-height:18px;border-radius:6px;background:var(--lg-rood-100);color:var(--lg-rood-700)}
.lg-tekst{margin:0 0 24px}
.lg-tekst strong{font-weight:600}
.lg-veld{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.lg-veld label{display:block;font-weight:600;color:var(--lg-base-900);white-space:nowrap}
.lg-ster{color:var(--lg-rood)}
.lg-veld input{width:100%;padding:8px 12px;border:1px solid var(--lg-base-200);border-radius:6px;background:#fff;color:var(--lg-base-600);font:inherit;font-weight:500;line-height:20px;box-shadow:0 1px 2px 0 rgb(0 0 0 / .05)}
.lg-veld input:focus{outline:2px solid var(--lg-primair);outline-offset:-2px}
.lg-knoppen{display:flex;flex-direction:column;gap:12px;margin-top:24px}
.lg-knop{display:inline-flex;align-items:center;justify-content:center;gap:4px;position:relative;width:100%;padding:8px 12px;border:1px solid transparent;border-radius:6px;font:inherit;font-weight:500;line-height:20px;white-space:nowrap;text-decoration:none;cursor:pointer}
.lg-knop:focus-visible{outline:2px solid var(--lg-primair);outline-offset:2px}
.lg-primair{background:var(--lg-primair);color:#fff}
.lg-primair:hover{background:oklch(53% .145 242 / .8)}
.lg-secundair{background:var(--lg-base-100);color:var(--lg-base-900)}
.lg-secundair:hover{background:oklch(96.7% .003 264.542 / .8)}
.lg-pijl{position:relative;right:0;width:14px;height:14px;fill:currentColor;transition:all .15s cubic-bezier(.4,0,.2,1)}
.lg-knop:hover .lg-pijl{right:-4px}
@media (prefers-reduced-motion:reduce){.lg-pijl{transition:none}}
.lg-beeld{display:none;flex-grow:1;max-width:48rem;background:url(img/login.jpg) center/cover no-repeat}
@media (min-width:1280px){.lg-beeld{display:block;max-width:56rem}}