body, textarea, input, button
{
    -moz-appearance: none!important;
    appearance: none!important;
	border-radius: 0px;
	margin:0;
	padding:0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
}
.checkbox-demo
{
	-webkit-appearance: default!important;
}

/* yellow/blue glow on Chrome/Safari/FF */
*:focus {outline:0px none transparent;}

.primarycolor-bg {
	background-color: #cad3e3;
}


#logo { width: 190px; height:300px; position:absolute; left:30px; top:118px; }


#scoretext
{
    font-size: 21px;
    font-weight: bold;
}





#htmlitems .continuebutton
{
	background-color:#6A98CC;
	color:#ffffff;
}


.imagebutton.mouseover, #screenplayer button.imagebutton.mouseover  { background-position: center bottom; border-color: white }
#b_ok,.okbutton                                                     { /*background-image: url(../images/bttn_ok.png);*/ }
.eyeearbutton                                                       { background-image: url(../images/b_sound_eye-ear.png); width: 141px !important; }
.earbutton                                                          { background-image: url(../images/bttn_ear.png); }
.imagebutton.bigearbutton                                           { background-image: url(../images/bttn_earBig.png); width: 91px !important; height: 91px !important; border-width: 7px !important; }
#b_ok.btn50,.okbutton.btn50                                         { /*background-image: url(../images/bttn_ok_50.png); */}
.earbutton.btn50                                                    { background-image: url(../images/bttn_ear_50.png); }
.imagebutton.btn50, #screenplayer button.imagebutton.btn50          { width:50px; height:50px; }
#b_ok.btn90,.okbutton.btn90                                         { /*background-image: url(../images/bttn_ok_90.png);*/ }
.imagebutton.btn90, #screenplayer button.imagebutton.btn90          { width:90px; height:90px; }
.imagebutton.btn110, #screenplayer button.imagebutton.btn110        { width:110px; height:110px; }

#screenplayer .b_ja.imagebutton,
#screenplayer .b_nee.imagebutton {
	width: 170px;
	height: 66px;
	background-color: #6A98CC !important;
}
.b_ja
{
	background-image: url(../images/b_ja.png);
}
.b_nee
{
	background-image: url(../images/b_nee.png);
}

/* score-popup */
.popupbutton
{
	position:absolute;
	width: 100px;
	height: 50px;		
}

#scoretext1,#scoretext2 { width:430px; max-width: 100%; font-size:1.2em; color:#333; }
#scoretext1 { height:30px; font-weight:bold }
#p_yes,#p_no,#p_ok,#exercisepopup_no,#exercisepopup_yes { bottom:20px; transform: translateX(-50%); }
#p_yes,#exercisepopup_yes { left:30%; }
#p_no,#exercisepopup_no { left:70%; }
#p_ok { left:50%; }



.bar-container {
    position: relative;
    box-sizing: unset;
  }
  
.bar-container > div {
      box-sizing: unset;
  }
  
.bar-container .bar {
    position: absolute;
    z-index: 200;
    height: 18px;
    width: 100%;
    border-radius: 10px;
    border: 1px solid #7D92AA;
}

.bar-container .bar-grey {
    position: absolute;
    height: 14px;
    width: calc(100% - 6px);
    border-radius: 8px;
    background-color: #DFE5EE;
    margin: 2px 2px 2px 2px;
    border: 1px solid #fff;
}

.bar-container .bar-layer {
    position: absolute;
    z-index: 100;
    height: 12px;
    width: calc(100% - 6px);
    margin-top: 0px;
    background-color: transparent;
    border-radius: 10px;
    border: 4px solid #fff;
  }

.progressbar-container > div {
    box-sizing: unset;
}

.progressbar-container .bar {
    position: absolute;
    z-index: 200;
    height: 18px;
    width: 100%;
    border-radius: 10px;
    border: 1px solid #7D92AA;
}
  
.progressbar-container .bar-grey {
    position: absolute;
    height: 14px;
    width: calc(100% - 6px);
    border-radius: 8px;
    background-color: #DFE5EE;
    margin: 2px 2px 2px 2px;
    border: 1px solid #fff;
}

.progressbar-container .bar-layer {
    position: absolute;
    z-index: 100;
    height: 12px;
    width: calc(100% - 6px);
    margin-top: 0px;
    background-color: transparent;
    border-radius: 10px;
    border: 4px solid #fff;
  }
  
  .bar-red {
    position: absolute;
    height: 16px;
    border-radius: 8px;
    background-color: #C91E4E;
    margin: 2px 2px 2px 2px;
    border: 2px solid transparant !important;
  }
  
  .bar-green {
    position: absolute;
    height: 16px;
    border-radius: 8px;
    background-color: #71E05C;
    margin: 2px 2px 2px 2px;
    border: 2px solid transparant !important;
  }


  .bar-darkgrey {
    position: absolute;
    height: 16px;
    border-radius: 9px;
    background-color: #7D92AA;
    margin: 2px 2px 2px 2px;
    border: 2px transparant !important;

  }

  .progressbar-container .small, .bar-container .small {
    height: 14px;
    margin: 3px 3px 3px 3px;
  }


#bottombar {
	background-color: #aaaaaa;
}
#bottombarbg {
	background-color: #aaaaaa;
}

#bottombarbgleft,
#bottombarbgright {
	background-color: #ffffff;
	position: absolute;
	bottom: 0;
}
#bottombarbgleft {
	left: 0;
	width: 805px;
	height: 40px;
}
#bottombarbgright {
	right: 0;
	width: 212px;
	height: 84px;
}
#bottombarbgright img {
	position: absolute;
	left: 26px;
	top: 17px;
}
#bottombarbglogo {
	position: absolute;
	left: 26px;
	top: 17px;
	width: 170px;
	height: 47px;
	background-image: url(../images/logoOefenen.svg);
	background-repeat: no-repeat;
	background-size: 170px 47px;
	background-position: center center;
}

#bottombar {
	font-weight:bold;
	color:#6A98CC;
	font-size: 13px;
}


.bottombuttoncontainer {
	text-align: center;
}


#bottombar button.mouseover, .buttonborder {
	border-color: #cad3e3;
    border-style: solid;
    border-width: 1px;
}

#b_help { background-image: url(../images/icon-hoekig_help.png); }
#b_helpdesk { background-image: url(../images/icon-hoekig_hulpNodig.png); }


/* #b_menu { background-image: url(../images/icon-hoekig_menu.png); } */
#b_feedback { background-image:url(../images/icon-hoekig_feedback.png); }
#b_video { background-image: url(../images/icon-hoekig_video.png); }
#b_result { background-image: url(../images/icon-hoekig_resultaten.png); }
#b_pdf { background-image: url(../images/icon-hoekig_PDF.png); }
#b_colofon { background-image: url(../images/icon-hoekig_colofon.png); }
/* #b_back { background-image: url(../images/icon-hoekig_terug.png); } */
/* #b_forward { background-image: url(../images/icon-hoekig_vooruit.png); } */

/* #bottombar.videos #btn_helpdesk { left:420px; } */
/* #bottombar.videos #btn_menu { left:528px; } */

#debuginfo
{
	position:absolute;
	right: 0px;
	top: .5em;
	width:400px;
	height:600px;
	background:white;
	color:black;
	font-size: 12px;
	overflow-y: scroll;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; /* IE 8 */
	filter: alpha(opacity=70); /* IE 5-7 */
	-moz-opacity: 0.7; /* Netscape */
	-khtml-opacity: 0.7; /* Safari 1.x */
	opacity: 0.7;
	display: none;
}

#pdfclose {
	background-color: #aabbff;
}




/* spraakherkenning */
.photostyled
{
	background-color: #6A98CC;
	border: 8px solid #6A98CC;
}
.wordline
{
	color:#000000;
}


.exercisetypemk1a-container .mp_box .checked_circle {
	background-color: #6A98CC;
}

.exercisetypemk1a-container .mp_box .checked_circle_correct {
	background-color: #6A98CC;
}

.exercisetypemk1a-container .title_correct {
	color:#ffffff;
}

.exercisetypemk1a-container .mp_box .mp_answer {
	color:#0000ff;
}

#screenplayer .exercisetype2f-container button.mp_answer {
	position: relative;
}

.exercisetype2f-container .mp_box .mp_answer {
	background-color:white;
	color: #002E5F !important;
	font-size: 16px;
	border: 0;
	-webkit-appearance: none; /* prevent "embossed" border on the iPad */
}
.exercisetype2f-container .title_correct {
	color:#0000ff;
}

.imagecontainer,
#textcontainer
{
  background-color: rgba(255,255,255,0.6);
}
/*
.exercisetype5a-container #words {
  background-color: #6A98CC;
}
*/
.exercisetype20-container .top23 {
	position: fixed !important;
	top: 10px !important;
	left: 50% !important;
}

.videoBlockedForDemo 
{
	opacity: 0.3;
    filter: saturate(0.5);
}
.BlockedForDemo 
{
	opacity: 0.3;
    filter: saturate(0.5);
}
.hide-demo-items .BlockedForDemo {
	display: none;
}
.show-other-chapters.showing .show-items{
	display: none;
}
.show-other-chapters.showing .hide-items{
	display: inline-block;
}
.show-other-chapters .hide-items{
	display: none;
}
.lock_closed 
{
  background: #fff url("/images/Demo/lock_closed.svg") no-repeat;
  height: 32px;
  width: 32px;
}
.lock_open 
{
  background: #fff url("/images/Demo/lock_open.svg") no-repeat;
  height: 32px;
  width: 32px;
}
.white-bg {
    background-color: #ccc
}

.opacity_40 {
    -ms-filter: alpha(Opacity=40);
    filter: alpha(opacity=40);
    -moz-opacity: .4;
    -khtml-opacity: .4;
    opacity: .4
}

.very_light_shadow {
    -webkit-box-shadow: 1px 2px 2px 1px rgba(0, 0, 0, .05);
    -moz-box-shadow: 1px 2px 2px 1px rgba(0, 0, 0, .05);
    box-shadow: 1px 2px 2px 1px rgba(0, 0, 0, .05)
}

.light_shadow {
    -webkit-box-shadow: 1px 2px 2px 1px rgba(0, 0, 0, .1);
    -moz-box-shadow: 1px 2px 2px 1px rgba(0, 0, 0, .1);
    box-shadow: 1px 2px 2px 1px rgba(0, 0, 0, .1)
}

.medium_shadow {
    -webkit-box-shadow: 1px 2px 2px 1px rgba(0, 0, 0, .2);
    -moz-box-shadow: 1px 2px 2px 1px rgba(0, 0, 0, .2);
    box-shadow: 1px 2px 2px 1px rgba(0, 0, 0, .2)
}

.intermediate_shadow {
    -webkit-box-shadow: 1px 1px 4px 4px rgba(0, 0, 0, .1);
    -moz-box-shadow: 1px 1px 4px 4px rgba(0, 0, 0, .1);
    box-shadow: 1px 1px 4px 4px rgba(0, 0, 0, .1)
}

.large_shadow {
    -webkit-box-shadow: 1px 2px 8px 4px rgba(0, 0, 0, .2);
    -moz-box-shadow: 1px 2px 8px 4px rgba(0, 0, 0, .2);
    box-shadow: 1px 2px 8px 4px rgba(0, 0, 0, .2)
}

.b_answer_shadow,
.popup_shadow {
    -webkit-box-shadow: 6px 7px 7px 0 rgba(0, 0, 0, .2);
    -moz-box-shadow: 6px 7px 7px 0 rgba(0, 0, 0, .2);
    box-shadow: 6px 7px 7px 0 rgba(0, 0, 0, .2)
}

.no_border {
    border: 0!important
}

.answer_color {
    color: #000
}
/*
.exercisetypemk1a-container .title_correct {
    display: none;
    position: absolute;
    top: 13px;
    left: 853px;
    font-size: 12px
}

.exercisetypemk1a-container #textcontainer {
    position: absolute;
    left: 25px;
    top: 18px;
    width: 367px;
    height: 378px
}

.exercisetypemk1a-container #text {
    color: #000!important;
    position: absolute;
    width: 347px;
    height: 382px;
    left: 0;
    top: 0;
    padding: 0 10px 10px;
    overflow: auto;
    font-size: 14px;
    line-height: 20px;
    overflow-y: scroll;
    overflow-y: auto
}


.exercisetypemk1a-container #text h1 {
    color: #cf4b13;
    font-size: 20px;
    margin: 10px 0
}

.exercisetypemk1a-container #b_ok {
    position: absolute;
    left: 944px;
    top: 358px
}

.exercisetypemk1a-container #b_sound {
    position: absolute;
    left: 817px;
    top: 293px
}

.exercisetypemk1a-container #multiple_choice_answers_box {
    position: absolute;
    left: 400px;
    top: 18px;
    width: 575px;
    height: 404px
}
*/
.exercisetypemk1a-container .mp_box {
    /*float: left;*/
    /*width: 100%;*/
    /*margin-bottom: 19px;*/
    position: relative
}

.exercisetypemk1a-container .mp_box .mp_answer {
    /*float: left;
    width: 381px;
    background-color: #fff;
    margin-right: 10px;
    min-height: 61px*/
    min-height: 50px
}

.exercisetypemk1a-container .mp_box .mp_answer p {
    font-size: 14px;
    padding: 7px 12px;
    margin: 0
}

.exercisetypemk1a-container .mk1a_two_line_lineheight p {
    padding: 4px 12px!important
}

.exercisetypemk1a-container .mk1a_three_line_lineheight p {
    padding: 2px 12px!important
}

.exercisetypemk1a-container .mp_box .checked_circle {
    display: none;
    position: absolute;
    width: 20px;
    height: 20px;
    cursor: pointer;
    /*left: 405px;*/
    left: 223px;
    top: 15px;
    z-index: 2;
    border: 0 solid #fff;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    -khtml-border-radius: 2px
}

.exercisetypemk1a-container .mp_box button.mk1abtn {
    -webkit-box-shadow: none!important;
    -moz-box-shadow: none!important;
    box-shadow: none!important;
    width: 40px;
    height: 40px;
    /*margin: 11px 0 0 4px;*/
    margin: 0px 0 0 4px;
    background-color: transparent!important;
    background: url(../images/checkbox.png)
}

.exercisetypemk1a-container .mp_box button.mk1abtn:hover {
    border: 0!important
}

.exercisetypemk1a-container .mp_answers_correct {
    display: none;
    /*position: absolute;*/
    left: 444px;
    top: 8px;
    width: 40px;
    height: 40px;
    margin: 0 0 0 4px;
    background-color: transparent!important;
    background: url(../images/checkbox.png)
}

.exercisetypemk1a-container .mp_answers_correct .checked_circle_correct {
    width: 20px;
    height: 20px;
    margin: 12px 10px 8px;
    border: 0 solid #fff;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    -khtml-border-radius: 2px
}

.exercisetypemk1a-container .mp_box .mp_answer_state {
    /*float: right;*/
    /*width: 40px;
    height: 40px;*/
    /*margin: 13px 40px 0 0*/
}

.exercisetypemk1a-container .mp_box .mp_answer_state .correct {
    width: 40px;
    height: 40px;
    background: url(../images/button_rightwrong.png) no-repeat 0 0;
}

.exercisetypemk1a-container .mp_box .mp_answer_state .incorrect {
    width: 40px;
    height: 40px;
    background: url(../images/button_rightwrong.png) no-repeat 0 -28px
}

.exercisetypemk1a-container .checkmarker {
    /*position: absolute;*/
    z-index: 30;
    /*left: 950px;
    top: 295px;*/
    color: red;
    width: 40px;
    height: 40px;
    background-color: transparent
}

.exercisetypemk1a-container .checkmarker.correct {
    background: url(../images/button_rightwrong.png) no-repeat 0 0
}

.exercisetypemk1a-container .checkmarker.incorrect {
    background: url(../images/button_rightwrong.png) no-repeat 0 -28px
}

/*.exercisetypemk1a-container .checkmarkerbg {
    position: absolute;
    z-index: 30;
    left: 946px;
    top: 292px;
    color: red;
    width: 45px;
    height: 45px;
    background-color: transparent;
    border: 1px solid #fff;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    -khtml-border-radius: 2px
}*//*** Hide YouTube Related Videos ***/
.hytPlayerWrap {
	display: inline-block;
	position: relative;
}
.hytPlayerWrap.ended::after {
	content:"";
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	cursor: pointer;
	background-color: black;
	background-repeat: no-repeat;
	background-position: center; 
	background-size: 64px 64px;
	background-image: url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjgiIGhlaWdodD0iMTI4IiB2aWV3Qm94PSIwIDAgNTEwIDUxMCI+PHBhdGggZD0iTTI1NSAxMDJWMEwxMjcuNSAxMjcuNSAyNTUgMjU1VjE1M2M4NC4xNSAwIDE1MyA2OC44NSAxNTMgMTUzcy02OC44NSAxNTMtMTUzIDE1My0xNTMtNjguODUtMTUzLTE1M0g1MWMwIDExMi4yIDkxLjggMjA0IDIwNCAyMDRzMjA0LTkxLjggMjA0LTIwNC05MS44LTIwNC0yMDQtMjA0eiIgZmlsbD0iI0ZGRiIvPjwvc3ZnPg==);
}
.hytPlayerWrap.paused::after {
	content:"";
	position: absolute;
	top: 70px;
	left: 0;
	bottom: 50px;
	right: 0;
	cursor: pointer;
	background-color: black;
	background-repeat: no-repeat;
	background-position: center; 
	background-size: 40px 40px;
	background-image: url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEiIHdpZHRoPSIxNzA2LjY2NyIgaGVpZ2h0PSIxNzA2LjY2NyIgdmlld0JveD0iMCAwIDEyODAgMTI4MCI+PHBhdGggZD0iTTE1Ny42MzUgMi45ODRMMTI2MC45NzkgNjQwIDE1Ny42MzUgMTI3Ny4wMTZ6IiBmaWxsPSIjZmZmIi8+PC9zdmc+);
}

/*** end Hide YouTube Related Videos ***/
#scaling_btn {
    display: block;
    height: 40px;
    width: 40px;
    background: rgb(0, 46, 94);
    position: absolute;
    z-index: 3000;
    bottom: 10px;
    right: 10px;
    border-radius: 6px;
    cursor: pointer;
    padding: 4px;
}

#scaling_btn img {
  max-width: 100%;
  min-width: 100%;
}

/*.screenplayer {
  position: relative;
  width: 1014px;
  height: 424px;
}*/
.mediatitle {
  font-size: 1.3em;
}
#btn_portal {
  left: 814px;
  width: 200px;
  height: 100px;
  cursor: pointer;
}
/*#popupcontainer {
  width: 1014px;
  height: 656px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -328px 0 0 -507px;
}*/
#btn_portal {
  position: absolute;
  top: 0px;
}
#LoginRegisterPopup.PopUpbox {
	font-size: 18px;
}
.overlay {
  background: #000;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1500;
}
.overlayLeftPanel {
  
}
.helpscreen {
  width: 1014px;
  height: 656px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -328px 0 0 -507px;
}
.helpscreen > * {
  background-color: transparent !important;
}
#helpdesk,
#scorepopup, #milestonepopup, #exercisepopup, #reviewpopup {
  position: absolute;
  background-color: #fff;
  z-index: 1501;
}

#exercisepopup {
  position: fixed;
}

/*REVIEUW POPUP*/
.reviewpopup {
  position: fixed;
	box-sizing: border-box;
	width: 610px;
	border: 1px solid #707070;
  background-color: white;
	border-radius: 5px;
	padding: 60px 90px 35px 90px;
	box-shadow: 0px 3px 6px #00000029;
  z-index: 10;
  left: calc(50% - 305px);
  top: 50px;
}

@media (max-width: 767px) {
  .reviewpopup {
	  width: 95%;
    top: 10px;
    left: 2.5%;
    padding: 20px;
  }
}

.closeReview {
	background-image: url(/images/svg/closeButton.svg);
  float: right;
  margin-top: -32px;
  margin-right: -45px;
  cursor: pointer;
  height: 25px;
  width: 25px;
}

.rating-row {
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
}

.rate-title {
	font-size: 20px;
	font-weight: bold;
	color: #002E5E;
	text-align: center;
	margin: 0 0 15px 0;
}

.rate {
	width: 60px;
	height: 60px;
	background-repeat: no-repeat;
	background-position: center;
	cursor: pointer;
	margin-right: 30px;
}

.rate.selected {
  background-color: transparent !important;
}

@media (max-width: 767px) {
  .rate {
    width: 30px;
    height: 30px;
    border-radius: 15px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    cursor: pointer;
    margin-right: 0;
  }

  .rate.selected {
    transform: scale(1.3);
  }
}

.rate1 {
	background-image: url(../images/rating-face-red.svg);
}
.rate1.selected {
	background-image: url(../images/rating-face-red-border.svg);
}

.rate2 {
	background-image: url(../images/rating-face-orange.svg);
}
.rate2.selected {
	background-image: url(../images/rating-face-orange-border.svg);
}

.rate3 {
	background-image: url(../images/rating-face-yellow.svg);
}
.rate3.selected {
	background-image: url(../images/rating-face-yellow-border.svg);
}

.rate4 {
	background-image: url(../images/rating-face-green.svg);
}
.rate4.selected {
	background-image: url(../images/rating-face-green-border.svg);
}

.rate5 {
	background-image: url(../images/rating-face-darkgreen.svg);
	margin-right: 0;
}
.rate5.selected {
	background-image: url(../images/rating-face-darkgreen-border.svg);
}

.rating-range {
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid #CAD3E3;
	padding: 0 10px 38px 10px;
	margin-bottom: 46px;
}

@media (max-width: 767px) {
  .rating-range {
    padding: 0;
  }
}

.rating-range2 {
	display: flex;
	justify-content: space-between;
	padding: 0 54px;
	margin-bottom: 33px;
}

@media (max-width: 767px) {
  .rating-range2 {
    padding: 0;
  }
}

.rating-range p,
.rating-range2 p {
	font-size: 18px;
	font-weight: normal;
	color: #002E5E;
	margin: 0;
}

.rating-bow {
	position: relative;
	width: 301px;
	height: 149px;
	overflow: hidden;
	margin: 0 auto 12px auto;
}

@media (max-width: 767px) {
  .rating-bow {
    width: 100%;
    max-width: calc(100% - 40px);
  }

  .rating-bow svg {
    width: 100%;
  }
}

.rating-bow a {
	cursor: pointer;
}

.rating-bow a.a:hover path {
	fill: #3F7C16;
}
.rating-bow a.b:hover path {
	fill: #848E1E;
}
.rating-bow a.c:hover path {
	fill: #B19022;
}
.rating-bow a.d:hover path {
	fill: #A74816;
}
.rating-bow a.e:hover path {
	fill: #730C0D;
}

#arrow {
	position: absolute;
	top: 37px;
	left: 125px;
	width: 52px;
	height: 139px;
	background-image: url(../images/pointer.svg);
	background-repeat: no-repeat;
	background-position: center;
	transform-origin: 50% 81%;
	transition: all 0.2s;
}

@media (max-width: 767px) {
 #arrow {
    left: calc(50% - 26px);
 }
}

#arrow.rate1 {
	transform: rotate(-72deg);
}

#arrow.rate2 {
	transform: rotate(-36deg);
}

#arrow.rate3 {
	transform: rotate(0);
}

#arrow.rate4 {
	transform: rotate(36deg);
}

#arrow.rate5 {
	transform: rotate(72deg);
}

.submit {
	font-size: 17px;
	font-weight: bold;
	width: 72px;
	height: 42px;
	background: #002E5E;
	border: none;
	border-radius: 7px;
	color: #FFFFFF;
	margin-left: calc(50% - 36px);
	cursor: pointer;
}

.submit:hover {
	background: #002E5E;
}

.submit:disabled {
	background: #D9D9D9;
	cursor: default;
}

.submit:disabled:hover {
	background: #D9D9D9;

}
/*EIND review popup*/

.step {
  display: inline-block;
  height: 7px;
  width: 7px;
  background-color: #cccccc;
  margin: 0px 3px 0px 3px;
  border-radius: 3.5px;

}

.selected {
  /*display: inline-block;
  height: 7px;
  width: 7px;
  background-color: #90c68a;
  margin: 0px 3px 0px 3px;  
  border-radius: 3.5px;*/
  background-color: #cad3e3 !important;
  box-shadow: none !important;
}

#colofon,
#hint,
#feedback {
  /*position: absolute;
  background-color: #fff;
  z-index: 1501;
  width: 462px;
  height: 248px;
  left: 50%;
  top: 50%;
  margin-left: -232px;
  margin-top: -126px;
  border-style: solid;
  border-width: 2px;*/

  /* background-color: #fff;
    z-index: 1501;
    height: 248px;
    position: absolute;
    top: 22%;
    width: 50%;
    transform: translateX(50%);*/

    z-index: 1501;
    height: 248px;
    position: absolute;
    top: 22%;
    flex-direction: column;
    width: 80%;
    pointer-events: auto;
    background-color: #fff;
    background-clip: padding-box;
    outline: 2px solid #5E9ED6;
    align-self: center;
    max-width: 764px;
}


#colofon {
  width: 700px;
  height: 500px;
  margin-left: -350px;
  margin-top: -250px;
  border-width: 0px;
  display: none;
}

#feedback {
  /*border-color: #000;*/
}
.feedback_title_drag {
  width: 100%;
  height: 36px;
  /*background-color: #002E5F;
  color: #FFF;*/
  font-weight: bold;
  line-height: 34px;
  text-indent: 10px;
  font-size: 18px;
}
.feedback_title_drag .helpdesk-close {
  right: 4px !important;
  top: 4px !important;
}
.drag_bar_popup {
  width: 320px;
  height: 18px;
  display: inline-block;
  background: url(../images/drag_bar.png) repeat-x;
  vertical-align: middle !important;
  margin: 0 4px;
}
.feedback_title_drag:hover {
  cursor: pointer;
}


#sitesmalllogo
{
  margin-right: 10px;
  max-height: 25px;
}

#sitelogo
{
  float: right;
  /*max-height: 60px;*/
}

#crumblebar img
{
  margin-right: 15px;
}

#milestonepopup {
  height: 575px;
  width: 610px;
  top: 50%;
  left: 50%;
  margin-left: -305px;
  margin-top: -280px;
  background-image: url(/images/svg/vuurwerk_mijlpaal_sprite.svg);
  background-repeat: no-repeat;
  background-position: left -6760px;
  border-style: solid;
  border-width: 2px;
}

#reviewpopup {
  height: 575px;
  width: 610px;
  top: 50%;
  left: 50%;
  margin-left: -305px;
  margin-top: -280px;
  border-style: solid;
  border-width: 2px;
}

#tip {
  margin: 10px 0px;
  text-align: center;
  font-size: 20px;
  font-family: 'Source Sans Pro', sans-serif;
}

#path {
  height: 316px; /*height: 245px;*/
  width: 535px;
  margin: 32px;
  margin-bottom: 10px;
  background-image: url(/images/svg/path.svg);
}
/*
#score {
  float: left;  
}
*/
#scorebox {
  /* height: 150px; */
  /* width: 200px; */
  position: absolute; 
  left: 120px; 
  /*bottom: 54px;*/
  bottom: 10px; 
  text-align: center;
  font-family: 'Source Sans Pro', sans-serif;
}

#scorebox #scoreheader {
  font-size: 20px;
  color: #000000;
  margin-bottom: 5px;
}

#scorebox #result {
  font-size: 30px;
  font-weight: bold;
  color: #002e5e;
  margin-bottom: 5px;
}

#scorebox #totalheader {
  font-size: 20px;
  color: #000000;
  margin-bottom: 5px;
}

#scorebox #totalresult {
  font-size: 20px;
  font-weight: bold;
  color: #002e5e;
}

#animationbox {
  height: 150px;
  width: 200px;
  position: absolute;
  right: 78px;
  /*bottom: 54px;*/
  bottom: 10px;
}

#verticalline {
  height: 150px;
  width: 2px;
  background-color: #cccccc;
  position: absolute;
  left: 312px;
  margin-left: -1px;
  /*bottom: 54px;*/
  bottom: 10px;
}

#animation {
  position: absolute;
  background-repeat: none;
  height: 100px;
  width: 100px;
  left: 50%;
  margin-left: -50px;
}

#step_indication {
  display: none;
  position: absolute;
  top: 80%;
  left: 50%;
  margin-left: -39px;
}

.unevenrow {
  flex-direction: row;
  width:480x;
  /*margin-left: 55px;*/
  margin-left: 50px;
}

.evenrow {
  flex-direction: row-reverse;
  width: 480px;
  /*margin-left: 55px;*/
  margin-left: 50px;
}


.sticker {
  display: inline-block;
  height: 100px;
  width: 100px;
  margin: 2px 4px;
  background-size: 100%;
  opacity: 1.0; 
  border: 1px solid #cad3e3; 
  background-color: #fff;
  position: relative;
}

#milestonepopup .sticker
{
  width: 56px;
  height: 56px;
}

.sticker #background {
  height: 52px;
  width: 52px;
  background-size: 52px;
}

.sticker.unlocked #badgelayer, .sticker #badgelayer {
  height: 52px;
  width: 52px;
  top: 0px;
  left: 0px;
  position: absolute;
  z-index: 100;
}

.sticker:not(.unlocked) #badgelayer {
  opacity: 0.9;
  background-color: #fff;
}

.sticker.unlocked {
  opacity: 1.0;
  /*border: 2px solid #002e5e;*/
}

#scorepopup, #exercisepopup {
  width: 470px;
  max-width: 95%;
  min-height: 260px;
  left: 50%;
  top: 50%;
  transform: translateX(-50%);
  margin-top: -142px;
  /*border-style: solid;*/
  /*border-width: 2px;*/
  padding: 20px 0 0 10px;
  border-radius: 5px;
  /*border-color: #d0d8e3!important;*/
  box-shadow: 0 .125rem .25rem rgba(208,216,227,1.075)!important;
}

#percentage-bar {
  position: absolute;
  height: 16px;
  width: 200px;
  top: 50%;
  left: 50%;
  margin-top: 50px;
  margin-left: -100px;
  background-color: lightgray;
  z-index: 1501;
  border-radius: 10px;
}

#percentage-bar-color-start {
  position: absolute;
  height: 16px;
  background-color: rgb(128, 0, 75);
  z-index: 1503;
  border-radius: 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 0px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 0px;
}

#percentage-bar-color-end {
  position: absolute;
  height: 16px;
  background-color: green;
  z-index: 1502;
  width: 10px;
  min-width: 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 0px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 0px;
}

#percentage-bar-start {
  position: absolute;
  height: 16px;
  width: 80px;
  top: 50%;
  left: 50%;
  margin-top: 66px;
  margin-left: -100px;
}

#percentage-bar-end {
  position: absolute;
  height: 16px;
  width: 80px;
  top: 50%;
  left: 50%;
  margin-top: 66px;
  margin-left: 80px;
}

#btn_close_p {
  position: absolute;
  top: 8px;
  right: 8px;
}

table#milestones {
  position: absolute;
  top: -28px;
  width: 240px;
  table-layout: fixed;
  z-index: 1504;
}

table#milestones tr td {
  text-align: left;
  height: 18px;
}
table#milestones tr td.border {
  border-left: 1px solid black;
  height: 20px;
}

#hinttitle,
#colofontitle
{
  position: absolute;
  top: 15px;
  left: 18px;
  font-size:20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ccc;
  color: #333;
  font-weight: bold;
}
#hinttitle
{
  width: 87%;
}
#colofontitle
{
  width: 635px;
}
/*
#colofontext,
#hinttext,
#feedbacktext {
  position: absolute;
  left: 18px;
  top: 40px;
  width: 426px;
  height: 180px;
}
#colofontext p,
#hinttext p,
#feedbacktext p {
  margin: 0.5em 0;
}

#feedbacktext {
  overflow-y: scroll;
}
*/
#colofontext {
  top: 65px;
  width: 635px;
  height: 432px;
  overflow-y: auto;
}
#feedbacktext ul,
#feedbacktext ol {
  list-style: square outside;
  margin-left: 20px;
  width: 370px;
  list-style-type: disc !important;
}
#feedbacktext ul li,
#feedbacktext ol li {
  padding-left: 10px;
}
#btn_hint_close,
#btn_feedback_close {
  position: absolute;
  right: 8px;
  top: 8px;
  padding: 0;
}
#helpdesk {
  width: 710px;
  height: 498px;
  padding: 20px 10px;
  left: 50%;
  top: 50%;
  margin-left: -365px;
  margin-top: -269px;
}
#helpdesk table {
  width: 420px;
  margin-left: 140px;
  margin-top: 30px;
  color: #666;
}
#helpdesk td {
  vertical-align: top;
  height: 32px;
  font-weight: bold;
}
#helpdesk textarea,
#helpdesk input.helpdesk-textinput {
  width: 290px;
}
#helpdesk #t_vraag {
  resize: none;
}
#helpdesk input {
  height: 20px;
}
#helpdesk button {
  font-size: 16px;
  font-weight: bold;
  padding: 7px 25px;
}
#helpdesk textarea {
  height: 150px;
}
#helpdesk label {
  cursor: pointer;
  margin-right: 1em;
  padding-right: 1em;
  position: relative;
  top: -6px;
}
#helpdesk label input[type="radio"] {
  position: relative;
  top: 6px;
}
.close {
  width: 26px;
  height: 26px;
  position: absolute;
  top: 346px;
  cursor: pointer;
  text-indent: -9999px;
  text-transform: capitalize;
  /*background: transparent url("../images/b_quit.png") no-repeat left bottom;*/
  /*background: transparent url("../images/Close.svg") no-repeat center center;*/
  background: transparent url("../images/Close_light.svg") no-repeat center center;
  border: 0;
  opacity: 1!important;
}
/*.close.mouseover {
  background-position: left -26px;
}*/

#feedback .close{
  background: transparent url("../images/Close_light.svg") no-repeat center center;
}

#helpdesk .helpdesk-close {
  position: absolute;
  right: 20px;
  top: 20px;
  padding: 0;
}
#colofon .colofon-close
{
  position: absolute;
  right: 10px;
  top: 10px;
  padding: 0;
  background: transparent url("../images/Close.svg") no-repeat left bottom;
}
#colofon .close.mouseover {
  background-position: left bottom;
}

#helpdesk .mediatitle {
  color: #666;
  padding-left: 10px;
  font-size: 28px;
}
.ui-draggable {
  -webkit-transform: translateZ(0);
  /* fix trailing pixels on webkit browsers */
}
/*#imagecontainer{
  width: 466px;
  height: 368px;
  position: absolute;
  left: 20px;
  top: 36px;
}*/
#imagecontainer.imagecontainer.vertical {
  padding:0px;
  width:250px;
  left:16%;
}
.exercisetype2c-container .text,
.exercisetype2e-container .text,
.exercisetype2f-container .text,
.exercisetype2r-container .text,
.exercisetype10a-container .text,
.exercisetype29-container .text {
  font-weight: bold;
  font-size: 16px;
}
.exercisetypetk1a1-container .text,
.exercisetypetk1a2-container .text,
.exercisetypetk2c-container .text,
.exercisetypetk2e-container .text,
.exercisetypetk3a-container .text {
  font-size: 28px;
  color: #333;
}
.exercisetypemc .imagecontainer,
.exercisetypemc .imagecontainer {
  position: relative;
}
/*.exercisetypemc .imagecontainer img,
.exercisetypemc .imagecontainer #image,
.exercisetype2r-container .imagecontainer #image {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -225px;
  margin-top: -148px;
}*/
.exercisetypetk3a-container .text {
  font-size: 22px;
}
/*#text {
  overflow: auto;
  background-color: #FFF;
  color: #000;
  top: 15px;
  left: 10px;
  position: relative;
  padding: 10px;
  width: 424px;
  height: 296px;
}*/
/*.exercisetype2a-container #textcontainer,
.exercisetype2f-container #textcontainer,
.exercisetypetk2e-container #textcontainer {
  position: absolute;
  left: 5px;
  top: 5px;
  width: 588px;
  height: 404px;
}
.exercisetype2a-container #text {
  width: 547px;
  height: 350px;
}
.exercisetype2f-container #textcontainer {
  top: 8px;
  width: 387px;
  height: 408px;
}
.exercisetype2f-container #text {
  left: 10px;
  top: 10px;
  height: 368px;
  font-size: 16px;
  padding: 10px;
}
.exercisetype2f-container #multiple_choice_answers_box
{
  top: 8px;
}

.exercisetype11d-container #feedbacktextbg {
  position: absolute;
  left: 16px;
  top: 47px;
  width: 434px;
  height: 342px;
  background-color: #FFF;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75);
  filter: alpha(opacity=75);
  -moz-opacity: 0.75;
  -khtml-opacity: 0.75;
  opacity: 0.75;
}
.exercisetype11d-container #feedbacktext {
  position: absolute;
  left: 30px;
  top: 60px;
  width: 406px;
  height: 311px;
  font-size: 18px;
  line-height: 23px;
}
.exercisetype11d-container #textcontainer {
  position: absolute;
  left: 512px;
  top: 47px;
  width: 434px;
  height: 342px;
}
.exercisetype11d-container #text {
  position: absolute;
  width: 406px;
  height: 305px;
  top: 7px;
  left: 7px;
  padding: 10px 7px;
  overflow: hidden;
}
.exercisetype11d-container #ta_typearea {
  width: 406px;
  height: 305px;
  min-width: 406px;
  min-height: 305px;
  max-width: 406px;
  max-height: 305px;
  border: none;
  background-color: transparent;
  font-size: 18px;
  font-weight: bold;
  -webkit-appearance: textarea;
}
.exercisetype11d-container #tasktext {
  position: absolute;
  left: 31px;
  top: 61px;
  width: 404px;
  font-size: 18px;
}
.exercisetype11d-container #b_ok {
  position: absolute;
  left: 455px;
  top: 339px;
}
.exercisetype11d-container #b_donetyping {
  position: absolute;
  left: 953px;
  top: 339px;
}
.exercisetype11b-container #textcontainer {
  position: absolute;
  left: 212px;
  top: 5px;
  width: 589px;
  height: 404px;
}
.exercisetype11b-container #text {
  position: absolute;
  width: 544px;
  height: 352px;
  left: 13px;
  top: 15px;
  padding: 10px 10px;
  overflow: auto;
  font-size: 18px;
  line-height: 21px;
}
.exercisetype11b-container #b_ok {
  position: absolute;
  left: 817px;
  top: 359px;
}
.exercisetype11b-container #b_sound {
  position: absolute;
  left: 817px;
  top: 293px;
}
#image {
  margin: 14px 0 0 8px;
}
.exercisetypemc button.large {
  left: 550px;
}
.exercisetypemc button.medium {
  left: 606px;
}*/

#b_ok, #b_ok1, #b_ok2, #b_ok3, #b_ok4, #b_ok5, #b_ok6 {
  padding-right: 10px;
  }

.exercisetypemc .checkmark {
  /*position: relative;*/
  /*left: 960px;*/
  width: 40px;
  height: 40px;
  visibility: hidden;
  background-color: transparent;
  background-repeat: no-repeat;
}
.exercisetypemc .correct {
  visibility: visible;
  background-image: url("../images/button_rightwrong.png");
  background-position: center top;
}
.exercisetypemc .incorrect {
  visibility: visible;
  background-image: url("../images/button_rightwrong.png");
  background-position: center bottom;
}
#screenplayer p {
  margin: 0;
}
/*
#screenplayer .exercisetype1a-container button.large {
  position: absolute;
  left: 512px;
  width: 408px;
  height: 110px;
  padding: 44px 19px;
  text-align: left;
}
#screenplayer .exercisetype1a-container .checkmark {
  position: absolute;
  left: 930px;
}
#screenplayer .exercisetype1a-container #b_answer1 {
  top: 123px;
}
#screenplayer .exercisetype1a-container #b_answer2 {
  top: 242px;
}
#screenplayer .exercisetype1a-container #mark1 {
  top: 158px;
}
#screenplayer .exercisetype1a-container #mark2 {
  top: 278px;
}

#screenplayer .exercisetype1b-container button.large {
  position: absolute;
  left: 495px;
  width: 408px;
  height: 94px;
  padding: 36px 15px;
  text-align: left;
}
#screenplayer .exercisetype1b-container .checkmark {
  position: absolute;
  left: 912px;
}
#screenplayer .exercisetype1b-container .answeritem {
  position: absolute;
  left: 550px;
  width: 380px;
}
#screenplayer .exercisetype1b-container #b_answer1 {
  top: 68px;
}
#screenplayer .exercisetype1b-container #b_answer2 {
  top: 177px;
}
#screenplayer .exercisetype1b-container #b_answer3 {
  top: 286px;
}
#screenplayer .exercisetype1b-container #mark1 {
  top: 95px;
}
#screenplayer .exercisetype1b-container #mark2 {
  top: 204px;
}
#screenplayer .exercisetype1b-container #mark3 {
  top: 313px;
}
*/
.exercisetype2a-container .checkmark{
  display: inline-block;
}
.exercisetype2a-container #b_answer1 {
  /*top: 50px;*/
  width: calc(100% - 40px);
  display: inline-block;
}
.exercisetype2a-container #b_answer2 {
  /*top: 150px;*/
  width: calc(100% - 40px);
  display: inline-block;
}
.exercisetype2a-container #b_answer3 {
  /*top: 250px;*/
  width: calc(100% - 40px);
  display: inline-block;
}

.exercisetype2b-container .checkmark{
  /*display: inline-block;*/
  position: absolute;
  right: -14px;
  visibility: visible;
  z-index: 100;
}
.exercisetype2b-container #b_answer1 {
  /*top: 50px;*/
  /*width: calc(100% - 40px);*/
  width: 100%;
  display: inline-block;
}
.exercisetype2b-container #b_answer2 {
  /*top: 150px;*/
  /*width: calc(100% - 40px);*/
  width: 100%;
  display: inline-block;
}
.exercisetype2b-container #b_answer3 {
  /*top: 250px;*/
  /*width: calc(100% - 40px);*/
  width: 100%;
  display: inline-block;
}

/*
.exercisetype2e-container .checkmark{
  display: inline-block;
  position: absolute;
  right: 0px;
  visibility: visible;
  z-index: 100;
  top: 5px;
}

.exercisetypetk4c1-container .checkmark{
  /*display: inline-block;
  position: absolute;
  right: 0px;
  visibility: visible;
  z-index: 100;
  top: 5px;
}
.exercisetypetk4c2-container .checkmark{
  
  position: absolute;
  right: 0px;
  visibility: visible;
  z-index: 100;
  top: 5px;
}
*/

/*
.exercisetypetk4c2-container
{
  max-width: 960px;
}
*/

.exercisetype2b-container #text {
  /*max-height: 296px;*/
  min-height: 183px;
  overflow: auto;
}

.exercisetype1a-container#imagecontainer,
.exercisetype1b-container#imagecontainer,
.exercisetype2a-container#imagecontainer,
.exercisetype2e-container #image,
.exercisetype2r-container #image,
.exercisetype10a-container #image,
.exercisetype10b-container #image,
.exercisetype12-container #image,
.exercisetype14-container #image,
.exercisetypetk2ab-container #image,
.exercisetypetk4c2-container #imagecontainer
{
  max-width: min(450px,100%);
}
.exercisetype1a-container #image,
.exercisetype1b-container #image,
.exercisetype2a-container #image,
.exercisetype2e-container #image,
.exercisetype2r-container #image img,
.exercisetype10a-container #image img,
.exercisetype10b-container #image img,
.exercisetype12-container #image img,
.exercisetype14-container #image img,
.exercisetypetk1a1-container #image,
.exercisetypetk2ab-container #image img,
.exercisetypetk4c2-container #image
{
  max-width: min(450px,100%);
  max-height: 296px;
}

.exercisetypetk3a-container .answeritem img
{
  /*max-width: min(220px,100%);
  max-height: 180px;*/
}

.exercisetype40-container .answeritem,
.exercisetype41-container .answeritem
{
  cursor: pointer;
}
.exercisetype40-container .answeritem
{
  line-height: normal;
}

.exercisetype40-container .answeritem img
{
  max-width: min(100px,100%);
  max-height: 75px;
}

.exercisetypetk5a-container .answeritem img
{
  max-width: 100px;
  max-height: 75px;
}

.exercisetypetk3b-container .answeritem img
{
  max-width: 152px;
  max-height: 113px;
}

.exercisetype41-container img.drag-origin
{
  max-width: min(100px,100%);
  max-height: 75px;
}

.exercisetype20-container #image,
.exercisetype41-container #drag-destinations,
.exercisetypetk5b-container #image,
.exercisetypetk5c-container #image
{
  max-width: min(635px,100%);
}
.exercisetype11a-container #image img,
.exercisetype20-container #image img,
.exercisetype41-container #drag-dest-image,
.exercisetypetk5b-container #image img,
.exercisetypetk5c-container #image img
{
  max-width: min(635px,100%);
  max-height: 480px;
}

.exercisetype11c-container #video
{
  max-width: min(608px,100%);
  max-height: 342px;
}

/*
.exercisetype2a-container #mark1 {
  top: 70px;
}
.exercisetype2a-container #mark2 {
  top: 170px;
}
.exercisetype2a-container #mark3 {
  top: 270px;
}
*/
.exercisetype2c-container .checkmark {
  /*position: absolute;
  left: 873px;*/
  display: inline-block;
}
/*
.exercisetype2c-container #mark1 {
  top: 137px;
}
.exercisetype2c-container #mark2 {
  top: 222px;
}
.exercisetype2c-container #mark3 {
  top: 307px;
}
.exercisetype2c-container .answeritem {
  position: absolute;
  left: 452px;
  width: 408px;
  height: 69px;
  padding: 5px 26px;
  text-align: left;
}*/
.exercisetype2c-container #b_answer1 {
  /*top: 126px;*/
  width: calc(100% - 40px);
  display: inline-block;
}
.exercisetype2c-container #b_answer2 {
  /*top: 211px;*/
  width: calc(100% - 40px);
  display: inline-block;
}
.exercisetype2c-container #b_answer3 {
  /*top: 296px;*/
  width: calc(100% - 40px);
  display: inline-block;
}

/*
.exercisetype2c-container #questiontext {
  position: absolute;
  left: 455px;
  top: 61px;
}
.exercisetype2c-container #jp_container_1 {
  position: absolute;
  left: 20px;
  top: 122px;
  width: 379px;
  height: 212px;
  padding: 19px 10px;
}*/
/*
.exercisetype2e-container .checkmark {
    position: absolute;
    right: 0px;
    visibility: visible;
    z-index: 100;
    top: 18px;
}.exercisetype2e-container #mark1 {
  top: 131px;
}
.exercisetype2e-container #mark2 {
  top: 213px;
}
.exercisetype2e-container #mark3 {
  top: 295px;
}*/
/*.exercisetype2e-container .answeritem {
  position: absolute;
  left: 606px;
  width: 344px;
  height: 72px;
  padding: 0px 14px;
  font-size: 17px;
  text-align: left;
  cursor: pointer;
}
.exercisetype2e-container #b_answer1 {
  top: 119px;
}
.exercisetype2e-container #b_answer2 {
  top: 201px;
}
.exercisetype2e-container #b_answer3 {
  top: 283px;
}
.exercisetype2e-container #questiontext {
  position: absolute;
  left: 620px;
  top: 35px;
  width: 327px;
}
.exercisetype2e-container #jp_container_1 {
  position: absolute;
  left: 20px;
  top: 37px;
}
.exercisetype2e-container #startaudio {
  position: absolute;
  left: 498px;
  top: 354px;
}*/
/*
.exercisetype7a-container #b_ok,
.exercisetype7b-container #b_ok,
.exercisetype7c-container #b_ok,
.exercisetype7d-container #b_ok,
.exercisetype7e-container #b_ok {
  position: absolute;
  left: 900px;
  top: 340px;
}
.exercisetype7-container,
.exercisetype7a-container,
.exercisetype7b-container,
.exercisetype7c-container,
.exercisetype7d-container,
.exercisetype7e-container {
  width: 1014px;
  height: 424px;
  position: absolute;
  z-index: 10;
}
.exercisetype7-container {
  background-image: url("../images/frame1.png");
  background-repeat: no-repeat;
  background-position: 54px 42px;
}
.exercisetype7a-container,
.exercisetype7b-container {
  background-image: url("../images/frame3.png");
  background-repeat: no-repeat;
  background-position: 134px 102px;
}
.exercisetype7c-container {
  background-image: url("../images/frame4.png");
  background-repeat: no-repeat;
  background-position: 225px 102px;
}
.exercisetype7d-container {
  background-image: url("../images/frame5.png");
  background-repeat: no-repeat;
  background-position: 54px 102px;
}
.exercisetype7e-container {
  background-image: url("../images/frame6.png");
  background-repeat: no-repeat;
  background-position: 14px 102px;
}
.exercisetype7-container .left-side,
.exercisetype7-container .right-side {
  width: 376px;
  position: absolute;
  margin: 0px;
  padding: 0px;
}
.exercisetype7-container .left-side {
  left: 62px;
  top: 54px;
}
.exercisetype7-container .right-side {
  left: 516px;
  top: 54px;
}


#b_ok.exercisetype9 {
  position: absolute;
  left: 952px;
  top: 318px;
}
.exercisetype9-container .left-side,
.exercisetype9-container .right-side {
  float: left;
}
.exercisetype9-container .left-side button {
  width: 198px;
}
.exercisetype9-container .left-side {
  width: 218px;
  margin: 100px 0px 0px 168px;
}
.exercisetype9-container .right-side button {
  width: 367px;
}
.exercisetype9-container .right-side {
  width: 377px;
  margin: 100px 0px 0px 78px;
}
.exercisetype9-container .checkmarks {
  margin: 100px 0px 0px 8px !important;
}
*/
.exercisetype7-container .exerciseText,
.exercisetype7a-container .exerciseText,
.exercisetype7b-container .exerciseText,
.exercisetype7c-container .exerciseText,
.exercisetype7d-container .exerciseText,
.exercisetype7e-container .exerciseText {
  font-size: 16px;
  font-weight: bold;
  z-index: 900;
  display: table;
}
.exercisetype7-container .exerciseText > div,
.exercisetype7a-container .exerciseText > div,
.exercisetype7b-container .exerciseText > div,
.exercisetype7c-container .exerciseText > div,
.exercisetype7d-container .exerciseText > div,
.exercisetype7e-container .exerciseText > div {
  display: table-cell;
  vertical-align: middle;
}

.exercisetype7b-container .answeritem,
.exercisetype7c-container .answeritem,
.exercisetype7d-container .answeritem,
.exercisetype7e-container .answeritem
{
  min-width: min-content;
}

.exercisetype7-container .exerciseText:focus,
.exercisetype7a-container .exerciseText:focus,
.exercisetype7b-container .exerciseText:focus,
.exercisetype7c-container .exerciseText:focus,
.exercisetype7d-container .exerciseText:focus,
.exercisetype7e-container .exerciseText:focus,
.exercisetype8-container .exerciseText:focus {
  outline: 2px solid #5E9ED6!important;
}

/*#b_ok.exercisetype7a,
#b_ok.exercisetype7b,
#b_ok.exercisetype7c,
#b_ok.exercisetype7d,
#b_ok.exercisetype7e {
  position: absolute;
  left: 476px;
  top: 345px;
}

.exercisetype7a-container .left-side,
.exercisetype7b-container .left-side {
  position: absolute;
  left: 143px;
  top: 111px;
}

.exercisetype7c-container .left-side {
  position: absolute;
  left: 237px;
  top: 111px;
}

.exercisetype7d-container .left-side {
  position: absolute;
  left: 63px;
  top: 111px;
}
.exercisetype7e-container .left-side {
  position: absolute;
  left: 23px;
  top: 111px;
}

.exercisetype7a-container .right-side,
.exercisetype7b-container .right-side {
  position: absolute;
  left: 143px;
  top: 228px;
}

.exercisetype7c-container .right-side {
  position: absolute;
  left: 237px;
  top: 228px;
}

.exercisetype7d-container .right-side {
  position: absolute;
  left: 63px;
  top: 228px;
}
.exercisetype7e-container .right-side {
  position: absolute;
  left: 23px;
  top: 228px;
}

.exercisetype7a-container .answeritem,
.exercisetype7b-container .answeritem,
.exercisetype7c-container .answeritem,
.exercisetype7d-container .answeritem {
  width: 140px;
  height: 41px;
  float: left;
  margin: 0px 0px 0px 23px;
  padding: 0px 10px;
}
.exercisetype7e-container .answeritem {
  width: 139px;
  height: 41px;
  float: left;
  margin: 0px 0px 0px 3px;
  padding: 0px 10px;
}
.exercisetype7a-container .answeritem:first-child,
.exercisetype7b-container .answeritem:first-child,
.exercisetype7c-container .answeritem:first-child,
.exercisetype7d-container .answeritem:first-child,
.exercisetype7e-container .answeritem:first-child {
  margin: 0px;
}

.exercisetype7-container .answeritem {
  margin: 0px 5px 12px 5px;
  padding: 0px 10px;
  height: 65px;
  width: 356px;
}

.exercisetype8-container {
  background-repeat: no-repeat;
  background-position: 125px 42px;
  width: 1014px;
  height: 424px;
}
.exercisetype8-container .exerciseText {
  font-size: 16px;
  font-weight: bold;
  z-index: 900;
  display: table;
}
.exercisetype8-container .exerciseText > div {
  display: table-cell;
  vertical-align: middle;
}
.exercisetype8-container .answeritem {
  margin: 0px 5px 12px 5px;
  padding: 5px 10px;
  height: 55px;
  width: 356px;
  font-weight: bold;
}
#exercisetype8-left-side {
  
  top: 55px;
  left: 132px;
}
#exercisetype8-right-side {
  
  top: 55px;
  left: 397px;
}
#exercisetype8-left-side .exercisePart {
  display: inline-block;
}
#exercisetype8-right-side .exercisePart {
  display: inline;
}
#exercisetype8-left-side .answeritem {
  width: 190px;
}
#exercisetype8-right-side .answeritem {
  width: 460px;
}*/
.exercisetype8-container .text-input {
  width: 80px;
  /*height: 30px;*/
  padding: 1px;  
  border-style: solid;
  border-color: #cad3e3;
  background-color: #cad3e3;
  text-align: left;
  display: inline-block;
}/*
.exercisetype8-container .checkmarks {
  width: 40px;
  position: absolute;
  left: 917px;
  top: 70px;
  background-position: 50% 50%;
}
.exercisetype8-container > div.checkmarks > div {
  width: 40px;
  margin: 0px 0px 37px 0px;
}
.exercisetype8-container .btn50 {
  left: 956px;
  top: 360px;
}

.exercisetype14-container .answeritem {
  padding: 5px 10px;
  height: 22px;
  width: 303px;
  font-weight: bold;
  position: absolute;
  top: 377px;
  left: 610px;
}
.exercisetype14-container .question {
  position: absolute;
  top: 15px;
  left: 150px;
  width: 393px;
  margin: 0;
}
.exercisetype14-container .text {
  position: absolute;
  top: 16px;
  left: 83px;
  width: 851px;
  margin: 0;
  height: 67px;
  font-size: 22px;
}
.exercisetype14-container #imagecontainer {
  height: 326px;
  width: 480px;
  left: 83px;
  top: 83px;
  text-align: center;
}
.exercisetype14-container #image {
  margin: 15px 0 0 15px;
}

.exercisetype14-container #image img {
  
  height: 296px;
  margin: 0 auto;
}

.exercisetype14-container .checkmarks {
  width: 40px;
  position: absolute;
  left: 952px;
  top: 371px;
  background-position: 50% 50%;
}
.exercisetype14-container > div.checkmarks > div {
  width: 40px;
}
.exercisetype14-container .btn50 {
  left: 948px;
  top: 359px;
  display: none;
}
*/
#screenplayer .exercisetype9-container > div > button {
  margin: 0px;
  padding: auto 10px;
  font-size: 16px;
  min-height: 43px;
  font-weight: bold;
  position: static;
  vertical-align: middle;
  line-height: 20px;
}
#exercisetype9-rightanswers {
  clear: both;
  list-style: none;
  margin: 0px 0px 0px 168px;
  padding: 0px;
}
#exercisetype9-rightanswers > li {
  height: 20px;
  padding: 10px 0px;
}
#exercisetype9-rightanswers > li > div {
  font-size: 15px;
  font-weight: bold;
  margin: 0px;
  padding: 0px;
  width: 337px;
  white-space: nowrap;
}
#exercisetype9-rightanswers > li > div:first-child {
  width: 168px;
  float: left;
  margin: 0px 130px 0px 15px;
}
.exercisetype7-container .btn50 {
  left: 956px;
  top: 360px;
}
/*.exercisetype7-container .checkmarks {
  width: 40px;
  position: absolute;
  left: 917px;
  top: 66px;
  background-position: 50% 50%;
}*/

.exercisetype7-container .ui-draggable/*:not(.ui-draggable-dragging)*/,
.exercisetype7b-container .ui-draggable/*:not(.ui-draggable-dragging)*/,
.exercisetype7c-container .ui-draggable/*:not(.ui-draggable-dragging)*/,
.exercisetype7d-container .ui-draggable/*:not(.ui-draggable-dragging)*/,
.exercisetype7e-container .ui-draggable/*:not(.ui-draggable-dragging)*/
{
  /*width:100%;*/
}
/*
.exercisetype7-container .ui-draggable.ui-draggable-dragging,
.exercisetype7b-container .ui-draggable.ui-draggable-dragging,
.exercisetype7c-container .ui-draggable.ui-draggable-dragging
{
  text-shadow:
     -1px -1px 0 #000,  
      1px -1px 0 #000,
      -1px 1px 0 #000,
       1px 1px 0 #000;
}
*/
.exercisetype7-container .checkmark,
.exercisetype7b-container .checkmark,
.exercisetype7c-container .checkmark,
.exercisetype7d-container .checkmark,
.exercisetype7e-container .checkmark
{
  right: -29px;
  /*margin: 0px 0px 37px 0px;*/
}
/*
.exercisetype9-container .checkmark {
  width: 40px;
  float: left;
  margin: 10px 50px;
}
.exercisetype9-container > div.checkmarks > div {
  margin: 0px 0px 3px 0px;
}
*/
.exercisetype7-container > div.checkmarks > div,
.exercisetype7a-container > div.checkmarks > div,
.exercisetype7b-container > div.checkmarks > div,
.exercisetype7c-container > div.checkmarks > div,
.exercisetype7d-container > div.checkmarks > div,
.exercisetype7e-container > div.checkmarks > div {
  height: 40px;
  padding: 0px;
}
/*
.exercisetype9-container > div.checkmarks > div {
  padding: 0px;
}
*/
div.checkmarks > div,
div.checkmark {
  width: 40px;
  height: 40px;
  visibility: hidden;
  background-color: transparent;
}
div.checkmarks > div.correct,
div.checkmarks > div.incorrect,
div.checkmark.correct,
div.checkmark.incorrect {
  visibility: visible;
  background-image: url("../images/button_rightwrong.png");
  z-index: 5;
  /*overflow: hidden;*/
}

div.checkmark-small.incorrect-small {
  visibility: visible;
  background-image: url("../images/icon_incorrect-s.svg");
  z-index: 5;
  /*overflow: hidden;*/
}
div.checkmark-small.correct-small {
  visibility: visible;
  background-image: url("../images/icon_correct-s.svg");
  z-index: 5;
  /*overflow: hidden;*/
}

div.checkmarks > div.correct,
div.checkmark.correct {
  background-position: center top;
}
div.checkmarks > div.incorrect,
div.checkmark.incorrect {
  background-position: center bottom;
}
.checkmarks > div {
  width: 40px;
  height: 40px;
}
div.checkmarks.small > div.correct,
div.checkmarks.small > div.incorrect,
div.checkmark.small {
  background-image: url("../images/button_rightwrong_26.png");
}
.checkmarks.small > div,
div.checkmark.small {
  width: 26px;
  height: 26px;
}
div.checkmarks.small.shadow > div.correct,
div.checkmarks.small.shadow > div.incorrect,
div.checkmark.small.shadow {
  background-image: url("../images/button_rightwrong_26_shadow.png");
}
.exercisetype7a-container .checkmarks,
.exercisetype7b-container .checkmarks,
.exercisetype7c-container .checkmarks,
.exercisetype7d-container .checkmarks,
.exercisetype7e-container .checkmarks {
  height: 40px;
  position: absolute;
}
.exercisetype7a-container .checkmarks > div,
.exercisetype7b-container .checkmarks > div,
.exercisetype7c-container .checkmarks > div,
.exercisetype7d-container .checkmarks > div {
  float: left;
  margin: 0px 0px 0px 143px !important;
  padding: 0px;
}
.exercisetype7e-container .checkmarks > div {
  float: left;
  margin: 0px 0px 0px 122px !important;
  padding: 0px;
}
.exercisetype7a-container .checkmarks > div:first-child,
.exercisetype7b-container .checkmarks > div:first-child,
.exercisetype7c-container .checkmarks > div:first-child,
.exercisetype7d-container .checkmarks > div:first-child,
.exercisetype7e-container .checkmarks > div:first-child {
  margin: 0px !important;
}
.exercisetype7a-container .checkmarks,
.exercisetype7b-container .checkmarks {
  left: 202px;
  top: 281px;
}
.exercisetype7c-container .checkmarks {
  left: 297px;
  top: 281px;
}
.exercisetype7d-container .checkmarks {
  left: 122px;
  top: 281px;
}
.exercisetype7e-container .checkmarks {
  left: 82px;
  top: 281px;
}
/*.exercisetype10a-container #imagecontainer,
.exercisetype10b-container #imagecontainer {
  width: 450px;
  height: 350px;
}*/
/*.exercisetype10a-container #image {
  margin: 14px 0 0 8px;
}
.exercisetype10a-container #oef10-inleidende-tekst {
  position: absolute;
  left: 520px;
  top: 56px;
}
.exercisetype5a-container .checkmark{
  position: absolute;
  right: 0px;
  visibility: visible;
  z-index: 100;
  top: 5px;
}
.exercisetype5a-container {
  background-image: url("../images/frame2.png");
  background-repeat: no-repeat;
  background-position: 7px 35px;
  width: 1014px;
  height: 424px;
}*/

.exercisetype5b-container .answeritem,
.exercisetype8-container .answeritem,
.exercisetype10a-container .answeritem,
.exercisetype10b-container .answeritem {
  font-size: 15px;
  font-weight: bold;
}
/*.exercisetype10a-container .answeritem {
  position: absolute;
  left: 505px;
  top: 169px;
  width: 439px;
  height: 81px;
  font-size: 16px;
  padding: 18px 10px 5px 14px;
}*/
.exercisetypetk2ab-container input,
.exercisetype5a-container input,
.exercisetype5b-container input,
.exercisetype10a-container input,
.exercisetype10b-container input,
.exercisetype14-container input,
.exercisetypetk2d-container input {
  /*Standaart schaduw op IOS weghalen*/
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  width: 80px;
  height: 27px;
  padding: 1px;
  padding-bottom: 2px;
  /*border-width: 0px 2px 2px 2px;
  border-style: solid;
  border-color: #cbd4e3;*/
  border-bottom: 1px solid #cad3e3;
  border-image: linear-gradient(to bottom, rgba(0,0,0,0) 75%,#cad3e3 100%,#cad3e3 25%,rgba(0,0,0,0) 75%);
  border-image-slice: 1;
  font-family: Source Sans Pro;
  background-color: transparent;
  font-size: 22px;
  text-align: left;  
}
exercisetype10a-container input
{
  height: 30px!important;
}

.exercisetype14-container input{
  color:#002e5e!important;
}


.exercisetype10a-container input{
  min-width: 80px!important;
}

.exercisetype10a-container input,
.exercisetype10b-container input,
.exercisetype10a-container input {
  font-size: 16px;
}

/*IOS*/
@supports (-webkit-touch-callout: none) {
  .exercisetype5a-container input {
    font-size: 22px!important;
    font-family: 'Source Sans Pro';
    color:#002e5e!important;
    height: 33px!important;  
  }

  .exercisetype5b-container input,
  .exercisetype10a-container input,
  .exercisetype10b-container input,
  .exercisetype14-container input,
  .exercisetypetk2ab-container input
  {
    height: 33px!important;  
  }

}
/*GEEN IOS*/
@supports not (-webkit-touch-callout: none) {
  .exercisetype5a-container input {
    font-size: 22px!important;
    font-family: 'Source Sans Pro';
    color:#002e5e!important;
    height: 30px!important;  
  }
}


.exercisetypetk2ab-container input,
.exercisetypetk2d-container input {
  font-size: 22px!important;
  font-family: Source Sans Pro;
  color: #002e5e!important;
  text-align: left;
  font-weight: normal;
  height: 30px;
}
.exercisetype5b-container input {
  width: 44px;
}
.exercisetype5b-container input[disabled] {
  color: #FFF;
}
/*.exercisetype5b-container .answered {
  background-color: #999999;
}*/
.exercisetype5b-container .answer-ghost {
  color: #ea184e;
}
/*
.exercisetype10a-container #b_ok {
  position: absolute;
  left: 953px;
  top: 357px;
}
*/
.exercisetype10a-container .checkmarks {
  /*position: absolute !important;
  left: 0px;
  top: 104px;*/
}
/*
.exercisetype10b-container #oef10-oefening-tekst {
  position: absolute;
  left: 508px;
  top: 38px;
  width: 493px;
}
*/
.exercisetype10b-container #oef10-oefening-tekst .answeritem {
  /*width: 414px;*/
  /*height: 76px;*/
  font-size: 16px;
  font-weight: bold;
  padding: 12px 10px 0px 10px;
}
.exercisetype10b-container #oef10-oefening-tekst .sub-exercise {
  margin: 0px 0px 1.5rem 0px;
  position: relative;
}
.exercisetype10b-container .sub-exercise .checkmarks {
  /*position: absolute !important;*/
  left: 9px;
  top: 93px;
}
/*.exercisetype10b-container #b_ok {
  position: absolute;
  left: 445px;
  top: 21px;
}
.exercisetype11c-container #b_ok {
  position: absolute;
  left: 829px;
  top: 366px;
}
.exercisetype11c-container #jp_container_1 {
  position: absolute;
  left: 194px;
  top: 57px;
  padding: 9px 9px 9px 9px;
  width: 608px;
  height: 341px;
}*/
.exercisetype11c-container .jp-controls li a.emmia-jp-rewind,
.exercisetype11c-container .jp-controls li a.jp-play,
.exercisetype11c-container .jp-controls li a.jp-pause {
  position: absolute;
  left: 272px;
  top: 360px;
}
.exercisetype11c-container .jp-controls li a.jp-pause,
.exercisetype11c-container .jp-controls li a.jp-play {
  left: 318px;
}
.exercisetype29-container #b_ok {
  position: absolute;
  left: 899px;
  top: 176px;
}
.exercisetype29-container #jp_container_1 {
  display: none;
  position: absolute;
  left: 196px;
  top: 59px;
  width: 617px;
  height: 347px;
  padding: 9px 9px 9px 9px;
}
.exercisetype29-container .jp-controls li a.emmia-jp-rewind,
.exercisetype29-container .jp-controls li a.jp-play,
.exercisetype29-container .jp-controls li a.jp-pause {
  position: absolute;
  left: 276px;
  top: 364px;
}
.exercisetype29-container .jp-controls li a.jp-pause,
.exercisetype29-container .jp-controls li a.jp-play {
  left: 322px;
}
.exercisetype29-container button.answeritem {
  position: absolute;
  left: 196px;
  width: 406px;
  height: 93px;
  padding-left: 14px;
  font-weight: bold;
  font-size: 18px;
}
.exercisetype29-container .checkmark {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -20px;
  margin-top: -20px;
}
.exercisetype29-container .video-thumb {
  position: absolute;
  left: 18px;
  background-color: #333;
  background-color: rgba(51, 51, 51, 0.5);
}
.exercisetype29-container .video-thumb img {
  max-width: 165px;
  max-height: 93px;
}
.exercisetype29-container .video-thumb .playicon {
  width: 39px;
  height: 39px;
  cursor: pointer;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -19.5px;
  margin-top: -19.5px;
  background-image: url('../images/btn_video.png');
  background-position: center bottom;
}
.exercisetype29-container .video-thumb.active .playicon {
  background-position: center top;
}
.exercisetype29-container .video-thumb .activeindicator {
  position: absolute;
  border-style: solid;
  border-color: transparent;
  cursor: pointer;
}
.exercisetype29-container .video-thumb.active .activeindicator {
  border-color: white;
}
.exercisetype29-container #b_answer1,
.exercisetype29-container #photo {
  top: 100px;
}
.exercisetype29-container #b_answer2,
.exercisetype29-container #photo2 {
  top: 208px;
}
.exercisetype29-container #b_answer3,
.exercisetype29-container #photo3 {
  top: 316px;
}
.exercisetype29-container .step-indicator {
  background-color: white;
  position: absolute;
  top: -16px;
  left: 869px;
  padding: 3px;
  z-index: 0;
}
.exercisetype29-container .videohint {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  width: 635px;
  height: 22px;
  position: absolute;
  top: 50%;
  left: 0;
  margin-left: 0;
  margin-top: -11px;
}
.exercisetype29-container .fade {
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20);
  filter: alpha(opacity=20);
  -moz-opacity: 0.2;
  -khtml-opacity: 0.2;
  opacity: 0.2;
}
.exercisetype29-container .step-indicator > div {
  width: 99px;
  height: 83px;
  border-width: 2px;
  border-style: solid;
}
.exercisetype29-container #next {
  position: absolute;
  left: 854px;
  top: 178px;
  width: 136px;
  height: 46px;
  background-image: url('../images/b_next.png');
  background-repeat: no-repeat;
  background-position: 50%;
  padding: 0;
  cursor: pointer;
}
.exercisetype29-container #next.step1 {
  display: none !important;
}
.exercisetype29-container #next.visible {
  display: block !important;
}
.exercisetype29-container .step-indicator .steplabel {
  text-transform: uppercase;
  font-weight: bold;
  font-size: 21px;
  width: 99px;
  text-align: center;
  position: absolute;
  bottom: 48px;
  color: #000;
}
.exercisetype29-container .step-indicator .stepdigits {
  position: absolute;
  width: 99px;
  height: 31px;
  bottom: 14px;
  text-align: center;
}
.exercisetype29-container .step-indicator .stepdigits > div {
  width: 21px;
  height: 31px;
  display: inline-block;
  margin-left: 2px;
  color: #000;
  font-weight: bold;
  font-size: 31px;
  padding: 0;
  line-height: 31px;
  border-radius: 0;
}
.exercisetype29-container .step-indicator .stepdigits > div.answeritem {
  color: #FFF;
}
.exercisetype29-container .step-indicator .stepdigits > div:first-child {
  margin-left: 0;
}
.exercisetype29-container #questiontext {
  position: absolute;
  left: 196px;
  top: 11px;
  width: 406px;
  height: 78px;
  padding-left: 14px;
  font-size: 18px;
  line-height: 23px;
  background-color: transparent;
  cursor: auto;
}
/*.exercisetype5a-container #oef5-oefening-tekst {
  position: absolute;
  left: 327px;
  top: 45px;
  width: 558px;
}*/


/*.exercisetype5a-container #words {
  position: absolute;
  left: 17px;
  top: 45px;
  width: 223px;
  height: 316px;
  background-color: #707070;
  font-size: 16px;
  padding: 17px 18px;
}
.exercisetype5a-container #words .answeritem {
  font-size: 16px;
}
.exercisetype5a-container #words > div {
  height: 20px;
  margin: 39px 0px 0px 0px;
  font-size: 16px;
}
.exercisetype5a-container #words > div:first-child {
  margin: 0px;
}*/

.exercisetype5a-container #oef5-oefening-tekst .answeritem
{
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.exercisetype5a-container #oef5-oefening-tekst .answeritem input
{
  margin-bottom: 3px;
}

/*.exercisetype5b-container {
  width: 1014px;
  height: 424px;
  overflow: hidden;
}
.exercisetype5b-container #oef5-oefening-tekst,
.exercisetype5b-container #oef5-oefening-checkmarks,
.exercisetype5b-container #words {
  /*position: absolute;
  	left: 17px;
	top: 50px;

  left: 35px;
  top: 36px;
  width: 1047px;
  height: 324px;*/
}
.exercisetype5b-container #oef5-oefening-tekst .answeritem {
  /*width: 196px;
  height: 20px;
  display: inline-block;
  margin: 35px 133px 0px 0px;
  padding: 13px 10px;*/
  position: relative;
}

.exercisetype5b-container .answeritem
{
  margin-right: 100px;
}
.exercisetype5b-container .answeritem #b_ok
{
  float: none;
  position: absolute;
  top: 15px;
  right: -70px;
  margin-top: 0;
}

/*.exercisetype5b-container #oef5-oefening-checkmarks > div {
  margin: 38px 85px 0px 224px;
  display: inline-block;
}*/
/*.exercisetype5b-container #words > div {
  width: 339px;
  height: 72px;
  margin: 9px 0px 0px 10px;
  display: inline-block;
  background-color: transparent;
  font-size: 15px;
  font-weight: bold;
}*/
/*.exercisetype5a-container .answeritem,
.exercisetype5b-container .answeritem {
  padding: 15px 10px;
  font-size: 16px;
  font-weight: bold;
}*/
/*.exercisetype5a-container #oef5-oefening-tekst .answeritem {
  width: 538px;
  height: 33px;
  margin: 0px 0px 4px 0px;
  padding: 11px 10px;
}
.exercisetype5a-container #b_ok {
  position: absolute;
  left: 578px;
  top: 3px;
}
.exercisetype5a-container #oef5-oefening-checkmarks {
  position: absolute;
  left: 906px;
  top: 52px;
}
.exercisetype5a-container #oef5-oefening-checkmarks > div {
  margin: 0px 0px 19px 0px;
}
.alttopbar-container .imagecontainer {
  position: absolute;
  top: -165px;
  right: 0px;
  width: 660px;
  height: 535px;
  z-index: 11;
}
.alttopbar-container #image {
  margin: 39px 0px 0px 12px;
}
#exc20-questions,
#exc23-question {
  position: absolute;
  left: 14px;
  top: 202px;
  width: 280px;
  height: 132px;
  padding: 18px;
}
.exercisetype20-container .answeritem {
  font-size: 16px;
  font-weight: bold;
}
.exercisetype20-container input,
.exercisetype20-container textarea {
  margin: 0px;
  padding: 0px;
  border: 1px solid #000000;
  background-color: #FFFFFF;
  color: #000000;
  font-size: 16px;
  font-weight: bold;
  overflow: hidden;
}
.exercisetype20-container textarea {
  padding: 0px 0px 0px 4px;
  resize: none;
}

.exercisetype6-container {
  position: relative;
}
.exercisetype6-container #b_ok {
  position: absolute;
  left: 734px;
  top: 222px;
}
.exercisetype6-container #b_sound {
  position: absolute;
  left: 673px;
  top: 222px;
}

.exercisetype6-container #exc6_answer {
  position: absolute;
  left: 169px;
  top: 162px;
  width: 595px;
  height: 41px;
}
.exercisetype6-container #exc6_answer input {
  width: 591px;
  height: 35px;
  font-weight: bold;
  font-size: 18px;
  background-color: transparent;
}*/

.exercisetype20-container textarea {
  padding-left: 4px;
}

.exercisetype20-container .exercise-progress-bar {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 5px;
}

.exercisetype20-container .exercise-progress-bar .exercise-progress {
	background-color: #cad3e3;
	font-size: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #ffffff;
	outline: none;
	width: 30px;
	height: 30px;
	border-radius: 16px;
}

.exercisetype20-container .exercise-progress-bar .exercise-progress.correct {
	background-color: #3ab34a;
}

.exercisetype20-container .exercise-progress-bar .exercise-progress.incorrect {
	background-color: #c91e4e;
}

.exercisetype20-container .exercise-progress-bar .exercise-progress.active {
	outline: 1px solid #002e5e;
}

.exercisetype20-container .exercise-progress-bar .exercise-progress.fa-hand-point-up:before {
	padding-right: 2px;
}

.exercisetype6-container #checkmark {
  position: absolute;
  top: 17px;
  /*top: calc(50% - 14px);*/
  margin-right: 16px;
}
.exercisetype6-container .wronganswer {
  background-color: #fff;
}
.exercisetype4-container {
  position: relative;
}
.exercisetype4-container .intro {
  padding: 10px 0 0 10px;
  width: 100%;
  color: #000;
}
.exercisetype4-container .intro span {
  background-color: #fff;
}
/*
.exc4_question {
  float: left;
}
.exc4_column {
  width: 310px;
  height: 387px;
  float: left;
  margin: 10px 0 0 0;
}
.exercisetype4-container span.exc4_preview {
  margin: 0 0 0 30px;
  padding: 5px;
  font-size: 18px;
}

.exercisetype4_answerblock {
  clear: left;
  margin: 0 0 0 20px;
}
.exercisetype4-container div,
.exercisetype4-container span {
  float: left;
}
.exercisetype4-container #b_ok,
.exercisetype4-container #b_sound {
  float: left;
  display: block;
  position: relative;
  margin-right: 10px;
}

*/
.exercisetype4-container #exc4_answer,
.exercisetype4box {
  margin: 0 10px 10px 0px;
  max-width: 250px;
  height: 55px;
}

.exercisetype4-container input:disabled
{
  opacity: 1!important;
}

.exercisetype4-container input {
  /*Standaart schaduw op IOS weghalen*/
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  color: #002e5e!important;
  font-size: 22px;
  background-color: #fff;
  font-family: Source Sans Pro;
  height: 30px;
  max-width: 80%;
  margin-left: 10%;
  margin-top: 10px;  
  border-bottom: 1px solid #cad3e3;
  border-image: linear-gradient(to bottom, rgba(0,0,0,0) 75%,#cad3e3 100%,#cad3e3 25%,rgba(0,0,0,0) 75%);
  border-image-slice: 1;
  padding-left: 2px;
  padding-right: 2px;
}


.exercisetype4-container input:disabled {
  -webkit-text-fill-color: #002e5e;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
  filter: alpha(opacity=50);
  -moz-opacity: 0.5;
  -khtml-opacity: 0.5;
  opacity: 0.5;
}

.exercisetype4box {
  /*width: calc(100% - 125px);*/
}

.exercisetype4-container .checkmark{
  top: 15px;
  /*top: 7px;*/
  left: calc(100% - 11px - 14px);
}

.exercisetype4_answerblock {
    /*max-width: 300px;*/
    max-width: 250px;
}
/*
.exercisetype4-container .checkmark,
.exercisetype4-container .correct {
  display: none;
  margin: 3px 9px 0 0;
}
*/
.exercisetype4-container .wronganswer {
  /*background-color: #999;*/
}
/*
.exercisetype11a-container #b_ok {T
  position: absolute;
  left: 291px;
  top: 305px;
}
.exercisetype11a-container #b_sound {
  position: absolute;
  left: 291px;
  top: 239px;
}
*/
.coin5cent,
.coin10cent,
.coin20cent,
.coin50cent,
.coin1euro,
.coin2euro,
.coin5euro,
.coin10euro,
.coin20euro,
.coin50euro {
  background-position: center bottom;
}
.coin5cent.outline,
.coin10cent.outline,
.coin20cent.outline,
.coin50cent.outline,
.coin1euro.outline,
.coin2euro.outline,
.coin5euro.outline,
.coin10euro.outline,
.coin20euro.outline,
.coin50euro.outline {
  background-position: center top;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  filter: alpha(opacity=70);
  -moz-opacity: 0.7;
  -khtml-opacity: 0.7;
  opacity: 0.7;
}
.coin5cent {
  width: 39px;
  height: 39px;
  background-image: url("../images/p_5cent.png");
}

.exercisetype12-container > .row{
	justify-content: space-between;
}

.exercisetype12-container #coins .coin5cent {
  left: 3px;
  top: 245px;
}
.coin10cent {
  width: 39px;
  height: 39px;
  background-image: url("../images/p_10cent.png");
}
.exercisetype12-container #coins .coin10cent {
  left: 3px;
  top: 201px;
}
.coin20cent {
  width: 42px;
  height: 42px;
  background-image: url("../images/p_20cent.png");
}
.exercisetype12-container #coins .coin20cent {
  left: 1px;
  top: 151px;
}
.coin50cent {
  width: 45px;
  height: 45px;
  background-image: url("../images/p_50cent.png");
}
.exercisetype12-container #coins .coin50cent {
  left: 0px;
  top: 100px;
}
.coin1euro {
  width: 41px;
  height: 41px;
  background-image: url("../images/p_1euro.png");
}
/*.exercisetype12-container #coins .coin1euro {
  left: 2px;
  top: 52px;
}*/
.coin2euro {
  width: 46px;
  height: 46px;
  background-image: url("../images/p_2euro.png");
}
/*.exercisetype12-container #coins .coin2euro {
  left: 0px;
  top: 0px;
}*/
.coin5euro {
  width: 112px;
  height: 58px;
  background-image: url("../images/p_5euro.png");
}
/*.exercisetype12-container #coins .coin5euro {
  left: 73px;
  top: 0px;
}*/
.coin10euro {
  width: 116px;
  height: 62px;
  background-image: url("../images/p_10euro.png");
}
/*.exercisetype12-container #coins .coin10euro {
  left: 73px;
  top: 71px;
}*/
.coin20euro {
  width: 119px;
  height: 65px;
  background-image: url("../images/p_20euro.png");
}
/*.exercisetype12-container #coins .coin20euro {
  left: 73px;
  top: 143px;
}*/
.coin50euro {
  width: 128px;
  height: 70px;
  background-image: url("../images/p_50euro.png");
}

.exercisetype12-container #coins {
  flex: 0 0 205px;
  height: fit-content;
	height: 350px;
}
.exercisetype12-container #coins > div{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.exercisetype12-container .draggable{
	touch-action: none;
}
.exercisetype12-container #outerdropzone {
  padding-left: 5px;
	height: 350px; 
}
.exercisetype12-container #dropzone {
  width: 240px;
  position: relative;
	margin-right: 50px;
}

.exercisetype12-container #dropzone.drophover{
	background-color: rgba(128,160,192,0.5);
}

.exercisetype12-container .interaction-area {
	flex-wrap: wrap;
	display: flex;
	width: 530px;
	max-width: 100%;
}

.exercisetype12-container #totalamount {
	z-index: 10;
	position: relative;
	text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
	pointer-events: none;
}

/*.exercisetype12-container #coins .coin50euro {
  left: 73px;
  top: 214px;
}
.exercisetype12-container #coins {
  position: absolute;
  left: 536px;
  top: 66px;
  width: 199px;
  height: 282px;
}
exercisetype12-container #coins > div {
  position: absolute;
}
.exercisetype12-container #imagecontainer {
  position: absolute;
  left: 20px;
  top: 37px;
  width: 465px;
  height: 369px;
}
.exercisetype12-container #dropzone,
.exercisetype12-container #dropzonebg {
  position: absolute;
  left: 749px;
  top: 37px;
  width: 252px;
  height: 367px;
}
.exercisetype12-container #dropzonebg {
  background-color: #333;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
  filter: alpha(opacity=50);
  -moz-opacity: 0.5;
  -khtml-opacity: 0.5;
  opacity: 0.5;
}
.exercisetype12-container #totalamount {
  position: absolute;
  left: 84px;
  bottom: 4px;
  width: 73px;
  height: 24px;
  padding: 14px 12px;
  text-align: right;
  background-color: #fff;
  color: #000;
  font-weight: bold;
}
.exercisetype12-container #b_ok {
  position: absolute;
  right: 7px;
  bottom: 6px;
}
.exercisetype12-container #checkmark {
  position: absolute;
  left: 948px;
  top: 352px;
}
.exercisetype12-container #txt0 {
  position: absolute;
  left: 32px;
  top: 8px;
  font-size: 17px;
  font-weight: bold;
  color: #333;
}

.exercisetype40-container {
  width: 1014px;
  height: 424px;
  overflow: hidden;
  position: relative;
}
.exercisetype40-container .answeritem {
  font-size: 15px;
  font-weight: bold;
}
.exercisetype40-container .answeritem span {
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
}
.exercisetype40-container #b_ok {
  position: absolute;
  left: 952px;
  top: 181px;
}
.exercisetype40-container #drag-origins {  
  left: 28px;
  top: 106px;
  width: 426px;
  z-index: 10;
}
.exercisetype40-container .drag-origin img {
  z-index: 10;
  
}
.exercisetype40-container .shadow {
  margin: 2px 0px 0px 2px;
  background-color: #999;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
  filter: alpha(opacity=50);
  -moz-opacity: 0.5;
  -khtml-opacity: 0.5;
  opacity: 0.5;
}
.exercisetype40-container .drag-origin {
  margin: 0px 10px 26px 0px;
  padding: 0px;
  display: inline-block;
  cursor: pointer;
}

.exercisetype40-container #drag-destinations {
  position: absolute;
  left: 473px;
  top: 14px;
  width: 381px;
}
.exercisetype40-container #drag-destinations .checkmark {
  position: absolute;
  left: 408px;
  top: 89px;
}
.exercisetype40-container #drag-destinations > div {
  height: 189px;
  margin-bottom: 7px;
  position: relative;
}

.exercisetype40-container #drag-destinations .dropzone,
.exercisetype40-container #drag-destinations .dropzonebg {
  position: absolute;
  bottom: 0px;
  left: 0px;
}

.exercisetype40-container #drag-destinations .title {
  border: 1px solid white;
  width: auto;
  text-align: center;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}
.exercisetype40-container #drag-destinations .dropzone {
  border: 1px solid white;
  width: 379px;
  height: 158px;
}
.exercisetype40-container #drag-destinations .dropzonebg {
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
  filter: alpha(opacity=50);
  -moz-opacity: 0.5;
  -khtml-opacity: 0.5;
  opacity: 0.5;
  width: 381px;
  height: 160px;
  background-color: white;
}
.exercisetype40-container .ui-draggable-dragging {
  margin: 0px;
}*/
.exercisetype40-container #drag-origins > div > span 
{
  max-width: 135px!important;
  min-width: 135px;
}
.exercisetype40-container #drag-origins > div > img 
{
  max-width: 87px!important;
}
.exercisetype40-container #drag-destinations > div > img
{
  max-width: 87px!important;
}
/*
.exercisetype41-container {
  width: 1012px;
  height: 424px;

}
.exercisetype41-container #incorrectcheckmark {
  position: absolute;
  top: 100px;
  left: 952px;
  z-index: 20;
  display: none;
}
.exercisetype41-container .photostyled {
  width: 120px;
  height: 120px;
  position: absolute;
  z-index: 1;
  top: 222px;
  left: 115px;
  background-color: #fff;
  border: none;
}
*/
.exercisetype41-container .dropzone.drophover{
	background-color: rgba(128,160,192,0.5);
}
/*
.exercisetype41-container #drag-destinations .dropzone:hover {
  background-color: #FF9900;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
  filter: alpha(opacity=50);
  -moz-opacity: 0.5;
  -khtml-opacity: 0.5;
  opacity: 0.5;
}
.exercisetype41-container .intro {
  width: 230px;
  margin: 30px 0 0 20px;
  padding: 10px;
  font-size: 18px;
}
.exercisetype41-container .imgbox {
  position: absolute;
  left: 354px;
  top: -165px;
  width: 660px;
  height: 535px;
  z-index: 1;
}
.exercisetype41-container .smallimgbox {
  position: absolute;
  left: 14px;
  top: 202px;
  width: 280px;
  height: 132px;
  padding: 18px;
  z-index: 0;
}
.exercisetype41-container .answeritem {
  font-size: 15px;
  font-weight: bold;
}
.exercisetype41-container #b_ok {
  position: absolute;
  left: 952px;
  top: 81px;
  z-index: 1000;
}
.exercisetype41-container #drag-origins {
  position: absolute;
  left: 123px;
  top: 233px;
  z-index: 1000;
}
.exercisetype41-container .drag-origin img {
  z-index: 10;
  
}
.exercisetype41-container .shadow {
  margin: 2px 0px 0px 2px;
  background-color: #999;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
  filter: alpha(opacity=50);
  -moz-opacity: 0.5;
  -khtml-opacity: 0.5;
  opacity: 0.5;
}
.exercisetype41-container .drag-origin {
  margin: 0px;
  padding: 0px;
  cursor: pointer;
  background-color: #fff;
}
.exercisetype41-container #drag-destinations {
  position: absolute;
  z-index: 2;
  left: 365px;
  top: -137px;
  width: 635px;
  height: 480px;
  border: 0px solid black;
}*/
.exercisetype41-container #drag-destinations .dropzone img {
  left: 0 !important;
  top: 0 !important;
}
.exercisetype41-container #drag-destinations .dropzone,
.exercisetype41-container #drag-destinations .dropzonebg {
  position: absolute;
  bottom: 0px;
  left: 0px;
}
.exercisetype41-container #drag-destinations .dropzone
{
  text-align: left;
}
.exercisetype41-container #drag-destinations .dropzone .checkmark
{
  position: absolute;
  right: -15px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}
.exercisetype41-container #drag-destinations .dropzone.hover
{
  background-color: rgba(128,160,192,0.5);
}



/*
.exercisetype41-container #drag-destinations .title {
  border: 1px solid white;
  width: auto;
  text-align: center;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}
.exercisetype41-container #drag-destinations .dropzone {
  color: black;
}
.exercisetype41-container .ui-draggable-dragging {
  margin: 0px;
}*/
.hotspot:hover {
  cursor: pointer;
  /*  Made the background color orange and fully transparent, for
		IE. If the background-color is set to 'transparent', IE won't
		make the element hoverable. */
  background-color: #FF9900;
  border-color: #FF9900;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  -khtml-opacity: 0;
  opacity: 0;
}
.hotspot.mouseover,
.hotspot.correct,
.hotspot.incorrect,
.hotspot.selected {
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  filter: alpha(opacity=70);
  -moz-opacity: 0.7;
  -khtml-opacity: 0.7;
  opacity: 0.7;
}
.hotspot.correct {
  background-color: #00AA00;
  /*border-color: #00AA00 !important;*/
  /*opacity: 0.3;*/
}
.correct-tk5c{
  border-color: #3ab34a!important;
}
.hotspot.incorrect {
  background-color: #AA0000;
  /*border-color: #AA0000 !important;*/
  /*opacity: 0.3;*/
}
.hotspot.selected {
  background-color: #AA0000;
  /*border-color: #AA0000 !important;*/
  border-color: #7F96ae!important;
}
.hotspot.outline.mouseover,
.hotspot.outline.selected,
.hotspot.outline.correct,
.hotspot.outline.incorrect {
  border-width: 3px;
  border-style: solid;
  border-radius: 3px;
}
.jp-video {
  position: absolute;
  left: 40px;
  top: 40px;
}
/** ExerciseTypetk1a4 */
/*.exercisetypetk1a1-container #b_sound,
.exercisetypetk1a2-container #b_sound,
.exercisetypetk1a4-container #b_sound {
  position: absolute;
  left: 939px;
  top: 261px;
}
.exercisetypetk1a1-container #b_ok,
.exercisetypetk1a2-container #b_ok,
.exercisetypetk1a4-container #b_ok {
  position: absolute;
  left: 939px;
  top: 185px;
}

.exercisetypetk1a1-container #tk1a1_answer {
  position: absolute;
  top: 205px;
  left: 490px;
  width: 480px;
  text-align: center;
}
*/
.exercisetypetk1a4-container #tk1a4_answer {
  position: absolute;
  top: 202px;
  left: 494px;
  width: 450px;
  text-align: center;
  font-size: 24px;
}
/*
#oeftk1a-text,
#oeftk1a-answer {
  position: absolute;
  left: 503px;
  width: 426px;
  text-align: center;
}
#oeftk1a-text {
  top: 200px;
}
#oeftk1a-answer {
  top: 310px;
}
*/
/** ExerciseTypetk4b1 **/
.exercisetypetk4b1-container #b_sound {
  position: absolute;
  left: 669px;
  top: 360px;
}

/*
#screenplayer .exercisetypetk4b1-container #imagecontainer,
#screenplayer .exercisetypetk4b2-container #imagecontainer {
  position: absolute;
  left: 20px;
  top: 21px;
  width: 405px;
  height: 369px;
}
#screenplayer .exercisetypetk4b1-container #image,
#screenplayer .exercisetypetk4b2-container #image,
#screenplayer .exercisetypetk4c1-container #image {
  position: absolute;
  left: 50%;
  top: 50%;
}
#screenplayer .exercisetypetk4b1-container #b_answer1,
#screenplayer .exercisetypetk4b2-container #b_answer1,
#screenplayer .exercisetypetk4b2-container #b_answer2,
#screenplayer .exercisetypetk4b1-container #b_answer2,
#screenplayer .exercisetypetk4b2-container #b_answer3,
#screenplayer .exercisetypetk4b1-container #b_answer3 {
  position: absolute;
  left: 510px;
  height: 94px;
  width: 407px;
}
.exercisetypetk4b1-container #b_answer1,
.exercisetypetk4b2-container #b_answer1 {
  top: 21px;
}
.exercisetypetk4b2-container #b_answer2,
.exercisetypetk4b1-container #b_answer2 {
  top: 129px;
}
.exercisetypetk4b2-container #b_answer3,
.exercisetypetk4b1-container #b_answer3 {
  top: 237px;
}
.exercisetypetk4b1-container #mark1,
.exercisetypetk4b2-container #mark1,
.exercisetypetk4b1-container #mark2,
.exercisetypetk4b2-container #mark2,
.exercisetypetk4b1-container #mark3,
.exercisetypetk4b2-container #mark3 {
  left: 927px;
}
.exercisetypetk4b1-container #mark1,
.exercisetypetk4b2-container #mark1 {
  top: 48px;
}
.exercisetypetk4b1-container #mark2,
.exercisetypetk4b2-container #mark2 {
  top: 156px;
}
.exercisetypetk4b1-container #mark3,
.exercisetypetk4b2-container #mark3 {
  top: 264px;
}
.exercisetypetk5c-container #b_sound {
  position: absolute;
  left: 126px;
  top: 151px;
}
.exercisetypetk4b2-container #b_sound1,
.exercisetypetk4b2-container #b_sound2,
.exercisetypetk4b2-container #b_sound3 {
  left: 444px;
}
.exercisetypetk4b2-container #b_sound1 {
  top: 39px;
}
.exercisetypetk4b2-container #b_sound2 {
  top: 147px;
}
.exercisetypetk4b2-container #b_sound3 {
  top: 255px;
}
*/
/* Afbeelding in blok vullend maken */
.exercisetypetk4b2-container #image {
  max-width: 446px;
  max-height: 307px;
  width: 500px;
  height: 400px;
}

/*
.exercisetypetk4c1-container .b_ja {
  position: absolute;
  left: 519px;
  top: 209px;
}
.exercisetypetk4c1-container .b_nee {
  position: absolute;
  left: 695px;
  top: 209px;
}

.exercisetypetk4c1-container #textcontainer {
  position: absolute;
  left: 20px;
  top: 37px;
  width: 466px;
  height: 368px;
}

.exercisetypetk4c1-container #text {
  width: 426px;
  height: 318px;
  font-size: 22px;
}

.exercisetypetk4c1-container #mark {
  top: 222px;
  left: 900px;
}

.exercisetypetk5c-container #b_sound {
  position: absolute;
  left: 126px;
  top: 141px;
}*/
.exercisetypetk5b-container .hotspot {
  /*background-color: rgba(255,255,255, 0.7) !important;
  background-image: none !important;
  border: 3px solid #cccdce;
  border-radius: 3px;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  -khtml-opacity: 1;
  opacity: 1;*/

  background-color: rgba(255,255,255, 0.7) !important;  
  opacity: 0.8;
  border: 2px solid #cad3e3;
  background-color: white;
}
.exercisetypetk5b-container .hotspot.correct {
  background-color: transparent !important;
}/*
.exercisetypetk5b-container #typetk5b-questions {
  position: absolute;
  left: 14px;
  top: 113px;
  width: 284px;
}
.exercisetypetk5b-container #typetk5b-questions .answeritem {
  margin: 0px 0px 9px 0px;
  padding: 28px 0px 0px 14px;
  height: 45px;
  cursor: pointer;
}*/
.exercisetypetk5b-container #typetk5b-questions .selected,
.exercisetypetk5b-container #typetk5b-questions .answered {
  /*width: 256px;*/
  /*margin: 0px 0px 9px 0px;*/
  /*padding: 28px 14px 0px 14px;*/
  height: 45px;
  background-color: #cad3e3 !important;
  cursor: pointer;
  transition: background-color 0.15s, width 0.15s, height 0.15s, margin 0.15s;
}
.exercisetypetk5b-container #typetk5b-questions .answered {
  cursor: auto;
}/*
.exercisetypetk5b-container #typetk5b-checkmarks {
  position: absolute;
  left: 305px;
  top: 129px;
}
.exercisetypetk5b-container .checkmark {
  margin-bottom: 42px;
}

.exercisetypetk3a-container #answers {
  position: absolute;
  left: 78px;
  top: 7px;
  width: 860px;
  text-align: center;
}

.exercisetypetk3a-container .checkmark {
  margin-left: 99px;
  margin-top: 12px;
}
.exercisetypetk3a-container #b_sound {
  position: absolute;
  left: 482px;
  top: 355px;
}
.exercisetypetk3a-container #word {
  position: absolute;
  left: 0px;
  top: 314px;
  width: 1014px;
  text-align: center;
}

.exercisetypetk3a-container .answeritem {
  padding: 11px;
  margin: 0px;
  width: 216px;
  height: 216px;
  cursor: pointer;
  display: flex;
  align-items: center
}

.exercisetypetk3a-container .answeritem img {
  margin: auto;
}*/
.exercisetypetk3a-container .outline {
  display: inline-block;
  background-color: transparent;
  /*margin: 0px 15px 0px 15px;*/
  padding: 9px;
  /*width: 238px;*/
  /*height: 238px;*/
  vertical-align: top;
}
.exercisetypetk3a-container .outline.showBorder {
  background-color: #d0d8e3;
}

.exercisetypetk3b-container #b_sound {  
  left: 482px;
  top: 355px;
}
.exercisetypetk5a-container #answers .answeritem,
.exercisetypetk3b-container .answeritem {
  padding: 10px;
  cursor: pointer;
}
.exercisetypetk5a-container #answers .checkmark{
  position: absolute;
  left: 105px;
  top: 33px;
}
.exercisetypetk3b-container .checkmark {
  position: absolute;
  left: 167px;
  top: 58px;
}
.exercisetypetk5a-container #words .checkmark {
  position: absolute;
  left: 200px;
  top: 10px;
}
.exercisetypetk5a-container #answers .outline{
  display: inline-block;
  background-color: transparent;
  margin: 0px 2px 13px 0px;
  padding: 0px;
  width: 121px;
  height: 97px;
  position: relative;
}

.exercisetypetk3b-container .outline {
  display: inline-block;
  background-color: transparent;
  margin: 0px 2px 13px 0px;
  padding: 0px;
  width: 182px;
  height: 142px;
  position: relative;
}

.exercisetypetk5a-container #answers .outline.showBorder,
.exercisetypetk5a-container .outline.showBorder {
  background-color: #d0d8e3;
}
.exercisetypetk5a-container #answers {
 /*position: absolute;
  left: 183px;
  top: 7px;
  width: 650px;*/
}

.exercisetypetk5a-container img, .exercisetypetk3b-container img  {
    /*position: absolute;*/
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.exercisetypetk5a-container .answered,
.exercisetypetk3b-container .answered {
  background-color: #d0d8e3;
}
.exercisetypetk5a-container #words {
  /*position: absolute;
  left: 142px;
  top: 241px;
  width: 765px;
  text-align: center;*/
}
.exercisetypetk5a-container #words .outline {
  display: inline-block;
  position: relative;
  width: 214px;
  min-height: 36px;
  margin: 0px 7px -1px 7px;
  padding: 3px;
}
.exercisetypetk5a-container #words .answeritem {
  height: 100%;
  padding: 5px 0px;
  font-weight: normal;
  text-align: center;
  cursor: pointer;
}
/*
.exercisetypetk2ab-container #imagecontainer {
  position: absolute;
  left: 20px;
  top: 37px;
}
*/
.exercisetypetk2ab-container .eyeearbutton {
  /*position: absolute;
  left: 643px;
  top: 74px;*/
  display: none;
}
.exercisetypetk2ab-container .earbutton {
  /*position: absolute;
  left: 684px;
  top: 74px;*/
  display: none;
}
/*.exercisetypetk2ab-container #b_ok {
  position: absolute;
  left: 939px;
  top: 186px;
}
.exercisetypetk2ab-container #typetk2ab-checkmark {
  position: absolute;
  left: 694px;
  top: 291px;
}
.exercisetypetk2ab-container #typetk2ab-text,
#oeftk2c-inleidende-tekst,
#oeftk2e-inleidende-tekst {
  position: absolute;
  left: 512px;
  top: 102px;
  width: 404px;
  text-align: center;
}*/
.exercisetypetk2ab-container .text,
#oeftk2c-inleidende-tekst,
#oeftk2e-inleidende-tekst {
  color: #333;
  /*font-size: 22px;*/
}
/*.exercisetypetk2ab-container .buttonborder {
  position: absolute;
  left: 512px;
  top: 143px;
  width: 404px;
  height: 111px;
  padding: 15px 0 0 0;
  margin: 0px;
  border-width: 2px 0 0 0;
}*/
.exercisetypetk2ab-container #text {
  min-height: 318px;
}
.exercisetypetk2ab-container #divquestion {
  white-space: nowrap;
}
.exercisetypetk2ab-container .answeritem {
  margin: 0;
  padding: 14px;
  display: inline-block;
  vertical-align: middle;
  white-space: pre-wrap;
}
.exercisetypetk2ab-container #typetk2ab-checkmark {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  top: auto;
  right: 20px;
}
.exercisetypetk2ab-container #oeftk2e-oefening-tekst .checkmark,
.exercisetypetk2ab-container #oeftk2c-oefening-tekst .checkmark {
  position: absolute !important;
  left: 375px !important;
  top: 39px !important;
}
.exercisetypetk2d-container #words {
  position: absolute;
  left: 268px;
  top: 15px;
  width: 534px;
  height: 292px;
  text-align: center;
}
.exercisetypetk2d-container #words > div {
  display: inline-block;
  width: 142px;
  height: 17px;
  margin: 0px 28px 0px 0px;
  padding: 19px 4px;
  border-style: solid;
  border-width: 0px 0px 2px 0px;
  font-weight: bold;
  text-align: left;
  font-size: 16px;
}
.exercisetypetk2d-container #tk2d-oefening-tekst {
  position: absolute;
  left: 268px;
  top: 307px;
}
.exercisetypetk2d-container #tk2d-oefening-tekst #b_ok {
  position: absolute;
  left: 671px;
  top: -122px;
}
.exercisetypetk2d-container .sub-exercise {
  display: none;
  width: 470px;
  height: 66px;
  padding: 0px 18px;
  font-size: 17px;
}
.exercisetypetk2d-container .sub-exercise > div {
  position: absolute;
  width: 470px;
  margin-left: -235px;
  left: 50%;
  top: 50%;
}
.exercisetypetk2d-container #tk2d-oefening-checkmark {
  position: absolute;
  left: 784px;
  top: 305px;
}
/* spraakherkenning */
#spraakrec {
  display: none;
  position: absolute;
  left: 0px;
  top: 0px;
  /*width: 525px;*/
  /*height:360px;*/
  border: 0px solid #ff0000;
}
#spraakbg {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #333;
  opacity: 0.2;
  filter: alpha(opacity=20);
}
#spraakcontent {
  z-index: 2;
}
#myrecorderFlashContainer {
  z-index: 99;
  display: none;
  position: absolute;
  left: 350px;
  top: 260px;
  width: 230px;
  height: 140px;
  background-color: #b3b3b3;
  padding: 10px 0;
}
.wordline {
  font-size: 1em;
}
.listen {
  background-image: url("../images/bttn_ear.png");
}
.record {
  background-image: url("../images/bttn_mic.png");
}
.stop {
  background-image: url("../images/bttn_mic_rec.png");
}
.ok {
  /*background-image: url("../images/bttn_ok.png");*/
}
.speechmarker.correct,
.speechmarker.wrong {
  width: 40px;
  height: 40px;
  background-image: url("../images/button_rightwrong.png");
}
.speechmarker.correct {
  background-position: center top;
}
.speechmarker.wrong {
  background-position: center bottom;
}
#spraakcontent {
  position: absolute;
  left: 112px;
  top: 112px;
  width: 790px;
}
#spraakcontent td {
  text-align: center;
  position: relative;
}
#spraakcontent button {
  position: relative;
}
#spraakcontent .answeritem {
  padding: 0;
  font-size: 19px;
}
#spraakcontent td,
#spraakcontent tr,
#spraakcontent table {
  margin: 0px;
  padding: 0px;
}
#spraakcontent table.wordstable {
  width: 715px;
}
#spraakcontent.exctype71 table.wordstable {
  width: 620px;
}
#spraakcontent.exctype72B table.wordstable {
  width: 581px;
}
#spraakcontent.exctype72A table.wordstable {
  width: 585px;
}
#spraakcontent table.wordstable td {
  width: 60px;
  padding: 22px;
}
#spraakcontent.exctype71 table.wordstable td {
  width: 60px;
  padding: 4px 22px 9px 22px;
}
#spraakcontent.exctype72B table.wordstable td {
  width: 60px;
  padding: 0px 17px;
  text-align: center;
  vertical-align: middle;
}
#spraakcontent.exctype72B table.wordstable .wordlinemessage td {
  padding: 17px 17px;
}
#spraakcontent.exctype72A table.wordstable td {
  width: 60px;
  padding: 17px 18px;
}
#spraakcontent table.wordstable td.answeritem {
  width: 403px;
  height: 100px;
  padding: 0px;
}
#spraakcontent table.wordstable td button.imagebutton {
  position: relative;
  top: 2px;
}
#spraakcontent.exctype71 table.wordstable td button.imagebutton {
  position: relative;
  top: -2px;
  left: -2px;
}
#spraakcontent.exctype72B table.wordstable td button.imagebutton {
  position: relative;
  top: 2px;
  left: -2px;
}
#spraakcontent.exctype72A table.wordstable td button.imagebutton {
  /*position: relative;*/
  /*top: -2px;*/
  /*left: -2px;*/
}
#spraakcontent table.wordstable td button.imagebutton.ok {
  left: -28px;
}
#spraakcontent.exctype72B table.wordstable td button.imagebutton.ok {
  left: -22px;
}
#spraakcontent.exctype72A table.wordstable td button.imagebutton.ok {
  left: -24px;
}
#spraakcontent.exctype72A table.wordstable td.answeritem {
  width: 297px;
  height: 71px;
  padding: 0px;
}
#spraakcontent.exctype71 table.wordstable td.answeritem {
  width: 308px;
  height: 75px;
  padding: 0px;
}
#spraakcontent.exctype72B table.wordstable td.answeritem {
  width: 299px;
  height: 75px;
  padding: 0px;
}
#spraakcontent.exctype70A {
  position: absolute;
  left: 202px;
  top: 158px;
}
#spraakcontent.exctype70B,
#spraakcontent.exctype70C {
  position: absolute;
  left: 202px;
  top: 36px;
}
#spraakcontent.exctype72A {
  position: absolute;
  left: 449px;
  top: 163px;
}
#spraakcontent.exctype72B {
  position: absolute;
  left: 450px;
  top: 19px;
}
#spraakcontent.exctype72B td.photo {
  padding: 9px;
  height: 239px;
}
#spraakcontent.exctype72B td.photo img {
  max-width: 232px;
  max-height: 223px;
}
#spraakcontent.exctype71 {
  position: absolute;
  left: 248px;
  top: 10px;
}
#spraakcontent.exctype71 td.photo {
  padding: 9px;
  height: 239px;
}
#spraakcontent.exctype71 td.photo img {
  max-width: 450px;
  max-height: 296px;
}
#spraakcontent.exctype72A td.photo {
  padding: 9px;
  height: 239px;
}
#spraakcontent.exctype72A td.photo img {
  max-width: 232px;
  max-height: 223px;
}
#spraakcontent.exctype72B .wordlinemessage td,
#spraakcontent.exctype70B .wordlinemessage td,
#spraakcontent.exctype70C .wordlinemessage td {
  padding: 0;
  height: 26px;
}
#spraakcontent.exctype70C #feedback0,
#spraakcontent.exctype70C #feedback1,
#spraakcontent.exctype70C #feedback2 {
  padding-top: 14px;
  padding-bottom: 15px;
}
.exercisetype70-container .jp-video {
  position: absolute;
  left: 25px;
  top: 38px;
}

.exercisetypetk4c1-container #questiontext {
  /*position: absolute;
  top: 102px;
  left: 523px;
  width: 449px;*/
  font-size: 22px;
  color: #333;
}
.exercisetypetk1c-container .readtext{
  width: 100%;
  /*max-width: 500px;*/
  border-top:0;
  border-left:0;
  border-right:0;
}

.margin-tk1c
{
  margin-left: -72px;
}

.exercisetypetk4c1-container .okbutton,
.exercisetypetk4c1-container .earbutton/*,
.exercisetypetk1c-container .okbutton,
.exercisetypetk1c-container .earbutton*/ {
  display: none;
}
/*
.exercisetypetk4c1-container .readtext,
.exercisetypetk1c-container .readtext {
  border-width: 0px 0px 3px 0px;
  width: 530px;
  float: left;
  position: relative;
  left: 70px;
  top: 15px;
  padding-top: 0px;
  padding-bottom: 15px;
  margin-right: 80px;
  color: #000;
  font-size: 130%;
  height: 27px;
}
.exercisetypetk1c-container .readtext {
  font-size: 15px;
  padding-top: 8px;
  padding-bottom: 7px;
}
*/
.exercisetypetk1c-container .current-row .readtext {
  color: #002e5e!important;
}
.exercisetypetk1c-container button {
  position: relative;
  /*top: 10px;*/
}
.exercisetypetk4c1-container .row {
  width: 730px;
  height: 40px;
  left: 170px;
  position: relative;
  top: 30px;
}
.exercisetypetk1c-container .btn-sound,
.exercisetypetk1c-container .readtext,
.exercisetypetk1c-container .btn-ok
{
  vertical-align: bottom;
}
.exercisetypetk1c-container {
  max-width: 730px;
}
.exercisetypetk1c-container .row > div {
  min-height: 40px;
}


#calculator {
  padding: 1px 0 0 0;
  width: 248px;
  height: 314px;
  background: transparent url("../images/Rekenmachine_bg_248x314.svg") no-repeat;
  background-position: 0 0;
  /*position: absolute;*/
  /*top: 80px;*/
  /*left: 650px;*/
}
#calculator #result {
  font: 28px normal Arial, Helvetica, sans-serif;
  text-align: right;
  color: #000;
  background: transparent;
  background-image: none;
  width: 220px;
  height: 38px;
  margin-top: 22px;
  margin-left: 10px;
  margin-bottom: 12px;
  padding: 3px;
}
#calculator .button-row {
  overflow: hidden;
  width: 237px;
  margin-left: 12px;
}
#calculator button {
  background-color: transparent;
  background-position: left top;
  overflow: hidden;
  text-indent: -9999px;
  position: static;
  background-image: url("../images/Rekenmachine_bttn_248x314.svg") !important;
  margin: 0 2px 2px 0 !important;
  display: block;
  float: left;
  border: none;
  width: 56px;
  height: 45px;
  border: 0px solid transparent;
}
#calculator button:focus
{
  outline: none !important;
}
#calculator #c
{
  width: 113px;
}
#calculator #eq
{
  width: 114px;
}

#calculator #c {
  background-position: -12px -77px;
}
#calculator #c:focus,
#calculator #c.mouseover {
  background-position: -262px -77px;
}
#calculator #c:active {
  background-position: -512px -77px;
}
#calculator #pc {
  background-position: -127px -77px;
}
#calculator #pc:focus,
#calculator #pc.mouseover {
  background-position: -377px -77px;
}
#calculator #pc:active {
  background-position: -627px -77px;
}
#calculator #div {
  background-position: -185px -77px;
}
#calculator #div:focus,
#calculator #div.mouseover {
  background-position: -435px -77px;
}
#calculator #div:active {
  background-position: -685px -77px;
}
#calculator #n7 {
  background-position: -12px -123px;
}
#calculator #n7:focus,
#calculator #n7.mouseover {
  background-position: -262px -123px;
}
#calculator #n7:active {
  background-position: -512px -123px;
}
#calculator #n8 {
  background-position: -70px -123px;
}
#calculator #n8:focus,
#calculator #n8.mouseover {
  background-position: -320px -123px;
}
#calculator #n8:active {
  background-position: -570px -123px;
}
#calculator #n9 {
  background-position: -127px -123px;
}
#calculator #n9:focus,
#calculator #n9.mouseover {
  background-position: -377px -123px;
}
#calculator #n9:active {
  background-position: -627px -123px;
}
#calculator #mul {
  background-position: -185px -123px;
}
#calculator #mul:focus,
#calculator #mul.mouseover {
  background-position: -435px -123px;
}
#calculator #mul:active {
  background-position: -685px -123px;
}
#calculator #n4 {
  background-position: -12px -169px;
}
#calculator #n4:focus,
#calculator #n4.mouseover {
  background-position: -262px -169px;
}
#calculator #n4:active {
  background-position: -512px -169px;
}
#calculator #n5 {
  background-position: -70px -169px;
}
#calculator #n5:focus,
#calculator #n5.mouseover {
  background-position: -320px -169px;
}
#calculator #n5:active {
  background-position: -570px -169px;
}
#calculator #n6 {
  background-position: -127px -169px;
}
#calculator #n6:focus,
#calculator #n6.mouseover {
  background-position: -377px -169px;
}
#calculator #n6:active {
  background-position: -627px -169px;
}
#calculator #min {
  background-position: -185px -169px;
}
#calculator #min:focus,
#calculator #min.mouseover {
  background-position: -435px -169px;
}
#calculator #min:active {
  background-position: -685px -169px;
}
#calculator #n1 {
  background-position: -12px -215px;
}
#calculator #n1:focus,
#calculator #n1.mouseover {
  background-position: -262px -215px;
}
#calculator #n1:active {
  background-position: -512px -215px;
}
#calculator #n2 {
  background-position: -70px -215px;
}
#calculator #n2:focus,
#calculator #n2.mouseover {
  background-position: -320px -215px;
}
#calculator #n2:active {
  background-position: -570px -215px;
}
#calculator #n3 {
  background-position: -127px -215px;
}
#calculator #n3:focus,
#calculator #n3.mouseover {
  background-position: -377px -215px;
}
#calculator #n3:active {
  background-position: -627px -215px;
}
#calculator #plus {
  background-position: -185px -215px;
}
#calculator #plus:focus,
#calculator #plus.mouseover {
  background-position: -435px -215px;
}
#calculator #plus:active {
  background-position: -685px -215px;
}
#calculator #n0 {
  background-position: -12px -261px;
}
#calculator #n0:focus,
#calculator #n0.mouseover {
  background-position: -262px -261px;
}
#calculator #n0:active {
  background-position: -512px -261px;
}
#calculator #dot {
  background-position: -70px -261px;
}
#calculator #dot:focus,
#calculator #dot.mouseover {
  background-position: -320px -261px;
}
#calculator #dot:active {
  background-position: -570px -261px;
}
#calculator #eq {
  background-position: -127px -261px;
}
#calculator #eq:focus,
#calculator #eq.mouseover {
  background-position: -377px -261px;
}
#calculator #eq:active {
  background-position: -627px -261px;
}

#helper-box.exctype25 {
  width: 500px;
  position: absolute;
  left: 0px;
  top: 0px;
}
#helper-box.exctype25 .go-to-website-animation {
  position: absolute;
  left: 219px;
  top: 257px;
  width: 120px;
  height: 120px;
  z-index: 130;
  background-color: #CCCCCC;
  background-color: rgba(0, 0, 0, 0.2);
  -webkit-transform: translateZ(0);
  /* fix trailing pixels on webkit browsers */
}
#screenplayer .exercisetype25 .go-to-website {
  position: absolute;
  left: 54px;
  top: 15px;
  width: 450px;
  height: 296px;
  margin: 0;
  padding: 0;
  z-index: 131;
}
#screenplayer .exercisetype25 .go-to-website .go-to-website-btn {
  position: absolute;
  left: 50%;
  bottom: -61px;
  margin-left: -55px;
  text-indent: -9999px;
  background-image: url("../images/bttn_site.png");
  cursor: pointer;
}
#screenplayer .exercisetype25 #image {
  position: absolute;
  left: 54px;
  top: 15px;
  width: 450px;
  height: 296px;
  margin: 0;
  padding: 0;
  z-index: 130;
}
#screenplayer .exercisetype25 #image #go-to-website-text {
  position: absolute;
  width: 500px;
  left: 50%;
  bottom: -98px;
  margin-left: -250px;
  text-align: center;
  color: #000;
  font-weight: bold;
  font-size: 16px;
  letter-spacing: 1px;
}
#screenplayer .exercisetype25-container #go-to-website-text {
  margin: 368px 0 0 0;
  text-align: center;
  color: #000;
  font-weight: bold;
  font-size: 16px;
  letter-spacing: 1px;
}
#screenplayer .exercisetype25-container .checkmark {
  position: absolute;
  left: 871px;
}
#screenplayer .exercisetype25-container .answeritem {
  position: absolute;
  left: 523px;
  height: 72px;
}
#screenplayer .exercisetype25-container #imagecontainer {
  top: 79px;
}
#screenplayer .exercisetype25-container #b_answer1 {
  top: 174px;
  width: 344px;
}
#screenplayer .exercisetype25-container #mark1 {
  top: 192px;
}
#screenplayer .exercisetype25-container #b_answer2 {
  top: 254px;
  width: 344px;
}
#screenplayer .exercisetype25-container #mark2 {
  top: 272px;
}
#screenplayer .exercisetype25-container #b_answer3 {
  top: 334px;
  width: 344px;
}
#screenplayer .exercisetype25-container #mark3 {
  top: 352px;
}
#screenplayer .exercisetype25-container #questiontext {
  position: absolute;
  left: 527px;
  top: 51px;
  width: 428px;
  height: 92px;
  font-size: 16px;
  font-weight: bold;
  padding: 7px 20px 11px 10px;
  line-height: 21px;
  cursor: auto;
}
#screenplayer .exercisetype25-container #questiontext.exercisetype26 {
  top: 122px;
}
#screenplayer .exercisetype25-container button:disabled {
  opacity: 1;
}
#screenplayer .exercisetype25-container .go-to-website-animation {
  position: absolute;
  top: 345px;
  left: 220px;
  width: 90px;
  height: 90px;
  z-index: 130;
  background-color: #CCCCCC;
  background-color: rgba(0, 0, 0, 0.2);
  -webkit-transform: translateZ(0);
  /* fix trailing pixels on webkit browsers */
}
#bottombar #antwoord-geven {
  position: absolute;
  right: 21px;
  bottom: 95px;
}
#bottombar .bottom-blue-text-bar {
  font-size: 16px;
  width: 440px;
  margin: 10px auto;
  line-height: 21px;
  padding: 0 10px;
  height: 83px;
}
#bottombar .bottom-bar-answer {
  position: absolute;
  top: 20px;
  right: 43px;
  width: 62px;
  height: 62px;
  z-index: 131;
}
#bottombar .bottom-bar-answer .bottom-bar-answer-btn {
  background-image: url("../images/bttn_answer.png");
  display: inline-block;
  position: relative;
  text-indent: -9999px;
}
#bottombar .bottom-bar-answer .bottom-bar-answer-btn.mouseover {
  border-color: white;
}

#bottombar .bottom-bar-answer-animation {
  background-color: #CCCCCC;
  background-color: rgba(0, 0, 0, 0.2);
  -webkit-transform: translateZ(0);
  /* fix trailing pixels on webkit browsers */
  position: absolute;
  top: 49px;
  left: 904px;
  width: 72px;
  height: 72px;
  z-index: 130;
}
#bottombar .bottom-bar-next {
  position: absolute;
  top: 12px;
  left: 909px;
  width: 62px;
  height: 62px;
  z-index: 131;
}
#bottombar .bottom-bar-next .bottom-bar-next-btn {
  background-image: url("../images/bttn_next.png");
  display: inline-block;
  position: relative;
  text-indent: -9999px;
}
#bottombar .bottom-bar-next .bottom-bar-next-btn.mouseover {
  border-color: white;
}
#bottombar .bottom-bar-next .next-tekst {
  position: absolute;
  right: 12px;
  bottom: 47px;
}
#bottombar .bottom-bar-next-animation {
  position: absolute;
  top: 42px;
  left: 909px;
  width: 60px;
  height: 60px;
  z-index: 130;
  background-color: #CCCCCC;
  background-color: rgba(0, 0, 0, 0.2);
  -webkit-transform: translateZ(0);
  /* fix trailing pixels on webkit browsers */
}
.exctype25-invisible {
  display: none !important;
}
.iframe-container {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 1014px;
  height: 536px;
  display: block;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}
/*  from index portal  */
.loadingmessage {
  width: 100%;
  text-align: center;
  color: black;
  font-weight: bold;
  font-size: 1em;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
ul {
  list-style-type: none;
  width: 507px;
  padding: 0;
  margin: 0;
}
#hinttext ul {
  width: auto;
}
#menuitems {
  /*position: absolute;
  left: 255px;
  top: 14px; */
}

/*
#submenuitems {
  display: none;
  position: absolute;
  left: 245px;
  top: 14px;
  width: 527px;
  padding-top: 5px;
}
#submenuitems ul {
  padding-left: 10px;
  padding-top: 5px;
}
#submenuitemsbg {
  position: absolute;
  left: 0;
  top: 0;
  width: 527px;
  height: 350px;
  background: #fff;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60);
  filter: alpha(opacity=60);
  -moz-opacity: 0.6;
  -khtml-opacity: 0.6;
  opacity: 0.6;
} */
#mainmenu button.mouseover,
.answeritem.mouseover {
  /*background-color: #555555;*/
}
/*
.mainmenuitem,
.mainmenuitemsmall {
  position: relative;
  padding-left: 10px;
  margin-bottom: 4px;
  margin-top: 0;
  background-color: #ffffff;
  cursor: pointer;
}
.mainmenuitem,
.mainmenuitemsmall {
  *margin-bottom: 1px;
}
.mainmenuitem.mouseover,
.mainmenuitemsmall.mouseover {
  background-color: #cccccc;
}
*/
.mainmenuitem {
  margin-bottom: 4px;
}

.status {
  /*position: absolute;
  top: 5px;
  right: 9px;
  width: 21px;
  height: 21px;
  background: transparent url("../images/sprite_vinkje.png") no-repeat left top;
  background: #fff;*/
}
.mainmenuitem .status {
  /*
  width: 30px;
  height: 30px;
  background: transparent url("../images/mark30.png") no-repeat left bottom;
  */
  width: 33px;
  height: 33px;
  display: inline-block;
  /*
  background-size: 26px;
  right: 10px;
  top: 10px;
  border: 2px solid #ccc;
  border-radius: 13px; */
} 
.mainmenuitem {
  /*height: 70px;*/
}


 /*
.mainmenuitemsmall {
  height: 30px;
} */

.mainmenuitem .status.done {
  background-position: left top;
  background: #fff url("../images/icon_chapterComplete.svg") no-repeat;
  height: 32px;
  width: 32px;
}

.status.done {
  /*background-position: left top;*/
  background: #fff url("../images/icon_chapterComplete.svg") no-repeat;
  height: 32px;
  width: 32px;
}
/* .chapterinfo {
  font-size: 1.5em;
  font-weight: bold;
  color: #888;
  position: relative;
  top: 1px;
  width: 30px;
  text-align: right;
} */

/*
.chaptertitle {
  position: absolute;
  left: 60px;
   top: 6px;
  color: #333;
}
*/
/*
.exerciseinfo {
  position: absolute;
  right: 44px;
  top: 14px;
  font-size: 12px;
  padding-top: 4px;
  font-weight: bold;
  color: #333;
  width: 22px;
  height: 18px;
  text-align: center;
  background: transparent url("../images/mark_numb_22.png") no-repeat center center;

  background: #fff;
  border: 2px solid #ccc;
  border-top-width: 0;
  border-bottom-width: 0;
  top: 11px;
  height: 20px;
  padding-top: 5px;
} */
/*
.mainmenuitemsmall .exerciseinfo {
  right: 37px;
  top: 6px;
  font-size: 10px;
  width: 18px;
  height: 16px;
  background: transparent url("../images/mark_numb.png") no-repeat center center;

  background: #fff;
  top: 5px;

}
*/

/*
.mainmenuitem .chapterinfo {
  top: 11px;
}
*/

/*
.mainmenuitem .chaptertitle {
  top: 16px;
}
*/
/*.continuebutton {
  position: absolute;
  top: 11px;
  right: 78px;
  color: #fff;
  background: orange;
  padding: 4px 15px 0px 15px;
  height: 21px;
  display: none;
}
.mainmenuitemsmall .continuebutton {
  top: 5px;
  height: 19px;
  padding-top: 2px;
}*/

/*
.submenuitem {
  position: relative;
  height: 34px;
  padding-left: 10px;
  margin-bottom: 4px;
  margin-top: 0;
  background-color: #ffffff;
  cursor: pointer;
}


.submenuitem {
  *margin-bottom: 1px;
}
.submenuitem.mouseover {
  background-color: #aaaaaa;
}
.submenuitem .status {
  top: 6px;
}
.submenuitem .chapterinfo {
  top: 4px;
}
*/
/*
.submenuitem .chaptertitle {
  top: 9px;
}
*/

/*
.submenuitem .continuebutton {
  top: 5px;
}
.submenuitem .exerciseinfo {
  top: 5px;
}

*/
#submenutitle {
  font-size: 1.2em;
  color: #333;
  position: relative;
  padding-left: 10px;
}
/*
#resultitems {
  display: none;
  position: absolute;
  width: 735px;
  height: 392px;
  left: 30px;
  top: 14px;
  background: #fff;
  padding-top: 6px;
}*/
/*
#resultitems .resulttitle {
  position: absolute;
  left: 15px;
  top: 4px;
  width: 235px;
  color: #333;
}
#resultitems .resultheading {
  font-size: 1.3em;
  color: #666666;
  margin-left: 9px;
  margin-bottom: 9px;
}
#resultitems .resultbar {
  display: none;
}
#resultitems .resultitem,
#resultitems .resultitemsmall {
  position: relative;
  width: 720px;
  padding-left: 10px;
  padding-right: 5px;
  margin-bottom: 2px;
  background-color: #ffffff;
  *margin-bottom: 0px;
}
#resultitems .resultinfo {
  top: 8px;
}
*/
/*
#resultitems .resultinfo .results-correct,
#resultitems .resultinfo .results-done {
  width: 0px;
  height: 22px;
  background-image: url("../images/resultbar.png");
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
}
*/

/*
#resultitems .resultinfo .results-correct {
  background-position: 0px   0px;
  z-index: 1;
}
#resultitems .resultinfo .results-done {
  background-position: 0px -22px;
  z-index: 0;
}
#resultitems .resultitem {
  height: 40px;
  margin-bottom: 8px;
  display: table;
}
#resultitems .resultitem .status {
  top: 7px;
  right: 15px;
}

#resultitems .resultitem .chapterinfo {
  top: 6px;
}
#resultitems .resultitem .resulttitle {
  display: table-cell;
  vertical-align: middle;
  position: static;
}
*/
/*
#resultitems .resultitemsmall {
  height: 28px;
}
#resultitems .resultitemsmall .status {
  top: 2px;
}
#resultitems .resultitemsmall .resultinfo {
  top: 3px;
}
*//*
#subresultitems {
  display: none;
  position: absolute;
  width: 735px;
  height: 392px;
  left: 30px;
  top: 14px;
  background: #fff;
  padding-top: 6px;
}
#subresultitems .resulttitle {
  position: absolute;
  left: 15px;
  top: 4px;
  width: 235px;
  color: #333;
}
#subresultitems .resultheading {
  font-size: 1.3em;
  color: #666666;
  margin-left: 9px;
  margin-bottom: 9px;
}
#subresultitems .subresultitem {
  position: relative;
  width: 720px;
  height: 30px;
  padding-left: 10px;
  padding-right: 5px;
  margin-bottom: 2px;
  *margin-bottom: 0px;
  background-color: #ffffff;
}
#subresultitems .subresultitem .status {
  top: 2px;
}
#subresultitems .subresultitem .chapterinfo {
  top: 2px;
}
#subresultitems .subresultitem .resulttitle {
  top: 7px;
}
#subresultitems .subresultitem .resultinfo {
  top: 8px;
}
*/

/*
#detailresultitems {
  display: none;
  position: absolute;
  width: 735px;
  height: 392px;
  left: 30px;
  top: 14px;
  background: #fff;
  padding-top: 6px;
}
#detailresultitems .resulttitle {
  position: absolute;
  left: 15px;
  top: 4px;
  width: 235px;
  color: #333;
}
#detailresultitems .resultheading {
  font-size: 1.3em;
  color: #666666;
  margin-left: 9px;
  margin-bottom: 9px;
}
#detailresultitems .subresultitem {
  position: relative;
  width: 720px;
  height: 30px;
  padding-left: 10px;
  padding-right: 5px;
  margin-bottom: 2px;
  *margin-bottom: 0px;
  background-color: #ffffff;
}
#detailresultitems .subresultitem .status {
  top: 2px;
}
#detailresultitems .subresultitem .chapterinfo {
  top: 2px;
}
#detailresultitems .subresultitem .resulttitle {
  top: 7px;
}
#detailresultitems .subresultitem .resultinfo {
  top: 8px;
}
#detailresultitems .detailresultitem, #detailresultitems .detailresultitemwithresults {
  position: relative;
  width: 720px;
  height: 26px;
  padding-left: 10px;
  padding-right: 5px;
  margin-bottom: 2px;
  *margin-bottom: 0px;
  background-color: #ffffff;
}
#detailresultitems .detailresultitem .resulttitle {
  top: 3px;
}

#detailresultitems .detailresultitemwithresults .resulttitle {
  top: 3px;
  font-weight: bold;
  cursor: pointer;
}
#detailresultitems .detailresultitem .resultinfo, #detailresultitems .detailresultitemwithresults .resultinfo {
  top: 6px;
}
#detailresultitems .detailresultitem .detailbar, #detailresultitems .detailresultitemwithresults .detailbar {
  float: left;
  width: 12px;
  height: 11px;
  padding-top: 1px;
  margin-right: 7px;
  margin-top: 2px;
  background-color: #ffffff;
  color: #ffffff;
  font-size: 0.5em;
  text-align: center;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
*/

.detailbar {
  height: 24px;
  width:24px;
  margin-right:1%;
  margin-top: 2px;
  position: relative;
  border-radius: 50%;
}
/*
.resultinfo {
  position: absolute;
  width: 384px;
  height: 18px;
  left: 265px;
  top: 6px;
  background-color: #ffffff;
  background-image: url("../images/sterren.png");
  background-repeat: no-repeat;
  background-position: left top;
} */
/*
.resultinfo.nostars {
  width: 406px;
  height: 22px;
  overflow: hidden;
  background-color: transparent;
  background-image: url("../images/resultbar.png");
  background-position: 0px -44px;
}*/
.resultbar {
  float: left;
  width: 10px;
  height: 10px;
  margin-right: 9px;
  margin-top: 3px;
  background: #ffffff url("../images/mark_ster.png") no-repeat left top;
}
.hashighlight {
  cursor: pointer;
}
/*
.hashighlight.mouseover {
  background-color: #88eeff;
}
*/
#p_videos,
#b_results,
#b_certificate,
#b_programsuggest
{
  text-indent: -9999px;
  /*text-transform: capitalize;*/
  cursor: pointer;
  position: absolute;
  left: 792px;
  border: none;
}
#p_videos {
  text-indent: 0px;
  top: 270px;
  width: 192px;
  height: 152px;
  background: #fff url("../images/video.png") no-repeat 16px;
  position: absolute;
}
#p_videos.alldone {
  top: 270px;
  width: 192px;
  height: 148px;
  background: #fff url("../images/video.png") no-repeat 16px;
}

#p_videos p
{
    position: absolute;
    bottom: -6px;
    left: 8px;
}

#p_videos span
{
    position: absolute;
    top: 10px;
    left: 8px;
}

#b_results {
  text-align: left;
  text-indent: 0;
  top: 14px;
  width: 192px;
  height: 94px;
  line-height: 14px;
  padding-left: 10px;
  background: #fff /* url("../images/resultaten.jpg") no-repeat left top */;
}
#mainmenu #b_results.mouseover
{
  background-color: #cccccc;
}
#b_certificate {
  text-indent: 0;
  text-align: left;
  padding-left: 10px;
  padding-top: 10px;
  top: 116px;
  width: 192px;
  height: 145px;
  /*background: #fff url("../images/certificaatGehaald.jpg") no-repeat left top;*/
  background: #fff url("../images/certificaat.svg") no-repeat 10px 40px;
}


#b_certificate p
{
    position: absolute;
    bottom: -6px;
    left: 8px;
}


#mainmenu #b_certificate.mouseover
{
  background-color: #cccccc;
}

#mainmenu #p_videos.mouseover
{
  background-color: #cccccc;
}

#b_certificate span.congrats
{
  font-weight: bold;
  color: #444;
}
#b_programsuggest
{
  top: 14px;
  width: 192px;
  height: 87px;
  background: #000000 url("../images/b_programs.png") no-repeat left top;
}
#piechart {
  position: absolute;
  left: 48px;
  top: 48px;
  width: 95px;
  height: 36px;
}
#resultchart {
  display: none;
  position: absolute;
  left: 792px;
  top: 14px;
  width: 182px; /* 192-10padding*/
  height: 84px; /*94-10padding*/
  padding-top: 10px;
  padding-left: 10px;
  /*background: #ffffff url("../images/totaalscore.jpg") no-repeat left top;*/
  background: #fff;
  color: #000;
  line-height: 14px;
}
#piechart2 {
  position: absolute;
  left: 48px;
  top: 48px;
  width: 95px;
  height: 36px;
}
.compliment {
  position: absolute;
  left: 792px;
  top: 282px;
  width: 192px;
  height: 129px;
  background: #ffffff url("../images/CLIP_compliment.png") no-repeat left top;
}
#complimenttext {
  position: absolute;
  left: 15px;
  top: 96px;
  width: 164px;
  height: 24px;
  color: #333;
  text-align: center;
}

/*
#prevbutton,
#nextbutton,
#backbutton,
#resultprevbutton,
#resultnextbutton,
#resultbackbutton,
#detailresultprevbutton,
#detailresultnextbutton,
#detailresultbackbutton {
  position: absolute;
  top: 346px;
  cursor: pointer;
  text-indent: -9999px;
  text-transform: capitalize;
}
*/
/*
#resultprevbutton,
#resultnextbutton,
#resultbackbutton,
#detailresultbackbutton,
#detailresultprevbutton,
#detailresultnextbutton {
  height: 35px;
  background-size: 100% 100%;
}
#resultprevbutton,
#resultnextbutton,
#resultbackbutton,
#detailresultbackbutton {
  width: 156px;
  height: 35px;
}
#detailresultprevbutton {
  width: 162px;
}
#detailresultprevbutton,
#detailresultnextbutton {
  width: 178px;
}
#prevbutton,
#resultprevbutton {
  background-image: url("../images/btn_pagedownLesson.png");
}
#nextbutton,
#resultnextbutton {
  background-image: url("../images/btn_pageupLesson.png");
}
*/


/*
#backbutton {
  background-image: url("../images/b_backmenu.png");
} 
#resultbackbutton,
#detailresultbackbutton {
  background-image: url("../images/b_back.png");
}
#detailresultprevbutton {
  background-image: url("../images/btn_pagedownExercise.png");
}
#detailresultnextbutton {
  background-image: url("../images/btn_pageupExercise.png");
}
*/
/*
#backbutton {
  left: 180px;
  top: 360px;
} */
#prevbutton {
  left: 0px;
}
#nextbutton {
  left: 298px;
}
#resultbackbutton {
  left: 30px;
}
#resultprevbutton,
#detailresultprevbutton {
  left: 266px;
}
#resultnextbutton {
  left: 496px;
}
#detailresultnextbutton {
  left: 474px;
}
#detailresultbackbutton {
  left: 30px;
}
#btn_menu {
  display: none;
}
.bottombutton {
  display: none;
}
#bottombar.videos .bottombutton,
#bottombar.pdfs .bottombutton {
  display: inline-block;
}
#t_oef,
#t_oef2 {
  position: absolute;
  left: 18px;
  width: 160px;
}
#t_oef {
  top: 10px;
}
#t_oef2 {
  top: 22px;
  font-size: 24px;
  line-height: 24px;
}
.certificate-form {
  position: absolute;
  left: 250px;
  top: 24px;
  padding: 22px 22px 94px 22px;
  background-color: white;
  width: 460px;
}
.certificate-form #b_ok {
  position: absolute;
  right: 25px;
  bottom: 22px;
  border-radius: 3px;
  padding-bottom: 3px;
}
.certificate-form h1 {
  font-size: 18px;
  margin: 0 0 .5em 0;
  text-align: center;
}
.certificate-form .form-line {
  height: 30px;
  margin-top: 15px;
  position: relative;
}
.certificate-form .form-line label {
  position: relative;
  top: 10px;
}
.certificate-form .validation-errors {
  color: #f00;
}
.certificate-form .answeritem {
  position: absolute;
  right: 0px;
  top: 0px;
  height: 14px;
  padding: 10px;
  width: 66%;
}
.certificate-form .answeritem > input {
  width: 100%;
}


.exercisetype2r-container .checkmark{
  /*display: inline-block;*/
  position: absolute;
  /* right: 0px; */
  visibility: visible;
  z-index: 100;
  /* top: 5px; */
}
.exercisetype2f-container .mp_answer_state
{
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translateY(-50%);
}

.exercisetype2r-container .mp_box .mp_answer,
.exercisetype2f-container .mp_box .mp_answer
{
  cursor: pointer;
}
.exercisetype2r-container .mp_box,
.exercisetype2f-container .mp_box
{
  max-width: 1000px;
}
.exercisetype2r-container .mp_box .mp_answer p,
.exercisetype2f-container .mp_box .mp_answer p
{
  font-size: 16px;
}
.exercisetype2r-container .mp_box button.mk1abtn,
.exercisetype2r-container .mp_box div.mp_answers_correct,
.exercisetype2f-container .mp_box button.mk1abtn,
.exercisetype2f-container .mp_box div.mp_answers_correct
{
  background: #fff !important;
  align-items: center;
  border: none;
}
.exercisetype2r-container .checkmarkerbg,
.exercisetype2f-container .checkmarkerbg
{
  border-width: 0;
}
.exercisetype2r-container .title_correct
.exercisetype2f-container .title_correct
{
  top: 3px;
  font-size: 14px;
}

.exercisetype2r-container .mp_box
{
  min-width: 250px;
}

.exercisetype2r-container #questiontext {
	padding: 10px 0 0 32px;
	width: 365px;
}

.exercisetype2r-container #textcontainer {
  background: transparent;
  position: relative;
  top: 8px;
  /*left: -15px;*/
}

.exercisetype2r-container #imagecontainer {
  position: relative;
  height: 326px;
  width: 370px;
  left: 0px;
  top: 0px;
}

.exercisetype2r-container #imagecontainer #image {
  max-height: 316px;
  max-width: 355px;
}
/*
div#progress
{
  position: absolute;
  left: 792px;
  top: 112px;
  width: 182px; 192-10 padding
  height: 144px; 110-10 padding
  padding-left: 10px;
  padding-top: 10px;
  background: #fff url("../images/jedoel.png") no-repeat 20px 20px;
  background: #fff;
  color: #000;
  line-height: 18px;
} */
div#progress span.percentage
{
  margin: 0 0 0 75px;
  position: absolute;
  left: 10px;
  top: 58px;
}
div#progress.certificate
{
  background: #fff url("../images/jedoel.png") no-repeat 8px 24px;
}

div#progress.lowscore
{
  background: #fff url("../images/verbeterscore.png") no-repeat 20px 32px;
}

div.progress
{
    text-align: left;
}
div.progress > span
{
    font-size: 100%;
    position: absolute;
    margin: 30px 0px 0px 0px;
}
div.progress p
{
    display: inline-block;
    position: absolute;
    left: 10px;
    top: 76px;
    width: 168px;
    height: 10px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background: #cad3e3;
    margin: 0;
    padding: 0;
    overflow: hidden;
}



div.progress p span
{
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    height: 10px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background: 	#c91e4e;
}
div.progress p img {
    position: absolute;
    right: -10px;
    top: -10px;
    width: 30px;
}


/*Resultaten balkjes*/
.progress-grey
{
    display: flex;
    height: 17px;
    width: 100%;
    background-color: #CAD3E3;
    border-radius: 10px;
    border: 2px solid white;
    outline: #7D92AA solid 1px;    
}
.progress-darkgrey
{
    display: block;
    height: 14px;	
    background-color: #7D92AA!important;
    border-radius: 10px;    
    position: absolute;
    z-index: 0;
    max-width: 94.5%;
}
.progress-green
{
    display: block;
    height: 19px;	
    background-color: #71E05C!important;
    border-radius: 10px;    
    position: absolute;
    z-index: 0;
    max-width: 250px;
}
.progress-red
{
    display: block;
    height: 19px;	
    background-color: #C91E4E!important;
    border-radius: 10px;
    z-index: 1;
    /*border: 2px solid white;
    outline: #7D92AA solid 2px;*/
}



#b_results span:first-child,
#resultchart span:first-child
{
  margin-left: 9px;
}
.correctblock,
.wrongblock,
.notdoneblock
{
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 1px;
}

.correctblock
{
  background-color: #90c68a;
}
.wrongblock
{
  background-color: #df5869;
}
.notdoneblock
{
  background-color: #eee;
}

#outer-circle {
  background-color: #fff;
  border-radius: 50%;
  height: 50px;
  width: 50px;
  position: relative;
  border: 1px solid pink;
}

#inner-circle {
  position: absolute;
  border-radius: 50%;
  height: 46px;
  width: 46px;
  Background-color: pink;
  top: 50%;
  left: 50%;
  margin: -23px 0px 0px -23px;
}

/*********************************************************************************************/
/**************************** BOOTSTRAP CLASSES UITBREIDING **********************************/

.border-grey
{
  border: 1px solid #cad3e3!important; 
}

.drag-border{
  outline: 1px solid white!important;
  border-left: 4px dotted #cad3e3!important;
  box-shadow: -15px 0px 0px 0px #cad3e3; 
  width: calc(100% - 15px); 
  margin-left:15px;
}
.drag-border7BCDE{ 
  margin-left:23px!important;
}
.drag-border40{ 
  margin-left: 15px!important;
}
.drag-border41 {
  outline: 1px solid white!important;
  border-left: 4px dotted #cad3e3!important;
  box-shadow: -15px 0px 0px 0px #cad3e3;
}

.exercisetype40-container #drag-origins .drag-border40
{
  vertical-align: top;
}
.exercisetype40-container .dropzone .answeritem
{
  margin-right: 5px;
}

.exercisetype40-container .dropzone span.answeritem
{
  background: rgba(255,255,255,0.5);
  padding: 0 5px;
  display: inline-block;
}


.drag-destination{
  outline: 1px solid #cad3e3!important;
  border: 5px solid white!important;
  background-color: #cad3e3!important;
  width: 100%;
}

.sticker-disabled{
  opacity: 0.3;
  filter: saturate(0.5);
}

.border-topbar {
  border-color: #cad3e3!important;
  border: 1px solid
}

.border-blue
{
  border-color:#002E5F!important
}

.border-blue-1
{
  border: 1px solid #002E5F!important;
}

.border-blue-2
{
  border: 2px solid #002E5F!important;
}

.border-grey-1
{  
  border: 1px solid #cad3e3!important;  
  border-width: 1px 1px !important;
}

.border-grey-2
{
  border: 2px solid #d0d8e3!important;
  border-width: 2px 2px !important;
}

.shadow-sm-grey {
  box-shadow: 0px 2px 5px 0px rgba(0, 45, 94, 0.2);
  /*box-shadow: 0 .125rem .25rem rgba(208,216,227,1.075)!important;*/
}

#textcontainer
{
  background-color: #fff;
}

.imagecontainer
{
  background-color: #fff;
}

.text-blue
{
  color:#002e5e!important
}
.text-grey
{
  color:#cad3e3!important
}
.text-lightblue
{
  color: #7f96ae!important
}


.text-pink
{
  color:#c91e4e!important
}

.text-white
{
  color:#fff;
}

.font-family-ssp
{
  font-family: Source Sans Pro;
}

.line-height-1
{
  line-height: 1;
}

.line-height-25
{
  line-height: 25px;
}

.line-height-50
{
  line-height: 50px;
}

.source-sans
{
  font-family: 'Source Sans Pro', sans-serif;
}

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

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

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

.fontsize-28
{
  font-size: 28px!important;
}

.fontsize-30
{
  font-size: 30px!important;
}

.font-weight-bold-800 {
  font-weight: 800!important;
}

.btn.answer, .checkmark
{
  width: 29px !important;
  height: 28px !important;
}

.btn.answer, .checkmark-small
{
  width: 20px !important;
  height: 20px !important;
}

.answer-image-size
{
  width: 29px !important;
  height: 28px !important;
}

.checkmark{
  position: absolute;
  /*top: 5px;*/
  top: calc(50% - 14px); 
  right: -14px;
}

.answer-height
{
  min-height: 60px;
}

.btn-light {
  color: #002e5e!important;
}

.btn-white {
  color: #212529;
  background-color: #fff;
  border-color: #cad3e3;
}
.btn-white:hover {
  background-color: #cad3e3;
 }
.btn-selected
{
  color:#212529;
  background-color:#cad3e3 !important;
  box-shadow: none !important;
}
.btn-answer-size
{
  min-height: 50px;
}

.bg-blue
{
  background-color:#002e5e!important
}

.bg-pink
{
  background-color:#c91e4e!important
}

.bg-grey
{
  background-color:#cad3e3!important
}

.bg-grey2
{
  background-color: #f7f8fa!important
}

.bg-grey3
{
  background-color: #edf1fa!important
}

.bg-grey40
{
  background: rgba(255,255,255,0.5);
}

.bg-green
{
  background-color:#3ab34a!important
}

.btn-ok
{
  width: 50px;
  height: 40px;
  padding-left: 10px;
  padding-top: 3px;
}
.btn-ok-certificate{
  border: none!important;
  padding-left: 0px!important;
}

.btn-sound
{
  height: 40px;
  width: 123px;
  padding-top: 3px;
}

.btn-hint
{
  height: 40px;
  width: 100px;
  padding-top: 3px;
}

.btn:focus
{
  outline: 2px solid #5E9ED6!important;
}

.float-right{
  float: right;
}

.float-left{
  float: left;
}

.imagebutton42
{
  width: 42px!important;
  height: 42px!important;
}

.display-flex
{
  display: flex
}

.scorebox-style
{
  width: 45%;
  height: 15%;
  position: absolute;
}

/*
  .side {
      position: fixed;
      top: 54px;
      left: 0px;
      padding-left: 15px;
      padding-right: 15px;
      padding-bottom: 15px;
      width: 40%;
      transition: all 3s ease;
      display: block;
  }
  
  .side .collapsing {
      position: fixed !important;
      height: auto !important;
      margin-right: 50%;
      transition: all 0.3s ease;
      display: block;
  } 
  .side.show {
      right: 0;
  }
*/
.flex-container {
  display: flex;
}

.center-y
{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.center-x
{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
 
.center-xy
{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
               
#drag-origins .center-y-exercisetype40
{
  position: relative;
  display: inline-block;
  top: 50%;
  transform: translateY(-50%);
}

#drag-origins .dragClassExcercisetype41
{
  top: auto;
  transform: none;
}

#drag-destinations .center-y-exercisetype40
{
  position: relative;
  display: inline-block;
  top:auto;
}

.button_hint 
{ 
	/*background-image: url(../images/icon-hoekig_uitleg.svg); 	*/
}

.pointer
{
  cursor: pointer;
}

.videoborder
{
  border-color: #002e5e!important;
  border-style: solid;
  border-width: 3px;
}

.text-ellipsis
{
  overflow: hidden; 
  text-overflow: ellipsis; 
  white-space: nowrap;
}

.videopopupborder {
  outline: 1px solid white!important;
  border: 5px solid white!important;
  background-color: white!important;
}

.OverlayIcon {
  position: absolute;
  top: 20%;
  left: 45%;
}

.videoseen
{  
    width: 32px;
    height: 30px;
}

.footer-position
{
  position: absolute;
  bottom: 0;
  width: 100%;
  min-height: 2.5rem;
}

.hidden { visibility: hidden }

.ok-btn-position-10A,
.ok-btn-position-10B
{
  left: 15px;
}

.focusstyle:focus
{
  outline: 2px solid #5E9ED6;
}

.selecteditem_exercise9, .highlighted
{
  /*  box-shadow: inset 0px 0px 0px 10px #d0d8e3;*/
  background-color: #edf3fc!important;
}

.correct-answer-9{
  background-color:#cad3e3 !important;
} 

/*MEDIAQUERY VOOR RESPONSIVE OK-BUTTON STYLING*/
/*Ok-button uitlijning van rechts-midden naar onder-rechts*/


/* Mediaquery IOS:*/
@supports (-webkit-touch-callout: none) {  
  .exerciseinfo {
      display: none!important;
  }
  
  .btn-white:hover {
    background-color: #fff;
   }
}

/*VOOR MOBIEL*/
@media (max-width: 360px) 
{
  /*.b-ok-12{display: none;}*/
  /*.b-ok2-12{display: block;}*/
  
  .ok-btn-position-2F
  {
    margin-top: .5rem; 
  }
}
@media (min-width: 361px) 
{
  .b-ok-12{display: block;}
  .b-ok2-12{display: none;}
}

@media (min-width: 361px) and (max-width: 767px)  
{
  .b-ok-12{display: block;}
  .b-ok2-12{display: none;}

  .ok-btn-position-2F{
    margin-top: .5rem; 
  }
}


/* KLEIN: Small devices (tablets, 768px and up) */
@media (max-width: 767px) {

  .ok-position-11A {
    display: flex;
    flex-direction: row-reverse;
    margin-top: 15px;
    margin-left: 150px;
  }
  .ok-position-11B {
    display: flex;
    flex-direction: row-reverse;
    margin-top: -40px;
    margin-left: 150px;
  }
  .ok-position-11C {
    display: flex;
    flex-direction: row-reverse;
    margin-top: 15px;
    margin-left: 150px;    
  }
  .ok-position-23 {
    display: flex;
    flex-direction: row-reverse;
    margin-top:25px;
    margin-left: 150px;
  }
  .ok-btn-position-11C {   

  }

  .ok-position-2F {
     
  }
  
  .checkmark-position-2F
  {
    position: relative!important;    
    margin-left: -15px;
    padding-top: 8px;
  }
  .checkmark-position-2R
  {
    position: relative!important;    
    /*margin-left: -15px;*/
    padding-top: 8px;
  }

  .ok-btn-position-11D {
    margin-left: auto;
    margin-top: 10px;
  }

  .ok-position-14 {
    width: 100%;
  }
  .ok-btn-position-14{
    display: none;
  }
  .ok2-btn-position-14{
    display: block;
  }

  .ok-position-tk2c{

  }
  .ok-btn-position-tk2c{
    float: right;
    margin-top: 15px;
  }

  .tk2ewidth{
    min-width: 100%!important;
  }  

  .ok-position-tk2a{
    display: none;
  }
  .ok2-position-tk2a{
    display: block;
    float: right;
    margin-top: 10px;
  }

  .ok-position-tk2b{
    display: none;
  }
  .ok2-position-tk2b{
    display: block;
    float: right;
    margin-top: 10px;
  }

  .answeritem-width-tk2ab{
    width: 100%;
    margin-top: 70px;
  }

  .ok-btn-position-10A
  {
    margin-top: 1.5rem;
  }
  .ok-btn-position-10B
  {
    top: 0 !important;
  }
  .ok-btn-position-10A,
  .ok-btn-position-10B
  {
    left: auto;
    right: 15px;
  }

  .sound-tk5c-1{
    display: none;
  }
  .sound-tk5c-2{
    display: block;
  }

  .ok-position-tk1a1{
    display: block;
  }
  .ok2-position-tk1a1{
    display: none;
  }

  .ok-position-41{
    display: none;
  }
  .ok2-position-41{
    display: block;
  }

  .drag-border7BCDE{ 
    margin-left:15px!important;
  }
}

@media (max-width: 844px) {

  .ok-position-6{
    
  }
  .ok-btn-position-6{
    margin-top: 127px;
    margin-left: -65px;
    z-index: 1;
  }

  .ok-position-8{
    margin-right: -15px;
  }
}


/* GROOT: Medium devices (desktops, 992px and up) */
@media (min-width: 768px) {

  .ok-position-11A {
    
  }
  .ok-position-11B {
    /*right: -31px;*/
  }
  .ok-position-11C {   

  }
  .ok-position-23 {
    
  }

  .ok-btn-position-2F {   
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0px;
  }
  .ok-btn-position-2F {
    margin-right: 15px;
  }
  .checkmark-position-2F
  {
    position: absolute!important;
    top: 17px!important;
    right: 7px!important;
  }
  .checkmark-position-2R
  {
    position: relative!important;    
    margin-left: -15px;
    padding-top: 8px;
  }

  .ok-btn-position-2R {
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 13px;
  }

  .ok-btn-position-11D {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 15px;
  }

  @supports (-webkit-touch-callout: none) {
    .ok-position-14 {
      width: calc(99% - 75px);
    }
  }
  @supports not (-webkit-touch-callout: none) {
    .ok-position-14 {
      width: calc(100% - 75px);
    }
  }
  
  /*.ok-position-14 {
    width: calc(100% - 75px);
  }*/
  .ok-btn-position-14{
    display: block;
  }
  .ok2-btn-position-14{
    display: none;
  }

  .ok-position-tk2c{
 
  }
  .ok-btn-position-tk2c{
    float: right;
    margin-top: -60px;
    position: relative;
    right: -65px;
  }

  .tk2ewidth{
    max-width: calc(100% - 75px);
  }  

  .ok-position-tk2a{
    margin-left: -18px;
    display: inline-block;
  }
  .ok2-position-tk2a{
    display: none;
  }

  .ok-position-tk2b{
    margin-left: -18px;
    display: inline-block;
  }
  .ok2-position-tk2b{
    display: none;
  }

  .answeritem-width-tk2ab{
    max-width: calc(100% - 70px);
  }

  .sound-tk5c-2{
    display: none;
  }
  .sound-tk5c-1{
    display: block;
  }

  .ok-position-tk1a1{
    display: none;
  }
  .ok2-position-tk1a1{
    display: block;
  }

  .ok-position-41{
    display: block;
  }
  .ok2-position-41{
    display: none;
  }

  .ok-position-7bcde{
    margin-right: 0px;
  }
}

@media (min-width: 845px) {
  .ok-position-6{
    
  }
  .ok-btn-position-6{
    margin-top: 61px;
    margin-left: 5px;
  }
  
  .ok-position-8{
    margin-right: -15px;
  }
}

@media (min-width: 576px) {
  .ok-position-12{
    margin-top: 90px;
    margin-right: -85px;
  }
}
@media (max-width: 575px) {
  .ok-position-12{
    margin-top: 35px;
    margin-right: -85px;
  }
}

.sitelogo-pcenzo
{
  display: none;
}
.sitelogo-mobile
{
  display: block;
}

/*MEDIAQUERY BOOTSTRAP BREAKPOINTS*/
/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) 
{ 
  .showasrow
  {
    display: flex;
    flex-direction: row;
  } 
}

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) 
{ 
  .sitelogo-mobile
  {
    display: none;
  }
  .sitelogo-pcenzo
  {
    display: block;
  }


  .showasrow
  {
    display: block;
  } 
}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) 
{ 
  .sitelogo-mobile
  {
    display: none;
  }
  .sitelogo-pcenzo
  {
    display: block;
  }

  .showasrow
  {
    display: block;
  } 
}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) 
{ 
  .sitelogo-mobile
  {
    display: none;
  }
  .sitelogo-pcenzo
  {
    display: block;
  }

  .showasrow
  {
    display: flex;
    flex-direction: row;
  } 
}

/*EINDE MEDIAQUERY VOOR RESPONSIVE OK-BUTTON STYLING*/

.inputkuipje {
  /*Standaart schaduw op IOS weghalen*/
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  border-bottom: 1px solid #cad3e3;
  border-image: linear-gradient(to bottom, rgba(0,0,0,0) 75%,#cad3e3 100%,#cad3e3 25%,rgba(0,0,0,0) 75%);
  border-image-slice: 1;
}

/*CERTIFICATE_FORM.PHP*/
.certificate-input{
  border-radius: 3px!important;
  min-height: 30px;
  padding-left: 5px;
}

/*FOCUS STYLING*/
/* Button */

textarea:focus,
button:focus
{
  outline: 2px solid #5E9ED6;
  color: none !important; 
  border: 1px solid #cad3e3!important; 
  outline: 2px solid #5E9ED6;
  box-shadow: 0 0 0 0!important;
}

/*Oefening 6*/
.w-102 {
  width: 102%!important;
}

/****** START FOOTER STYLING *****/
html, body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
}
.screen {
  flex: 1 0 auto;
}
.footer2 {
  flex-shrink: 0;
}
/****** END FOOTER STYLING *****/

#bar .progressitem
{
  min-width: 30px;
  height: 30px;
  max-width: 30px;
  text-align: center;
  border-radius: 50%;
}

#bar .progressitem:first-child
{
  margin-left: 0 !important;
}

#bar .progressitem.active
{
  outline: 1px solid #002e5e;
  border: 1px solid #fff;
  padding-top: .4rem!important;
}

@media (max-width: 400px) {
  #bar .progressitem {
      min-width: calc(5% - 0.25rem);
      max-width: calc(9.2% - 0.25rem);
  }
}

@media (max-width: 360px) {
  #bar .progressitem {
      max-width: calc(9.1% - 0.25rem);
  }
}

@media (max-width: 330px) {
  #bar .progressitem {
      max-width: calc(9% - 0.25rem);
  }
}

/*Chapter view*/
.current-chapter{
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px #c91e4e;
  line-height: 1.2!important;
}


/*#12612: Op Safari scrollbar tonen als deze er is. Niet alleen als je hem gebruikt*/
@media not all and (min-resolution:.001dpcm) { 
  @supports (-webkit-appearance:none) {    
    ::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 10px;
    }

    ::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0, 0, 0, .5);
    box-shadow: 0 0 1px rgba(255, 255, 255, .5);
    }
  }
}