<style type ="text/css">
*{    box-sizing: border-box;  margin: 0;  padding: 0px;}
html{background-color: white;
  height: 100vh;
width: 100vw;}
body{padding:0px;margin:0px;
  height: 100vh;
width: 100vw;}


select {font-size:1em; color:red; background-color: white;border:0px}
select:hover{background-color: lightgrey;}
select:focus, div input.innertextfield:hover {border-color:#333;}

.big-checkbox {
	-webkit-appearance: none;
  font-size: 1.17em;
  color: red;
  font-weight: bold;
	background-color: white;
	background: transparent;
	border: 1px solid #cacece;
	box-shadow: 0 0px 0px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
	padding: 7px;
	border-radius: 3px;
	display: inline-block;
  width: auto;
  max-height: 105px;
	/*position: relative;*/
} 
checkbox{font-size:1.1em;  height:10px; margin:0;}

   
   .big-radio:checked:after {
       font-size: 1.17em;

	width: 24px;
	height: 24px;
	left: 4px;
	top: 4px;
}
         
.regular-checkbox {
	-webkit-appearance: none;
  font-size: 11px;
  color: black;
  
	background-color: white;
	background: transparent;
	border: 1px solid #cacece;
	box-shadow: 0 0px 0px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
	padding: 7px;
	border-radius: 3px;
	display: inline-block;
	position: relative;
}


.close    {display: none;}
.open     {display: inline;}

.userTextArea{  font-size: 1.00em; width:100%; min-height:1.50em; height:1.50em; margin:0px 0px 0px 0px; padding:1px 0px 0px 1px; background-color:white; overflow-x: hidden; resize: vertical; cursor: pointer;}
.userTextAreaRO{font-size: 1.00em; width:100%; min-height:1.50em; height:1.50em; margin:0px 0px 3px 0px; padding:1px 0px 0px 1px; background-color:white; overflow-x: hidden; overflow-y: hidden; resize: none;  }
.userTextArea:hover { box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5); background-color: lightgray; cursor: pointer;  }
.userTextArea:focus {/*  background-color: yellow;*/}
.listButtons{text-align:right; vertical-align:bottom; width:100%; position: absolute; bottom: 1em; display: block; overflow:hidden;}

.userTable {	display: block; width: 100%; overflow-y:auto; min-height:1.60em;}
.userTableRow{width: 100%; display: flex; vertical-align: top; padding:0px;}
.userTableRowquestions{width: 100%; display: flex; vertical-align: top; padding:8px;}
.userTableRowTitel {font-size: 1em; display: flex; vertical-align: middle; width:100%;height:1.30em; }

.userTableHeadButtonRO{vertical-align:top; font-size: 1.00em; color: red; background-color:#ddd; white-space: nowrap; text-align:left; height: 1.6em; max-height:1.6em; width:100%; }  
.userTableHeadButton{  vertical-align:top; font-size: 1.00em; color: red; background-color:#ddd; white-space: nowrap; text-align:left; height: 1.6em; max-height:1.6em; width:100%; }  
.userTableHeadButton:hover{ box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);  cursor: pointer; }
.userTableHeading1 {display: block;	background-color: #ddd; float: left; height: 1.6em; max-height: 2.8em; padding-left:0px;}
.userTableHeading2 {display: block;	background-color: #ddd; float: left; height: 1.6em; max-height: 2.8em; padding-left:1px;}
.userTableHeading3 {display: block;	background-color: #ddd; float: left; height: 1.6em; max-height: 2.8em; padding-left:1px;}
.userTableHeading4 {display: block;	background-color: #ddd; float: left; height: 1.6em; max-height: 2.8em; padding-left:1px;}
.userTableHeading5 {display: block;	background-color: #ddd; float: left; height: 1.6em; max-height: 2.8em; padding-left:1px;}
.userTableHeading6 {display: block;	background-color: #ddd; float: left; height: 1.6em; max-height: 2.8em; padding-left:1px;}
.userTableHeading7 {display: block;	background-color: #ddd; float: left; height: 1.6em; max-height: 2.8em; padding-left:1px;}
    
.userTableCell1 {display: block; vertical-align: top; padding-left:0px;} 
.userTableCell2 {display: block; vertical-align: top; padding-left:1px;} 
.userTableCell3 {display: block; vertical-align: top; padding-left:1px;} 
.userTableCell4 {display: block; vertical-align: top; padding-left:1px;} 
.userTableCell5 {display: block; vertical-align: top; padding-left:1px;} 
.userTableCell6 {display: block; vertical-align: top; padding-left:1px;} 
.userTableCell7 {display: block; vertical-align: top; padding-left:1px;} 
 
.popupTable {	display: flex; width: 100%; overflow-y:scroll; min-height:1.60em;}
.popupTableRow{min-height:1.50em; width: 100%; display: flex; vertical-align: top; padding:0px;}

.popupTableHeading1 {display: block; background-color: #ddd; float: left; height: 1.6em; max-height: 2.8em; padding-left:0px;}
.popupTableHeading2 {display: block; background-color: #ddd; float: left; height: 1.6em; max-height: 2.8em; padding-left:1px;}
.popupTableHeading3 {display: block; background-color: #ddd; float: left; height: 1.6em; max-height: 2.8em; padding-left:1px;}
.popupTableHeading4 {display: block; background-color: #ddd; float: left; height: 1.6em; max-height: 2.8em; padding-left:1px;}
.popupTableHeading5 {display: block; background-color: #ddd; float: left; height: 1.6em; max-height: 2.8em; padding-left:1px;}
.popupTableHeading6 {display: block; background-color: #ddd; float: left; height: 1.6em; max-height: 2.8em; padding-left:1px;}
.popupTableHeading7 {display: block; background-color: #ddd; float: left; height: 1.6em; max-height: 2.8em; padding-left:1px;}
 
.popupTableCell1 {float:left; display: block; vertical-align: top; padding-left:0px; font-size:0.8em; margin-top:0.3em; text-align:left;} 
.popupTableCell2 {float:left; display: block; vertical-align: top; padding-left:1px;} 
.popupTableCell3 {float:left; display: block; vertical-align: top; padding-left:1px;} 
.popupTableCell4 {float:left; display: block; vertical-align: top; padding-left:1px;} 
.popupTableCell5 {float:left; display: block; vertical-align: top; padding-left:1px;} 
.popupTableCell6 {float:left; display: block; vertical-align: top; padding-left:1px;} 
.popupTableCell7 {float:left; display: block; vertical-align: top; padding-left:1px;} 


.subResultTableRow{float:right; width:60%; display:none;}
.subResultTableHeading1 {float:left; display: block; width: 42%; padding-left:0px;}
.subResultTableHeading2 {float:left; display: block; width: 21%; padding-left:1px;}
.subResultTableHeading3 {float:left; display: block; width: 15%; padding-left:1px;}
.subResultTableHeading4 {float:left; display: block; width: 22%; padding-left:1px;}
.subResultTableHeading5 {float:left; display: block; width: 63%; padding-left:1px;}

.subResultTableField1 {float:left; display: block; width: 42%; padding-left:0px;}
.subResultTableField2 {float:left; display: block; width: 21%; padding-left:1px;}
.subResultTableField3 {float:left; display: block; width: 15%; padding-left:1px;}
.subResultTableField4 {float:left; display: block; width: 22%; padding-left:1px;}
.littlesubtitle{display:none;}

.mytable{  text-align:center;  width:100%;  margin: 0px auto 0px auto; display:flex; flex-direction:row; height:90%; overflow-y:auto; }
.myTablecell_left{  width:100%; height:100%; float:left; margin:0; color:black; text-align:left;   border:1px solid #cacece;white-space: nowrap;}
.myTablecell_right{ width:100%; height:100%; float:left; margin:0; color:black; text-align:right;  border:1px solid #cacece;white-space: nowrap;}
.myTablecell_center{width:100%; height:100%; float:left; margin:0; color:black; text-align:center; border:1px solid #cacece;white-space: nowrap;}

.mycolumn{float:left; display:block; width: 33%; max-height:100%;}

/*------------------------------------------
  Responsive Grid Media Queries - 1280, 1024, 768, 480
   1280-1024   - desktop (default grid)
   1024-768    - tablet landscape
   768-480     - tablet 
   480-less    - phone landscape & smaller
--------------------------------------------*/

/* {default}  1em = 16px*/      
html {font-size: 1.00em;}                                                                         
body{color:red;     font-size: 1.00em; 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:0.7em; font-family: Verdana, Arial, Helvetica, sans-serif; white-space: normal; background-color: white; margin:0px; padding:0px;}
  input:hover {background-color: lightgrey}
  textarea {box-shadow: 0 0 0 0; border:0 0 0 0; font-size:0.7em; 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;}
  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.17em; 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:1.17em;}
  .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;}

#dialogoverlay{overflow-y:auto; overflow-x:auto; 	display: none; opacity: 0;	position: fixed; top: 0px; left: 0px; background: #FFF;	width: 100%;	z-index: 10;}
#dialogbox{overflow-y:auto; overflow-x:auto; transition: opacity 500ms;	display: none; position: fixed;	background:#f1f1f1;	border-radius:7px; max-width:450; width:450px;	z-index: 10;}
#dialogbox > div { background:#f1f1f1; margin:1px;}
#dialogbox > div > #dialogboxhead{ background: lightblue; font-size:17px; padding:6px; color:black; }
#dialogbox > div > #dialogboxbody1{ background: #f1f1f1; padding:10px; padding-bottom:0px; color:blue; text-align: left; max-height:170px; overflow:auto;text-align:left; }
#dialogbox > div > #dialogboxbody { background: #f1f1f1; padding:5px; padding-bottom:0px;color:blue; text-align: center;}
#dialogbox > div > #dialogboxbody2{ background: #f1f1f1; padding:opx 20px 0px 10px; color:blue; text-align: center;}
#dialogbox > div > #dialogboxfoot{ background: lightblue; padding:6px; text-align:right; }
#dialogbox > div > #dialogboxhead:hover {cursor: pointer; /* Mouse pointer on hover */}

#messagedialogoverlay{display: none; opacity: 0;	position: fixed; top: 0px; left: 0px;	background: #FFF;	width: 100%; z-index: 11;}
#messagedialogbox{transition: opacity 500ms; display: none;	position: fixed; background: #f1f1f1; border-radius:7px; width:250px; z-index: 11;}
#messagedialogbox > div{ background:#f1f1f1; margin:1px; max-height:500px;}
#messagedialogbox > div > #messagedialogboxhead{ background: lightblue; font-size:17px; padding:6px; color:black; }
#messagedialogbox > div > #messagedialogboxbody {font-size:1.5em background: #f1f1f1; padding:10px; padding-bottom:0px;color:blue; text-align: center;}
#messagedialogbox > div > #messagedialogboxfoot{ background: lightblue; padding:10px; text-align:right; }
#messagedialogbox > div > #messagedialogboxhead:hover {cursor: pointer; /* Mouse pointer on hover */}
.dialogbox{       float:left; overflow-y:auto; overflow-x:auto; margin: 0 auto; max-width:100%; max-height:100%;}
.messagedialogbox{float:left; overflow-y:auto; overflow-x:auto; margin: 0 auto; max-width:100%; max-height:100%;background:#f1f1f1;}
 #messagedialogbox > div > #messagedialogboxbody {font-size:1.5em}

/*=================================================*/

 
    /* {laptop }  */


 
 
 
 

 


.regular-checkbox:active, .regular-checkbox:checked:active {
	background-color: white;
	background: transparent;
	box-shadow: 0 0px 0px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}

.regular-checkbox:checked {
	background-color: #e9ecee;
	background-color: white;
	background: transparent;
  border: 1px solid #adb8c0;
	box-shadow: 0 0px 0px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
	color: #99a1a7;
}

.regular-checkbox:checked:after {
	background-color: white;
	background: transparent;
  font-size: 11px;
	color: #99a1a7;
  color: black;
	content: '\2714';
	position: absolute;
	top: 0px;
	left: 3px;
}


.regular-radio {
	-webkit-appearance: none;
	background-color: #fafafa;
	border: 1px solid #cacece;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
	padding: 9px;
	border-radius: 50px;
	display: inline-block;
	position: relative;
}

.regular-radio:checked:after {
	content: ' ';
	width: 12px;
	height: 12px;
	border-radius: 50px;
	position: absolute;
	top: 3px;
	background: #99a1a7;
	box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);
	text-shadow: 0px;
	left: 3px;
	font-size: 32px;
}

.regular-radio:checked {
	background-color: #e9ecee;
	color: #99a1a7;
	border: 1px solid #adb8c0;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1), inset 0px 0px 10px rgba(0,0,0,0.1);
}

.regular-radio:active, .regular-radio:checked:active {
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}

.big-radio {
	padding: 16px;
}

 
#header {
  color: #44CCFF;
  background-color: white;
  
}
#headerh171 {
	font-style:italic;
	font-size: 1em;
	font-weight: bold;
	text-align: center;
} 

#tags {
	color: #44CCFF;
	font-style:italic;
	font-weight:normal;
	font-size: 1em;
}


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

}

pre.FF {
color: black;
margin-bottom: 10px;
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 */
white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
}



#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: 10px;   height: 30px;   
	/* marges instellen */   
margin: 2px;   
padding: 0;   
	/* en eventueel een randje */   
border: 1px dashed blue;
list-style-type:none;
}


#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: {   
	/* kleur voor het :hover effect */   
background-color: lightblue;
}

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

img {z-index: 99;}
img.alignright { float: right; margin: 0 0 1em 1em; display: block;}
img.alignleft { float: left; margin: 0 1px 1px 0; display: block; }
img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
/*img:hover { box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5); cursor: pointer; }*/
img:hover {  cursor: pointer; }
.alignright { float: right; }
.alignleft { float: left; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.hover { box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5); function:imghoover()}

figure{margin-top:0%;}
/*figure:hover { box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5); cursor: pointer; }*/
figure:hover { cursor: pointer; }
figure.aligncenter { display: block; margin-top:0px; margin-bottom:0px; margin-left: auto; margin-right: auto; text-align:center}
style="margin:10px 0px 10px 0px; text-align='center'"
figcaption{display: block; width:100%; float:left; text-align:center; font-style:italic; font-size:9px; color:blue; padding: 0px; margin-top: 0px; margin-left: 0px; margin-right: 0px; margin-bottom: 0px; border-width: 0px;}

ul {margin:0px;}


 #meta {
	color: blue;
	font-style:italic;
	font-weight:normal;
	font-size: 1em;
}


.commentboddy { float: left;
                text-align: left; 
                overflow: none; 
                display: block; 
                padding: 0px; 
                margin: 0px; 
                margin-top: 0px; 
                border: 0px solid black; 
                border-bottom: 0px;  
                box-shadow: 5px 5px #888888;
              }
.commentbutton {
/*    background-color: white; */
/* #4CAF50;Green 
    color: white;

*/
		background: transparent;
		background-repeat: no-repeat;
    padding: 0px;
		width:16px;
		height:16px;
    font-size: 11;
    border: none;
    text-align: center;
    text-decoration: none !important; text-decoration:none; text-underline:none;

    display: inline-block;
    margin:0px;
    margin-right:6px;
    margin-bottom:0px;
    box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.2);
} 

.commentbutton:hover {
   /*  background-color: #008CBA; #008CBA; Blue */
     background-color: #ddd	; /* #4CAF50;Green 	background: transparent;*/
	
		box-shadow: 1px 1px 1px 2px rgba(0,0,0,0.2);
   cursor:pointer;
}

.commentbutton:disabled {
    opacity:0.3;
   cursor:default;
}
















/* Dropdown Button*/ 
.dropbtn {
		background-color: white;
		background: transparent;
/*
    background-color: #3498DB;
     color: white;
		 */
    height:40px;   padding: 4px;
		margin:4px;
		margin-top:0px;
		margin-bottom:0px;
    font-size: 13px;
    min-width: 20px;
    border: none;
    cursor: pointer;
    box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.2);
}

/* Dropdown button on hover & focus */

.dropbtn:hover, .dropbtn:focus {
   /*  background-color: #008CBA; #008CBA; Blue  
   background-color: white; */ 
    box-shadow: 1px 1px 1px 2px rgba(0,0,0,0.2);
    cursor:pointer;
}

.dropbtn:disabled {
    opacity:0.3;
   cursor:default;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
		size: auto;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
		background-color: #ddd
    min-width: 60px;
		size: auto;
    box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 4px 4px;
    text-decoration: none;
    min-width: 40px;
		size: auto;
		display: block;
		white-space: nowrap; 
		cursor:pointer;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover, .dropdown-content a:focus {
	background-color: #ddd;
	}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}





/* Dropdown Content (Hidden by Default) */
.dropdownb-content {
    display: none;
    position: relative;
    background-color: #f1f1f1;
		background-color: #ddd
    min-width: 60px;
		size: auto;
    box-shadow: 4px 4px 4px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Links inside the dropdown */
.dropdownb-content a {
    color: black;
    padding: 4px 4px;
    text-decoration: none;
    min-width: 40px;
		size: auto;
		display: block;
		white-space: nowrap; 
		cursor:pointer;
}

/* Change color of dropdown links on hover */
.dropdownb-content a:hover, .dropdown-content a:focus {
	background-color: #ddd;
	}


.editscreenpbtn {
		background-color: white;
		background: transparent;
/*
    background-color: #3498DB;
     color: white;
		 */
    padding: 4px;
		margin:0px;
		margin-top:0px;
		margin-bottom:0px;
    font-size: 13px;
    min-width: 20px;
    border: none;
    cursor: pointer;
    box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.2);
}
.dropbtn:hover, .dropbtn:focus {
   /*  background-color: #008CBA; #008CBA; Blue  
   background-color: white; */ 
    box-shadow: 1px 1px 1px 2px rgba(0,0,0,0.2);
    cursor:pointer;
}


 .body, .wrapper {
  /* Break the flow */
  position: absolute;
  top: 0px;

  /* Give them all the available space */
  width: 100%;
  height: 100%;

  /* Remove the margins if any */
  margin: 0;

  /* Allow them to scroll down the document */
  overflow-y: hidden;
}
 
.body {
  /* Sending body at the bottom of the stack */
  z-index: 1;
}

.wrapper {
  /* Making the wrapper stack above the body */
  z-index: 2;
}
* {box-sizing: border-box;}
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
a {text-decoration: none !important; text-decoration:none; text-underline:none;}


 @media only screen and (orientation:portrait){
   .my_orientation{
    margin:2%;
    margin-top:0%;
    padding:0;
    width:96%; 
    text-align:left; 
    height:80%; 
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1 1 auto;
  }

} 
 @media only screen and (orientation:landscape){
   .my_orientation{
    margin:3%;
    margin-top:0%;
    padding:0;
    width:94%; 
    text-align:left; 
    height:76%; 
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1 1 auto;
  }
 
} 

.vDragbar{
  float:left; 
  width:1px; 
  height:100%; 
  cursor: col-resize; 
  background-color: gray; 
  border:1px 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: 90%;
        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{
  max-width:100%;
  height:auto;
}}*/
.docimagemax{
  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;

}
venis_mobile.css
</style>


