@charset "UTF-8";

@media only screen and (-webkit-min-device-pixel-ratio: 1.25),
only screen and (min-device-pixel-ratio: 1.25),
only screen and (min-resolution: 200dpi),
only screen and (min-resolution: 1.25dppx) {
	-webkit-font-smoothing: subpixel-antialiased;
}

body {
	overflow-x: hidden;
	color: #000000;
	line-height: 1.4rem;
	font-size: 1rem;
	font-family: "Roboto", serif;
	font-weight: 300;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	background: #f5f5f5;
	color: #000;
	margin: 0;
}

body,
html {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}

* {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

code {
	display: block;
	background-color: #f5f5f5;
	border: 0.0625rem solid #e1e1e1;
	border-radius: 0.1875rem;
	padding: 0.625rem;
	font-family: 'Courier New', Courier, monospace;
	font-size: 	1.125rem;
	line-height: 1.5rem;
	color: #c7254e;
	line-break: anywhere;
}

* + code {
	margin-bottom: 1.25rem;
}

/*--------------------------------------------------------------
Some CSS Reset
--------------------------------------------------------------*/
img {
	display: block;
	border: 0;
	width: 100%;
	height: auto;
}

ul {
	margin: 0;
}

* + ul, * + ol {
	margin-bottom: 1em;
}

/*--------------------------------------------------------------
Typography
--------------------------------------------------------------*/
body,
button,
input,
select,
textarea {}

h1,
h2,
h3 {
	margin: 0;
	padding: .5em 0;
}

p {
	margin: 0;
	padding: 0 0 1rem;
}

* p:last-child {
	padding: 0;
}

a {
	color: #000000;
}

.h,
h1,
h2,
h3,
h4,
h5,
h6,
.h2 {
	color: #000000;
	margin: 0;
	font-weight: 600;
}

.letters {
	display: flex;
	max-width: 20rem;
	margin-left: auto;
}

.letters .letter {
	display: block;
	width: 100%;
}

.letters .letter svg {
	aspect-ratio: 1/1;
	display: block;
	width: 100%;
	height: 100%;
}

.letters .letter:nth-child(1) {
	background-color: #4a4a4a;
}

.letters .letter:nth-child(1) svg path {
	fill: #db3e39;
}

.letters .letter:nth-child(2) {
	background-color: #35a4e3;
}

.letters .letter:nth-child(2) svg path {
	fill: #a2d2d1;
}

.letters .letter:nth-child(3) {
	background-color: #ffffff;
}

.letters .letter:nth-child(3) svg path {
	fill: #db3e39;
}

.letters .letter:nth-child(4) {
	background-color: #a2d2d1;
}

.letters .letter:nth-child(4) svg path {
	fill: #35a4e3;
}


.h {
	font-size: 1.3rem;
	line-height: 1.6rem;
	padding-bottom: 0;
}

.s {
	margin-bottom: 1.25rem;
}

h1 {
	font-size: 1.2rem;
	line-height: 1.6rem;
}

h2,
.h2 {
	font-size: 1.1rem;
	line-height: 1.3rem;
}

h3,
.h3 {
	font-size: 1.1rem;
	line-height: 1rem;
}

h4,
.h4 {
	font-size: 1rem;
	line-height: 1rem;
}

/*
code {
  background: #ededed;
}
*/

/*--------------------------------------------------------------
General styles
--------------------------------------------------------------*/
html,
body {
	height: 100%;
	display: block;
}

.site-container {
	max-width: 87.5rem;
	padding-left: .5em;
	padding-right: .5em;
	background: #FFFFFF;
	overflow: visible;
}

header {
	width: 100%;
	background-color: #db3e39;
	margin-bottom: 1.25rem;
	padding-top: 1.875rem;
}

header p,
header .h {
	color: #ffffff;
}

header div {
	margin: auto;
	text-align: center;
}

main {
	background: white;
	margin-left: auto;
	margin-right: auto;
}

.more {
	margin-top: 1em;
	background: #ffffff;
	border: 1em solid #ffffff;
	border-radius: 1em;
}

.twin {
	margin-top: 1em;
	background: #A5E3ED;
	border: 1em solid #A5E3ED;
	border-radius: 1em;
}

.twin:last-of-type {
	background: #F6D3C6;
	border-color: #F6D3C6;
}

footer {
	padding: 1em;
	background-color: #db3e39;
	color: #ffffff;
}

footer a {
	color: white;
}

footer a:hover,
footer a:focus {
	border-bottom: 0.0625rem solid #ffffff;
}

.visually-hidden {
	position: absolute;
	overflow: hidden;
	height: 0.0625rem;
	width: 0.0625rem;
	clip: rect(0.0625rem, 0.0625rem, 0.0625rem, 0.0625rem);
	white-space: nowrap;
	word-wrap: normal;
}

@keyframes open {
	0% {
		opacity: 0;
		margin-left: -1.25rem
	}

	100% {
		opacity: 1;
		margin-left: 0rem
	}
}

details[open] summary~* {
	animation: open .5s ease-in-out;
}

details {
	background: #DCF8DC;
	font-size: 80%;
	padding-left: .5em;
	padding-right: .5em;
}

summary {
	font-size: 120%;
	padding-left: 0;
	padding-right: 0;
}

td ul {
	padding-left: 1.25rem;
}

.nobullet {
	list-style: none;
}


/*--------------------------------------------------------------
If no grid support, limit width to 50em and center align
--------------------------------------------------------------*/
@supports not (display: grid) {
	body {
		max-width: 50em;
		margin: 0 auto;
	}
}

/*--------------------------------------------------------------
CSS Grid layout for wider screens, when browser supports grid:
--------------------------------------------------------------*/

@media screen and (min-width: 41.875rem) {
	.h {
		font-size: 2.4rem;
		line-height: 4rem;
	}

	@supports (display: grid) {
		.site-container {
			padding: 0;
			display: grid;
			grid-template-columns: 1fr repeat(6, minmax(auto, 10em)) 1fr;
			grid-template-rows: minmax(4em, auto) auto 1fr 1fr 1fr 1fr 1fr
		}

		header {
			grid-column: span 8;
		}

		main,
		.more,
		.twin {
			grid-column: 2/8;
		}

		.fullfooter {
			grid-column: span 8;
			display: grid;
			grid-template-columns: repeat(8, 1fr);
			grid-template-rows: auto 1fr;
			column-gap: 2em;
			row-gap: 1em;
		}

		footer {
			grid-column: span 8;
			grid-row: 5;
		}
	}
}

@media screen and (min-width: 49.25rem) {
	main {
		width: 48rem;
	}

	body {
		font-size: 1.4rem;
		line-height: 2.8rem;
	}

	.h {
		font-size: 3rem;
		line-height: 4rem;
	}

	h1 {
		font-size: 2.4rem;
		line-height: 3rem;
	}

	h2,
	.h2 {
		font-size: 2.2rem;
		line-height: 2.6rem;
	}

	h3,
	.h3 {
		font-size: 2.0rem;
		line-height: 2.2rem;
		padding-bottom: 0;
	}

	h4,
	.h4 {
		font-size: 1.6rem;
		line-height: 2rem;
	}

	/* definition list */
	dl {
		display: flex;
		flex-wrap: wrap;
		line-height: normal;
	}

	dl>* {
		padding-top: 0.5em;
	}

	dt {
		width: 30%;
		text-align: right;
	}

	dd {
		width: 60%;
		padding-left: 1em;
		margin-left: 0rem;
	}

	dd+dd {
		width: 100%;
		padding-left: calc(30% + 1em);
	}

	dt+dt {
		padding-right: 60%;
	}

	dt+dt+dd {
		margin-top: -1.625em;
		/* own height including padding */
		padding-left: calc(30% + 1em);
	}
}

@media screen and (min-width: 67.5rem) {
	@supports (display: grid) {
		.site-container {
			margin-left: auto;
			margin-right: auto;
			grid-template-rows: minmax(4em, auto) auto 1fr 1fr minmax(3em, auto);
		}

		.more {
			grid-column: 3/7;
		}

		.twin {
			grid-column: 2/5;
		}

		.twin:last-of-type {
			grid-column: 5/8;
		}
	}
}

/*--------------------------------------------------------------
The details:
--------------------------------------------------------------*/
.button-3d {
	position: relative;
	width: auto;
	display: inline-block;
	color: #ffffff;
	text-decoration: none;
	border-radius: 1em;
	border: solid 0.0625rem #93ABB6;
	background: #000000;
	text-align: center;
	padding: 1rem 1.125rem 0.875rem;
	margin: 0.75rem;

	-webkit-transition: all 0.1s;
	-moz-transition: all 0.1s;
	transition: all 0.1s;

	-webkit-box-shadow: 0rem 0.375rem 0rem #1D4151;
	-moz-box-shadow: 0rem 0.375rem 0rem #1D4151;
	box-shadow: 0rem 0.375rem 0rem #1D4151;
}

.button-3d:active {
	-webkit-box-shadow: 0rem 0.125rem 0rem #1D4151;
	-moz-box-shadow: 0rem 0.125rem 0rem #1D4151;
	box-shadow: 0rem 0.125rem 0rem #1D4151;
	position: relative;
	top: 0.25rem;
}

.subtext {
	margin: 0 auto;
	text-align: center;
	color: #000000;
}

/* retromarkering */

.marked {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 50%;
	white-space: nowrap;
}

.marked:after {
	background: inherit;
	background: #DCF8DC;
	bottom: 0;
	content: '';
	display: block;
	height: 70%;
	width: 103%;
	position: absolute;
	right: -0.125rem;
	transform: skewY(-2deg);
	transform-origin: 80%;
	z-index: -1;
}

/* table */

*+table {
	margin-bottom: 1.25rem;
}

table {
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
}

table tr th,
table tr td {
	border-bottom: 0.0625rem solid #BCD3BC;
	padding: 0rem 0.625rem;
	text-align: left;
	font-size: 80%;
	vertical-align: top;
}

table tr th p,
table tr td p {
	line-height: 1.875rem;
}

table tr th:last-child,
table tr td:last-child {
	border-right: 0.0625rem solid #BCD3BC;
}

table tr th:first-child,
table tr td:first-child {
	border-left: 0.0625rem solid #BCD3BC;
}

table :first-child tr:first-child th {
	border-top: 0.0625rem solid #BCD3BC;
}

table tr th {
	background: #db3e39;
	color: #ffffff;
	font-weight: normal;
	font-weight: 800;
}

table tr:first-child td {
	border-top: 0.0625rem solid #BCD3BC;
}

/* top-left border-radius */
table :first-child tr:first-child :first-child {
	border-top-left-radius: 0.75rem;
}

/* top-right border-radius */
table :first-child tr:first-child :last-child {
	border-top-right-radius: 0.75rem;
}

/* bottom-left border-radius */
table :last-child tr:last-child :first-child {
	border-bottom-left-radius: 0.75rem;
}

/* bottom-right border-radius */
table :last-child tr:last-child :last-child {
	border-bottom-right-radius: 0.75rem;
}

table.overview tr:nth-child(2n) {
	background: #f7f7f7;
}

table.overview a {
	text-decoration: none;
}

table a:hover {
	text-decoration: underline;
}

.good {
	background: #00C000;
}

.moderate {
	background: #F68934;
}

.bad {
	background: #FF4040;
}

.unknown {
	background: #A0A0A0;
}

table.numeric td,
table.numeric thead tr th,
table.numeric thead tr th,
td.num {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

table.total tr:last-child {
	font-weight: bold;
}

table.ticked td {
	text-align: center;
}

table.ticked td:nth-child(2n+2),
.kolommen td:nth-child(2n+2),
tr.option td {
	background: #EBE6F2;
}

tr.option td {
	color: #575757;
}

table.wide {
	width: 100%;
}

table[role=presentation],
table[role=presentation] td {
	border: none;
	color: black;
	background: white;
}

table[role=presentation] tr td:first-child {
	padding-left: 0;
}

table[role=presentation] tr td p {
	padding-top: 0;
}

/* definition list */
dt {
	font-weight: bold;
}

.logolist {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

.logolist li {
	display: list-item;
	width: 100%;
}

.logolist li img {
	height: 1.5rem;
	width: 6.5625rem;
	margin-top: 0.125rem;
	float: left;
}

.logolist li div {
	padding-left: 6.5625rem;
	margin-top: 0.75rem;
	text-indent: 0rem;
	line-height: 1.2em;
}

.logolist li div a {
	text-decoration: none;
	font-size: 90%;
}

/* rapport resultaat */
.outcome {
	background: #daeded;
	border-radius: 0.75rem;
	padding: 1em;
	margin-bottom: 1em;
}

.outcome .failed {
	background: url("img/failed.svg");
	font-weight: 600;
}

.outcome .passed {
	background: url("img/passed.svg");
	font-weight: 600;
}

.outcome .canttell,
.outcome .failed,
.outcome .untested,
.outcome .passed,
.outcome .inapplicable {
	text-indent: 1.7em;
	background-repeat: no-repeat;
	background-size: 1.5em 1.5em;
	background-position: 0em 0.3438rem;
}

.readMore {
	padding-top: 0;
	font-size: 1rem;
}

.printonly {
	display: none;
}

.urlBreak {
	word-break: break-all;
}

@media print {
	body,
	page {
		margin: 0;
		box-shadow: 0;
	}
}