pcm-shared-components 0.0.248 → 0.0.250
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/dist/components/Platform/PlatformPaymentPlans/index.js +20 -50
- package/dist/components/Platform/PlatformPlanPrices/index.js +112 -0
- package/dist/components/Platform/PlatformPlanTitles/index.js +1 -1
- package/dist/index.js +2 -1
- package/dist/styles/tailwind.css +1 -1
- package/package.json +1 -1
|
@@ -13,6 +13,7 @@ import { mdiRocket, mdiShimmer, mdiFire, mdiTorch } from '@mdi/js';
|
|
|
13
13
|
import { Button } from '@mui/material';
|
|
14
14
|
import ReactMarkdown from 'react-markdown';
|
|
15
15
|
import PlatformPlanTitles from '../PlatformPlanTitles';
|
|
16
|
+
import PlatformPlanPrices from '../PlatformPlanPrices';
|
|
16
17
|
const platformPricingIcons = [mdiShimmer, mdiFire, mdiTorch];
|
|
17
18
|
/**
|
|
18
19
|
* ## Importing the component in your project
|
|
@@ -119,72 +120,41 @@ export const PlatformPaymentPlans = props => {
|
|
|
119
120
|
}));
|
|
120
121
|
};
|
|
121
122
|
|
|
122
|
-
const PriceDescription = props => {
|
|
123
|
-
const {
|
|
124
|
-
color,
|
|
125
|
-
price = 0,
|
|
126
|
-
description = '',
|
|
127
|
-
expected_price = 0
|
|
128
|
-
} = props;
|
|
129
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
130
|
-
className: "flex flex-row items-baseline mx-4 md:mx-auto text-center w-fit"
|
|
131
|
-
}, Number(expected_price) > 0 && parseFloat(price) > 0 && parseFloat(expected_price) > parseFloat(price) && /*#__PURE__*/React.createElement("div", {
|
|
132
|
-
className: "mx-4"
|
|
133
|
-
}, /*#__PURE__*/React.createElement("span", {
|
|
134
|
-
className: "leading-none text-xl font-500 line-through decoration-gray-500 text-gray-500"
|
|
135
|
-
}, "$"), /*#__PURE__*/React.createElement("span", {
|
|
136
|
-
className: "leading-none text-xl font-500 tracking-tight line-through decoration-gray-500 text-gray-500"
|
|
137
|
-
}, expected_price)), /*#__PURE__*/React.createElement("span", {
|
|
138
|
-
className: "leading-none text-xl font-semibold ",
|
|
139
|
-
style: {
|
|
140
|
-
color: color
|
|
141
|
-
}
|
|
142
|
-
}, "$"), /*#__PURE__*/React.createElement("span", {
|
|
143
|
-
className: "leading-none text-4xl font-extrabold tracking-tight"
|
|
144
|
-
}, parseFloat(price).toLocaleString()), /*#__PURE__*/React.createElement("span", {
|
|
145
|
-
className: "leading-none ml-1 text-base font-600 "
|
|
146
|
-
}, "/", description));
|
|
147
|
-
};
|
|
148
|
-
|
|
149
123
|
const PriceCard = props => {
|
|
150
124
|
const {
|
|
151
|
-
id
|
|
125
|
+
id = -1,
|
|
152
126
|
color = '',
|
|
153
|
-
monthly_fee = 0,
|
|
154
|
-
per_reservation_fee = 0,
|
|
155
|
-
expected_monthly_fee = 0,
|
|
156
|
-
expected_per_reservation_fee = 0,
|
|
157
127
|
platform_plan_type_id = 1,
|
|
158
128
|
billing_period_id = 1
|
|
159
129
|
} = props;
|
|
130
|
+
|
|
131
|
+
const handlePlanSelection = id => {
|
|
132
|
+
try {
|
|
133
|
+
let selectedPlatform = platformPricingModels.find(pricing_model => Number(pricing_model.id) === Number(id));
|
|
134
|
+
onClickPlanSelection(selectedPlatform);
|
|
135
|
+
} catch (error) {
|
|
136
|
+
console.error(error);
|
|
137
|
+
}
|
|
138
|
+
};
|
|
139
|
+
|
|
160
140
|
return /*#__PURE__*/React.createElement("div", {
|
|
161
141
|
className: "mx-0 px-4 w-full max-w-full md:max-w-288 bg-white rounded-lg drop-shadow hover:drop-shadow-2xl sm:p-8 border-t-8 transition-all ",
|
|
162
142
|
style: {
|
|
163
143
|
boxShadow: `0px 4px 6px -2px ${color}`,
|
|
164
144
|
minWidth: 250,
|
|
165
145
|
borderTop: `6px solid ${color}`,
|
|
166
|
-
paddingTop: Number(platform_plan_type_id) === 2 ? 21 : 6,
|
|
167
146
|
marginTop: Number(platform_plan_type_id) !== 2 ? 15 : 0,
|
|
168
147
|
zIndex: Number(platform_plan_type_id) === 2 ? 500 : 100
|
|
169
148
|
}
|
|
170
|
-
}, /*#__PURE__*/React.createElement(PlatformPlanTitles, props), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement("div", {
|
|
171
|
-
className: " my-24"
|
|
172
149
|
}, /*#__PURE__*/React.createElement("div", {
|
|
173
|
-
className: "flex flex-wrap md:flex-col justify-center my-12 ",
|
|
174
150
|
style: {
|
|
175
|
-
|
|
151
|
+
paddingTop: Number(platform_plan_type_id) === 2 ? 21 : 6
|
|
176
152
|
}
|
|
177
|
-
}, /*#__PURE__*/React.createElement(
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
}), /*#__PURE__*/React.createElement(PriceDescription, {
|
|
183
|
-
color: color,
|
|
184
|
-
price: per_reservation_fee,
|
|
185
|
-
description: i18next.t('common.app.per_reservation'),
|
|
186
|
-
expected_price: expected_per_reservation_fee
|
|
187
|
-
})), /*#__PURE__*/React.createElement("div", {
|
|
153
|
+
}), /*#__PURE__*/React.createElement(PlatformPlanTitles, props), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement("div", {
|
|
154
|
+
className: "my-24"
|
|
155
|
+
}, /*#__PURE__*/React.createElement(PlatformPlanPrices, _extends({
|
|
156
|
+
i18next: i18next
|
|
157
|
+
}, props)), /*#__PURE__*/React.createElement("div", {
|
|
188
158
|
className: "w-full text-center mt-24"
|
|
189
159
|
}, /*#__PURE__*/React.createElement(Button, {
|
|
190
160
|
className: "max-w-min whitespace-nowrap m-auto font-900",
|
|
@@ -193,7 +163,7 @@ export const PlatformPaymentPlans = props => {
|
|
|
193
163
|
color: color
|
|
194
164
|
},
|
|
195
165
|
onClick: () => {
|
|
196
|
-
|
|
166
|
+
handlePlanSelection(id);
|
|
197
167
|
}
|
|
198
168
|
}, i18next.t('common.app.start_today')))), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement("div", {
|
|
199
169
|
className: "flex flex-col mx-auto w-full max-w-fill text-center min-h-256 "
|
|
@@ -268,7 +238,7 @@ PlatformPaymentPlans.propTypes = {
|
|
|
268
238
|
/** This is the individual pricing models that are offered to our clients */
|
|
269
239
|
platformPricingModels: PropTypes.array.isRequired,
|
|
270
240
|
|
|
271
|
-
/** Callback when a plan is selected. Returns the platform pricing model
|
|
241
|
+
/** Callback when a plan is selected. Returns the selected platform pricing model object. */
|
|
272
242
|
onClickPlanSelection: PropTypes.func,
|
|
273
243
|
|
|
274
244
|
/** i18next localization to use for the component. Don't use the library localization or else it won't load properly on the consuming application */
|
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import PropTypes from 'prop-types';
|
|
3
|
+
import { ThemeProvider } from '@mui/system';
|
|
4
|
+
import { createTheme, useTheme } from '@mui/material/styles';
|
|
5
|
+
/**
|
|
6
|
+
* ## Importing the component in your project
|
|
7
|
+
*
|
|
8
|
+
```js
|
|
9
|
+
|
|
10
|
+
import {PlatformPlanPrices} from 'pcm-shared-components';
|
|
11
|
+
|
|
12
|
+
```
|
|
13
|
+
*
|
|
14
|
+
*/
|
|
15
|
+
|
|
16
|
+
export const PlatformPlanPrices = props => {
|
|
17
|
+
const {
|
|
18
|
+
billing_period_id,
|
|
19
|
+
monthly_fee,
|
|
20
|
+
expected_monthly_fee,
|
|
21
|
+
per_reservation_fee,
|
|
22
|
+
expected_per_reservation_fee,
|
|
23
|
+
color,
|
|
24
|
+
i18next,
|
|
25
|
+
theme
|
|
26
|
+
} = props;
|
|
27
|
+
const compTheme = theme ? theme : useTheme();
|
|
28
|
+
const defaultTheme = createTheme(compTheme);
|
|
29
|
+
const MONTHLY_BILLING_PERIOD = 1; // const YEARLY_BILLING_PERIOD = 2;
|
|
30
|
+
|
|
31
|
+
const PriceDescription = props => {
|
|
32
|
+
const {
|
|
33
|
+
color,
|
|
34
|
+
price = 0,
|
|
35
|
+
description = '',
|
|
36
|
+
expected_price = 0
|
|
37
|
+
} = props;
|
|
38
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
39
|
+
className: "flex flex-row items-baseline mx-4 md:mx-auto text-center w-fit"
|
|
40
|
+
}, Number(expected_price) > 0 && parseFloat(price) > 0 && parseFloat(expected_price) > parseFloat(price) && /*#__PURE__*/React.createElement("div", {
|
|
41
|
+
className: "mx-4"
|
|
42
|
+
}, /*#__PURE__*/React.createElement("span", {
|
|
43
|
+
className: "leading-none text-xl font-500 line-through decoration-gray-500 text-gray-500"
|
|
44
|
+
}, "$"), /*#__PURE__*/React.createElement("span", {
|
|
45
|
+
className: "leading-none text-xl font-500 tracking-tight line-through decoration-gray-500 text-gray-500"
|
|
46
|
+
}, expected_price)), /*#__PURE__*/React.createElement("span", {
|
|
47
|
+
className: "leading-none text-xl font-semibold ",
|
|
48
|
+
style: {
|
|
49
|
+
color: color
|
|
50
|
+
}
|
|
51
|
+
}, "$"), /*#__PURE__*/React.createElement("span", {
|
|
52
|
+
className: "leading-none text-4xl font-extrabold tracking-tight"
|
|
53
|
+
}, parseFloat(price).toLocaleString()), /*#__PURE__*/React.createElement("span", {
|
|
54
|
+
className: "leading-none ml-1 text-base font-600 "
|
|
55
|
+
}, "/", description));
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
return /*#__PURE__*/React.createElement(ThemeProvider, {
|
|
59
|
+
theme: defaultTheme
|
|
60
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
61
|
+
className: "flex flex-wrap md:flex-col justify-center my-12 ",
|
|
62
|
+
style: {
|
|
63
|
+
color: color
|
|
64
|
+
}
|
|
65
|
+
}, /*#__PURE__*/React.createElement(PriceDescription, {
|
|
66
|
+
color: color,
|
|
67
|
+
price: monthly_fee,
|
|
68
|
+
description: Number(billing_period_id) === MONTHLY_BILLING_PERIOD ? i18next.t('common.app.monthly_abbreviation') : i18next.t('common.app.yearly_abbreviation'),
|
|
69
|
+
expected_price: expected_monthly_fee
|
|
70
|
+
}), /*#__PURE__*/React.createElement(PriceDescription, {
|
|
71
|
+
color: color,
|
|
72
|
+
price: per_reservation_fee,
|
|
73
|
+
description: i18next.t('common.app.per_reservation'),
|
|
74
|
+
expected_price: expected_per_reservation_fee
|
|
75
|
+
})));
|
|
76
|
+
};
|
|
77
|
+
export default PlatformPlanPrices;
|
|
78
|
+
PlatformPlanPrices.defaultProps = {
|
|
79
|
+
billing_period_id: '',
|
|
80
|
+
monthly_fee: '',
|
|
81
|
+
expected_monthly_fee: '',
|
|
82
|
+
per_reservation_fee: '',
|
|
83
|
+
expected_per_reservation_fee: '',
|
|
84
|
+
color: '',
|
|
85
|
+
i18next: undefined,
|
|
86
|
+
theme: undefined
|
|
87
|
+
};
|
|
88
|
+
PlatformPlanPrices.propTypes = {
|
|
89
|
+
/** This is the billing period types 1=monthly, 2=yearly*/
|
|
90
|
+
billing_period_id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
|
91
|
+
|
|
92
|
+
/** This is the monthly fee we are charging*/
|
|
93
|
+
monthly_fee: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
|
94
|
+
|
|
95
|
+
/** This is the per reservation fee we are charging*/
|
|
96
|
+
per_reservation_fee: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
|
97
|
+
|
|
98
|
+
/** This is the expected monthly fee, used to simulate what should be the expected price such as a discount*/
|
|
99
|
+
expected_monthly_fee: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
|
100
|
+
|
|
101
|
+
/** This is the expected per reservation fee, used to simulate what should be the expected price such as a discount*/
|
|
102
|
+
expected_per_reservation_fee: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
|
103
|
+
|
|
104
|
+
/** This is the color of the plan*/
|
|
105
|
+
color: PropTypes.string,
|
|
106
|
+
|
|
107
|
+
/** i18next localization to use for the component. Don't use the library localization or else it won't load properly on the consuming application */
|
|
108
|
+
i18next: PropTypes.any,
|
|
109
|
+
|
|
110
|
+
/** Theme object to use on this component, if none provided then the MUI5 theme provider theme is used */
|
|
111
|
+
theme: PropTypes.object
|
|
112
|
+
};
|
|
@@ -58,7 +58,7 @@ PlatformPlanTitles.defaultProps = {
|
|
|
58
58
|
};
|
|
59
59
|
PlatformPlanTitles.propTypes = {
|
|
60
60
|
/** This is the platform plan type id, we should only ever have three types 1=free, 2=standard, 3=premium*/
|
|
61
|
-
platform_plan_type_id: PropTypes.
|
|
61
|
+
platform_plan_type_id: PropTypes.any,
|
|
62
62
|
|
|
63
63
|
/** This is the color of the plan*/
|
|
64
64
|
color: PropTypes.string,
|
package/dist/index.js
CHANGED
|
@@ -24,4 +24,5 @@ import CurrencyTextInput from './components/TextBoxes/CurrencyTextInput';
|
|
|
24
24
|
import ImageStack from './components/Images/ImageStack';
|
|
25
25
|
import PlatformPaymentPlans from './components/Platform/PlatformPaymentPlans';
|
|
26
26
|
import PlatformPlanTitles from './components/Platform/PlatformPlanTitles';
|
|
27
|
-
|
|
27
|
+
import PlatformPlanPrices from './components/Platform/PlatformPlanPrices';
|
|
28
|
+
export { TestButton, CodeHighlight, CustomFab, HelpButton, GenericDialogWindow, PcSharedComponentThemeInheritor, ImageCanvasDraw, PCMScrollbar, TwoColumnDisplay, SimpleTab, HrefLink, GenericAppBar, ReusablePopupMenu, SearchBar, TillButton, DropdownButton, translationResources, coreLocals, currencySymbol, DateRangeCalendar, SimpleLabel, CurrencyTextInput, ImageStack, PlatformPaymentPlans, PlatformPlanTitles, PlatformPlanPrices };
|
package/dist/styles/tailwind.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2196f380;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::-webkit-backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2196f380;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2196f380;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.static{position:static}.absolute{position:absolute}.relative{position:relative}.top-0{top:0}.bottom-0{bottom:0}.left-0{left:0}.right-0{right:0}.m-auto{margin:auto}.m-12{margin:1.2rem}.mx-6{margin-left:.6rem;margin-right:.6rem}.my-auto{margin-top:auto;margin-bottom:auto}.my-4{margin-top:.4rem;margin-bottom:.4rem}.mx-4{margin-left:.4rem;margin-right:.4rem}.mx-0{margin-left:0;margin-right:0}.my-24{margin-top:2.4rem;margin-bottom:2.4rem}.my-12{margin-top:1.2rem;margin-bottom:1.2rem}.mx-auto{margin-left:auto;margin-right:auto}.mx-2{margin-left:.2rem;margin-right:.2rem}.my-6{margin-top:.6rem;margin-bottom:.6rem}.mx-8{margin-left:.8rem;margin-right:.8rem}.ml-0{margin-left:0}.mr-0{margin-right:0}.ml-4{margin-left:.4rem}.mt-12{margin-top:1.2rem}.ml-1{margin-left:.1rem}.mt-24{margin-top:2.4rem}.mt-auto{margin-top:auto}.mb-24{margin-bottom:2.4rem}.mr-24{margin-right:2.4rem}.mb-12{margin-bottom:1.2rem}.mb-0{margin-bottom:0}.mt-4{margin-top:.4rem}.mt-0{margin-top:0}.mt-6{margin-top:.6rem}.mb-2{margin-bottom:.2rem}.ml-6{margin-left:.6rem}.mb-6{margin-bottom:.6rem}.ml-12{margin-left:1.2rem}.mr-12{margin-right:1.2rem}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.hidden{display:none}.h-full{height:100%}.h-screen{height:100vh}.min-h-256{min-height:25.6rem}.w-full{width:100%}.w-auto{width:auto}.w-1\/2{width:50%}.w-2\/5{width:40%}.max-w-full{max-width:100%}.max-w-min{max-width:-webkit-min-content;max-width:-moz-min-content;max-width:min-content}.flex-shrink-0{flex-shrink:0}.grow{flex-grow:1}.transform{transform:translate(var(--tw-translate-x),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))}.cursor-pointer{cursor:pointer}.cursor-not-allowed{cursor:not-allowed}.cursor-default{cursor:default}.list-none{list-style-type:none}.list-disc{list-style-type:disc}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-baseline{align-items:baseline}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.space-x-10>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1rem*var(--tw-space-x-reverse));margin-left:calc(1rem*(1 - var(--tw-space-x-reverse)))}.space-y-10>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-scroll{overflow:scroll}.overscroll-none{overscroll-behavior:none}.truncate{overflow:hidden;text-overflow:ellipsis}.truncate,.whitespace-nowrap{white-space:nowrap}.whitespace-pre-line{white-space:pre-line}.rounded{border-radius:.4rem}.rounded-md{border-radius:.6rem}.rounded-lg{border-radius:.8rem}.rounded-full{border-radius:9999px}.border{border-width:1px}.border-2{border-width:2px}.border-t-8{border-top-width:8px}.border-transparent{border-color:#0000}.bg-green-600{--tw-bg-opacity:1;background-color:rgb(67 160 71/var(--tw-bg-opacity))}.bg-black{--tw-bg-opacity:1;background-color:rgb(34 41 47/var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgb(238 238 238/var(--tw-bg-opacity))}.bg-yellow-100\/50{background-color:#fff9c480}.p-6{padding:.6rem}.p-12{padding:1.2rem}.px-4{padding-left:.4rem;padding-right:.4rem}.py-2{padding-top:.2rem;padding-bottom:.2rem}.px-2{padding-left:.2rem;padding-right:.2rem}.pt-12{padding-top:1.2rem}.pt-4{padding-top:.4rem}.pl-0{padding-left:0}.pr-0{padding-right:0}.pb-4{padding-bottom:.4rem}.pl-8{padding-left:.8rem}.text-center{text-align:center}.font-sans{font-family:Muli,Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.font-serif{font-family:Georgia,Cambria,Times New Roman,Times,serif}.text-sm{font-size:1.4rem;line-height:2rem}.text-17{font-size:1.7rem}.text-xl{font-size:2rem;line-height:2.8rem}.text-4xl{font-size:3.6rem;line-height:4rem}.text-base{font-size:1.6rem;line-height:2.4rem}.text-5xl{font-size:4.8rem;line-height:1}.text-2xl{line-height:3.2rem}.text-24,.text-2xl{font-size:2.4rem}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-500{font-weight:500}.font-semibold{font-weight:600}.font-extrabold{font-weight:800}.font-600{font-weight:600}.font-900{font-weight:900}.leading-tight{line-height:1.25}.leading-none{line-height:1}.tracking-tight{letter-spacing:-.025em}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.text-gray-600{--tw-text-opacity:1;color:rgb(117 117 117/var(--tw-text-opacity))}.text-green-600{--tw-text-opacity:1;color:rgb(67 160 71/var(--tw-text-opacity))}.text-orange-600{--tw-text-opacity:1;color:rgb(251 140 0/var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity:1;color:rgb(158 158 158/var(--tw-text-opacity))}.line-through{-webkit-text-decoration-line:line-through;text-decoration-line:line-through}.no-underline{-webkit-text-decoration-line:none;text-decoration-line:none}.decoration-gray-500{-webkit-text-decoration-color:#9e9e9e;text-decoration-color:#9e9e9e}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.shadow{--tw-shadow:0 1px 3px 0 #0000001a,0 1px 2px 0 #0000000f;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px 0 var(--tw-shadow-color)}.shadow,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.shadow-1{--tw-shadow:0px 2px 1px -1px #0003,0px 1px 1px 0px #00000024,0px 1px 3px 0px #0000001f;--tw-shadow-colored:0px 2px 1px -1px var(--tw-shadow-color),0px 1px 1px 0px var(--tw-shadow-color),0px 1px 3px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.drop-shadow{--tw-drop-shadow:drop-shadow(0 1px 2px #0000001a) drop-shadow(0 1px 1px #0000000f)}.drop-shadow,.drop-shadow-none{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)}.drop-shadow-none{--tw-drop-shadow:drop-shadow(0 0 #0000)}.filter{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)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.hover\:translate-y-1:hover{--tw-translate-y:0.1rem}.hover\:rotate-3:hover,.hover\:translate-y-1:hover{transform:translate(var(--tw-translate-x),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))}.hover\:rotate-3:hover{--tw-rotate:3deg}.hover\:skew-y-3:hover{--tw-skew-y:3deg}.hover\:scale-105:hover,.hover\:skew-y-3:hover{transform:translate(var(--tw-translate-x),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))}.hover\:scale-105:hover{--tw-scale-x:1.05;--tw-scale-y:1.05}.hover\:list-disc:hover{list-style-type:disc}.hover\:bg-green-700:hover{--tw-bg-opacity:1;background-color:rgb(56 142 60/var(--tw-bg-opacity))}.hover\:bg-gray-100\/75:hover{background-color:#f5f5f5bf}.hover\:text-gray-700:hover{--tw-text-opacity:1;color:rgb(97 97 97/var(--tw-text-opacity))}.hover\:underline:hover{-webkit-text-decoration-line:underline;text-decoration-line:underline}.hover\:drop-shadow-2xl:hover{--tw-drop-shadow:drop-shadow(0 25px 25px #00000026);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)}.focus\:outline-none:focus{outline:2px solid #0000;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-green-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(76 175 80/var(--tw-ring-opacity))}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px}@media (prefers-color-scheme:dark){.dark\:text-green-500{--tw-text-opacity:1;color:rgb(76 175 80/var(--tw-text-opacity))}.dark\:text-gray-500{--tw-text-opacity:1;color:rgb(158 158 158/var(--tw-text-opacity))}.dark\:text-orange-500{--tw-text-opacity:1;color:rgb(255 152 0/var(--tw-text-opacity))}}@media (min-width:600px){.sm\:p-8{padding:.8rem}}@media (min-width:960px){.md\:mx-auto{margin-left:auto;margin-right:auto}.md\:max-w-288{max-width:28.8rem}.md\:flex-row{flex-direction:row}.md\:flex-col{flex-direction:column}.md\:pt-0{padding-top:0}}
|
|
1
|
+
*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2196f380;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::-webkit-backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2196f380;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2196f380;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.static{position:static}.absolute{position:absolute}.relative{position:relative}.top-0{top:0}.bottom-0{bottom:0}.left-0{left:0}.right-0{right:0}.m-auto{margin:auto}.m-12{margin:1.2rem}.mx-6{margin-left:.6rem;margin-right:.6rem}.my-auto{margin-top:auto;margin-bottom:auto}.my-4{margin-top:.4rem;margin-bottom:.4rem}.mx-0{margin-left:0;margin-right:0}.my-24{margin-top:2.4rem;margin-bottom:2.4rem}.mx-auto{margin-left:auto;margin-right:auto}.mx-4{margin-left:.4rem;margin-right:.4rem}.my-12{margin-top:1.2rem;margin-bottom:1.2rem}.mx-2{margin-left:.2rem;margin-right:.2rem}.my-6{margin-top:.6rem;margin-bottom:.6rem}.mx-8{margin-left:.8rem;margin-right:.8rem}.ml-0{margin-left:0}.mr-0{margin-right:0}.ml-4{margin-left:.4rem}.mt-12{margin-top:1.2rem}.mt-24{margin-top:2.4rem}.mt-auto{margin-top:auto}.mb-24{margin-bottom:2.4rem}.mr-24{margin-right:2.4rem}.mb-12{margin-bottom:1.2rem}.ml-1{margin-left:.1rem}.mb-0{margin-bottom:0}.mt-4{margin-top:.4rem}.mt-0{margin-top:0}.mt-6{margin-top:.6rem}.mb-2{margin-bottom:.2rem}.ml-6{margin-left:.6rem}.mb-6{margin-bottom:.6rem}.ml-12{margin-left:1.2rem}.mr-12{margin-right:1.2rem}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.hidden{display:none}.h-full{height:100%}.h-screen{height:100vh}.min-h-256{min-height:25.6rem}.w-full{width:100%}.w-auto{width:auto}.w-1\/2{width:50%}.w-2\/5{width:40%}.max-w-full{max-width:100%}.max-w-min{max-width:-webkit-min-content;max-width:-moz-min-content;max-width:min-content}.flex-shrink-0{flex-shrink:0}.grow{flex-grow:1}.transform{transform:translate(var(--tw-translate-x),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))}.cursor-pointer{cursor:pointer}.cursor-not-allowed{cursor:not-allowed}.cursor-default{cursor:default}.list-none{list-style-type:none}.list-disc{list-style-type:disc}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-baseline{align-items:baseline}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.space-x-10>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1rem*var(--tw-space-x-reverse));margin-left:calc(1rem*(1 - var(--tw-space-x-reverse)))}.space-y-10>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-scroll{overflow:scroll}.overscroll-none{overscroll-behavior:none}.truncate{overflow:hidden;text-overflow:ellipsis}.truncate,.whitespace-nowrap{white-space:nowrap}.whitespace-pre-line{white-space:pre-line}.rounded{border-radius:.4rem}.rounded-md{border-radius:.6rem}.rounded-lg{border-radius:.8rem}.rounded-full{border-radius:9999px}.border{border-width:1px}.border-2{border-width:2px}.border-t-8{border-top-width:8px}.border-transparent{border-color:#0000}.bg-green-600{--tw-bg-opacity:1;background-color:rgb(67 160 71/var(--tw-bg-opacity))}.bg-black{--tw-bg-opacity:1;background-color:rgb(34 41 47/var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgb(238 238 238/var(--tw-bg-opacity))}.bg-yellow-100\/50{background-color:#fff9c480}.p-6{padding:.6rem}.p-12{padding:1.2rem}.px-4{padding-left:.4rem;padding-right:.4rem}.py-2{padding-top:.2rem;padding-bottom:.2rem}.px-2{padding-left:.2rem;padding-right:.2rem}.pt-12{padding-top:1.2rem}.pt-4{padding-top:.4rem}.pl-0{padding-left:0}.pr-0{padding-right:0}.pb-4{padding-bottom:.4rem}.pl-8{padding-left:.8rem}.text-center{text-align:center}.font-sans{font-family:Muli,Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.font-serif{font-family:Georgia,Cambria,Times New Roman,Times,serif}.text-sm{font-size:1.4rem;line-height:2rem}.text-17{font-size:1.7rem}.text-xl{font-size:2rem;line-height:2.8rem}.text-4xl{font-size:3.6rem;line-height:4rem}.text-base{font-size:1.6rem;line-height:2.4rem}.text-5xl{font-size:4.8rem;line-height:1}.text-2xl{line-height:3.2rem}.text-24,.text-2xl{font-size:2.4rem}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-900{font-weight:900}.font-500{font-weight:500}.font-semibold{font-weight:600}.font-extrabold{font-weight:800}.font-600{font-weight:600}.leading-tight{line-height:1.25}.leading-none{line-height:1}.tracking-tight{letter-spacing:-.025em}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.text-gray-600{--tw-text-opacity:1;color:rgb(117 117 117/var(--tw-text-opacity))}.text-green-600{--tw-text-opacity:1;color:rgb(67 160 71/var(--tw-text-opacity))}.text-orange-600{--tw-text-opacity:1;color:rgb(251 140 0/var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity:1;color:rgb(158 158 158/var(--tw-text-opacity))}.line-through{-webkit-text-decoration-line:line-through;text-decoration-line:line-through}.no-underline{-webkit-text-decoration-line:none;text-decoration-line:none}.decoration-gray-500{-webkit-text-decoration-color:#9e9e9e;text-decoration-color:#9e9e9e}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.shadow{--tw-shadow:0 1px 3px 0 #0000001a,0 1px 2px 0 #0000000f;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px 0 var(--tw-shadow-color)}.shadow,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.shadow-1{--tw-shadow:0px 2px 1px -1px #0003,0px 1px 1px 0px #00000024,0px 1px 3px 0px #0000001f;--tw-shadow-colored:0px 2px 1px -1px var(--tw-shadow-color),0px 1px 1px 0px var(--tw-shadow-color),0px 1px 3px 0px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.drop-shadow{--tw-drop-shadow:drop-shadow(0 1px 2px #0000001a) drop-shadow(0 1px 1px #0000000f)}.drop-shadow,.drop-shadow-none{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)}.drop-shadow-none{--tw-drop-shadow:drop-shadow(0 0 #0000)}.filter{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)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.hover\:translate-y-1:hover{--tw-translate-y:0.1rem}.hover\:rotate-3:hover,.hover\:translate-y-1:hover{transform:translate(var(--tw-translate-x),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))}.hover\:rotate-3:hover{--tw-rotate:3deg}.hover\:skew-y-3:hover{--tw-skew-y:3deg}.hover\:scale-105:hover,.hover\:skew-y-3:hover{transform:translate(var(--tw-translate-x),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))}.hover\:scale-105:hover{--tw-scale-x:1.05;--tw-scale-y:1.05}.hover\:list-disc:hover{list-style-type:disc}.hover\:bg-green-700:hover{--tw-bg-opacity:1;background-color:rgb(56 142 60/var(--tw-bg-opacity))}.hover\:bg-gray-100\/75:hover{background-color:#f5f5f5bf}.hover\:text-gray-700:hover{--tw-text-opacity:1;color:rgb(97 97 97/var(--tw-text-opacity))}.hover\:underline:hover{-webkit-text-decoration-line:underline;text-decoration-line:underline}.hover\:drop-shadow-2xl:hover{--tw-drop-shadow:drop-shadow(0 25px 25px #00000026);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)}.focus\:outline-none:focus{outline:2px solid #0000;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-green-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(76 175 80/var(--tw-ring-opacity))}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px}@media (prefers-color-scheme:dark){.dark\:text-green-500{--tw-text-opacity:1;color:rgb(76 175 80/var(--tw-text-opacity))}.dark\:text-gray-500{--tw-text-opacity:1;color:rgb(158 158 158/var(--tw-text-opacity))}.dark\:text-orange-500{--tw-text-opacity:1;color:rgb(255 152 0/var(--tw-text-opacity))}}@media (min-width:600px){.sm\:p-8{padding:.8rem}}@media (min-width:960px){.md\:mx-auto{margin-left:auto;margin-right:auto}.md\:max-w-288{max-width:28.8rem}.md\:flex-row{flex-direction:row}.md\:flex-col{flex-direction:column}.md\:pt-0{padding-top:0}}
|