.chips-container {
    font-family: 'Open Sans';
    font-weight: 400;
    font-size: 16px;
    color: #555555;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0;
    padding: 10px 0;
}

.chips {
    display: inline-flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #9EA7AC;
    border-radius: 4px;
    height: 32px;
    margin-bottom: 10px;
    max-width: 100%;
    box-sizing: border-box;
}

.chips-content {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 10px;
}

.chips-actions {
    display: flex;
    flex-wrap: nowrap;
    padding: 0 10px;
    align-items: center;
}

.chips-action {
    text-align: center;
    color: #333333;
    width: 24px;
    height: 24px;
    border: none;
    background: none;
    font-size: inherit;
}

.playerWrapper {
    overflow: hidden;
    width: calc(100% - 5px);
    margin: -5px;
    padding: 5px;
}

.group_sourcematerial {
    cursor: pointer;
    max-width: 100%;
    display: inline-block;
    white-space: nowrap;
}

    .group_sourcematerial > a > div > p {
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    .group_sourcematerial > a > div {
        display: inline-block;
        max-width: 94%;
    }

    .group_sourcematerial p {
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
        white-space: normal;
    }

.group_media.clickable {
    cursor: pointer;
}

.initially-hidden-math, .initially-hidden-table {
    visibility: hidden;
}


/* ----------------------------------------------------------------
Introduction Page Styles
MCQ Page styles
MRQ Page styles
Either/Or Page styles
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
Rules for right-aligned layouts when a media item is added
-----------------------------------------------------------------*/

/* Set the width and position of the intro text and any added media */
.right-aligned-layout .question {
    float: left;
}

/*fix for full-width upload container*/
.right-aligned-layout.file-attach .question {
    float: none;
}

.right-aligned-layout.information-page .question,
.right-aligned-layout.page .question {
    width: 63.66666%;
}

.right-aligned-layout.shortanswer .question,
.right-aligned-layout.numeric-entry .question,
.right-aligned-layout.mcq .question,
.right-aligned-layout.mrq .question,
.right-aligned-layout.either-or .question,
.right-aligned-layout.essay .question,
.right-aligned-layout.file-attach .question,
.right-aligned-layout.voice-capture .question,
.right-aligned-layout.select-from-list .question {
    width: 100%;
    margin-right: 3%;
}

/* FF fix*/
.right-aligned-layout.shortanswer .answer-options-flex-container,
.right-aligned-layout.numeric-entry .answer-options-flex-container,
.right-aligned-layout.page .answer-options-flex-container,
.right-aligned-layout.mcq .answer-options-flex-container,
.right-aligned-layout.mrq .answer-options-flex-container,
.right-aligned-layout.information-page .answer-options-flex-container,
.right-aligned-layout.either-or .answer-options-flex-container,
.right-aligned-layout.essay .answer-options-flex-container,
.right-aligned-layout.file-attach .answer-options-flex-container,
.right-aligned-layout.voice-capture .answer-options-flex-container,
.right-aligned-layout.select-from-list .answer-options-flex-container {
    width: 66.66666%;
}

/* Set the width and position of the media item and tidy up the layout - if the width of added media is less than 33.33333% it will be centred on the width of its parent */
.right-aligned-layout.shortanswer .media,
.right-aligned-layout.numeric-entry .media,
.right-aligned-layout.page .media,
.right-aligned-layout.mcq .media,
.right-aligned-layout.mrq .media,
.right-aligned-layout.information-page .media,
.right-aligned-layout.either-or .media,
.right-aligned-layout.essay .media,
.right-aligned-layout.file-attach .media,
.right-aligned-layout.voice-capture .media,
.right-aligned-layout.select-from-list .media {
    text-align: center;
    width: 33.33333%;
    float: right;
    padding-bottom: 10px;
    position: relative;
}

.right-aligned-layout.page .media {
    margin-top: 10px;
}

.right-aligned-layout.shortanswer .media,
.right-aligned-layout.numeric-entry .media,
.right-aligned-layout.mcq .media,
.right-aligned-layout.mrq .media,
.right-aligned-layout.either-or .media,
.right-aligned-layout.essay .media,
.right-aligned-layout.file-attach .media,
.right-aligned-layout.voice-capture .media,
.right-aligned-layout.select-from-list .media {
    margin-top: 20px;
}

    /* Set the width of the media item and add some more padding */
    .right-aligned-layout.shortanswer .media img.media-img,
    .right-aligned-layout.numeric-entry .media img.media-img,
    .right-aligned-layout.page .media img.media-img,
    .right-aligned-layout.mcq .media img.media-img,
    .right-aligned-layout.mrq .media img.media-img,
    .right-aligned-layout.information-page .media img.media-img,
    .right-aligned-layout.either-or .media img.media-img,
    .right-aligned-layout.essay .media img.media-img,
    .right-aligned-layout.file-attach .media img.media-img,
    .right-aligned-layout.voice-capture .media img.media-img,
    .right-aligned-layout.select-from-list .media img.media-img {
        max-width: 100%;
        padding-bottom: 10px;
    }

/* Clear the float after the media item */
.right-aligned-layout.page .answer,
.right-aligned-layout.information-page .answer {
    clear: both;
    padding-top: 20px;
}

.right-aligned-layout.shortanswer .answer,
.right-aligned-layout.numeric-entry .answer,
.right-aligned-layout.mcq .answer,
.right-aligned-layout.mrq .answer,
.right-aligned-layout.either-or .answer,
.right-aligned-layout.essay .answer,
.right-aligned-layout.file-attach .answer,
.right-aligned-layout.voice-capture .answer,
.right-aligned-layout.select-from-list .answer {
    float: left;
    width: 66.66666%;
}

/* ----------------------------------------------------------------
Rules for left-aligned layouts when a media item is added
-----------------------------------------------------------------*/

/* Set the width and position of the intro text and any added media */

.question {
    margin-left: -5px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

.question .introduction-text {
    flex-basis: 100%;
}

.question > div {
    margin-left: 5px;
}

.question > div:not(.introduction-text) {
    margin-left: 0;
    padding-left: 5px;
    overflow: auto;
}

.question > .main-content-wrapper {
    width: 100%;
    box-sizing: border-box;
}

.question.horizontal-source-material {
    flex-direction: row;
}

.question.horizontal-source-material .main-content-wrapper .main-content {
    display: flex;
    flex-wrap: wrap;
}

.question.horizontal-source-material .main-content-wrapper .main-content > div:not(.introduction-text) {
    padding-left: 5px;
}

.question.horizontal-source-material .source-link:first-child {
    padding-left: 5px;
}

.main-content-wrapper {
    display: flex;
    flex-direction: row;
}

    .main-content-wrapper .main-content {
        flex: 1 1 auto;
        overflow: hidden;
    }

    .main-content-wrapper .assistive-media {
        flex: 0 0 auto;
        width: 42px;
        text-align: left;
        padding-top: 8px;
        padding-right: 1px;
        padding-left: 4px;
        box-sizing: border-box;
    }

.left-aligned-layout.page .question,
.left-aligned-layout.information-page .question {
    float: right;
    width: 63.66666%;
    padding-left: 3%
}

.left-aligned-layout.shortanswer .question,
.left-aligned-layout.numeric-entry .question,
.left-aligned-layout.mcq .question,
.left-aligned-layout.mrq .question,
.left-aligned-layout.either-or .question,
.left-aligned-layout.essay .question,
.left-aligned-layout.file-attach .question,
.left-aligned-layout.voice-capture .question,
.left-aligned-layout.select-from-list .question {
    width: 100%;
    margin-right: 3%;
}

/* Set the width and position of the media item and tidy up the layout - if the width of added media is less than 33.33333% it will be centred on the width of its parent */
.left-aligned-layout.shortanswer .media,
.left-aligned-layout.numeric-entry .media,
.left-aligned-layout.page .media,
.left-aligned-layout.mcq .media,
.left-aligned-layout.mrq .media,
.left-aligned-layout.information-page .media,
.left-aligned-layout.either-or .media,
.left-aligned-layout.essay .media,
.left-aligned-layout.file-attach .media,
.left-aligned-layout.voice-capture .media,
.left-aligned-layout.select-from-list .media{
    text-align: center;
    width: 33.33333%;
    float: left;
    padding-bottom: 10px;
}

.left-aligned-layout.page .media,
.left-aligned-layout.information-page .media {
    margin-top: 10px;
}

.left-aligned-layout.shortanswer .media,
.left-aligned-layout.numeric-entry .media,
.left-aligned-layout.mcq .media,
.left-aligned-layout.mrq .media,
.left-aligned-layout.either-or .media,
.left-aligned-layout.essay .media,
.left-aligned-layout.file-attach .media,
.left-aligned-layout.voice-capture .media,
.left-aligned-layout.select-from-list .media {
    margin-top: 20px;
}

.left-aligned-layout.file-attach .media {
    margin-right: 10px;
}

    /* Set the width of the media item and add some more padding */
    .left-aligned-layout.shortanswer .media img.media-img,
    .left-aligned-layout.numeric-entry .media img.media-img,
    .left-aligned-layout.page .media img.media-img,
    .left-aligned-layout.mcq .media img.media-img,
    .left-aligned-layout.mrq .media img.media-img,
    .left-aligned-layout.information-page .media img.media-img,
    .left-aligned-layout.either-or .media img.media-img,
    .left-aligned-layout.essay .media img.media-img,
    .left-aligned-layout.file-attach .media img.media-img,
    .left-aligned-layout.voice-capture .media img.media-img,
    .left-aligned-layout.select-from-list .media img.media-img {
        max-width: 100%;
        padding-bottom: 10px;
    }


/* Clear the float after the media item */
.left-aligned-layout.shortanswer .answer,
.left-aligned-layout.numeric-entry .answer,
.left-aligned-layout.page .answer,
.left-aligned-layout.mcq .answer,
.left-aligned-layout.mrq .answer,
.left-aligned-layout.information-page .answer,
.left-aligned-layout.either-or .answer,
.left-aligned-layout.essay .answer,
.left-aligned-layout.file-attach .answer,
.left-aligned-layout.voice-capture .answer,
.left-aligned-layout.select-from-list .answer {
    clear: both;
    padding-top: 20px;
}

.page .introduction-text,
.information-page .introduction-text {
    padding: 10px 0 10px 0;
}

/*To support F4249 in old items*/
.mcq .answer-options > form > div,
.mrq .answer-options > form > div,
.either-or .answer-options > form > div,
/*To fix DE40185 in older items, where options have a fieldset parent.*/
.mcq .answer-options > form > fieldset > div,
.mrq .answer-options > form > fieldset > div,
.either-or .answer-options > form > fieldset > div {
    position: relative;
}
/*end*/

.shortanswer .introduction-text,
.numeric-entry .introduction-text,
.mcq .introduction-text,
.mrq .introduction-text,
.extended-matching .introduction-text,
.information-page .introduction-text,
.either-or .introduction-text,
.essay .introduction-text,
.file-attach .introduction-text,
.likert .introduction-text,
.hotspot .introduction-text,
.voice-capture .introduction-text,
.select-from-list .introduction-text {
    padding: 10px;
}

    .shortanswer .introduction-text.background,
    .numeric-entry .introduction-text.background,
    .mcq .introduction-text.background,
    .mrq .introduction-text.background,
    .extended-matching .introduction-text.background,
    .information-page .introduction-text.background,
    .either-or .introduction-text.background,
    .essay .introduction-text.background,
    .file-attach .introduction-text.background,
    .likert .introduction-text.background,
    .hotspot .introduction-text.background,
    .voice-capture .introduction-text.background,
    .select-from-list .introduction-text.background {
        background-color: #F5F7F8;
    }

    .shortanswer .introduction-text p,
    .numeric-entry .introduction-text p,
    .page .introduction-text p,
    .information-page .introduction-text p,
    .mcq .introduction-text p,
    .mrq .introduction-text p,
    .either-or .introduction-text p,
    .essay .introduction-text p,
    .file-attach .introduction-text p,
    .likert .introduction-text p,
    .voice-capture .introduction-text p,
    .hotspot .introduction-text p,
    .select-from-list .introduction-text p {
        margin: 0 0 10px;
    }

/* ----------------------------------------------------------------
Rules for standard layouts
-----------------------------------------------------------------*/

/* Add some space above the additional information */
.full-width-layout.shortanswer .answer,
.full-width-layout.numeric-entry .answer,
.full-width-layout.page .answer,
.full-width-layout.information-page .answer,
.full-width-layout.mcq .answer,
.full-width-layout.mrq .answer,
.full-width-layout.either-or .answer,
.full-width-layout.essay .answer,
.full-width-layout.file-attach .answer,
.full-width-layout.voice-capture .answer,
.full-width-layout.select-from-list .answer {
    padding-top: 20px;
}

.full-width-layout.shortanswer .media,
.full-width-layout.numeric-entry .media,
.full-width-layout.page .media,
.full-width-layout.information-page .media,
.full-width-layout.mcq .media,
.full-width-layout.mrq .media,
.full-width-layout.either-or .media,
.full-width-layout.essay .media,
.full-width-layout.file-attach .media,
.full-width-layout.voice-capture .media,
.full-width-layout.extended-matching .media,
.full-width-layout.hotspot .media,
.full-width-layout.select-from-list .media {
    margin-top: 20px;
    margin-bottom: 20px;
}

.full-width-layout.drag-and-drop .media {
    margin-bottom: 20px;
}

.full-width-layout.shortanswer.media-top .media,
.full-width-layout.numeric-entry.media-top .media,
.full-width-layout.page.media-top .media,
.full-width-layout.information-page.media-top .media,
.full-width-layout.mcq.media-top .media,
.full-width-layout.mrq.media-top .media,
.full-width-layout.either-or.media-top .media,
.full-width-layout.essay.media-top .media,
.full-width-layout.file-attach.media-top .media,
.full-width-layout.voice-capture.media-top .media,
.full-width-layout.extended-matching.media-top .media,
.full-width-layout.hotspot.media-top .media,
.full-width-layout.select-from-list.media-top .media {
    margin-top: 20px;
}


/* Set the width of the media item and add some more padding */
.full-width-layout.shortanswer .media img.media-img,
.full-width-layout.numeric-entry .media img.media-img,
.full-width-layout.page .media img.media-img,
.full-width-layout.information-page .media img.media-img,
.full-width-layout.mcq .media img.media-img,
.full-width-layout.mrq .media img.media-img,
.full-width-layout.either-or .media img.media-img,
.full-width-layout.essay .media img.media-img,
.full-width-layout.file-attach .media img.media-img,
.full-width-layout.voice-capture .media img.media-img,
.full-width-layout.select-from-list .media img.media-img {
    max-width: 100%;
    padding-bottom: 10px;
    display: block;
}

.source-link {
    margin: 10px 0 0;
}

    .source-link .media-link {
        outline: 0;
    }

        .source-link .media-link img {
            float: left;
        }

.page, .mcq, .either-or, .essay, .numeric-entry, .mrq, .shortanswer, .information-page, .file-attach, .likert, .voice-capture, .select-from-list {
    overflow: hidden;
    word-wrap: break-word;
    margin-left: -5px;
    margin-top: -5px;
    padding: 5px;
}

.source-link > div {
    position: absolute;
    display: inline-block;
}

.source-link p {
    position: relative;
    margin: 0;
}

.sourcematerial-button {
    display: flex;
    min-height: 24px;
    background-color: transparent;
    background-repeat: no-repeat;
    border: none;
    outline: none;
    padding-left: 0;
    padding-top: 0;
    overflow: visible;
    margin: 0 5px 5px 0;
    padding-right: 0;
}

    .sourcematerial-button .icon-container + div {
        display: inline-block;
        margin-left: 8px;
        line-height: 24px;
    }

    .sourcematerial-button:focus {
        box-shadow: 0 0 5px 2px #2B9ED8;
        outline: none;
    }

/* MCQ, Either/Or, MRQ */


/* Generic form styles */
.numeric-entry legend, .shortanswer legend, .mcq legend, .either-or legend, .essay legend, .mrq legend, .file-attach legend, .voice-capture legend, .select-from-list legend {
    display: none;
}
/* Radio button styles for multiple choice questions */


.mcq input[type=checkbox],
.either-or input[type=checkbox],
.mrq input[type=checkbox] {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: calc(100% - 75px);
    height: calc(100% - 10px);
    z-index: -1;
}

.option-wrapper {
    position: relative;
}

    .option-wrapper.option-with-labels input[type=checkbox] {
        left: 40px;
    }

.answer-options .option-wrapper.option-with-labels input[type=checkbox] + label .option-content-container {
    margin-left: 10px;
}

.mcq form input[type=checkbox],
.either-or form input[type=checkbox],
.mrq form input[type=checkbox] {
    margin: 0;
}

    .mcq form input[type=checkbox] + label,
    .either-or form input[type=checkbox] + label,
    .mrq form input[type=checkbox] + label,
    .mrq form label.option,
    .mrq form .answer-option + label.option,
    .mrq form .option-yes-no + .option,
    .mcq form .feedback,
    .mrq form .feedback {
        font-family: Arial, Helvetica, sans-serif;
        font-weight: 300;
        color: #333;
        font-size: 16px;
        padding: 5px 0;
        overflow: auto;
        margin: 0 0 5px;
        outline: 0;
    }

.mcq input[type=checkbox] + label span:first-child,
.either-or input[type=checkbox] + label span:first-child,
.mrq input[type=checkbox] + label span:first-child {
    margin-top: 0;
    white-space: normal;
}

.mcq input[type=checkbox] + label .option-label,
.either-or input[type=checkbox] + label .option-label,
.mrq input[type=checkbox] + label .option-label {
    float: left;
    padding-top: 8px;
}

    .mcq input[type=checkbox] + label .option-label p,
    .either-or input[type=checkbox] + label .option-label p,
    .mrq input[type=checkbox] + label .option-label p {
        margin: 0;
        word-wrap: normal;
    }

.mcq input[type=checkbox] + label .option-content-container,
.either-or input[type=checkbox] + label .option-content-container,
.mrq input[type=checkbox] + label .option-content-container {
    margin: 0;
    border: 3px solid #3D505A;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
    min-height: 44px;
    float: left;
    width: calc(100% - 6px);
    box-sizing: content-box;
    overflow: hidden;
    word-wrap: break-word;
}

.answer-options .answer-column {
    margin: 10px;
    float: left;
    overflow: hidden;
}

    .answer-options .answer-column img {
        pointer-events: none;
    }

    .answer-options.all-images.two-columns .answer-column img {
        height: 100%;
        max-width: 100%;
        max-height: 200px;
    }

.mcq input[type=checkbox] + label .option-content-container p,
.either-or input[type=checkbox] + label .option-content-container p,
.mrq input[type=checkbox] + label .option-content-container p {
    margin: 0;
}

.shortanswer form label:hover .option-content-container,
.numeric-entry form label:hover .option-content-container,
.mcq form input:not([disabled]) + label:hover .option-content-container,
.either-or form input:not([disabled]) + label:hover .option-content-container,
.essay form label:hover .option-content-container,
.mrq form input:not([disabled]) + label:hover .option-content-container,
.file-attach form label:hover .option-content-container,
.voice-capture form label:hover .option-content-container,
.select-from-list form label:hover .option-content-container {
    border: 3px solid #eab326;
    cursor: pointer;
    cursor: hand;
    background-image: none;
}

.mcq form input[type=checkbox]:checked + label .option-content-container,
.either-or form input[type=checkbox]:checked + label .option-content-container,
.mrq form input[type=checkbox]:checked + label .option-content-container {
    background-image: none;
    background: #f1d176;
    outline: 2px solid #fff;
    outline-offset: -4px;
    border: 3px solid #eab326;
    cursor: pointer;
    cursor: hand;
}

/* Hide outline in Internet Explorer as outline-offset is not supported */
_:-ms-fullscreen, :root .mcq form input[type=checkbox]:checked + label .option-content-container,
_:-ms-fullscreen, :root .either-or form input[type=checkbox]:checked + label .option-content-container,
_:-ms-fullscreen, :root .mrq form input[type=checkbox]:checked + label .option-content-container {
    outline: none;
}

.mcq form input[type=checkbox]:focus + label .option-content-container,
.either-or form input[type=checkbox]:focus + label .option-content-container,
.mrq form input[type=checkbox]:focus + label .option-content-container {
    border: 3px solid #eab326;
}

.option-with-image {
    font: 0/0 a; /* Hide the characters like spaces */
    text-align: center; /* Align center inline elements */
}

.content-align-left {
    text-align: left !important;
}

.content-align-center {
    text-align: center !important;
}

.content-align-right {
    text-align: right !important;
}

.option-with-image:before { /* create a full-height inline block pseudo-element */
    content: ' ';
    display: inline-block;
    vertical-align: middle; /* vertical alignment of the inline element */
}

.option-with-image > img {
    vertical-align: middle;
    pointer-events: none;
    display: inline-block;
}

.question:focus, .introduction-text {
    outline: none;
}

.question .option-with-image {
    text-align: left;
}

.question div.introduction-text > label {
    font-weight: 300;
    color: #000;
    font-size: 16px;
}

.question .introduction-text .table-wrapper {
    padding: 0 10px;
    background: none;
}

/* Depending on the layout type attribute we set the style position of the 'item label' in relation to the 'answer options' within the form label */

.numeric-entry #media-item img, .shortanswer #media-item img, .mcq #media-item img,
.either-or #media-item img, .essay #media-item img, .mrq #media-item img,
.file-attach #media-item img, .voice-capture #media-item img, .select-from-list #media-item img {
    max-width: 100%;
    padding-bottom: 10px;
}

.right-aligned-layout.shortanswer .answer-options,
.right-aligned-layout.numeric-entry .answer-options,
.right-aligned-layout.mcq .answer-options,
.right-aligned-layout.mrq .answer-options,
.right-aligned-layout.either-or .answer-options,
.right-aligned-layout.essay .answer-options,
.right-aligned-layout.file-attach .answer-options,
.right-aligned-layout.voice-capture .answer-options,
.right-aligned-layout.select-from-list .answer-options {
    width: 66%;
    float: left;
}

.left-aligned-layout.shortanswer .answer-options,
.left-aligned-layout.numeric-entry .answer-options,
.left-aligned-layout.mcq .answer-options,
.left-aligned-layout.mrq .answer-options,
.left-aligned-layout.essay .answer-options,
.left-aligned-layout.either-or .answer-options,
.left-aligned-layout.file-attach .answer-options,
.left-aligned-layout.voice-capture .answer-options,
.left-aligned-layout.select-from-list .answer-options {
    width: 66%;
    float: right;
}

.left-aligned-layout.mcq input[type=checkbox] + label .option-content-container,
.left-aligned-layout.either-or input[type=checkbox] + label .option-content-container,
.left-aligned-layout.mrq input[type=checkbox] + label .option-content-container {
    float: right;
}

.left-aligned-layout.mcq input[type=checkbox] + label .option-label > div,
.left-aligned-layout.either-or input[type=checkbox] + label .option-label > div,
.left-aligned-layout.mrq input[type=checkbox] + label .option-label > div {
    float: right;
}


/* Table generic styles for Multiple Choice Questions/ Either/Or /Multiple Response Questions */
.numeric-entry table.html-table, .shortanswer table.html-table, .mcq table.html-table,
.either-or table.html-table, .essay table.html-table, .mrq table.html-table, .file-attach table.html-table
.voice-capture table.html-table {
    border-collapse: collapse;
    border-style: solid;
    border-width: 1px;
    text-align: center;
    background: #fff;
}

    .shortanswer table.html-table thead th, .shortanswer table.html-table tbody td,
    .numeric-entry table.html-table thead th, .numeric-entry table.html-table tbody td,
    .mcq table.html-table thead th, .mcq table.html-table tbody td,
    .either-or table.html-table thead th, .either-or table.html-table tbody td,
    .essay table.html-table thead th, .essay table.html-table tbody td,
    .mrq table.html-table thead th, .mrq table.html-table tbody td,
    .file-attach table.html-table thead th, .file-attach table.html-table tbody td,
    .voice-capture table.html-table thead th, .voice-capture table.html-table tbody td {
        padding: 5px;
        border-style: solid;
        border-width: 1px;
        vertical-align: top;
    }

.mcq form .no-label, .either-or form .no-label,
.essay form .no-label,
.mrq form .no-label {
    margin-left: 0;
}

.shortanswer form .no-label,
.numeric-entry form .no-label,
.mcq form .no-label, .either-or form .no-label,
.essay form .no-label,
.mrq form .no-label {
    margin-left: 0;
}

.media-element {
    padding-bottom: 10px;
}

img.audio {
    cursor: pointer;
}

.popup-btn:active span,
.popup-btn:focus span {
    position: relative;
}


/* Just declare the body rules for the prototype */
body {
    overflow: auto; /* this overflow has auto value to work properly in CA */
    margin: 0;
    padding: 0;
}
/* Content Area */
.preview-content-area {
    /* This should inherits from body. Body will take the properties from subject settings*/
    /*font-family: Arial, Helvetica, sans-serif;*/
    font-weight: 300;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    background: #fff;
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/*IE11 hidden scroll fix*/
.html-generator > .preview-content-area {
    overflow-y: hidden;
}

.preview-content-holder {
    /* This should inherits from body. Body will take the properties from subject settings*/
    /*font-size: 16px;*/
    color: #000;
    padding: 10px;
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}

    .preview-content-holder a:not(.chips-action) {
        color: #00e;
    }

/* Generic Question Styles */
.question-component, .table-component {
    padding: 10px;
    background: #F5F7F8
}
/* Media and popups */
.media-link {
    text-decoration: none;
}

    .media-link img {
        padding-right: 6px;
    }

button.popup-btn {
    font-family: Arial, Helvetica, sans-serif;
    color: #fff;
    width: 100%;
    background-color: #3D505A;
    padding: 5px 10px;
    display: block;
    border-radius: 4px;
    border: none;
    word-break: normal;
}

/* Generic form styles */
legend {
    display: none;
}
/* Radio button styles for mcq, either/or, mrq */
.mcq form input[type='radio'] + label,
.either-or form input[type='radio'] + label,
.mrq form input[type='radio'] + label {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 300;
    color: #333;
    font-size: 16px;
}

.mcq form input[type=radio],
.either-or form input[type=radio],
.mrq form input[type=radio] {
    display: none;
    margin: 0px;
}

.mcq input[type=radio] + label span,
.either-or input[type=radio] + label span,
.mrq input[type=radio] + label span {
    float: left;
    padding: 0px;
    margin-top: -5px
}

.mcq input[type=radio] + label,
.either-or input[type=radio] + label,
.mrq input[type=radio] + label {
    display: block;
    margin: 0px;
    padding: 5px;
    background: #fff;
    border: 3px solid #3D505A;
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
}

.mcq form input[type=radio]:hover + label,
.either-or form input[type=radio]:hover + label,
.mrq form input[type=radio]:hover + label {
    border: 3px solid #eab326;
    cursor: pointer;
    cursor: hand;
    background-image: none
}

.mcq form input[type=radio]:checked + label,
.either-or form input[type=radio]:checked + label,
.mrq form input[type=radio]:checked + label {
    background-image: none;
    background: #f1d176;
    outline: 2px solid #fff;
    outline-offset: -4px;
    border: 3px solid #eab326;
    cursor: pointer;
    cursor: hand;
}

/* Depending on the layout type attribute we set the style position of the 'item label' in relation to the 'answer options' within the form label */
.full-width-layout.mcq input[type=radio] + label span:nth-child(2),
.right-aligned-layout.mcq input[type=radio] + label span:nth-child(2),
.full-width-layout.mrq input[type=radio] + label span:nth-child(2),
.right-aligned-layout.mrq input[type=radio] + label span:nth-child(2),
.full-width-layout.either-or input[type=radio] + label span:nth-child(2),
.right-aligned-layout.either-or input[type=radio] + label span:nth-child(2) {
    width: 100%;
    margin-left: 0px;
    padding: 5px 0px 0px 0px;
    height: 100%;
    overflow-y: scroll;
}

.full-width-layout.mcq input[type=radio] + label span,
.full-width-layout.either-or input[type=radio] + label span,
.full-width-layout.mrq input[type=radio] + label span {
    width: 5%;
    margin-left: -5%;
}

.right-aligned-layout.mcq input[type=radio] + label span,
.right-aligned-layout.either-or input[type=radio] + label span,
.right-aligned-layout.mrq input[type=radio] + label span {
    width: 7.5%;
    margin-left: -7.5%;
}

/* To get rid of scroll bars. Will be changed to targeting via component class, e.g.
    .mcq p { margin: 0; }
*/
/*p {
    margin: 0 !important;
}*/

.table-wrapper {
    background: #F5F7F8;
    padding: 10px 20px;
}

.answer-options {
    margin-top: 20px;
}

    .answer-options.all-images form {
        display: flex;
        flex-wrap: wrap;
    }

    .answer-options.all-images.two-columns form {
        flex-direction: column;
        flex-wrap: nowrap;
    }

    .answer-options.all-images .option-wrapper {
        margin: 5px 10px;
    }

        .answer-options.all-images .option-wrapper > label {
            margin: 0;
        }

    /*autoscale img proportionally*/

    .answer-options.all-images form > fieldset > div > label > div > img {
        width: auto;
        height: auto;
        max-width: inherit;
        max-height: inherit;
    }


    .answer-options.chk-enabled form input[type=checkbox] + label {
        margin: 0 0 5px 0px !important;
    }

    .answer-options.chk-enabled form input[type=checkbox] {
        width: 1px;
        height: 1px;
        padding: 0;
        border: 0;
        margin: -1px;
        clip: rect(0,0,0,0);
        overflow: hidden;
        position: absolute;
    }

    .answer-options.chk-enabled form [type="checkbox"] + label .option-content-container {
        width: calc(100% - 51px);
        margin-right: 5px;
    }

    .answer-options .option-wrapper.option-with-labels input[type=checkbox] + label .option-content-container {
        margin-left: 15px;
        width: calc(100% - 60px);
    }

    .answer-options.chk-enabled .option-wrapper.option-with-labels input[type=checkbox] + label .option-content-container {
        width: calc(100% - 95px);
    }

    .answer-options.chk-enabled form [type="checkbox"]:not(:checked) + label:before, .answer-options.chk-enabled form [type="checkbox"]:checked + label:before {
        content: '';
        position: relative;
        float: left;
        width: 18px;
        height: 18px;
        border-radius: 4px;
        margin-right: 10px;
        margin-top: 10px;
        margin-left: 5px;
    }

    .answer-options.chk-enabled form [type="checkbox"]:not(:checked) + label:after, .answer-options.chk-enabled form [type="checkbox"]:checked + label:after {
        content: '';
        position: absolute;
        top: 8px;
        margin-top: 10px;
        left: 7px;
        width: 4px;
        height: 10px;
        margin-left: 5px;
    }

    .answer-options.chk-enabled form [type="checkbox"]:not(:checked) + label:after {
        opacity: 0;
        transform: scale(0);
    }

    .answer-options.chk-enabled form [type="checkbox"]:checked + label:after {
        opacity: 1;
        transform: scale(1);
        transform: rotate(45deg);
    }
    /*Colours*/
    .answer-options.chk-enabled form [type="checkbox"]:not(:checked) + label:before, .answer-options.chk-enabled form [type="checkbox"]:checked + label:before {
        border: 2px solid;
    }

    .answer-options.chk-enabled form [type="checkbox"]:not(:checked) + label:after, .answer-options.chk-enabled form [type="checkbox"]:checked + label:after {
        border: solid;
        border-color: inherit;
        border-width: 0 4px 4px 0;
    }

    .answer-options.chk-enabled form [type="checkbox"]:focus + label:before {
        box-shadow: inset 0 0 0 1px #3d505a, 0 0 3px 1px rgba(0, 123, 255, 0.75);
    }

    .answer-options.chk-enabled form [type="checkbox"]:focus + label .option-content-container {
        box-shadow: inset 0 0 0 0, 0 0 3px 1px rgba(0, 123, 255, 0.75);
    }

    /*Removes the cropping at the top of the answer options*/
    .answer-options.chk-enabled .answer-column {
        padding-top: 4px;
        line-height: 110%;
    }

    .answer-options.chk-enabled .mcq input[type=checkbox] + label .option-content-container,
    .answer-options.chk-enabled .either-or input[type=checkbox] + label .option-content-container,
    .answer-options.chk-enabled .mrq input[type=checkbox] + label .option-content-container {
        width: calc(100% - 80px);
    }

.cannotplay {
    width: 100%;
    height: 240px;
    background: #313F48 url('video-placeholder.png') no-repeat center center;
    background-size: 15%;
    position: relative;
}

    .cannotplay > div {
        color: #fff;
        font-size: 14px;
        position: absolute;
        bottom: 0;
        width: 100%;
        text-align: center;
    }

.full-width-layout .media .cannotplay {
    max-width: 400px;
}

.text-right-to-left {
    direction: rtl;
}

.essay-textarea {
    border: 3px solid #9ea7ac;
    box-sizing: border-box;
    width: 100%;
    color: black;
    resize: none;
}

.essay-with-message-placeholder {
    margin-bottom: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
}

.essay-form-with-message-placeholder,
.essay-form-with-alert-placeholder {
    position: relative;
}

    .essay-form-with-alert-placeholder .essay-textarea {
        margin-bottom: 0;
    }

.essay-word-count-area {
    width: calc(100% - 6px);
    border-bottom: 3px solid #9ea7ac;
    border-right: 3px solid #9ea7ac;
    border-left: 3px solid #9ea7ac;
    padding: 5px 0px;
    min-height: 20px;
}

.wordCountLabel {
    margin-left: 5px;
}

.characterCountLabel {
    margin-left: 5px;
}

.essay-max-characters-alert-placeholder {
    height: 40px;
}

.essay-max-characters-alert {
    box-shadow: 0px 4px 4px 0px #000040;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 64, 0);
    border: 2px solid #b25908;
    border-radius: 4px;
    background: #ffd282;
    max-width: 610px;
    cursor: context-menu;
    position: absolute;
    bottom: 4px;
    right: 6px;
    padding: 2px 13px;
    font-family: "Source Sans Pro";
    font-size: 16px;
    line-height: 1.5;
}

.shortanswer .numeric-entry-input-holder {
    display: inline-flex;
    max-width: 100%;
}

    .shortanswer .numeric-entry-input-holder input {
        min-width: 0;
    }

.numeric-entry .numeric-entry-input-holder {
    overflow: visible;
}

.shortanswer .answer-options textarea,
.shortanswer .answer-options input[type="text"],
.numeric-entry .answer-options input[type="text"] {
    border: 3px solid #9ea7ac;
    padding: 5px;
}

.shortanswer .answer-options input[type="text"],
.numeric-entry .answer-options input[type="text"] {
    width: 200px;
    box-sizing: content-box;
}

.shortanswer .answer-options table td .numeric-entry-input-holder {
    display: inline-block;
    width: 100%;
}

.shortanswer .answer-options table td input[type="text"] {
    box-sizing: border-box;
    margin: 0;
    width: 100% !important;
    min-width: 50px;
}

.shortanswer .inputbox__input-error-tooltip,
.numeric-entry .numeric-entry__input-error-tooltip {
    display: none;
    font-size: 13px;
    color: #fff;
    position: absolute;
    background: #990000;
    padding: 10px;
    border-radius: 4px;
    position: absolute;
    width: 300px;
    margin-left: 8px;
    z-index: 1;
    border-right-color: #990000;
}

    .shortanswer .inputbox__input-error-tooltip:after,
    .numeric-entry .numeric-entry__input-error-tooltip:after {
        right: 100%;
        top: 50%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
        border-color: rgba(204, 0, 0, 0);
        border-right-color: inherit;
        border-width: 10px;
        margin-top: -10px;
    }

.numeric-entry-input-holder .visually-hidden {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    left: -99999px;
}

.shortanswer .answer-options textarea {
    max-width: 685px;
    box-sizing: content-box;
}

.answer-options fieldset {
    min-width: inherit;
}

.tool .tool-text {
    font-size: 16px;
    vertical-align: text-bottom;
    color: #000000;
    font-family: Arial;
}

.source-link .icon-container {
    position: relative;
    background: rgb(249, 229, 166); /*fix for IE9*/
    background: linear-gradient(to bottom, rgb(255, 255, 240)21%, rgb(255, 200, 120) 100%);
    width: 26px;
    height: 22px;
    border: 1px solid #f3b912;
    display: inline-block;
    float: left;
    flex-shrink: 0;
}

    .source-link .icon-container .fa {
        width: 16px;
        height: 18px;
        font-size: 17px;
    }

    .source-link .icon-container .bi {
        width: 17px;
        height: 14.5px;
        font-size: 15px;
    }

.item-tool-icon-caliper {
    font-size: 16px;
    font-weight: bold;
}

.icon-container .fa,
.icon-container .bi {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

.ckeditor-item-padding {
    word-spacing: 10px;
}

.ckeditor-item-border {
    display: inline-block;
    padding: 10px 10px 8px 10px;
    margin: 0 10px;
    border-width: 3px;
    border-color: #2B9ED8;
    border-style: solid;
}

.ckeditor-item-font-size {
    font-size: 1.5em;
}


.ckeditor-small-caps {
    font-variant: small-caps;
}

.ckeditor-no-textwrap {
    white-space: nowrap;
}

.ckeditor-strong-emphasis {
    color: red;
    font-size: 24px;
    font-family: 'Times New Roman', Times, serif;
}

/* Should be synced with assessmentdeliveryhtml\src\stylesheets\modules\_new-popup.scss */
.font-family-arial {
    font-family: "Arial";
}

.font-family-comic-sans-ms {
    font-family: "Comic Sans MS";
}

.font-family-courier-new {
    font-family: "Courier New";
}

.font-family-georgia {
    font-family: "Georgia";
}

.font-family-impact {
    font-family: "Impact";
}

.font-family-lucida-console {
    font-family: "Lucida Console";
}

.font-family-lucida-sans-unicode {
    font-family: "Lucida Sans Unicode";
}

.font-family-tahoma {
    font-family: "Tahoma";
}

.font-family-palatino-linotype {
    font-family: "Palatino Linotype";
}

.font-family-times-new-roman {
    font-family: "Times New Roman";
}

.font-family-trebuchet-ms {
    font-family: "Trebuchet MS";
}

.font-family-verdana {
    font-family: "Verdana";
}

.font-family-ms-gothic {
    font-family: "MS Gothic";
}

/* Should be synced with assessmentdeliveryhtml\src\stylesheets\modules\_new-popup.scss */
.font-size-8px {
    font-size: 8px;
}

.font-size-10px {
    font-size: 10px;
}

.font-size-12px {
    font-size: 12px;
}

.font-size-14px {
    font-size: 14px;
}

.font-size-16px {
    font-size: 16px;
}

.font-size-18px {
    font-size: 18px;
}

.font-size-24px {
    font-size: 24px;
}

/*file manager for File Attach*/

.file-manager-container {
    position: relative;
    font-family: 'Source Sans Pro', "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin: 20px 0;
}

.left-aligned-layout.file-attach .file-manager-container {
    margin-left: 20px;
}

.file-manager-container * {
    box-sizing: border-box;
}

.file-manager-container:after {
    display: block;
    clear: both;
    content: " ";
}

.file-manager-container .download-section {
    float: left;
    width: 300px;
    padding-right: 20px;
}

.file-manager-container .upload-section {
    padding-left: 0;
    min-width: 0;
}

.file-manager-container .introduction-text {
    padding: 0px;
    background-color: #ffffff;
}

.file-manager-container .upload-section.add-divider {
    margin-left: 320px;
}

.file-manager-container .add-divider:before {
    position: absolute;
    background: #c8c8c8;
    width: 1px;
    top: 0;
    bottom: 0;
    content: " ";
    margin-left: -20px;
}

.file-manager-container .button {
    background: #2b9ed8;
    border: 1px solid #2b9ed8;
    border-radius: 4px;
    color: #fff;
    display: block;
    padding: 0.7em 17px;
    margin-bottom: 10px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px;
}

    .file-manager-container .button.download-file {
        max-width: 280px;
    }

    .file-manager-container .button:hover {
        opacity: 0.65;
    }

    /* .file-manager-container .button:active, */
    .file-manager-container .button:focus {
        opacity: 1;
    }

    .file-manager-container .button p {
        margin-bottom: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        /*fix for null label in advanced mode*/
        min-height: 1em;
    }

.file-manager-container button.upload-file-button-disabled,
.file-manager-container .file-attach-button-disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

.file-manager-container .upload-file {
    display: none;
}

.file-manager-container .section-title {
    display: block;
    margin: 0;
    color: #3d505a;
    font-weight: bold;
    font-size: 18px;
    line-height: 1;
    border: none;
}

/*Uploaded Files Table*/

.file-manager-container .upload-section_transparent.add-divider:before {
    background: none;
}

.uploaded-files-table_transparent .upload-status__title {
    height: 40px;
}

.file-manager-container .uploaded-files-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 1px;
    color: #3d505a;
}

    .file-manager-container .uploaded-files-table td {
        line-height: 1.45em;
    }

    .file-manager-container .uploaded-files-table tr:nth-child(odd) {
        background: #f5f5f5;
    }

.file-manager-container .uploaded-files-table_transparent tr:nth-child(odd) {
    background: transparent;
}

.file-manager-container .uploaded-files-table thead tr:first-child {
    background: #e4e4e4;
}

.file-manager-container .uploaded-files-table_transparent thead tr:first-child {
    background: transparent;
}

.file-manager-container .uploaded-files-table thead tr:first-child {
    font-weight: bold;
}

.file-manager-container .uploaded-files-table thead tr th {
    border-top: 1px solid #e4e4e4;
    border-bottom: 1px solid #e4e4e4;
}

    .file-manager-container .uploaded-files-table thead tr th:first-child {
        border-left: 1px solid #e4e4e4;
    }

    .file-manager-container .uploaded-files-table thead tr th:last-child {
        border-right: 1px solid #e4e4e4;
    }

.file-manager-container .uploaded-files-table_transparent thead tr th:first-child {
    border-left: 1px solid transparent;
    padding: 0;
}

.file-manager-container .uploaded-files-table_transparent thead tr th:last-child {
    border: 1px solid transparent;
}

.file-manager-container .uploaded-files-table tr:nth-child(odd) td {
    border-top: 1px solid #f5f5f5;
    border-bottom: 1px solid #f5f5f5;
}

.file-manager-container .uploaded-files-table_transparent tr:nth-child(odd) td {
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
}

.file-manager-container .uploaded-files-table tr:nth-child(odd) td:first-child {
    border-left: 1px solid #f5f5f5;
}

.file-manager-container .uploaded-files-table_transparent tr:nth-child(odd) td:first-child {
    border-left: 1px solid transparent;
}

.file-manager-container .uploaded-files-table tr:nth-child(odd) td:last-child {
    border-right: 1px solid #f5f5f5;
}

.file-manager-container .uploaded-files-table_transparent tr:nth-child(odd) td:last-child {
    border-right: 1px solid transparent;
}

.file-manager-container .uploaded-files-table tr:nth-child(even) {
    background: transparent;
}

    .file-manager-container .uploaded-files-table tr:nth-child(even) td {
        border-top: 1px solid transparent;
        border-bottom: 1px solid transparent;
    }

        .file-manager-container .uploaded-files-table tr:nth-child(even) td:first-child {
            border-left: 1px solid transparent;
        }

        .file-manager-container .uploaded-files-table tr:nth-child(even) td:last-child {
            border-right: 1px solid transparent;
        }

.file-manager-container .uploaded-files-table th, .file-manager-container .uploaded-files-table td {
    height: 40px;
    padding: 5px;
}

.file-manager-container .uploaded-files-table thead th {
    text-align: left;
}

.file-manager-container .uploaded-files-table td.buttons {
    width: 115px;
}

.file-manager-container .uploaded-files-table td.filename {
    max-width: 270px;
    word-break: break-all;
}

.file-manager-container .uploaded-files-table .uploaded-files-manager-button {
    background: #c8c8c8;
    border: 1px solid #c8c8c8;
    border-radius: 4px;
    width: 30px;
    height: 30px;
    color: #3d505a;
    margin: 2px;
    vertical-align: top;
    font-size: 14px !important;
}

    .file-manager-container .uploaded-files-table .uploaded-files-manager-button:hover {
        opacity: 0.65;
    }

    .file-manager-container .uploaded-files-table .uploaded-files-manager-button:focus {
        opacity: 1;
    }

.file-manager-container .uploaded-files-table .uploaded-files-manager-rename {
    background-position: center;
    background-repeat: no-repeat;
}

    .file-manager-container .uploaded-files-table .uploaded-files-manager-rename svg text {
        fill: #3d505a;
    }

.source-link-default {
    margin: 4px 0px 10px 0px;
}

    .source-link-default .sourcematerial-button {
        background: transparent;
        padding: 0 4px;
        height: 30px;
        border: 1px solid #3d505a;
        border-radius: 4px;
        font-size: 17px;
    }

    .source-link-default span, .source-link-default p {
        font-size: 17px !important;
    }

    .source-link-default .sourcematerial-button .icon-container + div {
        float: none;
        margin-left: 5px;
        margin-right: 5px;
    }

        .source-link-default .sourcematerial-button .icon-container + div p {
            height: 21px;
        }

    .source-link-default .sourcematerial-button .icon-container {
        background: transparent;
        border: none;
        float: none;
    }

    .source-link-default .icon-container .fa {
        width: 20px;
        height: 20px;
        font-size: 20px;
        line-height: 1.2;
    }

.source-link-select .sourcematerial-button {
    background: #3d505a;
    color: white;
    font-size: 17px;
}

.source-link-default .icon-container .fa-calculator {
    width: 17px;
}

.source-link-select p span, .source-link-select .tool-text, .source-link-select .text-with-size {
    color: white !important;
}

.source-link-select .fa-external-link:before {
    content: "\f07c";
}

.requires-extra-info .requires-extra-info-span {
    margin-bottom: 10px;
    text-align: justify;
    width: calc(100% - 86px);
    display: block;
    font-weight: normal;
}

.requires-extra-info .requires-extra-info-textarea {
    padding: 5px;
    width: calc(100% - 86px);
    height: 60px;
    resize: none;
}

.requires-extra-info-error {
    display: block !important;
}

.extended-matching .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    top: -999px;
    left: -999px;
}

.extended-matching .options-holder {
    display: flex;
    width: 100%;
}

.extended-matching .options-list {
    display: flex;
    flex: 1;
}

    .extended-matching .options-list ul {
        list-style-type: none;
        padding: 0;
        color: #3C5059;
        width: 100%;
        margin: 0;
    }

        .extended-matching .options-list ul li {
            display: table;
            table-layout: fixed;
            width: 100%;
        }

    .extended-matching .options-list li > a {
        color: #3C5059;
    }

        .extended-matching .options-list li > a:link,
        .extended-matching .options-list li > a:visited,
        .extended-matching .options-list li > a:hover,
        .extended-matching .options-list li > a:active {
            text-decoration: none;
        }

.extended-matching .options-wrapper {
    position: relative;
    padding: 20px;
}

.extended-matching .options-space {
    min-width: 80px;
}

.extended-matching .match-option {
    border: solid 3px rgb(60, 80, 89);
    background: #fff;
    color: rgb(60, 80, 89);
    border-radius: 4px;
    width: 100%;
    min-width: 200px;
    max-width: 380px;
    min-height: 80px;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
    box-sizing: border-box;
    font: inherit;
    font-size: inherit;
    line-height: normal;
    font-family: inherit;
    overflow: hidden;
    padding: 5px;
    word-wrap: break-word;
}


    .extended-matching .match-option span {
        width: 100%;
    }

    .extended-matching .match-option.matching {
        border-color: #2c8500;
    }

    .extended-matching .match-option:hover {
        border-color: #2c8500;
    }

.extended-matching .scissors-button {
    transform: translate(-50%, -50%);
    position: absolute;
    height: 30px;
    width: 30px;
    padding: 3px;
    background: rgb(152, 0, 0);
    box-sizing: border-box;
    border-radius: 15px;
    display: none;
    z-index: 1;
    border: 1px solid rgb(152, 0, 0);
}

    .extended-matching .scissors-button svg path {
        fill: #fff;
    }

    .extended-matching .scissors-button:hover svg path {
        fill: #F9D47E;
    }

#MatchLineSVGContainer svg .match-line {
    cursor: pointer;
    pointer-events: all;
    stroke: #3C5059;
    stroke-width: 2px;
}

    #MatchLineSVGContainer svg .match-line.disabled {
        opacity: 0.25;
        cursor: not-allowed;
    }

    #MatchLineSVGContainer svg .match-line.match-to-delete {
        stroke: rgb(152, 0, 0);
    }

    #MatchLineSVGContainer svg .match-line.highlighted {
        stroke: #2c8500;
        stroke-width: 3px;
    }

        #MatchLineSVGContainer svg .match-line.highlighted.match-to-delete {
            stroke: rgb(152, 0, 0);
        }

#MatchLineSVGContainer svg .temp-match-line {
    stroke-width: 2px;
    stroke: #2c8500;
}

/* Voice capture */

.voice-capture-container {
    padding: 3px 10px 2px 10px;
    background-color: #F5F7F8;
    width: 601px;
    display: inline-block;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(205, 218, 221);
    border-image: initial;
    border-radius: 4px;
    color: #3D505B;
}

.themed .voice-capture-container .button {
    border: 1px solid !important;
}

    .themed .voice-capture-container .button:disabled {
        opacity: 0.65;
    }

.voice-capture-container .button > span.fa {
    font-size: 1.6em;
    line-height: 1em;
}

body:not(.themed) .voice-capture-container .button:focus:before {
    box-shadow: 0 0 5px 2px #2B9ED8;
    content: "";
    position: absolute;
    background: none !important;
    top: -2px;
    left: -2px;
    bottom: -2px;
    right: -2px;
    border-radius: 4px;
    border: none;
    outline: none;
}

body:not(.themed) .voice-capture-container .button:focus {
    border-color: #2B9ED8;
    position: relative;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px #2B9ED8;
}

.voice-capture-container .button:disabled {
    opacity: 0.6;
    cursor: default;
}

.voice-capture-container:not(:first-of-type) {
    margin-top: 8px;
}

.voice-capture-container > .voice-capture-controls.playback {
    display: flex;
    flex-direction: column;
}

    .voice-capture-container > .voice-capture-controls.playback > .voice-capture-player-container {
        height: 35px;
        background: #3D505A;
        border: 1px solid #3D505A;
        display: flex;
        padding-right: 10px;
    }

        .voice-capture-container > .voice-capture-controls.playback > .voice-capture-player-container > * {
            padding-left: 10px;
        }

        .voice-capture-container > .voice-capture-controls.playback > .voice-capture-player-container > .disabled {
            opacity: 0.6;
        }

        .voice-capture-container > .voice-capture-controls.playback > .voice-capture-player-container > .voice-capture-timer {
            color: white;
            font-size: 12px;
            margin: auto 0;
        }

        .voice-capture-container > .voice-capture-controls.playback > .voice-capture-player-container > button {
            border: 2px solid #3D505A;
            border-radius: 3px;
            color: white;
            cursor: pointer;
            background: transparent;
            margin: 1px;
            padding: 1px 6px 0;
            width: 35px;
        }

.themed .voice-capture-container > .voice-capture-controls.playback > .voice-capture-player-container > button {
    border: 0 !important;
}

.voice-capture-container > .voice-capture-controls.playback > .voice-capture-player-container > button.volume {
    display: none;
}

    .voice-capture-container > .voice-capture-controls.playback > .voice-capture-player-container > button.volume > .fa-lg {
        font-size: 1.7em;
        margin-top: -1px;
    }

.voice-capture-container > .voice-capture-controls.playback > .voice-capture-buttons {
    margin-top: 10px;
}

    .voice-capture-container > .voice-capture-controls.playback > .voice-capture-buttons > .re-attempt {
        min-width: 128px;
    }

        .voice-capture-container > .voice-capture-controls.playback > .voice-capture-buttons > .re-attempt > span {
            max-width: 160px;
        }

.voice-capture-container > .voice-capture-controls.playback > .voice-capture-player-container > .slider {
    background-color: #FFFFFF;
    margin: 12px 0 0;
    padding-left: 0;
    position: relative;
    cursor: pointer;
}

.voice-capture-container > .voice-capture-controls.playback > .voice-capture-player-container > .player-slider {
    border: 1px solid #3D505A;
    height: 8px;
    width: 466px;
}

.voice-capture-container > .voice-capture-controls.playback > .voice-capture-player-container > .player-volume-slider {
    height: 5px;
    flex: 1;
    display: none;
}

.voice-capture-container > .voice-capture-controls.playback > .voice-capture-player-container > .player-slider > .slider-amount {
    height: 8px;
    width: 100px;
    background: #2b9ed8;
}

.voice-capture-container > .voice-capture-controls.playback > .voice-capture-player-container > .slider > .slider-handler {
    background: white;
    border: 1px solid #3D505A;
    box-shadow: 3px 3px 10px rgba(0,0,0,0.5);
    position: absolute;
}

.voice-capture-container > .voice-capture-controls.playback > .voice-capture-player-container > .player-slider > .slider-handler {
    height: 20px;
    width: 20px;
    border-radius: 50%;
    margin-top: -15px;
}

.voice-capture-container > .voice-capture-controls.playback > .voice-capture-player-container > .player-volume-slider > .slider-handler {
    height: 16px;
    width: 6px;
    margin-top: -6.5px;
    margin-left: 30px;
}


body:not(.themed) .voice-capture-container > .voice-capture-controls.playback > .voice-capture-player-container > .slider > .slider-handler:focus:before {
    box-shadow: 0 0 5px 2px #2B9ED8;
    content: "";
    position: absolute;
    background: none !important;
    top: -4px;
    left: -4px;
    bottom: -4px;
    right: -4px;
    border-radius: 4px;
    border: 2px solid #2B9ED8;
    outline: none;
}

body:not(.themed) .voice-capture-container > .voice-capture-controls.playback > .voice-capture-player-container > .slider > .slider-handler:focus {
    position: relative;
    outline: 0;
}

.voice-capture-container > .voice-capture-controls.playback > .voice-capture-buttons > .button > span.fa {
    margin-right: 12px;
}

.voice-capture-labels > h2 {
    font-size: 14pt;
    font-weight: 600;
    line-height: 20px;
    margin: 0 0 3px 0;
}

.voice-capture-container .voice-capture-audio-visualizer {
    width: 100%;
    height: 25px;
    margin-bottom: 4px;
    border: 1px solid #ffffff;
}

.voice-capture-container > .voice-capture-progressbar {
    margin: 0 0 13px 0;
    height: 8px;
    background: #D8DFE3;
    border: 2px solid #3D505A;
}

    .voice-capture-container > .voice-capture-progressbar > .voice-capture-progressbar-indicator {
        background: #2B9ED8;
        height: 8px;
    }

        .voice-capture-container > .voice-capture-progressbar > .voice-capture-progressbar-indicator.voice-capture-progressbar-animation {
            transition: width 0.1s linear;
        }

.voice-capture-container .voice-capture-heading {
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    margin: 0;
    margin-bottom: 1px;
}

.voice-capture-container .voice-capture-header {
    display: flex;
    justify-content: space-between;
}

.voice-capture-header .voice-capture-autosaved {
    display: none;
    font-size: 14px;
}

.voice-capture-container > .voice-capture-controls > .voice-capture-buttons {
    float: left;
}


    .voice-capture-container > .voice-capture-controls > .voice-capture-buttons > .button {
        background: #2b9ed8;
        border-radius: 4px;
        color: #fff;
        white-space: nowrap;
        font-size: 14px;
        font-weight: bold;
        padding-left: 10px;
        margin-right: 10px;
        height: 44px;
        flex: 1;
        box-shadow: none;
        position: relative;
        border-width: 0;
        outline: 0;
        min-width: 110px;
        text-align: left;
    }

        .voice-capture-container > .voice-capture-controls > .voice-capture-buttons > .button.record {
            width: 94px;
        }

            .voice-capture-container > .voice-capture-controls > .voice-capture-buttons > .button.record > span {
                max-width: 68px;
            }

        .voice-capture-container > .voice-capture-controls > .voice-capture-buttons > .button.pause {
            width: 92px;
        }

            .voice-capture-container > .voice-capture-controls > .voice-capture-buttons > .button.pause > span {
                max-width: 66px;
            }

        .voice-capture-container > .voice-capture-controls > .voice-capture-buttons > .button.save {
            width: 94px;
        }

            .voice-capture-container > .voice-capture-controls > .voice-capture-buttons > .button.save > span {
                max-width: 68px;
            }

        .voice-capture-container > .voice-capture-controls > .voice-capture-buttons > .button.record.record-on {
            background: #B03329;
            border-color: #B03329;
            opacity: 1;
        }

        .voice-capture-container > .voice-capture-controls > .voice-capture-buttons > .button > span.fa {
            margin-right: 15px;
        }

        .voice-capture-container > .voice-capture-controls > .voice-capture-buttons > .button > span {
            overflow: hidden;
            text-overflow: ellipsis;
            display: inline-block;
            line-height: 1.1em;
            vertical-align: middle;
        }

.voice-capture-container > .voice-capture-controls > .voice-capture-status {
    float: left;
    height: 44px;
}

    .voice-capture-container > .voice-capture-controls > .voice-capture-status > div > .voice-capture-status-record-icon {
        color: #B52F2F;
        height: 44px;
    }

    .voice-capture-container > .voice-capture-controls > .voice-capture-status > div > .voice-capture-status-message {
        display: inline-block;
    }

        .voice-capture-container > .voice-capture-controls > .voice-capture-status > div > .voice-capture-status-message > span {
            padding-top: 12px;
            display: block;
        }

    .voice-capture-container > .voice-capture-controls > .voice-capture-status > div > span > i {
        padding-top: 4px;
    }

.voice-capture-container > .voice-capture-controls > .voice-capture-info {
    display: block;
    font-size: 14px;
    float: right;
}

    .voice-capture-container > .voice-capture-controls > .voice-capture-info > div > span.fa {
        margin: 0px 10px;
    }

    .voice-capture-container > .voice-capture-controls > .voice-capture-info > div:last-child {
        padding-top: 11px;
    }

.voice-capture-attempts-standalone-container {
    margin-top: 10px;
}

    .voice-capture-attempts-standalone-container > #voice-capture-attempts-count-standalone {
        font-weight: bold;
    }


/* End of Voice capture */
.warning {
    margin-bottom: 10px;
    display: none;
}

.warning-container, .info-container {
    padding: 10px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.warning-container {
    background-color: #F7D78C;
}

    .warning-container .exclamation {
        margin-right: 10px;
        color: #F3AD23
    }

    .warning-container .warning-text {
        line-height: 1.4;
        color: #3c5059;
    }

.no-replay-warning {
    font-size: 14px;
    color: #3D505B;
}

    .no-replay-warning .fa-warning {
        font-size: 30px;
        color: #F3AD23;
        margin: 5px;
    }

.info-container {
    background-color: #D1ECDC;
    align-items: center;
    justify-content: flex-start;
}

    .info-container .info-Icon {
        margin-right: 10px;
        color: #63A962
    }

    .info-container .info-text {
        line-height: 1.4;
        color: #3c5059;
    }

/*Enabling Review Mode for Standard Item*/
.content-disable {
    pointer-events: none;
}

.content-enable {
    pointer-events: auto;
}

.item-timer {
    display: none;
}

.item-timer-container {
    margin-top: 20px !important;
    margin-bottom: -10px !important;
}

    .item-timer-container .time-remaining-lbl {
        margin-right: 0.2em;
    }

    .item-timer-container .progress-container {
        width: 820px;
        background-color: white;
        border: 2px solid #D9E1E5;
        margin: 5px 0px !important;
    }

        .item-timer-container .progress-container .progress-bar {
            height: 25px;
            background-color: #49aadc !important;
        }

    .item-timer-container > .progress-container > .progress-bar.item-timer-progressbar-animation {
        transition: width 0.1s linear;
    }

.right-aligned-layout .item-timer .item-timer-container {
    margin-top: 45px !important;
}

.item-reload-block {
    display: none;
    margin-bottom: 10px;
}

    .item-reload-block > .button {
        background: #2b9ed8;
        border-radius: 4px;
        color: #fff;
        white-space: nowrap;
        font-size: 14px;
        font-weight: bold;
        padding-left: 10px;
        margin-right: 10px;
        height: 35px;
        flex: 1;
        box-shadow: none;
        position: relative;
        border-width: 0;
        outline: 0;
        min-width: 110px;
        text-align: left;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .item-reload-block .button {
        border: 1px solid !important;
    }

        .item-reload-block .button:focus {
            border-color: #2B9ED8;
            position: relative;
            outline: 0;
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px #2B9ED8;
        }

.item-content-delay {
    display: none;
}

.move-to-next-wrapper {
    margin-bottom: 5px;
    width: 100%;
    position: relative;
    display: inline-block;
    margin-top: 2%;
}

    .move-to-next-wrapper .btn-move-to-next {
        display: none;
        font-weight: bold !important;
        border-radius: 4px !important;
        float: right !important;
        height: 40px !important;
        background-color: #2B9ED8;
        color: #FFFFFF;
        border-color: #2B9ED8;
    }

.disable-candidate-response {
    border: 3px solid #3D505A !important;
    background: none !important;
    outline: none !important;
}

/*Candidate Feedback Styles*/
.show-candidate-feedback-to-candidate {
    display: block !important;
    padding: 10px 10px;
    border: 1px solid #9EA7AC;
    border-radius: 6px;
    color: #333;
    width: calc(100% - 35px) !important;
    word-break: break-all;
    margin-bottom: 10px;
    display: table-footer-group;
}

    /*for htmldelivery*/
    .show-candidate-feedback-to-candidate .feedback {
        color: #333;
        background-color: white;
    }

.display-table-preview-content-holder {
    display: table;
    width: calc(100% - 35px) !important;
}

.display-table-header-group {
    display: table-header-group;
}

.candidate-feedback-background {
    background-color: inherit !important;
}

.candidate-feedback-scrollable {
    pointer-events: visible !important;
}

.candidate-feedback-header {
    margin-left: 11pt;
}

.candidate-feedback-text {
    word-break: normal !important;
}

/*Correct Answers Styles*/
.candidate-correct-answer {
    position: absolute;
    top: 14px;
    right: 64px;
    color: green;
    background: white;
    border-radius: 13px;
}

.option-with-labels .candidate-correct-answer {
    right: 13px;
}

/*Candidate Response Styles*/
.hide-candidate-response {
    border: 3px solid #3D505A !important;
    background: none !important;
}

.exclusive {
    margin-top: 40px;
}

.font-settings-essay {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    padding: 4px;
    min-height: 20px;
}

    .font-settings-essay.wordCountLabel {
        padding-right: 30px;
    }

.essay .sr-only {
    width: 0;
    height: 0;
}

/*Assisitive Media styles*/
.assistive-media .assistive-media-button {
    height: 32px;
    width: 32px;
    background: none;
    color: #3d505a;
    border: none;
    padding: 0;
    box-sizing: border-box;
}


    .assistive-media .assistive-media-button .play-stop-icon {
        height: 32px;
        display: inline-block;
        width: 32px;
        border-radius: 16px;
    }

        .assistive-media .assistive-media-button .play-stop-icon .play {
            padding-top: 5px;
            font-size: 22px;
        }

        .assistive-media .assistive-media-button .play-stop-icon .stop {
            padding-top: 5px;
            font-size: 22px;
        }

    .assistive-media .assistive-media-button .fa-stop-circle {
        display: none;
    }


    .assistive-media .assistive-media-button.playing .fa-stop-circle {
        display: inline-block;
    }

    .assistive-media .assistive-media-button.playing .fa-volume-up {
        display: none;
    }

.assistive-media[function=LaunchAssistiveMedia].launched .assistive-media-button .play-stop-icon {
    background-color: #CFD3D6;
}

.assistive-media .assistive-media-button .play-stop-icon:hover {
    background-color: #E2E5E6;
}

.play-video-button {
    height: 24px;
    width: 24px;
    margin-top: 1px;
    display: inline-block;
    box-sizing: border-box;
}

.mejs__controls .mejs__currenttime {
    white-space: nowrap;
}

.mejs__layers .mejs__overlay,
.mejs__layers .mejs__poster {
    height: 100%;
    width: 100%;
}

.mejs__speed-selector, .mejs-speed-selector {
    height: auto !important;
}

.mejs__container {
    overflow: hidden;
}

/*start styles from mejs player plugins*/
/*start mejs speed.css */
.mejs__speed-button,
.mejs-speed-button {
    position: relative;
}

.mejs__speed-button > button,
.mejs-speed-button > button {
    background: transparent;
    color: #fff;
    font-size: 11px;
    line-height: normal;
    margin: 11px 0 0;
    width: 36px;
}

.mejs__speed-selector,
.mejs-speed-selector {
    background: rgba(50, 50, 50, 0.7);
    border: solid 1px transparent;
    border-radius: 0;
    height: 150px;
    left: -10px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    top: -100px;
    visibility: hidden;
    width: 60px;
}

.mejs__speed-selector,
.mejs-speed-selector {
    visibility: visible;
}

.mejs__speed-selector-list,
.mejs-speed-selector-list {
    display: block;
    list-style-type: none !important;
    margin: 0;
    overflow: hidden;
    padding: 0;
}

.mejs__speed-selector-list-item,
.mejs-speed-selector-list-item {
    color: #fff;
    display: block;
    list-style-type: none !important;
    margin: 0 0 6px;
    overflow: hidden;
    padding: 0 10px;
}

.mejs__speed-selector-list-item:hover,
.mejs-speed-selector-list-item:hover {
    background-color: rgb(200, 200, 200) !important;
    background-color: rgba(255, 255, 255, 0.4) !important;
}

.mejs__speed-selector-input,
.mejs-speed-selector-input {
    clear: both;
    float: left;
    left: -1000px;
    margin: 3px 3px 0 5px;
    position: absolute;
}

.mejs__speed-selector-label,
.mejs-speed-selector-label {
    color: white;
    cursor: pointer;
    float: left;
    font-size: 11px;
    line-height: 15px;
    margin-left: 5px;
    padding: 4px 0 0;
    width: 60px;
}

.mejs__speed-selected,
.mejs-speed-selected {
    color: rgba(33, 248, 248, 1);
}

.mejs__speed-selector,
.mejs-speed-selector {
    visibility: hidden;
}

.mejs__speed-button:hover .mejs__speed-selector,
.mejs-speed-button:hover .mejs-speed-selector {
    visibility: visible;
}

/*end mejs speed.css */

/*start mejs loop.css*/

.mejs__loop-button > button,
.mejs-loop-button > button {
    background: url('loop.svg') no-repeat transparent;
}

.mejs__loop-off > button,
.mejs-loop-off > button {
    background-position: -20px 1px;
}

.mejs__loop-on > button,
.mejs-loop-on > button {
    background-position: 0 1px;
}

/*end mejs loop.css*/
/*end styles from mejs player plugins*/

.show-all-spaces {
    white-space: pre-wrap;
}

#mathlive-keystroke-caption-panel {
    padding: 0;
}

/*typing speed items*/
#typingSpeedTextarea.essay-textarea {
    height: 340px;
}