Mirroristas/pockethost
2
0
Fork 0
mirror of https://github.com/pockethost/pockethost.git synced 2025-06-07 06:36:43 +00:00
Code Issues Packages Projects Releases Wiki Activity
pockethost/dist/lander/docs/usage/instances/index.html
Brewhouse Digital 97d5d57231
Marketing - Added Pricing Page (#328)
2023-11-03 13:24:04 -07:00

3784 lines
101 KiB
HTML
Raw Blame History

<!doctype html>
<html class='scroll-smooth' lang="en" data-theme="dark">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- HTML Meta Tags -->
<title>Instance Details - PocketHost</title>
<meta name="description" content="Learn how to manage your PocketHost instance with our comprehensive guide, covering on-demand execution, usage metering, versioning, secrets, and admin access. Master the nuances of using PocketHost and get your PocketBase projects up and running in no time. Essential reading for web &amp; node.js developers.">
<!-- Facebook Meta Tags -->
<meta property="og:url" content="https://pockethost.io/docs/usage/instances/">
<meta property="og:type" content="website">
<meta property="og:title" content="Instance Details - PocketHost">
<meta property="og:description" content="Learn how to manage your PocketHost instance with our comprehensive guide, covering on-demand execution, usage metering, versioning, secrets, and admin access. Master the nuances of using PocketHost and get your PocketBase projects up and running in no time. Essential reading for web &amp; node.js developers.">
<meta property="og:image" content="https://pockethost.io/poster.png">
<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta property="twitter:domain" content="">
<meta property="twitter:url" content="https://pockethost.io/docs/usage/instances/">
<meta name="twitter:title" content="Instance Details - PocketHost">
<meta name="twitter:description" content="Learn how to manage your PocketHost instance with our comprehensive guide, covering on-demand execution, usage metering, versioning, secrets, and admin access. Master the nuances of using PocketHost and get your PocketBase projects up and running in no time. Essential reading for web &amp; node.js developers.">
<meta name="twitter:image" content="https://pockethost.io/poster.png">
<!-- Meta Tags Generated via https://www.opengraph.xyz -->
<meta name="generator" content="Eleventy v2.0.1">
<link rel="alternate" href="/feed/feed.xml" type="application/atom+xml" title="PocketHost">
<link rel="alternate" href="/feed/feed.json" type="application/json" title="PocketHost">
<link href="https://unpkg.com/prismjs@1.20.0/themes/prism-okaidia.css" rel="stylesheet">
<link href="/icons/fontawesome.min.css" rel="stylesheet">
<link href="/icons/all.min.css" rel="stylesheet">
<link href="/icons/brands.min.css" rel="stylesheet">
<style>
/*
! tailwindcss v3.3.5 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
box-sizing: border-box; /* 1 */
border-width: 0; /* 2 */
border-style: solid; /* 2 */
border-color: #e5e7eb; /* 2 */
}
::before,
::after {
--tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
*/
html {
line-height: 1.5; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
-moz-tab-size: 4; /* 3 */
-o-tab-size: 4;
tab-size: 4; /* 3 */
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
font-feature-settings: normal; /* 5 */
font-variation-settings: normal; /* 6 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
margin: 0; /* 1 */
line-height: inherit; /* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
height: 0; /* 1 */
color: inherit; /* 2 */
border-top-width: 1px; /* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
color: inherit;
text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
font-weight: bolder;
}
/*
1. Use the user's configured `mono` font family by default.
2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
font-size: 1em; /* 2 */
}
/*
Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/*
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)
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)
3. Remove gaps between table borders by default.
*/
table {
text-indent: 0; /* 1 */
border-color: inherit; /* 2 */
border-collapse: collapse; /* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-feature-settings: inherit; /* 1 */
font-variation-settings: inherit; /* 1 */
font-size: 100%; /* 1 */
font-weight: inherit; /* 1 */
line-height: inherit; /* 1 */
color: inherit; /* 1 */
margin: 0; /* 2 */
padding: 0; /* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
[type='button'],
[type='reset'],
[type='submit'] {
-webkit-appearance: button; /* 1 */
background-color: transparent; /* 2 */
background-image: none; /* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
-webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
margin: 0;
}
fieldset {
margin: 0;
padding: 0;
}
legend {
padding: 0;
}
ol,
ul,
menu {
list-style: none;
margin: 0;
padding: 0;
}
/*
Reset default styling for dialogs.
*/
dialog {
padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder, textarea::-moz-placeholder {
opacity: 1; /* 1 */
color: #9ca3af; /* 2 */
}
input::placeholder,
textarea::placeholder {
opacity: 1; /* 1 */
color: #9ca3af; /* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
display: block; /* 1 */
vertical-align: middle; /* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
max-width: 100%;
height: auto;
}
/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden] {
display: none;
}
:root,
[data-theme] {
background-color: hsl(var(--b1) / var(--tw-bg-opacity, 1));
color: hsl(var(--bc) / var(--tw-text-opacity, 1));
}
html {
-webkit-tap-highlight-color: transparent;
}
:root {
color-scheme: dark;
--pf: 141 72% 35%;
--sf: 164 73% 35%;
--af: 175 70% 34%;
--in: 198 93% 60%;
--su: 158 64% 52%;
--wa: 43 96% 56%;
--er: 0 91% 71%;
--inc: 198 100% 12%;
--suc: 158 100% 10%;
--wac: 43 100% 11%;
--erc: 0 100% 14%;
--rounded-box: 1rem;
--rounded-btn: 0.5rem;
--rounded-badge: 1.9rem;
--animation-btn: 0.25s;
--animation-input: .2s;
--btn-text-case: uppercase;
--btn-focus-scale: 0.95;
--border-btn: 1px;
--tab-border: 1px;
--tab-radius: 0.5rem;
--p: 141 72% 42%;
--pc: 0 0% 100%;
--s: 164 73% 42%;
--sc: 0 0% 100%;
--a: 175 70% 41%;
--ac: 0 0% 100%;
--n: 213 18% 20%;
--nf: 212 17% 17%;
--nc: 220 13% 69%;
--b1: 212 18% 14%;
--b2: 213 18% 12%;
--b3: 213 18% 10%;
--bc: 0 0% 100%;
}
[data-theme=dark] {
color-scheme: dark;
--pf: 141 72% 35%;
--sf: 164 73% 35%;
--af: 175 70% 34%;
--in: 198 93% 60%;
--su: 158 64% 52%;
--wa: 43 96% 56%;
--er: 0 91% 71%;
--inc: 198 100% 12%;
--suc: 158 100% 10%;
--wac: 43 100% 11%;
--erc: 0 100% 14%;
--rounded-box: 1rem;
--rounded-btn: 0.5rem;
--rounded-badge: 1.9rem;
--animation-btn: 0.25s;
--animation-input: .2s;
--btn-text-case: uppercase;
--btn-focus-scale: 0.95;
--border-btn: 1px;
--tab-border: 1px;
--tab-radius: 0.5rem;
--p: 141 72% 42%;
--pc: 0 0% 100%;
--s: 164 73% 42%;
--sc: 0 0% 100%;
--a: 175 70% 41%;
--ac: 0 0% 100%;
--n: 213 18% 20%;
--nf: 212 17% 17%;
--nc: 220 13% 69%;
--b1: 212 18% 14%;
--b2: 213 18% 12%;
--b3: 213 18% 10%;
--bc: 0 0% 100%;
}
*, ::before, ::after {
--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-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--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: rgb(59 130 246 / 0.5);
--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-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--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: rgb(59 130 246 / 0.5);
--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: ;
}
.container {
width: 100%;
}
@media (min-width: 640px) {
.container {
max-width: 640px;
}
}
@media (min-width: 768px) {
.container {
max-width: 768px;
}
}
@media (min-width: 1024px) {
.container {
max-width: 1024px;
}
}
@media (min-width: 1280px) {
.container {
max-width: 1280px;
}
}
@media (min-width: 1536px) {
.container {
max-width: 1536px;
}
}
.prose {
color: var(--tw-prose-body);
max-width: 65ch;
}
.prose :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 1.25em;
margin-bottom: 1.25em;
}
.prose :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: var(--tw-prose-lead);
font-size: 1.25em;
line-height: 1.6;
margin-top: 1.2em;
margin-bottom: 1.2em;
}
.prose :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: var(--tw-prose-links);
text-decoration: underline;
font-weight: 500;
}
.prose :where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: var(--tw-prose-bold);
font-weight: 600;
}
.prose :where(a strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: inherit;
}
.prose :where(blockquote strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: inherit;
}
.prose :where(thead th strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: inherit;
}
.prose :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
list-style-type: decimal;
margin-top: 1.25em;
margin-bottom: 1.25em;
padding-left: 1.625em;
}
.prose :where(ol[type="A"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
list-style-type: upper-alpha;
}
.prose :where(ol[type="a"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
list-style-type: lower-alpha;
}
.prose :where(ol[type="A" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
list-style-type: upper-alpha;
}
.prose :where(ol[type="a" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
list-style-type: lower-alpha;
}
.prose :where(ol[type="I"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
list-style-type: upper-roman;
}
.prose :where(ol[type="i"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
list-style-type: lower-roman;
}
.prose :where(ol[type="I" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
list-style-type: upper-roman;
}
.prose :where(ol[type="i" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
list-style-type: lower-roman;
}
.prose :where(ol[type="1"]):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
list-style-type: decimal;
}
.prose :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
list-style-type: disc;
margin-top: 1.25em;
margin-bottom: 1.25em;
padding-left: 1.625em;
}
.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
font-weight: 400;
color: var(--tw-prose-counters);
}
.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker {
color: var(--tw-prose-bullets);
}
.prose :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: var(--tw-prose-headings);
font-weight: 600;
margin-top: 1.25em;
}
.prose :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
border-color: var(--tw-prose-hr);
border-top-width: 1px;
margin-top: 3em;
margin-bottom: 3em;
}
.prose :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
font-weight: 500;
font-style: italic;
color: var(--tw-prose-quotes);
border-left-width: 0.25rem;
border-left-color: var(--tw-prose-quote-borders);
quotes: "\201C""\201D""\2018""\2019";
margin-top: 1.6em;
margin-bottom: 1.6em;
padding-left: 1em;
}
.prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
content: open-quote;
}
.prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
content: close-quote;
}
.prose :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: var(--tw-prose-headings);
font-weight: 800;
font-size: 2.25em;
margin-top: 0;
margin-bottom: 0.8888889em;
line-height: 1.1111111;
}
.prose :where(h1 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
font-weight: 900;
color: inherit;
}
.prose :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: var(--tw-prose-headings);
font-weight: 700;
font-size: 1.5em;
margin-top: 2em;
margin-bottom: 1em;
line-height: 1.3333333;
}
.prose :where(h2 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
font-weight: 800;
color: inherit;
}
.prose :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: var(--tw-prose-headings);
font-weight: 600;
font-size: 1.25em;
margin-top: 1.6em;
margin-bottom: 0.6em;
line-height: 1.6;
}
.prose :where(h3 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
font-weight: 700;
color: inherit;
}
.prose :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: var(--tw-prose-headings);
font-weight: 600;
margin-top: 1.5em;
margin-bottom: 0.5em;
line-height: 1.5;
}
.prose :where(h4 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
font-weight: 700;
color: inherit;
}
.prose :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 2em;
margin-bottom: 2em;
}
.prose :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
display: block;
margin-top: 2em;
margin-bottom: 2em;
}
.prose :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
font-weight: 500;
font-family: inherit;
color: var(--tw-prose-kbd);
box-shadow: 0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px 0 rgb(var(--tw-prose-kbd-shadows) / 10%);
font-size: 0.875em;
border-radius: 0.3125rem;
padding-top: 0.1875em;
padding-right: 0.375em;
padding-bottom: 0.1875em;
padding-left: 0.375em;
}
.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: var(--tw-prose-code);
font-weight: 600;
font-size: 0.875em;
}
.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
content: "`";
}
.prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
content: "`";
}
.prose :where(a code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: inherit;
}
.prose :where(h1 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: inherit;
}
.prose :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: inherit;
font-size: 0.875em;
}
.prose :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: inherit;
font-size: 0.9em;
}
.prose :where(h4 code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: inherit;
}
.prose :where(blockquote code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: inherit;
}
.prose :where(thead th code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: inherit;
}
.prose :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: var(--tw-prose-pre-code);
background-color: var(--tw-prose-pre-bg);
overflow-x: auto;
font-weight: 400;
font-size: 0.875em;
line-height: 1.7142857;
margin-top: 1.7142857em;
margin-bottom: 1.7142857em;
border-radius: 0.375rem;
padding-top: 0.8571429em;
padding-right: 1.1428571em;
padding-bottom: 0.8571429em;
padding-left: 1.1428571em;
}
.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
background-color: transparent;
border-width: 0;
border-radius: 0;
padding: 0;
font-weight: inherit;
color: inherit;
font-size: inherit;
font-family: inherit;
line-height: inherit;
}
.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before {
content: none;
}
.prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after {
content: none;
}
.prose :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
width: 100%;
table-layout: auto;
text-align: left;
margin-top: 2em;
margin-bottom: 2em;
font-size: 0.875em;
line-height: 1.7142857;
}
.prose :where(thead):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
border-bottom-width: 1px;
border-bottom-color: var(--tw-prose-th-borders);
}
.prose :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: var(--tw-prose-headings);
font-weight: 600;
vertical-align: bottom;
padding-right: 0.5714286em;
padding-bottom: 0.5714286em;
padding-left: 0.5714286em;
}
.prose :where(tbody tr):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
border-bottom-width: 1px;
border-bottom-color: var(--tw-prose-td-borders);
}
.prose :where(tbody tr:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
border-bottom-width: 0;
}
.prose :where(tbody td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
vertical-align: baseline;
}
.prose :where(tfoot):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
border-top-width: 1px;
border-top-color: var(--tw-prose-th-borders);
}
.prose :where(tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
vertical-align: top;
}
.prose :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 0;
margin-bottom: 0;
}
.prose :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
color: var(--tw-prose-captions);
font-size: 0.875em;
line-height: 1.4285714;
margin-top: 0.8571429em;
}
.prose {
--tw-prose-body: #374151;
--tw-prose-headings: #111827;
--tw-prose-lead: #4b5563;
--tw-prose-links: #111827;
--tw-prose-bold: #111827;
--tw-prose-counters: #6b7280;
--tw-prose-bullets: #d1d5db;
--tw-prose-hr: #e5e7eb;
--tw-prose-quotes: #111827;
--tw-prose-quote-borders: #e5e7eb;
--tw-prose-captions: #6b7280;
--tw-prose-kbd: #111827;
--tw-prose-kbd-shadows: 17 24 39;
--tw-prose-code: #111827;
--tw-prose-pre-code: #e5e7eb;
--tw-prose-pre-bg: #1f2937;
--tw-prose-th-borders: #d1d5db;
--tw-prose-td-borders: #e5e7eb;
--tw-prose-invert-body: #d1d5db;
--tw-prose-invert-headings: #fff;
--tw-prose-invert-lead: #9ca3af;
--tw-prose-invert-links: #fff;
--tw-prose-invert-bold: #fff;
--tw-prose-invert-counters: #9ca3af;
--tw-prose-invert-bullets: #4b5563;
--tw-prose-invert-hr: #374151;
--tw-prose-invert-quotes: #f3f4f6;
--tw-prose-invert-quote-borders: #374151;
--tw-prose-invert-captions: #9ca3af;
--tw-prose-invert-kbd: #fff;
--tw-prose-invert-kbd-shadows: 255 255 255;
--tw-prose-invert-code: #fff;
--tw-prose-invert-pre-code: #d1d5db;
--tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
--tw-prose-invert-th-borders: #4b5563;
--tw-prose-invert-td-borders: #374151;
font-size: 1rem;
line-height: 1.75;
}
.prose :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 0;
margin-bottom: 0;
}
.prose :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 2em;
margin-bottom: 2em;
}
.prose :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 0.5em;
margin-bottom: 0.5em;
}
.prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
padding-left: 0.375em;
}
.prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
padding-left: 0.375em;
}
.prose :where(.prose > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 0.75em;
margin-bottom: 0.75em;
}
.prose :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 1.25em;
}
.prose :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-bottom: 1.25em;
}
.prose :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 1.25em;
}
.prose :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-bottom: 1.25em;
}
.prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 0.75em;
margin-bottom: 0.75em;
}
.prose :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 1.25em;
margin-bottom: 1.25em;
}
.prose :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 0.5em;
padding-left: 1.625em;
}
.prose :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 0;
}
.prose :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 0;
}
.prose :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 0;
}
.prose :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 0;
}
.prose :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
padding-left: 0;
}
.prose :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
padding-right: 0;
}
.prose :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
padding-top: 0.5714286em;
padding-right: 0.5714286em;
padding-bottom: 0.5714286em;
padding-left: 0.5714286em;
}
.prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
padding-left: 0;
}
.prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
padding-right: 0;
}
.prose :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 2em;
margin-bottom: 2em;
}
.prose :where(.prose > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-top: 0;
}
.prose :where(.prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
margin-bottom: 0;
}
.alert {
display: grid;
width: 100%;
grid-auto-flow: row;
align-content: flex-start;
align-items: center;
justify-items: center;
gap: 1rem;
text-align: center;
border-width: 1px;
--tw-border-opacity: 1;
border-color: hsl(var(--b2) / var(--tw-border-opacity));
padding: 1rem;
--tw-text-opacity: 1;
color: hsl(var(--bc) / var(--tw-text-opacity));
border-radius: var(--rounded-box, 1rem);
--alert-bg: hsl(var(--b2));
--alert-bg-mix: hsl(var(--b1));
background-color: var(--alert-bg);
}
@media (min-width: 640px) {
.alert {
grid-auto-flow: column;
grid-template-columns: auto minmax(auto,1fr);
justify-items: start;
text-align: left;
}
}
@media (hover:hover) {
.label a:hover {
--tw-text-opacity: 1;
color: hsl(var(--bc) / var(--tw-text-opacity));
}
.menu li > *:not(ul):not(.menu-title):not(details):active,
.menu li > *:not(ul):not(.menu-title):not(details).active,
.menu li > details > summary:active {
--tw-bg-opacity: 1;
background-color: hsl(var(--n) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--nc) / var(--tw-text-opacity));
}
.tab:hover {
--tw-text-opacity: 1;
}
.table tr.hover:hover,
.table tr.hover:nth-child(even):hover {
--tw-bg-opacity: 1;
background-color: hsl(var(--b2) / var(--tw-bg-opacity));
}
}
.btn {
display: inline-flex;
flex-shrink: 0;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
flex-wrap: wrap;
align-items: center;
justify-content: center;
border-color: transparent;
border-color: hsl(var(--b2) / var(--tw-border-opacity));
text-align: center;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
transition-duration: 200ms;
border-radius: var(--rounded-btn, 0.5rem);
height: 3rem;
padding-left: 1rem;
padding-right: 1rem;
min-height: 3rem;
font-size: 0.875rem;
line-height: 1em;
gap: 0.5rem;
font-weight: 600;
text-decoration-line: none;
border-width: var(--border-btn, 1px);
animation: button-pop var(--animation-btn, 0.25s) ease-out;
text-transform: var(--btn-text-case, uppercase);
--tw-border-opacity: 1;
--tw-bg-opacity: 1;
background-color: hsl(var(--b2) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--bc) / var(--tw-text-opacity));
outline-color: hsl(var(--bc) / 1);
}
.btn-disabled,
.btn[disabled],
.btn:disabled {
pointer-events: none;
}
.btn-square {
height: 3rem;
width: 3rem;
padding: 0px;
}
.btn-group > input[type="radio"].btn {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.btn-group > input[type="radio"].btn:before {
content: attr(data-title);
}
.btn:is(input[type="checkbox"]),
.btn:is(input[type="radio"]) {
width: auto;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.btn:is(input[type="checkbox"]):after,
.btn:is(input[type="radio"]):after {
--tw-content: attr(aria-label);
content: var(--tw-content);
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown > *:not(summary):focus {
outline: 2px solid transparent;
outline-offset: 2px;
}
.dropdown .dropdown-content {
position: absolute;
}
.dropdown:is(:not(details)) .dropdown-content {
visibility: hidden;
opacity: 0;
transform-origin: top;
--tw-scale-x: .95;
--tw-scale-y: .95;
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));
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
transition-duration: 200ms;
}
.dropdown-end .dropdown-content {
right: 0px;
}
.dropdown-left .dropdown-content {
bottom: auto;
right: 100%;
top: 0px;
transform-origin: right;
}
.dropdown-right .dropdown-content {
bottom: auto;
left: 100%;
top: 0px;
transform-origin: left;
}
.dropdown-bottom .dropdown-content {
bottom: auto;
top: 100%;
transform-origin: top;
}
.dropdown-top .dropdown-content {
bottom: 100%;
top: auto;
transform-origin: bottom;
}
.dropdown-end.dropdown-right .dropdown-content {
bottom: 0px;
top: auto;
}
.dropdown-end.dropdown-left .dropdown-content {
bottom: 0px;
top: auto;
}
.dropdown.dropdown-open .dropdown-content,
.dropdown:not(.dropdown-hover):focus .dropdown-content,
.dropdown:focus-within .dropdown-content {
visibility: visible;
opacity: 1;
}
@media (hover: hover) {
.dropdown.dropdown-hover:hover .dropdown-content {
visibility: visible;
opacity: 1;
}
.btn:hover {
--tw-border-opacity: 1;
border-color: hsl(var(--b3) / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: hsl(var(--b3) / var(--tw-bg-opacity));
}
.btn-primary:hover {
--tw-border-opacity: 1;
border-color: hsl(var(--pf) / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: hsl(var(--pf) / var(--tw-bg-opacity));
}
.btn.glass:hover {
--glass-opacity: 25%;
--glass-border-opacity: 15%;
}
.btn-ghost:hover {
--tw-border-opacity: 0;
background-color: hsl(var(--bc) / var(--tw-bg-opacity));
--tw-bg-opacity: 0.2;
}
.btn-outline:hover {
--tw-border-opacity: 1;
border-color: hsl(var(--bc) / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: hsl(var(--bc) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--b1) / var(--tw-text-opacity));
}
.btn-outline.btn-primary:hover {
--tw-border-opacity: 1;
border-color: hsl(var(--pf) / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: hsl(var(--pf) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--pc) / var(--tw-text-opacity));
}
.btn-outline.btn-secondary:hover {
--tw-border-opacity: 1;
border-color: hsl(var(--sf) / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: hsl(var(--sf) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--sc) / var(--tw-text-opacity));
}
.btn-outline.btn-accent:hover {
--tw-border-opacity: 1;
border-color: hsl(var(--af) / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: hsl(var(--af) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--ac) / var(--tw-text-opacity));
}
.btn-outline.btn-success:hover {
--tw-border-opacity: 1;
border-color: hsl(var(--su) / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: hsl(var(--su) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--suc) / var(--tw-text-opacity));
}
.btn-outline.btn-info:hover {
--tw-border-opacity: 1;
border-color: hsl(var(--in) / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: hsl(var(--in) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--inc) / var(--tw-text-opacity));
}
.btn-outline.btn-warning:hover {
--tw-border-opacity: 1;
border-color: hsl(var(--wa) / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: hsl(var(--wa) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--wac) / var(--tw-text-opacity));
}
.btn-outline.btn-error:hover {
--tw-border-opacity: 1;
border-color: hsl(var(--er) / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: hsl(var(--er) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--erc) / var(--tw-text-opacity));
}
.btn-disabled:hover,
.btn[disabled]:hover,
.btn:disabled:hover {
--tw-border-opacity: 0;
background-color: hsl(var(--n) / var(--tw-bg-opacity));
--tw-bg-opacity: 0.2;
color: hsl(var(--bc) / var(--tw-text-opacity));
--tw-text-opacity: 0.2;
}
.btn:is(input[type="checkbox"]:checked):hover, .btn:is(input[type="radio"]:checked):hover {
--tw-border-opacity: 1;
border-color: hsl(var(--pf) / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: hsl(var(--pf) / var(--tw-bg-opacity));
}
.dropdown.dropdown-hover:hover .dropdown-content {
--tw-scale-x: 1;
--tw-scale-y: 1;
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));
}
:where(.menu li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(.active):hover, :where(.menu li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(.active):hover {
cursor: pointer;
background-color: hsl(var(--bc) / 0.1);
--tw-text-opacity: 1;
color: hsl(var(--bc) / var(--tw-text-opacity));
outline: 2px solid transparent;
outline-offset: 2px;
}
.tab[disabled],
.tab[disabled]:hover {
cursor: not-allowed;
color: hsl(var(--bc) / var(--tw-text-opacity));
--tw-text-opacity: 0.2;
}
}
.dropdown:is(details) summary::-webkit-details-marker {
display: none;
}
.footer {
display: grid;
width: 100%;
grid-auto-flow: row;
place-items: start;
-moz-column-gap: 1rem;
column-gap: 1rem;
row-gap: 2.5rem;
font-size: 0.875rem;
line-height: 1.25rem;
}
.footer > * {
display: grid;
place-items: start;
gap: 0.5rem;
}
@media (min-width: 48rem) {
.footer {
grid-auto-flow: column;
}
.footer-center {
grid-auto-flow: row dense;
}
}
.label {
display: flex;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
align-items: center;
justify-content: space-between;
padding-left: 0.25rem;
padding-right: 0.25rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.input {
flex-shrink: 1;
height: 3rem;
padding-left: 1rem;
padding-right: 1rem;
font-size: 1rem;
line-height: 2;
line-height: 1.5rem;
border-width: 1px;
border-color: hsl(var(--bc) / var(--tw-border-opacity));
--tw-border-opacity: 0;
--tw-bg-opacity: 1;
background-color: hsl(var(--b1) / var(--tw-bg-opacity));
border-radius: var(--rounded-btn, 0.5rem);
}
.input-group > .input {
isolation: isolate;
}
.input-group > *,
.input-group > .input,
.input-group > .textarea,
.input-group > .select {
border-radius: 0px;
}
.join {
display: inline-flex;
align-items: stretch;
border-radius: var(--rounded-btn, 0.5rem);
}
.join :where(.join-item) {
border-start-end-radius: 0;
border-end-end-radius: 0;
border-end-start-radius: 0;
border-start-start-radius: 0;
}
.join .join-item:not(:first-child):not(:last-child),
.join *:not(:first-child):not(:last-child) .join-item {
border-start-end-radius: 0;
border-end-end-radius: 0;
border-end-start-radius: 0;
border-start-start-radius: 0;
}
.join .join-item:first-child:not(:last-child),
.join *:first-child:not(:last-child) .join-item {
border-start-end-radius: 0;
border-end-end-radius: 0;
}
.join .dropdown .join-item:first-child:not(:last-child),
.join *:first-child:not(:last-child) .dropdown .join-item {
border-start-end-radius: inherit;
border-end-end-radius: inherit;
}
.join :where(.join-item:first-child:not(:last-child)),
.join :where(*:first-child:not(:last-child) .join-item) {
border-end-start-radius: inherit;
border-start-start-radius: inherit;
}
.join .join-item:last-child:not(:first-child),
.join *:last-child:not(:first-child) .join-item {
border-end-start-radius: 0;
border-start-start-radius: 0;
}
.join :where(.join-item:last-child:not(:first-child)),
.join :where(*:last-child:not(:first-child) .join-item) {
border-start-end-radius: inherit;
border-end-end-radius: inherit;
}
@supports not selector(:has(*)) {
:where(.join *) {
border-radius: inherit;
}
}
@supports selector(:has(*)) {
:where(.join *:has(.join-item)) {
border-radius: inherit;
}
}
.link {
cursor: pointer;
text-decoration-line: underline;
}
.menu {
display: flex;
flex-direction: column;
flex-wrap: wrap;
font-size: 0.875rem;
line-height: 1.25rem;
padding: 0.5rem;
}
.menu :where(li ul) {
position: relative;
white-space: nowrap;
margin-left: 1rem;
padding-left: 0.5rem;
}
.menu :where(li:not(.menu-title) > *:not(ul):not(details):not(.menu-title)),
.menu :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
display: grid;
grid-auto-flow: column;
align-content: flex-start;
align-items: center;
gap: 0.5rem;
grid-auto-columns: minmax(auto, max-content) auto max-content;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.menu li.disabled {
cursor: not-allowed;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
color: hsl(var(--bc) / 0.3);
}
.menu :where(li > .menu-dropdown:not(.menu-dropdown-show)) {
display: none;
}
:where(.menu li) {
position: relative;
display: flex;
flex-shrink: 0;
flex-direction: column;
flex-wrap: wrap;
align-items: stretch;
}
:where(.menu li) .badge {
justify-self: end;
}
.progress {
position: relative;
width: 100%;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
overflow: hidden;
height: 0.5rem;
background-color: hsl(var(--bc) / 0.2);
border-radius: var(--rounded-box, 1rem);
}
.range {
height: 1.5rem;
width: 100%;
cursor: pointer;
-moz-appearance: none;
appearance: none;
-webkit-appearance: none;
--range-shdw: var(--bc);
overflow: hidden;
background-color: transparent;
border-radius: var(--rounded-box, 1rem);
}
.range:focus {
outline: none;
}
.select {
display: inline-flex;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
height: 3rem;
padding-left: 1rem;
padding-right: 2.5rem;
font-size: 0.875rem;
line-height: 1.25rem;
line-height: 2;
min-height: 3rem;
border-width: 1px;
border-color: hsl(var(--bc) / var(--tw-border-opacity));
--tw-border-opacity: 0;
--tw-bg-opacity: 1;
background-color: hsl(var(--b1) / var(--tw-bg-opacity));
border-radius: var(--rounded-btn, 0.5rem);
background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
linear-gradient(135deg, currentColor 50%, transparent 50%);
background-position: calc(100% - 20px) calc(1px + 50%),
calc(100% - 16.1px) calc(1px + 50%);
background-size: 4px 4px,
4px 4px;
background-repeat: no-repeat;
}
.select[multiple] {
height: auto;
}
.stats {
display: inline-grid;
--tw-bg-opacity: 1;
background-color: hsl(var(--b1) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--bc) / var(--tw-text-opacity));
border-radius: var(--rounded-box, 1rem);
}
:where(.stats) {
grid-auto-flow: column;
overflow-x: auto;
}
.steps {
display: inline-grid;
grid-auto-flow: column;
overflow: hidden;
overflow-x: auto;
counter-reset: step;
grid-auto-columns: 1fr;
}
.steps .step {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
grid-template-columns: auto;
grid-template-rows: repeat(2, minmax(0, 1fr));
grid-template-rows: 40px 1fr;
place-items: center;
text-align: center;
min-width: 4rem;
}
.tab {
position: relative;
display: inline-flex;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
flex-wrap: wrap;
align-items: center;
justify-content: center;
text-align: center;
height: 2rem;
font-size: 0.875rem;
line-height: 1.25rem;
line-height: 2;
--tab-padding: 1rem;
--tw-text-opacity: 0.5;
--tab-color: hsl(var(--bc) / var(--tw-text-opacity, 1));
--tab-bg: hsl(var(--b1) / var(--tw-bg-opacity, 1));
--tab-border-color: hsl(var(--b3) / var(--tw-bg-opacity, 1));
color: var(--tab-color);
padding-left: var(--tab-padding, 1rem);
padding-right: var(--tab-padding, 1rem);
}
.table {
position: relative;
width: 100%;
text-align: left;
font-size: 0.875rem;
line-height: 1.25rem;
border-radius: var(--rounded-box, 1rem);
}
.table :where(.table-pin-rows thead tr) {
position: sticky;
top: 0px;
z-index: 1;
--tw-bg-opacity: 1;
background-color: hsl(var(--b1) / var(--tw-bg-opacity));
}
.table :where(.table-pin-rows tfoot tr) {
position: sticky;
bottom: 0px;
z-index: 1;
--tw-bg-opacity: 1;
background-color: hsl(var(--b1) / var(--tw-bg-opacity));
}
.table :where(.table-pin-cols tr th) {
position: sticky;
left: 0px;
right: 0px;
--tw-bg-opacity: 1;
background-color: hsl(var(--b1) / var(--tw-bg-opacity));
}
.toggle {
flex-shrink: 0;
--tglbg: hsl(var(--b1));
--handleoffset: 1.5rem;
--handleoffsetcalculator: calc(var(--handleoffset) * -1);
--togglehandleborder: 0 0;
height: 1.5rem;
width: 3rem;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-width: 1px;
border-color: hsl(var(--bc) / var(--tw-border-opacity));
--tw-border-opacity: 0.2;
background-color: hsl(var(--bc) / var(--tw-bg-opacity));
--tw-bg-opacity: 0.5;
border-radius: var(--rounded-badge, 1.9rem);
transition: background,
box-shadow var(--animation-input, 0.2s) ease-out;
box-shadow: var(--handleoffsetcalculator) 0 0 2px var(--tglbg) inset,
0 0 0 2px var(--tglbg) inset,
var(--togglehandleborder);
}
.btm-nav > *:where(.active) {
border-top-width: 2px;
--tw-bg-opacity: 1;
background-color: hsl(var(--b1) / var(--tw-bg-opacity));
}
.btm-nav > * .label {
font-size: 1rem;
line-height: 1.5rem;
}
.btn:active:hover,
.btn:active:focus {
animation: button-pop 0s ease-out;
transform: scale(var(--btn-focus-scale, 0.97));
}
.btn:focus-visible {
outline-style: solid;
outline-width: 2px;
outline-offset: 2px;
}
.btn-primary {
--tw-border-opacity: 1;
border-color: hsl(var(--p) / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: hsl(var(--p) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--pc) / var(--tw-text-opacity));
outline-color: hsl(var(--p) / 1);
}
.btn-primary.btn-active {
--tw-border-opacity: 1;
border-color: hsl(var(--pf) / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: hsl(var(--pf) / var(--tw-bg-opacity));
}
.btn.glass {
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
outline-color: currentColor;
}
.btn.glass.btn-active {
--glass-opacity: 25%;
--glass-border-opacity: 15%;
}
.btn-ghost {
border-width: 1px;
border-color: transparent;
background-color: transparent;
color: currentColor;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
outline-color: currentColor;
}
.btn-ghost.btn-active {
--tw-border-opacity: 0;
background-color: hsl(var(--bc) / var(--tw-bg-opacity));
--tw-bg-opacity: 0.2;
}
.btn-outline {
border-color: currentColor;
background-color: transparent;
--tw-text-opacity: 1;
color: hsl(var(--bc) / var(--tw-text-opacity));
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.btn-outline.btn-active {
--tw-border-opacity: 1;
border-color: hsl(var(--bc) / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: hsl(var(--bc) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--b1) / var(--tw-text-opacity));
}
.btn-outline.btn-primary {
--tw-text-opacity: 1;
color: hsl(var(--p) / var(--tw-text-opacity));
}
.btn-outline.btn-primary.btn-active {
--tw-border-opacity: 1;
border-color: hsl(var(--pf) / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: hsl(var(--pf) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--pc) / var(--tw-text-opacity));
}
.btn-outline.btn-secondary {
--tw-text-opacity: 1;
color: hsl(var(--s) / var(--tw-text-opacity));
}
.btn-outline.btn-secondary.btn-active {
--tw-border-opacity: 1;
border-color: hsl(var(--sf) / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: hsl(var(--sf) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--sc) / var(--tw-text-opacity));
}
.btn-outline.btn-accent {
--tw-text-opacity: 1;
color: hsl(var(--a) / var(--tw-text-opacity));
}
.btn-outline.btn-accent.btn-active {
--tw-border-opacity: 1;
border-color: hsl(var(--af) / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: hsl(var(--af) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--ac) / var(--tw-text-opacity));
}
.btn-outline.btn-success {
--tw-text-opacity: 1;
color: hsl(var(--su) / var(--tw-text-opacity));
}
.btn-outline.btn-success.btn-active {
--tw-border-opacity: 1;
border-color: hsl(var(--su) / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: hsl(var(--su) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--suc) / var(--tw-text-opacity));
}
.btn-outline.btn-info {
--tw-text-opacity: 1;
color: hsl(var(--in) / var(--tw-text-opacity));
}
.btn-outline.btn-info.btn-active {
--tw-border-opacity: 1;
border-color: hsl(var(--in) / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: hsl(var(--in) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--inc) / var(--tw-text-opacity));
}
.btn-outline.btn-warning {
--tw-text-opacity: 1;
color: hsl(var(--wa) / var(--tw-text-opacity));
}
.btn-outline.btn-warning.btn-active {
--tw-border-opacity: 1;
border-color: hsl(var(--wa) / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: hsl(var(--wa) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--wac) / var(--tw-text-opacity));
}
.btn-outline.btn-error {
--tw-text-opacity: 1;
color: hsl(var(--er) / var(--tw-text-opacity));
}
.btn-outline.btn-error.btn-active {
--tw-border-opacity: 1;
border-color: hsl(var(--er) / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: hsl(var(--er) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--erc) / var(--tw-text-opacity));
}
.btn.btn-disabled,
.btn[disabled],
.btn:disabled {
--tw-border-opacity: 0;
background-color: hsl(var(--n) / var(--tw-bg-opacity));
--tw-bg-opacity: 0.2;
color: hsl(var(--bc) / var(--tw-text-opacity));
--tw-text-opacity: 0.2;
}
.btn-group > input[type="radio"]:checked.btn,
.btn-group > .btn-active {
--tw-border-opacity: 1;
border-color: hsl(var(--p) / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: hsl(var(--p) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--pc) / var(--tw-text-opacity));
}
.btn-group > input[type="radio"]:checked.btn:focus-visible, .btn-group > .btn-active:focus-visible {
outline-style: solid;
outline-width: 2px;
outline-color: hsl(var(--p) / 1);
}
.btn:is(input[type="checkbox"]:checked),
.btn:is(input[type="radio"]:checked) {
--tw-border-opacity: 1;
border-color: hsl(var(--p) / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: hsl(var(--p) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--pc) / var(--tw-text-opacity));
}
.btn:is(input[type="checkbox"]:checked):focus-visible, .btn:is(input[type="radio"]:checked):focus-visible {
outline-color: hsl(var(--p) / 1);
}
@keyframes button-pop {
0% {
transform: scale(var(--btn-focus-scale, 0.98));
}
40% {
transform: scale(1.02);
}
100% {
transform: scale(1);
}
}
.card.compact .card-body {
padding: 1rem;
font-size: 0.875rem;
line-height: 1.25rem;
}
@keyframes checkmark {
0% {
background-position-y: 5px;
}
50% {
background-position-y: -2px;
}
100% {
background-position-y: 0;
}
}
.dropdown.dropdown-open .dropdown-content,
.dropdown:focus .dropdown-content,
.dropdown:focus-within .dropdown-content {
--tw-scale-x: 1;
--tw-scale-y: 1;
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));
}
.input input:focus {
outline: 2px solid transparent;
outline-offset: 2px;
}
.input[list]::-webkit-calendar-picker-indicator {
line-height: 1em;
}
.input:focus,
.input:focus-within {
outline-style: solid;
outline-width: 2px;
outline-offset: 2px;
outline-color: hsl(var(--bc) / 0.2);
}
.input-disabled,
.input:disabled,
.input[disabled] {
cursor: not-allowed;
--tw-border-opacity: 1;
border-color: hsl(var(--b2) / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: hsl(var(--b2) / var(--tw-bg-opacity));
--tw-text-opacity: 0.2;
}
.input-disabled::-moz-placeholder, .input:disabled::-moz-placeholder, .input[disabled]::-moz-placeholder {
color: hsl(var(--bc) / var(--tw-placeholder-opacity));
--tw-placeholder-opacity: 0.2;
}
.input-disabled::placeholder,
.input:disabled::placeholder,
.input[disabled]::placeholder {
color: hsl(var(--bc) / var(--tw-placeholder-opacity));
--tw-placeholder-opacity: 0.2;
}
.join > :where(*:not(:first-child)) {
margin-top: 0px;
margin-bottom: 0px;
margin-left: -1px;
}
.link:focus {
outline: 2px solid transparent;
outline-offset: 2px;
}
.link:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
}
:where(.menu li:empty) {
background-color: hsl(var(--bc) / 0.1);
margin: 0.5rem 1rem;
height: 1px;
}
.menu :where(li ul):before {
position: absolute;
bottom: 0.75rem;
left: 0px;
top: 0.75rem;
width: 1px;
background-color: hsl(var(--bc) / 0.1);
content: "";
}
.menu :where(li:not(.menu-title) > *:not(ul):not(details):not(.menu-title)),
.menu :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
padding-left: 1rem;
padding-right: 1rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
text-align: left;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
transition-duration: 200ms;
border-radius: var(--rounded-btn, 0.5rem);
text-wrap: balance;
}
:where(.menu li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(summary):not(.active).focus,
:where(.menu li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(summary):not(.active):focus,
:where(.menu li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):is(summary):not(.active):focus-visible,
:where(.menu li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(summary):not(.active).focus,
:where(.menu li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(summary):not(.active):focus,
:where(.menu li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):is(summary):not(.active):focus-visible {
cursor: pointer;
background-color: hsl(var(--bc) / 0.1);
--tw-text-opacity: 1;
color: hsl(var(--bc) / var(--tw-text-opacity));
outline: 2px solid transparent;
outline-offset: 2px;
}
.menu li > *:not(ul):not(.menu-title):not(details):active,
.menu li > *:not(ul):not(.menu-title):not(details).active,
.menu li > details > summary:active {
--tw-bg-opacity: 1;
background-color: hsl(var(--n) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--nc) / var(--tw-text-opacity));
}
.menu :where(li > details > summary)::-webkit-details-marker {
display: none;
}
.menu :where(li > details > summary):after,
.menu :where(li > .menu-dropdown-toggle):after {
justify-self: end;
display: block;
margin-top: -0.5rem;
height: 0.5rem;
width: 0.5rem;
transform: rotate(45deg);
transition-property: transform, margin-top;
transition-duration: 0.3s;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
content: "";
transform-origin: 75% 75%;
box-shadow: 2px 2px;
pointer-events: none;
}
.menu :where(li > details[open] > summary):after,
.menu :where(li > .menu-dropdown-toggle.menu-dropdown-show):after {
transform: rotate(225deg);
margin-top: 0;
}
.mockup-phone .display {
overflow: hidden;
border-radius: 40px;
margin-top: -25px;
}
.mockup-browser .mockup-browser-toolbar .input {
position: relative;
margin-left: auto;
margin-right: auto;
display: block;
height: 1.75rem;
width: 24rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
--tw-bg-opacity: 1;
background-color: hsl(var(--b2) / var(--tw-bg-opacity));
padding-left: 2rem;
}
.mockup-browser .mockup-browser-toolbar .input:before {
content: "";
position: absolute;
left: 0.5rem;
top: 50%;
aspect-ratio: 1 / 1;
height: 0.75rem;
--tw-translate-y: -50%;
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));
border-radius: 9999px;
border-width: 2px;
border-color: currentColor;
opacity: 0.6;
}
.mockup-browser .mockup-browser-toolbar .input:after {
content: "";
position: absolute;
left: 1.25rem;
top: 50%;
height: 0.5rem;
--tw-translate-y: 25%;
--tw-rotate: -45deg;
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));
border-radius: 9999px;
border-width: 1px;
border-color: currentColor;
opacity: 0.6;
}
@keyframes modal-pop {
0% {
opacity: 0;
}
}
.progress::-moz-progress-bar {
--tw-bg-opacity: 1;
background-color: hsl(var(--bc) / var(--tw-bg-opacity));
border-radius: var(--rounded-box, 1rem);
}
.progress:indeterminate {
--progress-color: hsl(var(--bc));
background-image: repeating-linear-gradient(
90deg,
var(--progress-color) -1%,
var(--progress-color) 10%,
transparent 10%,
transparent 90%
);
background-size: 200%;
background-position-x: 15%;
animation: progress-loading 5s ease-in-out infinite;
}
.progress::-webkit-progress-bar {
background-color: transparent;
border-radius: var(--rounded-box, 1rem);
}
.progress::-webkit-progress-value {
--tw-bg-opacity: 1;
background-color: hsl(var(--bc) / var(--tw-bg-opacity));
border-radius: var(--rounded-box, 1rem);
}
.progress:indeterminate::-moz-progress-bar {
background-color: transparent;
background-image: repeating-linear-gradient(
90deg,
var(--progress-color) -1%,
var(--progress-color) 10%,
transparent 10%,
transparent 90%
);
background-size: 200%;
background-position-x: 15%;
animation: progress-loading 5s ease-in-out infinite;
}
@keyframes progress-loading {
50% {
background-position-x: -115%;
}
}
@keyframes radiomark {
0% {
box-shadow: 0 0 0 12px hsl(var(--b1)) inset,
0 0 0 12px hsl(var(--b1)) inset;
}
50% {
box-shadow: 0 0 0 3px hsl(var(--b1)) inset,
0 0 0 3px hsl(var(--b1)) inset;
}
100% {
box-shadow: 0 0 0 4px hsl(var(--b1)) inset,
0 0 0 4px hsl(var(--b1)) inset;
}
}
.range:focus-visible::-webkit-slider-thumb {
--focus-shadow: 0 0 0 6px hsl(var(--b1)) inset, 0 0 0 2rem hsl(var(--range-shdw)) inset;
}
.range:focus-visible::-moz-range-thumb {
--focus-shadow: 0 0 0 6px hsl(var(--b1)) inset, 0 0 0 2rem hsl(var(--range-shdw)) inset;
}
.range::-webkit-slider-runnable-track {
height: 0.5rem;
width: 100%;
background-color: hsl(var(--bc) / 0.1);
border-radius: var(--rounded-box, 1rem);
}
.range::-moz-range-track {
height: 0.5rem;
width: 100%;
background-color: hsl(var(--bc) / 0.1);
border-radius: var(--rounded-box, 1rem);
}
.range::-webkit-slider-thumb {
position: relative;
height: 1.5rem;
width: 1.5rem;
border-style: none;
--tw-bg-opacity: 1;
background-color: hsl(var(--b1) / var(--tw-bg-opacity));
border-radius: var(--rounded-box, 1rem);
appearance: none;
-webkit-appearance: none;
top: 50%;
color: hsl(var(--range-shdw));
transform: translateY(-50%);
--filler-size: 100rem;
--filler-offset: 0.6rem;
box-shadow: 0 0 0 3px hsl(var(--range-shdw)) inset,
var(--focus-shadow, 0 0),
calc(var(--filler-size) * -1 - var(--filler-offset)) 0 0 var(--filler-size);
}
.range::-moz-range-thumb {
position: relative;
height: 1.5rem;
width: 1.5rem;
border-style: none;
--tw-bg-opacity: 1;
background-color: hsl(var(--b1) / var(--tw-bg-opacity));
border-radius: var(--rounded-box, 1rem);
top: 50%;
color: hsl(var(--range-shdw));
--filler-size: 100rem;
--filler-offset: 0.5rem;
box-shadow: 0 0 0 3px hsl(var(--range-shdw)) inset,
var(--focus-shadow, 0 0),
calc(var(--filler-size) * -1 - var(--filler-offset)) 0 0 var(--filler-size);
}
@keyframes rating-pop {
0% {
transform: translateY(-0.125em);
}
40% {
transform: translateY(-0.125em);
}
100% {
transform: translateY(0);
}
}
.select:focus {
outline-style: solid;
outline-width: 2px;
outline-offset: 2px;
outline-color: hsl(var(--bc) / 0.2);
}
.select-disabled,
.select:disabled,
.select[disabled] {
cursor: not-allowed;
--tw-border-opacity: 1;
border-color: hsl(var(--b2) / var(--tw-border-opacity));
--tw-bg-opacity: 1;
background-color: hsl(var(--b2) / var(--tw-bg-opacity));
--tw-text-opacity: 0.2;
}
.select-disabled::-moz-placeholder, .select:disabled::-moz-placeholder, .select[disabled]::-moz-placeholder {
color: hsl(var(--bc) / var(--tw-placeholder-opacity));
--tw-placeholder-opacity: 0.2;
}
.select-disabled::placeholder,
.select:disabled::placeholder,
.select[disabled]::placeholder {
color: hsl(var(--bc) / var(--tw-placeholder-opacity));
--tw-placeholder-opacity: 0.2;
}
.select-multiple,
.select[multiple],
.select[size].select:not([size="1"]) {
background-image: none;
padding-right: 1rem;
}
[dir="rtl"] .select {
background-position: calc(0% + 12px) calc(1px + 50%),
calc(0% + 16px) calc(1px + 50%);
}
:where(.stats) > :not([hidden]) ~ :not([hidden]) {
--tw-divide-x-reverse: 0;
border-right-width: calc(1px * var(--tw-divide-x-reverse));
border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
--tw-divide-y-reverse: 0;
border-top-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
border-bottom-width: calc(0px * var(--tw-divide-y-reverse));
}
.steps .step:before {
top: 0px;
grid-column-start: 1;
grid-row-start: 1;
height: 0.5rem;
width: 100%;
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));
--tw-bg-opacity: 1;
background-color: hsl(var(--b3) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--bc) / var(--tw-text-opacity));
content: "";
margin-left: -100%;
}
.steps .step:after {
content: counter(step);
counter-increment: step;
z-index: 1;
position: relative;
grid-column-start: 1;
grid-row-start: 1;
display: grid;
height: 2rem;
width: 2rem;
place-items: center;
place-self: center;
border-radius: 9999px;
--tw-bg-opacity: 1;
background-color: hsl(var(--b3) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--bc) / var(--tw-text-opacity));
}
.steps .step:first-child:before {
content: none;
}
.steps .step[data-content]:after {
content: attr(data-content);
}
.steps .step-neutral + .step-neutral:before,
.steps .step-neutral:after {
--tw-bg-opacity: 1;
background-color: hsl(var(--n) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--nc) / var(--tw-text-opacity));
}
.steps .step-primary + .step-primary:before,
.steps .step-primary:after {
--tw-bg-opacity: 1;
background-color: hsl(var(--p) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--pc) / var(--tw-text-opacity));
}
.steps .step-secondary + .step-secondary:before,
.steps .step-secondary:after {
--tw-bg-opacity: 1;
background-color: hsl(var(--s) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--sc) / var(--tw-text-opacity));
}
.steps .step-accent + .step-accent:before,
.steps .step-accent:after {
--tw-bg-opacity: 1;
background-color: hsl(var(--a) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--ac) / var(--tw-text-opacity));
}
.steps .step-info + .step-info:before {
--tw-bg-opacity: 1;
background-color: hsl(var(--in) / var(--tw-bg-opacity));
}
.steps .step-info:after {
--tw-bg-opacity: 1;
background-color: hsl(var(--in) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--inc) / var(--tw-text-opacity));
}
.steps .step-success + .step-success:before {
--tw-bg-opacity: 1;
background-color: hsl(var(--su) / var(--tw-bg-opacity));
}
.steps .step-success:after {
--tw-bg-opacity: 1;
background-color: hsl(var(--su) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--suc) / var(--tw-text-opacity));
}
.steps .step-warning + .step-warning:before {
--tw-bg-opacity: 1;
background-color: hsl(var(--wa) / var(--tw-bg-opacity));
}
.steps .step-warning:after {
--tw-bg-opacity: 1;
background-color: hsl(var(--wa) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--wac) / var(--tw-text-opacity));
}
.steps .step-error + .step-error:before {
--tw-bg-opacity: 1;
background-color: hsl(var(--er) / var(--tw-bg-opacity));
}
.steps .step-error:after {
--tw-bg-opacity: 1;
background-color: hsl(var(--er) / var(--tw-bg-opacity));
--tw-text-opacity: 1;
color: hsl(var(--erc) / var(--tw-text-opacity));
}
.tab.tab-active:not(.tab-disabled):not([disabled]) {
border-color: hsl(var(--bc) / var(--tw-border-opacity));
--tw-border-opacity: 1;
--tw-text-opacity: 1;
}
.tab:focus {
outline: 2px solid transparent;
outline-offset: 2px;
}
.tab:focus-visible {
outline: 2px solid currentColor;
outline-offset: -3px;
}
.tab:focus-visible.tab-lifted {
border-bottom-right-radius: var(--tab-radius, 0.5rem);
border-bottom-left-radius: var(--tab-radius, 0.5rem);
}
.tab-disabled,
.tab[disabled] {
cursor: not-allowed;
color: hsl(var(--bc) / var(--tw-text-opacity));
--tw-text-opacity: 0.2;
}
.tabs-boxed .tab {
border-radius: var(--rounded-btn, 0.5rem);
}
.table :where(th, td) {
padding-left: 1rem;
padding-right: 1rem;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
vertical-align: middle;
}
.table tr.active,
.table tr.active:nth-child(even),
.table-zebra tbody tr:nth-child(even) {
--tw-bg-opacity: 1;
background-color: hsl(var(--b2) / var(--tw-bg-opacity));
}
.table-zebra tr.active,
.table-zebra tr.active:nth-child(even),
.table-zebra-zebra tbody tr:nth-child(even) {
--tw-bg-opacity: 1;
background-color: hsl(var(--b3) / var(--tw-bg-opacity));
}
.table :where(thead, tbody) :where(tr:not(:last-child)),
.table :where(thead, tbody) :where(tr:first-child:last-child) {
border-bottom-width: 1px;
--tw-border-opacity: 1;
border-bottom-color: hsl(var(--b2) / var(--tw-border-opacity));
}
.table :where(thead, tfoot) {
white-space: nowrap;
font-size: 0.75rem;
line-height: 1rem;
font-weight: 700;
color: hsl(var(--bc) / 0.6);
}
@keyframes toast-pop {
0% {
transform: scale(0.9);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}
[dir="rtl"] .toggle {
--handleoffsetcalculator: calc(var(--handleoffset) * 1);
}
.toggle:focus-visible {
outline-style: solid;
outline-width: 2px;
outline-offset: 2px;
outline-color: hsl(var(--bc) / 0.2);
}
.toggle:checked,
.toggle[checked="true"],
.toggle[aria-checked="true"] {
--handleoffsetcalculator: var(--handleoffset);
--tw-border-opacity: 1;
--tw-bg-opacity: 1;
}
[dir="rtl"] .toggle:checked, [dir="rtl"] .toggle[checked="true"], [dir="rtl"] .toggle[aria-checked="true"] {
--handleoffsetcalculator: calc(var(--handleoffset) * -1);
}
.toggle:indeterminate {
--tw-border-opacity: 1;
--tw-bg-opacity: 1;
box-shadow: calc(var(--handleoffset) / 2) 0 0 2px var(--tglbg) inset,
calc(var(--handleoffset) / -2) 0 0 2px var(--tglbg) inset,
0 0 0 2px var(--tglbg) inset;
}
[dir="rtl"] .toggle:indeterminate {
box-shadow: calc(var(--handleoffset) / 2) 0 0 2px var(--tglbg) inset,
calc(var(--handleoffset) / -2) 0 0 2px var(--tglbg) inset,
0 0 0 2px var(--tglbg) inset;
}
.toggle:disabled {
cursor: not-allowed;
--tw-border-opacity: 1;
border-color: hsl(var(--bc) / var(--tw-border-opacity));
background-color: transparent;
opacity: 0.3;
--togglehandleborder: 0 0 0 3px hsl(var(--bc)) inset,
var(--handleoffsetcalculator) 0 0 3px hsl(var(--bc)) inset;
}
:root .prose {
--tw-prose-body: hsl(var(--bc) / 0.8);
--tw-prose-headings: hsl(var(--bc));
--tw-prose-lead: hsl(var(--bc));
--tw-prose-links: hsl(var(--bc));
--tw-prose-bold: hsl(var(--bc));
--tw-prose-counters: hsl(var(--bc));
--tw-prose-bullets: hsl(var(--bc) / 0.5);
--tw-prose-hr: hsl(var(--bc) / 0.2);
--tw-prose-quotes: hsl(var(--bc));
--tw-prose-quote-borders: hsl(var(--bc) / 0.2);
--tw-prose-captions: hsl(var(--bc) / 0.5);
--tw-prose-code: hsl(var(--bc));
--tw-prose-pre-code: hsl(var(--nc));
--tw-prose-pre-bg: hsl(var(--n));
--tw-prose-th-borders: hsl(var(--bc) / 0.5);
--tw-prose-td-borders: hsl(var(--bc) / 0.2);
}
.prose :where(code):not(:where([class~="not-prose"] *)) {
padding: 2px 8px;
border-radius: var(--rounded-badge);
}
.prose code:after,
.prose code:before {
content: none;
}
.prose pre code {
border-radius: 0;
padding: 0;
}
.prose :where(tbody tr, thead):not(:where([class~="not-prose"] *)) {
border-bottom-color: hsl(var(--bc) / 20%);
}
.rounded-box {
border-radius: var(--rounded-box, 1rem);
}
.btm-nav-xs > *:where(.active) {
border-top-width: 1px;
}
.btm-nav-sm > *:where(.active) {
border-top-width: 2px;
}
.btm-nav-md > *:where(.active) {
border-top-width: 2px;
}
.btm-nav-lg > *:where(.active) {
border-top-width: 4px;
}
.btn-block {
width: 100%;
}
.btn-square:where(.btn-xs) {
height: 1.5rem;
width: 1.5rem;
padding: 0px;
}
.btn-square:where(.btn-sm) {
height: 2rem;
width: 2rem;
padding: 0px;
}
.btn-square:where(.btn-md) {
height: 3rem;
width: 3rem;
padding: 0px;
}
.btn-square:where(.btn-lg) {
height: 4rem;
width: 4rem;
padding: 0px;
}
.join.join-vertical {
flex-direction: column;
}
.join.join-vertical .join-item:first-child:not(:last-child),
.join.join-vertical *:first-child:not(:last-child) .join-item {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-top-left-radius: inherit;
border-top-right-radius: inherit;
}
.join.join-vertical .join-item:last-child:not(:first-child),
.join.join-vertical *:last-child:not(:first-child) .join-item {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
}
.join.join-horizontal {
flex-direction: row;
}
.join.join-horizontal .join-item:first-child:not(:last-child),
.join.join-horizontal *:first-child:not(:last-child) .join-item {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: inherit;
border-top-left-radius: inherit;
}
.join.join-horizontal .join-item:last-child:not(:first-child),
.join.join-horizontal *:last-child:not(:first-child) .join-item {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
border-bottom-right-radius: inherit;
border-top-right-radius: inherit;
}
.steps-horizontal .step {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(0, 1fr));
place-items: center;
text-align: center;
}
.steps-vertical .step {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(1, minmax(0, 1fr));
}
.avatar.online:before {
content: "";
position: absolute;
z-index: 10;
display: block;
border-radius: 9999px;
--tw-bg-opacity: 1;
background-color: hsl(var(--su) / var(--tw-bg-opacity));
outline-style: solid;
outline-width: 2px;
outline-color: hsl(var(--b1) / 1);
width: 15%;
height: 15%;
top: 7%;
right: 7%;
}
.btn-group .btn:not(:first-child):not(:last-child) {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.btn-group .btn:first-child:not(:last-child) {
margin-left: -1px;
margin-top: -0px;
border-top-left-radius: var(--rounded-btn, 0.5rem);
border-top-right-radius: 0;
border-bottom-left-radius: var(--rounded-btn, 0.5rem);
border-bottom-right-radius: 0;
}
.btn-group .btn:last-child:not(:first-child) {
border-top-left-radius: 0;
border-top-right-radius: var(--rounded-btn, 0.5rem);
border-bottom-left-radius: 0;
border-bottom-right-radius: var(--rounded-btn, 0.5rem);
}
.btn-group-horizontal .btn:not(:first-child):not(:last-child) {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.btn-group-horizontal .btn:first-child:not(:last-child) {
margin-left: -1px;
margin-top: -0px;
border-top-left-radius: var(--rounded-btn, 0.5rem);
border-top-right-radius: 0;
border-bottom-left-radius: var(--rounded-btn, 0.5rem);
border-bottom-right-radius: 0;
}
.btn-group-horizontal .btn:last-child:not(:first-child) {
border-top-left-radius: 0;
border-top-right-radius: var(--rounded-btn, 0.5rem);
border-bottom-left-radius: 0;
border-bottom-right-radius: var(--rounded-btn, 0.5rem);
}
.btn-group-vertical .btn:first-child:not(:last-child) {
margin-left: -0px;
margin-top: -1px;
border-top-left-radius: var(--rounded-btn, 0.5rem);
border-top-right-radius: var(--rounded-btn, 0.5rem);
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.btn-group-vertical .btn:last-child:not(:first-child) {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: var(--rounded-btn, 0.5rem);
border-bottom-right-radius: var(--rounded-btn, 0.5rem);
}
.join.join-vertical > :where(*:not(:first-child)) {
margin-left: 0px;
margin-right: 0px;
margin-top: -1px;
}
.join.join-horizontal > :where(*:not(:first-child)) {
margin-top: 0px;
margin-bottom: 0px;
margin-left: -1px;
}
.menu-sm :where(li:not(.menu-title) > *:not(ul):not(details):not(.menu-title)),
.menu-sm :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
padding-left: 0.75rem;
padding-right: 0.75rem;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
font-size: 0.875rem;
line-height: 1.25rem;
border-radius: var(--rounded-btn, 0.5rem);
}
.menu-sm .menu-title {
padding-left: 0.75rem;
padding-right: 0.75rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.steps-horizontal .step {
grid-template-rows: 40px 1fr;
grid-template-columns: auto;
min-width: 4rem;
}
.steps-horizontal .step:before {
height: 0.5rem;
width: 100%;
--tw-translate-x: 0px;
--tw-translate-y: 0px;
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));
content: "";
margin-left: -100%;
}
.steps-vertical .step {
gap: 0.5rem;
grid-template-columns: 40px 1fr;
grid-template-rows: auto;
min-height: 4rem;
justify-items: start;
}
.steps-vertical .step:before {
height: 100%;
width: 0.5rem;
--tw-translate-x: -50%;
--tw-translate-y: -50%;
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));
margin-left: 50%;
}
[dir="rtl"] .steps-vertical .step:before {
margin-right: auto;
}
.invisible {
visibility: hidden;
}
.static {
position: static;
}
.fixed {
position: fixed;
}
.absolute {
position: absolute;
}
.relative {
position: relative;
}
.-inset-px {
inset: -1px;
}
.inset-x-0 {
left: 0px;
right: 0px;
}
.-top-3 {
top: -0.75rem;
}
.bottom-4 {
bottom: 1rem;
}
.right-4 {
right: 1rem;
}
.top-0 {
top: 0px;
}
.isolate {
isolation: isolate;
}
.-z-10 {
z-index: -10;
}
.z-\[1\] {
z-index: 1;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
}
.mb-0 {
margin-bottom: 0px;
}
.mb-12 {
margin-bottom: 3rem;
}
.mb-2 {
margin-bottom: 0.5rem;
}
.mb-36 {
margin-bottom: 9rem;
}
.mb-4 {
margin-bottom: 1rem;
}
.mb-6 {
margin-bottom: 1.5rem;
}
.mb-8 {
margin-bottom: 2rem;
}
.mt-16 {
margin-top: 4rem;
}
.mt-2 {
margin-top: 0.5rem;
}
.mt-3 {
margin-top: 0.75rem;
}
.mt-4 {
margin-top: 1rem;
}
.mt-6 {
margin-top: 1.5rem;
}
.mt-8 {
margin-top: 2rem;
}
.block {
display: block;
}
.flex {
display: flex;
}
.inline-flex {
display: inline-flex;
}
.table {
display: table;
}
.grid {
display: grid;
}
.hidden {
display: none;
}
.aspect-\[1155\/678\] {
aspect-ratio: 1155/678;
}
.h-14 {
height: 3.5rem;
}
.h-6 {
height: 1.5rem;
}
.h-\[60px\] {
height: 60px;
}
.min-h-screen {
min-height: 100vh;
}
.w-14 {
width: 3.5rem;
}
.w-5 {
width: 1.25rem;
}
.w-52 {
width: 13rem;
}
.w-\[60px\] {
width: 60px;
}
.w-\[72\.1875rem\] {
width: 72.1875rem;
}
.w-full {
width: 100%;
}
.max-w-2xl {
max-width: 42rem;
}
.max-w-full {
max-width: 100%;
}
.max-w-lg {
max-width: 32rem;
}
.flex-none {
flex: none;
}
.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));
}
.transform-gpu {
transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.flex-col {
flex-direction: column;
}
.flex-wrap {
flex-wrap: wrap;
}
.items-center {
align-items: center;
}
.items-baseline {
align-items: baseline;
}
.justify-center {
justify-content: center;
}
.justify-between {
justify-content: space-between;
}
.gap-12 {
gap: 3rem;
}
.gap-2 {
gap: 0.5rem;
}
.gap-4 {
gap: 1rem;
}
.gap-x-2 {
-moz-column-gap: 0.5rem;
column-gap: 0.5rem;
}
.gap-x-3 {
-moz-column-gap: 0.75rem;
column-gap: 0.75rem;
}
.gap-y-6 {
row-gap: 1.5rem;
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.overflow-hidden {
overflow: hidden;
}
.scroll-smooth {
scroll-behavior: smooth;
}
.break-words {
overflow-wrap: break-word;
}
.rounded {
border-radius: 0.25rem;
}
.rounded-3xl {
border-radius: 1.5rem;
}
.rounded-\[250px\] {
border-radius: 250px;
}
.rounded-\[75px\] {
border-radius: 75px;
}
.rounded-full {
border-radius: 9999px;
}
.rounded-lg {
border-radius: 0.5rem;
}
.rounded-md {
border-radius: 0.375rem;
}
.rounded-xl {
border-radius: 0.75rem;
}
.rounded-t-3xl {
border-top-left-radius: 1.5rem;
border-top-right-radius: 1.5rem;
}
.border-2 {
border-width: 2px;
}
.border-4 {
border-width: 4px;
}
.border-t-2 {
border-top-width: 2px;
}
.border-base-200 {
--tw-border-opacity: 1;
border-color: hsl(var(--b2) / var(--tw-border-opacity));
}
.border-zinc-700 {
--tw-border-opacity: 1;
border-color: rgb(63 63 70 / var(--tw-border-opacity));
}
.bg-\[\#18171e\] {
--tw-bg-opacity: 1;
background-color: rgb(24 23 30 / var(--tw-bg-opacity));
}
.bg-base-100 {
--tw-bg-opacity: 1;
background-color: hsl(var(--b1) / var(--tw-bg-opacity));
}
.bg-gray-900 {
--tw-bg-opacity: 1;
background-color: rgb(17 24 39 / var(--tw-bg-opacity));
}
.bg-indigo-500 {
--tw-bg-opacity: 1;
background-color: rgb(99 102 241 / var(--tw-bg-opacity));
}
.bg-primary {
--tw-bg-opacity: 1;
background-color: hsl(var(--p) / var(--tw-bg-opacity));
}
.bg-white\/60 {
background-color: rgb(255 255 255 / 0.6);
}
.bg-zinc-800 {
--tw-bg-opacity: 1;
background-color: rgb(39 39 42 / var(--tw-bg-opacity));
}
.bg-zinc-900 {
--tw-bg-opacity: 1;
background-color: rgb(24 24 27 / var(--tw-bg-opacity));
}
.bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.bg-gradient-to-r {
background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.bg-gradient-to-tr {
background-image: linear-gradient(to top right, var(--tw-gradient-stops));
}
.from-\[\#44BCFF\] {
--tw-gradient-from: #44BCFF var(--tw-gradient-from-position);
--tw-gradient-to: rgb(68 188 255 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#ff80b5\] {
--tw-gradient-from: #ff80b5 var(--tw-gradient-from-position);
--tw-gradient-to: rgb(255 128 181 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-\[\#FF44EC\] {
--tw-gradient-to: rgb(255 68 236 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), #FF44EC var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-\[\#9089fc\] {
--tw-gradient-to: #9089fc var(--tw-gradient-to-position);
}
.to-\[\#FF675E\] {
--tw-gradient-to: #FF675E var(--tw-gradient-to-position);
}
.p-2 {
padding: 0.5rem;
}
.p-8 {
padding: 2rem;
}
.p-\[75px\] {
padding: 75px;
}
.px-3 {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.px-3\.5 {
padding-left: 0.875rem;
padding-right: 0.875rem;
}
.px-36 {
padding-left: 9rem;
padding-right: 9rem;
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.px-8 {
padding-left: 2rem;
padding-right: 2rem;
}
.px-\[75px\] {
padding-left: 75px;
padding-right: 75px;
}
.py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.py-2\.5 {
padding-top: 0.625rem;
padding-bottom: 0.625rem;
}
.py-24 {
padding-top: 6rem;
padding-bottom: 6rem;
}
.py-3 {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
.py-4 {
padding-top: 1rem;
padding-bottom: 1rem;
}
.py-6 {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
.py-8 {
padding-top: 2rem;
padding-bottom: 2rem;
}
.pb-\[75px\] {
padding-bottom: 75px;
}
.pt-\[75px\] {
padding-top: 75px;
}
.text-center {
text-align: center;
}
.text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
.text-3xl {
font-size: 1.875rem;
line-height: 2.25rem;
}
.text-4xl {
font-size: 2.25rem;
line-height: 2.5rem;
}
.text-5xl {
font-size: 3rem;
line-height: 1;
}
.text-6xl {
font-size: 3.75rem;
line-height: 1;
}
.text-\[32px\] {
font-size: 32px;
}
.text-base {
font-size: 1rem;
line-height: 1.5rem;
}
.text-lg {
font-size: 1.125rem;
line-height: 1.75rem;
}
.text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
}
.text-xl {
font-size: 1.25rem;
line-height: 1.75rem;
}
.font-bold {
font-weight: 700;
}
.font-semibold {
font-weight: 600;
}
.uppercase {
text-transform: uppercase;
}
.leading-6 {
line-height: 1.5rem;
}
.leading-7 {
line-height: 1.75rem;
}
.leading-8 {
line-height: 2rem;
}
.tracking-tight {
letter-spacing: -0.025em;
}
.text-gray-300 {
--tw-text-opacity: 1;
color: rgb(209 213 219 / var(--tw-text-opacity));
}
.text-gray-400 {
--tw-text-opacity: 1;
color: rgb(156 163 175 / var(--tw-text-opacity));
}
.text-gray-500 {
--tw-text-opacity: 1;
color: rgb(107 114 128 / var(--tw-text-opacity));
}
.text-gray-600 {
--tw-text-opacity: 1;
color: rgb(75 85 99 / var(--tw-text-opacity));
}
.text-gray-900 {
--tw-text-opacity: 1;
color: rgb(17 24 39 / var(--tw-text-opacity));
}
.text-green-400 {
--tw-text-opacity: 1;
color: rgb(74 222 128 / var(--tw-text-opacity));
}
.text-green-600 {
--tw-text-opacity: 1;
color: rgb(22 163 74 / var(--tw-text-opacity));
}
.text-green-700 {
--tw-text-opacity: 1;
color: rgb(21 128 61 / var(--tw-text-opacity));
}
.text-indigo-400 {
--tw-text-opacity: 1;
color: rgb(129 140 248 / var(--tw-text-opacity));
}
.text-indigo-600 {
--tw-text-opacity: 1;
color: rgb(79 70 229 / var(--tw-text-opacity));
}
.text-primary {
--tw-text-opacity: 1;
color: hsl(var(--p) / var(--tw-text-opacity));
}
.text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.opacity-30 {
opacity: 0.3;
}
.opacity-70 {
opacity: 0.7;
}
.mix-blend-lighten {
mix-blend-mode: lighten;
}
.shadow-2xl {
--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
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 rgb(0 0 0 / 0.05);
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xl {
--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.ring-1 {
--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(1px + 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);
}
.ring-inset {
--tw-ring-inset: inset;
}
.ring-gray-900\/10 {
--tw-ring-color: rgb(17 24 39 / 0.1);
}
.ring-indigo-200 {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(199 210 254 / var(--tw-ring-opacity));
}
.blur-3xl {
--tw-blur: blur(64px);
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);
}
.blur-lg {
--tw-blur: blur(16px);
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);
}
.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 {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-all {
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.duration-1000 {
transition-duration: 1000ms;
}
.duration-200 {
transition-duration: 200ms;
}
.hover\:bg-indigo-400:hover {
--tw-bg-opacity: 1;
background-color: rgb(129 140 248 / var(--tw-bg-opacity));
}
.hover\:bg-zinc-800:hover {
--tw-bg-opacity: 1;
background-color: rgb(39 39 42 / var(--tw-bg-opacity));
}
.hover\:text-white:hover {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.hover\:ring-indigo-300:hover {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(165 180 252 / var(--tw-ring-opacity));
}
.focus\:outline-none:focus {
outline: 2px solid transparent;
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-gray-900:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(17 24 39 / var(--tw-ring-opacity));
}
.focus\:ring-offset-2:focus {
--tw-ring-offset-width: 2px;
}
.focus-visible\:outline:focus-visible {
outline-style: solid;
}
.focus-visible\:outline-2:focus-visible {
outline-width: 2px;
}
.focus-visible\:outline-offset-2:focus-visible {
outline-offset: 2px;
}
.focus-visible\:outline-indigo-500:focus-visible {
outline-color: #6366f1;
}
.focus-visible\:outline-indigo-600:focus-visible {
outline-color: #4f46e5;
}
.group:hover .group-hover\:-inset-1 {
inset: -0.25rem;
}
.group:hover .group-hover\:opacity-100 {
opacity: 1;
}
.group:hover .group-hover\:duration-200 {
transition-duration: 200ms;
}
@media (prefers-color-scheme: dark) {
.dark\:text-green-400 {
--tw-text-opacity: 1;
color: rgb(74 222 128 / var(--tw-text-opacity));
}
.dark\:text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
}
@media (min-width: 640px) {
.sm\:mx-8 {
margin-left: 2rem;
margin-right: 2rem;
}
.sm\:mt-10 {
margin-top: 2.5rem;
}
.sm\:mt-20 {
margin-top: 5rem;
}
.sm\:gap-y-0 {
row-gap: 0px;
}
.sm\:rounded-b-none {
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}
.sm\:p-10 {
padding: 2.5rem;
}
.sm\:py-32 {
padding-top: 8rem;
padding-bottom: 8rem;
}
.sm\:text-5xl {
font-size: 3rem;
line-height: 1;
}
}
@media (min-width: 768px) {
.md\:flex {
display: flex;
}
.md\:hidden {
display: none;
}
.md\:w-1\/2 {
width: 50%;
}
.md\:bg-gradient-to-r {
background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.md\:from-zinc-900 {
--tw-gradient-from: #18181b var(--tw-gradient-from-position);
--tw-gradient-to: rgb(24 24 27 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.md\:to-zinc-800 {
--tw-gradient-to: #27272a var(--tw-gradient-to-position);
}
}
@media (min-width: 1024px) {
.lg\:sticky {
position: sticky;
}
.lg\:order-first {
order: -9999;
}
.lg\:col-span-3 {
grid-column: span 3 / span 3;
}
.lg\:col-span-8 {
grid-column: span 8 / span 8;
}
.lg\:mx-0 {
margin-left: 0px;
margin-right: 0px;
}
.lg\:block {
display: block;
}
.lg\:grid {
display: grid;
}
.lg\:hidden {
display: none;
}
.lg\:h-screen {
height: 100vh;
}
.lg\:w-1\/2 {
width: 50%;
}
.lg\:max-w-4xl {
max-width: 56rem;
}
.lg\:grid-cols-12 {
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.lg\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.lg\:overflow-y-scroll {
overflow-y: scroll;
}
.lg\:rounded-bl-3xl {
border-bottom-left-radius: 1.5rem;
}
.lg\:rounded-tr-none {
border-top-right-radius: 0px;
}
.lg\:px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.lg\:px-8 {
padding-left: 2rem;
padding-right: 2rem;
}
}
@media (min-width: 1280px) {
.xl\:mb-0 {
margin-bottom: 0px;
}
.xl\:w-1\/5 {
width: 20%;
}
}
</style>
</head>
<body id='body'>
<header class="flex items-center bg-zinc-900 py-4 px-8 shadow-xl justify-between">
<a href="/" aria-label="Home" class="flex items-center gap-4 bg-[#18171e] rounded-lg px-4">
<img
src="/img/pockethost-cloud-logo.jpg"
alt="logo"
width="450"
height="450"
class="w-14 h-14 rounded-lg"
/>
<h1 class="text-green-700 dark:text-white font-bold text-2xl"
>PocketHost</h1
>
</a>
<div class="md:flex hidden gap-2">
<a class='block py-2 px-3 rounded hover:text-white hover:bg-zinc-800' href='/'>Home</a>
<a class='block py-2 px-3 rounded hover:text-white hover:bg-zinc-800' href='/blog'>Blog</a>
<a class='block py-2 px-3 rounded hover:text-white hover:bg-zinc-800' href='/docs/overview/introduction'>Docs</a>
<a class='block py-2 px-3 rounded hover:text-white hover:bg-zinc-800' href='https://discord.gg/nVTxCMEcGT'>Support</a>
<a class='block py-2 px-3 rounded hover:text-white hover:bg-zinc-800' href='https://github.com/pockethost/pockethost'><i class="fa-brands fa-github"></i></a>
</div>
<div class="block md:hidden">
<div class="dropdown dropdown-end">
<label tabindex="0" class="btn btn-ghost lg:hidden">
<i class="fa-regular fa-bars text-2xl"></i>
</label>
<ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow-2xl bg-base-100 border-4 border-base-200 rounded-box w-52">
<li><a class='py-3 font-bold' href='/'>Home</a></li>
<li><a class='py-3 font-bold' href='/blog'>Blog</a></li>
<li><a class='py-3 font-bold' href='/docs/overview/introduction'>Docs</a></li>
<li><a class='py-3 font-bold' href='https://discord.gg/nVTxCMEcGT'>Support</a></li>
<li><a class='py-3 font-bold' href='https://github.com/pockethost/pockethost'><i class="fa-brands fa-github"></i> GitHub</a> </li>
</ul>
</div>
</div>
</header>
<main>
<div class='lg:grid lg:grid-cols-12 min-h-screen gap-12 relative'>
<section class='py-6 mb-12 lg:col-span-8 px-4'>
<div class='prose max-w-full mb-36'>
<div class='flex items-center justify-between mb-8'>
<h1 class='text-white mb-0'>Instance Details</h1>
<a href='#docs-navigation' class='lg:hidden flex btn btn-outline'>Docs List <i class="fa-regular fa-arrow-down"></i></a>
</div>
<p>PocketHost provides a simple dashboard where you can manage your instance.</p>
<h2 id="on-demand-execution" tabindex="-1">On-demand Execution <a class="header-anchor" href="#on-demand-execution">#</a></h2>
<p>PocketHost runs your PocketBase instance on-demand. That means PocketHost waits for a web request to hit PocketBase before it actually launches PocketBase and responds. This means that your instance can run on huge, beefy hardware that would be prohibitively expensive to run on your own. We can afford to do this for you because the hardware is shared with other on-demand instances.</p>
<p>Instances are placed in hibernation after 5 seconds of idle time.</p>
<p><img src="/docs/instance-idle-screenshot.png" alt="View of an instance in the Idle state"></p>
<blockquote>
<p>Note: There is a slight &quot;first hit&quot; penalty if PocketHost needs to spin up your idle instance before responding to a request. In practice, this is not noticeable to most users for most applications. It's nearly indistinguishable from normal network delays.</p>
</blockquote>
<h2 id="usage-metering" tabindex="-1">Usage Metering <a class="header-anchor" href="#usage-metering">#</a></h2>
<p><em>Note: Usage Metering is not active until PocketHost reaches v1.0. There is no planned timeline for when or if PocketHost will reach v1.0</em></p>
<p>The free tier of PocketHost provides 100 <em>active minutes</em> per month.</p>
<p><img src="/docs/instance-usage-screenshot.png" alt="View of an instance showing the total usage"></p>
<blockquote>
<p>Because an instance stays active for a minimum of only 5 seconds per activation, 100 minutes of real, active usage is actually quite a bit. After you use your 100 minutes, you can either pay for more usage minutes, or PocketHost will move your instance to the pool of stand-by instances that get served after everyone else. Again, in practice, you will likely not even notice the difference. But if you do, there is always a paid option.</p>
</blockquote>
<h2 id="instance-versioning" tabindex="-1">Instance Versioning <a class="header-anchor" href="#instance-versioning">#</a></h2>
<p>By default, your instance will use the latest major+minor release of PocketBase. The PocketBase version is locked when your instance is created. We use <a href="https://semver.org/">semver</a> (<a href="https://docs.npmjs.com/cli/v6/using-npm/semver">npm package</a>) to determine the version range that should be allowed for your instance. When your instance is launched, it will use the latest matching version.</p>
<p><img src="/docs/instance-version-screenshot.png" alt="View of an instance showing the which version of PocketBase it is running"></p>
<p>For example, if the latest version of PocketBase is <code>0.10.4</code>, your instance will automatically run with <code>~0.10.4</code>, meaning that <code>major=0</code> and <code>minor=10</code> are locked, but <code>patch=4 or higher</code> will be applied.</p>
<p>To move between major or minor versions, please contact support. We are working on automatic migrations, but it's not easy or clear how best to implement it.</p>
<h2 id="admin-access" tabindex="-1">Admin access <a class="header-anchor" href="#admin-access">#</a></h2>
<p>You can access your instance admin by browsing to:</p>
<pre><code>https://&lt;instance-name&gt;.pockethost.io/_
</code></pre>
<p>The PocketHost dashboard also provides a handy link to do this.</p>
<h2 id="secrets" tabindex="-1">Secrets <a class="header-anchor" href="#secrets">#</a></h2>
<p>Instance secrets are exposed as environment variables when your <code>pocketbase</code> executable launches. Every secret you specify here will be made available as an environment variable to the <code>pocketbase</code> process.</p>
<pre class="language-ts" tabindex="0"><code class="language-ts"><span class="token comment">// pb_hooks</span>
$app<span class="token punctuation">.</span><span class="token function">getEnv</span><span class="token punctuation">(</span><span class="token string">'FOO'</span><span class="token punctuation">)</span></code></pre>
<h2 id="realtime-log" tabindex="-1">Realtime log <a class="header-anchor" href="#realtime-log">#</a></h2>
<p>Coming Soon</p>
</div>
<ul class="flex items-center justify-between py-6">
<li>
<a href="/docs/usage/hooks/" class='btn'>
<i class="fa-solid fa-arrow-left"></i> PocketBase Hooks
</a>
</li>
<li>
<a href="/docs/usage/maintenance/" class='btn'>
Maintenance Mode <i class="fa-solid fa-arrow-right"></i>
</a>
</li>
</ul>
</section>
<aside id='docs-navigation' class='bg-zinc-900 shadow-xl py-8 px-8 lg:px-4 lg:order-first lg:col-span-3 lg:overflow-y-scroll lg:h-screen lg:sticky top-0'>
<h2 class='text-lg font-bold py-2 px-4 text-white'>Overview</h2>
<ul>
<li><a href='/docs/overview/faq/' class="block py-2 px-4">FAQ</a></li>
<li><a href='/docs/overview/help/' class="block py-2 px-4">Getting Help</a></li>
<li><a href='/docs/overview/introduction/' class="block py-2 px-4">Introduction</a></li>
<li><a href='/docs/overview/roadmap/' class="block py-2 px-4">Roadmap</a></li>
</ul>
<h2 class='text-lg font-bold py-2 px-4 text-white'>Daily Usage</h2>
<ul>
<li><a href='/docs/usage/accessing-instance/' class="block py-2 px-4">Accessing Your Instance</a></li>
<li><a href='/docs/usage/backup-and-restore/' class="block py-2 px-4">Backup &amp; Restore</a></li>
<li><a href='/docs/usage/create/' class="block py-2 px-4">Creating an Instance</a></li>
<li><a href='/docs/usage/ftp/' class="block py-2 px-4">FTP Access</a></li>
<li><a href='/docs/usage/hooks/' class="block py-2 px-4">PocketBase Hooks</a></li>
<li><a href='/docs/usage/instances/' class="block py-2 px-4">Instance Details</a></li>
<li><a href='/docs/usage/maintenance/' class="block py-2 px-4">Maintenance Mode</a></li>
<li><a href='/docs/usage/rename-instance/' class="block py-2 px-4">Renaming an Instance</a></li>
<li><a href='/docs/usage/upgrading/' class="block py-2 px-4">Upgrading your Instance Version</a></li>
</ul>
</aside>
</div>
</main>
<a href='#body' aria-label='Return to the top of the page' class='fixed bottom-4 right-4 btn btn-square'>
<i class="fa-regular fa-arrow-up"></i>
</a>
<footer></footer>
<!-- Current page: /docs/usage/instances/ -->
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink