@citolab/qti-components 6.0.22 → 6.0.24

package/dist/index.css

@@ -0,0 +1,2215 @@
+/* PK: Tailwind theming file for all qti-components
+  Uses tailwind components and utilities from the other files
+
+  https://play.tailwindcss.com/OFThGk8CbR
+  https://play.tailwindcss.com/CeHVrnwgXR
+  https://play.tailwindcss.com/JOgoCf81JM
+
+  We make use of the default prose stylesheet, since it is much better looking then
+  the default HTML styling.
+  https://play.tailwindcss.com/uj1vGACRJA?layout=preview
+
+  So first we ( as tailwind does ) reset ALL styling on all default elements
+  Then we add the prose stylesheet: the Interaction will / or will not have a no-prose declaration, don't know about that yet
+  Then we create tailwind components
+  Then we consume these components in our qti-webcomponents
+
+  outline: used for focus
+  ring: used for border around the elements, can be active, its an inner ring, except for
+  the dropping well, because that has to surround the drag with the inner ring
+
+  There are 6 types
+  - text    : text-entry and extended-text
+  - select  : inline-choice
+  - button  : .input-control-hidden qti-choice, qti-hotspot
+  - check   : qti-choice, qti-hotspot
+  - drag    : gap-match, match, order, associate
+  - drop    : gap-match, match, order, associate
+  - spot    : gap-select-point, graphic-order, qti-graphic-associate
+
+  trying to get the follower modifiers to work:
+
+  - sm   , for elements inside text
+  - lg,  , for large readable containers
+  - in  , inline in text
+
+  taking into account cursors, select-none for some of the elements
+*/
+
+/* FIXMEs 
+  Outline always on top, sometimes it slips under the hover background
+  Intext with inline gaps does not align nicely with existing text https://play.tailwindcss.com/cJEGhvANwM
+  modifiers can not be in components, like this example where red should be a modifier inside base https://play.tailwindcss.com/JSnnv1Vvab?file=css
+  */
+
+/* @layer base, components, utilities, variants; */
+
+/* layout, dimensions, design */
+
+/** default styles for all components */
+
+*, ::before, ::after{
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+}
+
+::backdrop{
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+}
+
+/** The different components, you can choose only one */
+
+/* - button  : .input-control-hidden qti-choice, qti-hotspot */
+
+/*  - select  : inline-choice */
+
+/* - check   : qti-choice, qti-hotspot */
+
+/* !important, remove for checkbox and radio the active ring, the radio and checkbox will be selected instead */
+
+/* @apply select-none; */
+
+/* - text    : text-entry and extended-text */
+
+/* - spot    : gap-select-point, graphic-order, qti-graphic-associate */
+
+/* - drag    : gap-match, match, order, associate */
+
+/* - drop    : gap-match, match, order, associate */
+
+/** End components */
+
+/* hover, every element has a hover, except disabled( which overrides hover */
+
+/* focus, every element has a focus, even drop ( for keyboard access, eventually ) */
+
+/* active, choice active class and, used on checkbox and radio where not .qti-input-choice-hidden */
+
+/* readonly, overwrites cursor, hover background, outline for focus and ring */
+
+/* disabled, make gray state */
+
+/* drag in the drop, else the drag in the drop was black and not gray */
+
+/** Modifiers */
+
+/* PK: There was no utility to reset the ring-inset
+  We use this for the drop container, where we want the ring to have an outset
+  So the drag, with ring-inset, snugs neatly into the drop with ring-'outset' 
+  by unsetting the ring-inset */
+
+/* intext for elements which has to appear in text
+  - intext    : gap-match > qti-gap, hottext > hottext, select
+  */
+
+/* small for elements which has to appear in text
+  - intext    : gap-match > qti-gap, hottext > hottext, select
+*/
+
+/* @apply gap-0.5 rounded !px-1 !py-0 outline-offset-0 ring-1; */
+
+/* QTI Interactions */
+
+.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{
+  cursor: pointer;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-inset: inset;
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
+  border-radius: 0.25rem;
+  border-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  --tw-text-opacity: 1;
+  color: rgb(75 85 99 / var(--tw-text-opacity));
+  /* min-height: 20px;
+  padding: 19px;
+  border: 1px solid #e3e3e3;
+  border-radius: 4px;
+  margin-bottom: 20px;
+  background-color: #f5f5f5;
+  box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%); */
+}
+
+.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%;
+}
+
+/* .qti-input-width-1 {
+  width: 1ch;
+  min-width: 1ch;
+}
+.qti-input-width-2 {
+  width: 2ch;
+  min-width: 2ch;
+}
+.qti-input-width-3 {
+  width: 3ch;
+  min-width: 3ch;
+}
+.qti-input-width-4 {
+  width: 4ch;
+  min-width: 4ch;
+}
+.qti-input-width-6 {
+  width: 6ch;
+  min-width: 6ch;
+}
+.qti-input-width-10 {
+  width: 10ch;
+  min-width: 10ch;
+}
+.qti-input-width-15 {
+  width: 15ch;
+  min-width: 15ch;
+}
+.qti-input-width-20 {
+  width: 20ch;
+  min-width: 20ch;
+}
+.qti-input-width-72 {
+  width: 72ch;
+  min-width: 72ch;
+} */
+
+qti-choice-interaction{
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+  gap: 0.5rem;
+}
+
+qti-choice-interaction.qti-input-control-hidden qti-simple-choice{
+  cursor: pointer;
+  border-radius: 0.375rem;
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-inset: inset;
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  font-weight: 600;
+  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+    /* @apply select-none; */
+}
+
+qti-choice-interaction.qti-input-control-hidden qti-simple-choice:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
+}
+
+qti-choice-interaction.qti-input-control-hidden qti-simple-choice:focus{
+  outline-width: 2px;
+  outline-color: #93c5fd;
+}
+
+qti-choice-interaction.qti-input-control-hidden qti-simple-choice[aria-checked="true"]{
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
+}
+
+qti-choice-interaction.qti-input-control-hidden qti-simple-choice[aria-disabled="true"]{
+  cursor: not-allowed;
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
+}
+
+qti-choice-interaction.qti-input-control-hidden qti-simple-choice[aria-disabled="true"] > *{
+  --tw-text-opacity: 1 !important;
+  color: rgb(107 114 128 / var(--tw-text-opacity)) !important;
+}
+
+qti-choice-interaction.qti-input-control-hidden qti-simple-choice[aria-readonly="true"]{
+  cursor: pointer;
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  outline-width: 0px;
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice{
+  cursor: pointer;
+  border-radius: 0.375rem;
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-inset: inset;
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  border-radius: 9999px;
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+  padding-top: 0.125rem;
+  padding-bottom: 0.125rem;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
+}
+
+qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice::part(cha) {
+      /* let the checkmark or radio circle already take up space, else when checking everyhing collapses */
+      height: 66.666667%;
+      width: 66.666667%;
+    }
+
+qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[role='radio']::part(ch){
+  display: flex;
+  height: 1.25rem;
+  width: 1.25rem;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-inset: inset;
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
+}
+
+qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[role='radio'][aria-checked='true']::part(cha){
+  border-radius: 9999px;
+  --tw-bg-opacity: 1;
+  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
+}
+
+qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[role='checkbox']::part(ch){
+  display: flex;
+  height: 1.25rem;
+  width: 1.25rem;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.25rem;
+  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-inset: inset;
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
+}
+
+qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[role='checkbox'][aria-checked='true']::part(cha){
+  --tw-bg-opacity: 1;
+  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
+      -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='100%' height='100%' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E");
+}
+
+qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
+}
+
+qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice:focus{
+  outline-width: 2px;
+  outline-color: #93c5fd;
+}
+
+qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[aria-checked="true"]{
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
+}
+
+qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[aria-disabled="true"]{
+  cursor: not-allowed;
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
+}
+
+qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[aria-disabled="true"] > *{
+  --tw-text-opacity: 1 !important;
+  color: rgb(107 114 128 / var(--tw-text-opacity)) !important;
+}
+
+qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[aria-readonly="true"]{
+  cursor: pointer;
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  outline-width: 0px;
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+qti-text-entry-interaction{
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+qti-text-entry-interaction::part(input){
+  cursor: pointer;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-inset: inset;
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
+  cursor: text;
+  border-radius: 0.125rem;
+  border-width: 0px;
+  padding: 0.75rem;
+  --tw-text-opacity: 1;
+  color: rgb(75 85 99 / var(--tw-text-opacity));
+  --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+qti-text-entry-interaction::part(input):hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
+}
+
+qti-text-entry-interaction::part(input):focus{
+  outline-width: 2px;
+  outline-color: #93c5fd;
+}
+
+qti-extended-text-interaction{
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+qti-extended-text-interaction::part(textarea){
+  cursor: pointer;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-inset: inset;
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
+  cursor: text;
+  border-radius: 0.125rem;
+  border-width: 0px;
+  padding: 0.75rem;
+  --tw-text-opacity: 1;
+  color: rgb(75 85 99 / var(--tw-text-opacity));
+  --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+qti-extended-text-interaction::part(textarea):hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
+}
+
+qti-extended-text-interaction::part(textarea):focus{
+  outline-width: 2px;
+  outline-color: #93c5fd;
+}
+
+qti-gap-match-interaction{
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+  line-height: 2rem;
+}
+
+qti-gap-match-interaction qti-gap-text{
+  cursor: pointer;
+  border-radius: 0.375rem;
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-inset: inset;
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
+  cursor: grab;
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  font-weight: 600;
+  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+    /* @apply select-none; */
+    background-image: radial-gradient(
+      circle at center,
+      rgba(0, 0, 0, 0.1) 0,
+      rgb(0, 0, 0, 0.1) 2px,
+      white 2px,
+      white 100%
+    );
+    background-repeat: repeat-y;
+    background-position: left 2px;
+    background-size: 14px 8px;
+    padding-left: 0.75rem;
+    padding-right: 0.5rem;
+    line-height: 1.5;
+}
+
+qti-gap-match-interaction qti-gap-text:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
+}
+
+qti-gap-match-interaction qti-gap-text:focus{
+  outline-width: 2px;
+  outline-color: #93c5fd;
+}
+
+qti-gap-match-interaction qti-gap{
+  cursor: pointer;
+  border-radius: 0.375rem;
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-inset: inset;
+  position: relative;
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
+  --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
+  --tw-ring-offset-width: 1px;
+    --tw-ring-inset: unset;
+    display: inline-flex;
+    line-height: 1.5;
+}
+
+qti-gap-match-interaction qti-gap:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
+}
+
+qti-gap-match-interaction qti-gap:focus{
+  outline-width: 2px;
+  outline-color: #93c5fd;
+}
+
+qti-gap-match-interaction qti-gap{
+  width: 8rem;
+}
+
+/* PK: should be set in the javascript, default 100px, or listening to data-width attribute according to the spec */
+
+qti-gap-match-interaction qti-gap:empty:after {
+      content: '\0000a0'; /* when empty, put a space in it */
+    }
+
+qti-gap-match-interaction qti-gap:not(:empty){
+  display: inline-flex;
+  width: auto;
+  padding: 0px;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+qti-gap-match-interaction qti-gap:not(:empty) > *{
+  flex: 1 1 0%;
+  --tw-rotate: 0deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(229 231 235 / var(--tw-ring-opacity));
+}
+
+qti-hotspot-interaction{
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+qti-hotspot-interaction qti-hotspot-choice:hover{
+  background-color: rgb(219 234 254 / var(--tw-bg-opacity));
+  --tw-bg-opacity: 0.3;
+}
+
+qti-hotspot-interaction qti-hotspot-choice {
+
+    /* &::after {
+        content: '';
+        @apply absolute top-0 block origin-center bg-white;
+        height: 95%;
+        width: 95%;
+        clip-path: inherit;
+      } */
+  }
+
+qti-hotspot-interaction qti-hotspot-choice[shape='circle']{
+  cursor: pointer;
+  border-radius: 0.375rem;
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  --tw-ring-inset: inset;
+  --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
+  height: 100%;
+  width: 100%;
+  background-color: transparent;
+  padding: 0px;
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(17 24 39 / var(--tw-ring-opacity));
+  border-radius: 9999px;
+}
+
+qti-hotspot-interaction qti-hotspot-choice[shape='circle']:hover{
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
+}
+
+qti-hotspot-interaction qti-hotspot-choice[shape='circle']:focus{
+  outline-width: 2px;
+  outline-color: #93c5fd;
+}
+
+qti-hotspot-interaction qti-hotspot-choice[shape='circle'][aria-checked="true"]{
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
+}
+
+qti-hotspot-interaction qti-hotspot-choice[shape='circle'][aria-disabled="true"]{
+  cursor: not-allowed;
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
+}
+
+qti-hotspot-interaction qti-hotspot-choice[shape='circle'][aria-disabled="true"] > *{
+  --tw-text-opacity: 1 !important;
+  color: rgb(107 114 128 / var(--tw-text-opacity)) !important;
+}
+
+qti-hotspot-interaction qti-hotspot-choice[shape='circle'][aria-readonly="true"]{
+  cursor: pointer;
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  outline-width: 0px;
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+qti-hotspot-interaction qti-hotspot-choice[shape='rect']{
+  cursor: pointer;
+  border-radius: 0.375rem;
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  --tw-ring-inset: inset;
+  --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
+  height: 100%;
+  width: 100%;
+  background-color: transparent;
+  padding: 0px;
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(17 24 39 / var(--tw-ring-opacity));
+}
+
+qti-hotspot-interaction qti-hotspot-choice[shape='rect']:hover{
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
+}
+
+qti-hotspot-interaction qti-hotspot-choice[shape='rect']:focus{
+  outline-width: 2px;
+  outline-color: #93c5fd;
+}
+
+qti-hotspot-interaction qti-hotspot-choice[shape='rect'][aria-checked="true"]{
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
+}
+
+qti-hotspot-interaction qti-hotspot-choice[shape='rect'][aria-disabled="true"]{
+  cursor: not-allowed;
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
+}
+
+qti-hotspot-interaction qti-hotspot-choice[shape='rect'][aria-disabled="true"] > *{
+  --tw-text-opacity: 1 !important;
+  color: rgb(107 114 128 / var(--tw-text-opacity)) !important;
+}
+
+qti-hotspot-interaction qti-hotspot-choice[shape='rect'][aria-readonly="true"]{
+  cursor: pointer;
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  outline-width: 0px;
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+qti-hotspot-interaction qti-hotspot-choice[shape='poly']:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
+}
+
+qti-hotspot-interaction qti-hotspot-choice[shape='poly']:focus{
+  outline-width: 2px;
+  outline-color: #93c5fd;
+}
+
+qti-hotspot-interaction qti-hotspot-choice[shape='poly'][aria-checked="true"]{
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
+}
+
+qti-hotspot-interaction qti-hotspot-choice[shape='poly'][aria-disabled="true"]{
+  cursor: not-allowed;
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
+}
+
+qti-hotspot-interaction qti-hotspot-choice[shape='poly'][aria-disabled="true"] > *{
+  --tw-text-opacity: 1 !important;
+  color: rgb(107 114 128 / var(--tw-text-opacity)) !important;
+}
+
+qti-hotspot-interaction qti-hotspot-choice[shape='poly'][aria-readonly="true"]{
+  cursor: pointer;
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  outline-width: 0px;
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+qti-hotspot-interaction qti-hotspot-choice[shape='poly'][aria-checked='true']{
+  --tw-bg-opacity: 1;
+  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
+}
+
+qti-hottext-interaction{
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+qti-hottext-interaction.qti-input-control-hidden qti-hottext{
+  cursor: pointer;
+  border-radius: 0.375rem;
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-inset: inset;
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  font-weight: 600;
+  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+    /* @apply select-none; */
+    display: inline-flex;
+
+    /* @apply inline-flex gap-1 px-1 py-0 align-bottom font-normal ring-offset-0; */
+    /* @apply gap-0.5 rounded !px-1 !py-0 outline-offset-0 ring-1; */
+}
+
+qti-hottext-interaction.qti-input-control-hidden qti-hottext:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
+}
+
+qti-hottext-interaction.qti-input-control-hidden qti-hottext:focus{
+  outline-width: 2px;
+  outline-color: #93c5fd;
+}
+
+qti-hottext-interaction.qti-input-control-hidden qti-hottext[aria-checked="true"]{
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
+}
+
+qti-hottext-interaction.qti-input-control-hidden qti-hottext[aria-disabled="true"]{
+  cursor: not-allowed;
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
+}
+
+qti-hottext-interaction.qti-input-control-hidden qti-hottext[aria-disabled="true"] > *{
+  --tw-text-opacity: 1 !important;
+  color: rgb(107 114 128 / var(--tw-text-opacity)) !important;
+}
+
+qti-hottext-interaction.qti-input-control-hidden qti-hottext[aria-readonly="true"]{
+  cursor: pointer;
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  outline-width: 0px;
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+qti-hottext-interaction.qti-input-control-hidden qti-hottext::part(ch){
+  display: none !important;
+}
+
+qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext{
+  cursor: pointer;
+  border-radius: 0.375rem;
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-inset: inset;
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  border-radius: 9999px;
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+  padding-top: 0.125rem;
+  padding-bottom: 0.125rem;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
+}
+
+qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext::part(cha) {
+      /* let the checkmark or radio circle already take up space, else when checking everyhing collapses */
+      height: 66.666667%;
+      width: 66.666667%;
+    }
+
+qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[role='radio']::part(ch){
+  display: flex;
+  height: 1.25rem;
+  width: 1.25rem;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-inset: inset;
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
+}
+
+qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[role='radio'][aria-checked='true']::part(cha){
+  border-radius: 9999px;
+  --tw-bg-opacity: 1;
+  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
+}
+
+qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[role='checkbox']::part(ch){
+  display: flex;
+  height: 1.25rem;
+  width: 1.25rem;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.25rem;
+  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-inset: inset;
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
+}
+
+qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[role='checkbox'][aria-checked='true']::part(cha){
+  --tw-bg-opacity: 1;
+  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
+      -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='100%' height='100%' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E");
+}
+
+qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext{
+  display: inline-flex;
+
+    /* @apply inline-flex gap-1 px-1 py-0 align-bottom font-normal ring-offset-0; */
+
+    gap: 0.125rem;
+
+    outline-offset: 0px;
+
+    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+
+    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext::part(ch){
+  height: 1rem !important;
+  width: 1rem !important;
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
+}
+
+qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
+}
+
+qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext:focus{
+  outline-width: 2px;
+  outline-color: #93c5fd;
+}
+
+qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[aria-checked="true"]{
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
+}
+
+qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[aria-disabled="true"]{
+  cursor: not-allowed;
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
+}
+
+qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[aria-disabled="true"] > *{
+  --tw-text-opacity: 1 !important;
+  color: rgb(107 114 128 / var(--tw-text-opacity)) !important;
+}
+
+qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[aria-readonly="true"]{
+  cursor: pointer;
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  outline-width: 0px;
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+qti-inline-choice-interaction::part(select){
+  cursor: pointer;
+  border-radius: 0.375rem;
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-inset: inset;
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
+  position: relative;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  padding-left: 0.75rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  padding-right: 1.75rem;
+  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+    background: url("data:image/svg+xml,%3Csvg fill='currentColor' width='22' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' aria-hidden='true'%3E%3Cpath clip-rule='evenodd' fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z'%3E%3C/path%3E%3C/svg%3E")
+      no-repeat center right 6px;
+}
+
+qti-inline-choice-interaction::part(select):hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
+}
+
+qti-inline-choice-interaction::part(select):focus{
+  outline-width: 2px;
+  outline-color: #93c5fd;
+}
+
+qti-inline-choice-interaction::part(select) { /* aria-checked:act aria-readonly:rdo aria-disabled:dis; */
+  }
+
+qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type{
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  padding-bottom: 1rem;
+}
+
+qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice{
+  cursor: pointer;
+  border-radius: 0.375rem;
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-inset: inset;
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
+  cursor: grab;
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  font-weight: 600;
+  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+    /* @apply select-none; */
+    background-image: radial-gradient(
+      circle at center,
+      rgba(0, 0, 0, 0.1) 0,
+      rgb(0, 0, 0, 0.1) 2px,
+      white 2px,
+      white 100%
+    );
+    background-repeat: repeat-y;
+    background-position: left 2px;
+    background-size: 14px 8px;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    padding-left: 1rem;
+    padding-right: 0.75rem;
+}
+
+qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
+}
+
+qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice:focus{
+  outline-width: 2px;
+  outline-color: #93c5fd;
+}
+
+qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type{
+  display: grid;
+  grid-auto-columns: minmax(0, 1fr);
+  grid-auto-flow: column;
+  gap: 0.5rem;
+}
+
+qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice{
+  cursor: pointer;
+  border-radius: 0.375rem;
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-inset: inset;
+  position: relative;
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
+  --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
+  --tw-ring-offset-width: 1px;
+    --tw-ring-inset: unset;
+}
+
+qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
+}
+
+qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice:focus{
+  outline-width: 2px;
+  outline-color: #93c5fd;
+}
+
+qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice {
+      /* @apply flex h-32  flex-col gap-2; */
+      display: flex;
+      height: 8rem;
+      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{
+  cursor: pointer;
+  border-radius: 0.375rem;
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-inset: inset;
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
+  cursor: grab;
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  font-weight: 600;
+  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+    /* @apply select-none; */
+    background-image: radial-gradient(
+      circle at center,
+      rgba(0, 0, 0, 0.1) 0,
+      rgb(0, 0, 0, 0.1) 2px,
+      white 2px,
+      white 100%
+    );
+    background-repeat: repeat-y;
+    background-position: left 2px;
+    background-size: 14px 8px;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    padding-left: 1rem;
+    padding-right: 0.75rem;
+}
+
+qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
+}
+
+qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice:focus{
+  outline-width: 2px;
+  outline-color: #93c5fd;
+}
+
+qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice {
+      flex-basis: fit-content;
+    }
+
+qti-order-interaction::part(qti-simple-choice),
+  qti-order-interaction qti-simple-choice{
+  cursor: pointer;
+  border-radius: 0.375rem;
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-inset: inset;
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
+  cursor: grab;
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  font-weight: 600;
+  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+    /* @apply select-none; */
+    background-image: radial-gradient(
+      circle at center,
+      rgba(0, 0, 0, 0.1) 0,
+      rgb(0, 0, 0, 0.1) 2px,
+      white 2px,
+      white 100%
+    );
+    background-repeat: repeat-y;
+    background-position: left 2px;
+    background-size: 14px 8px;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    padding-left: 1rem;
+    padding-right: 0.75rem;
+}
+
+qti-order-interaction::part(qti-simple-choice):hover,
+  qti-order-interaction qti-simple-choice:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
+}
+
+qti-order-interaction::part(qti-simple-choice):focus,
+  qti-order-interaction qti-simple-choice:focus{
+  outline-width: 2px;
+  outline-color: #93c5fd;
+}
+
+qti-order-interaction::part(qti-simple-choice){
+  display: flex;
+  width: 100%;
+  align-items: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+qti-order-interaction::part(drops){
+  gap: 0.5rem;
+}
+
+qti-order-interaction::part(drags){
+  gap: 0.5rem;
+}
+
+qti-order-interaction::part(drop-list){
+  cursor: pointer;
+  border-radius: 0.375rem;
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-inset: inset;
+  position: relative;
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
+  --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
+  --tw-ring-offset-width: 1px;
+    --tw-ring-inset: unset;
+    display: flex;
+    min-height: 4rem;
+}
+
+qti-order-interaction::part(drop-list):hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
+}
+
+qti-order-interaction::part(drop-list):focus{
+  outline-width: 2px;
+  outline-color: #93c5fd;
+}
+
+qti-order-interaction::part(active){
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
+}
+
+qti-associate-interaction::part(qti-simple-associable-choice),
+  qti-associate-interaction qti-simple-associable-choice{
+  cursor: pointer;
+  border-radius: 0.375rem;
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-inset: inset;
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
+  cursor: grab;
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  font-weight: 600;
+  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+    /* @apply select-none; */
+    background-image: radial-gradient(
+      circle at center,
+      rgba(0, 0, 0, 0.1) 0,
+      rgb(0, 0, 0, 0.1) 2px,
+      white 2px,
+      white 100%
+    );
+    background-repeat: repeat-y;
+    background-position: left 2px;
+    background-size: 14px 8px;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    padding-left: 1rem;
+    padding-right: 0.75rem;
+}
+
+qti-associate-interaction::part(qti-simple-associable-choice):hover,
+  qti-associate-interaction qti-simple-associable-choice:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
+}
+
+qti-associate-interaction::part(qti-simple-associable-choice):focus,
+  qti-associate-interaction qti-simple-associable-choice:focus{
+  outline-width: 2px;
+  outline-color: #93c5fd;
+}
+
+qti-associate-interaction::part(associables-container){
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+    background: linear-gradient(
+      180deg,
+      rgb(0 0 0 / 0%) calc(50% - 1px),
+      #000000 calc(50%),
+      rgb(0 0 0 / 0%) calc(50% + 1px)
+    );
+}
+
+qti-associate-interaction::part(active){
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
+}
+
+qti-associate-interaction::part(drop-list){
+  cursor: pointer;
+  border-radius: 0.375rem;
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-inset: inset;
+  position: relative;
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
+  --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
+  --tw-ring-offset-width: 1px;
+    --tw-ring-inset: unset;
+    display: grid;
+    height: 3rem;
+    width: 33.333333%;
+}
+
+/* @apply my-2; */
+
+qti-graphic-order-interaction qti-hotspot-choice{
+  cursor: pointer;
+  border-radius: 0.375rem;
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  --tw-ring-inset: inset;
+  --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
+  height: 100%;
+  width: 100%;
+  background-color: transparent;
+  padding: 0px;
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(17 24 39 / var(--tw-ring-opacity));
+}
+
+qti-graphic-order-interaction qti-hotspot-choice:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
+}
+
+qti-graphic-order-interaction qti-hotspot-choice:focus{
+  outline-width: 2px;
+  outline-color: #93c5fd;
+}
+
+qti-graphic-order-interaction qti-hotspot-choice[aria-checked="true"]{
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
+}
+
+qti-graphic-order-interaction qti-hotspot-choice[aria-disabled="true"]{
+  cursor: not-allowed;
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
+}
+
+qti-graphic-order-interaction qti-hotspot-choice[aria-disabled="true"] > *{
+  --tw-text-opacity: 1 !important;
+  color: rgb(107 114 128 / var(--tw-text-opacity)) !important;
+}
+
+qti-graphic-order-interaction qti-hotspot-choice[aria-readonly="true"]{
+  cursor: pointer;
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  outline-width: 0px;
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+/* &::after {
+        content: '';
+        @apply absolute top-0 block scale-75 bg-white;
+        height: inherit;
+        width: inherit;
+        clip-path: inherit;
+      } */
+
+qti-graphic-order-interaction qti-hotspot-choice[aria-ordervalue]{
+  height: 1.5rem;
+  width: 1.5rem;
+  border-radius: 9999px;
+  --tw-bg-opacity: 1;
+  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+qti-graphic-order-interaction qti-hotspot-choice[aria-ordervalue]::after {
+      content: attr(aria-ordervalue) !important;
+    }
+
+qti-graphic-associate-interaction{
+  position: relative;
+  display: block;
+}
+
+qti-graphic-associate-interaction qti-associable-hotspot[shape='circle'] {
+      /* border-radius: 100%;
+        background-color: green; */
+      cursor: pointer;
+      border-radius: 0.375rem;
+      --tw-text-opacity: 1;
+      color: rgb(17 24 39 / var(--tw-text-opacity));
+      outline: 2px solid transparent;
+      outline-offset: 2px;
+      --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+      --tw-ring-inset: inset;
+      --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
+      height: 100%;
+      width: 100%;
+      background-color: transparent;
+      padding: 0px;
+      --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+      --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+      box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+      --tw-ring-opacity: 1;
+      --tw-ring-color: rgb(17 24 39 / var(--tw-ring-opacity));
+    }
+
+qti-graphic-associate-interaction qti-associable-hotspot[shape='circle']:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
+}
+
+qti-graphic-associate-interaction qti-associable-hotspot[shape='circle']:focus{
+  outline-width: 2px;
+  outline-color: #93c5fd;
+}
+
+qti-graphic-associate-interaction qti-associable-hotspot[shape='circle'][aria-checked="true"]{
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
+}
+
+qti-graphic-associate-interaction qti-associable-hotspot[shape='circle'][aria-disabled="true"]{
+  cursor: not-allowed;
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
+}
+
+qti-graphic-associate-interaction qti-associable-hotspot[shape='circle'][aria-disabled="true"] > *{
+  --tw-text-opacity: 1 !important;
+  color: rgb(107 114 128 / var(--tw-text-opacity)) !important;
+}
+
+qti-graphic-associate-interaction qti-associable-hotspot[shape='circle'][aria-readonly="true"]{
+  cursor: pointer;
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  outline-width: 0px;
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+qti-graphic-associate-interaction qti-associable-hotspot[shape='square'] {
+      /* border-radius: 0; */
+      /* background-color: green; */
+      cursor: pointer;
+      border-radius: 0.375rem;
+      --tw-text-opacity: 1;
+      color: rgb(17 24 39 / var(--tw-text-opacity));
+      outline: 2px solid transparent;
+      outline-offset: 2px;
+      --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+      --tw-ring-inset: inset;
+      --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
+      height: 100%;
+      width: 100%;
+      background-color: transparent;
+      padding: 0px;
+      --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+      --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+      box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+      --tw-ring-opacity: 1;
+      --tw-ring-color: rgb(17 24 39 / var(--tw-ring-opacity));
+    }
+
+qti-graphic-associate-interaction qti-associable-hotspot[shape='square']:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
+}
+
+qti-graphic-associate-interaction qti-associable-hotspot[shape='square']:focus{
+  outline-width: 2px;
+  outline-color: #93c5fd;
+}
+
+qti-graphic-associate-interaction qti-associable-hotspot[shape='square'][aria-checked="true"]{
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
+}
+
+qti-graphic-associate-interaction qti-associable-hotspot[shape='square'][aria-disabled="true"]{
+  cursor: not-allowed;
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
+}
+
+qti-graphic-associate-interaction qti-associable-hotspot[shape='square'][aria-disabled="true"] > *{
+  --tw-text-opacity: 1 !important;
+  color: rgb(107 114 128 / var(--tw-text-opacity)) !important;
+}
+
+qti-graphic-associate-interaction qti-associable-hotspot[shape='square'][aria-readonly="true"]{
+  cursor: pointer;
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  outline-width: 0px;
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+qti-graphic-gap-match-interaction{
+  position: relative;
+}
+
+qti-graphic-gap-match-interaction img{
+  margin: 0px;
+  padding: 0px;
+}
+
+qti-slider-interaction{
+  display: block; /* else no screenshot will be made with html-to-image */
+}
+
+qti-slider-interaction:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
+}
+
+qti-slider-interaction:focus{
+  outline-width: 2px;
+  outline-color: #93c5fd;
+}
+
+qti-slider-interaction[aria-checked="true"]{
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
+}
+
+qti-slider-interaction[aria-disabled="true"]{
+  cursor: not-allowed;
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
+}
+
+qti-slider-interaction[aria-disabled="true"] > *{
+  --tw-text-opacity: 1 !important;
+  color: rgb(107 114 128 / var(--tw-text-opacity)) !important;
+}
+
+qti-slider-interaction[aria-readonly="true"]{
+  cursor: pointer;
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  outline-width: 0px;
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+qti-slider-interaction {
+
+  --qti-tick-color: rgb(229 231 235 / 1);
+  --qti-tick-width: 2px;
+}
+
+qti-slider-interaction::part(slider){
+  margin-left: 2rem;
+  margin-right: 2rem; /* so the slider stays INSIDE of the qti-slider-interaction */ padding-bottom: 1rem; padding-top: 1.25rem; /* this keeps all content in the qti-slider interaction, also for html-to-image */
+}
+
+qti-slider-interaction{
+
+  --show-bounds: true;
+}
+
+qti-slider-interaction::part(bounds){
+  display: flex;
+  width: 100%;
+  justify-content: space-between; /* the two divs with value lower and upper will now be at start and end of this bounds container */ margin-bottom: 0.5rem; /* just so it aligns with the value 'knob' */
+}
+
+qti-slider-interaction{
+
+  --show-ticks: true;
+}
+
+qti-slider-interaction::part(ticks){
+  margin-left: 0.125rem;
+  margin-right: 0.125rem;
+  margin-bottom: 0.25rem;
+  height: 0.5rem; /* absolute height for the ticks, and keep distance of the rail. push them 0.5 inward */
+    background-position: 0 center;
+    background: linear-gradient(to right, var(--qti-tick-color) var(--qti-tick-width), transparent 1px) repeat-x;
+    background-size: calc(calc(100% - var(--qti-tick-width)) / ((var(--max) - var(--min)) / var(--step))) 100%;
+}
+
+qti-slider-interaction::part(rail){
+  display: flex;
+  align-items: center; /* so the knob is neatly centered vertically */
+    /* DESIGN */
+    box-sizing: border-box; /* if you have a border in the design apply, this box-border will make the border stay INSIDE the rail */ height: 0.75rem; width: 100%; cursor: pointer; border-radius: 9999px; border-style: solid; --tw-border-opacity: 1; border-color: rgb(229 231 235 / var(--tw-border-opacity)); --tw-bg-opacity: 1; background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+}
+
+qti-slider-interaction::part(knob){
+  position: relative;
+  height: 1.5rem;
+  width: 1.5rem;
+  transform-origin: center;
+  --tw-translate-x: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  cursor: pointer;
+  border-radius: 9999px;
+  --tw-bg-opacity: 1;
+  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
+    left: var(--value-percentage);
+}
+
+qti-slider-interaction{
+
+  --show-value: true;
+}
+
+qti-slider-interaction::part(value){
+  position: absolute;
+  bottom: 2rem; /* align the value, which you can drag, on top of the knob, so it aligns with the rest of the values */ left: 0.75rem; /* should be half width of the knob if you want to center these two */ --tw-translate-x: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); cursor: pointer; border-radius: 0.25rem; --tw-bg-opacity: 1; background-color: rgb(59 130 246 / var(--tw-bg-opacity)); padding-left: 1rem; padding-right: 1rem; padding-top: 0.5rem; padding-bottom: 0.5rem; text-align: center;
+}
+
+qti-select-point-interaction::part(point):hover{
+  background-color: rgb(219 234 254 / var(--tw-bg-opacity));
+  --tw-bg-opacity: 0.3;
+}
+
+qti-select-point-interaction::part(point){
+  cursor: pointer;
+  border-radius: 0.375rem;
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  --tw-ring-inset: inset;
+  --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
+  height: 1.5rem;
+  width: 1.5rem;
+  background-color: transparent;
+  padding: 0px;
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(17 24 39 / var(--tw-ring-opacity));
+  border-radius: 9999px;
+}
+
+qti-select-point-interaction::part(point):hover{
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
+}
+
+qti-select-point-interaction::part(point):focus{
+  outline-width: 2px;
+  outline-color: #93c5fd;
+}
+
+qti-select-point-interaction::part(point) { /* aria-checked:act aria-readonly:rdo aria-disabled:dis ;*/
+  }
+
+qti-position-object-stage qti-position-object-interaction {
+    /* no styles necessary, only layout styles, defined in the component */
+    /* height: 40px; */
+  }
+
+qti-choice-interaction.qti-choices-stacking-2{
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+qti-choice-interaction.qti-choices-stacking-3{
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+qti-choice-interaction.qti-choices-stacking-4{
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+qti-choice-interaction.qti-choices-stacking-5{
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+}
+
+qti-choice-interaction.qti-orientation-horizontal {
+    /* is the default layout */
+  }
+
+qti-choice-interaction[orientation='horizontal'] {
+    flex-direction: row;
+  }
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}