:root {
    --nss-cremegrijs: #D1D3C3; /* rgb(209,211,195) */ /* PANTONE DS 301-8 C */
    --nss-rood: #B40941; /* rgb(180,9,65) */ /* PANTONE DS 108-1 C */
    --nss-grijs: #E3E3E2; /* rgb(227,227,226) */ /* PANTONE DS 325-8 C */
    --nss-blauw: #476EB2; /* rgb(71,110,178) */ /* PANTONE 660 EC */
    --nss-donkerblauw: #283357; /* rgb(40,51,87) */ /* PANTONE DS 202-1 C */
    --nss-lichtblauw: #71A0CC; /* rgb(113,160,204) */ /* PANTONE DS 221-5 C +5K+5Y */
    --groen: #42827A;
}
/* ELEMENT-TO-COLOR MAPPING */
body
{
    margin: 0;
    background-color: var(--nss-cremegrijs);
    color: var(--nss-donkerblauw);
    grid-template-areas: 
      'header-left header'
      'menu main'
      'menu footer';
    grid-template-columns: var(--navbar-width) 1fr;
    grid-template-rows: var(--headerbar-height) 1fr auto;
}
#bbr-product {
  padding-left:1.2cm;
}
#bbr-product .long-title {
  display:none;
}
h1.title, .main, .page {
  padding:.75em 1.5cm;
}
.page {
  padding-top:3em;
}
details {
  margin: 1em 0;
}
details details {
  margin-left:1.5em;
  font-size:1em;
}
svg#jb-logo {
  width: calc( var(--navbar-width) * 0.9 );
}
input,
textarea,
select,
button {
    font-family: "Noto sans", sans-serif;
}

.picture {
    color: var(--nss-rood);
    height:100%;
    width:100%;
    overflow:auto;
}
.groups {
  height:calc( 100% - 100px);
  width:100%;
}
/*'1x1', '1x2', '2x1', '2x2', '3x1', '3x2', '4x1', '4x2'*/
.row {
  display:flex;
  flex-direction:row;
}
.groups .row.h50 {
  height:50%;
}
.groups .row.h33 {
  height:33%;
}
.groups .row.h25 {
  height:25%;
}
.row .group {
  display:inline-block;
}
.row .group.w50 {
  width:50%;
}
.row .group.w33 {
  width:33%;
}
.row .group.w25 {
  width:25%;
}
.group .selection {
  position:absolute;
}
/*.groups.grid-1x1 {
  display:grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}
.groups.grid-2x1 {
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
}
.groups.grid-3x1 {
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
}
.groups.grid-4x1 {
  display:grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr;
}
.groups.grid-4x2 {
  display:grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.groups.grid-3x2 {
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.groups.grid-1x2 {
  display:grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
}
.groups.grid-2x2 {
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}*/

a {
    color:inherit;
    text-decoration:none;
}
  table{
    table-layout:fixed;
    width:100%;
    background-color: #fff;
    border: solid 1px var(--nss-donkerblauw);
  }
td {
    border: none;
}
.fixed td {
    overflow: hidden;
}

  input, textarea, select, button {
    font-family: "Noto sans", sans-serif;
  }

  .fix{
    width:25px;
  }
  
  #bbr-product > a > strong {
    font-size: 1.2vw;
}
@media screen and (max-width:1250px) {
  #bbr-product {
    font-size: 2.5vw;    
  }
}
@media screen and (min-width:1700px) {
  #bbr-product .long-title {
    display:inline;
  }
}
@media screen and (max-width:900px) {
  body {
    grid-template-areas: 
      'header'
      'menu'
      'main'
      'footer';
    grid-template-rows: var(--headerbar-height) auto 1fr auto;
    grid-template-columns: 1fr;
  }
}