*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Tahoma,Arial,sans-serif;color:#111;font-size:12px;background:#fff}
body{overflow:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:default}
a{color:#155aa7;text-decoration:underline}
img{border:0}

.app-shell{min-height:100vh;background:linear-gradient(#f8fbfe,#fbfcfd)}
.topbar{height:58px;width:100%;position:relative;background:linear-gradient(180deg,#00673d 0%,#00643b 44%,#005a35 100%);border-bottom:2px solid #bdd3e7;color:#fff;z-index:50}
.brand{position:absolute;left:15px;top:3px;height:52px;display:flex;align-items:center;color:#fff;text-decoration:none}
.brand-logo{width:50px;height:50px;object-fit:contain;margin-right:12px}
.brand-tekst{display:block}
.brand-title{display:block;font-family:Arial,Tahoma,sans-serif;font-size:27px;line-height:29px;font-weight:700;letter-spacing:-.4px}
.brand-subtitle{display:block;font-size:13px;font-weight:700;line-height:17px}
.session{position:absolute;top:14px;left:41%;height:26px;display:flex;align-items:center;gap:9px;white-space:nowrap}
.session label{margin:0;font-weight:400}
.session select{width:122px;height:24px;border:1px solid #777;background:#fff;padding:1px 22px 1px 7px}
.session span{display:inline-block}
.session b{font-weight:400;margin-right:9px}
.header-links{position:absolute;right:56px;top:14px;display:flex;gap:29px;font-size:13px}
.header-links a{color:#fff}
.version{position:absolute;right:56px;top:36px;font-size:11px;white-space:nowrap}
.mobiel-menu-knop{display:none}
.body-shell{display:grid;grid-template-columns:210px minmax(0,1fr);min-height:calc(100vh - 58px)}

.sidebar{border-right:1px solid #b7cce2;border-bottom:1px solid #b7cce2;background:#fff;min-height:calc(100vh - 58px);overflow:auto;transition:width .15s ease}
.side-head{height:31px;padding:7px 7px 0 5px;background:linear-gradient(#f7fbff,#e8f0f8);border-bottom:1px solid #bacde1;font-weight:700;position:sticky;top:0;z-index:5}
.win-mini{float:right;width:16px;height:16px;padding:0;line-height:13px;border:1px solid #7c9abb;background:linear-gradient(#fff,#d8e8f7);font-weight:700;color:#174d80}
.tree{padding:3px 0 12px}
.tree a,.tree button{font-family:Tahoma,Arial,sans-serif;font-size:12px}
.tree-root{display:flex;align-items:center;width:100%;height:25px;border:0;background:transparent;text-align:left;padding:0 3px 0 5px;white-space:nowrap;color:#111;text-decoration:none}
.tree-root:hover,.tree a:hover,.tree a.active{background:#eaf3fd}
.tree-root.active{background:#cfe6fb;font-weight:700}
.tree-root img,.tree-child img{width:16px;height:16px;object-fit:contain;flex:0 0 16px;margin:0 7px 0 4px}
.tree-toggle{width:15px;height:15px;line-height:13px;text-align:center;border:1px solid #8f9ba5;background:#fff;font-size:12px;flex:0 0 15px;color:#222}
.tree-toggle.blank{border-color:transparent;background:transparent}
.tree-children{position:relative;margin-left:16px}
.tree-children:before{content:"";position:absolute;left:7px;top:-2px;bottom:13px;border-left:1px dotted #9ea9b4}
.tree-child{display:flex;align-items:center;width:100%;height:25px;border:0;background:transparent;text-align:left;padding:0!important;white-space:nowrap;color:#111;text-decoration:none}
.branch{position:relative;width:22px;height:25px;flex:0 0 22px}
.branch:after{content:"";position:absolute;left:7px;top:12px;width:15px;border-top:1px dotted #9ea9b4}
.branch.mid:before{content:"";position:absolute;left:7px;top:0;bottom:0;border-left:1px dotted #9ea9b4}
.branch.end:before{content:"";position:absolute;left:7px;top:0;height:12px;border-left:1px dotted #9ea9b4}
.tree-groep.ingeklapt .tree-children{display:none}
.tree-groep.ingeklapt .tree-toggle{font-size:0}
.tree-groep.ingeklapt .tree-toggle:after{content:"+";font-size:12px}
body.menu-ingeklapt .body-shell{grid-template-columns:31px minmax(0,1fr)}
body.menu-ingeklapt .sidebar{overflow:hidden}
body.menu-ingeklapt .side-head{font-size:0;padding-left:7px}
body.menu-ingeklapt .tree{display:none}
body.menu-ingeklapt .win-mini{float:none}

.workspace{min-width:0;background:linear-gradient(#f8fbfe,#fbfcfd)}
.tabsbar{height:37px;border-bottom:1px solid #b7cce2;background:linear-gradient(#f6f9fd,#edf2f8);padding-left:4px;display:flex;align-items:flex-end;overflow:hidden}
.tab{height:31px;padding:0 12px;border:1px solid #9eb5ce;border-bottom-color:#7c9bb9;background:linear-gradient(#fff,#e5ecf4);margin:0 2px -1px 0;display:flex;align-items:center;gap:7px;border-radius:4px 4px 0 0;color:#111;text-decoration:none;white-space:nowrap}
.tab img{width:16px;height:16px;object-fit:contain}
.tab.active{height:33px;background:linear-gradient(#1592ad,#08738d);color:#fff;border-color:#0d7890;font-weight:700}
.tab-x{font-weight:700;margin-left:5px;color:#fff;text-decoration:none}
.page-content{padding:8px 9px 20px;min-height:calc(100vh - 95px);min-width:0}

.inhoud>h1:first-child{height:30px;margin:0;border:1px solid #9ebad6;border-bottom:0;background:linear-gradient(#f7fbff,#dceaf7);color:#10467f;font-size:14px;font-weight:700;line-height:28px;padding:0 9px}
.inhoud>h1:first-child:before{content:"";display:inline-block;width:16px;height:16px;margin-right:7px;vertical-align:-3px;background:url('../icons/dashboard.png') center/16px 16px no-repeat}
.inhoud>h1:first-child+p{margin:0 0 8px;padding:8px 10px;border:1px solid #9ebad6;border-top:0;background:#fff;color:#384b5b}
.inhoud>p:first-child{margin-top:0}

.paneel{margin:8px 0;padding:39px 10px 10px;background:#fff;border:1px solid #9ebad6;position:relative;min-width:0;box-shadow:0 1px 1px rgba(65,97,126,.08)}
.paneel>h2:first-child{position:absolute;left:0;right:0;top:0;height:29px;margin:0;padding:6px 9px 0 10px;background:linear-gradient(#f7fbff,#dceaf7);border-bottom:1px solid #a7c1db;color:#10467f;font-size:14px;font-weight:700}
.paneel>h2:first-child:after{content:"";float:right;width:16px;height:16px;border:1px solid #86a6c7;background:linear-gradient(#fff,#d7e8f7)}
.paneel.zonder-kop{padding-top:10px}
.paneel.ingeklapt{height:30px;min-height:30px;padding:29px 0 0;overflow:hidden}
.paneel p{line-height:1.45}

.kaarten{display:grid;grid-template-columns:repeat(3,minmax(170px,1fr));gap:8px;margin:8px 0}
.kaart{display:flex;justify-content:space-between;align-items:center;min-height:58px;padding:10px 12px;background:#fff;border:1px solid #a8c4e0;text-decoration:none;color:#111;position:relative}
.kaart:before{content:"";width:24px;height:24px;margin-right:9px;background:url('../icons/page.png') center/20px 20px no-repeat;flex:0 0 24px}
.kaart span{flex:1;color:#155aa7}
.kaart strong{font-size:20px;color:#10467f}
.kaart:hover{background:#eef6fd}

.formulier-raster{display:grid;grid-template-columns:repeat(3,minmax(180px,1fr));gap:8px 14px;align-items:end}
.formulier-raster.klein{grid-template-columns:repeat(3,minmax(160px,260px))}
.formulier-raster.vier{grid-template-columns:repeat(4,minmax(150px,1fr))}
.formulier-raster .breed-twee{grid-column:span 2}
.veld-volledig{grid-column:1/-1}
label{display:block;margin:3px 0 4px;font-weight:700;color:#233c55}
.invoerveld,select.invoerveld,textarea.invoerveld{width:100%;min-height:25px;padding:3px 6px;border:1px solid #9faebc;background:#fff;box-shadow:inset 1px 1px 1px rgba(0,0,0,.05)}
.invoerveld:focus{outline:1px solid #4e8fbe;border-color:#4e8fbe}
textarea.invoerveld{min-height:54px;resize:vertical}
input[readonly].invoerveld{background:#eef1f3;color:#52606d}
.keuzes{display:flex;flex-wrap:wrap;gap:8px 20px;margin:10px 0 4px}
.keuzes label{display:inline;margin:0;font-weight:400}

.knop,.koppeling-knop{display:inline-block;min-height:27px;margin:8px 5px 0 0;padding:5px 11px 5px 29px;border:1px solid #8b9cab;border-radius:1px;background:#f8f8f8 url('../icons/accept.png') 8px center/16px 16px no-repeat;color:#111;cursor:pointer;text-decoration:none;vertical-align:middle;box-shadow:inset 1px 1px #fff;background-color:#f3f3f3}
.knop:hover,.koppeling-knop:hover{background-color:#e7f1fb;border-color:#7599ba}
.knop.tweede{background-image:url('../icons/page.png')}
.knop.gevaar{background-image:url('../icons/delete.png');border-color:#a87979;background-color:#fff3f3}
.knop.icoon-nieuw{background-image:url('../icons/new.png')}
.knop.icoon-bewerken{background-image:url('../icons/edit.png')}
.knop.icoon-verwijderen{background-image:url('../icons/delete.png')}
.knop.icoon-exporteren{background-image:url('../icons/export.png')}
.knop.icoon-afdrukken{background-image:url('../icons/print.png')}
.knop.icoon-downloaden{background-image:url('../icons/export.png')}
.knop.icoon-openen{background-image:url('../icons/open_folder.png')}
.knop.icoon-vernieuwen{background-image:url('../icons/refresh.png')}
.knop.icoon-opslaan{background-image:url('../icons/accept.png')}
.knop.icoon-berekenen{background-image:url('../icons/run_wizard.png')}
.knop.icoon-vrijgeven{background-image:url('../icons/release.png')}
.knop.icoon-autoriseren{background-image:url('../icons/authorize.png')}
.workflow-knoppen{display:flex;align-items:center;flex-wrap:wrap;gap:4px}
.workflow-knoppen .knop{margin-top:6px}

.tabel-omhulsel{width:100%;overflow:auto;margin-top:9px;border:1px solid #b7c5d1}
.tabel{width:100%;min-width:760px;border-collapse:collapse;background:#fff;font-size:11px}
.tabel th,.tabel td{height:27px;padding:4px 7px;border-right:1px solid #c4cbd1;border-bottom:1px solid #c4cbd1;text-align:left;white-space:nowrap}
.tabel th{height:29px;background:linear-gradient(#fafafa,#e6e6e6);font-weight:700;color:#1b344e}
.tabel tr:nth-child(even) td{background:#fbfcfd}
.tabel tr:hover td{background:#e9f3fd}
.tabel tr.geselecteerd td{background:#bdd8ef!important}
.tabel a{color:#155aa7}
.tabel input[type=checkbox]{width:14px;height:14px}

.melding{margin:8px 0;padding:8px 10px 8px 34px;border:1px solid #92aec8;background:#eef6fc url('../icons/info.png') 9px 8px/16px 16px no-repeat;color:#243d55}
.melding.goed{border-color:#72a176;background-color:#edf8ef;background-image:url('../icons/accept.png')}
.melding.fout{border-color:#b96666;background-color:#fff0f0;background-image:url('../icons/error.png')}

.resultaat-raster,.detail-raster{display:grid;grid-template-columns:repeat(4,minmax(170px,1fr));gap:8px;margin:9px 0 12px}
.resultaat-raster>div,.detail-raster>div{padding:9px;border:1px solid #b9c9d7;background:#f8fbfd}
.resultaat-raster span,.detail-raster span{display:block;margin-bottom:5px;color:#59636d;font-size:11px}
.resultaat-raster strong,.detail-raster strong{display:block;font-size:17px;color:#10467f}
.detail-raster .hash{font-family:Consolas,monospace;font-size:11px;overflow-wrap:anywhere}
.xml-weergave{max-height:620px;overflow:auto;padding:10px;border:1px solid #b9c9d7;background:#f7f9fa;font-family:Consolas,monospace;font-size:11px;white-space:pre-wrap;overflow-wrap:anywhere}

.dashboard-grid{display:grid;grid-template-columns:minmax(290px,.9fr) minmax(340px,1.05fr) minmax(340px,1.05fr);grid-template-rows:205px 190px;gap:8px}
.dashboard-panel{border:1px solid #a8c4e0;background:#fff;position:relative;overflow:hidden;min-width:0}
.dashboard-panel-head{height:30px;background:linear-gradient(#f7fbff,#dceaf7);border-bottom:1px solid #a7c1db;padding:6px 9px 0 10px;font-size:14px;font-weight:700;color:#10467f}
.dashboard-panel-head img{width:16px;height:16px;vertical-align:-3px;margin-right:7px}
.dashboard-panel-head .paneel-knoppen{float:right;display:flex;gap:3px}
.dashboard-panel-head button{width:16px;height:16px;padding:0;line-height:13px;border:1px solid #86a6c7;background:linear-gradient(#fff,#d7e8f7);color:#174d80;font-size:11px;font-weight:700}
.kpi-list{padding:9px 10px}
.kpi-list div{display:flex;justify-content:space-between;height:23px;line-height:20px}
.kpi-list b{font-weight:400}
.mini-grid{width:calc(100% - 16px);margin:7px 8px 0;border-collapse:collapse;font-size:11px}
.mini-grid th,.mini-grid td{border:1px solid #c4ccd4;height:25px;padding:4px 7px;text-align:left}
.mini-grid th{background:linear-gradient(#fafafa,#e7e7e7);font-weight:400}
.dashboard-link{position:absolute;left:10px;bottom:10px}
.dashboard-lijst{list-style:none;margin:7px 10px 0;padding:0}
.dashboard-lijst li{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:4px;align-items:center;height:25px;white-space:nowrap}
.dashboard-lijst li img{width:16px;height:16px}
.dashboard-lijst li span{overflow:hidden;text-overflow:ellipsis}
.dashboard-lijst li small{font-size:10px;color:#4d5d6d}
.dashboard-meldingen{list-style:none;margin:8px 10px 0;padding:0}
.dashboard-meldingen li{height:25px;display:flex;align-items:center}
.dashboard-meldingen img{width:16px;height:16px;margin-right:9px}
.snelkoppelingen{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;row-gap:4px;padding:10px 16px}
.snelkoppelingen a{height:27px;display:flex;align-items:center;text-decoration:none;color:#155aa7}
.snelkoppelingen img{width:18px;height:18px;margin-right:9px}
.notitie{margin:9px 10px 0;height:119px;border:1px solid #e3bd31;background:linear-gradient(90deg,#fffbc8,#fff9ba 65%,#fffdd0);padding:7px 9px}
.notitie ul{margin:3px 0 0 14px;padding:0}
.notitie li{margin-bottom:8px}
.dashboard-onder{margin-top:8px;border:1px solid #9ebad6;background:#fff}
.dashboard-onder-kop{height:29px;background:linear-gradient(#f7fbff,#dceaf7);border-bottom:1px solid #a5bdd7;color:#10467f;font-size:14px;font-weight:700;line-height:28px;padding:0 7px}
.dashboard-onder-kop img{width:16px;height:16px;vertical-align:-3px;margin-right:7px}
.dashboard-toolbar{min-height:32px;border-bottom:1px solid #b9b9b9;background:linear-gradient(#fff,#ededed);display:flex;align-items:center;padding:2px 8px;flex-wrap:wrap}
.dashboard-toolbar a{height:27px;border:0;background:transparent;padding:0 10px 0 2px;display:flex;align-items:center;gap:6px;text-decoration:none;color:#111}
.dashboard-toolbar a:hover{background:#e8f1fb;outline:1px solid #b0c6da}
.dashboard-toolbar img{width:17px;height:17px}
.dashboard-overzicht{width:100%;border-collapse:collapse;font-size:11px}
.dashboard-overzicht th,.dashboard-overzicht td{height:27px;padding:4px 8px;border-right:1px solid #c4cbd1;border-bottom:1px solid #c4cbd1;text-align:left}
.dashboard-overzicht th{background:linear-gradient(#fafafa,#e8e8e8)}
.dashboard-overzicht tr:hover td{background:#e9f3fd}

.toast{position:fixed;right:18px;bottom:18px;z-index:9999;min-width:220px;max-width:420px;padding:10px 12px;border:1px solid #7599ba;background:#eef6fd;box-shadow:0 3px 12px rgba(0,0,0,.22);display:none}
.toast.tonen{display:block}

.losse-pagina{min-height:100vh;display:grid;place-items:center;padding:20px;background:linear-gradient(180deg,#00673d 0,#005a35 58px,#e8f0f8 58px,#f7fbff 100%)}
.losse-pagina form{width:100%;display:grid;place-items:center}
.losse-kaart{width:min(450px,100%);padding:58px 22px 22px;background:#fff;border:1px solid #8faac2;box-shadow:0 6px 22px rgba(0,0,0,.2);position:relative}
.losse-kaart:before{content:"Digiklant Salarisadministratie";position:absolute;left:0;right:0;top:0;height:39px;padding:10px 12px;background:linear-gradient(#f7fbff,#dceaf7);border-bottom:1px solid #a7c1db;color:#10467f;font-size:15px;font-weight:700}
.losse-kaart h1{margin:0 0 8px;font-size:19px;color:#10467f}
.losse-kaart .knop{width:auto}

@media(max-width:1280px){
  .session{left:35%}
  .dashboard-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .dashboard-panel{min-height:185px}
  .dashboard-panel:nth-child(3){grid-column:span 2}
}
@media(max-width:1050px){
  .session{display:none}
  .header-links{right:24px}
  .version{right:24px}
  .formulier-raster.vier{grid-template-columns:repeat(2,minmax(180px,1fr))}
  .resultaat-raster,.detail-raster{grid-template-columns:repeat(2,minmax(170px,1fr))}
  .kaarten{grid-template-columns:repeat(2,minmax(170px,1fr))}
}
@media(max-width:800px){
  .topbar{height:64px}
  .brand{left:50px}
  .brand-logo{width:44px;height:44px}
  .brand-title{font-size:21px;line-height:23px}
  .brand-subtitle{font-size:11px}
  .header-links{top:11px;right:12px;gap:12px}
  .version{right:12px;top:36px;font-size:10px}
  .mobiel-menu-knop{display:block;position:absolute;left:8px;top:16px;width:34px;height:30px;border:1px solid rgba(255,255,255,.7);background:rgba(255,255,255,.12);color:#fff;font-size:19px}
  .body-shell{display:block;min-height:calc(100vh - 64px)}
  .sidebar{position:fixed;left:-240px;top:64px;bottom:0;width:230px;z-index:40;transition:left .2s ease;box-shadow:3px 0 9px rgba(0,0,0,.2)}
  body.mobiel-menu-open .sidebar{left:0}
  .tabsbar{height:35px}
  .page-content{padding:6px}
  .dashboard-grid{grid-template-columns:1fr}
  .dashboard-panel:nth-child(3){grid-column:auto}
  .formulier-raster,.formulier-raster.klein,.formulier-raster.vier{grid-template-columns:1fr}
  .formulier-raster .breed-twee{grid-column:auto}
  .kaarten{grid-template-columns:1fr}
}
@media(max-width:520px){
  .brand-subtitle{display:none}
  .brand-title{font-size:18px}
  .brand-logo{width:38px;height:38px}
  .header-links a:first-child{display:none}
  .version{display:none}
  .tab:first-child{display:none}
  .resultaat-raster,.detail-raster{grid-template-columns:1fr}
  .snelkoppelingen{grid-template-columns:1fr}
}

.groen{color:#18830c}.blauw{color:#1267bc}.rood{color:#b10000}.oranje{color:#c06a00}