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