@pzh-ui/css 0.0.64 → 0.0.65

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.
package/src/tailwind.css CHANGED
@@ -1226,6 +1226,329 @@ select {
1226
1226
  --tw-prose-invert-td-borders: #404040;
1227
1227
  }
1228
1228
 
1229
+ /*
1230
+ * Form elements
1231
+ */
1232
+
1233
+ .pzh-button {
1234
+ display: inline-block;
1235
+ border-radius: 0.25rem;
1236
+ line-height: 1;
1237
+ --tw-ring-offset-width: 2px;
1238
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
1239
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
1240
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
1241
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1242
+ transition-duration: 200ms;
1243
+ transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
1244
+ }
1245
+
1246
+ .pzh-button:focus {
1247
+ outline: 2px solid transparent;
1248
+ outline-offset: 2px;
1249
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1250
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1251
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1252
+ --tw-ring-opacity: 1;
1253
+ --tw-ring-color: rgb(22 17 59 / var(--tw-ring-opacity));
1254
+ }
1255
+
1256
+ .pzh-button:disabled {
1257
+ cursor: not-allowed;
1258
+ --tw-bg-opacity: 1;
1259
+ background-color: rgb(235 235 235 / var(--tw-bg-opacity));
1260
+ color: rgb(22 17 59 / var(--tw-text-opacity));
1261
+ --tw-text-opacity: 0.35;
1262
+ }
1263
+
1264
+ .pzh-form-input {
1265
+ display: block;
1266
+ width: 100%;
1267
+ -webkit-appearance: none;
1268
+ -moz-appearance: none;
1269
+ appearance: none;
1270
+ border-radius: 0.25rem;
1271
+ border-width: 1px;
1272
+ --tw-border-opacity: 1;
1273
+ border-color: rgb(138 136 157 / var(--tw-border-opacity));
1274
+ padding-top: 10px;
1275
+ padding-bottom: 6px;
1276
+ line-height: 30px;
1277
+ --tw-text-opacity: 1;
1278
+ color: rgb(22 17 59 / var(--tw-text-opacity));
1279
+ }
1280
+
1281
+ .pzh-form-input::-moz-placeholder {
1282
+ --tw-placeholder-opacity: 1;
1283
+ color: rgb(138 136 157 / var(--tw-placeholder-opacity));
1284
+ }
1285
+
1286
+ .pzh-form-input::placeholder {
1287
+ --tw-placeholder-opacity: 1;
1288
+ color: rgb(138 136 157 / var(--tw-placeholder-opacity));
1289
+ }
1290
+
1291
+ .pzh-form-input:hover {
1292
+ --tw-border-opacity: 1;
1293
+ border-color: rgb(40 31 107 / var(--tw-border-opacity));
1294
+ }
1295
+
1296
+ .pzh-form-input:focus {
1297
+ --tw-border-opacity: 1;
1298
+ border-color: rgb(40 31 107 / var(--tw-border-opacity));
1299
+ outline: 2px solid transparent;
1300
+ outline-offset: 2px;
1301
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1302
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1303
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1304
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1305
+ --tw-ring-opacity: 1;
1306
+ --tw-ring-color: rgb(40 31 107 / var(--tw-ring-opacity));
1307
+ }
1308
+
1309
+ .pzh-form-input:disabled {
1310
+ --tw-bg-opacity: 1;
1311
+ background-color: rgb(235 235 235 / var(--tw-bg-opacity));
1312
+ }
1313
+
1314
+ .pzh-form-error,
1315
+ .pzh-form-checkbox.pzh-form-error + span:before,
1316
+ .pzh-form-radio:checked.pzh-form-error + span:before,
1317
+ .pzh-form-radio:not(:checked).pzh-form-error + span:before {
1318
+ --tw-border-opacity: 1;
1319
+ border-color: rgb(209 31 61 / var(--tw-border-opacity));
1320
+ }
1321
+
1322
+ .pzh-form-radio:checked + span:before,
1323
+ .pzh-form-radio:not(:checked) + span:before {
1324
+ position: absolute;
1325
+ left: 0px;
1326
+ top: 0px;
1327
+ height: 24px;
1328
+ width: 24px;
1329
+ border-radius: 9999px;
1330
+ border-width: 1px;
1331
+ --tw-border-opacity: 1;
1332
+ border-color: rgb(138 136 157 / var(--tw-border-opacity));
1333
+ --tw-bg-opacity: 1;
1334
+ background-color: rgb(235 235 235 / var(--tw-bg-opacity));
1335
+ content: '';
1336
+ }
1337
+
1338
+ .pzh-form-radio:checked + span:after,
1339
+ .pzh-form-radio:not(:checked) + span:after {
1340
+ position: absolute;
1341
+ top: 0.25rem;
1342
+ left: 0.25rem;
1343
+ height: 14px;
1344
+ width: 14px;
1345
+ border-radius: 9999px;
1346
+ --tw-bg-opacity: 1;
1347
+ background-color: rgb(0 128 77 / var(--tw-bg-opacity));
1348
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
1349
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
1350
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
1351
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1352
+ transition-duration: 200ms;
1353
+ content: '';
1354
+ }
1355
+
1356
+ .pzh-form-radio:not(:checked) + span:after,
1357
+ .pzh-form-checkbox:not(:checked) + span:after {
1358
+ opacity: 0;
1359
+ transform: scale(0);
1360
+ }
1361
+
1362
+ .pzh-form-radio:checked + span:after,
1363
+ .pzh-form-checkbox:checked + span:after {
1364
+ opacity: 1;
1365
+ transform: scale(1);
1366
+ }
1367
+
1368
+ .pzh-form-radio:disabled + span:before,
1369
+ .pzh-form-checkbox:disabled + span:before {
1370
+ --tw-border-opacity: 1;
1371
+ border-color: rgb(235 235 235 / var(--tw-border-opacity));
1372
+ --tw-bg-opacity: 1;
1373
+ background-color: rgb(235 235 235 / var(--tw-bg-opacity));
1374
+ }
1375
+
1376
+ .pzh-form-checkbox + span:before {
1377
+ position: absolute;
1378
+ left: 0px;
1379
+ top: 0px;
1380
+ height: 24px;
1381
+ width: 24px;
1382
+ border-radius: 4px;
1383
+ border-width: 1px;
1384
+ --tw-border-opacity: 1;
1385
+ border-color: rgb(138 136 157 / var(--tw-border-opacity));
1386
+ --tw-bg-opacity: 1;
1387
+ background-color: rgb(235 235 235 / var(--tw-bg-opacity));
1388
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
1389
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
1390
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
1391
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1392
+ transition-duration: 200ms;
1393
+ content: '';
1394
+ }
1395
+
1396
+ .pzh-form-checkbox:checked:not(:disabled) + span:before {
1397
+ --tw-bg-opacity: 1;
1398
+ background-color: rgb(0 128 77 / var(--tw-bg-opacity));
1399
+ }
1400
+
1401
+ .pzh-form-checkbox:checked + span:after,
1402
+ .pzh-form-checkbox:not(:checked) + span:after {
1403
+ position: absolute;
1404
+ top: 2px;
1405
+ left: 0.25rem;
1406
+ height: 14px;
1407
+ width: 14px;
1408
+ --tw-text-opacity: 1;
1409
+ color: rgb(255 255 255 / var(--tw-text-opacity));
1410
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
1411
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
1412
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
1413
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1414
+ transition-duration: 200ms;
1415
+ content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path fill='white' d='M438.6 105.4C451.1 117.9 451.1 138.1 438.6 150.6L182.6 406.6C170.1 419.1 149.9 419.1 137.4 406.6L9.372 278.6C-3.124 266.1-3.124 245.9 9.372 233.4C21.87 220.9 42.13 220.9 54.63 233.4L159.1 338.7L393.4 105.4C405.9 92.88 426.1 92.88 438.6 105.4H438.6z'/></svg>");
1416
+ }
1417
+
1418
+ .pzh-form-checkbox:checked:disabled + span:after {
1419
+ content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path fill='rgba(22, 17, 59, 0.35)' d='M438.6 105.4C451.1 117.9 451.1 138.1 438.6 150.6L182.6 406.6C170.1 419.1 149.9 419.1 137.4 406.6L9.372 278.6C-3.124 266.1-3.124 245.9 9.372 233.4C21.87 220.9 42.13 220.9 54.63 233.4L159.1 338.7L393.4 105.4C405.9 92.88 426.1 92.88 438.6 105.4H438.6z'/></svg>");
1420
+ }
1421
+
1422
+ .pzh-form-radio:focus + span:before,
1423
+ .pzh-form-checkbox:focus + span:before {
1424
+ --tw-border-opacity: 1;
1425
+ border-color: rgb(40 31 107 / var(--tw-border-opacity));
1426
+ outline: 2px solid transparent;
1427
+ outline-offset: 2px;
1428
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1429
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1430
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1431
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1432
+ --tw-ring-opacity: 1;
1433
+ --tw-ring-color: rgb(40 31 107 / var(--tw-ring-opacity));
1434
+ }
1435
+
1436
+ /*
1437
+ * React Datepicker
1438
+ */
1439
+
1440
+ .react-datepicker.pzh-datepicker {
1441
+ font-family: 'Karbon Regular', sans-serif;
1442
+ font-weight: 400;
1443
+ font-size: 0.8rem;
1444
+ box-shadow: 0px 18px 60px rgba(0, 0, 0, 0.07),
1445
+ 0px 4.02054px 13.4018px rgba(0, 0, 0, 0.0417275),
1446
+ 0px 1.19702px 3.99006px rgba(0, 0, 0, 0.0282725);
1447
+ border-style: none;
1448
+ --tw-text-opacity: 1;
1449
+ color: rgb(22 17 59 / var(--tw-text-opacity));
1450
+ }
1451
+
1452
+ .pzh-datepicker .react-datepicker__triangle {
1453
+ display: none;
1454
+ }
1455
+
1456
+ .pzh-datepicker .react-datepicker__header {
1457
+ border-style: none;
1458
+ --tw-bg-opacity: 1;
1459
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity));
1460
+ }
1461
+
1462
+ .pzh-datepicker .react-datepicker__month {
1463
+ margin-left: 0.125rem;
1464
+ margin-right: 0.125rem;
1465
+ margin-top: 0px;
1466
+ }
1467
+
1468
+ .pzh-datepicker .react-datepicker__day-names {
1469
+ background-color: rgb(22 17 59 / var(--tw-bg-opacity));
1470
+ --tw-bg-opacity: 0.1;
1471
+ }
1472
+
1473
+ .pzh-datepicker .react-datepicker__day-name {
1474
+ margin-top: 0px;
1475
+ margin-bottom: 0px;
1476
+ line-height: 26px;
1477
+ font-weight: 700;
1478
+ }
1479
+
1480
+ .pzh-datepicker .react-datepicker__current-month {
1481
+ margin-bottom: 0.5rem;
1482
+ }
1483
+
1484
+ .pzh-datepicker
1485
+ .react-datepicker__day--outside-month:not(.react-datepicker__day--selected) {
1486
+ color: rgb(22 17 59 / var(--tw-text-opacity));
1487
+ --tw-text-opacity: 0.35;
1488
+ }
1489
+
1490
+ .pzh-datepicker .react-datepicker__day-name,
1491
+ .pzh-datepicker .react-datepicker__day,
1492
+ .pzh-datepicker .react-datepicker__time-name {
1493
+ margin-left: 0.5rem;
1494
+ margin-right: 0.5rem;
1495
+ margin-top: 0.25rem;
1496
+ margin-bottom: 0.25rem;
1497
+ height: 26px;
1498
+ width: 26px;
1499
+ line-height: 28px;
1500
+ }
1501
+
1502
+ .pzh-datepicker .react-datepicker__day {
1503
+ border-radius: 9999px;
1504
+ }
1505
+
1506
+ .pzh-datepicker .react-datepicker__day:hover {
1507
+ border-radius: 9999px;
1508
+ }
1509
+
1510
+ .pzh-datepicker .react-datepicker__day--today,
1511
+ .pzh-datepicker .react-datepicker__day--today:hover,
1512
+ .pzh-datepicker .react-datepicker__day--keyboard-selected {
1513
+ background-color: rgb(22 17 59 / var(--tw-bg-opacity));
1514
+ --tw-bg-opacity: 0.1;
1515
+ --tw-text-opacity: 1;
1516
+ color: rgb(22 17 59 / var(--tw-text-opacity));
1517
+ }
1518
+
1519
+ .pzh-datepicker .react-datepicker__day--keyboard-selected:hover {
1520
+ background-color: rgb(22 17 59 / var(--tw-bg-opacity));
1521
+ --tw-bg-opacity: 0.1;
1522
+ }
1523
+
1524
+ .pzh-datepicker .react-datepicker__day--selected,
1525
+ .pzh-datepicker .react-datepicker__day--selected:hover {
1526
+ --tw-bg-opacity: 1;
1527
+ background-color: rgb(0 128 77 / var(--tw-bg-opacity));
1528
+ font-weight: 700;
1529
+ }
1530
+
1531
+ .pzh-datepicker .react-datepicker__year-read-view--down-arrow,
1532
+ .pzh-datepicker .react-datepicker__month-read-view--down-arrow,
1533
+ .pzh-datepicker .react-datepicker__month-year-read-view--down-arrow,
1534
+ .pzh-datepicker .react-datepicker__navigation-icon::before {
1535
+ height: 7px;
1536
+ width: 7px;
1537
+ border-width: 0px;
1538
+ border-top-width: 1px;
1539
+ border-right-width: 1px;
1540
+ --tw-border-opacity: 1;
1541
+ border-color: rgb(0 0 0 / var(--tw-border-opacity));
1542
+ }
1543
+
1544
+ .pzh-datepicker .react-datepicker__navigation-icon {
1545
+ line-height: 14px;
1546
+ }
1547
+
1548
+ .pzh-select-input input {
1549
+ box-shadow: none !important;
1550
+ }
1551
+
1229
1552
  .sr-only {
1230
1553
  position: absolute;
1231
1554
  width: 1px;
@@ -1346,8 +1669,8 @@ select {
1346
1669
  margin-bottom: 0.5rem;
1347
1670
  }
1348
1671
 
1349
- .-mb-\[2px\] {
1350
- margin-bottom: -2px;
1672
+ .-mb-px {
1673
+ margin-bottom: -1px;
1351
1674
  }
1352
1675
 
1353
1676
  .-mr-8 {
@@ -1442,6 +1765,10 @@ select {
1442
1765
  display: inline-block;
1443
1766
  }
1444
1767
 
1768
+ .inline {
1769
+ display: inline;
1770
+ }
1771
+
1445
1772
  .flex {
1446
1773
  display: flex;
1447
1774
  }
@@ -1564,6 +1891,10 @@ select {
1564
1891
  width: 100%;
1565
1892
  }
1566
1893
 
1894
+ .min-w-\[14px\] {
1895
+ min-width: 14px;
1896
+ }
1897
+
1567
1898
  .min-w-\[320px\] {
1568
1899
  min-width: 320px;
1569
1900
  }
@@ -1720,6 +2051,11 @@ select {
1720
2051
  border-radius: 0.375rem;
1721
2052
  }
1722
2053
 
2054
+ .rounded-t-\[4px\] {
2055
+ border-top-left-radius: 4px;
2056
+ border-top-right-radius: 4px;
2057
+ }
2058
+
1723
2059
  .rounded-t-md {
1724
2060
  border-top-left-radius: 0.375rem;
1725
2061
  border-top-right-radius: 0.375rem;
@@ -1733,10 +2069,6 @@ select {
1733
2069
  border-bottom-width: 1px;
1734
2070
  }
1735
2071
 
1736
- .border-b-2 {
1737
- border-bottom-width: 2px;
1738
- }
1739
-
1740
2072
  .border-b-\[3px\] {
1741
2073
  border-bottom-width: 3px;
1742
2074
  }
@@ -2065,686 +2397,336 @@ select {
2065
2397
  text-align: left;
2066
2398
  }
2067
2399
 
2068
- .text-center {
2069
- text-align: center;
2070
- }
2071
-
2072
- .align-bottom {
2073
- vertical-align: bottom;
2074
- }
2075
-
2076
- .text-\[0\.8rem\] {
2077
- font-size: 0.8rem;
2078
- }
2079
-
2080
- .text-\[16px\] {
2081
- font-size: 16px;
2082
- }
2083
-
2084
- .text-\[18px\] {
2085
- font-size: 18px;
2086
- }
2087
-
2088
- .text-base {
2089
- font-size: 1rem;
2090
- }
2091
-
2092
- .text-sm {
2093
- font-size: 0.875rem;
2094
- }
2095
-
2096
- .text-xs {
2097
- font-size: 0.75rem;
2098
- }
2099
-
2100
- .font-bold {
2101
- font-weight: 700;
2102
- }
2103
-
2104
- .font-normal {
2105
- font-weight: 400;
2106
- }
2107
-
2108
- .uppercase {
2109
- text-transform: uppercase;
2110
- }
2111
-
2112
- .normal-case {
2113
- text-transform: none;
2114
- }
2115
-
2116
- .italic {
2117
- font-style: italic;
2118
- }
2119
-
2120
- .leading-5 {
2121
- line-height: 1.25rem;
2122
- }
2123
-
2124
- .leading-6 {
2125
- line-height: 1.5rem;
2126
- }
2127
-
2128
- .leading-\[28px\] {
2129
- line-height: 28px;
2130
- }
2131
-
2132
- .leading-\[30px\] {
2133
- line-height: 30px;
2134
- }
2135
-
2136
- .leading-none {
2137
- line-height: 1;
2138
- }
2139
-
2140
- .leading-normal {
2141
- line-height: 1.5;
2142
- }
2143
-
2144
- .text-pzh-blue {
2145
- --tw-text-opacity: 1;
2146
- color: rgb(40 31 107 / var(--tw-text-opacity));
2147
- }
2148
-
2149
- .text-pzh-blue-dark {
2150
- --tw-text-opacity: 1;
2151
- color: rgb(22 17 59 / var(--tw-text-opacity));
2152
- }
2153
-
2154
- .text-pzh-blue-dark\/50 {
2155
- color: rgb(22 17 59 / 0.5);
2156
- }
2157
-
2158
- .text-pzh-blue-light {
2159
- --tw-text-opacity: 1;
2160
- color: rgb(123 173 222 / var(--tw-text-opacity));
2161
- }
2162
-
2163
- .text-pzh-cool-gray-dark {
2164
- --tw-text-opacity: 1;
2165
- color: rgb(92 92 92 / var(--tw-text-opacity));
2166
- }
2167
-
2168
- .text-pzh-gray-600 {
2169
- --tw-text-opacity: 1;
2170
- color: rgb(138 136 157 / var(--tw-text-opacity));
2171
- }
2172
-
2173
- .text-pzh-green {
2174
- --tw-text-opacity: 1;
2175
- color: rgb(0 128 77 / var(--tw-text-opacity));
2176
- }
2177
-
2178
- .text-pzh-green-light {
2179
- --tw-text-opacity: 1;
2180
- color: rgb(97 179 117 / var(--tw-text-opacity));
2181
- }
2182
-
2183
- .text-pzh-orange {
2184
- --tw-text-opacity: 1;
2185
- color: rgb(255 107 2 / var(--tw-text-opacity));
2186
- }
2187
-
2188
- .text-pzh-purple {
2189
- --tw-text-opacity: 1;
2190
- color: rgb(80 61 144 / var(--tw-text-opacity));
2191
- }
2192
-
2193
- .text-pzh-red {
2194
- --tw-text-opacity: 1;
2195
- color: rgb(209 31 61 / var(--tw-text-opacity));
2196
- }
2197
-
2198
- .text-pzh-red-light {
2199
- --tw-text-opacity: 1;
2200
- color: rgb(235 112 133 / var(--tw-text-opacity));
2201
- }
2202
-
2203
- .text-pzh-white {
2204
- --tw-text-opacity: 1;
2205
- color: rgb(255 255 255 / var(--tw-text-opacity));
2206
- }
2207
-
2208
- .text-pzh-yellow-dark {
2209
- --tw-text-opacity: 1;
2210
- color: rgb(198 164 16 / var(--tw-text-opacity));
2211
- }
2212
-
2213
- .text-white {
2214
- --tw-text-opacity: 1;
2215
- color: rgb(255 255 255 / var(--tw-text-opacity));
2216
- }
2217
-
2218
- .underline {
2219
- text-decoration-line: underline;
2220
- }
2221
-
2222
- .decoration-1 {
2223
- text-decoration-thickness: 1px;
2224
- }
2225
-
2226
- .underline-offset-2 {
2227
- text-underline-offset: 2px;
2228
- }
2229
-
2230
- .opacity-0 {
2231
- opacity: 0;
2232
- }
2233
-
2234
- .opacity-100 {
2235
- opacity: 1;
2236
- }
2237
-
2238
- .opacity-50 {
2239
- opacity: 0.5;
2240
- }
2241
-
2242
- .shadow-card {
2243
- --tw-shadow: 0px 18px 60px rgba(0, 0, 0, 0.07), 0px 4.02054px 13.4018px rgba(0, 0, 0, 0.0417275), 0px 1.19702px 3.99006px rgba(0, 0, 0, 0.0282725);
2244
- --tw-shadow-colored: 0px 18px 60px var(--tw-shadow-color), 0px 4.02054px 13.4018px var(--tw-shadow-color), 0px 1.19702px 3.99006px var(--tw-shadow-color);
2245
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
2246
- }
2247
-
2248
- .shadow-none {
2249
- --tw-shadow: 0 0 #0000;
2250
- --tw-shadow-colored: 0 0 #0000;
2251
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
2252
- }
2253
-
2254
- .shadow-xl {
2255
- --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
2256
- --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
2257
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
2258
- }
2259
-
2260
- .outline-none {
2261
- outline: 2px solid transparent;
2262
- outline-offset: 2px;
2263
- }
2264
-
2265
- .ring {
2266
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
2267
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
2268
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
2269
- }
2270
-
2271
- .ring-2 {
2272
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
2273
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
2274
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
2275
- }
2276
-
2277
- .ring-pzh-blue {
2278
- --tw-ring-opacity: 1;
2279
- --tw-ring-color: rgb(40 31 107 / var(--tw-ring-opacity));
2280
- }
2281
-
2282
- .ring-offset-2 {
2283
- --tw-ring-offset-width: 2px;
2284
- }
2285
-
2286
- .blur {
2287
- --tw-blur: blur(8px);
2288
- filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
2289
- }
2290
-
2291
- .filter {
2292
- filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
2400
+ .text-center {
2401
+ text-align: center;
2293
2402
  }
2294
2403
 
2295
- .transition {
2296
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
2297
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
2298
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
2299
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2300
- transition-duration: 150ms;
2404
+ .align-bottom {
2405
+ vertical-align: bottom;
2301
2406
  }
2302
2407
 
2303
- .transition-all {
2304
- transition-property: all;
2305
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2306
- transition-duration: 150ms;
2408
+ .text-\[0\.8rem\] {
2409
+ font-size: 0.8rem;
2307
2410
  }
2308
2411
 
2309
- .transition-opacity {
2310
- transition-property: opacity;
2311
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2312
- transition-duration: 150ms;
2412
+ .text-\[16px\] {
2413
+ font-size: 16px;
2313
2414
  }
2314
2415
 
2315
- .duration-150 {
2316
- transition-duration: 150ms;
2416
+ .text-\[18px\] {
2417
+ font-size: 18px;
2317
2418
  }
2318
2419
 
2319
- .duration-200 {
2320
- transition-duration: 200ms;
2420
+ .text-base {
2421
+ font-size: 1rem;
2321
2422
  }
2322
2423
 
2323
- .duration-300 {
2324
- transition-duration: 300ms;
2424
+ .text-sm {
2425
+ font-size: 0.875rem;
2325
2426
  }
2326
2427
 
2327
- .ease-in {
2328
- transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
2428
+ .text-xs {
2429
+ font-size: 0.75rem;
2329
2430
  }
2330
2431
 
2331
- .ease-in-out {
2332
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2432
+ .font-bold {
2433
+ font-weight: 700;
2333
2434
  }
2334
2435
 
2335
- .ease-out {
2336
- transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
2436
+ .font-normal {
2437
+ font-weight: 400;
2337
2438
  }
2338
2439
 
2339
- @font-face {
2340
- font-family: 'Karbon Regular';
2440
+ .uppercase {
2441
+ text-transform: uppercase;
2442
+ }
2341
2443
 
2342
- src: url('./../fonts/Karbon-Regular.woff2') format('woff2');
2444
+ .normal-case {
2445
+ text-transform: none;
2446
+ }
2343
2447
 
2344
- font-weight: normal;
2448
+ .italic {
2449
+ font-style: italic;
2450
+ }
2345
2451
 
2346
- font-display: swap;
2452
+ .leading-5 {
2453
+ line-height: 1.25rem;
2347
2454
  }
2348
2455
 
2349
- @font-face {
2350
- font-family: 'Karbon Medium';
2456
+ .leading-6 {
2457
+ line-height: 1.5rem;
2458
+ }
2351
2459
 
2352
- src: url('./../fonts/Karbon-Medium.woff2') format('woff2');
2460
+ .leading-\[28px\] {
2461
+ line-height: 28px;
2462
+ }
2353
2463
 
2354
- font-weight: bold;
2464
+ .leading-\[30px\] {
2465
+ line-height: 30px;
2466
+ }
2355
2467
 
2356
- font-display: swap;
2468
+ .leading-none {
2469
+ line-height: 1;
2357
2470
  }
2358
2471
 
2359
- html {
2360
- height: 100%;
2361
- overflow: auto;
2362
- font-size: 20px;
2363
- line-height: 1.5em;
2472
+ .leading-normal {
2473
+ line-height: 1.5;
2364
2474
  }
2365
2475
 
2366
- body {
2367
- margin: 0;
2368
- padding: 0;
2369
- font-family: 'Karbon Regular', sans-serif;
2370
- font-weight: 400;
2371
- -webkit-font-smoothing: antialiased;
2372
- -moz-osx-font-smoothing: grayscale;
2476
+ .text-pzh-blue {
2477
+ --tw-text-opacity: 1;
2478
+ color: rgb(40 31 107 / var(--tw-text-opacity));
2373
2479
  }
2374
2480
 
2375
- h1,
2376
- h2,
2377
- h3,
2378
- h4,
2379
- h5,
2380
- h6,
2381
- .font-bold,
2382
- strong,
2383
- b {
2384
- font-family: 'Karbon Medium', sans-serif;
2481
+ .text-pzh-blue-dark {
2482
+ --tw-text-opacity: 1;
2483
+ color: rgb(22 17 59 / var(--tw-text-opacity));
2385
2484
  }
2386
2485
 
2387
- .font-normal {
2388
- font-family: 'Karbon Regular', sans-serif;
2486
+ .text-pzh-blue-dark\/50 {
2487
+ color: rgb(22 17 59 / 0.5);
2389
2488
  }
2390
2489
 
2391
- .bold {
2392
- font-weight: 700;
2490
+ .text-pzh-blue-light {
2491
+ --tw-text-opacity: 1;
2492
+ color: rgb(123 173 222 / var(--tw-text-opacity));
2393
2493
  }
2394
2494
 
2395
- .pzh-transition-colors {
2396
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
2397
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2398
- transition-duration: 200ms;
2399
- transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
2495
+ .text-pzh-cool-gray-dark {
2496
+ --tw-text-opacity: 1;
2497
+ color: rgb(92 92 92 / var(--tw-text-opacity));
2400
2498
  }
2401
2499
 
2402
- /*
2403
- * Form elements
2404
- */
2500
+ .text-pzh-gray-400 {
2501
+ --tw-text-opacity: 1;
2502
+ color: rgb(173 172 186 / var(--tw-text-opacity));
2503
+ }
2405
2504
 
2406
- .pzh-button {
2407
- display: inline-block;
2408
- border-radius: 0.25rem;
2409
- line-height: 1;
2410
- --tw-ring-offset-width: 2px;
2411
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
2412
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
2413
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
2414
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2415
- transition-duration: 200ms;
2416
- transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
2505
+ .text-pzh-gray-600 {
2506
+ --tw-text-opacity: 1;
2507
+ color: rgb(138 136 157 / var(--tw-text-opacity));
2417
2508
  }
2418
2509
 
2419
- .pzh-button:focus {
2420
- outline: 2px solid transparent;
2421
- outline-offset: 2px;
2422
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
2423
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
2424
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
2425
- --tw-ring-opacity: 1;
2426
- --tw-ring-color: rgb(22 17 59 / var(--tw-ring-opacity));
2510
+ .text-pzh-green {
2511
+ --tw-text-opacity: 1;
2512
+ color: rgb(0 128 77 / var(--tw-text-opacity));
2427
2513
  }
2428
2514
 
2429
- .pzh-button:disabled {
2430
- cursor: not-allowed;
2431
- --tw-bg-opacity: 1;
2432
- background-color: rgb(235 235 235 / var(--tw-bg-opacity));
2433
- color: rgb(22 17 59 / var(--tw-text-opacity));
2434
- --tw-text-opacity: 0.35;
2515
+ .text-pzh-green-light {
2516
+ --tw-text-opacity: 1;
2517
+ color: rgb(97 179 117 / var(--tw-text-opacity));
2435
2518
  }
2436
2519
 
2437
- .pzh-form-input {
2438
- display: block;
2439
- width: 100%;
2440
- -webkit-appearance: none;
2441
- -moz-appearance: none;
2442
- appearance: none;
2443
- border-radius: 0.25rem;
2444
- border-width: 1px;
2445
- --tw-border-opacity: 1;
2446
- border-color: rgb(138 136 157 / var(--tw-border-opacity));
2447
- padding-top: 10px;
2448
- padding-bottom: 6px;
2449
- line-height: 30px;
2520
+ .text-pzh-orange {
2450
2521
  --tw-text-opacity: 1;
2451
- color: rgb(22 17 59 / var(--tw-text-opacity));
2522
+ color: rgb(255 107 2 / var(--tw-text-opacity));
2452
2523
  }
2453
2524
 
2454
- .pzh-form-input::-moz-placeholder {
2455
- --tw-placeholder-opacity: 1;
2456
- color: rgb(138 136 157 / var(--tw-placeholder-opacity));
2525
+ .text-pzh-purple {
2526
+ --tw-text-opacity: 1;
2527
+ color: rgb(80 61 144 / var(--tw-text-opacity));
2457
2528
  }
2458
2529
 
2459
- .pzh-form-input::placeholder {
2460
- --tw-placeholder-opacity: 1;
2461
- color: rgb(138 136 157 / var(--tw-placeholder-opacity));
2530
+ .text-pzh-red {
2531
+ --tw-text-opacity: 1;
2532
+ color: rgb(209 31 61 / var(--tw-text-opacity));
2462
2533
  }
2463
2534
 
2464
- .pzh-form-input:hover {
2465
- --tw-border-opacity: 1;
2466
- border-color: rgb(40 31 107 / var(--tw-border-opacity));
2535
+ .text-pzh-red-light {
2536
+ --tw-text-opacity: 1;
2537
+ color: rgb(235 112 133 / var(--tw-text-opacity));
2467
2538
  }
2468
2539
 
2469
- .pzh-form-input:focus {
2470
- --tw-border-opacity: 1;
2471
- border-color: rgb(40 31 107 / var(--tw-border-opacity));
2472
- outline: 2px solid transparent;
2473
- outline-offset: 2px;
2474
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
2475
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
2476
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
2477
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
2478
- --tw-ring-opacity: 1;
2479
- --tw-ring-color: rgb(40 31 107 / var(--tw-ring-opacity));
2540
+ .text-pzh-white {
2541
+ --tw-text-opacity: 1;
2542
+ color: rgb(255 255 255 / var(--tw-text-opacity));
2480
2543
  }
2481
2544
 
2482
- .pzh-form-input:disabled {
2483
- --tw-bg-opacity: 1;
2484
- background-color: rgb(235 235 235 / var(--tw-bg-opacity));
2545
+ .text-pzh-yellow-dark {
2546
+ --tw-text-opacity: 1;
2547
+ color: rgb(198 164 16 / var(--tw-text-opacity));
2485
2548
  }
2486
2549
 
2487
- .pzh-form-error,
2488
- .pzh-form-checkbox.pzh-form-error + span:before,
2489
- .pzh-form-radio:checked.pzh-form-error + span:before,
2490
- .pzh-form-radio:not(:checked).pzh-form-error + span:before {
2491
- --tw-border-opacity: 1;
2492
- border-color: rgb(209 31 61 / var(--tw-border-opacity));
2550
+ .text-white {
2551
+ --tw-text-opacity: 1;
2552
+ color: rgb(255 255 255 / var(--tw-text-opacity));
2493
2553
  }
2494
2554
 
2495
- .pzh-form-radio:checked + span:before,
2496
- .pzh-form-radio:not(:checked) + span:before {
2497
- position: absolute;
2498
- left: 0px;
2499
- top: 0px;
2500
- height: 24px;
2501
- width: 24px;
2502
- border-radius: 9999px;
2503
- border-width: 1px;
2504
- --tw-border-opacity: 1;
2505
- border-color: rgb(138 136 157 / var(--tw-border-opacity));
2506
- --tw-bg-opacity: 1;
2507
- background-color: rgb(235 235 235 / var(--tw-bg-opacity));
2508
- content: '';
2555
+ .underline {
2556
+ text-decoration-line: underline;
2509
2557
  }
2510
2558
 
2511
- .pzh-form-radio:checked + span:after,
2512
- .pzh-form-radio:not(:checked) + span:after {
2513
- position: absolute;
2514
- top: 0.25rem;
2515
- left: 0.25rem;
2516
- height: 14px;
2517
- width: 14px;
2518
- border-radius: 9999px;
2519
- --tw-bg-opacity: 1;
2520
- background-color: rgb(0 128 77 / var(--tw-bg-opacity));
2521
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
2522
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
2523
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
2524
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2525
- transition-duration: 200ms;
2526
- content: '';
2559
+ .decoration-1 {
2560
+ text-decoration-thickness: 1px;
2561
+ }
2562
+
2563
+ .underline-offset-2 {
2564
+ text-underline-offset: 2px;
2527
2565
  }
2528
2566
 
2529
- .pzh-form-radio:not(:checked) + span:after,
2530
- .pzh-form-checkbox:not(:checked) + span:after {
2567
+ .opacity-0 {
2531
2568
  opacity: 0;
2532
- transform: scale(0);
2533
2569
  }
2534
2570
 
2535
- .pzh-form-radio:checked + span:after,
2536
- .pzh-form-checkbox:checked + span:after {
2571
+ .opacity-100 {
2537
2572
  opacity: 1;
2538
- transform: scale(1);
2539
- }
2540
-
2541
- .pzh-form-radio:disabled + span:before,
2542
- .pzh-form-checkbox:disabled + span:before {
2543
- --tw-border-opacity: 1;
2544
- border-color: rgb(235 235 235 / var(--tw-border-opacity));
2545
- --tw-bg-opacity: 1;
2546
- background-color: rgb(235 235 235 / var(--tw-bg-opacity));
2547
2573
  }
2548
2574
 
2549
- .pzh-form-checkbox + span:before {
2550
- position: absolute;
2551
- left: 0px;
2552
- top: 0px;
2553
- height: 24px;
2554
- width: 24px;
2555
- border-radius: 4px;
2556
- border-width: 1px;
2557
- --tw-border-opacity: 1;
2558
- border-color: rgb(138 136 157 / var(--tw-border-opacity));
2559
- --tw-bg-opacity: 1;
2560
- background-color: rgb(235 235 235 / var(--tw-bg-opacity));
2561
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
2562
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
2563
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
2564
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2565
- transition-duration: 200ms;
2566
- content: '';
2575
+ .opacity-50 {
2576
+ opacity: 0.5;
2567
2577
  }
2568
2578
 
2569
- .pzh-form-checkbox:checked:not(:disabled) + span:before {
2570
- --tw-bg-opacity: 1;
2571
- background-color: rgb(0 128 77 / var(--tw-bg-opacity));
2579
+ .shadow-card {
2580
+ --tw-shadow: 0px 18px 60px rgba(0, 0, 0, 0.07), 0px 4.02054px 13.4018px rgba(0, 0, 0, 0.0417275), 0px 1.19702px 3.99006px rgba(0, 0, 0, 0.0282725);
2581
+ --tw-shadow-colored: 0px 18px 60px var(--tw-shadow-color), 0px 4.02054px 13.4018px var(--tw-shadow-color), 0px 1.19702px 3.99006px var(--tw-shadow-color);
2582
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
2572
2583
  }
2573
2584
 
2574
- .pzh-form-checkbox:checked + span:after,
2575
- .pzh-form-checkbox:not(:checked) + span:after {
2576
- position: absolute;
2577
- top: 2px;
2578
- left: 0.25rem;
2579
- height: 14px;
2580
- width: 14px;
2581
- --tw-text-opacity: 1;
2582
- color: rgb(255 255 255 / var(--tw-text-opacity));
2583
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
2584
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
2585
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
2586
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2587
- transition-duration: 200ms;
2588
- content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path fill='white' d='M438.6 105.4C451.1 117.9 451.1 138.1 438.6 150.6L182.6 406.6C170.1 419.1 149.9 419.1 137.4 406.6L9.372 278.6C-3.124 266.1-3.124 245.9 9.372 233.4C21.87 220.9 42.13 220.9 54.63 233.4L159.1 338.7L393.4 105.4C405.9 92.88 426.1 92.88 438.6 105.4H438.6z'/></svg>");
2585
+ .shadow-none {
2586
+ --tw-shadow: 0 0 #0000;
2587
+ --tw-shadow-colored: 0 0 #0000;
2588
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
2589
2589
  }
2590
2590
 
2591
- .pzh-form-checkbox:checked:disabled + span:after {
2592
- content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path fill='rgba(22, 17, 59, 0.35)' d='M438.6 105.4C451.1 117.9 451.1 138.1 438.6 150.6L182.6 406.6C170.1 419.1 149.9 419.1 137.4 406.6L9.372 278.6C-3.124 266.1-3.124 245.9 9.372 233.4C21.87 220.9 42.13 220.9 54.63 233.4L159.1 338.7L393.4 105.4C405.9 92.88 426.1 92.88 438.6 105.4H438.6z'/></svg>");
2591
+ .shadow-xl {
2592
+ --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
2593
+ --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
2594
+ box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
2593
2595
  }
2594
2596
 
2595
- .pzh-form-radio:focus + span:before,
2596
- .pzh-form-checkbox:focus + span:before {
2597
- --tw-border-opacity: 1;
2598
- border-color: rgb(40 31 107 / var(--tw-border-opacity));
2597
+ .outline-none {
2599
2598
  outline: 2px solid transparent;
2600
2599
  outline-offset: 2px;
2600
+ }
2601
+
2602
+ .ring {
2603
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
2601
2604
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
2605
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
2606
+ }
2607
+
2608
+ .ring-2 {
2602
2609
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
2603
2610
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
2604
2611
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
2612
+ }
2613
+
2614
+ .ring-pzh-blue {
2605
2615
  --tw-ring-opacity: 1;
2606
2616
  --tw-ring-color: rgb(40 31 107 / var(--tw-ring-opacity));
2607
2617
  }
2608
2618
 
2609
- .form-field-label {
2610
- margin-bottom: 0.5rem;
2611
- display: block;
2612
- font-size: 0.75rem;
2613
- text-transform: uppercase;
2614
- letter-spacing: 0.025em;
2615
- --tw-text-opacity: 1;
2616
- color: rgb(74 85 104 / var(--tw-text-opacity));
2619
+ .ring-offset-2 {
2620
+ --tw-ring-offset-width: 2px;
2617
2621
  }
2618
2622
 
2619
- .form-field-description {
2620
- margin-bottom: 0.5rem;
2621
- font-size: 0.875rem;
2622
- --tw-text-opacity: 1;
2623
- color: rgb(74 85 104 / var(--tw-text-opacity));
2623
+ .blur {
2624
+ --tw-blur: blur(8px);
2625
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
2624
2626
  }
2625
2627
 
2626
- /*
2627
- * React Datepicker
2628
- */
2629
-
2630
- .react-datepicker.pzh-datepicker {
2631
- font-family: 'Karbon Regular', sans-serif;
2632
- font-weight: 400;
2633
- font-size: 0.8rem;
2634
- box-shadow: 0px 18px 60px rgba(0, 0, 0, 0.07),
2635
- 0px 4.02054px 13.4018px rgba(0, 0, 0, 0.0417275),
2636
- 0px 1.19702px 3.99006px rgba(0, 0, 0, 0.0282725);
2637
- border-style: none;
2638
- --tw-text-opacity: 1;
2639
- color: rgb(22 17 59 / var(--tw-text-opacity));
2628
+ .filter {
2629
+ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
2640
2630
  }
2641
2631
 
2642
- .pzh-datepicker .react-datepicker__triangle {
2643
- display: none;
2632
+ .transition {
2633
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
2634
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
2635
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
2636
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2637
+ transition-duration: 150ms;
2644
2638
  }
2645
2639
 
2646
- .pzh-datepicker .react-datepicker__header {
2647
- border-style: none;
2648
- --tw-bg-opacity: 1;
2649
- background-color: rgb(255 255 255 / var(--tw-bg-opacity));
2640
+ .transition-all {
2641
+ transition-property: all;
2642
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2643
+ transition-duration: 150ms;
2650
2644
  }
2651
2645
 
2652
- .pzh-datepicker .react-datepicker__month {
2653
- margin-left: 0.125rem;
2654
- margin-right: 0.125rem;
2655
- margin-top: 0px;
2646
+ .transition-opacity {
2647
+ transition-property: opacity;
2648
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2649
+ transition-duration: 150ms;
2656
2650
  }
2657
2651
 
2658
- .pzh-datepicker .react-datepicker__day-names {
2659
- background-color: rgb(22 17 59 / var(--tw-bg-opacity));
2660
- --tw-bg-opacity: 0.1;
2652
+ .duration-150 {
2653
+ transition-duration: 150ms;
2661
2654
  }
2662
2655
 
2663
- .pzh-datepicker .react-datepicker__day-name {
2664
- margin-top: 0px;
2665
- margin-bottom: 0px;
2666
- line-height: 26px;
2667
- font-weight: 700;
2656
+ .duration-200 {
2657
+ transition-duration: 200ms;
2668
2658
  }
2669
2659
 
2670
- .pzh-datepicker .react-datepicker__current-month {
2671
- margin-bottom: 0.5rem;
2660
+ .duration-300 {
2661
+ transition-duration: 300ms;
2672
2662
  }
2673
2663
 
2674
- .pzh-datepicker
2675
- .react-datepicker__day--outside-month:not(.react-datepicker__day--selected) {
2676
- color: rgb(22 17 59 / var(--tw-text-opacity));
2677
- --tw-text-opacity: 0.35;
2664
+ .ease-in {
2665
+ transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
2678
2666
  }
2679
2667
 
2680
- .pzh-datepicker .react-datepicker__day-name,
2681
- .pzh-datepicker .react-datepicker__day,
2682
- .pzh-datepicker .react-datepicker__time-name {
2683
- margin-left: 0.5rem;
2684
- margin-right: 0.5rem;
2685
- margin-top: 0.25rem;
2686
- margin-bottom: 0.25rem;
2687
- height: 26px;
2688
- width: 26px;
2689
- line-height: 28px;
2668
+ .ease-in-out {
2669
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
2690
2670
  }
2691
2671
 
2692
- .pzh-datepicker .react-datepicker__day {
2693
- border-radius: 9999px;
2672
+ .ease-out {
2673
+ transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
2694
2674
  }
2695
2675
 
2696
- .pzh-datepicker .react-datepicker__day:hover {
2697
- border-radius: 9999px;
2698
- }
2676
+ @font-face {
2677
+ font-family: 'Karbon Regular';
2699
2678
 
2700
- .pzh-datepicker .react-datepicker__day--today,
2701
- .pzh-datepicker .react-datepicker__day--today:hover,
2702
- .pzh-datepicker .react-datepicker__day--keyboard-selected {
2703
- background-color: rgb(22 17 59 / var(--tw-bg-opacity));
2704
- --tw-bg-opacity: 0.1;
2705
- --tw-text-opacity: 1;
2706
- color: rgb(22 17 59 / var(--tw-text-opacity));
2679
+ src: url('./../fonts/Karbon-Regular.woff2') format('woff2');
2680
+
2681
+ font-weight: normal;
2682
+
2683
+ font-display: swap;
2707
2684
  }
2708
2685
 
2709
- .pzh-datepicker .react-datepicker__day--keyboard-selected:hover {
2710
- background-color: rgb(22 17 59 / var(--tw-bg-opacity));
2711
- --tw-bg-opacity: 0.1;
2686
+ @font-face {
2687
+ font-family: 'Karbon Medium';
2688
+
2689
+ src: url('./../fonts/Karbon-Medium.woff2') format('woff2');
2690
+
2691
+ font-weight: bold;
2692
+
2693
+ font-display: swap;
2712
2694
  }
2713
2695
 
2714
- .pzh-datepicker .react-datepicker__day--selected,
2715
- .pzh-datepicker .react-datepicker__day--selected:hover {
2716
- --tw-bg-opacity: 1;
2717
- background-color: rgb(0 128 77 / var(--tw-bg-opacity));
2718
- font-weight: 700;
2696
+ html {
2697
+ height: 100%;
2698
+ overflow: auto;
2699
+ font-size: 20px;
2700
+ line-height: 1.5em;
2719
2701
  }
2720
2702
 
2721
- .pzh-datepicker .react-datepicker__year-read-view--down-arrow,
2722
- .pzh-datepicker .react-datepicker__month-read-view--down-arrow,
2723
- .pzh-datepicker .react-datepicker__month-year-read-view--down-arrow,
2724
- .pzh-datepicker .react-datepicker__navigation-icon::before {
2725
- height: 7px;
2726
- width: 7px;
2727
- border-width: 0px;
2728
- border-top-width: 1px;
2729
- border-right-width: 1px;
2730
- --tw-border-opacity: 1;
2731
- border-color: rgb(0 0 0 / var(--tw-border-opacity));
2703
+ body {
2704
+ margin: 0;
2705
+ padding: 0;
2706
+ font-family: 'Karbon Regular', sans-serif;
2707
+ font-weight: 400;
2708
+ -webkit-font-smoothing: antialiased;
2709
+ -moz-osx-font-smoothing: grayscale;
2732
2710
  }
2733
2711
 
2734
- .pzh-datepicker .react-datepicker__navigation-icon {
2735
- line-height: 14px;
2712
+ h1,
2713
+ h2,
2714
+ h3,
2715
+ h4,
2716
+ h5,
2717
+ h6,
2718
+ .font-bold,
2719
+ strong,
2720
+ b {
2721
+ font-family: 'Karbon Medium', sans-serif;
2736
2722
  }
2737
2723
 
2738
- .pzh-select-input input {
2739
- box-shadow: none !important;
2724
+ .font-normal {
2725
+ font-family: 'Karbon Regular', sans-serif;
2740
2726
  }
2741
2727
 
2742
- .ProseMirror p.is-editor-empty:first-child::before {
2743
- color: rgb(22 17 59 / 0.55);
2744
- content: attr(data-placeholder);
2745
- float: left;
2746
- pointer-events: none;
2747
- height: 0;
2728
+ .bold {
2729
+ font-weight: 700;
2748
2730
  }
2749
2731
 
2750
2732
  .marker\:text-pzh-blue-dark *::marker {
@@ -2888,11 +2870,6 @@ b {
2888
2870
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
2889
2871
  }
2890
2872
 
2891
- .focus\:ring-indigo-500:focus {
2892
- --tw-ring-opacity: 1;
2893
- --tw-ring-color: rgb(102 126 234 / var(--tw-ring-opacity));
2894
- }
2895
-
2896
2873
  .focus\:ring-pzh-blue-dark:focus {
2897
2874
  --tw-ring-opacity: 1;
2898
2875
  --tw-ring-color: rgb(22 17 59 / var(--tw-ring-opacity));
@@ -2902,27 +2879,13 @@ b {
2902
2879
  --tw-ring-offset-width: 2px;
2903
2880
  }
2904
2881
 
2905
- .disabled\:pointer-events-none:disabled {
2906
- pointer-events: none;
2907
- }
2908
-
2909
- .disabled\:text-pzh-gray-400:disabled {
2910
- --tw-text-opacity: 1;
2911
- color: rgb(173 172 186 / var(--tw-text-opacity));
2912
- }
2913
-
2914
2882
  .group:hover .group-hover\:opacity-100 {
2915
2883
  opacity: 1;
2916
2884
  }
2917
2885
 
2918
- .aria-\[current\=page\]\:bg-pzh-green[aria-current=page] {
2919
- --tw-bg-opacity: 1;
2920
- background-color: rgb(0 128 77 / var(--tw-bg-opacity));
2921
- }
2922
-
2923
- .aria-\[current\=page\]\:text-pzh-white[aria-current=page] {
2886
+ .prose-a\:text-pzh-green :is(:where(a):not(:where([class~="not-prose"] *))) {
2924
2887
  --tw-text-opacity: 1;
2925
- color: rgb(255 255 255 / var(--tw-text-opacity));
2888
+ color: rgb(0 128 77 / var(--tw-text-opacity));
2926
2889
  }
2927
2890
 
2928
2891
  .prose-li\:my-0 :is(:where(li):not(:where([class~="not-prose"] *))) {
@@ -2930,6 +2893,11 @@ b {
2930
2893
  margin-bottom: 0px;
2931
2894
  }
2932
2895
 
2896
+ .prose-img\:my-0 :is(:where(img):not(:where([class~="not-prose"] *))) {
2897
+ margin-top: 0px;
2898
+ margin-bottom: 0px;
2899
+ }
2900
+
2933
2901
  @media (min-width: 640px) {
2934
2902
  .sm\:my-8 {
2935
2903
  margin-top: 2rem;