<?php 
/**
 * v3.1.0
 * status: completed
 */


class PdfQuiz {
    /**
     * configs
     */
    public $student_id              = null;
    public $result_id               = '';
    public $resume                  = false;
    public $result                  = false;
    public $solution                = false;
    public $session                 = [];
    public $user_data               = null;
    public $attempt_url             = '';
    /**
     * Basics
     */
    public $_id                     = '';
    public $post_id                 = null;
    public $quiz                    = [];
    public $category                = '';
    public $quiz_config             = null;
    public $question_paper_pdf      = '';
    public $solution_paper_pdf      = '';
    
    
    public $seconds                 = 60;
    public $default                 = 3600;
    public $_q                      = [];
    public static $questions_html   = '';
    public static $pallete          = '';
    public static $rq_c             = 0;
    public static $question_qt1      = [];

    
    public function __construct($params = []) {
        $params = (object) $params;
        # config params
        $this->resume       = isset($params->resume) ? (bool) $params->resume : false;
        $this->result       = isset($params->result) ? (bool) $params->result : false;
        $this->session      = isset($params->session)? (object) $params->session : [];
        $this->user_data    = isset($params->user_data)? (object) $params->user_data : null;
        $this->result_id    = isset($params->result_id)? (int) $params->result_id : null;  
        $this->_q           = isset($params->_q)? (object) $params->_q : (object) [];
        $this->attempt_url  = isset($params->attempt_url)? (string) $params->attempt_url : '';
        $this->student_id   = isset($params->student_id)? (int) $params->student_id : null;
        # basic params
        $this->post_id      = isset($params->post_id) ? $params->post_id : null;
        $this->_id          = isset($params->_id) ? (string) $params->_id : '';
        $this->category     = isset($params->category) ? (string) $params->category : '';
        $this->quiz         = isset($params->quiz) ? (object) $params->quiz : (object) [];
        $time               = isset($this->quiz->time)? (object) $this->quiz->time : null;
        $quiz_settings      = isset($this->quiz->settings)? (object) $this->quiz->settings : null;
        # get pdfQuiz config
        $this->quiz_config        = isset($quiz_settings->proQyzPdfQuiz)? (object) $quiz_settings->proQyzPdfQuiz : null;

        $pdfQuestion                = isset($this->quiz_config->quiz)? (object) $this->quiz_config->quiz : null;
        $pdfSolution                = isset($this->quiz_config->solution)? (object) $this->quiz_config->solution : null;
        $this->question_paper_pdf   = isset($pdfQuestion->url)? (string) $pdfQuestion->url : '';
        $this->solution_paper_pdf   = isset($pdfSolution->url)? (string) $pdfSolution->url : '';
        
        if($time !== null){
            $minuts = isset($time->mm)? (int) $time->mm : 60;
            $this->default = $minuts * 60;
            if($this->default <= 0){
                $this->default = 60 * 60;
            }
        }

        if( $this->resume ) {
            $this->seconds      = isset($params->seconds)? (int) $params->seconds : $this->default;
        } else if( $this->result ) {
            $this->seconds      = isset($params->seconds)? (int) $params->seconds : $this->default;
        } else {
            $this->seconds      = $this->default;
        }




    }  

    /**
     * changes @1.2.1.2
     */
    public function get_pdfQuiz_styles(){
        $site_url = site_url();
        ob_start(); ?>

        <?php if( $this->result ){ ?>
            <style>
                body.pdf-quiz-test {margin: 0;padding: 0; }
                .sidebar__content {
                    bottom: 3px !important;!i;!;
                }

                .sidebar__footer {
                    display: none !important;
                }

                li.pdf-quiz__option.-wrong, li.pdf-quiz__float-option.-wrong {
                    color: #721c24;
                    background-color: #f8d7da;
                    border-color: #f5c6cb;
                }

                li.pdf-quiz__option.-correct-answer, li.pdf-quiz__float-option.-correct-answer {
                    border-color: #c3e6cb;
                    border:3px dashed #c3e6cb;
                    color: #23c648; 
                }

                li.pdf-quiz__option.-correct, li.pdf-quiz__float-option.-correct{
                    color: #155724;
                    background-color: #d4edda;
                }

                .pdf-quiz__question-number.-attempted.-wrong {
                    /*color: #721c24;
                    background-color: #f8d7da; */
                    border-color: #f5c6cb;
                }

                .pdf-quiz__question-number.-attempted.-correct {
                    border-color: #c3e6cb;
                    /*border:1px solid #c3e6cb;
                    color: #23c648; 
                    background-color: #d4edda;*/
                }
                
                li.pdf-quiz__float-question.-wrong {
                    color: #721c24;
                    background-color: #f8d7da;
                    border-color: #f5c6cb;
                }

                li.pdf-quiz__float-question.-correct {
                    
                    border:1px solid #c3e6cb;
                    color: #23c648; 
                    background-color: #d4edda;
                }
            </style>
        <?php } else { ?>
            <style>
                body.pdf-quiz-test {margin: 0;padding: 0; overflow: hidden; }
            </style>
        <?php } ?>

            <style>
                .pdf-quiz-test li {
                    user-select: none;
                }
                .test__wrapper {
                    display: flex;
                    flex-direction: row;
                    flex-wrap: nowrap;
                    justify-content: space-between;
                    align-items: flex-start;
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    top: 0;
                    overflow: hidden;
                    
                }

                .sidebar_wrapper {
                    width: 450px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    align-items: stretch;
                    position: relative;
                    height: 100%;
                    background: white;
                }

                .sidebar__footer {
                    position: absolute;
                    bottom: 0;
                    display: flex;
                    height: 50px;
                    right: 0;
                    left: 0;
                    background: white;
                }

                .sidebar__header {
                    display: flex;
                    height: 55px;
                    flex-direction: row;
                    align-items: center;
                    flex-wrap: nowrap;
                    justify-content: space-between;
                    background: white;
                    padding: 0 20px;
                }

                h2.sidebar__title-text {
                    margin: 0;
                    padding: 0;
                    font-size: 18px;
                    font-family: sans-serif;
                }

                .sidebar__content {
                    display: flex;
                    position: absolute;
                    top: 56px;
                    left: 0;
                    right: 0;
                    bottom: 50px;
                    background: #fff;
                    overflow-y: scroll;
                    padding-top:10px;
                    padding-bottom: 10px;
                }  
                
                
                ul.pdf-quiz__questions-list {
                    list-style: none;
                    display: block;
                    padding: 0;
                    margin: 0;
                    width: 100%;
                    overflow: hidden;
                }

                li.pdf-quiz__question {
                    display: flex;
                    padding: 0;
                    margin: 8px 0;
                    flex-direction: row;
                    flex-wrap: nowrap;
                    align-items: center;
                    width: 100%;
                    justify-content: flex-start;
                }

                .pdf-quiz__question-number {
                    position: relative;
                    top: -2px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 55px;
                    height: 35px;
                    font-size: 18px;
                    padding: 0;
                    border-radius: 0px 10px 10px 0px;
                    border-left: 6px solid transparent;
                    background: transparent;
                    color: black;
                }

                .pdf-quiz__question-number.-answered {
                    /* color: #30af4d; */
                    /* background-color: #d4edda; */
                    border-left: 6px solid #7aabf7;
                    /* box-shadow: 4px 1px 0px 0px; */
                }

                ul.pdf-quiz__question-options {
                    width: 100%;
                    padding: 0;
                    margin: 0;
                    list-style: none;
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: space-evenly;
                }

                li.pdf-quiz__option {
                    display: flex;
                    width: 40px;
                    height: 40px;
                    padding: 6px;
                    justify-content: center;
                    align-items: center;
                    border-radius: 50%;
                    /* border: 1px solid #bdc5cf; */
                    -moz-transition: .2s;
                    -o-transition: .2s;
                    -webkit-transition: .2s;
                    transition: .2s;
                    cursor: pointer;
                    background: #f5f4f4;
                    /*box-shadow: 3px 5px 0px #7f7a7a; */
                    transform: translate(0px, -3px);
                }

                li.pdf-quiz__option:hover {
                    box-shadow: 0px 0px 0px #E7F0FE;
                    color: black;
                    background-color: #E7F0FE;
                    border-color: #E7F0FE;
                    /* transform: translate(0px, 0px); */
                }

                li.pdf-quiz__option.-answered {
                    color: black;
                    background-color: #E7F0FE;
                    border-color: #E7F0FE;
                    /* box-shadow: inset 0px 0px 2px; */
                    /* transform: translate(0px, 0px); */
                }

                span.pdf-quiz__option-text {
                    font-family: sans-serif;
                    font-size: 20px;
                }

                span#time-clock {
                    padding: 10px;
                    border-radius: 20px;
                    color: #1B72E8;
                    font-size:18px;
                    font-weight: 700;
                }

                span.pdf-realtest-header__time-unit__mm {
                    background: transparent;
                    padding: 4px;
                    color: white;
                }

                span.pdf-realtest-header__time-unit__ss {
                    background: transparent;
                    padding: 4px;
                    color: white;
                }

                .sidebar_pan {
                    position: absolute;
                    right: 5px;
                    bottom: 50%;
                    height: 38px;
                    width: 30px;
                    box-shadow: 0 0 4px #989898;
                    background: white;
                    border-radius: 15px 0px 0px 15px;
                    cursor: pointer;
                    color: #868686;
                    flex-direction: column;
                    flex-wrap: nowrap;
                    justify-content: center;
                    align-items: center;
                    transition: 0.2s;
                    display: none;
                    padding: 2px 0 0;
                }

                .sidebar_pan:hover{;
                    transform: translate(-0px, 0);
                    width: 40px;
                }
                
                .btn-proqyz__pdf-quiz--submit {
                    width: 100%;
                    border-radius: 0;
                    font-size: 17px;
                    color: white;
                    background: #1B72E8;
                    text-transform: uppercase;
                }
                
                .btn-proqyz__pdf-quiz--submit:hover {
                    color: white;
                }

                /** floating **/
                .float_wrapper {
                    display: none;
                    margin: 0 auto;
                    position: absolute;
                    bottom: 2vh;
                    left: 0;
                    right: 0;
                }

                ul.float__questions-ul {
                    display: inline-flex;
                    list-style: none;
                    padding: 0;
                    margin: 0;
                    width: auto;
                    align-items: center;
                    justify-content: center;
                    height: 100%;
                    flex-direction: row;
                    flex-wrap: nowrap;
                }
                .float_wrapper__questions {
                    display: block;
                    width: 100%;
                    background: #fff;
                    height: 60px;
                    border-radius: 15px;
                    box-shadow: 0px 3px 3px #00000063;
                    overflow-x:scroll;
                    position: relative;
                    z-index: 1;
                }

                .float_wrapper {
                    width: 80vw;
                    height: 120px;
                    
                }

                li.pdf-quiz__float-question {
                    display: flex;
                    width: 45px;
                    height: 45px;
                    border: 1px;
                    text-align: center;
                    align-items: center;
                    justify-content: center;
                    border-radius: 30px;
                    background: #f5f4f4;
                    margin: 0 5px;
                    cursor: pointer;
                    position: relative;
                }

                .test__wrapper .show{
                    display: block !important;
                }
                .test__wrapper .in {
                    transform: translate(0px, 8px) !important;
                    height: auto !important;
                    padding-top: 10px !important;
                }

                ul.float__options-ul {
                    display: inline-flex;
                    list-style: none;
                    padding: 0;margin: 0;
                    width: auto;
                    align-items: center;
                    justify-content: center;
                    height: 100%;
                    flex-direction: row;
                    flex-wrap: nowrap;
                }

                li.pdf-quiz__float-option {
                    display: flex;
                    width: 40px;
                    height: 40px;
                    border: 1px;
                    text-align: center;
                    align-items: center;
                    justify-content: center;
                    border-radius: 25px;
                    background: #f5f4f4;
                    margin: 0 5px;
                    cursor: pointer;
                    font-size: 18px;
                }

                .float_wrapper-options {
                    background: white;
                    text-align: center;
                    border: 1px solid #d9d9d9;
                    padding: 5px;
                    border-radius: 0px 0px 15px 15px;
                    position: relative;
                    top: -10px;
                    box-shadow: 0px 1px 4px #0000001a;
                    transition: 0.2s;
                    height: 0;
                    overflow: hidden;
                    
                }

                .float_wrapper__options-container {
                    position: relative;
                    z-index: 0;
                    overflow: hidden;
                    margin: 0 auto;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: flex-end;
                }


                .-current-question::before {
                    content: '';
                    display: flex;
                    flex-direction: row;
                    flex-wrap: wrap;
                    -webkit-box-pack: center;
                    justify-content: center;
                    align-content: center;
                    -webkit-box-align: center;
                    align-items: center;
                    position: absolute;
                    box-sizing: border-box;
                    font-family: Roboto, Helvetica, Arial, sans-serif;
                    font-weight: 500;
                    font-size: 0.75rem;
                    line-height: 1;
                    z-index: 1;
                    height: 8px;
                    min-width: 8px;
                    top: -14%;
                    right: 14%;
                    transform: scale(1) translate(50%, 50%);
                    transform-origin: 100% 100%;
                    /* transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1); */
                    border-radius: 4px;
                    padding: 0px;
                }

                .-current-question::before{
                    background-color: #1B72E8;
                    color: #1B72E8;
                    box-shadow: rgb(255, 255, 255) 0px 0px 0px 2px;
                }

                

                .pdf-quiz__float-question.-answered {
                    color: #1B72E8;
                    background-color: #E7F0FE;
                    border-color: #E7F0FE;
                }

                li.pdf-quiz__float-option.-answered {
                    color: #1B72E8;
                    background-color: #E7F0FE;
                    border-color: #E7F0FE;
                }


                /* timer */
                .floating-timer {
                    display: none;
                    position: absolute;
                    right: 24px;
                    padding: 4px;
                    border-radius: 20px;
                    overflow: hidden;
                    color: white;
                    top: 3px;
                }

                .float_footer {
                    display: none;
                    position: absolute;
                    right: 10px;
                    bottom: 10px;
                }
                
                

                


                ::-webkit-scrollbar {
                    width: 5px;
                    height: 5px;
                }

                ::-webkit-scrollbar-track {
                    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
                    -webkit-border-radius: 10px;
                    border-radius: 10px;
                }

                ::-webkit-scrollbar-thumb {
                    -webkit-border-radius: 10px;
                    border-radius: 10px;
                    background: rgba(255, 255, 255, 0.3);
                    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
                }

                ::-webkit-scrollbar-thumb:window-inactive {
                    background: rgba(255, 255, 255, 0.3);
                }


                @media screen and (max-width: 1000px) {
                    .sidebar_wrapper {
                        position: absolute;
                        right: 0;
                        width: 320px;
                        box-shadow: -3px 3px 3px #20202042;
                    }

                    .sidebar_wrapper {
                        -moz-transition: .2s;
                        -o-transition: .2s;
                        -webkit-transition: .2s;
                        transition: .2s;
                        transform: translate(316px, 0px);
                    }

                    .sidebar_enabled .sidebar_wrapper {
                        transform: translate(0px, 0px);
                    }

                    .floating-timer{ display:block; }
                    .sidebar_enabled .floating-timer{ display:none; }

                    .sidebar_pan{
                        display:flex;
                    }

                    .sidebar_enabled  .sidebar_pan{ 
                        transform: translate(-317px, 0px);
                        box-shadow: -3px 0px 3px;
                        width: 30px !important;
                    }

                    .sidebar_enabled .fa-chevron-left{ display: none; }
                    .sidebar_enabled .fa-chevron-right{ display: block; }
                    .fa-chevron-right { display: none; }

                    .pdf-quiz-test button.realtest-header__bt-review {
                        display: block !important;!i;!;
                        height: 24px;
                        width: 24px;
                        text-align: center;
                        top: -3px;
                        position: relative;
                        color: white;
                        font-size: 12px;
                        padding: 0;
                        border: 1px solid #5c5858;
                        background: #38383d;
                        right: -2px;
                    }

                    .sidebar_enabled.pdf-quiz-test button.realtest-header__bt-review {
                        display: block !important;
                        height: 30px;
                        top:1px;
                        position: relative;
                        color: #606060;
                        font-size: 12px;
                        width: 30px;
                        background: white;
                    }

                }

                /* mobile view */
                @media screen and (max-width: 700px) {
                    .sidebar_wrapper, .sidebar_pan {
                        display:none;
                    }
                    .float_wrapper {
                        display: block;
                    }
                    .floating-timer, .float_footer{ display:block !important; }

                    ::-webkit-scrollbar {
                        width: 1px;
                        height: 1px;
                    }

                    .-current-question{
                        color: #1B72E8;
                    }
                }
                
                .realtest-header__bt-submit {
                    height: 36px;
                    padding: 0 8px;
                    font-size: 14px;
                    gap: 2px;
                    border-radius: 32px;
                    background: #1B72E8;
                }
                
                @media (max-width: 767px) {
                    .realtest-header__bt-submit {
                        height: 36px;
                        padding: 0 8px;
                        font-size: 14px;
                        gap: 2px;
                        border-radius: 32px;
                        background: #1B72E8;
                    }
                }

                


            </style>
        <?php echo ob_get_clean();
    }

    /**
     * changes @1.2.1.2
     */
    public function header(){
        if( $this->result ) {
            ob_start(); ?>
            <head>
                <?php if(isset($this->quiz->title)) { ?>
                <title><?php echo $this->quiz->title; ?> | Result</title>    
                <?php } ?>
                
                <meta charset="<?php bloginfo('charset'); ?>" />    
                <meta name="viewport" content="width=device-width, initial-scale=1.0" />
                <link rel="stylesheet" href="<?php echo site_url() . '/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/css/polyfixes.css'; ?>" />
                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.1/css/all.min.css" integrity="sha512-SUwyLkI1Wgm4aEZkDkwwigXaOI2HFLy1/YW73asun4sfvlkB9Ecl99+PHfCnfWD0FJjIuFTvWMM7BZPXCckpAA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
                <link rel="stylesheet" href="<?php echo site_url() . '/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/css/proqyz-quiz.css'; ?>" />
                
                <?php echo $this->dynamic_css_imports(); ?>
                <?php echo $this->dynamic_js_imports_header(); ?>
                <?php echo $this->get_pdfQuiz_styles(); ?>
                <script>
                    const resultUrl     = `${window.location.href}`;
                    const resultId      = `<?php echo $this->result_id; ?>`;
                    const quizId        = `<?php echo $this->_id; ?>`;
                    const quizCategory  = `<?php echo $this->category; ?>`;
                </script>
            </head>
            <?php return ob_get_clean();
        } else {
            ob_start(); ?>
            <head>
                <?php if(isset($this->quiz->title)) { ?>
                <title><?php echo $this->quiz->title; ?> | Quiz</title>    
                <?php } ?>
                <meta charset="<?php bloginfo('charset'); ?>" />    
                <meta name="viewport" content="width=device-width, initial-scale=1.0" />
                <link rel="stylesheet" href="<?php echo site_url() . '/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/css/polyfixes.css'; ?>" />
                <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.1/css/all.min.css" integrity="sha512-SUwyLkI1Wgm4aEZkDkwwigXaOI2HFLy1/YW73asun4sfvlkB9Ecl99+PHfCnfWD0FJjIuFTvWMM7BZPXCckpAA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
                <link rel="stylesheet" href="<?php echo site_url() . '/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/css/proqyz-quiz.css'; ?>" />
                
                <?php echo $this->dynamic_css_imports(); ?>
                <?php echo $this->dynamic_js_imports_header(); ?>
                <?php echo $this->get_pdfQuiz_styles(); ?>
                <script>
                    
                    const quizId        = `<?php echo $this->_id; ?>`;
                    const quizCategory  = `<?php echo $this->category; ?>`;
                </script>
            </head>
            <?php return ob_get_clean();
        }

    }

    public function footer(){
        ob_start(); ?>
            <script id="session-details" type="application/json">
                <?php 
                    echo json_encode( (object) [
                        "_id"           => $this->_id,
                        "category"      => $this->category,
                        "time"          => $this->default,
                        "session"       => $this->session
                    ]); 
                ?>
            </script>
            <script id="quiz-json" type="application/json">
                <?php echo json_encode( (object) $this->_q); ?>
            </script>
            <?php if( $this->resume && $this->user_data !== null ) { 
                $answers = isset($this->user_data->answers)? (object) $this->user_data->answers : [];
            ?>
            <script id="user-responses" type="application/json">
                <?php 
                    echo json_encode( (object) [
                        "answers"   => $answers
                    ]); 
                ?>
            </script>
            <?php } ?>
            <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.7.6/jquery.nicescroll.min.js" integrity="sha512-zMfrMAZYAlNClPKjN+JMuslK/B6sPM09BGvrWlW+cymmPmsUT1xJF3P4kxI3lOh9zypakSgWaTpY6vDJY/3Dig==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/split.js/1.6.2/split.min.js" integrity="sha512-to2k78YjoNUq8+hnJS8AwFg/nrLRFLdYYalb18SlcsFRXavCOTfBF3lNyplKkLJeB8YjKVTb1FPHGSy9sXfSdg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
            <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
            <script>
                jQuery(document).ready(function ($){

                    var answers = [];
                    let initNiceScroll = false;
                    let autosave       = false;
                    let saveInterval   = null;
                    let saveAjax       = null;
                    let remainingTime  = 0;

                    function countNullValues(arr) {
                        if (!Array.isArray(arr)) {
                            throw new Error("Input must be an array");
                        }

                        let nullCount = 0;

                        arr.forEach(item => {
                            if (item === null) {
                                nullCount++;
                            }
                        });

                        return {
                            hasNull: nullCount > 0,
                            nullCount
                        };
                    }


                    window.CountDownTimer = function (duration, duration_default, granularity) {
                        this.duration = duration;
                        this.granularity = granularity || 1000;
                        this.tickFtns = [];
                        this.running = false;
                        this.pending = false;
                        this.diff = parseInt(duration);
                        this.duration_default = duration_default;
                    }

                    window.CountDownTimer.prototype.start = function () {
                        if (this.running) {
                            return;
                        }

                        this.running = true;
                        var start = Date.now(),
                            that = this,
                            diff, obj;

                        (function timer() {
                            if (that.pending) {
                                return;
                            }
                            var obj_default = window.CountDownTimer.parse(that.duration_default);
                            if (that.duration_default == 0) {
                                diff = parseInt(that.duration) + (((Date.now() - start) / 1000) | 0);
                                if (diff >= 0) {
                                    setTimeout(timer, that.granularity);
                                }
                                obj = window.CountDownTimer.parse(diff);
                                var time_over = that.duration_default + diff;
                                that.diff = window.CountDownTimer.parse(time_over);
                                if(document.querySelector('#time-clock[data-current-time]')){
                                    document.querySelector('#time-clock[data-current-time]').dataset.currentTime = time_over;
                                    remainingTime = time_over;
                                    window.rtime = time_over;
                                }
                                
                            } else {
                                diff = that.duration - (((Date.now() - start) / 1000) | 0);
                                if (diff > 0) {
                                    setTimeout(timer, that.granularity);
                                    if(document.querySelector('#time-clock[data-current-time]')){
                                        document.querySelector('#time-clock[data-current-time]').dataset.currentTime = diff;
                                        remainingTime = diff;
                                        window.rtime = diff;
                                    }
                                    
                                } else {
                                    diff = 0;
                                    that.running = false;
                                    if(document.querySelector('#time-clock[data-current-time]')){
                                        document.querySelector('#time-clock[data-current-time]').dataset.currentTime = 0;
                                        remainingTime = 0;
                                        window.rtime = 0;
                                    }
                                }
                                obj = window.CountDownTimer.parse(diff);
                                var time_over = that.duration_default - diff;
                                that.diff = window.CountDownTimer.parse(time_over);
                            }

                            that.tickFtns.forEach(function (ftn) {
                                ftn.call(this, obj.minutes, obj.seconds, obj_default.minutes);
                            }, that);
                        }());
                    };

                    window.CountDownTimer.prototype.onTick = function (ftn) {
                        if (typeof ftn === 'function') {
                            this.tickFtns.push(ftn);
                        }
                        return this;
                    };

                    window.CountDownTimer.prototype.expired = function () {
                        return !this.running;
                    };

                    window.CountDownTimer.prototype.timecurrent = function () {
                        return this.diff;
                    };
                    window.CountDownTimer.prototype.pendingTime = function () {
                        this.pending = true;
                    }
                    window.CountDownTimer.parse = function (seconds) {
                        return {
                            'minutes': (seconds / 60) | 0,
                            'seconds': (seconds % 60) | 0
                        };
                    };


                    window.timeEndReading = function () {
                        if (this.expired()) {
                            var mode = 'practice_test';
                            $('body').addClass('-test_time-up');
                            if (mode == 'practice_test') {
                                let result = countNullValues(answers);

                                if ( answers.length !== result.nullCount ) {
                                    $('#modal-time-up').modal('show');
                                    if(saveInterval) clearInterval(saveInterval);
                                } else {
                                    $('#modal-time-up-no-taketest').modal('show');
                                    if(saveInterval) clearInterval(saveInterval);
                                }
                            }
                        }
                    };
                    // End countdown timer prototype
                    // Run time clock.
                    window.runTimeClock = function (timeEndCallback) {
                        var elmDisplay = document.querySelector('#time-clock');
                        var timeHolder = $('.time-holder');
                        if (elmDisplay && timeHolder) {
                            var timeDuration = elmDisplay.dataset.time,
                                timeDurationDefault = elmDisplay.dataset.durationDefault;

                            timer = new window.CountDownTimer(timeDuration, timeDurationDefault);
                            var timeObj = window.CountDownTimer.parse(timeDuration);
                            formatClockTime(timeObj.minutes, timeObj.seconds, timeObj.minutes);
                            timer.onTick(formatClockTime);
                            // Provided custom callback function will be called at timer end.
                            if (typeof timeEndCallback === 'function') {
                                timer.onTick(timeEndCallback);
                            } else {
                                timer.onTick(timeEnd);
                            }
                            timer.onTick(timeTakeTest);
                            if(document.body.classList.contains('-start') || document.body.classList.contains('-resume')){
                                timer.start();
                            }
                        }

                        function timeEnd() {
                            if (this.expired()) {
                                // showTimeIsUpModal();
                            }
                        }

                        function timeEndAlertModal() {
                            if (this.expired()) {
                                console.log('Time is up! please write your function to submit form here.')
                            }
                        }

                        // Save time current to local storage.
                        function timeTakeTest() {
                            var timecurrent = this.timecurrent();
                            var minutes = timecurrent.minutes < 10 ? "0" + timecurrent.minutes : timecurrent.minutes;
                            var seconds = timecurrent.seconds < 10 ? "0" + timecurrent.seconds : timecurrent.seconds;
                            if (timecurrent === undefined) {
                                return;
                            }
                            /*
                            var taketest_string = window.getCookie('taketest');
                            if (!taketest_string) {
                            return;
                            }
                            */
                            //localStorage.setItem("practice_" + quiz_id + '_timecurrent', minutes + ':' + seconds);
                        }

                        // Set flag default for time clock.
                        function formatClockTime(minutes, seconds, minutes_default) {
                            minutes = minutes < 10 ? "0" + minutes : minutes;
                            seconds = seconds < 10 ? "0" + seconds : seconds;
                            var timeValue = minutes >= 1 ? minutes : seconds;
                            var timeText = minutes >= 1 ? 'minutes remaining' : 'seconds remaining';
                            if (minutes < 1) {
                                $('.realtest-header').addClass('time-up');
                            }
                            if (elmDisplay) {
                                if (parseInt(minutes) < parseInt(minutes_default) && parseInt(minutes) >= 1) {
                                    if (parseInt(seconds) == 0 && parseInt(minutes) == 1) {
                                        timeValue = "01";
                                    }
                                    else {
                                        timeValue = parseInt(minutes) + 1;
                                        if (parseInt(minutes) < 9) {
                                            timeValue = "0" + timeValue;
                                        }
                                    }
                                }
                                //elmDisplay.innerHTML = '<span class="pdf-realtest-header__time-val">' + timeValue + '</span>' + '<span class="pdf-realtest-header__time-text">' + timeText + '</span>';
                                /*elmDisplay.innerHTML = `
                                    <span class="pdf-realtest-header__time-val">
                                        <span class="pdf-realtest-header__time-unit__mm">${minutes}</span>
                                        :
                                        <span class="pdf-realtest-header__time-unit__ss">${seconds}</span>
                                    </span>
                                `;*/

                                timeHolder.html(`
                                    <span class="pdf-pdf-realtest-header__time-val">
                                        <span class="pdf-pdf-realtest-header__time-unit__mm">${minutes}</span>
                                        :
                                        <span class="pdf-pdf-realtest-header__time-unit__ss">${seconds}</span>
                                    </span>
                                `);
                            }
                        }

                        function formatEndTimeAlert(minutes, seconds) {
                            var countDownText = document.getElementById("js-countdown-text");
                            var seconds = seconds;
                            timeDisplayElm.textContent = seconds;
                            countDownText.textContent = seconds <= 1 ? "sec" : "secs";
                        }

                        function showTimeIsUpModal() {
                            $("#modal-time-up").modal({ backdrop: 'static', keyboard: false });
                            timeDisplayElm = document.querySelector('#js-countdown-number');
                            if (timeDisplayElm) {
                                var timeDuration = timeDisplayElm.dataset.time,
                                    timer = new window.CountDownTimer(timeDuration),
                                    timeObj = window.CountDownTimer.parse(timeDuration);
                                formatEndTimeAlert(timeObj.minutes, timeObj.seconds);
                                timer.onTick(formatEndTimeAlert);
                                timer.onTick(timeEndAlertModal);
                                timer.start();
                            }
                        }
                    };

                    window.pendingTimeClock = function () {
                        // Stop time clock.
                        timer.pendingTime();
                    };

                    const updateAnswers = (cindex = null) => {
                        if(answers.length > 0){
                            answers.forEach((answer, ix) => {
                                if(answer !== null){
                                    // for sidebar
                                    $(`[data-pdf-type="question"][data-q_index="${ix}"][data-alignment="sidebar"]`).children('.pdf-quiz__question-number').addClass('-answered');
                                    // for footer
                                    $(`[data-pdf-type="question"][data-q_index="${ix}"][data-alignment="footer"]`).addClass('-answered');
                                    // options 
                                    $(`[data-pdf-type="option"][data-q_index="${ix}"]`).removeClass('-answered');
                                    $(`[data-pdf-type="option"][data-o_index="${answer}"][data-q_index="${ix}"]`).addClass('-answered');
                                } else {
                                    // for sidebar
                                    $(`[data-pdf-type="question"][data-q_index="${ix}"][data-alignment="sidebar"]`).children('.pdf-quiz__question-number').removeClass('-answered');
                                    // for footer
                                    $(`[data-pdf-type="question"][data-q_index="${ix}"][data-alignment="footer"]`).removeClass('-answered');
                                    // options 
                                    $(`[data-pdf-type="option"][data-q_index="${ix}"]`).removeClass('-answered');
                                }

                                if(cindex == ix) {
                                    $(`[data-pdf-type="question"][data-q_index="${ix}"][data-alignment="footer"]`).addClass('-current-question');
                                }
                            });
                        } else {
                            $(`[data-pdf-type="question"][data-alignment="sidebar"]`).children('.pdf-quiz__question-number').removeClass('-answered');
                            // for footer
                            $(`[data-pdf-type="question"][data-alignment="footer"]`).removeClass('-answered');
                            // options
                            $(`[data-pdf-type="option"]`).removeClass('-answered');
                        }
                    };

                    window.loadQuestions = function(){
                        let res = jQuery('#user-responses').text();
                        let jsonRes = JSON.parse(res);
                        let answersObj = jsonRes.answers || {};
                        let answersArr = Object.values(answersObj) || [];
                        answers = answersArr;
                        updateAnswers();
                    };

                    $(document).on('click','.actual-test [data-pdf-type="option"]', function(){
                        let qusIndex = $(this).data('q_index');
                        $(`[data-pdf-type="question"][data-alignment="footer"]`).removeClass('-current-question');
                        if(answers[+qusIndex] == $(this).data('o_index')){
                            answers[+qusIndex] = null;
                        } else {
                            answers[+qusIndex] = $(this).data('o_index');
                        }
                        updateAnswers(+qusIndex);
                    });

                    $(document).on('click','.actual-test [data-pdf-type="question"]', function(){
                        // hide all options
                        $('.float_wrapper-options').removeClass('in show');
                        $('[data-pdf-type="question"]').removeClass('-current-question');

                        let questionIndex = $(this).data('q_index');
                        $(this).addClass('-current-question');
                        setTimeout(() => {
                            $(`#float-options-${questionIndex}`).addClass('show in');
                        },300);
                        
                        
                    });

                    $(document).on('click', '.sidebar_pan', function(){
                        $('body').toggleClass('sidebar_enabled');
                    });

                    

                    // retake btn if not attempt
                    $(document).on('click', '.actual-test .-btn-retake', function(){
                        let json    = JSON.parse(jQuery('#session-details[type="application/json"]').text());
                        jQuery.ajax({
                            type: "POST",
                            url: window.site_url +'/wp-admin/admin-ajax.php',
                            data: {
                                "action": "proqyz-quiz-progress-restart",
                                "data"  : {
                                    "json" : json
                                }
                            },
                            beforeSend: function () {
                                if (saveAjax != null) {
                                    saveAjax.abort();
                                }
                                console.log('[RES]: Restarting...');
                            },
                            success: function (response) {
                                if(response.success) {

                                    if(document.querySelector('#time-clock')){
                                        document.querySelector('#time-clock').dataset.currentTime = +document.querySelector('#time-clock').dataset.durationDefault; 
                                        document.querySelector('#time-clock').dataset.time = +document.querySelector('#time-clock').dataset.durationDefault; 
                                        console.log('[TIME]: ',document.querySelector('#time-clock').dataset.currentTime);
                                    }

                                    window.runTimeClock(window.timeEndReading);
                                    window.runAutoSave();
                                    jQuery('#modal-resume').modal('hide');
                                    $('body').removeClass('-test_time-up');
                                    $('.realtest-header').removeClass('time-up');
                                    $('.modal').modal('hide');
                                }
                            },
                            error: function (err) {
                                if (err.status == 404) {
                                    console.warn("404 Auth location !");
                                } else if (err.status == 0) {
                                    alert("Network Error");
                                } else {
                                    console.warn(err.message);
                                }
                            }
                        });
                    });

                    // restart quiz btn
                    $(document).on('click','.actual-test #btn-restart', function(){
                        let json    = JSON.parse(jQuery('#session-details[type="application/json"]').text());
                        jQuery.ajax({
                            type: "POST",
                            url: window.site_url +'/wp-admin/admin-ajax.php',
                            data: {
                                "action": "proqyz-quiz-progress-restart",
                                "data"  : {
                                    "json" : json
                                }
                            },
                            beforeSend: function () {
                                if (saveAjax != null) {
                                    saveAjax.abort();
                                }
                                console.log('[RES]: Restarting...');
                            },
                            success: function (response) {
                                if(response.success) {
                                    if(document.querySelector('#time-clock')){
                                        document.querySelector('#time-clock').dataset.currentTime = +document.querySelector('#time-clock').dataset.durationDefault; 
                                        document.querySelector('#time-clock').dataset.time = +document.querySelector('#time-clock').dataset.durationDefault; 
                                        console.log('[TIME]: ',document.querySelector('#time-clock').dataset.currentTime);
                                    }

                                    answers = [];
                                    window.runTimeClock(window.timeEndReading);
                                    window.runAutoSave();
                                    jQuery('#modal-resume').modal('hide');
                                }
                            },
                            error: function (err) {
                                if (err.status == 404) {
                                    console.warn("404 Auth location !");
                                } else if (err.status == 0) {
                                    alert("Network Error");
                                } else {
                                    console.warn(err.message);
                                }
                            }
                        });
                    });

                    // resume quiz btn
                    $(document).on('click','.actual-test #btn-continue', function(){
                        $('#modal-resume').modal('hide');
                        window.loadQuestions();
                        window.runTimeClock(window.timeEndReading);
                        window.runAutoSave();
                    });

                    // submit button pressed
                    $(document).on('click','.actual-test #btn-submit', function(){
                        let result = countNullValues(answers);
                        if ( answers.length !== result.nullCount ) {
                            $('#modal-submit-test').modal('show');
                        } else {
                            $('#modal-do-not-work-lr').modal('show');
                        }
                    });

                    // for saving ajax callback
                    window.saveQuiz = (data = {}) => {
                        let tmpTitle = window.document.title;
                        saveAjax = jQuery.ajax({
                            type: "POST",
                            url: window.site_url +'/wp-admin/admin-ajax.php',
                            data: {
                                "action": "proqyz-save-quiz-progress",
                                "data": data
                            },
                            beforeSend: function () {
                                if (saveAjax != null) {
                                    saveAjax.abort();
                                }
                                console.log('[RES]: Saving...');
                                window.document.title = "Saving...";
                                if(data.finish == 1){
                                    jQuery('.modal .proqyz_btn').attr('disabled',true);
                                }

                            },
                            success: function (response) {
                                jQuery('.modal .proqyz_btn').attr('disabled',false);
                                if (response.success) {
                                    if (response.redirect) {
                                        jQuery('.modal').modal('hide');
                                        jQuery(document).on('click','.-btn-redirect-result', function(){
                                            window.location.href = response.url;
                                        });
                                        jQuery('#modal-finish').modal('show');
                                        window.location.href = response.url;
                                    }
                                }
                            },
                            error: function (err) {
                                jQuery('.modal .proqyz_btn').attr('disabled',false);
                                if (err.status == 404) {
                                    console.warn("404 Auth location !");
                                } else if (err.status == 0) {
                                    console.warn("Network Error reason [abort]");
                                } else {
                                    console.warn(err.message);
                                }
                            }
                        }).always(function() {
                            window.document.title = tmpTitle;
                        });
                    };

                    window.runAutoSave = () => {
                        let autosave = true;
                        let diff    = document.querySelector('#time-clock[data-current-time]')? document.querySelector('#time-clock[data-current-time]').dataset.currentTime : 0;
                        let time    = document.querySelector('#time-clock[data-time]')? document.querySelector('#time-clock[data-time]').dataset.time : 0;
                        let json    = JSON.parse(jQuery('#session-details[type="application/json"]').text());
                        let quiz    = JSON.parse(jQuery('#quiz-json[type="application/json"]').text());
                        
                        if(json){
                            if(autosave){
                                saveInterval = setInterval(() => {
                                    window.saveQuiz({
                                        time: time,
                                        diff: window.rtime? window.rtime : 0,
                                        json: json,
                                        answers: JSON.stringify(answers),
                                        finish: 3
                                    });
                        
                                    if(!autosave){
                                        clearInterval(saveInterval);
                                    }
                                },20000); // each 20s
                            }
                                    
                        }
                    };

                    // main submit
                    window.submitQuiz = () => {
                        
                        let diff    = document.querySelector('#time-clock[data-current-time]')? document.querySelector('#time-clock[data-current-time]').dataset.currentTime : 0;
                        let time    = document.querySelector('#time-clock[data-time]')? document.querySelector('#time-clock[data-time]').dataset.time : 0;
                        let json    = JSON.parse(jQuery('#session-details[type="application/json"]').text());
                        let quiz    = JSON.parse(jQuery('#quiz-json[type="application/json"]').text());
                        let audioTime = 0;

                        let autosave = true;
                        console.info('[FINISH] : submitting');

                        if(autosave){
                            clearInterval(saveInterval);
                            window.saveQuiz({
                                time: time,
                                audio: +audioTime,
                                diff: window.rtime? window.rtime : 0,
                                json: json,
                                quiz: JSON.stringify(quiz),
                                answers: JSON.stringify(answers),
                                finish: 1 
                            });
                        }

                    };

                    // for result page
                    $(document).on('click', '.actual-test  #show-result-modal', function(){
                        $('#result-modal').modal('show');
                        
                        
                    });

                    $(document).on('click','.actual-test  .-btn-submit-test', function(event){
                        let btn = $(this);
                        window.submitQuiz();
                    });

                    
                    let loader = setInterval(() => {
                        if (1 === 1) {
                            if(document.body.classList.contains('-start')){
                                window.runTimeClock(window.timeEndReading);
                                window.runAutoSave();
                                clearInterval(loader);
                            } else if(document.body.classList.contains('-resume')){
                                clearInterval(loader);
                                jQuery('#modal-resume').modal('show');
                            } else if(document.body.classList.contains('-result')){
                                clearInterval(loader);
                            } else {
                                console.log('Unauthorized');
                                window.runTimeClock(window.timeEndReading);
                                clearInterval(loader);
                            }
                        }
                    }, 500);
                    



                });




            </script>        
        <?php return ob_get_clean();
    }

    /**
     * changes @1.2.1.2
     */
    public function get_layout(){
        $class_body = '';
        if(is_user_logged_in()){
            $class_body = $this->resume? '-resume' : '-start';
            $class_body .= ' user-logged-in actual-test ';
        } else {
            $class_body .= ' anonymous-user';
        }

        ob_start(); ?>
            <!DOCTYPE html>
            <html <?php language_attributes(); ?>>
            <?php echo $this->header(); ?>
            <body class="pdf-quiz-test -practice-mode has-glyphicons <?php echo $class_body; ?>">
                <div class="test__wrapper">
                    <div class="ng-scope" style="display:block;width: 100%; height: 100%;padding:0;margin:0;">
                        <iframe id="pdf-src-box"
                            src="<?php echo ST_PROQYZ_PLUGIN_URL; ?>includes/libs/lms/pdf/web/viewer.html?file=<?php echo $this->question_paper_pdf; ?>"
                            frameborder="0" title="PDF Viewer" x-theme-special=""
                            sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
                            class="pdf-modal-popup-iframe theme-special"
                            style="width:100%;height:100%;padding:0;margin:0;"
                        ></iframe>
                        <div class="popup-iframe-overlay"></div>
                    </div>
                    <div class="sidebar_wrapper">
                        <div class="sidebar__header">
                            <div class="sidebar__title">
                                <h2 class="sidebar__title-text">
                                    <?php echo $this->quiz->title; ?>
                                </h2>
                            </div>    
                            <span class="pdf-realtest-header__time-clock time-holder" data-current-time="" data-time="<?php echo $this->seconds; ?>" data-duration-default="<?php echo $this->default; ?>" id="time-clock">
                                <span class="pdf-realtest-header__time-val">
                                    <span class="pdf-realtest-header__time-unit__mm">00</span>
                                    :
                                    <span class="pdf-realtest-header__time-unit__ss">00</span>
                                </span>
                                <span class="pdf-realtest-header__time-text"></span>
                            </span>
                        </div>
                        <div class="sidebar__content">
                            <?php echo $this->get_questions_html("sidebar"); ?>
                        </div>
                        <div class="sidebar__footer p-0">
                            <button id="btn-submit" class="btn btn-proqyz__pdf-quiz--submit" type="button" style="height:100%;">
                                Submit
                            </button>
                        </div>
                        
                    </div>
                    <div class="floating-timer">
                        <span class="pdf-realtest-header__time-clock time-holder">
                            <span class="pdf-realtest-header__time-val">
                                <span class="pdf-realtest-header__time-unit__mm">00</span>
                                :
                                <span class="pdf-realtest-header__time-unit__ss">00</span>
                            </span>
                            <span class="pdf-realtest-header__time-text"></span>
                        </span>
                    </div>
                    <div class="sidebar_pan" role="button">
                        <div class="sidebar_pan__expand">
                            <i class="fa fa-chevron-left"></i>
                            <i class="fa fa-chevron-right"></i>
                        </div>
                    </div>
                    <div class="float_wrapper">
                        <?php echo $this->get_questions_html("float"); ?>
                    </div>
                    <div class="float_footer">
                        <a href="#!" type="button" class="realtest-header__bt-submit -reading--btn" id="btn-submit"></a>
                    </div>

                </div>
                

            <?php echo $this->login_notice(); ?>
            <?php echo $this->modals(); ?>
            <?php echo $this->footer(); ?>
            </body>
            </html>
        <?php return ob_get_clean();
        
    }

    /**
     * result below
     */
    public function get_result_layout(){
        global $wpdb, 
        $table_proqyz_v3_progress_submissions_meta,
        $ST_OPTION_st_proqyz__leaderboard,
        $table_proqyz_v3_progress_submissions_score;

        $enable_leaderboard = get_option($ST_OPTION_st_proqyz__leaderboard, 1);

        $class_body         = '-result actual-test ';
        $avatar_url             = get_avatar_url($this->student_id);
        $student_info           = get_userdata($this->student_id);
        $student_display_name   = $student_info->display_name; // User's display name
        $student_username       = $student_info->user_login;  

        $quiz_title         = $this->quiz->title;
        $quiz_settings      = $this->quiz->settings;
        
        $remaining_time     = (int) $this->seconds;
        $total_time         = (int) $this->default;

        $report             = (object) $this->generate_result_report();
        $analyize           = isset($report->report)? (object) $report->report : null;
        $total_correct      = isset($analyize->total_correct)? (int) $analyize->total_correct : 0;
        $total_questions    = isset($analyize->total_set_questions)? (int) $analyize->total_set_questions : 0;
        $score_percentage   = 0;
        if( $total_questions > 0 ) {
            $score_percentage = ($total_correct/$total_questions)*100;
            $score_percentage = round($score_percentage / 5) * 5; 
        }

        $time_percentage = 0;
        if ($total_time > 0) {
            $spent_time = ($remaining_time - $total_time);
            $time_percentage = ($remaining_time) / $total_time;
            $time_percentage = 100 - round(($time_percentage * 100) / 5) * 5; // Round to the nearest multiple of 5
        }

        if( $this->result_id != null ) {
            // check if meta exists if not then update it
            $get_score = $wpdb->get_row("SELECT `ID` FROM `$table_proqyz_v3_progress_submissions_score` WHERE `submission_id` = '$this->result_id' LIMIT 1");
            if( !$get_score ) {
                $wpdb->insert($table_proqyz_v3_progress_submissions_score, [
                    "user_id" => $this->student_id,
                    "submission_id" => $this->result_id,
                    "score_data" => json_encode((object) $report),
                    "created_at" => time(),
                ]);
            } else {
                $wpdb->update($table_proqyz_v3_progress_submissions_score, [ 
                    "score_data" => json_encode((object) $report),
                    "updated_at" => time(), 
                ], [ "submission_id" => $this->result_id, "user_id" => $this->student_id ]);
            }
            
        }


        ob_start(); ?>
            <!DOCTYPE html>
            <html <?php language_attributes(); ?>>
            <?php echo $this->header(); ?>
            <body style="background-color:#f5f5f5f7;" class="pdf-quiz-test show-palette take-test-page -practice-mode <?php echo $class_body; ?>">
                
            
                <div class="dialog-off-canvas-main-canvas">

                    <header class="realtest-header ">
                        <span class="realtest-header__logo practice-item__icon -pdf-quiz "></span>
                        <?php if(isset($this->quiz->title)) { ?>
                            <div class=""><?php echo $this->quiz->title; ?></div>
                        <?php } ?>

                        <div class="pdf-realtest-header__time d-none" style="display:none;">
                            
                        </div>
                        <div class="realtest-header__btn-group">
                            <a href="/" class="realtest-header__bt-submit -icon-chevron-left -reading--btn" style="background: #f5f5f5;color: #1B72E8;">
                                Home
                            </a>
                            <a href="<?php echo $this->attempt_url; ?>" class="realtest-header__bt-submit -reading--btn">
                                Retake
                            </a>

                        </div>
                    </header>
            
                    <div class="container page" style="margin-top:100px;">

                        
                        <div class="row" id="result-frame">

                            <div class="<?php echo ($enable_leaderboard == 1)? 'col-md-8' : 'col-md-12'; ?> col-sm-12 col-xs-12" style="background: white;padding-top: 30px;padding-bottom: 30px;border-radius: 25px;margin-bottom: 20px;">

                                <div class="user-box" style="margin:10px 0px 0px 0px;">
                                
                                    <div class="us-user">
                                        <img alt="<?php echo $student_display_name; ?>" src="<?php echo $avatar_url; ?>">
                                        <p><?php echo $student_display_name; ?></p>
                                    </div>
                                
                                    <div class="user-socer pdf-quiz">
                                        <h2>Your score is:</h2>
                                        <div class="row">
                                            <div class="col-md-4  col-sm-4 col-xs-12">
                                                <div class="radial progress-<?php echo $score_percentage; ?> small" id="progress-small">
                                                <div class="overlay">
                                                    <span class="pr-icon-true"></span>
                                                    <p>Correct Answers</p>
                                                    <strong><?php echo $total_correct; ?>/<?php echo $total_questions; ?></strong>
                                                </div>
                                                <div class="dot"></div>
                                                </div>
                                            </div>
                                            <div class="col-md-4 col-sm-4 col-xs-12 ">
                                                <div class="welldone">
                                                    <div class="wd-round">
                                                        <strong>
                                                            <?php echo $score_percentage; ?>
                                                        </strong>
                                                        <em class="ielts-lms-widget-icon-content-subtitle">
                                                            Percentage
                                                        </em>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-4  col-sm-4  col-xs-12">
                                                <div class="radial progress-<?php echo $time_percentage; ?> big" id="progress-big">
                                                    <div class="overlay">
                                                        <span class="pr-icon-time"></span>
                                                        <p>Time Spent</p>
                                                        <strong><?php echo $this->seconds_to_hms($total_time - $remaining_time); ?> </strong>
                                                        <em>(<?php echo $this->seconds_to_hms($total_time); ?> )</em>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-12 reviews-test-mobile" style="margin-top: 30px;">
                                                <a href="#!" class="btn-show-re" id="show-result-modal" data-target="#result-modal" type="button" role="button">
                                                    <span></span>  Enter Review & Explanations
                                                </a>
                                                    
                                                <?php if(isset($this->session->session_category)){
                                                    if($this->session->session_category == "course" && $this->session->course_category !== "sfwd-course"){
                                                        $course_id = $this->session->course_id;
                                                        $course_url = st_proqyz_get_course_url( $course_id );
                                                        ?>
                                                        <a href="#!" class="btn-show-re" onclick="window.location.href = '<?php echo $course_url; ?>' " type="button" role="button">
                                                            Back to course
                                                        </a>
                                                    <?php }
                                                } ?>
                                            </div>
                                        </div>
                                    </div>
                                    <!---box-->
                                </div>
                            </div> 
                            <?php if($enable_leaderboard == 1){ ?> 
                                <div class="col-md-4 col-sm-12 col-xs-12">
                                <!-- widget tip item -->
                                <?php echo do_shortcode("[proqyz-leaderboard result_id='$this->result_id']"); ?>
                            </div>  
                            <?php } ?>  

                        </div>
                        <div class="row">
                            <div class="col-12">
                                <?php echo do_shortcode("[proqyz-result-page result_id='$this->result_id']"); ?>
                            </div>
                        </div>

                        <?php /*<div class="mt-10 mb-10">
                            
                            <pre><?php print_r($report); ?></pre>
                            
                        </div> */ ?>

                    </div>

                </div>


                <div class="modal fade" id="result-modal" tabindex="3" data-backdrop="static" data-keyboard="false" aria-labelledby="result-modalLabel" style="display: none;background:white;" aria-hidden="true">
                    <div class="modal-dialog modal-fullscreen" style="display:contents;">
                        <div class="modal-content p-0 m-0" style="display:contents;">

                            <div class="test__wrapper">
                                <div class="ng-scope" style="display:block;width: 100%; height: 100%;padding:0;margin:0;">
                                    <iframe id="pdf-src-box"
                                        src="<?php echo ST_PROQYZ_PLUGIN_URL; ?>includes/libs/lms/pdf/web/viewer.html?file=<?php echo $this->solution_paper_pdf; ?>"
                                        frameborder="0" title="PDF Viewer" x-theme-special=""
                                        class="pdf-modal-popup-iframe theme-special"
                                        style="width:100%;height:100%;padding:0;margin:0;"
                                    ></iframe>
                                    <div class="popup-iframe-overlay"></div>
                                </div>
                                <div class="sidebar_wrapper">
                                    <div class="sidebar__header">
                                        <div class="sidebar__title">
                                            <h2 class="sidebar__title-text">
                                                <?php echo $this->quiz->title; ?>
                                            </h2>
                                        </div>    
                                        <button class="realtest-header__bt-review" data-dismiss="modal">
                                            <i class="fa fa-times"></i>
                                        </button>
                                    </div>
                                    <div class="sidebar__content">
                                        <?php echo $this->get_questions_html("sidebar", $report); ?>
                                    </div>
                                    <div class="sidebar__footer p-0">
                                        <button id="btn-submit" class="btn btn-primary" type="button" style="height:100%;">
                                            Submit
                                        </button>
                                    </div>
                                    
                                </div>
                                <div class="floating-timer">
                                    <button class="realtest-header__bt-review" data-dismiss="modal">
                                        <i class="fa fa-times"></i>
                                    </button>
                                </div>
                                <div class="sidebar_pan" role="button">
                                    <div class="sidebar_pan__expand">
                                        <i class="fa fa-chevron-left"></i>
                                        <i class="fa fa-chevron-right"></i>
                                    </div>
                                </div>
                                <div class="float_wrapper">
                                    <?php echo $this->get_questions_html("float", $report); ?>
                                </div>

                            </div>                        



                            
                        </div>
                    </div>
                </div>

                
                <!--begin::MODALS-->
                <?php echo $this->modals(); ?>
                <!--end::MODALS-->
                

                <?php echo $this->footer(); ?>
            </body>
            </html>
        <?php return ob_get_clean();
    }

    public function get_questions_html($type = "", $report = []){
        $A                      = ['A','B','C','D','E','F'];
        $a                      = ['a','b','c','d','e','f'];
        $i                      = ['i', 'ii', 'iii', 'iv', 'v', 'vi'];
        $I                      = ['I', 'II', 'III', 'IV', 'V', 'VI'];
        $true_false_notGiven    = ['True','False','Not Given'];
        $yes_no_notGiven        = ['Yes', 'No', 'Not Given'];
        $number                 = ['1','2','3','4','5','6'];

        $number_of_questions    = isset($this->quiz_config->numberOfQuestions)? (int) $this->quiz_config->numberOfQuestions : 0;
        $number_of_options      = isset($this->quiz_config->numberOfOptions)? (int) $this->quiz_config->numberOfOptions : 0;
        $options_type           = isset($this->quiz_config->optionsType)? $this->quiz_config->optionsType : 'A';
        $options                = $A;

        switch ($options_type) {
            case 'A': 
                $options = array_slice($A, 0, $number_of_options);
                break;
        
            case 'a':
                $options = array_slice($a, 0, $number_of_options);
                break;
        
            case 'i':
                $options = array_slice($i, 0, $number_of_options);
                break;
        
            case 'I':
                $options = array_slice($I, 0, $number_of_options);
                break;
        
            case '1':
                $options = array_slice($number, 0, $number_of_options);
                break;
        
            case 'true-false-notgiven':
                $options = array_slice($true_false_notGiven, 0, 3); // Always 3 options
                break;
        
            case 'yes-no-notgiven':
                $options = array_slice($yes_no_notGiven, 0, 3); // Always 3 options
                break;
        
            default:
                $options = []; // Default to an empty array if the type is invalid
                break;
        }
        
        if( $this->result ) {
            $user_answers           = isset($report->user_response->answers)? (array) $report->user_response->answers : [];
            $correct_answers        = isset($report->correct_answers)? (array) $report->correct_answers : [];
        }
        
        
        $sidebar_html = "";
        $float_question_html = "";
        $float_options_html = "";
        for($qi = 0; $qi < $number_of_questions; $qi++){ 

            $is_attempted = false;
            $is_correct   = true;
            # options html
            ob_start(); 
            foreach($options as $oi => $option){ 
                # check if this question is set
                $correct_option_class = '';
                $user_option_class = "";

                if($this->result) {
                    if(isset($correct_answers[$qi]) && (int) $correct_answers[$qi] == $oi) {
                        # then get correct answer and mark it
                        $correct_option_class = '-correct-answer';
                    }

                    if(isset($correct_answers[$qi])){
                        if(isset($user_answers[$qi])) {
                            $is_attempted = true;
                            if((int) $user_answers[$qi] == $oi ){
                                # this is correct answer
                                if((int) $correct_answers[$qi] == $oi) {
                                    $user_option_class = '-attempted -correct';
                                } else {
                                    $is_correct = false;
                                    $user_option_class = '-attempted -wrong';
                                }
                            }
                        }
                    }
                }

            
                # for option types
                if($type === "sidebar") { ?>
                    <li class="pdf-quiz__option <?php echo $correct_option_class; ?> <?php echo $user_option_class; ?>" data-pdf-type="option" data-alignment="sidebar" data-q_index="<?php echo $qi; ?>" data-o_index="<?php echo $oi; ?>">
                        <span class="pdf-quiz__option-text">
                            <?php echo $option; ?>
                        </span>
                    </li>
                <?php } else if($type === 'float') { ?>
                    <li class="pdf-quiz__float-option <?php echo $correct_option_class; ?> <?php echo $user_option_class; ?>" data-pdf-type="option" data-alignment="footer" data-q_index="<?php echo $qi; ?>" data-o_index="<?php echo $oi; ?>">
                        <span class="pdf-quiz__float-option-text">
                            <?php echo $option; ?>
                        </span>
                    </li>
                <?php }
            }
            $options_html = ob_get_clean();

            $question_class = "";
            if( $this->result ) {
                if( $is_attempted ) {
                    if( $is_correct ) {
                        $question_class = "-attempted -correct";
                    } else {
                        $question_class = "-attempted -wrong";
                    }
                } else {
                    $question_class = "-unattempt";
                }
            }

            # question html
            if( $type === "sidebar") { 
                ob_start(); ?>
                <li class="pdf-quiz__question" data-pdf-type="question" data-alignment="sidebar" data-q_index="<?php echo $qi; ?>">
                    <div class="pdf-quiz__question-number <?php echo $question_class; ?>">
                        <span class="pdf-quiz__question-number-text">
                            <?php echo $qi+1; ?>.
                        </span>
                    </div>
                    <ul class="pdf-quiz__question-options">
                        <?php echo $options_html; ?>
                    </ul>
                </li>
                <?php $sidebar_html .= ob_get_clean(); 
            } else if( $type === "float" ) { 
                ob_start(); ?>
                <li id="float-questions-<?php echo $qi; ?>" class="pdf-quiz__float-question <?php echo $question_class; ?>" data-pdf-type="question" data-alignment="footer" data-q_index="<?php echo $qi; ?>">
                    <span class="pdf-quiz__float-question-text">
                        Q.<?php echo $qi+1; ?>
                    </span>
                </li>
                <?php $float_question_html .= ob_get_clean(); 
                ob_start(); ?>
                <div class="float_wrapper-options fade " id="float-options-<?php echo $qi; ?>" data-q_index="<?php echo $qi; ?>" style="display:none;">
                    <ul class="float__options-ul">
                        <?php echo $options_html; ?>
                    </ul>
                </div>
                <?php $float_options_html .= ob_get_clean();
            }
            

        }
        

        ob_start();    
        if($type === "sidebar"){ ?>
            <ul class="pdf-quiz__questions-list -for-sidebar">
                <?php echo $sidebar_html; ?>
            </ul>
        <?php } else if($type === "float") { ?>
            <div class="float_wrapper__questions">
                <ul class="float__questions-ul">
                    <?php echo $float_question_html; ?>
                </ul>                
            </div>
            <div class="float_wrapper__options-container">
                <?php echo $float_options_html; ?>     
            </div>
        <?php }
        return ob_get_clean();
    }


    public function login_notice() {
        if(!is_user_logged_in()) {
            global 
			$ST_OPTION_st_proqyz__auth_redirect_enable_key,
			$ST_OPTION_st_proqyz__auth_signup_url_key,
			$ST_OPTION_st_proqyz__auth_signin_url_key;


            $redirect_url           = "https://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
            
            $enable_auth_redirect   = get_option($ST_OPTION_st_proqyz__auth_redirect_enable_key,0);
            $auth_signin_url        = get_option($ST_OPTION_st_proqyz__auth_signin_url_key,"/wp-login.php");
            $auth_signup_url        = get_option($ST_OPTION_st_proqyz__auth_signup_url_key,"/wp-login.php");
            $url                    = $auth_signin_url;
            $url                    .= $enable_auth_redirect == 1? '?redirect_to='.$redirect_url : '';


            ob_start(); ?>
            <div class="test-notice modal-test-notice"> 
                Please login to take the test. Click 
                <a class="test-notice__link" href="<?php echo $url; ?>">Here</a> 
                or the button below to login now. 
                <a href="<?php echo $url; ?>" class="test-notice__btn iot-bt">
                    Log in
                </a>
            </div>
            <?php return ob_get_clean();
        }
    }

    /**
     * changes @1.2.1.2
     */
    public function modals(){
        if($this->result){
            ob_start(); ?>
                
            <?php return ob_get_clean();
        } else {
            ob_start(); ?>
                <!--begin::quiz finish popup-->
                <div class="modal fade modal-time-up" id="modal-finish" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" data-keyboard="false" data-backdrop="static" style="display:none;" >
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-body">
                                <div class="modal-time-up__icon"></div>
                                <h4 class="modal-time-up__title">This test has been done</h4>
                                <div class="modal-time-up__footer">
                                    <button type="button" class="modal-time-up__btn iot-grbt -main-color -btn-redirect-result">
                                        You are being redirected to result page
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--end::quiz finish popup-->   
                
                <!--begin::no question attempt but timesup-->
                <div class="modal fade modal-time-up" id="modal-time-up-no-taketest" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" data-keyboard="false" data-backdrop="static" style="display:none;">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content">
                            <div class="modal-body">
                                <div class="modal-time-up__icon"></div>
                                <h4 class="modal-time-up__title">Time is up</h4>
                                <div class="modal-time-up__desc">
                                    However, we realize that you have not completed the test yet. <br />
                                    Please click the "Retake" button below to take the test again before submitting.
                                </div>
                                <div class="modal-time-up__footer">
                                    <button type="button" class="modal-time-up__btn iot-grbt -main-color -btn-retake">
                                        Retake<span class="ioticon-send-v2"></span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--end::no question attempt but timesup-->

                <!--begin::submit test-->
                <div class="modal fade modal-time-up" id="modal-time-up" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" data-keyboard="false" data-backdrop="static" style="display:none;">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content">
                            <div class="modal-body">
                                <div class="modal-time-up__icon"></div>
                                <h4 class="modal-time-up__title">Time is up</h4>
                                <div class="modal-time-up__footer">
                                    <button type="button" class="modal-time-up__btn iot-grbt -main-color -btn-submit-test">
                                        Submit and Review Answers<span class="ioticon-send-v2"></span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--end::submit test-->

                <!--begin::submit test button click - modal appear-->
                <div class="modal fade modal-submit-test" id="modal-submit-test" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" style="display:none;" data-keyboard="false" data-backdrop="static">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content">
                            <i class="ioticon-x modal-submit-test__close-modal" data-dismiss="modal" aria-label="Close"></i>
                            <div class="modal-body">
                                <div class="modal-submit-test__icon"></div>
                                <h4 class="modal-submit-test__title">Are you sure you want to submit?</h4>
                                <div class="modal-submit-test__footer">
                                    <button type="button" class="modal-submit-test__btn iot-grbt -white proqyz_btn" data-dismiss="modal">
                                        Cancel
                                    </button>
                                    <button id="modal-submit-test__btn" data-id="<?php echo $this->_id; ?>" data-category="<?php echo $this->category; ?>" type="button" class="proqyz_btn modal-submit-test__btn iot-grbt -main-color -btn-submit-test">
                                        Submit and Review Answers
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--end::submit test button click - modal appear-->

                <!--begin::no question attempt but tried submitting-->
                <div class="modal fade modal-submit-test" id="modal-do-not-work-lr" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" style="display:none;">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content">
                            <i class="ioticon-x modal-submit-test__close-modal" data-dismiss="modal" aria-label="Close"></i>
                            <div class="modal-body">
                                <div class="modal-submit-test__icon"></div>
                                <h4 class="modal-submit-test__title">Please select an answer!</h4>
                            </div>
                        </div>
                    </div>
                </div>
                <!--end::no question attempt but tried submitting-->

                <!--begin::resume test-->
                <div class="modal fade modal-view-solution" id="modal-resume" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" style="display: none;" data-keyboard="false" data-backdrop="static">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content"> 
                            
                            <div class="modal-body">
                                <div class="modal-view-solution__icon"></div>
                                <h4 class="modal-view-solution__title">Are you sure you want to Resume your test?</h4>
                                <p class="modal-view-solution__caption"> 
                                    *This action will <strong>NOT SUBMIT</strong> your test and your answers will be <strong>LOST</strong>
                                </p>
                                <div class="modal-view-solution__footer"> 
                                    <button id="btn-continue" class="modal-view-solution__btn iot-grbt -main-color">
                                        Continue 
                                    </button> 
                                    <button id="btn-restart" type="button" class="modal-view-solution__btn iot-grbt -white">
                                        Restart
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--end::resume test-->


            <?php return ob_get_clean();
        }
    }
    
    public function seconds_to_hms( $seconds ) {
        // Format the seconds into an H:i:s string
        $formatted_time = gmdate('H:i:s', $seconds);
    
        // If the formatted time starts with "00:", remove it
        if (strpos($formatted_time, '00:') === 0) {
            $formatted_time = substr($formatted_time, 3);
        }
    
        return $formatted_time;
    }

    /**
     * changes @1.2.1.2
     */
    public function dynamic_css_imports() {
        $site_url = site_url();
        ob_start(); ?>
        <style>
            @font-face {
                font-family: "Glyphicons Halflings";
                src: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/glyphicons-halflings-regular.eot);
                src: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/glyphicons-halflings-regular.eot#iefix)
                    format("embedded-opentype"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/glyphicons-halflings-regular.woff2) format("woff2"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/glyphicons-halflings-regular.woff) format("woff"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/glyphicons-halflings-regular.ttf) format("truetype"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular)
                    format("svg");
            }

            @font-face {
                font-family: "FontAwesome";
                src: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/fontawesome-webfont.eot?v=4.7.0);
                src: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/fontawesome-webfont.eot#iefix&v=4.7.0)
                    format("embedded-opentype"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/fontawesome-webfont.woff2?v=4.7.0) format("woff2"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/fontawesome-webfont.woff?v=4.7.0) format("woff"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/fontawesome-webfont.ttf?v=4.7.0) format("truetype"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular)
                    format("svg");
                font-weight: normal;
                font-style: normal;
            }

            @font-face {
                font-family: "Ionicons";
                src: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/ionicons.eot?v=2.0.1);
                src: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/ionicons.eot?v=2.0.1#iefix)
                    format("embedded-opentype"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/ionicons.ttf?v=2.0.1) format("truetype"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/ionicons.woff?v=2.0.1) format("woff"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/ionicons.svg?v=2.0.1#Ionicons) format("svg");
                font-weight: normal;
                font-style: normal;
            }

            @font-face {
                font-family: "FontAwesome";
                src: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/fontawesome-webfont.eot);
                src: local("FontAwesome"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/fontawesome-webfont.eot#iefix)
                    format("embedded-opentype"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/fontawesome-webfont.woff2) format("woff2"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/fontawesome-webfont.woff) format("woff"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/fontawesome-webfont.ttf) format("truetype"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/fontawesome-webfont.svg#fontawesomeregular)
                    format("svg");
                font-weight: normal;
                font-style: normal;
                font-display: swap;
            }

            @font-face {
                font-family: "Nunito";
                font-style: normal;
                font-weight: 300;
                src: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/nunito-v14-latin-300.eot);
                src: local("Nunito Light"), local("Nunito-Light"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/nunito-v14-latin-300.eot#iefix)
                    format("embedded-opentype"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/nunito-v14-latin-300.woff2) format("woff2"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/nunito-v14-latin-300.woff) format("woff"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/nunito-v14-latin-300.ttf) format("truetype"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/nunito-v14-latin-300.svg#Nunito) format("svg");
                font-display: swap;
            }

            @font-face {
                font-family: "Nunito";
                font-style: normal;
                font-weight: 400;
                src: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/nunito-v14-latin-regular.eot);
                src: local("Nunito Regular"), local("Nunito-Regular"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/nunito-v14-latin-regular.eot#iefix)
                    format("embedded-opentype"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/nunito-v14-latin-regular.woff2) format("woff2"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/nunito-v14-latin-regular.woff) format("woff"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/nunito-v14-latin-regular.ttf) format("truetype"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/nunito-v14-latin-regular.svg#Nunito) format("svg");
                font-display: swap;
            }

            @font-face {
                font-family: "Nunito";
                font-style: italic;
                font-weight: 400;
                src: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/nunito-v14-latin-italic.eot);
                src: local("Nunito Italic"), local("Nunito-Italic"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/nunito-v14-latin-italic.eot#iefix)
                    format("embedded-opentype"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/nunito-v14-latin-italic.woff2) format("woff2"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/nunito-v14-latin-italic.woff) format("woff"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/nunito-v14-latin-italic.ttf) format("truetype"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/nunito-v14-latin-italic.svg#Nunito) format("svg");
                font-display: swap;
            }

            @font-face {
                font-family: "Nunito";
                font-style: normal;
                font-weight: 600;
                src: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/nunito-v14-latin-600.eot);
                src: local("Nunito SemiBold"), local("Nunito-SemiBold"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/nunito-v14-latin-600.eot#iefix)
                    format("embedded-opentype"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/nunito-v14-latin-600.woff2) format("woff2"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/nunito-v14-latin-600.woff) format("woff"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/nunito-v14-latin-600.ttf) format("truetype"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/nunito-v14-latin-600.svg#Nunito) format("svg");
                font-display: swap;
            }

            @font-face {
                font-family: "Nunito";
                font-style: normal;
                font-weight: 700;
                src: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/nunito-v14-latin-700.eot);
                src: local("Nunito Bold"), local("Nunito-Bold"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/nunito-v14-latin-700.eot#iefix)
                    format("embedded-opentype"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/nunito-v14-latin-700.woff2) format("woff2"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/nunito-v14-latin-700.woff) format("woff"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/nunito-v14-latin-700.ttf) format("truetype"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/nunito-v14-latin-700.svg#Nunito) format("svg");
                font-display: swap;
            }

            @font-face {
                font-family: "Nunito";
                font-style: normal;
                font-weight: 800;
                src: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/nunito-v14-latin-800.eot);
                src: local("Nunito ExtraBold"), local("Nunito-ExtraBold"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/nunito-v14-latin-800.eot#iefix)
                    format("embedded-opentype"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/nunito-v14-latin-800.woff2) format("woff2"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/nunito-v14-latin-800.woff) format("woff"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/nunito-v14-latin-800.ttf) format("truetype"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/nunito-v14-latin-800.svg#Nunito) format("svg");
                font-display: swap;
            }

            @font-face {
                font-family: "Nunito";
                font-style: normal;
                font-weight: 900;
                src: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/nunito-v14-latin-900.eot);
                src: local("Nunito Black"), local("Nunito-Black"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/nunito-v14-latin-900.eot#iefix)
                    format("embedded-opentype"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/nunito-v14-latin-900.woff2) format("woff2"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/nunito-v14-latin-900.woff) format("woff"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/nunito-v14-latin-900.ttf) format("truetype"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/nunito-v14-latin-900.svg#Nunito) format("svg");
                font-display: swap;
            }

            @font-face {
                font-family: "Montserrat";
                font-style: normal;
                font-weight: 300;
                src: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/montserrat-v15-latin-300.eot);
                src: local("Montserrat Light"), local("Montserrat-Light"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/montserrat-v15-latin-300.eot#iefix)
                    format("embedded-opentype"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/montserrat-v15-latin-300.woff2) format("woff2"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/montserrat-v15-latin-300.woff) format("woff"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/montserrat-v15-latin-300.ttf) format("truetype"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/montserrat-v15-latin-300.svg#Montserrat) format("svg");
                font-display: swap;
            }

            @font-face {
                font-family: "Montserrat";
                font-style: normal;
                font-weight: 400;
                src: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/montserrat-v15-latin-regular.eot);
                src: local("Montserrat Regular"), local("Montserrat-Regular"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/montserrat-v15-latin-regular.eot#iefix)
                    format("embedded-opentype"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/montserrat-v15-latin-regular.woff2) format("woff2"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/montserrat-v15-latin-regular.woff) format("woff"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/montserrat-v15-latin-regular.ttf) format("truetype"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/montserrat-v15-latin-regular.svg#Montserrat)
                    format("svg");
                font-display: swap;
            }

            @font-face {
                font-family: "Montserrat";
                font-style: normal;
                font-weight: 500;
                src: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/montserrat-v15-latin-500.eot);
                src: local("Montserrat Medium"), local("Montserrat-Medium"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/montserrat-v15-latin-500.eot#iefix)
                    format("embedded-opentype"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/montserrat-v15-latin-500.woff2) format("woff2"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/montserrat-v15-latin-500.woff) format("woff"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/montserrat-v15-latin-500.ttf) format("truetype"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/montserrat-v15-latin-500.svg#Montserrat) format("svg");
                font-display: swap;
            }

            @font-face {
                font-family: "Montserrat";
                font-style: italic;
                font-weight: 400;
                src: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/montserrat-v15-latin-italic.eot);
                src: local("Montserrat Italic"), local("Montserrat-Italic"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/montserrat-v15-latin-italic.eot#iefix)
                    format("embedded-opentype"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/montserrat-v15-latin-italic.woff2) format("woff2"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/montserrat-v15-latin-italic.woff) format("woff"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/montserrat-v15-latin-italic.ttf) format("truetype"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/montserrat-v15-latin-italic.svg#Montserrat)
                    format("svg");
                font-display: swap;
            }

            @font-face {
                font-family: "Montserrat";
                font-style: normal;
                font-weight: 600;
                src: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/montserrat-v15-latin-600.eot);
                src: local("Montserrat SemiBold"), local("Montserrat-SemiBold"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/montserrat-v15-latin-600.eot#iefix)
                    format("embedded-opentype"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/montserrat-v15-latin-600.woff2) format("woff2"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/montserrat-v15-latin-600.woff) format("woff"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/montserrat-v15-latin-600.ttf) format("truetype"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/montserrat-v15-latin-600.svg#Montserrat) format("svg");
                font-display: swap;
            }

            @font-face {
                font-family: "Montserrat";
                font-style: normal;
                font-weight: 700;
                src: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/montserrat-v15-latin-700.eot);
                src: local("Montserrat Bold"), local("Montserrat-Bold"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/montserrat-v15-latin-700.eot#iefix)
                    format("embedded-opentype"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/montserrat-v15-latin-700.woff2) format("woff2"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/montserrat-v15-latin-700.woff) format("woff"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/montserrat-v15-latin-700.ttf) format("truetype"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/montserrat-v15-latin-700.svg#Montserrat) format("svg");
                font-display: swap;
            }

            @font-face {
                font-family: "Montserrat";
                font-style: normal;
                font-weight: 800;
                src: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/montserrat-v15-latin-800.eot);
                src: local("Montserrat ExtraBold"), local("Montserrat-ExtraBold"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/montserrat-v15-latin-800.eot#iefix)
                    format("embedded-opentype"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/montserrat-v15-latin-800.woff2) format("woff2"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/montserrat-v15-latin-800.woff) format("woff"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/montserrat-v15-latin-800.ttf) format("truetype"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/montserrat-v15-latin-800.svg#Montserrat) format("svg");
                font-display: swap;
            }

            @font-face {
                font-family: "Montserrat";
                font-style: normal;
                font-weight: 900;
                src: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/montserrat-v15-latin-900.eot);
                src: local("Montserrat Black"), local("Montserrat-Black"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/montserrat-v15-latin-900.eot#iefix)
                    format("embedded-opentype"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/montserrat-v15-latin-900.woff2) format("woff2"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/montserrat-v15-latin-900.woff) format("woff"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/montserrat-v15-latin-900.ttf) format("truetype"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/montserrat-v15-latin-900.svg#Montserrat) format("svg");
                font-display: swap;
            }

            @font-face {
                font-family: "iot-fonts";
                src: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/iot-fonts.eot?sex6nu=);
                src: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/iot-fonts.eot?sex6nu=#iefix)
                    format("embedded-opentype"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/iot-fonts.ttf?sex6nu=) format("truetype"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/iot-fonts.woff?sex6nu=) format("woff"),
                    url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/fonts/iot-fonts.svg?sex6nu=#iot-fonts) format("svg");
                font-weight: normal;
                font-style: normal;
                font-display: block;
            }

            .practice-item__icon {
                display: inline-block;
                width: 34px;
                height: 34px;
                background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/shortcodes/course/default/dist/svgs/headphone-duotone.svg) center / contain no-repeat;
            }

            .practice-item__icon.-reading {
                background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/shortcodes/course/default/dist/svgs/notepad.svg);
            }
            
            .practice-item__icon.-pdf-quiz {
                background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/shortcodes/course/default/dist/img/pdf-quiz/pdf-quiz.png);
            }

            .practice-item__icon.-writing {
                background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/shortcodes/course/default/dist/svgs/pennibstraight.svg);
            }

            .practice-item__icon.-speaking {
                background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/shortcodes/course/default/dist/svgs/microphone.svg);
            }

            .reading-test-result a span.icon-locale {
                background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/reading/icon_locale.png);
            }

            .listening-test-result a span.icon-locale {
                background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/listening/icon_locale1.png);
            }



            @font-face {
            font-family: swiper-icons;
            src: url("data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA");
            font-weight: 400;
            font-style: normal;
            }
            .take-test .iot-option {
            display: inline-block;
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 24.2.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='12px' height='4px' viewBox='0 0 17.5 9.5' style='enable-background:new 0 0 17.5 9.5;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill-rule:evenodd;clip-rule:evenodd;%7D%0A%3C/style%3E%3Cg id='Arrow_x2F_Chevrons'%3E%3Cpath fill='%23294563' id='Vector__x28_Stroke_x29_' class='st0' d='M0.2,0.2c0.3-0.3,0.8-0.3,1.1,0l7.5,7.5l7.5-7.5c0.3-0.3,0.8-0.3,1.1,0 s0.3,0.8,0,1.1l-8,8C9,9.6,8.5,9.6,8.2,9.3l-8-8C-0.1,1-0.1,0.5,0.2,0.2z'/%3E%3C/g%3E%3C/svg%3E%0A")
                right 10px center no-repeat;
            width: 100px;
            height: 32px;
            padding: 0px 10px;
            padding-right: 20px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            vertical-align: middle;
            font-size: 14px;
            color: #282828;
            border-radius: 100px;
            border: 1px solid var(--primary-primary-100, #bdc5cf);
            -webkit-transition: border-color ease-in-out 0.15s;
            -o-transition: border-color ease-in-out 0.15s;
            transition: border-color ease-in-out 0.15s;
            }
            .take-test .gutter.gutter-vertical {
            cursor: ns-resize !important;
            background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFCAYAAABSIVz6AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAsSURBVChTYzxz5sx/BiAwNjZmBNFnz56lC58JRAwEYPz/H+wAuoORFtQMDADGbkHLElXbCwAAAABJRU5ErkJggg==");
            }
            .reading-footer .rf-bar .expand {
            display: inline-block;
            width: 30px;
            height: 30px;
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_expand.png) center no-repeat scroll;
            cursor: pointer;
            position: absolute;
            top: 10px;
            right: 11px;
            }
            .reading-footer .rf-bar .rf-bar-time:before {
            content: "";
            position: absolute;
            top: 8px;
            left: 0;
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/time_icon.png);
            width: 30px;
            height: 30px;
            margin: 0px 2px 0px 0px;
            display: inline-block;
            }
            .reading-footer .rf-bar .rf-bar-pallete .pallete-title:before {
            content: "";
            position: absolute;
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/pallete_icon.png) center no-repeat scroll;
            width: 20px;
            height: 20px;
            background-size: 20px;
            margin: 2px 5px 0px 0px;
            display: inline-block;
            position: relative;
            top: 4px;
            }
            .reading-footer .rf-content .close-rf {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_expand.png) center no-repeat;
            width: 20px;
            height: 20px;
            display: block;
            cursor: pointer;
            position: absolute;
            top: 7px;
            right: 15px;
            z-index: 999;
            opacity: 0.9;
            }
            .reading-footer .box-palleted .bp-bar .pbb-caption span {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/pallete_icon.png) center no-repeat;
            width: 20px;
            height: 20px;
            background-size: 20px;
            margin: 2px 10px 0px 0px;
            display: inline-block;
            position: relative;
            top: 2px;
            }
            .reading-footer .question-panel .qp-caption span em {
            float: left;
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_pallete.png) no-repeat center center;
            width: 20px;
            height: 20px;
            margin: 5px 5px 0px 0px;
            }
            .reading-footer .rfc-button a.question-pl {
            background: #f3f3f3 url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_quest_pallete.png) 5px center
                no-repeat scroll;
            background-size: 16px;
            }
            .reading-footer .rfc-button a.review span {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_review1.png) center no-repeat scroll;
            width: 20px;
            height: 20px;
            }
            .reading-footer .rfc-button a.solution span {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_lego_green.png) center no-repeat
                scroll;
            width: 20px;
            height: 20px;
            }
            .reading-footer .rfc-button a.submit span {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_submit.png) center no-repeat scroll;
            width: 19px;
            height: 20px;
            }
            .reading-footer .rf-time .icon-time {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_time1.png) no-repeat center center;
            width: 52px;
            height: 56px;
            margin: 10px auto 0px auto;
            }
            .reading-footer .rf-button-wrap .rf-button span.icon-ask {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_ask2.png);
            }
            .reading-footer .rf-button-wrap .rf-button span.icon-review {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_review1.png);
            }
            .reading-footer .rf-button-wrap .rf-button span.icon-solution {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_lego2.png);
            }
            .reading-footer .rf-button-wrap .rf-button span.icon-submit {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_submit.png);
            }
            .reading-footer .rf-button-wrap .rf-button span.icon-pallete {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_pallete1.png);
            }
            .reading-footer.cyan .rf-button-wrap .rf-button span.icon-ask {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_ask4.png);
            }
            .reading-footer.cyan .rf-button-wrap .rf-button span.icon-review {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_review3.png);
            }
            .reading-footer.cyan .rf-button-wrap .rf-button span.icon-pallete {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_pallete2.png);
            }
            .reading-footer.cyan .rf-button-wrap .rf-button span.icon-solution {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_lego3.png);
            }
            .reading-footer.cyan .rf-button-wrap .rf-button span.icon-submit {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_submit1.png);
            }
            .reading-footer.cyan .rfc-button a.review span {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_review.png);
            width: 20px;
            height: 20px;
            }
            .reading-footer.cyan .rfc-button a.solution span {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_lego_green.png);
            width: 20px;
            height: 20px;
            }
            .reading-footer.cyan .rfc-button a.submit span {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_submit1.png);
            width: 19px;
            height: 20px;
            }

            .show-palette .reading-footer .rf-bar .expand {
            right: 8px;
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_expandmb_down.png) center no-repeat
                scroll;
            }
            .show-palette .reading-footer .rf-content .close-rf {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_expandmb_down.png) center no-repeat
                scroll;
            right: -5px;
            }
            .show-palette .reading-footer .rfc-button .expand {
            position: absolute;
            top: -8px;
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_expand_down.png) center no-repeat;
            }
            div.listen-from-here span.icon-listen {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_listen1.png) center no-repeat;
            background-size: contain;
            width: 18px;
            height: 18px;
            display: inline-block;
            position: relative;
            top: 4px;
            margin: -1px 6px 0px 0px;
            }
            div.listen-from-here:hover span.icon-listen {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_listen1_mb.png) center no-repeat;
            background-size: contain;
            }
            .listening-page .end-the-test a.btn-submit span {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_submit_listening.png) no-repeat center
                center;
            display: inline-block;
            position: relative;
            width: 19px;
            height: 20px;
            margin: 0px 8px 0px 0px;
            top: 5px;
            }
            .listening-page .end-the-test .report span {
            display: inline-block;
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/report_icon_grey.png);
            width: 12px;
            height: 12px;
            display: inline-block;
            position: relative;
            margin: 0px 5px 0px 0px;
            top: 1px;
            }
            .listening-test-page .reading-footer.cyan .rfc-time span.clock {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/time_icon.png) center no-repeat;
            width: 28px;
            height: 28px;
            display: block;
            margin: 0 auto;
            }
            .listening-test-page .reading-footer.cyan .rfc-button a.submit span {
            width: 16px;
            height: 17px;
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_submit_ls.png);
            background-size: contain;
            }
            .listening-test-page .reading-footer.cyan .rfc-button a.review span {
            width: 18px;
            height: 18px;
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_review_ls.png);
            background-size: contain;
            }
            .listening-test-page .reading-footer.cyan .rfc-button a.solution span {
            width: 18px;
            height: 18px;
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_lego_ls.png);
            background-size: contain;
            }
            .listening-test-page.show-palette .reading-footer .rfc-button a.question-pl {
                background: #f3f3f3 url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_quest_palletecyan.png) 5px
                center no-repeat scroll;
                background-size: 16px;
            }
            .listening-test-page.show-palette .reading-footer .rfc-button a.question-pl {
                background: #f3f3f3 url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_quest_palletecyan.png) 5px
                center no-repeat scroll;
                background-size: 16px;
                top: 0;
            }
            .box-tag .tag-icon {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_tag.png) no-repeat center center;
            width: 28px;
            height: 28px;
            display: inline-block;
            position: relative;
            top: 9px;
            }
            .tag-item .close-tag {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_close.png) no-repeat center center;
            width: 8px;
            height: 8px;
            position: relative;
            display: inline-block;
            margin: 0px -5px 0px 5px;
            top: 0px;
            }
            .mostview-item .mi-tag em {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_tag1.png) no-repeat center center;
            width: 14px;
            height: 14px;
            display: inline-block;
            position: relative;
            top: 2px;
            margin: 0px 4px 0px 0px;
            }
            .mostview-item .mi-view em {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_view.png) no-repeat center center;
            width: 16px;
            height: 12px;
            display: inline-block;
            position: relative;
            top: 2px;
            margin: 0px 4px 0px 0px;
            }
            .tab-test ul li a span.icon-alltest {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_alltest.png) no-repeat center center;
            width: 20px;
            height: 20px;
            display: inline-block;
            margin: 0px 4px 0px 0px;
            position: relative;
            top: 5px;
            }
            .tab-test ul li a span.icon-academic {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_academic.png) no-repeat center center;
            width: 21px;
            height: 18px;
            display: inline-block;
            margin: 0px 4px 0px 0px;
            position: relative;
            top: 5px;
            }
            .tab-test ul li a span.icon-general-traning {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_genral.png) no-repeat center center;
            width: 18px;
            height: 20px;
            display: inline-block;
            margin: 0px 4px 0px 0px;
            position: relative;
            top: 5px;
            }
            .searchbox button {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_search.png) no-repeat center center;
            width: 20px;
            height: 20px;
            position: absolute;
            top: 5px;
            left: 10px;
            border: none;
            outline: none;
            background-color: transparent;
            }
            .news-item .mi-tag em {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_tag1.png) no-repeat center center;
            width: 14px;
            height: 14px;
            display: inline-block;
            position: relative;
            top: 2px;
            margin: 0px 4px 0px 0px;
            }
            .da-wrap em {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_calendar1.png) no-repeat center center;
            display: block;
            width: 20px;
            height: 20px;
            position: absolute;
            left: 6px;
            top: 3px;
            z-index: 1;
            }
            .analytic-score .as-col p em {
            display: inline-block;
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_alltest.png) no-repeat center center;
            width: 25px;
            height: 25px;
            position: relative;
            margin: 0px 4px 0px 0px;
            top: 4px;
            }
            .analytic-score .as-col p em.icon-chart {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_chart.png) no-repeat center center;
            }
            .analytic-score .as-col p em.icon-target {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_target.png) no-repeat center center;
            }
            .analytic-score .as-col p em.icon-time {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_time2.png) no-repeat center center;
            }
            .analytic-score .as-col p em.icon-cup {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_cup.png) no-repeat center center;
            }
            .ic-top .btn-show-performance {
            display: block;
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_arrow_down.png) no-repeat center
                center;
            width: 14px;
            height: 14px;
            position: absolute;
            top: 15px;
            right: 5px;
            cursor: pointer;
            }
            .ic-top .ic-icon div,
            .ic-top .ic-icon span {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_listen.png) no-repeat center center;
            width: 50px;
            height: 50px;
            margin: 0px auto;
            display: block;
            }
            .ic-top .ic-icon.reading div,
            .ic-top .ic-icon.reading span {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_reading.png) no-repeat center center;
            }
            .ic-top .ic-icon.writing div,
            .ic-top .ic-icon.writing span {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_writing.png) no-repeat center center;
            }
            .ic-top .ic-icon.speaking div,
            .ic-top .ic-icon.speaking span {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_speaking.png) no-repeat center center;
            }
            .avatar-profile div {
            width: 100%;
            height: 110px;
            background-color: #d4dae0;
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_user2.png);
            background-repeat: no-repeat;
            background-position: center center;
            background-size: 40px 40px;
            }
            .modal-submit .control-modal-button a span {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_modal_submit.png) no-repeat center
                center;
            }
            .control-modal-button a span {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_view_solution.png) no-repeat center
                center;
            width: 22px;
            height: 22px;
            display: inline-block;
            position: relative;
            top: 5px;
            margin: 0px 5px 0px 0px;
            }
            .control-modal-button a.btn-retake span {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_flash.png) no-repeat center center;
            width: 16px;
            height: 22px;
            display: inline-block;
            position: relative;
            top: 5px;
            margin: 0px 5px 0px 0px;
            }
            .control-modal-button a.btn-continute span {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_lego1.png) no-repeat center center;
            width: 22px;
            height: 22px;
            display: inline-block;
            position: relative;
            top: 5px;
            margin: 0px 5px 0px 0px;
            }
            .control-modal-button a.btn-cancel span {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_cancel_button.png) no-repeat left
                center;
            width: 18px;
            height: 18px;
            display: inline-block;
            position: relative;
            top: 4px;
            margin: 0px 5px 0px 0px;
            }
            .modal-auto .iot-modal-wrapper .ion-android-close:before {
            content: "";
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_cancel_button.png) no-repeat left
                center;
            width: 18px;
            height: 18px;
            }
            .bp-control-time-left a span {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_submit2.png) no-repeat center center;
            width: 22px;
            height: 22px;
            display: inline-block;
            position: relative;
            top: 5px;
            margin: 0px 5px 0px 0px;
            }
            .bp-control-time-left a.btn-retake span {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_flash.png) no-repeat center center;
            width: 16px;
            height: 22px;
            display: inline-block;
            position: relative;
            top: 5px;
            margin: 0px 5px 0px 0px;
            }
            .bp-control-time-left a.btn-continute span {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_lego1.png) no-repeat center center;
            width: 22px;
            height: 22px;
            display: inline-block;
            position: relative;
            top: 5px;
            margin: 0px 5px 0px 0px;
            }
            .context-menu .cm-item.cm-pink {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/fill1.png);
            }
            .context-menu .cm-item.cm-green {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/fill2.png);
            }
            .context-menu .cm-item.cm-blue {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/fill3.png);
            }
            .context-menu .cm-item.cm-translate {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_translate.png);
            }
            .context-menu .cm-item.cm-delete {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/fill_delete.png);
            }
            .menu-board ul li a span.mb-icon1 {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_analytics.png);
            }
            .menu-board ul li a span.mb-icon2 {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_email.png);
            }
            .menu-board ul li a span.mb-icon3 {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_history.png);
            }
            .menu-board ul li a span.mb-icon4 {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_user1.png);
            }
            .menu-board ul li a span.mb-icon5 {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_cart.png);
            }
            .tt-sample-essay .panel-title > a {
            display: block;
            padding: 14px 30px 12px;
            font-size: 16px;
            font-weight: bold;
            color: #f9a95a;
            background: #f3f3f3;
            font-family: Nunito, sans-serif;
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_expand_orange.png) right 30px center
                no-repeat;
            -moz-transition: all ease 0.12s;
            -o-transition: all ease 0.12s;
            -webkit-transition: all ease 0.12s;
            transition: all ease 0.12s;
            }
            .tt-sample-essay .panel-title > a[aria-expanded="true"] {
            color: #fff;
            background: #faa859 url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_expand.png) right 30px center
                no-repeat;
            }
            .service-intro {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/s_bg1.png);
            background-repeat: no-repeat;
            background-size: cover;
            background-position: bottom center;
            padding: 20px 0px 170px 0px;
            text-align: center;
            margin: 0px 0px 40px 0px;
            position: relative;
            }
            .service-bottom {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/s_bg2.png);
            background-repeat: no-repeat;
            background-size: cover;
            background-position: top center;
            padding: 200px 0px 90px 0px;
            text-align: center;
            margin: 30px 0px 0px 0px;
            }
            .filter-menu .filter-title:after {
            content: "";
            width: 14px;
            height: 8px;
            position: absolute;
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/arrow_expand_module.png) center no-repeat;
            top: 6px;
            right: -24px;
            }
            .test-collection-page .test-des p .icon-ts.icon-calendar {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_date_orange.png);
            }
            .test-collection-page .test-des p .icon-ts.icon-view {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_view_orange.png);
            }
            .my-check .checkmark:after {
            content: "";
            position: absolute;
            display: none;
            left: 0;
            top: 1px;
            width: 100%;
            height: 100%;
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/tick.png) center 1px no-repeat scroll;
            }
            .playback {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/audio-back.png) no-repeat center center;
            bottom: -34px;
            left: 7.2%;
            height: 24px;
            width: 24px;
            border: 0;
            cursor: pointer;
            display: block;
            font-size: 0;
            line-height: 0;
            overflow: hidden;
            padding: 0;
            position: absolute;
            text-decoration: none;
            z-index: 1;
            }
            .playforward {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/audio-next.png) no-repeat center center;
            bottom: -34px;
            left: 14.7%;
            height: 24px;
            width: 24px;
            border: 0;
            cursor: pointer;
            display: block;
            font-size: 0;
            line-height: 0;
            overflow: hidden;
            padding: 0;
            position: absolute;
            text-decoration: none;
            z-index: 1;
            }
            .mejs__button > button {
            background: #5bc3d2 url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_audio_play.png) center
                no-repeat;
            border: 0;
            cursor: pointer;
            display: block;
            font-size: 0;
            height: 41px;
            line-height: 0;
            margin: 0;
            overflow: hidden;
            padding: 0;
            position: absolute;
            text-decoration: none;
            width: 96px;
            }
            .mejs__button.mejs__volume-button > button {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_volume.png) center no-repeat scroll;
            border: 0;
            cursor: pointer;
            display: block;
            font-size: 0;
            height: 20px;
            width: 21px;
            line-height: 0;
            margin: 0;
            overflow: hidden;
            padding: 0;
            position: absolute;
            text-decoration: none;
            }
            .mejs__pause > button {
            background: #5bc3d2 url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_pause.png) center no-repeat;
            }
            .mejs__replay > button {
            background: #5bc3d2 url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_replay.png) center no-repeat;
            }
            .notifi-popup-mobile .notifications-popup-wp .close-button {
            position: absolute;
            width: 24px;
            height: 24px;
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_close_note.png) center no-repeat;
            right: 15px;
            top: 15px;
            padding: 0;
            cursor: pointer;
            }
            .notifi-popup-mobile .notifications-popup-wp .title.active span:before {
            content: "";
            position: absolute;
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_arrow_back.png) no-repeat center
                center;
            width: 8px;
            height: 14px;
            left: -14px;
            top: 3px;
            }
            .messages-popup-mobile .close-button {
            position: absolute;
            width: 24px;
            height: 24px;
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_close_note.png) center no-repeat;
            right: 15px;
            top: 15px;
            padding: 0;
            cursor: pointer;
            }
            .messages-popup-mobile .mes-title-top.active span:before {
            content: "";
            position: absolute;
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_arrow_back.png) no-repeat center
                center;
            width: 8px;
            height: 14px;
            left: -14px;
            top: 4px;
            }
            .messages-popup-mobile .table-chat-content .write-message button {
            width: 24px;
            height: 24px;
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_mess_submit.png) center no-repeat;
            position: absolute;
            right: 20px;
            top: 15px;
            left: auto;
            border: none;
            }
            .messages-page .table-chat-content .write-message button {
            width: 24px;
            height: 24px;
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_mess_submit.png) center no-repeat;
            position: absolute;
            right: 20px;
            top: 15px;
            left: auto;
            }
            .footer .bootstrap-select .caret {
            width: 14px;
            height: 8px;
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/arrow_expand_module.png) center no-repeat;
            border: none;
            margin-top: -4px;
            -moz-transition: all ease 0.2s;
            -o-transition: all ease 0.2s;
            -webkit-transition: all ease 0.2s;
            transition: all ease 0.2s;
            }
            .media-player .mejs__button > button {
            background: transparent url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/mejs-controls.svg);
            border: 0;
            cursor: pointer;
            display: block;
            font-size: 0;
            height: 20px;
            line-height: 0;
            margin: 11px 6px 10px;
            overflow: hidden;
            padding: 0;
            position: absolute;
            text-decoration: none;
            width: 20px;
            z-index: 10;
            }
            .media-player .mejs__play > button {
            background: transparent url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/video-player-bt.svg) center
                no-repeat;
            background-size: 13px auto;
            z-index: 10;
            }
            .media-player .mejs__pause > button {
            background: transparent url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/media-pause-icon.svg) center
                no-repeat;
            }
            .media-player .mejs__replay > button {
            width: 16px;
            height: 16px;
            background: transparent url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/media-replay.svg) center
                no-repeat;
            background-size: contain;
            }
            .media-player .mejs__button.mejs__volume-button > button {
            width: 22px;
            height: 22px;
            background: transparent url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon-sound.svg) center
                no-repeat;
            }
            .media-player .mejs__fullscreen-button > button {
            background: transparent url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/fullscreen.svg) center
                no-repeat;
            width: 22px;
            height: 16px;
            background-size: contain;
            }
            .media-player .mejs__captions-button > button {
            background: transparent url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/caption-icon.svg) center
                no-repeat;
            width: 30px;
            height: 15px;
            background-size: contain;
            }
            .media-player .mejs__cinema > button {
            background: transparent url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/cinema-view.svg) center
                no-repeat;
            background-size: contain;
            width: 27px;
            height: 13px;
            }
            .media-player .mejs__playback > button {
            background: transparent url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/play-back-icon.svg) center
                no-repeat;
            background-size: contain;
            }
            .media-player .mejs__playforward > button {
            background: transparent url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/play-forward-icon.svg) center
                no-repeat;
            background-size: contain;
            }
            .profile-alert .container {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/attention.svg) left 15px center no-repeat;
            background-size: 23px auto;
            padding-left: 55px;
            }
            .system-alert .alert-content {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/attention.svg) left 10px center no-repeat;
            background-size: 18px auto;
            padding-left: 35px;
            }
            .intending-box .mbmn-tab[data-target="#intending"] {
            background: #fff url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/boarding-pass-icon.svg) center top
                35px no-repeat;
            background-size: 80px;
            }
            .intending-box .mbmn-tab[data-target="#intending"].open {
            background: #fff url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/boarding-pass-active-icon.svg) center
                top 35px no-repeat;
            background-size: 80px;
            border-top: 2px solid #32b4c8;
            border-radius: 0;
            }
            .intending-box .mbmn-tab[data-target="#not-intending"] {
            margin-top: 15px;
            background: #fff url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/tutorial-icon.svg) center top 35px
                no-repeat;
            background-size: 80px;
            }
            .intending-box .mbmn-tab[data-target="#not-intending"].open {
            background: #fff url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/tutorial-active-icon.svg) center top
                35px no-repeat;
            background-size: 80px;
            border-top: 2px solid #32b4c8;
            border-bottom: 2px solid #32b4c8;
            border-radius: 0;
            }
            .intending-box .intending-abroad > li > a:hover[href="#intending"] {
            background: #fff url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/boarding-pass-active-icon.svg) center
                top 81px no-repeat;
            background-size: 110px;
            }
            .intending-box .intending-abroad > li > a:hover[href="#not-intending"] {
            background: #fff url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/tutorial-active-icon.svg) center top
                86px no-repeat;
            background-size: 100px;
            }
            .intending-box .intending-abroad > li.active a[href="#intending"] {
            background: #fff url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/boarding-pass-active-icon.svg) center
                top 81px no-repeat;
            background-size: 110px;
            }
            .intending-box .intending-abroad > li.active a[href="#not-intending"] {
            background: #fff url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/tutorial-active-icon.svg) center top
                86px no-repeat;
            background-size: 100px;
            }
            .intending-box a[href="#intending"] {
            background: #fff url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/boarding-pass-icon.svg) center top
                81px no-repeat;
            background-size: 110px;
            }
            .intending-box a[href="#not-intending"] {
            background: #fff url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/tutorial-icon.svg) center top 86px
                no-repeat;
            background-size: 100px;
            }
            .intending-box .prompt li {
            padding-left: 35px;
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/check-list-icon.svg) left top no-repeat;
            background-size: 20px;
            font-size: 14px;
            font-weight: 800;
            line-height: 1.5;
            color: #282828;
            margin-bottom: 25px;
            }
            .intending-box .jcarousel-control-prev,
            .intending-box .jcarousel-control-next {
            top: 29px;
            text-indent: -99999px;
            border: none;
            border-radius: 0;
            box-shadow: none;
            width: 23px;
            height: 23px;
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/profile-arrow-down.png) center no-repeat;
            background-size: contain;
            }
            .intending-box .destination .star {
            display: inline-block;
            width: 18px;
            height: 18px;
            margin-right: 10px;
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/star-inactive.svg) center no-repeat;
            background-size: contain;
            cursor: pointer;
            }
            .intending-box .destination .star.active {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/star-active.svg) center no-repeat;
            background-size: contain;
            }
            .bt-reg.join-free:before {
            content: "";
            display: inline-block;
            width: 18px;
            height: 18px;
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon-share.svg) center no-repeat;
            background-size: contain;
            margin-right: 9px;
            position: relative;
            top: 4px;
            }
            .wbn-listing .owl-carousel .owl-nav button.owl-prev,
            .wbn-listing .owl-carousel .owl-nav button.owl-next,
            .my-webinar .owl-carousel .owl-nav button.owl-prev,
            .my-webinar .owl-carousel .owl-nav button.owl-next,
            .wbn-detail .owl-carousel .owl-nav button.owl-prev,
            .wbn-detail .owl-carousel .owl-nav button.owl-next {
            font-size: 0;
            position: absolute;
            left: -56px;
            top: 50%;
            width: 20px;
            height: 35px;
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/wbn-arrow-left.png) center no-repeat;
            background-size: contain;
            transform: translateY(-50%);
            border: none;
            }
            .wbn-listing .owl-carousel .owl-nav button.owl-prev:hover,
            .wbn-listing .owl-carousel .owl-nav button.owl-next:hover,
            .my-webinar .owl-carousel .owl-nav button.owl-prev:hover,
            .my-webinar .owl-carousel .owl-nav button.owl-next:hover,
            .wbn-detail .owl-carousel .owl-nav button.owl-prev:hover,
            .wbn-detail .owl-carousel .owl-nav button.owl-next:hover {
            outline: none;
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/wbn-arrow-left.png) center no-repeat;
            background-size: contain;
            }
            .wbn-listing .owl-carousel .owl-nav button.owl-next,
            .my-webinar .owl-carousel .owl-nav button.owl-next,
            .wbn-detail .owl-carousel .owl-nav button.owl-next {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/wbn-arrow-right.png) center no-repeat;
            background-size: contain;
            right: -56px;
            top: 50%;
            left: auto;
            }
            .wbn-listing .owl-carousel .owl-nav button.owl-next:hover,
            .my-webinar .owl-carousel .owl-nav button.owl-next:hover,
            .wbn-detail .owl-carousel .owl-nav button.owl-next:hover {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/wbn-arrow-right.png) center no-repeat;
            background-size: contain;
            }
            .test-bt:before {
            content: "";
            display: inline-block;
            width: 18px;
            height: 18px;
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_flash.png) center no-repeat;
            background-size: contain;
            margin-right: 5px;
            position: relative;
            top: 4px;
            }
            .explain-bt:before {
            content: "";
            display: inline-block;
            width: 16px;
            height: 16px;
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_resume.png) center no-repeat;
            background-size: contain;
            margin-right: 5px;
            position: relative;
            top: 4px;
            }
            .iot-cbx input:checked ~ .checkmark:after {
            display: block;
            background: #32b4c8 url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/iot-cb-icon.svg) center no-repeat;
            background-size: contain;
            }
            .iot-cbx-factor .checkmark:before {
            content: "";
            position: absolute;
            width: 13px;
            height: 20px;
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/bullet-dice.svg) center no-repeat;
            background-size: contain;
            left: 10px;
            top: 9px;
            }
            .iot-detail-page .end-the-test a.btn-submit span {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_submit_listening.png) no-repeat center
                center;
            display: inline-block;
            position: relative;
            width: 19px;
            height: 20px;
            margin: 0px 8px 0px 0px;
            top: 5px;
            }
            .iot-detail-page .end-the-test .report span {
            display: inline-block;
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/report_icon_grey.png);
            width: 12px;
            height: 12px;
            display: inline-block;
            position: relative;
            margin: 0px 5px 0px 0px;
            top: 1px;
            }
            .icon-modal-close {
            width: 17px;
            height: 17px;
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/close-modal.svg) center no-repeat;
            background-size: contain;
            display: block;
            position: absolute;
            top: -15px;
            right: -22px;
            cursor: pointer;
            -moz-transition: all ease 0.2s;
            -o-transition: all ease 0.2s;
            -webkit-transition: all ease 0.2s;
            transition: all ease 0.2s;
            }
            div.iti-flag {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/flags.png);
            }
            div.intl-tel-input .selected-flag div.iti-arrow {
            position: absolute;
            right: 7px;
            top: 50%;
            transform: translateY(-50%);
            width: 20px;
            height: 20px;
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/profile-arrow-down.png) center no-repeat;
            background-size: contain;
            border: none !important;
            -moz-transition: all ease 0.2s;
            -o-transition: all ease 0.2s;
            -webkit-transition: all ease 0.2s;
            transition: all ease 0.2s;
            }
            .answer-slot.demo:after {
            content: "";
            width: 21px;
            height: 22px;
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/cursor.png) center no-repeat;
            background-size: contain;
            position: absolute;
            left: 138px;
            top: -5px;
            }
            p.drag-question.style-2:after,
            p.drag-question.style-3:after {
            content: "";
            position: absolute;
            width: 26px;
            height: 26px;
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/arrow-drop-test.png) center no-repeat;
            left: 50%;
            transform: translateX(-50%);
            top: 100%;
            background-size: contain;
            visibility: visible;
            }
            .answer-table.select-table td.active:after {
            content: "";
            position: absolute;
            width: 24px;
            height: 17px;
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/correct-icon.svg) center no-repeat;
            background-size: contain;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            }
            .wbn-bt.join-free:before {
            content: "";
            display: inline-block;
            width: 18px;
            height: 18px;
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon-share.svg) center no-repeat;
            background-size: contain;
            margin-right: 9px;
            position: relative;
            top: 4px;
            }
            .last-sale:before {
            content: "";
            display: inline-block;
            position: relative;
            top: 3px;
            width: 15px;
            height: 15px;
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon-cart.svg) center no-repeat;
            background-size: contain;
            margin-right: 4px;
            }
            .test-view:before,
            .test-date:before {
            content: "";
            display: inline-block;
            position: relative;
            top: 4px;
            width: 16px;
            height: 18px;
            margin: 0px 5px 0px 0px;
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_date_orange.png) center no-repeat;
            background-size: contain;
            }
            .test-date:before {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_view_orange.png);
            }
            .top-selling .best-item__new-tag:after,
            .top-selling .best-item__new-tag:before {
            content: "";
            position: absolute;
            display: inline-block;
            width: 4px;
            height: 7px;
            background: url(/themes/images/icons/corner-shadow-right.svg) center no-repeat;
            background-size: contain;
            top: 0;
            left: 100%;
            }
            .top-selling .best-item__new-tag:before {
            background-image: url(/themes/images/icons/corner-shadow-left.svg);
            left: initial;
            right: 100%;
            }
            .progress-animated .progress-bar,
            .progress-animated .bar {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/progressbar.gif) !important;
            filter: none;
            }
            .fileupload-processing .fileupload-process,
            .files .processing .preview {
            display: block;
            width: 32px;
            height: 32px;
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/loading.gif) center no-repeat;
            background-size: contain;
            }
            .study-abroad-box .bootstrap-select .dropdown-toggle .caret {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/profile-arrow-down.png) center no-repeat;
            background-size: contain;
            width: 26px;
            height: 26px;
            border: 0;
            padding: 0;
            top: 6px;
            margin-top: 0;
            right: 11px;
            }
            .consultation-box__list-item:before {
            content: "";
            display: inline-block;
            position: absolute;
            width: 16px;
            height: 16px;
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/check-list-icon-orange.svg) center
                no-repeat;
            background-size: contain;
            left: 0;
            top: 2px;
            }
            .test-header.-listening .volume__practice-title:before {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/listening-icon.svg);
            }
            .test-header.-writing .volume__practice-title:before {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/writing-icon.svg);
            }
            .test-header.-speaking .volume__practice-title:before {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/speaking-icon.svg);
            }
            .test-header .volume__practice-title:before {
            content: "";
            width: 40px;
            height: 40px;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            margin: 0 auto;
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/reading-icon.svg) center no-repeat;
            background-size: contain;
            }
            .test-header__btn-info:before {
            content: "";
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_arrowus_down.png) no-repeat center
                center;
            width: 14px;
            height: 14px;
            display: inline-block;
            position: relative;
            margin: 0px 5px 0px 0px;
            top: 3px;
            transform: rotate(0deg);
            }
            .mega-menu__menu-item.-parent > a:after {
            content: "";
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_arrowus_down.png) no-repeat center
                center;
            width: 14px;
            height: 14px;
            display: inline-block;
            position: absolute;
            top: 50%;
            margin-top: -7px;
            transform: rotate(0deg);
            right: 15px;
            -moz-transition: all ease 0.2s;
            -o-transition: all ease 0.2s;
            -webkit-transition: all ease 0.2s;
            transition: all ease 0.2s;
            }
            .mega-menu__menu-icon.-ask {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_ask.png);
            }
            .mega-menu__menu-icon.-share {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_share.png);
            }
            .mega-menu__menu-icon.-report {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_report.png);
            }
            .mega-menu__menu-icon.-text {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_text_size.png);
            }
            .mega-menu__menu-icon.-print {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_print.png);
            }
            .mega-menu__menu-icon.-download {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_download.png);
            }
            .mega-menu__menu-icon.-instruction {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_introduction.png);
            }
            .mega-menu__menu-icon.-exit {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_exit.png);
            }
            .mega-menu__menu-icon.-save {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_save_draft.png);
            }
            .question-board__item.-green:before {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/howto-answer-green-icon.svg);
            }
            .question-board__item.-listen-here:before {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/listening-icon.svg);
            width: 16px;
            height: 16px;
            }
            .question-board__item.-show-notepad:before {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/show-note-pad-icon.svg);
            }
            .question-board__item:before {
            content: "";
            display: inline-block;
            width: 18px;
            height: 18px;
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/howto-answer-icon.svg) center no-repeat;
            background-size: contain;
            vertical-align: middle;
            margin-right: 8px;
            position: relative;
            top: -1px;
            }
            .iot-pagination__item.-prev .iot-pagination__link,
            .iot-pagination__item.-next .iot-pagination__link {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/next-page-arrow.svg) center no-repeat;
            background-size: 15px;
            }
            .iot-pagination__item.-first .iot-pagination__link,
            .iot-pagination__item.-end .iot-pagination__link {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/end-page-arrow.svg) center no-repeat;
            background-size: 15px;
            }
            .popular-tips .tip-item__tag:before {
            content: "";
            display: inline-block;
            width: 13px;
            height: 13px;
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/tag-icon.svg) no-repeat center center;
            margin-right: 6px;
            }
            .popular-tips .tip-item__view:before {
            content: "";
            display: inline-block;
            width: 13px;
            height: 13px;
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/eye-icon.svg) no-repeat center center;
            margin-right: 6px;
            }
            .webform-submission-form .control-label.option input[type="checkbox"]:checked {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon-check-mark.svg) center no-repeat;
            background-size: 93% 83%;
            }
            .webform-submission-form input.form-checkbox[type="checkbox"]:checked {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon-check-mark.svg) center no-repeat;
            background-size: 93% 83%;
            }
            #modal-register-mobile .ion-android-close:before {
            content: "";
            width: 18px;
            height: 18px;
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/close-bt.svg) center no-repeat;
            background-size: contain;
            }
            #modal-edit-avatar .upload-box.uploading .cancel-upload {
            width: 12px;
            height: 12px;
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_cancel_button.png) center no-repeat;
            background-size: contain;
            position: absolute;
            right: -21px;
            top: -1px;
            cursor: pointer;
            }
            #modal-edit-avatar .upload-box.uploading.complete .finished-bt {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon-check.svg) center no-repeat;
            background-size: contain;
            width: 12px;
            height: 12px;
            position: absolute;
            right: -21px;
            top: -1px;
            }
            #modal-edit-avatar .upload-box.uploading.error .cancel-upload {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_cancel_orange.png) center no-repeat;
            }
            i.close-modal.-blue {
            opacity: 1;
            top: 15px;
            right: 15px;
            display: inline-block;
            width: 18px;
            height: 18px;
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/close-bt.svg) center no-repeat;
            background-size: contain;
            }
            .modal-gift-countdown .modal-dialog {
            max-width: 445px;
            padding: 26px 30px;
            background: #fff url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/pages/give-away/gift-modal-bg.svg)
                center no-repeat;
            background-size: contain;
            }
            .modal-gift-countdown__title:after {
            content: "";
            position: absolute;
            display: inline-block;
            width: 221px;
            height: 162px;
            left: 50%;
            transform: translateX(-50%);
            bottom: 0;
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/pages/give-away/gift-countdown-title-bg.svg)
                center no-repeat;
            background-size: contain;
            z-index: -1;
            }
            .modal-rpmistake__icon {
            width: 80px;
            height: 80px;
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/bugs-icon.svg) center no-repeat;
            background-size: contain;
            display: block;
            margin: 0 auto 2rem;
            }
            .modal-rpmistake .iot-opselect .dropdown-toggle .caret {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_option_select.svg);
            width: 15px;
            height: 15px;
            top: 12px;
            transform: none;
            }
            .modal-credit-evaluation.-speaking .modal-content {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/bg-credit-evaluation-pink.svg);
            }
            .modal-credit-evaluation .modal-content {
            padding: 20px 30px;
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/bg-credit-evaluation-orange.svg) center
                no-repeat;
            background-size: cover;
            border: none;
            }
            .modal-choose-evaluation.-speaking .service-price-box {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/bg-buy.svg);
            }
            .modal-choose-evaluation.-speaking .evaluation-widget__label:after,
            .modal-choose-evaluation.-speaking .evaluation-widget__label:before {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/corner-pink-shadow-right.svg);
            }
            .modal-choose-evaluation.-speaking .evaluation-widget__label:before {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/corner-pink-shadow-left.svg);
            }
            .modal-choose-evaluation .card-successful__new-tag:after,
            .modal-choose-evaluation .card-successful__new-tag:before {
            content: "";
            position: absolute;
            display: inline-block;
            width: 4px;
            height: 7px;
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/corner-shadow-right.svg) center
                no-repeat;
            background-size: contain;
            top: 0;
            left: 100%;
            }
            .modal-choose-evaluation .card-successful__new-tag:before {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/corner-shadow-left.svg);
            left: initial;
            right: 100%;
            }
            .modal-choose-evaluation .service-price-box {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/bg-buy-writing.svg) center no-repeat;
            background-size: cover;
            border: none;
            padding: 20px;
            }
            .modal-choose-evaluation .evaluation-widget__label:after,
            .modal-choose-evaluation .evaluation-widget__label:before {
            content: "";
            position: absolute;
            display: inline-block;
            width: 4px;
            height: 7px;
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/corner-orange-shadow-right.svg)
                center no-repeat;
            background-size: cover;
            top: 0;
            left: 100%;
            }
            .modal-choose-evaluation .evaluation-widget__label:before {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/corner-orange-shadow-left.svg);
            left: initial;
            right: 100%;
            }
            .modal-choose-mode.listening .choose-box__icon {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/choose-settings.svg);
            }
            .modal-choose-mode.listening .choose-box__icon.-test-mode {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/choose-computer.svg);
            }
            .modal-choose-mode.listening .choose-box__caption:before {
            content: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/choose-idea.svg);
            }
            .modal-choose-mode.reading .choose-box__icon {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/choose-settings-reading.svg);
            }
            .modal-choose-mode.reading .choose-box__icon.-test-mode {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/choose-computer-reading.svg);
            }
            .modal-choose-mode.reading .choose-box__caption:before {
            content: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/choose-idea-reading.svg);
            }
            .modal-choose-mode.writing .choose-box__icon {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/choose-settings-writing.svg);
            }
            .modal-choose-mode.writing .choose-box__icon.-test-mode {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/choose-computer-writing.svg);
            }
            .modal-choose-mode.writing .choose-box__caption:before {
            content: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/choose-idea-writing.svg);
            }
            .modal-choose-mode.speaking .choose-box__icon {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/choose-settings-speaking.svg);
            }
            .modal-choose-mode.speaking .choose-box__icon.-test-mode {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/choose-computer-speaking.svg);
            }
            .modal-choose-mode.speaking .choose-box__caption:before {
            content: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/choose-idea-speaking.svg);
            }
            .modal-choose-mode .choose-box__icon {
            width: 50px;
            height: 50px;
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/choose-settings.svg) center no-repeat;
            background-size: contain;
            align-self: center;
            margin: 0 0 5px;
            }
            .modal-choose-mode .choose-box__icon.-test-mode {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/choose-computer.svg);
            }
            .modal-choose-mode .choose-box__caption:before {
            content: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/choose-idea.svg);
            display: inline-block;
            margin-right: 1rem;
            }
            .modal-fulltest__caption:before {
            content: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/fulltest-idea.svg);
            display: inline-block;
            margin-right: 1rem;
            }
            .speaking-test .modal-view-solution__icon,
            .speaking-test .modal-submit-test__icon,
            .speaking-test .modal-exit-test__icon {
                background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/information-speaking-icon.svg);
            }
            .speaking-test .modal-time-up__icon {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/timeup-icon-speaking.svg);
            }
            .speaking-test .modal-rpmistake__icon {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/bugs-speaking-icon.svg);
            }
            .writing-test .modal-view-solution__icon,
            .writing-test .modal-submit-test__icon,
            .writing-test .modal-exit-test__icon {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/information-writing-icon.svg);
            }
            .writing-test .modal-time-up__icon {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/timeup-icon-writing.svg);
            }
            .writing-test .modal-rpmistake__icon {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/bugs-writing-icon.svg);
            }
            .listening-test .modal-view-solution__icon,
            .listening-test .modal-submit-test__icon,
            .listening-test .modal-exit-test__icon {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/information-listening-icon.svg);
            }
            .listening-test .modal-time-up__icon {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/timeup-icon-listening.svg);
            }
            .listening-test .modal-rpmistake__icon {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/bugs-listening-icon.svg);
            }
            .modal-submit-test__icon {
                width: 80px;
                height: 80px;
                background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/information-pdfquiz-icon.svg) center
                    no-repeat;
                background-size: contain;
                display: block;
                margin: 0 auto 2rem;
            }
            .modal-overdue__icon {
            width: 80px;
            height: 80px;
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/information-speaking-icon.svg) center
                no-repeat;
            background-size: contain;
            display: block;
            margin: 0 auto 2rem;
            }
            .modal-cancel-test__icon {
            width: 80px;
            height: 80px;
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/information-speaking-icon.svg) center
                no-repeat;
            background-size: contain;
            display: block;
            margin: 0 auto 2rem;
            }
            .modal-confirm__icon {
            width: 80px;
            height: 80px;
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/information-pdfquiz-icon.svg) center
                no-repeat;
            background-size: contain;
            display: block;
            margin: 0 auto 2rem;
            }
            .modal-confirm__icon.-writing {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/information-writing-icon.svg);
            }
            .modal-confirm__icon.-speaking {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/information-speaking-icon.svg);
            }
            .modal-refusal__icon {
            width: 80px;
            height: 80px;
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/information-speaking-icon.svg) center
                no-repeat;
            background-size: contain;
            display: block;
            margin: 0 auto 2rem;
            }
            .modal-exit-test__icon {
            width: 80px;
            height: 80px;
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/information-pdfquiz-icon.svg) center
                no-repeat;
            background-size: contain;
            display: block;
            margin: 0 auto 2rem;
            }
            .modal-view-solution__icon {
                width: 80px;
                height: 80px;
                background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/information-pdfquiz-icon.svg) center
                    no-repeat;
                background-size: contain;
                display: block;
                margin: 0 auto 2rem;
            }
            .modal-time-up__icon {
                width: 80px;
                height: 80px;
                background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/information-pdfquiz-icon.svg) center
                    no-repeat;
                background-size: contain;
                display: block;
                margin: 0 auto 2rem;
            }
            .modal-submit-email__icon {
            width: 80px;
            height: 80px;
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/submit-email-icon.svg) center
                no-repeat;
            background-size: contain;
            display: block;
            margin: 0 auto 1.6rem;
            }
            .modal-ai-timeup__icon {
            width: 80px;
            height: 80px;
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/timeup-icon-speaking.svg) center
                no-repeat;
            background-size: contain;
            display: block;
            margin: 0 auto 2rem;
            }
            .modal-tip-use__icon {
            width: 80px;
            height: 80px;
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/choose-idea-speaking.svg) center
                no-repeat;
            background-size: contain;
            display: block;
            margin: 0 auto 2rem;
            }
            .list-answer li em.true {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_true.png) no-repeat center center !important;
            height: 10px !important;
            width: 14px !important;
            display: inline-block !important;
            margin: 0px 0px 0px 5px !important;
            }
            .list-answer li em.false {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_false.png) no-repeat center center !important;
            height: 10px !important;
            width: 14px !important;
            display: inline-block !important;
            margin: 0px 0px 0px 5px !important;
            }
            label.credit-card-label {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/CreditCardIcn.png);
            background-repeat: no-repeat;
            height: 99px;
            cursor: pointer;
            display: flex !important;
            padding: 0px 10px;
            align-items: center;
            justify-content: center;
            border: 1px solid #898989;
            border-radius: 3px;
            text-align: center;
            width: 100%;
            background-position: 50% 7%;
            background-size: 28%;
            content: "Debit/ Credit Card";
            font-size: 15px !important;
            color: #536b83 !important;
            padding-top: 55px;
            font-family: "Nunito" !important;
            font-weight: bolder !important;
            margin: 30px 0px 30px 0px !important;
            text-indent: -9999px;
            }
            label.paypal-label {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/PayPalIcn.png);
            background-repeat: no-repeat;
            background-position: center center;
            height: 99px;
            cursor: pointer;
            display: flex !important;
            padding: 0px 10px;
            align-items: center;
            justify-content: center;
            border: 1px solid #898989;
            border-radius: 3px;
            text-align: center;
            width: 100%;
            left: 50px;
            background-position: 50% 13%;
            background-size: 24%;
            font-size: 14px !important;
            color: #536b83 !important;
            padding-top: 55px;
            font-family: "Nunito" !important;
            font-weight: bolder !important;
            margin: 30px 0px 30px 0px !important;
            }
            .mastercard {
            background-image: url(http://i.imgur.com/SJbRQF7.png);
            }
            .test-hero .test-hero-icon.orange span {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_writing.png) no-repeat center center;
            }
            #modal-wt-vote .modal-wt-vote__capcha-refresh::before,
            #modal-voting .modal-voting__capcha-refresh::before {
            content: "";
            text-indent: 0;
            display: block;
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/refresh.svg) no-repeat center;
            height: 100%;
            }
            div#wechat-qr-code .status_succ .status_icon {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_popupwechat.png) 0 -46px no-repeat;
            display: inline-block;
            width: 38px;
            height: 38px;
            vertical-align: middle;
            }
            .hero.-australia {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/hero-detail-australia-bg.jpg);
            }
            .hero.-us {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/hero-detail-us-bg.jpg);
            }
            .hero.-ca {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/hero-detail-canada-bg.jpg);
            }
            .brush-line {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/pages/study-abroad/brush-line.svg) bottom
                center no-repeat;
            background-size: contain;
            }
            .notify-live-lesson-confirmation .how-to-td {
                display: flex;
                align-items: center;
                background: url("<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/table-border-bottom.png") bottom center
                no-repeat !important;
                padding: 6px 0;
            }
            .speaking-test-page .iot-cbx input:checked ~ .checkmark:after {
            display: block;
            background: #294563 url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/iot-cb-icon.svg) center no-repeat !important;
            background-size: contain;
            }
            .modal-refusal.full-test-ios .modal-refusal__icon {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/information-listening-icon.svg)
                center no-repeat;
            }
            .congratulation-page.-speaking .service-price-box {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/bg-buy.svg) !important;
            }
            .congratulation-page .service-price-box {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/bg-buy-writing.svg) center no-repeat !important;
            background-size: cover !important;
            border: none;
            padding: 24px;
            }


            @media (max-width: 767px) {
            .show-palette .reading-footer .rf-bar .expand {
                right: 8px;
                background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_expandmb_down.png) center no-repeat
                scroll;
            }

            }


            @media (max-width: 767px) {
            .profile-alert .container {
                background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/attention.svg) left 6px center no-repeat;
                background-size: 18px auto;
                padding-left: 30px;
            }
            }

            @media (max-width: 767px) {
            .system-alert .alert-content {
                background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/attention.svg) left 6px center no-repeat;
                background-size: 18px auto;
                padding-left: 50px;
            }
            }

            @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
            div.iti-flag {
                background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/flags%402x.png);
            }
            }


            /* writing */
            .writing-essay-page .community-vote__average-score:after {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/arrow_expand_module.png) center no-repeat;
            }

            .writing-essay-page .final-score__comment-panel:after {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/arrow_expand_module.png) center no-repeat;
            }

            @media (max-width: 767px) {
            .writing-essay-page .evaluation .dropdown-toggle .caret {
                background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_option_select.svg) center no-repeat;
            }
            }


            .writing-essay-page .footer-banner {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/view-result-speaking-bg-banner.jpg) center
                no-repeat;
            }


            .writing-essay-page .vote-box {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/community-feedback-bg-orange.webp) center
                no-repeat;
            }


            .writing-essay-page .panel-title > a:after {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/arrow_expand_module.png) center no-repeat;
            }


            .writing-essay-page .share-box__btn-copy:before {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon-alltest-active.svg) center no-repeat;
            }

            .writing-essay-page .share-box__btn-copy:hover:before {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon-alltest.svg);
            }

            .writing-essay-page .test-box {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/background-writing-taketest.png) center
                no-repeat;
            }

            /* speaking */
            .speaking-review-page .vote-box {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/community-feedback-bg-pink.webp) center
                no-repeat;
            }


            .speaking-review-page .recording__collapse:after {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/arrow_expand_module.png) center no-repeat;
            }


            .speaking-review-page .recording__collapse:after {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/arrow_expand_module.png) center no-repeat;
            }

            .speaking-review-page .recording__question-title {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/speaking-explain-icon.svg) left 5px top
                12px no-repeat;
            }


            .speaking-review-page .test-box {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/green-chameleon.jpg) center no-repeat;
            }

            .speaking-review-page .card-successful.-speaking .service-price-box {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/bg-buy.svg); 
            }


            .speaking-review-page .card-successful__new-tag:after,
            .speaking-review-page .card-successful__new-tag:before {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/corner-shadow-right.svg) center
                no-repeat;
            }

            .speaking-review-page .card-successful__new-tag:before {
            background-image: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/corner-shadow-left.svg);
            }

            .speaking-review-page .service-price-box {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/bg-buy-writing.svg) center no-repeat;
            }

            .speaking-review-page .final-score-box.-examiner {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/bg-buy.svg) center no-repeat;
            }


            .speaking-review-page .evaluation__title:after {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/arrow_expand_module_white.png) center
                no-repeat;
            }


            @media (max-width: 767px) {
            .speaking-review-page .evaluation .dropdown-toggle .caret {
                background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/icon_option_select.svg) center no-repeat;
            }
            }

            .speaking-review-page .footer-banner {
            background: url(<?php echo $site_url; ?>/wp-content/plugins/spacetree/libs/proqyz/includes/templates/public/quiz/dist/img/ielts/icons/view-result-writing-bg-banner.jpg) center
                no-repeat;
            }




            
            

        </style>
        <?php return ob_get_clean();
    }

    /**
     * changes @1.2.1.2
     */
    public function dynamic_js_imports_header(){
        ob_start(); ?>
        <script>
            window.site_url = `<?php echo site_url(); ?>`;
        </script>
        <?php return ob_get_clean();
    }

    /**
     * result function
     */
    public function generate_result_report() {
        $user_response = $this->user_data;
        $number_of_questions    = isset($this->quiz_config->numberOfQuestions)? (int) $this->quiz_config->numberOfQuestions : 0;
        $number_of_options      = isset($this->quiz_config->numberOfOptions)? (int) $this->quiz_config->numberOfOptions : 0;
        $options_type           = isset($this->quiz_config->optionsType)? $this->quiz_config->optionsType : 'A';
        $correct_answers        = isset($this->quiz_config->answerKeys)? $this->quiz_config->answerKeys :[];
        $user_answers           = isset($user_response->answers)? (array) $user_response->answers : [];

        $total_correct = 0;
        $total_wrong   = 0;
        $total_attempt = 0;
        $total_set_questions = 0;
        $question_vise_classes = [];


        for( $qi = 0; $qi < $number_of_questions; $qi++ ){
            if(isset($correct_answers[$qi])){
                $total_set_questions++;
                if(isset($user_answers[$qi])) {
                    $total_attempt++;
                    $question_vise_classes[$qi] = ['-attempted'];
                    if((int) $correct_answers[$qi] == (int) $user_answers[$qi]) {
                        $total_correct++;
                        $question_vise_classes[$qi] = ['-attempted','-correct'];
                    } else {
                        $total_wrong++;
                        $question_vise_classes[$qi] = ['-attempted','-wrong'];
                    }
                } else {
                    # not attempted
                    $question_vise_classes[$qi] = ['-unattempt'];
                }
            }

        }

        return (object) [
            "user_response"     => $user_response,
            "correct_answers"   => $correct_answers,
            "report"            => (object) [
                "total_questions"       => $number_of_questions,
                "total_set_questions"   => $total_set_questions,    
                "total_attempts"        => $total_attempt,
                "total_correct"         => $total_correct,
                "total_wrong"           => $total_wrong
            ]
        ];

    }
    
}



