/* "Geversioneerd" bestand, zie README. */

/*
Nemesys Groep kleuren (2020-06)
Primair: (Donker)blauw (#1d428a)
Secundair: (Licht)blauw (#6cace4)
Accentkleur: donkergrijs/zwart (#2d2926)


(Oude) HostedXL-eigen kleuren
Primair: Blauw (#0071a3)
Secundair: Oranje (#fda913)
*/


/* **** */
@font-face { /* normaal */
    font-family:"Source Sans Pro";
    src:local("Source Sans Pro"),
        url("../fonts/SourceSansPro-Regular.otf.woff"),
        url("../fonts/SourceSansPro-Regular.ttf.woff"),
        url("../fonts/SourceSansPro-Regular.otf"),
        url("../fonts/SourceSansPro-Regular.ttf");
    font-weight:normal;
    font-style:normal;
}

@font-face { /* vet */
    font-family:"Source Sans Pro";
    src:local("Source Sans Pro Bold"),
        url("../fonts/SourceSansPro-Bold.otf.woff"),
        url("../fonts/SourceSansPro-Bold.ttf.woff"),
        url("../fonts/SourceSansPro-Bold.otf"),
        url("../fonts/SourceSansPro-Bold.ttf");
    font-weight:bold;
    font-style:normal;
}

@font-face { /* schuin */
    font-family:"Source Sans Pro";
    src:local("Source Sans Pro Italic"),
        url("../fonts/SourceSansPro-It.otf.woff"),
        url("../fonts/SourceSansPro-It.ttf.woff"),
        url("../fonts/SourceSansPro-It.otf"),
        url("../fonts/SourceSansPro-It.ttf");
    font-weight:normal;
    font-style:italic;
}

@font-face { /* vet + schuin */
    font-family:"Source Sans Pro";
    src:local("Source Sans Pro Bold Italic"),
        url("../fonts/SourceSansPro-BoldIt.otf.woff"),
        url("../fonts/SourceSansPro-BoldIt.ttf.woff"),
        url("../fonts/SourceSansPro-BoldIt.otf"),
        url("../fonts/SourceSansPro-BoldIt.ttf");
    font-weight:bold;
    font-style:italic;
}

/*  */
@font-face { /* normaal */
    font-family:"Source Sans Pro Light";
    src:local("Source Sans Pro"),
        url("../fonts/SourceSansPro-Light.otf.woff"),
        url("../fonts/SourceSansPro-Light.ttf.woff"),
        url("../fonts/SourceSansPro-Light.otf"),
        url("../fonts/SourceSansPro-Light.ttf");
    font-weight:normal;
    font-style:normal;
}

@font-face { /* schuin */
    font-family:"Source Sans Pro Light";
    src:local("Source Sans Pro Italic"),
        url("../fonts/SourceSansPro-LightIt.otf.woff"),
        url("../fonts/SourceSansPro-LightIt.ttf.woff"),
        url("../fonts/SourceSansPro-LightIt.otf"),
        url("../fonts/SourceSansPro-LightIt.ttf");
    font-weight:normal;
    font-style:italic;
}


/* **** */
abbr[title], abbr[data-original-title] {
text-decoration:none; /* foutje van Amazium */
}


/* **** */
body {
background-color:#2d2926;
}

body.iframe {
background-color:#f0f0f0;
padding:10px;
}

body.iframe.met_paginanavigatie {
padding-top:40px;
}


/*  */
html, body,
p,
td,
strong, em,
a:link, a:visited, a:active,
input, textarea, select, button {
font-family:"Source Sans Pro", sans-serif;
color:#7b7b7b;
}

strong, em {
color:inherit;
}

pre,
code {
font-family:"Lucida Console", "Courier New", "Andale Mono", "Lucidatypewriter", monospace;
}

h1, h2, h3, h4, h5, h6,
caption, caption *,
th, thead td {
font-family:"Source Sans Pro Light", sans-serif;
}

h1, h2, h3, h4, h5, h6,
th, thead td, th *, thead td *,
dt.h, dt.h * {
color:#303e48;
}

/* **** */
/* Amazium standaard overstemmen */
figcaption {
font-size: inherit;
margin: 0;
padding: 0;
}

figcaption::before {
content: '';
}

/* **** */
table {
margin-bottom: 20px; /* Amazium standaard overstemmen */
overflow: visible; /* Amazium standaard overstemmen */
position: relative;
}

table.compact {
margin: 0; /* Amazium standaard overstemmen */
}

caption {
margin:0;
padding:5px;
background-color:#1d428a;
color:white;
text-align:left;
}

caption, caption *, caption em, caption strong {
color:white;
}

/* Let op met standaard-overflow op table van Amazium! */
thead,
tfoot {
position: sticky;
z-index: 995;
}

thead {
inset-block-start: 45px; /* "top" */
}

tfoot {
inset-block-end: 0; /* "bottom" */
}

th, td {
min-width:0; /* Amazium standaard overstemmen */
border:none; /* Amazium standaard overstemmen */
border-top:1px solid #f0f0f0;
}

thead th {
background-color:#cfcfcf;
}

th {
background-color:#e5e5e5;
}

thead td,
tfoot td {
background-color:#f0f0f0;
}

/*  */
th,
td {
text-align:left;
vertical-align:top;
}

p.l,
th.l, th.lt, th.tl, th.lm, th.ml, th.lb, th.bl,
td.l, td.lt, td.tl, td.lm, td.ml, td.lb, td.bl {
text-align:left;
}

p.r,
th.r, th.rt, th.tr, th.rm, th.mr, th.rb, th.br,
td.r, td.rt, td.tr, td.rm, td.mr, td.rb, td.br {
text-align:right;
}

p.c,
th.c, th.ct, th.tc, th.cm, th.mc, th.cb, th.bc,
td.c, td.ct, td.tc, td.cm, td.mc, td.cb, td.bc {
text-align:center;
}

th.t, th.tl, th.lt, th.tc, th.ct, th.tr, th.rt,
td.t, td.tl, td.lt, td.tc, td.ct, td.tr, td.rt {
vertical-align:top;
}

th.m, th.ml, th.lm, th.mc, th.cm, th.mr, th.rm,
td.m, td.ml, td.lm, td.mc, td.cm, td.mr, td.rm {
vertical-align:middle;
}

th.b, th.bl, th.lb, th.bc, th.cb, th.br, th.rb,
td.b, td.bl, td.lb, td.bc, td.cb, td.br, td.rb {
vertical-align:bottom;
}

/*  */
th.groep,
td.groep {
border-left:1px solid #f9f9f9;
}

/*  */
tr.markeer th,
tr.markeer td,
span.markeer {
background-color:gold;
}

/*  */
tr.niksregel.zichtbaar th,
tr.niksregel.zichtbaar td {  }

tr.niksregel.verduisterd th,
tr.niksregel.verduisterd td {
opacity: .4;
}

tr.niksregel.verduisterd:hover th,
tr.niksregel.verduisterd:hover td {
opacity: 1;
}

tr.niksregel.verborgen { /* hele regel */
display:none;
}

/**/
a.knop.niksregels::before { /* icoon */
font-family:"FontAwesome";
padding-right:5px;
}

a.knop.niksregels[data-actie="toon"]::before {
content:'\f06e'; /* eye */
}

a.knop.niksregels[data-actie="verduister"]::before {
content:'\f070'; /* eye-slash */
opacity: .4;
}

a.knop.niksregels[data-actie="verberg"]::before {
content:'\f070'; /* eye-slash */
}

/*  */
tr.vouw td table:first-child {
/* Alleen maar nog eens een tabel binnen een uitgevouwen vouwtabel, beetje wat
dichter op elkaar. */
margin-top:0;
}

/*  */
/* oud - gaat vervangen worden door vouwdetails/foldetails*/
table.gevouwen { }
table.gevouwen.met_luie_details { }

table.gevouwen tr th:first-child,
table.gevouwen tr td:first-child {
width:30px;
min-width:30px;
}

table.gevouwen tr.vouw > td {
border-top-style:dashed;
}

table.gevouwen tr.vouw:hover {
background-color:inherit;
}

table.gevouwen th.vouwkantlijn,
table.gevouwen td.vouwkantlijn {
background-color:#6cace4;
}

table.gevouwen tr.vouw td table:first-child {
/* Alleen maar nog eens een tabel binnen een uitgevouwen vouwtabel, beetje wat
dichter op elkaar. */
margin-top:0;
}

/* Knop-classes (vouwknop, gesloten, open) worden met JS toegevoegd */
table.gevouwen td.vouwknop a {
width:100%;
font-family:"FontAwesome";
}

table.gevouwen td.vouwknop.gesloten a::before {
content:'\f054'; /* chevron-right */
}

table.gevouwen td.vouwknop.open a::before {
content:'\f078'; /* chevron-down */
}


/*  */
th a.sorteer,
td a.sorteer {
margin:-8px;
padding:8px;
width:100%;
display:block;
position:relative;
cursor:pointer;
text-decoration:none;
color:inherit;
font-family:inherit;
}

th a.sorteer:after,
td a.sorteer:after {
position:absolute;
right:8px;
top:8px;
z-index:1;
font-family:"FontAwesome";
content:'\f07d'; /* arrows-v */
}

th a.sorteer.alf.az:after,
td a.sorteer.alf.az:after {
content:'\f15d'; /* sort-alpha-asc */
}

th a.sorteer.alf.za:after,
td a.sorteer.alf.za:after {
content:'\f15e'; /* sort-alpha-desc */
}

th a.sorteer.num.az:after,
td a.sorteer.num.az:after {
content:'\f162'; /* sort-numeric-asc */
}

th a.sorteer.num.za:after,
td a.sorteer.num.za:after {
content:'\f163'; /* sort-numeric-desc */
}

th a.sorteer:hover,
td a.sorteer:hover {
background-color:rgba(255, 255, 255, 0.5);
}


/**** Mobiel ****/
@media only screen and (max-width: 767px) {
    caption, tfoot { /* Amazium van o.a. tbody herhalen/ook toepassen */
    border:0;
    display:block;
    text-align:left;
    white-space:normal;
    }

    /* Negeren/forceren */
    th.l, th.lt, th.tl, th.lm, th.ml, th.lb, th.bl,
    td.l, td.lt, td.tl, td.lm, td.ml, td.lb, td.bl,
    th.r, th.rt, th.tr, th.rm, th.mr, th.rb, th.br,
    td.r, td.rt, td.tr, td.rm, td.mr, td.rb, td.br,
    th.c, th.ct, th.tc, th.cm, th.mc, th.cb, th.bc,
    td.c, td.ct, td.tc, td.cm, td.mc, td.cb, td.bc,
    th.t, th.tl, th.lt, th.tc, th.ct, th.tr, th.rt,
    td.t, td.tl, td.lt, td.tc, td.ct, td.tr, td.rt,
    th.m, th.ml, th.lm, th.mc, th.cm, th.mr, th.rm,
    td.m, td.ml, td.lm, td.mc, td.cm, td.mr, td.rm,
    th.b, th.bl, th.lb, th.bc, th.cb, th.br, th.rb,
    td.b, td.bl, td.lb, td.bc, td.cb, td.br, td.rb {
    text-align: left;
    vertical-align: top;
    }
}


/* * */
/* XXX Even grof een extra brede tabel (iets) minder lelijk maken... */
/* FUTURE: Kijken wat hiermee kan: https://css-tricks.com/making-tables-with-sticky-header-and-footers-got-a-bit-easier/ */
div.tablescroller { /* om een <table> zetten */
border-top-right-radius: 45px;
overflow: auto;
}

div.tablescroller table {
margin-top:0;
}

div.tablescroller table thead {
position: static; /* niet sticky! */
}

/**** Groot scherm ****/
div.tablescroller {
width: 1140px;
}

/**** Klein(er) scherm ****/
@media only screen and (min-width: 960px) and (max-width: 1199px) {
    div.tablescroller { width: 900px; }
}

/**** Tablet ****/
@media only screen and (min-width: 768px) and (max-width: 959px) {
    div.tablescroller { width: 708px; }
}

/**** Mobiel ****/
@media only screen and (max-width: 767px) {
    div.tablescroller { width: 100%; }
}


/* **** */
dl.tweekoloms {
/* Een soort van verticale tabel;
 * Kolom 1 (de koppen) in de <dt>, kolom 2 (de gegevens) in <dd>.
 */
border-bottom:1px solid #d6d6d6;
clear:both;
display:block;
overflow:hidden;
position:relative;
}

dl.tweekoloms::before,
dl.tweekoloms:after {
content:"\0020";
display:block;
overflow:hidden;
visibility:hidden;
width:0;
height:0;
}

dl.tweekoloms:after {
clear:both;
}

td dl.tweekoloms.compact {
margin: 0; /* Amazium standaard overstemmen */
}

dl.tweekoloms dt,
dl.tweekoloms dd {
margin:0;
padding:8px;
border-top:1px solid #f0f0f0;
font-size:inherit;
line-height:inherit;
}

dl.tweekoloms dt {
width:250px;
float:left;
clear:both;
font-weight:bold;
}

dl.tweekoloms dd {
margin-left:250px;
}

dl.tweekoloms dd:after {
content:"\a0"; /* nbsp, zodat een lege niet inklapt */
}

dl.tweekoloms dt, /* standaard uitlijning */
dl.tweekoloms dt.l { text-align:left; }
dl.tweekoloms dt.r { text-align:right; }
dl.tweekoloms dt.c { text-align:center; }

dl.tweekoloms dt.caption, /* "eerste kop" */
dl.tweekoloms dt.h, /* h(ead), ook voor tussenkoppen */
dl.tweekoloms dt.f { /* f(oot), soort van voet */
width:auto;
float:none;
clear:both;
font-weight:normal;
}

dl.tweekoloms dt.caption {
background-color:#1d428a;
color:white;
}

dl.tweekoloms dt.h {
background-color:#e5e5e5;
}

dl.tweekoloms dt.f {
background-color:#f0f0f0;
}

dl.tweekoloms dd.solo { /* zonder dt, volle breedte */
margin-left: 0;
}

dl.tweekoloms.met_kantlijn dd {
padding-right: 125px;
}

dl.tweekoloms dt.kantlijn {
display: none;
}

dl.tweekoloms dd.kantlijn {
border: none;
margin: 0;
padding: 0;
position: absolute;
right: 4px;
top: 4px;
width: 125px;
}

dl.tweekoloms dt input[type="checkbox"],
dl.tweekoloms dd input[type="checkbox"] {
margin-top:0;
}

dl.tweekoloms dd table:first-child {
margin-top: 0;
}


/* */
/* oud - gaat vervangen worden door vouwdetails/foldetails */
dl.tweekoloms.gevouwen dt.caption {
cursor:pointer;
}

dl.tweekoloms.gevouwen dt.caption span.vouwknop {
border-radius:2px;
border:1px dotted white;
display:inline-block;
font-family:"FontAwesome";
margin-right:5px;
padding:1px 5px 1px 5px;
}

dl.tweekoloms.gevouwen.gesloten > dt.caption span.vouwknop::before {
content:'\f054'; /* chevron-right */
}

dl.tweekoloms.gevouwen.open > dt.caption span.vouwknop::before {
content:'\f078'; /* chevron-down */
}

dl.tweekoloms.gevouwen dd.solo[data-luiedetailsdoel] { /* zonder dt, BIJNA volle breedte, inspringen voor vouw */
border-left: 40px solid #6cace4;
border-top-color: #6cace4;
padding-left: 5px;
}

/***** Tablet (smaller than 959px) *****/
@media only screen and (min-width:768px) and (max-width:959px) {
    dl.tweekoloms dt {
    width:200px;
    }

    dl.tweekoloms dd {
    margin-left:216px;
    }

    dl.tweekoloms.met_kantlijn dd {
    padding-right: 0;
    }

    dl.tweekoloms dd.kantlijn {
    position: relative;
    width: auto;
    }
}

/***** Phone portrait (300px) *****/
/***** Phone landscape (420px) *****/
@media only screen and (max-width:767px) {
    dl.tweekoloms dt,
    dl.tweekoloms dd {
    width:auto;
    float:none;
    }

    dl.tweekoloms dd {
    margin-left:0;
    padding-left:16px;
    padding-right:0;
    }

    /* REFACTOR: herhaling */
    dl.tweekoloms.met_kantlijn dd {
    padding-right: 0;
    }

    dl.tweekoloms dd.kantlijn {
    position: relative;
    width: auto;
    }
}


/* **** */
.vouwdetailknop {
cursor:pointer;
}

a.vouwdetailknop {
color:inherit;
font-family:inherit;
text-decoration:none;
}

td .vouwdetailknop {
width:100%;
}

/* Knop-status (closed, open) worden met JS toegevoegd */
.vouwdetailknop::before {
border-radius:2px;
border:1px dotted transparent;
display:inline-block;
font-family:"FontAwesome";
text-align:center;
width:1.3em; /* fixed width */
}

.vouwdetailknop[data-fd-is-closed]::before {
content:'\f054'; /* chevron-right */
}

.vouwdetailknop[data-fd-is-open]::before {
content:'\f078'; /* chevron-down */
}

/*  */
tr.vouw > td {
border-top-style:dashed;
}

tr.vouw:hover {
background-color:inherit;
}

th.vouwkantlijn,
td.vouwkantlijn {
background-color:#6cace4;
}

/*  */
dt.caption .vouwdetailknop,
dt.h .vouwdetailknop,
legend .vouwdetailknop {
color:inherit;
display:block;
margin:-10px;
padding:10px;
}

dt.caption.vouwdetailknop::before,   /* is knop */
dt.caption .vouwdetailknop::before, /* met knop */
legend.vouwdetailknop::before,   /* is knop */
legend .vouwdetailknop::before { /* met knop */
border-color:white;
}

dt.h.vouwdetailknop::before,   /* is knop */
dt.h .vouwdetailknop::before { /* met knop */
border-color:black;
}

dd.solo[data-fd-target] { /* zonder dt, BIJNA volle breedte, inspringen voor vouw */
border-left: 40px solid #6cace4;
border-top-color: #6cace4;
padding-left: 5px;
}


/* **** */
p.knoppen.acties {}

p.knoppen.acties input[type="submit"],
p.knoppen.acties input[type="reset"],
p.knoppen.acties input[type="button"],
p.knoppen.acties button,
p.knoppen.acties a.knop {
box-sizing: border-box;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

p.knoppen.acties span.spatie {
background-color:#f0f0f0;
box-sizing:border-box;
color:#f0f0f0;
display:inline-block;
font-size:1px;
height:50px;
margin:-5px 5px 5px 5px;
vertical-align:top;
width:10px;
}

/***** Tablet (smaller than 959px) *****/
@media only screen and (min-width:768px) and (max-width:959px) {
    p.knoppen.acties input[type="submit"],
    p.knoppen.acties input[type="reset"],
    p.knoppen.acties input[type="button"],
    p.knoppen.acties button,
    p.knoppen.acties a.knop {
    margin-bottom:10px;
    margin-right:1%;
    width:48%;
    }

    p.knoppen.acties span.spatie {
    display:block;
    height:10px;
    margin:0 auto 15px auto;
    width:90%;
    }
}

/**** Mobiel ****/
@media only screen and (max-width: 767px) {
    p.knoppen.acties input[type="submit"],
    p.knoppen.acties input[type="reset"],
    p.knoppen.acties input[type="button"],
    p.knoppen.acties button,
    p.knoppen.acties a.knop {
    margin-bottom:10px;
    margin-right:0;
    width:100%;
    }

    p.knoppen.acties span.spatie {
    display:block;
    height:10px;
    margin:0 auto 15px auto;
    width:90%;
    }
}


/* **** */
form hr,
hr.vet {
margin-top:10px;
margin-bottom:10px;
border-top:10px solid #cfd1d2;
}

/* */
fieldset {
clear:both;
}

fieldset + fieldset {
margin-top:20px;
}

fieldset legend {
margin:10px 0;
padding:5px;
width:100%;
display:block;
font-family:"Source Sans Pro Light", sans-serif;
font-size:24px;
line-height:1.25;
background-color:#1d428a;
color:white;
}

fieldset legend label {
display:block;
}

fieldset fieldset legend {
font-size:22px;
background-color:#6cace4;
}

/*  */
p.veld {
margin-bottom:5px;
clear:both;
/* ??? Alt. voor float op label.veld
*/
padding-left:25%;
position:relative;
min-height:2em;
}

p.veld.groot_tekstveld,
p.veld.tekstverwerker {
/* ??? Alt. voor float op label.veld
*/
padding-left:1%;
}

p.veld.aansluitend {
margin-top:-5px;
}

p.veld.subveld {
/*margin-left:25%;*/
/*padding-left:20%;*/
/* ??? Alt. voor float op label.veld
*/
}

/*Mobiel*/
@media only screen and (max-width: 767px) {
    /* zie ook p.veld.fout */
    p.veld,
    p.veld.groot_tekstveld,
    p.veld.tekstverwerker {
    padding:5px 10px;
    border:1px solid #ddd;
    border-radius:3px;
    }

    p.veld.aansluitend {
    border-top:none;
    }

    p.veld.aansluitend label.veld.leeg {
    display:none;
    }
}

p.veld label.veld {
margin-bottom:10px;
padding-right:1%;
width:24%;
/*float:left;*/
/*clear:both;*/
/* ??? Alt. voor float op label.veld
*/
left:0;
line-height:1.2;
overflow:hidden;
position:absolute;
text-overflow:ellipsis;
top:5px;
white-space:nowrap;
}

p.veld:hover label.veld {
background-color:rgba(255, 255, 255, .9);
overflow:unset;
text-overflow:unset;
white-space:normal;
z-index:9999;
}

p.veld.verplicht label.veld:after,
label.verplicht:after {
padding-left:4px;
font-family:"FontAwesome";
font-variant:super;
content:'\f069'; /* asterisk */
/* content:'\f111'; */ /* circle */
}

p.veld.groot_tekstveld label.veld,
p.veld.tekstverwerker label.veld {
width:100%;
display:block;
/*float:none;*/
/* ??? Alt. voor float op label.veld
*/
margin-left:-1%;
position: relative;
}

p.veld.subveld label.veld {
/*width:19%;*/
/* ??? Alt. voor float op label.veld
*/
padding-left:2.5%;
}

p.veld input[type="text"],
p.veld input[type="search"],
p.veld input[type="number"],
p.veld input[type="password"],
p.veld input[type="datetime"],
p.veld input[type="date"],
p.veld input[type="time"],
p.veld input[type="tel"],
p.veld input[type="email"],
p.veld textarea {
margin-bottom:5px;
width:70%;
}

p.veld input[type="text"][maxlength="1"]  { width:1ch; }
p.veld input[type="text"][maxlength="2"]  { width:2ch; }
p.veld input[type="text"][maxlength="3"]  { width:3ch; }
p.veld input[type="text"][maxlength="4"]  { width:4ch; }
p.veld input[type="text"][maxlength="5"]  { width:5ch; }
p.veld input[type="text"][maxlength="6"]  { width:6ch; }
p.veld input[type="text"][maxlength="7"]  { width:7ch; }
p.veld input[type="text"][maxlength="8"]  { width:8ch; }
p.veld input[type="text"][maxlength="9"]  { width:9ch; }
p.veld input[type="text"][maxlength="10"] { width:10ch; }
p.veld input[type="text"][maxlength="11"] { width:11ch; }
p.veld input[type="text"][maxlength="12"] { width:12ch; }
p.veld input[type="text"][maxlength="13"] { width:13ch; }
p.veld input[type="text"][maxlength="14"] { width:14ch; }
p.veld input[type="text"][maxlength="15"] { width:15ch; }
p.veld input[type="text"][maxlength="16"] { width:16ch; }
p.veld input[type="text"][maxlength="17"] { width:17ch; }
p.veld input[type="text"][maxlength="18"] { width:18ch; }
p.veld input[type="text"][maxlength="19"] { width:19ch; }
p.veld input[type="text"][maxlength="20"] { width:20ch; }
p.veld input[type="text"][maxlength="21"] { width:21ch; }
p.veld input[type="text"][maxlength="22"] { width:22ch; }
p.veld input[type="text"][maxlength="23"] { width:23ch; }
p.veld input[type="text"][maxlength="24"] { width:24ch; }
p.veld input[type="text"][maxlength="25"] { width:25ch; }
p.veld input[type="text"][maxlength="26"] { width:26ch; }
p.veld input[type="text"][maxlength="27"] { width:27ch; }
p.veld input[type="text"][maxlength="28"] { width:28ch; }
p.veld input[type="text"][maxlength="29"] { width:29ch; }
p.veld input[type="text"][maxlength="30"] { width:30ch; }

/* (Ook) "eigen" data-types ipv. type="date"/type="time" ivm. halfzachte
ondersteuning door browsers.
*/
p.veld input[type="datetime"],
p.veld input[type="text"][data-type="datumtijd"] {
width:145px;
}

p.veld input[type="date"],
p.veld input[type="text"][data-type="datum"] {
width:80px;
}

p.veld input[type="time"],
p.veld input[type="text"][data-type="tijd"] {
width:45px;
}

p.veld input[type="time"][data-type="tijdmetseconden"],
p.veld input[type="text"][data-type="tijdmetseconden"] {
width:65px;
}

p.veld select {
max-width:70%;
}

p.veld a[data-lichtlijst] {
/*width:10%;*/
/* ??? Alt. voor float op label.veld
*/
}

p.veld a[data-lichtlijst] + input[type="text"] {
/*width:59%;*/
/* ??? Alt. voor float op label.veld
*/
}

p.veld.groot_tekstveld textarea,
p.veld textarea.groot_tekstveld,
p.veld.tekstverwerker textarea {
width:95%;
display:block;
}

p.veld.groot_tekstveld textarea,
p.veld textarea.groot_tekstveld {
min-height:9em;
}

p.veld.tekstverwerker.klein textarea { height:9em; }
p.veld.tekstverwerker textarea { height:18em; }
p.veld.tekstverwerker.groot textarea { height:36em; }

p.veld .noot {
padding-bottom:5px;
display:block;
/*padding-left:25%;*/
/* ??? Alt. voor float op label.veld
*/
padding-left:0;
}

p.veld.subveld .noot {
/*padding-left:20%;*/
/* ??? Alt. voor float op label.veld
*/
}

/**** Mobiel ****/
@media only screen and (max-width: 767px) {
    p.veld.subveld {
    margin-left:5%;
    }

    p.veld label.veld {
    width:100%;
    display:block;
    /*float:none;*/
    /* ??? Alt. voor float op label.veld
    */
    padding-left:0;
    position:relative;
    white-space:normal;
    }

    p.veld.subveld label.veld {
    /* ??? Alt. voor float op label.veld
    */
    padding-left:0;
    }

    p.veld.groot_tekstveld label.veld,
    p.veld.tekstverwerker label.veld {
    /* ??? Alt. voor float op label.veld
    */
    margin-left:0;
    }

    p.veld input[type="text"],
    p.veld input[type="search"],
    p.veld input[type="number"],
    p.veld input[type="password"],
    p.veld input[type="datetime"],
    p.veld input[type="date"],
    p.veld input[type="time"],
    p.veld input[type="tel"],
    p.veld input[type="email"],
    p.veld textarea,
    p.veld a[data-lichtlijst] + input[type="text"] {
    width:95%;
    }

    p.veld a[data-lichtlijst] {
    width:100%;
    }

    p.veld .noot {
    padding-left:0;
    }
}


/*  */
form > p.knoppen {
margin-top:10px;
padding-top:10px;
padding-left:25%;
border-top:10px solid #f0f0f0;
}

form > p.knoppen .spatie {
padding:15px 5px;
margin:0 5px;
background-color:#f0f0f0;
}

/**** Mobiel ****/
@media only screen and (max-width: 767px) {
    form > p.knoppen {
    padding-left:0;
    }

    form > p.knoppen input[type="submit"],
    form > p.knoppen input[type="reset"],
    form > p.knoppen input[type="button"],
    form > p.knoppen button,
    form > p.knoppen a.knop {
    margin-bottom:10px;
    width:100%;
    }

    form > p.knoppen .spatie {
    margin:5px 0;
    padding:5px;
    width:100%;
    display:inline-block;
    }
}


/*  */
input[type="text"],
input[type="search"],
input[type="number"],
input[type="password"],
input[type="datetime"],
input[type="date"],
input[type="time"],
input[type="tel"],
input[type="email"],
textarea,
select {
padding:5px 8px;
font-size:13px;
vertical-align:baseline;
border:1px solid #cfd1d2;
}

input[type="text"],
input[type="search"],
input[type="number"],
input[type="datetime"],
input[type="date"],
input[type="time"],
input[type="tel"],
input[type="email"],
textarea,
textarea.markItUpEditor {
font-family:"Lucida Console", "Courier New", "Andale Mono", "Lucidatypewriter", monospace;
}

input[type="text"][readonly],
input[type="search"][readonly],
textarea[readonly] {
border-style:dashed;
}

input[type="text"].klik_en_kopieer,
p.veld input[type="text"].klik_en_kopieer {
background-color:transparent;
border-style:none;
margin:0;
padding:0;
cursor:pointer;
}

td input[type="text"].klik_en_kopieer,
dl.tweekoloms dd input[type="text"].klik_en_kopieer {
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
white-space: nowrap;
}

dl.tweekoloms dd input[type="text"].klik_en_kopieer {
width: 95%;
}

select {
padding-top:4px;
padding-bottom:4px;
}

/* Een selecteerbare "groep"; want een <optgroup> kan niet gekozen worden. */
select option.groep {
background-color: #2d2926;
color: #fefefe;
font-weight: bold;
}

/*  */
input[type="submit"],
input[type="reset"],
input[type="button"],
button,
a.knop,
div.knop {
margin-bottom:8px;
padding:6px 12px;
display:inline-block;
cursor:pointer;
font-weight:bold;
text-align:center;
vertical-align:baseline;
/* ??? */ /* white-space:nowrap; */
border:0;
border-radius:3px;
}

.knop label { /* tbv. label in een div */
cursor:pointer;
}

input[type="submit"]:active,
input[type="reset"]:active,
input[type="button"]:active,
button:active,
a.knop:active,
div.knop:active {
border-radius:6px;
box-shadow:inset 0px 0px 4px 0px rgba(100, 100, 100, 0.7);
}

button,
a.knop,
div.knop {
padding-top:5px;
padding-bottom:4px;
}

a.knop,
a.knop:hover {
text-decoration:none;
}

/* Zie ook .nonactief */
input[type="submit"][disabled="disabled"],
input[type="reset"][disabled="disabled"],
input[type="button"][disabled="disabled"],
button[disabled="disabled"],
a.knop.uitgeschakeld,
label.knop.uitgeschakeld {
cursor:not-allowed;
}

input[type="submit"], /* standaard/neutrale kleur */
input[type="submit"].primair, /* alias voor "standaard" tov. secundair/alternatief */
input[type="reset"],
input[type="reset"].primair,
input[type="button"],
input[type="button"].primair,
button,
button.primair,
a.knop,
a.knop.primair,
div.knop,
div.knop.primair {
background-color:#1d428a;
color:white;
text-transform:uppercase;
}

input[type="submit"]:hover,
input[type="submit"].primair:hover,
input[type="reset"]:hover,
input[type="reset"].primair:hover,
input[type="button"]:hover,
input[type="button"].primair:hover,
button:hover,
button.primair:hover,
a.knop:hover,
a.knop.primair:hover,
div.knop:hover,
div.knop.primair:hover {
background-color:#6cace4;
}

input[type="submit"].alternatief,
input[type="submit"].secundair,
input[type="reset"].alternatief,
input[type="reset"].secundair,
input[type="button"].alternatief,
input[type="button"].secundair,
button.alternatief,
button.secundair,
a.knop.alternatief,
a.knop.secundair,
div.knop.alternatief,
div.knop.secundair {
background-color:#6cace4;
}

input[type="submit"].alternatief:hover,
input[type="submit"].secundair:hover,
input[type="reset"].alternatief:hover,
input[type="reset"].secundair:hover,
input[type="button"].alternatief:hover,
input[type="button"].secundair:hover,
button.alternatief:hover,
button.secundair:hover,
a.knop.alternatief:hover,
a.knop.secundair:hover,
div.knop.alternatief:hover,
div.knop.secundair:hover {
background-color:#1d428a;
}

input[type="submit"].positief,
input[type="reset"].positief,
input[type="button"].positief,
button.positief,
a.knop.positief,
div.knop.positief {
background-color:mediumseagreen;
}

input[type="submit"].positief:hover,
input[type="reset"].positief:hover,
input[type="button"].positief:hover,
button.positief:hover,
a.knop.positief:hover,
div.knop.positief:hover {
background-color:seagreen;
}

input[type="submit"].negatief,
input[type="reset"].negatief,
input[type="button"].negatief,
button.negatief,
a.knop.negatief,
div.knop.negatief {
background-color:orangered;
}

input[type="submit"].negatief:hover,
input[type="reset"].negatief:hover,
input[type="button"].negatief:hover,
button.negatief:hover,
a.knop.negatief:hover,
div.knop.negatief:hover {
background-color:red;
}

/* NOTE: (Feitelijk) geen hover voor nonactief */
input[type="submit"].nonactief,
input[type="submit"].nonactief:hover,
input[type="reset"].nonactief,
input[type="reset"].nonactief:hover,
input[type="button"].nonactief,
input[type="button"].nonactief:hover,
button.nonactief,
button.nonactief:hover,
a.knop.nonactief,
a.knop.nonactief:hover,
div.knop.nonactief,
div.knop.nonactief:hover {
background-color:darkgrey;
color:silver;
cursor:not-allowed;
}


/*  */
input[type="submit"], /* standaard grootte, past (ongeveer) naast formuliervelden */
input[type="reset"],
input[type="button"],
button,
a.knop,
div.knop {
font-size:12px;
}

input[type="submit"].klein, /* voornamelijk iets smaller */
input[type="reset"].klein,
input[type="button"].klein,
button.klein,
a.knop.klein,
div.knop.klein {
padding-left:6px;
padding-right:6px;
font-size:11px;
line-height:1;
}

table input[type="submit"].klein,
table input[type="reset"].klein,
table input[type="button"].klein,
table button.klein,
table a.knop.klein,
table div.knop.klein,
dl.tweekoloms input[type="submit"].klein,
dl.tweekoloms input[type="reset"].klein,
dl.tweekoloms input[type="button"].klein,
dl.tweekoloms button.klein,
dl.tweekoloms a.knop.klein,
dl.tweekoloms div.knop.klein {
margin:0;
}

input[type="submit"].groot,
input[type="reset"].groot,
input[type="button"].groot,
button.groot,
a.knop.groot,
div.knop.groot {
font-size:14px;
line-height:2;
}

input[type="submit"].gigantisch,
input[type="reset"].gigantisch,
input[type="button"].gigantisch,
button.gigantisch,
a.knop.gigantisch,
div.knop.gigantisch {
font-size:20px;
line-height:2.5;
}


/* **** */
/* Standaard "blokken" */
p.fout,
ul.fout,
div.fout,
span.fout,
p.waarschuwing,
ul.waarschuwing,
div.waarschuwing,
span.waarschuwing,
p.info,
ul.info,
div.info,
span.info,
p.inbehandeling,
ul.inbehandeling,
div.inbehandeling,
span.inbehandeling,
p.test,
ul.test,
div.test,
span.test {
border-radius:2px;
border-style:solid;
border-width:2px;
margin: 0 0 20px 0;
padding:5px 5px 5px 40px;
position:relative;
}

div.fout.mini { /* voorlopig alleen even voor "fout" */
padding:2px 2px 20px 22px;
display:inline-block;
vertical-align:bottom;
cursor:help;
}

/*  */
ul.fout,
ul.waarschuwing,
ul.info,
ul.inbehandeling,
ul.test {
padding-left: 25px;
}

ul.fout li,
ul.waarschuwing li,
ul.info li,
ul.inbehandeling li,
ul.test li {
margin: 5px 0 0 0;
padding: 0 0 0 5px;
}

ul.fout li:first-child,
ul.waarschuwing li:first-child,
ul.info li:first-child,
ul.inbehandeling li:first-child,
ul.test li:first-child {
margin-top: 0;
}

ul.fout li.caption,
ul.waarschuwing li.caption,
ul.info li.caption,
ul.inbehandeling li.caption,
ul.test li.caption {
font-weight: bold;
list-style: none;
margin-left: -20px;
}


/* Standaard "inline" */
strong.fout,
em.fout,
abbr.fout,
strong.waarschuwing,
em.waarschuwing,
abbr.waarschuwing,
strong.info,
em.info,
abbr.info,
strong.inbehandeling,
em.inbehandeling,
abbr.inbehandeling,
strong.test,
em.test,
abbr.test {
padding-left:2px;
padding-right:2px;
}

/* Standaard (ruimte voor) icoon (in "blokken") */
p.fout::before,
ul.fout::before,
div.fout::before,
span.fout::before,
p.waarschuwing::before,
ul.waarschuwing::before,
div.waarschuwing::before,
span.waarschuwing::before,
p.info::before,
ul.info::before,
div.info::before,
span.info::before,
p.inbehandeling::before,
ul.inbehandeling::before,
div.inbehandeling::before,
span.inbehandeling::before,
p.test::before,
ul.test::before,
div.test::before,
span.test::before {
margin-top:-10px;
width:30px;
position:absolute;
top:50%;
left:5px;
text-align:center;
font-size:26px;
font-family:"FontAwesome";
}

div.fout.mini::before,
div.waarschuwing.mini::before,
div.info.mini::before,
div.inbehandeling.mini::before,
div.test.mini::before {
margin-top:-8px;
width:20px;
left:2px;
font-size:18px;
}

/*  */
ul.fout::before,
ul.waarschuwing::before,
ul.info::before,
ul.inbehandeling::before,
ul.test::before {
right: 5px;
left: unset;
opacity: .25;
}

ul.fout li::marker,
ul.waarschuwing li::marker,
ul.info li::marker,
ul.inbehandeling li::marker,
ul.test li::marker {
font-family: "FontAwesome";
}

ul.fout li.caption::marker,
ul.waarschuwing li.caption::marker,
ul.info li.caption::marker,
ul.inbehandeling li.caption::marker,
ul.test li.caption::marker {
content: '';
}


/* ** */
.fout,
input[type="text"].fout,
input[type="search"].fout,
input[type="number"].fout,
input[type="password"].fout,
input[type="datetime"].fout,
input[type="date"].fout,
input[type="time"].fout,
input[type="tel"].fout,
input[type="email"].fout,
textarea.fout,
select.fout,
p.veld.fout label.veld,
p.veld.fout input[type="text"],
p.veld.fout input[type="search"],
p.veld.fout input[type="number"],
p.veld.fout input[type="password"],
p.veld.fout input[type="datetime"],
p.veld.fout input[type="date"],
p.veld.fout input[type="time"],
p.veld.fout input[type="tel"],
p.veld.fout input[type="email"],
p.veld.fout textarea,
p.veld.fout select {
color:red;
border-color:red;
/* Geen background-color ivm. formulier-elementen. */
}

p.fout,
ul.fout,
div.fout,
dt.fout,
dd.fout,
span.fout,
strong.fout,
em.fout,
abbr.fout {
background-color:yellow;
}

p.fout::before,
ul.fout::before,
ul.fout li::marker,
div.fout::before,
span.fout::before {
content:'\f071'; /* exclamation-triangle */
}

p.veld.fout { /* voorgaande weer ongedaan maken ;) */
padding:0;
background-color:transparent;
border:none;
/* ??? Alt. voor float op label.veld
*/
padding-left:25%;
}

p.veld.fout::before { /* voorgaande weer ongedaan maken ;) */
display:none;
content:'';
}

p.veld span.fout { /* Foutmelding(tekst) bij formulierveld */
margin:5px 5% 10px 25%;
display:block;
/* ??? Alt. voor float op label.veld
*/
margin:5px 5% 10px 0;
}

p.veld.subveld span.fout {
/*margin-left:20%;*/
/* ??? Alt. voor float op label.veld
*/
}

p.veld.groot_tekstveld span.fout {
margin-left:1%;
}

/**** Mobiel ****/
@media only screen and (max-width: 767px) {
    p.veld.fout { /* herhaling p.veld */
    padding:5px 10px;
    border:1px solid #ddd;
    border-radius:3px;
    }

    p.veld span.fout,
    p.veld.subveld span.fout,
    p.veld.groot_tekstveld span.fout {
    margin-left:0;
    }
}


/*  */
.waarschuwing {
color:white;
background-color:orangered;
border-color:white;
}

.waarschuwing a {
color:white;
}

p.waarschuwing::before,
ul.waarschuwing::before,
ul.waarschuwing li::marker,
div.waarschuwing::before,
span.waarschuwing::before {
/*content:'\f059';*/ /* question-circle */ /* beter? apart(er) van .fout */
content:'\f06a'; /* exclamation-circle */
}

/* speciaaltje */
p.waarschuwing.archief::before,
ul.waarschuwing.archief::before,
ul.waarschuwing.archief li::marker,
div.waarschuwing.archief::before,
span.waarschuwing.archief::before {
color:wheat; /* "kartonnen doos"-bruin */
content:'\f187'; /* archive */
}


/*  */
.info {
color:white;
background-color:royalblue;
border-color:white;
}

.info a {
color:white;
}

p.info::before,
ul.info::before,
ul.info li::marker,
div.info::before,
span.info::before {
content:'\f05a'; /* info-circle */
}


/*  */
.inbehandeling {
color:black;
background-color:orange;
border-color:black;
}

.inbehandeling a {
color:black;
}

p.inbehandeling::before,
ul.inbehandeling::before,
ul.inbehandeling li::marker,
div.inbehandeling::before,
span.inbehandeling::before {
font-family:sans-serif;
content:'🚧'; /* dus niet FontAwesome */
}


/*  */
.test {
color:deeppink;
background-color:pink;
border-color:deeppink;
}

.test a {
color:deeppink;
}

p.test::before,
ul.test::before,
ul.test li::marker,
div.test::before,
span.test::before {
/*content:'\f03a';*/ /* ("TO DO") list */
content:'\f0c3'; /* flask */
}


/*  */
/* Een <hr> gaat niet in een <p> */
p.fout span.splits,
p.waarschuwing span.splits,
p.info span.splits,
p.inbehandeling span.splits,
p.test span.splits {
width:99%;
height:5px;
display:inline-block;
}

p.fout span.splits          { background-color:red; }
p.waarschuwing span.splits  { background-color:white; }
p.info span.splits          { background-color:white; }
p.inbehandeling span.splits { background-color:black; }
p.test span.splits          { background-color:deeppink; }


/*  */
.led {
background-repeat:no-repeat;
border-color:#111;
border-radius:50%;
border-style:solid;
box-sizing:border-box;
display:inline-block;
vertical-align:text-bottom;
/* Voor een icoon */
color:#111;
text-align:center;
}

.led.gedempt {
opacity:.5;
/* Werkt niet in IE, werkt NOG niet in Edge. (jul 2019) */
/*background-blend-mode:hue; */
}

.led { /* standaard maat */
border-width:1px;
box-shadow:0px 0px 2px white inset;
height:16px;
width:16px;
/* Voor een optioneel icoon */
font-size:12px;
line-height:13px;
}

.led.middel {
border-width:2px;
box-shadow:0px 0px 3px white inset;
height:22px;
width:22px;
/* Voor een optioneel icoon */
font-size:14px;
line-height:17px;
}

.led.groot {
border-width:3px;
box-shadow:0px 0px 4px white inset;
height:64px;
width:64px;
/* Voor een optioneel icoon */
font-size:45px;
line-height:58px;
}

.led.wit    { background-color:white; }
.led.grijs  { background-color:grey; }
.led.zwart  { background-color:black; }
.led.rood   { background-color:red; }
.led.oranje { background-color:orange; }
.led.groen  { background-color:green; }
.led.geel   { background-color:yellow; }
.led.roze   { background-color:hotpink; }

.led.roodgroen {
background-image:
    linear-gradient(red, red),
    linear-gradient(green, green);
}

.led.roodoranje {
background-image:
    linear-gradient(red, red),
    linear-gradient(orange, orange);
}

.led.oranjerood {
background-image:
    linear-gradient(orange, orange),
    linear-gradient(red, red);
}

.led.oranjegroen {
background-image:
    linear-gradient(orange, orange),
    linear-gradient(green, green);
}

.led.groenrood {
background-image:
    linear-gradient(green, green),
    linear-gradient(red, red);
}

.led.groenoranje {
background-image:
    linear-gradient(green, green),
    linear-gradient(orange, orange);
}

/* Voorbeeld, wordt nog niet gebruikt, maar het kan. */
.led.roodoranjegroen {
background-image:
    linear-gradient(red, red),
    linear-gradient(orange, orange),
    linear-gradient(green, green);
}

/* Tweekleurs verdeling */
.led.roodgroen,
.led.roodoranje,
.led.oranjerood,
.led.oranjegroen,
.led.groenrood,
.led.groenoranje {
background-size:
    50% 100%,
    100% 100%;
}

/* Driekleurs verdeling */
.led.roodoranjegroen {
background-size:
    33% 100%,
    66% 100%,
    100% 100%;
}


/*  */
/* Ook voor de iconen maar wat kleur mogelijk maken. */
[data-icoon].rood,
[data-icoon].roodgroen,
[data-icoon].roodoranje {
color:red;
}

[data-icoon].oranje,
[data-icoon].oranjerood,
[data-icoon].oranjegroen {
color:orange;
}

[data-icoon].groen,
[data-icoon].groenrood,
[data-icoon].groenoranje {
color:green;
}

[data-icoon].roodgroen,
[data-icoon].oranjegroen {
background-color:green;
}

[data-icoon].roodoranje,
[data-icoon].groenoranje {
background-color:orange;
}

[data-icoon].oranjerood,
[data-icoon].groenrood {
background-color:red;
}

[data-icoon].geel {
color:yellow;
}

[data-icoon].grijs {
color:grey;
}

[data-icoon].roze {
color:hotpink;
}

[data-icoon].gedempt {
opacity:.5;
}

[data-icoon].groenoranje,
[data-icoon].groenoranje,
[data-icoon].groenrood,
[data-icoon].groenrood,
[data-icoon].oranjegroen,
[data-icoon].oranjegroen,
[data-icoon].oranjerood,
[data-icoon].oranjerood,
[data-icoon].roodgroen,
[data-icoon].roodgroen,
[data-icoon].roodoranje,
[data-icoon].roodoranje {
/* Om een achtergrondkleur in te kunnen stellen. */
border-radius:50%;
}

/*  */
div.klantwaarderingsticker {
border:1px solid #ddd;
box-sizing:border-box;
cursor:help;
margin:0 auto;
max-width:175px;
padding:22px 8px;
text-align:center;
}

div.klantwaarderingsticker[data-tevredengraad="9"],
div.klantwaarderingsticker[data-tevredengraad="8"],
div.klantwaarderingsticker[data-tevredengraad="7"],
div.klantwaarderingsticker[data-tevredengraad="6"],
div.klantwaarderingsticker[data-tevredengraad="5"],
div.klantwaarderingsticker[data-tevredengraad="4"],
div.klantwaarderingsticker[data-tevredengraad="3"],
div.klantwaarderingsticker[data-tevredengraad="2"]  { background-color:green; color:white; }
div.klantwaarderingsticker[data-tevredengraad="1"]  { background-color:teal; color:white; }
div.klantwaarderingsticker[data-tevredengraad="0"]  { background-color:yellow; color:black; }
div.klantwaarderingsticker[data-tevredengraad="-1"] { background-color:orange; color:yellow; }
div.klantwaarderingsticker[data-tevredengraad="-2"],
div.klantwaarderingsticker[data-tevredengraad="-3"],
div.klantwaarderingsticker[data-tevredengraad="-4"],
div.klantwaarderingsticker[data-tevredengraad="-5"],
div.klantwaarderingsticker[data-tevredengraad="-6"],
div.klantwaarderingsticker[data-tevredengraad="-7"],
div.klantwaarderingsticker[data-tevredengraad="-8"],
div.klantwaarderingsticker[data-tevredengraad="-9"] { background-color:red; color:yellow; }

div.klantwaarderingsticker strong {
box-sizing:border-box;
display:block;
font-size:200%;
font-weight:bold;
margin-top:6px;
}

div.klantwaarderingsticker em {
box-sizing:border-box;
display:block;
font-size:110%;
margin-top:6px;
}


/*  */
/* Te combineren met .interne_notitie */
.opdrachtmemo {
background-color:#fafafa;
font-family:"Lucida Console", "Courier New", "Andale Mono", "Lucidatypewriter", monospace;
padding:6px;
font-size:12px;
white-space:pre-wrap;
word-wrap:break-word;
}

/*  */
/* (Ook) voor bijv. textareas. */
/* Te combineren met .opdrachtmemo */
.interne_notitie {
background-color:lightgoldenrodyellow;
}

/*  */
.gil,
.gillen {
font-variant:small-caps;
}

.schreeuw,
.schreeuwen {
text-transform:uppercase;
}

/*  */
div.diagrammen {
text-align: center;
}

div.diagrammen figure {
box-sizing: border-box;
display: inline-block;
margin: 0;
padding: 1%;
vertical-align: top;
}

/* drie kolommen */
div.diagrammen figure.b1-3 { width: 30%; }
div.diagrammen figure.b2-3 { width: 60%; }
div.diagrammen figure.b3-3 { width: 90%; }

/* vier kolommen */
div.diagrammen figure.b1-4 { width: 22%; }
div.diagrammen figure.b2-4 { width: 44%; }
div.diagrammen figure.b3-4 { width: 66%; }
div.diagrammen figure.b4-4 { width: 88%; }


/***** Phone landscape (420px) *****/
/***** Phone portrait (300px) *****/
@media only screen and (max-width:767px) {
    div.diagrammen figure {
    width: 85%;
    }
}


/*  */
th img.bedrijfstak,
td img.bedrijfstak,
td img.bedrijfstak,
dl.tweekoloms dt img.bedrijfstak,
dl.tweekoloms dd img.bedrijfstak {
max-height: 20px;
}

/*  */
.verwijderd,
tr.verwijderd th,
tr.verwijderd th *,
tr.verwijderd td {
color:#bbb;
}

.verwijderd:hover,
tr.verwijderd:hover th,
tr.verwijderd:hover th *,
tr.verwijderd:hover td {
color:inherit;
}

fieldset.verwijderd > legend,
ul.tabs li.verwijderd a.knop {
color:#ddd;
}


/*  */
.opzeggend,
.vervallend,
tr.opzeggend th,
tr.vervallend th,
tr.opzeggend th *,
tr.vervallend th *,
tr.opzeggend td,
tr.vervallend td {
color:#ccc;
}

tr.opzeggend td.einddatum,
tr.vervallend td.einddatum {
font-weight:bold;
}

tr.opzeggend td.einddatum::after,
tr.vervallend td.einddatum::after {
content:'\f017'; /* clock-o */
font-family:"FontAwesome";
padding-left:5px;
}

/*  */
.opgezegd,
.vervallen,
tr.opgezegd th,
tr.vervallen th,
tr.opgezegd th *,
tr.vervallen th *,
tr.opgezegd td,
tr.vervallen td {
color:#ccc;
text-decoration:line-through;
}

tr.opgezegd td.einddatum,
tr.vervallen td.einddatum {
font-weight:bold;
}

tr.opgezegd td.einddatum::after,
tr.vervallen td.einddatum::after {
color:orangered;
content:'\f00d'; /* times (close) */
font-family:"FontAwesome";
padding-left:5px;
}


/*  */
tr.verschil td.meer abbr,
tr.verschil td.minder abbr,
tr.verschil td.gelijk abbr {
border-radius: 3px;
margin-left: -3px;
padding: 0 3px;
}

tr.verschil td.meer.r abbr,
tr.verschil td.minder.r abbr,
tr.verschil td.gelijk.r abbr {
margin-left: 0;
margin-right: -3px;
}

tr.verschil td.meer.c abbr,
tr.verschil td.minder.c abbr,
tr.verschil td.gelijk.c abbr {
margin-left: 0;
margin-right: 0;
}

tr.verschil td.meer abbr   { background-color:red; color:white; }
tr.verschil td.minder abbr { background-color:green; color:white; }
tr.verschil td.gelijk abbr { background-color:white; }


/*  */
.klikbaar {
cursor:pointer;
}


/* **** */
span.muur {
width:100%;
display:block;
}

span.behang_wit,
span.muur[data-muurom="sitenavigatie"],
span.muur[data-muurom="paginanavigatie"],
span.muur[data-muurom="inhoud"],
span.muur[data-muurom="gebruikernavigatie"] {
background-color:#fff;
}

span.behang_blauw {
background-color:#1d428a;
}

span.behang_donkergrijs,
span.muur[data-muurom="paginakop"],
span.muur[data-muurom="voet"] {
background-color:#2d2926;
}

/* speciaaltje */
span.muur.archief[data-muurom="paginakop"] {
background-color:#ff4500; /* .waarschuwing-kleur */
}

span.behang_lichtgrijs,
span.muur[data-muurom="broodkruimels"] {
background-color:#f0f0f0;
}


/*  */
/* FUTURE: De z-indexes even ontdubbelen met/tov. body.scrolled */
[data-muurom="gebruikernavigatie"] {
position:relative;
z-index:9999;
}

[data-muurom="sitenavigatie"] {
position:relative;
z-index:9998;
}

[data-muurom="broodkruimels"],
[data-muurom="paginanavigatie"] {
position:relative;
z-index:9997; /* onder eventuele uitklappende menu's van de koppen */
}


/*  */
body.scrolled                     { padding-top:278px; }
body.met_paginanavigatie.scrolled { padding-top:310px; }

/* NOTE: Muur voor "gebruikernavigatie" wordt (voorlopig) niet vastgezet. */
body.scrolled [data-muurom="sitenavigatie"],
body.scrolled [data-muurom="paginakop"],
body.scrolled [data-muurom="broodkruimels"],
body.scrolled [data-muurom="paginanavigatie"] {
position:fixed;
left:0;
z-index:9999;
}

body.scrolled [data-muurom="broodkruimels"],
body.scrolled [data-muurom="paginanavigatie"] {
z-index:9997; /* onder eventuele uitklappende menu's van de koppen */
}

body.scrolled [data-muurom="paginakop"] {
z-index:9998; /* "onder" de (muur van de) sitenavigatie */
}

/* Zelfde plaats, en... */
body.scrolled [data-muurom="sitenavigatie"] { height:25px; top:0; }
body.scrolled [data-muurom="paginakop"]     { height:25px; top:0; }

/* ...overlappend. */
body.scrolled [data-muurom="sitenavigatie"] {
background-color:transparent; /* kleur van de (muur van de) paginakop tonen  */
}

/* Zelfde plaats, maar... */
body.scrolled [data-muurom="broodkruimels"]   { height:20px; top:25px; }
body.scrolled [data-muurom="paginanavigatie"] { height:25px; top:25px; }

/* ...geen broodkruimels wanneer er (gescrolled EN) paginanavigatie is. */
body.met_paginanavigatie.scrolled [data-muurom="broodkruimels"] {
display:none;
}

/**** Mobiel ****/
@media only screen and (max-width: 767px) {
    #sitenavigatie div.grid_12,
    #paginakop div.grid_12,
    #broodkruimels div.grid_12,
    #paginanavigatie div.grid_12 {
    margin-top:0; /* Amazium standaard overstemmen */
    }
}


/*  */
#gebruikernavigatie {
margin-bottom:-9px;
padding-bottom:0px;
padding-top:6px;
}

#gebruikernavigatie ul,
#gebruikernavigatie li {
margin:0;
padding:0;
list-style:none;
}

#gebruikernavigatie ul {
position:relative;
float:right;
}

#gebruikernavigatie li {
padding:4px 10px;
display:inline-block;
color:#1d428a;
font-family:"Source Sans Pro Light", sans-serif;
font-size:16px;
text-transform:uppercase;
}

#gebruikernavigatie li span[data-icoon] {
color:#1d428a;
}

#gebruikernavigatie li a {
color:#1d428a;
text-decoration:none;
}

#gebruikernavigatie li a:hover {
color:#6cace4;
}

#gebruikernavigatie li a:hover span[data-icoon] {
color:#6cace4;
}


/**** Mobiel ****/
@media only screen and (max-width: 767px) {
    span.muur[data-muurom="gebruikernavigatie"] {
    display:none;
    }
}


/*  */
#sitenavigatie {
padding-top:12px;
padding-bottom:12px;
}

#sitenavigatie > div { /* grid */
position:relative;
}

#sitenavigatie img.logo.maxi {
height:64px;
}

#sitenavigatie img.logo.mini {
display:none;
}

#sitenavigatie nav.maxi {
margin-top:20px;
float:right;
position:relative;
}

#sitenavigatie nav.mini {
display:none;
position:absolute;
top:0;
right:0;
}

#sitenavigatie nav.maxi ul,
#sitenavigatie nav.maxi li {
margin:0;
padding:0;
display:inline-block;
position:relative;
list-style:none;
}

#sitenavigatie nav.maxi ul ul {
background-color:#3f3f3f;
color:white;
left:0;
min-width:150px;
opacity:0;
padding-bottom:5px;
padding-top:5px;
position:absolute;
top:26px;
visibility:hidden;
-webkit-transition:visibility 0s linear 0.5s, opacity 0.5s linear 0s;
-moz-transition:visibility 0s linear 0.5s, opacity 0.5s linear 0s;
-o-transition:visibility 0s linear 0.5s, opacity 0.5s linear 0s;
transition:visibility 0s linear 0.5s, opacity 0.5s linear 0s;
}

#sitenavigatie nav.maxi > ul > li:last-child ul {
left:unset;
right:0;
}

#sitenavigatie nav.maxi > ul > li:hover {
background-color:#3f3f3f;
}

#sitenavigatie nav.maxi > ul > li:hover > a,
body.scrolled #sitenavigatie nav.maxi > ul > li:hover > a {
color:#0082cb;
}

#sitenavigatie nav.maxi > ul > li:hover ul {
visibility:visible;
opacity:1;
-webkit-transition-delay:0s;
-moz-transition-delay:0s;
-o-transition-delay:0s;
transition-delay:0s;
}

#sitenavigatie nav.maxi ul ul li {
display:block; /* niet inline-block */
}

#sitenavigatie nav.maxi a {
color:#303e48;
font-family:"Source Sans Pro", sans-serif;
font-size:14px;
text-decoration:none;
/* Amazium standaard overstemmen (niet alles, alleen een kleurovergang) */
-moz-transition:color .1s linear 0s;
-webkit-transition:color .1s linear 0s;
-o-transition:color .1s linear 0s;
transition:color .1s linear 0s;
}

#sitenavigatie nav.maxi > ul > li > a {
padding:0 8px;
display:inline-block;
line-height:2;
text-transform:uppercase;
}

#sitenavigatie nav.maxi > ul ul a {
display:block;
font-family:"Source Sans Pro Light", sans-serif;
font-size:13px;
line-height:2;
padding:0 20px;
white-space:nowrap;
color:white;
}

#sitenavigatie nav.maxi > ul ul a:hover {
color:#6cace4;
}

body.scrolled #sitenavigatie {
padding-top:0;
padding-bottom:0;
}

body.scrolled #sitenavigatie img.logo.maxi {
display:none;
}

body.scrolled #sitenavigatie img.logo.mini {
display:inline;
}


body.scrolled #sitenavigatie nav.maxi,
body.scrolled #sitenavigatie nav.mini select {
margin-right:28px; /* wat ruimte voor bedrijfstakiconen */
}

body.scrolled #sitenavigatie nav.maxi {
margin-top:0;
}

body.scrolled #sitenavigatie nav.maxi > ul > li > a {
padding:0 6px;
color:white;
font-size:12px;
line-height:2;
}

body.scrolled #sitenavigatie nav.maxi ul ul {
top:24px;
}

#sitenavigatie nav.mini select {
padding-top:2px;
padding-bottom:2px;
}


/***** Tablet (smaller than 959px) *****/
@media only screen and (min-width:768px) and (max-width:959px) {
    #sitenavigatie nav.maxi {
    margin-top:26px;
    }

    #sitenavigatie nav.maxi a {
    font-size:16px;
    }
}

/**** Mobiel ****/
@media only screen and (max-width: 767px) {
    #sitenavigatie {
    padding-top:5px;
    padding-bottom:5px;
    }

    #sitenavigatie img.logo.maxi {
    height:32px;
    }

    #sitenavigatie nav.maxi {
    display:none;
    }

    #sitenavigatie nav.mini {
    display:block;
    }
}


/*  */
#paginakop {
padding-top:45px;
padding-bottom:50px;
}

#paginakop * {
color:white;
}

#paginakop h1,
#paginakop h2 {
font-weight:normal;
margin:0;
padding:0;
}

#paginakop h1 {
float:left;
font-family:"Source Sans Pro", sans-serif;
font-size:60px;
font-weight:bold;
line-height:.9;
width:79%;
}

#paginakop h2 {
font-family:"Source Sans Pro Light", sans-serif;
font-size:16px;
line-height:1.5;
text-transform:uppercase;
}

#paginakop h2 * {
color:#ccc;
text-decoration:none;
}

#paginakop h2 a + a {
border-left:1px dotted #ccc;
padding-left:3px;
}

#paginakop figure {
float:right;
margin:0;
padding:0;
text-align:right;
width:20%;
}

#paginakop figure img,
#paginakop figure span[data-icoon] {
color:#76bbf3;
font-size: 42px; /* icoon */
height:42px; /* afbeelding */
margin:6px 0 0 3px;
vertical-align: middle;
}

/* speciaaltje */
#paginakop figure span[data-icoon="archief"] {
color:wheat; /* "kartonnen doos"-bruin */
}

body.scrolled #paginakop {
padding-top:0;
padding-bottom:0;
}

body.scrolled #paginakop h1,
body.scrolled #paginakop h2 {
display:inline-block;
float:none;
font-size:16px;
font-weight:normal;
line-height:1.7;
padding-left:36px; /* ruimte voor het logo in de nu overlappende #sitenavigatie */
width:auto;
}

body.scrolled #paginakop h2 + h1 {
padding-left:8px;
}

body.scrolled #paginakop h2 {
font-size:14px;
}

body.scrolled #paginakop figure img,
body.scrolled #paginakop figure span[data-icoon] {
font-size: 20px; /* icoon */
height:20px; /* afbeelding */
margin:0 0 0 1px;
opacity:.5;
}

/* speciaaltje */
body.scrolled #paginakop figure span[data-icoon="archief"] {
opacity: 1;
}


/**** Tablet ****/
@media only screen and (min-width: 768px) and (max-width: 959px) {
    #paginakop {
    padding-top:25px;
    padding-bottom:25px;
    }

    #paginakop h1 {
    font-size:48px;
    }

    #paginakop figure img,
    #paginakop figure span[data-icoon] {
    font-size: 32px; /* icoon */
    height:32px; /* afbeelding */
    margin:8px 0 0 3px;
    }
}

/**** Mobiel ****/
@media only screen and (max-width: 767px) {
    #paginakop {
    padding-top:10px;
    padding-bottom:10px;
    }

    #paginakop h1 {
    font-size:35px;
    }

    #paginakop figure img,
    #paginakop figure span[data-icoon] {
    font-size: 24px; /* icoon */
    height:24px; /* afbeelding */
    margin:3px 0 0 1px;
    }

    body.scrolled #paginakop h2 {
    display:none;
    }

    body.scrolled #paginakop h1,
    body.scrolled #paginakop h2 + h1 {
    padding-left:28px; /* (iets minder) ruimte voor het logo in de nu overlappende #sitenavigatie */
    }

    body.scrolled #paginakop figure img,
    body.scrolled #paginakop figure span[data-icoon] {
    margin:0 0 0 -9px;
    }
}


/*  */
#broodkruimels {
padding-top:10px;
padding-bottom:10px;
}

#broodkruimels p {
margin:0;
padding:0;
text-transform:uppercase;
font-size:13px;
}

body.scrolled #broodkruimels {
padding-top:0;
padding-bottom:0;
}

/**** Mobiel ****/
@media only screen and (max-width: 767px) {
    #broodkruimels {
    padding-top:0;
    padding-bottom:0;
    }
}

/*  */
#paginanavigatie {  }

body.iframe #paginanavigatie {
background-color:rgba(240, 240, 240, 0.9);
left:0;
padding:0 10px;
position:fixed;
top:0;
width:100%;
z-index:9000;
}


/*  */
#paginanavigatie ul.tabs,
#paginanavigatie form.bladeren,
#paginanavigatie form.zoeken,
#paginanavigatie p.knoppen { /* verzamelbak voor "andere" knoppen */
display:block;
margin:0;
padding:0;
position:relative;
}

#paginanavigatie ul.tabs {
z-index:1;
}

#paginanavigatie form.bladeren,
#paginanavigatie form.zoeken {
width:45%;
}

#paginanavigatie ul.tabs,
#paginanavigatie form.bladeren,
#paginanavigatie p.knoppen {
float:left;
}

#paginanavigatie form.zoeken {
float:right;
text-align:right;
}

#paginanavigatie ul.tabs + p.knoppen,
#paginanavigatie form.bladeren + p.knoppen,
#paginanavigatie p.knoppen + p.knoppen {
float:right;
}

#paginanavigatie ul.tabs + form.bladeren,
#paginanavigatie ul.tabs + form.zoeken,
#paginanavigatie form.bladeren + form.zoeken + p.knoppen {
clear:both;
}


/* */
#paginanavigatie ul.tabs ul,
#paginanavigatie ul.tabs li,
#paginanavigatie ul.tabs a {
margin:0;
padding:0;
display:block;
float:left;
position:relative;
}

#paginanavigatie ul.tabs a {
margin-top:2px;
padding:1px 3px;
}

#paginanavigatie ul.tabs > li > a {
margin-right:4px;
/*Zie media queries voor: max-width:xxxpx; */
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
/* Rand, (achtergrond-)kleur, e.d. via .knop. */
}

#paginanavigatie ul.tabs > li:hover > a {
max-width:5000px;
overflow:unset;
text-overflow:unset;
}

#paginanavigatie ul.tabs ul {
margin-left:-4px;
padding:4px;
display:none;
position:absolute;
left:0;
top:24px;
background-color:white;
box-shadow:0 6px 12px rgba(0, 0, 0, 0.175);
}

#paginanavigatie ul.tabs > li:hover ul {
display:block;
}

#paginanavigatie ul.tabs ul li,
#paginanavigatie ul.tabs ul a {
width:100%;
float:none;
white-space:nowrap;
text-align:left; /* toch de standaard van de knop overstemmen */
}

#paginanavigatie ul.tabs ul a {
margin-top:4px;
}

#paginanavigatie form.bladeren a,
#paginanavigatie form.zoeken > a,
#paginanavigatie p.knoppen a,
#paginanavigatie form.bladeren button,
#paginanavigatie form.zoeken > button,
#paginanavigatie form.zoeken > input[type="text"], /* XXX oud */
#paginanavigatie form.zoeken > input[type="search"] {
margin-top:2px;
padding:1px 3px;
}

#paginanavigatie p.knoppen a,
#paginanavigatie form.bladeren a {
min-width:2.5em;
}

#paginanavigatie form.bladeren .mini {
display:none;
}

/* NOTE: In een picker altijd de pagina-dropdown tonen. Om (iets) makkelijker
   bulk-selecties van meerdere pagina's te kunnen maken.
*/
/* FUTURE: Een picker-class hangen aan de body in betreffende pagina's. Om
   niet maar aan te nemen dat een picker altijd een iframe is. */
body.iframe #paginanavigatie form.bladeren .mini {
display:inline-block;
}

#paginanavigatie form.bladeren .mini select {
margin-right: 2px;
padding-bottom:2px;
padding-top:2px;
}

#paginanavigatie form.zoeken > button {
min-width:1.5em;
padding-bottom:3px;
}

#paginanavigatie form.zoeken > button.primair { /* "ga/doe/zoek"-knop ;) */
border-top-right-radius:0;
border-bottom-right-radius:0;
}

#paginanavigatie form.zoeken > input[type="text"], /* XXX oud */
#paginanavigatie form.zoeken > input[type="search"] { /* zoekterm(en) */
width:70%;
line-height:15px;
border-left:none;
border-right:none;
border-top-color:#1d428a;
border-bottom-color:#6cace4;
text-transform:lowercase;
}

#paginanavigatie form.zoeken > a.knop.secundair { /* herstel-knop */
padding: 1px 3px 4px 3px;
line-height: 15px;
}

#paginanavigatie form.zoeken > input[type="text"] + a.knop.secundair, /* XXX oud */
#paginanavigatie form.zoeken > input[type="search"] + a.knop.secundair { /* herstel-knop achter zoekterm(en)-veld */
border-top-left-radius:0;
border-bottom-left-radius:0;
}

/* XXX oud (maar nog in gebruik) */
#paginanavigatie form.zoeken > input[type="text"] + button.secundair, /* XXX oud */
#paginanavigatie form.zoeken > input[type="search"] + button.secundair { /* herstel-knop */
border-top-left-radius:0;
border-bottom-left-radius:0;
}

#paginanavigatie form.zoeken dl.opties {
background-color:white;
box-shadow:0 6px 12px rgba(0, 0, 0, 0.175);
display:none;
min-width:460px;
overflow:auto;
padding:4px;
position:absolute;
right:0;
text-align:left;
top:12px;
z-index:9000;
}

#paginanavigatie form.zoeken dl.opties.startopen {
display:block;
}

#paginanavigatie form.zoeken dl.opties dt,
#paginanavigatie form.zoeken dl.opties dd {
font-size:15px;
line-height:1.2;
}

#paginanavigatie form.zoeken dl.opties dt.noot {
padding-bottom:6px;
border-bottom:1px solid #f0f0f0;
}

#paginanavigatie form.zoeken dl.opties dt.split {
background-color:#f0f0f0;
}

#paginanavigatie form.zoeken dl.opties dt button {
margin:0 auto;
width:95%;
display:block;
}

#paginanavigatie form.zoeken dl.opties dt.snelkoppelingen a.knop {
margin:0 2px 2px 2px;
}

#paginanavigatie form.zoeken dl.opties dd select {
max-width: 95%;
}

#paginanavigatie form.zoeken dl.opties dd.picker .knop.openpicker {
width:85%;
}

#paginanavigatie form.zoeken dl.opties dd.picker .knop.wispickerkeuze {
width:10%;
}

/* XXX Klein tekstveld voorlopig nog even meenemen. */
#paginanavigatie form.zoeken dl.opties dd.picker input[type="text"],
#paginanavigatie form.zoeken dl.opties dd.picker textarea {
width:90%;
height: 1em;
}

/**** Groot scherm ****/
#paginanavigatie ul.tabs > li > a { max-width:240px; }

/**** Klein(er) scherm ****/
@media only screen and (min-width: 960px) and (max-width: 1199px) {
    #paginanavigatie ul.tabs > li > a { max-width:180px; }
}

/**** Tablet ****/
@media only screen and (min-width: 768px) and (max-width: 959px) {
    #paginanavigatie ul.tabs > li > a { max-width:80px; }
}

/**** Mobiel ****/
@media only screen and (max-width: 767px) {
    #paginanavigatie form.bladeren {
    width:25%;
    }

    #paginanavigatie form.bladeren .maxi {
    display:none;
    }

    #paginanavigatie form.bladeren .mini {
    display:inline-block;
    }

    #paginanavigatie form.zoeken {
    width:70%;
    }

    #paginanavigatie form.zoeken input[type="text"], /* XXX oud */
    #paginanavigatie form.zoeken input[type="search"] {
    width:60%;
    }

    #paginanavigatie form.zoeken dl.opties {
    max-width:85vw;
    min-width:85vw;
    }

    /* FUTURE: Deze oplossing is helemaal niet optimaal voor hele kleine
    schermen, nog eens over nadenken. */
    #paginanavigatie ul.tabs > li > a { max-width:60px; }
}


/**** Scherm hoogte ****/
/**** Full HD > ****/
#paginanavigatie form.zoeken dl.opties { max-height:95vh; }

/**** HD > Full HD ****/
@media only screen and (min-height:720px) and (max-height:1079px) {
    #paginanavigatie form.zoeken dl.opties { max-height:90vh; }
}

/**** HD > SVGA ****/
@media only screen and (min-height:600px) and (max-height:719px) {
    #paginanavigatie form.zoeken dl.opties { max-height:85vh; }
}

/**** VGA > SVGA ****/
@media only screen and (min-height:480px) and (max-height:599px) {
    #paginanavigatie form.zoeken dl.opties { max-height:80vh; }
}

/**** QVGA > VGA ****/
@media only screen and (min-height:240px) and (max-height:479px) {
    #paginanavigatie form.zoeken dl.opties { max-height:75vh; }
}

/**** < QVGA ****/
@media only screen and (max-height:239px) {
    #paginanavigatie form.zoeken dl.opties { max-height:70vh; }
}


/*  */
#inhoud {
min-height:750px;
padding-top:30px;
}

body.iframe #inhoud {
clear:both;
padding-top:0px;
}

/*  */
footer {
padding-bottom:15px;
padding-top:15px;
}

footer p,
footer nav {
color:white;
float:left;
margin:0;
padding:0;
}

footer p {
font-weight:bold;
}

footer nav {
margin-left:15px;
}

footer nav a,
footer nav a:link,
footer nav a:visited,
footer nav a:active {
color:white;
text-decoration:none;
}

footer nav a:hover {
color:#6cace4;
}


/*  */
aside,
aside.primair {
background-color:white;
box-shadow:0px 2px 8px rgba(0, 0, 0, 0.5);
margin-bottom:20px;
padding:15px;
}

aside.secundair {
background-color:#e5e5e5;
box-shadow:none;
}

aside.secundair * {
color:#2d2926;
}


/* **** */
.nieuwsberichten article {
background-color:ghostwhite;
box-shadow:0px 2px 8px #b9b9b9;
margin-bottom:8px;
padding:8px;
}



/* **** */
#foutassistent { /* (kant)lijn/balk */
/* Basis(kleur) komt van .fout */
/* Hoogte gaat via JavaScript, afgestemd op de hoogte/lengte van de pagina. */
border-width:0 0 0 1px; /* alleen aan de linkerkant */
margin:0;
padding:0;
position:absolute;
right:0;
top:0;
width:25px;
z-index:10000;
}

/* Correctie ivm. aangepaste koppen */
body.scrolled #foutassistent                     { top:-34px; }
body.met_paginanavigatie.scrolled #foutassistent { top:-28px; }

/**** Mobiel ****/
@media only screen and (max-width: 767px) {
    body.scrolled #foutassistent                     { top:182px; }
    body.met_paginanavigatie.scrolled #foutassistent { top:188px; }
}

/* Stukje van .fout ongedaan maken */
#foutassistent::before,
#foutassistent *::before {
display:none;
}

#foutassistent .geleider {
/* Basis(kleur) komt van .fout */
border:none;
font-size:22pt;
font-weight:bold;
margin:0 3px;
padding:0;
position:absolute;
right:0;
text-align:center;
}

#foutassistent .geleider:first-child { /* bovenaan */
cursor:s-resize;
top:375px;
}

#foutassistent .geleider:last-child { /* onderaan */
bottom:120px;
cursor:n-resize;
}

/**** Mobiel ****/
@media only screen and (max-width: 767px) {
    #foutassistent .geleider:first-child { top:215px; }
    #foutassistent .geleider:last-child  { bottom:115px; }
}


#foutassistent .wijzer {
/* Basis(kleur) komt van .fout */
/* 'top' gaat via JavaScript, afgestemd op de plek van de fout. */
border-radius:6px 0 0 6px;
border-width:1px 0 1px 1px; /* "open" aan de linkerkant */
font-size:24pt;
font-weight:bold;
margin:1px 0 0 0;
padding:3px 3px 9px 3px;
position:absolute;
right:24px;
}
/*
FUTURE: ??? Correctie voor body.scrolled met een margin-top doen?
*/


/* **** */
a.anker,
a[name^="tab_"] { /* met JS toegevoegd, ankers voor ge-tabbed formulier */
/* ivm. vastgezette kop (simpele padding-top werkte alleen in FF) */
position:relative;
top:-100px;
}

a[target="_blank"]:after,
a[href^="http"]:after,
a[href^="mailto"]:after {
/* NOTE: Geen padding anders onderbreekt de onderstreping; zie spatie in content */
font-family:"FontAwesome";
font-size:90%;
font-style:normal;
}

a[target="_blank"]:after {
content:' \f08e'; /* spatie + external-link  */
}

a[href^="http"]:after {
content:' \f14c'; /* spatie + external-link-square  */
}

a[href^="mailto"]:after {
content:' \f0e0'; /* spatie + envelope  */
}


/* **** */
a#bulkpickerknop {
box-shadow:0 0 4px 4px #ccc;
left:50%;
margin-left:-180px;
position:fixed;
top:30px;
width:360px;
z-index:9999;
}

a#bulkpickerknop,
input[name="bulkpickervinkje"],
input[name="bulkbulkpickervinkje"] {
display:none; /* bij laden gelijk verbergen ipv. met JS */
}


/* **** */
/* oud - gaat vervangen worden door vouwdetails/foldetails */
[data-luiedetailsbron][data-luiedetailsdoel] {
cursor: pointer;
}

[data-luiedetailsbron][data-luiedetailsdoel]::before {
font-family:"FontAwesome";
}

[data-luiedetailsbron][data-luiedetailsdoel][data-isdetailgeladen="0"]::before {
content: '\f141'; /* ellipsis-h */
}

[data-luiedetailsbron][data-luiedetailsdoel][data-isdetailgeladen="1"]::before {
content: '\f142'; /* ellipsis-v */
}

dl.tweekoloms.gevouwen dt.caption[data-luiedetailsbron][data-luiedetailsdoel]::before {
content: '';
}


/* **** */
.lichtlijst .featherlight-content {
display:relative;
min-height:75%;
width:75%;
}

.lichtlijst .featherlight-close {
/* TODO: Valt nu over de scrollbalk, nog eens kijken of deze buiten de lightbox getrokken kan worden. */
display:none;
}

.lichtlijst iframe {
width:100%;
height:100%;
position:absolute;
}


/* **** */
/* Zie ook JavaScript-instellingen voor de knop-definities. */
div.markItUp {
width:auto;
}

.markItUpHeader ul a {
margin-right:3px;
margin-bottom:3px;
}

.markItUpHeader ul .markItUpDropMenu {
background-position:100% 50%;
padding-right:8px;
}

.markItUpHeader ul ul a {
width:150px;
}

.markItUp .a_knop a     { background-image:url(../img/markitup/link.png); }
.markItUp .b_knop a     { background-image:url(../img/markitup/bold.png); }
.markItUp .fn_knop a    { background-image:url(../img/markitup/footnote.png); }
.markItUp .h1_knop a    { background-image:url(../img/markitup/h1.png); }
.markItUp .h2_knop a    { background-image:url(../img/markitup/h2.png); }
.markItUp .h3_knop a    { background-image:url(../img/markitup/h3.png); }
.markItUp .h4_knop a    { background-image:url(../img/markitup/h4.png); }
.markItUp .h5_knop a    { background-image:url(../img/markitup/h5.png); }
.markItUp .h6_knop a    { background-image:url(../img/markitup/h6.png); }
.markItUp .i_knop a     { background-image:url(../img/markitup/italic.png); }
.markItUp .img_knop a   { background-image:url(../img/markitup/picture.png); }
.markItUp .mcr_knop a   { background-image:url(../img/markitup/macro.png); }
.markItUp .ol_knop a    { background-image:url(../img/markitup/list-numeric.png); }
.markItUp .p_knop a     { background-image:url(../img/markitup/paragraph.png); }
.markItUp .pb_knop a    { background-image:url(../img/markitup/pagebreak.png); }
.markItUp .s_knop a     { background-image:url(../img/markitup/stroke.png); }
.markItUp .table_knop a { background-image:url(../img/markitup/table.png); }
.markItUp .ul_knop a    { background-image:url(../img/markitup/list-bullet.png); }
.markItUp .wbr_knop a   { background-image:url(../img/markitup/wordbreak.png); }