#main {
    background: url('img/bg.jpg');
}

#progress {
    background-color: #487daf;
}

#help {
    position: absolute;
    width: auto;
    text-align: right;
    background-color: #487DAF;
    border-radius: 5px;
    z-index: 10;
    color: #FFF;
    display: none;
}

    #help:after {
        content: '';
        position: absolute;
        background-image: url('img/title.png');
        background-repeat: no-repeat;
    }

#title {
    right: -20px;
}

    #title:before {
        content: '';
        position: absolute;
        background: url(img/shadow.png) no-repeat center bottom;
        bottom: -10px;
        right: -45px;
        left: auto;
        z-index: 0;
        width: 216px;
        height: 15px;
    }

    #title:after {
        content: '';
        position: absolute;
        background: url(img/icon.png) no-repeat center bottom;
        width: 135px;
        height: 61px;
        background-size: 135px 61px;
        bottom: -11px;
        left: -15px;
        right: auto;
        z-index: 0;
    }

.en #title {
    right: -140px;
}

    .en #title:before {
        background: url(img/shadow_en.png) no-repeat center bottom;
        width: 216px;
        height: 18px;
        bottom: -18px;
        left: -33px;
    }

    .en #title:after {
        background: url(img/icon_en.png) no-repeat center bottom;
        width: 135px;
        height: 61px;
        background-size: 135px 61px;
        bottom: -20px;
        right: -15px;
        left: auto;
    }

#quiz {
    background: #fff;
    border-radius: 10px;
}

.q_header {
    background: #487DAF;
    color: #fff;
    text-align: right;
    direction: rtl;
    display:inline-block;
    border-radius: 8px;
}
.en .q_header {
    direction: ltr;
}
#main_img {
    border-radius: 8px;
    background: #fff;
    border: 3px solid #ddd;
}

.next {
    background-image: url(img/next_ar.png);
    background-repeat: no-repeat;
    background-color: #fff;
    border-radius: 8px;
    right: 110px;
    bottom: 4px;
    left: 0;
    margin: auto;
}

.prev {
    background-image: url(img/prev_ar.png);
    background-repeat: no-repeat;
    background-color: #fff;
    border-radius: 8px;
    left: 110px;
    bottom: 4px;
    right: 0;
    margin: auto;
}

.en .prev {
    right: 110px;
    left: 0;
}

.en .next {
    left: 110px;
    right: 0;
}

.true-false input {
    display: none;
}

.false {
    background-image: url(img/false.png);
    cursor: pointer;
    position: absolute;
}

.true {
    background-image: url(img/true.png);
    cursor: pointer;
    display: inline-block;
    position: absolute;
}

.complete-answers {
}

.conclusion {
    border-radius: 8px;
}

input.complete-area {
    background-color: transparent;
    border: none;
    border-bottom: 2px dotted #EBEBEB;
    text-align: center;
    max-width: 220px;
    width: 80px;
    padding: 5px;
}

.check {
    background-color: #487DAF;
}

.show {
    background-color: #E0871F;
}

.radio_false, .radio_true {
    position: absolute;
    width: 50px;
    height: 50px;
    background-size: 50px 50px;
    right: 425px;
    display: inline-block;
}
#intro_img {
    background-image: url('img/intro_ar.png');
}
.en #intro_img {
    background-image: url('img/intro_en.png');
}
@media (max-height: 780px) {
    .radio_false, .radio_true {
        left: -22px;
        right: auto;
    }
}
.true-false .radio_false, .true-false .radio_true {
    left: -12px;
    top: 155px;
}

.radio_false {
    background-image: url(img/wrong.png);
}

.radio_true {
    background-image: url(img/correct.png);
}

.button_container {
    text-align: center;
    position: relative;
}

.video-tab {
    margin-left: 10px;
    background-color: #487daf;
    color: #fff;
    padding: 0px 10px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-block;
}

    .video-tab:hover {
        background-color: #272E4A;
        color: #fff;
    }

.active_tab_icon {
    background-color: #272E4A;
    color: #fff;
}
/* style for en */
.en {
    direction: ltr;
}

    .en body {
        direction: ltr;
        font-family: cocon_en;
    }

    .en #title {
        right: -10px;
    }

        .en #title:before {
            background: url(img/shadow_en.png) no-repeat center bottom;
            width: 216px;
            height: 18px;
            bottom: -18px;
            left: -33px;
        }

        .en #title:after {
            background: url(img/icon_en.png) no-repeat center bottom;
            width: 135px;
            height: 61px;
            background-size: 135px 61px;
            bottom: -20px;
            right: -15px;
            left: auto;
        }

    .en .next {
        background-image: url(img/next.png);
        background-repeat: no-repeat;
    }

    .en .prev {
        background-image: url(img/prev.png);
        background-repeat: no-repeat;
    }
.en .true-false .radio_false, .en .true-false .radio_true {
    right: 15px;
    left: auto;
}
.en .single-choise .radio_false, .en .single-choise .radio_true {
    right: -22px;
}
.en .multiple-choise .radio_false, .en .multiple-choise .radio_true {
    right: -22px;
    left: auto;
}
label {
    cursor: pointer;
}

.target {
    border-radius: 10px;
    min-width: 50px;
    height: 50px;
    border: solid 1px #ccc;
    color: #4C86BA;
}

@media (min-height: 780px) {
    #help {
        left: 50px;
        bottom: 7px;
        max-height: 55px;
        padding: 5px 25px 5px 15px;
        line-height: 40px;
    }

        #help:after {
            width: 72px;
            height: 64px;
            top: -5px;
            right: -35px;
        }

    #quiz {
        right: 25px;
        bottom: 68px;
    }

    .q_header {
        right: 15px;
        top: -15px;
    }

    .q_container {
        top: 65px;
        right: 10px;
        width: 465px;
    }

    #main_img {
        top: 50px;
        left: 25px;
    }

    #navigation_bar {
    }

    .next {
    }

    .prev {
    }



    .main_quiz {
        right: 15px;
        top: 30px;
        text-align: right;
        direction: rtl;
    }

    .single-choise {
        color: #487EAF;
        padding: 5px;
        font-size: 24px;
        direction: rtl;
		margin: 0px 5px 0px 5px;
    }
    .single-choise label {
        padding-right: 10px;
    }

    .multiple-choise {
        color: #487EAF;
        padding: 5px;
        font-size: 24px;
        direction: rtl;
        margin: 5px;
    }
    .multiple-choise label {
        padding-right: 10px;
    }
    
    .conclusion {
        background-color: #F0F2F1;
        color: #343535;
        text-align: right;
        padding: 10px 10px 0px 0px;
        bottom: 25px;
    }

    .btn_container {
        bottom: -55px;
    }

    .button_container {
        text-align: center;
        top: 410px;
        position: absolute;
        width: 500px;
        left: -19px;
    }

    .video-tab {
        line-height: 45px;
        font-size: 24px;
        width: 135px;
    }

    .check, .show {
        color: #fff;
        border-radius: 5px;
        padding: 8px 3px 3px 3px;
        margin-right: 45px;
    }

    .false,.true {
        width: 55px;
        height: 52px;
        top: 138px;
    }
 .false {
        left: 265px;
    }
    .true {
        right: 265px;
    }
.act_false {
    background-image: url(img/act_false.png);
	 width: 63px;
     height: 61px;
}

.act_true {
    background-image: url(img/act_true.png);
	 width: 63px;
     height: 61px;
}
    .true-false label {
        padding: 20px 30px 0px 45px;
        display: inline-block;
    }

    .tru_fals {
        right: 10px;
        top: 135px;
        width: 85px;
        height: 85px;
        background-size: 85px 85px;
    }
    /* style for en */

    .en .q_header {
        left: 15px;
        top: -15px;
        right: auto;
        text-align: left;
    }

    .en #main_img {
        top: 50px;
        right: 25px;
        left: auto;
    }

    .en #navigation_bar {
    }

    .en .next {
    }

    .en .prev {
    }

    .en .q_container {
        top: 65px;
        left: 5px;
        width: 465px;
    }

    .en .main_quiz {
        left: 15px;
        top: 30px;
        text-align: left;
        direction: ltr;
    }

    .en .single-choise {
        padding: 5px;
        direction: ltr;
		margin-left: 22px;
    }
    .en .single-choise label {
        padding-left: 10px;
    }
    
    .en .multiple-choise {
        padding: 5px;
        direction: ltr;
		margin-left: 22px;
    }
    .en .multiple-choise label {
        padding-left: 10px;
    }

    .en .conclusion {
        text-align: left;
        padding: 5px 0px 0px 15px;
        direction:ltr;
    }

    .en .btn_container {
        left: 50px;
    }

    .en .check, .en .show {
        padding: 8px 3px 3px 3px;
        margin-right: 35px;
    }

    .en .true-false {
        padding: 20px 0px 5px 0px;
        text-align: center;
    }

        .en .true-false label {
            padding: 20px 30px 0px 45px;
        }
}

@media (max-height: 780px) {
    #help {
        left: 35px;
        bottom: 5px;
        max-height: 45px;
        padding: 5px 40px 5px 15px;
        max-width: 800px;
        font-size: 20px;
        line-height: 35px;
    }

        #help:after {
            width: 70px;
            height: 78px;
            top: -10px;
            right: -20px;
        }

    #title {
        right: -10px;
    }

        #title:before {
            bottom: -10px;
            right: -45px;
            left: auto;
        }

        #title:after {
            width: 110px;
            height: 45px;
            background-size: 110px 45px;
            bottom: -8px;
        }

    #quiz {
        right: 25px;
        bottom: 55px;
    }

    .q_header {
        right: 15px;
        text-align: right;
        top: -14px;
        
        direction: rtl;
    }

    #main_img {
        top: 10px;
        right: 430px;
    }

    #navigation_bar {
    }

    .true-false .radio_false, .true-false .radio_true {
        top: 90px;
    }

    .main_quiz {
        right: 15px;
        top: 30px;
        text-align: right;
        direction: rtl;
    }

    .single-choise {
        color: #487EAF;
        font-size: 20px;
        margin: 0px 10px 0px 10px;
        padding-right: 13px;
    }
    .single-choise label {
        padding-right: 10px;
    }
    
    .multiple-choise {
        color: #487EAF;
        font-size: 20px;
        margin: 10px;
        padding-right: 13px;
    }
    .multiple-choise label {
        padding-right: 10px;
    }

    .conclusion {
    font-size: 18px;
    background-color: #F0F2F1;
    color: #343535;
    text-align: right;
    padding: 0px 10px 0px 0px;
    direction: rtl;
    }

    .btn_container {
        bottom: -3px;
    }

    .button_container {
        text-align: center;
        top: 250px;
        position: absolute;
        width: 410px;
        left: -10px;
    }

    .video-tab {
        line-height: 40px;
        font-size: 16px;
        width: 105px;
    }

    .check, .show {
        color: #fff;
        border-radius: 5px;
        padding: 8px 3px 3px 3px;
        margin-right: 35px;
    }

    .false {
        width: 55px;
        height: 52px;
        top: 80px;
        left: 245px;
    }

    .target {
        height: 36px;
    }

    .true {
        width: 55px;
        height: 52px;
        top: 78px;
        right: 215px;
    }

    .tru_fals {
        right: 10px;
        top: 90px;
    }
.act_false {
    background-image: url(img/act_false.png);
	 width: 63px;
     height: 61px;
}

.act_true {
    background-image: url(img/act_true.png);
	 width: 63px;
     height: 61px;
}
    .ctru_fals {
        right: 75px;
    }
    /* style for en */
    .en #title {
        right: 10px;
    }

        .en #title:before {
            left: 2px;
            bottom: -13px;
            height: 13px;
            right: auto;
            width: 107px;
            background-size: 84px 15px;
        }

        .en #title:after {
            width: 110px;
            height: 45px;
            bottom: -14px;
            right: -15px;
            left: auto;
            background-size: 110px 45px;
        }

    #quiz {
        left: 25px;
        bottom: 55px;
        right: auto;
    }

    .en .q_header {
        left: 15px;
        top: -15px;
        text-align: left;
        direction: ltr;
        right:auto;
    }

    .en #main_img {
        right: auto;
        left: 430px;
    }

    .en #navigation_bar {
    }

    .en .next {
    }

    .en .prev {
    }

    .en .main_quiz {
        left: 15px;
        top: 30px;
        text-align: left;
        direction: ltr;
    }

    .en .single-choise {
        color: #487EAF;
        font-size: 20px;
        direction: ltr;
    }
    .en .single-choise label {
        padding-left: 10px;
    }

    .en .multiple-choise {
        color: #487EAF;
        font-size: 20px;
        direction: ltr;
    }
    .en .multiple-choise label {
        padding-left: 10px;
    }
    
    .en .conclusion {
        background-color: #F0F2F1;
        color: #343535;
        text-align: left;
        padding: 5px 0px 0px 10px;
        left: 10px;
        direction:ltr;
    }

    .en .btn_container {
        bottom: -3px;
        left: 45px;
    }

    .en .check, .en .show {
        color: #fff;
        border-radius: 5px;
        padding: 8px 3px 3px 3px;
        margin-right: 35px;
    }

    .en .true-false {
        color: #487EAF;
        padding: 10px 0px 5px 0px;
    }

        .en .true-false label {
            padding: 20px 30px 0px 45px;
            display: inline-block;
        }
    #intro_img {
      background-size: 360px;
    }
}