/*
    blauw: 4d6590
    helderblauw: 4183c4
    oranje: ce5c43
    tekstoranje: d57a23
    geel: f5d30f
    grijs: 4b4b4a
    donkergrijs: 31383d
    olijfgrijs: 757051
*/
:root {
  --oranje: #ce5c43;
  --header__background: var(--oranje);
  --header__sidebar: var(--oranje);
  --footer__background:var(--jb-blauw);
}

#bbr-product, #bbr-acronym {
    color:#fff;
    text-align:left;
    text-transform:initial;
    letter-spacing:initial;
    font-size:2em;
}
#bbr-acronym {
    color: #f5d30f;
    font-size:5vw;
}
#bbr-product strong {
    color: #f5d30f;
}
#bbr-product em, #header-authors {
    color:#fff;
    padding:0;
}
#header-content {
    background-color: #4d6590;
    display:flex;
}
#bbr-topbar {
  height:auto;
  font-size:1.1em;
}
code {
    color: #4183c4;
}

h1.title {
    border-top:solid .25em #d57a23;
    background-color: #4183c4;
    color:#fff;
}
h1.author {
    background-color: #757051;
    color:white;
}
h3 {
    color: #4d6590;
}
a {
    color: #4d6590;
}

details li a {
    padding:.1em .4em;
}
details li a:hover {
    border:none;
    background-color:#757051;
    color:#f5d30f;
}
.letters a {
    color: #4d6590;
    border-color: #f5d30f;
}
h1 .article-type {
    color: #757051;
}
.affiliation {
    color:#31383d;
}
nav, nav ul {
    background-color: #4b4b4a;
}
@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: #f5d30f;
}
nav ul li:visited, nav ul li:hover {
    background-color: #757051;
}

nav ul ul {
    background-color: #4d6590;
}
nav ul ul li a, nav ul ul li a:link, nav ul ul li a:visited, nav ul li:hover a {
    color:#f5d30f;
}

#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;
}
.crossref-logo-container img {
  width:4em;
}
details {
    margin:0 2.5em 1em 0;
    display:inline-block;
}
details li {
    font-weight:bold;
    list-style-type: none;
}
details li a:hover {
    margin-left:-.4em;
}
ul.toc {
    margin-bottom:1em;
}
.navbutton svg {
    border:solid .12em #d57a23;
    border-radius:.25em;
    background-color: #4183c4;
}
.navbutton svg path {
    fill:#fff;
}
.navbutton svg:hover {
    background-color:#757051;
}
.navbutton.disabled svg, .navbutton.disabled svg:hover {
    background-color: #4b4b4a;
}
.caption-label {
    color: #4d6590;
}
.showkey {
    color:#4d6590;
    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:#eee;
}
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;
}
@media screen and (min-width: 900px) and (max-width: 1265px)
{
  body {
    grid-template-areas: 
     'header-left header header'
     'menu main main'
     'menu footer footer';
  }
}
@media screen and (max-width: 700px)
{
  body {
    grid-template-areas: 
     'header-left header header'
     'menu main main'
     'menu footer footer';
  }
}
@media screen and (max-width: 1265px)
{
  #header-authors .firstname {
    display:none;
  }
}
@media screen and (max-width: 1100px) and (min-width:901px) {
  #bbr-product {
    font-size:3vw;
  }

}
@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;
    }
}

@media screen and (max-width: 900px) {
    #bbr-product {
        font-size:3.5vw;
    }
}
@media screen and (max-width: 450px) {
    nav ul {
        padding-left:0;
    }
    nav ul li {
        border-bottom: solid 1px #ce5c43;
    }
    .navigation {
        width:10em;
        margin-left:-10em;
    }
    .svg-nav-toggle {
        fill: #fff; 
    }
    .coverlogo {
        width:113px;
        height:150px;
    }
    #bbr-acronym {
        font-size:5vw;
    }
}