From 4c6396bf1e96270e5961013bf991743e44bea4d4 Mon Sep 17 00:00:00 2001
From: Roy Johnson <roy.e.johnson@rice.edu>
Date: Thu, 25 Jul 2024 13:58:47 -0500
Subject: [PATCH] Group checkboxes in dropdowns (#2207)

* Group checkboxes in dropdowns

* Use list for Column

* Prevent checkbox shrinking

* Update snapshots

---------

Co-authored-by: staxly[bot] <35789409+staxly[bot]@users.noreply.github.com>
---
 src/app/components/Checkbox.tsx               |    1 +
 .../components/popUp/ChapterFilter.tsx        |   15 +-
 .../content/components/popUp/ColorFilter.tsx  |   42 +-
 .../__snapshots__/ChapterFilter.spec.tsx.snap |  715 +++++-----
 .../__snapshots__/ColorFilter.spec.tsx.snap   |  763 ++++++-----
 .../__snapshots__/Filters.spec.tsx.snap       |  835 ++++++------
 .../__snapshots__/Filters.spec.tsx.snap       |  404 +++---
 .../__snapshots__/Filters.spec.tsx.snap       | 1189 +++++++++--------
 8 files changed, 2066 insertions(+), 1898 deletions(-)

diff --git a/src/app/components/Checkbox.tsx b/src/app/components/Checkbox.tsx
index dd4cbb8ef5..9887100b55 100644
--- a/src/app/components/Checkbox.tsx
+++ b/src/app/components/Checkbox.tsx
@@ -27,6 +27,7 @@ const CustomCheckbox = styled(
   display: flex;
   justify-content: center;
   align-items: center;
+  flex-shrink: 0;
 
   input:not(:checked) + & {
     border: 1px solid ${theme.color.primary.gray.darker};
diff --git a/src/app/content/components/popUp/ChapterFilter.tsx b/src/app/content/components/popUp/ChapterFilter.tsx
index a6cedf622c..1c39fb491b 100644
--- a/src/app/content/components/popUp/ChapterFilter.tsx
+++ b/src/app/content/components/popUp/ChapterFilter.tsx
@@ -24,10 +24,13 @@ const Row = styled.div`
 `;
 
 // tslint:disable-next-line:variable-name
-const Column = styled.div`
+const Column = styled.ul`
   display: flex;
   flex-direction: column;
   overflow-x: hidden;
+  list-style: none;
+  margin: 0;
+  padding: 0;
 `;
 
 // tslint:disable-next-line:variable-name
@@ -119,11 +122,11 @@ const ChapterFilter = (props: ChapterFilterProps) => {
       )
       : null}
     <Row>
-      {sectionChunks.map((sectionChunk, index) => <Column key={index}>
+      {sectionChunks.map((sectionChunk, index) => <Column key={index} aria-label='Filter by chapters'>
         {sectionChunk.map((location) => {
           const { section, children } = location;
           if (!children) {
-            return <ChapterFilterItem
+            return <li><ChapterFilterItem
               key={section.id}
               selected={props.selectedLocationFilters.has(section.id)}
               disabled={props.disabled || !props.locationFiltersWithContent.has(section.id)}
@@ -132,9 +135,9 @@ const ChapterFilter = (props: ChapterFilterProps) => {
               onChange={() => handleChange(section)}
               ariaLabel={getAriaLabel(section)}
               dataAnalyticsLabel={`Filter PQ by ${splitTitleParts(section.title).join(' ')}`}
-            />;
+            /></li>;
           } else {
-            return <StyledDetails key={section.id} open={openChapterId === section.id}>
+            return <li><StyledDetails key={section.id} open={openChapterId === section.id}>
               <StyledSummary onClick={(ev: React.MouseEvent) => {
                 ev.preventDefault();
                 setOpenChapterId((currentId) => currentId !== section.id ? section.id : null);
@@ -156,7 +159,7 @@ const ChapterFilter = (props: ChapterFilterProps) => {
                   />
                 ))}
               </StyledChapterFilterItemWrapper>
-            </StyledDetails>;
+            </StyledDetails></li>;
           }
         })}
       </Column>)}
diff --git a/src/app/content/components/popUp/ColorFilter.tsx b/src/app/content/components/popUp/ColorFilter.tsx
index 66a89569cb..e24814b6ec 100644
--- a/src/app/content/components/popUp/ColorFilter.tsx
+++ b/src/app/content/components/popUp/ColorFilter.tsx
@@ -5,7 +5,7 @@ import styled, { css } from 'styled-components/macro';
 import AllOrNone from '../../../components/AllOrNone';
 import Checkbox from '../../../components/Checkbox';
 import { textStyle } from '../../../components/Typography/base';
-import theme from '../../../theme';
+import theme, { hiddenButAccessible } from '../../../theme';
 import { highlightStyles } from '../../constants';
 import ColorIndicator from '../../highlights/components/ColorIndicator';
 import { filters, mobileMarginSides } from '../../styles/PopupConstants';
@@ -19,6 +19,17 @@ const ColorLabel = styled.span`
   white-space: nowrap;
 `;
 
+// tslint:disable-next-line: variable-name
+const Fieldset = styled.fieldset`
+  padding: 0;
+  border: none;
+  margin: 0;
+
+  legend {
+    ${hiddenButAccessible}
+  }
+`;
+
 export interface ColorFilterProps {
   className?: string;
   disabled?: boolean;
@@ -60,19 +71,22 @@ const ColorFilter = ({
       onAll={() => setSelectedColors({ remove: [], new: Array.from(colorFiltersWithContent) })}
       disabled={disabled}
     />
-    {styles.map((style) => <Checkbox
-      key={style.label}
-      checked={selectedColorFilters.has(style.label)}
-      disabled={disabled || !colorFiltersWithContent.has(style.label)}
-      onChange={() => handleChange(style.label)}
-    >
-      <ColorIndicator style={style} size='small'/>
-      <ColorLabel>
-        <FormattedMessage id={labelKey(style.label)}>
-          {(msg) => msg}
-        </FormattedMessage>
-      </ColorLabel>
-    </Checkbox>)}
+    <Fieldset>
+      <legend>Filter by colors</legend>
+      {styles.map((style) => <Checkbox
+        key={style.label}
+        checked={selectedColorFilters.has(style.label)}
+        disabled={disabled || !colorFiltersWithContent.has(style.label)}
+        onChange={() => handleChange(style.label)}
+      >
+        <ColorIndicator style={style} size='small'/>
+        <ColorLabel>
+          <FormattedMessage id={labelKey(style.label)}>
+            {(msg) => msg}
+          </FormattedMessage>
+        </ColorLabel>
+      </Checkbox>)}
+    </Fieldset>
   </div>;
 };
 
diff --git a/src/app/content/components/popUp/__snapshots__/ChapterFilter.spec.tsx.snap b/src/app/content/components/popUp/__snapshots__/ChapterFilter.spec.tsx.snap
index afa828b6ed..e2739f672b 100644
--- a/src/app/content/components/popUp/__snapshots__/ChapterFilter.spec.tsx.snap
+++ b/src/app/content/components/popUp/__snapshots__/ChapterFilter.spec.tsx.snap
@@ -75,6 +75,9 @@ exports[`ChapterFilter matches snapshot 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
 }
 
 input:not(:checked) + .c10 {
@@ -197,6 +200,9 @@ input:checked + .c10 .c12 {
   -ms-flex-direction: column;
   flex-direction: column;
   overflow-x: hidden;
+  list-style: none;
+  margin: 0;
+  padding: 0;
 }
 
 .c14 {
@@ -293,395 +299,418 @@ input:checked + .c10 .c12 {
   <div
     className="c5"
   >
-    <div
+    <ul
+      aria-label="Filter by chapters"
       className="c6"
     >
-      <label
-        className="c7 c8"
-      >
-        <input
-          checked={true}
-          disabled={false}
-          onChange={[Function]}
-          type="checkbox"
-        />
-        <span
-          className="c9 c10"
+      <li>
+        <label
+          className="c7 c8"
         >
-          <svg
-            aria-hidden="true"
-            className="c11 c12 c13"
-            fill="currentColor"
-            focusable="false"
-            viewBox="0 0 512 512"
-            xmlns="http://www.w3.org/2000/svg"
+          <input
+            checked={true}
+            disabled={false}
+            onChange={[Function]}
+            type="checkbox"
+          />
+          <span
+            className="c9 c10"
           >
-            <path
-              d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+            <svg
+              aria-hidden="true"
+              className="c11 c12 c13"
               fill="currentColor"
-            />
-          </svg>
-        </span>
-        <span
-          className="c14"
-          dangerouslySetInnerHTML={
-            Object {
-              "__html": "<span class=\\"os-text\\">Test Page 1</span>",
+              focusable="false"
+              viewBox="0 0 512 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+                fill="currentColor"
+              />
+            </svg>
+          </span>
+          <span
+            className="c14"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<span class=\\"os-text\\">Test Page 1</span>",
+              }
             }
-          }
-        />
-      </label>
-      <label
-        className="c7 c15"
-      >
-        <input
-          checked={false}
-          disabled={true}
-          onChange={[Function]}
-          type="checkbox"
-        />
-        <span
-          className="c9 c10"
+          />
+        </label>
+      </li>
+      <li>
+        <label
+          className="c7 c15"
         >
-          <svg
-            aria-hidden="true"
-            className="c11 c12 c13"
-            fill="currentColor"
-            focusable="false"
-            viewBox="0 0 512 512"
-            xmlns="http://www.w3.org/2000/svg"
+          <input
+            checked={false}
+            disabled={true}
+            onChange={[Function]}
+            type="checkbox"
+          />
+          <span
+            className="c9 c10"
           >
-            <path
-              d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+            <svg
+              aria-hidden="true"
+              className="c11 c12 c13"
               fill="currentColor"
-            />
-          </svg>
-        </span>
-        <span
-          className="c14"
-          dangerouslySetInnerHTML={
-            Object {
-              "__html": "<span class=\\"os-number\\">1</span><span class=\\"os-divider\\"> </span><span class=\\"os-text\\">Test Chapter 1</span>",
+              focusable="false"
+              viewBox="0 0 512 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+                fill="currentColor"
+              />
+            </svg>
+          </span>
+          <span
+            className="c14"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<span class=\\"os-number\\">1</span><span class=\\"os-divider\\"> </span><span class=\\"os-text\\">Test Chapter 1</span>",
+              }
             }
-          }
-        />
-      </label>
-      <label
-        className="c7 c15"
-      >
-        <input
-          checked={false}
-          disabled={true}
-          onChange={[Function]}
-          type="checkbox"
-        />
-        <span
-          className="c9 c10"
+          />
+        </label>
+      </li>
+      <li>
+        <label
+          className="c7 c15"
         >
-          <svg
-            aria-hidden="true"
-            className="c11 c12 c13"
-            fill="currentColor"
-            focusable="false"
-            viewBox="0 0 512 512"
-            xmlns="http://www.w3.org/2000/svg"
+          <input
+            checked={false}
+            disabled={true}
+            onChange={[Function]}
+            type="checkbox"
+          />
+          <span
+            className="c9 c10"
           >
-            <path
-              d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+            <svg
+              aria-hidden="true"
+              className="c11 c12 c13"
               fill="currentColor"
-            />
-          </svg>
-        </span>
-        <span
-          className="c14"
-          dangerouslySetInnerHTML={
-            Object {
-              "__html": "<span class=\\"os-number\\">1</span><span class=\\"os-divider\\"> </span><span class=\\"os-text\\">Test Chapter 1.1</span>",
+              focusable="false"
+              viewBox="0 0 512 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+                fill="currentColor"
+              />
+            </svg>
+          </span>
+          <span
+            className="c14"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<span class=\\"os-number\\">1</span><span class=\\"os-divider\\"> </span><span class=\\"os-text\\">Test Chapter 1.1</span>",
+              }
             }
-          }
-        />
-      </label>
-      <label
-        className="c7 c15"
-      >
-        <input
-          checked={false}
-          disabled={true}
-          onChange={[Function]}
-          type="checkbox"
-        />
-        <span
-          className="c9 c10"
+          />
+        </label>
+      </li>
+      <li>
+        <label
+          className="c7 c15"
         >
-          <svg
-            aria-hidden="true"
-            className="c11 c12 c13"
-            fill="currentColor"
-            focusable="false"
-            viewBox="0 0 512 512"
-            xmlns="http://www.w3.org/2000/svg"
+          <input
+            checked={false}
+            disabled={true}
+            onChange={[Function]}
+            type="checkbox"
+          />
+          <span
+            className="c9 c10"
           >
-            <path
-              d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+            <svg
+              aria-hidden="true"
+              className="c11 c12 c13"
               fill="currentColor"
-            />
-          </svg>
-        </span>
-        <span
-          className="c14"
-          dangerouslySetInnerHTML={
-            Object {
-              "__html": "<span class=\\"os-number\\">2</span><span class=\\"os-divider\\"> </span><span class=\\"os-text\\">Test Chapter 2</span>",
+              focusable="false"
+              viewBox="0 0 512 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+                fill="currentColor"
+              />
+            </svg>
+          </span>
+          <span
+            className="c14"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<span class=\\"os-number\\">2</span><span class=\\"os-divider\\"> </span><span class=\\"os-text\\">Test Chapter 2</span>",
+              }
             }
-          }
-        />
-      </label>
-      <label
-        className="c7 c15"
-      >
-        <input
-          checked={false}
-          disabled={true}
-          onChange={[Function]}
-          type="checkbox"
-        />
-        <span
-          className="c9 c10"
+          />
+        </label>
+      </li>
+      <li>
+        <label
+          className="c7 c15"
         >
-          <svg
-            aria-hidden="true"
-            className="c11 c12 c13"
-            fill="currentColor"
-            focusable="false"
-            viewBox="0 0 512 512"
-            xmlns="http://www.w3.org/2000/svg"
+          <input
+            checked={false}
+            disabled={true}
+            onChange={[Function]}
+            type="checkbox"
+          />
+          <span
+            className="c9 c10"
           >
-            <path
-              d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+            <svg
+              aria-hidden="true"
+              className="c11 c12 c13"
               fill="currentColor"
-            />
-          </svg>
-        </span>
-        <span
-          className="c14"
-          dangerouslySetInnerHTML={
-            Object {
-              "__html": "<span class=\\"os-number\\">3</span><span class=\\"os-divider\\"> </span><span class=\\"os-text\\">Test Chapter 3</span>",
+              focusable="false"
+              viewBox="0 0 512 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+                fill="currentColor"
+              />
+            </svg>
+          </span>
+          <span
+            className="c14"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<span class=\\"os-number\\">3</span><span class=\\"os-divider\\"> </span><span class=\\"os-text\\">Test Chapter 3</span>",
+              }
             }
-          }
-        />
-      </label>
-      <label
-        className="c7 c15"
-      >
-        <input
-          checked={false}
-          disabled={true}
-          onChange={[Function]}
-          type="checkbox"
-        />
-        <span
-          className="c9 c10"
+          />
+        </label>
+      </li>
+      <li>
+        <label
+          className="c7 c15"
         >
-          <svg
-            aria-hidden="true"
-            className="c11 c12 c13"
-            fill="currentColor"
-            focusable="false"
-            viewBox="0 0 512 512"
-            xmlns="http://www.w3.org/2000/svg"
+          <input
+            checked={false}
+            disabled={true}
+            onChange={[Function]}
+            type="checkbox"
+          />
+          <span
+            className="c9 c10"
           >
-            <path
-              d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+            <svg
+              aria-hidden="true"
+              className="c11 c12 c13"
               fill="currentColor"
-            />
-          </svg>
-        </span>
-        <span
-          className="c14"
-          dangerouslySetInnerHTML={
-            Object {
-              "__html": "<span class=\\"os-number\\">4</span><span class=\\"os-divider\\"> </span><span class=\\"os-text\\">Test Chapter 4</span>",
+              focusable="false"
+              viewBox="0 0 512 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+                fill="currentColor"
+              />
+            </svg>
+          </span>
+          <span
+            className="c14"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<span class=\\"os-number\\">4</span><span class=\\"os-divider\\"> </span><span class=\\"os-text\\">Test Chapter 4</span>",
+              }
             }
-          }
-        />
-      </label>
-      <label
-        className="c7 c15"
-      >
-        <input
-          checked={false}
-          disabled={true}
-          onChange={[Function]}
-          type="checkbox"
-        />
-        <span
-          className="c9 c10"
+          />
+        </label>
+      </li>
+      <li>
+        <label
+          className="c7 c15"
         >
-          <svg
-            aria-hidden="true"
-            className="c11 c12 c13"
-            fill="currentColor"
-            focusable="false"
-            viewBox="0 0 512 512"
-            xmlns="http://www.w3.org/2000/svg"
+          <input
+            checked={false}
+            disabled={true}
+            onChange={[Function]}
+            type="checkbox"
+          />
+          <span
+            className="c9 c10"
           >
-            <path
-              d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+            <svg
+              aria-hidden="true"
+              className="c11 c12 c13"
               fill="currentColor"
-            />
-          </svg>
-        </span>
-        <span
-          className="c14"
-          dangerouslySetInnerHTML={
-            Object {
-              "__html": "<span class=\\"os-number\\">10</span><span class=\\"os-divider\\"> </span><span class=\\"os-text\\">Test Chapter 5</span>",
+              focusable="false"
+              viewBox="0 0 512 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+                fill="currentColor"
+              />
+            </svg>
+          </span>
+          <span
+            className="c14"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<span class=\\"os-number\\">10</span><span class=\\"os-divider\\"> </span><span class=\\"os-text\\">Test Chapter 5</span>",
+              }
             }
-          }
-        />
-      </label>
-      <label
-        className="c7 c15"
-      >
-        <input
-          checked={false}
-          disabled={true}
-          onChange={[Function]}
-          type="checkbox"
-        />
-        <span
-          className="c9 c10"
+          />
+        </label>
+      </li>
+      <li>
+        <label
+          className="c7 c15"
         >
-          <svg
-            aria-hidden="true"
-            className="c11 c12 c13"
-            fill="currentColor"
-            focusable="false"
-            viewBox="0 0 512 512"
-            xmlns="http://www.w3.org/2000/svg"
+          <input
+            checked={false}
+            disabled={true}
+            onChange={[Function]}
+            type="checkbox"
+          />
+          <span
+            className="c9 c10"
           >
-            <path
-              d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+            <svg
+              aria-hidden="true"
+              className="c11 c12 c13"
               fill="currentColor"
-            />
-          </svg>
-        </span>
-        <span
-          className="c14"
-          dangerouslySetInnerHTML={
-            Object {
-              "__html": "<span class=\\"os-number\\">12</span><span class=\\"os-divider\\"> </span><span class=\\"os-text\\">Test Chapter 6</span>",
+              focusable="false"
+              viewBox="0 0 512 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+                fill="currentColor"
+              />
+            </svg>
+          </span>
+          <span
+            className="c14"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<span class=\\"os-number\\">12</span><span class=\\"os-divider\\"> </span><span class=\\"os-text\\">Test Chapter 6</span>",
+              }
             }
-          }
-        />
-      </label>
-      <label
-        className="c7 c15"
-      >
-        <input
-          checked={false}
-          disabled={true}
-          onChange={[Function]}
-          type="checkbox"
-        />
-        <span
-          className="c9 c10"
+          />
+        </label>
+      </li>
+      <li>
+        <label
+          className="c7 c15"
         >
-          <svg
-            aria-hidden="true"
-            className="c11 c12 c13"
-            fill="currentColor"
-            focusable="false"
-            viewBox="0 0 512 512"
-            xmlns="http://www.w3.org/2000/svg"
+          <input
+            checked={false}
+            disabled={true}
+            onChange={[Function]}
+            type="checkbox"
+          />
+          <span
+            className="c9 c10"
           >
-            <path
-              d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+            <svg
+              aria-hidden="true"
+              className="c11 c12 c13"
               fill="currentColor"
-            />
-          </svg>
-        </span>
-        <span
-          className="c14"
-          dangerouslySetInnerHTML={
-            Object {
-              "__html": "<span class=\\"os-number\\">A</span><span class=\\"os-divider\\"> | </span><span class=\\"os-text\\">Atomic Masses</span>",
+              focusable="false"
+              viewBox="0 0 512 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+                fill="currentColor"
+              />
+            </svg>
+          </span>
+          <span
+            className="c14"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<span class=\\"os-number\\">A</span><span class=\\"os-divider\\"> | </span><span class=\\"os-text\\">Atomic Masses</span>",
+              }
             }
-          }
-        />
-      </label>
-      <label
-        className="c7 c15"
-      >
-        <input
-          checked={false}
-          disabled={true}
-          onChange={[Function]}
-          type="checkbox"
-        />
-        <span
-          className="c9 c10"
+          />
+        </label>
+      </li>
+      <li>
+        <label
+          className="c7 c15"
         >
-          <svg
-            aria-hidden="true"
-            className="c11 c12 c13"
-            fill="currentColor"
-            focusable="false"
-            viewBox="0 0 512 512"
-            xmlns="http://www.w3.org/2000/svg"
+          <input
+            checked={false}
+            disabled={true}
+            onChange={[Function]}
+            type="checkbox"
+          />
+          <span
+            className="c9 c10"
           >
-            <path
-              d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+            <svg
+              aria-hidden="true"
+              className="c11 c12 c13"
               fill="currentColor"
-            />
-          </svg>
-        </span>
-        <span
-          className="c14"
-          dangerouslySetInnerHTML={
-            Object {
-              "__html": "<span class=\\"os-number\\">D</span><span class=\\"os-divider\\"> | </span><span class=\\"os-text\\">Glossary of Key Symbols and Notation</span>",
+              focusable="false"
+              viewBox="0 0 512 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+                fill="currentColor"
+              />
+            </svg>
+          </span>
+          <span
+            className="c14"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<span class=\\"os-number\\">D</span><span class=\\"os-divider\\"> | </span><span class=\\"os-text\\">Glossary of Key Symbols and Notation</span>",
+              }
             }
-          }
-        />
-      </label>
-      <label
-        className="c7 c15"
-      >
-        <input
-          checked={false}
-          disabled={true}
-          onChange={[Function]}
-          type="checkbox"
-        />
-        <span
-          className="c9 c10"
+          />
+        </label>
+      </li>
+      <li>
+        <label
+          className="c7 c15"
         >
-          <svg
-            aria-hidden="true"
-            className="c11 c12 c13"
-            fill="currentColor"
-            focusable="false"
-            viewBox="0 0 512 512"
-            xmlns="http://www.w3.org/2000/svg"
+          <input
+            checked={false}
+            disabled={true}
+            onChange={[Function]}
+            type="checkbox"
+          />
+          <span
+            className="c9 c10"
           >
-            <path
-              d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+            <svg
+              aria-hidden="true"
+              className="c11 c12 c13"
               fill="currentColor"
-            />
-          </svg>
-        </span>
-        <span
-          className="c14"
-          dangerouslySetInnerHTML={
-            Object {
-              "__html": "<span class=\\"os-text\\">Test Page for Generic Styles</span>",
+              focusable="false"
+              viewBox="0 0 512 512"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+                fill="currentColor"
+              />
+            </svg>
+          </span>
+          <span
+            className="c14"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<span class=\\"os-text\\">Test Page for Generic Styles</span>",
+              }
             }
-          }
-        />
-      </label>
-    </div>
+          />
+        </label>
+      </li>
+    </ul>
   </div>
 </div>
 `;
diff --git a/src/app/content/components/popUp/__snapshots__/ColorFilter.spec.tsx.snap b/src/app/content/components/popUp/__snapshots__/ColorFilter.spec.tsx.snap
index 25f7163a45..e0de2d104d 100644
--- a/src/app/content/components/popUp/__snapshots__/ColorFilter.spec.tsx.snap
+++ b/src/app/content/components/popUp/__snapshots__/ColorFilter.spec.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ColorFilter matches snapshot 1`] = `
-.c9 {
+.c10 {
   display: inline-block;
   vertical-align: -.125em;
   overflow: hidden;
@@ -53,14 +53,14 @@ exports[`ColorFilter matches snapshot 1`] = `
   padding: 0 1rem;
 }
 
-.c11 {
+.c12 {
   color: #fff;
   height: 1rem;
   width: 1rem;
   display: none;
 }
 
-.c8 {
+.c9 {
   height: 1.6rem;
   width: 1.6rem;
   display: -webkit-box;
@@ -75,21 +75,24 @@ exports[`ColorFilter matches snapshot 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
 }
 
-input:not(:checked) + .c8 {
+input:not(:checked) + .c9 {
   border: 1px solid #424242;
 }
 
-input:checked + .c8 {
+input:checked + .c9 {
   background-color: #b03808;
 }
 
-input:checked + .c8 .c10 {
+input:checked + .c9 .c11 {
   display: block;
 }
 
-.c6 {
+.c7 {
   cursor: pointer;
   display: -webkit-box;
   display: -webkit-flex;
@@ -104,7 +107,7 @@ input:checked + .c8 .c10 {
   align-items: center;
 }
 
-.c6 input {
+.c7 input {
   position: absolute;
   opacity: 0;
   cursor: pointer;
@@ -112,27 +115,27 @@ input:checked + .c8 .c10 {
   width: 0;
 }
 
-.c6:focus-within {
+.c7:focus-within {
   border-radius: 0.4rem;
   background-color: #f1f1f1;
   outline: 0.2rem auto Highlight;
   outline: 0.2rem auto -webkit-focus-ring-color;
 }
 
-.c6:focus-within .c7 {
+.c7:focus-within .c8 {
   border: 1px solid #b03808;
 }
 
-.c6.focus-within {
+.c7.focus-within {
   border-radius: 0.4rem;
   background-color: #f1f1f1;
 }
 
-.c6.focus-within .c7 {
+.c7.focus-within .c8 {
   border: 1px solid #b03808;
 }
 
-.c22 {
+.c23 {
   cursor: pointer;
   display: -webkit-box;
   display: -webkit-flex;
@@ -150,7 +153,7 @@ input:checked + .c8 .c10 {
   opacity: 0.4;
 }
 
-.c22 input {
+.c23 input {
   position: absolute;
   opacity: 0;
   cursor: pointer;
@@ -158,31 +161,31 @@ input:checked + .c8 .c10 {
   width: 0;
 }
 
-.c22:focus-within {
+.c23:focus-within {
   border-radius: 0.4rem;
   background-color: #f1f1f1;
   outline: 0.2rem auto Highlight;
   outline: 0.2rem auto -webkit-focus-ring-color;
 }
 
-.c22:focus-within .c7 {
+.c23:focus-within .c8 {
   border: 1px solid #b03808;
 }
 
-.c22.focus-within {
+.c23.focus-within {
   border-radius: 0.4rem;
   background-color: #f1f1f1;
 }
 
-.c22.focus-within .c7 {
+.c23.focus-within .c8 {
   border: 1px solid #b03808;
 }
 
-.c15 {
+.c16 {
   display: none;
 }
 
-.c17 {
+.c18 {
   display: none;
   position: absolute;
   height: 2rem;
@@ -197,7 +200,7 @@ input:checked + .c8 .c10 {
   border-radius: 50%;
 }
 
-.c18 {
+.c19 {
   height: 1.4000000000000001rem;
   width: 1.4000000000000001rem;
   background-color: transparent;
@@ -211,7 +214,7 @@ input:checked + .c8 .c10 {
   border: 1px solid #fed200;
 }
 
-.c21 {
+.c22 {
   height: 1.4000000000000001rem;
   width: 1.4000000000000001rem;
   background-color: transparent;
@@ -225,7 +228,7 @@ input:checked + .c8 .c10 {
   border: 1px solid #92d101;
 }
 
-.c24 {
+.c25 {
   height: 1.4000000000000001rem;
   width: 1.4000000000000001rem;
   background-color: transparent;
@@ -239,7 +242,7 @@ input:checked + .c8 .c10 {
   border: 1px solid #00c3ed;
 }
 
-.c26 {
+.c27 {
   height: 1.4000000000000001rem;
   width: 1.4000000000000001rem;
   background-color: transparent;
@@ -253,7 +256,7 @@ input:checked + .c8 .c10 {
   border: 1px solid #545ec8;
 }
 
-.c28 {
+.c29 {
   height: 1.4000000000000001rem;
   width: 1.4000000000000001rem;
   background-color: transparent;
@@ -267,7 +270,7 @@ input:checked + .c8 .c10 {
   border: 1px solid #de017e;
 }
 
-.c13 {
+.c14 {
   position: relative;
   background-color: #ffff8a;
   border: 1px solid #8f7700;
@@ -289,19 +292,19 @@ input:checked + .c8 .c10 {
   overflow: visible;
 }
 
-.c13 .c14 {
+.c14 .c15 {
   height: 1rem;
   width: 1rem;
 }
 
-.c13 input:focus + .c16 {
+.c14 input:focus + .c17 {
   display: block;
   outline: 0.2rem auto Highlight;
   outline: 0.2rem auto -webkit-focus-ring-color;
   z-index: 1;
 }
 
-.c20 {
+.c21 {
   position: relative;
   background-color: #def99f;
   border: 1px solid #4e6f01;
@@ -323,19 +326,19 @@ input:checked + .c8 .c10 {
   overflow: visible;
 }
 
-.c20 .c14 {
+.c21 .c15 {
   height: 1rem;
   width: 1rem;
 }
 
-.c20 input:focus + .c16 {
+.c21 input:focus + .c17 {
   display: block;
   outline: 0.2rem auto Highlight;
   outline: 0.2rem auto -webkit-focus-ring-color;
   z-index: 1;
 }
 
-.c23 {
+.c24 {
   position: relative;
   background-color: #c8f5ff;
   border: 1px solid #006880;
@@ -357,19 +360,19 @@ input:checked + .c8 .c10 {
   overflow: visible;
 }
 
-.c23 .c14 {
+.c24 .c15 {
   height: 1rem;
   width: 1rem;
 }
 
-.c23 input:focus + .c16 {
+.c24 input:focus + .c17 {
   display: block;
   outline: 0.2rem auto Highlight;
   outline: 0.2rem auto -webkit-focus-ring-color;
   z-index: 1;
 }
 
-.c25 {
+.c26 {
   position: relative;
   background-color: #cbcfff;
   border: 1px solid #141a3e;
@@ -391,19 +394,19 @@ input:checked + .c8 .c10 {
   overflow: visible;
 }
 
-.c25 .c14 {
+.c26 .c15 {
   height: 1rem;
   width: 1rem;
 }
 
-.c25 input:focus + .c16 {
+.c26 input:focus + .c17 {
   display: block;
   outline: 0.2rem auto Highlight;
   outline: 0.2rem auto -webkit-focus-ring-color;
   z-index: 1;
 }
 
-.c27 {
+.c28 {
   position: relative;
   background-color: #ffc5e1;
   border: 1px solid #560131;
@@ -425,19 +428,19 @@ input:checked + .c8 .c10 {
   overflow: visible;
 }
 
-.c27 .c14 {
+.c28 .c15 {
   height: 1rem;
   width: 1rem;
 }
 
-.c27 input:focus + .c16 {
+.c28 input:focus + .c17 {
   display: block;
   outline: 0.2rem auto Highlight;
   outline: 0.2rem auto -webkit-focus-ring-color;
   z-index: 1;
 }
 
-.c19 {
+.c20 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -446,6 +449,25 @@ input:checked + .c8 .c10 {
   white-space: nowrap;
 }
 
+.c5 {
+  padding: 0;
+  border: none;
+  margin: 0;
+}
+
+.c5 legend {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  white-space: nowrap;
+  border: 0;
+}
+
 .c0 {
   background: #fff;
   display: -webkit-box;
@@ -466,12 +488,12 @@ input:checked + .c8 .c10 {
   margin: 0.8rem 0 0.8rem 0.8rem;
 }
 
-.c0 .c5 {
+.c0 .c6 {
   padding: 0.8rem;
   text-transform: capitalize;
 }
 
-.c0 .c12 {
+.c0 .c13 {
   margin: 0 1.6rem 0 1.6rem;
 }
 
@@ -505,370 +527,377 @@ input:checked + .c8 .c10 {
       None
     </button>
   </div>
-  <label
-    className="c5 c6"
+  <fieldset
+    className="c5"
   >
-    <input
-      checked={true}
-      disabled={false}
-      onChange={[Function]}
-      type="checkbox"
-    />
-    <span
-      className="c7 c8"
+    <legend>
+      Filter by colors
+    </legend>
+    <label
+      className="c6 c7"
     >
-      <svg
-        aria-hidden="true"
-        className="c9 c10 c11"
-        fill="currentColor"
-        focusable="false"
-        viewBox="0 0 512 512"
-        xmlns="http://www.w3.org/2000/svg"
+      <input
+        checked={true}
+        disabled={false}
+        onChange={[Function]}
+        type="checkbox"
+      />
+      <span
+        className="c8 c9"
       >
-        <path
-          d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+        <svg
+          aria-hidden="true"
+          className="c10 c11 c12"
           fill="currentColor"
-        />
-      </svg>
-    </span>
-    <div
-      className="c12 c13"
-    >
-      <svg
-        aria-hidden="true"
-        className="c9 c14 c15"
-        fill="currentColor"
-        focusable="false"
-        viewBox="0 0 512 512"
-        xmlns="http://www.w3.org/2000/svg"
+          focusable="false"
+          viewBox="0 0 512 512"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+            fill="currentColor"
+          />
+        </svg>
+      </span>
+      <div
+        className="c13 c14"
       >
-        <path
-          d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+        <svg
+          aria-hidden="true"
+          className="c10 c15 c16"
           fill="currentColor"
+          focusable="false"
+          viewBox="0 0 512 512"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+            fill="currentColor"
+          />
+        </svg>
+        <span
+          className="c17 c18"
+          size="small"
+          style={
+            Object {
+              "focusBorder": "#8f7700",
+              "focused": "#fed200",
+              "label": "yellow",
+              "passive": "#ffff8a",
+            }
+          }
         />
-      </svg>
-      <span
-        className="c16 c17"
-        size="small"
-        style={
-          Object {
-            "focusBorder": "#8f7700",
-            "focused": "#fed200",
-            "label": "yellow",
-            "passive": "#ffff8a",
+        <span
+          className="c19"
+          size="small"
+          style={
+            Object {
+              "focusBorder": "#8f7700",
+              "focused": "#fed200",
+              "label": "yellow",
+              "passive": "#ffff8a",
+            }
           }
-        }
-      />
+        />
+      </div>
       <span
-        className="c18"
-        size="small"
-        style={
-          Object {
-            "focusBorder": "#8f7700",
-            "focused": "#fed200",
-            "label": "yellow",
-            "passive": "#ffff8a",
-          }
-        }
-      />
-    </div>
-    <span
-      className="c19"
-    >
-      yellow
-    </span>
-  </label>
-  <label
-    className="c5 c6"
-  >
-    <input
-      checked={true}
-      disabled={false}
-      onChange={[Function]}
-      type="checkbox"
-    />
-    <span
-      className="c7 c8"
+        className="c20"
+      >
+        yellow
+      </span>
+    </label>
+    <label
+      className="c6 c7"
     >
-      <svg
-        aria-hidden="true"
-        className="c9 c10 c11"
-        fill="currentColor"
-        focusable="false"
-        viewBox="0 0 512 512"
-        xmlns="http://www.w3.org/2000/svg"
+      <input
+        checked={true}
+        disabled={false}
+        onChange={[Function]}
+        type="checkbox"
+      />
+      <span
+        className="c8 c9"
       >
-        <path
-          d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+        <svg
+          aria-hidden="true"
+          className="c10 c11 c12"
           fill="currentColor"
-        />
-      </svg>
-    </span>
-    <div
-      className="c12 c20"
-    >
-      <svg
-        aria-hidden="true"
-        className="c9 c14 c15"
-        fill="currentColor"
-        focusable="false"
-        viewBox="0 0 512 512"
-        xmlns="http://www.w3.org/2000/svg"
+          focusable="false"
+          viewBox="0 0 512 512"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+            fill="currentColor"
+          />
+        </svg>
+      </span>
+      <div
+        className="c13 c21"
       >
-        <path
-          d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+        <svg
+          aria-hidden="true"
+          className="c10 c15 c16"
           fill="currentColor"
+          focusable="false"
+          viewBox="0 0 512 512"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+            fill="currentColor"
+          />
+        </svg>
+        <span
+          className="c17 c18"
+          size="small"
+          style={
+            Object {
+              "focusBorder": "#4e6f01",
+              "focused": "#92d101",
+              "label": "green",
+              "passive": "#def99f",
+            }
+          }
         />
-      </svg>
-      <span
-        className="c16 c17"
-        size="small"
-        style={
-          Object {
-            "focusBorder": "#4e6f01",
-            "focused": "#92d101",
-            "label": "green",
-            "passive": "#def99f",
+        <span
+          className="c22"
+          size="small"
+          style={
+            Object {
+              "focusBorder": "#4e6f01",
+              "focused": "#92d101",
+              "label": "green",
+              "passive": "#def99f",
+            }
           }
-        }
-      />
+        />
+      </div>
       <span
-        className="c21"
-        size="small"
-        style={
-          Object {
-            "focusBorder": "#4e6f01",
-            "focused": "#92d101",
-            "label": "green",
-            "passive": "#def99f",
-          }
-        }
-      />
-    </div>
-    <span
-      className="c19"
-    >
-      green
-    </span>
-  </label>
-  <label
-    className="c5 c22"
-  >
-    <input
-      checked={false}
-      disabled={true}
-      onChange={[Function]}
-      type="checkbox"
-    />
-    <span
-      className="c7 c8"
+        className="c20"
+      >
+        green
+      </span>
+    </label>
+    <label
+      className="c6 c23"
     >
-      <svg
-        aria-hidden="true"
-        className="c9 c10 c11"
-        fill="currentColor"
-        focusable="false"
-        viewBox="0 0 512 512"
-        xmlns="http://www.w3.org/2000/svg"
+      <input
+        checked={false}
+        disabled={true}
+        onChange={[Function]}
+        type="checkbox"
+      />
+      <span
+        className="c8 c9"
       >
-        <path
-          d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+        <svg
+          aria-hidden="true"
+          className="c10 c11 c12"
           fill="currentColor"
-        />
-      </svg>
-    </span>
-    <div
-      className="c12 c23"
-    >
-      <svg
-        aria-hidden="true"
-        className="c9 c14 c15"
-        fill="currentColor"
-        focusable="false"
-        viewBox="0 0 512 512"
-        xmlns="http://www.w3.org/2000/svg"
+          focusable="false"
+          viewBox="0 0 512 512"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+            fill="currentColor"
+          />
+        </svg>
+      </span>
+      <div
+        className="c13 c24"
       >
-        <path
-          d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+        <svg
+          aria-hidden="true"
+          className="c10 c15 c16"
           fill="currentColor"
+          focusable="false"
+          viewBox="0 0 512 512"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+            fill="currentColor"
+          />
+        </svg>
+        <span
+          className="c17 c18"
+          size="small"
+          style={
+            Object {
+              "focusBorder": "#006880",
+              "focused": "#00c3ed",
+              "label": "blue",
+              "passive": "#c8f5ff",
+            }
+          }
         />
-      </svg>
-      <span
-        className="c16 c17"
-        size="small"
-        style={
-          Object {
-            "focusBorder": "#006880",
-            "focused": "#00c3ed",
-            "label": "blue",
-            "passive": "#c8f5ff",
+        <span
+          className="c25"
+          size="small"
+          style={
+            Object {
+              "focusBorder": "#006880",
+              "focused": "#00c3ed",
+              "label": "blue",
+              "passive": "#c8f5ff",
+            }
           }
-        }
-      />
+        />
+      </div>
       <span
-        className="c24"
-        size="small"
-        style={
-          Object {
-            "focusBorder": "#006880",
-            "focused": "#00c3ed",
-            "label": "blue",
-            "passive": "#c8f5ff",
-          }
-        }
-      />
-    </div>
-    <span
-      className="c19"
-    >
-      blue
-    </span>
-  </label>
-  <label
-    className="c5 c22"
-  >
-    <input
-      checked={false}
-      disabled={true}
-      onChange={[Function]}
-      type="checkbox"
-    />
-    <span
-      className="c7 c8"
+        className="c20"
+      >
+        blue
+      </span>
+    </label>
+    <label
+      className="c6 c23"
     >
-      <svg
-        aria-hidden="true"
-        className="c9 c10 c11"
-        fill="currentColor"
-        focusable="false"
-        viewBox="0 0 512 512"
-        xmlns="http://www.w3.org/2000/svg"
+      <input
+        checked={false}
+        disabled={true}
+        onChange={[Function]}
+        type="checkbox"
+      />
+      <span
+        className="c8 c9"
       >
-        <path
-          d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+        <svg
+          aria-hidden="true"
+          className="c10 c11 c12"
           fill="currentColor"
-        />
-      </svg>
-    </span>
-    <div
-      className="c12 c25"
-    >
-      <svg
-        aria-hidden="true"
-        className="c9 c14 c15"
-        fill="currentColor"
-        focusable="false"
-        viewBox="0 0 512 512"
-        xmlns="http://www.w3.org/2000/svg"
+          focusable="false"
+          viewBox="0 0 512 512"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+            fill="currentColor"
+          />
+        </svg>
+      </span>
+      <div
+        className="c13 c26"
       >
-        <path
-          d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+        <svg
+          aria-hidden="true"
+          className="c10 c15 c16"
           fill="currentColor"
+          focusable="false"
+          viewBox="0 0 512 512"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+            fill="currentColor"
+          />
+        </svg>
+        <span
+          className="c17 c18"
+          size="small"
+          style={
+            Object {
+              "focusBorder": "#141a3e",
+              "focused": "#545ec8",
+              "label": "purple",
+              "passive": "#cbcfff",
+            }
+          }
         />
-      </svg>
-      <span
-        className="c16 c17"
-        size="small"
-        style={
-          Object {
-            "focusBorder": "#141a3e",
-            "focused": "#545ec8",
-            "label": "purple",
-            "passive": "#cbcfff",
+        <span
+          className="c27"
+          size="small"
+          style={
+            Object {
+              "focusBorder": "#141a3e",
+              "focused": "#545ec8",
+              "label": "purple",
+              "passive": "#cbcfff",
+            }
           }
-        }
-      />
+        />
+      </div>
       <span
-        className="c26"
-        size="small"
-        style={
-          Object {
-            "focusBorder": "#141a3e",
-            "focused": "#545ec8",
-            "label": "purple",
-            "passive": "#cbcfff",
-          }
-        }
-      />
-    </div>
-    <span
-      className="c19"
-    >
-      purple
-    </span>
-  </label>
-  <label
-    className="c5 c6"
-  >
-    <input
-      checked={true}
-      disabled={false}
-      onChange={[Function]}
-      type="checkbox"
-    />
-    <span
-      className="c7 c8"
+        className="c20"
+      >
+        purple
+      </span>
+    </label>
+    <label
+      className="c6 c7"
     >
-      <svg
-        aria-hidden="true"
-        className="c9 c10 c11"
-        fill="currentColor"
-        focusable="false"
-        viewBox="0 0 512 512"
-        xmlns="http://www.w3.org/2000/svg"
+      <input
+        checked={true}
+        disabled={false}
+        onChange={[Function]}
+        type="checkbox"
+      />
+      <span
+        className="c8 c9"
       >
-        <path
-          d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+        <svg
+          aria-hidden="true"
+          className="c10 c11 c12"
           fill="currentColor"
-        />
-      </svg>
-    </span>
-    <div
-      className="c12 c27"
-    >
-      <svg
-        aria-hidden="true"
-        className="c9 c14 c15"
-        fill="currentColor"
-        focusable="false"
-        viewBox="0 0 512 512"
-        xmlns="http://www.w3.org/2000/svg"
+          focusable="false"
+          viewBox="0 0 512 512"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+            fill="currentColor"
+          />
+        </svg>
+      </span>
+      <div
+        className="c13 c28"
       >
-        <path
-          d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+        <svg
+          aria-hidden="true"
+          className="c10 c15 c16"
           fill="currentColor"
+          focusable="false"
+          viewBox="0 0 512 512"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+            fill="currentColor"
+          />
+        </svg>
+        <span
+          className="c17 c18"
+          size="small"
+          style={
+            Object {
+              "focusBorder": "#560131",
+              "focused": "#de017e",
+              "label": "pink",
+              "passive": "#ffc5e1",
+            }
+          }
         />
-      </svg>
-      <span
-        className="c16 c17"
-        size="small"
-        style={
-          Object {
-            "focusBorder": "#560131",
-            "focused": "#de017e",
-            "label": "pink",
-            "passive": "#ffc5e1",
+        <span
+          className="c29"
+          size="small"
+          style={
+            Object {
+              "focusBorder": "#560131",
+              "focused": "#de017e",
+              "label": "pink",
+              "passive": "#ffc5e1",
+            }
           }
-        }
-      />
+        />
+      </div>
       <span
-        className="c28"
-        size="small"
-        style={
-          Object {
-            "focusBorder": "#560131",
-            "focused": "#de017e",
-            "label": "pink",
-            "passive": "#ffc5e1",
-          }
-        }
-      />
-    </div>
-    <span
-      className="c19"
-    >
-      pink
-    </span>
-  </label>
+        className="c20"
+      >
+        pink
+      </span>
+    </label>
+  </fieldset>
 </div>
 `;
diff --git a/src/app/content/highlights/components/SummaryPopup/__snapshots__/Filters.spec.tsx.snap b/src/app/content/highlights/components/SummaryPopup/__snapshots__/Filters.spec.tsx.snap
index 82feefd4e1..64228b2d87 100644
--- a/src/app/content/highlights/components/SummaryPopup/__snapshots__/Filters.spec.tsx.snap
+++ b/src/app/content/highlights/components/SummaryPopup/__snapshots__/Filters.spec.tsx.snap
@@ -7,14 +7,14 @@ exports[`Filters matches snapshot and renders proper aria labels 1`] = `
   overflow: hidden;
 }
 
-.c23 {
+.c24 {
   color: #fff;
   height: 1rem;
   width: 1rem;
   display: none;
 }
 
-.c21 {
+.c22 {
   height: 1.6rem;
   width: 1.6rem;
   display: -webkit-box;
@@ -29,21 +29,24 @@ exports[`Filters matches snapshot and renders proper aria labels 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
 }
 
-input:not(:checked) + .c21 {
+input:not(:checked) + .c22 {
   border: 1px solid #424242;
 }
 
-input:checked + .c21 {
+input:checked + .c22 {
   background-color: #b03808;
 }
 
-input:checked + .c21 .c22 {
+input:checked + .c22 .c23 {
   display: block;
 }
 
-.c19 {
+.c20 {
   cursor: pointer;
   display: -webkit-box;
   display: -webkit-flex;
@@ -58,7 +61,7 @@ input:checked + .c21 .c22 {
   align-items: center;
 }
 
-.c19 input {
+.c20 input {
   position: absolute;
   opacity: 0;
   cursor: pointer;
@@ -66,23 +69,23 @@ input:checked + .c21 .c22 {
   width: 0;
 }
 
-.c19:focus-within {
+.c20:focus-within {
   border-radius: 0.4rem;
   background-color: #f1f1f1;
   outline: 0.2rem auto Highlight;
   outline: 0.2rem auto -webkit-focus-ring-color;
 }
 
-.c19:focus-within .c20 {
+.c20:focus-within .c21 {
   border: 1px solid #b03808;
 }
 
-.c19.focus-within {
+.c20.focus-within {
   border-radius: 0.4rem;
   background-color: #f1f1f1;
 }
 
-.c19.focus-within .c20 {
+.c20.focus-within .c21 {
   border: 1px solid #b03808;
 }
 
@@ -159,11 +162,11 @@ input:checked + .c21 .c22 {
   padding: 0 1rem;
 }
 
-.c27 {
+.c28 {
   display: none;
 }
 
-.c29 {
+.c30 {
   display: none;
   position: absolute;
   height: 2rem;
@@ -178,7 +181,7 @@ input:checked + .c21 .c22 {
   border-radius: 50%;
 }
 
-.c30 {
+.c31 {
   height: 1.4000000000000001rem;
   width: 1.4000000000000001rem;
   background-color: transparent;
@@ -192,7 +195,7 @@ input:checked + .c21 .c22 {
   border: 1px solid #fed200;
 }
 
-.c33 {
+.c34 {
   height: 1.4000000000000001rem;
   width: 1.4000000000000001rem;
   background-color: transparent;
@@ -206,7 +209,7 @@ input:checked + .c21 .c22 {
   border: 1px solid #92d101;
 }
 
-.c35 {
+.c36 {
   height: 1.4000000000000001rem;
   width: 1.4000000000000001rem;
   background-color: transparent;
@@ -220,7 +223,7 @@ input:checked + .c21 .c22 {
   border: 1px solid #00c3ed;
 }
 
-.c37 {
+.c38 {
   height: 1.4000000000000001rem;
   width: 1.4000000000000001rem;
   background-color: transparent;
@@ -234,7 +237,7 @@ input:checked + .c21 .c22 {
   border: 1px solid #545ec8;
 }
 
-.c39 {
+.c40 {
   height: 1.4000000000000001rem;
   width: 1.4000000000000001rem;
   background-color: transparent;
@@ -248,7 +251,7 @@ input:checked + .c21 .c22 {
   border: 1px solid #de017e;
 }
 
-.c25 {
+.c26 {
   position: relative;
   background-color: #ffff8a;
   border: 1px solid #8f7700;
@@ -270,19 +273,19 @@ input:checked + .c21 .c22 {
   overflow: visible;
 }
 
-.c25 .c26 {
+.c26 .c27 {
   height: 1rem;
   width: 1rem;
 }
 
-.c25 input:focus + .c28 {
+.c26 input:focus + .c29 {
   display: block;
   outline: 0.2rem auto Highlight;
   outline: 0.2rem auto -webkit-focus-ring-color;
   z-index: 1;
 }
 
-.c32 {
+.c33 {
   position: relative;
   background-color: #def99f;
   border: 1px solid #4e6f01;
@@ -304,19 +307,19 @@ input:checked + .c21 .c22 {
   overflow: visible;
 }
 
-.c32 .c26 {
+.c33 .c27 {
   height: 1rem;
   width: 1rem;
 }
 
-.c32 input:focus + .c28 {
+.c33 input:focus + .c29 {
   display: block;
   outline: 0.2rem auto Highlight;
   outline: 0.2rem auto -webkit-focus-ring-color;
   z-index: 1;
 }
 
-.c34 {
+.c35 {
   position: relative;
   background-color: #c8f5ff;
   border: 1px solid #006880;
@@ -338,19 +341,19 @@ input:checked + .c21 .c22 {
   overflow: visible;
 }
 
-.c34 .c26 {
+.c35 .c27 {
   height: 1rem;
   width: 1rem;
 }
 
-.c34 input:focus + .c28 {
+.c35 input:focus + .c29 {
   display: block;
   outline: 0.2rem auto Highlight;
   outline: 0.2rem auto -webkit-focus-ring-color;
   z-index: 1;
 }
 
-.c36 {
+.c37 {
   position: relative;
   background-color: #cbcfff;
   border: 1px solid #141a3e;
@@ -372,19 +375,19 @@ input:checked + .c21 .c22 {
   overflow: visible;
 }
 
-.c36 .c26 {
+.c37 .c27 {
   height: 1rem;
   width: 1rem;
 }
 
-.c36 input:focus + .c28 {
+.c37 input:focus + .c29 {
   display: block;
   outline: 0.2rem auto Highlight;
   outline: 0.2rem auto -webkit-focus-ring-color;
   z-index: 1;
 }
 
-.c38 {
+.c39 {
   position: relative;
   background-color: #ffc5e1;
   border: 1px solid #560131;
@@ -406,19 +409,19 @@ input:checked + .c21 .c22 {
   overflow: visible;
 }
 
-.c38 .c26 {
+.c39 .c27 {
   height: 1rem;
   width: 1rem;
 }
 
-.c38 input:focus + .c28 {
+.c39 input:focus + .c29 {
   display: block;
   outline: 0.2rem auto Highlight;
   outline: 0.2rem auto -webkit-focus-ring-color;
   z-index: 1;
 }
 
-.c48 {
+.c49 {
   cursor: pointer;
   border: none;
   margin: 0;
@@ -428,13 +431,13 @@ input:checked + .c21 .c22 {
   margin-right: 0.4rem;
 }
 
-.c48 svg {
+.c49 svg {
   height: 0.8rem;
   width: 0.8rem;
   color: #5e6062;
 }
 
-.c49 {
+.c50 {
   color: #424242;
   font-weight: 300;
   color: #5e6062;
@@ -446,7 +449,7 @@ input:checked + .c21 .c22 {
   line-height: 1.5rem;
 }
 
-.c47 {
+.c48 {
   margin-right: 3.2rem;
   display: -webkit-box;
   display: -webkit-flex;
@@ -460,7 +463,7 @@ input:checked + .c21 .c22 {
   height: 4rem;
 }
 
-.c46 {
+.c47 {
   color: #424242;
   font-size: 1.4rem;
   display: -webkit-box;
@@ -593,19 +596,19 @@ input:checked + .c21 .c22 {
   margin: 0.8rem 0 0.8rem 0.8rem;
 }
 
-.c11 .c18 {
+.c11 .c19 {
   padding: 0.8rem;
 }
 
-.c11 .c24 {
+.c11 .c25 {
   margin: 0 1.6rem 0 1.6rem;
 }
 
-.c11 .c50:last-child {
+.c11 .c51:last-child {
   border-bottom: none;
 }
 
-.c31 {
+.c32 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -614,6 +617,25 @@ input:checked + .c21 .c22 {
   white-space: nowrap;
 }
 
+.c18 {
+  padding: 0;
+  border: none;
+  margin: 0;
+}
+
+.c18 legend {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  white-space: nowrap;
+  border: 0;
+}
+
 .c17 {
   background: #fff;
   display: -webkit-box;
@@ -634,16 +656,16 @@ input:checked + .c21 .c22 {
   margin: 0.8rem 0 0.8rem 0.8rem;
 }
 
-.c17 .c18 {
+.c17 .c19 {
   padding: 0.8rem;
   text-transform: capitalize;
 }
 
-.c17 .c24 {
+.c17 .c25 {
   margin: 0 1.6rem 0 1.6rem;
 }
 
-.c40 {
+.c41 {
   cursor: pointer;
   border: none;
   padding: 0;
@@ -675,12 +697,12 @@ input:checked + .c21 .c22 {
   padding: 0 10px;
 }
 
-.c40:hover,
-.c40:focus {
+.c41:hover,
+.c41:focus {
   color: #424242;
 }
 
-.c44 {
+.c45 {
   font-weight: 600;
   font-size: 1.2rem;
   line-height: 1.5rem;
@@ -688,13 +710,13 @@ input:checked + .c21 .c22 {
   line-height: 1.5rem;
 }
 
-.c42 {
+.c43 {
   height: 2.5rem;
   width: 2.5rem;
   padding: 0.4rem;
 }
 
-.c41 {
+.c42 {
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
@@ -707,20 +729,20 @@ input:checked + .c21 .c22 {
   padding-right: 2.4rem;
 }
 
-.c41 .c43 {
+.c42 .c44 {
   font-size: 1.6rem;
   line-height: 2.5rem;
   margin: 0px 0px 0px 0.5rem;
 }
 
 @media print {
-  .c48 {
+  .c49 {
     display: none;
   }
 }
 
 @media print {
-  .c49 {
+  .c50 {
     max-width: -webkit-max-content;
     max-width: -moz-max-content;
     max-width: max-content;
@@ -728,13 +750,13 @@ input:checked + .c21 .c22 {
 }
 
 @media screen and (max-width:75em) {
-  .c46 {
+  .c47 {
     padding: 0 2.4rem 0.4rem 2.4rem;
   }
 }
 
 @media print {
-  .c46 {
+  .c47 {
     margin: 0;
   }
 }
@@ -769,7 +791,7 @@ input:checked + .c21 .c22 {
 }
 
 @media print {
-  .c0 > *:not(.c45) {
+  .c0 > *:not(.c46) {
     display: none;
   }
 }
@@ -796,7 +818,7 @@ input:checked + .c21 .c22 {
 }
 
 @media screen and (max-width:50em) {
-  .c40 {
+  .c41 {
     -webkit-flex-direction: row;
     -ms-flex-direction: row;
     flex-direction: row;
@@ -811,7 +833,7 @@ input:checked + .c21 .c22 {
 }
 
 @media screen and (max-width:50em) {
-  .c44 {
+  .c45 {
     font-size: 1.6rem;
     line-height: 2.5rem;
     margin-left: 1.2rem;
@@ -819,13 +841,13 @@ input:checked + .c21 .c22 {
 }
 
 @media screen and (max-width:75em) {
-  .c41 {
+  .c42 {
     padding-right: 1.6rem;
   }
 }
 
 @media screen and (max-width:75em) {
-  .c41 .c43 {
+  .c42 .c44 {
     display: none;
   }
 }
@@ -951,376 +973,383 @@ input:checked + .c21 .c22 {
             None
           </button>
         </div>
-        <label
-          className="c18 c19"
+        <fieldset
+          className="c18"
         >
-          <input
-            checked={true}
-            disabled={false}
-            onChange={[Function]}
-            type="checkbox"
-          />
-          <span
-            className="c20 c21"
+          <legend>
+            Filter by colors
+          </legend>
+          <label
+            className="c19 c20"
           >
-            <svg
-              aria-hidden="true"
-              className="c9 c22 c23"
-              fill="currentColor"
-              focusable="false"
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
+            <input
+              checked={true}
+              disabled={false}
+              onChange={[Function]}
+              type="checkbox"
+            />
+            <span
+              className="c21 c22"
             >
-              <path
-                d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+              <svg
+                aria-hidden="true"
+                className="c9 c23 c24"
                 fill="currentColor"
-              />
-            </svg>
-          </span>
-          <div
-            className="c24 c25"
-          >
-            <svg
-              aria-hidden="true"
-              className="c9 c26 c27"
-              fill="currentColor"
-              focusable="false"
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
+                focusable="false"
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+                  fill="currentColor"
+                />
+              </svg>
+            </span>
+            <div
+              className="c25 c26"
             >
-              <path
-                d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+              <svg
+                aria-hidden="true"
+                className="c9 c27 c28"
                 fill="currentColor"
+                focusable="false"
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+                  fill="currentColor"
+                />
+              </svg>
+              <span
+                className="c29 c30"
+                size="small"
+                style={
+                  Object {
+                    "focusBorder": "#8f7700",
+                    "focused": "#fed200",
+                    "label": "yellow",
+                    "passive": "#ffff8a",
+                  }
+                }
               />
-            </svg>
-            <span
-              className="c28 c29"
-              size="small"
-              style={
-                Object {
-                  "focusBorder": "#8f7700",
-                  "focused": "#fed200",
-                  "label": "yellow",
-                  "passive": "#ffff8a",
+              <span
+                className="c31"
+                size="small"
+                style={
+                  Object {
+                    "focusBorder": "#8f7700",
+                    "focused": "#fed200",
+                    "label": "yellow",
+                    "passive": "#ffff8a",
+                  }
                 }
-              }
-            />
+              />
+            </div>
             <span
-              className="c30"
-              size="small"
-              style={
-                Object {
-                  "focusBorder": "#8f7700",
-                  "focused": "#fed200",
-                  "label": "yellow",
-                  "passive": "#ffff8a",
-                }
-              }
-            />
-          </div>
-          <span
-            className="c31"
-          >
-            yellow
-          </span>
-        </label>
-        <label
-          className="c18 c19"
-        >
-          <input
-            checked={true}
-            disabled={false}
-            onChange={[Function]}
-            type="checkbox"
-          />
-          <span
-            className="c20 c21"
+              className="c32"
+            >
+              yellow
+            </span>
+          </label>
+          <label
+            className="c19 c20"
           >
-            <svg
-              aria-hidden="true"
-              className="c9 c22 c23"
-              fill="currentColor"
-              focusable="false"
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
+            <input
+              checked={true}
+              disabled={false}
+              onChange={[Function]}
+              type="checkbox"
+            />
+            <span
+              className="c21 c22"
             >
-              <path
-                d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+              <svg
+                aria-hidden="true"
+                className="c9 c23 c24"
                 fill="currentColor"
-              />
-            </svg>
-          </span>
-          <div
-            className="c24 c32"
-          >
-            <svg
-              aria-hidden="true"
-              className="c9 c26 c27"
-              fill="currentColor"
-              focusable="false"
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
+                focusable="false"
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+                  fill="currentColor"
+                />
+              </svg>
+            </span>
+            <div
+              className="c25 c33"
             >
-              <path
-                d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+              <svg
+                aria-hidden="true"
+                className="c9 c27 c28"
                 fill="currentColor"
+                focusable="false"
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+                  fill="currentColor"
+                />
+              </svg>
+              <span
+                className="c29 c30"
+                size="small"
+                style={
+                  Object {
+                    "focusBorder": "#4e6f01",
+                    "focused": "#92d101",
+                    "label": "green",
+                    "passive": "#def99f",
+                  }
+                }
               />
-            </svg>
-            <span
-              className="c28 c29"
-              size="small"
-              style={
-                Object {
-                  "focusBorder": "#4e6f01",
-                  "focused": "#92d101",
-                  "label": "green",
-                  "passive": "#def99f",
+              <span
+                className="c34"
+                size="small"
+                style={
+                  Object {
+                    "focusBorder": "#4e6f01",
+                    "focused": "#92d101",
+                    "label": "green",
+                    "passive": "#def99f",
+                  }
                 }
-              }
-            />
+              />
+            </div>
             <span
-              className="c33"
-              size="small"
-              style={
-                Object {
-                  "focusBorder": "#4e6f01",
-                  "focused": "#92d101",
-                  "label": "green",
-                  "passive": "#def99f",
-                }
-              }
-            />
-          </div>
-          <span
-            className="c31"
-          >
-            green
-          </span>
-        </label>
-        <label
-          className="c18 c19"
-        >
-          <input
-            checked={true}
-            disabled={false}
-            onChange={[Function]}
-            type="checkbox"
-          />
-          <span
-            className="c20 c21"
+              className="c32"
+            >
+              green
+            </span>
+          </label>
+          <label
+            className="c19 c20"
           >
-            <svg
-              aria-hidden="true"
-              className="c9 c22 c23"
-              fill="currentColor"
-              focusable="false"
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
+            <input
+              checked={true}
+              disabled={false}
+              onChange={[Function]}
+              type="checkbox"
+            />
+            <span
+              className="c21 c22"
             >
-              <path
-                d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+              <svg
+                aria-hidden="true"
+                className="c9 c23 c24"
                 fill="currentColor"
-              />
-            </svg>
-          </span>
-          <div
-            className="c24 c34"
-          >
-            <svg
-              aria-hidden="true"
-              className="c9 c26 c27"
-              fill="currentColor"
-              focusable="false"
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
+                focusable="false"
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+                  fill="currentColor"
+                />
+              </svg>
+            </span>
+            <div
+              className="c25 c35"
             >
-              <path
-                d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+              <svg
+                aria-hidden="true"
+                className="c9 c27 c28"
                 fill="currentColor"
+                focusable="false"
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+                  fill="currentColor"
+                />
+              </svg>
+              <span
+                className="c29 c30"
+                size="small"
+                style={
+                  Object {
+                    "focusBorder": "#006880",
+                    "focused": "#00c3ed",
+                    "label": "blue",
+                    "passive": "#c8f5ff",
+                  }
+                }
               />
-            </svg>
-            <span
-              className="c28 c29"
-              size="small"
-              style={
-                Object {
-                  "focusBorder": "#006880",
-                  "focused": "#00c3ed",
-                  "label": "blue",
-                  "passive": "#c8f5ff",
+              <span
+                className="c36"
+                size="small"
+                style={
+                  Object {
+                    "focusBorder": "#006880",
+                    "focused": "#00c3ed",
+                    "label": "blue",
+                    "passive": "#c8f5ff",
+                  }
                 }
-              }
-            />
+              />
+            </div>
             <span
-              className="c35"
-              size="small"
-              style={
-                Object {
-                  "focusBorder": "#006880",
-                  "focused": "#00c3ed",
-                  "label": "blue",
-                  "passive": "#c8f5ff",
-                }
-              }
-            />
-          </div>
-          <span
-            className="c31"
-          >
-            blue
-          </span>
-        </label>
-        <label
-          className="c18 c19"
-        >
-          <input
-            checked={true}
-            disabled={false}
-            onChange={[Function]}
-            type="checkbox"
-          />
-          <span
-            className="c20 c21"
+              className="c32"
+            >
+              blue
+            </span>
+          </label>
+          <label
+            className="c19 c20"
           >
-            <svg
-              aria-hidden="true"
-              className="c9 c22 c23"
-              fill="currentColor"
-              focusable="false"
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
+            <input
+              checked={true}
+              disabled={false}
+              onChange={[Function]}
+              type="checkbox"
+            />
+            <span
+              className="c21 c22"
             >
-              <path
-                d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+              <svg
+                aria-hidden="true"
+                className="c9 c23 c24"
                 fill="currentColor"
-              />
-            </svg>
-          </span>
-          <div
-            className="c24 c36"
-          >
-            <svg
-              aria-hidden="true"
-              className="c9 c26 c27"
-              fill="currentColor"
-              focusable="false"
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
+                focusable="false"
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+                  fill="currentColor"
+                />
+              </svg>
+            </span>
+            <div
+              className="c25 c37"
             >
-              <path
-                d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+              <svg
+                aria-hidden="true"
+                className="c9 c27 c28"
                 fill="currentColor"
+                focusable="false"
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+                  fill="currentColor"
+                />
+              </svg>
+              <span
+                className="c29 c30"
+                size="small"
+                style={
+                  Object {
+                    "focusBorder": "#141a3e",
+                    "focused": "#545ec8",
+                    "label": "purple",
+                    "passive": "#cbcfff",
+                  }
+                }
               />
-            </svg>
-            <span
-              className="c28 c29"
-              size="small"
-              style={
-                Object {
-                  "focusBorder": "#141a3e",
-                  "focused": "#545ec8",
-                  "label": "purple",
-                  "passive": "#cbcfff",
+              <span
+                className="c38"
+                size="small"
+                style={
+                  Object {
+                    "focusBorder": "#141a3e",
+                    "focused": "#545ec8",
+                    "label": "purple",
+                    "passive": "#cbcfff",
+                  }
                 }
-              }
-            />
+              />
+            </div>
             <span
-              className="c37"
-              size="small"
-              style={
-                Object {
-                  "focusBorder": "#141a3e",
-                  "focused": "#545ec8",
-                  "label": "purple",
-                  "passive": "#cbcfff",
-                }
-              }
-            />
-          </div>
-          <span
-            className="c31"
-          >
-            purple
-          </span>
-        </label>
-        <label
-          className="c18 c19"
-        >
-          <input
-            checked={true}
-            disabled={false}
-            onChange={[Function]}
-            type="checkbox"
-          />
-          <span
-            className="c20 c21"
+              className="c32"
+            >
+              purple
+            </span>
+          </label>
+          <label
+            className="c19 c20"
           >
-            <svg
-              aria-hidden="true"
-              className="c9 c22 c23"
-              fill="currentColor"
-              focusable="false"
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
+            <input
+              checked={true}
+              disabled={false}
+              onChange={[Function]}
+              type="checkbox"
+            />
+            <span
+              className="c21 c22"
             >
-              <path
-                d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+              <svg
+                aria-hidden="true"
+                className="c9 c23 c24"
                 fill="currentColor"
-              />
-            </svg>
-          </span>
-          <div
-            className="c24 c38"
-          >
-            <svg
-              aria-hidden="true"
-              className="c9 c26 c27"
-              fill="currentColor"
-              focusable="false"
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
+                focusable="false"
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+                  fill="currentColor"
+                />
+              </svg>
+            </span>
+            <div
+              className="c25 c39"
             >
-              <path
-                d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+              <svg
+                aria-hidden="true"
+                className="c9 c27 c28"
                 fill="currentColor"
+                focusable="false"
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+                  fill="currentColor"
+                />
+              </svg>
+              <span
+                className="c29 c30"
+                size="small"
+                style={
+                  Object {
+                    "focusBorder": "#560131",
+                    "focused": "#de017e",
+                    "label": "pink",
+                    "passive": "#ffc5e1",
+                  }
+                }
               />
-            </svg>
-            <span
-              className="c28 c29"
-              size="small"
-              style={
-                Object {
-                  "focusBorder": "#560131",
-                  "focused": "#de017e",
-                  "label": "pink",
-                  "passive": "#ffc5e1",
+              <span
+                className="c40"
+                size="small"
+                style={
+                  Object {
+                    "focusBorder": "#560131",
+                    "focused": "#de017e",
+                    "label": "pink",
+                    "passive": "#ffc5e1",
+                  }
                 }
-              }
-            />
+              />
+            </div>
             <span
-              className="c39"
-              size="small"
-              style={
-                Object {
-                  "focusBorder": "#560131",
-                  "focused": "#de017e",
-                  "label": "pink",
-                  "passive": "#ffc5e1",
-                }
-              }
-            />
-          </div>
-          <span
-            className="c31"
-          >
-            pink
-          </span>
-        </label>
+              className="c32"
+            >
+              pink
+            </span>
+          </label>
+        </fieldset>
       </div>
     </div>
     <button
       aria-label="print"
-      className="c40 c41"
+      className="c41 c42"
       data-analytics-label="print"
       data-testid="print"
       disabled={false}
@@ -1328,7 +1357,7 @@ input:checked + .c21 .c22 {
     >
       <svg
         aria-hidden="true"
-        className="c9 c42"
+        className="c9 c43"
         fill="currentColor"
         focusable="false"
         viewBox="0 0 512 512"
@@ -1340,7 +1369,7 @@ input:checked + .c21 .c22 {
         />
       </svg>
       <span
-        className="c43 c44"
+        className="c44 c45"
       >
         Print
       </span>
@@ -1349,14 +1378,14 @@ input:checked + .c21 .c22 {
   <ul
     aria-atomic="true"
     aria-live="polite"
-    className="c45 c46"
+    className="c46 c47"
   >
     <li
-      className="c47"
+      className="c48"
     >
       <button
         aria-label="Remove breadcrumb for color blue"
-        className="c48"
+        className="c49"
         data-analytics-label="Remove breadcrumb for color blue"
         onClick={[Function]}
       >
@@ -1388,17 +1417,17 @@ input:checked + .c21 .c22 {
         </svg>
       </button>
       <span
-        className="c49"
+        className="c50"
       >
         blue
       </span>
     </li>
     <li
-      className="c47"
+      className="c48"
     >
       <button
         aria-label="Remove breadcrumb for color green"
-        className="c48"
+        className="c49"
         data-analytics-label="Remove breadcrumb for color green"
         onClick={[Function]}
       >
@@ -1430,17 +1459,17 @@ input:checked + .c21 .c22 {
         </svg>
       </button>
       <span
-        className="c49"
+        className="c50"
       >
         green
       </span>
     </li>
     <li
-      className="c47"
+      className="c48"
     >
       <button
         aria-label="Remove breadcrumb for color pink"
-        className="c48"
+        className="c49"
         data-analytics-label="Remove breadcrumb for color pink"
         onClick={[Function]}
       >
@@ -1472,17 +1501,17 @@ input:checked + .c21 .c22 {
         </svg>
       </button>
       <span
-        className="c49"
+        className="c50"
       >
         pink
       </span>
     </li>
     <li
-      className="c47"
+      className="c48"
     >
       <button
         aria-label="Remove breadcrumb for color purple"
-        className="c48"
+        className="c49"
         data-analytics-label="Remove breadcrumb for color purple"
         onClick={[Function]}
       >
@@ -1514,17 +1543,17 @@ input:checked + .c21 .c22 {
         </svg>
       </button>
       <span
-        className="c49"
+        className="c50"
       >
         purple
       </span>
     </li>
     <li
-      className="c47"
+      className="c48"
     >
       <button
         aria-label="Remove breadcrumb for color yellow"
-        className="c48"
+        className="c49"
         data-analytics-label="Remove breadcrumb for color yellow"
         onClick={[Function]}
       >
@@ -1556,7 +1585,7 @@ input:checked + .c21 .c22 {
         </svg>
       </button>
       <span
-        className="c49"
+        className="c50"
       >
         yellow
       </span>
diff --git a/src/app/content/practiceQuestions/components/__snapshots__/Filters.spec.tsx.snap b/src/app/content/practiceQuestions/components/__snapshots__/Filters.spec.tsx.snap
index e7ee5d4817..b042635ab9 100644
--- a/src/app/content/practiceQuestions/components/__snapshots__/Filters.spec.tsx.snap
+++ b/src/app/content/practiceQuestions/components/__snapshots__/Filters.spec.tsx.snap
@@ -342,6 +342,9 @@ exports[`Filters ChapterFilter matches snapshot when open with selected section
   -ms-flex-direction: column;
   flex-direction: column;
   overflow-x: hidden;
+  list-style: none;
+  margin: 0;
+  padding: 0;
 }
 
 .c19 {
@@ -594,127 +597,132 @@ exports[`Filters ChapterFilter matches snapshot when open with selected section
         <div
           className="c13"
         >
-          <div
+          <ul
+            aria-label="Filter by chapters"
             className="c14"
           >
-            <details
-              className="c15 c16"
-              open={false}
-            >
-              <summary
-                className="c17"
-                onClick={[Function]}
+            <li>
+              <details
+                className="c15 c16"
+                open={false}
               >
-                <span
-                  className="c18 c19"
-                  dangerouslySetInnerHTML={
-                    Object {
-                      "__html": "chapterId",
-                    }
-                  }
-                />
-                <svg
-                  aria-hidden="true"
-                  className="c9 c10 c20"
-                  direction="down"
-                  fill="currentColor"
-                  focusable="false"
-                  viewBox="0 0 320 512"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"
-                    fill="currentColor"
-                  />
-                </svg>
-              </summary>
-              <div
-                className="c21"
-              >
-                <button
-                  aria-label="Filter PQ by  section1"
-                  className="c22"
-                  data-analytics-label="Filter PQ by  section1"
+                <summary
+                  className="c17"
                   onClick={[Function]}
                 >
                   <span
                     className="c18 c19"
                     dangerouslySetInnerHTML={
                       Object {
-                        "__html": "section1",
+                        "__html": "chapterId",
                       }
                     }
                   />
-                </button>
-                <button
-                  aria-label="Filter PQ by  section2"
-                  className="c22"
-                  data-analytics-label="Filter PQ by  section2"
-                  onClick={[Function]}
+                  <svg
+                    aria-hidden="true"
+                    className="c9 c10 c20"
+                    direction="down"
+                    fill="currentColor"
+                    focusable="false"
+                    viewBox="0 0 320 512"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </summary>
+                <div
+                  className="c21"
                 >
-                  <span
-                    className="c18 c19"
-                    dangerouslySetInnerHTML={
-                      Object {
-                        "__html": "section2",
+                  <button
+                    aria-label="Filter PQ by  section1"
+                    className="c22"
+                    data-analytics-label="Filter PQ by  section1"
+                    onClick={[Function]}
+                  >
+                    <span
+                      className="c18 c19"
+                      dangerouslySetInnerHTML={
+                        Object {
+                          "__html": "section1",
+                        }
                       }
-                    }
-                  />
-                </button>
-              </div>
-            </details>
-            <details
-              className="c15 c16"
-              open={true}
-            >
-              <summary
-                className="c17"
-                onClick={[Function]}
-              >
-                <span
-                  className="c18 c19"
-                  dangerouslySetInnerHTML={
-                    Object {
-                      "__html": "chapterId2",
-                    }
-                  }
-                />
-                <svg
-                  aria-hidden="true"
-                  className="c9 c10 c11"
-                  direction="up"
-                  fill="currentColor"
-                  focusable="false"
-                  viewBox="0 0 320 512"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"
-                    fill="currentColor"
-                  />
-                </svg>
-              </summary>
-              <div
-                className="c21"
+                    />
+                  </button>
+                  <button
+                    aria-label="Filter PQ by  section2"
+                    className="c22"
+                    data-analytics-label="Filter PQ by  section2"
+                    onClick={[Function]}
+                  >
+                    <span
+                      className="c18 c19"
+                      dangerouslySetInnerHTML={
+                        Object {
+                          "__html": "section2",
+                        }
+                      }
+                    />
+                  </button>
+                </div>
+              </details>
+            </li>
+            <li>
+              <details
+                className="c15 c16"
+                open={true}
               >
-                <button
-                  aria-label="Filter PQ by  section21"
-                  className="c23"
-                  data-analytics-label="Filter PQ by  section21"
+                <summary
+                  className="c17"
                   onClick={[Function]}
                 >
                   <span
                     className="c18 c19"
                     dangerouslySetInnerHTML={
                       Object {
-                        "__html": "section21",
+                        "__html": "chapterId2",
                       }
                     }
                   />
-                </button>
-              </div>
-            </details>
-          </div>
+                  <svg
+                    aria-hidden="true"
+                    className="c9 c10 c11"
+                    direction="up"
+                    fill="currentColor"
+                    focusable="false"
+                    viewBox="0 0 320 512"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </summary>
+                <div
+                  className="c21"
+                >
+                  <button
+                    aria-label="Filter PQ by  section21"
+                    className="c23"
+                    data-analytics-label="Filter PQ by  section21"
+                    onClick={[Function]}
+                  >
+                    <span
+                      className="c18 c19"
+                      dangerouslySetInnerHTML={
+                        Object {
+                          "__html": "section21",
+                        }
+                      }
+                    />
+                  </button>
+                </div>
+              </details>
+            </li>
+          </ul>
         </div>
       </div>
     </div>
@@ -874,6 +882,9 @@ exports[`Filters ChapterFilter matches snapshot when open without selected secti
   -ms-flex-direction: column;
   flex-direction: column;
   overflow-x: hidden;
+  list-style: none;
+  margin: 0;
+  padding: 0;
 }
 
 .c19 {
@@ -1094,127 +1105,132 @@ exports[`Filters ChapterFilter matches snapshot when open without selected secti
         <div
           className="c13"
         >
-          <div
+          <ul
+            aria-label="Filter by chapters"
             className="c14"
           >
-            <details
-              className="c15 c16"
-              open={false}
-            >
-              <summary
-                className="c17"
-                onClick={[Function]}
+            <li>
+              <details
+                className="c15 c16"
+                open={false}
               >
-                <span
-                  className="c18 c19"
-                  dangerouslySetInnerHTML={
-                    Object {
-                      "__html": "chapterId",
-                    }
-                  }
-                />
-                <svg
-                  aria-hidden="true"
-                  className="c9 c10 c20"
-                  direction="down"
-                  fill="currentColor"
-                  focusable="false"
-                  viewBox="0 0 320 512"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"
-                    fill="currentColor"
-                  />
-                </svg>
-              </summary>
-              <div
-                className="c21"
-              >
-                <button
-                  aria-label="Filter PQ by  section1"
-                  className="c22"
-                  data-analytics-label="Filter PQ by  section1"
+                <summary
+                  className="c17"
                   onClick={[Function]}
                 >
                   <span
                     className="c18 c19"
                     dangerouslySetInnerHTML={
                       Object {
-                        "__html": "section1",
+                        "__html": "chapterId",
                       }
                     }
                   />
-                </button>
-                <button
-                  aria-label="Filter PQ by  section2"
-                  className="c22"
-                  data-analytics-label="Filter PQ by  section2"
-                  onClick={[Function]}
+                  <svg
+                    aria-hidden="true"
+                    className="c9 c10 c20"
+                    direction="down"
+                    fill="currentColor"
+                    focusable="false"
+                    viewBox="0 0 320 512"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </summary>
+                <div
+                  className="c21"
                 >
-                  <span
-                    className="c18 c19"
-                    dangerouslySetInnerHTML={
-                      Object {
-                        "__html": "section2",
+                  <button
+                    aria-label="Filter PQ by  section1"
+                    className="c22"
+                    data-analytics-label="Filter PQ by  section1"
+                    onClick={[Function]}
+                  >
+                    <span
+                      className="c18 c19"
+                      dangerouslySetInnerHTML={
+                        Object {
+                          "__html": "section1",
+                        }
                       }
-                    }
-                  />
-                </button>
-              </div>
-            </details>
-            <details
-              className="c15 c16"
-              open={false}
-            >
-              <summary
-                className="c17"
-                onClick={[Function]}
-              >
-                <span
-                  className="c18 c19"
-                  dangerouslySetInnerHTML={
-                    Object {
-                      "__html": "chapterId2",
-                    }
-                  }
-                />
-                <svg
-                  aria-hidden="true"
-                  className="c9 c10 c20"
-                  direction="down"
-                  fill="currentColor"
-                  focusable="false"
-                  viewBox="0 0 320 512"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"
-                    fill="currentColor"
-                  />
-                </svg>
-              </summary>
-              <div
-                className="c21"
+                    />
+                  </button>
+                  <button
+                    aria-label="Filter PQ by  section2"
+                    className="c22"
+                    data-analytics-label="Filter PQ by  section2"
+                    onClick={[Function]}
+                  >
+                    <span
+                      className="c18 c19"
+                      dangerouslySetInnerHTML={
+                        Object {
+                          "__html": "section2",
+                        }
+                      }
+                    />
+                  </button>
+                </div>
+              </details>
+            </li>
+            <li>
+              <details
+                className="c15 c16"
+                open={false}
               >
-                <button
-                  aria-label="Filter PQ by  section21"
-                  className="c22"
-                  data-analytics-label="Filter PQ by  section21"
+                <summary
+                  className="c17"
                   onClick={[Function]}
                 >
                   <span
                     className="c18 c19"
                     dangerouslySetInnerHTML={
                       Object {
-                        "__html": "section21",
+                        "__html": "chapterId2",
                       }
                     }
                   />
-                </button>
-              </div>
-            </details>
-          </div>
+                  <svg
+                    aria-hidden="true"
+                    className="c9 c10 c20"
+                    direction="down"
+                    fill="currentColor"
+                    focusable="false"
+                    viewBox="0 0 320 512"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </summary>
+                <div
+                  className="c21"
+                >
+                  <button
+                    aria-label="Filter PQ by  section21"
+                    className="c22"
+                    data-analytics-label="Filter PQ by  section21"
+                    onClick={[Function]}
+                  >
+                    <span
+                      className="c18 c19"
+                      dangerouslySetInnerHTML={
+                        Object {
+                          "__html": "section21",
+                        }
+                      }
+                    />
+                  </button>
+                </div>
+              </details>
+            </li>
+          </ul>
         </div>
       </div>
     </div>
diff --git a/src/app/content/studyGuides/components/__snapshots__/Filters.spec.tsx.snap b/src/app/content/studyGuides/components/__snapshots__/Filters.spec.tsx.snap
index 81eef5c18c..f7cfde1364 100644
--- a/src/app/content/studyGuides/components/__snapshots__/Filters.spec.tsx.snap
+++ b/src/app/content/studyGuides/components/__snapshots__/Filters.spec.tsx.snap
@@ -29,6 +29,9 @@ exports[`Filters matches snapshot with UTG banner open (opened initially) 1`] =
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
 }
 
 input:not(:checked) + .c21 {
@@ -180,7 +183,7 @@ input:checked + .c21 .c22 {
   color: #0064A0;
 }
 
-.c60 {
+.c61 {
   cursor: pointer;
   border: none;
   margin: 0;
@@ -190,13 +193,13 @@ input:checked + .c21 .c22 {
   margin-right: 0.4rem;
 }
 
-.c60 svg {
+.c61 svg {
   height: 0.8rem;
   width: 0.8rem;
   color: #5e6062;
 }
 
-.c61 {
+.c62 {
   color: #424242;
   font-weight: 300;
   color: #5e6062;
@@ -208,7 +211,7 @@ input:checked + .c21 .c22 {
   line-height: 1.5rem;
 }
 
-.c59 {
+.c60 {
   margin-right: 3.2rem;
   display: -webkit-box;
   display: -webkit-flex;
@@ -222,7 +225,7 @@ input:checked + .c21 .c22 {
   height: 4rem;
 }
 
-.c58 {
+.c59 {
   color: #424242;
   font-size: 1.4rem;
   display: -webkit-box;
@@ -265,11 +268,11 @@ input:checked + .c21 .c22 {
   padding: 0 1rem;
 }
 
-.c30 {
+.c31 {
   display: none;
 }
 
-.c32 {
+.c33 {
   display: none;
   position: absolute;
   height: 2rem;
@@ -284,7 +287,7 @@ input:checked + .c21 .c22 {
   border-radius: 50%;
 }
 
-.c33 {
+.c34 {
   height: 1.4000000000000001rem;
   width: 1.4000000000000001rem;
   background-color: transparent;
@@ -298,7 +301,7 @@ input:checked + .c21 .c22 {
   border: 1px solid #fed200;
 }
 
-.c36 {
+.c37 {
   height: 1.4000000000000001rem;
   width: 1.4000000000000001rem;
   background-color: transparent;
@@ -312,7 +315,7 @@ input:checked + .c21 .c22 {
   border: 1px solid #92d101;
 }
 
-.c38 {
+.c39 {
   height: 1.4000000000000001rem;
   width: 1.4000000000000001rem;
   background-color: transparent;
@@ -326,7 +329,7 @@ input:checked + .c21 .c22 {
   border: 1px solid #00c3ed;
 }
 
-.c40 {
+.c41 {
   height: 1.4000000000000001rem;
   width: 1.4000000000000001rem;
   background-color: transparent;
@@ -340,7 +343,7 @@ input:checked + .c21 .c22 {
   border: 1px solid #545ec8;
 }
 
-.c28 {
+.c29 {
   position: relative;
   background-color: #ffff8a;
   border: 1px solid #8f7700;
@@ -362,19 +365,19 @@ input:checked + .c21 .c22 {
   overflow: visible;
 }
 
-.c28 .c29 {
+.c29 .c30 {
   height: 1rem;
   width: 1rem;
 }
 
-.c28 input:focus + .c31 {
+.c29 input:focus + .c32 {
   display: block;
   outline: 0.2rem auto Highlight;
   outline: 0.2rem auto -webkit-focus-ring-color;
   z-index: 1;
 }
 
-.c35 {
+.c36 {
   position: relative;
   background-color: #def99f;
   border: 1px solid #4e6f01;
@@ -396,19 +399,19 @@ input:checked + .c21 .c22 {
   overflow: visible;
 }
 
-.c35 .c29 {
+.c36 .c30 {
   height: 1rem;
   width: 1rem;
 }
 
-.c35 input:focus + .c31 {
+.c36 input:focus + .c32 {
   display: block;
   outline: 0.2rem auto Highlight;
   outline: 0.2rem auto -webkit-focus-ring-color;
   z-index: 1;
 }
 
-.c37 {
+.c38 {
   position: relative;
   background-color: #c8f5ff;
   border: 1px solid #006880;
@@ -430,19 +433,19 @@ input:checked + .c21 .c22 {
   overflow: visible;
 }
 
-.c37 .c29 {
+.c38 .c30 {
   height: 1rem;
   width: 1rem;
 }
 
-.c37 input:focus + .c31 {
+.c38 input:focus + .c32 {
   display: block;
   outline: 0.2rem auto Highlight;
   outline: 0.2rem auto -webkit-focus-ring-color;
   z-index: 1;
 }
 
-.c39 {
+.c40 {
   position: relative;
   background-color: #cbcfff;
   border: 1px solid #141a3e;
@@ -464,12 +467,12 @@ input:checked + .c21 .c22 {
   overflow: visible;
 }
 
-.c39 .c29 {
+.c40 .c30 {
   height: 1rem;
   width: 1rem;
 }
 
-.c39 input:focus + .c31 {
+.c40 input:focus + .c32 {
   display: block;
   outline: 0.2rem auto Highlight;
   outline: 0.2rem auto -webkit-focus-ring-color;
@@ -586,6 +589,9 @@ input:checked + .c21 .c22 {
   -ms-flex-direction: column;
   flex-direction: column;
   overflow-x: hidden;
+  list-style: none;
+  margin: 0;
+  padding: 0;
 }
 
 .c24 {
@@ -633,15 +639,15 @@ input:checked + .c21 .c22 {
   padding: 0.8rem;
 }
 
-.c11 .c27 {
+.c11 .c28 {
   margin: 0 1.6rem 0 1.6rem;
 }
 
-.c11 .c62:last-child {
+.c11 .c63:last-child {
   border-bottom: none;
 }
 
-.c34 {
+.c35 {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -650,7 +656,26 @@ input:checked + .c21 .c22 {
   white-space: nowrap;
 }
 
-.c42 {
+.c27 {
+  padding: 0;
+  border: none;
+  margin: 0;
+}
+
+.c27 legend {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  -webkit-clip: rect(0,0,0,0);
+  clip: rect(0,0,0,0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.c43 {
   cursor: pointer;
   border: none;
   padding: 0;
@@ -682,12 +707,12 @@ input:checked + .c21 .c22 {
   padding: 0 10px;
 }
 
-.c42:hover,
-.c42:focus {
+.c43:hover,
+.c43:focus {
   color: #424242;
 }
 
-.c46 {
+.c47 {
   font-weight: 600;
   font-size: 1.2rem;
   line-height: 1.5rem;
@@ -695,13 +720,13 @@ input:checked + .c21 .c22 {
   line-height: 1.5rem;
 }
 
-.c44 {
+.c45 {
   height: 2.5rem;
   width: 2.5rem;
   padding: 0.4rem;
 }
 
-.c43 {
+.c44 {
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   flex-direction: row;
@@ -714,13 +739,13 @@ input:checked + .c21 .c22 {
   padding-right: 2.4rem;
 }
 
-.c43 .c45 {
+.c44 .c46 {
   font-size: 1.6rem;
   line-height: 2.5rem;
   margin: 0px 0px 0px 0.5rem;
 }
 
-.c50 {
+.c51 {
   outline: none;
   position: relative;
   padding: 2rem 2.4rem;
@@ -729,12 +754,12 @@ input:checked + .c21 .c22 {
   margin-bottom: 1rem;
 }
 
-.c54 {
+.c55 {
   width: 100%;
   padding: 0 4.2rem;
 }
 
-.c52 {
+.c53 {
   color: #424242;
   font-size: 3.6rem;
   line-height: 4rem;
@@ -749,7 +774,7 @@ input:checked + .c21 .c22 {
   color: #fff;
 }
 
-.c55 {
+.c56 {
   cursor: pointer;
   border: none;
   margin: 0;
@@ -774,14 +799,14 @@ input:checked + .c21 .c22 {
   right: 2.4rem;
 }
 
-.c56 {
+.c57 {
   color: #000;
   height: 2.8rem;
   width: 2.8rem;
   padding: 0.4rem;
 }
 
-.c51 {
+.c52 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -792,7 +817,7 @@ input:checked + .c21 .c22 {
   align-items: center;
 }
 
-.c53 {
+.c54 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -803,12 +828,12 @@ input:checked + .c21 .c22 {
   justify-content: center;
 }
 
-.c48 {
+.c49 {
   height: 1.7rem;
   width: 1.7rem;
 }
 
-.c47 {
+.c48 {
   cursor: pointer;
   border: none;
   margin: 0;
@@ -838,7 +863,7 @@ input:checked + .c21 .c22 {
   color: #fff;
 }
 
-.c49 {
+.c50 {
   font-size: 1.6rem;
   line-height: 2.5rem;
   font-weight: 600;
@@ -871,11 +896,11 @@ input:checked + .c21 .c22 {
   text-transform: capitalize;
 }
 
-.c26 .c27 {
+.c26 .c28 {
   margin: 0 1.6rem 0 1.6rem;
 }
 
-.c41 {
+.c42 {
   margin-left: auto;
   display: -webkit-box;
   display: -webkit-flex;
@@ -889,13 +914,13 @@ input:checked + .c21 .c22 {
 }
 
 @media print {
-  .c60 {
+  .c61 {
     display: none;
   }
 }
 
 @media print {
-  .c61 {
+  .c62 {
     max-width: -webkit-max-content;
     max-width: -moz-max-content;
     max-width: max-content;
@@ -903,13 +928,13 @@ input:checked + .c21 .c22 {
 }
 
 @media screen and (max-width:75em) {
-  .c58 {
+  .c59 {
     padding: 0 2.4rem 0.4rem 2.4rem;
   }
 }
 
 @media print {
-  .c58 {
+  .c59 {
     margin: 0;
   }
 }
@@ -944,7 +969,7 @@ input:checked + .c21 .c22 {
 }
 
 @media print {
-  .c0 > *:not(.c57) {
+  .c0 > *:not(.c58) {
     display: none;
   }
 }
@@ -965,7 +990,7 @@ input:checked + .c21 .c22 {
 }
 
 @media screen and (max-width:50em) {
-  .c42 {
+  .c43 {
     -webkit-flex-direction: row;
     -ms-flex-direction: row;
     flex-direction: row;
@@ -980,7 +1005,7 @@ input:checked + .c21 .c22 {
 }
 
 @media screen and (max-width:50em) {
-  .c46 {
+  .c47 {
     font-size: 1.6rem;
     line-height: 2.5rem;
     margin-left: 1.2rem;
@@ -988,38 +1013,38 @@ input:checked + .c21 .c22 {
 }
 
 @media screen and (max-width:75em) {
-  .c43 {
+  .c44 {
     padding-right: 1.6rem;
   }
 }
 
 @media screen and (max-width:75em) {
-  .c43 .c45 {
+  .c44 .c46 {
     display: none;
   }
 }
 
 @media screen and (max-width:30em) {
-  .c50 {
+  .c51 {
     padding: 1rem 1.6rem;
   }
 }
 
 @media print {
-  .c50 {
+  .c51 {
     display: none;
   }
 }
 
 @media screen and (max-width:50em) {
-  .c54 {
+  .c55 {
     max-width: 30rem;
     padding: 0;
   }
 }
 
 @media screen and (max-width:75em) {
-  .c52 {
+  .c53 {
     color: #424242;
     font-size: 1.6rem;
     line-height: 2rem;
@@ -1034,21 +1059,21 @@ input:checked + .c21 .c22 {
 }
 
 @media screen and (max-width:30em) {
-  .c55 {
+  .c56 {
     top: 1rem;
     right: 1.6rem;
   }
 }
 
 @media screen and (max-width:75em) {
-  .c56 {
+  .c57 {
     height: 1.6rem;
     width: 1.6rem;
   }
 }
 
 @media screen and (max-width:75em) {
-  .c47 {
+  .c48 {
     margin-right: 0.8rem;
     padding-right: 1.4rem;
     padding-left: 1.4rem;
@@ -1056,13 +1081,13 @@ input:checked + .c21 .c22 {
 }
 
 @media print {
-  .c47 {
+  .c48 {
     display: none;
   }
 }
 
 @media screen and (max-width:75em) {
-  .c49 {
+  .c50 {
     display: none;
   }
 }
@@ -1139,255 +1164,270 @@ input:checked + .c21 .c22 {
         <div
           className="c16"
         >
-          <div
+          <ul
+            aria-label="Filter by chapters"
             className="c17"
           >
-            <label
-              className="c18 c19"
-            >
-              <input
-                checked={false}
-                disabled={true}
-                onChange={[Function]}
-                type="checkbox"
-              />
-              <span
-                className="c20 c21"
+            <li>
+              <label
+                className="c18 c19"
               >
-                <svg
-                  aria-hidden="true"
-                  className="c9 c22 c23"
-                  fill="currentColor"
-                  focusable="false"
-                  viewBox="0 0 512 512"
-                  xmlns="http://www.w3.org/2000/svg"
+                <input
+                  checked={false}
+                  disabled={true}
+                  onChange={[Function]}
+                  type="checkbox"
+                />
+                <span
+                  className="c20 c21"
                 >
-                  <path
-                    d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+                  <svg
+                    aria-hidden="true"
+                    className="c9 c22 c23"
                     fill="currentColor"
-                  />
-                </svg>
-              </span>
-              <span
-                className="c24"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "<span class=\\"os-number\\">1</span><span class=\\"os-divider\\"> </span><span class=\\"os-text\\">Test Chapter 1</span>",
+                    focusable="false"
+                    viewBox="0 0 512 512"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
+                <span
+                  className="c24"
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "<span class=\\"os-number\\">1</span><span class=\\"os-divider\\"> </span><span class=\\"os-text\\">Test Chapter 1</span>",
+                    }
                   }
-                }
-              />
-            </label>
-            <label
-              className="c18 c19"
-            >
-              <input
-                checked={false}
-                disabled={true}
-                onChange={[Function]}
-                type="checkbox"
-              />
-              <span
-                className="c20 c21"
+                />
+              </label>
+            </li>
+            <li>
+              <label
+                className="c18 c19"
               >
-                <svg
-                  aria-hidden="true"
-                  className="c9 c22 c23"
-                  fill="currentColor"
-                  focusable="false"
-                  viewBox="0 0 512 512"
-                  xmlns="http://www.w3.org/2000/svg"
+                <input
+                  checked={false}
+                  disabled={true}
+                  onChange={[Function]}
+                  type="checkbox"
+                />
+                <span
+                  className="c20 c21"
                 >
-                  <path
-                    d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+                  <svg
+                    aria-hidden="true"
+                    className="c9 c22 c23"
                     fill="currentColor"
-                  />
-                </svg>
-              </span>
-              <span
-                className="c24"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "<span class=\\"os-number\\">1</span><span class=\\"os-divider\\"> </span><span class=\\"os-text\\">Test Chapter 1.1</span>",
+                    focusable="false"
+                    viewBox="0 0 512 512"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
+                <span
+                  className="c24"
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "<span class=\\"os-number\\">1</span><span class=\\"os-divider\\"> </span><span class=\\"os-text\\">Test Chapter 1.1</span>",
+                    }
                   }
-                }
-              />
-            </label>
-            <label
-              className="c18 c25"
-            >
-              <input
-                checked={true}
-                disabled={false}
-                onChange={[Function]}
-                type="checkbox"
-              />
-              <span
-                className="c20 c21"
+                />
+              </label>
+            </li>
+            <li>
+              <label
+                className="c18 c25"
               >
-                <svg
-                  aria-hidden="true"
-                  className="c9 c22 c23"
-                  fill="currentColor"
-                  focusable="false"
-                  viewBox="0 0 512 512"
-                  xmlns="http://www.w3.org/2000/svg"
+                <input
+                  checked={true}
+                  disabled={false}
+                  onChange={[Function]}
+                  type="checkbox"
+                />
+                <span
+                  className="c20 c21"
                 >
-                  <path
-                    d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+                  <svg
+                    aria-hidden="true"
+                    className="c9 c22 c23"
                     fill="currentColor"
-                  />
-                </svg>
-              </span>
-              <span
-                className="c24"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "<span class=\\"os-number\\">2</span><span class=\\"os-divider\\"> </span><span class=\\"os-text\\">Test Chapter 2</span>",
+                    focusable="false"
+                    viewBox="0 0 512 512"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
+                <span
+                  className="c24"
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "<span class=\\"os-number\\">2</span><span class=\\"os-divider\\"> </span><span class=\\"os-text\\">Test Chapter 2</span>",
+                    }
                   }
-                }
-              />
-            </label>
-            <label
-              className="c18 c19"
-            >
-              <input
-                checked={false}
-                disabled={true}
-                onChange={[Function]}
-                type="checkbox"
-              />
-              <span
-                className="c20 c21"
+                />
+              </label>
+            </li>
+            <li>
+              <label
+                className="c18 c19"
               >
-                <svg
-                  aria-hidden="true"
-                  className="c9 c22 c23"
-                  fill="currentColor"
-                  focusable="false"
-                  viewBox="0 0 512 512"
-                  xmlns="http://www.w3.org/2000/svg"
+                <input
+                  checked={false}
+                  disabled={true}
+                  onChange={[Function]}
+                  type="checkbox"
+                />
+                <span
+                  className="c20 c21"
                 >
-                  <path
-                    d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+                  <svg
+                    aria-hidden="true"
+                    className="c9 c22 c23"
                     fill="currentColor"
-                  />
-                </svg>
-              </span>
-              <span
-                className="c24"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "<span class=\\"os-number\\">3</span><span class=\\"os-divider\\"> </span><span class=\\"os-text\\">Test Chapter 3</span>",
+                    focusable="false"
+                    viewBox="0 0 512 512"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
+                <span
+                  className="c24"
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "<span class=\\"os-number\\">3</span><span class=\\"os-divider\\"> </span><span class=\\"os-text\\">Test Chapter 3</span>",
+                    }
                   }
-                }
-              />
-            </label>
-            <label
-              className="c18 c19"
-            >
-              <input
-                checked={false}
-                disabled={true}
-                onChange={[Function]}
-                type="checkbox"
-              />
-              <span
-                className="c20 c21"
+                />
+              </label>
+            </li>
+            <li>
+              <label
+                className="c18 c19"
               >
-                <svg
-                  aria-hidden="true"
-                  className="c9 c22 c23"
-                  fill="currentColor"
-                  focusable="false"
-                  viewBox="0 0 512 512"
-                  xmlns="http://www.w3.org/2000/svg"
+                <input
+                  checked={false}
+                  disabled={true}
+                  onChange={[Function]}
+                  type="checkbox"
+                />
+                <span
+                  className="c20 c21"
                 >
-                  <path
-                    d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+                  <svg
+                    aria-hidden="true"
+                    className="c9 c22 c23"
                     fill="currentColor"
-                  />
-                </svg>
-              </span>
-              <span
-                className="c24"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "<span class=\\"os-number\\">4</span><span class=\\"os-divider\\"> </span><span class=\\"os-text\\">Test Chapter 4</span>",
+                    focusable="false"
+                    viewBox="0 0 512 512"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
+                <span
+                  className="c24"
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "<span class=\\"os-number\\">4</span><span class=\\"os-divider\\"> </span><span class=\\"os-text\\">Test Chapter 4</span>",
+                    }
                   }
-                }
-              />
-            </label>
-            <label
-              className="c18 c19"
-            >
-              <input
-                checked={false}
-                disabled={true}
-                onChange={[Function]}
-                type="checkbox"
-              />
-              <span
-                className="c20 c21"
+                />
+              </label>
+            </li>
+            <li>
+              <label
+                className="c18 c19"
               >
-                <svg
-                  aria-hidden="true"
-                  className="c9 c22 c23"
-                  fill="currentColor"
-                  focusable="false"
-                  viewBox="0 0 512 512"
-                  xmlns="http://www.w3.org/2000/svg"
+                <input
+                  checked={false}
+                  disabled={true}
+                  onChange={[Function]}
+                  type="checkbox"
+                />
+                <span
+                  className="c20 c21"
                 >
-                  <path
-                    d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+                  <svg
+                    aria-hidden="true"
+                    className="c9 c22 c23"
                     fill="currentColor"
-                  />
-                </svg>
-              </span>
-              <span
-                className="c24"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "<span class=\\"os-number\\">10</span><span class=\\"os-divider\\"> </span><span class=\\"os-text\\">Test Chapter 5</span>",
+                    focusable="false"
+                    viewBox="0 0 512 512"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
+                <span
+                  className="c24"
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "<span class=\\"os-number\\">10</span><span class=\\"os-divider\\"> </span><span class=\\"os-text\\">Test Chapter 5</span>",
+                    }
                   }
-                }
-              />
-            </label>
-            <label
-              className="c18 c19"
-            >
-              <input
-                checked={false}
-                disabled={true}
-                onChange={[Function]}
-                type="checkbox"
-              />
-              <span
-                className="c20 c21"
+                />
+              </label>
+            </li>
+            <li>
+              <label
+                className="c18 c19"
               >
-                <svg
-                  aria-hidden="true"
-                  className="c9 c22 c23"
-                  fill="currentColor"
-                  focusable="false"
-                  viewBox="0 0 512 512"
-                  xmlns="http://www.w3.org/2000/svg"
+                <input
+                  checked={false}
+                  disabled={true}
+                  onChange={[Function]}
+                  type="checkbox"
+                />
+                <span
+                  className="c20 c21"
                 >
-                  <path
-                    d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+                  <svg
+                    aria-hidden="true"
+                    className="c9 c22 c23"
                     fill="currentColor"
-                  />
-                </svg>
-              </span>
-              <span
-                className="c24"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "<span class=\\"os-number\\">12</span><span class=\\"os-divider\\"> </span><span class=\\"os-text\\">Test Chapter 6</span>",
+                    focusable="false"
+                    viewBox="0 0 512 512"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </span>
+                <span
+                  className="c24"
+                  dangerouslySetInnerHTML={
+                    Object {
+                      "__html": "<span class=\\"os-number\\">12</span><span class=\\"os-divider\\"> </span><span class=\\"os-text\\">Test Chapter 6</span>",
+                    }
                   }
-                }
-              />
-            </label>
-          </div>
+                />
+              </label>
+            </li>
+          </ul>
         </div>
       </div>
     </div>
@@ -1448,306 +1488,313 @@ input:checked + .c21 .c22 {
             None
           </button>
         </div>
-        <label
-          className="c18 c25"
+        <fieldset
+          className="c27"
         >
-          <input
-            checked={true}
-            disabled={false}
-            onChange={[Function]}
-            type="checkbox"
-          />
-          <span
-            className="c20 c21"
+          <legend>
+            Filter by colors
+          </legend>
+          <label
+            className="c18 c25"
           >
-            <svg
-              aria-hidden="true"
-              className="c9 c22 c23"
-              fill="currentColor"
-              focusable="false"
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
+            <input
+              checked={true}
+              disabled={false}
+              onChange={[Function]}
+              type="checkbox"
+            />
+            <span
+              className="c20 c21"
             >
-              <path
-                d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+              <svg
+                aria-hidden="true"
+                className="c9 c22 c23"
                 fill="currentColor"
-              />
-            </svg>
-          </span>
-          <div
-            className="c27 c28"
-          >
-            <svg
-              aria-hidden="true"
-              className="c9 c29 c30"
-              fill="currentColor"
-              focusable="false"
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
+                focusable="false"
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+                  fill="currentColor"
+                />
+              </svg>
+            </span>
+            <div
+              className="c28 c29"
             >
-              <path
-                d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+              <svg
+                aria-hidden="true"
+                className="c9 c30 c31"
                 fill="currentColor"
+                focusable="false"
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+                  fill="currentColor"
+                />
+              </svg>
+              <span
+                className="c32 c33"
+                size="small"
+                style={
+                  Object {
+                    "focusBorder": "#8f7700",
+                    "focused": "#fed200",
+                    "label": "yellow",
+                    "passive": "#ffff8a",
+                  }
+                }
               />
-            </svg>
-            <span
-              className="c31 c32"
-              size="small"
-              style={
-                Object {
-                  "focusBorder": "#8f7700",
-                  "focused": "#fed200",
-                  "label": "yellow",
-                  "passive": "#ffff8a",
+              <span
+                className="c34"
+                size="small"
+                style={
+                  Object {
+                    "focusBorder": "#8f7700",
+                    "focused": "#fed200",
+                    "label": "yellow",
+                    "passive": "#ffff8a",
+                  }
                 }
-              }
-            />
+              />
+            </div>
             <span
-              className="c33"
-              size="small"
-              style={
-                Object {
-                  "focusBorder": "#8f7700",
-                  "focused": "#fed200",
-                  "label": "yellow",
-                  "passive": "#ffff8a",
-                }
-              }
-            />
-          </div>
-          <span
-            className="c34"
-          >
-            Key Terms
-          </span>
-        </label>
-        <label
-          className="c18 c25"
-        >
-          <input
-            checked={true}
-            disabled={false}
-            onChange={[Function]}
-            type="checkbox"
-          />
-          <span
-            className="c20 c21"
+              className="c35"
+            >
+              Key Terms
+            </span>
+          </label>
+          <label
+            className="c18 c25"
           >
-            <svg
-              aria-hidden="true"
-              className="c9 c22 c23"
-              fill="currentColor"
-              focusable="false"
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
+            <input
+              checked={true}
+              disabled={false}
+              onChange={[Function]}
+              type="checkbox"
+            />
+            <span
+              className="c20 c21"
             >
-              <path
-                d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+              <svg
+                aria-hidden="true"
+                className="c9 c22 c23"
                 fill="currentColor"
-              />
-            </svg>
-          </span>
-          <div
-            className="c27 c35"
-          >
-            <svg
-              aria-hidden="true"
-              className="c9 c29 c30"
-              fill="currentColor"
-              focusable="false"
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
+                focusable="false"
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+                  fill="currentColor"
+                />
+              </svg>
+            </span>
+            <div
+              className="c28 c36"
             >
-              <path
-                d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+              <svg
+                aria-hidden="true"
+                className="c9 c30 c31"
                 fill="currentColor"
+                focusable="false"
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+                  fill="currentColor"
+                />
+              </svg>
+              <span
+                className="c32 c33"
+                size="small"
+                style={
+                  Object {
+                    "focusBorder": "#4e6f01",
+                    "focused": "#92d101",
+                    "label": "green",
+                    "passive": "#def99f",
+                  }
+                }
               />
-            </svg>
-            <span
-              className="c31 c32"
-              size="small"
-              style={
-                Object {
-                  "focusBorder": "#4e6f01",
-                  "focused": "#92d101",
-                  "label": "green",
-                  "passive": "#def99f",
+              <span
+                className="c37"
+                size="small"
+                style={
+                  Object {
+                    "focusBorder": "#4e6f01",
+                    "focused": "#92d101",
+                    "label": "green",
+                    "passive": "#def99f",
+                  }
                 }
-              }
-            />
+              />
+            </div>
             <span
-              className="c36"
-              size="small"
-              style={
-                Object {
-                  "focusBorder": "#4e6f01",
-                  "focused": "#92d101",
-                  "label": "green",
-                  "passive": "#def99f",
-                }
-              }
-            />
-          </div>
-          <span
-            className="c34"
-          >
-            Connections & Relationships
-          </span>
-        </label>
-        <label
-          className="c18 c25"
-        >
-          <input
-            checked={true}
-            disabled={false}
-            onChange={[Function]}
-            type="checkbox"
-          />
-          <span
-            className="c20 c21"
+              className="c35"
+            >
+              Connections & Relationships
+            </span>
+          </label>
+          <label
+            className="c18 c25"
           >
-            <svg
-              aria-hidden="true"
-              className="c9 c22 c23"
-              fill="currentColor"
-              focusable="false"
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
+            <input
+              checked={true}
+              disabled={false}
+              onChange={[Function]}
+              type="checkbox"
+            />
+            <span
+              className="c20 c21"
             >
-              <path
-                d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+              <svg
+                aria-hidden="true"
+                className="c9 c22 c23"
                 fill="currentColor"
-              />
-            </svg>
-          </span>
-          <div
-            className="c27 c37"
-          >
-            <svg
-              aria-hidden="true"
-              className="c9 c29 c30"
-              fill="currentColor"
-              focusable="false"
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
+                focusable="false"
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+                  fill="currentColor"
+                />
+              </svg>
+            </span>
+            <div
+              className="c28 c38"
             >
-              <path
-                d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+              <svg
+                aria-hidden="true"
+                className="c9 c30 c31"
                 fill="currentColor"
+                focusable="false"
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+                  fill="currentColor"
+                />
+              </svg>
+              <span
+                className="c32 c33"
+                size="small"
+                style={
+                  Object {
+                    "focusBorder": "#006880",
+                    "focused": "#00c3ed",
+                    "label": "blue",
+                    "passive": "#c8f5ff",
+                  }
+                }
               />
-            </svg>
-            <span
-              className="c31 c32"
-              size="small"
-              style={
-                Object {
-                  "focusBorder": "#006880",
-                  "focused": "#00c3ed",
-                  "label": "blue",
-                  "passive": "#c8f5ff",
+              <span
+                className="c39"
+                size="small"
+                style={
+                  Object {
+                    "focusBorder": "#006880",
+                    "focused": "#00c3ed",
+                    "label": "blue",
+                    "passive": "#c8f5ff",
+                  }
                 }
-              }
-            />
+              />
+            </div>
             <span
-              className="c38"
-              size="small"
-              style={
-                Object {
-                  "focusBorder": "#006880",
-                  "focused": "#00c3ed",
-                  "label": "blue",
-                  "passive": "#c8f5ff",
-                }
-              }
-            />
-          </div>
-          <span
-            className="c34"
-          >
-            Important Concepts
-          </span>
-        </label>
-        <label
-          className="c18 c25"
-        >
-          <input
-            checked={true}
-            disabled={false}
-            onChange={[Function]}
-            type="checkbox"
-          />
-          <span
-            className="c20 c21"
+              className="c35"
+            >
+              Important Concepts
+            </span>
+          </label>
+          <label
+            className="c18 c25"
           >
-            <svg
-              aria-hidden="true"
-              className="c9 c22 c23"
-              fill="currentColor"
-              focusable="false"
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
+            <input
+              checked={true}
+              disabled={false}
+              onChange={[Function]}
+              type="checkbox"
+            />
+            <span
+              className="c20 c21"
             >
-              <path
-                d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+              <svg
+                aria-hidden="true"
+                className="c9 c22 c23"
                 fill="currentColor"
-              />
-            </svg>
-          </span>
-          <div
-            className="c27 c39"
-          >
-            <svg
-              aria-hidden="true"
-              className="c9 c29 c30"
-              fill="currentColor"
-              focusable="false"
-              viewBox="0 0 512 512"
-              xmlns="http://www.w3.org/2000/svg"
+                focusable="false"
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+                  fill="currentColor"
+                />
+              </svg>
+            </span>
+            <div
+              className="c28 c40"
             >
-              <path
-                d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+              <svg
+                aria-hidden="true"
+                className="c9 c30 c31"
                 fill="currentColor"
+                focusable="false"
+                viewBox="0 0 512 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+                  fill="currentColor"
+                />
+              </svg>
+              <span
+                className="c32 c33"
+                size="small"
+                style={
+                  Object {
+                    "focusBorder": "#141a3e",
+                    "focused": "#545ec8",
+                    "label": "purple",
+                    "passive": "#cbcfff",
+                  }
+                }
               />
-            </svg>
-            <span
-              className="c31 c32"
-              size="small"
-              style={
-                Object {
-                  "focusBorder": "#141a3e",
-                  "focused": "#545ec8",
-                  "label": "purple",
-                  "passive": "#cbcfff",
+              <span
+                className="c41"
+                size="small"
+                style={
+                  Object {
+                    "focusBorder": "#141a3e",
+                    "focused": "#545ec8",
+                    "label": "purple",
+                    "passive": "#cbcfff",
+                  }
                 }
-              }
-            />
+              />
+            </div>
             <span
-              className="c40"
-              size="small"
-              style={
-                Object {
-                  "focusBorder": "#141a3e",
-                  "focused": "#545ec8",
-                  "label": "purple",
-                  "passive": "#cbcfff",
-                }
-              }
-            />
-          </div>
-          <span
-            className="c34"
-          >
-            Enrichment
-          </span>
-        </label>
+              className="c35"
+            >
+              Enrichment
+            </span>
+          </label>
+        </fieldset>
       </div>
     </div>
     <div
-      className="c41"
+      className="c42"
     >
       <button
         aria-label="print"
-        className="c42 c43"
+        className="c43 c44"
         data-analytics-label="print"
         data-testid="print"
         disabled={true}
@@ -1755,7 +1802,7 @@ input:checked + .c21 .c22 {
       >
         <svg
           aria-hidden="true"
-          className="c9 c44"
+          className="c9 c45"
           fill="currentColor"
           focusable="false"
           viewBox="0 0 512 512"
@@ -1767,7 +1814,7 @@ input:checked + .c21 .c22 {
           />
         </svg>
         <span
-          className="c45 c46"
+          className="c46 c47"
         >
           Print
         </span>
@@ -1776,14 +1823,14 @@ input:checked + .c21 .c22 {
         aria-controls="using-this-guide-text"
         aria-expanded={true}
         aria-label="Using This Guide"
-        className="c47"
+        className="c48"
         data-analytics-disable-track={true}
         onClick={[Function]}
         type="button"
       >
         <svg
           aria-hidden="true"
-          className="c9 c48"
+          className="c9 c49"
           fill="currentColor"
           focusable="false"
           viewBox="0 0 512 512"
@@ -1795,7 +1842,7 @@ input:checked + .c21 .c22 {
           />
         </svg>
         <span
-          className="c49"
+          className="c50"
           id="using-this-guide-text"
         >
           Using This Guide
@@ -1804,19 +1851,19 @@ input:checked + .c21 .c22 {
     </div>
   </div>
   <div
-    className="c50"
+    className="c51"
   >
     <div
-      className="c51"
+      className="c52"
     >
       <h2
-        className="c52"
+        className="c53"
       >
         Using This Guide
       </h2>
     </div>
     <div
-      className="c53"
+      className="c54"
     >
       <picture>
         <source
@@ -1825,7 +1872,7 @@ input:checked + .c21 .c22 {
         />
         <img
           alt="The image presents the structure of study guides. The first element of each block summarizes, clarifies, or enriches key content. The second element is taken directly from the book. On the left side, there is a color label depending on the content."
-          className="c54"
+          className="c55"
           src="banner.png"
           tabIndex={0}
         />
@@ -1833,14 +1880,14 @@ input:checked + .c21 .c22 {
     </div>
     <button
       aria-label="Closes the image describing the structure of study guides."
-      className="c55"
+      className="c56"
       data-analytics-disable-track={true}
       data-testid="close-utg"
       onClick={[Function]}
     >
       <svg
         aria-hidden="true"
-        className="c9 c56"
+        className="c9 c57"
         fill="currentColor"
         focusable="false"
         viewBox="0 0 352 512"
@@ -1856,14 +1903,14 @@ input:checked + .c21 .c22 {
   <ul
     aria-atomic="true"
     aria-live="polite"
-    className="c57 c58"
+    className="c58 c59"
   >
     <li
-      className="c59"
+      className="c60"
     >
       <button
         aria-label="Remove breadcrumb for chapter 2 Test Chapter 2"
-        className="c60"
+        className="c61"
         data-analytics-label="Remove breadcrumb for chapter 2 Test Chapter 2"
         onClick={[Function]}
       >
@@ -1895,7 +1942,7 @@ input:checked + .c21 .c22 {
         </svg>
       </button>
       <span
-        className="c61"
+        className="c62"
         dangerouslySetInnerHTML={
           Object {
             "__html": "<span class=\\"os-number\\">2</span><span class=\\"os-divider\\"> </span><span class=\\"os-text\\">Test Chapter 2</span>",
@@ -1904,11 +1951,11 @@ input:checked + .c21 .c22 {
       />
     </li>
     <li
-      className="c59"
+      className="c60"
     >
       <button
         aria-label="Remove breadcrumb for label Important Concepts"
-        className="c60"
+        className="c61"
         data-analytics-label="Remove breadcrumb for label Important Concepts"
         onClick={[Function]}
       >
@@ -1940,17 +1987,17 @@ input:checked + .c21 .c22 {
         </svg>
       </button>
       <span
-        className="c61"
+        className="c62"
       >
         Important Concepts
       </span>
     </li>
     <li
-      className="c59"
+      className="c60"
     >
       <button
         aria-label="Remove breadcrumb for label Connections & Relationships"
-        className="c60"
+        className="c61"
         data-analytics-label="Remove breadcrumb for label Connections & Relationships"
         onClick={[Function]}
       >
@@ -1982,17 +2029,17 @@ input:checked + .c21 .c22 {
         </svg>
       </button>
       <span
-        className="c61"
+        className="c62"
       >
         Connections & Relationships
       </span>
     </li>
     <li
-      className="c59"
+      className="c60"
     >
       <button
         aria-label="Remove breadcrumb for label Enrichment"
-        className="c60"
+        className="c61"
         data-analytics-label="Remove breadcrumb for label Enrichment"
         onClick={[Function]}
       >
@@ -2024,17 +2071,17 @@ input:checked + .c21 .c22 {
         </svg>
       </button>
       <span
-        className="c61"
+        className="c62"
       >
         Enrichment
       </span>
     </li>
     <li
-      className="c59"
+      className="c60"
     >
       <button
         aria-label="Remove breadcrumb for label Key Terms"
-        className="c60"
+        className="c61"
         data-analytics-label="Remove breadcrumb for label Key Terms"
         onClick={[Function]}
       >
@@ -2066,7 +2113,7 @@ input:checked + .c21 .c22 {
         </svg>
       </button>
       <span
-        className="c61"
+        className="c62"
       >
         Key Terms
       </span>