/* Login-/uitlogscherm in de opzet van het originele Zermelo-portaal (zelfde structuur en klassenamen: zermelo-body, form, status, login-form, button, forgot, message).
   De originele stylesheet (login_files/responsive_*.css) zat niet bij de aangeleverde bestanden; dit is een eigen nabootsing. Vervang dit bestand door het origineel als je dat hebt. */
:root{--navy:#2C3E50;--green:#4CAF50;--green2:#43A047;--muted:#78909C;--err:#df4242}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font:15px/1.5 Roboto,"Helvetica Neue",Arial,system-ui,sans-serif;background:#EEF1F5;color:var(--navy)}
.zermelo-body{min-height:100%;display:flex;align-items:center;justify-content:center;padding:1rem}
.form{width:100%;max-width:380px;background:#fff;border-radius:4px;padding:2rem 2rem 1.2rem;box-shadow:0 2px 10px #2c3e5026;text-align:center}
.logo{display:block;height:44px;width:auto;margin:0 auto 1.2rem}
.status{margin:0 0 1rem;color:var(--navy)}
.error{margin:0 0 .8rem;padding:.5rem .7rem;background:#df424216;border-left:4px solid var(--err);color:#9b2020;text-align:left;font-size:.9rem}
.error:empty{display:none}
.login-form input[type=text],.login-form input[type=password],.login-form input:not([type]),.login-form input[inputmode]{width:100%;padding:.7rem .8rem;margin:0 0 .7rem;border:1px solid #cfd8dc;border-radius:3px;font:inherit;color:var(--navy);background:#fff}
.login-form input:focus{outline:2px solid #4CAF5066;border-color:var(--green)}
.login-form label{display:flex;gap:.5rem;align-items:center;text-align:left;font-size:.9rem;color:var(--navy);margin:.2rem 0 .5rem;cursor:pointer}
.rememberMeInfo{display:none;text-align:left;font-size:.78rem;color:var(--muted);margin:0 0 .8rem}
.button,.login-form button{display:block;width:100%;padding:.75rem;border:0;border-radius:3px;background:var(--green);color:#fff;font:500 1rem Roboto,Arial,sans-serif;text-align:center;text-decoration:none;cursor:pointer;margin-top:.4rem}
.button:hover,.login-form button:hover{background:var(--green2)}
.login-form button.sec{background:#fff;color:var(--navy);border:1px solid #cfd8dc}
.login-form button.sec:hover{background:#EEF1F5}
.forgot{display:block;margin:1rem 0 .3rem;font-size:.85rem;text-align:left}
.forgot a,.message a{color:var(--green2)}
.message{margin:1.2rem 0 0;font-size:.75rem;color:var(--muted)}
.hidden{display:none!important}