/**
 * The following styles get applied both on the front of your site and in the editor.
 *
 * Replace them with your own styles or remove the file completely.
 */

:root {
	--color-p100: #001f5c;
	--color-p70: #4d628d;
	--color-p40: #99a5be;
	--color-p20: #ccd2de;
	--color-p10: #e6e9ef;
	--color-p5: #f2f4f7;

	--color-s100: #38a9f2;
	--color-s80: #60baf5;
	--color-s60: #88cbf7;
	--color-s40: #afddfa;
	--color-s20: #d7eefc;
	--color-s10: #ebf6fe;

	--color-a1: #e7000e;
	--color-a2: #ef6e00;
	--color-a3: #25a62d;

	--h2-size: 28px;
	--h2-height: 140%;
	--h2-color: var(--color-p100);

	--h3-size: 24px;
	--h3-height: 145%;
	--h3-color: var(--color-p100);

	--h4-size: 20px;
	--h4-height: 150%;
	--h4-color: var(--color-p100);

	--p-size: 18px;
	--p-height: 150%;
	--p-color: var(--color-p100);
}


/**
 * Container
 */

.ddtl-form {
	display: flex;
	flex-direction: column;
	gap: 24px;
	background: #EBEFF2;
	/* max-width: 100% !important; */
	width: 100% !important;
	color: #001f5c;
	color: var(--p-color);
	padding: calc(2.5em + 1%);
	font-size: 18px;
	font-size: var(--p-size);
	line-height: 150%;
	line-height: var(--p-height);
}

.ddtl-form * {
	box-sizing: border-box;
}

@media (max-width: 768px) {
	.ddtl-form {
		padding: calc(2.5em + 1%) 0;
	}
}

.ddtl-form-container {
	background: white;
	box-shadow: 0 0 10px rgba(0,0,0,0.1);
	padding: 100px 0;
}

.ddtl-container {
	margin-top: 24px;
	margin-bottom: 24px;
	padding-left: 24px;
	padding-right: 24px;
}

.ddtl-wrapper {
	display: flex;
	flex-direction: column;
	max-width: 636px;
	margin: 0 auto;
}

.ddtl-wrapper.flex-end {
	align-items: end;
	margin: 0;
}

/**
 * Defaults
 */

form {
	display: flex;
	flex-direction: column;
	gap: 36px;
}

.ddtl-form *:focus {
	outline-color: #001f5c;
	outline-color: var(--color-p100);
}

.ddtl-form button {
	background: white;
	text-decoration: none !important;
	display: block;
	min-width: 160px;
	color: inherit;
	font-weight: normal;
	text-transform: initial;
	padding: 10px 24px;
	font-size: 18px;
	font-size: var(--p-size);
	line-height: 150%;
	line-height: var(--p-height);
	border: 2px solid #38a9f2;
	border: 2px solid var(--color-s100);
	font-weight: bold;
	/* height: 48px; */
	z-index: 0;
}

.ddtl-form button:focus {
	outline-style: solid !important;
	outline-width: 5px !important;
	outline-color: var(--color-s100) !important;
	z-index: 1;
}

.ddtl-form button:hover {
	border-color: #4d628d;
	border-color: var(--color-p70);
	color: #4d628d;
	color: var(--color-p70);
	background: white;
}

.ddtl-form button .ddtl-btn-icon {
	display: inline-block;
	width: 24px;
	height: 24px;
	margin-right: 9px;
}

.ddtl-form [data-ddtl-page]:not(.page__active) {
	display: none;
}

.ddtl-form label {
	display: block;
	margin: 0 0 12px;
}

.ddtl-form p {
	margin: 0;
	white-space: pre-line;
}

.ddtl-form p:not(:last-child) {
	margin-bottom: 4px;
}

.ddtl-form a {
	color: #001f5c;
	color: var(--color-p100);
}

.ddtl-form a:hover {
	color: #4d628d;
	color: var(--color-p70);
}

.ddtl-h2 {
	font-size: 28px;
	font-size: var(--h2-size);
	line-height: 140%;
	line-height: var(--h2-height);
	color: #001f5c;
	color: var(--h2-color);
	padding-bottom: 4px;
}

.ddtl-h3 {
	font-size: 24px;
	font-size: var(--h3-size);
	line-height: 145%;
	line-height: var(--h3-height);
	color: #001f5c;
	color: var(--h3-color);
}

.ddtl-h4 {
	font-size: 20px;
	font-size: var(--h4-size);
	line-height: 150%;
	line-height: var(--h4-height);
	color: #001f5c;
	color: var(--h4-color);
	margin-top: 24px !important;
}

.ddtl-p {
	font-size: 20px;
	font-size: var(--h4-size);
	line-height: 150%;
	line-height: var(--h4-height);
	color: #001f5c;
	color: var(--h4-color);
}

.ddtl-form strong,
.ddtl-bold { font-weight: bold; }

.ddtl-center { text-align: center; }

.ddtl-fl-r { float: right; }

.ddtl-cf:after {
	content: '';
	clear: both;
	visibility: hidden;
	display: table;
	height: 0;
}

.ddtl-spacer {
	height: 1px;
	background: #99a5be;
	background: var(--color-p40);
	margin: 36px 0;
}

.ddtl-line {
	height: 4px;
	background: #38a9f2;
	background: var(--color-s100);
}

/**
 * Language selection
 */

.ddtl-form .ddtl-lang-selection {
	border-top: 1px solid #99a5be;
	border-top: 1px solid var(--color-p40);
	border-bottom: 1px solid #99a5be;
	border-bottom: 1px solid var(--color-p40);
}

.ddtl-form .ddtl-lang-selection .ddtl-lang-item {
	border: none;
	width: 100%;
	text-align: left;
	display: flex;
	padding: 0;
	min-height: 60px;
	align-items: center;
	height: 100%;
}

.ddtl-form .ddtl-lang-selection .ddtl-lang-item .ddtl-lang-icon {
	padding: 12px;
	margin-right: 18px;
}

.ddtl-form .ddtl-lang-selection .ddtl-lang-item .ddtl-lang-icon svg,
.ddtl-form .ddtl-lang-selection .ddtl-lang-item .ddtl-lang-icon img {
	width: 36px;
	height: 36px;
	box-shadow: 0px 0px 5px rgba(0,0,0,0.4);
	border-radius: 36px;
	display: block;
	position: static !important;
}

.ddtl-form .ddtl-lang-selection .ddtl-lang-item .ddtl-lang-name {
	flex: 1;
	padding: 4px 0;
	line-height: 125%;
}

.ddtl-form .ddtl-lang-selection .ddtl-lang-item:hover {
	background: #ebf6fe;
	background: var(--color-s10);
}

.ddtl-form .ddtl-lang-selection .ddtl-lang-item:hover .ddtl-lang-icon {
	background: #d7eefc;
	background: var(--color-s20);
}


/**
 * Intro
 */

.ddtl-intro .ddtl-startbtn {
	
}

/**
 * General info
 */

/* #generalInfoForm {
	display: flex;
	flex-direction: column;
} */

.ddtl-general-info-submit {
	align-self: flex-end;
}

.ddtl-form .ddtl-answers {
	display: flex;
	flex-direction: column;
}

.ddtl-form .ddtl-answers label {
	display: flex;
	flex-direction: row;
	gap: 12px;
}

/**
 * Questions
 */

.ddtl-questions .ddtl-question-progress {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
}

.ddtl-questions .ddtl-question-progress .ddtl-question-progress-item {
	height: 4px;
	background: #ccd2de;
	background: var(--color-p20);
	width: 100%;
}

.ddtl-questions .ddtl-question-progress .ddtl-question-progress-item:not(:first-child) {
	margin-left: 4px;
}

.ddtl-questions .ddtl-question-progress .ddtl-question-progress-item:not(:last-child) {
	margin-right: 4px;
}

.ddtl-questions .ddtl-question-progress .ddtl-question-progress-item.done {
	background: #38a9f2;
	background: var(--color-s100);
}

.ddtl-questions .ddtl-question-progress .ddtl-question-progress-item.active {
	background: #001f5c;
	background: var(--color-p100);
}


/**
 * Questions - Answers
 */

.ddtl-questions .ddtl-answers {
	border-top: 1px solid #99a5be;
	border-top: 1px solid var(--color-p40);
	border-bottom: 1px solid #99a5be;
	border-bottom: 1px solid var(--color-p40);
}

.ddtl-questions button.ddtl-answer {
	text-align: left;
	padding-left: 18px;
	border: none;
	border-left: 60px solid #99a5be;
	border-left: 60px solid var(--color-p40);
	position: relative;
	height: 60px;
	width: 100%;
	font-weight: normal;
}

.ddtl-questions button.ddtl-answer:hover,
.ddtl-questions button.ddtl-answer:focus {
	background: #ebf6fe;
	background: var(--color-s10);
	color: #001f5c;
	color: var(--color-p100);
}

.ddtl-questions button.ddtl-answer#answer__correct {
	border-left-color: #60baf5;
	border-left-color: var(--color-s80);
}

.ddtl-questions button.ddtl-answer#answer__mildly {
	border-left-color: #88cbf7;
	border-left-color: var(--color-s60);
}

.ddtl-questions button.ddtl-answer#answer__little {
	border-left-color: #afddfa;
	border-left-color: var(--color-s40);
}

.ddtl-questions button.ddtl-answer#answer__not {
	border-left-color: #d7eefc;
	border-left-color: var(--color-s20);
}

.ddtl-questions button.ddtl-answer:before {
	content: "";
	position: absolute;
	border: 2px solid #001f5c;
	border: 2px solid var(--color-p100);
	top: 50%;
	transform: translate(-50%, -50%);
	left: -30px;
	width: 24px;
	height: 24px;
	background: white;
	border-radius: 24px;
}

.ddtl-questions button.ddtl-answer.answer__selected:after {
	content: "";
	position: absolute;
	left: -30px;
	top: 50%;
	transform: translate(-50%, -50%);
	background: #001f5c;
	background: var(--color-p100);
	width: 12px;
	height: 12px;
	border-radius: 12px;
}

.ddtl-questions button.ddtl-backbtn {
	/* width: 100%; */
	margin-top: 36px;
}

.ddtl-questions button.ddtl-backbtn > * {
	vertical-align: middle;
	line-height: 1;
}

/* .ddtl-questions button.ddtl-backbtn:before {
	content: '';
	margin-right: 9px;
	width: 24px;
	height: 24px;
	background: #001f5c;
	background: var(--color-p100);
	display: inline-block;
} */


/**
 * Results
 */

.ddtl-results .ddtl-results-title {
	font-size: 28px;
	font-size: var(--h2-size);
	line-height: 140%;
	line-height: var(--h2-height);
	color: #001f5c;
	color: var(--h2-color);
	padding-bottom: 4px;
	border-bottom: 4px solid #99a5be;
	border-bottom: 4px solid var(--color-p40);
}

.ddtl-results .ddtl-result-smileys {
	display: flex;
	align-items: center;
	justify-content: center;
}

.ddtl-result-smileys .ddtl-result-smiley {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 9px;
	width: 48px;
	height: 48px;
	color: #ccd2de;
	color: var(--color-p20);
	border-radius: 48px;
}

.ddtl-result-smileys .ddtl-result-smileys-spacer {
	max-width: 48px;
	width: 100%;
	background: #ccd2de;
	background: var(--color-p20);
	height: 2px;
	margin: 0 12px;
}

.ddtl-form .ddtl-input {
	box-sizing: border-box;
	background: #f2f4f7;
	background: var(--color-p5);
	border: 1px solid #ccd2de;
	border: 1px solid var(--color-p20);
	/* height: 48px; */
	padding: 12px;
	font-size: 18px;
	font-size: var(--p-size);
	color: #001f5c;
	color: var(--p-color);
	border-radius: 2px;
	width: 100%;
}

.ddtl-form textarea.ddtl-input {
	min-height: 200px;
	resize: vertical;
	box-sizing: border-box;
}

.ddtl-reminder-form label.ddtl-checkbox {
	font-size: 18px;
	font-size: var(--p-size);
	line-height: 150%;
	line-height: var(--p-height);
	color: #001f5c;
	color: var(--p-color);
	display: block;
}

.ddtl-reminder-form label.ddtl-checkbox > input[type=checkbox] {
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background: #f2f4f7;
	background: var(--color-p5);
	border: 1px solid #ccd2de;
	border: 1px solid var(--color-p20);
	width: 24px;
	height: 24px;
	position: relative;
	vertical-align: top;
	margin-right: 18px;
	min-width: auto;
	border-radius: 2px;
}

.ddtl-reminder-form label.ddtl-checkbox > input[type=checkbox]:checked:before {
	content: '';
	background: #001f5c;
	background: var(--color-p100);
	width: 12px;
	height: 12px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	display: inline-block;
}

/* .ddtl-radios {
	padding-left: 24px;
} */

.ddtl-radios label.ddtl-radio {
	font-size: 18px;
	font-size: var(--p-size);
	line-height: 150%;
	line-height: var(--p-height);
	color: #001f5c;
	color: var(--p-color);
	display: block;
}

.ddtl-radios label.ddtl-radio + label.ddtl-radio {
	margin-top: 6px;
}

.ddtl-form input[type=radio] {
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background: #f2f4f7;
	background: var(--color-p5);
	border: 1px solid #ccd2de;
	border: 1px solid var(--color-p20);
	width: 24px;
	height: 24px;
	position: relative;
	vertical-align: top;
	margin-right: 18px;
	min-width: auto;
	border-radius: 24px;
	margin: 0;
}

.ddtl-form input[type=radio]:checked:before {
	content: '';
	background: #001f5c;
	background: var(--color-p100);
	width: 12px;
	height: 12px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	margin: 0;
	display: inline-block;
	border-radius: 12px;
}

label.ddtl-radio input[type=radio] {
	margin-right: 18px;
}

.ddtl-results-download {
	text-decoration: none;
}

.ddtl-results-download > * {
	vertical-align: middle;
}

.ddtl-results-download-verdict-pdf {
	display: flex;
	align-items: center;
}

.ddtl-download-icon {
	height: 48px;
	width: 48px;
	padding: 9px;
	background: #38a9f2;
	background: var(--color-s100);
	color: white;
	border-radius: 48px;
	margin: 0 12px 0 0;
	display: inline-block;
}

.ddtl-results-download .ddtl-download-text {
	display: inline-block;
	max-width: calc(100% - 77px);
}

.ddtl-results-download:hover,
.ddtl-results-download:hover .ddtl-download-text {
	color: #4d628d;
	color: var(--color-p70);
}

.ddtl-results-download:hover .ddtl-download-icon {
	background: #4d628d;
	background: var(--color-p70);
}

button.ddtl-form-repeat {
	background: #001f5c;
	background: var(--color-p100);
	color: white;
	font-weight: bold;
	border: none;
	width: 100%;
}

button.ddtl-form-repeat > * {
	vertical-align: middle;
	line-height: 1;
}

button.ddtl-form-repeat:hover {
	background: #4d628d;
	background: var(--color-p70);
	color: white;
}

.ddtl-results.verdict__low .ddtl-results-title {
	border-bottom-color: #e7000e;
	border-bottom-color: var(--color-a1);
}

.ddtl-results.verdict__low .ddtl-result-smileys .ddtl-result-smiley.smiley__negative {
	background: #e7000e;
	background: var(--color-a1);
	color: white;
}

.ddtl-results.verdict__neutral .ddtl-results-title {
	border-bottom-color: #ef6e00;
	border-bottom-color: var(--color-a2);
}

.ddtl-results.verdict__neutral .ddtl-result-smileys .ddtl-result-smiley.smiley__neutral {
	background: #ef6e00;
	background: var(--color-a2);
	color: white;
}

.ddtl-results.verdict__high .ddtl-results-title,
.ddtl-results.verdict__very_high .ddtl-results-title {
	border-bottom-color: #25a62d;
	border-bottom-color: var(--color-a3);
}

.ddtl-results.verdict__high .ddtl-result-smileys .ddtl-result-smiley.smiley__positive,
.ddtl-results.verdict__very_high .ddtl-result-smileys .ddtl-result-smiley.smiley__positive {
	background: #25a62d;
	background: var(--color-a3);
	color: white;
}

.ddtl-explanation-container {
	background: #ebf6fe;
	background: var(--color-s10);
}

table.ddtl-scala {
	margin: 0;
	border: none;
	border-collapse: collapse;
	border-spacing: 0;
	overflow: visible;
	width: 100%;
}

table.ddtl-scala thead tr > * {
	font-size: 18px;
	font-size: var(--p-size);
	line-height: 150%;
	line-height: var(--p-height);
	border: none !important;
}

table.ddtl-scala thead tr > *:last-child {
	text-align: right;
}

table.ddtl-scala thead tr > *:first-child {
	text-align: left;
}

table.ddtl-scala td {
	font-size: 18px;
	font-size: var(--p-size);
	line-height: 150%;
	line-height: var(--p-height);
	border: none !important;
	padding: 5px 0 0;
}

table.ddtl-scala input[type=radio] {
	position: absolute;
	z-index: -1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	border-radius: 2px;
	cursor: pointer;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	table.ddtl-scala input[type=radio] {
		background: none !important;
	}

	table.ddtl-scala input[type=radio]:checked + span {
		color: white;
	}
}

table.ddtl-scala input[type=radio]:checked {
	background: #afddfa;
	background: var(--color-s40);
}

table.ddtl-scala input[type=radio]:checked:before {
	display: none;
}

table.ddtl-scala input[type=radio]:hover {
	background: #ebf6fe;
	background: var(--color-s10);
}

table.ddtl-scala label.ddtl-scala-item {
	text-align: center;
	font-size: 18px;
	font-size: var(--p-size);
	padding: 8px;
	user-select: none;
	cursor: pointer;
	/* width: 36px; */
	margin: 0 auto;
	position: relative;
	z-index: 1;
	line-height: 20px;
	display: block;
	font-weight: 400;
}

table.ddtl-scala label.ddtl-scala-item:focus {
	outline: none;
	border: 3px solid var(--color-p100);
}

.ddtl-form .ddtl-notice {
	padding: 6px;
	font-weight: bold;
	background: #ebf6fe;
	background: var(--color-s10);
	color: #001f5c;
	color: var(--p-color);
	border: 1px solid #ebf6fe;
	border: 1px solid var(--color-s10);
}

.ddtl-form .ddtl-notice.notice__success {
	background: #38a9f2;
	background: var(--color-s100);
	color: white;
	text-align: center;
}

.ddtl-form .ddtl-input:disabled,
.ddtl-form input[type=checkbox]:disabled,
.ddtl-form input[type=radio]:disabled {
	cursor: not-allowed;
}


/**
 * Utility - Spacing
 */

.ddtl-space-b-sm {
	margin-bottom: 12px !important;
}

.ddtl-space-b-md {
	margin-bottom: 24px !important;
}

.ddtl-space-b-lg {
	margin-bottom: 36px !important;
}

.ddtl-space-t-sm {
	margin-top: 12px !important;
}

.ddtl-space-t-md {
	margin-top: 24px !important;
}

.ddtl-space-t-lg {
	margin-top: 36px !important;
}

.ddtl-cf:after {
	content: '';
	display: table;
	height: 0;
	clear: both;
}