/*=== Common styling - start ===*/
* {
    box-sizing: border-box; /* provided height and width value included the padding and border value */
}

b {
    font-weight: bold;
}

body {
    /*min-width: 634px;*/
    min-height: 375px;
}

.fullHeight, .fullView, html, body, .pageWrapper, .mainContentWrapper, .leftSection, .rightSection {
    height: 100%;
}

.fullWidth, .fullView, .pageHeader {
    width: 100%;
}

.txtLeft {
    text-align: left;
}

.txtRight {
    text-align: right;
}

.txtCenter {
    text-align: center;
}

.floatL {
    float: left;
}

.floatR {
    float: right;
}

.posRel {
    position: relative;
}

.posAbs {
    position: absolute;
}

.dispNone, .hide {
    display: none;
}

.dispNoneBtn {
    display: none !important;
}

.textSize {
    font-size: 18px;
}

.visible {
    visibility: visible;
}

.invisible {
    visibility: hidden;
}

.dispTable {
    display: table;
}

.dispTableCell {
    display: table-cell;
}

button {
    cursor: pointer;
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0 none;
    /*font-size: 100%;*/
}

    button:disabled {
        cursor: default;
    }

.normalModalBtn.btn {
    margin: 0 7px 10px;
    font-size: 14px;
}

.toolSprite, .playerActionSprite {
    /* common sprite image styling */
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: top;
}

.actions {
    list-style-type: none;
}

.cssOrigin-center-top {
    transform-origin: center top 0;
    -webkit-transform-origin: center top 0;
    -ms-transform-origin: center top 0;
    -moz-transform-origin: center top 0;
}

.cssOrigin-right-bottom {
    transform-origin: right bottom 0;
    -webkit-transform-origin: right bottom 0;
    -ms-transform-origin: right bottom 0;
    -moz-transform-origin: right bottom 0;
}

.cssOrigin-top-left {
    transform-origin: top left 0;
    -webkit-transform-origin: top left 0;
    -ms-transform-origin: top left 0;
    -moz-transform-origin: top left 0;
}
/*=== common styling - end ===*/

/*=== page header - start ===*/
.pageWrapper, .mainContent {
    position: relative;
}

.pageHeader, .leftSection {
    top: 0;
    left: 0;
}

.pageHeader {
    height: 44px;
    position: absolute;
    background-color: #3989a7;
    color: #fff;
    z-index: 1;
    /*font-size: 1.667em;*/
    padding: 5px 10px 5px 15px;
    box-shadow: 0 1px 1px 0 rgba(107, 108, 108, 0.5);
    display: none;
}

.homeIco {
    background-position: -82px 0;
    width: 36px;
    height: 30px;
    margin-top: 2px;
}

.hdrTitle {
    display: inline-block;
    vertical-align: top;
    font-weight: bold;
    padding: 1px 0 0 5px;
    font-family: 'Comfortaa', cursive;
    /*font-size: 0.95em;*/
}

.hdrRightContent {
    float: right;
    height: 100%;
    padding-top: 3px;
}

.helpIco, .closeIco {
    width: 28px;
    height: 28px;
    /* float:left;*/
    float: right;
}

.helpIco {
    background-position: 0 0;
    margin-right: 10px;
}

.closeIco {
    background-position: -40px 0;
    background-color: #fff;
}
/*=== page header - end ===*/

/*=== main section - start ===*/
.mainContentWrapper {
    padding: 0;
    background-color: #0a88c8;
    overflow: hidden;
}
/* Left Section - start */
.leftSection {
    width: 52px;
    position: absolute;
}

.leftNav > li > a {
    padding: 6px 10px 6px 12px;
}

.leftNav .separator {
    border-top: 1px solid #0172aa;
    border-bottom: 1px solid #3499c8;
}

.pencilIco, .micIco, .bookIco, .noteIco, .speechIco, .glossaryIco, .dictionaryIco, .vocabIco, .drawingIco {
    height: 48px;
    display: block;
}

.pencilIco {
    background-position: 11px -36px;
    cursor: default;
}

    .pencilIco.active, .pencilIco.active:focus, .pencilIco.active:hover {
        background-position: -29px -36px;
    }

.micIco {
    background-position: 11px -80px;
}

    .micIco:focus, .micIco:hover {
        background-position: -29px -80px;
    }

.speechIco {
    background-position: 11px -206px;
}

    .speechIco:focus, .speechIco:hover, .speechIco.active {
        background-position: -30px -206px;
    }

.bookIco {
    background-position: 11px -122px;
}

    .bookIco:focus, .bookIco:hover, .bookIco.active {
        background-position: -29px -122px;
    }

.glossaryIco {
    background-position: 11px -165px;
}

    .glossaryIco:focus, .glossaryIco:hover, .glossaryIco.active {
        background-position: -29px -165px;
    }

.noteIco {
    background-position: 11px -252px;
}

    .noteIco:focus, .noteIco:hover {
        background-position: -29px -252px;
    }

.vocabIco {
    background-position: -75px -207px;
}

    .vocabIco:focus, .vocabIco:hover, .vocabIco.active {
        background-position: -115px -207px;
    }

.drawingIco {
    background-position: -76px -250px;
}

    .drawingIco:focus, .drawingIco:hover, .drawingIco.active {
        background-position: -119px -250px;
    }
/* Left Section - end */

.rightSection {
    padding: 0;
}

.rightContentWrapper {
    background-color: #fff;
    padding: 0 20px;
}

@media only screen and (orientation:portrait) {
    .leftSection {
        display: none;
    }

    .rightSection, .rightContentWrapper {
        padding: 0;
    }
}
/*=== main section - end ===*/

/*=== player - start ===*/
.playerTopWrapper {
    top: 0;
    left: 0;
}

.playerTopWrapper {
    height: 47px;
}

.playerBottomWrapper {
    height: 46px;
    bottom: 0;
    left: 0;
    padding: 6px 0 0;
}

.playerMiddleWrapper {
    padding: 47px 0 46px;
}

.qnScoreView {
    font-family: 'Comfortaa', cursive;
}

.scoreTimerBlock, .qnView, .scoreView, .timerView, .viewValue .currQn + span {
    display: inline-block;
}

.scoreTimerBlock {
    background-color: #fff;
    padding: 2px;
    color: #47A2F2;
    height: 42px;
    border-radius: 0 0 0 10px;
    box-shadow: -1px 1px 1px 0 #bcbdbe;
    display: none;
}

.qnView, .scoreView, .timerView {
    vertical-align: middle;
}

.qnView, .scoreView {
    margin: 0 2px 0 0;
}

.qnView {
    width: 55px;
}

.scoreView {
    width: 45px;
}

.timerView, .viewLbl, .viewValue {
    font-weight: bold;
}

.timerView {
    height: 32px;
    width: 100px;
    padding: 1px 4px 2px 8px;
    color: #fff;
    background-color: #47a2f2;
    border: 1px solid #387BBF;
    text-align: left;
    border-radius: 6px;
    text-shadow: 1px 1px 1px rgba(2, 82, 110, 0.5);
}

    .timerView > span:first-child {
        background-position: -82px -129px;
        height: 26px;
        width: 24px;
        margin-right: 4px;
    }

    .timerView > .timer {
        margin-top: 2px;
    }

        .timerView > .timer > div > div {
            margin-right: 1px;
        }

            .timerView > .timer > div > div:last-child {
                margin-right: 0;
            }

.viewLbl, .viewValue {
    display: block;
}

.viewLbl {
    padding: 0 0 1px;
}

.viewValue {
    height: 24px;
    color: #47a2f2;
    border: 1px solid #94E2F8;
    border-radius: 6px;
    padding: 0;
}

#question-counter > div {
    padding: 1px 0 0;
}

.viewValue > span {
    vertical-align: bottom;
}

.viewValue .currQn + span {
    vertical-align: top;
    margin: 5px 2px 0;
}
/*=== player - end ===*/


/******** Internet Explorer SVG Image Blur Fixes start ********/
.IE-SVG-BG {
    overflow: hidden;
    display: none;
    pointer-events: all;
}

.browser-msie .IE-SVG-BG {
    display: block;
    pointer-events: all;
}

.browser-msie .IE-SVG-Container {
    background: none !important;
}

/*=== Common Styling for MCQ and Hot-text - start ===*/
.passageOuterWrapper, .qnWrapper {
    background-color: #fff;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    background-clip: padding-box;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding-box;
}

.passageOuterWrapper {
    width: 40%;
    border: 2px solid #b6b7b7;
    padding: 10px 0 10px 10px;
}

.passageWrapper, .scroller {
    overflow-y: auto;
    padding: 0 15px 0 0;
}

.passageWrapper, .feedbackWrapper {
    display: block;
}

.passageWrapper {
    line-height: 1.2em;
    height: 100%;
}

.qnWrapper {
    border: 2px solid #0fa8e1;
    padding: 10px 2px 10px 10px;
}

.scroller {
    -moz-padding-end: 16px;
}

.passageWrapper, .scroller {
    -webkit-padding-end: 10px;
    -webkit-overflow-scrolling: touch;
}

    .passageWrapper h1, .passageWrapper h2, .feedbackContainer .feedback {
        font-weight: bold;
    }

    .passageWrapper p, .passageWrapper p + p, .passageWrapper h3, .passageWrapper h2, .passageWrapper h1 {
        padding: 0 0 5px;
    }

        .passageWrapper p + h2 {
            padding: 3px 0 2px;
        }

    .passageWrapper h3 {
        font-weight: 700;
    }

    .passageWrapper p {
        line-height: 1.25em;
        text-align: left;
        -moz-padding-end: 14px;
    }

.qnPrompt {
    font-style: italic;
}

.feedbackWrapper, .feedbackText > .instruction, .toolOptBtmR .nextTxtBtn, .toolOptBtmR .submitTxtBtn, .toolOptBtmR .resetTxtBtn, .toolOptBtmR .showAnsTxtBtn, .toolOptBtmR .resetCurrentTxtBtn {
    display: inline-block;
}

.feedbackWrapper, .feedbackContainer .feedback, .feedbackText > .instruction {
    width: 100%;
}

.feedbackWrapper {
    bottom: 0;
    margin: 0 0 5px;
    height: 106px;
}

.feedbackHeader {
    border-radius: 8px 8px 0 0;
    color: #fff;
    padding: 2px 10px 1px;
}

.feedbackContainer.correct .feedbackHeader {
    background-color: #09911C;
}

.feedbackContainer.incorrect .feedbackHeader {
    background-color: #e10f0f;
}

.feedbackContainer .feedback {
    background-color: #fff;
    border-radius: 0 0 8px 8px;
    display: table;
    height: 50px;
    padding-bottom: 14px;
}

.feedbackWrapper .feedback .feedbackText {
    vertical-align: middle;
    padding: 2px 10px 3px;
    display: table-cell;
}

.feedbackText > .instruction {
    color: #1B5BAD;
    padding: 0 10px;
    bottom: 2px;
    left: 0;
}
/*=== Common Styling for MCQ and Hot-text - end ===*/

/*=== tool option section - start ===*/
.rightContentWrapper.toolOptSection {
    padding: 10px 10px 10px 20px;
}

.toolOptSection .toolOptAnimationCntnr {
    background-color: #fff;
}

.toolOptWrapper, .toolOptTop {
    top: 0;
    left: 0;
}

.toolOptWrapper {
    padding: 12px 10px 5px;
    z-index: 1;
}

.toolOptTop {
    padding: 10px 0 0;
}

.toolOptBtm {
    left: 0;
    bottom: 0;
    z-index: 2;
}

.toolOptBtmM {
    width: 50%;
}

.toolOptBtmL, .toolOptBtmM, .toolOptBtmR {
    padding: 0 10px 5px;
}
/*=== tool option section - end ===*/

/*=== bottom button styling - start ===*/
.btmRightCntnr {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 0 0 5px;
}

#global-buttons-left {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 0 0 5px 10px;
    transform-origin: left bottom 0 !important;
    -webkit-transform-origin: left bottom 0 !important;
    -ms-transform-origin: left bottom 0 !important;
    -moz-transform-origin: left bottom 0 !important;
    z-index: 4;
}
/*=== bottom button styling - end ===*/

/*=== left Activity Control Wrapper - start ===*/
.leftActivityControlWrapper {
    left: 10px;
    top: 47px;
    width: 50px;
    z-index: 10;
    display: none;
}

    .leftActivityControlWrapper > button {
        margin: 0 0 10px;
    }

#tutorial_container .leftActivityControlWrapper > .audioIconBtn {
    margin: 15px 0 10px;
}
/*=== left Activity Control Wrapper - end ===*/

/*=== Action button styling - start ===*/
.blueTxtBtn, .blueBgBtn, .againBtn, .quitBtn, .passagePlayControls {
    color: #fff;
    margin: 0 10px 0 0;
    font-weight: normal;
    outline: 0 none;
    vertical-align: top;
    text-align: center;
    line-height: 1em;
}

.blueTxtBtn, .blueBgBtn {
    background-color: #ff9119;
}

.blueBgBtn {
    width: 50px;
    padding: 0;
}

.blueTxtBtn, .againBtn, .quitBtn, .blueTxtBtn:disabled:hover {
    padding: 10px 20px;
}

.blueBgBtn > .playerActionSprite {
    display: inline-block;
    width: 28px;
    height: 24px;
    vertical-align: middle;
}

.againBtn:hover, .againBtn:focus, .quitBtn:hover, .quitBtn:focus {
    padding: 5px 11px 5px 10px;
}

.blueBgBtn:active, .blueBgBtn:visited, .blueTxtBtn:active, .blueTxtBtn:visited {
    box-shadow: 0 2px 0 0 rgba(66, 69, 69, 0.3);
}

.blueTxtBtn:active, .blueTxtBtn:visited, .againBtn:active, .againBtn:visited, .quitBtn:active, .quitBtn:visited {
    padding: 10px 20px;
}

.blueTxtBtn:disabled, .blueBgBtn:disabled {
    background-color: #d6d6d6 !important;
}

    .blueTxtBtn:disabled > span, .blueBgBtn:disabled > span {
        background-position-y: -6px !important;
        opacity: 0.3 !important;
        filter: alpha(opacity=30);
    }

.playBackBtn:disabled > .playerActionSprite,
.playBackBtn:disabled > .playerActionSprite,
.playBackBtn:disabled:active > .playerActionSprite,
.playBackBtn:disabled:active > .playerActionSprite, .playBackBtn > .playerActionSprite {
    background-position: -4px -6px;
}

.playBackBtn:active > .playerActionSprite, .playBackBtn:visited > .playerActionSprite {
    background-position: -4px -4px;
}

.pauseBtn > .playerActionSprite {
    background-position: -90px -6px;
}

.pauseBtn:active > .playerActionSprite, .pauseBtn:visited > .playerActionSprite {
    background-position: -90px -4px;
}

.playBtn > .playerActionSprite {
    background-position: -32px -6px;
}

.playBtn:active > .playerActionSprite, .playBtn:visited > .playerActionSprite {
    background-position: -32px -4px;
}

.playForwardBtn > .playerActionSprite {
    background-position: -59px -6px;
}

.playForwardBtn:active > .playerActionSprite, .playForwardBtn:visited > .playerActionSprite {
    background-position: -59px -4px;
}

.showHidetxtBtn {
    line-height: 0.875em;
    position: absolute;
    left: 60px;
    top: 0;
}

    .showHidetxtBtn, .showHidetxtBtn:hover, .showHidetxtBtn:focus {
        padding: 0 2px 0 1px;
    }

        .showHidetxtBtn:active, .showHidetxtBtn:visited {
            padding: 2px 2px 0 1px;
        }

.againBtn, .quitBtn {
    width: 66px;
}

    .againBtn, .againBtn:hover, .againBtn:focus {
        padding: 4px 10px 6px 9px;
    }

.againBtn {
    background-color: #9c39e3;
    border: 1px solid #872fc8;
}

    .againBtn:hover, .againBtn:focus {
        box-shadow: inset 0 0 1px #6F25A6;
    }

    .againBtn:active, .againBtn:visited {
        box-shadow: 0 2px 0 0 rgba(135, 47, 200, 0.3);
        padding: 6px 10px 4px 9px;
    }

    .blueBgBtn:active, .blueBgBtn:visited, .blueTxtBtn:active, .blueTxtBtn:visited,
    .againBtn:active, .againBtn:visited {
        border-width: 1.5px;
    }

.quitBtn {
    font-family: 'Asul', sans-serif;
    background-color: #fd50a6;
    border: 1px solid #d7418b;
    box-shadow: 0 1px 0 0 rgba(215, 65, 139, 0.3);
}

    .quitBtn:hover, .quitBtn:focus {
        box-shadow: inset 0 0 1px #d7418b;
    }

    .quitBtn:active, .quitBtn:visited {
        border-width: 2px;
        box-shadow: 0 2px 0 0 rgba(215, 65, 139, 0.3);
    }

.interactionBtnWrapper .audioBtn,
.interactionBtnWrapper .showHidetxtBtn {
    top: 58px;
    position: absolute;
}

.interactionBtnWrapper .audioBtn {
    left: 10px;
    right: auto;
}

.interactionBtnWrapper .showHidetxtBtn {
    right: 5px;
    left: auto;
}
/*=== Action Button styling - end ===*/

/*=== Modal Popup Styling - start ===*/
.modalPopupWrapper, .fadeView, .modalBoxContainer, .modalHeader {
    position: absolute;
}

.modalPopupWrapper, .fadeView, .modalHeader, .modalBtnCntnr {
    left: 0;
    right: 0;
}

.modalPopupWrapper, .fadeView, .modalHeader {
    top: 0;
}

.modalPopupWrapper, .fadeView, .modalBtnCntnr {
    bottom: 0;
}

.modalPopupWrapper, .fadeView {
    z-index: 1;
}

.fadeView {
    background: rgba(255, 255, 255, 0.4) none;
}

.modalBoxContainer {
    background-color: #FFF;
    width: 486px;
    height: 224px;
    top: 50%;
    left: 50%;
    margin: -112px 0 0 -243px;
    z-index: 2;
    border-radius: 10px;
    box-shadow: 1px 1px 2px 1px rgba(167, 168, 168, 0.6);
}

.modalHeader {
    background-color: #21BAFF;
    height: 40px;
    font-family: 'Comfortaa', cursive;
    text-align: left;
    color: #fff;
    padding: 6px 8px 4px;
    z-index: 3;
    font-weight: bold;
    border-radius: 10px 10px 0 0;
}

.modalContainer {
    padding: 41px 5px 5px;
}

.modalContainer, .modalScroller, .modalContents {
    height: 100%;
}

.modalScroller {
    overflow: auto;
}

.modalContents {
    position: relative;
}

.modalMessage {
    padding: 30px 5px 5px;
}

.modalBtnCntnr {
    position: absolute;
    padding: 0 10px 20px;
}

.modalBtn {
    height: 60px;
    padding: 0;
    color: #fff;
    width: 139px;
    text-align: center;
    vertical-align: middle;
    margin: 0 10px 0 0;
    outline: 0 none;
    text-shadow: 1px 2px 1px rgba(66, 69, 66, 0.3);
    border-radius: 10px;
    box-shadow: 0 0 1px 0 rgba(66, 69, 66, 0.3);
}

    .modalBtn:last-child {
        margin: 0;
    }

.greenBtn {
    background-color: #10df10;
    border: 1px solid #08aa08;
}

.redBtn {
    background-color: #ff4d4a;
    border: 1px solid #e74542;
}

.modalBtn:focus, .modalBtn:hover {
    border-width: 0.75px;
}

.greenBtn:hover, .greenBtn:focus {
    box-shadow: inset 0 0 1px #08aa08;
}

.redBtn:hover, .redBtn:focus {
    box-shadow: inset 0 0 1px #e74542;
}

.modalBtn:active, .modalBtn:visited {
    padding: 17px 0 15px;
    border-width: 1.5px;
    box-shadow: 0 1px 2px 0 rgba(66, 69, 66, 0.3);
}
/*=== Modal Popup Styling - end ===*/

/*=== successTrackerWrapper - start ===*/
.successTrackerCover {
    height: 100%;
    width: 670px;
    max-height: 470px;
    margin: 0 auto;
    box-shadow: 0 -3px 2px 2px #c3c3c3;
}

.successTrackerTitle, .successTrackerResult, .successTrackerResult > table div {
    font-family: 'Comfortaa', cursive;
}

    .successTrackerTitle, .successTrackerResult > table > tbody > tr:first-child > td, .successTrackerResult > table div {
        font-weight: bold;
        line-height: normal;
    }

    .successTrackerTitle, .successTrackerResult > table > tbody > tr:first-child > td, .successTrackerResult > table > tbody > tr:last-child > td, .successTrackerFooter {
        text-align: center;
    }

.successTrackerTitle {
    padding-top: 30px;
    height: 80px;
    color: #fff;
    text-shadow: 2px 2px 2px rgba(50, 50, 50, 0.5);
}

.successTrackerResult {
    width: 450px;
    margin: 20px 110px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 2px 2px 2px rgba(50, 50, 50, 0.5);
}

    .successTrackerResult > table {
        background-color: transparent;
        border-collapse: collapse;
        border-spacing: 0;
    }

        .successTrackerResult > table > tbody > tr {
            height: 40px;
        }

            .successTrackerResult > table > tbody > tr:first-child > td {
                vertical-align: middle;
                width: 50%;
                color: #47a2f2;
                letter-spacing: 1px;
            }

            .successTrackerResult > table > tbody > tr:last-child > td {
                padding-bottom: 8px;
            }

        .successTrackerResult > table div {
            display: inline-block;
            border: 1px solid #47a2f2;
            width: 200px;
            border-radius: 10px;
            color: #47a2f2;
            padding: 8px 0;
            letter-spacing: 1px;
        }

.successTrackerFooter {
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px;
}

.normBtnContainer {
    display: inline-block;
    width: 100px;
    position: absolute;
    z-index: 11;
    bottom: 10px;
    right: 10px;
}

    .normBtnContainer > button {
        margin: 0;
    }

        .normBtnContainer > button:first-child {
            margin: 0 0 10px;
        }

#result-container:not(:empty) ~ .global-buttons .quitBtn {
    display: block;
    margin: 10px 0 0;
}
/*=== successTrackerWrapper - end ===*/

/*=== Tutorial Styling - start ===*/
.tutorial-wrapper, #content-wrapper, #text-container, .onScreenTextCntnr, .textCntnr {
    position: relative;
}

.tutorial-wrapper {
    color: #464646;
    height: 100%;
}

#content-wrapper, #animationContainer.tutorial {
    top: 0;
    left: 0;
    right: 0;
}

#animationContainer {
    overflow: hidden;
}

    #animationContainer canvas {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        margin: 0 auto;
    }

    #animationContainer.tutorial {
        background-color: #87afaf;
        position: absolute;
    }

    #animationContainer.practice {
        background-color: #aed7b7;
    }

    #animationContainer div {
        width: 100% !important;
        height: 100% !important;
        display: none;
    }

        #animationContainer div:first-child {
            display: block !important;
        }

#text-container, .onScreenTextCntnr, .onScreenTextCntnr, .textCntnr {
    display: block;
}

#text-container, .onScreenTextCntnr {
    top: 52px;
}

#practice-objective {
    top: 407px;
    width: 470px;
}

#tutorial-objective {
    top: 15px;
    width: 570px;
}

.onScreenTextCntnr {
    background-color: #fff;
    border: 2px solid #47A2F2;
    margin: 0 auto;
    padding: 2px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    color: #333;
    box-shadow: 1px 1px 0 1px rgba(91, 92, 92, 0.3);
    width: 540px;
    z-index: 1;
}

    .onScreenTextCntnr > .dispTable {
        width: 100%;
        min-height: 36px;
    }

#practice-objective > .dispTable {
    height: 46px;
}

.textCntnr {
    top: 52px;
    width: 100%;
}

    .textCntnr > table {
        width: 100%;
    }

    .textCntnr .leftscreenText, .textCntnr .rightscreenText {
        width: 16.66%;
    }

.onScreenTextCntnr .onScreenText {
    padding: 1px;
    vertical-align: middle;
    text-align: center;
}

#content-wrapper, #animationContainer, #tutorial_container {
    width: 670px;
    height: 470px;
    margin: 0 auto;
}

#tutorial-cotnent {
    display: none;
    padding: 0;
}
/*=== Tutorial Styling - end ===*/

/*=== Practice Styling - start ===*/
#intro-container, #outro-container, #tutorial-container, #result-container, #activity-container, #loader, #dialog, #clickToStart, #quizContainer,
#interaction-container .mcqHotWrapper, #activityBody .mcqHotWrapper, #activityBody.playerMiddleWrapper,
.preloadAnimation, .pregressBar {
    margin: 0 auto;
}

#intro-container, #outro-container, #tutorial-container,
#result-container, #activity-container, #loaderBg, #dialog,
#clickToStart, #quizContainer {
    display: none;
    width: 500px;
    top: 0;
}

#interaction-container {
    display: none;
    background-size: 100%;
    padding: 60px 0 63px 0;
}

    #interaction-container .mcqHotWrapper, #activityBody .mcqHotWrapper {
        width: 520px;
    }

    #interaction-container .mcqHotWrapper {
        height: 300px;
    }

#activityBody.playerMiddleWrapper {
    height: 100%;
    z-index: 1;
    padding: 10px 0 35px;
    background-color: #2d7e9c;
}

.interactionContentWrapper {
    background-color: #2b7896;
    margin: 0 10px;
}

#dialog, #activityBody.playerMiddleWrapper {
    left: 0;
    right: 0;
}

#dialog, #clickToStart, #intro-container .startBtn1, #global-buttons .skip, #fontLoader, .preloadTitle, .preloadAnimation, .pregressBar, .shutter {
    position: absolute;
}

#clickToStart {
    width: 100%;
}

#clickToStart, #intro-container .startBtn1, #global-buttons .skip, .preloadAnimation, .fill-wrapper {
    display: block;
}

#intro-container .startBtn1, #global-buttons .skip {
    color: #fff;
    cursor: pointer;
    font-weight: bold;
    padding-top: 4px;
    border-radius: 6px;
}

#intro-container .startBtn1 {
    width: 44px;
    height: 34px;
    background-color: #26df26;
    border: 1px solid #179417;
    bottom: 18px;
    left: 20px;
}

#global-buttons .skip {
    width: 52px !important;
    background-image: none !important;
    height: 36px;
    background-color: #47a2f2;
    font-family: 'Asul', sans-serif;
    border: 1px solid #2977bb;
    bottom: 5px;
    left: 5px;
}

#fontLoader {
    visibility: hidden;
    display: none;
    bottom: 0;
}

.loaderBg, .resultBg {
    background-color: #2d7e9c;
    height: 100%;
}

.preloadTitle, .preloadAnimation, .pregressBar {
    left: 0;
    right: 0;
}

.preloadTitle {
    top: 150px;
    font-weight: bold;
    color: #fff;
}

.preloadAnimation {
    background: url(../images/loading_animation.svg) no-repeat;
    top: 238px;
    width: 106px;
    height: 36px;
}

.pregressBar, .fill-wrapper {
    overflow: hidden;
}

.pregressBar {
    top: 275px;
    height: 30px;
    width: 200px;
    padding: 2px;
    border: 2px solid #fff;
    border-radius: 14px;
}

    .fill-wrapper, .pregressBar .progressFill, .shutter {
        height: 100%;
        width: 100%;
    }

.fill-wrapper {
    border-radius: 12px;
}

.pregressBar .progressFill {
    background-color: #fff;
    border-radius: 8px 0 0 8px;
}

    .pregressBar .progressFill[value]::-webkit-progress-bar {
        color: #eee;
    }

.shutter {
    top: 0;
    left: 0;
    z-index: 999999;
}

.startBtn {
    background-color: #26df26;
    border: 1px solid #0e960e;
    margin-left: 10px !important;
    width: 50px;
    height: 34px;
    color: #fff;
    padding: 0;
    text-align: center;
    border-radius: 6px;
}

    .startBtn:hover {
        border: 0;
    }

    .startBtn:active {
        border-width: 2px;
    }

.timerView div, .timerView span {
    float: left;
}
/*=== Practice Styling - end ===*/

/*=== PracticePassage - start ===*/
.practPsgOuterWrapper, .practPassageWrapper {
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -webkit-background-clip: padding-box;
}

.practPsgOuterWrapper {
    background: transparent;
    margin: 0;
    width: 700px;
    height: 350px;
}

.practPassageWrapper {
    transform: skew(1deg,1deg);
    -webkit-transform: skew(1deg,1deg);
    -ms-transform: skew(1deg,1deg);
    -moz-transform: skew(1deg,1deg);
}

.practPsgContentWrapper {
    transform: skew(-1deg,-1deg);
    -webkit-transform: skew(-1deg,-1deg);
    -ms-transform: skew(-1deg,-1deg);
    -moz-transform: skew(-1deg,-1deg);
    left: -15px;
}

.passageContents h1 {
    font-weight: bold;
    padding: 0 0 10px;
    margin-bottom: 10px;
}

.passageContents h2 {
    font-weight: 600;
}

.passageContents p, .passageContents h2 {
    text-align: left;
    position: relative;
}

    .passageContents p + h2 {
        padding: 10px 0 0;
    }

#showPassageWrapper, .showPassageBtnContainer, .practPassageWrapper .closeIcon, .audioIcon {
    position: absolute;
}

#showPassageWrapper {
    top: 0;
    left: 0;
    right: 0;
    display: none;
}

    #showPassageWrapper .practPsgOuterWrapper {
        height: 376px;
        margin-top: 47px;
        z-index: 2;
        position: relative;
        padding: 14px;
    }

.showPassageBtnContainer {
    z-index: 100;
    right: 100px;
    top: 53px;
}

.practPassageWrapper .closeIcon {
    background-position: -127px -45px;
    height: 18px;
    width: 18px;
    right: -13px;
    top: -15px;
    cursor: pointer;
    z-index: 10;
    opacity: 0.7;
    filter: alpha(opacity=70);
}

    .practPassageWrapper .closeIcon:hover {
        opacity: 1;
        filter: alpha(opacity=100);
    }

.passageContents p > img {
    width: 70px;
    height: 70px;
    display: block;
    float: left;
    margin: 4px 5px;
}

.passageContents p, .tutorialBook.passage p {
    display: block;
    margin-bottom: 5px;
    float: left;
    line-height: 1;
    position: relative;
}

    .passageContents p.tab:first-letter, .tutorialBook.passage p.tab:first-letter {
        margin-left: 1em;
    }

.tutorialBook.passage h2 {
    position: relative;
}

.passageContents p > span {
    margin-bottom: 5px;
}

.passageInstruction {
    font-style: italic;
    text-align: left;
    float: left;
    width: 100%;
}

.qtip-default {
    border: 2px solid #47A2F2;
    background-color: white;
    color: #333;
    border-radius: 10px;
    line-height: 1em;
    box-shadow: 1px 1px 0 1px rgba(91, 92, 92, 0.3);
}

#qtip-l1.qtip .qtip-tip, #qtip-l2.qtip .qtip-tip, #qtip-l3.qtip .qtip-tip {
    right: initial !important;
    left: 10px !important;
}

#qtip-r1.qtip .qtip-tip, #qtip-r2.qtip .qtip-tip, #qtip-r3.qtip .qtip-tip {
    left: initial !important;
    right: 10px !important;
}

.hideCallOut {
    display: none !important;
}


li a {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    user-select: none;
}

.onScreenText {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    user-select: text;
}

/*=== PracticePassage - end ===*/

/*=== Interaction WrongAnswer Info - start ===*/

.wrongAnswerInfoContainer {
    position: absolute;
    z-index: 101;
    width: 445px;
    height: 300px;
    left: 0;
    right: 0;
    margin: 0 auto;
    margin-top: 40px;
}

    .wrongAnswerInfoContainer:before {
        content: url("../images/PopnoticeBoard.svg");
    }

.infoContentWrapper {
    position: absolute;
    top: 0;
    left: 0;
}

    .infoContentWrapper .content {
        padding: 30px;
    }

.wrongAnswerInfoContainer .passageDoneBtn {
    right: -42px;
    bottom: 8px;
}

/*=== Interaction WrongAnswer Info - end ===*/

/*=== MatchedPair section - start ===*/
#interaction-container .matchedPairWrapper, #activityBody .matchedPairWrapper {
    margin: 0 auto;
}

#interaction-container .matchedPairWrapper {
    height: 300px;
}

.matchedPairWrapper {
    color: #464646;
}

    .matchedPairWrapper .passageOuterWrapper {
        background-color: rgba(255, 255, 255, 0);
    }

    .matchedPairWrapper .qnWrapper {
        border: 0 solid #0fa8e1;
        background: none;
    }

    .matchedPairWrapper .qnOuterWrapper {
        padding: 0 0 0 10px;
    }

        .matchedPairWrapper .qnWrapper, .matchedPairWrapper .qnOuterWrapper.noPassage, .matchedPairAltAudioBtn {
            padding: 0;
        }

    .matchedPairWrapper .typeMatchedPair {
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-user-select: none;
        padding-top: 10px;
    }

        .matchedPairWrapper .typeMatchedPair #altContainer, .matchedPairWrapper .typeMatchedPair .mp_dragContainer,
        .matchedPairWrapper .typeMatchedPair .dragHolder, .matchedPairWrapper .typeMatchedPair .mp_dropContainer,
        .matchedPairWrapper .typeMatchedPair .mp_left, .matchedPairWrapper .typeMatchedPair .mp_left > span,
        .matchedPairWrapper .typeMatchedPair .mp_dropZone, .matchedPairWrapper .typeMatchedPair .mp_dropContainer .mp_dropZone .mp_drags {
            position: relative;
        }

            .matchedPairWrapper .typeMatchedPair .mp_dragContainer.noAudio {
                width: auto;
            }

        .matchedPairWrapper .typeMatchedPair .dragHolder {
            margin: 10px;
        }

figure.center .matchedPairWrapper .typeMatchedPair .dragHolder {
    margin: 10px 0;
}

.matchPairTypeTwo.matchedPairWrapper .typeMatchedPair .dragHolder:first-child {
    margin-top: 0px;
}

.matchedPairWrapper .typeMatchedPair .dragHolder, .matchedPairWrapper .typeMatchedPair .mp_drags,
.matchedPairWrapper .typeMatchedPair .mp_dropZone {
    min-width: 120px;
    position: relative;
    text-align: left;
    white-space: normal;
}

    .matchedPairWrapper .typeMatchedPair .dragHolder .leftArrow,
    .matchedPairWrapper .typeMatchedPair .mp_left span.leftArrow {
        width: 0;
        height: 0;
        border: 0;
        border-top: 10px solid transparent;
        border-left: 10px solid #8bb8ca;
        border-bottom: 10px solid transparent;
        margin: auto 0;
        z-index: 3;
        padding: 0;
        display: inline-block;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
    }



figure.centerJustified .matchedPairWrapper .typeMatchedPair .dragHolder .leftArrow,
figure.centerJustified .matchedPairWrapper .typeMatchedPair .mp_left span.leftArrow {
    margin-right: -10px;
    border-left: 10px solid #878F96;
    left: initial;
}

.matchedPairWrapper .typeMatchedPair .mp_staticElements .mp_left .ui-draggable-disabled span.leftArrow {
    display: none;
}

.matchPairTypeTwo.matchedPairWrapper .typeMatchedPair .dragHolder .leftArrow,
.matchPairTypeTwo.matchedPairWrapper .typeMatchedPair .mp_left span.leftArrow {
    left: -10px !important;
    border-left: 0px !important;
    border-right: 10px solid #878F96;
    display: table-cell;
}

.matchedPairWrapper .typeMatchedPair .mp_drags, .matchedPairAltAudioBtn, .matchedPairAltAudioBtn.leftmatchedPairAltAudioBtn {
    position: absolute;
}

    .matchedPairWrapper .typeMatchedPair .mp_drags, .matchedPairWrapper .typeMatchedPair .mp_drags span,
    .matchedPairWrapper .typeMatchedPair .mp_left span, .matchedPairWrapper .typeMatchedPair .mp_left > span,
    .matchedPairWrapper .typeMatchedPair .mp_dropZone {
        vertical-align: middle;
    }

.matchedPairWrapper .typeMatchedPair .mp_drags {
    background: #fff;
    padding: 0 10px 0 0;
    display: table;
    border: 1px solid #AFAFAF;
}

.matchPairTypeTwo.matchedPairWrapper .typeMatchedPair .mp_staticElements .mp_drags {
    /*padding: 0 0 0 10px;*/
    width: 100% !important;
}

.matchedPairWrapper .typeMatchedPair .mp_drags img {
    display: table;
}

.matchedPairWrapper .typeMatchedPair .mp_drags.center {
    text-align: center !important;
    display: block;
}

.matchedPairWrapper .typeMatchedPair .mp_drags.leftPair {
    border: 0 solid rgba(255, 255, 255, 0);
    text-align: left;
    box-shadow: none;
}

.matchedPairWrapper .mp_dropZone .mp_drags:not(.leftPair) {
    margin-left: -1px;
    margin-top: -1px;
    position: absolute !important;
    border: 1px solid #878F96;
}

.matchedPairWrapper .typeMatchedPair .mp_dropContainer {
    height: 100%;
}

    .matchedPairWrapper .typeMatchedPair .mp_dropContainer .mp_droppableElements {
        display: inline-block;
        width: 25%;
        position: relative;
        border: 1px dashed #dfdfdf;
        margin-right: -8px;
    }

    .matchedPairWrapper .typeMatchedPair .mp_dropContainer .mp_staticElements {
        display: inline-block;
        width: 74%;
        /*margin-left: 3px;*/
    }

.matchPairTypeTwo.matchedPairWrapper .typeMatchedPair .mp_dropContainer .mp_staticElements,
.matchPairTypeTwo.matchedPairWrapper .typeMatchedPair .mp_dropContainer .mp_droppableElements,
.matchPairTypeTwo.matchedPairWrapper .typeMatchedPair .mp_dragContainer {
    display: inline-block;
    vertical-align: top;
}

.matchPairTypeTwo.matchedPairWrapper .typeMatchedPair .mp_dropContainer .mp_staticElements {
    width: 50%;
    margin-top: 1px;
}

.matchPairTypeTwo.matchedPairWrapper .typeMatchedPair .mp_dropContainer .mp_droppableElements {
    width: 24%;
    margin: 0 5px 0 -5px;
}

.matchPairTypeTwo.matchedPairWrapper .typeMatchedPair .mp_dragContainer {
    width: 23%;
    margin-top: 1px;
}

.matchedPairWrapper .typeMatchedPair .mp_left {
    width: 100%;
    display: table;
    margin: 0 0 10px;
    border-right: 1px solid rgba(189, 186, 186, 0);
}

.matchedPairWrapper .typeMatchedPair div.mp_left:last-child {
    margin-bottom: 0px;
}

.matchedPairWrapper .typeMatchedPair .mp_drags span, .matchedPairWrapper .typeMatchedPair .mp_left span {
    padding-left: 5px;
    display: table-cell;
}

.matchedPairWrapper .typeMatchedPair .mp_staticElements .mp_drags.ui-draggable-disabled span {
    color: #2d7e9d;
    padding: 0 10px;
    width: 99%;
}

    .matchedPairWrapper .typeMatchedPair .mp_staticElements .mp_drags.ui-draggable-disabled span.multipleSpan {
        color: #2d7e9d;
        padding: 0 10px 0 0;
        width: 70% !important;
    }

.matchedPairWrapper .typeMatchedPair .mp_left > span {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-left: 10px solid #e2e2e2;
    border-bottom: 10px solid transparent;
    margin-right: -10px;
    z-index: 1;
    padding: 0;
    display: inline-block;
    position: absolute;
    top: calc(50% - 11px);
}

.matchPairTypeTwo.matchedPairWrapper .typeMatchedPair .mp_left > span.rightArrow {
    width: 0;
    height: 0;
    border: 0;
    border-top: 10px solid transparent;
    border-right: 10px solid #e2e2e2;
    border-bottom: 10px solid transparent;
    margin-left: -10px;
    z-index: 1;
    padding: 0;
    display: inline-block;
    position: absolute;
    top: calc(50% - 11px);
}

.matchedPairWrapper .typeMatchedPair .mp_left > span > img {
    margin-left: -4px;
}

.matchedPairWrapper .typeMatchedPair .mp_left .mp_header {
    min-height: 32px;
    border-bottom: 1px solid rgba(189, 186, 186, 0);
}

.matchedPairWrapper .typeMatchedPair .mp_dropZone {
    display: table-cell;
    background-color: #dfdfdf;
}

.matchedPairWrapper .typeMatchedPair .mp_staticElements .mp_dropZone {
    width: 100% !important;
}

.matchedPairWrapper .typeMatchedPair .mp_dropContainer .mp_staticElements .mp_dropZone .mp_drags {
    width: 100% !important;
    display: table;
}

.matchPairTypeTwo.matchedPairWrapper .typeMatchedPair .mp_dropZone {
    width: 100% !important;
    vertical-align: top;
}

.mp_dropZone:not(.ui-droppable-disabled) {
    width: 150px;
}

.matchedPairWrapper .typeMatchedPair .mp_dropZone.ui-droppable-disabled {
    border: 2px solid #3f6f96;
    box-shadow: none;
}

.matchedPairWrapper .typeMatchedPair .ui-draggable-disabled {
    cursor: default;
}

.matchedPairWrapper .typeMatchedPair .mp_staticElements .mp_dropZone i.tileIcon {
    width: 0px !important;
    background-image: none !important;
    /*background-color: #e2e2e2 !important;*/
    background-color: #fff !important;
    /*margin-right: 5px;*/
    display: none;
}

.matchPairTypeTwo.matchedPairWrapper .typeMatchedPair .mp_staticElements .mp_dropZone i.tileIcon {
    float: right;
    margin: 0 0 0 5px;
}

.matchPairTypeTwo.matchedPairWrapper .typeMatchedPair .mp_staticElements .mp_dropZone .sequenceSeparator {
    display: none;
}

.matchedPairWrapper .typeMatchedPair .mp_dropContainer, .matchedPairWrapper .typeMatchedPair .mp_left,
.matchedPairWrapper .typeMatchedPair .mp_dropContainer .mp_dropZone .mp_drags {
    text-align: left;
}

    .matchedPairWrapper .typeMatchedPair .mp_dropContainer .mp_dropZone .mp_drags {
        width: 100% !important;
        top: 0px;
    }

.matchPairTypeTwo.matchedPairWrapper .typeMatchedPair .mp_dropContainer {
    display: block;
}

.mp_dropContainer .headingContent {
    margin-left: 5px;
}

    .mp_dropContainer .headingContent > div {
        min-height: 22px;
        font-size: 14px;
        color: #666;
        text-align: center;
        font-weight: bold;
    }

.matchedPairWrapper .typeMatchedPair .ui-state-active {
    background-color: #949494;
}
/*=== MatchedPair section - end ===*/

/*=== hot-text and mcq common - start ===*/
.mcqReadAudio, .hotTextReadAudio {
    background: url('../images/mcq_read_big.svg') no-repeat top left;
    width: 25px;
    height: 25px;
    border: 0px;
    position: absolute;
    right: 30px;
    outline: none;
    padding: 0px;
    left: 8px;
    top: 16px;
}

    .hotTextReadAudio:active, .mcqReadAudio:active {
        background: url('../images/mcq_read_small.svg') no-repeat top left;
    }
/*=== hot-text and mcq common - end ===*/

/*=== hot-text style - start ===*/
.stemFeedbackContainer, .stemInnerWrapper, .stemContentBox, .hotTextContentWithImage.vertical > .hotTextImageWrapper > img {
    width: 100%;
}

.stemFeedbackContainer, .hotTxtContentOuterWrapper {
    padding: 0 10px;
}

.stemOuterWrapper, .feedbackAttemptContainer .stemContentInnerBox {
    position: relative;
    padding: 0;
}

.stemInnerWrapper, .stemContentBox, .hotTextContentWithImage.vertical > .hotTxtContentInnerWrapper, .hotTextContentWithImage.vertical > .hotTextImageWrapper,
.hotTextContentWithImage.horizontal .hotTextImageWrapper > img {
    height: 100%;
}

.hotTxtContentOuterWrapper /* next button was overlappin with hotTxtContentOuterWrapper */ {
    margin-top: 0px;
    background-color: #fff;
    padding: 5px;
}

.stemContentBox {
    display: table;
}

.stemContentInnerBox {
    display: table-cell;
    padding: 3px 0;
    vertical-align: middle;
    color: #2d7e9d;
}

    .stemContentInnerBox .questionStem {
        font-size: 1.2em;
        padding: 10px 0;
    }

        .stemContentInnerBox .questionStem i, .mcqAnswer i, .onScreenText i {
            font-style: italic;
        }

.showPassageBtn, .audioIconBtn, .showReferencePassageBtn, .hotTextAudioButton, .animationReplayButton {
    margin: 0;
    border: 0;
    padding: 0;
    outline: 0 none;
    height: 36px;
    width: 36px;
}

.showPassageBtn, .audioIconBtn, .showReferencePassageBtn, .animationReplayButton {
    display: inline-block;
}

.showPassageBtn, .showReferencePassageBtn {
    background: url(../images/passage_icon_normal.svg) no-repeat top left;
}

    .showPassageBtn:hover, .showReferencePassageBtn:hover {
        background: url(../images/passage_icon_hover.svg) no-repeat top left;
    }

    .showPassageBtn:active, .showReferencePassageBtn:active {
        background: url(../images/passage_icon_active.svg) no-repeat top left;
    }

.audioIconBtn {
    background: url(../images/stem_speaker_normal.svg) no-repeat top left;
    cursor: pointer;
}

    .audioIconBtn:hover {
        background: url(../images/stem_speaker_hover.svg) no-repeat top left;
    }

    .audioIconBtn:active {
        background: url(../images/stem_speaker_active.svg) no-repeat top left;
    }

.animationReplayButton {
    background: url(../images/reply_btn_normal.svg) no-repeat top left;
    cursor: pointer;
    position: absolute;
    z-index: 11;
    left: 48px;
    margin-top: 28px;
}

    .animationReplayButton:hover {
        background: url(../images/reply_btn_hover.svg) no-repeat top left;
    }

    .animationReplayButton:active {
        background: url(../images/reply_btn_down.svg) no-repeat top left;
    }

.hotTextContentWithImage.vertical {
    padding: 0 15px 0 0;
}

.hotTxtContentInnerWrapper {
    padding: 5px;
}

.hotTextContentWithImage.vertical > .hotTxtContentInnerWrapper,
.hotTextContentWithImage.vertical > .hotTextImageWrapper {
    width: 50%;
    float: left;
}

.hotTextContentWithImage.vertical > .hotTextImageWrapper, .hotTxtContentBlock, .stemInnerWrapper {
    text-align: left;
}

    .stemInnerWrapper.back {
        display: none;
    }

    .hotTextContentWithImage.vertical > .hotTextImageWrapper > img {
        max-height: 100%;
    }

.hotTextContentWithImage.vertical > .hotTxtContentInnerWrapper {
    padding: 4px 10px 0;
}

.hotTextContentWithImage.horizontal {
    padding: 0 15px;
}

    .hotTextContentWithImage.horizontal .hotTextImageWrapper {
        height: 100px;
        text-align: center;
    }

        .hotTextContentWithImage.horizontal .hotTextImageWrapper > img {
            max-width: 100%;
        }

.hotTxtContentScroller {
    max-height: 274px;
    overflow-y: auto;
    overflow-x: hidden;
}

.hotTextContentWithImage.horizontal .hotTxtContentScroller {
    max-height: 184px;
}

.hotTxtAudioControl {
    z-index: 100;
}

.hotTextAudioButton {
    background: url(../images/hottext_audio_icon_normal.svg) no-repeat top left;
}

    .hotTextAudioButton:hover {
        background: url(../images/hottext_audio_icon_hover.svg) no-repeat top left;
    }

    .hotTextAudioButton:active {
        background: url(../images/hottext_audio_icon_active.svg) no-repeat top left;
    }

.hotTxtContentBlock {
    line-height: 1.6em;
}

.paddingLeft5 {
    padding-left: 5px;
}

.hotTxtContentBlock h1 {
    padding: 5px 0 10px;
}

.hotTxtContentBlock h2 {
    padding: 0 0 5px;
}

.hotTxtContentBlock p {
    text-align: justify;
    padding: 0 4px 8px 0;
    line-height: 1.5em;
    -moz-padding-end: 14px;
}

.hotTxtContentBlock span[data-responseId] {
    border: 1px solid rgba(253, 126, 39, 1);
    padding: 0 2px;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

    .hotTxtContentBlock span[data-responseId].selected {
        border: 2px solid #8b8436;
        background-color: #d9eaff;
    }

        .hotTxtContentBlock span[data-responseId].selected.correctAns {
            border: 2px solid #33ff00;
            background: #DDFFD5;
        }

        .hotTxtContentBlock span[data-responseId].selected.incorrectAns {
            border: 2px solid #b7220b;
            background: #FFD0D0;
        }

.stemInnerWrapper .mediumSmallFont {
    display: none;
}

.stemInnerWrapper .smallFont {
    display: none;
}

.hotTextContentWithoutImage > .hotTextImageWrapper, .feedbackStatusIcon {
    display: none;
}

figure .feedbackContainer.stemFeedbackContainerWrapper {
    margin: 0 4px;
}

.stemFeedbackContainerWrapper .stemInnerWrapper {
    background-color: #ffffff;
    margin: 0 auto 10px;
}

.feedbackAttemptContainer .feedbackStatusIcon,
.browser-msie .feedbackAttemptContainer .feedbackStatusIcon:before {
    display: inline-block;
    width: 32px;
    height: 100%;
    vertical-align: top;
    position: absolute;
}
/*Correction-Start*/
.incorrect .feedbackAttemptContainer .feedbackStatusIcon,
.incorrect .feedbackAttemptContainer .attemptCompleted .feedbackStatusIcon,
.incorrect.feedbackAttemptContainer .feedbackStatusIcon {
    background: url(../../content/assets/images/icon-tileIncorrect-circle.svg) no-repeat center center #b7220b;
    background-size: 24px !important;
}

.correct .feedbackAttemptContainer .feedbackStatusIcon,
.correct.feedbackAttemptContainer .feedbackStatusIcon {
    background: url(../../content/assets/images/icon-tileCorrect-circle.svg) no-repeat center center #4fbd57;
    background-size: 24px !important;
}
/*Correction-End*/
.feedbackAttemptContainer .feedbackStatusIcon + div {
    padding-left: 50px;
    display: inline-block;
    color: #60676d;
    vertical-align: top;
    padding: 5px 5px 5px 40px;
    font-size: 0.9em;
}
/*=== hot-text style - end ===*/

/*=== mcq style - start ===*/
.mcqImageWrapper, .mcqImageText p, .btnAudioWrapper {
    position: relative;
}

.mcqContentWithImage.vertical > .mcqAlternativeWrapper,
.mcqContentWithImage.vertical > .mcqImageWrapper,
.mcqContentWithAnimation.vertical > .mcqAnimationWrapper,
.mcqContentWithAnimation.vertical > .mcqAlternativeWrapper {
    height: 100%;
    width: 50%;
    float: left;
}

.mcqAnimationWrapper canvas {
    width: 100% !important;
    height: 100% !important;
}

.mcqImageText {
    position: absolute;
    color: #000;
}

    .mcqImageText p {
        line-height: 1.1rem;
    }

.mcqContentWithImage.vertical > .mcqImageWrapper, .mcqContentWithAnimation.vertical > .mcqAnimationWrapper {
    text-align: left;
}

    .mcqContentWithImage.vertical > .mcqImageWrapper > img {
        max-height: 100%;
    }

.mcqContentWithImage.vertical > .mcqAlternativeWrapper, .mcqContentWithAnimation.vertical > .mcqAlternativeWrapper {
    padding: 4px 10px 0;
}

.mcqBtnContainer, .btnAudioWrapper, .mcqContentWithImage.horizontal .mcqBtnContainer, .selected.correctAns ~ .mcqFeedbackIcon {
    display: inline-block;
}

.mcqBtnContainer {
    margin: 0 0 10px;
}

.mcqBtnContainer, .btnAudioWrapper, .mcqContentWithImage.horizontal .mcqImageWrapper > img {
    max-width: 100%;
}

.mcqImageText, .mcqAnswer, .mcqContentWithoutImage .mcqBtnContainer {
    width: 100%;
}

.mcqBtnContainer:last-child {
    margin: 0;
}

.mcqAnswer {
    text-align: left;
    padding: 0 10px;
    background: #fff;
    height: 100%;
    box-sizing: border-box;
    display: block;
    color: #464646;
}

.mainAssesmentContentWrapper .mcqBtnSpan .mcqAnswer {
    height: 48px;
}

.imageAlt {
    padding: 0;
}

.mcqAnswer img {
    vertical-align: middle;
    width: inherit;
    height: 150px;
    width: 150px;
    text-align: center !important;
}

.mcqAnswer i, .mcqAnswer b, .mcqAnswer u {
    pointer-events: none;
}

.btnAudioWrapper {
    /*background: #fff;*/
    width: 100% !important;
    display: inline-block;
    height: 100%;
    text-align: left;
    vertical-align: top;
    box-shadow: 0 1px 1px #A7A7A7;
    border: 1px solid #878F96;
}

.mcqBtnContainer .mcqBtnSpan {
    display: table;
    width: 100%;
    height: 100%;
}

.mcqContentWithImage.horizontal {
    padding: 0 15px 0 0;
}

    .mcqContentWithImage.horizontal .mcqImageWrapper {
        height: 100px;
        text-align: center;
    }

        .mcqContentWithImage.horizontal .mcqImageWrapper > img {
            height: 100%;
        }

    .mcqContentWithImage.horizontal .mcqAlternativeWrapper {
        height: 200px;
        padding-top: 15px;
    }

    .mcqContentWithImage.horizontal .mcqBtnContainer {
        margin-left: -4px;
    }

.mcqContentWithoutImage > .mcqImageWrapper, .mcqFeedbackIcon {
    display: none;
}

.selected.correctAns ~ .mcqFeedbackIcon {
    position: absolute;
    height: 32px;
    width: 32px;
    top: 8px;
}

.selected.correctAns ~ .mcqFeedbackIcon {
    right: 10px;
}
/*.interactiveBlock,
.interactiveBlock ~ .stemFeedbackContainerWrapper{
    padding: 0 10px!important;
}*/
.interactiveBlock ~ .stemFeedbackContainerWrapper {
    margin-top: 15px;
}

/*=== mcq style - end ===*/

/*=== Passage controls - start ===*/
.seekForwardBtn, .passagePlayBtn, .seekBackwardBtn, .passageDoneBtn, .nextPassageBtn, .previousPassageBtn {
    display: inline-block;
    z-index: 9999;
    cursor: pointer;
    background: none;
    border: 0;
    margin: 0;
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
}

    .seekBackwardBtn:before {
        content: url("../images/Passage_Audio_Rewind_1a.svg");
    }

    .seekForwardBtn:before {
        content: url("../images/Passage_Audio_Forward_1a.svg");
    }

.passagePlayBtn {
    background-image: url(../images/playerActionSprite.svg);
    background-position: -33px 0;
}

    .passagePlayBtn.selected {
        background-position: -91px 0;
    }

.seekBackwardBtn:hover:before {
    content: url("../images/Passage_Audio_Rewind_1b.svg");
}

.seekForwardBtn:hover:before {
    content: url("../images/Passage_Audio_Forward_1b.svg");
}

.seekBackwardBtn:focus:before {
    content: url("../images/Passage_Audio_Rewind_1c.svg");
}

.seekForwardBtn:focus:before {
    content: url("../images/Passage_Audio_Forward_1c.svg");
}

.passageBtnsCon, .passageDoneBtn, .passageDoneBtn:before, .nextPassageBtn, .previousPassageBtn, .nextPassageBtn:before, .previousPassageBtn:before,
.pageCounter, .booklet .b-page-cover div > img, .booklet .b-wrap-left div > img, .booklet .b-wrap-right div > img {
    position: absolute;
}

.passageBtnsCon {
    bottom: 5px;
    width: 50px;
    border-radius: 6px;
    left: 310px;
    background-color: #47a2f2;
    border: 1px solid #387bbf;
    padding: 0 10px;
}

    .passageBtnsCon:hover {
        border: 1px solid #47a2f2;
    }

.passageDoneBtn {
    right: 108px;
    bottom: -22px;
    height: 35px;
    width: 55px !important;
    border-radius: 9px;
    -webkit-transform: rotate(-4deg);
    -ms-transform: rotate(-4deg);
    transform: rotate(-4deg);
    border: 3px solid rgba(215, 53, 53, 0);
}

.tabHolder .passageDoneBtn {
    right: 43px;
    bottom: -34px;
}

.passageDoneBtn:before, .nextPassageBtn:before, .previousPassageBtn:before, .booklet .b-wrap-left div > img, .booklet .b-wrap-right div > img {
    left: 0;
}

.passageDoneBtn:before {
    content: url("../images/Passage_bttn-done_1.svg");
    top: -1px;
    height: 30px;
}

.passageDoneBtn:hover:before, .passageDoneBtn:focus:before {
    content: url("../images/Passage_bttn-done_2.svg");
}

.passageDoneBtn:active:before {
    content: url("../images/Passage_bttn-done_3.svg");
}

.passageDoneBtn:disabled:hover:before {
    content: url("../images/Passage_bttn-done_1.svg");
    cursor: default;
}

.nextPassageBtn, .previousPassageBtn {
    right: 168px;
    bottom: -29px;
    height: 35px;
    width: 101px !important;
    border-radius: 9px;
    border: 3px solid rgba(215, 53, 53, 0);
}

    .nextPassageBtn:before, .previousPassageBtn:before {
        top: 0;
        height: 30px;
    }

    .nextPassageBtn:before {
        content: url("../images/next_passage_normal.svg");
    }

    .nextPassageBtn:hover:before, .nextPassageBtn:focus:before {
        content: url("../images/next_passage_hover.svg");
    }

    .nextPassageBtn:active:before {
        content: url("../images/next_passage_active.svg");
    }

    .previousPassageBtn:before {
        content: url("../images/previous_passage_normal.svg");
    }

    .previousPassageBtn:hover:before, .previousPassageBtn:focus:before {
        content: url("../images/previous_passage_hover.svg");
    }

    .previousPassageBtn:active:before {
        content: url("../images/previous_passage_active.svg");
    }

@-webkit-keyframes doneBlinker {
    0% {
        border: 3px solid rgba(215, 53, 53, 0);
    }

    50% {
        border: 3px solid #FF9100;
    }
}

@keyframes doneBlinker {
    0% {
        border: 3px solid rgba(215, 53, 53, 0);
    }

    50% {
        border: 3px solid #FF9100;
    }
}

.doneBlink {
    -webkit-animation: doneBlinker 1s step-end infinite;
    animation: doneBlinker 1s step-end infinite;
}

.pageCounter {
    width: 50px;
    height: 30px;
    text-align: center;
    bottom: 22px;
    left: 303px;
    z-index: 10;
    border: 1px solid #47A2F2;
    background: #fff;
    display: table;
    border-radius: 5px;
}

    .pageCounter span {
        display: table-cell;
        vertical-align: middle;
        font-weight: bold;
    }

.booklet .b-wrap-right {
    padding: 12px 15px 8px 0 !important;
    width: 264px !important;
    height: 100%;
    background: transparent;
}

.booklet .b-wrap-left, .booklet .b-page-cover {
    width: 264px !important;
    height: 358px;
    background: transparent;
    padding: 6px 4px 10px 0 !important;
}

.booklet .b-wrap-right div {
    height: 100% !important;
    width: 264px !important;
    padding: 30px 15px 80px 25px !important;
    background-size: 263px 318px !important;
}

.booklet .b-page-cover {
    width: 264px !important;
    padding: 0 !important;
}

    .booklet .b-page-cover div {
        height: 336px !important;
        width: 264px !important;
        top: 7px;
    }

.booklet .b-page-2 {
    width: 264px;
    height: 353px;
}

.booklet .b-page-cover div, .booklet .b-wrap-left div, .booklet .b-wrap-right div, .booklet .b-wrap-right div h1 {
    position: relative;
}

.booklet .b-wrap-left div {
    height: 336px !important;
    width: 264px !important;
}

    .pageCounter span, .booklet .b-page-cover div > img, .booklet .b-wrap-left div > img, .booklet .b-wrap-right div > img {
        width: 100%;
        height: 100%;
    }

    .booklet .b-wrap-left div > img {
        top: 3px;
    }

.booklet .b-wrap-right div {
    height: 320px !important;
    width: 264px !important;
    padding: 30px 18px 80px 25px !important;
    background-size: 263px 318px !important;
}

    .booklet .b-wrap-right div > img {
        top: 6px;
    }

.passagePlayControls {
    width: 28px;
    float: left;
    overflow: hidden;
    margin-top: -2px;
}

.b-wrap-left div p {
    top: 20px;
    left: 30px;
    width: 225px;
}

.b-wrap-left div h2 {
    top: 25px;
    left: 30px;
}

.booklet .b-wrap-right div h1 {
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.booklet {
    background: url('../images/bookback_depth.svg') no-repeat;
    background-position: 264px 16px;
    text-align: left;
    background-size: 271px 334px;
}

    .booklet .b-arrow-next {
        bottom: 24px;
        right: 28px;
    }

    .booklet .b-arrow-prev {
        bottom: 30px;
        left: 20px;
    }
/*=== Passage controls - end ===*/

/*=== Tab - start ===*/
.tabHolder, .tabHolder .tabBg, .tabHolder .passage {
    position: absolute;
}

.tabHolder {
    top: 70px;
}

    .tabHolder .tabBg, .tabHolder .passage {
        width: 100%;
        height: 100%;
    }

    .tabHolder .tabContent {
        display: block;
        text-align: center;
        padding: 0 5px 5px 0;
        overflow-y: auto;
        margin: 5px auto 0;
        font-weight: bold;
    }

    .tabHolder .tabHeading {
        display: block;
        margin: 34px auto auto auto;
        padding-left: 26px;
        text-align: left;
    }

    .tabHolder.left, .tabHolder.center {
        left: 0;
    }

    .tabHolder.center {
        margin: 0 auto;
    }

    .tabHolder.center, .tabHolder.right {
        right: 0;
    }

    .tabHolder .passageBtnsCon {
        bottom: -53px !important;
        left: 0;
        right: 0;
        margin: 0 auto;
    }

.tabContent h2 {
    display: inline-block;
}

.tabContent span[data-audio]:before {
    height: 20px;
    margin-right: 5px;
    content: url("../images/SpeakerIcon.svg");
}

.tabContent i {
    font-style: italic;
}

.tabContent p.tab:first-letter, .tutorialTab .passage p.tab:first-letter {
    margin-left: 1em;
}

.tutorialTab .previousButton,
.tutorialTab .nextButton {
    width: 40px;
    height: 30px;
    bottom: 7px;
    left: 30px;
    position: absolute;
}

.tutorialTab .nextButton {
    right: 22px !important;
    left: auto;
}

.browser-chrome .previousButton {
    background: url(../images/passage_left_arow_1.svg) no-repeat left top;
}

.browser-chrome .nextButton {
    background: url(../images/passage_right_arow_1.svg) no-repeat left top;
}

.browser-msie .tutorialTab .previousButton,
.browser-msie .tutorialTab .nextButton {
    background: transparent none;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    zoom: 1;
}

    .browser-msie .tutorialTab .previousButton:before,
    .browser-edge .tutorialTab .previousButton:before {
        content: '';
        content: url(../images/passage_left_arow_1.svg);
    }

    .browser-msie .tutorialTab .nextButton:before,
    .browser-edge .tutorialTab .nextButton:before {
        content: '';
        content: url(../images/passage_right_arow_1.svg);
    }

.browser-msie .tutorialTab .passageNextBlink::after,
.browser-edge .tutorialTab .passageNextBlink::after {
    content: url("../images/passage_right_arow_4.svg");
    top: -34px;
    position: relative;
    -webkit-animation: passageNextBlinkerForIe 1s step-end infinite;
    animation: passageNextBlinkerForIe 1s step-end infinite;
    opacity: 1;
}

.browser-chrome .tutorialTab .passageNextBlink::after {
    content: url("../images/passage_right_arow_4.svg");
    position: relative;
    -webkit-animation: passageNextBlinkerForIe 1s step-end infinite;
    animation: passageNextBlinkerForIe 1s step-end infinite;
    opacity: 1;
}

.boardDoneBtnPos {
    bottom: -53px !important;
    right: 17px !important;
}

.floatNone {
    float: none;
}

.floatLeft {
    float: left;
}
/*=== Tutorial tab - end ===*/

/*=== Tutorial book - start ===*/
.tutorialBookHolder {
    top: 60px;
}

    .tutorialBookHolder .booklet .b-arrow-next {
        right: 20px;
    }

    .tutorialBookHolder .booklet .b-arrow-prev {
        right: 310px;
    }

    .tutorialBookHolder .booklet {
        margin-bottom: 4px;
        width: 538px !important;
    }

.browser-msie .tutorialBookHolder .booklet {
    width: 533px !important;
}

.tutorialBtnsCon {
    width: 50px;
    height: 34px;
    background: #fff;
    border-radius: 6px;
    left: 0;
    right: 0;
    background-color: #47a2f2;
    border: 1px solid #387bbf;
    padding: 0 10px;
    margin: 0 auto;
    bottom: -45px;
}

    .tutorialBtnsCon:hover {
        border: 1px solid #47a2f2;
    }

.tutorialBookHolder .booklet h2 {
    text-align: left;
    line-height: 2em;
    font-weight: 600;
}

.tutorialBookHolder span.highlighted.yellow, .tutorialBookHolder span.highlighted[data-color="yellow"] {
    background: #FFFF6E;
}

.tutorialBookHolder span.highlighted.tangerine, .tutorialBookHolder span.highlighted[data-color="tangerine"] {
    background: #ffcc00;
}

.tangerine {
    background: #ffcc00;
}

.tutorialBookHolder span.highlighted.green, .tutorialBookHolder span.highlighted[data-color="green"] {
    background: #49F315;
}

.tutorialBookHolder span.highlighted.yellow,
.tutorialBookHolder span.highlighted[data-color="yellow"],
.tutorialBookHolder span.highlighted.tangerine,
.tutorialBookHolder span.highlighted[data-color="tangerine"],
.tutorialBookHolder span.highlighted.green,
.tutorialBookHolder span.highlighted[data-color="green"] {
    padding: 1px 2px;
    display: inline-block;
}

.tutorialBookHolder h2 span.highlighted.yellow,
.tutorialBookHolder h2 span.highlighted[data-color="yellow"],
.tutorialBookHolder h2 span.highlighted.tangerine,
.tutorialBookHolder h2 span.highlighted[data-color="tangerine"],
.tutorialBookHolder h2 span.highlighted.green,
.tutorialBookHolder h2 span.highlighted[data-color="green"] {
    display: initial;
}


.tutorialBookHolder span.highlighted.deactivate {
    background: transparent;
    padding: 1px 2px;
}

.tutorialBookHolder .passageDoneBtn {
    right: 12px;
}

.booklet .b-wrap-right p.caption, .booklet .b-wrap-left p.caption {
    left: 7px;
}

.booklet .b-wrap-right span.captionText, .booklet .b-wrap-left span.captionText {
    float: left;
    padding: 0 2px 0 25px;
    border-radius: 2px;
    color: #fff;
    text-align: left;
}

    .booklet .b-wrap-right span.captionText.black, .booklet .b-wrap-left span.captionText.black {
        color: rgb(70, 70, 70);
    }

.booklet .b-wrap-right p.caption, .tutorialBookHolder .booklet .b-wrap-left p.caption {
    top: 248px;
    bottom: 54px;
    top: inherit;
}

.booklet .b-wrap-right p.caption, .practPsgContentWrapper.booklet .b-wrap-left p.caption {
    top: 255px;
    bottom: 45px;
    top: inherit;
}

.booklet span[data-audio]:before {
    top: -3px;
    content: url("../images/SpeakerIcon.svg");
}

.booklet span[data-audio]:hover:before {
    content: url("../images/SpeakerIcon1.svg");
}

.booklet span[data-audio].selected:before {
    content: url("../images/SpeakerIcon1.svg");
}

.booklet span[data-audio] {
    color: #cc3607;
    cursor: pointer;
    display: inline-block;
    float: left;
    left: -20px;
    top: 4px;
}

.booklet .caption span[data-audio] {
    top: 0;
}

.top33 {
    top: 33px !important;
}

.booklet .b-wrap-left .caption span[data-audio] {
    top: 3px !important;
    left: 3px !important;
}

.booklet .b-wrap-right .b-counter, .booklet .b-wrap-left .b-counter {
    bottom: 45px;
    height: 25px !important;
    width: 25px !important;
    margin: 0 auto;
    background: transparent;
    border-radius: 2px;
    padding: 2px !important;
    z-index: 1;
}

.pageCounter {
    display: none !important;
}

.booklet .b-wrap-right .b-counter {
    bottom: 30px;
}

.tutorialBookHolder, .b-page-blank + .b-counter {
    display: none;
}

.dot:before {
    content: ".";
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    top: -44px;
    color: #cd1b12;
}

.tutorialBtnsCon, .booklet .b-wrap-right p.caption, .booklet .b-wrap-left p.caption, .booklet span[data-audio], .dot:before {
    position: absolute;
}

.deact:before {
    content: "";
}

.underline {
    text-decoration: underline;
}

.browser-msie .dot.underline, .browser-edge .dot.underline {
    border-bottom: 1px solid #464646;
    text-decoration: none;
}

.tutorialBookHolder, .booklet span[data-audio]:before, .passage span.dot {
    position: relative;
    display: inline-block;
    margin-bottom: 0px;
}
/*=== Tutorial book - end ===*/

/*=== Drag Drop Section - start ===*/
.doneBtn {
    position: absolute;
    bottom: 5px;
    right: 72px;
}

.sequencingDdHotWrapper #typeDragDrop {
    width: 100%;
    overflow: hidden;
    display: inline-block;
}

.sequenceAltAudioBtn {
    background: url(../images/drag_speaker_small_normal.svg) no-repeat top left;
    height: 31px;
    width: 32px;
    border: 0;
    padding: 0;
    outline: 0 none;
    position: absolute;
    bottom: 5px;
    right: -31px;
    border-radius: 0 10px 10px 0;
    display: none;
}

    .sequenceAltAudioBtn:hover {
        background: url(../images/drag_speaker_small_hover.svg) no-repeat top left;
    }

    .sequenceAltAudioBtn:active {
        background: url(../images/drag_speaker_small_active.svg) no-repeat top left;
    }

    .sequenceAltAudioBtn, .sequenceAltAudioBtn:hover, .sequenceAltAudioBtn:active {
    }

#interaction-container .sequencingDdHotWrapper.ddHotWrapper {
    height: 300px;
}

.sequencingDdHotWrapper.ddHotWrapper {
    color: #464646;
}

    .sequencingDdHotWrapper.ddHotWrapper .passageOuterWrapper {
        background-color: rgba(255, 255, 255, 0);
    }

    .sequencingDdHotWrapper.ddHotWrapper .qnWrapper {
        border: 0 solid #0fa8e1;
        padding: 0;
        background: none;
        width: 520px;
        height: 310px;
    }

    .sequencingDdHotWrapper.ddHotWrapper .qnOuterWrapper {
        width: 60%;
        padding: 0 0 0 10px;
    }

        .sequencingDdHotWrapper.ddHotWrapper .qnOuterWrapper.noPassage {
            padding: 0;
            width: 520px;
            height: 310px;
        }

    .sequencingDdHotWrapper.ddHotWrapper .typeDragDrop {
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-user-select: none;
        height: 310px;
    }

        .sequencingDdHotWrapper.ddHotWrapper .typeDragDrop #altContainer {
            height: 198px;
            width: 100%;
        }

        .sequencingDdHotWrapper.ddHotWrapper .typeDragDrop .verticalSequencingDragContainer #altContainer {
            height: auto;
        }

        .sequencingDdHotWrapper.ddHotWrapper .typeDragDrop .Panel, .sequencingDdHotWrapper.ddHotWrapper .typeDragDrop .dd_rightPanel {
            background: #fff;
            height: 310px;
        }

        .sequencingDdHotWrapper.ddHotWrapper .typeDragDrop .dd_leftPanel {
            border: 2px solid #bdbaba;
            padding: 5px;
        }

        .sequencingDdHotWrapper.ddHotWrapper .typeDragDrop .dd_rightPanel {
            border: 2px solid #0fa8e1;
        }

            .sequencingDdHotWrapper.ddHotWrapper .typeDragDrop .dd_rightPanel.horizontalSequencingDragContainer {
                margin-top: 30px;
            }

        .sequencingDdHotWrapper.ddHotWrapper .typeDragDrop .dd_dragContainer {
            position: relative;
            padding: 10px;
        }

        .sequencingDdHotWrapper.ddHotWrapper .typeDragDrop .dragHolder {
            width: auto !important;
            position: relative;
            text-align: left;
            white-space: nowrap;
        }

.sequencingDdHotWrapper .dragHolder.verticalSequencingDragHolder:not(:first-child) {
    margin: 10px auto 0 0;
}

.sequencingDdHotWrapper.ddHotWrapper .typeDragDrop .dragHolder.verticalSequencingDragTopHolder {
    margin: 0 auto 10px 0;
    height: 63px;
    padding-top: 30px;
    padding: 30px 5px 0;
}

.sequencingDdHotWrapper.ddHotWrapper .typeDragDrop .dd_drags {
    background: #fff;
    box-shadow: 0 1px 1px #175270;
    padding: 0 10px 0 0;
    display: inline-block;
}

.sequencingDdHotWrapper.ddHotWrapper .typeDragDrop .textSequnecingVertical .dd_drags {
    width: auto !important;
}

.sequencingDdHotWrapper.ddHotWrapper .typeDragDrop .imageSequnecingHorizontal .dd_drags,
.sequencingDdHotWrapper.ddHotWrapper .typeDragDrop .imageSequnecingVertical .dd_drags {
    background: #3A89A8;
    box-shadow: 0 1px 1px #175270;
    padding: 2px;
}

.sequencingDdHotWrapper.ddHotWrapper .typeDragDrop .dd_drags.img {
    display: block !important;
}

.sequencingDdHotWrapper.ddHotWrapper .typeDragDrop .dd_drags span {
    padding: 4px 0;
}

.sequencingDdHotWrapper.ddHotWrapper .typeDragDrop .verticalSequencingDd_left .dd_drags span {
    padding-top: 20px;
    box-sizing: border-box;
    margin-top: 0;
    height: 100%;
}

.verticalSequencingDragHolder .dd_drags span, .verticalSequencingDd_left .dd_drags span {
    padding: 8px 0;
    display: inline-block;
    width: 100px;
    vertical-align: top;
    margin-top: 20px;
}

.sequencingDdHotWrapper.ddHotWrapper .typeDragDrop .dd_dropContainer {
    width: 100%;
    position: relative;
    /*border: 1px dashed #dfdfdf;*/
    padding: 25px 0 5px;
}

.sequencingDdHotWrapper.ddHotWrapper .typeDragDrop .verticalSequencingDragContainer .dd_dropContainer {
    /*padding-top: 0px;*/
    padding: 5px;
}

.sequencingDdHotWrapper.ddHotWrapper .typeDragDrop .dd_left {
    width: 163.5px;
    height: 192px;
    position: absolute;
    border-right: 1px solid rgba(189, 186, 186, 0);
}

.sequencingDdHotWrapper.ddHotWrapper .typeDragDrop .verticalSequencingDragContainer .dd_left {
    width: 178px;
}

.sequencingDdHotWrapper.ddHotWrapper .typeDragDrop .dd_left .dd_header {
    text-align: center;
    min-height: 32px;
    border-bottom: 1px solid rgba(189, 186, 186, 0);
}

.sequencingDdHotWrapper.ddHotWrapper .typeDragDrop .dd_dropZone {
    width: 100%;
    height: 100%;
    position: relative;
    background-color: #dfdfdf;
}

.sequencingDdHotWrapper.ddHotWrapper .typeDragDrop #btnContainer {
    text-align: right;
    height: 44px;
    position: absolute;
    bottom: 0;
    right: 154px;
    z-index: 1;
}

.sequencingDdHotWrapper.ddHotWrapper .typeDragDrop .dd_btn {
    width: 75px;
    height: 34px;
    cursor: pointer;
    background: #47a2f2;
    color: #fff;
    margin: 5px 5px 5px 5px;
    text-align: center;
    border-radius: 5px;
    border: 1px solid #0a88c8;
    cursor: pointer;
    box-shadow: 0 1px 0 0 rgba(66, 69, 69, 0.3);
    text-shadow: 1px 1px 2px rgba(66, 69, 69, 0.3);
    z-index: 20;
}

.dis {
    color: #d0cdcd;
    cursor: default;
    box-shadow: none;
    box-shadow: none !important;
}

.sequencingDdHotWrapper.ddHotWrapper .typeDragDrop .dd_dropContainer .incorrectAns img {
    border: 2px solid #b7220b;
}

.sequencingDdHotWrapper.ddHotWrapper .typeDragDrop .dd_dropContainer .correctAns img {
    border: 2px solid #4fbd57 !important;
}

.sequencingDdHotWrapper.ddHotWrapper .typeDragDrop .ui-draggable-disabled {
    cursor: default;
}

.sequencingDdHotWrapper.ddHotWrapper .typeDragDrop .dd_dropContainer .dd_dropZone .dd_drags {
    position: relative;
    margin-top: 5px;
    margin-left: 5px;
}

.sequencingDdHotWrapper.ddHotWrapper .typeDragDrop .ui-state-active {
    background: #949494;
}

.sequencingDdHotWrapper .qnContent {
    width: 100%;
    height: 280px;
    padding: 10px;
}

.topLeftZero {
    top: 0 !important;
    left: 0 !important;
}

.sequencingDdHotWrapper #questionOuterWrapper {
    background: #fff;
}

.sequencingDdHotWrapper .dd_left.verticalSequencingDd_left, .sequencingDdHotWrapper .dd_left.horizontalSequencingDd_left {
    position: relative !important;
}

.sequencingDdHotWrapper .dd_left.verticalSequencingDd_left {
    text-align: center;
    margin: auto;
}

.sequencingDdHotWrapper .dd_left.horizontalSequencingDd_left {
    display: inline-block;
    vertical-align: top;
}

.sequencingDdHotWrapper.ddHotWrapper .typeDragDrop.sixDrag0rDrop {
    margin-top: 15px;
}

    .sequencingDdHotWrapper.ddHotWrapper .typeDragDrop.sixDrag0rDrop .dd_drags {
        background-color: transparent;
        padding: 0;
        box-shadow: none;
    }

        .sequencingDdHotWrapper.ddHotWrapper .typeDragDrop.sixDrag0rDrop .dd_drags .sequenceImage {
            background: #fff;
            border: 1px solid #AFAFAF;
            box-shadow: 0 1px 1px #A7A7A7;
            padding: 2px;
            line-height: 0;
        }

        .sequencingDdHotWrapper.ddHotWrapper .typeDragDrop.sixDrag0rDrop .dd_drags img {
            width: 100%;
            margin: 0;
        }

    .sequencingDdHotWrapper.ddHotWrapper .typeDragDrop.sixDrag0rDrop .verticalSequencingDragContainer .dd_drags img {
        width: auto;
        height: 100%;
        display: inline-block;
        background-color: #fff;
        /*border: 5px solid #0D3343;*/
    }

    .sequencingDdHotWrapper.ddHotWrapper .typeDragDrop.sixDrag0rDrop div.dd_drags i.tileIcon,
    .matchedPairWrapper .typeMatchedPair .mp_drags i.tileIcon,
    .interactiveBlock .typeGGM .topLeftMinus2 i.dragTile,
    .interactiveBlock .typeGGM .dragHolder i.dragTile,
    .interactiveBlock .typeGGM .dd_drags i.dragTile,
    .mcqBtnContainer .mcqBtnSpan i.dragTile {
        width: 36px;
        height: 100%;
        display: table-cell;
        margin-right: 5px;
        vertical-align: top;
        cursor: pointer;
    }
    /*Correction-Start*/
    .sequencingDdHotWrapper.ddHotWrapper .typeDragDrop.sixDrag0rDrop div.dd_drags i.dragTile,
    .matchedPairWrapper .typeMatchedPair .mp_drags i.dragTile,
    .interactiveBlock .typeGGM .topLeftMinus2 i.dragTile,
    .interactiveBlock .typeGGM .dragHolder i.dragTile,
    .interactiveBlock .typeGGM .dd_drags i.dragTile {
        background: url(../../content/assets/images/icon-tileDrag.svg) no-repeat center center #60676d;
        background-size: 16px;
    }

.sequencingDdHotWrapper.ddHotWrapper .typeDragDrop .dd_dropContainer div.dd_drags.correctAns i.dragTile,
.matchedPairWrapper .typeMatchedPair .correctAns i.dragTile,
.interactiveBlock .typeGGM .topLeftMinus2 .correctAns i.dragTile,
.interactiveBlock .typeGGM .correctAns i.dragTile,
.mcqBtnContainer .mcqBtnSpan.selected.correctAns i.dragTile,
#dialog-modal.popupPreTest .mcqBtnContainer .mcqBtnSpan.correctAns i.dragTile {
    background: url(../../content/assets/images/icon-tileCorrect.svg) no-repeat center center #4fbd57;
    background-size: 24px !important;
}

.sequencingDdHotWrapper.ddHotWrapper .typeDragDrop .dd_dropContainer div.dd_drags.inCorrectAns i.dragTile,
.matchedPairWrapper .typeMatchedPair .incorrectAns i.dragTile,
.interactiveBlock .typeGGM .topLeftMinus2 .inCorrectAns i.dragTile,
.interactiveBlock .typeGGM .incorrectAns i.dragTile,
.mcqBtnContainer .mcqBtnSpan.selected.incorrectAns i.dragTile,
#dialog-modal.popupPreTest .mcqBtnContainer .mcqBtnSpan.incorrectAns i.dragTile {
    background: url(../../content/assets/images/icon-tileIncorrect.svg) no-repeat center center #b7220b;
    background-size: 24px !important;
}

.mcqBtnContainer .mcqBtnSpan i.dragTile {
    background: url(../../content/assets/images/icon-tileCheckbox.svg) no-repeat center center #60676d;
    background-size: 14px;
}

.mcqBtnContainer .mcqBtnSpan.selected i.dragTile {
    background: url(../../content/assets/images/icon-tileCheckbox-active.svg) no-repeat center center #60676d;
    background-size: 14px;
}
/*Correction-End*/
.sixDrag0rDrop .dd_dragContainer {
    margin-left: 9px;
}

.sequencingDdHotWrapper .qnContent,
.sequencingDdHotWrapper.ddHotWrapper .typeDragDrop.sixDrag0rDrop .dd_dragContainer {
    padding: 0;
}

.sequencingDdHotWrapper .qnContent {
    box-sizing: border-box;
}

/* Changes END */
.horizontalSequencingDragContainer .sequenceSeparator {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-left: 10px solid #e2e2e2;
    border-bottom: 10px solid transparent;
    padding: 0;
    display: inline-block;
    position: relative;
    top: 25px;
}

.verticalSequencingDragContainer .sequenceSeparator {
    text-align: center;
    display: block;
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 10px solid #dfdfdf;
    position: relative;
    left: 65%;
}

.rArw {
    background: url(../images/right_arrow.svg) no-repeat top center;
}

.horizontalSequencingDragContainer {
    display: block;
    float: none !important;
}

    .horizontalSequencingDragContainer.dd_topPanel {
        padding: 0 10px;
        margin-right: 0px;
        display: inline-block;
        background-color: #3a89a8 !important;
        margin-bottom: -1px;
    }

.dd_rightPanel.verticalSequencingDragContainer, .dd_leftPanel.verticalSequencingDragContainer {
    display: inline-block;
    vertical-align: top;
}

.dd_topPanel.verticalSequencingDragContainer {
    display: inline-block;
    background-color: #3a89a8;
    margin-right: -5px;
}


.sequencingDdHotWrapper .dd_leftPanel, .sequencingDdHotWrapper .dd_rightPanel {
    background: none !important;
    border: 0 !important;
}

.dragHolder.horizontalSequencingDragHolder {
    display: inline-block !important;
    margin-right: 10px !important;
}

.sequencingDdHotWrapper.ddHotWrapper .typeDragDrop .dragHolder.horizontalSequencingDragTopHolder {
    display: inline-block !important;
    margin-left: 10px !important;
    width: 100px !important;
    padding-top: 5px;
}

.dragTopContent {
    display: block;
    text-align: center !important;
    color: #ffffff;
}

.horizontalSequencingDragContainer .dd_dragContainer {
    height: 100% !important;
}

.horizontalSequencingDragContainer, .horizontalSequencingDragContainer .dd_dragContainer,
.horizontalSequencingDragContainer .qnContent, .horizontalSequencingDragContainer .answerSection,
.horizontalSequencingDragContainer .dd_dropContainer {
    width: 100% !important;
}

.sequencingDdHotWrapper .typeDragDrop .dd_dropContainer .dd_dropZone .dd_drags {
    margin: -30px !important;
}

.sequencingDdHotWrapper .typeDragDrop .verticalSequencingDragContainer .dd_dropContainer .dd_dropZone .dd_drags {
    margin: 0px !important;
    text-align: right;
}

.sequencingDdHotWrapper.ddHotWrapper .typeDragDrop .dd_dropContainer .inCorrectAns img {
    border: 3px solid #b7220b !important;
}

.sequencingDdHotWrapper .qnWrapper, .sequencingDdHotWrapper #typeDragDrop, .sequencingDdHotWrapper .dd_leftPanel,
.sequencingDdHotWrapper .dd_rightPanel, .sequencingDdHotWrapper .dd_dragContainer, .sequencingDdHotWrapper .qnContent,
.horizontalSequencingDragContainer #altContainer, .horizontalSequencingDragContainer .dd_dropContainer {
    height: auto !important;
}

.typeGGMBlock.interactiveBlock {
    color: #464646;
    padding: 10px 0;
    width: 100% !important;
}

.dd_dropleftcolumn,
.dd_droprightcolumn, .dd_droprightmostcolumn {
    display: inline-block;
    background-color: #fff;
    vertical-align: top;
}

.interactiveBlock .typeGGM {
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-select: none;
    overflow: hidden;
}

    .interactiveBlock .typeGGM #altContainer {
        height: 100%;
        width: 100%;
        text-align: left;
    }

    .interactiveBlock .typeGGM .dd_topPanel, .interactiveBlock .typeGGM .dd_bottomPanel {
        width: 100%;
        border-radius: 5px;
    }

    .interactiveBlock .typeGGM .dd_topPanel {
        padding: 5px 0;
        display: inline-block;
    }

    .interactiveBlock .typeGGM .dd_bottomPanel {
        padding-bottom: 10px;
    }

    .interactiveBlock .typeGGM .dd_dragContainer {
        position: relative;
        height: 100%;
        text-align: center;
        margin: 0 auto;
    }

    .interactiveBlock .typeGGM .dragHolder {
        margin: 5px;
        position: relative;
        display: inline-block;
        border-radius: 0px !important;
        vertical-align: middle;
        text-align: left;
        border: 1px solid #DFDFDF;
    }

        .interactiveBlock .typeGGM .dragHolder.positionAbsolute {
            position: absolute;
        }

        .interactiveBlock .typeGGM .dragHolder .clone {
            background-color: #fff;
            border-radius: inherit;
            display: table;
        }


    .interactiveBlock .typeGGM .dd_drags {
        background: #fff;
        padding: 0 10px 0 0;
        display: table;
        border: 1px solid #AFAFAF;
        text-align: left;
        position: absolute;
    }

        .interactiveBlock .typeGGM .dd_drags span img, .interactiveBlock .typeGGM .clone span img {
            width: 100%;
            vertical-align: middle;
        }

    .interactiveBlock .typeGGM .dragHolder > span {
        display: inline-block;
        height: 100%;
        width: 100%;
    }

        .interactiveBlock .typeGGM .dd_drags span, .interactiveBlock .typeGGM .dragHolder > span > span {
            padding-left: 5px;
            display: table-cell;
            vertical-align: middle;
        }

    .interactiveBlock .typeGGM .dd_dropContainer {
        border: 1px dashed #dfdfdf;
        position: relative;
        min-width: 100px;
        width: 100%;
        text-align: center;
        margin: 0 auto;
    }

    .interactiveBlock .typeGGM .dd_left {
        display: inline-block;
        margin: 5px;
        vertical-align: top;
    }

        .interactiveBlock .typeGGM .dd_left .dd_header {
            text-align: center;
            min-height: 32px;
            border-bottom: 1px solid rgba(189, 186, 186, 0);
        }

    .interactiveBlock .typeGGM .dd_dropZone {
        width: 100%;
        height: 100%;
        position: relative;
        border-radius: 5px;
        background-color: #dfdfdf;
    }

    .interactiveBlock .typeGGM #btnContainer {
        text-align: right;
        height: 44px;
        position: absolute;
        bottom: 0;
        right: 154px;
        z-index: 1;
    }

    .interactiveBlock .typeGGM .dd_btn {
        width: 75px;
        height: 34px;
        cursor: pointer;
        background: #47a2f2;
        color: #fff;
        margin: 5px 5px 5px 5px;
        text-align: center;
        border-radius: 5px;
        border: 1px solid #0a88c8;
        cursor: pointer;
        box-shadow: 0 1px 0 0 rgba(66, 69, 69, 0.3);
        text-shadow: 1px 1px 2px rgba(66, 69, 69, 0.3);
        z-index: 20;
    }

.dis {
    opacity: 0.4;
    filter: alpha(opacity=40);
}

.dis, .interactiveBlock .typeGGM .ui-draggable-disabled {
    cursor: default;
}

.interactiveBlock .typeGGM .dd_dropContainer .dd_dropZone .dd_drags {
    position: relative;
    margin-bottom: 10px;
}

.interactiveBlock .typeGGM .ui-state-active {
    background: #949494;
}

.interactiveBlock .typeGGM .topLeftMinus2 {
    position: absolute !important;
    top: -1px !important;
    left: 0 !important;
    display: table;
}

.interactiveBlock .typeGGM .topLeftZero {
    top: 0 !important;
    left: 0 !important;
}

.interactiveBlock .typeGGM .ggmAudioBtn {
    background: url(../images/alt_speaker_small_normal.svg) no-repeat top left;
    background-position: 0;
    height: 25px;
    width: 30px;
    border: 0;
    padding: 0;
    outline: 0 none;
    position: absolute;
    bottom: 10%;
    right: -30px;
}

    .interactiveBlock .typeGGM .ggmAudioBtn:hover {
        background: url(../images/alt_speaker_small_hover.svg) no-repeat top left;
    }

    .interactiveBlock .typeGGM .ggmAudioBtn.selected {
        background: url(../images/alt_speaker_small_active.svg) no-repeat top left;
    }


.ui-draggable-handle {
    cursor: pointer;
}

.ui-draggable-dragging {
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}

/*=== Drag Drop Section - end ===*/

/*=== custom callout For Tutorial- start===*/
.callOut {
    width: 360px;
    bottom: 350px;
    border: 2px solid #47a2f2;
    background-color: #fff;
    color: #333;
    position: absolute;
    padding: 4px;
    border-radius: 10px;
    box-shadow: 1px 1px 0 1px rgba(91, 92, 92, 0.3);
    z-index: 10;
}

    .callOut.l0 {
        left: 5px;
    }

    .callOut.l1 {
        left: 60px;
    }

    .callOut.l2 {
        left: 100px;
    }

    .callOut.l3 {
        left: 150px;
    }

    .callOut.l4 {
        left: 200px;
    }

    .callOut.l5 {
        left: 250px;
    }

    .callOut.l6 {
        left: 300px;
    }

    .callOut.l7 {
        left: 350px;
    }

    .callOut.l8 {
        left: 400px;
    }

    .callOut.l9 {
        left: 450px;
    }

    .callOut.l10 {
        left: 500px;
    }

    .callOut.w1 {
        width: 150px;
    }

    .callOut.w2 {
        width: 200px;
    }

    .callOut.w3 {
        width: 250px;
    }

    .callOut.w4 {
        width: 300px;
    }

    .callOut.w5 {
        width: 350px;
    }

    .callOut.w6 {
        width: 400px;
    }

    .callOut.w7 {
        width: 450px;
    }

    .callOut.w8 {
        width: 500px;
    }

    .callOut.w9 {
        width: 550px;
    }

    .callOut.w10 {
        width: 600px;
    }

    .callOut.b0 {
        bottom: 240px;
    }

    .callOut.b1 {
        bottom: 275px;
    }

    .callOut.b2 {
        bottom: 300px;
    }

    .callOut.b3 {
        bottom: 325px;
    }

    .callOut.b4 {
        bottom: 350px;
    }

    .callOut.b5 {
        bottom: 372px;
    }

    .callOut.b55 {
        bottom: 390px;
    }

    .callOut.b6 {
        bottom: 400px;
    }

    .callOut.b7 {
        bottom: 425px;
    }

    .callOut.b8 {
        bottom: 450px;
    }

    .callOut:before, .callOut:after {
        content: "";
        position: absolute;
        z-index: -1;
        border-bottom-right-radius: 80px 50px;
        transform: rotateY(0deg);
        -webkit-transform: rotateY(0deg);
        -moz-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
    }

    .callOut:before {
        bottom: -22px;
        height: 22px;
        width: 54px;
        background-image: -webkit-radial-gradient(0 0, circle, rgba(204, 19, 0, 0) 33px, #47a2f2 15px);
        background-image: radial-gradient(circle at 0 0, rgba(204, 19, 0, 0) 33px, #47a2f2 15px);
    }

    .callOut:after {
        bottom: -20px;
        height: 21px;
        width: 49px;
        background-image: -webkit-radial-gradient(0 0, circle, rgba(204, 19, 0, 0) 33px, #fff 16px);
        background-image: radial-gradient(circle at 0 0, rgba(204, 19, 0, 0) 33px, #fff 16px);
    }

    .callOut.t11:before {
        left: 0.2%;
    }

    .callOut.t11:after {
        left: 1%;
    }

    .callOut.t12:before, .callOut.t12:after, .callOut.t22:before, .callOut.t22:after, .callOut.t32:before, .callOut.t32:after,
    .callOut.t42:before, .callOut.t42:after, .callOut.t52:before, .callOut.t52:after {
        transform: rotateY(180deg);
        -webkit-transform: rotateY(180deg);
        -moz-transform: rotateY(180deg);
        -ms-transform: rotateY(180deg);
        -o-transform: rotateY(180deg);
    }

    .callOut.t12:before {
        left: 5.2%;
    }

    .callOut.t12:after {
        left: 6%;
    }

    .callOut.w1.t11:before, .callOut.w2.t11:before {
        left: -1%;
    }

    .callOut.w3.t11:before, .callOut.w4.t11:before {
        left: -0.2%;
    }

    .callOut.w1.t12:before, .callOut.w2.t12:before {
        left: 4.7%;
    }

    .callOut.w5.t12:before, .callOut.w6.t12:before, .callOut.w7.t12:before {
        left: 5.4%;
    }

    .callOut.w8.t12:before, .callOut.w9.t12:before, .callOut.w10.t12:before {
        left: 5.6%;
    }

    .callOut.t21:before {
        left: 18.2%;
    }

    .callOut.t21:after {
        left: 19%;
    }

    .callOut.t22:before {
        left: 22.2%;
    }

    .callOut.t22:after {
        left: 23%;
    }

    .callOut.w1.t21:before {
        left: 16.5%;
    }

    .callOut.w2.t21:before, .callOut.w3.t21:before {
        left: 17.5%;
    }

    .callOut.w10.t21:before {
        left: 18.5%;
    }

    .callOut.w4.t22:before, .callOut.w5.t22:before, .callOut.w6.t22:before, .callOut.w7.t22:before, .callOut.w8.t22:before, .callOut.w9.t22:before {
        left: 22.5%;
    }

    .callOut.w10.t22:before {
        left: 22.7%;
    }

    .callOut.t31:before {
        left: 38.2%;
    }

    .callOut.t31:after {
        left: 39.1%;
    }

    .callOut.t32:before {
        left: 42.2%;
    }

    .callOut.t32:after {
        left: 43%;
    }

    .callOut.w1.t31:before, .callOut.w2.t31:before, .callOut.w3.t31:before {
        left: 37.4%;
    }

    .callOut.w4.t31:before, .callOut.w5.t31:before, .callOut.w6.t31:before {
        left: 38%;
    }

    .callOut.w9.t31:before, .callOut.w10.t31:before {
        left: 38.5%;
    }

    .callOut.w4.t32:before, .callOut.w5.t32:before {
        left: 42.45%;
    }

    .callOut.w6.t32:before, .callOut.w7.t32:before, .callOut.w8.t32:before, .callOut.w9.t32:before {
        left: 42.55%;
    }

    .callOut.w10.t32:before {
        left: 42.7%;
    }

    .callOut.t41:before {
        left: 56.2%;
    }

    .callOut.t41:after {
        left: 57%;
    }

    .callOut.t42:before {
        left: 60.6%;
    }

    .callOut.t42:after {
        left: 61%;
    }

    .callOut.w1.t41:before, .callOut.w2.t41:before {
        left: 55.2%;
    }

    .callOut.w3.t41:before, .callOut.w4.t41:before {
        left: 55.7%;
    }

    .callOut.w9.t41:before, .callOut.w10.t41:before {
        left: 56.4%;
    }

    .callOut.t51:before {
        left: 76.5%;
    }

    .callOut.t51:after {
        left: 78%;
    }

    .callOut.t52:before {
        left: 81.7%;
    }

    .callOut.t52:after {
        left: 82%;
    }

    .callOut.w5.t51:before, .callOut.w6.t51:before, .callOut.w7.t51:before {
        left: 77%;
    }

    .callOut.w8.t51:before, .callOut.w9.t51:before, .callOut.w10.t51:before {
        left: 77.2%;
    }

    .callOut.w5.t52:before, .callOut.w7.t52:before {
        left: 81.4%;
    }

    .callOut.w1.t52:before, .callOut.w2.t52:before {
        left: 80.7%;
    }

    .callOut i {
        font-style: italic;
    }
/*=== custom callout For Tutorial- end===*/


/*=== custom callout - start For Practice===*/
#callOut {
    width: 360px;
    bottom: 350px;
    border: 2px solid #47a2f2;
    background-color: #fff;
    color: #333;
    position: absolute;
    padding: 4px;
    border-radius: 10px;
    box-shadow: 1px 1px 0 1px rgba(91, 92, 92, 0.3);
    z-index: 10;
}

    #callOut.l0 {
        left: 5px;
    }

    #callOut.l1 {
        left: 60px;
    }

    #callOut.l2 {
        left: 100px;
    }

    #callOut.l3 {
        left: 150px;
    }

    #callOut.l4 {
        left: 200px;
    }

    #callOut.l5 {
        left: 250px;
    }

    #callOut.l6 {
        left: 300px;
    }

    #callOut.l7 {
        left: 350px;
    }

    #callOut.l8 {
        left: 400px;
    }

    #callOut.l9 {
        left: 450px;
    }

    #callOut.l10 {
        left: 500px;
    }

    #callOut.w1 {
        width: 150px;
    }

    #callOut.w2 {
        width: 200px;
    }

    #callOut.w3 {
        width: 250px;
    }

    #callOut.w4 {
        width: 300px;
    }

    #callOut.w5 {
        width: 350px;
    }

    #callOut.w6 {
        width: 400px;
    }

    #callOut.w7 {
        width: 450px;
    }

    #callOut.w8 {
        width: 500px;
    }

    #callOut.w9 {
        width: 550px;
    }

    #callOut.w10 {
        width: 600px;
    }

    #callOut.b0 {
        bottom: 240px;
    }

    #callOut.b1 {
        bottom: 275px;
    }

    #callOut.b2 {
        bottom: 300px;
    }

    #callOut.b3 {
        bottom: 325px;
    }

    #callOut.b4 {
        bottom: 350px;
    }

    #callOut.b5 {
        bottom: 372px;
    }

    #callOut.b55 {
        bottom: 390px;
    }

    #callOut.b6 {
        bottom: 400px;
    }

    #callOut.b7 {
        bottom: 425px;
    }

    #callOut.b8 {
        bottom: 450px;
    }

    #callOut:before, #callOut:after {
        content: "";
        position: absolute;
        z-index: -1;
        border-bottom-right-radius: 80px 50px;
        transform: rotateY(0deg);
        -webkit-transform: rotateY(0deg);
        -moz-transform: rotateY(0deg);
        -ms-transform: rotateY(0deg);
        -o-transform: rotateY(0deg);
    }

    #callOut:before {
        bottom: -22px;
        height: 22px;
        width: 54px;
        background-image: -webkit-radial-gradient(0 0, circle, rgba(204, 19, 0, 0) 33px, #47a2f2 15px);
        background-image: radial-gradient(circle at 0 0, rgba(204, 19, 0, 0) 33px, #47a2f2 15px);
    }

    #callOut:after {
        bottom: -20px;
        height: 21px;
        width: 49px;
        background-image: -webkit-radial-gradient(0 0, circle, rgba(204, 19, 0, 0) 33px, #fff 16px);
        background-image: radial-gradient(circle at 0 0, rgba(204, 19, 0, 0) 33px, #fff 16px);
    }

    #callOut.t11:before {
        left: 0.2%;
    }

    #callOut.t11:after {
        left: 1%;
    }

    #callOut.t12:before, #callOut.t12:after, #callOut.t22:before, #callOut.t22:after, #callOut.t32:before, #callOut.t32:after,
    #callOut.t42:before, #callOut.t42:after, #callOut.t52:before, #callOut.t52:after {
        transform: rotateY(180deg);
        -webkit-transform: rotateY(180deg);
        -moz-transform: rotateY(180deg);
        -ms-transform: rotateY(180deg);
        -o-transform: rotateY(180deg);
    }

    #callOut.t12:before {
        left: 5.2%;
    }

    #callOut.t12:after {
        left: 6%;
    }

    #callOut.w1.t11:before, #callOut.w2.t11:before {
        left: -1%;
    }

    #callOut.w3.t11:before, #callOut.w4.t11:before {
        left: -0.2%;
    }

    #callOut.w1.t12:before, #callOut.w2.t12:before {
        left: 4.7%;
    }

    #callOut.w5.t12:before, #callOut.w6.t12:before, #callOut.w7.t12:before {
        left: 5.4%;
    }

    #callOut.w8.t12:before, #callOut.w9.t12:before, #callOut.w10.t12:before {
        left: 5.6%;
    }

    #callOut.t21:before {
        left: 18.2%;
    }

    #callOut.t21:after {
        left: 19%;
    }

    #callOut.t22:before {
        left: 22.2%;
    }

    #callOut.t22:after {
        left: 23%;
    }

    #callOut.w1.t21:before {
        left: 16.5%;
    }

    #callOut.w2.t21:before, #callOut.w3.t21:before {
        left: 17.5%;
    }

    #callOut.w10.t21:before {
        left: 18.5%;
    }

    #callOut.w4.t22:before, #callOut.w5.t22:before, #callOut.w6.t22:before, #callOut.w7.t22:before, #callOut.w8.t22:before, #callOut.w9.t22:before {
        left: 22.5%;
    }

    #callOut.w10.t22:before {
        left: 22.7%;
    }

    #callOut.t31:before {
        left: 38.2%;
    }

    #callOut.t31:after {
        left: 39.1%;
    }

    #callOut.t32:before {
        left: 42.2%;
    }

    #callOut.t32:after {
        left: 43%;
    }

    #callOut.w1.t31:before, #callOut.w2.t31:before, #callOut.w3.t31:before {
        left: 37.4%;
    }

    #callOut.w4.t31:before, #callOut.w5.t31:before, #callOut.w6.t31:before {
        left: 38%;
    }

    #callOut.w9.t31:before, #callOut.w10.t31:before {
        left: 38.5%;
    }

    #callOut.w4.t32:before, #callOut.w5.t32:before {
        left: 42.45%;
    }

    #callOut.w6.t32:before, #callOut.w7.t32:before, #callOut.w8.t32:before, #callOut.w9.t32:before {
        left: 42.55%;
    }

    #callOut.w10.t32:before {
        left: 42.7%;
    }

    #callOut.t41:before {
        left: 56.2%;
    }

    #callOut.t41:after {
        left: 57%;
    }

    #callOut.t42:before {
        left: 60.6%;
    }

    #callOut.t42:after {
        left: 61%;
    }

    #callOut.w1.t41:before, #callOut.w2.t41:before {
        left: 55.2%;
    }

    #callOut.w3.t41:before, #callOut.w4.t41:before {
        left: 55.7%;
    }

    #callOut.w9.t41:before, #callOut.w10.t41:before {
        left: 56.4%;
    }

    #callOut.t51:before {
        left: 76.5%;
    }

    #callOut.t51:after {
        left: 78%;
    }

    #callOut.t52:before {
        left: 81.7%;
    }

    #callOut.t52:after {
        left: 82%;
    }

    #callOut.w5.t51:before, #callOut.w6.t51:before, #callOut.w7.t51:before {
        left: 77%;
    }

    #callOut.w8.t51:before, #callOut.w9.t51:before, #callOut.w10.t51:before {
        left: 77.2%;
    }

    #callOut.w5.t52:before, #callOut.w7.t52:before {
        left: 81.4%;
    }

    #callOut.w1.t52:before, #callOut.w2.t52:before {
        left: 80.7%;
    }

    #callOut i {
        font-style: italic;
    }
/*=== custom callout For Practice- end===*/

/*=== HotSpot Section - start ===*/
.hotspotImageWrapper {
    margin: auto;
    position: relative;
    height: auto !important;
    width: auto !important;
    text-align: left;
    display: inline-block;
    margin-right: 10px !important;
}

    .hotspotImageWrapper img {
        margin: 10px 15px;
    }

.hotspotClickImageWrapper {
    margin: auto;
    position: relative;
    height: auto !important;
    width: auto !important;
}

.hotspotContentOuterWrapper {
    position: relative;
    background-color: #fff;
}

.hotspot.selected {
    border: 2px solid #1582FF;
}

    .hotspot.selected.correctAnsCompleted {
        border: 2px solid #4fbd57;
    }

    .hotspot.selected.incorrectAns {
        border: 2px solid #b7220b;
    }

.hotspot.correctAnsCompleted.selected.incorrectAns {
    border: 2px solid #b5b5b5;
}

.hotspot.selected.correctAns {
    border: 2px solid #4fbd57;
}

.hotspot.correctAnsCompleted.selected.correctAns {
    border: 4px solid #01cc01;
}

.hotspot {
    position: absolute;
    cursor: pointer;
}
/*=== HotSpot Section - end ===*/

/*=== Conversation Popup - start ===*/
.showConversationBtn {
    background: transparent url(../images/transcript_icon_normal.svg) no-repeat left top;
    background-size: cover;
    height: 35px;
    width: 32px;
}

    .showConversationBtn:hover, .showConversationBtn:focus {
        background-image: url(../images/transcript_icon_hover.svg);
    }

    .showConversationBtn:active {
        background-image: url(../images/transcript_icon_active.svg);
    }

.conversationPopup {
    z-index: 100;
    padding: 70px 60px 50px;
}

    .conversationPopup .fadeView {
        background: #999;
        opacity: 0.6;
        filter: alpha(opacity=60);
    }

.conversationOuterWrapper {
    border: 2px solid #163A78;
    border-radius: 8px;
    z-index: 3;
    background-color: #FFF;
    padding: 0 0 35px;
}

#conversationContent {
    max-height: 310px;
}

.conversationAudioIcon {
    background: transparent url(../images/drag_flip_speaker_small_normal.svg) no-repeat left top;
    background-size: contain;
    top: 10px;
    left: -36px;
    width: 36px;
    height: 34px;
}

    .conversationAudioIcon:hover, .conversationAudioIcon:focus {
        background-image: url(../images/drag_flip_speaker_small_hover.svg);
    }

    .conversationAudioIcon:active {
        background-image: url(../images/drag_flip_speaker_small_active.svg);
    }

.conversationDoneBtn {
    background: transparent url(../images/Passage_blue_bttn-done_1.svg) no-repeat;
    background-size: contain;
    width: 51px;
    height: 31px;
    bottom: 8px;
    right: 10px;
    border: 3px solid rgba(255, 255, 255, 0);
    border-radius: 10px;
    background-size: 101% 107%;
    background-position: 0 -1px;
}

    .conversationDoneBtn:hover, .conversationDoneBtn:focus {
        background-image: url(../images/Passage_blue_bttn-done_2.svg);
    }

    .conversationDoneBtn:active {
        background-image: url(../images/Passage_blue_bttn-done_3.svg);
    }

.conversationInnerWrapper {
    padding: 5px 0 5px 10px;
}

#conversationContent > div {
    text-align: left;
    padding: 5px;
}

#conversationContent > p {
    text-align: left;
    clear: both;
    padding: 3px 40px 3px 60px;
    position: relative;
    min-height: 55px;
    width: 100%;
    display: table;
}

    #conversationContent > p span:not(.personIcon) {
        display: table-cell;
        vertical-align: middle;
        height: 100%;
    }

    #conversationContent > p:nth-of-type(even) {
        padding: 3px 54px 3px 40px;
        min-height: 60px;
    }

.browser-edge .personIcon {
    top: 6px;
}

.browser-msie .personIcon {
    top: 6px;
}

.personIcon {
    width: 50px;
    height: 50px;
    background-repeat: no-repeat;
    background-position: left top;
    background-color: transparent;
    background-size: contain;
    position: absolute;
    top: 7px;
    left: 0;
}

    .personIcon.stig {
        background-image: url(../images/stig_avatar.svg);
    }

    .personIcon.emma {
        background-image: url(../images/emma_avatar.svg);
    }

    .personIcon.rosa {
        background-image: url(../images/rosa_avatar.svg);
    }

    .personIcon.sten {
        background-image: url(../images/sten_avatar.svg);
    }

    .personIcon.manu {
        background-image: url(../images/manu_avatar.svg);
    }

    .personIcon.klara {
        background-image: url(../images/klara_avatar.svg);
    }

    .personIcon.granny {
        background-image: url(../images/granny_avatar.svg);
    }

#conversationContent > p:nth-of-type(even) .personIcon {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    left: auto;
    right: 0;
}
/*=== Conversation Popup - end ===*/

/*=== Cloze interaction - start ===*/
.typeClozeBlock {
    padding: 10px 10px 30px;
    height: auto;
    max-height: 320px;
    position: relative;
}

    .typeClozeBlock #clozeWrapper {
        background: #fff;
        padding: 10px;
        text-align: left;
        line-height: 1.5em;
        max-height: 300px;
        /*font-style: italic;*/
    }

    .typeClozeBlock button.hotTextAudioButton {
        margin: 5px;
    }

.clozeWrapper sub {
    vertical-align: sub;
    line-height: 0.75em;
}

.clozeWrapper sup {
    vertical-align: super;
    line-height: 0.75em;
    top: -.15em;
}

.clozeWrapper .clozeParagraph {
    padding-top: 20px;
}

.clozeWrapper > span {
    display: inline-block;
    vertical-align: top;
}

.clozeWrapper ul li.currentSelected {
    background: #09f !important;
}

figure .stemFeedBackcloze {
    padding: 0 10px;
}

.clozeWrapper ul {
    height: 30px;
    margin-left: 5px;
    width: 150px;
    display: inline-block;
    position: relative;
    vertical-align: bottom;
    border: 1px solid #60676d;
    list-style: none;
}

.browser-msie .clozeWrapper ul {
    margin-right: 5px;
}

.clozeWrapper ul li:not(:first-child) {
    float: left;
    width: 150px;
    display: none;
    background: #fff;
    position: relative;
    margin-left: -1px;
    cursor: pointer;
    border-left: 1px solid #60676d;
    border-right: 1px solid #60676d;
}

.clozeWrapper ul.disableSelection, .clozeWrapper ul.disableSelection li, .clozeWrapper ul.disableSelection li:first-child {
    cursor: default;
}

.clozeWrapper ul.w1, .clozeWrapper ul.w1 li {
    width: 60px;
}

.clozeWrapper ul.w2, .clozeWrapper ul.w2 li {
    width: 100px;
}

.clozeWrapper ul.w2_5, .clozeWrapper ul.w2_5 li {
    width: 125px;
}

.clozeWrapper ul.w3, .clozeWrapper ul.w3 li {
    width: 150px;
    padding: 0px;
}

    .clozeWrapper ul.w3.controlSmall, .clozeWrapper ul.w3.controlSmall li {
        width: 130px;
    }

    .clozeWrapper ul.w3.controlMedium, .clozeWrapper ul.w3.controlMedium li {
        width: 200px;
    }

    .clozeWrapper ul.w3.controlLarge, .clozeWrapper ul.w3.controlLarge li {
        width: 300px;
    }

    .clozeWrapper ul.w3.controlExtraLarge, .clozeWrapper ul.w3.controlExtraLarge li {
        width: 400px;
    }

    .clozeWrapper ul.w3.controlExtraFullWidth, .clozeWrapper ul.w3.controlExtraFullWidth li {
        width: 600px;
    }

    .clozeWrapper ul.w3.controlFullWidth, .clozeWrapper ul.w3.controlFullWidth li {
        width: 500px;
    }

    .clozeWrapper ul.w3 li {
        text-indent: 5px;
        padding: 4px 0 0 0;
    }

.clozeWrapper ul.w4, .clozeWrapper ul.w4 li {
    width: 180px;
}

.clozeWrapper ul.w5, .clozeWrapper ul.w5 li {
    width: 220px;
}

.clozeWrapper ul.w6, .clozeWrapper ul.w6 li {
    width: 260px;
}

.clozeWrapper ul.w7, .clozeWrapper ul.w7 li {
    width: 300px;
}

.clozeWrapper ul.w8, .clozeWrapper ul.w8 li {
    width: 340px;
}

.clozeWrapper ul.w9, .clozeWrapper ul.w9 li {
    width: 380px;
}

.clozeWrapper span > span {
    display: inline-block;
    height: 20px;
    background-repeat: no-repeat;
    position: relative;
    top: 2px;
}

.clozeWrapper ul.w10, .clozeWrapper ul.w10 li {
    width: 420px;
}

.clozeWrapper ul.w11, .clozeWrapper ul.w11 li {
    width: 460px;
}

.clozeWrapper ul li:first-child .dropdownIco,
.clozeWrapper span.correctAns:before, .clozeWrapper span.incorrectAns:before {
    right: 0;
    position: absolute;
    height: 22px;
}

.clozeWrapper ul li:first-child .dropdownIco {
    background-color: #60676d;
    padding: 10px 7px 5px;
    top: 0;
    height: 100%;
}

    .clozeWrapper ul li:first-child .dropdownIco:before {
        content: '';
        border: 5px solid #60676d;
        border-top: 5px solid #fff;
        display: block;
        width: 0;
    }

.clozeWrapper span.correctAns:before {
    content: url(../../Content/assets/images/Cloze_tick.svg);
    left: 0;
}

.clozeWrapper span.incorrectAns, .clozeWrapper span.correctAns {
    width: 22px;
    vertical-align: top;
}

    .clozeWrapper span.incorrectAns:before {
        content: url(../../Content/assets/images/Cloze_wrong.svg);
        left: 0;
    }

.clozeWrapper ul.currentSelection {
    border-bottom: 0px;
}

.clozeWrapper ul li {
    padding: 0 5px;
    z-index: 2;
    height: 100%;
    line-height: 1.3em;
}

    .clozeWrapper ul li:first-child {
        display: list-item !important;
        cursor: pointer;
        padding: 3px 0;
    }

.clozeWrapper ul.sele li:first-child {
    color: #3f3f3f;
}

.clozeWrapper ul li:last-child {
    border: 1px solid #60676d;
    border-top: 0;
}

.clozeWrapper ul li:not(:first-child):hover, .clozeWrapper ul li.selected:not(:first-child) {
    background: #e2e2e2;
}
/*=== Close Interaction - end ===*/

/* ===Comic strip view- start===*/
.comicStripParent {
    width: 510px;
    height: 310px;
    margin: 0 auto;
    top: 20px;
    position: absolute;
    left: 0;
    right: 0;
    padding: 5px 5px 5px 5px;
}

.comicStripBlock {
    float: left;
    width: 162px;
    height: 100%;
    padding: 3px 3px;
    text-align: center;
}

.browser-msie .comicStripParent:before {
    content: "";
    position: absolute;
    width: 510px;
    height: 310px;
    margin: 0 auto;
    top: 20px;
    position: absolute;
    left: 0;
    right: 0;
}

.browser-msie .comicStripParent {
    background: none !important;
    width: 515px !important;
    height: 315px !important;
    padding: 5px 5px 5px 10px !important;
}

.browser-edge .comicStripParent {
    padding: 5px 5px 5px 14px !important;
    width: 515px !important;
    height: 320px !important;
}

    .browser-edge .comicStripParent:before {
        width: 500px !important;
        height: 300px !important;
    }


.browser-msie .comicStripBackground1:before {
    content: url(../images/comic_strip_BG.svg);
    z-index: -1;
    top: 0;
}

.browser-msie .comicStripBlock {
    width: 165px !important;
}

.browser-edge .comicStripBlock {
    width: 162px !important;
}


/*===Comic strip view- end====*/


#WebToSpeech {
    position: absolute !important;
}

.con_left {
    text-align: right;
}

@-webkit-keyframes nextBtnBlinker {
    0% {
        -webkit-box-shadow: none;
    }

    50% {
        -webkit-box-shadow: 0 0 0 3px #FF9100;
    }
}

@keyframes nextBtnBlinker {
    0% {
        box-shadow: none;
    }

    50% {
        box-shadow: 0 0 0 3px #FF9100;
    }
}

@-webkit-keyframes nextBtnBlinkerForIe {
    0% {
        border: 3px solid transparent;
    }

    50% {
        border: 3px solid #FF9100;
    }
}

@keyframes nextBtnBlinkerForIe {
    0% {
        border: 3px solid transparent;
    }

    50% {
        border: 3px solid #FF9100;
    }
}

.nextBtnBlink {
    -webkit-animation: nextBtnBlinker 1s step-end infinite;
    animation: nextBtnBlinker 1s step-end infinite;
}

/*=== passage next button blink - start ===*/

@-webkit-keyframes passageNextBlinker {
    0% {
        background: url("../images/passage_right_arow_4.svg") no-repeat left top;
    }

    50% {
        background: url("../images/passage_right_arow_1.svg") no-repeat left top;
    }
}

@keyframes passageNextBlinker {
    0% {
        background: url("../images/passage_right_arow_4.svg") no-repeat left top;
    }

    50% {
        background: url("../images/passage_right_arow_1.svg") no-repeat left top;
    }
}

@keyframes passageNextBlinkerForIe {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }
}

.passageNextBlink div {
    -webkit-animation: passageNextBlinker 1s step-end infinite;
    animation: passageNextBlinker 1s step-end infinite;
}

.browser-msie .passageNextBlink div::after {
    content: url("../images/passage_right_arow_4.svg");
    top: -40px;
    position: relative;
    -webkit-animation: passageNextBlinkerForIe 1s step-end infinite;
    animation: passageNextBlinkerForIe 1s step-end infinite;
    opacity: 1;
}

/*=== passage next button blink - end ===*/

/*=== IE Fixes - start ===*/
.browser-msie .preloadAnimation {
    background: transparent none;
}

    .browser-msie .preloadAnimation:before {
        content: url(../images/loading_animation.svg);
    }

.browser-msie .resultBg {
    background-image: none;
}

    .browser-msie .resultBg:before {
        position: absolute;
        width: 100%;
        left: 0;
    }

.browser-msie .playBackBtn, .browser-msie .playBackBtn:hover, .browser-msie .playBackBtn:active, .browser-msie .playBackBtn:visited,
.browser-msie .pauseBtn, .browser-msie .pauseBtn:hover, .browser-msie .pauseBtn:active, .browser-msie .pauseBtn:visited,
.browser-msie .playBtn, .browser-msie .playBtn:hover, .browser-msie .playBtn:active, .browser-msie .playBtn:visited {
    width: 50px;
    height: 34px;
}

    .browser-msie .playBackBtn, .browser-msie .playBackBtn:hover, .browser-msie .playBackBtn:active, .browser-msie .playBackBtn:visited,
    .browser-msie .pauseBtn, .browser-msie .pauseBtn:hover, .browser-msie .pauseBtn:active, .browser-msie .pauseBtn:visited,
    .browser-msie .playBtn, .browser-msie .playBtn:hover, .browser-msie .playBtn:active, .browser-msie .playBtn:visited,
    .browser-msie .passagePlayBtn, .browser-msie .passagePlayBtn:hover, .browser-msie .passagePlayBtn:active, .browser-msie .passagePlayBtn:visited {
        background: transparent none;
        border: 0;
        box-shadow: none;
        border-radius: 0;
        zoom: 1;
        border: 0;
    }

        .browser-msie .playBackBtn span, .browser-msie .pauseBtn span, .browser-msie .playBtn span, .browser-msie .passagePlayBtn span,
        .browser-msie .playForwardBtn span, .browser-msie .audioBtn span {
            display: none;
        }

        .browser-msie .pauseBtn, .browser-msie .pauseBtn:hover, .browser-msie .pauseBtn:active, .browser-msie .pauseBtn:visited {
            display: inline-block !important;
        }

.browser-msie .blueTxtBtn, .browser-msie .blueTxtBtn:hover, .browser-msie .blueBgBtn, .browser-msie .blueBgBtn:hover {
    border: 1px solid transparent;
}

    .browser-msie .blueBgBtn:not(.nextBtnBlink):not(.nextBtn):not(.continueBtn):not(.resetBtn):not(.addToListBtn):not(.addToListBtn):not(.glossaryDoneBtn),
    .browser-msie .blueBgBtn:not(.nextBtnBlink):not(.nextBtn):not(.continueBtn):not(.resetBtn):not(.addToListBtn):not(.glossaryDoneBtn):hover,
    .browser-msie .blueBgBtn:not(.nextBtnBlink):not(.nextBtn):not(.continueBtn):not(.resetBtn):not(.addToListBtn):not(.glossaryDoneBtn):active,
    .browser-msie .blueBgBtn:not(.nextBtnBlink):not(.nextBtn):not(.continueBtn):not(.resetBtn):not(.addToListBtn):not(.glossaryDoneBtn):disabled {
        background-color: transparent !important;
        box-shadow: none !important;
        border: 0;
        width: 51px;
        height: 35px;
    }

.browser-msie .playBtn, .browser-msie .playBtn:hover, .browser-msie .playBtn:active, .browser-msie .playBtn:visited {
    display: inline-block !important;
}

.browser-msie .tutorialBtnsCon, .browser-msie .tutorialBtnsCon:hover, .browser-msie .tutorialBtnsCon:active, .browser-msie .tutorialBtnsCon:visited {
    background: transparent none;
    border: 0;
}

.browser-msie .passageBtnsCon, .browser-msie .passageBtnsCon:hover, .browser-msie .passageBtnsCon:active, .browser-msie .passageBtnsCon:visited {
    background: transparent none;
    border: 0;
}

.browser-msie .passagePlayBtn, .browser-msie .passagePlayBtn:hover, .browser-msie .passagePlayBtn:active, .browser-msie .passagePlayBtn:visited {
    width: 51px;
    height: 35px;
}

.browser-msie .playForwardBtn:not(.nextBtn):not(.continueBtn):not(.resetBtn),
.browser-msie .playForwardBtn:not(.nextBtn):not(.continueBtn):not(.resetBtn):hover,
.browser-msie .playForwardBtn:not(.nextBtn):not(.continueBtn):not(.resetBtn):active,
.browser-msie .playForwardBtn:not(.nextBtn):not(.continueBtn):not(.resetBtn):visited,
.browser-msie .audioBtn, .browser-msie .audioBtn:hover, .browser-msie .audioBtn:active, .browser-msie .audioBtn:visited {
    background: transparent none;
    box-shadow: none;
    zoom: 1;
}

    .browser-msie .playForwardBtn:not(.nextBtn):not(.continueBtn):not(.resetBtn),
    .browser-msie .playForwardBtn:not(.nextBtn):not(.continueBtn):not(.resetBtn):hover,
    .browser-msie .playForwardBtn:not(.nextBtn):not(.continueBtn):not(.resetBtn):active,
    .browser-msie .playForwardBtn:not(.nextBtn):not(.continueBtn):not(.resetBtn):visited {
        width: 50px;
        height: 34px;
    }

.browser-msie .playForwardBtn:not(.nextBtnBlink):not(.nextBtn):not(.continueBtn):not(.resetBtn),
.browser-msie .playForwardBtn:not(.nextBtnBlink):not(.nextBtn):not(.continueBtn):not(.resetBtn):hover,
.browser-msie .playForwardBtn:not(.nextBtnBlink):not(.nextBtn):not(.continueBtn):not(.resetBtn):active,
.browser-msie .playForwardBtn:not(.nextBtnBlink):not(.nextBtn):not(.continueBtn):not(.resetBtn):visited {
    border: 0;
    border-radius: 0;
}

.browser-msie .passageDoneBtn {
    height: 34px;
    width: 53px !important;
}

.browser-edge .passageDoneBtn {
    width: 55px !important;
}

.browser-msie .audioBtn, .browser-msie .audioBtn:hover, .browser-msie .audioBtn:active, .browser-msie .audioBtn:visited {
    border: 0;
    border-radius: 0;
    width: 34px !important;
}

    .browser-msie .audioBtn:before {
        content: '';
        content: url(../images/stem_speaker_normal.svg);
    }

.browser-msie .loaderBg, .browser-msie .loaderBg:hover, .browser-msie .loaderBg:active, .browser-msie .loaderBg:visited,
.browser-msie .matchedPairAltAudioBtn.leftmatchedPairAltAudioBtn, .browser-msie .matchedPairAltAudioBtn.leftmatchedPairAltAudioBtn:hover,
.browser-msie .matchedPairAltAudioBtn.leftmatchedPairAltAudioBtn:active, .browser-msie .matchedPairAltAudioBtn.leftmatchedPairAltAudioBtn:visited,
.browser-msie .matchedPairAltAudioBtn.rightmatchedPairAltAudioBtn, .browser-msie .matchedPairAltAudioBtn.rightmatchedPairAltAudioBtn:hover,
.browser-msie .matchedPairAltAudioBtn.rightmatchedPairAltAudioBtn:active, .browser-msie .matchedPairAltAudioBtn.rightmatchedPairAltAudioBtn:visited,
.browser-msie .hotTextReadAudio, .browser-msie .hotTextReadAudio:hover, .browser-msie .hotTextReadAudio:active, .browser-msie .hotTextReadAudio:visited,
.browser-msie .mcqReadAudio, .browser-msie .mcqReadAudio:hover, .browser-msie .mcqReadAudio:active, .browser-msie .mcqReadAudio:visited,
.browser-msie .showPassageBtn, .browser-msie .showPassageBtn:hover, .browser-msie .showPassageBtn:active, .browser-msie .showPassageBtn:visited,
.browser-msie .animationReplayButton, .browser-msie .animationReplayButton:hover, .browser-msie .animationReplayButton:active, .browser-msie .animationReplayButton:visited,
.browser-msie .showReferencePassageBtn, .browser-msie .showReferencePassageBtn:hover, .browser-msie .showReferencePassageBtn:active, .browser-msie .showReferencePassageBtn:visited,
.browser-msie .audioIconBtn, .browser-msie .audioIconBtn:hover, .browser-msie .audioIconBtn:active, .browser-msie .audioIconBtn:visited,
.browser-msie .hotTextAudioButton, .browser-msie .hotTextAudioButton:hover, .browser-msie .hotTextAudioButton:active, .browser-msie .hotTextAudioButton:visited,
.browser-msie .feedbackAttemptContainer.incorrect .feedbackStatusIcon, .browser-msie .feedbackAttemptContainer.incorrect .feedbackStatusIcon:hover,
.browser-msie .feedbackAttemptContainer.incorrect .feedbackStatusIcon:active, .browser-msie .feedbackAttemptContainer.incorrect .feedbackStatusIcon:visited,
.browser-msie .feedbackAttemptContainer.incorrect.attemptCompleted .feedbackStatusIcon, .browser-msie .feedbackAttemptContainer.incorrect.attemptCompleted .feedbackStatusIcon:hover,
.browser-msie .feedbackAttemptContainer.incorrect.attemptCompleted .feedbackStatusIcon:active, .browser-msie .feedbackAttemptContainer.incorrect.attemptCompleted .feedbackStatusIcon:visited,
.browser-msie .feedbackAttemptContainer.correct .feedbackStatusIcon, .browser-msie .feedbackAttemptContainer.correct .feedbackStatusIcon:hover,
.browser-msie .incorrect .feedbackAttemptContainer .feedbackStatusIcon, .browser-msie .correct .feedbackAttemptContainer .feedbackStatusIcon,
.browser-msie .feedbackAttemptContainer.correct .feedbackStatusIcon:active, .browser-msie .feedbackAttemptContainer.correct .feedbackStatusIcon:visited,
.browser-msie .sequenceAltAudioBtn, .browser-msie .sequenceAltAudioBtn:hover, .browser-msie .sequenceAltAudioBtn:active, .browser-msie .sequenceAltAudioBtn:visited,
.browser-msie .dArw, .browser-msie .dArw:hover, .browser-msie .dArw:active, .browser-msie .dArw:visited,
.browser-msie .interactiveBlock .typeGGM .ggmAudioBtn, .browser-msie .interactiveBlock .typeGGM .ggmAudioBtn:hover,
.browser-msie .interactiveBlock .typeGGM .ggmAudioBtn:active, .browser-msie .interactiveBlock .typeGGM .ggmAudioBtn:visited,
.browser-msie .showConversationBtn, .browser-msie .showConversationBtn:hover, .browser-msie .showConversationBtn:active, .browser-msie .showConversationBtn:visited,
.browser-msie .conversationAudioIcon, .browser-msie .conversationAudioIcon:hover, .browser-msie .conversationAudioIcon:active, .browser-msie .conversationAudioIcon:visited,
.browser-msie .personIcon.stig, .browser-msie .personIcon.stig:hover, .browser-msie .personIcon.stig:active, .browser-msie .personIcon.stig:visited,
.browser-msie .personIcon.emma, .browser-msie .personIcon.emma:hover, .browser-msie .personIcon.emma:active, .browser-msie .personIcon.emma:visited,
.browser-msie .personIcon.rosa, .browser-msie .personIcon.rosa:hover, .browser-msie .personIcon.rosa:active, .browser-msie .personIcon.rosa:visited,
.browser-msie .personIcon.sten, .browser-msie .personIcon.sten:hover, .browser-msie .personIcon.sten:active, .browser-msie .personIcon.sten:visited,
.browser-msie .personIcon.manu, .browser-msie .personIcon.manu:hover, .browser-msie .personIcon.manu:active, .browser-msie .personIcon.manu:visited,
.browser-msie .personIcon.klara, .browser-msie .personIcon.klara:hover, .browser-msie .personIcon.klara:active, .browser-msie .personIcon.klara:visited,
.browser-msie .personIcon.granny, .browser-msie .personIcon.granny:hover, .browser-msie .personIcon.granny:active, .browser-msie .personIcon.granny:visited,
.browser-msie .clozeWrapper span.correctAns, .browser-msie .clozeWrapper span.correctAns:hover,
.browser-msie .clozeWrapper span.correctAns:active, .browser-msie .clozeWrapper span.correctAns:visited,
.browser-msie .clozeWrapper span.incorrectAns, .browser-msie .clozeWrapper span.incorrectAns:hover,
.browser-msie .clozeWrapper span.incorrectAns:active, .browser-msie .clozeWrapper span.incorrectAns:visited,
.browser-msie .booklet .b-arrow-next div, .browser-msie .booklet .b-arrow-next div:hover, .browser-msie .booklet .b-arrow-next div:active, .browser-msie .booklet .b-arrow-next div:visited,
.browser-msie .booklet .b-arrow-prev div, .browser-msie .booklet .b-arrow-prev div:hover, .browser-msie .booklet .b-arrow-prev div:active, .browser-msie .booklet .b-arrow-prev div:visited,
.browser-msie .sequencingDdHotWrapper.ddHotWrapper .typeDragDrop .dd_dropContainer div.dd_drags.correctAns i.dragTile,
.browser-msie .matchedPairWrapper .typeMatchedPair .correctAns i.dragTile,
.browser-msie .interactiveBlock .typeGGM .topLeftMinus2 .correctAns i.dragTile,
.browser-msie .interactiveBlock .typeGGM .correctAns i.dragTile,
.browser-msie .mcqBtnContainer .mcqBtnSpan.selected.correctAns i.dragTile,
.browser-msie .sequencingDdHotWrapper.ddHotWrapper .typeDragDrop .dd_dropContainer div.dd_drags.inCorrectAns i.dragTile,
.browser-msie .matchedPairWrapper .typeMatchedPair .incorrectAns i.dragTile,
.browser-msie .interactiveBlock .typeGGM .topLeftMinus2 .inCorrectAns i.dragTile,
.browser-msie .interactiveBlock .typeGGM .incorrectAns i.dragTile,
.browser-msie .mcqBtnContainer .mcqBtnSpan.selected.incorrectAns i.dragTile,
.browser-msie .mcqBtnContainer .mcqBtnSpan i.dragTile,
.browser-msie .mcqBtnContainer .mcqBtnSpan.selected i.dragTile {
    background-image: none;
    box-shadow: none;
    border-radius: 0;
    zoom: 1;
}

    .browser-msie .matchedPairAltAudioBtn.leftmatchedPairAltAudioBtn, .browser-msie .matchedPairAltAudioBtn.leftmatchedPairAltAudioBtn:hover,
    .browser-msie .matchedPairAltAudioBtn.leftmatchedPairAltAudioBtn:active, .browser-msie .matchedPairAltAudioBtn.leftmatchedPairAltAudioBtn:visited,
    .browser-msie .matchedPairAltAudioBtn.rightmatchedPairAltAudioBtn, .browser-msie .matchedPairAltAudioBtn.rightmatchedPairAltAudioBtn:hover,
    .browser-msie .matchedPairAltAudioBtn.rightmatchedPairAltAudioBtn:active, .browser-msie .matchedPairAltAudioBtn.rightmatchedPairAltAudioBtn:visited,
    .browser-msie .hotTextReadAudio, .browser-msie .hotTextReadAudio:hover, .browser-msie .hotTextReadAudio:active, .browser-msie .hotTextReadAudio:visited,
    .browser-msie .mcqReadAudio, .browser-msie .mcqReadAudio:hover, .browser-msie .mcqReadAudio:active, .browser-msie .mcqReadAudio:visited,
    .browser-msie .feedbackAttemptContainer.incorrect .feedbackStatusIcon, .browser-msie .feedbackAttemptContainer.incorrect .feedbackStatusIcon:hover,
    .browser-msie .feedbackAttemptContainer.incorrect .feedbackStatusIcon:active, .browser-msie .feedbackAttemptContainer.incorrect .feedbackStatusIcon:visited,
    .browser-msie .feedbackAttemptContainer.incorrect.attemptCompleted .feedbackStatusIcon, .browser-msie .feedbackAttemptContainer.incorrect.attemptCompleted .feedbackStatusIcon:hover,
    .browser-msie .feedbackAttemptContainer.incorrect.attemptCompleted .feedbackStatusIcon:active, .browser-msie .feedbackAttemptContainer.incorrect.attemptCompleted .feedbackStatusIcon:visited,
    .browser-msie .feedbackAttemptContainer.correct .feedbackStatusIcon, .browser-msie .feedbackAttemptContainer.correct .feedbackStatusIcon:hover,
    .browser-msie .feedbackAttemptContainer.correct .feedbackStatusIcon:active, .browser-msie .feedbackAttemptContainer.correct .feedbackStatusIcon:visited,
    .browser-msie .sequenceAltAudioBtn, .browser-msie .sequenceAltAudioBtn:hover, .browser-msie .sequenceAltAudioBtn:active, .browser-msie .sequenceAltAudioBtn:visited,
    .browser-msie .interactiveBlock .typeGGM .ggmAudioBtn, .browser-msie .interactiveBlock .typeGGM .ggmAudioBtn:hover,
    .browser-msie .interactiveBlock .typeGGM .ggmAudioBtn:active, .browser-msie .interactiveBlock .typeGGM .ggmAudioBtn:visited,
    .browser-msie .personIcon.manu, .browser-msie .personIcon.manu:hover, .browser-msie .personIcon.manu:active, .browser-msie .personIcon.manu:visited,
    .browser-msie .personIcon.klara, .browser-msie .personIcon.klara:hover, .browser-msie .personIcon.klara:active, .browser-msie .personIcon.klara:visited,
    .browser-msie .personIcon.granny, .browser-msie .personIcon.granny:hover, .browser-msie .personIcon.granny:active, .browser-msie .personIcon.granny:visited,
    .browser-msie .clozeWrapper span.correctAns, .browser-msie .clozeWrapper span.correctAns:hover,
    .browser-msie .clozeWrapper span.correctAns:active, .browser-msie .clozeWrapper span.correctAns:visited,
    .browser-msie .clozeWrapper span.incorrectAns, .browser-msie .clozeWrapper span.incorrectAns:hover,
    .browser-msie .clozeWrapper span.incorrectAns:active, .browser-msie .clozeWrapper span.incorrectAns:visited {
        display: inline-block !important;
    }

        .browser-msie .loaderBg span, .browser-msie .matchedPairAltAudioBtn.leftmatchedPairAltAudioBtn span,
        .browser-msie .matchedPairAltAudioBtn.rightmatchedPairAltAudioBtn span,
        .browser-msie .hotTextReadAudio span, .browser-msie .mcqReadAudio span,
        .browser-msie .showPassageBtn span, .browser-msie .showReferencePassageBtn span,
        .browser-msie .animationReplayButton span,
        .browser-msie .audioIconBtn span, .browser-msie .hotTextAudioButton span,
        .browser-msie .feedbackAttemptContainer.incorrect .feedbackStatusIcon span,
        .browser-msie .feedbackAttemptContainer.incorrect.attemptCompleted .feedbackStatusIcon span,
        .browser-msie .feedbackAttemptContainer.correct .feedbackStatusIcon span,
        .browser-msie .sequenceAltAudioBtn span, .browser-msie .dArw span,
        .browser-msie .interactiveBlock .typeGGM .ggmAudioBtn span, .browser-msie .showConversationBtn span,
        .browser-msie .conversationAudioIcon span, .browser-msie .personIcon.stig span, .browser-msie .personIcon.emma span,
        .browser-msie .personIcon.rosa span, .browser-msie .personIcon.sten span, .browser-msie .personIcon.manu span,
        .browser-msie .personIcon.klara span, .browser-msie .personIcon.granny span, .browser-msie .clozeWrapper span.correctAns span,
        .browser-msie .clozeWrapper span.incorrectAns span, .browser-msie .booklet .b-arrow-next div span,
        .browser-msie .booklet .b-arrow-prev div span {
            display: none;
        }

        .browser-msie .matchedPairAltAudioBtn.leftmatchedPairAltAudioBtn:before {
            content: '';
            content: url(../images/drag_flip_speaker_small_normal.svg);
        }

        .browser-msie .matchedPairAltAudioBtn.leftmatchedPairAltAudioBtn:hover:before {
            content: '';
            content: url(../images/drag_flip_speaker_small_hover.svg);
        }

        .browser-msie .matchedPairAltAudioBtn.leftmatchedPairAltAudioBtn:active:before {
            content: '';
            content: url(../images/drag_flip_speaker_small_active.svg);
        }

        .browser-msie .matchedPairAltAudioBtn.rightmatchedPairAltAudioBtn:before {
            content: '';
            content: url(../images/drag_speaker_small_normal.svg);
        }

        .browser-msie .matchedPairAltAudioBtn.rightmatchedPairAltAudioBtn:hover:before {
            content: '';
            content: url(../images/drag_speaker_small_hover.svg);
        }

        .browser-msie .matchedPairAltAudioBtn.rightmatchedPairAltAudioBtn:active:before {
            content: '';
            content: url(../images/drag_speaker_small_active.svg);
        }

        .browser-msie .hotTextReadAudio:before, .browser-msie .mcqReadAudio:before {
            content: '';
            content: url(../images/mcq_read_small.svg);
        }

        .browser-msie .hotTextReadAudio:hover:before, .browser-msie .mcqReadAudio:hover:before {
            content: '';
            content: url(../images/mcq_read_small.svg);
        }

        .browser-msie .hotTextReadAudio:active:before, .browser-msie .mcqReadAudio:active:before {
            content: '';
            content: url(../images/mcq_read_small.svg);
        }

    .browser-msie .animationReplayButton:before {
        content: '';
        content: url(../images/reply_btn_normal.svg);
    }

    .browser-msie .animationReplayButton:hover:before {
        content: '';
        content: url(../images/reply_btn_hover.svg);
    }

    .browser-msie .animationReplayButton:active:before {
        content: '';
        content: url(../images/reply_btn_down.svg);
    }

    .browser-msie .showPassageBtn:before, .browser-msie .showReferencePassageBtn:before {
        content: '';
        content: url(../images/passage_icon_normal.svg);
    }

    .browser-msie .showPassageBtn:hover:before, .browser-msie .showReferencePassageBtn:hover:before {
        content: '';
        content: url(../images/passage_icon_hover.svg);
    }

    .browser-msie .showPassageBtn:active:before, .browser-msie .showReferencePassageBtn:active:before {
        content: '';
        content: url(../images/stem_speaker_active.svg);
    }

    .browser-msie .audioIconBtn:before {
        content: '';
        content: url(../images/stem_speaker_normal.svg);
    }

    .browser-msie .audioIconBtn:hover:before {
        content: '';
        content: url(../images/stem_speaker_hover.svg);
    }

    .browser-msie .audioIconBtn:active:before {
        content: '';
        content: url(../images/stem_speaker_active.svg);
    }

    .browser-msie .hotTextAudioButton:before {
        content: '';
        content: url(../images/hottext_audio_icon_normal.svg);
    }

    .browser-msie .hotTextAudioButton:hover:before {
        content: '';
        content: url(../images/hottext_audio_icon_hover.svg);
    }

    .browser-msie .hotTextAudioButton:active:before {
        content: '';
        content: url(../images/hottext_audio_icon_active.svg);
    }
    /*Correction-Start*/
    .browser-msie .feedbackAttemptContainer.incorrect .feedbackStatusIcon:before,
    .browser-msie .incorrect .feedbackAttemptContainer .feedbackStatusIcon:before {
        content: '';
        content: url(../../content/assets/images/icon-tileIncorrect-circle.svg);
        height: 20px;
    }

    .browser-msie .feedbackAttemptContainer.incorrect.attemptCompleted .feedbackStatusIcon:before {
        content: '';
        content: url(../../content/assets/images/icon-tileIncorrect-circle.svg);
        height: 20px;
    }

    .browser-msie .feedbackAttemptContainer.correct .feedbackStatusIcon:before,
    .browser-msie .correct .feedbackAttemptContainer .feedbackStatusIcon:before {
        content: '';
        content: url(../../content/assets/images/icon-tileCorrect-circle.svg);
        height: 20px;
    }
/*Unused-End*/
.browser-msie .mcqAudioBtn, .browser-msie .mcqAudioBtn:hover, .browser-msie .mcqAudioBtn:active, .browser-msie .mcqAudioBtn:visited,
.browser-msie .correctAns.selected ~ .mcqFeedbackIcon, .browser-msie .selected.correctAns ~ .mcqFeedbackIcon:hover,
.browser-msie .selected.correctAns ~ .mcqFeedbackIcon:active, .browser-msie .selected.correctAns ~ .mcqFeedbackIcon:visited,
.browser-msie .conversationDoneBtn, .browser-msie .conversationDoneBtn:hover, .browser-msie .conversationDoneBtn:active, .browser-msie .conversationDoneBtn:visited {
    background: transparent none;
    box-shadow: none;
    zoom: 1;
}

.browser-edge .mcqAudioBtn, .browser-edge .mcqAudioBtn:hover, .browser-edge .mcqAudioBtn:active, .browser-edge .mcqAudioBtn:visited,
.browser-edge .correctAns.selected ~ .mcqFeedbackIcon, .browser-edge .selected.correctAns ~ .mcqFeedbackIcon:hover,
.browser-edge .selected.correctAns ~ .mcqFeedbackIcon:active, .browser-edge .selected.correctAns ~ .mcqFeedbackIcon:visited {
    border-left: 0;
}

.browser-msie .selected.correctAns ~ .mcqFeedbackIcon span,
.browser-msie .conversationDoneBtn span {
    display: none;
}

.browser-msie .sequenceAltAudioBtn:before {
    content: '';
    content: url(../images/Alt_audio_icon_normal.svg);
}

.browser-msie .sequenceAltAudioBtn:hover:before {
    content: '';
    content: url(../images/Alt_audio_icon_hover.svg);
}

.browser-msie .sequenceAltAudioBtn:active:before {
    content: '';
    content: url(../images/Alt_audio_icon_active.svg);
}

.browser-msie .dArw:before {
    content: '';
    content: url(../images/down_arrow.svg);
}

.browser-msie .interactiveBlock .typeGGM .ggmAudioBtn:before {
    content: '';
    content: url(../images/alt_speaker_small_normal.svg);
}

.browser-msie .interactiveBlock .typeGGM .ggmAudioBtn:hover:before {
    content: '';
    content: url(../images/alt_speaker_small_hover.svg);
}

.browser-msie .interactiveBlock .typeGGM .ggmAudioBtn.selected:before {
    content: '';
    content: url(../images/alt_speaker_small_active.svg);
}

.browser-msie .showConversationBtn, .browser-msie .showConversationBtn:hover, .browser-msie .showConversationBtn:active, .browser-msie .showConversationBtn:visited {
    height: 35px;
    width: 33px;
}

    .browser-msie .showConversationBtn:before {
        content: '';
        content: url(../images/transcript_icon_normal.svg);
    }

    .browser-msie .showConversationBtn:hover:before, .browser-msie .showConversationBtn:focus:before {
        content: '';
        content: url(../images/transcript_icon_hover.svg);
    }

    .browser-msie .showConversationBtn:active:before {
        content: '';
        content: url(../images/transcript_icon_active.svg);
    }

.browser-msie .conversationAudioIcon:before {
    content: '';
    content: url(../images/drag_flip_speaker_small_normal.svg);
}

.browser-msie .conversationAudioIcon:hover:before, .browser-msie .conversationAudioIcon:focus:before {
    content: '';
    content: url(../images/drag_flip_speaker_small_hover.svg);
}

.browser-msie .conversationAudioIcon:active:before {
    content: '';
    content: url(../images/drag_flip_speaker_small_active.svg);
}

.browser-msie .conversationDoneBtn:before {
    content: '';
    content: url(../images/Passage_blue_bttn-done_1.svg);
}

.browser-msie .conversationDoneBtn:hover:before, .browser-msie .conversationDoneBtn:focus:before {
    content: '';
    content: url(../images/Passage_blue_bttn-done_2.svg);
}

.browser-msie .conversationDoneBtn:active:before {
    content: '';
    content: url(../images/Passage_blue_bttn-done_3.svg);
}

.browser-msie .personIcon.stig:before {
    content: '';
    content: url(../images/stig_avatar.svg);
}

.browser-msie .personIcon.emma:before {
    content: '';
    content: url(../images/emma_avatar.svg);
}

.browser-msie .personIcon.rosa:before {
    content: '';
    content: url(../images/rosa_avatar.svg);
}

.browser-msie .personIcon.sten:before {
    content: '';
    content: url(../images/sten_avatar.svg);
}

.browser-msie .personIcon.manu:before {
    content: '';
    content: url(../images/manu_avatar.svg);
}

.browser-msie .personIcon.klara:before {
    content: '';
    content: url(../images/klara_avatar.svg);
}

.browser-msie .personIcon.granny:before {
    content: '';
    content: url(../images/granny_avatar.svg);
}

.browser-msie .clozeWrapper span.correctAns:before {
    content: '';
    content: url(../images/Cloze_tick.svg);
    width: 20px;
    height: 20px;
}

.browser-msie .clozeWrapper span.incorrectAns:before {
    content: '';
    content: url(../images/Cloze_wrong.svg);
    width: 20px;
    height: 20px;
}
/*Correction-Start*/
.browser-msie .sequencingDdHotWrapper.ddHotWrapper .typeDragDrop .dd_dropContainer div.dd_drags.correctAns i.dragTile:before,
.browser-msie .matchedPairWrapper .typeMatchedPair .correctAns i.dragTile:before,
.browser-msie .interactiveBlock .typeGGM .topLeftMinus2 .correctAns i.dragTile:before,
.browser-msie .interactiveBlock .typeGGM .correctAns i.dragTile:before,
.browser-msie .mcqBtnContainer .mcqBtnSpan.selected.correctAns i.dragTile:before {
    content: '';
    content: url(../../content/assets/images/icon-tileCorrect.svg);
    width: 16px;
    height: 16px;
    position: absolute;
    left: 2px;
    top: 5px;
}

.browser-msie .sequencingDdHotWrapper.ddHotWrapper .typeDragDrop .dd_dropContainer div.dd_drags.inCorrectAns i.dragTile:before,
.browser-msie .matchedPairWrapper .typeMatchedPair .incorrectAns i.dragTile:before,
.browser-msie .interactiveBlock .typeGGM .topLeftMinus2 .inCorrectAns i.dragTile:before,
.browser-msie .interactiveBlock .typeGGM .incorrectAns i.dragTile:before,
.browser-msie .mcqBtnContainer .mcqBtnSpan.selected.incorrectAns i.dragTile:before {
    content: '';
    content: url(../../content/assets/images/icon-tileIncorrect.svg);
    width: 16px;
    height: 20px;
    position: absolute;
    left: 2px;
    top: 4px;
}

.browser-msie .mcqBtnContainer .mcqBtnSpan i.dragTile:before {
    content: '';
    content: url(../../content/assets/images/icon-tileCheckbox.svg);
    position: absolute;
    left: 6px;
    top: 9px;
    width: 9px;
}

.browser-msie .mcqBtnContainer .mcqBtnSpan.selected i.dragTile:before {
    content: '';
    content: url(../../content/assets/images/icon-tileCheckbox-active.svg);
    position: absolute;
    left: 6px;
    top: 9px;
    width: 9px;
}
/*Correction-End*/

.browser-msie .booklet.practPsgContentWrapper .b-arrow-next {
    bottom: 30px;
}

.browser-msie .booklet .b-arrow-next div, .browser-msie .booklet .b-arrow-next div:hover,
.browser-msie .booklet .b-arrow-next div:active, .browser-msie .booklet .b-arrow-next div:visited {
    text-indent: 0;
    right: 10px;
    left: auto;
}

    .browser-msie .booklet .b-arrow-next div:before {
        content: '';
        content: url(../images/passage_right_arow_1.svg);
    }

.browser-msie .booklet .b-arrow-prev div, .browser-msie .booklet .b-arrow-prev div:hover, .browser-msie .booklet .b-arrow-prev div:active, .browser-msie .booklet .b-arrow-prev div:visited {
    text-indent: 0;
}

    .browser-msie .booklet .b-arrow-prev div:before {
        content: '';
        content: url(../images/passage_left_arow_1.svg);
    }

.browser-msie .blueBgBtn:not(.addToListBtn):not(.resetBtn):not(.nextBtn):not(.continueBtn):disabled {
    background-color: transparent !important;
    border: 0 !important;
}

.browser-msie .showPassageBtn, .browser-msie .audioIconBtn, .browser-msie .animationReplayButton {
    height: 34px;
    width: 34px;
}

.browser-msie .nextBtnBlink, .browser-msie .doneBlink {
    -webkit-animation: nextBtnBlinkerForIe 1s step-end infinite;
    animation: nextBtnBlinkerForIe 1s step-end infinite;
}

.browser-edge .nextBtnBlink, .browser-edge .doneBlink {
    -webkit-animation: nextBtnBlinker 1s step-end infinite;
    animation: nextBtnBlinker 1s step-end infinite;
}

.browser-edge .passageDoneBtn.doneBlink {
    -webkit-animation: nextBtnBlinkerForIe 1s step-end infinite;
    animation: nextBtnBlinkerForIe 1s step-end infinite;
}
/*=== IE Fixes - end ===*/


/*=== IE Edge Fixes ===*/
.browser-edge .booklet .b-arrow div {
    border: 2px solid transparent;
    width: 44px;
}

    .browser-edge .booklet .b-arrow div:hover {
        border: 2px solid transparent;
        width: 44px;
    }

.browser-edge .passageNextBlink div::after {
    top: -35px;
}

.browser-edge .blueTxtBtn, .browser-edge .blueTxtBtn:hover, .browser-edge .blueBgBtn, .browser-edge .blueBgBtn:hover, .browser-edge .conversationDoneBtn {
    box-shadow: 0px 0px 0px 0px transparent;
    border: 0;
}

    .browser-edge .conversationDoneBtn:before {
        width: 60px;
        height: 36px;
        position: absolute;
        left: 0px;
        top: -2px;
    }

.browser-edge .conversationAudioIcon, .browser-edge .conversationAudioIcon:hover, .browser-edge .conversationAudioIcon:active {
    border: 3px solid transparent;
    border-right: 0px;
}

.browser-edge .stepListItem.selected, .browser-edge .stepListItem {
    border: 2px solid transparent;
}

.browser-msie .stepListItem,
.browser-msie .stepListItem.selected,
.browser-msie .stepListItem:hover,
.browser-msie .stepListItem:visited {
    background: none !important;
}

.browser-edge .conversationDoneBtn {
    border-radius: 6px;
    overflow: hidden;
    height: 28px;
}

.browser-edge .playForwardBtn {
    position: relative;
}

.browser-edge :not(.nextBtn):not(.resetBtn):not(.continueBtn).playForwardBtn, .browser-edge :not(.nextBtn):not(.resetBtn):not(.continueBtn).playForwardBtn:hover, .browser-edge :not(.nextBtn):not(.resetBtn):not(.continueBtn).playForwardBtn:active, .browser-edge :not(.nextBtn):not(.resetBtn):not(.continueBtn).playForwardBtn:visited {
    height: 33px;
}

.browser-edge .playForwardBtn::before, .browser-edge .playForwardBtn:hover::before, .browser-edge .playForwardBtn:active::before {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 35px;
}

.fraction {
    display: inline-block;
    vertical-align: middle;
    margin: 0 0.2em 0.4ex;
    text-align: center;
}

    .fraction > span {
        display: block;
        padding-top: 0.15em;
    }

    .fraction span.fdn {
        border-top: thin solid black;
    }

    .fraction span.bar {
        display: none;
    }

.Click_leftPanel {
    height: 315px !important;
    width: 16%;
    display: inline-block;
    vertical-align: top;
}

.Show_rightPanel {
    background-color: #fff;
    display: inline-block;
    width: 81%;
    border: 3px solid #0d3242;
    overflow: auto;
}

.clickableContent {
    display: block;
    text-align: right;
    padding-bottom: 8px;
    background: url('../images/stepArrow.png') no-repeat center bottom;
    margin-bottom: 2px;
}

.lastStepImage .clickableContent {
    padding-bottom: 0;
    background: none;
    margin-bottom: 0;
}

.borderBlueForLeftContentStepInteraction {
    border: 3px solid #0d3242;
}

.borderBlackForLeftContentStepInteraction {
    border: 3px solid #8cb9c7;
}

#contentText {
    text-align: left;
    padding: 0 10px;
}

    #contentText > h1 {
        color: #268098;
        font-weight: bold;
    }

#contentImage {
    padding: 10px;
}

.hotSpotResponseContent {
    font-style: normal;
    font-weight: normal;
    text-align: left;
    display: inline-block;
    padding: 0 5px;
}

.clicktopPanel {
    color: whitesmoke;
    white-space: nowrap;
    text-align: left;
}

.clickableDiv {
    display: inline-block;
    /*width: auto;*/
    padding: 6px 4px;
    text-align: center;
    background-color: #dfdfdf;
    color: #7E8286;
    font-size: 0.85em;
    margin-right: 5px;
    min-width: 50px;
    width: 10.5%;
    word-wrap: break-word;
    white-space: normal;
}

    .borderBlueForLeftContentStepInteraction:hover, .borderBlackForLeftContentStepInteraction:hover, .clickableDiv:hover {
        cursor: pointer;
    }

    .clickableDiv.clicked {
        display: inline-block;
        background-color: #60676d;
        color: #fff;
    }

.showbottomPanel {
    background-color: #fff;
    display: inline-block;
    border: 5px solid #60676d;
    overflow: auto;
    padding: 10px;
    min-height: 300px;
    max-width: 100%;
}

.showbottomPanelVertical {
    background-color: #fff;
    border: 5px solid #60676d;
    overflow: auto;
    padding: 10px;
}

#contentTextArea {
    font-size: 0.9em;
    text-align: left;
    padding: 0 10px;
}

#contentImageVertical {
    display: inline-block;
}

#contentTextAreaVertical {
    font-size: 0.9em;
    text-align: left;
    padding: 0 10px;
    display: inline-block;
    width: 50%;
    vertical-align: top;
}

.tempContquestion1_initial #contentTextAreaVertical {
    width: auto;
}

.pie {
    position: absolute;
    width: 200px;
    height: 200px;
    -moz-border-radius: 50px;
    background: url(../../content/assets/images/electronMicroscope.png) no-repeat scroll 0 0 transparent;
    background-size: 14px 16px;
    cursor: pointer;
}

    .pie.selected {
        background: url(../../content/assets/images/electronMicroscopeHover.png) no-repeat scroll 0 0 transparent;
        background-size: 14px 16px;
    }

    .pie:hover {
        background: url(../../content/assets/images/electronMicroscopeHover.png) no-repeat scroll 0 0 transparent;
        background-size: 14px 16px;
    }

.ThreeColumnfirstTextLeftColumn,
.secondTextLeftColumnTwoColumn,
.firstTextLeftColumnTwoColumn,
.FirstImageCenterColumnTwoColumn,
.firstTextLeftColumn,
.FirstImageCenterColumn {
    float: left;
    width: 50%;
}

.FirstImageCenterColumn,
.FirstImageCenterColumnTwoColumn {
    text-align: center;
    box-sizing: border-box;
    padding-left: 20px;
}

.columnParagraphLeftTwoColumn .columnParagraphSecondTwoColumn,
.columnParagraphTwoColumn .columnParagraphSecondTwoColumn {
    float: left;
    clear: both;
    margin-top: 30px;
}

.chapter .quiz,
.secondTextLeftColumnTwoColumn,
.thirdTextLeftColumnTwoColumn {
    clear: both;
}
/************* Content Page Styling Start    ***********************/
.pageContentPaddingBox {
    padding-top: 10px;
}

    .pageContentPaddingBox > .row {
        margin-left: -5px;
    }

.preTestContainer {
    padding: 10px;
    background-color: #EFEFEF;
    box-sizing: border-box;
    border: 1px solid #E6E6E6;
    margin-bottom: 30px;
}

    .preTestContainer + .padding-box {
        clear: both;
    }

.paragraph,
.paragraph .columnParagraphLeftNormalText {
    margin-top: 30px;
}

    .paragraph .normalParagraph {
        padding: 0;
    }

.normalParagraph {
    padding: 15px 0;
    box-sizing: border-box;
    clear: both;
}

.threeColumnBlock {
    width: 33.333333%;
    box-sizing: border-box;
    padding-right: 10px;
    display: inline-block;
    vertical-align: top;
}

.templateContainerCommon:not(:empty) {
    font-size: 16px;
    padding: 0px 10px 10px 10px;
    background-color: #EFEFEF;
    box-sizing: border-box;
    border: 1px solid #E6E6E6;
    margin: 20px 0;
    clear: both;
}

.dd_textContainerBg,
.imgLeft,
.imgRight {
    text-align: center;
}

/*Sequencing Labels Styling Start 2*/
.sequencingHeader {
    font-weight: bold;
    color: #666;
}

.seq_textLeftColumn {
    float: left;
    width: 40%;
}

.seq_textRightColumn {
    float: right;
    width: 40%;
}
/*End*/
.dd_textLeftColumn,
.dd_textRightColumn,
.dd_textRightMostColumn {
    display: inline-block;
}

.chapter figure,
.detect_formats {
    margin-bottom: 30px;
}

.summary {
    padding: 16px 45px;
    color: #fff;
}

    .summary h1 {
        margin-bottom: 10px;
    }

.chapter .summary h2 {
    margin: 10px 0;
    font-size: 170%;
}

.typeGGM .dd_dropContainerBg img,
footer a.footer-image img {
    max-width: 100%;
    max-height: 100%;
}

.unitContentList li {
    margin-top: 10px;
}

.padding-box .custom-error span {
    color: #f5f5f5;
}

.referencesAuthors {
    display: inline-block;
    margin-left: 15px;
}

li.question label {
    display: block;
}

.templateContentHolder > .row {
    margin: 0;
}

.noBottomMargin {
    margin-bottom: 0 !important;
}

.chapter .subquiz .quiz-answer {
    padding: 15px;
    box-sizing: border-box;
    clear: both;
}

/*.chapter .templateContentHolder ~ .actions {
    display: none;
}*/

.success-message .big-font {
    color: #fff;
}
/*blockquote For Chemistry Unit 2*/
.blockquote {
    background-color: #2d7e9d;
    border-left: 15px solid #225e75;
    color: #f5f5f5;
    font-size: 20px;
    text-align: left;
    padding: 10px 20px;
    margin: 0 0 20px;
}
/*End*/
/*blockquote For Chemistry Unit 2 Stem Table*/
table.stemTable {
    border-collapse: collapse;
    margin: 0 auto;
    width: 100%;
    border: 1px solid #E6E6E6;
    font-size: 14px;
    background-color: #f5f5f5;
}

th.stemTable {
    vertical-align: top;
    text-align: center;
}

td.stemTable,
th.stemTable {
    border-top: 1px solid #E6E6E6;
    border-right: 1px solid #E6E6E6;
    padding: 2px 5px;
}

#dialog-modal table.stemTable {
    background-color: #156786;
    border: 1px solid #3a829c;
}

#dialog-modal td.stemTable,
#dialog-modal th.stemTable {
    border-top: 1px solid #3a829c;
    border-right: 1px solid #3a829c;
}

.chapter .subquiz .question:nth-child(even) {
    float: left;
    width: 83%;
    max-width: 85%;
    margin: 14px 0 0 10px;
}

.content img.quiz-image {
    margin-bottom: 0px;
}

.chapter .quiz .subquiz img.quiz-image {
    float: left;
}

.summary .textSrc {
    color: #fff;
}

figure.centerJustified table.stemTable .greyCells {
    background-color: #60676d;
    color: #fff;
}

/*End*/
/************* Content Page Styling End    ***********************/

/************* Quick Navigation Styling Start    ***********************/
.padding-box {
    position: relative;
}

#quickNavigation {
    background-color: #ccc;
    padding: 5px;
    display: inline-block;
    position: absolute;
    left: 0px;
    top: 45px;
    border-radius: 0 10px 10px 0;
    z-index: 2;
}

    #quickNavigation ul {
        padding: 6px 0;
        margin: 0;
    }

    #quickNavigation li {
        list-style: none;
        margin-bottom: 10px;
    }

        #quickNavigation li:last-child {
            margin: 0;
        }

        #quickNavigation li a {
            border-radius: 15px;
            background-color: #fff;
            padding: 3px;
            width: 26px;
            height: 26px;
            display: block;
            text-align: center;
            font-weight: bold;
        }

.quickNavPeriodicTbl {
    background: url(../images/periodicTable.png) no-repeat center center;
}

.qickNavEqBalancer {
    background: url(../images/EquationBalancer.png) no-repeat center center;
}
/************* Quick Navigation Styling End    ***********************/

/************* TOC Navigation Styling Start    ***********************/
nav ol.tocUL {
    margin: 0;
    padding: 0 30px;
}

    nav ol.tocUL li {
        padding: 10px 0;
        border-bottom: 1px solid #60676d;
    }

        nav ol.tocUL li a {
            color: #ffffff;
            display: block;
            font-weight: bold;
        }

        nav ol.tocUL li ul li {
            padding: 0;
            height: auto;
            margin: 0;
            list-style: none;
            line-height: normal;
            border: none;
        }

            nav ol.tocUL li ul li a {
                padding: 5px 0 25px 22px;
                display: block;
                font-weight: normal;
                text-align: left;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
                max-height: 40px;
            }

            nav ol.tocUL li ul li.oerLink a {
                background: url(../images/oerIcon.png) no-repeat left 5px;
            }

            nav ol.tocUL li ul li.videoLink a,
            .reteachVideoLinks a {
                background: url(../images/videoIcon.png) no-repeat left 5px;
            }


/* Added for tool integration in TOC*/
.periodicTable a {
    padding: 10px 0 10px 30px;
    border-bottom: 1px solid #60676d;
    color: #f5f5f5;
    display: block;
    background: url(../images/periodicTable.ico) no-repeat left 5px;
    background-position: 10px center;
}

.equationBalancer a {
    padding: 10px 0 10px 30px;
    border-bottom: 1px solid #60676d;
    color: #f5f5f5;
    display: block;
    background: url(../images/EquationBalancer.ico) no-repeat left 5px;
    background-position: 10px center;
}

.tutorial a {
    padding: 10px 0 10px 30px;
    border-bottom: 1px solid #60676d;
    color: #f5f5f5;
    display: block;
    background: url(../images/Symbol_2.png) no-repeat left 5px;
    background-position: 10px center;
}

/*END*/
.reteachVideoLinks a {
    padding: 10px 0 10px 30px;
    border-bottom: 1px solid #60676d;
    color: #f5f5f5;
    display: block;
    /*background: url(../images/videoIcon.png) no-repeat 10px center;*/
    background-position: 10px center;
}

    .reteachVideoLinks a:hover {
        background-color: #60676d;
    }

.reteachVideoUL .reteachVideoLink {
    background: url(../../Assets/Images/playerBtnSmall.png) no-repeat left center;
    display: inline-block;
    padding: 10px 10px 10px 30px;
}

/************* TOC Navigation Styling End    ***********************/

.overFlowHidden {
    overflow: hidden;
}

.overlayContainer {
    width: 100%;
    height: 100%;
    /*position: absolute;*/
    position: fixed;
    top: 0 !important;
    left: 0;
    z-index: 99999;
    background: url(../../Content/assets/images/overlayBG.png);
}

.overlayContainerWhite {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99999;
    background: url(../../Content/Images/loading_spinner.gif) no-repeat center center #fff;
    display: none;
}

#dialog-modal {
    background: #2d7e9c;
    border: 1px solid #9d9d9d;
    box-shadow: 0px 0px 5px 2px #30353b;
    z-index: 3;
    padding: 0 10px 10px;
    margin: 0 auto;
    width: 80%;
    position: relative;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

.stemFeedbackContainerWrapper {
    margin: 0 auto;
}

#dialog-modal .stemFeedbackContainerWrapper {
    display: none;
}

#dialog-modal .popupHeadingContainer {
    padding: 4px 5px;
    color: #fff;
    font-size: 0.75em;
    font-weight: bold;
    text-align: left;
    position: relative;
}

    #dialog-modal .popupHeadingContainer .popupTitle {
        color: #fff;
        font-size: 1.5em;
    }

    #dialog-modal .popupHeadingContainer .closeIco {
        display: inline-block;
        position: absolute;
        right: 0px;
        float: none;
        width: initial;
        height: inherit;
        background: url(../../Content/assets/images/popupClose.svg) no-repeat left top;
        background-size: cover;
        width: 18px;
        height: 18px;
    }

#dialog-modal .popupContainer .assessment .padding-box {
    padding: 0 15px;
    text-align: center;
    background-color: #2b7896;
    min-height: 300px;
}

#dialog-modal .toolOptBtmR {
    padding: 10px 0 0;
}

#dialog-modal .stemContentInnerBox .questionStem,
#dialog-modal .ddTextleftColumn, #dialog-modal .sequencingHeader {
    color: #fff;
}

#dialog-modal .interactiveBlock .typeGGM .dd_dropZone,
#dialog-modal .matchedPairWrapper .typeMatchedPair .mp_dropZone {
    background-color: #4288a2;
}

#dialog-modal .interactiveBlock .typeGGM .topLeftMinus2 i.dragTile,
#dialog-modal .interactiveBlock .typeGGM .dragHolder i.dragTile,
#dialog-modal .interactiveBlock .typeGGM .dd_drags i.dragTile,
#dialog-modal .matchedPairWrapper .typeMatchedPair .mp_drags i.dragTile,
#dialog-modal .sequencingDdHotWrapper.ddHotWrapper .typeDragDrop.sixDrag0rDrop div.dd_drags i.dragTile,
#dialog-modal .mcqBtnContainer .mcqBtnSpan i.dragTile {
    background-color: #2d7e9c;
}

#dialog-modal .interactiveBlock .typeGGM .dd_dropContainer,
#dialog-modal .matchedPairWrapper .typeMatchedPair .mp_dropContainer .mp_droppableElements {
    border: 1px dashed #87a9b7;
}

#dialog-modal .interactiveBlock .typeGGM .dd_drags,
#dialog-modal .matchedPairWrapper .typeMatchedPair .mp_drags {
    border: 1px solid #20586e;
}

#dialog-modal .btnAudioWrapper {
    box-shadow: none;
    border: 1px solid #20586e;
}

#dialog-modal .interactiveBlock .typeGGM .dragHolder {
    border: 1px solid #20586e;
}

#dialog-modal .interactiveBlock .typeGGM .ui-state-active,
#dialog-modal .matchedPairWrapper .typeMatchedPair .ui-state-active,
#dialog-modal .sequencingDdHotWrapper.ddHotWrapper .typeDragDrop div.ui-state-active {
    background: #569bb8;
}

#dialog-modal .matchPairTypeTwo.matchedPairWrapper .typeMatchedPair .dragHolder .leftArrow,
#dialog-modal .matchPairTypeTwo.matchedPairWrapper .typeMatchedPair .mp_left span.leftArrow {
    border-right-color: #87a9b7;
}

#dialog-modal .dd_drags span {
    color: #464646 !important;
}

#dialog-modal .clickableDiv.clicked {
    background-color: #0d3242;
}

#dialog-modal .showbottomPanel {
    border: 5px solid #0d3242;
}

#dialog-modal .showbottomPanelVertical {
    border: 5px solid #0d3242;
}

.assessment img {
    max-width: 100%;
    max-height: 100%;
    display: inherit;
}

#dialog-modal .typeGGM .dd_dropContainerBg img {
    max-height: 90%;
}

#dialog-modal.popupAssessment form .toolOptBtm.fullWidth,
#dialog-modal.popupAssessment form .validation-summary-valid,
#dialog-modal .hotspotContentOuterWrapper .hotspotContentInnerWrapper {
    padding-top: 10px;
}

#dialog-modal .clozeWrapper span.incorrectAns,
#dialog-modal .clozeWrapper span.correctAns {
    display: none;
}

#dialog-modal.popupPreTest .popupContainer .assessment .padding-box,
#dialog-modal.skipPreTestPopup {
    font-size: 18px;
    color: #fff;
    text-align: left;
    padding: 15px;
}

#dialog-modal.popupPreTest .popupContainer .assessment .padding-box {
    text-align: center;
}

#dialog-modal .login .container {
    width: 96% !important;
}

#dialog-modal .mp_dropContainer .headingContent > div {
    color: #fff;
}

#dialog-modal .clozeWrapper ul li:first-child .dropdownIco {
    background-color: #2F7D9C;
}

    #dialog-modal .clozeWrapper ul li:first-child .dropdownIco:before {
        border: 5px solid #2F7D9C;
        border-top: 5px solid #fff;
    }

#dialog-modal .clozeWrapper ul li:first-child {
    padding: 6px 0;
}

#dialog-modal .typeClozeBlock #clozeWrapper {
    padding: 18px 10px 10px;
}

#dialog-modal .clozeWrapper ul {
    height: 35px;
    border: 1px solid #2F7D9C;
    margin-top: -8px;
}

    #dialog-modal .clozeWrapper ul.w3 li {
        height: 34px;
        padding: 8px 0;
    }

    #dialog-modal .clozeWrapper ul li:not(:first-child) {
        border-left: 1px solid #2F7D9C;
        border-right: 1px solid #2F7D9C;
    }

    #dialog-modal .clozeWrapper ul li:last-child {
        border: 1px solid #2F7D9C;
        border-top: 0;
    }

    #dialog-modal .clozeWrapper ul li:first-child .dropdownIco {
        padding: 14px 7px 5px;
    }

#dialog-modal nav ul li a {
    padding-left: 5% !important;
}

#dialog-modal .sequencingDdHotWrapper.ddHotWrapper .typeDragDrop.sixDrag0rDrop .verticalSequencingDragContainer .dd_drags img,
#dialog-modal .sequencingDdHotWrapper.ddHotWrapper .typeDragDrop.sixDrag0rDrop .dd_drags .sequenceImage {
    border: 3px solid #0D3343;
    box-shadow: none;
}

#dialog-modal .sequencingDdHotWrapper.ddHotWrapper .typeDragDrop .dd_dropZone {
    background-color: #4288A2;
}

#dialog-modal .sequencingDdHotWrapper.ddHotWrapper .typeDragDrop .dd_dropContainer {
    /*border: 1px dashed #4288a2;*/
    border: none;
}

#dialog-modal .sequencingDdHotWrapper.ddHotWrapper .typeDragDrop .dd_drags span {
    color: #fff !important;
}

#dialog-modal .sequencingDdHotWrapper.ddHotWrapper .typeDragDrop .dd_leftPanel {
    /*background-color: #3A89A8 !important;*/
    background-color: transparent;
    margin-right: 20px;
}

#dialog-modal .sequencingDdHotWrapper.ddHotWrapper .typeDragDrop.sixDrag0rDrop .dd_drags.dis {
    opacity: 0.2;
    filter: alpha(opacity=20);
}

#dialog-modal .sequencingDdHotWrapper.ddHotWrapper .typeDragDrop .dd_dropContainer .horizontalSequencingDd_left .dd_dropZone .dd_drags {
    margin: -28px 0px !important;
    position: absolute;
    left: 0;
}

    #dialog-modal .sequencingDdHotWrapper.ddHotWrapper .typeDragDrop .dd_dropContainer .horizontalSequencingDd_left .dd_dropZone .dd_drags.multiLineAlignment {
        margin: -48px 0 !important;
    }

#dialog-modal.skipPreTestPopup {
    /*top: 50%;
    transform: translateY(-50%);*/
    width: 40%;
}

    #dialog-modal.skipPreTestPopup .popupContainer .assessment .padding-box {
        min-height: 100px;
        text-align: left;
    }

.padding-message-box {
    padding: 0 15px;
}

#dialog-modal .sequencingDdHotWrapper.ddHotWrapper .typeDragDrop .verticalSequencingDd_left .dd_drags span {
    background-color: #2b7896;
}

#dialog-modal .verticalSequencingDragContainer .sequenceSeparator {
    border-top: 10px solid #8bb8cb;
}

#dialog-modal.warningPopup {
    background-color: #4dbeb1;
}

    #dialog-modal.warningPopup .popupContainer {
        height: 100%;
        vertical-align: top;
        display: inline-block;
        width: 100%;
        box-sizing: border-box;
        background-color: #fff;
        color: #000;
        padding: 10px 20px;
    }

/**/
.ddTextleftColumn {
    font-weight: bold;
    color: #666;
}

.ImageCenterAlignment {
    text-align: center;
}

/* Start Cross Icon PopUp   */
#dialog-modal-crossIcon {
    background: #2d7e9c;
    border: 5px solid #ffffff;
    box-shadow: 0px 0px 2px 1px #30353b;
    z-index: 10;
    padding: 0;
    top: 0;
    right: 0;
    bottom: 0px;
    left: 0;
    max-height: 180px;
    width: 28%;
    position: absolute;
    margin: auto;
}

.showPopUp .fullHeight.posRel {
    background-color: #e7e8e9;
}

.showPopUp .popup-congratulation {
    display: block;
    padding: 20px;
    color: #fff;
    text-align: center;
}

.showPopUp #closeAsesment {
    margin: 0px 110px !important;
}

.crossIconModalBody {
    padding: 20px 10px;
}

.crossIconModalFooter {
    height: 50px;
    text-align: center;
}

#crossIconText {
    color: #666666;
    display: block;
    text-align: left;
    font-size: 18px !important;
}

#SecondPopUpcloseIcoBtn {
    display: inline-block;
    position: absolute;
    right: 0px;
    float: none;
    width: initial;
    height: inherit;
    background: url(../../Content/assets/images/popupClose.svg) no-repeat left top;
    background-size: cover;
    width: 18px;
    height: 18px;
}

@media (max-width: 768px) {
    .templateContainerCommon {
        width: 668px !important;
    }

    .matchPairTypeTwo.matchedPairWrapper .typeMatchedPair .mp_dropContainer .mp_staticElements {
        width: 48% !important;
    }
}

@media (max-width: 736px) {
    #dialog-modal.skipPreTestPopup {
        width: 82%;
    }

    #dialog-modal-crossIcon {
        width: 60%;
    }

    #dialog-modal.popupPreTest .mainAssesmentContentWrapper .mcqBtnSpan .mcqAnswer {
        font-size: 0.8em;
    }

    #dialog-modal .stemContentInnerBox .questionStem {
        font-size: 0.9em;
        padding: 3px 0;
    }

    #dialog-modal .popupContainer .assessment .padding-box {
        padding: 0 10px;
    }

    #dialog-modal form > .validation-summary-valid,
    #dialog-modal form > br,
    #dialog-modal form .toolOptBtm {
        display: none;
    }

    #dialog-modal form > .mainAssesmentContentWrapper {
        padding-bottom: 5px;
    }

    #dialog-modal form .typeClozeBlock {
        padding: 10px 5px;
    }

    #dialog-modal .clozeWrapper ul {
        margin-top: 0;
    }

    .interactiveBlock .typeGGM .dd_dropContainer,
    .interactiveBlock .typeGGM .dd_dragContainer,
    .interactiveBlock .typeGGM .dd_drags {
        width: 100% !important;
    }

    .twoColGGM .ddTextleftColumn,
    .interactiveBlock .typeGGM.twoColGGM .dd_left,
    .interactiveBlock .typeGGM.twoColGGM .dragHolder,
    .interactiveBlock .typeGGM .dd_left,
    .dd_dropleftcolumn, .dd_droprightcolumn,
    .interactiveBlock .typeGGM .dragHolder {
        width: 47.7% !important;
    }

    .threeColGGM .ddTextleftColumn,
    .interactiveBlock .typeGGM.threeColGGM .dd_left,
    .interactiveBlock .typeGGM.threeColGGM .dragHolder,
    .interactiveBlock .typeGGM.threeColGGM .dd_left,
    .threeColGGM .dd_dropleftcolumn,
    .threeColGGM .dd_droprightcolumn,
    .threeColGGM .dd_droprightmostcolumn,
    .interactiveBlock .typeGGM.threeColGGM .dragHolder {
        width: 30% !important;
        font-size: 0.9em;
    }

    #dialog-modal .interactiveBlock .typeGGM .dd_drags {
        border-right: 0 !important;
    }

    .matchPairTypeTwo.matchedPairWrapper .typeMatchedPair .mp_dropContainer .mp_staticElements {
        width: 36% !important;
    }

    .matchPairTypeTwo.matchedPairWrapper .typeMatchedPair .mp_dropContainer .mp_droppableElements {
        width: 28% !important;
    }

    .matchPairTypeTwo.matchedPairWrapper .typeMatchedPair .mp_dragContainer {
        width: 33% !important;
    }

    .matchPairTypeTwo.matchedPairWrapper .typeMatchedPair .dragHolder,
    .matchedPairWrapper .typeMatchedPair .mp_drags {
        width: 100% !important;
    }

    .mp_dropContainer .headingContent > div:first-child {
        width: 36% !important;
    }

    .templateContainerCommon {
        width: 603px !important;
    }

    .interactiveBlock ~ .stemFeedbackContainerWrapper {
        width: 94% !important;
    }

    .sequencingDdHotWrapper.ddHotWrapper .typeDragDrop .dragHolder:not(.verticalSequencingDragHolder),
    .sequencingDdHotWrapper.ddHotWrapper .typeDragDrop .dd_left:not(.verticalSequencingDd_left),
    .sequencingDdHotWrapper.ddHotWrapper .typeDragDrop.sixDrag0rDrop .dragHolder:not(.verticalSequencingDragHolder) .dd_drags,
    .sequencingDdHotWrapper.ddHotWrapper .typeDragDrop .dd_dropContainer .dropContainer:not(.verticalSequencingDd_left) .dd_dropZone .dd_drags,
    .verticalSequencingDd_left .dd_drags span,
    .sequencingDdHotWrapper.ddHotWrapper .typeDragDrop .verticalSequencingDragHolder .dd_drags span {
        width: 80px !important;
    }

    .sequencingDdHotWrapper.ddHotWrapper .typeDragDrop .dd_left {
        height: 55px !important;
    }

    .sequencingDdHotWrapper.ddHotWrapper .typeDragDrop .verticalSequencingDragContainer .dd_left,
    .sequencingDdHotWrapper .typeDragDrop .verticalSequencingDragContainer .dd_dropContainer .dd_dropZone .dd_drags,
    .sequencingDdHotWrapper.ddHotWrapper .typeDragDrop .dragHolder.verticalSequencingDragHolder,
    .sequencingDdHotWrapper.ddHotWrapper .typeDragDrop.sixDrag0rDrop .verticalSequencingDragHolder .dd_drags {
        width: 178px !important;
        height: 60px !important;
    }

    .sequencingDdHotWrapper.ddHotWrapper .typeDragDrop.sixDrag0rDrop .verticalSequencingDragContainer .dd_drags img {
        width: 98px !important;
    }

    .chapter .actions .btn {
        padding: 10px 25px;
        margin-right: 20px;
    }



    .clickableDiv {
        width: 10% !important;
        text-overflow: ellipsis;
        overflow: hidden;
        vertical-align: bottom;
    }

    .hotspotImageWrapper img {
        display: block !important;
    }
}

@media (max-width: 667px) {
    .templateContainerCommon {
        width: 534px !important;
    }
}

@media (max-width: 414px) {
    #dialog-modal.skipPreTestPopup .btn-green {
        width: 100%;
        margin-bottom: 5px;
    }

    #dialog-modal-crossIcon {
        width: 88%;
        max-height: 225px;
    }

        #dialog-modal-crossIcon .btn-green {
            width: 100%;
            margin: 0 0 5px 0;
        }
}

/* End Cross Icon PopUp   */
/* For having cursor pointer on Course Hover */
#PreTest:hover {
    cursor: pointer;
}

.padding-box .message-pretest {
    color: #f5f5f5;
    display: block;
    margin-bottom: 20px;
    padding: 20px;
    background-color: #384047;
    font-size: 25px;
}

.externalIcon {
    background-position: right;
    background-repeat: no-repeat;
    background-image: url(../images/globe_2.png);
    background-position-x: 100%;
    background-position-y: 50%;
    padding-right: 14px;
}

.electronSpace-left {
    padding-left: 23px;
}

.electronSpace-right {
    padding-left: 14px;
}

a.disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: default;
}

.stemTableContent {
    padding-left: 60px;
}

.warningTextColor {
    color: red;
    font-size: 27px;
}

.timeTestContent {
    margin-top: 33px;
}

.normalModalBtn.timedBtn {
    margin: 0 7px 0;
    width: 590px;
    font-size: 27px;
}


/* Prep-Test styling start*/
.practiceTestSection {
    margin-bottom: 20px;
}
/*.scoresRanking{
    padding:20px;
}
.scoresRanking h6{
    font-size: 14px;
    line-height: inherit
}
.question-list .question li.choice > label{
    position: static;
}
.question-list .question{
    list-style-type: decimal;
    vertical-align: top;
    list-style-position: inside;
    font-weight: bold;
}
.question .choice-list .choice{
    font-weight:normal
}*/
/* Prep-Test styling end*/
/*#customTimer {
    width: 200px;
    height: 50px;
    background-color: #2B7896;
    border: 1px solid #2B7896;
    color: #fff;
    font-size: 13px;
    float: left;
}
#customTimerDiv {
    width: 67px;
    float: right;
    color: #fff;
    font-size: 1.2em;
    background-color: #2B7896;
}*/

.timerContainer {
    background-color: #fff;
    padding: 0px 10px;
    font-size: 15px;
    border: 5px solid #fff;
    display: inline-block;
    color: #666;
    border-radius: 20px;
    margin-left: 15px;
}

#customTimerDiv {
    display: inline-block;
    margin: 6px 5px 0 0;
}

#customTimer {
    display: inline-block;
    vertical-align: top;
    font-size: 75%;
}

.warningTimer {
    color: #fff;
    background-color: #f11;
}

    .warningTimer .countdown-row span {
        color: #fff !important;
    }

#labelForClock {
    color: #fff;
    background-color: #f11;
}

#sticky-anchor {
    clear: both;
}

.timerContainer.stick {
    margin-top: 0 !important;
    position: fixed;
    top: 0;
    left: 18%;
    z-index: 10000;
    border-radius: 0 0 0.5em 0.5em;
    background-color: #2d7e9d;
    border: 5px solid #2d7e9d;
    color: #fff;
}

    .timerContainer.stick span {
        color: #fff;
    }

    .timerContainer.stick.warningTimer {
        color: #fff;
        background-color: #f11;
    }

.field-validation-valid.custom-error.stick,
#labelForClock.custom-error.stick {
    position: fixed;
    top: 0;
    left: 34%;
    right: 10%;
    z-index: 999;
    border-radius: 0 0 0.5em 0.5em;
}

/********************** Media Query for different resolutions start *******************/
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-width : 768px) and (max-width : 1024px) {
    #dialog-modal {
        width: 90%;
    }

    .timerContainer.stick {
        left: 3%;
    }

    .field-validation-valid.custom-error.stick {
        left: 24%;
    }

    #dialog-modal .popupContainer .assessment .padding-box {
        height: 500px;
        overflow: auto;
    }
}

/* Desktops and laptops ----------- */
@media only screen and (min-width : 1200px) and (max-width : 1300px) {
    #dialog-modal {
        width: 75%;
    }

    .col-lg-5,
    .col-lg-7 {
        width: 100%;
    }

    .contentImage img {
        max-width: 100% !important;
    }

    .templateContainerCommon {
        width: auto !important;
    }

    .tempContquestion7 .dd_dropleftcolumn,
    .tempContquestion7 .dd_droprightcolumn,
    .tempContquestion7 .dd_droprightmostcolumn,
    .tempContquestion7 .interactiveBlock .typeGGM .dd_left,
    .tempContquestion7 .interactiveBlock .typeGGM .dragHolder {
        width: 31% !important;
    }

    .tempContquestion7 .interactiveBlock .typeGGM .topLeftMinus2,
    .tempContquestion7 .interactiveBlock .typeGGM .dd_dropContainer .dd_dropZone .dd_drags,
    .tempContquestion7 .interactiveBlock .typeGGM .dd_drags.ui-draggable-dragging,
    .tempContquestion7 .interactiveBlock .typeGGM .dd_dropContainer,
    .tempContquestion7 .interactiveBlock .typeGGM .dd_dragContainer,
    .tempContquestion6 .interactiveBlock .typeGGM .topLeftMinus2,
    .tempContquestion6 .interactiveBlock .typeGGM .dd_dropContainer .dd_dropZone .dd_drags,
    .tempContquestion6 .interactiveBlock .typeGGM .dd_drags.ui-draggable-dragging,
    .tempContquestion6 .interactiveBlock .typeGGM .dd_dropContainer,
    .tempContquestion6 .interactiveBlock .typeGGM .dd_dragContainer,
    .tempContquestion1 .interactiveBlock .typeGGM .topLeftMinus2,
    .tempContquestion1 .interactiveBlock .typeGGM .dd_dropContainer .dd_dropZone .dd_drags,
    .tempContquestion1 .interactiveBlock .typeGGM .dd_drags.ui-draggable-dragging,
    .tempContquestion1 .interactiveBlock .typeGGM .dd_dropContainer,
    .tempContquestion1 .interactiveBlock .typeGGM .dd_dragContainer {
        width: 100% !important;
    }

    .tempContquestion1 .stemFeedbackContainerWrapper,
    .tempContquestion6 .stemFeedbackContainerWrapper {
        width: 97.5% !important;
    }

    .tempContquestion7 .stemFeedbackContainerWrapper {
        width: 96% !important;
    }

    .tempContquestion6 .dd_dropleftcolumn,
    .tempContquestion6 .dd_droprightcolumn,
    .tempContquestion6 .dd_droprightmostcolumn,
    .tempContquestion6 .interactiveBlock .typeGGM .dd_left,
    .tempContquestion6 .interactiveBlock .typeGGM .dragHolder {
        width: 48% !important;
    }

    .tempContquestion1 .dd_dropleftcolumn,
    .tempContquestion1 .dd_droprightcolumn,
    .tempContquestion1 .dd_droprightmostcolumn,
    .tempContquestion1 .interactiveBlock .typeGGM .dd_left,
    .tempContquestion1 .interactiveBlock .typeGGM .dragHolder,
    .typeGGM .dd_textContainerBg .dd_textLeftColumn,
    .typeGGM .dd_textContainerBg .dd_textRightColumn {
        width: 48% !important;
    }

    .threeColGGM.typeGGM .dd_textContainerBg .dd_textLeftColumn,
    .threeColGGM.typeGGM .dd_textContainerBg .dd_textRightColumn {
        width: 33% !important;
    }

    .clickableDiv {
        padding: 6px 5px;
    }

    #dialog-modal .popupContainer .assessment .padding-box {
        height: 500px;
        overflow: auto;
    }
}

@media only screen and (min-width : 1200px) and (max-width : 1366px) {
    #dialog-modal .popupContainer .assessment .padding-box {
        height: 500px;
        overflow: auto;
    }
}

@media (min-width: 1300px) and (max-width : 1600px) {
    .col-lg-5,
    .col-lg-7 {
        width: 100%;
    }

    .contentImage img {
        max-width: 100% !important;
    }

    .templateContainerCommon {
        width: auto !important;
    }

    .tempContquestion7 .dd_dropleftcolumn,
    .tempContquestion7 .dd_droprightcolumn,
    .tempContquestion7 .dd_droprightmostcolumn,
    .tempContquestion7 .interactiveBlock .typeGGM .dd_left,
    .tempContquestion7 .interactiveBlock .typeGGM .dragHolder {
        width: 31.5% !important;
    }

    .tempContquestion7 .interactiveBlock .typeGGM .topLeftMinus2,
    .tempContquestion7 .interactiveBlock .typeGGM .dd_dropContainer .dd_dropZone .dd_drags,
    .tempContquestion7 .interactiveBlock .typeGGM .dd_dropContainer,
    .tempContquestion7 .interactiveBlock .typeGGM .dd_dragContainer {
        width: 100% !important;
    }

    .tempContquestion7 .stemFeedbackContainerWrapper {
        width: 97% !important;
    }
}

/* Large screens ----------- */
@media only screen and (min-width : 1600px) and (max-width : 1800px) {
    #dialog-modal {
        width: 55%;
    }
}

@media only screen and (min-width : 1824px) {
    #dialog-modal {
        width: 50%;
        top: 15% !important;
        min-height: 40%;
        max-height: 70%;
    }
}
/********************** Media Query for different resolutions end *******************/
.feedbackTable {
    width: 50%;
    border: 1px solid #60676d;
    border-spacing: 2px;
}

    .feedbackTable td, .feedbackTable th {
        border: 1px solid #60676d;
    }

.sessionwarning {
    font-size: 18px;
    color: #b7220b;
    margin-left: 135px;
}

.list-style-bulleted li {
    list-style-type: disc;
}

.line-hr {
    border-top: 1px solid #000;
}

.line-smallWidth-hr {
    border-top: 1px solid #000;
    width: 1100px;
}

@media(max-width: 1099px) {
    .line-smallWidth-hr {
        width: 100%;
    }
}

.text-center-color {
    color: #2f7e9d;
    font-size: 30px;
    text-align: center;
}

.text-center-color-Laboratory-Safety {
    color: #2f7e9d;
    font-size: 30px;
    text-align: center;
}

.GlossaryTable {
    border: 1px solid black;
    margin-bottom: 30px;
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
    background-color: transparent;
}

.GlossaryTh {
    border: 1px solid black;
    background-color: #2d7e9d;
    color: #f5f5f5;
    font-weight: normal;
    display: table-cell;
    vertical-align: inherit;
    text-align: center;
    border: solid 2px #f5f5f5;
    padding: 10px;
    text-align: center;
}

.GlossaryTd {
    border: 1px solid black;
    border: solid 2px #f5f5f5;
    padding: 10px;
    text-align: center;
    display: table-cell;
    vertical-align: inherit;
}

.GlossaryTdNoBorder {
    border: none;
    text-align: center;
}

.GlossaryTableHead {
    box-sizing: border-box;
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit;
}

.Main-Schedule {
    text-align: center;
    padding: 42px;
}

.BackBtnSchedule {
    padding: 56px;
}

.vr-block {
    width: 500px;
}

.vr-appIcon, .vr-storeIcon {
    display: inline-block;
    vertical-align: top
}

    .vr-appIcon > img {
        border-radius: 20%;
    }
    
.storeApp-btn {
    padding: 12px 10px 0px;
}


.validationMessage {
    color: red;
    font-size: 15px;
    display: none;
}

#session-timeout-dialog {
    z-index: 999999;
}

.prep-italic {
    font-style: italic;
    display: inline-block !important;
    margin-bottom: 0px !important;
}


.interaction-wrapper {
    width: 788px;
    height: 638px;
    display: block;
    position: relative;
    margin: 0 auto;
}

.drop-container {
    background-repeat: no-repeat;
    width: 278px;
    height: 100%;
    display: block;
    background-size: 100%;
    position: relative;
    background-color: gray;
}

.labelDrag {
    position: absolute;
    font-size: 14px;
}

.Desection-Drag-Drop-Template {
    display: block;
    height: 100%;
    width: 100%;
    background-color: ghostwhite;
}

.draggable {
    display: block;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    transform: scale(0.8, 0.8);
}

/*Microscope - Start*/
.interaction-wrapper1 {
    width: 820px;
    height: 480px;
    display: block;
    position: relative;
    margin: 0 auto;
    padding-top: 6px;
    border-radius: 10px;
}

.microscope-container {
    height: 307px;
    border-radius: 10px;
}

.MicroscopeDrag-container {
    height: 140px;
    width: 95%;
    background-color: #e4e4e4;
    margin-top: 10px;
    border-radius: 10px;
    border: 2px solid;
    border-color: #dad9d9;
}

.view-area {
    height: 307px;
    width: 90%;
    border-radius: 10px;
}

.drag-img1 {
    border-radius: 10px;
}

.small-dropArea {
    height: 80px;
    width: 94px;
    position: absolute;
    top: 180px;
    left: 138px;
}

.header-container-bg {
    background-color: #f9f9f9;
}



    .header-container-bg .img1 {
        padding: 12px 11px;
        width: 90px;
        border-right: 2px solid #e2e2e2;
        border-left: 2px solid #e2e2e2;
        background-color: white;
        margin-left: 30px;
    }

    .header-container-bg .img2 {
        width: 60px;
        margin-left: 25px;
        margin-top: 15px;
    }

    .header-container-bg ul li:nth-child(2) {
        padding: 13px 10px;
        margin: 0px 10px;
    }

        .header-container-bg ul li:nth-child(2) label {
            margin: 0px;
            font-size: 15px;
        }

.navbar-defaultnew {
    background-color: #f9f9f9;
    /* border-color: #4d4086; */
}

.header-container-bg .navbar-nav > li > a, .header-container-bg .navbar-nav > li > a .head-logout {
    color: #4d4086;
    font-weight: bold;
    font-size: 15px;
}

.navbarnew {
    margin-bottom: 0px !important;
    min-height: 47px;
}

.header-container-bg .navbar-nav > li > span {
    padding-top: 13px;
    padding-bottom: 0px;
    cursor: default;
    padding-right: 15px;
}

    

/*Microscope - End */