/* For tablets and desktops ...*/
@media only screen and (min-device-width: 768px) 
{
#mainheader {direction:rtl;display:block!important;clear:both;border-bottom: 1px solid #ccc;text-align: center;font-family: verdana;font-size: 25px;padding-top: 10px;padding-bottom: 5px;}
.question {direction:rtl;margin: 0 auto;text-align: right;padding-bottom: 10px;font-family: verdana;font-size: 18px;display:block}
.answer        {direction:rtl;text-align: right;color: #5b5b5b;padding-top: 10px;padding-bottom: 10px;font-family: verdana;font-size: 15px;padding-right: 20px;cursor: pointer;cursor: pointer;background-color: #fcfcfc;border: 1px solid #ccc;border-radius: 3px;margin-bottom: 10px;display:block;}
.answer_correct{direction:rtl;margin: 0 auto;text-align: right;color: #ffffff;padding-top: 10px;padding-bottom: 10px;font-family: verdana;font-size: 15px;padding-right: 20px;cursor: pointer;cursor: pointer;background-color:#3CB371; border: 1px solid #ccc;border-radius: 3px;margin-bottom: 10px;display:block;}
.answer_wrong  {direction:rtl;margin: 0 auto;text-align: right;color: #ffffff;padding-top: 10px;padding-bottom: 10px;font-family: verdana;font-size: 15px;padding-right: 20px;cursor: pointer;cursor: pointer;background-color:    red; border: 1px solid #ccc;border-radius: 3px;margin-bottom: 10px;display:block;}
.answer_imagediv {width: 30%;margin: 0 auto;padding-bottom: 5px;}
.answer_imagetxt {padding-bottom: 5px;text-align: center;}

}
/* Extra size devices */
@media only screen and (min-device-width : 481px) and (max-device-width :767px) 
{
#mainheader {direction:rtl;display:block!important;clear:both;background-color: #eee;border-bottom: 1px solid #ccc;text-align: center;font-family: verdana;font-size: 25px;padding-top: 10px;padding-bottom: 5px;}
.question {margin: 0 auto;text-align: right;padding-bottom: 10px;font-family: verdana;font-size: 18px;display:block;}
.answer        {direction:rtl;margin: 0 auto;text-align: right;color: #071018;padding-top: 10px;padding-bottom: 10px;font-family: verdana;font-size: 15px;padding-right: 20px;cursor: pointer;cursor: pointer;background-color: #fcfcfc;border: 1px solid #ccc;border-radius: 3px;margin-bottom: 10px;display:block;}
.answer_correct{direction:rtl;margin: 0 auto;text-align: right;color: #ffffff;padding-top: 10px;padding-bottom: 10px;font-family: verdana;font-size: 15px;padding-right: 20px;cursor: pointer;cursor: pointer;background-color: #3CB371;border: 1px solid #ccc;border-radius: 3px;margin-bottom: 10px;display:block;}
.answer_wrong  {direction:rtl;margin: 0 auto;text-align: right;color: #ffffff;padding-top: 10px;padding-bottom: 10px;font-family: verdana;font-size: 15px;padding-right: 20px;cursor: pointer;cursor: pointer;background-color: red;border: 1px solid #ccc;border-radius: 3px;margin-bottom: 10px;display:block;}
.answer_imagediv {width: 100%;margin: 0 auto;padding-bottom: 5px;}
.answer_imagetxt {padding-bottom: 5px;text-align: center;}

}
/*Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) 
{
#mainheader {direction:rtl;display:block!important;clear:both;background-color: #eee;border-bottom: 1px solid #ccc;text-align: center;font-family: verdana;font-size: 25px;padding-top: 10px;padding-bottom: 5px;}
.question {direction:rtl;margin: 0 auto;text-align: right;padding-bottom: 10px;font-family: verdana;font-size: 18px;display:block;}
.answer        {direction:rtl;margin: 0 auto;text-align: right;color: #071018;padding-top: 10px;padding-bottom: 10px;font-family: verdana;font-size: 15px;padding-right: 20px;cursor: pointer;background-color: #fcfcfc;border: 1px solid #ccc;border-radius: 3px;margin-bottom: 10px;display:block;}
.answer_correct{direction:rtl;margin: 0 auto;text-align: right;color: #ffffff;padding-top: 10px;padding-bottom: 10px;font-family: verdana;font-size: 15px;padding-right: 20px;cursor: pointer;background-color: #3CB371;border: 1px solid #ccc;border-radius: 3px;margin-bottom: 10px;display:block;}
.answer_wrong  {direction:rtl;margin: 0 auto;text-align: right;color: #ffffff;padding-top: 10px;padding-bottom: 10px;font-family: verdana;font-size: 15px;padding-right: 20px;cursor: pointer;background-color: red;    border: 1px solid #ccc;border-radius: 3px;margin-bottom: 10px;display:block;}
.answer_imagediv {margin: 0 auto;width: 100%;margin: 0 auto;padding-bottom: 5px;}
.answer_imagetxt {margin: 0 auto;padding-bottom: 5px;text-align: center;}

}

.quizcontainer {display:block!important;clear:both;width: 100%;margin: 0 auto;background-color: #eee;text-align: center;display:block!important;clear:both;height:auto;min-height:500px;}	
#div_splash {width: 100%;margin: 0 auto; padding-top: 5px;clear:both;}
button {margin-top: 5px;}

.item {padding-top: 5px;width:95%;display:block;margin:0 auto}
.circle {position: relative;font-size: 40px;color: #071018;text-align: center;margin: 0 auto;clear:both;display:none;}
.circle_timeout {position: relative;margin: 0 auto;font-size: 40px;color: #071018;text-align: center;margin: 0 auto;}

.btn-primary {background: #5c2d91;width: 100px;color: #ffffff;font-family: verdana;}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary { background: #a862ea;}

.checkbox input[type=checkbox], .checkbox-inline input[type=checkbox] {margin-left: 40px;margin-left: 0;}

#div_thankyounote{display:none;margin:0 auto;width:100%}
.responsive {    max-width: 100%;    height: auto;}

.gradeicon1{    height: 150px;    width: 150px;    background-color: #FF0000;    border-radius: 50%;    display: block;    color:#fff;margin:0 auto}
.gradeicon2{    height: 150px;    width: 150px;    background-color: #FFA500;    border-radius: 50%;    display: block;    color:#fff;margin:0 auto}
.gradeicon3{    height: 150px;    width: 150px;    background-color: #FFFF00;    border-radius: 50%;    display: block;    color:#000;margin:0 auto}
.gradeicon4{    height: 150px;    width: 150px;    background-color: #3CB371;    border-radius: 50%;    display: block;    color:#fff;margin:0 auto}

#source{display:block!important;clear:both;width:100%}
#circletext{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.quizfooter{text-align:left;width:95%;display:block!important;clear:both;margin:0 auto}
#iquiz_err{color:red;display:block;clear:both}
.txt{margin: 0 auto;font-weight:bold;font-size:25px;padding-top:20px}

.answer_description{font-size:15px;background-color:gold;text-align:right;height:100%;width:100%;padding-left:20px;padding-right:20px;direction:rtl}
.quiz_table{display:none}


.fieldname{font-weight:bold;display:block;text-align:left !important}
.hr{color:#5b5b5b !important;border-top: 1px solid #A0A0A0;margin:0;margin-top:10px}

.form-control {
    width: 95%;
    float: right;
    height: 40px;
    margin-bottom:10px;
}
.err {color: red;font-size:20px}