<style type ="text/css">
/* Let op google chrome standaard https://gist.github.com/ambidexterich/34828a904dd97dd2a345*/
 .close    {display: none;}
 .open     {display: inline;}


#header {
  color: #44CCFF;
  background-color: white;
  border-bottom: thick solid #FFFF00;
}
#header h71 {
	font-family: Verdana;
	font-style:italic;
	font-size: 2em;
	font-weight: bold;
	text-align: center;
} 
.topheader {height:auto; background-color: #f1f1f1; padding: 0px;	text-align: center;	margin-left:0px;	margin-right:0px; overflow:hidden; border-bottom: 2px solid #FFFF00;}
 .headers {background-color: #f1f1f1; padding: 0px;	text-align: center;	margin-left:20px;	margin-right:20px; overflow:hidden;}
 .subheader { width:100%; background-color: #f1f1f1; padding: 0px; text-align: center; vertical-align:middle; overflow:hidden; }
    .headerleft{text-align:left; float:left; color: red; } 
    .headermiddle{text-align:center;} 
    .headerright{text-align:right; }

 
 
 .footerssss{
  margin:10px 0px 0px 0px; /* binnen */
  padding:10px 0px 0px 0px; /* binnen */
  /*  display: inline-block;
  width:100%;
  background-color: white;
border-top: thick solid #FFFF00;*/
}


body {cursor: default; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:red; background-color: white; margin:0px; padding;0px;}
input {font-family: Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:black; background-color: white; border: 1px groove ThreeDFace;}
input:hover {background-color: lightgrey}

textarea {font-family: Verdana, Arial, Helvetica, sans-serif; font-size:1.0em; color:black; background-color: white;}
textarea:hover{background-color: lightgrey}
textarea:focus, div input.innertextfield:hover {border-color:#333;}

select {font-family: Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:black; background-color: white;}
select:hover{background-color: lightgrey;  border: 1px groove ThreeDFace;}
select:focus, div input.innertextfield:hover {border-color:#333; border: 1px groove ThreeDFace; }

a:link{
  text-decoration:none;
  word-break: break-all;
}

pre.MS {
font-size:1.20em;
color: green;
margin-bottom: 10px;
margin-top:-2px;
word-wrap: break-word;
word-break: break-all;
white-space: normal;

}

pre.FF {
font-size:1.20em;
color: black;
margin-bottom: 10px;
margin-top: 1px;
white-space: pre; /* CSS2 */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP printers */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: pre-wrap; /* CSS 2.1 */
word-wrap: break-word;
}

pre.FF2 {
font-size:1.00em;
color: black;
margin-bottom: 0em;
margin-top:-2px;
white-space: pre; /* CSS2 */
white-space: -moz-pre-wrap; /* Mozilla */
white-space: -hp-pre-wrap; /* HP printers */
white-space: -o-pre-wrap; /* Opera 7 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: pre-wrap; /* CSS 2.1 */
word-break: break-all;
}

table {
    display: table;
    /*border-collapse: separate;*/
    border-collapse: collapse;
    border-spacing: 0px;
    border-color: gray;
}

                                                                      
body{color:red;  font-size:0.7em; resize: none; word-break: break-word; hyphens: auto; font-family: Verdana, Arial, Helvetica, sans-serif; background-color: white; height:100%;}
  p {hyphens: auto; }
  input {color:black; font-size:1.0em; font-family: Verdana, Arial, Helvetica, sans-serif; white-space: normal; background-color: white; margin:1px; padding:0px;}
  input:hover {background-color: lightgrey}
  textarea {box-shadow: 0 0 0 0; border:0 0 0 0; font-size:1.00em; color:black; background-color: white;font-family: Verdana, Arial, Helvetica, sans-serif; }
  textarea:hover{background-color: lightgrey}
  textarea:focus, div input.innertextfield:hover {border-color:#333;}
  td {color:red;     font-size: 1.00em; padding:0; white-space: normal;}
  a {color:blue;    font-size: 1.00em; text-decoration: none !important; text-decoration:none; text-underline:none;}
 
  H1{color:blue;    font-size: 2.00em; font-style:italic; padding: 0px; margin-top: 0px; margin-left: 0px; margin-right: 0px; margin-bottom: 0px; border-width: 0px;}
  H2{color:blue;    font-size: 1.50em; font-style:italic; padding: 0px; margin-top: 1px; margin-left: 0px; margin-right: 0px; margin-bottom: 0px; border-width: 0px;}
  H3{color:blue;    font-size: 1.17em; font-style:italic; padding: 0px; margin-top: 2px; margin-left: 0px; margin-right: 0px; margin-bottom: 0px; border-width: 0px;}
  H4{color:blue;    font-size: 0.83em; font-style:italic; padding: 0px; margin-top: 2px; margin-left: 0px; margin-right: 0px; margin-bottom: 0px; border-width: 0px;}
  H5{color:blue;    font-size: 0.76em;                    padding: 0px; margin-top: 1px; margin-left: 0px; margin-right: 0px; margin-bottom: 0px; border-width: 0px;}
  H6{color:blue;    font-size: 0.60em;                    padding: 0px; margin-top: 0px; margin-left: 0px; margin-right: 0px; margin-bottom: 0px; border-width: 0px;}
  .h2_goed_groen{	  font-size: 1.50em; font-weight: bold; color: green}
  .h2_fout_red{	    font-size: 1.50em; font-weight: bold; color:red}
  .h2_select_blue{  font-size: 1.50em; color:blue;font-weight: bold; }
  .h2_select{	      font-size: 1.50em; font-weight: bold; }
  .h3_select{	      font-size: 1.00em; font-weight: bold; } 
 	.H6_red{          font-size:0.7em;  color:red;  padding: 0px; margin-top: 0px; margin-left: 0px; margin-right: 0px; margin-bottom: 0px; border-width: 0px;}
  select {          font-size:0.90em; border: 1px groove ThreeDFace;}  
  .big-checkbox{    font-size:1.17em;}
  .h3_select_blue{  font-size: 1.17em; color:blue;font-weight: bold; } 
  .h4_select{	      font-size: 0.83em; font-weight: bold; }
  .h4_select_blue{	font-size: 0.83em; color:blue;font-weight: bold; }
  .h5_select{	      font-size: 0.60em; color:red;font-weight: bold; }  
  .h5_select_blue{  font-size: 0.60em; color:blue;font-weight: bold; }    
  .inputtext{       font-size: 1.17em; padding: 0px; width:50%; white-space: nowrap; }
  .inputtextamswer{ font-size: 1.17em; font-weight: bold; color:blue; padding: 0px; width:70%; white-space: nowrap; border-top: 0; border-right:0; padding-left:4px; outline: none;}
  .inputtextlogin{  font-size: 1.17em; padding: 0px; width:38%}
  .inputtextsums{   font-size: 2.00em; font-weight: bold; white-space: nowrap; color:blue;width:90%;border-top: 0; border-left:0; padding-right:4px; outline: none;}
  .listSubtitle{height:auto; display:block; vertical-align:top; overflow:hidden;}
  .littlesubtitle{display:none;}
  .opvulling1{      font-size: 1.00em; color:red; display:none;}
  .questioncheck{   font-size:2em; height:1.5em; width:1.5em;}
  .questioncheck:checked{color:blue;}
  .questionleft{float:left; width:40%; display:block;}
  .questionright{float:right; width:60%; display:block;}
  .questionstatus{  font-size: small; float:left; }
  .subtitleusername{font-size: 1.0em; color:blue; font-style:italic;  font-weight: bold; padding: 0px; margin-top: 0px; margin-left: 0px; margin-right: 0px; margin-bottom: 4px; border-width: 0px;}
  .studentclassname{font-size: 1.17em; color:blue; font-style:italic;  font-weight: bold; padding: 0px; margin-top: 0px; margin-left: 0px; margin-right: 0px; margin-bottom: 4px; border-width: 0px;}
  .tablecheck{width:6%; font-size:1.1em; width:1.2em; height:1.2em; padding:0px; margin:1px;} 
  .tags {           font-size: 0.60em;	color: #44CCFF;	font-style:italic;	font-weight:normal;	}
  .taskbtn {        font-size: 1.00em; color: red; white-space: normal; background-color: white; background: transparent; font-weight: bold; vertical-align: middle; height:5em; width:25%; padding: 0px;	margin:0px;}
  .taskbtn:focus {box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.2); cursor:pointer;}
  .taskbtn:disabled {opacity:0.3; cursor:default;}
  .taskbtnbottom{   font-size:1.30em; white-space: normal; background-color: white;	background: transparent; font-weight: bold; vertical-align: middle;
                                  color: red; height:3em; width:24.2%; padding: 0px; margin-bottom:3px;}
  .taskbtnbottom:hover {box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.2); cursor:pointer;}
  .taskbtnbottom:disabled {opacity:0.3; cursor:default;}
  .h2_select:hover {/*	<!-- background-color: #e9ecee; -->*/ cursor:pointer;}
  .h3_select:hover {/*	<!-- background-color: #e9ecee; -->*/  cursor:pointer;}
  .h4_select:hover {/*	<!-- background-color: #e9ecee; -->*/ cursor:pointer;}     
  a:visited {color: blue}
  a:hover {color: red; background-color: lightgrey;}

}
#menu{   
	/* de marges zetten we op nul */   
margin: 0;   
padding: 0;
position: fixed;
top: 10px;
left:10px;
}

#menu li{   
	/* type van de style zetten we op 'none', zodat we geen opsommingsteken krijgen */   
list-style-type: none;   
  	/* Naar links laten floaten */   
float: left;
	/* breedte en hoogte opgeven */   
width: 100px;   height: 30px;   
	/* marges instellen */   
margin: 2px;   
padding: 0;   
	/* en eventueel een randje */   
border: 1px dashed blue;}

#menu li a{   
	/* van de links een block-element maken voor het :hover effect */   
display: block;   
	/* breedte en hoogte op 100% zodat de <li> wordt opgevuld */   
width: 100%;   
height: 100%;   
	/* een uiteraard een leuk achtergrondkleurtje */   
background-color: lightyellow;}

#menu li a:hover{   
	/* kleur voor het :hover effect */   
background-color: lightblue;}

.vDragbar{
  float:left; 
  width:4px; 
  height:100%; 
  cursor: col-resize;
  margin:0;
  padding:0;
}

.vDragbar:hover{
  float:left; 
  width:4px; 
  height:100%; 
  cursor: col-resize;
  background-color: gray;
  border:0px gray;
}


   
    .popupdiv {
        z-index:99;
        background-color: white;
        display:none;
        width: fit-content;
        height: fit-content;
        position: absolute; /*Can also be `fixed`*/
        padding:0;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        /*Solves a problem in which the content is being cut when the div is smaller than its' wrapper:*/
        max-width: 99%;
        max-height: 99%;
        overflow: hidden auto;
        margin-left: auto;
        margin-right: auto;
        border:2px  groove  red; 
        box-sizing: border-box;
        box-shadow: 3px 3px #888888;
        resize:both;
        
        
}


.popupdiv_inner {
        width:auto; 
        height:auto;
        padding: 2px;
        opacity: 1; 
        box-sizing: border-box;
        background-color: white;
}
    .kalenderframe {
      width: 100%;
      height: 100%;
      margin: 0px;
      padding:0px;
      overflow: hidden ;
      border: 0px;
      box-sizing: border-box;
}
    .popupframe {
      width: 100%;
      height: 100%;
      position: absolute; /*Can also be `fixed`*/
      margin: 0px;
      padding:0px;
      overflow: hidden ;
      border: 0px;
      box-sizing: border-box;
}


.popupdivheader {
  cursor: move;
  z-index: 10;
  color: #fff;
}

.popuptextarea{
  resize:vertical;
  box-sizing:border-box;
}

.docimage{
  max-width:100px;
  height:auto;
}
.docimage:hover{
  cursor:pointer;
 /* max-width:100%;
  height:auto;*/
}
.docimagemax{
  cursor:default;
 max-width:100%;
  width:100%;
  height:auto;
}

.centerimageonscreen{
 position:absolute;
 display:block;
 width :auto;
 height:auto;
 margin-left:auto;
 margin-right:auto;
 top: auto;
 left :auto;

}

/*zie verder https://css-tricks.com/snippets/css/a-guide-to-flexbox/#basics-and-terminology */
.box{ overflow:hidden;  display: flex;  flex-flow: column;  height: 100%; margin:0; padding:0;}
.box .row.header {
         flex: 0 1 auto;
         background-color: #f1f1f1;
      }
.box .row.content {
        flex: 1 1 auto;
        overflow:hidden;
      }
.box .row.footer {
        flex: 0 1.0em;
 }

</style>


