@font-face { 
font-family: 'MyCustomFont'; 
src: url('noorehuda.otf?#iefix') format('embedded-opentype'), 
	 url('noorehuda.woff') format('woff'), 
	 url('noorehuda.ttf') format('truetype'), 
	 url('noorehuda.svg') format('svg');    
	font-weight: bold;    
	font-style: normal;
}	


html {
    height 100%;
}

body{
 height:100%;
 width:60%;
 max-width: max-content;
 margin: auto;
 font-family: "MyCustomFont", Verdana, Tahoma; 
 /*! -webkit-overflow-scrolling: touch; */
 background-color: #bbdebc;
}

.maincontainer{
 margin:0;
 padding:0;
 height:100%;
 width:90%;
 overflow:none;
 background-color: #f2f9f2;
}
.openbtn
{
 top:0;
 position:fixed;
}

.sidebar {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #F2F9F2;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidebar a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-family: Arial;
  font-size: 20px;
  color: black;
  display: block;
  transition: 0.3s;
  padding: 15px 10px;
}


.sidebar a:hover, .dropdown:hover .dropbtn {
  background-color: #bbdebc;
}


.sidebar .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}



.openbtn {
  font-size: 20px;
  cursor: pointer;
  background-color: #F2F9F2;
  color: white;
   border: none;
}

.openbtn:hover {
  background-color: #bbdebc;
}

.sidebar .closebtn{
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
  
}




.CloseButton{
	width:249px;
	border:none;
	display:inline-block;
	padding:10px 10px;
	vertical-align:center;
	overflow:none;
	color:#00000;   /* Text Colour*/
	background-color:#D0F7D1;
	text-align:center;
	cursor:pointer;
	white-space:nowrap;
	border-style: solid;
	border-width: thin;
	position:fixed;
	float:top;
	}
	
.Font-Large{font-size:15px; font-weight: bold;!important}


.CloseButton1{
	width:100px;
	border:none;
	/*display:inline-block;*/
	padding:10px 10px;
	vertical-align:left;
	overflow:hidden;
	color:#00000;   /* Text Colour*/
	background-color:#D0F7D1;
	text-align:left;
	cursor:pointer;
	white-space:nowrap;
	border-style: solid;
	border-width: thin;
	position:absolute;
	float:top;
	}
.Font-Large{font-size:15px; font-weight: bold;!important}



/*

audio:hover, audio:focus, audio:active
{
-webkit-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
-moz-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4);
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
transform: scale(1.05);

	

}

*/





audio {
   
    width: 300px;
    height: 40px;
	position: fixed;
	margin-left: 110px;
}

.container{

	top: 0;
	height:100%;
	width:100%;
	overflow: none;
	position: relative;/*
	padding:0px 0px 100px;
	
  display: flex;
  flex-direction: column;
  background-color: #f2f9f2;
  position:fixed;
  height:100%;
  width:100%;
  */
  
}


#main {
  transition: margin-left .5s;
  padding: 0px;
   z-index: 0;
   background-color: #bbdebc;
}


.mainframe{
   border: 10px;
   height: 750px;
   left: 0;
   top: 50px;
   width: 100%;
   position: relative;
   overflow:auto;
   //padding: 20px 0px;

}



#versiering{
/*  border: 20px solid;
	border-image: url(top.png) 30% round;
  padding: 10px;
  background-color: #f2f9f2;
*/}



.title{
	text-align: center;
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	font-size: 60px;
	font-family: Verdana;
	font-weight: bold;
	 color: #ecfbec; /*dbd5f3;*/
	
}

.bismillah{
	text-align: center;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 0px;
	padding-left: 10px;
	font-size: 60px;
	font-family: "MyCustomFont";
	border: none;
}
.bismillah2{
	text-align: center;
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 50px;
	padding-left: 10px;
	font-size: 20px;
	font-family: Verdana;
	font-style: italic;
	border: none;
}

.box-arab{
	text-align: center;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	font-size: 60px;
	font-family: "MyCustomFont";
	background-color: #D0F7D1;   
	border-style: solid;
	border-width: thin;
}

.box-trans{
	text-align: center;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	font-size: 20px;
	font-family: Verdana;
	font-style: italic;
	background-color: #F2F9F2; /*#ccffe6;*/
	border-style: solid;
	border-width: 0px thin 0px thin
}

.box-vertaling{
	text-align: center;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	font-size: 22px;
	font-family: Tahoma;
	/*! font-style: nomatl; */
	background-color: #ecfbec ; /*b3ffd9;*/
	border-style: solid;
	border-width: thin;
	
}




@media only screen and (max-width:800px) {
  /* For tablets: */
.box-arab{
    font-size: 50px;
  }


.box-trans{
  font-size: 15px;
  }
  
  .box-vertaling{
    font-size: 20px;
  }
}






.container{position: fixed;}
.mainframe{position:fixed; padding:0px 0px 0px 0px;}




/***************************************************/

span {
   padding:0;
   margin:0;
}

.text-highlight span {
   display:block;
   margin-bottom:1px;
}

.text-highlight span.active-prev {
   display:none;
   background:#f2f9f2;
}
.text-highlight span.active {
   background: #00ff7f;
   display:block;
}
.text-highlight.show-all span {
   display:block !important;  
}


/* turn off highlight */
.text-highlight.off span {
   background: transparent;
}

@media only screen and (max-width:500px) {
  /* For mobile phones: */
body{width:100%;}
.title{font-size: 45px; }	 
.bismillah{font-size: 45px;}
.bismillah2{font-size: 10px;}
.box-arab{font-size: 45px;}
.box-trans{font-size: 13px;}
.box-vertaling{font-size: 15px;}

}