@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700"); .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 { font-family: FontAwesome; -webkit-font-smoothing: antialiased; display: inline-block; speak: none; } .xmodule_display.xmodule_ProblemBlock h2 { margin-top: 0; margin-bottom: calc((var(--baseline, 20px) * 0.75)); } .xmodule_display.xmodule_ProblemBlock h2.problem-header { display: inline-block; } .xmodule_display.xmodule_ProblemBlock h2.problem-header section.staff { margin-top: calc((var(--baseline, 20px) * 1.5)); font-size: 80%; } @media print { .xmodule_display.xmodule_ProblemBlock h2 { display: block; width: auto; border-right: 0; } } .xmodule_display.xmodule_ProblemBlock .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 { margin-top: calc((var(--baseline, 20px) / 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 { margin-right: calc((var(--baseline, 20px) / 4)); } .xmodule_display.xmodule_ProblemBlock .feedback-hint-incorrect .icon { color: var(--incorrect, #b20610); } .xmodule_display.xmodule_ProblemBlock .feedback-hint-partially-correct .icon, .xmodule_display.xmodule_ProblemBlock .feedback-hint-correct .icon { color: var(--correct, #008100); } .xmodule_display.xmodule_ProblemBlock .feedback-hint-text { color: #646464; } .xmodule_display.xmodule_ProblemBlock .problem-hint { margin-bottom: 20px; width: 100%; } .xmodule_display.xmodule_ProblemBlock .hint-label { display: inline-block; padding-right: 0.5em; } .xmodule_display.xmodule_ProblemBlock .hint-text { display: inline-block; } .xmodule_display.xmodule_ProblemBlock .feedback-hint-multi .hint-text { display: block; } .xmodule_display.xmodule_ProblemBlock iframe[seamless] { overflow: hidden; padding: 0; border: 0 none transparent; background-color: transparent; } .xmodule_display.xmodule_ProblemBlock .inline-error { color: var(--error-color-dark, #95050d); } .xmodule_display.xmodule_ProblemBlock div.problem-progress { display: inline-block; color: var(--gray-d1, #5e5e5e); font-size: 0.875em; } .xmodule_display.xmodule_ProblemBlock div.problem { padding-top: var(--baseline, 20px); } @media print { .xmodule_display.xmodule_ProblemBlock div.problem { display: block; padding: 0; width: auto; } .xmodule_display.xmodule_ProblemBlock div.problem canvas, .xmodule_display.xmodule_ProblemBlock div.problem img { page-break-inside: avoid; } } .xmodule_display.xmodule_ProblemBlock div.problem input.math { direction: ltr; } .xmodule_display.xmodule_ProblemBlock div.problem .inline { display: inline; } .xmodule_display.xmodule_ProblemBlock div.problem .inline + p { margin-top: var(--baseline, 20px); } .xmodule_display.xmodule_ProblemBlock div.problem .question-description { color: var(--gray-d1, #5e5e5e); font-size: var(--small-font-size, 80%); } .xmodule_display.xmodule_ProblemBlock div.problem form > label, .xmodule_display.xmodule_ProblemBlock div.problem .problem-group-label { display: block; margin-bottom: var(--baseline, 20px); font: inherit; color: inherit; -webkit-font-smoothing: initial; } .xmodule_display.xmodule_ProblemBlock div.problem .problem-group-label + .question-description { margin-top: calc(-1 * var(--baseline, 20px)); } .xmodule_display.xmodule_ProblemBlock .wrapper-problem-response + .wrapper-problem-response, .xmodule_display.xmodule_ProblemBlock .wrapper-problem-response + p { margin-top: calc((var(--baseline, 20px) * 1.5)); } .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup { margin: var(--baseline, 20px) 0 0 0; min-width: 100px; width: auto !important; width: 100px; } .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup:after, .xmodule_display.xmodule_ProblemBlock 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 { box-sizing: border-box; display: inline-block; clear: both; margin-bottom: calc((var(--baseline, 20px) / 2)); border: 2px solid var(--gray-l4, #e4e4e4); border-radius: 3px; padding: calc((var(--baseline, 20px) / 2)); width: 100%; } .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup label::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup label::after { margin-left: calc((var(--baseline, 20px) * 0.75)); } .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup .indicator-container, .xmodule_display.xmodule_ProblemBlock 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 { 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"] { margin: calc((var(--baseline, 20px) / 4)); margin-right: calc((var(--baseline, 20px) / 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 { border: 2px solid var(--blue, #0075b4); } .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 { border: 2px solid var(--correct, #008100); } .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 { color: var(--correct, #008100); 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 { border: 2px solid var(--partially-correct, #008100); } .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 { color: var(--partially-correct, #008100); 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 { border: 2px solid var(--incorrect, #b20610); } .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 { color: var(--incorrect, #b20610); 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 { border: 2px solid var(--submitted, #0075b4); } .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup .field { position: relative; } .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup label { padding: calc((var(--baseline, 20px) / 2)); padding-left: calc((var(--baseline, 20px) * 2.3)); position: relative; font-size: var(--base-font-size, 18px); line-height: normal; cursor: pointer; } .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input[type="radio"], .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup input[type="checkbox"] { left: 0.5625em; position: absolute; top: 0.43em; width: calc(var(--baseline, 20px) * 1.1); height: calc(var(--baseline, 20px) * 1.1); z-index: 1; } .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup legend { margin-bottom: var(--baseline, 20px); max-width: 100%; white-space: normal; } .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup legend + .question-description { margin-top: calc(-1 * var(--baseline, 20px)); max-width: 100%; white-space: normal; } .xmodule_display.xmodule_ProblemBlock div.problem .indicator-container { margin-left: calc((var(--baseline, 20px) * 0.75)); } .xmodule_display.xmodule_ProblemBlock div.problem .indicator-container .status { width: var(--baseline, 20px); } .xmodule_display.xmodule_ProblemBlock div.problem .indicator-container .status.correct .status-icon::after { color: var(--correct, #008100); font-size: 1.2em; content: ""; } .xmodule_display.xmodule_ProblemBlock div.problem .indicator-container .status.partially-correct .status-icon::after { color: var(--partially-correct, #008100); font-size: 1.2em; content: ""; } .xmodule_display.xmodule_ProblemBlock div.problem .indicator-container .status.incorrect .status-icon::after { color: var(--incorrect, #b20610); 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 { content: ""; } .xmodule_display.xmodule_ProblemBlock div.problem ol.enumerate li::before { display: block; visibility: hidden; height: 0; content: " "; } .xmodule_display.xmodule_ProblemBlock div.problem .solution-span > span { margin: var(--baseline, 20px) 0; display: block; position: relative; } .xmodule_display.xmodule_ProblemBlock div.problem .solution-span > span:empty { display: none; } .xmodule_display.xmodule_ProblemBlock div.problem .targeted-feedback-span > span { display: block; position: relative; } .xmodule_display.xmodule_ProblemBlock div.problem .targeted-feedback-span > span:empty { display: none; } .xmodule_display.xmodule_ProblemBlock div.problem div p.answer { margin-top: -2px; } .xmodule_display.xmodule_ProblemBlock div.problem div p span.clarification i { font-style: normal; } .xmodule_display.xmodule_ProblemBlock div.problem div p span.clarification i:hover { color: var(--blue, #0075b4); } .xmodule_display.xmodule_ProblemBlock div.problem div.correct input, .xmodule_display.xmodule_ProblemBlock div.problem div.ui-icon-check input { border-color: var(--correct, #008100); } .xmodule_display.xmodule_ProblemBlock div.problem div.partially-correct input, .xmodule_display.xmodule_ProblemBlock div.problem div.ui-icon-check input { border-color: var(--partially-correct, #008100); } .xmodule_display.xmodule_ProblemBlock div.problem div.processing input { border-color: #aaa; } .xmodule_display.xmodule_ProblemBlock div.problem div.ui-icon-close input { border-color: var(--incorrect, #b20610); } .xmodule_display.xmodule_ProblemBlock div.problem div.incorrect input, .xmodule_display.xmodule_ProblemBlock div.problem div.incomplete input { border-color: var(--incorrect, #b20610); } .xmodule_display.xmodule_ProblemBlock div.problem div.submitted input, .xmodule_display.xmodule_ProblemBlock div.problem div.ui-icon-check input { border-color: var(--submitted, #0075b4); } .xmodule_display.xmodule_ProblemBlock div.problem div p.answer { display: inline-block; margin-top: calc((var(--baseline, 20px) / 2)); margin-bottom: 0; } .xmodule_display.xmodule_ProblemBlock div.problem div p.answer::before { display: inline; content: "Answer: "; } .xmodule_display.xmodule_ProblemBlock div.problem div p.answer:empty::before { display: none; } .xmodule_display.xmodule_ProblemBlock div.problem div div.equation { clear: both; margin-top: 3px; } .xmodule_display.xmodule_ProblemBlock div.problem div div.equation .MathJax_Display { width: auto; } .xmodule_display.xmodule_ProblemBlock div.problem div div.equation img.loading { padding-left: calc((var(--baseline, 20px) / 2)); display: inline-block; } .xmodule_display.xmodule_ProblemBlock 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 { padding: 6px; min-width: 30px; border: 1px solid #e3e3e3; border-radius: 4px; background: #f1f1f1; } @media print { .xmodule_display.xmodule_ProblemBlock div.problem div [id^="display"].equation { display: none; } } .xmodule_display.xmodule_ProblemBlock div.problem div span.ui-icon-bullet { display: inline-block; position: relative; top: 4px; width: 14px; height: 14px; background: var(--icon-unanswered) center center no-repeat; } .xmodule_display.xmodule_ProblemBlock div.problem div span.processing, .xmodule_display.xmodule_ProblemBlock div.problem div span.ui-icon-processing { display: inline-block; position: relative; top: 6px; width: 25px; height: 20px; background: var(--icon-spinner) center center no-repeat; } .xmodule_display.xmodule_ProblemBlock div.problem div span.ui-icon-check { display: inline-block; position: relative; top: 3px; width: 25px; height: 20px; background: var(--icon-correct) center center no-repeat; } .xmodule_display.xmodule_ProblemBlock div.problem div span.incomplete, .xmodule_display.xmodule_ProblemBlock div.problem div span.ui-icon-close { display: inline-block; position: relative; top: 3px; width: 20px; height: 20px; background: var(--icon-incorrect) center center no-repeat; } .xmodule_display.xmodule_ProblemBlock div.problem div .reload { float: right; margin: calc((var(--baseline, 20px) / 2)); } .xmodule_display.xmodule_ProblemBlock div.problem div .grader-status { margin: calc(var(--baseline, 20px) / 2) 0; padding: calc(var(--baseline, 20px) / 2); border-radius: 5px; background: var(--gray-l6, #f8f8f8); } .xmodule_display.xmodule_ProblemBlock div.problem div .grader-status:after { content: ""; display: table; clear: both; } .xmodule_display.xmodule_ProblemBlock div.problem div .grader-status span { display: block; float: left; overflow: hidden; margin: -7px 7px 0 0; text-indent: -9999px; } .xmodule_display.xmodule_ProblemBlock div.problem div .grader-status .grading { margin: 0 7px 0 0; padding-left: 25px; background: var(--icon-info) left center no-repeat; text-indent: 0; } .xmodule_display.xmodule_ProblemBlock 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 { margin-top: var(--baseline, 20px); padding: var(--baseline, 20px) 0 0 0; border: 0; border-top: 1px solid #eee; background: var(--white, #fff); } .xmodule_display.xmodule_ProblemBlock div.problem div .grader-status.file p.debug { display: none; } .xmodule_display.xmodule_ProblemBlock div.problem div .grader-status.file input { float: left; } .xmodule_display.xmodule_ProblemBlock div.problem div .evaluation p { margin-bottom: calc((var(--baseline, 20px) / 5)); } .xmodule_display.xmodule_ProblemBlock div.problem div .feedback-on-feedback { margin-right: var(--baseline, 20px); height: 100px; } .xmodule_display.xmodule_ProblemBlock div.problem div .evaluation-response header { text-align: right; } .xmodule_display.xmodule_ProblemBlock div.problem div .evaluation-response header a { font-size: 0.85em; } .xmodule_display.xmodule_ProblemBlock 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 { display: inline; margin-left: 50px; } .xmodule_display.xmodule_ProblemBlock 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 { font-size: 0.9em; } .xmodule_display.xmodule_ProblemBlock div.problem div .submit-message-container { margin: var(--baseline, 20px) 0; } .xmodule_display.xmodule_ProblemBlock div.problem div.inline > span { display: inline; } .xmodule_display.xmodule_ProblemBlock div.problem ul { padding-left: 1em; margin-bottom: lh(); margin-left: 0.75em; margin-left: 0.75rem; list-style: disc outside none; } .xmodule_display.xmodule_ProblemBlock div.problem ol { padding-left: 1em; margin-bottom: lh(); margin-left: 0.75em; margin-left: 0.75rem; list-style: decimal outside none; } .xmodule_display.xmodule_ProblemBlock div.problem dl { line-height: 1.4em; } .xmodule_display.xmodule_ProblemBlock div.problem dl dd { margin-bottom: 0; } .xmodule_display.xmodule_ProblemBlock div.problem dd { margin-left: 0.5em; margin-left: 0.5rem; } .xmodule_display.xmodule_ProblemBlock div.problem li { margin-bottom: lh(0.5); line-height: 1.4em; } .xmodule_display.xmodule_ProblemBlock div.problem li:last-child { margin-bottom: 0; } .xmodule_display.xmodule_ProblemBlock div.problem p { margin-bottom: lh(); } .xmodule_display.xmodule_ProblemBlock div.problem table { margin: lh() 0; border-collapse: collapse; table-layout: auto; max-width: 100%; } .xmodule_display.xmodule_ProblemBlock div.problem table td.cont-justified-left, .xmodule_display.xmodule_ProblemBlock 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 { 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 { text-align: center !important; } .xmodule_display.xmodule_ProblemBlock div.problem table th { text-align: left; } .xmodule_display.xmodule_ProblemBlock 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 { padding: 0.25em 0.75em 0.25em 0; padding: 0.25rem 0.75rem 0.25rem 0; } .xmodule_display.xmodule_ProblemBlock div.problem table caption { margin-bottom: 0.75em; margin-bottom: 0.75rem; padding: 0.75em 0; padding: 0.75rem 0; 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 { vertical-align: middle; } .xmodule_display.xmodule_ProblemBlock div.problem code { margin: 0 2px; padding: 0 5px; border: 1px solid #eaeaea; border-radius: 3px; background-color: var(--gray-l6, #f8f8f8); white-space: nowrap; font-size: 0.9em; } .xmodule_display.xmodule_ProblemBlock div.problem pre { overflow: auto; padding: 6px calc(var(--baseline, 20px) / 2); border: 1px solid var(--gray-l3, #c8c8c8); border-radius: 3px; background-color: var(--gray-l6, #f8f8f8); font-size: 0.9em; line-height: 1.4; } .xmodule_display.xmodule_ProblemBlock div.problem pre > code { margin: 0; padding: 0; border: none; background: transparent; white-space: pre; } .xmodule_display.xmodule_ProblemBlock .problem .capa_inputtype.textline input, .xmodule_display.xmodule_ProblemBlock .problem .inputtype.formulaequationinput input { box-sizing: border-box; border: 2px solid var(--gray-l4, #e4e4e4); border-radius: 3px; min-width: 160px; height: 46px; } .xmodule_display.xmodule_ProblemBlock .problem .capa_inputtype.textline .status, .xmodule_display.xmodule_ProblemBlock .problem .inputtype.formulaequationinput .status { display: inline-block; margin-top: calc((var(--baseline, 20px) / 2)); background: none; } .xmodule_display.xmodule_ProblemBlock .problem .capa_inputtype.textline > .incorrect input, .xmodule_display.xmodule_ProblemBlock .problem .inputtype.formulaequationinput > .incorrect input { border: 2px solid var(--incorrect, #b20610); } .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 { color: var(--incorrect, #b20610); 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 { border: 2px solid var(--partially-correct, #008100); } .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 { color: var(--partially-correct, #008100); font-size: 1.2em; content: ""; } .xmodule_display.xmodule_ProblemBlock .problem .capa_inputtype.textline > .correct input, .xmodule_display.xmodule_ProblemBlock .problem .inputtype.formulaequationinput > .correct input { border: 2px solid var(--correct, #008100); } .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 { color: var(--correct, #008100); font-size: 1.2em; content: ""; } .xmodule_display.xmodule_ProblemBlock .problem .capa_inputtype.textline > .submitted, .xmodule_display.xmodule_ProblemBlock .problem .inputtype.formulaequationinput > .submitted { margin: var(--baseline, 20px) 0 0 0; } .xmodule_display.xmodule_ProblemBlock .problem .capa_inputtype.textline > .submitted input, .xmodule_display.xmodule_ProblemBlock .problem .inputtype.formulaequationinput > .submitted input { border: 2px solid var(--submitted, #0075b4); } .xmodule_display.xmodule_ProblemBlock .problem .capa_inputtype.textline > .submitted .status, .xmodule_display.xmodule_ProblemBlock .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 { border: 2px solid var(--gray-l4, #e4e4e4); } .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 { content: ""; display: inline-block; } .xmodule_display.xmodule_ProblemBlock .problem .inputtype.formulaequationinput > div input { direction: ltr; text-align: left; } .xmodule_display.xmodule_ProblemBlock .problem .trailing_text { margin-right: calc((var(--baseline, 20px) / 2)); display: inline-block; } .xmodule_display.xmodule_ProblemBlock .problem .inputtype.option-input { margin: var(--baseline, 20px) 0 0 0 !important; } .xmodule_display.xmodule_ProblemBlock .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 { margin-left: 0; } .xmodule_display.xmodule_ProblemBlock div.problem .CodeMirror { border: 1px solid black; font-size: 14px; line-height: 18px; resize: none; } .xmodule_display.xmodule_ProblemBlock 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 { overflow: hidden; margin: 0; padding: 0; border-width: 0; border-radius: 0; background: transparent; white-space: pre; word-wrap: normal; font-size: inherit; font-family: inherit; resize: none; } .xmodule_display.xmodule_ProblemBlock div.problem .CodeMirror pre.CodeMirror-cursor { position: absolute; visibility: hidden; width: 0; border-right: none; border-left: 1px solid var(--black, #000); } .xmodule_display.xmodule_ProblemBlock div.problem .CodeMirror-focused pre.CodeMirror-cursor { visibility: visible; } .xmodule_display.xmodule_ProblemBlock div.problem .CodeMirror-code pre { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } .xmodule_display.xmodule_ProblemBlock div.problem .CodeMirror-scroll { margin-right: 0; } .xmodule_display.xmodule_ProblemBlock .capa-message { display: inline-block; color: var(--gray-d1, #5e5e5e); -webkit-font-smoothing: antialiased; } .xmodule_display.xmodule_ProblemBlock div.problem .action { min-height: var(--baseline, 20px); width: 100%; display: flex; display: -ms-flexbox; -ms-flex-align: start; flex-direction: row; align-items: center; flex-wrap: wrap; } .xmodule_display.xmodule_ProblemBlock div.problem .action .problem-action-buttons-wrapper { display: inline-flex; justify-content: flex-end; width: 100%; padding-bottom: var(--baseline, 20px); } .xmodule_display.xmodule_ProblemBlock div.problem .action .problem-action-button-wrapper { border-right: 1px solid var(--gray-300, #d9d9d9); padding: 0 13px; display: inline-block; } .xmodule_display.xmodule_ProblemBlock div.problem .action .problem-action-button-wrapper:last-child { border: none; padding-right: 0; } .xmodule_display.xmodule_ProblemBlock 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 { color: var(--primary, #0075b4) !important; } .xmodule_display.xmodule_ProblemBlock div.problem .action .problem-action-btn .icon { margin-bottom: calc(var(--baseline, 20px) / 10); display: block; } @media print { .xmodule_display.xmodule_ProblemBlock div.problem .action .problem-action-btn { display: none; } } .xmodule_display.xmodule_ProblemBlock div.problem .action .submit-attempt-container { padding-bottom: var(--baseline, 20px); flex-grow: 1; display: flex; align-items: center; } @media (max-width: var(--bp-screen-lg, 1024px)) { .xmodule_display.xmodule_ProblemBlock div.problem .action .submit-attempt-container { max-width: 100%; padding-bottom: var(--baseline, 20px); } } .xmodule_display.xmodule_ProblemBlock div.problem .action .submit-attempt-container .submit { margin-right: calc((var(--baseline, 20px) / 2)); float: left; white-space: nowrap; } .xmodule_display.xmodule_ProblemBlock div.problem .action .submit-attempt-container .submit-cta-description { color: var(--primary, #0075b4); font-size: small; padding-right: calc(var(--baseline, 20px) / 2); } .xmodule_display.xmodule_ProblemBlock div.problem .action .submit-attempt-container .submit-cta-link-button { color: var(--primary, #0075b4); padding-right: calc(var(--baseline, 20px) / 4); } .xmodule_display.xmodule_ProblemBlock div.problem .action .submission-feedback { margin-right: calc((var(--baseline, 20px) / 2)); margin-top: calc(var(--baseline, 20px) / 2); display: inline-block; color: var(--gray-d1, #5e5e5e); font-size: var(--medium-font-size, 0.9em); -webkit-font-smoothing: antialiased; vertical-align: middle; } .xmodule_display.xmodule_ProblemBlock div.problem .action .submission-feedback.cta-enabled { margin-top: 0; } .xmodule_display.xmodule_ProblemBlock div.problem hr { float: none; clear: both; margin: 0 0 0.75rem; width: 100%; height: 1px; border: none; background: #ddd; color: #ddd; } .xmodule_display.xmodule_ProblemBlock div.problem .hidden { display: none; visibility: hidden; } .xmodule_display.xmodule_ProblemBlock div.problem var (--all-text-inputs) { display: inline; width: auto; } .xmodule_display.xmodule_ProblemBlock div.problem center { display: block; margin: lh() 0; padding: lh(); border: 1px solid var(--gray-l3, #c8c8c8); } .xmodule_display.xmodule_ProblemBlock div.problem .message { font-size: inherit; } .xmodule_display.xmodule_ProblemBlock div.problem .detailed-solution > p { margin: 0; } .xmodule_display.xmodule_ProblemBlock 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 { margin: 0; font-weight: normal; } .xmodule_display.xmodule_ProblemBlock div.problem div.capa_alert { margin-top: var(--baseline, 20px); padding: 8px 12px; border: 1px solid var(--warning-color, #ffc01f); border-radius: 3px; background: var(--warning-color-accent, #fffcdd); font-size: 0.9em; } .xmodule_display.xmodule_ProblemBlock div.problem .notification { float: left; margin-top: calc(var(--baseline, 20px) / 2); padding: calc((var(--baseline, 20px) / 2.5)) calc((var(--baseline, 20px) / 2)) calc((var(--baseline, 20px) / 5)) calc((var(--baseline, 20px) / 2)); line-height: var(--base-line-height, 1.5em); } .xmodule_display.xmodule_ProblemBlock div.problem .notification.success { border-top: 3px solid var(--success, #008100); } .xmodule_display.xmodule_ProblemBlock div.problem .notification.success .icon { margin-right: 15px; color: var(--success, #008100); } .xmodule_display.xmodule_ProblemBlock div.problem .notification.error { border-top: 3px solid var(--danger, #b20610); } .xmodule_display.xmodule_ProblemBlock div.problem .notification.error .icon { margin-right: 15px; color: var(--danger, #b20610); } .xmodule_display.xmodule_ProblemBlock div.problem .notification.warning { border-top: 3px solid var(--warning, #e2c01f); } .xmodule_display.xmodule_ProblemBlock div.problem .notification.warning .icon { margin-right: 15px; color: var(--warning, #e2c01f); } .xmodule_display.xmodule_ProblemBlock div.problem .notification.general { border-top: 3px solid var(--general-color-accent, #0075b4); } .xmodule_display.xmodule_ProblemBlock div.problem .notification.general .icon { margin-right: 15px; color: var(--general-color-accent, #0075b4); } .xmodule_display.xmodule_ProblemBlock div.problem .notification.problem-hint { border: 1px solid var(--uxpl-gray-background, #d9d9d9); border-radius: 6px; } .xmodule_display.xmodule_ProblemBlock div.problem .notification.problem-hint .icon { margin-right: calc(3 * var(--baseline, 20px) / 4); color: var(--uxpl-gray-dark, #111111); } .xmodule_display.xmodule_ProblemBlock div.problem .notification.problem-hint li[class*="hint-index-"] { color: var(--uxpl-gray-base, #414141); } .xmodule_display.xmodule_ProblemBlock div.problem .notification.problem-hint li[class*="hint-index-"] > strong { color: var(--uxpl-gray-dark, #111111); } .xmodule_display.xmodule_ProblemBlock div.problem .notification .icon { float: left; position: relative; top: calc(var(--baseline, 20px) / 5); } .xmodule_display.xmodule_ProblemBlock div.problem .notification .notification-message { display: inline-block; width: 69.38776%; margin-bottom: 8px; } .xmodule_display.xmodule_ProblemBlock 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) { margin-bottom: calc(var(--baseline, 20px) / 4); } .xmodule_display.xmodule_ProblemBlock div.problem .notification li[class*="hint-index-"] ul, .xmodule_display.xmodule_ProblemBlock div.problem .notification li[class*="hint-index-"] ol { padding: 0 0 0 1em; margin-left: 0.75rem; } .xmodule_display.xmodule_ProblemBlock div.problem .notification li[class*="hint-index-"] ol { list-style: decimal outside none; } .xmodule_display.xmodule_ProblemBlock div.problem .notification .notification-btn-wrapper { float: right; } .xmodule_display.xmodule_ProblemBlock div.problem .notification-btn { float: right; padding: calc((var(--baseline, 20px) / 10)) calc((var(--baseline, 20px) / 4)); min-width: calc((var(--baseline, 20px) * 3)); display: block; clear: both; } .xmodule_display.xmodule_ProblemBlock div.problem .notification-btn:first-child { margin-bottom: calc(var(--baseline, 20px) / 4); } .xmodule_display.xmodule_ProblemBlock div.problem button:hover { background-image: none; box-shadow: none; } .xmodule_display.xmodule_ProblemBlock div.problem button:focus { box-shadow: none; } .xmodule_display.xmodule_ProblemBlock div.problem button.btn-default { background-color: transparent; } .xmodule_display.xmodule_ProblemBlock div.problem button.btn-brand:hover { background-color: var(--btn-brand-focus-background, #065683); } .xmodule_display.xmodule_ProblemBlock div.problem .review-btn { color: var(--blue, #0075b4); } .xmodule_display.xmodule_ProblemBlock div.problem .review-btn.sr { color: var(--blue, #0075b4); } .xmodule_display.xmodule_ProblemBlock div.problem div.capa_reset { padding: 25px; background-color: var(--error-color-light, #f95861); border: 1px solid var(--error-color, #cb0712); border-radius: 3px; font-size: 1em; margin-top: calc(var(--baseline, 20px) / 2); margin-bottom: calc(var(--baseline, 20px) / 2); } .xmodule_display.xmodule_ProblemBlock div.problem .capa_reset > h2 { color: #a00; } .xmodule_display.xmodule_ProblemBlock div.problem .capa_reset li { font-size: 0.9em; } .xmodule_display.xmodule_ProblemBlock div.problem .hints { border: 1px solid var(--gray-l3, #c8c8c8); } .xmodule_display.xmodule_ProblemBlock div.problem .hints h3 { padding: 9px; border-bottom: 1px solid #e3e3e3; background: #eee; text-shadow: 0 1px 0 var(--white, #fff); font-size: 1em; } .xmodule_display.xmodule_ProblemBlock div.problem .hints div { border-bottom: 1px solid #ddd; } .xmodule_display.xmodule_ProblemBlock div.problem .hints div:last-child { border-bottom: none; } .xmodule_display.xmodule_ProblemBlock div.problem .hints div p { margin-bottom: 0; } .xmodule_display.xmodule_ProblemBlock div.problem .hints div header a { display: block; padding: 9px; background: var(--gray-l6, #f8f8f8); box-shadow: inset 0 0 0 1px var(--white, #fff); } .xmodule_display.xmodule_ProblemBlock div.problem .hints div > section { padding: 9px; } .xmodule_display.xmodule_ProblemBlock div.problem .test { padding-top: 18px; } .xmodule_display.xmodule_ProblemBlock div.problem .test header { margin-bottom: 12px; } .xmodule_display.xmodule_ProblemBlock div.problem .test header h3 { color: #aaa; font-style: normal; font-size: 0.9em; } .xmodule_display.xmodule_ProblemBlock div.problem .test > section { position: relative; margin-bottom: calc((var(--baseline, 20px) / 2)); padding: 9px 9px var(--baseline, 20px); border: 1px solid #ddd; border-radius: 3px; background: var(--white, #fff); box-shadow: inset 0 0 0 1px #eee; } .xmodule_display.xmodule_ProblemBlock div.problem .test > section p:last-of-type { margin-bottom: 0; } .xmodule_display.xmodule_ProblemBlock div.problem .test > section .shortform { margin-bottom: 0.6em; } .xmodule_display.xmodule_ProblemBlock div.problem .test > section a.full { position: absolute; top: 0; right: 0; bottom: 1px; left: 0; box-sizing: border-box; display: block; padding: calc((var(--baseline, 20px) / 5)); background: var(--gray-l4, #e4e4e4); text-align: right; font-size: 1em; } .xmodule_display.xmodule_ProblemBlock div.problem .test > section a.full.full-top { position: absolute; top: 1px; right: 0; bottom: auto; left: 0; } .xmodule_display.xmodule_ProblemBlock div.problem .test > section a.full.full-bottom { position: absolute; top: auto; right: 0; bottom: 1px; left: 0; } .xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section { padding-top: calc((var(--baseline, 20px) * 1.5)); padding-left: var(--baseline, 20px); background-color: #fafafa; color: #2c2c2c; font-size: 1em; font-family: monospace; } .xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section header { font-size: 1.4em; } .xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section .longform { margin: 0; padding: 0; } .xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section .longform .result-errors { margin: calc((var(--baseline, 20px) / 4)); padding: calc((var(--baseline, 20px) / 2)) calc((var(--baseline, 20px) / 2)) calc((var(--baseline, 20px) / 2)) calc((var(--baseline, 20px) * 2)); background: var(--icon-incorrect) center left no-repeat; } .xmodule_display.xmodule_ProblemBlock 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 { margin: calc(var(--baseline, 20px) / 4); padding: var(--baseline, 20px) 0 calc((var(--baseline, 20px) * 0.75)) 50px; border-top: 1px solid #ddd; border-left: var(--baseline, 20px) solid #fafafa; } .xmodule_display.xmodule_ProblemBlock 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 { margin: 0; } .xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section .longform .result-output dt { margin-top: var(--baseline, 20px); } .xmodule_display.xmodule_ProblemBlock 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 { background: var(--icon-correct) left 20px no-repeat; } .xmodule_display.xmodule_ProblemBlock 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 { background: var(--icon-partially-correct) left 20px no-repeat; } .xmodule_display.xmodule_ProblemBlock 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 { background: var(--icon-incorrect) left 20px no-repeat; } .xmodule_display.xmodule_ProblemBlock 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 { margin: calc((var(--baseline, 20px) / 4)); padding: var(--baseline, 20px) 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 { color: #b00; } .xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section .longform .markup-text bg { color: #bda046; } .xmodule_display.xmodule_ProblemBlock div.problem .rubric tr { margin: calc((var(--baseline, 20px) / 2)) 0; height: 100%; } .xmodule_display.xmodule_ProblemBlock div.problem .rubric td { margin: calc((var(--baseline, 20px) / 2)) 0; padding: var(--baseline, 20px) 0; height: 100%; } .xmodule_display.xmodule_ProblemBlock div.problem .rubric th { margin: calc((var(--baseline, 20px) / 4)); padding: calc((var(--baseline, 20px) / 4)); } .xmodule_display.xmodule_ProblemBlock div.problem .rubric label, .xmodule_display.xmodule_ProblemBlock div.problem .rubric .view-only { position: relative; display: inline-block; margin: 3px; padding: calc((var(--baseline, 20px) * 0.75)); min-width: 50px; min-height: 50px; width: 150px; height: 100%; background-color: var(--gray-l3, #c8c8c8); font-size: 0.9em; } .xmodule_display.xmodule_ProblemBlock div.problem .rubric .grade { position: absolute; right: 0; bottom: 0; margin: calc((var(--baseline, 20px) / 2)); } .xmodule_display.xmodule_ProblemBlock div.problem .rubric .selected-grade { background: #666; color: white; } .xmodule_display.xmodule_ProblemBlock div.problem .rubric input[type="radio"]:checked + label { background: #666; color: white; } .xmodule_display.xmodule_ProblemBlock div.problem .rubric input[class="score-selection"] { display: none; } .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input { margin: 0 0 1em 0; border: 1px solid var(--gray-l3, #c8c8c8); 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 { padding: 0.5em 1em; border-bottom: 1px solid var(--gray-l3, #c8c8c8); } .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .annotation-body { padding: 0.5em 1em; } .xmodule_display.xmodule_ProblemBlock 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 { content: " \2191"; } .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .block, .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input ul.tags { margin: 0.5em 0; padding: 0; } .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .block-highlight { padding: 0.5em; border: 1px solid rgba(214, 214, 0, 0.3); background-color: rgba(255, 255, 10, 0.3); color: #333; font-style: normal; } .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .block-comment { font-style: italic; } .xmodule_display.xmodule_ProblemBlock 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 { position: relative; display: block; margin: 1em 0 0 0; } .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input ul.tags li .tag { display: inline-block; margin-left: calc((var(--baseline, 20px) * 2)); border: 1px solid #666666; } .xmodule_display.xmodule_ProblemBlock 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 { 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 { padding: 0.25em 0.5em; } .xmodule_display.xmodule_ProblemBlock 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 { display: block; margin: 0; } .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .debug-value { margin: 1em 0; padding: 1em; border: 1px solid var(--black, #000); background-color: #999; color: var(--white, #fff); } .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .debug-value input[type="text"] { width: 100%; } .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .debug-value pre { background-color: var(--gray-l3, #c8c8c8); color: var(--black, #000); } .xmodule_display.xmodule_ProblemBlock 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"] { 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"] { border-color: var(--correct, #008100); } .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"] { border-color: var(--partially-correct, #008100); } .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup label.choicetextgroup_show_correct::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup section.choicetextgroup_show_correct::after { margin-left: calc((var(--baseline, 20px) * 0.75)); content: var(--icon-correct); } .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup span.mock_label { cursor: default; } .xmodule_display.xmodule_ProblemBlock div.problem .imageinput.capa_inputtype .status { display: inline-block; position: relative; top: 3px; width: 25px; 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 { 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 { display: none; } .xmodule_display.xmodule_ProblemBlock div.problem .imageinput.capa_inputtype .correct .status-icon::after { color: var(--correct, #008100); font-size: 1.2em; content: ""; } .xmodule_display.xmodule_ProblemBlock div.problem .imageinput.capa_inputtype .incorrect .status-icon::after { color: var(--incorrect, #b20610); font-size: 1.2em; content: ""; } .xmodule_display.xmodule_ProblemBlock div.problem .imageinput.capa_inputtype .partially-correct .status-icon::after { color: var(--partially-correct, #008100); font-size: 1.2em; content: ""; } .xmodule_display.xmodule_ProblemBlock div.problem .imageinput.capa_inputtype .submitted { content: ""; } .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .tag-status { display: inline-block; position: relative; top: 3px; width: 25px; 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 { 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 { display: none; } .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .correct .status-icon::after { color: var(--correct, #008100); font-size: 1.2em; content: ""; } .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .incorrect .status-icon::after { color: var(--incorrect, #b20610); font-size: 1.2em; content: ""; } .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .partially-correct .status-icon::after { color: var(--partially-correct, #008100); font-size: 1.2em; content: ""; } .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .submitted { content: ""; } .xmodule_display.xmodule_ProblemBlock .problems-wrapper .loading-spinner { text-align: center; color: var(--gray-d1, #5e5e5e); }