funuicss 2.0.24 → 2.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (72) hide show
  1. package/css/fun.css +1002 -3749
  2. package/js/Fun.js +2 -2
  3. package/js/Fun.tsx +9 -8
  4. package/package.json +2 -1
  5. package/tsconfig.tsbuildinfo +1 -1
  6. package/ui/alert/Alert.d.ts +1 -1
  7. package/ui/aos/AOS.d.ts +1 -1
  8. package/ui/appbar/AppBar.d.ts +1 -1
  9. package/ui/avatar/Avatar.d.ts +2 -1
  10. package/ui/breadcrumb/BreadCrumb.d.ts +2 -1
  11. package/ui/button/Button.d.ts +1 -1
  12. package/ui/card/Card.d.ts +1 -1
  13. package/ui/card/CardBody.d.ts +2 -2
  14. package/ui/card/CardFab.d.ts +2 -2
  15. package/ui/card/CardFooter.d.ts +2 -2
  16. package/ui/card/CardHeader.d.ts +2 -2
  17. package/ui/div/Div.d.ts +1 -1
  18. package/ui/drop/Action.d.ts +1 -1
  19. package/ui/drop/Down.d.ts +1 -1
  20. package/ui/drop/Item.d.ts +1 -1
  21. package/ui/drop/Menu.d.ts +1 -1
  22. package/ui/drop/Up.d.ts +1 -1
  23. package/ui/grid/Col.d.ts +2 -1
  24. package/ui/grid/Grid.d.ts +2 -1
  25. package/ui/input/Iconic.d.ts +2 -2
  26. package/ui/input/Input.d.ts +2 -0
  27. package/ui/input/Input.js +50 -9
  28. package/ui/input/Input.tsx +34 -7
  29. package/ui/list/Item.d.ts +1 -1
  30. package/ui/list/List.d.ts +1 -1
  31. package/ui/loader/Loader.d.ts +2 -1
  32. package/ui/modal/Action.d.ts +1 -1
  33. package/ui/modal/Close.d.ts +2 -1
  34. package/ui/modal/Content.d.ts +1 -1
  35. package/ui/modal/Header.d.ts +2 -2
  36. package/ui/modal/Header.tsx +1 -1
  37. package/ui/modal/Modal.d.ts +1 -1
  38. package/ui/notification/Content.d.ts +1 -1
  39. package/ui/notification/Footer.d.ts +1 -1
  40. package/ui/notification/Header.d.ts +1 -1
  41. package/ui/notification/Notification.d.ts +1 -1
  42. package/ui/page/NotFound.d.ts +1 -1
  43. package/ui/page/UnAuthorized.d.ts +1 -1
  44. package/ui/progress/Bar.d.ts +1 -1
  45. package/ui/sidebar/SideBar.d.ts +2 -1
  46. package/ui/sidebar/SideContent.d.ts +1 -1
  47. package/ui/specials/Circle.d.ts +3 -2
  48. package/ui/specials/Circle.js +2 -2
  49. package/ui/specials/Circle.tsx +4 -2
  50. package/ui/specials/FullCenteredPage.d.ts +1 -1
  51. package/ui/specials/Hr.d.ts +1 -1
  52. package/ui/specials/RowFlex.d.ts +1 -1
  53. package/ui/specials/Section.d.ts +1 -1
  54. package/ui/table/Body.d.ts +1 -1
  55. package/ui/table/Data.d.ts +1 -1
  56. package/ui/table/Head.d.ts +1 -1
  57. package/ui/table/Row.d.ts +1 -1
  58. package/ui/table/Table.d.ts +1 -1
  59. package/ui/table/Table.js +11 -7
  60. package/ui/table/Table.tsx +20 -8
  61. package/ui/text/Text.d.ts +5 -5
  62. package/ui/text/Text.js +20 -11
  63. package/ui/text/Text.tsx +62 -33
  64. package/ui/tooltip/Tip.d.ts +2 -1
  65. package/ui/tooltip/Tip.js +9 -5
  66. package/ui/tooltip/Tip.tsx +12 -2
  67. package/ui/tooltip/ToolTip.d.ts +1 -1
  68. package/ui/tooltip/ToolTip.js +1 -1
  69. package/ui/tooltip/ToolTip.tsx +7 -1
  70. package/ui/video/FunPlayer.d.ts +0 -7
  71. package/ui/video/FunPlayer.js +202 -179
  72. package/ui/video/FunPlayer.tsx +218 -218
package/css/fun.css CHANGED
@@ -1,5 +1,69 @@
1
1
 
2
2
  :root {
3
+ /* Spacing scale (4px base) */
4
+ --space-0: 0rem;
5
+ --space-1: 0.25rem;
6
+ --space-2: 0.5rem;
7
+ --space-3: 0.75rem;
8
+ --space-4: 1rem;
9
+ --space-5: 1.25rem;
10
+ --space-6: 1.5rem;
11
+ --space-8: 2rem;
12
+ --space-10: 2.5rem;
13
+ --space-12: 3rem;
14
+ --space-16: 4rem;
15
+ --space-20: 5rem;
16
+
17
+ /* Font sizes (modular scale) */
18
+ --text-xs: 0.75rem;
19
+ --text-sm: 0.875rem;
20
+ --text-base: 1rem;
21
+ --text-lg: 1.125rem;
22
+ --text-xl: 1.25rem;
23
+ --text-2xl: 1.5rem;
24
+ --text-3xl: 1.875rem;
25
+ --text-4xl: 2.25rem;
26
+ --text-5xl: 3rem;
27
+ --text-6xl: 3.75rem;
28
+ --text-7xl: 4.5rem;
29
+ --text-8xl: 6rem;
30
+ --text-9xl: 8rem;
31
+ --text-10xl: 9rem;
32
+
33
+ /* Border radius */
34
+ --radius-sm: 0.125rem;
35
+ --radius: 0.25rem;
36
+ --radius-md: 0.375rem;
37
+ --radius-lg: 0.5rem;
38
+ --radius-xl: 0.75rem;
39
+ --radius-2xl: 1rem;
40
+ --radius-full: 9999px;
41
+
42
+
43
+
44
+ /* Z-index */
45
+ --z-0: 0;
46
+ --z-10: 10;
47
+ --z-20: 20;
48
+ --z-30: 30;
49
+ --z-40: 40;
50
+ --z-50: 50;
51
+
52
+
53
+ /* Line heights matching Tailwind defaults */
54
+ --leading-normal: 1.5rem; /* For base */
55
+ --leading-xl: 1.75rem;
56
+ --leading-2xl: 2rem;
57
+ --leading-3xl: 2.25rem;
58
+ --leading-4xl: 2.5rem;
59
+ --leading-5xl: 1;
60
+ --leading-6xl: 1;
61
+ --leading-7xl: 1;
62
+ --leading-8xl: 1;
63
+ --leading-9xl: 1;
64
+ --leading-10xl: 1;
65
+
66
+ --leading-none: 1;
3
67
 
4
68
  /* Primary Colors */
5
69
  --primary: #6366f1;
@@ -105,267 +169,6 @@
105
169
  --light800: #292524;
106
170
  --light900: #1c1917;
107
171
 
108
- /* Rose Colors */
109
- --rose: #f43f5e;
110
- --rose50: #fff1f2;
111
- --rose100: #ffe4e6;
112
- --rose200: #fecdd3;
113
- --rose300: #fda4af;
114
- --rose400: #fb7185;
115
- --rose500: #f43f5e;
116
- --rose600: #e11d48;
117
- --rose700: #be123c;
118
- --rose800: #9f1239;
119
- --rose900: #881337;
120
-
121
- /* Pink Colors */
122
- --pink: #ec4899;
123
- --pink50: #fdf2f8;
124
- --pink100: #fce7f3;
125
- --pink200: #fbcfe8;
126
- --pink300: #f9a8d4;
127
- --pink400: #f472b6;
128
- --pink500: #ec4899;
129
- --pink600: #db2777;
130
- --pink700: #be185d;
131
- --pink800: #9d174d;
132
- --pink900: #831843;
133
-
134
- /* Fuchsia Colors */
135
- --fuchsia: #d946ef;
136
- --fuchsia50: #fdf4ff;
137
- --fuchsia100: #fae8ff;
138
- --fuchsia200: #f5d0fe;
139
- --fuchsia300: #f0abfc;
140
- --fuchsia400: #e879f9;
141
- --fuchsia500: #d946ef;
142
- --fuchsia600: #c026d3;
143
- --fuchsia700: #a21caf;
144
- --fuchsia800: #86198f;
145
- --fuchsia900: #701a75;
146
-
147
- /* Purple Colors */
148
- --purple: #a855f7;
149
- --purple50: #faf5ff;
150
- --purple100: #f3e8ff;
151
- --purple200: #e9d5ff;
152
- --purple300: #d8b4fe;
153
- --purple400: #c084fc;
154
- --purple500: #a855f7;
155
- --purple600: #9333ea;
156
- --purple700: #7e22ce;
157
- --purple800: #6b21a8;
158
- --purple900: #581c87;
159
-
160
- /* Violet Colors */
161
- --violet: #8b5cf6;
162
- --violet50: #f5f3ff;
163
- --violet100: #ede9fe;
164
- --violet200: #ddd6fe;
165
- --violet300: #c4b5fd;
166
- --violet400: #a78bfa;
167
- --violet500: #8b5cf6;
168
- --violet600: #7c3aed;
169
- --violet700: #6d28d9;
170
- --violet800: #5b21b6;
171
- --violet900: #4c1d95;
172
-
173
- /* Indigo Colors */
174
- --indigo: #6366f1;
175
- --indigo50: #eef2ff;
176
- --indigo100: #e0e7ff;
177
- --indigo200: #c7d2fe;
178
- --indigo300: #a5b4fc;
179
- --indigo400: #818cf8;
180
- --indigo500: #6366f1;
181
- --indigo600: #4f46e5;
182
- --indigo700: #4338ca;
183
- --indigo800: #3730a3;
184
- --indigo900: #312e81;
185
-
186
- /* Blue Colors */
187
- --blue: #3b82f6;
188
- --blue50: #eff6ff;
189
- --blue100: #dbeafe;
190
- --blue200: #bfdbfe;
191
- --blue300: #93c5fd;
192
- --blue400: #60a5fa;
193
- --blue500: #3b82f6;
194
- --blue600: #2563eb;
195
- --blue700: #1d4ed8;
196
- --blue800: #1e40af;
197
- --blue900: #1e3a8a;
198
-
199
- /* LightBlue Colors */
200
- --lightBlue: #0ea5e9;
201
- --lightBlue50: #f0f9ff;
202
- --lightBlue100: #e0f2fe;
203
- --lightBlue200: #bae6fd;
204
- --lightBlue300: #7dd3fc;
205
- --lightBlue400: #38bdf8;
206
- --lightBlue500: #0ea5e9;
207
- --lightBlue600: #0284c7;
208
- --lightBlue700: #0369a1;
209
- --lightBlue800: #075985;
210
- --lightBlue900: #0c4a6e;
211
-
212
- /* DarkBlue Colors */
213
- --darkBlue: #0077e6;
214
- --darkBlue50: #dbf4ff;
215
- --darkBlue100: #addbff;
216
- --darkBlue200: #7cc2ff;
217
- --darkBlue300: #4aa9ff;
218
- --darkBlue400: #1a91ff;
219
- --darkBlue500: #0077e6;
220
- --darkBlue600: #005db4;
221
- --darkBlue700: #004282;
222
- --darkBlue800: #002851;
223
- --darkBlue900: #000e21;
224
-
225
- /* Cyan Colors */
226
- --cyan: #06b6d4;
227
- --cyan50: #ecfeff;
228
- --cyan100: #cffafe;
229
- --cyan200: #a5f3fc;
230
- --cyan300: #67e8f9;
231
- --cyan400: #22d3ee;
232
- --cyan500: #06b6d4;
233
- --cyan600: #0891b2;
234
- --cyan700: #0e7490;
235
- --cyan800: #155e75;
236
- --cyan900: #164e63;
237
-
238
- /* Teal Colors */
239
- --teal: #14b8a6;
240
- --teal50: #f0fdfa;
241
- --teal100: #ccfbf1;
242
- --teal200: #99f6e4;
243
- --teal300: #5eead4;
244
- --teal400: #2dd4bf;
245
- --teal500: #14b8a6;
246
- --teal600: #0d9488;
247
- --teal700: #0f766e;
248
- --teal800: #115e59;
249
- --teal900: #134e4a;
250
-
251
- /* Emerald Colors */
252
- --emerald: #10b981;
253
- --emerald50: #ecfdf5;
254
- --emerald100: #d1fae5;
255
- --emerald200: #a7f3d0;
256
- --emerald300: #6ee7b7;
257
- --emerald400: #34d399;
258
- --emerald500: #10b981;
259
- --emerald600: #059669;
260
- --emerald700: #047857;
261
- --emerald800: #065f46;
262
- --emerald900: #064e3b;
263
-
264
- /* Green Colors */
265
- --green: #22c55e;
266
- --green50: #f0fdf4;
267
- --green100: #dcfce7;
268
- --green200: #bbf7d0;
269
- --green300: #86efac;
270
- --green400: #4ade80;
271
- --green500: #22c55e;
272
- --green600: #16a34a;
273
- --green700: #15803d;
274
- --green800: #166534;
275
- --green900: #14532d;
276
-
277
- /* Lime Colors */
278
- --lime: #84cc16;
279
- --lime50: #f7fee7;
280
- --lime100: #ecfccb;
281
- --lime200: #d9f99d;
282
- --lime300: #bef264;
283
- --lime400: #a3e635;
284
- --lime500: #84cc16;
285
- --lime600: #65a30d;
286
- --lime700: #4d7c0f;
287
- --lime800: #3f6212;
288
- --lime900: #365314;
289
-
290
- /* Yellow Colors */
291
- --yellow: #eab308;
292
- --yellow50: #fefce8;
293
- --yellow100: #fef9c3;
294
- --yellow200: #fef08a;
295
- --yellow300: #fde047;
296
- --yellow400: #facc15;
297
- --yellow500: #eab308;
298
- --yellow600: #ca8a04;
299
- --yellow700: #a16207;
300
- --yellow800: #854d0e;
301
- --yellow900: #713f12;
302
-
303
- /* Amber Colors */
304
- --amber: #f59e0b;
305
- --amber50: #fffbeb;
306
- --amber100: #fef3c7;
307
- --amber200: #fde68a;
308
- --amber300: #fcd34d;
309
- --amber400: #fbbf24;
310
- --amber500: #f59e0b;
311
- --amber600: #d97706;
312
- --amber700: #b45309;
313
- --amber800: #92400e;
314
- --amber900: #78350f;
315
-
316
- /* Orange Colors */
317
- --orange: #f97316;
318
- --orange50: #fff7ed;
319
- --orange100: #ffedd5;
320
- --orange200: #fed7aa;
321
- --orange300: #fdba74;
322
- --orange400: #fb923c;
323
- --orange500: #f97316;
324
- --orange600: #ea580c;
325
- --orange700: #c2410c;
326
- --orange800: #9a3412;
327
- --orange900: #7c2d12;
328
-
329
- /* Red Colors */
330
- --red: #ef4444;
331
- --red50: #fef2f2;
332
- --red100: #fee2e2;
333
- --red200: #fecaca;
334
- --red300: #fca5a5;
335
- --red400: #f87171;
336
- --red500: #ef4444;
337
- --red600: #dc2626;
338
- --red700: #b91c1c;
339
- --red800: #991b1b;
340
- --red900: #7f1d1d;
341
-
342
-
343
- /* Warm Gray Colors */
344
- --warmGray: #78716c;
345
- --warmGray50: #fafaf9;
346
- --warmGray100: #f5f5f4;
347
- --warmGray200: #e7e5e4;
348
- --warmGray300: #d6d3d1;
349
- --warmGray400: #a8a29e;
350
- --warmGray500: #78716c;
351
- --warmGray600: #57534e;
352
- --warmGray700: #44403c;
353
- --warmGray800: #292524;
354
- --warmGray900: #1c1917;
355
-
356
- /* True Gray Colors */
357
- --trueGray: #737373;
358
- --trueGray50: #fafafa;
359
- --trueGray100: #f5f5f5;
360
- --trueGray200: #e5e5e5;
361
- --trueGray300: #d4d4d4;
362
- --trueGray400: #a3a3a3;
363
- --trueGray500: #737373;
364
- --trueGray600: #525252;
365
- --trueGray700: #404040;
366
- --trueGray800: #262626;
367
- --trueGray900: #171717;
368
-
369
172
  /* Gray Colors */
370
173
  --gray: #71717a;
371
174
  --gray50: #fafafa;
@@ -379,31 +182,6 @@
379
182
  --gray800: #27272a;
380
183
  --gray900: #18181b;
381
184
 
382
- /* Cool Gray Colors */
383
- --coolGray: #6b7280;
384
- --coolGray50: #f9fafb;
385
- --coolGray100: #f3f4f6;
386
- --coolGray200: #e5e7eb;
387
- --coolGray300: #d1d5db;
388
- --coolGray400: #9ca3af;
389
- --coolGray500: #6b7280;
390
- --coolGray600: #4b5563;
391
- --coolGray700: #374151;
392
- --coolGray800: #1f2937;
393
- --coolGray900: #111827;
394
-
395
- /* Blue Gray Colors */
396
- --blueGray: #64748b;
397
- --blueGray50: #f8fafc;
398
- --blueGray100: #f1f5f9;
399
- --blueGray200: #e2e8f0;
400
- --blueGray300: #cbd5e1;
401
- --blueGray400: #94a3b8;
402
- --blueGray500: #64748b;
403
- --blueGray600: #475569;
404
- --blueGray700: #334155;
405
- --blueGray800: #1e293b;
406
- --blueGray900: #0f172a;
407
185
 
408
186
  /* Dark Colors */
409
187
  --dark: #71717a;
@@ -1243,3596 +1021,631 @@ link:hover {
1243
1021
  color: var(--white);
1244
1022
  }
1245
1023
 
1246
- /* Rose Color */
1247
- .rose,
1248
- .hover-rose:hover {
1249
- background-color: var(--rose) !important;
1250
- color: var(--white);
1251
- }
1252
-
1253
- /* Rose 50 */
1254
- .rose50,
1255
- .hover-rose50:hover {
1256
- background-color: var(--rose50) !important;
1257
- color: var(--white);
1258
- }
1259
1024
 
1260
- /* Rose 100 */
1261
- .rose100,
1262
- .hover-rose100:hover {
1263
- background-color: var(--rose100) !important;
1025
+ /* Dark Colors */
1026
+ .dark,
1027
+ .hover-dark:hover {
1028
+ background-color: var(--dark) !important;
1264
1029
  color: var(--white);
1265
1030
  }
1266
1031
 
1267
- /* Rose 200 */
1268
- .rose200,
1269
- .hover-rose200:hover {
1270
- background-color: var(--rose200) !important;
1032
+ .dark50,
1033
+ .hover-dark50:hover {
1034
+ background-color: var(--dark50) !important;
1271
1035
  color: var(--white);
1272
1036
  }
1273
1037
 
1274
- /* Rose 300 */
1275
- .rose300,
1276
- .hover-rose300:hover {
1277
- background-color: var(--rose300) !important;
1038
+ .dark100,
1039
+ .hover-dark100:hover {
1040
+ background-color: var(--dark100) !important;
1278
1041
  color: var(--white);
1279
1042
  }
1280
1043
 
1281
- /* Rose 400 */
1282
- .rose400,
1283
- .hover-rose400:hover {
1284
- background-color: var(--rose400) !important;
1044
+ .dark200,
1045
+ .hover-dark200:hover {
1046
+ background-color: var(--dark200) !important;
1285
1047
  color: var(--white);
1286
1048
  }
1287
1049
 
1288
- /* Rose 500 */
1289
- .rose500,
1290
- .hover-rose500:hover {
1291
- background-color: var(--rose500) !important;
1050
+ .dark300,
1051
+ .hover-dark300:hover {
1052
+ background-color: var(--dark300) !important;
1292
1053
  color: var(--white);
1293
1054
  }
1294
1055
 
1295
- /* Rose 600 */
1296
- .rose600,
1297
- .hover-rose600:hover {
1298
- background-color: var(--rose600) !important;
1056
+ .dark400,
1057
+ .hover-dark400:hover {
1058
+ background-color: var(--dark400) !important;
1299
1059
  color: var(--white);
1300
1060
  }
1301
1061
 
1302
- /* Rose 700 */
1303
- .rose700,
1304
- .hover-rose700:hover {
1305
- background-color: var(--rose700) !important;
1062
+ .dark500,
1063
+ .hover-dark500:hover {
1064
+ background-color: var(--dark500) !important;
1306
1065
  color: var(--white);
1307
1066
  }
1308
1067
 
1309
- /* Rose 800 */
1310
- .rose800,
1311
- .hover-rose800:hover {
1312
- background-color: var(--rose800) !important;
1068
+ .dark600,
1069
+ .hover-dark600:hover {
1070
+ background-color: var(--dark600) !important;
1313
1071
  color: var(--white);
1314
1072
  }
1315
1073
 
1316
- /* Rose 900 */
1317
- .rose900,
1318
- .hover-rose900:hover {
1319
- background-color: var(--rose900) !important;
1074
+ .dark700,
1075
+ .hover-dark700:hover {
1076
+ background-color: var(--dark700) !important;
1320
1077
  color: var(--white);
1321
1078
  }
1322
-
1323
- /* Pink Color */
1324
- .pink,
1325
- .hover-pink:hover {
1326
- background-color: var(--pink) !important;
1079
+ .dark800,
1080
+ .hover-dark800:hover {
1081
+ background-color: var(--dark800) !important;
1327
1082
  color: var(--white);
1328
1083
  }
1329
1084
 
1330
- /* Pink 50 */
1331
- .pink50,
1332
- .hover-pink50:hover {
1333
- background-color: var(--pink50) !important;
1085
+ .dark900,
1086
+ .hover-dark900:hover {
1087
+ background-color: var(--dark900) !important;
1334
1088
  color: var(--white);
1335
1089
  }
1336
1090
 
1337
- /* Pink 100 */
1338
- .pink100,
1339
- .hover-pink100:hover {
1340
- background-color: var(--pink100) !important;
1091
+ .black,
1092
+ .hover-black:hover {
1093
+ background-color: var(--black) !important;
1341
1094
  color: var(--white);
1342
1095
  }
1343
-
1344
- /* Pink 200 */
1345
- .pink200,
1346
- .hover-pink200:hover {
1347
- background-color: var(--pink200) !important;
1348
- color: var(--white);
1096
+ .white,
1097
+ .hover-white:hover {
1098
+ background-color: var(--white) !important;
1349
1099
  }
1350
1100
 
1351
- /* Pink 300 */
1352
- .pink300,
1353
- .hover-pink300:hover {
1354
- background-color: var(--pink300) !important;
1355
- color: var(--white);
1356
- }
1357
1101
 
1358
- /* Pink 400 */
1359
- .pink400,
1360
- .hover-pink400:hover {
1361
- background-color: var(--pink400) !important;
1362
- color: var(--white);
1102
+ /* outlines */
1103
+ .success-outline {
1104
+ border: 1px solid var(--success) !important;
1363
1105
  }
1364
-
1365
- /* Pink 500 */
1366
- .pink500,
1367
- .hover-pink500:hover {
1368
- background-color: var(--pink500) !important;
1369
- color: var(--white);
1106
+ .light-success-outline {
1107
+ border: 1px solid var(--successLight) !important;
1370
1108
  }
1371
-
1372
- /* Pink 600 */
1373
- .pink600,
1374
- .hover-pink600:hover {
1375
- background-color: var(--pink600) !important;
1376
- color: var(--white);
1109
+ .primary-outline {
1110
+ border: 1px solid var(--primary) !important;
1377
1111
  }
1378
-
1379
- /* Pink 700 */
1380
- .pink700,
1381
- .hover-pink700:hover {
1382
- background-color: var(--pink700) !important;
1383
- color: var(--white);
1112
+ .light-outline {
1113
+ border: 1px solid var(--light) !important;
1384
1114
  }
1385
-
1386
- /* Pink 800 */
1387
- .pink800,
1388
- .hover-pink800:hover {
1389
- background-color: var(--pink800) !important;
1390
- color: var(--white);
1115
+ .dark-outline {
1116
+ border: 1px solid var(--dark) !important;
1391
1117
  }
1392
-
1393
- /* Pink 900 */
1394
- .pink900,
1395
- .hover-pink900:hover {
1396
- background-color: var(--pink900) !important;
1397
- color: var(--white);
1118
+ .light-dark-outline {
1119
+ border: 1px solid var(--lightDark) !important;
1398
1120
  }
1399
-
1400
- /* Fuchsia Color */
1401
- .fuchsia,
1402
- .hover-fuchsia:hover {
1403
- background-color: var(--fuchsia) !important;
1404
- color: var(--white);
1121
+ .secondary-outline {
1122
+ border: 1px solid var(--secondary) !important;
1405
1123
  }
1406
-
1407
- /* Fuchsia 50 */
1408
- .fuchsia50,
1409
- .hover-fuchsia50:hover {
1410
- background-color: var(--fuchsia50) !important;
1411
- color: var(--white);
1124
+ .light-outline {
1125
+ border: 1px solid var(--light) !important;
1412
1126
  }
1413
-
1414
- /* Fuchsia 100 */
1415
- .fuchsia100,
1416
- .hover-fuchsia100:hover {
1417
- background-color: var(--fuchsia100) !important;
1418
- color: var(--white);
1127
+ .info-outline {
1128
+ border: 1px solid var(--info) !important;
1419
1129
  }
1420
-
1421
- /* Fuchsia 200 */
1422
- .fuchsia200,
1423
- .hover-fuchsia200:hover {
1424
- background-color: var(--fuchsia200) !important;
1425
- color: var(--white);
1130
+ .light-info-outline {
1131
+ border: 1px solid var(--infoLight) !important;
1426
1132
  }
1427
-
1428
- /* Fuchsia 300 */
1429
- .fuchsia300,
1430
- .hover-fuchsia300:hover {
1431
- background-color: var(--fuchsia300) !important;
1432
- color: var(--white);
1133
+ .warning-outline {
1134
+ border: 1px solid var(--warning) !important;
1433
1135
  }
1434
-
1435
- /* Fuchsia 400 */
1436
- .fuchsia400,
1437
- .hover-fuchsia400:hover {
1438
- background-color: var(--fuchsia400) !important;
1439
- color: var(--white);
1136
+ .light-warning-outline {
1137
+ border: 1px solid var(--warningLight) !important;
1440
1138
  }
1441
-
1442
- /* Fuchsia 500 */
1443
- .fuchsia500,
1444
- .hover-fuchsia500:hover {
1445
- background-color: var(--fuchsia500) !important;
1446
- color: var(--white);
1139
+ .danger-outline {
1140
+ border: 1px solid var(--danger) !important;
1447
1141
  }
1448
-
1449
- /* Fuchsia 600 */
1450
- .fuchsia600,
1451
- .hover-fuchsia600:hover {
1452
- background-color: var(--fuchsia600) !important;
1453
- color: var(--white);
1142
+ .light-danger-outline {
1143
+ border: 1px solid var(--dangerLight) !important;
1454
1144
  }
1455
-
1456
- /* Fuchsia 700 */
1457
- .fuchsia700,
1458
- .hover-fuchsia700:hover {
1459
- background-color: var(--fuchsia700) !important;
1460
- color: var(--white);
1145
+ .lighter-outline {
1146
+ border: 1px solid var(--dangerLight) !important;
1461
1147
  }
1462
1148
 
1463
- /* Fuchsia 800 */
1464
- .fuchsia800,
1465
- .hover-fuchsia800:hover {
1466
- background-color: var(--fuchsia800) !important;
1467
- color: var(--white);
1149
+ /* text color */
1150
+ .text-primary,
1151
+ .hover-text-primary:hover {
1152
+ color: var(--primary) !important;
1468
1153
  }
1469
1154
 
1470
- /* Fuchsia 900 */
1471
- .fuchsia900,
1472
- .hover-fuchsia900:hover {
1473
- background-color: var(--fuchsia900) !important;
1474
- color: var(--white);
1155
+ .text-primary50,
1156
+ .hover-text-primary50:hover {
1157
+ color: var(--primary50) !important;
1475
1158
  }
1476
1159
 
1477
- /* Purple Color */
1478
- .purple,
1479
- .hover-purple:hover {
1480
- background-color: var(--purple) !important;
1481
- color: var(--white);
1160
+ .text-primary100,
1161
+ .hover-text-primary100:hover {
1162
+ color: var(--primary100) !important;
1482
1163
  }
1483
1164
 
1484
- /* Purple 50 */
1485
- .purple50,
1486
- .hover-purple50:hover {
1487
- background-color: var(--purple50) !important;
1488
- color: var(--white);
1165
+ .text-primary200,
1166
+ .hover-text-primary200:hover {
1167
+ color: var(--primary200) !important;
1489
1168
  }
1490
1169
 
1491
- /* Purple 100 */
1492
- .purple100,
1493
- .hover-purple100:hover {
1494
- background-color: var(--purple100) !important;
1495
- color: var(--white);
1170
+ .text-primary300,
1171
+ .hover-text-primary300:hover {
1172
+ color: var(--primary300) !important;
1496
1173
  }
1497
1174
 
1498
- /* Purple 200 */
1499
- .purple200,
1500
- .hover-purple200:hover {
1501
- background-color: var(--purple200) !important;
1502
- color: var(--white);
1175
+ .text-primary400,
1176
+ .hover-text-primary400:hover {
1177
+ color: var(--primary400) !important;
1503
1178
  }
1504
1179
 
1505
- /* Purple 300 */
1506
- .purple300,
1507
- .hover-purple300:hover {
1508
- background-color: var(--purple300) !important;
1509
- color: var(--white);
1180
+ .text-primary500,
1181
+ .hover-text-primary500:hover {
1182
+ color: var(--primary500) !important;
1510
1183
  }
1511
1184
 
1512
- /* Purple 400 */
1513
- .purple400,
1514
- .hover-purple400:hover {
1515
- background-color: var(--purple400) !important;
1516
- color: var(--white);
1185
+ .text-primary600,
1186
+ .hover-text-primary600:hover {
1187
+ color: var(--primary600) !important;
1517
1188
  }
1518
1189
 
1519
- /* Purple 500 */
1520
- .purple500,
1521
- .hover-purple500:hover {
1522
- background-color: var(--purple500) !important;
1523
- color: var(--white);
1190
+ .text-primary700,
1191
+ .hover-text-primary700:hover {
1192
+ color: var(--primary700) !important;
1524
1193
  }
1525
1194
 
1526
- /* Purple 600 */
1527
- .purple600,
1528
- .hover-purple600:hover {
1529
- background-color: var(--purple600) !important;
1530
- color: var(--white);
1195
+ .text-primary800,
1196
+ .hover-text-primary800:hover {
1197
+ color: var(--primary800) !important;
1531
1198
  }
1532
1199
 
1533
- /* Purple 700 */
1534
- .purple700,
1535
- .hover-purple700:hover {
1536
- background-color: var(--purple700) !important;
1537
- color: var(--white);
1200
+ .text-primary900,
1201
+ .hover-text-primary900:hover {
1202
+ color: var(--primary900) !important;
1538
1203
  }
1539
-
1540
- /* Purple 800 */
1541
- .purple800,
1542
- .hover-purple800:hover {
1543
- background-color: var(--purple800) !important;
1544
- color: var(--white);
1204
+ /* Secondary Colors */
1205
+ .text-secondary,
1206
+ .hover-text-secondary:hover {
1207
+ color: var(--secondary) !important;
1545
1208
  }
1546
1209
 
1547
- /* Purple 900 */
1548
- .purple900,
1549
- .hover-purple900:hover {
1550
- background-color: var(--purple900) !important;
1551
- color: var(--white);
1210
+ .text-secondary50,
1211
+ .hover-text-secondary50:hover {
1212
+ color: var(--secondary50) !important;
1552
1213
  }
1553
1214
 
1554
- /* Violet Color */
1555
- .violet,
1556
- .hover-violet:hover {
1557
- background-color: var(--violet) !important;
1558
- color: var(--white);
1215
+ .text-secondary100,
1216
+ .hover-text-secondary100:hover {
1217
+ color: var(--secondary100) !important;
1559
1218
  }
1560
1219
 
1561
- /* Violet 50 */
1562
- .violet50,
1563
- .hover-violet50:hover {
1564
- background-color: var(--violet50) !important;
1565
- color: var(--white);
1220
+ .text-secondary200,
1221
+ .hover-text-secondary200:hover {
1222
+ color: var(--secondary200) !important;
1566
1223
  }
1567
1224
 
1568
- /* Violet 100 */
1569
- .violet100,
1570
- .hover-violet100:hover {
1571
- background-color: var(--violet100) !important;
1572
- color: var(--white);
1225
+ .text-secondary300,
1226
+ .hover-text-secondary300:hover {
1227
+ color: var(--secondary300) !important;
1573
1228
  }
1574
1229
 
1575
- /* Violet 200 */
1576
- .violet200,
1577
- .hover-violet200:hover {
1578
- background-color: var(--violet200) !important;
1579
- color: var(--white);
1230
+ .text-secondary400,
1231
+ .hover-text-secondary400:hover {
1232
+ color: var(--secondary400) !important;
1580
1233
  }
1581
1234
 
1582
- /* Violet 300 */
1583
- .violet300,
1584
- .hover-violet300:hover {
1585
- background-color: var(--violet300) !important;
1586
- color: var(--white);
1235
+ .text-secondary500,
1236
+ .hover-text-secondary500:hover {
1237
+ color: var(--secondary500) !important;
1587
1238
  }
1588
1239
 
1589
- /* Violet 400 */
1590
- .violet400,
1591
- .hover-violet400:hover {
1592
- background-color: var(--violet400) !important;
1593
- color: var(--white);
1240
+ .text-secondary600,
1241
+ .hover-text-secondary600:hover {
1242
+ color: var(--secondary600) !important;
1594
1243
  }
1595
1244
 
1596
- /* Violet 500 */
1597
- .violet500,
1598
- .hover-violet500:hover {
1599
- background-color: var(--violet500) !important;
1600
- color: var(--white);
1245
+ .text-secondary700,
1246
+ .hover-text-secondary700:hover {
1247
+ color: var(--secondary700) !important;
1601
1248
  }
1602
1249
 
1603
- /* Violet 600 */
1604
- .violet600,
1605
- .hover-violet600:hover {
1606
- background-color: var(--violet600) !important;
1607
- color: var(--white);
1250
+ .text-secondary800,
1251
+ .hover-text-secondary800:hover {
1252
+ color: var(--secondary800) !important;
1608
1253
  }
1609
1254
 
1610
- /* Violet 700 */
1611
- .violet700,
1612
- .hover-violet700:hover {
1613
- background-color: var(--violet700) !important;
1614
- color: var(--white);
1255
+ .text-secondary900,
1256
+ .hover-text-secondary900:hover {
1257
+ color: var(--secondary900) !important;
1615
1258
  }
1616
1259
 
1617
- /* Violet 800 */
1618
- .violet800,
1619
- .hover-violet800:hover {
1620
- background-color: var(--violet800) !important;
1621
- color: var(--white);
1260
+ /* Error Colors */
1261
+ .text-error,
1262
+ .hover-text-error:hover {
1263
+ color: var(--error) !important;
1622
1264
  }
1623
1265
 
1624
- /* Violet 900 */
1625
- .violet900,
1626
- .hover-violet900:hover {
1627
- background-color: var(--violet900) !important;
1628
- color: var(--white);
1266
+ .text-error50,
1267
+ .hover-text-error50:hover {
1268
+ color: var(--error50) !important;
1629
1269
  }
1630
1270
 
1631
- /* Indigo Color */
1632
- .indigo,
1633
- .hover-indigo:hover {
1634
- background-color: var(--indigo) !important;
1635
- color: var(--white);
1271
+ .text-error100,
1272
+ .hover-text-error100:hover {
1273
+ color: var(--error100) !important;
1636
1274
  }
1637
1275
 
1638
- /* Indigo 50 */
1639
- .indigo50,
1640
- .hover-indigo50:hover {
1641
- background-color: var(--indigo50) !important;
1642
- color: var(--white);
1276
+ .text-error200,
1277
+ .hover-text-error200:hover {
1278
+ color: var(--error200) !important;
1643
1279
  }
1644
1280
 
1645
- /* Indigo 100 */
1646
- .indigo100,
1647
- .hover-indigo100:hover {
1648
- background-color: var(--indigo100) !important;
1649
- color: var(--white);
1281
+ .text-error300,
1282
+ .hover-text-error300:hover {
1283
+ color: var(--error300) !important;
1650
1284
  }
1651
1285
 
1652
- /* Indigo 200 */
1653
- .indigo200,
1654
- .hover-indigo200:hover {
1655
- background-color: var(--indigo200) !important;
1656
- color: var(--white);
1286
+ .text-error400,
1287
+ .hover-text-error400:hover {
1288
+ color: var(--error400) !important;
1657
1289
  }
1658
1290
 
1659
- /* Indigo 300 */
1660
- .indigo300,
1661
- .hover-indigo300:hover {
1662
- background-color: var(--indigo300) !important;
1663
- color: var(--white);
1291
+ .text-error500,
1292
+ .hover-text-error500:hover {
1293
+ color: var(--error500) !important;
1664
1294
  }
1665
1295
 
1666
- /* Indigo 400 */
1667
- .indigo400,
1668
- .hover-indigo400:hover {
1669
- background-color: var(--indigo400) !important;
1670
- color: var(--white);
1296
+ .text-error600,
1297
+ .hover-text-error600:hover {
1298
+ color: var(--error600) !important;
1671
1299
  }
1672
1300
 
1673
- /* Indigo 500 */
1674
- .indigo500,
1675
- .hover-indigo500:hover {
1676
- background-color: var(--indigo500) !important;
1677
- color: var(--white);
1301
+ .text-error700,
1302
+ .hover-text-error700:hover {
1303
+ color: var(--error700) !important;
1678
1304
  }
1679
1305
 
1680
- /* Indigo 600 */
1681
- .indigo600,
1682
- .hover-indigo600:hover {
1683
- background-color: var(--indigo600) !important;
1684
- color: var(--white);
1306
+ .text-error800,
1307
+ .hover-text-error800:hover {
1308
+ color: var(--error800) !important;
1685
1309
  }
1686
1310
 
1687
- /* Indigo 700 */
1688
- .indigo700,
1689
- .hover-indigo700:hover {
1690
- background-color: var(--indigo700) !important;
1691
- color: var(--white);
1311
+ .text-error900,
1312
+ .hover-text-error900:hover {
1313
+ color: var(--error900) !important;
1692
1314
  }
1693
1315
 
1694
- /* Indigo 800 */
1695
- .indigo800,
1696
- .hover-indigo800:hover {
1697
- background-color: var(--indigo800) !important;
1698
- color: var(--white);
1699
- }
1700
-
1701
- /* Indigo 900 */
1702
- .indigo900,
1703
- .hover-indigo900:hover {
1704
- background-color: var(--indigo900) !important;
1705
- color: var(--white);
1706
- }
1707
-
1708
- /* Blue Colors */
1709
- .blue,
1710
- .hover-blue:hover {
1711
- background-color: var(--blue) !important;
1712
- color: var(--white);
1713
- }
1714
-
1715
- /* Blue 50 */
1716
- .blue50,
1717
- .hover-blue50:hover {
1718
- background-color: var(--blue50) !important;
1719
- color: var(--white);
1720
- }
1721
-
1722
- /* Blue 100 */
1723
- .blue100,
1724
- .hover-blue100:hover {
1725
- background-color: var(--blue100) !important;
1726
- color: var(--white);
1727
- }
1728
-
1729
- /* Blue 200 */
1730
- .blue200,
1731
- .hover-blue200:hover {
1732
- background-color: var(--blue200) !important;
1733
- color: var(--white);
1734
- }
1735
-
1736
- /* Blue 300 */
1737
- .blue300,
1738
- .hover-blue300:hover {
1739
- background-color: var(--blue300) !important;
1740
- color: var(--white);
1741
- }
1742
-
1743
- /* Blue 400 */
1744
- .blue400,
1745
- .hover-blue400:hover {
1746
- background-color: var(--blue400) !important;
1747
- color: var(--white);
1748
- }
1749
-
1750
- /* Blue 500 */
1751
- .blue500,
1752
- .hover-blue500:hover {
1753
- background-color: var(--blue500) !important;
1754
- color: var(--white);
1755
- }
1756
-
1757
- /* Blue 600 */
1758
- .blue600,
1759
- .hover-blue600:hover {
1760
- background-color: var(--blue600) !important;
1761
- color: var(--white);
1762
- }
1763
-
1764
- /* Blue 700 */
1765
- .blue700,
1766
- .hover-blue700:hover {
1767
- background-color: var(--blue700) !important;
1768
- color: var(--white);
1769
- }
1770
-
1771
- /* Blue 800 */
1772
- .blue800,
1773
- .hover-blue800:hover {
1774
- background-color: var(--blue800) !important;
1775
- color: var(--white);
1776
- }
1777
-
1778
- /* Blue 900 */
1779
- .blue900,
1780
- .hover-blue900:hover {
1781
- background-color: var(--blue900) !important;
1782
- color: var(--white);
1783
- }
1784
-
1785
- /* LightBlue Color */
1786
- .lightBlue,
1787
- .hover-lightBlue:hover {
1788
- background-color: var(--lightBlue) !important;
1789
- color: var(--white);
1790
- }
1791
-
1792
- /* LightBlue 50 */
1793
- .lightBlue50,
1794
- .hover-lightBlue50:hover {
1795
- background-color: var(--lightBlue50) !important;
1796
- color: var(--white);
1797
- }
1798
-
1799
- /* LightBlue 100 */
1800
- .lightBlue100,
1801
- .hover-lightBlue100:hover {
1802
- background-color: var(--lightBlue100) !important;
1803
- color: var(--white);
1804
- }
1805
-
1806
- /* LightBlue 200 */
1807
- .lightBlue200,
1808
- .hover-lightBlue200:hover {
1809
- background-color: var(--lightBlue200) !important;
1810
- color: var(--white);
1811
- }
1812
-
1813
- /* LightBlue 300 */
1814
- .lightBlue300,
1815
- .hover-lightBlue300:hover {
1816
- background-color: var(--lightBlue300) !important;
1817
- color: var(--white);
1818
- }
1819
-
1820
- /* LightBlue 400 */
1821
- .lightBlue400,
1822
- .hover-lightBlue400:hover {
1823
- background-color: var(--lightBlue400) !important;
1824
- color: var(--white);
1825
- }
1826
-
1827
- /* LightBlue 500 */
1828
- .lightBlue500,
1829
- .hover-lightBlue500:hover {
1830
- background-color: var(--lightBlue500) !important;
1831
- color: var(--white);
1832
- }
1833
-
1834
- /* LightBlue 600 */
1835
- .lightBlue600,
1836
- .hover-lightBlue600:hover {
1837
- background-color: var(--lightBlue600) !important;
1838
- color: var(--white);
1839
- }
1840
-
1841
- /* LightBlue 700 */
1842
- .lightBlue700,
1843
- .hover-lightBlue700:hover {
1844
- background-color: var(--lightBlue700) !important;
1845
- color: var(--white);
1846
- }
1847
-
1848
- /* LightBlue 800 */
1849
- .lightBlue800,
1850
- .hover-lightBlue800:hover {
1851
- background-color: var(--lightBlue800) !important;
1852
- color: var(--white);
1853
- }
1854
-
1855
- /* LightBlue 900 */
1856
- .lightBlue900,
1857
- .hover-lightBlue900:hover {
1858
- background-color: var(--lightBlue900) !important;
1859
- color: var(--white);
1860
- }
1861
-
1862
- /* DarkBlue Color */
1863
- .darkBlue,
1864
- .hover-darkBlue:hover {
1865
- background-color: var(--darkBlue) !important;
1866
- color: var(--white);
1867
- }
1868
-
1869
- /* DarkBlue 50 */
1870
- .darkBlue50,
1871
- .hover-darkBlue50:hover {
1872
- background-color: var(--darkBlue50) !important;
1873
- color: var(--white);
1874
- }
1875
-
1876
- /* DarkBlue 100 */
1877
- .darkBlue100,
1878
- .hover-darkBlue100:hover {
1879
- background-color: var(--darkBlue100) !important;
1880
- color: var(--white);
1881
- }
1882
-
1883
- /* DarkBlue 200 */
1884
- .darkBlue200,
1885
- .hover-darkBlue200:hover {
1886
- background-color: var(--darkBlue200) !important;
1887
- color: var(--white);
1888
- }
1889
-
1890
- /* DarkBlue 300 */
1891
- .darkBlue300,
1892
- .hover-darkBlue300:hover {
1893
- background-color: var(--darkBlue300) !important;
1894
- color: var(--white);
1895
- }
1896
-
1897
- /* DarkBlue 400 */
1898
- .darkBlue400,
1899
- .hover-darkBlue400:hover {
1900
- background-color: var(--darkBlue400) !important;
1901
- color: var(--white);
1902
- }
1903
-
1904
- /* DarkBlue 500 */
1905
- .darkBlue500,
1906
- .hover-darkBlue500:hover {
1907
- background-color: var(--darkBlue500) !important;
1908
- color: var(--white);
1909
- }
1910
-
1911
- /* DarkBlue 600 */
1912
- .darkBlue600,
1913
- .hover-darkBlue600:hover {
1914
- background-color: var(--darkBlue600) !important;
1915
- color: var(--white);
1916
- }
1917
-
1918
- /* DarkBlue 700 */
1919
- .darkBlue700,
1920
- .hover-darkBlue700:hover {
1921
- background-color: var(--darkBlue700) !important;
1922
- color: var(--white);
1923
- }
1924
-
1925
- /* DarkBlue 800 */
1926
- .darkBlue800,
1927
- .hover-darkBlue800:hover {
1928
- background-color: var(--darkBlue800) !important;
1929
- color: var(--white);
1930
- }
1931
-
1932
- /* DarkBlue 900 */
1933
- .darkBlue900,
1934
- .hover-darkBlue900:hover {
1935
- background-color: var(--darkBlue900) !important;
1936
- color: var(--white);
1937
- }
1938
-
1939
- /* Cyan Colors */
1940
- .cyan,
1941
- .hover-cyan:hover {
1942
- background-color: var(--cyan) !important;
1943
- color: var(--white);
1944
- }
1945
-
1946
- /* Cyan 50 */
1947
- .cyan50,
1948
- .hover-cyan50:hover {
1949
- background-color: var(--cyan50) !important;
1950
- color: var(--white);
1951
- }
1952
-
1953
- /* Cyan 100 */
1954
- .cyan100,
1955
- .hover-cyan100:hover {
1956
- background-color: var(--cyan100) !important;
1957
- color: var(--white);
1958
- }
1959
-
1960
- /* Cyan 200 */
1961
- .cyan200,
1962
- .hover-cyan200:hover {
1963
- background-color: var(--cyan200) !important;
1964
- color: var(--white);
1965
- }
1966
-
1967
- /* Cyan 300 */
1968
- .cyan300,
1969
- .hover-cyan300:hover {
1970
- background-color: var(--cyan300) !important;
1971
- color: var(--white);
1972
- }
1973
-
1974
- /* Cyan 400 */
1975
- .cyan400,
1976
- .hover-cyan400:hover {
1977
- background-color: var(--cyan400) !important;
1978
- color: var(--white);
1979
- }
1980
-
1981
- /* Cyan 500 */
1982
- .cyan500,
1983
- .hover-cyan500:hover {
1984
- background-color: var(--cyan500) !important;
1985
- color: var(--white);
1986
- }
1987
-
1988
- /* Cyan 600 */
1989
- .cyan600,
1990
- .hover-cyan600:hover {
1991
- background-color: var(--cyan600) !important;
1992
- color: var(--white);
1993
- }
1994
-
1995
- /* Cyan 700 */
1996
- .cyan700,
1997
- .hover-cyan700:hover {
1998
- background-color: var(--cyan700) !important;
1999
- color: var(--white);
2000
- }
2001
-
2002
- /* Cyan 800 */
2003
- .cyan800,
2004
- .hover-cyan800:hover {
2005
- background-color: var(--cyan800) !important;
2006
- color: var(--white);
2007
- }
2008
-
2009
- /* Cyan 900 */
2010
- .cyan900,
2011
- .hover-cyan900:hover {
2012
- background-color: var(--cyan900) !important;
2013
- color: var(--white);
2014
- }
2015
-
2016
- /* Teal Color */
2017
- .teal,
2018
- .hover-teal:hover {
2019
- background-color: var(--teal) !important;
2020
- color: var(--white);
2021
- }
2022
-
2023
- /* Teal 50 */
2024
- .teal50,
2025
- .hover-teal50:hover {
2026
- background-color: var(--teal50) !important;
2027
- color: var(--white);
2028
- }
2029
-
2030
- /* Teal 100 */
2031
- .teal100,
2032
- .hover-teal100:hover {
2033
- background-color: var(--teal100) !important;
2034
- color: var(--white);
2035
- }
2036
-
2037
- /* Teal 200 */
2038
- .teal200,
2039
- .hover-teal200:hover {
2040
- background-color: var(--teal200) !important;
2041
- color: var(--white);
2042
- }
2043
-
2044
- /* Teal 300 */
2045
- .teal300,
2046
- .hover-teal300:hover {
2047
- background-color: var(--teal300) !important;
2048
- color: var(--white);
2049
- }
2050
-
2051
- /* Teal 400 */
2052
- .teal400,
2053
- .hover-teal400:hover {
2054
- background-color: var(--teal400) !important;
2055
- color: var(--white);
2056
- }
2057
-
2058
- /* Teal 500 */
2059
- .teal500,
2060
- .hover-teal500:hover {
2061
- background-color: var(--teal500) !important;
2062
- color: var(--white);
2063
- }
2064
-
2065
- /* Teal 600 */
2066
- .teal600,
2067
- .hover-teal600:hover {
2068
- background-color: var(--teal600) !important;
2069
- color: var(--white);
2070
- }
2071
-
2072
- /* Teal 700 */
2073
- .teal700,
2074
- .hover-teal700:hover {
2075
- background-color: var(--teal700) !important;
2076
- color: var(--white);
2077
- }
2078
-
2079
- /* Teal 800 */
2080
- .teal800,
2081
- .hover-teal800:hover {
2082
- background-color: var(--teal800) !important;
2083
- color: var(--white);
2084
- }
2085
-
2086
- /* Teal 900 */
2087
- .teal900,
2088
- .hover-teal900:hover {
2089
- background-color: var(--teal900) !important;
2090
- color: var(--white);
2091
- }
2092
-
2093
- /* Emerald Color */
2094
- .emerald,
2095
- .hover-emerald:hover {
2096
- background-color: var(--emerald) !important;
2097
- color: var(--white);
2098
- }
2099
-
2100
- /* Emerald 50 */
2101
- .emerald50,
2102
- .hover-emerald50:hover {
2103
- background-color: var(--emerald50) !important;
2104
- color: var(--white);
2105
- }
2106
-
2107
- /* Emerald 100 */
2108
- .emerald100,
2109
- .hover-emerald100:hover {
2110
- background-color: var(--emerald100) !important;
2111
- color: var(--white);
2112
- }
2113
-
2114
- /* Emerald 200 */
2115
- .emerald200,
2116
- .hover-emerald200:hover {
2117
- background-color: var(--emerald200) !important;
2118
- color: var(--white);
2119
- }
2120
-
2121
- /* Emerald 300 */
2122
- .emerald300,
2123
- .hover-emerald300:hover {
2124
- background-color: var(--emerald300) !important;
2125
- color: var(--white);
2126
- }
2127
-
2128
- /* Emerald 400 */
2129
- .emerald400,
2130
- .hover-emerald400:hover {
2131
- background-color: var(--emerald400) !important;
2132
- color: var(--white);
2133
- }
2134
-
2135
- /* Emerald 500 */
2136
- .emerald500,
2137
- .hover-emerald500:hover {
2138
- background-color: var(--emerald500) !important;
2139
- color: var(--white);
2140
- }
2141
-
2142
- /* Emerald 600 */
2143
- .emerald600,
2144
- .hover-emerald600:hover {
2145
- background-color: var(--emerald600) !important;
2146
- color: var(--white);
2147
- }
2148
-
2149
- /* Emerald 700 */
2150
- .emerald700,
2151
- .hover-emerald700:hover {
2152
- background-color: var(--emerald700) !important;
2153
- color: var(--white);
2154
- }
2155
-
2156
- /* Emerald 800 */
2157
- .emerald800,
2158
- .hover-emerald800:hover {
2159
- background-color: var(--emerald800) !important;
2160
- color: var(--white);
2161
- }
2162
-
2163
- /* Emerald 900 */
2164
- .emerald900,
2165
- .hover-emerald900:hover {
2166
- background-color: var(--emerald900) !important;
2167
- color: var(--white);
2168
- }
2169
-
2170
- /* Green Colors */
2171
- .green,
2172
- .hover-green:hover {
2173
- background-color: var(--green) !important;
2174
- color: var(--white);
2175
- }
2176
-
2177
- /* Green 50 */
2178
- .green50,
2179
- .hover-green50:hover {
2180
- background-color: var(--green50) !important;
2181
- color: var(--white);
2182
- }
2183
-
2184
- /* Green 100 */
2185
- .green100,
2186
- .hover-green100:hover {
2187
- background-color: var(--green100) !important;
2188
- color: var(--white);
2189
- }
2190
-
2191
- /* Green 200 */
2192
- .green200,
2193
- .hover-green200:hover {
2194
- background-color: var(--green200) !important;
2195
- color: var(--white);
2196
- }
2197
-
2198
- /* Green 300 */
2199
- .green300,
2200
- .hover-green300:hover {
2201
- background-color: var(--green300) !important;
2202
- color: var(--white);
2203
- }
2204
-
2205
- /* Green 400 */
2206
- .green400,
2207
- .hover-green400:hover {
2208
- background-color: var(--green400) !important;
2209
- color: var(--white);
2210
- }
2211
-
2212
- /* Green 500 */
2213
- .green500,
2214
- .hover-green500:hover {
2215
- background-color: var(--green500) !important;
2216
- color: var(--white);
2217
- }
2218
-
2219
- /* Green 600 */
2220
- .green600,
2221
- .hover-green600:hover {
2222
- background-color: var(--green600) !important;
2223
- color: var(--white);
2224
- }
2225
-
2226
- /* Green 700 */
2227
- .green700,
2228
- .hover-green700:hover {
2229
- background-color: var(--green700) !important;
2230
- color: var(--white);
2231
- }
2232
-
2233
- /* Green 800 */
2234
- .green800,
2235
- .hover-green800:hover {
2236
- background-color: var(--green800) !important;
2237
- color: var(--white);
2238
- }
2239
-
2240
- /* Green 900 */
2241
- .green900,
2242
- .hover-green900:hover {
2243
- background-color: var(--green900) !important;
2244
- color: var(--white);
2245
- }
2246
-
2247
- /* Lime Color */
2248
- .lime,
2249
- .hover-lime:hover {
2250
- background-color: var(--lime) !important;
2251
- color: var(--white);
2252
- }
2253
-
2254
- /* Lime 50 */
2255
- .lime50,
2256
- .hover-lime50:hover {
2257
- background-color: var(--lime50) !important;
2258
- color: var(--white);
2259
- }
2260
-
2261
- /* Lime 100 */
2262
- .lime100,
2263
- .hover-lime100:hover {
2264
- background-color: var(--lime100) !important;
2265
- color: var(--white);
2266
- }
2267
-
2268
- /* Lime 200 */
2269
- .lime200,
2270
- .hover-lime200:hover {
2271
- background-color: var(--lime200) !important;
2272
- color: var(--white);
2273
- }
2274
-
2275
- /* Lime 300 */
2276
- .lime300,
2277
- .hover-lime300:hover {
2278
- background-color: var(--lime300) !important;
2279
- color: var(--white);
2280
- }
2281
-
2282
- /* Lime 400 */
2283
- .lime400,
2284
- .hover-lime400:hover {
2285
- background-color: var(--lime400) !important;
2286
- color: var(--white);
2287
- }
2288
-
2289
- /* Lime 500 */
2290
- .lime500,
2291
- .hover-lime500:hover {
2292
- background-color: var(--lime500) !important;
2293
- color: var(--white);
2294
- }
2295
-
2296
- /* Lime 600 */
2297
- .lime600,
2298
- .hover-lime600:hover {
2299
- background-color: var(--lime600) !important;
2300
- color: var(--white);
2301
- }
2302
-
2303
- /* Lime 700 */
2304
- .lime700,
2305
- .hover-lime700:hover {
2306
- background-color: var(--lime700) !important;
2307
- color: var(--white);
2308
- }
2309
-
2310
- /* Lime 800 */
2311
- .lime800,
2312
- .hover-lime800:hover {
2313
- background-color: var(--lime800) !important;
2314
- color: var(--white);
2315
- }
2316
-
2317
- /* Lime 900 */
2318
- .lime900,
2319
- .hover-lime900:hover {
2320
- background-color: var(--lime900) !important;
2321
- color: var(--white);
2322
- }
2323
-
2324
- /* Yellow Color */
2325
- .yellow,
2326
- .hover-yellow:hover {
2327
- background-color: var(--yellow) !important;
2328
- color: var(--white);
2329
- }
2330
-
2331
- /* Yellow 50 */
2332
- .yellow50,
2333
- .hover-yellow50:hover {
2334
- background-color: var(--yellow50) !important;
2335
- color: var(--white);
2336
- }
2337
-
2338
- /* Yellow 100 */
2339
- .yellow100,
2340
- .hover-yellow100:hover {
2341
- background-color: var(--yellow100) !important;
2342
- color: var(--white);
2343
- }
2344
-
2345
- /* Yellow 200 */
2346
- .yellow200,
2347
- .hover-yellow200:hover {
2348
- background-color: var(--yellow200) !important;
2349
- color: var(--white);
2350
- }
2351
-
2352
- /* Yellow 300 */
2353
- .yellow300,
2354
- .hover-yellow300:hover {
2355
- background-color: var(--yellow300) !important;
2356
- color: var(--white);
2357
- }
2358
-
2359
- /* Yellow 400 */
2360
- .yellow400,
2361
- .hover-yellow400:hover {
2362
- background-color: var(--yellow400) !important;
2363
- color: var(--white);
2364
- }
2365
-
2366
- /* Yellow 500 */
2367
- .yellow500,
2368
- .hover-yellow500:hover {
2369
- background-color: var(--yellow500) !important;
2370
- color: var(--white);
2371
- }
2372
-
2373
- /* Yellow 600 */
2374
- .yellow600,
2375
- .hover-yellow600:hover {
2376
- background-color: var(--yellow600) !important;
2377
- color: var(--white);
2378
- }
2379
- /* Yellow 700 */
2380
- .yellow700,
2381
- .hover-yellow700:hover {
2382
- background-color: var(--yellow700) !important;
2383
- color: var(--white);
2384
- }
2385
-
2386
- /* Yellow 800 */
2387
- .yellow800,
2388
- .hover-yellow800:hover {
2389
- background-color: var(--yellow800) !important;
2390
- color: var(--white);
2391
- }
2392
-
2393
- /* Yellow 900 */
2394
- .yellow900,
2395
- .hover-yellow900:hover {
2396
- background-color: var(--yellow900) !important;
2397
- color: var(--white);
2398
- }
2399
-
2400
- /* Amber Colors */
2401
- .amber,
2402
- .hover-amber:hover {
2403
- background-color: var(--amber) !important;
2404
- color: var(--white);
2405
- }
2406
-
2407
- /* Amber 50 */
2408
- .amber50,
2409
- .hover-amber50:hover {
2410
- background-color: var(--amber50) !important;
2411
- color: var(--white);
2412
- }
2413
-
2414
- /* Amber 100 */
2415
- .amber100,
2416
- .hover-amber100:hover {
2417
- background-color: var(--amber100) !important;
2418
- color: var(--white);
2419
- }
2420
-
2421
- /* Amber 200 */
2422
- .amber200,
2423
- .hover-amber200:hover {
2424
- background-color: var(--amber200) !important;
2425
- color: var(--white);
2426
- }
2427
-
2428
- /* Amber 300 */
2429
- .amber300,
2430
- .hover-amber300:hover {
2431
- background-color: var(--amber300) !important;
2432
- color: var(--white);
2433
- }
2434
-
2435
- /* Amber 400 */
2436
- .amber400,
2437
- .hover-amber400:hover {
2438
- background-color: var(--amber400) !important;
2439
- color: var(--white);
2440
- }
2441
-
2442
- /* Amber 500 */
2443
- .amber500,
2444
- .hover-amber500:hover {
2445
- background-color: var(--amber500) !important;
2446
- color: var(--white);
2447
- }
2448
-
2449
- /* Amber 600 */
2450
- .amber600,
2451
- .hover-amber600:hover {
2452
- background-color: var(--amber600) !important;
2453
- color: var(--white);
2454
- }
2455
-
2456
- /* Amber 700 */
2457
- .amber700,
2458
- .hover-amber700:hover {
2459
- background-color: var(--amber700) !important;
2460
- color: var(--white);
2461
- }
2462
-
2463
- /* Amber 800 */
2464
- .amber800,
2465
- .hover-amber800:hover {
2466
- background-color: var(--amber800) !important;
2467
- color: var(--white);
2468
- }
2469
-
2470
- /* Amber 900 */
2471
- .amber900,
2472
- .hover-amber900:hover {
2473
- background-color: var(--amber900) !important;
2474
- color: var(--white);
2475
- }
2476
-
2477
- /* Orange Color */
2478
- .orange,
2479
- .hover-orange:hover {
2480
- background-color: var(--orange) !important;
2481
- color: var(--white);
2482
- }
2483
-
2484
- /* Orange 50 */
2485
- .orange50,
2486
- .hover-orange50:hover {
2487
- background-color: var(--orange50) !important;
2488
- color: var(--white);
2489
- }
2490
-
2491
- /* Orange 100 */
2492
- .orange100,
2493
- .hover-orange100:hover {
2494
- background-color: var(--orange100) !important;
2495
- color: var(--white);
2496
- }
2497
-
2498
- /* Orange 200 */
2499
- .orange200,
2500
- .hover-orange200:hover {
2501
- background-color: var(--orange200) !important;
2502
- color: var(--white);
2503
- }
2504
-
2505
- /* Orange 300 */
2506
- .orange300,
2507
- .hover-orange300:hover {
2508
- background-color: var(--orange300) !important;
2509
- color: var(--white);
2510
- }
2511
-
2512
- /* Orange 400 */
2513
- .orange400,
2514
- .hover-orange400:hover {
2515
- background-color: var(--orange400) !important;
2516
- color: var(--white);
2517
- }
2518
-
2519
- /* Orange 500 */
2520
- .orange500,
2521
- .hover-orange500:hover {
2522
- background-color: var(--orange500) !important;
2523
- color: var(--white);
2524
- }
2525
-
2526
- /* Orange 600 */
2527
- .orange600,
2528
- .hover-orange600:hover {
2529
- background-color: var(--orange600) !important;
2530
- color: var(--white);
2531
- }
2532
-
2533
- /* Orange 700 */
2534
- .orange700,
2535
- .hover-orange700:hover {
2536
- background-color: var(--orange700) !important;
2537
- color: var(--white);
2538
- }
2539
-
2540
- /* Orange 800 */
2541
- .orange800,
2542
- .hover-orange800:hover {
2543
- background-color: var(--orange800) !important;
2544
- color: var(--white);
2545
- }
2546
-
2547
- /* Orange 900 */
2548
- .orange900,
2549
- .hover-orange900:hover {
2550
- background-color: var(--orange900) !important;
2551
- color: var(--white);
2552
- }
2553
-
2554
- /* Red Color */
2555
- .red,
2556
- .hover-red:hover {
2557
- background-color: var(--red) !important;
2558
- color: var(--white);
2559
- }
2560
-
2561
- /* Red 50 */
2562
- .red50,
2563
- .hover-red50:hover {
2564
- background-color: var(--red50) !important;
2565
- color: var(--white);
2566
- }
2567
-
2568
- /* Red 100 */
2569
- .red100,
2570
- .hover-red100:hover {
2571
- background-color: var(--red100) !important;
2572
- color: var(--white);
2573
- }
2574
-
2575
- /* Red 200 */
2576
- .red200,
2577
- .hover-red200:hover {
2578
- background-color: var(--red200) !important;
2579
- color: var(--white);
2580
- }
2581
-
2582
- /* Red 300 */
2583
- .red300,
2584
- .hover-red300:hover {
2585
- background-color: var(--red300) !important;
2586
- color: var(--white);
2587
- }
2588
-
2589
- /* Red 400 */
2590
- .red400,
2591
- .hover-red400:hover {
2592
- background-color: var(--red400) !important;
2593
- color: var(--white);
2594
- }
2595
-
2596
- /* Red 500 */
2597
- .red500,
2598
- .hover-red500:hover {
2599
- background-color: var(--red500) !important;
2600
- color: var(--white);
2601
- }
2602
-
2603
- /* Red 600 */
2604
- .red600,
2605
- .hover-red600:hover {
2606
- background-color: var(--red600) !important;
2607
- color: var(--white);
2608
- }
2609
-
2610
- /* Red 700 */
2611
- .red700,
2612
- .hover-red700:hover {
2613
- background-color: var(--red700) !important;
2614
- color: var(--white);
2615
- }
2616
-
2617
- /* Red 800 */
2618
- .red800,
2619
- .hover-red800:hover {
2620
- background-color: var(--red800) !important;
2621
- color: var(--white);
2622
- }
2623
-
2624
- /* Red 900 */
2625
- .red900,
2626
- .hover-red900:hover {
2627
- background-color: var(--red900) !important;
2628
- color: var(--white);
2629
- }
2630
-
2631
- /* Warm Gray Colors */
2632
- .warmGray,
2633
- .hover-warmGray:hover {
2634
- background-color: var(--warmGray) !important;
2635
- color: var(--white);
2636
- }
2637
-
2638
- /* Warm Gray 50 */
2639
- .warmGray50,
2640
- .hover-warmGray50:hover {
2641
- background-color: var(--warmGray50) !important;
2642
- color: var(--white);
2643
- }
2644
-
2645
- /* Warm Gray 100 */
2646
- .warmGray100,
2647
- .hover-warmGray100:hover {
2648
- background-color: var(--warmGray100) !important;
2649
- color: var(--white);
2650
- }
2651
-
2652
- /* Warm Gray 200 */
2653
- .warmGray200,
2654
- .hover-warmGray200:hover {
2655
- background-color: var(--warmGray200) !important;
2656
- color: var(--white);
2657
- }
2658
-
2659
- /* Warm Gray 300 */
2660
- .warmGray300,
2661
- .hover-warmGray300:hover {
2662
- background-color: var(--warmGray300) !important;
2663
- color: var(--white);
2664
- }
2665
-
2666
- /* Warm Gray 400 */
2667
- .warmGray400,
2668
- .hover-warmGray400:hover {
2669
- background-color: var(--warmGray400) !important;
2670
- color: var(--white);
2671
- }
2672
-
2673
- /* Warm Gray 500 */
2674
- .warmGray500,
2675
- .hover-warmGray500:hover {
2676
- background-color: var(--warmGray500) !important;
2677
- color: var(--white);
2678
- }
2679
-
2680
- /* Warm Gray 600 */
2681
- .warmGray600,
2682
- .hover-warmGray600:hover {
2683
- background-color: var(--warmGray600) !important;
2684
- color: var(--white);
2685
- }
2686
-
2687
- /* Warm Gray 700 */
2688
- .warmGray700,
2689
- .hover-warmGray700:hover {
2690
- background-color: var(--warmGray700) !important;
2691
- color: var(--white);
2692
- }
2693
-
2694
- /* Warm Gray 800 */
2695
- .warmGray800,
2696
- .hover-warmGray800:hover {
2697
- background-color: var(--warmGray800) !important;
2698
- color: var(--white);
2699
- }
2700
-
2701
- /* Warm Gray 900 */
2702
- .warmGray900,
2703
- .hover-warmGray900:hover {
2704
- background-color: var(--warmGray900) !important;
2705
- color: var(--white);
2706
- }
2707
-
2708
- /* True Gray Colors */
2709
- .trueGray,
2710
- .hover-trueGray:hover {
2711
- background-color: var(--trueGray) !important;
2712
- color: var(--white);
2713
- }
2714
-
2715
- /* True Gray 50 */
2716
- .trueGray50,
2717
- .hover-trueGray50:hover {
2718
- background-color: var(--trueGray50) !important;
2719
- color: var(--white);
2720
- }
2721
-
2722
- /* True Gray 100 */
2723
- .trueGray100,
2724
- .hover-trueGray100:hover {
2725
- background-color: var(--trueGray100) !important;
2726
- color: var(--white);
2727
- }
2728
-
2729
- /* True Gray 200 */
2730
- .trueGray200,
2731
- .hover-trueGray200:hover {
2732
- background-color: var(--trueGray200) !important;
2733
- color: var(--white);
2734
- }
2735
-
2736
- /* True Gray 300 */
2737
- .trueGray300,
2738
- .hover-trueGray300:hover {
2739
- background-color: var(--trueGray300) !important;
2740
- color: var(--white);
2741
- }
2742
-
2743
- /* True Gray 400 */
2744
- .trueGray400,
2745
- .hover-trueGray400:hover {
2746
- background-color: var(--trueGray400) !important;
2747
- color: var(--white);
2748
- }
2749
-
2750
- /* True Gray 500 */
2751
- .trueGray500,
2752
- .hover-trueGray500:hover {
2753
- background-color: var(--trueGray500) !important;
2754
- color: var(--white);
2755
- }
2756
-
2757
- /* True Gray 600 */
2758
- .trueGray600,
2759
- .hover-trueGray600:hover {
2760
- background-color: var(--trueGray600) !important;
2761
- color: var(--white);
2762
- }
2763
-
2764
- /* True Gray 700 */
2765
- .trueGray700,
2766
- .hover-trueGray700:hover {
2767
- background-color: var(--trueGray700) !important;
2768
- color: var(--white);
2769
- }
2770
-
2771
- /* True Gray 800 */
2772
- .trueGray800,
2773
- .hover-trueGray800:hover {
2774
- background-color: var(--trueGray800) !important;
2775
- color: var(--white);
2776
- }
2777
-
2778
- /* True Gray 900 */
2779
- .trueGray900,
2780
- .hover-trueGray900:hover {
2781
- background-color: var(--trueGray900) !important;
2782
- color: var(--white);
2783
- }
2784
-
2785
- /* Gray Colors */
2786
- .gray,
2787
- .hover-gray:hover {
2788
- background-color: var(--gray) !important;
2789
- color: var(--white);
2790
- }
2791
-
2792
- .gray50,
2793
- .hover-gray50:hover {
2794
- background-color: var(--gray50) !important;
2795
- color: var(--white);
2796
- }
2797
-
2798
- .gray100,
2799
- .hover-gray100:hover {
2800
- background-color: var(--gray100) !important;
2801
- color: var(--white);
2802
- }
2803
-
2804
- .gray200,
2805
- .hover-gray200:hover {
2806
- background-color: var(--gray200) !important;
2807
- color: var(--white);
2808
- }
2809
-
2810
- .gray300,
2811
- .hover-gray300:hover {
2812
- background-color: var(--gray300) !important;
2813
- color: var(--white);
2814
- }
2815
-
2816
- .gray400,
2817
- .hover-gray400:hover {
2818
- background-color: var(--gray400) !important;
2819
- color: var(--white);
2820
- }
2821
-
2822
- .gray500,
2823
- .hover-gray500:hover {
2824
- background-color: var(--gray500) !important;
2825
- color: var(--white);
2826
- }
2827
-
2828
- .gray600,
2829
- .hover-gray600:hover {
2830
- background-color: var(--gray600) !important;
2831
- color: var(--white);
2832
- }
2833
-
2834
- .gray700,
2835
- .hover-gray700:hover {
2836
- background-color: var(--gray700) !important;
2837
- color: var(--white);
2838
- }
2839
-
2840
- .gray800,
2841
- .hover-gray800:hover {
2842
- background-color: var(--gray800) !important;
2843
- color: var(--white);
2844
- }
2845
-
2846
- .gray900,
2847
- .hover-gray900:hover {
2848
- background-color: var(--gray900) !important;
2849
- color: var(--white);
2850
- }
2851
-
2852
- /* Cool Gray Colors */
2853
- .coolGray,
2854
- .hover-coolGray:hover {
2855
- background-color: var(--coolGray) !important;
2856
- color: var(--white);
2857
- }
2858
-
2859
- .coolGray50,
2860
- .hover-coolGray50:hover {
2861
- background-color: var(--coolGray50) !important;
2862
- color: var(--white);
2863
- }
2864
-
2865
- .coolGray100,
2866
- .hover-coolGray100:hover {
2867
- background-color: var(--coolGray100) !important;
2868
- color: var(--white);
2869
- }
2870
-
2871
- .coolGray200,
2872
- .hover-coolGray200:hover {
2873
- background-color: var(--coolGray200) !important;
2874
- color: var(--white);
2875
- }
2876
-
2877
- .coolGray300,
2878
- .hover-coolGray300:hover {
2879
- background-color: var(--coolGray300) !important;
2880
- color: var(--white);
2881
- }
2882
-
2883
- .coolGray400,
2884
- .hover-coolGray400:hover {
2885
- background-color: var(--coolGray400) !important;
2886
- color: var(--white);
2887
- }
2888
-
2889
- .coolGray500,
2890
- .hover-coolGray500:hover {
2891
- background-color: var(--coolGray500) !important;
2892
- color: var(--white);
2893
- }
2894
-
2895
- .coolGray600,
2896
- .hover-coolGray600:hover {
2897
- background-color: var(--coolGray600) !important;
2898
- color: var(--white);
2899
- }
2900
-
2901
- .coolGray700,
2902
- .hover-coolGray700:hover {
2903
- background-color: var(--coolGray700) !important;
2904
- color: var(--white);
2905
- }
2906
-
2907
- .coolGray800,
2908
- .hover-coolGray800:hover {
2909
- background-color: var(--coolGray800) !important;
2910
- color: var(--white);
2911
- }
2912
-
2913
- .coolGray900,
2914
- .hover-coolGray900:hover {
2915
- background-color: var(--coolGray900) !important;
2916
- color: var(--white);
2917
- }
2918
-
2919
- /* Blue Gray Colors */
2920
- .blueGray,
2921
- .hover-blueGray:hover {
2922
- background-color: var(--blueGray) !important;
2923
- color: var(--white);
2924
- }
2925
-
2926
- .blueGray50,
2927
- .hover-blueGray50:hover {
2928
- background-color: var(--blueGray50) !important;
2929
- color: var(--white);
2930
- }
2931
-
2932
- .blueGray100,
2933
- .hover-blueGray100:hover {
2934
- background-color: var(--blueGray100) !important;
2935
- color: var(--white);
2936
- }
2937
-
2938
- .blueGray200,
2939
- .hover-blueGray200:hover {
2940
- background-color: var(--blueGray200) !important;
2941
- color: var(--white);
2942
- }
2943
-
2944
- .blueGray300,
2945
- .hover-blueGray300:hover {
2946
- background-color: var(--blueGray300) !important;
2947
- color: var(--white);
2948
- }
2949
-
2950
- .blueGray400,
2951
- .hover-blueGray400:hover {
2952
- background-color: var(--blueGray400) !important;
2953
- color: var(--white);
2954
- }
2955
-
2956
- .blueGray500,
2957
- .hover-blueGray500:hover {
2958
- background-color: var(--blueGray500) !important;
2959
- color: var(--white);
2960
- }
2961
-
2962
- .blueGray600,
2963
- .hover-blueGray600:hover {
2964
- background-color: var(--blueGray600) !important;
2965
- color: var(--white);
2966
- }
2967
-
2968
- .blueGray700,
2969
- .hover-blueGray700:hover {
2970
- background-color: var(--blueGray700) !important;
2971
- color: var(--white);
2972
- }
2973
-
2974
- .blueGray800,
2975
- .hover-blueGray800:hover {
2976
- background-color: var(--blueGray800) !important;
2977
- color: var(--white);
2978
- }
2979
-
2980
- .blueGray900,
2981
- .hover-blueGray900:hover {
2982
- background-color: var(--blueGray900) !important;
2983
- color: var(--white);
2984
- }
2985
-
2986
- /* Dark Colors */
2987
- .dark,
2988
- .hover-dark:hover {
2989
- background-color: var(--dark) !important;
2990
- color: var(--white);
2991
- }
2992
-
2993
- .dark50,
2994
- .hover-dark50:hover {
2995
- background-color: var(--dark50) !important;
2996
- color: var(--white);
2997
- }
2998
-
2999
- .dark100,
3000
- .hover-dark100:hover {
3001
- background-color: var(--dark100) !important;
3002
- color: var(--white);
3003
- }
3004
-
3005
- .dark200,
3006
- .hover-dark200:hover {
3007
- background-color: var(--dark200) !important;
3008
- color: var(--white);
3009
- }
3010
-
3011
- .dark300,
3012
- .hover-dark300:hover {
3013
- background-color: var(--dark300) !important;
3014
- color: var(--white);
3015
- }
3016
-
3017
- .dark400,
3018
- .hover-dark400:hover {
3019
- background-color: var(--dark400) !important;
3020
- color: var(--white);
3021
- }
3022
-
3023
- .dark500,
3024
- .hover-dark500:hover {
3025
- background-color: var(--dark500) !important;
3026
- color: var(--white);
3027
- }
3028
-
3029
- .dark600,
3030
- .hover-dark600:hover {
3031
- background-color: var(--dark600) !important;
3032
- color: var(--white);
3033
- }
3034
-
3035
- .dark700,
3036
- .hover-dark700:hover {
3037
- background-color: var(--dark700) !important;
3038
- color: var(--white);
3039
- }
3040
- .dark800,
3041
- .hover-dark800:hover {
3042
- background-color: var(--dark800) !important;
3043
- color: var(--white);
3044
- }
3045
-
3046
- .dark900,
3047
- .hover-dark900:hover {
3048
- background-color: var(--dark900) !important;
3049
- color: var(--white);
3050
- }
3051
-
3052
- .black,
3053
- .hover-black:hover {
3054
- background-color: var(--black) !important;
3055
- color: var(--white);
3056
- }
3057
- .white,
3058
- .hover-white:hover {
3059
- background-color: var(--white) !important;
3060
- }
3061
-
3062
-
3063
- /* outlines */
3064
- .success-outline {
3065
- border: 1px solid var(--success) !important;
3066
- }
3067
- .light-success-outline {
3068
- border: 1px solid var(--successLight) !important;
3069
- }
3070
- .primary-outline {
3071
- border: 1px solid var(--primary) !important;
3072
- }
3073
- .light-outline {
3074
- border: 1px solid var(--light) !important;
3075
- }
3076
- .dark-outline {
3077
- border: 1px solid var(--dark) !important;
3078
- }
3079
- .light-dark-outline {
3080
- border: 1px solid var(--lightDark) !important;
3081
- }
3082
- .secondary-outline {
3083
- border: 1px solid var(--secondary) !important;
3084
- }
3085
- .light-outline {
3086
- border: 1px solid var(--light) !important;
3087
- }
3088
- .info-outline {
3089
- border: 1px solid var(--info) !important;
3090
- }
3091
- .light-info-outline {
3092
- border: 1px solid var(--infoLight) !important;
3093
- }
3094
- .warning-outline {
3095
- border: 1px solid var(--warning) !important;
3096
- }
3097
- .light-warning-outline {
3098
- border: 1px solid var(--warningLight) !important;
3099
- }
3100
- .danger-outline {
3101
- border: 1px solid var(--danger) !important;
3102
- }
3103
- .light-danger-outline {
3104
- border: 1px solid var(--dangerLight) !important;
3105
- }
3106
- .lighter-outline {
3107
- border: 1px solid var(--dangerLight) !important;
3108
- }
3109
-
3110
- /* text color */
3111
- .text-primary,
3112
- .hover-text-primary:hover {
3113
- color: var(--primary) !important;
3114
- }
3115
-
3116
- .text-primary50,
3117
- .hover-text-primary50:hover {
3118
- color: var(--primary50) !important;
3119
- }
3120
-
3121
- .text-primary100,
3122
- .hover-text-primary100:hover {
3123
- color: var(--primary100) !important;
3124
- }
3125
-
3126
- .text-primary200,
3127
- .hover-text-primary200:hover {
3128
- color: var(--primary200) !important;
3129
- }
3130
-
3131
- .text-primary300,
3132
- .hover-text-primary300:hover {
3133
- color: var(--primary300) !important;
3134
- }
3135
-
3136
- .text-primary400,
3137
- .hover-text-primary400:hover {
3138
- color: var(--primary400) !important;
3139
- }
3140
-
3141
- .text-primary500,
3142
- .hover-text-primary500:hover {
3143
- color: var(--primary500) !important;
3144
- }
3145
-
3146
- .text-primary600,
3147
- .hover-text-primary600:hover {
3148
- color: var(--primary600) !important;
3149
- }
3150
-
3151
- .text-primary700,
3152
- .hover-text-primary700:hover {
3153
- color: var(--primary700) !important;
3154
- }
3155
-
3156
- .text-primary800,
3157
- .hover-text-primary800:hover {
3158
- color: var(--primary800) !important;
3159
- }
3160
-
3161
- .text-primary900,
3162
- .hover-text-primary900:hover {
3163
- color: var(--primary900) !important;
3164
- }
3165
- /* Secondary Colors */
3166
- .text-secondary,
3167
- .hover-text-secondary:hover {
3168
- color: var(--secondary) !important;
3169
- }
3170
-
3171
- .text-secondary50,
3172
- .hover-text-secondary50:hover {
3173
- color: var(--secondary50) !important;
3174
- }
3175
-
3176
- .text-secondary100,
3177
- .hover-text-secondary100:hover {
3178
- color: var(--secondary100) !important;
3179
- }
3180
-
3181
- .text-secondary200,
3182
- .hover-text-secondary200:hover {
3183
- color: var(--secondary200) !important;
3184
- }
3185
-
3186
- .text-secondary300,
3187
- .hover-text-secondary300:hover {
3188
- color: var(--secondary300) !important;
3189
- }
3190
-
3191
- .text-secondary400,
3192
- .hover-text-secondary400:hover {
3193
- color: var(--secondary400) !important;
3194
- }
3195
-
3196
- .text-secondary500,
3197
- .hover-text-secondary500:hover {
3198
- color: var(--secondary500) !important;
3199
- }
3200
-
3201
- .text-secondary600,
3202
- .hover-text-secondary600:hover {
3203
- color: var(--secondary600) !important;
3204
- }
3205
-
3206
- .text-secondary700,
3207
- .hover-text-secondary700:hover {
3208
- color: var(--secondary700) !important;
3209
- }
3210
-
3211
- .text-secondary800,
3212
- .hover-text-secondary800:hover {
3213
- color: var(--secondary800) !important;
3214
- }
3215
-
3216
- .text-secondary900,
3217
- .hover-text-secondary900:hover {
3218
- color: var(--secondary900) !important;
3219
- }
3220
-
3221
- /* Error Colors */
3222
- .text-error,
3223
- .hover-text-error:hover {
3224
- color: var(--error) !important;
3225
- }
3226
-
3227
- .text-error50,
3228
- .hover-text-error50:hover {
3229
- color: var(--error50) !important;
3230
- }
3231
-
3232
- .text-error100,
3233
- .hover-text-error100:hover {
3234
- color: var(--error100) !important;
3235
- }
3236
-
3237
- .text-error200,
3238
- .hover-text-error200:hover {
3239
- color: var(--error200) !important;
3240
- }
3241
-
3242
- .text-error300,
3243
- .hover-text-error300:hover {
3244
- color: var(--error300) !important;
3245
- }
3246
-
3247
- .text-error400,
3248
- .hover-text-error400:hover {
3249
- color: var(--error400) !important;
3250
- }
3251
-
3252
- .text-error500,
3253
- .hover-text-error500:hover {
3254
- color: var(--error500) !important;
3255
- }
3256
-
3257
- .text-error600,
3258
- .hover-text-error600:hover {
3259
- color: var(--error600) !important;
3260
- }
3261
-
3262
- .text-error700,
3263
- .hover-text-error700:hover {
3264
- color: var(--error700) !important;
3265
- }
3266
-
3267
- .text-error800,
3268
- .hover-text-error800:hover {
3269
- color: var(--error800) !important;
3270
- }
3271
-
3272
- .text-error900,
3273
- .hover-text-error900:hover {
3274
- color: var(--error900) !important;
3275
- }
3276
-
3277
- /* Success Colors */
3278
- .text-success,
3279
- .hover-text-success:hover {
3280
- color: var(--success) !important;
3281
- }
3282
-
3283
- .text-success50,
3284
- .hover-text-success50:hover {
3285
- color: var(--success50) !important;
3286
- }
3287
-
3288
- .text-success100,
3289
- .hover-text-success100:hover {
3290
- color: var(--success100) !important;
3291
- }
3292
-
3293
- .text-success200,
3294
- .hover-text-success200:hover {
3295
- color: var(--success200) !important;
3296
- }
3297
-
3298
- .text-success300,
3299
- .hover-text-success300:hover {
3300
- color: var(--success300) !important;
3301
- }
3302
-
3303
- .text-success400,
3304
- .hover-text-success400:hover {
3305
- color: var(--success400) !important;
3306
- }
3307
-
3308
- .text-success500,
3309
- .hover-text-success500:hover {
3310
- color: var(--success500) !important;
3311
- }
3312
-
3313
- .text-success600,
3314
- .hover-text-success600:hover {
3315
- color: var(--success600) !important;
3316
- }
3317
-
3318
- .text-success700,
3319
- .hover-text-success700:hover {
3320
- color: var(--success700) !important;
3321
- }
3322
-
3323
- .text-success800,
3324
- .hover-text-success800:hover {
3325
- color: var(--success800) !important;
3326
- }
3327
-
3328
- .text-success900,
3329
- .hover-text-success900:hover {
3330
- color: var(--success900) !important;
3331
- }
3332
-
3333
- /* Warning Colors */
3334
- .text-warning,
3335
- .hover-text-warning:hover {
3336
- color: var(--warning) !important;
3337
- }
3338
-
3339
- .text-warning50,
3340
- .hover-text-warning50:hover {
3341
- color: var(--warning50) !important;
3342
- }
3343
-
3344
- .text-warning100,
3345
- .hover-text-warning100:hover {
3346
- color: var(--warning100) !important;
3347
- }
3348
-
3349
- .text-warning200,
3350
- .hover-text-warning200:hover {
3351
- color: var(--warning200) !important;
3352
- }
3353
-
3354
- .text-warning300,
3355
- .hover-text-warning300:hover {
3356
- color: var(--warning300) !important;
3357
- }
3358
-
3359
- .text-warning400,
3360
- .hover-text-warning400:hover {
3361
- color: var(--warning400) !important;
3362
- }
3363
-
3364
- .text-warning500,
3365
- .hover-text-warning500:hover {
3366
- color: var(--warning500) !important;
3367
- }
3368
-
3369
- .text-warning600,
3370
- .hover-text-warning600:hover {
3371
- color: var(--warning600) !important;
3372
- }
3373
-
3374
- .text-warning700,
3375
- .hover-text-warning700:hover {
3376
- color: var(--warning700) !important;
3377
- }
3378
-
3379
- .text-warning800,
3380
- .hover-text-warning800:hover {
3381
- color: var(--warning800) !important;
3382
- }
3383
-
3384
- .text-warning900,
3385
- .hover-text-warning900:hover {
3386
- color: var(--warning900) !important;
3387
- }
3388
- /* Muted Colors */
3389
- .text-muted,
3390
- .hover-text-muted:hover {
3391
- color: var(--muted) !important;
3392
- }
3393
-
3394
- .text-muted50,
3395
- .hover-text-muted50:hover {
3396
- color: var(--muted50) !important;
3397
- }
3398
-
3399
- .text-muted100,
3400
- .hover-text-muted100:hover {
3401
- color: var(--muted100) !important;
3402
- }
3403
-
3404
- .text-muted200,
3405
- .hover-text-muted200:hover {
3406
- color: var(--muted200) !important;
3407
- }
3408
-
3409
- .text-muted300,
3410
- .hover-text-muted300:hover {
3411
- color: var(--muted300) !important;
3412
- }
3413
-
3414
- .text-muted400,
3415
- .hover-text-muted400:hover {
3416
- color: var(--muted400) !important;
3417
- }
3418
-
3419
- .text-muted500,
3420
- .hover-text-muted500:hover {
3421
- color: var(--muted500) !important;
3422
- }
3423
-
3424
- .text-muted600,
3425
- .hover-text-muted600:hover {
3426
- color: var(--muted600) !important;
3427
- }
3428
-
3429
- .text-muted700,
3430
- .hover-text-muted700:hover {
3431
- color: var(--muted700) !important;
3432
- }
3433
-
3434
- .text-muted800,
3435
- .hover-text-muted800:hover {
3436
- color: var(--muted800) !important;
3437
- }
3438
-
3439
- .text-muted900,
3440
- .hover-text-muted900:hover {
3441
- color: var(--muted900) !important;
3442
- }
3443
-
3444
- /* Info Colors */
3445
- .text-info,
3446
- .hover-text-info:hover {
3447
- color: var(--info) !important;
3448
- }
3449
-
3450
- .text-info50,
3451
- .hover-text-info50:hover {
3452
- color: var(--info50) !important;
3453
- }
3454
-
3455
- .text-info100,
3456
- .hover-text-info100:hover {
3457
- color: var(--info100) !important;
3458
- }
3459
-
3460
- .text-info200,
3461
- .hover-text-info200:hover {
3462
- color: var(--info200) !important;
3463
- }
3464
-
3465
- .text-info300,
3466
- .hover-text-info300:hover {
3467
- color: var(--info300) !important;
3468
- }
3469
-
3470
- .text-info400,
3471
- .hover-text-info400:hover {
3472
- color: var(--info400) !important;
3473
- }
3474
-
3475
- .text-info500,
3476
- .hover-text-info500:hover {
3477
- color: var(--info500) !important;
3478
- }
3479
-
3480
- .text-info600,
3481
- .hover-text-info600:hover {
3482
- color: var(--info600) !important;
3483
- }
3484
-
3485
- .text-info700,
3486
- .hover-text-info700:hover {
3487
- color: var(--info700) !important;
3488
- }
3489
-
3490
- .text-info800,
3491
- .hover-text-info800:hover {
3492
- color: var(--info800) !important;
3493
- }
3494
-
3495
- .text-info900,
3496
- .hover-text-info900:hover {
3497
- color: var(--info900) !important;
3498
- }
3499
-
3500
- /* Light Colors */
3501
- .text-light,
3502
- .hover-text-light:hover {
3503
- color: var(--light) !important;
3504
- }
3505
-
3506
- .text-light50,
3507
- .hover-text-light50:hover {
3508
- color: var(--light50) !important;
3509
- }
3510
-
3511
- .text-light100,
3512
- .hover-text-light100:hover {
3513
- color: var(--light100) !important;
3514
- }
3515
-
3516
- .text-light200,
3517
- .hover-text-light200:hover {
3518
- color: var(--light200) !important;
3519
- }
3520
-
3521
- .text-light300,
3522
- .hover-text-light300:hover {
3523
- color: var(--light300) !important;
3524
- }
3525
-
3526
- .text-light400,
3527
- .hover-text-light400:hover {
3528
- color: var(--light400) !important;
3529
- }
3530
-
3531
- .text-light500,
3532
- .hover-text-light500:hover {
3533
- color: var(--light500) !important;
3534
- }
3535
-
3536
- .text-light600,
3537
- .hover-text-light600:hover {
3538
- color: var(--light600) !important;
3539
- }
3540
-
3541
- .text-light700,
3542
- .hover-text-light700:hover {
3543
- color: var(--light700) !important;
3544
- }
3545
-
3546
- .text-light800,
3547
- .hover-text-light800:hover {
3548
- color: var(--light800) !important;
3549
- }
3550
-
3551
- .text-light900,
3552
- .hover-text-light900:hover {
3553
- color: var(--light900) !important;
3554
- }
3555
-
3556
- /* Rose Colors */
3557
- .text-rose,
3558
- .hover-text-rose:hover {
3559
- color: var(--rose) !important;
3560
- }
3561
-
3562
- .text-rose50,
3563
- .hover-text-rose50:hover {
3564
- color: var(--rose50) !important;
3565
- }
3566
-
3567
- .text-rose100,
3568
- .hover-text-rose100:hover {
3569
- color: var(--rose100) !important;
3570
- }
3571
-
3572
- .text-rose200,
3573
- .hover-text-rose200:hover {
3574
- color: var(--rose200) !important;
3575
- }
3576
-
3577
- .text-rose300,
3578
- .hover-text-rose300:hover {
3579
- color: var(--rose300) !important;
3580
- }
3581
-
3582
- .text-rose400,
3583
- .hover-text-rose400:hover {
3584
- color: var(--rose400) !important;
3585
- }
3586
-
3587
- .text-rose500,
3588
- .hover-text-rose500:hover {
3589
- color: var(--rose500) !important;
3590
- }
3591
-
3592
- .text-rose600,
3593
- .hover-text-rose600:hover {
3594
- color: var(--rose600) !important;
3595
- }
3596
-
3597
- .text-rose700,
3598
- .hover-text-rose700:hover {
3599
- color: var(--rose700) !important;
3600
- }
3601
-
3602
- .text-rose800,
3603
- .hover-text-rose800:hover {
3604
- color: var(--rose800) !important;
3605
- }
3606
-
3607
- .text-rose900,
3608
- .hover-text-rose900:hover {
3609
- color: var(--rose900) !important;
3610
- }
3611
- /* Pink Colors */
3612
- .text-pink,
3613
- .hover-text-pink:hover {
3614
- color: var(--pink) !important;
3615
- }
3616
-
3617
- .text-pink50,
3618
- .hover-text-pink50:hover {
3619
- color: var(--pink50) !important;
3620
- }
3621
-
3622
- .text-pink100,
3623
- .hover-text-pink100:hover {
3624
- color: var(--pink100) !important;
3625
- }
3626
-
3627
- .text-pink200,
3628
- .hover-text-pink200:hover {
3629
- color: var(--pink200) !important;
3630
- }
3631
-
3632
- .text-pink300,
3633
- .hover-text-pink300:hover {
3634
- color: var(--pink300) !important;
3635
- }
3636
-
3637
- .text-pink400,
3638
- .hover-text-pink400:hover {
3639
- color: var(--pink400) !important;
3640
- }
3641
-
3642
- .text-pink500,
3643
- .hover-text-pink500:hover {
3644
- color: var(--pink500) !important;
3645
- }
3646
-
3647
- .text-pink600,
3648
- .hover-text-pink600:hover {
3649
- color: var(--pink600) !important;
3650
- }
3651
-
3652
- .text-pink700,
3653
- .hover-text-pink700:hover {
3654
- color: var(--pink700) !important;
3655
- }
3656
-
3657
- .text-pink800,
3658
- .hover-text-pink800:hover {
3659
- color: var(--pink800) !important;
3660
- }
3661
-
3662
- .text-pink900,
3663
- .hover-text-pink900:hover {
3664
- color: var(--pink900) !important;
3665
- }
3666
-
3667
- /* Fuchsia Colors */
3668
- .text-fuchsia,
3669
- .hover-text-fuchsia:hover {
3670
- color: var(--fuchsia) !important;
3671
- }
3672
-
3673
- .text-fuchsia50,
3674
- .hover-text-fuchsia50:hover {
3675
- color: var(--fuchsia50) !important;
3676
- }
3677
-
3678
- .text-fuchsia100,
3679
- .hover-text-fuchsia100:hover {
3680
- color: var(--fuchsia100) !important;
3681
- }
3682
-
3683
- .text-fuchsia200,
3684
- .hover-text-fuchsia200:hover {
3685
- color: var(--fuchsia200) !important;
3686
- }
3687
-
3688
- .text-fuchsia300,
3689
- .hover-text-fuchsia300:hover {
3690
- color: var(--fuchsia300) !important;
3691
- }
3692
-
3693
- .text-fuchsia400,
3694
- .hover-text-fuchsia400:hover {
3695
- color: var(--fuchsia400) !important;
3696
- }
3697
-
3698
- .text-fuchsia500,
3699
- .hover-text-fuchsia500:hover {
3700
- color: var(--fuchsia500) !important;
3701
- }
3702
-
3703
- .text-fuchsia600,
3704
- .hover-text-fuchsia600:hover {
3705
- color: var(--fuchsia600) !important;
3706
- }
3707
-
3708
- .text-fuchsia700,
3709
- .hover-text-fuchsia700:hover {
3710
- color: var(--fuchsia700) !important;
3711
- }
3712
-
3713
- .text-fuchsia800,
3714
- .hover-text-fuchsia800:hover {
3715
- color: var(--fuchsia800) !important;
3716
- }
3717
-
3718
- .text-fuchsia900,
3719
- .hover-text-fuchsia900:hover {
3720
- color: var(--fuchsia900) !important;
3721
- }
3722
-
3723
- /* Purple Colors */
3724
- .text-purple,
3725
- .hover-text-purple:hover {
3726
- color: var(--purple) !important;
3727
- }
3728
-
3729
- .text-purple50,
3730
- .hover-text-purple50:hover {
3731
- color: var(--purple50) !important;
3732
- }
3733
-
3734
- .text-purple100,
3735
- .hover-text-purple100:hover {
3736
- color: var(--purple100) !important;
3737
- }
3738
-
3739
- .text-purple200,
3740
- .hover-text-purple200:hover {
3741
- color: var(--purple200) !important;
3742
- }
3743
-
3744
- .text-purple300,
3745
- .hover-text-purple300:hover {
3746
- color: var(--purple300) !important;
3747
- }
3748
-
3749
- .text-purple400,
3750
- .hover-text-purple400:hover {
3751
- color: var(--purple400) !important;
3752
- }
3753
-
3754
- .text-purple500,
3755
- .hover-text-purple500:hover {
3756
- color: var(--purple500) !important;
3757
- }
3758
-
3759
- .text-purple600,
3760
- .hover-text-purple600:hover {
3761
- color: var(--purple600) !important;
3762
- }
3763
-
3764
- .text-purple700,
3765
- .hover-text-purple700:hover {
3766
- color: var(--purple700) !important;
3767
- }
3768
-
3769
- .text-purple800,
3770
- .hover-text-purple800:hover {
3771
- color: var(--purple800) !important;
3772
- }
3773
-
3774
- .text-purple900,
3775
- .hover-text-purple900:hover {
3776
- color: var(--purple900) !important;
3777
- }
3778
-
3779
- /* Violet Colors */
3780
- .text-violet,
3781
- .hover-text-violet:hover {
3782
- color: var(--violet) !important;
3783
- }
3784
-
3785
- .text-violet50,
3786
- .hover-text-violet50:hover {
3787
- color: var(--violet50) !important;
3788
- }
3789
-
3790
- .text-violet100,
3791
- .hover-text-violet100:hover {
3792
- color: var(--violet100) !important;
3793
- }
3794
-
3795
- .text-violet200,
3796
- .hover-text-violet200:hover {
3797
- color: var(--violet200) !important;
3798
- }
3799
-
3800
- .text-violet300,
3801
- .hover-text-violet300:hover {
3802
- color: var(--violet300) !important;
3803
- }
3804
-
3805
- .text-violet400,
3806
- .hover-text-violet400:hover {
3807
- color: var(--violet400) !important;
3808
- }
3809
-
3810
- .text-violet500,
3811
- .hover-text-violet500:hover {
3812
- color: var(--violet500) !important;
3813
- }
3814
-
3815
- .text-violet600,
3816
- .hover-text-violet600:hover {
3817
- color: var(--violet600) !important;
3818
- }
3819
-
3820
- .text-violet700,
3821
- .hover-text-violet700:hover {
3822
- color: var(--violet700) !important;
3823
- }
3824
-
3825
- .text-violet800,
3826
- .hover-text-violet800:hover {
3827
- color: var(--violet800) !important;
3828
- }
3829
-
3830
- .text-violet900,
3831
- .hover-text-violet900:hover {
3832
- color: var(--violet900) !important;
3833
- }
3834
- /* Indigo Colors */
3835
- .text-indigo,
3836
- .hover-text-indigo:hover {
3837
- color: var(--indigo) !important;
3838
- }
3839
-
3840
- .text-indigo50,
3841
- .hover-text-indigo50:hover {
3842
- color: var(--indigo50) !important;
3843
- }
3844
-
3845
- .text-indigo100,
3846
- .hover-text-indigo100:hover {
3847
- color: var(--indigo100) !important;
3848
- }
3849
-
3850
- .text-indigo200,
3851
- .hover-text-indigo200:hover {
3852
- color: var(--indigo200) !important;
3853
- }
3854
-
3855
- .text-indigo300,
3856
- .hover-text-indigo300:hover {
3857
- color: var(--indigo300) !important;
3858
- }
3859
-
3860
- .text-indigo400,
3861
- .hover-text-indigo400:hover {
3862
- color: var(--indigo400) !important;
3863
- }
3864
-
3865
- .text-indigo500,
3866
- .hover-text-indigo500:hover {
3867
- color: var(--indigo500) !important;
3868
- }
3869
-
3870
- .text-indigo600,
3871
- .hover-text-indigo600:hover {
3872
- color: var(--indigo600) !important;
3873
- }
3874
-
3875
- .text-indigo700,
3876
- .hover-text-indigo700:hover {
3877
- color: var(--indigo700) !important;
3878
- }
3879
-
3880
- .text-indigo800,
3881
- .hover-text-indigo800:hover {
3882
- color: var(--indigo800) !important;
3883
- }
3884
-
3885
- .text-indigo900,
3886
- .hover-text-indigo900:hover {
3887
- color: var(--indigo900) !important;
3888
- }
3889
-
3890
- /* Blue Colors */
3891
- .text-blue,
3892
- .hover-text-blue:hover {
3893
- color: var(--blue) !important;
3894
- }
3895
-
3896
- .text-blue50,
3897
- .hover-text-blue50:hover {
3898
- color: var(--blue50) !important;
3899
- }
3900
-
3901
- .text-blue100,
3902
- .hover-text-blue100:hover {
3903
- color: var(--blue100) !important;
3904
- }
3905
-
3906
- .text-blue200,
3907
- .hover-text-blue200:hover {
3908
- color: var(--blue200) !important;
3909
- }
3910
-
3911
- .text-blue300,
3912
- .hover-text-blue300:hover {
3913
- color: var(--blue300) !important;
3914
- }
3915
-
3916
- .text-blue400,
3917
- .hover-text-blue400:hover {
3918
- color: var(--blue400) !important;
3919
- }
3920
-
3921
- .text-blue500,
3922
- .hover-text-blue500:hover {
3923
- color: var(--blue500) !important;
3924
- }
3925
-
3926
- .text-blue600,
3927
- .hover-text-blue600:hover {
3928
- color: var(--blue600) !important;
3929
- }
3930
-
3931
- .text-blue700,
3932
- .hover-text-blue700:hover {
3933
- color: var(--blue700) !important;
3934
- }
3935
-
3936
- .text-blue800,
3937
- .hover-text-blue800:hover {
3938
- color: var(--blue800) !important;
3939
- }
3940
-
3941
- .text-blue900,
3942
- .hover-text-blue900:hover {
3943
- color: var(--blue900) !important;
3944
- }
3945
-
3946
- /* LightBlue Colors */
3947
- .text-lightBlue,
3948
- .hover-text-lightBlue:hover {
3949
- color: var(--lightBlue) !important;
3950
- }
3951
-
3952
- .text-lightBlue50,
3953
- .hover-text-lightBlue50:hover {
3954
- color: var(--lightBlue50) !important;
3955
- }
3956
-
3957
- .text-lightBlue100,
3958
- .hover-text-lightBlue100:hover {
3959
- color: var(--lightBlue100) !important;
3960
- }
3961
-
3962
- .text-lightBlue200,
3963
- .hover-text-lightBlue200:hover {
3964
- color: var(--lightBlue200) !important;
3965
- }
3966
-
3967
- .text-lightBlue300,
3968
- .hover-text-lightBlue300:hover {
3969
- color: var(--lightBlue300) !important;
3970
- }
3971
-
3972
- .text-lightBlue400,
3973
- .hover-text-lightBlue400:hover {
3974
- color: var(--lightBlue400) !important;
3975
- }
3976
-
3977
- .text-lightBlue500,
3978
- .hover-text-lightBlue500:hover {
3979
- color: var(--lightBlue500) !important;
3980
- }
3981
-
3982
- .text-lightBlue600,
3983
- .hover-text-lightBlue600:hover {
3984
- color: var(--lightBlue600) !important;
3985
- }
3986
-
3987
- .text-lightBlue700,
3988
- .hover-text-lightBlue700:hover {
3989
- color: var(--lightBlue700) !important;
3990
- }
3991
-
3992
- .text-lightBlue800,
3993
- .hover-text-lightBlue800:hover {
3994
- color: var(--lightBlue800) !important;
3995
- }
3996
-
3997
- .text-lightBlue900,
3998
- .hover-text-lightBlue900:hover {
3999
- color: var(--lightBlue900) !important;
4000
- }
4001
-
4002
- /* DarkBlue Colors */
4003
- .text-darkBlue,
4004
- .hover-text-darkBlue:hover {
4005
- color: var(--darkBlue) !important;
4006
- }
4007
-
4008
- .text-darkBlue50,
4009
- .hover-text-darkBlue50:hover {
4010
- color: var(--darkBlue50) !important;
4011
- }
4012
-
4013
- .text-darkBlue100,
4014
- .hover-text-darkBlue100:hover {
4015
- color: var(--darkBlue100) !important;
4016
- }
4017
-
4018
- .text-darkBlue200,
4019
- .hover-text-darkBlue200:hover {
4020
- color: var(--darkBlue200) !important;
4021
- }
4022
-
4023
- .text-darkBlue300,
4024
- .hover-text-darkBlue300:hover {
4025
- color: var(--darkBlue300) !important;
4026
- }
4027
-
4028
- .text-darkBlue400,
4029
- .hover-text-darkBlue400:hover {
4030
- color: var(--darkBlue400) !important;
4031
- }
4032
-
4033
- .text-darkBlue500,
4034
- .hover-text-darkBlue500:hover {
4035
- color: var(--darkBlue500) !important;
4036
- }
4037
-
4038
- .text-darkBlue600,
4039
- .hover-text-darkBlue600:hover {
4040
- color: var(--darkBlue600) !important;
4041
- }
4042
-
4043
- .text-darkBlue700,
4044
- .hover-text-darkBlue700:hover {
4045
- color: var(--darkBlue700) !important;
4046
- }
4047
-
4048
- .text-darkBlue800,
4049
- .hover-text-darkBlue800:hover {
4050
- color: var(--darkBlue800) !important;
4051
- }
4052
-
4053
- .text-darkBlue900,
4054
- .hover-text-darkBlue900:hover {
4055
- color: var(--darkBlue900) !important;
4056
- }
4057
- /* Cyan Colors */
4058
- .text-cyan,
4059
- .hover-text-cyan:hover {
4060
- color: var(--cyan) !important;
4061
- }
4062
-
4063
- .text-cyan50,
4064
- .hover-text-cyan50:hover {
4065
- color: var(--cyan50) !important;
4066
- }
4067
-
4068
- .text-cyan100,
4069
- .hover-text-cyan100:hover {
4070
- color: var(--cyan100) !important;
4071
- }
4072
-
4073
- .text-cyan200,
4074
- .hover-text-cyan200:hover {
4075
- color: var(--cyan200) !important;
4076
- }
4077
-
4078
- .text-cyan300,
4079
- .hover-text-cyan300:hover {
4080
- color: var(--cyan300) !important;
4081
- }
4082
-
4083
- .text-cyan400,
4084
- .hover-text-cyan400:hover {
4085
- color: var(--cyan400) !important;
4086
- }
4087
-
4088
- .text-cyan500,
4089
- .hover-text-cyan500:hover {
4090
- color: var(--cyan500) !important;
4091
- }
4092
-
4093
- .text-cyan600,
4094
- .hover-text-cyan600:hover {
4095
- color: var(--cyan600) !important;
4096
- }
4097
-
4098
- .text-cyan700,
4099
- .hover-text-cyan700:hover {
4100
- color: var(--cyan700) !important;
4101
- }
4102
-
4103
- .text-cyan800,
4104
- .hover-text-cyan800:hover {
4105
- color: var(--cyan800) !important;
4106
- }
4107
-
4108
- .text-cyan900,
4109
- .hover-text-cyan900:hover {
4110
- color: var(--cyan900) !important;
4111
- }
4112
-
4113
- /* Teal Colors */
4114
- .text-teal,
4115
- .hover-text-teal:hover {
4116
- color: var(--teal) !important;
4117
- }
4118
-
4119
- .text-teal50,
4120
- .hover-text-teal50:hover {
4121
- color: var(--teal50) !important;
4122
- }
4123
-
4124
- .text-teal100,
4125
- .hover-text-teal100:hover {
4126
- color: var(--teal100) !important;
4127
- }
4128
-
4129
- .text-teal200,
4130
- .hover-text-teal200:hover {
4131
- color: var(--teal200) !important;
4132
- }
4133
-
4134
- .text-teal300,
4135
- .hover-text-teal300:hover {
4136
- color: var(--teal300) !important;
4137
- }
4138
-
4139
- .text-teal400,
4140
- .hover-text-teal400:hover {
4141
- color: var(--teal400) !important;
4142
- }
4143
-
4144
- .text-teal500,
4145
- .hover-text-teal500:hover {
4146
- color: var(--teal500) !important;
4147
- }
4148
-
4149
- .text-teal600,
4150
- .hover-text-teal600:hover {
4151
- color: var(--teal600) !important;
4152
- }
4153
-
4154
- .text-teal700,
4155
- .hover-text-teal700:hover {
4156
- color: var(--teal700) !important;
4157
- }
4158
-
4159
- .text-teal800,
4160
- .hover-text-teal800:hover {
4161
- color: var(--teal800) !important;
4162
- }
4163
-
4164
- .text-teal900,
4165
- .hover-text-teal900:hover {
4166
- color: var(--teal900) !important;
4167
- }
4168
-
4169
- /* Emerald Colors */
4170
- .text-emerald,
4171
- .hover-text-emerald:hover {
4172
- color: var(--emerald) !important;
4173
- }
4174
-
4175
- .text-emerald50,
4176
- .hover-text-emerald50:hover {
4177
- color: var(--emerald50) !important;
4178
- }
4179
-
4180
- .text-emerald100,
4181
- .hover-text-emerald100:hover {
4182
- color: var(--emerald100) !important;
4183
- }
4184
-
4185
- .text-emerald200,
4186
- .hover-text-emerald200:hover {
4187
- color: var(--emerald200) !important;
4188
- }
4189
-
4190
- .text-emerald300,
4191
- .hover-text-emerald300:hover {
4192
- color: var(--emerald300) !important;
4193
- }
4194
-
4195
- .text-emerald400,
4196
- .hover-text-emerald400:hover {
4197
- color: var(--emerald400) !important;
4198
- }
4199
-
4200
- .text-emerald500,
4201
- .hover-text-emerald500:hover {
4202
- color: var(--emerald500) !important;
4203
- }
4204
-
4205
- .text-emerald600,
4206
- .hover-text-emerald600:hover {
4207
- color: var(--emerald600) !important;
4208
- }
4209
-
4210
- .text-emerald700,
4211
- .hover-text-emerald700:hover {
4212
- color: var(--emerald700) !important;
4213
- }
4214
-
4215
- .text-emerald800,
4216
- .hover-text-emerald800:hover {
4217
- color: var(--emerald800) !important;
4218
- }
4219
-
4220
- .text-emerald900,
4221
- .hover-text-emerald900:hover {
4222
- color: var(--emerald900) !important;
4223
- }
4224
-
4225
- /* Green Colors */
4226
- .text-green,
4227
- .hover-text-green:hover {
4228
- color: var(--green) !important;
4229
- }
4230
-
4231
- .text-green50,
4232
- .hover-text-green50:hover {
4233
- color: var(--green50) !important;
4234
- }
4235
-
4236
- .text-green100,
4237
- .hover-text-green100:hover {
4238
- color: var(--green100) !important;
4239
- }
4240
-
4241
- .text-green200,
4242
- .hover-text-green200:hover {
4243
- color: var(--green200) !important;
4244
- }
4245
-
4246
- .text-green300,
4247
- .hover-text-green300:hover {
4248
- color: var(--green300) !important;
4249
- }
4250
-
4251
- .text-green400,
4252
- .hover-text-green400:hover {
4253
- color: var(--green400) !important;
4254
- }
4255
-
4256
- .text-green500,
4257
- .hover-text-green500:hover {
4258
- color: var(--green500) !important;
4259
- }
4260
-
4261
- .text-green600,
4262
- .hover-text-green600:hover {
4263
- color: var(--green600) !important;
4264
- }
4265
-
4266
- .text-green700,
4267
- .hover-text-green700:hover {
4268
- color: var(--green700) !important;
4269
- }
4270
-
4271
- .text-green800,
4272
- .hover-text-green800:hover {
4273
- color: var(--green800) !important;
4274
- }
4275
-
4276
- .text-green900,
4277
- .hover-text-green900:hover {
4278
- color: var(--green900) !important;
4279
- }
4280
- /* Lime Colors */
4281
- .text-lime,
4282
- .hover-text-lime:hover {
4283
- color: var(--lime) !important;
4284
- }
4285
-
4286
- .text-lime50,
4287
- .hover-text-lime50:hover {
4288
- color: var(--lime50) !important;
4289
- }
4290
-
4291
- .text-lime100,
4292
- .hover-text-lime100:hover {
4293
- color: var(--lime100) !important;
4294
- }
4295
-
4296
- .text-lime200,
4297
- .hover-text-lime200:hover {
4298
- color: var(--lime200) !important;
4299
- }
4300
-
4301
- .text-lime300,
4302
- .hover-text-lime300:hover {
4303
- color: var(--lime300) !important;
4304
- }
4305
-
4306
- .text-lime400,
4307
- .hover-text-lime400:hover {
4308
- color: var(--lime400) !important;
4309
- }
4310
-
4311
- .text-lime500,
4312
- .hover-text-lime500:hover {
4313
- color: var(--lime500) !important;
4314
- }
4315
-
4316
- .text-lime600,
4317
- .hover-text-lime600:hover {
4318
- color: var(--lime600) !important;
4319
- }
4320
-
4321
- .text-lime700,
4322
- .hover-text-lime700:hover {
4323
- color: var(--lime700) !important;
4324
- }
4325
-
4326
- .text-lime800,
4327
- .hover-text-lime800:hover {
4328
- color: var(--lime800) !important;
4329
- }
4330
-
4331
- .text-lime900,
4332
- .hover-text-lime900:hover {
4333
- color: var(--lime900) !important;
4334
- }
4335
-
4336
- /* Yellow Colors */
4337
- .text-yellow,
4338
- .hover-text-yellow:hover {
4339
- color: var(--yellow) !important;
4340
- }
4341
-
4342
- .text-yellow50,
4343
- .hover-text-yellow50:hover {
4344
- color: var(--yellow50) !important;
4345
- }
4346
-
4347
- .text-yellow100,
4348
- .hover-text-yellow100:hover {
4349
- color: var(--yellow100) !important;
4350
- }
4351
-
4352
- .text-yellow200,
4353
- .hover-text-yellow200:hover {
4354
- color: var(--yellow200) !important;
4355
- }
4356
-
4357
- .text-yellow300,
4358
- .hover-text-yellow300:hover {
4359
- color: var(--yellow300) !important;
4360
- }
4361
-
4362
- .text-yellow400,
4363
- .hover-text-yellow400:hover {
4364
- color: var(--yellow400) !important;
4365
- }
4366
-
4367
- .text-yellow500,
4368
- .hover-text-yellow500:hover {
4369
- color: var(--yellow500) !important;
4370
- }
4371
-
4372
- .text-yellow600,
4373
- .hover-text-yellow600:hover {
4374
- color: var(--yellow600) !important;
4375
- }
4376
-
4377
- .text-yellow700,
4378
- .hover-text-yellow700:hover {
4379
- color: var(--yellow700) !important;
4380
- }
4381
-
4382
- .text-yellow800,
4383
- .hover-text-yellow800:hover {
4384
- color: var(--yellow800) !important;
4385
- }
4386
-
4387
- .text-yellow900,
4388
- .hover-text-yellow900:hover {
4389
- color: var(--yellow900) !important;
4390
- }
4391
-
4392
- /* Amber Colors */
4393
- .text-amber,
4394
- .hover-text-amber:hover {
4395
- color: var(--amber) !important;
4396
- }
4397
-
4398
- .text-amber50,
4399
- .hover-text-amber50:hover {
4400
- color: var(--amber50) !important;
4401
- }
4402
-
4403
- .text-amber100,
4404
- .hover-text-amber100:hover {
4405
- color: var(--amber100) !important;
4406
- }
4407
-
4408
- .text-amber200,
4409
- .hover-text-amber200:hover {
4410
- color: var(--amber200) !important;
4411
- }
4412
-
4413
- .text-amber300,
4414
- .hover-text-amber300:hover {
4415
- color: var(--amber300) !important;
4416
- }
4417
-
4418
- .text-amber400,
4419
- .hover-text-amber400:hover {
4420
- color: var(--amber400) !important;
4421
- }
4422
-
4423
- .text-amber500,
4424
- .hover-text-amber500:hover {
4425
- color: var(--amber500) !important;
4426
- }
4427
-
4428
- .text-amber600,
4429
- .hover-text-amber600:hover {
4430
- color: var(--amber600) !important;
4431
- }
4432
-
4433
- .text-amber700,
4434
- .hover-text-amber700:hover {
4435
- color: var(--amber700) !important;
4436
- }
4437
-
4438
- .text-amber800,
4439
- .hover-text-amber800:hover {
4440
- color: var(--amber800) !important;
4441
- }
4442
-
4443
- .text-amber900,
4444
- .hover-text-amber900:hover {
4445
- color: var(--amber900) !important;
4446
- }
4447
-
4448
- /* Orange Colors */
4449
- .text-orange,
4450
- .hover-text-orange:hover {
4451
- color: var(--orange) !important;
4452
- }
4453
-
4454
- .text-orange50,
4455
- .hover-text-orange50:hover {
4456
- color: var(--orange50) !important;
4457
- }
4458
-
4459
- .text-orange100,
4460
- .hover-text-orange100:hover {
4461
- color: var(--orange100) !important;
4462
- }
4463
-
4464
- .text-orange200,
4465
- .hover-text-orange200:hover {
4466
- color: var(--orange200) !important;
4467
- }
4468
-
4469
- .text-orange300,
4470
- .hover-text-orange300:hover {
4471
- color: var(--orange300) !important;
4472
- }
4473
-
4474
- .text-orange400,
4475
- .hover-text-orange400:hover {
4476
- color: var(--orange400) !important;
4477
- }
4478
-
4479
- .text-orange500,
4480
- .hover-text-orange500:hover {
4481
- color: var(--orange500) !important;
4482
- }
4483
-
4484
- .text-orange600,
4485
- .hover-text-orange600:hover {
4486
- color: var(--orange600) !important;
4487
- }
4488
-
4489
- .text-orange700,
4490
- .hover-text-orange700:hover {
4491
- color: var(--orange700) !important;
4492
- }
4493
-
4494
- .text-orange800,
4495
- .hover-text-orange800:hover {
4496
- color: var(--orange800) !important;
1316
+ /* Success Colors */
1317
+ .text-success,
1318
+ .hover-text-success:hover {
1319
+ color: var(--success) !important;
4497
1320
  }
4498
1321
 
4499
- .text-orange900,
4500
- .hover-text-orange900:hover {
4501
- color: var(--orange900) !important;
4502
- }
4503
- /* Red Colors */
4504
- .text-red,
4505
- .hover-text-red:hover {
4506
- color: var(--red) !important;
1322
+ .text-success50,
1323
+ .hover-text-success50:hover {
1324
+ color: var(--success50) !important;
4507
1325
  }
4508
1326
 
4509
- .text-red50,
4510
- .hover-text-red50:hover {
4511
- color: var(--red50) !important;
1327
+ .text-success100,
1328
+ .hover-text-success100:hover {
1329
+ color: var(--success100) !important;
4512
1330
  }
4513
1331
 
4514
- .text-red100,
4515
- .hover-text-red100:hover {
4516
- color: var(--red100) !important;
1332
+ .text-success200,
1333
+ .hover-text-success200:hover {
1334
+ color: var(--success200) !important;
4517
1335
  }
4518
1336
 
4519
- .text-red200,
4520
- .hover-text-red200:hover {
4521
- color: var(--red200) !important;
1337
+ .text-success300,
1338
+ .hover-text-success300:hover {
1339
+ color: var(--success300) !important;
4522
1340
  }
4523
1341
 
4524
- .text-red300,
4525
- .hover-text-red300:hover {
4526
- color: var(--red300) !important;
1342
+ .text-success400,
1343
+ .hover-text-success400:hover {
1344
+ color: var(--success400) !important;
4527
1345
  }
4528
1346
 
4529
- .text-red400,
4530
- .hover-text-red400:hover {
4531
- color: var(--red400) !important;
1347
+ .text-success500,
1348
+ .hover-text-success500:hover {
1349
+ color: var(--success500) !important;
4532
1350
  }
4533
1351
 
4534
- .text-red500,
4535
- .hover-text-red500:hover {
4536
- color: var(--red500) !important;
1352
+ .text-success600,
1353
+ .hover-text-success600:hover {
1354
+ color: var(--success600) !important;
4537
1355
  }
4538
1356
 
4539
- .text-red600,
4540
- .hover-text-red600:hover {
4541
- color: var(--red600) !important;
1357
+ .text-success700,
1358
+ .hover-text-success700:hover {
1359
+ color: var(--success700) !important;
4542
1360
  }
4543
1361
 
4544
- .text-red700,
4545
- .hover-text-red700:hover {
4546
- color: var(--red700) !important;
1362
+ .text-success800,
1363
+ .hover-text-success800:hover {
1364
+ color: var(--success800) !important;
4547
1365
  }
4548
1366
 
4549
- .text-red800,
4550
- .hover-text-red800:hover {
4551
- color: var(--red800) !important;
1367
+ .text-success900,
1368
+ .hover-text-success900:hover {
1369
+ color: var(--success900) !important;
4552
1370
  }
4553
1371
 
4554
- .text-red900,
4555
- .hover-text-red900:hover {
4556
- color: var(--red900) !important;
1372
+ /* Warning Colors */
1373
+ .text-warning,
1374
+ .hover-text-warning:hover {
1375
+ color: var(--warning) !important;
4557
1376
  }
4558
1377
 
4559
- /* Warm Gray Colors */
4560
- .text-warmGray,
4561
- .hover-text-warmGray:hover {
4562
- color: var(--warmGray) !important;
1378
+ .text-warning50,
1379
+ .hover-text-warning50:hover {
1380
+ color: var(--warning50) !important;
4563
1381
  }
4564
1382
 
4565
- .text-warmGray50,
4566
- .hover-text-warmGray50:hover {
4567
- color: var(--warmGray50) !important;
1383
+ .text-warning100,
1384
+ .hover-text-warning100:hover {
1385
+ color: var(--warning100) !important;
4568
1386
  }
4569
1387
 
4570
- .text-warmGray100,
4571
- .hover-text-warmGray100:hover {
4572
- color: var(--warmGray100) !important;
1388
+ .text-warning200,
1389
+ .hover-text-warning200:hover {
1390
+ color: var(--warning200) !important;
4573
1391
  }
4574
1392
 
4575
- .text-warmGray200,
4576
- .hover-text-warmGray200:hover {
4577
- color: var(--warmGray200) !important;
1393
+ .text-warning300,
1394
+ .hover-text-warning300:hover {
1395
+ color: var(--warning300) !important;
4578
1396
  }
4579
1397
 
4580
- .text-warmGray300,
4581
- .hover-text-warmGray300:hover {
4582
- color: var(--warmGray300) !important;
1398
+ .text-warning400,
1399
+ .hover-text-warning400:hover {
1400
+ color: var(--warning400) !important;
4583
1401
  }
4584
1402
 
4585
- .text-warmGray400,
4586
- .hover-text-warmGray400:hover {
4587
- color: var(--warmGray400) !important;
1403
+ .text-warning500,
1404
+ .hover-text-warning500:hover {
1405
+ color: var(--warning500) !important;
4588
1406
  }
4589
1407
 
4590
- .text-warmGray500,
4591
- .hover-text-warmGray500:hover {
4592
- color: var(--warmGray500) !important;
1408
+ .text-warning600,
1409
+ .hover-text-warning600:hover {
1410
+ color: var(--warning600) !important;
4593
1411
  }
4594
1412
 
4595
- .text-warmGray600,
4596
- .hover-text-warmGray600:hover {
4597
- color: var(--warmGray600) !important;
1413
+ .text-warning700,
1414
+ .hover-text-warning700:hover {
1415
+ color: var(--warning700) !important;
4598
1416
  }
4599
1417
 
4600
- .text-warmGray700,
4601
- .hover-text-warmGray700:hover {
4602
- color: var(--warmGray700) !important;
1418
+ .text-warning800,
1419
+ .hover-text-warning800:hover {
1420
+ color: var(--warning800) !important;
4603
1421
  }
4604
1422
 
4605
- .text-warmGray800,
4606
- .hover-text-warmGray800:hover {
4607
- color: var(--warmGray800) !important;
1423
+ .text-warning900,
1424
+ .hover-text-warning900:hover {
1425
+ color: var(--warning900) !important;
4608
1426
  }
4609
-
4610
- .text-warmGray900,
4611
- .hover-text-warmGray900:hover {
4612
- color: var(--warmGray900) !important;
1427
+ /* Muted Colors */
1428
+ .text-muted,
1429
+ .hover-text-muted:hover {
1430
+ color: var(--muted) !important;
4613
1431
  }
4614
1432
 
4615
- /* True Gray Colors */
4616
- .text-trueGray,
4617
- .hover-text-trueGray:hover {
4618
- color: var(--trueGray) !important;
1433
+ .text-muted50,
1434
+ .hover-text-muted50:hover {
1435
+ color: var(--muted50) !important;
4619
1436
  }
4620
1437
 
4621
- .text-trueGray50,
4622
- .hover-text-trueGray50:hover {
4623
- color: var(--trueGray50) !important;
1438
+ .text-muted100,
1439
+ .hover-text-muted100:hover {
1440
+ color: var(--muted100) !important;
4624
1441
  }
4625
1442
 
4626
- .text-trueGray100,
4627
- .hover-text-trueGray100:hover {
4628
- color: var(--trueGray100) !important;
1443
+ .text-muted200,
1444
+ .hover-text-muted200:hover {
1445
+ color: var(--muted200) !important;
4629
1446
  }
4630
1447
 
4631
- .text-trueGray200,
4632
- .hover-text-trueGray200:hover {
4633
- color: var(--trueGray200) !important;
1448
+ .text-muted300,
1449
+ .hover-text-muted300:hover {
1450
+ color: var(--muted300) !important;
4634
1451
  }
4635
1452
 
4636
- .text-trueGray300,
4637
- .hover-text-trueGray300:hover {
4638
- color: var(--trueGray300) !important;
1453
+ .text-muted400,
1454
+ .hover-text-muted400:hover {
1455
+ color: var(--muted400) !important;
4639
1456
  }
4640
1457
 
4641
- .text-trueGray400,
4642
- .hover-text-trueGray400:hover {
4643
- color: var(--trueGray400) !important;
1458
+ .text-muted500,
1459
+ .hover-text-muted500:hover {
1460
+ color: var(--muted500) !important;
4644
1461
  }
4645
1462
 
4646
- .text-trueGray500,
4647
- .hover-text-trueGray500:hover {
4648
- color: var(--trueGray500) !important;
1463
+ .text-muted600,
1464
+ .hover-text-muted600:hover {
1465
+ color: var(--muted600) !important;
4649
1466
  }
4650
1467
 
4651
- .text-trueGray600,
4652
- .hover-text-trueGray600:hover {
4653
- color: var(--trueGray600) !important;
1468
+ .text-muted700,
1469
+ .hover-text-muted700:hover {
1470
+ color: var(--muted700) !important;
4654
1471
  }
4655
1472
 
4656
- .text-trueGray700,
4657
- .hover-text-trueGray700:hover {
4658
- color: var(--trueGray700) !important;
1473
+ .text-muted800,
1474
+ .hover-text-muted800:hover {
1475
+ color: var(--muted800) !important;
4659
1476
  }
4660
1477
 
4661
- .text-trueGray800,
4662
- .hover-text-trueGray800:hover {
4663
- color: var(--trueGray800) !important;
1478
+ .text-muted900,
1479
+ .hover-text-muted900:hover {
1480
+ color: var(--muted900) !important;
4664
1481
  }
4665
1482
 
4666
- .text-trueGray900,
4667
- .hover-text-trueGray900:hover {
4668
- color: var(--trueGray900) !important;
1483
+ /* Info Colors */
1484
+ .text-info,
1485
+ .hover-text-info:hover {
1486
+ color: var(--info) !important;
4669
1487
  }
4670
1488
 
4671
- /* Gray Colors */
4672
- .text-gray,
4673
- .hover-text-gray:hover {
4674
- color: var(--gray) !important;
1489
+ .text-info50,
1490
+ .hover-text-info50:hover {
1491
+ color: var(--info50) !important;
4675
1492
  }
4676
1493
 
4677
- .text-gray50,
4678
- .hover-text-gray50:hover {
4679
- color: var(--gray50) !important;
1494
+ .text-info100,
1495
+ .hover-text-info100:hover {
1496
+ color: var(--info100) !important;
4680
1497
  }
4681
1498
 
4682
- .text-gray100,
4683
- .hover-text-gray100:hover {
4684
- color: var(--gray100) !important;
1499
+ .text-info200,
1500
+ .hover-text-info200:hover {
1501
+ color: var(--info200) !important;
4685
1502
  }
4686
1503
 
4687
- .text-gray200,
4688
- .hover-text-gray200:hover {
4689
- color: var(--gray200) !important;
1504
+ .text-info300,
1505
+ .hover-text-info300:hover {
1506
+ color: var(--info300) !important;
4690
1507
  }
4691
1508
 
4692
- .text-gray300,
4693
- .hover-text-gray300:hover {
4694
- color: var(--gray300) !important;
1509
+ .text-info400,
1510
+ .hover-text-info400:hover {
1511
+ color: var(--info400) !important;
4695
1512
  }
4696
1513
 
4697
- .text-gray400,
4698
- .hover-text-gray400:hover {
4699
- color: var(--gray400) !important;
1514
+ .text-info500,
1515
+ .hover-text-info500:hover {
1516
+ color: var(--info500) !important;
4700
1517
  }
4701
1518
 
4702
- .text-gray500,
4703
- .hover-text-gray500:hover {
4704
- color: var(--gray500) !important;
1519
+ .text-info600,
1520
+ .hover-text-info600:hover {
1521
+ color: var(--info600) !important;
4705
1522
  }
4706
1523
 
4707
- .text-gray600,
4708
- .hover-text-gray600:hover {
4709
- color: var(--gray600) !important;
1524
+ .text-info700,
1525
+ .hover-text-info700:hover {
1526
+ color: var(--info700) !important;
4710
1527
  }
4711
1528
 
4712
- .text-gray700,
4713
- .hover-text-gray700:hover {
4714
- color: var(--gray700) !important;
1529
+ .text-info800,
1530
+ .hover-text-info800:hover {
1531
+ color: var(--info800) !important;
4715
1532
  }
4716
1533
 
4717
- .text-gray800,
4718
- .hover-text-gray800:hover {
4719
- color: var(--gray800) !important;
1534
+ .text-info900,
1535
+ .hover-text-info900:hover {
1536
+ color: var(--info900) !important;
4720
1537
  }
4721
1538
 
4722
- .text-gray900,
4723
- .hover-text-gray900:hover {
4724
- color: var(--gray900) !important;
4725
- }
4726
- /* Cool Gray Colors */
4727
- .text-coolGray,
4728
- .hover-text-coolGray:hover {
4729
- color: var(--coolGray) !important;
1539
+ /* Light Colors */
1540
+ .text-light,
1541
+ .hover-text-light:hover {
1542
+ color: var(--light) !important;
4730
1543
  }
4731
1544
 
4732
- .text-coolGray50,
4733
- .hover-text-coolGray50:hover {
4734
- color: var(--coolGray50) !important;
1545
+ .text-light50,
1546
+ .hover-text-light50:hover {
1547
+ color: var(--light50) !important;
4735
1548
  }
4736
1549
 
4737
- .text-coolGray100,
4738
- .hover-text-coolGray100:hover {
4739
- color: var(--coolGray100) !important;
1550
+ .text-light100,
1551
+ .hover-text-light100:hover {
1552
+ color: var(--light100) !important;
4740
1553
  }
4741
1554
 
4742
- .text-coolGray200,
4743
- .hover-text-coolGray200:hover {
4744
- color: var(--coolGray200) !important;
1555
+ .text-light200,
1556
+ .hover-text-light200:hover {
1557
+ color: var(--light200) !important;
4745
1558
  }
4746
1559
 
4747
- .text-coolGray300,
4748
- .hover-text-coolGray300:hover {
4749
- color: var(--coolGray300) !important;
1560
+ .text-light300,
1561
+ .hover-text-light300:hover {
1562
+ color: var(--light300) !important;
4750
1563
  }
4751
1564
 
4752
- .text-coolGray400,
4753
- .hover-text-coolGray400:hover {
4754
- color: var(--coolGray400) !important;
1565
+ .text-light400,
1566
+ .hover-text-light400:hover {
1567
+ color: var(--light400) !important;
4755
1568
  }
4756
1569
 
4757
- .text-coolGray500,
4758
- .hover-text-coolGray500:hover {
4759
- color: var(--coolGray500) !important;
1570
+ .text-light500,
1571
+ .hover-text-light500:hover {
1572
+ color: var(--light500) !important;
4760
1573
  }
4761
1574
 
4762
- .text-coolGray600,
4763
- .hover-text-coolGray600:hover {
4764
- color: var(--coolGray600) !important;
1575
+ .text-light600,
1576
+ .hover-text-light600:hover {
1577
+ color: var(--light600) !important;
4765
1578
  }
4766
1579
 
4767
- .text-coolGray700,
4768
- .hover-text-coolGray700:hover {
4769
- color: var(--coolGray700) !important;
1580
+ .text-light700,
1581
+ .hover-text-light700:hover {
1582
+ color: var(--light700) !important;
4770
1583
  }
4771
1584
 
4772
- .text-coolGray800,
4773
- .hover-text-coolGray800:hover {
4774
- color: var(--coolGray800) !important;
1585
+ .text-light800,
1586
+ .hover-text-light800:hover {
1587
+ color: var(--light800) !important;
4775
1588
  }
4776
1589
 
4777
- .text-coolGray900,
4778
- .hover-text-coolGray900:hover {
4779
- color: var(--coolGray900) !important;
1590
+ .text-light900,
1591
+ .hover-text-light900:hover {
1592
+ color: var(--light900) !important;
4780
1593
  }
4781
1594
 
4782
- /* Blue Gray Colors */
4783
- .text-blueGray,
4784
- .hover-text-blueGray:hover {
4785
- color: var(--blueGray) !important;
1595
+ /* Rose Colors */
1596
+ .text-rose,
1597
+ .hover-text-rose:hover {
1598
+ color: var(--rose) !important;
4786
1599
  }
4787
1600
 
4788
- .text-blueGray50,
4789
- .hover-text-blueGray50:hover {
4790
- color: var(--blueGray50) !important;
1601
+ .text-rose50,
1602
+ .hover-text-rose50:hover {
1603
+ color: var(--rose50) !important;
4791
1604
  }
4792
1605
 
4793
- .text-blueGray100,
4794
- .hover-text-blueGray100:hover {
4795
- color: var(--blueGray100) !important;
1606
+ .text-rose100,
1607
+ .hover-text-rose100:hover {
1608
+ color: var(--rose100) !important;
4796
1609
  }
4797
1610
 
4798
- .text-blueGray200,
4799
- .hover-text-blueGray200:hover {
4800
- color: var(--blueGray200) !important;
1611
+ .text-rose200,
1612
+ .hover-text-rose200:hover {
1613
+ color: var(--rose200) !important;
4801
1614
  }
4802
1615
 
4803
- .text-blueGray300,
4804
- .hover-text-blueGray300:hover {
4805
- color: var(--blueGray300) !important;
1616
+ .text-rose300,
1617
+ .hover-text-rose300:hover {
1618
+ color: var(--rose300) !important;
4806
1619
  }
4807
1620
 
4808
- .text-blueGray400,
4809
- .hover-text-blueGray400:hover {
4810
- color: var(--blueGray400) !important;
1621
+ .text-rose400,
1622
+ .hover-text-rose400:hover {
1623
+ color: var(--rose400) !important;
4811
1624
  }
4812
1625
 
4813
- .text-blueGray500,
4814
- .hover-text-blueGray500:hover {
4815
- color: var(--blueGray500) !important;
1626
+ .text-rose500,
1627
+ .hover-text-rose500:hover {
1628
+ color: var(--rose500) !important;
4816
1629
  }
4817
1630
 
4818
- .text-blueGray600,
4819
- .hover-text-blueGray600:hover {
4820
- color: var(--blueGray600) !important;
1631
+ .text-rose600,
1632
+ .hover-text-rose600:hover {
1633
+ color: var(--rose600) !important;
4821
1634
  }
4822
1635
 
4823
- .text-blueGray700,
4824
- .hover-text-blueGray700:hover {
4825
- color: var(--blueGray700) !important;
1636
+ .text-rose700,
1637
+ .hover-text-rose700:hover {
1638
+ color: var(--rose700) !important;
4826
1639
  }
4827
1640
 
4828
- .text-blueGray800,
4829
- .hover-text-blueGray800:hover {
4830
- color: var(--blueGray800) !important;
1641
+ .text-rose800,
1642
+ .hover-text-rose800:hover {
1643
+ color: var(--rose800) !important;
4831
1644
  }
4832
1645
 
4833
- .text-blueGray900,
4834
- .hover-text-blueGray900:hover {
4835
- color: var(--blueGray900) !important;
1646
+ .text-rose900,
1647
+ .hover-text-rose900:hover {
1648
+ color: var(--rose900) !important;
4836
1649
  }
4837
1650
 
4838
1651
  /* Dark Colors */
@@ -4916,65 +1729,126 @@ link:hover {
4916
1729
  -webkit-background-clip: text;
4917
1730
  }
4918
1731
 
1732
+
1733
+
4919
1734
  /* Typography */
4920
- .uppercase{text-transform: uppercase;}
4921
- .lowercase{text-transform: lowercase;}
4922
- .capitalize{text-transform: capitalize;}
4923
- .text-big , .text-bigger , .text-jumbo{
4924
- line-height: normal;
4925
- font-weight: 900;
1735
+ body {
1736
+ font-size: var(--text-base);
1737
+ line-height: 1.5rem;
1738
+ letter-spacing: normal;
4926
1739
  }
4927
- .monospace{
4928
- font-family:monospace !important;
1740
+
1741
+ /* Font utilities with matching line heights */
1742
+ .text-xs {
1743
+ font-size: var(--text-xs);
1744
+ line-height: var(--leading-xs);
4929
1745
  }
4930
1746
 
4931
- .text-big {
4932
- font-size: calc(1.375rem + 2vw);
1747
+ .text-sm {
1748
+ font-size: var(--text-sm);
1749
+ line-height: var(--leading-sm);
4933
1750
  }
4934
- .text-small {
4935
- font-size: var(--smallFont) ;
1751
+
1752
+ .text-base {
1753
+ font-size: var(--text-base);
1754
+ line-height: var(--leading-base);
4936
1755
  }
4937
- .text-smaller {
4938
- font-size: var(--smallerFont) ;
1756
+
1757
+ .text-lg {
1758
+ font-size: var(--text-lg);
1759
+ line-height: var(--leading-lg);
4939
1760
  }
4940
- .text-minified{
4941
- font-size: var(--minifiedFontSize);
1761
+
1762
+ .text-xl {
1763
+ font-size: var(--text-xl);
1764
+ line-height: var(--leading-xl);
4942
1765
  }
4943
- .article{
4944
- line-height: 1.7rem;
4945
- letter-spacing: normal;
1766
+
1767
+ .text-2xl {
1768
+ font-size: var(--text-2xl);
1769
+ line-height: var(--leading-2xl);
4946
1770
  }
4947
- body{
4948
- line-height: normal;
4949
- letter-spacing: normal;
1771
+
1772
+ .text-3xl {
1773
+ font-size: var(--text-3xl);
1774
+ line-height: var(--leading-3xl);
1775
+ }
1776
+
1777
+ .text-4xl {
1778
+ font-size: var(--text-4xl);
1779
+ line-height: var(--leading-4xl);
1780
+ }
1781
+
1782
+ .text-5xl {
1783
+ font-size: var(--text-5xl);
1784
+ line-height: var(--leading-5xl);
1785
+ }
1786
+ .text-6xl {
1787
+ font-size: var(--text-6xl);
1788
+ line-height: var(--leading-6xl);
1789
+ }
1790
+
1791
+ .text-7xl {
1792
+ font-size: var(--text-7xl);
1793
+ line-height: var(--leading-7xl);
1794
+ }
1795
+
1796
+ .text-8xl {
1797
+ font-size: var(--text-8xl);
1798
+ line-height: var(--leading-8xl);
4950
1799
  }
1800
+
1801
+ .text-9xl {
1802
+ font-size: var(--text-9xl);
1803
+ line-height: var(--leading-9xl);
1804
+ }
1805
+
1806
+ .text-10xl {
1807
+ font-size: var(--text-10xl);
1808
+ line-height: var(--leading-10xl);
1809
+ }
1810
+
1811
+ /* Additional responsive/animated sizes */
1812
+ .text-big {
1813
+ font-size: calc(1.375rem + 2vw); /* Responsive scaling */
1814
+ line-height: calc(1.5rem + 2vw);
1815
+ }
1816
+
4951
1817
  .text-bigger {
4952
1818
  font-size: calc(1.375rem + 2.5vw);
1819
+ line-height: calc(1.5rem + 2.5vw);
4953
1820
  }
4954
1821
 
4955
1822
  .text-jumbo {
4956
- font-size: calc(1.375rem + 3.5vw);
1823
+ font-size: calc(1.375rem + 5vw);
1824
+ line-height: calc(1.5rem + 5.5vw);
4957
1825
  }
4958
- .text-bold {
4959
- font-weight: bold !important;
4960
- }
4961
- .text-bolder {
4962
- font-weight: bolder !important;
4963
- }
4964
- .lightText{
4965
- font-weight: 300 !important;
1826
+
1827
+ /* Mini sizes */
1828
+ .text-small {
1829
+ font-size: var(--smallFont);
1830
+ line-height: 1.25rem;
4966
1831
  }
4967
1832
 
4968
- .lighterText{
4969
- font-weight: 200 !important;
1833
+ .text-smaller {
1834
+ font-size: var(--smallerFont);
1835
+ line-height: 1.125rem;
4970
1836
  }
4971
- .underlineText{
4972
- text-decoration: underline;
1837
+
1838
+ .text-minified {
1839
+ font-size: var(--minifiedFontSize);
1840
+ line-height: 1rem;
4973
1841
  }
4974
- .emp{font-style: italic;}
4975
- .italicText{
4976
- font-style: italic;
1842
+
1843
+ /* Content formatting */
1844
+ .article {
1845
+ line-height: 1.7rem;
1846
+ letter-spacing: normal;
4977
1847
  }
1848
+
1849
+
1850
+
1851
+ /* Headings */
4978
1852
  h6,
4979
1853
  .h6,
4980
1854
  h5,
@@ -4990,62 +1864,66 @@ h1,
4990
1864
  margin-top: 0;
4991
1865
  margin-bottom: 0.3rem;
4992
1866
  line-height: 1.2;
4993
- font-weight: 300;
1867
+ font-weight: normal;
4994
1868
  }
4995
1869
 
4996
- h1,
4997
- .h1 {
4998
- font-size: calc(1.375rem + 1.5vw);
1870
+ h1, .h1 {
1871
+ font-size: var(--text-5xl);
1872
+ line-height: var(--leading-none);
4999
1873
  }
5000
- @media (min-width: 1200px) {
5001
- h1,
5002
- .h1 {
5003
- font-size: 2.5rem;
5004
- }
1874
+
1875
+ h2, .h2 {
1876
+ font-size: var(--text-4xl);
1877
+ line-height: var(--leading-4xl);
5005
1878
  }
5006
1879
 
5007
- h2,
5008
- .h2 {
5009
- font-size: calc(1.325rem + 0.9vw);
1880
+ h3, .h3 {
1881
+ font-size: var(--text-3xl);
1882
+ line-height: var(--leading-3xl);
5010
1883
  }
5011
- @media (min-width: 1200px) {
5012
- h2,
5013
- .h2 {
5014
- font-size: 2rem;
5015
- }
1884
+
1885
+ h4, .h4 {
1886
+ font-size: var(--text-2xl);
1887
+ line-height: var(--leading-2xl);
5016
1888
  }
5017
1889
 
5018
- h3,
5019
- .h3 {
5020
- font-size: calc(1.3rem + 0.6vw);
1890
+ h5, .h5 {
1891
+ font-size: var(--text-xl);
1892
+ line-height: var(--leading-xl);
5021
1893
  }
5022
- @media (min-width: 1200px) {
5023
- h3,
5024
- .h3 {
5025
- font-size: 1.75rem;
5026
- }
1894
+
1895
+ h6, .h6 {
1896
+ font-size: var(--text-base);
1897
+ line-height: var(--leading-normal);
5027
1898
  }
5028
1899
 
5029
- h4,
5030
- .h4 {
5031
- font-size: calc(1.275rem + 0.3vw);
1900
+
1901
+
1902
+ .text-bold {
1903
+ font-weight: bold !important;
5032
1904
  }
5033
- @media (min-width: 1200px) {
5034
- h4,
5035
- .h4 {
5036
- font-size: 1.5rem;
5037
- }
1905
+ .text-bolder {
1906
+ font-weight: bolder !important;
5038
1907
  }
5039
-
5040
- h5,
5041
- .h5 {
5042
- font-size: 1.25rem;
1908
+ .lightText{
1909
+ font-weight: 300 !important;
5043
1910
  }
5044
1911
 
5045
- h6,
5046
- .h6 {
5047
- font-size: 1rem;
1912
+ .lighterText{
1913
+ font-weight: 200 !important;
1914
+ }
1915
+ .underlineText{
1916
+ text-decoration: underline;
5048
1917
  }
1918
+ .emp{font-style: italic;}
1919
+ .italicText{
1920
+ font-style: italic;
1921
+ }
1922
+ .uppercase{text-transform: uppercase;}
1923
+ .lowercase{text-transform: lowercase;}
1924
+ .capitalize{text-transform: capitalize;}
1925
+ .monospace{font-family:monospace !important;}
1926
+
5049
1927
 
5050
1928
 
5051
1929
  /*Helpers*/
@@ -5430,12 +2308,36 @@ h6,
5430
2308
  padding:0.6rem 1rem;
5431
2309
  background-color: inherit;
5432
2310
  border-radius: var(--InputButtonBorderRadius);
5433
- transition:0.5s linear;
2311
+ transition: all 0.5s linear;
5434
2312
  cursor: pointer;
5435
2313
  font-size: var(--minifiedFontSize);
2314
+ position: relative;
2315
+ overflow: hidden;
2316
+ font-weight: bold;
5436
2317
  }
5437
2318
 
5438
2319
 
2320
+ /* Ripple effect */
2321
+ .button::after {
2322
+ content: '';
2323
+ position: absolute;
2324
+ border-radius: 50%;
2325
+ transform: scale(0);
2326
+ background: rgba(0, 0, 0, 0.1); /* dark ripple with opacity */
2327
+ width: 100%;
2328
+ height: 100%;
2329
+ top: 0;
2330
+ left: 0;
2331
+ opacity: 0;
2332
+ pointer-events: none;
2333
+ transition: transform 0.1s ease, opacity 1s ease;
2334
+ }
2335
+
2336
+ .button:active::after {
2337
+ transform: scale(2);
2338
+ opacity: 1;
2339
+ transition: 0s;
2340
+ }
5439
2341
 
5440
2342
  .button-fill {
5441
2343
  background-color: transparent;
@@ -5536,16 +2438,16 @@ h6,
5536
2438
  padding: 0.2rem 0.7rem !important;
5537
2439
  }
5538
2440
  .button.bigBtn {
5539
- padding: 1rem ;
5540
- font-size: 1.2rem;
2441
+ padding: 1rem 1.5rem ;
2442
+ font-size: var(--text-xl);
5541
2443
  }
5542
2444
  .button.biggerBtn {
5543
- padding: 1.2rem ;
5544
- font-size: 1.3rem;
2445
+ padding: 1.2rem 1.8rem;
2446
+ font-size: var(--text-2xl);
5545
2447
  }
5546
2448
  .button.jumboBtn {
5547
- padding: 1.5rem ;
5548
- font-size: 1.5rem;
2449
+ padding: 2rem 2.5rem;
2450
+ font-size: var(--text-4xl);
5549
2451
  }
5550
2452
 
5551
2453
 
@@ -6037,6 +2939,38 @@ h6,
6037
2939
  cursor: pointer !important;
6038
2940
  z-index: 2;
6039
2941
  }
2942
+
2943
+
2944
+ ._upload_container {
2945
+ border: 0.17rem dashed #ccc;
2946
+ border-radius: 16px;
2947
+ padding: var(--space-5);
2948
+ text-align: center;
2949
+ transition: border-color 0.3s ease;
2950
+ cursor: pointer;
2951
+ margin: auto;
2952
+ }
2953
+
2954
+ ._upload_container:hover {
2955
+ border-color: var(--primary);
2956
+ background-color: var(--primary50);
2957
+ }
2958
+
2959
+ ._upload_label {
2960
+ display: block;
2961
+ cursor: pointer;
2962
+ }
2963
+
2964
+ ._upload_icon {
2965
+ font-size: 2.4rem;
2966
+ color: var(--primary);
2967
+ margin-bottom: 0.5rem;
2968
+ }
2969
+
2970
+ ._upload_input {
2971
+ display: none;
2972
+ }
2973
+
6040
2974
  .input.success-input{
6041
2975
  border-bottom:var(--inputBorder) solid var(--success) !important;
6042
2976
  }
@@ -6764,7 +3698,7 @@ filter: brightness(90%);
6764
3698
  color: var(--dark900);
6765
3699
  text-align: center;
6766
3700
  border-radius: var(--DefaultBorderRadius);
6767
- padding: 0.5rem;
3701
+ padding: 0.2rem 0.5rem;
6768
3702
  position: absolute;
6769
3703
  z-index: 5;
6770
3704
  transition: 0.3s;
@@ -7082,39 +4016,95 @@ background-color: rgba(0, 0, 0, 0.2);
7082
4016
 
7083
4017
 
7084
4018
  /* width */
7085
- .width{width:var(--width)}
7086
- .max-width{max-width:var(--maxWidth)}
7087
- .min-width{min-width:var(--minWidth)}
7088
- .width-10-p {
7089
- width: 10% !important;
7090
- }
7091
- .width-20-p {
7092
- width: 20% !important;
7093
- }
7094
- .width-30-p {
7095
- width: 30% !important;
7096
- }
7097
- .width-40-p {
7098
- width: 40% !important;
7099
- }
7100
- .width-50-p {
7101
- width: 50% !important;
7102
- }
7103
- .width-60-p {
7104
- width: 60% !important;
7105
- }
7106
- .width-70-p {
7107
- width: 70% !important;
7108
- }
7109
- .width-80-p {
7110
- width: 80% !important;
7111
- }
7112
- .width-90-p {
7113
- width: 90% !important;
7114
- }
7115
- .width-100-p {
7116
- width: 100%;
7117
- }
4019
+ .w-vw{ width: 100vw !important; }
4020
+ .min-w-vw { min-width: 100vw !important; }
4021
+ .min-h-vh { min-height: 100vh !important; }
4022
+
4023
+ .width-10-p { width: 10% !important; }
4024
+ .width-20-p { width: 20% !important; }
4025
+ .width-30-p { width: 30% !important; }
4026
+ .width-40-p { width: 40% !important; }
4027
+ .width-50-p { width: 50% !important; }
4028
+ .width-60-p { width: 60% !important; }
4029
+ .width-70-p { width: 70% !important; }
4030
+ .width-80-p { width: 80% !important; }
4031
+ .width-90-p { width: 90% !important; }
4032
+ .width-100-p { width: 100% !important; }
4033
+
4034
+ .w-10-p { width: 10% !important; }
4035
+ .w-20-p { width: 20% !important; }
4036
+ .w-30-p { width: 30% !important; }
4037
+ .w-40-p { width: 40% !important; }
4038
+ .w-50-p { width: 50% !important; }
4039
+ .w-60-p { width: 60% !important; }
4040
+ .w-70-p { width: 70% !important; }
4041
+ .w-80-p { width: 80% !important; }
4042
+ .w-90-p { width: 90% !important; }
4043
+ .w-100-p { width: 100% !important; }
4044
+
4045
+
4046
+ .w-10 { width: 0.625rem !important; }
4047
+ .w-20 { width: 1.25rem !important; }
4048
+ .w-30 { width: 1.875rem !important; }
4049
+ .w-40 { width: 2.5rem !important; }
4050
+ .w-50 { width: 3.125rem !important; }
4051
+ .w-60 { width: 3.75rem !important; }
4052
+ .w-70 { width: 4.375rem !important; }
4053
+ .w-80 { width: 5rem !important; }
4054
+ .w-90 { width: 5.625rem !important; }
4055
+ .w-100 { width: 6.25rem !important; }
4056
+ .w-200 { width: 12.5rem !important; }
4057
+ .w-300 { width: 18.75rem !important; }
4058
+ .w-400 { width: 25rem !important; }
4059
+ .w-500 { width: 31.25rem !important; }
4060
+ .w-600 { width: 37.5rem !important; }
4061
+ .w-700 { width: 43.75rem !important; }
4062
+ .w-800 { width: 50rem !important; }
4063
+ .w-900 { width: 56.25rem !important; }
4064
+ .w-1000 { width: 62.5rem !important; }
4065
+
4066
+
4067
+ /* Max-width and Min-width */
4068
+ .max-w-10 { max-width: 0.625rem !important; }
4069
+ .max-w-20 { max-width: 1.25rem !important; }
4070
+ .max-w-30 { max-width: 1.875rem !important; }
4071
+ .max-w-40 { max-width: 2.5rem !important; }
4072
+ .max-w-50 { max-width: 3.125rem !important; }
4073
+ .max-w-60 { max-width: 3.75rem !important; }
4074
+ .max-w-70 { max-width: 4.375rem !important; }
4075
+ .max-w-80 { max-width: 5rem !important; }
4076
+ .max-w-90 { max-width: 5.625rem !important; }
4077
+ .max-w-100 { max-width: 6.25rem !important; }
4078
+ .max-w-200 { max-width: 12.5rem !important; }
4079
+ .max-w-300 { max-width: 18.75rem !important; }
4080
+ .max-w-400 { max-width: 25rem !important; }
4081
+ .max-w-500 { max-width: 31.25rem !important; }
4082
+ .max-w-600 { max-width: 37.5rem !important; }
4083
+ .max-w-700 { max-width: 43.75rem !important; }
4084
+ .max-w-800 { max-width: 50rem !important; }
4085
+ .max-w-900 { max-width: 56.25rem !important; }
4086
+ .max-w-1000 { max-width: 62.5rem !important; }
4087
+
4088
+ .min-w-10 { min-width: 0.625rem !important; }
4089
+ .min-w-20 { min-width: 1.25rem !important; }
4090
+ .min-w-30 { min-width: 1.875rem !important; }
4091
+ .min-w-40 { min-width: 2.5rem !important; }
4092
+ .min-w-50 { min-width: 3.125rem !important; }
4093
+ .min-w-60 { min-width: 3.75rem !important; }
4094
+ .min-w-70 { min-width: 4.375rem !important; }
4095
+ .min-w-80 { min-width: 5rem !important; }
4096
+ .min-w-90 { min-width: 5.625rem !important; }
4097
+ .min-w-100 { min-width: 6.25rem !important; }
4098
+ .min-w-200 { min-width: 12.5rem !important; }
4099
+ .min-w-300 { min-width: 18.75rem !important; }
4100
+ .min-w-400 { min-width: 25rem !important; }
4101
+ .min-w-500 { min-width: 31.25rem !important; }
4102
+ .min-w-600 { min-width: 37.5rem !important; }
4103
+ .min-w-700 { min-width: 43.75rem !important; }
4104
+ .min-w-800 { min-width: 50rem !important; }
4105
+ .min-w-900 { min-width: 56.25rem !important; }
4106
+ .min-w-1000 { min-width: 62.5rem !important; }
4107
+
7118
4108
  .width-10 {
7119
4109
  width: 10px;
7120
4110
  }
@@ -7391,8 +4381,85 @@ background-color: rgba(0, 0, 0, 0.2);
7391
4381
 
7392
4382
  /*Heights*/
7393
4383
  .height{height:var(--height)}
7394
- .max-height{max-height:var(--maxHeight)}
7395
- .min-height{min-height:var(--minHeight)}
4384
+ .w-vw { width: 100vw !important; }
4385
+ .h-vh { height: 100vh !important; }
4386
+ .min-h-vh {min-height: 100vh !important;}
4387
+ .max-h-vh { max-height: 100vh !important; }
4388
+
4389
+ /* Max-height */
4390
+ .max-h-10 { max-height: 0.625rem !important; }
4391
+ .max-h-20 { max-height: 1.25rem !important; }
4392
+ .max-h-30 { max-height: 1.875rem !important; }
4393
+ .max-h-40 { max-height: 2.5rem !important; }
4394
+ .max-h-50 { max-height: 3.125rem !important; }
4395
+ .max-h-60 { max-height: 3.75rem !important; }
4396
+ .max-h-70 { max-height: 4.375rem !important; }
4397
+ .max-h-80 { max-height: 5rem !important; }
4398
+ .max-h-90 { max-height: 5.625rem !important; }
4399
+ .max-h-100 { max-height: 6.25rem !important; }
4400
+ .max-h-200 { max-height: 12.5rem !important; }
4401
+ .max-h-300 { max-height: 18.75rem !important; }
4402
+ .max-h-400 { max-height: 25rem !important; }
4403
+ .max-h-500 { max-height: 31.25rem !important; }
4404
+ .max-h-600 { max-height: 37.5rem !important; }
4405
+ .max-h-700 { max-height: 43.75rem !important; }
4406
+ .max-h-800 { max-height: 50rem !important; }
4407
+ .max-h-900 { max-height: 56.25rem !important; }
4408
+
4409
+ /* min height */
4410
+ .min-h-10 { min-height: 0.625rem !important; }
4411
+ .min-h-20 { min-height: 1.25rem !important; }
4412
+ .min-h-30 { min-height: 1.875rem !important; }
4413
+ .min-h-40 { min-height: 2.5rem !important; }
4414
+ .min-h-50 { min-height: 3.125rem !important; }
4415
+ .min-h-60 { min-height: 3.75rem !important; }
4416
+ .min-h-70 { min-height: 4.375rem !important; }
4417
+ .min-h-80 { min-height: 5rem !important; }
4418
+ .min-h-90 { min-height: 5.625rem !important; }
4419
+ .min-h-100 { min-height: 6.25rem !important; }
4420
+ .min-h-200 { min-height: 12.5rem !important; }
4421
+ .min-h-300 { min-height: 18.75rem !important; }
4422
+ .min-h-400 { min-height: 25rem !important; }
4423
+ .min-h-500 { min-height: 31.25rem !important; }
4424
+ .min-h-600 { min-height: 37.5rem !important; }
4425
+ .min-h-700 { min-height: 43.75rem !important; }
4426
+ .min-h-800 { min-height: 50rem !important; }
4427
+ .min-h-900 { min-height: 56.25rem !important; }
4428
+
4429
+ /* height */
4430
+ .h-10 { height: 0.625rem !important; }
4431
+ .h-20 { height: 1.25rem !important; }
4432
+ .h-30 { height: 1.875rem !important; }
4433
+ .h-40 { height: 2.5rem !important; }
4434
+ .h-50 { height: 3.125rem !important; }
4435
+ .h-60 { height: 3.75rem !important; }
4436
+ .h-70 { height: 4.375rem !important; }
4437
+ .h-80 { height: 5rem !important; }
4438
+ .h-90 { height: 5.625rem !important; }
4439
+ .h-100 { height: 6.25rem !important; }
4440
+ .h-200 { height: 12.5rem !important; }
4441
+ .h-300 { height: 18.75rem !important; }
4442
+ .h-400 { height: 25rem !important; }
4443
+ .h-500 { height: 31.25rem !important; }
4444
+ .h-600 { height: 37.5rem !important; }
4445
+ .h-700 { height: 43.75rem !important; }
4446
+ .h-800 { height: 50rem !important; }
4447
+ .h-900 { height: 56.25rem !important; }
4448
+ .h-1000 { height: 62.5rem !important; }
4449
+
4450
+ /* percentage */
4451
+ .h-10-p { height: 10% !important; }
4452
+ .h-20-p { height: 20% !important; }
4453
+ .h-30-p { height: 30% !important; }
4454
+ .h-40-p { height: 40% !important; }
4455
+ .h-50-p { height: 50% !important; }
4456
+ .h-60-p { height: 60% !important; }
4457
+ .h-70-p { height: 70% !important; }
4458
+ .h-80-p { height: 80% !important; }
4459
+ .h-90-p { height: 90% !important; }
4460
+ .h-100-p { height: 100% !important; }
4461
+
4462
+
7396
4463
  .height-10-p {
7397
4464
  height: 10%;
7398
4465
  }
@@ -7771,8 +4838,194 @@ background-color: rgba(0, 0, 0, 0.2);
7771
4838
  .margin-right-100 {
7772
4839
  margin-bottom: 100px;
7773
4840
  }
4841
+
4842
+ /* --------- MARGIN --------- */
4843
+ .m-0 { margin: var(--space-0) !important; }
4844
+ .m-1 { margin: var(--space-1) !important; }
4845
+ .m-2 { margin: var(--space-2) !important; }
4846
+ .m-3 { margin: var(--space-3) !important; }
4847
+ .m-4 { margin: var(--space-4) !important; }
4848
+ .m-5 { margin: var(--space-5) !important; }
4849
+ .m-6 { margin: var(--space-6) !important; }
4850
+ .m-8 { margin: var(--space-8) !important; }
4851
+ .m-10 { margin: var(--space-10) !important; }
4852
+ .m-12 { margin: var(--space-12) !important; }
4853
+ .m-16 { margin: var(--space-16) !important; }
4854
+ .m-20 { margin: var(--space-20) !important; }
4855
+
4856
+ .mt-0 { margin-top: var(--space-0) !important; }
4857
+ .mt-1 { margin-top: var(--space-1) !important; }
4858
+ .mt-2 { margin-top: var(--space-2) !important; }
4859
+ .mt-3 { margin-top: var(--space-3) !important; }
4860
+ .mt-4 { margin-top: var(--space-4) !important; }
4861
+ .mt-5 { margin-top: var(--space-5) !important; }
4862
+ .mt-6 { margin-top: var(--space-6) !important; }
4863
+ .mt-8 { margin-top: var(--space-8) !important; }
4864
+ .mt-10 { margin-top: var(--space-10) !important; }
4865
+ .mt-12 { margin-top: var(--space-12) !important; }
4866
+ .mt-16 { margin-top: var(--space-16) !important; }
4867
+ .mt-20 { margin-top: var(--space-20) !important; }
4868
+
4869
+ .mr-0 { margin-right: var(--space-0) !important; }
4870
+ .mr-1 { margin-right: var(--space-1) !important; }
4871
+ .mr-2 { margin-right: var(--space-2) !important; }
4872
+ .mr-3 { margin-right: var(--space-3) !important; }
4873
+ .mr-4 { margin-right: var(--space-4) !important; }
4874
+ .mr-5 { margin-right: var(--space-5) !important; }
4875
+ .mr-6 { margin-right: var(--space-6) !important; }
4876
+ .mr-8 { margin-right: var(--space-8) !important; }
4877
+ .mr-10 { margin-right: var(--space-10) !important; }
4878
+ .mr-12 { margin-right: var(--space-12) !important; }
4879
+ .mr-16 { margin-right: var(--space-16) !important; }
4880
+ .mr-20 { margin-right: var(--space-20) !important; }
4881
+
4882
+ .mb-0 { margin-bottom: var(--space-0) !important; }
4883
+ .mb-1 { margin-bottom: var(--space-1) !important; }
4884
+ .mb-2 { margin-bottom: var(--space-2) !important; }
4885
+ .mb-3 { margin-bottom: var(--space-3) !important; }
4886
+ .mb-4 { margin-bottom: var(--space-4) !important; }
4887
+ .mb-5 { margin-bottom: var(--space-5) !important; }
4888
+ .mb-6 { margin-bottom: var(--space-6) !important; }
4889
+ .mb-8 { margin-bottom: var(--space-8) !important; }
4890
+ .mb-10 { margin-bottom: var(--space-10) !important; }
4891
+ .mb-12 { margin-bottom: var(--space-12) !important; }
4892
+ .mb-16 { margin-bottom: var(--space-16) !important; }
4893
+ .mb-20 { margin-bottom: var(--space-20) !important; }
4894
+
4895
+ .ml-0 { margin-left: var(--space-0) !important; }
4896
+ .ml-1 { margin-left: var(--space-1) !important; }
4897
+ .ml-2 { margin-left: var(--space-2) !important; }
4898
+ .ml-3 { margin-left: var(--space-3) !important; }
4899
+ .ml-4 { margin-left: var(--space-4) !important; }
4900
+ .ml-5 { margin-left: var(--space-5) !important; }
4901
+ .ml-6 { margin-left: var(--space-6) !important; }
4902
+ .ml-8 { margin-left: var(--space-8) !important; }
4903
+ .ml-10 { margin-left: var(--space-10) !important; }
4904
+ .ml-12 { margin-left: var(--space-12) !important; }
4905
+ .ml-16 { margin-left: var(--space-16) !important; }
4906
+ .ml-20 { margin-left: var(--space-20) !important; }
4907
+ .mt-0- { margin-top: calc(var(--space-0) * -1) !important; }
4908
+ .mt-1- { margin-top: calc(var(--space-1) * -1) !important; }
4909
+ .mt-2- { margin-top: calc(var(--space-2) * -1) !important; }
4910
+ .mt-3- { margin-top: calc(var(--space-3) * -1) !important; }
4911
+ .mt-4- { margin-top: calc(var(--space-4) * -1) !important; }
4912
+ .mt-5- { margin-top: calc(var(--space-5) * -1) !important; }
4913
+ .mt-6- { margin-top: calc(var(--space-6) * -1) !important; }
4914
+ .mt-8- { margin-top: calc(var(--space-8) * -1) !important; }
4915
+ .mt-10- { margin-top: calc(var(--space-10) * -1) !important; }
4916
+ .mt-12- { margin-top: calc(var(--space-12) * -1) !important; }
4917
+ .mt-16- { margin-top: calc(var(--space-16) * -1) !important; }
4918
+ .mt-20- { margin-top: calc(var(--space-20) * -1) !important; }
4919
+
4920
+ .mr-0- { margin-right: calc(var(--space-0) * -1) !important; }
4921
+ .mr-1- { margin-right: calc(var(--space-1) * -1) !important; }
4922
+ .mr-2- { margin-right: calc(var(--space-2) * -1) !important; }
4923
+ .mr-3- { margin-right: calc(var(--space-3) * -1) !important; }
4924
+ .mr-4- { margin-right: calc(var(--space-4) * -1) !important; }
4925
+ .mr-5- { margin-right: calc(var(--space-5) * -1) !important; }
4926
+ .mr-6- { margin-right: calc(var(--space-6) * -1) !important; }
4927
+ .mr-8- { margin-right: calc(var(--space-8) * -1) !important; }
4928
+ .mr-10- { margin-right: calc(var(--space-10) * -1) !important; }
4929
+ .mr-12- { margin-right: calc(var(--space-12) * -1) !important; }
4930
+ .mr-16- { margin-right: calc(var(--space-16) * -1) !important; }
4931
+ .mr-20- { margin-right: calc(var(--space-20) * -1) !important; }
4932
+
4933
+ .mb-0- { margin-bottom: calc(var(--space-0) * -1) !important; }
4934
+ .mb-1- { margin-bottom: calc(var(--space-1) * -1) !important; }
4935
+ .mb-2- { margin-bottom: calc(var(--space-2) * -1) !important; }
4936
+ .mb-3- { margin-bottom: calc(var(--space-3) * -1) !important; }
4937
+ .mb-4- { margin-bottom: calc(var(--space-4) * -1) !important; }
4938
+ .mb-5- { margin-bottom: calc(var(--space-5) * -1) !important; }
4939
+ .mb-6- { margin-bottom: calc(var(--space-6) * -1) !important; }
4940
+ .mb-8- { margin-bottom: calc(var(--space-8) * -1) !important; }
4941
+ .mb-10- { margin-bottom: calc(var(--space-10) * -1) !important; }
4942
+ .mb-12- { margin-bottom: calc(var(--space-12) * -1) !important; }
4943
+ .mb-16- { margin-bottom: calc(var(--space-16) * -1) !important; }
4944
+ .mb-20- { margin-bottom: calc(var(--space-20) * -1) !important; }
4945
+
4946
+ .ml-0- { margin-left: calc(var(--space-0) * -1) !important; }
4947
+ .ml-1- { margin-left: calc(var(--space-1) * -1) !important; }
4948
+ .ml-2- { margin-left: calc(var(--space-2) * -1) !important; }
4949
+ .ml-3- { margin-left: calc(var(--space-3) * -1) !important; }
4950
+ .ml-4- { margin-left: calc(var(--space-4) * -1) !important; }
4951
+ .ml-5- { margin-left: calc(var(--space-5) * -1) !important; }
4952
+ .ml-6- { margin-left: calc(var(--space-6) * -1) !important; }
4953
+ .ml-8- { margin-left: calc(var(--space-8) * -1) !important; }
4954
+ .ml-10- { margin-left: calc(var(--space-10) * -1) !important; }
4955
+ .ml-12- { margin-left: calc(var(--space-12) * -1) !important; }
4956
+ .ml-16- { margin-left: calc(var(--space-16) * -1) !important; }
4957
+ .ml-20- { margin-left: calc(var(--space-20) * -1) !important; }
4958
+
4959
+
7774
4960
  /*padding*/
4961
+
4962
+ /* --------- PADDING --------- */
7775
4963
  .padding{padding:var(--padding)}
4964
+ .p-0 { padding: var(--space-0) !important; }
4965
+ .p-1 { padding: var(--space-1) !important; }
4966
+ .p-2 { padding: var(--space-2) !important; }
4967
+ .p-3 { padding: var(--space-3) !important; }
4968
+ .p-4 { padding: var(--space-4) !important; }
4969
+ .p-5 { padding: var(--space-5) !important; }
4970
+ .p-6 { padding: var(--space-6) !important; }
4971
+ .p-8 { padding: var(--space-8) !important; }
4972
+ .p-10 { padding: var(--space-10) !important; }
4973
+ .p-12 { padding: var(--space-12) !important; }
4974
+ .p-16 { padding: var(--space-16) !important; }
4975
+ .p-20 { padding: var(--space-20) !important; }
4976
+
4977
+ .pt-0 { padding-top: var(--space-0) !important; }
4978
+ .pt-1 { padding-top: var(--space-1) !important; }
4979
+ .pt-2 { padding-top: var(--space-2) !important; }
4980
+ .pt-3 { padding-top: var(--space-3) !important; }
4981
+ .pt-4 { padding-top: var(--space-4) !important; }
4982
+ .pt-5 { padding-top: var(--space-5) !important; }
4983
+ .pt-6 { padding-top: var(--space-6) !important; }
4984
+ .pt-8 { padding-top: var(--space-8) !important; }
4985
+ .pt-10 { padding-top: var(--space-10) !important; }
4986
+ .pt-12 { padding-top: var(--space-12) !important; }
4987
+ .pt-16 { padding-top: var(--space-16) !important; }
4988
+ .pt-20 { padding-top: var(--space-20) !important; }
4989
+
4990
+ .pr-0 { padding-right: var(--space-0) !important; }
4991
+ .pr-1 { padding-right: var(--space-1) !important; }
4992
+ .pr-2 { padding-right: var(--space-2) !important; }
4993
+ .pr-3 { padding-right: var(--space-3) !important; }
4994
+ .pr-4 { padding-right: var(--space-4) !important; }
4995
+ .pr-5 { padding-right: var(--space-5) !important; }
4996
+ .pr-6 { padding-right: var(--space-6) !important; }
4997
+ .pr-8 { padding-right: var(--space-8) !important; }
4998
+ .pr-10 { padding-right: var(--space-10) !important; }
4999
+ .pr-12 { padding-right: var(--space-12) !important; }
5000
+ .pr-16 { padding-right: var(--space-16) !important; }
5001
+ .pr-20 { padding-right: var(--space-20) !important; }
5002
+
5003
+ .pb-0 { padding-bottom: var(--space-0) !important; }
5004
+ .pb-1 { padding-bottom: var(--space-1) !important; }
5005
+ .pb-2 { padding-bottom: var(--space-2) !important; }
5006
+ .pb-3 { padding-bottom: var(--space-3) !important; }
5007
+ .pb-4 { padding-bottom: var(--space-4) !important; }
5008
+ .pb-5 { padding-bottom: var(--space-5) !important; }
5009
+ .pb-6 { padding-bottom: var(--space-6) !important; }
5010
+ .pb-8 { padding-bottom: var(--space-8) !important; }
5011
+ .pb-10 { padding-bottom: var(--space-10) !important; }
5012
+ .pb-12 { padding-bottom: var(--space-12) !important; }
5013
+ .pb-16 { padding-bottom: var(--space-16) !important; }
5014
+ .pb-20 { padding-bottom: var(--space-20) !important; }
5015
+
5016
+ .pl-0 { padding-left: var(--space-0) !important; }
5017
+ .pl-1 { padding-left: var(--space-1) !important; }
5018
+ .pl-2 { padding-left: var(--space-2) !important; }
5019
+ .pl-3 { padding-left: var(--space-3) !important; }
5020
+ .pl-4 { padding-left: var(--space-4) !important; }
5021
+ .pl-5 { padding-left: var(--space-5) !important; }
5022
+ .pl-6 { padding-left: var(--space-6) !important; }
5023
+ .pl-8 { padding-left: var(--space-8) !important; }
5024
+ .pl-10 { padding-left: var(--space-10) !important; }
5025
+ .pl-12 { padding-left: var(--space-12) !important; }
5026
+ .pl-16 { padding-left: var(--space-16) !important; }
5027
+ .pl-20 { padding-left: var(--space-20) !important; }
5028
+
7776
5029
  .padding {
7777
5030
  padding: 10px !important;
7778
5031
  }