@import 'accordion.css';
@import 'toast.css';
/* ************************************************************ */
/* ROOT definitiions */
:root {
  --font-size: 10pt;  
  --breakpoint-large-screen: 1500px;
  --navbar-width: 175px;
  --navbar-input-width: calc(var(--navbar-width) - 15px);
  --navbar-hover-background:#fed;
  --navbar-hover-color:#3289d6;
  --headerbar-lineheight:2.25em;
  --navigation__sub-background: var(--kastanjerood);
  --main-button-background:var(--jb-groen);
  --text-line-height:1.65em;
  --footer__background:var(--perzik);
  --footer-height:4em;
  
  --svg-size: 1.2em;

  --page-background-color: #fbfbfb;
  --form-background-color: #ebebeb;
  --border-thickness:.07em;
  --border-radius:.25em;
  --field-line-thickness:var(--border-thickness);
  --field-border-color-required: #aaa;
  --field-border-color: #999;
  --field-border-color-enabled: var(--jb-groen);
  --field-border-color-disabled: #bbb;
  --field-border-left: var(--field-border-color-enabled);
  
  --table-outside-line-thickness: .7pt;
  --table-outside-line-color:#edc;
  --table-head-line-thickness: .75pt;
  --table-head-colspan-line-thickness: .5pt;
  --table-head-background-color:#fed;
  --table-head-background-green:#dfd;
  --table-head-line-color:#bdb;
  --table-head-text-color:var(--jb-blauw);
  
  --table-body-padding:.5em;
  
  --table-column-gap:1em;
  --table-outside-padding:.7em;
  --table-key-value-label: 16em;
  
  --label-width: 12rem;

  --jb-oranje:#ff5500;
  --jb-blauw-rgb:37,55,118;
  --green-rgb:0,128,0;
  --lichtgeel:#ffe;
  --kadergeel:#eea;
  --bop-groen:#63947d;
  --kastanjerood:#7c2529;
  --perzik:#fed;
  
  --highlight__background-color: var(--lichtblauw);
  --highlight__color: var(--jb-blauw);

}
/* ************************************************************ */
/* GLOBAL elements */
select, input, button {
  font-size:var(--font-size);
  margin-left:initial;
}

*, *::before, *::after {
    box-sizing: border-box;
}

:root, html, body, input, select, button {
  font-size: var(--font-size);
  border-radius:var(--border-radius);
}
/* dummy elements */
body > logos,
body > svg-set,
modal-meta {
  display:none;
}


/* ************************************************************ */
/*  insert page */
small {
  font-size: .85em;
}
.disclaimer {
  margin-top:1em;
}

.stage-label {
  margin-bottom:1em;
}
.stage-text {
/*  font-style:italic;*/
    font-style:normal;
    font-weight:bold;
}
/*  end of insert page */
/* ************************************************************ */

.jb-logo {
    grid-area:header-menu;
    background-color:var(--header__background);
    vertical-align:middle;
    text-align:center;
    margin:auto;
    width:100%;
}
.jb-logo svg {
    fill:white;
    height:var(--headerbar-height);
}
header {
    line-height: var(--headerbar-lineheight);
    height:auto;
}
header .header-page-title, .header-page-label {
  font-style: italic;
  color: var(--main-h1__background);
}
.header-page-label {
  display:none;
}
header .local-machine {
  font-size:.7em;
  position:fixed;
  right:1em;
  color:yellow;
}
body {
    grid-template-areas: 'header-menu header '
                        'menu main '
                        'menu footer';
    grid-template-columns: var(--navbar-width) 1fr;
    height:100vh;
    overflow:hidden;
}
main {
  overflow: auto;
  display:flex;
  flex-direction:column;
}
main > div.main-page {
  padding: .25cm 1cm;
  background-color:var(--page-background-color);
  height: 100%;
  position:relative;
}

main + footer {
/*  display:none;*/
  border-top: .05em solid black;
}
footer fieldset.goto {
  border:none; 
  padding:0;
}
footer fieldset legend {
  font-size:.7em;
  text-transform:uppercase;
  letter-spacing:.15em;
}
footer fieldset select {
  width:auto;
  margin-top:0;
  height:var(--text-line-height);
}
footer fieldset select + input {
  margin-top:0;
  margin-left:1em;
}
footer fieldset input + span {
  margin-left:1em;
  display:inline-block;
}
/* svg buttons */
button.navbutton {
  padding:0;
  background-color: #eee;
  border: solid 1px var(--header__background); 
  position:sticky;
  top:2em;
  margin-left:-2em;
  z-index:99;
}
/* ************************************************************ */
/* items on the page */
h2 {
  font-size:1.25em;
  color:var(--jb-blauw);
  margin: 1em 0;
}
h2 + h2 {
  margin-top:0;
  font-size:1.15em;
}
p {
  max-width: 50em;
  line-height:var(--text-line-height);
}
p + p {
  margin-top:.5em;
}
p > a {
  text-decoration:underline;
}
sup {
    vertical-align: super;
    font-size: smaller;
}
li {
  max-width: 50em;
}
ol {
  margin-left: 2em;
}
ol > li + li {
  margin-top:1em;
}
.stage-label ol > li + li {
  margin-top:.3em;
}
ol ul {
  list-style-type:none;
  margin-left:0;
  margin-top:0;
}
ol ul li::before {
  content:'–';
  padding-right:1em;
}
ol ul > li button {
  height:auto;
  margin-top:.5em;
}
dl {
  margin-bottom:2em;
}
dl dt {
  font-weight:bold;
  margin-top:1em;
}
dt + dd {
  margin-left:1em;
}

.report-message {
  margin-top:2em;
  font-size:1.1em;
}

li form {
    background-color:inherit;
/*    display:inline;*/
    border:none;
    margin:0;
    padding:0;
}
li button {
    display:inline;
    background-color:var(--lichtblauw);
    color:var(--jb-blauw);
    margin:0;
}
td > form {
  padding:0 1em;
}
button.copy-button {
    margin:0;
}
td button.copy-button {
  color:black;
  text-transform:initial;
  letter-spacing:0;
  background-color:#fed;
}
.rowcount button.copy-button {
  font-size: 2.2em;
  background-color:inherit;  
}
td button.select {
  position:absolute;
  top:0;
}
td.doi {
  white-space:nowrap;
}
td.insert.new-record {
  text-align:right;
  vertical-align:bottom;
}
button.insert.new-record {
  margin-right:0;
}
button.insert,
button.action {
  background-color: #0099ff;
  border:1px solid #0099ff;
}
footer button {
  background-color:var(--main-button-background);
  font-size:.75em;
  border:var(--border-thickness) solid var(--main-button-background);
  border-radius:var(--border-radius);
  color:white;
  height:2em;
  margin-right:1em;
}
button.svg {
  background-color:var(--lichtgeel);
  border-color:var(--kadergeel);
  position:relative;
  top:.7em;
  margin:0;
}
button.svg.delete {
  float:right;
  border-color:red;
  margin-left:1em;
}
div.delete-container button.svg.delete {
  float:none;
  margin-bottom:1em;
  height:4em;
}
div.delete-container button.svg.delete svg {
  width: calc( var(--svg-size) * 2);
  height: calc( var(--svg-size) * 2);
}
button.svg:hover {
  background-color:white;
  border-color:red;
}
button[disabled], button[disabled]:hover  {
  background-color:#ccc;
  border-color: #aaa;
  font-weight:normal;
}
button svg {
  width: var(--svg-size);
  height: var(--svg-size);
}
button.svg:hover svg {
  fill: red;
}
button.svg[disabled] svg, button.svg[disabled]:hover svg {
  fill:#aaa;
}
button.view-details {
  margin-left:.5em;
  margin-top:inherit;
  height:inherit;
}
.view-details.icon .description {
  display:none;
}
.view-details .description {
  padding-right:.5em;
}
.g-recaptcha {
  margin-bottom: 1em;
}

td.disabled {
  color: #aaa;
}
td.status a {
  font-weight: bold;
  font-style: italic;
}
td.center {
  text-align:center;
}
td + td[data-group] {
  display:block;
}
.key-value > .center {
  text-align:left;
}
/*img {
  width:10em;
}
*/

table {
/*    font-size:.875em;*/
    line-height:1.5em;
    margin-top:1em;
    caption-side:bottom;
}
table caption {
  text-align:left;
}
table.map .value details.pre {
  white-space:pre-wrap;
}
table.report {
  overflow-x:auto;
  overflow-y:hidden;
}
.report table.level-1 {
  border-left: solid .5em #def;
  border-radius:var(--border-radius);
}
.nested-report th.level-1 {
  font-size: 1.1rem;
}
/*.nested-report td.level-1 {
  font-size: 1rem;
}
*/.nested-report caption details {
  display:none;
}
.report table.level-2 {
  width: 100%;
  border-left: solid .5em var(--table-outside-line-color);
  border-radius:var(--border-radius);
  margin-bottom:1em;
  margin-left:2em;
}
.nested-report table {
  margin-bottom:2em;
}
.report table.level-3  {
  border-left: solid .5em var(--table-head-line-color);
  border-radius:var(--border-radius);
  margin-bottom:1em;
  margin-left:2em;
}
.report .nested-report td {
  border:none;
  background-color:white;
}
.nested-report td.container {
  margin-bottom:1em;
  font-size:1rem;
  padding:0;
  background-color:#f6f6f6;
}
.container .nested-report {
/*    border-collapse:separate;*/
/*  border: solid 1.5pt var(--lichtblauw);*/
}
.container .level-1 > thead, .container .level-1 > thead th, .container .level-1 > tfoot, .container .level-1 > tfoot td {
  background-color:var(--lichtblauw);
  z-index:2;
  border-radius:.25em;
}
.level-1 > tfoot td {
  position:sticky;
  bottom:0;
}
/* ************************************************************ */
/* CHARTS */
.chart-container {
  margin: 1em 0;
}
.chart-title {
  font-size: 1.1em;
  padding-top:.5em;
  display:block;
}
.chart-container svg {
  width:100%;
  height:100%;
}

/*  label classes for address label formatting */
.label-value div {
  white-space:pre-wrap;
}
thead, tfoot  {
    border:solid var(--table-outside-line-thickness) var(--table-outside-line-color);
    background-color:var(--table-head-background-color);
}

thead th {
  background-color:var(--table-head-background-color);
  color:var(--table-head-text-color);
  font-size:1rem;
  padding: var(--table-body-padding) var(--table-column-gap) var(--table-body-padding) 0;
  position:sticky;
  top:0;
}
.level-2 thead th {
  top:2.5em;
}

.level-3 thead {
  border:solid var(--table-outside-line-thickness) var(--table-head-line-color);
}
.level-3 thead th {
  background-color:var(--table-head-background-green);
}
thead th:first-of-type {
  padding-left:var(--table-body-padding);
}
tbody tr:first-of-type td {
    padding-top:var(--table-body-padding);
}
tbody tr:last-of-type td {
    padding-bottom:var(--table-body-padding);
}
.report tr:first-of-type th:first-of-type,tr td:first-of-type {
    padding-left:var(--table-outside-padding);
/*      border-left:solid var(--table-head-line-thickness) var(--jb-blauw);*/
}
tr:last-of-type th:last-of-type,tr td:last-of-type {
    padding-right:var(--table-outside-padding);
}
tr {
    position:relative;
}
tbody {
      border-bottom:solid var(--table-head-line-thickness) var(--jb-blauw);
      transition: all .3s ease;
}
.report tbody:first-of-type {
      border-top:solid var(--table-head-line-thickness) var(--jb-blauw);
  
}
/*  section for new records */
tbody.new-record {
  color:var(--jb-blauw);
  background-color:var(--lichtblauw);
}
.new-record input, .new-record select {
  font-size:1em;
  font-family:inherit;
  width:100%;
}
.new-record input, .new-record select {
  border: solid var(--field-line-thickness) #ddd;
  border-left: solid 3px var(--jb-blauw);
  border-radius: var(--border-radius);
  padding-left: .5em;
  line-height: 2em;
}
.new-record tr {
  visibility:hidden;
}
.new-record tr.call-to-action {
  visibility:visible;
  height:auto;
  display: table-row;
}
input.form-toggle:checked + div > table > .new-record tr {
  visibility:visible;
  height:auto;
/*  display: table-row;*/
}
.new-record tr.new-data {
  background-color:white;
}
.new-data td {
  padding-top:1em;
  padding-bottom:1em;
}

.new-record label.call-to-action:after {
  content: " ⯆";
  }
/*  new record: new styling attempt (2020-01-28) */
tbody.new-record {
  border-bottom:none;
  background-color:inherit;
}

tbody.new-record .call-to-action td {
  padding-top:1em;
  line-height:1.5em;
}

tbody.new-record .call-to-action label {
  background-color: var(--jb-groen);
  color:white;
  text-transform:uppercase;
  font-weight:bold;
  font-size:.8em;
  letter-spacing:.15em;
  padding:.1em .5em .1em .75em;
  border-radius:.25em;
}
  
  
input.form-toggle:checked + div > table >.new-record tr.call-to-action {
  display:none;
  }
input.form-toggle:checked + div > table >.new-record tr.new-data {
  background-color:#fed;
}
/*  table toggle for child reports */
input.table-toggle:not(:checked) + div.container   {
  max-height:0;
  transition: max-height 1s cubic-bezier(0, 1.05, 0, 1);
  overflow:hidden;
}

input.table-toggle:checked + div.container {
  max-height:50vh;
  transition: max-height 1s cubic-bezier(0, 1.05, 0, 1);
  overflow:auto;
}
input.table-toggle:checked + div.container > table th  {
  position:sticky;
}
input.table-toggle[type=checkbox]:checked + label::before {
  content:"▼ ";
  font-style:normal;
}
input.table-toggle[type=checkbox]:not(:checked) + label::before {
  content:"▶ ";
  font-style:normal;
}
label.table-toggle {
  color: var(--jb-blauw);
  font-weight:bold;
  font-size:1.1em;
  margin-right:.5em;
  margin-bottom:-.25em;
  margin-top: -1.5pt;
  border: var(--table-outside-line-thickness) solid transparent;
/*  border-radius:.25em;*/
  display:inline;
  padding:.25em .65em .5em .65em;
  float:left;
}
input.table-toggle:checked + label, input.table-toggle:checked + label:hover {
  color:var(--jb-blauw);
  background-color:var(--table-head-background-color);
  border-color: var(--table-outside-line-color);
}
.tab-label {
  display:inline;
}
.tabset {
  margin-top:2em;
  min-height:30vh;
  border-top:5pt solid var(--table-outside-line-color);
}
.tabset .container table,
.tabset .container .chart-container {
  display:none;
/*  border-top: 1px solid var(--jb-blauw);*/
/*  background-color:white;*/
  clear:both;
  margin-left:0;
}
label.table-toggle.empty {
  color:#888;
}
label.table-toggle.empty:hover {
  color:var(--jb-blauw);
}
td label.field-label {
  display:block;
  font-size:.7em;
  text-transform: uppercase;
  letter-spacing:.125em;
}

div.select tbody.selectable:hover
, tr.tab div.report > table > tbody.selectable:hover
, div.tabset tbody.selectable:hover
{
  background-color: yellow;
  cursor:pointer;
}
tbody.selectable[onclick]:hover {
  background-color: #aaf0d1 !important;
}
div.select tbody.selectable:hover tr.tab {
  background-color:white;
}
tbody.selected {
  background-color: lime;
}
/*  aggregate */
td.aggregate label.radio {
  padding: 1em .5em;
}
tr.multi {
  display:block;
}
thead tr.multi th {
  display:inline-block;
  width:auto ! important;
}
tr.key-value > td {
  display: table-row;
}
tr.key-value > td label{
  display: table-cell;
  width: var(--table-key-value-label);
  padding-right: var(--table-column-gap);
  padding-left:var(--table-outside-padding);
}
tr.key-value > td div {
/*  display: table-cell;*/
}
tr.key-value > td label {
  min-width:20em;
}
summary:focus {
  outline:none;
}

tr + tr {
  padding:.5em 0;
  border-top:.15em dashed var(--lichtblauw);
  border-collapse: initial;
}

th,td {
    line-height:1.75em;
    font-weight:normal;  
    padding-right:var(--table-column-gap);
    text-align:left;
}
tfoot td {
    font-weight:bold;
}
/*  keep elements in wrapper on one line */
td > div {
  display: inline-flex;
}
/*  override the above for area fields */
td[data-type=html-area] > div,
td[data-type=text-area] > div {
  display:block;
}
tr.rowcount > td > div {
  display:flex;
  justify-content: left;
  align-items: center;
  font-size:.9em;
}
.rowcount .set-limit select
, .set-order select {
  height: 2.2em;
}
/*.set-limit {
  margin-left:1em;
}
*/th {
  position:relative; 
    vertical-align:bottom;
  /* this is to ensure that the absolute positioning of the sorting arrow in the :after section 
   * will follow when scrolling. */
}
th.active-column {
    padding-right:1em;
    text-align: inherit;
}
th.money-value {
    text-align:right;
}
th.active-column .integer-value, th.active-column .money-value {
    text-align: right;
}
th.active-column:after {
    color:purple;
    width:var(--table-column-gap);
    position: absolute;
    bottom:-.5em;
    right:45%;
    transform:scaleX(3);
}
th.active-column.sort-desc:after
, th.active-column.sort-DESC:after{
    content:"⯆";
}
th.active-column.sort-asc:after
, th.active-column.sort-ASC:after{
    content:"⯅";
}
th.last-in-group .active-column, td.last-in-group .active-column {
    color:magenta;
}
th[colspan] {
    font-style:italic;
    border-bottom:solid .15em var(--jb-blauw);
    text-align:center;
    padding-right:0;
}
th.dummy {
  border-bottom:none;
}

th.last-in-group, td.last-in-group {
    padding-right:0;
    margin-right:0;
}
th[rowspan] {
  z-index:1;
  top: -3em; /* fix for scrolling */
}
th[rowspan='1'] {
  top:0;
}

.spacing {
  min-width:1.5em;
}
a:link,a:visited {
    color:var(--jb-blauw);
}
.hidden,  .hidden a {
    color:transparent;
}
.hidden-group-label {
  visibility:hidden;
}
.filtered[true] .hidden-group-label {
  visibility:visible;
}
input.hidden {
  display:none;
}
td.pop-up {
  cursor: pointer;
}
div.pop-up-container {
  display:none;
  position:absolute;
  left:5vw;
  max-width:90vw;
}
.pop-up:hover + div.pop-up-container, .pop-up:focus + div.pop-up-container {
  display:block;
  background-color:#def;
  padding:.5em .75em;
  border: solid 1px magenta;
  border-radius:.25em;
  z-index:2;
}
select:focus, input:focus {
    box-shadow:  var(--field-line-thickness) 0 .5em rgba(0, 128, 0, .5);
    outline-color: transparent;
    outline-width: 2px;
    outline-style: dotted;
}
/* validation */
/*input[required]:not(focus) {
  border: 1px solid var(--jb-groen);
}
*/
input:invalid, select:invalid, input[data-value='empty'], .xforms-invalid .xforms-value {
  border-color: red !important;
}
button:focus, button:hover {
  transition: all .1s;
  background-color:green;
  color:white;
  box-shadow: 0 0 .25em rgba(var(--green-rgb), .8);
  border-color:green;
}
*:invalid ~ button {
  background-color:red;
}

div.add-button {
  text-align:right;
  font-style:italic;
  font-weight:bold;
  margin-bottom:.5em;
}
.add-button a {
    border: 1px solid var(--jb-groen);
    border-radius: .25em;
    padding:.15em .5em;
}

*[contenteditable],
select[onchange], fieldset.report select, fieldset.report input,
input[onchange], input[oninput], input[onkeyup], input[form], 
input[data-mode='form'], select[data-mode='form'],
input[data-mode='edit'], select[data-mode='edit'],
div[data-mode='insert'] > input, div[data-mode='insert'] > select
{
  padding:.2em .75em .2em .5em;
  border:var(--field-line-thickness) solid var(--field-border-color);
  border-left:3px solid var(--field-border-color-enabled);
  border-radius:var(--border-radius);
  border-top-left-radius: calc( var(--border-radius) * .5);
  border-bottom-left-radius: calc( var(--border-radius) * .5);
}

telect[onchange], fieldset.report select, 
select[data-mode='form'], fieldset.report input[data-target],
fieldset.report input.date-value {
padding-right:0;
}

input[required], fieldset.report select[required], .xforms-required .xforms-value {
    background-color:var(--lichtgeel);
  border:var(--field-line-thickness) solid var(--field-border-color-required);
  border-left:3px solid var(--jb-groen);
}
select[onchange], fieldset select {
  padding-left:.2em;
  min-width:var(--field-width);
}
fieldset.report input:read-only, 
fieldset.report select:disabled, 
fieldset *:disabled, 
fieldset *[readonly], 
fieldset.report textarea[readonly]
{
  background-color:#eee;
  border:0;
  border-left:3px solid var(--field-border-color-disabled);
  color:black;
  padding-left:.5em;
  
}
textarea[contenteditable]:hover, textarea.xforms-value:hover, 
div[contenteditable]:hover, 
select[onchange]:hover, 
fieldset.report select[onchange]:hover, 
input[onchange]:hover, 
input[oninput]:hover, 
input[onkeyup]:hover, 
input:not([readonly]):not([disabled]):not([type=radio]):hover {
  transition: all .1s;
  border-color:green;
  box-shadow: var(--field-line-thickness) 0 .5em rgba(0, 128, 0, .5);
}
label.text-area, label.html-area {
  vertical-align:top;
}
fieldset.report.column > div.html-area, 
fieldset.report.column > div.text-area,
fieldset.report.column > textarea,
.data-row .text-area textarea,
fieldset.report div.text-area textarea
{
  min-width:40em;
  min-height:15em;
  font-size:1em;
  line-height:var(--text-line-height);
}
div[contenteditable=true]:first-of-type {  
  padding-left:.5em;
}
div[contenteditable=true] {
  word-break:break-word;
}
div[contenteditable=true]:after {
  content:"|";
  visibility:hidden;
  
}
.goto input {
  width: var(--navbar-input-width);
}
.code-value {
    font-weight:bold;
}
.boolean-value {
  text-align: center;
}
.key-value .boolean-value {
  min-width:4.5em;
  text-align:left;
}
.data-row .single-char-value, .data-row .year-value {
    text-align:center;
}
fieldset input.year-value, fieldset input.integer-value {
  width:3.5em;
  text-align:right;
  padding-right:.5em;
}
fieldset input.date-value {
  width:11em;
}
.data-row .integer-value
, .data-row .money-value
, thead .integer-value
, thead .money-value
, *[data-type=count] {
    text-align:right;
}
td.money-value::before {
    content: "€ ";
}
td.money-value.empty-value::before {
    content: "";
}
td.percentage-value::after {
    content: " %";
}
td.percentage-value.empty-value::after {
  content: '';
}
td.percentage-value {
  text-align:right;
}
th.percentage-value {
  text-align:center;
}
.date-value {
  white-space:nowrap;
}
.bad-value {
  color: orange;
  font-weight:bold;
}
.very-bad-value, .deadline {
  color: red;
  font-weight:bold;
}
.super-bad-value {
  color: red;
  background-color:yellow;
  font-weight:bold;
}
.purple {
  color:purple;
  font-weight:bold;
}
.bold {
  font-weight:bold;
}
/*fieldset.select input.code-value {
  width:6em;
}
*/nav {
/*    padding-top : calc(var(--navbar-width)/5);*/
    padding-left : 0em;
    padding-right : 0em;
    line-height: 2.5em;
}

nav ul {
    margin: 1em 0 0 0 ;
    font-weight: bold;
    padding-left:0;
}
nav li {
  position:relative;
  border-bottom: solid 1px #777777;
}
nav li.section {
  padding: .25em 1em;
  font-style:italic;
  
}
nav ul ul {
  display:none;
  position:absolute;
  left: 100%;
  top: 0;
  text-indent: 1em;
  background-color: var(--navigation__sub-background,#ddd);
  color: #000;
  min-width: 17em;
  margin:0;
}
nav ul li:hover > ul, 
nav ul li:active > ul, 
nav ul li:focus > ul, 
nav a:active + ul, 
nav a:hover + ul, 
nav a:focus + ul {
  display:inline-table;
  animation-name: comein;
  animation-duration: .5s;
  z-index:3;
}
nav li {
  line-height:normal;
}
nav ul li a {
  display: block;
  position: relative;
  text-decoration: none;
  padding: .5em 1em;
}

nav a.fullmenu {
  font-style:italic;
}

nav a[aria-haspopup=true]:after,
nav a.fullmenu::after {
  content: "\f105";
  padding-left: .7em;
  font-family: "Font Awesome 5 Free";
  font-size:1.2em;
  line-height:normal;
}

nav ul ul a:link, nav ul ul a:visited  {
  color: white;
}

.main-page > li > a {
  text-decoration:none;
}
.main-page > li > a:hover {
text-decoration:underline;
}
/* notifications */
li#status-updates {
  padding: .25em 1em;
  word-break:break-word;
  font-size:.95em;
  font-style:italic;
  line-height:1.5em;
  border-bottom:none;
}

div.success-false,
span.success-false{
  color:red;
}
div.success-true,
span.success-true {
  color:green;
}
span.success-true,
span.success-false
{
  font-weight:bold;
}
span.success-false {
  background-color:yellow;
}
#status-updates details {
  font-size:.75em;
  line-height:1.25em;
  margin-bottom:.5em;
}

nav a[href]:hover, nav a[href]:focus {
    background-color: var(--navbar-hover-background);
    color:var(--navbar-hover-color);
}
a[href]:hover, a[href]:focus {
    color: #3289d6;
    text-decoration: none;
}
nav ul form[action='login'] {
  padding:0 1em;
  font-style:italic;
}
nav li[selected] {
  background-color: var(--jb-oranje);
}
nav li[selected][class=section] {
  background-color: inherit;
}
nav li[selected] a[href] {
  color: white;
}
nav li[selected] a[href]:hover {
  color: var(--jb-blauw);
}

.full-name {
    white-space : nowrap;
}

details.debug {
  margin-top:1em;
}
input#deadline[value] {
  color: red;
}
span.review-of {
  font-style:italic;
}
@media screen and (min-width: 1500px ) {
  *:root {
    --font-size: 11pt;
  }
    body {
      grid-template-areas: 'header-menu header'
                           'menu main'
                           'menu footer';
      grid-template-columns: var(--navbar-width) 1fr;
      --navbar-width: 200px;
    }
}
@media print {
  :root {
    font-size:10pt;
  }
  nav
  , header
  , footer
  , #modal-container
  , #modal-toggle
  , details.accordion
  {
      display:none;
  }
  html,body {
  margin: 0;
  }
  body {
      display:block;
      
  }
  td {
    padding-bottom:0 !important;
    font-size:.8em;
  }
  table {
    width:100%;
  }
  td div {
    max-width:40em;
  }
  input#deadline:not([value]) {
    color:white;
  }
}

.match-false {
  color: red;
  font-weight:bold;
}
.ignore-value {
  font-style:italic;
  color:#333;
}
main button:visited {
  user-select: none;
  background-color: gray;
}

/*  SortableJS section */
.blue-background-class {
  background-color:#fed;
}


/* BREAKPOINTS */

/* max width 1250px */
@media screen and (max-width: 1250px) 
{
  div.field-container {
    columns:1 !important;
  }
}
@media screen and (max-width:1000px) {
  div.field-container.three-columns-grid {
    display:block;
  }
  div.field-container label {
    display: block;
  }
  .details.form fieldset {
    max-width:90vw !important;
  }
  .form .level-1.key-value input[class], .form .level-1.key-value textarea[class], .form .level-1.key-value div[class] {
    max-width:70vw !important;
  }
  .form .level-1.data-row input[class], .form .level-1.data-row textarea[class], .form .level-1.data-row div[class] {
    max-width:80vw !important;
  }
}

/*  max width 800px */
@media screen and (max-width:800px) {
      body {
        grid-template-areas: 'header'
              'main'
              'footer';
        grid-template-columns:1fr;
  }
	.hamburger {
		display:inline-block;
		float:left;
		padding-left:.7em;
		padding-top:.35em;
}
	.hamburger svg {
		width:36px;
		height:36px;
	}
	.jb-logo {
	  display:none;
	}
	.header-page-label {
	  display:inline;
	}
	.header-page-title {
	  display:none;
	}
	.details.form fieldset[class*='key-value'] > div:not([hidden]) {
    display: block;
  }
}