/*
    lichtblauw: b6c7e8
    middenblauw: 7ea3d6
    groenblauw: 3f6e9a
    felblauw: 3e94d3
    donkerblauw: 244a90
    fuchsia: 870056
    donkergrijs: 91969a
    geel: f5d65e
    olijf/okergeel: b7ac07
    licht-groenblauw: a8bbcb
    lichtgroen: abb691
    groen: 94a36b
    
    
    Z 195
    helderblauw: 4183c4
    oranje: ce5c43
    tekstoranje: d57a23
    geel: f5d30f
    grijs: 4b4b4a
    donkergrijs: 31383d
    olijfgrijs: 757051
    
    
*/
:root {
  --licht-groenblauw: #a8bbcb;
  --lichtblauw : #b6c7e8;
  --middenblauw : #7ea3d6;
  --groenblauw : #3f6e9a;
  --felblauw : #3e94d3;
  --donkerblauw : #244a90;
  --fuchsia : #870056;
  --donkergrijs : #91969a;
  --geel : #f5d65e;
  --olijf-okergeel : #b7ac07;
  --lichtgroen : #abb691;
  --groen : #94a36b;
  
  --header__sidebar:var(--licht-groenblauw);
}

.svg-nav-toggle {
    fill: var(--fuchsia); 
}

video {
    object-fit: cover;
/*    max-width:480px;*/
    max-width:300px;
    min-height:240px;
    width:100%;
}

@media screen and (orientation:portrait) and (max-width: 600px) {
    video {
        max-width:100%;
    }
}
body {
    background-color: #91969a;
}

#bbr-product {
    color:#244a90;
    text-align:left;
    text-transform:initial;
    letter-spacing:initial;
    font-size:2em;
}

#bbr-product strong {
    color: var(--fuchsia);
}
#bbr-product em {
    color:#244a90;
}
#header-content {
    background-color: #b6c7e8;
}
#article-footer {
    background-color: #244a90;
}
#article-footer a {
    color: #f5d65e;
}
a {
    color: #244a90;
    font-weight:bold;
}
.answer {
  display:inherit;
}
.main.video {
    display:flex;
    flex-direction:column;
    height:calc(85vh - 2.7em);
    padding-bottom:.5em;
}
.page {
    margin-bottom:1cm;
}

.media-chapter-list {
    line-height:2.5em;
    list-style-type: none;
    margin-top:1em;
    overflow-y: auto;
    flex: 0 1 auto;
    font-size:.9em;
    line-height:1.7em;
}
.media-title {
    font-weight:bold;
}
.chapter {
    margin-bottom:1em;
}
h1 .chapter-label {
    color:#333;
}

li[selected] {
    color:var(--fuchsia);
    font-weight:bold;
}
li[selected]::before {
    content:"► ";
}
figcaption {
    font-size:1.2em;
}
figcaption a {
    font-weight:inherit;
}
.media-container {
    padding-bottom:1em;
}
.thumbholder {
    vertical-align:top;
}
header {
    background-color: #a8bbcb;
}
code {
    color: #4183c4;
    font-family:Courier;
}

h1.title {
    border-top:solid .25em #3e94d3;
    background-color: #abb691;
    color:#333;
}
h2 {
    color: var(--fuchsia);
}

details li a {
    padding:.1em .4em;
}
details li a:hover {
    border:none;
    background-color:var(--fuchsia);
    color:#f5d30f;
}
.letters a {
    color: var(--fuchsia);
    border-color: #f5d30f;
}
h1 .article-type {
    color: #757051;
}
.affiliation {
    color:#31383d;
}
.pipe {
    color: #b7ac07;
}
nav, nav ul {
    background-color: #3f6e9a;
}
@media screen and (max-width: 450px),(min-width: 900px),(max-height:600px) {
    nav ul li {
        border-bottom: solid 1px #ce5c43;
    }
}
nav ul ul li {
    border-bottom: solid 1px #31383d;
}
nav ul ul li:hover {
    background-color: #757051;
}
nav li a, nav li a:link, nav li a:visited, nav li a:hover {
    color: #f5d65e;
}
nav ul li:visited, nav ul li:hover {
    background-color: var(--fuchsia);
}

nav ul ul {
    background-color: var(--fuchsia);
}
nav ul ul li a, nav ul ul li a:link, nav ul ul li a:visited, nav ul li:hover a {
    color:#f5d30f;
}
li p + p {
    text-indent:0em;
}
#submenu svg, #subburger svg, #back-to-top svg {
    border: solid 1px #ce5c43;
    border-radius: .25em;
    background-color: #4183c4;
    height: 35px;
    width: 35px;
}
#subburger svg path, #back-to-top svg line, #back-to-top svg path {
    stroke:#fff;
    fill:#fff;
}
.metadata-area {
    padding: 0 8.5%;
}
#search:hover #search-svg, #search a:hover {
    fill: #fff;
    border-bottom: none;
}
#jb-logo {
    fill: #fff;
}
details {
    margin:0 2.5em 1em 0;
}
details li {
    font-weight:bold;
    list-style-type: none;
}
details li a:hover {
    margin-left:-.4em;
}
ul.toc {
    margin-bottom:1em;
}
/*
div.navbutton {
    bottom:2em;
    left:7.5vw;
}
*/
.navbutton svg {
    border:solid .1em var(--fuchsia);
    border-radius:.25em;
    background-color: #b6c7e8;
}
.navbutton svg path {
    fill:#244a90;
}
 #next-chapter path {
    fill: var(--fuchsia);
 }
.navbutton svg:hover {
    background-color:#abb691;
}
.navbutton.disabled svg, .navbutton.disabled svg:hover {
    background-color: #4b4b4a;
}
.caption-label {
    color: #244a90;
}
.showkey {
    color:var(--fuchsia);
    font-weight:bold;
}
input:checked + label .correct {
    background-color: #229922;
    border: 1.5px solid #229922;
    color:white;
}
input:checked + label .incorrect {
    background-color: #992222;
    border: 1.5px solid #992222;
    color:black;
}
input[type='checkbox'] {
    display:none;
}

ul.toc {
    padding-left:0;
    display:inline-block;
    text-indent:0;
    list-style-type:none;
    line-height:2em;
}
p {
    text-align:left;
}
table {
    border-top:solid 2px #d57a23;
    border-bottom:solid 2px #d57a23;
    border:none;
    background-color:inherit;
}
th {
    border-bottom:solid 1px #d57a23;
    border:none;
    background-color: #4183c4;
    color:#fff;
    padding-left:0;
    text-align:inherit;
}
/*td:first-child, th:first-child {*/
/*    padding-left:.5em;*/
/*}*/
td:last-child, th:last-child {
    padding-right:.5em;
}
td {
    padding-top:.5em;
    border-bottom: 1px solid #4183c4;
    padding-bottom:.25em;
    text-align:inherit;
}
.array td {
    border-bottom:none;
    line-height:1.25em;
}
.array td:first-child {
    white-space:nowrap;
}
.array {
    overflow-x:auto;
}

@media screen and (orientation:landscape) and (max-width: 1000px) {
    .main.video {
        flex-direction: row;
    }
    div.navbutton {
        left:7.5vw;
    }
}

@media screen and (min-width: 900px) and (max-width: 1100px) {
  #bbr-product {
     font-size:2.7vw;
  }
}

@media screen and (max-width: 900px) {
    .navigation, nav ul {
        background-color: #ddd;
    }
    nav li a, nav li a:link, nav li a:visited, nav li a:hover {
        color: #31383d;
    }
    nav li a, nav li a:link, nav li a:visited, nav li a:hover {
        color: #31383d;
    }
    div.navbutton {
        bottom:2em;
        right:7.5vw;
    }
  #bbr-product {
     font-size:3.5vw;
  }
}

@media screen and (max-width: 700px) {
    #bbr-product {
        font-size:3vw;
    }
}
@media screen and (max-width: 450px) {
    nav ul li {
        border-bottom: solid 1px #ce5c43;
    }
    .coverlogo {
        width:113px;
        height:150px;
    }
}