/*
main:      7cb8f3 50a1f0 298eed 0c7ce7 055cb1
secondary: 80a6f3 5589f1 2f6fee 1059e9 0741b5
tertiary:  77d0f2 4bc1ef 22b4ec 07a8e6 037dac


second: 2a70b9
third: 265387
forth: 1f3858
fifth: 161f2e

*/

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 600;
  font-stretch: normal;
  src: url(fonts/open_sans/opensans-variablefont_wdth,wght.woff2);
}

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400 500;
  src: url(fonts/raleway/raleway-variablefont_wght.woff2);
}

:root {
    --bggray: #f5f6f8;
    --linegray: gray;
    --bordergray: #8d969a;
    --tablegray: #eeeeee;
    --setonic-blue: #298eed;
    --setonic-light: #50a1f0;
    --setonic-xlight: #7cb8f3;
    --setonic-dark: #0c7ce7;
    --setonic-xdark: #055cb1;
    --setonic-2-blue: #2f6fee;
    --setonic-2-light: #5589f1;
    --setonic-2-xlight: #80a6f3;
    --setonic-2-dark: #1059e9;
    --setonic-2-xdark: #0741b5;
}

* {
    font-family: "Open Sans";
    font-weight: 400;
    margin: 0;
    padding: 0;
    /* outline: 1px solid #ffc0c0; */
}

strong {
    font-weight: 560;
}

body {
    height: 100%;
}

p {
    margin-bottom: 1em;
}

a {
    color: grey;
    text-decoration: none;
}

header {
    background-color: var(--bggray);
    border-bottom-width: 1px;
    border-bottom-color: gray;
    border-bottom-style: solid;
    margin: 0;
    padding: 0;
}

.container {
    max-width: 1170px;
    margin-left: auto;
    margin-right: auto;
}

header > div {
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
    padding-bottom: 10px;
    border: 1px;
}

header > div > img {
    margin: 0;
    padding: 0;
}

/* header > img + ul { */
/*     vertical-align: top; */
/*     padding-top: 50px; */
/* } */

header >  div > ul {
    display: flex;
    vertical-align: top;
    gap: 10px;
    margin: 0;
    padding: 0;
}

header > div > ul > li {
    list-style: none;
}

header > div > ul > li span{
    padding-left: 5px;
}


footer {
    /* make it stick to the bottom: https://css-tricks.com/a-clever-sticky-footer-technique/ */
    position: sticky;
    top: 100vh;
    background-color: var(--bggray);
    width: 100%;
    height: auto;
}

footer > div {
    margin-left: auto;
    margin-right: auto;
    display: block;
    max-width: 1170px;
    left: 0;
    right: 0;
}

footer > div > ul {
    display: flex;
    flex-wrap: wrap;
    vertical-align: top;
    gap: 10px;
    margin: 0;
    padding: 0;
}

footer > div > ul > li {
    list-style: none;
}

footer > div > ul > li span {
    padding-left: 5px;
}

nav {
    border-bottom-width: 1px;
    border-bottom-color: var(--bordergray);
    border-bottom-style: solid;
}

html,body {
    height: 100%;
}

main {
    margin-top: 2em;
    /* min-height: +88.3 + 53.45; */
    margin-bottom: 52px;
}

div.single_main {
    display: grid;
    grid-template-columns: [first] 15% [main] 85%;
    grid-template-rows: [row1] 100%;
}

div.single_main nav {
    max-width: 10em;
    grid-column-start: 1;
    grid-column-end: span 1;
    border: 0px;
}

div.single_main div.single_content {
    padding-left: 35px;
}

nav > ul {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
    padding: 0;
}

li {
    margin: 0;
    list-style: none;
    padding-top: 1em;
    padding-bottom: 1em;
}

main div.single_main > nav > ul {
    display: inline;
}

main div.single_main > nav > ul > li {
    display: block;
    padding-top: 0.5em;
    padding-left: 0.5em;
}

main div.single_main > nav.sidebar ul {
    padding: 0;
}

main div.single_main > nav.sidebar ul li {
    /* padding: 0em; */
    padding-top: 0.6em;
    padding-bottom: 0.6em;
    line-height: 1;
    margin-left: 0.2em;
    color: var(--setonic-2-xlight);
}


header > div > ul > li {
    padding-top: 0em;
}

div ul.standard-list {
    list-style: disc;
    margin-left: 2em;
    padding: 0;
}

ul.standard-list li {
    list-style: disc;
    margin-left: 2em;
    padding: 0;
}

ol.standard-list {
    list-style: disc;
    margin-left: 2em;
    padding: 0;
}

ol.standard-list li {
    list-style: disc;
    margin-left: 2em;
    padding: 0;
}

ul.liquid_handling {
    display: flex;
    flex-wrap: wrap;
    flex-grow: 1;
    justify-content: left;
    /* align-items: top; error */
    column-gap: 5%;
    /* row-gap: 10%; */
    padding: 0px;
    margin-bottom: 1em;
}


ul.liquid_handling li {
    max-width: 285px;
    padding: 0px;
    padding-bottom: 1em;
    /* border: 1px solid; */
    /* border-color: #eeeeee; */
}

ul.liquid_handling li figure {
    /* outline: 1px solid red; */
    max-width: 285px;
    margin: 0px;
    padding: 0px;
}

ul.liquid_handling li figure > div {
    overflow: hidden;
    width: 285px;
    height: 110px;
    display: flex;
}

ul.liquid_handling li figure figcaption {
    position: relative;
    top: -1em;
}

a::before {
    /* content: "»\00a0"; */
}

header > .container > a::before {
    content: none;
}

ul.liquid_handling li a::before {
    content: none;
}

ul.liquid_handling li figure figcaption::before {
    content: "» ";
}

ul.liquid_handling li figure div > span {
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

ul.liquid_handling li img {
    object-fit: contain;
    max-width: 285px;
}

table {
    border: none;
    border-collapse: collapse;
}

table thead th {
    padding: 5px;
    padding-right: 20px;
    background-color: #f0f0f0;
}

table tbody tr:nth-child(even) {
    background-color: #f7f7f7;
}

table tbody td {
    padding: 5px;
}

h1 {
    padding-bottom: 20px;
    font-family: Raleway;
    color: #666666;
}

h2 {
    padding-bottom: 20px;
    font-weight: bold;
}

h3 {
    font-family: Raleway;
    font-weight: bold;
    color: #666666;
    padding-top: 20px;
    padding-bottom: 20px;
}

div.single_main > div > h4 {
}

div.single_main > div > dl {
    margin-left: 1em;
    display: flex;
    flex-flow: row wrap;
}

div.single_main > div > dl > dt {
    flex-basis: 20%;
}

div.single_main > div > dl > dd {
    flex-basis: 70%;
    flex-grow: 1;
}


nav > input.toggle {
    display: none;
}

nav > .lbl-toggle {
    display: none;
}

header + nav .current {
    font-style: italic;
    font-weight: bold;
    border-bottom-style: solid;
    border-bottom-color: var(--setonic-2-xlight);
}

.sidebar li.current {
    font-style: italic;
    font-weight: bold;
    border-left-style: solid;
    padding-left: 5px;
    color: var(--setonic-2-xlight);
}

@media screen and (max-width: 810px) {
    * {
	/* background-color: white; */
	--webkit-text-size-adjust: 100%;
	text-size-adjust: 110%;
    }

    nav > .lbl-toggle {
	display: inline;
	font-size: xx-large;
    }
    
    nav ul.container {
	display: none;
    }

    nav > input.toggle:checked + .lbl-toggle + .container {
	display: block;
    }

    nav > input.toggle:checked + .container {
	background-color: green;
    }

    div.single_main {
	display: block;
    }
    
    .single_main > nav {
	display: none;
    }
    
    .single_main > div.single_content {
	padding: 0px;
    }

    header > div > a > img {
	max-width: auto;
	height: 35px;
	object-fit: cover;
    }

    header > div > ul li span {
	display: none;
    }

    footer > div > ul li span {
	display: none;
    }

    header + nav .current {
	font-style: italic;
	font-weight: bold;
	border-bottom-style: none;
	border-left-style: solid;
	border-left-color: var(--setonic-2-xlight);
    }


    .single_main img {
	max-width: 100%;
	height: 100%;
	object-fit: cover;
    }

    footer a::before {
	content: none;
    }
}