@qti-components/theme 1.6.0 → 2.0.1

package/dist/native.css

@@ -1,3 +1,4 @@
+@layer qti-base {
 /* https://www.imsglobal.org/sites/default/files/spec/qti/v3/guide/img/qti3p0.css */
 /* ============================
    QTI 3 shared css
@@ -14,51 +15,66 @@
    11. Layout
    12. Other QTI 3 presentation utilities
    ============================ */
+
 /* ==========
   Display css
   =========== */
+
 .qti-display-inline {
   display: inline;
 }
+
 .qti-display-inline-block {
   display: inline-block;
 }
+
 .qti-display-block {
   display: block;
 }
+
 .qti-display-flex {
   display: flex;
 }
+
 .qti-display-inline-flex {
   display: inline-flex;
 }
+
 .qti-display-grid {
   display: grid;
 }
+
 .qti-display-inline-grid {
   display: inline-grid;
 }
+
 .qti-display-table {
   display: table;
 }
+
 .qti-display-table-cell {
   display: table-cell;
 }
+
 .qti-display-table-row {
   display: table-row;
 }
+
 .qti-display-list-item {
   display: list-item;
 }
+
 .qti-display-inherit {
   display: inherit;
 }
+
 /* 
    * hidden to screen readers and sighted
    */
 .qti-hidden {
   display: none;
 }
+
 /*
   * visible to screen readers, hidden to sighted
    */
@@ -71,48 +87,62 @@
   border: 0;
   margin: -1px;
 }
+
 /* =============================
      Special flex styles
      ============================= */
+
 .qti-flex-direction-column {
   flex-direction: column;
 }
+
 .qti-flex-direction-row {
   flex-direction: row;
 }
+
 .qti-flex-grow-1 {
   flex-grow: 1;
 }
+
 .qti-flex-grow-0 {
   flex-grow: 0;
 }
+
 /* =========
     Margin css
     ========== */
+
 /**
    * For margin Top and Bottom and Left and Right
    */
 .qti-margin-0 {
   margin: 0 !important;
 }
+
 .qti-margin-1 {
   margin: 0.25rem !important;
 }
+
 .qti-margin-2 {
   margin: 0.5rem !important;
 }
+
 .qti-margin-3 {
   margin: 1rem !important;
 }
+
 .qti-margin-4 {
   margin: 1.5rem !important;
 }
+
 .qti-margin-5 {
   margin: 3rem !important;
 }
+
 .qti-margin-auto {
   margin: auto !important;
 }
+
 /*
    For margin Left and Right
    */
@@ -120,30 +150,37 @@
   margin-right: 0 !important;
   margin-left: 0 !important;
 }
+
 .qti-margin-x-1 {
   margin-right: 0.25rem !important;
   margin-left: 0.25rem !important;
 }
+
 .qti-margin-x-2 {
   margin-right: 0.5rem !important;
   margin-left: 0.5rem !important;
 }
+
 .qti-margin-x-3 {
   margin-right: 1rem !important;
   margin-left: 1rem !important;
 }
+
 .qti-margin-x-4 {
   margin-right: 1.5rem !important;
   margin-left: 1.5rem !important;
 }
+
 .qti-margin-x-5 {
   margin-right: 3rem !important;
   margin-left: 3rem !important;
 }
+
 .qti-margin-x-auto {
   margin-right: auto !important;
   margin-left: auto !important;
 }
+
 /*
    For margin Top and Bottom
    */
@@ -151,150 +188,192 @@
   margin-top: 0 !important;
   margin-bottom: 0 !important;
 }
+
 .qti-margin-y-1 {
   margin-top: 0.25rem !important;
   margin-bottom: 0.25rem !important;
 }
+
 .qti-margin-y-2 {
   margin-top: 0.5rem !important;
   margin-bottom: 0.5rem !important;
 }
+
 .qti-margin-y-3 {
   margin-top: 1rem !important;
   margin-bottom: 1rem !important;
 }
+
 .qti-margin-y-4 {
   margin-top: 1.5rem !important;
   margin-bottom: 1.5rem !important;
 }
+
 .qti-margin-y-5 {
   margin-top: 3rem !important;
   margin-bottom: 3rem !important;
 }
+
 .qti-margin-y-auto {
   margin-top: auto !important;
   margin-bottom: auto !important;
 }
+
 /*
    For margin Top
    */
 .qti-margin-t-0 {
   margin-top: 0 !important;
 }
+
 .qti-margin-t-1 {
   margin-top: 0.25rem !important;
 }
+
 .qti-margin-t-2 {
   margin-top: 0.5rem !important;
 }
+
 .qti-margin-t-3 {
   margin-top: 1rem !important;
 }
+
 .qti-margin-t-4 {
   margin-top: 1.5rem !important;
 }
+
 .qti-margin-t-5 {
   margin-top: 3rem !important;
 }
+
 .qti-margin-t-auto {
   margin-top: auto !important;
 }
+
 /* 
   For margin Bottom
    */
 .qti-margin-b-0 {
   margin-bottom: 0 !important;
 }
+
 .qti-margin-b-1 {
   margin-bottom: 0.25rem !important;
 }
+
 .qti-margin-b-2 {
   margin-bottom: 0.5rem !important;
 }
+
 .qti-margin-b-3 {
   margin-bottom: 1rem !important;
 }
+
 .qti-margin-b-4 {
   margin-bottom: 1.5rem !important;
 }
+
 .qti-margin-b-5 {
   margin-bottom: 3rem !important;
 }
+
 .qti-margin-b-auto {
   margin-bottom: auto !important;
 }
+
 /*
    For margin Start LTR
    */
 .qti-margin-s-0 {
   margin-left: 0 !important;
 }
+
 .qti-margin-s-1 {
   margin-left: 0.25rem !important;
 }
+
 .qti-margin-s-2 {
   margin-left: 0.5rem !important;
 }
+
 .qti-margin-s-3 {
   margin-left: 1rem !important;
 }
+
 .qti-margin-s-4 {
   margin-left: 1.5rem !important;
 }
+
 .qti-margin-s-5 {
   margin-left: 3rem !important;
 }
+
 .qti-margin-s-auto {
   margin-left: auto !important;
 }
+
 /* 
   For margin End LTR
    */
 .qti-margin-e-0 {
   margin-right: 0 !important;
 }
+
 .qti-margin-e-1 {
   margin-right: 0.25rem !important;
 }
+
 .qti-margin-e-2 {
   margin-right: 0.5rem !important;
 }
+
 .qti-margin-e-3 {
   margin-right: 1rem !important;
 }
+
 .qti-margin-e-4 {
   margin-right: 1.5rem !important;
 }
+
 .qti-margin-e-5 {
   margin-right: 3rem !important;
 }
+
 .qti-margin-e-auto {
   margin-right: auto !important;
 }
+
 /* =========
     Padding css
     ========== */
+
 /*
   For padding Top and Bottom and Left and Right
    */
 .qti-padding-0 {
   padding: 0 !important;
 }
+
 .qti-padding-1 {
   padding: 0.25rem !important;
 }
+
 .qti-padding-2 {
   padding: 0.5rem !important;
 }
+
 .qti-padding-3 {
   padding: 1rem !important;
 }
+
 .qti-padding-4 {
   padding: 1.5rem !important;
 }
+
 .qti-padding-5 {
   padding: 3rem !important;
 }
+
 /*
    For padding Left and Right
    */
@@ -302,26 +381,32 @@
   padding-right: 0 !important;
   padding-left: 0 !important;
 }
+
 .qti-padding-x-1 {
   padding-right: 0.25rem !important;
   padding-left: 0.25rem !important;
 }
+
 .qti-padding-x-2 {
   padding-right: 0.5rem !important;
   padding-left: 0.5rem !important;
 }
+
 .qti-padding-x-3 {
   padding-right: 1rem !important;
   padding-left: 1rem !important;
 }
+
 .qti-padding-x-4 {
   padding-right: 1.5rem !important;
   padding-left: 1.5rem !important;
 }
+
 .qti-padding-x-5 {
   padding-right: 3rem !important;
   padding-left: 3rem !important;
 }
+
 /*
     For padding Top and Bottom
    */
@@ -329,727 +414,962 @@
   padding-top: 0 !important;
   padding-bottom: 0 !important;
 }
+
 .qti-padding-y-1 {
   padding-top: 0.25rem !important;
   padding-bottom: 0.25rem !important;
 }
+
 .qti-padding-y-2 {
   padding-top: 0.5rem !important;
   padding-bottom: 0.5rem !important;
 }
+
 .qti-padding-y-3 {
   padding-top: 1rem !important;
   padding-bottom: 1rem !important;
 }
+
 .qti-padding-y-4 {
   padding-top: 1.5rem !important;
   padding-bottom: 1.5rem !important;
 }
+
 .qti-padding-y-5 {
   padding-top: 3rem !important;
   padding-bottom: 3rem !important;
 }
+
 /*
    For padding Top
    */
 .qti-padding-t-0 {
   padding-top: 0 !important;
 }
+
 .qti-padding-t-1 {
   padding-top: 0.25rem !important;
 }
+
 .qti-padding-t-2 {
   padding-top: 0.5rem !important;
 }
+
 .qti-padding-t-3 {
   padding-top: 1rem !important;
 }
+
 .qti-padding-t-4 {
   padding-top: 1.5rem !important;
 }
+
 .qti-padding-t-5 {
   padding-top: 3rem !important;
 }
+
 /*
    For padding Bottom
    */
 .qti-padding-b-0 {
   padding-bottom: 0 !important;
 }
+
 .qti-padding-b-1 {
   padding-bottom: 0.25rem !important;
 }
+
 .qti-padding-b-2 {
   padding-bottom: 0.5rem !important;
 }
+
 .qti-padding-b-3 {
   padding-bottom: 1rem !important;
 }
+
 .qti-padding-b-4 {
   padding-bottom: 1.5rem !important;
 }
+
 .qti-padding-b-5 {
   padding-bottom: 3rem !important;
 }
+
 /*
     For padding Start LTR
    */
 .qti-padding-s-0 {
   padding-left: 0 !important;
 }
+
 .qti-padding-s-1 {
   padding-left: 0.25rem !important;
 }
+
 .qti-padding-s-2 {
   padding-left: 0.5rem !important;
 }
+
 .qti-padding-s-3 {
   padding-left: 1rem !important;
 }
+
 .qti-padding-s-4 {
   padding-left: 1.5rem !important;
 }
+
 .qti-padding-s-5 {
   padding-left: 3rem !important;
 }
+
 /*
    For padding End LTR
    */
 .qti-padding-e-0 {
   padding-right: 0 !important;
 }
+
 .qti-padding-e-1 {
   padding-right: 0.25rem !important;
 }
+
 .qti-padding-e-2 {
   padding-right: 0.5rem !important;
 }
+
 .qti-padding-e-3 {
   padding-right: 1rem !important;
 }
+
 .qti-padding-e-4 {
   padding-right: 1.5rem !important;
 }
+
 .qti-padding-e-5 {
   padding-right: 3rem !important;
 }
+
 /* ====================
      Horizontal alignment
      ==================== */
+
 .qti-align-left {
   text-align: left;
 }
+
 .qti-align-center {
   text-align: center;
 }
+
 .qti-align-right {
   text-align: right;
 }
+
 /* ==================
      Vertical alignment
      ================== */
+
 .qti-valign-top {
   vertical-align: top;
 }
+
 .qti-valign-middle {
   vertical-align: middle;
 }
+
 .qti-valign-baseline {
   vertical-align: baseline;
 }
+
 .qti-valign-bottom {
   vertical-align: bottom;
 }
+
 /* =============
      Height styles
      ============= */
+
 .qti-height-0 {
   height: 0;
 }
+
 .qti-height-px {
   height: 1px;
 }
+
 .qti-height-0p5 {
   height: 0.125rem;
 }
+
 .qti-height-1 {
   height: 0.25rem;
 }
+
 .qti-height-1p5 {
   height: 0.375rem;
 }
+
 .qti-height-2 {
   height: 0.5rem;
 }
+
 .qti-height-2p5 {
   height: 0.625rem;
 }
+
 .qti-height-3 {
   height: 0.75rem;
 }
+
 .qti-height-3p5 {
   height: 0.875rem;
 }
+
 .qti-height-4 {
   height: 1rem;
 }
+
 .qti-height-5 {
   height: 1.25rem;
 }
+
 .qti-height-6 {
   height: 1.5rem;
 }
+
 .qti-height-7 {
   height: 1.75rem;
 }
+
 .qti-height-8 {
   height: 2rem;
 }
+
 .qti-height-9 {
   height: 2.25rem;
 }
+
 .qti-height-10 {
   height: 2.5rem;
 }
+
 .qti-height-11 {
   height: 2.75rem;
 }
+
 .qti-height-12 {
   height: 3rem;
 }
+
 .qti-height-14 {
   height: 3.5rem;
 }
+
 .qti-height-16 {
   height: 4rem;
 }
+
 .qti-height-20 {
   height: 5rem;
 }
+
 .qti-height-24 {
   height: 6rem;
 }
+
 .qti-height-28 {
   height: 7rem;
 }
+
 .qti-height-32 {
   height: 8rem;
 }
+
 .qti-height-36 {
   height: 9rem;
 }
+
 .qti-height-40 {
   height: 10rem;
 }
+
 .qti-height-44 {
   height: 11rem;
 }
+
 .qti-height-48 {
   height: 12rem;
 }
+
 .qti-height-52 {
   height: 13rem;
 }
+
 .qti-height-56 {
   height: 14rem;
 }
+
 .qti-height-60 {
   height: 15rem;
 }
+
 .qti-height-64 {
   height: 16rem;
 }
+
 .qti-height-72 {
   height: 18rem;
 }
+
 .qti-height-80 {
   height: 20rem;
 }
+
 .qti-height-96 {
   height: 24rem;
 }
+
 .qti-height-1-2 {
   height: 50%;
 }
+
 .qti-height-1-3 {
   height: 33.3333%;
 }
+
 .qti-height-2-3 {
   height: 66.6667%;
 }
+
 .qti-height-1-4 {
   height: 25%;
 }
+
 .qti-height-2-4 {
   height: 50%;
 }
+
 .qti-height-3-4 {
   height: 75%;
 }
+
 .qti-height-1-5 {
   height: 20%;
 }
+
 .qti-height-2-5 {
   height: 40%;
 }
+
 .qti-height-3-5 {
   height: 60%;
 }
+
 .qti-height-4-5 {
   height: 80%;
 }
+
 .qti-height-1-6 {
   height: 16.6667%;
 }
+
 .qti-height-2-6 {
   height: 33.3333%;
 }
+
 .qti-height-3-6 {
   height: 50%;
 }
+
 .qti-height-4-6 {
   height: 66.6667%;
 }
+
 .qti-height-5-6 {
   height: 83.3333%;
 }
+
 .qti-height-auto {
   height: auto;
 }
+
 .qti-height-full {
   height: 100%;
 }
+
 /* ============
      Width styles
      ============ */
+
 .qti-width-0 {
   width: 0;
 }
+
 .qti-width-px {
   width: 1px;
 }
+
 .qti-width-0p5 {
   width: 0.125rem;
 }
+
 .qti-width-1 {
   width: 0.25rem;
 }
+
 .qti-width-1p5 {
   width: 0.375rem;
 }
+
 .qti-width-2 {
   width: 0.5rem;
 }
+
 .qti-width-2p5 {
   width: 0.625rem;
 }
+
 .qti-width-3 {
   width: 0.75rem;
 }
+
 .qti-width-3p5 {
   width: 0.875rem;
 }
+
 .qti-width-4 {
   width: 1rem;
 }
+
 .qti-width-5 {
   width: 1.25rem;
 }
+
 .qti-width-6 {
   width: 1.5rem;
 }
+
 .qti-width-7 {
   width: 1.75rem;
 }
+
 .qti-width-8 {
   width: 2rem;
 }
+
 .qti-width-9 {
   width: 2.25rem;
 }
+
 .qti-width-10 {
   width: 2.5rem;
 }
+
 .qti-width-11 {
   width: 2.75rem;
 }
+
 .qti-width-12 {
   width: 3rem;
 }
+
 .qti-width-14 {
   width: 3.5rem;
 }
+
 .qti-width-16 {
   width: 4rem;
 }
+
 .qti-width-20 {
   width: 5rem;
 }
+
 .qti-width-24 {
   width: 6rem;
 }
+
 .qti-width-28 {
   width: 7rem;
 }
+
 .qti-width-32 {
   width: 8rem;
 }
+
 .qti-width-36 {
   width: 9rem;
 }
+
 .qti-width-40 {
   width: 10rem;
 }
+
 .qti-width-44 {
   width: 11rem;
 }
+
 .qti-width-48 {
   width: 12rem;
 }
+
 .qti-width-52 {
   width: 13rem;
 }
+
 .qti-width-56 {
   width: 14rem;
 }
+
 .qti-width-60 {
   width: 15rem;
 }
+
 .qti-width-64 {
   width: 16rem;
 }
+
 .qti-width-72 {
   width: 18rem;
 }
+
 .qti-width-80 {
   width: 20rem;
 }
+
 .qti-width-96 {
   width: 24rem;
 }
+
 .qti-width-auto {
   width: auto;
 }
+
 .qti-width-1-2 {
   width: 50%;
 }
+
 .qti-width-1-3 {
   width: 33.3333%;
 }
+
 .qti-width-2-3 {
   width: 66.6667%;
 }
+
 .qti-width-1-4 {
   width: 25%;
 }
+
 .qti-width-2-4 {
   width: 50%;
 }
+
 .qti-width-3-4 {
   width: 75%;
 }
+
 .qti-width-1-5 {
   width: 20%;
 }
+
 .qti-width-2-5 {
   width: 40%;
 }
+
 .qti-width-3-5 {
   width: 60%;
 }
+
 .qti-width-4-5 {
   width: 80%;
 }
+
 .qti-width-1-6 {
   width: 16.6667%;
 }
+
 .qti-width-2-6 {
   width: 33.3333%;
 }
+
 .qti-width-3-6 {
   width: 50%;
 }
+
 .qti-width-4-6 {
   width: 66.6667%;
 }
+
 .qti-width-5-6 {
   width: 83.3333%;
 }
+
 .qti-width-1-12 {
   width: 8.3333%;
 }
+
 .qti-width-2-12 {
   width: 16.6667%;
 }
+
 .qti-width-3-12 {
   width: 25%;
 }
+
 .qti-width-4-12 {
   width: 33.3333%;
 }
+
 .qti-width-5-12 {
   width: 41.6667%;
 }
+
 .qti-width-6-12 {
   width: 50%;
 }
+
 .qti-width-7-12 {
   width: 58.3333%;
 }
+
 .qti-width-8-12 {
   width: 66.6667%;
 }
+
 .qti-width-9-12 {
   width: 75%;
 }
+
 .qti-width-10-12 {
   width: 83.3333%;
 }
+
 .qti-width-11-12 {
   width: 91.6667%;
 }
+
 .qti-width-full,
 .qti-fullwidth {
   width: 100%;
 }
+
 /* ==================
      Text Indent styles
      ================== */
+
 .qti-text-indent-0 {
   text-indent: 0;
 }
+
 .qti-text-indent-px {
   text-indent: 1px;
 }
+
 .qti-text-indent-0p5 {
   text-indent: 0.125rem;
 }
+
 .qti-text-indent-1 {
   text-indent: 0.25rem;
 }
+
 .qti-text-indent-1p5 {
   text-indent: 0.375rem;
 }
+
 .qti-text-indent-2 {
   text-indent: 0.5rem;
 }
+
 .qti-text-indent-2p5 {
   text-indent: 0.625rem;
 }
+
 .qti-text-indent-3 {
   text-indent: 0.75rem;
 }
+
 .qti-text-indent-3p5 {
   text-indent: 0.875rem;
 }
+
 .qti-text-indent-4 {
   text-indent: 1rem;
 }
+
 .qti-text-indent-5 {
   text-indent: 1.25rem;
 }
+
 .qti-text-indent-6 {
   text-indent: 1.5rem;
 }
+
 .qti-text-indent-7 {
   text-indent: 1.75rem;
 }
+
 .qti-text-indent-8 {
   text-indent: 2rem;
 }
+
 .qti-text-indent-12 {
   text-indent: 3rem;
 }
+
 .qti-text-indent-16 {
   text-indent: 4rem;
 }
+
 .qti-text-indent-20 {
   text-indent: 5rem;
 }
+
 .qti-text-indent-24 {
   text-indent: 6rem;
 }
+
 .qti-text-indent-28 {
   text-indent: 7rem;
 }
+
 .qti-text-indent-32 {
   text-indent: 8rem;
 }
+
 /* =================
      List Style styles
      ================= */
+
 .qti-list-style-type-none {
   list-style-type: none;
 }
+
 .qti-list-style-type-disc {
   list-style-type: disc;
 }
+
 .qti-list-style-type-circle {
   list-style-type: circle;
 }
+
 .qti-list-style-type-square {
   list-style-type: square;
 }
+
 .qti-list-style-type-decimal {
   list-style-type: decimal;
 }
+
 .qti-list-style-type-decimal-leading-zero {
   list-style-type: decimal-leading-zero;
 }
+
 .qti-list-style-type-lower-alpha {
   list-style-type: lower-alpha;
 }
+
 .qti-list-style-type-upper-alpha {
   list-style-type: upper-alpha;
 }
+
 .qti-list-style-type-lower-roman {
   list-style-type: lower-roman;
 }
+
 .qti-list-style-type-upper-roman {
   list-style-type: upper-roman;
 }
+
 .qti-list-style-type-lower-latin {
   list-style-type: lower-latin;
 }
+
 .qti-list-style-type-upper-latin {
   list-style-type: upper-latin;
 }
+
 .qti-list-style-type-lower-greek {
   list-style-type: lower-greek;
 }
+
 .qti-list-style-type-arabic-indic {
   list-style-type: arabic-indic;
 }
+
 .qti-list-style-type-armenian {
   list-style-type: armenian;
 }
+
 .qti-list-style-type-lower-armenian {
   list-style-type: lower-armenian;
 }
+
 .qti-list-style-type-upper-armenian {
   list-style-type: upper-armenian;
 }
+
 .qti-list-style-type-bengali {
   list-style-type: bengali;
 }
+
 .qti-list-style-type-cambodian {
   list-style-type: cambodian;
 }
+
 .qti-list-style-type-simp-chinese-formal {
   list-style-type: simp-chinese-formal;
 }
+
 .qti-list-style-type-simp-chinese-informal {
   list-style-type: simp-chinese-informal;
 }
+
 .qti-list-style-type-trad-chinese-formal {
   list-style-type: trad-chinese-formal;
 }
+
 .qti-list-style-type-trad-chinese-informal {
   list-style-type: trad-chinese-informal;
 }
+
 .qti-list-style-type-cjk-ideographic {
   list-style-type: cjk-ideographic;
 }
+
 .qti-list-style-type-cjk-heavenly-stem {
   list-style-type: cjk-heavenly-stem;
 }
+
 .qti-list-style-type-cjk-earthly-branch {
   list-style-type: cjk-earthly-branch;
 }
+
 .qti-list-style-type-devanagari {
   list-style-type: devanagari;
 }
+
 .qti-list-style-type-ethiopic-halehame-ti-er {
   list-style-type: ethiopic-halehame-ti-er;
 }
+
 .qti-list-style-type-ethiopic-halehame-ti-et {
   list-style-type: ethiopic-halehame-ti-et;
 }
+
 .qti-list-style-type-ethiopic-halehame-am {
   list-style-type: ethiopic-halehame-am;
 }
+
 .qti-list-style-type-ethiopic-halehame {
   list-style-type: ethiopic-halehame;
 }
+
 .qti-list-style-type-georgian {
   list-style-type: georgian;
 }
+
 .qti-list-style-type-gujarati {
   list-style-type: gujarati;
 }
+
 .qti-list-style-type-gurmukhi {
   list-style-type: gurmukhi;
 }
+
 .qti-list-style-type-hangul {
   list-style-type: hangul;
 }
+
 .qti-list-style-type-hangul-consonant {
   list-style-type: hangul-consonant;
 }
+
 .qti-list-style-type-hebrew {
   list-style-type: hebrew;
 }
+
 .qti-list-style-type-hiragana {
   list-style-type: hiragana;
 }
+
 .qti-list-style-type-hiragana-iroha {
   list-style-type: hiragana-iroha;
 }
+
 .qti-list-style-type-khmer {
   list-style-type: khmer;
 }
+
 .qti-list-style-type-korean-hangul-formal {
   list-style-type: korean-hangul-formal;
 }
+
 .qti-list-style-type-korean-hanja-formal {
   list-style-type: korean-hanja-formal;
 }
+
 .qti-list-style-type-korean-hanja-informal {
   list-style-type: korean-hanja-informal;
 }
+
 .qti-list-style-type-lao {
   list-style-type: lao;
 }
+
 .qti-list-style-type-malayalam {
   list-style-type: malayalam;
 }
+
 .qti-list-style-type-mongolian {
   list-style-type: mongolian;
 }
+
 .qti-list-style-type-myanmar {
   list-style-type: myanmar;
 }
+
 .qti-list-style-type-oriya {
   list-style-type: oriya;
 }
+
 .qti-list-style-type-persian {
   list-style-type: persian;
 }
+
 .qti-list-style-type-thai {
   list-style-type: thai;
 }
+
 .qti-list-style-type-tibetan {
   list-style-type: tibetan;
 }
+
 .qti-list-style-type-telugu {
   list-style-type: telugu;
 }
+
 .qti-list-style-type-urdu {
   list-style-type: urdu;
 }
+
 /* =========================
      Other QTI 3 Presentation Utilities
      ========================= */
+
 .qti-bordered {
   border: 1px solid var(--table-border-color);
 }
+
 .qti-underline {
   text-decoration: underline;
   text-decoration-color: var(--foreground);
 }
+
 .qti-italic {
   font-style: italic;
 }
+
 .qti-well {
   min-height: 20px;
   padding: 19px;
@@ -1059,33 +1379,40 @@
   border-radius: 4px;
   box-shadow: var(--well-box-shadow);
 }
+
 /* Set writing-mode to vertical-rl 
      Typical for CJK vertical text */
 .qti-writing-mode-vertical-rl {
   writing-mode: vertical-rl;
 }
+
 /* Set writing-mode to vertical-lr
      Typical for Mongolian vertical text  */
 .qti-writing-mode-vertical-lr {
   writing-mode: vertical-lr;
 }
+
 /* Set writing-mode to horizontal-tb 
      Browser default */
 .qti-writing-mode-horizontal-tb {
   writing-mode: horizontal-tb;
 }
+
 /* Float an element left */
 .qti-float-left {
   float: left;
 }
+
 /* Float an element right */
 .qti-float-right {
   float: right;
 }
+
 /* Remove a float */
 .qti-float-none {
   float: none;
 }
+
 /* Clearfix Hack to apply to a container of 
    floated content that overflows the container. */
 .qti-float-clearfix::after {
@@ -1093,6 +1420,7 @@
   clear: both;
   display: table;
 }
+
 .qti-float-clear-left
   .qti-float-clear-right
   .qti-float-clear-both
@@ -1101,122 +1429,121 @@
   .qti-text-orientation-upright {
   text-orientation: upright;
 }
+}
+
 @layer qti-base {
-  .qti-layout-row {
-    display: flex;
-    flex-wrap: wrap;
-    width: 100%;
-    gap: 2.1276595745%;
-  }
 
-  .qti-layout-row [class*='qti-layout-col']:not(:empty) {
-    box-sizing: border-box;
-  }
+.qti-layout-row {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  gap: 2.1276595745%;
+}
 
-  .qti-layout-row [class*='qti-layout-col']:empty {
-    width: 0;
-    overflow: hidden; /* to fully collapse if there’s padding or borders */
-  }
+.qti-layout-row [class*='qti-layout-col']:not(:empty) {
+  box-sizing: border-box;
+}
 
-  .qti-layout-col1 {
-    width: 6.3829787234%;
-  }
+.qti-layout-row [class*='qti-layout-col']:empty {
+  width: 0;
+  overflow: hidden; /* to fully collapse if there’s padding or borders */
+}
 
-  .qti-layout-col2 {
-    width: 14.8936170213%;
-  }
+.qti-layout-col1 {
+  width: 6.3829787234%;
+}
 
-  .qti-layout-col3 {
-    width: 23.4042553191%;
-  }
+.qti-layout-col2 {
+  width: 14.8936170213%;
+}
 
-  .qti-layout-col4 {
-    width: 31.914893617%;
-  }
+.qti-layout-col3 {
+  width: 23.4042553191%;
+}
 
-  .qti-layout-col5 {
-    width: 40.4255319149%;
-  }
+.qti-layout-col4 {
+  width: 31.914893617%;
+}
 
-  .qti-layout-col6 {
-    width: 48.9361702128%;
-  }
+.qti-layout-col5 {
+  width: 40.4255319149%;
+}
 
-  .qti-layout-col7 {
-    width: 57.4468085106%;
-  }
+.qti-layout-col6 {
+  width: 48.9361702128%;
+}
 
-  .qti-layout-col8 {
-    width: 65.9574468085%;
-  }
+.qti-layout-col7 {
+  width: 57.4468085106%;
+}
 
-  .qti-layout-col9 {
-    width: 74.4680851064%;
-  }
+.qti-layout-col8 {
+  width: 65.9574468085%;
+}
 
-  .qti-layout-col10 {
-    width: 82.9787234043%;
-  }
+.qti-layout-col9 {
+  width: 74.4680851064%;
+}
 
-  .qti-layout-col11 {
-    width: 91.4893617021%;
-  }
+.qti-layout-col10 {
+  width: 82.9787234043%;
+}
 
-  .qti-layout-col12 {
-    width: 100%;
-  }
+.qti-layout-col11 {
+  width: 91.4893617021%;
+}
 
-  .qti-layout-offset1 {
-    margin-left: 8.5106382979%;
-  }
+.qti-layout-col12 {
+  width: 100%;
+}
 
-  .qti-layout-offset2 {
-    margin-left: 17.0212765957%;
-  }
+.qti-layout-offset1 {
+  margin-left: 8.5106382979%;
+}
 
-  .qti-layout-offset3 {
-    margin-left: 25.5319148936%;
-  }
+.qti-layout-offset2 {
+  margin-left: 17.0212765957%;
+}
 
-  .qti-layout-offset4 {
-    margin-left: 34.0425531915%;
-  }
+.qti-layout-offset3 {
+  margin-left: 25.5319148936%;
+}
 
-  .qti-layout-offset5 {
-    margin-left: 42.5531914894%;
-  }
+.qti-layout-offset4 {
+  margin-left: 34.0425531915%;
+}
 
-  .qti-layout-offset6 {
-    margin-left: 51.0638297872%;
-  }
+.qti-layout-offset5 {
+  margin-left: 42.5531914894%;
+}
 
-  .qti-layout-offset7 {
-    margin-left: 59.5744680851%;
-  }
+.qti-layout-offset6 {
+  margin-left: 51.0638297872%;
+}
 
-  .qti-layout-offset8 {
-    margin-left: 68.085106383%;
-  }
+.qti-layout-offset7 {
+  margin-left: 59.5744680851%;
+}
 
-  .qti-layout-offset9 {
-    margin-left: 76.5957446809%;
-  }
+.qti-layout-offset8 {
+  margin-left: 68.085106383%;
+}
 
-  .qti-layout-offset10 {
-    margin-left: 85.1063829787%;
-  }
+.qti-layout-offset9 {
+  margin-left: 76.5957446809%;
+}
 
-  .qti-layout-offset11 {
-    margin-left: 93.6170212766%;
-  }
+.qti-layout-offset10 {
+  margin-left: 85.1063829787%;
+}
 
-  .qti-layout-offset12 {
-    margin-left: 102.1276595745%;
-  }
+.qti-layout-offset11 {
+  margin-left: 93.6170212766%;
+}
 
-  @media (width <= 767px) {
-    [class*='qti-layout-col'] {
-      width: 100%;
-    }
+@media (width <= 767px) {
+  [class*='qti-layout-col'] {
+    width: 100%;
   }
 }
+}