﻿*
{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
:root {
	--color-gold: #E5C25C;
	--color-darkblue: #004466;
	--color-warning: #ff8800;
	--color-error: #C1272D;
	--color-unimportant: #ccc;
	--color-road: #C1272D;
	--color-air: #0071BC;
	--color-sea: #00A99D;
	--color-rail: #F7931E;
	--color-pdf: #C1272D;
}
html
{
    height: 100%;
    width: 100%;
}
body
{
	font-family: Verdana, Arial, Tahoma;
	margin: 0;
	padding: 0;
    height: 100%;
    width: 100%;
    position: relative;
}
body #mobileheader
{
    display: block;
	position: fixed;
	top: 0;
	left: 0; 
	width: 100%;
	z-index: 25;
}
	body .pageheader {
		height: 55px;
		background-color: Black;
		overflow: hidden;
		border-bottom: 5px solid var(--color-gold);
	}
body .pageheader .headerlogo
{
    display: block;
	height: 50px;
	width: 50px;
	float: right;
	overflow: hidden;	
	background: var(--color-gold);
}
body .pageheader .headerlogo img
{
	height: 90%;
    margin: 5%;
}
.pageheader .headersearchtoggle
{
    float: right;
	height: 50px;
	width: 50px;
    text-align: center;
    line-height: 50px;
    color: #fff;
}
.pageheader .headermenutoggle,
.pageheader .headerback
{
    float: left;
	height: 50px;
	width: 50px;
    text-align: center;
    line-height: 50px;
    color: #fff;
}
.pageheader .fa
{
    line-height: 50px;
    font-size: 150%;
}
body .pageheader .headertitle
{
    color: #ffffff;
    font-size: 20px;
    margin: 0 60px;
    line-height: 50px;
}
body .content
{
	padding: 55px 0 20% 0;
	width: 100%;
	overflow-x: auto;
}
a {
	color: var(--color-darkblue);
}
body .content a
{
    text-decoration: underline;
}
body .footer
{
	position: fixed;
	z-index: 20;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: Black;
	text-align: center;
	overflow: hidden;
}
body .footer img
{
	width: 100%;
}

.menubutton
{
	color: White;
}

/* pagina elementen */
.transportmodename, .productname, .pagetitle, .sectiontitle
{
	font-weight: bold;
	font-size: x-large;
}

.tmtext
{
	display: inline-block;
	padding-left: 15px;
}
.modulebuttons .tmtext
{
	font-size: 1.1em;
}
/* invoer elementen */

#mobileNav
{
    background: rgba(0,0,0,0.75);
    position: fixed;
    right: 100%;
    width: 100%;
    top: 0;
    z-index: 50;
    height: 100%;
	transition: right 0.3s ;
	padding: 0 50px 0 0;
}
body.showmenu #mobileNav
{
    right: 0;	
}
.mobileMenuContent {
	background: #fff;
	height: 100%;
	border-bottom: 5px solid var(--color-gold);
}
ul.mobileMenu
{
    margin: 0 0 0 0;
    padding: 0;
    list-style-type: none;
    height: calc(100% - 55px);
    overflow: auto;
     
}
ul.mobileMenu a
{
    display: block; 
    font-size: 16px;
    color: #000;
	border-bottom: solid 1px #ccc;
	padding: 0 5px;
	line-height: 2.5em;
}
ul.mobileMenu a .menuicon
{
	display: inline-block;
	position: relative;
	width: 50px;
	text-align:center;
	font-size: 150%;
	line-height: 40px;
	height: 40px;
	vertical-align: middle;
	color: var(--color-darkblue);
}


table .headerblack
{
	height: 50px;
}
.menubutton
{
	padding-left: 7px;
	padding-top: 5px;
	width: 40px;
	height: 40px;
}

.back
{
	padding-bottom: 10px;
}
.languageselect
{
	text-align: center;
}
.languageselect .dropdown, .languageselect .button
{
	margin-left: 10px;
}
.productsearch {
	padding: 0 50px 5px 5px;
	background-color: var(--color-gold); /*#FFCC66;*/
	position: relative;
}
.detailsheader {
	padding: 0 10px 5px 10px;
	background-color: var(--color-gold); /*#FFCC66;*/
	font-size: 20px;
}
.productsearch .txtsearch
{
	width: 100%;
	border: 0;
	height: 40px;
	line-height: 40px;
	padding: 0 0.25em;
}
.searchbutton
{
}
.productsearch button {
	font-size: 150%;
	width: 50px;
	right: 0;
	top: 0;
	position: absolute;
	text-align: center;
	background-color: var(--color-gold); /*#FFCC66;*/
	border: 0px;
	height: 40px;
	line-height: 40px;
}

/**********  HOMEPAGE  *******************/
.homebuttons ul,
.homebuttons li
{
    display: block;
    margin: 0;
    padding: 0.5rem;
    list-style-type: none;
}
.homebuttons li
{
    width: 33%;
    float: left;
}
.homebuttons li a {
	border-radius: 5%;
	overflow: hidden;
	display: block;
	padding-top: 125%;
	border: 3px solid var(--color-gold);
	background-color: #ffffff;
	position: relative;
}
.homebuttons li a span
{
    display: block;
    text-align: center;
    position: absolute;
    width: 100%;
    left: 0;
}
	.homebuttons li a span.menuicon {
		top: 0;
		width: 100%;
		left: 0;
		font-size: 600%;
		font-size: 10vw;
		aspect-ratio: 1.5;
		line-height: 20vw;
	}
.homebuttons li a span.menutext
{
    bottom: 0;
    padding: 0.5rem;
    width: 100%;
    color: #000;    
    font-size: 150%;
    font-size: 5vw;
    color: #000;
}

/**********  TABLE *******************/


table
{
	border-collapse: collapse;
}
/* product details (2x 50%) */
table.productdetails th, table.productdetails tr
{
	vertical-align: top;
}
table.productdetails, table.productlist
{
	width: 100%;
}
table.productdetails th, table.productdetails td
{
	text-align: left;
}
table.productdetails th
{
	width: 40%;
}
table.productdetails td
{
	width: 60%;
}

/* productlist (5 kolommen) */
.productlist-noresult
{
    line-height: 1.5;
    text-align: center;
    margin: 1rem;
}
.productlist-noresult .fa
{
    display: block;
    font-size: 15vw;
    color: #ffffff;
    margin-top: 1rem;
}
table.productlist caption
{
    background: #ddd;
    padding: 5px;
}
.table-responsive>.table.productlist>tbody>tr>td
{
    white-space: normal;
    color: #337ab7;
    text-decoration: underline;
}

/*labels */
.dglabelimage
{
	position: absolute;
	top: 0;
	left: 0;
	width: 90%;
	margin-left: 5%;
}
.dglabel
{
	width: 50%;
	float: left;
	padding: 10px;
	padding-bottom: 50%;
	position: relative;
	height: 0;
	overflow: hidden;
	max-width: 500px;
	max-height: 500px;
}
.dglabels
{
	padding: 10px;
}
/* debug timer */
.timestamps
{
	position: absolute;
	z-index: 100;
	right: 0px;
	top: 0px;
	background-color: #fffff8;
	border: 1px solid #000;
	border-width: 1px 2px 2px 1px;
	overflow: hidden;
}

.buttons
{
	padding: 10px;
}



.backbutton
{
	display: inline-block;
	position: absolute;
	left: 5px;
}

.maxwidthbutton
{
	width: 90%;
}

.dgpicon::before {
	background-size: auto 90%;
	background-repeat: no-repeat;
	background-position: center center;
	content: "";
	display: inline-block;
	width: 100%;
	height: 100%;
	aspect-ratio: 1;
	text-align: center;
	vertical-align: middle;
}

.icon-ibc::before {
	background-image: url("data:image/svg+xml,%3c%3fxml version='1.0' encoding='utf-8'%3f%3e %3csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='640px' height='640px' viewBox='0 0 640 640' style='enable-background:new 0 0 640 640%3b' xml:space='preserve'%3e%3cg id='ibc'%3e%3cpath style='fill:%2300A99D%3b' d='M438.8%2c77.4h-243c-11%2c0-20%2c9-20%2c20l20%2c75.8c0%2c11%2c9%2c20%2c20%2c20h9.5v66.4h184v-66.4h9.5c11%2c0%2c20-9%2c20-20 l20-75.8C458.8%2c86.4%2c449.8%2c77.4%2c438.8%2c77.4z M297.3%2c117.4v35.8h-65.4l-9.4-35.8H297.3z M402.7%2c153.2h-65.4v-35.8h74.9L402.7%2c153.2z '/%3e%3cpath d='M492.1%2c329.4l-174.8-22.2l-174.8%2c22.2L280%2c202.6c22-17.1%2c52.7-17.1%2c74.7%2c0L492.1%2c329.4z'/%3e%3cpath style='fill:%2300A99D%3b' d='M480.2%2c322.4l35.6%2c11.9c9.6%2c2.8%2c15.6%2c9.2%2c17.8%2c19.1c2.3%2c9.9%2c0%2c18.5-6.8%2c25.9l-59.4%2c59.4 c7.9%2c19.2%2c20.5%2c34.7%2c37.8%2c46.2c17.2%2c11.6%2c38.3%2c17.4%2c63.2%2c17.4c5.6%2c0%2c10.5%2c2%2c14.4%2c5.9c4%2c4%2c5.9%2c8.8%2c5.9%2c14.4v13.6 c0%2c5.6-2%2c10.5-5.9%2c14.4c-4%2c4-8.8%2c5.9-14.4%2c5.9c-49.8%2c0-90.2-16.7-121.3-50.1c-6.2%2c14.7-16.1%2c26.7-29.7%2c36.1 c-13.6%2c9.3-28.8%2c14-45.8%2c14H263c-11.3%2c0-21.9-2.1-31.8-6.4c-9.9-4.2-18.7-10.2-26.3-17.8c-7.6-7.6-13.4-16.3-17.4-25.9 c-31.1%2c33.4-71.6%2c50.1-121.3%2c50.1c-5.7%2c0-10.5-2-14.4-5.9c-4-4-5.9-8.8-5.9-14.4v-13.6c0-5.7%2c2-10.5%2c5.9-14.4c4-4%2c8.8-5.9%2c14.4-5.9 c24.9%2c0%2c46.1-5.8%2c63.6-17.4c17.5-11.6%2c30-27%2c37.3-46.2l-59.4-59.4c-6.8-7.3-9.1-16-6.8-25.9c2.3-9.9%2c8.2-16.3%2c17.8-19.1l35.6-11.9 l54.3-17l100.1-32.2c2.8-1.1%2c5.6-1.7%2c8.5-1.7c2.8%2c0%2c5.6%2c0.6%2c8.5%2c1.7l100.1%2c32.2L480.2%2c322.4z'/%3e%3c/g%3e%3c/svg%3e");
}

.icon-imdg::before {
	background-image: url("data:image/svg+xml,%3c%3fxml version='1.0' encoding='utf-8'%3f%3e %3csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='640px' height='640px' viewBox='0 0 640 640' style='enable-background:new 0 0 640 640%3b' xml:space='preserve'%3e%3cg id='imdg'%3e%3cpath style='fill:%2300A99D%3b' d='M438%2c77.4H195c-11%2c0-20%2c9-20%2c20l20%2c75.8c0%2c11%2c9%2c20%2c20%2c20h8.5v197.2h184V193.2H418c11%2c0%2c20-9%2c20-20 l20-75.8C458%2c86.4%2c449%2c77.4%2c438%2c77.4z M300%2c117.4v35.8h-69l-9.4-35.8H300z M401.9%2c153.2H340v-35.8h71.4L401.9%2c153.2z'/%3e%3crect x='137.6' y='226.4' width='152.1' height='152.1'/%3e%3crect x='341.9' y='226.4' width='152.1' height='152.1'/%3e%3cpath style='fill:%2300A99D%3b' d='M479.4%2c322.4l35.6%2c11.9c9.6%2c2.8%2c15.6%2c9.2%2c17.8%2c19.1c2.3%2c9.9%2c0%2c18.5-6.8%2c25.9l-59.4%2c59.4 c7.9%2c19.2%2c20.5%2c34.7%2c37.8%2c46.2c17.2%2c11.6%2c38.3%2c17.4%2c63.2%2c17.4c5.6%2c0%2c10.5%2c2%2c14.4%2c5.9c4%2c4%2c5.9%2c8.8%2c5.9%2c14.4v13.6 c0%2c5.6-2%2c10.5-5.9%2c14.4c-4%2c4-8.8%2c5.9-14.4%2c5.9c-49.8%2c0-90.2-16.7-121.3-50.1c-6.2%2c14.7-16.1%2c26.7-29.7%2c36.1 c-13.6%2c9.3-28.8%2c14-45.8%2c14H262.2c-11.3%2c0-21.9-2.1-31.8-6.4c-9.9-4.2-18.7-10.2-26.3-17.8c-7.6-7.6-13.4-16.3-17.4-25.9 c-31.1%2c33.4-71.6%2c50.1-121.3%2c50.1c-5.7%2c0-10.5-2-14.4-5.9c-4-4-5.9-8.8-5.9-14.4v-13.6c0-5.7%2c2-10.5%2c5.9-14.4c4-4%2c8.8-5.9%2c14.4-5.9 c24.9%2c0%2c46.1-5.8%2c63.6-17.4c17.5-11.6%2c30-27%2c37.3-46.2l-59.4-59.4c-6.8-7.3-9.1-16-6.8-25.9c2.3-9.9%2c8.2-16.3%2c17.8-19.1l35.6-11.9 l54.3-17L308%2c273.2c2.8-1.1%2c5.6-1.7%2c8.5-1.7c2.8%2c0%2c5.6%2c0.6%2c8.5%2c1.7l100.1%2c32.2L479.4%2c322.4z'/%3e%3c/g%3e%3c/svg%3e");
}

.icon-adn::before {
	background-image: url("data:image/svg+xml,%3c%3fxml version='1.0' encoding='utf-8'%3f%3e %3csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='640px' height='640px' viewBox='0 0 640 640' style='enable-background:new 0 0 640 640%3b' xml:space='preserve'%3e%3cg id='adn'%3e%3cpath style='fill:%2300A99D%3b' d='M571.5%2c456c-19.9%2c0-26.3%2c0.5-40.3-2.1c-0.2-1.1%2c7.4-80.6%2c5.2-90.5c-2.3-9.9-8.2-16.3-17.8-19.1 c0%2c0-99.4-25.9-172.5-31.7v-50.1h70.5c11%2c0%2c20-9%2c20-20l20-75.8c0-11-9-20-20-20h-243c-11%2c0-20%2c9-20%2c20l20%2c75.8c0%2c11%2c9%2c20%2c20%2c20H292 v50.3c-72.9%2c6.1-170.5%2c31.5-170.5%2c31.5c-9.6%2c2.8-15.6%2c9.2-17.8%2c19.1c-2.3%2c9.9%2c5.9%2c89.1%2c5.7%2c89.6c-16.9%2c3.8-16.7%2c3.1-40.9%2c3.1 c-13.8%2c0-25%2c11.2-25%2c25s11.2%2c25%2c25%2c25c18.4%2c0%2c34.8-1.2%2c49.6-3.3c49.7-7%2c80.9-24%2c109.2-39.4c30-16.3%2c53.6-29.2%2c96.2-29.2 c41.7%2c0%2c61.6%2c12.5%2c86.8%2c28.3c27.4%2c17.2%2c57.9%2c36.3%2c115.8%2c41.9c10.8%2c1%2c32.5%2c1.6%2c45.4%2c1.6c13.8%2c0%2c25-11.2%2c25-25S585.3%2c456%2c571.5%2c456z M338.5%2c186.7h71.4l-9.4%2c35.8h-61.9V186.7z M229.6%2c222.5l-9.4-35.8h78.4v35.8H229.6z'/%3e%3c/g%3e%3c/svg%3e");
}