From 2609eb7b0580c04cf110b1e99288cdbc55fe1184 Mon Sep 17 00:00:00 2001 From: "Kyle D. McCormick" Date: Wed, 13 Nov 2024 11:55:19 -0500 Subject: [PATCH] refactor: remove xmodule CSS classes --- openedx/core/lib/xblock_utils/__init__.py | 27 +- .../ProblemBlockDisplay.css | 590 +++++++++--------- 2 files changed, 300 insertions(+), 317 deletions(-) diff --git a/openedx/core/lib/xblock_utils/__init__.py b/openedx/core/lib/xblock_utils/__init__.py index a8b76541b6e5..b3e24ffa2dac 100644 --- a/openedx/core/lib/xblock_utils/__init__.py +++ b/openedx/core/lib/xblock_utils/__init__.py @@ -102,31 +102,14 @@ def wrap_xblock( if context: data.update(context.get('wrap_xblock_data', {})) - css_classes = [ - 'xblock', - f'xblock-{markupsafe.escape(view)}', - 'xblock-{}-{}'.format( - markupsafe.escape(view), - markupsafe.escape(block.scope_ids.block_type), - ) - ] - + view_safe = markupsafe.escape(view) + block_type_safe = markupsafe.escape(block.scope_ids.block_type) + css_classes = ['xblock', f'xblock-{view_safe}', f'xblock-{view_safe}-{block_type_safe}'] + if view in PREVIEW_VIEWS: + css_classes += ['xblock-display', f'xblock-display-{block_type_safe}'] if view == STUDENT_VIEW and getattr(block, 'HIDDEN', False): css_classes.append('is-hidden') - # TODO: This special case will be removed when we update the SCSS under - # xmodule/assets to use the standard XBlock CSS classes. - # See https://github.com/openedx/edx-platform/issues/32617. - if getattr(block, 'uses_xmodule_styles_setup', False): - if view in PREVIEW_VIEWS: - # The block is acting as an XModule - css_classes.append('xmodule_display') - elif view == STUDIO_VIEW: - # The block is acting as an XModuleDescriptor - css_classes.append('xmodule_edit') - - css_classes.append('xmodule_' + markupsafe.escape(class_name)) - if frag.js_init_fn: data['init'] = frag.js_init_fn data['runtime-class'] = runtime_class diff --git a/xmodule/static/css-builtin-blocks/ProblemBlockDisplay.css b/xmodule/static/css-builtin-blocks/ProblemBlockDisplay.css index 31ce58efe387..8e8f14e907b2 100644 --- a/xmodule/static/css-builtin-blocks/ProblemBlockDisplay.css +++ b/xmodule/static/css-builtin-blocks/ProblemBlockDisplay.css @@ -1,136 +1,136 @@ @import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700"); -.xmodule_display.xmodule_ProblemBlock { +.xblock-display-problem { /* stylelint-disable-line */ /* stylelint-disable-line */ } -.xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input + label.choicegroup_correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + label.choicegroup_correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input + label.choicetextgroup_correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + label.choicetextgroup_correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input + section.choicetextgroup_correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + section.choicetextgroup_correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input + label.choicegroup_partially-correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + label.choicegroup_partially-correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input + label.choicetextgroup_partially-correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + label.choicetextgroup_partially-correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input + section.choicetextgroup_partially-correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + section.choicetextgroup_partially-correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input + label.choicegroup_incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + label.choicegroup_incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input + label.choicetextgroup_incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + label.choicetextgroup_incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input + section.choicetextgroup_incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + section.choicetextgroup_incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .indicator-container .status.correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .indicator-container .status.partially-correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .indicator-container .status.incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock .problem .capa_inputtype.textline > .incorrect .status .status-icon::after, .xmodule_display.xmodule_ProblemBlock .problem .inputtype.formulaequationinput > .incorrect .status .status-icon::after, .xmodule_display.xmodule_ProblemBlock .problem .capa_inputtype.textline > .partially-correct .status .status-icon::after, .xmodule_display.xmodule_ProblemBlock .problem .inputtype.formulaequationinput > .partially-correct .status .status-icon::after, .xmodule_display.xmodule_ProblemBlock .problem .capa_inputtype.textline > .correct .status .status-icon::after, .xmodule_display.xmodule_ProblemBlock .problem .inputtype.formulaequationinput > .correct .status .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .imageinput.capa_inputtype .correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .imageinput.capa_inputtype .incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .imageinput.capa_inputtype .partially-correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .partially-correct .status-icon::after { +.xblock-display-problem div.problem .choicegroup input + label.choicegroup_correct .status-icon::after, .xblock-display-problem div.problem .choicetextgroup input + label.choicegroup_correct .status-icon::after, .xblock-display-problem div.problem .choicetextgroup .choicegroup input + label.choicetextgroup_correct .status-icon::after, .xblock-display-problem div.problem .choicetextgroup input + label.choicetextgroup_correct .status-icon::after, .xblock-display-problem div.problem .choicetextgroup .choicegroup input + section.choicetextgroup_correct .status-icon::after, .xblock-display-problem div.problem .choicetextgroup input + section.choicetextgroup_correct .status-icon::after, .xblock-display-problem div.problem .choicegroup input + label.choicegroup_partially-correct .status-icon::after, .xblock-display-problem div.problem .choicetextgroup input + label.choicegroup_partially-correct .status-icon::after, .xblock-display-problem div.problem .choicetextgroup .choicegroup input + label.choicetextgroup_partially-correct .status-icon::after, .xblock-display-problem div.problem .choicetextgroup input + label.choicetextgroup_partially-correct .status-icon::after, .xblock-display-problem div.problem .choicetextgroup .choicegroup input + section.choicetextgroup_partially-correct .status-icon::after, .xblock-display-problem div.problem .choicetextgroup input + section.choicetextgroup_partially-correct .status-icon::after, .xblock-display-problem div.problem .choicegroup input + label.choicegroup_incorrect .status-icon::after, .xblock-display-problem div.problem .choicetextgroup input + label.choicegroup_incorrect .status-icon::after, .xblock-display-problem div.problem .choicetextgroup .choicegroup input + label.choicetextgroup_incorrect .status-icon::after, .xblock-display-problem div.problem .choicetextgroup input + label.choicetextgroup_incorrect .status-icon::after, .xblock-display-problem div.problem .choicetextgroup .choicegroup input + section.choicetextgroup_incorrect .status-icon::after, .xblock-display-problem div.problem .choicetextgroup input + section.choicetextgroup_incorrect .status-icon::after, .xblock-display-problem div.problem .indicator-container .status.correct .status-icon::after, .xblock-display-problem div.problem .indicator-container .status.partially-correct .status-icon::after, .xblock-display-problem div.problem .indicator-container .status.incorrect .status-icon::after, .xblock-display-problem .problem .capa_inputtype.textline > .incorrect .status .status-icon::after, .xblock-display-problem .problem .inputtype.formulaequationinput > .incorrect .status .status-icon::after, .xblock-display-problem .problem .capa_inputtype.textline > .partially-correct .status .status-icon::after, .xblock-display-problem .problem .inputtype.formulaequationinput > .partially-correct .status .status-icon::after, .xblock-display-problem .problem .capa_inputtype.textline > .correct .status .status-icon::after, .xblock-display-problem .problem .inputtype.formulaequationinput > .correct .status .status-icon::after, .xblock-display-problem div.problem .imageinput.capa_inputtype .correct .status-icon::after, .xblock-display-problem div.problem .imageinput.capa_inputtype .incorrect .status-icon::after, .xblock-display-problem div.problem .imageinput.capa_inputtype .partially-correct .status-icon::after, .xblock-display-problem div.problem .annotation-input .correct .status-icon::after, .xblock-display-problem div.problem .annotation-input .incorrect .status-icon::after, .xblock-display-problem div.problem .annotation-input .partially-correct .status-icon::after { font-family: FontAwesome; -webkit-font-smoothing: antialiased; display: inline-block; speak: none; } -.xmodule_display.xmodule_ProblemBlock h2 { +.xblock-display-problem h2 { margin-top: 0; margin-bottom: calc((var(--baseline) * 0.75)); } -.xmodule_display.xmodule_ProblemBlock h2.problem-header { +.xblock-display-problem h2.problem-header { display: inline-block; } -.xmodule_display.xmodule_ProblemBlock h2.problem-header section.staff { +.xblock-display-problem h2.problem-header section.staff { margin-top: calc((var(--baseline) * 1.5)); font-size: 80%; } @media print { - .xmodule_display.xmodule_ProblemBlock h2 { + .xblock-display-problem h2 { display: block; width: auto; border-right: 0; } } -.xmodule_display.xmodule_ProblemBlock .explanation-title { +.xblock-display-problem .explanation-title { font-weight: bold; } -.xmodule_display.xmodule_ProblemBlock .feedback-hint-incorrect, .xmodule_display.xmodule_ProblemBlock .feedback-hint-partially-correct, -.xmodule_display.xmodule_ProblemBlock .feedback-hint-correct { +.xblock-display-problem .feedback-hint-incorrect, .xblock-display-problem .feedback-hint-partially-correct, +.xblock-display-problem .feedback-hint-correct { margin-top: calc((var(--baseline) / 4)); } -.xmodule_display.xmodule_ProblemBlock .feedback-hint-incorrect .icon, .xmodule_display.xmodule_ProblemBlock .feedback-hint-partially-correct .icon, -.xmodule_display.xmodule_ProblemBlock .feedback-hint-correct .icon { +.xblock-display-problem .feedback-hint-incorrect .icon, .xblock-display-problem .feedback-hint-partially-correct .icon, +.xblock-display-problem .feedback-hint-correct .icon { margin-right: calc((var(--baseline) / 4)); } -.xmodule_display.xmodule_ProblemBlock .feedback-hint-incorrect .icon { +.xblock-display-problem .feedback-hint-incorrect .icon { color: var(--incorrect); } -.xmodule_display.xmodule_ProblemBlock .feedback-hint-partially-correct .icon, -.xmodule_display.xmodule_ProblemBlock .feedback-hint-correct .icon { +.xblock-display-problem .feedback-hint-partially-correct .icon, +.xblock-display-problem .feedback-hint-correct .icon { color: var(--correct); } -.xmodule_display.xmodule_ProblemBlock .feedback-hint-text { +.xblock-display-problem .feedback-hint-text { color: #646464; } -.xmodule_display.xmodule_ProblemBlock .problem-hint { +.xblock-display-problem .problem-hint { margin-bottom: 20px; width: 100%; } -.xmodule_display.xmodule_ProblemBlock .hint-label { +.xblock-display-problem .hint-label { display: inline-block; padding-right: 0.5em; } -.xmodule_display.xmodule_ProblemBlock .hint-text { +.xblock-display-problem .hint-text { display: inline-block; } -.xmodule_display.xmodule_ProblemBlock .feedback-hint-multi .hint-text { +.xblock-display-problem .feedback-hint-multi .hint-text { display: block; } -.xmodule_display.xmodule_ProblemBlock iframe[seamless] { +.xblock-display-problem iframe[seamless] { overflow: hidden; padding: 0; border: 0 none transparent; background-color: transparent; } -.xmodule_display.xmodule_ProblemBlock .inline-error { +.xblock-display-problem .inline-error { color: var(--error-color-dark); } -.xmodule_display.xmodule_ProblemBlock div.problem-progress { +.xblock-display-problem div.problem-progress { display: inline-block; color: var(--gray-d1); font-size: 0.875em; } -.xmodule_display.xmodule_ProblemBlock div.problem { +.xblock-display-problem div.problem { padding-top: var(--baseline); } @media print { - .xmodule_display.xmodule_ProblemBlock div.problem { + .xblock-display-problem div.problem { display: block; padding: 0; width: auto; } - .xmodule_display.xmodule_ProblemBlock div.problem canvas, - .xmodule_display.xmodule_ProblemBlock div.problem img { + .xblock-display-problem div.problem canvas, + .xblock-display-problem div.problem img { page-break-inside: avoid; } } -.xmodule_display.xmodule_ProblemBlock div.problem input.math { +.xblock-display-problem div.problem input.math { direction: ltr; } -.xmodule_display.xmodule_ProblemBlock div.problem .inline { +.xblock-display-problem div.problem .inline { display: inline; } -.xmodule_display.xmodule_ProblemBlock div.problem .inline + p { +.xblock-display-problem div.problem .inline + p { margin-top: var(--baseline); } -.xmodule_display.xmodule_ProblemBlock div.problem .question-description { +.xblock-display-problem div.problem .question-description { color: var(--gray-d1); font-size: var(--small-font-size); } -.xmodule_display.xmodule_ProblemBlock div.problem form > label, .xmodule_display.xmodule_ProblemBlock div.problem .problem-group-label { +.xblock-display-problem div.problem form > label, .xblock-display-problem div.problem .problem-group-label { display: block; margin-bottom: var(--baseline); font: inherit; @@ -138,28 +138,28 @@ -webkit-font-smoothing: initial; } -.xmodule_display.xmodule_ProblemBlock div.problem .problem-group-label + .question-description { +.xblock-display-problem div.problem .problem-group-label + .question-description { margin-top: calc(-1 * var(--baseline)); } -.xmodule_display.xmodule_ProblemBlock .wrapper-problem-response + .wrapper-problem-response, -.xmodule_display.xmodule_ProblemBlock .wrapper-problem-response + p { +.xblock-display-problem .wrapper-problem-response + .wrapper-problem-response, +.xblock-display-problem .wrapper-problem-response + p { margin-top: calc((var(--baseline) * 1.5)); } -.xmodule_display.xmodule_ProblemBlock div.problem .choicegroup, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup { +.xblock-display-problem div.problem .choicegroup, .xblock-display-problem div.problem .choicetextgroup { min-width: 100px; width: auto !important; width: 100px; } -.xmodule_display.xmodule_ProblemBlock div.problem .choicegroup:after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup:after { +.xblock-display-problem div.problem .choicegroup:after, .xblock-display-problem div.problem .choicetextgroup:after { content: ""; display: table; clear: both; } -.xmodule_display.xmodule_ProblemBlock div.problem .choicegroup label, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup label { +.xblock-display-problem div.problem .choicegroup label, .xblock-display-problem div.problem .choicetextgroup label { box-sizing: border-box; display: inline-block; clear: both; @@ -170,68 +170,68 @@ width: 100%; } -.xmodule_display.xmodule_ProblemBlock div.problem .choicegroup label::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup label::after { +.xblock-display-problem div.problem .choicegroup label::after, .xblock-display-problem div.problem .choicetextgroup label::after { margin-left: calc((var(--baseline) * 0.75)); } -.xmodule_display.xmodule_ProblemBlock div.problem .choicegroup .indicator-container, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .indicator-container { +.xblock-display-problem div.problem .choicegroup .indicator-container, .xblock-display-problem div.problem .choicetextgroup .indicator-container { min-height: 1px; width: 25px; display: inline-block; } -.xmodule_display.xmodule_ProblemBlock div.problem .choicegroup fieldset, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup fieldset { +.xblock-display-problem div.problem .choicegroup fieldset, .xblock-display-problem div.problem .choicetextgroup fieldset { box-sizing: border-box; } -.xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input[type="radio"], .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input[type="radio"], .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input[type="checkbox"], .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input[type="checkbox"] { +.xblock-display-problem div.problem .choicegroup input[type="radio"], .xblock-display-problem div.problem .choicetextgroup input[type="radio"], .xblock-display-problem div.problem .choicegroup input[type="checkbox"], .xblock-display-problem div.problem .choicetextgroup input[type="checkbox"] { margin: calc((var(--baseline) / 4)); margin-right: calc((var(--baseline) / 2)); } -.xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input:focus + label, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:focus + label, .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input:hover + label, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:hover + label { +.xblock-display-problem div.problem .choicegroup input:focus + label, .xblock-display-problem div.problem .choicetextgroup input:focus + label, .xblock-display-problem div.problem .choicegroup input:hover + label, .xblock-display-problem div.problem .choicetextgroup input:hover + label { border: 2px solid var(--blue); } -.xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input + label.choicegroup_correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + label.choicegroup_correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input + label.choicetextgroup_correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + label.choicetextgroup_correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input + section.choicetextgroup_correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + section.choicetextgroup_correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input:focus + label.choicegroup_correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:focus + label.choicegroup_correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:focus + label.choicetextgroup_correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:focus + label.choicetextgroup_correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:focus + section.choicetextgroup_correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:focus + section.choicetextgroup_correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input:hover + label.choicegroup_correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:hover + label.choicegroup_correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:hover + label.choicetextgroup_correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:hover + label.choicetextgroup_correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:hover + section.choicetextgroup_correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:hover + section.choicetextgroup_correct { +.xblock-display-problem div.problem .choicegroup input + label.choicegroup_correct, .xblock-display-problem div.problem .choicetextgroup input + label.choicegroup_correct, .xblock-display-problem div.problem .choicetextgroup .choicegroup input + label.choicetextgroup_correct, .xblock-display-problem div.problem .choicetextgroup input + label.choicetextgroup_correct, .xblock-display-problem div.problem .choicetextgroup .choicegroup input + section.choicetextgroup_correct, .xblock-display-problem div.problem .choicetextgroup input + section.choicetextgroup_correct, .xblock-display-problem div.problem .choicegroup input:focus + label.choicegroup_correct, .xblock-display-problem div.problem .choicetextgroup input:focus + label.choicegroup_correct, .xblock-display-problem div.problem .choicetextgroup .choicegroup input:focus + label.choicetextgroup_correct, .xblock-display-problem div.problem .choicetextgroup input:focus + label.choicetextgroup_correct, .xblock-display-problem div.problem .choicetextgroup .choicegroup input:focus + section.choicetextgroup_correct, .xblock-display-problem div.problem .choicetextgroup input:focus + section.choicetextgroup_correct, .xblock-display-problem div.problem .choicegroup input:hover + label.choicegroup_correct, .xblock-display-problem div.problem .choicetextgroup input:hover + label.choicegroup_correct, .xblock-display-problem div.problem .choicetextgroup .choicegroup input:hover + label.choicetextgroup_correct, .xblock-display-problem div.problem .choicetextgroup input:hover + label.choicetextgroup_correct, .xblock-display-problem div.problem .choicetextgroup .choicegroup input:hover + section.choicetextgroup_correct, .xblock-display-problem div.problem .choicetextgroup input:hover + section.choicetextgroup_correct { border: 2px solid var(--correct); } -.xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input + label.choicegroup_correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + label.choicegroup_correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input + label.choicetextgroup_correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + label.choicetextgroup_correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input + section.choicetextgroup_correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + section.choicetextgroup_correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input:focus + label.choicegroup_correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:focus + label.choicegroup_correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:focus + label.choicetextgroup_correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:focus + label.choicetextgroup_correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:focus + section.choicetextgroup_correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:focus + section.choicetextgroup_correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input:hover + label.choicegroup_correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:hover + label.choicegroup_correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:hover + label.choicetextgroup_correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:hover + label.choicetextgroup_correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:hover + section.choicetextgroup_correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:hover + section.choicetextgroup_correct .status-icon::after { +.xblock-display-problem div.problem .choicegroup input + label.choicegroup_correct .status-icon::after, .xblock-display-problem div.problem .choicetextgroup input + label.choicegroup_correct .status-icon::after, .xblock-display-problem div.problem .choicetextgroup .choicegroup input + label.choicetextgroup_correct .status-icon::after, .xblock-display-problem div.problem .choicetextgroup input + label.choicetextgroup_correct .status-icon::after, .xblock-display-problem div.problem .choicetextgroup .choicegroup input + section.choicetextgroup_correct .status-icon::after, .xblock-display-problem div.problem .choicetextgroup input + section.choicetextgroup_correct .status-icon::after, .xblock-display-problem div.problem .choicegroup input:focus + label.choicegroup_correct .status-icon::after, .xblock-display-problem div.problem .choicetextgroup input:focus + label.choicegroup_correct .status-icon::after, .xblock-display-problem div.problem .choicetextgroup .choicegroup input:focus + label.choicetextgroup_correct .status-icon::after, .xblock-display-problem div.problem .choicetextgroup input:focus + label.choicetextgroup_correct .status-icon::after, .xblock-display-problem div.problem .choicetextgroup .choicegroup input:focus + section.choicetextgroup_correct .status-icon::after, .xblock-display-problem div.problem .choicetextgroup input:focus + section.choicetextgroup_correct .status-icon::after, .xblock-display-problem div.problem .choicegroup input:hover + label.choicegroup_correct .status-icon::after, .xblock-display-problem div.problem .choicetextgroup input:hover + label.choicegroup_correct .status-icon::after, .xblock-display-problem div.problem .choicetextgroup .choicegroup input:hover + label.choicetextgroup_correct .status-icon::after, .xblock-display-problem div.problem .choicetextgroup input:hover + label.choicetextgroup_correct .status-icon::after, .xblock-display-problem div.problem .choicetextgroup .choicegroup input:hover + section.choicetextgroup_correct .status-icon::after, .xblock-display-problem div.problem .choicetextgroup input:hover + section.choicetextgroup_correct .status-icon::after { color: var(--correct); font-size: 1.2em; content: ""; } -.xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input + label.choicegroup_partially-correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + label.choicegroup_partially-correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input + label.choicetextgroup_partially-correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + label.choicetextgroup_partially-correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input + section.choicetextgroup_partially-correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + section.choicetextgroup_partially-correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input:focus + label.choicegroup_partially-correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:focus + label.choicegroup_partially-correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:focus + label.choicetextgroup_partially-correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:focus + label.choicetextgroup_partially-correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:focus + section.choicetextgroup_partially-correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:focus + section.choicetextgroup_partially-correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input:hover + label.choicegroup_partially-correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:hover + label.choicegroup_partially-correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:hover + label.choicetextgroup_partially-correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:hover + label.choicetextgroup_partially-correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:hover + section.choicetextgroup_partially-correct, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:hover + section.choicetextgroup_partially-correct { +.xblock-display-problem div.problem .choicegroup input + label.choicegroup_partially-correct, .xblock-display-problem div.problem .choicetextgroup input + label.choicegroup_partially-correct, .xblock-display-problem div.problem .choicetextgroup .choicegroup input + label.choicetextgroup_partially-correct, .xblock-display-problem div.problem .choicetextgroup input + label.choicetextgroup_partially-correct, .xblock-display-problem div.problem .choicetextgroup .choicegroup input + section.choicetextgroup_partially-correct, .xblock-display-problem div.problem .choicetextgroup input + section.choicetextgroup_partially-correct, .xblock-display-problem div.problem .choicegroup input:focus + label.choicegroup_partially-correct, .xblock-display-problem div.problem .choicetextgroup input:focus + label.choicegroup_partially-correct, .xblock-display-problem div.problem .choicetextgroup .choicegroup input:focus + label.choicetextgroup_partially-correct, .xblock-display-problem div.problem .choicetextgroup input:focus + label.choicetextgroup_partially-correct, .xblock-display-problem div.problem .choicetextgroup .choicegroup input:focus + section.choicetextgroup_partially-correct, .xblock-display-problem div.problem .choicetextgroup input:focus + section.choicetextgroup_partially-correct, .xblock-display-problem div.problem .choicegroup input:hover + label.choicegroup_partially-correct, .xblock-display-problem div.problem .choicetextgroup input:hover + label.choicegroup_partially-correct, .xblock-display-problem div.problem .choicetextgroup .choicegroup input:hover + label.choicetextgroup_partially-correct, .xblock-display-problem div.problem .choicetextgroup input:hover + label.choicetextgroup_partially-correct, .xblock-display-problem div.problem .choicetextgroup .choicegroup input:hover + section.choicetextgroup_partially-correct, .xblock-display-problem div.problem .choicetextgroup input:hover + section.choicetextgroup_partially-correct { border: 2px solid var(--partially-correct); } -.xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input + label.choicegroup_partially-correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + label.choicegroup_partially-correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input + label.choicetextgroup_partially-correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + label.choicetextgroup_partially-correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input + section.choicetextgroup_partially-correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + section.choicetextgroup_partially-correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input:focus + label.choicegroup_partially-correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:focus + label.choicegroup_partially-correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:focus + label.choicetextgroup_partially-correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:focus + label.choicetextgroup_partially-correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:focus + section.choicetextgroup_partially-correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:focus + section.choicetextgroup_partially-correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input:hover + label.choicegroup_partially-correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:hover + label.choicegroup_partially-correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:hover + label.choicetextgroup_partially-correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:hover + label.choicetextgroup_partially-correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:hover + section.choicetextgroup_partially-correct .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:hover + section.choicetextgroup_partially-correct .status-icon::after { +.xblock-display-problem div.problem .choicegroup input + label.choicegroup_partially-correct .status-icon::after, .xblock-display-problem div.problem .choicetextgroup input + label.choicegroup_partially-correct .status-icon::after, .xblock-display-problem div.problem .choicetextgroup .choicegroup input + label.choicetextgroup_partially-correct .status-icon::after, .xblock-display-problem div.problem .choicetextgroup input + label.choicetextgroup_partially-correct .status-icon::after, .xblock-display-problem div.problem .choicetextgroup .choicegroup input + section.choicetextgroup_partially-correct .status-icon::after, .xblock-display-problem div.problem .choicetextgroup input + section.choicetextgroup_partially-correct .status-icon::after, .xblock-display-problem div.problem .choicegroup input:focus + label.choicegroup_partially-correct .status-icon::after, .xblock-display-problem div.problem .choicetextgroup input:focus + label.choicegroup_partially-correct .status-icon::after, .xblock-display-problem div.problem .choicetextgroup .choicegroup input:focus + label.choicetextgroup_partially-correct .status-icon::after, .xblock-display-problem div.problem .choicetextgroup input:focus + label.choicetextgroup_partially-correct .status-icon::after, .xblock-display-problem div.problem .choicetextgroup .choicegroup input:focus + section.choicetextgroup_partially-correct .status-icon::after, .xblock-display-problem div.problem .choicetextgroup input:focus + section.choicetextgroup_partially-correct .status-icon::after, .xblock-display-problem div.problem .choicegroup input:hover + label.choicegroup_partially-correct .status-icon::after, .xblock-display-problem div.problem .choicetextgroup input:hover + label.choicegroup_partially-correct .status-icon::after, .xblock-display-problem div.problem .choicetextgroup .choicegroup input:hover + label.choicetextgroup_partially-correct .status-icon::after, .xblock-display-problem div.problem .choicetextgroup input:hover + label.choicetextgroup_partially-correct .status-icon::after, .xblock-display-problem div.problem .choicetextgroup .choicegroup input:hover + section.choicetextgroup_partially-correct .status-icon::after, .xblock-display-problem div.problem .choicetextgroup input:hover + section.choicetextgroup_partially-correct .status-icon::after { color: var(--partially-correct); font-size: 1.2em; content: ""; } -.xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input + label.choicegroup_incorrect, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + label.choicegroup_incorrect, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input + label.choicetextgroup_incorrect, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + label.choicetextgroup_incorrect, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input + section.choicetextgroup_incorrect, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + section.choicetextgroup_incorrect, .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input:focus + label.choicegroup_incorrect, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:focus + label.choicegroup_incorrect, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:focus + label.choicetextgroup_incorrect, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:focus + label.choicetextgroup_incorrect, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:focus + section.choicetextgroup_incorrect, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:focus + section.choicetextgroup_incorrect, .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input:hover + label.choicegroup_incorrect, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:hover + label.choicegroup_incorrect, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:hover + label.choicetextgroup_incorrect, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:hover + label.choicetextgroup_incorrect, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:hover + section.choicetextgroup_incorrect, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:hover + section.choicetextgroup_incorrect { +.xblock-display-problem div.problem .choicegroup input + label.choicegroup_incorrect, .xblock-display-problem div.problem .choicetextgroup input + label.choicegroup_incorrect, .xblock-display-problem div.problem .choicetextgroup .choicegroup input + label.choicetextgroup_incorrect, .xblock-display-problem div.problem .choicetextgroup input + label.choicetextgroup_incorrect, .xblock-display-problem div.problem .choicetextgroup .choicegroup input + section.choicetextgroup_incorrect, .xblock-display-problem div.problem .choicetextgroup input + section.choicetextgroup_incorrect, .xblock-display-problem div.problem .choicegroup input:focus + label.choicegroup_incorrect, .xblock-display-problem div.problem .choicetextgroup input:focus + label.choicegroup_incorrect, .xblock-display-problem div.problem .choicetextgroup .choicegroup input:focus + label.choicetextgroup_incorrect, .xblock-display-problem div.problem .choicetextgroup input:focus + label.choicetextgroup_incorrect, .xblock-display-problem div.problem .choicetextgroup .choicegroup input:focus + section.choicetextgroup_incorrect, .xblock-display-problem div.problem .choicetextgroup input:focus + section.choicetextgroup_incorrect, .xblock-display-problem div.problem .choicegroup input:hover + label.choicegroup_incorrect, .xblock-display-problem div.problem .choicetextgroup input:hover + label.choicegroup_incorrect, .xblock-display-problem div.problem .choicetextgroup .choicegroup input:hover + label.choicetextgroup_incorrect, .xblock-display-problem div.problem .choicetextgroup input:hover + label.choicetextgroup_incorrect, .xblock-display-problem div.problem .choicetextgroup .choicegroup input:hover + section.choicetextgroup_incorrect, .xblock-display-problem div.problem .choicetextgroup input:hover + section.choicetextgroup_incorrect { border: 2px solid var(--incorrect); } -.xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input + label.choicegroup_incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + label.choicegroup_incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input + label.choicetextgroup_incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + label.choicetextgroup_incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input + section.choicetextgroup_incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + section.choicetextgroup_incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input:focus + label.choicegroup_incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:focus + label.choicegroup_incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:focus + label.choicetextgroup_incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:focus + label.choicetextgroup_incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:focus + section.choicetextgroup_incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:focus + section.choicetextgroup_incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input:hover + label.choicegroup_incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:hover + label.choicegroup_incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:hover + label.choicetextgroup_incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:hover + label.choicetextgroup_incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:hover + section.choicetextgroup_incorrect .status-icon::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:hover + section.choicetextgroup_incorrect .status-icon::after { +.xblock-display-problem div.problem .choicegroup input + label.choicegroup_incorrect .status-icon::after, .xblock-display-problem div.problem .choicetextgroup input + label.choicegroup_incorrect .status-icon::after, .xblock-display-problem div.problem .choicetextgroup .choicegroup input + label.choicetextgroup_incorrect .status-icon::after, .xblock-display-problem div.problem .choicetextgroup input + label.choicetextgroup_incorrect .status-icon::after, .xblock-display-problem div.problem .choicetextgroup .choicegroup input + section.choicetextgroup_incorrect .status-icon::after, .xblock-display-problem div.problem .choicetextgroup input + section.choicetextgroup_incorrect .status-icon::after, .xblock-display-problem div.problem .choicegroup input:focus + label.choicegroup_incorrect .status-icon::after, .xblock-display-problem div.problem .choicetextgroup input:focus + label.choicegroup_incorrect .status-icon::after, .xblock-display-problem div.problem .choicetextgroup .choicegroup input:focus + label.choicetextgroup_incorrect .status-icon::after, .xblock-display-problem div.problem .choicetextgroup input:focus + label.choicetextgroup_incorrect .status-icon::after, .xblock-display-problem div.problem .choicetextgroup .choicegroup input:focus + section.choicetextgroup_incorrect .status-icon::after, .xblock-display-problem div.problem .choicetextgroup input:focus + section.choicetextgroup_incorrect .status-icon::after, .xblock-display-problem div.problem .choicegroup input:hover + label.choicegroup_incorrect .status-icon::after, .xblock-display-problem div.problem .choicetextgroup input:hover + label.choicegroup_incorrect .status-icon::after, .xblock-display-problem div.problem .choicetextgroup .choicegroup input:hover + label.choicetextgroup_incorrect .status-icon::after, .xblock-display-problem div.problem .choicetextgroup input:hover + label.choicetextgroup_incorrect .status-icon::after, .xblock-display-problem div.problem .choicetextgroup .choicegroup input:hover + section.choicetextgroup_incorrect .status-icon::after, .xblock-display-problem div.problem .choicetextgroup input:hover + section.choicetextgroup_incorrect .status-icon::after { color: var(--incorrect); font-size: 1.2em; content: ""; } -.xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input + label.choicegroup_submitted, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + label.choicegroup_submitted, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input + label.choicetextgroup_submitted, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + label.choicetextgroup_submitted, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input + section.choicetextgroup_submitted, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input + section.choicetextgroup_submitted, .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input:focus + label.choicegroup_submitted, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:focus + label.choicegroup_submitted, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:focus + label.choicetextgroup_submitted, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:focus + label.choicetextgroup_submitted, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:focus + section.choicetextgroup_submitted, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:focus + section.choicetextgroup_submitted, .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input:hover + label.choicegroup_submitted, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:hover + label.choicegroup_submitted, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:hover + label.choicetextgroup_submitted, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:hover + label.choicetextgroup_submitted, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup .choicegroup input:hover + section.choicetextgroup_submitted, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input:hover + section.choicetextgroup_submitted { +.xblock-display-problem div.problem .choicegroup input + label.choicegroup_submitted, .xblock-display-problem div.problem .choicetextgroup input + label.choicegroup_submitted, .xblock-display-problem div.problem .choicetextgroup .choicegroup input + label.choicetextgroup_submitted, .xblock-display-problem div.problem .choicetextgroup input + label.choicetextgroup_submitted, .xblock-display-problem div.problem .choicetextgroup .choicegroup input + section.choicetextgroup_submitted, .xblock-display-problem div.problem .choicetextgroup input + section.choicetextgroup_submitted, .xblock-display-problem div.problem .choicegroup input:focus + label.choicegroup_submitted, .xblock-display-problem div.problem .choicetextgroup input:focus + label.choicegroup_submitted, .xblock-display-problem div.problem .choicetextgroup .choicegroup input:focus + label.choicetextgroup_submitted, .xblock-display-problem div.problem .choicetextgroup input:focus + label.choicetextgroup_submitted, .xblock-display-problem div.problem .choicetextgroup .choicegroup input:focus + section.choicetextgroup_submitted, .xblock-display-problem div.problem .choicetextgroup input:focus + section.choicetextgroup_submitted, .xblock-display-problem div.problem .choicegroup input:hover + label.choicegroup_submitted, .xblock-display-problem div.problem .choicetextgroup input:hover + label.choicegroup_submitted, .xblock-display-problem div.problem .choicetextgroup .choicegroup input:hover + label.choicetextgroup_submitted, .xblock-display-problem div.problem .choicetextgroup input:hover + label.choicetextgroup_submitted, .xblock-display-problem div.problem .choicetextgroup .choicegroup input:hover + section.choicetextgroup_submitted, .xblock-display-problem div.problem .choicetextgroup input:hover + section.choicetextgroup_submitted { border: 2px solid var(--submitted); } -.xmodule_display.xmodule_ProblemBlock div.problem .choicegroup .field { +.xblock-display-problem div.problem .choicegroup .field { position: relative; } -.xmodule_display.xmodule_ProblemBlock div.problem .choicegroup label { +.xblock-display-problem div.problem .choicegroup label { padding: calc((var(--baseline) / 2)); padding-left: calc((var(--baseline) * 2.3)); position: relative; @@ -240,8 +240,8 @@ cursor: pointer; } -.xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input[type="radio"], -.xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input[type="checkbox"] { +.xblock-display-problem div.problem .choicegroup input[type="radio"], +.xblock-display-problem div.problem .choicegroup input[type="checkbox"] { left: 0.5625em; position: absolute; top: 0.35em; @@ -250,145 +250,145 @@ z-index: 1; } -.xmodule_display.xmodule_ProblemBlock div.problem .choicegroup legend { +.xblock-display-problem div.problem .choicegroup legend { margin-bottom: var(--baseline); max-width: 100%; white-space: normal; } -.xmodule_display.xmodule_ProblemBlock div.problem .choicegroup legend + .question-description { +.xblock-display-problem div.problem .choicegroup legend + .question-description { margin-top: calc(-1 * var(--baseline)); max-width: 100%; white-space: normal; } -.xmodule_display.xmodule_ProblemBlock div.problem .indicator-container { +.xblock-display-problem div.problem .indicator-container { margin-left: calc((var(--baseline) * 0.75)); } -.xmodule_display.xmodule_ProblemBlock div.problem .indicator-container .status { +.xblock-display-problem div.problem .indicator-container .status { width: var(--baseline); } -.xmodule_display.xmodule_ProblemBlock div.problem .indicator-container .status.correct .status-icon::after { +.xblock-display-problem div.problem .indicator-container .status.correct .status-icon::after { color: var(--correct); font-size: 1.2em; content: ""; } -.xmodule_display.xmodule_ProblemBlock div.problem .indicator-container .status.partially-correct .status-icon::after { +.xblock-display-problem div.problem .indicator-container .status.partially-correct .status-icon::after { color: var(--partially-correct); font-size: 1.2em; content: ""; } -.xmodule_display.xmodule_ProblemBlock div.problem .indicator-container .status.incorrect .status-icon::after { +.xblock-display-problem div.problem .indicator-container .status.incorrect .status-icon::after { color: var(--incorrect); font-size: 1.2em; content: ""; } -.xmodule_display.xmodule_ProblemBlock div.problem .indicator-container .status.submitted .status-icon, .xmodule_display.xmodule_ProblemBlock div.problem .indicator-container .status.unsubmitted .status-icon, .xmodule_display.xmodule_ProblemBlock div.problem .indicator-container .status.unanswered .status-icon { +.xblock-display-problem div.problem .indicator-container .status.submitted .status-icon, .xblock-display-problem div.problem .indicator-container .status.unsubmitted .status-icon, .xblock-display-problem div.problem .indicator-container .status.unanswered .status-icon { content: ''; } -.xmodule_display.xmodule_ProblemBlock div.problem ol.enumerate li::before { +.xblock-display-problem div.problem ol.enumerate li::before { display: block; visibility: hidden; height: 0; content: " "; } -.xmodule_display.xmodule_ProblemBlock div.problem .solution-span > span { +.xblock-display-problem div.problem .solution-span > span { margin: var(--baseline) 0; display: block; position: relative; } -.xmodule_display.xmodule_ProblemBlock div.problem .solution-span > span:empty { +.xblock-display-problem div.problem .solution-span > span:empty { display: none; } -.xmodule_display.xmodule_ProblemBlock div.problem .targeted-feedback-span > span { +.xblock-display-problem div.problem .targeted-feedback-span > span { display: block; position: relative; } -.xmodule_display.xmodule_ProblemBlock div.problem .targeted-feedback-span > span:empty { +.xblock-display-problem div.problem .targeted-feedback-span > span:empty { display: none; } -.xmodule_display.xmodule_ProblemBlock div.problem div p.answer { +.xblock-display-problem div.problem div p.answer { margin-top: -2px; } -.xmodule_display.xmodule_ProblemBlock div.problem div p span.clarification i { +.xblock-display-problem div.problem div p span.clarification i { font-style: normal; } -.xmodule_display.xmodule_ProblemBlock div.problem div p span.clarification i:hover { +.xblock-display-problem div.problem div p span.clarification i:hover { color: var(--blue); } -.xmodule_display.xmodule_ProblemBlock div.problem div.correct input, .xmodule_display.xmodule_ProblemBlock div.problem div.ui-icon-check input { +.xblock-display-problem div.problem div.correct input, .xblock-display-problem div.problem div.ui-icon-check input { border-color: var(--correct); } -.xmodule_display.xmodule_ProblemBlock div.problem div.partially-correct input, .xmodule_display.xmodule_ProblemBlock div.problem div.ui-icon-check input { +.xblock-display-problem div.problem div.partially-correct input, .xblock-display-problem div.problem div.ui-icon-check input { border-color: var(--partially-correct); } -.xmodule_display.xmodule_ProblemBlock div.problem div.processing input { +.xblock-display-problem div.problem div.processing input { border-color: #aaa; } -.xmodule_display.xmodule_ProblemBlock div.problem div.ui-icon-close input { +.xblock-display-problem div.problem div.ui-icon-close input { border-color: var(--incorrect); } -.xmodule_display.xmodule_ProblemBlock div.problem div.incorrect input, .xmodule_display.xmodule_ProblemBlock div.problem div.incomplete input { +.xblock-display-problem div.problem div.incorrect input, .xblock-display-problem div.problem div.incomplete input { border-color: var(--incorrect); } -.xmodule_display.xmodule_ProblemBlock div.problem div.submitted input, .xmodule_display.xmodule_ProblemBlock div.problem div.ui-icon-check input { +.xblock-display-problem div.problem div.submitted input, .xblock-display-problem div.problem div.ui-icon-check input { border-color: var(--submitted); } -.xmodule_display.xmodule_ProblemBlock div.problem div p.answer { +.xblock-display-problem div.problem div p.answer { display: inline-block; margin-top: calc((var(--baseline) / 2)); margin-bottom: 0; } -.xmodule_display.xmodule_ProblemBlock div.problem div p.answer::before { +.xblock-display-problem div.problem div p.answer::before { display: inline; content: "Answer: "; } -.xmodule_display.xmodule_ProblemBlock div.problem div p.answer:empty::before { +.xblock-display-problem div.problem div p.answer:empty::before { display: none; } -.xmodule_display.xmodule_ProblemBlock div.problem div div.equation { +.xblock-display-problem div.problem div div.equation { clear: both; margin-top: 3px; } -.xmodule_display.xmodule_ProblemBlock div.problem div div.equation .MathJax_Display { +.xblock-display-problem div.problem div div.equation .MathJax_Display { width: auto; } -.xmodule_display.xmodule_ProblemBlock div.problem div div.equation img.loading { +.xblock-display-problem div.problem div div.equation img.loading { padding-left: calc((var(--baseline) / 2)); display: inline-block; } -.xmodule_display.xmodule_ProblemBlock div.problem div div.equation span { +.xblock-display-problem div.problem div div.equation span { margin-bottom: 0; display: inline-block; } -.xmodule_display.xmodule_ProblemBlock div.problem div div.equation span.MathJax_CHTML, .xmodule_display.xmodule_ProblemBlock div.problem div div.equation span.MathJax, .xmodule_display.xmodule_ProblemBlock div.problem div div.equation span.MathJax_SVG { +.xblock-display-problem div.problem div div.equation span.MathJax_CHTML, .xblock-display-problem div.problem div div.equation span.MathJax, .xblock-display-problem div.problem div div.equation span.MathJax_SVG { padding: 6px; min-width: 30px; border: 1px solid #e3e3e3; @@ -397,12 +397,12 @@ } @media print { - .xmodule_display.xmodule_ProblemBlock div.problem div [id^='display'].equation { + .xblock-display-problem div.problem div [id^='display'].equation { display: none; } } -.xmodule_display.xmodule_ProblemBlock div.problem div span.ui-icon-bullet { +.xblock-display-problem div.problem div span.ui-icon-bullet { display: inline-block; position: relative; top: 4px; @@ -411,7 +411,7 @@ background: url("var(--static-path)/images/unanswered-icon.png") center center no-repeat; } -.xmodule_display.xmodule_ProblemBlock div.problem div span.processing, .xmodule_display.xmodule_ProblemBlock div.problem div span.ui-icon-processing { +.xblock-display-problem div.problem div span.processing, .xblock-display-problem div.problem div span.ui-icon-processing { display: inline-block; position: relative; top: 6px; @@ -420,7 +420,7 @@ background: url("var(--static-path)/images/spinner.gif") center center no-repeat; } -.xmodule_display.xmodule_ProblemBlock div.problem div span.ui-icon-check { +.xblock-display-problem div.problem div span.ui-icon-check { display: inline-block; position: relative; top: 3px; @@ -429,7 +429,7 @@ background: url("var(--static-path)/images/correct-icon.png") center center no-repeat; } -.xmodule_display.xmodule_ProblemBlock div.problem div span.incomplete, .xmodule_display.xmodule_ProblemBlock div.problem div span.ui-icon-close { +.xblock-display-problem div.problem div span.incomplete, .xblock-display-problem div.problem div span.ui-icon-close { display: inline-block; position: relative; top: 3px; @@ -438,25 +438,25 @@ background: url("var(--static-path)/images/incorrect-icon.png") center center no-repeat; } -.xmodule_display.xmodule_ProblemBlock div.problem div .reload { +.xblock-display-problem div.problem div .reload { float: right; margin: calc((var(--baseline) / 2)); } -.xmodule_display.xmodule_ProblemBlock div.problem div .grader-status { +.xblock-display-problem div.problem div .grader-status { margin: calc(var(--baseline) / 2) 0; padding: calc(var(--baseline) / 2); border-radius: 5px; background: var(--gray-l6); } -.xmodule_display.xmodule_ProblemBlock div.problem div .grader-status:after { +.xblock-display-problem div.problem div .grader-status:after { content: ""; display: table; clear: both; } -.xmodule_display.xmodule_ProblemBlock div.problem div .grader-status span { +.xblock-display-problem div.problem div .grader-status span { display: block; float: left; overflow: hidden; @@ -464,21 +464,21 @@ text-indent: -9999px; } -.xmodule_display.xmodule_ProblemBlock div.problem div .grader-status .grading { +.xblock-display-problem div.problem div .grader-status .grading { margin: 0px 7px 0 0; padding-left: 25px; background: url("var(--static-path)/images/info-icon.png") left center no-repeat; text-indent: 0px; } -.xmodule_display.xmodule_ProblemBlock div.problem div .grader-status p { +.xblock-display-problem div.problem div .grader-status p { float: left; margin-bottom: 0; text-transform: capitalize; line-height: 20px; } -.xmodule_display.xmodule_ProblemBlock div.problem div .grader-status.file { +.xblock-display-problem div.problem div .grader-status.file { margin-top: var(--baseline); padding: var(--baseline) 0 0 0; border: 0; @@ -486,129 +486,129 @@ background: var(--white); } -.xmodule_display.xmodule_ProblemBlock div.problem div .grader-status.file p.debug { +.xblock-display-problem div.problem div .grader-status.file p.debug { display: none; } -.xmodule_display.xmodule_ProblemBlock div.problem div .grader-status.file input { +.xblock-display-problem div.problem div .grader-status.file input { float: left; } -.xmodule_display.xmodule_ProblemBlock div.problem div .evaluation p { +.xblock-display-problem div.problem div .evaluation p { margin-bottom: calc((var(--baseline) / 5)); } -.xmodule_display.xmodule_ProblemBlock div.problem div .feedback-on-feedback { +.xblock-display-problem div.problem div .feedback-on-feedback { margin-right: var(--baseline); height: 100px; } -.xmodule_display.xmodule_ProblemBlock div.problem div .evaluation-response header { +.xblock-display-problem div.problem div .evaluation-response header { text-align: right; } -.xmodule_display.xmodule_ProblemBlock div.problem div .evaluation-response header a { +.xblock-display-problem div.problem div .evaluation-response header a { font-size: .85em; } -.xmodule_display.xmodule_ProblemBlock div.problem div .evaluation-scoring .scoring-list { +.xblock-display-problem div.problem div .evaluation-scoring .scoring-list { margin-left: 3px; list-style-type: none; } -.xmodule_display.xmodule_ProblemBlock div.problem div .evaluation-scoring .scoring-list li { +.xblock-display-problem div.problem div .evaluation-scoring .scoring-list li { display: inline; margin-left: 50px; } -.xmodule_display.xmodule_ProblemBlock div.problem div .evaluation-scoring .scoring-list li:first-child { +.xblock-display-problem div.problem div .evaluation-scoring .scoring-list li:first-child { margin-left: 0; } -.xmodule_display.xmodule_ProblemBlock div.problem div .evaluation-scoring .scoring-list li label { +.xblock-display-problem div.problem div .evaluation-scoring .scoring-list li label { font-size: .9em; } -.xmodule_display.xmodule_ProblemBlock div.problem div .submit-message-container { +.xblock-display-problem div.problem div .submit-message-container { margin: var(--baseline) 0px; } -.xmodule_display.xmodule_ProblemBlock div.problem div.inline > span { +.xblock-display-problem div.problem div.inline > span { display: inline; } -.xmodule_display.xmodule_ProblemBlock div.problem ul { +.xblock-display-problem div.problem ul { margin-bottom: lh(); margin-left: .75em; margin-left: .75rem; list-style: disc outside none; } -.xmodule_display.xmodule_ProblemBlock div.problem ol { +.xblock-display-problem div.problem ol { margin-bottom: lh(); margin-left: .75em; margin-left: .75rem; list-style: decimal outside none; } -.xmodule_display.xmodule_ProblemBlock div.problem dl { +.xblock-display-problem div.problem dl { line-height: 1.4em; } -.xmodule_display.xmodule_ProblemBlock div.problem dl dd { +.xblock-display-problem div.problem dl dd { margin-bottom: 0; } -.xmodule_display.xmodule_ProblemBlock div.problem dd { +.xblock-display-problem div.problem dd { margin-left: .5em; margin-left: .5rem; } -.xmodule_display.xmodule_ProblemBlock div.problem li { +.xblock-display-problem div.problem li { margin-bottom: lh(0.5); line-height: 1.4em; } -.xmodule_display.xmodule_ProblemBlock div.problem li:last-child { +.xblock-display-problem div.problem li:last-child { margin-bottom: 0; } -.xmodule_display.xmodule_ProblemBlock div.problem p { +.xblock-display-problem div.problem p { margin-bottom: lh(); } -.xmodule_display.xmodule_ProblemBlock div.problem table { +.xblock-display-problem div.problem table { margin: lh() 0; border-collapse: collapse; table-layout: auto; } -.xmodule_display.xmodule_ProblemBlock div.problem table td.cont-justified-left, .xmodule_display.xmodule_ProblemBlock div.problem table th.cont-justified-left { +.xblock-display-problem div.problem table td.cont-justified-left, .xblock-display-problem div.problem table th.cont-justified-left { text-align: left !important; } -.xmodule_display.xmodule_ProblemBlock div.problem table td.cont-justified-right, .xmodule_display.xmodule_ProblemBlock div.problem table th.cont-justified-right { +.xblock-display-problem div.problem table td.cont-justified-right, .xblock-display-problem div.problem table th.cont-justified-right { text-align: right !important; } -.xmodule_display.xmodule_ProblemBlock div.problem table td.cont-justified-center, .xmodule_display.xmodule_ProblemBlock div.problem table th.cont-justified-center { +.xblock-display-problem div.problem table td.cont-justified-center, .xblock-display-problem div.problem table th.cont-justified-center { text-align: center !important; } -.xmodule_display.xmodule_ProblemBlock div.problem table th { +.xblock-display-problem div.problem table th { text-align: left; } -.xmodule_display.xmodule_ProblemBlock div.problem table td { +.xblock-display-problem div.problem table td { text-align: left; } -.xmodule_display.xmodule_ProblemBlock div.problem table caption, .xmodule_display.xmodule_ProblemBlock div.problem table th, .xmodule_display.xmodule_ProblemBlock div.problem table td { +.xblock-display-problem div.problem table caption, .xblock-display-problem div.problem table th, .xblock-display-problem div.problem table td { padding: .25em .75em .25em 0; padding: .25rem .75rem .25rem 0; } -.xmodule_display.xmodule_ProblemBlock div.problem table caption { +.xblock-display-problem div.problem table caption { margin-bottom: .75em; margin-bottom: .75rem; padding: .75em 0; @@ -616,11 +616,11 @@ background: #f1f1f1; } -.xmodule_display.xmodule_ProblemBlock div.problem table tr, .xmodule_display.xmodule_ProblemBlock div.problem table td, .xmodule_display.xmodule_ProblemBlock div.problem table th { +.xblock-display-problem div.problem table tr, .xblock-display-problem div.problem table td, .xblock-display-problem div.problem table th { vertical-align: middle; } -.xmodule_display.xmodule_ProblemBlock div.problem code { +.xblock-display-problem div.problem code { margin: 0 2px; padding: 0px 5px; border: 1px solid #eaeaea; @@ -630,7 +630,7 @@ font-size: .9em; } -.xmodule_display.xmodule_ProblemBlock div.problem pre { +.xblock-display-problem div.problem pre { overflow: auto; padding: 6px calc(var(--baseline) / 2); border: 1px solid var(--gray-l3); @@ -640,7 +640,7 @@ line-height: 1.4; } -.xmodule_display.xmodule_ProblemBlock div.problem pre > code { +.xblock-display-problem div.problem pre > code { margin: 0; padding: 0; border: none; @@ -648,7 +648,7 @@ white-space: pre; } -.xmodule_display.xmodule_ProblemBlock .problem .capa_inputtype.textline input, .xmodule_display.xmodule_ProblemBlock .problem .inputtype.formulaequationinput input { +.xblock-display-problem .problem .capa_inputtype.textline input, .xblock-display-problem .problem .inputtype.formulaequationinput input { box-sizing: border-box; border: 2px solid var(--gray-l4); border-radius: 3px; @@ -656,99 +656,99 @@ height: 46px; } -.xmodule_display.xmodule_ProblemBlock .problem .capa_inputtype.textline .status, .xmodule_display.xmodule_ProblemBlock .problem .inputtype.formulaequationinput .status { +.xblock-display-problem .problem .capa_inputtype.textline .status, .xblock-display-problem .problem .inputtype.formulaequationinput .status { display: inline-block; margin-top: calc((var(--baseline) / 2)); background: none; } -.xmodule_display.xmodule_ProblemBlock .problem .capa_inputtype.textline > .incorrect input, .xmodule_display.xmodule_ProblemBlock .problem .inputtype.formulaequationinput > .incorrect input { +.xblock-display-problem .problem .capa_inputtype.textline > .incorrect input, .xblock-display-problem .problem .inputtype.formulaequationinput > .incorrect input { border: 2px solid var(--incorrect); } -.xmodule_display.xmodule_ProblemBlock .problem .capa_inputtype.textline > .incorrect .status .status-icon::after, .xmodule_display.xmodule_ProblemBlock .problem .inputtype.formulaequationinput > .incorrect .status .status-icon::after { +.xblock-display-problem .problem .capa_inputtype.textline > .incorrect .status .status-icon::after, .xblock-display-problem .problem .inputtype.formulaequationinput > .incorrect .status .status-icon::after { color: var(--incorrect); font-size: 1.2em; content: ""; } -.xmodule_display.xmodule_ProblemBlock .problem .capa_inputtype.textline > .partially-correct input, .xmodule_display.xmodule_ProblemBlock .problem .inputtype.formulaequationinput > .partially-correct input { +.xblock-display-problem .problem .capa_inputtype.textline > .partially-correct input, .xblock-display-problem .problem .inputtype.formulaequationinput > .partially-correct input { border: 2px solid var(--partially-correct); } -.xmodule_display.xmodule_ProblemBlock .problem .capa_inputtype.textline > .partially-correct .status .status-icon::after, .xmodule_display.xmodule_ProblemBlock .problem .inputtype.formulaequationinput > .partially-correct .status .status-icon::after { +.xblock-display-problem .problem .capa_inputtype.textline > .partially-correct .status .status-icon::after, .xblock-display-problem .problem .inputtype.formulaequationinput > .partially-correct .status .status-icon::after { color: var(--partially-correct); font-size: 1.2em; content: ""; } -.xmodule_display.xmodule_ProblemBlock .problem .capa_inputtype.textline > .correct input, .xmodule_display.xmodule_ProblemBlock .problem .inputtype.formulaequationinput > .correct input { +.xblock-display-problem .problem .capa_inputtype.textline > .correct input, .xblock-display-problem .problem .inputtype.formulaequationinput > .correct input { border: 2px solid var(--correct); } -.xmodule_display.xmodule_ProblemBlock .problem .capa_inputtype.textline > .correct .status .status-icon::after, .xmodule_display.xmodule_ProblemBlock .problem .inputtype.formulaequationinput > .correct .status .status-icon::after { +.xblock-display-problem .problem .capa_inputtype.textline > .correct .status .status-icon::after, .xblock-display-problem .problem .inputtype.formulaequationinput > .correct .status .status-icon::after { color: var(--correct); font-size: 1.2em; content: ""; } -.xmodule_display.xmodule_ProblemBlock .problem .capa_inputtype.textline > .submitted input, .xmodule_display.xmodule_ProblemBlock .problem .inputtype.formulaequationinput > .submitted input { +.xblock-display-problem .problem .capa_inputtype.textline > .submitted input, .xblock-display-problem .problem .inputtype.formulaequationinput > .submitted input { border: 2px solid var(--submitted); } -.xmodule_display.xmodule_ProblemBlock .problem .capa_inputtype.textline > .submitted .status, .xmodule_display.xmodule_ProblemBlock .problem .inputtype.formulaequationinput > .submitted .status { +.xblock-display-problem .problem .capa_inputtype.textline > .submitted .status, .xblock-display-problem .problem .inputtype.formulaequationinput > .submitted .status { content: ''; } -.xmodule_display.xmodule_ProblemBlock .problem .capa_inputtype.textline > .unanswered input, .xmodule_display.xmodule_ProblemBlock .problem .capa_inputtype.textline > .unsubmitted input, .xmodule_display.xmodule_ProblemBlock .problem .inputtype.formulaequationinput > .unanswered input, .xmodule_display.xmodule_ProblemBlock .problem .inputtype.formulaequationinput > .unsubmitted input { +.xblock-display-problem .problem .capa_inputtype.textline > .unanswered input, .xblock-display-problem .problem .capa_inputtype.textline > .unsubmitted input, .xblock-display-problem .problem .inputtype.formulaequationinput > .unanswered input, .xblock-display-problem .problem .inputtype.formulaequationinput > .unsubmitted input { border: 2px solid var(--gray-l4); } -.xmodule_display.xmodule_ProblemBlock .problem .capa_inputtype.textline > .unanswered .status .status-icon::after, .xmodule_display.xmodule_ProblemBlock .problem .capa_inputtype.textline > .unsubmitted .status .status-icon::after, .xmodule_display.xmodule_ProblemBlock .problem .inputtype.formulaequationinput > .unanswered .status .status-icon::after, .xmodule_display.xmodule_ProblemBlock .problem .inputtype.formulaequationinput > .unsubmitted .status .status-icon::after { +.xblock-display-problem .problem .capa_inputtype.textline > .unanswered .status .status-icon::after, .xblock-display-problem .problem .capa_inputtype.textline > .unsubmitted .status .status-icon::after, .xblock-display-problem .problem .inputtype.formulaequationinput > .unanswered .status .status-icon::after, .xblock-display-problem .problem .inputtype.formulaequationinput > .unsubmitted .status .status-icon::after { content: ''; display: inline-block; } -.xmodule_display.xmodule_ProblemBlock .problem .inputtype.formulaequationinput > div input { +.xblock-display-problem .problem .inputtype.formulaequationinput > div input { direction: ltr; text-align: left; } -.xmodule_display.xmodule_ProblemBlock .problem .trailing_text { +.xblock-display-problem .problem .trailing_text { margin-right: calc((var(--baseline) / 2)); display: inline-block; } -.xmodule_display.xmodule_ProblemBlock .problem .inputtype.option-input { +.xblock-display-problem .problem .inputtype.option-input { margin: 0 0 0 0 !important; } -.xmodule_display.xmodule_ProblemBlock .problem .inputtype.option-input .indicator-container { +.xblock-display-problem .problem .inputtype.option-input .indicator-container { display: inline-block; } -.xmodule_display.xmodule_ProblemBlock .problem .inputtype.option-input .indicator-container .status.correct::after, -.xmodule_display.xmodule_ProblemBlock .problem .inputtype.option-input .indicator-container .status.partially-correct::after, -.xmodule_display.xmodule_ProblemBlock .problem .inputtype.option-input .indicator-container .status.incorrect::after, -.xmodule_display.xmodule_ProblemBlock .problem .inputtype.option-input .indicator-container .status.submitted::after, -.xmodule_display.xmodule_ProblemBlock .problem .inputtype.option-input .indicator-container .status.unanswered::after { +.xblock-display-problem .problem .inputtype.option-input .indicator-container .status.correct::after, +.xblock-display-problem .problem .inputtype.option-input .indicator-container .status.partially-correct::after, +.xblock-display-problem .problem .inputtype.option-input .indicator-container .status.incorrect::after, +.xblock-display-problem .problem .inputtype.option-input .indicator-container .status.submitted::after, +.xblock-display-problem .problem .inputtype.option-input .indicator-container .status.unanswered::after { margin-left: 0; } -.xmodule_display.xmodule_ProblemBlock div.problem .CodeMirror { +.xblock-display-problem div.problem .CodeMirror { border: 1px solid black; font-size: 14px; line-height: 18px; resize: none; } -.xmodule_display.xmodule_ProblemBlock div.problem .CodeMirror .cm-tab { +.xblock-display-problem div.problem .CodeMirror .cm-tab { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAMCAYAAAAkuj5RAAAAAXNSR0IArs4c6QAAAGFJREFUSMft1LsRQFAQheHPowAKoACx3IgEKtaEHujDjORSgWTH/ZOdnZOcM/sgk/kFFWY0qV8foQwS4MKBCS3qR6ixBJvElOobYAtivseIE120FaowJPN75GMu8j/LfMwNjh4HUpwg4LUAAAAASUVORK5CYII=); background-position: right; background-repeat: no-repeat; } -.xmodule_display.xmodule_ProblemBlock div.problem .CodeMirror pre { +.xblock-display-problem div.problem .CodeMirror pre { overflow: hidden; margin: 0; padding: 0; @@ -762,7 +762,7 @@ resize: none; } -.xmodule_display.xmodule_ProblemBlock div.problem .CodeMirror pre.CodeMirror-cursor { +.xblock-display-problem div.problem .CodeMirror pre.CodeMirror-cursor { position: absolute; visibility: hidden; width: 0; @@ -770,27 +770,27 @@ border-left: 1px solid var(--black); } -.xmodule_display.xmodule_ProblemBlock div.problem .CodeMirror-focused pre.CodeMirror-cursor { +.xblock-display-problem div.problem .CodeMirror-focused pre.CodeMirror-cursor { visibility: visible; } -.xmodule_display.xmodule_ProblemBlock div.problem .CodeMirror-code pre { +.xblock-display-problem div.problem .CodeMirror-code pre { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } -.xmodule_display.xmodule_ProblemBlock div.problem .CodeMirror-scroll { +.xblock-display-problem div.problem .CodeMirror-scroll { margin-right: 0px; } -.xmodule_display.xmodule_ProblemBlock .capa-message { +.xblock-display-problem .capa-message { display: inline-block; color: var(--gray-d1); -webkit-font-smoothing: antialiased; } -.xmodule_display.xmodule_ProblemBlock div.problem .action { +.xblock-display-problem div.problem .action { min-height: var(--baseline); width: 100%; display: flex; @@ -801,45 +801,45 @@ flex-wrap: wrap; } -.xmodule_display.xmodule_ProblemBlock div.problem .action .problem-action-buttons-wrapper { +.xblock-display-problem div.problem .action .problem-action-buttons-wrapper { display: inline-flex; justify-content: flex-end; width: 100%; padding-bottom: var(--baseline); } -.xmodule_display.xmodule_ProblemBlock div.problem .action .problem-action-button-wrapper { +.xblock-display-problem div.problem .action .problem-action-button-wrapper { border-right: 1px solid var(--gray-300); padding: 0 13px; display: inline-block; } -.xmodule_display.xmodule_ProblemBlock div.problem .action .problem-action-button-wrapper:last-child { +.xblock-display-problem div.problem .action .problem-action-button-wrapper:last-child { border: none; padding-right: 0; } -.xmodule_display.xmodule_ProblemBlock div.problem .action .problem-action-btn { +.xblock-display-problem div.problem .action .problem-action-btn { border: none; max-width: 110px; } -.xmodule_display.xmodule_ProblemBlock div.problem .action .problem-action-btn:hover, .xmodule_display.xmodule_ProblemBlock div.problem .action .problem-action-btn:focus, .xmodule_display.xmodule_ProblemBlock div.problem .action .problem-action-btn:active { +.xblock-display-problem div.problem .action .problem-action-btn:hover, .xblock-display-problem div.problem .action .problem-action-btn:focus, .xblock-display-problem div.problem .action .problem-action-btn:active { color: var(--primary) !important; } -.xmodule_display.xmodule_ProblemBlock div.problem .action .problem-action-btn .icon { +.xblock-display-problem div.problem .action .problem-action-btn .icon { margin-bottom: calc(var(--baseline) / 10); display: block; } @media print { - .xmodule_display.xmodule_ProblemBlock div.problem .action .problem-action-btn { + .xblock-display-problem div.problem .action .problem-action-btn { display: none; } } -.xmodule_display.xmodule_ProblemBlock div.problem .action .submit-attempt-container { +.xblock-display-problem div.problem .action .submit-attempt-container { padding-bottom: var(--baseline); flex-grow: 1; display: flex; @@ -847,30 +847,30 @@ } @media (max-width: var(--bp-screen-lg)) { - .xmodule_display.xmodule_ProblemBlock div.problem .action .submit-attempt-container { + .xblock-display-problem div.problem .action .submit-attempt-container { max-width: 100%; padding-bottom: var(--baseline); } } -.xmodule_display.xmodule_ProblemBlock div.problem .action .submit-attempt-container .submit { +.xblock-display-problem div.problem .action .submit-attempt-container .submit { margin-right: calc((var(--baseline) / 2)); float: left; white-space: nowrap; } -.xmodule_display.xmodule_ProblemBlock div.problem .action .submit-attempt-container .submit-cta-description { +.xblock-display-problem div.problem .action .submit-attempt-container .submit-cta-description { color: var(--primary); font-size: small; padding-right: calc(var(--baseline) / 2); } -.xmodule_display.xmodule_ProblemBlock div.problem .action .submit-attempt-container .submit-cta-link-button { +.xblock-display-problem div.problem .action .submit-attempt-container .submit-cta-link-button { color: var(--primary); padding-right: calc(var(--baseline) / 4); } -.xmodule_display.xmodule_ProblemBlock div.problem .action .submission-feedback { +.xblock-display-problem div.problem .action .submission-feedback { margin-right: calc((var(--baseline) / 2)); margin-top: calc(var(--baseline) / 2); display: inline-block; @@ -880,11 +880,11 @@ vertical-align: middle; } -.xmodule_display.xmodule_ProblemBlock div.problem .action .submission-feedback.cta-enabled { +.xblock-display-problem div.problem .action .submission-feedback.cta-enabled { margin-top: 0; } -.xmodule_display.xmodule_ProblemBlock div.problem hr { +.xblock-display-problem div.problem hr { float: none; clear: both; margin: 0 0 .75rem; @@ -895,12 +895,12 @@ color: #ddd; } -.xmodule_display.xmodule_ProblemBlock div.problem .hidden { +.xblock-display-problem div.problem .hidden { display: none; visibility: hidden; } -.xmodule_display.xmodule_ProblemBlock div.problem +.xblock-display-problem div.problem var ( @@ -913,33 +913,33 @@ var width: auto ; } -.xmodule_display.xmodule_ProblemBlock div.problem center { +.xblock-display-problem div.problem center { display: block; margin: lh() 0; padding: lh(); border: 1px solid var(--gray-l3); } -.xmodule_display.xmodule_ProblemBlock div.problem .message { +.xblock-display-problem div.problem .message { font-size: inherit; } -.xmodule_display.xmodule_ProblemBlock div.problem .detailed-solution > p { +.xblock-display-problem div.problem .detailed-solution > p { margin: 0; } -.xmodule_display.xmodule_ProblemBlock div.problem .detailed-solution > p:first-child { +.xblock-display-problem div.problem .detailed-solution > p:first-child { margin-bottom: 0; } -.xmodule_display.xmodule_ProblemBlock div.problem .detailed-targeted-feedback > p, -.xmodule_display.xmodule_ProblemBlock div.problem .detailed-targeted-feedback-partially-correct > p, -.xmodule_display.xmodule_ProblemBlock div.problem .detailed-targeted-feedback-correct > p { +.xblock-display-problem div.problem .detailed-targeted-feedback > p, +.xblock-display-problem div.problem .detailed-targeted-feedback-partially-correct > p, +.xblock-display-problem div.problem .detailed-targeted-feedback-correct > p { margin: 0; font-weight: normal; } -.xmodule_display.xmodule_ProblemBlock div.problem div.capa_alert { +.xblock-display-problem div.problem div.capa_alert { margin-top: var(--baseline); padding: 8px 12px; border: 1px solid var(--warning-color); @@ -948,94 +948,94 @@ var font-size: 0.9em; } -.xmodule_display.xmodule_ProblemBlock div.problem .notification { +.xblock-display-problem div.problem .notification { float: left; margin-top: calc(var(--baseline) / 2); padding: calc((var(--baseline) / 2.5)) calc((var(--baseline) / 2)) calc((var(--baseline) / 5)) calc((var(--baseline) / 2)); line-height: var(--base-line-height); } -.xmodule_display.xmodule_ProblemBlock div.problem .notification.success { +.xblock-display-problem div.problem .notification.success { border-top: 3px solid var(--success); } -.xmodule_display.xmodule_ProblemBlock div.problem .notification.success .icon { +.xblock-display-problem div.problem .notification.success .icon { margin-right: 15px; color: var(--success); } -.xmodule_display.xmodule_ProblemBlock div.problem .notification.error { +.xblock-display-problem div.problem .notification.error { border-top: 3px solid var(--danger); } -.xmodule_display.xmodule_ProblemBlock div.problem .notification.error .icon { +.xblock-display-problem div.problem .notification.error .icon { margin-right: 15px; color: var(--danger); } -.xmodule_display.xmodule_ProblemBlock div.problem .notification.warning { +.xblock-display-problem div.problem .notification.warning { border-top: 3px solid var(--warning); } -.xmodule_display.xmodule_ProblemBlock div.problem .notification.warning .icon { +.xblock-display-problem div.problem .notification.warning .icon { margin-right: 15px; color: var(--warning); } -.xmodule_display.xmodule_ProblemBlock div.problem .notification.general { +.xblock-display-problem div.problem .notification.general { border-top: 3px solid var(--general-color-accent); } -.xmodule_display.xmodule_ProblemBlock div.problem .notification.general .icon { +.xblock-display-problem div.problem .notification.general .icon { margin-right: 15px; color: var(--general-color-accent); } -.xmodule_display.xmodule_ProblemBlock div.problem .notification.problem-hint { +.xblock-display-problem div.problem .notification.problem-hint { border: 1px solid var(--uxpl-gray-background); border-radius: 6px; } -.xmodule_display.xmodule_ProblemBlock div.problem .notification.problem-hint .icon { +.xblock-display-problem div.problem .notification.problem-hint .icon { margin-right: calc(3 * var(--baseline) / 4); color: var(--uxpl-gray-dark); } -.xmodule_display.xmodule_ProblemBlock div.problem .notification.problem-hint li { +.xblock-display-problem div.problem .notification.problem-hint li { color: var(--uxpl-gray-base); } -.xmodule_display.xmodule_ProblemBlock div.problem .notification.problem-hint li strong { +.xblock-display-problem div.problem .notification.problem-hint li strong { color: var(--uxpl-gray-dark); } -.xmodule_display.xmodule_ProblemBlock div.problem .notification .icon { +.xblock-display-problem div.problem .notification .icon { float: left; position: relative; top: calc(var(--baseline) / 5); } -.xmodule_display.xmodule_ProblemBlock div.problem .notification .notification-message { +.xblock-display-problem div.problem .notification .notification-message { display: inline-block; width: 69.38776%; margin-bottom: 8px; } -.xmodule_display.xmodule_ProblemBlock div.problem .notification .notification-message ol { +.xblock-display-problem div.problem .notification .notification-message ol { list-style: none outside none; padding: 0; margin: 0; } -.xmodule_display.xmodule_ProblemBlock div.problem .notification .notification-message ol li:not(:last-child) { +.xblock-display-problem div.problem .notification .notification-message ol li:not(:last-child) { margin-bottom: calc(var(--baseline) / 4); } -.xmodule_display.xmodule_ProblemBlock div.problem .notification .notification-btn-wrapper { +.xblock-display-problem div.problem .notification .notification-btn-wrapper { float: right; } -.xmodule_display.xmodule_ProblemBlock div.problem .notification-btn { +.xblock-display-problem div.problem .notification-btn { float: right; padding: calc((var(--baseline) / 10)) calc((var(--baseline) / 4)); min-width: calc((var(--baseline) * 3)); @@ -1043,36 +1043,36 @@ var clear: both; } -.xmodule_display.xmodule_ProblemBlock div.problem .notification-btn:first-child { +.xblock-display-problem div.problem .notification-btn:first-child { margin-bottom: calc(var(--baseline) / 4); } -.xmodule_display.xmodule_ProblemBlock div.problem button:hover { +.xblock-display-problem div.problem button:hover { background-image: none; box-shadow: none; } -.xmodule_display.xmodule_ProblemBlock div.problem button:focus { +.xblock-display-problem div.problem button:focus { box-shadow: none; } -.xmodule_display.xmodule_ProblemBlock div.problem button.btn-default { +.xblock-display-problem div.problem button.btn-default { background-color: transparent; } -.xmodule_display.xmodule_ProblemBlock div.problem button.btn-brand:hover { +.xblock-display-problem div.problem button.btn-brand:hover { background-color: var(--btn-brand-focus-background); } -.xmodule_display.xmodule_ProblemBlock div.problem .review-btn { +.xblock-display-problem div.problem .review-btn { color: var(--blue); } -.xmodule_display.xmodule_ProblemBlock div.problem .review-btn.sr { +.xblock-display-problem div.problem .review-btn.sr { color: var(--blue); } -.xmodule_display.xmodule_ProblemBlock div.problem div.capa_reset { +.xblock-display-problem div.problem div.capa_reset { padding: 25px; background-color: var(--error-color-light); border: 1px solid var(--error-color); @@ -1082,19 +1082,19 @@ var margin-bottom: calc(var(--baseline) / 2); } -.xmodule_display.xmodule_ProblemBlock div.problem .capa_reset > h2 { +.xblock-display-problem div.problem .capa_reset > h2 { color: #a00; } -.xmodule_display.xmodule_ProblemBlock div.problem .capa_reset li { +.xblock-display-problem div.problem .capa_reset li { font-size: 0.9em; } -.xmodule_display.xmodule_ProblemBlock div.problem .hints { +.xblock-display-problem div.problem .hints { border: 1px solid var(--gray-l3); } -.xmodule_display.xmodule_ProblemBlock div.problem .hints h3 { +.xblock-display-problem div.problem .hints h3 { padding: 9px; border-bottom: 1px solid #e3e3e3; background: #eee; @@ -1102,44 +1102,44 @@ var font-size: 1em; } -.xmodule_display.xmodule_ProblemBlock div.problem .hints div { +.xblock-display-problem div.problem .hints div { border-bottom: 1px solid #ddd; } -.xmodule_display.xmodule_ProblemBlock div.problem .hints div:last-child { +.xblock-display-problem div.problem .hints div:last-child { border-bottom: none; } -.xmodule_display.xmodule_ProblemBlock div.problem .hints div p { +.xblock-display-problem div.problem .hints div p { margin-bottom: 0; } -.xmodule_display.xmodule_ProblemBlock div.problem .hints div header a { +.xblock-display-problem div.problem .hints div header a { display: block; padding: 9px; background: var(--gray-l6); box-shadow: inset 0 0 0 1px var(--white); } -.xmodule_display.xmodule_ProblemBlock div.problem .hints div > section { +.xblock-display-problem div.problem .hints div > section { padding: 9px; } -.xmodule_display.xmodule_ProblemBlock div.problem .test { +.xblock-display-problem div.problem .test { padding-top: 18px; } -.xmodule_display.xmodule_ProblemBlock div.problem .test header { +.xblock-display-problem div.problem .test header { margin-bottom: 12px; } -.xmodule_display.xmodule_ProblemBlock div.problem .test header h3 { +.xblock-display-problem div.problem .test header h3 { color: #aaa; font-style: normal; font-size: 0.9em; } -.xmodule_display.xmodule_ProblemBlock div.problem .test > section { +.xblock-display-problem div.problem .test > section { position: relative; margin-bottom: calc((var(--baseline) / 2)); padding: 9px 9px var(--baseline); @@ -1149,15 +1149,15 @@ var box-shadow: inset 0 0 0 1px #eee; } -.xmodule_display.xmodule_ProblemBlock div.problem .test > section p:last-of-type { +.xblock-display-problem div.problem .test > section p:last-of-type { margin-bottom: 0; } -.xmodule_display.xmodule_ProblemBlock div.problem .test > section .shortform { +.xblock-display-problem div.problem .test > section .shortform { margin-bottom: .6em; } -.xmodule_display.xmodule_ProblemBlock div.problem .test > section a.full { +.xblock-display-problem div.problem .test > section a.full { position: absolute; top: 0; right: 0; @@ -1171,7 +1171,7 @@ var font-size: 1em; } -.xmodule_display.xmodule_ProblemBlock div.problem .test > section a.full.full-top { +.xblock-display-problem div.problem .test > section a.full.full-top { position: absolute; top: 1px; right: 0; @@ -1179,7 +1179,7 @@ var left: 0; } -.xmodule_display.xmodule_ProblemBlock div.problem .test > section a.full.full-bottom { +.xblock-display-problem div.problem .test > section a.full.full-bottom { position: absolute; top: auto; right: 0; @@ -1187,7 +1187,7 @@ var left: 0; } -.xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section { +.xblock-display-problem div.problem .external-grader-message section { padding-top: calc((var(--baseline) * 1.5)); padding-left: var(--baseline); background-color: #fafafa; @@ -1196,106 +1196,106 @@ var font-family: monospace; } -.xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section header { +.xblock-display-problem div.problem .external-grader-message section header { font-size: 1.4em; } -.xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section .longform { +.xblock-display-problem div.problem .external-grader-message section .longform { margin: 0; padding: 0; } -.xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section .longform .result-errors { +.xblock-display-problem div.problem .external-grader-message section .longform .result-errors { margin: calc((var(--baseline) / 4)); padding: calc((var(--baseline) / 2)) calc((var(--baseline) / 2)) calc((var(--baseline) / 2)) calc((var(--baseline) * 2)); background: url("var(--static-path)/images/incorrect-icon.png") center left no-repeat; } -.xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section .longform .result-errors li { +.xblock-display-problem div.problem .external-grader-message section .longform .result-errors li { color: #b00; } -.xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section .longform .result-output { +.xblock-display-problem div.problem .external-grader-message section .longform .result-output { margin: calc(var(--baseline) / 4); padding: var(--baseline) 0 calc((var(--baseline) * 0.75)) 50px; border-top: 1px solid #ddd; border-left: var(--baseline) solid #fafafa; } -.xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section .longform .result-output h4 { +.xblock-display-problem div.problem .external-grader-message section .longform .result-output h4 { font-size: 1em; font-family: monospace; } -.xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section .longform .result-output dl { +.xblock-display-problem div.problem .external-grader-message section .longform .result-output dl { margin: 0; } -.xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section .longform .result-output dt { +.xblock-display-problem div.problem .external-grader-message section .longform .result-output dt { margin-top: var(--baseline); } -.xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section .longform .result-output dd { +.xblock-display-problem div.problem .external-grader-message section .longform .result-output dd { margin-left: 24pt; } -.xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section .longform .result-correct { +.xblock-display-problem div.problem .external-grader-message section .longform .result-correct { background: url("var(--static-path)/images/correct-icon.png") left 20px no-repeat; } -.xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section .longform .result-correct .result-actual-output { +.xblock-display-problem div.problem .external-grader-message section .longform .result-correct .result-actual-output { color: #090; } -.xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section .longform .result-partially-correct { +.xblock-display-problem div.problem .external-grader-message section .longform .result-partially-correct { background: url("var(--static-path)/images/partially-correct-icon.png") left 20px no-repeat; } -.xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section .longform .result-partially-correct .result-actual-output { +.xblock-display-problem div.problem .external-grader-message section .longform .result-partially-correct .result-actual-output { color: #090; } -.xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section .longform .result-incorrect { +.xblock-display-problem div.problem .external-grader-message section .longform .result-incorrect { background: url("var(--static-path)/images/incorrect-icon.png") left 20px no-repeat; } -.xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section .longform .result-incorrect .result-actual-output { +.xblock-display-problem div.problem .external-grader-message section .longform .result-incorrect .result-actual-output { color: #b00; } -.xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section .longform .markup-text { +.xblock-display-problem div.problem .external-grader-message section .longform .markup-text { margin: calc((var(--baseline) / 4)); padding: var(--baseline) 0 15px 50px; border-top: 1px solid #ddd; border-left: 20px solid #fafafa; } -.xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section .longform .markup-text bs { +.xblock-display-problem div.problem .external-grader-message section .longform .markup-text bs { color: #b00; } -.xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section .longform .markup-text bg { +.xblock-display-problem div.problem .external-grader-message section .longform .markup-text bg { color: #bda046; } -.xmodule_display.xmodule_ProblemBlock div.problem .rubric tr { +.xblock-display-problem div.problem .rubric tr { margin: calc((var(--baseline) / 2)) 0; height: 100%; } -.xmodule_display.xmodule_ProblemBlock div.problem .rubric td { +.xblock-display-problem div.problem .rubric td { margin: calc((var(--baseline) / 2)) 0; padding: var(--baseline) 0; height: 100%; } -.xmodule_display.xmodule_ProblemBlock div.problem .rubric th { +.xblock-display-problem div.problem .rubric th { margin: calc((var(--baseline) / 4)); padding: calc((var(--baseline) / 4)); } -.xmodule_display.xmodule_ProblemBlock div.problem .rubric label, -.xmodule_display.xmodule_ProblemBlock div.problem .rubric .view-only { +.xblock-display-problem div.problem .rubric label, +.xblock-display-problem div.problem .rubric .view-only { position: relative; display: inline-block; margin: 3px; @@ -1308,59 +1308,59 @@ var font-size: .9em; } -.xmodule_display.xmodule_ProblemBlock div.problem .rubric .grade { +.xblock-display-problem div.problem .rubric .grade { position: absolute; right: 0; bottom: 0; margin: calc((var(--baseline) / 2)); } -.xmodule_display.xmodule_ProblemBlock div.problem .rubric .selected-grade { +.xblock-display-problem div.problem .rubric .selected-grade { background: #666; color: white; } -.xmodule_display.xmodule_ProblemBlock div.problem .rubric input[type=radio]:checked + label { +.xblock-display-problem div.problem .rubric input[type=radio]:checked + label { background: #666; color: white; } -.xmodule_display.xmodule_ProblemBlock div.problem .rubric input[class='score-selection'] { +.xblock-display-problem div.problem .rubric input[class='score-selection'] { display: none; } -.xmodule_display.xmodule_ProblemBlock div.problem .annotation-input { +.xblock-display-problem div.problem .annotation-input { margin: 0 0 1em 0; border: 1px solid var(--gray-l3); border-radius: 1em; /* for debugging the input value field. enable the debug flag on the inputtype */ } -.xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .annotation-header { +.xblock-display-problem div.problem .annotation-input .annotation-header { padding: .5em 1em; border-bottom: 1px solid var(--gray-l3); } -.xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .annotation-body { +.xblock-display-problem div.problem .annotation-input .annotation-body { padding: .5em 1em; } -.xmodule_display.xmodule_ProblemBlock div.problem .annotation-input a.annotation-return { +.xblock-display-problem div.problem .annotation-input a.annotation-return { float: right; font: inherit; font-weight: normal; } -.xmodule_display.xmodule_ProblemBlock div.problem .annotation-input a.annotation-return::after { +.xblock-display-problem div.problem .annotation-input a.annotation-return::after { content: " \2191"; } -.xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .block, .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input ul.tags { +.xblock-display-problem div.problem .annotation-input .block, .xblock-display-problem div.problem .annotation-input ul.tags { margin: .5em 0; padding: 0; } -.xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .block-highlight { +.xblock-display-problem div.problem .annotation-input .block-highlight { padding: .5em; border: 1px solid rgba(214, 214, 0, 0.3); background-color: rgba(255, 255, 10, 0.3); @@ -1368,54 +1368,54 @@ var font-style: normal; } -.xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .block-comment { +.xblock-display-problem div.problem .annotation-input .block-comment { font-style: italic; } -.xmodule_display.xmodule_ProblemBlock div.problem .annotation-input ul.tags { +.xblock-display-problem div.problem .annotation-input ul.tags { display: block; margin-left: 1em; list-style-type: none; } -.xmodule_display.xmodule_ProblemBlock div.problem .annotation-input ul.tags li { +.xblock-display-problem div.problem .annotation-input ul.tags li { position: relative; display: block; margin: 1em 0 0 0; } -.xmodule_display.xmodule_ProblemBlock div.problem .annotation-input ul.tags li .tag { +.xblock-display-problem div.problem .annotation-input ul.tags li .tag { display: inline-block; margin-left: calc((var(--baseline) * 2)); border: 1px solid #666666; } -.xmodule_display.xmodule_ProblemBlock div.problem .annotation-input ul.tags li .tag.selected { +.xblock-display-problem div.problem .annotation-input ul.tags li .tag.selected { background-color: rgba(255, 255, 10, 0.3); } -.xmodule_display.xmodule_ProblemBlock div.problem .annotation-input ul.tags li .tag-status { +.xblock-display-problem div.problem .annotation-input ul.tags li .tag-status { position: absolute; left: 0; } -.xmodule_display.xmodule_ProblemBlock div.problem .annotation-input ul.tags li .tag-status, .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input ul.tags li .tag { +.xblock-display-problem div.problem .annotation-input ul.tags li .tag-status, .xblock-display-problem div.problem .annotation-input ul.tags li .tag { padding: .25em .5em; } -.xmodule_display.xmodule_ProblemBlock div.problem .annotation-input textarea.comment { +.xblock-display-problem div.problem .annotation-input textarea.comment { padding: 0.2em 0.4em; width: 100%; height: 7.2em; line-height: 1.4em; } -.xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .answer-annotation { +.xblock-display-problem div.problem .annotation-input .answer-annotation { display: block; margin: 0; } -.xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .debug-value { +.xblock-display-problem div.problem .annotation-input .debug-value { margin: 1em 0; padding: 1em; border: 1px solid var(--black); @@ -1423,43 +1423,43 @@ var color: var(--white); } -.xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .debug-value input[type="text"] { +.xblock-display-problem div.problem .annotation-input .debug-value input[type="text"] { width: 100%; } -.xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .debug-value pre { +.xblock-display-problem div.problem .annotation-input .debug-value pre { background-color: var(--gray-l3); color: var(--black); } -.xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .debug-value::before { +.xblock-display-problem div.problem .annotation-input .debug-value::before { display: block; content: "debug input value"; font-size: 1.5em; } -.xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input[type="text"] { +.xblock-display-problem div.problem .choicetextgroup input[type="text"] { margin-bottom: 0.5em; } -.xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup label.choicetextgroup_correct input[type="text"], .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup section.choicetextgroup_correct input[type="text"] { +.xblock-display-problem div.problem .choicetextgroup label.choicetextgroup_correct input[type="text"], .xblock-display-problem div.problem .choicetextgroup section.choicetextgroup_correct input[type="text"] { border-color: var(--correct); } -.xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup label.choicetextgroup_partially-correct input[type="text"], .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup section.choicetextgroup_partially-correct input[type="text"] { +.xblock-display-problem div.problem .choicetextgroup label.choicetextgroup_partially-correct input[type="text"], .xblock-display-problem div.problem .choicetextgroup section.choicetextgroup_partially-correct input[type="text"] { border-color: var(--partially-correct); } -.xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup label.choicetextgroup_show_correct::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup section.choicetextgroup_show_correct::after { +.xblock-display-problem div.problem .choicetextgroup label.choicetextgroup_show_correct::after, .xblock-display-problem div.problem .choicetextgroup section.choicetextgroup_show_correct::after { margin-left: calc((var(--baseline) * 0.75)); content: url("var(--static-path)/images/correct-icon.png"); } -.xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup span.mock_label { +.xblock-display-problem div.problem .choicetextgroup span.mock_label { cursor: default; } -.xmodule_display.xmodule_ProblemBlock div.problem .imageinput.capa_inputtype .status { +.xblock-display-problem div.problem .imageinput.capa_inputtype .status { display: inline-block; position: relative; top: 3px; @@ -1467,37 +1467,37 @@ var height: 20px; } -.xmodule_display.xmodule_ProblemBlock div.problem .imageinput.capa_inputtype .status.unsubmitted .status-icon, .xmodule_display.xmodule_ProblemBlock div.problem .imageinput.capa_inputtype .status.unanswered .status-icon { +.xblock-display-problem div.problem .imageinput.capa_inputtype .status.unsubmitted .status-icon, .xblock-display-problem div.problem .imageinput.capa_inputtype .status.unanswered .status-icon { content: ''; } -.xmodule_display.xmodule_ProblemBlock div.problem .imageinput.capa_inputtype .status.unsubmitted .status-message, .xmodule_display.xmodule_ProblemBlock div.problem .imageinput.capa_inputtype .status.unanswered .status-message { +.xblock-display-problem div.problem .imageinput.capa_inputtype .status.unsubmitted .status-message, .xblock-display-problem div.problem .imageinput.capa_inputtype .status.unanswered .status-message { display: none; } -.xmodule_display.xmodule_ProblemBlock div.problem .imageinput.capa_inputtype .correct .status-icon::after { +.xblock-display-problem div.problem .imageinput.capa_inputtype .correct .status-icon::after { color: var(--correct); font-size: 1.2em; content: ""; } -.xmodule_display.xmodule_ProblemBlock div.problem .imageinput.capa_inputtype .incorrect .status-icon::after { +.xblock-display-problem div.problem .imageinput.capa_inputtype .incorrect .status-icon::after { color: var(--incorrect); font-size: 1.2em; content: ""; } -.xmodule_display.xmodule_ProblemBlock div.problem .imageinput.capa_inputtype .partially-correct .status-icon::after { +.xblock-display-problem div.problem .imageinput.capa_inputtype .partially-correct .status-icon::after { color: var(--partially-correct); font-size: 1.2em; content: ""; } -.xmodule_display.xmodule_ProblemBlock div.problem .imageinput.capa_inputtype .submitted { +.xblock-display-problem div.problem .imageinput.capa_inputtype .submitted { content: ''; } -.xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .tag-status { +.xblock-display-problem div.problem .annotation-input .tag-status { display: inline-block; position: relative; top: 3px; @@ -1505,37 +1505,37 @@ var height: 20px; } -.xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .tag-status.unsubmitted .status-icon, .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .tag-status.unanswered .status-icon { +.xblock-display-problem div.problem .annotation-input .tag-status.unsubmitted .status-icon, .xblock-display-problem div.problem .annotation-input .tag-status.unanswered .status-icon { content: ''; } -.xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .tag-status.unsubmitted .status-message, .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .tag-status.unanswered .status-message { +.xblock-display-problem div.problem .annotation-input .tag-status.unsubmitted .status-message, .xblock-display-problem div.problem .annotation-input .tag-status.unanswered .status-message { display: none; } -.xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .correct .status-icon::after { +.xblock-display-problem div.problem .annotation-input .correct .status-icon::after { color: var(--correct); font-size: 1.2em; content: ""; } -.xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .incorrect .status-icon::after { +.xblock-display-problem div.problem .annotation-input .incorrect .status-icon::after { color: var(--incorrect); font-size: 1.2em; content: ""; } -.xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .partially-correct .status-icon::after { +.xblock-display-problem div.problem .annotation-input .partially-correct .status-icon::after { color: var(--partially-correct); font-size: 1.2em; content: ""; } -.xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .submitted { +.xblock-display-problem div.problem .annotation-input .submitted { content: ''; } -.xmodule_display.xmodule_ProblemBlock .problems-wrapper .loading-spinner { +.xblock-display-problem .problems-wrapper .loading-spinner { text-align: center; color: var(--gray-d1); }