.phone-only {
	display: none;
}

/* === colors === */

.primary-1 {
	background-color: #3B86A5;
}

.primary-2 {
	background-color: #406A7C;
}

.primary-3 {
	background-color: #13516B;
}

.primary-4 {
	background-color: #6DB3D2;
}

.primary-5 {
	background-color: #88BCD2;
}

.secondary-a1 {
	background-color: #6F45B1;
}

.secondary-a2 {
	background-color: #604885;
}

.secondary-a3 {
	background-color: #3B1673;
}

.secondary-a4 {
	background-color: #9C75D8;
}

.secondary-a5 {
	background-color: #AC8FD8;
}

.secondary-b1 {
	background-color: #ABED4D;
}

.secondary-b2 {
	background-color: #8CB057;
}

.secondary-b3 {
	background-color: #659919;
}

.secondary-b4 {
	background-color: #C3F579;
}

.secondary-b5 {
	background-color: #D0F59A;
}

/* === end colors === */

.logo_container {
	top: 0.75em;
	width: 33%;
}

	.logo_container img#logo {
		width: auto;
		height: 100px;
		-webkit-transition: all 0.3s linear;
		-moz-transition: all 0.3s linear;
		transition: all 0.3s linear;
	}

.menu-title {
	top: 4px;
}

.top-header .container a.dummy,
.top-header .container a.logout {
	border-left: 1px solid #fff;
	margin-left: 1em;
	border-right: 1px solid #fff;
	padding-right: 1em;
}

	.top-header .container a:hover,
	.top-header .container a:hover:before,
	.top-header .container a.logout:hover,
	.top-header .container a.logout:hover .logoff:before,
	.top-header .container a.account:hover,
	.top-header .container a.account:hover .settings:before {
		color: #feb743;
	}

.top-header .info-email {
	margin-left: 1.5em;
}

.logoff:before {
	float: left;
	top: -2px;
	margin-right: 0.25em;
}

.settings:before {
	float: left;
	top: -4px;
	margin-right: 0.5em;
}

.is-compact-header img#logo {
	width: auto;
	height: 55px;
	min-width: 1px;
}

.participant-name {
	font-size: 1.25em;
	top: 0em;
}

.offline-label {
	top: 0px;
	margin-right: 0em;
}

.form-caption {
	text-shadow: none !important;
}

.form-caption-2 {
	text-shadow: none !important;
	margin-right: 0em;
}

	.form-caption-2 + .dxflRequired {
		color: red;
	}

.top-header .container {
	min-height: 2.8em;
}

.main-header {
	border-bottom-style: none;
	border-bottom-color: #feb743;
	height: 130px;
	background-color: #ffffff;
}

.section-title {
	padding-top: 18em;
}

.title-container {
	background-color: #f2f2f2;
	padding: 3em 1.5em 2em;
}

.online-test-container.icon-m:before {
	content: "m";
	line-height: 1.1em;
}

.main-footer {
	border-top-color: #feb743;
}

.top-header {
	-webkit-transition: none;
	-moz-transition: none;
	transition: none;
}

.title-container h1 {
	color: rgba(161,161,161,1);
	text-transform: uppercase;
}

.title-container h4 {
	color: rgba(161,161,161,1);
}


#footer-bottom .container {
	display: flex;
	align-items: center;
	gap: 30px;
}

#footer-info {
	display: flex;
	align-items: center;
	gap: 100px;
	position: relative;
	padding: 0em 1em 0.25em 1em;
}

.top-header,
#footer-bottom {
	background-color: #000e23;
	padding: 11px 0px 8px 0px;
}

.top-header {
	padding: 7px 0 11px 0;
}

.main-footer {
	border-top: none 5px rgba(254,167,54,1);
	background-color: rgb(137,188,226);
	display: flex;
	flex-direction: column;
}

.header-menu-container li.menu-item a span {
	color: rgba(21,21,21,1) !important;
}

.hide-on-empty:empty {
	display: none !important;
}

.header-section {
	background-color: #fff;
}

.parallax_bg {
	opacity: 0.8;
}

	.parallax_bg.orange03 {
		background-color: #f2f2f2;
		background-image: none;
		background-position: center center;
	}

	.parallax_bg.orange02 {
		background-color: #f2f2f2;
		background-image: none;
	}

	.parallax_bg.orange01 {
		background-color: #f2f2f2;
		background-image: none;
	}

	.parallax_bg.orange07 {
		background-color: #f2f2f2;
		background-image: none;
	}

	.parallax_bg.orange08 {
		background-color: #f2f2f2;
		background-image: none;
	}

.inner-content-container {
	top: -8em;
}

.button-row {
	display: flex;
	align-items: center;
	gap: 2em;
	justify-content: center;
	width: 100%;
	margin-top: 2em;
}

	.button-row .ss-button {
		margin-bottom: 1em;
	}

.ss-button {
	background-color: rgb(137,188,226) !important;
	border-color: rgb(137,188,226);
	color: #ffffff;
	border-radius: 3px;
	border-width: 2px;
	padding: 0.1em 1.3em;
}

	.ss-button.dxbDisabled {
		border-color: rgb(214, 214, 214);
		background-color: #f2f2f2 !important;
		color: rgb(214, 214, 214);
	}

	.ss-button.cancel:not(.dxbDisabled ) {
		background-color: #ffffff !important;
		color: rgb(137,188,226);
	}

	.ss-button:hover {
		background-color: #ffffff !important;
		color: rgb(137,188,226);
	}

	.ss-button.dxbDisabled:hover {
		border-color: rgb(214, 214, 214);
		background-color: #f2f2f2 !important;
		color: rgb(214, 214, 214);
	}

	.ss-button.cancel:not(.dxbDisabled ):hover {
		background-color: rgb(137,188,226) !important;
		color: #ffffff;
	}

	.ss-button span {
		font-weight: 500 !important
	}

.mail-link, .whatsapp-link,
.vacancy-container .test-link,
.online-test-container .test-link,
.pdf-link {
	color: rgb(137,188,226) !important;
	text-shadow: none !important;
}

.job-coach-photo {
	border-color: rgb(137,188,226);
}

.dxichTextCellSys label {
	position: relative;
	top: 2px;
}

.dxvsValidationSummary a.dxvsHL {
	border-bottom-style: none !important;
}

li.menu-item.dxm-selected a span,
li.menu-item.dxm-selected div span {
	color: #feb743 !important;
}

li.menu-item a:hover span {
	color: #feb743 !important;
}

.online-test-container,
.online-test-container::before {
	border-color: rgb(137,188,226);
	border-width: 2px;
	background: none;
	background-color: #ffffff;
}

.custom-button {
	display: block;
	width: 120px;
	padding: 0.4em 1em 0.55em;
	border: 2px solid rgb(137,188,226);
	text-align: center;
	cursor: pointer;
	border-radius: 3px;
	color: rgb(137,188,226);
	margin: 1em auto;
	font-weight: 500;
	font-size: 18px !important;
	background-color: transparent;
	-webkit-transition: all 0.3s linear;
	-moz-transition: all 0.3s linear;
	transition: all 0.3s linear;
}

	.custom-button.wide {
		width: 180px;
	}

	.custom-button.extra-wide {
		width: 240px;
	}

	.custom-button.auto-width {
		width: auto;
		display: inline-block;
		font-weight: 500;
		font-size: 18px !important;
	}

	.custom-button:hover {
		background-color: rgb(137,188,226) !important;
		color: #ffffff;
	}

	.custom-button.blue {
		background-color: rgb(137,188,226) !important;
		color: #ffffff;
	}

		.custom-button.blue:hover {
			background-color: #ffffff !important;
			color: rgb(137,188,226) !important;
		}

.custom-link {
	display: inline-block;
	font-family: "Segoe UI", sans-serif !important;
	font-size: 14px;
	color: white;
	-webkit-transition: all 0.3s linear;
	-moz-transition: all 0.3s linear;
	transition: all 0.3s linear;
	cursor: pointer;
}

	.custom-link:hover {
		color: orange;
	}

/* === Internal questionnaire styles ===  */

.question-panel {
	position: relative;
	display: table;
	z-index: 10;
	width: 50%;
	width: 50vw;
	max-width: 1024px;
	min-height: 50%;
	min-height: 50vh;
	margin: 1em auto 0px auto;
	background-color: transparent;
	background: url(../images/grayed_04.png) no-repeat top center transparent;
	border: 1px solid rgb(137,188,226);
	padding-top: 0.5em;
}

.question-panel-lite {
	display: block;
	z-index: 10;
	width: 90%;
	max-width: 1024px;
	margin: 1em auto 0px auto;
	background-color: transparent;
	padding-top: 0.5em;
}

.open-question-intro-separator {
	padding-bottom: 1em;
	display: inline-block;
	width: 100%;
}

.question-panel.small {
	min-height: 0;
	border-bottom: 1px solid darkSlateGray;
	border-left: 1px solid darkSlateGray;
}

.question-panel * {
	font-family: "Open Sans", Arial, sans-serif !important;
	font-size: 14px;
}

.question-panel .dxpnl-collapsible {
	width: 100%;
	text-align: right;
}

.questionnaire-title {
	position: relative;
	display: table;
	z-index: 10;
	width: 50%;
	width: 50vw;
	max-width: 1024px;
	margin: 0px auto 0px auto;
	font-family: "Open Sans", Arial, sans-serif;
	color: steelblue;
	font-size: 3.5em;
	font-weight: 300;
	font-style: italic;
	text-shadow: none !important; /*1px 1px 2px rgba(0,0,0,0.6);*/
}

	.questionnaire-title.login-form {
		max-width: 768px;
	}

.instructions-container {
	display: block;
	width: 100%;
	padding: 2em 4em 3em 4em;
	background-color: rgba(0,0,0,0.5);
	margin-bottom: 1em;
	text-align: left;
	box-shadow: inset 0px 3px 3px rgba(0,0,0,0.2), inset 0px -3px 3px rgba(0,0,0,0.1);
}

.introduction-header {
	display: block !important;
	font-weight: 500 !important;
	color: #ffffff;
	text-align: left;
	font-size: 1.5em !important;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.4);
	border-bottom: 2px ridge white;
	margin-bottom: 0.5em;
}

.introduction-text {
	display: inline-block;
	color: #ffffff;
	text-align: left;
	font-size: 1em !important;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.4);
}

.expander-header {
	color: rgba(71, 71, 71, 1);
	font-size: 1.75em !important;
	font-weight: 400 !important;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.4);
	display: inline-block;
	width: 90%;
	padding-left: 8%;
	text-align: center;
	position: absolute;
}

.state-indicator {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 24px;
	text-align: center;
	padding-top: 0.4em;
	font-size: 1rem;
}

	.state-indicator.none {
		background-color: #d4d2cf;
		color: rgba(71, 71, 71, 1);
		font-weight: 600;
	}

	.state-indicator.answered {
		background-color: #66bb6a;
		color: #ffffff;
	}

.range-bar {
	display: block;
	width: 100%;
	height: 8px;
	margin-bottom: 1em;
	border-radius: 4px;
	background: rgb(255,5,9);
	background: -moz-linear-gradient(left, rgba(255,5,9,1) 0%, rgba(255,140,0,1) 25%, rgba(255,255,5,1) 50%, rgba(225,255,0,1) 75%, rgba(0,255,0,1) 100%);
	background: -webkit-linear-gradient(left, rgba(255,5,9,1) 0%,rgba(255,140,0,1) 25%,rgba(255,255,5,1) 50%,rgba(225,255,0,1) 75%,rgba(0,255,0,1) 100%);
	background: linear-gradient(to right, rgba(255,5,9,1) 0%,rgba(255,140,0,1) 25%,rgba(255,255,5,1) 50%,rgba(225,255,0,1) 75%,rgba(0,255,0,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0509', endColorstr='#00ff00',GradientType=1 );
}

.question-text {
	color: rgba(71, 71, 71, 1);
	font-size: 2em !important;
	font-weight: 400 !important;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.4);
	display: block;
	width: auto;
	text-align: center;
	margin: 0.5em 2em 1em;
}

	.question-text.small {
		font-size: 1.25rem !important;
		text-align: left;
		margin: 0 1em 1em 0;
		text-shadow: none;
	}

.option-number {
	display: table-cell;
	position: relative;
	line-height: 1px;
	z-index: 10;
}

	.option-number:last-of-type {
		text-align: right;
		padding-right: 4px;
	}

.deen-360-option {
	position: relative;
	top: 1em;
	left: -6px;
	display: inline-block;
	width: 21px;
	height: 21px;
	background-color: #fff;
	border: 2px solid #524a4a;
	border-radius: 50%;
	padding: 0 !important;
	overflow: hidden;
	cursor: pointer;
}

	.deen-360-option span {
		display: block;
		margin: 0;
		padding: 0;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: none !important;
		cursor: pointer;
	}

.option-number:last-of-type .deen-360-option {
	left: 4px;
}

.option-number.hover,
.option-number.selected {
	font-weight: bold;
}

	.option-number.selected .deen-360-option {
		background-color: #524a4a;
		box-shadow: 0px 0px 0px 3px #fff inset;
	}

.question-box {
	margin-bottom: 1.5em;
	display: block;
	border: 1px solid #d4d2cf;
	padding: 0.5em 1em;
	background-color: #fff;
	position: relative;
}

.option-container {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	border-collapse: collapse;
	margin: 0px 5em 1em 4em;
}

	.option-container.max-width {
		margin: 0px;
		width: 100%;
	}

		.option-container.max-width td.dxe {
			padding: 0px 5em 0px 4em;
		}

	.option-container .option-cell {
		padding: 0px;
		vertical-align: top;
		padding: 0.5em 0px;
	}

	.option-container.buttons {
		flex-direction: column;
	}

.option-value {
	display: inline-block;
	margin-top: 0.45em;
}

.option-text,
.option-text-indicator,
.question-feedback-text {
	display: inline-block;
	color: rgba(71, 71, 71, 1);
	font-size: 1.15em !important;
	text-shadow: none !important;
}

.option-text,
.option-text-indicator {
	padding-top: 0.5em;
}

.option-text-indicator {
	font-weight: 600 !important;
	font-size: 1.1em;
}

.option-cell.indicator {
	margin-left: 1em;
}

.feedback-container {
	width: 100%;
	display: inline-block;
	background: #f2f2f2 !important;
	text-align: center;
	padding: 0.75em 1em;
	margin: 2em 0px;
	border: 1px solid rgb(137,188,226) !important;
}

.question-feedback-text {
	font-weight: 600;
	font-size: 1.4em;
	display: inline-block;
}

.button-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	text-align: center;
	margin-top: 0;
	margin-bottom: 1.5em;
	width: 100%;
}

	.button-container div.dxbButton:last-of-type {
		margin-left: 3em !important;
	}

.button {
	border-radius: 2em;
	border: 3px solid rgb(137,188,226) !important;
	background: rgba(255,255,255,0.2) !important;
	padding: 0.5em 2em;
	color: rgb(137,188,226);
	font-weight: 600;
	text-transform: uppercase;
	width: 145px;
	-webkit-transition: all 150ms linear;
	-moz-transition: all 150ms linear;
	transition: all 150ms linear;
}

.dark-panel .button {
	background: rgba(0,0,0,0.2) !important;
}

.button.dxbDisabled {
	border: 3px solid silver !important;
	background: rgba(255,255,255,0.1) !important;
	padding: 0.5em 2em;
	color: silver;
}

.button:not(.dxbDisabled):hover,
.button:not(.dxbDisabled):focus {
	color: #ffffff;
	background-color: rgb(137,188,226) !important;
}

.option-radio-list .dxeBase.dxeTAR {
	width: 100%;
}

	.option-radio-list .dxeBase.dxeTAR td:first-of-type {
		display: none;
	}

.option-radio-list .dxichTextCellSys label {
	border-radius: 2em;
	border: 3px solid rgb(137,188,226) !important;
	background: rgba(255,255,255,1) !important;
	padding: 1em 2em;
	margin-top: 1em;
	color: rgb(137,188,226);
	font-weight: 400;
	font-size: 1.5em;
	text-shadow: none !important;
	width: 100%;
	cursor: pointer;
	display: block;
	user-select: none;
	-webkit-transition: all 150ms linear;
	-moz-transition: all 150ms linear;
	transition: all 150ms linear;
}

	.option-radio-list .dxichTextCellSys label.selected {
		text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
		border-color: #659919 !important;
		background-color: rgba(208,245,154,0.2) !important;
	}

	.option-radio-list .dxichTextCellSys label:hover {
		color: #ffffff !important;
		background-color: rgb(137,188,226) !important;
	}

.option-radio-button:checked + label {
	color: deepskyblue;
	border-color: deepskyblue !important;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
	background: rgba(255,255,255,0.8) !important;
}

.glyph-questionmark {
	font-family: Deen !important;
	font-size: 2.5em;
	font-weight: normal;
	text-shadow: none !important;
	color: rgba(71, 71, 71, 1);
	-webkit-transition: all 150ms linear;
	-moz-transition: all 150ms linear;
	transition: all 150ms linear;
}

.dxSafari .glyph-questionmark {
	font-weight: normal;
}

.glyph-questionmark:hover,
.glyph-questionmark:focus {
	color: #feb743;
}

.dxpnl-btn, .dxpnl-btnHover, .dxpnl-btnSelected {
	background-color: transparent !important;
	z-index: 10;
}

.dxeButtonEditSys td.dxic {
	overflow: hidden;
	vertical-align: middle;
}

.question-panel .dxeButtonEditSys .dxic:first-of-type {
	border: 1px solid #9F9F9F !important;
}

.dxeButtonEdit {
	border-radius: 3px;
	border-style: solid !important; /*none*/
	border-collapse: collapse;
}

.option-cell .dxeButtonEdit {
	border-style: none !important;
}

.option-cell .dxeButtonEditSys td.dxic {
	padding: 2px 8px 1px 4px !important;
}

.dxeSpinIncButton, .dxeSpinDecButton, .dxeSpinIncButton_BlackGlass, .dxeSpinDecButton_BlackGlass {
	height: 1em !important;
	position: relative;
	left: -1px;
}

.dxeSpinIncButton, .dxeSpinIncButton_BlackGlass {
	border-top-right-radius: 3px;
}

.dxeSpinDecButton, .dxeSpinDecButton_BlackGlass {
	border-bottom-right-radius: 3px;
}

.dxeButtonEdit .dxeEditArea {
	padding-left: 0.25em !important;
}

.dxpnl-expanded {
	background-color: transparent !important;
	z-index: 1000;
}

/* === Multiple Choice Result Styles ===================================================== */

.etp-results-container * {
	font-family: "Open Sans", Arial, sans-serif !important;
	font-size: 14px !important;
}

.category-header {
	display: block;
	width: 100%;
	text-align: center;
	padding: 0.15em 0em !important;
	text-transform: uppercase;
	text-shadow: none;
	box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
	margin-bottom: 1px;
}

.multiple-choice-grid {
	font-size: 1em !important;
	text-shadow: none;
	padding: 0.5em 0em;
	background-color: #fff;
}

.dxePBMainCell {
	line-height: 1px !important;
	background-color: #fafafa;
	position: relative;
}

	.dxePBMainCell .dxeProgressBarIndicator {
		display: inline-block !important;
		height: 19px !important;
	}

	.dxePBMainCell > table {
		display: inline-table !important;
		width: auto !important;
		margin-top: 0px !important;
		height: 19px !important;
		margin-left: 0.5em;
		margin-bottom: -1em;
		vertical-align: top;
		position: absolute;
	}

		.dxePBMainCell > table td.dxe {
			line-height: 19px !important;
		}

/* === Color Test Score Styles =========================================================== */

.color-test-results {
	display: table;
	margin: 3em auto 0px auto;
}

.dxpc-contentWrapper .color-test-results {
	margin: 0em auto 0px auto;
}

.color-score-container {
	display: table;
	width: auto;
	empty-cells: show;
	table-layout: fixed;
}

	.color-score-container .header,
	.color-score-container .score-row {
		display: table-row;
	}

	.color-score-container .score-row {
		height: 50px;
	}

	.color-score-container .static-column {
		display: table-cell;
		color: #ffffff;
		font-weight: 600;
		font-size: 1.1em;
		background-color: rgba(75,75,75,0.68);
		vertical-align: middle;
		min-width: 100px;
		text-align: center;
		border-left: 1px solid rgba(0,0,0,0.6);
		border-right: 1px solid rgba(0,0,0,0.6);
		border-bottom: 1px solid rgba(0,0,0,0.6);
	}

	.color-score-container .option-column,
	.color-score-container .option-score-column {
		display: table-cell;
		width: 50px;
		background-color: white;
		overflow: visible;
		border-right: 1px solid silver;
		border-bottom: 1px solid silver;
	}

.option-color-column {
	display: table-cell;
	width: 100px;
	height: 50px;
	border-right: 1px solid rgba(0,0,0,0.6);
	border-bottom: 1px solid rgba(0,0,0,0.6);
	vertical-align: middle;
	text-align: center;
}

	.option-color-column.totals {
		border-right: 1px solid silver;
	}

	.option-color-column.colors {
		text-shadow: 1px 1px 1px rgba(255,255,255,0.4);
	}

.color-score-container .header .option-column,
.color-score-container .header .option-score-column {
	height: 100px;
	position: relative;
	color: #ffffff;
	font-weight: 600;
	font-size: 1.1em;
	background-color: rgba(75,75,75,0.68);
	border-right: 1px solid rgba(0,0,0,0.6);
	border-bottom: 1px solid rgba(0,0,0,0.6);
	border-top: 1px solid rgba(0,0,0,0.6);
}

.color-score-container .score-row .option-score-column {
	vertical-align: middle;
	text-align: center;
	font-size: 1.35em;
	text-transform: uppercase;
}

.color-score-container .option-score-column.values {
	background-color: lightyellow;
}

.color-score-container .option-score-column:last-of-type,
.score-row .option-color-column:last-of-type {
	border-right: 1px solid rgba(0,0,0,0.6) !important;
}

.color-score-container .option-column:before {
	content: ' ';
	transform-origin: bottom left;
	transform: rotate(-90deg);
	padding: 0px 1em;
	position: absolute;
	top: 80px;
	left: 75%;
}

.color-score-container .option-column.answer-text-nl:before {
	content: 'Antwoord';
}

.color-score-container .option-column.answer-text-en:before {
	content: 'Answer';
}

.color-result-bar {
	width: 100%;
	margin: 1em 0em;
	border-collapse: collapse;
	border: 1px solid black;
}

.result-bar-cell {
	height: 1em;
	padding: 0.5em;
	color: #000;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.4);
	text-align: center;
	empty-cells: show;
}

.avg-list-items {
	list-style: square !important;
}

	.avg-list-items li {
		margin-left: 1.5em;
	}

.editor-panel-header {
	display: inline-block;
	font-size: 1.5em;
	margin-left: 0.5em;
	padding-bottom: 0.5em;
}

.track-bar {
	display: none !important
}

.feedback-options {
	width: 100%;
}

.desktop-top-margin-2em {
	margin-top: 2em;
}

.respondent-info-container {
	display: flex;
	gap: 40px;
	align-items: flex-start;
	width: 100%;
}

	.respondent-info-container .respondent-info-column {
		flex: 1;
	}

.respondent-button-container {
	display: flex;
	flex-direction: row-reverse;
	gap: 20px;
	align-items: center;
	width: 100%;
	margin-top: 1em;
}

.respondent-question-box {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: flex-start;
	width: 100%;
	margin: 0 auto 1em auto;
	border: 2px solid rgb(137, 188, 226);
}

.give-remark-form {
	width: 80% !important;
	margin: 0 auto;
}

	.give-remark-form .dxflCaptionCell {
		white-space: normal !important;
	}

	.give-remark-form .form-caption {
		font-weight: 600 !important;
	}

.multiple-invitations {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4em;
	width: 100%;
}

.popup-wrapper-buttons {
	width: calc(100% - 64px);
	position: absolute;
	bottom: 2em;
}

.popup-window .dxICheckBox {
	transform: scale(1.25);
	margin-right: 0.5em;
	cursor: pointer;
}

.overlay-popup-container {
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	background-color: rgba(101, 101, 101, 0);
	z-index: 0;
	text-align: center;
	line-height: 100vh;
}

	.overlay-popup-container.active {
		display: block;
		background-color: rgba(101, 101, 101, 0.2);
		z-index: 199999;
	}

.wrapper-popup {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	line-height: normal;
	width: 640px;
	height: 395px;
	border-radius: 4px;
	box-shadow: 0 12px 32px -8px rgba(26, 26, 26, 0.24);
	background-color: #ffffff;
	padding: 16px 32px;
}

.dxpcModalBackLite {
	-webkit-backdrop-filter: blur(8px) !important;
	backdrop-filter: blur(8px) !important;
	background-color: rgba(101, 101, 101, 0) !important;
	opacity: 1 !important;
	z-index: 199999 !important;
}

.dxpcLite.dxpclW {
	z-index: 299999 !important;
	box-shadow: 0 12px 32px -8px rgba(26, 26, 26, 0.24);
}

.dxpc-mainDiv.popup-window {
	border-radius: 4px !important;
}

.module-image {
	display: inline-block;
	position: absolute;
	top: -32px;
	left: 50%;
	margin-left: -32px;
	width: 64px;
	height: 64px;
	border-color: rgb(137,188,226);
	border-width: 2px;
	border-style: solid;
	border-radius: 32px;
	overflow: hidden;
}

[class^="online-test-container icon-"]:before {
	content: "";
	display: none;
}

.info-phone, .info-email {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

.icon-link-container {
	border-color: rgb(137,188,226);
	border-width: 2px;
}

.vacancy-container {
	border-color: rgb(137,188,226);
}

.buy-module:hover:before {
	color: rgb(137,188,226);
}

#footer-widgets {
	padding-top: 6%;
	padding-left: 1.5em;
	padding-right: 1.5em;
}

#footer-bottom .social-icons:empty {
	display: none !important;
	margin: 0;
	padding: 0;
}

.respondent-label {
	display: table-cell;
	padding-right: 2em;
	font-weight: bold;
	white-space: nowrap;
}

.table-row {
	display: table-row;
}

.table-cell {
	display: table-cell;
}

.logout-popup-container {
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	background-color: rgba(101, 101, 101, 0);
	z-index: 0;
	text-align: center;
	line-height: 100vh;
}

	.logout-popup-container.locked {
		position: absolute;
		overflow-y: auto;
	}

	.logout-popup-container.active {
		display: block;
		background-color: rgba(101, 101, 101, 0.2);
		z-index: 9999;
		width: 100vw;
		height: 100vh;
		scroll-behavior: smooth;
		overflow-y: auto;
	}

.logout-popup {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	line-height: normal;
	width: 616px;
	height: 424px;
	border-radius: 4px;
	box-shadow: 0 12px 32px -8px rgba(26, 26, 26, 0.24);
	background-color: #ffffff;
}

.close-button {
	font-family: SevenSmiles !important;
	font-size: 2em;
	color: #c7c7c7;
	right: 24px;
	top: 24px;
	text-align: right;
	cursor: pointer;
	padding: 0.5em 1em 0px 0px;
}

	.close-button:hover {
		color: red;
	}

	.close-button:before {
		color: #c7c7c7;
	}

.content-popup {
	display: inline-block;
	margin: 64px;
	text-align: center;
}

	.content-popup .icon {
		display: inline-block;
		width: 80px;
		height: 80px;
		margin: 0 auto 16px;
	}

.popup-header {
	font-size: 32px;
	font-weight: bold;
	font-stretch: normal;
	font-style: normal;
	line-height: 1.5;
	letter-spacing: normal;
	text-align: center;
	color: #1a1a1a;
}

.popup-sub-header {
	font-size: 20px;
	font-weight: normal;
	font-stretch: normal;
	font-style: normal;
	line-height: 1.6;
	letter-spacing: normal;
	text-align: center;
	color: #656565;
}

.popup-button-container .submit-button,
.popup-button-container .cancel-button {
	width: 120px;
	padding: 10px 0;
	margin: 0 8px;
	border-width: 2px;
}

.help-dialog-button {
	display: inline-block;
	width: 32px;
	height: 32px;
	color: powderblue;
}

.detail-panel {
	display: inline-block;
	position: absolute;
	width: 0vw;
	top: 0;
	bottom: 0;
	right: 0;
	background-color: #fff;
	vertical-align: top;
	padding-top: 6.3vw 63px;
	transition: all .2s linear;
	-moz-transition: all .2s linear;
	-webkit-transition: all .2s linear;
	-o-transition: all .2s linear;
}

.logout-popup-container.active.slide .detail-panel {
	width: 33vw;
	overflow: auto;
}

.detail-panel.centered {
	position: relative;
	width: 33vw;
	top: 20%;
	background-color: #fff;
	vertical-align: top;
	padding: 0px;
	padding-bottom: 1em;
	transition: all .2s linear;
	-moz-transition: all .2s linear;
	-webkit-transition: all .2s linear;
	-o-transition: all .2s linear;
}

.vw20 {
	width: 33vw !important;
	min-width: 300px;
}

.logout-popup-container.active.slide .detail-panel.centered {
	margin: 0 auto;
}

.detail-panel .mark-image {
	display: inline-block;
	width: 192px;
	margin: 32px auto 0px;
}

.detail-panel .content-popup {
	margin: 64px 3vw;
	display: block;
}

.detail-panel.centered .content-popup {
	margin: 0px 64px 24px 64px;
	display: block;
}

	.detail-panel.centered .content-popup.less-padding {
		margin: 12px 32px 24px 32px;
	}

		.detail-panel.centered .content-popup.less-padding .popup-header:after {
			left: 18px;
			top: 8px;
		}

.details-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 36px;
}

	.details-table td {
		vertical-align: top;
		padding: 6px 0px;
	}

.detail-panel .popup-header {
	font-size: 40px;
	font-weight: bold;
	font-stretch: normal;
	font-style: normal;
	line-height: 1.5;
	letter-spacing: normal;
	text-align: center;
	color: #656565;
}

.custom-button.cancel {
	border: 2px solid transparent;
	background-color: rgba(0,0,0,0);
	color: rgb(137,188,226);
}

	.custom-button.cancel.gray {
		border: 2px solid #aaa;
		background-color: rgba(0,0,0,0);
		color: #aaa;
	}

.detail-panel.centered {
	width: 40vw;
}

	.detail-panel.centered .popup-header.flex {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 16px;
		margin-bottom: 0.5em;
	}

.popup-header.flex.text-left {
	flex-direction: row;
}

.popup-header.flex.text-right {
	flex-direction: row-reverse;
}

.detail-panel .html-content {
	text-align: justify;
}

[class^="dialog-icon-"]:after,
[class*=" dialog-icon-"]:after {
	content: '';
	display: block;
	width: 64px;
	height: 64px;
	margin: 16px auto;
	background-size: 64px 64px;
	background-repeat: no-repeat;
	background-position: top left;
	background-color: transparent;
}

.dialog-icon-info:after {
	background-image: url(../images/ic_info.svg);
}

.dialog-icon-question:after {
	background-image: url(../images/ic_question.svg);
}

.dialog-icon-warning:after {
	background-image: url(../images/ic_warning.svg);
}

.dialog-icon-error:after {
	background-image: url(../images/ic_error.svg);
}

.dialog-icon-edit:after {
	background-image: url(../images/ic_edit.svg);
}

.dialog-icon-info.deen360:after {
	content: '';
	display: inline-block;
	width: 48px;
	height: 48px;
	margin: 4px auto;
	background: url(../images/ic_info.svg) no-repeat top left transparent;
	background-size: 48px;
	left: 0;
	position: absolute;
}

.dialog-icon-no-margin:after {
	margin: 0 !important;
	flex-shrink: 0;
}

.detail-panel .submit-button,
.detail-panel .cancel-button {
	width: 10vw;
	min-width: 192px;
}

.detail-panel .cancel-button {
	background-color: transparent;
}

.detail-panel .caption {
	width: 12.5vw;
	font-size: 16px;
	font-weight: 600;
	font-stretch: normal;
	font-style: normal;
	line-height: 1.5;
	letter-spacing: normal;
	color: #1a1a1a;
	text-align: left;
}

.detail-panel .value,
.detail-panel.centered .popup-content-text {
	font-size: 16px;
	font-weight: normal;
	font-stretch: normal;
	font-style: normal;
	line-height: 1.5;
	letter-spacing: normal;
	color: #1a1a1a;
	text-align: left;
}

.detail-panel.centered .popup-content-text {
	text-align: center;
}

.submit-button.disabled,
.cancel-button.disabled {
	border: 2px solid #e4e4e4;
	background-color: #e4e4e4;
	color: #a1a1a1;
	cursor: default !important;
}

.detail-panel.centered .custom-button:hover {
	background-color: rgb(137,188,226);
	border: 2px solid rgb(137,188,226);
	color: #fff;
}

.detail-panel .time-line {
	display: inline-block;
	height: 3px;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 100%;
	background-color: darkorange;
}

.slimScrollDivNoPadding {
	padding-right: 12px;
}

.slimScrollRail {
	padding: 0px 4px;
}

.slimScrollBar {
	margin-right: 2px;
}

.range-bar {
	position: relative;
	display: block;
	width: 100%;
	height: 6px;
	margin-bottom: 1em;
	margin-top: 0.5em;
	border-radius: 4px;
	background: rgb(255,5,9);
	background: -moz-linear-gradient(left, rgba(255,5,9,1) 0%, rgba(255,140,0,1) 25%, rgba(255,255,5,1) 50%, rgba(225,255,0,1) 75%, rgba(0,255,0,1) 100%);
	background: -webkit-linear-gradient(left, rgba(255,5,9,1) 0%,rgba(255,140,0,1) 25%,rgba(255,255,5,1) 50%,rgba(225,255,0,1) 75%,rgba(0,255,0,1) 100%);
	background: linear-gradient(to right, rgba(255,5,9,1) 0%,rgba(255,140,0,1) 25%,rgba(255,255,5,1) 50%,rgba(225,255,0,1) 75%,rgba(0,255,0,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0509', endColorstr='#00ff00',GradientType=1 );
}

	.range-bar.editor {
		margin-top: 0px;
	}

.score-token {
	display: inline-block;
	width: 24px;
	height: 24px;
	line-height: 24px;
	background-color: dimgray;
	color: white;
	border-radius: 50%;
	position: absolute;
	text-align: center;
	top: -9px;
}

	.score-token.respondent {
		background-color: powderblue;
		color: dimgray;
		width: 20px;
		height: 20px;
		top: -7px;
		margin-left: 2px;
		line-height: 20px;
	}

		.score-token.respondent.large {
			width: 24px;
			height: 24px;
			top: -9px;
			margin-left: 0px;
			line-height: 24px;
		}

	.score-token.static {
		position: static;
	}

		.score-token.static + div {
			position: relative;
			top: -0.5em;
		}

.hidden {
	visibility: collapse !important;
	display: none !important;
}

.bold-category {
	font-size: 1.25em !important;
	font-weight: bold !important;
}

.italic-category {
	font-style: italic;
	font-weight: bold !important;
}

.language-container {
	display: flex !important;
	align-items: center;
	justify-content: flex-end;
	height: 30px;
	border-radius: 20px;
	background-color: #ffffff;
	padding: 0 18px 0 4px !important;
	width: 216px !important;
	float: right;
}

	.language-container .dxeButtonEdit {
		border-style: none !important;
	}

	.language-container .dxeButtonEditSys td.dxic {
		padding: 6px 8px 5px 2px !important;
	}

	.language-container .dxeEditAreaSys {
		cursor: pointer;
	}

	.language-container .dxeButtonEditButton {
		border-style: none !important;
		background-color: transparent;
		background: none !important;
	}

.language-icon {
	width: 38px;
	height: 30px;
	background: url(../images/language.png) no-repeat center left;
	background-size: 24px 24px;
}

.language-button {
	display: inline-table;
	vertical-align: middle;
	min-width: 32px;
	height: 30px;
	position: relative;
	background-color: rgba(255,255,255,0.4);
	border-radius: 2em;
	text-align: left;
	cursor: pointer;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

	.language-link-nl,
	.language-button.lang-nl {
		background: url(../images/dutch.png) no-repeat center left rgba(255,255,255,0.4);
		background-size: 32px 32px;
	}

	.language-link-en,
	.language-button.lang-en {
		background: url(../images/english_uk.png) no-repeat center left rgba(255,255,255,0.4);
		background-size: 32px 32px;
	}

	.language-button.lang-nl {
		margin-right: 0.5em;
	}

.language-link-nl,
.language-link-en {
	background-color: transparent;
	background-size: 24px;
	display: inline-block;
	padding: 0.25em 0em 0.25em 28px;
	margin-right: 1em;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	border-radius: 1em;
	padding: 0.5em 1em 0.5em 28px;
}

	.language-link-nl.active,
	.language-link-en.active {
		background-color: rgba(0,0,0,0.8);
	}

	.language-link-nl:hover,
	.language-link-en:hover {
		color: yellow !important;
	}

.language-button.inactive {
	background-color: transparent !important;
}

.language-button:hover {
	background-color: rgba(255,255,255,0.4) !important;
}

.language-text {
	display: inline-block;
	color: #ffffff;
	margin-left: 3em;
	margin-top: 0.25em;
	margin-right: 1em;
	line-height: 1.6em;
	text-shadow: none;
}

.participant-name {
	display: inline-block;
	position: relative;
	top: 2px;
}

.bullet-container ul {
	margin: 0.5em 0;
	padding: 0 1.5em;
	list-style: disc;
}

	.bullet-container ul li {
		margin-bottom: 0.5em;
	}

.info-marker {
	width: 18px;
	height: 18px;
	position: relative;
}

	.info-marker:after {
		content: 'R';
		position: absolute;
		display: inline-block;
		font-family: Deen;
		color: rgb(137,188,226);
		background-color: white;
		margin-right: 8px;
		font-size: 16px;
		cursor: help;
		right: 0;
	}

.info-box {
	position: absolute;
	width: 580px;
	border: 2px solid rgb(137,188,226);
	border-radius: 4px;
	box-shadow: 0 0 32px 10px rgba(26, 26, 26, 0.24);
	background-color: #ffffff;
	z-index: 99999;
}

	.info-box .close-button {
		font-size: 1.5em;
		position: relative;
		top: 9px;
		right: 0;
		z-index: 2;
	}

	.info-box .content-popup {
		margin: 12px 24px 24px 24px;
		text-align: left;
	}

		.info-box .content-popup .popup-header {
			font-size: 24px;
			text-align: left;
			text-indent: 38px;
			position: relative;
			top: -1.5em;
			margin-bottom: -1em;
		}

		.info-box .content-popup .dialog-icon-info:after {
			content: '';
			display: inline-block;
			width: 32px;
			height: 32px;
			background: url(../images/ic_info.svg) no-repeat top left transparent;
			background-size: 32px;
			position: absolute;
			left: 0;
			top: 3px;
			margin: 0;
		}

		.info-box .content-popup .html-content {
			margin: 0 0 0 0;
		}

div.heartbeat {
	position: absolute;
	right: 1em;
	top: calc(50% - 0.5em);
	margin-left: 1em;
	display: none;
	font-size: 1em;
	line-height: 1em;
	color: red !important;
}

.logout-popup-container.active.slide .detail-panel.centered.content-for-phone {
	width: 45vw;
	min-width: 640px;
}

.content-for-phone .content-popup .html-content {
	text-align: left;
	margin: 1em auto;
}

	.content-for-phone .content-popup .html-content .sub-header {
		font-size: 1.5em;
		font-weight: 500;
		margin: 1em 0em 0.5em 0em;
	}

.property-group {
	display: block;
	width: 100%;
	padding: 0.75em 1em 0.75em 1em;
	border: 1px solid #bbbbbb;
}

	.property-group .property-value {
		display: block;
	}

.top-header .container .inner-info {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.5em;
	width: 100%;
	padding-bottom: 0;
}

.top-header .container .action-container {
	flex: 1;
	display: flex;
	flex-direction: row-reverse;
	justify-content: end;
	align-items: center;
	gap: 20px;
}