@media(min-height:780px) {
    body {
        line-height: 40px
    }
}
@media(max-height:779px) {
    body {
        line-height: 30px
    }
}
html.en body {
    direction: ltr;
    font-family: cocon_en !important
}
#main {
    background: url('img/FIQ-bg.jpg');
	background-color: #fff;
}

.SIQ {
    background: url('img/SIQ-bg.jpg') !important;
	background-color: #fff !important;
}

.submit
{
	background-color: rgb( 146, 189, 55 ) !important;
}

.question-header {
    position: relative;
    background-color: transparent;
    color: rgb( 215, 52, 52);
    border-radius: 10px;
	font-weight: bold;
}
.question-header:before {
    content: '';
    position: absolute;
    /*background: url(img/shadow.png) no-repeat center bottom;*/
    height: 11px;
    bottom: -11px;
    z-index: 0
}
/*html.en .question-header:before{background:url(img/shadow_en.png) no-repeat center bottom}*/

.question-header:after {
    content: '';
    position: absolute;
    /*background: url(img/icon.png) no-repeat center bottom;*/
    width: 135px
}
/*html.en .question-header:after {
    background: url(img/icon_en.png) no-repeat center bottom
}*/
.drag-drop-answer-area,
.complete-answers,
.match-answer-area,
.mcq-answer,
.true-false-answers,
.open-question-area,
.open-question-area-vertical-img,
.open-question-area-horizontal-img,
.reorder-images-answer-area,
.pickup-different-area,
.pickup-img-area,
.highlight-object-answer-area {
    width: 95%;
    margin: 0 auto;
    background-color: #fff;
    box-shadow: 0 0 1px #333;
    border-radius: 8px
}
.helpp {
    top: 2%;
    background-image: url(img/help/help.png);
    position: absolute;
    left: 94%;
    width: 44px;
    height: 42px;
    cursor: pointer
}
.en .helpp {
    left: 1%
}
.help_pop_up {
    background-size: 900px 500px;
    left: 0;
    top: 0;
    z-index: 1000;
    width: 100%;
    height: 770px;
    position: absolute;
    background-repeat: no-repeat;
    display: none;
    cursor: pointer
}
.help_pop_up_complete_comp {
    background-image: url(img/help/help_complete_comp_ar.jpg)
}
.en .help_pop_up_complete_comp {
    background-image: url(img/help/help_complete_comp_en.jpg)
}
.help_pop_up_complete_comp_img {
    background-image: url(img/help/help_complete_comp_img_ar.jpg)
}
.en .help_pop_up_complete_comp_img {
    background-image: url(img/help/help_complete_comp_img_en.jpg)
}
.help_pop_up_complete_drag {
    background-image: url(img/help/help_complete_drag_ar.jpg)
}
.en .help_pop_up_complete_drag {
    background-image: url(img/help/help_complete_drag_en.jpg)
}
.help_pop_up_complete_drag-image {
    background-image: url(img/help/help_complete_drag_imag_ar.jpg)
}
.en .help_pop_up_complete_drag-image {
    background-image: url(img/help/help_complete_drag_imag_en.jpg)
}
.help_pop_up_complete_recorrect {
    background-image: url(img/help/help_complete_recorrect_ar.jpg)
}
.en .help_pop_up_complete_recorrect {
    background-image: url(img/help/help_complete_recorrect_en.jpg)
}
.help_pop_up_complete_time {
    background-image: url(img/help/help_complete_time_ar.jpg)
}
.en .help_pop_up_complete_time {
    background-image: url(img/help/help_complete_time_en.jpg)
}
.help_pop_up_dragarop {
    background-image: url(img/help/help_dragarop_ar.jpg)
}
.en.help_pop_up_dragarop {
    background-image: url(img/help/help_dragarop_en.jpg)
}
.help_pop_up_venn {
    background-image: url(img/help/help_venn_ar.jpg)
}
.en.help_pop_up_venn {
    background-image: url(img/help/help_venn_en.jpg)
}
.help_pop_up_truefalse {
    background-image: url(img/help/help_truefalse_ar.jpg)
}
.en.help_pop_up_truefalse {
    background-image: url(img/help/help_truefalse_en.jpg)
}
.help_pop_up_table_comp {
    background-image: url(img/help/help_table_comp_ar.jpg)
}
.en.help_pop_up_table_comp {
    background-image: url(img/help/help_table_comp_en.jpg)
}
.help_pop_up_table_drag {
    background-image: url(img/help/help_table_drag_ar.jpg)
}
.en.help_pop_up_table_drag {
    background-image: url(img/help/help_table_drag_en.jpg)
}
.help_pop_up_reorderimage {
    background-image: url(img/help/help_reorderimage_ar.jpg)
}
.en.help_pop_up_reorderimage {
    background-image: url(img/help/help_reorderimage_en.jpg)
}
.help_pop_up_pickquestion {
    background-image: url(img/help/help_pickquestion_ar.jpg)
}
.en.help_pop_up_pickquestion {
    background-image: url(img/help/help_pickquestion_en.jpg)
}
.help_pop_up_pickimage {
    background-image: url(img/help/help_pickimage_ar.jpg)
}
.en.help_pop_up_pickimage {
    background-image: url(img/help/help_pickimage_en.jpg)
}
.help_pop_up_mc {
    background-image: url(img/help/help_mc_ar.jpg)
}
.en.help_pop_up_mc {
    background-image: url(img/help/help_mc_en.jpg)
}
.help_pop_up_open {
    background-image: url(img/help/help_open_ar.jpg)
}
.en.help_pop_up_open {
    background-image: url(img/help/help_open_en.jpg)
}
.help_pop_up_open_img {
    background-image: url(img/help/help_open_img_ar.jpg)
}
.en .help_pop_up_open_img {
    background-image: url(img/help/help_open_img_en.jpg)
}
.help_pop_up_hotspot {
    background-image: url(img/help/help_hotspot_ar.jpg)
}
.en.help_pop_up_hotspot {
    background-image: url(img/help/help_hotspot_en.jpg)
}
.help_pop_up_highlight {
    background-image: url(img/help/help_highlight_ar.jpg)
}
.en .help_pop_up_highlight {
    background-image: url(img/help/help_highlight_en.jpg)
}
.help_pop_up_match_horizontal {
    background-image: url(img/help/help_match_horizontal_ar.jpg)
}
.en .help_pop_up_match_horizontal {
    background-image: url(img/help/help_match_horizontal_en.jpg)
}
.help_pop_up_match_vertical {
    background-image: url(img/help/help_match_vertical_ar.jpg)
}
.en .help_pop_up_match_vertical {
    background-image: url(img/help/help_match_vertical_en.jpg)
}
.help_pop_up_match_3 {
    background-image: url(img/help/help_match_3_ar.jpg)
}
.en .help_pop_up_match_3 {
    background-image: url(img/help/help_match_3_en.jpg)
}
.help_pop_up_mcq_text {
    background-image: url(img/help/help_mcq_text_ar.jpg)
}
.en .help_pop_up_mcq_text {
    background-image: url(img/help/help_mcq_text_en.jpg)
}
.help_pop_up_mcq_img {
    background-image: url(img/help/help_mcq_img_ar.jpg)
}
.en .help_pop_up_mcq_img {
    background-image: url(img/help/help_mcq_img_en.jpg)
}
.help_pop_up_checkBox {
    background-image: url(img/help/help_pop_up_checkBox_ar.jpg)
}
.en .help_pop_up_checkBox {
    background-image: url(img/help/help_pop_up_checkBox_en.jpg)
}
.pickup-different-area {
    margin-top: 5%;
    height: 490px
}
.pickup-question-title {
    position: absolute;
    top: -83px;
    right: 5px;
    background-color: #487daf;
    line-height: 50px;
    padding: 0 20px 0 20px;
    border-radius: 10px;
    color: white;
    text-align: right;
    min-width: 150px;
    max-width: 90%
}
.pickupimg-question-title {
    position: absolute;
    top: -55px;
    right: 13px;
    background-color: #487daf;
    line-height: 50px;
    padding: 0 20px 0 20px;
    border-radius: 10px;
    color: white;
    text-align: right;
    min-width: 150px;
    max-width: 90%
}
.en .pickup-question-title {
    right: auto;
    left: -5px;
    text-align: left
}
.en .pickupimg-question-title {
    left: 10px;
    right: auto
}
.pickup_element {
    background-color: #f8f8f8;
    border: 1px #dcdcdc solid;
    cursor: pointer
}
.pickup_element:hover {
    background-color: #e2f6f7
}
.pickup_element_circle {
    background-color: #e2f6f7
}
.pickup_element_circle:after {
    content: '';
    display: block;
    position: relative;
    /*width: 122px;
    height: 82px;*/
	width: 182px;
    height: 96px;
    background: url(img/circle.png) no-repeat center bottom;
    top: -63px;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 0
}
.pickup-element-disabled {
    pointer-events: none
}
.pickup-element-disabled:hover {
    background-color: #f8f8f8
}
.pickup-dash {
    display: inline-block;
    width: 20px;
    height: 2px;
    margin: 0 5px 0 5px;
    background-color: #dcdcdc
}
.table-complete-element {
    background-color: white;
    border: 1px #dcdcdc solid
}
.table-complete-element-even {
    background-color: #efefef
}
.table-drag-element-even {
    background-color: #d6d6d6
}
.table-complete-element input,
.first-node input,
.second-node input {
    width: 100%;
    position: relative;
   /* top: -15px;
    line-height: 49px;*/
    margin: auto;
	}
	
.first-node input,
.second-node input {
    color: white
}
.table-complete-correct-answer {
    color: green
}
.table-complete-wrong-answer {
    color: red
}
.first-node input,
.second-node input {
    width: 100px;
    border-color: white
}
.first-node,
.second-node,
.first-node-drag,
.second-node-drag {
    background: #31577b
}
.first-node:after,
.second-node:after {
    content: '';
    position: absolute;
    width: 88px;
    height: 197px;
    bottom: -30px;
    z-index: 0
}
.first-node:after {
    background: url(img/table-complete-arrowr.png) no-repeat center bottom;
    left: -22px
}
.second-node:after {
    width: 86px;
    background: url(img/table-complete-arrowlar.png) no-repeat center bottom;
    bottom: -32px;
    right: -20px
}
.en .first-node:after {
    background: url(img/table-complete-arrowl.png) no-repeat center bottom;
    left: 75px
}
.en .second-node:after {
    background: url(img/table-complete-arrowrl.png) no-repeat center bottom;
    right: 79px
}
.table-drag-distelement {
    color: transparent
}

 .en .mcq-answers{
        direction:ltr;
    }
    .mcq-answers{
        direction:rtl;
    }
@media(max-height:780px) {
    .table-complete-element input.complete-area {
        width: 100%
    }

   /* .en  .table-complete-element input.complete-area {
      line-height: 47px;
    }*/
    .first-node:after,
    .second-node:after {
        width: 70px;
        height: 160px;
        bottom: -30px
    }
    .first-node:after,
    .second-node:after {
        background: url(img/table-complete-arrowrsmall.png) no-repeat center bottom;
        left: -15px;
        right: auto;
        bottom: -34px
    }
    .second-node:after {
        height: 160px;
        background: url(img/table-complete-arrowrsmallr.png) no-repeat center bottom;
        bottom: -32px;
        left: 79px
    }
    .en .first-node:after {
        background: url(img/table-complete-arrowlsmall.png) no-repeat center bottom
    }
    .en .second-node:after {
        background-size: 70px 160px;
        height: 160px;
        background: url(img/table-complete-arrowlsmallr.png) no-repeat center bottom;
        bottom: -32px;
        left: -25px
    }
    .first-node input.complete-area,
    .second-node input.complete-area {
        width: 70px
    }
}
.recorrect {
    margin: 5px;
    color: red;
    text-decoration: underline
}
.timeline:after {
    background-color: #243e55
}
.timeline input.complete-area,
.complete-area_label {
    border: 1px solid #2c455b;
    border-radius: 5px
}
.timeline_span:after {
    background: url('img/timeline.png');
    background-repeat: no-repeat
}
.element {
    background-color: #85c5c4;
    border-radius: 10px;
    color: #fff
}
.element:hover {
    background-color: #eb8c38;
    color: #fff
}
.dimt_icon {
    pointer-events: none
}
.draggable {
    z-index: 999;
    cursor: pointer
}
#venn_shapes {
    right: 4.5%;
    overflow: hidden;
    border-radius: 5px
}
.shapes {
    padding-top: 30px
}
.intersection_container,
.differnt_container {
    position: absolute;
    top: 18%;
    right: 9.3%;
    width: 362px;
    height: 220px
}
.intersection_container {
    background: url(img/intersection.png);
    background-repeat: no-repeat;
    width: 395px;
    height: 258px;
    top: 9%;
    right: 7%
}
.differnt_container {
    top: 12%;
    right: -5.7%;
    width: 482px;
    height: 240px
}
.subset_container {
    position: absolute;
    top: 12%;
    right: 33%;
    width: 234px;
    height: 240px
}
.intersection_container #left,
.intersection_container #right,
#intersectionn {
    background-color: rgba(78, 82, 11, 0);
    position: absolute;
    z-index: 100
}
.intersection_container #left {
    top: 12%;
    height: 196px;
    width: 24%;
    z-index: 100;
    left: 10%
}
.intersection_container #right {
    top: 12%;
    height: 196px;
    width: 25%;
    right: 6%
}
#intersectionn {
    top: 22%;
    height: 159px;
    width: 19%;
    left: 42.5%
}
.differnt_container #left,
.differnt_container #right {
    position: absolute;
    top: 5%;
    height: 198px;
    width: 205px;
    z-index: 100;
    left: 5px;
    border-radius: 50%
}
.differnt_container #left {
    background-color: #dfdfdf;
    left: 18px
}
.differnt_container #right {
    background-color: #85c5c4;
    right: 36px
}
.subset_container #left,
.subset_container #right {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #85c5c4;
    width: 234px;
    height: 234px;
    border-radius: 50%
}
.subset_container #intersectionn {
    position: absolute;
    top: 19%;
    left: 40%;
    background-color: #dfdfdf;
    width: 140px;
    height: 140px;
    border-radius: 50%
}
.subset_container #left .dropped_element,
.subset_container #right .dropped_element {
    margin-right: 85px;
    padding-top: 5px
}
.groub_name {
    font-weight: bold;
    color: #173e5f;
    text-align: center
}
.en #venn_shapes {
    right: auto;
    left: 3%
}
.en .differnt_container #right {
    right: auto;
    left: 246px
}
@media(max-height:780px) {
    .intersection_container, .differnt_container {
        top: 5%;
        right: -12.7%;
        background-size: 296px 180px;
        background-repeat: no-repeat
    }
    .intersection_container {
        background-size: 278px 180px;
        right: -24%
    }
    .intersection_container #left {
        top: 5%;
        height: 162px;
        width: 18%;
        left: 6%
    }
    .intersection_container #right {
        top: 5%;
        height: 160px;
        width: 18%;
        right: 35%
    }
    #intersectionn {
        top: 16%;
        height: 100px;
        width: 13%;
        left: 29%
    }
    .differnt_container #left,
    .differnt_container #right {
        top: 6%;
        height: 160px;
        width: 160px;
        left: 5px
    }
    .differnt_container #left {
        left: 100px
    }
    .differnt_container #right {
        right: 53px
    }
    .subset_container {
        top: -1%;
        right: 32%;
        width: 234px;
        height: 197px
    }
    .subset_container #left,
    .subset_container #right {
        top: 11px;
        left: 40px;
        width: 180px;
        height: 180px
    }
    .subset_container #intersectionn {
        top: 21%;
        left: 42.6%;
        width: 120px;
        height: 120px
    }
    .en #title:before {
        bottom: -22px;
        left: 6px;
        width: 143px;
        height: 22px
    }
    .en #title:after {
        bottom: -9px;
        right: -56px;
        background-size: 110px 45px
    }
    .en #help {
        left: 53px
    }
    .en #help:after {
        left: -32px
    }
    .en .differnt_container #right {
        right: 55px;
        left: auto
    }
}
@media(min-height:780px) {
    .question-header {
        height: 65px;
        line-height: 60px;
        margin: 20px auto;
        font-size: 30px;
        padding: 0 40px;
        margin-bottom: 25px;
        min-width: 705px
    }
    .question-header:before {
        width: 116px;
        right: 0
    }
    .question-header:after {
        height: 61px;
        bottom: -11px;
        left: -35px;
        z-index: 0
    }
    html.en .question-header:before {
        left: 0;
        right: auto
    }
    html.en .question-header:after {
        left: auto;
        right: -35px
    }
    .drag-drop-answer-area,
    .complete-answers,
    .match-answer-area,
    .mcq-answer,
    .true-false-answers,
    .open-question-area,
    .open-question-area-vertical-img,
    .open-question-area-horizontal-img,
    .reorder-images-answer-area,
    .highlight-object-answer-area {
        height: 505px
    }
}
@media(max-height:779px) {
    .question-header {
        height: 50px;
        line-height: 45px;
        margin: 15px auto;
        font-size: 25px;
        padding: 0 30px;
        margin-bottom: 15px;
        min-width: 575px
    }
    .question-header:before {
        width: 90px;
        right: 10px
    }
    .question-header:after {
        background-size: 105px 50px !important;
        height: 65px;
        bottom: -9px;
        left: -40px;
        z-index: 0
    }
    html.en .question-header:before {
        left: 10px;
        right: auto
    }
    html.en .question-header:after {
        left: auto;
        right: -40px
    }
    .drag-drop-answer-area,
    .complete-answers,
    .match-answer-area,
    .mcq-answer,
    .true-false-answers,
    .open-question-area,
    .open-question-area-vertical-img,
    .open-question-area-horizontal-img,
    .reorder-images-answer-area,
    .highlight-object-answer-area {
        height: 320px
    }
    .pickup-different-area {
        height: 295px
    }
    .pickup_element_circle:after {
        /*background-image: url('img/smallcircle.png');*/
		background-image: url('img/large-circle.png');
        top: -55px
    }
    .pickup-question-title {
        top: -43px;
        line-height: 45px
    }
    .pickup-dash {
        width: 14px
    }
    .pickupimg-question-title {
        top: -56px;
        line-height: 45px
    }
}
.ui-tabs .ui-tabs-nav li {
    border-radius: 8px
}
html.en .ui-tabs .ui-tabs-nav li {
    float: left
}
html.en .ui-tabs {
    text-align: left
}
.ui-tabs .ui-tabs-nav li a {
    border-radius: 8px;
    background-color: #fff;
    color: #29243a !important;
    box-shadow: 0 0 1px #333
}
.ui-tabs .ui-tabs-active.ui-state-active a {
    /*background-color: #3a87fa !important;
    color: #fff !important*/
	background-color: #f5f5f5 !important;
    color: #0b0b0b !important;
}
.ui-tabs .ui-tabs-nav .ui-state-disabled a {
    /*background-color: #c6c6c6 !important*/
	background-color: #fff !important
}
#exam_pages {
    background-color: #ffffff;
    border-radius: 8px;
    color: #000000;
    /* border: 1px #a39e9e solid; */
    box-shadow: 0 0 1px #333;
    font-weight: bold;
}
.control-area span {
    background-color: #3a87fa;
    float: none;
    border-radius: 8px
}
span.skip-question,
span.show-correct-answers {
    display: inline-block
}

span.skip-question
{
	background-color: rgb( 225, 140, 55 );
}

span.show-correct-answers {
     background-color: rgb( 0, 196, 180 );
}

.correct {
    background-color: #4ad4df !important
}
.wrong {
    background-color: #1f253d !important
}
.td-true-false-wrong,
.td-true-false-correct {
    display: inline-block
}
.mcq-answers .answer {
    color: #373737;
    background: #fff !important
}
.complete-sentence {
    text-align: right
}
html.en .complete-sentence {
    text-align: left
}
#exam-report {
    border-radius: 0
}
#exam-report-footer {
    border-top: 0;
    background-color: #ed2b60;
    color: #fff
}
.drag-drop-destination-list {
    border: 0;
    background: 0;
    border-radius: 0;
    margin: 0
}
.drag-drop .destination {
    border-radius: 0;
    border: 0;
    background-color: #fff
}
.drag-drop .destination-text {
    background-color: #fff;
    color: #373737;
    border-radius: 0;
    right: 0
}
.control-area {
    position: absolute;
    text-align: center;
    display: inline-block;
    width: 100%
}
.drag-drop .source {
    background: #fcfcfc;
    color: #373737;
    border-radius: 0;
    border: 0
}
.exam-report-header-item {
    background-color: #ddd
}
.exam-report-cell:nth-child(odd) {
    background: #fff !important
}
.exam-report-cell:nth-child(even) {
    background: #e2e2e2 !important
}
.exam-report-cell:nth-child(6n+2) {
    background: #fff !important
}
.exam-report-cell:nth-child(6n+5) {
    background: #e2e2e2 !important
}
.td-true-false-correct input[type="radio"]:checked+label span {
    background-image: url(img/1-B.png);
    background-color: #eb8c38
}
.td-true-false-correct input[type="radio"]+label span {
    background-image: url(img/1-B.png);
    background-color: #6f6e6f
}
.td-true-false-wrong input[type="radio"]+label span {
    background-image: url(img/2-B.png);
    background-color: #6f6e6f
}
.td-true-false-wrong input[type="radio"]:checked+label span {
    background-image: url(img/2-B.png);
    background-color: #eb8c38
}
.correct {
    background: url(../../img/happy.png) right center no-repeat #3a87fa !important;
    padding-right: 64px !important
}
.wrong {
    background: url(../../img/sad.png) right center no-repeat #1d2120 !important;
    padding-right: 64px !important
}
html.en .correct {
    background: url(../../img/happy.png) left center no-repeat #3a87fa !important;
    padding-left: 64px !important;
    padding-right: 10px !important
}
html.en .wrong {
    background: url(../../img/sad.png) left center no-repeat #1d2120 !important;
    padding-left: 64px !important;
    padding-right: 10px !important
}
@media(min-height:780px) {
    
    #exam_pages {
        right: 260px !important;
        bottom: 15px !important
    }
    html.en #exam_pages {
        right: auto !important;
        left: 280px !important
    }
    .control-area span {
        padding: 0 30px
    }
    .td-true-false-wrong,
    .td-true-false-correct {
        width: 70px
    }
    .complete-sentence {
        padding: 1.7%
    }
    .drag-drop-destination-list {
        min-height: 183px
    }
    .drag-drop .destination-text {
        width: 455px
    }
    .ui-tabs .ui-tabs-nav {
        right: 380px !important;
        bottom: 15px !important
    }
    html.en .ui-tabs .ui-tabs-nav {
        right: auto !important;
        left: 395px !important
    }
    .control-area {
        bottom: 75px
    }
    .mcq-answers {
        height: 505px
    }
    .mcq-answers_with_img {
        height: 418px;
        top: 7%
    }
    .mcq-img img {
        width: 550px;
        height: 485px
    }
    .exam-report-cell {
        width: 270px
    }
}
@media(max-height:779px) {
    .en .mcq-answers{
        direction:ltr;
    }
    .mcq-answers{
        direction:rtl;
    }
    #exam_pages {
        right: 205px !important;
        bottom: 10px !important
    }
    html.en #exam_pages {
        right: auto !important;
        left: 215px !important
    }
    .control-area span {
        padding: 0 25px;
        min-width: 70px
    }
    .td-true-false-wrong,
    .td-true-false-correct {
        width: 55px
    }
    .complete-sentence {
        padding: 1.7%
    }
    .drag-drop-destination-list {
        min-height: 140px
    }
    .drag-drop .destination-text {
        width: 316px
    }
    .ui-tabs .ui-tabs-nav {
        right: 290px !important;
        bottom: 10px !important
    }
    html.en .ui-tabs .ui-tabs-nav {
        right: auto !important;
        left: 290px !important
    }
    .control-area {
        bottom: 50px
    }
    .mcq-title {
        height: 296px
    }
    .mcq-img img {
      /*  width: 347px;
        height: 306px;*/
		width: 100%;
        height: 100%;
    }
    .mcq-answers {
        height: 320px
    }
    .mcq-answers_with_img {
        height: 291px;
        top: 0%;
		/*top: 4%*/
    }
    .exam-report-cell {
        width: 190px
    }
}
.drag-drop-answer-area {
    background-color: #ddd
}
.destination .source {
    box-shadow: 0 0 1px rgba(0, 0, 0, .5)
}
.num-of-columns3 #column-num2 .join-point-dots {
    background-color: #eb8c38
}
.active-join-point-dots {
    background-color: #3a87fa !important
}