/* ! tailwindcss v3.3.2 | 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: currentColor; /* 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-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; } /* 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: light; --pf: 212 100% 44%; --sf: 247 47% 36%; --af: 310 49% 45%; --nf: 217 92% 3%; --pc: 231 100% 93%; --sc: 256 40% 88%; --ac: 316 56% 91%; --nc: 229 10% 80%; --inc: 192 18% 16%; --suc: 181 16% 14%; --wac: 32 9% 16%; --erc: 2 19% 15%; --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: 212 100% 51%; --s: 247 47% 43%; --a: 310 49% 52%; --n: 217 92% 10%; --b1: 0 0% 100%; --b2: 217 100% 97%; --b3: 219 44% 92%; --bc: 214 30% 32%; --in: 192 93% 78%; --su: 182 47% 66%; --wa: 32 62% 84%; --er: 0 63% 72%; } *, ::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: ; } .avatar.placeholder > div { display: flex; align-items: center; justify-content: center; } @media (hover:hover) { .menu :where(li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):where(.active), .menu :where(li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):where(.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)); } } .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-duration: 200ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); border-radius: var(--rounded-btn, 0.5rem); height: 3rem; padding-left: 1rem; padding-right: 1rem; font-size: 0.875rem; line-height: 1.25rem; line-height: 1em; min-height: 3rem; 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; --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"].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"]) { -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); } .card { position: relative; display: flex; flex-direction: column; border-radius: var(--rounded-box, 1rem); } .card:focus { outline: 2px solid transparent; outline-offset: 2px; } .card-body { display: flex; flex: 1 1 auto; flex-direction: column; padding: var(--padding-card, 2rem); gap: 0.5rem; } .card-body :where(p) { flex-grow: 1; } .card-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.5rem; } .card figure { display: flex; align-items: center; justify-content: center; } .card.image-full { display: grid; } .card.image-full:before { position: relative; content: ""; z-index: 10; --tw-bg-opacity: 1; background-color: hsl(var(--n) / var(--tw-bg-opacity)); opacity: 0.75; border-radius: var(--rounded-box, 1rem); } .card.image-full:before, .card.image-full > * { grid-column-start: 1; grid-row-start: 1; } .card.image-full > figure img { height: 100%; -o-object-fit: cover; object-fit: cover; } .card.image-full > .card-body { position: relative; z-index: 20; --tw-text-opacity: 1; color: hsl(var(--nc) / var(--tw-text-opacity)); } .checkbox { flex-shrink: 0; --chkbg: var(--bc); --chkfg: var(--b1); height: 1.5rem; width: 1.5rem; 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; border-radius: var(--rounded-btn, 0.5rem); } @media (hover: hover) { .btm-nav > *.disabled:hover, .btm-nav > *[disabled]:hover { pointer-events: none; --tw-border-opacity: 0; background-color: hsl(var(--n) / var(--tw-bg-opacity)); --tw-bg-opacity: 0.1; color: hsl(var(--bc) / var(--tw-text-opacity)); --tw-text-opacity: 0.2; } .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-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)); } .menu :where(li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(.active):hover, .menu :where(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; } } .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; } .menu li.disabled { cursor: not-allowed; -webkit-user-select: none; -moz-user-select: none; user-select: none; color: hsl(var(--bc) / 0.3); } .select { display: inline-flex; flex-shrink: 0; 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)); font-weight: 600; 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% - 16px) calc(1px + 50%); background-size: 4px 4px, 4px 4px; background-repeat: no-repeat; } .select[multiple] { height: auto; } .swap { position: relative; display: inline-grid; -webkit-user-select: none; -moz-user-select: none; user-select: none; place-content: center; cursor: pointer; } .swap > * { grid-column-start: 1; grid-row-start: 1; transition-duration: 300ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-property: transform, opacity; } .swap input { -webkit-appearance: none; -moz-appearance: none; appearance: none; } .swap .swap-on, .swap .swap-indeterminate, .swap input:indeterminate ~ .swap-on { opacity: 0; } .swap input:checked ~ .swap-off, .swap.swap-active .swap-off, .swap input:indeterminate ~ .swap-off { opacity: 0; } .swap input:checked ~ .swap-on, .swap-active .swap-on, .swap input:indeterminate ~ .swap-indeterminate { opacity: 1; } .textarea { flex-shrink: 1; min-height: 3rem; padding-top: 0.5rem; padding-bottom: 0.5rem; padding-left: 1rem; padding-right: 1rem; font-size: 0.875rem; line-height: 1.25rem; line-height: 2; 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); } .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; transition-duration: 300ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); border-radius: var(--rounded-badge, 1.9rem); transition: background, box-shadow var(--animation-input, 0.2s) ease-in-out; box-shadow: var(--handleoffsetcalculator) 0 0 2px var(--tglbg) inset, 0 0 0 2px var(--tglbg) inset, var(--togglehandleborder); } .btm-nav > *.disabled, .btm-nav > *[disabled] { pointer-events: none; --tw-border-opacity: 0; background-color: hsl(var(--n) / var(--tw-bg-opacity)); --tw-bg-opacity: 0.1; color: hsl(var(--bc) / var(--tw-text-opacity)); --tw-text-opacity: 0.2; } .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-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-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 :where(figure:first-child) { overflow: hidden; border-start-start-radius: inherit; border-start-end-radius: inherit; border-end-start-radius: unset; border-end-end-radius: unset; } .card :where(figure:last-child) { overflow: hidden; border-start-start-radius: unset; border-start-end-radius: unset; border-end-start-radius: inherit; border-end-end-radius: inherit; } .card:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } .card.bordered { border-width: 1px; --tw-border-opacity: 1; border-color: hsl(var(--b2) / var(--tw-border-opacity)); } .card.compact .card-body { padding: 1rem; font-size: 0.875rem; line-height: 1.25rem; } .card-title { display: flex; align-items: center; gap: 0.5rem; font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; } .card.image-full :where(figure) { overflow: hidden; border-radius: inherit; } .checkbox:focus-visible { outline-style: solid; outline-width: 2px; outline-offset: 2px; outline-color: hsl(var(--bc) / 1); } .checkbox:checked, .checkbox[checked="true"], .checkbox[aria-checked="true"] { --tw-bg-opacity: 1; background-color: hsl(var(--bc) / var(--tw-bg-opacity)); background-repeat: no-repeat; animation: checkmark var(--animation-input, 0.2s) ease-in-out; background-image: linear-gradient(-45deg, transparent 65%, hsl(var(--chkbg)) 65.99%), linear-gradient(45deg, transparent 75%, hsl(var(--chkbg)) 75.99%), linear-gradient(-45deg, hsl(var(--chkbg)) 40%, transparent 40.99%), linear-gradient( 45deg, hsl(var(--chkbg)) 30%, hsl(var(--chkfg)) 30.99%, hsl(var(--chkfg)) 40%, transparent 40.99% ), linear-gradient(-45deg, hsl(var(--chkfg)) 50%, hsl(var(--chkbg)) 50.99%); } .checkbox:indeterminate { --tw-bg-opacity: 1; background-color: hsl(var(--bc) / var(--tw-bg-opacity)); background-repeat: no-repeat; animation: checkmark var(--animation-input, 0.2s) ease-in-out; background-image: linear-gradient(90deg, transparent 80%, hsl(var(--chkbg)) 80%), linear-gradient(-90deg, transparent 80%, hsl(var(--chkbg)) 80%), linear-gradient( 0deg, hsl(var(--chkbg)) 43%, hsl(var(--chkfg)) 43%, hsl(var(--chkfg)) 57%, hsl(var(--chkbg)) 57% ); } .checkbox:disabled { cursor: not-allowed; border-color: transparent; --tw-bg-opacity: 1; background-color: hsl(var(--bc) / var(--tw-bg-opacity)); opacity: 0.2; } @keyframes checkmark { 0% { background-position-y: 5px; } 50% { background-position-y: -2px; } 100% { background-position-y: 0; } } [dir="rtl"] .checkbox:checked, [dir="rtl"] .checkbox[checked="true"], [dir="rtl"] .checkbox[aria-checked="true"] { background-image: linear-gradient(45deg, transparent 65%, hsl(var(--chkbg)) 65.99%), linear-gradient(-45deg, transparent 75%, hsl(var(--chkbg)) 75.99%), linear-gradient(45deg, hsl(var(--chkbg)) 40%, transparent 40.99%), linear-gradient( -45deg, hsl(var(--chkbg)) 30%, hsl(var(--chkfg)) 30.99%, hsl(var(--chkfg)) 40%, transparent 40.99% ), linear-gradient(45deg, hsl(var(--chkfg)) 50%, hsl(var(--chkbg)) 50.99%); } .input[list]::-webkit-calendar-picker-indicator { line-height: 1em; } .input-bordered { --tw-border-opacity: 0.2; } .input:focus { 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; } @keyframes modal-pop { 0% { opacity: 0; } } @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; } } @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%); } .textarea-bordered { --tw-border-opacity: 0.2; } .textarea:focus { outline-style: solid; outline-width: 2px; outline-offset: 2px; outline-color: hsl(var(--bc) / 0.2); } .textarea-disabled, .textarea:disabled, .textarea[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; } .textarea-disabled::-moz-placeholder, .textarea:disabled::-moz-placeholder, .textarea[disabled]::-moz-placeholder { color: hsl(var(--bc) / var(--tw-placeholder-opacity)); --tw-placeholder-opacity: 0.2; } .textarea-disabled::placeholder, .textarea:disabled::placeholder, .textarea[disabled]::placeholder { color: hsl(var(--bc) / var(--tw-placeholder-opacity)); --tw-placeholder-opacity: 0.2; } @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-primary:focus-visible { outline-color: hsl(var(--p) / 1); } .toggle-primary:checked, .toggle-primary[checked="true"], .toggle-primary[aria-checked="true"] { border-color: hsl(var(--p) / var(--tw-border-opacity)); --tw-border-opacity: 0.1; --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)); } .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; } .btn-sm { height: 2rem; padding-left: 0.75rem; padding-right: 0.75rem; min-height: 2rem; font-size: 0.875rem; } .btn-square:where(.btn-sm) { height: 2rem; width: 2rem; padding: 0px; } .btn-circle:where(.btn-sm) { height: 2rem; width: 2rem; border-radius: 9999px; padding: 0px; } .textarea-lg { padding-top: 1rem; padding-bottom: 1rem; padding-left: 1.5rem; padding-right: 1.5rem; font-size: 1.125rem; line-height: 1.75rem; line-height: 2; } .toggle-sm { --handleoffset: 0.75rem; height: 1.25rem; width: 2rem; } .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-top: -0px; margin-left: -1px; 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-top: -0px; margin-left: -1px; 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-top: -1px; margin-left: -0px; 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); } .card-compact .card-body { padding: 1rem; font-size: 0.875rem; line-height: 1.25rem; } .card-compact .card-title { margin-bottom: 0.25rem; } .card-normal .card-body { padding: var(--padding-card, 2rem); font-size: 1rem; line-height: 1.5rem; } .card-normal .card-title { margin-bottom: 0.75rem; } .absolute { position: absolute; } .z-50 { z-index: 50; } .mx-12 { margin-left: 3rem; margin-right: 3rem; } .mx-2 { margin-left: 0.5rem; margin-right: 0.5rem; } .mx-8 { margin-left: 2rem; margin-right: 2rem; } .mb-4 { margin-bottom: 1rem; } .ml-2 { margin-left: 0.5rem; } .ml-4 { margin-left: 1rem; } .ml-6 { margin-left: 1.5rem; } .ml-8 { margin-left: 2rem; } .mr-4 { margin-right: 1rem; } .mt-1 { margin-top: 0.25rem; } .mt-2 { margin-top: 0.5rem; } .mt-4 { margin-top: 1rem; } .mt-8 { margin-top: 2rem; } .flex { display: flex; } .w-fit { width: -moz-fit-content; width: fit-content; } .w-full { width: 100%; } .max-w-3xl { max-width: 48rem; } .max-w-xl { max-width: 36rem; } .flex-1 { flex: 1 1 0%; } .flex-initial { flex: 0 1 auto; } .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)); } .flex-row { flex-direction: row; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .justify-end { justify-content: flex-end; } .justify-between { justify-content: space-between; } .rounded { border-radius: 0.25rem; } .bg-base-100 { --tw-bg-opacity: 1; background-color: hsl(var(--b1) / var(--tw-bg-opacity)); } .px-4 { padding-left: 1rem; padding-right: 1rem; } .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; } .pl-10 { padding-left: 2.5rem; } .pl-2 { padding-left: 0.5rem; } .pt-4 { padding-top: 1rem; } .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-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-medium { font-weight: 500; } .font-semibold { font-weight: 600; } .text-info { --tw-text-opacity: 1; color: hsl(var(--in) / var(--tw-text-opacity)); } .text-lesser { --tw-text-opacity: 1; color: rgb(68 68 68 / var(--tw-text-opacity)); } .text-secondary { --tw-text-opacity: 1; color: hsl(var(--s) / var(--tw-text-opacity)); } .text-success-color { color: hsl(100, 100%, 20%, 100%); } .line-through { text-decoration-line: line-through; } .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); } .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); } h2 { padding: 1rem; font-size: 1.875rem; line-height: 2.25rem; font-weight: 500; } button { border-radius: 0.25rem; padding-top: 0.5rem; padding-bottom: 0.5rem; padding-left: 1rem; padding-right: 1rem; } .animatex { animation: animatex 13s linear infinite alternate; } .animatey { animation: animatey 7s linear infinite alternate; } @keyframes animatex { 100% { transform: translateX( calc(100vw - 100px) ); } } @keyframes animatey { 100% { transform: translateY( calc(100vh - 100px) ); } } .simple-form-content-container { padding-left: 2.5rem; padding-right: 2.5rem; } .simple-form-submit-container { display: flex; flex-direction: row; justify-content: flex-end; padding-right: 1rem; } .simple-form-submit-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-duration: 200ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); border-radius: var(--rounded-btn, 0.5rem); height: 3rem; padding-left: 1rem; padding-right: 1rem; font-size: 0.875rem; line-height: 1.25rem; line-height: 1em; min-height: 3rem; 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); } .simple-form-submit-btn[disabled],.simple-form-submit-btn:disabled { pointer-events: none; --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"].simple-form-submit-btn { -webkit-appearance: none; -moz-appearance: none; appearance: none; } .btn-group > input[type="radio"].simple-form-submit-btn:before { content: attr(data-title); } .simple-form-submit-btn:is(input[type="checkbox"]),.simple-form-submit-btn:is(input[type="radio"]) { -webkit-appearance: none; -moz-appearance: none; appearance: none; } .simple-form-submit-btn:is(input[type="checkbox"]):after,.simple-form-submit-btn:is(input[type="radio"]):after { --tw-content: attr(aria-label); content: var(--tw-content); } @media (hover: hover) { .simple-form-submit-btn:hover { border-color: hsl(var(--b3) / var(--tw-border-opacity)); background-color: hsl(var(--b3) / var(--tw-bg-opacity)); --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)); } .simple-form-submit-btn.glass:hover { --glass-opacity: 25%; --glass-border-opacity: 15%; } .btn-outline.simple-form-submit-btn: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)); } .simple-form-submit-btn[disabled]:hover,.simple-form-submit-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; } .simple-form-submit-btn:is(input[type="checkbox"]:checked):hover,.simple-form-submit-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)); } } .simple-form-submit-btn:active:hover,.simple-form-submit-btn:active:focus { animation: button-pop 0s ease-out; transform: scale(var(--btn-focus-scale, 0.97)); } .simple-form-submit-btn:focus-visible { outline-style: solid; outline-width: 2px; outline-offset: 2px; } .simple-form-submit-btn { --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); } .simple-form-submit-btn.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)); } .simple-form-submit-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; } .simple-form-submit-btn.glass.btn-active { --glass-opacity: 25%; --glass-border-opacity: 15%; } .btn-outline.simple-form-submit-btn { --tw-text-opacity: 1; color: hsl(var(--p) / var(--tw-text-opacity)); } .btn-outline.simple-form-submit-btn.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-group > input[type="radio"]:checked.simple-form-submit-btn { --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.simple-form-submit-btn:focus-visible { outline-style: solid; outline-width: 2px; outline-color: hsl(var(--p) / 1); } .simple-form-submit-btn:is(input[type="checkbox"]:checked),.simple-form-submit-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)); } .simple-form-submit-btn:is(input[type="checkbox"]:checked):focus-visible,.simple-form-submit-btn:is(input[type="radio"]:checked):focus-visible { outline-color: hsl(var(--p) / 1); } .btn-group .simple-form-submit-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 .simple-form-submit-btn:first-child:not(:last-child) { margin-top: -0px; margin-left: -1px; 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 .simple-form-submit-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 .simple-form-submit-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 .simple-form-submit-btn:first-child:not(:last-child) { margin-top: -0px; margin-left: -1px; 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 .simple-form-submit-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 .simple-form-submit-btn:first-child:not(:last-child) { margin-top: -1px; margin-left: -0px; 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 .simple-form-submit-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); } .simple-form-submit-btn { flex: 0 1 auto; } .new-event-more-options-header { margin-top: 1.5rem; font-size: 1.25rem; line-height: 1.75rem; --tw-text-opacity: 1; color: hsl(var(--in) / var(--tw-text-opacity)); } .new-event-more-options-content { margin-left: 1rem; } .new-event-input-field { margin-top: 0.5rem; margin-bottom: 0.25rem; } .new-event-inner-form-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-duration: 200ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); border-radius: var(--rounded-btn, 0.5rem); height: 3rem; padding-left: 1rem; padding-right: 1rem; font-size: 0.875rem; line-height: 1.25rem; line-height: 1em; min-height: 3rem; 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); } .new-event-inner-form-btn[disabled],.new-event-inner-form-btn:disabled { pointer-events: none; --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"].new-event-inner-form-btn { -webkit-appearance: none; -moz-appearance: none; appearance: none; } .btn-group > input[type="radio"].new-event-inner-form-btn:before { content: attr(data-title); } .new-event-inner-form-btn:is(input[type="checkbox"]),.new-event-inner-form-btn:is(input[type="radio"]) { -webkit-appearance: none; -moz-appearance: none; appearance: none; } .new-event-inner-form-btn:is(input[type="checkbox"]):after,.new-event-inner-form-btn:is(input[type="radio"]):after { --tw-content: attr(aria-label); content: var(--tw-content); } @media (hover: hover) { .new-event-inner-form-btn:hover { border-color: hsl(var(--b3) / var(--tw-border-opacity)); background-color: hsl(var(--b3) / var(--tw-bg-opacity)); --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)); } .new-event-inner-form-btn.glass:hover { --glass-opacity: 25%; --glass-border-opacity: 15%; } .btn-outline.new-event-inner-form-btn: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)); } .new-event-inner-form-btn[disabled]:hover,.new-event-inner-form-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; } .new-event-inner-form-btn:is(input[type="checkbox"]:checked):hover,.new-event-inner-form-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)); } } .new-event-inner-form-btn:active:hover,.new-event-inner-form-btn:active:focus { animation: button-pop 0s ease-out; transform: scale(var(--btn-focus-scale, 0.97)); } .new-event-inner-form-btn:focus-visible { outline-style: solid; outline-width: 2px; outline-offset: 2px; } .new-event-inner-form-btn { --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); } .new-event-inner-form-btn.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)); } .new-event-inner-form-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; } .new-event-inner-form-btn.glass.btn-active { --glass-opacity: 25%; --glass-border-opacity: 15%; } .btn-outline.new-event-inner-form-btn { --tw-text-opacity: 1; color: hsl(var(--p) / var(--tw-text-opacity)); } .btn-outline.new-event-inner-form-btn.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-group > input[type="radio"]:checked.new-event-inner-form-btn { --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.new-event-inner-form-btn:focus-visible { outline-style: solid; outline-width: 2px; outline-color: hsl(var(--p) / 1); } .new-event-inner-form-btn:is(input[type="checkbox"]:checked),.new-event-inner-form-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)); } .new-event-inner-form-btn:is(input[type="checkbox"]:checked):focus-visible,.new-event-inner-form-btn:is(input[type="radio"]:checked):focus-visible { outline-color: hsl(var(--p) / 1); } .new-event-inner-form-btn { height: 2rem; padding-left: 0.75rem; padding-right: 0.75rem; min-height: 2rem; font-size: 0.875rem; } .btn-square:where(.new-event-inner-form-btn) { height: 2rem; width: 2rem; padding: 0px; } .btn-circle:where(.new-event-inner-form-btn) { height: 2rem; width: 2rem; border-radius: 9999px; padding: 0px; } .btn-group .new-event-inner-form-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 .new-event-inner-form-btn:first-child:not(:last-child) { margin-top: -0px; margin-left: -1px; 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 .new-event-inner-form-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 .new-event-inner-form-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 .new-event-inner-form-btn:first-child:not(:last-child) { margin-top: -0px; margin-left: -1px; 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 .new-event-inner-form-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 .new-event-inner-form-btn:first-child:not(:last-child) { margin-top: -1px; margin-left: -0px; 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 .new-event-inner-form-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); } .new-event-inner-form-btn { margin-top: 0.5rem; } .event-card { position: relative; display: flex; flex-direction: column; border-radius: var(--rounded-box, 1rem); } .event-card:focus { outline: 2px solid transparent; outline-offset: 2px; } .event-card figure { display: flex; align-items: center; justify-content: center; } .event-card.image-full { display: grid; } .event-card.image-full:before { position: relative; content: ""; z-index: 10; --tw-bg-opacity: 1; background-color: hsl(var(--n) / var(--tw-bg-opacity)); opacity: 0.75; border-radius: var(--rounded-box, 1rem); } .event-card.image-full:before,.event-card.image-full > * { grid-column-start: 1; grid-row-start: 1; } .event-card.image-full > figure img { height: 100%; -o-object-fit: cover; object-fit: cover; } .event-card.image-full > .card-body { position: relative; z-index: 20; --tw-text-opacity: 1; color: hsl(var(--nc) / var(--tw-text-opacity)); } .event-card :where(figure:first-child) { overflow: hidden; border-start-start-radius: inherit; border-start-end-radius: inherit; border-end-start-radius: unset; border-end-end-radius: unset; } .event-card :where(figure:last-child) { overflow: hidden; border-start-start-radius: unset; border-start-end-radius: unset; border-end-start-radius: inherit; border-end-end-radius: inherit; } .event-card:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } .event-card.bordered { border-width: 1px; --tw-border-opacity: 1; border-color: hsl(var(--b2) / var(--tw-border-opacity)); } .event-card.compact .card-body { padding: 1rem; font-size: 0.875rem; line-height: 1.25rem; } .event-card.image-full :where(figure) { overflow: hidden; border-radius: inherit; } .event-card { margin-left: 3rem; margin-right: 3rem; margin-bottom: 1rem; max-width: 48rem; flex: 1 1 0%; --tw-bg-opacity: 1; background-color: hsl(var(--b1) / var(--tw-bg-opacity)); --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); } .claim-event-container { position: relative; display: flex; flex-direction: column; border-radius: var(--rounded-box, 1rem); } .claim-event-container:focus { outline: 2px solid transparent; outline-offset: 2px; } .claim-event-container figure { display: flex; align-items: center; justify-content: center; } .claim-event-container.image-full { display: grid; } .claim-event-container.image-full:before { position: relative; content: ""; z-index: 10; --tw-bg-opacity: 1; background-color: hsl(var(--n) / var(--tw-bg-opacity)); opacity: 0.75; border-radius: var(--rounded-box, 1rem); } .claim-event-container.image-full:before,.claim-event-container.image-full > * { grid-column-start: 1; grid-row-start: 1; } .claim-event-container.image-full > figure img { height: 100%; -o-object-fit: cover; object-fit: cover; } .claim-event-container.image-full > .card-body { position: relative; z-index: 20; --tw-text-opacity: 1; color: hsl(var(--nc) / var(--tw-text-opacity)); } .claim-event-container :where(figure:first-child) { overflow: hidden; border-start-start-radius: inherit; border-start-end-radius: inherit; border-end-start-radius: unset; border-end-end-radius: unset; } .claim-event-container :where(figure:last-child) { overflow: hidden; border-start-start-radius: unset; border-start-end-radius: unset; border-end-start-radius: inherit; border-end-end-radius: inherit; } .claim-event-container:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } .claim-event-container.bordered { border-width: 1px; --tw-border-opacity: 1; border-color: hsl(var(--b2) / var(--tw-border-opacity)); } .claim-event-container.compact .card-body { padding: 1rem; font-size: 0.875rem; line-height: 1.25rem; } .claim-event-container.image-full :where(figure) { overflow: hidden; border-radius: inherit; } .claim-event-container { z-index: 50; --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); position: absolute; top: 75; min-height: 350; left: 50%; width: 60%; transform: translate(-50%, -20%); background-color: #ffffff; } @media screen and (-webkit-min-device-pixel-ratio:0) { select, textarea, input { font-size: 16px; } }