-
Notifications
You must be signed in to change notification settings - Fork 0
/
xd.css
608 lines (551 loc) · 46.8 KB
/
xd.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
/**
* xd.css 1.1 by Marcin Kotynia | MIT License | github.com/kotynia/xd-css
*/
:root {
/*Sizes*/
--xd-size-t:2px; --xd-size-s:4px; --xd-size-m:8px; --xd-size-l:16px; --xd-size-xl:34px; --xd-size-xxl:64px;
--xd-border-radius:6px; --xd-line-height:1.4; --xd-line-height-rem:1.4rem;
/*Colors*/
--xd-blue0:#f0f9ff; --xd-blue1:#e0f2fe; --xd-blue2:#bae6fd; --xd-blue3:#7dd3fc; --xd-blue4:#38bdf8; --xd-blue5:#0ea5e9; --xd-blue6:#0088cc; --xd-blue7:#0369a1; --xd-blue8:#075985; --xd-blue9:#0c4a6e;
--xd-green0:#ecfdf5; --xd-green1:#d1fae5; --xd-green2:#a7f3d0; --xd-green3:#6ee7b7; --xd-green4:#34d399; --xd-green5:#10b981; --xd-green6:#059669; --xd-green7:#047857; --xd-green8:#065f46; --xd-green9:#064e3b;
--xd-red0:#fff1f2; --xd-red1:#ffe4e6; --xd-red2:#fecdd3; --xd-red3:#fda4af; --xd-red4:#fb7185; --xd-red5:#f43f5e; --xd-red6:#e11d48; --xd-red7:#be123c; --xd-red8:#9f1239; --xd-red9:#881337;
--xd-orange0:#fff7ed; --xd-orange1:#ffedd5; --xd-orange2:#fed7aa; --xd-orange3:#fdba74; --xd-orange4:#fb923c; --xd-orange5:#f97316; --xd-orange6:#ea580c; --xd-orange7:#c2410c; --xd-orange8:#9a3412; --xd-orange9:#7c2d12;
--xd-gray0:#f8fafc; --xd-gray1:#f1f5f9; --xd-gray2:#e2e8f0; --xd-gray3:#cbd5e1; --xd-gray4:#94a3b8; --xd-gray5:#64748b; --xd-gray6:#475569; --xd-gray7:#334155; --xd-gray8:#1e293b; --xd-gray9:#0f172a;
/*Special colors*/
--xd-brand:#00b4e5; --xd-primary:var(--xd-blue6); --xd-success:var(--xd-green5); --xd-danger:var(--xd-red5); --xd-warning:var(--xd-orange5); --xd-info:var(--xd-blue0); --xd-light:var(--xd-gray1); --xd-dark:var(--xd-gray9); --xd-gray:var(--xd-gray4);
--xd-background:var(--xd-white); --xd-border:var(--xd-gray3); --xd-white:#fff; --xd-text:var(--xd-gray9);
/*Other*/
--xd-outline:var(--xd-blue2);
--xd-selected:var(--xd-blue1);
--xd-font-size:14px;
--xd-font-family-sans-serif: system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
--xd-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace ;
}
html[data-theme='dark'] {
--xd-blue9:#f0f9ff; --xd-blue8:#e0f2fe; --xd-blue7:#bae6fd; --xd-blue6:#7dd3fc; --xd-blue5:#38bdf8; --xd-blue4:#0ea5e9; --xd-blue3:#0284c7; --xd-blue2:#0369a1; --xd-blue1:#075985; --xd-blue0:#0c4a6e;
--xd-green9:#ecfdf5; --xd-green8:#d1fae5; --xd-green7:#a7f3d0; --xd-green6:#6ee7b7; --xd-green5:#34d399; --xd-green4:#10b981; --xd-green3:#059669; --xd-green2:#047857; --xd-green1:#065f46; --xd-green0:#064e3b;
--xd-red9:#fff1f2; --xd-red8:#ffe4e6; --xd-red7:#fecdd3; --xd-red6:#fda4af; --xd-red5:#fb7185; --xd-red4:#f43f5e; --xd-red3:#e11d48; --xd-red2:#be123c; --xd-red1:#9f1239; --xd-red0:#881337;
--xd-orange9:#fff7ed; --xd-orange8:#ffedd5; --xd-orange7:#fed7aa; --xd-orange6:#fdba74; --xd-orange5:#fb923c; --xd-orange4:#f97316; --xd-orange3:#ea580c; --xd-orange2:#c2410c; --xd-orange1:#9a3412; --xd-orange0:#7c2d12;
--xd-gray9:#f8fafc; --xd-gray8:#f1f5f9; --xd-gray7:#e2e8f0; --xd-gray6:#cbd5e1; --xd-gray5:#94a3b8; --xd-gray4:#64748b; --xd-gray3:#475569; --xd-gray2:#334155; --xd-gray1:#1e293b; --xd-gray0:#0f172a;
--xd-background:var(--xd-gray1); --xd-white:#000020;
}
/*! Extract from normalize.css v8.0.1 | MIT License + modifications */
body { min-height: 100vh; margin:0}
a { background-color:transparent }
abbr[title] { border-bottom:none; text-decoration:underline; text-decoration:underline dotted }
/* For images to not be able to exceed their container */
img { border-style:none; max-inline-size: 100%;max-block-size: 100%; vertical-align:middle }
button, input, optgroup, select, textarea { font-family:inherit; font-size:100%; margin:0 }
button, input { overflow:visible }
button, select { text-transform:none }
[type=button], [type=reset], [type=submit], button { -webkit-appearance:button }
[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner { border-style:none; padding:0 }
[type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring, button:-moz-focusring { outline:1px dotted ButtonText }
fieldset { padding:.35em .75em .625em }
progress { vertical-align:baseline }
textarea { overflow:auto }
[type=checkbox], [type=radio] { box-sizing:border-box; padding:0 }
[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button { height:auto }
[type=search] { -webkit-appearance:textfield; outline-offset:-2px }
[type=search]::-webkit-search-decoration { -webkit-appearance:none }
::-webkit-file-upload-button { -webkit-appearance:button; font:inherit }
details { display:block }
summary { display:list-item }
template { display:none }
[hidden] { display:none }
figure { padding:0; margin:0 }
html { line-height:var(--xd-line-height); background-color:var(--xd-background); font-size:var(--xd-font-size); font-family:var(--xd-font-family-sans-serif); color:var(--xd-dark); -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; -webkit-tap-highlight-color:transparent }
*,*::before,*::after { box-sizing: border-box;}
/*OTHER*/
label, figcaption { text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
a { cursor:pointer; text-decoration:none; overflow-wrap:break-word; color:var(--xd-primary) }
select[multiple] { background:none; width:auto; height:auto; padding:0; margin:0; border-width:1px; border-style:inset; -moz-appearance:menulist; -webkit-appearance:menulist; appearance:menulist }
canvas, svg { vertical-align:middle }
code { background-color:var(--xd-gray1); color:var(--xd-dark) ;font-size:0.9rem ; font-weight: normal; font-family: monospace;}
pre { page-break-inside:avoid; max-width:100%; overflow:auto; word-wrap:break-word; }
/*Important for consistency in text area*/
p { margin-block-start:0 }
hr { border:0; border-top:1px solid var(--xd-gray); margin:20px 0 }
/*Remove range selector*/
input:disabled::-webkit-inner-spin-button { -webkit-appearance:none; -moz-appearance:textfield; margin:0 }
::placeholder { color:var(--xd-dark); opacity:0.6 }
::-webkit-scrollbar {scrollbar-gutter:stable; width:10px ;height:10px; }
::-webkit-scrollbar-thumb { background-color:var(--xd-gray5) }
textarea {overflow-y: auto !important; }
del { background-color:var(--xd-warning) }
ins { background-color:var(--xd-success) }
* > :last-child { margin-block-end: 0; }
/*RESET END*/
/*Numerous customizations and enhancements made for the iOS*/
textarea.xd-input, input[type="text"].xd-input, input[type="number"].xd-input, input[type="file"].xd-input, input[type="time"].xd-input,
input[type="datetime"].xd-input, input[type="datetime-local"].xd-input, input[type="color"].xd-input,input[type="search"].xd-input, select.xd-input { border-radius:0px !important; -webkit-border-radius:0px !important; appearance:none !important; -moz-appearance:textfield; }
input[type="date"].xd-input, input[type="month"].xd-input, input[type="week"].xd-input { border-radius:0px !important; -webkit-border-radius:0px !important }
input[type="file"].xd-input { padding:1px !important }
input[type="date"].xd-input, input[type="time"].xd-input, input[type="week"].xd-input, input[type="datetime-local"].xd-input { padding:3px !important }
input[type=number], input[type=number]::-webkit-inner-spin-button { text-align:right; -webkit-appearance:none; appearance:textfield }
input[type='checkbox'] { appearance:checkbox }
.xd-padding, .xd-button, .xd-input, .xd-loading, .xd-link { border:solid 1px transparent; line-height:var(--xd-line-height-rem); padding:var(--xd-size-s) }
.xd-paddingy { border:solid 1px transparent; line-height:var(--xd-line-height-rem); padding-top:var(--xd-size-s); padding-bottom:var(--xd-size-s) }
.xd-paddingx { border:solid 1px transparent; padding-left:var(--xdsize-s); padding-right:var(--xdsize-s) }
.xd-button { color:var(--xd-dark); border-radius:var(--xd-border-radius); background-color:transparent; text-decoration:none; text-align:center; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; cursor:pointer; direction:ltr; display:inline-block; max-width:100% }
.xd-tag { white-space:nowrap; border-radius:var(--xd-border-radius); color:var(--xd-dark); background-color:var(--xd-white); padding:0px 4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:inline;min-width:1.5em }
.xd-input { color:var(--xd-dark); text-decoration:none; white-space:nowrap; display:inline-block; background-color:var(--xd-gray0);
border-top:1px solid;border-left:1px solid;border-right:1px solid;border-color:transparent ; border-bottom:1px solid var(--xd-border); max-width:100%; direction:ltr }
textarea.xd-input { white-space:normal }
.xd-input[disabled], .xd-box[disabled], .xd-disabled { box-shadow:inset 0px 0px 0px 0px !important; border-top:1px solid transparent !important; border-left:1px solid transparent !important; border-right:1px solid transparent !important; opacity:1; background-color:var(--xd-white); -webkit-text-fill-color:var(--xd-dark); pointer-events:auto }
.xd-input[disabled] { user-select:all; -moz-user-select:all; -webkit-user-select:all }
.xd-button[disabled], .xd-button.xd-disabled { opacity:0.30!important; pointer-events:none!important; cursor:not-allowed!important }
input.xd-input[disabled]::-webkit-inner-spin-button { -webkit-appearance:none; appearance:textfield; margin:0 }
select.xd-input { border-right:solid 15px var(--xd-border) !important }
input[type='checkbox'].xd-input, .xd-check { width:1.20em; height:1.20em; }
input.xd-input:not([disabled]):required, textarea.xd-input:not([disabled]):required, select.xd-input:not([disabled]):required { border-bottom-color: var(--xd-danger) !important }
input.xd-input:not([disabled]):required:valid, textarea.xd-input:not([disabled]):required:valid, select.xd-input:not([disabled]):required:valid { border-bottom-color: var(--xd-success) !important;}
input[type="number"].xd-input { text-align:right; width:14ch }
input[type="week"].xd-input ,input[type="date"].xd-input , input[type="time"].xd-input { width:18ch }
.xd-padding-t { padding:var(--xd-size-t) }
.xd-padding-s { padding:var(--xd-size-s) }
.xd-padding-m { padding:var(--xd-size-m) }
.xd-padding-l { padding:var(--xd-size-l) }
.xd-padding-xl { padding:var(--xd-size-xl) }
.xd-padding-xxl { padding:var(--xd-size-xxl) }
.xd-paddingy-t { padding-top:var(--xd-size-t); padding-bottom:var(--xd-size-t) }
.xd-paddingy-s { padding-top:var(--xd-size-s); padding-bottom:var(--xd-size-s) }
.xd-paddingy-m { padding-top:var(--xd-size-m); padding-bottom:var(--xd-size-m) }
.xd-paddingy-l { padding-top:var(--xd-size-l); padding-bottom:var(--xd-size-l) }
.xd-paddingy-xl { padding-top:var(--xd-size-xl); padding-bottom:var(--xd-size-xl) }
.xd-paddingy-xxl { padding-top:var(--xd-size-xxl); padding-bottom:var(--xd-size-xxl) }
.xd-paddingx-t { padding-left:var(--xd-size-t); padding-right:var(--xd-size-t) }
.xd-paddingx-s { padding-left:var(--xd-size-s); padding-right:var(--xd-size-s) }
.xd-paddingx-m { padding-left:var(--xd-size-m); padding-right:var(--xd-size-m) }
.xd-paddingx-l { padding-left:var(--xd-size-l); padding-right:var(--xd-size-l) }
.xd-paddingx-xl { padding-left:var(--xd-size-xl); padding-right:var(--xd-size-xl) }
.xd-paddingx-xxl { padding-left:var(--xd-size-xxl); padding-right:var(--xd-size-xxl) }
.xd-box { display:inline-block; width:100% }
.xd-round { border-radius:var(--xd-border-radius) }
.xd-round-t { border-radius:var(--xd-size-t) }
.xd-round-s { border-radius:var(--xd-size-s) }
.xd-round-m { border-radius:var(--xd-size-m) }
.xd-round-l { border-radius:var(--xd-size-l) }
.xd--round { border-radius:0 }
.xd-tiny { font-size:0.714rem !important }
.xd-small,label, figcaption,small { font-size:0.8rem !important ;line-height:1.3em;}
.xd-medium { font-size:1.143rem !important; line-height:var(--xd-line-height-rem); } /*sync with buttons , for v_more_v4*/
.xd-large { font-size:1.286rem !important; line-height:1.3em}
.xd-xlarge { font-size:1.714rem !important; line-height:1.3em }
.xd-xxlarge { font-size:2.714rem !important; line-height:1.3em }
/*UTILITY*/
.xd-shadow { box-shadow:rgba(0, 0, 0, 0.18) 0px 2px 4px }
/*text-shadow:-0.04ex 0 0 currentColor, 0.04ex 0 0 currentColor; -webkit-text-stroke-width:0.04ex */
.xd-strong, b, strong { font-weight:600 !important; }/*Firefox bold 600*/
.xd-underline { text-decoration: underline;}
/*direction:ltr cancel parent container ltr*/
.xd-left { text-align:left !important; direction:ltr}
.xd-right { text-align:right !important }
.xd-center { text-align:center !important }
.xd-center-x { justify-content:center }
.xd-center-y { align-items:center }
.xd-middle { display:grid; place-items:center }
.xd-nw, .xd-line { white-space:nowrap; text-overflow:ellipsis; overflow:hidden }
.xd-image { max-width:100%; max-height:600px; min-width:30px }
div.xd-width-number { min-width:11ch !important; text-align:right; white-space:nowrap }
div.xd-width-text { min-width:300px !important }
div.xd-width-check { width:30px !important; text-align:center }
.xd-border-top { border-top:1px solid var(--xd-border) }
.xd-border-bottom { border-bottom:1px solid var(--xd-border) !important }
.xd-border-left { border-left:1px solid var(--xd-border) }
.xd-border-right { border-right:1px solid var(--xd-border) !important }
.xd-border, .xd-border-child>* { border:1px solid; border-color:var(--xd-border) !important}
.xd-border-t, .xd-border-t-child>* { border:1px solid; border-color:var(--xd-border) !important}
.xd-border-s, .xd-border-s-child>* { border:2px solid !important; border-color:var(--xd-border) !important}
.xd-border-m, .xd-border-m-child>* { border:4px solid !important; border-color:var(--xd-border) !important}
.xd-border-l, .xd-border-l-child>* { border:6px solid !important; border-color:var(--xd-border) !important}
.xd-section { margin-top:var(--xd-size-l) !important; margin-bottom:var(--xd-size-l) !important }
.xd-section-t { margin-top:var(--xd-size-s) !important; margin-bottom:var(--xd-size-s) !important }
.xd-section-s { margin-top:var(--xd-size-m) !important; margin-bottom:var(--xd-size-m) !important }
.xd-section-m { margin-top:var(--xd-size-l) !important; margin-bottom:var(--xd-size-l) !important }
.xd-section-l { margin-top:var(--xd-size-xl) !important; margin-bottom:var(--xd-size-xl) !important }
.xd-section-xl { margin-top:var(--xd-size-xxl) !important; margin-bottom:var(--xd-size-xxl) !important }
/*Warning important order this section must by after margin,section*/
.xd-content-t { display:block; max-width:540px; margin-left:auto; margin-right:auto }
.xd-content-s, .xd-content { display:block; max-width:960px; margin:0 auto }
.xd-content-m { display:block; max-width:1140px; margin-left:auto; margin-right:auto }
.xd-content-l { display:block; max-width:1320px; margin-left:auto; margin-right:auto }
.xd-responsive { display:block; overflow-x:auto }
/*Table*/
table.xd-table > tbody > tr > td, table.xd-table-all > tbody > tr > td { padding:var(--xd-size-t) }
table.xd-table > thead > tr > th, table.xd-table-all > thead > tr > th { font-weight: normal; color:var(--xd-gray4) ; padding:var(--xd-size-t); text-align:left; vertical-align:middle; text-transform:uppercase; font-size:0.8rem; }
table.xd-table > thead > tr > th a , table.xd-table-all > thead > tr > th a { color:var(--xd-gray4) ; }
table.xd-table, table.xd-table-all { border-spacing:0; width:100%; display:table;border-collapse: collapse; }
table.xd-table > tbody > tr > td, table.xd-table > tfoot > tr > th,table.xd-table-all > tbody > tr > td { text-align:left; font-weight:normal; height:var(--xd-size-xl); border-top:1px solid var(--xd-border) }
table.xd-table-all > tbody > tr > td, table.xd-table-all > tfoot > tr > th { border:1px solid var(--xd-border) }
table.xd-table a:hover { text-decoration:underline }
table.xd-table .xd-button, table.xd-table .xd-tag { vertical-align:middle }
td .xd-input, .xd-input-table { border:1px dashed var(--xd-gray3) }
td .xd-input:hover, .xd-input-table:hover { background-color:var(--xd-gray0) }
td .xd-image { padding:1px 4px !important; vertical-align:middle }
/*Grid helpers*/
.xd-container { display:flex; flex-wrap:wrap; overflow-x:auto; align-items:center /* align-items:baseline*/ }
.xd-container-16 img { aspect-ratio:16/9; object-fit:cover }
.xd-container-4 img { aspect-ratio:4/3; object-fit:cover }
.xd-grid-200 { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, auto)) }
.xd-grid-300 { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, auto)) }
.xd-gap { gap:var(--xd-size-s) }
.xd-gap-t { gap:var(--xd-size-t) }
.xd-gap-s { gap:var(--xd-size-s) }
.xd-gap-m { gap:var(--xd-size-m) }
.xd-gap-l { gap:var(--xd-size-l) }
.xd-gapx { column-gap:var(--xd-size-s) }
.xd-gapx-t { column-gap:var(--xd-size-t) }
.xd-gapx-s { column-gap:var(--xd-size-s) }
.xd-gapx-m { column-gap:var(--xd-size-m) }
.xd-gapx-l { column-gap:var(--xd-size-l) }
/*Modal*/
.xd-modal { z-index:100; display:none; padding:0; position:fixed; left:0; top:0; width:100vw; height:100vh; overflow:auto; background-color:rgba(0, 0, 0, 0.3) ;flex-wrap:wrap;justify-content:center}
.xd-modal-content { background-color:var(--xd-white); padding:0 var(--xd-size-m) ; outline:0; width:80vw ;min-height:100vh}
.xd-hover:hover { background-color:var(--xd-success) }
*:not(img, .xd--focus):focus-visible,.xd-focus:hover, table.xd-table tbody tr:hover, .xd-button:hover , .xd-nav-item:hover { z-index:10; outline-width:3px; outline-style:solid; outline-color:var(--xd-outline); outline-offset:-3px }
.xd--focus {outline:none}
/*Desktop, tablet*/
@media print, screen and (min-width:601px) {
.xd-container-desktop { display:flex; flex-wrap:wrap; overflow-x:auto; align-items:center }
.xd-form { display:grid; align-items:baseline; row-gap:var(--xd-size-m); grid-template-columns:minmax(40px, 130px) minmax(40px, 1fr); gap:var(--xd-size-s) }
.xd-hide-desktop { display:none !important }
.xd-grid-l1 { display:grid; grid-template-columns:repeat(1, minmax(10px, 1fr)) }
.xd-grid-l2 { display:grid; grid-template-columns:repeat(2, minmax(10px, 1fr)) }
.xd-grid-l3 { display:grid; grid-template-columns:repeat(3, minmax(10px, 1fr)) }
.xd-grid-l4 { display:grid; grid-template-columns:repeat(4, minmax(10px, 1fr)) }
.xd-grid-l5 { display:grid; grid-template-columns:repeat(5, minmax(10px, 1fr)) }
.xd-grid-l6 { display:grid; grid-template-columns:repeat(6, minmax(10px, 1fr)) }
.xd-grid-l7 { display:grid; grid-template-columns:repeat(7, minmax(10px, 1fr)) }
.xd-grid-l8 { display:grid; grid-template-columns:repeat(8, minmax(10px, 1fr)) }
.xd-grid-l9 { display:grid; grid-template-columns:repeat(9, minmax(10px, 1fr)) }
.xd-grid-l10 { display:grid; grid-template-columns:repeat(10, minmax(10px, 1fr)) }
.xd-grid-l11 { display:grid; grid-template-columns:repeat(11, minmax(10px, 1fr)) }
.xd-grid-l12 { display:grid; grid-template-columns:repeat(12, minmax(10px, 1fr)) }
.xd-grid-l24 { display:grid; grid-template-columns:repeat(24, minmax(10px, 1fr)) }
.xd-span-l2 { grid-column:span 2 }
.xd-span-l3 { grid-column:span 3 }
.xd-span-l4 { grid-column:span 4 }
.xd-span-l5 { grid-column:span 5 }
.xd-span-l6 { grid-column:span 6 }
.xd-span-l7 { grid-column:span 7 }
.xd-span-l8 { grid-column:span 8 }
.xd-span-l9 { grid-column:span 9 }
.xd-span-l10 { grid-column:span 10 }
.xd-span-l11 { grid-column:span 11 }
.xd-span-l12 { grid-column:span 12 }
.xd-span-l24 { grid-column:span 24 }
}
.xd-form-v { display:grid; row-gap:var(--xd-size-m); gap:var(--xd-size-s);}
/*MOBILE*/
@media screen and (max-width:600px) { :root { --line-height:1.6; --line-height-rem:1.6rem }
/* .xd-content ,.xd-content-m ,.xd-content-l {padding:0 var(--xd-size-s)} */
html { font-size:18px }
.xd-modal { justify-content:flex-end }
.xd-center-mobile { text-align:center }
.xd-box-mobile { display:block !important; width:100% }
.xd-hide-mobile { display:none !important }
.xd-form { display:grid; row-gap:var(--xd-size-m); gap:var(--xd-size-s); grid-template-columns:minmax(50px, 80px) minmax(50px, 1fr); align-items:baseline }
.xd-grid-l1 { display:grid; grid-template-columns:repeat(1, minmax(10px, 1fr)) }
.xd-grid-l2 { display:grid; grid-template-columns:repeat(1, minmax(10px, 1fr)) }
.xd-grid-l3 { display:grid; grid-template-columns:repeat(1, minmax(10px, 1fr)) }
.xd-grid-l4 { display:grid; grid-template-columns:repeat(1, minmax(10px, 1fr)) }
.xd-grid-l5 { display:grid; grid-template-columns:repeat(1, minmax(10px, 1fr)) }
.xd-grid-l6 { display:grid; grid-template-columns:repeat(2, minmax(10px, 1fr)) }
.xd-grid-l7 { display:grid; grid-template-columns:repeat(2, minmax(10px, 1fr)) }
.xd-grid-l8 { display:grid; grid-template-columns:repeat(2, minmax(10px, 1fr)) }
.xd-grid-l9 { display:grid; grid-template-columns:repeat(3, minmax(10px, 1fr)) }
.xd-grid-l10 { display:grid; grid-template-columns:repeat(3, minmax(10px, 1fr)) }
.xd-grid-l11 { display:grid; grid-template-columns:repeat(3, minmax(10px, 1fr)) }
.xd-grid-l12 { display:grid; grid-template-columns:repeat(4, minmax(10px, 1fr)) }
.xd-grid-s1 { display:grid; grid-template-columns:repeat(1, minmax(10px, 1fr)) }
.xd-grid-s2 { display:grid; grid-template-columns:repeat(2, minmax(10px, 1fr)) }
.xd-grid-s3 { display:grid; grid-template-columns:repeat(3, minmax(10px, 1fr)) }
.xd-grid-s4 { display:grid; grid-template-columns:repeat(4, minmax(10px, 1fr)) }
.xd-grid-s5 { display:grid; grid-template-columns:repeat(5, minmax(10px, 1fr)) }
.xd-grid-s6 { display:grid; grid-template-columns:repeat(6, minmax(10px, 1fr)) }
.xd-grid-s7 { display:grid; grid-template-columns:repeat(7, minmax(10px, 1fr)) }
.xd-grid-s8 { display:grid; grid-template-columns:repeat(8, minmax(10px, 1fr)) }
.xd-grid-s9 { display:grid; grid-template-columns:repeat(9, minmax(10px, 1fr)) }
.xd-grid-s10 { display:grid; grid-template-columns:repeat(10, minmax(10px, 1fr)) }
.xd-grid-s11 { display:grid; grid-template-columns:repeat(11, minmax(10px, 1fr)) }
.xd-grid-s12 { display:grid; grid-template-columns:repeat(12, minmax(10px, 1fr)) }
.xd-span-s2 { grid-column:span 2 }
.xd-span-s3 { grid-column:span 3 }
.xd-span-s4 { grid-column:span 4 }
.xd-span-s5 { grid-column:span 5 }
.xd-span-s6 { grid-column:span 6 }
table.xd-table tbody tr td,table.xd-table thead tr th { padding:var(--xd-size-m) var(--xd-size-s)}
table.xd-table>tbody>tr>td, table.xd-table>tfoot>tr>th { height:auto; border-top:1px solid var(--xd-border) }
}
/*GRID SYSTEM*/
.xd-grid-1 { display:grid; grid-template-columns:repeat(1, minmax(10px, 1fr)) }
.xd-grid-2 { display:grid; grid-template-columns:repeat(2, minmax(10px, 1fr)) }
.xd-grid-3 { display:grid; grid-template-columns:repeat(3, minmax(10px, 1fr)) }
.xd-grid-4 { display:grid; grid-template-columns:repeat(4, minmax(10px, 1fr)) }
.xd-grid-5 { display:grid; grid-template-columns:repeat(5, minmax(10px, 1fr)) }
.xd-grid-6 { display:grid; grid-template-columns:repeat(6, minmax(10px, 1fr)) }
.xd-grid-7 { display:grid; grid-template-columns:repeat(7, minmax(10px, 1fr)) }
.xd-grid-8 { display:grid; grid-template-columns:repeat(8, minmax(10px, 1fr)) }
.xd-grid-9 { display:grid; grid-template-columns:repeat(9, minmax(10px, 1fr)) }
.xd-grid-10 { display:grid; grid-template-columns:repeat(10, minmax(10px, 1fr)) }
.xd-grid-11 { display:grid; grid-template-columns:repeat(11, minmax(10px, 1fr)) }
.xd-grid-12 { display:grid; grid-template-columns:repeat(12, minmax(10px, 1fr)) }
.xd-grid-24 { display:grid; grid-template-columns:repeat(24, minmax(10px, 1fr)) }
.xd-span-2 { grid-column:span 2 }
.xd-span-3 { grid-column:span 3 }
.xd-span-4 { grid-column:span 4 }
.xd-span-5 { grid-column:span 5 }
.xd-span-6 { grid-column:span 6 }
.xd-span-7 { grid-column:span 7 }
.xd-span-8 { grid-column:span 8 }
.xd-span-9 { grid-column:span 9 }
.xd-span-10 { grid-column:span 10 }
.xd-span-11 { grid-column:span 11 }
.xd-span-12 { grid-column:span 12 }
.xd-span-24 { grid-column:span 24 }
.xd-full-screen { position:fixed; top:0; width:100% !important; left:0; height:100vh !important; z-index:90; border-radius:0; background-color:var(--xd-white) }
/*PRINTING*/
@media print {
*,
*:before,
*:after,
*:first-letter,
p:first-line,
div:first-line,
blockquote:first-line,
li:first-line {
color: #000 !important;
box-shadow: none !important;
text-shadow: none !important;
border: 0;
vertical-align: baseline;
-webkit-print-color-adjust: exact; }
html { font-size:10pt; font-family:Arial; }
.xd-nav, nav, .xd-hide-print, .xd-button { display:none !important }
.xd-input { background-color:white;}
.xd-responsive { display:block; overflow-x:visible }
@page { size:A4 portrait; margin:10mm }
a,a:visited { text-decoration: underline; }
thead { display: table-header-group; }
tfoot { display: table-footer-group; }
tr, img { page-break-inside: avoid; }
td, th { padding: 3px !important; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3 { page-break-after: avoid; }
article ,.xd-box, .xd-image, td { page-break-before:auto; page-break-after:auto; page-break-inside:avoid }
}
@media screen and (min-width:601px) {
.xd-layout-2-mini { display:grid; grid-template-columns:minmax(40px, 70px) minmax(40px, 1fr); }
.xd-layout-2 { display:grid; grid-template-columns:minmax(40px, 270px) minmax(40px, 1fr); }
.xd-layout-2 .xd-nav, .xd-layout-2-mini .xd-nav { position: sticky; top: 0; height: 100vh; overflow-y: auto;}
.xd-nav::-webkit-scrollbar{scrollbar-gutter:stable;width:5px;height:5px}
.xd-nav::-webkit-scrollbar-thumb{background-color:var(--xd-background)}
.xd-nav:hover::-webkit-scrollbar-thumb{background-color:var(--xd-gray3)}
}
.xd-loading { animation:xd-loading 1s step-start infinite; animation-delay:0.5s; color:var(--xd-gray4); text-align:center }
.xd-loading:after { font-weight:300;content:"working ..."; direction:ltr; white-space:nowrap }
.xd-noresults { font-weight:300; color:var(--xd-gray4); display:grid; grid-template-columns:repeat(1, minmax(10px, 1fr)); gap:var(--xd-size-m); text-align:center !important; padding: var(--xd-size-m) }
.xd-noresults:before { font-size:25px; content:"☹ nic nie znaleziono"; white-space:nowrap }
@keyframes xd-loading { 50% { opacity:0 }}
/*Active links*/
.router-link-exact-active:not(.xd--active), .xd-active:not(.xd--active) { box-shadow:inset 0 -2px 0 var(--xd-brand) !important }
.xd-link { text-overflow:ellipsis; white-space:nowrap; overflow:hidden; color:var(--xd-blue6); cursor:pointer }
.xd-link:hover { text-decoration:underline }
.xd-hover:hover { background-color:var(--xd-success) }
*:not(img, .xd--focus):focus-visible,.xd-focus:hover, table.xd-table tbody tr:hover, .xd-button:hover , .xd-nav-item:hover
{ z-index:10;
outline-width:3px; outline-style:solid; outline-color:var(--xd-outline); outline-offset:-3px }
/*COLORS Beyond this line, white/dark are base color should be first always*/
.xd-white { background-color:var(--xd-white); color:var(--xd-dark) !important }
.xd-dark { background-color:var(--xd-dark); color:var(--xd-white) !important }
.xd-brand { background-color:var(--xd-brand); color:#FFF !important }
.xd-primary, .xd-blue { background-color:var(--xd-primary); color:#FFFF !important }
.xd-success, .xd-green { background-color:var(--xd-success); color:#FFF !important }
.xd-danger, .xd-red { background-color:var(--xd-danger); color:#FFF !important }
.xd-warning, .xd-orange { background-color:var(--xd-warning); color:#FFF !important }
.xd-info { background-color:var(--xd-info); color:var(--xd-gray4) !important }
.xd-light { background-color:var(--xd-light); color:var(--xd-dark) !important }
.xd-gray { background-color:var(--xd-gray4); color:var(--xd-dark) !important }
.xd-selected { background-color:var(--xd-selected); color:var(--xd-dark) !important }
.xd-clipboard:hover { -webkit-user-select:all; user-select:all }
.xd-2lines { overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical }
.xd-3lines { overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical }
.xd-gray0 { background-color:var(--xd-gray0); color:var(--xd-dark) !important }
.xd-gray1 { background-color:var(--xd-gray1); color:var(--xd-dark) !important }
.xd-gray2 { background-color:var(--xd-gray2); color:var(--xd-dark) !important }
.xd-gray3 { background-color:var(--xd-gray3); color:var(--xd-dark) !important }
.xd-gray4 { background-color:var(--xd-gray4); color:var(--xd-dark) !important }
.xd-gray5 { background-color:var(--xd-gray5); color:var(--xd-white) !important }
.xd-gray6 { background-color:var(--xd-gray6); color:var(--xd-white) !important }
.xd-gray7 { background-color:var(--xd-gray7); color:var(--xd-white) !important }
.xd-gray8 { background-color:var(--xd-gray8); color:var(--xd-white) !important }
.xd-gray9 { background-color:var(--xd-gray9); color:var(--xd-white) !important }
.xd-orange0 { background-color:var(--xd-orange0); color:var(--xd-dark) !important }
.xd-orange1 { background-color:var(--xd-orange1); color:var(--xd-dark) !important }
.xd-orange2 { background-color:var(--xd-orange2); color:#000 !important }
.xd-orange3 { background-color:var(--xd-orange3); color:#000 !important }
.xd-orange4 { background-color:var(--xd-orange4); color:#000 !important }
.xd-orange5 { background-color:var(--xd-orange5); color:var(--xd-white) !important }
.xd-orange6 { background-color:var(--xd-orange6); color:var(--xd-white) !important }
.xd-orange7 { background-color:var(--xd-orange7); color:var(--xd-white) !important }
.xd-orange8 { background-color:var(--xd-orange8); color:var(--xd-white) !important }
.xd-orange9 { background-color:var(--xd-orange9); color:var(--xd-white) !important }
.xd-red0 { background-color:var(--xd-red0); color:var(--xd-dark) !important }
.xd-red1 { background-color:var(--xd-red1); color:var(--xd-dark) !important }
.xd-red2 { background-color:var(--xd-red2); color:var(--xd-dark) !important }
.xd-red3 { background-color:var(--xd-red3); color:var(--xd-dark) !important }
.xd-red4 { background-color:var(--xd-red4); color:var(--xd-dark) !important }
.xd-red5 { background-color:var(--xd-red5); color:var(--xd-white) !important }
.xd-red6 { background-color:var(--xd-red6); color:var(--xd-white) !important }
.xd-red7 { background-color:var(--xd-red7); color:var(--xd-white) !important }
.xd-red8 { background-color:var(--xd-red8); color:var(--xd-white) !important }
.xd-red9 { background-color:var(--xd-red9); color:var(--xd-white) !important }
.xd-blue0 { background-color:var(--xd-blue0); color:var(--xd-dark) !important }
.xd-blue1 { background-color:var(--xd-blue1); color:var(--xd-dark) !important }
.xd-blue2 { background-color:var(--xd-blue2); color:var(--xd-dark) !important }
.xd-blue3 { background-color:var(--xd-blue3); color:#FFF !important }
.xd-blue4 { background-color:var(--xd-blue4); color:#FFF !important }
.xd-blue5 { background-color:var(--xd-blue5); color:#FFF !important }
.xd-blue6 { background-color:var(--xd-blue6); color:var(--xd-white) !important }
.xd-blue7 { background-color:var(--xd-blue7); color:var(--xd-white) !important }
.xd-blue8 { background-color:var(--xd-blue8); color:var(--xd-white) !important }
.xd-blue9 { background-color:var(--xd-blue9); color:var(--xd-white) !important }
.xd-green0 { background-color:var(--xd-green0); color:var(--xd-dark) !important }
.xd-green1 { background-color:var(--xd-green1); color:var(--xd-dark) !important }
.xd-green2 { background-color:var(--xd-green2); color:var(--xd-dark) !important }
.xd-green3 { background-color:var(--xd-green3); color:var(--xd-dark) !important }
.xd-green4 { background-color:var(--xd-green4); color:var(--xd-dark) !important }
.xd-green5 { background-color:var(--xd-green5); color:var(--xd-white) !important }
.xd-green6 { background-color:var(--xd-green6); color:var(--xd-white) !important }
.xd-green7 { background-color:var(--xd-green7); color:var(--xd-white) !important }
.xd-green8 { background-color:var(--xd-green8); color:var(--xd-white) !important }
.xd-green9 { background-color:var(--xd-green9); color:var(--xd-white) !important }
/*Text colors*/
.xd-text-brand { color:var(--xd-brand) !important }
.xd-text-primary { color:var(--xd-primary) !important }
.xd-text-success { color:var(--xd-success) !important }
.xd-text-danger { color:var(--xd-danger) !important }
.xd-text-warning { color:var(--xd-warning) !important }
.xd-text-info { color:var(--xd-gray4) !important }
.xd-text-white { color:var(--xd-white) !important }
.xd-text-light { color:var(--xd-light) !important }
.xd-text-dark { color:var(--xd-dark) !important }
.xd-text-gray { color:var(--xd-gray4) !important }
.xd-text-gray0 { color:var(--xd-gray0); }
.xd-text-gray1 { color:var(--xd-gray1); }
.xd-text-gray2 { color:var(--xd-gray2); }
.xd-text-gray3 { color:var(--xd-gray3); }
.xd-text-gray4 { color:var(--xd-gray4); }
.xd-text-gray5 { color:var(--xd-gray5); }
.xd-text-gray6 { color:var(--xd-gray6); }
.xd-text-gray7 { color:var(--xd-gray7); }
.xd-text-gray8 { color:var(--xd-gray8); }
.xd-text-gray9 { color:var(--xd-gray9); }
.xd-text-orange0 { color:var(--xd-orange0); }
.xd-text-orange1 { color:var(--xd-orange1); }
.xd-text-orange2 { color:var(--xd-orange2); }
.xd-text-orange3 { color:var(--xd-orange3); }
.xd-text-orange4 { color:var(--xd-orange4); }
.xd-text-orange5 { color:var(--xd-orange5); }
.xd-text-orange6 { color:var(--xd-orange6); }
.xd-text-orange7 { color:var(--xd-orange7); }
.xd-text-orange8 { color:var(--xd-orange8); }
.xd-text-orange9 { color:var(--xd-orange9); }
.xd-text-red0 { color:var(--xd-red0); }
.xd-text-red1 { color:var(--xd-red1); }
.xd-text-red2 { color:var(--xd-red2); }
.xd-text-red3 { color:var(--xd-red3); }
.xd-text-red4 { color:var(--xd-red4); }
.xd-text-red5 { color:var(--xd-red5); }
.xd-text-red6 { color:var(--xd-red6); }
.xd-text-red7 { color:var(--xd-red7); }
.xd-text-red8 { color:var(--xd-red8); }
.xd-text-red9 { color:var(--xd-red9); }
.xd-text-blue0 { color:var(--xd-blue0); }
.xd-text-blue1 { color:var(--xd-blue1); }
.xd-text-blue2 { color:var(--xd-blue2); }
.xd-text-blue3 { color:var(--xd-blue3); }
.xd-text-blue4 { color:var(--xd-blue4); }
.xd-text-blue5 { color:var(--xd-blue5); }
.xd-text-blue6 { color:var(--xd-blue6); }
.xd-text-blue7 { color:var(--xd-blue7); }
.xd-text-blue8 { color:var(--xd-blue8); }
.xd-text-blue9 { color:var(--xd-blue9); }
.xd-text-green0 { color:var(--xd-green0); }
.xd-text-green1 { color:var(--xd-green1); }
.xd-text-green2 { color:var(--xd-green2); }
.xd-text-green3 { color:var(--xd-green3); }
.xd-text-green4 { color:var(--xd-green4); }
.xd-text-green5 { color:var(--xd-green5); }
.xd-text-green6 { color:var(--xd-green6); }
.xd-text-green7 { color:var(--xd-green7); }
.xd-text-green8 { color:var(--xd-green8); }
.xd-text-green9 { color:var(--xd-green9); }
/*Special border colors*/
.xd-border-light { border:1px solid; border-color:var(--xd-light) !important }
.xd-border-brand { border:1px solid; border-color:var(--xd-brand) !important }
.xd-border-primary { border:1px solid; border-color:var(--xd-primary) !important }
.xd-border-success { border:1px solid; border-color:var(--xd-success) !important }
.xd-border-danger { border:1px solid; border-color:var(--xd-danger) !important }
.xd-border-warning { border:1px solid; border-color:var(--xd-warning) !important }
.xd-border-info { border:1px solid; border-color:var(--xd-info) !important }
.xd-border-white { border:1px solid; border-color:var(--xd-white) !important }
.xd-border-dark { border:1px solid; border-color:var(--xd-dark) !important }
/*Border colors*/
.xd-border.xd-info,.xd-border-t.xd-info,.xd-border-s.xd-info,.xd-border-m.xd-info,.xd-border-l.xd-info, .xd-button.xd-info, .xd-input.xd-info { border-color:var(--xd-blue1) !important}
.xd-border.xd-selected,.xd-border-t.xd-selected,.xd-border-s.xd-selected,.xd-border-m.xd-selected,.xd-border-l.xd-selected, .xd-button.xd-selected, .xd-input.xd-selected { border-color:var(--xd-blue2) !important}
.xd-border.xd-gray,.xd-border-t.xd-gray,.xd-border-s.xd-gray,.xd-border-m.xd-gray,.xd-border-l.xd-gray, .xd-button.xd-gray, .xd-input.xd-gray { border-color:var(--xd-gray5) !important}
.xd-border.xd-gray0,.xd-border-t.xd-gray0,.xd-border-s.xd-gray0,.xd-border-m.xd-gray0,.xd-border-l.xd-gray0, .xd-button.xd-gray0, .xd-input.xd-gray0 { border-color:var(--xd-gray1) !important}
.xd-border.xd-gray1,.xd-border-t.xd-gray1,.xd-border-s.xd-gray1,.xd-border-m.xd-gray1,.xd-border-l.xd-gray1, .xd-button.xd-gray1, .xd-input.xd-gray1 { border-color:var(--xd-gray2) !important}
.xd-border.xd-gray2,.xd-border-t.xd-gray2,.xd-border-s.xd-gray2,.xd-border-m.xd-gray2,.xd-border-l.xd-gray2, .xd-button.xd-gray2, .xd-input.xd-gray2 { border-color:var(--xd-gray3) !important}
.xd-border.xd-gray3,.xd-border-t.xd-gray3,.xd-border-s.xd-gray3,.xd-border-m.xd-gray3,.xd-border-l.xd-gray3, .xd-button.xd-gray3, .xd-input.xd-gray3 { border-color:var(--xd-gray4) !important}
.xd-border.xd-gray4,.xd-border-t.xd-gray4,.xd-border-s.xd-gray4,.xd-border-m.xd-gray4,.xd-border-l.xd-gray4, .xd-button.xd-gray4, .xd-input.xd-gray4 { border-color:var(--xd-gray5) !important}
.xd-border.xd-gray5,.xd-border-t.xd-gray5,.xd-border-s.xd-gray5,.xd-border-m.xd-gray5,.xd-border-l.xd-gray5, .xd-button.xd-gray5, .xd-input.xd-gray5 { border-color:var(--xd-gray6) !important}
.xd-border.xd-gray6,.xd-border-t.xd-gray6,.xd-border-s.xd-gray6,.xd-border-m.xd-gray6,.xd-border-l.xd-gray6, .xd-button.xd-gray6, .xd-input.xd-gray6 { border-color:var(--xd-gray7) !important}
.xd-border.xd-gray7,.xd-border-t.xd-gray7,.xd-border-s.xd-gray7,.xd-border-m.xd-gray7,.xd-border-l.xd-gray7, .xd-button.xd-gray7, .xd-input.xd-gray7 { border-color:var(--xd-gray8) !important}
.xd-border.xd-gray8,.xd-border-t.xd-gray8,.xd-border-s.xd-gray8,.xd-border-m.xd-gray8,.xd-border-l.xd-gray8, .xd-button.xd-gray8, .xd-input.xd-gray8 { border-color:var(--xd-gray9) !important}
.xd-border.xd-warning,.xd-border-t.xd-warning,.xd-border-s.xd-warning,.xd-border-m.xd-warning,.xd-border-l.xd-warning, .xd-button.xd-warning, .xd-input.xd-warning { border-color:var(--xd-orange6) !important}
.xd-border.xd-orange,.xd-border-t.xd-orange,.xd-border-s.xd-orange,.xd-border-m.xd-orange,.xd-border-l.xd-orange, .xd-button.xd-orange, .xd-input.xd-orange { border-color:var(--xd-orange6) !important}
.xd-border.xd-orange0,.xd-border-t.xd-orange0,.xd-border-s.xd-orange0,.xd-border-m.xd-orange0,.xd-border-l.xd-orange0, .xd-button.xd-orange0, .xd-input.xd-orange0 { border-color:var(--xd-orange1) !important}
.xd-border.xd-orange1,.xd-border-t.xd-orange1,.xd-border-s.xd-orange1,.xd-border-m.xd-orange1,.xd-border-l.xd-orange1, .xd-button.xd-orange1, .xd-input.xd-orange1 { border-color:var(--xd-orange2) !important}
.xd-border.xd-orange2,.xd-border-t.xd-orange2,.xd-border-s.xd-orange2,.xd-border-m.xd-orange2,.xd-border-l.xd-orange2, .xd-button.xd-orange2, .xd-input.xd-orange2 { border-color:var(--xd-orange3) !important}
.xd-border.xd-orange3,.xd-border-t.xd-orange3,.xd-border-s.xd-orange3,.xd-border-m.xd-orange3,.xd-border-l.xd-orange3, .xd-button.xd-orange3, .xd-input.xd-orange3 { border-color:var(--xd-orange4) !important}
.xd-border.xd-orange4,.xd-border-t.xd-orange4,.xd-border-s.xd-orange4,.xd-border-m.xd-orange4,.xd-border-l.xd-orange4, .xd-button.xd-orange4, .xd-input.xd-orange4 { border-color:var(--xd-orange5) !important}
.xd-border.xd-orange5,.xd-border-t.xd-orange5,.xd-border-s.xd-orange5,.xd-border-m.xd-orange5,.xd-border-l.xd-orange5, .xd-button.xd-orange5, .xd-input.xd-orange5 { border-color:var(--xd-orange6) !important}
.xd-border.xd-orange6,.xd-border-t.xd-orange6,.xd-border-s.xd-orange6,.xd-border-m.xd-orange6,.xd-border-l.xd-orange6, .xd-button.xd-orange6, .xd-input.xd-orange6 { border-color:var(--xd-orange7) !important}
.xd-border.xd-orange7,.xd-border-t.xd-orange7,.xd-border-s.xd-orange7,.xd-border-m.xd-orange7,.xd-border-l.xd-orange7, .xd-button.xd-orange7, .xd-input.xd-orange7 { border-color:var(--xd-orange8) !important}
.xd-border.xd-orange8,.xd-border-t.xd-orange8,.xd-border-s.xd-orange8,.xd-border-m.xd-orange8,.xd-border-l.xd-orange8, .xd-button.xd-orange8, .xd-input.xd-orange8 { border-color:var(--xd-orange9) !important}
.xd-border.xd-danger,.xd-border-t.xd-danger,.xd-border-s.xd-danger,.xd-border-m.xd-danger,.xd-border-l.xd-danger, .xd-button.xd-danger, .xd-input.xd-danger { border-color:var(--xd-red6) !important}
.xd-border.xd-red,.xd-border-t.xd-red,.xd-border-s.xd-red,.xd-border-m.xd-red,.xd-border-l.xd-red, .xd-button.xd-red, .xd-input.xd-red { border-color:var(--xd-red6) !important}
.xd-border.xd-red0,.xd-border-t.xd-red0,.xd-border-s.xd-red0,.xd-border-m.xd-red0,.xd-border-l.xd-red0, .xd-button.xd-red0, .xd-input.xd-red0 { border-color:var(--xd-red1) !important}
.xd-border.xd-red1,.xd-border-t.xd-red1,.xd-border-s.xd-red1,.xd-border-m.xd-red1,.xd-border-l.xd-red1, .xd-button.xd-red1, .xd-input.xd-red1 { border-color:var(--xd-red2) !important}
.xd-border.xd-red2,.xd-border-t.xd-red2,.xd-border-s.xd-red2,.xd-border-m.xd-red2,.xd-border-l.xd-red2, .xd-button.xd-red2, .xd-input.xd-red2 { border-color:var(--xd-red3) !important}
.xd-border.xd-red3,.xd-border-t.xd-red3,.xd-border-s.xd-red3,.xd-border-m.xd-red3,.xd-border-l.xd-red3, .xd-button.xd-red3, .xd-input.xd-red3 { border-color:var(--xd-red4) !important}
.xd-border.xd-red4,.xd-border-t.xd-red4,.xd-border-s.xd-red4,.xd-border-m.xd-red4,.xd-border-l.xd-red4, .xd-button.xd-red4, .xd-input.xd-red4 { border-color:var(--xd-red5) !important}
.xd-border.xd-red5,.xd-border-t.xd-red5,.xd-border-s.xd-red5,.xd-border-m.xd-red5,.xd-border-l.xd-red5, .xd-button.xd-red5, .xd-input.xd-red5 { border-color:var(--xd-red6) !important}
.xd-border.xd-red6,.xd-border-t.xd-red6,.xd-border-s.xd-red6,.xd-border-m.xd-red6,.xd-border-l.xd-red6, .xd-button.xd-red6, .xd-input.xd-red6 { border-color:var(--xd-red7) !important}
.xd-border.xd-red7,.xd-border-t.xd-red7,.xd-border-s.xd-red7,.xd-border-m.xd-red7,.xd-border-l.xd-red7, .xd-button.xd-red7, .xd-input.xd-red7 { border-color:var(--xd-red8) !important}
.xd-border.xd-red8,.xd-border-t.xd-red8,.xd-border-s.xd-red8,.xd-border-m.xd-red8,.xd-border-l.xd-red8, .xd-button.xd-red8, .xd-input.xd-red8 { border-color:var(--xd-red9) !important}
.xd-border.xd-primary,.xd-border-t.xd-primary,.xd-border-s.xd-primary,.xd-border-m.xd-primary,.xd-border-l.xd-primary, .xd-button.xd-primary, .xd-input.xd-primary { border-color:var(--xd-blue7) !important}
.xd-border.xd-blue,.xd-border-t.xd-blue,.xd-border-s.xd-blue,.xd-border-m.xd-blue,.xd-border-l.xd-blue, .xd-button.xd-blue, .xd-input.xd-blue { border-color:var(--xd-blue7) !important}
.xd-border.xd-blue0,.xd-border-t.xd-blue0,.xd-border-s.xd-blue0,.xd-border-m.xd-blue0,.xd-border-l.xd-blue0, .xd-button.xd-blue0, .xd-input.xd-blue0 { border-color:var(--xd-blue1) !important}
.xd-border.xd-blue1,.xd-border-t.xd-blue1,.xd-border-s.xd-blue1,.xd-border-m.xd-blue1,.xd-border-l.xd-blue1, .xd-button.xd-blue1, .xd-input.xd-blue1 { border-color:var(--xd-blue2) !important}
.xd-border.xd-blue2,.xd-border-t.xd-blue2,.xd-border-s.xd-blue2,.xd-border-m.xd-blue2,.xd-border-l.xd-blue2, .xd-button.xd-blue2, .xd-input.xd-blue2 { border-color:var(--xd-blue3) !important}
.xd-border.xd-blue3,.xd-border-t.xd-blue3,.xd-border-s.xd-blue3,.xd-border-m.xd-blue3,.xd-border-l.xd-blue3, .xd-button.xd-blue3, .xd-input.xd-blue3 { border-color:var(--xd-blue4) !important}
.xd-border.xd-blue4,.xd-border-t.xd-blue4,.xd-border-s.xd-blue4,.xd-border-m.xd-blue4,.xd-border-l.xd-blue4, .xd-button.xd-blue4, .xd-input.xd-blue4 { border-color:var(--xd-blue5) !important}
.xd-border.xd-blue5,.xd-border-t.xd-blue5,.xd-border-s.xd-blue5,.xd-border-m.xd-blue5,.xd-border-l.xd-blue5, .xd-button.xd-blue5, .xd-input.xd-blue5 { border-color:var(--xd-blue6) !important}
.xd-border.xd-blue6,.xd-border-t.xd-blue6,.xd-border-s.xd-blue6,.xd-border-m.xd-blue6,.xd-border-l.xd-blue6, .xd-button.xd-blue6, .xd-input.xd-blue6 { border-color:var(--xd-blue7) !important}
.xd-border.xd-blue7,.xd-border-t.xd-blue7,.xd-border-s.xd-blue7,.xd-border-m.xd-blue7,.xd-border-l.xd-blue7, .xd-button.xd-blue7, .xd-input.xd-blue7 { border-color:var(--xd-blue8) !important}
.xd-border.xd-blue8,.xd-border-t.xd-blue8,.xd-border-s.xd-blue8,.xd-border-m.xd-blue8,.xd-border-l.xd-blue8, .xd-button.xd-blue8, .xd-input.xd-blue8 { border-color:var(--xd-blue9) !important}
.xd-border.xd-success,.xd-border-t.xd-success,.xd-border-s.xd-success,.xd-border-m.xd-success,.xd-border-l.xd-success, .xd-button.xd-success, .xd-input.xd-success { border-color:var(--xd-green6) !important}
.xd-border.xd-green,.xd-border-t.xd-green,.xd-border-s.xd-green,.xd-border-m.xd-green,.xd-border-l.xd-green, .xd-button.xd-green, .xd-input.xd-green { border-color:var(--xd-green6) !important}
.xd-border.xd-green0,.xd-border-t.xd-green0,.xd-border-s.xd-green0,.xd-border-m.xd-green0,.xd-border-l.xd-green0, .xd-button.xd-green0, .xd-input.xd-green0 { border-color:var(--xd-green1) !important}
.xd-border.xd-green1,.xd-border-t.xd-green1,.xd-border-s.xd-green1,.xd-border-m.xd-green1,.xd-border-l.xd-green1, .xd-button.xd-green1, .xd-input.xd-green1 { border-color:var(--xd-green2) !important}
.xd-border.xd-green2,.xd-border-t.xd-green2,.xd-border-s.xd-green2,.xd-border-m.xd-green2,.xd-border-l.xd-green2, .xd-button.xd-green2, .xd-input.xd-green2 { border-color:var(--xd-green3) !important}
.xd-border.xd-green3,.xd-border-t.xd-green3,.xd-border-s.xd-green3,.xd-border-m.xd-green3,.xd-border-l.xd-green3, .xd-button.xd-green3, .xd-input.xd-green3 { border-color:var(--xd-green4) !important}
.xd-border.xd-green4,.xd-border-t.xd-green4,.xd-border-s.xd-green4,.xd-border-m.xd-green4,.xd-border-l.xd-green4, .xd-button.xd-green4, .xd-input.xd-green4 { border-color:var(--xd-green5) !important}
.xd-border.xd-green5,.xd-border-t.xd-green5,.xd-border-s.xd-green5,.xd-border-m.xd-green5,.xd-border-l.xd-green5, .xd-button.xd-green5, .xd-input.xd-green5 { border-color:var(--xd-green6) !important}
.xd-border.xd-green6,.xd-border-t.xd-green6,.xd-border-s.xd-green6,.xd-border-m.xd-green6,.xd-border-l.xd-green6, .xd-button.xd-green6, .xd-input.xd-green6 { border-color:var(--xd-green7) !important}
.xd-border.xd-green7,.xd-border-t.xd-green7,.xd-border-s.xd-green7,.xd-border-m.xd-green7,.xd-border-l.xd-green7, .xd-button.xd-green7, .xd-input.xd-green7 { border-color:var(--xd-green8) !important}
.xd-border.xd-green8,.xd-border-t.xd-green8,.xd-border-s.xd-green8,.xd-border-m.xd-green8,.xd-border-l.xd-green8, .xd-button.xd-green8, .xd-input.xd-green8 { border-color:var(--xd-green9) !important}