@charset "utf-8";
body{font-family:Adobe Arabic;
}

/*font*/
@font-face {
	
  font-family: Adobe Arabic;
  src: url(../../../css/AdobeArabic-Regular.otf) format("opentype");
}



@font-face {
  font-family: Adobe Arabic;
  src: url(../../../css/AdobeArabic-Bold.otf) format("opentype");
  font-weight:bold;
}

  .uno {
            height: 1000px;
            background: #808080;
        }
		  .due {
            margin-top: 300px;
            height: 500px;
            background: #ff00ff;
        }
		p.clear{height: 2px; margin-bottom: 3px;}

/*header*/
#section-header-name{
	font-weight:bold;
	font-size:14pt;
	margin-right:25px;
	bottom:-7px;
	position:relative;
	
	
}

.outer_div .title-section div{
	float:right;
}

.outer_div .title-section .popover
{
	width:270px;
	height:200px;
}
.outer_div .title-section .popover-title{
	width:266px;
}

.outer_div  .title-section  .title
{
	position:relative;
	font-size:22pt;
	font-weight:bold;
	font-family:Adobe Arabic;
	padding-top:5px;
}

.outer_div  .title-section  .title a
{
	color:black;
	text-decoration:none;
}

.outer_div  .title-section  .title a:hover
{
	text-decoration:none;
	/*color:#FF931E;*/
}


.outer_div .title-section .section-header
{
	position:relative;
	font-size:8pt;
	font-weight:bold;
	font-family:Adobe Arabic;
	padding-top:15px;
	margin-right:10px;
}

.glyphicon-menu-left
{
	font-size:14px;
	margin-right:5px;
	top:18px;
	color:#FF931E;
	position:relative;
}
/* .outer_div p{
	font-size:22pt;
	font-weight:bold;
	font-family:Adobe Arabic;
	padding-top:5px;
	margin-right:48px;
} */

.outer_div{
	padding-top:5px;
	font-size:22pt;
	font-family:Adobe Arabic;
	position:fixed;
	background-color:#bde085;
	height:50px;
	top:0;
	right: 0;
	width: 100%;
	direction : rtl;
	box-shadow: 0px 5px 10px #888888;
	opacity: 0.95;
	z-index:200;
}


div.textchoices {
	direction:rtl;
	width:100%;
    padding-left: 0px;
    -webkit-transition: all 1.6s ease-out;}

#back
{
	font-size:30px;
	margin-left:15px;
	top:5px;
	color:#fff;
	float:left;
	left:0;	
}

.outer_div small{
	position:fixed;
	font-size:12pt;
	font-weight:bold;
	font-family:Adobe Arabic;
	right:220px;
	margin-top:1px;
	margin-right:5px;
	margin-top:10px;
}

div.modal-body{
	font-family:Adobe Arabic;
}

/*radio(checkbox)*/



/*input[type=radio]:checked + label {
	
        color:#000;		
}*/


input[type=radio], input[type=checkbox] {
        display:none;	
}
	
	
input[type=radio] + label:before {
	    content: "";  
	    display: inline-block;  
	    width: 20px;  
	    height: 20px;  
	    vertical-align:middle;
	    margin-right: 8px;
		top:50%;
		
	    background-color: #fff;  
	   
	    border-radius:0px;
		float:right;
		margin-left:10px;margin-top: 5px;
		 border: 3px solid #666;
		 
}
		
	
/*input[type=checkbox] + label:before {
	
		
	    content: "";  
	    display: inline-block;  
	    width: 20px;  
	    height: 20px;  
	    vertical-align:middle;
	    margin-right: 8px;  
	    background-color: #aaa;  	 
}*/

input[type=radio]:checked + label:before {
		color:#0F6;
	    background-color: #9C0;
		padding-right:2px;
		border: 3px solid #000;
}
	
	
input[type=radio] + label {
display:block;	 
}

/*
 Change background color for label next to checked radio button
 to make it look like highlighted button
*/

.textchoices{
	padding-left:60px;
	-webkit-transition: all 1.6s ease-out;
	
	color:000;
}

.textchoices:hover{
	padding-right:60px;
	-webkit-transition: all 0.6s ease-out;
	 }
	 

input[type=radio]:hover + label~.textchoices {
	padding-right:60px;
	-webkit-transition: all 0.6s ease-out;
	
}
	
	
.title{
	font-size:18pt;
	font-weight:bold;
color:#ff931e;
background-color:#FFF;
border:0;
margin-top:10px;
width:200px;
height:30%;
margin-right:80px;
font-family:Adobe Arabic;
padding-right:20px;

position:relative;
}
.restitle{
	font-size:18pt;
	font-weight:bold;
color:#ff931e;
background-color:#FFF;
border:0;
margin-top:10px;
width:200px;

margin-right:80px;
font-family:Adobe Arabic;
padding-right:20px;

position:relative;
}

.asstitle{
	font-size:18pt;
	font-weight:bold;
color:#ff931e;
background-color:#FFF;
border:0;
margin-top:28px;
width:200px;

margin-right:80px;
font-family:Adobe Arabic;
padding-right:20px;

position:relative;
}


.question{
	
	position:relative;
	font-family:Adobe Arabic;
	color:#000;
	font-size:16pt;
	font-weight:bold;
	direction:rtl;
	text-align:right;
	background:#FFF;
    border:0;
    margin-bottom:10px;
    margin-top:-38px;
    height:40%;
    width:70%;
    padding-right:10px;
    font-family:Adobe Arabic;
    margin-right:10%;
    padding-bottom:8px;
	
}


/*radio float*/
.right{
	
	float:right;
	background:#000;
	
}
#square1{
    background-color:#CCC;
	width:80px;
    height:35px;
    position:relative;
    right:0;
    top:62px;

}

#image{
    
	
    position:relative;
    right:20px;
    top:35px;



}
 #square1 img{
	 
	 float:right;
	 position:relative;
	
	height:100%;
	width:100%;}
	
	
	#square4{
    background-color:#CCC;
	width:80px;
    height:35px;
    position:relative;
    right:0;
    top:45px;



}
#square2{
	font-family:Adobe Arabic;
    font-weight:bold;
	font-size:20pt;
	text-align:center;
	
	color:#FFF;
    background-color:#ff931e;
	width:10%;
    margin-top:50px;
	
}

#square3{
	  background-color:#A0D250;
	width:80px;
    height:35px;
    position:relative;
    right:0;
bottom:220px;
}

#square3-1{
	  background-color:#ea4335;
	width:80px;
    height:35px;
    position:relative;
    right:0;
bottom:220px;
}
#line{
	margin-left:auto;
	margin-right:auto;
	width:60%;
	height:5px;
	background:#A0D250;
}


#block{
	margin-left:auto;
	margin-right:auto;
    filter: alpha(opacity=100);
	font-size:18px;
    background:#E1E1E1;
	opacity:0.8;
	margin-top:5%;
	padding-bottom:10px;
	width:60%;
	
}

#block1{
	margin-left:auto;
	margin-right:auto;
    filter: alpha(opacity=100);
	font-size:18px;
    background:#E1E1E1;
	opacity:0.8;
	height:400px;
	
	
	
	
	
	width:60%;
	
}
#block:hover { 
    background-color:#F0F0F0;
    color:#84C1C1;	
}


#ans{
    font-size:16pt;
	
	font-weight:bold;
	color:#000;
	font-family:Adobe Arabic;
	border:0;
    margin-right:14%;
    margin-bottom:2px;
    position:relative;
    width: 74%;

}


#ans:hover {
	
 

}



.hh{display: block;}

.incorrect{
	display: block;
    margin-top:2%;	
}



.answer{
	
    display: block;
	margin-right:10%;
	margin-top:-25px;
	padding-left:100px;
}



.correct{
	display: block;
	margin-top:2%;	
}
.result{
	
		font-size:16pt;
	
	font-weight:bold;
	color:#000;
	font-family:Adobe Arabic;
	border:0;
    margin-right:100px;
	top:-310px;
    
    position:relative;
	
    
    }
	.result2{
	
		font-size:14pt;
	
	font-weight:bold;
	color:#000;
	font-family:Adobe Arabic;
	border:0;
    margin-right:-90px;
	top:-70px;
    
    position:relative;
    
    }
	
	
.resulttit{
	font-size:18pt;
	font-weight:bold;
color:#000;



width:200px;
height:30%;

font-family:Adobe Arabic;


position:relative;
}

	

#CircleChart_1{
	width:300;
	height::300px;
	margin-right:50%;
	margin-buttom:0px;}
	


@media only screen and (max-device-width: 768px) {
	
	#block1{
	margin-left:auto;
	margin-right:auto;
    filter: alpha(opacity=100);
	font-size:18px;
    background:#E1E1E1;
	opacity:0.8;
	height:600px;
	
	
	
	
	
	width:60%;
	
}
	
	
				#square3{
	  background-color:#A0D250;
	width:80px;
    height:35px;
    position:relative;
    right:0;
bottom:-35px;
}
			#square3-1{
	  background-color:#ea4335;
	width:80px;
    height:35px;
    position:relative;
    right:0;
bottom:-35px;
}
	
	.question{
		margin-right:22%;
		
		width:75%;
	}
	#square2{
		padding-right: 2%;
		text-align: right;
		width:22%;}
				.result{
	
		font-size:16pt;
	
	font-weight:bold;
	color:#000;
	font-family:Adobe Arabic;
	border:0;
    margin-right:85px;
	top:-60px;
    
    position:relative;
    
    }
	
	.result2{
	
		font-size:14pt;
	
	font-weight:bold;
	color:#000;
	font-family:Adobe Arabic;
	border:0;
    margin-right:-75px;
	right:-20px
	top:-70px;
    
    position:relative;
    
    }
			#CircleChart_1{
	width:250px;
	height::250px;
	margin-right:50px;
	
	
	
	margin-buttom:0px;}

}
	@media only screen and (max-device-width: 640px) {
				#CircleChart_1{
	width:250px;
	height::250px;
	margin-right:100px;
	
	
	
	margin-buttom:0px;}
		.result{
	
		font-size:14pt;
	
	font-weight:bold;
	color:#000;
	font-family:Adobe Arabic;
	border:0;
    margin-right:85px;
	top:-60px;
    
    position:relative;
    
    }
	
	.result2{
	
		font-size:14pt;
	
	font-weight:bold;
	color:#000;
	font-family:Adobe Arabic;
	border:0;
    margin-right:-75px;
	right:-20px
	top:-70px;
    
    position:relative;
    
    }
	#ans {
		
		width:85%;
		margin-bottom:10%
	}}
		
		
		
		
		@media only screen and (max-device-width: 414px) {

			
				#block1{
	margin-left:auto;
	margin-right:auto;
    filter: alpha(opacity=100);
	font-size:18px;
    background:#E1E1E1;
	opacity:0.8;
	height:600px;
	
	
	width:90%;
	
}

.result2{
	
		font-size:13pt;
	
	font-weight:bold;
	color:#000;
	font-family:Adobe Arabic;
	border:0;
    
	top:-70px;
    margin-right:-110px;
	left:-15px;
	    position:relative;
    
    }	
	
	#CircleChart_1{
	width:250;
	height::250px;
	
	margin-buttom:0px;
	
	margin-left:10px;}
			
			#square3{
	  background-color:#A0D250;
	width:80px;
    height:35px;
    position:relative;
    right:0;
bottom:-10px;
}
			#square3-1{
	  background-color:#ea4335;
	width:80px;
    height:35px;
    position:relative;
    right:0;
bottom:-10px;
}
	
			.result{
	
		font-size:16pt;
	
	font-weight:bold;
	color:#000;
	font-family:Adobe Arabic;
	border:0;
    margin-right:100px;
	top:-80px;
    
    position:relative;
    
    }


		
input[type=radio] + label:before {
	    content: "";  
	    display: inline-block;  
	    width: 30px;  
	    height: 30px;  
	    vertical-align:middle;
	    margin-right: 8px;
		top:10%;
	    background-color: #fff;  
	    border-radius:0px;
		float:right;
		margin-left:10px;margin-top: 5px;
		 border: 3px solid #666;
	}
		
	/*	
input[type=checkbox] + label:before {
	    content: "";  
	    display: inline-block;  
	    width: 30px;  
	    height: 30px;  
	    vertical-align:middle;
	    margin-right: 8px;  
		
	    background-color: #aaa;  
}*/


#block{
	    width:90%;
		margin-left:auto;
		
}



#line{
	margin-left:auto;
	margin-right:auto;
	width:90%;;
}
	
	
.answer{

	display: block;
	margin-right:10%;
	margin-top:-25px;
	padding:0;}
}


@media only screen and (max-device-width: 414px) {
	
	#CircleChart_1{
	width:250;
	height::250px;
	margin-right:10%;
	
	margin-buttom:0px;
	
}
#ans {
		width:85%
		margin-bottom:10%
	}
				
}
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
	


	#ans{
    font-size:28pt;
	
	font-weight:bold;
	color:#000;
	font-family:Adobe Arabic;
	border:0;
    margin-right:14%;
  margin-bottom:10%
    position:relative;
    width: 85%;
    height: 40px;
}
	.title{
	font-size:26pt;
	font-weight:bold;
color:#ff931e;
background-color:#FFF;
border:0;
margin-top:10px;
width:200px;
height:30%;
margin-right:80px;
font-family:Adobe Arabic;
padding-right:20px;

position:relative;
}
.restitle{
	font-size:24pt;
	font-weight:bold;
color:#ff931e;
background-color:#FFF;
border:0;
margin-top:10px;
width:200px;

margin-right:80px;
font-family:Adobe Arabic;
padding-right:20px;

position:relative;
}
	.question{
	
		position:relative;
	font-family:Adobe Arabic;
	color:#000;
	font-size:24pt;
	font-weight:bold;
	direction:rtl;
	text-align:right;
	background:#FFF;
    border:0;
    margin-bottom:10px;
    margin-top:-38px;
    height:40%;
    width:85%;
    padding-right:10px;
    font-family:Adobe Arabic;
    margin-right:10%;
    padding-bottom:8px;
	
}

#block{
	    width:90%;
		margin-left:auto;
		
}
		#block1{
	margin-left:auto;
	margin-right:auto;
    filter: alpha(opacity=100);
	font-size:18px;
    background:#E1E1E1;
	opacity:0.8;
	height:600px;
	
	
	width:90%;
	
}

#line{
	margin-left:auto;
	margin-right:auto;
	width:90%;;
}


	
.result2{
	
		font-size:20pt;
	
	font-weight:bold;
	color:#000;
	font-family:Adobe Arabic;
	border:0;
    
	top:-120px;
    margin-right:-110px;
	left:-15px;
	    position:relative;
    
    }	
	
	#CircleChart_1{
	width:250;
	height::250px;
	margin-right:25%;
	   
	margin-buttom:0px;
	
	}
			
			#square3{
	  background-color#A0D250;
	width:80px;
    height:35px;
    position:relative;
    right:0;
bottom:-10px;
}
			#square3-1{
	  background-color:#ea4335;
	width:80px;
    height:35px;
    position:relative;
    right:0;
bottom:-50px;
}
			.result{
	
		font-size:24pt;
	
	font-weight:bold;
	color:#000;
	font-family:Adobe Arabic;
	border:0;
    margin-right:100px;
	top:-80px;
    
    position:relative;
    
    }


		
input[type=radio] + label:before {
	    content: "";  
	    display: inline-block;  
	    width: 40px;  
	    height: 40px;  
	    vertical-align:middle;
	    margin-right: 8px;
		top:10%;
	    background-color: #fff;  
	    border-radius:0px;
		float:right;
		margin-left:10px;margin-top: 5px;
		 border: 3px solid #666;
	}
		
	/*	
input[type=checkbox] + label:before {
	    content: "";  
	    display: inline-block;  
	    width: 30px;  
	    height: 30px;  
	    vertical-align:middle;
	    margin-right: 8px;  
		
	    background-color: #aaa;  
}*/
.answer{

	display: block;
	margin-right:10%;
	margin-top:-25px;
	padding:0;}
				
}

/* @media only screen and (min-device-width: 320px) {
.outer_div p {
    font-size: 16pt;
    font-weight: bold;
    font-family: Adobe Arabic;
    margin-right: 22px;
}
} */

.unit-title
{
	font-size:20pt;
	position:relative;
	float:right;
	margin-right:10px;
	font-family : Adobe Arabic;
	font-weight:bold;
	
}

@media only screen and (max-device-width: 500px) {
.unit-title{
    font-size: 16pt;
    font-weight: bold;
    font-family: Adobe Arabic;
    margin-right: 10px;
}

.outer_div
{
	height:70px;
}

#section-header-name{
	font-weight:bold;
	font-size:13pt;
	bottom:15px;
	position:absolute;
	right:10px;
}

#back
{
	font-size: 30px;
    /* margin-left: 15px; */
    top: 18px;
    color: #fff;
    float: left;
    left: -10px;
    position: absolute;
}
	

}





#section-menu.glyphicon.glyphicon-menu-left
{
	position:relative;
	margin-right:-58px;
	top:3px;
	
}