pre.sf-dump, pre.sf-dump .sf-dump-default, #intro-text-new, .lead, div#header-intro p, div#header-intro-block-spacer-container, #placeholder-container, #header-intro-right{display:none !important;}
#header-intro-left{height:unset;}
.bg-intro-blauw{background-color:unset;}
#header-intro{padding: 1rem;}
#header-container{min-height:unset;}
div#oefenaanvraag {margin-top: 0px; font-size: 1rem;}
.heading h1 {padding-top: 1rem; padding-bottom: 1rem;}
#header-intro h1{margin-bottom:0px;}
h3, .h3 {font-weight: 500; line-height: 1.3334; font-style: italic; margin-bottom: 1rem;}

.column {flex: 1;}
#oefenaanvraag.columns .column{background:#8FCAE7; padding: 1rem; box-sizing: border-box; max-width: 50%; position: relative;}
#oefenaanvraag.columns .column:first-of-type{background:#F3F3F3; width:45%; margin-right:5%; margin-left:0px;}
#oefenaanvraag.columns .column.introcolumn{background:#8FCAE7;}
#oa-title{font-size:1.2rem; font-weight: bold;}
@media (min-width: 1240px) {
    main *, .menu-helper, .breadcrumbs {max-width: 1170px; margin-left:auto; margin-right:auto;}
	main .columns {max-width:100%;}
	#oefenaanvraag.columns {max-width: 1170px;}
}
p{margin-bottom: 0.5rem;}
#oa-left.opacitytransition {opacity: 1; animation: appearOpacity 2s forwards;}
#oa-right.opacitytransition {opacity: 1; animation: appearOpacityDelay 1s forwards;}
#oefenaanvraag li p{margin-bottom: 0px;}
#icon {width: 20%; position: absolute; right: 1rem; top: 1rem;}
#character {width: 20%; position: absolute; right: 0px; bottom: 0px;}
#oa-cta-left {margin-top: 1rem;}

a#oa-cta-left:focus-visible {color: #154273; border: dashed 2px #0115ff; box-sizing: border-box;background-color: #ffffff;}

/* WCAG 2.4.7: zichtbare focus. site.css zet input:focus-visible op outline:none; hier dezelfde gestippelde focusstijl als de knoppen */
#oefenaanvraag input.custom-control-input[type="text"]:focus-visible {outline: 2px dashed #0115ff; outline-offset: 2px;}
/* de afbeeldingslink is inline; de focusrand op de afbeelding zelf tekenen zodat hij rond de afbeelding staat */
#oa-image a:focus-visible img, #oa-image-right a:focus-visible img {outline: 2px dashed #0115ff; outline-offset: 2px;}
a#oefenaanvraag-terugknop:focus-visible {outline: 2px dashed #0115ff; outline-offset: 2px;}

#oa-right-content {max-width: 70%; margin-left: 0px;}
#oa-right{min-height: 340px; display:none;}
#oefenaanvraag.columns #oa-image-right{height:fit-content;}

.invoervelden{margin-top:0.5rem; width:100%; position:relative;height:auto; margin-bottom: 1rem;}
input{width: 6vw !important; background-color: transparent; border: 0px;     position: absolute; box-sizing: border-box; padding: 0; left: 0; height: 1.1875rem; opacity: 0; z-index: -1;}

.custom-control-label::before{margin-top:0.2rem; border-radius: 50%;}

.input-row{line-height:2; vertical-align: text-top; display:inline-block; width:100%;}
.input-row label{padding-left: 2rem; line-height: 1.25; padding-top: 0.375rem;}
#formulier-content .group-label {font-weight: bold;}
#formulier-content {margin-top: 1.5rem;}
.input-row.input-valuta:before {position: absolute; background-color: white; z-index: 3; content: "€"; font-weight: 400; padding: 0px 0.75rem; margin: 4px; font-size: 1rem; line-height: 2.5;}
input.custom-control-input {padding-left: 2.4rem;}
.input-row.input-date input.custom-control-input {padding-left: 0.5rem;}
.input-row.input-radio.input-dimmed {opacity: 0.6;}
input.custom-control-input[type="text"] {opacity: 1; z-index: 1; width: 100% !important; line-height: 2; height: 2rem; background-color: #ffffff; box-sizing: border-box; border: solid 2px;}

.input-row.input-text{padding-bottom:3rem; line-height:3;}
.input-row.input-text input {padding-left: 0.5rem; line-height: 3; height: 3rem;}
.input-row.input-text.input-valuta input {padding-left: 3rem;}

#oa-error {position: relative; padding: .75rem 1.25rem; margin-bottom: 1rem; color: #6f1610; background-color: #f7d5d2; border-color: #f3c4c0; border: 1px solid transparent;}
#oa-image img {margin-top: 1rem;}

#oefenaanvraag li{line-height: 1.3;}
a#oa-cta-right {margin-left: 0px;}
#oefenaanvraag-terugknop{font-size:0.8rem; background-image:url("../images/delta-links.svg"); background-size: 0.8rem; padding-left:1.2rem; display:inline-block; background-repeat: no-repeat; background-position: left center; margin-bottom: 0.25rem; cursor: pointer;}
/* terug is nu een echte link (href) voor toetsenbordbediening; uiterlijk gelijk houden aan de oude versie zonder href */
a#oefenaanvraag-terugknop, a#oefenaanvraag-terugknop:hover {color: inherit; text-decoration: none;}
#sleeptool-skipknop{font-size:0.8rem; background-image:url("../images/delta-rechts.svg"); background-size: 0.8rem; padding-left:1.2rem; display:inline-block; background-repeat: no-repeat; background-position: left center; margin-bottom: 0.25rem; cursor: pointer;}

.venster-title {position: absolute; right: 0px; top: -2.1rem; padding: 0.5rem; background-color: #fef4db; font-size: 0.8rem;  color: #154273;}

#oefenaanvraag-progress, .oefenaanvraag-progress {display: flex; width: 100%; max-width: 1170px; margin-left: auto;margin-right: auto; background-color: #ddeff8; z-index: -2;}
.progress-chapter {display: block; font-size: 0.8rem; height: 2rem; line-height: 2rem; width: 100%; text-align: center; border: 1px solid #8fcae7; position: relative;}
span.pc-back {width: 0%;  display: inline-block; height: 2rem; position: absolute; left: 0px; background-color: #8fcae7; z-index: 0;}
span.pc-front {position: relative; z-index: 2;}
.progress-title {width: 100%; display: block; font-size: 0.8rem; text-align: center; max-width: 1170px; margin-left: auto; margin-right: auto; background-color: #ddeff8; line-height: 1.5rem; margin-bottom: 0.2rem; text-transform: uppercase; margin-top:0.5rem; color:#01689b;}

a.button{color: #ffffff; width:auto; padding-left: .75rem; padding-right: .75rem; border: 0px solid; margin-right: 0.5rem;  font-size: 1.2rem; cursor: pointer;}
a.button:hover{transform: scale(1.03);}

a.button.subtle-button {background-color: unset; color:#000000;}
a.button.subtle-button:before {content: ''; background-image: url(../images/delta-rechts.svg); width: 1rem;  height: 1rem; display: inline-block; margin-right: 0.5rem; margin-left: 0.5rem; vertical-align: middle;}
main .columns .column:first-of-type .button.subtle-button:nth-of-type(1) {margin-bottom: 0px;}
main .columns .column:first-of-type .button.subtle-button:nth-of-type(2) {margin-top: 0px;}
main .columns .column:first-of-type .button.subtle-button {margin-bottom: 0px;}

/* Quiz uitzonderingen */

#quiz_15, #quiz_16, #quiz_22, #sleeptool {position: fixed; top: 0px; bottom:0px; padding-top: 8rem; z-index: 999; background: linear-gradient(180deg, #f9e11e, #ffb612); width: 100%; max-width: 100%; height: 100vh; display: block; margin-top: 0px; overflow-y:auto;}

#sleeptool {padding-top: 4rem;}

@media (max-width: 768px) {
	#oefenaanvraag.columns .column{max-width:90%; width:90%; margin-left:5%;}
	#oefenaanvraag.columns .column:first-of-type{max-width:90%; width:90%; margin-left:5%;}
	#quiz_15.quiz .screen .text.correct, #quiz_15.quiz .screen .text.wrong, #quiz_16.quiz .screen .text.correct, #quiz_22.quiz .screen .text.correct, #quiz_16.quiz .screen .text.wrong, #quiz_22.quiz .screen .text.wrong{max-width:100%;}	
	#quiz_15, #quiz_16, #quiz_22, #sleeptool{padding-top:3rem;}
	div#dragtool_app {width: 90%;}
	div#oa-right:before {content: ""; background-image: url(/assets/images/arrow-up.webp); position: absolute; right: calc(50% - 1rem); top: -1rem; width: 2rem; height: 1rem; z-index: 99; background-size: 100%;}
	#oefenaanvraag-progress, .oefenaanvraag-progress, .progress-title {display: block; width: auto; max-width: 80%;}
	.progress-chapter {display: inline-block;}
}

@media (min-width: 768px) {
    .columns {
        display: flex;
    }
}

@keyframes pushReleaseFromLeft {
    from { transform: translateX(-100%) }
    30% { transform: translateX(100px) }
}
@keyframes appearOpacity {	
	0%   {opacity:0;}	
	100% {opacity:1;}
}
@keyframes appearOpacityDelay {	
	0%   {opacity:0;}	
	50%  {opacity:0;}	
	100% {opacity:1;}
}
@keyframes appearOpacityY {
	0%   {opacity:0; transform: translateY(20px);}	
	100% {opacity:1; transform: translateY(0px);}
}