@media (max-width: 1150px) {
.rightMenu { margin-right: 10px }
.centerWrapper { width: 100% }
.masterUserHeader .logo { min-width: 295px; margin-left: 15px }
.contentBox {
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
    display: block;
    padding: 20px;
}
.changePassWrapper { border-right: 0 }
.testRightCol, .testRightCol .qi { width: 40% }
.conformWrapper { margin-bottom: 50px }
.rightMenu { display: none }
.mobBars { display: inline-block; }
.accAddonWrapper { margin-top: 30px }
.ratingWrapper h3 { line-height: 20px }
#statusText { width: 100% }
.ratingWrapper, .linkShowRating { margin-top: 20px; }
.ratingWrapper p { font-size: 14px }
.ratingWrapper a { padding-top: 0 !important; margin-top: -15px } 
.ratingWrapper .stars i { font-size: 22px; padding-right: 5px }
.ratingWrapper .headTxt { font-size: 15px }
.ratingWrapper button { display: block; padding: 8px 12px !important; }
.ratingWrapper textarea { width: 90%; height: 60px; max-width: 400px }
.notesWrapper {  }
.indexH1 { margin-left: 20px; }
.resultTextWrapper { flex-basis: 60% }
.notesWrapper { max-width: 100%; flex-basis: 100% }
.testInfoWrapper { margin: 20px 0 0 0 }
.excerciseWrapper p { margin-bottom: 10px }
.excerciseTextWrapper { width: 100% }
.tableStatsResults { width: 100% }
#txtPopup { display: none }
#resultView { width: 100% }
.topReviewImg { display: block; margin: 0 auto; box-shadow: 0 0 0 1px #e0e0e0 !important }
.testReviewTexts { width: 100% }
#testReview .topMainImage { margin-top: 15px }
.topReviewImg .qi { position: absolute; top: 0 }
.responsiveSelector { display: block !important }
/*.queryWrapper .texts.stdColor .focus { 
    background: #eaf2f7;
    border-bottom: 3px solid #ccdee9;
    border-left: 1px solid #ccdee9;
    border-top: 1px solid #D8E8F2;
    border-right: 1px solid #D8E8F2;
    color: #121212;
}*/

}

@media (min-width: 768px) and (max-width: 1150px) {
.imageWrapper #imgQ { width: 100% }
.autoAnswer { display: block; margin-top: 15px }
.autoAnswer .cbAuto { margin-left: 0 }
#btnZoomImg { margin: -71px 66px 0 0 }
#btnRefreshQuery { margin-top: -71px; }
.txtClickNum { width: 100%; font-size: 12px }
.mainMenu button { width: calc(100% / 3); font-size: 15px; }
.mainMenu button:first-child, .mainMenu button:last-child { border-radius: 0 }
#testReview .imageWrapper img { width: 100%; max-height: 340px; }
.testReviewTexts { width: 57% }
.queryWrapper .inclSound p,.queryWrapper .inclSound span { width: 76%;}
.queryWrapper .inclSoundHeader { width: 83% }
}

@media (min-width: 480px) and (max-width: 767px) {
.queryWrapper { width: 100% }
.topMainImage { display: block }
.topMainImage .imageWrapper {
    background: #fff;
    padding: 7px;
    box-shadow: 0 3px 3px 3px #e0e0e0;
    border-radius: 6px;
    max-width: 465px;
    max-height: 350px
}
.mainMenu { width: 100%; text-align: center; margin: 0 auto; display: block; height: auto; padding-bottom: 20px }
.mainMenu button { width: calc(100% / 2 - 10px); text-align: left; padding-left: calc( (50% / 2 - 40px)) }
.startResultWrapper .berigImg { flex-basis: 100% }
.startResultWrapper .berigImg img { flex-basis: 100%; max-width: 100%}
.notesWrapper { margin-top: 20px; padding-bottom: 20px }
.resultTextWrapper { flex-basis: 100%; margin: 20px 0 0 0 }
.testRightCol .imageWrapper { display: none}
.queryWrapper .texts p { padding: 26px 15px }
.txtClickNum { width: 100%; font-size: 12px }
.testRightCol { width: 100%; margin-left: 0 }
.testOverview .queryNo { margin: 2px; width: 32px; height: 32px; font-size: 20px; padding: 10px }
.statusChartWrapper { display: none }
.resultChart { display: none !important }
.resultWrapper div { width: 24% }
.resultWrapper div p { font-size: 16px }
.resultIcon { margin-top: 20px }
.tblOverview { width: 100%; }
.tblOverview td { font-size: 13px; padding: 10px }
.footer, .bgMainWrapper::after { height: 60px; padding-bottom: 20px }
.footer .links { float: none; text-align: left; }
.footer .copyText { margin: 14px 0 0 15px; }
.queryWrapper .inclSound p,.queryWrapper .inclSound span { width: 78%;}
.queryWrapper .inclSoundHeader { width: 78% }
#queryWrapperHead { padding-right: 30px }
}

@media (max-width: 479px) {
.masterUserHeader .logo { min-width: 260px }
.queryWrapper { width: 100% }
.topMainImage { 
    display: block;
    margin-top: 10px;

}
.topMainImage .imageWrapper {
    background: #fff;
    padding: 7px;
    box-shadow: 0 3px 3px 3px #e0e0e0;
    border-radius: 6px;
    max-width: 465px;
    max-height: 350px
}
.topMainImage .imageWrapper img { width: 100%; left: 0 !important }
.testRightCol .imageWrapper { display: none}
.queryWrapper .texts p { padding: 26px 15px }
.masterUserHeader .logoText { font-size: 16px; padding-top: 8px }
.txtClickNum { width: 100%; font-size: 12px }
.testRightCol { width: 100%; margin-left: 0 }
.testOverview .queryNo { margin: 2px; width: 32px; height: 32px; font-size: 20px; padding: 10px }
.autoAnswer { display: block; margin-top: 15px }
.autoAnswer .cbAuto { margin-left: 0 }
#btnZoomImg { margin: -71px 66px 0 0 }
#btnRefreshQuery { margin-top: -71px; }
#resultView { padding: 10px 0; }
#testReview .buttons { margin-right: 0 }
.resultReviewWrapper { box-sizing: border-box; }
.statusChartWrapper { display: none }
.mainMenu { width: 100%; text-align: center; margin: 0 auto; display: block; height: auto; padding-bottom: 20px }
.mainMenu button { width: calc(100% / 2 - 10px); text-align: left; padding-left: calc( (50% / 2 - 50px)); font-size: 15px; }
.mainMenu button i { font-size: 15px }
.startResultWrapper .berigImg { flex-basis: 100% }
.startResultWrapper .berigImg img { flex-basis: 100%; max-width: 100%}
.resultTextWrapper section .circle { margin: 20px 0 0 20px }
.notesWrapper { margin-top: 20px; padding-bottom: 20px }
.resultTextWrapper { flex-basis: 100%; margin: 20px 0 0 0 }
.statusTable { font-size: 12px }
.mainMenu .option { width: 92% }
.footer { height: 80px }
.footer .links { float: none; width: 100%; text-align: left }
.footer .copyText { margin-left: 15px }
.accAddonWrapper { max-width: 96%;  }
#divExtendAccTime { width: 90% }
.changeThemeWrapper { display: none }
.extendAccTxt { width: 100% }
.resultChart { display: none !important}
.resultWrapper div { width: 24% }
.resultWrapper div p { font-size: 12px }
.resultIcon { margin-top: 20px }
.resultWrapper div span { font-size: 18px }
.tblOverview { width: 100%; margin-left: -10px }
.tblOverview td { font-size: 10px; padding: 10px 2px }
.reviewTopButton { margin-left: 0; margin-bottom: 10px }
#testReview button { margin-left: 0; margin-bottom: 15px }
.theorySubjects .goBack { margin-left: 0  }
.queryWrapper .inclSound p,.queryWrapper .inclSound span { width: 68%;}
.queryWrapper .inclSoundHeader { width: 68% }
#queryWrapperHead { padding-right: 30px }
}

.mobMenu {
    background: #151515;
    border-bottom: 1px solid #c0c0c0;
}

.mobBars {
    color: #fff; 
    font-size: 30px;
    float: right;
    margin-right: 20px;
    cursor: pointer
}
.mobMenu a {
    display: block;
    padding: 8px 20px;
    font-size: 18px;
    color: #fff;
    height: 40px;
    line-height: 40px;
}


.mobMenu .mobLogout {
    color: #ff5400;
    display: inline-block
}
.topMainImage .imageWrapper img {
    border-radius: 6px
}