@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url("fonts/fontawesome/css/all.css");

.font-sans { font-family: "Roboto",sans-serif, Verdana;}
.font-serif { font-family: Merriweather, Serif, Verdana; } 
.divide-y >  * + * { border-top-width: 1px; border-bottom-width:0px; border-top-style:solid;}
.divide-gray > * + * { border-color: #DFDFDF }
.divide-y-small > :first-child::before  {display: none;}
.divide-y-small > *::before  {
  content: "";
  display: block;
  width: 4rem;
  margin-left: 3rem;
  border-bottom: 2px solid #f2f2f2;
}

details {
  margin-bottom: 1.5rem;
}

details>summary {
  /* display:flex; */
  margin-top: 1.5rem !important;
  margin-bottom: 0rem !important;
}

details>summary::marker
{
  content: "";
}
details[open]>summary {
  margin-bottom: 1.5rem !important;
}
details[open]>summary::before
{
    transform: rotate(-90deg);
    color: #FFF;
     background: #cc0000;
}
details>summary::before
{
    flex: 0 0  2rem; 
    display: inline-grid;
    content: ">";
    padding: 0 0;
    color: #cc0000;
    border: 1px solid #F2F2F2;
    margin-right: 1rem;
    width: 2rem;
    height: 2rem;
    font-size: 1.0rem;
    transform: rotate(90deg);
    text-align: center;
    align-content: center;
}

.btn-round { border-radius: 5px; }


.border-gray { border-color:#DFDFDF }
.border { border-width: 1px; border-style: solid; }
.text-blue { color: #cc0000}
.text-black { color: #000; }

:root {
  --bg-gray: #f2f2f2;
}

html {
  font-size: 20px;
}
body {
     font-size: 0.8rem;
}
footer {
     margin-top:5rem;
     font-size: 0.8rem;
     padding: 0 !important;
     background: var(--bg-gray);
     color: #284148;
}
footer h3 {

}
.bg-blue-100 {
  background: #f5f9ff
}
.bg-blue-200 {
  background: #bccbec
}

.bg-blue {
  background: #2a5587;
}
.text-white{
 color: #FFFFFF;
}
h1, h2, h3 {
  font-family: "Roboto",sans-serif, Verdana;
}

footer h3.underline:after {
     content: "";
     display:block;
     height: 2px;
     width: 3.75rem;
     background: #284148;
     margin: 0.6rem 0;

}

footer > div {
     width: 57rem;
     margin: 4rem auto;
     text-align:left;
}

header.wide nav.bar_container li:last-child a{
     margin:0;
     padding: 0 1rem;
     background: #ffffff;
     color: #000000;
     height: 2rem;
     line-height: 2rem;
    border-radius: 5px;
}
header.wide nav.bar_container li:last-child a:hover{
     opacity: 0.8;
}
header.wide nav.bar_container li:last-child a:after{
     padding-left:0.5rem;
     content: "\203A";
}
body.wide header > nav {
     padding: 0.75rem 0.75rem;
}

html body.wide header {
    
     padding: 0;
     border: none;
     box-shadow: 0px 0px 5px #000;
}
html aside.top {
   margin:0;
   padding:0 !important;
   background: #f2f2f2;
}

button, input[type=button], input[type=submit]
{
	background-color: var(--button-background-color);
	border-color: var(--button-border-color);
}

button[disabled=disabled], input[type=button][disabled=disabled], input[type=submit][disabled=disabled]
{
	opacity: 0.5;
}

@media (max-width: 36rem)
{

button, input[type=button], input[type=submit]
{
	background-color: var(--narrow-button-background-color);
	border-color: var(--narrow-button-border-color);
}
}

/*
input, textarea
{
	background-color: var(--input-background-color);
	border-color: var(--input-border-color);
}

select
{
	background-color: var(--select-background-color);
	border-color: var(--select-border-color);
}

@media (max-width: 36rem)
{

input, textarea
{
	background-color: var(--narrow-input-background-color);
	border-color: var(--narrow-input-border-color);
}

select
{
	background-color: var(--narrow-select-background-color);
	border-color: var(--narrow-select-border-color);
}

}
*/

@import url('https://fonts.googleapis.com/css?family=Merriweather|Roboto:400,700&display=swap');

input[type=submit]:hover, button.portal-button:hover
{
     background-color: #BB3126;
}

input[type=text], input[type=email], input[type=password], textarea
{
     border: 1px solid #18192d;
     padding: 0.4rem;
     font-size: 100%;
}

input[type=text]:focus, input[type=email]:focus, input[type=password]:focus, textarea:focus
{
     border: 1px solid #69acdf;
}

@media screen and (max-width: 36rem) 
{
.quote, .quote-bar
{
     display: none;
}
.quote-sub
{
     background-color:#404571;
     padding: 16px;
}
}

.quote-table
{
     float: right;
}

.quote
{
     color: #FFFFFF;
     font-family: "Roboto",sans-serif;
     font-size: 40px;
     font-weight: 700;
     background-color:#404571;
     width: 312px;
     padding:48px;
     padding-top:96px;
     line-height:1.2;
}

.quote-bar
{
     background-color:#404571;
     height:32px;
     width:368px;
}

.quote-bar-corner
{
     width:32px;
}

.quote-sub
{
    padding-top: 32px;
     width: 400px;
}

div.portal-main-body-bottom
{
     background-image: url("https://ioresearch.jambo.software/panel/iopanel/res/m0-document-module/F2F2F2.png");
     background-position: left top;
     background-repeat: repeat-x;
     background-size: 100% 32px;
     border-bottom: 192px solid white;
}

div.portal-main-body-bottom > div
{
     max-width: 60em;
}

div.portal-main-body-bottom > div > div > img
{
     margin-top: 96px;
}

.portal-main .markdown a
{
     font-weight: normal;
}

div.portal-main-footer div
{
     font-weight: 700;
     font-family: "Roboto",sans-serif;
     font-size: 14px;
}

div.portal-main-footer
{
     border-top: 128px solid #29A49A !important;
     border-top: 128px solid #69acdf !important;
     border-top: 128px solid #dc5c51 !important;
     border-top: 128px solid #404571 !important;
     padding: 0;
     padding-bottom: 32px;
}

.portal-main-footer a
{
     color: #18192D;
}

.portal-main-footer a.footer
{
     font-size: 10px;
}

div.portal-main-header
{
     color: #FFFFFF;
     padding-right: 48px;
}

.portal-inliner label
{
     color: #FFFFFF;
     font-family: "Roboto",sans-serif
}

.portal-inliner label:hover
{
     color: #F2F2F2;
}

div.portal-main-header a, div.portal-main-header a:hover
{
     color: #FFFFFF;
     font-weight: 700;
     font-family: "Roboto",sans-serif !important;
     text-decoration: none;
     font-size: 16px;
     padding: 8px;
     padding-right: 32px;
     background-image: url("https://www.iopanel.nl/res/m0-document-module/white-arrow-icon-png-28.png");
     background-repeat: no-repeat;
     background-position: right 4px center;
     background-size: 12px 12px;
}

div.portal-main-header a:hover
{
     background-position: right 0px center;
     color: #F2F2F2;
}

.portal-main-body-top
{
     padding: 0px !important;
     max-width: 100% !important;
     height: auto;
     max-height: 295px;
     overflow-y: hidden;
}

.portal-main a
{
     font-weight: normal;
}

.portal-main a:hover
{
     color: #BB3126;
}

@media screen and (min-width: 32rem) 
{

nav.portal-top-primary-menu.portal-menu.menubar
{
     padding: 36px;
     padding-left: 225px;
     padding-right: 16px;
     background-image: url("https://www.ioresearch.nl/wp-content/uploads/2020/02/IO-Research-Logo-FC-RGB.svg");
     background-position: 32px center;
     background-size: 185px 150px;
     background-repeat: no-repeat;
}
}

@media screen and (max-width: 32rem) 
{
nav.portal-top-primary-menu.portal-menu.menubar
{
     padding: 32px;
     padding-left: 96px;
     padding-right: 16px;
     background-image: url("https://www.ioresearch.nl/wp-content/uploads/2020/02/IO-Research-Logo-FC-RGB.svg");
     background-position: 4px center;
     background-size: 92px 75px;
     background-repeat: no-repeat;
}
}


nav.portal-top-primary-menu>ul>li
{
	border-right: 0px dotted #fff
}
nav.portal-top-primary-menu>ul>li:last-child
{
	border-right: none
}

div.portal-main-body-top
{
/*	box-shadow: 0px 0px 5px 5px #D1D1D1; */
	z-index: -1; max-width: 49.6rem; margin: 0 auto;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

div.portal-main-body-top>a.portal-anchor
{
	color: #695a5b;
	padding: 0.4rem 1.5rem;
	border-left: 2px solid #e5dede;
	float:right;
	text-decoration: none !important
}

div.portal-main-body-top>a.portal-anchor:last-child
{
	border-left: none
}

.portal-main-body-right { float: right; padding: 2rem; text-align: left; vertical-align: top; width: calc(50% - 32rem) }

@media screen and (max-width: 67.2rem)
{
.portal-main-body-right { display: none }
}

@media screen and (max-width: 32rem)
{
/*div.portal-main-body-top { display: none }*/
}

div.portal-main-body-center
{
/*	box-shadow: 0px 0px 5px 5px #D1D1D1; */
	z-index: -1; max-width: 48rem; margin: 0 auto;
	min-height: 16rem
}

@media screen only @