.icon {
	display: inline-block;
	width: 1.3rem;
	height: 1.3rem;
	stroke-width: 0;
	stroke: currentColor;
	fill: currentColor;
}

span#logo,
#logodiapos {
	color: #efefef;
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 0.75rem;
}

header #logo {
	margin-left: .5rem;
}

#logodiapos {
	color: #011f2e;
	font-size: 1.2rem;
	margin: 0 0 0.4em 0.2rem;
}

.icon.beeldmerk {
	height: 2rem;
	width: 1.7rem;
}

.icon.dca-mi {
	height: 1.05rem;
	width: 4.7773rem;
}

.icon.bullmi {
	height: 2.1rem;
	width: 2.1rem;
	margin-top: -0.6rem;
}

header.maxi {
	padding-left: 0.2rem;
}

header.maxi #logo .dca-mi {
	display: none;
}

#logodiapos .icon.bullmi {
	color: #6d818c;
}

.icon.dcami {
	/*lange versie*/
	height: 1.45rem;
	width: calc(1.45 * 12.060546875rem);
	margin-top: 0.3rem;
}

body {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	/* gap: 0.05rem; */
	min-height: 100%;
	align-content: flex-start;
	align-items: stretch;
	background-color: var(--offwhite);
}

header {
	width: 100%;
	background-color: var(--blauw1);
	height: 3.2rem;
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 1.3rem 2rem 0.7rem 1.55rem;
	justify-content: space-between;
}

header img {
	width: 10rem;
}

.container {
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-start;
	height: calc(100vh - 3.2rem);
}

nav {
	background-color: var(--blauw1);
	width: 13rem;
	min-height: 100%;
	padding: 4.6rem 1.3rem;
}

header nav {
	padding: 0;
	margin-top: 0.6rem;
	width: calc(100% - 18rem);
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

header select {
	background-color: #ffffff;
	border-radius: 0.5rem;
	font-size: 0.7rem;
	padding: 0 0.5rem;
	font-weight: 500;
	height: 1.8rem;
	color: var(--blauw3);
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 2rem;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg version='1.1' id='Laag_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 24 24' style='enable-background:new 0 0 24 24;' xml:space='preserve'%3e%3cstyle type='text/css'%3e .st0%7bfill:none;stroke:%23207398;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;%7d %3c/style%3e%3cpolyline class='st0' points='6,9 12,15 18,9 '/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 0.6rem center;
	background-size: 1.2em;
	margin-top: -0.6rem;
	margin-right: 0.4rem;
}

header select option {
	color: var(--blauw3);
	font-weight: 500;
}

nav ul {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--offwhite);
}

ul#sectormenu {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 3rem;
	margin-left: 10.2rem;
}

#mobnav {
	display: none;
}

.container nav ul#leftmenu,
.container.maxi nav ul#iconmenu {
	display: block;
}

.container.maxi nav ul#leftmenu,
.container nav ul#iconmenu {
	display: none;
}

#iconmenu svg.icon {
	width: 0.9rem;
	height: 0.9rem;
	margin-bottom: -0.1rem;
	padding: 0;
}

nav li {
	display: flex;
	margin-bottom: 0.35rem;
}

nav li[data-id="6"]:after {
	content: "beta";
	font-size: 0.5rem;
	color: #fff;
	background: var(--dvroze);
	height: 0.6rem;
	line-height: 0.6rem;
	padding: 0.2rem;
	border-radius: 0.2rem;
	display: inline-flex;
	margin-left: 0.4em;
}

nav #iconmenu li {
	margin-bottom: 0.45rem;
}

nav a {
	padding: 0 0.2rem;
	text-decoration: none;
	margin-bottom: 0.2rem;
	border-bottom: 0.1rem solid var(--blauw1);
	font-size: 0.9rem;
}

nav a span {
	color: var(--dvroze);
	font-size: 0.6rem;
	margin-left: 0.2rem;
	top: -0.4rem;
	text-transform: uppercase;
}

nav a:hover,
nav a.active {
	color: #fff;
	border-bottom-color: var(--dvroze);
}

nav a:not(.active):hover {
	border-bottom-color: transparent;
	color: #fff;
}

.icon-chevrons,
.icon-plus {
	width: 1.3rem;
	height: 1.3rem;
	background-color: var(--dvroze);
	color: var(--notwhite);
	border-radius: 50%;
	padding: 0.1rem;
	rotate: 180deg;
	position: absolute;
	top: 0.7rem;
	left: 0.4rem;
	z-index: 2;
	cursor: pointer;
}

.icon-chevrons:hover {
	background-color: var(--dvrozehover);
}

a.add {
	position: absolute;
	left: 0.8rem;
	right: unset;
	top: 0.8rem;
	text-decoration: none;
	z-index: 2;
}

a.add span {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	font-size: 0.6rem;
	gap: 0.3rem;
	color: #fff;
	font-weight: 300;
}

.icon-plus {
	top: unset;
	left: unset;
	width: 1.1rem;
	height: 1.1rem;
	border-radius: 50%;
	padding: 0.1rem;
	background-color: var(--dvroze);
	color: var(--notwhite);
	position: relative;
}

a.add:hover .icon-plus {
	background-color: var(--dvrozehover);
}

button svg.icon.icon-chevrons {
	position: relative;
	top: unset;
	padding: 0;
	background-color: transparent;
	rotate: 0deg;
	right: unset;
	width: 1.3rem;
	height: 1.3rem;
}

div#content,
div#logincontent {
	background-color: var(--blauw2);
	width: calc(100% - 13rem);
	height: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: flex-start;
	overflow-y: auto;
}

div#logincontent {
	width: 100%;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
}

.container.maxi .icon-chevrons {
	rotate: 0deg;
}

.container nav {
	border-top: solid 0.05rem var(--offwhite);
	border-right: solid 0.05rem var(--offwhite);
}

.container.maxi nav {
	width: 2rem;
	padding: 4.6rem 0rem;
	display: flex;

	justify-content: flex-start;
	flex-direction: column;
}

.container.maxi div#content {
	width: calc(100% - 2rem);
}

div#content.company {
	background-color: var(--company);
}

div#tabs {
	width: calc(100% - 23rem);
	background-color: var(--blauw1);
}

/* header #tabs {
  width: calc(100% - 10.3rem);
} */

header.maxi #tabs {
	width: calc(100% - 10.8rem);
}

#tabs>ul {
	display: flex;
	margin: 0.5rem 0 0 0;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	gap: 0.25rem;
	padding-left: 1.4rem;
}

#tabs>ul>li {
	display: flex;
	background-color: var(--blauw4);
	border-top-left-radius: 0.4rem;
	border-top-right-radius: 0.4rem;
}

#tabs>ul a {
	color: var(--blauw1);
	text-decoration: none;
	padding: 0.5rem 1rem;
	border-top-left-radius: 0.4rem;
	border-top-right-radius: 0.4rem;
	font-size: 0.8rem;
	font-weight: 600;
	min-width: 4.7rem;
	text-align: center;
}

#tabs a.addtab {
	min-width: unset;
	padding: 0 0.6rem;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	font-size: 1.5rem;
	font-weight: 400;
}

#tabs>ul a:hover,
#tabs>ul a.active {
	color: var(--offwhite);
	background-color: var(--blauw2);
}

#tabs>ul a.company:hover,
#tabs>ul a.company.active {
	background-color: var(--company);
}

#tabs>ul a.active {
	color: #fff;
}

#tabs li.change a {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.3rem;
}

#tabs>ul li.change a:hover,
#tabs>ul li.change:hover>a {
	color: var(--blauw1);
	background-color: var(--offwhite);
}

#tabs>ul li.change li a {
	padding: 0rem 0 0 0.2rem;
	border-top-left-radius: unset;
	border-top-right-radius: unset;
	font-size: 0.65rem;
}

#tabs>ul li.change li a:hover {
	text-decoration: underline;
	text-underline-offset: 0.2rem;
}

div#container,
div#container2 {
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: flex-start;
	align-items: stretch;
	padding: 2.6rem 2rem 2rem;
	gap: 2rem;
	justify-content: flex-start;
}

div#container:not(.noline) {
	border-top: solid 0.05rem var(--notwhite);
}

div#container.viewoverzicht {
	flex-direction: column;
	width: auto;
}

div#container2 {
	padding-top: 0;
}

div#container.nowrap {
	flex-wrap: nowrap;
}

#content.imex div#container {
	align-items: flex-start;
}

.chartwrap {
	background: var(--notwhite);
	width: 24.68rem;
	border-radius: 0.3rem;
	padding: 0.7rem 0.3rem 0 0;
	/* overflow: hidden; */
}

.chartwrap:not(.big) {
	width: calc((100% - 4rem) / 3);
}

#container div.assessmentchart div.chartwrap:not(.big) {
	width: 24.68rem;
}

.chartwrap.pork-cuts {
	background: transparent;
	width: 100%;
	display: flex;
	justify-content: center;
	flex-direction: row;
}

.chartwrap.butter_pred {
	width: 100%;
	max-width: 58rem;
}

.chartwrap.targetplace:not(.big) {
	background: var(--notwhite);
}

#settingsform.hidden {
	display: none;
}

#settingsform+.chartwrap.big.edit {
	width: calc(65% - 1rem);
	min-width: 35rem;
}

.chartwrap.hidden {
	z-index: -1;
	display: none;
}

.chartwrap .icon,
.chartwrap.big .knoppen .icon,
.account .icon,
.company .icon,
#tabbladen .icon {
	width: 0.9rem;
	height: 0.9rem;
}

.chartwrap.big .icon {
	width: 1.2rem;
	height: 1.2rem;
}

.chartwrap .button {
	position: absolute;
	top: 0.3rem;
	right: 0.8rem;
	color: var(--blauw4);
	font-size: 0.8rem;
	line-height: 1em;
	padding: 0.2rem;
	border-radius: 0.4rem;
	cursor: pointer;
	line-height: 0em;
}

#settingsform:not(.imex) .button {
	top: -2.6rem;
	right: unset;
	left: -0.8rem;
	display: flex;
	gap: 0.4rem;
	font-size: 0.67rem;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
}

#settingsform.imex #activediv .button.back {
	position: relative;
	top: 0;
	right: unset;
}

.chartwrap .button:hover {
	color: var(--dvrozehover);
}

.chartwrap .button.edit {
	top: unset;
	bottom: 0.3rem;
}

.chartwrap .button.draggable {
	right: unset;
	left: 0.3rem;
}

.chartwrap .button.copy {
	right: unset;
	top: unset;
	left: 0.3rem;
	bottom: 0.3rem;
}

.page .chartwrap .button.copy {
	right: 0.3rem;
	top: 0.3rem;
	left: unset;
	bottom: unset;
}

.page .chartwrap .icon {
	width: 1rem;
	height: 1rem;
}

.chartwrap.big,
.container.maxi .chartwrap.big {
	z-index: 2;
	width: 65%;
	padding-top: 1.6rem;
	padding-bottom: 1.4rem;
	min-width: 42rem;
}

.imex .chartwrap.big,
.imex .container.maxi .chartwrap.big {
	width: calc(50% - 2rem);
}

.chartwrap.big:has(.tablewrap),
.container.maxi .chartwrap.big:has(.tablewrap) {
	max-width: 32rem;
	min-width: unset;
}

#container.nowrap .chartwrap.big,
.container.maxi #container.nowrap {
	min-width: unset;
}

.chartwrap.big .chartwrap.big .button {
	top: 0.8rem;
}

.chartwrap.big .button.draggable {
	display: none;
}

.chartwrap.big .button .icon.zoom-in,
.chartwrap:not(.big) .button .icon.zoom-out,
.chartwrap:not(.big) .button .icon.icon-close,
.chartwrap:not(.big):not(#settingsform) .button .icon.icon-undo {
	display: none;
}

.chartwrap:not(.big) .button .icon.zoom-in,
.chartwrap.big .button .icon.icon-zoom-out,
.chartwrap.big .button .icon.icon-close,
.chartwrap.big .button .icon.icon-undo {
	display: inline-block;
}

.chartwrap.big .button.edit {
	top: unset;
	bottom: 0.5rem;
}

.chartwrap.big.edit .button.edit,
.chartwrap.big.edit .button.copy {
	display: none;
}

.chartwrap.big.edit fieldset.knoppen {
	display: flex;
}

#settingsform {
	width: calc(35% - 2rem);
	display: none;
	border-radius: 0.3rem;
	background-color: var(--notwhite);
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	padding: 2rem 1.5rem 1.4rem;
	min-width: 20rem;
	max-width: 25rem;
}

.dataview {
	font-family: var(--fontfam);
	font-weight: 400;
	display: block;
	position: relative;
}

.dataview .chartdiv {
	display: block;
	left: 0;
	position: absolute;
	width: 100%;
	top: 0;
	height: 100%;
}

/* ul li ul.amcharts-amexport-menu li.amcharts-amexport-item a.amcharts-amexport-label {
    font-size: 14px;
    padding: 6px 10px;
    white-space: nowrap;
} */

.formcontainer {
	width: 25rem;
	border-radius: 0.3rem;
	background-color: var(--notwhite);
	padding: 2rem;
	margin-bottom: 25vh;
	margin-top: 1rem;
}

.formcontainer .icon.beeldmerk {
	height: 2em;
	width: 1.7em;
}

.formcontainer .dca-mi {
	width: calc(4.5498046875 * 1.05em);
	height: 1.05em;
}

.formcontainer p {
	font-size: 0.85rem;
	padding-left: 0.3rem;
}

.formcontainer p>span {
	font-size: 0.7rem;
	margin-top: 0.2rem;
	font-weight: 400;
	display: block;
	max-width: 16rem;
	margin-bottom: 0.7rem;
}

.microtxt {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	margin-top: 0.6rem;
}

.formcontainer p.reset,
.formcontainer p.signup {
	font-size: 0.7rem;
	margin-top: 0.6rem;
}

p.reset {
	text-align: right;
}

.formcontainer p.strength,
p.strength {
	font-size: 0.7rem;
	margin-top: 0.6rem;
	font-weight: 400;
}

form#signin,
form#chpw {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 0.7rem;
}

form#chpw {
	background-color: var(--notwhite);
	padding: 2rem;
	border-radius: 0.6rem;
	width: 30rem;
	gap: 1.2rem;
}

#chpw button {
	max-width: 16rem;
}

form#signin input,
form#chpw input {
	border: 0.05rem solid #c5cbcf;
	border-radius: 0.5rem;
	font-size: 0.9rem;
	padding: 0 0.7rem;
	line-height: 1rem;
	width: 100%;
	font-weight: 500;
	height: 2.5rem;
}

.no_abo {
	width: 100%;
	font-size: 1rem;
	color: var(--notwhite);
	font-weight: 400;
}

.no_abo h3 {
	margin-bottom: 0.5rem;
	font-weight: 700;
}

.no_abo p,
.no_abo li {
	font-size: 0.8375rem;
}

.no_abo ul {
	margin: 1rem 0 1rem 2rem;
	max-width: 30rem;
	list-style-type: disc;
	display: flex;
	gap: 0.6rem;
	flex-direction: column;
	flex-wrap: nowrap;
	align-content: flex-start;
}

#subscribe.upgrade {
	display: none;
}

a.button.upgrade {
	padding: 0.8rem 1.4rem 0.8rem 1.6rem;
	gap: 0.3rem;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	text-decoration: none;
	background-color: var(--upgrade);
	color: var(--notwhite);
	line-height: 1em;
	border: none;
	font-weight: 500;
	border-radius: 0.5rem;
}

a.button.upgrade:hover {
	background-color: var(--upgradehover);
	color: #fff;
}

button.upgrade.button {
	background-color: var(--upgrade);
	border-color: var(--upgrade);
	color: var(--notwhite);
	font-size: 0.8rem;
	padding: 0.5rem 0.8rem;
	gap: 0.5rem;
}

span.reseller {
	text-decoration: line-through;
	font-size: 1rem;
	margin: 0 0.2rem;
}

span.prijs {
	font-size: 1.4rem;
	margin: 0 0.4rem;
}

p.discount {
	font-size: 0.75rem;
	font-style: italic;
}

.upgradenow {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-end;
	justify-content: space-between;
	width: 36rem;
}

form#signin input.error,
form#chpw input.error,
form.account input[type="text"].error {
	border-color: #ff0000;
}

form.account input[type="text"].error {
	color: #ff0000;
}

form.account input[type="text"].error~label {
	color: #ff0000;
}

form#signin div.error,
form#chpw div.error {
	color: #e80000;
	font-size: 0.7rem;
	margin: 0.2rem 0 0 0.7rem;
}

form#signin input:placeholder-shown~label,
form#chpw input:placeholder-shown~label {
	display: none;
}

:not(.insightpref)>:focus~label {
	display: block !important;
}

input:focus::-webkit-input-placeholder {
	color: transparent !important;
}

input:focus:-moz-placeholder {
	color: transparent !important;
}

input:focus::-moz-placeholder {
	color: transparent !important;
}

input:focus:-ms-input-placeholder {
	color: transparent !important;
}

input[type="password"] {
	font-family: Verdana;
	letter-spacing: 0.125em;
}

.passwordspan {
	position: relative;
}

*:not(.tree-multiselect) fieldset .passwordspan label {
	top: -1rem;
}

.passwordspan .icon {
	position: absolute;
	top: 0.1rem;
	right: 0.7rem;
	color: #999999;
	cursor: pointer;
}

.passwordspan .icon-eye {
	display: none;
}

#signin ::-webkit-input-placeholder {
	/* Chrome/Opera/Safari */
	font-family: var(--fontfam);
	letter-spacing: normal;
	font-weight: 400;
}

#signin ::-moz-placeholder {
	/* Firefox 19+ */
	font-family: var(--fontfam);
	letter-spacing: normal;
	font-weight: 400;
}

#chpw ::-webkit-input-placeholder {
	/* Chrome/Opera/Safari */
	font-family: var(--fontfam);
	letter-spacing: normal;
	font-weight: 400;
}

#chpw ::-moz-placeholder {
	/* Firefox 19+ */
	font-family: var(--fontfam);
	letter-spacing: normal;
	font-weight: 400;
}

#settingsform .knoppen {
	display: flex;
	justify-content: flex-end;
}

fieldset.knoppen {
	display: none;
	flex-direction: row;
	justify-content: space-between;
	justify-content: space-evenly;
	width: 100%;
	gap: 0.6rem 1rem;
	margin-top: 0.5rem;
	flex-wrap: wrap;
}

*:not(.tree-multiselect) fieldset label {
	font-size: 0.7rem;
	position: absolute;
	top: -0.45rem;
	left: 0.4rem;
	background: linear-gradient(180deg, var(--notwhite) 50%, #fff 50%);
	padding: 0 0.4rem;
	color: #757575;
	font-weight: 500;
}

.auxiliary fieldset {
	margin-bottom: 0.8rem;
}

button[type="submit"],
button.signout {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	border-radius: 0.5rem;
	font-size: 1rem;
	font-weight: 500;
	padding: 0.5rem 0.7rem;
	line-height: 1rem;
	color: #000000;
	background-color: var(--dvroze);
	border: 0.05rem solid var(--dvroze);
	cursor: pointer;
}

button[type="submit"]:hover,
button.signout:hover {
	color: var(--notwhite);
	background-color: var(--dvrozehover);
	border-color: var(--dvrozehover);
}

button[type="submit"] {
	padding: 0.5rem 1.7rem;
	margin-top: 0.4rem;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-direction: row;
	gap: 0.3rem;
	color: var(--notwhite);
}

#activediv {
	position: absolute;
	top: 0.6rem;
	right: 1.5rem;
	width: calc(100% - 2.7rem);
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: baseline;
}

#activediv fieldset.knoppen {
	display: flex;
	width: auto;
}

#activediv button[type="submit"] svg.icon.icon-save,
#activediv button.delete svg.icon.icon-trash-2 {
	width: 1rem;
	height: 1.2rem;
}

#activediv .button.back {
	color: var(--blauw3);
	display: flex;
	gap: 0.4rem;
	font-size: 0.67rem;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	padding: 0.2rem;
	border-radius: 0.4rem;
	cursor: pointer;
	line-height: 0em;
}

#activediv .button.back:hover {
	color: var(--blauw2);
}

#activediv .maxaantal {
	color: var(--blauw3);
	font-size: 0.8rem;
	padding: 0.2rem;
	top: -0.5rem;
}

#activediv button[type="submit"]:hover {
	background-color: var(--blauw2);
	border-color: var(--blauw2);
}

#signin button[type="submit"] {
	justify-content: center;
}

ul.signout.upgrade {
	display: flex;
	justify-content: flex-end;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: 1rem;
	width: 20rem;
}

ul.signout>li {
	background-color: var(--dvroze);
	color: var(--notwhite);
	font-size: 0.75rem;
	line-height: 1em;
	border: none;
	font-weight: 500;
	border-radius: 0.5rem;
	min-width: 8rem;
}

ul.signout>li.upgrader {
	background-color: var(--upgrade);
}

ul.signout>li.upgrader:hover {
	background-color: var(--upgradehover);
}

ul.signout>li>a {
	padding: 0.5rem 0.6rem 0.5rem 1rem;
	gap: 0.3rem;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	text-decoration: none;
	margin-top: -0.5rem;
}

ul.signout.upgrade>li>a {
	margin-top: 0rem;
}

.signout .icon-chevron,
.change .icon-chevron {
	width: 0.75rem;
	height: 0.75rem;
}

ul.signout>li:not(.upgrader):hover {
	color: #fff;
	background-color: var(--dvrozehover);
	border: none;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

ul.sub {
	display: none;
	position: absolute;
	z-index: 4;
	right: 0;
	background-color: var(--dvroze);
	width: 100%;
	top: 2rem;
	padding: 0.5rem 1.3rem 0.7rem;
	flex-direction: column;
	align-items: flex-end;
	flex-wrap: nowrap;
	gap: 0.5rem;
	border-bottom-left-radius: 0.5rem;
	border-bottom-right-radius: 0.5rem;
}

#leftmenu li.change {
	display: none;
}

ul.signout li:hover ul.sub,
#tabs li.change:hover ul.sub {
	display: flex;
}

#tabs li.change ul.sub {
	background-color: var(--offwhite);
	padding: 0.2rem 0.2rem 0.7rem;
	gap: 0.2rem;
}

#tabs li.change ul.sub li {
	width: 100%;
}

#tabs li.change ul.sub li a {
	padding: 0.2rem 0.5rem;
	text-align: left;
}

ul.sub a {
	cursor: pointer;
}

ul.signout .sub a {
	display: flex;
	text-decoration: none;
}

ul.signout .sub a:hover {
	text-decoration: underline;
	text-underline-offset: 0.2rem;
}

button.imex,
button.export,
button.png,
button.editdata,
button.delete,
button.save,
button.load,
button.snapshot {
	display: flex;
	justify-content: center;
	padding: 0.4rem 0.6rem;
	padding: 0.25rem 0.6rem;
	cursor: pointer;
	background-color: #fff;
	border: 0.05rem solid var(--blauw3);
	border-radius: 0.3rem;
	font-weight: 500;
	color: #333333;
	color: var(--blauw3);
	gap: 0.5rem;
	font-size: 0.67rem;
	align-items: center;
}

*:not(#activediv > fieldset, .account > fieldset, .company > fieldset)>button.save {
	margin-top: 1.2rem;
}

#activediv button.save {
	margin-top: 0;
}

.account button.save {
	margin-top: -0.2rem;
	margin-bottom: 1.6rem;
}

button.export,
button.png,
button.editdata,
button.delete,
button.load,
button.snapshot {
	padding: 0.25rem 0.6rem;
}

button.imex {
	padding: 0.2rem 0.6rem;
	justify-content: space-between;
	border-color: var(--offwhite);
	color: var(--offwhite);
	width: 7.1rem;
}

button.save.wait {
	width: 100%;
	flex-direction: row;
	justify-content: center;
	background-color: transparent;
	border: 0.05rem solid transparent;
}

.icon-spinner {
	animation: rotate 1.5s cubic-bezier(0.19, 0.69, 0.86, 0.6) infinite;
}

@keyframes rotate {
	to {
		transform: rotate(360deg);
	}
}

button.export:hover {
	background-color: #539e6a;
	border-color: #539e6a;
	color: var(--notwhite);
}

button.snapshot:hover {
	background-color: var(--upgradehover);
	border-color: var(--upgradehover);
	color: var(--notwhite);
}

button.png:hover,
button.load:hover {
	background-color: var(--paars);
	border-color: var(--paars);
	color: var(--notwhite);
}

button.editdata:hover {
	background-color: var(--oranje);
	border-color: var(--oranje);
	color: var(--notwhite);
}

button.delete:hover {
	background-color: var(--rood);
	border-color: var(--rood);
	color: var(--notwhite);
}

button.save:not(.wait):hover {
	background-color: var(--blauw3);
	border-color: var(--blauw3);
	color: var(--notwhite);
}

a.advanced,
a.chpw {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 0.4rem;
	padding-left: 0.5rem;
	margin-top: 0.3rem;
	font-size: 0.7rem;
	color: var(--blauw3);
	cursor: pointer;
}

a.chpw {
	margin-top: 0.5rem;
}

a.advanced:hover,
a.chpw:hover {
	text-decoration: underline;
}

form#settings>#adv_settings {
	display: none;
}

span#custom_compare {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	background-color: #ffffff;
	border: 0.05rem solid #c5cbcf;
	border-radius: 0.5rem;
	font-size: 0.7rem;
	padding: 0.7rem 0.5rem 0.7rem;
	line-height: 0.8rem;
	width: 100%;
	font-weight: 500;
	color: var(--blauw3);
	gap: 0.5rem;
}

span#custom_compare>span.label {
	font-size: 0.6rem;
	position: absolute;
	top: -0.45rem;
	left: 0.4rem;
	background: linear-gradient(180deg, var(--notwhite) 50%, #fff 50%);
	padding: 0 0.2rem;
	color: var(--blauw3);
	font-weight: 500;
}

span#custom_compare .checkcontainer {
	padding-left: 1.2rem;
	margin-bottom: 0;
	margin-left: 0;
	padding-top: 0.05rem;
}

span#custom_compare .checkmark {
	height: 0.9rem;
	width: 0.9rem;
}

span#custom_compare .checkcontainer .checkmark:after {
	left: 0.25rem;
	top: 0.05rem;
	width: 0.2rem;
	height: 0.45rem;
	border-width: 0 0.1rem 0.1rem 0;
}

ul.navi {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	/* gap: 0.05rem; */
}

.navi li {
	font-size: 0.7rem;
	border: 0.05rem solid var(--offwhite);
	color: var(--blauw3);
	border-bottom-color: var(--notwhite);
	border-top-left-radius: 0.3rem;
	border-top-right-radius: 0.3rem;
	z-index: 3;
}

.navi li a {
	text-decoration: none;
	padding: 0.4rem 1rem 0.01rem 0.8rem;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 0.4rem;
}

.navi li a span {
	height: 0.5rem;
	width: 1rem;
	border-radius: 0.4rem;
}

div.advanced {
	border: 0.05rem solid var(--offwhite);
	margin-top: -0.05rem;
	z-index: 2;
	border-radius: 0.3rem;
	border-top-left-radius: unset;
	padding: 1rem 0.6rem;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0.8rem;
}

.advanced.calculate {
	border-radius: 0.3rem;
	border-top-left-radius: unset;
	justify-content: flex-start;
	gap: 0.7rem 1.6rem;
	padding: 1rem;
}

.colorpicker {
	display: flex;
	gap: 0.4rem;
	flex-direction: row;
	align-items: center;
}

.colorpicker label {
	font-size: 0.7rem;
	color: var(--blauw3);
}

.colorpicker input {
	border: none;
	background-color: transparent;
	padding: 0;
	inline-size: 1rem;
	block-size: 1.2rem;
	cursor: pointer;
}

.calculator {
	display: grid;
	justify-items: start;
	grid-template-columns: 2rem 2rem 2rem 2rem;
	gap: 0.3rem;
}

form#settings div#formule_div {
	background-color: #dbf3e2;
	min-height: 1.7rem;
	letter-spacing: 0.1rem;
	font-size: 0.7rem;
	border: 0.05rem solid #c5cbcf;
	border-radius: 0.5rem;
	padding: 0.3rem 0.5rem;
	line-height: 1rem;
	width: 100%;
	font-weight: 500;
	color: var(--blauw3);
}

div#formule_div>span {
	animation: blinker 0.8s ease-in-out infinite;
	display: ruby;
	text-decoration: underline;
}

@keyframes blinker {
	50% {
		opacity: 0;
	}
}

.fields {
	display: grid;
	justify-items: start;
	grid-template-columns: rem;
	gap: 0.3rem;
}

.advanced.calculate>span {
	display: flex;
	justify-content: center;
	cursor: pointer;
	background-color: #fff;
	border: 0.05rem solid var(--blauw3);
	border-radius: 0.3rem;
	font-weight: 500;
	color: var(--blauw3);
	align-items: center;
	width: 1.7rem;
	height: 1.7rem;
	font-size: 1.3rem;
}

.calculator>span,
.calculator>button[type="submit"] {
	display: flex;
	justify-content: center;
	cursor: pointer;
	background-color: var(--notknop2);
	border: 0.05rem solid var(--notknop2);
	border-radius: 0.3rem;
	font-weight: 500;
	color: #444;
	align-items: center;
	width: 2rem;
	height: 2rem;
	font-size: 1.3rem;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.calculator>span.smllr,
.calculator>button[type="submit"] {
	font-size: 1rem;
}

.calculator>button[type="submit"] {
	margin-top: 0;
	width: 8.9rem;
	background-color: #fff;
	border: 0.05rem solid var(--notknop3);
	color: var(--blauw3);
	font-size: 0.9rem;
	font-weight: 400;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0.6rem;
}

.calculator>button[type="submit"]:hover {
	background-color: var(--blauw3);
	color: #fff;
	border-color: var(--blauw3);
}

.calculator>span.smllr.back {
	width: 4.3rem;
	font-size: 0.9rem;
}

.calculator>span.smllr.ac {
	font-size: 0.9rem;
}

.calculator>span:hover {
	background-color: #589fc766;
	border-color: #589fc766;
}

.icon.icon-backspace {
	width: 1.2rem;
}

.fields>span {
	display: flex;
	justify-content: center;
	cursor: pointer;
	background-color: var(--notknop2);
	border: 0.05rem solid var(--notknop2);
	border-radius: 0.3rem;
	font-weight: 500;
	color: #444;
	align-items: center;
	width: 5.3rem;
	height: 2rem;
	font-size: 1.3rem;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.fields>span.smllr {
	font-size: 0.7rem;
}

.fields>span.smllr span.color {
	position: absolute;
	top: 0;
	left: 0;
	width: 1rem;
	height: 0.5rem;
	border-top-left-radius: 0.25rem;
	border-bottom-right-radius: 0.3rem;
}

.fields>span.smllr span.dataname {
	padding-left: 0.4rem;
}

.fields>span:hover {
	background-color: #589fc766;
	border-color: #589fc766;
}

.calculator>span.reken {
	background-color: var(--oranje);
	border-color: var(--oranje);
	color: var(--notwhite);
	font-weight: 400;
}

.calculator>span.reken:hover {
	background-color: var(--upgrade);
	border-color: var(--upgrade);
}

.calculator>span.dummy {
	visibility: hidden;
}

.calculate>span.select {
	background-color: var(--blauw3);
	color: #fff;
}

fieldset.units {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
}

form#settings div.half,
.account div.tweederde {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	gap: 1rem;
}

form#settings div.row {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	gap: 0.4rem;
}

.row fieldset,
.half fieldset,
.tweederde fieldset {
	width: 100%;
}

.tweederde fieldset:first-of-type {
	width: 50%;
}

form#settings fieldset.units select {
	width: auto;
}

form#settings fieldset.units select.unit:not(.per):not(.production) {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	border-right: none;
}

form#settings fieldset.units select.unit.per {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	border-left: none;
}

form#settings fieldset.units span {
	width: 2rem;
	padding: 0.5rem;
	text-align: center;
	background-color: #ffffff;
	border-top: 0.05rem solid #c5cbcf;
	border-bottom: 0.05rem solid #c5cbcf;
	font-size: 0.7rem;
	line-height: 0.8rem;
	font-weight: 500;
	height: 2rem;
	color: var(--blauw3);
}

#settingsform .button.settings {
	display: none;
}

.signout .icon-log-out {
	width: 1em;
	height: 1em;
	margin-left: 0.7em;
}

form#settings {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 0.7rem;
	width: 22rem;
	max-width: 100%;
	margin-top: 1.5rem;
}

form.account,
form.company {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 0.7rem;
	width: 22rem;
	max-width: 100%;
	background-color: var(--notwhite);
	padding: 0.9rem 1.4rem 1.2rem;
	border-radius: 0.6rem;
	gap: 1rem;
	margin-top: 0;
}

form.account.upgrade {
	flex-direction: row;
	flex-wrap: wrap;
	width: 40rem;
}

form.account.upgrade>div {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 0.7rem;
	width: 18rem;
	max-width: 50%;
}

form.valorization,
div.valoutput {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 0;
	max-width: 35rem;
	width: 100%;
}

div.valoutput {
	display: none;
}

.valoutput .result {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 1.2rem;
}

.valoutput .result .products,
.valoutput .result .values {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: flex-end;
	gap: 0.5rem;
}

.valoutput .result .values {
	align-items: center;
}

form.valorization div,
div.valoutput>div {
	background-color: var(--notwhite);
	padding: 2.2rem 1.8rem 1rem;
}

div.valoutput>div {
	border-top-right-radius: 0.6rem;
	border-bottom-right-radius: 0.6rem;
	border-bottom-left-radius: 0.6rem;
	padding-top: 1.5rem;
	font-size: 0.8rem;
	color: var(--blauw3);
}

form.valorization div.tabbed {
	display: none;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
	/* border-top-right-radius: 0.6rem; */
}

form.valorization div.bottomform {
	border-bottom-right-radius: 0.6rem;
	border-bottom-left-radius: 0.6rem;
	padding-top: 0;
}

form.valorization div.topform {
	border-top-right-radius: 0.6rem;
	padding-top: 1.5rem;
	padding-bottom: 0;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 2rem;
	font-size: 0.8rem;
	color: var(--blauw3);
}

form.valorization button .icon {
	width: 1rem;
	height: 1.4rem;
}

button.load {
	gap: 0;
}

@keyframes bounce {

	0%,
	100% {
		top: 0;
	}

	30% {
		top: 0.2rem;
	}

	50% {
		top: 0;
	}

	80% {
		top: 0.2rem;
	}
}

form.valorization button.load .icon {
	position: relative;
	animation: bounce 3s ease-in-out infinite;
	transform: rotate(90deg);
	padding-right: 0.6rem;
	box-sizing: border-box;
	width: 1.7rem;
	margin-top: 0.5rem;
	height: 0.9rem;
	top: 0.1rem;
	left: 0.2rem;
}

.valorization ul.tabmenu,
.valoutput ul.tabmenu {
	display: flex;
	gap: 0.1rem;
}

.valorization ul.tabmenu li,
.valoutput ul.tabmenu li {
	background-color: var(--blauw4);
	font-size: 0.8rem;
	border-top-left-radius: 0.4rem;
	border-top-right-radius: 0.4rem;
}

.valorization ul.tabmenu li a,
.valoutput ul.tabmenu li a {
	text-decoration: none;
	color: var(--blauw1);
	padding: 0.4rem 0.8rem 0.3rem;
	display: block;
}

.valorization ul.tabmenu li.active,
.valoutput ul.tabmenu li.active {
	background-color: var(--notwhite);
}

.valorization ul.tabmenu li.active a,
.valoutput ul.tabmenu li.active a {
	color: var(--blauw3);
}

.valorization #prices {
	display: grid;
}

.account h2 {
	font-size: 1rem;
	color: var(--blauw3);
	font-weight: 500;
	/* margin-bottom: -0.5rem; */
}

form.account fieldset label {
	top: -0.6rem;
}

.account .icon-locked {
	color: var(--rood);
}

.account .icon-unlocked {
	color: var(--groen);
}

ul.overviewrights {
	font-size: 0.7rem;
	color: var(--blauw3);
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin-bottom: 0.6rem;
	padding-left: 0.6rem;
}

.overviewrights li {
	display: flex;
	flex-direction: row;
	gap: 0.4rem;
}

form#settings>div {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 0.8rem;
}

form.account input[type="text"],
form.company input[type="text"],
form.valorization input[type="number"],
form#euselect input[type="text"],
form#imexselect input[type="text"],
form#settings input[type="text"],
form#crosstable input[type="text"],
form.account select,
form#settings select,
form#euselect select,
form#imexselect select,
form#crosstable select {
	background-color: #ffffff;
	border: 0.05rem solid #c5cbcf;
	border-radius: 0.5rem;
	font-size: 0.7rem;
	padding: 0 0.5rem;
	line-height: 0.8rem;
	width: 100%;
	font-weight: 500;
	height: 2rem;
	color: var(--blauw3);
}

form.valorization input[type="number"] {
	text-align: right;
}

form.account select,
form#settings select,
form#euselect select,
form#imexselect select,
form#crosstable select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 2rem;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg version='1.1' id='Laag_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 24 24' style='enable-background:new 0 0 24 24;' xml:space='preserve'%3e%3cstyle type='text/css'%3e .st0%7bfill:none;stroke:%23207398;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;%7d %3c/style%3e%3cpolyline class='st0' points='6,9 12,15 18,9 '/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 0.6rem center;
	background-size: 1.2em;
}

form#euselect select {
	width: auto;
	min-width: 7rem;
}

form#imexselect select {
	width: auto;
	min-width: 7rem;
}


form.account select.active,
form.accopunt select option,
form#settings select.active,
form#settings select option,
form#euselect select.active,
form#euselect select option,
form#imexselect select.active,
form#imexselect select option,
form#crosstable select.active,
form#crosstable select option {
	color: var(--blauw3);
	font-weight: 500;
}

form#settings select option:disabled {
	color: var(--notknop2);
}

form.account input:placeholder-shown~label,
form.account select:not(.active)~label,
form#settings input:placeholder-shown~label,
form#settings select:not(.active)~label,
form#euselect input:placeholder-shown~label,
form#euselect select:not(.active)~label,
form#imexselect input:placeholder-shown~label,
form#imexselect select:not(.active)~label,
form#crosstable input:placeholder-shown~label,
form#crosstable select:not(.active)~label {
	display: none;
}

form.account fieldset.active input~label,
form#settings fieldset.active input~label,
form#crosstable fieldset.active input~label {
	display: block;
}

.account ::-webkit-input-placeholder,
#settings ::-webkit-input-placeholder,
#euselect ::-webkit-input-placeholder,
#imexselect ::-webkit-input-placeholder,
div.tree-multiselect .auxiliary ::-webkit-input-placeholder {
	/* Chrome/Opera/Safari */
	font-family: var(--fontfam);
	letter-spacing: normal;
	color: var(--blauw3);
	/* font-weight: 500; */
}

.account ::-moz-placeholder,
#settings ::-moz-placeholder,
#euselect ::-moz-placeholder,
#imexselect ::-moz-placeholder,
div.tree-multiselect .auxiliary .search::-moz-placeholder {
	/* Firefox 19+ */
	font-family: var(--fontfam);
	letter-spacing: normal;
	color: var(--blauw3);
	/* font-weight: 500; */
}

div.tree-multiselect .auxiliary .search::-webkit-input-placeholder {
	font-style: italic;
}

div.tree-multiselect .auxiliary ::-moz-placeholder {
	font-style: italic;
}

.account fieldset label,
.company fieldset label,
#settings fieldset label {
	font-size: 0.6rem;
	position: absolute;
	top: -0.4rem;
	left: 0.4rem;
	background: linear-gradient(180deg, var(--notwhite) 50%, #fff 50%);
	padding: 0 0.2rem;
	color: var(--blauw3);
	font-weight: 500;
}

.account fieldset span.customview,
.company fieldset span.customview {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-content: center;
	gap: 1.2rem;
}

.account fieldset span.customview label.checkcontainer,
.company fieldset span.customview label.checkcontainer {
	position: relative;
	display: block;
	left: unset;
	top: unset;
	margin: 0.5rem 0 0.5rem 0;
}

form.account.customviews,
form.company.customviews {
	gap: 0;
	width: auto;
}

form.company.customviews {
	margin-top: -1.6rem;
}

span.customview_settings {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 4rem;
}

.account.customviews h2 {
	margin-bottom: 0.3rem;
}

.customviews fieldset:not(.save_button) {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
}

.customviews fieldset.save_button {
	margin-top: 1.2rem;
}

.customviews fieldset.save_button button.save {
	margin: 0;
}

.account p,
.company p {
	font-size: 0.8rem;
	color: var(--blauw3);
	font-weight: 500;
	margin-top: 0.1rem;
}

.account h5,
.company h5 {
	font-size: 1rem;
	color: var(--blauw3);
	margin-bottom: 0.3rem;
}

.account hr {
	border: 0.05rem solid var(--blauw3);
	border-bottom: none;
	width: 100%;
}

form.account fieldset span.customview label:not(.checkcontainer),
form.company fieldset span.customview label:not(.checkcontainer) {
	left: 1.9rem;
	top: -0.4rem;
}

div.insightspreferences {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.4rem 0;
}

span.insightpref {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.insightpref input[type="checkbox"] {
	appearance: checkbox;
	accent-color: var(--groen);
	width: 0.8rem;
	height: 0.8rem;
}

form.account fieldset .insightpref label {
	position: relative;
	top: unset;
	left: unset;
	background: unset;
	font-size: 0.7rem;
}

form#euselect {
	background-color: var(--notwhite);
	padding: 1.5rem;
	border-radius: 0.5rem;
	display: flex;
	gap: 0.8rem 0.4rem;
	flex-direction: column;
	flex-wrap: nowrap;
	padding-top: 4.5rem;
}

form#imexselect {
	background-color: var(--notwhite);
	padding: 1.5rem;
	border-radius: 0.5rem;
	display: flex;
	gap: 0.8rem 0.4rem;
	flex-direction: column;
	flex-wrap: nowrap;
	padding-top: 4.5rem;
}

form#imexselect button.imex:hover,
form#imexselect button.imex.active,
form#settings.imex button.imex:hover,
form#settings.imex button.imex.active {
	background-color: var(--blauw3);
	color: #fff;
	border-color: var(--blauw3);
}

form#euselect>div#data {
	display: flex;
	gap: 0.8rem 0.4rem;
	flex-direction: row;
	flex-wrap: wrap;
	visibility: hidden;
}

form#imexselect>div#data {
	display: flex;
	gap: 0.8rem 0.4rem;
	flex-direction: row;
	flex-wrap: wrap;
	display: none;
}

form#euselect button.imex:hover,
form#euselect button.imex.active {
	background-color: var(--blauw3);
	color: #fff;
	border-color: var(--blauw3);
}

form#euselect fieldset.partner.hidden {
	visibility: hidden;
}

form#imexselect div.tree-multiselect>div.selected,
form#imexselect div.tree-multiselect>div.selections,
form.imex div.tree-multiselect>div.selected,
form.imex div.tree-multiselect>div.selections {
	max-width: 30rem;
	padding: 0.1rem 1rem 0 0;
	padding: 0.1rem 0rem 0 0;
}

form#imexselect div.tree-multiselect div.title>span.collapse-section {
	margin: 0 0.1rem 0 0.2rem;
	width: 0.5rem;
}

form#imexselect div.tree-multiselect div.section>div.section {
	padding-left: .5rem;
}

form#imexselect div.tree-multiselect div.section>div.item {
	padding-left: 1.4rem;
}

form#imexselect input[type="text"] {
	max-width: 29rem;
}

#settingsform.imex {
	width: auto;
	max-width: unset;
}

form#settings.imex {
	width: 41rem;
}

form#settings.imex #activediv {
	top: -2.9rem;
	right: unset;
	width: 100%;
	align-items: center;
}

form div#countrytab {
	gap: 0.7rem;
}

form div#importanttab {
	display: none;
	flex-direction: column;
	color: var(--blauw2);
}

div#importanttab>span {
	border: 0.05rem solid var(--offwhite);
	z-index: 2;
	border-radius: 0.3rem;
	padding: 0.7rem 1rem 0;
	border-top-left-radius: unset;
	border-top-right-radius: unset;
	border-top: unset;
	max-width: 30rem;
}

.headbar {
	background: var(--blauw2);
	color: #ffffff;
	display: flex;
	height: 2.5rem;
	padding: 1.7rem 1rem 1.3rem;
	margin-top: .6rem;
	border-top-left-radius: 0.3rem;
	border-top-right-radius: 0.3rem;
	max-width: 30rem;
}

.headbar span {
	font-size: 0.85rem;
	display: flex;
	gap: 0.75em;
	align-items: center;
}

.headbar span .icon.bullmi {
	height: 2.1rem;
	width: 2.1rem;
}

.headbar span .icon.logo-dca-mi {
	height: 0.95rem;
	width: 4.32232rem;
}

div#importanttab p,
div#importanttab li {
	font-size: 0.8rem;
	line-height: 1.7em;
}

div#importanttab ul {
	list-style-type: disc;
	margin-left: 2.3em;
}

div#importanttab h3 {
	margin-bottom: 0.4rem;
}

div#importanttab p,
div#importanttab ul {
	margin-bottom: 0.7rem;
}

div#tabbladen {
	background-color: var(--blauw2);
	margin-left: -1.5rem;
	width: calc(100% + 3rem);
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-end;
	padding-top: 1rem;
	gap: 0.2rem;
}

#tabbladen a {
	background-color: var(--offwhite);
	padding: 0.5rem 1rem 0.3rem;
	font-size: 0.75rem;
	color: var(--blauw4);
	text-decoration: none;
	border-top-left-radius: 0.25rem;
	border-top-right-radius: 0.25rem;
	gap: 0.4rem;
	display: flex;
}

#tabbladen a.actief {
	background-color: var(--notwhite);
	color: var(--blauw3);
}

div#countrytab {
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-start;
	display: none;
}

#producttab div.tree-multiselect,
#countrytab div.tree-multiselect {
	/* width: 18rem; */
	min-height: unset;
}

#countrytab div.tree-multiselect>div.selections {
	min-width: unset;
}

#countrytab div.tree-multiselect>div.selections div.item label {
	max-width: 12rem;
}

#countrytab .tradeflow {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding-top: 3rem;
	width: 8rem;
}

form.imex #countrytab div.tree-multiselect>div.selections {
	padding-left: 0;
	padding-right: 0;
}

button.hidden,
fieldset.hidden {
	visibility: hidden;
}

.ui-autocomplete {
	background-color: var(--notwhite);
	font-size: 0.7rem;
	color: var(--blauw3);
	max-height: 12rem;
	max-width: 12rem;
	overflow: hidden auto;
	border: 0.05rem solid var(--offwhite);
	border-top: none;
	position: absolute;
}

div[role="status"] {
	display: none;
}

.ui-autocomplete li {
	cursor: pointer;
	padding: 0.4rem 0 0.3rem 0.7rem;
}

.ui-autocomplete li:hover {
	background-color: var(--blauw3);
	color: #fff;
}

button.imp svg.icon.icon-chevrons {
	rotate: 180deg;
}

div.assessment {
	width: 100%;
	max-width: 36rem;
	color: var(--notwhite);
	font-weight: 300;
	font-size: 0.85rem;
}

.assessment p {
	font-size: 0.8rem;
	max-width: 35rem;
}

.assessment p.copy {
	margin-top: 1.3rem;
	font-size: 0.7rem;
	font-style: italic;
}

.assessment p.specs {
	line-height: 1.6em;
}

.chartwrap.pork-cuts {
	margin-top: -4rem;
	width: 100% !important;
}

ul.pdflist {
	margin-top: 0.3rem;
	padding-left: 1.5rem;
	list-style-type: disc;
	font-size: 0.8rem;
}

.pdflist a {
	line-height: 1.6em;
	text-decoration: none;
	text-underline-offset: 0.2rem;
}

.pdflist a:hover {
	text-decoration: underline;
}

.assessmentchart {
	width: calc(100% - 38rem);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2rem;
	min-width: 24.1rem;
}

.assessment.bigchart {
	display: none;
}

.assessmentchart.bigchart {
	width: 75%;
	max-width: 55rem;
}

.assessmentchart.bigchart .chartwrap.big {
	width: 100%;
}

table.markets,
table.navigatie {
	font-size: 0.8rem;
	margin: 1.4rem 0 0.5rem;
	width: 100% !important;
}

table.navigatie tr td {
	padding: 0 0.6rem;
}

table.navigatie tr td:nth-of-type(2) {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
}

table.navigatie tr td button {
	border: none;
	outline: none;
	background: none;
	cursor: pointer;
	color: var(--blauw4);
	padding: 0;
	font-family: inherit;
	font-size: inherit;
	font-weight: 300;
	padding: 0.4rem 0.8rem;
}

table.navigatie {
	margin: 0 0 1.5rem;
}

table.navigatie tr td button:hover {
	background-color: var(--blauw4);
	border-color: var(--blauw4);
	font-weight: 400;
	color: var(--blauw1);
}

table.markets tr:first-of-type {
	background-color: var(--offwhite);
	color: var(--blauw1);
	font-weight: 500;
}

table.markets tr:first-of-type td {
	border: none;
}

table.markets tr:first-of-type td:first-of-type {
	border-top-left-radius: 0.4rem;
}

table.markets tr:first-of-type td:last-of-type {
	border-top-right-radius: 0.4rem;
}

table.markets tr td:nth-of-type(1) {
	padding: 0.2rem 0.7rem;
	width: 5.5rem;
	white-space: nowrap;
}

table.markets tr td:nth-of-type(2),
table.markets tr td:nth-of-type(3),
table.markets tr td:nth-of-type(4),
table.markets tr td:nth-of-type(5),
table.markets tr td:nth-of-type(6),
table.markets tr td:nth-of-type(7),
table.markets tr td:nth-of-type(8) {
	text-align: center;
}

/* table.markets tr td:nth-of-type(4) {
  width: 5.6rem;
} */

table.markets tr td:nth-of-type(5) {
	width: 6.9rem;
}

table.markets tr td {
	padding: 0.55rem 0;
	border-bottom: 0.05rem solid var(--offwhite);
}

table.markets span.diff {
	background-color: #6a91a6;
	padding: 0.1rem 0.25rem;
	border-radius: 0.2rem;
	font-size: 0.65rem;
	margin-left: 0.5rem;
	min-width: 1.4rem;
	color: var(--blauw1);
	font-weight: 600;
}

table.markets span.diff.groen {
	background-color: #008000bf;
	color: var(--notwhite);
	font-weight: 300;
}

table.markets span.diff.rood {
	background-color: #ff17178a;
	color: var(--notwhite);
	font-weight: 300;
}

h3.benchmark {
	font-weight: 500;
	font-size: 1rem;
	margin: 0 0 0.9rem;
	line-height: 1.3rem;
	color: var(--notwhite);
	text-shadow: 0.1rem 0.1rem 0.2rem var(--blauw1);
}

h3.benchmark span {
	display: block;
	font-weight: 700;
	font-size: 1.4rem;
	margin-top: 0.8rem;
	color: var(--blauw4);
}

.chartwrap .tablewrap {
	padding: 0 0rem 1.8rem;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: space-between;
	height: 100%;
	width: calc(100% + 0.3rem);
}

.chartwrap.big .tablewrap {
	height: auto;
}

.tablewrap h2 {
	text-align: center;
	font-size: 0.85rem;
	margin-top: 0.2rem;
	font-weight: 600;
	margin-bottom: 0.2rem;
	padding: 0 2rem;
}

.maxi .tablewrap h2 {
	font-size: 0.96rem;
}

.chartwrap .info {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	/* gap: 1.3rem; */
	font-size: 0.75rem;
	padding: 0.3rem 1.25rem 0.1rem 0.6rem;
	height: 100%;
	align-items: center;
}

.chartwrap .tr {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: flex-start;
	width: 100%;
}

.chartwrap.big .info {
	padding-top: 0.8rem;
	padding-bottom: 0.6rem;
}

.chartwrap .meta {
	display: flex;
	justify-content: space-between;
	flex-direction: row;
	flex-wrap: nowrap;
	width: 70%;
	font-size: 0.6rem;
	color: #999999;
	font-weight: 400;
}

.chartwrap .prijs {
	margin-top: -0.2rem;
	color: #6f6f6f;
	font-weight: 600;
	font-size: 0.9rem;
	width: 5.6rem;
	text-align: right;
}

.chartwrap .prijs.green,
.chartwrap .diff.green {
	color: #00aa00;
}

.chartwrap .prijs.red,
.chartwrap .diff.red {
	color: #d60000;
}

.prijs.vantot {
	font-size: 0.7rem;
}

.chartwrap .diff {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: flex-end;
	font-size: 0.6rem;
	width: 4rem;
	margin-top: -0.2rem;
}

.chartwrap .naam {
	font-weight: 600;
}

.chartwrap .naam,
.chartwrap .diff span {
	line-height: 1em;
}

.diff span.perc {
	margin-right: -0.5rem;
}

.tablewrap .info:nth-child(even) {
	background-color: #f0f1f1;
}

.chartwrap:not(.big) .tablewrap .info:nth-child(n + 8) {
	display: none;
}

#paywall {
	display: flex;
	margin-top: 20vh;
	flex-direction: row;
	justify-content: center;
	width: 100%;
	color: var(--notwhite);
	font-weight: 300;
}

h1 {
	font-weight: 500;
	font-size: 1rem;
	margin: 0 0 0.9rem;
	line-height: 1.3rem;
	color: var(--notwhite);
	text-shadow: 0.1rem 0.1rem 0.2rem var(--blauw1);
	width: 100%;
}

/* Futures */
div.futures {
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: flex-start;
	align-items: stretch;
	gap: 0.6rem;
	justify-content: flex-start;
	font-size: 0.7rem;
	color: var(--notwhite);
	font-weight: 300;
}

.beurzen,
.tmkoersen {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-content: flex-start;
	justify-content: flex-start;
	width: 100%;
	gap: 1.5rem;
	margin-bottom: 1rem;
}

.beurzen a {
	display: block;
	width: auto;
	text-align: center;
	color: var(--notwhite);
	padding: 0.3rem 0.9rem;
	background-color: #1f5775;
	border-radius: 0.4rem;
	font-size: 0.85rem;
	text-decoration: none;
	font-weight: 400;
}

.beurzen a:hover,
.beurzen a.actief {
	color: #fff;
	background-color: var(--blauw3);
}

.tmkoersen a {
	padding: 0 0.2rem;
	text-decoration: none;
	margin-bottom: 0.2rem;
	font-size: 0.75rem;
	font-weight: 400;
}

.tmkoersen a:hover,
.tmkoersen a.actief {
	border-bottom: 0.1rem solid #6a91a6;
}

.tmtabel {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-start;
	width: 100%;
}

.tmtabel .scrollwrap>div>div,
.tmtabel>.contract>div {
	border-top: 1px solid #3b9ed442;
	padding: 0 0;
	width: 100%;
	height: 2.2rem;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
}

.tmtabel .scrollwrap>div>div:first-child,
.tmtabel .contract>div:first-child {
	font-weight: 400;
	border: none;
	font-size: 0.75rem;
}

.tmtabel .scrollwrap>div>div.dubbel {
	justify-content: center;
	gap: 0.6rem;
	padding: 0 0 0 1rem;
}

.tmtabel .scrollwrap>div>div.dubbel:not(.groen, .rood) span {
	visibility: hidden;
}

.tmtabel>.contract {
	width: 3.6rem;
}

.tmtabel .scrollwrap {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	width: 100%;
}

.tmtabel .scrollwrap>div {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
}

.tmtabel .scrollwrap>div>div {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
}

.tmtabel div>span {
	transition: background-color 0.5s ease;
	white-space: nowrap;
}

.tmtabel .groen span {
	background-color: #008000bf;
	padding: 0.1rem 0.25rem;
	border-radius: 0.2rem;
}

.tmtabel .rood span {
	background-color: #ff17178a;
	padding: 0.1rem 0.25rem;
	border-radius: 0.2rem;
}

/* Weekly overview */
h1.weekly {
	margin-bottom: -0.9rem;
}

#section-to-print {
	display: flex;
	flex-direction: row;
	gap: 1.3rem;
	flex-wrap: wrap;
}

.page {
	/* margin: 0cm auto; */
	border-radius: 0.5rem;
	background-color: var(--notwhite);
	width: 21cm;
	min-height: 29.7cm;
	height: 29.7cm;
	padding: 0.4cm 0.3cm;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-content: flex-start;
	gap: 0.6cm 0.3cm;
}

.page .chartwrap,
.container.maxi .page .chartwrap {
	width: 10cm;
	border: 0.05rem solid var(--offwhite);
}

.page .kwart,
.container.maxi .page .kwart {
	width: 4.3cm;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.6cm;
}

.page .chartwrap.driekwart,
.container.maxi .page .chartwrap.driekwart {
	width: 15.7cm;
}

.chartwrap .dataview:before {
	padding-top: 55%;
}

.dataview.chart2:before .chartwrap.driekwart .dataview:before {
	padding-top: 55%;
}

.page .chartwrap.heel,
.container.maxi .page .chartwrap.heel {
	width: 20.4cm;
}

.chartwrap.heel .dataview:before {
	padding-top: 55%;
}

.page .chartwrap.rightmargin,
.container.maxi .page .chartwrap.rightmargin {
	margin-right: 4cm;
}

.page .name {
	width: 100%;
	padding: 0.15rem 0.3rem;
	height: 1.3rem;
	background-color: var(--blauw3);
	box-sizing: border-box;
	color: #fff;
	text-align: center;
	line-height: 1rem;
	font-size: 0.7rem;
	font-weight: 400;
}

.page .price {
	width: 70%;
	float: left;
	font-size: 1.4rem;
	line-height: 1.3rem;
	color: #797979;
	box-sizing: border-box;
}

.page .price.vantot {
	font-size: 1.2rem;
}

.info .diff {
	color: #797979;
}

.page .price.red,
.diff.red {
	color: #d60000;
}

div.price.green,
.diff.green {
	color: #00aa00;
}

.actueel {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
}

.actueel .info {
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	font-size: 0.6rem;
	padding: 0.25rem 0.35rem 0;
	gap: 1.4rem;
}

.actueel .info2 {
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	font-size: 0.65rem;
	padding: 0 0.35rem 0.25rem;
	font-weight: 400;
	color: #999999;
}

.chartwrap.text {
	width: 100%;
	border: none;
	padding: 0 1rem;
	font-size: 0.85rem;
	font-weight: 400;
}

.chartwrap.text {
	width: 10cm;
}

.page .chartwrap.text,
.container.maxi .page .chartwrap.text {
	border: none;
}

/* Help */

.help {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 3.7rem;
	margin-top: 1rem;
	color: var(--blauw1);
}

.help>div {
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
}

.help h3 {
	margin-top: 0;
	text-align: center;
}

.help .download,
.help .getintouch {
	background-color: #ffffff;
	padding: 1.8rem 2rem 2rem;
	box-shadow: 0 0.15rem 0.3rem #00000029;
	border-radius: 0.3rem;
	max-width: calc((50rem - 3.7rem) / 2);
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
	min-height: 8.5rem;
	font-size: 0.8rem;
}

.help .download p,
.help .getintouch p {
	font-size: 0.837rem;
}

.help a.button {
	padding: 1rem 1.5rem;
	background-color: var(--dvroze);
	color: var(--notwhite);
	box-shadow: 0 0.2rem 0.15rem 0 #00000044;
	font-weight: var(--semibold);
	border-radius: 0.4rem;
	text-decoration: none;
	font-size: 1rem;
	display: flex;
	justify-content: center;
	border: none;
	cursor: pointer;
}

.help a.button.blauw {
	background-color: var(--blauw1);
}

a.button.trial {
	padding: 1rem 1.5rem;
	background-color: var(--dvroze);
	color: var(--notwhite);
	box-shadow: 0 0.2rem 0.15rem 0 #00000044;
	font-weight: var(--semibold);
	border-radius: 0.4rem;
	text-decoration: none;
	font-size: 0.8375rem;
	display: flex;
	justify-content: center;
	border: none;
	cursor: pointer;
}

a.button:hover {
	background-color: var(--dvrozehover);
}

a.button.blauw:hover {
	background-color: #003a57;
}

/* Technical analysis */
.ta_wrapper .assessment .bloktitel {
	width: 100%;
	padding: 0.6rem;
	font-weight: 400;
	border-radius: 0.4rem 0.4rem 0 0;
}

.ta_wrapper .bloktitel small {
	float: right;
	font-size: 0.6rem;
	line-height: inherit;
}

.ta_wrapper .Negative {
	background: #c50011;
}

.ta_wrapper .Positive {
	background: #209725;
}

.ta_wrapper .Neutral {
	background: #df7a3d;
}

.ta_wrapper .assessment .img_wrap {
	border-radius: 0 0 0.4rem 0.4rem;
	background: #ffffff;
	width: 100%;
	padding: 1rem;
}

.ta_wrapper .assessment .img_wrap img {
	max-width: 100%;
}

.ta_wrapper .assessment div.toelichting {
	padding: 1rem 0 0 0;
	font-size: 0.8rem;
}

.ta_wrapper h3 {
	margin-bottom: 0.2rem;
	font-weight: 600;
}

.ta_wrapper .assessment div.toelichting p {
	margin-top: 1rem;
	margin-bottom: 1rem;
	line-height: 1.1rem;
	max-width: 90%;
}

.ta_wrapper .assessment div.analyse {
	padding-top: 2rem;
}

.ta_wrapper table.markets a {
	text-decoration: none;
}

.ta_wrapper table.markets select.active {
	border-radius: 0.2rem;
	color: var(--blauw3);
	font-weight: 500;
	margin: 0 0.5rem 0 0;
	font-size: 0.7rem;
	padding: 0.1rem;
}

.ta_wrapper table.markets tr.narrow td {
	padding: 0.35rem;
	font-size: 0.65rem;
}

table.markets td.colspan {
	background-color: var(--blauw4);
	color: var(--blauw1);
}

.ta_wrapper table.markets tr.narrow td:nth-of-type(1) {
	padding: 0.2rem 1.2rem;
	font-weight: 400;
}

.ta_wrapper div.assessment {
	max-width: 44rem;
}

.ta_wrapper div.assessmentchart {
	width: calc(100% - 46rem);
	max-width: 25rem;
	min-width: 15rem;
}

.ta_wrapper table.markets tr td:nth-of-type(1) {
	font-weight: 500;
}

.futures.ta_wrapper {
	gap: 2rem;
}

.beurzen.ta {
	gap: 1rem;
}

.tmkoersen.ta {
	margin-bottom: 0.4rem;
}

/* INSIGHTS */
div#content.insights {
	background-color: var(--blauw1);
	flex-wrap: nowrap;
}

div#content.insights>#container {
	min-height: 100%;
	width: 100%;
	display: flex;
	color: white;
	flex-direction: row;
	flex-wrap: nowrap;
	padding: 0;
	gap: 0;
	background-color: var(--blauw2);
}

#newslist {
	width: 37%;
	padding: 0.5rem 0.2rem 0.5rem 0.2rem;
	height: calc(100vh - 3.5rem);
	background-color: var(--blauw1);
}

ul#list {
	overflow-y: auto;
	height: calc(100vh - 6.6rem);
	padding-right: 0.3rem;
	margin-right: 0rem;
}

ul#list::-webkit-scrollbar {
	width: .4rem;
}

ul#list::-webkit-scrollbar-track {
	border-radius: .2rem;
	margin-left: 0.6rem;
}

ul#list::-webkit-scrollbar-thumb {
	background: var(--blauw2);
	border-radius: .2rem;
}

ul#list::-webkit-scrollbar-thumb:hover {
	background: var(--blauw3);
}

ul#list li {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0.5rem;
	padding: 1rem 0.4rem;
	border-bottom: .05rem solid var(--offwhite);
	font-weight: 300;
	color: var(--offwhite);
	cursor: pointer;
}

ul#list li:hover {
	background-color: var(--blauw2);
}

ul#list li.active {
	background-color: var(--blauw3);
}

.icon-newsbox,
.icon-alert,
.icon-whitepaper {
	padding: 0.15rem;
}

ul#list h4 {
	font-size: 0.825rem;
	color: #fff;
}

ul#list li.whitepaper.new h4 {
	color: var(--blauw3);
}

ul#list li.whitepaper.new:hover h4 {
	color: var(--blauw4);
}

ul#list li.new {
	/* font-style: italic; */
	color: #fff;
}

ul#list li.new h4 {
	font-weight: 700;
	font-size: 0.85rem;
}

ul#list li.new h5,
ul#list li.new span {
	font-weight: 500;
	font-size: .7rem;
}

ul#list h5 {
	font-size: .675rem;
	/* font-style: italic; */
}

ul#list span {
	font-size: .675rem;
	display: block;
	margin-top: 0.5rem;
}

.h3wrap {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: nowrap;
	gap: 1rem;
}

.h3wrap a {
	text-decoration: none;
	font-size: .7em;
	margin-top: 0.2rem;
	font-weight: 300;
}

#newslist h3 {
	border-bottom: solid 0.1rem var(--dvroze);
	padding: 0 0.2rem;
	text-decoration: none;
	margin-bottom: 0.2rem;
	font-size: 0.85rem;
	display: inline-block;
	margin-bottom: 0.7rem;
	margin-left: 0.7rem;
}

.newsitem {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 0.1rem;
}

#preview {
	width: 63%;
	height: calc(100vh - 4.8rem);
	background-color: var(--blauw2);
	padding: 1.2rem 1.2rem 1.5rem 2.7rem;
	padding: 0rem 1rem 0.7rem 2.7rem;
	margin: 1rem 0.2rem 0rem 0;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 1rem;
	overflow-y: auto;
}

#preview.hide,
#newslist.hide {
	display: none;
}

#preview::-webkit-scrollbar,
#newwindow::-webkit-scrollbar {
	width: .4rem;
}

#preview::-webkit-scrollbar-track,
#newwindow::-webkit-scrollbar-track {
	border-radius: .2rem;
	margin-left: .6rem;
}

#preview::-webkit-scrollbar-thumb,
#newwindow::-webkit-scrollbar-thumb {
	background: var(--blauw1);
	border-radius: .2rem;
}

#preview::-webkit-scrollbar-thumb:hover,
#newwindow::-webkit-scrollbar-thumb:hover {
	background: var(--blauw3);
}

#preview .default {
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: 3rem;
}

.default .icon {
	width: 4rem;
	height: 4rem;
}

.default span {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	font-weight: 300;
	gap: 0.3rem;
	font-size: 0.75rem;
	color: #ffffff69;
}

#preview h1,
#newwindow h1 {
	text-shadow: unset;
	font-size: 1.6rem;
	line-height: 1.9rem;
	margin-bottom: 0;
	font-weight: 600;
}

#preview div.new_window,
#newwindow div.new_window {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	font-size: 0.75rem;
	font-weight: 300;
	width: 100%;
}

#newwindow div.new_window {
	justify-content: flex-end;
	position: sticky;
	margin-left: 3.5rem;
	top: 0;
	left: 0;
}

#newwindow div.new_window .icon-close {
	width: 1.3rem;
	height: 1.3rem;
	border-radius: 50%;
	color: var(--offwhite);
}

div.new_window .icon-close:hover {
	background-color: #cd0000;
}

a.back svg.icon.icon-chevron {
	transform: rotate(90deg);
}

div.new_window a.back {
	gap: 0.2em;
	visibility: hidden;
}

div.new_window a {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.7em;
	cursor: pointer;
}

div.new_window a .icon {
	width: 0.8rem;
	height: 1.1rem;
}

.article {
	padding-right: 1.5rem;
	max-width: 43rem;
	font-size: 0.8rem;
	font-weight: 300;
}

.article.meta {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	font-size: 0.7rem;
	gap: 1rem;
	font-weight: 300;
	width: 100%;
	border-bottom: .05rem solid var(--offwhite);
	padding-bottom: 1rem;
}

.meta span.border {
	border-right: .1rem solid var(--dvroze);
	height: 1rem;
}

.article p,
.article td {
	font-weight: 300;
	line-height: 1.5em;
	font-size: 0.8rem;
}

.article p>span {
	font-weight: 300;
	font-size: 0.8rem !important;
	background-color: transparent !important;
}

.article td {
	width: 100%;
	text-align: center;
	padding: 0.3rem 0;
	font-size: 0.7rem;
}

.article p {
	margin-bottom: 1.1em;
}

.article p:first-of-type {
	font-weight: 600;
}

.article a {
	color: #fff !important;
	text-underline-offset: 0.15rem;
}

.article p img {
	max-width: 100% !important;
	background-color: #fff;
}

.article ol,
.article ul {
	list-style: decimal outside;
	padding-left: 2.3rem;
	margin-bottom: 1.1em;
}

.article ul {
	list-style: disc outside;
}

.article ol li,
.article ul li {
	margin-left: -1rem;
	padding-left: 0.15rem;
	font-weight: 300;
	line-height: 1.5em;
	font-size: 0.8rem;
}

.article li::marker {
	font-weight: 600;
	font-size: 0.8em;
}

.article table.table,
.article table.lijst {
	width: 100%;
	border-bottom: 1px solid #ffffff66;
	max-width: 100%;
	margin-bottom: 1.1em
}

.article table.table tr,
.article table.lijst tr {
	border: 1px solid #ffffff66;
	border-bottom: none;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
}

.article table.table tr td:first-of-type,
.article table.lijst tr td:first-of-type {
	padding-left: 0.3rem;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	/* max-width: 4rem; */
}

.article table.table tr td:first-of-type,
.article table.lijst tr td:first-of-type {
	padding-left: 0.3rem;
	text-align: left;
}

.article table.table tr td:last-of-type,
.article table.lijst tr td:last-of-type {
	padding-right: 0.3rem;
}

.article table.table tr:first-of-type td:not(:first-of-type),
.article table.lijst tr:first-of-type td:not(:first-of-type) {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
}

.article .item_cat {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: 0.1rem;
}

.item_cat .icon {
	padding: 0 0.15rem 0.15rem;
}

.item_cat .icon-newsbox,
.item_cat .icon-alert {
	padding: 0 0.25rem 0.25rem;
}

.article figure.image {
	margin: 0 0 1rem;
	max-width: 100%;
	width: auto;
	height: auto;
}

.article figure.image img {
	width: 100%;
	height: auto;
	max-width: 33rem;
}

.article figure.image figcaption {
	width: 100%;
	max-width: 33rem;
	font-size: 0.7rem;
	font-style: italic;
	padding: 0.2rem 0 0.3rem 0.6rem;
}

/* Dataview grafieken */
.dataviewwrap:not(.dv_tabel) {
	border: 1px solid var(--notwhite);
	box-sizing: border-box;
	padding: 0 0 0.2rem;
	background: var(--notwhite);
	margin-bottom: 1.5em;
	max-width: 40rem;
	/* max-height: 23rem; */
	margin-top: 1.7em;
}

.dataviewwrap.dcamish {
	padding-top: 0.9rem;
}

.dataview {
	font-family: "Fira Sans Condensed";
	font-weight: 300;
	display: block;
	position: relative;
	margin: 0 2%;
}

.dataview div.chartdiv {
	display: block;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

.dataviewwrap p {
	font-size: 0.65rem;
	color: #3b3b3b;
	font-weight: 300 !important;
	margin-left: 2rem;
	margin-bottom: 0.4rem;
	line-height: 1.2rem;
}

#mask {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	background-color: #211d29bd;
	display: none;
	z-index: 100;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-start;
	z-index: 90;
	color: #fff;
	padding: 1rem 0;
}

#mask.show {
	display: flex;
}

div#newwindow {
	background-color: transparent;
	padding: 1rem 5rem 1rem;
	overflow-y: auto;
	overflow-x: hidden;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 1rem;
	z-index: 110;
}

.copyright {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	width: 100%;
	align-items: center;
	gap: 0.9em;
	font-size: .7rem;
	margin-top: 2rem;
	margin-bottom: 1rem;
}

.copyright span.logo {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 0.34rem;
}

.copyright .icon.bullmi {
	height: 1.25rem;
	width: 1.25rem;
	margin-top: -0.15rem;
}

.copyright .icon.dcami {
	height: 0.75rem;
	width: calc(0.75 * 12.060546875rem);
	margin-top: 0.15rem;
}

a.button.helpvalo,
a.button.helpmpc {
	background-color: var(--dvroze);
	color: var(--notwhite);
	font-weight: var(--semibold);
	border-radius: 50%;
	text-decoration: none;
	display: flex;
	justify-content: center;
	border: none;
	cursor: pointer;
	width: auto;
	padding: 0.05rem;
	margin-left: auto;
	font-size: 0.6rem;
}

.container.maxi nav ul#iconmenu li {
	justify-content: center;
}

/* TRANSLATE */
#elf_trans {
	margin-top: 0.45rem;
}

.es-embed-root {
	align-items: start !important;
}

.container.maxi .es-embed-root {
	align-items: center !important;
}

.es-embed-root>[class*="background__Container"] {
	flex-wrap: nowrap;
}

.container.maxi [class*="name__NameContainer"],
.container.maxi [class*="name__NameContainer"]+[class*="Icon__IconContainer"] {
	display: none;
}

.container.maxi [class*="dropdown__Container"] [class*="name__NameContainer"],
.container.maxi [class*="dropdown__Container"] [class*="Icon__IconContainer"] {
	display: block;
}

.container [class*="dropdown__Container"] [class*="name__NameContainer"] {
	font-size: 0.75rem;
}

.container [class*="background__Container"]>div>[class*="name__NameContainer"] {
	font-size: 0.9rem;
	color: var(--offwhite);
	text-decoration: none !important;
	font-weight: 600;
}

.container [class*="background__Container"]>div:hover>[class*="name__NameContainer"] {
	color: var(--notwhite);
}

.container [class*="background__Container"]>div>[class*="name__NameContainer"]+[class*="Icon__IconContainer"]>div>svg {
	fill: var(--offwhite);
}

.container:not(.maxi) [class*="background__Container"]:after {
	content: "beta";
	font-size: 0.5rem;
	color: #fff;
	background: var(--dvroze);
	height: 0.6rem;
	line-height: 0.6rem;
	padding: 0.2rem;
	border-radius: 0.2rem;
	display: inline-flex;
}

[class*="background__Container"]+div,
[class*="background__Container"]+a+div {
	position: unset;
}

[class*="background__Container"] {
	padding: 0 0.2rem !important;
	width: max-content;
}

div[role=listbox] {
	width: max-content;
	margin-left: 0.6rem;
}

div[role=listbox]>div[role=option] {
	padding: 0.2rem 0.8rem;
}

div[class*="Popout__PopoutContent"] {
	width: 100%;
	margin-top: -0.25rem;
}

div.maxi #language_disclaimer {
	transition-delay: 250ms;
	opacity: 0;
	transition: opacity 1s ease-in-out 2s;
	-o-transition: opacity 1s ease-in-out 2s;
	/* for compatibility with older versions of Opera */
	-ms-transition: opacity 1s ease-in-out 2s;
	/* for compatibility with IE and Edge */
	-moz-transition: opacity 1s ease-in-out 2s;
	/* for compatibility with Firefox */
	-webkit-transition: opacity 1s ease-in-out 2s;
	/* for compatibility with Chrome, Safari... */

	position: absolute;
	left: 2rem;
	width: 10rem;
	bottom: 50%;
	pointer-events: none;
}

#language_disclaimer {
	background-color: var(--dvroze);
	border-radius: 0.3rem;
	padding: 0.4rem 0.5rem;
	font-size: 0.55rem;
	font-weight: 100;
	color: var(--notwhite);
	margin-top: 0.9rem;
	z-index: 99999;
	display: none;
}

#language_disclaimer:before {
	content: "Disclaimer: The content on this webpage has been translated from English into your preferred language. No guarantees are made regarding the accuracy of the translation.";
}

#pdfview {
	width: 100%;
	height: 100%;
}

#newwindow iframe#pdfview {
	width: 80vw;
	height: 100vh;
	margin-top: -3rem;
	max-width: 56rem;
}

ul.explanation {
	color: var(--notwhite);
	font-size: 0.7rem;
	font-weight: 300;
	position: fixed;
	width: calc(100% - 64rem);
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 0.3rem;
}

ul.explanation li.title {
	font-weight: bold;
	font-size: 0.8rem;
}

ul.explanation li:not(.title) {
	padding-left: 0.6rem;
}

ul.explanation li b {
	font-weight: 500;
}

#newslist ul#list li.active {
	cursor: default;
}

.grafiekerror {
	font-size: 0.7rem;
	margin: 1rem;
	color: var(--rood);
}

.txt {
	font-weight: 300;
	line-height: 1.5em;
	font-size: .8rem;
	width: 100%;
	color: var(--notwhite);
}

.txt p {
	max-width: 40rem;
	margin-bottom: 1em;
}

.txt ol,
.txt ul {
	list-style: decimal outside;
	padding-left: 2.3rem;
	max-width: 40rem;
}

.txt ul {
	list-style: disc outside;
}

.txt ol li,
.txt ul li {
	margin-left: -1rem;
	padding-left: 0.15rem;
	font-weight: 300;
	line-height: 1.5em;
	font-size: 0.8rem;
}

.txt li::marker {
	font-weight: 600;
	font-size: 0.8em;
}

.disclaimer {
	color: var(--notwhite);
	font-size: .7rem;
	font-weight: 300;
	max-width: 40rem;
}