@citolab/qti-components 6.0.4-2 → 6.0.4

package/dist/index.css

@@ -48,7 +48,7 @@
 
 /** default styles for all components */
 
-*, ::before, ::after {
+*, ::before, ::after{
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
   --tw-translate-x: 0;
@@ -98,7 +98,7 @@
   --tw-backdrop-sepia:  ;
 }
 
-::backdrop {
+::backdrop{
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
   --tw-translate-x: 0;
@@ -158,6 +158,8 @@
 
 /* !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 */
@@ -467,13 +469,13 @@
   min-width: 72ch;
 }
 
-qti-choice-interaction {
+qti-choice-interaction{
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
   gap: 0.5rem;
 }
 
-qti-choice-interaction.qti-input-control-hidden qti-simple-choice {
+qti-choice-interaction.qti-input-control-hidden qti-simple-choice{
   cursor: pointer;
   border-radius: 0.375rem;
   --tw-text-opacity: 1;
@@ -486,9 +488,6 @@ qti-choice-interaction.qti-input-control-hidden qti-simple-choice {
   --tw-ring-inset: inset;
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
   padding-left: 0.75rem;
   padding-right: 0.75rem;
   padding-top: 0.5rem;
@@ -497,19 +496,20 @@ qti-choice-interaction.qti-input-control-hidden qti-simple-choice {
   --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 {
+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 {
+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"] {
+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);
@@ -517,7 +517,7 @@ qti-choice-interaction.qti-input-control-hidden qti-simple-choice[aria-checked="
   --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
 }
 
-qti-choice-interaction.qti-input-control-hidden qti-simple-choice[aria-disabled="true"] {
+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));
@@ -530,12 +530,12 @@ qti-choice-interaction.qti-input-control-hidden qti-simple-choice[aria-disabled=
   --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
 }
 
-qti-choice-interaction.qti-input-control-hidden qti-simple-choice[aria-disabled="true"] > * {
+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"] {
+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));
@@ -548,7 +548,7 @@ qti-choice-interaction.qti-input-control-hidden qti-simple-choice[aria-readonly=
   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 {
+qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice{
   cursor: pointer;
   border-radius: 0.375rem;
   --tw-text-opacity: 1;
@@ -561,9 +561,6 @@ qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
   display: flex;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
   align-items: center;
   gap: 0.5rem;
   border-radius: 9999px;
@@ -585,7 +582,7 @@ qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice::part(ch
       width: 66.666667%;
     }
 
-qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[role='radio']::part(ch) {
+qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[role='radio']::part(ch){
   display: flex;
   height: 1.25rem;
   width: 1.25rem;
@@ -604,13 +601,13 @@ qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[role='ra
   --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) {
+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) {
+qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[role='checkbox']::part(ch){
   display: flex;
   height: 1.25rem;
   width: 1.25rem;
@@ -633,17 +630,17 @@ qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[role='ch
       background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='red' 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 {
+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 {
+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"] {
+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);
@@ -651,7 +648,7 @@ qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[aria-che
   --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"] {
+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));
@@ -664,12 +661,12 @@ qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[aria-dis
   --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"] > * {
+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"] {
+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));
@@ -682,12 +679,12 @@ qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[aria-rea
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
-qti-text-entry-interaction {
+qti-text-entry-interaction{
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
 }
 
-qti-text-entry-interaction::part(input) {
+qti-text-entry-interaction::part(input){
   cursor: pointer;
   color: rgb(17 24 39 / var(--tw-text-opacity));
   outline: 2px solid transparent;
@@ -708,22 +705,22 @@ qti-text-entry-interaction::part(input) {
   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 {
+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 {
+qti-text-entry-interaction::part(input):focus{
   outline-width: 2px;
   outline-color: #93c5fd;
 }
 
-qti-extended-text-interaction {
+qti-extended-text-interaction{
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
 }
 
-qti-extended-text-interaction::part(textarea) {
+qti-extended-text-interaction::part(textarea){
   cursor: pointer;
   color: rgb(17 24 39 / var(--tw-text-opacity));
   outline: 2px solid transparent;
@@ -744,23 +741,23 @@ qti-extended-text-interaction::part(textarea) {
   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 {
+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 {
+qti-extended-text-interaction::part(textarea):focus{
   outline-width: 2px;
   outline-color: #93c5fd;
 }
 
-qti-gap-match-interaction {
+qti-gap-match-interaction{
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
   line-height: 2rem;
 }
 
-qti-gap-match-interaction qti-gap-text {
+qti-gap-match-interaction qti-gap-text{
   cursor: pointer;
   border-radius: 0.375rem;
   --tw-text-opacity: 1;
@@ -774,9 +771,6 @@ qti-gap-match-interaction qti-gap-text {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
   cursor: grab;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
   padding-top: 0.25rem;
@@ -785,6 +779,7 @@ qti-gap-match-interaction qti-gap-text {
   --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,
@@ -800,17 +795,17 @@ qti-gap-match-interaction qti-gap-text {
     line-height: 1.5;
 }
 
-qti-gap-match-interaction qti-gap-text:hover {
+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 {
+qti-gap-match-interaction qti-gap-text:focus{
   outline-width: 2px;
   outline-color: #93c5fd;
 }
 
-qti-gap-match-interaction qti-gap {
+qti-gap-match-interaction qti-gap{
   cursor: pointer;
   border-radius: 0.375rem;
   --tw-text-opacity: 1;
@@ -837,17 +832,17 @@ qti-gap-match-interaction qti-gap {
     line-height: 1.5;
 }
 
-qti-gap-match-interaction qti-gap:hover {
+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 {
+qti-gap-match-interaction qti-gap:focus{
   outline-width: 2px;
   outline-color: #93c5fd;
 }
 
-qti-gap-match-interaction qti-gap {
+qti-gap-match-interaction qti-gap{
   width: 8rem;
 }
 
@@ -857,7 +852,7 @@ 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) {
+qti-gap-match-interaction qti-gap:not(:empty){
   display: inline-flex;
   width: auto;
   padding: 0px;
@@ -866,7 +861,7 @@ qti-gap-match-interaction qti-gap:not(:empty) {
   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) > * {
+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));
@@ -877,12 +872,12 @@ qti-gap-match-interaction qti-gap:not(:empty) > * {
   --tw-ring-color: rgb(229 231 235 / var(--tw-ring-opacity));
 }
 
-qti-hotspot-interaction {
+qti-hotspot-interaction{
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
 }
 
-qti-hotspot-interaction qti-hotspot-choice:hover {
+qti-hotspot-interaction qti-hotspot-choice:hover{
   background-color: rgb(219 234 254 / var(--tw-bg-opacity));
   --tw-bg-opacity: 0.3;
 }
@@ -898,7 +893,7 @@ qti-hotspot-interaction qti-hotspot-choice {
       } */
   }
 
-qti-hotspot-interaction qti-hotspot-choice[shape='circle'] {
+qti-hotspot-interaction qti-hotspot-choice[shape='circle']{
   cursor: pointer;
   border-radius: 0.375rem;
   --tw-text-opacity: 1;
@@ -920,17 +915,17 @@ qti-hotspot-interaction qti-hotspot-choice[shape='circle'] {
   border-radius: 9999px;
 }
 
-qti-hotspot-interaction qti-hotspot-choice[shape='circle']:hover {
+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 {
+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"] {
+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);
@@ -938,7 +933,7 @@ qti-hotspot-interaction qti-hotspot-choice[shape='circle'][aria-checked="true"]
   --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
 }
 
-qti-hotspot-interaction qti-hotspot-choice[shape='circle'][aria-disabled="true"] {
+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));
@@ -951,12 +946,12 @@ qti-hotspot-interaction qti-hotspot-choice[shape='circle'][aria-disabled="true"]
   --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
 }
 
-qti-hotspot-interaction qti-hotspot-choice[shape='circle'][aria-disabled="true"] > * {
+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"] {
+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));
@@ -969,7 +964,7 @@ qti-hotspot-interaction qti-hotspot-choice[shape='circle'][aria-readonly="true"]
   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'] {
+qti-hotspot-interaction qti-hotspot-choice[shape='rect']{
   cursor: pointer;
   border-radius: 0.375rem;
   --tw-text-opacity: 1;
@@ -990,17 +985,17 @@ qti-hotspot-interaction qti-hotspot-choice[shape='rect'] {
   --tw-ring-color: rgb(17 24 39 / var(--tw-ring-opacity));
 }
 
-qti-hotspot-interaction qti-hotspot-choice[shape='rect']:hover {
+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 {
+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"] {
+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);
@@ -1008,7 +1003,7 @@ qti-hotspot-interaction qti-hotspot-choice[shape='rect'][aria-checked="true"] {
   --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
 }
 
-qti-hotspot-interaction qti-hotspot-choice[shape='rect'][aria-disabled="true"] {
+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));
@@ -1021,12 +1016,12 @@ qti-hotspot-interaction qti-hotspot-choice[shape='rect'][aria-disabled="true"] {
   --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
 }
 
-qti-hotspot-interaction qti-hotspot-choice[shape='rect'][aria-disabled="true"] > * {
+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"] {
+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));
@@ -1039,17 +1034,17 @@ qti-hotspot-interaction qti-hotspot-choice[shape='rect'][aria-readonly="true"] {
   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 {
+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 {
+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"] {
+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);
@@ -1057,7 +1052,7 @@ qti-hotspot-interaction qti-hotspot-choice[shape='poly'][aria-checked="true"] {
   --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
 }
 
-qti-hotspot-interaction qti-hotspot-choice[shape='poly'][aria-disabled="true"] {
+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));
@@ -1070,12 +1065,12 @@ qti-hotspot-interaction qti-hotspot-choice[shape='poly'][aria-disabled="true"] {
   --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
 }
 
-qti-hotspot-interaction qti-hotspot-choice[shape='poly'][aria-disabled="true"] > * {
+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"] {
+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));
@@ -1088,17 +1083,17 @@ qti-hotspot-interaction qti-hotspot-choice[shape='poly'][aria-readonly="true"] {
   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'] {
+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 {
+qti-hottext-interaction{
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
 }
 
-qti-hottext-interaction.qti-input-control-hidden qti-hottext {
+qti-hottext-interaction.qti-input-control-hidden qti-hottext{
   cursor: pointer;
   border-radius: 0.375rem;
   --tw-text-opacity: 1;
@@ -1111,9 +1106,6 @@ qti-hottext-interaction.qti-input-control-hidden qti-hottext {
   --tw-ring-inset: inset;
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
   padding-left: 0.75rem;
   padding-right: 0.75rem;
   padding-top: 0.5rem;
@@ -1122,23 +1114,24 @@ qti-hottext-interaction.qti-input-control-hidden qti-hottext {
   --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);
-  display: inline-flex;
+    /* @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 {
+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 {
+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"] {
+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);
@@ -1146,7 +1139,7 @@ qti-hottext-interaction.qti-input-control-hidden qti-hottext[aria-checked="true"
   --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
 }
 
-qti-hottext-interaction.qti-input-control-hidden qti-hottext[aria-disabled="true"] {
+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));
@@ -1159,12 +1152,12 @@ qti-hottext-interaction.qti-input-control-hidden qti-hottext[aria-disabled="true
   --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
 }
 
-qti-hottext-interaction.qti-input-control-hidden qti-hottext[aria-disabled="true"] > * {
+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"] {
+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));
@@ -1177,11 +1170,11 @@ qti-hottext-interaction.qti-input-control-hidden qti-hottext[aria-readonly="true
   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) {
+qti-hottext-interaction.qti-input-control-hidden qti-hottext::part(ch){
   display: none !important;
 }
 
-qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext {
+qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext{
   cursor: pointer;
   border-radius: 0.375rem;
   --tw-text-opacity: 1;
@@ -1194,9 +1187,6 @@ qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
   display: flex;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
   align-items: center;
   gap: 0.5rem;
   border-radius: 9999px;
@@ -1218,7 +1208,7 @@ qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext::part(cha) {
       width: 66.666667%;
     }
 
-qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[role='radio']::part(ch) {
+qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[role='radio']::part(ch){
   display: flex;
   height: 1.25rem;
   width: 1.25rem;
@@ -1237,13 +1227,13 @@ qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[role='radio']
   --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) {
+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) {
+qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[role='checkbox']::part(ch){
   display: flex;
   height: 1.25rem;
   width: 1.25rem;
@@ -1266,7 +1256,7 @@ qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[role='checkbo
       background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='red' 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 {
+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; */
@@ -1282,7 +1272,7 @@ qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext {
     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) {
+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;
@@ -1290,17 +1280,17 @@ qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext::part(ch) {
   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 {
+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 {
+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"] {
+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);
@@ -1308,7 +1298,7 @@ qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[aria-checked=
   --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
 }
 
-qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[aria-disabled="true"] {
+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));
@@ -1321,12 +1311,12 @@ qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[aria-disabled
   --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
 }
 
-qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[aria-disabled="true"] > * {
+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"] {
+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));
@@ -1339,7 +1329,7 @@ qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[aria-readonly
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
-qti-inline-choice-interaction::part(select) {
+qti-inline-choice-interaction::part(select){
   cursor: pointer;
   border-radius: 0.375rem;
   --tw-text-opacity: 1;
@@ -1367,63 +1357,27 @@ qti-inline-choice-interaction::part(select) {
       no-repeat center right 6px;
 }
 
-qti-inline-choice-interaction::part(select):hover {
+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 {
+qti-inline-choice-interaction::part(select):focus{
   outline-width: 2px;
   outline-color: #93c5fd;
 }
 
-qti-inline-choice-interaction[aria-checked="true"]::part(select) {
-  --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-inline-choice-interaction[aria-disabled="true"]::part(select) {
-  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-inline-choice-interaction::part(select)[aria-disabled="true"] > * {
-  --tw-text-opacity: 1 !important;
-  color: rgb(107 114 128 / var(--tw-text-opacity)) !important;
-}
-
-qti-inline-choice-interaction[aria-readonly="true"]::part(select) {
-  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) { /* aria-checked:act aria-readonly:rdo aria-disabled:dis; */
+  }
 
-qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type {
+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 {
+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;
@@ -1437,15 +1391,13 @@ qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
   cursor: grab;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
   --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,
@@ -1462,24 +1414,24 @@ qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type
     padding-right: 0.75rem;
 }
 
-qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice:hover {
+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 {
+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 {
+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 {
+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;
@@ -1504,12 +1456,12 @@ qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type
     --tw-ring-inset: unset;
 }
 
-qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice:hover {
+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 {
+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;
 }
@@ -1521,7 +1473,7 @@ qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type
       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 {
+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;
@@ -1535,15 +1487,13 @@ qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
   cursor: grab;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
   --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,
@@ -1560,12 +1510,12 @@ qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type
     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 {
+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 {
+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;
 }
@@ -1575,7 +1525,7 @@ qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type
     }
 
 qti-order-interaction::part(qti-simple-choice),
-  qti-order-interaction qti-simple-choice {
+  qti-order-interaction qti-simple-choice{
   cursor: pointer;
   border-radius: 0.375rem;
   --tw-text-opacity: 1;
@@ -1589,15 +1539,13 @@ qti-order-interaction::part(qti-simple-choice),
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
   cursor: grab;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
   --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,
@@ -1615,18 +1563,18 @@ qti-order-interaction::part(qti-simple-choice),
 }
 
 qti-order-interaction::part(qti-simple-choice):hover,
-  qti-order-interaction 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 {
+  qti-order-interaction qti-simple-choice:focus{
   outline-width: 2px;
   outline-color: #93c5fd;
 }
 
-qti-order-interaction::part(qti-simple-choice) {
+qti-order-interaction::part(qti-simple-choice){
   display: flex;
   width: 100%;
   align-items: center;
@@ -1634,15 +1582,15 @@ qti-order-interaction::part(qti-simple-choice) {
   text-overflow: ellipsis;
 }
 
-qti-order-interaction::part(drops) {
+qti-order-interaction::part(drops){
   gap: 0.5rem;
 }
 
-qti-order-interaction::part(drags) {
+qti-order-interaction::part(drags){
   gap: 0.5rem;
 }
 
-qti-order-interaction::part(drop-list) {
+qti-order-interaction::part(drop-list){
   cursor: pointer;
   border-radius: 0.375rem;
   --tw-text-opacity: 1;
@@ -1669,17 +1617,17 @@ qti-order-interaction::part(drop-list) {
     min-height: 4rem;
 }
 
-qti-order-interaction::part(drop-list):hover {
+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 {
+qti-order-interaction::part(drop-list):focus{
   outline-width: 2px;
   outline-color: #93c5fd;
 }
 
-qti-order-interaction::part(active) {
+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);
@@ -1688,7 +1636,7 @@ qti-order-interaction::part(active) {
 }
 
 qti-associate-interaction::part(qti-simple-associable-choice),
-  qti-associate-interaction qti-simple-associable-choice {
+  qti-associate-interaction qti-simple-associable-choice{
   cursor: pointer;
   border-radius: 0.375rem;
   --tw-text-opacity: 1;
@@ -1702,15 +1650,13 @@ qti-associate-interaction::part(qti-simple-associable-choice),
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
   cursor: grab;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
   --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,
@@ -1732,18 +1678,18 @@ qti-associate-interaction::part(qti-simple-associable-choice),
 }
 
 qti-associate-interaction::part(qti-simple-associable-choice):hover,
-  qti-associate-interaction 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 {
+  qti-associate-interaction qti-simple-associable-choice:focus{
   outline-width: 2px;
   outline-color: #93c5fd;
 }
 
-qti-associate-interaction::part(associables-container) {
+qti-associate-interaction::part(associables-container){
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
   display: flex;
@@ -1757,7 +1703,7 @@ qti-associate-interaction::part(associables-container) {
     );
 }
 
-qti-associate-interaction::part(active) {
+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);
@@ -1765,7 +1711,7 @@ qti-associate-interaction::part(active) {
   --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
 }
 
-qti-associate-interaction::part(drop-list) {
+qti-associate-interaction::part(drop-list){
   cursor: pointer;
   border-radius: 0.375rem;
   --tw-text-opacity: 1;
@@ -1795,7 +1741,7 @@ qti-associate-interaction::part(drop-list) {
 
 /* @apply my-2; */
 
-qti-graphic-order-interaction qti-hotspot-choice {
+qti-graphic-order-interaction qti-hotspot-choice{
   cursor: pointer;
   border-radius: 0.375rem;
   --tw-text-opacity: 1;
@@ -1816,17 +1762,17 @@ qti-graphic-order-interaction qti-hotspot-choice {
   --tw-ring-color: rgb(17 24 39 / var(--tw-ring-opacity));
 }
 
-qti-graphic-order-interaction qti-hotspot-choice:hover {
+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 {
+qti-graphic-order-interaction qti-hotspot-choice:focus{
   outline-width: 2px;
   outline-color: #93c5fd;
 }
 
-qti-graphic-order-interaction qti-hotspot-choice[aria-checked="true"] {
+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);
@@ -1834,7 +1780,7 @@ qti-graphic-order-interaction qti-hotspot-choice[aria-checked="true"] {
   --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
 }
 
-qti-graphic-order-interaction qti-hotspot-choice[aria-disabled="true"] {
+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));
@@ -1847,12 +1793,12 @@ qti-graphic-order-interaction qti-hotspot-choice[aria-disabled="true"] {
   --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
 }
 
-qti-graphic-order-interaction qti-hotspot-choice[aria-disabled="true"] > * {
+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"] {
+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));
@@ -1873,7 +1819,7 @@ qti-graphic-order-interaction qti-hotspot-choice[aria-readonly="true"] {
         clip-path: inherit;
       } */
 
-qti-graphic-order-interaction qti-hotspot-choice[aria-ordervalue] {
+qti-graphic-order-interaction qti-hotspot-choice[aria-ordervalue]{
   height: 1.5rem;
   width: 1.5rem;
   border-radius: 9999px;
@@ -1890,7 +1836,7 @@ qti-graphic-order-interaction qti-hotspot-choice[aria-ordervalue]::after {
       content: attr(aria-ordervalue) !important;
     }
 
-qti-graphic-associate-interaction {
+qti-graphic-associate-interaction{
   position: relative;
   display: block;
 }
@@ -1918,17 +1864,17 @@ qti-graphic-associate-interaction qti-associable-hotspot[shape='circle'] {
       --tw-ring-color: rgb(17 24 39 / var(--tw-ring-opacity));
     }
 
-qti-graphic-associate-interaction qti-associable-hotspot[shape='circle']:hover {
+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 {
+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"] {
+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);
@@ -1936,7 +1882,7 @@ qti-graphic-associate-interaction qti-associable-hotspot[shape='circle'][aria-ch
   --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
 }
 
-qti-graphic-associate-interaction qti-associable-hotspot[shape='circle'][aria-disabled="true"] {
+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));
@@ -1949,12 +1895,12 @@ qti-graphic-associate-interaction qti-associable-hotspot[shape='circle'][aria-di
   --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
 }
 
-qti-graphic-associate-interaction qti-associable-hotspot[shape='circle'][aria-disabled="true"] > * {
+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"] {
+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));
@@ -1990,17 +1936,17 @@ qti-graphic-associate-interaction qti-associable-hotspot[shape='square'] {
       --tw-ring-color: rgb(17 24 39 / var(--tw-ring-opacity));
     }
 
-qti-graphic-associate-interaction qti-associable-hotspot[shape='square']:hover {
+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 {
+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"] {
+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);
@@ -2008,7 +1954,7 @@ qti-graphic-associate-interaction qti-associable-hotspot[shape='square'][aria-ch
   --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
 }
 
-qti-graphic-associate-interaction qti-associable-hotspot[shape='square'][aria-disabled="true"] {
+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));
@@ -2021,12 +1967,12 @@ qti-graphic-associate-interaction qti-associable-hotspot[shape='square'][aria-di
   --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
 }
 
-qti-graphic-associate-interaction qti-associable-hotspot[shape='square'][aria-disabled="true"] > * {
+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"] {
+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));
@@ -2039,25 +1985,116 @@ qti-graphic-associate-interaction qti-associable-hotspot[shape='square'][aria-re
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
-qti-graphic-gap-match-interaction {
+qti-graphic-gap-match-interaction{
   position: relative;
 }
 
-qti-graphic-gap-match-interaction img {
+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 {
-  position: relative;
+
+  --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%;
-  display: block;
+  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::part(knob) {
-  position: absolute;
-  height: 1rem;
-  width: 1rem;
+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));
@@ -2065,25 +2102,25 @@ qti-slider-interaction::part(knob) {
   border-radius: 9999px;
   --tw-bg-opacity: 1;
   background-color: rgb(59 130 246 / var(--tw-bg-opacity));
+    left: var(--value-percentage);
 }
 
-qti-slider-interaction::part(rail) {
-  height: 1rem;
-    background-position: 0 center;
-    --qti-border-color: #ff0000;
-    --qti-border-width: 2px;
-    /* 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(calc(100% - var(--qti-border-width)) / ((var(--max) - var(--min)) / var(--step))) 50%;
+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 {
+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) {
+qti-select-point-interaction::part(point){
   cursor: pointer;
   border-radius: 0.375rem;
   --tw-text-opacity: 1;
@@ -2105,76 +2142,40 @@ qti-select-point-interaction::part(point) {
   border-radius: 9999px;
 }
 
-qti-select-point-interaction::part(point):hover {
+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 {
+qti-select-point-interaction::part(point):focus{
   outline-width: 2px;
   outline-color: #93c5fd;
 }
 
-qti-select-point-interaction[aria-checked="true"]::part(point) {
-  --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-select-point-interaction[aria-disabled="true"]::part(point) {
-  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-select-point-interaction::part(point)[aria-disabled="true"] > * {
-  --tw-text-opacity: 1 !important;
-  color: rgb(107 114 128 / var(--tw-text-opacity)) !important;
-}
-
-qti-select-point-interaction[aria-readonly="true"]::part(point) {
-  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-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 {
+qti-choice-interaction.qti-choices-stacking-2{
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
-qti-choice-interaction.qti-choices-stacking-3 {
+qti-choice-interaction.qti-choices-stacking-3{
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
 }
 
-qti-choice-interaction.qti-choices-stacking-4 {
+qti-choice-interaction.qti-choices-stacking-4{
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
 }
 
-qti-choice-interaction.qti-choices-stacking-5 {
+qti-choice-interaction.qti-choices-stacking-5{
   display: grid;
   grid-template-columns: repeat(5, minmax(0, 1fr));
 }