@citolab/qti-components 7.22.0 → 7.23.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (22) hide show
  1. package/cdn/index.global.js +1 -1
  2. package/cdn/index.js +2550 -2447
  3. package/custom-elements.json +91 -208
  4. package/dist/{chunk-J7X6NAL5.js → chunk-2EVAV2SS.js} +1117 -1365
  5. package/dist/chunk-2EVAV2SS.js.map +1 -0
  6. package/dist/{chunk-MF25NAZ4.js → chunk-5WZZMNCU.js} +2 -2
  7. package/dist/{chunk-MF25NAZ4.js.map → chunk-5WZZMNCU.js.map} +1 -1
  8. package/dist/{chunk-HCVDQUP7.js → chunk-AIS537EU.js} +1486 -1236
  9. package/dist/chunk-AIS537EU.js.map +1 -0
  10. package/dist/{chunk-YAGFD5RQ.js → chunk-DDKFUQ22.js} +2 -2
  11. package/dist/chunk-DDKFUQ22.js.map +1 -0
  12. package/dist/index.js +4 -4
  13. package/dist/interactions.d.ts +8 -23
  14. package/dist/interactions.js +1 -1
  15. package/dist/item.css +1484 -1234
  16. package/dist/item.js +2 -2
  17. package/dist/qti-components-jsx.d.ts +11563 -0
  18. package/dist/test.js +2 -2
  19. package/package.json +8 -8
  20. package/dist/chunk-HCVDQUP7.js.map +0 -1
  21. package/dist/chunk-J7X6NAL5.js.map +0 -1
  22. package/dist/chunk-YAGFD5RQ.js.map +0 -1
package/dist/{chunk-HCVDQUP7.js → chunk-AIS537EU.js} RENAMED
@@ -74,1965 +74,2037 @@ var c = class extends f {
74
74
  };
75
75
  var m = e(c);
76
76
 
77
- // inline:@qti-components/theme/src/item.css?inline
77
+ // inline:../../../../qti-theme/src/item.css?inline
78
78
  var item_default = `@layer qti-base, qti-components, qti-utilities, qti-variants, qti-extended;
79
79
 
80
- :root,
81
- :host {
82
- /* Active colors */
83
- --qti-bg-active: #ffecec;
84
- --qti-border-active: #f86d70;
85
-
86
- /* Correct colors */
87
- --qti-correct-light: #c8e6c9;
88
- --qti-correct: #66bb6a;
89
-
90
- /** Partially correct colors */
91
- --qti-partially-correct-light: #fff3e0;
92
- --qti-partially-correct: #ffeb3b;
93
-
94
- /* Incorrect colors */
95
- --qti-incorrect-light: #ef9a9a;
96
- --qti-incorrect: #ef5350;
97
-
98
- /* Validation colors */
99
- --qti-validation-error-bg: #fffbeb;
100
- --qti-validation-text: #92400e;
101
-
102
- /* Gap size */
103
- --qti-gap-size: 1rem;
80
+ /* https://www.imsglobal.org/sites/default/files/spec/qti/v3/guide/img/qti3p0.css */
104
81
 
105
- /* Background colors */
106
- --qti-bg: white;
107
- --qti-hover-bg: #f9fafb;
82
+ /* ============================
83
+ QTI 3 shared css
84
+ 1. Display
85
+ 2. Special Flex styles
86
+ 3. Margin
87
+ 4. Padding
88
+ 5. Horizontal Alignment styles
89
+ 6. Vertical Alignment styles
90
+ 7. Height
91
+ 8. Width
92
+ 9. Text-Indent
93
+ 10. List Style
94
+ 11. Layout
95
+ 12. Other QTI 3 presentation utilities
96
+ ============================ */
108
97
 
109
- /* Light theme colors */
110
- --qti-light-bg-active: #f0f0f0; /* Light gray */
111
- --qti-light-border-active: #d0d0d0; /* Medium gray */
98
+ /* ==========
99
+ Display css
100
+ =========== */
112
101
 
113
- /* Dark theme colors */
114
- --qti-dark-bg-active: #1f2937; /* Dark gray */
115
- --qti-dark-border-active: #64748b; /* Medium gray */
102
+ .qti-display-inline {
103
+ display: inline;
104
+ }
116
105
 
117
- /* Disabled colors */
118
- --qti-disabled-bg: #f3f4f6;
119
- --qti-disabled-color: #45484f;
106
+ .qti-display-inline-block {
107
+ display: inline-block;
108
+ }
120
109
 
121
- /* Border properties */
122
- --qti-border-thickness: 2px;
123
- --qti-border-style: solid;
124
- --qti-border-color: #c6cad0;
125
- --qti-border-radius: 0.3rem;
126
- --qti-drop-border-radius: calc(var(--qti-border-radius) + var(--qti-border-thickness));
110
+ .qti-display-block {
111
+ display: block;
112
+ }
127
113
 
128
- /* Focus & active states */
129
- --qti-focus-border-width: 5px;
130
- --qti-focus-color: #bddcff7e;
114
+ .qti-display-flex {
115
+ display: flex;
116
+ }
131
117
 
132
- /* Class-specific variables */
118
+ .qti-display-inline-flex {
119
+ display: inline-flex;
120
+ }
133
121
 
134
- /* Form elements */
135
- --qti-form-size: 1rem;
122
+ .qti-display-grid {
123
+ display: grid;
124
+ }
136
125
 
137
- /* Order buttons */
138
- --qti-order-size: 2rem;
126
+ .qti-display-inline-grid {
127
+ display: inline-grid;
128
+ }
139
129
 
140
- /* Generic padding for all elements */
141
- --qti-padding-vertical: 0.5rem; /* py-2 */
142
- --qti-padding-horizontal: 0.5rem; /* px-2 */
130
+ .qti-display-table {
131
+ display: table;
132
+ }
143
133
 
144
- /* Dropzones */
145
- --qti-dropzone-padding: 0rem;
134
+ .qti-display-table-cell {
135
+ display: table-cell;
146
136
  }
147
137
 
148
- /* SVG masks and backgrounds */
138
+ .qti-display-table-row {
139
+ display: table-row;
140
+ }
149
141
 
150
- .chevron {
151
- 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")
152
- no-repeat center right 6px;
142
+ .qti-display-list-item {
143
+ display: list-item;
153
144
  }
154
145
 
155
- .handle {
156
- background-image: radial-gradient(
157
- circle at center,
158
- rgb(0 0 0 / 10%) 0,
159
- rgb(0 0 0 / 20%) 2px,
160
- rgb(255 255 255 / 0%) 2px,
161
- rgb(255 255 255 / 0%) 100%
162
- );
163
- background-repeat: repeat-y;
164
- background-position: left center;
165
- background-size: 14px 8px;
146
+ .qti-display-inherit {
147
+ display: inherit;
166
148
  }
167
149
 
168
- .check-mask {
169
- -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");
170
- 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");
150
+ /*
151
+ * hidden to screen readers and sighted
152
+ */
153
+
154
+ .qti-hidden {
155
+ display: none;
171
156
  }
172
157
 
173
158
  /*
174
- Following are classes that can be applied to elements and element states, so they are not used directly
175
- The @apply directive is used to apply these classes to elements
176
- */
177
-
178
- /* Apply .bordered to an element */
159
+ * visible to screen readers, hidden to sighted
160
+ */
179
161
 
180
- .bordered {
181
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
182
- outline: none;
162
+ .qti-visually-hidden {
163
+ position: fixed !important;
164
+ overflow: hidden;
165
+ clip: rect(1px 1px 1px 1px);
166
+ height: 1px;
167
+ width: 1px;
168
+ border: 0;
169
+ margin: -1px;
183
170
  }
184
171
 
185
- /* Apply .form rules for checkbox and radiobutton */
186
-
187
- .form {
172
+ /* =============================
173
+ Special flex styles
174
+ ============================= */
188
175
 
189
- /* background-color: var(--qti-bg); */
190
- display: grid;
191
- place-content: center;
192
- width: var(--qti-form-size);
193
- height: var(--qti-form-size);
194
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
195
- outline: none;
176
+ .qti-flex-direction-column {
177
+ flex-direction: column;
196
178
  }
197
179
 
198
- /* Apply .button rules for button-like elements, such as drags and buttons */
180
+ .qti-flex-direction-row {
181
+ flex-direction: row;
182
+ }
199
183
 
200
- .button {
184
+ .qti-flex-grow-1 {
185
+ flex-grow: 1;
186
+ }
201
187
 
202
- border-radius: var(--qti-border-radius);
203
- padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
204
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
205
- outline: none;
188
+ .qti-flex-grow-0 {
189
+ flex-grow: 0;
206
190
  }
207
191
 
208
- /* Apply .select for the select dropdown element */
192
+ /* =========
193
+ Margin css
194
+ ========== */
209
195
 
210
- .select {
196
+ /**
197
+ * For margin Top and Bottom and Left and Right
198
+ */
211
199
 
212
- border-radius: var(--qti-border-radius);
213
- position: relative;
214
- -webkit-appearance: none;
215
- -moz-appearance: none;
216
- appearance: none;
217
- padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
218
- padding-right: calc(var(--qti-padding-horizontal) + 1.5rem); /* 1.5rem for the chevron */ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color); outline: none; 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")
219
- no-repeat center right 6px;
200
+ .qti-margin-0 {
201
+ margin: 0 !important;
220
202
  }
221
203
 
222
- /* Apply .text for the input text and textarea */
204
+ .qti-margin-1 {
205
+ margin: 0.25rem !important;
206
+ }
223
207
 
224
- .text {
208
+ .qti-margin-2 {
209
+ margin: 0.5rem !important;
210
+ }
225
211
 
226
- border-radius: 0;
227
- cursor: text;
228
- padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
229
- background: var(--qti-bg);
230
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
231
- outline: none;
212
+ .qti-margin-3 {
213
+ margin: 1rem !important;
232
214
  }
233
215
 
234
- /* Apply .spot for hotspot shapes */
216
+ .qti-margin-4 {
217
+ margin: 1.5rem !important;
218
+ }
235
219
 
236
- .spot {
220
+ .qti-margin-5 {
221
+ margin: 3rem !important;
222
+ }
237
223
 
238
- width: 100%;
239
- height: 100%;
240
- background-color: transparent;
241
- margin: 0 !important;
242
- padding: 0 !important;
243
- border: 0 !important;
244
- box-sizing: border-box !important;
245
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
246
- outline: none;
224
+ .qti-margin-auto {
225
+ margin: auto !important;
247
226
  }
248
227
 
249
- /* Apply .point for circular small hotspots */
228
+ /*
229
+ For margin Left and Right
230
+ */
250
231
 
251
- .point {
232
+ .qti-margin-x-0 {
233
+ margin-right: 0 !important;
234
+ margin-left: 0 !important;
235
+ }
252
236
 
253
- box-sizing: border-box;
254
- border-radius: 100%;
255
- border: 1px solid white;
256
- background-color: black;
257
- opacity: 0.5;
258
- padding: 0;
259
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
260
- outline: none;
237
+ .qti-margin-x-1 {
238
+ margin-right: 0.25rem !important;
239
+ margin-left: 0.25rem !important;
261
240
  }
262
241
 
263
- /* Apply .drag for draggable elements */
242
+ .qti-margin-x-2 {
243
+ margin-right: 0.5rem !important;
244
+ margin-left: 0.5rem !important;
245
+ }
264
246
 
265
- .drag {
247
+ .qti-margin-x-3 {
248
+ margin-right: 1rem !important;
249
+ margin-left: 1rem !important;
250
+ }
266
251
 
267
- box-sizing: border-box;
268
- transition:
269
- transform 200ms ease-out,
270
- box-shadow 200ms ease-out,
271
- rotate 200ms ease-out;
272
- cursor: grab;
273
- background-color: var(--qti-bg);
274
- padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
275
- border-radius: var(--qti-border-radius);
252
+ .qti-margin-x-4 {
253
+ margin-right: 1.5rem !important;
254
+ margin-left: 1.5rem !important;
255
+ }
276
256
 
277
- /* padding-left: calc(var(--qti-padding-horizontal) + 0.5rem) !important; */
257
+ .qti-margin-x-5 {
258
+ margin-right: 3rem !important;
259
+ margin-left: 3rem !important;
260
+ }
278
261
 
279
- /* 1.5rem for the drag */
262
+ .qti-margin-x-auto {
263
+ margin-right: auto !important;
264
+ margin-left: auto !important;
265
+ }
280
266
 
281
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
267
+ /*
268
+ For margin Top and Bottom
269
+ */
282
270
 
283
- outline: none;
271
+ .qti-margin-y-0 {
272
+ margin-top: 0 !important;
273
+ margin-bottom: 0 !important;
284
274
  }
285
275
 
286
- /* Apply .dragging for the dragging state of a draggable element */
287
-
288
- .dragging {
289
- pointer-events: none;
290
- rotate: -2deg;
291
- box-shadow:
292
- 0 8px 12px rgb(0 0 0 / 20%),
293
- 0 4px 8px rgb(0 0 0 / 10%);
276
+ .qti-margin-y-1 {
277
+ margin-top: 0.25rem !important;
278
+ margin-bottom: 0.25rem !important;
294
279
  }
295
280
 
296
- /* Apply .drop for an element where you can drop the draggable */
281
+ .qti-margin-y-2 {
282
+ margin-top: 0.5rem !important;
283
+ margin-bottom: 0.5rem !important;
284
+ }
297
285
 
298
- .drop {
299
- /* @apply bordered; */
300
- border: var(--qti-border-thickness) dashed var(--qti-border-color);
301
- background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="7" stroke="%23CCCCCC" stroke-width="1" fill="transparent" /></svg>')
302
- center no-repeat;
303
- border-radius: var(--qti-border-radius);
304
- position: relative;
305
- background-color: var(--qti-bg);
286
+ .qti-margin-y-3 {
287
+ margin-top: 1rem !important;
288
+ margin-bottom: 1rem !important;
306
289
  }
307
290
 
308
- /* Apply .dropping for an indicator where you can drop the draggable */
291
+ .qti-margin-y-4 {
292
+ margin-top: 1.5rem !important;
293
+ margin-bottom: 1.5rem !important;
294
+ }
309
295
 
310
- .dropping {
311
- background-color: var(--qti-bg-active);
296
+ .qti-margin-y-5 {
297
+ margin-top: 3rem !important;
298
+ margin-bottom: 3rem !important;
312
299
  }
313
300
 
314
- /* Apply .order for a small circular button */
301
+ .qti-margin-y-auto {
302
+ margin-top: auto !important;
303
+ margin-bottom: auto !important;
304
+ }
315
305
 
316
- .order {
306
+ /*
307
+ For margin Top
308
+ */
317
309
 
318
- display: grid;
319
- place-content: center;
310
+ .qti-margin-t-0 {
311
+ margin-top: 0 !important;
312
+ }
320
313
 
321
- /* background-color: var(--qti-bg-active); */
322
- box-sizing: border-box;
323
- border-radius: 100%;
324
- width: var(--qti-order-size);
325
- height: var(--qti-order-size);
326
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
327
- outline: none;
314
+ .qti-margin-t-1 {
315
+ margin-top: 0.25rem !important;
328
316
  }
329
317
 
330
- /* Apply .check-size for radio and checkbox size */
318
+ .qti-margin-t-2 {
319
+ margin-top: 0.5rem !important;
320
+ }
331
321
 
332
- .check-size {
333
- width: calc(var(--qti-form-size) - 6px);
334
- height: calc(var(--qti-form-size) - 6px);
322
+ .qti-margin-t-3 {
323
+ margin-top: 1rem !important;
335
324
  }
336
325
 
337
- /* Apply .check for checkbox */
326
+ .qti-margin-t-4 {
327
+ margin-top: 1.5rem !important;
328
+ }
338
329
 
339
- .check {
340
- gap: 0.5rem;
341
- background-color: var(--qti-bg);
342
- border-radius: var(--qti-border-radius);
343
- padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
344
- outline: none;
345
- cursor: pointer;
330
+ .qti-margin-t-5 {
331
+ margin-top: 3rem !important;
346
332
  }
347
333
 
348
- /* Apply .check-radio for outer circle of the radio buttons */
334
+ .qti-margin-t-auto {
335
+ margin-top: auto !important;
336
+ }
349
337
 
350
- .check-radio {
338
+ /*
339
+ For margin Bottom
340
+ */
351
341
 
352
- border-radius: 100%;
342
+ .qti-margin-b-0 {
343
+ margin-bottom: 0 !important;
344
+ }
353
345
 
354
- display: grid;
346
+ .qti-margin-b-1 {
347
+ margin-bottom: 0.25rem !important;
348
+ }
355
349
 
356
- place-content: center;
350
+ .qti-margin-b-2 {
351
+ margin-bottom: 0.5rem !important;
352
+ }
357
353
 
358
- width: var(--qti-form-size);
354
+ .qti-margin-b-3 {
355
+ margin-bottom: 1rem !important;
356
+ }
359
357
 
360
- height: var(--qti-form-size);
358
+ .qti-margin-b-4 {
359
+ margin-bottom: 1.5rem !important;
360
+ }
361
361
 
362
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
362
+ .qti-margin-b-5 {
363
+ margin-bottom: 3rem !important;
364
+ }
363
365
 
364
- outline: none;
366
+ .qti-margin-b-auto {
367
+ margin-bottom: auto !important;
365
368
  }
366
369
 
367
- /* Apply .check-radio-checked for the inner checked radio */
370
+ /*
371
+ For margin Start LTR
372
+ */
368
373
 
369
- .check-radio-checked {
370
- background-color: var(--qti-border-active);
371
- border-radius: 100%;
374
+ .qti-margin-s-0 {
375
+ margin-left: 0 !important;
372
376
  }
373
377
 
374
- /* Apply .check-checkbox for outer square of the checkbox */
375
-
376
- .check-checkbox {
378
+ .qti-margin-s-1 {
379
+ margin-left: 0.25rem !important;
380
+ }
377
381
 
378
- display: flex;
379
- place-items: center;
380
- border-radius: var(--qti-border-radius);
381
- display: grid;
382
- place-content: center;
383
- width: var(--qti-form-size);
384
- height: var(--qti-form-size);
385
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
386
- outline: none;
382
+ .qti-margin-s-2 {
383
+ margin-left: 0.5rem !important;
387
384
  }
388
385
 
389
- /* Apply .check-checkbox-checked for the inner checkmark */
386
+ .qti-margin-s-3 {
387
+ margin-left: 1rem !important;
388
+ }
390
389
 
391
- .check-checkbox-checked {
392
- background-color: var(--qti-border-active);
393
- -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");
394
- 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");
390
+ .qti-margin-s-4 {
391
+ margin-left: 1.5rem !important;
395
392
  }
396
393
 
397
- /* Apply .hov for hover state */
394
+ .qti-margin-s-5 {
395
+ margin-left: 3rem !important;
396
+ }
398
397
 
399
- .hov {
400
- /* background-color: var(--qti-hover-bg); */
398
+ .qti-margin-s-auto {
399
+ margin-left: auto !important;
401
400
  }
402
401
 
403
- /* Apply .foc for focus state */
402
+ /*
403
+ For margin End LTR
404
+ */
404
405
 
405
- .foc {
406
- box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
406
+ .qti-margin-e-0 {
407
+ margin-right: 0 !important;
407
408
  }
408
409
 
409
- /* Apply .act for active state */
410
+ .qti-margin-e-1 {
411
+ margin-right: 0.25rem !important;
412
+ }
410
413
 
411
- .act {
412
- border-color: var(--qti-border-active);
413
- background-color: var(--qti-bg-active);
414
+ .qti-margin-e-2 {
415
+ margin-right: 0.5rem !important;
414
416
  }
415
417
 
416
- .act-bg {
417
- background-color: var(--qti-bg-active);
418
+ .qti-margin-e-3 {
419
+ margin-right: 1rem !important;
418
420
  }
419
421
 
420
- .act-bor {
421
- border-color: var(--qti-border-active);
422
+ .qti-margin-e-4 {
423
+ margin-right: 1.5rem !important;
422
424
  }
423
425
 
424
- /* Apply .rdo for readonly state */
426
+ .qti-margin-e-5 {
427
+ margin-right: 3rem !important;
428
+ }
425
429
 
426
- .rdo {
427
- cursor: pointer;
428
- background-color: var(--qti-bg);
429
- outline: 0;
430
- border: none;
430
+ .qti-margin-e-auto {
431
+ margin-right: auto !important;
431
432
  }
432
433
 
433
- /* Apply .dis for disabled state */
434
+ /* =========
435
+ Padding css
436
+ ========== */
434
437
 
435
- .dis {
436
- cursor: not-allowed;
437
- background-color: var(--qti-disabled-bg);
438
- color: var(--qti-disabled-color);
439
- border-color: var(--qti-border-color);
440
- outline: 4px solid var(--qti-disabled-bg);
438
+ /*
439
+ For padding Top and Bottom and Left and Right
440
+ */
441
+
442
+ .qti-padding-0 {
443
+ padding: 0 !important;
444
+ }
445
+
446
+ .qti-padding-1 {
447
+ padding: 0.25rem !important;
441
448
  }
442
449
 
443
- /* base */
444
-
445
- /* ============================
446
- QTI 3 shared css
447
- 1. Display
448
- 2. Special Flex styles
449
- 3. Margin
450
- 4. Padding
451
- 5. Horizontal Alignment styles
452
- 6. Vertical Alignment styles
453
- 7. Height
454
- 8. Width
455
- 9. Text-Indent
456
- 10. List Style
457
- 11. Layout
458
- 12. Other QTI 3 presentation utilities
459
- ============================ */
450
+ .qti-padding-2 {
451
+ padding: 0.5rem !important;
452
+ }
460
453
 
461
- /* ==========
462
- Display css
463
- =========== */
454
+ .qti-padding-3 {
455
+ padding: 1rem !important;
456
+ }
464
457
 
465
- .qti-display-inline {
466
- display: inline;
458
+ .qti-padding-4 {
459
+ padding: 1.5rem !important;
467
460
  }
468
461
 
469
- .qti-display-inline-block {
470
- display: inline-block;
462
+ .qti-padding-5 {
463
+ padding: 3rem !important;
471
464
  }
472
465
 
473
- .qti-display-block {
474
- display: block;
466
+ /*
467
+ For padding Left and Right
468
+ */
469
+
470
+ .qti-padding-x-0 {
471
+ padding-right: 0 !important;
472
+ padding-left: 0 !important;
475
473
  }
476
474
 
477
- .qti-display-flex {
478
- display: flex;
475
+ .qti-padding-x-1 {
476
+ padding-right: 0.25rem !important;
477
+ padding-left: 0.25rem !important;
479
478
  }
480
479
 
481
- .qti-display-inline-flex {
482
- display: inline-flex;
480
+ .qti-padding-x-2 {
481
+ padding-right: 0.5rem !important;
482
+ padding-left: 0.5rem !important;
483
483
  }
484
484
 
485
- .qti-display-grid {
486
- display: grid;
485
+ .qti-padding-x-3 {
486
+ padding-right: 1rem !important;
487
+ padding-left: 1rem !important;
487
488
  }
488
489
 
489
- .qti-display-inline-grid {
490
- display: inline-grid;
490
+ .qti-padding-x-4 {
491
+ padding-right: 1.5rem !important;
492
+ padding-left: 1.5rem !important;
491
493
  }
492
494
 
493
- .qti-display-table {
494
- display: table;
495
+ .qti-padding-x-5 {
496
+ padding-right: 3rem !important;
497
+ padding-left: 3rem !important;
495
498
  }
496
499
 
497
- .qti-display-table-cell {
498
- display: table-cell;
500
+ /*
501
+ For padding Top and Bottom
502
+ */
503
+
504
+ .qti-padding-y-0 {
505
+ padding-top: 0 !important;
506
+ padding-bottom: 0 !important;
499
507
  }
500
508
 
501
- .qti-display-table-row {
502
- display: table-row;
509
+ .qti-padding-y-1 {
510
+ padding-top: 0.25rem !important;
511
+ padding-bottom: 0.25rem !important;
503
512
  }
504
513
 
505
- .qti-display-list-item {
506
- display: list-item;
514
+ .qti-padding-y-2 {
515
+ padding-top: 0.5rem !important;
516
+ padding-bottom: 0.5rem !important;
507
517
  }
508
518
 
509
- .qti-display-inherit {
510
- display: inherit;
519
+ .qti-padding-y-3 {
520
+ padding-top: 1rem !important;
521
+ padding-bottom: 1rem !important;
511
522
  }
512
523
 
513
- /*
514
- * hidden to screen readers and sighted
515
- */
524
+ .qti-padding-y-4 {
525
+ padding-top: 1.5rem !important;
526
+ padding-bottom: 1.5rem !important;
527
+ }
516
528
 
517
- .qti-hidden {
518
- display: none;
529
+ .qti-padding-y-5 {
530
+ padding-top: 3rem !important;
531
+ padding-bottom: 3rem !important;
519
532
  }
520
533
 
521
534
  /*
522
- * visible to screen readers, hidden to sighted
535
+ For padding Top
523
536
  */
524
537
 
525
- .qti-visually-hidden {
526
- position: fixed !important;
527
- overflow: hidden;
528
- clip: rect(1px 1px 1px 1px);
529
- height: 1px;
530
- width: 1px;
531
- border: 0;
532
- margin: -1px;
538
+ .qti-padding-t-0 {
539
+ padding-top: 0 !important;
533
540
  }
534
541
 
535
- /* =============================
536
- Special flex styles
537
- ============================= */
538
-
539
- .qti-flex-direction-column {
540
- flex-direction: column;
542
+ .qti-padding-t-1 {
543
+ padding-top: 0.25rem !important;
541
544
  }
542
545
 
543
- .qti-flex-direction-row {
544
- flex-direction: row;
546
+ .qti-padding-t-2 {
547
+ padding-top: 0.5rem !important;
545
548
  }
546
549
 
547
- .qti-flex-grow-1 {
548
- flex-grow: 1;
550
+ .qti-padding-t-3 {
551
+ padding-top: 1rem !important;
549
552
  }
550
553
 
551
- .qti-flex-grow-0 {
552
- flex-grow: 0;
554
+ .qti-padding-t-4 {
555
+ padding-top: 1.5rem !important;
553
556
  }
554
557
 
555
- /* =========
556
- Margin css
557
- ========== */
558
+ .qti-padding-t-5 {
559
+ padding-top: 3rem !important;
560
+ }
558
561
 
559
- /**
560
- * For margin Top and Bottom and Left and Right
562
+ /*
563
+ For padding Bottom
561
564
  */
562
565
 
563
- .qti-margin-0 {
564
- margin: 0 !important;
565
- }
566
-
567
- .qti-margin-1 {
568
- margin: 0.25rem !important;
566
+ .qti-padding-b-0 {
567
+ padding-bottom: 0 !important;
569
568
  }
570
569
 
571
- .qti-margin-2 {
572
- margin: 0.5rem !important;
570
+ .qti-padding-b-1 {
571
+ padding-bottom: 0.25rem !important;
573
572
  }
574
573
 
575
- .qti-margin-3 {
576
- margin: 1rem !important;
574
+ .qti-padding-b-2 {
575
+ padding-bottom: 0.5rem !important;
577
576
  }
578
577
 
579
- .qti-margin-4 {
580
- margin: 1.5rem !important;
578
+ .qti-padding-b-3 {
579
+ padding-bottom: 1rem !important;
581
580
  }
582
581
 
583
- .qti-margin-5 {
584
- margin: 3rem !important;
582
+ .qti-padding-b-4 {
583
+ padding-bottom: 1.5rem !important;
585
584
  }
586
585
 
587
- .qti-margin-auto {
588
- margin: auto !important;
586
+ .qti-padding-b-5 {
587
+ padding-bottom: 3rem !important;
589
588
  }
590
589
 
591
590
  /*
592
- For margin Left and Right
591
+ For padding Start LTR
593
592
  */
594
593
 
595
- .qti-margin-x-0 {
596
- margin-right: 0 !important;
597
- margin-left: 0 !important;
598
- }
599
-
600
- .qti-margin-x-1 {
601
- margin-right: 0.25rem !important;
602
- margin-left: 0.25rem !important;
594
+ .qti-padding-s-0 {
595
+ padding-left: 0 !important;
603
596
  }
604
597
 
605
- .qti-margin-x-2 {
606
- margin-right: 0.5rem !important;
607
- margin-left: 0.5rem !important;
598
+ .qti-padding-s-1 {
599
+ padding-left: 0.25rem !important;
608
600
  }
609
601
 
610
- .qti-margin-x-3 {
611
- margin-right: 1rem !important;
612
- margin-left: 1rem !important;
602
+ .qti-padding-s-2 {
603
+ padding-left: 0.5rem !important;
613
604
  }
614
605
 
615
- .qti-margin-x-4 {
616
- margin-right: 1.5rem !important;
617
- margin-left: 1.5rem !important;
606
+ .qti-padding-s-3 {
607
+ padding-left: 1rem !important;
618
608
  }
619
609
 
620
- .qti-margin-x-5 {
621
- margin-right: 3rem !important;
622
- margin-left: 3rem !important;
610
+ .qti-padding-s-4 {
611
+ padding-left: 1.5rem !important;
623
612
  }
624
613
 
625
- .qti-margin-x-auto {
626
- margin-right: auto !important;
627
- margin-left: auto !important;
614
+ .qti-padding-s-5 {
615
+ padding-left: 3rem !important;
628
616
  }
629
617
 
630
618
  /*
631
- For margin Top and Bottom
619
+ For padding End LTR
632
620
  */
633
621
 
634
- .qti-margin-y-0 {
635
- margin-top: 0 !important;
636
- margin-bottom: 0 !important;
637
- }
638
-
639
- .qti-margin-y-1 {
640
- margin-top: 0.25rem !important;
641
- margin-bottom: 0.25rem !important;
622
+ .qti-padding-e-0 {
623
+ padding-right: 0 !important;
642
624
  }
643
625
 
644
- .qti-margin-y-2 {
645
- margin-top: 0.5rem !important;
646
- margin-bottom: 0.5rem !important;
626
+ .qti-padding-e-1 {
627
+ padding-right: 0.25rem !important;
647
628
  }
648
629
 
649
- .qti-margin-y-3 {
650
- margin-top: 1rem !important;
651
- margin-bottom: 1rem !important;
630
+ .qti-padding-e-2 {
631
+ padding-right: 0.5rem !important;
652
632
  }
653
633
 
654
- .qti-margin-y-4 {
655
- margin-top: 1.5rem !important;
656
- margin-bottom: 1.5rem !important;
634
+ .qti-padding-e-3 {
635
+ padding-right: 1rem !important;
657
636
  }
658
637
 
659
- .qti-margin-y-5 {
660
- margin-top: 3rem !important;
661
- margin-bottom: 3rem !important;
638
+ .qti-padding-e-4 {
639
+ padding-right: 1.5rem !important;
662
640
  }
663
641
 
664
- .qti-margin-y-auto {
665
- margin-top: auto !important;
666
- margin-bottom: auto !important;
642
+ .qti-padding-e-5 {
643
+ padding-right: 3rem !important;
667
644
  }
668
645
 
669
- /*
670
- For margin Top
671
- */
646
+ /* ====================
647
+ Horizontal alignment
648
+ ==================== */
672
649
 
673
- .qti-margin-t-0 {
674
- margin-top: 0 !important;
650
+ .qti-align-left {
651
+ text-align: left;
675
652
  }
676
653
 
677
- .qti-margin-t-1 {
678
- margin-top: 0.25rem !important;
654
+ .qti-align-center {
655
+ text-align: center;
679
656
  }
680
657
 
681
- .qti-margin-t-2 {
682
- margin-top: 0.5rem !important;
658
+ .qti-align-right {
659
+ text-align: right;
683
660
  }
684
661
 
685
- .qti-margin-t-3 {
686
- margin-top: 1rem !important;
662
+ /* ==================
663
+ Vertical alignment
664
+ ================== */
665
+
666
+ .qti-valign-top {
667
+ vertical-align: top;
687
668
  }
688
669
 
689
- .qti-margin-t-4 {
690
- margin-top: 1.5rem !important;
670
+ .qti-valign-middle {
671
+ vertical-align: middle;
691
672
  }
692
673
 
693
- .qti-margin-t-5 {
694
- margin-top: 3rem !important;
674
+ .qti-valign-baseline {
675
+ vertical-align: baseline;
695
676
  }
696
677
 
697
- .qti-margin-t-auto {
698
- margin-top: auto !important;
678
+ .qti-valign-bottom {
679
+ vertical-align: bottom;
699
680
  }
700
681
 
701
- /*
702
- For margin Bottom
703
- */
682
+ /* =============
683
+ Height styles
684
+ ============= */
704
685
 
705
- .qti-margin-b-0 {
706
- margin-bottom: 0 !important;
686
+ .qti-height-0 {
687
+ height: 0;
707
688
  }
708
689
 
709
- .qti-margin-b-1 {
710
- margin-bottom: 0.25rem !important;
690
+ .qti-height-px {
691
+ height: 1px;
711
692
  }
712
693
 
713
- .qti-margin-b-2 {
714
- margin-bottom: 0.5rem !important;
694
+ .qti-height-0p5 {
695
+ height: 0.125rem;
715
696
  }
716
697
 
717
- .qti-margin-b-3 {
718
- margin-bottom: 1rem !important;
698
+ .qti-height-1 {
699
+ height: 0.25rem;
719
700
  }
720
701
 
721
- .qti-margin-b-4 {
722
- margin-bottom: 1.5rem !important;
702
+ .qti-height-1p5 {
703
+ height: 0.375rem;
723
704
  }
724
705
 
725
- .qti-margin-b-5 {
726
- margin-bottom: 3rem !important;
706
+ .qti-height-2 {
707
+ height: 0.5rem;
727
708
  }
728
709
 
729
- .qti-margin-b-auto {
730
- margin-bottom: auto !important;
710
+ .qti-height-2p5 {
711
+ height: 0.625rem;
731
712
  }
732
713
 
733
- /*
734
- For margin Start LTR
735
- */
736
-
737
- .qti-margin-s-0 {
738
- margin-left: 0 !important;
714
+ .qti-height-3 {
715
+ height: 0.75rem;
739
716
  }
740
717
 
741
- .qti-margin-s-1 {
742
- margin-left: 0.25rem !important;
718
+ .qti-height-3p5 {
719
+ height: 0.875rem;
743
720
  }
744
721
 
745
- .qti-margin-s-2 {
746
- margin-left: 0.5rem !important;
722
+ .qti-height-4 {
723
+ height: 1rem;
747
724
  }
748
725
 
749
- .qti-margin-s-3 {
750
- margin-left: 1rem !important;
726
+ .qti-height-5 {
727
+ height: 1.25rem;
751
728
  }
752
729
 
753
- .qti-margin-s-4 {
754
- margin-left: 1.5rem !important;
730
+ .qti-height-6 {
731
+ height: 1.5rem;
755
732
  }
756
733
 
757
- .qti-margin-s-5 {
758
- margin-left: 3rem !important;
734
+ .qti-height-7 {
735
+ height: 1.75rem;
759
736
  }
760
737
 
761
- .qti-margin-s-auto {
762
- margin-left: auto !important;
738
+ .qti-height-8 {
739
+ height: 2rem;
763
740
  }
764
741
 
765
- /*
766
- For margin End LTR
767
- */
742
+ .qti-height-9 {
743
+ height: 2.25rem;
744
+ }
768
745
 
769
- .qti-margin-e-0 {
770
- margin-right: 0 !important;
746
+ .qti-height-10 {
747
+ height: 2.5rem;
771
748
  }
772
749
 
773
- .qti-margin-e-1 {
774
- margin-right: 0.25rem !important;
750
+ .qti-height-11 {
751
+ height: 2.75rem;
775
752
  }
776
753
 
777
- .qti-margin-e-2 {
778
- margin-right: 0.5rem !important;
754
+ .qti-height-12 {
755
+ height: 3rem;
779
756
  }
780
757
 
781
- .qti-margin-e-3 {
782
- margin-right: 1rem !important;
758
+ .qti-height-14 {
759
+ height: 3.5rem;
783
760
  }
784
761
 
785
- .qti-margin-e-4 {
786
- margin-right: 1.5rem !important;
762
+ .qti-height-16 {
763
+ height: 4rem;
787
764
  }
788
765
 
789
- .qti-margin-e-5 {
790
- margin-right: 3rem !important;
766
+ .qti-height-20 {
767
+ height: 5rem;
791
768
  }
792
769
 
793
- .qti-margin-e-auto {
794
- margin-right: auto !important;
770
+ .qti-height-24 {
771
+ height: 6rem;
795
772
  }
796
773
 
797
- /* =========
798
- Padding css
799
- ========== */
774
+ .qti-height-28 {
775
+ height: 7rem;
776
+ }
800
777
 
801
- /*
802
- For padding Top and Bottom and Left and Right
803
- */
778
+ .qti-height-32 {
779
+ height: 8rem;
780
+ }
804
781
 
805
- .qti-padding-0 {
806
- padding: 0 !important;
782
+ .qti-height-36 {
783
+ height: 9rem;
807
784
  }
808
785
 
809
- .qti-padding-1 {
810
- padding: 0.25rem !important;
786
+ .qti-height-40 {
787
+ height: 10rem;
811
788
  }
812
789
 
813
- .qti-padding-2 {
814
- padding: 0.5rem !important;
790
+ .qti-height-44 {
791
+ height: 11rem;
815
792
  }
816
793
 
817
- .qti-padding-3 {
818
- padding: 1rem !important;
794
+ .qti-height-48 {
795
+ height: 12rem;
819
796
  }
820
797
 
821
- .qti-padding-4 {
822
- padding: 1.5rem !important;
798
+ .qti-height-52 {
799
+ height: 13rem;
823
800
  }
824
801
 
825
- .qti-padding-5 {
826
- padding: 3rem !important;
802
+ .qti-height-56 {
803
+ height: 14rem;
827
804
  }
828
805
 
829
- /*
830
- For padding Left and Right
831
- */
806
+ .qti-height-60 {
807
+ height: 15rem;
808
+ }
832
809
 
833
- .qti-padding-x-0 {
834
- padding-right: 0 !important;
835
- padding-left: 0 !important;
810
+ .qti-height-64 {
811
+ height: 16rem;
836
812
  }
837
813
 
838
- .qti-padding-x-1 {
839
- padding-right: 0.25rem !important;
840
- padding-left: 0.25rem !important;
814
+ .qti-height-72 {
815
+ height: 18rem;
841
816
  }
842
817
 
843
- .qti-padding-x-2 {
844
- padding-right: 0.5rem !important;
845
- padding-left: 0.5rem !important;
818
+ .qti-height-80 {
819
+ height: 20rem;
846
820
  }
847
821
 
848
- .qti-padding-x-3 {
849
- padding-right: 1rem !important;
850
- padding-left: 1rem !important;
822
+ .qti-height-96 {
823
+ height: 24rem;
851
824
  }
852
825
 
853
- .qti-padding-x-4 {
854
- padding-right: 1.5rem !important;
855
- padding-left: 1.5rem !important;
826
+ .qti-height-1-2 {
827
+ height: 50%;
856
828
  }
857
829
 
858
- .qti-padding-x-5 {
859
- padding-right: 3rem !important;
860
- padding-left: 3rem !important;
830
+ .qti-height-1-3 {
831
+ height: 33.3333%;
861
832
  }
862
833
 
863
- /*
864
- For padding Top and Bottom
865
- */
834
+ .qti-height-2-3 {
835
+ height: 66.6667%;
836
+ }
866
837
 
867
- .qti-padding-y-0 {
868
- padding-top: 0 !important;
869
- padding-bottom: 0 !important;
838
+ .qti-height-1-4 {
839
+ height: 25%;
870
840
  }
871
841
 
872
- .qti-padding-y-1 {
873
- padding-top: 0.25rem !important;
874
- padding-bottom: 0.25rem !important;
842
+ .qti-height-2-4 {
843
+ height: 50%;
875
844
  }
876
845
 
877
- .qti-padding-y-2 {
878
- padding-top: 0.5rem !important;
879
- padding-bottom: 0.5rem !important;
846
+ .qti-height-3-4 {
847
+ height: 75%;
880
848
  }
881
849
 
882
- .qti-padding-y-3 {
883
- padding-top: 1rem !important;
884
- padding-bottom: 1rem !important;
850
+ .qti-height-1-5 {
851
+ height: 20%;
885
852
  }
886
853
 
887
- .qti-padding-y-4 {
888
- padding-top: 1.5rem !important;
889
- padding-bottom: 1.5rem !important;
854
+ .qti-height-2-5 {
855
+ height: 40%;
890
856
  }
891
857
 
892
- .qti-padding-y-5 {
893
- padding-top: 3rem !important;
894
- padding-bottom: 3rem !important;
858
+ .qti-height-3-5 {
859
+ height: 60%;
895
860
  }
896
861
 
897
- /*
898
- For padding Top
899
- */
862
+ .qti-height-4-5 {
863
+ height: 80%;
864
+ }
900
865
 
901
- .qti-padding-t-0 {
902
- padding-top: 0 !important;
866
+ .qti-height-1-6 {
867
+ height: 16.6667%;
903
868
  }
904
869
 
905
- .qti-padding-t-1 {
906
- padding-top: 0.25rem !important;
870
+ .qti-height-2-6 {
871
+ height: 33.3333%;
907
872
  }
908
873
 
909
- .qti-padding-t-2 {
910
- padding-top: 0.5rem !important;
874
+ .qti-height-3-6 {
875
+ height: 50%;
876
+ }
877
+
878
+ .qti-height-4-6 {
879
+ height: 66.6667%;
911
880
  }
912
881
 
913
- .qti-padding-t-3 {
914
- padding-top: 1rem !important;
882
+ .qti-height-5-6 {
883
+ height: 83.3333%;
915
884
  }
916
885
 
917
- .qti-padding-t-4 {
918
- padding-top: 1.5rem !important;
886
+ .qti-height-auto {
887
+ height: auto;
919
888
  }
920
889
 
921
- .qti-padding-t-5 {
922
- padding-top: 3rem !important;
890
+ .qti-height-full {
891
+ height: 100%;
923
892
  }
924
893
 
925
- /*
926
- For padding Bottom
927
- */
894
+ /* ============
895
+ Width styles
896
+ ============ */
928
897
 
929
- .qti-padding-b-0 {
930
- padding-bottom: 0 !important;
898
+ .qti-width-0 {
899
+ width: 0;
931
900
  }
932
901
 
933
- .qti-padding-b-1 {
934
- padding-bottom: 0.25rem !important;
902
+ .qti-width-px {
903
+ width: 1px;
935
904
  }
936
905
 
937
- .qti-padding-b-2 {
938
- padding-bottom: 0.5rem !important;
906
+ .qti-width-0p5 {
907
+ width: 0.125rem;
939
908
  }
940
909
 
941
- .qti-padding-b-3 {
942
- padding-bottom: 1rem !important;
910
+ .qti-width-1 {
911
+ width: 0.25rem;
943
912
  }
944
913
 
945
- .qti-padding-b-4 {
946
- padding-bottom: 1.5rem !important;
914
+ .qti-width-1p5 {
915
+ width: 0.375rem;
947
916
  }
948
917
 
949
- .qti-padding-b-5 {
950
- padding-bottom: 3rem !important;
918
+ .qti-width-2 {
919
+ width: 0.5rem;
951
920
  }
952
921
 
953
- /*
954
- For padding Start LTR
955
- */
956
-
957
- .qti-padding-s-0 {
958
- padding-left: 0 !important;
922
+ .qti-width-2p5 {
923
+ width: 0.625rem;
959
924
  }
960
925
 
961
- .qti-padding-s-1 {
962
- padding-left: 0.25rem !important;
926
+ .qti-width-3 {
927
+ width: 0.75rem;
963
928
  }
964
929
 
965
- .qti-padding-s-2 {
966
- padding-left: 0.5rem !important;
930
+ .qti-width-3p5 {
931
+ width: 0.875rem;
967
932
  }
968
933
 
969
- .qti-padding-s-3 {
970
- padding-left: 1rem !important;
934
+ .qti-width-4 {
935
+ width: 1rem;
971
936
  }
972
937
 
973
- .qti-padding-s-4 {
974
- padding-left: 1.5rem !important;
938
+ .qti-width-5 {
939
+ width: 1.25rem;
975
940
  }
976
941
 
977
- .qti-padding-s-5 {
978
- padding-left: 3rem !important;
942
+ .qti-width-6 {
943
+ width: 1.5rem;
979
944
  }
980
945
 
981
- /*
982
- For padding End LTR
983
- */
984
-
985
- .qti-padding-e-0 {
986
- padding-right: 0 !important;
946
+ .qti-width-7 {
947
+ width: 1.75rem;
987
948
  }
988
949
 
989
- .qti-padding-e-1 {
990
- padding-right: 0.25rem !important;
950
+ .qti-width-8 {
951
+ width: 2rem;
991
952
  }
992
953
 
993
- .qti-padding-e-2 {
994
- padding-right: 0.5rem !important;
954
+ .qti-width-9 {
955
+ width: 2.25rem;
995
956
  }
996
957
 
997
- .qti-padding-e-3 {
998
- padding-right: 1rem !important;
958
+ .qti-width-10 {
959
+ width: 2.5rem;
999
960
  }
1000
961
 
1001
- .qti-padding-e-4 {
1002
- padding-right: 1.5rem !important;
962
+ .qti-width-11 {
963
+ width: 2.75rem;
1003
964
  }
1004
965
 
1005
- .qti-padding-e-5 {
1006
- padding-right: 3rem !important;
966
+ .qti-width-12 {
967
+ width: 3rem;
1007
968
  }
1008
969
 
1009
- /* ====================
1010
- Horizontal alignment
1011
- ==================== */
1012
-
1013
- .qti-align-left {
1014
- text-align: left;
970
+ .qti-width-14 {
971
+ width: 3.5rem;
1015
972
  }
1016
973
 
1017
- .qti-align-center {
1018
- text-align: center;
974
+ .qti-width-16 {
975
+ width: 4rem;
1019
976
  }
1020
977
 
1021
- .qti-align-right {
1022
- text-align: right;
978
+ .qti-width-20 {
979
+ width: 5rem;
1023
980
  }
1024
981
 
1025
- /* ==================
1026
- Vertical alignment
1027
- ================== */
1028
-
1029
- .qti-valign-top {
1030
- vertical-align: top;
982
+ .qti-width-24 {
983
+ width: 6rem;
1031
984
  }
1032
985
 
1033
- .qti-valign-middle {
1034
- vertical-align: middle;
986
+ .qti-width-28 {
987
+ width: 7rem;
1035
988
  }
1036
989
 
1037
- .qti-valign-baseline {
1038
- vertical-align: baseline;
990
+ .qti-width-32 {
991
+ width: 8rem;
1039
992
  }
1040
993
 
1041
- .qti-valign-bottom {
1042
- vertical-align: bottom;
994
+ .qti-width-36 {
995
+ width: 9rem;
1043
996
  }
1044
997
 
1045
- /* =============
1046
- Height styles
1047
- ============= */
1048
-
1049
- .qti-height-0 {
1050
- height: 0;
998
+ .qti-width-40 {
999
+ width: 10rem;
1051
1000
  }
1052
1001
 
1053
- .qti-height-px {
1054
- height: 1px;
1002
+ .qti-width-44 {
1003
+ width: 11rem;
1055
1004
  }
1056
1005
 
1057
- .qti-height-0p5 {
1058
- height: 0.125rem;
1006
+ .qti-width-48 {
1007
+ width: 12rem;
1059
1008
  }
1060
1009
 
1061
- .qti-height-1 {
1062
- height: 0.25rem;
1010
+ .qti-width-52 {
1011
+ width: 13rem;
1063
1012
  }
1064
1013
 
1065
- .qti-height-1p5 {
1066
- height: 0.375rem;
1014
+ .qti-width-56 {
1015
+ width: 14rem;
1067
1016
  }
1068
1017
 
1069
- .qti-height-2 {
1070
- height: 0.5rem;
1018
+ .qti-width-60 {
1019
+ width: 15rem;
1071
1020
  }
1072
1021
 
1073
- .qti-height-2p5 {
1074
- height: 0.625rem;
1022
+ .qti-width-64 {
1023
+ width: 16rem;
1075
1024
  }
1076
1025
 
1077
- .qti-height-3 {
1078
- height: 0.75rem;
1026
+ .qti-width-72 {
1027
+ width: 18rem;
1079
1028
  }
1080
1029
 
1081
- .qti-height-3p5 {
1082
- height: 0.875rem;
1030
+ .qti-width-80 {
1031
+ width: 20rem;
1083
1032
  }
1084
1033
 
1085
- .qti-height-4 {
1086
- height: 1rem;
1034
+ .qti-width-96 {
1035
+ width: 24rem;
1087
1036
  }
1088
1037
 
1089
- .qti-height-5 {
1090
- height: 1.25rem;
1038
+ .qti-width-auto {
1039
+ width: auto;
1091
1040
  }
1092
1041
 
1093
- .qti-height-6 {
1094
- height: 1.5rem;
1042
+ .qti-width-1-2 {
1043
+ width: 50%;
1095
1044
  }
1096
1045
 
1097
- .qti-height-7 {
1098
- height: 1.75rem;
1046
+ .qti-width-1-3 {
1047
+ width: 33.3333%;
1099
1048
  }
1100
1049
 
1101
- .qti-height-8 {
1102
- height: 2rem;
1050
+ .qti-width-2-3 {
1051
+ width: 66.6667%;
1103
1052
  }
1104
1053
 
1105
- .qti-height-9 {
1106
- height: 2.25rem;
1054
+ .qti-width-1-4 {
1055
+ width: 25%;
1107
1056
  }
1108
1057
 
1109
- .qti-height-10 {
1110
- height: 2.5rem;
1058
+ .qti-width-2-4 {
1059
+ width: 50%;
1111
1060
  }
1112
1061
 
1113
- .qti-height-11 {
1114
- height: 2.75rem;
1062
+ .qti-width-3-4 {
1063
+ width: 75%;
1115
1064
  }
1116
1065
 
1117
- .qti-height-12 {
1118
- height: 3rem;
1066
+ .qti-width-1-5 {
1067
+ width: 20%;
1119
1068
  }
1120
1069
 
1121
- .qti-height-14 {
1122
- height: 3.5rem;
1070
+ .qti-width-2-5 {
1071
+ width: 40%;
1123
1072
  }
1124
1073
 
1125
- .qti-height-16 {
1126
- height: 4rem;
1074
+ .qti-width-3-5 {
1075
+ width: 60%;
1127
1076
  }
1128
1077
 
1129
- .qti-height-20 {
1130
- height: 5rem;
1078
+ .qti-width-4-5 {
1079
+ width: 80%;
1131
1080
  }
1132
1081
 
1133
- .qti-height-24 {
1134
- height: 6rem;
1082
+ .qti-width-1-6 {
1083
+ width: 16.6667%;
1135
1084
  }
1136
1085
 
1137
- .qti-height-28 {
1138
- height: 7rem;
1086
+ .qti-width-2-6 {
1087
+ width: 33.3333%;
1139
1088
  }
1140
1089
 
1141
- .qti-height-32 {
1142
- height: 8rem;
1090
+ .qti-width-3-6 {
1091
+ width: 50%;
1143
1092
  }
1144
1093
 
1145
- .qti-height-36 {
1146
- height: 9rem;
1094
+ .qti-width-4-6 {
1095
+ width: 66.6667%;
1147
1096
  }
1148
1097
 
1149
- .qti-height-40 {
1150
- height: 10rem;
1098
+ .qti-width-5-6 {
1099
+ width: 83.3333%;
1151
1100
  }
1152
1101
 
1153
- .qti-height-44 {
1154
- height: 11rem;
1102
+ .qti-width-1-12 {
1103
+ width: 8.3333%;
1155
1104
  }
1156
1105
 
1157
- .qti-height-48 {
1158
- height: 12rem;
1106
+ .qti-width-2-12 {
1107
+ width: 16.6667%;
1159
1108
  }
1160
1109
 
1161
- .qti-height-52 {
1162
- height: 13rem;
1110
+ .qti-width-3-12 {
1111
+ width: 25%;
1163
1112
  }
1164
1113
 
1165
- .qti-height-56 {
1166
- height: 14rem;
1114
+ .qti-width-4-12 {
1115
+ width: 33.3333%;
1167
1116
  }
1168
1117
 
1169
- .qti-height-60 {
1170
- height: 15rem;
1118
+ .qti-width-5-12 {
1119
+ width: 41.6667%;
1171
1120
  }
1172
1121
 
1173
- .qti-height-64 {
1174
- height: 16rem;
1122
+ .qti-width-6-12 {
1123
+ width: 50%;
1175
1124
  }
1176
1125
 
1177
- .qti-height-72 {
1178
- height: 18rem;
1126
+ .qti-width-7-12 {
1127
+ width: 58.3333%;
1179
1128
  }
1180
1129
 
1181
- .qti-height-80 {
1182
- height: 20rem;
1130
+ .qti-width-8-12 {
1131
+ width: 66.6667%;
1183
1132
  }
1184
1133
 
1185
- .qti-height-96 {
1186
- height: 24rem;
1134
+ .qti-width-9-12 {
1135
+ width: 75%;
1187
1136
  }
1188
1137
 
1189
- .qti-height-1-2 {
1190
- height: 50%;
1138
+ .qti-width-10-12 {
1139
+ width: 83.3333%;
1191
1140
  }
1192
1141
 
1193
- .qti-height-1-3 {
1194
- height: 33.3333%;
1142
+ .qti-width-11-12 {
1143
+ width: 91.6667%;
1195
1144
  }
1196
1145
 
1197
- .qti-height-2-3 {
1198
- height: 66.6667%;
1146
+ .qti-width-full,
1147
+ .qti-fullwidth {
1148
+ width: 100%;
1199
1149
  }
1200
1150
 
1201
- .qti-height-1-4 {
1202
- height: 25%;
1151
+ /* ==================
1152
+ Text Indent styles
1153
+ ================== */
1154
+
1155
+ .qti-text-indent-0 {
1156
+ text-indent: 0;
1203
1157
  }
1204
1158
 
1205
- .qti-height-2-4 {
1206
- height: 50%;
1159
+ .qti-text-indent-px {
1160
+ text-indent: 1px;
1207
1161
  }
1208
1162
 
1209
- .qti-height-3-4 {
1210
- height: 75%;
1163
+ .qti-text-indent-0p5 {
1164
+ text-indent: 0.125rem;
1211
1165
  }
1212
1166
 
1213
- .qti-height-1-5 {
1214
- height: 20%;
1167
+ .qti-text-indent-1 {
1168
+ text-indent: 0.25rem;
1215
1169
  }
1216
1170
 
1217
- .qti-height-2-5 {
1218
- height: 40%;
1171
+ .qti-text-indent-1p5 {
1172
+ text-indent: 0.375rem;
1219
1173
  }
1220
1174
 
1221
- .qti-height-3-5 {
1222
- height: 60%;
1175
+ .qti-text-indent-2 {
1176
+ text-indent: 0.5rem;
1223
1177
  }
1224
1178
 
1225
- .qti-height-4-5 {
1226
- height: 80%;
1179
+ .qti-text-indent-2p5 {
1180
+ text-indent: 0.625rem;
1227
1181
  }
1228
1182
 
1229
- .qti-height-1-6 {
1230
- height: 16.6667%;
1183
+ .qti-text-indent-3 {
1184
+ text-indent: 0.75rem;
1231
1185
  }
1232
1186
 
1233
- .qti-height-2-6 {
1234
- height: 33.3333%;
1187
+ .qti-text-indent-3p5 {
1188
+ text-indent: 0.875rem;
1235
1189
  }
1236
1190
 
1237
- .qti-height-3-6 {
1238
- height: 50%;
1191
+ .qti-text-indent-4 {
1192
+ text-indent: 1rem;
1239
1193
  }
1240
1194
 
1241
- .qti-height-4-6 {
1242
- height: 66.6667%;
1195
+ .qti-text-indent-5 {
1196
+ text-indent: 1.25rem;
1243
1197
  }
1244
1198
 
1245
- .qti-height-5-6 {
1246
- height: 83.3333%;
1199
+ .qti-text-indent-6 {
1200
+ text-indent: 1.5rem;
1247
1201
  }
1248
1202
 
1249
- .qti-height-auto {
1250
- height: auto;
1203
+ .qti-text-indent-7 {
1204
+ text-indent: 1.75rem;
1251
1205
  }
1252
1206
 
1253
- .qti-height-full {
1254
- height: 100%;
1207
+ .qti-text-indent-8 {
1208
+ text-indent: 2rem;
1255
1209
  }
1256
1210
 
1257
- /* ============
1258
- Width styles
1259
- ============ */
1211
+ .qti-text-indent-12 {
1212
+ text-indent: 3rem;
1213
+ }
1260
1214
 
1261
- .qti-width-0 {
1262
- width: 0;
1215
+ .qti-text-indent-16 {
1216
+ text-indent: 4rem;
1263
1217
  }
1264
1218
 
1265
- .qti-width-px {
1266
- width: 1px;
1219
+ .qti-text-indent-20 {
1220
+ text-indent: 5rem;
1267
1221
  }
1268
1222
 
1269
- .qti-width-0p5 {
1270
- width: 0.125rem;
1223
+ .qti-text-indent-24 {
1224
+ text-indent: 6rem;
1271
1225
  }
1272
1226
 
1273
- .qti-width-1 {
1274
- width: 0.25rem;
1227
+ .qti-text-indent-28 {
1228
+ text-indent: 7rem;
1275
1229
  }
1276
1230
 
1277
- .qti-width-1p5 {
1278
- width: 0.375rem;
1231
+ .qti-text-indent-32 {
1232
+ text-indent: 8rem;
1279
1233
  }
1280
1234
 
1281
- .qti-width-2 {
1282
- width: 0.5rem;
1235
+ /* =================
1236
+ List Style styles
1237
+ ================= */
1238
+
1239
+ .qti-list-style-type-none {
1240
+ list-style-type: none;
1283
1241
  }
1284
1242
 
1285
- .qti-width-2p5 {
1286
- width: 0.625rem;
1243
+ .qti-list-style-type-disc {
1244
+ list-style-type: disc;
1287
1245
  }
1288
1246
 
1289
- .qti-width-3 {
1290
- width: 0.75rem;
1247
+ .qti-list-style-type-circle {
1248
+ list-style-type: circle;
1291
1249
  }
1292
1250
 
1293
- .qti-width-3p5 {
1294
- width: 0.875rem;
1251
+ .qti-list-style-type-square {
1252
+ list-style-type: square;
1295
1253
  }
1296
1254
 
1297
- .qti-width-4 {
1298
- width: 1rem;
1255
+ .qti-list-style-type-decimal {
1256
+ list-style-type: decimal;
1299
1257
  }
1300
1258
 
1301
- .qti-width-5 {
1302
- width: 1.25rem;
1259
+ .qti-list-style-type-decimal-leading-zero {
1260
+ list-style-type: decimal-leading-zero;
1303
1261
  }
1304
1262
 
1305
- .qti-width-6 {
1306
- width: 1.5rem;
1263
+ .qti-list-style-type-lower-alpha {
1264
+ list-style-type: lower-alpha;
1307
1265
  }
1308
1266
 
1309
- .qti-width-7 {
1310
- width: 1.75rem;
1267
+ .qti-list-style-type-upper-alpha {
1268
+ list-style-type: upper-alpha;
1311
1269
  }
1312
1270
 
1313
- .qti-width-8 {
1314
- width: 2rem;
1271
+ .qti-list-style-type-lower-roman {
1272
+ list-style-type: lower-roman;
1315
1273
  }
1316
1274
 
1317
- .qti-width-9 {
1318
- width: 2.25rem;
1275
+ .qti-list-style-type-upper-roman {
1276
+ list-style-type: upper-roman;
1319
1277
  }
1320
1278
 
1321
- .qti-width-10 {
1322
- width: 2.5rem;
1279
+ .qti-list-style-type-lower-latin {
1280
+ list-style-type: lower-latin;
1323
1281
  }
1324
1282
 
1325
- .qti-width-11 {
1326
- width: 2.75rem;
1283
+ .qti-list-style-type-upper-latin {
1284
+ list-style-type: upper-latin;
1327
1285
  }
1328
1286
 
1329
- .qti-width-12 {
1330
- width: 3rem;
1287
+ .qti-list-style-type-lower-greek {
1288
+ list-style-type: lower-greek;
1331
1289
  }
1332
1290
 
1333
- .qti-width-14 {
1334
- width: 3.5rem;
1291
+ .qti-list-style-type-arabic-indic {
1292
+ list-style-type: arabic-indic;
1335
1293
  }
1336
1294
 
1337
- .qti-width-16 {
1338
- width: 4rem;
1295
+ .qti-list-style-type-armenian {
1296
+ list-style-type: armenian;
1339
1297
  }
1340
1298
 
1341
- .qti-width-20 {
1342
- width: 5rem;
1299
+ .qti-list-style-type-lower-armenian {
1300
+ list-style-type: lower-armenian;
1343
1301
  }
1344
1302
 
1345
- .qti-width-24 {
1346
- width: 6rem;
1303
+ .qti-list-style-type-upper-armenian {
1304
+ list-style-type: upper-armenian;
1347
1305
  }
1348
1306
 
1349
- .qti-width-28 {
1350
- width: 7rem;
1307
+ .qti-list-style-type-bengali {
1308
+ list-style-type: bengali;
1351
1309
  }
1352
1310
 
1353
- .qti-width-32 {
1354
- width: 8rem;
1311
+ .qti-list-style-type-cambodian {
1312
+ list-style-type: cambodian;
1355
1313
  }
1356
1314
 
1357
- .qti-width-36 {
1358
- width: 9rem;
1315
+ .qti-list-style-type-simp-chinese-formal {
1316
+ list-style-type: simp-chinese-formal;
1359
1317
  }
1360
1318
 
1361
- .qti-width-40 {
1362
- width: 10rem;
1319
+ .qti-list-style-type-simp-chinese-informal {
1320
+ list-style-type: simp-chinese-informal;
1363
1321
  }
1364
1322
 
1365
- .qti-width-44 {
1366
- width: 11rem;
1323
+ .qti-list-style-type-trad-chinese-formal {
1324
+ list-style-type: trad-chinese-formal;
1367
1325
  }
1368
1326
 
1369
- .qti-width-48 {
1370
- width: 12rem;
1327
+ .qti-list-style-type-trad-chinese-informal {
1328
+ list-style-type: trad-chinese-informal;
1371
1329
  }
1372
1330
 
1373
- .qti-width-52 {
1374
- width: 13rem;
1331
+ .qti-list-style-type-cjk-ideographic {
1332
+ list-style-type: cjk-ideographic;
1375
1333
  }
1376
1334
 
1377
- .qti-width-56 {
1378
- width: 14rem;
1335
+ .qti-list-style-type-cjk-heavenly-stem {
1336
+ list-style-type: cjk-heavenly-stem;
1379
1337
  }
1380
1338
 
1381
- .qti-width-60 {
1382
- width: 15rem;
1339
+ .qti-list-style-type-cjk-earthly-branch {
1340
+ list-style-type: cjk-earthly-branch;
1383
1341
  }
1384
1342
 
1385
- .qti-width-64 {
1386
- width: 16rem;
1343
+ .qti-list-style-type-devanagari {
1344
+ list-style-type: devanagari;
1387
1345
  }
1388
1346
 
1389
- .qti-width-72 {
1390
- width: 18rem;
1347
+ .qti-list-style-type-ethiopic-halehame-ti-er {
1348
+ list-style-type: ethiopic-halehame-ti-er;
1391
1349
  }
1392
1350
 
1393
- .qti-width-80 {
1394
- width: 20rem;
1351
+ .qti-list-style-type-ethiopic-halehame-ti-et {
1352
+ list-style-type: ethiopic-halehame-ti-et;
1395
1353
  }
1396
1354
 
1397
- .qti-width-96 {
1398
- width: 24rem;
1355
+ .qti-list-style-type-ethiopic-halehame-am {
1356
+ list-style-type: ethiopic-halehame-am;
1399
1357
  }
1400
1358
 
1401
- .qti-width-auto {
1402
- width: auto;
1359
+ .qti-list-style-type-ethiopic-halehame {
1360
+ list-style-type: ethiopic-halehame;
1403
1361
  }
1404
1362
 
1405
- .qti-width-1-2 {
1406
- width: 50%;
1363
+ .qti-list-style-type-georgian {
1364
+ list-style-type: georgian;
1407
1365
  }
1408
1366
 
1409
- .qti-width-1-3 {
1410
- width: 33.3333%;
1367
+ .qti-list-style-type-gujarati {
1368
+ list-style-type: gujarati;
1411
1369
  }
1412
1370
 
1413
- .qti-width-2-3 {
1414
- width: 66.6667%;
1371
+ .qti-list-style-type-gurmukhi {
1372
+ list-style-type: gurmukhi;
1415
1373
  }
1416
1374
 
1417
- .qti-width-1-4 {
1418
- width: 25%;
1375
+ .qti-list-style-type-hangul {
1376
+ list-style-type: hangul;
1419
1377
  }
1420
1378
 
1421
- .qti-width-2-4 {
1422
- width: 50%;
1379
+ .qti-list-style-type-hangul-consonant {
1380
+ list-style-type: hangul-consonant;
1423
1381
  }
1424
1382
 
1425
- .qti-width-3-4 {
1426
- width: 75%;
1383
+ .qti-list-style-type-hebrew {
1384
+ list-style-type: hebrew;
1427
1385
  }
1428
1386
 
1429
- .qti-width-1-5 {
1430
- width: 20%;
1387
+ .qti-list-style-type-hiragana {
1388
+ list-style-type: hiragana;
1431
1389
  }
1432
1390
 
1433
- .qti-width-2-5 {
1434
- width: 40%;
1391
+ .qti-list-style-type-hiragana-iroha {
1392
+ list-style-type: hiragana-iroha;
1435
1393
  }
1436
1394
 
1437
- .qti-width-3-5 {
1438
- width: 60%;
1395
+ .qti-list-style-type-khmer {
1396
+ list-style-type: khmer;
1439
1397
  }
1440
1398
 
1441
- .qti-width-4-5 {
1442
- width: 80%;
1399
+ .qti-list-style-type-korean-hangul-formal {
1400
+ list-style-type: korean-hangul-formal;
1443
1401
  }
1444
1402
 
1445
- .qti-width-1-6 {
1446
- width: 16.6667%;
1403
+ .qti-list-style-type-korean-hanja-formal {
1404
+ list-style-type: korean-hanja-formal;
1447
1405
  }
1448
1406
 
1449
- .qti-width-2-6 {
1450
- width: 33.3333%;
1407
+ .qti-list-style-type-korean-hanja-informal {
1408
+ list-style-type: korean-hanja-informal;
1451
1409
  }
1452
1410
 
1453
- .qti-width-3-6 {
1454
- width: 50%;
1411
+ .qti-list-style-type-lao {
1412
+ list-style-type: lao;
1455
1413
  }
1456
1414
 
1457
- .qti-width-4-6 {
1458
- width: 66.6667%;
1415
+ .qti-list-style-type-malayalam {
1416
+ list-style-type: malayalam;
1459
1417
  }
1460
1418
 
1461
- .qti-width-5-6 {
1462
- width: 83.3333%;
1419
+ .qti-list-style-type-mongolian {
1420
+ list-style-type: mongolian;
1463
1421
  }
1464
1422
 
1465
- .qti-width-1-12 {
1466
- width: 8.3333%;
1423
+ .qti-list-style-type-myanmar {
1424
+ list-style-type: myanmar;
1467
1425
  }
1468
1426
 
1469
- .qti-width-2-12 {
1470
- width: 16.6667%;
1427
+ .qti-list-style-type-oriya {
1428
+ list-style-type: oriya;
1471
1429
  }
1472
1430
 
1473
- .qti-width-3-12 {
1474
- width: 25%;
1431
+ .qti-list-style-type-persian {
1432
+ list-style-type: persian;
1475
1433
  }
1476
1434
 
1477
- .qti-width-4-12 {
1478
- width: 33.3333%;
1435
+ .qti-list-style-type-thai {
1436
+ list-style-type: thai;
1479
1437
  }
1480
1438
 
1481
- .qti-width-5-12 {
1482
- width: 41.6667%;
1439
+ .qti-list-style-type-tibetan {
1440
+ list-style-type: tibetan;
1483
1441
  }
1484
1442
 
1485
- .qti-width-6-12 {
1486
- width: 50%;
1443
+ .qti-list-style-type-telugu {
1444
+ list-style-type: telugu;
1487
1445
  }
1488
1446
 
1489
- .qti-width-7-12 {
1490
- width: 58.3333%;
1447
+ .qti-list-style-type-urdu {
1448
+ list-style-type: urdu;
1491
1449
  }
1492
1450
 
1493
- .qti-width-8-12 {
1494
- width: 66.6667%;
1495
- }
1451
+ /* =========================
1452
+ Other QTI 3 Presentation Utilities
1453
+ ========================= */
1496
1454
 
1497
- .qti-width-9-12 {
1498
- width: 75%;
1455
+ .qti-bordered {
1456
+ border: 1px solid var(--table-border-color);
1499
1457
  }
1500
1458
 
1501
- .qti-width-10-12 {
1502
- width: 83.3333%;
1459
+ .qti-underline {
1460
+ text-decoration: underline;
1461
+ text-decoration-color: var(--foreground);
1503
1462
  }
1504
1463
 
1505
- .qti-width-11-12 {
1506
- width: 91.6667%;
1464
+ .qti-italic {
1465
+ font-style: italic;
1507
1466
  }
1508
1467
 
1509
- .qti-width-full,
1510
- .qti-fullwidth {
1511
- width: 100%;
1468
+ .qti-well {
1469
+ min-height: 20px;
1470
+ padding: 19px;
1471
+ margin-bottom: 20px;
1472
+ background-color: var(--well-bg);
1473
+ border: var(--well-border);
1474
+ border-radius: 4px;
1475
+ box-shadow: var(--well-box-shadow);
1512
1476
  }
1513
1477
 
1514
- /* ==================
1515
- Text Indent styles
1516
- ================== */
1478
+ /* Set writing-mode to vertical-rl
1479
+ Typical for CJK vertical text */
1517
1480
 
1518
- .qti-text-indent-0 {
1519
- text-indent: 0;
1481
+ .qti-writing-mode-vertical-rl {
1482
+ writing-mode: vertical-rl;
1520
1483
  }
1521
1484
 
1522
- .qti-text-indent-px {
1523
- text-indent: 1px;
1524
- }
1485
+ /* Set writing-mode to vertical-lr
1486
+ Typical for Mongolian vertical text */
1525
1487
 
1526
- .qti-text-indent-0p5 {
1527
- text-indent: 0.125rem;
1488
+ .qti-writing-mode-vertical-lr {
1489
+ writing-mode: vertical-lr;
1528
1490
  }
1529
1491
 
1530
- .qti-text-indent-1 {
1531
- text-indent: 0.25rem;
1532
- }
1492
+ /* Set writing-mode to horizontal-tb
1493
+ Browser default */
1533
1494
 
1534
- .qti-text-indent-1p5 {
1535
- text-indent: 0.375rem;
1495
+ .qti-writing-mode-horizontal-tb {
1496
+ writing-mode: horizontal-tb;
1536
1497
  }
1537
1498
 
1538
- .qti-text-indent-2 {
1539
- text-indent: 0.5rem;
1540
- }
1499
+ /* Float an element left */
1541
1500
 
1542
- .qti-text-indent-2p5 {
1543
- text-indent: 0.625rem;
1501
+ .qti-float-left {
1502
+ float: left;
1544
1503
  }
1545
1504
 
1546
- .qti-text-indent-3 {
1547
- text-indent: 0.75rem;
1548
- }
1505
+ /* Float an element right */
1549
1506
 
1550
- .qti-text-indent-3p5 {
1551
- text-indent: 0.875rem;
1507
+ .qti-float-right {
1508
+ float: right;
1552
1509
  }
1553
1510
 
1554
- .qti-text-indent-4 {
1555
- text-indent: 1rem;
1556
- }
1511
+ /* Remove a float */
1557
1512
 
1558
- .qti-text-indent-5 {
1559
- text-indent: 1.25rem;
1513
+ .qti-float-none {
1514
+ float: none;
1560
1515
  }
1561
1516
 
1562
- .qti-text-indent-6 {
1563
- text-indent: 1.5rem;
1517
+ /* Clearfix Hack to apply to a container of
1518
+ floated content that overflows the container. */
1519
+
1520
+ .qti-float-clearfix::after {
1521
+ content: '';
1522
+ clear: both;
1523
+ display: table;
1564
1524
  }
1565
1525
 
1566
- .qti-text-indent-7 {
1567
- text-indent: 1.75rem;
1526
+ .qti-float-clear-left
1527
+ .qti-float-clear-right
1528
+ .qti-float-clear-both
1529
+
1530
+ /* Set text-orientation to upright */
1531
+ .qti-text-orientation-upright {
1532
+ text-orientation: upright;
1568
1533
  }
1569
1534
 
1570
- .qti-text-indent-8 {
1571
- text-indent: 2rem;
1572
- }
1535
+ @layer qti-base {
1536
+ .qti-layout-row {
1537
+ display: flex;
1538
+ flex-wrap: wrap;
1539
+ width: 100%;
1540
+ gap: 2.1276595745%;
1541
+ }
1542
+
1543
+ .qti-layout-row [class*='qti-layout-col']:not(:empty) {
1544
+ box-sizing: border-box;
1545
+ }
1546
+
1547
+ .qti-layout-row [class*='qti-layout-col']:empty {
1548
+ width: 0;
1549
+ overflow: hidden; /* to fully collapse if there\u2019s padding or borders */
1550
+ }
1551
+
1552
+ .qti-layout-col1 {
1553
+ width: 6.3829787234%;
1554
+ }
1555
+
1556
+ .qti-layout-col2 {
1557
+ width: 14.8936170213%;
1558
+ }
1559
+
1560
+ .qti-layout-col3 {
1561
+ width: 23.4042553191%;
1562
+ }
1563
+
1564
+ .qti-layout-col4 {
1565
+ width: 31.914893617%;
1566
+ }
1567
+
1568
+ .qti-layout-col5 {
1569
+ width: 40.4255319149%;
1570
+ }
1571
+
1572
+ .qti-layout-col6 {
1573
+ width: 48.9361702128%;
1574
+ }
1575
+
1576
+ .qti-layout-col7 {
1577
+ width: 57.4468085106%;
1578
+ }
1579
+
1580
+ .qti-layout-col8 {
1581
+ width: 65.9574468085%;
1582
+ }
1583
+
1584
+ .qti-layout-col9 {
1585
+ width: 74.4680851064%;
1586
+ }
1587
+
1588
+ .qti-layout-col10 {
1589
+ width: 82.9787234043%;
1590
+ }
1591
+
1592
+ .qti-layout-col11 {
1593
+ width: 91.4893617021%;
1594
+ }
1595
+
1596
+ .qti-layout-col12 {
1597
+ width: 100%;
1598
+ }
1599
+
1600
+ .qti-layout-offset1 {
1601
+ margin-left: 8.5106382979%;
1602
+ }
1603
+
1604
+ .qti-layout-offset2 {
1605
+ margin-left: 17.0212765957%;
1606
+ }
1607
+
1608
+ .qti-layout-offset3 {
1609
+ margin-left: 25.5319148936%;
1610
+ }
1573
1611
 
1574
- .qti-text-indent-12 {
1575
- text-indent: 3rem;
1576
- }
1612
+ .qti-layout-offset4 {
1613
+ margin-left: 34.0425531915%;
1614
+ }
1577
1615
 
1578
- .qti-text-indent-16 {
1579
- text-indent: 4rem;
1580
- }
1616
+ .qti-layout-offset5 {
1617
+ margin-left: 42.5531914894%;
1618
+ }
1581
1619
 
1582
- .qti-text-indent-20 {
1583
- text-indent: 5rem;
1584
- }
1620
+ .qti-layout-offset6 {
1621
+ margin-left: 51.0638297872%;
1622
+ }
1585
1623
 
1586
- .qti-text-indent-24 {
1587
- text-indent: 6rem;
1588
- }
1624
+ .qti-layout-offset7 {
1625
+ margin-left: 59.5744680851%;
1626
+ }
1589
1627
 
1590
- .qti-text-indent-28 {
1591
- text-indent: 7rem;
1592
- }
1628
+ .qti-layout-offset8 {
1629
+ margin-left: 68.085106383%;
1630
+ }
1593
1631
 
1594
- .qti-text-indent-32 {
1595
- text-indent: 8rem;
1596
- }
1632
+ .qti-layout-offset9 {
1633
+ margin-left: 76.5957446809%;
1634
+ }
1597
1635
 
1598
- /* =================
1599
- List Style styles
1600
- ================= */
1636
+ .qti-layout-offset10 {
1637
+ margin-left: 85.1063829787%;
1638
+ }
1601
1639
 
1602
- .qti-list-style-type-none {
1603
- list-style-type: none;
1604
- }
1640
+ .qti-layout-offset11 {
1641
+ margin-left: 93.6170212766%;
1642
+ }
1605
1643
 
1606
- .qti-list-style-type-disc {
1607
- list-style-type: disc;
1608
- }
1644
+ .qti-layout-offset12 {
1645
+ margin-left: 102.1276595745%;
1646
+ }
1609
1647
 
1610
- .qti-list-style-type-circle {
1611
- list-style-type: circle;
1648
+ @media (width <= 767px) {
1649
+ [class*='qti-layout-col'] {
1650
+ width: 100%;
1651
+ }
1652
+ }
1612
1653
  }
1613
1654
 
1614
- .qti-list-style-type-square {
1615
- list-style-type: square;
1616
- }
1655
+ :root,
1656
+ :host {
1657
+ /* Active colors */
1658
+ --qti-bg-active: #ffecec;
1659
+ --qti-border-active: #f86d70;
1617
1660
 
1618
- .qti-list-style-type-decimal {
1619
- list-style-type: decimal;
1620
- }
1661
+ /* Correct colors */
1662
+ --qti-correct-light: #c8e6c9;
1663
+ --qti-correct: #66bb6a;
1621
1664
 
1622
- .qti-list-style-type-decimal-leading-zero {
1623
- list-style-type: decimal-leading-zero;
1624
- }
1665
+ /** Partially correct colors */
1666
+ --qti-partially-correct-light: #fff3e0;
1667
+ --qti-partially-correct: #ffeb3b;
1625
1668
 
1626
- .qti-list-style-type-lower-alpha {
1627
- list-style-type: lower-alpha;
1628
- }
1669
+ /* Incorrect colors */
1670
+ --qti-incorrect-light: #ef9a9a;
1671
+ --qti-incorrect: #ef5350;
1629
1672
 
1630
- .qti-list-style-type-upper-alpha {
1631
- list-style-type: upper-alpha;
1632
- }
1673
+ /* Validation colors */
1674
+ --qti-validation-error-bg: #fffbeb;
1675
+ --qti-validation-text: #92400e;
1633
1676
 
1634
- .qti-list-style-type-lower-roman {
1635
- list-style-type: lower-roman;
1636
- }
1677
+ /* Gap size */
1678
+ --qti-gap-size: 1rem;
1637
1679
 
1638
- .qti-list-style-type-upper-roman {
1639
- list-style-type: upper-roman;
1640
- }
1680
+ /* Background colors */
1681
+ --qti-bg: white;
1682
+ --qti-hover-bg: #f9fafb;
1641
1683
 
1642
- .qti-list-style-type-lower-latin {
1643
- list-style-type: lower-latin;
1644
- }
1684
+ /* Light theme colors */
1685
+ --qti-light-bg-active: #f0f0f0; /* Light gray */
1686
+ --qti-light-border-active: #d0d0d0; /* Medium gray */
1645
1687
 
1646
- .qti-list-style-type-upper-latin {
1647
- list-style-type: upper-latin;
1648
- }
1688
+ /* Dark theme colors */
1689
+ --qti-dark-bg-active: #1f2937; /* Dark gray */
1690
+ --qti-dark-border-active: #64748b; /* Medium gray */
1649
1691
 
1650
- .qti-list-style-type-lower-greek {
1651
- list-style-type: lower-greek;
1652
- }
1692
+ /* Disabled colors */
1693
+ --qti-disabled-bg: #f3f4f6;
1694
+ --qti-disabled-color: #45484f;
1653
1695
 
1654
- .qti-list-style-type-arabic-indic {
1655
- list-style-type: arabic-indic;
1656
- }
1696
+ /* Border properties */
1697
+ --qti-border-thickness: 2px;
1698
+ --qti-border-style: solid;
1699
+ --qti-border-color: #c6cad0;
1700
+ --qti-border-radius: 0.3rem;
1701
+ --qti-drop-border-radius: calc(var(--qti-border-radius) + var(--qti-border-thickness));
1657
1702
 
1658
- .qti-list-style-type-armenian {
1659
- list-style-type: armenian;
1660
- }
1703
+ /* Focus & active states */
1704
+ --qti-focus-border-width: 5px;
1705
+ --qti-focus-color: #bddcff7e;
1661
1706
 
1662
- .qti-list-style-type-lower-armenian {
1663
- list-style-type: lower-armenian;
1664
- }
1707
+ /* Class-specific variables */
1665
1708
 
1666
- .qti-list-style-type-upper-armenian {
1667
- list-style-type: upper-armenian;
1668
- }
1709
+ /* Form elements */
1710
+ --qti-form-size: 1rem;
1669
1711
 
1670
- .qti-list-style-type-bengali {
1671
- list-style-type: bengali;
1672
- }
1712
+ /* Order buttons */
1713
+ --qti-order-size: 2rem;
1673
1714
 
1674
- .qti-list-style-type-cambodian {
1675
- list-style-type: cambodian;
1676
- }
1715
+ /* Generic padding for all elements */
1716
+ --qti-padding-vertical: 0.5rem; /* py-2 */
1717
+ --qti-padding-horizontal: 0.5rem; /* px-2 */
1677
1718
 
1678
- .qti-list-style-type-simp-chinese-formal {
1679
- list-style-type: simp-chinese-formal;
1719
+ /* Dropzones */
1720
+ --qti-dropzone-padding: 0rem;
1680
1721
  }
1681
1722
 
1682
- .qti-list-style-type-simp-chinese-informal {
1683
- list-style-type: simp-chinese-informal;
1684
- }
1723
+ /* SVG masks and backgrounds */
1685
1724
 
1686
- .qti-list-style-type-trad-chinese-formal {
1687
- list-style-type: trad-chinese-formal;
1725
+ .chevron {
1726
+ 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")
1727
+ no-repeat center right 6px;
1688
1728
  }
1689
1729
 
1690
- .qti-list-style-type-trad-chinese-informal {
1691
- list-style-type: trad-chinese-informal;
1730
+ .handle {
1731
+ background-image: radial-gradient(
1732
+ circle at center,
1733
+ rgb(0 0 0 / 10%) 0,
1734
+ rgb(0 0 0 / 20%) 2px,
1735
+ rgb(255 255 255 / 0%) 2px,
1736
+ rgb(255 255 255 / 0%) 100%
1737
+ );
1738
+ background-repeat: repeat-y;
1739
+ background-position: left center;
1740
+ background-size: 14px 8px;
1692
1741
  }
1693
1742
 
1694
- .qti-list-style-type-cjk-ideographic {
1695
- list-style-type: cjk-ideographic;
1743
+ .check-mask {
1744
+ -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");
1745
+ 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");
1696
1746
  }
1697
1747
 
1698
- .qti-list-style-type-cjk-heavenly-stem {
1699
- list-style-type: cjk-heavenly-stem;
1700
- }
1748
+ /*
1749
+ Following are classes that can be applied to elements and element states, so they are not used directly
1750
+ The @apply directive is used to apply these classes to elements
1751
+ */
1701
1752
 
1702
- .qti-list-style-type-cjk-earthly-branch {
1703
- list-style-type: cjk-earthly-branch;
1704
- }
1753
+ /* Apply .bordered to an element */
1705
1754
 
1706
- .qti-list-style-type-devanagari {
1707
- list-style-type: devanagari;
1755
+ .bordered {
1756
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
1757
+ outline: none;
1708
1758
  }
1709
1759
 
1710
- .qti-list-style-type-ethiopic-halehame-ti-er {
1711
- list-style-type: ethiopic-halehame-ti-er;
1712
- }
1760
+ /* Apply .form rules for checkbox and radiobutton */
1713
1761
 
1714
- .qti-list-style-type-ethiopic-halehame-ti-et {
1715
- list-style-type: ethiopic-halehame-ti-et;
1716
- }
1762
+ .form {
1717
1763
 
1718
- .qti-list-style-type-ethiopic-halehame-am {
1719
- list-style-type: ethiopic-halehame-am;
1764
+ /* background-color: var(--qti-bg); */
1765
+ display: grid;
1766
+ place-content: center;
1767
+ width: var(--qti-form-size);
1768
+ height: var(--qti-form-size);
1769
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
1770
+ outline: none;
1720
1771
  }
1721
1772
 
1722
- .qti-list-style-type-ethiopic-halehame {
1723
- list-style-type: ethiopic-halehame;
1724
- }
1773
+ /* Apply .button rules for button-like elements, such as drags and buttons */
1725
1774
 
1726
- .qti-list-style-type-georgian {
1727
- list-style-type: georgian;
1728
- }
1775
+ .button {
1729
1776
 
1730
- .qti-list-style-type-gujarati {
1731
- list-style-type: gujarati;
1777
+ border-radius: var(--qti-border-radius);
1778
+ padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
1779
+ background: var(--qti-bg);
1780
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
1781
+ outline: none;
1732
1782
  }
1733
1783
 
1734
- .qti-list-style-type-gurmukhi {
1735
- list-style-type: gurmukhi;
1736
- }
1784
+ /* Apply .select for the select dropdown element */
1737
1785
 
1738
- .qti-list-style-type-hangul {
1739
- list-style-type: hangul;
1740
- }
1786
+ .select {
1741
1787
 
1742
- .qti-list-style-type-hangul-consonant {
1743
- list-style-type: hangul-consonant;
1788
+ border-radius: var(--qti-border-radius);
1789
+ position: relative;
1790
+ -webkit-appearance: none;
1791
+ -moz-appearance: none;
1792
+ appearance: none;
1793
+ padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
1794
+ padding-right: calc(var(--qti-padding-horizontal) + 1.5rem); /* 1.5rem for the chevron */ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color); outline: none; 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")
1795
+ no-repeat center right 6px;
1744
1796
  }
1745
1797
 
1746
- .qti-list-style-type-hebrew {
1747
- list-style-type: hebrew;
1748
- }
1798
+ /* Apply .dropdown-trigger for button trigger controls */
1749
1799
 
1750
- .qti-list-style-type-hiragana {
1751
- list-style-type: hiragana;
1752
- }
1800
+ .dropdown-trigger {
1753
1801
 
1754
- .qti-list-style-type-hiragana-iroha {
1755
- list-style-type: hiragana-iroha;
1802
+ display: inline-flex;
1803
+ align-items: center;
1804
+ justify-content: space-between;
1805
+ gap: 0.5rem;
1806
+ border-radius: var(--qti-border-radius);
1807
+ padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
1808
+ background: var(--qti-bg);
1809
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
1810
+ outline: none;
1756
1811
  }
1757
1812
 
1758
- .qti-list-style-type-khmer {
1759
- list-style-type: khmer;
1760
- }
1813
+ /* Apply .dropdown-menu for popover and listbox containers */
1761
1814
 
1762
- .qti-list-style-type-korean-hangul-formal {
1763
- list-style-type: korean-hangul-formal;
1815
+ .dropdown-menu {
1816
+ background: var(--qti-bg);
1817
+ border-radius: var(--qti-border-radius);
1818
+ padding: 0.25rem;
1819
+ box-sizing: border-box;
1820
+ overflow: auto;
1821
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
1822
+ outline: none;
1764
1823
  }
1765
1824
 
1766
- .qti-list-style-type-korean-hanja-formal {
1767
- list-style-type: korean-hanja-formal;
1768
- }
1825
+ /* Apply .dropdown-option for listbox option rows */
1769
1826
 
1770
- .qti-list-style-type-korean-hanja-informal {
1771
- list-style-type: korean-hanja-informal;
1827
+ .dropdown-option {
1828
+ display: flex;
1829
+ align-items: center;
1830
+ width: 100%;
1831
+ min-height: 2.25rem;
1832
+ box-sizing: border-box;
1833
+ padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
1834
+ border: 0;
1835
+ border-radius: calc(var(--qti-border-radius) - 2px);
1836
+ background: transparent;
1837
+ text-align: left;
1838
+ font: inherit;
1839
+ color: inherit;
1840
+ cursor: pointer;
1841
+ white-space: nowrap;
1842
+ overflow: hidden;
1843
+ text-overflow: ellipsis;
1772
1844
  }
1773
1845
 
1774
- .qti-list-style-type-lao {
1775
- list-style-type: lao;
1776
- }
1846
+ /* Apply .dropdown-icon for trigger caret indicators */
1777
1847
 
1778
- .qti-list-style-type-malayalam {
1779
- list-style-type: malayalam;
1848
+ .dropdown-icon {
1849
+ display: inline-flex;
1850
+ align-items: center;
1851
+ justify-content: center;
1852
+ flex: 0 0 auto;
1853
+ transition: transform 150ms ease;
1854
+ transform-origin: 50% 50%;
1855
+ color: var(--qti-border-color);
1856
+ line-height: 1;
1780
1857
  }
1781
1858
 
1782
- .qti-list-style-type-mongolian {
1783
- list-style-type: mongolian;
1784
- }
1859
+ /* Apply .dropdown-icon-open for expanded trigger caret indicators */
1785
1860
 
1786
- .qti-list-style-type-myanmar {
1787
- list-style-type: myanmar;
1861
+ .dropdown-icon-open {
1862
+ transform: rotate(180deg);
1863
+ color: var(--qti-border-active);
1788
1864
  }
1789
1865
 
1790
- .qti-list-style-type-oriya {
1791
- list-style-type: oriya;
1792
- }
1866
+ /* Apply .text for the input text and textarea */
1793
1867
 
1794
- .qti-list-style-type-persian {
1795
- list-style-type: persian;
1868
+ .text {
1869
+ border-radius: 0;
1870
+ cursor: text;
1871
+ padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
1872
+ background: var(--qti-bg);
1873
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
1874
+ outline: none;
1796
1875
  }
1797
1876
 
1798
- .qti-list-style-type-thai {
1799
- list-style-type: thai;
1800
- }
1877
+ /* Apply .spot for hotspot shapes */
1801
1878
 
1802
- .qti-list-style-type-tibetan {
1803
- list-style-type: tibetan;
1804
- }
1879
+ .spot {
1805
1880
 
1806
- .qti-list-style-type-telugu {
1807
- list-style-type: telugu;
1881
+ width: 100%;
1882
+ height: 100%;
1883
+ background-color: transparent;
1884
+ margin: 0 !important;
1885
+ padding: 0 !important;
1886
+ border: 0 !important;
1887
+ box-sizing: border-box !important;
1888
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
1889
+ outline: none;
1808
1890
  }
1809
1891
 
1810
- .qti-list-style-type-urdu {
1811
- list-style-type: urdu;
1812
- }
1892
+ /* Apply .point for circular small hotspots */
1813
1893
 
1814
- /* =========================
1815
- Other QTI 3 Presentation Utilities
1816
- ========================= */
1894
+ .point {
1817
1895
 
1818
- .qti-bordered {
1819
- border: 1px solid var(--table-border-color);
1896
+ box-sizing: border-box;
1897
+ border-radius: 100%;
1898
+ border: 1px solid white;
1899
+ background-color: black;
1900
+ opacity: 0.5;
1901
+ padding: 0;
1902
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
1903
+ outline: none;
1820
1904
  }
1821
1905
 
1822
- .qti-underline {
1823
- text-decoration: underline;
1824
- text-decoration-color: var(--foreground);
1825
- }
1906
+ /* Apply .drag for draggable elements */
1826
1907
 
1827
- .qti-italic {
1828
- font-style: italic;
1829
- }
1908
+ .drag {
1830
1909
 
1831
- .qti-well {
1832
- min-height: 20px;
1833
- padding: 19px;
1834
- margin-bottom: 20px;
1835
- background-color: var(--well-bg);
1836
- border: var(--well-border);
1837
- border-radius: 4px;
1838
- box-shadow: var(--well-box-shadow);
1839
- }
1910
+ box-sizing: border-box;
1911
+ transition:
1912
+ transform 200ms ease-out,
1913
+ box-shadow 200ms ease-out,
1914
+ rotate 200ms ease-out;
1915
+ cursor: grab;
1916
+ background-color: var(--qti-bg);
1917
+ padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
1918
+ border-radius: var(--qti-border-radius);
1840
1919
 
1841
- /* Set writing-mode to vertical-rl
1842
- Typical for CJK vertical text */
1920
+ /* padding-left: calc(var(--qti-padding-horizontal) + 0.5rem) !important; */
1843
1921
 
1844
- .qti-writing-mode-vertical-rl {
1845
- writing-mode: vertical-rl;
1846
- }
1922
+ /* 1.5rem for the drag */
1847
1923
 
1848
- /* Set writing-mode to vertical-lr
1849
- Typical for Mongolian vertical text */
1924
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
1850
1925
 
1851
- .qti-writing-mode-vertical-lr {
1852
- writing-mode: vertical-lr;
1926
+ outline: none;
1853
1927
  }
1854
1928
 
1855
- /* Set writing-mode to horizontal-tb
1856
- Browser default */
1929
+ /* Apply .dragging for the dragging state of a draggable element */
1857
1930
 
1858
- .qti-writing-mode-horizontal-tb {
1859
- writing-mode: horizontal-tb;
1931
+ .dragging {
1932
+ pointer-events: none;
1933
+ rotate: -2deg;
1934
+ box-shadow:
1935
+ 0 8px 12px rgb(0 0 0 / 20%),
1936
+ 0 4px 8px rgb(0 0 0 / 10%);
1860
1937
  }
1861
1938
 
1862
- /* Float an element left */
1939
+ /* Apply .drop for an element where you can drop the draggable */
1863
1940
 
1864
- .qti-float-left {
1865
- float: left;
1941
+ .drop {
1942
+ /* @apply bordered; */
1943
+ border: var(--qti-border-thickness) dashed var(--qti-border-color);
1944
+ background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="7" stroke="%23CCCCCC" stroke-width="1" fill="transparent" /></svg>')
1945
+ center no-repeat;
1946
+ border-radius: var(--qti-border-radius);
1947
+ position: relative;
1948
+ background-color: var(--qti-bg);
1866
1949
  }
1867
1950
 
1868
- /* Float an element right */
1951
+ /* Apply .dropping for an indicator where you can drop the draggable */
1869
1952
 
1870
- .qti-float-right {
1871
- float: right;
1953
+ .dropping {
1954
+ background-color: var(--qti-bg-active);
1872
1955
  }
1873
1956
 
1874
- /* Remove a float */
1875
-
1876
- .qti-float-none {
1877
- float: none;
1878
- }
1957
+ /* Apply .order for a small circular button */
1879
1958
 
1880
- /* Clearfix Hack to apply to a container of
1881
- floated content that overflows the container. */
1959
+ .order {
1882
1960
 
1883
- .qti-float-clearfix::after {
1884
- content: '';
1885
- clear: both;
1886
- display: table;
1887
- }
1961
+ display: grid;
1962
+ place-content: center;
1888
1963
 
1889
- .qti-float-clear-left
1890
- .qti-float-clear-right
1891
- .qti-float-clear-both
1892
-
1893
- /* Set text-orientation to upright */
1894
- .qti-text-orientation-upright {
1895
- text-orientation: upright;
1964
+ /* background-color: var(--qti-bg-active); */
1965
+ box-sizing: border-box;
1966
+ border-radius: 100%;
1967
+ width: var(--qti-order-size);
1968
+ height: var(--qti-order-size);
1969
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
1970
+ outline: none;
1896
1971
  }
1897
1972
 
1898
- @layer qti-base {
1899
- .qti-layout-row {
1900
- display: flex;
1901
- flex-wrap: wrap;
1902
- width: 100%;
1903
- gap: 2.1276595745%;
1904
- }
1905
-
1906
- .qti-layout-row [class*='qti-layout-col']:not(:empty) {
1907
- box-sizing: border-box;
1908
- }
1973
+ /* Apply .check-size for radio and checkbox size */
1909
1974
 
1910
- .qti-layout-row [class*='qti-layout-col']:empty {
1911
- width: 0;
1912
- overflow: hidden; /* to fully collapse if there\u2019s padding or borders */
1913
- }
1975
+ .check-size {
1976
+ width: calc(var(--qti-form-size) - 6px);
1977
+ height: calc(var(--qti-form-size) - 6px);
1978
+ }
1914
1979
 
1915
- .qti-layout-col1 {
1916
- width: 6.3829787234%;
1917
- }
1980
+ /* Apply .check for checkbox */
1918
1981
 
1919
- .qti-layout-col2 {
1920
- width: 14.8936170213%;
1921
- }
1982
+ .check {
1983
+ gap: 0.5rem;
1984
+ background-color: var(--qti-bg);
1985
+ border-radius: var(--qti-border-radius);
1986
+ padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
1987
+ outline: none;
1988
+ cursor: pointer;
1989
+ }
1922
1990
 
1923
- .qti-layout-col3 {
1924
- width: 23.4042553191%;
1925
- }
1991
+ .validation-message {
1992
+ display: none;
1993
+ color: var(--qti-validation-text, #000);
1994
+ background-color: var(--qti-validation-error-bg, #fff);
1995
+ padding: 10px;
1996
+ border: 3px solid var(--qti-validation-text, #000);
1997
+ border-radius: 4px;
1998
+ margin-top: 8px;
1999
+ }
1926
2000
 
1927
- .qti-layout-col4 {
1928
- width: 31.914893617%;
1929
- }
2001
+ /* Apply .check-radio for outer circle of the radio buttons */
1930
2002
 
1931
- .qti-layout-col5 {
1932
- width: 40.4255319149%;
1933
- }
2003
+ .check-radio {
1934
2004
 
1935
- .qti-layout-col6 {
1936
- width: 48.9361702128%;
1937
- }
2005
+ border-radius: 100%;
1938
2006
 
1939
- .qti-layout-col7 {
1940
- width: 57.4468085106%;
1941
- }
2007
+ display: grid;
1942
2008
 
1943
- .qti-layout-col8 {
1944
- width: 65.9574468085%;
1945
- }
2009
+ place-content: center;
1946
2010
 
1947
- .qti-layout-col9 {
1948
- width: 74.4680851064%;
1949
- }
2011
+ width: var(--qti-form-size);
1950
2012
 
1951
- .qti-layout-col10 {
1952
- width: 82.9787234043%;
1953
- }
2013
+ height: var(--qti-form-size);
1954
2014
 
1955
- .qti-layout-col11 {
1956
- width: 91.4893617021%;
1957
- }
2015
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
1958
2016
 
1959
- .qti-layout-col12 {
1960
- width: 100%;
1961
- }
2017
+ outline: none;
2018
+ }
1962
2019
 
1963
- .qti-layout-offset1 {
1964
- margin-left: 8.5106382979%;
1965
- }
2020
+ /* Apply .check-radio-checked for the inner checked radio */
1966
2021
 
1967
- .qti-layout-offset2 {
1968
- margin-left: 17.0212765957%;
1969
- }
2022
+ .check-radio-checked {
2023
+ background-color: var(--qti-border-active);
2024
+ border-radius: 100%;
2025
+ }
1970
2026
 
1971
- .qti-layout-offset3 {
1972
- margin-left: 25.5319148936%;
1973
- }
2027
+ /* Apply .check-checkbox for outer square of the checkbox */
1974
2028
 
1975
- .qti-layout-offset4 {
1976
- margin-left: 34.0425531915%;
1977
- }
2029
+ .check-checkbox {
1978
2030
 
1979
- .qti-layout-offset5 {
1980
- margin-left: 42.5531914894%;
1981
- }
2031
+ display: flex;
2032
+ place-items: center;
2033
+ border-radius: var(--qti-border-radius);
2034
+ display: grid;
2035
+ place-content: center;
2036
+ width: var(--qti-form-size);
2037
+ height: var(--qti-form-size);
2038
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2039
+ outline: none;
2040
+ }
1982
2041
 
1983
- .qti-layout-offset6 {
1984
- margin-left: 51.0638297872%;
1985
- }
2042
+ /* Apply .check-checkbox-checked for the inner checkmark */
1986
2043
 
1987
- .qti-layout-offset7 {
1988
- margin-left: 59.5744680851%;
1989
- }
2044
+ .check-checkbox-checked {
2045
+ background-color: var(--qti-border-active);
2046
+ -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");
2047
+ 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");
2048
+ }
1990
2049
 
1991
- .qti-layout-offset8 {
1992
- margin-left: 68.085106383%;
1993
- }
2050
+ /* Apply .hov for hover state */
1994
2051
 
1995
- .qti-layout-offset9 {
1996
- margin-left: 76.5957446809%;
1997
- }
2052
+ .hov {
2053
+ /* background-color: var(--qti-hover-bg); */
2054
+ }
1998
2055
 
1999
- .qti-layout-offset10 {
2000
- margin-left: 85.1063829787%;
2001
- }
2056
+ /* Apply .foc for focus state */
2002
2057
 
2003
- .qti-layout-offset11 {
2004
- margin-left: 93.6170212766%;
2005
- }
2058
+ .foc {
2059
+ box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
2060
+ }
2006
2061
 
2007
- .qti-layout-offset12 {
2008
- margin-left: 102.1276595745%;
2009
- }
2062
+ /* Apply .act for active state */
2010
2063
 
2011
- @media (width <= 767px) {
2012
- [class*='qti-layout-col'] {
2013
- width: 100%;
2014
- }
2015
- }
2064
+ .act {
2065
+ border-color: var(--qti-border-active);
2066
+ background-color: var(--qti-bg-active);
2016
2067
  }
2017
2068
 
2018
- [view],
2019
- qti-outcome-declaration,
2020
- qti-response-declaration {
2021
- display: none;
2069
+ .act-bg {
2070
+ background-color: var(--qti-bg-active);
2022
2071
  }
2023
2072
 
2024
- [view].show {
2025
- display: block;
2073
+ .act-bor {
2074
+ border-color: var(--qti-border-active);
2026
2075
  }
2027
2076
 
2028
- :host {
2029
- box-sizing: border-box;
2077
+ /* Apply .rdo for readonly state */
2078
+
2079
+ .rdo {
2080
+ cursor: pointer;
2081
+ background-color: var(--qti-bg);
2082
+ outline: 0;
2083
+ border: none;
2030
2084
  }
2031
2085
 
2032
- /* components */
2086
+ /* Apply .dis for disabled state */
2087
+
2088
+ .dis {
2089
+ cursor: not-allowed;
2090
+ background-color: var(--qti-disabled-bg);
2091
+ color: var(--qti-disabled-color);
2092
+ border-color: var(--qti-border-color);
2093
+ outline: 4px solid var(--qti-disabled-bg);
2094
+ }
2033
2095
 
2034
2096
  @layer qti-components {
2035
2097
  qti-choice-interaction {
2098
+ &::part(message) {
2099
+ display: none;
2100
+ color: var(--qti-validation-text, #000);
2101
+ background-color: var(--qti-validation-error-bg, #fff);
2102
+ padding: 10px;
2103
+ border: 3px solid var(--qti-validation-text, #000);
2104
+ border-radius: 4px;
2105
+ margin-top: 8px;
2106
+ }
2107
+
2036
2108
  &.qti-input-control-hidden {
2037
2109
  & qti-simple-choice {
2038
2110
  position: relative; /* Add position relative here instead of a separate rule */
@@ -2089,6 +2161,7 @@ qti-response-declaration {
2089
2161
  }
2090
2162
  border-radius: var(--qti-border-radius);
2091
2163
  padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
2164
+ background: var(--qti-bg);
2092
2165
  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2093
2166
  outline: none
2094
2167
  }
@@ -2213,6 +2286,16 @@ qti-response-declaration {
2213
2286
  }
2214
2287
 
2215
2288
  qti-graphic-gap-match-interaction {
2289
+ &::part(message) {
2290
+ display: none;
2291
+ color: var(--qti-validation-text, #000);
2292
+ background-color: var(--qti-validation-error-bg, #fff);
2293
+ padding: 10px;
2294
+ border: 3px solid var(--qti-validation-text, #000);
2295
+ border-radius: 4px;
2296
+ margin-top: 8px;
2297
+ }
2298
+
2216
2299
  position: relative;
2217
2300
 
2218
2301
  &.qti-selections-light {
@@ -2703,6 +2786,16 @@ qti-response-declaration {
2703
2786
  qti-hottext-interaction {
2704
2787
  /* &:not(.qti-input-control-hidden),
2705
2788
  &:not(.qti-unselected-hidden) { */
2789
+ &::part(message) {
2790
+ display: none;
2791
+ color: var(--qti-validation-text, #000);
2792
+ background-color: var(--qti-validation-error-bg, #fff);
2793
+ padding: 10px;
2794
+ border: 3px solid var(--qti-validation-text, #000);
2795
+ border-radius: 4px;
2796
+ margin-top: 8px;
2797
+ }
2798
+
2706
2799
  qti-hottext {
2707
2800
  display: inline-flex;
2708
2801
  align-items: center;
@@ -2817,6 +2910,8 @@ qti-response-declaration {
2817
2910
 
2818
2911
  padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
2819
2912
 
2913
+ background: var(--qti-bg);
2914
+
2820
2915
  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2821
2916
 
2822
2917
  outline: none
@@ -2864,49 +2959,178 @@ qti-response-declaration {
2864
2959
 
2865
2960
  qti-inline-choice-interaction {
2866
2961
  &:state(candidate-correct) {
2867
- background-color: var(--qti-correct);
2962
+ &::part(trigger) {
2963
+ background-color: var(--qti-correct);
2964
+ }
2868
2965
  }
2869
2966
 
2870
2967
  &:state(candidate-incorrect) {
2871
- background-color: var(--qti-incorrect);
2968
+ &::part(trigger) {
2969
+ background-color: var(--qti-incorrect);
2970
+ }
2872
2971
  }
2873
2972
 
2874
- &::part(select) {
2973
+ &::part(trigger) {
2875
2974
 
2876
2975
  font-size: inherit;
2877
2976
  vertical-align: baseline;
2977
+ min-width: var(--qti-calculated-min-width, auto);
2878
2978
 
2879
- &:hover {
2880
- }
2881
-
2882
- &:focus {
2979
+ &:focus-visible {
2883
2980
  box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
2884
2981
  }
2885
2982
 
2886
- border-radius: var(--qti-border-radius);
2983
+ display: inline-flex;
2887
2984
 
2888
- position: relative;
2985
+ align-items: center;
2889
2986
 
2890
- -webkit-appearance: none;
2987
+ justify-content: space-between;
2891
2988
 
2892
- -moz-appearance: none;
2989
+ gap: 0.5rem;
2893
2990
 
2894
- appearance: none;
2991
+ border-radius: var(--qti-border-radius);
2895
2992
 
2896
2993
  padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
2897
2994
 
2898
- padding-right: calc(var(--qti-padding-horizontal) + 1.5rem);
2995
+ background: var(--qti-bg);
2899
2996
 
2900
2997
  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2901
2998
 
2999
+ outline: none
3000
+ }
3001
+
3002
+ &:not(:state(readonly)):not([readonly])::part(trigger):hover {
3003
+ }
3004
+
3005
+ &:state(disabled)::part(trigger),
3006
+ &[disabled]::part(trigger) {
3007
+ cursor: not-allowed;
3008
+ background-color: var(--qti-disabled-bg);
3009
+ color: var(--qti-disabled-color);
3010
+ border-color: var(--qti-border-color);
3011
+ outline: 4px solid var(--qti-disabled-bg);
3012
+ }
3013
+
3014
+ &:state(readonly)::part(trigger),
3015
+ &[readonly]::part(trigger) {
3016
+ cursor: pointer;
3017
+ background-color: var(--qti-bg);
3018
+ outline: 0;
3019
+ border: none;
3020
+ cursor: not-allowed;
3021
+ background-color: var(--qti-disabled-bg);
3022
+ color: var(--qti-disabled-color);
3023
+ border-color: var(--qti-border-color);
3024
+ outline: 4px solid var(--qti-disabled-bg);
3025
+ }
3026
+
3027
+ &::part(dropdown-icon) {
3028
+
3029
+ font-size: 1.75em;
3030
+
3031
+ display: inline-flex;
3032
+
3033
+ align-items: center;
3034
+
3035
+ justify-content: center;
3036
+
3037
+ flex: 0 0 auto;
3038
+
3039
+ transition: transform 150ms ease;
3040
+
3041
+ transform-origin: 50% 50%;
3042
+
3043
+ color: var(--qti-border-color);
3044
+
3045
+ line-height: 1;
3046
+ }
3047
+
3048
+ &::part(dropdown-icon-open) {
3049
+ transform: rotate(180deg);
3050
+ color: var(--qti-border-active);
3051
+ }
3052
+
3053
+ &::part(menu) {
3054
+ background: var(--qti-bg);
3055
+ border-radius: var(--qti-border-radius);
3056
+ padding: 0.25rem;
3057
+ box-sizing: border-box;
3058
+ overflow: auto;
3059
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2902
3060
  outline: none;
3061
+ }
2903
3062
 
2904
- 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")
2905
- no-repeat center right 6px
3063
+ &::part(option) {
3064
+ display: flex;
3065
+ align-items: center;
3066
+ width: 100%;
3067
+ min-height: 2.25rem;
3068
+ box-sizing: border-box;
3069
+ padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
3070
+ border: 0;
3071
+ border-radius: calc(var(--qti-border-radius) - 2px);
3072
+ background: transparent;
3073
+ text-align: left;
3074
+ font: inherit;
3075
+ color: inherit;
3076
+ cursor: pointer;
3077
+ white-space: nowrap;
3078
+ overflow: hidden;
3079
+ text-overflow: ellipsis;
3080
+ }
3081
+
3082
+ &::part(option):hover {
3083
+ }
3084
+
3085
+ &::part(option):focus-visible {
3086
+ box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
3087
+ }
3088
+
3089
+ &::part(option-selected) {
3090
+ background-color: var(--qti-bg-active);
3091
+ }
3092
+
3093
+ & qti-inline-choice {
3094
+ display: flex;
3095
+ align-items: center;
3096
+ width: 100%;
3097
+ min-height: 2.25rem;
3098
+ box-sizing: border-box;
3099
+ padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
3100
+ border: 0;
3101
+ border-radius: calc(var(--qti-border-radius) - 2px);
3102
+ background: transparent;
3103
+ text-align: left;
3104
+ font: inherit;
3105
+ color: inherit;
3106
+ cursor: pointer;
3107
+ white-space: nowrap;
3108
+ overflow: hidden;
3109
+ text-overflow: ellipsis;
3110
+ }
3111
+
3112
+ & qti-inline-choice:hover {
3113
+ }
3114
+
3115
+ & qti-inline-choice:focus-visible {
3116
+ box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
3117
+ }
3118
+
3119
+ & qti-inline-choice:state(--checked) {
3120
+ background-color: var(--qti-bg-active);
2906
3121
  }
2907
3122
  }
2908
3123
 
2909
3124
  qti-match-interaction.qti-match-tabular {
3125
+ &::part(message) {
3126
+ display: none;
3127
+ color: var(--qti-validation-text, #000);
3128
+ background-color: var(--qti-validation-error-bg, #fff);
3129
+ padding: 10px;
3130
+ border: 3px solid var(--qti-validation-text, #000);
3131
+ border-radius: 4px;
3132
+ margin-top: 8px;
3133
+ }
2910
3134
  /* Table element */
2911
3135
  &::part(table) {
2912
3136
  border-collapse: collapse;
@@ -3411,6 +3635,15 @@ qti-response-declaration {
3411
3635
  }
3412
3636
 
3413
3637
  qti-associate-interaction {
3638
+ &::part(message) {
3639
+ display: none;
3640
+ color: var(--qti-validation-text, #000);
3641
+ background-color: var(--qti-validation-error-bg, #fff);
3642
+ padding: 10px;
3643
+ border: 3px solid var(--qti-validation-text, #000);
3644
+ border-radius: 4px;
3645
+ margin-top: 8px;
3646
+ }
3414
3647
  /* General styles for active and enabled states */
3415
3648
  &:state(--dragzone-active) slot[name='qti-simple-associable-choice'] {
3416
3649
  border-color: var(--qti-border-active);
@@ -3495,6 +3728,16 @@ qti-response-declaration {
3495
3728
  }
3496
3729
 
3497
3730
  qti-graphic-order-interaction {
3731
+ &::part(message) {
3732
+ display: none;
3733
+ color: var(--qti-validation-text, #000);
3734
+ background-color: var(--qti-validation-error-bg, #fff);
3735
+ padding: 10px;
3736
+ border: 3px solid var(--qti-validation-text, #000);
3737
+ border-radius: 4px;
3738
+ margin-top: 8px;
3739
+ }
3740
+
3498
3741
  & qti-hotspot-choice {
3499
3742
  width: 100%;
3500
3743
  height: 100%;
@@ -3590,6 +3833,15 @@ qti-response-declaration {
3590
3833
  }
3591
3834
 
3592
3835
  qti-graphic-associate-interaction {
3836
+ &::part(message) {
3837
+ display: none;
3838
+ color: var(--qti-validation-text, #000);
3839
+ background-color: var(--qti-validation-error-bg, #fff);
3840
+ padding: 10px;
3841
+ border: 3px solid var(--qti-validation-text, #000);
3842
+ border-radius: 4px;
3843
+ margin-top: 8px;
3844
+ }
3593
3845
  position: relative;
3594
3846
  display: block;
3595
3847
 
@@ -3777,26 +4029,24 @@ qti-response-declaration {
3777
4029
  }
3778
4030
  }
3779
4031
 
3780
- qti-test-part:not(:has(qti-assessment-item)),
3781
- qti-assessment-section:not(:has(qti-assessment-item)),
3782
- qti-assessment-item-ref:not(:has(qti-assessment-item)) {
4032
+ [view],
4033
+ qti-outcome-declaration,
4034
+ qti-response-declaration {
3783
4035
  display: none;
3784
4036
  }
3785
4037
 
3786
- qti-hottext-interaction::part(message),
3787
- qti-choice-interaction::part(message),
3788
- qti-association-interaction::part(message),
3789
- qti-graphic-association-interaction::part(message),
3790
- qti-graphic-gap-match-interaction::part(message),
3791
- qti-graphic-order-interaction::part(message),
3792
- qti-math-interaction::part(message) {
4038
+ [view].show {
4039
+ display: block;
4040
+ }
4041
+
4042
+ :host {
4043
+ box-sizing: border-box;
4044
+ }
4045
+
4046
+ qti-test-part:not(:has(qti-assessment-item)),
4047
+ qti-assessment-section:not(:has(qti-assessment-item)),
4048
+ qti-assessment-item-ref:not(:has(qti-assessment-item)) {
3793
4049
  display: none;
3794
- color: var(--qti-validation-text, #000);
3795
- background-color: var(--qti-validation-error-bg, #fff);
3796
- padding: 10px;
3797
- border: 3px solid var(--qti-validation-text, #000);
3798
- border-radius: 4px;
3799
- margin-top: 8px;
3800
4050
  }
3801
4051
 
3802
4052
  div.full-correct-response {
@@ -3838,4 +4088,4 @@ lit-html/node/directives/until.js:
3838
4088
  * SPDX-License-Identifier: BSD-3-Clause
3839
4089
  *)
3840
4090
  */
3841
- //# sourceMappingURL=chunk-HCVDQUP7.js.map
4091
+ //# sourceMappingURL=chunk-AIS537EU.js.map