root {  
}

/*
ul {  
	list-style-type: none;
}


div{
	border: 1px solid #e6e6e6;
	box-sizing: border-box; 	
}

img{
	border: 1px solid #ffe6e6;
	box-sizing: border-box; 	
}
*/

.helpimg
{
cursor:pointer; float:right;max-width:94px;

max-height:94px;
}
.oefbody {
    background-color: rgb(191, 191, 191);  
    margin: auto;
	margin-top: 4px;  
	height: 100%;
/*	
	width: 680px;


	max-width: 680px;
	min-width: 480px;
*/

	max-width: 640px;
	
	/*for demo purposes only
  background: #f2f2f2;
  border: 1px solid #e6e6e6;
  box-sizing: border-box; */

}

.container {
/*    display: flex;*/
}

.oefhead {
/*	clear: both;
	margin: auto; 
 	height: 105px;
	max-height: 105px;*/

	width:100%;
	clear: both;
	margin: 0 auto; 
	
    display: -webkit-flex; /* Safari */
	display: flex;	
	flex-wrap: nowrap;
	flex-shrink: 1; 
/*
	margin: auto; 
 	height: 105px;
	max-height: 105px;
	display: inline-block; 
	max-height: 100px;
 border: 1px solid #e6e6e6;
  box-sizing: border-box;
*/	

}


.hc {
/*  border: 1px solid #e6e6e6;
  box-sizing: border-box; */
  
float:left; 
/*vertical-align:top;
top:0px;
max-height:100%; 
*/
object-fit:contain;	
    display: inline-block;
	margin:auto;
}
.hcr {
height:100%; 
float:right; 	
object-fit:contain;	
	
}
.hc1 { /* head column 1 */
width:17%; 
order:1;
}
.hc2 { /* head column 2 */
	width:6%;
order:2;
}
.hc3{ /* head column 3 */
	width:50%; 
	margin: 0 auto;
order:3;
}
.hc4 { /* head column 4 */
	width:9%; 
order:4;
}
.hc5 { /* head column 5 */
	width:14%; 
order:5;
}

.imgbutton
{
	cursor:pointer; 
	max-width:100%; /*85px;*/
	max-height:100%; /*85px;*/
/*float:right;max-width:94px;
.helpimg
max-height:94px;*/
}
/*
.backbutton {
width:85px; height:100%; margin-bottom:1px;	
	max-width:100%; 85px;
	max-height:100%; 85px;
		margin: auto;
object-fit: contain;
}*/
.star {
	max-width:100%; /*85px;*/
	max-height:30%;
	/*margin: auto;*/
/*	border: 1px solid #e6e6e6;
	box-sizing: border-box; 	*/
/*	height: 35px;
	width: 35px; */
}



.oefgalgimgframe {
	/*left: 0;
	margin:0; 
	position: static;
		position: fixed;
		top: 120px;*/
	width:60%; 

	margin:auto;
/*
	border:1px solid red; 
	padding:5px; 
	height:265px;
	align-self: center; */	
}

.oefgalgimg{
	/*	invert horizontal  
	border:1px solid blue;*/
	height:50%;
	float:left;
	/* mirror image 
	-webkit-transform: scale(-1, 1);
	-o-transform: scale(-1, 1);
	-moz-transform: scale(-1, 1);
	-ms-transform: scale(-1, 1);
	transform: scale(-1, 1);
	*/
}

.mirror_image {
-webkit-transform: scale(-1, 1); 
-o-transform: scale(-1, 1); 
-moz-transform: scale(-1, 1); 
-ms-transform: scale(-1, 1); 
transform: scale(-1, 1);	
}

.column {
    flex: 1;

    /*for demo purposes only */
    background: #f2f2f2;
    border: 1px solid #e6e6e6;
    box-sizing: border-box;
}
.column-one {
    width: 20%;
    order: 1;
}
.column-two {
	width: 30%;
	order: 2;
}
.column-three {
    width: 20%;
    order: 3;
}

.thumb {  
	width: 150px;  
	height: 150px;
}
/*
.star {
	height: 35px;
	width: 35px; 
}*/

.headstars {
	float:left; 
	width:35px; 
	height: 99%;
/*
	width:35px; 
	width:45px; 
*/
	margin-right:4px; 
	margin-left:2px	
}

.headcenter {
	margin:0;
width:50%; 
/*300px;
	padding-right:150px;
	margin-right:150px;
*/
float:left; 
}

.oefimage {  
	display:block;
	margin: auto; /*-right: 0px; 
	margin-left: 2px;
	margin-right: 2px; 
	width: 99%;*/
	max-width:640px;
	clear: both;
	cursor:help; /* pointer; */
}

.oefdoubleimage {  
	clear: both;
	margin: auto; /*-right: 0px;  */

	/*   display:inline-block;
	  float:left;
	   margin: auto; /*-right: 0px;  * /
	  margin-top: 2px;
	  margin-left: 2px;
	  margin-right: 2px;
	  width: 75%;*/
	/*   clear: both;
	  cursor:help; pointer; */
}

.oeftitle {  
	width: auto;  
	color: rgb(0, 0, 0);  
	font-family: Verdana;  
	font-size: larger;  
	line-height: normal;  
	padding-top: 2px;  
	padding-right: 2px;  
	padding-bottom: 2px;  
	padding-left: 2px;
	text-align:center;
}
.oeftext {  
	clear: both;
	align-self: center;
	width: 90%;
	margin: auto; /*-right: 0px;  */
	color: rgb(0, 255, 0);  
	font-family: Verdana;  
	font-size: 28px;  
	line-height: normal;  
	background-color: rgb(128, 128, 128);  
	padding-top: 8px;  
	padding-bottom: 8px;  
	margin-top: 8px;  
	margin-bottom: 8px;  
	font-weight: bold;
	text-align:center;
}
.txtred {
	color: #FF3334;
}
.txtgreen {
	color: lime;
}
.txtblack {
	color: #000;
}

.oefeditp {  
	clear: both;
	width: 90%;
	margin: auto; /*-right: 0px;  */
}
/*
.oefedit {  
  clear: both;
   width: 100%;
   margin: auto; -right: 0px;  
  color: rgb(0, 255, 0);  
  font-family: Verdana;  
  font-size: 28px;  
  line-height: normal;  
  background-color: rgb(128, 128, 128);  
  padding-top: 8px;  
  padding-bottom: 8px;  
  font-weight: bold;
  text-align:center;
}*/


::-webkit-input-placeholder {
   color: red;
}

:-moz-placeholder { /* Firefox 18- */
   color: red;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: red;  
}

:-ms-input-placeholder {  
   color: red;  
}


.worddiv:hover {
	color: lime;
}
.worddiv {
	font-family: Verdana;  
	font-size: 20px;  
	margin-left: 8px;
	cursor: pointer;
}

.mediumgreen {
	
	color: lime;
/*	font-size: larger;  
	font-family: Verdana;  */
}/**/

.noselect {
	/* No select */
	-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
	
}
.verhaalout {
	clear: both;
/*	align-self: center;*/
	width: 100%;

 /*	margin: auto;-right: 0px;  */
/*	color: rgb(0, 255, 0);  */
	color: rgb(0, 0, 0);  
	font-family: Verdana;  
	font-size: 20px;  
	line-height: normal;  
	background-color: rgb(128, 128, 128);  
	padding-left: 8px;  
	padding-top: 8px;  
	padding-bottom: 8px;  
	margin-top: 8px;  
	margin-bottom: 8px;  
	font-weight: bold;
	min-height: 30px;
/*	text-indent: 8px;
	text-align:center;*/
	
}

.verhaalin {  
/*	clear: both;
	width: 100%;

	color: rgb(64, 64, 64);  
	line-height: normal;  
	background-color: rgb(169, 169, 169);  
	padding-top: 4px;  
	padding-bottom: 6px; 
	text-align:center; */
	clear: both;
/*	align-self: center;*/
	width: 100%;

 /*	margin: auto;-right: 0px;  */
/*	color: rgb(0, 255, 0);  */
	color: rgb(0, 0, 0);  
	font-family: Verdana;  
	font-size: 20px;  
	line-height: normal;  
	background-color: rgb(128, 128, 128);  
	padding-left: 8px;  
	padding-top: 8px;  
	padding-bottom: 8px;  
	margin-top: 8px;  
	margin-bottom: 8px;  
	font-weight: bold;
/*	cursor: grap;
	text-indent: 8px;
	text-align:center;*/
	
}
.memimg {
	width: 100%;
	
}
#butFinish {
		margin-top: 8px; 
}

.memcel {
    text-align: center; 
/*    vertical-align: middle;	*/
}
.memceldiv {
/*	vertical-align: middle;	*/
	aspect-ratio: 1 / 1 ;  
/*	padding-top: 25%;
	  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);*/
/* */
 	
}
.memtxt {
	height: 100%;
/*	vertical-align: middle;	*/

/*  margin: auto;
  vertical-align: middle;
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);	*/
}
.memdiv {
	clear: both;
/*	align-self: center;
	width: 100%;
	height:  100%;*/
	color: rgb(0, 0, 0);  
	font-family: Verdana;  
	font-size: 20px;  
	line-height: normal;  
	background-color: rgb(128, 128, 128);  
}

.oefedit {  
	clear: both;
	width: 100%;

	color: rgb(64, 64, 64);  
	line-height: normal;  
	background-color: rgb(169, 169, 169);  
	padding-top: 4px;  
/*	padding-bottom: 6px;  */
	text-align:center;
	
}

.button { 
    background: -moz-linear-gradient(center top, #f3f3f3, #dddddd);
    background: -webkit-gradient(linear, left top, left bottom, from(#f3f3f3), to(#dddddd));
    background:  -o-linear-gradient(top, #f3f3f3, #dddddd);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f3f3f3', EndColorStr='#dddddd');
    border-color:#000; 
    border-width:1px;
    border-radius:4px 4px 4px 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    color:#333;
    cursor:pointer;
    padding:6px 6px 4px;
    margin-top:5px;
    margin-bottom:5px;
    margin-left:5px;
	font-size: 24px;  
	font-weight: bold;
    display:inline-block;
/* 	width:40%;
  	width:75%;
 height:50px; */
}
.button:hover { background:#ddd; }

.buttonKeuze {
width:40%; height:50px;	
}
.button_invalid{
    background: -moz-linear-gradient(center top, #f3f3f3, #dddddd);
    background: -webkit-gradient(linear, left top, left bottom, from(#f3f3f3), to(#dddddd));
    background:  -o-linear-gradient(top, #f3f3f3, #dddddd);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f3f3f3', EndColorStr='#dddddd');
    border-color:#000; 
    border-width:1px;
    border-radius:4px 4px 4px 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    color: #FF3334;
    cursor:pointer;
    padding:6px 6px 4px;
    margin-top:5px;
    margin-bottom:5px;
    margin-left:5px;
	font-size: 24px;  
	font-weight: bold;
    display:inline-block;
	width:40%; height:50px;	
}

/*.keuzebutton {
    display:inline-block;
	width: 40%;	
	height: 47px;
}*/
.keuzevlak {
/*	border: 1px solid #ffe6e6;
	box-sizing: border-box; 	*/
	text-align:center; 
	width:90%; 
	margin:auto;
/*	height:110px;*/

}

.finish-button { 
    width:75%;
	height: 46px;
	margin:0;
}

.smallbutton { 
    width:40%;
	height: 46px;
}

.toolbutton{
    width:40px;
	height: 40px;
/*height: 80%;	width: 99%;	clear: both;*/
	margin: auto; /*-right: 0px;  */
	margin-left: 2px;
	margin-right: 2px;
}
/*.toolbutton:hover { background:#ddd; }*/

.c3button { 
    width:26%;
    /*width:29%;*/
/*	height: 40px;
height: 80%;*/
}
.c2button { 
    width:40%;
	height:50px;
    /*width:29%;*/
/*	height: 40px;
height: 80%;*/
}

.tooltip {
	/*			border-bottom: 1px dotted #000000; color: #000000; outline: none;*/
	cursor: help; text-decoration: none;
	position: relative;
}
.tooltip span {
	margin-left: -999em;
	position: absolute; /* absolute;*/
}
.tooltip:hover span {
	border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
	font-family: Calibri, Tahoma, Geneva, sans-serif;
/*	position: absolute; left: 1em; top: 2em;
	position: absolute; left: 1px; bottom: 2px;*/
	z-index: 99;
	margin-left: 0; 
/*	margin-top: 0; 
	width: 150px;*/
}
/*		.tooltip:hover img {
	border: 0; margin: -10px 0 0 -55px;
	float: left; position: absolute;
}*/
.tooltip:hover em {
	font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold;
	display: block; padding: 0.2em 0 0.6em 0;
}
.classic { padding: 0.8em 1em; }
.custom { padding: 0.5em 0.8em 0.8em 2em; }
* html a:hover { background: transparent; }
.classic {background: #FFFFAA; border: 1px solid #FFAD33; }
.critical { background: #FFCCAA; border: 1px solid #FF3334;	}
.help { background: #9FDAEE; border: 1px solid #2BB0D7;	}
.info { background: #9FDAEE; border: 1px solid #2BB0D7;	}
.warning { background: #FFFFAA; border: 1px solid #FFAD33; }