/* Gedeelde opmaak van de inlogpagina's: auth/login.aspx, auth/password.aspx en auth/passwordreset/.
   Links het formulier (logo boven de titel), rechts een foto (InlogOpmaak.SplashStijl) of een grijs vlak.
   De knop- en linkkleur per omgeving komen als --knop-rgb/--link uit InlogOpmaak.ThemaCss(). */

@font-face{font-family:'Roboto';font-style:normal;font-weight:100;src:url('/content/fonts/roboto-v20-latin-100.woff2') format('woff2'),url('/content/fonts/roboto-v20-latin-100.woff') format('woff')}
@font-face{font-family:'Roboto';font-style:normal;font-weight:300;src:url('/content/fonts/roboto-v20-latin-300.woff2') format('woff2'),url('/content/fonts/roboto-v20-latin-300.woff') format('woff')}
@font-face{font-family:'Roboto';font-style:normal;font-weight:400;src:url('/content/fonts/roboto-v20-latin-regular.woff2') format('woff2'),url('/content/fonts/roboto-v20-latin-regular.woff') format('woff')}
@font-face{font-family:'Roboto';font-style:normal;font-weight:500;src:url('/content/fonts/roboto-v20-latin-500.woff2') format('woff2'),url('/content/fonts/roboto-v20-latin-500.woff') format('woff')}
@font-face{font-family:'Inter';font-style:normal;font-weight:100;src:url('/content/fonts/inter-v20-latin-100.woff2') format('woff2'),url('/content/fonts/inter-v20-latin-100.woff') format('woff'),url('/content/fonts/inter-v20-latin-100.ttf') format('truetype')}
@font-face{font-family:'Inter';font-style:normal;font-weight:300;src:url('/content/fonts/inter-v20-latin-300.woff2') format('woff2'),url('/content/fonts/inter-v20-latin-300.woff') format('woff'),url('/content/fonts/inter-v20-latin-300.ttf') format('truetype')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;src:url('/content/fonts/inter-v20-latin-regular.woff2') format('woff2'),url('/content/fonts/inter-v20-latin-regular.woff') format('woff'),url('/content/fonts/inter-v20-latin-regular.ttf') format('truetype')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;src:url('/content/fonts/inter-v20-latin-500.woff2') format('woff2'),url('/content/fonts/inter-v20-latin-500.woff') format('woff'),url('/content/fonts/inter-v20-latin-500.ttf') format('truetype')}

:root{--font-roboto:'Roboto',sans-serif;--font-base:'Inter','Roboto',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;--knop-rgb:102,175,233;--link:#42607c}

html,body{height:100%}
body{margin:0;background:#fff;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
a{font-family:var(--font-base);font-size:14px;text-decoration:none;cursor:pointer;color:var(--link)}
a:visited{color:var(--link)}
a:hover{text-decoration:underline}

/* links: formulier, rechts: foto */
.main{position:relative;box-sizing:border-box;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:56px 24px 72px}
.splash{position:sticky;top:0;height:100vh;background:#e4e7eb center 45%/cover no-repeat}

/* logo (en op acceptatie het label) boven de titel */
.kop{display:flex;flex-direction:column;align-items:center;gap:14px;max-width:100%;margin-bottom:28px}
.omgevinglogo{display:block;height:56px;width:auto;max-width:260px;object-fit:contain}
.omgevinglabel{font-family:var(--font-base);font-size:13px;line-height:24px;padding:0 10px;border-radius:6px;color:#7a1a43;background:#f7e9ef;box-shadow:inset 0 0 0 1px #dca7bd}

/* het formuliervak; de inlogpagina schuift hierin twee .container's (zie login.aspx) */
.vak{width:408px;max-width:100%;box-sizing:border-box;padding:4px 20px 8px}

h2{font-family:var(--font-base);font-weight:400;font-size:34px;line-height:1.2;letter-spacing:-0.015em;margin:0 0 8px;color:#1b2430;text-align:center}
h3{font-family:var(--font-base);font-weight:400;font-size:15px;line-height:1.4;margin:0 0 22px;color:#5a6472;text-align:center}
.veld{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:16px 0 6px;font-family:var(--font-base);font-size:14px;color:#384250}
h3+.veld,h3+.errormsg+.veld{margin-top:0}
.veld label{cursor:pointer}
#new a{font-size:13.5px}

input{display:block;width:100%;height:46px;margin:0;padding:0 14px;box-sizing:border-box;border:1px solid #cbd2db;border-radius:8px;background-color:#fff;font-family:var(--font-base);font-size:16px;color:#1f2933;outline:none}
input::placeholder{color:#9aa4b1;opacity:1}
input:focus{border-color:rgb(var(--knop-rgb));box-shadow:0 0 0 3px rgba(var(--knop-rgb),0.2)}
input[type='number']{-moz-appearance:textfield}
input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}

input.big-button{height:48px;margin-top:22px;padding:0 16px;border:0;border-radius:8px;background-color:rgb(var(--knop-rgb));color:#fff;font-family:var(--font-base);font-weight:400;font-size:16px;cursor:pointer;-webkit-appearance:none;appearance:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
input.big-button:hover{filter:brightness(0.92)}
input.big-button:active{filter:brightness(0.85)}
input.big-button:focus{box-shadow:0 0 0 3px rgba(var(--knop-rgb),0.3)}
input.big-button.img-right-arrow{padding:0 28px 0 0;background-image:url('/auth/arrow-right-short.svg');background-position:calc(50% + 46px) center;background-repeat:no-repeat;background-size:20px}

/* foutmelding: rood vak, standaard verborgen */
.errormsg{display:none;align-items:flex-start;gap:8px;margin:0 0 16px;padding:10px 12px;border-radius:8px;background:#fdeeee;color:#a32b2b;font-family:var(--font-base);font-size:14px;line-height:1.4;text-align:left;box-shadow:inset 0 0 0 1px #f2b8b8}
.errormsg svg{flex:none;margin-top:1px !important}
.errormsg.zichtbaar{display:flex}

.linkrow{margin-top:18px;text-align:center;font-family:var(--font-base);font-size:14px;color:#5a6472}

.loadanim{display:block;position:relative;width:40px;height:40px;margin:22px auto 0}
.loadanim div{position:absolute;border:4px solid rgb(var(--knop-rgb));opacity:1;border-radius:50%;animation:loadanim 1s cubic-bezier(0,0.2,0.8,1) infinite}
.loadanim div:nth-child(2){animation-delay:-0.5s}
@keyframes loadanim{0%{top:18px;left:18px;width:0;height:0;opacity:1}90%{top:0px;left:0px;width:36px;height:36px;opacity:0}100%{top:18px;left:18px;width:0px;height:0px;opacity:0}}

.coolguys{position:absolute;left:24px;bottom:16px;color:#9aa4b1;font-family:var(--font-base);font-size:11px;text-decoration:none}
a.coolguys:visited{color:#9aa4b1}
/* "by churchdesk" rechtsonder in het witte vlak (KBSalland, CashflowPro); baseline gelijk met Powered by */
.bychurchdesk{position:absolute;right:24px;bottom:11px;height:20px;width:auto}

/* telefoon/smal: geen foto */
@media (max-width:900px){body{display:block}.splash{display:none}}
@media (max-width:480px){h2{font-size:28px}.main{padding:40px 12px 64px}.vak{padding:4px 12px 8px}}
/* te smal voor naast elkaar: logo boven Powered by */
@media (max-width:400px){.bychurchdesk{right:auto;left:24px;bottom:34px}}