@rolster/styles-foundations 1.0.2 → 1.0.6

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.
@@ -158,1966 +158,3269 @@
158
158
  }
159
159
  }
160
160
 
161
- :root {
162
- --z-index-2: 2;
163
- --z-index-4: 4;
164
- --z-index-6: 6;
165
- --z-index-8: 8;
166
- --z-index-12: 12;
167
- --z-index-16: 16;
168
- --z-index-24: 24;
169
- --z-index-32: 32;
170
- --shadow-1: 0px 4px 2px -2px rgba(50, 44, 47, 0.02);
171
- --shadow-2: 0px 4px 8px -2px rgba(50, 44, 47, 0.04);
172
- --shadow-3: 0px 2px 4px -2px rgba(50, 44, 47, 0.08);
173
- --shadow-4: 0px 4px 8px -6px rgba(50, 44, 47, 0.03),
174
- 0px 16px 8px -4px rgba(50, 44, 47, 0.03);
175
- --shadow-5: 0px 8px 24px -4px rgba(50, 44, 47, 0.08);
176
- --shadow-6: 0px 8px 24px -4px rgba(50, 44, 47, 0.12);
177
- --shadow-bottom-light-2: 0px 2px 2px rgba(173, 186, 230, 0.4);
178
- --shadow-bottom-light-4: 0px 4px 4px rgba(173, 186, 230, 0.4);
179
- --shadow-bottom-light-8: 0px 8px 8px rgba(173, 186, 230, 0.4);
180
- --shadow-bottom-light-16: 0px 16px 16px rgba(173, 186, 230, 0.4);
181
- --shadow-bottom-light-24: 0px 24px 24px rgba(173, 186, 230, 0.4);
182
- --shadow-bottom-light-32: 0px 32px 32px rgba(173, 186, 230, 0.4);
183
- --shadow-top-light-2: 0px -2px 2px rgba(173, 186, 230, 0.4);
184
- --shadow-top-light-4: 0px -4px 4px rgba(173, 186, 230, 0.4);
185
- --shadow-top-light-8: 0px -8px 8px rgba(173, 186, 230, 0.4);
186
- --shadow-top-light-16: 0px -16px 16px rgba(173, 186, 230, 0.4);
187
- --shadow-top-light-24: 0px -24px 24px rgba(173, 186, 230, 0.4);
188
- --shadow-top-light-32: 0px -32px 32px rgba(173, 186, 230, 0.4);
189
- --shadow-right-light-2: 2px 0px 2px rgba(173, 186, 230, 0.4);
190
- --shadow-right-light-4: 4px 0px 4px rgba(173, 186, 230, 0.4);
191
- --shadow-right-light-8: 8px 0px 8px rgba(173, 186, 230, 0.4);
192
- --shadow-right-light-16: 16px 0px 16px rgba(173, 186, 230, 0.4);
193
- --shadow-right-light-24: 24px 0px 24px rgba(173, 186, 230, 0.4);
194
- --shadow-right-light-32: 32px 0px 32px rgba(173, 186, 230, 0.4);
195
- --shadow-left-light-2: -2px 0px 2px rgba(173, 186, 230, 0.4);
196
- --shadow-left-light-4: -4px 0px 4px rgba(173, 186, 230, 0.4);
197
- --shadow-left-light-8: -8px 0px 8px rgba(173, 186, 230, 0.4);
198
- --shadow-left-light-16: -16px 0px 16px rgba(173, 186, 230, 0.4);
199
- --shadow-left-light-24: -24px 0px 24px rgba(173, 186, 230, 0.4);
200
- --shadow-left-light-32: -32px 0px 32px rgba(173, 186, 230, 0.4);
201
- --shadow-center-light-2: 0px 0px 2px 0px rgba(173, 186, 230, 0.4);
202
- --shadow-center-light-4: 0px 0px 4px 0px rgba(173, 186, 230, 0.4);
203
- --shadow-center-light-8: 0px 0px 8px 0px rgba(173, 186, 230, 0.4);
204
- --shadow-center-light-16: 0px 0px 16px 0px rgba(173, 186, 230, 0.4);
205
- --shadow-center-light-24: 0px 0px 24px 0px rgba(173, 186, 230, 0.4);
206
- --shadow-center-light-32: 0px 0px 32px 0px rgba(173, 186, 230, 0.4);
207
- --shadow-bottom-dark-2: 0px 2px 2px rgba(50, 44, 47, 0.4);
208
- --shadow-bottom-dark-4: 0px 4px 4px rgba(50, 44, 47, 0.4);
209
- --shadow-bottom-dark-8: 0px 8px 8px rgba(50, 44, 47, 0.4);
210
- --shadow-bottom-dark-16: 0px 16px 16px rgba(50, 44, 47, 0.4);
211
- --shadow-bottom-dark-24: 0px 24px 24px rgba(50, 44, 47, 0.4);
212
- --shadow-bottom-dark-32: 0px 32px 32px rgba(50, 44, 47, 0.4);
213
- --shadow-top-dark-2: 0px -2px 2px rgba(50, 44, 47, 0.4);
214
- --shadow-top-dark-4: 0px -4px 4px rgba(50, 44, 47, 0.4);
215
- --shadow-top-dark-8: 0px -8px 8px rgba(50, 44, 47, 0.4);
216
- --shadow-top-dark-16: 0px -16px 16px rgba(50, 44, 47, 0.4);
217
- --shadow-top-dark-24: 0px -24px 24px rgba(50, 44, 47, 0.4);
218
- --shadow-top-dark-32: 0px -32px 32px rgba(50, 44, 47, 0.4);
219
- --shadow-right-dark-2: 2px 0px 2px rgba(50, 44, 47, 0.4);
220
- --shadow-right-dark-4: 4px 0px 4px rgba(50, 44, 47, 0.4);
221
- --shadow-right-dark-8: 8px 0px 8px rgba(50, 44, 47, 0.4);
222
- --shadow-right-dark-16: 16px 0px 16px rgba(50, 44, 47, 0.4);
223
- --shadow-right-dark-24: 24px 0px 24px rgba(50, 44, 47, 0.4);
224
- --shadow-right-dark-32: 32px 0px 32px rgba(50, 44, 47, 0.4);
225
- --shadow-left-dark-2: -2px 0px 2px rgba(50, 44, 47, 0.4);
226
- --shadow-left-dark-4: -4px 0px 4px rgba(50, 44, 47, 0.4);
227
- --shadow-left-dark-8: -8px 0px 8px rgba(50, 44, 47, 0.4);
228
- --shadow-left-dark-16: -16px 0px 16px rgba(50, 44, 47, 0.4);
229
- --shadow-left-dark-24: -24px 0px 24px rgba(50, 44, 47, 0.4);
230
- --shadow-left-dark-32: -32px 0px 32px rgba(50, 44, 47, 0.4);
231
- --shadow-center-dark-2: 0px 0px 2px 0px rgba(50, 44, 47, 0.4);
232
- --shadow-center-dark-4: 0px 0px 4px 0px rgba(50, 44, 47, 0.4);
233
- --shadow-center-dark-8: 0px 0px 8px 0px rgba(50, 44, 47, 0.4);
234
- --shadow-center-dark-16: 0px 0px 16px 0px rgba(50, 44, 47, 0.4);
235
- --shadow-center-dark-24: 0px 0px 24px 0px rgba(50, 44, 47, 0.4);
236
- --shadow-center-dark-32: 0px 0px 32px 0px rgba(50, 44, 47, 0.4);
161
+ .col-xs-2-5 {
162
+ width: 2.5% !important;
237
163
  }
238
164
 
239
- :root {
240
- --background-theme-500: var(--background-light-500);
241
- --background-theme-300: var(--background-light-300);
242
- --background-theme-100: var(--background-light-100);
243
- --color-theme-500: var(--color-dark-500);
244
- --color-theme-300: var(--color-dark-300);
245
- --color-theme-100: var(--color-dark-100);
246
- --border-theme-500: var(--border-dark-500);
247
- --border-theme-300: var(--border-dark-300);
248
- --border-theme-100: var(--border-dark-100);
249
- --border-1-theme-500: var(--border-1) solid var(--border-dark-500);
250
- --border-2-theme-500: var(--border-2) solid var(--border-dark-500);
251
- --border-4-theme-500: var(--border-4) solid var(--border-dark-500);
252
- --border-1-theme-300: var(--border-1) solid var(--border-dark-300);
253
- --border-2-theme-300: var(--border-2) solid var(--border-dark-300);
254
- --border-4-theme-300: var(--border-4) solid var(--border-dark-300);
255
- --border-1-theme-100: var(--border-1) solid var(--border-dark-100);
256
- --border-2-theme-100: var(--border-2) solid var(--border-dark-100);
257
- --border-4-theme-100: var(--border-4) solid var(--border-dark-100);
258
- --color-rolster-900: var(--color-base-900);
259
- --color-rolster-700: var(--color-base-700);
260
- --color-rolster-500: var(--color-base-500);
261
- --color-rolster-300: var(--color-base-300);
262
- --color-rolster-100: var(--color-base-100);
263
- --skeleton-rolster-500: var(--skeleton-base-500);
264
- --skeleton-rolster-300: var(--skeleton-base-300);
265
- --skeleton-rolster-100: var(--skeleton-base-100);
266
- --border-1-rolster-900: var(--border-1) solid var(--color-base-900);
267
- --border-2-rolster-900: var(--border-2) solid var(--color-base-900);
268
- --border-4-rolster-900: var(--border-4) solid var(--color-base-900);
269
- --border-1-rolster-700: var(--border-1) solid var(--color-base-700);
270
- --border-2-rolster-700: var(--border-2) solid var(--color-base-700);
271
- --border-4-rolster-700: var(--border-4) solid var(--color-base-700);
272
- --border-1-rolster-500: var(--border-1) solid var(--color-base-500);
273
- --border-2-rolster-500: var(--border-2) solid var(--color-base-500);
274
- --border-4-rolster-500: var(--border-4) solid var(--color-base-500);
275
- --border-1-rolster-300: var(--border-1) solid var(--color-base-300);
276
- --border-2-rolster-300: var(--border-2) solid var(--color-base-300);
277
- --border-4-rolster-300: var(--border-4) solid var(--color-base-300);
278
- --border-1-rolster-100: var(--border-1) solid var(--color-base-100);
279
- --border-2-rolster-100: var(--border-2) solid var(--color-base-100);
280
- --border-4-rolster-100: var(--border-4) solid var(--color-base-100);
281
- --box-shadow-rolster-500: var(--box-shadow-base-500);
282
- --backdrop-rolster-500: var(--backdrop-base-500);
283
- --gradient-rolster-500: var(--gradient-base-500);
165
+ .col-xs-5 {
166
+ width: 5% !important;
284
167
  }
285
168
 
286
- *[rls-theme='success'] {
287
- --color-rolster-900: var(--color-success-900);
288
- --color-rolster-700: var(--color-success-700);
289
- --color-rolster-500: var(--color-success-500);
290
- --color-rolster-300: var(--color-success-300);
291
- --color-rolster-100: var(--color-success-100);
292
- --skeleton-rolster-500: var(--skeleton-success-500);
293
- --skeleton-rolster-300: var(--skeleton-success-300);
294
- --skeleton-rolster-100: var(--skeleton-success-100);
295
- --border-1-rolster-900: var(--border-1) solid var(--color-success-900);
296
- --border-2-rolster-900: var(--border-2) solid var(--color-success-900);
297
- --border-4-rolster-900: var(--border-4) solid var(--color-success-900);
298
- --border-1-rolster-700: var(--border-1) solid var(--color-success-700);
299
- --border-2-rolster-700: var(--border-2) solid var(--color-success-700);
300
- --border-4-rolster-700: var(--border-4) solid var(--color-success-700);
301
- --border-1-rolster-500: var(--border-1) solid var(--color-success-500);
302
- --border-2-rolster-500: var(--border-2) solid var(--color-success-500);
303
- --border-4-rolster-500: var(--border-4) solid var(--color-success-500);
304
- --border-1-rolster-300: var(--border-1) solid var(--color-success-300);
305
- --border-2-rolster-300: var(--border-2) solid var(--color-success-300);
306
- --border-4-rolster-300: var(--border-4) solid var(--color-success-300);
307
- --border-1-rolster-100: var(--border-1) solid var(--color-success-100);
308
- --border-2-rolster-100: var(--border-2) solid var(--color-success-100);
309
- --border-4-rolster-100: var(--border-4) solid var(--color-success-100);
310
- --box-shadow-rolster-500: var(--box-shadow-success-500);
311
- --backdrop-rolster-500: var(--backdrop-success-500);
312
- --gradient-rolster-500: var(--gradient-success-500);
169
+ .col-xs-7-5 {
170
+ width: 7.5% !important;
313
171
  }
314
172
 
315
- *[rls-theme='info'] {
316
- --color-rolster-900: var(--color-info-900);
317
- --color-rolster-700: var(--color-info-700);
318
- --color-rolster-500: var(--color-info-500);
319
- --color-rolster-300: var(--color-info-300);
320
- --color-rolster-100: var(--color-info-100);
321
- --skeleton-rolster-500: var(--skeleton-info-500);
322
- --skeleton-rolster-300: var(--skeleton-info-300);
323
- --skeleton-rolster-100: var(--skeleton-info-100);
324
- --border-1-rolster-900: var(--border-1) solid var(--color-info-900);
325
- --border-2-rolster-900: var(--border-2) solid var(--color-info-900);
326
- --border-4-rolster-900: var(--border-4) solid var(--color-info-900);
327
- --border-1-rolster-700: var(--border-1) solid var(--color-info-700);
328
- --border-2-rolster-700: var(--border-2) solid var(--color-info-700);
329
- --border-4-rolster-700: var(--border-4) solid var(--color-info-700);
330
- --border-1-rolster-500: var(--border-1) solid var(--color-info-500);
331
- --border-2-rolster-500: var(--border-2) solid var(--color-info-500);
332
- --border-4-rolster-500: var(--border-4) solid var(--color-info-500);
333
- --border-1-rolster-300: var(--border-1) solid var(--color-info-300);
334
- --border-2-rolster-300: var(--border-2) solid var(--color-info-300);
335
- --border-4-rolster-300: var(--border-4) solid var(--color-info-300);
336
- --border-1-rolster-100: var(--border-1) solid var(--color-info-100);
337
- --border-2-rolster-100: var(--border-2) solid var(--color-info-100);
338
- --border-4-rolster-100: var(--border-4) solid var(--color-info-100);
339
- --box-shadow-rolster-500: var(--box-shadow-info-500);
340
- --backdrop-rolster-500: var(--backdrop-info-500);
341
- --gradient-rolster-500: var(--gradient-info-500);
173
+ .col-xs-10 {
174
+ width: 10% !important;
342
175
  }
343
176
 
344
- *[rls-theme='happy'] {
345
- --color-rolster-900: var(--color-happy-900);
346
- --color-rolster-700: var(--color-happy-700);
347
- --color-rolster-500: var(--color-happy-500);
348
- --color-rolster-300: var(--color-happy-300);
349
- --color-rolster-100: var(--color-happy-100);
350
- --skeleton-rolster-500: var(--skeleton-happy-500);
351
- --skeleton-rolster-300: var(--skeleton-happy-300);
352
- --skeleton-rolster-100: var(--skeleton-happy-100);
353
- --border-1-rolster-900: var(--border-1) solid var(--color-happy-900);
354
- --border-2-rolster-900: var(--border-2) solid var(--color-happy-900);
355
- --border-4-rolster-900: var(--border-4) solid var(--color-happy-900);
356
- --border-1-rolster-700: var(--border-1) solid var(--color-happy-700);
357
- --border-2-rolster-700: var(--border-2) solid var(--color-happy-700);
358
- --border-4-rolster-700: var(--border-4) solid var(--color-happy-700);
359
- --border-1-rolster-500: var(--border-1) solid var(--color-happy-500);
360
- --border-2-rolster-500: var(--border-2) solid var(--color-happy-500);
361
- --border-4-rolster-500: var(--border-4) solid var(--color-happy-500);
362
- --border-1-rolster-300: var(--border-1) solid var(--color-happy-300);
363
- --border-2-rolster-300: var(--border-2) solid var(--color-happy-300);
364
- --border-4-rolster-300: var(--border-4) solid var(--color-happy-300);
365
- --border-1-rolster-100: var(--border-1) solid var(--color-happy-100);
366
- --border-2-rolster-100: var(--border-2) solid var(--color-happy-100);
367
- --border-4-rolster-100: var(--border-4) solid var(--color-happy-100);
368
- --box-shadow-rolster-500: var(--box-shadow-happy-500);
369
- --backdrop-rolster-500: var(--backdrop-happy-500);
370
- --gradient-rolster-500: var(--gradient-happy-500);
177
+ .col-xs-12-5 {
178
+ width: 12.5% !important;
371
179
  }
372
180
 
373
- *[rls-theme='warning'] {
374
- --color-rolster-900: var(--color-warning-900);
375
- --color-rolster-700: var(--color-warning-700);
376
- --color-rolster-500: var(--color-warning-500);
377
- --color-rolster-300: var(--color-warning-300);
378
- --color-rolster-100: var(--color-warning-100);
379
- --skeleton-rolster-500: var(--skeleton-warning-500);
380
- --skeleton-rolster-300: var(--skeleton-warning-300);
381
- --skeleton-rolster-100: var(--skeleton-warning-100);
382
- --border-1-rolster-900: var(--border-1) solid var(--color-warning-900);
383
- --border-2-rolster-900: var(--border-2) solid var(--color-warning-900);
384
- --border-4-rolster-900: var(--border-4) solid var(--color-warning-900);
385
- --border-1-rolster-700: var(--border-1) solid var(--color-warning-700);
386
- --border-2-rolster-700: var(--border-2) solid var(--color-warning-700);
387
- --border-4-rolster-700: var(--border-4) solid var(--color-warning-700);
388
- --border-1-rolster-500: var(--border-1) solid var(--color-warning-500);
389
- --border-2-rolster-500: var(--border-2) solid var(--color-warning-500);
390
- --border-4-rolster-500: var(--border-4) solid var(--color-warning-500);
391
- --border-1-rolster-300: var(--border-1) solid var(--color-warning-300);
392
- --border-2-rolster-300: var(--border-2) solid var(--color-warning-300);
393
- --border-4-rolster-300: var(--border-4) solid var(--color-warning-300);
394
- --border-1-rolster-100: var(--border-1) solid var(--color-warning-100);
395
- --border-2-rolster-100: var(--border-2) solid var(--color-warning-100);
396
- --border-4-rolster-100: var(--border-4) solid var(--color-warning-100);
397
- --box-shadow-rolster-500: var(--box-shadow-warning-500);
398
- --backdrop-rolster-500: var(--backdrop-warning-500);
399
- --gradient-rolster-500: var(--gradient-warning-500);
181
+ .col-xs-15 {
182
+ width: 15% !important;
400
183
  }
401
184
 
402
- *[rls-theme='danger'] {
403
- --color-rolster-900: var(--color-danger-900);
404
- --color-rolster-700: var(--color-danger-700);
405
- --color-rolster-500: var(--color-danger-500);
406
- --color-rolster-300: var(--color-danger-300);
407
- --color-rolster-100: var(--color-danger-100);
408
- --skeleton-rolster-500: var(--skeleton-danger-500);
409
- --skeleton-rolster-300: var(--skeleton-danger-300);
410
- --skeleton-rolster-100: var(--skeleton-danger-100);
411
- --border-1-rolster-900: var(--border-1) solid var(--color-danger-900);
412
- --border-2-rolster-900: var(--border-2) solid var(--color-danger-900);
413
- --border-4-rolster-900: var(--border-4) solid var(--color-danger-900);
414
- --border-1-rolster-700: var(--border-1) solid var(--color-danger-700);
415
- --border-2-rolster-700: var(--border-2) solid var(--color-danger-700);
416
- --border-4-rolster-700: var(--border-4) solid var(--color-danger-700);
417
- --border-1-rolster-500: var(--border-1) solid var(--color-danger-500);
418
- --border-2-rolster-500: var(--border-2) solid var(--color-danger-500);
419
- --border-4-rolster-500: var(--border-4) solid var(--color-danger-500);
420
- --border-1-rolster-300: var(--border-1) solid var(--color-danger-300);
421
- --border-2-rolster-300: var(--border-2) solid var(--color-danger-300);
422
- --border-4-rolster-300: var(--border-4) solid var(--color-danger-300);
423
- --border-1-rolster-100: var(--border-1) solid var(--color-danger-100);
424
- --border-2-rolster-100: var(--border-2) solid var(--color-danger-100);
425
- --border-4-rolster-100: var(--border-4) solid var(--color-danger-100);
426
- --box-shadow-rolster-500: var(--box-shadow-danger-500);
427
- --backdrop-rolster-500: var(--backdrop-danger-500);
428
- --gradient-rolster-500: var(--gradient-danger-500);
185
+ .col-xs-16 {
186
+ width: 16.66% !important;
429
187
  }
430
188
 
431
- :root {
432
- --font-weight-thin: 100;
433
- --font-weight-extra-light: 200;
434
- --font-weight-light: 300;
435
- --font-weight-regular: 400;
436
- --font-weight-medium: 500;
437
- --font-weight-semibold: 600;
438
- --font-weight-bold: 700;
439
- --font-weight-extrabold: 800;
440
- --font-weight-black: 900;
441
- }
442
-
443
- :root {
444
- --rolster-font-family: -rolster-system-font, -apple-system, BlinkMacSystemFont,
445
- 'Segoe UI', Roboto, Helvetica;
189
+ .col-xs-17-5 {
190
+ width: 17.5% !important;
446
191
  }
447
192
 
448
- html {
449
- font-size: var(--rolster-font-size, 16px);
450
- font-family: var(--rolster-font-family);
193
+ .col-xs-20 {
194
+ width: 20% !important;
451
195
  }
452
196
 
453
- body {
454
- position: absolute;
455
- top: 0rem;
456
- bottom: 0rem;
457
- left: 0rem;
458
- right: 0rem;
459
- margin: 0rem;
460
- padding: 0rem;
461
- -webkit-tap-highlight-color: transparent;
462
- background: var(--background-theme-300);
197
+ .col-xs-22-5 {
198
+ width: 22.5% !important;
463
199
  }
464
200
 
465
- div {
466
- position: relative;
467
- width: 100%;
201
+ .col-xs-25 {
202
+ width: 25% !important;
468
203
  }
469
204
 
470
- audio,
471
- canvas,
472
- progress,
473
- video {
474
- vertical-align: baseline;
205
+ .col-xs-27-5 {
206
+ width: 27.5% !important;
475
207
  }
476
208
 
477
- audio:not([controls]) {
478
- display: none;
479
- height: 0rem;
209
+ .col-xs-30 {
210
+ width: 30% !important;
480
211
  }
481
212
 
482
- b,
483
- strong {
484
- font-weight: bold;
213
+ .col-xs-32-5 {
214
+ width: 32.5% !important;
485
215
  }
486
216
 
487
- img {
488
- border: 0rem;
217
+ .col-xs-33 {
218
+ width: 33.33% !important;
489
219
  }
490
220
 
491
- svg:not(:root) {
492
- overflow: hidden;
221
+ .col-xs-35 {
222
+ width: 35% !important;
493
223
  }
494
224
 
495
- figure {
496
- margin: 1rem 40rem;
225
+ .col-xs-37-5 {
226
+ width: 37.5% !important;
497
227
  }
498
228
 
499
- hr {
500
- height: 0.0625rem;
501
- border-width: 0rem;
502
- box-sizing: content-box;
229
+ .col-xs-40 {
230
+ width: 40% !important;
503
231
  }
504
232
 
505
- pre {
506
- overflow: auto;
233
+ .col-xs-42-5 {
234
+ width: 42.5% !important;
507
235
  }
508
236
 
509
- code,
510
- kbd,
511
- pre,
512
- samp {
513
- font-family: inherit;
514
- font-size: 1rem;
237
+ .col-xs-45 {
238
+ width: 45% !important;
515
239
  }
516
240
 
517
- label,
518
- input,
519
- select,
520
- textarea {
521
- font-family: inherit;
522
- line-height: normal;
241
+ .col-xs-47-5 {
242
+ width: 47.5% !important;
523
243
  }
524
244
 
525
- textarea {
526
- overflow: auto;
527
- height: auto;
528
- font: inherit;
529
- color: inherit;
245
+ .col-xs-50 {
246
+ width: 50% !important;
530
247
  }
531
248
 
532
- textarea::placeholder {
533
- padding-left: 0.125rem;
249
+ .col-xs-52-5 {
250
+ width: 52.5% !important;
534
251
  }
535
252
 
536
- form,
537
- input,
538
- optgroup,
539
- select {
540
- margin: 0rem;
541
- font: inherit;
542
- color: inherit;
253
+ .col-xs-55 {
254
+ width: 55% !important;
543
255
  }
544
256
 
545
- html input[type='button'],
546
- input[type='reset'],
547
- input[type='submit'] {
548
- cursor: pointer;
257
+ .col-xs-57-5 {
258
+ width: 57.5% !important;
549
259
  }
550
260
 
551
- a,
552
- a div,
553
- a span,
554
- a ion-icon,
555
- a ion-label,
556
- button,
557
- button div,
558
- button span,
559
- button ion-icon,
560
- button ion-label,
561
- [tappable],
562
- [tappable] div,
563
- [tappable] span,
564
- [tappable] ion-icon,
565
- [tappable] ion-label,
566
- input,
567
- textarea {
568
- touch-action: manipulation;
261
+ .col-xs-60 {
262
+ width: 60% !important;
569
263
  }
570
264
 
571
- a ion-label,
572
- button ion-label {
573
- pointer-events: none;
265
+ .col-xs-62-5 {
266
+ width: 62.5% !important;
574
267
  }
575
268
 
576
- button {
577
- border: 0rem;
578
- border-radius: 0rem;
579
- font-family: inherit;
580
- font-style: inherit;
581
- font-variant: inherit;
582
- line-height: 1;
583
- text-transform: none;
269
+ .col-xs-65 {
270
+ width: 65% !important;
584
271
  }
585
272
 
586
- [tappable] {
587
- cursor: pointer;
273
+ .col-xs-66 {
274
+ width: 66.66% !important;
588
275
  }
589
276
 
590
- a[disabled],
591
- button[disabled],
592
- html input[disabled] {
593
- cursor: default;
277
+ .col-xs-67-5 {
278
+ width: 67.5% !important;
594
279
  }
595
280
 
596
- button::-moz-focus-inner,
597
- input::-moz-focus-inner {
598
- padding: 0rem;
599
- border: 0rem;
281
+ .col-xs-70 {
282
+ width: 70% !important;
600
283
  }
601
284
 
602
- input[type='checkbox'],
603
- input[type='radio'] {
604
- padding: 0rem;
605
- box-sizing: border-box;
285
+ .col-xs-72-5 {
286
+ width: 72.5% !important;
606
287
  }
607
288
 
608
- input[type='number']::-webkit-inner-spin-button,
609
- input[type='number']::-webkit-outer-spin-button {
610
- height: auto;
289
+ .col-xs-75 {
290
+ width: 75% !important;
611
291
  }
612
292
 
613
- input[type='search']::-webkit-search-cancel-button,
614
- input[type='search']::-webkit-search-decoration {
615
- -webkit-appearance: none;
293
+ .col-xs-77-5 {
294
+ width: 77.5% !important;
616
295
  }
617
296
 
618
- table {
619
- border-collapse: collapse;
620
- border-spacing: 0rem;
297
+ .col-xs-80 {
298
+ width: 80% !important;
621
299
  }
622
300
 
623
- td,
624
- th {
625
- padding: 0rem;
301
+ .col-xs-82-5 {
302
+ width: 82.5% !important;
626
303
  }
627
304
 
628
- ul {
629
- list-style-type: none;
630
- margin-block-start: 0rem;
631
- margin-block-end: 0rem;
632
- margin-inline-start: 0rem;
633
- margin-inline-end: 0rem;
634
- padding-inline-start: 0rem;
305
+ .col-xs-85 {
306
+ width: 85% !important;
635
307
  }
636
308
 
637
- h1,
638
- h2,
639
- h3,
640
- h4,
641
- h5,
642
- h6,
643
- p {
644
- margin: 0rem;
645
- font-weight: var(--font-weight-medium);
309
+ .col-xs-87-5 {
310
+ width: 87.5% !important;
646
311
  }
647
312
 
648
- .font-dark-500 {
649
- color: var(--color-dark-500);
313
+ .col-xs-90 {
314
+ width: 90% !important;
650
315
  }
651
316
 
652
- .font-dark-300 {
653
- color: var(--color-dark-300);
317
+ .col-xs-92-5 {
318
+ width: 92.5% !important;
654
319
  }
655
320
 
656
- .font-dark-100 {
657
- color: var(--color-dark-100);
321
+ .col-xs-95 {
322
+ width: 95% !important;
658
323
  }
659
324
 
660
- .font-light-500 {
661
- color: var(--color-light-500);
325
+ .col-xs-97-5 {
326
+ width: 97.5% !important;
662
327
  }
663
328
 
664
- .font-light-300 {
665
- color: var(--color-light-300);
329
+ .col-xs {
330
+ width: 100% !important;
666
331
  }
667
332
 
668
- .font-light-100 {
669
- color: var(--color-light-100);
333
+ @media only screen and (min-width: 361px) {
334
+ .col-sm-2-5 {
335
+ width: 2.5% !important;
336
+ }
337
+ .col-sm-5 {
338
+ width: 5% !important;
339
+ }
340
+ .col-sm-7-5 {
341
+ width: 7.5% !important;
342
+ }
343
+ .col-sm-10 {
344
+ width: 10% !important;
345
+ }
346
+ .col-sm-12-5 {
347
+ width: 12.5% !important;
348
+ }
349
+ .col-sm-15 {
350
+ width: 15% !important;
351
+ }
352
+ .col-sm-16 {
353
+ width: 16.66% !important;
354
+ }
355
+ .col-sm-17-5 {
356
+ width: 17.5% !important;
357
+ }
358
+ .col-sm-20 {
359
+ width: 20% !important;
360
+ }
361
+ .col-sm-22-5 {
362
+ width: 22.5% !important;
363
+ }
364
+ .col-sm-25 {
365
+ width: 25% !important;
366
+ }
367
+ .col-sm-27-5 {
368
+ width: 27.5% !important;
369
+ }
370
+ .col-sm-30 {
371
+ width: 30% !important;
372
+ }
373
+ .col-sm-32-5 {
374
+ width: 32.5% !important;
375
+ }
376
+ .col-sm-33 {
377
+ width: 33.33% !important;
378
+ }
379
+ .col-sm-35 {
380
+ width: 35% !important;
381
+ }
382
+ .col-sm-37-5 {
383
+ width: 37.5% !important;
384
+ }
385
+ .col-sm-40 {
386
+ width: 40% !important;
387
+ }
388
+ .col-sm-42-5 {
389
+ width: 42.5% !important;
390
+ }
391
+ .col-sm-45 {
392
+ width: 45% !important;
393
+ }
394
+ .col-sm-47-5 {
395
+ width: 47.5% !important;
396
+ }
397
+ .col-sm-50 {
398
+ width: 50% !important;
399
+ }
400
+ .col-sm-52-5 {
401
+ width: 52.5% !important;
402
+ }
403
+ .col-sm-55 {
404
+ width: 55% !important;
405
+ }
406
+ .col-sm-57-5 {
407
+ width: 57.5% !important;
408
+ }
409
+ .col-sm-60 {
410
+ width: 60% !important;
411
+ }
412
+ .col-sm-62-5 {
413
+ width: 62.5% !important;
414
+ }
415
+ .col-sm-65 {
416
+ width: 65% !important;
417
+ }
418
+ .col-sm-66 {
419
+ width: 66.66% !important;
420
+ }
421
+ .col-sm-67-5 {
422
+ width: 67.5% !important;
423
+ }
424
+ .col-sm-70 {
425
+ width: 70% !important;
426
+ }
427
+ .col-sm-72-5 {
428
+ width: 72.5% !important;
429
+ }
430
+ .col-sm-75 {
431
+ width: 75% !important;
432
+ }
433
+ .col-sm-77-5 {
434
+ width: 77.5% !important;
435
+ }
436
+ .col-sm-80 {
437
+ width: 80% !important;
438
+ }
439
+ .col-sm-82-5 {
440
+ width: 82.5% !important;
441
+ }
442
+ .col-sm-85 {
443
+ width: 85% !important;
444
+ }
445
+ .col-sm-87-5 {
446
+ width: 87.5% !important;
447
+ }
448
+ .col-sm-90 {
449
+ width: 90% !important;
450
+ }
451
+ .col-sm-92-5 {
452
+ width: 92.5% !important;
453
+ }
454
+ .col-sm-95 {
455
+ width: 95% !important;
456
+ }
457
+ .col-sm-97-5 {
458
+ width: 97.5% !important;
459
+ }
460
+ .col-sm {
461
+ width: 100% !important;
462
+ }
670
463
  }
671
464
 
672
- .bg-dark-500 {
673
- background: var(--background-dark-500);
465
+ @media only screen and (min-width: 641px) {
466
+ .col-md-2-5 {
467
+ width: 2.5% !important;
468
+ }
469
+ .col-md-5 {
470
+ width: 5% !important;
471
+ }
472
+ .col-md-7-5 {
473
+ width: 7.5% !important;
474
+ }
475
+ .col-md-10 {
476
+ width: 10% !important;
477
+ }
478
+ .col-md-12-5 {
479
+ width: 12.5% !important;
480
+ }
481
+ .col-md-15 {
482
+ width: 15% !important;
483
+ }
484
+ .col-md-16 {
485
+ width: 16.66% !important;
486
+ }
487
+ .col-md-17-5 {
488
+ width: 17.5% !important;
489
+ }
490
+ .col-md-20 {
491
+ width: 20% !important;
492
+ }
493
+ .col-md-22-5 {
494
+ width: 22.5% !important;
495
+ }
496
+ .col-md-25 {
497
+ width: 25% !important;
498
+ }
499
+ .col-md-27-5 {
500
+ width: 27.5% !important;
501
+ }
502
+ .col-md-30 {
503
+ width: 30% !important;
504
+ }
505
+ .col-md-32-5 {
506
+ width: 32.5% !important;
507
+ }
508
+ .col-md-33 {
509
+ width: 33.33% !important;
510
+ }
511
+ .col-md-35 {
512
+ width: 35% !important;
513
+ }
514
+ .col-md-37-5 {
515
+ width: 37.5% !important;
516
+ }
517
+ .col-md-40 {
518
+ width: 40% !important;
519
+ }
520
+ .col-md-42-5 {
521
+ width: 42.5% !important;
522
+ }
523
+ .col-md-45 {
524
+ width: 45% !important;
525
+ }
526
+ .col-md-47-5 {
527
+ width: 47.5% !important;
528
+ }
529
+ .col-md-50 {
530
+ width: 50% !important;
531
+ }
532
+ .col-md-52-5 {
533
+ width: 52.5% !important;
534
+ }
535
+ .col-md-55 {
536
+ width: 55% !important;
537
+ }
538
+ .col-md-57-5 {
539
+ width: 57.5% !important;
540
+ }
541
+ .col-md-60 {
542
+ width: 60% !important;
543
+ }
544
+ .col-md-62-5 {
545
+ width: 62.5% !important;
546
+ }
547
+ .col-md-65 {
548
+ width: 65% !important;
549
+ }
550
+ .col-md-66 {
551
+ width: 66.66% !important;
552
+ }
553
+ .col-md-67-5 {
554
+ width: 67.5% !important;
555
+ }
556
+ .col-md-70 {
557
+ width: 70% !important;
558
+ }
559
+ .col-md-72-5 {
560
+ width: 72.5% !important;
561
+ }
562
+ .col-md-75 {
563
+ width: 75% !important;
564
+ }
565
+ .col-md-77-5 {
566
+ width: 77.5% !important;
567
+ }
568
+ .col-md-80 {
569
+ width: 80% !important;
570
+ }
571
+ .col-md-82-5 {
572
+ width: 82.5% !important;
573
+ }
574
+ .col-md-85 {
575
+ width: 85% !important;
576
+ }
577
+ .col-md-87-5 {
578
+ width: 87.5% !important;
579
+ }
580
+ .col-md-90 {
581
+ width: 90% !important;
582
+ }
583
+ .col-md-92-5 {
584
+ width: 92.5% !important;
585
+ }
586
+ .col-md-95 {
587
+ width: 95% !important;
588
+ }
589
+ .col-md-97-5 {
590
+ width: 97.5% !important;
591
+ }
592
+ .col-md {
593
+ width: 100% !important;
594
+ }
674
595
  }
675
596
 
676
- .bg-dark-300 {
677
- background: var(--background-dark-300);
678
- }
679
-
680
- .bg-dark-100 {
681
- background: var(--background-dark-100);
682
- }
683
-
684
- .bg-light-500 {
685
- background: var(--background-light-500);
686
- }
687
-
688
- .bg-light-300 {
689
- background: var(--background-light-300);
690
- }
691
-
692
- .bg-light-100 {
693
- background: var(--background-light-100);
694
- }
695
-
696
- :root {
697
- --flex-grid-12-gap: 0rem;
698
- --flex-grid-8-gap: 0rem;
699
- --flex-grid-6-gap: 0rem;
700
- --flex-grid-4-gap: 0rem;
701
- --flex-grid-12-col-2: 0rem;
702
- --flex-grid-12-col-3: 0rem;
703
- --flex-grid-12-col-4: 0rem;
704
- --flex-grid-12-col-6: 0rem;
705
- --flex-grid-12-col-8: 0rem;
706
- --flex-grid-8-col-2: 0rem;
707
- --flex-grid-8-col-3: 0rem;
708
- --flex-grid-8-col-4: 0rem;
709
- --flex-grid-8-col-6: 0rem;
710
- --flex-grid-6-col-2: 0rem;
711
- --flex-grid-6-col-3: 0rem;
712
- --flex-grid-6-col-4: 0rem;
713
- --flex-grid-4-col-2: 0rem;
714
- --flex-grid-4-col-3: 0rem;
715
- }
716
-
717
- .xs-grid-8 {
718
- display: grid;
719
- gap: var(--sizing-8);
720
- }
721
-
722
- .xs-grid-12 {
723
- display: grid;
724
- gap: var(--sizing-12);
725
- }
726
-
727
- .xs-grid-16 {
728
- display: grid;
729
- gap: var(--sizing-16);
730
- }
731
-
732
- .xs-grid-col-12 {
733
- grid-template-columns: repeat(12, 1fr);
734
- }
735
-
736
- .xs-grid-col-8 {
737
- grid-template-columns: repeat(8, 1fr);
738
- }
739
-
740
- .xs-grid-col-6 {
741
- grid-template-columns: repeat(6, 1fr);
742
- }
743
-
744
- .xs-grid-col-4 {
745
- grid-template-columns: repeat(4, 1fr);
746
- }
747
-
748
- .xs-grid-col-2 {
749
- grid-template-columns: repeat(2, 1fr);
750
- }
751
-
752
- .xs-grid-col-1 {
753
- grid-template-columns: repeat(1, 1fr);
754
- }
755
-
756
- @media screen and (min-width: 360px) {
757
- .sm-grid-8 {
758
- display: grid;
759
- gap: var(--sizing-8);
597
+ @media only screen and (min-width: 961px) {
598
+ .col-lg-2-5 {
599
+ width: 2.5% !important;
760
600
  }
761
- .sm-grid-12 {
762
- display: grid;
763
- gap: var(--sizing-12);
601
+ .col-lg-5 {
602
+ width: 5% !important;
764
603
  }
765
- .sm-grid-16 {
766
- display: grid;
767
- gap: var(--sizing-16);
604
+ .col-lg-7-5 {
605
+ width: 7.5% !important;
768
606
  }
769
- .sm-grid-col-12 {
770
- grid-template-columns: repeat(12, 1fr);
607
+ .col-lg-10 {
608
+ width: 10% !important;
771
609
  }
772
- .sm-grid-col-8 {
773
- grid-template-columns: repeat(8, 1fr);
610
+ .col-lg-12-5 {
611
+ width: 12.5% !important;
774
612
  }
775
- .sm-grid-col-6 {
776
- grid-template-columns: repeat(6, 1fr);
613
+ .col-lg-15 {
614
+ width: 15% !important;
777
615
  }
778
- .sm-grid-col-4 {
779
- grid-template-columns: repeat(4, 1fr);
616
+ .col-lg-16 {
617
+ width: 16.66% !important;
780
618
  }
781
- .sm-grid-col-2 {
782
- grid-template-columns: repeat(2, 1fr);
619
+ .col-lg-17-5 {
620
+ width: 17.5% !important;
783
621
  }
784
- .sm-grid-col-1 {
785
- grid-template-columns: repeat(1, 1fr);
622
+ .col-lg-20 {
623
+ width: 20% !important;
786
624
  }
787
- }
788
-
789
- @media screen and (min-width: 640px) {
790
- .md-grid-8 {
791
- display: grid;
792
- gap: var(--sizing-8);
625
+ .col-lg-22-5 {
626
+ width: 22.5% !important;
793
627
  }
794
- .md-grid-12 {
795
- display: grid;
796
- gap: var(--sizing-12);
628
+ .col-lg-25 {
629
+ width: 25% !important;
797
630
  }
798
- .md-grid-16 {
799
- display: grid;
800
- gap: var(--sizing-16);
631
+ .col-lg-27-5 {
632
+ width: 27.5% !important;
801
633
  }
802
- .md-grid-col-12 {
803
- grid-template-columns: repeat(12, 1fr);
634
+ .col-lg-30 {
635
+ width: 30% !important;
804
636
  }
805
- .md-grid-col-8 {
806
- grid-template-columns: repeat(8, 1fr);
637
+ .col-lg-32-5 {
638
+ width: 32.5% !important;
807
639
  }
808
- .md-grid-col-6 {
809
- grid-template-columns: repeat(6, 1fr);
640
+ .col-lg-33 {
641
+ width: 33.33% !important;
810
642
  }
811
- .md-grid-col-4 {
812
- grid-template-columns: repeat(4, 1fr);
643
+ .col-lg-35 {
644
+ width: 35% !important;
813
645
  }
814
- .md-grid-col-2 {
815
- grid-template-columns: repeat(2, 1fr);
646
+ .col-lg-37-5 {
647
+ width: 37.5% !important;
816
648
  }
817
- .md-grid-col-1 {
818
- grid-template-columns: repeat(1, 1fr);
649
+ .col-lg-40 {
650
+ width: 40% !important;
819
651
  }
820
- }
821
-
822
- @media screen and (min-width: 960px) {
823
- .lg-grid-8 {
824
- display: grid;
825
- gap: var(--sizing-8);
652
+ .col-lg-42-5 {
653
+ width: 42.5% !important;
826
654
  }
827
- .lg-grid-12 {
828
- display: grid;
829
- gap: var(--sizing-12);
655
+ .col-lg-45 {
656
+ width: 45% !important;
830
657
  }
831
- .lg-grid-16 {
832
- display: grid;
833
- gap: var(--sizing-16);
658
+ .col-lg-47-5 {
659
+ width: 47.5% !important;
834
660
  }
835
- .lg-grid-col-12 {
836
- grid-template-columns: repeat(12, 1fr);
661
+ .col-lg-50 {
662
+ width: 50% !important;
837
663
  }
838
- .lg-grid-col-8 {
839
- grid-template-columns: repeat(8, 1fr);
664
+ .col-lg-52-5 {
665
+ width: 52.5% !important;
840
666
  }
841
- .lg-grid-col-6 {
842
- grid-template-columns: repeat(6, 1fr);
667
+ .col-lg-55 {
668
+ width: 55% !important;
843
669
  }
844
- .lg-grid-col-4 {
845
- grid-template-columns: repeat(4, 1fr);
670
+ .col-lg-57-5 {
671
+ width: 57.5% !important;
846
672
  }
847
- .lg-grid-col-2 {
848
- grid-template-columns: repeat(2, 1fr);
673
+ .col-lg-60 {
674
+ width: 60% !important;
849
675
  }
850
- .lg-grid-col-1 {
851
- grid-template-columns: repeat(1, 1fr);
676
+ .col-lg-62-5 {
677
+ width: 62.5% !important;
852
678
  }
853
- }
854
-
855
- @media screen and (min-width: 1280px) {
856
- .xl-grid-8 {
857
- display: grid;
858
- gap: var(--sizing-8);
679
+ .col-lg-65 {
680
+ width: 65% !important;
859
681
  }
860
- .xl-grid-12 {
861
- display: grid;
862
- gap: var(--sizing-12);
682
+ .col-lg-66 {
683
+ width: 66.66% !important;
863
684
  }
864
- .xl-grid-16 {
865
- display: grid;
866
- gap: var(--sizing-16);
685
+ .col-lg-67-5 {
686
+ width: 67.5% !important;
867
687
  }
868
- .xl-grid-col-12 {
869
- grid-template-columns: repeat(12, 1fr);
688
+ .col-lg-70 {
689
+ width: 70% !important;
870
690
  }
871
- .xl-grid-col-8 {
872
- grid-template-columns: repeat(8, 1fr);
691
+ .col-lg-72-5 {
692
+ width: 72.5% !important;
873
693
  }
874
- .xl-grid-col-6 {
875
- grid-template-columns: repeat(6, 1fr);
694
+ .col-lg-75 {
695
+ width: 75% !important;
876
696
  }
877
- .xl-grid-col-4 {
878
- grid-template-columns: repeat(4, 1fr);
697
+ .col-lg-77-5 {
698
+ width: 77.5% !important;
879
699
  }
880
- .xl-grid-col-2 {
881
- grid-template-columns: repeat(2, 1fr);
700
+ .col-lg-80 {
701
+ width: 80% !important;
882
702
  }
883
- .xl-grid-col-1 {
884
- grid-template-columns: repeat(1, 1fr);
703
+ .col-lg-82-5 {
704
+ width: 82.5% !important;
705
+ }
706
+ .col-lg-85 {
707
+ width: 85% !important;
708
+ }
709
+ .col-lg-87-5 {
710
+ width: 87.5% !important;
711
+ }
712
+ .col-lg-90 {
713
+ width: 90% !important;
714
+ }
715
+ .col-lg-92-5 {
716
+ width: 92.5% !important;
717
+ }
718
+ .col-lg-95 {
719
+ width: 95% !important;
720
+ }
721
+ .col-lg-97-5 {
722
+ width: 97.5% !important;
723
+ }
724
+ .col-lg {
725
+ width: 100% !important;
885
726
  }
886
727
  }
887
728
 
888
- .xs-flex-grid-8 {
889
- display: inline-flex;
890
- flex-wrap: wrap;
891
- gap: var(--sizing-8);
892
- --flex-grid-12-gap: 0.4584rem;
893
- --flex-grid-8-gap: 0.4375rem;
894
- --flex-grid-6-gap: 0.417rem;
895
- --flex-grid-4-gap: 0.375rem;
896
- --flex-grid-12-col-2: 0.425rem;
897
- --flex-grid-12-col-3: 0.3875rem;
898
- --flex-grid-12-col-4: 0.35rem;
899
- --flex-grid-12-col-6: 0.2725rem;
900
- --flex-grid-12-col-8: 0.375rem;
901
- --flex-grid-8-col-2: 0.3875rem;
902
- --flex-grid-8-col-3: 0.325rem;
903
- --flex-grid-8-col-4: 0.275rem;
904
- --flex-grid-8-col-6: 0.225rem;
905
- --flex-grid-6-col-2: 0.3525rem;
906
- --flex-grid-6-col-3: 0.275rem;
907
- --flex-grid-6-col-4: 0.2125rem;
908
- --flex-grid-4-col-2: 0.25rem;
909
- --flex-grid-4-col-3: 0.125rem;
729
+ @media only screen and (min-width: 1241px) {
730
+ .col-xl-2-5 {
731
+ width: 2.5% !important;
732
+ }
733
+ .col-xl-5 {
734
+ width: 5% !important;
735
+ }
736
+ .col-xl-7-5 {
737
+ width: 7.5% !important;
738
+ }
739
+ .col-xl-10 {
740
+ width: 10% !important;
741
+ }
742
+ .col-xl-12-5 {
743
+ width: 12.5% !important;
744
+ }
745
+ .col-xl-15 {
746
+ width: 15% !important;
747
+ }
748
+ .col-xl-16 {
749
+ width: 16.66% !important;
750
+ }
751
+ .col-xl-17-5 {
752
+ width: 17.5% !important;
753
+ }
754
+ .col-xl-20 {
755
+ width: 20% !important;
756
+ }
757
+ .col-xl-22-5 {
758
+ width: 22.5% !important;
759
+ }
760
+ .col-xl-25 {
761
+ width: 25% !important;
762
+ }
763
+ .col-xl-27-5 {
764
+ width: 27.5% !important;
765
+ }
766
+ .col-xl-30 {
767
+ width: 30% !important;
768
+ }
769
+ .col-xl-32-5 {
770
+ width: 32.5% !important;
771
+ }
772
+ .col-xl-33 {
773
+ width: 33.33% !important;
774
+ }
775
+ .col-xl-35 {
776
+ width: 35% !important;
777
+ }
778
+ .col-xl-37-5 {
779
+ width: 37.5% !important;
780
+ }
781
+ .col-xl-40 {
782
+ width: 40% !important;
783
+ }
784
+ .col-xl-42-5 {
785
+ width: 42.5% !important;
786
+ }
787
+ .col-xl-45 {
788
+ width: 45% !important;
789
+ }
790
+ .col-xl-47-5 {
791
+ width: 47.5% !important;
792
+ }
793
+ .col-xl-50 {
794
+ width: 50% !important;
795
+ }
796
+ .col-xl-52-5 {
797
+ width: 52.5% !important;
798
+ }
799
+ .col-xl-55 {
800
+ width: 55% !important;
801
+ }
802
+ .col-xl-57-5 {
803
+ width: 57.5% !important;
804
+ }
805
+ .col-xl-60 {
806
+ width: 60% !important;
807
+ }
808
+ .col-xl-62-5 {
809
+ width: 62.5% !important;
810
+ }
811
+ .col-xl-65 {
812
+ width: 65% !important;
813
+ }
814
+ .col-xl-66 {
815
+ width: 66.66% !important;
816
+ }
817
+ .col-xl-67-5 {
818
+ width: 67.5% !important;
819
+ }
820
+ .col-xl-70 {
821
+ width: 70% !important;
822
+ }
823
+ .col-xl-72-5 {
824
+ width: 72.5% !important;
825
+ }
826
+ .col-xl-75 {
827
+ width: 75% !important;
828
+ }
829
+ .col-xl-77-5 {
830
+ width: 77.5% !important;
831
+ }
832
+ .col-xl-80 {
833
+ width: 80% !important;
834
+ }
835
+ .col-xl-82-5 {
836
+ width: 82.5% !important;
837
+ }
838
+ .col-xl-85 {
839
+ width: 85% !important;
840
+ }
841
+ .col-xl-87-5 {
842
+ width: 87.5% !important;
843
+ }
844
+ .col-xl-90 {
845
+ width: 90% !important;
846
+ }
847
+ .col-xl-92-5 {
848
+ width: 92.5% !important;
849
+ }
850
+ .col-xl-95 {
851
+ width: 95% !important;
852
+ }
853
+ .col-xl-97-5 {
854
+ width: 97.5% !important;
855
+ }
856
+ .col-xl {
857
+ width: 100% !important;
858
+ }
910
859
  }
911
860
 
912
- .xs-flex-grid-12 {
913
- display: inline-flex;
914
- flex-wrap: wrap;
915
- gap: var(--sizing-12);
916
- --flex-grid-12-gap: 0.9140625rem;
917
- --flex-grid-8-gap: 0.875rem;
918
- --flex-grid-6-gap: 0.8309375rem;
919
- --flex-grid-4-gap: 0.75rem;
920
- --flex-grid-12-col-2: 0.828rem;
921
- --flex-grid-12-col-3: 0.75rem;
922
- --flex-grid-12-col-4: 0.6725rem;
923
- --flex-grid-12-col-6: 0.5125rem;
924
- --flex-grid-12-col-8: 0.375rem;
925
- --flex-grid-8-col-2: 0.77275rem;
926
- --flex-grid-8-col-3: 0.65rem;
927
- --flex-grid-8-col-4: 0.5rem;
928
- --flex-grid-8-col-6: 0.275rem;
929
- --flex-grid-6-col-2: 0.675rem;
930
- --flex-grid-6-col-3: 0.5rem;
931
- --flex-grid-6-col-4: 0.355rem;
932
- --flex-grid-4-col-2: 0.5rem;
933
- --flex-grid-4-col-3: 0.275rem;
861
+ :root {
862
+ --z-index-2: 2;
863
+ --z-index-4: 4;
864
+ --z-index-6: 6;
865
+ --z-index-8: 8;
866
+ --z-index-12: 12;
867
+ --z-index-16: 16;
868
+ --z-index-24: 24;
869
+ --z-index-32: 32;
870
+ --shadow-1: 0px 4px 2px -2px rgba(50, 44, 47, 0.02);
871
+ --shadow-2: 0px 4px 8px -2px rgba(50, 44, 47, 0.04);
872
+ --shadow-3: 0px 2px 4px -2px rgba(50, 44, 47, 0.08);
873
+ --shadow-4: 0px 4px 8px -6px rgba(50, 44, 47, 0.03),
874
+ 0px 16px 8px -4px rgba(50, 44, 47, 0.03);
875
+ --shadow-5: 0px 8px 24px -4px rgba(50, 44, 47, 0.08);
876
+ --shadow-6: 0px 8px 24px -4px rgba(50, 44, 47, 0.12);
877
+ --shadow-bottom-light-2: 0px 2px 2px rgba(173, 186, 230, 0.4);
878
+ --shadow-bottom-light-4: 0px 4px 4px rgba(173, 186, 230, 0.4);
879
+ --shadow-bottom-light-8: 0px 8px 8px rgba(173, 186, 230, 0.4);
880
+ --shadow-bottom-light-16: 0px 16px 16px rgba(173, 186, 230, 0.4);
881
+ --shadow-bottom-light-24: 0px 24px 24px rgba(173, 186, 230, 0.4);
882
+ --shadow-bottom-light-32: 0px 32px 32px rgba(173, 186, 230, 0.4);
883
+ --shadow-top-light-2: 0px -2px 2px rgba(173, 186, 230, 0.4);
884
+ --shadow-top-light-4: 0px -4px 4px rgba(173, 186, 230, 0.4);
885
+ --shadow-top-light-8: 0px -8px 8px rgba(173, 186, 230, 0.4);
886
+ --shadow-top-light-16: 0px -16px 16px rgba(173, 186, 230, 0.4);
887
+ --shadow-top-light-24: 0px -24px 24px rgba(173, 186, 230, 0.4);
888
+ --shadow-top-light-32: 0px -32px 32px rgba(173, 186, 230, 0.4);
889
+ --shadow-right-light-2: 2px 0px 2px rgba(173, 186, 230, 0.4);
890
+ --shadow-right-light-4: 4px 0px 4px rgba(173, 186, 230, 0.4);
891
+ --shadow-right-light-8: 8px 0px 8px rgba(173, 186, 230, 0.4);
892
+ --shadow-right-light-16: 16px 0px 16px rgba(173, 186, 230, 0.4);
893
+ --shadow-right-light-24: 24px 0px 24px rgba(173, 186, 230, 0.4);
894
+ --shadow-right-light-32: 32px 0px 32px rgba(173, 186, 230, 0.4);
895
+ --shadow-left-light-2: -2px 0px 2px rgba(173, 186, 230, 0.4);
896
+ --shadow-left-light-4: -4px 0px 4px rgba(173, 186, 230, 0.4);
897
+ --shadow-left-light-8: -8px 0px 8px rgba(173, 186, 230, 0.4);
898
+ --shadow-left-light-16: -16px 0px 16px rgba(173, 186, 230, 0.4);
899
+ --shadow-left-light-24: -24px 0px 24px rgba(173, 186, 230, 0.4);
900
+ --shadow-left-light-32: -32px 0px 32px rgba(173, 186, 230, 0.4);
901
+ --shadow-center-light-2: 0px 0px 2px 0px rgba(173, 186, 230, 0.4);
902
+ --shadow-center-light-4: 0px 0px 4px 0px rgba(173, 186, 230, 0.4);
903
+ --shadow-center-light-8: 0px 0px 8px 0px rgba(173, 186, 230, 0.4);
904
+ --shadow-center-light-16: 0px 0px 16px 0px rgba(173, 186, 230, 0.4);
905
+ --shadow-center-light-24: 0px 0px 24px 0px rgba(173, 186, 230, 0.4);
906
+ --shadow-center-light-32: 0px 0px 32px 0px rgba(173, 186, 230, 0.4);
907
+ --shadow-bottom-dark-2: 0px 2px 2px rgba(50, 44, 47, 0.4);
908
+ --shadow-bottom-dark-4: 0px 4px 4px rgba(50, 44, 47, 0.4);
909
+ --shadow-bottom-dark-8: 0px 8px 8px rgba(50, 44, 47, 0.4);
910
+ --shadow-bottom-dark-16: 0px 16px 16px rgba(50, 44, 47, 0.4);
911
+ --shadow-bottom-dark-24: 0px 24px 24px rgba(50, 44, 47, 0.4);
912
+ --shadow-bottom-dark-32: 0px 32px 32px rgba(50, 44, 47, 0.4);
913
+ --shadow-top-dark-2: 0px -2px 2px rgba(50, 44, 47, 0.4);
914
+ --shadow-top-dark-4: 0px -4px 4px rgba(50, 44, 47, 0.4);
915
+ --shadow-top-dark-8: 0px -8px 8px rgba(50, 44, 47, 0.4);
916
+ --shadow-top-dark-16: 0px -16px 16px rgba(50, 44, 47, 0.4);
917
+ --shadow-top-dark-24: 0px -24px 24px rgba(50, 44, 47, 0.4);
918
+ --shadow-top-dark-32: 0px -32px 32px rgba(50, 44, 47, 0.4);
919
+ --shadow-right-dark-2: 2px 0px 2px rgba(50, 44, 47, 0.4);
920
+ --shadow-right-dark-4: 4px 0px 4px rgba(50, 44, 47, 0.4);
921
+ --shadow-right-dark-8: 8px 0px 8px rgba(50, 44, 47, 0.4);
922
+ --shadow-right-dark-16: 16px 0px 16px rgba(50, 44, 47, 0.4);
923
+ --shadow-right-dark-24: 24px 0px 24px rgba(50, 44, 47, 0.4);
924
+ --shadow-right-dark-32: 32px 0px 32px rgba(50, 44, 47, 0.4);
925
+ --shadow-left-dark-2: -2px 0px 2px rgba(50, 44, 47, 0.4);
926
+ --shadow-left-dark-4: -4px 0px 4px rgba(50, 44, 47, 0.4);
927
+ --shadow-left-dark-8: -8px 0px 8px rgba(50, 44, 47, 0.4);
928
+ --shadow-left-dark-16: -16px 0px 16px rgba(50, 44, 47, 0.4);
929
+ --shadow-left-dark-24: -24px 0px 24px rgba(50, 44, 47, 0.4);
930
+ --shadow-left-dark-32: -32px 0px 32px rgba(50, 44, 47, 0.4);
931
+ --shadow-center-dark-2: 0px 0px 2px 0px rgba(50, 44, 47, 0.4);
932
+ --shadow-center-dark-4: 0px 0px 4px 0px rgba(50, 44, 47, 0.4);
933
+ --shadow-center-dark-8: 0px 0px 8px 0px rgba(50, 44, 47, 0.4);
934
+ --shadow-center-dark-16: 0px 0px 16px 0px rgba(50, 44, 47, 0.4);
935
+ --shadow-center-dark-24: 0px 0px 24px 0px rgba(50, 44, 47, 0.4);
936
+ --shadow-center-dark-32: 0px 0px 32px 0px rgba(50, 44, 47, 0.4);
934
937
  }
935
938
 
936
- .xs-flex-grid-16 {
937
- display: inline-flex;
938
- flex-wrap: wrap;
939
- gap: var(--sizing-16);
940
- --flex-grid-12-gap: 0.9140625rem;
941
- --flex-grid-8-gap: 0.875rem;
942
- --flex-grid-6-gap: 0.8309375rem;
943
- --flex-grid-4-gap: 0.75rem;
944
- --flex-grid-12-col-2: 0.8325rem;
945
- --flex-grid-12-col-3: 0.75rem;
946
- --flex-grid-12-col-4: 0.6725rem;
947
- --flex-grid-12-col-6: 0.5125rem;
948
- --flex-grid-12-col-8: 0.375rem;
949
- --flex-grid-8-col-2: 0.77275rem;
950
- --flex-grid-8-col-3: 0.65rem;
951
- --flex-grid-8-col-4: 0.5rem;
952
- --flex-grid-8-col-6: 0.275rem;
953
- --flex-grid-6-col-2: 0.675rem;
954
- --flex-grid-6-col-3: 0.5rem;
955
- --flex-grid-6-col-4: 0.355rem;
956
- --flex-grid-4-col-2: 0.5rem;
957
- --flex-grid-4-col-3: 0.275rem;
939
+ :root {
940
+ --background-theme-500: var(--background-light-500);
941
+ --background-theme-300: var(--background-light-300);
942
+ --background-theme-100: var(--background-light-100);
943
+ --color-theme-500: var(--color-dark-500);
944
+ --color-theme-300: var(--color-dark-300);
945
+ --color-theme-100: var(--color-dark-100);
946
+ --border-theme-500: var(--border-dark-500);
947
+ --border-theme-300: var(--border-dark-300);
948
+ --border-theme-100: var(--border-dark-100);
949
+ --border-1-theme-500: var(--border-1) solid var(--border-dark-500);
950
+ --border-2-theme-500: var(--border-2) solid var(--border-dark-500);
951
+ --border-4-theme-500: var(--border-4) solid var(--border-dark-500);
952
+ --border-1-theme-300: var(--border-1) solid var(--border-dark-300);
953
+ --border-2-theme-300: var(--border-2) solid var(--border-dark-300);
954
+ --border-4-theme-300: var(--border-4) solid var(--border-dark-300);
955
+ --border-1-theme-100: var(--border-1) solid var(--border-dark-100);
956
+ --border-2-theme-100: var(--border-2) solid var(--border-dark-100);
957
+ --border-4-theme-100: var(--border-4) solid var(--border-dark-100);
958
+ --color-rolster-900: var(--color-base-900);
959
+ --color-rolster-700: var(--color-base-700);
960
+ --color-rolster-500: var(--color-base-500);
961
+ --color-rolster-300: var(--color-base-300);
962
+ --color-rolster-100: var(--color-base-100);
963
+ --skeleton-rolster-500: var(--skeleton-base-500);
964
+ --skeleton-rolster-300: var(--skeleton-base-300);
965
+ --skeleton-rolster-100: var(--skeleton-base-100);
966
+ --border-1-rolster-900: var(--border-1) solid var(--color-base-900);
967
+ --border-2-rolster-900: var(--border-2) solid var(--color-base-900);
968
+ --border-4-rolster-900: var(--border-4) solid var(--color-base-900);
969
+ --border-1-rolster-700: var(--border-1) solid var(--color-base-700);
970
+ --border-2-rolster-700: var(--border-2) solid var(--color-base-700);
971
+ --border-4-rolster-700: var(--border-4) solid var(--color-base-700);
972
+ --border-1-rolster-500: var(--border-1) solid var(--color-base-500);
973
+ --border-2-rolster-500: var(--border-2) solid var(--color-base-500);
974
+ --border-4-rolster-500: var(--border-4) solid var(--color-base-500);
975
+ --border-1-rolster-300: var(--border-1) solid var(--color-base-300);
976
+ --border-2-rolster-300: var(--border-2) solid var(--color-base-300);
977
+ --border-4-rolster-300: var(--border-4) solid var(--color-base-300);
978
+ --border-1-rolster-100: var(--border-1) solid var(--color-base-100);
979
+ --border-2-rolster-100: var(--border-2) solid var(--color-base-100);
980
+ --border-4-rolster-100: var(--border-4) solid var(--color-base-100);
981
+ --box-shadow-rolster-500: var(--box-shadow-base-500);
982
+ --backdrop-rolster-500: var(--backdrop-base-500);
983
+ --gradient-rolster-500: var(--gradient-base-500);
984
+ --shadow-bottom-theme-2: var(--shadow-bottom-light-2);
985
+ --shadow-bottom-theme-4: var(--shadow-bottom-light-4);
986
+ --shadow-bottom-theme-8: var(--shadow-bottom-light-8);
987
+ --shadow-bottom-theme-16: var(--shadow-bottom-light-16);
988
+ --shadow-bottom-theme-24: var(--shadow-bottom-light-24);
989
+ --shadow-bottom-theme-32: var(--shadow-bottom-light-32);
990
+ --shadow-top-theme-2: var(--shadow-top-light-2);
991
+ --shadow-top-theme-4: var(--shadow-top-light-4);
992
+ --shadow-top-theme-8: var(--shadow-top-light-8);
993
+ --shadow-top-theme-16: var(--shadow-top-light-16);
994
+ --shadow-top-theme-24: var(--shadow-top-light-24);
995
+ --shadow-top-theme-32: var(--shadow-top-light-32);
996
+ --shadow-right-theme-2: var(--shadow-right-light-2);
997
+ --shadow-right-theme-4: var(--shadow-right-light-4);
998
+ --shadow-right-theme-8: var(--shadow-right-light-8);
999
+ --shadow-right-theme-16: var(--shadow-right-light-16);
1000
+ --shadow-right-theme-24: var(--shadow-right-light-24);
1001
+ --shadow-right-theme-32: var(--shadow-right-light-32);
1002
+ --shadow-left-theme-2: var(--shadow-left-light-2);
1003
+ --shadow-left-theme-4: var(--shadow-left-light-4);
1004
+ --shadow-left-theme-8: var(--shadow-left-light-8);
1005
+ --shadow-left-theme-16: var(--shadow-left-light-16);
1006
+ --shadow-left-theme-24: var(--shadow-left-light-24);
1007
+ --shadow-left-theme-32: var(--shadow-left-light-32);
1008
+ --shadow-center-theme-2: var(--shadow-center-light-2);
1009
+ --shadow-center-theme-4: var(--shadow-center-light-4);
1010
+ --shadow-center-theme-8: var(--shadow-center-light-8);
1011
+ --shadow-center-theme-16: var(--shadow-center-light-16);
1012
+ --shadow-center-theme-24: var(--shadow-center-light-24);
1013
+ --shadow-center-theme-32: var(--shadow-center-light-32);
958
1014
  }
959
1015
 
960
- .xs-flex-grid-col-4 > * {
961
- width: calc(25% - var(--flex-grid-4-gap));
962
- }
963
- .xs-flex-grid-col-4 > *.xs-flex-col-1 {
964
- width: calc(25% - var(--flex-grid-4-gap));
965
- }
966
- .xs-flex-grid-col-4 > *.xs-flex-col-2 {
967
- width: calc(50% - var(--flex-grid-4-col-2));
968
- }
969
- .xs-flex-grid-col-4 > *.xs-flex-col-3 {
970
- width: calc(75% - var(--flex-grid-4-col-3));
971
- }
972
- .xs-flex-grid-col-4 > *.xs-flex-col-4,
973
- .xs-flex-grid-col-4 > *.xs-flex-col-6,
974
- .xs-flex-grid-col-4 > *.xs-flex-col-8,
975
- .xs-flex-grid-col-4 > *.xs-flex-col-12 {
976
- width: 100%;
1016
+ *[rls-theme='success'] {
1017
+ --color-rolster-900: var(--color-success-900);
1018
+ --color-rolster-700: var(--color-success-700);
1019
+ --color-rolster-500: var(--color-success-500);
1020
+ --color-rolster-300: var(--color-success-300);
1021
+ --color-rolster-100: var(--color-success-100);
1022
+ --skeleton-rolster-500: var(--skeleton-success-500);
1023
+ --skeleton-rolster-300: var(--skeleton-success-300);
1024
+ --skeleton-rolster-100: var(--skeleton-success-100);
1025
+ --border-1-rolster-900: var(--border-1) solid var(--color-success-900);
1026
+ --border-2-rolster-900: var(--border-2) solid var(--color-success-900);
1027
+ --border-4-rolster-900: var(--border-4) solid var(--color-success-900);
1028
+ --border-1-rolster-700: var(--border-1) solid var(--color-success-700);
1029
+ --border-2-rolster-700: var(--border-2) solid var(--color-success-700);
1030
+ --border-4-rolster-700: var(--border-4) solid var(--color-success-700);
1031
+ --border-1-rolster-500: var(--border-1) solid var(--color-success-500);
1032
+ --border-2-rolster-500: var(--border-2) solid var(--color-success-500);
1033
+ --border-4-rolster-500: var(--border-4) solid var(--color-success-500);
1034
+ --border-1-rolster-300: var(--border-1) solid var(--color-success-300);
1035
+ --border-2-rolster-300: var(--border-2) solid var(--color-success-300);
1036
+ --border-4-rolster-300: var(--border-4) solid var(--color-success-300);
1037
+ --border-1-rolster-100: var(--border-1) solid var(--color-success-100);
1038
+ --border-2-rolster-100: var(--border-2) solid var(--color-success-100);
1039
+ --border-4-rolster-100: var(--border-4) solid var(--color-success-100);
1040
+ --box-shadow-rolster-500: var(--box-shadow-success-500);
1041
+ --backdrop-rolster-500: var(--backdrop-success-500);
1042
+ --gradient-rolster-500: var(--gradient-success-500);
977
1043
  }
978
1044
 
979
- .xs-flex-grid-col-6 > * {
980
- width: calc(16.66% - var(--flex-grid-6-gap));
981
- }
982
- .xs-flex-grid-col-6 > *.xs-flex-col-1 {
983
- width: calc(16.66% - var(--flex-grid-6-gap));
984
- }
985
- .xs-flex-grid-col-6 > *.xs-flex-col-2 {
986
- width: calc(33.34% - var(--flex-grid-6-col-2));
987
- }
988
- .xs-flex-grid-col-6 > *.xs-flex-col-3 {
989
- width: calc(50% - var(--flex-grid-6-col-3));
990
- }
991
- .xs-flex-grid-col-6 > *.xs-flex-col-4 {
992
- width: calc(66.67% - var(--flex-grid-6-col-4));
993
- }
994
- .xs-flex-grid-col-6 > *.xs-flex-col-6,
995
- .xs-flex-grid-col-6 > *.xs-flex-col-8,
996
- .xs-flex-grid-col-6 > *.xs-flex-col-12 {
997
- width: 100%;
1045
+ *[rls-theme='info'] {
1046
+ --color-rolster-900: var(--color-info-900);
1047
+ --color-rolster-700: var(--color-info-700);
1048
+ --color-rolster-500: var(--color-info-500);
1049
+ --color-rolster-300: var(--color-info-300);
1050
+ --color-rolster-100: var(--color-info-100);
1051
+ --skeleton-rolster-500: var(--skeleton-info-500);
1052
+ --skeleton-rolster-300: var(--skeleton-info-300);
1053
+ --skeleton-rolster-100: var(--skeleton-info-100);
1054
+ --border-1-rolster-900: var(--border-1) solid var(--color-info-900);
1055
+ --border-2-rolster-900: var(--border-2) solid var(--color-info-900);
1056
+ --border-4-rolster-900: var(--border-4) solid var(--color-info-900);
1057
+ --border-1-rolster-700: var(--border-1) solid var(--color-info-700);
1058
+ --border-2-rolster-700: var(--border-2) solid var(--color-info-700);
1059
+ --border-4-rolster-700: var(--border-4) solid var(--color-info-700);
1060
+ --border-1-rolster-500: var(--border-1) solid var(--color-info-500);
1061
+ --border-2-rolster-500: var(--border-2) solid var(--color-info-500);
1062
+ --border-4-rolster-500: var(--border-4) solid var(--color-info-500);
1063
+ --border-1-rolster-300: var(--border-1) solid var(--color-info-300);
1064
+ --border-2-rolster-300: var(--border-2) solid var(--color-info-300);
1065
+ --border-4-rolster-300: var(--border-4) solid var(--color-info-300);
1066
+ --border-1-rolster-100: var(--border-1) solid var(--color-info-100);
1067
+ --border-2-rolster-100: var(--border-2) solid var(--color-info-100);
1068
+ --border-4-rolster-100: var(--border-4) solid var(--color-info-100);
1069
+ --box-shadow-rolster-500: var(--box-shadow-info-500);
1070
+ --backdrop-rolster-500: var(--backdrop-info-500);
1071
+ --gradient-rolster-500: var(--gradient-info-500);
998
1072
  }
999
1073
 
1000
- .xs-flex-grid-col-8 > * {
1001
- width: calc(12.5% - var(--flex-grid-8-gap));
1002
- }
1003
- .xs-flex-grid-col-8 > *.xs-flex-col-1 {
1004
- width: calc(12.5% - var(--flex-grid-8-gap));
1005
- }
1006
- .xs-flex-grid-col-8 > *.xs-flex-col-2 {
1007
- width: calc(25% - var(--flex-grid-8-col-2));
1008
- }
1009
- .xs-flex-grid-col-8 > *.xs-flex-col-3 {
1010
- width: calc(37.5% - var(--flex-grid-8-col-3));
1011
- }
1012
- .xs-flex-grid-col-8 > *.xs-flex-col-4 {
1013
- width: calc(50% - var(--flex-grid-8-col-4));
1074
+ *[rls-theme='happy'] {
1075
+ --color-rolster-900: var(--color-happy-900);
1076
+ --color-rolster-700: var(--color-happy-700);
1077
+ --color-rolster-500: var(--color-happy-500);
1078
+ --color-rolster-300: var(--color-happy-300);
1079
+ --color-rolster-100: var(--color-happy-100);
1080
+ --skeleton-rolster-500: var(--skeleton-happy-500);
1081
+ --skeleton-rolster-300: var(--skeleton-happy-300);
1082
+ --skeleton-rolster-100: var(--skeleton-happy-100);
1083
+ --border-1-rolster-900: var(--border-1) solid var(--color-happy-900);
1084
+ --border-2-rolster-900: var(--border-2) solid var(--color-happy-900);
1085
+ --border-4-rolster-900: var(--border-4) solid var(--color-happy-900);
1086
+ --border-1-rolster-700: var(--border-1) solid var(--color-happy-700);
1087
+ --border-2-rolster-700: var(--border-2) solid var(--color-happy-700);
1088
+ --border-4-rolster-700: var(--border-4) solid var(--color-happy-700);
1089
+ --border-1-rolster-500: var(--border-1) solid var(--color-happy-500);
1090
+ --border-2-rolster-500: var(--border-2) solid var(--color-happy-500);
1091
+ --border-4-rolster-500: var(--border-4) solid var(--color-happy-500);
1092
+ --border-1-rolster-300: var(--border-1) solid var(--color-happy-300);
1093
+ --border-2-rolster-300: var(--border-2) solid var(--color-happy-300);
1094
+ --border-4-rolster-300: var(--border-4) solid var(--color-happy-300);
1095
+ --border-1-rolster-100: var(--border-1) solid var(--color-happy-100);
1096
+ --border-2-rolster-100: var(--border-2) solid var(--color-happy-100);
1097
+ --border-4-rolster-100: var(--border-4) solid var(--color-happy-100);
1098
+ --box-shadow-rolster-500: var(--box-shadow-happy-500);
1099
+ --backdrop-rolster-500: var(--backdrop-happy-500);
1100
+ --gradient-rolster-500: var(--gradient-happy-500);
1014
1101
  }
1015
- .xs-flex-grid-col-8 > *.xs-flex-col-6 {
1016
- width: calc(75% - var(--flex-grid-8-col-6));
1102
+
1103
+ *[rls-theme='warning'] {
1104
+ --color-rolster-900: var(--color-warning-900);
1105
+ --color-rolster-700: var(--color-warning-700);
1106
+ --color-rolster-500: var(--color-warning-500);
1107
+ --color-rolster-300: var(--color-warning-300);
1108
+ --color-rolster-100: var(--color-warning-100);
1109
+ --skeleton-rolster-500: var(--skeleton-warning-500);
1110
+ --skeleton-rolster-300: var(--skeleton-warning-300);
1111
+ --skeleton-rolster-100: var(--skeleton-warning-100);
1112
+ --border-1-rolster-900: var(--border-1) solid var(--color-warning-900);
1113
+ --border-2-rolster-900: var(--border-2) solid var(--color-warning-900);
1114
+ --border-4-rolster-900: var(--border-4) solid var(--color-warning-900);
1115
+ --border-1-rolster-700: var(--border-1) solid var(--color-warning-700);
1116
+ --border-2-rolster-700: var(--border-2) solid var(--color-warning-700);
1117
+ --border-4-rolster-700: var(--border-4) solid var(--color-warning-700);
1118
+ --border-1-rolster-500: var(--border-1) solid var(--color-warning-500);
1119
+ --border-2-rolster-500: var(--border-2) solid var(--color-warning-500);
1120
+ --border-4-rolster-500: var(--border-4) solid var(--color-warning-500);
1121
+ --border-1-rolster-300: var(--border-1) solid var(--color-warning-300);
1122
+ --border-2-rolster-300: var(--border-2) solid var(--color-warning-300);
1123
+ --border-4-rolster-300: var(--border-4) solid var(--color-warning-300);
1124
+ --border-1-rolster-100: var(--border-1) solid var(--color-warning-100);
1125
+ --border-2-rolster-100: var(--border-2) solid var(--color-warning-100);
1126
+ --border-4-rolster-100: var(--border-4) solid var(--color-warning-100);
1127
+ --box-shadow-rolster-500: var(--box-shadow-warning-500);
1128
+ --backdrop-rolster-500: var(--backdrop-warning-500);
1129
+ --gradient-rolster-500: var(--gradient-warning-500);
1017
1130
  }
1018
- .xs-flex-grid-col-8 > *.xs-flex-col-8,
1019
- .xs-flex-grid-col-8 > *.xs-flex-col-12 {
1131
+
1132
+ *[rls-theme='danger'] {
1133
+ --color-rolster-900: var(--color-danger-900);
1134
+ --color-rolster-700: var(--color-danger-700);
1135
+ --color-rolster-500: var(--color-danger-500);
1136
+ --color-rolster-300: var(--color-danger-300);
1137
+ --color-rolster-100: var(--color-danger-100);
1138
+ --skeleton-rolster-500: var(--skeleton-danger-500);
1139
+ --skeleton-rolster-300: var(--skeleton-danger-300);
1140
+ --skeleton-rolster-100: var(--skeleton-danger-100);
1141
+ --border-1-rolster-900: var(--border-1) solid var(--color-danger-900);
1142
+ --border-2-rolster-900: var(--border-2) solid var(--color-danger-900);
1143
+ --border-4-rolster-900: var(--border-4) solid var(--color-danger-900);
1144
+ --border-1-rolster-700: var(--border-1) solid var(--color-danger-700);
1145
+ --border-2-rolster-700: var(--border-2) solid var(--color-danger-700);
1146
+ --border-4-rolster-700: var(--border-4) solid var(--color-danger-700);
1147
+ --border-1-rolster-500: var(--border-1) solid var(--color-danger-500);
1148
+ --border-2-rolster-500: var(--border-2) solid var(--color-danger-500);
1149
+ --border-4-rolster-500: var(--border-4) solid var(--color-danger-500);
1150
+ --border-1-rolster-300: var(--border-1) solid var(--color-danger-300);
1151
+ --border-2-rolster-300: var(--border-2) solid var(--color-danger-300);
1152
+ --border-4-rolster-300: var(--border-4) solid var(--color-danger-300);
1153
+ --border-1-rolster-100: var(--border-1) solid var(--color-danger-100);
1154
+ --border-2-rolster-100: var(--border-2) solid var(--color-danger-100);
1155
+ --border-4-rolster-100: var(--border-4) solid var(--color-danger-100);
1156
+ --box-shadow-rolster-500: var(--box-shadow-danger-500);
1157
+ --backdrop-rolster-500: var(--backdrop-danger-500);
1158
+ --gradient-rolster-500: var(--gradient-danger-500);
1159
+ }
1160
+
1161
+ :root {
1162
+ --font-weight-thin: 100;
1163
+ --font-weight-extra-light: 200;
1164
+ --font-weight-light: 300;
1165
+ --font-weight-regular: 400;
1166
+ --font-weight-medium: 500;
1167
+ --font-weight-semibold: 600;
1168
+ --font-weight-bold: 700;
1169
+ --font-weight-extrabold: 800;
1170
+ --font-weight-black: 900;
1171
+ }
1172
+
1173
+ :root {
1174
+ --rolster-font-family: -rolster-system-font, -apple-system, BlinkMacSystemFont,
1175
+ 'Segoe UI', Roboto, Helvetica;
1176
+ }
1177
+
1178
+ html {
1179
+ font-size: var(--rolster-font-size, 16px);
1180
+ font-family: var(--rolster-font-family);
1181
+ }
1182
+
1183
+ body {
1184
+ position: absolute;
1185
+ top: 0rem;
1186
+ bottom: 0rem;
1187
+ left: 0rem;
1188
+ right: 0rem;
1189
+ margin: 0rem;
1190
+ padding: 0rem;
1191
+ -webkit-tap-highlight-color: transparent;
1192
+ background: var(--background-theme-300);
1193
+ }
1194
+
1195
+ div {
1196
+ position: relative;
1020
1197
  width: 100%;
1021
1198
  }
1022
1199
 
1023
- .xs-flex-grid-col-12 > * {
1024
- width: calc(8.33% - var(--flex-grid-12-gap));
1200
+ audio,
1201
+ canvas,
1202
+ progress,
1203
+ video {
1204
+ vertical-align: baseline;
1025
1205
  }
1026
- .xs-flex-grid-col-12 > *.xs-flex-col-1 {
1027
- width: calc(8.33% - var(--flex-grid-12-gap));
1206
+
1207
+ audio:not([controls]) {
1208
+ display: none;
1209
+ height: 0rem;
1028
1210
  }
1029
- .xs-flex-grid-col-12 > *.xs-flex-col-2 {
1030
- width: calc(16.66% - var(--flex-grid-12-col-2));
1211
+
1212
+ b,
1213
+ strong {
1214
+ font-weight: bold;
1031
1215
  }
1032
- .xs-flex-grid-col-12 > *.xs-flex-col-3 {
1033
- width: calc(25% - var(--flex-grid-12-col-3));
1216
+
1217
+ img {
1218
+ border: 0rem;
1034
1219
  }
1035
- .xs-flex-grid-col-12 > *.xs-flex-col-4 {
1036
- width: calc(33.33% - var(--flex-grid-12-col-4));
1220
+
1221
+ svg:not(:root) {
1222
+ overflow: hidden;
1037
1223
  }
1038
- .xs-flex-grid-col-12 > *.xs-flex-col-6 {
1039
- width: calc(50% - var(--flex-grid-12-col-6));
1224
+
1225
+ figure {
1226
+ margin: 1rem 40rem;
1040
1227
  }
1041
- .xs-flex-grid-col-12 > *.xs-flex-col-8 {
1042
- width: calc(66.66% - var(--flex-grid-12-col-8));
1228
+
1229
+ hr {
1230
+ height: 0.0625rem;
1231
+ border-width: 0rem;
1232
+ box-sizing: content-box;
1043
1233
  }
1044
- .xs-flex-grid-col-12 > *.xs-flex-col-12 {
1045
- width: 100%;
1234
+
1235
+ pre {
1236
+ overflow: auto;
1046
1237
  }
1047
1238
 
1048
- @media screen and (min-width: 360px) {
1049
- .sm-flex-grid-8 {
1050
- display: inline-flex;
1051
- flex-wrap: wrap;
1052
- gap: var(--sizing-8);
1053
- --flex-grid-12-gap: 0.4584rem;
1054
- --flex-grid-8-gap: 0.4375rem;
1055
- --flex-grid-6-gap: 0.417rem;
1056
- --flex-grid-4-gap: 0.375rem;
1057
- --flex-grid-12-col-2: 0.425rem;
1058
- --flex-grid-12-col-3: 0.3875rem;
1059
- --flex-grid-12-col-4: 0.35rem;
1060
- --flex-grid-12-col-6: 0.2725rem;
1061
- --flex-grid-12-col-8: 0.375rem;
1062
- --flex-grid-8-col-2: 0.3875rem;
1063
- --flex-grid-8-col-3: 0.325rem;
1064
- --flex-grid-8-col-4: 0.275rem;
1065
- --flex-grid-8-col-6: 0.225rem;
1066
- --flex-grid-6-col-2: 0.3525rem;
1067
- --flex-grid-6-col-3: 0.275rem;
1068
- --flex-grid-6-col-4: 0.2125rem;
1069
- --flex-grid-4-col-2: 0.25rem;
1070
- --flex-grid-4-col-3: 0.125rem;
1071
- }
1072
- .sm-flex-grid-12 {
1073
- display: inline-flex;
1074
- flex-wrap: wrap;
1075
- gap: var(--sizing-12);
1076
- --flex-grid-12-gap: 0.9140625rem;
1077
- --flex-grid-8-gap: 0.875rem;
1078
- --flex-grid-6-gap: 0.8309375rem;
1079
- --flex-grid-4-gap: 0.75rem;
1080
- --flex-grid-12-col-2: 0.828rem;
1081
- --flex-grid-12-col-3: 0.75rem;
1082
- --flex-grid-12-col-4: 0.6725rem;
1083
- --flex-grid-12-col-6: 0.5125rem;
1084
- --flex-grid-12-col-8: 0.375rem;
1085
- --flex-grid-8-col-2: 0.77275rem;
1086
- --flex-grid-8-col-3: 0.65rem;
1087
- --flex-grid-8-col-4: 0.5rem;
1088
- --flex-grid-8-col-6: 0.275rem;
1089
- --flex-grid-6-col-2: 0.675rem;
1090
- --flex-grid-6-col-3: 0.5rem;
1091
- --flex-grid-6-col-4: 0.355rem;
1092
- --flex-grid-4-col-2: 0.5rem;
1093
- --flex-grid-4-col-3: 0.275rem;
1094
- }
1095
- .sm-flex-grid-16 {
1096
- display: inline-flex;
1097
- flex-wrap: wrap;
1098
- gap: var(--sizing-16);
1099
- --flex-grid-12-gap: 0.9140625rem;
1100
- --flex-grid-8-gap: 0.875rem;
1101
- --flex-grid-6-gap: 0.8309375rem;
1102
- --flex-grid-4-gap: 0.75rem;
1103
- --flex-grid-12-col-2: 0.8325rem;
1104
- --flex-grid-12-col-3: 0.75rem;
1105
- --flex-grid-12-col-4: 0.6725rem;
1106
- --flex-grid-12-col-6: 0.5125rem;
1107
- --flex-grid-12-col-8: 0.375rem;
1108
- --flex-grid-8-col-2: 0.77275rem;
1109
- --flex-grid-8-col-3: 0.65rem;
1110
- --flex-grid-8-col-4: 0.5rem;
1111
- --flex-grid-8-col-6: 0.275rem;
1112
- --flex-grid-6-col-2: 0.675rem;
1113
- --flex-grid-6-col-3: 0.5rem;
1114
- --flex-grid-6-col-4: 0.355rem;
1115
- --flex-grid-4-col-2: 0.5rem;
1116
- --flex-grid-4-col-3: 0.275rem;
1117
- }
1118
- .sm-flex-grid-col-4 > * {
1119
- width: calc(25% - var(--flex-grid-4-gap));
1120
- }
1121
- .sm-flex-grid-col-4 > *.sm-flex-col-1 {
1122
- width: calc(25% - var(--flex-grid-4-gap));
1123
- }
1124
- .sm-flex-grid-col-4 > *.sm-flex-col-2 {
1125
- width: calc(50% - var(--flex-grid-4-col-2));
1126
- }
1127
- .sm-flex-grid-col-4 > *.sm-flex-col-3 {
1128
- width: calc(75% - var(--flex-grid-4-col-3));
1129
- }
1130
- .sm-flex-grid-col-4 > *.sm-flex-col-4,
1131
- .sm-flex-grid-col-4 > *.sm-flex-col-6,
1132
- .sm-flex-grid-col-4 > *.sm-flex-col-8,
1133
- .sm-flex-grid-col-4 > *.sm-flex-col-12 {
1134
- width: 100%;
1135
- }
1136
- .sm-flex-grid-col-6 > * {
1137
- width: calc(16.66% - var(--flex-grid-6-gap));
1138
- }
1139
- .sm-flex-grid-col-6 > *.sm-flex-col-1 {
1140
- width: calc(16.66% - var(--flex-grid-6-gap));
1141
- }
1142
- .sm-flex-grid-col-6 > *.sm-flex-col-2 {
1143
- width: calc(33.34% - var(--flex-grid-6-col-2));
1144
- }
1145
- .sm-flex-grid-col-6 > *.sm-flex-col-3 {
1146
- width: calc(50% - var(--flex-grid-6-col-3));
1147
- }
1148
- .sm-flex-grid-col-6 > *.sm-flex-col-4 {
1149
- width: calc(66.67% - var(--flex-grid-6-col-4));
1150
- }
1151
- .sm-flex-grid-col-6 > *.sm-flex-col-6,
1152
- .sm-flex-grid-col-6 > *.sm-flex-col-8,
1153
- .sm-flex-grid-col-6 > *.sm-flex-col-12 {
1154
- width: 100%;
1155
- }
1156
- .sm-flex-grid-col-8 > * {
1157
- width: calc(12.5% - var(--flex-grid-8-gap));
1158
- }
1159
- .sm-flex-grid-col-8 > *.sm-flex-col-1 {
1160
- width: calc(12.5% - var(--flex-grid-8-gap));
1161
- }
1162
- .sm-flex-grid-col-8 > *.sm-flex-col-2 {
1163
- width: calc(25% - var(--flex-grid-8-col-2));
1164
- }
1165
- .sm-flex-grid-col-8 > *.sm-flex-col-3 {
1166
- width: calc(37.5% - var(--flex-grid-8-col-3));
1167
- }
1168
- .sm-flex-grid-col-8 > *.sm-flex-col-4 {
1169
- width: calc(50% - var(--flex-grid-8-col-4));
1170
- }
1171
- .sm-flex-grid-col-8 > *.sm-flex-col-6 {
1172
- width: calc(75% - var(--flex-grid-8-col-6));
1173
- }
1174
- .sm-flex-grid-col-8 > *.sm-flex-col-8,
1175
- .sm-flex-grid-col-8 > *.sm-flex-col-12 {
1176
- width: 100%;
1177
- }
1178
- .sm-flex-grid-col-12 > * {
1179
- width: calc(8.33% - var(--flex-grid-12-gap));
1180
- }
1181
- .sm-flex-grid-col-12 > *.sm-flex-col-1 {
1182
- width: calc(8.33% - var(--flex-grid-12-gap));
1183
- }
1184
- .sm-flex-grid-col-12 > *.sm-flex-col-2 {
1185
- width: calc(16.66% - var(--flex-grid-12-col-2));
1186
- }
1187
- .sm-flex-grid-col-12 > *.sm-flex-col-3 {
1188
- width: calc(25% - var(--flex-grid-12-col-3));
1189
- }
1190
- .sm-flex-grid-col-12 > *.sm-flex-col-4 {
1191
- width: calc(33.33% - var(--flex-grid-12-col-4));
1192
- }
1193
- .sm-flex-grid-col-12 > *.sm-flex-col-6 {
1194
- width: calc(50% - var(--flex-grid-12-col-6));
1195
- }
1196
- .sm-flex-grid-col-12 > *.sm-flex-col-8 {
1197
- width: calc(66.66% - var(--flex-grid-12-col-8));
1198
- }
1199
- .sm-flex-grid-col-12 > *.sm-flex-col-12 {
1200
- width: 100%;
1201
- }
1239
+ code,
1240
+ kbd,
1241
+ pre,
1242
+ samp {
1243
+ font-family: inherit;
1244
+ font-size: 1rem;
1202
1245
  }
1203
1246
 
1204
- @media screen and (min-width: 640px) {
1205
- .md-flex-grid-8 {
1206
- display: inline-flex;
1207
- flex-wrap: wrap;
1208
- gap: var(--sizing-8);
1209
- --flex-grid-12-gap: 0.4584rem;
1210
- --flex-grid-8-gap: 0.4375rem;
1211
- --flex-grid-6-gap: 0.417rem;
1212
- --flex-grid-4-gap: 0.375rem;
1213
- --flex-grid-12-col-2: 0.425rem;
1214
- --flex-grid-12-col-3: 0.3875rem;
1215
- --flex-grid-12-col-4: 0.35rem;
1216
- --flex-grid-12-col-6: 0.2725rem;
1217
- --flex-grid-12-col-8: 0.375rem;
1218
- --flex-grid-8-col-2: 0.3875rem;
1219
- --flex-grid-8-col-3: 0.325rem;
1220
- --flex-grid-8-col-4: 0.275rem;
1221
- --flex-grid-8-col-6: 0.225rem;
1222
- --flex-grid-6-col-2: 0.3525rem;
1223
- --flex-grid-6-col-3: 0.275rem;
1224
- --flex-grid-6-col-4: 0.2125rem;
1225
- --flex-grid-4-col-2: 0.25rem;
1226
- --flex-grid-4-col-3: 0.125rem;
1227
- }
1228
- .md-flex-grid-12 {
1229
- display: inline-flex;
1230
- flex-wrap: wrap;
1231
- gap: var(--sizing-12);
1232
- --flex-grid-12-gap: 0.9140625rem;
1233
- --flex-grid-8-gap: 0.875rem;
1234
- --flex-grid-6-gap: 0.8309375rem;
1235
- --flex-grid-4-gap: 0.75rem;
1236
- --flex-grid-12-col-2: 0.828rem;
1237
- --flex-grid-12-col-3: 0.75rem;
1238
- --flex-grid-12-col-4: 0.6725rem;
1239
- --flex-grid-12-col-6: 0.5125rem;
1240
- --flex-grid-12-col-8: 0.375rem;
1241
- --flex-grid-8-col-2: 0.77275rem;
1242
- --flex-grid-8-col-3: 0.65rem;
1243
- --flex-grid-8-col-4: 0.5rem;
1244
- --flex-grid-8-col-6: 0.275rem;
1245
- --flex-grid-6-col-2: 0.675rem;
1246
- --flex-grid-6-col-3: 0.5rem;
1247
- --flex-grid-6-col-4: 0.355rem;
1248
- --flex-grid-4-col-2: 0.5rem;
1249
- --flex-grid-4-col-3: 0.275rem;
1250
- }
1251
- .md-flex-grid-16 {
1252
- display: inline-flex;
1253
- flex-wrap: wrap;
1254
- gap: var(--sizing-16);
1255
- --flex-grid-12-gap: 0.9140625rem;
1256
- --flex-grid-8-gap: 0.875rem;
1257
- --flex-grid-6-gap: 0.8309375rem;
1258
- --flex-grid-4-gap: 0.75rem;
1259
- --flex-grid-12-col-2: 0.8325rem;
1260
- --flex-grid-12-col-3: 0.75rem;
1261
- --flex-grid-12-col-4: 0.6725rem;
1262
- --flex-grid-12-col-6: 0.5125rem;
1263
- --flex-grid-12-col-8: 0.375rem;
1264
- --flex-grid-8-col-2: 0.77275rem;
1265
- --flex-grid-8-col-3: 0.65rem;
1266
- --flex-grid-8-col-4: 0.5rem;
1267
- --flex-grid-8-col-6: 0.275rem;
1268
- --flex-grid-6-col-2: 0.675rem;
1269
- --flex-grid-6-col-3: 0.5rem;
1270
- --flex-grid-6-col-4: 0.355rem;
1271
- --flex-grid-4-col-2: 0.5rem;
1272
- --flex-grid-4-col-3: 0.275rem;
1273
- }
1274
- .md-flex-grid-col-4 > * {
1275
- width: calc(25% - var(--flex-grid-4-gap));
1276
- }
1277
- .md-flex-grid-col-4 > *.md-flex-col-1 {
1278
- width: calc(25% - var(--flex-grid-4-gap));
1279
- }
1280
- .md-flex-grid-col-4 > *.md-flex-col-2 {
1281
- width: calc(50% - var(--flex-grid-4-col-2));
1282
- }
1283
- .md-flex-grid-col-4 > *.md-flex-col-3 {
1284
- width: calc(75% - var(--flex-grid-4-col-3));
1285
- }
1286
- .md-flex-grid-col-4 > *.md-flex-col-4,
1287
- .md-flex-grid-col-4 > *.md-flex-col-6,
1288
- .md-flex-grid-col-4 > *.md-flex-col-8,
1289
- .md-flex-grid-col-4 > *.md-flex-col-12 {
1290
- width: 100%;
1291
- }
1292
- .md-flex-grid-col-6 > * {
1293
- width: calc(16.66% - var(--flex-grid-6-gap));
1294
- }
1295
- .md-flex-grid-col-6 > *.md-flex-col-1 {
1296
- width: calc(16.66% - var(--flex-grid-6-gap));
1297
- }
1298
- .md-flex-grid-col-6 > *.md-flex-col-2 {
1299
- width: calc(33.34% - var(--flex-grid-6-col-2));
1300
- }
1301
- .md-flex-grid-col-6 > *.md-flex-col-3 {
1302
- width: calc(50% - var(--flex-grid-6-col-3));
1303
- }
1304
- .md-flex-grid-col-6 > *.md-flex-col-4 {
1305
- width: calc(66.67% - var(--flex-grid-6-col-4));
1306
- }
1307
- .md-flex-grid-col-6 > *.md-flex-col-6,
1308
- .md-flex-grid-col-6 > *.md-flex-col-8,
1309
- .md-flex-grid-col-6 > *.md-flex-col-12 {
1310
- width: 100%;
1311
- }
1312
- .md-flex-grid-col-8 > * {
1313
- width: calc(12.5% - var(--flex-grid-8-gap));
1314
- }
1315
- .md-flex-grid-col-8 > *.md-flex-col-1 {
1316
- width: calc(12.5% - var(--flex-grid-8-gap));
1317
- }
1318
- .md-flex-grid-col-8 > *.md-flex-col-2 {
1319
- width: calc(25% - var(--flex-grid-8-col-2));
1320
- }
1321
- .md-flex-grid-col-8 > *.md-flex-col-3 {
1322
- width: calc(37.5% - var(--flex-grid-8-col-3));
1323
- }
1324
- .md-flex-grid-col-8 > *.md-flex-col-4 {
1325
- width: calc(50% - var(--flex-grid-8-col-4));
1326
- }
1327
- .md-flex-grid-col-8 > *.md-flex-col-6 {
1328
- width: calc(75% - var(--flex-grid-8-col-6));
1329
- }
1330
- .md-flex-grid-col-8 > *.md-flex-col-8,
1331
- .md-flex-grid-col-8 > *.md-flex-col-12 {
1332
- width: 100%;
1333
- }
1334
- .md-flex-grid-col-12 > * {
1335
- width: calc(8.33% - var(--flex-grid-12-gap));
1336
- }
1337
- .md-flex-grid-col-12 > *.md-flex-col-1 {
1338
- width: calc(8.33% - var(--flex-grid-12-gap));
1339
- }
1340
- .md-flex-grid-col-12 > *.md-flex-col-2 {
1341
- width: calc(16.66% - var(--flex-grid-12-col-2));
1342
- }
1343
- .md-flex-grid-col-12 > *.md-flex-col-3 {
1344
- width: calc(25% - var(--flex-grid-12-col-3));
1345
- }
1346
- .md-flex-grid-col-12 > *.md-flex-col-4 {
1347
- width: calc(33.33% - var(--flex-grid-12-col-4));
1348
- }
1349
- .md-flex-grid-col-12 > *.md-flex-col-6 {
1350
- width: calc(50% - var(--flex-grid-12-col-6));
1351
- }
1352
- .md-flex-grid-col-12 > *.md-flex-col-8 {
1353
- width: calc(66.66% - var(--flex-grid-12-col-8));
1354
- }
1355
- .md-flex-grid-col-12 > *.md-flex-col-12 {
1356
- width: 100%;
1357
- }
1247
+ label,
1248
+ input,
1249
+ select,
1250
+ textarea {
1251
+ font-family: inherit;
1252
+ line-height: normal;
1358
1253
  }
1359
1254
 
1360
- @media screen and (min-width: 960px) {
1361
- .lg-flex-grid-8 {
1362
- display: inline-flex;
1363
- flex-wrap: wrap;
1364
- gap: var(--sizing-8);
1365
- --flex-grid-12-gap: 0.4584rem;
1366
- --flex-grid-8-gap: 0.4375rem;
1367
- --flex-grid-6-gap: 0.417rem;
1368
- --flex-grid-4-gap: 0.375rem;
1369
- --flex-grid-12-col-2: 0.425rem;
1370
- --flex-grid-12-col-3: 0.3875rem;
1371
- --flex-grid-12-col-4: 0.35rem;
1372
- --flex-grid-12-col-6: 0.2725rem;
1373
- --flex-grid-12-col-8: 0.375rem;
1374
- --flex-grid-8-col-2: 0.3875rem;
1375
- --flex-grid-8-col-3: 0.325rem;
1376
- --flex-grid-8-col-4: 0.275rem;
1377
- --flex-grid-8-col-6: 0.225rem;
1378
- --flex-grid-6-col-2: 0.3525rem;
1379
- --flex-grid-6-col-3: 0.275rem;
1380
- --flex-grid-6-col-4: 0.2125rem;
1381
- --flex-grid-4-col-2: 0.25rem;
1382
- --flex-grid-4-col-3: 0.125rem;
1255
+ textarea {
1256
+ overflow: auto;
1257
+ height: auto;
1258
+ font: inherit;
1259
+ color: inherit;
1260
+ }
1261
+
1262
+ textarea::placeholder {
1263
+ padding-left: 0.125rem;
1264
+ }
1265
+
1266
+ form,
1267
+ input,
1268
+ optgroup,
1269
+ select {
1270
+ margin: 0rem;
1271
+ font: inherit;
1272
+ color: inherit;
1273
+ }
1274
+
1275
+ html input[type='button'],
1276
+ input[type='reset'],
1277
+ input[type='submit'] {
1278
+ cursor: pointer;
1279
+ }
1280
+
1281
+ a,
1282
+ a div,
1283
+ a span,
1284
+ a ion-icon,
1285
+ a ion-label,
1286
+ button,
1287
+ button div,
1288
+ button span,
1289
+ button ion-icon,
1290
+ button ion-label,
1291
+ [tappable],
1292
+ [tappable] div,
1293
+ [tappable] span,
1294
+ [tappable] ion-icon,
1295
+ [tappable] ion-label,
1296
+ input,
1297
+ textarea {
1298
+ touch-action: manipulation;
1299
+ }
1300
+
1301
+ a ion-label,
1302
+ button ion-label {
1303
+ pointer-events: none;
1304
+ }
1305
+
1306
+ button {
1307
+ border: 0rem;
1308
+ border-radius: 0rem;
1309
+ font-family: inherit;
1310
+ font-style: inherit;
1311
+ font-variant: inherit;
1312
+ line-height: 1;
1313
+ text-transform: none;
1314
+ }
1315
+
1316
+ [tappable] {
1317
+ cursor: pointer;
1318
+ }
1319
+
1320
+ a[disabled],
1321
+ button[disabled],
1322
+ html input[disabled] {
1323
+ cursor: default;
1324
+ }
1325
+
1326
+ button::-moz-focus-inner,
1327
+ input::-moz-focus-inner {
1328
+ padding: 0rem;
1329
+ border: 0rem;
1330
+ }
1331
+
1332
+ input[type='checkbox'],
1333
+ input[type='radio'] {
1334
+ padding: 0rem;
1335
+ box-sizing: border-box;
1336
+ }
1337
+
1338
+ input[type='number']::-webkit-inner-spin-button,
1339
+ input[type='number']::-webkit-outer-spin-button {
1340
+ height: auto;
1341
+ }
1342
+
1343
+ input[type='search']::-webkit-search-cancel-button,
1344
+ input[type='search']::-webkit-search-decoration {
1345
+ -webkit-appearance: none;
1346
+ }
1347
+
1348
+ table {
1349
+ border-collapse: collapse;
1350
+ border-spacing: 0rem;
1351
+ }
1352
+
1353
+ td,
1354
+ th {
1355
+ padding: 0rem;
1356
+ }
1357
+
1358
+ ul {
1359
+ list-style-type: none;
1360
+ margin-block-start: 0rem;
1361
+ margin-block-end: 0rem;
1362
+ margin-inline-start: 0rem;
1363
+ margin-inline-end: 0rem;
1364
+ padding-inline-start: 0rem;
1365
+ }
1366
+
1367
+ h1,
1368
+ h2,
1369
+ h3,
1370
+ h4,
1371
+ h5,
1372
+ h6,
1373
+ p {
1374
+ margin: 0rem;
1375
+ font-weight: var(--font-weight-medium);
1376
+ }
1377
+
1378
+ .font-dark-500 {
1379
+ color: var(--color-dark-500);
1380
+ }
1381
+
1382
+ .font-dark-300 {
1383
+ color: var(--color-dark-300);
1384
+ }
1385
+
1386
+ .font-dark-100 {
1387
+ color: var(--color-dark-100);
1388
+ }
1389
+
1390
+ .font-light-500 {
1391
+ color: var(--color-light-500);
1392
+ }
1393
+
1394
+ .font-light-300 {
1395
+ color: var(--color-light-300);
1396
+ }
1397
+
1398
+ .font-light-100 {
1399
+ color: var(--color-light-100);
1400
+ }
1401
+
1402
+ .bg-dark-500 {
1403
+ background: var(--background-dark-500);
1404
+ }
1405
+
1406
+ .bg-dark-300 {
1407
+ background: var(--background-dark-300);
1408
+ }
1409
+
1410
+ .bg-dark-100 {
1411
+ background: var(--background-dark-100);
1412
+ }
1413
+
1414
+ .bg-light-500 {
1415
+ background: var(--background-light-500);
1416
+ }
1417
+
1418
+ .bg-light-300 {
1419
+ background: var(--background-light-300);
1420
+ }
1421
+
1422
+ .bg-light-100 {
1423
+ background: var(--background-light-100);
1424
+ }
1425
+
1426
+ :root {
1427
+ --flex-grid-12-gap: 0rem;
1428
+ --flex-grid-8-gap: 0rem;
1429
+ --flex-grid-6-gap: 0rem;
1430
+ --flex-grid-4-gap: 0rem;
1431
+ --flex-grid-12-col-2: 0rem;
1432
+ --flex-grid-12-col-3: 0rem;
1433
+ --flex-grid-12-col-4: 0rem;
1434
+ --flex-grid-12-col-6: 0rem;
1435
+ --flex-grid-12-col-8: 0rem;
1436
+ --flex-grid-8-col-2: 0rem;
1437
+ --flex-grid-8-col-3: 0rem;
1438
+ --flex-grid-8-col-4: 0rem;
1439
+ --flex-grid-8-col-6: 0rem;
1440
+ --flex-grid-6-col-2: 0rem;
1441
+ --flex-grid-6-col-3: 0rem;
1442
+ --flex-grid-6-col-4: 0rem;
1443
+ --flex-grid-4-col-2: 0rem;
1444
+ --flex-grid-4-col-3: 0rem;
1445
+ }
1446
+
1447
+ .xs-grid-8 {
1448
+ display: grid;
1449
+ gap: var(--sizing-8);
1450
+ }
1451
+
1452
+ .xs-grid-12 {
1453
+ display: grid;
1454
+ gap: var(--sizing-12);
1455
+ }
1456
+
1457
+ .xs-grid-16 {
1458
+ display: grid;
1459
+ gap: var(--sizing-16);
1460
+ }
1461
+
1462
+ .xs-grid-col-12 {
1463
+ grid-template-columns: repeat(12, 1fr);
1464
+ }
1465
+
1466
+ .xs-grid-col-8 {
1467
+ grid-template-columns: repeat(8, 1fr);
1468
+ }
1469
+
1470
+ .xs-grid-col-6 {
1471
+ grid-template-columns: repeat(6, 1fr);
1472
+ }
1473
+
1474
+ .xs-grid-col-4 {
1475
+ grid-template-columns: repeat(4, 1fr);
1476
+ }
1477
+
1478
+ .xs-grid-col-2 {
1479
+ grid-template-columns: repeat(2, 1fr);
1480
+ }
1481
+
1482
+ .xs-grid-col-1 {
1483
+ grid-template-columns: repeat(1, 1fr);
1484
+ }
1485
+
1486
+ @media screen and (min-width: 360px) {
1487
+ .sm-grid-8 {
1488
+ display: grid;
1489
+ gap: var(--sizing-8);
1383
1490
  }
1384
- .lg-flex-grid-12 {
1385
- display: inline-flex;
1386
- flex-wrap: wrap;
1491
+ .sm-grid-12 {
1492
+ display: grid;
1387
1493
  gap: var(--sizing-12);
1388
- --flex-grid-12-gap: 0.9140625rem;
1389
- --flex-grid-8-gap: 0.875rem;
1390
- --flex-grid-6-gap: 0.8309375rem;
1391
- --flex-grid-4-gap: 0.75rem;
1392
- --flex-grid-12-col-2: 0.828rem;
1393
- --flex-grid-12-col-3: 0.75rem;
1394
- --flex-grid-12-col-4: 0.6725rem;
1395
- --flex-grid-12-col-6: 0.5125rem;
1396
- --flex-grid-12-col-8: 0.375rem;
1397
- --flex-grid-8-col-2: 0.77275rem;
1398
- --flex-grid-8-col-3: 0.65rem;
1399
- --flex-grid-8-col-4: 0.5rem;
1400
- --flex-grid-8-col-6: 0.275rem;
1401
- --flex-grid-6-col-2: 0.675rem;
1402
- --flex-grid-6-col-3: 0.5rem;
1403
- --flex-grid-6-col-4: 0.355rem;
1404
- --flex-grid-4-col-2: 0.5rem;
1405
- --flex-grid-4-col-3: 0.275rem;
1406
1494
  }
1407
- .lg-flex-grid-16 {
1408
- display: inline-flex;
1409
- flex-wrap: wrap;
1495
+ .sm-grid-16 {
1496
+ display: grid;
1410
1497
  gap: var(--sizing-16);
1411
- --flex-grid-12-gap: 0.9140625rem;
1412
- --flex-grid-8-gap: 0.875rem;
1413
- --flex-grid-6-gap: 0.8309375rem;
1414
- --flex-grid-4-gap: 0.75rem;
1415
- --flex-grid-12-col-2: 0.8325rem;
1416
- --flex-grid-12-col-3: 0.75rem;
1417
- --flex-grid-12-col-4: 0.6725rem;
1418
- --flex-grid-12-col-6: 0.5125rem;
1419
- --flex-grid-12-col-8: 0.375rem;
1420
- --flex-grid-8-col-2: 0.77275rem;
1421
- --flex-grid-8-col-3: 0.65rem;
1422
- --flex-grid-8-col-4: 0.5rem;
1423
- --flex-grid-8-col-6: 0.275rem;
1424
- --flex-grid-6-col-2: 0.675rem;
1425
- --flex-grid-6-col-3: 0.5rem;
1426
- --flex-grid-6-col-4: 0.355rem;
1427
- --flex-grid-4-col-2: 0.5rem;
1428
- --flex-grid-4-col-3: 0.275rem;
1429
1498
  }
1430
- .lg-flex-grid-col-4 > * {
1431
- width: calc(25% - var(--flex-grid-4-gap));
1499
+ .sm-grid-col-12 {
1500
+ grid-template-columns: repeat(12, 1fr);
1432
1501
  }
1433
- .lg-flex-grid-col-4 > *.lg-flex-col-1 {
1434
- width: calc(25% - var(--flex-grid-4-gap));
1502
+ .sm-grid-col-8 {
1503
+ grid-template-columns: repeat(8, 1fr);
1435
1504
  }
1436
- .lg-flex-grid-col-4 > *.lg-flex-col-2 {
1437
- width: calc(50% - var(--flex-grid-4-col-2));
1505
+ .sm-grid-col-6 {
1506
+ grid-template-columns: repeat(6, 1fr);
1438
1507
  }
1439
- .lg-flex-grid-col-4 > *.lg-flex-col-3 {
1440
- width: calc(75% - var(--flex-grid-4-col-3));
1508
+ .sm-grid-col-4 {
1509
+ grid-template-columns: repeat(4, 1fr);
1441
1510
  }
1442
- .lg-flex-grid-col-4 > *.lg-flex-col-4,
1443
- .lg-flex-grid-col-4 > *.lg-flex-col-6,
1444
- .lg-flex-grid-col-4 > *.lg-flex-col-8,
1445
- .lg-flex-grid-col-4 > *.lg-flex-col-12 {
1446
- width: 100%;
1511
+ .sm-grid-col-2 {
1512
+ grid-template-columns: repeat(2, 1fr);
1447
1513
  }
1448
- .lg-flex-grid-col-6 > * {
1449
- width: calc(16.66% - var(--flex-grid-6-gap));
1514
+ .sm-grid-col-1 {
1515
+ grid-template-columns: repeat(1, 1fr);
1450
1516
  }
1451
- .lg-flex-grid-col-6 > *.lg-flex-col-1 {
1452
- width: calc(16.66% - var(--flex-grid-6-gap));
1517
+ }
1518
+
1519
+ @media screen and (min-width: 640px) {
1520
+ .md-grid-8 {
1521
+ display: grid;
1522
+ gap: var(--sizing-8);
1453
1523
  }
1454
- .lg-flex-grid-col-6 > *.lg-flex-col-2 {
1455
- width: calc(33.34% - var(--flex-grid-6-col-2));
1524
+ .md-grid-12 {
1525
+ display: grid;
1526
+ gap: var(--sizing-12);
1456
1527
  }
1457
- .lg-flex-grid-col-6 > *.lg-flex-col-3 {
1458
- width: calc(50% - var(--flex-grid-6-col-3));
1528
+ .md-grid-16 {
1529
+ display: grid;
1530
+ gap: var(--sizing-16);
1459
1531
  }
1460
- .lg-flex-grid-col-6 > *.lg-flex-col-4 {
1461
- width: calc(66.67% - var(--flex-grid-6-col-4));
1532
+ .md-grid-col-12 {
1533
+ grid-template-columns: repeat(12, 1fr);
1462
1534
  }
1463
- .lg-flex-grid-col-6 > *.lg-flex-col-6,
1464
- .lg-flex-grid-col-6 > *.lg-flex-col-8,
1465
- .lg-flex-grid-col-6 > *.lg-flex-col-12 {
1466
- width: 100%;
1535
+ .md-grid-col-8 {
1536
+ grid-template-columns: repeat(8, 1fr);
1467
1537
  }
1468
- .lg-flex-grid-col-8 > * {
1469
- width: calc(12.5% - var(--flex-grid-8-gap));
1538
+ .md-grid-col-6 {
1539
+ grid-template-columns: repeat(6, 1fr);
1470
1540
  }
1471
- .lg-flex-grid-col-8 > *.lg-flex-col-1 {
1472
- width: calc(12.5% - var(--flex-grid-8-gap));
1541
+ .md-grid-col-4 {
1542
+ grid-template-columns: repeat(4, 1fr);
1473
1543
  }
1474
- .lg-flex-grid-col-8 > *.lg-flex-col-2 {
1475
- width: calc(25% - var(--flex-grid-8-col-2));
1544
+ .md-grid-col-2 {
1545
+ grid-template-columns: repeat(2, 1fr);
1476
1546
  }
1477
- .lg-flex-grid-col-8 > *.lg-flex-col-3 {
1478
- width: calc(37.5% - var(--flex-grid-8-col-3));
1547
+ .md-grid-col-1 {
1548
+ grid-template-columns: repeat(1, 1fr);
1479
1549
  }
1480
- .lg-flex-grid-col-8 > *.lg-flex-col-4 {
1481
- width: calc(50% - var(--flex-grid-8-col-4));
1550
+ }
1551
+
1552
+ @media screen and (min-width: 960px) {
1553
+ .lg-grid-8 {
1554
+ display: grid;
1555
+ gap: var(--sizing-8);
1482
1556
  }
1483
- .lg-flex-grid-col-8 > *.lg-flex-col-6 {
1484
- width: calc(75% - var(--flex-grid-8-col-6));
1557
+ .lg-grid-12 {
1558
+ display: grid;
1559
+ gap: var(--sizing-12);
1485
1560
  }
1486
- .lg-flex-grid-col-8 > *.lg-flex-col-8,
1487
- .lg-flex-grid-col-8 > *.lg-flex-col-12 {
1488
- width: 100%;
1561
+ .lg-grid-16 {
1562
+ display: grid;
1563
+ gap: var(--sizing-16);
1489
1564
  }
1490
- .lg-flex-grid-col-12 > * {
1491
- width: calc(8.33% - var(--flex-grid-12-gap));
1565
+ .lg-grid-col-12 {
1566
+ grid-template-columns: repeat(12, 1fr);
1492
1567
  }
1493
- .lg-flex-grid-col-12 > *.lg-flex-col-1 {
1494
- width: calc(8.33% - var(--flex-grid-12-gap));
1568
+ .lg-grid-col-8 {
1569
+ grid-template-columns: repeat(8, 1fr);
1495
1570
  }
1496
- .lg-flex-grid-col-12 > *.lg-flex-col-2 {
1497
- width: calc(16.66% - var(--flex-grid-12-col-2));
1571
+ .lg-grid-col-6 {
1572
+ grid-template-columns: repeat(6, 1fr);
1498
1573
  }
1499
- .lg-flex-grid-col-12 > *.lg-flex-col-3 {
1500
- width: calc(25% - var(--flex-grid-12-col-3));
1574
+ .lg-grid-col-4 {
1575
+ grid-template-columns: repeat(4, 1fr);
1501
1576
  }
1502
- .lg-flex-grid-col-12 > *.lg-flex-col-4 {
1503
- width: calc(33.33% - var(--flex-grid-12-col-4));
1577
+ .lg-grid-col-2 {
1578
+ grid-template-columns: repeat(2, 1fr);
1504
1579
  }
1505
- .lg-flex-grid-col-12 > *.lg-flex-col-6 {
1506
- width: calc(50% - var(--flex-grid-12-col-6));
1580
+ .lg-grid-col-1 {
1581
+ grid-template-columns: repeat(1, 1fr);
1507
1582
  }
1508
- .lg-flex-grid-col-12 > *.lg-flex-col-8 {
1509
- width: calc(66.66% - var(--flex-grid-12-col-8));
1583
+ }
1584
+
1585
+ @media screen and (min-width: 1280px) {
1586
+ .xl-grid-8 {
1587
+ display: grid;
1588
+ gap: var(--sizing-8);
1510
1589
  }
1511
- .lg-flex-grid-col-12 > *.lg-flex-col-12 {
1512
- width: 100%;
1590
+ .xl-grid-12 {
1591
+ display: grid;
1592
+ gap: var(--sizing-12);
1593
+ }
1594
+ .xl-grid-16 {
1595
+ display: grid;
1596
+ gap: var(--sizing-16);
1513
1597
  }
1598
+ .xl-grid-col-12 {
1599
+ grid-template-columns: repeat(12, 1fr);
1600
+ }
1601
+ .xl-grid-col-8 {
1602
+ grid-template-columns: repeat(8, 1fr);
1603
+ }
1604
+ .xl-grid-col-6 {
1605
+ grid-template-columns: repeat(6, 1fr);
1606
+ }
1607
+ .xl-grid-col-4 {
1608
+ grid-template-columns: repeat(4, 1fr);
1609
+ }
1610
+ .xl-grid-col-2 {
1611
+ grid-template-columns: repeat(2, 1fr);
1612
+ }
1613
+ .xl-grid-col-1 {
1614
+ grid-template-columns: repeat(1, 1fr);
1615
+ }
1616
+ }
1617
+
1618
+ .xs-flex-grid-8 {
1619
+ display: inline-flex;
1620
+ flex-wrap: wrap;
1621
+ gap: var(--sizing-8);
1622
+ --flex-grid-12-gap: 0.4584rem;
1623
+ --flex-grid-8-gap: 0.4375rem;
1624
+ --flex-grid-6-gap: 0.417rem;
1625
+ --flex-grid-4-gap: 0.375rem;
1626
+ --flex-grid-12-col-2: 0.425rem;
1627
+ --flex-grid-12-col-3: 0.3875rem;
1628
+ --flex-grid-12-col-4: 0.35rem;
1629
+ --flex-grid-12-col-6: 0.2725rem;
1630
+ --flex-grid-12-col-8: 0.375rem;
1631
+ --flex-grid-8-col-2: 0.3875rem;
1632
+ --flex-grid-8-col-3: 0.325rem;
1633
+ --flex-grid-8-col-4: 0.275rem;
1634
+ --flex-grid-8-col-6: 0.225rem;
1635
+ --flex-grid-6-col-2: 0.3525rem;
1636
+ --flex-grid-6-col-3: 0.275rem;
1637
+ --flex-grid-6-col-4: 0.2125rem;
1638
+ --flex-grid-4-col-2: 0.25rem;
1639
+ --flex-grid-4-col-3: 0.125rem;
1640
+ }
1641
+
1642
+ .xs-flex-grid-12 {
1643
+ display: inline-flex;
1644
+ flex-wrap: wrap;
1645
+ gap: var(--sizing-12);
1646
+ --flex-grid-12-gap: 0.9140625rem;
1647
+ --flex-grid-8-gap: 0.875rem;
1648
+ --flex-grid-6-gap: 0.8309375rem;
1649
+ --flex-grid-4-gap: 0.75rem;
1650
+ --flex-grid-12-col-2: 0.828rem;
1651
+ --flex-grid-12-col-3: 0.75rem;
1652
+ --flex-grid-12-col-4: 0.6725rem;
1653
+ --flex-grid-12-col-6: 0.5125rem;
1654
+ --flex-grid-12-col-8: 0.375rem;
1655
+ --flex-grid-8-col-2: 0.77275rem;
1656
+ --flex-grid-8-col-3: 0.65rem;
1657
+ --flex-grid-8-col-4: 0.5rem;
1658
+ --flex-grid-8-col-6: 0.275rem;
1659
+ --flex-grid-6-col-2: 0.675rem;
1660
+ --flex-grid-6-col-3: 0.5rem;
1661
+ --flex-grid-6-col-4: 0.355rem;
1662
+ --flex-grid-4-col-2: 0.5rem;
1663
+ --flex-grid-4-col-3: 0.275rem;
1664
+ }
1665
+
1666
+ .xs-flex-grid-16 {
1667
+ display: inline-flex;
1668
+ flex-wrap: wrap;
1669
+ gap: var(--sizing-16);
1670
+ --flex-grid-12-gap: 0.9140625rem;
1671
+ --flex-grid-8-gap: 0.875rem;
1672
+ --flex-grid-6-gap: 0.8309375rem;
1673
+ --flex-grid-4-gap: 0.75rem;
1674
+ --flex-grid-12-col-2: 0.8325rem;
1675
+ --flex-grid-12-col-3: 0.75rem;
1676
+ --flex-grid-12-col-4: 0.6725rem;
1677
+ --flex-grid-12-col-6: 0.5125rem;
1678
+ --flex-grid-12-col-8: 0.375rem;
1679
+ --flex-grid-8-col-2: 0.77275rem;
1680
+ --flex-grid-8-col-3: 0.65rem;
1681
+ --flex-grid-8-col-4: 0.5rem;
1682
+ --flex-grid-8-col-6: 0.275rem;
1683
+ --flex-grid-6-col-2: 0.675rem;
1684
+ --flex-grid-6-col-3: 0.5rem;
1685
+ --flex-grid-6-col-4: 0.355rem;
1686
+ --flex-grid-4-col-2: 0.5rem;
1687
+ --flex-grid-4-col-3: 0.275rem;
1688
+ }
1689
+
1690
+ .xs-flex-grid-col-4 > * {
1691
+ width: calc(25% - var(--flex-grid-4-gap));
1692
+ }
1693
+ .xs-flex-grid-col-4 > *.xs-flex-col-1 {
1694
+ width: calc(25% - var(--flex-grid-4-gap));
1695
+ }
1696
+ .xs-flex-grid-col-4 > *.xs-flex-col-2 {
1697
+ width: calc(50% - var(--flex-grid-4-col-2));
1698
+ }
1699
+ .xs-flex-grid-col-4 > *.xs-flex-col-3 {
1700
+ width: calc(75% - var(--flex-grid-4-col-3));
1701
+ }
1702
+ .xs-flex-grid-col-4 > *.xs-flex-col-4,
1703
+ .xs-flex-grid-col-4 > *.xs-flex-col-6,
1704
+ .xs-flex-grid-col-4 > *.xs-flex-col-8,
1705
+ .xs-flex-grid-col-4 > *.xs-flex-col-12 {
1706
+ width: 100%;
1707
+ }
1708
+
1709
+ .xs-flex-grid-col-6 > * {
1710
+ width: calc(16.66% - var(--flex-grid-6-gap));
1711
+ }
1712
+ .xs-flex-grid-col-6 > *.xs-flex-col-1 {
1713
+ width: calc(16.66% - var(--flex-grid-6-gap));
1714
+ }
1715
+ .xs-flex-grid-col-6 > *.xs-flex-col-2 {
1716
+ width: calc(33.34% - var(--flex-grid-6-col-2));
1717
+ }
1718
+ .xs-flex-grid-col-6 > *.xs-flex-col-3 {
1719
+ width: calc(50% - var(--flex-grid-6-col-3));
1720
+ }
1721
+ .xs-flex-grid-col-6 > *.xs-flex-col-4 {
1722
+ width: calc(66.67% - var(--flex-grid-6-col-4));
1723
+ }
1724
+ .xs-flex-grid-col-6 > *.xs-flex-col-6,
1725
+ .xs-flex-grid-col-6 > *.xs-flex-col-8,
1726
+ .xs-flex-grid-col-6 > *.xs-flex-col-12 {
1727
+ width: 100%;
1728
+ }
1729
+
1730
+ .xs-flex-grid-col-8 > * {
1731
+ width: calc(12.5% - var(--flex-grid-8-gap));
1732
+ }
1733
+ .xs-flex-grid-col-8 > *.xs-flex-col-1 {
1734
+ width: calc(12.5% - var(--flex-grid-8-gap));
1735
+ }
1736
+ .xs-flex-grid-col-8 > *.xs-flex-col-2 {
1737
+ width: calc(25% - var(--flex-grid-8-col-2));
1738
+ }
1739
+ .xs-flex-grid-col-8 > *.xs-flex-col-3 {
1740
+ width: calc(37.5% - var(--flex-grid-8-col-3));
1741
+ }
1742
+ .xs-flex-grid-col-8 > *.xs-flex-col-4 {
1743
+ width: calc(50% - var(--flex-grid-8-col-4));
1744
+ }
1745
+ .xs-flex-grid-col-8 > *.xs-flex-col-6 {
1746
+ width: calc(75% - var(--flex-grid-8-col-6));
1747
+ }
1748
+ .xs-flex-grid-col-8 > *.xs-flex-col-8,
1749
+ .xs-flex-grid-col-8 > *.xs-flex-col-12 {
1750
+ width: 100%;
1751
+ }
1752
+
1753
+ .xs-flex-grid-col-12 > * {
1754
+ width: calc(8.33% - var(--flex-grid-12-gap));
1755
+ }
1756
+ .xs-flex-grid-col-12 > *.xs-flex-col-1 {
1757
+ width: calc(8.33% - var(--flex-grid-12-gap));
1758
+ }
1759
+ .xs-flex-grid-col-12 > *.xs-flex-col-2 {
1760
+ width: calc(16.66% - var(--flex-grid-12-col-2));
1761
+ }
1762
+ .xs-flex-grid-col-12 > *.xs-flex-col-3 {
1763
+ width: calc(25% - var(--flex-grid-12-col-3));
1764
+ }
1765
+ .xs-flex-grid-col-12 > *.xs-flex-col-4 {
1766
+ width: calc(33.33% - var(--flex-grid-12-col-4));
1767
+ }
1768
+ .xs-flex-grid-col-12 > *.xs-flex-col-6 {
1769
+ width: calc(50% - var(--flex-grid-12-col-6));
1770
+ }
1771
+ .xs-flex-grid-col-12 > *.xs-flex-col-8 {
1772
+ width: calc(66.66% - var(--flex-grid-12-col-8));
1773
+ }
1774
+ .xs-flex-grid-col-12 > *.xs-flex-col-12 {
1775
+ width: 100%;
1776
+ }
1777
+
1778
+ @media screen and (min-width: 360px) {
1779
+ .sm-flex-grid-8 {
1780
+ display: inline-flex;
1781
+ flex-wrap: wrap;
1782
+ gap: var(--sizing-8);
1783
+ --flex-grid-12-gap: 0.4584rem;
1784
+ --flex-grid-8-gap: 0.4375rem;
1785
+ --flex-grid-6-gap: 0.417rem;
1786
+ --flex-grid-4-gap: 0.375rem;
1787
+ --flex-grid-12-col-2: 0.425rem;
1788
+ --flex-grid-12-col-3: 0.3875rem;
1789
+ --flex-grid-12-col-4: 0.35rem;
1790
+ --flex-grid-12-col-6: 0.2725rem;
1791
+ --flex-grid-12-col-8: 0.375rem;
1792
+ --flex-grid-8-col-2: 0.3875rem;
1793
+ --flex-grid-8-col-3: 0.325rem;
1794
+ --flex-grid-8-col-4: 0.275rem;
1795
+ --flex-grid-8-col-6: 0.225rem;
1796
+ --flex-grid-6-col-2: 0.3525rem;
1797
+ --flex-grid-6-col-3: 0.275rem;
1798
+ --flex-grid-6-col-4: 0.2125rem;
1799
+ --flex-grid-4-col-2: 0.25rem;
1800
+ --flex-grid-4-col-3: 0.125rem;
1801
+ }
1802
+ .sm-flex-grid-12 {
1803
+ display: inline-flex;
1804
+ flex-wrap: wrap;
1805
+ gap: var(--sizing-12);
1806
+ --flex-grid-12-gap: 0.9140625rem;
1807
+ --flex-grid-8-gap: 0.875rem;
1808
+ --flex-grid-6-gap: 0.8309375rem;
1809
+ --flex-grid-4-gap: 0.75rem;
1810
+ --flex-grid-12-col-2: 0.828rem;
1811
+ --flex-grid-12-col-3: 0.75rem;
1812
+ --flex-grid-12-col-4: 0.6725rem;
1813
+ --flex-grid-12-col-6: 0.5125rem;
1814
+ --flex-grid-12-col-8: 0.375rem;
1815
+ --flex-grid-8-col-2: 0.77275rem;
1816
+ --flex-grid-8-col-3: 0.65rem;
1817
+ --flex-grid-8-col-4: 0.5rem;
1818
+ --flex-grid-8-col-6: 0.275rem;
1819
+ --flex-grid-6-col-2: 0.675rem;
1820
+ --flex-grid-6-col-3: 0.5rem;
1821
+ --flex-grid-6-col-4: 0.355rem;
1822
+ --flex-grid-4-col-2: 0.5rem;
1823
+ --flex-grid-4-col-3: 0.275rem;
1824
+ }
1825
+ .sm-flex-grid-16 {
1826
+ display: inline-flex;
1827
+ flex-wrap: wrap;
1828
+ gap: var(--sizing-16);
1829
+ --flex-grid-12-gap: 0.9140625rem;
1830
+ --flex-grid-8-gap: 0.875rem;
1831
+ --flex-grid-6-gap: 0.8309375rem;
1832
+ --flex-grid-4-gap: 0.75rem;
1833
+ --flex-grid-12-col-2: 0.8325rem;
1834
+ --flex-grid-12-col-3: 0.75rem;
1835
+ --flex-grid-12-col-4: 0.6725rem;
1836
+ --flex-grid-12-col-6: 0.5125rem;
1837
+ --flex-grid-12-col-8: 0.375rem;
1838
+ --flex-grid-8-col-2: 0.77275rem;
1839
+ --flex-grid-8-col-3: 0.65rem;
1840
+ --flex-grid-8-col-4: 0.5rem;
1841
+ --flex-grid-8-col-6: 0.275rem;
1842
+ --flex-grid-6-col-2: 0.675rem;
1843
+ --flex-grid-6-col-3: 0.5rem;
1844
+ --flex-grid-6-col-4: 0.355rem;
1845
+ --flex-grid-4-col-2: 0.5rem;
1846
+ --flex-grid-4-col-3: 0.275rem;
1847
+ }
1848
+ .sm-flex-grid-col-4 > * {
1849
+ width: calc(25% - var(--flex-grid-4-gap));
1850
+ }
1851
+ .sm-flex-grid-col-4 > *.sm-flex-col-1 {
1852
+ width: calc(25% - var(--flex-grid-4-gap));
1853
+ }
1854
+ .sm-flex-grid-col-4 > *.sm-flex-col-2 {
1855
+ width: calc(50% - var(--flex-grid-4-col-2));
1856
+ }
1857
+ .sm-flex-grid-col-4 > *.sm-flex-col-3 {
1858
+ width: calc(75% - var(--flex-grid-4-col-3));
1859
+ }
1860
+ .sm-flex-grid-col-4 > *.sm-flex-col-4,
1861
+ .sm-flex-grid-col-4 > *.sm-flex-col-6,
1862
+ .sm-flex-grid-col-4 > *.sm-flex-col-8,
1863
+ .sm-flex-grid-col-4 > *.sm-flex-col-12 {
1864
+ width: 100%;
1865
+ }
1866
+ .sm-flex-grid-col-6 > * {
1867
+ width: calc(16.66% - var(--flex-grid-6-gap));
1868
+ }
1869
+ .sm-flex-grid-col-6 > *.sm-flex-col-1 {
1870
+ width: calc(16.66% - var(--flex-grid-6-gap));
1871
+ }
1872
+ .sm-flex-grid-col-6 > *.sm-flex-col-2 {
1873
+ width: calc(33.34% - var(--flex-grid-6-col-2));
1874
+ }
1875
+ .sm-flex-grid-col-6 > *.sm-flex-col-3 {
1876
+ width: calc(50% - var(--flex-grid-6-col-3));
1877
+ }
1878
+ .sm-flex-grid-col-6 > *.sm-flex-col-4 {
1879
+ width: calc(66.67% - var(--flex-grid-6-col-4));
1880
+ }
1881
+ .sm-flex-grid-col-6 > *.sm-flex-col-6,
1882
+ .sm-flex-grid-col-6 > *.sm-flex-col-8,
1883
+ .sm-flex-grid-col-6 > *.sm-flex-col-12 {
1884
+ width: 100%;
1885
+ }
1886
+ .sm-flex-grid-col-8 > * {
1887
+ width: calc(12.5% - var(--flex-grid-8-gap));
1888
+ }
1889
+ .sm-flex-grid-col-8 > *.sm-flex-col-1 {
1890
+ width: calc(12.5% - var(--flex-grid-8-gap));
1891
+ }
1892
+ .sm-flex-grid-col-8 > *.sm-flex-col-2 {
1893
+ width: calc(25% - var(--flex-grid-8-col-2));
1894
+ }
1895
+ .sm-flex-grid-col-8 > *.sm-flex-col-3 {
1896
+ width: calc(37.5% - var(--flex-grid-8-col-3));
1897
+ }
1898
+ .sm-flex-grid-col-8 > *.sm-flex-col-4 {
1899
+ width: calc(50% - var(--flex-grid-8-col-4));
1900
+ }
1901
+ .sm-flex-grid-col-8 > *.sm-flex-col-6 {
1902
+ width: calc(75% - var(--flex-grid-8-col-6));
1903
+ }
1904
+ .sm-flex-grid-col-8 > *.sm-flex-col-8,
1905
+ .sm-flex-grid-col-8 > *.sm-flex-col-12 {
1906
+ width: 100%;
1907
+ }
1908
+ .sm-flex-grid-col-12 > * {
1909
+ width: calc(8.33% - var(--flex-grid-12-gap));
1910
+ }
1911
+ .sm-flex-grid-col-12 > *.sm-flex-col-1 {
1912
+ width: calc(8.33% - var(--flex-grid-12-gap));
1913
+ }
1914
+ .sm-flex-grid-col-12 > *.sm-flex-col-2 {
1915
+ width: calc(16.66% - var(--flex-grid-12-col-2));
1916
+ }
1917
+ .sm-flex-grid-col-12 > *.sm-flex-col-3 {
1918
+ width: calc(25% - var(--flex-grid-12-col-3));
1919
+ }
1920
+ .sm-flex-grid-col-12 > *.sm-flex-col-4 {
1921
+ width: calc(33.33% - var(--flex-grid-12-col-4));
1922
+ }
1923
+ .sm-flex-grid-col-12 > *.sm-flex-col-6 {
1924
+ width: calc(50% - var(--flex-grid-12-col-6));
1925
+ }
1926
+ .sm-flex-grid-col-12 > *.sm-flex-col-8 {
1927
+ width: calc(66.66% - var(--flex-grid-12-col-8));
1928
+ }
1929
+ .sm-flex-grid-col-12 > *.sm-flex-col-12 {
1930
+ width: 100%;
1931
+ }
1932
+ }
1933
+
1934
+ @media screen and (min-width: 640px) {
1935
+ .md-flex-grid-8 {
1936
+ display: inline-flex;
1937
+ flex-wrap: wrap;
1938
+ gap: var(--sizing-8);
1939
+ --flex-grid-12-gap: 0.4584rem;
1940
+ --flex-grid-8-gap: 0.4375rem;
1941
+ --flex-grid-6-gap: 0.417rem;
1942
+ --flex-grid-4-gap: 0.375rem;
1943
+ --flex-grid-12-col-2: 0.425rem;
1944
+ --flex-grid-12-col-3: 0.3875rem;
1945
+ --flex-grid-12-col-4: 0.35rem;
1946
+ --flex-grid-12-col-6: 0.2725rem;
1947
+ --flex-grid-12-col-8: 0.375rem;
1948
+ --flex-grid-8-col-2: 0.3875rem;
1949
+ --flex-grid-8-col-3: 0.325rem;
1950
+ --flex-grid-8-col-4: 0.275rem;
1951
+ --flex-grid-8-col-6: 0.225rem;
1952
+ --flex-grid-6-col-2: 0.3525rem;
1953
+ --flex-grid-6-col-3: 0.275rem;
1954
+ --flex-grid-6-col-4: 0.2125rem;
1955
+ --flex-grid-4-col-2: 0.25rem;
1956
+ --flex-grid-4-col-3: 0.125rem;
1957
+ }
1958
+ .md-flex-grid-12 {
1959
+ display: inline-flex;
1960
+ flex-wrap: wrap;
1961
+ gap: var(--sizing-12);
1962
+ --flex-grid-12-gap: 0.9140625rem;
1963
+ --flex-grid-8-gap: 0.875rem;
1964
+ --flex-grid-6-gap: 0.8309375rem;
1965
+ --flex-grid-4-gap: 0.75rem;
1966
+ --flex-grid-12-col-2: 0.828rem;
1967
+ --flex-grid-12-col-3: 0.75rem;
1968
+ --flex-grid-12-col-4: 0.6725rem;
1969
+ --flex-grid-12-col-6: 0.5125rem;
1970
+ --flex-grid-12-col-8: 0.375rem;
1971
+ --flex-grid-8-col-2: 0.77275rem;
1972
+ --flex-grid-8-col-3: 0.65rem;
1973
+ --flex-grid-8-col-4: 0.5rem;
1974
+ --flex-grid-8-col-6: 0.275rem;
1975
+ --flex-grid-6-col-2: 0.675rem;
1976
+ --flex-grid-6-col-3: 0.5rem;
1977
+ --flex-grid-6-col-4: 0.355rem;
1978
+ --flex-grid-4-col-2: 0.5rem;
1979
+ --flex-grid-4-col-3: 0.275rem;
1980
+ }
1981
+ .md-flex-grid-16 {
1982
+ display: inline-flex;
1983
+ flex-wrap: wrap;
1984
+ gap: var(--sizing-16);
1985
+ --flex-grid-12-gap: 0.9140625rem;
1986
+ --flex-grid-8-gap: 0.875rem;
1987
+ --flex-grid-6-gap: 0.8309375rem;
1988
+ --flex-grid-4-gap: 0.75rem;
1989
+ --flex-grid-12-col-2: 0.8325rem;
1990
+ --flex-grid-12-col-3: 0.75rem;
1991
+ --flex-grid-12-col-4: 0.6725rem;
1992
+ --flex-grid-12-col-6: 0.5125rem;
1993
+ --flex-grid-12-col-8: 0.375rem;
1994
+ --flex-grid-8-col-2: 0.77275rem;
1995
+ --flex-grid-8-col-3: 0.65rem;
1996
+ --flex-grid-8-col-4: 0.5rem;
1997
+ --flex-grid-8-col-6: 0.275rem;
1998
+ --flex-grid-6-col-2: 0.675rem;
1999
+ --flex-grid-6-col-3: 0.5rem;
2000
+ --flex-grid-6-col-4: 0.355rem;
2001
+ --flex-grid-4-col-2: 0.5rem;
2002
+ --flex-grid-4-col-3: 0.275rem;
2003
+ }
2004
+ .md-flex-grid-col-4 > * {
2005
+ width: calc(25% - var(--flex-grid-4-gap));
2006
+ }
2007
+ .md-flex-grid-col-4 > *.md-flex-col-1 {
2008
+ width: calc(25% - var(--flex-grid-4-gap));
2009
+ }
2010
+ .md-flex-grid-col-4 > *.md-flex-col-2 {
2011
+ width: calc(50% - var(--flex-grid-4-col-2));
2012
+ }
2013
+ .md-flex-grid-col-4 > *.md-flex-col-3 {
2014
+ width: calc(75% - var(--flex-grid-4-col-3));
2015
+ }
2016
+ .md-flex-grid-col-4 > *.md-flex-col-4,
2017
+ .md-flex-grid-col-4 > *.md-flex-col-6,
2018
+ .md-flex-grid-col-4 > *.md-flex-col-8,
2019
+ .md-flex-grid-col-4 > *.md-flex-col-12 {
2020
+ width: 100%;
2021
+ }
2022
+ .md-flex-grid-col-6 > * {
2023
+ width: calc(16.66% - var(--flex-grid-6-gap));
2024
+ }
2025
+ .md-flex-grid-col-6 > *.md-flex-col-1 {
2026
+ width: calc(16.66% - var(--flex-grid-6-gap));
2027
+ }
2028
+ .md-flex-grid-col-6 > *.md-flex-col-2 {
2029
+ width: calc(33.34% - var(--flex-grid-6-col-2));
2030
+ }
2031
+ .md-flex-grid-col-6 > *.md-flex-col-3 {
2032
+ width: calc(50% - var(--flex-grid-6-col-3));
2033
+ }
2034
+ .md-flex-grid-col-6 > *.md-flex-col-4 {
2035
+ width: calc(66.67% - var(--flex-grid-6-col-4));
2036
+ }
2037
+ .md-flex-grid-col-6 > *.md-flex-col-6,
2038
+ .md-flex-grid-col-6 > *.md-flex-col-8,
2039
+ .md-flex-grid-col-6 > *.md-flex-col-12 {
2040
+ width: 100%;
2041
+ }
2042
+ .md-flex-grid-col-8 > * {
2043
+ width: calc(12.5% - var(--flex-grid-8-gap));
2044
+ }
2045
+ .md-flex-grid-col-8 > *.md-flex-col-1 {
2046
+ width: calc(12.5% - var(--flex-grid-8-gap));
2047
+ }
2048
+ .md-flex-grid-col-8 > *.md-flex-col-2 {
2049
+ width: calc(25% - var(--flex-grid-8-col-2));
2050
+ }
2051
+ .md-flex-grid-col-8 > *.md-flex-col-3 {
2052
+ width: calc(37.5% - var(--flex-grid-8-col-3));
2053
+ }
2054
+ .md-flex-grid-col-8 > *.md-flex-col-4 {
2055
+ width: calc(50% - var(--flex-grid-8-col-4));
2056
+ }
2057
+ .md-flex-grid-col-8 > *.md-flex-col-6 {
2058
+ width: calc(75% - var(--flex-grid-8-col-6));
2059
+ }
2060
+ .md-flex-grid-col-8 > *.md-flex-col-8,
2061
+ .md-flex-grid-col-8 > *.md-flex-col-12 {
2062
+ width: 100%;
2063
+ }
2064
+ .md-flex-grid-col-12 > * {
2065
+ width: calc(8.33% - var(--flex-grid-12-gap));
2066
+ }
2067
+ .md-flex-grid-col-12 > *.md-flex-col-1 {
2068
+ width: calc(8.33% - var(--flex-grid-12-gap));
2069
+ }
2070
+ .md-flex-grid-col-12 > *.md-flex-col-2 {
2071
+ width: calc(16.66% - var(--flex-grid-12-col-2));
2072
+ }
2073
+ .md-flex-grid-col-12 > *.md-flex-col-3 {
2074
+ width: calc(25% - var(--flex-grid-12-col-3));
2075
+ }
2076
+ .md-flex-grid-col-12 > *.md-flex-col-4 {
2077
+ width: calc(33.33% - var(--flex-grid-12-col-4));
2078
+ }
2079
+ .md-flex-grid-col-12 > *.md-flex-col-6 {
2080
+ width: calc(50% - var(--flex-grid-12-col-6));
2081
+ }
2082
+ .md-flex-grid-col-12 > *.md-flex-col-8 {
2083
+ width: calc(66.66% - var(--flex-grid-12-col-8));
2084
+ }
2085
+ .md-flex-grid-col-12 > *.md-flex-col-12 {
2086
+ width: 100%;
2087
+ }
2088
+ }
2089
+
2090
+ @media screen and (min-width: 960px) {
2091
+ .lg-flex-grid-8 {
2092
+ display: inline-flex;
2093
+ flex-wrap: wrap;
2094
+ gap: var(--sizing-8);
2095
+ --flex-grid-12-gap: 0.4584rem;
2096
+ --flex-grid-8-gap: 0.4375rem;
2097
+ --flex-grid-6-gap: 0.417rem;
2098
+ --flex-grid-4-gap: 0.375rem;
2099
+ --flex-grid-12-col-2: 0.425rem;
2100
+ --flex-grid-12-col-3: 0.3875rem;
2101
+ --flex-grid-12-col-4: 0.35rem;
2102
+ --flex-grid-12-col-6: 0.2725rem;
2103
+ --flex-grid-12-col-8: 0.375rem;
2104
+ --flex-grid-8-col-2: 0.3875rem;
2105
+ --flex-grid-8-col-3: 0.325rem;
2106
+ --flex-grid-8-col-4: 0.275rem;
2107
+ --flex-grid-8-col-6: 0.225rem;
2108
+ --flex-grid-6-col-2: 0.3525rem;
2109
+ --flex-grid-6-col-3: 0.275rem;
2110
+ --flex-grid-6-col-4: 0.2125rem;
2111
+ --flex-grid-4-col-2: 0.25rem;
2112
+ --flex-grid-4-col-3: 0.125rem;
2113
+ }
2114
+ .lg-flex-grid-12 {
2115
+ display: inline-flex;
2116
+ flex-wrap: wrap;
2117
+ gap: var(--sizing-12);
2118
+ --flex-grid-12-gap: 0.9140625rem;
2119
+ --flex-grid-8-gap: 0.875rem;
2120
+ --flex-grid-6-gap: 0.8309375rem;
2121
+ --flex-grid-4-gap: 0.75rem;
2122
+ --flex-grid-12-col-2: 0.828rem;
2123
+ --flex-grid-12-col-3: 0.75rem;
2124
+ --flex-grid-12-col-4: 0.6725rem;
2125
+ --flex-grid-12-col-6: 0.5125rem;
2126
+ --flex-grid-12-col-8: 0.375rem;
2127
+ --flex-grid-8-col-2: 0.77275rem;
2128
+ --flex-grid-8-col-3: 0.65rem;
2129
+ --flex-grid-8-col-4: 0.5rem;
2130
+ --flex-grid-8-col-6: 0.275rem;
2131
+ --flex-grid-6-col-2: 0.675rem;
2132
+ --flex-grid-6-col-3: 0.5rem;
2133
+ --flex-grid-6-col-4: 0.355rem;
2134
+ --flex-grid-4-col-2: 0.5rem;
2135
+ --flex-grid-4-col-3: 0.275rem;
2136
+ }
2137
+ .lg-flex-grid-16 {
2138
+ display: inline-flex;
2139
+ flex-wrap: wrap;
2140
+ gap: var(--sizing-16);
2141
+ --flex-grid-12-gap: 0.9140625rem;
2142
+ --flex-grid-8-gap: 0.875rem;
2143
+ --flex-grid-6-gap: 0.8309375rem;
2144
+ --flex-grid-4-gap: 0.75rem;
2145
+ --flex-grid-12-col-2: 0.8325rem;
2146
+ --flex-grid-12-col-3: 0.75rem;
2147
+ --flex-grid-12-col-4: 0.6725rem;
2148
+ --flex-grid-12-col-6: 0.5125rem;
2149
+ --flex-grid-12-col-8: 0.375rem;
2150
+ --flex-grid-8-col-2: 0.77275rem;
2151
+ --flex-grid-8-col-3: 0.65rem;
2152
+ --flex-grid-8-col-4: 0.5rem;
2153
+ --flex-grid-8-col-6: 0.275rem;
2154
+ --flex-grid-6-col-2: 0.675rem;
2155
+ --flex-grid-6-col-3: 0.5rem;
2156
+ --flex-grid-6-col-4: 0.355rem;
2157
+ --flex-grid-4-col-2: 0.5rem;
2158
+ --flex-grid-4-col-3: 0.275rem;
2159
+ }
2160
+ .lg-flex-grid-col-4 > * {
2161
+ width: calc(25% - var(--flex-grid-4-gap));
2162
+ }
2163
+ .lg-flex-grid-col-4 > *.lg-flex-col-1 {
2164
+ width: calc(25% - var(--flex-grid-4-gap));
2165
+ }
2166
+ .lg-flex-grid-col-4 > *.lg-flex-col-2 {
2167
+ width: calc(50% - var(--flex-grid-4-col-2));
2168
+ }
2169
+ .lg-flex-grid-col-4 > *.lg-flex-col-3 {
2170
+ width: calc(75% - var(--flex-grid-4-col-3));
2171
+ }
2172
+ .lg-flex-grid-col-4 > *.lg-flex-col-4,
2173
+ .lg-flex-grid-col-4 > *.lg-flex-col-6,
2174
+ .lg-flex-grid-col-4 > *.lg-flex-col-8,
2175
+ .lg-flex-grid-col-4 > *.lg-flex-col-12 {
2176
+ width: 100%;
2177
+ }
2178
+ .lg-flex-grid-col-6 > * {
2179
+ width: calc(16.66% - var(--flex-grid-6-gap));
2180
+ }
2181
+ .lg-flex-grid-col-6 > *.lg-flex-col-1 {
2182
+ width: calc(16.66% - var(--flex-grid-6-gap));
2183
+ }
2184
+ .lg-flex-grid-col-6 > *.lg-flex-col-2 {
2185
+ width: calc(33.34% - var(--flex-grid-6-col-2));
2186
+ }
2187
+ .lg-flex-grid-col-6 > *.lg-flex-col-3 {
2188
+ width: calc(50% - var(--flex-grid-6-col-3));
2189
+ }
2190
+ .lg-flex-grid-col-6 > *.lg-flex-col-4 {
2191
+ width: calc(66.67% - var(--flex-grid-6-col-4));
2192
+ }
2193
+ .lg-flex-grid-col-6 > *.lg-flex-col-6,
2194
+ .lg-flex-grid-col-6 > *.lg-flex-col-8,
2195
+ .lg-flex-grid-col-6 > *.lg-flex-col-12 {
2196
+ width: 100%;
2197
+ }
2198
+ .lg-flex-grid-col-8 > * {
2199
+ width: calc(12.5% - var(--flex-grid-8-gap));
2200
+ }
2201
+ .lg-flex-grid-col-8 > *.lg-flex-col-1 {
2202
+ width: calc(12.5% - var(--flex-grid-8-gap));
2203
+ }
2204
+ .lg-flex-grid-col-8 > *.lg-flex-col-2 {
2205
+ width: calc(25% - var(--flex-grid-8-col-2));
2206
+ }
2207
+ .lg-flex-grid-col-8 > *.lg-flex-col-3 {
2208
+ width: calc(37.5% - var(--flex-grid-8-col-3));
2209
+ }
2210
+ .lg-flex-grid-col-8 > *.lg-flex-col-4 {
2211
+ width: calc(50% - var(--flex-grid-8-col-4));
2212
+ }
2213
+ .lg-flex-grid-col-8 > *.lg-flex-col-6 {
2214
+ width: calc(75% - var(--flex-grid-8-col-6));
2215
+ }
2216
+ .lg-flex-grid-col-8 > *.lg-flex-col-8,
2217
+ .lg-flex-grid-col-8 > *.lg-flex-col-12 {
2218
+ width: 100%;
2219
+ }
2220
+ .lg-flex-grid-col-12 > * {
2221
+ width: calc(8.33% - var(--flex-grid-12-gap));
2222
+ }
2223
+ .lg-flex-grid-col-12 > *.lg-flex-col-1 {
2224
+ width: calc(8.33% - var(--flex-grid-12-gap));
2225
+ }
2226
+ .lg-flex-grid-col-12 > *.lg-flex-col-2 {
2227
+ width: calc(16.66% - var(--flex-grid-12-col-2));
2228
+ }
2229
+ .lg-flex-grid-col-12 > *.lg-flex-col-3 {
2230
+ width: calc(25% - var(--flex-grid-12-col-3));
2231
+ }
2232
+ .lg-flex-grid-col-12 > *.lg-flex-col-4 {
2233
+ width: calc(33.33% - var(--flex-grid-12-col-4));
2234
+ }
2235
+ .lg-flex-grid-col-12 > *.lg-flex-col-6 {
2236
+ width: calc(50% - var(--flex-grid-12-col-6));
2237
+ }
2238
+ .lg-flex-grid-col-12 > *.lg-flex-col-8 {
2239
+ width: calc(66.66% - var(--flex-grid-12-col-8));
2240
+ }
2241
+ .lg-flex-grid-col-12 > *.lg-flex-col-12 {
2242
+ width: 100%;
2243
+ }
2244
+ }
2245
+
2246
+ @media screen and (min-width: 1280px) {
2247
+ .xl-flex-grid-8 {
2248
+ display: inline-flex;
2249
+ flex-wrap: wrap;
2250
+ gap: var(--sizing-8);
2251
+ --flex-grid-12-gap: 0.4584rem;
2252
+ --flex-grid-8-gap: 0.4375rem;
2253
+ --flex-grid-6-gap: 0.417rem;
2254
+ --flex-grid-4-gap: 0.375rem;
2255
+ --flex-grid-12-col-2: 0.425rem;
2256
+ --flex-grid-12-col-3: 0.3875rem;
2257
+ --flex-grid-12-col-4: 0.35rem;
2258
+ --flex-grid-12-col-6: 0.2725rem;
2259
+ --flex-grid-12-col-8: 0.375rem;
2260
+ --flex-grid-8-col-2: 0.3875rem;
2261
+ --flex-grid-8-col-3: 0.325rem;
2262
+ --flex-grid-8-col-4: 0.275rem;
2263
+ --flex-grid-8-col-6: 0.225rem;
2264
+ --flex-grid-6-col-2: 0.3525rem;
2265
+ --flex-grid-6-col-3: 0.275rem;
2266
+ --flex-grid-6-col-4: 0.2125rem;
2267
+ --flex-grid-4-col-2: 0.25rem;
2268
+ --flex-grid-4-col-3: 0.125rem;
2269
+ }
2270
+ .xl-flex-grid-12 {
2271
+ display: inline-flex;
2272
+ flex-wrap: wrap;
2273
+ gap: var(--sizing-12);
2274
+ --flex-grid-12-gap: 0.9140625rem;
2275
+ --flex-grid-8-gap: 0.875rem;
2276
+ --flex-grid-6-gap: 0.8309375rem;
2277
+ --flex-grid-4-gap: 0.75rem;
2278
+ --flex-grid-12-col-2: 0.828rem;
2279
+ --flex-grid-12-col-3: 0.75rem;
2280
+ --flex-grid-12-col-4: 0.6725rem;
2281
+ --flex-grid-12-col-6: 0.5125rem;
2282
+ --flex-grid-12-col-8: 0.375rem;
2283
+ --flex-grid-8-col-2: 0.77275rem;
2284
+ --flex-grid-8-col-3: 0.65rem;
2285
+ --flex-grid-8-col-4: 0.5rem;
2286
+ --flex-grid-8-col-6: 0.275rem;
2287
+ --flex-grid-6-col-2: 0.675rem;
2288
+ --flex-grid-6-col-3: 0.5rem;
2289
+ --flex-grid-6-col-4: 0.355rem;
2290
+ --flex-grid-4-col-2: 0.5rem;
2291
+ --flex-grid-4-col-3: 0.275rem;
2292
+ }
2293
+ .xl-flex-grid-16 {
2294
+ display: inline-flex;
2295
+ flex-wrap: wrap;
2296
+ gap: var(--sizing-16);
2297
+ --flex-grid-12-gap: 0.9140625rem;
2298
+ --flex-grid-8-gap: 0.875rem;
2299
+ --flex-grid-6-gap: 0.8309375rem;
2300
+ --flex-grid-4-gap: 0.75rem;
2301
+ --flex-grid-12-col-2: 0.8325rem;
2302
+ --flex-grid-12-col-3: 0.75rem;
2303
+ --flex-grid-12-col-4: 0.6725rem;
2304
+ --flex-grid-12-col-6: 0.5125rem;
2305
+ --flex-grid-12-col-8: 0.375rem;
2306
+ --flex-grid-8-col-2: 0.77275rem;
2307
+ --flex-grid-8-col-3: 0.65rem;
2308
+ --flex-grid-8-col-4: 0.5rem;
2309
+ --flex-grid-8-col-6: 0.275rem;
2310
+ --flex-grid-6-col-2: 0.675rem;
2311
+ --flex-grid-6-col-3: 0.5rem;
2312
+ --flex-grid-6-col-4: 0.355rem;
2313
+ --flex-grid-4-col-2: 0.5rem;
2314
+ --flex-grid-4-col-3: 0.275rem;
2315
+ }
2316
+ .xl-flex-grid-col-4 > * {
2317
+ width: calc(25% - var(--flex-grid-4-gap));
2318
+ }
2319
+ .xl-flex-grid-col-4 > *.xl-flex-col-1 {
2320
+ width: calc(25% - var(--flex-grid-4-gap));
2321
+ }
2322
+ .xl-flex-grid-col-4 > *.xl-flex-col-2 {
2323
+ width: calc(50% - var(--flex-grid-4-col-2));
2324
+ }
2325
+ .xl-flex-grid-col-4 > *.xl-flex-col-3 {
2326
+ width: calc(75% - var(--flex-grid-4-col-3));
2327
+ }
2328
+ .xl-flex-grid-col-4 > *.xl-flex-col-4,
2329
+ .xl-flex-grid-col-4 > *.xl-flex-col-6,
2330
+ .xl-flex-grid-col-4 > *.xl-flex-col-8,
2331
+ .xl-flex-grid-col-4 > *.xl-flex-col-12 {
2332
+ width: 100%;
2333
+ }
2334
+ .xl-flex-grid-col-6 > * {
2335
+ width: calc(16.66% - var(--flex-grid-6-gap));
2336
+ }
2337
+ .xl-flex-grid-col-6 > *.xl-flex-col-1 {
2338
+ width: calc(16.66% - var(--flex-grid-6-gap));
2339
+ }
2340
+ .xl-flex-grid-col-6 > *.xl-flex-col-2 {
2341
+ width: calc(33.34% - var(--flex-grid-6-col-2));
2342
+ }
2343
+ .xl-flex-grid-col-6 > *.xl-flex-col-3 {
2344
+ width: calc(50% - var(--flex-grid-6-col-3));
2345
+ }
2346
+ .xl-flex-grid-col-6 > *.xl-flex-col-4 {
2347
+ width: calc(66.67% - var(--flex-grid-6-col-4));
2348
+ }
2349
+ .xl-flex-grid-col-6 > *.xl-flex-col-6,
2350
+ .xl-flex-grid-col-6 > *.xl-flex-col-8,
2351
+ .xl-flex-grid-col-6 > *.xl-flex-col-12 {
2352
+ width: 100%;
2353
+ }
2354
+ .xl-flex-grid-col-8 > * {
2355
+ width: calc(12.5% - var(--flex-grid-8-gap));
2356
+ }
2357
+ .xl-flex-grid-col-8 > *.xl-flex-col-1 {
2358
+ width: calc(12.5% - var(--flex-grid-8-gap));
2359
+ }
2360
+ .xl-flex-grid-col-8 > *.xl-flex-col-2 {
2361
+ width: calc(25% - var(--flex-grid-8-col-2));
2362
+ }
2363
+ .xl-flex-grid-col-8 > *.xl-flex-col-3 {
2364
+ width: calc(37.5% - var(--flex-grid-8-col-3));
2365
+ }
2366
+ .xl-flex-grid-col-8 > *.xl-flex-col-4 {
2367
+ width: calc(50% - var(--flex-grid-8-col-4));
2368
+ }
2369
+ .xl-flex-grid-col-8 > *.xl-flex-col-6 {
2370
+ width: calc(75% - var(--flex-grid-8-col-6));
2371
+ }
2372
+ .xl-flex-grid-col-8 > *.xl-flex-col-8,
2373
+ .xl-flex-grid-col-8 > *.xl-flex-col-12 {
2374
+ width: 100%;
2375
+ }
2376
+ .xl-flex-grid-col-12 > * {
2377
+ width: calc(8.33% - var(--flex-grid-12-gap));
2378
+ }
2379
+ .xl-flex-grid-col-12 > *.xl-flex-col-1 {
2380
+ width: calc(8.33% - var(--flex-grid-12-gap));
2381
+ }
2382
+ .xl-flex-grid-col-12 > *.xl-flex-col-2 {
2383
+ width: calc(16.66% - var(--flex-grid-12-col-2));
2384
+ }
2385
+ .xl-flex-grid-col-12 > *.xl-flex-col-3 {
2386
+ width: calc(25% - var(--flex-grid-12-col-3));
2387
+ }
2388
+ .xl-flex-grid-col-12 > *.xl-flex-col-4 {
2389
+ width: calc(33.33% - var(--flex-grid-12-col-4));
2390
+ }
2391
+ .xl-flex-grid-col-12 > *.xl-flex-col-6 {
2392
+ width: calc(50% - var(--flex-grid-12-col-6));
2393
+ }
2394
+ .xl-flex-grid-col-12 > *.xl-flex-col-8 {
2395
+ width: calc(66.66% - var(--flex-grid-12-col-8));
2396
+ }
2397
+ .xl-flex-grid-col-12 > *.xl-flex-col-12 {
2398
+ width: 100%;
2399
+ }
2400
+ }
2401
+
2402
+ .font-mode-500 {
2403
+ color: var(--color-theme-500);
2404
+ }
2405
+
2406
+ .font-mode-300 {
2407
+ color: var(--color-theme-300);
2408
+ }
2409
+
2410
+ .font-mode-100 {
2411
+ color: var(--color-theme-100);
2412
+ }
2413
+
2414
+ .bg-mode-500 {
2415
+ background: var(--background-theme-500);
2416
+ }
2417
+
2418
+ .bg-mode-300 {
2419
+ background: var(--background-theme-300);
2420
+ }
2421
+
2422
+ .bg-mode-100 {
2423
+ background: var(--background-theme-100);
2424
+ }
2425
+
2426
+ .border-1-mode-500 {
2427
+ border: var(--border-1-theme-500);
2428
+ }
2429
+
2430
+ .border-2-mode-500 {
2431
+ border: var(--border-2-theme-500);
2432
+ }
2433
+
2434
+ .border-4-mode-500 {
2435
+ border: var(--border-4-theme-500);
2436
+ }
2437
+
2438
+ .align-center {
2439
+ text-align: center !important;
2440
+ }
2441
+
2442
+ .align-justify {
2443
+ text-align: justify !important;
2444
+ }
2445
+
2446
+ .align-left {
2447
+ text-align: left !important;
2448
+ }
2449
+
2450
+ .align-right {
2451
+ text-align: right !important;
2452
+ }
2453
+
2454
+ .truncate {
2455
+ text-overflow: ellipsis;
2456
+ overflow: hidden;
2457
+ white-space: nowrap;
2458
+ }
2459
+
2460
+ h1 {
2461
+ font-size: var(--heading1-font-size);
2462
+ letter-spacing: var(--heading1-letter-spacing);
2463
+ min-height: var(--heading1-line-height);
2464
+ line-height: var(--heading1-line-height);
2465
+ }
2466
+
2467
+ h2 {
2468
+ font-size: var(--heading2-font-size);
2469
+ letter-spacing: var(--heading2-letter-spacing);
2470
+ min-height: var(--heading2-line-height);
2471
+ line-height: var(--heading2-line-height);
2472
+ }
2473
+
2474
+ h3 {
2475
+ font-size: var(--heading3-font-size);
2476
+ letter-spacing: var(--heading3-letter-spacing);
2477
+ min-height: var(--heading3-line-height);
2478
+ line-height: var(--heading3-line-height);
2479
+ }
2480
+
2481
+ h4 {
2482
+ font-size: var(--heading4-font-size);
2483
+ letter-spacing: var(--heading4-letter-spacing);
2484
+ min-height: var(--heading4-line-height);
2485
+ line-height: var(--heading4-line-height);
2486
+ }
2487
+
2488
+ h5 {
2489
+ font-size: var(--heading5-font-size);
2490
+ letter-spacing: var(--heading5-letter-spacing);
2491
+ min-height: var(--heading5-line-height);
2492
+ line-height: var(--heading5-line-height);
2493
+ }
2494
+
2495
+ h6 {
2496
+ font-size: var(--heading6-font-size);
2497
+ letter-spacing: var(--heading6-letter-spacing);
2498
+ min-height: var(--heading6-line-height);
2499
+ line-height: var(--heading6-line-height);
2500
+ }
2501
+
2502
+ .h1-default,
2503
+ .h1-regular,
2504
+ .h1-medium,
2505
+ .h1-semibold,
2506
+ .h1-bold {
2507
+ font-size: var(--heading1-font-size);
2508
+ letter-spacing: var(--heading1-letter-spacing);
2509
+ min-height: var(--heading1-line-height);
2510
+ line-height: var(--heading1-line-height);
2511
+ }
2512
+
2513
+ .h1-regular {
2514
+ font-weight: var(--font-weight-regular);
2515
+ }
2516
+
2517
+ .h1-medium {
2518
+ font-weight: var(--font-weight-medium);
2519
+ }
2520
+
2521
+ .h1-semibold {
2522
+ font-weight: var(--font-weight-semibold);
2523
+ }
2524
+
2525
+ .h1-bold {
2526
+ font-weight: var(--font-weight-bold);
2527
+ }
2528
+
2529
+ .h2-default,
2530
+ .h2-regular,
2531
+ .h2-medium,
2532
+ .h2-semibold,
2533
+ .h2-bold {
2534
+ font-size: var(--heading2-font-size);
2535
+ letter-spacing: var(--heading2-letter-spacing);
2536
+ min-height: var(--heading2-line-height);
2537
+ line-height: var(--heading2-line-height);
2538
+ }
2539
+
2540
+ .h2-regular {
2541
+ font-weight: var(--font-weight-regular);
2542
+ }
2543
+
2544
+ .h2-medium {
2545
+ font-weight: var(--font-weight-medium);
2546
+ }
2547
+
2548
+ .h2-semibold {
2549
+ font-weight: var(--font-weight-semibold);
2550
+ }
2551
+
2552
+ .h2-bold {
2553
+ font-weight: var(--font-weight-bold);
2554
+ }
2555
+
2556
+ .h3-default,
2557
+ .h3-regular,
2558
+ .h3-medium,
2559
+ .h3-semibold,
2560
+ .h3-bold {
2561
+ font-size: var(--heading3-font-size);
2562
+ letter-spacing: var(--heading3-letter-spacing);
2563
+ min-height: var(--heading3-line-height);
2564
+ line-height: var(--heading3-line-height);
2565
+ }
2566
+
2567
+ .h3-regular {
2568
+ font-weight: var(--font-weight-regular);
2569
+ }
2570
+
2571
+ .h3-medium {
2572
+ font-weight: var(--font-weight-medium);
2573
+ }
2574
+
2575
+ .h3-semibold {
2576
+ font-weight: var(--font-weight-semibold);
2577
+ }
2578
+
2579
+ .h3-bold {
2580
+ font-weight: var(--font-weight-bold);
2581
+ }
2582
+
2583
+ .h4-default,
2584
+ .h4-regular,
2585
+ .h4-medium,
2586
+ .h4-semibold,
2587
+ .h4-bold {
2588
+ font-size: var(--heading4-font-size);
2589
+ letter-spacing: var(--heading4-letter-spacing);
2590
+ min-height: var(--heading4-line-height);
2591
+ line-height: var(--heading4-line-height);
2592
+ }
2593
+
2594
+ .h4-regular {
2595
+ font-weight: var(--font-weight-regular);
2596
+ }
2597
+
2598
+ .h4-medium {
2599
+ font-weight: var(--font-weight-medium);
2600
+ }
2601
+
2602
+ .h4-semibold {
2603
+ font-weight: var(--font-weight-semibold);
2604
+ }
2605
+
2606
+ .h4-bold {
2607
+ font-weight: var(--font-weight-bold);
2608
+ }
2609
+
2610
+ .h5-default,
2611
+ .h5-regular,
2612
+ .h5-medium,
2613
+ .h5-semibold,
2614
+ .h5-bold {
2615
+ font-size: var(--heading5-font-size);
2616
+ letter-spacing: var(--heading5-letter-spacing);
2617
+ min-height: var(--heading5-line-height);
2618
+ line-height: var(--heading5-line-height);
2619
+ }
2620
+
2621
+ .h5-regular {
2622
+ font-weight: var(--font-weight-regular);
2623
+ }
2624
+
2625
+ .h5-medium {
2626
+ font-weight: var(--font-weight-medium);
2627
+ }
2628
+
2629
+ .h5-semibold {
2630
+ font-weight: var(--font-weight-semibold);
2631
+ }
2632
+
2633
+ .h5-bold {
2634
+ font-weight: var(--font-weight-bold);
2635
+ }
2636
+
2637
+ .h6-default,
2638
+ .h6-regular,
2639
+ .h6-medium,
2640
+ .h6-semibold,
2641
+ .h6-bold {
2642
+ font-size: var(--heading6-font-size);
2643
+ letter-spacing: var(--heading6-letter-spacing);
2644
+ min-height: var(--heading6-line-height);
2645
+ line-height: var(--heading6-line-height);
2646
+ }
2647
+
2648
+ .h6-regular {
2649
+ font-weight: var(--font-weight-regular);
2650
+ }
2651
+
2652
+ .h6-medium {
2653
+ font-weight: var(--font-weight-medium);
2654
+ }
2655
+
2656
+ .h6-semibold {
2657
+ font-weight: var(--font-weight-semibold);
2658
+ }
2659
+
2660
+ .h6-bold {
2661
+ font-weight: var(--font-weight-bold);
2662
+ }
2663
+
2664
+ .title-default,
2665
+ .title-regular,
2666
+ .title-medium,
2667
+ .title-semibold,
2668
+ .title-bold {
2669
+ font-size: var(--title-font-size);
2670
+ letter-spacing: var(--title-letter-spacing);
2671
+ min-height: var(--title-line-height);
2672
+ line-height: var(--title-line-height);
2673
+ }
2674
+
2675
+ .title-regular {
2676
+ font-weight: var(--font-weight-regular);
2677
+ }
2678
+
2679
+ .title-medium {
2680
+ font-weight: var(--font-weight-medium);
2681
+ }
2682
+
2683
+ .title-semibold {
2684
+ font-weight: var(--font-weight-semibold);
2685
+ }
2686
+
2687
+ .title-bold {
2688
+ font-weight: var(--font-weight-bold);
2689
+ }
2690
+
2691
+ .subtitle-default,
2692
+ .subtitle-regular,
2693
+ .subtitle-medium,
2694
+ .subtitle-semibold,
2695
+ .subtitle-bold {
2696
+ font-size: var(--subtitle-font-size);
2697
+ letter-spacing: var(--subtitle-letter-spacing);
2698
+ min-height: var(--subtitle-line-height);
2699
+ line-height: var(--subtitle-line-height);
2700
+ }
2701
+
2702
+ .subtitle-regular {
2703
+ font-weight: var(--font-weight-regular);
2704
+ }
2705
+
2706
+ .subtitle-medium {
2707
+ font-weight: var(--font-weight-medium);
2708
+ }
2709
+
2710
+ .subtitle-semibold {
2711
+ font-weight: var(--font-weight-semibold);
2712
+ }
2713
+
2714
+ .subtitle-bold {
2715
+ font-weight: var(--font-weight-bold);
2716
+ }
2717
+
2718
+ .body-default,
2719
+ .body-regular,
2720
+ .body-medium,
2721
+ .body-semibold,
2722
+ .body-bold {
2723
+ font-size: var(--body-font-size);
2724
+ letter-spacing: var(--body-letter-spacing);
2725
+ min-height: var(--body-line-height);
2726
+ line-height: var(--body-line-height);
2727
+ }
2728
+
2729
+ .body-regular {
2730
+ font-weight: var(--font-weight-regular);
2731
+ }
2732
+
2733
+ .body-medium {
2734
+ font-weight: var(--font-weight-medium);
2735
+ }
2736
+
2737
+ .body-semibold {
2738
+ font-weight: var(--font-weight-semibold);
2739
+ }
2740
+
2741
+ .body-bold {
2742
+ font-weight: var(--font-weight-bold);
2743
+ }
2744
+
2745
+ .input-default,
2746
+ .input-regular,
2747
+ .input-medium,
2748
+ .input-semibold,
2749
+ .input-bold {
2750
+ font-size: var(--input-font-size);
2751
+ letter-spacing: var(--input-letter-spacing);
2752
+ min-height: var(--input-line-height);
2753
+ line-height: var(--input-line-height);
2754
+ }
2755
+
2756
+ .input-regular {
2757
+ font-weight: var(--font-weight-regular);
2758
+ }
2759
+
2760
+ .input-medium {
2761
+ font-weight: var(--font-weight-medium);
2762
+ }
2763
+
2764
+ .input-semibold {
2765
+ font-weight: var(--font-weight-semibold);
2766
+ }
2767
+
2768
+ .input-bold {
2769
+ font-weight: var(--font-weight-bold);
2770
+ }
2771
+
2772
+ .label-default,
2773
+ .label-regular,
2774
+ .label-medium,
2775
+ .label-semibold,
2776
+ .label-bold {
2777
+ font-size: var(--label-font-size);
2778
+ letter-spacing: var(--label-letter-spacing);
2779
+ min-height: var(--label-line-height);
2780
+ line-height: var(--label-line-height);
2781
+ }
2782
+
2783
+ .label-regular {
2784
+ font-weight: var(--font-weight-regular);
2785
+ }
2786
+
2787
+ .label-medium {
2788
+ font-weight: var(--font-weight-medium);
2789
+ }
2790
+
2791
+ .label-semibold {
2792
+ font-weight: var(--font-weight-semibold);
2793
+ }
2794
+
2795
+ .label-bold {
2796
+ font-weight: var(--font-weight-bold);
2797
+ }
2798
+
2799
+ .smalltext-default,
2800
+ .smalltext-regular,
2801
+ .smalltext-medium,
2802
+ .smalltext-semibold,
2803
+ .smalltext-bold {
2804
+ font-size: var(--smalltext-font-size);
2805
+ letter-spacing: var(--smalltext-letter-spacing);
2806
+ min-height: var(--smalltext-line-height);
2807
+ line-height: var(--smalltext-line-height);
2808
+ }
2809
+
2810
+ .smalltext-regular {
2811
+ font-weight: var(--font-weight-regular);
2812
+ }
2813
+
2814
+ .smalltext-medium {
2815
+ font-weight: var(--font-weight-medium);
2816
+ }
2817
+
2818
+ .smalltext-semibold {
2819
+ font-weight: var(--font-weight-semibold);
2820
+ }
2821
+
2822
+ .smalltext-bold {
2823
+ font-weight: var(--font-weight-bold);
2824
+ }
2825
+
2826
+ .caption-default,
2827
+ .caption-regular,
2828
+ .caption-medium,
2829
+ .caption-semibold,
2830
+ .caption-bold {
2831
+ font-size: var(--caption-font-size);
2832
+ letter-spacing: var(--caption-letter-spacing);
2833
+ min-height: var(--caption-line-height);
2834
+ line-height: var(--caption-line-height);
2835
+ }
2836
+
2837
+ .caption-regular {
2838
+ font-weight: var(--font-weight-regular);
2839
+ }
2840
+
2841
+ .caption-medium {
2842
+ font-weight: var(--font-weight-medium);
2843
+ }
2844
+
2845
+ .caption-semibold {
2846
+ font-weight: var(--font-weight-semibold);
2847
+ }
2848
+
2849
+ .caption-bold {
2850
+ font-weight: var(--font-weight-bold);
2851
+ }
2852
+
2853
+ .overline-default,
2854
+ .overline-regular,
2855
+ .overline-medium,
2856
+ .overline-semibold,
2857
+ .overline-bold {
2858
+ font-size: var(--overline-font-size);
2859
+ letter-spacing: var(--overline-letter-spacing);
2860
+ min-height: var(--overline-line-height);
2861
+ line-height: var(--overline-line-height);
2862
+ }
2863
+
2864
+ .overline-regular {
2865
+ font-weight: var(--font-weight-regular);
2866
+ }
2867
+
2868
+ .overline-medium {
2869
+ font-weight: var(--font-weight-medium);
2870
+ }
2871
+
2872
+ .overline-semibold {
2873
+ font-weight: var(--font-weight-semibold);
2874
+ }
2875
+
2876
+ .overline-bold {
2877
+ font-weight: var(--font-weight-bold);
2878
+ }
2879
+
2880
+ .pdg-top-4 {
2881
+ padding-top: var(--sizing-4);
2882
+ }
2883
+
2884
+ .pdg-rgt-4 {
2885
+ padding-right: var(--sizing-4);
2886
+ }
2887
+
2888
+ .pdg-bot-4 {
2889
+ padding-bottom: var(--sizing-4);
2890
+ }
2891
+
2892
+ .pdg-lft-4 {
2893
+ padding-left: var(--sizing-4);
2894
+ }
2895
+
2896
+ .pdg-hrz-4 {
2897
+ padding: 0rem var(--sizing-4);
2898
+ }
2899
+
2900
+ .pdg-vrt-4 {
2901
+ padding: var(--sizing-4) 0rem;
2902
+ }
2903
+
2904
+ .pdg-4 {
2905
+ padding: var(--sizing-4);
2906
+ }
2907
+
2908
+ .pdg-top-8 {
2909
+ padding-top: var(--sizing-8);
2910
+ }
2911
+
2912
+ .pdg-rgt-8 {
2913
+ padding-right: var(--sizing-8);
2914
+ }
2915
+
2916
+ .pdg-bot-8 {
2917
+ padding-bottom: var(--sizing-8);
2918
+ }
2919
+
2920
+ .pdg-lft-8 {
2921
+ padding-left: var(--sizing-8);
2922
+ }
2923
+
2924
+ .pdg-hrz-8 {
2925
+ padding: 0rem var(--sizing-8);
2926
+ }
2927
+
2928
+ .pdg-vrt-8 {
2929
+ padding: var(--sizing-8) 0rem;
2930
+ }
2931
+
2932
+ .pdg-8 {
2933
+ padding: var(--sizing-8);
2934
+ }
2935
+
2936
+ .pdg-top-12 {
2937
+ padding-top: var(--sizing-12);
2938
+ }
2939
+
2940
+ .pdg-rgt-12 {
2941
+ padding-right: var(--sizing-12);
2942
+ }
2943
+
2944
+ .pdg-bot-12 {
2945
+ padding-bottom: var(--sizing-12);
2946
+ }
2947
+
2948
+ .pdg-lft-12 {
2949
+ padding-left: var(--sizing-12);
2950
+ }
2951
+
2952
+ .pdg-hrz-12 {
2953
+ padding: 0rem var(--sizing-12);
2954
+ }
2955
+
2956
+ .pdg-vrt-12 {
2957
+ padding: var(--sizing-12) 0rem;
2958
+ }
2959
+
2960
+ .pdg-12 {
2961
+ padding: var(--sizing-12);
2962
+ }
2963
+
2964
+ .pdg-top-16 {
2965
+ padding-top: var(--sizing-16);
2966
+ }
2967
+
2968
+ .pdg-rgt-16 {
2969
+ padding-right: var(--sizing-16);
2970
+ }
2971
+
2972
+ .pdg-bot-16 {
2973
+ padding-bottom: var(--sizing-16);
2974
+ }
2975
+
2976
+ .pdg-lft-16 {
2977
+ padding-left: var(--sizing-16);
2978
+ }
2979
+
2980
+ .pdg-hrz-16 {
2981
+ padding: 0rem var(--sizing-16);
2982
+ }
2983
+
2984
+ .pdg-vrt-16 {
2985
+ padding: var(--sizing-16) 0rem;
2986
+ }
2987
+
2988
+ .pdg-16 {
2989
+ padding: var(--sizing-16);
2990
+ }
2991
+
2992
+ .pdg-top-24 {
2993
+ padding-top: var(--sizing-24);
1514
2994
  }
1515
2995
 
1516
- @media screen and (min-width: 1280px) {
1517
- .xl-flex-grid-8 {
1518
- display: inline-flex;
1519
- flex-wrap: wrap;
1520
- gap: var(--sizing-8);
1521
- --flex-grid-12-gap: 0.4584rem;
1522
- --flex-grid-8-gap: 0.4375rem;
1523
- --flex-grid-6-gap: 0.417rem;
1524
- --flex-grid-4-gap: 0.375rem;
1525
- --flex-grid-12-col-2: 0.425rem;
1526
- --flex-grid-12-col-3: 0.3875rem;
1527
- --flex-grid-12-col-4: 0.35rem;
1528
- --flex-grid-12-col-6: 0.2725rem;
1529
- --flex-grid-12-col-8: 0.375rem;
1530
- --flex-grid-8-col-2: 0.3875rem;
1531
- --flex-grid-8-col-3: 0.325rem;
1532
- --flex-grid-8-col-4: 0.275rem;
1533
- --flex-grid-8-col-6: 0.225rem;
1534
- --flex-grid-6-col-2: 0.3525rem;
1535
- --flex-grid-6-col-3: 0.275rem;
1536
- --flex-grid-6-col-4: 0.2125rem;
1537
- --flex-grid-4-col-2: 0.25rem;
1538
- --flex-grid-4-col-3: 0.125rem;
1539
- }
1540
- .xl-flex-grid-12 {
1541
- display: inline-flex;
1542
- flex-wrap: wrap;
1543
- gap: var(--sizing-12);
1544
- --flex-grid-12-gap: 0.9140625rem;
1545
- --flex-grid-8-gap: 0.875rem;
1546
- --flex-grid-6-gap: 0.8309375rem;
1547
- --flex-grid-4-gap: 0.75rem;
1548
- --flex-grid-12-col-2: 0.828rem;
1549
- --flex-grid-12-col-3: 0.75rem;
1550
- --flex-grid-12-col-4: 0.6725rem;
1551
- --flex-grid-12-col-6: 0.5125rem;
1552
- --flex-grid-12-col-8: 0.375rem;
1553
- --flex-grid-8-col-2: 0.77275rem;
1554
- --flex-grid-8-col-3: 0.65rem;
1555
- --flex-grid-8-col-4: 0.5rem;
1556
- --flex-grid-8-col-6: 0.275rem;
1557
- --flex-grid-6-col-2: 0.675rem;
1558
- --flex-grid-6-col-3: 0.5rem;
1559
- --flex-grid-6-col-4: 0.355rem;
1560
- --flex-grid-4-col-2: 0.5rem;
1561
- --flex-grid-4-col-3: 0.275rem;
1562
- }
1563
- .xl-flex-grid-16 {
1564
- display: inline-flex;
1565
- flex-wrap: wrap;
1566
- gap: var(--sizing-16);
1567
- --flex-grid-12-gap: 0.9140625rem;
1568
- --flex-grid-8-gap: 0.875rem;
1569
- --flex-grid-6-gap: 0.8309375rem;
1570
- --flex-grid-4-gap: 0.75rem;
1571
- --flex-grid-12-col-2: 0.8325rem;
1572
- --flex-grid-12-col-3: 0.75rem;
1573
- --flex-grid-12-col-4: 0.6725rem;
1574
- --flex-grid-12-col-6: 0.5125rem;
1575
- --flex-grid-12-col-8: 0.375rem;
1576
- --flex-grid-8-col-2: 0.77275rem;
1577
- --flex-grid-8-col-3: 0.65rem;
1578
- --flex-grid-8-col-4: 0.5rem;
1579
- --flex-grid-8-col-6: 0.275rem;
1580
- --flex-grid-6-col-2: 0.675rem;
1581
- --flex-grid-6-col-3: 0.5rem;
1582
- --flex-grid-6-col-4: 0.355rem;
1583
- --flex-grid-4-col-2: 0.5rem;
1584
- --flex-grid-4-col-3: 0.275rem;
1585
- }
1586
- .xl-flex-grid-col-4 > * {
1587
- width: calc(25% - var(--flex-grid-4-gap));
1588
- }
1589
- .xl-flex-grid-col-4 > *.xl-flex-col-1 {
1590
- width: calc(25% - var(--flex-grid-4-gap));
1591
- }
1592
- .xl-flex-grid-col-4 > *.xl-flex-col-2 {
1593
- width: calc(50% - var(--flex-grid-4-col-2));
1594
- }
1595
- .xl-flex-grid-col-4 > *.xl-flex-col-3 {
1596
- width: calc(75% - var(--flex-grid-4-col-3));
1597
- }
1598
- .xl-flex-grid-col-4 > *.xl-flex-col-4,
1599
- .xl-flex-grid-col-4 > *.xl-flex-col-6,
1600
- .xl-flex-grid-col-4 > *.xl-flex-col-8,
1601
- .xl-flex-grid-col-4 > *.xl-flex-col-12 {
1602
- width: 100%;
1603
- }
1604
- .xl-flex-grid-col-6 > * {
1605
- width: calc(16.66% - var(--flex-grid-6-gap));
1606
- }
1607
- .xl-flex-grid-col-6 > *.xl-flex-col-1 {
1608
- width: calc(16.66% - var(--flex-grid-6-gap));
1609
- }
1610
- .xl-flex-grid-col-6 > *.xl-flex-col-2 {
1611
- width: calc(33.34% - var(--flex-grid-6-col-2));
1612
- }
1613
- .xl-flex-grid-col-6 > *.xl-flex-col-3 {
1614
- width: calc(50% - var(--flex-grid-6-col-3));
1615
- }
1616
- .xl-flex-grid-col-6 > *.xl-flex-col-4 {
1617
- width: calc(66.67% - var(--flex-grid-6-col-4));
1618
- }
1619
- .xl-flex-grid-col-6 > *.xl-flex-col-6,
1620
- .xl-flex-grid-col-6 > *.xl-flex-col-8,
1621
- .xl-flex-grid-col-6 > *.xl-flex-col-12 {
1622
- width: 100%;
1623
- }
1624
- .xl-flex-grid-col-8 > * {
1625
- width: calc(12.5% - var(--flex-grid-8-gap));
1626
- }
1627
- .xl-flex-grid-col-8 > *.xl-flex-col-1 {
1628
- width: calc(12.5% - var(--flex-grid-8-gap));
1629
- }
1630
- .xl-flex-grid-col-8 > *.xl-flex-col-2 {
1631
- width: calc(25% - var(--flex-grid-8-col-2));
1632
- }
1633
- .xl-flex-grid-col-8 > *.xl-flex-col-3 {
1634
- width: calc(37.5% - var(--flex-grid-8-col-3));
1635
- }
1636
- .xl-flex-grid-col-8 > *.xl-flex-col-4 {
1637
- width: calc(50% - var(--flex-grid-8-col-4));
1638
- }
1639
- .xl-flex-grid-col-8 > *.xl-flex-col-6 {
1640
- width: calc(75% - var(--flex-grid-8-col-6));
1641
- }
1642
- .xl-flex-grid-col-8 > *.xl-flex-col-8,
1643
- .xl-flex-grid-col-8 > *.xl-flex-col-12 {
1644
- width: 100%;
1645
- }
1646
- .xl-flex-grid-col-12 > * {
1647
- width: calc(8.33% - var(--flex-grid-12-gap));
1648
- }
1649
- .xl-flex-grid-col-12 > *.xl-flex-col-1 {
1650
- width: calc(8.33% - var(--flex-grid-12-gap));
1651
- }
1652
- .xl-flex-grid-col-12 > *.xl-flex-col-2 {
1653
- width: calc(16.66% - var(--flex-grid-12-col-2));
1654
- }
1655
- .xl-flex-grid-col-12 > *.xl-flex-col-3 {
1656
- width: calc(25% - var(--flex-grid-12-col-3));
1657
- }
1658
- .xl-flex-grid-col-12 > *.xl-flex-col-4 {
1659
- width: calc(33.33% - var(--flex-grid-12-col-4));
1660
- }
1661
- .xl-flex-grid-col-12 > *.xl-flex-col-6 {
1662
- width: calc(50% - var(--flex-grid-12-col-6));
1663
- }
1664
- .xl-flex-grid-col-12 > *.xl-flex-col-8 {
1665
- width: calc(66.66% - var(--flex-grid-12-col-8));
1666
- }
1667
- .xl-flex-grid-col-12 > *.xl-flex-col-12 {
1668
- width: 100%;
1669
- }
2996
+ .pdg-rgt-24 {
2997
+ padding-right: var(--sizing-24);
1670
2998
  }
1671
2999
 
1672
- .font-mode-500 {
1673
- color: var(--color-theme-500);
3000
+ .pdg-bot-24 {
3001
+ padding-bottom: var(--sizing-24);
1674
3002
  }
1675
3003
 
1676
- .font-mode-300 {
1677
- color: var(--color-theme-300);
3004
+ .pdg-lft-24 {
3005
+ padding-left: var(--sizing-24);
1678
3006
  }
1679
3007
 
1680
- .font-mode-100 {
1681
- color: var(--color-theme-100);
3008
+ .pdg-hrz-24 {
3009
+ padding: 0rem var(--sizing-24);
1682
3010
  }
1683
3011
 
1684
- .bg-mode-500 {
1685
- background: var(--background-theme-500);
3012
+ .pdg-vrt-24 {
3013
+ padding: var(--sizing-24) 0rem;
1686
3014
  }
1687
3015
 
1688
- .bg-mode-300 {
1689
- background: var(--background-theme-300);
3016
+ .pdg-24 {
3017
+ padding: var(--sizing-24);
1690
3018
  }
1691
3019
 
1692
- .bg-mode-100 {
1693
- background: var(--background-theme-100);
3020
+ .pdg-top-36 {
3021
+ padding-top: var(--sizing-36);
1694
3022
  }
1695
3023
 
1696
- .border-1-mode-500 {
1697
- border: var(--border-1-theme-500);
3024
+ .pdg-rgt-36 {
3025
+ padding-right: var(--sizing-36);
1698
3026
  }
1699
3027
 
1700
- .border-2-mode-500 {
1701
- border: var(--border-2-theme-500);
3028
+ .pdg-bot-36 {
3029
+ padding-bottom: var(--sizing-36);
1702
3030
  }
1703
3031
 
1704
- .border-4-mode-500 {
1705
- border: var(--border-4-theme-500);
3032
+ .pdg-lft-36 {
3033
+ padding-left: var(--sizing-36);
1706
3034
  }
1707
3035
 
1708
- .align-center {
1709
- text-align: center !important;
3036
+ .pdg-hrz-36 {
3037
+ padding: 0rem var(--sizing-36);
1710
3038
  }
1711
3039
 
1712
- .align-justify {
1713
- text-align: justify !important;
3040
+ .pdg-vrt-36 {
3041
+ padding: var(--sizing-36) 0rem;
1714
3042
  }
1715
3043
 
1716
- .align-left {
1717
- text-align: left !important;
3044
+ .pdg-36 {
3045
+ padding: var(--sizing-36);
1718
3046
  }
1719
3047
 
1720
- .align-right {
1721
- text-align: right !important;
3048
+ .pdx-top-4 {
3049
+ padding-top: var(--sizing-4);
3050
+ box-sizing: border-box;
1722
3051
  }
1723
3052
 
1724
- .truncate {
1725
- text-overflow: ellipsis;
1726
- overflow: hidden;
1727
- white-space: nowrap;
3053
+ .pdx-rgt-4 {
3054
+ padding-right: var(--sizing-4);
3055
+ box-sizing: border-box;
1728
3056
  }
1729
3057
 
1730
- h1 {
1731
- font-size: var(--heading1-font-size);
1732
- letter-spacing: var(--heading1-letter-spacing);
1733
- min-height: var(--heading1-line-height);
1734
- line-height: var(--heading1-line-height);
3058
+ .pdx-bot-4 {
3059
+ padding-bottom: var(--sizing-4);
3060
+ box-sizing: border-box;
1735
3061
  }
1736
3062
 
1737
- h2 {
1738
- font-size: var(--heading2-font-size);
1739
- letter-spacing: var(--heading2-letter-spacing);
1740
- min-height: var(--heading2-line-height);
1741
- line-height: var(--heading2-line-height);
3063
+ .pdx-lft-4 {
3064
+ padding-left: var(--sizing-4);
3065
+ box-sizing: border-box;
1742
3066
  }
1743
3067
 
1744
- h3 {
1745
- font-size: var(--heading3-font-size);
1746
- letter-spacing: var(--heading3-letter-spacing);
1747
- min-height: var(--heading3-line-height);
1748
- line-height: var(--heading3-line-height);
3068
+ .pdx-hrz-4 {
3069
+ padding: 0rem var(--sizing-4);
3070
+ box-sizing: border-box;
1749
3071
  }
1750
3072
 
1751
- h4 {
1752
- font-size: var(--heading4-font-size);
1753
- letter-spacing: var(--heading4-letter-spacing);
1754
- min-height: var(--heading4-line-height);
1755
- line-height: var(--heading4-line-height);
3073
+ .pdx-vrt-4 {
3074
+ padding: var(--sizing-4) 0rem;
3075
+ box-sizing: border-box;
1756
3076
  }
1757
3077
 
1758
- h5 {
1759
- font-size: var(--heading5-font-size);
1760
- letter-spacing: var(--heading5-letter-spacing);
1761
- min-height: var(--heading5-line-height);
1762
- line-height: var(--heading5-line-height);
3078
+ .pdx-4 {
3079
+ padding: var(--sizing-4);
3080
+ box-sizing: border-box;
1763
3081
  }
1764
3082
 
1765
- h6 {
1766
- font-size: var(--heading6-font-size);
1767
- letter-spacing: var(--heading6-letter-spacing);
1768
- min-height: var(--heading6-line-height);
1769
- line-height: var(--heading6-line-height);
3083
+ .pdx-top-8 {
3084
+ padding-top: var(--sizing-8);
3085
+ box-sizing: border-box;
3086
+ }
3087
+
3088
+ .pdx-rgt-8 {
3089
+ padding-right: var(--sizing-8);
3090
+ box-sizing: border-box;
3091
+ }
3092
+
3093
+ .pdx-bot-8 {
3094
+ padding-bottom: var(--sizing-8);
3095
+ box-sizing: border-box;
3096
+ }
3097
+
3098
+ .pdx-lft-8 {
3099
+ padding-left: var(--sizing-8);
3100
+ box-sizing: border-box;
3101
+ }
3102
+
3103
+ .pdx-hrz-8 {
3104
+ padding: 0rem var(--sizing-8);
3105
+ box-sizing: border-box;
3106
+ }
3107
+
3108
+ .pdx-vrt-8 {
3109
+ padding: var(--sizing-8) 0rem;
3110
+ box-sizing: border-box;
3111
+ }
3112
+
3113
+ .pdx-8 {
3114
+ padding: var(--sizing-8);
3115
+ box-sizing: border-box;
3116
+ }
3117
+
3118
+ .pdx-top-12 {
3119
+ padding-top: var(--sizing-12);
3120
+ box-sizing: border-box;
3121
+ }
3122
+
3123
+ .pdx-rgt-12 {
3124
+ padding-right: var(--sizing-12);
3125
+ box-sizing: border-box;
3126
+ }
3127
+
3128
+ .pdx-bot-12 {
3129
+ padding-bottom: var(--sizing-12);
3130
+ box-sizing: border-box;
3131
+ }
3132
+
3133
+ .pdx-lft-12 {
3134
+ padding-left: var(--sizing-12);
3135
+ box-sizing: border-box;
1770
3136
  }
1771
3137
 
1772
- .h1-default,
1773
- .h1-regular,
1774
- .h1-medium,
1775
- .h1-semibold,
1776
- .h1-bold {
1777
- font-size: var(--heading1-font-size);
1778
- letter-spacing: var(--heading1-letter-spacing);
1779
- min-height: var(--heading1-line-height);
1780
- line-height: var(--heading1-line-height);
3138
+ .pdx-hrz-12 {
3139
+ padding: 0rem var(--sizing-12);
3140
+ box-sizing: border-box;
1781
3141
  }
1782
3142
 
1783
- .h1-regular {
1784
- font-weight: var(--font-weight-regular);
3143
+ .pdx-vrt-12 {
3144
+ padding: var(--sizing-12) 0rem;
3145
+ box-sizing: border-box;
1785
3146
  }
1786
3147
 
1787
- .h1-medium {
1788
- font-weight: var(--font-weight-medium);
3148
+ .pdx-12 {
3149
+ padding: var(--sizing-12);
3150
+ box-sizing: border-box;
1789
3151
  }
1790
3152
 
1791
- .h1-semibold {
1792
- font-weight: var(--font-weight-semibold);
3153
+ .pdx-top-16 {
3154
+ padding-top: var(--sizing-16);
3155
+ box-sizing: border-box;
1793
3156
  }
1794
3157
 
1795
- .h1-bold {
1796
- font-weight: var(--font-weight-bold);
3158
+ .pdx-rgt-16 {
3159
+ padding-right: var(--sizing-16);
3160
+ box-sizing: border-box;
1797
3161
  }
1798
3162
 
1799
- .h2-default,
1800
- .h2-regular,
1801
- .h2-medium,
1802
- .h2-semibold,
1803
- .h2-bold {
1804
- font-size: var(--heading2-font-size);
1805
- letter-spacing: var(--heading2-letter-spacing);
1806
- min-height: var(--heading2-line-height);
1807
- line-height: var(--heading2-line-height);
3163
+ .pdx-bot-16 {
3164
+ padding-bottom: var(--sizing-16);
3165
+ box-sizing: border-box;
1808
3166
  }
1809
3167
 
1810
- .h2-regular {
1811
- font-weight: var(--font-weight-regular);
3168
+ .pdx-lft-16 {
3169
+ padding-left: var(--sizing-16);
3170
+ box-sizing: border-box;
1812
3171
  }
1813
3172
 
1814
- .h2-medium {
1815
- font-weight: var(--font-weight-medium);
3173
+ .pdx-hrz-16 {
3174
+ padding: 0rem var(--sizing-16);
3175
+ box-sizing: border-box;
1816
3176
  }
1817
3177
 
1818
- .h2-semibold {
1819
- font-weight: var(--font-weight-semibold);
3178
+ .pdx-vrt-16 {
3179
+ padding: var(--sizing-16) 0rem;
3180
+ box-sizing: border-box;
1820
3181
  }
1821
3182
 
1822
- .h2-bold {
1823
- font-weight: var(--font-weight-bold);
3183
+ .pdx-16 {
3184
+ padding: var(--sizing-16);
3185
+ box-sizing: border-box;
1824
3186
  }
1825
3187
 
1826
- .h3-default,
1827
- .h3-regular,
1828
- .h3-medium,
1829
- .h3-semibold,
1830
- .h3-bold {
1831
- font-size: var(--heading3-font-size);
1832
- letter-spacing: var(--heading3-letter-spacing);
1833
- min-height: var(--heading3-line-height);
1834
- line-height: var(--heading3-line-height);
3188
+ .pdx-top-24 {
3189
+ padding-top: var(--sizing-24);
3190
+ box-sizing: border-box;
1835
3191
  }
1836
3192
 
1837
- .h3-regular {
1838
- font-weight: var(--font-weight-regular);
3193
+ .pdx-rgt-24 {
3194
+ padding-right: var(--sizing-24);
3195
+ box-sizing: border-box;
1839
3196
  }
1840
3197
 
1841
- .h3-medium {
1842
- font-weight: var(--font-weight-medium);
3198
+ .pdx-bot-24 {
3199
+ padding-bottom: var(--sizing-24);
3200
+ box-sizing: border-box;
1843
3201
  }
1844
3202
 
1845
- .h3-semibold {
1846
- font-weight: var(--font-weight-semibold);
3203
+ .pdx-lft-24 {
3204
+ padding-left: var(--sizing-24);
3205
+ box-sizing: border-box;
1847
3206
  }
1848
3207
 
1849
- .h3-bold {
1850
- font-weight: var(--font-weight-bold);
3208
+ .pdx-hrz-24 {
3209
+ padding: 0rem var(--sizing-24);
3210
+ box-sizing: border-box;
1851
3211
  }
1852
3212
 
1853
- .h4-default,
1854
- .h4-regular,
1855
- .h4-medium,
1856
- .h4-semibold,
1857
- .h4-bold {
1858
- font-size: var(--heading4-font-size);
1859
- letter-spacing: var(--heading4-letter-spacing);
1860
- min-height: var(--heading4-line-height);
1861
- line-height: var(--heading4-line-height);
3213
+ .pdx-vrt-24 {
3214
+ padding: var(--sizing-24) 0rem;
3215
+ box-sizing: border-box;
1862
3216
  }
1863
3217
 
1864
- .h4-regular {
1865
- font-weight: var(--font-weight-regular);
3218
+ .pdx-24 {
3219
+ padding: var(--sizing-24);
3220
+ box-sizing: border-box;
1866
3221
  }
1867
3222
 
1868
- .h4-medium {
1869
- font-weight: var(--font-weight-medium);
3223
+ .pdx-top-36 {
3224
+ padding-top: var(--sizing-36);
3225
+ box-sizing: border-box;
1870
3226
  }
1871
3227
 
1872
- .h4-semibold {
1873
- font-weight: var(--font-weight-semibold);
3228
+ .pdx-rgt-36 {
3229
+ padding-right: var(--sizing-36);
3230
+ box-sizing: border-box;
1874
3231
  }
1875
3232
 
1876
- .h4-bold {
1877
- font-weight: var(--font-weight-bold);
3233
+ .pdx-bot-36 {
3234
+ padding-bottom: var(--sizing-36);
3235
+ box-sizing: border-box;
1878
3236
  }
1879
3237
 
1880
- .h5-default,
1881
- .h5-regular,
1882
- .h5-medium,
1883
- .h5-semibold,
1884
- .h5-bold {
1885
- font-size: var(--heading5-font-size);
1886
- letter-spacing: var(--heading5-letter-spacing);
1887
- min-height: var(--heading5-line-height);
1888
- line-height: var(--heading5-line-height);
3238
+ .pdx-lft-36 {
3239
+ padding-left: var(--sizing-36);
3240
+ box-sizing: border-box;
1889
3241
  }
1890
3242
 
1891
- .h5-regular {
1892
- font-weight: var(--font-weight-regular);
3243
+ .pdx-hrz-36 {
3244
+ padding: 0rem var(--sizing-36);
3245
+ box-sizing: border-box;
1893
3246
  }
1894
3247
 
1895
- .h5-medium {
1896
- font-weight: var(--font-weight-medium);
3248
+ .pdx-vrt-36 {
3249
+ padding: var(--sizing-36) 0rem;
3250
+ box-sizing: border-box;
1897
3251
  }
1898
3252
 
1899
- .h5-semibold {
1900
- font-weight: var(--font-weight-semibold);
3253
+ .pdx-36 {
3254
+ padding: var(--sizing-36);
3255
+ box-sizing: border-box;
1901
3256
  }
1902
3257
 
1903
- .h5-bold {
1904
- font-weight: var(--font-weight-bold);
3258
+ .mrg-top-4 {
3259
+ margin-top: var(--sizing-4);
1905
3260
  }
1906
3261
 
1907
- .h6-default,
1908
- .h6-regular,
1909
- .h6-medium,
1910
- .h6-semibold,
1911
- .h6-bold {
1912
- font-size: var(--heading6-font-size);
1913
- letter-spacing: var(--heading6-letter-spacing);
1914
- min-height: var(--heading6-line-height);
1915
- line-height: var(--heading6-line-height);
3262
+ .mrg-rgt-4 {
3263
+ margin-right: var(--sizing-4);
1916
3264
  }
1917
3265
 
1918
- .h6-regular {
1919
- font-weight: var(--font-weight-regular);
3266
+ .mrg-bot-4 {
3267
+ margin-bottom: var(--sizing-4);
1920
3268
  }
1921
3269
 
1922
- .h6-medium {
1923
- font-weight: var(--font-weight-medium);
3270
+ .mrg-lft-4 {
3271
+ margin-left: var(--sizing-4);
1924
3272
  }
1925
3273
 
1926
- .h6-semibold {
1927
- font-weight: var(--font-weight-semibold);
3274
+ .mrg-hrz-4 {
3275
+ margin: 0rem var(--sizing-4);
1928
3276
  }
1929
3277
 
1930
- .h6-bold {
1931
- font-weight: var(--font-weight-bold);
3278
+ .mrg-vrt-4 {
3279
+ margin: var(--sizing-4) 0rem;
1932
3280
  }
1933
3281
 
1934
- .title-default,
1935
- .title-regular,
1936
- .title-medium,
1937
- .title-semibold,
1938
- .title-bold {
1939
- font-size: var(--title-font-size);
1940
- letter-spacing: var(--title-letter-spacing);
1941
- min-height: var(--title-line-height);
1942
- line-height: var(--title-line-height);
3282
+ .mrg-4 {
3283
+ margin: var(--sizing-4);
1943
3284
  }
1944
3285
 
1945
- .title-regular {
1946
- font-weight: var(--font-weight-regular);
3286
+ .mrg-top-8 {
3287
+ margin-top: var(--sizing-8);
1947
3288
  }
1948
3289
 
1949
- .title-medium {
1950
- font-weight: var(--font-weight-medium);
3290
+ .mrg-rgt-8 {
3291
+ margin-right: var(--sizing-8);
1951
3292
  }
1952
3293
 
1953
- .title-semibold {
1954
- font-weight: var(--font-weight-semibold);
3294
+ .mrg-bot-8 {
3295
+ margin-bottom: var(--sizing-8);
1955
3296
  }
1956
3297
 
1957
- .title-bold {
1958
- font-weight: var(--font-weight-bold);
3298
+ .mrg-lft-8 {
3299
+ margin-left: var(--sizing-8);
1959
3300
  }
1960
3301
 
1961
- .subtitle-default,
1962
- .subtitle-regular,
1963
- .subtitle-medium,
1964
- .subtitle-semibold,
1965
- .subtitle-bold {
1966
- font-size: var(--subtitle-font-size);
1967
- letter-spacing: var(--subtitle-letter-spacing);
1968
- min-height: var(--subtitle-line-height);
1969
- line-height: var(--subtitle-line-height);
3302
+ .mrg-hrz-8 {
3303
+ margin: 0rem var(--sizing-8);
1970
3304
  }
1971
3305
 
1972
- .subtitle-regular {
1973
- font-weight: var(--font-weight-regular);
3306
+ .mrg-vrt-8 {
3307
+ margin: var(--sizing-8) 0rem;
1974
3308
  }
1975
3309
 
1976
- .subtitle-medium {
1977
- font-weight: var(--font-weight-medium);
3310
+ .mrg-8 {
3311
+ margin: var(--sizing-8);
1978
3312
  }
1979
3313
 
1980
- .subtitle-semibold {
1981
- font-weight: var(--font-weight-semibold);
3314
+ .mrg-top-12 {
3315
+ margin-top: var(--sizing-12);
1982
3316
  }
1983
3317
 
1984
- .subtitle-bold {
1985
- font-weight: var(--font-weight-bold);
3318
+ .mrg-rgt-12 {
3319
+ margin-right: var(--sizing-12);
1986
3320
  }
1987
3321
 
1988
- .input-default,
1989
- .input-regular,
1990
- .input-medium,
1991
- .input-semibold,
1992
- .input-bold {
1993
- font-size: var(--input-font-size);
1994
- letter-spacing: var(--input-letter-spacing);
1995
- min-height: var(--input-line-height);
1996
- line-height: var(--input-line-height);
3322
+ .mrg-bot-12 {
3323
+ margin-bottom: var(--sizing-12);
1997
3324
  }
1998
3325
 
1999
- .input-regular {
2000
- font-weight: var(--font-weight-regular);
3326
+ .mrg-lft-12 {
3327
+ margin-left: var(--sizing-12);
2001
3328
  }
2002
3329
 
2003
- .input-medium {
2004
- font-weight: var(--font-weight-medium);
3330
+ .mrg-hrz-12 {
3331
+ margin: 0rem var(--sizing-12);
2005
3332
  }
2006
3333
 
2007
- .input-semibold {
2008
- font-weight: var(--font-weight-semibold);
3334
+ .mrg-vrt-12 {
3335
+ margin: var(--sizing-12) 0rem;
2009
3336
  }
2010
3337
 
2011
- .input-bold {
2012
- font-weight: var(--font-weight-bold);
3338
+ .mrg-12 {
3339
+ margin: var(--sizing-12);
2013
3340
  }
2014
3341
 
2015
- .label-default,
2016
- .label-regular,
2017
- .label-medium,
2018
- .label-semibold,
2019
- .label-bold {
2020
- font-size: var(--label-font-size);
2021
- letter-spacing: var(--label-letter-spacing);
2022
- min-height: var(--label-line-height);
2023
- line-height: var(--label-line-height);
3342
+ .mrg-top-16 {
3343
+ margin-top: var(--sizing-16);
2024
3344
  }
2025
3345
 
2026
- .label-regular {
2027
- font-weight: var(--font-weight-regular);
3346
+ .mrg-rgt-16 {
3347
+ margin-right: var(--sizing-16);
2028
3348
  }
2029
3349
 
2030
- .label-medium {
2031
- font-weight: var(--font-weight-medium);
3350
+ .mrg-bot-16 {
3351
+ margin-bottom: var(--sizing-16);
2032
3352
  }
2033
3353
 
2034
- .label-semibold {
2035
- font-weight: var(--font-weight-semibold);
3354
+ .mrg-lft-16 {
3355
+ margin-left: var(--sizing-16);
2036
3356
  }
2037
3357
 
2038
- .label-bold {
2039
- font-weight: var(--font-weight-bold);
3358
+ .mrg-hrz-16 {
3359
+ margin: 0rem var(--sizing-16);
2040
3360
  }
2041
3361
 
2042
- .smalltext-default,
2043
- .smalltext-regular,
2044
- .smalltext-medium,
2045
- .smalltext-semibold,
2046
- .smalltext-bold {
2047
- font-size: var(--smalltext-font-size);
2048
- letter-spacing: var(--smalltext-letter-spacing);
2049
- min-height: var(--smalltext-line-height);
2050
- line-height: var(--smalltext-line-height);
3362
+ .mrg-vrt-16 {
3363
+ margin: var(--sizing-16) 0rem;
2051
3364
  }
2052
3365
 
2053
- .smalltext-regular {
2054
- font-weight: var(--font-weight-regular);
3366
+ .mrg-16 {
3367
+ margin: var(--sizing-16);
2055
3368
  }
2056
3369
 
2057
- .smalltext-medium {
2058
- font-weight: var(--font-weight-medium);
3370
+ .mrg-top-24 {
3371
+ margin-top: var(--sizing-24);
2059
3372
  }
2060
3373
 
2061
- .smalltext-semibold {
2062
- font-weight: var(--font-weight-semibold);
3374
+ .mrg-rgt-24 {
3375
+ margin-right: var(--sizing-24);
2063
3376
  }
2064
3377
 
2065
- .smalltext-bold {
2066
- font-weight: var(--font-weight-bold);
3378
+ .mrg-bot-24 {
3379
+ margin-bottom: var(--sizing-24);
2067
3380
  }
2068
3381
 
2069
- .caption-default,
2070
- .caption-regular,
2071
- .caption-medium,
2072
- .caption-semibold,
2073
- .caption-bold {
2074
- font-size: var(--caption-font-size);
2075
- letter-spacing: var(--caption-letter-spacing);
2076
- min-height: var(--caption-line-height);
2077
- line-height: var(--caption-line-height);
3382
+ .mrg-lft-24 {
3383
+ margin-left: var(--sizing-24);
2078
3384
  }
2079
3385
 
2080
- .caption-regular {
2081
- font-weight: var(--font-weight-regular);
3386
+ .mrg-hrz-24 {
3387
+ margin: 0rem var(--sizing-24);
2082
3388
  }
2083
3389
 
2084
- .caption-medium {
2085
- font-weight: var(--font-weight-medium);
3390
+ .mrg-vrt-24 {
3391
+ margin: var(--sizing-24) 0rem;
2086
3392
  }
2087
3393
 
2088
- .caption-semibold {
2089
- font-weight: var(--font-weight-semibold);
3394
+ .mrg-24 {
3395
+ margin: var(--sizing-24);
2090
3396
  }
2091
3397
 
2092
- .caption-bold {
2093
- font-weight: var(--font-weight-bold);
3398
+ .mrg-top-36 {
3399
+ margin-top: var(--sizing-36);
2094
3400
  }
2095
3401
 
2096
- .overline-default,
2097
- .overline-regular,
2098
- .overline-medium,
2099
- .overline-semibold,
2100
- .overline-bold {
2101
- font-size: var(--overline-font-size);
2102
- letter-spacing: var(--overline-letter-spacing);
2103
- min-height: var(--overline-line-height);
2104
- line-height: var(--overline-line-height);
3402
+ .mrg-rgt-36 {
3403
+ margin-right: var(--sizing-36);
2105
3404
  }
2106
3405
 
2107
- .overline-regular {
2108
- font-weight: var(--font-weight-regular);
3406
+ .mrg-bot-36 {
3407
+ margin-bottom: var(--sizing-36);
2109
3408
  }
2110
3409
 
2111
- .overline-medium {
2112
- font-weight: var(--font-weight-medium);
3410
+ .mrg-lft-36 {
3411
+ margin-left: var(--sizing-36);
2113
3412
  }
2114
3413
 
2115
- .overline-semibold {
2116
- font-weight: var(--font-weight-semibold);
3414
+ .mrg-hrz-36 {
3415
+ margin: 0rem var(--sizing-36);
2117
3416
  }
2118
3417
 
2119
- .overline-bold {
2120
- font-weight: var(--font-weight-bold);
3418
+ .mrg-vrt-36 {
3419
+ margin: var(--sizing-36) 0rem;
3420
+ }
3421
+
3422
+ .mrg-36 {
3423
+ margin: var(--sizing-36);
2121
3424
  }
2122
3425
 
2123
3426
  :root {
@@ -2138,6 +3441,8 @@ h6 {
2138
3441
  --rls-button-label-text-transform: uppercase;
2139
3442
  --rls-button-content-padding: 0rem var(--sizing-8);
2140
3443
  --rls-button-content-radius: var(--sizing-4);
3444
+ --rls-buttonaction-color: var(--color-theme-300);
3445
+ --rls-buttonaction-ripple-color: var(--rls-buttonaction-color);
2141
3446
  --rls-buttonaction-ripple-dimension: var(--sizing-36);
2142
3447
  --rls-buttonaction-ripple-position: -1.125rem;
2143
3448
  --rls-form-footer-justify-content: end;
@@ -2242,7 +3547,6 @@ h6 {
2242
3547
  width: 100%;
2243
3548
  box-sizing: border-box;
2244
3549
  transition: height 160ms 0ms var(--standard-curve);
2245
- box-sizing: border-box;
2246
3550
  }
2247
3551
  .rls-box-field--active {
2248
3552
  --rls-boxfield-body-border: var(--border-1-rolster-500);
@@ -2734,7 +4038,6 @@ h6 {
2734
4038
  bottom: 0rem;
2735
4039
  width: 100%;
2736
4040
  max-width: 25rem;
2737
- min-height: 25%;
2738
4041
  max-height: 75%;
2739
4042
  padding: var(--sizing-16) var(--sizing-4);
2740
4043
  border-radius: var(--sizing-8) var(--sizing-8) 0rem 0rem;
@@ -2744,6 +4047,7 @@ h6 {
2744
4047
  .rls-list-field__empty {
2745
4048
  flex-direction: column;
2746
4049
  margin: auto;
4050
+ padding: var(--sizing-24) 0rem;
2747
4051
  }
2748
4052
  .rls-list-field__empty__avatar {
2749
4053
  width: 100%;