*, ::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: ;
    --tw-contain-size: ;
    --tw-contain-layout: ;
    --tw-contain-paint: ;
    --tw-contain-style: ;
}
::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: ;
    --tw-contain-size: ;
    --tw-contain-layout: ;
    --tw-contain-paint: ;
    --tw-contain-style: ;
}
/*
! tailwindcss v3.4.15 | 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.
7. Disable tap highlights on iOS
*/

html, :host {
    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, 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 */
    -webkit-tap-highlight-color: transparent;
    /* 7 */
}
/*
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 */
    overflow-x: hidden;
    /* 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.
*/

#root {
    overflow-x: hidden;
}

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. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. 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-feature-settings: normal;
    /* 2 */
    font-variation-settings: normal;
    /* 3 */
    font-size: 1em;
    /* 4 */
}
/*
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 */
    letter-spacing: 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, input:where([type='button']), input:where([type='reset']), input:where([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]:where(:not([hidden="until-found"])) {
    display: none;
}
body {
    --tw-bg-opacity: 1;
    background-color: rgb(0 20 31 / var(--tw-bg-opacity, 1));
    font-family: Fixel Text, sans-serif;
    font-weight: 600;
}
@media (min-width: 1024px) {
    body {
        padding: 0.25rem;
    }
}
:root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;
    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 3.9%;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --radius: 0.5rem;
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
}
/* container center */

.container-center {
    margin-left: auto;
    margin-right: auto;
    max-width: 1280px;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
@media (min-width: 1024px) {
    .container-center {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}
/* animate */

.animate {
    transition-property: all;
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    animation-duration: 300ms;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
/* hover opacity */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}
.pointer-events-none {
    pointer-events: none;
}
.fixed {
    position: fixed;
}
.absolute {
    position: absolute;
}
.relative {
    position: relative;
}
.sticky {
    position: sticky;
}
.inset-0 {
    inset: 0px;
}
.-bottom-1 {
    bottom: -0.25rem;
}
.-bottom-10 {
    bottom: -2.5rem;
}
.-bottom-2 {
    bottom: -0.5rem;
}
.-bottom-2\.5 {iframe
    bottom: -0.625rem;
}
.-bottom-4 {
    bottom: -1rem;
}
.-bottom-6 {
    bottom: -1.5rem;
}
.-left-1 {
    left: -0.25rem;
}
.-left-2 {
    left: -0.5rem;
}
.-right-1 {
    right: -0.25rem;
}
.-right-11 {
    right: -2.75rem;
}
.-right-20 {
    right: -5rem;
}
.-right-4 {
    right: -1rem;
}
.-top-4 {
    top: -1rem;
}
.bottom-0 {
    bottom: 0px;
}
.bottom-1 {
    bottom: .25rem
}
.bottom-2 {
    bottom: 0.5rem;
}
.bottom-3 {
    bottom: .75rem
}
.bottom-4 {
    bottom: 1rem;
}
.bottom-5 {
    bottom: 1.25rem
}
.bottom-12 {
    bottom: 3rem
}
.bottom-14 {
    bottom: 3.5rem
}
.bottom-15 {
    bottom: 3.75rem
}
.bottom-16 {
    bottom: 4rem;
}
.bottom-18 {
    bottom: 4.5rem
}
.bottom-20 {
    bottom: 5rem
}
.bottom-32 {
    bottom: 8rem
}
.left-0 {
    left: 0px;
}
.left-1 {
    left: .25rem
}
.left-1\.5 {
    left: .375rem
}
.left-1\/2 {
    left: 50%;
}
.left-2\/4 {
    left: 50%
}
.left-2 {
    left: 0.5rem;
}
.left-3 {
    left: .75rem
}
.left-4 {
    left: 1rem
}
.left-5 {
    left: 1.25rem
}
.left-7 {
    left: 1.75rem;
}
.left-10 {
    left: 2.5rem
}
.left-20 {
    left: 5rem;
}
.left-24 {
    left: 6rem
}
.left-40 {
    left: 10rem
}
.left-72 {
    left: 18rem
}
.left-80 {
    left: 20rem
}
.left-\[50\%\] {
    left: 50%;
}
.left-\[1\.5\%\] {
    left: 1.5%
}
.left-\[50\%\] {
    left: 50%
}
.left-\[76px\] {
    left: 76px
}
.left-\[8\%\] {
    left: 8%
}
.left-full {
    left: 100%
}
.right-1\/2 {
    right: 50%
}
.right-0 {
    right: 0px;
}
.right-1 {
    right: 0.25rem;
}
.right-2 {
    right: .5rem
}
.right-2\.5 {
    right: .625rem
}
.right-3 {
    right: .75rem
}
.right-11 {
    right: 2.75rem;
}
.right-2 {
    right: 0.5rem;
}
.right-2\.5 {
    right: 0.625rem;
}
.right-4 {
    right: 1rem;
}
.right-5 {
    right: 1.25rem;
}
.right-6 {
    right: 1.5rem
}
.right-8 {
    right: 2rem;
}
.right-23 {
    right: 5rem
}
.right-24 {
    right: 6rem
}
.right-40 {
    right: 10rem
}
.right-72 {
    right: 18rem
}
.right-80 {
    right: 20rem
}
.right-\[2\%\] {
    right: 2%
}
.top-0 {
    top: 0px;
}
.top-1\/2 {
    top: 50%;
}
.top-1\.5 {
    top: .375rem
}
.top-2 {
    top: 0.5rem;
}
.top-2\.5 {
    top: .625rem
}
.top-3 {
    top: .75rem
}
.top-3\.5 {
    top: .875rem
}
.top-4 {
    top: 1rem;
}
.top-10 {
    top: 2.5rem
}
.top-14 {
    top: 3.5rem
}
.top-15 {
    top: 3.75rem
}
.top-20 {
    top: 5rem;
}
.top-24 {
    top: 6rem
}
.top-2\/4 {
    top: 50%
}
.top-\[50\%\] {
    top: 50%;
}
.top-\[60px\] {
    top: 60px;
}
.top-\[70px\] {
    top: 70px;
}
.top-\[53\%\] {
    top: 53%
}
.top-\[60\%\] {
    top: 60%
}
.top-auto {
    top: auto
}
.top-full {
    top: 100%
}
.-z-10 {
    z-index: -10;
}
.z-0 {
    z-index: 0;
}
.z-10 {
    z-index: 10;
}
.z-50 {
    z-index: 50;
}
.z-100 {
    z-index: 100;
}
.z-1000 {
    z-index: 1000
}
.z-20 {
    z-index: 20
}
.z-\[101\] {
    z-index: 101
}
.z-\[112\] {
    z-index: 112
}
.z-\[99\] {
    z-index: 99
}
.col-span-2 {
    grid-column: span 2 / span 2;
}
.m-2 {
    margin: 0.5rem;
}
.-mx-1 {
    margin-left: -0.25rem;
    margin-right: -0.25rem;
}
.mx-auto {
    margin-left: auto;
    margin-right: auto;
}
.my-0\.5 {
    margin-top: 0.125rem;
    margin-bottom: 0.125rem;
}
.my-1 {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}
.my-2 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}
.my-3 {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}
.my-4 {
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.my-8 {
    margin-top: 2rem;
    margin-bottom: 2rem;
}
.-mt-10 {
    margin-top: -2.5rem;
}
.-mt-24 {
    margin-top: -6rem;
}
.mb-0\.5 {
    margin-bottom: 0.125rem;
}
.mb-1 {
    margin-bottom: 0.25rem;
}
.mb-1\.5 {
    margin-bottom: 0.375rem;
}
.mb-2 {
    margin-bottom: 0.5rem;
}
.mb-2\.5 {
    margin-bottom: 0.625rem;
}
.mb-24 {
    margin-bottom: 6rem;
}
.mb-3 {
    margin-bottom: 0.75rem;
}
.mb-4 {
    margin-bottom: 1rem;
}
.mb-5 {
    margin-bottom: 1.25rem;
}
.mb-6 {
    margin-bottom: 1.5rem;
}
.mb-sb {
    margin-bottom: 0;
}
.ml-1 {
    margin-left: 0.25rem;
}
.ml-2 {
    margin-left: 0.5rem;
}
.ml-3 {
    margin-left: 0.75rem;
}
.mt-1 {
    margin-top: 0.25rem;
}
.mt-1\.5 {
    margin-top: 0.375rem;
}
.mt-10 {
    margin-top: 2.5rem;
}
.mt-11 {
    margin-top: 2.75rem;
}
.mt-14 {
    margin-top: 3.5rem;
}
.mt-15 {
    margin-top: 4.0rem;
}
.mt-2 {
    margin-top: 0.5rem;
}
.mt-2\.5 {
    margin-top: 0.625rem;
}
.mt-28 {
    margin-top: 7rem;
}
.mt-3 {
    margin-top: 0.75rem;
}
.mt-4 {
    margin-top: 1rem;
}
.mt-5 {
    margin-top: 1.25rem;
}
.mt-6 {
    margin-top: 1.5rem;
}
.mt-8 {
    margin-top: 2rem;
}
.mt-9 {
    margin-top: 2.25rem;
}
.mt-10 {
    margin-top: 4.8rem;
}
.block {
    display: block;
}
.inline-block {
    display: inline-block;
}
.inline {
    display: inline;
}
.flex {
    display: flex;
}
.flex-space-around {
    display: flex;
    justify-content: space-around;
}
.inline-flex {
    display: inline-flex;
}
.table {
    display: table;
}
.grid {
    display: grid;
}
.hidden {
    display: none;
}
.size-10 {
    width: 2.5rem;
    height: 2.5rem;
}
.size-11 {
    width: 2.75rem;
    height: 2.75rem;
}
.size-12 {
    width: 3rem;
    height: 3rem;
}
.size-14 {
    width: 3.5rem;
    height: 3.5rem;
}
.size-16 {
    width: 4rem;
    height: 4rem;
}
.size-20 {
    width: 5rem;
    height: 5rem;
}
.size-28 {
    width: 7rem;
    height: 7rem;
}
.size-3 {
    width: 0.75rem;
    height: 0.75rem;
}
.size-3\.5 {
    width: 0.875rem;
    height: 0.875rem;
}
.size-4 {
    width: 1rem;
    height: 1rem;
}
.size-5 {
    width: 1.25rem;
    height: 1.25rem;
}
.size-6 {
    width: 1.5rem;
    height: 1.5rem;
}
.size-7 {
    width: 1.75rem;
    height: 1.75rem;
}
.size-8 {
    width: 2rem;
    height: 2rem;
}
.size-9 {
    width: 2.25rem;
    height: 2.25rem;
}
.size-\[200px\] {
    width: 200px;
    height: 200px;
}
.size-\[38px\] {
    width: 38px;
    height: 38px;
}
.size-\[42px\] {
    width: 42px;
    height: 42px;
}
.size-full {
    width: 100%;
    height: 100%;
}
.h-10 {
    height: 2.5rem;
}
.h-11 {
    height: 2.75rem;
}
.h-12 {
    height: 3rem;
}
.h-14 {
    height: 3.5rem;
}
.h-2\.5 {
    height: 0.625rem;
}
.h-3\.5 {
    height: 0.875rem;
}
.h-36 {
    height: 9rem;
}
.h-4 {
    height: 1rem;
}
.h-40 {
    height: 10rem;
}
.h-44 {
    height: 11rem;
}
.h-48 {
    height: 12rem;
}
.h-49 {
    height: 15.4rem;
}
.h-50 {
    height: 22.0rem;
}
.h-5 {
    height: 1.25rem;
}
.h-6 {
    height: 1.5rem;
}
.h-7 {
    height: 1.75rem;
}
.h-72 {
    height: 18rem;
}
.h-8 {
    height: 2rem;
}
.h-80 {
    height: 20rem;
}
.h-9 {
    height: 2.25rem;
}
.h-96 {
    height: 24rem;
}
.h-\[26px\] {
    height: 26px;
}
.h-\[510px\] {
    height: 510px;
}
.h-\[52px\] {
    height: 52px;
}
.h-\[58px\] {
    height: 58px;
}
.h-\[715px\] {
    height: 715px;
}
.h-\[800px\] {
    height: 800px;
}
.h-\[calc\(100dvh-150px\)\] {
    height: calc(100dvh - 150px);
}
.h-\[calc\(100dvh-100px\)\] {
    height: calc(100dvh - 100px);
}
.h-\[var\(--radix-select-trigger-height\)\] {
    height: var(--radix-select-trigger-height);
}
.h-auto {
    height: auto;
}
.h-dvh {
    height: 100dvh;
}
.h-full {
    height: 100%;
}
.h-px {
    height: 1px;
}
.max-h-96 {
    max-height: 24rem;
}
.max-h-dvh {
    max-height: 100dvh;
}
.min-h-18 {
    min-height: 4.5rem;
}
.min-h-200 {
    min-height: 200px;
}
.w-1\/2 {
    width: 50%;
}
.w-10 {
    width: 2.5rem;
}
.w-11 {
    width: 2.75rem;
}
.w-12 {
    width: 3rem;
}
.w-14 {
    width: 3.5rem;
}
.w-16 {
    width: 4rem;
}
.w-2\.5 {
    width: 0.625rem;
}
.w-20 {
    width: 5rem;
}
.w-24 {
    width: 6rem;
}
.w-28 {
    width: 7rem;
}
.w-3\.5 {
    width: 0.875rem;
}
.w-32 {
    width: 8rem;
}
.w-3 {
    width: 3rem;
}
.w-4 {
    width: 1rem;
}
.w-40 {
    width: 10rem;
}
.w-5 {
    width: 1.25rem;
}
.w-52 {
    width: 13rem;
}
.w-64 {
    width: 16rem;
}
.w-72 {
    width: 18rem;
}
.w-73 {
    width: 22rem;
}
.w-\[52px\] {
    width: 52px;
}
.w-\[60px\] {
    width: 60px;
}
.w-auto {
    width: auto;
}
.w-full {
    width: 100%;
}
.w-px {
    width: 1px;
}
.min-w-\[8rem\] {
    min-width: 8rem;
}
.min-w-\[var\(--radix-select-trigger-width\)\] {
    min-width: var(--radix-select-trigger-width);
}
.max-w-2xl {
    max-width: 42rem;
}
.max-w-36 {
    max-width: 9rem;
}
.max-w-52 {
    max-width: 13rem;
}
.max-w-56 {
    max-width: 14rem;
}
.max-w-64 {
    max-width: 16rem;
}
.max-w-6xl {
    max-width: 72rem;
}
.max-w-72 {
    max-width: 18rem;
}
.max-w-\[250px\] {
    max-width: 250px;
}
.max-w-\[370px\] {
    max-width: 370px;
}
.max-w-\[640px\] {
    max-width: 640px;
}
.max-w-\[710px\] {
    max-width: 710px;
}
.max-w-\[730px\] {
    max-width: 730px;
}
.max-w-lg {
    max-width: 32rem;
}
.max-w-md {
    max-width: 28rem;
}
.max-w-xs {
    max-width: 20rem;
}
.flex-1 {
    flex: 1 1 0%;
}
.shrink-0 {
    flex-shrink: 0;
}
.grow {
    flex-grow: 1;
}
.border-separate {
    border-collapse: separate;
}
.border-spacing-y-2 {
    --tw-border-spacing-y: 0.5rem;
    border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
}
.border-spacing-y-6 {
    --tw-border-spacing-y: 1.5rem;
    border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
}
.-translate-x-1\/2 {
    --tw-translate-x: -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));
}
.-translate-y-1\/2 {
    --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));
}
.translate-x-\[-50\%\] {
    --tw-translate-x: -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));
}
.translate-y-\[-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));
}
.rotate-\[22deg\] {
    --tw-rotate: 22deg;
    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));
}
.scale-75 {
    --tw-scale-x: .75;
    --tw-scale-y: .75;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.cursor-default {
    cursor: default;
}
.cursor-pointer {
    cursor: pointer;
}
.touch-none {
    touch-action: none;
}
.select-none {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}
.resize {
    resize: both;
}
.list-disc {
    list-style-type: disc;
}
.appearance-none {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.flex-row {
    flex-direction: row;
}
.flex-col {
    flex-direction: column;
}
.flex-col-reverse {
    flex-direction: column-reverse;
}
.flex-wrap {
    flex-wrap: wrap;
}
.flex-nowrap {
    flex-wrap: nowrap;
}
.items-start {
    align-items: flex-start;
}
.items-end {
    align-items: flex-end;
}
.items-center {
    align-items: center;
}
.items-stretch {
    align-items: stretch;
}
.justify-start {
    justify-content: flex-start;
}
.justify-end {
    justify-content: flex-end;
}
.justify-center {
    justify-content: center;
}
.justify-between {
    justify-content: space-between;
}
.gap-0\.5 {
    gap: 0.125rem;
}
.gap-1 {
    gap: 0.25rem;
}
.gap-1\.5 {
    gap: 0.375rem;
}
.gap-2 {
    gap: 0.5rem;
}
.gap-2\.5 {
    gap: 0.625rem;
}
.gap-24 {
    gap: 6rem;
}
.gap-3 {
    gap: 0.75rem;
}
.gap-3\.5 {
    gap: 0.875rem;
}
.gap-4 {
    gap: 1rem;
}
.gap-5 {
    gap: 1.25rem;
}
.gap-6 {
    gap: 1.5rem;
}
.gap-7 {
    gap: 3rem;
}
.gap-y-2 {
    row-gap: 0.5rem;
}
.space-x-2> :not([hidden])~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-1> :not([hidden])~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-1\.5> :not([hidden])~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}
.space-y-2> :not([hidden])~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-2\.5> :not([hidden])~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0.625rem * var(--tw-space-y-reverse));
}
.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));
}
.space-y-4> :not([hidden])~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.overflow-auto {
    overflow: auto;
}
.overflow-hidden {
    overflow: hidden;
}
.overflow-x-auto {
    overflow-x: auto;
}
.overflow-y-auto {
    overflow-y: auto;
}
.overflow-y-hidden {
    overflow-y: hidden;
}
.overflow-x-scroll {
    overflow-x: scroll;
}
.overflow-x-hidden {
    overflow-x: hidden;
}
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.whitespace-nowrap {
    white-space: nowrap;
}
.\!rounded-10 {
    border-radius: 10px !important;
}
.\!rounded-\[10px\] {
    border-radius: 10px !important;
}
.\!rounded-xl {
    border-radius: 0.75rem !important;
}
.rounded-10 {
    border-radius: 10px;
}
.rounded-14 {
    border-radius: 14px;
}
.rounded-20 {
    border-radius: 20px;
}
.rounded-0xl {
    border-radius: 0.25rem;
}
.rounded-2xl {
    border-radius: 1rem;
}
.rounded-3xl {
    border-radius: 1.5rem;
}
.rounded-\[inherit\] {
    border-radius: inherit;
}
.rounded-full {
    border-radius: 9999px;
}
.rounded-lg {
    border-radius: var(--radius);
}
.rounded-md {
    border-radius: calc(var(--radius) - 2px);
}
.rounded-none {
    border-radius: 0px;
}
.rounded-sm {
    border-radius: calc(var(--radius) - 4px);
}
.rounded-xl {
    border-radius: 0.75rem;
}
.rounded-bl-2xl {
    border-bottom-left-radius: 1rem;
}
.rounded-bl-xl {
    border-bottom-left-radius: 0.75rem;
}
.rounded-br-2xl {
    border-bottom-right-radius: 1rem;
}
.rounded-br-xl {
    border-bottom-right-radius: 0.75rem;
}
.rounded-tl-xl {
    border-top-left-radius: 0.75rem;
}
.rounded-tr-xl {
    border-top-right-radius: 0.75rem;
}
.border {
    border-width: 1px;
}
.border-2 {
    border-width: 2px;
}
.border-4 {
    border-width: 4px;
}
.border-y {
    border-top-width: 1px;
    border-bottom-width: 1px;
}
.border-b {
    border-bottom-width: 1px;
}
.border-b-2 {
    border-bottom-width: 2px;
}
.border-l {
    border-left-width: 1px;
}
.border-r {
    border-right-width: 1px;
}
.border-t {
    border-top-width: 1px;
}
.border-dashed {
    border-style: dashed;
}
.border-none {
    border-style: none;
}
.border-bg-red2 {
    --tw-border-opacity: 1;
    border-color: rgb(255 78 67 / var(--tw-border-opacity, 1));
}
.border-black-100 {
    --tw-border-opacity: 1;
    border-color: rgb(1 29 45 / var(--tw-border-opacity, 1));
}
.border-black-200 {
    --tw-border-opacity: 1;
    border-color: rgb(10 39 55 / var(--tw-border-opacity, 1));
}
.border-card-border {
    --tw-border-opacity: 1;
    border-color: rgb(76 114 216 / var(--tw-border-opacity, 1));
}
.border-color-green {
    --tw-border-opacity: 1;
    border-color: rgb(162 224 76 / var(--tw-border-opacity, 1));
}
.border-color-green2 {
    --tw-border-opacity: 1;
    border-color: rgb(72 241 0 / var(--tw-border-opacity, 1));
}
.border-dark-blue-300 {
    --tw-border-opacity: 1;
    border-color: rgb(22 50 66 / var(--tw-border-opacity, 1));
}
.border-dark-blue-400 {
    --tw-border-opacity: 1;
    border-color: rgb(33 62 79 / var(--tw-border-opacity, 1));
}
.border-dark-blue-500 {
    --tw-border-opacity: 1;
    border-color: rgb(49 81 99 / var(--tw-border-opacity, 1));
}
.border-input {
    border-color: hsl(var(--input));
}
.border-primary {
    border-color: hsl(var(--primary));
}
.border-stable {
    --tw-border-opacity: 1;
    border-color: rgb(176 255 67 / var(--tw-border-opacity, 1));
}
.border-transparent {
    border-color: transparent;
}
.border-l-transparent {
    border-left-color: transparent;
}
.border-t-transparent {
    border-top-color: transparent;
}
.\!bg-dark-blue-400 {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(33 62 79 / var(--tw-bg-opacity, 1)) !important;
}
.bg-\[rgba\(0\2c 19\2c 31\2c 0\.68\)\] {
    background-color: rgba(0, 19, 31, 0.68);
}
.bg-\[rgba\(0\2c 20\2c 31\2c 0\.30\)\] {
    background-color: rgba(0, 20, 31, 0.30);
}
.bg-background {
    background-color: hsl(var(--background));
}
.bg-bg-black {
    --tw-bg-opacity: 1;
    background-color: rgb(0 20 31 / var(--tw-bg-opacity, 1));
}
.bg-bg-black\/30 {
    background-color: rgb(0 20 31 / 0.3);
}
.bg-bg-blue\/20 {
    background-color: rgb(43 178 255 / 0.2);
}
.bg-bg-red {
    --tw-bg-opacity: 1;
    background-color: rgb(255 86 32 / var(--tw-bg-opacity, 1));
}
.bg-bg-red2 {
    --tw-bg-opacity: 1;
    background-color: rgb(255 78 67 / var(--tw-bg-opacity, 1));
}
.bg-bg-red2\/10 {
    background-color: rgb(255 78 67 / 0.1);
}
.bg-bg-yellow-2 {
    --tw-bg-opacity: 1;
    background-color: rgb(224 215 5 / var(--tw-bg-opacity, 1));
}
.bg-bg-yellow\/10 {
    background-color: rgb(255 220 39 / 0.1);
}
.bg-black-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(1 29 45 / var(--tw-bg-opacity, 1));
}
.bg-black-200 {
    --tw-bg-opacity: 1;
    background-color: rgb(10 39 55 / var(--tw-bg-opacity, 1));
}
.bg-blue-200 {
    --tw-bg-opacity: 1;
    background-color: rgb(191 219 254 / var(--tw-bg-opacity, 1));
}
.bg-border {
    background-color: hsl(var(--border));
}
.bg-color-danger {
    --tw-bg-opacity: 1;
    background-color: rgb(255 93 42 / var(--tw-bg-opacity, 1));
}
.bg-dark-blue-300 {
    --tw-bg-opacity: 1;
    background-color: rgb(22 50 66 / var(--tw-bg-opacity, 1));
}
.bg-dark-blue-400 {
    --tw-bg-opacity: 1;
    background-color: rgb(33 62 79 / var(--tw-bg-opacity, 1));
}
.bg-dark-blue-500 {
    --tw-bg-opacity: 1;
    background-color: rgb(49 81 99 / var(--tw-bg-opacity, 1));
}
.bg-destructive {
    background-color: hsl(var(--destructive));
}
.bg-foreground {
    background-color: hsl(var(--foreground));
}
.bg-invisible-danger\/15 {
    background-color: rgb(255 96 61 / 0.15);
}
.bg-invisible-danger\/\[0\.17\] {
    background-color: rgb(255 96 61 / 0.17);
}
.bg-muted {
    background-color: hsl(var(--muted));
}
.bg-popover {
    background-color: hsl(var(--popover));
}
.bg-stable {
    --tw-bg-opacity: 1;
    background-color: rgb(176 255 67 / var(--tw-bg-opacity, 1));
}
.bg-stable\/10 {
    background-color: rgb(176 255 67 / 0.1);
}
.bg-transparent {
    background-color: transparent;
}
.bg-opacity-\[0\.59\] {
    --tw-bg-opacity: 0.59;
}
.bg-\[url\(assets\/images\/tasks-gradient-bg\.svg\)\] {
    background-image: url("data:image/svg+xml,%3csvg%20width='180'%20height='50'%20viewBox='0%200%20180%2050'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_3_1038)'%3e%3cg%20filter='url(%23filter0_f_3_1038)'%3e%3ccircle%20cx='12.5'%20cy='53.5'%20r='37.5'%20fill='%2380D96F'/%3e%3ccircle%20cx='26'%20cy='14'%20r='20'%20fill='%238AC242'/%3e%3ccircle%20cx='42'%20cy='32'%20r='20'%20fill='%23B0C242'/%3e%3c/g%3e%3c/g%3e%3cdefs%3e%3cfilter%20id='filter0_f_3_1038'%20x='-91.8'%20y='-72.8'%20width='220.6'%20height='230.6'%20filterUnits='userSpaceOnUse'%20color-interpolation-filters='sRGB'%3e%3cfeFlood%20flood-opacity='0'%20result='BackgroundImageFix'/%3e%3cfeBlend%20mode='normal'%20in='SourceGraphic'%20in2='BackgroundImageFix'%20result='shape'/%3e%3cfeGaussianBlur%20stdDeviation='33.4'%20result='effect1_foregroundBlur_3_1038'/%3e%3c/filter%3e%3cclipPath%20id='clip0_3_1038'%3e%3cpath%20d='M0%2012C0%205.37258%205.37258%200%2012%200H180V50H12C5.37258%2050%200%2044.6274%200%2038V12Z'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");
}
.bg-\[url\(assets\/images\/wheel-gradient-bg\.svg\)\] {
    background-image: url("data:image/svg+xml,%3csvg%20width='126'%20height='50'%20viewBox='0%200%20126%2050'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20clip-path='url(%23clip0_3_1053)'%3e%3cg%20filter='url(%23filter0_f_3_1053)'%3e%3ccircle%20cx='12.5'%20cy='53.5'%20r='37.5'%20fill='%236FBFD9'/%3e%3ccircle%20cx='26'%20cy='14'%20r='20'%20fill='%234276C2'/%3e%3ccircle%20cx='42'%20cy='32'%20r='20'%20fill='%23427DC2'/%3e%3c/g%3e%3c/g%3e%3cdefs%3e%3cfilter%20id='filter0_f_3_1053'%20x='-91.8'%20y='-72.8'%20width='220.6'%20height='230.6'%20filterUnits='userSpaceOnUse'%20color-interpolation-filters='sRGB'%3e%3cfeFlood%20flood-opacity='0'%20result='BackgroundImageFix'/%3e%3cfeBlend%20mode='normal'%20in='SourceGraphic'%20in2='BackgroundImageFix'%20result='shape'/%3e%3cfeGaussianBlur%20stdDeviation='33.4'%20result='effect1_foregroundBlur_3_1053'/%3e%3c/filter%3e%3cclipPath%20id='clip0_3_1053'%3e%3cpath%20d='M0%2012C0%205.37258%205.37258%200%2012%200H180V50H12C5.37258%2050%200%2044.6274%200%2038V12Z'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");
}
.bg-gradient-green {
    background-image: linear-gradient(180deg, #76CB00 0%, #34C800 100%);
}
.bg-linear-danger {
    background-image: linear-gradient(180deg, #FF4F29 0%, #FF9345 100%);
}
.bg-link-gradient {
    background-image: linear-gradient(90deg, rgba(38, 216, 255, 0.39) 0%, rgba(16, 46, 63, 0.02) 100%);
}
.bg-pagination-gradient {
    background-image: linear-gradient(0deg, #011D2D 0%, rgba(1, 29, 45, 0.00) 91.5%);
}
.bg-primary-gradient {
    background-image: linear-gradient(180deg, #8BAC5C 0%, #80C520 100%);
}
.bg-seconday-gradient {
    background-image: linear-gradient(180deg, #29B2FF 0%, #23F2FF 100%);
}
.bg-success-gradient-shade {
    background-image: linear-gradient(180deg, rgba(139, 172, 92, 0.15) 0%, rgba(128, 197, 32, 0.15) 100%);
}
.bg-yellow-gradient {
    background-image: linear-gradient(180deg, #FBFF29 0%, #FFB423 100%);
}
.bg-contain {
    background-size: contain;
}
.bg-cover {
    background-size: cover;
}
.bg-clip-text {
    -webkit-background-clip: text;
    background-clip: text;
}
.bg-center {
    background-position: center;
}
.bg-no-repeat {
    background-repeat: no-repeat;
}
.object-contain {
    -o-object-fit: contain;
    object-fit: contain;
}
.object-cover {
    -o-object-fit: cover;
    object-fit: cover;
}
.object-center {
    -o-object-position: center;
    object-position: center;
}
.p-0 {
    padding: 0px;
}
.p-0\.5 {
    padding: 0.125rem;
}
.p-1 {
    padding: 0.25rem;
}
.p-1\.5 {
    padding: 0.375rem;
}
.p-2 {
    padding: 0.5rem;
}
.p-2\.5 {
    padding: 0.625rem;
}
.p-3 {
    padding: 0.75rem;
}
.p-4 {
    padding: 1rem;
}
.p-5 {
    padding: 1.25rem;
}
.p-6 {
    padding: 1.5rem;
}
.p-\[1px\] {
    padding: 1px;
}
.px-0 {
    padding-left: 0px;
    padding-right: 0px;
}
.px-1 {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}
.px-1\.5 {
    padding-left: 0.375rem;
    padding-right: 0.375rem;
}
.px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
.px-2\.5 {
    padding-left: 0.625rem;
    padding-right: 0.625rem;
}
.px-3 {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}
.px-3\.5 {
    padding-left: 0.875rem;
    padding-right: 0.875rem;
}
.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}
.px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}
.px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}
.px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
}
.py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}
.py-1\.5 {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}
.py-10 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}
.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.py-2\.5 {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
}
.py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}
.py-3\.5 {
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
}
.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.py-5 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}
.py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}
.py-7 {
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
}
.py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
}
.\!pb-0 {
    padding-bottom: 0px !important;
}
.pb-0 {
    padding-bottom: 0px;
}
.pb-1\.5 {
    padding-bottom: 0.375rem;
}
.pb-10 {
    padding-bottom: 2.5rem;
}
.pb-2\.5 {
    padding-bottom: 0.625rem;
}
.pb-20 {
    padding-bottom: 5rem;
}
.pb-3 {
    padding-bottom: 0.75rem;
}
.pb-36 {
    padding-bottom: 9rem;
}
.pb-4 {
    padding-bottom: 1rem;
}
.pb-40 {
    padding-bottom: 10rem;
}
.pb-48 {
    padding-bottom: 12rem;
}
.pl-0 {
    padding-left: 0px;
}
.pl-1 {
    padding-left: 0.25rem;
}
.pl-2 {
    padding-left: 0.5rem;
}
.pl-2\.5 {
    padding-left: 0.625rem;
}
.pl-3 {
    padding-left: 0.75rem;
}
.pl-4 {
    padding-left: 1rem;
}
.pl-5 {
    padding-left: 1.25rem;
}
.pl-8 {
    padding-left: 2rem;
}
.pr-0 {
    padding-right: 0px;
}
.pr-1 {
    padding-right: 0.25rem;
}
.pr-2 {
    padding-right: 0.5rem;
}
.pr-2\.5 {
    padding-right: 0.625rem;
}
.pr-3 {
    padding-right: 0.75rem;
}
.pr-4 {
    padding-right: 1rem;
}
.pr-7 {
    padding-right: 1.75rem;
}
.pt-0 {
    padding-top: 0px;
}
.pt-14 {
    padding-top: 3.5rem;
}
.pt-4 {
    padding-top: 1rem;
}
.pt-5 {
    padding-top: 1.25rem;
}
.pt-6 {
    padding-top: 1.5rem;
}
.text-left {
    text-align: left;
}
.text-center {
    text-align: center;
}
.text-right {
    text-align: right;
}
.font-fixel-display {
    font-family: Fixel Display, sans-serif;
}
.font-fixel-text {
    font-family: Fixel Text, sans-serif;
}
.\!text-xs {
    font-size: 0.75rem !important;
    line-height: 1rem !important;
}
.text-10 {
    font-size: .625rem;
}
.text-14 {
    font-size: 14px;
}
.text-15 {
    font-size: .9375rem;
}
.text-18 {
    font-size: 1.125rem;
}
.text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
}
.text-32 {
    font-size: 2rem;
}
.text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
}
.text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
}
.text-7xl {
    font-size: 4.5rem;
    line-height: 1;
}
.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;
}
.text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
}
.text-xsl {
    font-size: 0.75rem;
    line-height: 1rem;
}
.font-bold {
    font-weight: 700;
}
.font-extrabold {
    font-weight: 800;
}
.font-medium {
    font-weight: 500;
}
.font-normal {
    font-weight: 400;
}
.font-semibold {
    font-weight: 600;
}
.uppercase {
    text-transform: uppercase;
}
.capitalize {
    text-transform: capitalize;
}
.leading-106 {
    line-height: 106%;
}
.leading-136 {
    line-height: 136.364%;
}
.leading-164 {
    line-height: 164.286%;
}
.leading-5 {
    line-height: 1.25rem;
}
.leading-6 {
    line-height: 1.5rem;
}
.leading-93 {
    line-height: 93%;
}
.leading-none {
    line-height: 1;
}
.-tracking-0\.24 {
    letter-spacing: -0.24px;
}
.-tracking-0\.28 {
    letter-spacing: -0.28px;
}
.-tracking-0\.32 {
    letter-spacing: -0.32px;
}
.-tracking-0\.796 {
    letter-spacing: -0.796px;
}
.tracking-1\.32 {
    letter-spacing: 1.32px;
}
.tracking-tight {
    letter-spacing: -0.025em;
}
.text-bg-red {
    --tw-text-opacity: 1;
    color: rgb(255 86 32 / var(--tw-text-opacity, 1));
}
.text-black-100 {
    --tw-text-opacity: 1;
    color: rgb(1 29 45 / var(--tw-text-opacity, 1));
}
.text-blue-700 {
    --tw-text-opacity: 1;
    color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}
.text-blue-900 {
    --tw-text-opacity: 1;
    color: rgb(30 58 138 / var(--tw-text-opacity, 1));
}
.text-color-green3 {
    --tw-text-opacity: 1;
    color: rgb(171 255 158 / var(--tw-text-opacity, 1));
}
.text-current {
    color: currentColor;
}
.text-dark-blue-2 {
    --tw-text-opacity: 1;
    color: rgb(49 81 99 / var(--tw-text-opacity, 1));
}
.text-dark-blue-500 {
    --tw-text-opacity: 1;
    color: rgb(49 81 99 / var(--tw-text-opacity, 1));
}
.text-dark-blue-600 {
    --tw-text-opacity: 1;
    color: rgb(98 125 140 / var(--tw-text-opacity, 1));
}
.text-dark-blue-700 {
    --tw-text-opacity: 1;
    color: rgb(118 151 169 / var(--tw-text-opacity, 1));
}
.text-dark-blue-800 {
    --tw-text-opacity: 1;
    color: rgb(154 179 194 / var(--tw-text-opacity, 1));
}
.text-dark-blue-900 {
    --tw-text-opacity: 1;
    color: rgb(176 208 226 / var(--tw-text-opacity, 1));
}
.text-destructive-foreground {
    color: hsl(var(--destructive-foreground));
}
.text-muted-foreground {
    color: hsl(var(--muted-foreground));
}
.text-popover-foreground {
    color: hsl(var(--popover-foreground));
}
.text-primary {
    color: hsl(var(--primary));
}
.text-stable {
    --tw-text-opacity: 1;
    color: rgb(176 255 67 / var(--tw-text-opacity, 1));
}
.text-transparent {
    color: transparent;
}
.text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-white\/60 {
    color: rgb(255 255 255 / 0.6);
}
.text-white\/\[0\.5\] {
    color: rgb(255 255 255 / 0.5);
}
.underline {
    text-decoration-line: underline;
}
.underline-offset-4 {
    text-underline-offset: 4px;
}
.opacity-50 {
    opacity: 0.5;
}
.mix-blend-luminosity {
    mix-blend-mode: luminosity;
}
.shadow-green-shadow {
    --tw-shadow: 0px 4px 17.1px 0px rgba(129, 196, 38, 0.30);
    --tw-shadow-colored: 0px 4px 17.1px 0px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg {
    --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px 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-md {
    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px 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-none {
    --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-none {
    outline: 2px solid transparent;
    outline-offset: 2px;
}
.outline {
    outline-style: solid;
}
.ring-0 {
    --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(0px + 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-2 {
    --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);
}
.ring-ring {
    --tw-ring-color: hsl(var(--ring));
}
.\!ring-offset-0 {
    --tw-ring-offset-width: 0px !important;
}
.ring-offset-background {
    --tw-ring-offset-color: hsl(var(--background));
}
.ring-offset-transparent {
    --tw-ring-offset-color: transparent;
}
.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);
}
.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);
}
.backdrop-blur-sm {
    --tw-backdrop-blur: blur(4px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.transition-opacity {
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.duration-1000 {
    transition-duration: 1000ms;
}
.duration-200 {
    transition-duration: 200ms;
}
.duration-75 {
    transition-duration: 75ms;
}
@keyframes enter {
    from {
        opacity: var(--tw-enter-opacity, 1);
        transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
    }
}
@keyframes exit {
    to {
        opacity: var(--tw-exit-opacity, 1);
        transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
    }
}
.duration-1000 {
    animation-duration: 1000ms;
}
.duration-200 {
    animation-duration: 200ms;
}
.duration-75 {
    animation-duration: 75ms;
}
.hidden-scroll-bar {
    scrollbar-width: none;
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
}
.hidden-scroll-bar::-webkit-scrollbar {
    width: 0 !important;
}
@font-face {
    font-family: "Fixel Display";
    src: url("/assets/fonts/FixelDisplay-Light-YoICWb6J.woff2") format("woff2"), url("/assets/fonts/FixelDisplay-Light-cvWpgDWP.woff") format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Fixel Display";
    src: url("/assets/fonts/FixelDisplay-Black-BhUlUpyr.woff2") format("woff2"), url("/assets/fonts/FixelDisplay-Black-Cg2lV1Aw.woff") format("woff");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Fixel Display";
    src: url("/assets/fonts/FixelDisplay-Bold-Cc-iU087.woff2") format("woff2"), url("/assets/fonts/FixelDisplay-Bold-O34NZn3z.woff") format("woff");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Fixel Text";
    src: url("/assets/fonts/FixelText-Black-Cf7VjIRK.woff2") format("woff2"), url("/assets/fonts/FixelText-Black-BZ8RXOsN.woff") format("woff");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Fixel Text";
    src: url("/assets/fonts/FixelText-Bold-CFBOhQ8i.woff2") format("woff2"), url("/assets/fonts/FixelText-Bold-BsDkPAI0.woff") format("woff");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Fixel Display";
    src: url("/assets/fonts/FixelDisplay-Medium-BgY51sQ2.woff2") format("woff2"), url("/assets/fonts/FixelDisplay-Medium-BQqgqOSE.woff") format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Fixel Display";
    src: url("/assets/fonts/FixelDisplay-SemiBold-B8LRcXof.woff2") format("woff2"), url("/assets/fonts/FixelDisplay-SemiBold-DmAi9L_p.woff") format("woff");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Fixel Text";
    src: url("/assets/fonts/FixelText-Medium-BghW6R20.woff2") format("woff2"), url("/assets/fonts/FixelText-Medium-AB-iD7vd.woff") format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Fixel Text";
    src: url("/assets/fonts/FixelText-ExtraBold-BXMK3wPj.woff2") format("woff2"), url("/assets/fonts/FixelText-ExtraBold-C84O9cV7.woff") format("woff");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Fixel Text";
    src: url("/assets/fonts/FixelText-SemiBold-BX5n-r7r.woff2") format("woff2"), url("/assets/fonts/FixelText-SemiBold-Q6lfWweD.woff") format("woff");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Fixel Text";
    src: url("/assets/fonts/FixelText-Light-DddUvkIP.woff2") format("woff2"), url("/assets/fonts/FixelText-Light-CyXP1wiD.woff") format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
.file\:border-0::file-selector-button {
    border-width: 0px;
}
.file\:bg-transparent::file-selector-button {
    background-color: transparent;
}
.file\:text-sm::file-selector-button {
    font-size: 0.875rem;
    line-height: 1.25rem;
}
.file\:font-medium::file-selector-button {
    font-weight: 500;
}
.file\:text-foreground::file-selector-button {
    color: hsl(var(--foreground));
}
.placeholder\:text-dark-blue-600::-moz-placeholder {
    --tw-text-opacity: 1;
    color: rgb(98 125 140 / var(--tw-text-opacity, 1));
}
.placeholder\:text-dark-blue-600::placeholder {
    --tw-text-opacity: 1;
    color: rgb(98 125 140 / var(--tw-text-opacity, 1));
}
.placeholder\:text-dark-blue-700::-moz-placeholder {
    --tw-text-opacity: 1;
    color: rgb(118 151 169 / var(--tw-text-opacity, 1));
}
.placeholder\:text-dark-blue-700::placeholder {
    --tw-text-opacity: 1;
    color: rgb(118 151 169 / var(--tw-text-opacity, 1));
}
.placeholder\:text-muted-foreground::-moz-placeholder {
    color: hsl(var(--muted-foreground));
}
.placeholder\:text-muted-foreground::placeholder {
    color: hsl(var(--muted-foreground));
}
.before\:absolute::before {
    content: var(--tw-content);
    position: absolute;
}
.before\:left-0::before {
    content: var(--tw-content);
    left: 0px;
}
.before\:top-0::before {
    content: var(--tw-content);
    top: 0px;
}
.before\:-z-10::before {
    content: var(--tw-content);
    z-index: -10;
}
.before\:size-full::before {
    content: var(--tw-content);
    width: 100%;
    height: 100%;
}
.before\:bg-hero-gradient::before {
    content: var(--tw-content);
    background-image: linear-gradient(0deg, rgba(0, 20, 31, 0.00) 55.69%, #00141F 100%), linear-gradient(90deg, rgba(0, 20, 31, 0.00) 91.72%, #00141F 100%), linear-gradient(271deg, rgba(0, 20, 31, 0.00) 0.48%, #00141F 99.52%), linear-gradient(180deg, rgba(0, 20, 31, 0.00) 0%, #00141F 100%);
}
.after\:absolute::after {
    content: var(--tw-content);
    position: absolute;
}
.after\:bottom-0::after {
    content: var(--tw-content);
    bottom: 0px;
}
.after\:left-0::after {
    content: var(--tw-content);
    left: 0px;
}
.after\:right-0::after {
    content: var(--tw-content);
    right: 0px;
}
.after\:top-0::after {
    content: var(--tw-content);
    top: 0px;
}
.after\:-z-10::after {
    content: var(--tw-content);
    z-index: -10;
}
.after\:hidden::after {
    content: var(--tw-content);
    display: none;
}
.after\:h-56::after {
    content: var(--tw-content);
    height: 14rem;
}
.after\:h-full::after {
    content: var(--tw-content);
    height: 100%;
}
.after\:w-10::after {
    content: var(--tw-content);
    width: 2.5rem;
}
.after\:w-20::after {
    content: var(--tw-content);
    width: 5rem;
}
.after\:w-28::after {
    content: var(--tw-content);
    width: 7rem;
}
.after\:w-full::after {
    content: var(--tw-content);
    width: 100%;
}
.after\:bg-card-gradient::after {
    content: var(--tw-content);
    background-image: linear-gradient(270deg, #011D2D 0%, rgba(1, 29, 45, 0.00) 89.04%);
}
.after\:bg-latest-bets-bottom-gradient::after {
    content: var(--tw-content);
    background-image: linear-gradient(0deg, #00141F 0%, rgba(1, 26, 40, 0.00) 100%);
}
.after\:bg-overlay-sm-gradient::after {
    content: var(--tw-content);
    background-image: linear-gradient(90deg, rgba(1, 29, 45, 0.00) -27.53%, #011D2D 50%);
}
.after\:bg-promotion-hero-gradient::after {
    content: var(--tw-content);
    background-image: linear-gradient(0deg, #00141F 0%, rgba(1, 26, 40, 0.00) 100%);
}
.after\:bg-scroll-x-overlay::after {
    content: var(--tw-content);
    background-image: linear-gradient(270deg, #011D2D 48.1%, rgba(1, 29, 45, 0.00) 97.74%);
}
.first\:rounded-l-md:first-child {
    border-top-left-radius: calc(var(--radius) - 2px);
    border-bottom-left-radius: calc(var(--radius) - 2px);
}
.first\:rounded-bl-lg:first-child {
    border-bottom-left-radius: var(--radius);
}
.first\:rounded-tl-lg:first-child {
    border-top-left-radius: var(--radius);
}
.first\:border-l:first-child {
    border-left-width: 1px;
}
.last\:rounded-r-md:last-child {
    border-top-right-radius: calc(var(--radius) - 2px);
    border-bottom-right-radius: calc(var(--radius) - 2px);
}
.last\:rounded-br-lg:last-child {
    border-bottom-right-radius: var(--radius);
}
.last\:rounded-tr-lg:last-child {
    border-top-right-radius: var(--radius);
}
.hover\:border-color-green:hover {
    --tw-border-opacity: 1;
    border-color: rgb(162 224 76 / var(--tw-border-opacity, 1));
}
.hover\:border-primary-border:hover {
    --tw-border-opacity: 1;
    border-color: rgb(139 172 92 / var(--tw-border-opacity, 1));
}
.hover\:bg-accent:hover {
    background-color: hsl(var(--accent));
}
.hover\:bg-bg-blue\/20:hover {
    background-color: rgb(43 178 255 / 0.2);
}
.hover\:bg-bg-red:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(255 86 32 / var(--tw-bg-opacity, 1));
}
.hover\:bg-black-100:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(1 29 45 / var(--tw-bg-opacity, 1));
}
.hover\:bg-black-200:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(10 39 55 / var(--tw-bg-opacity, 1));
}
.hover\:bg-dark-blue-300:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(22 50 66 / var(--tw-bg-opacity, 1));
}
.hover\:bg-dark-blue-400:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(33 62 79 / var(--tw-bg-opacity, 1));
}
.hover\:bg-dark-blue-500:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(49 81 99 / var(--tw-bg-opacity, 1));
}
.hover\:bg-destructive\/90:hover {
    background-color: hsl(var(--destructive) / 0.9);
}
.hover\:bg-stable:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(176 255 67 / var(--tw-bg-opacity, 1));
}
.hover\:bg-stable\/10:hover {
    background-color: rgb(176 255 67 / 0.1);
}
.hover\:bg-link-gradient:hover {
    background-image: linear-gradient(90deg, rgba(38, 216, 255, 0.39) 0%, rgba(16, 46, 63, 0.02) 100%);
}
.hover\:bg-primary-gradient-hover:hover {
    background-image: linear-gradient(180deg, #80C520 0%, #8BAC5C 100%);
}
.hover\:bg-seconday-gradient:hover {
    background-image: linear-gradient(180deg, #29B2FF 0%, #23F2FF 100%);
}
.hover\:text-accent-foreground:hover {
    color: hsl(var(--accent-foreground));
}
.hover\:text-black-100:hover {
    --tw-text-opacity: 1;
    color: rgb(1 29 45 / var(--tw-text-opacity, 1));
}
.hover\:text-dark-blue-900:hover {
    --tw-text-opacity: 1;
    color: rgb(176 208 226 / var(--tw-text-opacity, 1));
}
.hover\:text-white:hover {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.hover\:underline:hover {
    text-decoration-line: underline;
}
.hover\:opacity-80:hover {
    opacity: 0.8;
}
.focus\:bg-accent:focus {
    background-color: hsl(var(--accent));
}
.focus\:text-accent-foreground:focus {
    color: hsl(var(--accent-foreground));
}
.focus\:outline-none:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
}
.focus\:outline-transparent:focus {
    outline-color: transparent;
}
.focus\:ring-0: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(0px + 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-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-ring:focus {
    --tw-ring-color: hsl(var(--ring));
}
.focus\:ring-offset-0:focus {
    --tw-ring-offset-width: 0px;
}
.focus\:ring-offset-2:focus {
    --tw-ring-offset-width: 2px;
}
.focus-visible\:outline-none:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
}
.focus-visible\:ring-2:focus-visible {
    --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-visible\:ring-ring:focus-visible {
    --tw-ring-color: hsl(var(--ring));
}
.focus-visible\:ring-transparent:focus-visible {
    --tw-ring-color: transparent;
}
.focus-visible\:ring-offset-2:focus-visible {
    --tw-ring-offset-width: 2px;
}
.focus-visible\:ring-offset-background:focus-visible {
    --tw-ring-offset-color: hsl(var(--background));
}
.disabled\:pointer-events-none:disabled {
    pointer-events: none;
}
.disabled\:cursor-not-allowed:disabled {
    cursor: not-allowed;
}
.disabled\:opacity-50:disabled {
    opacity: 0.5;
}
.group:hover .group-hover\:scale-75 {
    --tw-scale-x: .75;
    --tw-scale-y: .75;
    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));
}
.group:hover .group-hover\:bg-black-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(1 29 45 / var(--tw-bg-opacity, 1));
}
.group:hover .group-hover\:bg-dark-blue-400 {
    --tw-bg-opacity: 1;
    background-color: rgb(33 62 79 / var(--tw-bg-opacity, 1));
}
.group:hover .group-hover\:text-bg-blue {
    --tw-text-opacity: 1;
    color: rgb(43 178 255 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-stable {
    --tw-text-opacity: 1;
    color: rgb(176 255 67 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.group.active .group-\[\.active\]\:text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.peer:disabled~.peer-disabled\:cursor-not-allowed {
    cursor: not-allowed;
}
.peer:disabled~.peer-disabled\:opacity-70 {
    opacity: 0.7;
}
.has-\[\:disabled\]\:opacity-50:has(:disabled) {
    opacity: 0.5;
}
.data-\[disabled\]\:pointer-events-none[data-disabled] {
    pointer-events: none;
}
.data-\[side\=bottom\]\:translate-y-1[data-side="bottom"] {
    --tw-translate-y: 0.25rem;
    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));
}
.data-\[side\=left\]\:-translate-x-1[data-side="left"] {
    --tw-translate-x: -0.25rem;
    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));
}
.data-\[side\=right\]\:translate-x-1[data-side="right"] {
    --tw-translate-x: 0.25rem;
    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));
}
.data-\[side\=top\]\:-translate-y-1[data-side="top"] {
    --tw-translate-y: -0.25rem;
    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));
}
.data-\[state\=checked\]\:translate-x-5[data-state="checked"] {
    --tw-translate-x: 1.25rem;
    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));
}
.data-\[state\=unchecked\]\:translate-x-0[data-state="unchecked"] {
    --tw-translate-x: 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));
}
.data-\[state\=active\]\:border-stable[data-state="active"] {
    --tw-border-opacity: 1;
    border-color: rgb(176 255 67 / var(--tw-border-opacity, 1));
}
.data-\[state\=checked\]\:border-stable[data-state="checked"] {
    --tw-border-opacity: 1;
    border-color: rgb(176 255 67 / var(--tw-border-opacity, 1));
}
.data-\[state\=active\]\:bg-background[data-state="active"] {
    background-color: hsl(var(--background));
}
.data-\[state\=active\]\:bg-dark-blue-300[data-state="active"] {
    --tw-bg-opacity: 1;
    background-color: rgb(22 50 66 / var(--tw-bg-opacity, 1));
}
.data-\[state\=active\]\:bg-transparent[data-state="active"] {
    background-color: transparent;
}
.data-\[state\=checked\]\:bg-dark-blue-400[data-state="checked"] {
    --tw-bg-opacity: 1;
    background-color: rgb(33 62 79 / var(--tw-bg-opacity, 1));
}
.data-\[state\=checked\]\:bg-primary[data-state="checked"] {
    background-color: hsl(var(--primary));
}
.data-\[state\=open\]\:bg-accent[data-state="open"] {
    background-color: hsl(var(--accent));
}
.data-\[state\=unchecked\]\:bg-input[data-state="unchecked"] {
    background-color: hsl(var(--input));
}
.data-\[state\=active\]\:bg-primary-gradient[data-state="active"] {
    background-image: linear-gradient(180deg, #8BAC5C 0%, #80C520 100%);
}
.data-\[state\=checked\]\:bg-primary-gradient[data-state="checked"] {
    background-image: linear-gradient(180deg, #8BAC5C 0%, #80C520 100%);
}
.data-\[state\=checked\]\:bg-seconday-gradient[data-state="checked"] {
    background-image: linear-gradient(180deg, #29B2FF 0%, #23F2FF 100%);
}
.data-\[state\=active\]\:text-dark-blue-900[data-state="active"] {
    --tw-text-opacity: 1;
    color: rgb(176 208 226 / var(--tw-text-opacity, 1));
}
.data-\[state\=active\]\:text-foreground[data-state="active"] {
    color: hsl(var(--foreground));
}
.data-\[state\=active\]\:text-white[data-state="active"] {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.data-\[state\=checked\]\:text-primary-foreground[data-state="checked"] {
    color: hsl(var(--primary-foreground));
}
.data-\[state\=open\]\:text-muted-foreground[data-state="open"] {
    color: hsl(var(--muted-foreground));
}
.data-\[disabled\]\:opacity-50[data-disabled] {
    opacity: 0.5;
}
.data-\[state\=active\]\:shadow-sm[data-state="active"] {
    --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);
}
.data-\[state\=open\]\:animate-in[data-state="open"] {
    animation-name: enter;
    animation-duration: 150ms;
    --tw-enter-opacity: initial;
    --tw-enter-scale: initial;
    --tw-enter-rotate: initial;
    --tw-enter-translate-x: initial;
    --tw-enter-translate-y: initial;
}
.data-\[state\=closed\]\:animate-out[data-state="closed"] {
    animation-name: exit;
    animation-duration: 150ms;
    --tw-exit-opacity: initial;
    --tw-exit-scale: initial;
    --tw-exit-rotate: initial;
    --tw-exit-translate-x: initial;
    --tw-exit-translate-y: initial;
}
.data-\[state\=closed\]\:fade-out-0[data-state="closed"] {
    --tw-exit-opacity: 0;
}
.data-\[state\=open\]\:fade-in-0[data-state="open"] {
    --tw-enter-opacity: 0;
}
.data-\[state\=closed\]\:zoom-out-95[data-state="closed"] {
    --tw-exit-scale: .95;
}
.data-\[state\=open\]\:zoom-in-95[data-state="open"] {
    --tw-enter-scale: .95;
}
.data-\[side\=bottom\]\:slide-in-from-top-2[data-side="bottom"] {
    --tw-enter-translate-y: -0.5rem;
}
.data-\[side\=left\]\:slide-in-from-right-2[data-side="left"] {
    --tw-enter-translate-x: 0.5rem;
}
.data-\[side\=right\]\:slide-in-from-left-2[data-side="right"] {
    --tw-enter-translate-x: -0.5rem;
}
.data-\[side\=top\]\:slide-in-from-bottom-2[data-side="top"] {
    --tw-enter-translate-y: 0.5rem;
}
.data-\[state\=closed\]\:slide-out-to-left-1\/2[data-state="closed"] {
    --tw-exit-translate-x: -50%;
}
.data-\[state\=closed\]\:slide-out-to-top-\[48\%\][data-state="closed"] {
    --tw-exit-translate-y: -48%;
}
.data-\[state\=open\]\:slide-in-from-left-1\/2[data-state="open"] {
    --tw-enter-translate-x: -50%;
}
.data-\[state\=open\]\:slide-in-from-top-\[48\%\][data-state="open"] {
    --tw-enter-translate-y: -48%;
}
@media (min-width: 640px) {
    .sm\:flex {
        display: flex;
    }
    .sm\:size-10 {
        width: 2.5rem;
        height: 2.5rem;
    }
    .sm\:h-8 {
        height: 2rem;
    }
    .sm\:w-24 {
        width: 6rem;
    }
    .sm\:w-\[136px\] {
        width: 136px;
    }
    .sm\:w-auto {
        width: auto;
    }
    .sm\:max-w-\[367px\] {
        max-width: 367px;
    }
    .sm\:max-w-\[389px\] {
        max-width: 389px;
    }
    .sm\:max-w-\[402px\] {
        max-width: 402px;
    }
    .sm\:max-w-\[405px\] {
        max-width: 405px;
    }
    .sm\:max-w-\[416px\] {
        max-width: 416px;
    }
    .sm\:max-w-\[430px\] {
        max-width: 430px;
    }
    .sm\:max-w-\[509px\] {
        max-width: 509px;
    }
    .sm\:max-w-\[591px\] {
        max-width: 591px;
    }
    .sm\:max-w-\[690px\] {
        max-width: 690px;
    }
    .sm\:max-w-\[800px\] {
        max-width: 800px;
    }
    .sm\:max-w-\[924px\] {
        max-width: 924px;
    }
    .sm\:max-w-sm {
        max-width: 24rem;
    }
    .sm\:max-h-\[610px\] {
        max-height: 610px;
    }
    .sm\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .sm\:grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    .sm\:flex-row {
        flex-direction: row;
    }
    .sm\:justify-end {
        justify-content: flex-end;
    }
    .sm\:gap-2 {
        gap: 0.5rem;
    }
    .sm\:gap-4 {
        gap: 1rem;
    }
    .sm\:gap-5 {
        gap: 1.25rem;
    }
    .sm\:space-x-2> :not([hidden])~ :not([hidden]) {
        --tw-space-x-reverse: 0;
        margin-right: calc(0.5rem * var(--tw-space-x-reverse));
        margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
    }
    .sm\:p-2 {
        padding: 0.5rem;
    }
    .sm\:p-8 {
        padding: 2rem;
    }
    .sm\:text-left {
        text-align: left;
    }
    .sm\:text-base {
        font-size: 1rem;
        line-height: 1.5rem;
    }
    .sm\:text-sm {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }
    .sm\:text-xs {
        font-size: 0.75rem;
        line-height: 1rem;
    }
    .sm\:rounded-lg {
        border-radius: 0.5rem;
    }
    .sm\:left-8 {
        left: 2rem;
    }
    .sm\:border-none {
        border-style: none;
    }
    .sm\:bottom-8 {
        bottom: 2rem;
    }
    .sm\:left-8 {
        left: 2rem;
    }
    .sm\:border-none {
        border-style: none;
    }
}
@media (min-width: 768px) {
    .md\:sticky {
        position: sticky;
    }
    .md\:bottom-auto {
        bottom: auto;
    }
    .md\:top-0 {
        top: 0px;
    }
    .md\:col-span-2 {
        grid-column: span 2 / span 2;
    }
    .md\:col-span-3 {
        grid-column: span 3 / span 3;
    }
    .md\:my-3 {
        margin-top: 0.75rem;
        margin-bottom: 0.75rem;
    }
    .md\:my-4 {
        margin-top: 1rem;
        margin-bottom: 1rem;
    }
    .md\:mb-12 {
        margin-bottom: 3rem;
    }
    .md\:mb-2 {
        margin-bottom: 0.5rem;
    }
    .md\:mb-3 {
        margin-bottom: 0.75rem;
    }
    .md\:mb-4 {
        margin-bottom: 1rem;
    }
    .md\:mb-5 {
        margin-bottom: 1.25rem;
    }
    .md\:ml-2 {
        margin-left: 0.5rem;
    }
    .md\:mt-3 {
        margin-top: 0.75rem;
    }
    .md\:mt-3\.5 {
        margin-top: 0.875rem;
    }
    .md\:mt-4 {
        margin-top: 1rem;
    }
    .md\:mt-5 {
        margin-top: 1.25rem;
    }
    .md\:mt-6 {
        margin-top: 1.5rem;
    }
    .md\:mt-8 {
        margin-top: 2rem;
    }
    .md\:block {
        display: block;
    }
    .md\:inline {
        display: inline;
    }
    .md\:flex {
        display: flex;
    }
    .md\:hidden {
        display: none;
    }
    .mdnot\:block {
        display: block;
    }
    .md\:size-10 {
        width: 2.5rem;
        height: 2.5rem;
    }
    .md\:size-11 {
        width: 2.75rem;
        height: 2.75rem;
    }
    .md\:size-12 {
        width: 3rem;
        height: 3rem;
    }
    .md\:size-14 {
        width: 3.5rem;
        height: 3.5rem;
    }
    .md\:size-16 {
        width: 4rem;
        height: 4rem;
    }
    .md\:size-20 {
        width: 5rem;
        height: 5rem;
    }
    .md\:size-24 {
        width: 6rem;
        height: 6rem;
    }
    .md\:size-6 {
        width: 1.5rem;
        height: 1.5rem;
    }
    .md\:size-7 {
        width: 1.75rem;
        height: 1.75rem;
    }
    .md\:size-8 {
        width: 2rem;
        height: 2rem;
    }
    .md\:size-9 {
        width: 2.25rem;
        height: 2.25rem;
    }
    .md\:size-\[294px\] {
        width: 294px;
        height: 294px;
    }
    .md\:size-\[34px\] {
        width: 34px;
        height: 34px;
    }
    .md\:size-\[42px\] {
        width: 42px;
        height: 42px;
    }
    .md\:h-10 {
        height: 2.5rem;
    }
    .md\:h-14 {
        height: 3.5rem;
    }
    .md\:h-40 {
        height: 10rem;
    }
    .md\:h-52 {
        height: 13rem;
    }
    .md\:h-56 {
        height: 14rem;
    }
    .md\:h-96 {
        height: 24rem;
    }
    .md\:h-\[42px\] {
        height: 42px;
    }
    .md\:h-\[675px\] {
        height: 675px;
    }
    .md\:h-\[780px\] {
        height: 780px;
    }
    .md\:h-auto {
        height: auto;
    }
    .md\:h-full {
        height: 100%;
    }
    .md\:max-h-none {
        max-height: none;
    }
    .md\:w-16 {
        width: 4rem;
    }
    .md\:w-32 {
        width: 8rem;
    }
    .md\:w-40 {
        width: 10rem;
    }
    .md\:w-56 {
        width: 14rem;
    }
    .md\:w-64 {
        width: 16rem;
    }
    .md\:w-72 {
        width: 18rem;
    }
    .md\:w-80 {
        width: 20rem;
    }
    .md\:w-\[23\%\] {
        width: 23%;
    }
    .md\:w-\[390px\] {
        width: 390px;
    }
    .md\:w-\[421px\] {
        width: 421px;
    }
    .md\:w-\[500px\] {
        width: 500px;
    }
    .md\:w-\[60px\] {
        width: 60px;
    }
    .md\:w-auto {
        width: auto;
    }
    .md\:max-w-48 {
        max-width: 12rem;
    }
    .md\:max-w-56 {
        max-width: 14rem;
    }
    .md\:max-w-\[250px\] {
        max-width: 250px;
    }
    .md\:max-w-\[345px\] {
        max-width: 345px;
    }
    .md\:max-w-\[350px\] {
        max-width: 350px;
    }
    .md\:max-w-xl {
        max-width: 36rem;
    }
    .md\:flex-1 {
        flex: 1 1 0%;
    }
    .md\:flex-none {
        flex: none;
    }
    .md\:grid-cols-1 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .md\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .md\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .md\:grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    .md\:flex-row {
        flex-direction: row;
    }
    .md\:flex-col {
        flex-direction: column;
    }
    .md\:items-start {
        align-items: flex-start;
    }
    .md\:items-center {
        align-items: center;
    }
    .md\:justify-end {
        justify-content: flex-end;
    }
    .md\:gap-0 {
        gap: 0px;
    }
    .md\:gap-2 {
        gap: 0.5rem;
    }
    .md\:gap-3 {
        gap: 0.75rem;
    }
    .md\:gap-4 {
        gap: 1rem;
    }
    .md\:gap-5 {
        gap: 1.25rem;
    }
    .md\:gap-6 {
        gap: 1.5rem;
    }
    .md\:gap-x-4 {
        -moz-column-gap: 1rem;
        column-gap: 1rem;
    }
    .md\:gap-y-0 {
        row-gap: 0px;
    }
    .md\:space-y-0> :not([hidden])~ :not([hidden]) {
        --tw-space-y-reverse: 0;
        margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(0px * var(--tw-space-y-reverse));
    }
    .md\:space-y-2> :not([hidden])~ :not([hidden]) {
        --tw-space-y-reverse: 0;
        margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
    }
    .md\:space-y-4> :not([hidden])~ :not([hidden]) {
        --tw-space-y-reverse: 0;
        margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(1rem * var(--tw-space-y-reverse));
    }
    .md\:space-y-5> :not([hidden])~ :not([hidden]) {
        --tw-space-y-reverse: 0;
        margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
    }
    .md\:space-y-8> :not([hidden])~ :not([hidden]) {
        --tw-space-y-reverse: 0;
        margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(2rem * var(--tw-space-y-reverse));
    }
    .md\:overflow-x-hidden {
        overflow-x: hidden;
    }
    .md\:rounded-2xl {
        border-radius: 1rem;
    }
    .md\:rounded-3xl {
        border-radius: 1.5rem;
    }
    .md\:object-top {
        -o-object-position: top;
        object-position: top;
    }
    .md\:p-0 {
        padding: 0px;
    }
    .md\:p-2 {
        padding: 0.5rem;
    }
    .md\:p-4 {
        padding: 1rem;
    }
    .md\:p-5 {
        padding: 1.25rem;
    }
    .md\:p-6 {
        padding: 1.5rem;
    }
    .md\:p-8 {
        padding: 2rem;
    }
    .md\:px-0 {
        padding-left: 0px;
        padding-right: 0px;
    }
    .md\:px-3\.5 {
        padding-left: 0.875rem;
        padding-right: 0.875rem;
    }
    .md\:px-4 {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .md\:px-6 {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    .md\:py-10 {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }
    .md\:py-20 {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }
    .md\:py-24 {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }
    .md\:py-3\.5 {
        padding-top: 0.875rem;
        padding-bottom: 0.875rem;
    }
    .md\:py-5 {
        padding-top: 1.25rem;
        padding-bottom: 1.25rem;
    }
    .md\:py-6 {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }
    .md\:pb-0 {
        padding-bottom: 0px;
    }
    .md\:pb-16 {
        padding-bottom: 4rem;
    }
    .md\:pl-4 {
        padding-left: 1rem;
    }
    .md\:pt-9 {
        padding-top: 2.25rem;
    }
    .md\:pt-10 {
        padding-top: 4.25rem;
    }
    .md\:text-15 {
        font-size: .9375rem;
    }
    .md\:text-2xl {
        font-size: 1.5rem;
        line-height: 2rem;
    }
    .md\:text-32 {
        font-size: 2rem;
    }
    .md\:text-3xl {
        font-size: 1.875rem;
        line-height: 2.25rem;
    }
    .md\:text-4xl {
        font-size: 2.25rem;
        line-height: 2.5rem;
    }
    .md\:text-5xl {
        font-size: 3rem;
        line-height: 1;
    }
    .md\:text-6xl {
        font-size: 3.75rem;
        line-height: 1;
    }
    .md\:text-base {
        font-size: 1rem;
        line-height: 1.5rem;
    }
    .md\:text-lg {
        font-size: 1.125rem;
        line-height: 1.75rem;
    }
    .md\:text-sm {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }
    .md\:text-xs {
        font-size: 0.75rem;
        line-height: 1rem;
    }
    .md\:after\:block::after {
        content: var(--tw-content);
        display: block;
    }
    .md\:after\:w-20::after {
        content: var(--tw-content);
        width: 5rem;
    }
}
@media (min-width: 1024px) {
    .lg\:absolute {
        position: absolute;
    }
    .lg\:col-span-2 {
        grid-column: span 2 / span 2;
    }
    .lg\:col-span-3 {
        grid-column: span 3 / span 3;
    }
    .lg\:col-span-3 {
        grid-column: span 3 / span 3;
    }
    .lg\:min-h-400 {
        min-height: 400px;
    }
    .lg\:mb-6 {
        margin-bottom: 1.5rem;
    }
    .lg\:ml-0 {
        margin-left: 0px;
    }
    .lg\:mt-12 {
        margin-top: 3rem;
    }
    .lg\:mt-7 {
        margin-top: 1.75rem;
    }
    .lg\:mt-8 {
        margin-top: 2rem;
    }
    .lg\:mt-\[60px\] {
        margin-top: 60px;
    }
    .lg\:block {
        display: block;
    }
    .lg\:flex {
        display: flex;
    }
    .lg\:flex-space-around {
        display: flex;
        justify-content: space-around;
    }
    .lg\:table-cell {
        display: table-cell;
    }
    .lg\:grid {
        display: grid;
    }
    .lg\:hidden {
        display: none;
    }
    .lg\:size-11 {
        width: 2.75rem;
        height: 2.75rem;
    }
    .lg\:size-14 {
        width: 3.5rem;
        height: 3.5rem;
    }
    .lg\:size-24 {
        width: 6rem;
        height: 6rem;
    }
    .lg\:size-8 {
        width: 2rem;
        height: 2rem;
    }
    .lg\:h-11 {
        height: 2.75rem;
    }
    .lg\:h-14 {
        height: 3.5rem;
    }
    .lg\:w-72 {
        width: 18rem;
    }
    .lg\:w-\[90px\] {
        width: 90px;
    }
    .lg\:w-auto {
        width: auto;
    }
    .lg\:max-w-2xl {
        max-width: 42rem;
    }
    .lg\:max-w-\[850px\] {
        max-width: 850px;
    }
    .lg\:flex-1 {
        flex: 1 1 0%;
    }
    .lg\:flex-none {
        flex: none;
    }
    .lg\:grow {
        flex-grow: 1;
    }
    .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .lg\:grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    .lg\:grid-cols-7 {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }
    .lg\:grid-cols-8 {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }
    .lg\:flex-row {
        flex-direction: row;
    }
    .lg\:flex-col {
        flex-direction: column;
    }
    .lg\:items-start {
        align-items: flex-start;
    }
    .lg\:items-center {
        align-items: center;
    }
    .lg\:justify-start {
        justify-content: flex-start;
    }
    .lg\:gap-0 {
        gap: 0px;
    }
    .lg\:gap-3 {
        gap: 0.75rem;
    }
    .lg\:gap-4 {
        gap: 1rem;
    }
    .lg\:gap-9 {
        gap: 2.25rem;
    }
    .lg\:space-y-5> :not([hidden])~ :not([hidden]) {
        --tw-space-y-reverse: 0;
        margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
    }
    .lg\:rounded-2xl {
        border-radius: 1rem;
    }
    .lg\:rounded-xl {
        border-radius: 0.75rem;
    }
    .lg\:p-3 {
        padding: 0.75rem;
    }
    .lg\:p-5 {
        padding: 1.25rem;
    }
    .lg\:p-8 {
        padding: 2rem;
    }
    .lg\:px-0 {
        padding-left: 0px;
        padding-right: 0px;
    }
    .lg\:px-10 {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
    .lg\:px-3 {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    .lg\:px-8 {
        padding-left: 2rem;
        padding-right: 2rem;
    }
    .lg\:py-11 {
        padding-top: 2.75rem;
        padding-bottom: 2.75rem;
    }
    .lg\:py-12 {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
    .lg\:py-24 {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }
    .lg\:py-6 {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }
    .lg\:py-9 {
        padding-top: 2.25rem;
        padding-bottom: 2.25rem;
    }
    .lg\:pb-0 {
        padding-bottom: 0px;
    }
    .lg\:pb-10 {
        padding-bottom: 2.5rem;
    }
    .lg\:pl-0 {
        padding-left: 0px;
    }
    .lg\:pr-5 {
        padding-right: 1.25rem;
    }
    .lg\:text-left {
        text-align: left;
    }
    .lg\:text-15 {
        font-size: .9375rem;
    }
    .lg\:text-18 {
        font-size: 1.125rem;
    }
    .lg\:text-22 {
        font-size: 1.375rem;
    }
    .lg\:text-32 {
        font-size: 2rem;
    }
    .lg\:text-3xl {
        font-size: 1.875rem;
        line-height: 2.25rem;
    }
    .lg\:text-44 {
        font-size: 2.75rem;
    }
    .lg\:text-64 {
        font-size: 4rem;
    }
    .lg\:text-7xl {
        font-size: 4.5rem;
        line-height: 1;
    }
    .lg\:text-base {
        font-size: 1rem;
        line-height: 1.5rem;
    }
    .lg\:text-sm {
        font-size: 0.875rem;
        line-height: 1.25rem;
    }
    .lg\:text-xs {
        font-size: 0.75rem;
        line-height: 1rem;
    }
}
@media (min-width: 1280px) {
    .xl\:block {
        display: block !important;
    }
    .xl\:flex {
        display: flex;
    }
    .xl\:w-64 {
        width: 16rem;
    }
    .xl\:w-\[767px\] {
        width: 767px;
    }
    .xl\:px-16 {
        padding-left: 4rem;
        padding-right: 4rem;
    }
    .xl\:pb-24 {
        padding-bottom: 6rem;
    }
    .xl\:pl-5 {
        padding-left: 1.25rem;
    }
}

/* Left Menu Panel Responsive Design */
#leftMenuPanel {
    transition: all 0.3s ease-in-out;
}

/* Mobile menu overlay */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    /*background-color: rgba(0, 0, 0, 0.5);*/
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
}

.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Small mobile screens */
@media (max-width: 639px) {
    #leftMenuPanel {
        display: none !important;
        position: fixed;
        right: 0 !important;
        left: auto !important;
        width: 100vw !important;
        top: 66px !important; /* Header height */
        bottom: 67px !important; /* Bottom mobile menu height */
        height: calc(100vh - 141px) !important; /* 100vh - 74px(header) - 67px(bottom menu) */
        z-index: 9999;
        transform: translateX(100%);
        overflow-y: auto;
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
    }
    
    #leftMenuPanel.mobile-menu-open {
        display: block !important;
        transform: translateX(0);
    }
}

/* Medium mobile screens and tablets */
@media (min-width: 640px) and (max-width: 1279px) {
    #leftMenuPanel {
        display: none !important;
        position: fixed;
        right: 0 !important;
        left: auto !important;
        width: 390px !important;
        max-width: 90vw !important;
        top: 74px !important; /* Header height */
        bottom: 67px !important; /* Bottom mobile menu height */
        height: calc(100vh - 141px) !important; /* 100vh - 74px(header) - 67px(bottom menu) */
        z-index: 9999;
        transform: translateX(100%);
        overflow-y: auto;
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
    }
    
    #leftMenuPanel.mobile-menu-open {
        display: block !important;
        transform: translateX(0);
    }
}

/* Desktop (1280px+) - visible and positioned left */
@media (min-width: 1280px) {
    #leftMenuPanel {
        display: block !important;
        position: fixed;
        left: 0 !important;
        right: auto !important;
        width: 16rem !important; /* w-64 */
        top: 60px;
        transform: translateX(0);
        height: calc(100vh - 60px);
        overflow-y: auto;
    }
    
    /* Hide mobile overlay on desktop */
    .mobile-menu-overlay {
        display: none !important;
    }
}

@media (min-width: 1536px) {
    .\32xl\:gap-6 {
        gap: 1.5rem;
    }
}
.\[\&\>span\]\:line-clamp-1>span {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}
.\[\&_svg\]\:pointer-events-none svg {
    pointer-events: none;
}
.\[\&_svg\]\:size-4 svg {
    width: 1rem;
    height: 1rem;
}
.\[\&_svg\]\:shrink-0 svg {
    flex-shrink: 0;
}








/******** custom ********/

/* main and chat fix */
.wrapper {
    display: grid;
    grid-template-columns: 256px minmax(0, 72rem) 352px;
    justify-content: center;
}
@media (max-width: 1280px) {
    .wrapper {
        display: unset;
        grid-template-columns: 0 1fr 0;
    }
}

/* main animation */
.hero {
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -10;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url('/assets/images/hero-background.png') center/cover no-repeat;
  transform-origin: center center;
  will-change: transform;
  animation: bg-zoom 30s ease-in-out infinite;
  z-index: -20;
}
@keyframes bg-zoom {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.1); }
}


.floating {
  transform-origin: center bottom;
  animation: float 5s ease-in-out infinite;
}
@keyframes float {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(8px); }
}
.floating-zoom {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  transform-origin: center bottom;
  will-change: transform;
  animation: float-zoom 30s ease-in-out infinite;
}
@keyframes float-zoom {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(0.9); }
}




/* custom-select */
.custom-select {
    position: relative;
    display: inline-block;
    width: auto;
    padding: 0px;
}
.custom-select.vendor {
    min-width: 200px;
}
.custom-select.sort {
    min-width: 100px;
}
.cs-trigger {
    width: 100%;
    padding: 0px;
    background: #001d2d;
    color: #accdde;
    border: none;
    border-radius: 8px;
    text-align: left;
    cursor: pointer;
}
.cs-options {
    position: absolute;
    top: 100%;
    bottom: auto;
    left: 0;
    right: 0;
    background: #001d2d;
    margin: 4px 0 0 0;
    padding: 0;
    list-style: none;
    font-size: 15px;
    font-weight: 500;
    border-radius: 0 0 8px 8px;
    max-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    transition: max-height .1s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    scrollbar-width: none;
    -ms-overflow-style: none;
    z-index: 10;
}
.cs-options::-webkit-scrollbar {
    display: none;
}
.custom-select.up .cs-options {
    top: auto;
    bottom: 100%;
}
.custom-select.open .cs-options {
    max-height: 286px;
}
.cs-options li {
    list-style: none;
    padding: 3px 10px;
    color: #accdde;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.cs-options li:hover {
    background: rgb(26, 53, 68);
}
.cs-options .cs-check {
    display: none;
    color: #24ee89;
}
.cs-options li.selected .cs-check {
    display: inline;
}
/* custom-select */

/* game-iframe */
html.fullscreen, html.fullscreen body {
    margin: 0;
    height: 100%;
    overflow: hidden;
}
html.fullscreen #gameFrameWrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    background: black;
}
iframe {
    margin: 0;
    padding: 0;
    border: none;
    display: block;
    background-color: #000;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.iframe {
    height: 72vw;
    max-height: 100vh;
    overflow: hidden;
}
@media (min-width: 1024px) {
    .iframe {
        height: 675px;
        max-height: 675px;
    }
}
.iframe img.loading {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: pulse 2s infinite ease-in-out;
    display: block;
}
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}
@media all and (display-mode: standalone), all and (-webkit-display-mode: standalone) {

    #gameFrameWrapper {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: 9999;
        background: #000;
    }
    #gameFrame {
        width: 100%;
        height: 100%;
    }
}
/* game-iframe */


.header {
    background-color: rgb(0 20 31 / var(--tw-bg-opacity, 1));
    /* position: fixed; */
    left: 0;
    right: 0;
    top: 0;
    z-index: 101
}
#chatInclude {
    transition: all 0.3s ease;
}
/* main.css 에 추가 */

@keyframes ticker-scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(var(--ticker-shift));
    }
}
.animate-ticker {
    animation: ticker-scroll 15s linear infinite;
    will-change: transform;
}
.bg-layer1 {
    background-color: #03131e;
}
.bg-layer2 {
    background-color: rgb(35 38 38 / 1);
}
.p-2 {
    padding: 0.5rem;
}
.w-\[21rem\] {
    width: 21rem;
}
.h-\[21rem\] {
    height: 21rem;
}
@media (min-width: 640px) {
    .dark .dark\:sm\:bg-black_alpha20 {
        background-color: #0003;
    }
    .sm\:ml-auto {
        margin-left: auto;
    }
}
.text-alw_white {
    color: rgb(255 255 255 / 1);
}
.text-secondary {
    color: #b3bec1;
}
.border-third {
    border-color: #e4eaf019;
}
.border-solid {
    border-style: solid;
}
.flex-none {
    flex: none;
}
.mr-1 {
    margin-right: .25rem;
}
.mr-2 {
    margin-right: .5rem;
}
.gap-x-4 {
    -moz-column-gap: 1rem;
    column-gap: 1rem;
}
.pop-content {
    padding: 0 1rem calc(1rem + 0rem);
}
.scroll-y {
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
.scroll-y.pop-content::-webkit-scrollbar-track {
    background: rgb(59 130 246 / 0.5);
}
.scroll-x {
    overflow-y: hidden;
    overflow-x: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
.scroll-container {
    display: flex;
    flex-direction: column;
    min-height: calc(100% + 1px);
}
@media (min-width: 1024px) {
    .scroll-container {
        min-height: 100%;
    }
}
.pop-content .scroll-container {
    min-height: auto !important;
}
.-mr-4 {
    margin-right: -1rem;
}
.-ml-4 {
    margin-left: -1rem;
}
.input {
    height: 3rem;
    display: flex;
    align-items: center;
    border-radius: 0.5rem;
    border: 1px solid #3a4142;
    padding-left: .75rem;
    padding-right: .5rem;
    gap: .5rem;
    background-color: #021624;
    transition: all .35s var(cubic-bezier(.36, .66, .04, 1));
    color: #ffffff;
}
.pc .input, .pc .radio, .pc .checkbox {
    height: 2.5rem;
}
.pc .input {
    padding-left: .5rem;
    padding-right: .1875rem;
}
.h-6 {
    height: 1.5rem;
}
.w-6 {
    width: 1.5rem;
}
.text-tertiary {
    color: #849194;
}
.input>input {
    background-color: transparent;
    outline: none;
    flex: 1;
    width: 8rem;
}
.radio, .checkbox {
    display: flex;
    height: 2.75rem;
    flex: none;
    align-items: center;
}
.radio:before {
    content: "";
    display: block;
    flex: none;
    transition-property: all;
    transition-duration: .15s;
    border-radius: 100rem;
    width: 1.5rem;
    height: 1.5rem;
    margin-right: .5rem;
    border: .125rem solid #e4eaf019;
}
.radio[aria-selected]:before {
    border-width: .375rem;
    border-color: rgb(36, 238, 137);
}
.order-first {
    order: -9999;
}
.select-item {
    width: 100%;
    border-radius: 0.5rem;
    padding: 0 .5rem 0 .75rem;
    transition: background 0.2s;
}
.btn-like {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    touch-action: manipulation;
}
.select-item[aria-selected] {
    background-color: rgb(20 61 83);
}
.select-item:not([aria-selected="true"]):hover {
    background-color: #0e2e3f;
}
.select-item.radio:before {
    order: 100;
    margin-left: auto;
    margin-right: 0;
}
.pc .radio:before, .pc .checkbox-ico {
    width: 1.25rem;
    height: 1.25rem;
}
.ml-auto {
    margin-left: auto;
}
.icon {
    width: 1.5rem;
    height: 1.5rem;
    fill: currentColor;
}
.fill-setting-yellow {
    fill: rgb(255, 152, 32);
}
.fill-setting-white {
    fill: rgb(255, 255, 255);
}
.center {
    display: flex;
    align-items: center;
    justify-content: center;
}
.opacity-0 {
    opacity: 0;
}
.bg-\[\#00000099\] {
    background-color: rgba(0, 0, 0, 0.6);
}
.leading-4 {
    line-height: 1rem;
}
.h-\[40\%\] {
    height: 40%;
}
.text-\[white\] {
    color: rgb(255, 255, 255);
}
.w-9 {
    width: 2.25rem;
}
.bg-white_alpha20 {
    background-color: rgba(255, 255, 255, 0.2);
}
@media (hover: hover) and (pointer: fine) and (min-width: 640px) {
    .hover\:bg-layer5:hover {
        background-color: rgb(var(--layer5) / 1);
    }
    .hover\:opacity-80:hover {
        opacity: 0.8;
    }
    .group:hover .group-hover\:w-\[6\.5rem\] {
        width: 6.5rem;
    }
}
@media (hover: hover) and (pointer: fine) and (min-width: 640px) {
    .hover\:rounded-xl:hover {
        border-radius: var(--radius-xl);
    }
    .hover\:border-second:hover {
        border-color: var(--second);
    }
    .hover\:bg-black_alpha5:hover {
        background-color: rgba(0, 0, 0, 0.05);
    }
    .hover\:bg-layer4:hover {
        background-color: rgb(var(--layer4) / 1);
    }
    .hover\:underline:hover {
        text-decoration-line: underline;
    }
    .hover\:brightness-110:hover {
        --tw-brightness: brightness(1.1);
        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);
    }
    .hover\:brightness-50:hover {
        --tw-brightness: brightness(.5);
        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);
    }
    .group:hover .group-hover\:opacity-100 {
        opacity: 1;
    }
}
/* emoji*/

.button {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 3rem;
    padding-left: .5rem;
    padding-right: .5rem;
    cursor: pointer;
    border-radius: var(--radius-md);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}
.fill-emoji-off {
    fill: #69717a;
}
.fill-emoji-on {
    fill: #ffffff;
}
/* alert */

.\!h-12 {
    height: 3rem !important;
}
.\!w-12 {
    width: 3rem !important;
}
.fill-secondary {
    fill: #b3bec1;
}
.text-secondary {
    color: #b3bec1;
}
/* poopup */

.button-m {
    height: 2.5rem;
    border-radius: 0.5rem;
}
.pop-overlayer {
    position: fixed;
    inset: 0;
    touch-action: pan-x;
    z-index: 1100;
    overflow: hidden;
    display: flex;
    visibility: hidden;
    align-items: center;
    justify-content: center;
}
.bg-layer4 .bg-layer_x, .bg-layer3 {
    --layer0: #292d2e;
    --layerx: #323738;
    --layer-x: #232626;
}
.pop-center {
    position: absolute;
    opacity: 1;
    display: flex;
    flex-direction: column;
    max-height: 80%;
    padding-top: 3.5rem;
}
.pop-center {
    width: 24rem;
    max-width: 90%;
    border-radius: 0.75rem;
}
.bg-layer3 {
    background-color: #031d2d;
}
@media (min-width: 1024px) {
    .lg\:pt-12 {
        padding-top: 3rem;
    }
}
@media (min-width: 1024px) {
    .lg\:w-\[800px\] {
        width: 800px;
    }
}
@media (min-width: 1024px) {
    .lg\:pt-12 {
        padding-top: 3rem;
    }
}
.pc .pop-center {
    min-width: 26rem;
}
.dark\:bg-layer2 {
    background-color: #232626;
}
.pop-title {
    position: absolute;
    top: 0;
    width: 100%;
    justify-content: center;
    align-items: center;
    font-weight: 800;
    height: 3.5rem;
    font-size: 1rem;
    display: flex;
    flex: none;
    color: #ffffff;
}
.pc .pop-title {
    height: 3rem;
}
.pop-close {
    position: absolute;
    right: 1rem;
    top: .75rem;
    border-radius: 0.375rem;
    width: 2rem;
    height: 2rem;
    background-color: rgb(70 79 80);
}
.pop-close {
    top: .5rem;
}
.pop-close>svg {
    width: 1.25rem;
    height: 1.25rem;
}
.promotion-popup .pop-content {
    padding: 0px !important;
}
.bg-white_alpha5 {
    background-color: #ffffff0d;
}
.h-100 {
    height: 25rem;
}
.bg-white_alpha5, .bg-white_alpha5\/5 {
    background-color: rgba(255, 255, 255, 0.05);
}
.w-1\/4 {
    width: 25%;
}
.promotion-banner-item.select-banner, .promotion-banner-item:hover {
    background-color: rgba(36, 238, 137, 0.1);
}
.text-ellipsis {
    text-overflow: ellipsis;
}
.w-5\/6 {
    width: 83.3333%;
}
.rotate-180 {
    --tw-rotate: 180deg;
    transform: translate(0, 0) rotate(0) skew(0) skewY(0) scaleX(1) scaleY(1);
}
.h-\[338px\] {
    height: 338px;
}
.loading {
    animation: spin 1s linear infinite;
    width: 1.25rem;
    height: 1.25rem;
}
.text-brand {
    color: #24ee89;
}
.button-brand {
    color: rgb(0 0 0);
    font-weight: 800;
    background-image: linear-gradient(90deg, #24ee89, #9fe871);
    box-shadow: 0 0 12px #23ee884d, 0 -2px #1dca6a inset;
}
.pl-4 {
    padding-left: 1rem;
}
.checkbox {
    height: 2.5rem;
}
.checkbox-ico {
    width: 1.5rem;
    height: 1.5rem;
    flex: none;
    position: relative;
    margin-right: .5rem;
}
.checkbox-ico {
    width: 1.25rem;
    height: 1.25rem;
}
.checkbox-ico:before {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    content: "";
    border-radius: var(--radius-md);
    transition: all .15s;
    border: .125rem solid var(--third);
}
/* tooltip */

.tooltip {
    position: relative;
}
.tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    background: #0a2737;
    color: #fff;
    padding: 4px 8px;
    border-radius: 9px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease-in-out;
    z-index: 999;
}
.tooltip:hover::after {
    opacity: 1;
    content: attr(data-tooltip);
}
/* === Accordion === */
@keyframes slideDown {
    from { max-height: 0; opacity: 0; }
    to { max-height: 1000px; opacity: 1; }
}

@keyframes slideUp {
    from { max-height: 1000px; opacity: 1; }
    to { max-height: 0; opacity: 0; }
}

.slide-down {
    animation: slideDown 0.3s ease-out forwards;
    overflow: hidden;
}

.slide-up {
    animation: slideUp 0.3s ease-in forwards;
    overflow: hidden;
}

.bp-rotate-180 {
    transform: rotate(180deg);
}

.bp-transition-transform {
    transition: transform 0.3s ease;
}

.accordion-content {
    max-height: 1000px;
    transition: max-height 0.3s ease, opacity 0.3s ease;
}

@keyframes slideInFromRight {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slideOutToRight {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100%); opacity: 0; }
}

.slide-in {
    animation: slideInFromRight 0.3s ease-out forwards;
}

.slide-out {
    animation: slideOutToRight 0.3s ease-out forwards;
}

/* === HSG NEW === */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.vip-level-slider {
    scroll-behavior: smooth;
    cursor: grab;
}
.vip-level-slider.cursor-grabbing {
    cursor: grabbing;
}
.text-with-outline * {
    color: white;
    text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
}
/* 2025-06-25 */
.firefly {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    animation: flicker 1s infinite alternate;
    filter: blur(3px);
}
@keyframes flicker {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
.lv_gold {
    display: inline-block;
    background: linear-gradient(to right, #FFD700, #FFA500);
    color: white;  
    padding: 4px 12px; 
    border-radius: 9999px; 
    font-weight: bold;
    font-size: 14px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}