SadP0i commited on
Commit
6de701d
1 Parent(s): 2514525

Attempt #2 to hack in dark mode for the page

Browse files
Files changed (2) hide show
  1. index.html +42 -26
  2. styles.css +950 -928
index.html CHANGED
@@ -5,6 +5,17 @@
5
  <meta charset="UTF-8" />
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
  <script>
 
 
 
 
 
 
 
 
 
 
 
8
  function strToHtml(str) {
9
  let parser = new DOMParser();
10
  return parser.parseFromString(str, "text/html");
@@ -222,6 +233,8 @@
222
  result_total_el.style.backgroundColor = "#ef4444"
223
  }
224
 
 
 
225
  const layer_size = ((model_size / 2 ** 30) / model_config["num_hidden_layers"])
226
  const layer_size_el = document.getElementById("layersize");
227
  layer_size_el.innerText = layer_size.toFixed(2)
@@ -242,12 +255,15 @@
242
  </head>
243
 
244
  <body class="p-8">
 
 
 
245
  <div x-data="{ format: 'gguf', context_loc: 'vram' }" class="flex flex-col max-h-screen items-center mt-16 gap-10">
246
  <div style="text-align: center;">
247
- <h1 class="text-xl font-semibold leading-6 text-gray-900">
248
  GGUF Model, Can I split it?
249
  </h1>
250
- <h3 class="font-semibold leading-6 text-gray-900">
251
  Based on <a href="https://huggingface.co/NyxKrage" style="color: blue;">NyxKrage</a>'s <a
252
  href="https://huggingface.co/spaces/NyxKrage/LLM-Model-VRAM-Calculator" style="color: blue;">LLM VRAM
253
  calculator</a>
@@ -257,11 +273,11 @@
257
  <div class="w-auto flex flex-col gap-4">
258
  <div class="relative">
259
  <label for="maxvram"
260
- class="absolute -top-2 left-2 inline-block bg-white px-1 text-xs font-medium text-gray-900">
261
  Max Allocated VRAM
262
  </label>
263
  <input value="24" type="number" name="maxvram" id="maxvram" step="1"
264
- class="block w-full rounded-md border-0 p-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" />
265
  </div>
266
 
267
  <!-- Model Selector -->
@@ -269,11 +285,11 @@
269
 
270
  <div class="flex flex-row gap-4 relative">
271
  <label for="contextsize"
272
- class="absolute -top-2 left-2 inline-block bg-white px-1 text-xs font-medium text-gray-900">
273
  Model (unquantized)
274
  </label>
275
  <div
276
- class="block w-full rounded-md border-0 p-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
277
  x-data="{
278
  open: false,
279
  value: 'Nexusflow/Starling-LM-7B-beta',
@@ -320,29 +336,29 @@
320
  <!-- Context Size Selector -->
321
  <div class="relative">
322
  <label for="contextsize"
323
- class="absolute -top-2 left-2 inline-block bg-white px-1 text-xs font-medium text-gray-900">
324
  Context Size
325
  </label>
326
  <input value="8192" type="number" name="contextsize" id="contextsize" step="1024"
327
- class="block w-full rounded-md border-0 p-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" />
328
  </div>
329
 
330
  <div class="relative">
331
- <label class="absolute -top-2 left-2 inline-block bg-white px-1 text-xs font-medium text-gray-900">Context
332
  offloaded to</label>
333
  <fieldset x-model="context_loc"
334
- class="block w-full rounded-md border-0 p-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
335
  <legend class="sr-only">Context location</legend>
336
  <div class="space-y-4 sm:flex sm:items-center sm:space-x-10 sm:space-y-0">
337
  <div class="flex items-center">
338
  <input id="context-vram" name="context-allocation" type="radio" value="vram" checked
339
  class="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600" />
340
- <label for="context-vram" class="ml-3 block text-sm font-medium leading-6 text-gray-900">VRAM</label>
341
  </div>
342
  <div class="flex items-center">
343
  <input id="context-ram" name="context-allocation" type="radio" value="ram"
344
  class="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600" />
345
- <label for="context-ram" class="ml-3 block text-sm font-medium leading-6 text-gray-900">RAM</label>
346
  </div>
347
  </div>
348
  </fieldset>
@@ -352,11 +368,11 @@
352
  <div x-show="format === 'gguf'" class="relative">
353
  <div class="flex flex-row gap-4">
354
  <label for="contextsize"
355
- class="absolute -top-2 left-2 inline-block bg-white px-1 text-xs font-medium text-gray-900">
356
  Quantization Size
357
  </label>
358
  <div
359
- class="block w-full rounded-md border-0 p-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
360
  x-data="{
361
  open: false,
362
  value: '',
@@ -427,11 +443,11 @@
427
  </div>
428
  <div class="relative">
429
  <label for="batchsize"
430
- class="absolute -top-2 left-2 inline-block bg-white px-1 text-xs font-medium text-gray-900">
431
  Batch Size
432
  </label>
433
  <input value="512" type="number" step="128" id="batchsize"
434
- class="block w-full rounded-md border-0 p-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" />
435
  </div>
436
  </div>
437
  </div>
@@ -443,43 +459,43 @@
443
  </div>
444
  <div class="w-auto flex flex-col gap-4">
445
  <div class="relative">
446
- <label class="absolute -top-2 left-2 inline-block bg-white px-1 text-xs font-medium text-gray-900">
447
  Model Size (GB)
448
  </label>
449
  <div id="resultmodel"
450
- class="block w-full rounded-md border-0 p-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
451
  4.20</div>
452
  </div>
453
  <div class="relative">
454
- <label class="absolute -top-2 left-2 inline-block bg-white px-1 text-xs font-medium text-gray-900">
455
  Context Size (GB)
456
  </label>
457
  <div id="resultcontext"
458
- class="block w-full rounded-md border-0 p-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
459
  6.90</div>
460
  </div>
461
  <div class="relative">
462
- <label class="absolute -top-2 left-2 inline-block bg-white px-1 text-xs font-medium text-gray-900">
463
  Total Size (GB)
464
  </label>
465
  <div id="resulttotal"
466
- class="block w-full rounded-md border-0 p-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
467
  420.69</div>
468
  </div>
469
  <div class="relative">
470
- <label class="absolute -top-2 left-2 inline-block bg-white px-1 text-xs font-medium text-gray-900">
471
  Layer size (GB)
472
  </label>
473
  <div id="layersize"
474
- class="block w-full rounded-md border-0 p-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
475
  42.69</div>
476
  </div>
477
  <div class="relative">
478
- <label class="absolute -top-2 left-2 inline-block bg-white px-1 text-xs font-medium text-gray-900">
479
  Layers offloaded to GPU (out of total)
480
  </label>
481
  <div id="layersoffload"
482
- class="block w-full rounded-md border-0 p-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
483
  42</div>
484
  </div>
485
  </div>
 
5
  <meta charset="UTF-8" />
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
  <script>
8
+ document.addEventListener('DOMContentLoaded', (event) => {
9
+ if (localStorage.getItem('darkMode') === 'enabled') {
10
+ document.body.classList.add('dark-mode');
11
+ }
12
+ });
13
+
14
+ function toggleDarkMode() {
15
+ let isDark = document.body.classList.toggle('dark-mode');
16
+ localStorage.setItem('darkMode', isDark ? 'enabled' : 'disabled');
17
+ }
18
+
19
  function strToHtml(str) {
20
  let parser = new DOMParser();
21
  return parser.parseFromString(str, "text/html");
 
233
  result_total_el.style.backgroundColor = "#ef4444"
234
  }
235
 
236
+ result_total_el.style.color = "#000000"
237
+
238
  const layer_size = ((model_size / 2 ** 30) / model_config["num_hidden_layers"])
239
  const layer_size_el = document.getElementById("layersize");
240
  layer_size_el.innerText = layer_size.toFixed(2)
 
255
  </head>
256
 
257
  <body class="p-8">
258
+ <div>
259
+ <button onclick="toggleDarkMode()">Toggle Dark Mode</button>
260
+ </div>
261
  <div x-data="{ format: 'gguf', context_loc: 'vram' }" class="flex flex-col max-h-screen items-center mt-16 gap-10">
262
  <div style="text-align: center;">
263
+ <h1 class="text-xl font-semibold leading-6">
264
  GGUF Model, Can I split it?
265
  </h1>
266
+ <h3 class="font-semibold leading-6">
267
  Based on <a href="https://huggingface.co/NyxKrage" style="color: blue;">NyxKrage</a>'s <a
268
  href="https://huggingface.co/spaces/NyxKrage/LLM-Model-VRAM-Calculator" style="color: blue;">LLM VRAM
269
  calculator</a>
 
273
  <div class="w-auto flex flex-col gap-4">
274
  <div class="relative">
275
  <label for="maxvram"
276
+ class="absolute -top-2 left-2 inline-block bg-white px-1 text-xs font-medium">
277
  Max Allocated VRAM
278
  </label>
279
  <input value="24" type="number" name="maxvram" id="maxvram" step="1"
280
+ class="block w-full rounded-md border-0 p-3 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" />
281
  </div>
282
 
283
  <!-- Model Selector -->
 
285
 
286
  <div class="flex flex-row gap-4 relative">
287
  <label for="contextsize"
288
+ class="absolute -top-2 left-2 inline-block bg-white px-1 text-xs font-medium">
289
  Model (unquantized)
290
  </label>
291
  <div
292
+ class="block w-full rounded-md border-0 p-3 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
293
  x-data="{
294
  open: false,
295
  value: 'Nexusflow/Starling-LM-7B-beta',
 
336
  <!-- Context Size Selector -->
337
  <div class="relative">
338
  <label for="contextsize"
339
+ class="absolute -top-2 left-2 inline-block bg-white px-1 text-xs font-medium">
340
  Context Size
341
  </label>
342
  <input value="8192" type="number" name="contextsize" id="contextsize" step="1024"
343
+ class="block w-full rounded-md border-0 p-3 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" />
344
  </div>
345
 
346
  <div class="relative">
347
+ <label class="absolute -top-2 left-2 inline-block bg-white px-1 text-xs font-medium">Context
348
  offloaded to</label>
349
  <fieldset x-model="context_loc"
350
+ class="block w-full rounded-md border-0 p-3 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
351
  <legend class="sr-only">Context location</legend>
352
  <div class="space-y-4 sm:flex sm:items-center sm:space-x-10 sm:space-y-0">
353
  <div class="flex items-center">
354
  <input id="context-vram" name="context-allocation" type="radio" value="vram" checked
355
  class="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600" />
356
+ <label for="context-vram" class="ml-3 block text-sm font-medium leading-6">VRAM</label>
357
  </div>
358
  <div class="flex items-center">
359
  <input id="context-ram" name="context-allocation" type="radio" value="ram"
360
  class="h-4 w-4 border-gray-300 text-indigo-600 focus:ring-indigo-600" />
361
+ <label for="context-ram" class="ml-3 block text-sm font-medium leading-6">RAM</label>
362
  </div>
363
  </div>
364
  </fieldset>
 
368
  <div x-show="format === 'gguf'" class="relative">
369
  <div class="flex flex-row gap-4">
370
  <label for="contextsize"
371
+ class="absolute -top-2 left-2 inline-block bg-white px-1 text-xs font-medium">
372
  Quantization Size
373
  </label>
374
  <div
375
+ class="block w-full rounded-md border-0 p-3 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
376
  x-data="{
377
  open: false,
378
  value: '',
 
443
  </div>
444
  <div class="relative">
445
  <label for="batchsize"
446
+ class="absolute -top-2 left-2 inline-block bg-white px-1 text-xs font-medium">
447
  Batch Size
448
  </label>
449
  <input value="512" type="number" step="128" id="batchsize"
450
+ class="block w-full rounded-md border-0 p-3 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" />
451
  </div>
452
  </div>
453
  </div>
 
459
  </div>
460
  <div class="w-auto flex flex-col gap-4">
461
  <div class="relative">
462
+ <label class="absolute -top-2 left-2 inline-block bg-white px-1 text-xs font-medium">
463
  Model Size (GB)
464
  </label>
465
  <div id="resultmodel"
466
+ class="block w-full rounded-md border-0 p-3 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
467
  4.20</div>
468
  </div>
469
  <div class="relative">
470
+ <label class="absolute -top-2 left-2 inline-block bg-white px-1 text-xs font-medium">
471
  Context Size (GB)
472
  </label>
473
  <div id="resultcontext"
474
+ class="block w-full rounded-md border-0 p-3 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
475
  6.90</div>
476
  </div>
477
  <div class="relative">
478
+ <label class="absolute -top-2 left-2 inline-block bg-white px-1 text-xs font-medium">
479
  Total Size (GB)
480
  </label>
481
  <div id="resulttotal"
482
+ class="block w-full rounded-md border-0 p-3 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
483
  420.69</div>
484
  </div>
485
  <div class="relative">
486
+ <label class="absolute -top-2 left-2 inline-block bg-white px-1 text-xs font-medium">
487
  Layer size (GB)
488
  </label>
489
  <div id="layersize"
490
+ class="block w-full rounded-md border-0 p-3 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
491
  42.69</div>
492
  </div>
493
  <div class="relative">
494
+ <label class="absolute -top-2 left-2 inline-block bg-white px-1 text-xs font-medium">
495
  Layers offloaded to GPU (out of total)
496
  </label>
497
  <div id="layersoffload"
498
+ class="block w-full rounded-md border-0 p-3 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
499
  42</div>
500
  </div>
501
  </div>
styles.css CHANGED
@@ -1,928 +1,950 @@
1
- /*
2
- ! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com
3
- */
4
-
5
- /*
6
- 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
7
- 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
8
- */
9
-
10
- *,
11
- ::before,
12
- ::after {
13
- box-sizing: border-box;
14
- /* 1 */
15
- border-width: 0;
16
- /* 2 */
17
- border-style: solid;
18
- /* 2 */
19
- border-color: #e5e7eb;
20
- /* 2 */
21
- }
22
-
23
- ::before,
24
- ::after {
25
- --tw-content: '';
26
- }
27
-
28
- /*
29
- 1. Use a consistent sensible line-height in all browsers.
30
- 2. Prevent adjustments of font size after orientation changes in iOS.
31
- 3. Use a more readable tab size.
32
- 4. Use the user's configured `sans` font-family by default.
33
- 5. Use the user's configured `sans` font-feature-settings by default.
34
- 6. Use the user's configured `sans` font-variation-settings by default.
35
- 7. Disable tap highlights on iOS
36
- */
37
-
38
- html,
39
- :host {
40
- line-height: 1.5;
41
- /* 1 */
42
- -webkit-text-size-adjust: 100%;
43
- /* 2 */
44
- -moz-tab-size: 4;
45
- /* 3 */
46
- -o-tab-size: 4;
47
- tab-size: 4;
48
- /* 3 */
49
- font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
50
- /* 4 */
51
- font-feature-settings: normal;
52
- /* 5 */
53
- font-variation-settings: normal;
54
- /* 6 */
55
- -webkit-tap-highlight-color: transparent;
56
- /* 7 */
57
- }
58
-
59
- /*
60
- 1. Remove the margin in all browsers.
61
- 2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
62
- */
63
-
64
- body {
65
- margin: 0;
66
- /* 1 */
67
- line-height: inherit;
68
- /* 2 */
69
- }
70
-
71
- /*
72
- 1. Add the correct height in Firefox.
73
- 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
74
- 3. Ensure horizontal rules are visible by default.
75
- */
76
-
77
- hr {
78
- height: 0;
79
- /* 1 */
80
- color: inherit;
81
- /* 2 */
82
- border-top-width: 1px;
83
- /* 3 */
84
- }
85
-
86
- /*
87
- Add the correct text decoration in Chrome, Edge, and Safari.
88
- */
89
-
90
- abbr:where([title]) {
91
- -webkit-text-decoration: underline dotted;
92
- text-decoration: underline dotted;
93
- }
94
-
95
- /*
96
- Remove the default font size and weight for headings.
97
- */
98
-
99
- h1,
100
- h2,
101
- h3,
102
- h4,
103
- h5,
104
- h6 {
105
- font-size: inherit;
106
- font-weight: inherit;
107
- }
108
-
109
- /*
110
- Reset links to optimize for opt-in styling instead of opt-out.
111
- */
112
-
113
- a {
114
- color: inherit;
115
- text-decoration: inherit;
116
- }
117
-
118
- /*
119
- Add the correct font weight in Edge and Safari.
120
- */
121
-
122
- b,
123
- strong {
124
- font-weight: bolder;
125
- }
126
-
127
- /*
128
- 1. Use the user's configured `mono` font-family by default.
129
- 2. Use the user's configured `mono` font-feature-settings by default.
130
- 3. Use the user's configured `mono` font-variation-settings by default.
131
- 4. Correct the odd `em` font sizing in all browsers.
132
- */
133
-
134
- code,
135
- kbd,
136
- samp,
137
- pre {
138
- font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
139
- /* 1 */
140
- font-feature-settings: normal;
141
- /* 2 */
142
- font-variation-settings: normal;
143
- /* 3 */
144
- font-size: 1em;
145
- /* 4 */
146
- }
147
-
148
- /*
149
- Add the correct font size in all browsers.
150
- */
151
-
152
- small {
153
- font-size: 80%;
154
- }
155
-
156
- /*
157
- Prevent `sub` and `sup` elements from affecting the line height in all browsers.
158
- */
159
-
160
- sub,
161
- sup {
162
- font-size: 75%;
163
- line-height: 0;
164
- position: relative;
165
- vertical-align: baseline;
166
- }
167
-
168
- sub {
169
- bottom: -0.25em;
170
- }
171
-
172
- sup {
173
- top: -0.5em;
174
- }
175
-
176
- /*
177
- 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
178
- 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
179
- 3. Remove gaps between table borders by default.
180
- */
181
-
182
- table {
183
- text-indent: 0;
184
- /* 1 */
185
- border-color: inherit;
186
- /* 2 */
187
- border-collapse: collapse;
188
- /* 3 */
189
- }
190
-
191
- /*
192
- 1. Change the font styles in all browsers.
193
- 2. Remove the margin in Firefox and Safari.
194
- 3. Remove default padding in all browsers.
195
- */
196
-
197
- button,
198
- input,
199
- optgroup,
200
- select,
201
- textarea {
202
- font-family: inherit;
203
- /* 1 */
204
- font-feature-settings: inherit;
205
- /* 1 */
206
- font-variation-settings: inherit;
207
- /* 1 */
208
- font-size: 100%;
209
- /* 1 */
210
- font-weight: inherit;
211
- /* 1 */
212
- line-height: inherit;
213
- /* 1 */
214
- color: inherit;
215
- /* 1 */
216
- margin: 0;
217
- /* 2 */
218
- padding: 0;
219
- /* 3 */
220
- }
221
-
222
- /*
223
- Remove the inheritance of text transform in Edge and Firefox.
224
- */
225
-
226
- button,
227
- select {
228
- text-transform: none;
229
- }
230
-
231
- /*
232
- 1. Correct the inability to style clickable types in iOS and Safari.
233
- 2. Remove default button styles.
234
- */
235
-
236
- button,
237
- [type='button'],
238
- [type='reset'],
239
- [type='submit'] {
240
- -webkit-appearance: button;
241
- /* 1 */
242
- background-color: transparent;
243
- /* 2 */
244
- background-image: none;
245
- /* 2 */
246
- }
247
-
248
- /*
249
- Use the modern Firefox focus style for all focusable elements.
250
- */
251
-
252
- :-moz-focusring {
253
- outline: auto;
254
- }
255
-
256
- /*
257
- Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
258
- */
259
-
260
- :-moz-ui-invalid {
261
- box-shadow: none;
262
- }
263
-
264
- /*
265
- Add the correct vertical alignment in Chrome and Firefox.
266
- */
267
-
268
- progress {
269
- vertical-align: baseline;
270
- }
271
-
272
- /*
273
- Correct the cursor style of increment and decrement buttons in Safari.
274
- */
275
-
276
- ::-webkit-inner-spin-button,
277
- ::-webkit-outer-spin-button {
278
- height: auto;
279
- }
280
-
281
- /*
282
- 1. Correct the odd appearance in Chrome and Safari.
283
- 2. Correct the outline style in Safari.
284
- */
285
-
286
- [type='search'] {
287
- -webkit-appearance: textfield;
288
- /* 1 */
289
- outline-offset: -2px;
290
- /* 2 */
291
- }
292
-
293
- /*
294
- Remove the inner padding in Chrome and Safari on macOS.
295
- */
296
-
297
- ::-webkit-search-decoration {
298
- -webkit-appearance: none;
299
- }
300
-
301
- /*
302
- 1. Correct the inability to style clickable types in iOS and Safari.
303
- 2. Change font properties to `inherit` in Safari.
304
- */
305
-
306
- ::-webkit-file-upload-button {
307
- -webkit-appearance: button;
308
- /* 1 */
309
- font: inherit;
310
- /* 2 */
311
- }
312
-
313
- /*
314
- Add the correct display in Chrome and Safari.
315
- */
316
-
317
- summary {
318
- display: list-item;
319
- }
320
-
321
- /*
322
- Removes the default spacing and border for appropriate elements.
323
- */
324
-
325
- blockquote,
326
- dl,
327
- dd,
328
- h1,
329
- h2,
330
- h3,
331
- h4,
332
- h5,
333
- h6,
334
- hr,
335
- figure,
336
- p,
337
- pre {
338
- margin: 0;
339
- }
340
-
341
- fieldset {
342
- margin: 0;
343
- padding: 0;
344
- }
345
-
346
- legend {
347
- padding: 0;
348
- }
349
-
350
- ol,
351
- ul,
352
- menu {
353
- list-style: none;
354
- margin: 0;
355
- padding: 0;
356
- }
357
-
358
- /*
359
- Reset default styling for dialogs.
360
- */
361
-
362
- dialog {
363
- padding: 0;
364
- }
365
-
366
- /*
367
- Prevent resizing textareas horizontally by default.
368
- */
369
-
370
- textarea {
371
- resize: vertical;
372
- }
373
-
374
- /*
375
- 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
376
- 2. Set the default placeholder color to the user's configured gray 400 color.
377
- */
378
-
379
- input::-moz-placeholder, textarea::-moz-placeholder {
380
- opacity: 1;
381
- /* 1 */
382
- color: #9ca3af;
383
- /* 2 */
384
- }
385
-
386
- input::placeholder,
387
- textarea::placeholder {
388
- opacity: 1;
389
- /* 1 */
390
- color: #9ca3af;
391
- /* 2 */
392
- }
393
-
394
- /*
395
- Set the default cursor for buttons.
396
- */
397
-
398
- button,
399
- [role="button"] {
400
- cursor: pointer;
401
- }
402
-
403
- /*
404
- Make sure disabled buttons don't get the pointer cursor.
405
- */
406
-
407
- :disabled {
408
- cursor: default;
409
- }
410
-
411
- /*
412
- 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
413
- 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
414
- This can trigger a poorly considered lint error in some tools but is included by design.
415
- */
416
-
417
- img,
418
- svg,
419
- video,
420
- canvas,
421
- audio,
422
- iframe,
423
- embed,
424
- object {
425
- display: block;
426
- /* 1 */
427
- vertical-align: middle;
428
- /* 2 */
429
- }
430
-
431
- /*
432
- Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
433
- */
434
-
435
- img,
436
- video {
437
- max-width: 100%;
438
- height: auto;
439
- }
440
-
441
- /* Make elements with the HTML hidden attribute stay hidden by default */
442
-
443
- [hidden] {
444
- display: none;
445
- }
446
-
447
- *, ::before, ::after {
448
- --tw-border-spacing-x: 0;
449
- --tw-border-spacing-y: 0;
450
- --tw-translate-x: 0;
451
- --tw-translate-y: 0;
452
- --tw-rotate: 0;
453
- --tw-skew-x: 0;
454
- --tw-skew-y: 0;
455
- --tw-scale-x: 1;
456
- --tw-scale-y: 1;
457
- --tw-pan-x: ;
458
- --tw-pan-y: ;
459
- --tw-pinch-zoom: ;
460
- --tw-scroll-snap-strictness: proximity;
461
- --tw-gradient-from-position: ;
462
- --tw-gradient-via-position: ;
463
- --tw-gradient-to-position: ;
464
- --tw-ordinal: ;
465
- --tw-slashed-zero: ;
466
- --tw-numeric-figure: ;
467
- --tw-numeric-spacing: ;
468
- --tw-numeric-fraction: ;
469
- --tw-ring-inset: ;
470
- --tw-ring-offset-width: 0px;
471
- --tw-ring-offset-color: #fff;
472
- --tw-ring-color: rgb(59 130 246 / 0.5);
473
- --tw-ring-offset-shadow: 0 0 #0000;
474
- --tw-ring-shadow: 0 0 #0000;
475
- --tw-shadow: 0 0 #0000;
476
- --tw-shadow-colored: 0 0 #0000;
477
- --tw-blur: ;
478
- --tw-brightness: ;
479
- --tw-contrast: ;
480
- --tw-grayscale: ;
481
- --tw-hue-rotate: ;
482
- --tw-invert: ;
483
- --tw-saturate: ;
484
- --tw-sepia: ;
485
- --tw-drop-shadow: ;
486
- --tw-backdrop-blur: ;
487
- --tw-backdrop-brightness: ;
488
- --tw-backdrop-contrast: ;
489
- --tw-backdrop-grayscale: ;
490
- --tw-backdrop-hue-rotate: ;
491
- --tw-backdrop-invert: ;
492
- --tw-backdrop-opacity: ;
493
- --tw-backdrop-saturate: ;
494
- --tw-backdrop-sepia: ;
495
- }
496
-
497
- ::backdrop {
498
- --tw-border-spacing-x: 0;
499
- --tw-border-spacing-y: 0;
500
- --tw-translate-x: 0;
501
- --tw-translate-y: 0;
502
- --tw-rotate: 0;
503
- --tw-skew-x: 0;
504
- --tw-skew-y: 0;
505
- --tw-scale-x: 1;
506
- --tw-scale-y: 1;
507
- --tw-pan-x: ;
508
- --tw-pan-y: ;
509
- --tw-pinch-zoom: ;
510
- --tw-scroll-snap-strictness: proximity;
511
- --tw-gradient-from-position: ;
512
- --tw-gradient-via-position: ;
513
- --tw-gradient-to-position: ;
514
- --tw-ordinal: ;
515
- --tw-slashed-zero: ;
516
- --tw-numeric-figure: ;
517
- --tw-numeric-spacing: ;
518
- --tw-numeric-fraction: ;
519
- --tw-ring-inset: ;
520
- --tw-ring-offset-width: 0px;
521
- --tw-ring-offset-color: #fff;
522
- --tw-ring-color: rgb(59 130 246 / 0.5);
523
- --tw-ring-offset-shadow: 0 0 #0000;
524
- --tw-ring-shadow: 0 0 #0000;
525
- --tw-shadow: 0 0 #0000;
526
- --tw-shadow-colored: 0 0 #0000;
527
- --tw-blur: ;
528
- --tw-brightness: ;
529
- --tw-contrast: ;
530
- --tw-grayscale: ;
531
- --tw-hue-rotate: ;
532
- --tw-invert: ;
533
- --tw-saturate: ;
534
- --tw-sepia: ;
535
- --tw-drop-shadow: ;
536
- --tw-backdrop-blur: ;
537
- --tw-backdrop-brightness: ;
538
- --tw-backdrop-contrast: ;
539
- --tw-backdrop-grayscale: ;
540
- --tw-backdrop-hue-rotate: ;
541
- --tw-backdrop-invert: ;
542
- --tw-backdrop-opacity: ;
543
- --tw-backdrop-saturate: ;
544
- --tw-backdrop-sepia: ;
545
- }
546
-
547
- .sr-only {
548
- position: absolute;
549
- width: 1px;
550
- height: 1px;
551
- padding: 0;
552
- margin: -1px;
553
- overflow: hidden;
554
- clip: rect(0, 0, 0, 0);
555
- white-space: nowrap;
556
- border-width: 0;
557
- }
558
-
559
- .absolute {
560
- position: absolute;
561
- }
562
-
563
- .relative {
564
- position: relative;
565
- }
566
-
567
- .-top-2 {
568
- top: -0.5rem;
569
- }
570
-
571
- .left-0 {
572
- left: 0px;
573
- }
574
-
575
- .left-2 {
576
- left: 0.5rem;
577
- }
578
-
579
- .z-10 {
580
- z-index: 10;
581
- }
582
-
583
- .ml-3 {
584
- margin-left: 0.75rem;
585
- }
586
-
587
- .mt-16 {
588
- margin-top: 4rem;
589
- }
590
-
591
- .mt-4 {
592
- margin-top: 1rem;
593
- }
594
-
595
- .block {
596
- display: block;
597
- }
598
-
599
- .inline-block {
600
- display: inline-block;
601
- }
602
-
603
- .flex {
604
- display: flex;
605
- }
606
-
607
- .table {
608
- display: table;
609
- }
610
-
611
- .hidden {
612
- display: none;
613
- }
614
-
615
- .h-4 {
616
- height: 1rem;
617
- }
618
-
619
- .h-5 {
620
- height: 1.25rem;
621
- }
622
-
623
- .h-full {
624
- height: 100%;
625
- }
626
-
627
- .max-h-screen {
628
- max-height: 100vh;
629
- }
630
-
631
- .w-4 {
632
- width: 1rem;
633
- }
634
-
635
- .w-5 {
636
- width: 1.25rem;
637
- }
638
-
639
- .w-auto {
640
- width: auto;
641
- }
642
-
643
- .w-fit {
644
- width: -moz-fit-content;
645
- width: fit-content;
646
- }
647
-
648
- .w-full {
649
- width: 100%;
650
- }
651
-
652
- .flex-shrink {
653
- flex-shrink: 1;
654
- }
655
-
656
- .flex-grow {
657
- flex-grow: 1;
658
- }
659
-
660
- .cursor-pointer {
661
- cursor: pointer;
662
- }
663
-
664
- .flex-row {
665
- flex-direction: row;
666
- }
667
-
668
- .flex-col {
669
- flex-direction: column;
670
- }
671
-
672
- .items-center {
673
- align-items: center;
674
- }
675
-
676
- .justify-center {
677
- justify-content: center;
678
- }
679
-
680
- .justify-between {
681
- justify-content: space-between;
682
- }
683
-
684
- .gap-10 {
685
- gap: 2.5rem;
686
- }
687
-
688
- .gap-2 {
689
- gap: 0.5rem;
690
- }
691
-
692
- .gap-4 {
693
- gap: 1rem;
694
- }
695
-
696
- .space-y-4 > :not([hidden]) ~ :not([hidden]) {
697
- --tw-space-y-reverse: 0;
698
- margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
699
- margin-bottom: calc(1rem * var(--tw-space-y-reverse));
700
- }
701
-
702
- .rounded-md {
703
- border-radius: 0.375rem;
704
- }
705
-
706
- .border-0 {
707
- border-width: 0px;
708
- }
709
-
710
- .border-gray-300 {
711
- --tw-border-opacity: 1;
712
- border-color: rgb(209 213 219 / var(--tw-border-opacity));
713
- }
714
-
715
- .bg-slate-800 {
716
- --tw-bg-opacity: 1;
717
- background-color: rgb(30 41 59 / var(--tw-bg-opacity));
718
- }
719
-
720
- .bg-white {
721
- --tw-bg-opacity: 1;
722
- background-color: rgb(255 255 255 / var(--tw-bg-opacity));
723
- }
724
-
725
- .p-3 {
726
- padding: 0.75rem;
727
- }
728
-
729
- .p-8 {
730
- padding: 2rem;
731
- }
732
-
733
- .px-1 {
734
- padding-left: 0.25rem;
735
- padding-right: 0.25rem;
736
- }
737
-
738
- .px-3 {
739
- padding-left: 0.75rem;
740
- padding-right: 0.75rem;
741
- }
742
-
743
- .px-4 {
744
- padding-left: 1rem;
745
- padding-right: 1rem;
746
- }
747
-
748
- .py-2 {
749
- padding-top: 0.5rem;
750
- padding-bottom: 0.5rem;
751
- }
752
-
753
- .py-2\.5 {
754
- padding-top: 0.625rem;
755
- padding-bottom: 0.625rem;
756
- }
757
-
758
- .text-left {
759
- text-align: left;
760
- }
761
-
762
- .text-sm {
763
- font-size: 0.875rem;
764
- line-height: 1.25rem;
765
- }
766
-
767
- .text-xl {
768
- font-size: 1.25rem;
769
- line-height: 1.75rem;
770
- }
771
-
772
- .text-xs {
773
- font-size: 0.75rem;
774
- line-height: 1rem;
775
- }
776
-
777
- .font-medium {
778
- font-weight: 500;
779
- }
780
-
781
- .font-semibold {
782
- font-weight: 600;
783
- }
784
-
785
- .leading-6 {
786
- line-height: 1.5rem;
787
- }
788
-
789
- .text-gray-400 {
790
- --tw-text-opacity: 1;
791
- color: rgb(156 163 175 / var(--tw-text-opacity));
792
- }
793
-
794
- .text-gray-900 {
795
- --tw-text-opacity: 1;
796
- color: rgb(17 24 39 / var(--tw-text-opacity));
797
- }
798
-
799
- .text-indigo-600 {
800
- --tw-text-opacity: 1;
801
- color: rgb(79 70 229 / var(--tw-text-opacity));
802
- }
803
-
804
- .text-white {
805
- --tw-text-opacity: 1;
806
- color: rgb(255 255 255 / var(--tw-text-opacity));
807
- }
808
-
809
- .shadow-sm {
810
- --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
811
- --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
812
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
813
- }
814
-
815
- .ring-1 {
816
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
817
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
818
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
819
- }
820
-
821
- .ring-inset {
822
- --tw-ring-inset: inset;
823
- }
824
-
825
- .ring-gray-300 {
826
- --tw-ring-opacity: 1;
827
- --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
828
- }
829
-
830
- .filter {
831
- filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
832
- }
833
-
834
- .placeholder\:text-gray-400::-moz-placeholder {
835
- --tw-text-opacity: 1;
836
- color: rgb(156 163 175 / var(--tw-text-opacity));
837
- }
838
-
839
- .placeholder\:text-gray-400::placeholder {
840
- --tw-text-opacity: 1;
841
- color: rgb(156 163 175 / var(--tw-text-opacity));
842
- }
843
-
844
- .first-of-type\:rounded-t-md:first-of-type {
845
- border-top-left-radius: 0.375rem;
846
- border-top-right-radius: 0.375rem;
847
- }
848
-
849
- .last-of-type\:rounded-b-md:last-of-type {
850
- border-bottom-right-radius: 0.375rem;
851
- border-bottom-left-radius: 0.375rem;
852
- }
853
-
854
- .hover\:bg-gray-500\/5:hover {
855
- background-color: rgb(107 114 128 / 0.05);
856
- }
857
-
858
- .hover\:bg-slate-700:hover {
859
- --tw-bg-opacity: 1;
860
- background-color: rgb(51 65 85 / var(--tw-bg-opacity));
861
- }
862
-
863
- .focus\:ring-2:focus {
864
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
865
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
866
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
867
- }
868
-
869
- .focus\:ring-inset:focus {
870
- --tw-ring-inset: inset;
871
- }
872
-
873
- .focus\:ring-indigo-600:focus {
874
- --tw-ring-opacity: 1;
875
- --tw-ring-color: rgb(79 70 229 / var(--tw-ring-opacity));
876
- }
877
-
878
- .focus-visible\:outline:focus-visible {
879
- outline-style: solid;
880
- }
881
-
882
- .focus-visible\:outline-2:focus-visible {
883
- outline-width: 2px;
884
- }
885
-
886
- .focus-visible\:outline-offset-2:focus-visible {
887
- outline-offset: 2px;
888
- }
889
-
890
- .focus-visible\:outline-indigo-600:focus-visible {
891
- outline-color: #4f46e5;
892
- }
893
-
894
- .disabled\:text-gray-500:disabled {
895
- --tw-text-opacity: 1;
896
- color: rgb(107 114 128 / var(--tw-text-opacity));
897
- }
898
-
899
- @media (min-width: 640px) {
900
- .sm\:flex {
901
- display: flex;
902
- }
903
-
904
- .sm\:items-center {
905
- align-items: center;
906
- }
907
-
908
- .sm\:space-x-10 > :not([hidden]) ~ :not([hidden]) {
909
- --tw-space-x-reverse: 0;
910
- margin-right: calc(2.5rem * var(--tw-space-x-reverse));
911
- margin-left: calc(2.5rem * calc(1 - var(--tw-space-x-reverse)));
912
- }
913
-
914
- .sm\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
915
- --tw-space-y-reverse: 0;
916
- margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
917
- margin-bottom: calc(0px * var(--tw-space-y-reverse));
918
- }
919
-
920
- .sm\:text-sm {
921
- font-size: 0.875rem;
922
- line-height: 1.25rem;
923
- }
924
-
925
- .sm\:leading-6 {
926
- line-height: 1.5rem;
927
- }
928
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /*
2
+ ! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com
3
+ */
4
+
5
+ /*
6
+ 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
7
+ 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
8
+ */
9
+
10
+ *,
11
+ ::before,
12
+ ::after {
13
+ box-sizing: border-box;
14
+ /* 1 */
15
+ border-width: 0;
16
+ /* 2 */
17
+ border-style: solid;
18
+ /* 2 */
19
+ border-color: #e5e7eb;
20
+ /* 2 */
21
+ }
22
+
23
+ ::before,
24
+ ::after {
25
+ --tw-content: '';
26
+ }
27
+
28
+ /*
29
+ 1. Use a consistent sensible line-height in all browsers.
30
+ 2. Prevent adjustments of font size after orientation changes in iOS.
31
+ 3. Use a more readable tab size.
32
+ 4. Use the user's configured `sans` font-family by default.
33
+ 5. Use the user's configured `sans` font-feature-settings by default.
34
+ 6. Use the user's configured `sans` font-variation-settings by default.
35
+ 7. Disable tap highlights on iOS
36
+ */
37
+
38
+ html,
39
+ :host {
40
+ line-height: 1.5;
41
+ /* 1 */
42
+ -webkit-text-size-adjust: 100%;
43
+ /* 2 */
44
+ -moz-tab-size: 4;
45
+ /* 3 */
46
+ -o-tab-size: 4;
47
+ tab-size: 4;
48
+ /* 3 */
49
+ font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
50
+ /* 4 */
51
+ font-feature-settings: normal;
52
+ /* 5 */
53
+ font-variation-settings: normal;
54
+ /* 6 */
55
+ -webkit-tap-highlight-color: transparent;
56
+ /* 7 */
57
+ }
58
+
59
+ /*
60
+ 1. Remove the margin in all browsers.
61
+ 2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
62
+ */
63
+
64
+ body {
65
+ margin: 0;
66
+ /* 1 */
67
+ line-height: inherit;
68
+ /* 2 */
69
+ }
70
+
71
+ /*
72
+ 1. Add the correct height in Firefox.
73
+ 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
74
+ 3. Ensure horizontal rules are visible by default.
75
+ */
76
+
77
+ hr {
78
+ height: 0;
79
+ /* 1 */
80
+ color: inherit;
81
+ /* 2 */
82
+ border-top-width: 1px;
83
+ /* 3 */
84
+ }
85
+
86
+ /*
87
+ Add the correct text decoration in Chrome, Edge, and Safari.
88
+ */
89
+
90
+ abbr:where([title]) {
91
+ -webkit-text-decoration: underline dotted;
92
+ text-decoration: underline dotted;
93
+ }
94
+
95
+ /*
96
+ Remove the default font size and weight for headings.
97
+ */
98
+
99
+ h1,
100
+ h2,
101
+ h3,
102
+ h4,
103
+ h5,
104
+ h6 {
105
+ font-size: inherit;
106
+ font-weight: inherit;
107
+ }
108
+
109
+ /*
110
+ Reset links to optimize for opt-in styling instead of opt-out.
111
+ */
112
+
113
+ a {
114
+ color: inherit;
115
+ text-decoration: inherit;
116
+ }
117
+
118
+ /*
119
+ Add the correct font weight in Edge and Safari.
120
+ */
121
+
122
+ b,
123
+ strong {
124
+ font-weight: bolder;
125
+ }
126
+
127
+ /*
128
+ 1. Use the user's configured `mono` font-family by default.
129
+ 2. Use the user's configured `mono` font-feature-settings by default.
130
+ 3. Use the user's configured `mono` font-variation-settings by default.
131
+ 4. Correct the odd `em` font sizing in all browsers.
132
+ */
133
+
134
+ code,
135
+ kbd,
136
+ samp,
137
+ pre {
138
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
139
+ /* 1 */
140
+ font-feature-settings: normal;
141
+ /* 2 */
142
+ font-variation-settings: normal;
143
+ /* 3 */
144
+ font-size: 1em;
145
+ /* 4 */
146
+ }
147
+
148
+ /*
149
+ Add the correct font size in all browsers.
150
+ */
151
+
152
+ small {
153
+ font-size: 80%;
154
+ }
155
+
156
+ /*
157
+ Prevent `sub` and `sup` elements from affecting the line height in all browsers.
158
+ */
159
+
160
+ sub,
161
+ sup {
162
+ font-size: 75%;
163
+ line-height: 0;
164
+ position: relative;
165
+ vertical-align: baseline;
166
+ }
167
+
168
+ sub {
169
+ bottom: -0.25em;
170
+ }
171
+
172
+ sup {
173
+ top: -0.5em;
174
+ }
175
+
176
+ /*
177
+ 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
178
+ 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
179
+ 3. Remove gaps between table borders by default.
180
+ */
181
+
182
+ table {
183
+ text-indent: 0;
184
+ /* 1 */
185
+ border-color: inherit;
186
+ /* 2 */
187
+ border-collapse: collapse;
188
+ /* 3 */
189
+ }
190
+
191
+ /*
192
+ 1. Change the font styles in all browsers.
193
+ 2. Remove the margin in Firefox and Safari.
194
+ 3. Remove default padding in all browsers.
195
+ */
196
+
197
+ button,
198
+ input,
199
+ optgroup,
200
+ select,
201
+ textarea {
202
+ font-family: inherit;
203
+ /* 1 */
204
+ font-feature-settings: inherit;
205
+ /* 1 */
206
+ font-variation-settings: inherit;
207
+ /* 1 */
208
+ font-size: 100%;
209
+ /* 1 */
210
+ font-weight: inherit;
211
+ /* 1 */
212
+ line-height: inherit;
213
+ /* 1 */
214
+ color: inherit;
215
+ /* 1 */
216
+ margin: 0;
217
+ /* 2 */
218
+ padding: 0;
219
+ /* 3 */
220
+ }
221
+
222
+ /*
223
+ Remove the inheritance of text transform in Edge and Firefox.
224
+ */
225
+
226
+ button,
227
+ select {
228
+ text-transform: none;
229
+ }
230
+
231
+ /*
232
+ 1. Correct the inability to style clickable types in iOS and Safari.
233
+ 2. Remove default button styles.
234
+ */
235
+
236
+ button,
237
+ [type='button'],
238
+ [type='reset'],
239
+ [type='submit'] {
240
+ -webkit-appearance: button;
241
+ /* 1 */
242
+ background-color: transparent;
243
+ /* 2 */
244
+ background-image: none;
245
+ /* 2 */
246
+ }
247
+
248
+ /*
249
+ Use the modern Firefox focus style for all focusable elements.
250
+ */
251
+
252
+ :-moz-focusring {
253
+ outline: auto;
254
+ }
255
+
256
+ /*
257
+ Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
258
+ */
259
+
260
+ :-moz-ui-invalid {
261
+ box-shadow: none;
262
+ }
263
+
264
+ /*
265
+ Add the correct vertical alignment in Chrome and Firefox.
266
+ */
267
+
268
+ progress {
269
+ vertical-align: baseline;
270
+ }
271
+
272
+ /*
273
+ Correct the cursor style of increment and decrement buttons in Safari.
274
+ */
275
+
276
+ ::-webkit-inner-spin-button,
277
+ ::-webkit-outer-spin-button {
278
+ height: auto;
279
+ }
280
+
281
+ /*
282
+ 1. Correct the odd appearance in Chrome and Safari.
283
+ 2. Correct the outline style in Safari.
284
+ */
285
+
286
+ [type='search'] {
287
+ -webkit-appearance: textfield;
288
+ /* 1 */
289
+ outline-offset: -2px;
290
+ /* 2 */
291
+ }
292
+
293
+ /*
294
+ Remove the inner padding in Chrome and Safari on macOS.
295
+ */
296
+
297
+ ::-webkit-search-decoration {
298
+ -webkit-appearance: none;
299
+ }
300
+
301
+ /*
302
+ 1. Correct the inability to style clickable types in iOS and Safari.
303
+ 2. Change font properties to `inherit` in Safari.
304
+ */
305
+
306
+ ::-webkit-file-upload-button {
307
+ -webkit-appearance: button;
308
+ /* 1 */
309
+ font: inherit;
310
+ /* 2 */
311
+ }
312
+
313
+ /*
314
+ Add the correct display in Chrome and Safari.
315
+ */
316
+
317
+ summary {
318
+ display: list-item;
319
+ }
320
+
321
+ /*
322
+ Removes the default spacing and border for appropriate elements.
323
+ */
324
+
325
+ blockquote,
326
+ dl,
327
+ dd,
328
+ h1,
329
+ h2,
330
+ h3,
331
+ h4,
332
+ h5,
333
+ h6,
334
+ hr,
335
+ figure,
336
+ p,
337
+ pre {
338
+ margin: 0;
339
+ }
340
+
341
+ fieldset {
342
+ margin: 0;
343
+ padding: 0;
344
+ }
345
+
346
+ legend {
347
+ padding: 0;
348
+ }
349
+
350
+ ol,
351
+ ul,
352
+ menu {
353
+ list-style: none;
354
+ margin: 0;
355
+ padding: 0;
356
+ }
357
+
358
+ /*
359
+ Reset default styling for dialogs.
360
+ */
361
+
362
+ dialog {
363
+ padding: 0;
364
+ }
365
+
366
+ /*
367
+ Prevent resizing textareas horizontally by default.
368
+ */
369
+
370
+ textarea {
371
+ resize: vertical;
372
+ }
373
+
374
+ /*
375
+ 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
376
+ 2. Set the default placeholder color to the user's configured gray 400 color.
377
+ */
378
+
379
+ input::-moz-placeholder, textarea::-moz-placeholder {
380
+ opacity: 1;
381
+ /* 1 */
382
+ color: #9ca3af;
383
+ /* 2 */
384
+ }
385
+
386
+ input::placeholder,
387
+ textarea::placeholder {
388
+ opacity: 1;
389
+ /* 1 */
390
+ color: #9ca3af;
391
+ /* 2 */
392
+ }
393
+
394
+ /*
395
+ Set the default cursor for buttons.
396
+ */
397
+
398
+ button,
399
+ [role="button"] {
400
+ cursor: pointer;
401
+ }
402
+
403
+ /*
404
+ Make sure disabled buttons don't get the pointer cursor.
405
+ */
406
+
407
+ :disabled {
408
+ cursor: default;
409
+ }
410
+
411
+ /*
412
+ 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
413
+ 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
414
+ This can trigger a poorly considered lint error in some tools but is included by design.
415
+ */
416
+
417
+ img,
418
+ svg,
419
+ video,
420
+ canvas,
421
+ audio,
422
+ iframe,
423
+ embed,
424
+ object {
425
+ display: block;
426
+ /* 1 */
427
+ vertical-align: middle;
428
+ /* 2 */
429
+ }
430
+
431
+ /*
432
+ Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
433
+ */
434
+
435
+ img,
436
+ video {
437
+ max-width: 100%;
438
+ height: auto;
439
+ }
440
+
441
+ /* Make elements with the HTML hidden attribute stay hidden by default */
442
+
443
+ [hidden] {
444
+ display: none;
445
+ }
446
+
447
+ *, ::before, ::after {
448
+ --tw-border-spacing-x: 0;
449
+ --tw-border-spacing-y: 0;
450
+ --tw-translate-x: 0;
451
+ --tw-translate-y: 0;
452
+ --tw-rotate: 0;
453
+ --tw-skew-x: 0;
454
+ --tw-skew-y: 0;
455
+ --tw-scale-x: 1;
456
+ --tw-scale-y: 1;
457
+ --tw-pan-x: ;
458
+ --tw-pan-y: ;
459
+ --tw-pinch-zoom: ;
460
+ --tw-scroll-snap-strictness: proximity;
461
+ --tw-gradient-from-position: ;
462
+ --tw-gradient-via-position: ;
463
+ --tw-gradient-to-position: ;
464
+ --tw-ordinal: ;
465
+ --tw-slashed-zero: ;
466
+ --tw-numeric-figure: ;
467
+ --tw-numeric-spacing: ;
468
+ --tw-numeric-fraction: ;
469
+ --tw-ring-inset: ;
470
+ --tw-ring-offset-width: 0px;
471
+ --tw-ring-offset-color: #fff;
472
+ --tw-ring-color: rgb(59 130 246 / 0.5);
473
+ --tw-ring-offset-shadow: 0 0 #0000;
474
+ --tw-ring-shadow: 0 0 #0000;
475
+ --tw-shadow: 0 0 #0000;
476
+ --tw-shadow-colored: 0 0 #0000;
477
+ --tw-blur: ;
478
+ --tw-brightness: ;
479
+ --tw-contrast: ;
480
+ --tw-grayscale: ;
481
+ --tw-hue-rotate: ;
482
+ --tw-invert: ;
483
+ --tw-saturate: ;
484
+ --tw-sepia: ;
485
+ --tw-drop-shadow: ;
486
+ --tw-backdrop-blur: ;
487
+ --tw-backdrop-brightness: ;
488
+ --tw-backdrop-contrast: ;
489
+ --tw-backdrop-grayscale: ;
490
+ --tw-backdrop-hue-rotate: ;
491
+ --tw-backdrop-invert: ;
492
+ --tw-backdrop-opacity: ;
493
+ --tw-backdrop-saturate: ;
494
+ --tw-backdrop-sepia: ;
495
+ }
496
+
497
+ ::backdrop {
498
+ --tw-border-spacing-x: 0;
499
+ --tw-border-spacing-y: 0;
500
+ --tw-translate-x: 0;
501
+ --tw-translate-y: 0;
502
+ --tw-rotate: 0;
503
+ --tw-skew-x: 0;
504
+ --tw-skew-y: 0;
505
+ --tw-scale-x: 1;
506
+ --tw-scale-y: 1;
507
+ --tw-pan-x: ;
508
+ --tw-pan-y: ;
509
+ --tw-pinch-zoom: ;
510
+ --tw-scroll-snap-strictness: proximity;
511
+ --tw-gradient-from-position: ;
512
+ --tw-gradient-via-position: ;
513
+ --tw-gradient-to-position: ;
514
+ --tw-ordinal: ;
515
+ --tw-slashed-zero: ;
516
+ --tw-numeric-figure: ;
517
+ --tw-numeric-spacing: ;
518
+ --tw-numeric-fraction: ;
519
+ --tw-ring-inset: ;
520
+ --tw-ring-offset-width: 0px;
521
+ --tw-ring-offset-color: #fff;
522
+ --tw-ring-color: rgb(59 130 246 / 0.5);
523
+ --tw-ring-offset-shadow: 0 0 #0000;
524
+ --tw-ring-shadow: 0 0 #0000;
525
+ --tw-shadow: 0 0 #0000;
526
+ --tw-shadow-colored: 0 0 #0000;
527
+ --tw-blur: ;
528
+ --tw-brightness: ;
529
+ --tw-contrast: ;
530
+ --tw-grayscale: ;
531
+ --tw-hue-rotate: ;
532
+ --tw-invert: ;
533
+ --tw-saturate: ;
534
+ --tw-sepia: ;
535
+ --tw-drop-shadow: ;
536
+ --tw-backdrop-blur: ;
537
+ --tw-backdrop-brightness: ;
538
+ --tw-backdrop-contrast: ;
539
+ --tw-backdrop-grayscale: ;
540
+ --tw-backdrop-hue-rotate: ;
541
+ --tw-backdrop-invert: ;
542
+ --tw-backdrop-opacity: ;
543
+ --tw-backdrop-saturate: ;
544
+ --tw-backdrop-sepia: ;
545
+ }
546
+
547
+ .sr-only {
548
+ position: absolute;
549
+ width: 1px;
550
+ height: 1px;
551
+ padding: 0;
552
+ margin: -1px;
553
+ overflow: hidden;
554
+ clip: rect(0, 0, 0, 0);
555
+ white-space: nowrap;
556
+ border-width: 0;
557
+ }
558
+
559
+ .absolute {
560
+ position: absolute;
561
+ }
562
+
563
+ .relative {
564
+ position: relative;
565
+ }
566
+
567
+ .-top-2 {
568
+ top: -0.5rem;
569
+ }
570
+
571
+ .left-0 {
572
+ left: 0px;
573
+ }
574
+
575
+ .left-2 {
576
+ left: 0.5rem;
577
+ }
578
+
579
+ .z-10 {
580
+ z-index: 10;
581
+ }
582
+
583
+ .ml-3 {
584
+ margin-left: 0.75rem;
585
+ }
586
+
587
+ .mt-16 {
588
+ margin-top: 4rem;
589
+ }
590
+
591
+ .mt-4 {
592
+ margin-top: 1rem;
593
+ }
594
+
595
+ .block {
596
+ display: block;
597
+ }
598
+
599
+ .inline-block {
600
+ display: inline-block;
601
+ }
602
+
603
+ .flex {
604
+ display: flex;
605
+ }
606
+
607
+ .table {
608
+ display: table;
609
+ }
610
+
611
+ .hidden {
612
+ display: none;
613
+ }
614
+
615
+ .h-4 {
616
+ height: 1rem;
617
+ }
618
+
619
+ .h-5 {
620
+ height: 1.25rem;
621
+ }
622
+
623
+ .h-full {
624
+ height: 100%;
625
+ }
626
+
627
+ .max-h-screen {
628
+ max-height: 100vh;
629
+ }
630
+
631
+ .w-4 {
632
+ width: 1rem;
633
+ }
634
+
635
+ .w-5 {
636
+ width: 1.25rem;
637
+ }
638
+
639
+ .w-auto {
640
+ width: auto;
641
+ }
642
+
643
+ .w-fit {
644
+ width: -moz-fit-content;
645
+ width: fit-content;
646
+ }
647
+
648
+ .w-full {
649
+ width: 100%;
650
+ }
651
+
652
+ .flex-shrink {
653
+ flex-shrink: 1;
654
+ }
655
+
656
+ .flex-grow {
657
+ flex-grow: 1;
658
+ }
659
+
660
+ .cursor-pointer {
661
+ cursor: pointer;
662
+ }
663
+
664
+ .flex-row {
665
+ flex-direction: row;
666
+ }
667
+
668
+ .flex-col {
669
+ flex-direction: column;
670
+ }
671
+
672
+ .items-center {
673
+ align-items: center;
674
+ }
675
+
676
+ .justify-center {
677
+ justify-content: center;
678
+ }
679
+
680
+ .justify-between {
681
+ justify-content: space-between;
682
+ }
683
+
684
+ .gap-10 {
685
+ gap: 2.5rem;
686
+ }
687
+
688
+ .gap-2 {
689
+ gap: 0.5rem;
690
+ }
691
+
692
+ .gap-4 {
693
+ gap: 1rem;
694
+ }
695
+
696
+ .space-y-4 > :not([hidden]) ~ :not([hidden]) {
697
+ --tw-space-y-reverse: 0;
698
+ margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
699
+ margin-bottom: calc(1rem * var(--tw-space-y-reverse));
700
+ }
701
+
702
+ .rounded-md {
703
+ border-radius: 0.375rem;
704
+ }
705
+
706
+ .border-0 {
707
+ border-width: 0px;
708
+ }
709
+
710
+ .border-gray-300 {
711
+ --tw-border-opacity: 1;
712
+ border-color: rgb(209 213 219 / var(--tw-border-opacity));
713
+ }
714
+
715
+ .bg-slate-800 {
716
+ --tw-bg-opacity: 1;
717
+ background-color: rgb(30 41 59 / var(--tw-bg-opacity));
718
+ }
719
+
720
+ .bg-white {
721
+ --tw-bg-opacity: 1;
722
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity));
723
+ }
724
+
725
+ .p-3 {
726
+ padding: 0.75rem;
727
+ }
728
+
729
+ .p-8 {
730
+ padding: 2rem;
731
+ }
732
+
733
+ .px-1 {
734
+ padding-left: 0.25rem;
735
+ padding-right: 0.25rem;
736
+ }
737
+
738
+ .px-3 {
739
+ padding-left: 0.75rem;
740
+ padding-right: 0.75rem;
741
+ }
742
+
743
+ .px-4 {
744
+ padding-left: 1rem;
745
+ padding-right: 1rem;
746
+ }
747
+
748
+ .py-2 {
749
+ padding-top: 0.5rem;
750
+ padding-bottom: 0.5rem;
751
+ }
752
+
753
+ .py-2\.5 {
754
+ padding-top: 0.625rem;
755
+ padding-bottom: 0.625rem;
756
+ }
757
+
758
+ .text-left {
759
+ text-align: left;
760
+ }
761
+
762
+ .text-sm {
763
+ font-size: 0.875rem;
764
+ line-height: 1.25rem;
765
+ }
766
+
767
+ .text-xl {
768
+ font-size: 1.25rem;
769
+ line-height: 1.75rem;
770
+ }
771
+
772
+ .text-xs {
773
+ font-size: 0.75rem;
774
+ line-height: 1rem;
775
+ }
776
+
777
+ .font-medium {
778
+ font-weight: 500;
779
+ }
780
+
781
+ .font-semibold {
782
+ font-weight: 600;
783
+ }
784
+
785
+ .leading-6 {
786
+ line-height: 1.5rem;
787
+ }
788
+
789
+ .text-gray-400 {
790
+ --tw-text-opacity: 1;
791
+ color: rgb(156 163 175 / var(--tw-text-opacity));
792
+ }
793
+
794
+ .text-gray-900 {
795
+ --tw-text-opacity: 1;
796
+ color: rgb(17 24 39 / var(--tw-text-opacity));
797
+ }
798
+
799
+ .text-indigo-600 {
800
+ --tw-text-opacity: 1;
801
+ color: rgb(79 70 229 / var(--tw-text-opacity));
802
+ }
803
+
804
+ .text-white {
805
+ --tw-text-opacity: 1;
806
+ color: rgb(255 255 255 / var(--tw-text-opacity));
807
+ }
808
+
809
+ .shadow-sm {
810
+ --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
811
+ --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
812
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
813
+ }
814
+
815
+ .ring-1 {
816
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
817
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
818
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
819
+ }
820
+
821
+ .ring-inset {
822
+ --tw-ring-inset: inset;
823
+ }
824
+
825
+ .ring-gray-300 {
826
+ --tw-ring-opacity: 1;
827
+ --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
828
+ }
829
+
830
+ .filter {
831
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
832
+ }
833
+
834
+ .placeholder\:text-gray-400::-moz-placeholder {
835
+ --tw-text-opacity: 1;
836
+ color: rgb(156 163 175 / var(--tw-text-opacity));
837
+ }
838
+
839
+ .placeholder\:text-gray-400::placeholder {
840
+ --tw-text-opacity: 1;
841
+ color: rgb(156 163 175 / var(--tw-text-opacity));
842
+ }
843
+
844
+ .first-of-type\:rounded-t-md:first-of-type {
845
+ border-top-left-radius: 0.375rem;
846
+ border-top-right-radius: 0.375rem;
847
+ }
848
+
849
+ .last-of-type\:rounded-b-md:last-of-type {
850
+ border-bottom-right-radius: 0.375rem;
851
+ border-bottom-left-radius: 0.375rem;
852
+ }
853
+
854
+ .hover\:bg-gray-500\/5:hover {
855
+ background-color: rgb(107 114 128 / 0.05);
856
+ }
857
+
858
+ .hover\:bg-slate-700:hover {
859
+ --tw-bg-opacity: 1;
860
+ background-color: rgb(51 65 85 / var(--tw-bg-opacity));
861
+ }
862
+
863
+ .focus\:ring-2:focus {
864
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
865
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
866
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
867
+ }
868
+
869
+ .focus\:ring-inset:focus {
870
+ --tw-ring-inset: inset;
871
+ }
872
+
873
+ .focus\:ring-indigo-600:focus {
874
+ --tw-ring-opacity: 1;
875
+ --tw-ring-color: rgb(79 70 229 / var(--tw-ring-opacity));
876
+ }
877
+
878
+ .focus-visible\:outline:focus-visible {
879
+ outline-style: solid;
880
+ }
881
+
882
+ .focus-visible\:outline-2:focus-visible {
883
+ outline-width: 2px;
884
+ }
885
+
886
+ .focus-visible\:outline-offset-2:focus-visible {
887
+ outline-offset: 2px;
888
+ }
889
+
890
+ .focus-visible\:outline-indigo-600:focus-visible {
891
+ outline-color: #4f46e5;
892
+ }
893
+
894
+ .disabled\:text-gray-500:disabled {
895
+ --tw-text-opacity: 1;
896
+ color: rgb(107 114 128 / var(--tw-text-opacity));
897
+ }
898
+
899
+ @media (min-width: 640px) {
900
+ .sm\:flex {
901
+ display: flex;
902
+ }
903
+
904
+ .sm\:items-center {
905
+ align-items: center;
906
+ }
907
+
908
+ .sm\:space-x-10 > :not([hidden]) ~ :not([hidden]) {
909
+ --tw-space-x-reverse: 0;
910
+ margin-right: calc(2.5rem * var(--tw-space-x-reverse));
911
+ margin-left: calc(2.5rem * calc(1 - var(--tw-space-x-reverse)));
912
+ }
913
+
914
+ .sm\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
915
+ --tw-space-y-reverse: 0;
916
+ margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
917
+ margin-bottom: calc(0px * var(--tw-space-y-reverse));
918
+ }
919
+
920
+ .sm\:text-sm {
921
+ font-size: 0.875rem;
922
+ line-height: 1.25rem;
923
+ }
924
+
925
+ .sm\:leading-6 {
926
+ line-height: 1.5rem;
927
+ }
928
+ }
929
+
930
+ :root {
931
+ --background-color-light: #ffffff;
932
+ --text-color-light: #000000;
933
+ --background-color-dark: #121212;
934
+ --text-color-dark: #ffffff;
935
+ }
936
+
937
+ .dark-mode {
938
+ background-color: var(--background-color-dark);
939
+ color: var(--text-color-dark);
940
+
941
+ input, textarea {
942
+ background-color: var(--background-color-dark);
943
+ color: var(--text-color-dark);
944
+ }
945
+
946
+ .bg-white {
947
+ --tw-bg-opacity: 1;
948
+ background-color: var(--background-color-dark);
949
+ }
950
+ }