:root {
	--highlight-color: #c91e4e;
	--primary-color: #002e5e;
	--tertiary-color: #006633;

	--accent-1: #b2d625;
	--accent-1-dark: #465707;
	--accent-1-light: #f5fae1;
	--accent-2: #afb2ef;
	--accent-2-dark: #444793;
	--accent-2-light: #ebecff;
	--accent-3: #c91e4e;
	--accent-3-dark: #6c0925;
	--accent-3-light: #fae0e7;

	--color-correct: #28a745;
	--color-green: #a0ce4e;
	--color-green2: #8AD0A0;
	--color-pink: #ffd1e8;
	--color-purple: #5c22ff;
	--color-visual: #879bc0;
	--color-wrong: #dc3545;
	
	--primary-bg-color: #fff;
	--secondary-bg-color: #f8f8ff;
	--tertiary-bg-color: #cad3e3;
	--light-blue-color: #E6F3FF;
	--accent-color: #EBECFF;

	--shadow-color: #d4dbe8;

	--primary-text-color: var(--primary-color);
	--light-text-color: #fff;

	--very-light-gray-color: #ebeef4;
	--light-gray-color: #a8b7d1;
	--border-color: #dadada;
	--tabs-border: #c1c1c1;

	--max-page-size: 1280px;

	--default-page-spacing: 24px;
	--default-border-radius: 7px;
}

.font-family-ssp {
	font-family: 'Rethink Sans', sans-serif;
}

.fontsize-18 {
	font-size: 16px;
}

#chapterintro.fontsize-18 p, #chapterintro.fontsize-18 span {
	font-size: 16px !important;
}

#chapterintro.font-family-ssp p, #chapterintro.font-family-ssp span, #hinttext.font-family-ssp span {
	font-family: 'Rethink Sans', sans-serif !important;
}

#chapterintro.font-family-ssp p, #chapterintro.font-family-ssp span, #hinttext.font-family-ssp span {
	color: var(--primary-color) !important;
}

#hinttext.fontsize-22 span {
    font-size: 22px !important;
}

.fontsize-22.exercise9-item {
	font-size: 16px !important;
	line-height: 1 !important;
	word-break: break-word;
}

.fontsize-24 {
	font-size: 24px;
}

.fontsize-36 {
	font-size: 36px;
}

.font-weight-600 {
	font-weight: 600 !important;
}

.bordersize-2 {
	border-width: 2px !important;
}

.text-red {
	color: var(--highlight-color);
}

.rounded-8 {
	border-radius: 8px !important;
}

.no-scrolling {
	overflow-x: hidden;
	overflow-y: hidden;
}

.button {
	height: auto;
	align-items: center;
	background-color: transparent;
	border: 0;
	color: var(--primary-color);
	cursor: pointer;
	display: inline-flex;
	font-family: 'Rethink Sans', sans-serif;
	font-size: 16px;
	font-weight: 600;
	gap: 8px;
	padding: 8px;
	transition: color .2s linear;
}

.button:hover, .button:focus-visible {
	color: var(--highlight-color);
}

.button.no-hover:hover {
	color: var(--primary-color);
	text-decoration: none;
}

.exerciseinfo {
	display: block !important;
}

.button.block {
	width: 100%;
	justify-content: center;
}

.button.blue {
	background-color: var(--primary-color);
	border: 2px solid var(--primary-color);
	border-radius: 40px;
	color: #fff;
	padding: 8px 16px 8px 24px;
	transition-property: color, background-color, border-color;
    transition-duration: .2s;
    transition-timing-function: linear;
	-webkit-tap-highlight-color: transparent;
}

.button.border {
	border: 2px solid var(--primary-color) !important;
	border-radius: 40px;
	padding: 8px 16px 8px 24px;
}

.button.round {
	width: 44px;
	height: 44px;
	justify-content: center;
	padding: 0;
}

.button.blue:hover {
	background-color: var(--primary-color);
	color: #fff;
}

.button.padding-right, .button.padding-right:hover {
	padding-right: 24px !important;
}

.button.close {
	width: 40px;
	height: 40px;
	background-image: url("../images/lucide-x-blue.svg") !important;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 24px;
}

.button.icon-left {
	padding-left: 16px;
	gap: 4px;
}

.audio-button {
	display: none !important;
}

#mobile-button-holder {
	align-items: center;
}

#mobile-hint-button {
	margin-left: 8px;
}

#desktop-hint-button-holder {
	display: none;
}

#container {
    width: 100%;
    background: #fff;
	margin: 0 auto;
	margin-bottom: 16px;
    position: relative;
    z-index: 1;
}

/*#main-page-wrapper {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

#main-page-inner-top-wrapper {
	flex-grow: 1;
	overflow-y: auto;
}

#main-page-inner-bottom-wrapper {
	flex-shrink: 0;
}*/

#newmenu, .main-container{
	width: 100%;
	max-width: var(--max-page-size);
	margin: 0 auto;
	padding: 0;
	position: relative;
}

header {
	width: 100%;
	background-color: #fff;
    display: flex;
	justify-content: center;
	padding: 8px 0;
}

header nav {
    width: 100%;
    align-items: center;
    display: flex;
    justify-content: space-between;
}

header nav a#nav-home {
	display: block;
    flex-shrink: 0;
}

header nav a#nav-home img {
	width: auto;
	height: 40px;
}

header nav .main-menu {
    display: none;
}

header nav #hamburgertoggle {
	width: 24px;
	height: 24px;
	display: inline-block;
	background: #fff url(/images/svg/align-justify.svg) no-repeat left top;
	cursor: pointer;
	position: relative;
  }
  
header nav #hamburgertoggle.active {
	background-image: url(/images/svg/x.svg);
  }

#mobile-menu-wrapper {
	width: 100%;
	height: calc(100% - 56px);
	background-color: #fff;
	box-sizing: border-box;
	display: none;
	flex-direction: column;
	justify-content: space-between;
	padding: 16px;
	position: fixed;
	left: 0;
	top: 56px;
	z-index: 3;
}

#mobile-menu-container {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

#mobile-menu-container ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#mobile-menu-container ul li {
	display: block;
	font-size: 16px;
	font-weight: 400;
}

#mobile-menu-container ul li a {
	border-radius: 8px;
	color: var(--primary-color);
	display: block;
	padding: 16px;
}

#mobile-menu-container .mobile-login-button {
	padding: 12px 16px;
}

#mobile-menu-container .mobile-login-button svg {
	width: 14px;
	height: 14px;
	margin-right: 10px;
	vertical-align: middle;
}

#go-back-holder {
	min-height: 44px;
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin: 8px 0;
}

.go-back-button {
	align-items: center;
	color: var(--primary-color);
	display: flex;
	font-size: 16px;
	text-decoration: none;
	transition: color .2s linear;
}

.go-back-button svg {
	width: 20px;
	height: 20px;
	margin-right: 8px;
	vertical-align: middle;
}

.go-back-button:hover {
	text-decoration: none;
}

.go-back-button:hover, .go-back-button:focus-visible {
	color: var(--highlight-color);
}

.loadingmessage {
	color: var(--primary-color);
	font-size: 18px;
	font-weight: 400;
}

#menuitems, #submenuitems-holder, .videos_holder {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

button.mainmenuitem, button.submenuitem, button.mediamenuitem {
	min-height: 110px;
	align-items: center;
	background-color: var(--light-blue-color);
	border: 0;
	border-radius: 8px;
	color: var(--primary-color);
	display: flex;
	font-family: 'Rethink Sans', sans-serif;
	font-size: 18px;
	font-weight: 600;
	gap: 12px;
	justify-content: space-between;
	margin: 0;
	padding: 16px;
	text-align: left;
}

button.mediamenuitem {
	flex-direction: column;
}

button.mainmenuitem.continue, button.submenuitem.continue {
	background-color: var(--color-pink);
	border: 2px solid var(--primary-color);
}

button.mainmenuitem .exerciseinfo, button.submenuitem .exerciseinfo {
	font-size: 16px;
	font-weight: 400;
}

.mainmenuitem .status, .submenuitem .status, .mediamenuitem .status, .subresultitem .status {
	width: 24px;
	height: 24px;
	background-color: unset;
	background-image: url("../images/lucide-arrow-right.svg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 24px 24px;
	flex-shrink: 0;
}

.mainmenuitem .status.done, .submenuitem .status.done, .mediamenuitem .status.done, .subresultitem .status.done {
	width: 24px;
	height: 24px;
	background-color: unset;
	background-image: url("../images/lucide-check.svg");
	background-position: center;
}

.mainmenuitem .status.done, .submenuitem .status.done {
	background-color: var(--color-correct);
	background-image: url("../images/lucide-check-white.svg");
	background-size: 20px;
	border-radius: 12px;
}

#submenutitle {
	color: unset;
	font-size: unset;
	padding: 0;
}

#videos_right, #all_videos {
	margin-top: 40px;
}

#progressbar {
	border-top: 1px solid var(--light-gray-color);
	padding: 16px 0;
}

#progressbar #bar,
.exercisetype20-container .exercise-progress-bar {
	align-items: center;
	display: flex;
	gap: 2px;
	justify-content: center;
	margin-bottom: 16px;
}

.exercisetype20-container .exercise-progress-bar {
	justify-content: start;
	margin-bottom: 0;
}

#progressbar #bar .progressitem,
.exercisetype20-container .exercise-progress-bar .exercise-progress {
	width: 100%;
	max-width: 73px;
	height: 16px;
	background-color: var(--very-light-gray-color);
	border-radius: 0;
	display: block;
}

.exercisetype20-container .exercise-progress-bar .exercise-progress {
	max-width: 20px;
	height: 20px;
	border-radius: 10px;
}

#progressbar #bar .progressitem.active,
.exercisetype20-container .exercise-progress-bar .exercise-progress.active {
	background-color: var(--tertiary-bg-color);
	border: 1px solid var(--primary-color);
	padding: 0 !important;
	outline: 0;
}

#progressbar #bar .progressitem.item-wrong,
.exercisetype20-container .exercise-progress-bar .exercise-progress.incorrect {
	background-color: var(--color-wrong);
	background-image: url("../images/lucide-x.svg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 14px 16px;
}

#progressbar #bar .progressitem.item-correct,
.exercisetype20-container .exercise-progress-bar .exercise-progress.correct {
	background-color: var(--color-correct);
	background-image: url("../images/lucide-check-white.svg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 16px 16px;
}

#progressbar #bar .progressitem:first-child {
	border-top-left-radius: 8px;
	border-bottom-left-radius: 8px;
}

#progressbar #bar .progressitem:last-child {
	border-top-right-radius: 8px;
	border-bottom-right-radius: 8px;
}

#program-info-wrapper {
	display: none;
}

#exercise-end-message {
	padding: 16px;
}

#exercise-end-title, #exercise-end-message-body, #exercise-end-certificate-score-wrapper {
	margin-bottom: 32px;
}

#exercise-end-certificate-score-wrapper {
	align-items: center;
	background-color: var(--color-pink);
	border-radius: 8px;
	display: inline-flex;
	flex-direction: column;
	gap: 16px;
	justify-content: center;
	padding: 16px;
}

#exercise-end-score-holder, #exercise-end-certificate-holder {
	align-items: center;
	gap: 8px;
}

#exercise-end-certificate-holder {
	display: inline-flex;
}

#exercise-end-certificate-holder img {
	height: 24px;
}

#resultitems .resultitem, #subresultitems .subresultitem, #detailresultitems .subresultitem {
	align-items: center;
	background-color: var(--light-blue-color);
	border: 0;
	border-radius: 8px;
	color: var(--primary-color);
	font-family: 'Rethink Sans', sans-serif;
	font-size: 18px;
	font-weight: 400;
	justify-content: space-between;
	margin: 0;
	margin-bottom: 16px;
	padding: 16px;
	position: relative;
	text-align: left;
}

.result-progress-bar {
    height: 16px;
    background-color: #fff;
    border-radius: 8px;
    margin-top: 16px;
}

.result-progress, .bar-darkgrey {
    height: 16px;
    background-color: var(--tertiary-bg-color);
    border-radius: 8px;
	margin: 0;
	position: relative;
}

#resultitems .resultitem button, .subresultitem-wrapper {
	padding-right: 55px;
}

.resultitem-end-icon {
	width: 24px;
	height: 24px;
	align-items: center;
	display: flex;
	justify-content: center;
	position: absolute;
	top: calc(50% - 12px);
	right: 15px;
}

#certificate-form {
	padding: 16px;
}

#certificate-form h2, #certificate-form p {
	margin-top: 0;
	margin-bottom: 16px;
}

.blue-bg-form {
	max-width: 500px;
	background-color: var(--light-blue-color);
	border-radius: 8px;
	box-sizing: border-box;
	padding: 16px;
}

.blue-bg-form * {
	box-sizing: border-box !important;
}

.blue-bg-form label {
	display: block;
	font-size: 16px;
	font-weight: 600;
	line-height: 15px;
	margin-bottom: 8px;
}

.blue-bg-form input[type=text], .input-field,
.exercisetype10a-container input,
.exercisetype10b-container input,
.exercisetype14-container input,
.input-wrapper textarea,
.exercisetype20-container textarea,
.exercisetypetk2ab-container input {
	width: 100%;
	height: 41px;
	background-color: #fff;
	border: 1px solid var(--tertiary-bg-color);
	border-radius: 8px;
	color: var(--primary-color);
	display: block;
	font-family: 'Rethink Sans', sans-serif;
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 16px;
	padding: 0 10px;
}

.exercisetype20-container textarea {
	appearance: none;
	min-height: 30px !important;
	font-size: 16px !important;
	padding: 0;
}

.exercisetype20-container.type23 textarea {
	background-color: transparent;
}

.exercisetype20-container.type23 textarea:focus {
	background-color: #fff;
}

.input-wrapper textarea {
	padding: 10px;
}

.exercisetype10a-container input,
.exercisetype10b-container input {
	margin: 10px 0;
}

.exercisetype14-container input {
	width: 80px;
	display: inline-block;
}

.exercisetypetk2ab-container input {
	margin-bottom: 0;
}

.answeritem-width-tk2ab {
	max-width: 100%;
}

.input-field {
	height: auto;
	padding: 10px;
}

.input-wrapper {
	display: inline-block;
	position: relative;
}

.exercisetype5a-container input, .exercisetype5b-container input {
	height: auto !important;
	min-height: 45px;
	background-color: var(--very-light-gray-color);
	border: 1px solid var(--tertiary-bg-color);
	border-radius: 8px;
	font-family: 'Rethink Sans', sans-serif;
	font-weight: 600;
	margin: 0 !important;
	padding: 4px 8px;
}

.exercisetype5b-container input {
	margin: 0 5px !important;
}

.exercisetype5a-container input:focus, .exercisetype5b-container input:focus,
.exercisetype10a-container input:focus,
.exercisetype10b-container input:focus,
.exercisetype14-container input:focus,
.input-wrapper textarea:focus,
.exercisetype20-container textarea:focus {
	background-color: var(--accent-2-light);
	border: 1px solid var(--accent-2-dark);
}

.blue-bg-form input[type=text]:focus, .input-field:focus {
	outline: 2px solid var(--primary-color);
	outline-offset: -1px;
}

.blue-bg-form label input::placeholder, .input-field::placeholder {
	color: #A8B7D1;
	opacity: 1;
}

#textcontainer #text,
.exercisetype11d-container #tasktext,
.exercisetype11d-container #feedbacktext,
.exercisetypetk1a1-container .text-holder,
.exercisetypetk1a2-container .text-holder,
.exercisetype11a-container .text-holder,
.exercisetypetk5c-container .text-holder,
.exercisetypetk1c-container .text-holder {
	background-color: var(--secondary-bg-color);
	border: 1px solid var(--tertiary-bg-color);
	border-radius: 16px;
	padding: 16px;
}

.exercisetypetk1c-container .text-holder {
	opacity: 0.5;
}

.exercisetypetk1c-container .current-row .text-holder {
	opacity: 1;
}

.exercisetypetk1c-container .row > div {
	min-height: 0;
}

.hint-button {
	min-height: 44px;
	align-items: center;
	background-color: #fff;
	border: 1px solid var(--tertiary-bg-color);
	border-radius: 8px;
	color: var(--primary-color);
	display: inline-flex;
	font-weight: 400;
	gap: 8px;
	padding: 8px 16px;
	position: relative;
	text-align: left;
}

.hint-button:hover {
	border: 1px solid var(--accent-2-dark);
}

.answer-button, .exercise9-item {
	width: 100% !important;
	min-height: 44px;
	align-items: center;
	background-color: #fff;
	border: 1px solid var(--tertiary-bg-color) !important;
	border-radius: 8px;
	color: var(--primary-color);
	display: flex;
	font-weight: 400;
	gap: 16px;
	padding: 8px 16px;
	position: relative;
	text-align: left;
}

.exercisetype2a-container #b_answer1,
.exercisetype2a-container #b_answer2,
.exercisetype2a-container #b_answer3,
.exercisetype2b-container #b_answer1,
.exercisetype2b-container #b_answer2,
.exercisetype2b-container #b_answer3,
.exercisetype2c-container #b_answer1,
.exercisetype2c-container #b_answer2,
.exercisetype2c-container #b_answer3 {
	display: flex;
}

.exercisetype1a-container #image, .exercisetype1b-container #image,
.exercisetype2a-container #image, .exercisetype2e-container #image, .exercisetype2r-container #image,
.exercisetype10a-container #image img, .exercisetype10b-container #image img,
.exercisetype11a-container #image img,
.exercisetype12-container #image img,
.exercisetype14-container #image img,
.exercisetypetk2ab-container #image img,
.exercisetypetk4c2-container #image {
	width: 100%;
	max-width: 100%;
	max-height: unset;
}

.exercisetype1a-container#imagecontainer, .exercisetype1b-container#imagecontainer,
.exercisetype2a-container#imagecontainer,
.exercisetype10a-container #image, .exercisetype10b-container #image,
.exercisetype12-container #image,
.exercisetype14-container #image,
.exercisetypetk2ab-container #image,
.exercisetypetk4c2-container #imagecontainer {
	width: 100%;
	max-width: 100%;
}

.exercisetypetk1a2-container #image {
	width: 100%;
}

.exercise9-item {
	outline: 0;
	justify-content: center;
	position: relative !important;
	text-align: center;
}

.exercisetype10b-container #oef10-oefening-tekst .sub-exercise {
	margin: 0;
}

.exercisetype10b-container #oef10-oefening-tekst .answeritem {
	padding: 0;
}

.answer-button:hover, .exercise9-item:hover {
	border: 1px solid var(--accent-2-dark) !important;
}

.answer-button .buttontext span {
	font-family: unset !important;
	font-size: unset !important;
}

.answer-button .radio-visual, .answer-button .checkbox-visual {
	width: 16px;
	height: 16px;
	border: 1px solid var(--color-visual);
	border-radius: 16px;
	flex-shrink: 0;
	position: relative;
}

.answer-button .checkbox-visual {
	width: 20px;
	height: 20px;
	border-radius: 4px;
}

.answer-button.answer-selected, .exercise9-item.highlighted {
	background-color: var(--accent-2-light) !important;
	border: 1px solid var(--accent-2-dark) !important;
}

.answer-button.answer-selected .radio-visual, .answer-button.answer-selected .checkbox-visual {
	border-color: var(--accent-2-dark);
}

.answer-button.answer-selected .checkbox-visual {
	background-color: var(--accent-2-dark);
	background-image: url("../images/lucide-check-white.svg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 16px 16px;
}

.answer-button.answer-selected .radio-visual::after {
	width: 10px;
	height: 10px;
	background-color: var(--accent-2-dark);
	border-radius: 10px;
	content: "";
	display: block;
	position: absolute;
	left: 2px;
	top: 2px;
}

#sortable-type7 {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-top: 16px;
	padding-bottom: 16px;
}

#sortable-type7 .sortable-row {
	align-items: center;
	display: flex;
	gap: 16px;
}

#sortable-type7 .sortable-index {
	flex-shrink: 0;
	font-weight: 700;
}

#sortable-type7 .sortable-item {
	min-height: 62px;
	align-items: center;
	background-color: #fff;
	border: 1px solid var(--tertiary-bg-color);
	border-radius: 8px;
	cursor: pointer;
	display: flex;
	flex-grow: 1;
	gap: 5px;
	padding: 16px;
	position: relative;
}

#sortable-type7 .sortable-item span {
	color: unset !important;
	font-size: unset !important;
}

.answer-button.correct, .exc4_answer_holder.correct .input-field,
.input-wrapper.correct input, .exercise-5b-holder.correct,
.exc6_answer_holder.correct .input-field,
#sortable-type7 .sortable-row.correct .sortable-item,
.exercisetype7-container .exerciseText.correct,
.exercisetype7b-container .exerciseText.correct,
.exercisetype7c-container .exerciseText.correct,
.exercisetype7d-container .exerciseText.correct,
.exercisetype7e-container .exerciseText.correct,
.exercisetype8-container .exerciseText.correct,
.exercise9-item.correct,
.exercisetype12-container #dropzone.correct,
.drag-destination.correct,
.exercisetypetk3a-container .answeritem.correct,
.exercisetypetk3b-container .answeritem.correct,
.exercisetypetk5a-container .answeritem.correct {
	background-color: var(--accent-1-light) !important;
	background-image: none;
	border: 1px solid var(--accent-1) !important;
	outline: none;
}

.answer-button.incorrect, .exc4_answer_holder.incorrect .input-field,
.input-wrapper.incorrect input, .exercise-5b-holder.incorrect,
.exc6_answer_holder.incorrect .input-field,
#sortable-type7 .sortable-row.incorrect .sortable-item,
.exercisetype7-container .exerciseText.incorrect,
.exercisetype7b-container .exerciseText.incorrect,
.exercisetype7c-container .exerciseText.incorrect,
.exercisetype7d-container .exerciseText.incorrect,
.exercisetype7e-container .exerciseText.incorrect,
.exercisetype8-container .exerciseText.incorrect,
.exercise9-item.incorrect,
.exercisetype12-container #dropzone.incorrect,
.drag-destination.incorrect,
.exercisetypetk3a-container .answeritem.incorrect,
.exercisetypetk3b-container .answeritem.incorrect,
.exercisetypetk5a-container .answeritem.incorrect,
.exercisetypetk5b-container .answeritem.incorrect {
	background-color: var(--accent-3-light) !important;
	background-image: none;
	border: 1px solid var(--accent-3) !important;
	color: var(--accent-3-dark);
	outline: none;
}

.input-wrapper.incorrect input {
	color: var(--primary-color);
}

.answer-button.correct::after, .answer-button.incorrect::after,
.exc4_answer_holder.correct::after, .exc4_answer_holder.incorrect::after,
.input-wrapper.correct::after, .input-wrapper.incorrect::after,
.exercise-5b-holder.correct::after, .exercise-5b-holder.incorrect::after,
.exc6_answer_holder.correct::after, .exc6_answer_holder.incorrect::after,
#sortable-type7 .sortable-row.correct .sortable-item::after, #sortable-type7 .sortable-row.incorrect .sortable-item::after,
.exercisetype7-container .exerciseText.correct::after, .exercisetype7-container .exerciseText.incorrect::after,
.exercisetype7b-container .exerciseText.correct::after, .exercisetype7b-container .exerciseText.incorrect::after,
.exercisetype7c-container .exerciseText.correct::after, .exercisetype7c-container .exerciseText.incorrect::after,
.exercisetype7d-container .exerciseText.correct::after, .exercisetype7d-container .exerciseText.incorrect::after,
.exercisetype7e-container .exerciseText.correct::after, .exercisetype7e-container .exerciseText.incorrect::after,
.exercisetype8-container .exerciseText.correct::after, .exercisetype8-container .exerciseText.incorrect::after,
.exercise9-item.correct::after, .exercise9-item.incorrect::after,
.exercisetype12-container #dropzone.correct::after, .exercisetype12-container #dropzone.incorrect::after,
.drag-destination.correct::after, .drag-destination.incorrect::after,
.exercisetype41-container .dropzone.correct::after, .exercisetype41-container .dropzone.incorrect::after,
.exercisetypetk3a-container .answeritem.correct::after, .exercisetypetk3a-container .answeritem.incorrect::after,
.exercisetypetk3b-container .answeritem.correct::after, .exercisetypetk3b-container .answeritem.incorrect::after,
.exercisetypetk5a-container .answeritem.correct::after, .exercisetypetk5a-container .answeritem.incorrect::after,
.exercisetypetk5b-container .answeritem.correct::after, .exercisetypetk5b-container .answeritem.incorrect::after,
.hotspot.correct .hotspot-inner-holder::after, .hotspot.incorrect .hotspot-inner-holder::after {
	width: 26px;
	height: 26px;
	background-color: var(--accent-1);
	background-image: url("../images/lucide-check-white.svg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 16px 16px;
	border-radius: 26px;
	content: "";
	display: block;
	position: absolute;
	top: calc(50% - 13px);
	right: -13px;
	z-index: 99;
}

#typetk2ab-question.correct::after,
#typetk2ab-question.incorrect::after {
	display: none;
}

#oef10-oefening-tekst .input-wrapper.correct::after,
#oef10-oefening-tekst .input-wrapper.incorrect::after {
	top: calc(50% - 14px);
}

.exercisetype14-container .input-wrapper.correct::after,
.exercisetype14-container .input-wrapper.incorrect::after {
	right: -4px;
}

.input-wrapper.correct, .input-wrapper.incorrect {
	margin-right: 13px;
}

.answer-button.incorrect::after, .exc4_answer_holder.incorrect::after,
.input-wrapper.incorrect::after, .exercise-5b-holder.incorrect::after,
.answer-button.incorrect::after, .exc6_answer_holder.incorrect::after,
#sortable-type7 .sortable-row.incorrect .sortable-item::after,
.exercisetype7-container .exerciseText.incorrect::after,
.exercisetype7b-container .exerciseText.incorrect::after,
.exercisetype7c-container .exerciseText.incorrect::after,
.exercisetype7d-container .exerciseText.incorrect::after,
.exercisetype7e-container .exerciseText.incorrect::after,
.exercisetype8-container .exerciseText.incorrect::after,
.exercise9-item.incorrect::after,
.exercisetype12-container #dropzone.incorrect::after,
.drag-destination.incorrect::after,
.exercisetype41-container .dropzone.incorrect::after,
.exercisetypetk3a-container .answeritem.incorrect::after,
.exercisetypetk3b-container .answeritem.incorrect::after,
.exercisetypetk5a-container .answeritem.incorrect::after,
.exercisetypetk5b-container .answeritem.incorrect::after,
.hotspot.incorrect .hotspot-inner-holder::after {
	background-color: var(--accent-3);
	background-image: url("../images/lucide-x.svg");
}

.answer-button.answer-selected.correct .radio-visual,
.answer-button.answer-selected.correct .checkbox-visual {
	border-color: var(--accent-1-dark);
}

.answer-button.answer-selected.correct .checkbox-visual {
	background-color: var(--accent-1-dark);
}

.answer-button.answer-selected.incorrect .radio-visual,
.answer-button.answer-selected.incorrect .checkbox-visual {
	border-color: var(--accent-3-dark);
}

.answer-button.answer-selected.incorrect .checkbox-visual {
	background-color: var(--accent-3-dark);
}

.answer-button.answer-selected.correct .radio-visual::after {
	background-color: var(--accent-1-dark);
}

.answer-button.answer-selected.incorrect .radio-visual::after {
	background-color: var(--accent-3-dark);
}

.exc4_answer_holder, .exc6_answer_holder {
	margin-bottom: 16px;
	position: relative;
}

#exc6_answer textarea {
	height: 121px;
}

.exercisetype4_answerblock {
	max-width: 100%;
}

.exercise-5b-holder.correct {
	position: relative;
}

.exercisetype5b-container .answeritem #b_ok {
	top: calc(50% - 22px);
	right: -80px;
}

#exercisetype7-left-side, #exercisetype7-right-side,
#exercisetype8-left-side, #exercisetype8-right-side,
.exercisetype9-container .left-side, .exercisetype9-container .right-side {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

#exercisetype8-left-side {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
}

#exercisetype8-right-side {
	align-items: start;
}

.exercisetype9-container .left-side {
	padding-right: 32px;
}

.exercisetype9-container .right-side {
	padding-left: 32px;
}

.exercisetype7b-container .answeritem,
.exercisetype7c-container .answeritem,
.exercisetype7d-container .answeritem,
.exercisetype7e-container .answeritem,
.exercisetype9-container .answeritem {
	width: 100%;
}

#screenplayer .exercisetype9-container > div > button {
	font-weight: normal;
}

.exercisetype7-container .exerciseText,
.exercisetype7b-container .exerciseText,
.exercisetype7c-container .exerciseText,
.exercisetype7d-container .exerciseText,
.exercisetype7e-container .exerciseText,
.exercisetype8-container .exerciseText {
	min-height: 62px;
	align-items: center;
	background-color: #fff;
	border: 1px solid var(--tertiary-bg-color);
	border-radius: 8px;
	display: flex;
	gap: 8px;
	justify-content: space-between;
	padding: 8px 16px;
}

.exercisetype8-container .exerciseText {
	min-height: 0;
	display: inline-flex;
	flex-shrink: 0;
}

.exercisetype7-container .exerciseText.ui-draggable-dragging,
.exercisetype7b-container .exerciseText.ui-draggable-dragging,
.exercisetype7c-container .exerciseText.ui-draggable-dragging,
.exercisetype7d-container .exerciseText.ui-draggable-dragging,
.exercisetype7e-container .exerciseText.ui-draggable-dragging,
.exercisetype8-container .exerciseText.ui-draggable-dragging {
	background-color: var(--accent-2-light);
	border: 1px solid var(--accent-2-dark);
	/*transform: rotate(-4deg);*/
}

.drag-destination, .exercisetype8-container .text-input {
	background-color: var(--accent-2-light) !important;
	border: 0 !important;
	border-radius: 8px;
	outline: 0 !important;
}

.drag-destination.ui-droppable-hover,
.exercisetype8-container .ui-droppable-hover .text-input {
	background-color: var(--accent-2-dark) !important;
}

#drag-origins .center-y-exercisetype40 {
	top: unset;
	transform: unset;
}

.exercisetype40-container #drag-origins > div > img,
.exercisetype40-container .drag-destination > div > img {
	max-width: 87px;
}

.exercisetype40-container .dropzone .answeritem {
	margin: 0;
}

.exercisetype40-container .drag-destination {
	border: 1px solid var(--accent-2-dark) !important;
	padding-bottom: 15px;
	position: relative;
}

.exercisetype40-container .drag-destination.correct {
	border-color: var(--accent-1) !important;
}

.exercisetype40-container .drag-destination.incorrect {
	border-color: var(--accent-3) !important;
}

.exercisetype40-container .drag-origin,
.exercisetype41-container .drag-origin {
	border: 1px solid var(--accent-2-dark);
	border-radius: 8px;
}

.exercisetype40-container #drag-origins > div > span,
.exercisetype40-container #drag-destinations > div > span,
.exercisetype40-container .dropzone span.answeritem {
	min-width: unset;
	max-width: unset !important;
    background-color: #fff;
	padding: 5px 10px;
    text-align: center;
}

.exercisetype41-container .dropzone {
	width: 100%;
	height: 100%;
	border-radius: 8px;
	position: relative;
}

.exercisetype41-container .dropzone.drophover {
	background-color: rgba(235, 236, 255, 0.50);
	border: 1px solid var(--accent-2-dark);
}

.exercisetype41-container .dropzone.correct {
	background-color: rgba(245, 250, 225, 0.50);
	border: 1px solid var(--accent-1);
}

.exercisetype41-container .dropzone.incorrect {
	background-color: rgba(250, 224, 231, 0.50);
	border: 1px solid var(--accent-3);
}

.exercisetype41-container #drag-destinations .dropzone {
	align-items: center;
	display: flex;
	justify-content: center;
}

.exercisetype41-container #drag-destinations .dropzone img {
	max-height: 100%;
}

.exercisetype8-container .text-input {
	width: auto;
	height: auto;
	align-items: center;
	display: flex;
	justify-content: center;
	padding: 0;
}

.exercisetype8-container .sentence-holder {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.exercisetype12-container .interaction-area {
	width: 100%;
	flex-direction: column;
}

.exercisetype12-container #outerdropzone {
	height: auto;
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 8px;
	justify-content: space-between;
	padding: 0;
}

.exercisetype12-container #dropzone {
	width: 100%;
	min-height: 130px;
	background-color: var(--accent-2-light);
	border: 1px solid var(--accent-2);
	border-radius: 8px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 8px;
}

.exercisetype12-container #dropzone.drophover {
	background-color: var(--accent-2-light);
	border: 1px solid var(--accent-2-dark);
}

.exercisetype12-container #dropzone .coin-button {
	left: unset !important;
	top: unset !important;
	position: relative !important;
}

.exercisetype12-container #coins {
	height: auto;
	flex: unset;
}

.exercisetype12-container #coins > div {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin-bottom: 8px;
}

#exercisetype5a-mobile-bottom-holder {
	width: 100%;
	background-color: #fff;
	padding: 10px 0;
	text-align: center;
}

.exercisetype5a-container #words {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	padding: 11px 16px;
}

.exercisetype5a-container #words .answer-height {
	min-height: 0;
}

.exercisetype5a-container .sentence-holder {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.exercisetype5b-container .answer-ghost {
	color: var(--primary-color);
	font-weight: 700;
}

.exercisetypetk3a-container .answeritem,
.exercisetypetk3b-container .answeritem,
.exercisetypetk5a-container .answeritem,
.exercisetypetk5a-container #words .answeritem,
.exercisetypetk5b-container .answeritem {
	align-items: center;
	background-color: #fff;
	border: 1px solid var(--tertiary-bg-color);
	border-radius: 8px;
	cursor: pointer;
	display: inline-flex;
	justify-content: center;
	padding: 10px;
	position: relative;
}

.exercisetypetk5b-container .answeritem {
	justify-content: start;
}

.exercisetypetk5a-container #words .answeritem {
	padding: 10px 15px;
}

.exercisetypetk3a-container .answeritem:hover,
.exercisetypetk3a-container .answeritem:focus,
.exercisetypetk3b-container .answeritem:hover,
.exercisetypetk3b-container .answeritem:focus,
.exercisetypetk5a-container .answeritem:hover,
.exercisetypetk5a-container .answeritem:focus,
.exercisetypetk5a-container .answeritem.answered,
.exercisetypetk5a-container #words .answeritem:focus,
.exercisetypetk5a-container #words .answeritem:hover,
.exercisetypetk5a-container #words .answeritem.answered,
.exercisetypetk5b-container .answeritem:focus,
.exercisetypetk5b-container .answeritem:hover {
	background-color: var(--accent-2-light);
	border: 1px solid var(--accent-2-dark);
}

.exercisetypetk3a-container .answeritem img {
	max-width: 315px;
	max-height: unset;
}

.exercisetypetk5b-container #typetk5b-questions .selected,
.exercisetypetk5b-container #typetk5b-questions .answered {
	height: auto;
	background-color: var(--accent-2-light) !important;
}

.exercisetypetk5b-container #typetk5b-questions .correct {
	background-color: var(--accent-1-light) !important;
	border: 1px solid var(--accent-1);
}

.exercisetypetk5b-container #typetk5b-questions .incorrect {
	background-color: var(--accent-3-light) !important;
	border: 1px solid var(--accent-3);
}

.coin-button {
	width: 50px;
	height: 50px;
	background-color: #fff;
	background-image: none;
	border: 1px solid var(--tertiary-bg-color);
	border-radius: 8px;
	cursor: pointer;
	display: inline-block;
	padding: 5px;
	text-align: center;
}

.coin-button.clone {
	border: 1px solid var(--accent-2-dark);
}

.coin-button:focus {
	outline: 1px solid var(--accent-2-dark);
}

.coin5euro, .coin10euro, .coin20euro, .coin50euro {
	width: 93px;
}

.coin-button img {
	width: auto;
	height: 100%;
	pointer-events: none;
}

.exercisetypetk5b-container .hotspot {
	background-color: rgba(235, 236, 255, 0.5) !important;
	border: 1px solid var(--accent-2-dark);
	border-radius: 0;
	opacity: 1;
}

.hotspot.mouseover, .hotspot.outline.mouseover,
.hotspot.outline.selected, .hotspot.outline:focus-visible {
	background-color: rgba(235, 236, 255, 0.5);
	border: 1px solid var(--accent-2-dark) !important;
	border-radius: 0;
	opacity: 1;
}

.hotspot.correct, .hotspot.outline.correct {
	background-color: rgba(245, 250, 225, 0.5) !important;
	border: 1px solid var(--accent-1) !important;
	border-radius: 0;
	opacity: 1;
	outline: none;
}

.hotspot.incorrect, .hotspot.outline.incorrect {
	background-color: rgba(250, 224, 231, 0.5) !important;
	border: 1px solid var(--accent-3) !important;
	border-radius: 0;
	opacity: 1;
	outline: none;
}

.hotspot-inner-holder {
	width: 100%;
	height: 100%;
	display: block;
	position: relative;
}

#microlearning-start-wrapper, #microlearning-end-wrapper {
	width: 100%;
	height: 100%;
	align-items: center;
	background-color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 9999;
}

#microlearning-end-wrapper {
	display: none;
}

.micro-logo {
	height: 48px;
}

#microlearning-start-wrapper .button, #microlearning-end-wrapper .button {
	height: auto;
	align-items: center;
	background-color: transparent;
	border: 0;
	color: var(--primary-color);
	cursor: pointer;
	display: inline-flex;
	font-size: 16px;
	font-weight: 600;
	gap: 8px;
	padding: 8px;
	transition: color .2s linear;
}

#microlearning-start-wrapper .button.no-hover:hover, #microlearning-end-wrapper .button.no-hover:hover {
	color: var(--primary-color);
	text-decoration: none;
}

#microlearning-start-wrapper .button.border, #microlearning-end-wrapper .button.border {
	border: 2px solid var(--primary-color) !important;
	border-radius: 40px;
	padding: 8px 16px 8px 24px;
}

#b_ok:focus {
	outline: none;
}

#b_ok.button.blue {
	border: 2px solid var(--primary-color) !important;
}

#b_ok:focus-visible {
	outline: 2px solid #5E9ED6;
}

@media (max-width: 374px) {
	.resultitem .resultinfo, .subresultitem .resultinfo {
		font-size: 12px !important;
	}
}

@media (min-width: 768px) {
	.fontsize-18 {
		font-size: 18px;
	}

	#chapterintro.fontsize-18 p, #chapterintro.fontsize-18 span {
		font-size: 18px !important;
	}

	.fontsize-22.exercise9-item {
		font-size: 22px !important;
		line-height: 1 !important;
		word-break: unset;
	}

	#question.fontsize-22 {
		font-size: 24px !important;
		font-weight: 700;
	}

	/*#main-page-wrapper {
		height: auto;
		display: block;
	}

	#main-page-inner-top-wrapper {
		overflow-y: unset;
	}*/

	header {
		padding: 16px 0;
	}

	#menuitems, #submenuitems-holder, .videos_holder {
		grid-template-columns: 1fr 1fr;
	}

	#go-back-holder {
		margin: 0;
	}

	#program-info-wrapper {
		display: block;
	}

	#mobile-button-wrapper {
		display: none;
	}

	#mobile-hint-button-holder {
		display: none;
	}

	#desktop-hint-button-holder {
		display: block;
	}

	.audio-button {
		display: inline-flex !important;
	}

	#container {
		margin-bottom: 32px;
	}

	#progressbar #bar {
		gap: 8px;
	}

	#exercisetype5a-mobile-bottom-holder {
		display: none;
	}

	.exercisetype5a-container #words {
		flex-direction: column;
		gap: 0;
	}

	.exercisetype5a-container #words .answer-height {
		min-height: 60px;
	}

	#exc6_answer textarea {
		height: auto;
		resize: none;
	}

	.exercisetype12-container #outerdropzone {
		flex-direction: row;
	}
}

@media (min-width: 991.98px) {
    header {
		height: 92px;
		padding: 16px 0;
	}

	header nav #hamburgertoggle {
		display: none;
	}

    header nav a#nav-home img {
		height: 48px;
	}

    header nav .main-menu {
        width: 100%;
		display: block;
        flex-grow: 1;
		justify-self: end;
		padding: 0;
		line-height: 60px;
		text-align: right;
		align-items: center;
		justify-content: space-between;
	}

	header nav li {
        display: inline-block;
		margin-left: 40px;
		position: relative;
	}

	header nav li:first-child {
		margin-left: 0;
	}

	header nav li a {
		color: var(--primary-color);
		font-size: 20px;
		font-weight: 700;
		margin: 0;
		padding: 0;
		position: relative;
		text-decoration: none;
		transition: color .2s linear;
		z-index: 1;
	}

	header nav li a:hover {
		text-decoration: none;
	}

	header nav li a:hover, header nav li a:focus-visible {
		color: var(--highlight-color);
	}

	#mainmenu-my-account {
		font-weight: 400;
		position: relative;
		z-index: 1;
	}

	#mainmenu-my-account-item:hover #mainmenu-my-account-submenu,
	#mainmenu-my-account-item:focus-within #mainmenu-my-account-submenu {
		display: block;
	}

	#mainmenu-my-account-item:hover #mainmenu-my-account svg:last-child {
		transform: rotate(180deg);
	}

	#mainmenu-my-account svg:first-child {
		width: 18px;
		height: 18px;
		margin-top: -2px;
		margin-right: 4px;
		vertical-align: middle;
	}

	#mainmenu-my-account svg:last-child {
		width: 14px;
		height: 14px;
		margin-left: 10px;
		vertical-align: middle;
	}

	#mainmenu-my-account-submenu {
		width: calc(100% + 40px);
		background-color: #fff;
		border: 1px solid var(--border-color);
		border-radius: 8px;
		display: none;
		padding-top: 50px;
		padding-bottom: 10px;
		position: absolute;
		left: -20px;
		top: 0;
		z-index: 0;
	}

	#mainmenu-my-account-submenu a {
		width: 100%;
		display: block;
		font-weight: 400;
		line-height: normal;
		margin: 0;
		margin-left: 20px;
		margin-bottom: 10px;
		padding: 0;
		text-align: left;
	}

	header nav a#nav-home img {
		height: 48px;
	}

	.go-back-button {
		font-size: 18px;
		font-weight: 700;
	}

	.go-back-button svg {
		vertical-align: top;
	}

	#newmenu, .main-container {
		padding: 0 48px;
	}

	.exercisetype7b-container #exercisetype7-left-side, .exercisetype7b-container #exercisetype7-right-side,
	.exercisetype7c-container #exercisetype7-left-side, .exercisetype7c-container #exercisetype7-right-side,
	.exercisetype7d-container #exercisetype7-left-side, .exercisetype7d-container #exercisetype7-right-side,
	.exercisetype7e-container #exercisetype7-left-side, .exercisetype7e-container #exercisetype7-right-side {
		flex-direction: row;
		gap: 16px;
	}
}

@media (min-width: 1200px) {
	#newmenu, .main-container {
		padding: 0 160px;
	}

	#menuitems, #submenuitems-holder, .videos_holder {
		grid-template-columns: 1fr 1fr 1fr;
	}
}