html,body{color:#111;background:#fff;margin:0}.demo{grid-template-columns:248px minmax(0,1fr);min-height:100vh;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;display:grid}.demo__side{box-sizing:border-box;background:#fff;border-right:1px solid #ececee;flex-direction:column;height:100vh;padding:24px 16px;display:flex;position:sticky;top:0}.demo__brand{border-radius:10px;flex-direction:column;gap:10px;padding:0 10px 24px;text-decoration:none;display:flex}.demo__brand img{width:176px;height:auto;display:block}.demo__brand span{color:#6b6b73;letter-spacing:.06em;text-transform:uppercase;font-size:12px;font-weight:600}.demo__brand:focus-visible{outline-offset:4px;outline:2px solid #a85400}.demo__section{color:#6b6b73;margin:8px 10px 6px;font-size:12px}.demo__section--beheer{letter-spacing:.06em;text-transform:uppercase;margin-top:20px;font-weight:600}.demo__nav{flex-direction:column;gap:2px;display:flex}.demo__nav a{color:#111;border-radius:10px;align-items:center;gap:12px;padding:10px 12px;font-size:14px;text-decoration:none;display:flex}.demo__nav a:hover{color:#111;background:#f7f7f8}.demo__nav a.is-active{color:#111;background:#f4f4f5;font-weight:500}.demo__nav .of-icon{color:#a85400}.demo__nav a:focus-visible{outline-offset:2px;outline:2px solid #a85400}.demo__user{color:#6b6b73;flex-direction:column;gap:4px;margin:auto 10px 12px;font-size:12px;display:flex}.demo__user input{min-height:34px;font:inherit;color:#111;border:1px solid #e3e3e7;border-radius:10px;padding:6px 10px;font-size:14px}.demo__user input::placeholder{color:#6b6b73}.demo__user input:focus-visible{outline-offset:1px;outline:2px solid #a85400}.demo__user-name{color:#111;overflow-wrap:anywhere;font-size:14px;font-weight:600}.demo__logout{min-height:32px;font:inherit;color:#111;cursor:pointer;background:#fff;border:1px solid #e3e3e7;border-radius:10px;align-self:flex-start;align-items:center;gap:6px;padding:4px 10px;font-size:13px;display:inline-flex}.demo__logout:hover{background:#f7f7f8}.demo__logout:focus-visible{outline-offset:2px;outline:2px solid #a85400}.demo__user-hint{color:#6b6b73}.demo__note{color:#75757e;margin:0 10px;font-size:12px}.demo__main{min-width:0}@media (width<=1100px){.demo{grid-template-columns:minmax(0,1fr)}.demo__side{border-bottom:1px solid #ececee;border-right:0;flex-flow:wrap;align-items:center;gap:8px 16px;height:auto;padding:12px 16px;position:static}.demo__brand{padding:0}.demo__brand img{width:120px}.demo__brand span,.demo__section,.demo__note{display:none}.demo__user{flex-direction:row;align-items:center;gap:8px;margin:0 0 0 auto}.demo__user input{width:160px}.demo__nav{flex-flow:wrap}}