@citolab/qti-components 3.0.77 → 3.0.80

package/index.umd.css

@@ -1,2885 +0,0 @@
-.qti-theme-ims {
-  /* < usabled classes to extend in qti-components > */
-}
-.qti-theme-raised {
-  /* < usabled classes to extend in qti-components > */
-}
-/* </ end test classes for storybook> */
-.qti-theme-subtle {
-  /* < usabled classes to extend in qti-components */
-}
-.qti-underline {
-  text-decoration: underline;
-}
-
-.qti-align-left {
-  text-align: left;
-}
-
-.qti-align-center {
-  text-align: center;
-}
-
-.qti-align-right {
-  text-align: right;
-}
-
-.qti-valign-top {
-  vertical-align: top;
-}
-
-.qti-valign-middle {
-  vertical-align: middle;
-}
-
-.qti-valign-baseline {
-  vertical-align: baseline;
-}
-
-.qti-valign-bottom {
-  vertical-align: bottom;
-}
-
-.qti-fullwidth {
-  width: 100%;
-}
-
-.qti-hidden {
-  display: none;
-}
-
-.qti-visually-hidden {
-  position: fixed !important;
-  overflow: hidden;
-  width: 1px;
-  height: 1px;
-  border: 0;
-  margin: -1px;
-  clip: rect(1px 1px 1px 1px);
-}
-
-.qti-bordered {
-  padding: 2px;
-  border: 1px solid #888;
-}
-
-.qti-well {
-  min-height: 20px;
-  padding: 19px;
-  border: 1px solid #e3e3e3;
-  border-radius: 4px;
-  margin-bottom: 20px;
-  background-color: #f5f5f5;
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
-}
-
-.qti-layout-row {
-  display: flow-root;
-  width: 100%;
-}
-.qti-layout-row [class*=qti-layout-col] {
-  margin-left: 2.1276595745%;
-  float: left;
-}
-.qti-layout-row [class*=qti-layout-col]:first-child {
-  margin-left: 0;
-}
-.qti-layout-row .qti-layout-col12 {
-  width: 100%;
-}
-.qti-layout-row .qti-layout-offset12 {
-  margin-left: 104.2553191489%;
-}
-.qti-layout-row .qti-layout-offset12:first-child {
-  margin-left: 102.1276595745%;
-}
-.qti-layout-row .qti-layout-col11 {
-  width: 91.4893617021%;
-}
-.qti-layout-row .qti-layout-offset11 {
-  margin-left: 95.7446808511%;
-}
-.qti-layout-row .qti-layout-offset11:first-child {
-  margin-left: 93.6170212766%;
-}
-.qti-layout-row .qti-layout-col10 {
-  width: 82.9787234043%;
-}
-.qti-layout-row .qti-layout-offset10 {
-  margin-left: 87.2340425532%;
-}
-.qti-layout-row .qti-layout-offset10:first-child {
-  margin-left: 85.1063829787%;
-}
-.qti-layout-row .qti-layout-col9 {
-  width: 74.4680851064%;
-}
-.qti-layout-row .qti-layout-offset9 {
-  margin-left: 78.7234042553%;
-}
-.qti-layout-row .qti-layout-offset9:first-child {
-  margin-left: 76.5957446809%;
-}
-.qti-layout-row .qti-layout-col8 {
-  width: 65.9574468085%;
-}
-.qti-layout-row .qti-layout-offset8 {
-  margin-left: 70.2127659574%;
-}
-.qti-layout-row .qti-layout-offset8:first-child {
-  margin-left: 68.085106383%;
-}
-.qti-layout-row .qti-layout-col7 {
-  width: 57.4468085106%;
-}
-.qti-layout-row .qti-layout-offset7 {
-  margin-left: 61.7021276596%;
-}
-.qti-layout-row .qti-layout-offset7:first-child {
-  margin-left: 59.5744680851%;
-}
-.qti-layout-row .qti-layout-col6 {
-  width: 48.9361702128%;
-}
-.qti-layout-row .qti-layout-offset6 {
-  margin-left: 53.1914893617%;
-}
-.qti-layout-row .qti-layout-offset6:first-child {
-  margin-left: 51.0638297872%;
-}
-.qti-layout-row .qti-layout-col5 {
-  width: 40.4255319149%;
-}
-.qti-layout-row .qti-layout-offset5 {
-  margin-left: 44.6808510638%;
-}
-.qti-layout-row .qti-layout-offset5:first-child {
-  margin-left: 42.5531914894%;
-}
-.qti-layout-row .qti-layout-col4 {
-  width: 31.914893617%;
-}
-.qti-layout-row .qti-layout-offset4 {
-  margin-left: 36.170212766%;
-}
-.qti-layout-row .qti-layout-offset4:first-child {
-  margin-left: 34.0425531915%;
-}
-.qti-layout-row .qti-layout-col3 {
-  width: 23.4042553191%;
-}
-.qti-layout-row .qti-layout-offset3 {
-  margin-left: 27.6595744681%;
-}
-.qti-layout-row .qti-layout-offset3:first-child {
-  margin-left: 25.5319148936%;
-}
-.qti-layout-row .qti-layout-col2 {
-  width: 14.8936170213%;
-}
-.qti-layout-row .qti-layout-offset2 {
-  margin-left: 19.1489361702%;
-}
-.qti-layout-row .qti-layout-offset2:first-child {
-  margin-left: 17.0212765957%;
-}
-.qti-layout-row .qti-layout-col1 {
-  width: 6.3829787234%;
-}
-.qti-layout-row .qti-layout-offset1 {
-  margin-left: 10.6382978723%;
-}
-.qti-layout-row .qti-layout-offset1:first-child {
-  margin-left: 8.5106382979%;
-}
-
-:root {
-  /**
-    * @tokens Colors
-    * @presenter Color
-    */
-  --qti-primary: rgb(30, 80, 127);
-  --qti-primary-color: var(--qti-primary);
-  --qti-focus-color: #98cbfa;
-  --qti-border-color: #cdd5df;
-  --qti-shadow-color: #838c96;
-  --qti-text-color: #4a5a69;
-  --qti-background: #f2f4f5;
-  --qti-placeholder-text: var(--qti-border-color);
-  --qti-white: #fff;
-  /**
-    * @tokens Others
-    */
-  --qti-padding-x: 0.7rem;
-  --qti-padding-y: 0.5rem;
-  --qti-border-width: 2px;
-  --qti-shadow-blur: 2px;
-  --qti-border-radius: 2px;
-  --qti-gap: 2px;
-}
-
-.qti-theme-ims {
-  --qti-border-width: 1px;
-  --qti-border-color: var(--qti-primary-color);
-  --qti-text-color: var(--qti-primary-color);
-  --qti-background: #f6f6f6;
-}
-
-.qti-theme-subtle {
-  --qti-border-radius: 0;
-  --qti-border-width: 2px;
-  --qti-background: #fcfcfc;
-  --qti-padding-x: 0.5rem;
-  --qti-padding-y: 0.8rem;
-}
-
-.qti-theme-raised {
-  --qti-border-radius: 0;
-  --qti-border-width: 2px;
-  --qti-background: #ebebeb;
-  --qti-padding-x: 0.5rem;
-  --qti-padding-y: 0.8rem;
-}
-qti-prompt {
-  display: block;
-}
-.qti-theme-raised {
-  /* < usabled classes to extend in qti-components > */
-}
-.qti-theme-raised .qti-input-control-hidden qti-choice, .qti-input-control-hidden .qti-theme-raised qti-choice {
-  position: relative;
-  display: inline-block;
-  border-radius: var(--qti-border-radius);
-  color: var(--qti-text-color);
-  padding: var(--qti-padding-x) var(--qti-padding-y);
-  cursor: pointer;
-  background: var(--qti-background);
-  box-shadow: inset 0 0 0 var(--qti-border-width) var(--qti-border-color), 0 var(--qti-border-width) var(--qti-border-color);
-  border-radius: calc(var(--qti-border-radius) * 3);
-}
-.qti-theme-raised .qti-input-control-hidden qti-choice[disabled], .qti-input-control-hidden .qti-theme-raised qti-choice[disabled] {
-  box-shadow: unset !important;
-  color: var(--qti-border-color);
-  cursor: unset !important;
-}
-.qti-theme-raised .qti-input-control-hidden qti-choice:focus, .qti-input-control-hidden .qti-theme-raised qti-choice:focus {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 2px;
-  outline-style: solid;
-  outline-width: var(--qti-border-width);
-}
-.qti-theme-raised .qti-input-control-hidden qti-choice:hover:not([disabled]), .qti-input-control-hidden .qti-theme-raised qti-choice:hover:not([disabled]) {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 0;
-  outline-style: solid;
-  outline-width: calc(var(--qti-border-width) * 2);
-}
-.qti-theme-raised .qti-input-control-hidden qti-choice[aria-checked=true], .qti-input-control-hidden .qti-theme-raised qti-choice[aria-checked=true] {
-  --qti-border-color: var(--qti-primary-color);
-}
-.qti-theme-raised qti-choice {
-  cursor: pointer;
-  --width: 22px;
-  --height: 22px;
-  display: inline-flex;
-  width: -moz-fit-content;
-  width: fit-content;
-  align-items: center;
-  gap: 0.2rem;
-}
-.qti-theme-raised qti-choice[disabled] {
-  box-shadow: unset !important;
-  color: var(--qti-border-color);
-  cursor: unset !important;
-}
-.qti-theme-raised qti-choice:focus {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 2px;
-  outline-style: solid;
-  outline-width: var(--qti-border-width);
-}
-.qti-theme-raised qti-choice:hover:not([disabled]) {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 0;
-  outline-style: solid;
-  outline-width: calc(var(--qti-border-width) * 2);
-}
-.qti-theme-raised qti-choice::before {
-  position: relative;
-  display: inline-block;
-  border-radius: var(--qti-border-radius);
-  color: var(--qti-text-color);
-  background: var(--qti-background);
-  box-shadow: inset 0 0 0 var(--qti-border-width) var(--qti-border-color), 0 var(--qti-border-width) var(--qti-border-color);
-}
-/* </ end test classes for storybook> */
-.qti-theme-subtle {
-  /* < usabled classes to extend in qti-components */
-}
-.qti-theme-subtle .qti-input-control-hidden qti-choice, .qti-input-control-hidden .qti-theme-subtle qti-choice {
-  position: relative;
-  display: inline-block;
-  border-radius: var(--qti-border-radius);
-  color: var(--qti-text-color);
-  padding: var(--qti-padding-x) var(--qti-padding-y);
-  cursor: pointer;
-  background: linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/2px 100% no-repeat, linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 100% 0/2px 100% no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/100% 2px no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 100%/100% 2px no-repeat;
-}
-.qti-theme-subtle .qti-input-control-hidden qti-choice[disabled], .qti-input-control-hidden .qti-theme-subtle qti-choice[disabled] {
-  --qti-border-color: transparent;
-  box-shadow: unset !important;
-  color: var(--qti-shadow-color);
-  cursor: unset !important;
-}
-.qti-theme-subtle .qti-input-control-hidden qti-choice:focus, .qti-input-control-hidden .qti-theme-subtle qti-choice:focus {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 2px;
-  outline-style: solid;
-  outline-width: var(--qti-border-width);
-}
-.qti-theme-subtle .qti-input-control-hidden qti-choice:hover:not([disabled]), .qti-input-control-hidden .qti-theme-subtle qti-choice:hover:not([disabled]) {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 0;
-  outline-style: solid;
-  outline-width: calc(var(--qti-border-width) * 2);
-}
-.qti-theme-subtle .qti-input-control-hidden qti-choice[aria-checked=true], .qti-input-control-hidden .qti-theme-subtle qti-choice[aria-checked=true] {
-  --qti-border-color: var(--qti-primary-color);
-  background-color: rgb(var(--qti-primary) 0.1);
-}
-.qti-theme-subtle qti-choice {
-  cursor: pointer;
-  --width: 22px;
-  --height: 22px;
-  display: inline-flex;
-  width: -moz-fit-content;
-  width: fit-content;
-  align-items: center;
-  gap: 0.2rem;
-}
-.qti-theme-subtle qti-choice[disabled] {
-  --qti-border-color: transparent;
-  box-shadow: unset !important;
-  color: var(--qti-shadow-color);
-  cursor: unset !important;
-}
-.qti-theme-subtle qti-choice:focus {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 2px;
-  outline-style: solid;
-  outline-width: var(--qti-border-width);
-}
-.qti-theme-subtle qti-choice:hover:not([disabled]) {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 0;
-  outline-style: solid;
-  outline-width: calc(var(--qti-border-width) * 2);
-}
-.qti-theme-subtle qti-choice::before {
-  position: relative;
-  display: inline-block;
-  border-radius: var(--qti-border-radius);
-  color: var(--qti-text-color);
-  background: linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/2px 100% no-repeat, linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 100% 0/2px 100% no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/100% 2px no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 100%/100% 2px no-repeat;
-}
-.qti-theme-ims {
-  /* < usabled classes to extend in qti-components > */
-}
-.qti-theme-ims .qti-input-control-hidden qti-choice, .qti-input-control-hidden .qti-theme-ims qti-choice {
-  position: relative;
-  display: inline-block;
-  border-radius: var(--qti-border-radius);
-  color: var(--qti-text-color);
-  padding: var(--qti-padding-x) var(--qti-padding-y);
-  cursor: pointer;
-  background: var(--qti-background);
-  box-shadow: inset 0 0 0 var(--qti-border-width) var(--qti-border-color);
-}
-.qti-theme-ims .qti-input-control-hidden qti-choice[disabled], .qti-input-control-hidden .qti-theme-ims qti-choice[disabled] {
-  --qti-border-color: var(--qti-shadow-color);
-  color: var(--qti-shadow-color);
-  cursor: unset !important;
-  filter: grayscale(100%);
-}
-.qti-theme-ims .qti-input-control-hidden qti-choice:focus-within, .qti-input-control-hidden .qti-theme-ims qti-choice:focus-within {
-  outline-color: rgb(var(--qti-primary) 0.6);
-  outline-offset: 4px;
-  outline-style: solid;
-  outline-width: var(--qti-border-width);
-  /* applies to all before elements, choice round and circle, slider thumb */
-}
-.qti-theme-ims .qti-input-control-hidden qti-choice:focus-within::before, .qti-input-control-hidden .qti-theme-ims qti-choice:focus-within::before {
-  background-color: rgb(var(--qti-primary) 0.2);
-}
-.qti-theme-ims .qti-input-control-hidden qti-choice:hover:not([disabled]), .qti-input-control-hidden .qti-theme-ims qti-choice:hover:not([disabled]) {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 2px;
-  outline-style: solid;
-  outline-width: calc(var(--qti-border-width) * 2);
-}
-.qti-theme-ims .qti-input-control-hidden qti-choice[aria-checked=true], .qti-input-control-hidden .qti-theme-ims qti-choice[aria-checked=true] {
-  --qti-border-color: var(--qti-primary-color);
-  background-color: var(--qti-primary-color);
-  color: #fff;
-}
-.qti-theme-ims qti-choice {
-  cursor: pointer;
-  --width: 22px;
-  --height: 22px;
-  display: inline-flex;
-  width: -moz-fit-content;
-  width: fit-content;
-  align-items: center;
-  gap: 0.2rem;
-}
-.qti-theme-ims qti-choice[disabled] {
-  --qti-border-color: var(--qti-shadow-color);
-  color: var(--qti-shadow-color);
-  cursor: unset !important;
-  filter: grayscale(100%);
-}
-.qti-theme-ims qti-choice:focus-within {
-  outline-color: rgb(var(--qti-primary) 0.6);
-  outline-offset: 4px;
-  outline-style: solid;
-  outline-width: var(--qti-border-width);
-  /* applies to all before elements, choice round and circle, slider thumb */
-}
-.qti-theme-ims qti-choice:focus-within::before {
-  background-color: rgb(var(--qti-primary) 0.2);
-}
-.qti-theme-ims qti-choice:hover:not([disabled]) {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 2px;
-  outline-style: solid;
-  outline-width: calc(var(--qti-border-width) * 2);
-}
-/* Choice as checkbox */
-/* with qti-input-control-hidden */
-.qti-input-control-hidden qti-choice::before, .qti-input-control-hidden qti-choice::after {
-  content: unset !important;
-}
-qti-rubric-block qti-content-body:not(:empty) {
-  display: block;
-  padding: 1rem;
-  border: 1px solid #ddd;
-  margin-bottom: 1rem;
-}
-qti-content-body {
-  display: block;
-}
-qti-modal-feedback[showstatus=on] {
-  position: absolute;
-  top: 2rem;
-  right: 0;
-  left: 0;
-  width: 400px;
-  height: 300px;
-  border: 1px solid #ddd;
-  border-radius: 10px;
-  margin-right: auto;
-  margin-left: auto;
-  background-color: white;
-  text-align: center;
-}
-.qti-theme-raised {
-  /* < usabled classes to extend in qti-components > */
-}
-.qti-theme-raised qti-text-entry-interaction {
-  position: relative;
-  display: inline-block;
-  border-radius: var(--qti-border-radius);
-  color: var(--qti-text-color);
-  background: var(--qti-background);
-  box-shadow: inset 0 0 0 var(--qti-border-width) var(--qti-border-color);
-  border-radius: calc(var(--qti-border-radius) * 3);
-}
-.qti-theme-raised qti-text-entry-interaction[disabled] {
-  box-shadow: unset !important;
-  color: var(--qti-border-color);
-  cursor: unset !important;
-}
-.qti-theme-raised qti-text-entry-interaction:focus {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 2px;
-  outline-style: solid;
-  outline-width: var(--qti-border-width);
-}
-.qti-theme-raised qti-text-entry-interaction:hover:not([disabled]) {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 0;
-  outline-style: solid;
-  outline-width: calc(var(--qti-border-width) * 2);
-}
-/* </ end test classes for storybook> */
-.qti-theme-subtle {
-  /* < usabled classes to extend in qti-components */
-}
-.qti-theme-subtle qti-text-entry-interaction {
-  position: relative;
-  display: inline-block;
-  border-radius: var(--qti-border-radius);
-  color: var(--qti-text-color);
-  background: linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/2px 100% no-repeat, linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 100% 0/2px 100% no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/100% 2px no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 100%/100% 2px no-repeat;
-}
-.qti-theme-subtle qti-text-entry-interaction[disabled] {
-  --qti-border-color: transparent;
-  box-shadow: unset !important;
-  color: var(--qti-shadow-color);
-  cursor: unset !important;
-}
-.qti-theme-subtle qti-text-entry-interaction:focus {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 2px;
-  outline-style: solid;
-  outline-width: var(--qti-border-width);
-}
-.qti-theme-subtle qti-text-entry-interaction:hover:not([disabled]) {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 0;
-  outline-style: solid;
-  outline-width: calc(var(--qti-border-width) * 2);
-}
-.qti-theme-ims {
-  /* < usabled classes to extend in qti-components > */
-}
-.qti-theme-ims qti-text-entry-interaction {
-  position: relative;
-  display: inline-block;
-  border-radius: var(--qti-border-radius);
-  color: var(--qti-text-color);
-  background: var(--qti-background);
-  box-shadow: inset 0 0 0 var(--qti-border-width) var(--qti-border-color);
-}
-.qti-theme-ims qti-text-entry-interaction[disabled] {
-  --qti-border-color: var(--qti-shadow-color);
-  color: var(--qti-shadow-color);
-  cursor: unset !important;
-  filter: grayscale(100%);
-}
-.qti-theme-ims qti-text-entry-interaction:focus-within {
-  outline-color: rgb(var(--qti-primary) 0.6);
-  outline-offset: 4px;
-  outline-style: solid;
-  outline-width: var(--qti-border-width);
-  /* applies to all before elements, choice round and circle, slider thumb */
-}
-.qti-theme-ims qti-text-entry-interaction:focus-within::before {
-  background-color: rgb(var(--qti-primary) 0.2);
-}
-.qti-theme-ims qti-text-entry-interaction:hover:not([disabled]) {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 2px;
-  outline-style: solid;
-  outline-width: calc(var(--qti-border-width) * 2);
-}
-.qti-theme-raised {
-  /* < usabled classes to extend in qti-components > */
-}
-.qti-theme-raised qti-extended-text-interaction {
-  position: relative;
-  display: inline-block;
-  border-radius: var(--qti-border-radius);
-  color: var(--qti-text-color);
-  background: var(--qti-background);
-  box-shadow: inset 0 0 0 var(--qti-border-width) var(--qti-border-color);
-  border-radius: calc(var(--qti-border-radius) * 3);
-}
-.qti-theme-raised qti-extended-text-interaction[disabled] {
-  box-shadow: unset !important;
-  color: var(--qti-border-color);
-  cursor: unset !important;
-}
-.qti-theme-raised qti-extended-text-interaction:focus {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 2px;
-  outline-style: solid;
-  outline-width: var(--qti-border-width);
-}
-.qti-theme-raised qti-extended-text-interaction:hover:not([disabled]) {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 0;
-  outline-style: solid;
-  outline-width: calc(var(--qti-border-width) * 2);
-}
-/* </ end test classes for storybook> */
-.qti-theme-subtle {
-  /* < usabled classes to extend in qti-components */
-}
-.qti-theme-subtle qti-extended-text-interaction {
-  position: relative;
-  display: inline-block;
-  border-radius: var(--qti-border-radius);
-  color: var(--qti-text-color);
-  background: linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/2px 100% no-repeat, linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 100% 0/2px 100% no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/100% 2px no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 100%/100% 2px no-repeat;
-}
-.qti-theme-subtle qti-extended-text-interaction[disabled] {
-  --qti-border-color: transparent;
-  box-shadow: unset !important;
-  color: var(--qti-shadow-color);
-  cursor: unset !important;
-}
-.qti-theme-subtle qti-extended-text-interaction:focus {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 2px;
-  outline-style: solid;
-  outline-width: var(--qti-border-width);
-}
-.qti-theme-subtle qti-extended-text-interaction:hover:not([disabled]) {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 0;
-  outline-style: solid;
-  outline-width: calc(var(--qti-border-width) * 2);
-}
-.qti-theme-ims {
-  /* < usabled classes to extend in qti-components > */
-}
-.qti-theme-ims qti-extended-text-interaction {
-  position: relative;
-  display: inline-block;
-  border-radius: var(--qti-border-radius);
-  color: var(--qti-text-color);
-  background: var(--qti-background);
-  box-shadow: inset 0 0 0 var(--qti-border-width) var(--qti-border-color);
-}
-.qti-theme-ims qti-extended-text-interaction[disabled] {
-  --qti-border-color: var(--qti-shadow-color);
-  color: var(--qti-shadow-color);
-  cursor: unset !important;
-  filter: grayscale(100%);
-}
-.qti-theme-ims qti-extended-text-interaction:focus-within {
-  outline-color: rgb(var(--qti-primary) 0.6);
-  outline-offset: 4px;
-  outline-style: solid;
-  outline-width: var(--qti-border-width);
-  /* applies to all before elements, choice round and circle, slider thumb */
-}
-.qti-theme-ims qti-extended-text-interaction:focus-within::before {
-  background-color: rgb(var(--qti-primary) 0.2);
-}
-.qti-theme-ims qti-extended-text-interaction:hover:not([disabled]) {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 2px;
-  outline-style: solid;
-  outline-width: calc(var(--qti-border-width) * 2);
-}
-.qti-height-lines-3 {
-  width: 100%;
-}
-
-.qti-height-lines-6 {
-  width: 100%;
-}
-
-.qti-height-lines-15 {
-  width: 100%;
-}
-.qti-theme-raised {
-  /* < usabled classes to extend in qti-components > */
-}
-.qti-theme-raised .qti-input-control-hidden qti-hottext, .qti-input-control-hidden .qti-theme-raised qti-hottext {
-  position: relative;
-  display: inline-block;
-  border-radius: var(--qti-border-radius);
-  color: var(--qti-text-color);
-  padding: var(--qti-padding-x) var(--qti-padding-y);
-  cursor: pointer;
-  background: var(--qti-background);
-  box-shadow: inset 0 0 0 var(--qti-border-width) var(--qti-border-color), 0 var(--qti-border-width) var(--qti-border-color);
-  border-radius: calc(var(--qti-border-radius) * 3);
-}
-.qti-theme-raised .qti-input-control-hidden qti-hottext[disabled], .qti-input-control-hidden .qti-theme-raised qti-hottext[disabled] {
-  box-shadow: unset !important;
-  color: var(--qti-border-color);
-  cursor: unset !important;
-}
-.qti-theme-raised .qti-input-control-hidden qti-hottext:focus, .qti-input-control-hidden .qti-theme-raised qti-hottext:focus {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 2px;
-  outline-style: solid;
-  outline-width: var(--qti-border-width);
-}
-.qti-theme-raised .qti-input-control-hidden qti-hottext:hover:not([disabled]), .qti-input-control-hidden .qti-theme-raised qti-hottext:hover:not([disabled]) {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 0;
-  outline-style: solid;
-  outline-width: calc(var(--qti-border-width) * 2);
-}
-.qti-theme-raised .qti-input-control-hidden qti-hottext[aria-checked=true], .qti-input-control-hidden .qti-theme-raised qti-hottext[aria-checked=true] {
-  --qti-border-color: var(--qti-primary-color);
-}
-.qti-theme-raised qti-hottext {
-  cursor: pointer;
-  --width: 22px;
-  --height: 22px;
-  display: inline-flex;
-  width: -moz-fit-content;
-  width: fit-content;
-  align-items: center;
-  gap: 0.2rem;
-}
-.qti-theme-raised qti-hottext[disabled] {
-  box-shadow: unset !important;
-  color: var(--qti-border-color);
-  cursor: unset !important;
-}
-.qti-theme-raised qti-hottext:focus {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 2px;
-  outline-style: solid;
-  outline-width: var(--qti-border-width);
-}
-.qti-theme-raised qti-hottext:hover:not([disabled]) {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 0;
-  outline-style: solid;
-  outline-width: calc(var(--qti-border-width) * 2);
-}
-.qti-theme-raised qti-hottext::before {
-  position: relative;
-  display: inline-block;
-  border-radius: var(--qti-border-radius);
-  color: var(--qti-text-color);
-  background: var(--qti-background);
-  box-shadow: inset 0 0 0 var(--qti-border-width) var(--qti-border-color), 0 var(--qti-border-width) var(--qti-border-color);
-}
-/* </ end test classes for storybook> */
-.qti-theme-subtle {
-  /* < usabled classes to extend in qti-components */
-}
-.qti-theme-subtle .qti-input-control-hidden qti-hottext, .qti-input-control-hidden .qti-theme-subtle qti-hottext {
-  position: relative;
-  display: inline-block;
-  border-radius: var(--qti-border-radius);
-  color: var(--qti-text-color);
-  padding: var(--qti-padding-x) var(--qti-padding-y);
-  cursor: pointer;
-  background: linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/2px 100% no-repeat, linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 100% 0/2px 100% no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/100% 2px no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 100%/100% 2px no-repeat;
-}
-.qti-theme-subtle .qti-input-control-hidden qti-hottext[disabled], .qti-input-control-hidden .qti-theme-subtle qti-hottext[disabled] {
-  --qti-border-color: transparent;
-  box-shadow: unset !important;
-  color: var(--qti-shadow-color);
-  cursor: unset !important;
-}
-.qti-theme-subtle .qti-input-control-hidden qti-hottext:focus, .qti-input-control-hidden .qti-theme-subtle qti-hottext:focus {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 2px;
-  outline-style: solid;
-  outline-width: var(--qti-border-width);
-}
-.qti-theme-subtle .qti-input-control-hidden qti-hottext:hover:not([disabled]), .qti-input-control-hidden .qti-theme-subtle qti-hottext:hover:not([disabled]) {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 0;
-  outline-style: solid;
-  outline-width: calc(var(--qti-border-width) * 2);
-}
-.qti-theme-subtle .qti-input-control-hidden qti-hottext[aria-checked=true], .qti-input-control-hidden .qti-theme-subtle qti-hottext[aria-checked=true] {
-  --qti-border-color: var(--qti-primary-color);
-  background-color: rgb(var(--qti-primary) 0.1);
-}
-.qti-theme-subtle qti-hottext {
-  cursor: pointer;
-  --width: 22px;
-  --height: 22px;
-  display: inline-flex;
-  width: -moz-fit-content;
-  width: fit-content;
-  align-items: center;
-  gap: 0.2rem;
-}
-.qti-theme-subtle qti-hottext[disabled] {
-  --qti-border-color: transparent;
-  box-shadow: unset !important;
-  color: var(--qti-shadow-color);
-  cursor: unset !important;
-}
-.qti-theme-subtle qti-hottext:focus {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 2px;
-  outline-style: solid;
-  outline-width: var(--qti-border-width);
-}
-.qti-theme-subtle qti-hottext:hover:not([disabled]) {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 0;
-  outline-style: solid;
-  outline-width: calc(var(--qti-border-width) * 2);
-}
-.qti-theme-subtle qti-hottext::before {
-  position: relative;
-  display: inline-block;
-  border-radius: var(--qti-border-radius);
-  color: var(--qti-text-color);
-  background: linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/2px 100% no-repeat, linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 100% 0/2px 100% no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/100% 2px no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 100%/100% 2px no-repeat;
-}
-.qti-theme-ims {
-  /* < usabled classes to extend in qti-components > */
-}
-.qti-theme-ims .qti-input-control-hidden qti-hottext, .qti-input-control-hidden .qti-theme-ims qti-hottext {
-  position: relative;
-  display: inline-block;
-  border-radius: var(--qti-border-radius);
-  color: var(--qti-text-color);
-  padding: var(--qti-padding-x) var(--qti-padding-y);
-  cursor: pointer;
-  background: var(--qti-background);
-  box-shadow: inset 0 0 0 var(--qti-border-width) var(--qti-border-color);
-}
-.qti-theme-ims .qti-input-control-hidden qti-hottext[disabled], .qti-input-control-hidden .qti-theme-ims qti-hottext[disabled] {
-  --qti-border-color: var(--qti-shadow-color);
-  color: var(--qti-shadow-color);
-  cursor: unset !important;
-  filter: grayscale(100%);
-}
-.qti-theme-ims .qti-input-control-hidden qti-hottext:focus-within, .qti-input-control-hidden .qti-theme-ims qti-hottext:focus-within {
-  outline-color: rgb(var(--qti-primary) 0.6);
-  outline-offset: 4px;
-  outline-style: solid;
-  outline-width: var(--qti-border-width);
-  /* applies to all before elements, choice round and circle, slider thumb */
-}
-.qti-theme-ims .qti-input-control-hidden qti-hottext:focus-within::before, .qti-input-control-hidden .qti-theme-ims qti-hottext:focus-within::before {
-  background-color: rgb(var(--qti-primary) 0.2);
-}
-.qti-theme-ims .qti-input-control-hidden qti-hottext:hover:not([disabled]), .qti-input-control-hidden .qti-theme-ims qti-hottext:hover:not([disabled]) {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 2px;
-  outline-style: solid;
-  outline-width: calc(var(--qti-border-width) * 2);
-}
-.qti-theme-ims .qti-input-control-hidden qti-hottext[aria-checked=true], .qti-input-control-hidden .qti-theme-ims qti-hottext[aria-checked=true] {
-  --qti-border-color: var(--qti-primary-color);
-  background-color: var(--qti-primary-color);
-  color: #fff;
-}
-.qti-theme-ims qti-hottext {
-  cursor: pointer;
-  --width: 22px;
-  --height: 22px;
-  display: inline-flex;
-  width: -moz-fit-content;
-  width: fit-content;
-  align-items: center;
-  gap: 0.2rem;
-}
-.qti-theme-ims qti-hottext[disabled] {
-  --qti-border-color: var(--qti-shadow-color);
-  color: var(--qti-shadow-color);
-  cursor: unset !important;
-  filter: grayscale(100%);
-}
-.qti-theme-ims qti-hottext:focus-within {
-  outline-color: rgb(var(--qti-primary) 0.6);
-  outline-offset: 4px;
-  outline-style: solid;
-  outline-width: var(--qti-border-width);
-  /* applies to all before elements, choice round and circle, slider thumb */
-}
-.qti-theme-ims qti-hottext:focus-within::before {
-  background-color: rgb(var(--qti-primary) 0.2);
-}
-.qti-theme-ims qti-hottext:hover:not([disabled]) {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 2px;
-  outline-style: solid;
-  outline-width: calc(var(--qti-border-width) * 2);
-}
-.qti-theme-ims qti-hottext[role=checkbox]::before {
-  content: "";
-  min-height: var(--width);
-  min-width: var(--width);
-  transition: border-radius 1s ease-in;
-}
-.qti-theme-ims qti-hottext[role=checkbox]::after {
-  border-bottom: 3px solid var(--qti-primary-color);
-  border-left: 3px solid var(--qti-primary-color);
-  content: "";
-  display: inline-block;
-  height: 6px;
-  opacity: 0;
-  position: absolute;
-  transform: translate(6px, -2px) rotate(-45deg);
-  transition: all 0.2s ease;
-  width: 10px;
-}
-.qti-theme-ims qti-hottext[role=checkbox][aria-checked=true]::after {
-  border-bottom: 2px solid var(--qti-primary-color);
-  border-left: 2px solid var(--qti-primary-color);
-  opacity: 1;
-}
-.qti-theme-ims qti-hottext[role=radio]::before {
-  border-radius: 100%;
-  content: "";
-  min-height: 22px;
-  min-width: 22px;
-}
-.qti-theme-ims qti-hottext[role=radio]::after {
-  background: var(--qti-primary-color);
-  border-radius: 100%;
-  content: "";
-  display: inline-block;
-  height: 14px;
-  margin-left: 4px;
-  opacity: 0;
-  position: absolute;
-  transform: scale(0.8);
-  transition: all 0.1s ease-out;
-  width: 14px;
-}
-.qti-theme-ims qti-hottext[role=radio][aria-checked=true]::after {
-  opacity: 1;
-  transform: scale(1);
-}
-.qti-theme-ims qti-hottext::before {
-  position: relative;
-  display: inline-block;
-  border-radius: var(--qti-border-radius);
-  color: var(--qti-text-color);
-  background: var(--qti-background);
-  box-shadow: inset 0 0 0 var(--qti-border-width) var(--qti-border-color);
-}
-/* Choice as checkbox */
-qti-hottext {
-  position: relative;
-  vertical-align: bottom;
-}
-
-/* with qti-input-control-hidden */
-.qti-input-control-hidden qti-hottext {
-  vertical-align: unset;
-}
-.qti-input-control-hidden qti-hottext::before, .qti-input-control-hidden qti-hottext::after {
-  content: unset !important;
-}
-
-.qti-theme-raised {
-  /* < usabled classes to extend in qti-components > */
-}
-.qti-theme-raised qti-inline-choice-interaction {
-  position: relative;
-  display: inline-block;
-  border-radius: var(--qti-border-radius);
-  color: var(--qti-text-color);
-  background: var(--qti-background);
-  box-shadow: 0 var(--qti-border-width) var(--qti-border-color);
-  border-radius: calc(var(--qti-border-radius) * 3);
-}
-.qti-theme-raised qti-inline-choice-interaction[disabled] {
-  box-shadow: unset !important;
-  color: var(--qti-border-color);
-  cursor: unset !important;
-}
-.qti-theme-raised qti-inline-choice-interaction:focus {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 2px;
-  outline-style: solid;
-  outline-width: var(--qti-border-width);
-}
-.qti-theme-raised qti-inline-choice-interaction:hover:not([disabled]) {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 0;
-  outline-style: solid;
-  outline-width: calc(var(--qti-border-width) * 2);
-}
-.qti-theme-raised qti-inline-choice-interaction::after {
-  border-left: 5px solid transparent;
-  border-right: 5px solid transparent;
-  border-top: 8px solid var(--qti-border-color);
-  clear: both;
-  content: "";
-  pointer-events: none;
-  position: absolute;
-  right: 5%;
-  top: calc(50% - 3px);
-}
-/* </ end test classes for storybook> */
-.qti-theme-subtle {
-  /* < usabled classes to extend in qti-components */
-}
-.qti-theme-subtle qti-inline-choice-interaction {
-  position: relative;
-  display: inline-block;
-  border-radius: var(--qti-border-radius);
-  color: var(--qti-text-color);
-  background: linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/2px 100% no-repeat, linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 100% 0/2px 100% no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/100% 2px no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 100%/100% 2px no-repeat;
-}
-.qti-theme-subtle qti-inline-choice-interaction[disabled] {
-  --qti-border-color: transparent;
-  box-shadow: unset !important;
-  color: var(--qti-shadow-color);
-  cursor: unset !important;
-}
-.qti-theme-subtle qti-inline-choice-interaction:focus {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 2px;
-  outline-style: solid;
-  outline-width: var(--qti-border-width);
-}
-.qti-theme-subtle qti-inline-choice-interaction:hover:not([disabled]) {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 0;
-  outline-style: solid;
-  outline-width: calc(var(--qti-border-width) * 2);
-}
-.qti-theme-subtle qti-inline-choice-interaction::after {
-  border-left: 5px solid transparent;
-  border-right: 5px solid transparent;
-  border-top: 8px solid var(--qti-border-color);
-  clear: both;
-  content: "";
-  pointer-events: none;
-  position: absolute;
-  right: 5%;
-  top: calc(50% - 3px);
-}
-.qti-theme-ims {
-  /* < usabled classes to extend in qti-components > */
-}
-.qti-theme-ims qti-inline-choice-interaction {
-  position: relative;
-  display: inline-block;
-  border-radius: var(--qti-border-radius);
-  color: var(--qti-text-color);
-  cursor: pointer;
-  background: var(--qti-background);
-  box-shadow: inset 0 0 0 var(--qti-border-width) var(--qti-border-color);
-}
-.qti-theme-ims qti-inline-choice-interaction[disabled] {
-  --qti-border-color: var(--qti-shadow-color);
-  color: var(--qti-shadow-color);
-  cursor: unset !important;
-  filter: grayscale(100%);
-}
-.qti-theme-ims qti-inline-choice-interaction:focus-within {
-  outline-color: rgb(var(--qti-primary) 0.6);
-  outline-offset: 4px;
-  outline-style: solid;
-  outline-width: var(--qti-border-width);
-  /* applies to all before elements, choice round and circle, slider thumb */
-}
-.qti-theme-ims qti-inline-choice-interaction:focus-within::before {
-  background-color: rgb(var(--qti-primary) 0.2);
-}
-.qti-theme-ims qti-inline-choice-interaction:hover:not([disabled]) {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 2px;
-  outline-style: solid;
-  outline-width: calc(var(--qti-border-width) * 2);
-}
-.qti-theme-ims qti-inline-choice-interaction::after {
-  border-left: 5px solid transparent;
-  border-right: 5px solid transparent;
-  border-top: 8px solid var(--qti-border-color);
-  clear: both;
-  content: "";
-  pointer-events: none;
-  position: absolute;
-  right: 5%;
-  top: calc(50% - 3px);
-}
-qti-choice-interaction {
-  display: grid;
-  grid-auto-flow: row dense;
-  grid-gap: 10px;
-  grid-template-rows: auto auto;
-}
-qti-choice-interaction.qti-choices-stacking-2 {
-  grid-template-columns: repeat(2, 1fr);
-}
-qti-choice-interaction.qti-choices-stacking-3 {
-  grid-template-columns: repeat(3, 1fr);
-}
-qti-choice-interaction.qti-choices-stacking-4 {
-  grid-template-columns: repeat(4, 1fr);
-}
-qti-choice-interaction.qti-choices-stacking-5 {
-  grid-template-columns: repeat(5, 1fr);
-}
-qti-choice-interaction.qti-orientation-horizontal {
-  display: flex;
-}
-qti-choice-interaction[orientation=horizontal] {
-  display: flex;
-}
-.qti-theme-raised {
-  /* < usabled classes to extend in qti-components > */
-}
-.qti-theme-raised .qti-input-control-hidden qti-simple-choice, .qti-input-control-hidden .qti-theme-raised qti-simple-choice {
-  position: relative;
-  display: inline-block;
-  border-radius: var(--qti-border-radius);
-  color: var(--qti-text-color);
-  padding: var(--qti-padding-x) var(--qti-padding-y);
-  cursor: pointer;
-  background: var(--qti-background);
-  box-shadow: inset 0 0 0 var(--qti-border-width) var(--qti-border-color), 0 var(--qti-border-width) var(--qti-border-color);
-  border-radius: calc(var(--qti-border-radius) * 3);
-}
-.qti-theme-raised .qti-input-control-hidden qti-simple-choice[disabled], .qti-input-control-hidden .qti-theme-raised qti-simple-choice[disabled] {
-  box-shadow: unset !important;
-  color: var(--qti-border-color);
-  cursor: unset !important;
-}
-.qti-theme-raised .qti-input-control-hidden qti-simple-choice:focus, .qti-input-control-hidden .qti-theme-raised qti-simple-choice:focus {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 2px;
-  outline-style: solid;
-  outline-width: var(--qti-border-width);
-}
-.qti-theme-raised .qti-input-control-hidden qti-simple-choice:hover:not([disabled]), .qti-input-control-hidden .qti-theme-raised qti-simple-choice:hover:not([disabled]) {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 0;
-  outline-style: solid;
-  outline-width: calc(var(--qti-border-width) * 2);
-}
-.qti-theme-raised .qti-input-control-hidden qti-simple-choice[aria-checked=true], .qti-input-control-hidden .qti-theme-raised qti-simple-choice[aria-checked=true] {
-  --qti-border-color: var(--qti-primary-color);
-}
-.qti-theme-raised qti-simple-choice {
-  cursor: pointer;
-  --width: 22px;
-  --height: 22px;
-  display: inline-flex;
-  width: -moz-fit-content;
-  width: fit-content;
-  align-items: center;
-  gap: 0.2rem;
-}
-.qti-theme-raised qti-simple-choice[disabled] {
-  box-shadow: unset !important;
-  color: var(--qti-border-color);
-  cursor: unset !important;
-}
-.qti-theme-raised qti-simple-choice:focus {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 2px;
-  outline-style: solid;
-  outline-width: var(--qti-border-width);
-}
-.qti-theme-raised qti-simple-choice:hover:not([disabled]) {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 0;
-  outline-style: solid;
-  outline-width: calc(var(--qti-border-width) * 2);
-}
-.qti-theme-raised qti-simple-choice::before {
-  position: relative;
-  display: inline-block;
-  border-radius: var(--qti-border-radius);
-  color: var(--qti-text-color);
-  background: var(--qti-background);
-  box-shadow: inset 0 0 0 var(--qti-border-width) var(--qti-border-color), 0 var(--qti-border-width) var(--qti-border-color);
-}
-/* </ end test classes for storybook> */
-.qti-theme-subtle {
-  /* < usabled classes to extend in qti-components */
-}
-.qti-theme-subtle .qti-input-control-hidden qti-simple-choice, .qti-input-control-hidden .qti-theme-subtle qti-simple-choice {
-  position: relative;
-  display: inline-block;
-  border-radius: var(--qti-border-radius);
-  color: var(--qti-text-color);
-  padding: var(--qti-padding-x) var(--qti-padding-y);
-  cursor: pointer;
-  background: linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/2px 100% no-repeat, linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 100% 0/2px 100% no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/100% 2px no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 100%/100% 2px no-repeat;
-}
-.qti-theme-subtle .qti-input-control-hidden qti-simple-choice[disabled], .qti-input-control-hidden .qti-theme-subtle qti-simple-choice[disabled] {
-  --qti-border-color: transparent;
-  box-shadow: unset !important;
-  color: var(--qti-shadow-color);
-  cursor: unset !important;
-}
-.qti-theme-subtle .qti-input-control-hidden qti-simple-choice:focus, .qti-input-control-hidden .qti-theme-subtle qti-simple-choice:focus {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 2px;
-  outline-style: solid;
-  outline-width: var(--qti-border-width);
-}
-.qti-theme-subtle .qti-input-control-hidden qti-simple-choice:hover:not([disabled]), .qti-input-control-hidden .qti-theme-subtle qti-simple-choice:hover:not([disabled]) {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 0;
-  outline-style: solid;
-  outline-width: calc(var(--qti-border-width) * 2);
-}
-.qti-theme-subtle .qti-input-control-hidden qti-simple-choice[aria-checked=true], .qti-input-control-hidden .qti-theme-subtle qti-simple-choice[aria-checked=true] {
-  --qti-border-color: var(--qti-primary-color);
-  background-color: rgb(var(--qti-primary) 0.1);
-}
-.qti-theme-subtle qti-simple-choice {
-  cursor: pointer;
-  --width: 22px;
-  --height: 22px;
-  display: inline-flex;
-  width: -moz-fit-content;
-  width: fit-content;
-  align-items: center;
-  gap: 0.2rem;
-}
-.qti-theme-subtle qti-simple-choice[disabled] {
-  --qti-border-color: transparent;
-  box-shadow: unset !important;
-  color: var(--qti-shadow-color);
-  cursor: unset !important;
-}
-.qti-theme-subtle qti-simple-choice:focus {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 2px;
-  outline-style: solid;
-  outline-width: var(--qti-border-width);
-}
-.qti-theme-subtle qti-simple-choice:hover:not([disabled]) {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 0;
-  outline-style: solid;
-  outline-width: calc(var(--qti-border-width) * 2);
-}
-.qti-theme-subtle qti-simple-choice::before {
-  position: relative;
-  display: inline-block;
-  border-radius: var(--qti-border-radius);
-  color: var(--qti-text-color);
-  background: linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/2px 100% no-repeat, linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 100% 0/2px 100% no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/100% 2px no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 100%/100% 2px no-repeat;
-}
-.qti-theme-ims {
-  /* < usabled classes to extend in qti-components > */
-}
-.qti-theme-ims .qti-input-control-hidden qti-simple-choice, .qti-input-control-hidden .qti-theme-ims qti-simple-choice {
-  position: relative;
-  display: inline-block;
-  border-radius: var(--qti-border-radius);
-  color: var(--qti-text-color);
-  padding: var(--qti-padding-x) var(--qti-padding-y);
-  cursor: pointer;
-  background: var(--qti-background);
-  box-shadow: inset 0 0 0 var(--qti-border-width) var(--qti-border-color);
-}
-.qti-theme-ims .qti-input-control-hidden qti-simple-choice[disabled], .qti-input-control-hidden .qti-theme-ims qti-simple-choice[disabled] {
-  --qti-border-color: var(--qti-shadow-color);
-  color: var(--qti-shadow-color);
-  cursor: unset !important;
-  filter: grayscale(100%);
-}
-.qti-theme-ims .qti-input-control-hidden qti-simple-choice:focus-within, .qti-input-control-hidden .qti-theme-ims qti-simple-choice:focus-within {
-  outline-color: rgb(var(--qti-primary) 0.6);
-  outline-offset: 4px;
-  outline-style: solid;
-  outline-width: var(--qti-border-width);
-  /* applies to all before elements, choice round and circle, slider thumb */
-}
-.qti-theme-ims .qti-input-control-hidden qti-simple-choice:focus-within::before, .qti-input-control-hidden .qti-theme-ims qti-simple-choice:focus-within::before {
-  background-color: rgb(var(--qti-primary) 0.2);
-}
-.qti-theme-ims .qti-input-control-hidden qti-simple-choice:hover:not([disabled]), .qti-input-control-hidden .qti-theme-ims qti-simple-choice:hover:not([disabled]) {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 2px;
-  outline-style: solid;
-  outline-width: calc(var(--qti-border-width) * 2);
-}
-.qti-theme-ims .qti-input-control-hidden qti-simple-choice[aria-checked=true], .qti-input-control-hidden .qti-theme-ims qti-simple-choice[aria-checked=true] {
-  --qti-border-color: var(--qti-primary-color);
-  background-color: var(--qti-primary-color);
-  color: #fff;
-}
-.qti-theme-ims qti-simple-choice {
-  cursor: pointer;
-  --width: 22px;
-  --height: 22px;
-  display: inline-flex;
-  width: -moz-fit-content;
-  width: fit-content;
-  align-items: center;
-  gap: 0.2rem;
-}
-.qti-theme-ims qti-simple-choice[disabled] {
-  --qti-border-color: var(--qti-shadow-color);
-  color: var(--qti-shadow-color);
-  cursor: unset !important;
-  filter: grayscale(100%);
-}
-.qti-theme-ims qti-simple-choice:focus-within {
-  outline-color: rgb(var(--qti-primary) 0.6);
-  outline-offset: 4px;
-  outline-style: solid;
-  outline-width: var(--qti-border-width);
-  /* applies to all before elements, choice round and circle, slider thumb */
-}
-.qti-theme-ims qti-simple-choice:focus-within::before {
-  background-color: rgb(var(--qti-primary) 0.2);
-}
-.qti-theme-ims qti-simple-choice:hover:not([disabled]) {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 2px;
-  outline-style: solid;
-  outline-width: calc(var(--qti-border-width) * 2);
-}
-.qti-theme-ims qti-simple-choice[role=checkbox]::before {
-  content: "";
-  min-height: var(--width);
-  min-width: var(--width);
-  transition: border-radius 1s ease-in;
-}
-.qti-theme-ims qti-simple-choice[role=checkbox]::after {
-  border-bottom: 3px solid var(--qti-primary-color);
-  border-left: 3px solid var(--qti-primary-color);
-  content: "";
-  display: inline-block;
-  height: 6px;
-  opacity: 0;
-  position: absolute;
-  transform: translate(6px, -2px) rotate(-45deg);
-  transition: all 0.2s ease;
-  width: 10px;
-}
-.qti-theme-ims qti-simple-choice[role=checkbox][aria-checked=true]::after {
-  border-bottom: 2px solid var(--qti-primary-color);
-  border-left: 2px solid var(--qti-primary-color);
-  opacity: 1;
-}
-.qti-theme-ims qti-simple-choice[role=radio]::before {
-  border-radius: 100%;
-  content: "";
-  min-height: 22px;
-  min-width: 22px;
-}
-.qti-theme-ims qti-simple-choice[role=radio]::after {
-  background: var(--qti-primary-color);
-  border-radius: 100%;
-  content: "";
-  display: inline-block;
-  height: 14px;
-  margin-left: 4px;
-  opacity: 0;
-  position: absolute;
-  transform: scale(0.8);
-  transition: all 0.1s ease-out;
-  width: 14px;
-}
-.qti-theme-ims qti-simple-choice[role=radio][aria-checked=true]::after {
-  opacity: 1;
-  transform: scale(1);
-}
-.qti-theme-ims qti-simple-choice::before {
-  position: relative;
-  display: inline-block;
-  border-radius: var(--qti-border-radius);
-  color: var(--qti-text-color);
-  background: var(--qti-background);
-  box-shadow: inset 0 0 0 var(--qti-border-width) var(--qti-border-color);
-}
-/* Choice as checkbox */
-qti-simple-choice {
-  position: relative;
-}
-
-/* with qti-input-control-hidden */
-.qti-theme-raised {
-  /* < usabled classes to extend in qti-components > */
-}
-.qti-theme-raised qti-associate-interaction::part(drop-list) {
-  position: relative;
-  display: inline-block;
-  border-radius: var(--qti-border-radius);
-  color: var(--qti-text-color);
-  background: var(--qti-background);
-  box-shadow: inset 0 var(--qti-border-width) var(--qti-border-color);
-}
-.qti-theme-raised qti-associate-interaction:not(:empty)::part(drop-list) {
-  display: flex;
-}
-.qti-theme-raised qti-associate-interaction:not(:empty)::part(drop-list) > * {
-  box-shadow: unset;
-  flex-grow: 1;
-  margin: 2px;
-}
-.qti-theme-raised qti-associate-interaction[active]::part(drop-list) {
-  background: var(--qti-background);
-}
-.qti-theme-raised qti-associate-interaction qti-simple-associable-choice, qti-associate-interaction .qti-theme-raised qti-simple-associable-choice, .qti-theme-raised qti-associate-interaction::part(qti-simple-associable-choice) {
-  position: relative;
-  display: inline-block;
-  border-radius: var(--qti-border-radius);
-  color: var(--qti-text-color);
-  padding: var(--qti-padding-x) var(--qti-padding-y);
-  cursor: pointer;
-  background: var(--qti-background);
-  -webkit-user-select: none;
-          user-select: none;
-  box-shadow: 0 var(--qti-border-width) var(--qti-border-color), 0 calc(var(--qti-border-width) * 2) var(--qti-shadow-blur) var(--qti-shadow-color);
-}
-.qti-theme-raised qti-associate-interaction qti-simple-associable-choice[disabled], qti-associate-interaction .qti-theme-raised qti-simple-associable-choice[disabled], .qti-theme-raised qti-associate-interaction[disabled]::part(qti-simple-associable-choice) {
-  box-shadow: unset !important;
-  color: var(--qti-border-color);
-  cursor: unset !important;
-}
-.qti-theme-raised qti-associate-interaction qti-simple-associable-choice:focus, qti-associate-interaction .qti-theme-raised qti-simple-associable-choice:focus, .qti-theme-raised qti-associate-interaction:focus::part(qti-simple-associable-choice) {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 2px;
-  outline-style: solid;
-  outline-width: var(--qti-border-width);
-}
-.qti-theme-raised qti-associate-interaction qti-simple-associable-choice:hover:not([disabled]), qti-associate-interaction .qti-theme-raised qti-simple-associable-choice:hover:not([disabled]), .qti-theme-raised qti-associate-interaction:hover:not([disabled])::part(qti-simple-associable-choice) {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 0;
-  outline-style: solid;
-  outline-width: calc(var(--qti-border-width) * 2);
-}
-.qti-theme-raised qti-associate-interaction qti-simple-associable-choice::before, qti-associate-interaction .qti-theme-raised qti-simple-associable-choice::before {
-  position: absolute;
-  bottom: 0.2rem;
-  top: 0.2rem;
-  left: 0.2rem;
-  width: 0.3rem;
-  max-height: 2rem;
-  background: radial-gradient(ellipse at center, var(--qti-border-color) 0%, var(--qti-border-color) 40%, transparent 40%);
-  background-repeat: repeat;
-  background-size: 0.3rem 0.3rem;
-  content: "";
-}
-/* </ end test classes for storybook> */
-.qti-theme-subtle {
-  /* < usabled classes to extend in qti-components */
-}
-.qti-theme-subtle qti-associate-interaction::part(drop-list) {
-  position: relative;
-  display: inline-block;
-  border-radius: var(--qti-border-radius);
-  color: var(--qti-text-color);
-  background: radial-gradient(16px circle, transparent 0%, transparent calc(50% - var(--qti-border-width) / 2), var(--qti-border-color) calc(50% - (var(--qti-border-width) / 2 - 0.2px)), var(--qti-border-color) calc(50% + var(--qti-border-width) / 2 - 0.2px), transparent calc(50% + var(--qti-border-width) / 2), transparent 100%), linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/2px 100% no-repeat, linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 100% 0/2px 100% no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/100% 2px no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 100%/100% 2px no-repeat, var(--qti-background);
-  transition: all 0.2s ease-out;
-}
-.qti-theme-subtle qti-associate-interaction:not(:empty)::part(drop-list) {
-  display: flex;
-}
-.qti-theme-subtle qti-associate-interaction:not(:empty)::part(drop-list) > * {
-  flex-grow: 1;
-  margin: 2px;
-}
-.qti-theme-subtle qti-associate-interaction[active]::part(drop-list) {
-  background: radial-gradient(16px circle, transparent 0%, transparent calc(50% - var(--qti-border-width) / 2), var(--qti-border-color) calc(50% - (var(--qti-border-width) / 2 - 0.2px)), var(--qti-border-color) calc(50% + var(--qti-border-width) / 2 - 0.2px), transparent calc(50% + var(--qti-border-width) / 2), transparent 100%), linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/2px 100% no-repeat, linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 100% 0/2px 100% no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/100% 2px no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 100%/100% 2px no-repeat, var(--qti-background);
-  transform: scale(1.02);
-}
-.qti-theme-subtle qti-associate-interaction qti-simple-associable-choice, qti-associate-interaction .qti-theme-subtle qti-simple-associable-choice, .qti-theme-subtle qti-associate-interaction::part(qti-simple-associable-choice) {
-  position: relative;
-  display: inline-block;
-  border-radius: var(--qti-border-radius);
-  color: var(--qti-text-color);
-  padding: var(--qti-padding-x) var(--qti-padding-y);
-  cursor: pointer;
-  -webkit-user-select: none;
-          user-select: none;
-  background: linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/2px 100% no-repeat, linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 100% 0/2px 100% no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/100% 2px no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 100%/100% 2px no-repeat, var(--qti-background);
-}
-.qti-theme-subtle qti-associate-interaction qti-simple-associable-choice[disabled], qti-associate-interaction .qti-theme-subtle qti-simple-associable-choice[disabled], .qti-theme-subtle qti-associate-interaction[disabled]::part(qti-simple-associable-choice) {
-  --qti-border-color: transparent;
-  box-shadow: unset !important;
-  color: var(--qti-shadow-color);
-  cursor: unset !important;
-}
-.qti-theme-subtle qti-associate-interaction qti-simple-associable-choice:focus, qti-associate-interaction .qti-theme-subtle qti-simple-associable-choice:focus, .qti-theme-subtle qti-associate-interaction:focus::part(qti-simple-associable-choice) {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 2px;
-  outline-style: solid;
-  outline-width: var(--qti-border-width);
-}
-.qti-theme-subtle qti-associate-interaction qti-simple-associable-choice:hover:not([disabled]), qti-associate-interaction .qti-theme-subtle qti-simple-associable-choice:hover:not([disabled]), .qti-theme-subtle qti-associate-interaction:hover:not([disabled])::part(qti-simple-associable-choice) {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 0;
-  outline-style: solid;
-  outline-width: calc(var(--qti-border-width) * 2);
-}
-.qti-theme-subtle qti-associate-interaction qti-simple-associable-choice::before, qti-associate-interaction .qti-theme-subtle qti-simple-associable-choice::before {
-  position: absolute;
-  bottom: 0.2rem;
-  top: 0.2rem;
-  left: 0.2rem;
-  width: 0.3rem;
-  max-height: 2rem;
-  background: radial-gradient(ellipse at center, var(--qti-border-color) 0%, var(--qti-border-color) 40%, transparent 40%);
-  background-repeat: repeat;
-  background-size: 0.3rem 0.3rem;
-  content: "";
-}
-.qti-theme-ims {
-  /* < usabled classes to extend in qti-components > */
-}
-.qti-theme-ims qti-associate-interaction::part(drop-list) {
-  position: relative;
-  display: inline-block;
-  border-radius: var(--qti-border-radius);
-  color: var(--qti-text-color);
-  border-radius: 0;
-  background: var(--qti-white);
-  box-shadow: inset 0 0 0 var(--qti-border-width) var(--qti-border-color);
-}
-.qti-theme-ims qti-associate-interaction[disabled]::part(drop-list) {
-  --qti-border-color: var(--qti-shadow-color);
-  color: var(--qti-shadow-color);
-  cursor: unset !important;
-  filter: grayscale(100%);
-}
-.qti-theme-ims qti-associate-interaction:focus-within::part(drop-list) {
-  outline-color: rgb(var(--qti-primary) 0.6);
-  outline-offset: 4px;
-  outline-style: solid;
-  outline-width: var(--qti-border-width);
-  /* applies to all before elements, choice round and circle, slider thumb */
-}
-.qti-theme-ims qti-associate-interaction:hover:not([disabled])::part(drop-list) {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 2px;
-  outline-style: solid;
-  outline-width: calc(var(--qti-border-width) * 2);
-}
-.qti-theme-ims qti-associate-interaction:not(:empty)::part(drop-list) {
-  display: inline-flex;
-}
-.qti-theme-ims qti-associate-interaction:not(:empty)::part(drop-list) > * {
-  flex-grow: 1;
-  margin: 2px;
-}
-.qti-theme-ims qti-associate-interaction[active]::part(drop-list) {
-  background: rgb(var(--qti-primary) 0.4) !important;
-}
-.qti-theme-ims qti-associate-interaction qti-simple-associable-choice, qti-associate-interaction .qti-theme-ims qti-simple-associable-choice, .qti-theme-ims qti-associate-interaction::part(qti-simple-associable-choice) {
-  position: relative;
-  display: inline-block;
-  border-radius: var(--qti-border-radius);
-  color: var(--qti-text-color);
-  cursor: pointer;
-  padding: var(--qti-padding-x) var(--qti-padding-y);
-  background: var(--qti-background);
-  box-shadow: inset 0 0 0 var(--qti-border-width) var(--qti-border-color);
-}
-.qti-theme-ims qti-associate-interaction qti-simple-associable-choice[disabled], qti-associate-interaction .qti-theme-ims qti-simple-associable-choice[disabled], .qti-theme-ims qti-associate-interaction[disabled]::part(qti-simple-associable-choice) {
-  --qti-border-color: var(--qti-shadow-color);
-  color: var(--qti-shadow-color);
-  cursor: unset !important;
-  filter: grayscale(100%);
-}
-.qti-theme-ims qti-associate-interaction qti-simple-associable-choice:focus-within, qti-associate-interaction .qti-theme-ims qti-simple-associable-choice:focus-within, .qti-theme-ims qti-associate-interaction:focus-within::part(qti-simple-associable-choice) {
-  outline-color: rgb(var(--qti-primary) 0.6);
-  outline-offset: 4px;
-  outline-style: solid;
-  outline-width: var(--qti-border-width);
-  /* applies to all before elements, choice round and circle, slider thumb */
-}
-.qti-theme-ims qti-associate-interaction qti-simple-associable-choice:focus-within::before, qti-associate-interaction .qti-theme-ims qti-simple-associable-choice:focus-within::before {
-  background-color: rgb(var(--qti-primary) 0.2);
-}
-.qti-theme-ims qti-associate-interaction qti-simple-associable-choice:hover:not([disabled]), qti-associate-interaction .qti-theme-ims qti-simple-associable-choice:hover:not([disabled]), .qti-theme-ims qti-associate-interaction:hover:not([disabled])::part(qti-simple-associable-choice) {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 2px;
-  outline-style: solid;
-  outline-width: calc(var(--qti-border-width) * 2);
-}
-.qti-theme-ims qti-associate-interaction qti-simple-associable-choice[active], qti-associate-interaction .qti-theme-ims qti-simple-associable-choice[active], .qti-theme-ims qti-associate-interaction[active]::part(qti-simple-associable-choice) {
-  background: rgb(var(--qti-primary) 0.4) !important;
-}
-qti-associate-interaction::part(associables-container) {
-  display: flex;
-  width: 100%;
-  height: 100%;
-  justify-content: space-between;
-  margin-top: 1rem;
-  background: linear-gradient(180deg, rgba(0, 0, 0, 0) calc(50% - 1px), var(--qti-border-color) 50%, rgba(0, 0, 0, 0) calc(50% + 1px));
-}
-
-qti-associate-interaction::part(drop-list) {
-  width: 30%;
-  height: 40px;
-}
-@charset "UTF-8";
-.qti-theme-raised {
-  /* < usabled classes to extend in qti-components > */
-}
-.qti-theme-raised qti-gap-match-interaction qti-gap, qti-gap-match-interaction .qti-theme-raised qti-gap {
-  position: relative;
-  display: inline-block;
-  border-radius: var(--qti-border-radius);
-  color: var(--qti-text-color);
-  background: var(--qti-background);
-  box-shadow: inset 0 var(--qti-border-width) var(--qti-border-color);
-}
-.qti-theme-raised qti-gap-match-interaction qti-gap:empty::after, qti-gap-match-interaction .qti-theme-raised qti-gap:empty::after {
-  padding: var(--qti-padding-x) var(--qti-padding-y);
-  /* when empty, put a space in it, so the height remains the same */
-  display: inline-block;
-  content: " ";
-}
-.qti-theme-raised qti-gap-match-interaction qti-gap:not(:empty), qti-gap-match-interaction .qti-theme-raised qti-gap:not(:empty) {
-  display: flex;
-}
-.qti-theme-raised qti-gap-match-interaction qti-gap:not(:empty) > *, qti-gap-match-interaction .qti-theme-raised qti-gap:not(:empty) > * {
-  box-shadow: unset;
-  flex-grow: 1;
-  margin: 2px;
-}
-.qti-theme-raised qti-gap-match-interaction qti-gap[active], qti-gap-match-interaction .qti-theme-raised qti-gap[active] {
-  background: var(--qti-background);
-}
-.qti-theme-raised qti-gap-match-interaction qti-gap-text, qti-gap-match-interaction .qti-theme-raised qti-gap-text {
-  position: relative;
-  display: inline-block;
-  border-radius: var(--qti-border-radius);
-  color: var(--qti-text-color);
-  padding: var(--qti-padding-x) var(--qti-padding-y);
-  cursor: pointer;
-  background: var(--qti-background);
-  -webkit-user-select: none;
-          user-select: none;
-  box-shadow: 0 var(--qti-border-width) var(--qti-border-color), 0 calc(var(--qti-border-width) * 2) var(--qti-shadow-blur) var(--qti-shadow-color);
-}
-.qti-theme-raised qti-gap-match-interaction qti-gap-text[disabled], qti-gap-match-interaction .qti-theme-raised qti-gap-text[disabled] {
-  box-shadow: unset !important;
-  color: var(--qti-border-color);
-  cursor: unset !important;
-}
-.qti-theme-raised qti-gap-match-interaction qti-gap-text:focus, qti-gap-match-interaction .qti-theme-raised qti-gap-text:focus {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 2px;
-  outline-style: solid;
-  outline-width: var(--qti-border-width);
-}
-.qti-theme-raised qti-gap-match-interaction qti-gap-text:hover:not([disabled]), qti-gap-match-interaction .qti-theme-raised qti-gap-text:hover:not([disabled]) {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 0;
-  outline-style: solid;
-  outline-width: calc(var(--qti-border-width) * 2);
-}
-.qti-theme-raised qti-gap-match-interaction qti-gap-text::before, qti-gap-match-interaction .qti-theme-raised qti-gap-text::before {
-  position: absolute;
-  bottom: 0.2rem;
-  top: 0.2rem;
-  left: 0.2rem;
-  width: 0.3rem;
-  max-height: 2rem;
-  background: radial-gradient(ellipse at center, var(--qti-border-color) 0%, var(--qti-border-color) 40%, transparent 40%);
-  background-repeat: repeat;
-  background-size: 0.3rem 0.3rem;
-  content: "";
-}
-/* </ end test classes for storybook> */
-.qti-theme-subtle {
-  /* < usabled classes to extend in qti-components */
-}
-.qti-theme-subtle qti-gap-match-interaction qti-gap, qti-gap-match-interaction .qti-theme-subtle qti-gap {
-  position: relative;
-  display: inline-block;
-  border-radius: var(--qti-border-radius);
-  color: var(--qti-text-color);
-  background: radial-gradient(16px circle, transparent 0%, transparent calc(50% - var(--qti-border-width) / 2), var(--qti-border-color) calc(50% - (var(--qti-border-width) / 2 - 0.2px)), var(--qti-border-color) calc(50% + var(--qti-border-width) / 2 - 0.2px), transparent calc(50% + var(--qti-border-width) / 2), transparent 100%), linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/2px 100% no-repeat, linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 100% 0/2px 100% no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/100% 2px no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 100%/100% 2px no-repeat, var(--qti-background);
-  transition: all 0.2s ease-out;
-}
-.qti-theme-subtle qti-gap-match-interaction qti-gap:empty::after, qti-gap-match-interaction .qti-theme-subtle qti-gap:empty::after {
-  padding: var(--qti-padding-x) var(--qti-padding-y);
-  /* when empty, put a space in it, so the height remains the same */
-  display: inline-block;
-  content: " ";
-}
-.qti-theme-subtle qti-gap-match-interaction qti-gap:not(:empty), qti-gap-match-interaction .qti-theme-subtle qti-gap:not(:empty) {
-  display: flex;
-}
-.qti-theme-subtle qti-gap-match-interaction qti-gap:not(:empty) > *, qti-gap-match-interaction .qti-theme-subtle qti-gap:not(:empty) > * {
-  flex-grow: 1;
-  margin: 2px;
-}
-.qti-theme-subtle qti-gap-match-interaction qti-gap[active], qti-gap-match-interaction .qti-theme-subtle qti-gap[active] {
-  background: radial-gradient(16px circle, transparent 0%, transparent calc(50% - var(--qti-border-width) / 2), var(--qti-border-color) calc(50% - (var(--qti-border-width) / 2 - 0.2px)), var(--qti-border-color) calc(50% + var(--qti-border-width) / 2 - 0.2px), transparent calc(50% + var(--qti-border-width) / 2), transparent 100%), linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/2px 100% no-repeat, linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 100% 0/2px 100% no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/100% 2px no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 100%/100% 2px no-repeat, var(--qti-background);
-  transform: scale(1.02);
-}
-.qti-theme-subtle qti-gap-match-interaction qti-gap-text, qti-gap-match-interaction .qti-theme-subtle qti-gap-text {
-  position: relative;
-  display: inline-block;
-  border-radius: var(--qti-border-radius);
-  color: var(--qti-text-color);
-  padding: var(--qti-padding-x) var(--qti-padding-y);
-  cursor: pointer;
-  -webkit-user-select: none;
-          user-select: none;
-  background: linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/2px 100% no-repeat, linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 100% 0/2px 100% no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/100% 2px no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 100%/100% 2px no-repeat, var(--qti-background);
-}
-.qti-theme-subtle qti-gap-match-interaction qti-gap-text[disabled], qti-gap-match-interaction .qti-theme-subtle qti-gap-text[disabled] {
-  --qti-border-color: transparent;
-  box-shadow: unset !important;
-  color: var(--qti-shadow-color);
-  cursor: unset !important;
-}
-.qti-theme-subtle qti-gap-match-interaction qti-gap-text:focus, qti-gap-match-interaction .qti-theme-subtle qti-gap-text:focus {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 2px;
-  outline-style: solid;
-  outline-width: var(--qti-border-width);
-}
-.qti-theme-subtle qti-gap-match-interaction qti-gap-text:hover:not([disabled]), qti-gap-match-interaction .qti-theme-subtle qti-gap-text:hover:not([disabled]) {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 0;
-  outline-style: solid;
-  outline-width: calc(var(--qti-border-width) * 2);
-}
-.qti-theme-subtle qti-gap-match-interaction qti-gap-text::before, qti-gap-match-interaction .qti-theme-subtle qti-gap-text::before {
-  position: absolute;
-  bottom: 0.2rem;
-  top: 0.2rem;
-  left: 0.2rem;
-  width: 0.3rem;
-  max-height: 2rem;
-  background: radial-gradient(ellipse at center, var(--qti-border-color) 0%, var(--qti-border-color) 40%, transparent 40%);
-  background-repeat: repeat;
-  background-size: 0.3rem 0.3rem;
-  content: "";
-}
-.qti-theme-ims {
-  /* < usabled classes to extend in qti-components > */
-}
-.qti-theme-ims qti-gap-match-interaction qti-gap, qti-gap-match-interaction .qti-theme-ims qti-gap {
-  position: relative;
-  display: inline-block;
-  border-radius: var(--qti-border-radius);
-  color: var(--qti-text-color);
-  border-radius: 0;
-  background: var(--qti-white);
-  box-shadow: inset 0 0 0 var(--qti-border-width) var(--qti-border-color);
-}
-.qti-theme-ims qti-gap-match-interaction qti-gap[disabled], qti-gap-match-interaction .qti-theme-ims qti-gap[disabled] {
-  --qti-border-color: var(--qti-shadow-color);
-  color: var(--qti-shadow-color);
-  cursor: unset !important;
-  filter: grayscale(100%);
-}
-.qti-theme-ims qti-gap-match-interaction qti-gap:focus-within, qti-gap-match-interaction .qti-theme-ims qti-gap:focus-within {
-  outline-color: rgb(var(--qti-primary) 0.6);
-  outline-offset: 4px;
-  outline-style: solid;
-  outline-width: var(--qti-border-width);
-  /* applies to all before elements, choice round and circle, slider thumb */
-}
-.qti-theme-ims qti-gap-match-interaction qti-gap:focus-within::before, qti-gap-match-interaction .qti-theme-ims qti-gap:focus-within::before {
-  background-color: rgb(var(--qti-primary) 0.2);
-}
-.qti-theme-ims qti-gap-match-interaction qti-gap:hover:not([disabled]), qti-gap-match-interaction .qti-theme-ims qti-gap:hover:not([disabled]) {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 2px;
-  outline-style: solid;
-  outline-width: calc(var(--qti-border-width) * 2);
-}
-.qti-theme-ims qti-gap-match-interaction qti-gap:empty::after, qti-gap-match-interaction .qti-theme-ims qti-gap:empty::after {
-  padding: var(--qti-padding-x) var(--qti-padding-y);
-  /* when empty, put a space in it, so the height remains the same */
-  display: inline-block;
-  content: " ";
-}
-.qti-theme-ims qti-gap-match-interaction qti-gap:not(:empty), qti-gap-match-interaction .qti-theme-ims qti-gap:not(:empty) {
-  display: inline-flex;
-}
-.qti-theme-ims qti-gap-match-interaction qti-gap:not(:empty) > *, qti-gap-match-interaction .qti-theme-ims qti-gap:not(:empty) > * {
-  flex-grow: 1;
-  margin: 2px;
-}
-.qti-theme-ims qti-gap-match-interaction qti-gap[active], qti-gap-match-interaction .qti-theme-ims qti-gap[active] {
-  background: rgb(var(--qti-primary) 0.4) !important;
-}
-.qti-theme-ims qti-gap-match-interaction qti-gap-text, qti-gap-match-interaction .qti-theme-ims qti-gap-text {
-  position: relative;
-  display: inline-block;
-  border-radius: var(--qti-border-radius);
-  color: var(--qti-text-color);
-  cursor: pointer;
-  padding: var(--qti-padding-x) var(--qti-padding-y);
-  background: var(--qti-background);
-  box-shadow: inset 0 0 0 var(--qti-border-width) var(--qti-border-color);
-}
-.qti-theme-ims qti-gap-match-interaction qti-gap-text[disabled], qti-gap-match-interaction .qti-theme-ims qti-gap-text[disabled] {
-  --qti-border-color: var(--qti-shadow-color);
-  color: var(--qti-shadow-color);
-  cursor: unset !important;
-  filter: grayscale(100%);
-}
-.qti-theme-ims qti-gap-match-interaction qti-gap-text:focus-within, qti-gap-match-interaction .qti-theme-ims qti-gap-text:focus-within {
-  outline-color: rgb(var(--qti-primary) 0.6);
-  outline-offset: 4px;
-  outline-style: solid;
-  outline-width: var(--qti-border-width);
-  /* applies to all before elements, choice round and circle, slider thumb */
-}
-.qti-theme-ims qti-gap-match-interaction qti-gap-text:focus-within::before, qti-gap-match-interaction .qti-theme-ims qti-gap-text:focus-within::before {
-  background-color: rgb(var(--qti-primary) 0.2);
-}
-.qti-theme-ims qti-gap-match-interaction qti-gap-text:hover:not([disabled]), qti-gap-match-interaction .qti-theme-ims qti-gap-text:hover:not([disabled]) {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 2px;
-  outline-style: solid;
-  outline-width: calc(var(--qti-border-width) * 2);
-}
-.qti-theme-ims qti-gap-match-interaction qti-gap-text[active], qti-gap-match-interaction .qti-theme-ims qti-gap-text[active] {
-  background: rgb(var(--qti-primary) 0.4) !important;
-}
-qti-gap-match-interaction {
-  display: block;
-}
-qti-gap-match-interaction qti-gap {
-  width: 20%;
-}
-.qti-theme-raised {
-  /* < usabled classes to extend in qti-components > */
-}
-.qti-theme-raised qti-graphic-associate-interaction [qti-choice], qti-graphic-associate-interaction .qti-theme-raised [qti-choice] {
-  cursor: pointer;
-  --width: 22px;
-  --height: 22px;
-  display: inline-flex;
-  width: -moz-fit-content;
-  width: fit-content;
-  align-items: center;
-  gap: 0.2rem;
-}
-.qti-theme-raised qti-graphic-associate-interaction [disabled][qti-choice], qti-graphic-associate-interaction .qti-theme-raised [disabled][qti-choice] {
-  box-shadow: unset !important;
-  color: var(--qti-border-color);
-  cursor: unset !important;
-}
-.qti-theme-raised qti-graphic-associate-interaction [qti-choice]:focus, qti-graphic-associate-interaction .qti-theme-raised [qti-choice]:focus {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 2px;
-  outline-style: solid;
-  outline-width: var(--qti-border-width);
-}
-.qti-theme-raised qti-graphic-associate-interaction [qti-choice]:hover:not([disabled]), qti-graphic-associate-interaction .qti-theme-raised [qti-choice]:hover:not([disabled]) {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 0;
-  outline-style: solid;
-  outline-width: calc(var(--qti-border-width) * 2);
-}
-.qti-theme-raised qti-graphic-associate-interaction [qti-choice]::before, qti-graphic-associate-interaction .qti-theme-raised [qti-choice]::before {
-  position: relative;
-  display: inline-block;
-  border-radius: var(--qti-border-radius);
-  color: var(--qti-text-color);
-  background: var(--qti-background);
-  box-shadow: inset 0 0 0 var(--qti-border-width) var(--qti-border-color), 0 var(--qti-border-width) var(--qti-border-color);
-}
-/* </ end test classes for storybook> */
-.qti-theme-subtle {
-  /* < usabled classes to extend in qti-components */
-}
-.qti-theme-subtle qti-graphic-associate-interaction [qti-choice], qti-graphic-associate-interaction .qti-theme-subtle [qti-choice] {
-  cursor: pointer;
-  --width: 22px;
-  --height: 22px;
-  display: inline-flex;
-  width: -moz-fit-content;
-  width: fit-content;
-  align-items: center;
-  gap: 0.2rem;
-}
-.qti-theme-subtle qti-graphic-associate-interaction [disabled][qti-choice], qti-graphic-associate-interaction .qti-theme-subtle [disabled][qti-choice] {
-  --qti-border-color: transparent;
-  box-shadow: unset !important;
-  color: var(--qti-shadow-color);
-  cursor: unset !important;
-}
-.qti-theme-subtle qti-graphic-associate-interaction [qti-choice]:focus, qti-graphic-associate-interaction .qti-theme-subtle [qti-choice]:focus {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 2px;
-  outline-style: solid;
-  outline-width: var(--qti-border-width);
-}
-.qti-theme-subtle qti-graphic-associate-interaction [qti-choice]:hover:not([disabled]), qti-graphic-associate-interaction .qti-theme-subtle [qti-choice]:hover:not([disabled]) {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 0;
-  outline-style: solid;
-  outline-width: calc(var(--qti-border-width) * 2);
-}
-.qti-theme-subtle qti-graphic-associate-interaction [qti-choice]::before, qti-graphic-associate-interaction .qti-theme-subtle [qti-choice]::before {
-  position: relative;
-  display: inline-block;
-  border-radius: var(--qti-border-radius);
-  color: var(--qti-text-color);
-  background: linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/2px 100% no-repeat, linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 100% 0/2px 100% no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/100% 2px no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 100%/100% 2px no-repeat;
-}
-.qti-theme-ims {
-  /* < usabled classes to extend in qti-components > */
-}
-.qti-theme-ims qti-graphic-associate-interaction [qti-choice], qti-graphic-associate-interaction .qti-theme-ims [qti-choice] {
-  cursor: pointer;
-  --width: 22px;
-  --height: 22px;
-  display: inline-flex;
-  width: -moz-fit-content;
-  width: fit-content;
-  align-items: center;
-  gap: 0.2rem;
-}
-.qti-theme-ims qti-graphic-associate-interaction [disabled][qti-choice], qti-graphic-associate-interaction .qti-theme-ims [disabled][qti-choice] {
-  --qti-border-color: var(--qti-shadow-color);
-  color: var(--qti-shadow-color);
-  cursor: unset !important;
-  filter: grayscale(100%);
-}
-.qti-theme-ims qti-graphic-associate-interaction [qti-choice]:focus-within, qti-graphic-associate-interaction .qti-theme-ims [qti-choice]:focus-within {
-  outline-color: rgb(var(--qti-primary) 0.6);
-  outline-offset: 4px;
-  outline-style: solid;
-  outline-width: var(--qti-border-width);
-  /* applies to all before elements, choice round and circle, slider thumb */
-}
-.qti-theme-ims qti-graphic-associate-interaction [qti-choice]:focus-within::before, qti-graphic-associate-interaction .qti-theme-ims [qti-choice]:focus-within::before {
-  background-color: rgb(var(--qti-primary) 0.2);
-}
-.qti-theme-ims qti-graphic-associate-interaction [qti-choice]:hover:not([disabled]), qti-graphic-associate-interaction .qti-theme-ims [qti-choice]:hover:not([disabled]) {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 2px;
-  outline-style: solid;
-  outline-width: calc(var(--qti-border-width) * 2);
-}
-qti-graphic-associate-interaction {
-  position: relative;
-  display: block;
-}
-qti-graphic-associate-interaction [qti-choice] {
-  position: absolute;
-}
-qti-graphic-associate-interaction [qti-choice][shape=circle]::before {
-  border-radius: 100%;
-  background: transparent;
-}
-qti-graphic-associate-interaction [qti-choice][shape=square]::before {
-  border-radius: 0;
-  background: transparent;
-}
-qti-graphic-associate-interaction [qti-choice]::after {
-  display: flex !important;
-  width: unset !important;
-  min-width: var(--width);
-  height: unset !important;
-  min-height: var(--width);
-  align-items: center;
-  justify-content: center;
-  border: unset !important;
-  content: attr(aria-ordervalue) !important;
-  opacity: unset !important;
-  transform: unset !important;
-  transition: unset !important;
-}
-.qti-theme-raised {
-  /* < usabled classes to extend in qti-components > */
-}
-/* </ end test classes for storybook> */
-.qti-theme-subtle {
-  /* < usabled classes to extend in qti-components */
-}
-.qti-theme-ims {
-  /* < usabled classes to extend in qti-components > */
-}
-qti-graphic-gap-match-interaction {
-  position: relative;
-  display: block;
-}
-.qti-theme-raised {
-  /* < usabled classes to extend in qti-components > */
-}
-.qti-theme-raised qti-graphic-order-interaction qti-hotspot-choice, qti-graphic-order-interaction .qti-theme-raised qti-hotspot-choice {
-  cursor: pointer;
-  --width: 22px;
-  --height: 22px;
-  display: inline-flex;
-  width: -moz-fit-content;
-  width: fit-content;
-  align-items: center;
-  gap: 0.2rem;
-}
-.qti-theme-raised qti-graphic-order-interaction qti-hotspot-choice[disabled], qti-graphic-order-interaction .qti-theme-raised qti-hotspot-choice[disabled] {
-  box-shadow: unset !important;
-  color: var(--qti-border-color);
-  cursor: unset !important;
-}
-.qti-theme-raised qti-graphic-order-interaction qti-hotspot-choice:focus, qti-graphic-order-interaction .qti-theme-raised qti-hotspot-choice:focus {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 2px;
-  outline-style: solid;
-  outline-width: var(--qti-border-width);
-}
-.qti-theme-raised qti-graphic-order-interaction qti-hotspot-choice:hover:not([disabled]), qti-graphic-order-interaction .qti-theme-raised qti-hotspot-choice:hover:not([disabled]) {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 0;
-  outline-style: solid;
-  outline-width: calc(var(--qti-border-width) * 2);
-}
-.qti-theme-raised qti-graphic-order-interaction qti-hotspot-choice::before, qti-graphic-order-interaction .qti-theme-raised qti-hotspot-choice::before {
-  position: relative;
-  display: inline-block;
-  border-radius: var(--qti-border-radius);
-  color: var(--qti-text-color);
-  background: var(--qti-background);
-  box-shadow: inset 0 0 0 var(--qti-border-width) var(--qti-border-color), 0 var(--qti-border-width) var(--qti-border-color);
-}
-/* </ end test classes for storybook> */
-.qti-theme-subtle {
-  /* < usabled classes to extend in qti-components */
-}
-.qti-theme-subtle qti-graphic-order-interaction qti-hotspot-choice, qti-graphic-order-interaction .qti-theme-subtle qti-hotspot-choice {
-  cursor: pointer;
-  --width: 22px;
-  --height: 22px;
-  display: inline-flex;
-  width: -moz-fit-content;
-  width: fit-content;
-  align-items: center;
-  gap: 0.2rem;
-}
-.qti-theme-subtle qti-graphic-order-interaction qti-hotspot-choice[disabled], qti-graphic-order-interaction .qti-theme-subtle qti-hotspot-choice[disabled] {
-  --qti-border-color: transparent;
-  box-shadow: unset !important;
-  color: var(--qti-shadow-color);
-  cursor: unset !important;
-}
-.qti-theme-subtle qti-graphic-order-interaction qti-hotspot-choice:focus, qti-graphic-order-interaction .qti-theme-subtle qti-hotspot-choice:focus {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 2px;
-  outline-style: solid;
-  outline-width: var(--qti-border-width);
-}
-.qti-theme-subtle qti-graphic-order-interaction qti-hotspot-choice:hover:not([disabled]), qti-graphic-order-interaction .qti-theme-subtle qti-hotspot-choice:hover:not([disabled]) {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 0;
-  outline-style: solid;
-  outline-width: calc(var(--qti-border-width) * 2);
-}
-.qti-theme-subtle qti-graphic-order-interaction qti-hotspot-choice::before, qti-graphic-order-interaction .qti-theme-subtle qti-hotspot-choice::before {
-  position: relative;
-  display: inline-block;
-  border-radius: var(--qti-border-radius);
-  color: var(--qti-text-color);
-  background: linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/2px 100% no-repeat, linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 100% 0/2px 100% no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/100% 2px no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 100%/100% 2px no-repeat;
-}
-.qti-theme-ims {
-  /* < usabled classes to extend in qti-components > */
-}
-.qti-theme-ims qti-graphic-order-interaction qti-hotspot-choice, qti-graphic-order-interaction .qti-theme-ims qti-hotspot-choice {
-  cursor: pointer;
-  --width: 22px;
-  --height: 22px;
-  display: inline-flex;
-  width: -moz-fit-content;
-  width: fit-content;
-  align-items: center;
-  gap: 0.2rem;
-}
-.qti-theme-ims qti-graphic-order-interaction qti-hotspot-choice[disabled], qti-graphic-order-interaction .qti-theme-ims qti-hotspot-choice[disabled] {
-  --qti-border-color: var(--qti-shadow-color);
-  color: var(--qti-shadow-color);
-  cursor: unset !important;
-  filter: grayscale(100%);
-}
-.qti-theme-ims qti-graphic-order-interaction qti-hotspot-choice:focus-within, qti-graphic-order-interaction .qti-theme-ims qti-hotspot-choice:focus-within {
-  outline-color: rgb(var(--qti-primary) 0.6);
-  outline-offset: 4px;
-  outline-style: solid;
-  outline-width: var(--qti-border-width);
-  /* applies to all before elements, choice round and circle, slider thumb */
-}
-.qti-theme-ims qti-graphic-order-interaction qti-hotspot-choice:focus-within::before, qti-graphic-order-interaction .qti-theme-ims qti-hotspot-choice:focus-within::before {
-  background-color: rgb(var(--qti-primary) 0.2);
-}
-.qti-theme-ims qti-graphic-order-interaction qti-hotspot-choice:hover:not([disabled]), qti-graphic-order-interaction .qti-theme-ims qti-hotspot-choice:hover:not([disabled]) {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 2px;
-  outline-style: solid;
-  outline-width: calc(var(--qti-border-width) * 2);
-}
-qti-graphic-order-interaction {
-  position: relative;
-  display: block;
-}
-qti-graphic-order-interaction qti-hotspot-choice {
-  position: absolute;
-}
-qti-graphic-order-interaction qti-hotspot-choice[shape=circle]::before {
-  border-radius: 100%;
-  background: transparent;
-}
-qti-graphic-order-interaction qti-hotspot-choice[shape=square]::before {
-  border-radius: 0;
-  background: transparent;
-}
-qti-graphic-order-interaction qti-hotspot-choice::before {
-  content: unset !important;
-}
-qti-graphic-order-interaction qti-hotspot-choice::after {
-  display: flex !important;
-  width: unset !important;
-  min-width: var(--width);
-  height: unset !important;
-  min-height: var(--width);
-  align-items: center;
-  justify-content: center;
-  border: unset !important;
-  background: unset;
-  background: rgba(21, 0, 255, 0.067);
-  content: attr(aria-ordervalue) !important;
-  opacity: unset !important;
-  transform: unset !important;
-  transition: unset !important;
-}
-.qti-theme-raised {
-  /* < usabled classes to extend in qti-components > */
-}
-/* </ end test classes for storybook> */
-.qti-theme-subtle {
-  /* < usabled classes to extend in qti-components */
-}
-.qti-theme-ims {
-  /* < usabled classes to extend in qti-components > */
-}
-.qti-theme-ims qti-hotspot-interaction qti-hotspot-choice, qti-hotspot-interaction .qti-theme-ims qti-hotspot-choice {
-  padding: var(--qti-padding-x) var(--qti-padding-y);
-  cursor: pointer;
-  background: var(--qti-background);
-}
-.qti-theme-ims qti-hotspot-interaction qti-hotspot-choice[disabled], qti-hotspot-interaction .qti-theme-ims qti-hotspot-choice[disabled] {
-  --qti-border-color: var(--qti-shadow-color);
-  color: var(--qti-shadow-color);
-  cursor: unset !important;
-  filter: grayscale(100%);
-}
-.qti-theme-ims qti-hotspot-interaction qti-hotspot-choice:focus-within, qti-hotspot-interaction .qti-theme-ims qti-hotspot-choice:focus-within {
-  outline-color: rgb(var(--qti-primary) 0.6);
-  outline-offset: 4px;
-  outline-style: solid;
-  outline-width: var(--qti-border-width);
-  /* applies to all before elements, choice round and circle, slider thumb */
-}
-.qti-theme-ims qti-hotspot-interaction qti-hotspot-choice:focus-within::before, qti-hotspot-interaction .qti-theme-ims qti-hotspot-choice:focus-within::before {
-  background-color: rgb(var(--qti-primary) 0.2);
-}
-.qti-theme-ims qti-hotspot-interaction qti-hotspot-choice:hover:not([disabled]), qti-hotspot-interaction .qti-theme-ims qti-hotspot-choice:hover:not([disabled]) {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 2px;
-  outline-style: solid;
-  outline-width: calc(var(--qti-border-width) * 2);
-}
-.qti-theme-ims qti-hotspot-interaction qti-hotspot-choice[aria-checked=true], qti-hotspot-interaction .qti-theme-ims qti-hotspot-choice[aria-checked=true] {
-  --qti-border-color: var(--qti-primary-color);
-  background-color: var(--qti-primary-color);
-  color: #fff;
-}
-qti-hotspot-interaction qti-hotspot-choice {
-  position: absolute;
-}
-@charset "UTF-8";
-.qti-theme-raised {
-  /* < usabled classes to extend in qti-components > */
-}
-.qti-theme-raised qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-raised qti-simple-associable-choice {
-  position: relative;
-  display: inline-block;
-  border-radius: var(--qti-border-radius);
-  color: var(--qti-text-color);
-  background: var(--qti-background);
-  box-shadow: inset 0 var(--qti-border-width) var(--qti-border-color);
-}
-.qti-theme-raised qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice:empty::after, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-raised qti-simple-associable-choice:empty::after {
-  padding: var(--qti-padding-x) var(--qti-padding-y);
-  /* when empty, put a space in it, so the height remains the same */
-  display: inline-block;
-  content: " ";
-}
-.qti-theme-raised qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice:not(:empty), qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-raised qti-simple-associable-choice:not(:empty) {
-  display: flex;
-}
-.qti-theme-raised qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice:not(:empty) > *, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-raised qti-simple-associable-choice:not(:empty) > * {
-  box-shadow: unset;
-  flex-grow: 1;
-  margin: 2px;
-}
-.qti-theme-raised qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice[active], qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-raised qti-simple-associable-choice[active] {
-  background: var(--qti-background);
-}
-.qti-theme-raised qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-raised qti-simple-associable-choice, .qti-theme-raised qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-raised qti-simple-associable-choice > qti-simple-associable-choice {
-  position: relative;
-  display: inline-block;
-  border-radius: var(--qti-border-radius);
-  color: var(--qti-text-color);
-  padding: var(--qti-padding-x) var(--qti-padding-y);
-  cursor: pointer;
-  background: var(--qti-background);
-  -webkit-user-select: none;
-          user-select: none;
-  box-shadow: 0 var(--qti-border-width) var(--qti-border-color), 0 calc(var(--qti-border-width) * 2) var(--qti-shadow-blur) var(--qti-shadow-color);
-}
-.qti-theme-raised qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice[disabled], qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-raised qti-simple-associable-choice[disabled], .qti-theme-raised qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice[disabled], qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-raised qti-simple-associable-choice > qti-simple-associable-choice[disabled] {
-  box-shadow: unset !important;
-  color: var(--qti-border-color);
-  cursor: unset !important;
-}
-.qti-theme-raised qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice:focus, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-raised qti-simple-associable-choice:focus, .qti-theme-raised qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice:focus, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-raised qti-simple-associable-choice > qti-simple-associable-choice:focus {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 2px;
-  outline-style: solid;
-  outline-width: var(--qti-border-width);
-}
-.qti-theme-raised qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice:hover:not([disabled]), qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-raised qti-simple-associable-choice:hover:not([disabled]), .qti-theme-raised qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice:hover:not([disabled]), qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-raised qti-simple-associable-choice > qti-simple-associable-choice:hover:not([disabled]) {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 0;
-  outline-style: solid;
-  outline-width: calc(var(--qti-border-width) * 2);
-}
-.qti-theme-raised qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice::before, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-raised qti-simple-associable-choice::before, .qti-theme-raised qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice::before, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-raised qti-simple-associable-choice > qti-simple-associable-choice::before {
-  position: absolute;
-  bottom: 0.2rem;
-  top: 0.2rem;
-  left: 0.2rem;
-  width: 0.3rem;
-  max-height: 2rem;
-  background: radial-gradient(ellipse at center, var(--qti-border-color) 0%, var(--qti-border-color) 40%, transparent 40%);
-  background-repeat: repeat;
-  background-size: 0.3rem 0.3rem;
-  content: "";
-}
-/* </ end test classes for storybook> */
-.qti-theme-subtle {
-  /* < usabled classes to extend in qti-components */
-}
-.qti-theme-subtle qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-subtle qti-simple-associable-choice {
-  position: relative;
-  display: inline-block;
-  border-radius: var(--qti-border-radius);
-  color: var(--qti-text-color);
-  background: radial-gradient(16px circle, transparent 0%, transparent calc(50% - var(--qti-border-width) / 2), var(--qti-border-color) calc(50% - (var(--qti-border-width) / 2 - 0.2px)), var(--qti-border-color) calc(50% + var(--qti-border-width) / 2 - 0.2px), transparent calc(50% + var(--qti-border-width) / 2), transparent 100%), linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/2px 100% no-repeat, linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 100% 0/2px 100% no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/100% 2px no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 100%/100% 2px no-repeat, var(--qti-background);
-  transition: all 0.2s ease-out;
-}
-.qti-theme-subtle qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice:empty::after, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-subtle qti-simple-associable-choice:empty::after {
-  padding: var(--qti-padding-x) var(--qti-padding-y);
-  /* when empty, put a space in it, so the height remains the same */
-  display: inline-block;
-  content: " ";
-}
-.qti-theme-subtle qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice:not(:empty), qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-subtle qti-simple-associable-choice:not(:empty) {
-  display: flex;
-}
-.qti-theme-subtle qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice:not(:empty) > *, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-subtle qti-simple-associable-choice:not(:empty) > * {
-  flex-grow: 1;
-  margin: 2px;
-}
-.qti-theme-subtle qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice[active], qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-subtle qti-simple-associable-choice[active] {
-  background: radial-gradient(16px circle, transparent 0%, transparent calc(50% - var(--qti-border-width) / 2), var(--qti-border-color) calc(50% - (var(--qti-border-width) / 2 - 0.2px)), var(--qti-border-color) calc(50% + var(--qti-border-width) / 2 - 0.2px), transparent calc(50% + var(--qti-border-width) / 2), transparent 100%), linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/2px 100% no-repeat, linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 100% 0/2px 100% no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/100% 2px no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 100%/100% 2px no-repeat, var(--qti-background);
-  transform: scale(1.02);
-}
-.qti-theme-subtle qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-subtle qti-simple-associable-choice, .qti-theme-subtle qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-subtle qti-simple-associable-choice > qti-simple-associable-choice {
-  position: relative;
-  display: inline-block;
-  border-radius: var(--qti-border-radius);
-  color: var(--qti-text-color);
-  padding: var(--qti-padding-x) var(--qti-padding-y);
-  cursor: pointer;
-  -webkit-user-select: none;
-          user-select: none;
-  background: linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/2px 100% no-repeat, linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 100% 0/2px 100% no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/100% 2px no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 100%/100% 2px no-repeat, var(--qti-background);
-}
-.qti-theme-subtle qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice[disabled], qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-subtle qti-simple-associable-choice[disabled], .qti-theme-subtle qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice[disabled], qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-subtle qti-simple-associable-choice > qti-simple-associable-choice[disabled] {
-  --qti-border-color: transparent;
-  box-shadow: unset !important;
-  color: var(--qti-shadow-color);
-  cursor: unset !important;
-}
-.qti-theme-subtle qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice:focus, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-subtle qti-simple-associable-choice:focus, .qti-theme-subtle qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice:focus, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-subtle qti-simple-associable-choice > qti-simple-associable-choice:focus {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 2px;
-  outline-style: solid;
-  outline-width: var(--qti-border-width);
-}
-.qti-theme-subtle qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice:hover:not([disabled]), qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-subtle qti-simple-associable-choice:hover:not([disabled]), .qti-theme-subtle qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice:hover:not([disabled]), qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-subtle qti-simple-associable-choice > qti-simple-associable-choice:hover:not([disabled]) {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 0;
-  outline-style: solid;
-  outline-width: calc(var(--qti-border-width) * 2);
-}
-.qti-theme-subtle qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice::before, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-subtle qti-simple-associable-choice::before, .qti-theme-subtle qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice::before, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-subtle qti-simple-associable-choice > qti-simple-associable-choice::before {
-  position: absolute;
-  bottom: 0.2rem;
-  top: 0.2rem;
-  left: 0.2rem;
-  width: 0.3rem;
-  max-height: 2rem;
-  background: radial-gradient(ellipse at center, var(--qti-border-color) 0%, var(--qti-border-color) 40%, transparent 40%);
-  background-repeat: repeat;
-  background-size: 0.3rem 0.3rem;
-  content: "";
-}
-.qti-theme-ims {
-  /* < usabled classes to extend in qti-components > */
-}
-.qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-ims qti-simple-associable-choice {
-  position: relative;
-  display: inline-block;
-  border-radius: var(--qti-border-radius);
-  color: var(--qti-text-color);
-  border-radius: 0;
-  background: var(--qti-white);
-  box-shadow: inset 0 0 0 var(--qti-border-width) var(--qti-border-color);
-}
-.qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice[disabled], qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-ims qti-simple-associable-choice[disabled] {
-  --qti-border-color: var(--qti-shadow-color);
-  color: var(--qti-shadow-color);
-  cursor: unset !important;
-  filter: grayscale(100%);
-}
-.qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice:focus-within, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-ims qti-simple-associable-choice:focus-within {
-  outline-color: rgb(var(--qti-primary) 0.6);
-  outline-offset: 4px;
-  outline-style: solid;
-  outline-width: var(--qti-border-width);
-  /* applies to all before elements, choice round and circle, slider thumb */
-}
-.qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice:focus-within::before, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-ims qti-simple-associable-choice:focus-within::before {
-  background-color: rgb(var(--qti-primary) 0.2);
-}
-.qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice:hover:not([disabled]), qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-ims qti-simple-associable-choice:hover:not([disabled]) {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 2px;
-  outline-style: solid;
-  outline-width: calc(var(--qti-border-width) * 2);
-}
-.qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice:empty::after, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-ims qti-simple-associable-choice:empty::after {
-  padding: var(--qti-padding-x) var(--qti-padding-y);
-  /* when empty, put a space in it, so the height remains the same */
-  display: inline-block;
-  content: " ";
-}
-.qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice:not(:empty), qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-ims qti-simple-associable-choice:not(:empty) {
-  display: inline-flex;
-}
-.qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice:not(:empty) > *, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-ims qti-simple-associable-choice:not(:empty) > * {
-  flex-grow: 1;
-  margin: 2px;
-}
-.qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice[active], qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-ims qti-simple-associable-choice[active] {
-  background: rgb(var(--qti-primary) 0.4) !important;
-}
-.qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-ims qti-simple-associable-choice, .qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-ims qti-simple-associable-choice > qti-simple-associable-choice {
-  position: relative;
-  display: inline-block;
-  border-radius: var(--qti-border-radius);
-  color: var(--qti-text-color);
-  cursor: pointer;
-  padding: var(--qti-padding-x) var(--qti-padding-y);
-  background: var(--qti-background);
-  box-shadow: inset 0 0 0 var(--qti-border-width) var(--qti-border-color);
-}
-.qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice[disabled], qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-ims qti-simple-associable-choice[disabled], .qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice[disabled], qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-ims qti-simple-associable-choice > qti-simple-associable-choice[disabled] {
-  --qti-border-color: var(--qti-shadow-color);
-  color: var(--qti-shadow-color);
-  cursor: unset !important;
-  filter: grayscale(100%);
-}
-.qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice:focus-within, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-ims qti-simple-associable-choice:focus-within, .qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice:focus-within, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-ims qti-simple-associable-choice > qti-simple-associable-choice:focus-within {
-  outline-color: rgb(var(--qti-primary) 0.6);
-  outline-offset: 4px;
-  outline-style: solid;
-  outline-width: var(--qti-border-width);
-  /* applies to all before elements, choice round and circle, slider thumb */
-}
-.qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice:focus-within::before, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-ims qti-simple-associable-choice:focus-within::before, .qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice:focus-within::before, qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-ims qti-simple-associable-choice > qti-simple-associable-choice:focus-within::before {
-  background-color: rgb(var(--qti-primary) 0.2);
-}
-.qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice:hover:not([disabled]), qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-ims qti-simple-associable-choice:hover:not([disabled]), .qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice:hover:not([disabled]), qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-ims qti-simple-associable-choice > qti-simple-associable-choice:hover:not([disabled]) {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 2px;
-  outline-style: solid;
-  outline-width: calc(var(--qti-border-width) * 2);
-}
-.qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice[active], qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type .qti-theme-ims qti-simple-associable-choice[active], .qti-theme-ims qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice[active], qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type .qti-theme-ims qti-simple-associable-choice > qti-simple-associable-choice[active] {
-  background: rgb(var(--qti-primary) 0.4) !important;
-}
-qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type {
-  display: flex;
-  gap: var(--qti-gap, 0.5rem);
-  flex-wrap: wrap;
-  padding-bottom: var(--qti-gap, 0.5rem);
-}
-qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type {
-  display: flex;
-  gap: var(--qti-gap, 0.5rem);
-  flex-wrap: wrap;
-}
-qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice {
-  padding: var(--qti-padding-x) var(--qti-padding-y);
-  flex: 1 1 0px;
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: column;
-}
-qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice {
-  height: auto;
-}
-
-qti-match-interaction.qti-match-tabular qti-simple-match-set:first-of-type {
-  display: flex;
-  margin-left: 4rem;
-  font-weight: bold;
-  gap: 2rem;
-}
-qti-match-interaction.qti-match-tabular qti-simple-match-set:last-of-type {
-  display: flex;
-  flex-direction: column;
-  gap: 0.2rem;
-}
-qti-match-interaction.qti-match-tabular qti-simple-match-set:last-of-type qti-simple-associable-choice {
-  display: unset !important;
-}
-qti-match-interaction.qti-match-tabular qti-simple-match-set:last-of-type qti-simple-associable-choice > * {
-  display: block !important;
-}
-
-.qti-theme-raised {
-  /* < usabled classes to extend in qti-components > */
-}
-.qti-theme-raised qti-order-interaction::part(drop-list) {
-  position: relative;
-  display: inline-block;
-  border-radius: var(--qti-border-radius);
-  color: var(--qti-text-color);
-  background: var(--qti-background);
-  box-shadow: inset 0 var(--qti-border-width) var(--qti-border-color);
-}
-.qti-theme-raised qti-order-interaction:not(:empty)::part(drop-list) {
-  display: flex;
-}
-.qti-theme-raised qti-order-interaction:not(:empty)::part(drop-list) > * {
-  box-shadow: unset;
-  flex-grow: 1;
-  margin: 2px;
-}
-.qti-theme-raised qti-order-interaction[active]::part(drop-list) {
-  background: var(--qti-background);
-}
-.qti-theme-raised qti-order-interaction qti-simple-choice, qti-order-interaction .qti-theme-raised qti-simple-choice, .qti-theme-raised qti-order-interaction::part(qti-simple-choice) {
-  position: relative;
-  display: inline-block;
-  border-radius: var(--qti-border-radius);
-  color: var(--qti-text-color);
-  padding: var(--qti-padding-x) var(--qti-padding-y);
-  cursor: pointer;
-  background: var(--qti-background);
-  -webkit-user-select: none;
-          user-select: none;
-  box-shadow: 0 var(--qti-border-width) var(--qti-border-color), 0 calc(var(--qti-border-width) * 2) var(--qti-shadow-blur) var(--qti-shadow-color);
-}
-.qti-theme-raised qti-order-interaction qti-simple-choice[disabled], qti-order-interaction .qti-theme-raised qti-simple-choice[disabled], .qti-theme-raised qti-order-interaction[disabled]::part(qti-simple-choice) {
-  box-shadow: unset !important;
-  color: var(--qti-border-color);
-  cursor: unset !important;
-}
-.qti-theme-raised qti-order-interaction qti-simple-choice:focus, qti-order-interaction .qti-theme-raised qti-simple-choice:focus, .qti-theme-raised qti-order-interaction:focus::part(qti-simple-choice) {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 2px;
-  outline-style: solid;
-  outline-width: var(--qti-border-width);
-}
-.qti-theme-raised qti-order-interaction qti-simple-choice:hover:not([disabled]), qti-order-interaction .qti-theme-raised qti-simple-choice:hover:not([disabled]), .qti-theme-raised qti-order-interaction:hover:not([disabled])::part(qti-simple-choice) {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 0;
-  outline-style: solid;
-  outline-width: calc(var(--qti-border-width) * 2);
-}
-.qti-theme-raised qti-order-interaction qti-simple-choice::before, qti-order-interaction .qti-theme-raised qti-simple-choice::before {
-  position: absolute;
-  bottom: 0.2rem;
-  top: 0.2rem;
-  left: 0.2rem;
-  width: 0.3rem;
-  max-height: 2rem;
-  background: radial-gradient(ellipse at center, var(--qti-border-color) 0%, var(--qti-border-color) 40%, transparent 40%);
-  background-repeat: repeat;
-  background-size: 0.3rem 0.3rem;
-  content: "";
-}
-/* </ end test classes for storybook> */
-.qti-theme-subtle {
-  /* < usabled classes to extend in qti-components */
-}
-.qti-theme-subtle qti-order-interaction::part(drop-list) {
-  position: relative;
-  display: inline-block;
-  border-radius: var(--qti-border-radius);
-  color: var(--qti-text-color);
-  background: radial-gradient(16px circle, transparent 0%, transparent calc(50% - var(--qti-border-width) / 2), var(--qti-border-color) calc(50% - (var(--qti-border-width) / 2 - 0.2px)), var(--qti-border-color) calc(50% + var(--qti-border-width) / 2 - 0.2px), transparent calc(50% + var(--qti-border-width) / 2), transparent 100%), linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/2px 100% no-repeat, linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 100% 0/2px 100% no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/100% 2px no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 100%/100% 2px no-repeat, var(--qti-background);
-  transition: all 0.2s ease-out;
-}
-.qti-theme-subtle qti-order-interaction:not(:empty)::part(drop-list) {
-  display: flex;
-}
-.qti-theme-subtle qti-order-interaction:not(:empty)::part(drop-list) > * {
-  flex-grow: 1;
-  margin: 2px;
-}
-.qti-theme-subtle qti-order-interaction[active]::part(drop-list) {
-  background: radial-gradient(16px circle, transparent 0%, transparent calc(50% - var(--qti-border-width) / 2), var(--qti-border-color) calc(50% - (var(--qti-border-width) / 2 - 0.2px)), var(--qti-border-color) calc(50% + var(--qti-border-width) / 2 - 0.2px), transparent calc(50% + var(--qti-border-width) / 2), transparent 100%), linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/2px 100% no-repeat, linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 100% 0/2px 100% no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/100% 2px no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 100%/100% 2px no-repeat, var(--qti-background);
-  transform: scale(1.02);
-}
-.qti-theme-subtle qti-order-interaction qti-simple-choice, qti-order-interaction .qti-theme-subtle qti-simple-choice, .qti-theme-subtle qti-order-interaction::part(qti-simple-choice) {
-  position: relative;
-  display: inline-block;
-  border-radius: var(--qti-border-radius);
-  color: var(--qti-text-color);
-  padding: var(--qti-padding-x) var(--qti-padding-y);
-  cursor: pointer;
-  -webkit-user-select: none;
-          user-select: none;
-  background: linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/2px 100% no-repeat, linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 100% 0/2px 100% no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/100% 2px no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 100%/100% 2px no-repeat, var(--qti-background);
-}
-.qti-theme-subtle qti-order-interaction qti-simple-choice[disabled], qti-order-interaction .qti-theme-subtle qti-simple-choice[disabled], .qti-theme-subtle qti-order-interaction[disabled]::part(qti-simple-choice) {
-  --qti-border-color: transparent;
-  box-shadow: unset !important;
-  color: var(--qti-shadow-color);
-  cursor: unset !important;
-}
-.qti-theme-subtle qti-order-interaction qti-simple-choice:focus, qti-order-interaction .qti-theme-subtle qti-simple-choice:focus, .qti-theme-subtle qti-order-interaction:focus::part(qti-simple-choice) {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 2px;
-  outline-style: solid;
-  outline-width: var(--qti-border-width);
-}
-.qti-theme-subtle qti-order-interaction qti-simple-choice:hover:not([disabled]), qti-order-interaction .qti-theme-subtle qti-simple-choice:hover:not([disabled]), .qti-theme-subtle qti-order-interaction:hover:not([disabled])::part(qti-simple-choice) {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 0;
-  outline-style: solid;
-  outline-width: calc(var(--qti-border-width) * 2);
-}
-.qti-theme-subtle qti-order-interaction qti-simple-choice::before, qti-order-interaction .qti-theme-subtle qti-simple-choice::before {
-  position: absolute;
-  bottom: 0.2rem;
-  top: 0.2rem;
-  left: 0.2rem;
-  width: 0.3rem;
-  max-height: 2rem;
-  background: radial-gradient(ellipse at center, var(--qti-border-color) 0%, var(--qti-border-color) 40%, transparent 40%);
-  background-repeat: repeat;
-  background-size: 0.3rem 0.3rem;
-  content: "";
-}
-.qti-theme-ims {
-  /* < usabled classes to extend in qti-components > */
-}
-.qti-theme-ims qti-order-interaction::part(drop-list) {
-  position: relative;
-  display: inline-block;
-  border-radius: var(--qti-border-radius);
-  color: var(--qti-text-color);
-  border-radius: 0;
-  background: var(--qti-white);
-  box-shadow: inset 0 0 0 var(--qti-border-width) var(--qti-border-color);
-}
-.qti-theme-ims qti-order-interaction[disabled]::part(drop-list) {
-  --qti-border-color: var(--qti-shadow-color);
-  color: var(--qti-shadow-color);
-  cursor: unset !important;
-  filter: grayscale(100%);
-}
-.qti-theme-ims qti-order-interaction:focus-within::part(drop-list) {
-  outline-color: rgb(var(--qti-primary) 0.6);
-  outline-offset: 4px;
-  outline-style: solid;
-  outline-width: var(--qti-border-width);
-  /* applies to all before elements, choice round and circle, slider thumb */
-}
-.qti-theme-ims qti-order-interaction:hover:not([disabled])::part(drop-list) {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 2px;
-  outline-style: solid;
-  outline-width: calc(var(--qti-border-width) * 2);
-}
-.qti-theme-ims qti-order-interaction:not(:empty)::part(drop-list) {
-  display: inline-flex;
-}
-.qti-theme-ims qti-order-interaction:not(:empty)::part(drop-list) > * {
-  flex-grow: 1;
-  margin: 2px;
-}
-.qti-theme-ims qti-order-interaction[active]::part(drop-list) {
-  background: rgb(var(--qti-primary) 0.4) !important;
-}
-.qti-theme-ims qti-order-interaction qti-simple-choice, qti-order-interaction .qti-theme-ims qti-simple-choice, .qti-theme-ims qti-order-interaction::part(qti-simple-choice) {
-  position: relative;
-  display: inline-block;
-  border-radius: var(--qti-border-radius);
-  color: var(--qti-text-color);
-  cursor: pointer;
-  padding: var(--qti-padding-x) var(--qti-padding-y);
-  background: var(--qti-background);
-  box-shadow: inset 0 0 0 var(--qti-border-width) var(--qti-border-color);
-}
-.qti-theme-ims qti-order-interaction qti-simple-choice[disabled], qti-order-interaction .qti-theme-ims qti-simple-choice[disabled], .qti-theme-ims qti-order-interaction[disabled]::part(qti-simple-choice) {
-  --qti-border-color: var(--qti-shadow-color);
-  color: var(--qti-shadow-color);
-  cursor: unset !important;
-  filter: grayscale(100%);
-}
-.qti-theme-ims qti-order-interaction qti-simple-choice:focus-within, qti-order-interaction .qti-theme-ims qti-simple-choice:focus-within, .qti-theme-ims qti-order-interaction:focus-within::part(qti-simple-choice) {
-  outline-color: rgb(var(--qti-primary) 0.6);
-  outline-offset: 4px;
-  outline-style: solid;
-  outline-width: var(--qti-border-width);
-  /* applies to all before elements, choice round and circle, slider thumb */
-}
-.qti-theme-ims qti-order-interaction qti-simple-choice:focus-within::before, qti-order-interaction .qti-theme-ims qti-simple-choice:focus-within::before {
-  background-color: rgb(var(--qti-primary) 0.2);
-}
-.qti-theme-ims qti-order-interaction qti-simple-choice:hover:not([disabled]), qti-order-interaction .qti-theme-ims qti-simple-choice:hover:not([disabled]), .qti-theme-ims qti-order-interaction:hover:not([disabled])::part(qti-simple-choice) {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 2px;
-  outline-style: solid;
-  outline-width: calc(var(--qti-border-width) * 2);
-}
-.qti-theme-ims qti-order-interaction qti-simple-choice[active], qti-order-interaction .qti-theme-ims qti-simple-choice[active], .qti-theme-ims qti-order-interaction[active]::part(qti-simple-choice) {
-  background: rgb(var(--qti-primary) 0.4) !important;
-}
-qti-order-interaction::part(drop-list) {
-  width: 30%;
-  height: 40px;
-}
-
-qti-order-interaction::part(drop-list) {
-  display: block;
-  background: var(--qti-background, #eee);
-  padding: var(--qti-padding-x, 0.7rem) var(--qti-padding-y, 0.5rem);
-}
-.qti-theme-raised {
-  /* < usabled classes to extend in qti-components > */
-}
-/* </ end test classes for storybook> */
-.qti-theme-subtle {
-  /* < usabled classes to extend in qti-components */
-}
-.qti-theme-ims {
-  /* < usabled classes to extend in qti-components > */
-}
-qti-select-point-interaction {
-  position: relative;
-  display: block;
-}
-.qti-theme-raised {
-  /* < usabled classes to extend in qti-components > */
-}
-.qti-theme-raised qti-slider-interaction[disabled] {
-  box-shadow: unset !important;
-  color: var(--qti-border-color);
-  cursor: unset !important;
-}
-.qti-theme-raised qti-slider-interaction:focus {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 2px;
-  outline-style: solid;
-  outline-width: var(--qti-border-width);
-}
-.qti-theme-raised qti-slider-interaction:hover:not([disabled]) {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 0;
-  outline-style: solid;
-  outline-width: calc(var(--qti-border-width) * 2);
-}
-.qti-theme-raised qti-slider-interaction::before {
-  position: relative;
-  display: inline-block;
-  border-radius: var(--qti-border-radius);
-  color: var(--qti-text-color);
-  cursor: pointer;
-  border-radius: calc(var(--qti-border-radius) * 3);
-  background: var(--qti-background);
-  box-shadow: 0 var(--qti-border-width) var(--qti-border-color), 0 calc(var(--qti-border-width) * 2) var(--qti-shadow-blur) var(--qti-shadow-color);
-}
-
-/* </ end test classes for storybook> */
-.qti-theme-subtle {
-  /* < usabled classes to extend in qti-components */
-}
-.qti-theme-subtle qti-slider-interaction {
-  cursor: pointer;
-}
-.qti-theme-subtle qti-slider-interaction[aria-checked=true] {
-  --qti-border-color: var(--qti-primary-color);
-  background-color: rgb(var(--qti-primary) 0.1);
-}
-.qti-theme-subtle qti-slider-interaction[disabled] {
-  --qti-border-color: transparent;
-  box-shadow: unset !important;
-  color: var(--qti-shadow-color);
-  cursor: unset !important;
-}
-.qti-theme-subtle qti-slider-interaction:focus {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 2px;
-  outline-style: solid;
-  outline-width: var(--qti-border-width);
-}
-.qti-theme-subtle qti-slider-interaction:hover:not([disabled]) {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 0;
-  outline-style: solid;
-  outline-width: calc(var(--qti-border-width) * 2);
-}
-.qti-theme-subtle qti-slider-interaction::before {
-  position: relative;
-  display: inline-block;
-  border-radius: var(--qti-border-radius);
-  color: var(--qti-text-color);
-  cursor: pointer;
-  background: linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/2px 100% no-repeat, linear-gradient(var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 100% 0/2px 100% no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 0/100% 2px no-repeat, linear-gradient(to right, var(--qti-border-color) 8px, transparent 0 calc(100% - 8px), var(--qti-border-color) 0) 0 100%/100% 2px no-repeat, var(--qti-background);
-}
-
-.qti-theme-ims {
-  /* < usabled classes to extend in qti-components > */
-}
-.qti-theme-ims qti-slider-interaction {
-  cursor: pointer;
-}
-.qti-theme-ims qti-slider-interaction[disabled] {
-  --qti-border-color: var(--qti-shadow-color);
-  color: var(--qti-shadow-color);
-  cursor: unset !important;
-  filter: grayscale(100%);
-}
-.qti-theme-ims qti-slider-interaction:focus-within {
-  outline-color: rgb(var(--qti-primary) 0.6);
-  outline-offset: 4px;
-  outline-style: solid;
-  outline-width: var(--qti-border-width);
-  /* applies to all before elements, choice round and circle, slider thumb */
-}
-.qti-theme-ims qti-slider-interaction:focus-within::before {
-  background-color: rgb(var(--qti-primary) 0.2);
-}
-.qti-theme-ims qti-slider-interaction:hover:not([disabled]) {
-  outline-color: rgb(var(--qti-primary) 0.4);
-  outline-offset: 2px;
-  outline-style: solid;
-  outline-width: calc(var(--qti-border-width) * 2);
-}
-.qti-theme-ims qti-slider-interaction::part(knob) {
-  position: relative;
-  display: inline-block;
-  border-radius: var(--qti-border-radius);
-  color: var(--qti-text-color);
-  cursor: pointer;
-  border-radius: calc(var(--qti-border-radius) * 3);
-  background: var(--qti-background);
-  box-shadow: inset 0 0 0 var(--qti-border-width) var(--qti-border-color);
-  width: 24px;
-  height: 24px;
-  border-radius: 100%;
-  aspect-ratio: 1/1;
-  transform: translateX(-50%);
-  transform-origin: center;
-}
-
-qti-slider-interaction {
-  width: 100%;
-  display: block;
-}
-
-qti-slider-interaction::part(knob) {
-  position: absolute;
-}
-
-qti-slider-interaction::part(rail) {
-  background-position: 0 center;
-  /* ticks */
-  background: linear-gradient(to right, var(--qti-border-color) var(--qti-border-width), transparent 1px) repeat-x, linear-gradient(to top, var(--qti-border-color) var(--qti-border-width), transparent 1px) repeat-x;
-  background-size: calc((100% - var(--qti-border-width)) / ((var(--max) - var(--min)) / var(--step))) 50%;
-}
-html,
-body,
-#root,
-#root-inner,
-qti-test {
-  height: 100%;
-}
-
-qti-test {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-qti-test qti-assessment-item {
-  display: block; /* necessary to calculate scaling position */
-  flex: 1;
-  gap: 1rem;
-  overflow-y: scroll;
-}
-qti-test qti-assessment-item qti-item-body {
-  display: block;
-}
-qti-test qti-test-nav {
-  display: flex;
-  justify-content: space-between;
-  gap: 1rem;
-}
-qti-test qti-test-nav qti-test-check,
-qti-test qti-test-nav qti-test-score,
-qti-test qti-test-nav qti-test-prev,
-qti-test qti-test-nav qti-test-show-correct,
-qti-test qti-test-nav qti-test-next {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 5px 10px;
-  border-radius: 3px;
-  color: rgb(56, 56, 56);
-  text-decoration: none;
-  display: inline-block;
-  padding: 8px 16px;
-  border: 0;
-  background: #eeeeee;
-  color: rgb(83, 83, 83);
-  cursor: pointer;
-  font-size: 16px;
-  font-weight: 700;
-}
-qti-test qti-test-nav qti-test-check:hover,
-qti-test qti-test-nav qti-test-score:hover,
-qti-test qti-test-nav qti-test-prev:hover,
-qti-test qti-test-nav qti-test-show-correct:hover,
-qti-test qti-test-nav qti-test-next:hover {
-  background: #dadada;
-  transition: all 0.3s ease;
-}
-qti-test qti-test-nav qti-test-check:active,
-qti-test qti-test-nav qti-test-score:active,
-qti-test qti-test-nav qti-test-prev:active,
-qti-test qti-test-nav qti-test-show-correct:active,
-qti-test qti-test-nav qti-test-next:active {
-  background: #aeaeae;
-}
-qti-test qti-test-nav qti-test-progress {
-  display: flex;
-  overflow-x: scroll;
-}
-qti-test qti-test-nav qti-test-progress qti-test-item {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 5px 10px;
-  border-radius: 3px;
-  color: rgb(56, 56, 56);
-  text-decoration: none;
-  display: inline-block;
-  padding: 8px 16px;
-  border: 0;
-  background: #eeeeee;
-  color: rgb(83, 83, 83);
-  cursor: pointer;
-  font-size: 16px;
-  font-weight: 700;
-}
-qti-test qti-test-nav qti-test-progress qti-test-item:hover {
-  background: #dadada;
-  transition: all 0.3s ease;
-}
-qti-test qti-test-nav qti-test-progress qti-test-item:active {
-  background: #aeaeae;
-}
-qti-test qti-test-nav qti-test-progress qti-test-item[checked] {
-  background: darkblue;
-  color: white;
-}