diff --git a/scripts/compile_sass.py b/scripts/compile_sass.py
index ec1efee24d2b..14b84d003af6 100755
--- a/scripts/compile_sass.py
+++ b/scripts/compile_sass.py
@@ -352,18 +352,6 @@ def compile_sass_dir(
                     repo / "lms" / "static" / "sass",
                 ],
             )
-            compile_sass_dir(
-                "Compiling built-in XBlock Sass for default LMS",
-                repo / "xmodule" / "assets",
-                repo / "lms" / "static" / "css",
-                includes=[
-                    *common_includes,
-                    repo / "lms" / "static" / "sass" / "partials",
-                    repo / "cms" / "static" / "sass" / "partials",
-                    repo / "lms" / "static" / "sass",
-                    repo / "cms" / "static" / "sass",
-                ],
-            )
         if not skip_cms:
             compile_sass_dir(
                 "Compiling default CMS Sass",
@@ -376,18 +364,6 @@ def compile_sass_dir(
                     repo / "cms" / "static" / "sass",
                 ],
             )
-            compile_sass_dir(
-                "Compiling built-in XBlock Sass for default CMS",
-                repo / "xmodule" / "assets",
-                repo / "cms" / "static" / "css",
-                includes=[
-                    *common_includes,
-                    repo / "lms" / "static" / "sass" / "partials",
-                    repo / "cms" / "static" / "sass" / "partials",
-                    repo / "lms" / "static" / "sass",
-                    repo / "cms" / "static" / "sass",
-                ],
-            )
         click.secho(f"Done compiling default Sass!", fg="cyan", bold=True)
         click.echo()
 
@@ -429,20 +405,6 @@ def compile_sass_dir(
                 ],
                 tolerate_missing=True,
             )
-            compile_sass_dir(
-                "Compiling built-in XBlock Sass for themed LMS",
-                repo / "xmodule" / "assets",
-                theme / "lms" / "static" / "css",
-                includes=[
-                    *common_includes,
-                    theme / "lms" / "static" / "sass" / "partials",
-                    theme / "cms" / "static" / "sass" / "partials",
-                    repo / "lms" / "static" / "sass" / "partials",
-                    repo / "cms" / "static" / "sass" / "partials",
-                    repo / "lms" / "static" / "sass",
-                    repo / "cms" / "static" / "sass",
-                ],
-            )
         if not skip_cms:
             compile_sass_dir(
                 "Compiling default CMS Sass with themed partials",
@@ -470,20 +432,6 @@ def compile_sass_dir(
                 ],
                 tolerate_missing=True,
             )
-            compile_sass_dir(
-                "Compiling built-in XBlock Sass for themed CMS",
-                repo / "xmodule" / "assets",
-                theme / "cms" / "static" / "css",
-                includes=[
-                    *common_includes,
-                    theme / "lms" / "static" / "sass" / "partials",
-                    theme / "cms" / "static" / "sass" / "partials",
-                    repo / "lms" / "static" / "sass" / "partials",
-                    repo / "cms" / "static" / "sass" / "partials",
-                    repo / "lms" / "static" / "sass",
-                    repo / "cms" / "static" / "sass",
-                ],
-            )
         click.secho(f"Done compiling Sass for theme at {theme}!", fg="cyan", bold=True)
         click.echo()
 
diff --git a/xmodule/annotatable_block.py b/xmodule/annotatable_block.py
index e41e2b17a52f..cec677f6c5d5 100644
--- a/xmodule/annotatable_block.py
+++ b/xmodule/annotatable_block.py
@@ -11,7 +11,7 @@
 from openedx.core.djangolib.markup import HTML, Text
 from xmodule.editing_block import EditingMixin
 from xmodule.raw_block import RawMixin
-from xmodule.util.builtin_assets import add_webpack_js_to_fragment, add_sass_to_fragment
+from xmodule.util.builtin_assets import add_webpack_js_to_fragment, add_css_to_fragment
 from xmodule.xml_block import XmlMixin
 from xmodule.x_module import (
     ResourceTemplates,
@@ -180,7 +180,7 @@ def student_view(self, context):  # lint-amnesty, pylint: disable=unused-argumen
         """
         fragment = Fragment()
         fragment.add_content(self.get_html())
-        add_sass_to_fragment(fragment, 'AnnotatableBlockDisplay.scss')
+        add_css_to_fragment(fragment, 'AnnotatableBlockDisplay.css')
         add_webpack_js_to_fragment(fragment, 'AnnotatableBlockDisplay')
         shim_xmodule_js(fragment, 'Annotatable')
 
@@ -193,7 +193,7 @@ def studio_view(self, _context):
         fragment = Fragment(
             self.runtime.service(self, 'mako').render_cms_template(self.mako_template, self.get_context())
         )
-        add_sass_to_fragment(fragment, 'AnnotatableBlockEditor.scss')
+        add_css_to_fragment(fragment, 'AnnotatableBlockEditor.css')
         add_webpack_js_to_fragment(fragment, 'AnnotatableBlockEditor')
         shim_xmodule_js(fragment, self.studio_js_module_name)
         return fragment
diff --git a/xmodule/assets/AnnotatableBlockDisplay.css b/xmodule/assets/AnnotatableBlockDisplay.css
new file mode 100644
index 000000000000..6ac353ad5435
--- /dev/null
+++ b/xmodule/assets/AnnotatableBlockDisplay.css
@@ -0,0 +1,197 @@
+@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700");
+/* line 1, /openedx/edx-platform/xmodule/assets/AnnotatableBlockDisplay.scss */
+.xmodule_display.xmodule_AnnotatableBlock {
+  /* TODO: move top-level variables to a common _variables.scss.
+ * NOTE: These variables were only added here because when this was integrated with the CMS,
+ * SASS compilation errors were triggered because the CMS didn't have the same variables defined
+ * that the LMS did, so the quick fix was to localize the LMS variables not shared by the CMS.
+ * -Abarrett and Vshnayder
+ */
+  /* stylelint-disable-line */
+  /* stylelint-disable-line */ }
+  /* line 15, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+  .xmodule_display.xmodule_AnnotatableBlock .annotatable-wrapper {
+    position: relative; }
+  /* line 19, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+  .xmodule_display.xmodule_AnnotatableBlock .annotatable-header {
+    margin-bottom: 0.5em; }
+  /* line 23, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+  .xmodule_display.xmodule_AnnotatableBlock .annotatable-section {
+    position: relative;
+    padding: 0.5em 1em;
+    border: 1px solid var(--gray-l3);
+    border-radius: 0.5em;
+    margin-bottom: 0.5em; }
+    /* line 30, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+    .xmodule_display.xmodule_AnnotatableBlock .annotatable-section.shaded {
+      background-color: #ededed; }
+    /* line 32, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+    .xmodule_display.xmodule_AnnotatableBlock .annotatable-section .annotatable-section-title {
+      font-weight: bold; }
+      /* line 34, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+      .xmodule_display.xmodule_AnnotatableBlock .annotatable-section .annotatable-section-title a {
+        font-weight: normal; }
+    /* line 37, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+    .xmodule_display.xmodule_AnnotatableBlock .annotatable-section .annotatable-section-body {
+      border-top: 1px solid var(--gray-l3);
+      margin-top: 0.5em;
+      padding-top: 0.5em; }
+      /* line 15, /openedx/edx-platform/common/static/sass/bourbon/addons/_clearfix.scss */
+      .xmodule_display.xmodule_AnnotatableBlock .annotatable-section .annotatable-section-body:after {
+        content: "";
+        display: table;
+        clear: both; }
+    /* line 45, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+    .xmodule_display.xmodule_AnnotatableBlock .annotatable-section ul.instructions-template {
+      list-style: disc;
+      margin-left: 4em; }
+      /* line 48, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+      .xmodule_display.xmodule_AnnotatableBlock .annotatable-section ul.instructions-template b {
+        font-weight: bold; }
+      /* line 49, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+      .xmodule_display.xmodule_AnnotatableBlock .annotatable-section ul.instructions-template i {
+        font-style: italic; }
+      /* line 51, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+      .xmodule_display.xmodule_AnnotatableBlock .annotatable-section ul.instructions-template code {
+        display: inline;
+        white-space: pre;
+        font-family: Courier New, monospace; }
+  /* line 59, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+  .xmodule_display.xmodule_AnnotatableBlock .annotatable-toggle {
+    position: absolute;
+    right: 0;
+    margin: 2px 1em 2px 0; }
+    /* line 63, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+    .xmodule_display.xmodule_AnnotatableBlock .annotatable-toggle.expanded::after {
+      content: " \2191"; }
+    /* line 64, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+    .xmodule_display.xmodule_AnnotatableBlock .annotatable-toggle.collapsed::after {
+      content: " \2193"; }
+  /* line 67, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+  .xmodule_display.xmodule_AnnotatableBlock .annotatable-span {
+    display: inline; }
+    /* line 88, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+    .xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight {
+      background-color: rgba(255, 255, 10, 0.3); }
+      /* line 90, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+      .xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight.selected {
+        background-color: rgba(255, 255, 10, 0.9); }
+    /* line 94, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+    .xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-yellow {
+      background-color: rgba(255, 255, 10, 0.3); }
+      /* line 96, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+      .xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-yellow.selected {
+        background-color: rgba(255, 255, 10, 0.9); }
+    /* line 94, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+    .xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-red {
+      background-color: rgba(178, 19, 16, 0.3); }
+      /* line 96, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+      .xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-red.selected {
+        background-color: rgba(178, 19, 16, 0.9); }
+    /* line 94, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+    .xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-orange {
+      background-color: rgba(255, 165, 0, 0.3); }
+      /* line 96, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+      .xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-orange.selected {
+        background-color: rgba(255, 165, 0, 0.9); }
+    /* line 94, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+    .xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-green {
+      background-color: rgba(25, 255, 132, 0.3); }
+      /* line 96, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+      .xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-green.selected {
+        background-color: rgba(25, 255, 132, 0.9); }
+    /* line 94, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+    .xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-blue {
+      background-color: rgba(35, 163, 255, 0.3); }
+      /* line 96, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+      .xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-blue.selected {
+        background-color: rgba(35, 163, 255, 0.9); }
+    /* line 94, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+    .xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-purple {
+      background-color: rgba(115, 9, 178, 0.3); }
+      /* line 96, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+      .xmodule_display.xmodule_AnnotatableBlock .annotatable-span.highlight-purple.selected {
+        background-color: rgba(115, 9, 178, 0.9); }
+    /* line 100, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+    .xmodule_display.xmodule_AnnotatableBlock .annotatable-span.hide {
+      cursor: none;
+      background-color: inherit; }
+      /* line 104, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+      .xmodule_display.xmodule_AnnotatableBlock .annotatable-span.hide .annotatable-icon {
+        display: none; }
+    /* line 109, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+    .xmodule_display.xmodule_AnnotatableBlock .annotatable-span .annotatable-comment {
+      display: none; }
+  /* line 114, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+  .xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip {
+    font-size: 0.875em;
+    border: 1px solid #333;
+    border-radius: 1em;
+    background-color: rgba(0, 0, 0, 0.85);
+    color: var(--white);
+    -webkit-font-smoothing: antialiased; }
+    /* line 122, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+    .xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip .ui-tooltip-titlebar {
+      font-size: 1em;
+      color: inherit;
+      background-color: transparent;
+      padding: calc((var(--baseline)/4)) calc((var(--baseline)/2));
+      border: none; }
+      /* line 129, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+      .xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip .ui-tooltip-titlebar .ui-tooltip-title {
+        padding: calc((var(--baseline)/4)) 0;
+        border-bottom: 2px solid #333;
+        font-weight: bold; }
+      /* line 135, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+      .xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip .ui-tooltip-titlebar .ui-tooltip-icon {
+        right: 10px;
+        background: #333; }
+      /* line 140, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+      .xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip .ui-tooltip-titlebar .ui-state-hover {
+        color: inherit;
+        border: 1px solid var(--gray-l3); }
+    /* line 146, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+    .xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip .ui-tooltip-content {
+      color: inherit;
+      font-size: 0.875em;
+      text-align: left;
+      font-weight: 400;
+      padding: 0 calc((var(--baseline)/2)) calc((var(--baseline)/2)) calc((var(--baseline)/2));
+      background-color: transparent;
+      border-color: transparent; }
+    /* line 156, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+    .xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip p {
+      color: inherit;
+      line-height: normal; }
+  /* line 162, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+  .xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip-annotatable {
+    max-width: 375px; }
+    /* line 165, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+    .xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip-annotatable .ui-tooltip-content {
+      padding: 0 calc((var(--baseline)/2)); }
+      /* line 168, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+      .xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip-annotatable .ui-tooltip-content .annotatable-comment {
+        display: block;
+        margin: 0 0 calc((var(--baseline)/2)) 0;
+        max-height: 225px;
+        overflow: auto;
+        line-height: normal; }
+      /* line 176, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+      .xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip-annotatable .ui-tooltip-content .annotatable-reply {
+        display: block;
+        border-top: 2px solid #333;
+        padding: calc((var(--baseline)/4)) 0;
+        margin: 0;
+        text-align: center; }
+    /* line 185, /openedx/edx-platform/xmodule/assets/annotatable/_display.scss */
+    .xmodule_display.xmodule_AnnotatableBlock .ui-tooltip.qtip.ui-tooltip-annotatable::after {
+      content: '';
+      display: inline-block;
+      position: absolute;
+      bottom: -20px;
+      left: 50%;
+      height: 0;
+      width: 0;
+      margin-left: calc(-1 * (var(--baseline) / 4));
+      border: 10px solid transparent;
+      border-top-color: rgba(0, 0, 0, 0.85); }
diff --git a/xmodule/assets/AnnotatableBlockDisplay.scss b/xmodule/assets/AnnotatableBlockDisplay.scss
deleted file mode 100644
index 66e1e756f3da..000000000000
--- a/xmodule/assets/AnnotatableBlockDisplay.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.xmodule_display.xmodule_AnnotatableBlock {
-  @import "annotatable/display.scss";
-}
diff --git a/xmodule/assets/AnnotatableBlockEditor.css b/xmodule/assets/AnnotatableBlockEditor.css
new file mode 100644
index 000000000000..daff8d645d31
--- /dev/null
+++ b/xmodule/assets/AnnotatableBlockEditor.css
@@ -0,0 +1,5 @@
+/* line 1, /openedx/edx-platform/xmodule/assets/codemirror/_codemirror.scss */
+.xmodule_edit.xmodule_AnnotatableBlock .CodeMirror {
+  background: #fff;
+  font-size: 13px;
+  color: #3c3c3c; }
diff --git a/xmodule/assets/AnnotatableBlockEditor.scss b/xmodule/assets/AnnotatableBlockEditor.scss
deleted file mode 100644
index 8f2852422d7d..000000000000
--- a/xmodule/assets/AnnotatableBlockEditor.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.xmodule_edit.xmodule_AnnotatableBlock {
-  @import "codemirror/codemirror.scss";
-}
diff --git a/xmodule/assets/CustomTagBlockEditor.css b/xmodule/assets/CustomTagBlockEditor.css
new file mode 100644
index 000000000000..bdf9bb19029c
--- /dev/null
+++ b/xmodule/assets/CustomTagBlockEditor.css
@@ -0,0 +1,5 @@
+/* line 1, /openedx/edx-platform/xmodule/assets/codemirror/_codemirror.scss */
+.xmodule_edit.xmodule_CustomTagBlock .CodeMirror {
+  background: #fff;
+  font-size: 13px;
+  color: #3c3c3c; }
diff --git a/xmodule/assets/CustomTagBlockEditor.scss b/xmodule/assets/CustomTagBlockEditor.scss
deleted file mode 100644
index 3abd162c808d..000000000000
--- a/xmodule/assets/CustomTagBlockEditor.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.xmodule_edit.xmodule_CustomTagBlock {
-  @import "codemirror/codemirror.scss";
-}
diff --git a/xmodule/assets/HtmlBlockDisplay.css b/xmodule/assets/HtmlBlockDisplay.css
new file mode 100644
index 000000000000..896abc5f0505
--- /dev/null
+++ b/xmodule/assets/HtmlBlockDisplay.css
@@ -0,0 +1,458 @@
+@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700");
+/* line 1, /openedx/edx-platform/xmodule/assets/HtmlBlockDisplay.scss */
+.xmodule_display.xmodule_AboutBlock,
+.xmodule_display.xmodule_CourseInfoBlock,
+.xmodule_display.xmodule_HtmlBlock,
+.xmodule_display.xmodule_StaticTabBlock {
+  /* stylelint-disable-line */
+  /* stylelint-disable-line */ }
+  /* line 8, /openedx/edx-platform/xmodule/assets/html/_display.scss */
+  .xmodule_display.xmodule_AboutBlock *,
+  .xmodule_display.xmodule_CourseInfoBlock *,
+  .xmodule_display.xmodule_HtmlBlock *,
+  .xmodule_display.xmodule_StaticTabBlock * {
+    line-height: 1.4em; }
+  /* line 12, /openedx/edx-platform/xmodule/assets/html/_display.scss */
+  .xmodule_display.xmodule_AboutBlock h1,
+  .xmodule_display.xmodule_CourseInfoBlock h1,
+  .xmodule_display.xmodule_HtmlBlock h1,
+  .xmodule_display.xmodule_StaticTabBlock h1 {
+    color: var(--body-color);
+    font: normal 2em/1.4em var(--font-family-sans-serif);
+    letter-spacing: 1px;
+    margin: 0 0 1.416em; }
+  /* line 20, /openedx/edx-platform/xmodule/assets/html/_display.scss */
+  .xmodule_display.xmodule_AboutBlock h2,
+  .xmodule_display.xmodule_CourseInfoBlock h2,
+  .xmodule_display.xmodule_HtmlBlock h2,
+  .xmodule_display.xmodule_StaticTabBlock h2 {
+    color: #646464;
+    font: normal 1.2em/1.2em var(--font-family-sans-serif);
+    letter-spacing: 1px;
+    margin-bottom: calc((var(--baseline)*0.75));
+    -webkit-font-smoothing: antialiased; }
+  /* line 28, /openedx/edx-platform/xmodule/assets/html/_display.scss */
+  .xmodule_display.xmodule_AboutBlock h3,
+  .xmodule_display.xmodule_AboutBlock h4,
+  .xmodule_display.xmodule_AboutBlock h5,
+  .xmodule_display.xmodule_AboutBlock h6,
+  .xmodule_display.xmodule_CourseInfoBlock h3,
+  .xmodule_display.xmodule_CourseInfoBlock h4,
+  .xmodule_display.xmodule_CourseInfoBlock h5,
+  .xmodule_display.xmodule_CourseInfoBlock h6,
+  .xmodule_display.xmodule_HtmlBlock h3,
+  .xmodule_display.xmodule_HtmlBlock h4,
+  .xmodule_display.xmodule_HtmlBlock h5,
+  .xmodule_display.xmodule_HtmlBlock h6,
+  .xmodule_display.xmodule_StaticTabBlock h3,
+  .xmodule_display.xmodule_StaticTabBlock h4,
+  .xmodule_display.xmodule_StaticTabBlock h5,
+  .xmodule_display.xmodule_StaticTabBlock h6 {
+    margin: 0 0 calc((var(--baseline)/2));
+    font-weight: 600; }
+  /* line 37, /openedx/edx-platform/xmodule/assets/html/_display.scss */
+  .xmodule_display.xmodule_AboutBlock h3,
+  .xmodule_display.xmodule_CourseInfoBlock h3,
+  .xmodule_display.xmodule_HtmlBlock h3,
+  .xmodule_display.xmodule_StaticTabBlock h3 {
+    font-size: 1.2em; }
+  /* line 41, /openedx/edx-platform/xmodule/assets/html/_display.scss */
+  .xmodule_display.xmodule_AboutBlock h4,
+  .xmodule_display.xmodule_CourseInfoBlock h4,
+  .xmodule_display.xmodule_HtmlBlock h4,
+  .xmodule_display.xmodule_StaticTabBlock h4 {
+    font-size: 1em; }
+  /* line 45, /openedx/edx-platform/xmodule/assets/html/_display.scss */
+  .xmodule_display.xmodule_AboutBlock h5,
+  .xmodule_display.xmodule_CourseInfoBlock h5,
+  .xmodule_display.xmodule_HtmlBlock h5,
+  .xmodule_display.xmodule_StaticTabBlock h5 {
+    font-size: 0.83em; }
+  /* line 49, /openedx/edx-platform/xmodule/assets/html/_display.scss */
+  .xmodule_display.xmodule_AboutBlock h6,
+  .xmodule_display.xmodule_CourseInfoBlock h6,
+  .xmodule_display.xmodule_HtmlBlock h6,
+  .xmodule_display.xmodule_StaticTabBlock h6 {
+    font-size: 0.75em; }
+  /* line 53, /openedx/edx-platform/xmodule/assets/html/_display.scss */
+  .xmodule_display.xmodule_AboutBlock p,
+  .xmodule_display.xmodule_CourseInfoBlock p,
+  .xmodule_display.xmodule_HtmlBlock p,
+  .xmodule_display.xmodule_StaticTabBlock p {
+    margin-bottom: 1.416em;
+    font-size: 1em;
+    line-height: 1.6em !important;
+    color: var(--body-color); }
+  /* line 60, /openedx/edx-platform/xmodule/assets/html/_display.scss */
+  .xmodule_display.xmodule_AboutBlock em,
+  .xmodule_display.xmodule_AboutBlock i,
+  .xmodule_display.xmodule_CourseInfoBlock em,
+  .xmodule_display.xmodule_CourseInfoBlock i,
+  .xmodule_display.xmodule_HtmlBlock em,
+  .xmodule_display.xmodule_HtmlBlock i,
+  .xmodule_display.xmodule_StaticTabBlock em,
+  .xmodule_display.xmodule_StaticTabBlock i {
+    font-style: italic; }
+    /* line 64, /openedx/edx-platform/xmodule/assets/html/_display.scss */
+    .xmodule_display.xmodule_AboutBlock em span,
+    .xmodule_display.xmodule_AboutBlock i span,
+    .xmodule_display.xmodule_CourseInfoBlock em span,
+    .xmodule_display.xmodule_CourseInfoBlock i span,
+    .xmodule_display.xmodule_HtmlBlock em span,
+    .xmodule_display.xmodule_HtmlBlock i span,
+    .xmodule_display.xmodule_StaticTabBlock em span,
+    .xmodule_display.xmodule_StaticTabBlock i span {
+      font-style: italic; }
+  /* line 69, /openedx/edx-platform/xmodule/assets/html/_display.scss */
+  .xmodule_display.xmodule_AboutBlock strong,
+  .xmodule_display.xmodule_AboutBlock b,
+  .xmodule_display.xmodule_CourseInfoBlock strong,
+  .xmodule_display.xmodule_CourseInfoBlock b,
+  .xmodule_display.xmodule_HtmlBlock strong,
+  .xmodule_display.xmodule_HtmlBlock b,
+  .xmodule_display.xmodule_StaticTabBlock strong,
+  .xmodule_display.xmodule_StaticTabBlock b {
+    font-weight: bold; }
+    /* line 73, /openedx/edx-platform/xmodule/assets/html/_display.scss */
+    .xmodule_display.xmodule_AboutBlock strong span,
+    .xmodule_display.xmodule_AboutBlock b span,
+    .xmodule_display.xmodule_CourseInfoBlock strong span,
+    .xmodule_display.xmodule_CourseInfoBlock b span,
+    .xmodule_display.xmodule_HtmlBlock strong span,
+    .xmodule_display.xmodule_HtmlBlock b span,
+    .xmodule_display.xmodule_StaticTabBlock strong span,
+    .xmodule_display.xmodule_StaticTabBlock b span {
+      font-weight: bold; }
+  /* line 78, /openedx/edx-platform/xmodule/assets/html/_display.scss */
+  .xmodule_display.xmodule_AboutBlock p + p,
+  .xmodule_display.xmodule_AboutBlock ul + p,
+  .xmodule_display.xmodule_AboutBlock ol + p,
+  .xmodule_display.xmodule_CourseInfoBlock p + p,
+  .xmodule_display.xmodule_CourseInfoBlock ul + p,
+  .xmodule_display.xmodule_CourseInfoBlock ol + p,
+  .xmodule_display.xmodule_HtmlBlock p + p,
+  .xmodule_display.xmodule_HtmlBlock ul + p,
+  .xmodule_display.xmodule_HtmlBlock ol + p,
+  .xmodule_display.xmodule_StaticTabBlock p + p,
+  .xmodule_display.xmodule_StaticTabBlock ul + p,
+  .xmodule_display.xmodule_StaticTabBlock ol + p {
+    margin-top: var(--baseline); }
+  /* line 84, /openedx/edx-platform/xmodule/assets/html/_display.scss */
+  .xmodule_display.xmodule_AboutBlock blockquote,
+  .xmodule_display.xmodule_CourseInfoBlock blockquote,
+  .xmodule_display.xmodule_HtmlBlock blockquote,
+  .xmodule_display.xmodule_StaticTabBlock blockquote {
+    margin: 1em calc((var(--baseline)*2)); }
+  /* line 88, /openedx/edx-platform/xmodule/assets/html/_display.scss */
+  .xmodule_display.xmodule_AboutBlock ol,
+  .xmodule_display.xmodule_AboutBlock ul,
+  .xmodule_display.xmodule_CourseInfoBlock ol,
+  .xmodule_display.xmodule_CourseInfoBlock ul,
+  .xmodule_display.xmodule_HtmlBlock ol,
+  .xmodule_display.xmodule_HtmlBlock ul,
+  .xmodule_display.xmodule_StaticTabBlock ol,
+  .xmodule_display.xmodule_StaticTabBlock ul {
+    padding: 0 0 0 1em;
+    margin: 1em 0;
+    color: var(--body-color); }
+    /* line 96, /openedx/edx-platform/xmodule/assets/html/_display.scss */
+    .xmodule_display.xmodule_AboutBlock ol li,
+    .xmodule_display.xmodule_AboutBlock ul li,
+    .xmodule_display.xmodule_CourseInfoBlock ol li,
+    .xmodule_display.xmodule_CourseInfoBlock ul li,
+    .xmodule_display.xmodule_HtmlBlock ol li,
+    .xmodule_display.xmodule_HtmlBlock ul li,
+    .xmodule_display.xmodule_StaticTabBlock ol li,
+    .xmodule_display.xmodule_StaticTabBlock ul li {
+      margin-bottom: 0.708em; }
+  /* line 101, /openedx/edx-platform/xmodule/assets/html/_display.scss */
+  .xmodule_display.xmodule_AboutBlock ol,
+  .xmodule_display.xmodule_CourseInfoBlock ol,
+  .xmodule_display.xmodule_HtmlBlock ol,
+  .xmodule_display.xmodule_StaticTabBlock ol {
+    list-style: decimal outside none; }
+  /* line 105, /openedx/edx-platform/xmodule/assets/html/_display.scss */
+  .xmodule_display.xmodule_AboutBlock ul,
+  .xmodule_display.xmodule_CourseInfoBlock ul,
+  .xmodule_display.xmodule_HtmlBlock ul,
+  .xmodule_display.xmodule_StaticTabBlock ul {
+    list-style: disc outside none; }
+  /* line 110, /openedx/edx-platform/xmodule/assets/html/_display.scss */
+  .xmodule_display.xmodule_AboutBlock a:link, .xmodule_display.xmodule_AboutBlock a:visited, .xmodule_display.xmodule_AboutBlock a:hover, .xmodule_display.xmodule_AboutBlock a:active, .xmodule_display.xmodule_AboutBlock a:focus,
+  .xmodule_display.xmodule_CourseInfoBlock a:link,
+  .xmodule_display.xmodule_CourseInfoBlock a:visited,
+  .xmodule_display.xmodule_CourseInfoBlock a:hover,
+  .xmodule_display.xmodule_CourseInfoBlock a:active,
+  .xmodule_display.xmodule_CourseInfoBlock a:focus,
+  .xmodule_display.xmodule_HtmlBlock a:link,
+  .xmodule_display.xmodule_HtmlBlock a:visited,
+  .xmodule_display.xmodule_HtmlBlock a:hover,
+  .xmodule_display.xmodule_HtmlBlock a:active,
+  .xmodule_display.xmodule_HtmlBlock a:focus,
+  .xmodule_display.xmodule_StaticTabBlock a:link,
+  .xmodule_display.xmodule_StaticTabBlock a:visited,
+  .xmodule_display.xmodule_StaticTabBlock a:hover,
+  .xmodule_display.xmodule_StaticTabBlock a:active,
+  .xmodule_display.xmodule_StaticTabBlock a:focus {
+    color: var(--blue); }
+  /* line 119, /openedx/edx-platform/xmodule/assets/html/_display.scss */
+  .xmodule_display.xmodule_AboutBlock img,
+  .xmodule_display.xmodule_CourseInfoBlock img,
+  .xmodule_display.xmodule_HtmlBlock img,
+  .xmodule_display.xmodule_StaticTabBlock img {
+    max-width: 100%; }
+  /* line 123, /openedx/edx-platform/xmodule/assets/html/_display.scss */
+  .xmodule_display.xmodule_AboutBlock pre,
+  .xmodule_display.xmodule_CourseInfoBlock pre,
+  .xmodule_display.xmodule_HtmlBlock pre,
+  .xmodule_display.xmodule_StaticTabBlock pre {
+    margin: 1em 0;
+    color: var(--body-color);
+    font-family: monospace, serif;
+    font-size: 1em;
+    white-space: pre-wrap;
+    word-wrap: break-word; }
+  /* line 132, /openedx/edx-platform/xmodule/assets/html/_display.scss */
+  .xmodule_display.xmodule_AboutBlock code,
+  .xmodule_display.xmodule_CourseInfoBlock code,
+  .xmodule_display.xmodule_HtmlBlock code,
+  .xmodule_display.xmodule_StaticTabBlock code {
+    color: var(--body-color);
+    font-family: monospace, serif;
+    background: none;
+    padding: 0; }
+  /* line 139, /openedx/edx-platform/xmodule/assets/html/_display.scss */
+  .xmodule_display.xmodule_AboutBlock table,
+  .xmodule_display.xmodule_CourseInfoBlock table,
+  .xmodule_display.xmodule_HtmlBlock table,
+  .xmodule_display.xmodule_StaticTabBlock table {
+    width: 100%;
+    margin: var(--baseline) 0;
+    border-collapse: collapse;
+    font-size: 16px; }
+    /* line 145, /openedx/edx-platform/xmodule/assets/html/_display.scss */
+    .xmodule_display.xmodule_AboutBlock table td,
+    .xmodule_display.xmodule_AboutBlock table th,
+    .xmodule_display.xmodule_CourseInfoBlock table td,
+    .xmodule_display.xmodule_CourseInfoBlock table th,
+    .xmodule_display.xmodule_HtmlBlock table td,
+    .xmodule_display.xmodule_HtmlBlock table th,
+    .xmodule_display.xmodule_StaticTabBlock table td,
+    .xmodule_display.xmodule_StaticTabBlock table th {
+      margin: var(--baseline) 0;
+      padding: calc((var(--baseline)/2));
+      border: 1px solid var(--gray-l3);
+      font-size: 14px; }
+      /* line 152, /openedx/edx-platform/xmodule/assets/html/_display.scss */
+      .xmodule_display.xmodule_AboutBlock table td.cont-justified-left,
+      .xmodule_display.xmodule_AboutBlock table th.cont-justified-left,
+      .xmodule_display.xmodule_CourseInfoBlock table td.cont-justified-left,
+      .xmodule_display.xmodule_CourseInfoBlock table th.cont-justified-left,
+      .xmodule_display.xmodule_HtmlBlock table td.cont-justified-left,
+      .xmodule_display.xmodule_HtmlBlock table th.cont-justified-left,
+      .xmodule_display.xmodule_StaticTabBlock table td.cont-justified-left,
+      .xmodule_display.xmodule_StaticTabBlock table th.cont-justified-left {
+        text-align: left !important; }
+      /* line 156, /openedx/edx-platform/xmodule/assets/html/_display.scss */
+      .xmodule_display.xmodule_AboutBlock table td.cont-justified-right,
+      .xmodule_display.xmodule_AboutBlock table th.cont-justified-right,
+      .xmodule_display.xmodule_CourseInfoBlock table td.cont-justified-right,
+      .xmodule_display.xmodule_CourseInfoBlock table th.cont-justified-right,
+      .xmodule_display.xmodule_HtmlBlock table td.cont-justified-right,
+      .xmodule_display.xmodule_HtmlBlock table th.cont-justified-right,
+      .xmodule_display.xmodule_StaticTabBlock table td.cont-justified-right,
+      .xmodule_display.xmodule_StaticTabBlock table th.cont-justified-right {
+        text-align: right !important; }
+      /* line 160, /openedx/edx-platform/xmodule/assets/html/_display.scss */
+      .xmodule_display.xmodule_AboutBlock table td.cont-justified-center,
+      .xmodule_display.xmodule_AboutBlock table th.cont-justified-center,
+      .xmodule_display.xmodule_CourseInfoBlock table td.cont-justified-center,
+      .xmodule_display.xmodule_CourseInfoBlock table th.cont-justified-center,
+      .xmodule_display.xmodule_HtmlBlock table td.cont-justified-center,
+      .xmodule_display.xmodule_HtmlBlock table th.cont-justified-center,
+      .xmodule_display.xmodule_StaticTabBlock table td.cont-justified-center,
+      .xmodule_display.xmodule_StaticTabBlock table th.cont-justified-center {
+        text-align: center !important; }
+  /* line 166, /openedx/edx-platform/xmodule/assets/html/_display.scss */
+  .xmodule_display.xmodule_AboutBlock th,
+  .xmodule_display.xmodule_CourseInfoBlock th,
+  .xmodule_display.xmodule_HtmlBlock th,
+  .xmodule_display.xmodule_StaticTabBlock th {
+    background: #eee;
+    font-weight: bold; }
+  /* line 177, /openedx/edx-platform/xmodule/assets/html/_display.scss */
+  .xmodule_display.xmodule_AboutBlock .wrapper-modal-image .modal-ui-icon,
+  .xmodule_display.xmodule_CourseInfoBlock .wrapper-modal-image .modal-ui-icon,
+  .xmodule_display.xmodule_HtmlBlock .wrapper-modal-image .modal-ui-icon,
+  .xmodule_display.xmodule_StaticTabBlock .wrapper-modal-image .modal-ui-icon {
+    position: absolute;
+    display: block;
+    padding: calc((var(--baseline)/4)) 7px;
+    border-radius: 5px;
+    opacity: 0.9;
+    background: var(--white);
+    color: var(--black);
+    border: 2px solid var(--black); }
+    /* line 189, /openedx/edx-platform/xmodule/assets/html/_display.scss */
+    .xmodule_display.xmodule_AboutBlock .wrapper-modal-image .modal-ui-icon .label,
+    .xmodule_display.xmodule_CourseInfoBlock .wrapper-modal-image .modal-ui-icon .label,
+    .xmodule_display.xmodule_HtmlBlock .wrapper-modal-image .modal-ui-icon .label,
+    .xmodule_display.xmodule_StaticTabBlock .wrapper-modal-image .modal-ui-icon .label {
+      font-weight: bold; }
+    /* line 193, /openedx/edx-platform/xmodule/assets/html/_display.scss */
+    .xmodule_display.xmodule_AboutBlock .wrapper-modal-image .modal-ui-icon i,
+    .xmodule_display.xmodule_CourseInfoBlock .wrapper-modal-image .modal-ui-icon i,
+    .xmodule_display.xmodule_HtmlBlock .wrapper-modal-image .modal-ui-icon i,
+    .xmodule_display.xmodule_StaticTabBlock .wrapper-modal-image .modal-ui-icon i {
+      font-style: normal; }
+  /* line 198, /openedx/edx-platform/xmodule/assets/html/_display.scss */
+  .xmodule_display.xmodule_AboutBlock .wrapper-modal-image .image-link,
+  .xmodule_display.xmodule_CourseInfoBlock .wrapper-modal-image .image-link,
+  .xmodule_display.xmodule_HtmlBlock .wrapper-modal-image .image-link,
+  .xmodule_display.xmodule_StaticTabBlock .wrapper-modal-image .image-link {
+    position: relative;
+    display: block; }
+    /* line 204, /openedx/edx-platform/xmodule/assets/html/_display.scss */
+    .xmodule_display.xmodule_AboutBlock .wrapper-modal-image .image-link .action-fullscreen,
+    .xmodule_display.xmodule_CourseInfoBlock .wrapper-modal-image .image-link .action-fullscreen,
+    .xmodule_display.xmodule_HtmlBlock .wrapper-modal-image .image-link .action-fullscreen,
+    .xmodule_display.xmodule_StaticTabBlock .wrapper-modal-image .image-link .action-fullscreen {
+      display: none;
+      top: 10px;
+      left: 10px; }
+    /* line 210, /openedx/edx-platform/xmodule/assets/html/_display.scss */
+    .xmodule_display.xmodule_AboutBlock .wrapper-modal-image .image-link:hover .action-fullscreen,
+    .xmodule_display.xmodule_CourseInfoBlock .wrapper-modal-image .image-link:hover .action-fullscreen,
+    .xmodule_display.xmodule_HtmlBlock .wrapper-modal-image .image-link:hover .action-fullscreen,
+    .xmodule_display.xmodule_StaticTabBlock .wrapper-modal-image .image-link:hover .action-fullscreen {
+      display: block; }
+  /* line 215, /openedx/edx-platform/xmodule/assets/html/_display.scss */
+  .xmodule_display.xmodule_AboutBlock .wrapper-modal-image .image-modal,
+  .xmodule_display.xmodule_CourseInfoBlock .wrapper-modal-image .image-modal,
+  .xmodule_display.xmodule_HtmlBlock .wrapper-modal-image .image-modal,
+  .xmodule_display.xmodule_StaticTabBlock .wrapper-modal-image .image-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    display: none;
+    height: 100%;
+    width: 100%;
+    background-color: rgba(0, 0, 0, 0.7); }
+    /* line 227, /openedx/edx-platform/xmodule/assets/html/_display.scss */
+    .xmodule_display.xmodule_AboutBlock .wrapper-modal-image .image-modal .image-content,
+    .xmodule_display.xmodule_CourseInfoBlock .wrapper-modal-image .image-modal .image-content,
+    .xmodule_display.xmodule_HtmlBlock .wrapper-modal-image .image-modal .image-content,
+    .xmodule_display.xmodule_StaticTabBlock .wrapper-modal-image .image-modal .image-content {
+      position: relative;
+      top: 2.5%;
+      display: block;
+      height: 95%;
+      width: 95%;
+      margin: auto;
+      overflow: hidden; }
+      /* line 236, /openedx/edx-platform/xmodule/assets/html/_display.scss */
+      .xmodule_display.xmodule_AboutBlock .wrapper-modal-image .image-modal .image-content .image-wrapper,
+      .xmodule_display.xmodule_CourseInfoBlock .wrapper-modal-image .image-modal .image-content .image-wrapper,
+      .xmodule_display.xmodule_HtmlBlock .wrapper-modal-image .image-modal .image-content .image-wrapper,
+      .xmodule_display.xmodule_StaticTabBlock .wrapper-modal-image .image-modal .image-content .image-wrapper {
+        position: relative; }
+        /* line 239, /openedx/edx-platform/xmodule/assets/html/_display.scss */
+        .xmodule_display.xmodule_AboutBlock .wrapper-modal-image .image-modal .image-content .image-wrapper img,
+        .xmodule_display.xmodule_CourseInfoBlock .wrapper-modal-image .image-modal .image-content .image-wrapper img,
+        .xmodule_display.xmodule_HtmlBlock .wrapper-modal-image .image-modal .image-content .image-wrapper img,
+        .xmodule_display.xmodule_StaticTabBlock .wrapper-modal-image .image-modal .image-content .image-wrapper img {
+          position: relative;
+          display: block;
+          max-width: 100%;
+          max-height: 100%;
+          margin: auto;
+          cursor: default; }
+      /* line 249, /openedx/edx-platform/xmodule/assets/html/_display.scss */
+      .xmodule_display.xmodule_AboutBlock .wrapper-modal-image .image-modal .image-content .action-close,
+      .xmodule_display.xmodule_CourseInfoBlock .wrapper-modal-image .image-modal .image-content .action-close,
+      .xmodule_display.xmodule_HtmlBlock .wrapper-modal-image .image-modal .image-content .action-close,
+      .xmodule_display.xmodule_StaticTabBlock .wrapper-modal-image .image-modal .image-content .action-close {
+        top: 10px;
+        right: 10px; }
+      /* line 254, /openedx/edx-platform/xmodule/assets/html/_display.scss */
+      .xmodule_display.xmodule_AboutBlock .wrapper-modal-image .image-modal .image-content .image-controls,
+      .xmodule_display.xmodule_CourseInfoBlock .wrapper-modal-image .image-modal .image-content .image-controls,
+      .xmodule_display.xmodule_HtmlBlock .wrapper-modal-image .image-modal .image-content .image-controls,
+      .xmodule_display.xmodule_StaticTabBlock .wrapper-modal-image .image-modal .image-content .image-controls {
+        position: absolute;
+        right: 10px;
+        bottom: 10px;
+        margin: 0;
+        padding: 0;
+        list-style: none; }
+        /* line 262, /openedx/edx-platform/xmodule/assets/html/_display.scss */
+        .xmodule_display.xmodule_AboutBlock .wrapper-modal-image .image-modal .image-content .image-controls .image-control,
+        .xmodule_display.xmodule_CourseInfoBlock .wrapper-modal-image .image-modal .image-content .image-controls .image-control,
+        .xmodule_display.xmodule_HtmlBlock .wrapper-modal-image .image-modal .image-content .image-controls .image-control,
+        .xmodule_display.xmodule_StaticTabBlock .wrapper-modal-image .image-modal .image-content .image-controls .image-control {
+          position: relative;
+          display: inline-block;
+          margin: 0;
+          padding: 0; }
+          /* line 268, /openedx/edx-platform/xmodule/assets/html/_display.scss */
+          .xmodule_display.xmodule_AboutBlock .wrapper-modal-image .image-modal .image-content .image-controls .image-control .modal-ui-icon,
+          .xmodule_display.xmodule_CourseInfoBlock .wrapper-modal-image .image-modal .image-content .image-controls .image-control .modal-ui-icon,
+          .xmodule_display.xmodule_HtmlBlock .wrapper-modal-image .image-modal .image-content .image-controls .image-control .modal-ui-icon,
+          .xmodule_display.xmodule_StaticTabBlock .wrapper-modal-image .image-modal .image-content .image-controls .image-control .modal-ui-icon {
+            position: relative; }
+            /* line 271, /openedx/edx-platform/xmodule/assets/html/_display.scss */
+            .xmodule_display.xmodule_AboutBlock .wrapper-modal-image .image-modal .image-content .image-controls .image-control .modal-ui-icon.action-zoom-in,
+            .xmodule_display.xmodule_CourseInfoBlock .wrapper-modal-image .image-modal .image-content .image-controls .image-control .modal-ui-icon.action-zoom-in,
+            .xmodule_display.xmodule_HtmlBlock .wrapper-modal-image .image-modal .image-content .image-controls .image-control .modal-ui-icon.action-zoom-in,
+            .xmodule_display.xmodule_StaticTabBlock .wrapper-modal-image .image-modal .image-content .image-controls .image-control .modal-ui-icon.action-zoom-in {
+              margin-right: calc((var(--baseline)/4)); }
+            /* line 275, /openedx/edx-platform/xmodule/assets/html/_display.scss */
+            .xmodule_display.xmodule_AboutBlock .wrapper-modal-image .image-modal .image-content .image-controls .image-control .modal-ui-icon.action-zoom-out,
+            .xmodule_display.xmodule_CourseInfoBlock .wrapper-modal-image .image-modal .image-content .image-controls .image-control .modal-ui-icon.action-zoom-out,
+            .xmodule_display.xmodule_HtmlBlock .wrapper-modal-image .image-modal .image-content .image-controls .image-control .modal-ui-icon.action-zoom-out,
+            .xmodule_display.xmodule_StaticTabBlock .wrapper-modal-image .image-modal .image-content .image-controls .image-control .modal-ui-icon.action-zoom-out {
+              margin-left: calc((var(--baseline)/4)); }
+            /* line 279, /openedx/edx-platform/xmodule/assets/html/_display.scss */
+            .xmodule_display.xmodule_AboutBlock .wrapper-modal-image .image-modal .image-content .image-controls .image-control .modal-ui-icon.is-disabled,
+            .xmodule_display.xmodule_CourseInfoBlock .wrapper-modal-image .image-modal .image-content .image-controls .image-control .modal-ui-icon.is-disabled,
+            .xmodule_display.xmodule_HtmlBlock .wrapper-modal-image .image-modal .image-content .image-controls .image-control .modal-ui-icon.is-disabled,
+            .xmodule_display.xmodule_StaticTabBlock .wrapper-modal-image .image-modal .image-content .image-controls .image-control .modal-ui-icon.is-disabled {
+              opacity: 0.5;
+              cursor: default; }
+    /* line 288, /openedx/edx-platform/xmodule/assets/html/_display.scss */
+    .xmodule_display.xmodule_AboutBlock .wrapper-modal-image .image-modal.image-is-fit-to-screen,
+    .xmodule_display.xmodule_CourseInfoBlock .wrapper-modal-image .image-modal.image-is-fit-to-screen,
+    .xmodule_display.xmodule_HtmlBlock .wrapper-modal-image .image-modal.image-is-fit-to-screen,
+    .xmodule_display.xmodule_StaticTabBlock .wrapper-modal-image .image-modal.image-is-fit-to-screen {
+      display: block; }
+      /* line 292, /openedx/edx-platform/xmodule/assets/html/_display.scss */
+      .xmodule_display.xmodule_AboutBlock .wrapper-modal-image .image-modal.image-is-fit-to-screen .image-content .image-wrapper,
+      .xmodule_display.xmodule_CourseInfoBlock .wrapper-modal-image .image-modal.image-is-fit-to-screen .image-content .image-wrapper,
+      .xmodule_display.xmodule_HtmlBlock .wrapper-modal-image .image-modal.image-is-fit-to-screen .image-content .image-wrapper,
+      .xmodule_display.xmodule_StaticTabBlock .wrapper-modal-image .image-modal.image-is-fit-to-screen .image-content .image-wrapper {
+        top: 0 !important;
+        left: 0 !important;
+        width: 100% !important;
+        height: 100% !important; }
+        /* line 298, /openedx/edx-platform/xmodule/assets/html/_display.scss */
+        .xmodule_display.xmodule_AboutBlock .wrapper-modal-image .image-modal.image-is-fit-to-screen .image-content .image-wrapper img,
+        .xmodule_display.xmodule_CourseInfoBlock .wrapper-modal-image .image-modal.image-is-fit-to-screen .image-content .image-wrapper img,
+        .xmodule_display.xmodule_HtmlBlock .wrapper-modal-image .image-modal.image-is-fit-to-screen .image-content .image-wrapper img,
+        .xmodule_display.xmodule_StaticTabBlock .wrapper-modal-image .image-modal.image-is-fit-to-screen .image-content .image-wrapper img {
+          top: 0 !important;
+          left: 0 !important; }
+    /* line 305, /openedx/edx-platform/xmodule/assets/html/_display.scss */
+    .xmodule_display.xmodule_AboutBlock .wrapper-modal-image .image-modal.image-is-zoomed,
+    .xmodule_display.xmodule_CourseInfoBlock .wrapper-modal-image .image-modal.image-is-zoomed,
+    .xmodule_display.xmodule_HtmlBlock .wrapper-modal-image .image-modal.image-is-zoomed,
+    .xmodule_display.xmodule_StaticTabBlock .wrapper-modal-image .image-modal.image-is-zoomed {
+      display: block; }
+      /* line 309, /openedx/edx-platform/xmodule/assets/html/_display.scss */
+      .xmodule_display.xmodule_AboutBlock .wrapper-modal-image .image-modal.image-is-zoomed .image-content .image-wrapper img,
+      .xmodule_display.xmodule_CourseInfoBlock .wrapper-modal-image .image-modal.image-is-zoomed .image-content .image-wrapper img,
+      .xmodule_display.xmodule_HtmlBlock .wrapper-modal-image .image-modal.image-is-zoomed .image-content .image-wrapper img,
+      .xmodule_display.xmodule_StaticTabBlock .wrapper-modal-image .image-modal.image-is-zoomed .image-content .image-wrapper img {
+        max-width: none;
+        max-height: none;
+        margin: 0;
+        cursor: move; }
diff --git a/xmodule/assets/HtmlBlockDisplay.scss b/xmodule/assets/HtmlBlockDisplay.scss
deleted file mode 100644
index 0bc49706cfff..000000000000
--- a/xmodule/assets/HtmlBlockDisplay.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.xmodule_display.xmodule_AboutBlock,
-.xmodule_display.xmodule_CourseInfoBlock,
-.xmodule_display.xmodule_HtmlBlock,
-.xmodule_display.xmodule_StaticTabBlock {
-  @import "html/display.scss";
-}
diff --git a/xmodule/assets/HtmlBlockEditor.css b/xmodule/assets/HtmlBlockEditor.css
new file mode 100644
index 000000000000..0b6877d0c4ed
--- /dev/null
+++ b/xmodule/assets/HtmlBlockEditor.css
@@ -0,0 +1,182 @@
+@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700");
+/* line 1, /openedx/edx-platform/xmodule/assets/HtmlBlockEditor.scss */
+.xmodule_edit.xmodule_AboutBlock,
+.xmodule_edit.xmodule_CourseInfoBlock,
+.xmodule_edit.xmodule_HtmlBlock,
+.xmodule_edit.xmodule_StaticTabBlock { }
+  /* line 123, common/static/sass/_mixins.scss */
+  .xmodule_edit.xmodule_AboutBlock .ui-col-wide,
+  .xmodule_edit.xmodule_CourseInfoBlock .ui-col-wide,
+  .xmodule_edit.xmodule_HtmlBlock .ui-col-wide,
+  .xmodule_edit.xmodule_StaticTabBlock .ui-col-wide {
+    width: 74.46809%;
+    margin-right: 2.12766%;
+    float: left; }
+  /* line 130, common/static/sass/_mixins.scss */
+  .xmodule_edit.xmodule_AboutBlock .ui-col-narrow,
+  .xmodule_edit.xmodule_CourseInfoBlock .ui-col-narrow,
+  .xmodule_edit.xmodule_HtmlBlock .ui-col-narrow,
+  .xmodule_edit.xmodule_StaticTabBlock .ui-col-narrow {
+    width: 23.40426%;
+    float: left; }
+  /* line 342, common/static/sass/_mixins.scss */
+  .xmodule_edit.xmodule_AboutBlock .ui-loading,
+  .xmodule_edit.xmodule_CourseInfoBlock .ui-loading,
+  .xmodule_edit.xmodule_HtmlBlock .ui-loading,
+  .xmodule_edit.xmodule_StaticTabBlock .ui-loading {
+    box-shadow: inset 0 1px 2px 1px rgba(0, 0, 0, 0.2);
+    padding: 15px 20px; }
+  /* line 368, common/static/sass/_mixins.scss */
+  .xmodule_edit.xmodule_AboutBlock .ui-loading,
+  .xmodule_edit.xmodule_CourseInfoBlock .ui-loading,
+  .xmodule_edit.xmodule_HtmlBlock .ui-loading,
+  .xmodule_edit.xmodule_StaticTabBlock .ui-loading {
+    animation: fadeIn 0.25s linear 1;
+    opacity: 0.6;
+    background-color: #fff;
+    padding: 30px 20px;
+    text-align: center; }
+    /* line 379, common/static/sass/_mixins.scss */
+    .xmodule_edit.xmodule_AboutBlock .ui-loading .spin,
+    .xmodule_edit.xmodule_CourseInfoBlock .ui-loading .spin,
+    .xmodule_edit.xmodule_HtmlBlock .ui-loading .spin,
+    .xmodule_edit.xmodule_StaticTabBlock .ui-loading .spin {
+      display: inline-block; }
+    /* line 385, common/static/sass/_mixins.scss */
+    .xmodule_edit.xmodule_AboutBlock .ui-loading .copy,
+    .xmodule_edit.xmodule_CourseInfoBlock .ui-loading .copy,
+    .xmodule_edit.xmodule_HtmlBlock .ui-loading .copy,
+    .xmodule_edit.xmodule_StaticTabBlock .ui-loading .copy {
+      padding-left: 5px; }
+  /* line 390, common/static/sass/_mixins.scss */
+  .xmodule_edit.xmodule_AboutBlock .is-hidden,
+  .xmodule_edit.xmodule_CourseInfoBlock .is-hidden,
+  .xmodule_edit.xmodule_HtmlBlock .is-hidden,
+  .xmodule_edit.xmodule_StaticTabBlock .is-hidden {
+    display: none; }
+  /* line 9, /openedx/edx-platform/xmodule/assets/editor/_edit.scss */
+  .xmodule_edit.xmodule_AboutBlock .editor,
+  .xmodule_edit.xmodule_CourseInfoBlock .editor,
+  .xmodule_edit.xmodule_HtmlBlock .editor,
+  .xmodule_edit.xmodule_StaticTabBlock .editor {
+    position: relative; }
+    /* line 12, /openedx/edx-platform/xmodule/assets/editor/_edit.scss */
+    .xmodule_edit.xmodule_AboutBlock .editor .row,
+    .xmodule_edit.xmodule_CourseInfoBlock .editor .row,
+    .xmodule_edit.xmodule_HtmlBlock .editor .row,
+    .xmodule_edit.xmodule_StaticTabBlock .editor .row {
+      position: relative; }
+    /* line 16, /openedx/edx-platform/xmodule/assets/editor/_edit.scss */
+    .xmodule_edit.xmodule_AboutBlock .editor .editor-bar,
+    .xmodule_edit.xmodule_CourseInfoBlock .editor .editor-bar,
+    .xmodule_edit.xmodule_HtmlBlock .editor .editor-bar,
+    .xmodule_edit.xmodule_StaticTabBlock .editor .editor-bar {
+      background-color: #d4dee8;
+      background-image: -webkit-linear-gradient(top, #d4dee8, #c9d5e2);
+      background-image: linear-gradient(to bottom,#d4dee8, #c9d5e2);
+      position: relative;
+      padding: calc((var(--baseline)/4));
+      border-bottom-color: #a5aaaf; }
+      /* line 15, /openedx/edx-platform/common/static/sass/bourbon/addons/_clearfix.scss */
+      .xmodule_edit.xmodule_AboutBlock .editor .editor-bar:after,
+      .xmodule_edit.xmodule_CourseInfoBlock .editor .editor-bar:after,
+      .xmodule_edit.xmodule_HtmlBlock .editor .editor-bar:after,
+      .xmodule_edit.xmodule_StaticTabBlock .editor .editor-bar:after {
+        content: "";
+        display: table;
+        clear: both; }
+      /* line 24, /openedx/edx-platform/xmodule/assets/editor/_edit.scss */
+      .xmodule_edit.xmodule_AboutBlock .editor .editor-bar button,
+      .xmodule_edit.xmodule_CourseInfoBlock .editor .editor-bar button,
+      .xmodule_edit.xmodule_HtmlBlock .editor .editor-bar button,
+      .xmodule_edit.xmodule_StaticTabBlock .editor .editor-bar button {
+        display: inline-block;
+        float: left;
+        padding: 3px calc((var(--baseline)/2)) 5px;
+        margin-left: 7px;
+        border: 0;
+        border-radius: 2px;
+        background: transparent; }
+        /* line 35, /openedx/edx-platform/xmodule/assets/editor/_edit.scss */
+        .xmodule_edit.xmodule_AboutBlock .editor .editor-bar button .icon,
+        .xmodule_edit.xmodule_CourseInfoBlock .editor .editor-bar button .icon,
+        .xmodule_edit.xmodule_HtmlBlock .editor .editor-bar button .icon,
+        .xmodule_edit.xmodule_StaticTabBlock .editor .editor-bar button .icon {
+          height: 21px; }
+        /* line 39, /openedx/edx-platform/xmodule/assets/editor/_edit.scss */
+        .xmodule_edit.xmodule_AboutBlock .editor .editor-bar button:hover, .xmodule_edit.xmodule_AboutBlock .editor .editor-bar button:focus,
+        .xmodule_edit.xmodule_CourseInfoBlock .editor .editor-bar button:hover,
+        .xmodule_edit.xmodule_CourseInfoBlock .editor .editor-bar button:focus,
+        .xmodule_edit.xmodule_HtmlBlock .editor .editor-bar button:hover,
+        .xmodule_edit.xmodule_HtmlBlock .editor .editor-bar button:focus,
+        .xmodule_edit.xmodule_StaticTabBlock .editor .editor-bar button:hover,
+        .xmodule_edit.xmodule_StaticTabBlock .editor .editor-bar button:focus {
+          background: rgba(255, 255, 255, 0.5); }
+    /* line 46, /openedx/edx-platform/xmodule/assets/editor/_edit.scss */
+    .xmodule_edit.xmodule_AboutBlock .editor .editor-tabs,
+    .xmodule_edit.xmodule_CourseInfoBlock .editor .editor-tabs,
+    .xmodule_edit.xmodule_HtmlBlock .editor .editor-tabs,
+    .xmodule_edit.xmodule_StaticTabBlock .editor .editor-tabs {
+      position: absolute;
+      top: 10px;
+      right: 10px;
+      text-align: left;
+      direction: ltr; }
+      /* line 54, /openedx/edx-platform/xmodule/assets/editor/_edit.scss */
+      .xmodule_edit.xmodule_AboutBlock .editor .editor-tabs li,
+      .xmodule_edit.xmodule_CourseInfoBlock .editor .editor-tabs li,
+      .xmodule_edit.xmodule_HtmlBlock .editor .editor-tabs li,
+      .xmodule_edit.xmodule_StaticTabBlock .editor .editor-tabs li {
+        float: left;
+        margin-right: calc((var(--baseline)/4)); }
+        /* line 58, /openedx/edx-platform/xmodule/assets/editor/_edit.scss */
+        .xmodule_edit.xmodule_AboutBlock .editor .editor-tabs li:last-child,
+        .xmodule_edit.xmodule_CourseInfoBlock .editor .editor-tabs li:last-child,
+        .xmodule_edit.xmodule_HtmlBlock .editor .editor-tabs li:last-child,
+        .xmodule_edit.xmodule_StaticTabBlock .editor .editor-tabs li:last-child {
+          margin-right: 0; }
+      /* line 63, /openedx/edx-platform/xmodule/assets/editor/_edit.scss */
+      .xmodule_edit.xmodule_AboutBlock .editor .editor-tabs .tab,
+      .xmodule_edit.xmodule_CourseInfoBlock .editor .editor-tabs .tab,
+      .xmodule_edit.xmodule_HtmlBlock .editor .editor-tabs .tab,
+      .xmodule_edit.xmodule_StaticTabBlock .editor .editor-tabs .tab {
+        display: block;
+        height: 24px;
+        padding: 7px 20px 3px;
+        border: 1px solid #a5aaaf;
+        border-radius: 3px 3px 0 0;
+        background-color: var(--transparent);
+        background-image: -webkit-linear-gradient(top, var(--transparent) 87%, rgba(0, 0, 0, 0.06));
+        background-image: linear-gradient(to bottom,var(--transparent) 87%, rgba(0, 0, 0, 0.06));
+        background-color: #e5ecf3;
+        font-size: 13px;
+        color: #3c3c3c;
+        box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.05); }
+        /* line 77, /openedx/edx-platform/xmodule/assets/editor/_edit.scss */
+        .xmodule_edit.xmodule_AboutBlock .editor .editor-tabs .tab.current,
+        .xmodule_edit.xmodule_CourseInfoBlock .editor .editor-tabs .tab.current,
+        .xmodule_edit.xmodule_HtmlBlock .editor .editor-tabs .tab.current,
+        .xmodule_edit.xmodule_StaticTabBlock .editor .editor-tabs .tab.current {
+          background: var(--white);
+          border-bottom-color: var(--white); }
+  /* line 15, /openedx/edx-platform/common/static/sass/bourbon/addons/_clearfix.scss */
+  .xmodule_edit.xmodule_AboutBlock .html-editor:after,
+  .xmodule_edit.xmodule_CourseInfoBlock .html-editor:after,
+  .xmodule_edit.xmodule_HtmlBlock .html-editor:after,
+  .xmodule_edit.xmodule_StaticTabBlock .html-editor:after {
+    content: "";
+    display: table;
+    clear: both; }
+  /* line 5, /openedx/edx-platform/xmodule/assets/html/_edit.scss */
+  .xmodule_edit.xmodule_AboutBlock .html-editor .CodeMirror,
+  .xmodule_edit.xmodule_CourseInfoBlock .html-editor .CodeMirror,
+  .xmodule_edit.xmodule_HtmlBlock .html-editor .CodeMirror,
+  .xmodule_edit.xmodule_StaticTabBlock .html-editor .CodeMirror {
+    box-sizing: border-box;
+    height: 435px; }
+  /* line 11, /openedx/edx-platform/xmodule/assets/html/_edit.scss */
+  .xmodule_edit.xmodule_AboutBlock .html-editor .is-inactive,
+  .xmodule_edit.xmodule_CourseInfoBlock .html-editor .is-inactive,
+  .xmodule_edit.xmodule_HtmlBlock .html-editor .is-inactive,
+  .xmodule_edit.xmodule_StaticTabBlock .html-editor .is-inactive {
+    display: none; }
diff --git a/xmodule/assets/HtmlBlockEditor.scss b/xmodule/assets/HtmlBlockEditor.scss
deleted file mode 100644
index 15d60863e28e..000000000000
--- a/xmodule/assets/HtmlBlockEditor.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.xmodule_edit.xmodule_AboutBlock,
-.xmodule_edit.xmodule_CourseInfoBlock,
-.xmodule_edit.xmodule_HtmlBlock,
-.xmodule_edit.xmodule_StaticTabBlock {
-  @import "editor/edit.scss";
-  @import "html/edit.scss";
-}
diff --git a/xmodule/assets/LTIBlockDisplay.css b/xmodule/assets/LTIBlockDisplay.css
new file mode 100644
index 000000000000..11e7ced8516c
--- /dev/null
+++ b/xmodule/assets/LTIBlockDisplay.css
@@ -0,0 +1,51 @@
+@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700");
+/* line 1, /openedx/edx-platform/xmodule/assets/LTIBlockDisplay.scss */
+.xmodule_display.xmodule_LTIBlock {
+  /* stylelint-disable-line */
+  /* stylelint-disable-line */
+  /* stylelint-disable-line */
+  /* stylelint-disable-line */ }
+  /* line 7, /openedx/edx-platform/xmodule/assets/lti/_lti.scss */
+  .xmodule_display.xmodule_LTIBlock h2.problem-header {
+    display: inline-block; }
+  /* line 11, /openedx/edx-platform/xmodule/assets/lti/_lti.scss */
+  .xmodule_display.xmodule_LTIBlock div.problem-progress {
+    display: inline-block;
+    padding-left: calc((var(--baseline)/4));
+    color: #666;
+    font-weight: 100;
+    font-size: 1em; }
+  /* line 20, /openedx/edx-platform/xmodule/assets/lti/_lti.scss */
+  .xmodule_display.xmodule_LTIBlock div.lti {
+    margin: 0 auto; }
+    /* line 24, /openedx/edx-platform/xmodule/assets/lti/_lti.scss */
+    .xmodule_display.xmodule_LTIBlock div.lti .wrapper-lti-link {
+      font-size: 14px;
+      background-color: var(--sidebar-color);
+      padding: var(--baseline); }
+      /* line 30, /openedx/edx-platform/xmodule/assets/lti/_lti.scss */
+      .xmodule_display.xmodule_LTIBlock div.lti .wrapper-lti-link .lti-link {
+        margin-bottom: 0;
+        text-align: right; }
+        /* line 34, /openedx/edx-platform/xmodule/assets/lti/_lti.scss */
+        .xmodule_display.xmodule_LTIBlock div.lti .wrapper-lti-link .lti-link .link_lti_new_window {
+          font-size: 13px;
+          line-height: 20.72px; }
+    /* line 43, /openedx/edx-platform/xmodule/assets/lti/_lti.scss */
+    .xmodule_display.xmodule_LTIBlock div.lti form.ltiLaunchForm {
+      display: none; }
+    /* line 47, /openedx/edx-platform/xmodule/assets/lti/_lti.scss */
+    .xmodule_display.xmodule_LTIBlock div.lti iframe.ltiLaunchFrame {
+      width: 100%;
+      height: 800px;
+      display: block;
+      border: 0px; }
+    /* line 54, /openedx/edx-platform/xmodule/assets/lti/_lti.scss */
+    .xmodule_display.xmodule_LTIBlock div.lti h4.problem-feedback-label {
+      font-weight: 100;
+      font-size: 1em;
+      font-family: "Source Sans", "Open Sans", Verdana, Geneva, sans-serif, sans-serif; }
+    /* line 60, /openedx/edx-platform/xmodule/assets/lti/_lti.scss */
+    .xmodule_display.xmodule_LTIBlock div.lti div.problem-feedback {
+      margin-top: calc((var(--baseline)/4));
+      margin-bottom: calc((var(--baseline)/4)); }
diff --git a/xmodule/assets/LTIBlockDisplay.scss b/xmodule/assets/LTIBlockDisplay.scss
deleted file mode 100644
index ea92202df2ad..000000000000
--- a/xmodule/assets/LTIBlockDisplay.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.xmodule_display.xmodule_LTIBlock {
-  @import "lti/lti.scss";
-}
diff --git a/xmodule/assets/PollBlockDisplay.css b/xmodule/assets/PollBlockDisplay.css
new file mode 100644
index 000000000000..c1b39685a753
--- /dev/null
+++ b/xmodule/assets/PollBlockDisplay.css
@@ -0,0 +1,194 @@
+@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700");
+/* line 1, /openedx/edx-platform/xmodule/assets/PollBlockDisplay.scss */
+.xmodule_display.xmodule_PollBlock {
+  /* stylelint-disable-line */
+  /* stylelint-disable-line */ }
+  @media print {
+    /* line 6, /openedx/edx-platform/xmodule/assets/poll/_display.scss */
+    .xmodule_display.xmodule_PollBlock div.poll_question {
+      display: block;
+      width: auto;
+      padding: 0; }
+      /* line 12, /openedx/edx-platform/xmodule/assets/poll/_display.scss */
+      .xmodule_display.xmodule_PollBlock div.poll_question canvas, .xmodule_display.xmodule_PollBlock div.poll_question img {
+        page-break-inside: avoid; } }
+  /* line 17, /openedx/edx-platform/xmodule/assets/poll/_display.scss */
+  .xmodule_display.xmodule_PollBlock div.poll_question .inline {
+    display: inline; }
+  /* line 21, /openedx/edx-platform/xmodule/assets/poll/_display.scss */
+  .xmodule_display.xmodule_PollBlock div.poll_question h3 {
+    margin-top: 0;
+    margin-bottom: calc((var(--baseline)*0.75));
+    color: #fe57a1;
+    font-size: 1.9em; }
+    /* line 28, /openedx/edx-platform/xmodule/assets/poll/_display.scss */
+    .xmodule_display.xmodule_PollBlock div.poll_question h3.problem-header div.staff {
+      margin-top: calc((var(--baseline)*1.5));
+      font-size: 80%; }
+    @media print {
+      /* line 21, /openedx/edx-platform/xmodule/assets/poll/_display.scss */
+      .xmodule_display.xmodule_PollBlock div.poll_question h3 {
+        display: block;
+        width: auto;
+        border-right: 0; } }
+  /* line 41, /openedx/edx-platform/xmodule/assets/poll/_display.scss */
+  .xmodule_display.xmodule_PollBlock div.poll_question p {
+    text-align: justify;
+    font-weight: bold; }
+  /* line 46, /openedx/edx-platform/xmodule/assets/poll/_display.scss */
+  .xmodule_display.xmodule_PollBlock div.poll_question .poll_answer {
+    margin-bottom: var(--baseline); }
+    /* line 49, /openedx/edx-platform/xmodule/assets/poll/_display.scss */
+    .xmodule_display.xmodule_PollBlock div.poll_question .poll_answer.short {
+      clear: both; }
+    /* line 53, /openedx/edx-platform/xmodule/assets/poll/_display.scss */
+    .xmodule_display.xmodule_PollBlock div.poll_question .poll_answer .question {
+      height: auto;
+      clear: both;
+      min-height: 30px; }
+      /* line 58, /openedx/edx-platform/xmodule/assets/poll/_display.scss */
+      .xmodule_display.xmodule_PollBlock div.poll_question .poll_answer .question.short {
+        clear: none;
+        width: 30%;
+        display: inline;
+        float: left; }
+      /* line 65, /openedx/edx-platform/xmodule/assets/poll/_display.scss */
+      .xmodule_display.xmodule_PollBlock div.poll_question .poll_answer .question .button {
+        -webkit-appearance: none;
+        -webkit-background-clip: padding-box;
+        -webkit-border-image: none;
+        -webkit-box-align: center;
+        -webkit-box-shadow: white 0px 1px 0px 0px inset;
+        -webkit-font-smoothing: antialiased;
+        -webkit-rtl-ordering: logical;
+        -webkit-user-select: text;
+        -webkit-writing-mode: horizontal-tb;
+        background-clip: padding-box;
+        background-color: #eeeeee;
+        background-image: -webkit-linear-gradient(top, #eeeeee, #d2d2d2);
+        border-bottom-color: #cacaca;
+        border-bottom-left-radius: 3px;
+        border-bottom-right-radius: 3px;
+        border-bottom-style: solid;
+        border-bottom-width: 1px;
+        border-left-color: #cacaca;
+        border-left-style: solid;
+        border-left-width: 1px;
+        border-right-color: #cacaca;
+        border-right-style: solid;
+        border-right-width: 1px;
+        border-top-color: #cacaca;
+        border-top-left-radius: 3px;
+        border-top-right-radius: 3px;
+        border-top-style: solid;
+        border-top-width: 1px;
+        box-shadow: white 0px 1px 0px 0px inset;
+        box-sizing: border-box;
+        color: #333333;
+        /* display: inline-block; */
+        display: inline;
+        float: left;
+        font-family: 'Open Sans', Verdana, Geneva, sans-serif;
+        font-size: 13px;
+        font-style: normal;
+        font-variant: normal;
+        font-weight: bold;
+        letter-spacing: normal;
+        line-height: 25.59375px;
+        margin-bottom: calc((var(--baseline)*0.75));
+        margin: 0;
+        padding: 0px;
+        text-align: center;
+        text-decoration: none;
+        text-indent: 0px;
+        text-shadow: #f8f8f8 0px 1px 0px;
+        text-transform: none;
+        vertical-align: top;
+        white-space: pre-line;
+        width: 25px;
+        height: 25px;
+        word-spacing: 0px;
+        writing-mode: lr-tb; }
+      /* line 126, /openedx/edx-platform/xmodule/assets/poll/_display.scss */
+      .xmodule_display.xmodule_PollBlock div.poll_question .poll_answer .question .button.answered {
+        -webkit-box-shadow: #61b8e1 0px 1px 0px 0px inset;
+        background-color: #1d9dd9;
+        background-image: -webkit-linear-gradient(top, #1d9dd9, #0e7cb0);
+        border-bottom-color: #0d72a2;
+        border-left-color: #0d72a2;
+        border-right-color: #0d72a2;
+        border-top-color: #0d72a2;
+        box-shadow: #61b8e1 0px 1px 0px 0px inset;
+        color: white;
+        text-shadow: #076794 0px 1px 0px;
+        background-image: none; }
+      /* line 140, /openedx/edx-platform/xmodule/assets/poll/_display.scss */
+      .xmodule_display.xmodule_PollBlock div.poll_question .poll_answer .question .text {
+        display: inline;
+        float: left;
+        width: 80%;
+        text-align: left;
+        min-height: 30px;
+        margin-left: var(--baseline);
+        height: auto;
+        margin-bottom: var(--baseline); }
+        /* line 152, /openedx/edx-platform/xmodule/assets/poll/_display.scss */
+        .xmodule_display.xmodule_PollBlock div.poll_question .poll_answer .question .text.short {
+          width: 100px; }
+    /* line 158, /openedx/edx-platform/xmodule/assets/poll/_display.scss */
+    .xmodule_display.xmodule_PollBlock div.poll_question .poll_answer .stats {
+      min-height: 40px;
+      margin-top: var(--baseline);
+      clear: both; }
+      /* line 163, /openedx/edx-platform/xmodule/assets/poll/_display.scss */
+      .xmodule_display.xmodule_PollBlock div.poll_question .poll_answer .stats.short {
+        margin-top: 0;
+        clear: none;
+        display: inline;
+        float: right;
+        width: 70%; }
+      /* line 171, /openedx/edx-platform/xmodule/assets/poll/_display.scss */
+      .xmodule_display.xmodule_PollBlock div.poll_question .poll_answer .stats .bar {
+        width: 75%;
+        height: 20px;
+        border: 1px solid black;
+        display: inline;
+        float: left;
+        margin-right: calc((var(--baseline)/2)); }
+        /* line 179, /openedx/edx-platform/xmodule/assets/poll/_display.scss */
+        .xmodule_display.xmodule_PollBlock div.poll_question .poll_answer .stats .bar.short {
+          width: 65%;
+          height: 20px;
+          margin-top: 3px; }
+        /* line 185, /openedx/edx-platform/xmodule/assets/poll/_display.scss */
+        .xmodule_display.xmodule_PollBlock div.poll_question .poll_answer .stats .bar .percent {
+          background-color: gray;
+          width: 0;
+          height: 20px; }
+      /* line 194, /openedx/edx-platform/xmodule/assets/poll/_display.scss */
+      .xmodule_display.xmodule_PollBlock div.poll_question .poll_answer .stats .number {
+        width: 80px;
+        display: inline;
+        float: right;
+        height: 28px;
+        text-align: right; }
+        /* line 201, /openedx/edx-platform/xmodule/assets/poll/_display.scss */
+        .xmodule_display.xmodule_PollBlock div.poll_question .poll_answer .stats .number.short {
+          width: 120px;
+          height: auto; }
+  /* line 209, /openedx/edx-platform/xmodule/assets/poll/_display.scss */
+  .xmodule_display.xmodule_PollBlock div.poll_question .poll_answer.answered {
+    -webkit-box-shadow: #61b8e1 0 1px 0 0 inset;
+    background-color: #1d9dd9;
+    background-image: -webkit-linear-gradient(top, #1d9dd9, #0e7cb0);
+    border-bottom-color: #0d72a2;
+    border-left-color: #0d72a2;
+    border-right-color: #0d72a2;
+    border-top-color: #0d72a2;
+    box-shadow: #61b8e1 0 1px 0 0 inset;
+    color: white;
+    text-shadow: #076794 0 1px 0; }
+  /* line 222, /openedx/edx-platform/xmodule/assets/poll/_display.scss */
+  .xmodule_display.xmodule_PollBlock div.poll_question .button.reset-button {
+    clear: both;
+    float: right; }
diff --git a/xmodule/assets/PollBlockDisplay.scss b/xmodule/assets/PollBlockDisplay.scss
deleted file mode 100644
index 85110778c742..000000000000
--- a/xmodule/assets/PollBlockDisplay.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.xmodule_display.xmodule_PollBlock {
-  @import "poll/display.scss";
-}
diff --git a/xmodule/assets/ProblemBlockDisplay.css b/xmodule/assets/ProblemBlockDisplay.css
new file mode 100644
index 000000000000..a5eb148efe08
--- /dev/null
+++ b/xmodule/assets/ProblemBlockDisplay.css
@@ -0,0 +1,1246 @@
+@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700");
+/* line 1, /openedx/edx-platform/xmodule/assets/ProblemBlockDisplay.scss */
+.xmodule_display.xmodule_ProblemBlock {
+  /* stylelint-disable-line */
+  /* stylelint-disable-line */ }
+  /* line 44, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .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; }
+  /* line 67, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock h2 {
+    margin-top: 0;
+    margin-bottom: calc((var(--baseline)*0.75)); }
+    /* line 71, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .xmodule_display.xmodule_ProblemBlock h2.problem-header {
+      display: inline-block; }
+      /* line 74, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+      .xmodule_display.xmodule_ProblemBlock h2.problem-header section.staff {
+        margin-top: calc((var(--baseline)*1.5));
+        font-size: 80%; }
+    @media print {
+      /* line 67, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+      .xmodule_display.xmodule_ProblemBlock h2 {
+        display: block;
+        width: auto;
+        border-right: 0; } }
+  /* line 87, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock .explanation-title {
+    font-weight: bold; }
+  /* line 91, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .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) / 4)); }
+    /* line 94, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .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) / 4)); }
+  /* line 102, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock .feedback-hint-incorrect .icon {
+    color: var(--incorrect); }
+  /* line 111, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock .feedback-hint-partially-correct .icon,
+  .xmodule_display.xmodule_ProblemBlock .feedback-hint-correct .icon {
+    color: var(--correct); }
+  /* line 116, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock .feedback-hint-text {
+    color: #646464; }
+  /* line 120, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock .problem-hint {
+    margin-bottom: 20px;
+    width: 100%; }
+  /* line 125, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock .hint-label {
+    display: inline-block;
+    padding-right: 0.5em; }
+  /* line 130, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock .hint-text {
+    display: inline-block; }
+  /* line 134, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock .feedback-hint-multi .hint-text {
+    display: block; }
+  /* line 138, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock iframe[seamless] {
+    overflow: hidden;
+    padding: 0;
+    border: 0 none transparent;
+    background-color: transparent; }
+  /* line 145, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock .inline-error {
+    color: var(--error-color-dark); }
+  /* line 149, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem-progress {
+    display: inline-block;
+    color: var(--gray-d1);
+    font-size: 0.875em; }
+  /* line 157, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem {
+    padding-top: var(--baseline); }
+    @media print {
+      /* line 157, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+      .xmodule_display.xmodule_ProblemBlock div.problem {
+        display: block;
+        padding: 0;
+        width: auto; }
+        /* line 165, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+        .xmodule_display.xmodule_ProblemBlock div.problem canvas,
+        .xmodule_display.xmodule_ProblemBlock div.problem img {
+          page-break-inside: avoid; } }
+    /* line 171, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .xmodule_display.xmodule_ProblemBlock div.problem input.math {
+      direction: ltr; }
+    /* line 175, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .xmodule_display.xmodule_ProblemBlock div.problem .inline {
+      display: inline; }
+      /* line 178, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+      .xmodule_display.xmodule_ProblemBlock div.problem .inline + p {
+        margin-top: var(--baseline); }
+    /* line 183, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .xmodule_display.xmodule_ProblemBlock div.problem .question-description {
+      color: var(--gray-d1);
+      font-size: var(--small-font-size); }
+    /* line 188, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .xmodule_display.xmodule_ProblemBlock div.problem form > label, .xmodule_display.xmodule_ProblemBlock div.problem .problem-group-label {
+      display: block;
+      margin-bottom: var(--baseline);
+      font: inherit;
+      color: inherit;
+      -webkit-font-smoothing: initial; }
+    /* line 196, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .xmodule_display.xmodule_ProblemBlock div.problem .problem-group-label + .question-description {
+      margin-top: calc(-1 * var(--baseline)); }
+  /* line 204, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock .wrapper-problem-response + .wrapper-problem-response,
+  .xmodule_display.xmodule_ProblemBlock .wrapper-problem-response + p {
+    margin-top: calc((var(--baseline) * 1.5)); }
+  /* line 210, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup {
+    min-width: 100px;
+    width: auto !important;
+    width: 100px; }
+    /* line 15, /openedx/edx-platform/common/static/sass/bourbon/addons/_clearfix.scss */
+    .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup:after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup:after {
+      content: "";
+      display: table;
+      clear: both; }
+    /* line 217, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .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)/2));
+      border: 2px solid var(--gray-l4);
+      border-radius: 3px;
+      padding: calc((var(--baseline)/2));
+      width: 100%; }
+      /* line 228, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+      .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup label::after, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup label::after {
+        margin-left: calc((var(--baseline)*0.75)); }
+    /* line 233, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .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; }
+    /* line 239, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup fieldset, .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup fieldset {
+      box-sizing: border-box; }
+    /* line 243, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .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)/4));
+      margin-right: calc((var(--baseline)/2)); }
+    /* line 252, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .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); }
+    /* line 260, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .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); }
+      /* line 55, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+      .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);
+        font-size: 1.2em;
+        content: ""; }
+    /* line 266, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .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); }
+      /* line 55, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+      .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);
+        font-size: 1.2em;
+        content: ""; }
+    /* line 272, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .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); }
+      /* line 55, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+      .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);
+        font-size: 1.2em;
+        content: ""; }
+    /* line 278, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .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); }
+  /* line 291, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup .field {
+    position: relative; }
+  /* line 295, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup label {
+    padding: calc((var(--baseline)/2));
+    padding-left: calc((var(--baseline)*2.3));
+    position: relative;
+    font-size: var(--base-font-size);
+    line-height: normal;
+    cursor: pointer; }
+  /* line 305, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .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.35em;
+    width: calc(var(--baseline)*1.1);
+    height: calc(var(--baseline)*1.1);
+    z-index: 1; }
+  /* line 316, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup legend {
+    margin-bottom: var(--baseline);
+    max-width: 100%;
+    white-space: normal; }
+  /* line 322, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem .choicegroup legend + .question-description {
+    margin-top: calc(-1 * var(--baseline));
+    max-width: 100%;
+    white-space: normal; }
+  /* line 334, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem .indicator-container {
+    margin-left: calc((var(--baseline)*0.75)); }
+    /* line 337, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .xmodule_display.xmodule_ProblemBlock div.problem .indicator-container .status {
+      width: var(--baseline); }
+      /* line 55, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+      .xmodule_display.xmodule_ProblemBlock div.problem .indicator-container .status.correct .status-icon::after {
+        color: var(--correct);
+        font-size: 1.2em;
+        content: ""; }
+      /* line 55, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+      .xmodule_display.xmodule_ProblemBlock div.problem .indicator-container .status.partially-correct .status-icon::after {
+        color: var(--partially-correct);
+        font-size: 1.2em;
+        content: ""; }
+      /* line 55, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+      .xmodule_display.xmodule_ProblemBlock div.problem .indicator-container .status.incorrect .status-icon::after {
+        color: var(--incorrect);
+        font-size: 1.2em;
+        content: ""; }
+      /* line 358, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+      .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: ''; }
+  /* line 371, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem ol.enumerate li::before {
+    display: block;
+    visibility: hidden;
+    height: 0;
+    content: " "; }
+  /* line 381, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem .solution-span > span {
+    margin: var(--baseline) 0;
+    display: block;
+    position: relative; }
+    /* line 386, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .xmodule_display.xmodule_ProblemBlock div.problem .solution-span > span:empty {
+      display: none; }
+  /* line 393, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem .targeted-feedback-span > span {
+    display: block;
+    position: relative; }
+    /* line 397, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .xmodule_display.xmodule_ProblemBlock div.problem .targeted-feedback-span > span:empty {
+      display: none; }
+  /* line 408, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem div p.answer {
+    margin-top: -2px; }
+  /* line 412, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem div p span.clarification i {
+    font-style: normal; }
+    /* line 415, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .xmodule_display.xmodule_ProblemBlock div.problem div p span.clarification i:hover {
+      color: var(--blue); }
+  /* line 422, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem div.correct input, .xmodule_display.xmodule_ProblemBlock div.problem div.ui-icon-check input {
+    border-color: var(--correct); }
+  /* line 428, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .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); }
+  /* line 434, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem div.processing input {
+    border-color: #aaa; }
+  /* line 440, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem div.ui-icon-close input {
+    border-color: var(--incorrect); }
+  /* line 446, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem div.incorrect input, .xmodule_display.xmodule_ProblemBlock div.problem div.incomplete input {
+    border-color: var(--incorrect); }
+  /* line 452, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem div.submitted input, .xmodule_display.xmodule_ProblemBlock div.problem div.ui-icon-check input {
+    border-color: var(--submitted); }
+  /* line 457, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem div p.answer {
+    display: inline-block;
+    margin-top: calc((var(--baseline) / 2));
+    margin-bottom: 0; }
+    /* line 462, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .xmodule_display.xmodule_ProblemBlock div.problem div p.answer::before {
+      display: inline;
+      content: "Answer: "; }
+    /* line 471, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .xmodule_display.xmodule_ProblemBlock div.problem div p.answer:empty::before {
+      display: none; }
+  /* line 477, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem div div.equation {
+    clear: both;
+    margin-top: 3px; }
+    /* line 481, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .xmodule_display.xmodule_ProblemBlock div.problem div div.equation .MathJax_Display {
+      width: auto; }
+    /* line 485, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .xmodule_display.xmodule_ProblemBlock div.problem div div.equation img.loading {
+      padding-left: calc((var(--baseline)/2));
+      display: inline-block; }
+    /* line 491, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .xmodule_display.xmodule_ProblemBlock div.problem div div.equation span {
+      margin-bottom: 0;
+      display: inline-block; }
+      /* line 495, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+      .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 {
+    /* line 506, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .xmodule_display.xmodule_ProblemBlock div.problem div [id^='display'].equation {
+      display: none; } }
+  /* line 514, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .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; }
+  /* line 523, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .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; }
+  /* line 532, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .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; }
+  /* line 541, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .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; }
+  /* line 551, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem div .reload {
+    float: right;
+    margin: calc((var(--baseline)/2)); }
+  /* line 558, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem div .grader-status {
+    margin: calc(var(--baseline)/2) 0;
+    padding: calc(var(--baseline)/2);
+    border-radius: 5px;
+    background: var(--gray-l6); }
+    /* line 15, /openedx/edx-platform/common/static/sass/bourbon/addons/_clearfix.scss */
+    .xmodule_display.xmodule_ProblemBlock div.problem div .grader-status:after {
+      content: "";
+      display: table;
+      clear: both; }
+    /* line 566, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .xmodule_display.xmodule_ProblemBlock div.problem div .grader-status span {
+      display: block;
+      float: left;
+      overflow: hidden;
+      margin: -7px 7px 0 0;
+      text-indent: -9999px; }
+    /* line 574, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .xmodule_display.xmodule_ProblemBlock div.problem div .grader-status .grading {
+      margin: 0px 7px 0 0;
+      padding-left: 25px;
+      background: var(--icon-info) left center no-repeat;
+      text-indent: 0px; }
+    /* line 581, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .xmodule_display.xmodule_ProblemBlock div.problem div .grader-status p {
+      float: left;
+      margin-bottom: 0;
+      text-transform: capitalize;
+      line-height: 20px; }
+    /* line 588, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .xmodule_display.xmodule_ProblemBlock div.problem div .grader-status.file {
+      margin-top: var(--baseline);
+      padding: var(--baseline) 0 0 0;
+      border: 0;
+      border-top: 1px solid #eee;
+      background: var(--white); }
+      /* line 595, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+      .xmodule_display.xmodule_ProblemBlock div.problem div .grader-status.file p.debug {
+        display: none; }
+      /* line 599, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+      .xmodule_display.xmodule_ProblemBlock div.problem div .grader-status.file input {
+        float: left; }
+  /* line 607, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem div .evaluation p {
+    margin-bottom: calc((var(--baseline)/5)); }
+  /* line 613, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem div .feedback-on-feedback {
+    margin-right: var(--baseline);
+    height: 100px; }
+  /* line 619, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem div .evaluation-response header {
+    text-align: right; }
+    /* line 622, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .xmodule_display.xmodule_ProblemBlock div.problem div .evaluation-response header a {
+      font-size: .85em; }
+  /* line 629, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem div .evaluation-scoring .scoring-list {
+    margin-left: 3px;
+    list-style-type: none; }
+    /* line 633, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .xmodule_display.xmodule_ProblemBlock div.problem div .evaluation-scoring .scoring-list li {
+      display: inline;
+      margin-left: 50px; }
+      /* line 637, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+      .xmodule_display.xmodule_ProblemBlock div.problem div .evaluation-scoring .scoring-list li:first-child {
+        margin-left: 0; }
+      /* line 641, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+      .xmodule_display.xmodule_ProblemBlock div.problem div .evaluation-scoring .scoring-list li label {
+        font-size: .9em; }
+  /* line 648, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem div .submit-message-container {
+    margin: var(--baseline) 0px; }
+  /* line 654, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem div.inline > span {
+    display: inline; }
+  /* line 659, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem ul {
+    margin-bottom: lh();
+    margin-left: .75em;
+    margin-left: .75rem;
+    list-style: disc outside none; }
+  /* line 666, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem ol {
+    margin-bottom: lh();
+    margin-left: .75em;
+    margin-left: .75rem;
+    list-style: decimal outside none; }
+  /* line 673, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem dl {
+    line-height: 1.4em; }
+  /* line 682, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem dl dd {
+    margin-bottom: 0; }
+  /* line 686, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem dd {
+    margin-left: .5em;
+    margin-left: .5rem; }
+  /* line 691, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem li {
+    margin-bottom: lh(0.5);
+    line-height: 1.4em; }
+    /* line 695, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .xmodule_display.xmodule_ProblemBlock div.problem li:last-child {
+      margin-bottom: 0; }
+  /* line 700, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem p {
+    margin-bottom: lh(); }
+  /* line 704, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem table {
+    margin: lh() 0;
+    border-collapse: collapse;
+    table-layout: auto; }
+    /* line 710, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .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; }
+    /* line 714, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .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; }
+    /* line 718, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .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; }
+    /* line 723, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .xmodule_display.xmodule_ProblemBlock div.problem table th {
+      text-align: left; }
+    /* line 729, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .xmodule_display.xmodule_ProblemBlock div.problem table td {
+      text-align: left; }
+    /* line 733, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .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: .25em .75em .25em 0;
+      padding: .25rem .75rem .25rem 0; }
+    /* line 738, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .xmodule_display.xmodule_ProblemBlock div.problem table caption {
+      margin-bottom: .75em;
+      margin-bottom: .75rem;
+      padding: .75em 0;
+      padding: .75rem 0;
+      background: #f1f1f1; }
+    /* line 746, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .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; }
+  /* line 751, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem code {
+    margin: 0 2px;
+    padding: 0px 5px;
+    border: 1px solid #eaeaea;
+    border-radius: 3px;
+    background-color: var(--gray-l6);
+    white-space: nowrap;
+    font-size: .9em; }
+  /* line 761, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem pre {
+    overflow: auto;
+    padding: 6px calc(var(--baseline)/2);
+    border: 1px solid var(--gray-l3);
+    border-radius: 3px;
+    background-color: var(--gray-l6);
+    font-size: .9em;
+    line-height: 1.4; }
+    /* line 770, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .xmodule_display.xmodule_ProblemBlock div.problem pre > code {
+      margin: 0;
+      padding: 0;
+      border: none;
+      background: transparent;
+      white-space: pre; }
+  /* line 784, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .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);
+    border-radius: 3px;
+    min-width: 160px;
+    height: 46px; }
+  /* line 793, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .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)/2));
+    background: none; }
+  /* line 801, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock .problem .capa_inputtype.textline > .incorrect input, .xmodule_display.xmodule_ProblemBlock .problem .inputtype.formulaequationinput > .incorrect input {
+    border: 2px solid var(--incorrect); }
+  /* line 55, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .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);
+    font-size: 1.2em;
+    content: ""; }
+  /* line 812, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .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); }
+  /* line 55, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .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);
+    font-size: 1.2em;
+    content: ""; }
+  /* line 823, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock .problem .capa_inputtype.textline > .correct input, .xmodule_display.xmodule_ProblemBlock .problem .inputtype.formulaequationinput > .correct input {
+    border: 2px solid var(--correct); }
+  /* line 55, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .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);
+    font-size: 1.2em;
+    content: ""; }
+  /* line 834, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock .problem .capa_inputtype.textline > .submitted input, .xmodule_display.xmodule_ProblemBlock .problem .inputtype.formulaequationinput > .submitted input {
+    border: 2px solid var(--submitted); }
+  /* line 838, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock .problem .capa_inputtype.textline > .submitted .status, .xmodule_display.xmodule_ProblemBlock .problem .inputtype.formulaequationinput > .submitted .status {
+    content: ''; }
+  /* line 845, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .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); }
+  /* line 851, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .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; }
+  /* line 863, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock .problem .inputtype.formulaequationinput > div input {
+    direction: ltr;
+    text-align: left; }
+  /* line 870, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock .problem .trailing_text {
+    margin-right: calc((var(--baseline)/2));
+    display: inline-block; }
+  /* line 881, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock .problem .inputtype.option-input {
+    margin: 0 0 0 0 !important; }
+    /* line 884, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .xmodule_display.xmodule_ProblemBlock .problem .inputtype.option-input .indicator-container {
+      display: inline-block; }
+      /* line 887, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+      .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; }
+  /* line 901, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem .CodeMirror {
+    border: 1px solid black;
+    font-size: 14px;
+    line-height: 18px;
+    resize: none; }
+    /* line 907, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .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; }
+    /* line 913, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .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; }
+      /* line 926, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+      .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); }
+  /* line 938, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem .CodeMirror-focused pre.CodeMirror-cursor {
+    visibility: visible; }
+  /* line 942, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem .CodeMirror-code pre {
+    width: -webkit-fit-content;
+    width: -moz-fit-content;
+    width: fit-content; }
+  /* line 948, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem .CodeMirror-scroll {
+    margin-right: 0px; }
+  /* line 953, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock .capa-message {
+    display: inline-block;
+    color: var(--gray-d1);
+    -webkit-font-smoothing: antialiased; }
+  /* line 961, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem .action {
+    min-height: var(--baseline);
+    width: 100%;
+    display: flex;
+    display: -ms-flexbox;
+    -ms-flex-align: start;
+    flex-direction: row;
+    align-items: center;
+    flex-wrap: wrap; }
+    /* line 971, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .xmodule_display.xmodule_ProblemBlock div.problem .action .problem-action-buttons-wrapper {
+      display: inline-flex;
+      justify-content: flex-end;
+      width: 100%;
+      padding-bottom: var(--baseline); }
+    /* line 978, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .xmodule_display.xmodule_ProblemBlock div.problem .action .problem-action-button-wrapper {
+      border-right: 1px solid var(--gray-300);
+      padding: 0 13px;
+      display: inline-block; }
+      /* line 984, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+      .xmodule_display.xmodule_ProblemBlock div.problem .action .problem-action-button-wrapper:last-child {
+        border: none;
+        padding-right: 0; }
+    /* line 990, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .xmodule_display.xmodule_ProblemBlock div.problem .action .problem-action-btn {
+      border: none;
+      max-width: 110px; }
+      /* line 994, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+      .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) !important; }
+      /* line 1000, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+      .xmodule_display.xmodule_ProblemBlock div.problem .action .problem-action-btn .icon {
+        margin-bottom: calc(var(--baseline) / 10);
+        display: block; }
+      @media print {
+        /* line 990, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+        .xmodule_display.xmodule_ProblemBlock div.problem .action .problem-action-btn {
+          display: none; } }
+    /* line 1010, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .xmodule_display.xmodule_ProblemBlock div.problem .action .submit-attempt-container {
+      padding-bottom: var(--baseline);
+      flex-grow: 1;
+      display: flex;
+      align-items: center; }
+      @media (max-width: var(--bp-screen-lg)) {
+        /* line 1010, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+        .xmodule_display.xmodule_ProblemBlock div.problem .action .submit-attempt-container {
+          max-width: 100%;
+          padding-bottom: var(--baseline); } }
+      /* line 1021, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+      .xmodule_display.xmodule_ProblemBlock div.problem .action .submit-attempt-container .submit {
+        margin-right: calc((var(--baseline) / 2));
+        float: left;
+        white-space: nowrap; }
+      /* line 1028, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+      .xmodule_display.xmodule_ProblemBlock div.problem .action .submit-attempt-container .submit-cta-description {
+        color: var(--primary);
+        font-size: small;
+        padding-right: calc(var(--baseline) / 2); }
+      /* line 1033, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+      .xmodule_display.xmodule_ProblemBlock div.problem .action .submit-attempt-container .submit-cta-link-button {
+        color: var(--primary);
+        padding-right: calc(var(--baseline) / 4); }
+    /* line 1039, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .xmodule_display.xmodule_ProblemBlock div.problem .action .submission-feedback {
+      margin-right: calc((var(--baseline) / 2));
+      margin-top: calc(var(--baseline) / 2);
+      display: inline-block;
+      color: var(--gray-d1);
+      font-size: var(--medium-font-size);
+      -webkit-font-smoothing: antialiased;
+      vertical-align: middle; }
+      /* line 1049, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+      .xmodule_display.xmodule_ProblemBlock div.problem .action .submission-feedback.cta-enabled {
+        margin-top: 0; }
+  /* line 1059, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem hr {
+    float: none;
+    clear: both;
+    margin: 0 0 .75rem;
+    width: 100%;
+    height: 1px;
+    border: none;
+    background: #ddd;
+    color: #ddd; }
+  /* line 1070, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem .hidden {
+    display: none;
+    visibility: hidden; }
+  /* line 1075, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem input[type="email"], .xmodule_display.xmodule_ProblemBlock div.problem input[type="number"], .xmodule_display.xmodule_ProblemBlock div.problem input[type="password"], .xmodule_display.xmodule_ProblemBlock div.problem input[type="search"], .xmodule_display.xmodule_ProblemBlock div.problem input[type="tel"], .xmodule_display.xmodule_ProblemBlock div.problem input[type="text"], .xmodule_display.xmodule_ProblemBlock div.problem input[type="url"], .xmodule_display.xmodule_ProblemBlock div.problem input[type="color"], .xmodule_display.xmodule_ProblemBlock div.problem input[type="date"], .xmodule_display.xmodule_ProblemBlock div.problem input[type="datetime"], .xmodule_display.xmodule_ProblemBlock div.problem input[type="datetime-local"], .xmodule_display.xmodule_ProblemBlock div.problem input[type="month"], .xmodule_display.xmodule_ProblemBlock div.problem input[type="time"], .xmodule_display.xmodule_ProblemBlock div.problem input[type="week"] {
+    display: inline;
+    width: auto; }
+  /* line 1081, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem center {
+    display: block;
+    margin: lh() 0;
+    padding: lh();
+    border: 1px solid var(--gray-l3); }
+  /* line 1088, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem .message {
+    font-size: inherit; }
+  /* line 1092, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem .detailed-solution > p {
+    margin: 0; }
+    /* line 1095, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .xmodule_display.xmodule_ProblemBlock div.problem .detailed-solution > p:first-child {
+      margin-bottom: 0; }
+  /* line 1106, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .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; }
+  /* line 1116, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem div.capa_alert {
+    margin-top: var(--baseline);
+    padding: 8px 12px;
+    border: 1px solid var(--warning-color);
+    border-radius: 3px;
+    background: var(--warning-color-accent);
+    font-size: 0.9em; }
+  /* line 1125, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock 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); }
+    /* line 1132, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .xmodule_display.xmodule_ProblemBlock div.problem .notification.success {
+      border-top: 3px solid var(--success); }
+      /* line 239, common/static/sass/edx-pattern-library-shims/base/_variables.scss */
+      .xmodule_display.xmodule_ProblemBlock div.problem .notification.success .icon {
+        margin-right: 15px;
+        color: var(--success); }
+    /* line 1136, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .xmodule_display.xmodule_ProblemBlock div.problem .notification.error {
+      border-top: 3px solid var(--danger); }
+      /* line 239, common/static/sass/edx-pattern-library-shims/base/_variables.scss */
+      .xmodule_display.xmodule_ProblemBlock div.problem .notification.error .icon {
+        margin-right: 15px;
+        color: var(--danger); }
+    /* line 1140, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .xmodule_display.xmodule_ProblemBlock div.problem .notification.warning {
+      border-top: 3px solid var(--warning); }
+      /* line 239, common/static/sass/edx-pattern-library-shims/base/_variables.scss */
+      .xmodule_display.xmodule_ProblemBlock div.problem .notification.warning .icon {
+        margin-right: 15px;
+        color: var(--warning); }
+    /* line 1144, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .xmodule_display.xmodule_ProblemBlock div.problem .notification.general {
+      border-top: 3px solid var(--general-color-accent); }
+      /* line 239, common/static/sass/edx-pattern-library-shims/base/_variables.scss */
+      .xmodule_display.xmodule_ProblemBlock div.problem .notification.general .icon {
+        margin-right: 15px;
+        color: var(--general-color-accent); }
+    /* line 1148, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .xmodule_display.xmodule_ProblemBlock div.problem .notification.problem-hint {
+      border: 1px solid var(--uxpl-gray-background);
+      border-radius: 6px; }
+      /* line 1152, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+      .xmodule_display.xmodule_ProblemBlock div.problem .notification.problem-hint .icon {
+        margin-right: calc(3 * var(--baseline) / 4);
+        color: var(--uxpl-gray-dark); }
+      /* line 1158, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+      .xmodule_display.xmodule_ProblemBlock div.problem .notification.problem-hint li {
+        color: var(--uxpl-gray-base); }
+        /* line 1161, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+        .xmodule_display.xmodule_ProblemBlock div.problem .notification.problem-hint li strong {
+          color: var(--uxpl-gray-dark); }
+    /* line 1167, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .xmodule_display.xmodule_ProblemBlock div.problem .notification .icon {
+      float: left;
+      position: relative;
+      top: calc(var(--baseline) / 5); }
+    /* line 1174, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .xmodule_display.xmodule_ProblemBlock div.problem .notification .notification-message {
+      display: inline-block;
+      width: 69.38776%;
+      margin-bottom: 8px; }
+      /* line 1181, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+      .xmodule_display.xmodule_ProblemBlock div.problem .notification .notification-message ol {
+        list-style: none outside none;
+        padding: 0;
+        margin: 0; }
+        /* line 1186, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+        .xmodule_display.xmodule_ProblemBlock div.problem .notification .notification-message ol li:not(:last-child) {
+          margin-bottom: calc(var(--baseline) / 4); }
+    /* line 1192, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .xmodule_display.xmodule_ProblemBlock div.problem .notification .notification-btn-wrapper {
+      float: right; }
+  /* line 1198, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem .notification-btn {
+    float: right;
+    padding: calc((var(--baseline) / 10)) calc((var(--baseline) / 4));
+    min-width: calc((var(--baseline) * 3));
+    display: block;
+    clear: both; }
+    /* line 1206, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .xmodule_display.xmodule_ProblemBlock div.problem .notification-btn:first-child {
+      margin-bottom: calc(var(--baseline) / 4); }
+  /* line 1213, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem button:hover {
+    background-image: none;
+    box-shadow: none; }
+  /* line 1218, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem button:focus {
+    box-shadow: none; }
+  /* line 1222, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem button.btn-default {
+    background-color: transparent; }
+  /* line 1227, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem button.btn-brand:hover {
+    background-color: var(--btn-brand-focus-background); }
+  /* line 1233, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem .review-btn {
+    color: var(--blue); }
+    /* line 1235, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .xmodule_display.xmodule_ProblemBlock div.problem .review-btn.sr {
+      color: var(--blue); }
+  /* line 1240, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem div.capa_reset {
+    padding: 25px;
+    background-color: var(--error-color-light);
+    border: 1px solid var(--error-color);
+    border-radius: 3px;
+    font-size: 1em;
+    margin-top: calc(var(--baseline)/2);
+    margin-bottom: calc(var(--baseline)/2); }
+  /* line 1250, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem .capa_reset > h2 {
+    color: #a00; }
+  /* line 1254, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem .capa_reset li {
+    font-size: 0.9em; }
+  /* line 1258, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem .hints {
+    border: 1px solid var(--gray-l3); }
+    /* line 1261, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .xmodule_display.xmodule_ProblemBlock div.problem .hints h3 {
+      padding: 9px;
+      border-bottom: 1px solid #e3e3e3;
+      background: #eee;
+      text-shadow: 0 1px 0 var(--white);
+      font-size: 1em; }
+    /* line 1271, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .xmodule_display.xmodule_ProblemBlock div.problem .hints div {
+      border-bottom: 1px solid #ddd; }
+      /* line 1274, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+      .xmodule_display.xmodule_ProblemBlock div.problem .hints div:last-child {
+        border-bottom: none; }
+      /* line 1278, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+      .xmodule_display.xmodule_ProblemBlock div.problem .hints div p {
+        margin-bottom: 0; }
+      /* line 1283, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+      .xmodule_display.xmodule_ProblemBlock div.problem .hints div header a {
+        display: block;
+        padding: 9px;
+        background: var(--gray-l6);
+        box-shadow: inset 0 0 0 1px var(--white); }
+      /* line 1291, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+      .xmodule_display.xmodule_ProblemBlock div.problem .hints div > section {
+        padding: 9px; }
+  /* line 1297, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem .test {
+    padding-top: 18px; }
+    /* line 1300, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .xmodule_display.xmodule_ProblemBlock div.problem .test header {
+      margin-bottom: 12px; }
+      /* line 1303, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+      .xmodule_display.xmodule_ProblemBlock div.problem .test header h3 {
+        color: #aaa;
+        font-style: normal;
+        font-size: 0.9em; }
+    /* line 1312, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .xmodule_display.xmodule_ProblemBlock div.problem .test > section {
+      position: relative;
+      margin-bottom: calc((var(--baseline)/2));
+      padding: 9px 9px var(--baseline);
+      border: 1px solid #ddd;
+      border-radius: 3px;
+      background: var(--white);
+      box-shadow: inset 0 0 0 1px #eee; }
+      /* line 1321, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+      .xmodule_display.xmodule_ProblemBlock div.problem .test > section p:last-of-type {
+        margin-bottom: 0; }
+      /* line 1325, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+      .xmodule_display.xmodule_ProblemBlock div.problem .test > section .shortform {
+        margin-bottom: .6em; }
+      /* line 1329, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+      .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)/5));
+        background: var(--gray-l4);
+        text-align: right;
+        font-size: 1em; }
+        /* line 1339, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+        .xmodule_display.xmodule_ProblemBlock div.problem .test > section a.full.full-top {
+          position: absolute;
+          top: 1px;
+          right: 0;
+          bottom: auto;
+          left: 0; }
+        /* line 1343, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+        .xmodule_display.xmodule_ProblemBlock div.problem .test > section a.full.full-bottom {
+          position: absolute;
+          top: auto;
+          right: 0;
+          bottom: 1px;
+          left: 0; }
+  /* line 1351, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section {
+    padding-top: calc((var(--baseline)*1.5));
+    padding-left: var(--baseline);
+    background-color: #fafafa;
+    color: #2c2c2c;
+    font-size: 1em;
+    font-family: monospace; }
+    /* line 1359, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section header {
+      font-size: 1.4em; }
+    /* line 1367, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section .longform {
+      margin: 0;
+      padding: 0; }
+      /* line 1371, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+      .xmodule_display.xmodule_ProblemBlock 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: var(--icon-incorrect) center left no-repeat; }
+        /* line 1376, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+        .xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section .longform .result-errors li {
+          color: #b00; }
+      /* line 1381, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+      .xmodule_display.xmodule_ProblemBlock 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; }
+        /* line 1387, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+        .xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section .longform .result-output h4 {
+          font-size: 1em;
+          font-family: monospace; }
+        /* line 1392, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+        .xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section .longform .result-output dl {
+          margin: 0; }
+        /* line 1396, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+        .xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section .longform .result-output dt {
+          margin-top: var(--baseline); }
+        /* line 1400, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+        .xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section .longform .result-output dd {
+          margin-left: 24pt; }
+      /* line 1405, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+      .xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section .longform .result-correct {
+        background: var(--icon-correct) left 20px no-repeat; }
+        /* line 1408, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+        .xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section .longform .result-correct .result-actual-output {
+          color: #090; }
+      /* line 1413, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+      .xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section .longform .result-partially-correct {
+        background: var(--icon-partially-correct) left 20px no-repeat; }
+        /* line 1416, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+        .xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section .longform .result-partially-correct .result-actual-output {
+          color: #090; }
+      /* line 1421, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+      .xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section .longform .result-incorrect {
+        background: var(--icon-incorrect) left 20px no-repeat; }
+        /* line 1424, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+        .xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section .longform .result-incorrect .result-actual-output {
+          color: #b00; }
+      /* line 1429, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+      .xmodule_display.xmodule_ProblemBlock 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; }
+        /* line 1435, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+        .xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section .longform .markup-text bs {
+          color: #b00; }
+        /* line 1439, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+        .xmodule_display.xmodule_ProblemBlock div.problem .external-grader-message section .longform .markup-text bg {
+          color: #bda046; }
+  /* line 1453, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem .rubric tr {
+    margin: calc((var(--baseline)/2)) 0;
+    height: 100%; }
+  /* line 1458, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem .rubric td {
+    margin: calc((var(--baseline)/2)) 0;
+    padding: var(--baseline) 0;
+    height: 100%; }
+  /* line 1464, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem .rubric th {
+    margin: calc((var(--baseline)/4));
+    padding: calc((var(--baseline)/4)); }
+  /* line 1469, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .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)*0.75));
+    min-width: 50px;
+    min-height: 50px;
+    width: 150px;
+    height: 100%;
+    background-color: var(--gray-l3);
+    font-size: .9em; }
+  /* line 1483, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem .rubric .grade {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    margin: calc((var(--baseline)/2)); }
+  /* line 1490, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem .rubric .selected-grade {
+    background: #666;
+    color: white; }
+  /* line 1495, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem .rubric input[type=radio]:checked + label {
+    background: #666;
+    color: white; }
+  /* line 1500, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem .rubric input[class='score-selection'] {
+    display: none; }
+  /* line 1509, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock 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 */ }
+    /* line 1514, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .annotation-header {
+      padding: .5em 1em;
+      border-bottom: 1px solid var(--gray-l3); }
+    /* line 1521, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .annotation-body {
+      padding: .5em 1em; }
+    /* line 1523, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input a.annotation-return {
+      float: right;
+      font: inherit;
+      font-weight: normal; }
+    /* line 1529, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input a.annotation-return::after {
+      content: " \2191"; }
+    /* line 1531, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .block, .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input ul.tags {
+      margin: .5em 0;
+      padding: 0; }
+    /* line 1536, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .xmodule_display.xmodule_ProblemBlock 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);
+      color: #333;
+      font-style: normal; }
+    /* line 1544, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .block-comment {
+      font-style: italic; }
+    /* line 1546, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input ul.tags {
+      display: block;
+      margin-left: 1em;
+      list-style-type: none; }
+      /* line 1551, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+      .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input ul.tags li {
+        position: relative;
+        display: block;
+        margin: 1em 0 0 0; }
+        /* line 1556, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+        .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input ul.tags li .tag {
+          display: inline-block;
+          margin-left: calc((var(--baseline)*2));
+          border: 1px solid #666666; }
+          /* line 1563, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+          .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input ul.tags li .tag.selected {
+            background-color: rgba(255, 255, 10, 0.3); }
+        /* line 1568, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+        .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input ul.tags li .tag-status {
+          position: absolute;
+          left: 0; }
+        /* line 1572, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+        .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: .25em .5em; }
+    /* line 1576, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input textarea.comment {
+      padding: 0.2em 0.4em;
+      width: 100%;
+      height: 7.2em;
+      line-height: 1.4em; }
+    /* line 1587, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .answer-annotation {
+      display: block;
+      margin: 0; }
+    /* line 1590, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .debug-value {
+      margin: 1em 0;
+      padding: 1em;
+      border: 1px solid var(--black);
+      background-color: #999;
+      color: var(--white); }
+      /* line 1597, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+      .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .debug-value input[type="text"] {
+        width: 100%; }
+      /* line 1599, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+      .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .debug-value pre {
+        background-color: var(--gray-l3);
+        color: var(--black); }
+      /* line 1601, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+      .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .debug-value::before {
+        display: block;
+        content: "debug input value";
+        font-size: 1.5em; }
+  /* line 1618, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup input[type="text"] {
+    margin-bottom: 0.5em; }
+  /* line 1625, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .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); }
+  /* line 1633, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .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); }
+  /* line 1647, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .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)*0.75));
+    content: var(--icon-correct); }
+  /* line 1654, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem .choicetextgroup span.mock_label {
+    cursor: default; }
+  /* line 1665, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem .imageinput.capa_inputtype .status {
+    display: inline-block;
+    position: relative;
+    top: 3px;
+    width: 25px;
+    height: 20px; }
+    /* line 1674, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .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: ''; }
+    /* line 1678, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .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; }
+  /* line 55, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem .imageinput.capa_inputtype .correct .status-icon::after {
+    color: var(--correct);
+    font-size: 1.2em;
+    content: ""; }
+  /* line 55, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem .imageinput.capa_inputtype .incorrect .status-icon::after {
+    color: var(--incorrect);
+    font-size: 1.2em;
+    content: ""; }
+  /* line 55, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem .imageinput.capa_inputtype .partially-correct .status-icon::after {
+    color: var(--partially-correct);
+    font-size: 1.2em;
+    content: ""; }
+  /* line 1696, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem .imageinput.capa_inputtype .submitted {
+    content: ''; }
+  /* line 1706, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .tag-status {
+    display: inline-block;
+    position: relative;
+    top: 3px;
+    width: 25px;
+    height: 20px; }
+    /* line 1715, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .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: ''; }
+    /* line 1719, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+    .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; }
+  /* line 55, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .correct .status-icon::after {
+    color: var(--correct);
+    font-size: 1.2em;
+    content: ""; }
+  /* line 55, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .incorrect .status-icon::after {
+    color: var(--incorrect);
+    font-size: 1.2em;
+    content: ""; }
+  /* line 55, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .partially-correct .status-icon::after {
+    color: var(--partially-correct);
+    font-size: 1.2em;
+    content: ""; }
+  /* line 1737, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock div.problem .annotation-input .submitted {
+    content: ''; }
+  /* line 1744, /openedx/edx-platform/xmodule/assets/capa/_display.scss */
+  .xmodule_display.xmodule_ProblemBlock .problems-wrapper .loading-spinner {
+    text-align: center;
+    color: var(--gray-d1); }
diff --git a/xmodule/assets/ProblemBlockDisplay.scss b/xmodule/assets/ProblemBlockDisplay.scss
deleted file mode 100644
index 5175529246b0..000000000000
--- a/xmodule/assets/ProblemBlockDisplay.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.xmodule_display.xmodule_ProblemBlock {
-  @import "capa/display.scss";
-}
diff --git a/xmodule/assets/ProblemBlockEditor.css b/xmodule/assets/ProblemBlockEditor.css
new file mode 100644
index 000000000000..ea93131f7a6f
--- /dev/null
+++ b/xmodule/assets/ProblemBlockEditor.css
@@ -0,0 +1,185 @@
+@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700");
+/* line 1, /openedx/edx-platform/xmodule/assets/ProblemBlockEditor.scss */
+.xmodule_edit.xmodule_ProblemBlock { }
+  /* line 123, common/static/sass/_mixins.scss */
+  .xmodule_edit.xmodule_ProblemBlock .ui-col-wide {
+    width: 74.46809%;
+    margin-right: 2.12766%;
+    float: left; }
+  /* line 130, common/static/sass/_mixins.scss */
+  .xmodule_edit.xmodule_ProblemBlock .ui-col-narrow {
+    width: 23.40426%;
+    float: left; }
+  /* line 342, common/static/sass/_mixins.scss */
+  .xmodule_edit.xmodule_ProblemBlock .ui-loading {
+    box-shadow: inset 0 1px 2px 1px rgba(0, 0, 0, 0.2);
+    padding: 15px 20px; }
+  /* line 368, common/static/sass/_mixins.scss */
+  .xmodule_edit.xmodule_ProblemBlock .ui-loading {
+    animation: fadeIn 0.25s linear 1;
+    opacity: 0.6;
+    background-color: #fff;
+    padding: 30px 20px;
+    text-align: center; }
+    /* line 379, common/static/sass/_mixins.scss */
+    .xmodule_edit.xmodule_ProblemBlock .ui-loading .spin {
+      display: inline-block; }
+    /* line 385, common/static/sass/_mixins.scss */
+    .xmodule_edit.xmodule_ProblemBlock .ui-loading .copy {
+      padding-left: 5px; }
+  /* line 390, common/static/sass/_mixins.scss */
+  .xmodule_edit.xmodule_ProblemBlock .is-hidden {
+    display: none; }
+  /* line 9, /openedx/edx-platform/xmodule/assets/editor/_edit.scss */
+  .xmodule_edit.xmodule_ProblemBlock .editor {
+    position: relative; }
+    /* line 12, /openedx/edx-platform/xmodule/assets/editor/_edit.scss */
+    .xmodule_edit.xmodule_ProblemBlock .editor .row {
+      position: relative; }
+    /* line 16, /openedx/edx-platform/xmodule/assets/editor/_edit.scss */
+    .xmodule_edit.xmodule_ProblemBlock .editor .editor-bar {
+      background-color: #d4dee8;
+      background-image: -webkit-linear-gradient(top, #d4dee8, #c9d5e2);
+      background-image: linear-gradient(to bottom,#d4dee8, #c9d5e2);
+      position: relative;
+      padding: calc((var(--baseline)/4));
+      border-bottom-color: #a5aaaf; }
+      /* line 15, /openedx/edx-platform/common/static/sass/bourbon/addons/_clearfix.scss */
+      .xmodule_edit.xmodule_ProblemBlock .editor .editor-bar:after {
+        content: "";
+        display: table;
+        clear: both; }
+      /* line 24, /openedx/edx-platform/xmodule/assets/editor/_edit.scss */
+      .xmodule_edit.xmodule_ProblemBlock .editor .editor-bar button {
+        display: inline-block;
+        float: left;
+        padding: 3px calc((var(--baseline)/2)) 5px;
+        margin-left: 7px;
+        border: 0;
+        border-radius: 2px;
+        background: transparent; }
+        /* line 35, /openedx/edx-platform/xmodule/assets/editor/_edit.scss */
+        .xmodule_edit.xmodule_ProblemBlock .editor .editor-bar button .icon {
+          height: 21px; }
+        /* line 39, /openedx/edx-platform/xmodule/assets/editor/_edit.scss */
+        .xmodule_edit.xmodule_ProblemBlock .editor .editor-bar button:hover, .xmodule_edit.xmodule_ProblemBlock .editor .editor-bar button:focus {
+          background: rgba(255, 255, 255, 0.5); }
+    /* line 46, /openedx/edx-platform/xmodule/assets/editor/_edit.scss */
+    .xmodule_edit.xmodule_ProblemBlock .editor .editor-tabs {
+      position: absolute;
+      top: 10px;
+      right: 10px;
+      text-align: left;
+      direction: ltr; }
+      /* line 54, /openedx/edx-platform/xmodule/assets/editor/_edit.scss */
+      .xmodule_edit.xmodule_ProblemBlock .editor .editor-tabs li {
+        float: left;
+        margin-right: calc((var(--baseline)/4)); }
+        /* line 58, /openedx/edx-platform/xmodule/assets/editor/_edit.scss */
+        .xmodule_edit.xmodule_ProblemBlock .editor .editor-tabs li:last-child {
+          margin-right: 0; }
+      /* line 63, /openedx/edx-platform/xmodule/assets/editor/_edit.scss */
+      .xmodule_edit.xmodule_ProblemBlock .editor .editor-tabs .tab {
+        display: block;
+        height: 24px;
+        padding: 7px 20px 3px;
+        border: 1px solid #a5aaaf;
+        border-radius: 3px 3px 0 0;
+        background-color: var(--transparent);
+        background-image: -webkit-linear-gradient(top, var(--transparent) 87%, rgba(0, 0, 0, 0.06));
+        background-image: linear-gradient(to bottom,var(--transparent) 87%, rgba(0, 0, 0, 0.06));
+        background-color: #e5ecf3;
+        font-size: 13px;
+        color: #3c3c3c;
+        box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.05); }
+        /* line 77, /openedx/edx-platform/xmodule/assets/editor/_edit.scss */
+        .xmodule_edit.xmodule_ProblemBlock .editor .editor-tabs .tab.current {
+          background: var(--white);
+          border-bottom-color: var(--white); }
+  /* line 3, /openedx/edx-platform/xmodule/assets/problem/_edit.scss */
+  .xmodule_edit.xmodule_ProblemBlock .editor-bar .editor-tabs .advanced-toggle {
+    height: auto;
+    margin-top: -4px;
+    padding: 3px 9px;
+    font-size: 12px;
+    color: var(--link-color); }
+    /* line 10, /openedx/edx-platform/xmodule/assets/problem/_edit.scss */
+    .xmodule_edit.xmodule_ProblemBlock .editor-bar .editor-tabs .advanced-toggle.current {
+      border: 1px solid var(--lightGrey) !important;
+      border-radius: 3px !important;
+      background: var(--lightGrey) !important;
+      color: var(--darkGrey) !important;
+      pointer-events: none;
+      cursor: none; }
+      /* line 18, /openedx/edx-platform/xmodule/assets/problem/_edit.scss */
+      .xmodule_edit.xmodule_ProblemBlock .editor-bar .editor-tabs .advanced-toggle.current:hover, .xmodule_edit.xmodule_ProblemBlock .editor-bar .editor-tabs .advanced-toggle.current:focus {
+        box-shadow: 0 0 0 0 !important;
+        background-color: var(--white); }
+  /* line 29, /openedx/edx-platform/xmodule/assets/problem/_edit.scss */
+  .xmodule_edit.xmodule_ProblemBlock .simple-editor-cheatsheet {
+    position: absolute;
+    top: 41px;
+    left: 70%;
+    width: 0;
+    border-left: 1px solid var(--gray-l2);
+    background-color: var(--lightGrey);
+    overflow: hidden; }
+    /* line 39, /openedx/edx-platform/xmodule/assets/problem/_edit.scss */
+    .xmodule_edit.xmodule_ProblemBlock .simple-editor-cheatsheet.shown {
+      width: 30%;
+      height: 92%;
+      overflow-y: scroll; }
+    /* line 45, /openedx/edx-platform/xmodule/assets/problem/_edit.scss */
+    .xmodule_edit.xmodule_ProblemBlock .simple-editor-cheatsheet .cheatsheet-wrapper {
+      padding: 5%; }
+    /* line 49, /openedx/edx-platform/xmodule/assets/problem/_edit.scss */
+    .xmodule_edit.xmodule_ProblemBlock .simple-editor-cheatsheet h6 {
+      margin-top: 4px;
+      margin-bottom: 7px;
+      margin-left: 4px;
+      font-size: 15px;
+      font-weight: 700;
+      display: inline-block;
+      vertical-align: top; }
+    /* line 59, /openedx/edx-platform/xmodule/assets/problem/_edit.scss */
+    .xmodule_edit.xmodule_ProblemBlock .simple-editor-cheatsheet .row {
+      padding-bottom: 5px !important;
+      margin-bottom: 10px !important;
+      border-bottom: 1px solid #ddd !important; }
+      /* line 15, /openedx/edx-platform/common/static/sass/bourbon/addons/_clearfix.scss */
+      .xmodule_edit.xmodule_ProblemBlock .simple-editor-cheatsheet .row:after {
+        content: "";
+        display: table;
+        clear: both; }
+      /* line 66, /openedx/edx-platform/xmodule/assets/problem/_edit.scss */
+      .xmodule_edit.xmodule_ProblemBlock .simple-editor-cheatsheet .row:last-child {
+        border-bottom: none !important;
+        margin-bottom: 0 !important; }
+    /* line 72, /openedx/edx-platform/xmodule/assets/problem/_edit.scss */
+    .xmodule_edit.xmodule_ProblemBlock .simple-editor-cheatsheet .col {
+      display: block; }
+      /* line 75, /openedx/edx-platform/xmodule/assets/problem/_edit.scss */
+      .xmodule_edit.xmodule_ProblemBlock .simple-editor-cheatsheet .col.sample {
+        margin-right: 30px; }
+        /* line 78, /openedx/edx-platform/xmodule/assets/problem/_edit.scss */
+        .xmodule_edit.xmodule_ProblemBlock .simple-editor-cheatsheet .col.sample .icon {
+          height: calc((var(--baseline) * 1.5)); }
+    /* line 84, /openedx/edx-platform/xmodule/assets/problem/_edit.scss */
+    .xmodule_edit.xmodule_ProblemBlock .simple-editor-cheatsheet pre {
+      font-size: 12px;
+      line-height: 18px; }
+    /* line 89, /openedx/edx-platform/xmodule/assets/problem/_edit.scss */
+    .xmodule_edit.xmodule_ProblemBlock .simple-editor-cheatsheet code {
+      padding: 0;
+      background: none; }
+  /* line 97, /openedx/edx-platform/xmodule/assets/problem/_edit.scss */
+  .xmodule_edit.xmodule_ProblemBlock .problem-editor .markdown-box + .CodeMirror {
+    padding: 10px;
+    width: 69%; }
+  /* line 103, /openedx/edx-platform/xmodule/assets/problem/_edit.scss */
+  .xmodule_edit.xmodule_ProblemBlock .problem-editor-icon {
+    display: inline-block;
+    width: 26px;
+    height: 21px;
+    vertical-align: middle;
+    color: var(--body-color); }
diff --git a/xmodule/assets/ProblemBlockEditor.scss b/xmodule/assets/ProblemBlockEditor.scss
deleted file mode 100644
index 03d3cf1e2a98..000000000000
--- a/xmodule/assets/ProblemBlockEditor.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.xmodule_edit.xmodule_ProblemBlock {
-  @import "editor/edit.scss";
-  @import "problem/edit.scss";
-}
diff --git a/xmodule/assets/README.rst b/xmodule/assets/README.rst
index a697915db835..9738b1dac39f 100644
--- a/xmodule/assets/README.rst
+++ b/xmodule/assets/README.rst
@@ -24,27 +24,19 @@ However, we are proactively working towards a system where:
 * Each XBlock's assets are contained within their own folder as much as
   possible. See ``./vertical`` as an example.
 
-Themable Sass (.scss)
+Themable CSS (.css)
 *********************
 
-XBlock CSS for ``student_view``, ``author_view``, and ``public_view`` is compiled from the various ``./<ClassName>BlockDisplay.scss`` modules, such as `AnnotatableBlockDisplay.scss`_.
+The CSS for an XBlock's ``student_view``, ``author_view``, and ``public_view``
+is located in the ``xmodule/assets`` directory and follows the naming
+convention ``<ClassName>BlockDisplay.css``.
 
-XBlock CSS for ``studio_view`` is compiled from the various ``./<ClassName>BlockEditor.scss`` modules, such as `AnnotatableBlockEditor.scss`_.
+The CSS for an XBlock's ``studio_view`` is also located in the
+``xmodule/assets`` directory and follows the naming convention
+``<ClassName>BlockEditor.css``.
 
-Those Sass modules are mostly thin wrappers around the underscore-prefixed Sass
-modules within block-type-subdirectories, such as `annotatable/_display.css`. In the
-future, we may `simplify things`_ by collapsing the top-level Sass modules and
-just directly compiling the block-type-subdirectories' Sass.
-
-The CSS is compiled into the static folders of both LMS and CMS, as well as into
-the corresponding folders in any enabled themes, as part of the edx-platform build.
-It is collected into the static root, and then linked to from XBlock fragments by the
-``add_sass_to_fragment`` function in `builtin_assets.py`_.
-
-.. _AnnotatableBlockDisplay.scss: https://github.com/openedx/edx-platform/tree/master/xmodule/assets/AnnotatableBlockDisplay.scss
-.. _AnnotatableBlockEditor.scss: https://github.com/openedx/edx-platform/tree/master/xmodule/assets/AnnotatableBlockEditor.scss
-.. _annotatable/_display.scss: https://github.com/openedx/edx-platform/tree/master/xmodule/assets/annotatable/_display.scss
-.. _simplify things: https://github.com/openedx/edx-platform/issues/32621
+These css files can be linked to Xblock via ``add_css_url`` or ``add_css``
+methods in ``Fragment`` class from `fragment.py`_ module.
 
 
 JavaScript (.js)
@@ -80,7 +72,6 @@ As part of an `active build refactoring`_, we will soon consolidate all edx-plat
 .. _LibraryContentBlock: https://github.com/openedx/edx-platform/blob/master/xmodule/library_content_block.py
 .. _active build refactoring: https://github.com/openedx/edx-platform/issues/31624
 .. _builtin_assets.py: https://github.com/openedx/edx-platform/tree/master/xmodule/util/builtin_assets.py
-.. _static_content.py: https://github.com/openedx/edx-platform/blob/master/xmodule/static_content.py
-.. _library_source_block/style.css: https://github.com/openedx/edx-platform/blob/master/xmodule/assets/library_source_block/style.css
+.. _fragment.py: https://github.com/openedx/web-fragments/blob/master/web_fragments/fragment.py
 .. _webpack.builtinblocks.config.js: https://github.com/openedx/edx-platform/blob/master/webpack.builtinblocks.config.js
 .. _webpack.common.config.js: https://github.com/openedx/edx-platform/blob/master/webpack.common.config.js
diff --git a/xmodule/assets/SequenceBlockDisplay.css b/xmodule/assets/SequenceBlockDisplay.css
new file mode 100644
index 000000000000..e9ba30d2f7db
--- /dev/null
+++ b/xmodule/assets/SequenceBlockDisplay.css
@@ -0,0 +1,284 @@
+@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700");
+/* line 1, /openedx/edx-platform/xmodule/assets/SequenceBlockDisplay.scss */
+.xmodule_display.xmodule_SequenceBlock {
+  /* stylelint-disable-line */
+  /* stylelint-disable-line */ }
+  /* line 17, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */
+  .xmodule_display.xmodule_SequenceBlock .block-link {
+    border-left: 1px solid var(--border-color);
+    display: block; }
+    /* line 22, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */
+    .xmodule_display.xmodule_SequenceBlock .block-link:hover, .xmodule_display.xmodule_SequenceBlock .block-link:focus {
+      background: none; }
+  /* line 28, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */
+  .xmodule_display.xmodule_SequenceBlock .topbar, .xmodule_display.xmodule_SequenceBlock .sequence-nav {
+    border-bottom: 1px solid var(--border-color); }
+    /* line 15, /openedx/edx-platform/common/static/sass/bourbon/addons/_clearfix.scss */
+    .xmodule_display.xmodule_SequenceBlock .topbar:after, .xmodule_display.xmodule_SequenceBlock .sequence-nav:after {
+      content: "";
+      display: table;
+      clear: both; }
+    @media print {
+      /* line 28, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */
+      .xmodule_display.xmodule_SequenceBlock .topbar, .xmodule_display.xmodule_SequenceBlock .sequence-nav {
+        display: none; } }
+    /* line 38, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */
+    .xmodule_display.xmodule_SequenceBlock .topbar a.block-link, .xmodule_display.xmodule_SequenceBlock .sequence-nav a.block-link {
+      border-left: 1px solid var(--border-color);
+      display: block; }
+      /* line 43, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */
+      .xmodule_display.xmodule_SequenceBlock .topbar a.block-link:hover, .xmodule_display.xmodule_SequenceBlock .sequence-nav a.block-link:hover, .xmodule_display.xmodule_SequenceBlock .topbar a.block-link:focus, .xmodule_display.xmodule_SequenceBlock .sequence-nav a.block-link:focus {
+        background: none; }
+  /* line 51, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */
+  .xmodule_display.xmodule_SequenceBlock .sequence-nav ol li button {
+    background-color: transparent;
+    background-image: none;
+    background-position: center 14px;
+    background-repeat: no-repeat;
+    border: none;
+    border-radius: 0;
+    background-clip: border-box;
+    box-shadow: none;
+    box-sizing: content-box;
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: inherit; }
+  /* line 69, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */
+  .xmodule_display.xmodule_SequenceBlock .sequence-nav {
+    margin: 0 auto var(--baseline);
+    position: relative;
+    border-bottom: none;
+    z-index: 0;
+    height: 50px;
+    display: flex;
+    justify-content: center; }
+    @media print {
+      /* line 69, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */
+      .xmodule_display.xmodule_SequenceBlock .sequence-nav {
+        display: none; } }
+    /* line 84, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */
+    .xmodule_display.xmodule_SequenceBlock .sequence-nav .sequence-list-wrapper {
+      position: relative;
+      height: 100%;
+      flex-grow: 1; }
+      @media (max-width: 575.98px) {
+        /* line 84, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */
+        .xmodule_display.xmodule_SequenceBlock .sequence-nav .sequence-list-wrapper {
+          white-space: nowrap;
+          overflow-x: scroll; } }
+    /* line 97, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */
+    .xmodule_display.xmodule_SequenceBlock .sequence-nav ol {
+      display: flex; }
+      /* line 100, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */
+      .xmodule_display.xmodule_SequenceBlock .sequence-nav ol li {
+        box-sizing: border-box;
+        min-width: 40px;
+        flex-grow: 1;
+        border-color: var(--border-color);
+        border-width: 1px;
+        border-top-style: solid; }
+        /* line 108, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */
+        .xmodule_display.xmodule_SequenceBlock .sequence-nav ol li:not(:last-child) {
+          border-right-style: solid; }
+        /* line 112, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */
+        .xmodule_display.xmodule_SequenceBlock .sequence-nav ol li button {
+          width: 100%;
+          height: 49px;
+          position: relative;
+          margin: 0;
+          padding: 0;
+          display: block;
+          text-align: center;
+          border-color: var(--border-color);
+          border-width: 1px;
+          border-bottom-style: solid;
+          box-sizing: border-box;
+          overflow: visible; }
+          /* line 129, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */
+          .xmodule_display.xmodule_SequenceBlock .sequence-nav ol li button .icon {
+            display: inline-block;
+            line-height: 100%;
+            font-size: 110%;
+            color: #5a5a5a; }
+          /* line 136, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */
+          .xmodule_display.xmodule_SequenceBlock .sequence-nav ol li button .fa-bookmark {
+            color: var(--link-color); }
+          /* line 142, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */
+          .xmodule_display.xmodule_SequenceBlock .sequence-nav ol li button.seq_video .icon::before {
+            content: "\f008"; }
+          /* line 149, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */
+          .xmodule_display.xmodule_SequenceBlock .sequence-nav ol li button.seq_other .icon::before {
+            content: "\f02d"; }
+          /* line 156, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */
+          .xmodule_display.xmodule_SequenceBlock .sequence-nav ol li button.seq_vertical .icon::before {
+            content: "\f00b"; }
+          /* line 163, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */
+          .xmodule_display.xmodule_SequenceBlock .sequence-nav ol li button.seq_problem .icon::before {
+            content: "\f044"; }
+          /* line 168, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */
+          .xmodule_display.xmodule_SequenceBlock .sequence-nav ol li button .sequence-tooltip {
+            text-align: left;
+            margin-top: 12px;
+            background: #333333;
+            color: var(--white);
+            font-family: var(--font-family-sans-serif);
+            line-height: lh();
+            right: 0;
+            padding: 6px;
+            position: absolute;
+            top: 48px;
+            text-shadow: 0 -1px 0 var(--black);
+            white-space: pre;
+            pointer-events: none; }
+            /* line 186, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */
+            .xmodule_display.xmodule_SequenceBlock .sequence-nav ol li button .sequence-tooltip:empty {
+              background: none; }
+              /* line 189, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */
+              .xmodule_display.xmodule_SequenceBlock .sequence-nav ol li button .sequence-tooltip:empty::after {
+                display: none; }
+            /* line 194, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */
+            .xmodule_display.xmodule_SequenceBlock .sequence-nav ol li button .sequence-tooltip::after {
+              transform: rotate(45deg);
+              right: 18px;
+              background: #333333;
+              content: " ";
+              display: block;
+              height: 10px;
+              right: 18px;
+              position: absolute;
+              top: -5px;
+              width: 10px; }
+    /* line 212, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */
+    body.touch-based-device .xmodule_display.xmodule_SequenceBlock .sequence-nav ol li button:hover p {
+      display: none; }
+  /* line 217, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */
+  .xmodule_display.xmodule_SequenceBlock .sequence-nav-button {
+    display: block;
+    top: 0;
+    min-width: 40px;
+    max-width: 40px;
+    height: 100%;
+    text-shadow: none;
+    background: none;
+    background-color: #fff;
+    border-color: var(--border-color);
+    box-shadow: none;
+    font-size: inherit;
+    font-weight: normal;
+    padding: 0;
+    white-space: nowrap;
+    overflow-x: hidden; }
+    @media (min-width: 768px) {
+      /* line 217, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */
+      .xmodule_display.xmodule_SequenceBlock .sequence-nav-button {
+        min-width: 120px;
+        max-width: 200px;
+        text-overflow: ellipsis; }
+        /* line 241, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */
+        .xmodule_display.xmodule_SequenceBlock .sequence-nav-button span:not(:last-child) {
+          padding-right: calc((var(--baseline) / 2)); } }
+    /* line 246, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */
+    .xmodule_display.xmodule_SequenceBlock .sequence-nav-button .sequence-nav-button-label {
+      display: none; }
+      @media (min-width: 768px) {
+        /* line 246, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */
+        .xmodule_display.xmodule_SequenceBlock .sequence-nav-button .sequence-nav-button-label {
+          display: inline; } }
+    /* line 254, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */
+    .xmodule_display.xmodule_SequenceBlock .sequence-nav-button.button-previous {
+      order: -999; }
+      @media (min-width: 768px) {
+        /* line 254, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */
+        .xmodule_display.xmodule_SequenceBlock .sequence-nav-button.button-previous {
+          left: 0;
+          -webkit-border-top-left-radius: 3px;
+          -moz-border-topleft-radius: 3px;
+          border-top-left-radius: 3px;
+          -webkit-border-top-right-radius: 0;
+          -moz-border-topright-radius: 0;
+          border-top-right-radius: 0;
+          -webkit-border-bottom-right-radius: 0;
+          -moz-border-bottomright-radius: 0;
+          border-bottom-right-radius: 0;
+          -webkit-border-bottom-left-radius: 3px;
+          -moz-border-bottomleft-radius: 3px;
+          border-bottom-left-radius: 3px; } }
+    /* line 266, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */
+    .xmodule_display.xmodule_SequenceBlock .sequence-nav-button.button-next {
+      order: 999; }
+      @media (min-width: 768px) {
+        /* line 266, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */
+        .xmodule_display.xmodule_SequenceBlock .sequence-nav-button.button-next {
+          right: 0;
+          -webkit-border-top-left-radius: 0;
+          -moz-border-topleft-radius: 0;
+          border-top-left-radius: 0;
+          -webkit-border-top-right-radius: 3px;
+          -moz-border-topright-radius: 3px;
+          border-top-right-radius: 3px;
+          -webkit-border-bottom-right-radius: 3px;
+          -moz-border-bottomright-radius: 3px;
+          border-bottom-right-radius: 3px;
+          -webkit-border-bottom-left-radius: 0;
+          -moz-border-bottomleft-radius: 0;
+          border-bottom-left-radius: 0; } }
+    /* line 278, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */
+    .xmodule_display.xmodule_SequenceBlock .sequence-nav-button.disabled {
+      cursor: normal; }
+  /* line 283, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */
+  .xmodule_display.xmodule_SequenceBlock .seq_contents {
+    display: none; }
+  /* line 287, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */
+  .xmodule_display.xmodule_SequenceBlock .sequence-bottom {
+    position: relative;
+    height: 45px;
+    margin: lh(2) auto;
+    display: flex;
+    justify-content: center; }
+    /* line 294, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */
+    .xmodule_display.xmodule_SequenceBlock .sequence-bottom .sequence-nav-button {
+      position: relative;
+      min-width: 120px;
+      max-width: 200px;
+      text-overflow: ellipsis; }
+      /* line 300, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */
+      .xmodule_display.xmodule_SequenceBlock .sequence-bottom .sequence-nav-button:last-of-type {
+        border-left: none; }
+    @media print {
+      /* line 287, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */
+      .xmodule_display.xmodule_SequenceBlock .sequence-bottom {
+        display: none; } }
+  /* line 311, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */
+  .xmodule_display.xmodule_SequenceBlock #seq_content:focus, .xmodule_display.xmodule_SequenceBlock #seq_content:active {
+    outline: none; }
+  /* line 320, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */
+  .xmodule_display.xmodule_SequenceBlock .sequence-nav-button.focused, .xmodule_display.xmodule_SequenceBlock .sequence-nav-button:hover, .xmodule_display.xmodule_SequenceBlock .sequence-nav-button:active, .xmodule_display.xmodule_SequenceBlock .sequence-nav-button.active,
+  .xmodule_display.xmodule_SequenceBlock .sequence-nav button.focused,
+  .xmodule_display.xmodule_SequenceBlock .sequence-nav button:hover,
+  .xmodule_display.xmodule_SequenceBlock .sequence-nav button:active,
+  .xmodule_display.xmodule_SequenceBlock .sequence-nav button.active {
+    padding-top: 2px;
+    background-color: #0075b4; }
+    /* line 327, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */
+    .xmodule_display.xmodule_SequenceBlock .sequence-nav-button.focused .icon, .xmodule_display.xmodule_SequenceBlock .sequence-nav-button:hover .icon, .xmodule_display.xmodule_SequenceBlock .sequence-nav-button:active .icon, .xmodule_display.xmodule_SequenceBlock .sequence-nav-button.active .icon,
+    .xmodule_display.xmodule_SequenceBlock .sequence-nav button.focused .icon,
+    .xmodule_display.xmodule_SequenceBlock .sequence-nav button:hover .icon,
+    .xmodule_display.xmodule_SequenceBlock .sequence-nav button:active .icon,
+    .xmodule_display.xmodule_SequenceBlock .sequence-nav button.active .icon {
+      color: #fff; }
+    @media (min-width: 576px) {
+      /* line 320, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */
+      .xmodule_display.xmodule_SequenceBlock .sequence-nav-button.focused, .xmodule_display.xmodule_SequenceBlock .sequence-nav-button:hover, .xmodule_display.xmodule_SequenceBlock .sequence-nav-button:active, .xmodule_display.xmodule_SequenceBlock .sequence-nav-button.active,
+      .xmodule_display.xmodule_SequenceBlock .sequence-nav button.focused,
+      .xmodule_display.xmodule_SequenceBlock .sequence-nav button:hover,
+      .xmodule_display.xmodule_SequenceBlock .sequence-nav button:active,
+      .xmodule_display.xmodule_SequenceBlock .sequence-nav button.active {
+        border-bottom: 3px solid var(--link-color);
+        background-color: #fff; }
+        /* line 335, /openedx/edx-platform/xmodule/assets/sequence/_display.scss */
+        .xmodule_display.xmodule_SequenceBlock .sequence-nav-button.focused .icon, .xmodule_display.xmodule_SequenceBlock .sequence-nav-button:hover .icon, .xmodule_display.xmodule_SequenceBlock .sequence-nav-button:active .icon, .xmodule_display.xmodule_SequenceBlock .sequence-nav-button.active .icon,
+        .xmodule_display.xmodule_SequenceBlock .sequence-nav button.focused .icon,
+        .xmodule_display.xmodule_SequenceBlock .sequence-nav button:hover .icon,
+        .xmodule_display.xmodule_SequenceBlock .sequence-nav button:active .icon,
+        .xmodule_display.xmodule_SequenceBlock .sequence-nav button.active .icon {
+          color: #0a0a0a; } }
diff --git a/xmodule/assets/SequenceBlockDisplay.scss b/xmodule/assets/SequenceBlockDisplay.scss
deleted file mode 100644
index 0c5aa3c82c49..000000000000
--- a/xmodule/assets/SequenceBlockDisplay.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.xmodule_display.xmodule_SequenceBlock {
-  @import "sequence/display.scss";
-}
diff --git a/xmodule/assets/VideoBlockDisplay.css b/xmodule/assets/VideoBlockDisplay.css
new file mode 100644
index 000000000000..c5fe0df9c4f7
--- /dev/null
+++ b/xmodule/assets/VideoBlockDisplay.css
@@ -0,0 +1,962 @@
+@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700");
+/* line 1, /openedx/edx-platform/xmodule/assets/VideoBlockDisplay.scss */
+.xmodule_display.xmodule_VideoBlock {
+  /* stylelint-disable-line */
+  /* stylelint-disable-line */
+  /* stylelint-disable-line */
+  /* stylelint-disable-line */
+  /* stylelint-disable-line */
+  /* stylelint-disable-line */ }
+  /* line 25, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+  .xmodule_display.xmodule_VideoBlock {
+    margin-bottom: calc((var(--baseline)*1.5)); }
+  /* line 29, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+  .xmodule_display.xmodule_VideoBlock .is-hidden, .xmodule_display.xmodule_VideoBlock .video.closed .subtitles {
+    display: none; }
+  /* line 33, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+  .xmodule_display.xmodule_VideoBlock .video {
+    background: whitesmoke;
+    display: block;
+    margin: 0 -12px;
+    padding: 12px;
+    border-radius: 5px;
+    outline: none; }
+    /* line 15, /openedx/edx-platform/common/static/sass/bourbon/addons/_clearfix.scss */
+    .xmodule_display.xmodule_VideoBlock .video:after {
+      content: "";
+      display: table;
+      clear: both; }
+    /* line 43, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+    .xmodule_display.xmodule_VideoBlock .video:focus, .xmodule_display.xmodule_VideoBlock .video:active, .xmodule_display.xmodule_VideoBlock .video:hover {
+      border: 0; }
+    /* line 51, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+    .xmodule_display.xmodule_VideoBlock .video.is-initialized .video-wrapper .spinner {
+      display: none; }
+    /* line 59, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+    .xmodule_display.xmodule_VideoBlock .video.is-pre-roll .slider {
+      visibility: hidden; }
+    /* line 63, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+    .xmodule_display.xmodule_VideoBlock .video.is-pre-roll .video-player {
+      position: relative; }
+      /* line 66, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+      .xmodule_display.xmodule_VideoBlock .video.is-pre-roll .video-player::before {
+        display: block;
+        content: "";
+        width: 100%;
+        padding-top: 55%; }
+    /* line 75, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+    .xmodule_display.xmodule_VideoBlock .video .tc-wrapper {
+      position: relative; }
+      /* line 15, /openedx/edx-platform/common/static/sass/bourbon/addons/_clearfix.scss */
+      .xmodule_display.xmodule_VideoBlock .video .tc-wrapper:after {
+        content: "";
+        display: table;
+        clear: both; }
+    /* line 81, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+    .xmodule_display.xmodule_VideoBlock .video .focus_grabber {
+      position: relative;
+      display: inline;
+      width: 0;
+      height: 0; }
+    /* line 88, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+    .xmodule_display.xmodule_VideoBlock .video .downloads-heading {
+      margin: 1em 0 0; }
+    /* line 92, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+    .xmodule_display.xmodule_VideoBlock .video .wrapper-video-bottom-section {
+      display: flex;
+      justify-content: space-between; }
+      /* line 96, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+      .xmodule_display.xmodule_VideoBlock .video .wrapper-video-bottom-section .wrapper-download-video,
+      .xmodule_display.xmodule_VideoBlock .video .wrapper-video-bottom-section .wrapper-download-transcripts,
+      .xmodule_display.xmodule_VideoBlock .video .wrapper-video-bottom-section .wrapper-handouts,
+      .xmodule_display.xmodule_VideoBlock .video .wrapper-video-bottom-section .branding,
+      .xmodule_display.xmodule_VideoBlock .video .wrapper-video-bottom-section .wrapper-transcript-feedback {
+        flex: 1;
+        margin-top: var(--baseline);
+        padding-right: var(--baseline);
+        vertical-align: top; }
+    @media (min-width: 768px) {
+      /* line 110, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+      .xmodule_display.xmodule_VideoBlock .video .wrapper-downloads {
+        display: flex; } }
+    /* line 115, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+    .xmodule_display.xmodule_VideoBlock .video .wrapper-downloads .hd {
+      margin: 0; }
+    /* line 120, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+    .xmodule_display.xmodule_VideoBlock .video .wrapper-downloads .wrapper-download-video .video-sources {
+      margin: 0; }
+    /* line 126, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+    .xmodule_display.xmodule_VideoBlock .video .wrapper-downloads .wrapper-download-transcripts .list-download-transcripts {
+      margin: 0;
+      padding: 0;
+      list-style: none; }
+      /* line 131, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+      .xmodule_display.xmodule_VideoBlock .video .wrapper-downloads .wrapper-download-transcripts .list-download-transcripts .transcript-option {
+        margin: 0; }
+        /* line 134, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+        .xmodule_display.xmodule_VideoBlock .video .wrapper-downloads .wrapper-download-transcripts .list-download-transcripts .transcript-option a.btn, .xmodule_display.xmodule_VideoBlock .video .wrapper-downloads .wrapper-download-transcripts .list-download-transcripts .transcript-option a.btn-link {
+          font-size: 16px !important;
+          font-weight: unset; }
+    /* line 142, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+    .xmodule_display.xmodule_VideoBlock .video .wrapper-downloads .branding {
+      padding-right: 0; }
+      /* line 145, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+      .xmodule_display.xmodule_VideoBlock .video .wrapper-downloads .branding .host-tag {
+        position: absolute;
+        left: -9999em;
+        display: inline-block;
+        vertical-align: middle;
+        color: var(--body-color); }
+      /* line 153, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+      .xmodule_display.xmodule_VideoBlock .video .wrapper-downloads .branding .brand-logo {
+        display: inline-block;
+        max-width: 100%;
+        max-height: calc((var(--baseline)*2));
+        padding: calc((var(--baseline)/4)) 0;
+        vertical-align: middle; }
+    /* line 164, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+    .xmodule_display.xmodule_VideoBlock .video .wrapper-transcript-feedback {
+      display: none; }
+      /* line 167, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+      .xmodule_display.xmodule_VideoBlock .video .wrapper-transcript-feedback .transcript-feedback-buttons {
+        display: flex; }
+      /* line 170, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+      .xmodule_display.xmodule_VideoBlock .video .wrapper-transcript-feedback .transcript-feedback-btn-wrapper {
+        margin-right: 10px; }
+      /* line 173, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+      .xmodule_display.xmodule_VideoBlock .video .wrapper-transcript-feedback .thumbs-up-btn,
+      .xmodule_display.xmodule_VideoBlock .video .wrapper-transcript-feedback .thumbs-down-btn {
+        border: none;
+        box-shadow: none;
+        background: transparent; }
+    /* line 181, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+    .xmodule_display.xmodule_VideoBlock .video .google-disclaimer {
+      display: none;
+      margin-top: var(--baseline);
+      padding-right: var(--baseline);
+      vertical-align: top; }
+    /* line 188, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+    .xmodule_display.xmodule_VideoBlock .video .video-wrapper {
+      float: left;
+      margin-right: 2.27273%;
+      width: 65.90909%;
+      background-color: black;
+      position: relative; }
+      /* line 197, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+      .xmodule_display.xmodule_VideoBlock .video .video-wrapper:hover .btn-play {
+        color: #0075b4; }
+      /* line 201, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+      .xmodule_display.xmodule_VideoBlock .video .video-wrapper:hover .btn-play::after {
+        background: #fff; }
+      /* line 206, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+      .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player-pre,
+      .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player-post {
+        height: 50px;
+        background-color: #111010; }
+      /* line 212, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+      .xmodule_display.xmodule_VideoBlock .video .video-wrapper .spinner {
+        transform: translate(-50%, -50%);
+        position: absolute;
+        z-index: 1;
+        background: rgba(0, 0, 0, 0.7);
+        top: 50%;
+        left: 50%;
+        padding: 30px;
+        border-radius: 25%; }
+        /* line 223, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+        .xmodule_display.xmodule_VideoBlock .video .video-wrapper .spinner::after {
+          animation: rotateCW 3s infinite linear;
+          content: '';
+          display: block;
+          width: 30px;
+          height: 30px;
+          border: 7px solid white;
+          border-top-color: transparent;
+          border-radius: 100%;
+          position: relative; }
+      /* line 237, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+      .xmodule_display.xmodule_VideoBlock .video .video-wrapper .btn-play {
+        transform: translate(-50%, -50%);
+        position: absolute;
+        z-index: 1;
+        top: 46%;
+        left: 50%;
+        font-size: 4em;
+        cursor: pointer;
+        opacity: 0.1; }
+        /* line 248, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+        .xmodule_display.xmodule_VideoBlock .video .video-wrapper .btn-play::after {
+          background: var(--white);
+          position: absolute;
+          width: 50%;
+          height: 50%;
+          content: '';
+          left: 0;
+          top: 0;
+          bottom: 0;
+          right: 0;
+          margin: auto;
+          z-index: -1; }
+      /* line 263, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+      .xmodule_display.xmodule_VideoBlock .video .video-wrapper .closed-captions {
+        left: 5%;
+        position: absolute;
+        width: 90%;
+        box-sizing: border-box;
+        top: 70%;
+        text-align: center; }
+      /* line 273, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+      .xmodule_display.xmodule_VideoBlock .video .video-wrapper .closed-captions.is-visible {
+        max-height: calc((var(--baseline) * 3));
+        border-radius: calc((var(--baseline) / 5));
+        padding: 8px calc((var(--baseline) / 2)) 8px calc((var(--baseline) * 1.5));
+        background: rgba(0, 0, 0, 0.75);
+        color: var(--yellow); }
+        /* line 280, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+        .xmodule_display.xmodule_VideoBlock .video .video-wrapper .closed-captions.is-visible::before {
+          position: absolute;
+          display: inline-block;
+          top: 50%;
+          left: var(--baseline);
+          margin-top: -0.6em;
+          font-family: 'FontAwesome';
+          content: "\f142";
+          color: var(--white);
+          opacity: 0.5; }
+        /* line 294, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+        .xmodule_display.xmodule_VideoBlock .video .video-wrapper .closed-captions.is-visible:hover, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .closed-captions.is-visible.is-dragging {
+          background: black;
+          cursor: move; }
+          /* line 299, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+          .xmodule_display.xmodule_VideoBlock .video .video-wrapper .closed-captions.is-visible:hover::before, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .closed-captions.is-visible.is-dragging::before {
+            opacity: 1; }
+      /* line 305, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+      .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player {
+        overflow: hidden;
+        min-height: 158px; }
+        /* line 309, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+        .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player > div {
+          height: 100%; }
+          /* line 312, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+          .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player > div.hidden {
+            display: none; }
+        /* line 317, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+        .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player .video-error,
+        .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player .video-hls-error {
+          padding: calc((var(--baseline) / 5));
+          background: black;
+          color: white !important; }
+        /* line 324, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+        .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player object,
+        .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player iframe,
+        .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player video {
+          left: 0;
+          display: block;
+          border: none;
+          width: 100%; }
+        /* line 334, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+        .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player h4 {
+          text-align: center;
+          color: white; }
+          /* line 338, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+          .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-player h4.hidden {
+            display: none; }
+      /* line 344, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+      .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls {
+        position: relative;
+        border: 0;
+        background: #282c2e;
+        color: #f0f3f5; }
+        /* line 15, /openedx/edx-platform/common/static/sass/bourbon/addons/_clearfix.scss */
+        .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls:after {
+          content: "";
+          display: table;
+          clear: both; }
+        /* line 354, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+        .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls:hover ul,
+        .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls:hover div, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls:focus ul,
+        .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls:focus div {
+          opacity: 1; }
+        /* line 360, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+        .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .control {
+          display: inline-block;
+          vertical-align: middle;
+          margin: 0;
+          border: 0;
+          border-radius: 0;
+          padding: calc((var(--baseline) / 2)) calc((var(--baseline) / 1.5));
+          background: #282c2e;
+          box-shadow: none;
+          text-shadow: none;
+          color: #cfd8dc; }
+          /* line 375, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+          .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .control:hover, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .control:focus {
+            background: #171a1b; }
+          /* line 380, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+          .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .control:active, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .is-active.control, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .active.control {
+            color: #0ea6ec; }
+        /* line 390, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+        .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .control .icon {
+          width: 1em; }
+          /* line 393, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+          .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .control .icon.icon-hd {
+            width: auto; }
+        /* line 401, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+        .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .slider {
+          transform-origin: bottom left;
+          transition: height 0.7s ease-in-out 0s;
+          box-sizing: border-box;
+          position: absolute;
+          bottom: 100%;
+          left: 0;
+          right: 0;
+          z-index: 1;
+          height: calc((var(--baseline) / 4));
+          margin-left: 0;
+          border: 1px solid #4f595d;
+          border-radius: 0;
+          background: #4f595d; }
+          /* line 15, /openedx/edx-platform/common/static/sass/bourbon/addons/_clearfix.scss */
+          .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .slider:after {
+            content: "";
+            display: table;
+            clear: both; }
+          /* line 418, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+          .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .slider .ui-widget-header {
+            background: #8e3e63;
+            border: 1px solid #8e3e63;
+            box-shadow: none;
+            top: -1px;
+            left: -1px; }
+          /* line 426, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+          .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .slider .ui-corner-all.slider-range {
+            opacity: 0.3;
+            background-color: #1e91d3; }
+          /* line 431, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+          .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .slider .ui-slider-handle {
+            transform-origin: bottom left;
+            transition: all 0.7s ease-in-out 0s;
+            box-sizing: border-box;
+            top: -1px;
+            height: calc((var(--baseline) / 4));
+            width: calc((var(--baseline) / 4));
+            margin-left: calc(-1 * (var(--baseline) / 8));
+            border: 1px solid #cb598d;
+            border-radius: calc((var(--baseline) / 5));
+            padding: 0;
+            background: #cb598d;
+            box-shadow: none; }
+            /* line 448, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+            .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .slider .ui-slider-handle:focus, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .slider .ui-slider-handle:hover {
+              background-color: #db8baf;
+              border-color: #db8baf; }
+        /* line 456, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+        .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .vcr {
+          float: left;
+          list-style: none;
+          border-right: 1px solid #282c2e;
+          padding: 0; }
+          @media (max-width: 1120px) {
+            /* line 456, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+            .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .vcr {
+              margin-right: lh(0.5);
+              font-size: 0.875em; } }
+          /* line 472, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+          .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .vcr .video_control:focus {
+            position: relative; }
+          /* line 476, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+          .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .vcr .video_control.skip {
+            white-space: nowrap; }
+          /* line 481, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+          .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .vcr .vidtime {
+            padding-left: lh(0.75);
+            display: inline-block;
+            color: #cfd8dc;
+            -webkit-font-smoothing: antialiased; }
+            @media (max-width: 1120px) {
+              /* line 481, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+              .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .vcr .vidtime {
+                padding-left: lh(0.5); } }
+        /* line 497, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+        .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls {
+          float: right;
+          border-left: 1px dotted #4f595d; }
+          /* line 501, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+          .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume,
+          .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .add-fullscreen,
+          .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .grouped-controls,
+          .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .auto-advance,
+          .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .quality-control {
+            border-left: 1px dotted #4f595d; }
+          /* line 515, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+          .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .speed-button:focus,
+          .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume > .control:focus,
+          .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .add-fullscreen:focus,
+          .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .auto-advance:focus,
+          .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .quality-control:focus,
+          .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .toggle-transcript:focus {
+            position: relative; }
+          /* line 520, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+          .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container {
+            position: relative; }
+            /* line 523, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+            .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu {
+              transition: none;
+              position: absolute;
+              display: none;
+              bottom: calc((var(--baseline) * 2));
+              right: 0;
+              width: 120px;
+              margin: 0;
+              border: none;
+              padding: 0;
+              box-shadow: none;
+              background-color: #282c2e;
+              list-style: none; }
+              /* line 542, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+              .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li {
+                color: #e7ecee; }
+                /* line 547, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+                .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li .speed-option,
+                .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li .control-lang {
+                  text-align: left;
+                  display: block;
+                  width: 100%;
+                  border: 0;
+                  border-radius: 0;
+                  padding: lh(0.5);
+                  background: #282c2e;
+                  box-shadow: none;
+                  color: #e7ecee;
+                  overflow: hidden;
+                  text-shadow: none;
+                  text-overflow: ellipsis;
+                  white-space: nowrap; }
+                  /* line 564, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+                  .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li .speed-option:hover, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li .speed-option:focus,
+                  .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li .control-lang:hover,
+                  .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li .control-lang:focus {
+                    background-color: #4f595d;
+                    color: #fcfcfc; }
+                /* line 572, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+                .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li.is-active .speed-option,
+                .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li.is-active .control-lang {
+                  border-left: var(--baseline)/10 solid #0ea6ec;
+                  font-weight: var(--font-bold);
+                  color: #0ea6ec; }
+            /* line 584, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+            .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container.is-opened .menu {
+              display: block; }
+          /* line 590, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+          .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .speeds,
+          .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .lang,
+          .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .grouped-controls {
+            display: inline-block; }
+          /* line 599, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+          .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .speeds.is-opened .control .icon {
+            transform: rotate(-90deg); }
+          /* line 612, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+          .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .speeds .speed-button .label {
+            padding: 0 calc((var(--baseline)/3)) 0 0;
+            font-family: var(--font-family-sans-serif);
+            color: #e7ecee; }
+            @media (max-width: 1120px) {
+              /* line 612, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+              .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .speeds .speed-button .label {
+                position: absolute;
+                clip: rect(1px, 1px, 1px, 1px); } }
+          /* line 624, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+          .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .speeds .speed-button .value {
+            padding: 0 lh(0.5) 0 0;
+            color: #e7ecee;
+            font-weight: bold; }
+            @media (max-width: 1120px) {
+              /* line 624, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+              .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .speeds .speed-button .value {
+                padding: 0 lh(0.5); } }
+          /* line 638, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+          .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .lang .language-menu {
+            width: var(--baseline);
+            padding: calc((var(--baseline) / 2)) 0; }
+          /* line 653, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+          .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .lang.is-opened .control .icon {
+            transform: rotate(90deg); }
+          /* line 666, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+          .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume {
+            display: inline-block;
+            position: relative; }
+            /* line 671, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+            .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume.is-opened .volume-slider-container {
+              display: block;
+              opacity: 1; }
+            /* line 677, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+            .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume:not(:first-child) > a {
+              border-left: none; }
+            /* line 681, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+            .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume .volume-slider-container {
+              transition: none;
+              display: none;
+              position: absolute;
+              bottom: calc((var(--baseline) * 2));
+              right: 0;
+              width: 41px;
+              height: 120px;
+              background-color: #282c2e; }
+              /* line 696, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+              .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume .volume-slider-container .volume-slider {
+                height: 100px;
+                width: calc((var(--baseline) / 4));
+                margin: 14px auto;
+                box-sizing: border-box;
+                border: 1px solid #4f595d;
+                background: #4f595d; }
+                /* line 704, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+                .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume .volume-slider-container .volume-slider .ui-slider-handle {
+                  transition: height var(--tmg-s2) ease-in-out 0s, width var(--tmg-s2) ease-in-out 0s;
+                  left: -5px;
+                  box-sizing: border-box;
+                  height: 13px;
+                  width: 13px;
+                  border: 1px solid #cb598d;
+                  border-radius: calc((var(--baseline) / 5));
+                  padding: 0;
+                  background: #cb598d;
+                  box-shadow: none; }
+                  /* line 719, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+                  .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume .volume-slider-container .volume-slider .ui-slider-handle:hover, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume .volume-slider-container .volume-slider .ui-slider-handle:focus {
+                    background: #db8baf;
+                    border-color: #db8baf; }
+                /* line 726, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+                .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume .volume-slider-container .volume-slider .ui-slider-range {
+                  background: #8e3e63;
+                  border: 1px solid #8e3e63;
+                  left: -1px;
+                  bottom: -1px; }
+          /* line 736, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+          .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .quality-control {
+            font-weight: 700;
+            letter-spacing: -1px; }
+            /* line 740, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+            .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .quality-control.active {
+              color: #0ea6ec; }
+            /* line 744, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+            .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .quality-control.is-hidden, .xmodule_display.xmodule_VideoBlock .video.closed .video-wrapper .video-controls .secondary-controls .quality-control.subtitles {
+              display: none !important; }
+          /* line 750, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+          .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .toggle-transcript.is-active {
+            color: #0ea6ec; }
+          /* line 756, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+          .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .lang > .hide-subtitles {
+            transition: none; }
+      /* line 765, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+      .xmodule_display.xmodule_VideoBlock .video .video-wrapper:hover .video-controls .slider {
+        height: calc((var(--baseline) / 1.5)); }
+        /* line 768, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+        .xmodule_display.xmodule_VideoBlock .video .video-wrapper:hover .video-controls .slider .ui-slider-handle {
+          height: calc((var(--baseline) / 1.5));
+          width: calc((var(--baseline) / 1.5)); }
+    /* line 778, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+    .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .closed-captions {
+      width: 65%; }
+    /* line 782, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+    .xmodule_display.xmodule_VideoBlock .video.video-fullscreen.closed .closed-captions {
+      width: 90%; }
+    /* line 787, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+    .xmodule_display.xmodule_VideoBlock .video .subtitles {
+      float: left;
+      overflow: auto;
+      max-height: 460px;
+      width: 31.81818%;
+      padding: 0;
+      font-size: 14px;
+      visibility: visible; }
+      /* line 797, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+      .xmodule_display.xmodule_VideoBlock .video .subtitles a {
+        color: #0074b5; }
+      /* line 801, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+      .xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu {
+        height: 100%;
+        margin: 0;
+        padding: 0 3px;
+        list-style: none; }
+        /* line 807, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+        .xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li {
+          margin-bottom: 8px;
+          border: 0;
+          padding: 0;
+          color: #0074b5;
+          line-height: lh(); }
+          /* line 816, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+          .xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li span {
+            display: block; }
+          /* line 820, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+          .xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li.current {
+            color: #333;
+            font-weight: 700; }
+          /* line 825, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+          .xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li.focused {
+            outline: #000 dotted thin;
+            outline-offset: -1px; }
+          /* line 830, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+          .xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li:hover, .xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li:focus {
+            text-decoration: underline; }
+          /* line 835, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+          .xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li:empty {
+            margin-bottom: 0; }
+          /* line 839, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+          .xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li.spacing:last-of-type {
+            position: relative; }
+            /* line 842, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+            .xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li.spacing:last-of-type .transcript-end {
+              position: absolute;
+              bottom: 0; }
+    /* line 852, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+    .xmodule_display.xmodule_VideoBlock .video.closed .video-wrapper {
+      width: 100%;
+      background-color: inherit; }
+    /* line 857, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+    .xmodule_display.xmodule_VideoBlock .video.closed .video-wrapper .video-controls.html5 {
+      bottom: 0;
+      left: 0;
+      right: 0;
+      position: absolute;
+      z-index: 1; }
+    /* line 865, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+    .xmodule_display.xmodule_VideoBlock .video.closed .video-wrapper .video-player-pre,
+    .xmodule_display.xmodule_VideoBlock .video.closed .video-wrapper .video-player-post {
+      height: 0; }
+    /* line 871, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+    .xmodule_display.xmodule_VideoBlock .video.closed .video-wrapper .video-player h3 {
+      color: black; }
+    /* line 880, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+    .xmodule_display.xmodule_VideoBlock .video.closed .subtitles.html5 {
+      background-color: rgba(243, 243, 243, 0.8);
+      height: 100%;
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      top: 0;
+      width: 275px;
+      padding: 0 var(--baseline);
+      display: none; }
+    /* line 895, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+    .xmodule_display.xmodule_VideoBlock .video.video-fullscreen {
+      background: rgba(0, 0, 0, 0.95);
+      border: 0;
+      bottom: 0;
+      height: 100%;
+      left: 0;
+      margin: 0;
+      padding: 0;
+      position: fixed;
+      top: 0;
+      width: 100%;
+      vertical-align: middle;
+      border-radius: 0; }
+      /* line 913, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+      .xmodule_display.xmodule_VideoBlock .video.video-fullscreen.closed .tc-wrapper .video-wrapper {
+        width: 100%; }
+      /* line 919, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+      .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .video-wrapper .video-player-pre,
+      .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .video-wrapper .video-player-post {
+        height: 0; }
+      /* line 924, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+      .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .video-wrapper {
+        position: static; }
+      /* line 929, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+      .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .video-wrapper .video-player h3 {
+        color: white; }
+      /* line 934, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+      .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .tc-wrapper {
+        width: 100%;
+        height: 100%;
+        position: static; }
+        /* line 15, /openedx/edx-platform/common/static/sass/bourbon/addons/_clearfix.scss */
+        .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .tc-wrapper:after {
+          content: "";
+          display: table;
+          clear: both; }
+        /* line 941, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+        .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .tc-wrapper .video-wrapper {
+          height: 100%;
+          width: 75%;
+          margin-right: 0;
+          vertical-align: middle; }
+          /* line 949, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+          .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .tc-wrapper .video-wrapper object,
+          .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .tc-wrapper .video-wrapper iframe,
+          .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .tc-wrapper .video-wrapper video {
+            position: absolute;
+            width: auto;
+            height: auto; }
+        /* line 958, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+        .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .tc-wrapper .video-controls {
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          width: 100%; }
+      /* line 968, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+      .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .subtitles {
+        height: 100%;
+        width: 25%;
+        padding: lh();
+        box-sizing: border-box;
+        transition: none;
+        background: var(--black);
+        visibility: visible; }
+        /* line 979, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+        .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .subtitles li {
+          color: #aaa; }
+          /* line 982, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+          .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .subtitles li.current {
+            color: var(--white); }
+    /* line 992, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+    .xmodule_display.xmodule_VideoBlock .video.is-touch .tc-wrapper .video-wrapper object,
+    .xmodule_display.xmodule_VideoBlock .video.is-touch .tc-wrapper .video-wrapper iframe,
+    .xmodule_display.xmodule_VideoBlock .video.is-touch .tc-wrapper .video-wrapper video {
+      width: 100%;
+      height: 100%; }
+    /* line 1002, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+    .xmodule_display.xmodule_VideoBlock .video .video-pre-roll {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-position: 50% 50%;
+      background-repeat: no-repeat;
+      background-size: 100%;
+      background-color: var(--black); }
+      /* line 1015, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+      .xmodule_display.xmodule_VideoBlock .video .video-pre-roll.is-html5 {
+        background-size: 15%; }
+      /* line 1019, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+      .xmodule_display.xmodule_VideoBlock .video .video-pre-roll .btn-play.btn-pre-roll {
+        padding: var(--baseline);
+        border: none;
+        border-radius: var(--baseline);
+        background: var(--black-t2);
+        box-shadow: none; }
+        /* line 1026, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+        .xmodule_display.xmodule_VideoBlock .video .video-pre-roll .btn-play.btn-pre-roll::after {
+          display: none; }
+        /* line 1032, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+        .xmodule_display.xmodule_VideoBlock .video .video-pre-roll .btn-play.btn-pre-roll img {
+          height: calc((var(--baseline) * 4));
+          width: calc((var(--baseline) * 4)); }
+        /* line 1037, /openedx/edx-platform/xmodule/assets/video/_display.scss */
+        .xmodule_display.xmodule_VideoBlock .video .video-pre-roll .btn-play.btn-pre-roll:hover, .xmodule_display.xmodule_VideoBlock .video .video-pre-roll .btn-play.btn-pre-roll:focus {
+          background: var(--blue); }
+  /* line 88, lms/static/sass/base/_mixins.scss */
+  .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .slider .ui-slider-handle, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu li, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume .volume-slider-container .volume-slider .ui-slider-handle, .xmodule_display.xmodule_VideoBlock .video .subtitles .subtitles-menu li, .xmodule_display.xmodule_VideoBlock .a11y-menu-container .a11y-menu-list li {
+    cursor: pointer; }
+  /* line 100, lms/static/sass/base/_mixins.scss */
+  .xmodule_display.xmodule_VideoBlock .video.closed .subtitles.html5 {
+    z-index: 0; }
+  /* line 101, lms/static/sass/base/_mixins.scss */
+  .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .menu-container .menu, .xmodule_display.xmodule_VideoBlock .video .video-wrapper .video-controls .secondary-controls .volume .volume-slider-container {
+    z-index: 10; }
+  /* line 103, lms/static/sass/base/_mixins.scss */
+  .xmodule_display.xmodule_VideoBlock .video .video-pre-roll, .xmodule_display.xmodule_VideoBlock .a11y-menu-container .a11y-menu-list {
+    z-index: 1000; }
+  /* line 104, lms/static/sass/base/_mixins.scss */
+  .xmodule_display.xmodule_VideoBlock .video.video-fullscreen, .xmodule_display.xmodule_VideoBlock .video.video-fullscreen .tc-wrapper .video-controls, .xmodule_display.xmodule_VideoBlock .overlay {
+    z-index: 10000; }
+  /* line 105, lms/static/sass/base/_mixins.scss */
+  .xmodule_display.xmodule_VideoBlock .contextmenu,
+  .xmodule_display.xmodule_VideoBlock .submenu {
+    z-index: 100000; }
+  /* line 11, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */
+  .xmodule_display.xmodule_VideoBlock .video-tracks .a11y-menu-container > a::after {
+    font-family: FontAwesome;
+    -webkit-font-smoothing: antialiased;
+    display: inline-block;
+    speak: none; }
+  /* line 18, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */
+  .xmodule_display.xmodule_VideoBlock .a11y-menu-container {
+    position: relative; }
+    /* line 22, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */
+    .xmodule_display.xmodule_VideoBlock .a11y-menu-container.open .a11y-menu-list {
+      display: block; }
+    /* line 27, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */
+    .xmodule_display.xmodule_VideoBlock .a11y-menu-container .a11y-menu-list {
+      top: 100%;
+      margin: 0;
+      padding: 0;
+      display: none;
+      position: absolute;
+      list-style: none;
+      background-color: var(--white);
+      border: 1px solid #eee; }
+      /* line 39, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */
+      .xmodule_display.xmodule_VideoBlock .a11y-menu-container .a11y-menu-list li {
+        margin: 0;
+        padding: 0;
+        border-bottom: 1px solid #eee;
+        color: var(--white); }
+        /* line 47, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */
+        .xmodule_display.xmodule_VideoBlock .a11y-menu-container .a11y-menu-list li a {
+          display: block;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          color: var(--gray-l2);
+          font-size: 14px;
+          line-height: 23px; }
+          /* line 56, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */
+          .xmodule_display.xmodule_VideoBlock .a11y-menu-container .a11y-menu-list li a:hover, .xmodule_display.xmodule_VideoBlock .a11y-menu-container .a11y-menu-list li a:focus {
+            color: var(--gray-d1); }
+        /* line 63, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */
+        .xmodule_display.xmodule_VideoBlock .a11y-menu-container .a11y-menu-list li.active a {
+          color: #009fe6; }
+        /* line 68, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */
+        .xmodule_display.xmodule_VideoBlock .a11y-menu-container .a11y-menu-list li:last-child {
+          box-shadow: none;
+          border-bottom: 0;
+          margin-top: 0; }
+  /* line 81, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */
+  .xmodule_display.xmodule_VideoBlock .video-tracks .a11y-menu-container {
+    display: inline-block;
+    vertical-align: top;
+    border-left: 1px solid #eee; }
+    /* line 87, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */
+    .xmodule_display.xmodule_VideoBlock .video-tracks .a11y-menu-container.open > a {
+      background-color: var(--action-primary-active-bg);
+      color: var(--very-light-text); }
+      /* line 91, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */
+      .xmodule_display.xmodule_VideoBlock .video-tracks .a11y-menu-container.open > a::after {
+        color: var(--very-light-text); }
+    /* line 97, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */
+    .xmodule_display.xmodule_VideoBlock .video-tracks .a11y-menu-container > a {
+      transition: all var(--tmg-f2) ease-in-out 0s;
+      font-size: 12px;
+      display: block;
+      border-radius: 0 3px 3px 0;
+      background-color: var(--very-light-text);
+      padding: calc((var(--baseline)*0.75)) calc((var(--baseline)*1.25)) calc((var(--baseline)*0.75)) calc((var(--baseline)*0.75));
+      color: var(--gray-l2);
+      min-width: 1.5em;
+      line-height: 14px;
+      text-align: center;
+      overflow: hidden;
+      text-overflow: ellipsis; }
+      /* line 112, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */
+      .xmodule_display.xmodule_VideoBlock .video-tracks .a11y-menu-container > a::after {
+        content: "\f0d7";
+        position: absolute;
+        right: calc((var(--baseline)*0.5));
+        top: 33%;
+        color: var(--lighter-base-font-color); }
+    /* line 123, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */
+    .xmodule_display.xmodule_VideoBlock .video-tracks .a11y-menu-container .a11y-menu-list {
+      right: 0; }
+      /* line 126, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */
+      .xmodule_display.xmodule_VideoBlock .video-tracks .a11y-menu-container .a11y-menu-list li {
+        font-size: 0.875em; }
+        /* line 129, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */
+        .xmodule_display.xmodule_VideoBlock .video-tracks .a11y-menu-container .a11y-menu-list li a {
+          border: 0;
+          display: block;
+          padding: 0.70788em;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap; }
+  /* line 143, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */
+  .xmodule_display.xmodule_VideoBlock .contextmenu,
+  .xmodule_display.xmodule_VideoBlock .submenu {
+    border: 1px solid #333;
+    background: var(--white);
+    color: #333;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    position: absolute;
+    top: 0;
+    display: none;
+    outline: none;
+    cursor: default;
+    white-space: nowrap; }
+    /* line 160, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */
+    .xmodule_display.xmodule_VideoBlock .contextmenu.is-opened,
+    .xmodule_display.xmodule_VideoBlock .submenu.is-opened {
+      display: block; }
+    /* line 164, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */
+    .xmodule_display.xmodule_VideoBlock .contextmenu .menu-item,
+    .xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item,
+    .xmodule_display.xmodule_VideoBlock .submenu .menu-item,
+    .xmodule_display.xmodule_VideoBlock .submenu .submenu-item {
+      border-top: 1px solid var(--gray-l3);
+      padding: calc((var(--baseline)/4)) calc((var(--baseline)/2));
+      outline: none; }
+      /* line 170, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */
+      .xmodule_display.xmodule_VideoBlock .contextmenu .menu-item > span,
+      .xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item > span,
+      .xmodule_display.xmodule_VideoBlock .submenu .menu-item > span,
+      .xmodule_display.xmodule_VideoBlock .submenu .submenu-item > span {
+        color: #333; }
+      /* line 174, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */
+      .xmodule_display.xmodule_VideoBlock .contextmenu .menu-item:first-child,
+      .xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item:first-child,
+      .xmodule_display.xmodule_VideoBlock .submenu .menu-item:first-child,
+      .xmodule_display.xmodule_VideoBlock .submenu .submenu-item:first-child {
+        border-top: none; }
+      /* line 178, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */
+      .xmodule_display.xmodule_VideoBlock .contextmenu .menu-item:focus,
+      .xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item:focus,
+      .xmodule_display.xmodule_VideoBlock .submenu .menu-item:focus,
+      .xmodule_display.xmodule_VideoBlock .submenu .submenu-item:focus {
+        background: #333;
+        color: var(--white); }
+        /* line 182, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */
+        .xmodule_display.xmodule_VideoBlock .contextmenu .menu-item:focus > span,
+        .xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item:focus > span,
+        .xmodule_display.xmodule_VideoBlock .submenu .menu-item:focus > span,
+        .xmodule_display.xmodule_VideoBlock .submenu .submenu-item:focus > span {
+          color: var(--white); }
+    /* line 188, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */
+    .xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item,
+    .xmodule_display.xmodule_VideoBlock .submenu .submenu-item {
+      position: relative;
+      padding: calc((var(--baseline)/4)) var(--baseline) calc((var(--baseline)/4)) calc((var(--baseline)/2)); }
+      /* line 192, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */
+      .xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item::after,
+      .xmodule_display.xmodule_VideoBlock .submenu .submenu-item::after {
+        content: '\25B6';
+        position: absolute;
+        right: 5px;
+        line-height: 25px;
+        font-size: 10px; }
+      /* line 200, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */
+      .xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item .submenu,
+      .xmodule_display.xmodule_VideoBlock .submenu .submenu-item .submenu {
+        display: none; }
+      /* line 204, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */
+      .xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item.is-opened,
+      .xmodule_display.xmodule_VideoBlock .submenu .submenu-item.is-opened {
+        background: #333;
+        color: var(--white); }
+        /* line 208, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */
+        .xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item.is-opened > span,
+        .xmodule_display.xmodule_VideoBlock .submenu .submenu-item.is-opened > span {
+          color: var(--white); }
+        /* line 212, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */
+        .xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item.is-opened > .submenu,
+        .xmodule_display.xmodule_VideoBlock .submenu .submenu-item.is-opened > .submenu {
+          display: block; }
+      /* line 217, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */
+      .xmodule_display.xmodule_VideoBlock .contextmenu .submenu-item .is-selected,
+      .xmodule_display.xmodule_VideoBlock .submenu .submenu-item .is-selected {
+        font-weight: bold; }
+    /* line 222, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */
+    .xmodule_display.xmodule_VideoBlock .contextmenu .is-disabled,
+    .xmodule_display.xmodule_VideoBlock .submenu .is-disabled {
+      pointer-events: none;
+      color: var(--gray-l3); }
+  /* line 228, /openedx/edx-platform/xmodule/assets/video/_accessible_menu.scss */
+  .xmodule_display.xmodule_VideoBlock .overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: transparent; }
diff --git a/xmodule/assets/VideoBlockDisplay.scss b/xmodule/assets/VideoBlockDisplay.scss
deleted file mode 100644
index ccd9a3ed1326..000000000000
--- a/xmodule/assets/VideoBlockDisplay.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.xmodule_display.xmodule_VideoBlock {
-  @import "video/display.scss";
-  @import "video/accessible_menu.scss";
-}
diff --git a/xmodule/assets/VideoBlockEditor.css b/xmodule/assets/VideoBlockEditor.css
new file mode 100644
index 000000000000..3577fdb22d32
--- /dev/null
+++ b/xmodule/assets/VideoBlockEditor.css
@@ -0,0 +1,139 @@
+@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700");
+/* line 1, /openedx/edx-platform/xmodule/assets/VideoBlockEditor.scss */
+.xmodule_edit.xmodule_VideoBlock { }
+  /* line 123, common/static/sass/_mixins.scss */
+  .xmodule_edit.xmodule_VideoBlock .ui-col-wide {
+    width: 74.46809%;
+    margin-right: 2.12766%;
+    float: left; }
+  /* line 130, common/static/sass/_mixins.scss */
+  .xmodule_edit.xmodule_VideoBlock .ui-col-narrow {
+    width: 23.40426%;
+    float: left; }
+  /* line 342, common/static/sass/_mixins.scss */
+  .xmodule_edit.xmodule_VideoBlock .ui-loading {
+    box-shadow: inset 0 1px 2px 1px rgba(0, 0, 0, 0.2);
+    padding: 15px 20px; }
+  /* line 368, common/static/sass/_mixins.scss */
+  .xmodule_edit.xmodule_VideoBlock .ui-loading {
+    animation: fadeIn 0.25s linear 1;
+    opacity: 0.6;
+    background-color: #fff;
+    padding: 30px 20px;
+    text-align: center; }
+    /* line 379, common/static/sass/_mixins.scss */
+    .xmodule_edit.xmodule_VideoBlock .ui-loading .spin {
+      display: inline-block; }
+    /* line 385, common/static/sass/_mixins.scss */
+    .xmodule_edit.xmodule_VideoBlock .ui-loading .copy {
+      padding-left: 5px; }
+  /* line 390, common/static/sass/_mixins.scss */
+  .xmodule_edit.xmodule_VideoBlock .is-hidden {
+    display: none; }
+  /* line 10, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */
+  .xmodule_edit.xmodule_VideoBlock .tabs-wrapper {
+    padding-top: 0;
+    position: relative; }
+    /* line 14, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */
+    .xmodule_edit.xmodule_VideoBlock .tabs-wrapper .wrapper-comp-settings {
+      display: block; }
+  /* line 20, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */
+  .xmodule_edit.xmodule_VideoBlock .editor-single-tab-name {
+    display: none; }
+  /* line 25, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */
+  .xmodule_edit.xmodule_VideoBlock .editor-with-tabs {
+    position: relative; }
+    /* line 15, /openedx/edx-platform/common/static/sass/bourbon/addons/_clearfix.scss */
+    .xmodule_edit.xmodule_VideoBlock .editor-with-tabs:after {
+      content: "";
+      display: table;
+      clear: both; }
+    /* line 31, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */
+    .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .edit-header {
+      box-sizing: border-box;
+      padding: 18px var(--baseline);
+      top: 0 !important;
+      right: 0;
+      background-color: var(--blue);
+      border-bottom: 1px solid var(--blue-d2);
+      color: var(--white); }
+      /* line 42, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */
+      .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .edit-header .component-name {
+        position: relative;
+        top: 0;
+        left: 0;
+        width: 50%;
+        color: var(--white);
+        font-weight: 600; }
+        /* line 52, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */
+        .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .edit-header .component-name em {
+          display: inline-block;
+          margin-right: calc((var(--baseline)/4));
+          font-weight: 400;
+          color: var(--white); }
+      /* line 61, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */
+      .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .edit-header .editor-tabs {
+        list-style: none;
+        right: 0;
+        top: calc((var(--baseline)/4));
+        position: absolute;
+        padding: 12px calc((var(--baseline)*0.75)); }
+        /* line 68, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */
+        .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .edit-header .editor-tabs .inner_tab_wrap {
+          display: inline-block;
+          margin-left: 8px; }
+          /* line 72, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */
+          .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .edit-header .editor-tabs .inner_tab_wrap a.tab {
+            font-size: 14px;
+            font-size: 1.4rem;
+            background-color: rgba(255, 255, 255, 0.3);
+            background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
+            background-image: linear-gradient(to bottom,rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
+            border: 1px solid var(--blue-d1);
+            border-radius: 3px;
+            padding: calc((var(--baseline)/4)) var(--baseline);
+            background-color: var(--blue);
+            font-weight: bold;
+            color: var(--white); }
+            /* line 83, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */
+            .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .edit-header .editor-tabs .inner_tab_wrap a.tab.current {
+              background-color: var(--blue);
+              background-image: -webkit-linear-gradient(var(--blue), var(--blue));
+              background-image: linear-gradient(to ,var(--blue));
+              color: var(--blue-d1);
+              box-shadow: inset 0 1px 2px 1px var(--shadow-l1);
+              background-color: var(--blue-d4);
+              cursor: default; }
+            /* line 92, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */
+            .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .edit-header .editor-tabs .inner_tab_wrap a.tab:hover, .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .edit-header .editor-tabs .inner_tab_wrap a.tab:focus {
+              box-shadow: inset 0 1px 2px 1px var(--shadow);
+              background-image: linear-gradient(#009fe6, #009fe6) !important; }
+    /* line 102, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */
+    .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .is-inactive {
+      display: none; }
+    /* line 106, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */
+    .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .comp-subtitles-entry {
+      text-align: center; }
+      /* line 109, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */
+      .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .comp-subtitles-entry .file-upload {
+        display: none; }
+      /* line 114, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */
+      .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .comp-subtitles-entry .comp-subtitles-import-list > li {
+        display: block;
+        margin: calc(var(--baseline)/2) 0; }
+      /* line 119, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */
+      .xmodule_edit.xmodule_VideoBlock .editor-with-tabs .comp-subtitles-entry .comp-subtitles-import-list .blue-button {
+        font-size: 1em;
+        display: block;
+        width: 70%;
+        margin: 0 auto;
+        text-align: center; }
+  /* line 130, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */
+  .xmodule_edit.xmodule_VideoBlock .component-tab {
+    background: var(--white);
+    position: relative;
+    border-top: 1px solid #8891a1; }
+    /* line 135, /openedx/edx-platform/xmodule/assets/tabs/_tabs.scss */
+    .xmodule_edit.xmodule_VideoBlock .component-tab#advanced {
+      padding: 0;
+      border: none; }
diff --git a/xmodule/assets/VideoBlockEditor.scss b/xmodule/assets/VideoBlockEditor.scss
deleted file mode 100644
index eb966091ce46..000000000000
--- a/xmodule/assets/VideoBlockEditor.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.xmodule_edit.xmodule_VideoBlock {
-  @import "tabs/tabs.scss";
-}
diff --git a/xmodule/assets/WordCloudBlockDisplay.css b/xmodule/assets/WordCloudBlockDisplay.css
new file mode 100644
index 000000000000..29d0698968b4
--- /dev/null
+++ b/xmodule/assets/WordCloudBlockDisplay.css
@@ -0,0 +1,26 @@
+@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700");
+/* line 1, /openedx/edx-platform/xmodule/assets/WordCloudBlockDisplay.scss */
+.xmodule_display.xmodule_WordCloudBlock {
+  /* stylelint-disable-line */
+  /* stylelint-disable-line */ }
+  /* line 6, /openedx/edx-platform/xmodule/assets/word_cloud/_display.scss */
+  .xmodule_display.xmodule_WordCloudBlock .input-cloud {
+    margin: calc((var(--baseline)/4)); }
+  /* line 10, /openedx/edx-platform/xmodule/assets/word_cloud/_display.scss */
+  .xmodule_display.xmodule_WordCloudBlock .result_cloud_section {
+    display: none;
+    width: 0px;
+    height: 0px; }
+  /* line 16, /openedx/edx-platform/xmodule/assets/word_cloud/_display.scss */
+  .xmodule_display.xmodule_WordCloudBlock .result_cloud_section.active {
+    display: block;
+    width: 100%;
+    height: auto;
+    margin-top: 1em; }
+    /* line 22, /openedx/edx-platform/xmodule/assets/word_cloud/_display.scss */
+    .xmodule_display.xmodule_WordCloudBlock .result_cloud_section.active h3 {
+      font-size: 100%; }
+  /* line 27, /openedx/edx-platform/xmodule/assets/word_cloud/_display.scss */
+  .xmodule_display.xmodule_WordCloudBlock .your_words {
+    font-size: 0.85em;
+    display: block; }
diff --git a/xmodule/assets/WordCloudBlockDisplay.scss b/xmodule/assets/WordCloudBlockDisplay.scss
deleted file mode 100644
index 884112a4804c..000000000000
--- a/xmodule/assets/WordCloudBlockDisplay.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.xmodule_display.xmodule_WordCloudBlock {
-  @import "word_cloud/display.scss";
-}
diff --git a/xmodule/assets/annotatable/_display.scss b/xmodule/assets/annotatable/_display.scss
deleted file mode 100644
index 9aaa8649c6c5..000000000000
--- a/xmodule/assets/annotatable/_display.scss
+++ /dev/null
@@ -1,197 +0,0 @@
-/* TODO: move top-level variables to a common _variables.scss.
- * NOTE: These variables were only added here because when this was integrated with the CMS,
- * SASS compilation errors were triggered because the CMS didn't have the same variables defined
- * that the LMS did, so the quick fix was to localize the LMS variables not shared by the CMS.
- * -Abarrett and Vshnayder
- */
-@import 'bourbon/bourbon';
-@import 'lms/theme/variables';
-@import 'bootstrap/scss/variables';
-@import 'lms/theme/variables-v1';
-
-$annotatable--border-color: var(--gray-l3);
-$annotatable--body-font-size: em(14);
-
-.annotatable-wrapper {
-  position: relative;
-}
-
-.annotatable-header {
-  margin-bottom: 0.5em;
-}
-
-.annotatable-section {
-  position: relative;
-  padding: 0.5em 1em;
-  border: 1px solid $annotatable--border-color;
-  border-radius: 0.5em;
-  margin-bottom: 0.5em;
-
-  &.shaded { background-color: #ededed; }
-
-  .annotatable-section-title {
-    font-weight: bold;
-    a { font-weight: normal; }
-  }
-
-  .annotatable-section-body {
-    border-top: 1px solid $annotatable--border-color;
-    margin-top: 0.5em;
-    padding-top: 0.5em;
-
-    @include clearfix();
-  }
-
-  ul.instructions-template {
-    list-style: disc;
-    margin-left: 4em;
-    b { font-weight: bold; }
-    i { font-style: italic; }
-
-    code {
-      display: inline;
-      white-space: pre;
-      font-family: Courier New, monospace;
-    }
-  }
-}
-
-.annotatable-toggle {
-  position: absolute;
-  right: 0;
-  margin: 2px 1em 2px 0;
-  &.expanded::after { content: " \2191"; }
-  &.collapsed::after { content: " \2193"; }
-}
-
-.annotatable-span {
-  @extend %ui-fake-link;
-
-  display: inline;
-
-  $highlight_index: 0;
-
-  @each $highlight in (
-    (yellow rgba(255, 255,10, 0.3) rgba(255, 255,10, 0.9)),
-    (red rgba(178,19,16,0.3) rgba(178,19,16,0.9)),
-    (orange rgba(255,165,0, 0.3) rgba(255,165,0, 0.9)),
-    (green rgba(25,255,132,0.3) rgba(25,255,132,0.9)),
-    (blue rgba(35,163,255,0.3) rgba(35,163,255,0.9)),
-    (purple rgba(115,9,178,0.3) rgba(115,9,178,0.9))) {
-
-    $highlight_index: $highlight_index + 1;
-    $marker: nth($highlight, 1);
-    $color: nth($highlight, 2);
-    $selected_color: nth($highlight, 3);
-
-    @if $highlight_index == 1 {
-      &.highlight {
-        background-color: $color;
-        &.selected { background-color: $selected_color; }
-      }
-    }
-
-    &.highlight-#{$marker} {
-      background-color: $color;
-      &.selected { background-color: $selected_color; }
-    }
-  }
-
-  &.hide {
-    cursor: none;
-    background-color: inherit;
-
-    .annotatable-icon {
-      display: none;
-    }
-  }
-
-  .annotatable-comment {
-    display: none;
-  }
-}
-
-.ui-tooltip.qtip.ui-tooltip {
-  font-size: $annotatable--body-font-size;
-  border: 1px solid #333;
-  border-radius: 1em;
-  background-color: rgba(0, 0, 0, 0.85);
-  color: var(--white);
-  -webkit-font-smoothing: antialiased;
-
-  .ui-tooltip-titlebar {
-    font-size: em(16);
-    color: inherit;
-    background-color: transparent;
-    padding: calc((var(--baseline)/4)) calc((var(--baseline)/2));
-    border: none;
-
-    .ui-tooltip-title {
-      padding: calc((var(--baseline)/4)) 0;
-      border-bottom: 2px solid #333;
-      font-weight: bold;
-    }
-
-    .ui-tooltip-icon {
-      right: 10px;
-      background: #333;
-    }
-
-    .ui-state-hover {
-      color: inherit;
-      border: 1px solid var(--gray-l3);
-    }
-  }
-
-  .ui-tooltip-content {
-    color: inherit;
-    font-size: em(14);
-    text-align: left;
-    font-weight: 400;
-    padding: 0 calc((var(--baseline)/2)) calc((var(--baseline)/2)) calc((var(--baseline)/2));
-    background-color: transparent;
-    border-color: transparent;
-  }
-
-  p {
-    color: inherit;
-    line-height: normal;
-  }
-}
-
-.ui-tooltip.qtip.ui-tooltip-annotatable {
-  max-width: 375px;
-
-  .ui-tooltip-content {
-    padding: 0 calc((var(--baseline)/2));
-
-    .annotatable-comment {
-      display: block;
-      margin: 0 0 calc((var(--baseline)/2)) 0;
-      max-height: 225px;
-      overflow: auto;
-      line-height: normal;
-    }
-
-    .annotatable-reply {
-      display: block;
-      border-top: 2px solid #333;
-      padding: calc((var(--baseline)/4)) 0;
-      margin: 0;
-      text-align: center;
-    }
-  }
-
-  &::after {
-    content: '';
-    display: inline-block;
-    position: absolute;
-    bottom: -20px;
-    left: 50%;
-    height: 0;
-    width: 0;
-    margin-left: calc(-1 * (var(--baseline) / 4));
-    border: 10px solid transparent;
-    border-top-color: rgba(0, 0, 0, 0.85);
-  }
-}
diff --git a/xmodule/assets/capa/_display.scss b/xmodule/assets/capa/_display.scss
deleted file mode 100644
index 0aba39f89925..000000000000
--- a/xmodule/assets/capa/_display.scss
+++ /dev/null
@@ -1,1747 +0,0 @@
-// capa - styling
-// ====================
-
-// Table of Contents
-// * +Variables - Capa
-// * +Extends - Capa
-// * +Mixins - Status Icon - Capa
-// * +Resets - Deprecate Please
-// * +Problem - Base
-// * +Problem - Choice Group
-// * +Problem - Misc, Unclassified Mess
-// * +Problem - Text Input, Numerical Input
-// * +Problem - Option Input (Dropdown)
-// * +Problem - CodeMirror
-// * +Problem - Misc, Unclassified Mess Part 2
-// * +Problem - Rubric
-// * +Problem - Annotation
-// * +Problem - Choice Text Group
-// * +Problem - Image Input Overrides
-// * +Problem - Annotation Problem Overrides
-@import 'vendor/bi-app/bi-app-ltr';
-@import 'bourbon/bourbon';
-@import 'lms/theme/variables';
-@import 'bootstrap/scss/variables';
-@import 'lms/theme/variables-v1';
-
-// +Variables - Capa
-// ====================
-$annotation-yellow: rgba(255, 255, 10, 0.3);
-$color-copy-tip: rgb(100, 100, 100);
-
-// FontAwesome Icon code
-// ====================
-$checkmark-icon: '\f00c'; // .fa-check
-$cross-icon: '\f00d'; // .fa-close
-$asterisk-icon: '\f069'; // .fa-asterisk
-
-
-@import '../../../../../static/sass/edx-pattern-library-shims/base/variables';
-
-// +Extends - Capa
-// ====================
-// Duplicated from _mixins.scss due to xmodule compilation, inheritance issues
-%use-font-awesome {
-  font-family: FontAwesome;
-  -webkit-font-smoothing: antialiased;
-  display: inline-block;
-  speak: none;
-}
-
-// +Mixins - Status Icon - Capa
-// ====================
-@mixin status-icon($color: var(--gray), $fontAwesomeIcon: "\f00d") {
-  .status-icon {
-    &::after {
-      @extend %use-font-awesome;
-
-      color: $color;
-      font-size: 1.2em;
-      content: $fontAwesomeIcon;
-    }
-  }
-}
-
-// +Resets - Deprecate Please
-// ====================
-h2 {
-  margin-top: 0;
-  margin-bottom: calc((var(--baseline)*0.75));
-
-  &.problem-header {
-    display: inline-block;
-
-    section.staff {
-      margin-top: calc((var(--baseline)*1.5));
-      font-size: 80%;
-    }
-  }
-
-  @media print {
-    display: block;
-    width: auto;
-    border-right: 0;
-  }
-}
-
-.explanation-title {
-  font-weight: bold;
-}
-
-%feedback-hint {
-  margin-top: calc((var(--baseline) / 4));
-
-  .icon {
-    @include margin-right(calc((var(--baseline) / 4)));
-  }
-}
-
-.feedback-hint-incorrect {
-  @extend %feedback-hint;
-
-  .icon {
-    color: var(--incorrect);
-  }
-}
-
-.feedback-hint-partially-correct,
-.feedback-hint-correct {
-  @extend %feedback-hint;
-
-  .icon {
-    color: var(--correct);
-  }
-}
-
-.feedback-hint-text {
-  color: $color-copy-tip;
-}
-
-.problem-hint {
-  margin-bottom: 20px;
-  width: 100%;
-}
-
-.hint-label {
-  display: inline-block;
-  padding-right: 0.5em;
-}
-
-.hint-text {
-  display: inline-block;
-}
-
-.feedback-hint-multi .hint-text {
-  display: block;
-}
-
-iframe[seamless] {
-  overflow: hidden;
-  padding: 0;
-  border: 0 none transparent;
-  background-color: transparent;
-}
-
-.inline-error {
-  color: var(--error-color-dark);
-}
-
-div.problem-progress {
-  display: inline-block;
-  color: var(--gray-d1);
-  font-size: em(14);
-}
-
-// +Problem - Base
-// ====================
-div.problem {
-  padding-top: var(--baseline);
-
-  @media print {
-    display: block;
-    padding: 0;
-    width: auto;
-
-    canvas,
-    img {
-      page-break-inside: avoid;
-    }
-  }
-
-  input.math {
-    direction: ltr; // Equations are always English
-  }
-
-  .inline {
-    display: inline;
-
-    + p {
-      margin-top: var(--baseline);
-    }
-  }
-
-  .question-description {
-    color: var(--gray-d1);
-    font-size: var(--small-font-size);
-  }
-
-  form > label, .problem-group-label {
-    display: block;
-    margin-bottom: var(--baseline);
-    font: inherit;
-    color: inherit;
-    -webkit-font-smoothing: initial;
-  }
-
-  .problem-group-label + .question-description {
-    margin-top: calc(-1 * var(--baseline));
-  }
-
-}
-
-// CAPA gap spacing between problem parts
-// can not use the & + & since .problem is nested deeply in .xmodule_display.xmodule_CapaModule
-.wrapper-problem-response + .wrapper-problem-response,
-.wrapper-problem-response + p {
-  margin-top: calc((var(--baseline) * 1.5));
-}
-
-// Choice Group - silent class
-%choicegroup-base {
-  @include clearfix();
-
-  min-width: 100px;
-  width: auto !important;
-  width: 100px;
-
-  label {
-    box-sizing: border-box;
-
-    display: inline-block;
-    clear: both;
-    margin-bottom: calc((var(--baseline)/2));
-    border: 2px solid var(--gray-l4);
-    border-radius: 3px;
-    padding: calc((var(--baseline)/2));
-    width: 100%;
-
-    &::after {
-      @include margin-left(calc((var(--baseline)*0.75)));
-    }
-  }
-
-  .indicator-container {
-    min-height: 1px;
-    width: 25px;
-    display: inline-block;
-  }
-
-  fieldset {
-    box-sizing: border-box;
-  }
-
-  input[type="radio"],
-  input[type="checkbox"] {
-    @include margin(calc((var(--baseline)/4)));
-    @include margin-right(calc((var(--baseline)/2)));
-  }
-
-  input {
-    &:focus,
-    &:hover {
-      & + label {
-        border: 2px solid var(--blue);
-      }
-    }
-
-    &,
-    &:focus,
-    &:hover {
-      & + label.choicegroup_correct {
-        @include status-icon(var(--correct), $checkmark-icon);
-
-        border: 2px solid var(--correct);
-      }
-
-      & + label.choicegroup_partially-correct {
-        @include status-icon(var(--partially-correct), $asterisk-icon);
-
-        border: 2px solid var(--partially-correct);
-      }
-
-      & + label.choicegroup_incorrect {
-        @include status-icon(var(--incorrect), $cross-icon);
-
-        border: 2px solid var(--incorrect);
-      }
-
-      & + label.choicegroup_submitted {
-        border: 2px solid var(--submitted);
-      }
-    }
-  }
-}
-
-// +Problem - Choice Group
-// ====================
-div.problem {
-  .choicegroup {
-    @extend %choicegroup-base;
-
-    .field {
-      position: relative;
-    }
-
-    label {
-      @include padding(calc((var(--baseline)/2)));
-      @include padding-left(calc((var(--baseline)*2.3)));
-
-      position: relative;
-      font-size: var(--base-font-size);
-      line-height: normal;
-      cursor: pointer;
-    }
-
-    input[type="radio"],
-    input[type="checkbox"] {
-      @include left(em(9));
-
-      position: absolute;
-      top: 0.35em;
-      width: calc(var(--baseline)*1.1);
-      height: calc(var(--baseline)*1.1);
-      z-index: 1;
-    }
-
-    legend {
-      margin-bottom: var(--baseline);
-      max-width: 100%;
-      white-space: normal;
-    }
-
-    legend + .question-description {
-      margin-top: calc(-1 * var(--baseline));
-      max-width: 100%;
-      white-space: normal;
-    }
-  }
-}
-
-// +Problem - Status Indicators
-// ====================
-// Summary status indicators shown after the input area
-div.problem {
-  .indicator-container {
-    @include margin-left(calc((var(--baseline)*0.75)));
-
-    .status {
-      width: var(--baseline);
-
-      // CASE: correct answer
-      &.correct {
-        @include status-icon(var(--correct), $checkmark-icon);
-      }
-
-      // CASE: partially correct answer
-      &.partially-correct {
-        @include status-icon(var(--partially-correct), $asterisk-icon);
-      }
-
-      // CASE: incorrect answer
-      &.incorrect {
-        @include status-icon(var(--incorrect), $cross-icon);
-      }
-
-      &.submitted,
-      &.unsubmitted,
-      &.unanswered {
-        .status-icon {
-          content: '';
-        }
-      }
-    }
-  }
-}
-
-// +Problem - Misc, Unclassified Mess
-// ====================
-div.problem {
-  ol.enumerate {
-    li {
-      &::before {
-        display: block;
-        visibility: hidden;
-        height: 0;
-        content: " ";
-      }
-    }
-  }
-
-  .solution-span {
-    > span {
-      margin: var(--baseline) 0;
-      display: block;
-      position: relative;
-
-      &:empty {
-        display: none;
-      }
-    }
-  }
-
-  .targeted-feedback-span {
-    > span {
-      display: block;
-      position: relative;
-
-      &:empty {
-        display: none;
-      }
-    }
-  }
-
-  // known classes using this div: .indicator-container, moved to section above
-  div {
-
-    // TO-DO: Styling used by advanced capa problem types. Should be synced up to use .status class
-    p {
-      &.answer {
-        margin-top: -2px;
-      }
-
-      span.clarification i {
-        font-style: normal;
-
-        &:hover {
-          color: var(--blue);
-        }
-      }
-    }
-
-    &.correct, &.ui-icon-check {
-      input {
-        border-color: var(--correct);
-      }
-    }
-
-    &.partially-correct, &.ui-icon-check {
-      input {
-        border-color: var(--partially-correct);
-      }
-    }
-
-    &.processing {
-      input {
-        border-color: #aaa;
-      }
-    }
-
-    &.ui-icon-close {
-      input {
-        border-color: var(--incorrect);
-      }
-    }
-
-    &.incorrect, &.incomplete {
-      input {
-        border-color: var(--incorrect);
-      }
-    }
-
-    &.submitted, &.ui-icon-check {
-      input {
-        border-color: var(--submitted);
-      }
-    }
-
-    p.answer {
-      display: inline-block;
-      margin-top: calc((var(--baseline) / 2));
-      margin-bottom: 0;
-
-      &::before {
-        @extend %t-strong;
-
-        display: inline;
-        content: "Answer: ";
-
-      }
-
-      &:empty {
-        &::before {
-          display: none;
-        }
-      }
-    }
-
-    div.equation {
-      clear: both;
-      margin-top: 3px;
-
-      .MathJax_Display {
-        width: auto;
-      }
-
-      img.loading {
-        @include padding-left(calc((var(--baseline)/2)));
-
-        display: inline-block;
-      }
-
-      span {
-        margin-bottom: 0;
-        display: inline-block;
-
-        &.MathJax_CHTML, &.MathJax, &.MathJax_SVG {
-          padding: 6px;
-          min-width: 30px;
-          border: 1px solid #e3e3e3;
-          border-radius: 4px;
-          background: #f1f1f1;
-        }
-      }
-    }
-
-    // Hides equation previews in symbolic response problems when printing
-    [id^='display'].equation {
-      @media print {
-        display: none;
-      }
-    }
-
-    //TO-DO: review and deprecate all these styles within span {}
-    span {
-      &.ui-icon-bullet {
-        display: inline-block;
-        position: relative;
-        top: 4px;
-        width: 14px;
-        height: 14px;
-        background: var(--icon-unanswered) center center no-repeat;
-      }
-
-      &.processing, &.ui-icon-processing {
-        display: inline-block;
-        position: relative;
-        top: 6px;
-        width: 25px;
-        height: 20px;
-        background: var(--icon-spinner) center center no-repeat;
-      }
-
-      &.ui-icon-check {
-        display: inline-block;
-        position: relative;
-        top: 3px;
-        width: 25px;
-        height: 20px;
-        background: var(--icon-correct) center center no-repeat;
-      }
-
-      &.incomplete, &.ui-icon-close {
-        display: inline-block;
-        position: relative;
-        top: 3px;
-        width: 20px;
-        height: 20px;
-        background: var(--icon-incorrect) center center no-repeat;
-      }
-    }
-
-    .reload {
-      @include float(right);
-
-      margin: calc((var(--baseline)/2));
-    }
-
-
-    .grader-status {
-      @include clearfix();
-
-      margin: calc(var(--baseline)/2) 0;
-      padding: calc(var(--baseline)/2);
-      border-radius: 5px;
-      background: var(--gray-l6);
-
-      span {
-        display: block;
-        float: left;
-        overflow: hidden;
-        margin: -7px 7px 0 0;
-        text-indent: -9999px;
-      }
-
-      .grading {
-        margin: 0px 7px 0 0;
-        padding-left: 25px;
-        background: var(--icon-info) left center no-repeat;
-        text-indent: 0px;
-      }
-
-      p {
-        float: left;
-        margin-bottom: 0;
-        text-transform: capitalize;
-        line-height: 20px;
-      }
-
-      &.file {
-        margin-top: var(--baseline);
-        padding: var(--baseline) 0 0 0;
-        border: 0;
-        border-top: 1px solid #eee;
-        background: var(--white);
-
-        p.debug {
-          display: none;
-        }
-
-        input {
-          float: left;
-        }
-      }
-
-    }
-
-    .evaluation {
-      p {
-        margin-bottom: calc((var(--baseline)/5));
-      }
-    }
-
-
-    .feedback-on-feedback {
-      margin-right: var(--baseline);
-      height: 100px;
-    }
-
-    .evaluation-response {
-      header {
-        text-align: right;
-
-        a {
-          font-size: .85em;
-        }
-      }
-    }
-
-    .evaluation-scoring {
-      .scoring-list {
-        margin-left: 3px;
-        list-style-type: none;
-
-        li {
-          display:inline;
-          margin-left: 50px;
-
-          &:first-child {
-            margin-left: 0;
-          }
-
-          label {
-            font-size: .9em;
-          }
-        }
-      }
-    }
-
-    .submit-message-container {
-      margin: var(--baseline) 0px ;
-    }
-  }
-
-  div.inline {
-    > span {
-      display: inline;
-    }
-  }
-
-  ul {
-    margin-bottom: lh();
-    margin-left: .75em;
-    margin-left: .75rem;
-    list-style: disc outside none;
-  }
-
-  ol {
-    margin-bottom: lh();
-    margin-left: .75em;
-    margin-left: .75rem;
-    list-style: decimal outside none;
-  }
-
-  dl {
-    line-height: 1.4em;
-  }
-
-  dl dt {
-    @extend %t-strong;
-
-  }
-
-  dl dd {
-    margin-bottom: 0;
-  }
-
-  dd {
-    margin-left: .5em;
-    margin-left: .5rem;
-  }
-
-  li {
-    margin-bottom: lh(0.5);
-    line-height: 1.4em;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  p {
-    margin-bottom: lh();
-  }
-
-  table {
-    margin: lh() 0;
-    border-collapse: collapse;
-    table-layout: auto;
-
-    td, th {
-      &.cont-justified-left {
-        text-align: left !important; // nasty, but needed to override the bad specificity of the xmodule css selectors
-      }
-
-      &.cont-justified-right {
-        text-align: right !important; // nasty, but needed to override the bad specificity of the xmodule css selectors
-      }
-
-      &.cont-justified-center {
-        text-align: center !important; // nasty, but needed to override the bad specificity of the xmodule css selectorsstyles
-      }
-    }
-
-    th {
-      @extend %t-strong;
-
-      text-align: left;
-    }
-
-    td {
-      text-align: left;
-    }
-
-    caption, th, td {
-      padding: .25em .75em .25em 0;
-      padding: .25rem .75rem .25rem 0;
-    }
-
-    caption {
-      margin-bottom: .75em;
-      margin-bottom: .75rem;
-      padding: .75em 0;
-      padding: .75rem 0;
-      background: #f1f1f1;
-    }
-
-    tr, td, th {
-      vertical-align: middle;
-    }
-  }
-
-  code {
-    margin: 0 2px;
-    padding: 0px 5px;
-    border: 1px solid #eaeaea;
-    border-radius: 3px;
-    background-color: var(--gray-l6);
-    white-space: nowrap;
-    font-size: .9em;
-  }
-
-  pre {
-    overflow: auto;
-    padding: 6px calc(var(--baseline)/2);
-    border: 1px solid var(--gray-l3);
-    border-radius: 3px;
-    background-color: var(--gray-l6);
-    font-size: .9em;
-    line-height: 1.4;
-
-    > code {
-      margin: 0;
-      padding: 0;
-      border: none;
-      background: transparent;
-      white-space: pre;
-    }
-  }
-}
-
-// +Problem - Text Input, Numerical Input
-// ====================
-.problem {
-  .capa_inputtype.textline, .inputtype.formulaequationinput {
-    input {
-      box-sizing: border-box;
-
-      border: 2px solid var(--gray-l4);
-      border-radius: 3px;
-      min-width: 160px;
-      height: 46px;
-    }
-
-    .status {
-      display: inline-block;
-      margin-top: calc((var(--baseline)/2));
-      background: none;
-    }
-
-    // CASE: incorrect answer
-    > .incorrect {
-      input {
-        border: 2px solid var(--incorrect);
-      }
-
-      .status {
-        @include status-icon(var(--incorrect), $cross-icon);
-      }
-    }
-
-    // CASE: partially correct answer
-    > .partially-correct {
-      input {
-        border: 2px solid var(--partially-correct);
-      }
-
-      .status {
-        @include status-icon(var(--partially-correct), $asterisk-icon);
-      }
-    }
-
-    // CASE: correct answer
-    > .correct {
-      input {
-        border: 2px solid var(--correct);
-      }
-
-      .status {
-        @include status-icon(var(--correct), $checkmark-icon);
-      }
-    }
-
-    // CASE: submitted, correctness withheld
-    > .submitted {
-      input {
-        border: 2px solid var(--submitted);
-      }
-
-      .status {
-        content: '';
-      }
-    }
-
-    // CASE: unanswered and unsubmitted
-    > .unanswered, > .unsubmitted {
-      input {
-        border: 2px solid var(--gray-l4);
-      }
-
-      .status {
-        .status-icon {
-          &::after {
-            content: '';
-            display: inline-block;
-          }
-        }
-      }
-    }
-
-  }
-
-  .inputtype.formulaequationinput {
-    > div {
-      input {
-        direction: ltr;
-        @include text-align(left);
-      }
-    }
-  }
-
-  .trailing_text {
-    @include margin-right(calc((var(--baseline)/2)));
-
-    display: inline-block;
-  }
-}
-
-
-// +Problem - Option Input (Dropdown)
-// ====================
-.problem {
-  .inputtype.option-input {
-    margin: 0 0 0 0 !important;
-
-    .indicator-container {
-      display: inline-block;
-
-      .status.correct::after,
-      .status.partially-correct::after,
-      .status.incorrect::after,
-      .status.submitted::after,
-      .status.unanswered::after {
-        @include margin-left(0);
-      }
-    }
-  }
-}
-
-// +Problem - CodeMirror
-// ====================
-div.problem {
-  .CodeMirror {
-    border: 1px solid black;
-    font-size: 14px;
-    line-height: 18px;
-    resize: none;
-
-    .cm-tab {
-      background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAMCAYAAAAkuj5RAAAAAXNSR0IArs4c6QAAAGFJREFUSMft1LsRQFAQheHPowAKoACx3IgEKtaEHujDjORSgWTH/ZOdnZOcM/sgk/kFFWY0qV8foQwS4MKBCS3qR6ixBJvElOobYAtivseIE120FaowJPN75GMu8j/LfMwNjh4HUpwg4LUAAAAASUVORK5CYII=);
-      background-position: right;
-      background-repeat: no-repeat;
-    }
-
-    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;
-
-      &.CodeMirror-cursor {
-        @extend %ui-depth1;
-
-        position: absolute;
-        visibility: hidden;
-        width: 0;
-        border-right: none;
-        border-left: 1px solid var(--black);
-      }
-    }
-  }
-
-  .CodeMirror-focused pre.CodeMirror-cursor {
-    visibility: visible;
-  }
-
-  .CodeMirror-code pre {
-    width: -webkit-fit-content;
-    width: -moz-fit-content;
-    width: fit-content;
-  }
-
-  .CodeMirror-scroll {
-    margin-right: 0px;
-  }
-}
-
-.capa-message {
-  display: inline-block;
-  color: var(--gray-d1);
-  -webkit-font-smoothing: antialiased;
-}
-
-// +Problem - Actions
-// ====================
-div.problem .action {
-  min-height: var(--baseline);
-  width: 100%;
-  display: flex;
-  display: -ms-flexbox;
-  -ms-flex-align: start;
-  flex-direction: row;
-  align-items: center;
-  flex-wrap: wrap;
-
-  .problem-action-buttons-wrapper {
-      display: inline-flex;
-      justify-content: flex-end;
-      width: 100%;
-      padding-bottom: var(--baseline);
-  }
-
-  .problem-action-button-wrapper {
-    @include border-right(1px solid var(--gray-300));
-    @include padding(0, 13px); // to create a 26px gap, which is an a11y recommendation
-
-    display: inline-block;
-
-    &:last-child {
-      border: none;
-      padding-right: 0;
-    }
-  }
-
-  .problem-action-btn {
-    border: none;
-    max-width: 110px;
-
-    &:hover,
-    &:focus,
-    &:active {
-      color: var(--primary) !important;
-    }
-
-    .icon {
-      margin-bottom: calc(var(--baseline) / 10);
-      display: block;
-    }
-
-    @media print {
-      display: none;
-    }
-  }
-
-  .submit-attempt-container {
-    padding-bottom: var(--baseline);
-    flex-grow: 1;
-    display: flex;
-    align-items: center;
-
-    @media (max-width: var(--bp-screen-lg)) {
-      max-width: 100%;
-      padding-bottom: var(--baseline);
-    }
-
-    .submit {
-      @include margin-right(calc((var(--baseline) / 2)));
-      @include float(left);
-
-      white-space: nowrap;
-    }
-
-    .submit-cta-description {
-        color: var(--primary);
-        font-size: small;
-        padding-right: calc(var(--baseline) / 2);
-    }
-    .submit-cta-link-button {
-        color: var(--primary);
-        padding-right: calc(var(--baseline) / 4);
-    }
-  }
-
-  .submission-feedback {
-    @include margin-right(calc((var(--baseline) / 2)));
-
-    margin-top: calc(var(--baseline) / 2);
-    display: inline-block;
-    color: var(--gray-d1);
-    font-size: var(--medium-font-size);
-    -webkit-font-smoothing: antialiased;
-    vertical-align: middle;
-
-    &.cta-enabled {
-      margin-top: 0;
-    }
-  }
-}
-
-
-// +Problem - Misc, Unclassified Mess Part 2
-// ====================
-div.problem {
-  hr {
-    float: none;
-    clear: both;
-    margin: 0 0 .75rem;
-    width: 100%;
-    height: 1px;
-    border: none;
-    background: #ddd;
-    color: #ddd;
-  }
-
-  .hidden {
-    display: none;
-    visibility: hidden;
-  }
-
-  #{$all-text-inputs} {
-    display: inline;
-    width: auto;
-  }
-
-  // this supports a deprecated element and should be removed once the center tag is removed
-  center {
-    display: block;
-    margin: lh() 0;
-    padding: lh();
-    border: 1px solid var(--gray-l3);
-  }
-
-  .message {
-    font-size: inherit;
-  }
-
-  .detailed-solution > p {
-    margin: 0;
-
-    &:first-child {
-      @extend %t-strong;
-
-      margin-bottom: 0;
-    }
-
-  }
-
-  .detailed-targeted-feedback,
-  .detailed-targeted-feedback-partially-correct,
-  .detailed-targeted-feedback-correct {
-    > p {
-      margin: 0;
-      font-weight: normal;
-
-      &:first-child {
-        @extend %t-strong;
-      }
-    }
-  }
-
-  div.capa_alert {
-    margin-top: var(--baseline);
-    padding: 8px 12px;
-    border: 1px solid var(--warning-color);
-    border-radius: 3px;
-    background: var(--warning-color-accent);
-    font-size: 0.9em;
-  }
-
-  .notification {
-    @include 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);
-
-    &.success {
-      @include notification-by-type(var(--success));
-    }
-
-    &.error {
-      @include notification-by-type(var(--danger));
-    }
-
-    &.warning {
-      @include notification-by-type(var(--warning));
-    }
-
-    &.general {
-      @include notification-by-type(var(--general-color-accent));
-    }
-
-    &.problem-hint {
-      border: 1px solid var(--uxpl-gray-background);
-      border-radius: 6px;
-
-      .icon {
-        @include margin-right(calc(3 * var(--baseline) / 4) );
-
-        color: var(--uxpl-gray-dark);
-      }
-
-      li {
-        color: var(--uxpl-gray-base);
-
-        strong {
-          color: var(--uxpl-gray-dark);
-        }
-      }
-    }
-
-    .icon {
-      @include float(left);
-
-      position: relative;
-      top: calc(var(--baseline) / 5);
-    }
-
-    .notification-message {
-      display: inline-block;
-      width: flex-grid(7,10);
-      // Make notification tall enough that when the "Review" button is displayed,
-      // the notification does not grow in height.
-      margin-bottom: 8px;
-
-      ol {
-        list-style: none outside none;
-        padding: 0;
-        margin: 0;
-
-        li:not(:last-child) {
-          margin-bottom: calc(var(--baseline) / 4);
-        }
-      }
-    }
-
-    .notification-btn-wrapper {
-      @include float(right);
-    }
-
-  }
-
-  .notification-btn {
-    @include float(right);
-
-    padding: calc((var(--baseline) / 10)) calc((var(--baseline) / 4));
-    min-width: calc((var(--baseline) * 3));
-    display: block;
-    clear: both;
-
-    &:first-child {
-      margin-bottom: calc(var(--baseline) / 4);
-    }
-  }
-
-  // override default button hover
-  button {
-    &:hover {
-      background-image: none;
-      box-shadow: none;
-    }
-
-    &:focus {
-      box-shadow: none;
-    }
-
-    &.btn-default {
-      background-color: transparent;
-    }
-
-    &.btn-brand {
-      &:hover {
-        background-color: var(--btn-brand-focus-background);
-      }
-    }
-  }
-
-  .review-btn {
-    color: var(--blue); // notification type has other colors
-    &.sr {
-      color: var(--blue);
-    }
-  }
-
-  div.capa_reset {
-    padding: 25px;
-    background-color: var(--error-color-light);
-    border: 1px solid var(--error-color);
-    border-radius: 3px;
-    font-size: 1em;
-    margin-top: calc(var(--baseline)/2);
-    margin-bottom: calc(var(--baseline)/2);
-  }
-
-  .capa_reset>h2 {
-    color: #a00;
-  }
-
-  .capa_reset li {
-    font-size: 0.9em;
-  }
-
-  .hints {
-    border: 1px solid var(--gray-l3);
-
-    h3 {
-      @extend %t-strong;
-
-      padding: 9px;
-      border-bottom: 1px solid #e3e3e3;
-      background: #eee;
-      text-shadow: 0 1px 0 var(--white);
-      font-size: em(16);
-    }
-
-    div {
-      border-bottom: 1px solid #ddd;
-
-      &:last-child {
-        border-bottom: none;
-      }
-
-      p {
-        margin-bottom: 0;
-      }
-
-      header {
-        a {
-          display: block;
-          padding: 9px;
-          background: var(--gray-l6);
-          box-shadow: inset 0 0 0 1px var(--white);
-        }
-      }
-
-      > section {
-        padding: 9px;
-      }
-    }
-  }
-
-  .test {
-    padding-top: 18px;
-
-    header {
-      margin-bottom: 12px;
-
-      h3 {
-        @extend %t-strong;
-
-        color: #aaa;
-        font-style: normal;
-        font-size: 0.9em;
-      }
-    }
-
-    > section {
-      position: relative;
-      margin-bottom: calc((var(--baseline)/2));
-      padding: 9px 9px var(--baseline);
-      border: 1px solid #ddd;
-      border-radius: 3px;
-      background: var(--white);
-      box-shadow: inset 0 0 0 1px #eee;
-
-      p:last-of-type {
-        margin-bottom: 0;
-      }
-
-      .shortform {
-        margin-bottom: .6em;
-      }
-
-      a.full {
-        @include position(absolute, 0 0 1px 0);
-        box-sizing: border-box;
-
-        display: block;
-        padding: calc((var(--baseline)/5));
-        background: var(--gray-l4);
-        text-align: right;
-        font-size: 1em;
-
-        &.full-top {
-          @include position(absolute, 1px 0 auto 0);
-        }
-
-        &.full-bottom {
-          @include position(absolute, auto 0 1px 0);
-        }
-      }
-    }
-  }
-
-  .external-grader-message {
-    section {
-      padding-top: calc((var(--baseline)*1.5));
-      padding-left: var(--baseline);
-      background-color: #fafafa;
-      color: #2c2c2c;
-      font-size: 1em;
-      font-family: monospace;
-
-      header {
-        font-size: 1.4em;
-      }
-
-      .shortform {
-        @extend %t-strong;
-      }
-
-      .longform {
-        margin: 0;
-        padding: 0;
-
-        .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: var(--icon-incorrect) center left no-repeat;
-
-          li {
-            color: #b00;
-          }
-        }
-
-        .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;
-
-          h4 {
-            font-size: 1em;
-            font-family: monospace;
-          }
-
-          dl {
-            margin: 0;
-          }
-
-          dt {
-            margin-top: var(--baseline);
-          }
-
-          dd {
-            margin-left: 24pt;
-          }
-        }
-
-        .result-correct {
-          background: var(--icon-correct) left 20px no-repeat;
-
-          .result-actual-output {
-            color: #090;
-          }
-        }
-
-        .result-partially-correct {
-          background: var(--icon-partially-correct) left 20px no-repeat;
-
-          .result-actual-output {
-            color: #090;
-          }
-        }
-
-        .result-incorrect {
-          background: var(--icon-incorrect) left 20px no-repeat;
-
-          .result-actual-output {
-            color: #b00;
-          }
-        }
-
-        .markup-text{
-          margin: calc((var(--baseline)/4));
-          padding: var(--baseline) 0 15px 50px;
-          border-top: 1px solid #ddd;
-          border-left: 20px solid #fafafa;
-
-          bs {
-            color: #b00;
-          }
-
-          bg {
-            color: #bda046;
-          }
-        }
-      }
-    }
-  }
-}
-
-
-// +Problem - Rubric
-// ====================
-div.problem {
-  .rubric {
-    tr {
-      margin: calc((var(--baseline)/2)) 0;
-      height: 100%;
-    }
-
-    td {
-      margin: calc((var(--baseline)/2)) 0;
-      padding: var(--baseline) 0;
-      height: 100%;
-    }
-
-    th {
-      margin: calc((var(--baseline)/4));
-      padding: calc((var(--baseline)/4));
-    }
-
-    label,
-    .view-only {
-      position: relative;
-      display: inline-block;
-      margin: 3px;
-      padding: calc((var(--baseline)*0.75));
-      min-width: 50px;
-      min-height: 50px;
-      width: 150px;
-      height: 100%;
-      background-color: var(--gray-l3);
-      font-size: .9em;
-    }
-
-    .grade {
-      position: absolute;
-      right: 0;
-      bottom: 0;
-      margin: calc((var(--baseline)/2));
-    }
-
-    .selected-grade {
-      background: #666;
-      color: white;
-    }
-
-    input[type=radio]:checked + label {
-      background: #666;
-      color: white;
-    }
-
-    input[class='score-selection'] {
-      display: none;
-    }
-  }
-}
-
-// +Problem - Annotation
-// ====================
-div.problem {
-  .annotation-input {
-    margin: 0 0 1em 0;
-    border: 1px solid var(--gray-l3);
-    border-radius: 1em;
-
-    .annotation-header {
-      @extend %t-strong;
-
-      padding: .5em 1em;
-      border-bottom: 1px solid var(--gray-l3);
-    }
-
-    .annotation-body { padding: .5em 1em; }
-
-    a.annotation-return {
-      float: right;
-      font: inherit;
-      font-weight: normal;
-    }
-
-    a.annotation-return::after { content: " \2191" }
-
-    .block, ul.tags {
-      margin: .5em 0;
-      padding: 0;
-    }
-
-    .block-highlight {
-      padding: .5em;
-      border: 1px solid darken($annotation-yellow, 10%);
-      background-color: $annotation-yellow;
-      color:  #333;
-      font-style: normal;
-    }
-
-    .block-comment { font-style: italic; }
-
-    ul.tags {
-      display: block;
-      margin-left: 1em;
-      list-style-type: none;
-
-      li {
-        position: relative;
-        display: block;
-        margin: 1em 0 0 0;
-
-        .tag {
-          @extend %ui-fake-link;
-
-          display: inline-block;
-          margin-left: calc((var(--baseline)*2));
-          border: 1px solid rgb(102,102,102);
-
-          &.selected {
-            background-color: $annotation-yellow;
-          }
-        }
-
-        .tag-status {
-          position: absolute;
-          left: 0;
-        }
-        .tag-status, .tag { padding: .25em .5em; }
-      }
-    }
-
-    textarea.comment {
-      $num-lines-to-show: 5;
-      $line-height: 1.4em;
-      $padding: .2em;
-
-      padding: $padding (2 * $padding);
-      width: 100%;
-      height: ($num-lines-to-show * $line-height) + (2*$padding) - (($line-height - 1)/2);
-      line-height: $line-height;
-    }
-
-    .answer-annotation { display: block; margin: 0; }
-
-    /* for debugging the input value field. enable the debug flag on the inputtype */
-    .debug-value {
-      margin: 1em 0;
-      padding: 1em;
-      border: 1px solid var(--black);
-      background-color: #999;
-      color: var(--white);
-
-      input[type="text"] { width: 100%; }
-
-      pre { background-color: var(--gray-l3); color: var(--black); }
-
-      &::before {
-        @extend %t-strong;
-
-        display: block;
-        content: "debug input value";
-        font-size: 1.5em;
-      }
-    }
-  }
-}
-
-// +Problem - Choice Text Group
-// ====================
-div.problem {
-  .choicetextgroup {
-    @extend %choicegroup-base;
-
-    input[type="text"]{
-      margin-bottom: 0.5em;
-    }
-
-    label.choicetextgroup_correct, section.choicetextgroup_correct {
-      @extend label.choicegroup_correct;
-
-      input[type="text"] {
-        border-color: var(--correct);
-      }
-    }
-
-    label.choicetextgroup_partially-correct, section.choicetextgroup_partially-correct {
-      @extend label.choicegroup_partially-correct;
-
-      input[type="text"] {
-        border-color: var(--partially-correct);
-      }
-    }
-
-    label.choicetextgroup_incorrect, section.choicetextgroup_incorrect {
-      @extend label.choicegroup_incorrect;
-    }
-
-    label.choicetextgroup_submitted, section.choicetextgroup_submitted {
-      @extend label.choicegroup_submitted;
-    }
-
-    label.choicetextgroup_show_correct, section.choicetextgroup_show_correct {
-      &::after {
-        @include margin-left(calc((var(--baseline)*0.75)));
-
-        content: var(--icon-correct);
-      }
-    }
-
-    span.mock_label {
-      cursor : default;
-    }
-  }
-}
-
-// +Problem - Image Input Overrides
-// ====================
-
-// NOTE: temporary override until image inputs use same base html structure as other common capa input types.
-div.problem .imageinput.capa_inputtype {
-  .status {
-    display: inline-block;
-    position: relative;
-    top: 3px;
-    width: 25px;
-    height: 20px;
-
-    &.unsubmitted,
-    &.unanswered {
-      .status-icon {
-        content: '';
-      }
-
-      .status-message {
-        display: none;
-      }
-    }
-  }
-
-  .correct {
-    @include status-icon(var(--correct), $checkmark-icon);
-  }
-
-  .incorrect {
-    @include status-icon(var(--incorrect), $cross-icon);
-  }
-
-  .partially-correct {
-    @include status-icon(var(--partially-correct), $asterisk-icon);
-  }
-
-  .submitted {
-    content: '';
-  }
-}
-
-// +Problem - Annotation Problem Overrides
-// ====================
-
-// NOTE: temporary override until annotation problem inputs use same base html structure as other common capa input types.
-div.problem .annotation-input {
-  .tag-status {
-    display: inline-block;
-    position: relative;
-    top: 3px;
-    width: 25px;
-    height: 20px;
-
-    &.unsubmitted,
-    &.unanswered {
-      .status-icon {
-        content: '';
-      }
-
-      .status-message {
-        display: none;
-      }
-    }
-  }
-
-  .correct {
-    @include status-icon(var(--correct), $checkmark-icon);
-  }
-
-  .incorrect {
-    @include status-icon(var(--incorrect), $cross-icon);
-  }
-
-  .partially-correct {
-    @include status-icon(var(--partially-correct), $asterisk-icon);
-  }
-
-  .submitted {
-    content: '';
-  }
-}
-
-// Loading Spinner
-// ====================
-.problems-wrapper .loading-spinner {
-  text-align: center;
-  color: var(--gray-d1);
-}
diff --git a/xmodule/assets/codemirror/_codemirror.scss b/xmodule/assets/codemirror/_codemirror.scss
deleted file mode 100644
index bf60ea6a49aa..000000000000
--- a/xmodule/assets/codemirror/_codemirror.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.CodeMirror {
-  background: #fff;
-  font-size: 13px;
-  color: #3c3c3c;
-}
diff --git a/xmodule/assets/editor/_edit.scss b/xmodule/assets/editor/_edit.scss
deleted file mode 100644
index 9ecd31416ced..000000000000
--- a/xmodule/assets/editor/_edit.scss
+++ /dev/null
@@ -1,83 +0,0 @@
-@import 'vendor/bi-app/bi-app-ltr';
-@import 'bourbon/bourbon';
-@import 'lms/theme/variables';
-@import 'bootstrap/scss/variables';
-@import 'cms/theme/variables-v1';
-@import 'mixins';
-
-// This is shared CSS between the xmodule problem editor and the xmodule HTML editor.
-.editor {
-  position: relative;
-
-  .row {
-    position: relative;
-  }
-
-  .editor-bar {
-    @include clearfix();
-    @include linear-gradient(top, #d4dee8, #c9d5e2);
-
-    position: relative;
-    padding: calc((var(--baseline)/4));
-    border-bottom-color: #a5aaaf;
-
-    button {
-      display: inline-block;
-
-      @include float(left);
-
-      padding: 3px calc((var(--baseline)/2)) 5px;
-      margin-left: 7px;
-      border: 0;
-      border-radius: 2px;
-      background: transparent;
-
-      .icon {
-        height: 21px;
-      }
-
-      &:hover,
-      &:focus {
-        background: rgba(255, 255, 255, .5);
-      }
-    }
-  }
-
-  .editor-tabs {
-    position: absolute;
-    top: 10px;
-
-    @include right(10px);
-    @include text-align(left);
-    @include direction();
-
-    li {
-      @include float(left);
-      @include margin-right(calc((var(--baseline)/4)));
-
-      &:last-child {
-        @include margin-right(0);
-      }
-    }
-
-    .tab {
-      display: block;
-      height: 24px;
-      padding: 7px 20px 3px;
-      border: 1px solid #a5aaaf;
-      border-radius: 3px 3px 0 0;
-
-      @include linear-gradient(top, var(--transparent) 87%, rgba(0, 0, 0, .06));
-
-      background-color: #e5ecf3;
-      font-size: 13px;
-      color: #3c3c3c;
-      box-shadow: 1px -1px 1px rgba(0, 0, 0, .05);
-
-      &.current {
-        background: var(--white);
-        border-bottom-color: var(--white);
-      }
-    }
-  }
-}
diff --git a/xmodule/assets/html/_display.scss b/xmodule/assets/html/_display.scss
deleted file mode 100644
index beceaa1d0119..000000000000
--- a/xmodule/assets/html/_display.scss
+++ /dev/null
@@ -1,318 +0,0 @@
-@import 'vendor/bi-app/bi-app-ltr';
-@import 'bourbon/bourbon';
-@import 'lms/theme/variables';
-@import 'bootstrap/scss/variables';
-@import 'lms/theme/variables-v1';
-
-// HTML component display:
-* {
-  line-height: 1.4em;
-}
-
-h1 {
-  color: var(--body-color);
-  font: normal 2em/1.4em var(--font-family-sans-serif);
-  letter-spacing: 1px;
-
-  @include margin(0, 0, 1.416em, 0);
-}
-
-h2 {
-  color: #646464;
-  font: normal 1.2em/1.2em var(--font-family-sans-serif);
-  letter-spacing: 1px;
-  margin-bottom: calc((var(--baseline)*0.75));
-  -webkit-font-smoothing: antialiased;
-}
-
-h3,
-h4,
-h5,
-h6 {
-  @include margin(0, 0, calc((var(--baseline)/2)), 0);
-
-  font-weight: 600;
-}
-
-h3 {
-  font-size: 1.2em;
-}
-
-h4 {
-  font-size: 1em;
-}
-
-h5 {
-  font-size: 0.83em;
-}
-
-h6 {
-  font-size: 0.75em;
-}
-
-p {
-  margin-bottom: 1.416em;
-  font-size: 1em;
-  line-height: 1.6em !important;
-  color: var(--body-color);
-}
-
-em,
-i {
-  font-style: italic;
-
-  span {
-    font-style: italic;
-  }
-}
-
-strong,
-b {
-  font-weight: bold;
-
-  span {
-    font-weight: bold;
-  }
-}
-
-p + p,
-ul + p,
-ol + p {
-  margin-top: var(--baseline);
-}
-
-blockquote {
-  margin: 1em calc((var(--baseline)*2));
-}
-
-ol,
-ul {
-  // Using the lower level Bi App Sass mixin to avoid @padding conflicts with bourbon.
-  @include bi-app-compact(padding, 0, 0, 0, 1em);
-
-  margin: 1em 0;
-  color: var(--body-color);
-
-  li {
-    margin-bottom: 0.708em;
-  }
-}
-
-ol {
-  list-style: decimal outside none;
-}
-
-ul {
-  list-style: disc outside none;
-}
-
-a {
-  &:link,
-  &:visited,
-  &:hover,
-  &:active,
-  &:focus {
-    color: var(--blue);
-  }
-}
-
-img {
-  max-width: 100%;
-}
-
-pre {
-  margin: 1em 0;
-  color: var(--body-color);
-  font-family: monospace, serif;
-  font-size: 1em;
-  white-space: pre-wrap;
-  word-wrap: break-word;
-}
-
-code {
-  color: var(--body-color);
-  font-family: monospace, serif;
-  background: none;
-  padding: 0;
-}
-
-table {
-  width: 100%;
-  margin: var(--baseline) 0;
-  border-collapse: collapse;
-  font-size: 16px;
-
-  td,
-  th {
-    margin: var(--baseline) 0;
-    padding: calc((var(--baseline)/2));
-    border: 1px solid var(--gray-l3);
-    font-size: 14px;
-
-    &.cont-justified-left {
-      text-align: left !important; // nasty, but needed to override the bad specificity of the xmodule css selectors
-    }
-
-    &.cont-justified-right {
-      text-align: right !important; // nasty, but needed to override the bad specificity of the xmodule css selectors
-    }
-
-    &.cont-justified-center {
-      text-align: center !important; // nasty, but needed to override the bad specificity of the xmodule css selectorsstyles
-    }
-  }
-}
-
-th {
-  background: #eee;
-  font-weight: bold;
-}
-
-
-// image modal
-// --------------------
-
-// modal - image zoom, fill window
-.wrapper-modal-image {
-  .modal-ui-icon {
-    @extend %ui-fake-link;
-
-    position: absolute;
-    display: block;
-    padding: calc((var(--baseline)/4)) 7px;
-    border-radius: 5px;
-    opacity: 0.9;
-    background: var(--white);
-    color: var(--black);
-    border: 2px solid var(--black);
-
-    .label {
-      font-weight: bold;
-    }
-
-    i {
-      font-style: normal;
-    }
-  }
-
-  .image-link {
-    @extend %ui-fake-link;
-
-    position: relative;
-    display: block;
-
-    .action-fullscreen {
-      display: none;
-      top: 10px;
-      left: 10px;
-    }
-
-    &:hover .action-fullscreen {
-      display: block;
-    }
-  }
-
-  .image-modal {
-    @extend %ui-fake-link;
-    @extend %ui-depth5;
-
-    position: fixed;
-    top: 0;
-    left: 0;
-    display: none;
-    height: 100%;
-    width: 100%;
-    background-color: rgba(0, 0, 0, 0.7);
-
-    .image-content {
-      position: relative;
-      top: 2.5%;
-      display: block;
-      height: 95%;
-      width: 95%;
-      margin: auto;
-      overflow: hidden;
-
-      .image-wrapper {
-        position: relative;
-
-        img {
-          position: relative;
-          display: block;
-          max-width: 100%;
-          max-height: 100%;
-          margin: auto;
-          cursor: default;
-        }
-      }
-
-      .action-close {
-        top: 10px;
-        right: 10px;
-      }
-
-      .image-controls {
-        position: absolute;
-        right: 10px;
-        bottom: 10px;
-        margin: 0;
-        padding: 0;
-        list-style: none;
-
-        .image-control {
-          position: relative;
-          display: inline-block;
-          margin: 0;
-          padding: 0;
-
-          .modal-ui-icon {
-            position: relative;
-
-            &.action-zoom-in {
-              margin-right: calc((var(--baseline)/4));
-            }
-
-            &.action-zoom-out {
-              margin-left: calc((var(--baseline)/4));
-            }
-
-            &.is-disabled {
-              opacity: 0.5;
-              cursor: default;
-            }
-          }
-        }
-      }
-    }
-
-    &.image-is-fit-to-screen {
-      display: block;
-
-      // !important used here to override jQuery.
-      .image-content .image-wrapper {
-        top: 0 !important;
-        left: 0 !important;
-        width: 100% !important;
-        height: 100% !important;
-
-        img {
-          top: 0 !important;
-          left: 0 !important;
-        }
-      }
-    }
-
-    &.image-is-zoomed {
-      display: block;
-
-      .image-content .image-wrapper {
-        img {
-          max-width: none;
-          max-height: none;
-          margin: 0;
-          cursor: move;
-        }
-      }
-    }
-  }
-}
diff --git a/xmodule/assets/html/_edit.scss b/xmodule/assets/html/_edit.scss
deleted file mode 100644
index bf47a0f5d372..000000000000
--- a/xmodule/assets/html/_edit.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-// HTML component editor:
-.html-editor {
-  @include clearfix();
-
-  .CodeMirror {
-    box-sizing: border-box;
-
-    height: 435px;
-  }
-
-  .is-inactive {
-    display: none;
-  }
-}
diff --git a/xmodule/assets/lti/_lti.scss b/xmodule/assets/lti/_lti.scss
deleted file mode 100644
index 9eee710f0dad..000000000000
--- a/xmodule/assets/lti/_lti.scss
+++ /dev/null
@@ -1,65 +0,0 @@
-@import 'bourbon/bourbon';
-@import 'lms/theme/variables';
-@import 'bootstrap/scss/variables';
-@import 'lms/theme/variables-v1';
-@import 'base/mixins';
-
-h2.problem-header {
-  display: inline-block;
-}
-
-div.problem-progress {
-  display: inline-block;
-  padding-left: calc((var(--baseline)/4));
-  color: #666;
-  font-weight: 100;
-  font-size: em(16);
-}
-
-
-div.lti {
-  // align center
-  margin: 0 auto;
-
-  .wrapper-lti-link {
-    @include font-size(14);
-
-    background-color: var(--sidebar-color);
-    padding: var(--baseline);
-
-    .lti-link {
-      margin-bottom: 0;
-      text-align: right;
-
-      .link_lti_new_window {
-        @extend .gray-button;
-
-        @include font-size(13);
-        @include line-height(14);
-      }
-    }
-  }
-
-  form.ltiLaunchForm {
-    display: none;
-  }
-
-  iframe.ltiLaunchFrame {
-    width: 100%;
-    height: 800px;
-    display: block;
-    border: 0px;
-  }
-
-  h4.problem-feedback-label {
-    font-weight: 100;
-    font-size: em(16);
-    font-family: "Source Sans", "Open Sans", Verdana, Geneva, sans-serif, sans-serif;
-  }
-
-  div.problem-feedback {
-    margin-top: calc((var(--baseline)/4));
-    margin-bottom: calc((var(--baseline)/4));
-
-  }
-}
diff --git a/xmodule/assets/poll/_display.scss b/xmodule/assets/poll/_display.scss
deleted file mode 100644
index 7c9b21bf205e..000000000000
--- a/xmodule/assets/poll/_display.scss
+++ /dev/null
@@ -1,226 +0,0 @@
-@import 'bourbon/bourbon';
-@import 'lms/theme/variables';
-@import 'bootstrap/scss/variables';
-@import 'lms/theme/variables-v1';
-
-div.poll_question {
-  @media print {
-    display: block;
-    width: auto;
-    padding: 0;
-
-    canvas, img {
-      page-break-inside: avoid;
-    }
-  }
-
-  .inline {
-    display: inline;
-  }
-
-  h3 {
-    margin-top: 0;
-    margin-bottom: calc((var(--baseline)*0.75));
-    color: #fe57a1;
-    font-size: 1.9em;
-
-    &.problem-header {
-      div.staff {
-        margin-top: calc((var(--baseline)*1.5));
-        font-size: 80%;
-      }
-    }
-
-    @media print {
-      display: block;
-      width: auto;
-      border-right: 0;
-    }
-  }
-
-  p {
-    text-align: justify;
-    font-weight: bold;
-  }
-
-  .poll_answer {
-    margin-bottom: var(--baseline);
-
-    &.short {
-      clear: both;
-    }
-
-    .question {
-      height: auto;
-      clear: both;
-      min-height: 30px;
-
-      &.short {
-        clear: none;
-        width: 30%;
-        display: inline;
-        float: left;
-      }
-
-      .button {
-        @extend %ui-fake-link;
-
-        -webkit-appearance: none;
-        -webkit-background-clip: padding-box;
-        -webkit-border-image: none;
-        -webkit-box-align: center;
-        -webkit-box-shadow: rgb(255, 255, 255) 0px 1px 0px 0px inset;
-        -webkit-font-smoothing: antialiased;
-        -webkit-rtl-ordering: logical;
-        -webkit-user-select: text;
-        -webkit-writing-mode: horizontal-tb;
-        background-clip: padding-box;
-        background-color: rgb(238, 238, 238);
-        background-image: -webkit-linear-gradient(top, rgb(238, 238, 238), rgb(210, 210, 210));
-        border-bottom-color: rgb(202, 202, 202);
-        border-bottom-left-radius: 3px;
-        border-bottom-right-radius: 3px;
-        border-bottom-style: solid;
-        border-bottom-width: 1px;
-        border-left-color: rgb(202, 202, 202);
-        border-left-style: solid;
-        border-left-width: 1px;
-        border-right-color: rgb(202, 202, 202);
-        border-right-style: solid;
-        border-right-width: 1px;
-        border-top-color: rgb(202, 202, 202);
-        border-top-left-radius: 3px;
-        border-top-right-radius: 3px;
-        border-top-style: solid;
-        border-top-width: 1px;
-        box-shadow: rgb(255, 255, 255) 0px 1px 0px 0px inset;
-        box-sizing: border-box;
-        color: rgb(51, 51, 51);
-
-        /* display: inline-block; */
-        display: inline;
-        float: left;
-        font-family: 'Open Sans', Verdana, Geneva, sans-serif;
-        font-size: 13px;
-        font-style: normal;
-        font-variant: normal;
-        font-weight: bold;
-        letter-spacing: normal;
-        line-height: 25.59375px;
-        margin-bottom: calc((var(--baseline)*0.75));
-        margin: 0;
-        padding: 0px;
-        text-align: center;
-        text-decoration: none;
-        text-indent: 0px;
-        text-shadow: rgb(248, 248, 248) 0px 1px 0px;
-        text-transform: none;
-        vertical-align: top;
-        white-space: pre-line;
-        width: 25px;
-        height: 25px;
-        word-spacing: 0px;
-        writing-mode: lr-tb;
-      }
-
-      .button.answered {
-        -webkit-box-shadow: rgb(97, 184, 225) 0px 1px 0px 0px inset;
-        background-color: rgb(29, 157, 217);
-        background-image: -webkit-linear-gradient(top, rgb(29, 157, 217), rgb(14, 124, 176));
-        border-bottom-color: rgb(13, 114, 162);
-        border-left-color: rgb(13, 114, 162);
-        border-right-color: rgb(13, 114, 162);
-        border-top-color: rgb(13, 114, 162);
-        box-shadow: rgb(97, 184, 225) 0px 1px 0px 0px inset;
-        color: rgb(255, 255, 255);
-        text-shadow: rgb(7, 103, 148) 0px 1px 0px;
-        background-image: none;
-      }
-
-      .text {
-        @extend %ui-fake-link;
-
-        display: inline;
-        float: left;
-        width: 80%;
-        text-align: left;
-        min-height: 30px;
-        margin-left: var(--baseline);
-        height: auto;
-        margin-bottom: var(--baseline);
-
-        &.short {
-          width: 100px;
-        }
-      }
-    }
-
-    .stats {
-      min-height: 40px;
-      margin-top: var(--baseline);
-      clear: both;
-
-      &.short {
-        margin-top: 0;
-        clear: none;
-        display: inline;
-        float: right;
-        width: 70%;
-      }
-
-      .bar {
-        width: 75%;
-        height: 20px;
-        border: 1px solid black;
-        display: inline;
-        float: left;
-        margin-right: calc((var(--baseline)/2));
-
-        &.short {
-          width: 65%;
-          height: 20px;
-          margin-top: 3px;
-        }
-
-        .percent {
-          background-color: gray;
-          width: 0;
-          height: 20px;
-
-          &.short { }
-        }
-      }
-
-      .number {
-        width: 80px;
-        display: inline;
-        float: right;
-        height: 28px;
-        text-align: right;
-
-        &.short {
-          width: 120px;
-          height: auto;
-        }
-      }
-    }
-  }
-
-  .poll_answer.answered {
-    -webkit-box-shadow: rgb(97, 184, 225) 0 1px 0 0 inset;
-    background-color: rgb(29, 157, 217);
-    background-image: -webkit-linear-gradient(top, rgb(29, 157, 217), rgb(14, 124, 176));
-    border-bottom-color: rgb(13, 114, 162);
-    border-left-color: rgb(13, 114, 162);
-    border-right-color: rgb(13, 114, 162);
-    border-top-color: rgb(13, 114, 162);
-    box-shadow: rgb(97, 184, 225) 0 1px 0 0 inset;
-    color: rgb(255, 255, 255);
-    text-shadow: rgb(7, 103, 148) 0 1px 0;
-  }
-
-  .button.reset-button {
-    clear: both;
-    float: right;
-  }
-}
diff --git a/xmodule/assets/problem/_edit.scss b/xmodule/assets/problem/_edit.scss
deleted file mode 100644
index f3fc795ec646..000000000000
--- a/xmodule/assets/problem/_edit.scss
+++ /dev/null
@@ -1,109 +0,0 @@
-.editor-bar {
-  .editor-tabs {
-    .advanced-toggle {
-      height: auto;
-      margin-top: -4px;
-      padding: 3px 9px;
-      font-size: 12px;
-      color: var(--link-color);
-
-      &.current {
-        border: 1px solid var(--lightGrey) !important;
-        border-radius: 3px !important;
-        background: var(--lightGrey) !important;
-        color: var(--darkGrey) !important;
-        pointer-events: none;
-        cursor: none;
-
-        &:hover,
-        &:focus {
-          box-shadow: 0 0 0 0 !important;
-          background-color: var(--white);
-        }
-      }
-    }
-
-  }
-}
-
-.simple-editor-cheatsheet {
-  position: absolute;
-  top: 41px;
-  @include left(70%);
-  width: 0;
-  border-left: 1px solid var(--gray-l2);
-
-  background-color: var(--lightGrey);
-  overflow: hidden;
-
-  &.shown {
-    width: 30%;
-    height: 92%;
-    overflow-y: scroll;
-  }
-
-  .cheatsheet-wrapper {
-    padding: 5%;
-  }
-
-  h6 {
-    margin-top: 4px;
-    margin-bottom: 7px;
-    margin-left: 4px;
-    font-size: 15px;
-    font-weight: 700;
-    display: inline-block;
-    vertical-align: top;
-  }
-
-  .row {
-    @include clearfix();
-
-    padding-bottom: 5px !important;
-    margin-bottom: 10px !important;
-    border-bottom: 1px solid #ddd !important;
-
-    &:last-child {
-      border-bottom: none !important;
-      margin-bottom: 0 !important;
-    }
-  }
-
-  .col {
-    display: block;
-
-    &.sample {
-      margin-right: 30px;
-
-      .icon {
-        height: calc((var(--baseline) * 1.5));
-      }
-    }
-  }
-
-  pre {
-    font-size: 12px;
-    line-height: 18px;
-  }
-
-  code {
-    padding: 0;
-    background: none;
-  }
-}
-
-.problem-editor {
-  // adding padding to simple editor only - adjacent selector is needed since there are no toggles for CodeMirror
-  .markdown-box + .CodeMirror {
-    padding: 10px;
-    width: 69%;
-  }
-}
-
-.problem-editor-icon {
-  display: inline-block;
-  width: 26px;
-  height: 21px;
-  vertical-align: middle;
-  color: var(--body-color);
-}
diff --git a/xmodule/assets/sequence/_display.scss b/xmodule/assets/sequence/_display.scss
deleted file mode 100644
index 595b602a8872..000000000000
--- a/xmodule/assets/sequence/_display.scss
+++ /dev/null
@@ -1,340 +0,0 @@
-@import 'vendor/bi-app/bi-app-ltr';
-@import 'bourbon/bourbon';
-@import 'lms/theme/variables';
-@import 'bootstrap/scss/variables';
-@import 'bootstrap/scss/mixins/breakpoints';
-@import 'lms/theme/variables-v1';
-
-$seq-nav-border-color: var(--border-color) !default;
-$seq-nav-hover-color: rgb(245, 245, 245) !default;
-$seq-nav-link-color: var(--link-color) !default;
-$seq-nav-icon-color: rgb(10, 10, 10) !default;
-$seq-nav-icon-color-muted: rgb(90, 90, 90) !default;
-$seq-nav-tooltip-color: rgb(51, 51, 51) !default;
-$seq-nav-height: 50px;
-
-// repeated extends - needed since LMS styling was referenced
-.block-link {
-  @include border-left(1px solid $seq-nav-border-color);
-
-  display: block;
-
-  &:hover,
-  &:focus {
-    background: none;
-  }
-}
-
-.topbar {
-  @include clearfix();
-
-  border-bottom: 1px solid $seq-nav-border-color;
-
-  @media print {
-    display: none;
-  }
-
-  a {
-    &.block-link {
-      @include border-left(1px solid $seq-nav-border-color);
-
-      display: block;
-
-      &:hover,
-      &:focus {
-        background: none;
-      }
-    }
-  }
-}
-
-%ui-clear-button {
-  background-color: transparent;
-  background-image: none;
-  background-position: center 14px;
-  background-repeat: no-repeat;
-  border: none;
-  border-radius: 0;
-  background-clip: border-box;
-  box-shadow: none;
-  box-sizing: content-box;
-  font-family: inherit;
-  font-size: inherit;
-  font-weight: inherit;
-}
-
-
-// ====================
-
-.sequence-nav {
-  @extend .topbar;
-
-  margin: 0 auto var(--baseline);
-  position: relative;
-  border-bottom: none;
-  z-index: 0;
-  height: $seq-nav-height;
-  display: flex;
-  justify-content: center;
-
-  @media print {
-    display: none;
-  }
-
-  .sequence-list-wrapper {
-    @extend %ui-depth2;
-
-    position: relative;
-    height: 100%;
-    flex-grow: 1;
-
-    @include media-breakpoint-down(xs) {
-      white-space: nowrap;
-      overflow-x: scroll;
-    }
-  }
-
-  ol {
-    display: flex;
-
-    li {
-      box-sizing: border-box;
-      min-width: 40px;
-      flex-grow: 1;
-      border-color: $seq-nav-border-color;
-      border-width: 1px;
-      border-top-style: solid;
-
-      &:not(:last-child) {
-        @include border-right-style(solid);
-      }
-
-      button {
-        @extend %ui-fake-link;
-        @extend %ui-clear-button;
-
-        width: 100%;
-        height: ($seq-nav-height - 1);
-        position: relative;
-        margin: 0;
-        padding: 0;
-        display: block;
-        text-align: center;
-        border-color: $seq-nav-border-color;
-        border-width: 1px;
-        border-bottom-style: solid;
-        box-sizing: border-box;
-        overflow: visible; // for tooltip - IE11 uses 'hidden' by default if width/height is specified
-
-        .icon {
-          display: inline-block;
-          line-height: 100%; // This matches the height of the <a> its within (the parent) to get vertical centering.
-          font-size: 110%;
-          color: $seq-nav-icon-color-muted;
-        }
-
-        .fa-bookmark {
-          color: $seq-nav-link-color;
-        }
-
-        //video
-        &.seq_video {
-          .icon::before {
-            content: "\f008"; // .fa-film
-          }
-        }
-
-        //other
-        &.seq_other {
-          .icon::before {
-            content: "\f02d"; // .fa-book
-          }
-        }
-
-        //vertical
-        &.seq_vertical {
-          .icon::before {
-            content: "\f00b";  // .fa-tasks
-          }
-        }
-
-        //problems
-        &.seq_problem {
-          .icon::before {
-            content: "\f044";  // .fa-pencil-square-o
-          }
-        }
-
-        .sequence-tooltip {
-          @include text-align(left);
-
-          @extend %ui-depth2;
-
-          margin-top: 12px;
-          background: $seq-nav-tooltip-color;
-          color: var(--white);
-          font-family: var(--font-family-sans-serif);
-          line-height: lh();
-          right: 0;  // Should not be RTLed, tooltips do not move in RTL
-          padding: 6px;
-          position: absolute;
-          top: 48px;
-          text-shadow: 0 -1px 0 var(--black);
-          white-space: pre;
-          pointer-events: none;
-
-          &:empty {
-            background: none;
-
-            &::after {
-              display: none;
-            }
-          }
-
-          &::after {
-            @include transform(rotate(45deg));
-            @include right(18px);
-
-            background: $seq-nav-tooltip-color;
-            content: " ";
-            display: block;
-            height: 10px;
-            right: 18px;  // Not RTLed, positions tooltips relative to seq nav item
-            position: absolute;
-            top: -5px;
-            width: 10px;
-          }
-        }
-      }
-    }
-  }
-
-  body.touch-based-device & ol li button:hover p {
-    display: none;
-  }
-}
-
-.sequence-nav-button {
-  @extend %ui-depth3;
-
-  display: block;
-  top: 0;
-  min-width: 40px;
-  max-width: 40px;
-  height: 100%;
-  text-shadow: none; // overrides default button text-shadow
-  background: none;  // overrides default button gradient
-  background-color: theme-color("inverse");
-  border-color: $seq-nav-border-color;
-  box-shadow: none;
-  font-size: inherit;
-  font-weight: normal;
-  padding: 0;
-  white-space: nowrap;
-  overflow-x: hidden;
-
-  @include media-breakpoint-up(md) {
-    min-width: 120px;
-    max-width: 200px;
-    text-overflow: ellipsis;
-
-    span:not(:last-child) {
-      @include padding-right(calc((var(--baseline) / 2)));
-    }
-  }
-
-  .sequence-nav-button-label {
-    display: none;
-
-    @include media-breakpoint-up(md) {
-      display: inline;
-    }
-  }
-
-  &.button-previous {
-    order: -999;
-
-    @include media-breakpoint-up(md) {
-      @include left(0);
-      @include border-top-left-radius(3px);
-      @include border-top-right-radius(0);
-      @include border-bottom-right-radius(0);
-      @include border-bottom-left-radius(3px);
-    }
-  }
-
-  &.button-next {
-    order: 999;
-
-    @include media-breakpoint-up(md) {
-      @include right(0);
-      @include border-top-left-radius(0);
-      @include border-top-right-radius(3px);
-      @include border-bottom-right-radius(3px);
-      @include border-bottom-left-radius(0);
-    }
-  }
-
-  &.disabled {
-    cursor: normal;
-  }
-}
-
-.seq_contents {
-  display: none;
-}
-
-.sequence-bottom {
-  position: relative;
-  height: 45px;
-  margin: lh(2) auto;
-  display: flex;
-  justify-content: center;
-
-  .sequence-nav-button {
-    position: relative;
-    min-width: 120px;
-    max-width: 200px;
-    text-overflow: ellipsis;
-
-    &:last-of-type {
-      @include border-left(none);
-    }
-  }
-
-  @media print {
-    display: none;
-  }
-}
-
-#seq_content {
-  &:focus,
-  &:active {
-    outline: none;
-  }
-}
-
-// hover and active states
-.sequence-nav-button,
-.sequence-nav button {
-  &.focused,
-  &:hover,
-  &:active,
-  &.active {
-    padding-top: 2px;
-    background-color: theme-color("primary");
-
-    .icon {
-      color: theme-color("inverse");
-    }
-
-    @include media-breakpoint-up(sm) {
-      border-bottom: 3px solid $seq-nav-link-color;
-      background-color: theme-color("inverse");
-
-      .icon {
-        color: $seq-nav-icon-color;
-      }
-    }
-  }
-}
diff --git a/xmodule/assets/tabs/_codemirror.scss b/xmodule/assets/tabs/_codemirror.scss
deleted file mode 100644
index 37a894a10395..000000000000
--- a/xmodule/assets/tabs/_codemirror.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-.editor {
-  @include clearfix();
-
-  .CodeMirror {
-    box-sizing: border-box;
-
-    width: 100%;
-    position: relative;
-    height: 379px;
-    border: 1px solid #3c3c3c;
-    border-top: 1px solid #8891a1;
-    background: var(--white);
-    color: #3c3c3c;
-  }
-
-  .CodeMirror-scroll {
-    height: 100%;
-  }
-}
-
diff --git a/xmodule/assets/tabs/_tabs.scss b/xmodule/assets/tabs/_tabs.scss
deleted file mode 100644
index 4b8c2a387a91..000000000000
--- a/xmodule/assets/tabs/_tabs.scss
+++ /dev/null
@@ -1,141 +0,0 @@
-// styles duped from _unit.scss - Edit Header (Component Name, Mode-Editor, Mode-Settings)
-@import 'vendor/bi-app/bi-app-ltr';
-@import 'bourbon/bourbon';
-@import 'lms/theme/variables';
-@import 'bootstrap/scss/variables';
-@import 'cms/theme/variables-v1';
-@import 'mixins';
-
-
-.tabs-wrapper {
-  padding-top: 0;
-  position: relative;
-
-  .wrapper-comp-settings {
-    // set visibility to metadata editor
-    display: block;
-  }
-}
-
-.editor-single-tab-name {
-  display: none;
-}
-
-
-.editor-with-tabs {
-  @include clearfix();
-
-  position: relative;
-
-
-  .edit-header {
-    box-sizing: border-box;
-
-    padding: 18px var(--baseline);
-    top: 0 !important; // ugly override for second level tab override
-    right: 0;
-    background-color: var(--blue);
-    border-bottom: 1px solid var(--blue-d2);
-    color: var(--white);
-
-    //Component Name
-    .component-name {
-      position: relative;
-      top: 0;
-      left: 0;
-      width: 50%;
-      color: var(--white);
-      font-weight: 600;
-
-
-
-      em {
-        display: inline-block;
-        margin-right: calc((var(--baseline)/4));
-        font-weight: 400;
-        color: var(--white);
-      }
-    }
-
-    //Nav-Edit Modes
-    .editor-tabs {
-      list-style: none;
-      right: 0;
-      top: calc((var(--baseline)/4));
-      position: absolute;
-      padding: 12px calc((var(--baseline)*0.75));
-
-      .inner_tab_wrap {
-        display: inline-block;
-        margin-left: 8px;
-
-        a.tab {
-          @include font-size(14);
-          @include linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
-
-          border: 1px solid var(--blue-d1);
-          border-radius: 3px;
-          padding: calc((var(--baseline)/4)) (var(--baseline));
-          background-color: var(--blue);
-          font-weight: bold;
-          color: var(--white);
-
-          &.current {
-            @include linear-gradient(var(--blue), var(--blue));
-
-            color: var(--blue-d1);
-            box-shadow: inset 0 1px 2px 1px var(--shadow-l1);
-            background-color: var(--blue-d4);
-            cursor: default;
-          }
-
-          &:hover,
-          &:focus {
-            box-shadow: inset 0 1px 2px 1px  var(--shadow);
-            background-image: linear-gradient(#009fe6, #009fe6) !important;
-          }
-        }
-      }
-    }
-  }
-
-  .is-inactive {
-    display: none;
-  }
-
-  .comp-subtitles-entry {
-    text-align: center;
-
-    .file-upload {
-      display: none;
-    }
-
-    .comp-subtitles-import-list {
-      > li {
-        display: block;
-        margin: calc(var(--baseline)/2) 0;
-      }
-
-      .blue-button {
-        font-size: 1em;
-        display: block;
-        width: 70%;
-        margin: 0 auto;
-        text-align: center;
-      }
-    }
-  }
-}
-
-.component-tab {
-  background: var(--white);
-  position: relative;
-  border-top: 1px solid #8891a1;
-
-  &#advanced {
-    padding: 0;
-    border: none;
-  }
-}
-
-
diff --git a/xmodule/assets/video/_accessible_menu.scss b/xmodule/assets/video/_accessible_menu.scss
deleted file mode 100644
index d411925f2390..000000000000
--- a/xmodule/assets/video/_accessible_menu.scss
+++ /dev/null
@@ -1,237 +0,0 @@
-@import 'base/mixins';
-@import 'lms/theme/variables-v1';
-
-$a11y--gray: rgb(127, 127, 127);
-$a11y--blue: rgb(0, 159, 230);
-$a11y--gray-d1: var(--gray-d1);
-$a11y--gray-l2: var(--gray-l2);
-$a11y--gray-l3: var(--gray-l3);
-$a11y--blue-s1: var(--blue-s1);
-
-%use-font-awesome {
-  font-family: FontAwesome;
-  -webkit-font-smoothing: antialiased;
-  display: inline-block;
-  speak: none;
-}
-
-.a11y-menu-container {
-  position: relative;
-
-  &.open {
-    .a11y-menu-list {
-      display: block;
-    }
-  }
-
-  .a11y-menu-list {
-    @extend %ui-depth3;
-
-    top: 100%;
-    margin: 0;
-    padding: 0;
-    display: none;
-    position: absolute;
-    list-style: none;
-    background-color: var(--white);
-    border: 1px solid #eee;
-
-    li {
-      @extend %ui-fake-link;
-
-      margin: 0;
-      padding: 0;
-      border-bottom: 1px solid #eee;
-      color: var(--white);
-
-      a {
-        display: block;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        color: $a11y--gray-l2;
-        font-size: 14px;
-        line-height: 23px;
-
-        &:hover,
-        &:focus {
-          color: $a11y--gray-d1;
-        }
-      }
-
-      &.active {
-        a {
-          color: $a11y--blue;
-        }
-      }
-
-      &:last-child {
-        box-shadow: none;
-        border-bottom: 0;
-        margin-top: 0;
-      }
-    }
-  }
-}
-
-
-// Video track button specific styles
-
-.video-tracks {
-  .a11y-menu-container {
-    display: inline-block;
-    vertical-align: top;
-    border-left: 1px solid #eee;
-
-    &.open {
-      > a {
-        background-color: var(--action-primary-active-bg);
-        color: var(--very-light-text);
-
-        &::after {
-          color: var(--very-light-text);
-        }
-      }
-    }
-
-    > a {
-      @include transition(all var(--tmg-f2) ease-in-out 0s);
-      @include font-size(12);
-
-      display: block;
-      border-radius: 0 3px 3px 0;
-      background-color: var(--very-light-text);
-      padding: calc((var(--baseline)*0.75)) calc((var(--baseline)*1.25)) calc((var(--baseline)*0.75)) calc((var(--baseline)*0.75));
-      color: $a11y--gray-l2;
-      min-width: 1.5em;
-      line-height: 14px;
-      text-align: center;
-      overflow: hidden;
-      text-overflow: ellipsis;
-
-      &::after {
-        @extend %use-font-awesome;
-
-        content: "\f0d7";
-        position: absolute;
-        right: calc((var(--baseline)*0.5));
-        top: 33%;
-        color: var(--lighter-base-font-color);
-      }
-    }
-
-    .a11y-menu-list {
-      right: 0;
-
-      li {
-        font-size: em(14);
-
-        a {
-          border: 0;
-          display: block;
-          padding: lh(0.5);
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
-      }
-    }
-  }
-}
-
-
-.contextmenu,
-.submenu {
-  @extend %ui-depth5;
-
-  border: 1px solid #333;
-  background: var(--white);
-  color: #333;
-  padding: 0;
-  margin: 0;
-  list-style: none;
-  position: absolute;
-  top: 0;
-  display: none;
-  outline: none;
-  cursor: default;
-  white-space: nowrap;
-
-  &.is-opened {
-    display: block;
-  }
-
-  .menu-item,
-  .submenu-item {
-    border-top: 1px solid var(--gray-l3);
-    padding: calc((var(--baseline)/4)) calc((var(--baseline)/2));
-    outline: none;
-
-    & > span {
-      color: #333;
-    }
-
-    &:first-child {
-      border-top: none;
-    }
-
-    &:focus {
-      background: #333;
-      color: var(--white);
-
-      & > span {
-        color: var(--white);
-      }
-    }
-  }
-
-  .submenu-item {
-    position: relative;
-    padding: calc((var(--baseline)/4)) var(--baseline) calc((var(--baseline)/4)) calc((var(--baseline)/2));
-
-    &::after {
-      content: '\25B6';
-      position: absolute;
-      right: 5px;
-      line-height: 25px;
-      font-size: 10px;
-    }
-
-    .submenu {
-      display: none;
-    }
-
-    &.is-opened {
-      background: #333;
-      color: var(--white);
-
-      & > span {
-        color: var(--white);
-      }
-
-      & > .submenu {
-        display: block;
-      }
-    }
-
-    .is-selected {
-      font-weight: bold;
-    }
-  }
-
-  .is-disabled {
-    pointer-events: none;
-    color: var(--gray-l3);
-  }
-}
-
-.overlay {
-  @extend %ui-depth4;
-
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: transparent;
-}
diff --git a/xmodule/assets/video/_display.scss b/xmodule/assets/video/_display.scss
deleted file mode 100644
index c1f2ccee19fa..000000000000
--- a/xmodule/assets/video/_display.scss
+++ /dev/null
@@ -1,1043 +0,0 @@
-// This is for A Font Garde
-// It loads the icon font only when it's available.
-// ---
-// It is scoped to the video player for now, but we
-// will eventually want to move this to the main font
-// sheet, globally, so it applies to all use cases.
-
-// --------
-// Defaults: what displays if the icon font doesn't load.
-// --------
-@import 'vendor/bi-app/bi-app-ltr';
-@import 'bourbon/bourbon';
-@import 'lms/theme/variables';
-@import 'bootstrap/scss/variables';
-@import 'bootstrap/scss/mixins/breakpoints';
-@import 'lms/theme/variables-v1';
-
-// the html target is necessary for xblocks and xmodules, but works across the board
-
-$secondary-dark: rgb(142, 62, 99); // UXPL secondary dark
-$secondary-base: rgb(203, 89, 141); // UXPL secondary base
-$secondary-light: rgb(219, 139, 175); // UXPL secondary light
-$cool-dark: rgb(79, 89, 93); // UXPL cool dark
-
-& {
-  margin-bottom: calc((var(--baseline)*1.5));
-}
-
-.is-hidden {
-  display: none;
-}
-
-.video {
-  @include clearfix();
-
-  background: rgb(245, 245, 245); // UXPL grayscale x-back
-  display: block;
-  margin: 0 -12px;
-  padding: 12px;
-  border-radius: 5px;
-  outline: none;
-
-  &:focus,
-  &:active,
-  &:hover {
-    border: 0;
-  }
-
-  &.is-initialized {
-    .video-wrapper {
-      .spinner {
-        display: none;
-      }
-    }
-  }
-
-  // CASE: video pre-roll state
-  &.is-pre-roll {
-    .slider {
-      visibility: hidden;
-    }
-
-    .video-player {
-      position: relative;
-
-      &::before {
-        display: block;
-        content: "";
-        width: 100%;
-        padding-top: 55%;
-      }
-    }
-  }
-
-  .tc-wrapper {
-    @include clearfix();
-
-    position: relative;
-  }
-
-  .focus_grabber {
-    position: relative;
-    display: inline;
-    width: 0;
-    height: 0;
-  }
-
-  .downloads-heading {
-    margin: 1em 0 0;
-  }
-
-  .wrapper-video-bottom-section {
-    display: flex;
-    justify-content: space-between;
-
-    .wrapper-download-video,
-    .wrapper-download-transcripts,
-    .wrapper-handouts,
-    .branding,
-    .wrapper-transcript-feedback {
-      flex: 1;
-      margin-top: var(--baseline);
-
-      @include padding-right(var(--baseline));
-
-      vertical-align: top;
-    }
-  }
-
-  .wrapper-downloads {
-    @include media-breakpoint-up(md) {
-      display: flex;
-    }
-
-    .hd {
-      margin: 0;
-    }
-
-    .wrapper-download-video {
-      .video-sources {
-        margin: 0;
-      }
-    }
-
-    .wrapper-download-transcripts {
-      .list-download-transcripts {
-        margin: 0;
-        padding: 0;
-        list-style: none;
-
-        .transcript-option {
-          margin: 0;
-
-          a.btn , a.btn-link{
-            font-size: 16px !important;
-            font-weight: unset;
-          }
-        }
-      }
-    }
-
-    .branding {
-      @include padding-right(0);
-
-      .host-tag {
-        position: absolute;
-        left: -9999em;
-        display: inline-block;
-        vertical-align: middle;
-        color: var(--body-color);
-      }
-
-      .brand-logo {
-        display: inline-block;
-        max-width: 100%;
-        max-height: calc((var(--baseline)*2));
-        padding: calc((var(--baseline)/4)) 0;
-        vertical-align: middle;
-      }
-    }
-
-  }
-
-  .wrapper-transcript-feedback {
-    display: none;
-    
-    .transcript-feedback-buttons {
-      display: flex;
-    }
-    .transcript-feedback-btn-wrapper {
-      margin-right: 10px;
-    }
-    .thumbs-up-btn,
-    .thumbs-down-btn {
-      border: none;
-      box-shadow: none;
-      background: transparent;
-    }
-  }
-
-  .google-disclaimer {
-    display: none;
-    margin-top: var(--baseline);
-    @include padding-right(var(--baseline));
-    vertical-align: top;
-  }
-
-  .video-wrapper {
-    @include float(left);
-    @include margin-right(flex-gutter(9));
-
-    width: flex-grid(6, 9);
-    background-color: black;
-    position: relative;
-
-    &:hover {
-      .btn-play {
-        color: theme-color("primary");
-      }
-
-      .btn-play::after {
-        background: theme-color("inverse");
-      }
-    }
-
-    .video-player-pre,
-    .video-player-post {
-      height: 50px;
-      background-color: rgb(17, 16, 16) // UXPL grayscale black;
-    }
-
-    .spinner {
-      @include transform(translate(-50%, -50%));
-
-      position: absolute;
-      z-index: 1;
-      background: rgba(0, 0, 0, 0.7);
-      top: 50%;
-      left: 50%;
-      padding: 30px;
-      border-radius: 25%;
-
-      &::after {
-        @include animation(rotateCW 3s infinite linear);
-
-        content: '';
-        display: block;
-        width: 30px;
-        height: 30px;
-        border: 7px solid white;
-        border-top-color: transparent;
-        border-radius: 100%;
-        position: relative;
-      }
-    }
-
-    .btn-play {
-      @include transform(translate(-50%, -50%));
-
-      position: absolute;
-      z-index: 1;
-      top: 46%;
-      left: 50%;
-      font-size: 4em;
-      cursor: pointer;
-      opacity: 0.1;
-
-      &::after {
-        background: var(--white);
-        position: absolute;
-        width: 50%;
-        height: 50%;
-        content: '';
-        left: 0;
-        top: 0;
-        bottom: 0;
-        right: 0;
-        margin: auto;
-        z-index: -1;
-      }
-    }
-
-    .closed-captions {
-      @include left(5%);
-
-      position: absolute;
-      width: 90%;
-      box-sizing: border-box;
-      top: 70%;
-      text-align: center;
-    }
-
-    .closed-captions.is-visible {
-      max-height: calc((var(--baseline) * 3));
-      border-radius: calc((var(--baseline) / 5));
-      padding: 8px calc((var(--baseline) / 2)) 8px calc((var(--baseline) * 1.5));
-      background: rgba(0, 0, 0, 0.75);
-      color: var(--yellow);
-
-      &::before {
-        position: absolute;
-        display: inline-block;
-        top: 50%;
-
-        @include left(var(--baseline));
-
-        margin-top: -0.6em;
-        font-family: 'FontAwesome';
-        content: "\f142";
-        color: var(--white);
-        opacity: 0.5;
-      }
-
-      &:hover,
-      &.is-dragging {
-        background: rgba(0, 0, 0, 1);
-        cursor: move;
-
-        &::before {
-          opacity: 1;
-        }
-      }
-    }
-
-    .video-player {
-      overflow: hidden;
-      min-height: 158px;
-
-      > div {
-        height: 100%;
-
-        &.hidden {
-          display: none;
-        }
-      }
-
-      .video-error,
-      .video-hls-error {
-        padding: calc((var(--baseline) / 5));
-        background: black;
-        color: white !important; // the pattern library headings shim is more scoped
-      }
-
-      object,
-      iframe,
-      video {
-        @include left(0);
-
-        display: block;
-        border: none;
-        width: 100%;
-      }
-
-      h4 {
-        text-align: center;
-        color: white;
-
-        &.hidden {
-          display: none;
-        }
-      }
-    }
-
-    .video-controls {
-      @include clearfix();
-
-      position: relative;
-      border: 0;
-      background: rgb(40, 44, 46); // UXPL grayscale-cool x-dark
-      color: rgb(240, 243, 245); // UXPL grayscale-cool xx-light
-
-      &:hover,
-      &:focus {
-        ul,
-        div {
-          opacity: 1;
-        }
-      }
-
-      %video-control {
-        @extend %t-strong;
-        @extend %t-title7;
-
-        display: inline-block;
-        vertical-align: middle;
-        margin: 0;
-        border: 0;
-        border-radius: 0;
-        padding: calc((var(--baseline) / 2)) calc((var(--baseline) / 1.5));
-        background: rgb(40, 44, 46); // UXPL grayscale-cool x-dark
-        box-shadow: none;
-        text-shadow: none;
-        color: rgb(207, 216, 220); // UXPL grayscale-cool light
-
-        &:hover,
-        &:focus {
-          background: darken(rgb(40, 44, 46), 7%); // UXPL secondary
-        }
-
-        &:active,
-        &.is-active,
-        &.active {
-          color: rgb(14, 166, 236); // UXPL primary accent
-        }
-      }
-
-      .control {
-        @extend %video-control;
-
-        .icon {
-          width: 1em;
-
-          &.icon-hd {
-            // except when it's text, like with HD
-            // otherwise it's shifted to the right because "HD" is wider than 1em
-            width: auto;
-          }
-        }
-      }
-
-      .slider {
-        @include clearfix();
-        @include transform-origin(bottom left);
-        @include transition(height 0.7s ease-in-out 0s);
-
-        box-sizing: border-box;
-        position: absolute;
-        bottom: 100%;
-        left: 0;
-        right: 0;
-        z-index: 1;
-        height: calc((var(--baseline) / 4));
-        margin-left: 0;
-        border: 1px solid $cool-dark;
-        border-radius: 0;
-        background: $cool-dark;
-
-        .ui-widget-header {
-          background: $secondary-dark;
-          border: 1px solid $secondary-dark;
-          box-shadow: none;
-          top: -1px;
-          left: -1px;
-        }
-
-        .ui-corner-all.slider-range {
-          opacity: 0.3;
-          background-color: #1e91d3;
-        }
-
-        .ui-slider-handle {
-          @extend %ui-fake-link;
-
-          @include transform-origin(bottom left);
-          @include transition(all 0.7s ease-in-out 0s);
-
-          box-sizing: border-box;
-          top: -1px;
-          height: calc((var(--baseline) / 4));
-          width: calc((var(--baseline) / 4));
-          margin-left: calc(-1 * (var(--baseline) / 8)); // center-center causes the control to be beyond the end of the sider
-          border: 1px solid $secondary-base;
-          border-radius: calc((var(--baseline) / 5));
-          padding: 0;
-          background: $secondary-base;
-          box-shadow: none;
-
-          &:focus,
-          &:hover {
-            background-color: $secondary-light;
-            border-color: $secondary-light;
-          }
-        }
-      }
-
-      .vcr {
-        @include float(left);
-
-        list-style: none;
-
-        @include border-right(1px solid rgb(40, 44, 46)); // UXPL grayscale-cool x-dark
-
-        padding: 0;
-
-        @media (max-width: 1120px) {
-          @include margin-right(lh(0.5));
-
-          font-size: em(14);
-        }
-
-        .video_control {
-          &:focus {
-            position: relative;
-          }
-
-          &.skip {
-            white-space: nowrap;
-          }
-        }
-
-        .vidtime {
-          @extend %t-strong;
-          @extend %t-title7;
-
-          @include padding-left(lh(0.75));
-
-          display: inline-block;
-          color: rgb(207, 216, 220); // UXPL grayscale-cool light
-          -webkit-font-smoothing: antialiased;
-
-          @media (max-width: 1120px) {
-            @include padding-left(lh(0.5));
-          }
-        }
-      }
-
-      .secondary-controls {
-        @include float(right);
-        @include border-left(1px dotted rgb(79, 89, 93)); // UXPL grayscale-cool x-dark
-
-        .volume,
-        .add-fullscreen,
-        .grouped-controls,
-        .auto-advance,
-        .quality-control {
-          @include border-left(1px dotted rgb(79, 89, 93)); // UXPL grayscale-cool x-dark
-        }
-
-        .speed-button,
-        .volume > .control,
-        .add-fullscreen,
-        .auto-advance,
-        .quality-control,
-        .toggle-transcript {
-          &:focus {
-            position: relative;
-          }
-        }
-
-        .menu-container {
-          position: relative;
-
-          .menu {
-            @include transition(none);
-
-            @extend %ui-depth1;
-
-            position: absolute;
-            display: none;
-            bottom: calc((var(--baseline) * 2));
-
-            @include right(0); // right-align menus since this whole collection is on the right
-
-            width: 120px;
-            margin: 0;
-            border: none;
-            padding: 0;
-            box-shadow: none;
-            background-color: rgb(40, 44, 46); // UXPL grayscale-cool x-dark
-            list-style: none;
-
-            li {
-              @extend %ui-fake-link;
-
-              color: rgb(231, 236, 238); // UXPL grayscale-cool x-light
-
-              .speed-option,
-              .control-lang {
-                @include text-align(left);
-
-                display: block;
-                width: 100%;
-                border: 0;
-                border-radius: 0;
-                padding: lh(0.5);
-                background: rgb(40, 44, 46); // UXPL grayscale-cool x-dark
-                box-shadow: none;
-                color: rgb(231, 236, 238); // UXPL grayscale-cool x-light
-                overflow: hidden;
-                text-shadow: none;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-
-                &:hover,
-                &:focus {
-                  background-color: rgb(79, 89, 93); // UXPL grayscale-cool dark
-                  color: rgb(252, 252, 252); // UXPL grayscale white
-                }
-              }
-
-              &.is-active {
-                .speed-option,
-                .control-lang {
-                  @include border-left(var(--baseline)/10 solid rgb(14, 166, 236));
-
-                  font-weight: var(--font-bold);
-                  color: rgb(14, 166, 236); // UXPL primary accent
-                }
-              }
-            }
-          }
-
-          &.is-opened {
-            .menu {
-              display: block;
-            }
-          }
-        }
-
-        .speeds,
-        .lang,
-        .grouped-controls {
-          display: inline-block;
-        }
-
-        .speeds {
-          &.is-opened {
-            .control {
-              .icon {
-                @include ltr {
-                  @include transform(rotate(-90deg));
-                }
-
-                @include rtl {
-                  @include transform(rotate(90deg));
-                }
-              }
-            }
-          }
-
-          .speed-button {
-            .label {
-              @include padding(0 calc((var(--baseline)/3)) 0 0);
-
-              font-family: var(--font-family-sans-serif);
-              color: rgb(231, 236, 238); // UXPL grayscale-cool x-light
-
-              @media (max-width: 1120px) {
-                  position: absolute;
-                  clip: rect(1px, 1px, 1px, 1px);
-              }
-            }
-
-            .value {
-              @include padding(0, lh(0.5), 0, 0);
-
-              color: rgb(231, 236, 238); // UXPL grayscale-cool x-light
-              font-weight: bold;
-
-              @media (max-width: 1120px) {
-                padding: 0 lh(0.5);
-              }
-            }
-          }
-        }
-
-        .lang {
-          .language-menu {
-            width: var(--baseline);
-            padding: calc((var(--baseline) / 2)) 0;
-          }
-
-          .control {
-            .icon {
-              @include rtl {
-                @include transform(rotate(-180deg));
-              }
-            }
-          }
-
-          &.is-opened {
-            .control {
-              .icon {
-                @include ltr {
-                  @include transform(rotate(90deg));
-                }
-
-                @include rtl {
-                  @include transform(rotate(90deg));
-                }
-              }
-            }
-          }
-        }
-
-        .volume {
-          display: inline-block;
-          position: relative;
-
-          &.is-opened {
-            .volume-slider-container {
-              display: block;
-              opacity: 1;
-            }
-          }
-
-          &:not(:first-child) > a {
-            @include border-left(none);
-          }
-
-          .volume-slider-container {
-            @include transition(none);
-
-            @extend %ui-depth1;
-
-            display: none;
-            position: absolute;
-            bottom: calc((var(--baseline) * 2));
-
-            @include right(0);
-
-            width: 41px;
-            height: 120px;
-            background-color: rgb(40, 44, 46); // UXPL grayscale-cool x-dark
-
-            .volume-slider {
-              height: 100px;
-              width: calc((var(--baseline) / 4));
-              margin: 14px auto;
-              box-sizing: border-box;
-              border: 1px solid $cool-dark;
-              background: $cool-dark;
-
-              .ui-slider-handle {
-                @extend %ui-fake-link;
-
-                @include transition(height var(--tmg-s2) ease-in-out 0s, width var(--tmg-s2) ease-in-out 0s);
-                @include left(-5px);
-
-                box-sizing: border-box;
-                height: 13px;
-                width: 13px;
-                border: 1px solid $secondary-base;
-                border-radius: calc((var(--baseline) / 5));
-                padding: 0;
-                background: $secondary-base;
-                box-shadow: none;
-
-                &:hover,
-                &:focus {
-                  background: $secondary-light;
-                  border-color: $secondary-light;
-                }
-              }
-
-              .ui-slider-range {
-                background: $secondary-dark;
-                border: 1px solid $secondary-dark;
-                left: -1px;
-                bottom: -1px;
-              }
-            }
-          }
-        }
-
-        .quality-control {
-          font-weight: 700;
-          letter-spacing: -1px;
-
-          &.active {
-            color: rgb(14, 166, 236); // UXPL primary accent
-          }
-
-          &.is-hidden {
-            display: none !important;
-          }
-        }
-
-        .toggle-transcript {
-          &.is-active {
-            color: rgb(14, 166, 236); // UXPL primary accent
-          }
-        }
-
-        .lang {
-          & > .hide-subtitles {
-            @include transition(none);
-          }
-        }
-      }
-    }
-
-    &:hover {
-      .video-controls {
-        .slider {
-          height: calc((var(--baseline) / 1.5));
-
-          .ui-slider-handle {
-            height: calc((var(--baseline) / 1.5));
-            width: calc((var(--baseline) / 1.5));
-          }
-        }
-      }
-    }
-  }
-
-  &.video-fullscreen {
-    .closed-captions {
-      width: 65%;
-    }
-
-    &.closed .closed-captions {
-      width: 90%;
-    }
-  }
-
-  .subtitles {
-    @include float(left);
-
-    overflow: auto;
-    max-height: 460px;
-    width: flex-grid(3, 9);
-    padding: 0;
-    font-size: 14px;
-    visibility: visible;
-
-    a {
-      color: #0074b5;
-    }
-
-    .subtitles-menu {
-      height: 100%;
-      margin: 0;
-      padding: 0 3px;
-      list-style: none;
-
-      li {
-        @extend %ui-fake-link;
-
-        margin-bottom: 8px;
-        border: 0;
-        padding: 0;
-        color: #0074b5; // AA compliant
-        line-height: lh();
-
-        span {
-          display: block;
-        }
-
-        &.current {
-          color: #333;
-          font-weight: 700;
-        }
-
-        &.focused {
-          outline: #000 dotted thin;
-          outline-offset: -1px;
-        }
-
-        &:hover,
-        &:focus {
-          text-decoration: underline;
-        }
-
-        &:empty {
-          margin-bottom: 0;
-        }
-
-        &.spacing:last-of-type {
-          position: relative;
-
-          .transcript-end {
-            position: absolute;
-            bottom: 0;
-          }
-        }
-      }
-    }
-  }
-
-  &.closed {
-    .video-wrapper {
-      width: flex-grid(9, 9);
-      background-color: inherit;
-    }
-
-    .video-wrapper .video-controls.html5 {
-      bottom: 0;
-      left: 0;
-      right: 0;
-      position: absolute;
-      z-index: 1;
-    }
-
-    .video-wrapper .video-player-pre,
-    .video-wrapper .video-player-post {
-      height: 0;
-    }
-
-    .video-wrapper .video-player {
-      h3 {
-        color: black;
-      }
-    }
-
-    .subtitles {
-      @extend .is-hidden;
-    }
-
-    .subtitles.html5 {
-      @extend %ui-depth0;
-
-      background-color: rgba(243, 243, 243, 0.8);
-      height: 100%;
-      position: absolute;
-      right: 0;
-      bottom: 0;
-      top: 0;
-      width: 275px;
-      padding: 0 var(--baseline);
-      display: none;
-    }
-  }
-
-  &.video-fullscreen {
-    @extend %ui-depth4;
-
-    background: rgba(#000, 0.95);
-    border: 0;
-    bottom: 0;
-    height: 100%;
-    left: 0;
-    margin: 0;
-    padding: 0;
-    position: fixed;
-    top: 0;
-    width: 100%;
-    vertical-align: middle;
-    border-radius: 0;
-
-    &.closed {
-      .tc-wrapper {
-        .video-wrapper {
-          width: 100%;
-        }
-      }
-    }
-
-    .video-wrapper .video-player-pre,
-    .video-wrapper .video-player-post {
-      height: 0;
-    }
-
-    .video-wrapper {
-      position: static;
-    }
-
-    .video-wrapper .video-player {
-      h3 {
-        color: white;
-      }
-    }
-
-    .tc-wrapper {
-      @include clearfix();
-
-      width: 100%;
-      height: 100%;
-      position: static;
-
-      .video-wrapper {
-        height: 100%;
-        width: 75%;
-
-        @include margin-right(0);
-
-        vertical-align: middle;
-
-        object,
-        iframe,
-        video {
-          position: absolute;
-          width: auto;
-          height: auto;
-        }
-      }
-
-      .video-controls {
-        @extend %ui-depth4;
-
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        width: 100%;
-      }
-    }
-
-    .subtitles {
-      height: 100%;
-      width: 25%;
-      padding: lh();
-
-      box-sizing: border-box;
-      @include transition(none);
-
-      background: var(--black);
-      visibility: visible;
-
-      li {
-        color: #aaa;
-
-        &.current {
-          color: var(--white);
-        }
-      }
-    }
-  }
-
-  &.is-touch {
-    .tc-wrapper {
-      .video-wrapper {
-        object,
-        iframe,
-        video {
-          width: 100%;
-          height: 100%;
-        }
-      }
-    }
-  }
-
-  .video-pre-roll {
-    @extend %ui-depth3;
-
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-position: 50% 50%;
-    background-repeat: no-repeat;
-    background-size: 100%;
-    background-color: var(--black);
-
-    &.is-html5 {
-      background-size: 15%;
-    }
-
-    .btn-play.btn-pre-roll {
-      padding: var(--baseline);
-      border: none;
-      border-radius: var(--baseline);
-      background: var(--black-t2);
-      box-shadow: none;
-
-      &::after {
-        // the button class, ties to functionality, also uses an icon font
-        // we're overriding it here so we can use our image instead
-        display: none;
-      }
-
-      img {
-        height: calc((var(--baseline) * 4));
-        width: calc((var(--baseline) * 4));
-      }
-
-      &:hover,
-      &:focus {
-        background: var(--blue);
-      }
-    }
-  }
-}
diff --git a/xmodule/assets/word_cloud/_display.scss b/xmodule/assets/word_cloud/_display.scss
deleted file mode 100644
index 4f7320380a12..000000000000
--- a/xmodule/assets/word_cloud/_display.scss
+++ /dev/null
@@ -1,30 +0,0 @@
-@import 'bourbon/bourbon';
-@import 'lms/theme/variables';
-@import 'bootstrap/scss/variables';
-@import 'lms/theme/variables-v1';
-
-.input-cloud {
-  margin: calc((var(--baseline)/4));
-}
-
-.result_cloud_section {
-  display: none;
-  width: 0px;
-  height: 0px;
-}
-
-.result_cloud_section.active {
-  display: block;
-  width: 100%;
-  height: auto;
-  margin-top: 1em;
-    
-  h3 {
-    font-size: 100%;
-  }
-}
-
-.your_words{
-  font-size: 0.85em;
-  display: block;
-}
diff --git a/xmodule/capa_block.py b/xmodule/capa_block.py
index 54ca0cbc312f..c926c65edf1e 100644
--- a/xmodule/capa_block.py
+++ b/xmodule/capa_block.py
@@ -37,7 +37,7 @@
 from xmodule.graders import ShowCorrectness
 from xmodule.raw_block import RawMixin
 from xmodule.util.sandboxing import SandboxService
-from xmodule.util.builtin_assets import add_webpack_js_to_fragment, add_sass_to_fragment
+from xmodule.util.builtin_assets import add_webpack_js_to_fragment, add_css_to_fragment
 from xmodule.x_module import (
     ResourceTemplates,
     XModuleMixin,
@@ -361,7 +361,7 @@ def student_view(self, _context, show_detailed_errors=False):
         else:
             html = self.get_html()
         fragment = Fragment(html)
-        add_sass_to_fragment(fragment, "ProblemBlockDisplay.scss")
+        add_css_to_fragment(fragment, "ProblemBlockDisplay.css")
         add_webpack_js_to_fragment(fragment, 'ProblemBlockDisplay')
         shim_xmodule_js(fragment, 'Problem')
         return fragment
@@ -393,7 +393,7 @@ def studio_view(self, _context):
         fragment = Fragment(
             self.runtime.service(self, 'mako').render_cms_template(self.mako_template, self.get_context())
         )
-        add_sass_to_fragment(fragment, 'ProblemBlockEditor.scss')
+        add_css_to_fragment(fragment, 'ProblemBlockEditor.css')
         add_webpack_js_to_fragment(fragment, 'ProblemBlockEditor')
         shim_xmodule_js(fragment, 'MarkdownEditingDescriptor')
         return fragment
diff --git a/xmodule/html_block.py b/xmodule/html_block.py
index 2db198360107..62949647cee3 100644
--- a/xmodule/html_block.py
+++ b/xmodule/html_block.py
@@ -23,7 +23,7 @@
 from xmodule.html_checker import check_html
 from xmodule.stringify import stringify_children
 from xmodule.util.misc import escape_html_characters
-from xmodule.util.builtin_assets import add_webpack_js_to_fragment, add_sass_to_fragment
+from xmodule.util.builtin_assets import add_webpack_js_to_fragment, add_css_to_fragment
 from xmodule.x_module import (
     ResourceTemplates,
     shim_xmodule_js,
@@ -90,7 +90,7 @@ def student_view(self, _context):
         Return a fragment that contains the html for the student view
         """
         fragment = Fragment(self.get_html())
-        add_sass_to_fragment(fragment, 'HtmlBlockDisplay.scss')
+        add_css_to_fragment(fragment, 'HtmlBlockDisplay.css')
         add_webpack_js_to_fragment(fragment, 'HtmlBlockDisplay')
         shim_xmodule_js(fragment, 'HTMLModule')
         return fragment
@@ -136,7 +136,7 @@ def studio_view(self, _context):
         fragment = Fragment(
             self.runtime.service(self, 'mako').render_cms_template(self.mako_template, self.get_context())
         )
-        add_sass_to_fragment(fragment, 'HtmlBlockEditor.scss')
+        add_css_to_fragment(fragment, 'HtmlBlockEditor.css')
         add_webpack_js_to_fragment(fragment, 'HtmlBlockEditor')
         shim_xmodule_js(fragment, 'HTMLEditingDescriptor')
         return fragment
diff --git a/xmodule/lti_block.py b/xmodule/lti_block.py
index 55f940b381c2..e7c173075b4e 100644
--- a/xmodule/lti_block.py
+++ b/xmodule/lti_block.py
@@ -84,7 +84,7 @@
 )
 from xmodule.lti_2_util import LTI20BlockMixin, LTIError
 from xmodule.raw_block import EmptyDataRawMixin
-from xmodule.util.builtin_assets import add_webpack_js_to_fragment, add_sass_to_fragment
+from xmodule.util.builtin_assets import add_webpack_js_to_fragment, add_css_to_fragment
 from xmodule.xml_block import XmlMixin
 from xmodule.x_module import (
     ResourceTemplates,
@@ -524,7 +524,7 @@ def student_view(self, _context):
         """
         fragment = Fragment()
         fragment.add_content(self.runtime.service(self, 'mako').render_lms_template('lti.html', self.get_context()))
-        add_sass_to_fragment(fragment, 'LTIBlockDisplay.scss')
+        add_css_to_fragment(fragment, 'LTIBlockDisplay.css')
         add_webpack_js_to_fragment(fragment, 'LTIBlockDisplay')
         shim_xmodule_js(fragment, 'LTI')
         return fragment
diff --git a/xmodule/poll_block.py b/xmodule/poll_block.py
index f09889f506e6..a1c9686f42ac 100644
--- a/xmodule/poll_block.py
+++ b/xmodule/poll_block.py
@@ -21,7 +21,7 @@
 from openedx.core.djangolib.markup import Text, HTML
 from xmodule.mako_block import MakoTemplateBlockBase
 from xmodule.stringify import stringify_children
-from xmodule.util.builtin_assets import add_webpack_js_to_fragment, add_sass_to_fragment
+from xmodule.util.builtin_assets import add_webpack_js_to_fragment, add_css_to_fragment
 from xmodule.x_module import (
     ResourceTemplates,
     shim_xmodule_js,
@@ -136,7 +136,7 @@ def student_view(self, _context):
             'configuration_json': self.dump_poll(),
         }
         fragment.add_content(self.runtime.service(self, 'mako').render_lms_template('poll.html', params))
-        add_sass_to_fragment(fragment, 'PollBlockDisplay.scss')
+        add_css_to_fragment(fragment, 'PollBlockDisplay.css')
         add_webpack_js_to_fragment(fragment, 'PollBlockDisplay')
         shim_xmodule_js(fragment, 'Poll')
         return fragment
diff --git a/xmodule/seq_block.py b/xmodule/seq_block.py
index 6d1a8c59adeb..1b94f47d898c 100644
--- a/xmodule/seq_block.py
+++ b/xmodule/seq_block.py
@@ -23,7 +23,7 @@
 from xblock.fields import Boolean, Integer, List, Scope, String
 
 from edx_toggles.toggles import WaffleFlag, SettingDictToggle
-from xmodule.util.builtin_assets import add_webpack_js_to_fragment, add_sass_to_fragment
+from xmodule.util.builtin_assets import add_webpack_js_to_fragment, add_css_to_fragment
 from xmodule.x_module import (
     ResourceTemplates,
     shim_xmodule_js,
@@ -459,7 +459,7 @@ def student_view(self, context):
                 banner_text, special_html = special_html_view
                 if special_html and not masquerading_as_specific_student:
                     fragment = Fragment(special_html)
-                    add_sass_to_fragment(fragment, 'SequenceBlockDisplay.scss')
+                    add_css_to_fragment(fragment, 'SequenceBlockDisplay.css')
                     add_webpack_js_to_fragment(fragment, 'SequenceBlockDisplay')
                     shim_xmodule_js(fragment, 'Sequence')
                     return fragment
@@ -601,7 +601,7 @@ def _student_or_public_view(self, context, prereq_met, prereq_meta_info, banner_
         self._capture_full_seq_item_metrics(children)
         self._capture_current_unit_metrics(children)
 
-        add_sass_to_fragment(fragment, 'SequenceBlockDisplay.scss')
+        add_css_to_fragment(fragment, 'SequenceBlockDisplay.css')
         add_webpack_js_to_fragment(fragment, 'SequenceBlockDisplay')
         shim_xmodule_js(fragment, 'Sequence')
         return fragment
diff --git a/xmodule/template_block.py b/xmodule/template_block.py
index e6e69742cfbf..cdf83a556665 100644
--- a/xmodule/template_block.py
+++ b/xmodule/template_block.py
@@ -9,7 +9,7 @@
 from web_fragments.fragment import Fragment
 from xmodule.editing_block import EditingMixin
 from xmodule.raw_block import RawMixin
-from xmodule.util.builtin_assets import add_webpack_js_to_fragment, add_sass_to_fragment
+from xmodule.util.builtin_assets import add_webpack_js_to_fragment, add_css_to_fragment
 from xmodule.x_module import (
     ResourceTemplates,
     shim_xmodule_js,
@@ -69,7 +69,7 @@ def studio_view(self, _context):
         fragment = Fragment(
             self.runtime.service(self, 'mako').render_cms_template(self.mako_template, self.get_context())
         )
-        add_sass_to_fragment(fragment, 'CustomTagBlockEditor.scss')
+        add_css_to_fragment(fragment, 'CustomTagBlockEditor.css')
         add_webpack_js_to_fragment(fragment, 'CustomTagBlockEditor')
         shim_xmodule_js(fragment, 'XMLEditingDescriptor')
         return fragment
diff --git a/xmodule/tests/test_util_builtin_assets.py b/xmodule/tests/test_util_builtin_assets.py
index bc26bed3d6be..0b3fba3f2bb1 100644
--- a/xmodule/tests/test_util_builtin_assets.py
+++ b/xmodule/tests/test_util_builtin_assets.py
@@ -1,23 +1,22 @@
 """
 Tests for methods defined in builtin_assets.py
 """
-from unittest import TestCase
-from unittest.mock import patch
 
-from django.core.exceptions import ImproperlyConfigured
+from django.conf import settings
+from unittest import TestCase
 from web_fragments.fragment import Fragment, FragmentResource
 
 from xmodule.util import builtin_assets
 
 
-class AddSassToFragmentTests(TestCase):
+class AddCssToFragmentTests(TestCase):
     """
-    Tests for add_sass_to_fragment.
+    Tests for add_css_to_fragment.
 
     We would have liked to also test two additional cases:
-    * When a theme is enabled, and add_sass_to_fragment is called with a
+    * When a theme is enabled, and add_css_to_fragment is called with a
       theme-overriden Sass file, then a URL to themed CSS is added.
-    * When a theme is enabled, but add_sass_to_fragment is called with a Sass
+    * When a theme is enabled, but add_css_to_fragment is called with a Sass
       file that the theme doesn't override, then a URL to the original (unthemed)
       CSS is added.
     Unfortunately, under edx-platform tests, settings.STATICFILES_STORAGE does not
@@ -27,15 +26,15 @@ class AddSassToFragmentTests(TestCase):
     def test_absolute_path_raises_value_error(self):
         fragment = Fragment()
         with self.assertRaises(ValueError):
-            builtin_assets.add_sass_to_fragment(
+            builtin_assets.add_css_to_fragment(
                 fragment,
-                "/openedx/edx-platform/xmodule/assets/ProblemBlockDisplay.scss",
+                "/openedx/edx-platform/xmodule/assets/ProblemBlockDisplay.css",
             )
 
     def test_not_scss_raises_value_error(self):
         fragment = Fragment()
         with self.assertRaises(ValueError):
-            builtin_assets.add_sass_to_fragment(
+            builtin_assets.add_css_to_fragment(
                 fragment,
                 "vertical/public/js/vertical_student_view.js"
             )
@@ -43,26 +42,17 @@ def test_not_scss_raises_value_error(self):
     def test_misspelled_path_raises_not_found(self):
         fragment = Fragment()
         with self.assertRaises(FileNotFoundError):
-            builtin_assets.add_sass_to_fragment(
+            builtin_assets.add_css_to_fragment(
                 fragment,
-                "ProblemBlockDisplayyyy.scss",
+                "ProblemBlockDisplayyyy.css",
             )
 
-    def test_static_file_missing_raises_improperly_configured(self):
-        fragment = Fragment()
-        with patch.object(builtin_assets, 'get_static_file_url', lambda _path: None):
-            with self.assertRaises(ImproperlyConfigured):
-                builtin_assets.add_sass_to_fragment(
-                    fragment,
-                    "ProblemBlockDisplay.scss",
-                )
-
     def test_happy_path(self):
         fragment = Fragment()
-        builtin_assets.add_sass_to_fragment(fragment, "ProblemBlockDisplay.scss")
+        builtin_assets.add_css_to_fragment(fragment, "ProblemBlockDisplay.css")
         assert fragment.resources[0] == FragmentResource(
             kind='url',
-            data='/static/css/ProblemBlockDisplay.css',
+            data=f'{settings.REPO_ROOT}/xmodule/assets/ProblemBlockDisplay.css',
             mimetype='text/css',
             placement='head',
         )
diff --git a/xmodule/util/builtin_assets.py b/xmodule/util/builtin_assets.py
index aaedc44cc649..b7fd497072a3 100644
--- a/xmodule/util/builtin_assets.py
+++ b/xmodule/util/builtin_assets.py
@@ -7,42 +7,26 @@
 
 import webpack_loader
 from django.conf import settings
-from django.core.exceptions import ImproperlyConfigured
 
-from openedx.core.djangoapps.theming.helpers_static import get_static_file_url
 
-
-def add_sass_to_fragment(fragment, sass_relative_path):
+def add_css_to_fragment(fragment, css_relative_path):
     """
-    Given a Sass path relative to xmodule/assets, add a compiled CSS URL to the fragment.
+    Given a css path relative to xmodule/assets, add a compiled CSS URL to the fragment.
 
     Raises:
-    * ValueError if {sass_relative_path} is absolute or does not end in '.scss'.
-    * FileNotFoundError if edx-platform/xmodule/assets/{sass_relative_path} is missing.
-    * ImproperlyConfigured if the lookup of the static CSS URL fails. This could happen
-      if Sass wasn't compiled, CSS wasn't collected, or the staticfiles app is misconfigured.
-
-    Notes:
-    * This function is theme-aware. That is: If a theme is enabled which provides a compiled
-      CSS file of the same name, then that CSS file will be used instead.
+    * ValueError if {css_relative_path} is absolute or does not end in '.css'.
+    * FileNotFoundError if edx-platform/xmodule/assets/{css_relative_path} is missing.
     """
-    if not isinstance(sass_relative_path, Path):
-        sass_relative_path = Path(sass_relative_path)
-    if sass_relative_path.is_absolute():
-        raise ValueError(f"sass_relative_path should be relative; is absolute: {sass_relative_path}")
-    if sass_relative_path.suffix != '.scss':
-        raise ValueError(f"sass_relative_path should be .scss file; is: {sass_relative_path}")
-    sass_absolute_path = Path(settings.REPO_ROOT) / "xmodule" / "assets" / sass_relative_path
-    if not sass_absolute_path.is_file():
-        raise FileNotFoundError(f"Sass not found: {sass_absolute_path}")
-    css_static_path = Path('css') / sass_relative_path.with_suffix('.css')
-    css_url = get_static_file_url(str(css_static_path))  # get_static_file_url is theme-aware.
-    if not css_url:
-        raise ImproperlyConfigured(
-            f"Did not find CSS file {css_static_path} (compiled from {sass_absolute_path}) "
-            f"in staticfiles storage. Perhaps it wasn't collected?"
-        )
-    fragment.add_css_url(css_url)
+    if not isinstance(css_relative_path, Path):
+        css_relative_path = Path(css_relative_path)
+    if css_relative_path.is_absolute():
+        raise ValueError(f"css_file_name should be relative; is absolute: {css_relative_path}")
+    if css_relative_path.suffix != '.css':
+        raise ValueError(f"css_file_name should be .css file; is: {css_relative_path}")
+    css_absolute_path = Path(settings.REPO_ROOT) / "xmodule" / "assets" / css_relative_path
+    if not css_absolute_path.is_file():
+        raise FileNotFoundError(f"css file not found: {css_absolute_path}")
+    fragment.add_css_url(str(css_absolute_path))
 
 
 def add_webpack_js_to_fragment(fragment, bundle_name):
diff --git a/xmodule/video_block/video_block.py b/xmodule/video_block/video_block.py
index b4fddb63fa7a..46cdcb590102 100644
--- a/xmodule/video_block/video_block.py
+++ b/xmodule/video_block/video_block.py
@@ -48,7 +48,7 @@
 from xmodule.modulestore.inheritance import InheritanceKeyValueStore, own_metadata
 from xmodule.raw_block import EmptyDataRawMixin
 from xmodule.validation import StudioValidation, StudioValidationMessage
-from xmodule.util.builtin_assets import add_webpack_js_to_fragment, add_sass_to_fragment
+from xmodule.util.builtin_assets import add_webpack_js_to_fragment, add_css_to_fragment
 from xmodule.video_block import manage_video_subtitles_save
 from xmodule.x_module import (
     PUBLIC_VIEW, STUDENT_VIEW,
@@ -242,7 +242,7 @@ def student_view(self, context):
         Return the student view.
         """
         fragment = Fragment(self.get_html(context=context))
-        add_sass_to_fragment(fragment, 'VideoBlockDisplay.scss')
+        add_css_to_fragment(fragment, 'VideoBlockDisplay.css')
         add_webpack_js_to_fragment(fragment, 'VideoBlockDisplay')
         shim_xmodule_js(fragment, 'Video')
         return fragment
@@ -260,7 +260,7 @@ def studio_view(self, _context):
         fragment = Fragment(
             self.runtime.service(self, 'mako').render_cms_template(self.mako_template, self.get_context())
         )
-        add_sass_to_fragment(fragment, 'VideoBlockEditor.scss')
+        add_css_to_fragment(fragment, 'VideoBlockEditor.css')
         add_webpack_js_to_fragment(fragment, 'VideoBlockEditor')
         shim_xmodule_js(fragment, 'TabsEditingDescriptor')
         return fragment
@@ -276,7 +276,7 @@ def public_view(self, context):
             return self.student_view(context)
 
         fragment = Fragment(self.get_html(view=PUBLIC_VIEW, context=context))
-        add_sass_to_fragment(fragment, 'VideoBlockDisplay.scss')
+        add_css_to_fragment(fragment, 'VideoBlockDisplay.css')
         add_webpack_js_to_fragment(fragment, 'VideoBlockDisplay')
         shim_xmodule_js(fragment, 'Video')
         return fragment
diff --git a/xmodule/word_cloud_block.py b/xmodule/word_cloud_block.py
index 26a2c38c5cfc..d678f2a9a9f5 100644
--- a/xmodule/word_cloud_block.py
+++ b/xmodule/word_cloud_block.py
@@ -15,7 +15,7 @@
 from xblock.fields import Boolean, Dict, Integer, List, Scope, String
 from xmodule.editing_block import EditingMixin
 from xmodule.raw_block import EmptyDataRawMixin
-from xmodule.util.builtin_assets import add_webpack_js_to_fragment, add_sass_to_fragment
+from xmodule.util.builtin_assets import add_webpack_js_to_fragment, add_css_to_fragment
 from xmodule.xml_block import XmlMixin
 from xmodule.x_module import (
     ResourceTemplates,
@@ -262,7 +262,7 @@ def student_view(self, context):  # lint-amnesty, pylint: disable=unused-argumen
             'num_inputs': self.num_inputs,
             'submitted': self.submitted,
         }))
-        add_sass_to_fragment(fragment, 'WordCloudBlockDisplay.scss')
+        add_css_to_fragment(fragment, 'WordCloudBlockDisplay.css')
         add_webpack_js_to_fragment(fragment, 'WordCloudBlockDisplay')
         shim_xmodule_js(fragment, 'WordCloud')