h1,h2,h3,h4,h5,span{
    
    font-family:myFont;
    font-size:115%;
}
.blacktext{
        font-family:myFont-Black !important;
}
.italictext{
      font-family: myFont-Italic !important;
}
.boldtext{
    font-family:myFont-Bold !important;
}
.blackitalictext{
     font-family: myFont-BlackItalic !important;
}
.bolditalictext{
     font-family: myFont-BoldItalic !important;
}

body{
    font-family: myFont !important;
    margin: 0;
    padding: 0;
    direction: ltr;
    font-size: 1.5em;
    font-variant-ligatures: none;
    background:#f7f7f7;
}


hr{border-width: 1px;border-color: #222;}
h1{margin-top:0.2em;}
.arabicNumFont{font-family: 'arabicNumericFont';}
a, a:hover{text-decoration:none;}
.width-100{width:100%;}

#arabic_template .preloader {
	background: #fff;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 2;
}

#arabic_template .preloader.hide{
	opacity:0;
	z-index: 0;
}

#arabic_template .preloader .preloader_img{
	position: relative;
    margin: 0px auto;
    left: 50%;
    top: 45%;
}


/* Navbar CSS */
#arabic_template .navbar{-webkit-box-shadow: 0 10px 10px -10px #ddd;-moz-box-shadow: 0 10px 10px -10px #ddd;box-shadow: 0 10px 10px -10px #ddd;background-color:#0e4e92;}
#arabic_template .navbar-brand{color: #0000c4;
    text-transform: uppercase;
    font-size: 1.4em;
    font-weight: 600;}

/* Instruction section CSS */
#arabic_template .instruction-title{font-weight:600;}	
	
/* Questions section CSS */
#arabic_template .questions_form, #arabic_template .instruction-content{padding:10px 20px; background:#ffffff;margin:20px 0;}
#arabic_template .questions_form .question:last-child{margin-bottom:0px;}

/* #arabic_template .question */
#arabic_template .questions_form .question .question-option-list{padding-left:30px;}
#arabic_template .questions_form .question .question-option-list .option{position: relative;margin-bottom: 10px;}
#arabic_template .questions_form .question .question-option-list .option .option-span{cursor: pointer;padding: 5px 10px;border: 2px solid transparent;display:inline-block;}
#arabic_template .questions_form .question.attempted .question-option-list .option .option-span,
#arabic_template .questions_form .question.attempted  .audio-icon:hover{cursor: default;}

#arabic_template .questions_form .question .audio-icon{margin-right: 10px;
    height: 38px;
    width: 35px;
    display: inline-flex;
    position: relative;
    z-index: 1;
    top: 9px;}
#arabic_template .questions_form .question .audio-icon:hover{cursor:pointer;}

#arabic_template .questions_form .question .pageAudioIcon{background:url("../images/audio_icon_pause.png") no-repeat;}
#arabic_template .questions_form .question .pageAudioIconPause{background:url("../images/audio_icon_play.png") no-repeat;}
#arabic_template .questions_form .question .pageTitleAudioIcon{background:url("../images/audio_q_icon_pause.png") no-repeat;}
#arabic_template .questions_form .question .pageTitleAudioIconPause{background:url("../images/audio_q_icon_play.png") no-repeat;}
#arabic_template .questions_form .question .pageAudioIcon, 
#arabic_template .questions_form .question .pageAudioIconPause,
#arabic_template .questions_form .question .pageTitleAudioIcon,
#arabic_template .questions_form .question .pageTitleAudioIconPause{background-size:contain;}

#arabic_template .questions_form .question .question-option-list .option .option-span.selected{border:2px solid #007bff;}
#arabic_template .questions_form .question.attempted .question-option-list .option .option-span.selected{border:2px solid transparent;}
#arabic_template .questions_form .question.completed .question-option-list .option{cursor:default;}
#arabic_template .questions_form .submit-btn-wrapper{padding:10px 0 15px 0;}
#arabic_template .questions_form .check_answers{background:#0e4e92; color:#fff;text-transform:capitalize;}
#arabic_template .questions_form .check_answers.disabled{cursor:default;}

#arabic_template .loading-btn-wrapper{padding:10px 0 15px 0;}
#arabic_template .loadingBtn{background:#0e4e92; color:#fff;text-transform:capitalize;}
#arabic_template .questions_form .restart-btn-wrapper{padding:10px 0 15px 0;}
#arabic_template .questions_form .restartBtn{background:#0e4e92; color:#fff;text-transform:capitalize;}
#arabic_template .questions_form .restartBtn.disabled{cursor:default;}
#arabic_template .showAnswerTickMark,#arabic_template .showAnswerCrossMark{position: absolute;top: 0;right: 40px;/*display:none;*/}

.correctTick::after {content:" ";background: url("../images/tikMark-small.png") no-repeat;position: relative;display: inline-block;height: 26px;width: 26px;background-size: contain;margin-left:15px;}
.incorrectTick::after {content:" ";background: url("../images/crossMark-small.png") no-repeat;position: relative;display: inline-block;height: 26px;width: 26px;background-size: contain;margin-left:15px;}
.correctTick, .incorrectTick{position:relative;}

#arabic_template .questions_form .question .btn.resize  {background:##0ea2c6;margin-left:10px;}

#arabic_template .footer{position: relative;bottom: 0;width: 100%;height: 60px;line-height: 60px;background: #f5f5f5;}
#arabic_template .copyright-text{color: #222;font-size: 0.85em;}
.check_answers, .restartBtn , .loadingBtn{font-size:1em;}
/* info btn CSS */
.info-content{border:1px solid #ddd; border-radius:4px;margin-top:10px;padding:15px;display:none; color:#fff;}
.info-content.explanation-box{background: #28a745;}
.info-content.reference-box{background: #007bff;}
.info-content.reference-box .reference-link{color:#fff; transition: all .4s ease;}
.info-content.reference-box .reference-link:hover{color:#000;}
.info-content p{line-height:1.1em; font-size:.8em; margin:0;}

#contentOfTimer {
    padding-top:6px;
    padding-bottom:6px;
    font-size:1.2em;
 position: -webkit-sticky; /* Safari */
  position: sticky;
  text-align:center;
  z-index: 100;
  background-color: #dfbedc;
  top: 0;
}
.title{
    color:#fff;
}

@media screen and (max-width: 1199px)  {

    .thePoem{
        padding-left: 0 !important;
    }

}

/* Tooltip btn CSS */
.tooltip-btn-wrapper{text-align:center;}
.tooltip-btn{width: 25px;height: 25px;}
.qTxt{font-family:'myFont-Bold' !important ;padding-bottom: 10px;margin-top:10px;font-size:1em;}
@media screen and (max-width: 991px)  {
    .thePoem{
        font-size:.7em !important;
    }
#q1Img{

    width:100% !important;
}
#theTextBox{
    width:90%;
    margin-left:5%;
    margin-right:5%;
}
.one{
    padding-right:20px !important;
}
}
 @media screen and (min-width: 600px)  {
        .mobile-break { display: none; }
    }
    @media screen and (max-width: 767px){
        .thePoem{
        font-size:.5em !important;
    }
           .two { order: 1; 
            text-align: center !important;
           }
    .one { order: 2 }
    #q1Img{

    width:90% !important;
}
    }

@media (max-width: 774px) {

        #footerImg{

            width: 18% !important;
        }
    }
@media (max-width: 575.98px) {
     
        #footerImg{

            width: 22% !important;
        }
@media (max-width: 497px) {
   .thePoem{
    font-size:.4em !important;
}
}        
@media (max-width: 450px) {
         .thePoem{
        font-size:8px !important;
    }
        #footerImg{

            width: 30% !important;
        }   
@media (max-width: 575.98px) {
     
    body{
    font-size: 1.1em;
    }
    .qTxt{font-size:1.2em;}
    #arabic_template .navbar h1{font-size:1.6em;}
    #arabic_template .questions_form .question .question-option-list .option .option-span{padding: 0.2em 0.2em;}
    .flex-xs-column-reverse{flex-direction: column-reverse;}*/
}
@media (max-width: 575.98px) {
	.flex-xs-column-reverse{flex-direction: column-reverse;}*/
}