@kmeltzer127/react-pelcro-js 1.0.0-beta.2

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