:root { 
 --bg: #E2ECF7;
 --paars: #1E4F80; 
 --lichtpaars:#E2ECF7;
 
 --button:#1E4F80;
 --zwart: #202020;
 --wit: #F7F6FB;
 --grijs:#A9BCD8;
 
 --bodybg:#0F2748;
 --titels:#1E4F80;
 --links:#1A4471;
}

@font-face {
 font-family:"Noto Sans";
 src:url("/client/NotoSans-VariableFont_wdth,wght.ttf") format("truetype");
 font-weight:100 900;
 font-style:normal;
 font-display:swap;
}

@font-face {
 font-family:"Noto Sans";
 src:url("/client/NotoSans-Italic-VariableFont_wdth,wght.ttf") format("truetype");
 font-weight:100 900;
 font-style:italic;
 font-display:swap;
}

body,html { 
 margin: 0;
 padding: 0; 
}
body { overflow-y: scroll;
 background:var(--bodybg);  
 min-height:100vh; 
 font-family:"Noto Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
 font-size:16px;
 color:var(--zwart);
 display:flex;
 flex-direction:column;
}
#m{
background:var(--wit);
 margin:12px auto;
 width:1600px;
 min-height:calc(100vh - 24px);
 display:flex;
 flex-direction:column;
 border-radius:4px;
 overflow:hidden;
}

a {color:var(--links);}
h1,h2,h3,h4{padding:0;margin:0;}
h1{font-size:1.2em;font-weight:bold;color:var(--zwart);line-height:1;}
h1 span {color:var(--button);}
h2{font-size:1.1em;font-weight:bold;color:var(--titels);}
h3{font-size:1em;font-weight:bold;color:var(--titels);}
p,ul,ol{margin-top:8px;}

button{background:var(--button);color:var(--wit);cursor:pointer}
.card {
 background:var(--wit);
 border:solid 1px var(--grijs);
 border-radius:4px;
 padding:16px;
}

.user { filter:grayscale(1) brightness(0.6); margin-left:auto;}

.top-header {
 padding:8px;
 padding-left:8px;
 padding-right:16px;
 border-bottom:solid 1px var(--grijs);
 display:flex;
 align-items:center;
 gap:8px;
}
.top-header a {text-decoration:none;}
.brand-link {
 display:flex;
 align-items:center;
 gap:8px;
 flex:0 0 auto;
}
.brand-logo {
 width:22px;
 height:22px;
 object-fit:contain;
 display:block;
}

body.menu-visible #menu-open {
 display:none;
}

.header-filters {
 display:flex;
 gap:8px;
 margin-left:72px;
}

.header-select {
 appearance:none;
 background:var(--wit);
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23696473' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
 background-repeat:no-repeat;
 background-position:right 10px center;
 background-size:12px 8px;
 color:var(--zwart);
 border:1px solid var(--grijs);
 border-radius:4px;
 padding:6px 30px 6px 10px;
 font-size:0.9em;
 box-shadow:0 1px 0 rgba(0,0,0,0.03);
 width:260px;
}

.header-select:focus {
 outline:none;
 border-color:var(--paars);
 box-shadow:0 0 0 2px rgba(101,62,187,0.15);
}

.footer-bar { 
 padding:4px;
 border-top:solid 1px var(--grijs);
 display:flex;
 align-items:center;
 color:var(--513197);
 font-size:0.8em;
}

.main {
 flex:1;
 display:flex;
 min-height:0;
}

#menu {
 width:220px;
 flex:0 0 220px;border-right:solid 1px var(--grijs);
 padding:16px;
 padding-top:2px;
 position:relative;
}
#menu-close {
 position:absolute;
 top:8px;
 right:8px;
 width:28px;
 height:28px;
 display:flex;
 align-items:center;
 justify-content:center;
 padding:0;
 font-size:1.2rem;
 line-height:1;
}
body.menu-hidden #menu {
 display:none;
}

#main {
 flex:1;
 min-width:0;
 background:var(--lichtpaars);
}

.KLEIN {font-size:0.9em;}
#menu .titel {text-transform: uppercase;margin-top:14px;margin-bottom:4px;color:var(--paars);margin-left:14px;}
#menu .titel:first-of-type {margin-top:38px;}
#menu a {margin:0;padding-top:3px;padding-bottom:3px;display:block;color:var(--zwart);text-decoration:none;padding-left:14px;}
#menu a.active {border-left:solid 5px var(--button);margin-left:-5px;background:var(--bg);width:calc(100% - 12px);font-weight:bold;border-radius:4px;}
#menu a:hover{text-decoration:underline;}
#menu a.grijs {color: var(--grijs); pointer-events: none; text-decoration: none;}

.feedback-menu a.is-disabled {color: var(--grijs) !important; pointer-events: none; text-decoration: none !important;}

.inner {background:var(--wit);padding:16px;border-radius:4px;border:solid 1px var(--grijs);min-height:calc(100vh - 164px);position:relative;}
textarea {border-radius:4px; border:solid 1px var(--paars);}

.chat-view {
 background:transparent;
 padding:16px;
 border:none;
}

.chat-layout {
 display:flex;
 gap:12px;
 background:none;
 padding:0;
 height:100%;
 min-height:0;
 border:none;
}

.chat-layout-left {
 display:flex;
 flex-direction:column;
 gap:12px;
 flex:1;
 min-width:0;
}

.chat-source {
 flex:0 0 400px;
 min-height:0;
}

.chat-view .lotextarea {
 min-height:5rem;
 font-family:inherit;
}

.chat-view .lotextarea:focus {
 min-height:5rem;
}
.copy-target {position:relative;}
.copy-button {position:absolute;bottom:22px;right:26px;width:36px;height:36px;border-radius:50%;border:none;background:var(--button);color:var(--wit);font-size:1rem;font-weight:bold;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,0.2);display:flex;align-items:center;justify-content:center;line-height:1;transition:transform 0.15s ease, box-shadow 0.15s ease;}
.copy-button--pressed {transform:scale(0.92);box-shadow:0 2px 6px rgba(0,0,0,0.2);}
.card2 {background:var(--wit);padding:16px;border-radius:4px;border:solid 1px var(--grijs);margin-bottom:8px;}
.vakscroll {height:calc(100vh - 380px);overflow:auto;margin-top:8px;}

input,button {border-radius:4px;border:solid 1px var(--grijs);}
button {border:solid 1px var(--paars);}


.lotextarea { min-height:5rem; transition:min-height 0.2s ease;}
.lotextarea:focus { min-height:16rem;}
table + h2{ margin-top: 16px;}

.button  {
 padding:8px;font-weight:bold;min-width:80px;
}

#menu-open {
 margin:0;
 width:30px;
 height:30px;
 display:flex;
 align-items:center;
 justify-content:center;
 padding:0;
 font-size:1.8rem;
 line-height:1;
 padding-bottom:8px;
}