:root { --color-white: #fff; --color-white-10: hsla(0, 0%, 100%, .1); --color-white-20: hsla(0, 0%, 100%, .2); --color-white-60: hsla(0, 0%, 100%, .6); --color-black-50: rgba(0, 0, 0, .5); --color-black-70: rgba(0, 0, 0, .7); --color-blue-primary: #36f; --color-blue-accent: #60a5fa; --color-blue-focus: #4c4dff; --color-blue-hover: #4234ff; --color-blue-active: #4b5dda; --color-gray-50: #f3f4f6; --color-gray-100: #e5e7eb; --color-gray-200: #d6dde7; --color-gray-300: #9ca3af; --color-gray-400: #6b7280; --color-gray-500: #4b5563; --color-gray-600: #374151; --color-gray-700: #1f2937; --color-gray-800: #27272a; --color-gray-900: #1a1a31; --color-purple-100: #7d7dda; --color-purple-200: #3f3f61; --color-purple-400: #23233a; --color-purple-600: #39394d; --color-red: #de2c2a; --color-yellow-light: #ffcf73; --color-primary: var(--color-blue-primary); --color-primary-foreground: var(--color-white); --color-secondary: var(--color-gray-50); --color-foreground: var(--color-gray-700); --color-accent: var(--color-blue-accent); --color-popover: var(--color-white); --color-popover-foreground: var(--color-gray-700); --color-card: var(--color-white); --color-card-foreground: var(--color-gray-700); --color-light-background: var(--color-white); --color-light-foreground: var(--color-gray-700); --color-light-primary: var(--color-blue-primary); --color-light-secondary: var(--color-gray-50); --color-light-muted: var(--color-gray-300); --color-light-border: var(--color-gray-100); --color-light-input: var(--color-gray-100); --color-dark-background: var(--color-gray-900); --color-dark-foreground: var(--color-white); --color-dark-primary: var(--color-blue-accent); --color-dark-secondary: var(--color-gray-600); --color-dark-muted: var(--color-gray-400); --color-dark-border: var(--color-purple-100); --color-dark-input: var(--color-gray-600); --color-foreground: var(--color-light-foreground); --color-primary: var(--color-light-primary); --color-secondary: var(--color-light-secondary); --gradient-secondary: linear-gradient(153deg, #fff 4.38%, #ccceff 81.13%); --gradient-secondary-inverted: linear-gradient(333deg, #fff 4.38%, #ccceff 81.13%); --gradient-primary: linear-gradient(to bottom right, #6658ff, #3627fe); --gradient-primary-hover: linear-gradient(153deg, #4234ff 4.38%, #7e72ff 81.13%); --border-gradient-primary-start: #6658ff; --border-gradient-primary-end: #3627fe; --border-gradient-primary-angle: 153deg; --border-gradient-opacity: .3; --font-sans: "Outfit", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --font-size-xs: .75rem; --font-size-sm: .875rem; --font-size-xl: 1.25rem; --line-height-xl: 1.75rem; --radius-input: 10px; --radius-card: 8px; --input-focus-ring-dark: #10b981; --input-focus-ring-light: #10b981; --input-focus-ring-light: var(--color-blue-focus); --input-focus-ring-dark: var(--color-purple-100); --input-border-error: var(--color-red); --button-default-text: var(--color-white); --button-secondary-text: var(--color-gray-800); --button-flat-text-light: var(--color-gray-800); --button-flat-text-dark: #91919c; --secondary-gradient-button-background: linear-gradient(153deg, #fff 4.38%, #ccceff 81.13%); --icon-opacity: .5; --icon-fill-color-dark: var(--color-white); --select-dark-background: var(--color-gray-900); --select-item-checked-background: var(--color-blue-focus); --select-item-hover-background: var(--color-blue-focus); --select-content-dark-background: var(--select-dark-background); --select-content-border-radius: var(--radius-input); --select-item-text-color: var(--light-dark-text); --select-item-hover-text-color: var(--color-white); --select-item-checked-text-color: var(--color-white); --transition-duration: .3s; --transition-timing: ease-in-out; --nav-accordion-mobile-trigger-padding-y: 12px; --nav-accordion-mobile-content-border-radius: var(--button-secondary-border-radius); --label-text-size: .875rem; --label-font-weight: 500; --label-line-height: 1; --scrollbar-thin-width: 2px; --scrollbar-thumb-color-primary: var(--color-blue-active); --scrollbar-track-color: transparent; --scrollbar-firefox-width: thin; --tabs-trigger-padding-x: .75rem; --tabs-trigger-padding-y: .375rem; --tabs-trigger-text-size: .875rem; --tabs-trigger-font-weight: 500; --loader-z-index: 1000; --route-wrapper-status-page-min-height: calc(100vh - 200px); --route-wrapper-status-page-min-height: calc(100dvh - 200px); --gamecard-overlay-bg: rgba(0, 0, 0, .5); --gamecard-label-top: .5rem; --gamecard-label-left: .5rem; --gamecard-hover-scale: 1.05; --gamecard-active-scale: .95; --text-icons-secondary: #606b95; --border-color-secondary: #606b95; --text-light-text-third: var(--color-blue-focus); --navigation-tabs-light-background: var(--color-gray-50); --navigation-tabs-light-border: var(--color-gray-300); --navigation-tabs-border-radius: .5rem; --navigation-tabs-padding: 0 .25rem; --navigation-tabs-width: 240px; --navigation-tabs-active-background: var(--color-primary); --navigation-tabs-active-text-color: var(--color-white); --navigation-tabs-active-border-radius: .375rem; --navigation-tabs-margin-top: 1rem; --navigation-tabs-margin-bottom: 1rem; --user-text-color-light: #27272a; --user-text-color-dark: #a9b5e6; --icon-inactive-color: #91919c; --icon-active-color: var(--color-white); --icon-hover-color: var(--color-white); --button-secondary-default-border: hsla(0, 0%, 100%, .1); --button-secondary-border-radius: 30px; --banner-height: 274px; --banner-height-desktop: 370px; --banner-title-font-size: 14px; --banner-title-font-size-desktop: 28px; --banner-description-font-size: 22px; --banner-description-font-size-desktop: 38px; --banner-content-left: 20px; --banner-content-left-desktop: 30px; --banner-button-left: 0px; --banner-button-left-desktop: 0px; --theme-switcher-container-dark-border: #3f3f61; --theme-switcher-container-dark-bg: #23233a; --theme-switcher-active-btn-dark-bg: #141423; --theme-switcher-active-btn-dark-text: #fff; --theme-switcher-inactive-btn-dark-bg: #23233a; --theme-switcher-inactive-btn-dark-text: #fff; --theme-switcher-inactive-btn-hover-dark-bg: #141423; --theme-switcher-btn-font-family: var(--font-sans); --theme-switcher-btn-font-size: var(--font-size-sm); --theme-switcher-btn-font-weight: 500; --theme-switcher-btn-line-height: 130%; --theme-switcher-btn-padding-y: .75rem; --theme-switcher-btn-padding-left: .375rem; --theme-switcher-btn-padding-right: .625rem; --theme-switcher-btn-gap: .5rem; --theme-switcher-btn-icon-size: 1rem; } @media (prefers-color-scheme: dark) { :root { --color-foreground: var(--color-dark-foreground); --color-primary: var(--color-dark-primary); --color-secondary: var(--color-dark-secondary); --color-card: var(--color-dark-background); --color-card-foreground: var(--color-dark-foreground); --color-popover: var(--color-dark-background); --color-popover-foreground: var(--color-dark-foreground); } } .dark { --color-foreground: var(--color-dark-foreground); --color-primary: var(--color-dark-primary); --color-secondary: var(--color-dark-secondary); --color-card: var(--color-dark-background); --color-card-foreground: var(--color-dark-foreground); --color-popover: var(--color-dark-background); --color-popover-foreground: var(--color-dark-foreground); } @media (prefers-color-scheme: dark) { :root { --color-foreground: var(--color-dark-foreground); --color-primary: var(--color-dark-primary); --color-secondary: var(--color-dark-secondary); } } :root { --close-icon-fill-light: #27272a; --close-icon-fill-dark: #a9b5e6; --homepage-section-margin-top: 1rem; --html-background: var(--color-neutral-900); --main-container-background: var(--color-neutral-500); --main-container-text: var(--color-white); --sidebar-desktop-background: var(--color-neutral-800); --sidebar-tablet-background: var(--color-neutral-800); --sidebar-mobile-background: var(--color-neutral-800); } *, :after, :before { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-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: rgba(59, 130, 246, .5); --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-shadow: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-shadow-colored: 0 0 transparent; --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: rgba(59, 130, 246, .5); --tw-ring-offset-shadow: 0 0 transparent; --tw-ring-shadow: 0 0 transparent; --tw-shadow: 0 0 transparent; --tw-shadow-colored: 0 0 transparent; --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: ; } *, :after, :before { border: 0 solid #e5e7eb; box-sizing: border-box; } :after, :before { --tw-content: ""; } :host, html { line-height: 1.5; -webkit-text-size-adjust: 100%; font-feature-settings: normal; font-variation-settings: normal; -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; -webkit-tap-highlight-color: transparent; } body { line-height: inherit; } hr { border-top-width: 1px; color: inherit; height: 0; } abbr:where([title]) { text-decoration: underline; -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } a { text-decoration: inherit; } b, strong { font-weight: bolder; } code, kbd, pre, samp { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace; font-feature-settings: normal; font-size: 1em; font-variation-settings: normal; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -.25em; } sup { top: -.5em; } table { border-collapse: collapse; border-color: inherit; text-indent: 0; } button, input, optgroup, select, textarea { color: inherit; font-family: inherit; font-feature-settings: inherit; font-size: 100%; font-variation-settings: inherit; font-weight: inherit; letter-spacing: inherit; line-height: inherit; margin: 0; padding: 0; } button, select { text-transform: none; } button, input:where([type=button]), input:where([type=reset]), input:where([type=submit]) { -webkit-appearance: button; background-color: transparent; background-image: none; } :-moz-focusring { outline: auto; } :-moz-ui-invalid { box-shadow: none; } progress { vertical-align: baseline; } ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } [type=search] { -webkit-appearance: textfield; outline-offset: -2px; } ::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } summary { display: list-item; } blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre { margin: 0; } fieldset { margin: 0; } fieldset, legend { padding: 0; } menu, ol, ul { list-style: none; margin: 0; padding: 0; } dialog { padding: 0; } textarea { resize: vertical; } input::-moz-placeholder, textarea::-moz-placeholder { color: #9ca3af; opacity: 1; } input::placeholder, textarea::placeholder { color: #9ca3af; opacity: 1; } [role=button], button { cursor: pointer; } :disabled { cursor: default; } audio, canvas, embed, iframe, img, object, svg, video { display: block; vertical-align: middle; } img, video { height: auto; max-width: 100%; } [hidden]:where(:not([hidden=until-found])) { display: none; } :root { --color-neutral-50: #b5ded9; --color-neutral-100: #678d89; --color-neutral-150: #3c6863; --color-neutral-200: #2d5954; --color-neutral-300: #004e44; --color-neutral-400: #004139; --color-neutral-500: #00302a; --color-neutral-600: #082521; --color-neutral-700: #05221e; --color-neutral-800: #051413; --color-neutral-900: #000e0d; --color-neutral-1000: #000605; --color-neutral-100-50: rgba(103, 141, 137, .502); --color-neutral-400-0: #004139; --color-neutral-700-0: #05221e; --color-neutral-1000-70: rgba(0, 6, 5, .698); --color-red-400: #ff4040; --color-red-500: #c51b1b; --color-red-400-10: rgba(255, 64, 64, .102); --color-red-400-15: rgba(255, 64, 64, .149); --color-red-400-30: rgba(255, 64, 64, .302); --color-pink-300: #f761ff; --color-pink-400: #ff0098; --color-yellow-300: #ffd480; --color-yellow-400: #fff310; --color-yellow-500: #fec33e; --color-yellow-700: #ff7a00; --color-yellow-300-30: rgba(255, 212, 128, .302); --color-yellow-500-30: rgba(254, 195, 62, .302); --color-yellow-500-10: rgba(254, 195, 62, .102); --color-green-500: #43f58a; --color-green-600: #15d161; --color-green-700: #24a15e; --color-green-500-30: rgba(67, 245, 138, .302); --color-green-600-30: rgba(21, 209, 97, .302); --color-green-600-10: rgba(21, 209, 97, .102); --color-blue-400: #2183f6; --color-blue-500: #4c4dff; --color-blue-400-30: rgba(33, 131, 246, .302); --color-blue-400-10: rgba(33, 131, 246, .102); --color-alpha-10: hsla(0, 0%, 100%, .102); --color-alpha-15: hsla(0, 0%, 100%, .149); --color-alpha-25: hsla(0, 0%, 100%, .251); --color-alpha-40: hsla(0, 0%, 100%, .4); --color-alpha-50: hsla(0, 0%, 100%, .502); --color-alpha-60: hsla(0, 0%, 100%, .6); --color-alpha-contrast: #fff; --color-alpha-contrast-60: hsla(0, 0%, 100%, .6); --color-alpha-contrast-50: hsla(0, 0%, 100%, .502); --color-alpha-contrast-40: hsla(0, 0%, 100%, .4); --color-alpha-contrast-10: hsla(0, 0%, 100%, .102); --color-alpha-default: #fff; --font-family-sans: Inter, sans-serif; --font-size-xs: 12px; --line-height-xs: 140%; --font-size-sm: 14px; --line-height-sm: 140%; --font-size-base: 16px; --line-height-base: 140%; --font-size-lg: 18px; --line-height-lg: 140%; --font-size-xl: 20px; --line-height-xl: 140%; --font-size-xxl: 22px; --line-height-xxl: 140%; --font-size-2xl: 24px; --line-height-2xl: 140%; --font-size-3xl: 28px; --line-height-3xl: 140%; --font-size-4xl: 32px; --line-height-4xl: 140%; --font-size-5xl: 36px; --line-height-5xl: 140%; --font-size-6xl: 38px; --line-height-6xl: 140%; --font-size-7xl: 48px; --line-height-7xl: 140%; --font-size-8xl: 56px; --line-height-8xl: 140%; --font-size-h1: 26px; --line-height-h1: 140%; --font-weight-h1: 700; --font-size-h2: 22px; --line-height-h2: 140%; --font-weight-h2: 700; --font-size-h3: 22px; --line-height-h3: 140%; --font-weight-h3: 700; --font-size-h4: 20px; --line-height-h4: 140%; --font-weight-h4: 700; --font-size-h5: 18px; --line-height-h5: 140%; --font-weight-h5: 700; --font-size-text: 16px; --line-height-text: 140%; --font-weight-text: 400; --font-size-list: 16px; --line-height-list: 140%; --font-weight-list: 400; --font-size-link: 16px; --line-height-link: 140%; --font-weight-link: 400; --border-radius-xs: 2px; --border-radius-sm: 4px; --border-radius-md: 6px; --border-radius-lg: 8px; --border-radius-xl: 12px; --border-radius-1-5xl: 14px; --border-radius-2xl: 16px; --border-radius-2-5xl: 20px; --border-radius-3xl: 24px; --border-radius-4xl: 28px; --border-radius-5xl: 32px; --border-radius-6xl: 36px; --border-radius-7xl: 40px; --border-radius-none: 0px; --border-radius-DEFAULT: 4px; --border-radius-full: 9999px; --bg-basic-1000: var(--color-neutral-1000); --bg-basic-1000-70: var(--color-neutral-1000-70); --bg-basic-900: var(--color-neutral-900); --bg-basic-800: var(--color-neutral-800); --bg-basic-700: var(--color-neutral-700); --bg-basic-600: var(--color-neutral-600); --bg-basic-500: var(--color-neutral-500); --bg-basic-400: var(--color-neutral-400); --bg-basic-300: var(--color-neutral-300); --bg-basic-200: var(--color-neutral-200); --bg-basic-150: var(--color-neutral-150); --bg-basic-100: var(--color-neutral-100); --bg-basic-50: var(--color-neutral-50); --bg-basic-000-10: var(--color-alpha-10); --bg-basic-000-60: var(--color-alpha-60); --bg-basic-000-contrast: var(--color-alpha-contrast); --hidden-bg: var(--color-neutral-700-0); --bg-accent-1: var(--color-blue-500); --bg-accent-2: var(--color-blue-400); --bg-accent-3: var(--color-yellow-700); --bg-accent-4: var(--color-yellow-400); --bg-accent-5: var(--color-yellow-300); --bg-accent-6: var(--color-yellow-300-30); --bg-accent-7: var(--color-pink-400); --bg-accent-8: var(--color-green-700); --bg-accent-9: var(--color-green-500); --bg-accent-10: var(--color-green-500-30); --bg-accent-11: var(--color-red-500); --bg-accent-12: var(--color-neutral-800); --bg-accent-13: var(--color-neutral-500); --bg-semantic-error: var(--color-red-400); --bg-semantic-error-10: var(--color-red-400-10); --bg-semantic-warning: var(--color-yellow-500); --bg-semantic-warning-10: var(--color-yellow-500-10); --bg-semantic-success: var(--color-green-600); --bg-semantic-success-10: var(--color-green-600-10); --bg-semantic-extra: var(--color-blue-400); --bg-semantic-extra-10: var(--color-blue-400-10); --border-control-border-default: var(--color-alpha-40); --border-control-border-active: var(--color-yellow-300); --bg-control-bg-active: var(--color-yellow-300); --text-control-icon-default: var(--color-alpha-40); --text-control-icon-active: var(--color-neutral-1000); --bg-control-icon-default: var(--color-alpha-40); --bg-control-icon-active: var(--color-neutral-1000); --border-basic-500: var(--color-neutral-500); --border-basic-400: var(--color-neutral-400); --hidden-border: var(--color-neutral-400-0); --border-basic-200: var(--color-neutral-200); --border-basic-000-40: var(--color-alpha-40); --border-basic-000-10: var(--color-alpha-10); --border-accent-1: var(--color-blue-500); --border-accent-2: var(--color-blue-400); --border-accent-3: var(--color-yellow-700); --border-accent-4: var(--color-yellow-400); --border-accent-5: var(--color-yellow-300); --border-accent-6: var(--color-yellow-300-30); --border-accent-7: var(--color-pink-400); --border-accent-8: var(--color-green-700); --border-accent-9: var(--color-green-500); --border-accent-10: var(--color-green-500-30); --border-accent-11: var(--color-red-500); --border-accent-12: var(--color-neutral-800); --border-accent-13: var(--color-neutral-500); --border-error: var(--color-red-400); --border-error-30: var(--color-red-400-30); --border-warning: var(--color-yellow-500); --border-warning-30: var(--color-yellow-500-30); --border-success: var(--color-green-600); --border-success-30: var(--color-green-600-30); --border-extra: var(--color-blue-400); --border-extra-30: var(--color-blue-400-30); --bg-di-bg-default: var(--color-neutral-500); --bg-di-bg-hover: var(--color-neutral-400); --bg-di-bg-active: var(--color-neutral-400); --border-di-border-default: var(--color-neutral-300); --border-di-border-active: var(--color-neutral-100); --border-di-border-focus: var(--color-neutral-100); --border-di-border-error: var(--color-red-400); --text-di-text-placeholder: var(--color-alpha-50); --text-di-text: var(--color-alpha-default); --text-di-icon-default: var(--color-alpha-50); --text-di-icon-active: var(--color-alpha-default); --button-primary-bg-default: linear-gradient(180deg, #f4e38b -24.36%, #f4dd62 23.01%, #b27f2a); --button-primary-bg-hover: linear-gradient(335deg, #f4e38b 23.63%, #f4dd62 64.48%, #b27f2a 116.85%); --button-primary-border-default: var(--color-alpha-contrast-10); --button-primary-border-hover: linear-gradient(138deg, hsla(0, 0%, 100%, 0) 29.23%, hsla(0, 0%, 100%, .3) 71.35%); --button-primary-text-default: var(--color-neutral-1000); --button-primary-text-active: var(--color-neutral-1000); --button-primary-icon-default: var(--color-neutral-1000); --button-primary-icon-active: var(--color-neutral-1000); --button-secondary-bg-default: var(--color-neutral-500); --button-secondary-bg-active: var(--color-neutral-300); --button-secondary-border-default: var(--color-neutral-300); --button-secondary-border-active: var(--color-alpha-10); --button-secondary-text-default: var(--color-alpha-default); --button-secondary-text-active: var(--color-alpha-contrast); --button-secondary-icon-default: var(--color-alpha-50); --button-secondary-icon-active: var(--color-alpha-contrast); --button-extra-bg-default: linear-gradient(180deg, #f4e38b -24.36%, #f4dd62 23.01%, #b27f2a); --button-extra-bg-hover: linear-gradient(335deg, #f4e38b 23.63%, #f4dd62 64.48%, #b27f2a 116.85%); --button-extra-border-default: var(--color-alpha-contrast-10); --button-extra-border-hover: linear-gradient(138deg, hsla(0, 0%, 100%, 0) 29.23%, hsla(0, 0%, 100%, .3) 71.35%); --button-extra-text-default: var(--color-neutral-1000); --button-extra-text-active: var(--color-neutral-1000); --button-extra-icon-default: var(--color-neutral-1000); --button-extra-icon-active: var(--color-neutral-1000); --button-extra2-bg-default: var(--color-alpha-contrast-10); --button-extra2-bg-active: var(--color-alpha-contrast); --button-extra2-border-default: var(--color-alpha-contrast-40); --button-extra2-border-active: var(--color-alpha-contrast); --button-extra2-text-default: var(--color-alpha-contrast); --button-extra2-text-active: var(--color-neutral-1000); --button-extra2-icon-default: var(--color-alpha-contrast); --button-extra2-icon-active: var(--color-neutral-1000); --button-blurred-bg-default: var(--color-alpha-10); --button-blurred-bg-active: var(--color-alpha-default); --button-blurred-border-default: var(--color-alpha-contrast-40); --button-blurred-border-active: var(--color-alpha-contrast); --button-blurred-text-default: var(--color-alpha-contrast); --button-blurred-text-active: var(--color-neutral-1000); --button-blurred-icon-default: var(--color-alpha-default); --button-blurred-icon-active: var(--color-neutral-1000); --border-button-play-border-default: #ffcf73; --bg-button-play-bg-hover: linear-gradient(139deg, #f4e38b 1.08%, #f4dd62 39.55%, #b27f2a 96.23%); --text-primary: var(--color-alpha-default); --text-secondary: var(--color-alpha-50); --text-contrast: var(--color-alpha-contrast); --text-banner-contrast: var(--color-alpha-contrast); --text-accent-1: var(--color-blue-500); --text-accent-2: var(--color-blue-400); --text-accent-3: var(--color-yellow-700); --text-accent-4: var(--color-yellow-400); --text-accent-5: var(--color-yellow-300); --text-accent-6: var(--color-yellow-300-30); --text-accent-7: var(--color-pink-400); --text-accent-8: var(--color-green-700); --text-accent-9: var(--color-green-500); --text-accent-10: var(--color-green-500-30); --text-accent-11: var(--color-red-500); --text-accent-12: var(--color-neutral-800); --text-accent-13: var(--color-neutral-500); --text-error: var(--color-red-400); --text-warning: var(--color-yellow-500); --text-success: var(--color-green-600); --text-extra: var(--color-blue-400); --icon-basic-contrast: var(--color-alpha-contrast); --icon-basic-white: var(--color-alpha-contrast); --icon-basic-white-50: var(--color-alpha-50); --icon-basic-white-25: var(--color-alpha-25); --icon-basic-100: var(--color-neutral-100); --icon-basic-100-50: var(--color-neutral-100-50); --icon-accent-1: var(--color-blue-500); --icon-accent-2: var(--color-blue-400); --icon-accent-3: var(--color-yellow-700); --icon-accent-4: var(--color-yellow-400); --icon-accent-5: var(--color-yellow-300); --icon-accent-6: var(--color-yellow-300-30); --icon-accent-7: var(--color-pink-400); --icon-accent-8: var(--color-green-700); --icon-accent-9: var(--color-green-500); --icon-accent-10: var(--color-green-500-30); --icon-accent-11: var(--color-red-500); --icon-accent-12: var(--color-neutral-800); --icon-accent-13: var(--color-neutral-500); --icon-error: var(--color-red-400); --icon-warning: var(--color-yellow-500); --icon-success: var(--color-green-600); --icon-extra: var(--color-blue-400); --icon-default-sidebar: var(--color-alpha-50); --icon-active-sidebar: var(--color-alpha-default); --icon-default-category: var(--color-alpha-50); --icon-active-category: var(--color-alpha-default); --icon-idle-category: var(--color-yellow-300); --bg-step-back: var(--color-neutral-400); --bg-step-progress: var(--color-yellow-300); --bg-game-hover: linear-gradient(180deg, rgba(11, 11, 21, .7), rgba(11, 11, 21, .2)); --bg-label-top: linear-gradient(180deg, #ff7a00, #ec3900); --bg-label-new: linear-gradient(180deg, #1ea956, #186e3a); --bg-label-crypto: linear-gradient(180deg, #9a4cf8, #7813ae); --bg-gradient-0-700: linear-gradient(270deg, #05221e, rgba(5, 34, 30, 0)); --bg-gradient-1: linear-gradient(98deg, #d11fe0 -1.36%, #374bf3 102.7%); --bg-gradient-2: linear-gradient(180deg, #f4e38b -24.36%, #f4dd62 23.01%, #b27f2a); --bg-gradient-3: linear-gradient(153deg, #58cdff 4.38%, #2756fe 81.13%); --bg-gradient-4: linear-gradient(153deg, #199258 4.38%, #03c14f 81.13%); --bg-gradient-service-page: radial-gradient(67.63% 97.68% at 50% 0, #00302a 0, #001210 64.25%, #000b0a 87.18%, #000908 100%); --bg-gradient-collection-card: linear-gradient(180deg, #1f7a74 -149.6%, #051413 81.2%); --bg-gradient-loader: radial-gradient(104.17% 118.85% at 50% 0, #00352d 0, #01201a 40.64%, #000b0a 82.6%, #000908 100%); --bg-gradient-bubble-menu: radial-gradient(35.44% 35.44% at 50% 64.56%, rgba(0, 48, 42, .9) 46%, rgba(5, 20, 19, .9) 100%); --bg-gradient-vip-card: radial-gradient(138.69% 41.85% at 50% 0, #051413 0, #051413 30%, #051413 100%); } .light { --color-neutral-50: #b5ded9; --color-neutral-100: #678d89; --color-neutral-150: #3c6863; --color-neutral-200: #2d5954; --color-neutral-300: #d6dde7; --color-neutral-400: #d6dbe2; --color-neutral-500: #e9eef5; --color-neutral-600: #f9fbfc; --color-neutral-700: #fff; --color-neutral-800: #f5f7f9; --color-neutral-900: #eceff4; --color-neutral-1000: #000605; --color-neutral-100-50: rgba(103, 141, 137, .502); --color-neutral-1000-70: rgba(0, 6, 5, .698); --color-red-400: #ff4040; --color-red-500: #c51b1b; --color-red-400-35: rgba(255, 64, 64, .302); --color-red-400-15: rgba(255, 64, 64, .149); --color-red-400-10: rgba(255, 64, 64, .102); --color-pink-300: #f761ff; --color-pink-400: #ff0098; --color-yellow-300: #ffd480; --color-yellow-400: #fff310; --color-yellow-500: #fec33e; --color-yellow-700: #ff7a00; --color-yellow-300-30: rgba(255, 212, 128, .302); --color-yellow-500-30: rgba(254, 195, 62, .302); --color-yellow-500-10: rgba(254, 195, 62, .102); --color-green-500: #43f58a; --color-green-600: #15d161; --color-green-700: #24a15e; --color-green-500-30: rgba(67, 245, 138, .302); --color-green-600-30: rgba(21, 209, 97, .302); --color-green-600-10: rgba(21, 209, 97, .102); --color-blue-400: #2183f6; --color-blue-500: #4c4dff; --color-blue-400-30: rgba(33, 131, 246, .302); --color-blue-400-10: rgba(33, 131, 246, .102); --color-alpha-10: rgba(39, 39, 42, .102); --color-alpha-15: rgba(39, 39, 42, .149); --color-alpha-25: rgba(39, 39, 42, .4); --color-alpha-40: rgba(39, 39, 42, .4); --color-alpha-50: rgba(39, 39, 42, .502); --color-alpha-60: hsla(0, 0%, 100%, .6); --color-alpha-contrast: #fff; --color-alpha-contrast-60: hsla(0, 0%, 100%, .6); --color-alpha-contrast-50: hsla(0, 0%, 100%, .502); --color-alpha-contrast-40: hsla(0, 0%, 100%, .4); --color-alpha-contrast-10: hsla(0, 0%, 100%, .102); --color-alpha-default: #27272a; --border-radius-xs: 2px; --border-radius-sm: 4px; --border-radius-md: 6px; --border-radius-lg: 8px; --border-radius-xl: 12px; --border-radius-1-5xl: 14px; --border-radius-2xl: 16px; --border-radius-2-5xl: 20px; --border-radius-3xl: 24px; --border-radius-4xl: 28px; --border-radius-5xl: 32px; --border-radius-6xl: 36px; --border-radius-7xl: 40px; --border-radius-none: 0px; --border-radius-DEFAULT: 4px; --border-radius-full: 9999px; --bg-basic-1000: var(--color-neutral-1000); --bg-basic-1000-70: var(--color-neutral-1000-70); --bg-basic-900: var(--color-neutral-900); --bg-basic-800: var(--color-neutral-800); --bg-basic-700: var(--color-neutral-700); --bg-basic-600: var(--color-neutral-600); --bg-basic-500: var(--color-neutral-500); --bg-basic-400: var(--color-neutral-400); --bg-basic-300: var(--color-neutral-300); --bg-basic-200: var(--color-neutral-200); --bg-basic-150: var(--color-neutral-150); --bg-basic-100: var(--color-neutral-100); --bg-basic-50: var(--color-neutral-50); --bg-basic-000-10: var(--color-alpha-10); --bg-basic-000-60: var(--color-alpha-60); --bg-basic-000-contrast: var(--color-alpha-contrast); --hidden-bg: var(--color-neutral-700-0); --bg-accent-1: var(--color-blue-500); --bg-accent-2: var(--color-blue-400); --bg-accent-3: var(--color-yellow-700); --bg-accent-4: var(--color-yellow-400); --bg-accent-5: var(--color-yellow-300); --bg-accent-6: var(--color-yellow-300-30); --bg-accent-7: var(--color-pink-400); --bg-accent-8: var(--color-green-700); --bg-accent-9: var(--color-green-500); --bg-accent-10: var(--color-green-500-30); --bg-accent-11: var(--color-red-500); --bg-accent-12: var(--color-neutral-800); --bg-accent-13: var(--color-neutral-500); --bg-semantic-error: var(--color-red-400); --bg-semantic-error-10: var(--color-red-400-10); --bg-semantic-warning: var(--color-yellow-500); --bg-semantic-warning-10: var(--color-yellow-500-10); --bg-semantic-success: var(--color-green-600); --bg-semantic-success-10: var(--color-green-600-10); --bg-semantic-extra: var(--color-blue-400); --bg-semantic-extra-10: var(--color-blue-400-10); --border-control-border-default: var(--color-alpha-40); --border-control-border-active: var(--color-yellow-300); --bg-control-bg-active: var(--color-yellow-300); --text-control-icon-default: var(--color-alpha-40); --text-control-icon-active: var(--color-neutral-1000); --bg-control-icon-default: var(--color-alpha-40); --bg-control-icon-active: var(--color-neutral-1000); --border-basic-500: var(--color-neutral-500); --border-basic-400: var(--color-neutral-400); --hidden-border: var(--color-neutral-400-0); --border-basic-200: var(--color-neutral-200); --border-basic-000-40: var(--color-alpha-40); --border-basic-000-10: var(--color-alpha-10); --border-accent-1: var(--color-blue-500); --border-accent-2: var(--color-blue-400); --border-accent-3: var(--color-yellow-700); --border-accent-4: var(--color-yellow-400); --border-accent-5: var(--color-yellow-300); --border-accent-6: var(--color-yellow-300-30); --border-accent-7: var(--color-pink-400); --border-accent-8: var(--color-green-700); --border-accent-9: var(--color-green-500); --border-accent-10: var(--color-green-500-30); --border-accent-11: var(--color-red-500); --border-accent-12: var(--color-neutral-800); --border-accent-13: var(--color-neutral-500); --border-error: var(--color-red-400); --border-error-30: var(--color-red-400-30); --border-warning: var(--color-yellow-500); --border-warning-30: var(--color-yellow-500-30); --border-success: var(--color-green-600); --border-success-30: var(--color-green-600-30); --border-extra: var(--color-blue-400); --border-extra-30: var(--color-blue-400-30); --bg-di-bg-default: var(--color-neutral-500); --bg-di-bg-hover: var(--color-neutral-400); --bg-di-bg-active: var(--color-neutral-400); --border-di-border-default: var(--color-neutral-300); --border-di-border-active: var(--color-neutral-100); --border-di-border-focus: var(--color-neutral-100); --border-di-border-error: var(--color-red-400); --text-di-text-placeholder: var(--color-alpha-50); --text-di-text: var(--color-alpha-default); --text-di-icon-default: var(--color-alpha-50); --text-di-icon-active: var(--color-alpha-default); --button-primary-bg-default: linear-gradient(180deg, #f4e38b -24.36%, #f4dd62 23.01%, #b27f2a); --button-primary-bg-hover: linear-gradient(335deg, #f4e38b 23.63%, #f4dd62 64.48%, #b27f2a 116.85%); --button-primary-border-default: var(--color-alpha-contrast-10); --button-primary-border-hover: linear-gradient(138deg, hsla(0, 0%, 100%, 0) 29.23%, hsla(0, 0%, 100%, .3) 71.35%); --button-primary-text-default: var(--color-neutral-1000); --button-primary-text-active: var(--color-neutral-1000); --button-primary-icon-default: var(--color-neutral-1000); --button-primary-icon-active: var(--color-neutral-1000); --button-secondary-bg-default: var(--color-neutral-500); --button-secondary-bg-active: var(--color-neutral-300); --button-secondary-border-default: var(--color-neutral-300); --button-secondary-border-active: var(--color-alpha-10); --button-secondary-text-default: var(--color-alpha-default); --button-secondary-text-active: var(--color-alpha-contrast); --button-secondary-icon-default: var(--color-alpha-50); --button-secondary-icon-active: var(--color-alpha-contrast); --button-extra-bg-default: linear-gradient(180deg, #f4e38b -24.36%, #f4dd62 23.01%, #b27f2a); --button-extra-bg-hover: linear-gradient(335deg, #f4e38b 23.63%, #f4dd62 64.48%, #b27f2a 116.85%); --button-extra-border-default: var(--color-alpha-contrast-10); --button-extra-border-hover: linear-gradient(138deg, hsla(0, 0%, 100%, 0) 29.23%, hsla(0, 0%, 100%, .3) 71.35%); --button-extra-text-default: var(--color-neutral-1000); --button-extra-text-active: var(--color-neutral-1000); --button-extra-icon-default: var(--color-neutral-1000); --button-extra-icon-active: var(--color-neutral-1000); --button-extra2-bg-default: var(--color-alpha-contrast-10); --button-extra2-bg-active: var(--color-alpha-contrast); --button-extra2-border-default: var(--color-alpha-contrast-40); --button-extra2-border-active: var(--color-alpha-contrast); --button-extra2-text-default: var(--color-alpha-contrast); --button-extra2-text-active: var(--color-neutral-1000); --button-extra2-icon-default: var(--color-alpha-contrast); --button-extra2-icon-active: var(--color-neutral-1000); --button-blurred-bg-default: var(--color-alpha-10); --button-blurred-bg-active: var(--color-alpha-default); --button-blurred-border-default: var(--color-alpha-contrast-40); --button-blurred-border-active: var(--color-alpha-contrast); --button-blurred-text-default: var(--color-alpha-contrast); --button-blurred-text-active: var(--color-neutral-1000); --button-blurred-icon-default: var(--color-alpha-default); --button-blurred-icon-active: var(--color-neutral-1000); --border-button-play-border-default: #ffcf73; --bg-button-play-bg-hover: linear-gradient(139deg, #f4e38b 1.08%, #f4dd62 39.55%, #b27f2a 96.23%); --text-primary: var(--color-alpha-default); --text-secondary: var(--color-alpha-50); --text-contrast: var(--color-alpha-contrast); --text-banner-contrast: var(--color-alpha-contrast); --text-accent-1: var(--color-blue-500); --text-accent-2: var(--color-blue-400); --text-accent-3: var(--color-yellow-700); --text-accent-4: var(--color-yellow-400); --text-accent-5: var(--color-yellow-300); --text-accent-6: var(--color-yellow-300-30); --text-accent-7: var(--color-pink-400); --text-accent-8: var(--color-green-700); --text-accent-9: var(--color-green-500); --text-accent-10: var(--color-green-500-30); --text-accent-11: var(--color-red-500); --text-accent-12: var(--color-neutral-800); --text-accent-13: var(--color-neutral-500); --text-error: var(--color-red-400); --text-warning: var(--color-yellow-500); --text-success: var(--color-green-600); --text-extra: var(--color-blue-400); --icon-basic-contrast: var(--color-alpha-contrast); --icon-basic-white: var(--color-alpha-contrast); --icon-basic-white-50: var(--color-alpha-50); --icon-basic-white-25: var(--color-alpha-25); --icon-basic-100: var(--color-neutral-100); --icon-basic-100-50: var(--color-neutral-100-50); --icon-accent-1: var(--color-blue-500); --icon-accent-2: var(--color-blue-400); --icon-accent-3: var(--color-yellow-700); --icon-accent-4: var(--color-yellow-400); --icon-accent-5: var(--color-yellow-300); --icon-accent-6: var(--color-yellow-300-30); --icon-accent-7: var(--color-pink-400); --icon-accent-8: var(--color-green-700); --icon-accent-9: var(--color-green-500); --icon-accent-10: var(--color-green-500-30); --icon-accent-11: var(--color-red-500); --icon-accent-12: var(--color-neutral-800); --icon-accent-13: var(--color-neutral-500); --icon-error: var(--color-red-400); --icon-warning: var(--color-yellow-500); --icon-success: var(--color-green-600); --icon-extra: var(--color-blue-400); --icon-default-sidebar: var(--color-alpha-50); --icon-active-sidebar: var(--color-alpha-default); --icon-default-category: var(--color-alpha-50); --icon-active-category: var(--color-alpha-default); --icon-idle-category: var(--color-yellow-300); --bg-step-back: var(--color-neutral-400); --bg-step-progress: var(--color-yellow-300); --bg-game-hover: linear-gradient(180deg, rgba(11, 11, 21, .7), rgba(11, 11, 21, .2)); --bg-label-top: linear-gradient(180deg, #ff7a00, #ec3900); --bg-label-new: linear-gradient(180deg, #1ea956, #186e3a); --bg-label-crypto: linear-gradient(180deg, #9a4cf8, #7813ae); --bg-gradient-0-700: linear-gradient(270deg, #05221e, rgba(5, 34, 30, 0)); --bg-gradient-1: linear-gradient(98deg, #d11fe0 -1.36%, #374bf3 102.7%); --bg-gradient-2: linear-gradient(180deg, #f4e38b -24.36%, #f4dd62 23.01%, #b27f2a); --bg-gradient-3: linear-gradient(153deg, #58cdff 4.38%, #2756fe 81.13%); --bg-gradient-4: linear-gradient(153deg, #199258 4.38%, #03c14f 81.13%); --bg-gradient-service-page: radial-gradient(67.63% 97.68% at 50% 0, #00302a 0, #001210 64.25%, #000b0a 87.18%, #000908 100%); --bg-gradient-collection-card: linear-gradient(180deg, #1f7a74 -149.6%, #051413 81.2%); --bg-gradient-loader: radial-gradient(104.17% 118.85% at 50% 0, #00352d 0, #01201a 40.64%, #000b0a 82.6%, #000908 100%); --bg-gradient-bubble-menu: radial-gradient(35.44% 35.44% at 50% 64.56%, rgba(0, 48, 42, .9) 46%, rgba(5, 20, 19, .9) 100%); --bg-gradient-vip-card: radial-gradient(138.69% 41.85% at 50% 0, #051413 0, #051413 30%, #051413 100%); } .brand-crown-green { --color-neutral-50: #b5ded9; --color-neutral-100: #678d89; --color-neutral-150: #3c6863; --color-neutral-200: #2d5954; --color-neutral-300: #004e44; --color-neutral-400: #004139; --color-neutral-500: #00302a; --color-neutral-600: #082521; --color-neutral-700: #05221e; --color-neutral-800: #051413; --color-neutral-900: #000e0d; --color-neutral-1000: #000605; --color-neutral-100-50: rgba(103, 141, 137, .502); --color-neutral-400-0: #004139; --color-neutral-700-0: #05221e; --color-neutral-1000-70: rgba(0, 6, 5, .698); --color-red-400: #ff4040; --color-red-500: #c51b1b; --color-red-400-10: rgba(255, 64, 64, .102); --color-red-400-15: rgba(255, 64, 64, .149); --color-red-400-30: rgba(255, 64, 64, .302); --color-pink-300: #f761ff; --color-pink-400: #ff0098; --color-yellow-300: #ffd480; --color-yellow-400: #fff310; --color-yellow-500: #fec33e; --color-yellow-700: #ff7a00; --color-yellow-300-30: rgba(255, 212, 128, .302); --color-yellow-500-30: rgba(254, 195, 62, .302); --color-yellow-500-10: rgba(254, 195, 62, .102); --color-green-500: #43f58a; --color-green-600: #15d161; --color-green-700: #24a15e; --color-green-500-30: rgba(67, 245, 138, .302); --color-green-600-30: rgba(21, 209, 97, .302); --color-green-600-10: rgba(21, 209, 97, .102); --color-blue-400: #2183f6; --color-blue-500: #4c4dff; --color-blue-400-30: rgba(33, 131, 246, .302); --color-blue-400-10: rgba(33, 131, 246, .102); --color-alpha-10: hsla(0, 0%, 100%, .102); --color-alpha-15: hsla(0, 0%, 100%, .149); --color-alpha-25: hsla(0, 0%, 100%, .251); --color-alpha-40: hsla(0, 0%, 100%, .4); --color-alpha-50: hsla(0, 0%, 100%, .502); --color-alpha-60: hsla(0, 0%, 100%, .6); --color-alpha-contrast: #fff; --color-alpha-contrast-60: hsla(0, 0%, 100%, .6); --color-alpha-contrast-50: hsla(0, 0%, 100%, .502); --color-alpha-contrast-40: hsla(0, 0%, 100%, .4); --color-alpha-contrast-10: hsla(0, 0%, 100%, .102); --color-alpha-default: #fff; --font-family-sans: Inter, sans-serif; --font-size-xs: 12px; --line-height-xs: 140%; --font-size-sm: 14px; --line-height-sm: 140%; --font-size-base: 16px; --line-height-base: 140%; --font-size-lg: 18px; --line-height-lg: 140%; --font-size-xl: 20px; --line-height-xl: 140%; --font-size-xxl: 22px; --line-height-xxl: 140%; --font-size-2xl: 24px; --line-height-2xl: 140%; --font-size-3xl: 28px; --line-height-3xl: 140%; --font-size-4xl: 32px; --line-height-4xl: 140%; --font-size-5xl: 36px; --line-height-5xl: 140%; --font-size-6xl: 38px; --line-height-6xl: 140%; --font-size-7xl: 48px; --line-height-7xl: 140%; --font-size-8xl: 56px; --line-height-8xl: 140%; --font-size-h1: 26px; --line-height-h1: 140%; --font-weight-h1: 700; --font-size-h2: 22px; --line-height-h2: 140%; --font-weight-h2: 700; --font-size-h3: 22px; --line-height-h3: 140%; --font-weight-h3: 700; --font-size-h4: 20px; --line-height-h4: 140%; --font-weight-h4: 700; --font-size-h5: 18px; --line-height-h5: 140%; --font-weight-h5: 700; --font-size-text: 16px; --line-height-text: 140%; --font-weight-text: 400; --font-size-list: 16px; --line-height-list: 140%; --font-weight-list: 400; --font-size-link: 16px; --line-height-link: 140%; --font-weight-link: 400; --border-radius-xs: 2px; --border-radius-sm: 4px; --border-radius-md: 6px; --border-radius-lg: 8px; --border-radius-xl: 12px; --border-radius-1-5xl: 14px; --border-radius-2xl: 16px; --border-radius-2-5xl: 20px; --border-radius-3xl: 24px; --border-radius-4xl: 28px; --border-radius-5xl: 32px; --border-radius-6xl: 36px; --border-radius-7xl: 40px; --border-radius-none: 0px; --border-radius-DEFAULT: 4px; --border-radius-full: 9999px; --bg-basic-1000: var(--color-neutral-1000); --bg-basic-1000-70: var(--color-neutral-1000-70); --bg-basic-900: var(--color-neutral-900); --bg-basic-800: var(--color-neutral-800); --bg-basic-700: var(--color-neutral-700); --bg-basic-600: var(--color-neutral-600); --bg-basic-500: var(--color-neutral-500); --bg-basic-400: var(--color-neutral-400); --bg-basic-300: var(--color-neutral-300); --bg-basic-200: var(--color-neutral-200); --bg-basic-150: var(--color-neutral-150); --bg-basic-100: var(--color-neutral-100); --bg-basic-50: var(--color-neutral-50); --bg-basic-000-10: var(--color-alpha-10); --bg-basic-000-60: var(--color-alpha-60); --bg-basic-000-contrast: var(--color-alpha-contrast); --hidden-bg: var(--color-neutral-700-0); --bg-accent-1: var(--color-blue-500); --bg-accent-2: var(--color-blue-400); --bg-accent-3: var(--color-yellow-700); --bg-accent-4: var(--color-yellow-400); --bg-accent-5: var(--color-yellow-300); --bg-accent-6: var(--color-yellow-300-30); --bg-accent-7: var(--color-pink-400); --bg-accent-8: var(--color-green-700); --bg-accent-9: var(--color-green-500); --bg-accent-10: var(--color-green-500-30); --bg-accent-11: var(--color-red-500); --bg-accent-12: var(--color-neutral-800); --bg-accent-13: var(--color-neutral-500); --bg-semantic-error: var(--color-red-400); --bg-semantic-error-10: var(--color-red-400-10); --bg-semantic-warning: var(--color-yellow-500); --bg-semantic-warning-10: var(--color-yellow-500-10); --bg-semantic-success: var(--color-green-600); --bg-semantic-success-10: var(--color-green-600-10); --bg-semantic-extra: var(--color-blue-400); --bg-semantic-extra-10: var(--color-blue-400-10); --border-control-border-default: var(--color-alpha-40); --border-control-border-active: var(--color-yellow-300); --bg-control-bg-active: var(--color-yellow-300); --text-control-icon-default: var(--color-alpha-40); --text-control-icon-active: var(--color-neutral-1000); --bg-control-icon-default: var(--color-alpha-40); --bg-control-icon-active: var(--color-neutral-1000); --border-basic-500: var(--color-neutral-500); --border-basic-400: var(--color-neutral-400); --hidden-border: var(--color-neutral-400-0); --border-basic-200: var(--color-neutral-200); --border-basic-000-40: var(--color-alpha-40); --border-basic-000-10: var(--color-alpha-10); --border-accent-1: var(--color-blue-500); --border-accent-2: var(--color-blue-400); --border-accent-3: var(--color-yellow-700); --border-accent-4: var(--color-yellow-400); --border-accent-5: var(--color-yellow-300); --border-accent-6: var(--color-yellow-300-30); --border-accent-7: var(--color-pink-400); --border-accent-8: var(--color-green-700); --border-accent-9: var(--color-green-500); --border-accent-10: var(--color-green-500-30); --border-accent-11: var(--color-red-500); --border-accent-12: var(--color-neutral-800); --border-accent-13: var(--color-neutral-500); --border-error: var(--color-red-400); --border-error-30: var(--color-red-400-30); --border-warning: var(--color-yellow-500); --border-warning-30: var(--color-yellow-500-30); --border-success: var(--color-green-600); --border-success-30: var(--color-green-600-30); --border-extra: var(--color-blue-400); --border-extra-30: var(--color-blue-400-30); --bg-di-bg-default: var(--color-neutral-500); --bg-di-bg-hover: var(--color-neutral-400); --bg-di-bg-active: var(--color-neutral-400); --border-di-border-default: var(--color-neutral-300); --border-di-border-active: var(--color-neutral-100); --border-di-border-focus: var(--color-neutral-100); --border-di-border-error: var(--color-red-400); --text-di-text-placeholder: var(--color-alpha-50); --text-di-text: var(--color-alpha-default); --text-di-icon-default: var(--color-alpha-50); --text-di-icon-active: var(--color-alpha-default); --button-primary-bg-default: linear-gradient(180deg, #f4e38b -24.36%, #f4dd62 23.01%, #b27f2a); --button-primary-bg-hover: linear-gradient(335deg, #f4e38b 23.63%, #f4dd62 64.48%, #b27f2a 116.85%); --button-primary-border-default: var(--color-alpha-contrast-10); --button-primary-border-hover: linear-gradient(138deg, hsla(0, 0%, 100%, 0) 29.23%, hsla(0, 0%, 100%, .3) 71.35%); --button-primary-text-default: var(--color-neutral-1000); --button-primary-text-active: var(--color-neutral-1000); --button-primary-icon-default: var(--color-neutral-1000); --button-primary-icon-active: var(--color-neutral-1000); --button-secondary-bg-default: var(--color-neutral-500); --button-secondary-bg-active: var(--color-neutral-300); --button-secondary-border-default: var(--color-neutral-300); --button-secondary-border-active: var(--color-alpha-10); --button-secondary-text-default: var(--color-alpha-default); --button-secondary-text-active: var(--color-alpha-contrast); --button-secondary-icon-default: var(--color-alpha-50); --button-secondary-icon-active: var(--color-alpha-contrast); --button-extra-bg-default: linear-gradient(180deg, #f4e38b -24.36%, #f4dd62 23.01%, #b27f2a); --button-extra-bg-hover: linear-gradient(335deg, #f4e38b 23.63%, #f4dd62 64.48%, #b27f2a 116.85%); --button-extra-border-default: var(--color-alpha-contrast-10); --button-extra-border-hover: linear-gradient(138deg, hsla(0, 0%, 100%, 0) 29.23%, hsla(0, 0%, 100%, .3) 71.35%); --button-extra-text-default: var(--color-neutral-1000); --button-extra-text-active: var(--color-neutral-1000); --button-extra-icon-default: var(--color-neutral-1000); --button-extra-icon-active: var(--color-neutral-1000); --button-extra2-bg-default: var(--color-alpha-contrast-10); --button-extra2-bg-active: var(--color-alpha-contrast); --button-extra2-border-default: var(--color-alpha-contrast-40); --button-extra2-border-active: var(--color-alpha-contrast); --button-extra2-text-default: var(--color-alpha-contrast); --button-extra2-text-active: var(--color-neutral-1000); --button-extra2-icon-default: var(--color-alpha-contrast); --button-extra2-icon-active: var(--color-neutral-1000); --button-blurred-bg-default: var(--color-alpha-10); --button-blurred-bg-active: var(--color-alpha-default); --button-blurred-border-default: var(--color-alpha-contrast-40); --button-blurred-border-active: var(--color-alpha-contrast); --button-blurred-text-default: var(--color-alpha-contrast); --button-blurred-text-active: var(--color-neutral-1000); --button-blurred-icon-default: var(--color-alpha-default); --button-blurred-icon-active: var(--color-neutral-1000); --border-button-play-border-default: #ffcf73; --bg-button-play-bg-hover: linear-gradient(139deg, #f4e38b 1.08%, #f4dd62 39.55%, #b27f2a 96.23%); --text-primary: var(--color-alpha-default); --text-secondary: var(--color-alpha-50); --text-contrast: var(--color-alpha-contrast); --text-banner-contrast: var(--color-alpha-contrast); --text-accent-1: var(--color-blue-500); --text-accent-2: var(--color-blue-400); --text-accent-3: var(--color-yellow-700); --text-accent-4: var(--color-yellow-400); --text-accent-5: var(--color-yellow-300); --text-accent-6: var(--color-yellow-300-30); --text-accent-7: var(--color-pink-400); --text-accent-8: var(--color-green-700); --text-accent-9: var(--color-green-500); --text-accent-10: var(--color-green-500-30); --text-accent-11: var(--color-red-500); --text-accent-12: var(--color-neutral-800); --text-accent-13: var(--color-neutral-500); --text-error: var(--color-red-400); --text-warning: var(--color-yellow-500); --text-success: var(--color-green-600); --text-extra: var(--color-blue-400); --icon-basic-contrast: var(--color-alpha-contrast); --icon-basic-white: var(--color-alpha-contrast); --icon-basic-white-50: var(--color-alpha-50); --icon-basic-white-25: var(--color-alpha-25); --icon-basic-100: var(--color-neutral-100); --icon-basic-100-50: var(--color-neutral-100-50); --icon-accent-1: var(--color-blue-500); --icon-accent-2: var(--color-blue-400); --icon-accent-3: var(--color-yellow-700); --icon-accent-4: var(--color-yellow-400); --icon-accent-5: var(--color-yellow-300); --icon-accent-6: var(--color-yellow-300-30); --icon-accent-7: var(--color-pink-400); --icon-accent-8: var(--color-green-700); --icon-accent-9: var(--color-green-500); --icon-accent-10: var(--color-green-500-30); --icon-accent-11: var(--color-red-500); --icon-accent-12: var(--color-neutral-800); --icon-accent-13: var(--color-neutral-500); --icon-error: var(--color-red-400); --icon-warning: var(--color-yellow-500); --icon-success: var(--color-green-600); --icon-extra: var(--color-blue-400); --icon-default-sidebar: var(--color-alpha-50); --icon-active-sidebar: var(--color-alpha-default); --icon-default-category: var(--color-alpha-50); --icon-active-category: var(--color-alpha-default); --icon-idle-category: var(--color-yellow-300); --bg-step-back: var(--color-neutral-400); --bg-step-progress: var(--color-yellow-300); --bg-game-hover: linear-gradient(180deg, rgba(11, 11, 21, .7), rgba(11, 11, 21, .2)); --bg-label-top: linear-gradient(180deg, #ff7a00, #ec3900); --bg-label-new: linear-gradient(180deg, #1ea956, #186e3a); --bg-label-crypto: linear-gradient(180deg, #9a4cf8, #7813ae); --bg-gradient-0-700: linear-gradient(270deg, #05221e, rgba(5, 34, 30, 0)); --bg-gradient-1: linear-gradient(98deg, #d11fe0 -1.36%, #374bf3 102.7%); --bg-gradient-2: linear-gradient(180deg, #f4e38b -24.36%, #f4dd62 23.01%, #b27f2a); --bg-gradient-3: linear-gradient(153deg, #58cdff 4.38%, #2756fe 81.13%); --bg-gradient-4: linear-gradient(153deg, #199258 4.38%, #03c14f 81.13%); --bg-gradient-service-page: radial-gradient(67.63% 97.68% at 50% 0, #00302a 0, #001210 64.25%, #000b0a 87.18%, #000908 100%); --bg-gradient-collection-card: linear-gradient(180deg, #1f7a74 -149.6%, #051413 81.2%); --bg-gradient-loader: radial-gradient(104.17% 118.85% at 50% 0, #00352d 0, #01201a 40.64%, #000b0a 82.6%, #000908 100%); --bg-gradient-bubble-menu: radial-gradient(35.44% 35.44% at 50% 64.56%, rgba(0, 48, 42, .9) 46%, rgba(5, 20, 19, .9) 100%); --bg-gradient-vip-card: radial-gradient(138.69% 41.85% at 50% 0, #051413 0, #051413 30%, #051413 100%); } .brand-crown-green.light { --color-neutral-50: #b5ded9; --color-neutral-100: #678d89; --color-neutral-150: #3c6863; --color-neutral-200: #2d5954; --color-neutral-300: #d6dde7; --color-neutral-400: #d6dbe2; --color-neutral-500: #e9eef5; --color-neutral-600: #f9fbfc; --color-neutral-700: #fff; --color-neutral-800: #f5f7f9; --color-neutral-900: #eceff4; --color-neutral-1000: #000605; --color-neutral-100-50: rgba(103, 141, 137, .502); --color-neutral-1000-70: rgba(0, 6, 5, .698); --color-red-400: #ff4040; --color-red-500: #c51b1b; --color-red-400-35: rgba(255, 64, 64, .302); --color-red-400-15: rgba(255, 64, 64, .149); --color-red-400-10: rgba(255, 64, 64, .102); --color-pink-300: #f761ff; --color-pink-400: #ff0098; --color-yellow-300: #ffd480; --color-yellow-400: #fff310; --color-yellow-500: #fec33e; --color-yellow-700: #ff7a00; --color-yellow-300-30: rgba(255, 212, 128, .302); --color-yellow-500-30: rgba(254, 195, 62, .302); --color-yellow-500-10: rgba(254, 195, 62, .102); --color-green-500: #43f58a; --color-green-600: #15d161; --color-green-700: #24a15e; --color-green-500-30: rgba(67, 245, 138, .302); --color-green-600-30: rgba(21, 209, 97, .302); --color-green-600-10: rgba(21, 209, 97, .102); --color-blue-400: #2183f6; --color-blue-500: #4c4dff; --color-blue-400-30: rgba(33, 131, 246, .302); --color-blue-400-10: rgba(33, 131, 246, .102); --color-alpha-10: rgba(39, 39, 42, .102); --color-alpha-15: rgba(39, 39, 42, .149); --color-alpha-25: rgba(39, 39, 42, .4); --color-alpha-40: rgba(39, 39, 42, .4); --color-alpha-50: rgba(39, 39, 42, .502); --color-alpha-60: hsla(0, 0%, 100%, .6); --color-alpha-contrast: #fff; --color-alpha-contrast-60: hsla(0, 0%, 100%, .6); --color-alpha-contrast-50: hsla(0, 0%, 100%, .502); --color-alpha-contrast-40: hsla(0, 0%, 100%, .4); --color-alpha-contrast-10: hsla(0, 0%, 100%, .102); --color-alpha-default: #27272a; --border-radius-xs: 2px; --border-radius-sm: 4px; --border-radius-md: 6px; --border-radius-lg: 8px; --border-radius-xl: 12px; --border-radius-1-5xl: 14px; --border-radius-2xl: 16px; --border-radius-2-5xl: 20px; --border-radius-3xl: 24px; --border-radius-4xl: 28px; --border-radius-5xl: 32px; --border-radius-6xl: 36px; --border-radius-7xl: 40px; --border-radius-none: 0px; --border-radius-DEFAULT: 4px; --border-radius-full: 9999px; --bg-basic-1000: var(--color-neutral-1000); --bg-basic-1000-70: var(--color-neutral-1000-70); --bg-basic-900: var(--color-neutral-900); --bg-basic-800: var(--color-neutral-800); --bg-basic-700: var(--color-neutral-700); --bg-basic-600: var(--color-neutral-600); --bg-basic-500: var(--color-neutral-500); --bg-basic-400: var(--color-neutral-400); --bg-basic-300: var(--color-neutral-300); --bg-basic-200: var(--color-neutral-200); --bg-basic-150: var(--color-neutral-150); --bg-basic-100: var(--color-neutral-100); --bg-basic-50: var(--color-neutral-50); --bg-basic-000-10: var(--color-alpha-10); --bg-basic-000-60: var(--color-alpha-60); --bg-basic-000-contrast: var(--color-alpha-contrast); --hidden-bg: var(--color-neutral-700-0); --bg-accent-1: var(--color-blue-500); --bg-accent-2: var(--color-blue-400); --bg-accent-3: var(--color-yellow-700); --bg-accent-4: var(--color-yellow-400); --bg-accent-5: var(--color-yellow-300); --bg-accent-6: var(--color-yellow-300-30); --bg-accent-7: var(--color-pink-400); --bg-accent-8: var(--color-green-700); --bg-accent-9: var(--color-green-500); --bg-accent-10: var(--color-green-500-30); --bg-accent-11: var(--color-red-500); --bg-accent-12: var(--color-neutral-800); --bg-accent-13: var(--color-neutral-500); --bg-semantic-error: var(--color-red-400); --bg-semantic-error-10: var(--color-red-400-10); --bg-semantic-warning: var(--color-yellow-500); --bg-semantic-warning-10: var(--color-yellow-500-10); --bg-semantic-success: var(--color-green-600); --bg-semantic-success-10: var(--color-green-600-10); --bg-semantic-extra: var(--color-blue-400); --bg-semantic-extra-10: var(--color-blue-400-10); --border-control-border-default: var(--color-alpha-40); --border-control-border-active: var(--color-yellow-300); --bg-control-bg-active: var(--color-yellow-300); --text-control-icon-default: var(--color-alpha-40); --text-control-icon-active: var(--color-neutral-1000); --bg-control-icon-default: var(--color-alpha-40); --bg-control-icon-active: var(--color-neutral-1000); --border-basic-500: var(--color-neutral-500); --border-basic-400: var(--color-neutral-400); --hidden-border: var(--color-neutral-400-0); --border-basic-200: var(--color-neutral-200); --border-basic-000-40: var(--color-alpha-40); --border-basic-000-10: var(--color-alpha-10); --border-accent-1: var(--color-blue-500); --border-accent-2: var(--color-blue-400); --border-accent-3: var(--color-yellow-700); --border-accent-4: var(--color-yellow-400); --border-accent-5: var(--color-yellow-300); --border-accent-6: var(--color-yellow-300-30); --border-accent-7: var(--color-pink-400); --border-accent-8: var(--color-green-700); --border-accent-9: var(--color-green-500); --border-accent-10: var(--color-green-500-30); --border-accent-11: var(--color-red-500); --border-accent-12: var(--color-neutral-800); --border-accent-13: var(--color-neutral-500); --border-error: var(--color-red-400); --border-error-30: var(--color-red-400-30); --border-warning: var(--color-yellow-500); --border-warning-30: var(--color-yellow-500-30); --border-success: var(--color-green-600); --border-success-30: var(--color-green-600-30); --border-extra: var(--color-blue-400); --border-extra-30: var(--color-blue-400-30); --bg-di-bg-default: var(--color-neutral-500); --bg-di-bg-hover: var(--color-neutral-400); --bg-di-bg-active: var(--color-neutral-400); --border-di-border-default: var(--color-neutral-300); --border-di-border-active: var(--color-neutral-100); --border-di-border-focus: var(--color-neutral-100); --border-di-border-error: var(--color-red-400); --text-di-text-placeholder: var(--color-alpha-50); --text-di-text: var(--color-alpha-default); --text-di-icon-default: var(--color-alpha-50); --text-di-icon-active: var(--color-alpha-default); --button-primary-bg-default: linear-gradient(180deg, #f4e38b -24.36%, #f4dd62 23.01%, #b27f2a); --button-primary-bg-hover: linear-gradient(335deg, #f4e38b 23.63%, #f4dd62 64.48%, #b27f2a 116.85%); --button-primary-border-default: var(--color-alpha-contrast-10); --button-primary-border-hover: linear-gradient(138deg, hsla(0, 0%, 100%, 0) 29.23%, hsla(0, 0%, 100%, .3) 71.35%); --button-primary-text-default: var(--color-neutral-1000); --button-primary-text-active: var(--color-neutral-1000); --button-primary-icon-default: var(--color-neutral-1000); --button-primary-icon-active: var(--color-neutral-1000); --button-secondary-bg-default: var(--color-neutral-500); --button-secondary-bg-active: var(--color-neutral-300); --button-secondary-border-default: var(--color-neutral-300); --button-secondary-border-active: var(--color-alpha-10); --button-secondary-text-default: var(--color-alpha-default); --button-secondary-text-active: var(--color-alpha-contrast); --button-secondary-icon-default: var(--color-alpha-50); --button-secondary-icon-active: var(--color-alpha-contrast); --button-extra-bg-default: linear-gradient(180deg, #f4e38b -24.36%, #f4dd62 23.01%, #b27f2a); --button-extra-bg-hover: linear-gradient(335deg, #f4e38b 23.63%, #f4dd62 64.48%, #b27f2a 116.85%); --button-extra-border-default: var(--color-alpha-contrast-10); --button-extra-border-hover: linear-gradient(138deg, hsla(0, 0%, 100%, 0) 29.23%, hsla(0, 0%, 100%, .3) 71.35%); --button-extra-text-default: var(--color-neutral-1000); --button-extra-text-active: var(--color-neutral-1000); --button-extra-icon-default: var(--color-neutral-1000); --button-extra-icon-active: var(--color-neutral-1000); --button-extra2-bg-default: var(--color-alpha-contrast-10); --button-extra2-bg-active: var(--color-alpha-contrast); --button-extra2-border-default: var(--color-alpha-contrast-40); --button-extra2-border-active: var(--color-alpha-contrast); --button-extra2-text-default: var(--color-alpha-contrast); --button-extra2-text-active: var(--color-neutral-1000); --button-extra2-icon-default: var(--color-alpha-contrast); --button-extra2-icon-active: var(--color-neutral-1000); --button-blurred-bg-default: var(--color-alpha-10); --button-blurred-bg-active: var(--color-alpha-default); --button-blurred-border-default: var(--color-alpha-contrast-40); --button-blurred-border-active: var(--color-alpha-contrast); --button-blurred-text-default: var(--color-alpha-contrast); --button-blurred-text-active: var(--color-neutral-1000); --button-blurred-icon-default: var(--color-alpha-default); --button-blurred-icon-active: var(--color-neutral-1000); --border-button-play-border-default: #ffcf73; --bg-button-play-bg-hover: linear-gradient(139deg, #f4e38b 1.08%, #f4dd62 39.55%, #b27f2a 96.23%); --text-primary: var(--color-alpha-default); --text-secondary: var(--color-alpha-50); --text-contrast: var(--color-alpha-contrast); --text-banner-contrast: var(--color-alpha-contrast); --text-accent-1: var(--color-blue-500); --text-accent-2: var(--color-blue-400); --text-accent-3: var(--color-yellow-700); --text-accent-4: var(--color-yellow-400); --text-accent-5: var(--color-yellow-300); --text-accent-6: var(--color-yellow-300-30); --text-accent-7: var(--color-pink-400); --text-accent-8: var(--color-green-700); --text-accent-9: var(--color-green-500); --text-accent-10: var(--color-green-500-30); --text-accent-11: var(--color-red-500); --text-accent-12: var(--color-neutral-800); --text-accent-13: var(--color-neutral-500); --text-error: var(--color-red-400); --text-warning: var(--color-yellow-500); --text-success: var(--color-green-600); --text-extra: var(--color-blue-400); --icon-basic-contrast: var(--color-alpha-contrast); --icon-basic-white: var(--color-alpha-contrast); --icon-basic-white-50: var(--color-alpha-50); --icon-basic-white-25: var(--color-alpha-25); --icon-basic-100: var(--color-neutral-100); --icon-basic-100-50: var(--color-neutral-100-50); --icon-accent-1: var(--color-blue-500); --icon-accent-2: var(--color-blue-400); --icon-accent-3: var(--color-yellow-700); --icon-accent-4: var(--color-yellow-400); --icon-accent-5: var(--color-yellow-300); --icon-accent-6: var(--color-yellow-300-30); --icon-accent-7: var(--color-pink-400); --icon-accent-8: var(--color-green-700); --icon-accent-9: var(--color-green-500); --icon-accent-10: var(--color-green-500-30); --icon-accent-11: var(--color-red-500); --icon-accent-12: var(--color-neutral-800); --icon-accent-13: var(--color-neutral-500); --icon-error: var(--color-red-400); --icon-warning: var(--color-yellow-500); --icon-success: var(--color-green-600); --icon-extra: var(--color-blue-400); --icon-default-sidebar: var(--color-alpha-50); --icon-active-sidebar: var(--color-alpha-default); --icon-default-category: var(--color-alpha-50); --icon-active-category: var(--color-alpha-default); --icon-idle-category: var(--color-yellow-300); --bg-step-back: var(--color-neutral-400); --bg-step-progress: var(--color-yellow-300); --bg-game-hover: linear-gradient(180deg, rgba(11, 11, 21, .7), rgba(11, 11, 21, .2)); --bg-label-top: linear-gradient(180deg, #ff7a00, #ec3900); --bg-label-new: linear-gradient(180deg, #1ea956, #186e3a); --bg-label-crypto: linear-gradient(180deg, #9a4cf8, #7813ae); --bg-gradient-0-700: linear-gradient(270deg, #05221e, rgba(5, 34, 30, 0)); --bg-gradient-1: linear-gradient(98deg, #d11fe0 -1.36%, #374bf3 102.7%); --bg-gradient-2: linear-gradient(180deg, #f4e38b -24.36%, #f4dd62 23.01%, #b27f2a); --bg-gradient-3: linear-gradient(153deg, #58cdff 4.38%, #2756fe 81.13%); --bg-gradient-4: linear-gradient(153deg, #199258 4.38%, #03c14f 81.13%); --bg-gradient-service-page: radial-gradient(67.63% 97.68% at 50% 0, #00302a 0, #001210 64.25%, #000b0a 87.18%, #000908 100%); --bg-gradient-collection-card: linear-gradient(180deg, #1f7a74 -149.6%, #051413 81.2%); --bg-gradient-loader: radial-gradient(104.17% 118.85% at 50% 0, #00352d 0, #01201a 40.64%, #000b0a 82.6%, #000908 100%); --bg-gradient-bubble-menu: radial-gradient(35.44% 35.44% at 50% 64.56%, rgba(0, 48, 42, .9) 46%, rgba(5, 20, 19, .9) 100%); --bg-gradient-vip-card: radial-gradient(138.69% 41.85% at 50% 0, #051413 0, #051413 30%, #051413 100%); } .brand-spin-8bet { --font-family-sans: Inter, sans-serif; --font-size-xs: 12px; --line-height-xs: 140%; --font-size-sm: 14px; --line-height-sm: 140%; --font-size-base: 16px; --line-height-base: 140%; --font-size-lg: 18px; --line-height-lg: 140%; --font-size-xl: 20px; --line-height-xl: 140%; --font-size-xxl: 22px; --line-height-xxl: 140%; --font-size-2xl: 24px; --line-height-2xl: 140%; --font-size-3xl: 28px; --line-height-3xl: 140%; --font-size-4xl: 32px; --line-height-4xl: 140%; --font-size-5xl: 36px; --line-height-5xl: 140%; --font-size-6xl: 38px; --line-height-6xl: 140%; --font-size-7xl: 48px; --line-height-7xl: 140%; --font-size-8xl: 56px; --line-height-8xl: 140%; --font-size-h1: 28px; --line-height-h1: 140%; --font-weight-h1: 600; --font-size-h2: 24px; --line-height-h2: 140%; --font-weight-h2: 600; --font-size-h3: 20px; --line-height-h3: 140%; --font-weight-h3: 600; --font-size-h4: 18px; --line-height-h4: 140%; --font-weight-h4: 600; --font-size-h5: 16px; --line-height-h5: 140%; --font-weight-h5: 600; --font-size-text: 14px; --line-height-text: 140%; --font-weight-text: 400; --font-size-list: 14px; --line-height-list: 140%; --font-weight-list: 400; --font-size-link: 14px; --line-height-link: 140%; --font-weight-link: 400; } .brand-spin-8bet, .brand-spin-8bet.light { --bg-gradient-1: linear-gradient(98deg, #f153ff -1.36%, #6948fe 102.7%); --bg-gradient-2: linear-gradient(180deg, #f4e38b -24.36%, #f4dd62 23.01%, #b27f2a); --bg-gradient-3: linear-gradient(153deg, #58cdff 4.38%, #2756fe 81.13%); --bg-gradient-4: linear-gradient(153deg, #199258 4.38%, #03c14f 81.13%); --bg-gradient-5: linear-gradient(138.65deg, #f4e38b 1.08%, #f4dd62 39.55%, #b27f2a 96.23%); --bg-gradient-service-page: radial-gradient(67.63% 97.68% at 50% 0, #00302a 0, #001210 64.25%, #000b0a 87.18%, #000908 100%); --bg-gradient-loader: linear-gradient(98deg, #f153ff -1.36%, #6948fe 102.7%); } .brand-wish-king { --color-neutral-50: #b6bede; --color-neutral-100: #616577; --color-neutral-150: #565b6e; --color-neutral-200: #53586e; --color-neutral-300: #3b4257; --color-neutral-400: #3b4363; --color-neutral-500: #2c324a; --color-neutral-600: #1f253b; --color-neutral-700: #1d2130; --color-neutral-800: #171e26; --color-neutral-900: #13181f; --color-neutral-1000: #1f1f1f; --color-neutral-100-50: rgba(101, 151, 219, .502); --color-neutral-400-0: rgba(59, 67, 99, 0); --color-neutral-700-0: rgba(29, 33, 48, 0); --color-neutral-1000-70: rgba(0, 2, 5, .698); --color-red-400: #ff4040; --color-red-500: #c51b1b; --color-red-400-10: rgba(255, 64, 64, .102); --color-red-400-15: rgba(255, 64, 64, .149); --color-red-400-30: rgba(255, 64, 64, .302); --color-pink-300: #ad5eff; --color-pink-400: #ff0098; --color-yellow-300: #ffd480; --color-yellow-400: #fff310; --color-yellow-500: #eeb22a; --color-yellow-700: #ff7a00; --color-yellow-300-30: rgba(255, 212, 128, .302); --color-yellow-500-10: rgba(254, 195, 62, .102); --color-yellow-500-30: rgba(254, 195, 62, .302); --color-green-500: #43f58a; --color-green-600: #15d161; --color-green-700: #24a19f; --color-green-500-30: rgba(67, 245, 138, .302); --color-green-600-10: rgba(21, 209, 97, .102); --color-green-600-30: rgba(21, 209, 97, .302); --color-blue-400: #2183f6; --color-blue-500: #4c4dff; --color-blue-400-10: rgba(33, 131, 246, .102); --color-blue-400-30: rgba(33, 131, 246, .302); --color-alpha-10: hsla(0, 0%, 100%, .102); --color-alpha-15: hsla(0, 0%, 100%, .149); --color-alpha-25: hsla(0, 0%, 100%, .251); --color-alpha-40: hsla(0, 0%, 100%, .4); --color-alpha-50: hsla(0, 0%, 100%, .502); --color-alpha-60: hsla(0, 0%, 100%, .6); --color-alpha-contrast: #fff; --color-alpha-contrast-60: hsla(0, 0%, 100%, .6); --color-alpha-contrast-50: hsla(0, 0%, 100%, .502); --color-alpha-contrast-40: hsla(0, 0%, 100%, .4); --color-alpha-contrast-10: hsla(0, 0%, 100%, .102); --color-alpha-default: #fff; --font-family-sans: Inter, sans-serif; --font-size-xs: 12px; --line-height-xs: 140%; --font-size-sm: 14px; --line-height-sm: 140%; --font-size-base: 16px; --line-height-base: 140%; --font-size-lg: 18px; --line-height-lg: 140%; --font-size-xl: 20px; --line-height-xl: 140%; --font-size-xxl: 22px; --line-height-xxl: 140%; --font-size-2xl: 24px; --line-height-2xl: 140%; --font-size-3xl: 28px; --line-height-3xl: 140%; --font-size-4xl: 32px; --line-height-4xl: 140%; --font-size-5xl: 36px; --line-height-5xl: 140%; --font-size-6xl: 38px; --line-height-6xl: 140%; --font-size-7xl: 48px; --line-height-7xl: 140%; --font-size-8xl: 56px; --line-height-8xl: 140%; --font-size-h1: 28px; --line-height-h1: 140%; --font-weight-h1: 600; --font-size-h2: 24px; --line-height-h2: 140%; --font-weight-h2: 600; --font-size-h3: 20px; --line-height-h3: 140%; --font-weight-h3: 600; --font-size-h4: 18px; --line-height-h4: 140%; --font-weight-h4: 600; --font-size-h5: 16px; --line-height-h5: 140%; --font-weight-h5: 600; --font-size-text: 14px; --line-height-text: 140%; --font-weight-text: 400; --font-size-list: 14px; --line-height-list: 140%; --font-weight-list: 400; --font-size-link: 14px; --line-height-link: 140%; --font-weight-link: 400; --border-radius-xs: 2px; --border-radius-sm: 4px; --border-radius-md: 6px; --border-radius-lg: 8px; --border-radius-xl: 12px; --border-radius-1-5xl: 14px; --border-radius-2xl: 16px; --border-radius-2-5xl: 20px; --border-radius-3xl: 24px; --border-radius-4xl: 28px; --border-radius-5xl: 32px; --border-radius-6xl: 36px; --border-radius-7xl: 40px; --border-radius-none: 0px; --border-radius-DEFAULT: 4px; --border-radius-full: 9999px; --bg-basic-1000: var(--color-neutral-1000); --bg-basic-1000-70: var(--color-neutral-1000-70); --bg-basic-900: var(--color-neutral-900); --bg-basic-800: var(--color-neutral-800); --bg-basic-700: var(--color-neutral-700); --bg-basic-600: var(--color-neutral-600); --bg-basic-500: var(--color-neutral-500); --bg-basic-400: var(--color-neutral-400); --bg-basic-300: var(--color-neutral-300); --bg-basic-200: var(--color-neutral-200); --bg-basic-150: var(--color-neutral-150); --bg-basic-100: var(--color-neutral-100); --bg-basic-50: var(--color-neutral-50); --bg-basic-000-10: var(--color-alpha-10); --bg-basic-000-60: var(--color-alpha-60); --bg-basic-000-contrast: var(--color-alpha-contrast); --hidden-bg: var(--color-neutral-700-0); --bg-accent-1: var(--color-blue-500); --bg-accent-2: var(--color-blue-400); --bg-accent-3: var(--color-yellow-700); --bg-accent-4: var(--color-yellow-400); --bg-accent-5: var(--color-yellow-500); --bg-accent-6: var(--color-yellow-300-30); --bg-accent-7: var(--color-pink-400); --bg-accent-8: var(--color-yellow-500); --bg-accent-9: var(--color-green-500); --bg-accent-10: var(--color-green-500-30); --bg-accent-11: var(--color-red-500); --bg-accent-12: var(--color-neutral-800); --bg-accent-13: var(--color-neutral-500); --bg-semantic-error: var(--color-red-400); --bg-semantic-error-10: var(--color-red-400-10); --bg-semantic-warning: var(--color-yellow-500); --bg-semantic-warning-10: var(--color-yellow-500-10); --bg-semantic-success: var(--color-green-600); --bg-semantic-success-10: var(--color-green-600-10); --bg-semantic-extra: var(--color-blue-400); --bg-semantic-extra-10: var(--color-blue-400-10); --border-control-border-default: var(--color-alpha-40); --border-control-border-active: var(--color-yellow-300); --bg-control-bg-active: var(--color-yellow-300); --text-control-icon-default: var(--color-alpha-40); --text-control-icon-active: var(--color-neutral-1000); --bg-control-icon-default: var(--color-alpha-40); --bg-control-icon-active: var(--color-neutral-1000); --border-basic-500: var(--color-neutral-500); --border-basic-400: var(--color-neutral-400); --hidden-border: var(--color-neutral-400-0); --border-basic-200: var(--color-neutral-200); --border-basic-000-40: var(--color-alpha-40); --border-basic-000-10: var(--color-alpha-10); --border-accent-1: var(--color-blue-500); --border-accent-2: var(--color-blue-400); --border-accent-3: var(--color-yellow-700); --border-accent-4: var(--color-yellow-400); --border-accent-5: var(--color-yellow-500); --border-accent-6: var(--color-yellow-300-30); --border-accent-7: var(--color-pink-400); --border-accent-8: var(--color-yellow-500); --border-accent-9: var(--color-green-500); --border-accent-10: var(--color-green-500-30); --border-accent-11: var(--color-red-500); --border-accent-12: var(--color-neutral-800); --border-accent-13: var(--color-neutral-500); --border-error: var(--color-red-400); --border-error-30: var(--color-red-400-30); --border-warning: var(--color-yellow-500); --border-warning-30: var(--color-yellow-500-30); --border-success: var(--color-green-600); --border-success-30: var(--color-green-600-30); --border-extra: var(--color-blue-400); --border-extra-30: var(--color-blue-400-30); --bg-di-bg-default: var(--color-neutral-500); --bg-di-bg-hover: var(--color-neutral-400); --bg-di-bg-active: var(--color-neutral-400); --border-di-border-default: var(--color-neutral-300); --border-di-border-active: var(--color-neutral-100); --border-di-border-focus: var(--color-neutral-100); --border-di-border-error: var(--color-red-400); --text-di-text-placeholder: var(--color-alpha-50); --text-di-text: var(--color-alpha-default); --text-di-icon-default: var(--color-alpha-50); --text-di-icon-active: var(--color-alpha-default); --button-primary-bg-default: linear-gradient(180deg, #fbe596 -0%, #e6a225); --button-primary-bg-hover: linear-gradient(13deg, #fbe596 9.93%, #e6a225 90.99%); --button-primary-border-default: var(--color-alpha-contrast-10); --button-primary-border-hover: var(--bg-gradient-5); --button-primary-text-default: var(--color-neutral-1000); --button-primary-text-active: var(--color-neutral-1000); --button-primary-icon-default: var(--color-neutral-1000); --button-primary-icon-active: var(--color-neutral-1000); --button-secondary-bg-default: var(--color-neutral-500); --button-secondary-bg-active: var(--color-neutral-400); --button-secondary-border-default: var(--color-neutral-300); --button-secondary-border-active: var(--color-alpha-10); --button-secondary-text-default: var(--color-alpha-default); --button-secondary-text-active: var(--color-alpha-contrast); --button-secondary-icon-default: var(--color-alpha-50); --button-secondary-icon-active: var(--color-alpha-contrast); --button-extra-bg-default: linear-gradient(180deg, #fbe596, #e6a225); --button-extra-bg-hover: linear-gradient(0deg, #fbe596, #e6a225); --button-extra-border-default: var(--color-alpha-contrast-10); --button-extra-border-hover: linear-gradient(182deg, hsla(0, 0%, 100%, .2) 30.68%, hsla(0, 0%, 100%, .3) 98.29%); --button-extra-text-default: var(--color-neutral-1000); --button-extra-text-active: var(--color-neutral-1000); --button-extra-icon-default: var(--color-neutral-1000); --button-extra-icon-active: var(--color-neutral-1000); --button-extra2-bg-default: var(--color-alpha-contrast-10); --button-extra2-bg-active: var(--color-alpha-contrast); --button-extra2-border-default: var(--color-alpha-contrast-40); --button-extra2-border-active: var(--color-alpha-contrast); --button-extra2-text-default: var(--color-alpha-contrast); --button-extra2-text-active: var(--color-neutral-1000); --button-extra2-icon-default: var(--color-alpha-contrast); --button-extra2-icon-active: var(--color-neutral-1000); --button-blurred-bg-default: var(--color-alpha-10); --button-blurred-bg-active: var(--color-alpha-default); --button-blurred-border-default: var(--color-alpha-10); --button-blurred-border-active: var(--color-alpha-default); --button-blurred-text-default: var(--color-alpha-default); --button-blurred-text-active: var(--color-neutral-900); --button-blurred-icon-default: var(--color-alpha-default); --button-blurred-icon-active: var(--color-neutral-900); --border-button-play-border-default: #ffcf73; --bg-button-play-bg-hover: linear-gradient(139deg, #f4e38b 1.08%, #f4dd62 39.55%, #b27f2a 96.23%); --text-primary: var(--color-alpha-default); --text-secondary: var(--color-alpha-50); --text-contrast: var(--color-alpha-contrast); --text-banner-contrast: var(--color-alpha-contrast); --text-accent-1: var(--color-blue-500); --text-accent-2: var(--color-blue-400); --text-accent-3: var(--color-yellow-700); --text-accent-4: var(--color-yellow-400); --text-accent-5: var(--color-yellow-500); --text-accent-6: var(--color-yellow-300-30); --text-accent-7: var(--color-pink-400); --text-accent-8: var(--color-yellow-500); --text-accent-9: var(--color-green-500); --text-accent-10: var(--color-green-500-30); --text-accent-11: var(--color-red-500); --text-accent-12: var(--color-neutral-800); --text-accent-13: var(--color-neutral-500); --text-error: var(--color-red-400); --text-warning: var(--color-yellow-500); --text-success: var(--color-green-600); --text-extra: var(--color-blue-400); --icon-basic-contrast: var(--color-alpha-contrast); --icon-basic-white: var(--color-alpha-contrast); --icon-basic-white-50: var(--color-alpha-contrast-50); --icon-basic-white-25: var(--color-alpha-25); --icon-basic-100: var(--color-neutral-100); --icon-basic-100-50: var(--color-neutral-100-50); --icon-accent-1: var(--color-blue-500); --icon-accent-2: var(--color-blue-400); --icon-accent-3: var(--color-yellow-700); --icon-accent-4: var(--color-yellow-400); --icon-accent-5: var(--color-yellow-500); --icon-accent-6: var(--color-yellow-300-30); --icon-accent-7: var(--color-pink-400); --icon-accent-8: var(--color-yellow-500); --icon-accent-9: var(--color-green-500); --icon-accent-10: var(--color-green-500-30); --icon-accent-11: var(--color-red-500); --icon-accent-12: var(--color-neutral-800); --icon-accent-13: var(--color-neutral-500); --icon-error: var(--color-red-400); --icon-warning: var(--color-yellow-500); --icon-success: var(--color-green-600); --icon-extra: var(--color-blue-400); --icon-default-sidebar: var(--color-yellow-300); --icon-active-sidebar: var(--color-yellow-500); --icon-default-category: var(--color-alpha-50); --icon-active-category: var(--color-alpha-default); --icon-idle-category: var(--color-yellow-300); --bg-step-back: var(--color-neutral-400); --bg-step-progress: var(--color-yellow-300); --bg-game-hover: linear-gradient(180deg, rgba(11, 11, 21, .7), rgba(11, 11, 21, .2)); --bg-label-top: linear-gradient(180deg, #ff7a00, #ec3900); --bg-label-new: linear-gradient(180deg, #1ea956, #186e3a); --bg-label-crypto: linear-gradient(180deg, #9a4cf8, #7813ae); --bg-gradient-0-700: linear-gradient(270deg, #1d2130, rgba(29, 33, 48, 0)); --bg-gradient-1: linear-gradient(98deg, #d11fe0 -1.36%, #374bf3 102.7%); --bg-gradient-2: linear-gradient(180deg, #f4e38b -24.36%, #f4dd62 23.01%, #b27f2a); --bg-gradient-3: linear-gradient(153deg, #58cdff 4.38%, #2756fe 81.13%); --bg-gradient-4: linear-gradient(153deg, #199258 4.38%, #03c14f 81.13%); --bg-gradient-service-page: radial-gradient(67.63% 97.68% at 50% 0, #2c324a 0, #000712 64.25%, #00040b 87.18%, #000209 100%); --bg-gradient-collection-card: linear-gradient(180deg, #53586e -149.6%, #171e26 81.2%); --bg-gradient-loader: radial-gradient(104.17% 118.85% at 50% 0, #171e26 0, #171e26 50%, #171e26 100%); --bg-gradient-bubble-menu: radial-gradient(35.44% 35.44% at 50% 64.56%, rgba(28, 34, 55, .9) 46%, rgba(5, 12, 20, .9) 100%); --bg-gradient-vip-card: radial-gradient(138.69% 41.85% at 50% 0, #13181f 0, #13181f 30%, #13181f 100%); } .brand-wish-king.light { --color-neutral-50: #9dc7ff; --color-neutral-100: #6597db; --color-neutral-150: #4f7ab4; --color-neutral-200: #416ca6; --color-neutral-300: #d6dde7; --color-neutral-400: #d6dbe2; --color-neutral-500: #e9eef5; --color-neutral-600: #f9fbfc; --color-neutral-700: #fff; --color-neutral-800: #f5f7f9; --color-neutral-900: #eceff4; --color-neutral-1000: #020810; --color-neutral-100-50: rgba(101, 151, 219, .502); --color-neutral-1000-70: rgba(2, 8, 16, .698); --color-red-400: #ff4040; --color-red-500: #c51b1b; --color-red-400-10: rgba(255, 64, 64, .102); --color-red-400-15: rgba(255, 64, 64, .149); --color-red-400-35: rgba(255, 64, 64, .302); --color-pink-300: #ad5eff; --color-pink-400: #ff0098; --color-yellow-300: #ffd480; --color-yellow-400: #fff310; --color-yellow-500: #fec33e; --color-yellow-700: #ff7a00; --color-yellow-300-30: rgba(255, 212, 128, .302); --color-yellow-500-10: rgba(254, 195, 62, .102); --color-yellow-500-30: rgba(254, 195, 62, .302); --color-blue-400: #2183f6; --color-blue-500: #4c4dff; --color-blue-400-10: rgba(33, 131, 246, .102); --color-blue-400-30: rgba(33, 131, 246, .302); --color-green-500: #43f58a; --color-green-600: #15d161; --color-green-700: #24a19f; --color-green-500-30: rgba(67, 245, 138, .302); --color-green-600-10: rgba(21, 209, 97, .102); --color-green-600-30: rgba(21, 209, 97, .302); --color-alpha-10: rgba(39, 39, 42, .102); --color-alpha-15: rgba(39, 39, 42, .149); --color-alpha-25: rgba(39, 39, 42, .251); --color-alpha-40: rgba(39, 39, 42, .4); --color-alpha-50: rgba(39, 39, 42, .502); --color-alpha-contrast: #fff; --color-alpha-contrast-60: hsla(0, 0%, 100%, .6); --color-alpha-contrast-50: hsla(0, 0%, 100%, .502); --color-alpha-contrast-40: hsla(0, 0%, 100%, .4); --color-alpha-contrast-10: hsla(0, 0%, 100%, .102); --color-alpha-default: #27272a; --border-radius-xs: 2px; --border-radius-sm: 4px; --border-radius-md: 6px; --border-radius-lg: 8px; --border-radius-xl: 12px; --border-radius-1-5xl: 14px; --border-radius-2xl: 16px; --border-radius-2-5xl: 20px; --border-radius-3xl: 24px; --border-radius-4xl: 28px; --border-radius-5xl: 32px; --border-radius-6xl: 36px; --border-radius-7xl: 40px; --border-radius-none: 0px; --border-radius-DEFAULT: 4px; --border-radius-full: 9999px; --bg-basic-1000: var(--color-neutral-1000); --bg-basic-1000-70: var(--color-neutral-1000-70); --bg-basic-900: var(--color-neutral-900); --bg-basic-800: var(--color-neutral-800); --bg-basic-700: var(--color-neutral-700); --bg-basic-600: var(--color-neutral-600); --bg-basic-500: var(--color-neutral-500); --bg-basic-400: var(--color-neutral-400); --bg-basic-300: var(--color-neutral-300); --bg-basic-200: var(--color-neutral-200); --bg-basic-150: var(--color-neutral-150); --bg-basic-100: var(--color-neutral-100); --bg-basic-50: var(--color-neutral-50); --bg-basic-000-10: var(--color-alpha-10); --bg-basic-000-60: var(--color-alpha-60); --bg-basic-000-contrast: var(--color-alpha-contrast); --hidden-bg: var(--color-neutral-700-0); --bg-accent-1: var(--color-blue-500); --bg-accent-2: var(--color-blue-400); --bg-accent-3: var(--color-yellow-700); --bg-accent-4: var(--color-yellow-400); --bg-accent-5: var(--color-yellow-500); --bg-accent-6: var(--color-yellow-300-30); --bg-accent-7: var(--color-pink-400); --bg-accent-8: var(--color-yellow-500); --bg-accent-9: var(--color-green-500); --bg-accent-10: var(--color-green-500-30); --bg-accent-11: var(--color-red-500); --bg-accent-12: var(--color-neutral-800); --bg-accent-13: var(--color-neutral-500); --bg-semantic-error: var(--color-red-400); --bg-semantic-error-10: var(--color-red-400-10); --bg-semantic-warning: var(--color-yellow-500); --bg-semantic-warning-10: var(--color-yellow-500-10); --bg-semantic-success: var(--color-green-600); --bg-semantic-success-10: var(--color-green-600-10); --bg-semantic-extra: var(--color-blue-400); --bg-semantic-extra-10: var(--color-blue-400-10); --border-control-border-default: var(--color-alpha-40); --border-control-border-active: var(--color-yellow-300); --bg-control-bg-active: var(--color-yellow-300); --text-control-icon-default: var(--color-alpha-40); --text-control-icon-active: var(--color-neutral-1000); --bg-control-icon-default: var(--color-alpha-40); --bg-control-icon-active: var(--color-neutral-1000); --border-basic-500: var(--color-neutral-500); --border-basic-400: var(--color-neutral-400); --hidden-border: var(--color-neutral-400-0); --border-basic-200: var(--color-neutral-200); --border-basic-000-40: var(--color-alpha-40); --border-basic-000-10: var(--color-alpha-10); --border-accent-1: var(--color-blue-500); --border-accent-2: var(--color-blue-400); --border-accent-3: var(--color-yellow-700); --border-accent-4: var(--color-yellow-400); --border-accent-5: var(--color-yellow-500); --border-accent-6: var(--color-yellow-300-30); --border-accent-7: var(--color-pink-400); --border-accent-8: var(--color-yellow-500); --border-accent-9: var(--color-green-500); --border-accent-10: var(--color-green-500-30); --border-accent-11: var(--color-red-500); --border-accent-12: var(--color-neutral-800); --border-accent-13: var(--color-neutral-500); --border-error: var(--color-red-400); --border-error-30: var(--color-red-400-30); --border-warning: var(--color-yellow-500); --border-warning-30: var(--color-yellow-500-30); --border-success: var(--color-green-600); --border-success-30: var(--color-green-600-30); --border-extra: var(--color-blue-400); --border-extra-30: var(--color-blue-400-30); --bg-di-bg-default: var(--color-neutral-500); --bg-di-bg-hover: var(--color-neutral-400); --bg-di-bg-active: var(--color-neutral-400); --border-di-border-default: var(--color-neutral-300); --border-di-border-active: var(--color-neutral-100); --border-di-border-focus: var(--color-neutral-100); --border-di-border-error: var(--color-red-400); --text-di-text-placeholder: var(--color-alpha-50); --text-di-text: var(--color-alpha-default); --text-di-icon-default: var(--color-alpha-50); --text-di-icon-active: var(--color-alpha-default); --button-primary-bg-default: linear-gradient(180deg, #fbe596 -0%, #e6a225); --button-primary-bg-hover: linear-gradient(13deg, #fbe596 9.93%, #e6a225 90.99%); --button-primary-border-default: var(--color-alpha-contrast-10); --button-primary-border-hover: var(--bg-gradient-5); --button-primary-text-default: var(--color-neutral-1000); --button-primary-text-active: var(--color-neutral-1000); --button-primary-icon-default: var(--color-neutral-1000); --button-primary-icon-active: var(--color-neutral-1000); --button-secondary-bg-default: var(--color-neutral-500); --button-secondary-bg-active: var(--color-neutral-400); --button-secondary-border-default: var(--color-neutral-300); --button-secondary-border-active: var(--color-alpha-10); --button-secondary-text-default: var(--color-alpha-default); --button-secondary-text-active: var(--color-alpha-contrast); --button-secondary-icon-default: var(--color-alpha-50); --button-secondary-icon-active: var(--color-alpha-contrast); --button-extra-bg-default: linear-gradient(180deg, #fbe596, #e6a225); --button-extra-bg-hover: linear-gradient(0deg, #fbe596, #e6a225); --button-extra-border-default: var(--color-alpha-contrast-10); --button-extra-border-hover: linear-gradient(182deg, hsla(0, 0%, 100%, .2) 30.68%, hsla(0, 0%, 100%, .3) 98.29%); --button-extra-text-default: var(--color-neutral-1000); --button-extra-text-active: var(--color-neutral-1000); --button-extra-icon-default: var(--color-neutral-1000); --button-extra-icon-active: var(--color-neutral-1000); --button-extra2-bg-default: var(--color-alpha-contrast-10); --button-extra2-bg-active: var(--color-alpha-contrast); --button-extra2-border-default: var(--color-alpha-contrast-40); --button-extra2-border-active: var(--color-alpha-contrast); --button-extra2-text-default: var(--color-alpha-contrast); --button-extra2-text-active: var(--color-neutral-1000); --button-extra2-icon-default: var(--color-alpha-contrast); --button-extra2-icon-active: var(--color-neutral-1000); --button-blurred-bg-default: var(--color-alpha-10); --button-blurred-bg-active: var(--color-alpha-default); --button-blurred-border-default: var(--color-alpha-10); --button-blurred-border-active: var(--color-alpha-default); --button-blurred-text-default: var(--color-alpha-default); --button-blurred-text-active: var(--color-neutral-900); --button-blurred-icon-default: var(--color-alpha-default); --button-blurred-icon-active: var(--color-neutral-900); --border-button-play-border-default: #ffcf73; --bg-button-play-bg-hover: linear-gradient(139deg, #f4e38b 1.08%, #f4dd62 39.55%, #b27f2a 96.23%); --text-primary: var(--color-alpha-default); --text-secondary: var(--color-alpha-50); --text-contrast: var(--color-alpha-contrast); --text-banner-contrast: var(--color-alpha-contrast); --text-accent-1: var(--color-blue-500); --text-accent-2: var(--color-blue-400); --text-accent-3: var(--color-yellow-700); --text-accent-4: var(--color-yellow-400); --text-accent-5: var(--color-yellow-500); --text-accent-6: var(--color-yellow-300-30); --text-accent-7: var(--color-pink-400); --text-accent-8: var(--color-yellow-500); --text-accent-9: var(--color-green-500); --text-accent-10: var(--color-green-500-30); --text-accent-11: var(--color-red-500); --text-accent-12: var(--color-neutral-800); --text-accent-13: var(--color-neutral-500); --text-error: var(--color-red-400); --text-warning: var(--color-yellow-500); --text-success: var(--color-green-600); --text-extra: var(--color-blue-400); --icon-basic-contrast: var(--color-alpha-contrast); --icon-basic-white: var(--color-alpha-contrast); --icon-basic-white-50: var(--color-alpha-contrast-50); --icon-basic-white-25: var(--color-alpha-25); --icon-basic-100: var(--color-neutral-100); --icon-basic-100-50: var(--color-neutral-100-50); --icon-accent-1: var(--color-blue-500); --icon-accent-2: var(--color-blue-400); --icon-accent-3: var(--color-yellow-700); --icon-accent-4: var(--color-yellow-400); --icon-accent-5: var(--color-yellow-500); --icon-accent-6: var(--color-yellow-300-30); --icon-accent-7: var(--color-pink-400); --icon-accent-8: var(--color-yellow-500); --icon-accent-9: var(--color-green-500); --icon-accent-10: var(--color-green-500-30); --icon-accent-11: var(--color-red-500); --icon-accent-12: var(--color-neutral-800); --icon-accent-13: var(--color-neutral-500); --icon-error: var(--color-red-400); --icon-warning: var(--color-yellow-500); --icon-success: var(--color-green-600); --icon-extra: var(--color-blue-400); --icon-default-sidebar: var(--color-yellow-300); --icon-active-sidebar: var(--color-yellow-500); --icon-default-category: var(--color-alpha-50); --icon-active-category: var(--color-alpha-default); --icon-idle-category: var(--color-yellow-300); --bg-step-back: var(--color-neutral-400); --bg-step-progress: var(--color-yellow-300); --bg-game-hover: linear-gradient(180deg, rgba(11, 11, 21, .7), rgba(11, 11, 21, .2)); --bg-label-top: linear-gradient(180deg, #ff7a00, #ec3900); --bg-label-new: linear-gradient(180deg, #1ea956, #186e3a); --bg-label-crypto: linear-gradient(180deg, #9a4cf8, #7813ae); --bg-gradient-0-700: linear-gradient(270deg, #1d2130, rgba(29, 33, 48, 0)); --bg-gradient-1: linear-gradient(98deg, #d11fe0 -1.36%, #374bf3 102.7%); --bg-gradient-2: linear-gradient(180deg, #f4e38b -24.36%, #f4dd62 23.01%, #b27f2a); --bg-gradient-3: linear-gradient(153deg, #58cdff 4.38%, #2756fe 81.13%); --bg-gradient-4: linear-gradient(153deg, #199258 4.38%, #03c14f 81.13%); --bg-gradient-service-page: radial-gradient(67.63% 97.68% at 50% 0, #2c324a 0, #000712 64.25%, #00040b 87.18%, #000209 100%); --bg-gradient-collection-card: linear-gradient(180deg, #53586e -149.6%, #171e26 81.2%); --bg-gradient-loader: radial-gradient(104.17% 118.85% at 50% 0, #171e26 0, #171e26 50%, #171e26 100%); --bg-gradient-bubble-menu: radial-gradient(35.44% 35.44% at 50% 64.56%, rgba(28, 34, 55, .9) 46%, rgba(5, 12, 20, .9) 100%); --bg-gradient-vip-card: radial-gradient(138.69% 41.85% at 50% 0, #13181f 0, #13181f 30%, #13181f 100%); } .brand-north-spin { --color-neutral-50: #b5d0de; --color-neutral-100: #8b86f7; --color-neutral-150: #6050bd; --color-neutral-200: #5346a3; --color-neutral-300: #433985; --color-neutral-400: #372e6b; --color-neutral-500: #2a2857; --color-neutral-600: #222245; --color-neutral-700: #1c1a3f; --color-neutral-800: #111433; --color-neutral-900: #0e1029; --color-neutral-1000: #070814; --color-neutral-100-50: rgba(139, 134, 247, .502); --color-neutral-400-0: #372e6b; --color-neutral-700-0: #1c1a3f; --color-neutral-1000-70: rgba(7, 8, 20, .698); --color-red-400: #ff4040; --color-red-500: #c51b1b; --color-red-400-10: rgba(255, 64, 64, .102); --color-red-400-15: rgba(255, 64, 64, .149); --color-red-400-30: rgba(255, 64, 64, .302); --color-pink-300: #f761ff; --color-pink-400: #ff0098; --color-yellow-300: #ffd480; --color-yellow-400: #fff310; --color-yellow-500: #fec33e; --color-yellow-700: #ff7a00; --color-yellow-300-30: rgba(255, 212, 128, .302); --color-yellow-500-10: rgba(254, 195, 62, .102); --color-yellow-500-30: rgba(254, 195, 62, .302); --color-green-500: #43f58a; --color-green-600: #15d161; --color-green-700: #24a15e; --color-green-500-30: rgba(67, 245, 138, .302); --color-green-600-10: rgba(21, 209, 97, .102); --color-green-600-30: rgba(21, 209, 97, .302); --color-blue-400: #2183f6; --color-blue-500: #4c4dff; --color-blue-400-10: rgba(33, 131, 246, .102); --color-blue-400-30: rgba(33, 131, 246, .302); --color-alpha-10: rgba(147, 167, 249, .102); --color-alpha-15: rgba(242, 243, 247, .149); --color-alpha-25: rgba(242, 243, 247, .251); --color-alpha-40: rgba(242, 243, 247, .4); --color-alpha-50: rgba(242, 243, 247, .502); --color-alpha-60: rgba(242, 243, 247, .6); --color-alpha-contrast: #f2f3f7; --color-alpha-contrast-60: hsla(0, 0%, 100%, .6); --color-alpha-contrast-50: rgba(242, 243, 247, .502); --color-alpha-contrast-40: rgba(242, 243, 247, .4); --color-alpha-contrast-10: rgba(147, 167, 249, .102); --color-alpha-default: #f2f3f7; --font-family-sans: Inter, sans-serif; --font-size-xs: 12px; --line-height-xs: 140%; --font-size-sm: 14px; --line-height-sm: 140%; --font-size-base: 16px; --line-height-base: 140%; --font-size-lg: 18px; --line-height-lg: 140%; --font-size-xl: 20px; --line-height-xl: 140%; --font-size-xxl: 22px; --line-height-xxl: 140%; --font-size-2xl: 24px; --line-height-2xl: 140%; --font-size-3xl: 28px; --line-height-3xl: 140%; --font-size-4xl: 32px; --line-height-4xl: 140%; --font-size-5xl: 36px; --line-height-5xl: 140%; --font-size-6xl: 38px; --line-height-6xl: 140%; --font-size-7xl: 48px; --line-height-7xl: 140%; --font-size-8xl: 56px; --line-height-8xl: 140%; --font-size-h1: 28px; --line-height-h1: 140%; --font-weight-h1: 600; --font-size-h2: 24px; --line-height-h2: 140%; --font-weight-h2: 600; --font-size-h3: 20px; --line-height-h3: 140%; --font-weight-h3: 600; --font-size-h4: 18px; --line-height-h4: 140%; --font-weight-h4: 600; --font-size-h5: 16px; --line-height-h5: 140%; --font-weight-h5: 600; --font-size-text: 14px; --line-height-text: 140%; --font-weight-text: 400; --font-size-list: 14px; --line-height-list: 140%; --font-weight-list: 400; --font-size-link: 14px; --line-height-link: 140%; --font-weight-link: 400; --border-radius-xs: 2px; --border-radius-sm: 4px; --border-radius-md: 6px; --border-radius-lg: 8px; --border-radius-xl: 12px; --border-radius-1-5xl: 14px; --border-radius-2xl: 16px; --border-radius-2-5xl: 20px; --border-radius-3xl: 24px; --border-radius-4xl: 28px; --border-radius-5xl: 32px; --border-radius-6xl: 36px; --border-radius-7xl: 40px; --border-radius-none: 0px; --border-radius-DEFAULT: 4px; --border-radius-full: 9999px; --bg-basic-1000: var(--color-neutral-1000); --bg-basic-1000-70: var(--color-neutral-1000-70); --bg-basic-900: var(--color-neutral-900); --bg-basic-800: var(--color-neutral-800); --bg-basic-700: var(--color-neutral-700); --bg-basic-600: var(--color-neutral-600); --bg-basic-500: var(--color-neutral-500); --bg-basic-400: var(--color-neutral-400); --bg-basic-300: var(--color-neutral-300); --bg-basic-200: var(--color-neutral-200); --bg-basic-150: var(--color-neutral-150); --bg-basic-100: var(--color-neutral-100); --bg-basic-50: var(--color-neutral-50); --bg-basic-000-10: var(--color-alpha-10); --bg-basic-000-60: var(--color-alpha-60); --bg-basic-000-contrast: var(--color-alpha-contrast); --hidden-bg: var(--color-neutral-700-0); --bg-accent-1: var(--color-blue-500); --bg-accent-2: var(--color-blue-400); --bg-accent-3: var(--color-yellow-700); --bg-accent-4: var(--color-yellow-400); --bg-accent-5: var(--color-yellow-300); --bg-accent-6: var(--color-yellow-300-30); --bg-accent-7: var(--color-pink-400); --bg-accent-8: var(--color-blue-400); --bg-accent-9: var(--color-green-500); --bg-accent-10: var(--color-green-500-30); --bg-accent-11: var(--color-red-500); --bg-accent-12: var(--color-neutral-800); --bg-accent-13: var(--color-neutral-500); --bg-semantic-error: var(--color-red-400); --bg-semantic-error-10: var(--color-red-400-10); --bg-semantic-warning: var(--color-yellow-500); --bg-semantic-warning-10: var(--color-yellow-500-10); --bg-semantic-success: var(--color-green-600); --bg-semantic-success-10: var(--color-green-600-10); --bg-semantic-extra: var(--color-blue-400); --bg-semantic-extra-10: var(--color-blue-400-10); --border-control-border-default: var(--color-alpha-40); --border-control-border-active: var(--color-yellow-300); --bg-control-bg-active: var(--color-yellow-300); --text-control-icon-default: var(--color-alpha-40); --text-control-icon-active: var(--color-neutral-1000); --bg-control-icon-default: var(--color-alpha-40); --bg-control-icon-active: var(--color-neutral-1000); --border-basic-500: var(--color-neutral-500); --border-basic-400: var(--color-neutral-400); --hidden-border: var(--color-neutral-400-0); --border-basic-200: var(--color-neutral-200); --border-basic-000-40: var(--color-alpha-40); --border-basic-000-10: var(--color-alpha-10); --border-accent-1: var(--color-blue-500); --border-accent-2: var(--color-blue-400); --border-accent-3: var(--color-yellow-700); --border-accent-4: var(--color-yellow-400); --border-accent-5: var(--color-yellow-300); --border-accent-6: var(--color-yellow-300-30); --border-accent-7: var(--color-pink-400); --border-accent-8: var(--color-blue-400); --border-accent-9: var(--color-green-500); --border-accent-10: var(--color-green-500-30); --border-accent-11: var(--color-red-500); --border-accent-12: var(--color-neutral-800); --border-accent-13: var(--color-neutral-500); --border-error: var(--color-red-400); --border-error-30: var(--color-red-400-30); --border-warning: var(--color-yellow-500); --border-warning-30: var(--color-yellow-500-30); --border-success: var(--color-green-600); --border-success-30: var(--color-green-600-30); --border-extra: var(--color-blue-400); --border-extra-30: var(--color-blue-400-30); --bg-di-bg-default: var(--color-neutral-500); --bg-di-bg-hover: var(--color-neutral-400); --bg-di-bg-active: var(--color-neutral-400); --border-di-border-default: var(--color-neutral-300); --border-di-border-active: var(--color-neutral-100); --border-di-border-focus: var(--color-neutral-100); --border-di-border-error: var(--color-red-400); --text-di-text-placeholder: var(--color-alpha-50); --text-di-text: var(--color-alpha-default); --text-di-icon-default: var(--color-alpha-50); --text-di-icon-active: var(--color-alpha-default); --button-primary-bg-default: linear-gradient(105deg, #ffa600 7.22%, #f59f00 94.19%); --button-primary-bg-hover: linear-gradient(280deg, #f59f00, #ffa600); --button-primary-border-default: var(--color-alpha-contrast-10); --button-primary-border-hover: var(--bg-gradient-5); --button-primary-text-default: var(--color-neutral-1000); --button-primary-text-active: var(--color-neutral-1000); --button-primary-icon-default: var(--color-neutral-1000); --button-primary-icon-active: var(--color-neutral-1000); --button-secondary-bg-default: var(--color-neutral-500); --button-secondary-bg-active: var(--color-neutral-300); --button-secondary-border-default: var(--color-neutral-300); --button-secondary-border-active: var(--color-alpha-10); --button-secondary-text-default: var(--color-alpha-default); --button-secondary-text-active: var(--color-alpha-contrast); --button-secondary-icon-default: var(--color-alpha-50); --button-secondary-icon-active: var(--color-alpha-contrast); --button-extra-bg-default: linear-gradient(96deg, #fea501 2.2%, #b93131); --button-extra-bg-hover: linear-gradient(280deg, #fea501, #b93131); --button-extra-border-default: var(--color-alpha-contrast-10); --button-extra-border-hover: var(--color-alpha-contrast-20); --button-extra-text-default: var(--color-neutral-1000); --button-extra-text-active: var(--color-neutral-1000); --button-extra-icon-default: var(--color-neutral-1000); --button-extra-icon-active: var(--color-neutral-1000); --button-extra2-bg-default: var(--color-alpha-contrast-10); --button-extra2-bg-active: var(--color-alpha-contrast); --button-extra2-border-default: var(--color-alpha-contrast-40); --button-extra2-border-active: var(--color-alpha-contrast); --button-extra2-text-default: var(--color-alpha-contrast); --button-extra2-text-active: var(--color-neutral-1000); --button-extra2-icon-default: var(--color-alpha-contrast); --button-extra2-icon-active: var(--color-neutral-1000); --button-blurred-bg-default: var(--color-alpha-10); --button-blurred-bg-active: var(--color-alpha-default); --button-blurred-border-default: var(--color-alpha-10); --button-blurred-border-active: var(--color-alpha-contrast); --button-blurred-text-default: var(--color-alpha-contrast); --button-blurred-text-active: var(--color-neutral-900); --button-blurred-icon-default: var(--color-alpha-default); --button-blurred-icon-active: var(--color-neutral-900); --border-button-play-border-default: #f6a000; --bg-button-play-bg-hover: linear-gradient(139deg, #fea501 1.08%, #f6a000 96.23%); --text-primary: var(--color-alpha-default); --text-secondary: var(--color-alpha-50); --text-contrast: var(--color-alpha-contrast); --text-banner-contrast: var(--color-alpha-contrast); --text-accent-1: var(--color-blue-500); --text-accent-2: var(--color-blue-400); --text-accent-3: var(--color-yellow-700); --text-accent-4: var(--color-yellow-400); --text-accent-5: var(--color-yellow-300); --text-accent-6: var(--color-yellow-300-30); --text-accent-7: var(--color-pink-400); --text-accent-8: var(--color-blue-400); --text-accent-9: var(--color-green-500); --text-accent-10: var(--color-green-500-30); --text-accent-11: var(--color-red-500); --text-accent-12: var(--color-neutral-800); --text-accent-13: var(--color-neutral-500); --text-error: var(--color-red-400); --text-warning: var(--color-yellow-500); --text-success: var(--color-green-600); --text-extra: var(--color-blue-400); --icon-basic-contrast: var(--color-alpha-contrast); --icon-basic-white: var(--color-alpha-contrast); --icon-basic-white-50: var(--color-alpha-50); --icon-basic-white-25: var(--color-alpha-25); --icon-basic-100: var(--color-neutral-100); --icon-basic-100-50: var(--color-neutral-100-50); --icon-accent-1: var(--color-blue-500); --icon-accent-2: var(--color-blue-400); --icon-accent-3: var(--color-yellow-700); --icon-accent-4: var(--color-yellow-400); --icon-accent-5: var(--color-yellow-300); --icon-accent-6: var(--color-yellow-300-30); --icon-accent-7: var(--color-pink-400); --icon-accent-8: var(--color-blue-400); --icon-accent-9: var(--color-green-500); --icon-accent-10: var(--color-green-500-30); --icon-accent-11: var(--color-red-500); --icon-accent-12: var(--color-neutral-800); --icon-accent-13: var(--color-neutral-500); --icon-error: var(--color-red-400); --icon-warning: var(--color-yellow-500); --icon-success: var(--color-green-600); --icon-extra: var(--color-blue-400); --icon-default-sidebar: var(--color-neutral-100); --icon-active-sidebar: var(--color-neutral-100); --icon-default-category: var(--color-alpha-50); --icon-active-category: var(--color-alpha-default); --icon-idle-category: var(--color-neutral-100); --bg-step-back: var(--color-neutral-400); --bg-step-progress: var(--color-blue-400); --bg-game-hover: linear-gradient(180deg, rgba(14, 16, 41, .7), rgba(14, 16, 41, .2)); --bg-label-top: linear-gradient(180deg, #ff7a00, #ec3900); --bg-label-new: linear-gradient(180deg, #1ea956, #186e3a); --bg-label-crypto: linear-gradient(180deg, #9a4cf8, #7813ae); --bg-gradient-0-700: linear-gradient(270deg, #1c1a3f, rgba(28, 26, 63, 0)); --bg-gradient-1: linear-gradient(188deg, #dcab20 -7.28%, #7b61ff 96.79%); --bg-gradient-2: linear-gradient(180deg, #f4e38b -24.36%, #f4dd62 23.01%, #b27f2a); --bg-gradient-3: linear-gradient(153deg, #58cdff 4.38%, #2756fe 81.13%); --bg-gradient-4: linear-gradient(153deg, #199258 4.38%, #03c14f 81.13%); --bg-gradient-service-page: radial-gradient(67.63% 97.68% at 50% 0, #222245 0, #0d0d2b 64.25%, #06061f 87.18%, #090a15 100%); --bg-gradient-collection-card: linear-gradient(180deg, #3b3b78 -149.6%, #01120f 81.2%); --bg-gradient-loader: radial-gradient(104.17% 118.85% at 50% 0, #222245 0, #0d0d2b 50%, #000b0a 100%); --bg-gradient-bubble-menu: radial-gradient(35.44% 35.44% at 50% 64.56%, rgba(33, 27, 71, .9) 46%, rgba(17, 20, 51, .9) 100%); --bg-gradient-vip-card: radial-gradient(138.69% 41.85% at 50% 0, #051413 0, #051413 30%, #051413 100%); } .brand-north-spin.light { --color-neutral-50: #b5ded9; --color-neutral-100: #6f74b2; --color-neutral-150: #5d63a6; --color-neutral-200: #51579c; --color-neutral-300: #a199d1; --color-neutral-400: #d6dbe2; --color-neutral-500: #e9eef5; --color-neutral-600: #f9fbfc; --color-neutral-700: #fff; --color-neutral-800: #f5f7f9; --color-neutral-900: #eceff4; --color-neutral-1000: #070814; --color-neutral-100-50: rgba(111, 116, 178, .502); --color-neutral-1000-70: rgba(7, 8, 20, .698); --color-red-400: #ff4040; --color-red-500: #c51b1b; --color-red-400-10: rgba(255, 64, 64, .102); --color-red-400-15: rgba(255, 64, 64, .149); --color-red-400-35: rgba(255, 64, 64, .302); --color-pink-300: #f761ff; --color-pink-400: #ff0098; --color-yellow-300: #f9a200; --color-yellow-400: #fab83c; --color-yellow-500: #fac055; --color-yellow-700: #e09200; --color-yellow-300-30: rgba(249, 162, 0, .302); --color-yellow-500-10: rgba(250, 192, 85, .102); --color-yellow-500-30: rgba(250, 192, 85, .302); --color-blue-400: #2183f6; --color-blue-500: #4c4dff; --color-blue-400-10: rgba(33, 131, 246, .102); --color-blue-400-30: rgba(33, 131, 246, .302); --color-green-500: #43f58a; --color-green-600: #15d161; --color-green-700: #24a15e; --color-green-500-30: rgba(67, 245, 138, .302); --color-green-600-10: rgba(21, 209, 97, .102); --color-green-600-30: rgba(21, 209, 97, .302); --color-alpha-10: rgba(97, 79, 203, .102); --color-alpha-15: rgba(37, 37, 55, .149); --color-alpha-25: rgba(37, 37, 55, .251); --color-alpha-40: rgba(37, 37, 55, .4); --color-alpha-50: rgba(37, 37, 55, .502); --color-alpha-60: rgba(242, 243, 247, .6); --color-alpha-contrast: #f2f3f7; --color-alpha-contrast-60: hsla(0, 0%, 100%, .6); --color-alpha-contrast-50: rgba(242, 243, 247, .502); --color-alpha-contrast-40: rgba(242, 243, 247, .4); --color-alpha-contrast-10: rgba(97, 79, 203, .102); --color-alpha-default: #252537; --color-error: #f87171; --color-warning: #fbbf24; --color-success: #4ade80; --color-extra: #60a5fa; --border-radius-xs: 2px; --border-radius-sm: 4px; --border-radius-md: 6px; --border-radius-lg: 8px; --border-radius-xl: 12px; --border-radius-1-5xl: 14px; --border-radius-2xl: 16px; --border-radius-2-5xl: 20px; --border-radius-3xl: 24px; --border-radius-4xl: 28px; --border-radius-5xl: 32px; --border-radius-6xl: 36px; --border-radius-7xl: 40px; --border-radius-none: 0px; --border-radius-DEFAULT: 4px; --border-radius-full: 9999px; --bg-basic-1000: var(--color-neutral-1000); --bg-basic-1000-70: var(--color-neutral-1000-70); --bg-basic-900: var(--color-neutral-900); --bg-basic-800: var(--color-neutral-800); --bg-basic-700: var(--color-neutral-700); --bg-basic-600: var(--color-neutral-600); --bg-basic-500: var(--color-neutral-500); --bg-basic-400: var(--color-neutral-400); --bg-basic-300: var(--color-neutral-300); --bg-basic-200: var(--color-neutral-200); --bg-basic-150: var(--color-neutral-150); --bg-basic-100: var(--color-neutral-100); --bg-basic-50: var(--color-neutral-50); --bg-basic-000-10: var(--color-alpha-10); --bg-basic-000-60: var(--color-alpha-60); --bg-basic-000-contrast: var(--color-alpha-contrast); --hidden-bg: var(--color-neutral-700-0); --bg-accent-1: var(--color-blue-500); --bg-accent-2: var(--color-blue-400); --bg-accent-3: var(--color-yellow-700); --bg-accent-4: var(--color-yellow-400); --bg-accent-5: var(--color-yellow-300); --bg-accent-6: var(--color-yellow-300-30); --bg-accent-7: var(--color-pink-400); --bg-accent-8: var(--color-blue-400); --bg-accent-9: var(--color-green-500); --bg-accent-10: var(--color-green-500-30); --bg-accent-11: var(--color-red-500); --bg-accent-12: var(--color-neutral-800); --bg-accent-13: var(--color-neutral-500); --bg-semantic-error: var(--color-red-400); --bg-semantic-error-10: var(--color-red-400-10); --bg-semantic-warning: var(--color-yellow-500); --bg-semantic-warning-10: var(--color-yellow-500-10); --bg-semantic-success: var(--color-green-600); --bg-semantic-success-10: var(--color-green-600-10); --bg-semantic-extra: var(--color-blue-400); --bg-semantic-extra-10: var(--color-blue-400-10); --border-control-border-default: var(--color-alpha-40); --border-control-border-active: var(--color-yellow-300); --bg-control-bg-active: var(--color-yellow-300); --text-control-icon-default: var(--color-alpha-40); --text-control-icon-active: var(--color-neutral-1000); --bg-control-icon-default: var(--color-alpha-40); --bg-control-icon-active: var(--color-neutral-1000); --border-basic-500: var(--color-neutral-500); --border-basic-400: var(--color-neutral-400); --hidden-border: var(--color-neutral-400-0); --border-basic-200: var(--color-neutral-200); --border-basic-000-40: var(--color-alpha-40); --border-basic-000-10: var(--color-alpha-10); --border-accent-1: var(--color-blue-500); --border-accent-2: var(--color-blue-400); --border-accent-3: var(--color-yellow-700); --border-accent-4: var(--color-yellow-400); --border-accent-5: var(--color-yellow-300); --border-accent-6: var(--color-yellow-300-30); --border-accent-7: var(--color-pink-400); --border-accent-8: var(--color-blue-400); --border-accent-9: var(--color-green-500); --border-accent-10: var(--color-green-500-30); --border-accent-11: var(--color-red-500); --border-accent-12: var(--color-neutral-800); --border-accent-13: var(--color-neutral-500); --border-error: var(--color-red-400); --border-error-30: var(--color-red-400-30); --border-warning: var(--color-yellow-500); --border-warning-30: var(--color-yellow-500-30); --border-success: var(--color-green-600); --border-success-30: var(--color-green-600-30); --border-extra: var(--color-blue-400); --border-extra-30: var(--color-blue-400-30); --bg-di-bg-default: var(--color-neutral-500); --bg-di-bg-hover: var(--color-neutral-400); --bg-di-bg-active: var(--color-neutral-400); --border-di-border-default: var(--color-neutral-300); --border-di-border-active: var(--color-neutral-100); --border-di-border-focus: var(--color-neutral-100); --border-di-border-error: var(--color-red-400); --text-di-text-placeholder: var(--color-alpha-50); --text-di-text: var(--color-alpha-default); --text-di-icon-default: var(--color-alpha-50); --text-di-icon-active: var(--color-alpha-default); --button-primary-bg-default: linear-gradient(105deg, #ffa600 7.22%, #f59f00 94.19%); --button-primary-bg-hover: linear-gradient(280deg, #f59f00, #ffa600); --button-primary-border-default: var(--color-alpha-contrast-10); --button-primary-border-hover: var(--bg-gradient-5); --button-primary-text-default: var(--color-neutral-1000); --button-primary-text-active: var(--color-neutral-1000); --button-primary-icon-default: var(--color-neutral-1000); --button-primary-icon-active: var(--color-neutral-1000); --button-secondary-bg-default: var(--color-neutral-500); --button-secondary-bg-active: var(--color-neutral-300); --button-secondary-border-default: var(--color-neutral-300); --button-secondary-border-active: var(--color-alpha-10); --button-secondary-text-default: var(--color-alpha-default); --button-secondary-text-active: var(--color-alpha-contrast); --button-secondary-icon-default: var(--color-alpha-50); --button-secondary-icon-active: var(--color-alpha-contrast); --button-extra-bg-default: linear-gradient(96deg, #fea501 2.2%, #b93131); --button-extra-bg-hover: linear-gradient(280deg, #fea501, #b93131); --button-extra-border-default: var(--color-alpha-contrast-10); --button-extra-border-hover: var(--color-alpha-contrast-20); --button-extra-text-default: var(--color-neutral-1000); --button-extra-text-active: var(--color-neutral-1000); --button-extra-icon-default: var(--color-neutral-1000); --button-extra-icon-active: var(--color-neutral-1000); --button-extra2-bg-default: var(--color-alpha-contrast-10); --button-extra2-bg-active: var(--color-alpha-contrast); --button-extra2-border-default: var(--color-alpha-contrast-40); --button-extra2-border-active: var(--color-alpha-contrast); --button-extra2-text-default: var(--color-alpha-contrast); --button-extra2-text-active: var(--color-neutral-1000); --button-extra2-icon-default: var(--color-alpha-contrast); --button-extra2-icon-active: var(--color-neutral-1000); --button-blurred-bg-default: var(--color-alpha-10); --button-blurred-bg-active: var(--color-alpha-default); --button-blurred-border-default: var(--color-alpha-10); --button-blurred-border-active: var(--color-alpha-contrast); --button-blurred-text-default: var(--color-alpha-contrast); --button-blurred-text-active: var(--color-neutral-900); --button-blurred-icon-default: var(--color-alpha-default); --button-blurred-icon-active: var(--color-neutral-900); --border-button-play-border-default: #f6a000; --bg-button-play-bg-hover: linear-gradient(139deg, #fea501 1.08%, #f6a000 96.23%); --text-primary: var(--color-alpha-default); --text-secondary: var(--color-alpha-50); --text-contrast: var(--color-alpha-contrast); --text-banner-contrast: var(--color-alpha-contrast); --text-accent-1: var(--color-blue-500); --text-accent-2: var(--color-blue-400); --text-accent-3: var(--color-yellow-700); --text-accent-4: var(--color-yellow-400); --text-accent-5: var(--color-yellow-300); --text-accent-6: var(--color-yellow-300-30); --text-accent-7: var(--color-pink-400); --text-accent-8: var(--color-blue-400); --text-accent-9: var(--color-green-500); --text-accent-10: var(--color-green-500-30); --text-accent-11: var(--color-red-500); --text-accent-12: var(--color-neutral-800); --text-accent-13: var(--color-neutral-500); --text-error: var(--color-red-400); --text-warning: var(--color-yellow-500); --text-success: var(--color-green-600); --text-extra: var(--color-blue-400); --icon-basic-contrast: var(--color-alpha-contrast); --icon-basic-white: var(--color-alpha-contrast); --icon-basic-white-50: var(--color-alpha-50); --icon-basic-white-25: var(--color-alpha-25); --icon-basic-100: var(--color-neutral-100); --icon-basic-100-50: var(--color-neutral-100-50); --icon-accent-1: var(--color-blue-500); --icon-accent-2: var(--color-blue-400); --icon-accent-3: var(--color-yellow-700); --icon-accent-4: var(--color-yellow-400); --icon-accent-5: var(--color-yellow-300); --icon-accent-6: var(--color-yellow-300-30); --icon-accent-7: var(--color-pink-400); --icon-accent-8: var(--color-blue-400); --icon-accent-9: var(--color-green-500); --icon-accent-10: var(--color-green-500-30); --icon-accent-11: var(--color-red-500); --icon-accent-12: var(--color-neutral-800); --icon-accent-13: var(--color-neutral-500); --icon-error: var(--color-red-400); --icon-warning: var(--color-yellow-500); --icon-success: var(--color-green-600); --icon-extra: var(--color-blue-400); --icon-default-sidebar: var(--color-neutral-100); --icon-active-sidebar: var(--color-neutral-100); --icon-default-category: var(--color-alpha-50); --icon-active-category: var(--color-alpha-default); --icon-idle-category: var(--color-neutral-100); --bg-step-back: var(--color-neutral-400); --bg-step-progress: var(--color-blue-400); --bg-game-hover: linear-gradient(180deg, rgba(14, 16, 41, .7), rgba(14, 16, 41, .2)); --bg-label-top: linear-gradient(180deg, #ff7a00, #ec3900); --bg-label-new: linear-gradient(180deg, #1ea956, #186e3a); --bg-label-crypto: linear-gradient(180deg, #9a4cf8, #7813ae); --bg-gradient-0-700: linear-gradient(270deg, #1c1a3f, rgba(28, 26, 63, 0)); --bg-gradient-1: linear-gradient(188deg, #dcab20 -7.28%, #7b61ff 96.79%); --bg-gradient-2: linear-gradient(180deg, #f4e38b -24.36%, #f4dd62 23.01%, #b27f2a); --bg-gradient-3: linear-gradient(153deg, #58cdff 4.38%, #2756fe 81.13%); --bg-gradient-4: linear-gradient(153deg, #199258 4.38%, #03c14f 81.13%); --bg-gradient-service-page: radial-gradient(67.63% 97.68% at 50% 0, #222245 0, #0d0d2b 64.25%, #06061f 87.18%, #090a15 100%); --bg-gradient-collection-card: linear-gradient(180deg, #3b3b78 -149.6%, #01120f 81.2%); --bg-gradient-loader: radial-gradient(104.17% 118.85% at 50% 0, #222245 0, #0d0d2b 50%, #000b0a 100%); --bg-gradient-bubble-menu: radial-gradient(35.44% 35.44% at 50% 64.56%, rgba(33, 27, 71, .9) 46%, rgba(17, 20, 51, .9) 100%); --bg-gradient-vip-card: radial-gradient(138.69% 41.85% at 50% 0, #051413 0, #051413 30%, #051413 100%); } .brand-special-order { --color-neutral-50: #b6bede; --color-neutral-100: #616577; --color-neutral-150: #565b6e; --color-neutral-200: #53586e; --color-neutral-300: #3b4257; --color-neutral-400: #3b4363; --color-neutral-500: #2c324a; --color-neutral-600: #1f253b; --color-neutral-700: #1d2130; --color-neutral-800: #171e26; --color-neutral-900: #13181f; --color-neutral-1000: #1f1f1f; --color-neutral-000-contrast: #fff; --color-neutral-000-60: hsla(0, 0%, 100%, .6); --color-neutral-000-10: hsla(0, 0%, 100%, .102); --color-neutral-100-50: rgba(101, 151, 219, .502); --color-neutral-1000-70: rgba(0, 2, 5, .698); --color-red-400: #ff4040; --color-red-500: #c51b1b; --color-red-400-10: rgba(255, 64, 64, .102); --color-red-400-15: rgba(255, 64, 64, .149); --color-red-400-35: rgba(255, 64, 64, .302); --color-pink-300: #ad5eff; --color-pink-400: #ff0098; --color-yellow-300: #ffd480; --color-yellow-400: #fff310; --color-yellow-500: #fec33e; --color-yellow-700: #ff7a00; --color-yellow-300-30: rgba(255, 212, 128, .302); --color-yellow-500-10: rgba(254, 195, 62, .102); --color-yellow-500-30: rgba(254, 195, 62, .302); --color-green-500: #43f58a; --color-green-600: #15d161; --color-green-700: #24a19f; --color-green-500-30: rgba(67, 245, 138, .302); --color-green-600-10: rgba(21, 209, 97, .102); --color-green-600-30: rgba(21, 209, 97, .302); --color-blue-400: #2183f6; --color-blue-500: #4c4dff; --color-blue-400-10: rgba(33, 131, 246, .102); --color-blue-400-30: rgba(33, 131, 246, .302); --color-alpha-10: hsla(0, 0%, 100%, .102); --color-alpha-15: hsla(0, 0%, 100%, .149); --color-alpha-25: hsla(0, 0%, 100%, .251); --color-alpha-40: hsla(0, 0%, 100%, .4); --color-alpha-50: hsla(0, 0%, 100%, .502); --color-alpha-contrast: #fff; --color-alpha-contrast-50: hsla(0, 0%, 100%, .502); --color-alpha-contrast-40: hsla(0, 0%, 100%, .4); --color-alpha-contrast-10: hsla(0, 0%, 100%, .102); --color-alpha-default: #fff; --color-error: #f87171; --color-warning: #fbbf24; --color-success: #4ade80; --color-extra: #60a5fa; --font-family-sans: Inter, sans-serif; --font-size-xs: 12px; --line-height-xs: 140%; --font-size-sm: 14px; --line-height-sm: 140%; --font-size-base: 16px; --line-height-base: 140%; --font-size-lg: 18px; --line-height-lg: 140%; --font-size-xl: 20px; --line-height-xl: 140%; --font-size-xxl: 22px; --line-height-xxl: 140%; --font-size-2xl: 24px; --line-height-2xl: 140%; --font-size-3xl: 28px; --line-height-3xl: 140%; --font-size-4xl: 32px; --line-height-4xl: 140%; --font-size-5xl: 36px; --line-height-5xl: 140%; --font-size-6xl: 38px; --line-height-6xl: 140%; --font-size-7xl: 48px; --line-height-7xl: 140%; --font-size-8xl: 56px; --line-height-8xl: 140%; --font-size-h1: 28px; --line-height-h1: 140%; --font-weight-h1: 600; --font-size-h2: 24px; --line-height-h2: 140%; --font-weight-h2: 600; --font-size-h3: 20px; --line-height-h3: 140%; --font-weight-h3: 600; --font-size-h4: 18px; --line-height-h4: 140%; --font-weight-h4: 600; --font-size-h5: 16px; --line-height-h5: 140%; --font-weight-h5: 600; --font-size-text: 14px; --line-height-text: 140%; --font-weight-text: 400; --font-size-list: 14px; --line-height-list: 140%; --font-weight-list: 400; --font-size-link: 14px; --line-height-link: 140%; --font-weight-link: 400; --border-radius-xs: 2px; --border-radius-sm: 4px; --border-radius-md: 6px; --border-radius-lg: 8px; --border-radius-xl: 12px; --border-radius-1-5xl: 14px; --border-radius-2xl: 16px; --border-radius-2-5xl: 20px; --border-radius-3xl: 24px; --border-radius-4xl: 28px; --border-radius-5xl: 32px; --border-radius-6xl: 36px; --border-radius-7xl: 40px; --border-radius-none: 0px; --border-radius-DEFAULT: 4px; --border-radius-full: 9999px; --bg-basic-1000: var(--color-neutral-1000); --bg-basic-1000-70: var(--color-neutral-1000-70); --bg-basic-900: var(--color-neutral-900); --bg-basic-800: var(--color-neutral-800); --bg-basic-700: var(--color-neutral-700); --bg-basic-600: var(--color-neutral-600); --bg-basic-500: var(--color-neutral-500); --bg-basic-400: var(--color-neutral-400); --bg-basic-300: var(--color-neutral-300); --bg-basic-200: var(--color-neutral-200); --bg-basic-150: var(--color-neutral-150); --bg-basic-100: var(--color-neutral-100); --bg-basic-50: var(--color-neutral-50); --bg-basic-000-10: var(--alpha-contrast-10); --bg-basic-000-contrast: var(--alpha-contrast); --bg-accent-blue-500: var(--color-blue-500); --bg-accent-green-500: var(--color-green-500); --bg-accent-green-500-30: var(--color-green-500-30); --bg-accent-red-500: var(--color-red-500); --bg-accent-pink-400: var(--color-pink-400); --bg-accent-yellow-300: var(--color-yellow-300); --bg-accent-green-700: var(--color-green-700); --bg-semantic-error: var(--color-red-400); --bg-semantic-error-10: var(--color-red-400-10); --bg-semantic-warning: var(--color-yellow-500); --bg-semantic-warning-10: var(--color-yellow-500-10); --bg-semantic-success: var(--color-green-600); --bg-semantic-success-10: var(--color-green-600-10); --bg-semantic-extra: var(--color-blue-400); --bg-semantic-extra-10: var(--color-blue-400-10); --border-control-border-default: var(--control-border-default); --border-control-border-active: var(--control-border-active); --bg-control-bg-active: var(--control-bg-active); --text-control-icon-default: var(--control-icon-default); --text-control-icon-active: var(--control-icon-active); --border-basic-500: var(--border-basic-500); --border-basic-400: var(--border-basic-400); --border-basic-200: var(--border-basic-200); --border-basic-000-40: var(--border-basic-000-40); --border-blue-500: var(--border-blue-500); --border-green-700: var(--border-green-700); --border-yellow-300: var(--border-yellow-300); --border-yellow-300-30: var(--border-yellow-300-30); --border-error: var(--border-error); --border-error-10: var(--border-error-10); --border-warning: var(--border-warning); --border-warning-10: var(--border-warning-10); --border-success: var(--border-success); --border-success-10: var(--border-success-10); --border-extra: var(--border-extra); --border-extra-10: var(--border-extra-10); --bg-di-bg-default: var(--color-neutral-500); --bg-di-bg-hover: var(--color-neutral-400); --bg-di-bg-active: var(--color-neutral-400); --border-di-border-default: var(--color-neutral-300); --border-di-border-active: var(--color-neutral-100); --border-di-border-focus: var(--color-neutral-100); --border-di-border-error: var(--color-red-400); --text-di-text-placeholder: var(--color-alpha-contrast-50); --text-di-text: var(--color-alpha-contrast); --text-di-icon-default: var(--color-alpha-contrast-50); --text-di-icon-active: var(--color-alpha-contrast); --button-primary-bg-default: linear-gradient(180deg, #fce89a, #e6a123); --button-primary-bg-hover: linear-gradient(13deg, #fce89a 9.93%, #e6a123 90.99%); --button-primary-border-default: var(--color-alpha-contrast-10); --button-primary-border-hover: var(--color-alpha-contrast-10); --button-primary-text-default: var(--color-neutral-1000); --button-primary-text-active: var(--color-neutral-1000); --button-primary-icon-default: var(--color-neutral-1000); --button-primary-icon-active: var(--color-neutral-1000); --button-secondary-bg-default: var(--color-neutral-500); --button-secondary-bg-active: var(--color-neutral-300); --button-secondary-border-default: var(--color-neutral-300); --button-secondary-border-active: var(--color-alpha-contrast-10); --button-secondary-text-default: var(--color-alpha-contrast); --button-secondary-text-active: var(--color-alpha-contrast); --button-secondary-icon-default: var(--color-alpha-contrast-50); --button-secondary-icon-active: var(--color-alpha-contrast); --button-extra-bg-default: linear-gradient(153deg, #4234ff 4.38%, #7e72ff 81.13%); --button-extra-bg-hover: linear-gradient(153deg, #4234ff 4.38%, #7e72ff 81.13%); --button-extra-border-default: var(--color-alpha-contrast-10); --button-extra-border-hover: linear-gradient(138deg, hsla(0, 0%, 100%, 0) 29.23%, hsla(0, 0%, 100%, .3) 71.35%); --button-extra-text-default: var(--color-neutral-1000); --button-extra-text-active: var(--color-neutral-1000); --button-extra-icon-default: var(--color-neutral-1000); --button-extra-icon-active: var(--color-neutral-1000); --bg-button-extra2-bg-default: var(--button-extra2-bg-default); --bg-button-extra2-bg-active: var(--button-extra2-bg-active); --text-button-extra2-text-default: var(--button-extra2-text-default); --text-button-extra2-text-active: var(--button-extra2-text-active); --border-button-extra2-border-default: var(--button-extra2-border-default); --border-button-extra2-border-active: var(--button-extra2-border-active); --bg-button-blurred-bg-default: var(--button-blurred-bg-default); --bg-button-blurred-bg-active: var(--button-blurred-bg-active); --text-button-blurred-text-default: var(--button-blurred-text-default); --text-button-blurred-text-active: var(--button-blurred-text-active); --border-button-blurred-border-default: var(--button-blurred-border-default); --border-button-blurred-border-active: var(--button-blurred-border-active); --border-button-play-border-default: var(--button-play-border-default); --bg-button-play-bg-hover: var(--button-play-bg-hover); --text-primary: var(--text-primary); --text-secondary: var(--text-secondary); --text-contrast: var(--text-contrast); --text-dark: var(--text-dark); --text-green-600: var(--text-green-600); --text-green-700: var(--color-green-700); --text-blue-400: var(--text-blue-400); --text-pink-400: var(--text-pink-400); --text-yellow-300: var(--text-yellow-300); --text-error: var(--text-error); --text-warning: var(--text-warning); --text-success: var(--text-success); --text-extra: var(--text-extra); --icon-basic-white-contrast: var(--icon-basic-white-contrast); --icon-basic-white: var(--icon-basic-white); --icon-basic-white-50: var(--icon-basic-white-50); --icon-basic-white-25: var(--icon-basic-white-25); --icon-basic-100: var(--icon-basic-100); --icon-basic-100-50: var(--icon-basic-100-50); --icon-dark: var(--icon-dark); --icon-blue-500: var(--icon-blue-500); --icon-blue-400: var(--icon-blue-400); --icon-yellow-700: var(--icon-yellow-700); --icon-yellow-400: var(--icon-yellow-400); --icon-yellow-300: var(--icon-yellow-300); --icon-pink-400: var(--icon-pink-400); --icon-green-700: var(--icon-green-700); --icon-dark-800: var(--icon-dark-800); --icon-dark-500: var(--icon-dark-500); --icon-error: var(--icon-error); --icon-warning: var(--icon-warning); --icon-success: var(--icon-success); --icon-extra: var(--icon-extra); --bg-step-back: var(--step-back); --bg-step-progress: var(--step-progress); --bg-game-hover: var(--game-hover); --bg-label-top: var(--label-top); --bg-label-new: var(--label-new); --bg-label-crypto: var(--label-crypto); --bg-card-bronze: var(--card-bronze); --bg-card-silver: var(--card-silver); --bg-card-gold: var(--card-gold); --bg-card-platinum: var(--card-platinum); --bg-card-rubin: var(--card-rubin); --bg-card-description: var(--card-description); --bg-card-current-rank-card: var(--card-current-rank-card); --bg-funds-modal-background: var(--funds-modal-background); --border-funds-modal-border: var(--funds-modal-border); --text-funds-text-and-icons: var(--funds-text-and-icons); --text-funds-input-text-and-icons-accent: var(--funds-input-text-and-icons-accent); --bg-funds-input-background: var(--funds-input-background); --border-funds-input-border: var(--funds-input-border); --text-funds-input-text-and-icons: var(--funds-input-text-and-icons); --bg-funds-bonus-background: var(--funds-bonus-background); --border-funds-bonus-border: var(--funds-bonus-border); --text-funds-bonus-text-and-icons: var(--funds-bonus-text-and-icons); --bg-notification-background: var(--notification-background); --border-notification-border: var(--notification-border); --text-notification-text-and-icons: var(--notification-text-and-icons); --bg-gradient-1: linear-gradient(98deg, #f153ff -1.36%, #6948fe 102.7%); --bg-gradient-2: linear-gradient(180deg, #f4e38b -24.36%, #f4dd62 23.01%, #b27f2a); --bg-gradient-3: linear-gradient(153deg, #58cdff 4.38%, #2756fe 81.13%); --bg-gradient-4: linear-gradient(153deg, #199258 4.38%, #03c14f 81.13%); --bg-gradient-5: linear-gradient(138.65deg, #f4e38b 1.08%, #f4dd62 39.55%, #b27f2a 96.23%); --bg-gradient-service-page: radial-gradient(67.63% 97.68% at 50% 0, #2c324a 0, #000712 64.25%, #00040b 87.18%, #000209 100%); --bg-gradient-loader: radial-gradient(67.63% 97.68% at 50% 0, #2c324a 0, #000712 64.25%, #00040b 87.18%, #000209 100%); } .brand-special-order.light { --color-neutral-50: #9dc7ff; --color-neutral-100: #6597db; --color-neutral-150: #4f7ab4; --color-neutral-200: #416ca6; --color-neutral-300: #d6dde7; --color-neutral-400: #d6dbe2; --color-neutral-500: #e9eef5; --color-neutral-600: #f9fbfc; --color-neutral-700: #fff; --color-neutral-800: #f5f7f9; --color-neutral-900: #eceff4; --color-neutral-1000: #020810; --color-neutral-100-50: rgba(101, 151, 219, .502); --color-neutral-1000-70: rgba(2, 8, 16, .698); --color-red-400: #ff4040; --color-red-500: #c51b1b; --color-red-400-10: rgba(255, 64, 64, .102); --color-red-400-15: rgba(255, 64, 64, .149); --color-red-400-35: rgba(255, 64, 64, .302); --color-pink-300: #ad5eff; --color-pink-400: #ff0098; --color-yellow-300: #ffd480; --color-yellow-400: #fff310; --color-yellow-500: #fec33e; --color-yellow-700: #ff7a00; --color-yellow-300-30: rgba(255, 212, 128, .302); --color-yellow-500-10: rgba(254, 195, 62, .102); --color-yellow-500-30: rgba(254, 195, 62, .302); --color-blue-400: #2183f6; --color-blue-500: #4c4dff; --color-blue-400-10: rgba(33, 131, 246, .102); --color-blue-400-30: rgba(33, 131, 246, .302); --color-green-500: #43f58a; --color-green-600: #15d161; --color-green-700: #24a19f; --color-green-500-30: rgba(67, 245, 138, .302); --color-green-600-10: rgba(21, 209, 97, .102); --color-green-600-30: rgba(21, 209, 97, .302); --color-alpha-10: rgba(39, 39, 42, .102); --color-alpha-15: rgba(39, 39, 42, .149); --color-alpha-25: rgba(39, 39, 42, .251); --color-alpha-40: rgba(39, 39, 42, .4); --color-alpha-50: rgba(39, 39, 42, .502); --color-alpha-contrast: #fff; --color-alpha-contrast-50: hsla(0, 0%, 100%, .502); --color-alpha-contrast-40: hsla(0, 0%, 100%, .4); --color-alpha-contrast-10: hsla(0, 0%, 100%, .102); --color-alpha-default: #27272a; --color-error: #f87171; --color-warning: #fbbf24; --color-success: #4ade80; --color-extra: #60a5fa; --border-radius-xs: 2px; --border-radius-sm: 4px; --border-radius-md: 6px; --border-radius-lg: 8px; --border-radius-xl: 12px; --border-radius-1-5xl: 14px; --border-radius-2xl: 16px; --border-radius-2-5xl: 20px; --border-radius-3xl: 24px; --border-radius-4xl: 28px; --border-radius-5xl: 32px; --border-radius-6xl: 36px; --border-radius-7xl: 40px; --border-radius-none: 0px; --border-radius-DEFAULT: 4px; --border-radius-full: 9999px; --bg-basic-1000: var(--color-neutral-1000); --bg-basic-1000-70: var(--color-neutral-1000-70); --bg-basic-900: var(--color-neutral-900); --bg-basic-800: var(--color-neutral-800); --bg-basic-700: var(--color-neutral-700); --bg-basic-600: var(--color-neutral-600); --bg-basic-500: var(--color-neutral-500); --bg-basic-400: var(--color-neutral-400); --bg-basic-300: var(--color-neutral-300); --bg-basic-200: var(--color-neutral-200); --bg-basic-150: var(--color-neutral-150); --bg-basic-100: var(--color-neutral-100); --bg-basic-50: var(--color-neutral-50); --bg-basic-000-10: var(--alpha-contrast-10); --bg-basic-000-contrast: var(--alpha-contrast); --bg-accent-blue-500: var(--color-blue-500); --bg-accent-green-500: var(--color-green-500); --bg-accent-green-500-30: var(--color-green-500-30); --bg-accent-red-500: var(--color-red-500); --bg-accent-pink-400: var(--color-pink-400); --bg-accent-yellow-300: var(--color-yellow-300); --bg-accent-green-700: var(--color-green-700); --bg-semantic-error: var(--color-red-400); --bg-semantic-error-10: var(--color-red-400-10); --bg-semantic-warning: var(--color-yellow-500); --bg-semantic-warning-10: var(--color-yellow-500-10); --bg-semantic-success: var(--color-green-600); --bg-semantic-success-10: var(--color-green-600-10); --bg-semantic-extra: var(--color-blue-400); --bg-semantic-extra-10: var(--color-blue-400-10); --border-control-border-default: var(--control-border-default); --border-control-border-active: var(--control-border-active); --bg-control-bg-active: var(--control-bg-active); --text-control-icon-default: var(--control-icon-default); --text-control-icon-active: var(--control-icon-active); --border-basic-500: var(--border-basic-500); --border-basic-400: var(--border-basic-400); --border-basic-200: var(--border-basic-200); --border-basic-000-40: var(--border-basic-000-40); --border-blue-500: var(--border-blue-500); --border-green-700: var(--border-green-700); --border-yellow-300: var(--border-yellow-300); --border-yellow-300-30: var(--border-yellow-300-30); --border-error: var(--border-error); --border-error-10: var(--border-error-10); --border-warning: var(--border-warning); --border-warning-10: var(--border-warning-10); --border-success: var(--border-success); --border-success-10: var(--border-success-10); --border-extra: var(--border-extra); --border-extra-10: var(--border-extra-10); --bg-di-bg-default: var(--color-neutral-500); --bg-di-bg-hover: var(--color-neutral-400); --bg-di-bg-active: var(--color-neutral-400); --border-di-border-default: var(--color-neutral-300); --border-di-border-active: var(--color-neutral-100); --border-di-border-focus: var(--color-neutral-100); --border-di-border-error: var(--color-red-400); --text-di-text-placeholder: var(--color-alpha-contrast-50); --text-di-text: var(--color-alpha-contrast); --text-di-icon-default: var(--color-alpha-contrast-50); --text-di-icon-active: var(--color-alpha-contrast); --button-primary-bg-default: linear-gradient(180deg, #fce89a, #e6a123); --button-primary-bg-hover: linear-gradient(13deg, #fce89a 9.93%, #e6a123 90.99%); --button-primary-border-default: var(--color-alpha-contrast-10); --button-primary-border-hover: var(--color-alpha-contrast-10); --button-primary-text-default: var(--color-neutral-1000); --button-primary-text-active: var(--color-neutral-1000); --button-primary-icon-default: var(--color-neutral-1000); --button-primary-icon-active: var(--color-neutral-1000); --button-secondary-bg-default: var(--color-neutral-500); --button-secondary-bg-active: var(--color-neutral-300); --button-secondary-border-default: var(--color-neutral-300); --button-secondary-border-active: var(--color-alpha-contrast-10); --button-secondary-text-default: var(--color-alpha-contrast); --button-secondary-text-active: var(--color-alpha-contrast); --button-secondary-icon-default: var(--color-alpha-contrast-50); --button-secondary-icon-active: var(--color-alpha-contrast); --button-extra-bg-default: linear-gradient(153deg, #4234ff 4.38%, #7e72ff 81.13%); --button-extra-bg-hover: linear-gradient(153deg, #4234ff 4.38%, #7e72ff 81.13%); --button-extra-border-default: var(--color-alpha-contrast-10); --button-extra-border-hover: linear-gradient(138deg, hsla(0, 0%, 100%, 0) 29.23%, hsla(0, 0%, 100%, .3) 71.35%); --button-extra-text-default: var(--color-neutral-1000); --button-extra-text-active: var(--color-neutral-1000); --button-extra-icon-default: var(--color-neutral-1000); --button-extra-icon-active: var(--color-neutral-1000); --bg-button-extra2-bg-default: var(--button-extra2-bg-default); --bg-button-extra2-bg-active: var(--button-extra2-bg-active); --text-button-extra2-text-default: var(--button-extra2-text-default); --text-button-extra2-text-active: var(--button-extra2-text-active); --border-button-extra2-border-default: var(--button-extra2-border-default); --border-button-extra2-border-active: var(--button-extra2-border-active); --bg-button-blurred-bg-default: var(--button-blurred-bg-default); --bg-button-blurred-bg-active: var(--button-blurred-bg-active); --text-button-blurred-text-default: var(--button-blurred-text-default); --text-button-blurred-text-active: var(--button-blurred-text-active); --border-button-blurred-border-default: var(--button-blurred-border-default); --border-button-blurred-border-active: var(--button-blurred-border-active); --border-button-play-border-default: var(--button-play-border-default); --bg-button-play-bg-hover: var(--button-play-bg-hover); --text-primary: var(--text-primary); --text-secondary: var(--text-secondary); --text-contrast: var(--text-contrast); --text-dark: var(--text-dark); --text-green-600: var(--text-green-600); --text-green-700: var(--color-green-700); --text-blue-400: var(--text-blue-400); --text-pink-400: var(--text-pink-400); --text-yellow-300: var(--text-yellow-300); --text-error: var(--text-error); --text-warning: var(--text-warning); --text-success: var(--text-success); --text-extra: var(--text-extra); --icon-basic-white-contrast: var(--icon-basic-white-contrast); --icon-basic-white: var(--icon-basic-white); --icon-basic-white-50: var(--icon-basic-white-50); --icon-basic-white-25: var(--icon-basic-white-25); --icon-basic-100: var(--icon-basic-100); --icon-basic-100-50: var(--icon-basic-100-50); --icon-dark: var(--icon-dark); --icon-blue-500: var(--icon-blue-500); --icon-blue-400: var(--icon-blue-400); --icon-yellow-700: var(--icon-yellow-700); --icon-yellow-400: var(--icon-yellow-400); --icon-yellow-300: var(--icon-yellow-300); --icon-pink-400: var(--icon-pink-400); --icon-green-700: var(--icon-green-700); --icon-dark-800: var(--icon-dark-800); --icon-dark-500: var(--icon-dark-500); --icon-error: var(--icon-error); --icon-warning: var(--icon-warning); --icon-success: var(--icon-success); --icon-extra: var(--icon-extra); --bg-step-back: var(--step-back); --bg-step-progress: var(--step-progress); --bg-game-hover: var(--game-hover); --bg-label-top: var(--label-top); --bg-label-new: var(--label-new); --bg-label-crypto: var(--label-crypto); --bg-card-bronze: var(--card-bronze); --bg-card-silver: var(--card-silver); --bg-card-gold: var(--card-gold); --bg-card-platinum: var(--card-platinum); --bg-card-rubin: var(--card-rubin); --bg-card-description: var(--card-description); --bg-card-current-rank-card: var(--card-current-rank-card); --bg-funds-modal-background: var(--funds-modal-background); --border-funds-modal-border: var(--funds-modal-border); --text-funds-text-and-icons: var(--funds-text-and-icons); --text-funds-input-text-and-icons-accent: var(--funds-input-text-and-icons-accent); --bg-funds-input-background: var(--funds-input-background); --border-funds-input-border: var(--funds-input-border); --text-funds-input-text-and-icons: var(--funds-input-text-and-icons); --bg-funds-bonus-background: var(--funds-bonus-background); --border-funds-bonus-border: var(--funds-bonus-border); --text-funds-bonus-text-and-icons: var(--funds-bonus-text-and-icons); --bg-notification-background: var(--notification-background); --border-notification-border: var(--notification-border); --text-notification-text-and-icons: var(--notification-text-and-icons); --bg-gradient-1: linear-gradient(98deg, #f153ff -1.36%, #6948fe 102.7%); --bg-gradient-2: linear-gradient(180deg, #f4e38b -24.36%, #f4dd62 23.01%, #b27f2a); --bg-gradient-3: linear-gradient(153deg, #58cdff 4.38%, #2756fe 81.13%); --bg-gradient-4: linear-gradient(153deg, #199258 4.38%, #03c14f 81.13%); --bg-gradient-5: linear-gradient(138.65deg, #f4e38b 1.08%, #f4dd62 39.55%, #b27f2a 96.23%); --bg-gradient-service-page: radial-gradient(67.63% 97.68% at 50% 0, #2c324a 0, #000712 64.25%, #00040b 87.18%, #000209 100%); --bg-gradient-loader: radial-gradient(67.63% 97.68% at 50% 0, #2c324a 0, #000712 64.25%, #00040b 87.18%, #000209 100%); } :root { --card: var(--color-card); --card-foreground: var(--color-card-foreground); --popover: var(--color-popover); --popover-foreground: var(--color-popover-foreground); --primary: var(--color-light-primary); --primary-foreground: var(--button-default-text); --secondary: var(--color-light-secondary); --secondary-foreground: var(--button-secondary-text); --muted: var(--color-light-muted); --muted-foreground: var(--button-flat-text-light); --accent: var(--color-accent); --accent-foreground: var(--button-default-text); --destructive: var(--input-border-error); --destructive-foreground: var(--button-default-text); --input: var(--color-light-input); --ring: var(--input-focus-ring-light); --radius: var(--radius-card); } *, :focus, :focus-visible { outline: none !important; outline-offset: 0 !important; } button:focus-visible { box-shadow: none !important; outline: none !important; outline-offset: 0 !important; } input:focus-visible { box-shadow: none !important; outline: none !important; outline-offset: 0 !important; } select:focus-visible { box-shadow: none !important; outline: none !important; outline-offset: 0 !important; } textarea:focus-visible { box-shadow: none !important; outline: none !important; outline-offset: 0 !important; } button:focus, input:focus, select:focus, textarea:focus { box-shadow: none !important; outline: none !important; outline-offset: 0 !important; } a:focus, button:focus, input:focus, select:focus, textarea:focus { box-shadow: none !important; } .dark { --background: var(--color-dark-background); --foreground: var(--color-dark-foreground); --card: var(--color-dark-modal-background); --card-foreground: var(--color-dark-modal-foreground); --popover: var(--color-dark-modal-background); --popover-foreground: var(--color-dark-modal-foreground); --primary: var(--color-dark-primary); --primary-foreground: var(--button-default-text); --secondary: var(--color-dark-secondary); --secondary-foreground: var(--button-default-text); --muted: var(--color-dark-muted); --muted-foreground: var(--button-flat-text-dark); --accent: var(--color-dark-secondary); --accent-foreground: var(--button-default-text); --destructive: var(--input-border-error); --destructive-foreground: var(--button-default-text); --input: var(--color-dark-input); --ring: var(--input-focus-ring-dark); --radius: var(--radius-card); } body { font-feature-settings: "rlig" 1, "calt" 1; } .\!container { margin-left: auto !important; margin-right: auto !important; padding-left: 2rem !important; padding-right: 2rem !important; width: 100% !important; } .container { margin-left: auto; margin-right: auto; padding-left: 2rem; padding-right: 2rem; width: 100%; } @media (min-width: 1400px) { .\!container { max-width: 1400px !important; } .container { max-width: 1400px; } } .html-content { word-break: break-word; } .html-content a { -webkit-text-decoration: underline; text-decoration: underline; } .html-content a:hover { -webkit-text-decoration: none; text-decoration: none; } .html-content :where(ol, ul) { list-style: disc none outside; list-style: initial; list-style-position: outside; margin: .6em 0; padding-left: 1.25em; } .html-content ol { list-style: decimal; } .html-content ul { list-style: circle; } .html-content li { margin: .2em 0; } .html-content li>:where(ol, ul) { margin-bottom: .3em; margin-top: .3em; } .html-content table { border-collapse: collapse; border-color: var(--color-neutral-200); width: 100%; } .html-content table td, .html-content table th { border: 1px solid var(--color-neutral-200); } .html-content blockquote { display: inline-block; padding: 0 8px; position: relative; } .html-content blockquote:after, .html-content blockquote:before { position: absolute; top: 0; } .html-content blockquote:before { content: "\201c"; left: 0; } .html-content blockquote:after { content: "\201d"; right: 0; } .sr-only { height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; clip: rect(0, 0, 0, 0); border-width: 0; white-space: nowrap; } .pointer-events-none { pointer-events: none; } .\!visible { visibility: visible !important; } .visible { visibility: visible; } .invisible { visibility: hidden; } .\!static { position: static !important; } .static { position: static; } .fixed { position: fixed; } .\!absolute { position: absolute !important; } .absolute { position: absolute; } .relative { position: relative; } .sticky { position: sticky; } .inset-0 { bottom: 0; top: 0; } .inset-0, .inset-x-0 { left: 0; right: 0; } .inset-y-0 { bottom: 0; top: 0; } .-bottom-8 { bottom: -2rem; } .-left-4 { left: -1rem; } .-left-8 { left: -2rem; } .-left-px { left: -1px; } .-right-8 { right: -2rem; } .-right-px { right: -1px; } .-top-3 { top: -.75rem; } .-top-8 { top: -2rem; } .bottom-0 { bottom: 0; } .bottom-16 { bottom: 4rem; } .bottom-3 { bottom: .75rem; } .bottom-5 { bottom: 1.25rem; } .bottom-6 { bottom: 1.5rem; } .bottom-\[16px\] { bottom: 16px; } .bottom-\[50px\] { bottom: 50px; } .bottom-\[60px\] { bottom: 60px; } .bottom-\[72px\] { bottom: 72px; } .left-0 { left: 0; } .left-1\/2 { left: 50%; } .left-10 { left: 2.5rem; } .left-2 { left: .5rem; } .left-2\/4 { left: 50%; } .left-3 { left: .75rem; } .left-4 { left: 1rem; } .left-5 { left: 1.25rem; } .left-6 { left: 1.5rem; } .left-\[var\(--gamecard-label-left\)\] { left: .5rem; left: var(--gamecard-label-left); } .right-0 { right: 0; } .right-2 { right: .5rem; } .right-3 { right: .75rem; } .right-4 { right: 1rem; } .right-5 { right: 1.25rem; } .right-\[20\%\] { right: 20%; } .right-\[unset\] { right: auto; } .top-0 { top: 0; } .top-1 { top: .25rem; } .top-1\/2 { top: 50%; } .top-2 { top: .5rem; } .top-2\/4 { top: 50%; } .top-3 { top: .75rem; } .top-4 { top: 1rem; } .top-\[120px\] { top: 120px; } .top-\[15\%\] { top: 15%; } .top-\[64px\] { top: 64px; } .top-\[unset\] { top: auto; } .top-\[var\(--gamecard-label-top\)\] { top: .5rem; top: var(--gamecard-label-top); } .top-full { top: 100%; } .top-px { top: 1px; } .isolate { isolation: isolate; } .z-0 { z-index: 0; } .z-10 { z-index: 10; } .z-20 { z-index: 20; } .z-30 { z-index: 30; } .z-40 { z-index: 40; } .z-50 { z-index: 50; } .z-\[-1\] { z-index: -1; } .z-\[1000\] { z-index: 1000; } .z-\[100\] { z-index: 100; } .z-\[1\] { z-index: 1; } .z-\[45\] { z-index: 45; } .z-\[49\] { z-index: 49; } .z-\[9999\] { z-index: 9999; } .z-\[9\] { z-index: 9; } .z-\[calc\(1000\+1\)\] { z-index: 1001; } .z-\[calc\(var\(--modal-z-index\)\+1\)\] { z-index: 51; z-index: calc(var(--modal-z-index) + 1); } .order-1 { order: 1; } .col-start-2 { grid-column-start: 2; } .\!m-0 { margin: 0 !important; } .-m-4 { margin: -1rem; } .m-0 { margin: 0; } .m-2 { margin: .5rem; } .m-6 { margin: 1.5rem; } .m-auto { margin: auto; } .-mx-3\.5 { margin-left: -.875rem; margin-right: -.875rem; } .-mx-4 { margin-left: -1rem; margin-right: -1rem; } .-mx-6 { margin-left: -1.5rem; margin-right: -1.5rem; } .-mx-7 { margin-left: -1.75rem; margin-right: -1.75rem; } .mx-1 { margin-left: .25rem; margin-right: .25rem; } .mx-1\.5 { margin-left: .375rem; margin-right: .375rem; } .mx-2 { margin-left: .5rem; margin-right: .5rem; } .mx-3\.5 { margin-left: .875rem; margin-right: .875rem; } .mx-4 { margin-left: 1rem; margin-right: 1rem; } .mx-6 { margin-left: 1.5rem; margin-right: 1.5rem; } .mx-\[10px\] { margin-left: 10px; margin-right: 10px; } .mx-\[14px\] { margin-left: 14px; margin-right: 14px; } .mx-\[16px\] { margin-left: 16px; margin-right: 16px; } .mx-auto { margin-left: auto; margin-right: auto; } .my-0 { margin-bottom: 0; margin-top: 0; } .my-1 { margin-bottom: .25rem; margin-top: .25rem; } .my-2 { margin-bottom: .5rem; margin-top: .5rem; } .my-3 { margin-bottom: .75rem; margin-top: .75rem; } .my-4 { margin-bottom: 1rem; margin-top: 1rem; } .my-5 { margin-bottom: 1.25rem; margin-top: 1.25rem; } .my-6 { margin-bottom: 1.5rem; margin-top: 1.5rem; } .my-8 { margin-bottom: 2rem; margin-top: 2rem; } .my-auto { margin-bottom: auto; margin-top: auto; } .-mb-2 { margin-bottom: -.5rem; } .-ml-0 { margin-left: 0; } .-ml-4 { margin-left: -1rem; } .-ml-5 { margin-left: -1.25rem; } .-mr-6 { margin-right: -1.5rem; } .-mt-2 { margin-top: -.5rem; } .-mt-4 { margin-top: -1rem; } .-mt-6 { margin-top: -1.5rem; } .mb-0 { margin-bottom: 0; } .mb-0\.5 { margin-bottom: .125rem; } .mb-1 { margin-bottom: .25rem; } .mb-1\.5 { margin-bottom: .375rem; } .mb-10 { margin-bottom: 2.5rem; } .mb-2 { margin-bottom: .5rem; } .mb-2\.5 { margin-bottom: .625rem; } .mb-3 { margin-bottom: .75rem; } .mb-4 { margin-bottom: 1rem; } .mb-5 { margin-bottom: 1.25rem; } .mb-6 { margin-bottom: 1.5rem; } .mb-8 { margin-bottom: 2rem; } .mb-\[10px\] { margin-bottom: 10px; } .mb-\[16px\] { margin-bottom: 16px; } .mb-\[24px\] { margin-bottom: 24px; } .mb-\[60px\] { margin-bottom: 60px; } .mb-\[88px\] { margin-bottom: 88px; } .mb-\[var\(--navigation-tabs-margin-bottom\)\] { margin-bottom: 1rem; margin-bottom: var(--navigation-tabs-margin-bottom); } .ml-0 { margin-left: 0; } .ml-0\.5 { margin-left: .125rem; } .ml-1 { margin-left: .25rem; } .ml-2 { margin-left: .5rem; } .ml-2\.5 { margin-left: .625rem; } .ml-3 { margin-left: .75rem; } .ml-4 { margin-left: 1rem; } .ml-6 { margin-left: 1.5rem; } .ml-\[-14px\] { margin-left: -14px; } .ml-\[10px\] { margin-left: 10px; } .ml-\[12px\] { margin-left: 12px; } .ml-\[3\.75rem\] { margin-left: 3.75rem; } .ml-auto { margin-left: auto; } .mr-0 { margin-right: 0; } .mr-1 { margin-right: .25rem; } .mr-1\.5 { margin-right: .375rem; } .mr-14 { margin-right: 3.5rem; } .mr-2 { margin-right: .5rem; } .mr-2\.5 { margin-right: .625rem; } .mr-3 { margin-right: .75rem; } .mr-4 { margin-right: 1rem; } .mr-5 { margin-right: 1.25rem; } .mr-\[-24px\] { margin-right: -24px; } .mr-\[10px\] { margin-right: 10px; } .mr-\[16px\] { margin-right: 16px; } .mt-0 { margin-top: 0; } .mt-0\.5 { margin-top: .125rem; } .mt-1 { margin-top: .25rem; } .mt-1\.5 { margin-top: .375rem; } .mt-12 { margin-top: 3rem; } .mt-2 { margin-top: .5rem; } .mt-2\.5 { margin-top: .625rem; } .mt-3 { margin-top: .75rem; } .mt-4 { margin-top: 1rem; } .mt-5 { margin-top: 1.25rem; } .mt-6 { margin-top: 1.5rem; } .mt-8 { margin-top: 2rem; } .mt-\[30px\] { margin-top: 30px; } .mt-\[40px\] { margin-top: 40px; } .mt-\[50px\] { margin-top: 50px; } .mt-\[60px\] { margin-top: 60px; } .mt-\[var\(--navigation-tabs-margin-top\)\] { margin-top: 1rem; margin-top: var(--navigation-tabs-margin-top); } .mt-auto { margin-top: auto; } .box-border { box-sizing: border-box; } .line-clamp-1 { -webkit-line-clamp: 1; } .line-clamp-1, .line-clamp-2 { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; } .line-clamp-2 { -webkit-line-clamp: 2; } .block { display: block; } .inline-block { display: inline-block; } .flex { display: flex; } .inline-flex { display: inline-flex; } .table { display: table; } .grid { display: grid; } .hidden { display: none; } .aspect-\[13\/10\] { aspect-ratio: 13/10; } .aspect-\[3\/4\] { aspect-ratio: 3/4; } .aspect-square { aspect-ratio: 1/1; } .aspect-video { aspect-ratio: 16/9; } .size-0 { height: 0; width: 0; } .size-1 { height: .25rem; width: .25rem; } .size-1\.5 { height: .375rem; width: .375rem; } .size-10 { height: 2.5rem; width: 2.5rem; } .size-11 { height: 2.75rem; width: 2.75rem; } .size-12 { height: 3rem; width: 3rem; } .size-14 { height: 3.5rem; width: 3.5rem; } .size-2 { height: .5rem; width: .5rem; } .size-20 { height: 5rem; width: 5rem; } .size-3 { height: .75rem; width: .75rem; } .size-3\.5 { height: .875rem; width: .875rem; } .size-4 { height: 1rem; width: 1rem; } .size-5 { height: 1.25rem; width: 1.25rem; } .size-6 { height: 1.5rem; width: 1.5rem; } .size-7 { height: 1.75rem; width: 1.75rem; } .size-8 { height: 2rem; width: 2rem; } .size-9 { height: 2.25rem; width: 2.25rem; } .size-\[1\.125rem\] { height: 1.125rem; width: 1.125rem; } .size-\[100px\] { height: 100px; width: 100px; } .size-\[140px\] { height: 140px; width: 140px; } .size-\[14px\] { height: 14px; width: 14px; } .size-\[16px\] { height: 16px; width: 16px; } .size-\[18px\] { height: 18px; width: 18px; } .size-\[200px\] { height: 200px; width: 200px; } .size-\[20px\] { height: 20px; width: 20px; } .size-\[24px\] { height: 24px; width: 24px; } .size-\[28px\] { height: 28px; width: 28px; } .size-\[30px\] { height: 30px; width: 30px; } .size-\[34px\] { height: 34px; width: 34px; } .size-\[36px\] { height: 36px; width: 36px; } .size-\[42px\] { height: 42px; width: 42px; } .size-\[44px\] { height: 44px; width: 44px; } .size-\[46px\] { height: 46px; width: 46px; } .size-\[50px\] { height: 50px; width: 50px; } .size-\[52px\] { height: 52px; width: 52px; } .size-\[76px\] { height: 76px; width: 76px; } .size-\[82px\] { height: 82px; width: 82px; } .size-\[94px\] { height: 94px; width: 94px; } .size-\[96px\] { height: 96px; width: 96px; } .size-\[var\(--theme-switcher-btn-icon-size\)\] { height: 1rem; height: var(--theme-switcher-btn-icon-size); width: 1rem; width: var(--theme-switcher-btn-icon-size); } .size-full { height: 100%; width: 100%; } .\!h-full { height: 100% !important; } .h-0 { height: 0; } .h-1 { height: .25rem; } .h-1\.5 { height: .375rem; } .h-1\/2 { height: 50%; } .h-10 { height: 2.5rem; } .h-11 { height: 2.75rem; } .h-12 { height: 3rem; } .h-14 { height: 3.5rem; } .h-2 { height: .5rem; } .h-2\.5 { height: .625rem; } .h-3 { height: .75rem; } .h-4 { height: 1rem; } .h-5 { height: 1.25rem; } .h-6 { height: 1.5rem; } .h-7 { height: 1.75rem; } .h-8 { height: 2rem; } .h-9 { height: 2.25rem; } .h-\[100vh\] { height: 100vh; } .h-\[108px\] { height: 108px; } .h-\[111px\] { height: 111px; } .h-\[128px\] { height: 128px; } .h-\[132px\] { height: 132px; } .h-\[135px\] { height: 135px; } .h-\[140px\] { height: 140px; } .h-\[141px\] { height: 141px; } .h-\[156px\] { height: 156px; } .h-\[158px\] { height: 158px; } .h-\[164px\] { height: 164px; } .h-\[172px\] { height: 172px; } .h-\[178px\] { height: 178px; } .h-\[18px\] { height: 18px; } .h-\[218px\] { height: 218px; } .h-\[222px\] { height: 222px; } .h-\[22px\] { height: 22px; } .h-\[232px\] { height: 232px; } .h-\[234px\] { height: 234px; } .h-\[246px\] { height: 246px; } .h-\[24px\] { height: 24px; } .h-\[274px\] { height: 274px; } .h-\[300px\] { height: 300px; } .h-\[30px\] { height: 30px; } .h-\[320px\] { height: 320px; } .h-\[32px\] { height: 32px; } .h-\[330px\] { height: 330px; } .h-\[36px\] { height: 36px; } .h-\[38px\] { height: 38px; } .h-\[42px\] { height: 42px; } .h-\[430px\] { height: 430px; } .h-\[44px\] { height: 44px; } .h-\[46px\] { height: 46px; } .h-\[504px\] { height: 504px; } .h-\[50px\] { height: 50px; } .h-\[51px\] { height: 51px; } .h-\[54px\] { height: 54px; } .h-\[55px\] { height: 55px; } .h-\[60px\] { height: 60px; } .h-\[62px\] { height: 62px; } .h-\[633px\] { height: 633px; } .h-\[64px\] { height: 64px; } .h-\[6px\] { height: 6px; } .h-\[700px\] { height: 700px; } .h-\[70px\] { height: 70px; } .h-\[74px\] { height: 74px; } .h-\[84px\] { height: 84px; } .h-\[calc\(100\%-64px\)\] { height: calc(100% - 64px); } .h-\[min\(13vw\,94px\)\] { height: min(13vw, 94px); } .h-auto { height: auto; } .h-dvh { height: 100dvh; } .h-full { height: 100%; } .h-max { height: -moz-max-content; height: max-content; } .h-px { height: 1px; } .h-screen { height: 100vh; } .max-h-16 { max-height: 4rem; } .max-h-\[1\.125rem\] { max-height: 1.125rem; } .max-h-\[300px\] { max-height: 300px; } .max-h-\[55vh\] { max-height: 55vh; } .max-h-\[60px\] { max-height: 60px; } .max-h-\[calc\(100dvh-184px\)\] { max-height: calc(100dvh - 184px); } .max-h-\[calc\(100vh-32px\)\] { max-height: calc(100vh - 32px); } .max-h-\[max\(200px\,calc\(100dvh-184px\)\)\] { max-height: max(200px, calc(100dvh - 184px)); } .max-h-full { max-height: 100%; } .max-h-none { max-height: none; } .min-h-0 { min-height: 0; } .min-h-12 { min-height: 3rem; } .min-h-\[110px\] { min-height: 110px; } .min-h-\[119px\] { min-height: 119px; } .min-h-\[164px\] { min-height: 164px; } .min-h-\[200px\] { min-height: 200px; } .min-h-\[274px\] { min-height: 274px; } .min-h-\[330px\] { min-height: 330px; } .min-h-\[358px\] { min-height: 358px; } .min-h-\[400px\] { min-height: 400px; } .min-h-\[42px\] { min-height: 42px; } .min-h-\[45px\] { min-height: 45px; } .min-h-\[50px\] { min-height: 50px; } .min-h-\[50vh\] { min-height: 50vh; } .min-h-\[60px\] { min-height: 60px; } .min-h-\[60vh\] { min-height: 60vh; } .min-h-\[calc\(100dvh-50px\)\] { min-height: calc(100dvh - 50px); } .min-h-\[calc\(100vh-180px\)\] { min-height: calc(100vh - 180px); } .min-h-\[calc\(100vh-200px\)\] { min-height: calc(100vh - 200px); } .min-h-\[calc\(100vh-4rem\)\] { min-height: calc(100vh - 4rem); } .min-h-\[var\(--route-wrapper-status-page-min-height\)\] { min-height: calc(100dvh - 200px); min-height: var(--route-wrapper-status-page-min-height); } .min-h-dvh { min-height: 100dvh; } .min-h-full { min-height: 100%; } .min-h-screen { min-height: 100vh; } .w-0\.5 { width: .125rem; } .w-1 { width: .25rem; } .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: .625rem; } .w-2\/5 { width: 40%; } .w-2\/6 { width: 33.333333%; } .w-20 { width: 5rem; } .w-24 { width: 6rem; } .w-28 { width: 7rem; } .w-3\/4 { width: 75%; } .w-3\/5 { width: 60%; } .w-32 { width: 8rem; } .w-36 { width: 9rem; } .w-4 { width: 1rem; } .w-40 { width: 10rem; } .w-48 { width: 12rem; } .w-5 { width: 1.25rem; } .w-6 { width: 1.5rem; } .w-64 { width: 16rem; } .w-8 { width: 2rem; } .w-9 { width: 2.25rem; } .w-\[100px\] { width: 100px; } .w-\[112px\] { width: 112px; } .w-\[114px\] { width: 114px; } .w-\[120px\] { width: 120px; } .w-\[121px\] { width: 121px; } .w-\[128px\] { width: 128px; } .w-\[131px\] { width: 131px; } .w-\[140px\] { width: 140px; } .w-\[150px\] { width: 150px; } .w-\[160px\] { width: 160px; } .w-\[180px\] { width: 180px; } .w-\[200px\] { width: 200px; } .w-\[202px\] { width: 202px; } .w-\[210px\] { width: 210px; } .w-\[230px\] { width: 230px; } .w-\[268px\] { width: 268px; } .w-\[290px\] { width: 290px; } .w-\[296px\] { width: 296px; } .w-\[300px\] { width: 300px; } .w-\[312px\] { width: 312px; } .w-\[324px\] { width: 324px; } .w-\[330px\] { width: 330px; } .w-\[340px\] { width: 340px; } .w-\[36px\] { width: 36px; } .w-\[46px\] { width: 46px; } .w-\[48px\] { width: 48px; } .w-\[60px\] { width: 60px; } .w-\[62px\] { width: 62px; } .w-\[70px\] { width: 70px; } .w-\[80px\] { width: 80px; } .w-\[88px\] { width: 88px; } .w-\[90\%\] { width: 90%; } .w-\[96px\] { width: 96px; } .w-\[98px\] { width: 98px; } .w-\[calc\(100\%\+1rem\)\] { width: calc(100% + 1rem); } .w-\[calc\(100\%\+3rem\)\] { width: calc(100% + 3rem); } .w-\[calc\(100\%-1\.5rem\)\] { width: calc(100% - 1.5rem); } .w-\[calc\(100\%-32px\)\] { width: calc(100% - 32px); } .w-\[calc\(50\%-0\.5rem\)\] { width: calc(50% - .5rem); } .w-\[calc\(50\%-8px\)\] { width: calc(50% - 8px); } .w-\[var\(--radix-select-trigger-width\)\] { width: var(--radix-select-trigger-width); } .w-auto { width: auto; } .w-fit { width: -moz-fit-content; width: fit-content; } .w-full { width: 100%; } .w-max { width: -moz-max-content; width: max-content; } .w-screen { width: 100vw; } .min-w-0 { min-width: 0; } .min-w-8 { min-width: 2rem; } .min-w-9 { min-width: 2.25rem; } .min-w-\[109px\] { min-width: 109px; } .min-w-\[120px\] { min-width: 120px; } .min-w-\[150px\] { min-width: 150px; } .min-w-\[161px\] { min-width: 161px; } .min-w-\[188px\] { min-width: 188px; } .min-w-\[200px\] { min-width: 200px; } .min-w-\[24px\] { min-width: 24px; } .min-w-\[280px\] { min-width: 280px; } .min-w-\[30px\] { min-width: 30px; } .min-w-\[94px\] { min-width: 94px; } .min-w-fit { min-width: -moz-fit-content; min-width: fit-content; } .min-w-full { min-width: 100%; } .max-w-0 { max-width: 0; } .max-w-12 { max-width: 3rem; } .max-w-4xl { max-width: 56rem; } .max-w-\[1\.125rem\] { max-width: 1.125rem; } .max-w-\[120px\] { max-width: 120px; } .max-w-\[1358px\] { max-width: 1358px; } .max-w-\[1400px\] { max-width: 1400px; } .max-w-\[140px\] { max-width: 140px; } .max-w-\[1432px\] { max-width: 1432px; } .max-w-\[156px\] { max-width: 156px; } .max-w-\[190px\] { max-width: 190px; } .max-w-\[200px\] { max-width: 200px; } .max-w-\[250px\] { max-width: 250px; } .max-w-\[260px\] { max-width: 260px; } .max-w-\[300px\] { max-width: 300px; } .max-w-\[440px\] { max-width: 440px; } .max-w-\[50\%\] { max-width: 50%; } .max-w-\[600px\] { max-width: 600px; } .max-w-\[650px\] { max-width: 650px; } .max-w-\[700px\] { max-width: 700px; } .max-w-\[70px\] { max-width: 70px; } .max-w-\[720px\] { max-width: 720px; } .max-w-\[85\%\] { max-width: 85%; } .max-w-\[900px\] { max-width: 900px; } .max-w-\[90vw\] { max-width: 90vw; } .max-w-\[92px\] { max-width: 92px; } .max-w-\[942px\] { max-width: 942px; } .max-w-\[calc\(\(100\%-28px\)\/3\)\] { max-width: calc(33.33333% - 9.33333px); } .max-w-\[calc\(912px\+1rem\*2\)\] { max-width: calc(912px + 2rem); } .max-w-\[var\(--navigation-tabs-width\)\] { max-width: 240px; max-width: var(--navigation-tabs-width); } .max-w-fit { max-width: -moz-fit-content; max-width: fit-content; } .max-w-full { max-width: 100%; } .max-w-md { max-width: 28rem; } .max-w-none { max-width: none; } .max-w-sm { max-width: 24rem; } .flex-1 { flex: 1 1 0%; } .flex-shrink-0, .shrink-0 { flex-shrink: 0; } .flex-grow { flex-grow: 1; } .flex-grow-0 { flex-grow: 0; } .grow { flex-grow: 1; } .grow-0 { flex-grow: 0; } .basis-1\/2 { flex-basis: 50%; } .basis-1\/3 { flex-basis: 33.333333%; } .basis-1\/4 { flex-basis: 25%; } .basis-1\/5 { flex-basis: 20%; } .basis-1\/6 { flex-basis: 16.666667%; } .basis-\[295px\] { flex-basis: 295px; } .basis-\[calc\(\(100\%-28px\)\/3\)\] { flex-basis: calc(33.33333% - 9.33333px); } .basis-auto { flex-basis: auto; } .basis-full { flex-basis: 100%; } .origin-bottom { transform-origin: bottom; } .-translate-x-1\/2 { --tw-translate-x: -50%; transform: translate(-50%, var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .-translate-x-full { --tw-translate-x: -100%; transform: translate(-100%, var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(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), -50%) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .translate-x-0\.5 { --tw-translate-x: .125rem; transform: translate(.125rem, var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .translate-x-5 { --tw-translate-x: 1.25rem; transform: translate(1.25rem, var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .translate-y-\[calc\(-100\%\+0px\)\] { --tw-translate-y: -100%; transform: translate(var(--tw-translate-x), -100%) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .translate-y-\[calc\(-100\%\+12px\)\] { --tw-translate-y: calc(-100% + 12px); transform: translate(var(--tw-translate-x), calc(-100% + 12px)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .translate-y-\[calc\(-100\%-1px\)\] { --tw-translate-y: calc(-100% - 1px); transform: translate(var(--tw-translate-x), calc(-100% - 1px)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .translate-y-\[calc\(16px\/2-50\%\)\] { --tw-translate-y: calc(8px - 50%); transform: translate(var(--tw-translate-x), calc(8px - 50%)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .-rotate-90 { --tw-rotate: -90deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(-90deg) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .rotate-180 { --tw-rotate: 180deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(180deg) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .rotate-90 { --tw-rotate: 90deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(90deg) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .scale-0 { --tw-scale-x: 0; --tw-scale-y: 0; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(0) scaleY(0); transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .scale-100 { --tw-scale-x: 1; --tw-scale-y: 1; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(1) scaleY(1); transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .scale-95 { --tw-scale-x: .95; --tw-scale-y: .95; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(.95) scaleY(.95); } .scale-95, .transform { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } @keyframes pulse-ring { 0% { opacity: .6; transform: scale(1); } to { opacity: 0; transform: scale(2); } } .animate-pulse-ring { animation: pulse-ring 1.5s ease-out infinite; } @keyframes shimmer { to { transform: translate(100%); } } .animate-shimmer { animation: shimmer 1.5s infinite; } @keyframes spin { to { transform: rotate(1turn); } } .animate-spin { animation: spin 1s linear infinite; } .cursor-default { cursor: default; } .cursor-not-allowed { cursor: not-allowed; } .cursor-pointer { cursor: pointer; } .touch-none { touch-action: none; } .touch-pan-x { --tw-pan-x: pan-x; touch-action: pan-x var(--tw-pan-y) var(--tw-pinch-zoom); touch-action: var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom); } .touch-pan-y { --tw-pan-y: pan-y; touch-action: var(--tw-pan-x) pan-y var(--tw-pinch-zoom); touch-action: var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom); } .touch-manipulation { touch-action: manipulation; } .select-none { -webkit-user-select: none; -moz-user-select: none; user-select: none; } .resize { resize: both; } .snap-x { scroll-snap-type: x var(--tw-scroll-snap-strictness); } .snap-mandatory { --tw-scroll-snap-strictness: mandatory; } .snap-center { scroll-snap-align: center; } .appearance-none { -webkit-appearance: none; -moz-appearance: none; appearance: none; } .auto-cols-max { grid-auto-columns: max-content; } .grid-flow-col { grid-auto-flow: column; } .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)); } .grid-cols-\[1fr_auto\] { grid-template-columns: 1fr auto; } .grid-cols-\[25px_auto\] { grid-template-columns: 25px auto; } .grid-cols-\[2\] { grid-template-columns: 2; } .grid-cols-\[2fr_1fr\] { grid-template-columns: 2fr 1fr; } .grid-cols-\[auto_1fr\] { grid-template-columns: auto 1fr; } .grid-rows-\[1fr_60px\] { grid-template-rows: 1fr 60px; } .flex-row { flex-direction: row; } .flex-row-reverse { flex-direction: row-reverse; } .flex-col { flex-direction: column; } .flex-col-reverse { flex-direction: column-reverse; } .flex-wrap { flex-wrap: wrap; } .flex-nowrap { flex-wrap: nowrap; } .place-items-center { align-items: center; justify-items: center; place-items: center; } .content-start { align-content: flex-start; } .items-start { align-items: flex-start; } .items-end { align-items: flex-end; } .items-center { align-items: center; } .items-baseline { align-items: baseline; } .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; } .justify-around { justify-content: space-around; } .justify-items-center { justify-items: center; } .gap-0 { gap: 0; } .gap-0\.5 { gap: .125rem; } .gap-1 { gap: .25rem; } .gap-1\.5 { gap: .375rem; } .gap-10 { gap: 2.5rem; } .gap-2 { gap: .5rem; } .gap-2\.5 { gap: .625rem; } .gap-3 { gap: .75rem; } .gap-3\.5 { gap: .875rem; } .gap-4 { gap: 1rem; } .gap-5 { gap: 1.25rem; } .gap-6 { gap: 1.5rem; } .gap-8 { gap: 2rem; } .gap-\[10px\] { gap: 10px; } .gap-\[13px\] { gap: 13px; } .gap-\[14px\] { gap: 14px; } .gap-\[16px\] { gap: 16px; } .gap-\[1rem\] { gap: 1rem; } .gap-\[24px\] { gap: 24px; } .gap-\[6px\] { gap: 6px; } .gap-\[var\(--theme-switcher-btn-gap\)\] { gap: .5rem; gap: var(--theme-switcher-btn-gap); } .gap-x-1 { -moz-column-gap: .25rem; column-gap: .25rem; } .gap-x-2 { -moz-column-gap: .5rem; column-gap: .5rem; } .gap-x-2\.5 { -moz-column-gap: .625rem; column-gap: .625rem; } .gap-x-3 { -moz-column-gap: .75rem; column-gap: .75rem; } .gap-x-4 { -moz-column-gap: 1rem; column-gap: 1rem; } .gap-y-1 { row-gap: .25rem; } .gap-y-4 { row-gap: 1rem; } .gap-y-5 { row-gap: 1.25rem; } .gap-y-6 { row-gap: 1.5rem; } .gap-y-\[14px\] { row-gap: 14px; } .space-x-3>:not([hidden])~:not([hidden]) { --tw-space-x-reverse: 0; margin-left: .75rem; margin-left: calc(.75rem*(1 - var(--tw-space-x-reverse))); margin-right: 0; margin-right: calc(.75rem*var(--tw-space-x-reverse)); } .space-x-4>:not([hidden])~:not([hidden]) { --tw-space-x-reverse: 0; margin-left: 1rem; margin-left: calc(1rem*(1 - var(--tw-space-x-reverse))); margin-right: 0; margin-right: calc(1rem*var(--tw-space-x-reverse)); } .space-y-2>:not([hidden])~:not([hidden]) { --tw-space-y-reverse: 0; margin-bottom: 0; margin-bottom: calc(.5rem*var(--tw-space-y-reverse)); margin-top: .5rem; margin-top: calc(.5rem*(1 - var(--tw-space-y-reverse))); } .space-y-3>:not([hidden])~:not([hidden]) { --tw-space-y-reverse: 0; margin-bottom: 0; margin-bottom: calc(.75rem*var(--tw-space-y-reverse)); margin-top: .75rem; margin-top: calc(.75rem*(1 - var(--tw-space-y-reverse))); } .space-y-4>:not([hidden])~:not([hidden]) { --tw-space-y-reverse: 0; margin-bottom: 0; margin-bottom: calc(1rem*var(--tw-space-y-reverse)); margin-top: 1rem; margin-top: calc(1rem*(1 - var(--tw-space-y-reverse))); } .self-start { align-self: flex-start; } .self-end { align-self: flex-end; } .self-stretch { align-self: stretch; } .overflow-auto { overflow: auto; } .overflow-hidden { overflow: hidden; } .overflow-visible { overflow: visible; } .overflow-x-auto { overflow-x: auto; } .overflow-y-auto { overflow-y: auto; } .overflow-x-hidden { overflow-x: hidden; } .overflow-y-hidden { overflow-y: hidden; } .overflow-x-visible { overflow-x: visible; } .overflow-y-visible { overflow-y: visible; } .overflow-x-scroll { overflow-x: scroll; } .overflow-y-scroll { overflow-y: scroll; } .overscroll-y-contain { overscroll-behavior-y: contain; } .truncate { overflow: hidden; text-overflow: ellipsis; } .truncate, .whitespace-nowrap { white-space: nowrap; } .text-nowrap { text-wrap: nowrap; } .break-words { word-wrap: break-word; } .break-all { word-break: break-all; } .\!rounded-2\.5xl { border-radius: 20px !important; } .rounded { border-radius: 4px; } .rounded-1\.5xl { border-radius: 14px; } .rounded-2\.5xl { border-radius: 20px; } .rounded-2xl { border-radius: 16px; } .rounded-3xl { border-radius: 24px; } .rounded-6xl { border-radius: 36px; } .rounded-7xl { border-radius: 40px; } .rounded-\[0\.375rem\] { border-radius: .375rem; } .rounded-\[0\.5rem\] { border-radius: .5rem; } .rounded-\[10px\] { border-radius: 10px; } .rounded-\[1rem\] { border-radius: 1rem; } .rounded-\[20px\] { border-radius: 20px; } .rounded-\[30px\] { border-radius: 30px; } .rounded-\[40px\] { border-radius: 40px; } .rounded-\[50\%\] { border-radius: 50%; } .rounded-\[8px\] { border-radius: 8px; } .rounded-\[inherit\] { border-radius: inherit; } .rounded-\[var\(--navigation-tabs-border-radius\)\] { border-radius: .5rem; border-radius: var(--navigation-tabs-border-radius); } .rounded-\[var\(--radius-card\)\] { border-radius: 8px; border-radius: var(--radius-card); } .rounded-full { border-radius: 9999px; } .rounded-lg { border-radius: 8px; } .rounded-md { border-radius: 6px; } .rounded-none { border-radius: 0; } .rounded-sm { border-radius: 4px; } .rounded-xl { border-radius: 12px; } .rounded-xs { border-radius: 2px; } .rounded-b-3xl { border-bottom-left-radius: 24px; border-bottom-right-radius: 24px; } .rounded-b-lg { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } .rounded-b-none { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .rounded-l-2\.5xl { border-bottom-left-radius: 20px; border-top-left-radius: 20px; } .rounded-l-\[30px\] { border-bottom-left-radius: 30px; border-top-left-radius: 30px; } .rounded-l-lg { border-bottom-left-radius: 8px; border-top-left-radius: 8px; } .rounded-l-xl { border-bottom-left-radius: 12px; border-top-left-radius: 12px; } .rounded-r-\[30px\] { border-bottom-right-radius: 30px; border-top-right-radius: 30px; } .rounded-r-none { border-bottom-right-radius: 0; border-top-right-radius: 0; } .rounded-t-2xl { border-top-left-radius: 16px; border-top-right-radius: 16px; } .rounded-t-\[162px\] { border-top-left-radius: 162px; border-top-right-radius: 162px; } .rounded-t-lg { border-top-left-radius: 8px; border-top-right-radius: 8px; } .rounded-br-none { border-bottom-right-radius: 0; } .rounded-tl-none { border-top-left-radius: 0; } .\!border-0 { border-width: 0 !important; } .border-0 { border-width: 0; } .border-2 { border-width: 2px; } .border-\[1px\] { border-width: 1px; } .border-x-0 { border-left-width: 0; border-right-width: 0; } .border-x-\[7px\] { border-left-width: 7px; border-right-width: 7px; } .\!border-t-0 { border-top-width: 0 !important; } .border-b { border-bottom-width: 1px; } .border-b-0 { border-bottom-width: 0; } .border-b-\[12px\] { border-bottom-width: 12px; } .border-b-\[6px\] { border-bottom-width: 6px; } .border-l { border-left-width: 1px; } .border-r { border-right-width: 1px; } .border-r-0 { border-right-width: 0; } .border-r-2 { border-right-width: 2px; } .border-r-\[16px\] { border-right-width: 16px; } .border-t { border-top-width: 1px; } .border-t-\[5px\] { border-top-width: 5px; } .border-solid { border-style: solid; } .border-none { border-style: none; } .border-\[\#00000000\] { border-color: transparent; } .border-\[\#d6dde7\] { --tw-border-opacity: 1; border-color: #d6dde7; border-color: rgba(214, 221, 231, var(--tw-border-opacity, 1)); } .border-\[rgba\(102\,126\,255\,0\.3\)\] { border-color: #667eff4d; } .border-\[var\(--navigation-tabs-light-border\)\] { border-color: #9ca3af; border-color: var(--navigation-tabs-light-border); } .border-\[var\(--theme-switcher-container-dark-border\)\] { border-color: #3f3f61; border-color: var(--theme-switcher-container-dark-border); } .border-\[white\/10\] { border-color: #fff/10; } .border-blue-500 { --tw-border-opacity: 1; border-color: #3b82f6; border-color: rgba(59, 130, 246, var(--tw-border-opacity, 1)); } .border-green-700 { --tw-border-opacity: 1; border-color: #15803d; border-color: rgba(21, 128, 61, var(--tw-border-opacity, 1)); } .border-transparent { border-color: transparent; } .border-yellow-300 { --tw-border-opacity: 1; border-color: #fde047; border-color: rgba(253, 224, 71, var(--tw-border-opacity, 1)); } .\!border-x-transparent { border-left-color: transparent !important; border-right-color: transparent !important; } .\!border-y-transparent { border-bottom-color: transparent !important; border-top-color: transparent !important; } .border-l-transparent { border-left-color: transparent; } .border-t-transparent { border-top-color: transparent; } .\!bg-transparent { background-color: transparent !important; } .bg-\[\#D00000\] { --tw-bg-opacity: 1; background-color: #d00000; background-color: rgba(208, 0, 0, var(--tw-bg-opacity, 1)); } .bg-\[transparent\] { background-color: transparent; } .bg-\[var\(--color-green-deep\)\] { background-color: var(--color-green-deep); } .bg-\[var\(--gamecard-overlay-bg\)\] { background-color: #00000080; background-color: var(--gamecard-overlay-bg); } .bg-\[var\(--navigation-tabs-light-background\)\] { background-color: #f3f4f6; background-color: var(--navigation-tabs-light-background); } .bg-\[var\(--theme-switcher-active-btn-dark-bg\)\] { background-color: #141423; background-color: var(--theme-switcher-active-btn-dark-bg); } .bg-\[var\(--theme-switcher-container-dark-bg\)\] { background-color: #23233a; background-color: var(--theme-switcher-container-dark-bg); } .bg-\[var\(--theme-switcher-inactive-btn-dark-bg\)\] { background-color: #23233a; background-color: var(--theme-switcher-inactive-btn-dark-bg); } .bg-\[white\/10\] { background-color: #fff/10; } .bg-black\/80 { background-color: #000c; } .bg-blue-500 { --tw-bg-opacity: 1; background-color: #3b82f6; background-color: rgba(59, 130, 246, var(--tw-bg-opacity, 1)); } .bg-neutral-300 { --tw-bg-opacity: 1; background-color: #d4d4d4; background-color: rgba(212, 212, 212, var(--tw-bg-opacity, 1)); } .bg-red-500 { --tw-bg-opacity: 1; background-color: #ef4444; background-color: rgba(239, 68, 68, var(--tw-bg-opacity, 1)); } .bg-transparent { background-color: transparent; } .bg-white\/10 { background-color: #ffffff1a; } .bg-yellow-400 { --tw-bg-opacity: 1; background-color: #facc15; background-color: rgba(250, 204, 21, var(--tw-bg-opacity, 1)); } .bg-yellow-500 { --tw-bg-opacity: 1; background-color: #eab308; background-color: rgba(234, 179, 8, var(--tw-bg-opacity, 1)); } .bg-opacity-0 { --tw-bg-opacity: 0; } .bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); } .bg-none { background-image: none; } .from-transparent { --tw-gradient-from: transparent var(--tw-gradient-from-position); --tw-gradient-to: transparent var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .via-white\/10 { --tw-gradient-to: hsla(0, 0%, 100%, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), hsla(0, 0%, 100%, .1) var(--tw-gradient-via-position), var(--tw-gradient-to); } .to-transparent { --tw-gradient-to: transparent var(--tw-gradient-to-position); } .bg-cover { background-size: cover; } .\!bg-clip-text { -webkit-background-clip: text !important; background-clip: text !important; } .bg-center { background-position: 50%; } .bg-right-bottom { background-position: 100% 100%; } .fill-\[var\(--close-icon-fill-light\)\] { fill: #27272a; fill: var(--close-icon-fill-light); } .fill-current { fill: currentColor; } .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; } .object-right { -o-object-position: right; object-position: right; } .object-top { -o-object-position: top; object-position: top; } .\!p-0 { padding: 0 !important; } .p-0 { padding: 0; } .p-1 { padding: .25rem; } .p-1\.5 { padding: .375rem; } .p-12 { padding: 3rem; } .p-2 { padding: .5rem; } .p-2\.5 { padding: .625rem; } .p-3 { padding: .75rem; } .p-3\.5 { padding: .875rem; } .p-4 { padding: 1rem; } .p-5 { padding: 1.25rem; } .p-6, .p-\[1\.5rem\] { padding: 1.5rem; } .p-\[10px\] { padding: 10px; } .p-\[14px\] { padding: 14px; } .p-\[16px\] { padding: 16px; } .p-\[30px\] { padding: 30px; } .p-\[4px\] { padding: 4px; } .p-\[5px\] { padding: 5px; } .p-\[6px\] { padding: 6px; } .p-\[8px_16px\] { padding: 8px 16px; } .p-\[var\(--navigation-tabs-padding\)\] { padding: 0 .25rem; padding: var(--navigation-tabs-padding); } .p-px { padding: 1px; } .\!px-0 { padding-left: 0 !important; padding-right: 0 !important; } .\!px-4 { padding-left: 1rem !important; padding-right: 1rem !important; } .\!py-2 { padding-bottom: .5rem !important; padding-top: .5rem !important; } .\!py-\[14px\] { padding-bottom: 14px !important; padding-top: 14px !important; } .px-0 { padding-left: 0; padding-right: 0; } .px-1 { padding-left: .25rem; padding-right: .25rem; } .px-12 { padding-left: 3rem; padding-right: 3rem; } .px-16 { padding-left: 4rem; padding-right: 4rem; } .px-2 { padding-left: .5rem; padding-right: .5rem; } .px-2\.5 { padding-left: .625rem; padding-right: .625rem; } .px-3 { padding-left: .75rem; padding-right: .75rem; } .px-3\.5 { padding-left: .875rem; padding-right: .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-\[0\.5rem\] { padding-left: .5rem; padding-right: .5rem; } .px-\[0\.75rem\] { padding-left: .75rem; padding-right: .75rem; } .px-\[1\.25rem\] { padding-left: 1.25rem; padding-right: 1.25rem; } .px-\[1\.5rem\] { padding-left: 1.5rem; padding-right: 1.5rem; } .px-\[12px\] { padding-left: 12px; padding-right: 12px; } .px-\[13px\] { padding-left: 13px; padding-right: 13px; } .px-\[14px\] { padding-left: 14px; padding-right: 14px; } .px-\[16px\] { padding-left: 16px; padding-right: 16px; } .px-\[1rem\] { padding-left: 1rem; padding-right: 1rem; } .px-\[24px\] { padding-left: 24px; padding-right: 24px; } .px-\[26px\] { padding-left: 26px; padding-right: 26px; } .px-\[2rem\] { padding-left: 2rem; padding-right: 2rem; } .px-\[9px\] { padding-left: 9px; padding-right: 9px; } .px-\[var\(--tabs-trigger-padding-x\)\] { padding-left: .75rem; padding-left: var(--tabs-trigger-padding-x); padding-right: .75rem; padding-right: var(--tabs-trigger-padding-x); } .py-0\.5 { padding-bottom: .125rem; padding-top: .125rem; } .py-1 { padding-bottom: .25rem; padding-top: .25rem; } .py-1\.5 { padding-bottom: .375rem; padding-top: .375rem; } .py-12 { padding-bottom: 3rem; padding-top: 3rem; } .py-2 { padding-bottom: .5rem; padding-top: .5rem; } .py-2\.5 { padding-bottom: .625rem; padding-top: .625rem; } .py-3 { padding-bottom: .75rem; padding-top: .75rem; } .py-4 { padding-bottom: 1rem; padding-top: 1rem; } .py-5 { padding-bottom: 1.25rem; padding-top: 1.25rem; } .py-6 { padding-bottom: 1.5rem; padding-top: 1.5rem; } .py-8 { padding-bottom: 2rem; padding-top: 2rem; } .py-\[10px\] { padding-bottom: 10px; padding-top: 10px; } .py-\[11px\] { padding-bottom: 11px; padding-top: 11px; } .py-\[12px\] { padding-bottom: 12px; padding-top: 12px; } .py-\[14px\] { padding-bottom: 14px; padding-top: 14px; } .py-\[18px\] { padding-bottom: 18px; padding-top: 18px; } .py-\[2x\] { padding-bottom: 2x; padding-top: 2x; } .py-\[30px\] { padding-bottom: 30px; padding-top: 30px; } .py-\[8px\] { padding-bottom: 8px; padding-top: 8px; } .py-\[9px\] { padding-bottom: 9px; padding-top: 9px; } .py-\[var\(--tabs-trigger-padding-y\)\] { padding-bottom: .375rem; padding-bottom: var(--tabs-trigger-padding-y); padding-top: .375rem; padding-top: var(--tabs-trigger-padding-y); } .py-\[var\(--theme-switcher-btn-padding-y\)\] { padding-bottom: .75rem; padding-bottom: var(--theme-switcher-btn-padding-y); padding-top: .75rem; padding-top: var(--theme-switcher-btn-padding-y); } .pb-0 { padding-bottom: 0; } .pb-1 { padding-bottom: .25rem; } .pb-10 { padding-bottom: 2.5rem; } .pb-14 { padding-bottom: 3.5rem; } .pb-16 { padding-bottom: 4rem; } .pb-2 { padding-bottom: .5rem; } .pb-2\.5 { padding-bottom: .625rem; } .pb-28 { padding-bottom: 7rem; } .pb-3 { padding-bottom: .75rem; } .pb-4 { padding-bottom: 1rem; } .pb-5 { padding-bottom: 1.25rem; } .pb-6 { padding-bottom: 1.5rem; } .pb-8 { padding-bottom: 2rem; } .pb-\[2px\] { padding-bottom: 2px; } .pb-\[3\.75rem\] { padding-bottom: 3.75rem; } .pl-0 { padding-left: 0; } .pl-1 { padding-left: .25rem; } .pl-10 { padding-left: 2.5rem; } .pl-12 { padding-left: 3rem; } .pl-2 { padding-left: .5rem; } .pl-3 { padding-left: .75rem; } .pl-3\.5 { padding-left: .875rem; } .pl-4 { padding-left: 1rem; } .pl-6 { padding-left: 1.5rem; } .pl-\[62px\] { padding-left: 62px; } .pl-\[74px\] { padding-left: 74px; } .pl-\[var\(--theme-switcher-btn-padding-left\)\] { padding-left: .375rem; padding-left: var(--theme-switcher-btn-padding-left); } .pr-0 { padding-right: 0; } .pr-12 { padding-right: 3rem; } .pr-16 { padding-right: 4rem; } .pr-2 { padding-right: .5rem; } .pr-2\.5 { padding-right: .625rem; } .pr-3 { padding-right: .75rem; } .pr-3\.5 { padding-right: .875rem; } .pr-4 { padding-right: 1rem; } .pr-8 { padding-right: 2rem; } .pr-\[10px\] { padding-right: 10px; } .pr-\[14px\] { padding-right: 14px; } .pr-\[30\%\] { padding-right: 30%; } .pr-\[var\(--theme-switcher-btn-padding-right\)\] { padding-right: .625rem; padding-right: var(--theme-switcher-btn-padding-right); } .pt-0 { padding-top: 0; } .pt-1 { padding-top: .25rem; } .pt-12 { padding-top: 3rem; } .pt-2 { padding-top: .5rem; } .pt-2\.5 { padding-top: .625rem; } .pt-3 { padding-top: .75rem; } .pt-4 { padding-top: 1rem; } .pt-5 { padding-top: 1.25rem; } .pt-6 { padding-top: 1.5rem; } .pt-8 { padding-top: 2rem; } .pt-9 { padding-top: 2.25rem; } .pt-\[128px\] { padding-top: 128px; } .pt-\[135px\] { padding-top: 135px; } .pt-\[20px\] { padding-top: 20px; } .pt-\[234px\] { padding-top: 234px; } .pt-\[29px\] { padding-top: 29px; } .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } .font-Inter, .font-sans { font-family: "Segoe UI", -apple-system, sans-serif; } .\!text-xl { font-size: 20px !important; line-height: 140% !important; } .text-2xl { font-size: 24px; line-height: 140%; } .text-3xl { font-size: 28px; line-height: 140%; } .text-4xl { font-size: 32px; line-height: 140%; } .text-\[0\.875rem\] { font-size: .875rem; } .text-\[1\.5rem\] { font-size: 1.5rem; } .text-\[10px\] { font-size: 10px; } .text-\[12px\] { font-size: 12px; } .text-\[13px\] { font-size: 13px; } .text-\[14px\] { font-size: 14px; } .text-\[15px\] { font-size: 15px; } .text-\[16px\] { font-size: 16px; } .text-\[17px\] { font-size: 17px; } .text-\[18px\] { font-size: 18px; } .text-\[1rem\] { font-size: 1rem; } .text-\[20px\] { font-size: 20px; } .text-\[22px\] { font-size: 22px; } .text-\[24px\] { font-size: 24px; } .text-\[26px\] { font-size: 26px; } .text-\[9px\] { font-size: 9px; } .text-\[length\:1rem\] { font-size: 1rem; } .text-\[length\:20px\] { font-size: 20px; } .text-\[length\:var\(--font-size-xl\)\] { font-size: 1.25rem; font-size: var(--font-size-xl); } .text-\[length\:var\(--font-size-xs\)\] { font-size: .75rem; font-size: var(--font-size-xs); } .text-base { font-size: 16px; line-height: 140%; } .text-lg { font-size: 18px; line-height: 140%; } .text-sm { font-size: 14px; line-height: 140%; } .text-xl { font-size: 20px; line-height: 140%; } .text-xs { font-size: 12px; line-height: 140%; } .text-xxl { font-size: 22px; line-height: 140%; } .font-\[600\] { font-weight: 600; } .font-\[var\(--label-font-weight\)\] { font-weight: 500; font-weight: var(--label-font-weight); } .font-\[var\(--tabs-trigger-font-weight\)\] { font-weight: 500; font-weight: var(--tabs-trigger-font-weight); } .font-\[var\(--theme-switcher-btn-font-family\)\] { font-weight: "Outfit", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; font-weight: var(--theme-switcher-btn-font-family); } .font-black { font-weight: 900; } .font-bold { font-weight: 700; } .font-extrabold { font-weight: 800; } .font-extralight { font-weight: 200; } .font-light { font-weight: 300; } .font-medium { font-weight: 500; } .font-normal { font-weight: 400; } .font-semibold { font-weight: 600; } .font-thin { font-weight: 100; } .uppercase { text-transform: uppercase; } .lowercase { text-transform: lowercase; } .capitalize { text-transform: capitalize; } .normal-case { text-transform: none; } .not-italic { font-style: normal; } .leading-3 { line-height: .75rem; } .leading-4 { line-height: 1rem; } .leading-5 { line-height: 1.25rem; } .leading-7 { line-height: 1.75rem; } .leading-\[1\.3\] { line-height: 1.3; } .leading-\[1\.4\] { line-height: 1.4; } .leading-\[140\%\] { line-height: 140%; } .leading-\[142\%\] { line-height: 142%; } .leading-\[160\%\] { line-height: 160%; } .leading-\[22px\] { line-height: 22px; } .leading-\[var\(--label-line-height\)\] { line-height: 1; line-height: var(--label-line-height); } .leading-\[var\(--line-height-xl\)\] { line-height: 1.75rem; line-height: var(--line-height-xl); } .leading-\[var\(--theme-switcher-btn-line-height\)\] { line-height: 130%; line-height: var(--theme-switcher-btn-line-height); } .leading-none { line-height: 1; } .leading-relaxed { line-height: 1.625; } .leading-tight { line-height: 1.25; } .tracking-tight { letter-spacing: -.025em; } .text-\[\#27272A\] { --tw-text-opacity: 1; color: #27272a; color: rgba(39, 39, 42, var(--tw-text-opacity, 1)); } .text-\[\#374151\] { --tw-text-opacity: 1; color: #374151; color: rgba(55, 65, 81, var(--tw-text-opacity, 1)); } .text-\[\#6254ff\] { --tw-text-opacity: 1; color: #6254ff; color: rgba(98, 84, 255, var(--tw-text-opacity, 1)); } .text-\[\#91919C\] { --tw-text-opacity: 1; color: #91919c; color: rgba(145, 145, 156, var(--tw-text-opacity, 1)); } .text-\[\#FFFFFF99\] { color: #fff9; } .text-\[color\:var\(--text-icons-secondary\)\] { color: #606b95; color: var(--text-icons-secondary); } .text-\[var\(--color-foreground\)\] { color: #1f2937; color: var(--color-foreground); } .text-\[var\(--color-yellow-light\)\] { color: #ffcf73; color: var(--color-yellow-light); } .text-\[var\(--label-text-size\)\] { color: .875rem; color: var(--label-text-size); } .text-\[var\(--tabs-trigger-text-size\)\] { color: .875rem; color: var(--tabs-trigger-text-size); } .text-\[var\(--theme-switcher-active-btn-dark-text\)\] { color: #fff; color: var(--theme-switcher-active-btn-dark-text); } .text-\[var\(--theme-switcher-btn-font-size\)\] { color: .875rem; color: var(--theme-switcher-btn-font-size); } .text-\[var\(--theme-switcher-inactive-btn-dark-text\)\] { color: #fff; color: var(--theme-switcher-inactive-btn-dark-text); } .text-\[white\/60\] { color: #fff/60; } .text-black { --tw-text-opacity: 1; color: #000; color: rgba(0, 0, 0, var(--tw-text-opacity, 1)); } .text-blue-400 { --tw-text-opacity: 1; color: #60a5fa; color: rgba(96, 165, 250, var(--tw-text-opacity, 1)); } .text-current { color: currentColor; } .text-green-600 { --tw-text-opacity: 1; color: #16a34a; color: rgba(22, 163, 74, var(--tw-text-opacity, 1)); } .text-green-700 { --tw-text-opacity: 1; color: #15803d; color: rgba(21, 128, 61, var(--tw-text-opacity, 1)); } .text-pink-400 { --tw-text-opacity: 1; color: #f472b6; color: rgba(244, 114, 182, var(--tw-text-opacity, 1)); } .text-red-500 { --tw-text-opacity: 1; color: #ef4444; color: rgba(239, 68, 68, var(--tw-text-opacity, 1)); } .text-slate-400 { --tw-text-opacity: 1; color: #94a3b8; color: rgba(148, 163, 184, var(--tw-text-opacity, 1)); } .text-white { --tw-text-opacity: 1; color: #fff; color: rgba(255, 255, 255, var(--tw-text-opacity, 1)); } .text-yellow-300 { --tw-text-opacity: 1; color: #fde047; color: rgba(253, 224, 71, var(--tw-text-opacity, 1)); } .underline { text-decoration-line: underline; } .no-underline { text-decoration-line: none; } .antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .placeholder-transparent::-moz-placeholder { color: transparent; } .placeholder-transparent::placeholder { color: transparent; } .opacity-0 { opacity: 0; } .opacity-100 { opacity: 1; } .opacity-20 { opacity: .2; } .opacity-25 { opacity: .25; } .opacity-40 { opacity: .4; } .opacity-50 { opacity: .5; } .opacity-60 { opacity: .6; } .opacity-70 { opacity: .7; } .opacity-75 { opacity: .75; } .shadow { --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1); --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); box-shadow: 0 0 transparent, 0 0 transparent, 0 1px 3px #0000001a, 0 1px 2px -1px #0000001a; box-shadow: var(--tw-ring-offset-shadow, 0 0 transparent), var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow); } .shadow-\[0_0_10px_0_rgba\(0\,0\,0\,0\.30\)\] { --tw-shadow: 0 0 10px 0 rgba(0, 0, 0, .3); --tw-shadow-colored: 0 0 10px 0 var(--tw-shadow-color); box-shadow: 0 0 transparent, 0 0 transparent, 0 0 10px #0000004d; box-shadow: var(--tw-ring-offset-shadow, 0 0 transparent), var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow); } .shadow-\[0_0_12px_0_rgba\(255\,207\,115\,0\.5\)\] { --tw-shadow: 0 0 12px 0 rgba(255, 207, 115, .5); --tw-shadow-colored: 0 0 12px 0 var(--tw-shadow-color); box-shadow: 0 0 transparent, 0 0 transparent, 0 0 12px #ffcf7380; box-shadow: var(--tw-ring-offset-shadow, 0 0 transparent), var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow); } .shadow-\[0_10px_16px_0_rgba\(0\,0\,0\,0\.15\)\] { --tw-shadow: 0 10px 16px 0 rgba(0, 0, 0, .15); --tw-shadow-colored: 0 10px 16px 0 var(--tw-shadow-color); box-shadow: 0 0 transparent, 0 0 transparent, 0 10px 16px #00000026; box-shadow: var(--tw-ring-offset-shadow, 0 0 transparent), var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow); } .shadow-\[0_10px_16px_0_rgba\(0\,0\,0\,0\.2\)\,_0_2px_0_0_\#01221e\] { --tw-shadow: 0 10px 16px 0 rgba(0, 0, 0, .2), 0 2px 0 0 #01221e; --tw-shadow-colored: 0 10px 16px 0 var(--tw-shadow-color), 0 2px 0 0 var(--tw-shadow-color); box-shadow: 0 0 transparent, 0 0 transparent, 0 10px 16px #0003, 0 2px #01221e; box-shadow: var(--tw-ring-offset-shadow, 0 0 transparent), var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow); } .shadow-lg { --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(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: 0 0 transparent, 0 0 transparent, 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a; box-shadow: var(--tw-ring-offset-shadow, 0 0 transparent), var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow); } .shadow-md { --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(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: 0 0 transparent, 0 0 transparent, 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a; box-shadow: var(--tw-ring-offset-shadow, 0 0 transparent), var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow); } .shadow-sm { --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05); --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); box-shadow: 0 0 transparent, 0 0 transparent, 0 1px 2px #0000000d; box-shadow: var(--tw-ring-offset-shadow, 0 0 transparent), var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow); } .outline-none { outline: 2px solid transparent; outline-offset: 2px; } .outline { outline-style: solid; } .ring { --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(3px + var(--tw-ring-offset-width)) var(--tw-ring-color); } .ring, .ring-0 { box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 transparent; box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 transparent); } .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(var(--tw-ring-offset-width)) var(--tw-ring-color); } .ring-1 { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 transparent; box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 transparent); } .ring-inset { --tw-ring-inset: inset; } .ring-\[var\(--content-section-border\)\] { --tw-ring-color: var(--content-section-border); } .blur { --tw-blur: blur(8px); filter: blur(8px) 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: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .blur-\[2px\] { --tw-blur: blur(2px); filter: blur(2px) 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: 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); } .contrast-50 { --tw-contrast: contrast(.5); filter: var(--tw-blur) var(--tw-brightness) contrast(.5) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .drop-shadow-\[0_2px_19px_rgba\(235\,209\,91\,0\.20\)\] { --tw-drop-shadow: drop-shadow(0 2px 19px rgba(235, 209, 91, .2)); 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) drop-shadow(0 2px 19px rgba(235, 209, 91, .2)); 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); } .grayscale { --tw-grayscale: grayscale(100%); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) grayscale(100%) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); 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); } .grayscale-\[50\%\] { --tw-grayscale: grayscale(50%); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) grayscale(50%) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .filter, .grayscale-\[50\%\] { 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-\[5px\] { --tw-backdrop-blur: blur(5px); -webkit-backdrop-filter: blur(5px) 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); -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: blur(5px) 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); } .backdrop-blur-sm { --tw-backdrop-blur: blur(4px); -webkit-backdrop-filter: blur(4px) 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); -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: blur(4px) 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 { transition-duration: .15s; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; transition-timing-function: cubic-bezier(.4, 0, .2, 1); } .transition-\[background-color\,background-image\] { transition-duration: .15s; transition-property: background-color, background-image; transition-timing-function: cubic-bezier(.4, 0, .2, 1); } .transition-\[max-width\,margin-left\,opacity\] { transition-duration: .15s; transition-property: max-width, margin-left, opacity; transition-timing-function: cubic-bezier(.4, 0, .2, 1); } .transition-all { transition-duration: .15s; transition-property: all; transition-timing-function: cubic-bezier(.4, 0, .2, 1); } .transition-colors { transition-duration: .15s; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(.4, 0, .2, 1); } .transition-opacity { transition-duration: .15s; transition-property: opacity; transition-timing-function: cubic-bezier(.4, 0, .2, 1); } .transition-transform { transition-duration: .15s; transition-property: transform; transition-timing-function: cubic-bezier(.4, 0, .2, 1); } .duration-200 { transition-duration: .2s; } .duration-300 { transition-duration: .3s; } .duration-500 { transition-duration: .5s; } .duration-700 { transition-duration: .7s; } .ease-in-out { transition-timing-function: cubic-bezier(.4, 0, .2, 1); } .ease-out { transition-timing-function: cubic-bezier(0, 0, .2, 1); } @keyframes enter { 0% { opacity: 1; opacity: var(--tw-enter-opacity, 1); transform: translateZ(0) scaleX(1) rotate(0); 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: 1; opacity: var(--tw-exit-opacity, 1); transform: translateZ(0) scaleX(1) rotate(0); 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-200 { animation-duration: .2s; } .duration-300 { animation-duration: .3s; } .duration-500 { animation-duration: .5s; } .duration-700 { animation-duration: .7s; } .ease-in-out { animation-timing-function: cubic-bezier(.4, 0, .2, 1); } .ease-out { animation-timing-function: cubic-bezier(0, 0, .2, 1); } .running { animation-play-state: running; } .paused { animation-play-state: paused; } .bg-basic-1000 { background-color: var(--bg-basic-1000); } .bg-basic-1000-70 { background-color: var(--bg-basic-1000-70); } .bg-basic-900 { background-color: var(--bg-basic-900); } .bg-basic-800 { background-color: var(--bg-basic-800); } .bg-basic-700 { background-color: var(--bg-basic-700); } .bg-basic-600 { background-color: var(--bg-basic-600); } .bg-basic-500 { background-color: var(--bg-basic-500); } .bg-basic-400 { background-color: var(--bg-basic-400); } .bg-basic-300 { background-color: var(--bg-basic-300); } .bg-basic-200 { background-color: var(--bg-basic-200); } .bg-basic-150 { background-color: var(--bg-basic-150); } .bg-basic-100 { background-color: var(--bg-basic-100); } .bg-basic-50 { background-color: var(--bg-basic-50); } .bg-basic-000-10 { background-color: var(--bg-basic-000-10); } .bg-basic-000-60 { background-color: var(--bg-basic-000-60); } .bg-basic-000-contrast { background-color: var(--bg-basic-000-contrast); } .hidden-bg { background-color: var(--hidden-bg); } .bg-accent-1 { background-color: var(--bg-accent-1); } .bg-accent-2 { background-color: var(--bg-accent-2); } .bg-accent-3 { background-color: var(--bg-accent-3); } .bg-accent-4 { background-color: var(--bg-accent-4); } .bg-accent-5 { background-color: var(--bg-accent-5); } .bg-accent-6 { background-color: var(--bg-accent-6); } .bg-accent-7 { background-color: var(--bg-accent-7); } .\!bg-accent-8 { background-color: var(--bg-accent-8) !important; } .bg-accent-8 { background-color: var(--bg-accent-8); } .bg-accent-9 { background-color: var(--bg-accent-9); } .bg-accent-10 { background-color: var(--bg-accent-10); } .bg-accent-11 { background-color: var(--bg-accent-11); } .bg-accent-12 { background-color: var(--bg-accent-12); } .bg-accent-13 { background-color: var(--bg-accent-13); } .bg-semantic-error { background-color: var(--bg-semantic-error); } .bg-semantic-error-10 { background-color: var(--bg-semantic-error-10); } .bg-semantic-warning { background-color: var(--bg-semantic-warning); } .bg-semantic-warning-10 { background-color: var(--bg-semantic-warning-10); } .bg-semantic-success { background-color: var(--bg-semantic-success); } .bg-semantic-success-10 { background-color: var(--bg-semantic-success-10); } .bg-semantic-extra { background-color: var(--bg-semantic-extra); } .bg-semantic-extra-10 { background-color: var(--bg-semantic-extra-10); } .border-control-border-default { border-color: var(--border-control-border-default); } .border-control-border-active { border-color: var(--border-control-border-active); } .bg-control-bg-active { background-color: var(--bg-control-bg-active); } .text-control-icon-default { color: var(--text-control-icon-default); } .text-control-icon-active { color: var(--text-control-icon-active); } .bg-control-icon-default { background-color: var(--bg-control-icon-default); } .bg-control-icon-active { background-color: var(--bg-control-icon-active); } .border-basic-500 { border-color: var(--border-basic-500); } .border-basic-400 { border-color: var(--border-basic-400); } .border-basic-200 { border-color: var(--border-basic-200); } .border-basic-000-40 { border-color: var(--border-basic-000-40); } .border-basic-000-10 { border-color: var(--border-basic-000-10); } .border-accent-1 { border-color: var(--border-accent-1); } .border-accent-2 { border-color: var(--border-accent-2); } .border-accent-3 { border-color: var(--border-accent-3); } .border-accent-4 { border-color: var(--border-accent-4); } .border-accent-5 { border-color: var(--border-accent-5); } .border-accent-6 { border-color: var(--border-accent-6); } .border-accent-7 { border-color: var(--border-accent-7); } .border-accent-8 { border-color: var(--border-accent-8); } .border-accent-9 { border-color: var(--border-accent-9); } .border-accent-10 { border-color: var(--border-accent-10); } .border-accent-11 { border-color: var(--border-accent-11); } .border-accent-12 { border-color: var(--border-accent-12); } .border-accent-13 { border-color: var(--border-accent-13); } .border-error { border-color: var(--border-error); } .border-error-30 { border-color: var(--border-error-30); } .\!border-warning { border-color: var(--border-warning) !important; } .border-warning { border-color: var(--border-warning); } .border-warning-30 { border-color: var(--border-warning-30); } .\!border-success { border-color: var(--border-success) !important; } .border-success { border-color: var(--border-success); } .border-success-30 { border-color: var(--border-success-30); } .\!border-extra { border-color: var(--border-extra) !important; } .border-extra { border-color: var(--border-extra); } .border-extra-30 { border-color: var(--border-extra-30); } .bg-di-bg-default { background-color: var(--bg-di-bg-default); } .bg-di-bg-hover { background-color: var(--bg-di-bg-hover); } .bg-di-bg-active { background-color: var(--bg-di-bg-active); } .\!border-di-border-default { border-color: var(--border-di-border-default) !important; } .border-di-border-default { border-color: var(--border-di-border-default); } .border-di-border-active { border-color: var(--border-di-border-active); } .border-di-border-focus { border-color: var(--border-di-border-focus); } .border-di-border-error { border-color: var(--border-di-border-error); } .text-di-text-placeholder { color: var(--text-di-text-placeholder); } .text-di-text { color: var(--text-di-text); } .text-di-icon-default { color: var(--text-di-icon-default); } .text-di-icon-active { color: var(--text-di-icon-active); } .button-primary-border-default { border-color: var(--button-primary-border-default); } .button-primary-border-hover { border-color: var(--button-primary-border-hover); } .button-primary-text-default { color: var(--button-primary-text-default); } .button-primary-text-active { color: var(--button-primary-text-active); } .button-primary-icon-default { color: var(--button-primary-icon-default); } .button-primary-icon-active { color: var(--button-primary-icon-active); } .button-secondary-bg-default { background-color: var(--button-secondary-bg-default); } .\!button-secondary-bg-active { background-color: var(--button-secondary-bg-active) !important; } .button-secondary-bg-active { background-color: var(--button-secondary-bg-active); } .button-secondary-border-default { border-color: var(--button-secondary-border-default); } .button-secondary-border-active { border-color: var(--button-secondary-border-active); } .button-secondary-text-default { color: var(--button-secondary-text-default); } .button-secondary-text-active { color: var(--button-secondary-text-active); } .button-secondary-icon-default { color: var(--button-secondary-icon-default); } .button-secondary-icon-active { color: var(--button-secondary-icon-active); } .button-extra-border-default { border-color: var(--button-extra-border-default); } .button-extra-text-default { color: var(--button-extra-text-default); } .button-extra-text-active { color: var(--button-extra-text-active); } .button-extra-icon-default { color: var(--button-extra-icon-default); } .button-extra-icon-active { color: var(--button-extra-icon-active); } .button-extra2-bg-default { background-color: var(--button-extra2-bg-default); } .button-extra2-bg-active { background-color: var(--button-extra2-bg-active); } .button-extra2-border-default { border-color: var(--button-extra2-border-default); } .button-extra2-border-active { border-color: var(--button-extra2-border-active); } .button-extra2-text-default { color: var(--button-extra2-text-default); } .button-extra2-text-active { color: var(--button-extra2-text-active); } .button-extra2-icon-default { color: var(--button-extra2-icon-default); } .button-extra2-icon-active { color: var(--button-extra2-icon-active); } .button-blurred-bg-default { background-color: var(--button-blurred-bg-default); } .button-blurred-bg-active { background-color: var(--button-blurred-bg-active); } .button-blurred-border-default { border-color: var(--button-blurred-border-default); } .button-blurred-border-active { border-color: var(--button-blurred-border-active); } .button-blurred-text-default { color: var(--button-blurred-text-default); } .button-blurred-text-active { color: var(--button-blurred-text-active); } .button-blurred-icon-default { color: var(--button-blurred-icon-default); } .button-blurred-icon-active { color: var(--button-blurred-icon-active); } .border-button-play-border-default { border-color: var(--border-button-play-border-default); } .bg-button-play-bg-hover { background-color: var(--bg-button-play-bg-hover); } .text-primary { color: var(--text-primary); } .text-secondary { color: var(--text-secondary); } .text-contrast { color: var(--text-contrast); } .text-banner-contrast { color: var(--text-banner-contrast); } .text-accent-1 { color: var(--text-accent-1); } .text-accent-2 { color: var(--text-accent-2); } .text-accent-3 { color: var(--text-accent-3); } .text-accent-4 { color: var(--text-accent-4); } .\!text-accent-5 { color: var(--text-accent-5) !important; } .text-accent-5 { color: var(--text-accent-5); } .text-accent-6 { color: var(--text-accent-6); } .text-accent-7 { color: var(--text-accent-7); } .text-accent-8 { color: var(--text-accent-8); } .text-accent-9 { color: var(--text-accent-9); } .text-accent-10 { color: var(--text-accent-10); } .text-accent-11 { color: var(--text-accent-11); } .text-accent-12 { color: var(--text-accent-12); } .text-accent-13 { color: var(--text-accent-13); } .text-error { color: var(--text-error); } .text-warning { color: var(--text-warning); } .text-success { color: var(--text-success); } .text-extra { color: var(--text-extra); } .icon-basic-contrast { color: var(--icon-basic-contrast); } .icon-basic-white { color: var(--icon-basic-white); } .\!icon-basic-white-50 { color: var(--icon-basic-white-50) !important; } .icon-basic-white-50 { color: var(--icon-basic-white-50); } .icon-basic-white-25 { color: var(--icon-basic-white-25); } .icon-basic-100 { color: var(--icon-basic-100); } .icon-basic-100-50 { color: var(--icon-basic-100-50); } .icon-accent-1 { color: var(--icon-accent-1); } .icon-accent-2 { color: var(--icon-accent-2); } .icon-accent-3 { color: var(--icon-accent-3); } .icon-accent-4 { color: var(--icon-accent-4); } .icon-accent-5 { color: var(--icon-accent-5); } .icon-accent-6 { color: var(--icon-accent-6); } .icon-accent-7 { color: var(--icon-accent-7); } .icon-accent-8 { color: var(--icon-accent-8); } .icon-accent-9 { color: var(--icon-accent-9); } .icon-accent-10 { color: var(--icon-accent-10); } .icon-accent-11 { color: var(--icon-accent-11); } .icon-accent-12 { color: var(--icon-accent-12); } .icon-accent-13 { color: var(--icon-accent-13); } .icon-error { color: var(--icon-error); } .icon-warning { color: var(--icon-warning); } .icon-success { color: var(--icon-success); } .icon-extra { color: var(--icon-extra); } .icon-default-sidebar { color: var(--icon-default-sidebar); } .icon-active-sidebar { color: var(--icon-active-sidebar); } .icon-default-category { color: var(--icon-default-category); } .icon-active-category { color: var(--icon-active-category); } .icon-idle-category { color: var(--icon-idle-category); } .bg-step-back { background-color: var(--bg-step-back); } .bg-step-progress { background-color: var(--bg-step-progress); } .bg-game-hover { background-color: var(--bg-game-hover); } .bg-label-top { background-color: var(--bg-label-top); } .bg-label-new { background-color: var(--bg-label-new); } .bg-label-crypto { background-color: var(--bg-label-crypto); } .bg-accent-blue-500 { background-color: var(--bg-accent-blue-500); } .bg-accent-green-500 { background-color: var(--bg-accent-green-500); } .bg-accent-green-500-30 { background-color: var(--bg-accent-green-500-30); } .bg-accent-red-500 { background-color: var(--bg-accent-red-500); } .bg-accent-pink-400 { background-color: var(--bg-accent-pink-400); } .bg-accent-yellow-300 { background-color: var(--bg-accent-yellow-300); } .bg-accent-green-700 { background-color: var(--bg-accent-green-700); } .border-blue-500 { border-color: var(--border-blue-500); } .border-green-700 { border-color: var(--border-green-700); } .border-yellow-300 { border-color: var(--border-yellow-300); } .border-yellow-300-30 { border-color: var(--border-yellow-300-30); } .border-error-10 { border-color: var(--border-error-10); } .border-warning-10 { border-color: var(--border-warning-10); } .border-success-10 { border-color: var(--border-success-10); } .border-extra-10 { border-color: var(--border-extra-10); } .bg-button-extra2-bg-default { background-color: var(--bg-button-extra2-bg-default); } .bg-button-extra2-bg-active { background-color: var(--bg-button-extra2-bg-active); } .text-button-extra2-text-default { color: var(--text-button-extra2-text-default); } .text-button-extra2-text-active { color: var(--text-button-extra2-text-active); } .border-button-extra2-border-default { border-color: var(--border-button-extra2-border-default); } .border-button-extra2-border-active { border-color: var(--border-button-extra2-border-active); } .bg-button-blurred-bg-default { background-color: var(--bg-button-blurred-bg-default); } .bg-button-blurred-bg-active { background-color: var(--bg-button-blurred-bg-active); } .text-button-blurred-text-default { color: var(--text-button-blurred-text-default); } .text-button-blurred-text-active { color: var(--text-button-blurred-text-active); } .border-button-blurred-border-default { border-color: var(--border-button-blurred-border-default); } .border-button-blurred-border-active { border-color: var(--border-button-blurred-border-active); } .text-dark { color: var(--text-dark); } .text-green-600 { color: var(--text-green-600); } .text-green-700 { color: var(--text-green-700); } .text-blue-400 { color: var(--text-blue-400); } .text-pink-400 { color: var(--text-pink-400); } .text-yellow-300 { color: var(--text-yellow-300); } .icon-basic-white-contrast { color: var(--icon-basic-white-contrast); } .icon-dark { color: var(--icon-dark); } .icon-blue-500 { color: var(--icon-blue-500); } .icon-blue-400 { color: var(--icon-blue-400); } .icon-yellow-700 { color: var(--icon-yellow-700); } .icon-yellow-400 { color: var(--icon-yellow-400); } .icon-yellow-300 { color: var(--icon-yellow-300); } .icon-pink-400 { color: var(--icon-pink-400); } .icon-green-700 { color: var(--icon-green-700); } .icon-dark-800 { color: var(--icon-dark-800); } .icon-dark-500 { color: var(--icon-dark-500); } .bg-card-bronze { background-color: var(--bg-card-bronze); } .bg-card-silver { background-color: var(--bg-card-silver); } .bg-card-gold { background-color: var(--bg-card-gold); } .bg-card-platinum { background-color: var(--bg-card-platinum); } .bg-card-rubin { background-color: var(--bg-card-rubin); } .bg-card-description { background-color: var(--bg-card-description); } .bg-card-current-rank-card { background-color: var(--bg-card-current-rank-card); } .bg-funds-modal-background { background-color: var(--bg-funds-modal-background); } .border-funds-modal-border { border-color: var(--border-funds-modal-border); } .text-funds-text-and-icons { color: var(--text-funds-text-and-icons); } .text-funds-input-text-and-icons-accent { color: var(--text-funds-input-text-and-icons-accent); } .bg-funds-input-background { background-color: var(--bg-funds-input-background); } .border-funds-input-border { border-color: var(--border-funds-input-border); } .text-funds-input-text-and-icons { color: var(--text-funds-input-text-and-icons); } .bg-funds-bonus-background { background-color: var(--bg-funds-bonus-background); } .border-funds-bonus-border { border-color: var(--border-funds-bonus-border); } .text-funds-bonus-text-and-icons { color: var(--text-funds-bonus-text-and-icons); } .bg-notification-background { background-color: var(--bg-notification-background); } .border-notification-border { border-color: var(--border-notification-border); } .text-notification-text-and-icons { color: var(--text-notification-text-and-icons); } .button-primary-bg-default { background-image: var(--button-primary-bg-default); } .button-primary-bg-hover { background-image: var(--button-primary-bg-hover); } .button-extra-bg-default { background-image: var(--button-extra-bg-default); } .button-extra-bg-hover { background-image: var(--button-extra-bg-hover); } .button-extra-border-hover { -o-border-image: var(--button-extra-border-hover); border-image: var(--button-extra-border-hover); border-image-slice: 1; } .bg-bg-gradient-0-700, .bg-gradient-0-700 { background: var(--bg-gradient-0-700); } .bg-gradient-1 { background: var(--bg-gradient-1); } .bg-gradient-2 { background: var(--bg-gradient-2); } .bg-gradient-3 { background: var(--bg-gradient-3); } .bg-gradient-4 { background: var(--bg-gradient-4); } .bg-gradient-service-page { background: var(--bg-gradient-service-page); } .bg-gradient-collection-card { background: var(--bg-gradient-collection-card); } .bg-gradient-loader { background: var(--bg-gradient-loader); } .bg-gradient-bubble-menu { background: var(--bg-gradient-bubble-menu); } .bg-gradient-vip-card { background: var(--bg-gradient-vip-card); } .bg-gradient-5 { background: var(--bg-gradient-5); } .brand-crown-green .bg-bg-gradient-0-700, .brand-crown-green .bg-gradient-0-700 { background: linear-gradient(270deg, #05221e, rgba(5, 34, 30, 0)); } .brand-crown-green .bg-bg-gradient-1, .brand-crown-green .bg-gradient-1 { background: linear-gradient(98deg, #d11fe0 -1.36%, #374bf3 102.7%); } .brand-crown-green .bg-bg-gradient-2, .brand-crown-green .bg-gradient-2 { background: linear-gradient(180deg, #f4e38b -24.36%, #f4dd62 23.01%, #b27f2a); } .brand-crown-green .bg-bg-gradient-3, .brand-crown-green .bg-gradient-3 { background: linear-gradient(153deg, #58cdff 4.38%, #2756fe 81.13%); } .brand-crown-green .bg-bg-gradient-4, .brand-crown-green .bg-gradient-4 { background: linear-gradient(153deg, #199258 4.38%, #03c14f 81.13%); } .brand-crown-green .bg-bg-gradient-service-page, .brand-crown-green .bg-gradient-service-page { background: radial-gradient(67.63% 97.68% at 50% 0, #00302a 0, #001210 64.25%, #000b0a 87.18%, #000908 100%); } .brand-crown-green .bg-bg-gradient-collection-card, .brand-crown-green .bg-gradient-collection-card { background: linear-gradient(180deg, #1f7a74 -149.6%, #051413 81.2%); } .brand-crown-green .bg-bg-gradient-loader, .brand-crown-green .bg-gradient-loader { background: radial-gradient(104.17% 118.85% at 50% 0, #00352d 0, #01201a 40.64%, #000b0a 82.6%, #000908 100%); } .brand-crown-green .bg-bg-gradient-bubble-menu, .brand-crown-green .bg-gradient-bubble-menu { background: radial-gradient(35.44% 35.44% at 50% 64.56%, rgba(0, 48, 42, .9) 46%, rgba(5, 20, 19, .9) 100%); } .brand-crown-green .bg-bg-gradient-vip-card, .brand-crown-green .bg-gradient-vip-card { background: radial-gradient(138.69% 41.85% at 50% 0, #051413 0, #051413 30%, #051413 100%); } .brand-spin-8bet .bg-bg-gradient-1, .brand-spin-8bet .bg-gradient-1 { background: linear-gradient(98deg, #f153ff -1.36%, #6948fe 102.7%); } .brand-spin-8bet .bg-bg-gradient-2, .brand-spin-8bet .bg-gradient-2 { background: linear-gradient(180deg, #f4e38b -24.36%, #f4dd62 23.01%, #b27f2a); } .brand-spin-8bet .bg-bg-gradient-3, .brand-spin-8bet .bg-gradient-3 { background: linear-gradient(153deg, #58cdff 4.38%, #2756fe 81.13%); } .brand-spin-8bet .bg-bg-gradient-4, .brand-spin-8bet .bg-gradient-4 { background: linear-gradient(153deg, #199258 4.38%, #03c14f 81.13%); } .brand-spin-8bet .bg-bg-gradient-5, .brand-spin-8bet .bg-gradient-5 { background: linear-gradient(138.65deg, #f4e38b 1.08%, #f4dd62 39.55%, #b27f2a 96.23%); } .brand-spin-8bet .bg-bg-gradient-service-page, .brand-spin-8bet .bg-gradient-service-page { background: radial-gradient(67.63% 97.68% at 50% 0, #00302a 0, #001210 64.25%, #000b0a 87.18%, #000908 100%); } .brand-spin-8bet .bg-bg-gradient-loader, .brand-spin-8bet .bg-gradient-loader { background: linear-gradient(98deg, #f153ff -1.36%, #6948fe 102.7%); } .brand-wish-king .bg-bg-gradient-0-700, .brand-wish-king .bg-gradient-0-700 { background: linear-gradient(270deg, #1d2130, rgba(29, 33, 48, 0)); } .brand-wish-king .bg-bg-gradient-1, .brand-wish-king .bg-gradient-1 { background: linear-gradient(98deg, #d11fe0 -1.36%, #374bf3 102.7%); } .brand-wish-king .bg-bg-gradient-2, .brand-wish-king .bg-gradient-2 { background: linear-gradient(180deg, #f4e38b -24.36%, #f4dd62 23.01%, #b27f2a); } .brand-wish-king .bg-bg-gradient-3, .brand-wish-king .bg-gradient-3 { background: linear-gradient(153deg, #58cdff 4.38%, #2756fe 81.13%); } .brand-wish-king .bg-bg-gradient-4, .brand-wish-king .bg-gradient-4 { background: linear-gradient(153deg, #199258 4.38%, #03c14f 81.13%); } .brand-wish-king .bg-bg-gradient-service-page, .brand-wish-king .bg-gradient-service-page { background: radial-gradient(67.63% 97.68% at 50% 0, #2c324a 0, #000712 64.25%, #00040b 87.18%, #000209 100%); } .brand-wish-king .bg-bg-gradient-collection-card, .brand-wish-king .bg-gradient-collection-card { background: linear-gradient(180deg, #53586e -149.6%, #171e26 81.2%); } .brand-wish-king .bg-bg-gradient-loader, .brand-wish-king .bg-gradient-loader { background: radial-gradient(104.17% 118.85% at 50% 0, #171e26 0, #171e26 50%, #171e26 100%); } .brand-wish-king .bg-bg-gradient-bubble-menu, .brand-wish-king .bg-gradient-bubble-menu { background: radial-gradient(35.44% 35.44% at 50% 64.56%, rgba(28, 34, 55, .9) 46%, rgba(5, 12, 20, .9) 100%); } .brand-wish-king .bg-bg-gradient-vip-card, .brand-wish-king .bg-gradient-vip-card { background: radial-gradient(138.69% 41.85% at 50% 0, #13181f 0, #13181f 30%, #13181f 100%); } .brand-north-spin .bg-bg-gradient-0-700, .brand-north-spin .bg-gradient-0-700 { background: linear-gradient(270deg, #1c1a3f, rgba(28, 26, 63, 0)); } .brand-north-spin .bg-bg-gradient-1, .brand-north-spin .bg-gradient-1 { background: linear-gradient(188deg, #dcab20 -7.28%, #7b61ff 96.79%); } .brand-north-spin .bg-bg-gradient-2, .brand-north-spin .bg-gradient-2 { background: linear-gradient(180deg, #f4e38b -24.36%, #f4dd62 23.01%, #b27f2a); } .brand-north-spin .bg-bg-gradient-3, .brand-north-spin .bg-gradient-3 { background: linear-gradient(153deg, #58cdff 4.38%, #2756fe 81.13%); } .brand-north-spin .bg-bg-gradient-4, .brand-north-spin .bg-gradient-4 { background: linear-gradient(153deg, #199258 4.38%, #03c14f 81.13%); } .brand-north-spin .bg-bg-gradient-service-page, .brand-north-spin .bg-gradient-service-page { background: radial-gradient(67.63% 97.68% at 50% 0, #222245 0, #0d0d2b 64.25%, #06061f 87.18%, #090a15 100%); } .brand-north-spin .bg-bg-gradient-collection-card, .brand-north-spin .bg-gradient-collection-card { background: linear-gradient(180deg, #3b3b78 -149.6%, #01120f 81.2%); } .brand-north-spin .bg-bg-gradient-loader, .brand-north-spin .bg-gradient-loader { background: radial-gradient(104.17% 118.85% at 50% 0, #222245 0, #0d0d2b 50%, #000b0a 100%); } .brand-north-spin .bg-bg-gradient-bubble-menu, .brand-north-spin .bg-gradient-bubble-menu { background: radial-gradient(35.44% 35.44% at 50% 64.56%, rgba(33, 27, 71, .9) 46%, rgba(17, 20, 51, .9) 100%); } .brand-north-spin .bg-bg-gradient-vip-card, .brand-north-spin .bg-gradient-vip-card { background: radial-gradient(138.69% 41.85% at 50% 0, #051413 0, #051413 30%, #051413 100%); } .brand-special-order .bg-bg-gradient-1, .brand-special-order .bg-gradient-1 { background: linear-gradient(98deg, #f153ff -1.36%, #6948fe 102.7%); } .brand-special-order .bg-bg-gradient-2, .brand-special-order .bg-gradient-2 { background: linear-gradient(180deg, #f4e38b -24.36%, #f4dd62 23.01%, #b27f2a); } .brand-special-order .bg-bg-gradient-3, .brand-special-order .bg-gradient-3 { background: linear-gradient(153deg, #58cdff 4.38%, #2756fe 81.13%); } .brand-special-order .bg-bg-gradient-4, .brand-special-order .bg-gradient-4 { background: linear-gradient(153deg, #199258 4.38%, #03c14f 81.13%); } .brand-special-order .bg-bg-gradient-5, .brand-special-order .bg-gradient-5 { background: linear-gradient(138.65deg, #f4e38b 1.08%, #f4dd62 39.55%, #b27f2a 96.23%); } .brand-special-order .bg-bg-gradient-loader, .brand-special-order .bg-bg-gradient-service-page, .brand-special-order .bg-gradient-loader, .brand-special-order .bg-gradient-service-page { background: radial-gradient(67.63% 97.68% at 50% 0, #2c324a 0, #000712 64.25%, #00040b 87.18%, #000209 100%); } .border { border-style: solid; border-width: 1px; } .\[-ms-overflow-style\:none\] { -ms-overflow-style: none; } .\[-webkit-overflow-scrolling\:touch\] { -webkit-overflow-scrolling: touch; } .\[-webkit-text-fill-color\:transparent\] { -webkit-text-fill-color: transparent; } .\[animation-duration\:1\.5s\] { animation-duration: 1.5s; } .\[font-size\:inherit\] { font-size: inherit; } .\[font-weight\:inherit\] { font-weight: inherit; } .\[grid-area\:day\] { grid-area: day; } .\[grid-area\:month\] { grid-area: month; } .\[grid-area\:year\] { grid-area: year; } .\[line-height\:inherit\] { line-height: inherit; } .\[mask-image\:linear-gradient\(to_bottom\,black_70\%\,transparent_100\%\)\] { -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); } .\[scrollbar-width\:none\] { scrollbar-width: none; } .modal-close-btn { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } body, html { background-color: var(--html-background); overflow-x: hidden; position: relative; width: 100%; } *, :focus, :hover { outline: none; } body { background: linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb)); color: rgb(var(--foreground-rgb)); } body.facebook-browser.profile-page, html.facebook-browser.profile-page { overscroll-behavior: none; overscroll-behavior-y: none; } body.facebook-browser.profile-page { touch-action: pan-y; } body.facebook-browser.profile-page [data-testid=profile-bonus-history-container], body.facebook-browser.profile-page [data-testid^=profile-content-], body.facebook-browser.profile-page [data-testid^=profile-content-] [class*=overflow-y-auto] { overscroll-behavior: none; overscroll-behavior-y: none; } .sidebar-slide-enter { opacity: 0; transform: translate(-100%); } .sidebar-slide-enter-active { transition: transform .5s ease-out, opacity .5s ease-out; } .sidebar-slide-enter-active, .sidebar-slide-exit { opacity: 1; transform: translate(0); } .sidebar-slide-exit-active { opacity: 0; transform: translate(-100%); transition: transform .5s ease-out, opacity .5s ease-out; } .sidebar-overlay-enter { opacity: 0; } .sidebar-overlay-enter-active { opacity: 1; transition: opacity .5s ease-out; } .sidebar-overlay-exit { opacity: 1; } .sidebar-overlay-exit-active { opacity: 0; transition: opacity .5s ease-out; } @keyframes fadeIn { 0% { opacity: 0; } to { opacity: 1; } } @keyframes slideIn { 0% { opacity: 0; transform: translate(-100%); } to { opacity: 1; transform: translate(0); } } .border-gradient-primary { background: linear-gradient(153deg, #6658ff 4.38%, #3627fe 81.13%); background: linear-gradient(var(--border-gradient-primary-angle), var(--border-gradient-primary-start) 4.38%, var(--border-gradient-primary-end) 81.13%); border: 1px solid hsla(0, 0%, 100%, .3); border: 1px solid rgba(255, 255, 255, var(--border-gradient-opacity)); } .overflow-x-auto::-webkit-scrollbar, .overflow-y-auto::-webkit-scrollbar { width: 2px; width: var(--scrollbar-thin-width); } .overflow-x-auto::-webkit-scrollbar-track, .overflow-y-auto::-webkit-scrollbar-track { background: transparent; background: var(--scrollbar-track-color); } .overflow-x-auto::-webkit-scrollbar-thumb, .overflow-y-auto::-webkit-scrollbar-thumb { background-color: #4b5dda; background-color: var(--scrollbar-thumb-color-primary); height: 20px; } .overflow-x-auto, .overflow-y-auto { scrollbar-color: #4b5dda transparent; scrollbar-color: var(--scrollbar-thumb-color-primary) var(--scrollbar-track-color); scrollbar-width: thin; scrollbar-width: var(--scrollbar-firefox-width); } .bonus-history-scroll::-webkit-scrollbar { width: 4px; } .bonus-history-scroll::-webkit-scrollbar-thumb { border-radius: 2px; } .bonus-history-scroll { scrollbar-width: thin; } @media (max-width: 639px) { .bonus-history-container::-webkit-scrollbar { display: none; } .bonus-history-container { -ms-overflow-style: none; scrollbar-width: none; } } *, :focus { outline: none !important; } :focus { box-shadow: none !important; } :focus-visible { box-shadow: none !important; outline: none !important; } .focus\:outline_none:focus, [role=button], [role=button]:focus, button, button:focus, input, input:focus, select, select:focus, textarea, textarea:focus { box-shadow: none !important; outline: none !important; } .focus\:ring-0:focus { --tw-ring-offset-shadow: none !important; --tw-ring-shadow: none !important; box-shadow: none !important; } .focus\:ring-offset-0:focus { --tw-ring-offset-width: 0px !important; } .scrollbar-hide::-webkit-scrollbar { display: none; } .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; } @supports (-webkit-touch-callout: none) { @media (orientation: landscape) and (max-width: 1023px) { #root { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } } } h1 { font-size: 26px; font-weight: 700; line-height: 140%; margin: 0; padding: 0; } h2, h3 { font-size: 22px; } h2, h3, h4 { font-weight: 700; line-height: 140%; margin: 0; padding: 0; } h4 { font-size: 20px; } h5 { font-size: 18px; font-weight: 700; line-height: 140%; } body, h5, p { margin: 0; padding: 0; } a, dl, ol, ul { font-size: 16px; font-weight: 400; line-height: 140%; margin: 0; padding: 0; } a { color: inherit; -webkit-text-decoration: none; text-decoration: none; } :root { --calendar-light-background: var(--color-light-background); --calendar-light-border: var(--color-light-border); --calendar-light-day-color: var(--color-light-foreground); --calendar-dark-background: var(--color-dark-background); --calendar-dark-background-secondary: var(--color-dark-background); --calendar-dark-border: var(--color-dark-border); --calendar-dark-day-color: var(--color-dark-foreground); --calendar-light-selected-background: var(--color-primary); --calendar-light-selected-color: var(--color-primary-foreground); --calendar-light-disabled-background: var(--color-light-secondary); --calendar-light-disabled-color: var(--color-light-muted); --calendar-dark-selected-background: var(--color-primary); --calendar-dark-selected-color: var(--color-primary-foreground); --calendar-dark-disabled-background: var(--color-gray-700); --calendar-dark-disabled-color: var(--color-gray-500); --calendar-light-arrows: var(--color-light-foreground); --calendar-dark-arrows: var(--color-dark-foreground); --calendar-text-size: 14px; --calendar-text-size-sm: 16px; --calendar-input-padding: 12px; --calendar-input-padding-left: 40px; --calendar-input-width: 100%; --calendar-icon-top: 50%; --calendar-icon-container-size: 30px; --calendar-icon-container-radius: 8px; --calendar-icon-size: 16px; --calendar-label-text-size: 14px; --calendar-label-text-size-sm: 16px; --calendar-label-margin: 8px; --calendar-label-color: var(--color-white-60); } .react-datepicker { position: relative; } .react-datepicker__current-month { display: none !important; } .header-container { align-items: center; box-sizing: border-box; display: flex; justify-content: space-between; width: 100%; } .nav-button { cursor: pointer; } .nav-button:disabled { cursor: not-allowed; opacity: .5; } .react-datepicker__month { display: block !important; width: 100% !important; } .react-datepicker__week { display: flex; flex-direction: row; gap: 2px; justify-content: center; width: 100%; } .react-datepicker__week:not(:first-child) { margin-top: 8px; } .react-datepicker__day { align-items: center; display: flex; flex: 0 0 42px; height: 36px; justify-content: center; margin: 0; padding: 0; text-align: center; } .react-datepicker__day-names { display: flex; gap: 2px; margin: 0 !important; } .react-datepicker__day-names div { color: var(--text-secondary); font-size: 12px; font-weight: 400; line-height: 140%; text-align: center; width: 42px; } .react-datepicker__month { margin: 0 !important; } .react-datepicker-popper { z-index: 9999; } @media (max-width: 640px) { .react-datepicker__day { flex: initial; height: 36px; width: 41px; } } .react-datepicker__header { background-color: transparent; border-bottom: none; border-bottom: 0 !important; padding-bottom: 8px; } h2.react-datepicker__current-month { color: #1f2937; color: var(--calendar-light-day-color); margin-bottom: 10px; } .react-datepicker__navigation { background: none; border: none; cursor: pointer; height: 32px; width: 32px; } .react-datepicker__navigation--next, .react-datepicker__navigation--previous { position: absolute; top: 12px; } .react-datepicker__navigation--previous { right: 50px; } .react-datepicker__navigation--next { right: 16px; } .react-datepicker__navigation-icon:before { border-right: 2px solid #1f2937; border-right: 2px solid var(--calendar-light-arrows); border-top: 2px solid #1f2937; border-top: 2px solid var(--calendar-light-arrows); content: ""; display: inline-block; height: 10px; width: 10px; } .react-datepicker__triangle { display: none; } .react-datepicker .react-datepicker__day--range-end, .react-datepicker .react-datepicker__day--range-start, .react-datepicker .react-datepicker__day--selected { background-color: var(--bg-accent-8); } .react-datepicker .react-datepicker__day--today { border-color: var(--border-accent-8); border-style: solid; border-width: 1px; } .react-datepicker .react-datepicker__day--in-range:not(.react-datepicker__day--range-start):not(.react-datepicker__day--range-end) { background-color: var(--bg-basic-400); } .react-datepicker .react-datepicker__day { border-radius: 6px; font-size: 14px; font-weight: 600; line-height: 140%; } .react-datepicker .react-datepicker__day:hover { background-color: var(--bg-accent-8); } .react-datepicker__day--disabled { color: var(--text-secondary); cursor: not-allowed !important; pointer-events: none; } .react-datepicker__aria-live { display: none; } :root { --color-modal-background: var(--color-white); --color-modal-foreground: var(--color-gray-700); --color-modal-border: var(--color-gray-100); --color-modal-overlay: var(--color-black-50); --color-modal-close-button: var(--color-purple-400); --color-modal-close-button-hover-light: #1a1a2e; --color-modal-close-button-hover-dark: #2e2e4a; --color-dark-modal-background: var(--color-gray-900); --color-dark-modal-foreground: var(--color-white); --color-dark-modal-border: var(--color-purple-200); --color-dark-modal-overlay: var(--color-black-70); --light-border-modal: #eaecf3; --dark-border-modal: var(--color-purple-600); --font-size-modal-title: 22px; --font-weight-modal-title: bold; --line-height-modal-title: 140%; --color-modal-title-light: var(--color-gray-800); --color-modal-title-dark: var(--color-white); --transition-duration: .3s; --transition-timing: cubic-bezier(.4, 0, .2, 1); --modal-padding: 24px; --modal-title-padding-x: 24px; --modal-title-padding-y: 16px; --modal-content-padding: 24px; --modal-close-icon-top: 8px; --modal-close-icon-right: 8px; --modal-close-icon-z-index: 1; --modal-default-width: 400px; --modal-z-index: 50; --modal-border-radius: 8px; --help-modal-card-bg-light: #f5f7f9; --help-modal-card-bg-dark: #141423; --help-modal-card-border-light: #e4e4e7; --help-modal-card-border-dark: #335; --help-modal-card-hover-bg-light: var(--color-gray-200); --help-modal-card-hover-bg-dark: #1f1f32; --help-modal-card-title-color-light: var(--color-gray-800); --help-modal-card-text-color-light: #606b95; --help-modal-card-text-color-dark: #7f8bb9; --help-modal-card-hover-border: var(--color-blue-focus); --help-modal-heading-color-light: var(--color-gray-900); --help-modal-heading-color-dark: var(--color-white); --help-modal-icon-color-light: var(--light-dark-text); --help-modal-icon-color-dark: var(--color-white); --help-modal-icon-hover-color: var(--text-light-text-third); --help-modal-return-btn-bg-light: #f5f7f9; --help-modal-return-btn-bg-dark: #23233a; --help-modal-return-btn-border-light: var(--color-gray-200); --help-modal-return-btn-border-dark: #3f3f61; --help-modal-return-btn-hover-bg: var(--color-blue-focus); --help-modal-return-btn-text-light: var(--color-gray-800); --help-modal-return-btn-text-dark: var(--color-white); --help-modal-return-btn-hover-text: var(--color-white); --reset-password-modal-title-color-light: var(--color-gray-900); --reset-password-modal-title-color-dark: var(--color-white); --reset-password-modal-text-color-light: var(--color-gray-600); --reset-password-modal-text-color-dark: var(--color-white); --reset-password-modal-btn-primary-bg: var(--color-blue-600); --reset-password-modal-btn-primary-bg-hover: var(--color-blue-500); --reset-password-modal-btn-primary-bg-dark: var(--color-blue-700); --reset-password-modal-btn-primary-bg-dark-hover: var(--color-blue-600); --reset-password-modal-btn-primary-text: var(--color-white); --reset-password-modal-btn-disabled-bg: var(--color-gray-400); --reset-password-modal-btn-disabled-text: var(--color-white); --reset-password-modal-back-btn-bg-light: var(--help-modal-return-btn-bg-light); --reset-password-modal-back-btn-bg-dark: var(--help-modal-return-btn-bg-dark); --reset-password-modal-back-btn-hover-bg: var(--color-blue-focus); --reset-password-modal-back-btn-text-light: var(--color-gray-800); --reset-password-modal-back-btn-text-dark: var(--color-white); --reset-password-modal-back-btn-hover-text: var(--color-white); --reset-password-modal-back-btn-border-light: var(--color-gray-200); --reset-password-modal-back-btn-border-dark: var(--color-purple-200); --reset-password-modal-back-btn-hover-border: var(--color-blue-focus); --reset-password-modal-divider-color-light: var(--color-gray-200); --reset-password-modal-divider-color-dark: var(--color-purple-600); --reset-password-modal-resend-text-color-light: var(--color-gray-600); --reset-password-modal-resend-text-color-dark: var(--color-white); --reset-password-modal-resend-link-color-light: var(--color-blue-600); --reset-password-modal-resend-link-color-dark: var(--color-purple-100); --reset-password-modal-icon-light-fill: var(--light-dark-text); --reset-password-modal-icon-dark-fill: var(--color-white); --reset-password-modal-icon-hover-fill: var(--color-primary-foreground); --login-modal-width: 360px; --login-modal-padding: 16px; --login-tabs-border-radius: 14px; --login-tabs-padding: 4px; --login-tabs-width: 170px; --login-title-font-size: 20px; --login-title-margin-top: 0px; --light-dark-text: var(--color-gray-800); } @media (hover: none) and (pointer: coarse) { .touch-manipulation:hover { background-color: inherit !important; transform: none !important; } .touch-manipulation { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; } } :root { --auth-checkbox-border: var(--border-color-secondary); --auth-checkbox-size: 18px; --auth-checkbox-margin-top: 5px; --auth-checkbox-bg-checked: var(--color-blue-primary); --auth-checkbox-border-checked: var(--color-blue-primary); --auth-checkbox-border-radius: 4px; --auth-checkbox-label-margin: 20px; --auth-btn-primary-bg: var(--color-blue-primary); --auth-btn-primary-text: var(--color-white); --auth-btn-primary-hover-bg: var(--color-blue-hover); --auth-btn-disabled-bg: var(--color-gray-400); --auth-btn-disabled-text: var(--color-white); --crown-green-checkbox-border-radius: 8px; --crown-green-checkbox-bg-checked: var(--color-green-primary); --crown-green-checkbox-border-checked: var(--color-green-primary); --crown-green-password-strength-height: 6px; --crown-green-button-link-color: var(--color-green-primary); --promotion-card-border-radius: 20px; --promotion-card-light-border: #e4e4e7; --promotion-card-dark-border: #335; --promotion-card-background-light-theme: var(--color-white); --promotion-card-background-dark-theme: var(--color-green-darker); --promotion-content: 912px; --promotion-header-height: 232px; --promotion-header-padding-mobile: 16px; --promotion-header-padding-desktop: 32px; --promotion-header-background: #4c4dff; --promotion-header-text-color: var(--color-white); --promotion-content-padding-top: 20px; --promotion-content-padding-desktop: 32px; --promotion-content-description-color-light: #606b95; --promotion-content-description-color-dark: #7f8bb9; --promotion-promocode-background: hsla(0, 0%, 100%, .1); --promotion-promocode-border-color: hsla(0, 0%, 100%, .1); --promotion-promocode-text-color: var(--color-white); --promotion-promocode-border-radius: 30px; --promotion-inactive-reasons-background: #4c4dff; --promotion-inactive-reasons-text-color: var(--color-white); --promotion-other-section-icon-color: #ffcf73; --promotions-slider-arrow-spacing: 4px; --nav-balance-background-light: #f5f7f9; --nav-balance-background-dark: #1a1a31; --nav-balance-border-light: #d6dde7; --nav-balance-border-dark: #335; --nav-balance-border-radius: 12px; --nav-balance-height: 50px; --nav-currency-icon-background: #f6d43d; --nav-currency-icon-text-color: #000; --nav-currency-icon-size: 24px; --nav-currency-icon-border-radius: 9999px; --nav-balance-text-color-light: #27272a; --nav-balance-text-color-dark: #fff; --nav-balance-text-font-size: 15px; --nav-balance-text-font-weight: 700; --balance-display-gap: 8px; --balance-display-light-background: #f5f7f9; --balance-display-dark-background: #1a1a31; --balance-display-light-border: #d6dde7; --balance-display-dark-border: #335; --balance-display-border-radius: 12px; --currency-icon-background: #f6d43d; --currency-icon-text-color: #000; --currency-icon-size: 24px; --currency-icon-font-size: 14px; --currency-icon-font-weight: 700; --currency-icon-border-radius: 9999px; --balance-text-light-color: #27272a; --balance-text-dark-color: #fff; --balance-text-font-size: 15px; --balance-text-font-weight: 700; --nav-bottom-balance-height: 42px; --nav-bottom-balance-background-light: #f5f7f9; --nav-bottom-balance-background-dark: #1a1a31; --nav-bottom-balance-border-light: #d6dde7; --nav-bottom-balance-border-dark: #335; --nav-bottom-balance-border-radius: 12px; --nav-bottom-balance-text-light: #27272a; --nav-bottom-balance-text-dark: #fff; --nav-bottom-balance-text-size: 12px; --nav-bottom-balance-text-weight: 700; --deposit-button-header-bg: #4c4dff; --deposit-button-header-hover-from: #6658ff; --deposit-button-header-hover-to: #3627fe; --deposit-button-header-text: #fff; --deposit-button-header-border-radius: 12px; --deposit-button-header-padding: 12px; --deposit-button-footer-bg: #4c4dff; --deposit-button-footer-hover-from: #6658ff; --deposit-button-footer-hover-to: #3627fe; --deposit-button-footer-text: #fff; --deposit-button-footer-border-radius: 12px; --deposit-button-footer-padding: 8px; --deposit-button-sidebar-text: #fff; } .banner-slide { min-height: 274px; min-height: var(--banner-height); } .banner-content { left: 20px; left: var(--banner-content-left); } .banner-button { left: 0; left: var(--banner-button-left); } .banner-title { font-size: 14px; font-size: var(--banner-title-font-size); } .banner-description { font-size: 22px; font-size: var(--banner-description-font-size); } @media (min-width: 768px) { .banner-slide { min-height: 370px; min-height: var(--banner-height-desktop); } .banner-content { left: 30px; left: var(--banner-content-left-desktop); } .banner-button { left: 0; left: var(--banner-button-left-desktop); } .banner-title { font-size: 28px; font-size: var(--banner-title-font-size-desktop); } .banner-description { font-size: 38px; font-size: var(--banner-description-font-size-desktop); } } .infinite-marquee-container { background-color: var(--marquee-bg, var(--color-base-dark)); overflow: hidden; position: relative; width: 100%; -webkit-overflow-scrolling: touch; } .marquee-track { perspective: 1000; -webkit-perspective: 1000; width: -moz-max-content; width: max-content; } .marquee-content, .marquee-track { backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; transform: translateZ(0); -webkit-transform: translateZ(0); } .marquee-content, .marquee-item { align-items: center; } .marquee-item { display: flex; justify-content: center; } .animate-marquee-left { animation: marquee-left 31.25s linear infinite; animation: marquee-left var(--animation-duration, 31.25s) linear infinite; -webkit-animation: marquee-left 31.25s linear infinite; -webkit-animation: marquee-left var(--animation-duration, 31.25s) linear infinite; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; animation-play-state: running; -webkit-animation-play-state: running; } @keyframes marquee-left { 0% { transform: translateZ(0); } to { transform: translate3d(-100%, 0, 0); } } .file-upload-status-reason { color: #fff; color: var(--color-alpha-contrast, #fff); font-size: 14px; line-height: 140%; text-align: left; } .file-upload-status-reason :where(h1, h2, h3, p, ul, ol, blockquote) { margin: 0; } .file-upload-status-reason .ql-align-center { text-align: center; } .file-upload-status-reason .ql-align-right { text-align: right; } .file-upload-status-reason h1, .file-upload-status-reason h2, .file-upload-status-reason h3 { font-weight: 600; } .file-upload-status-reason h1 { font-size: 18px; } .file-upload-status-reason h2 { font-size: 16px; } .file-upload-status-reason h3 { font-size: 14px; } .file-upload-status-reason b, .file-upload-status-reason strong { font-weight: 600; } .file-upload-status-reason em, .file-upload-status-reason i { font-style: italic; } .file-upload-status-reason u { -webkit-text-decoration: underline; text-decoration: underline; } .file-upload-status-reason del, .file-upload-status-reason s { -webkit-text-decoration: line-through; text-decoration: line-through; } .file-upload-status-reason blockquote { display: inline-block; padding: 0 8px; position: relative; } .file-upload-status-reason blockquote:after, .file-upload-status-reason blockquote:before { position: absolute; top: 0; } .file-upload-status-reason blockquote:before { content: "\201c"; left: 0; } .file-upload-status-reason blockquote:after { content: "\201d"; right: 0; } .file-upload-status-reason a { color: #ffd480; color: var(--color-yellow-300, #ffd480); -webkit-text-decoration: underline; text-decoration: underline; } .file-upload-status-reason li[data-list=bullet] { list-style-type: disc; } .file-upload-status-reason li[data-list=ordered] { list-style-type: decimal; } .file-upload-status-reason ol, .file-upload-status-reason ul { color: #ffffff80; color: var(--color-alpha-contrast-50, hsla(0, 0%, 100%, .5)); font-size: 14px; font-weight: 500; padding-left: 18px; text-align: left; } .file-upload-status-reason li { margin: 0; } .file-upload-status-reason li+li { margin-top: 4px; } .file-upload-status-reason .ql-indent-1 { padding-left: 20px; text-align: left; } .file-upload-status-reason .ql-indent-2 { padding-left: 40px; text-align: left; } .file-upload-status-reason ol>li:not([data-list]) { list-style-type: decimal; } .file-upload-status-reason ul>li:not([data-list]) { list-style-type: disc; } :root { font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { margin: 0; min-height: 100dvh; min-width: 320px; } .loader { animation: breathing 1.6s ease-out infinite; z-index: 99999; } @keyframes breathing { 0% { transform: scale(1); } 50% { transform: scale(1.14); } to { transform: scale(1); } } input:-webkit-autofill { -webkit-transition: background-color 600000s 0s, color 600000s 0s; transition: background-color 600000s 0s, color 600000s 0s; } input[type=checkbox]:checked { background-color: #4c4dff; border-color: #4c4dff; } input[type=checkbox]:checked:after { border: solid #fff; border-width: 0 2px 2px 0; content: ""; display: block; height: 10px; left: 6px; position: relative; top: 2px; transform: rotate(45deg); width: 5px; } .\*\:truncate>* { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .placeholder\:text-di-text-placeholder::-moz-placeholder { color: var(--text-di-text-placeholder); } .placeholder\:text-di-text-placeholder::placeholder { color: var(--text-di-text-placeholder); } .after\:absolute:after { content: var(--tw-content); position: absolute; } .after\:size-full:after { content: var(--tw-content); height: 100%; width: 100%; } .after\:rounded-full:after { border-radius: 9999px; content: var(--tw-content); } .after\:content-\[\"\"\]:after { --tw-content: ""; content: ""; content: var(--tw-content); } .first\:mt-0:first-child { margin-top: 0; } .last\:border-b-0:last-child { border-bottom-width: 0; } .checked\:border-\[5px\]:checked { border-width: 5px; } .checked\:border-control-border-active:checked { border-color: var(--border-control-border-active); } .hover\:scale-110:hover { --tw-scale-x: 1.1; --tw-scale-y: 1.1; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(1.1) scaleY(1.1); transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .hover\:rounded-2xl:hover { border-radius: 16px; } .hover\:bg-\[var\(--theme-switcher-inactive-btn-hover-dark-bg\)\]:hover { background-color: #141423; background-color: var(--theme-switcher-inactive-btn-hover-dark-bg); } .hover\:bg-\[white\/10\]:hover { background-color: #fff/10; } .hover\:bg-transparent:hover { background-color: transparent; } .hover\:text-white:hover { --tw-text-opacity: 1; color: #fff; color: rgba(255, 255, 255, var(--tw-text-opacity, 1)); } .hover\:underline:hover { text-decoration-line: underline; } .hover\:no-underline:hover { text-decoration-line: none; } .hover\:opacity-100:hover { opacity: 1; } .hover\:opacity-80:hover { opacity: .8; } .hover\:bg-basic-900:hover { background-color: var(--bg-basic-900); } .hover\:bg-basic-300:hover { background-color: var(--bg-basic-300); } .hover\:bg-basic-200:hover { background-color: var(--bg-basic-200); } .hover\:bg-basic-000-10:hover { background-color: var(--bg-basic-000-10); } .hover\:bg-semantic-error-10:hover { background-color: var(--bg-semantic-error-10); } .hover\:bg-semantic-success-10:hover { background-color: var(--bg-semantic-success-10); } .hover\:border-basic-500:hover { border-color: var(--border-basic-500); } .hover\:border-basic-200:hover { border-color: var(--border-basic-200); } .hover\:border-accent-5:hover { border-color: var(--border-accent-5); } .hover\:border-accent-8:hover { border-color: var(--border-accent-8); } .hover\:bg-di-bg-hover:hover { background-color: var(--bg-di-bg-hover); } .hover\:border-di-border-active:hover { border-color: var(--border-di-border-active); } .hover\:text-di-icon-active:hover { color: var(--text-di-icon-active); } .hover\:button-blurred-bg-active:hover { background-color: var(--button-blurred-bg-active); } .hover\:button-blurred-border-active:hover { border-color: var(--button-blurred-border-active); } .hover\:button-blurred-icon-active:hover { color: var(--button-blurred-icon-active); } .hover\:text-primary:hover { color: var(--text-primary); } .hover\:text-accent-4:hover { color: var(--text-accent-4); } .hover\:bg-button-blurred-bg-active:hover { background-color: var(--bg-button-blurred-bg-active); } .hover\:border-button-blurred-border-active:hover { border-color: var(--border-button-blurred-border-active); } .focus\:pb-1:focus { padding-bottom: .25rem; } .focus\:pt-4:focus { padding-top: 1rem; } .focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; } .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(var(--tw-ring-offset-width)) var(--tw-ring-color); } .focus\:ring-0:focus, .focus\:ring-2:focus { box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 transparent; box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 transparent); } .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); } .focus\:ring-offset-0:focus { --tw-ring-offset-width: 0px; } .focus\:ring-offset-2:focus { --tw-ring-offset-width: 2px; } .focus\:bg-basic-300:focus { background-color: var(--bg-basic-300); } .focus\:bg-di-bg-hover:focus { background-color: var(--bg-di-bg-hover); } .focus\:bg-di-bg-active:focus { background-color: var(--bg-di-bg-active); } .focus\:border-di-border-focus:focus { border-color: var(--border-di-border-focus); } .focus-visible\:outline-none:focus-visible { outline: 2px solid transparent; outline-offset: 2px; } .focus-visible\:ring: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(3px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 transparent; box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 transparent); } .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), 0 0 transparent; box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 transparent); } .focus-visible\:ring-\[border-control-border-active\]:focus-visible { --tw-ring-color: border-control-border-active; } .focus-visible\:ring-offset-2:focus-visible { --tw-ring-offset-width: 2px; } .active\:scale-95:active { --tw-scale-x: .95; --tw-scale-y: .95; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(.95) scaleY(.95); transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .active\:border-transparent:active { border-color: transparent; } .active\:bg-basic-300:active { background-color: var(--bg-basic-300); } .active\:border-basic-200:active { border-color: var(--border-basic-200); } .active\:button-secondary-bg-active:active { background-color: var(--button-secondary-bg-active); } .active\:button-blurred-bg-active:active { background-color: var(--button-blurred-bg-active); } .active\:button-blurred-border-active:active { border-color: var(--button-blurred-border-active); } .active\:button-blurred-icon-active:active { color: var(--button-blurred-icon-active); } .active\:text-primary:active { color: var(--text-primary); } .disabled\:pointer-events-none:disabled { pointer-events: none; } .disabled\:cursor-not-allowed:disabled { cursor: not-allowed; } .disabled\:opacity-100:disabled { opacity: 1; } .disabled\:opacity-50:disabled { opacity: .5; } .group:hover .group-hover\:pointer-events-auto { pointer-events: auto; } .group:hover .group-hover\:scale-\[var\(--gamecard-hover-scale\)\] { --tw-scale-x: var(--gamecard-hover-scale); --tw-scale-y: var(--gamecard-hover-scale); transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(1.05) scaleY(1.05); transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .group:hover .group-hover\:opacity-100 { opacity: 1; } .group:hover .group-hover\:text-di-text { color: var(--text-di-text); } .group:hover .group-hover\:text-di-icon-active { color: var(--text-di-icon-active); } .group:hover .group-hover\:text-primary { color: var(--text-primary); } .group:hover .group-hover\:text-accent-5 { color: var(--text-accent-5); } .group:hover .group-hover\:icon-accent-8 { color: var(--icon-accent-8); } .group:hover .group-hover\:icon-active-sidebar { color: var(--icon-active-sidebar); } .group:focus .group-focus\:text-di-text { color: var(--text-di-text); } .group:active .group-active\:scale-\[var\(--gamecard-active-scale\)\] { --tw-scale-x: var(--gamecard-active-scale); --tw-scale-y: var(--gamecard-active-scale); transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(.95) scaleY(.95); transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .peer:-moz-placeholder~.peer-placeholder-shown\:top-1\/2 { top: 50%; } .peer:placeholder-shown~.peer-placeholder-shown\:top-1\/2 { top: 50%; } .peer:focus~.peer-focus\:top-3 { top: .75rem; } .peer:focus~.peer-focus\:text-xs { font-size: 12px; line-height: 140%; } .peer:focus~.peer-focus\:leading-4 { line-height: 1rem; } .peer:focus~.peer-focus\:text-di-icon-active { color: var(--text-di-icon-active); } .peer:disabled~.peer-disabled\:cursor-not-allowed { cursor: not-allowed; } .peer:disabled~.peer-disabled\:opacity-70 { opacity: .7; } .data-\[disabled\]\:pointer-events-none[data-disabled] { pointer-events: none; } .data-\[side\=bottom\]\:translate-y-0\.5[data-side=bottom] { --tw-translate-y: .125rem; transform: translate(var(--tw-translate-x), .125rem) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .data-\[side\=left\]\:-translate-x-0\.5[data-side=left] { --tw-translate-x: -.125rem; transform: translate(-.125rem, var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .data-\[side\=right\]\:translate-x-0\.5[data-side=right] { --tw-translate-x: .125rem; transform: translate(.125rem, var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .data-\[side\=top\]\:-translate-y-0\.5[data-side=top] { --tw-translate-y: -.125rem; transform: translate(var(--tw-translate-x), -.125rem) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .data-\[state\=open\]\:scale-100[data-state=open] { --tw-scale-x: 1; --tw-scale-y: 1; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(1) scaleY(1); transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } @keyframes accordion-up { 0% { height: var(--radix-accordion-content-height); } to { height: 0; } } .data-\[state\=closed\]\:animate-accordion-up[data-state=closed] { animation: accordion-up .2s ease-out; } @keyframes accordion-down { 0% { height: 0; } to { height: var(--radix-accordion-content-height); } } .data-\[state\=open\]\:animate-accordion-down[data-state=open] { animation: accordion-down .2s ease-out; } .data-\[state\=active\]\:rounded-\[40px\][data-state=active] { border-radius: 40px; } .data-\[state\=active\]\:rounded-\[var\(--navigation-tabs-active-border-radius\)\][data-state=active] { border-radius: .375rem; border-radius: var(--navigation-tabs-active-border-radius); } .data-\[state\=active\]\:bg-\[var\(--navigation-tabs-active-background\)\][data-state=active] { background-color: #36f; background-color: var(--navigation-tabs-active-background); } .data-\[state\=active\]\:text-\[var\(--navigation-tabs-active-text-color\)\][data-state=active] { color: #fff; color: var(--navigation-tabs-active-text-color); } .data-\[disabled\]\:opacity-50[data-disabled] { opacity: .5; } .data-\[state\=open\]\:opacity-100[data-state=open] { opacity: 1; } .data-\[state\=closed\]\:duration-300[data-state=closed] { transition-duration: .3s; } .data-\[state\=open\]\:duration-500[data-state=open] { transition-duration: .5s; } .data-\[state\=open\]\:animate-in[data-state=open] { animation-duration: .15s; animation-name: enter; --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-duration: .15s; animation-name: exit; --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: -.5rem; } .data-\[side\=left\]\:slide-in-from-right-2[data-side=left] { --tw-enter-translate-x: .5rem; } .data-\[side\=right\]\:slide-in-from-left-2[data-side=right] { --tw-enter-translate-x: -.5rem; } .data-\[side\=top\]\:slide-in-from-bottom-2[data-side=top] { --tw-enter-translate-y: .5rem; } .data-\[state\=closed\]\:slide-out-to-bottom[data-state=closed] { --tw-exit-translate-y: 100%; } .data-\[state\=closed\]\:slide-out-to-left[data-state=closed] { --tw-exit-translate-x: -100%; } .data-\[state\=closed\]\:slide-out-to-right[data-state=closed] { --tw-exit-translate-x: 100%; } .data-\[state\=closed\]\:slide-out-to-top[data-state=closed] { --tw-exit-translate-y: -100%; } .data-\[state\=open\]\:slide-in-from-bottom[data-state=open] { --tw-enter-translate-y: 100%; } .data-\[state\=open\]\:slide-in-from-left[data-state=open] { --tw-enter-translate-x: -100%; } .data-\[state\=open\]\:slide-in-from-right[data-state=open] { --tw-enter-translate-x: 100%; } .data-\[state\=open\]\:slide-in-from-top[data-state=open] { --tw-enter-translate-y: -100%; } .data-\[state\=closed\]\:duration-300[data-state=closed] { animation-duration: .3s; } .data-\[state\=open\]\:duration-500[data-state=open] { animation-duration: .5s; } .data-\[state\=open\]\:bg-basic-500[data-state=open] { background-color: var(--bg-basic-500); } .data-\[state\=open\]\:bg-basic-400[data-state=open] { background-color: var(--bg-basic-400); } .data-\[state\=active\]\:bg-basic-300[data-state=active] { background-color: var(--bg-basic-300); } .data-\[highlighted\]\:bg-basic-200[data-highlighted], .data-\[state\=checked\]\:bg-basic-200[data-state=checked] { background-color: var(--bg-basic-200); } .data-\[state\=checked\]\:border-control-border-active[data-state=checked] { border-color: var(--border-control-border-active); } .data-\[state\=checked\]\:bg-control-bg-active[data-state=checked] { background-color: var(--bg-control-bg-active); } .data-\[state\=checked\]\:text-control-icon-active[data-state=checked] { color: var(--text-control-icon-active); } .data-\[state\=open\]\:border-basic-400[data-state=open] { border-color: var(--border-basic-400); } .data-\[state\=open\]\:border-basic-000-10[data-state=open] { border-color: var(--border-basic-000-10); } .data-\[state\=open\]\:bg-di-bg-default[data-state=open] { background-color: var(--bg-di-bg-default); } .data-\[state\=active\]\:border-di-border-default[data-state=active] { border-color: var(--border-di-border-default); } .data-\[state\=open\]\:border-di-border-active[data-state=open] { border-color: var(--border-di-border-active); } .data-\[state\=active\]\:text-primary[data-state=active], .data-\[state\=open\]\:text-primary[data-state=open] { color: var(--text-primary); } .data-\[highlighted\]\:text-contrast[data-highlighted], .data-\[state\=checked\]\:text-contrast[data-state=checked] { color: var(--text-contrast); } .data-\[state\=open\]\:icon-basic-white-contrast[data-state=open] { color: var(--icon-basic-white-contrast); } .group[data-state=open] .group-data-\[state\=open\]\:rotate-180 { --tw-rotate: 180deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(180deg) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .group[data-state=closed] .group-data-\[state\=closed\]\:rounded-3xl { border-radius: 24px; } .group[data-state=open] .group-data-\[state\=open\]\:rounded-t-3xl { border-top-left-radius: 24px; border-top-right-radius: 24px; } .group[data-state=open] .group-data-\[state\=open\]\:border-x { border-left-width: 1px; border-right-width: 1px; } .group[data-state=open] .group-data-\[state\=open\]\:border-t { border-top-width: 1px; } .group[data-state=closed] .group-data-\[state\=closed\]\:border-transparent { border-color: transparent; } .group[data-state=open] .group-data-\[state\=open\]\:border-basic-400 { border-color: var(--border-basic-400); } .group[data-state=closed] .group-data-\[state\=closed\]\:icon-basic-100 { color: var(--icon-basic-100); } .group[data-state=closed] .group-data-\[state\=closed\]\:border { border-style: solid; border-width: 1px; } .group[data-state=closed] .group-data-\[state\=closed\]\:hover\:border-basic-400:hover { border-color: var(--border-basic-400); } @supports (-webkit-touch-callout: none) { .supports-\[\(-webkit-touch-callout\:none\)\]\:h-\[52px\] { height: 52px; } .supports-\[\(-webkit-touch-callout\:none\)\]\:w-\[52px\] { width: 52px; } } .dark .dark\:border-\[\#3f3f61\] { --tw-border-opacity: 1; border-color: #3f3f61; border-color: rgba(63, 63, 97, var(--tw-border-opacity, 1)); } .dark .dark\:fill-\[var\(--close-icon-fill-dark\)\] { fill: #a9b5e6; fill: var(--close-icon-fill-dark); } .dark .dark\:text-\[\#6b7280\] { --tw-text-opacity: 1; color: #6b7280; color: rgba(107, 114, 128, var(--tw-text-opacity, 1)); } .dark .dark\:text-primary { color: var(--text-primary); } @media not all and (min-width: 640px) { .max-sm\:z-20 { z-index: 20; } } @media (max-width: 400px) { .max-\[400px\]\:max-w-\[144px\] { max-width: 144px; } } @media (max-width: 380px) { .max-\[380px\]\:h-10 { height: 2.5rem; } .max-\[380px\]\:h-\[60px\] { height: 60px; } .max-\[380px\]\:px-4 { padding-left: 1rem; padding-right: 1rem; } } @media (min-width: 381px) { .min-\[381px\]\:h-\[44px\] { height: 44px; } .min-\[381px\]\:h-\[64px\] { height: 64px; } .min-\[381px\]\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } } @media (min-width: 640px) { .sm\:static { position: static; } .sm\:absolute { position: absolute; } .sm\:relative { position: relative; } .sm\:sticky { position: sticky; } .sm\:inset-0 { inset: 0; } .sm\:inset-x-auto { left: auto; right: auto; } .sm\:bottom-0 { bottom: 0; } .sm\:left-0 { left: 0; } .sm\:left-\[30px\] { left: 30px; } .sm\:top-0 { top: 0; } .sm\:top-auto { top: auto; } .sm\:z-0 { z-index: 0; } .sm\:m-0 { margin: 0; } .sm\:-mx-0, .sm\:mx-0 { margin-left: 0; margin-right: 0; } .sm\:mx-3 { margin-left: .75rem; margin-right: .75rem; } .sm\:my-0 { margin-bottom: 0; margin-top: 0; } .sm\:my-2 { margin-bottom: .5rem; margin-top: .5rem; } .sm\:mb-0 { margin-bottom: 0; } .sm\:mb-4 { margin-bottom: 1rem; } .sm\:mb-6 { margin-bottom: 1.5rem; } .sm\:mb-7 { margin-bottom: 1.75rem; } .sm\:mb-\[29px\] { margin-bottom: 29px; } .sm\:ml-14 { margin-left: 3.5rem; } .sm\:ml-3 { margin-left: .75rem; } .sm\:ml-\[200px\] { margin-left: 200px; } .sm\:mr-0 { margin-right: 0; } .sm\:mr-2 { margin-right: .5rem; } .sm\:mr-auto { margin-right: auto; } .sm\:mt-0 { margin-top: 0; } .sm\:mt-\[var\(--homepage-section-margin-top\)\] { margin-top: 1rem; margin-top: var(--homepage-section-margin-top); } .sm\:block { display: block; } .sm\:flex { display: flex; } .sm\:grid { display: grid; } .sm\:hidden { display: none; } .sm\:aspect-auto { aspect-ratio: auto; } .sm\:size-9 { height: 2.25rem; width: 2.25rem; } .sm\:size-\[280px\] { height: 280px; width: 280px; } .sm\:\!h-full { height: 100% !important; } .sm\:h-\[110px\] { height: 110px; } .sm\:h-\[153px\] { height: 153px; } .sm\:h-\[164px\] { height: 164px; } .sm\:h-\[182px\] { height: 182px; } .sm\:h-\[224px\] { height: 224px; } .sm\:h-\[330px\] { height: 330px; } .sm\:h-\[360px\] { height: 360px; } .sm\:h-\[370px\] { height: 370px; } .sm\:h-\[480px\] { height: 480px; } .sm\:h-\[520px\] { height: 520px; } .sm\:h-\[54px\] { height: 54px; } .sm\:h-\[60px\] { height: 60px; } .sm\:h-\[633px\] { height: 633px; } .sm\:h-\[700px\] { height: 700px; } .sm\:h-\[70px\] { height: 70px; } .sm\:h-\[720px\] { height: 720px; } .sm\:h-\[96px\] { height: 96px; } .sm\:h-\[calc\(232px\+2rem\*2\+100px\)\] { height: calc(332px + 4rem); } .sm\:h-auto { height: auto; } .sm\:max-h-\[calc\(100vh-220px\)\] { max-height: calc(100vh - 220px); } .sm\:max-h-\[calc\(100vh-240px\)\] { max-height: calc(100vh - 240px); } .sm\:max-h-\[max\(280px\,calc\(100vh-240px\)\)\] { max-height: max(280px, calc(100vh - 240px)); } .sm\:min-h-0 { min-height: 0; } .sm\:min-h-\[330px\] { min-height: 330px; } .sm\:min-h-\[370px\] { min-height: 370px; } .sm\:min-h-\[500px\] { min-height: 500px; } .sm\:min-h-\[calc\(100vh-150px\)\] { min-height: calc(100vh - 150px); } .sm\:\!w-\[346px\] { width: 346px !important; } .sm\:w-\[121px\] { width: 121px; } .sm\:w-\[135px\] { width: 135px; } .sm\:w-\[140px\] { width: 140px; } .sm\:w-\[148px\] { width: 148px; } .sm\:w-\[182px\] { width: 182px; } .sm\:w-\[185px\] { width: 185px; } .sm\:w-\[221px\] { width: 221px; } .sm\:w-\[240px\] { width: 240px; } .sm\:w-\[260px\] { width: 260px; } .sm\:w-\[280px\] { width: 280px; } .sm\:w-\[300px\] { width: 300px; } .sm\:w-\[336px\] { width: 336px; } .sm\:w-\[400px\] { width: 400px; } .sm\:w-\[432px\] { width: 432px; } .sm\:w-\[466px\] { width: 466px; } .sm\:w-\[calc\(50\%-8px\)\] { width: calc(50% - 8px); } .sm\:w-auto { width: auto; } .sm\:w-fit { width: -moz-fit-content; width: fit-content; } .sm\:w-full { width: 100%; } .sm\:min-w-\[116px\] { min-width: 116px; } .sm\:min-w-\[240px\] { min-width: 240px; } .sm\:\!max-w-\[346px\] { max-width: 346px !important; } .sm\:max-w-96 { max-width: 24rem; } .sm\:max-w-\[300px\] { max-width: 300px; } .sm\:max-w-\[360px\] { max-width: 360px; } .sm\:max-w-\[unset\] { max-width: none; } .sm\:max-w-max { max-width: -moz-max-content; max-width: max-content; } .sm\:max-w-md { max-width: 28rem; } .sm\:max-w-sm { max-width: 24rem; } .sm\:flex-none { flex: none; } .sm\:basis-1\/2 { flex-basis: 50%; } .sm\:basis-1\/3 { flex-basis: 33.333333%; } .sm\:basis-1\/4 { flex-basis: 25%; } .sm\:basis-1\/5 { flex-basis: 20%; } .sm\:basis-1\/6 { flex-basis: 16.666667%; } .sm\:basis-\[406px\] { flex-basis: 406px; } .sm\:translate-y-0 { --tw-translate-y: 0px; transform: translate(var(--tw-translate-x)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .sm\:translate-y-\[calc\(-100\%\+19px\)\] { --tw-translate-y: calc(-100% + 19px); transform: translate(var(--tw-translate-x), calc(-100% + 19px)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sm\:grid-cols-\[340px_466px\] { grid-template-columns: 340px 466px; } .sm\:flex-row { flex-direction: row; } .sm\:items-start { align-items: flex-start; } .sm\:items-end { align-items: flex-end; } .sm\:items-center { align-items: center; } .sm\:justify-start { justify-content: flex-start; } .sm\:justify-end { justify-content: flex-end; } .sm\:justify-center { justify-content: center; } .sm\:justify-between { justify-content: space-between; } .sm\:gap-3\.5 { gap: .875rem; } .sm\:gap-4 { gap: 1rem; } .sm\:gap-5 { gap: 1.25rem; } .sm\:gap-6 { gap: 1.5rem; } .sm\:gap-8 { gap: 2rem; } .sm\:gap-\[1\.875rem\] { gap: 1.875rem; } .sm\:gap-x-4 { -moz-column-gap: 1rem; column-gap: 1rem; } .sm\:space-x-2>:not([hidden])~:not([hidden]) { --tw-space-x-reverse: 0; margin-left: .5rem; margin-left: calc(.5rem*(1 - var(--tw-space-x-reverse))); margin-right: 0; margin-right: calc(.5rem*var(--tw-space-x-reverse)); } .sm\:space-x-\[30\%\]>:not([hidden])~:not([hidden]) { --tw-space-x-reverse: 0; margin-left: 30%; margin-left: calc(30%*(1 - var(--tw-space-x-reverse))); margin-right: 0; margin-right: calc(30%*var(--tw-space-x-reverse)); } .sm\:space-y-4>:not([hidden])~:not([hidden]) { --tw-space-y-reverse: 0; margin-bottom: 0; margin-bottom: calc(1rem*var(--tw-space-y-reverse)); margin-top: 1rem; margin-top: calc(1rem*(1 - var(--tw-space-y-reverse))); } .sm\:overflow-hidden { overflow: hidden; } .sm\:overflow-x-hidden { overflow-x: hidden; } .sm\:rounded-2\.5xl { border-radius: 20px; } .sm\:rounded-2xl { border-radius: 16px; } .sm\:rounded-3xl { border-radius: 24px; } .sm\:rounded-lg { border-radius: 8px; } .sm\:rounded-none { border-radius: 0; } .sm\:rounded-t-2\.5xl { border-top-left-radius: 20px; border-top-right-radius: 20px; } .sm\:border-0 { border-width: 0; } .sm\:border-b-0 { border-bottom-width: 0; } .sm\:border-none { border-style: none; } .sm\:bg-transparent { background-color: transparent; } .sm\:bg-auto { background-size: auto; } .sm\:p-0 { padding: 0; } .sm\:p-3 { padding: .75rem; } .sm\:p-4 { padding: 1rem; } .sm\:p-6 { padding: 1.5rem; } .sm\:p-8 { padding: 2rem; } .sm\:p-\[0_60px_60px\] { padding: 0 60px 60px; } .sm\:p-\[1\.875rem\] { padding: 1.875rem; } .sm\:p-\[30px\] { padding: 30px; } .sm\:px-0 { padding-left: 0; padding-right: 0; } .sm\:px-2 { padding-left: .5rem; padding-right: .5rem; } .sm\:px-4 { padding-left: 1rem; padding-right: 1rem; } .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } .sm\:px-8 { padding-left: 2rem; padding-right: 2rem; } .sm\:px-\[60px\] { padding-left: 60px; padding-right: 60px; } .sm\:py-0 { padding-bottom: 0; padding-top: 0; } .sm\:py-1 { padding-bottom: .25rem; padding-top: .25rem; } .sm\:py-10 { padding-bottom: 2.5rem; padding-top: 2.5rem; } .sm\:py-12 { padding-bottom: 3rem; padding-top: 3rem; } .sm\:py-\[10px\] { padding-bottom: 10px; padding-top: 10px; } .sm\:pb-0 { padding-bottom: 0; } .sm\:pb-12 { padding-bottom: 3rem; } .sm\:pb-2 { padding-bottom: .5rem; } .sm\:pb-3 { padding-bottom: .75rem; } .sm\:pb-4 { padding-bottom: 1rem; } .sm\:pb-8 { padding-bottom: 2rem; } .sm\:pb-\[128px\] { padding-bottom: 128px; } .sm\:pb-\[182px\] { padding-bottom: 182px; } .sm\:pl-0 { padding-left: 0; } .sm\:pr-0 { padding-right: 0; } .sm\:pt-0 { padding-top: 0; } .sm\:pt-12 { padding-top: 3rem; } .sm\:pt-8 { padding-top: 2rem; } .sm\:pt-\[224px\] { padding-top: 224px; } .sm\:text-left { text-align: left; } .sm\:text-3xl { font-size: 28px; line-height: 140%; } .sm\:text-4xl { font-size: 32px; line-height: 140%; } .sm\:text-6xl { font-size: 38px; line-height: 140%; } .sm\:text-7xl { font-size: 48px; line-height: 140%; } .sm\:text-\[16px\] { font-size: 16px; } .sm\:text-\[17px\] { font-size: 17px; } .sm\:text-\[18px\] { font-size: 18px; } .sm\:text-\[24px\] { font-size: 24px; } .sm\:text-\[26px\] { font-size: 26px; } .sm\:text-base { font-size: 16px; line-height: 140%; } .sm\:text-h1 { font-size: 26px; font-weight: 700; line-height: 140%; } .sm\:text-lg { font-size: 18px; line-height: 140%; } .sm\:text-xxl { font-size: 22px; line-height: 140%; } .sm\:font-bold { font-weight: 700; } .sm\:font-medium { font-weight: 500; } .sm\:bg-basic-700 { background-color: var(--bg-basic-700); } .sm\:hidden-bg { background-color: var(--hidden-bg); } .sm\:border-basic-400 { border-color: var(--border-basic-400); } .sm\:border-basic-000-10 { border-color: var(--border-basic-000-10); } .sm\:border { border-style: solid; border-width: 1px; } } @media (min-width: 768px) { .md\:bottom-\[26px\] { bottom: 26px; } .md\:col-start-1 { grid-column-start: 1; } .md\:mx-0 { margin-left: 0; margin-right: 0; } .md\:mx-auto { margin-left: auto; margin-right: auto; } .md\:\!mt-6 { margin-top: 1.5rem !important; } .md\:mb-2 { margin-bottom: .5rem; } .md\:mb-6 { margin-bottom: 1.5rem; } .md\:mr-0 { margin-right: 0; } .md\:mr-2 { margin-right: .5rem; } .md\:mr-5 { margin-right: 1.25rem; } .md\:mt-0 { margin-top: 0; } .md\:mt-2\.5 { margin-top: .625rem; } .md\:block { display: block; } .md\:flex { display: flex; } .md\:grid { display: grid; } .md\:hidden { display: none; } .md\:size-\[68px\] { height: 68px; width: 68px; } .md\:h-6 { height: 1.5rem; } .md\:h-\[32px\] { height: 32px; } .md\:h-\[430px\] { height: 430px; } .md\:h-\[44px\] { height: 44px; } .md\:h-\[calc\(100\%-50px\)\] { height: calc(100% - 50px); } .md\:h-auto { height: auto; } .md\:h-full { height: 100%; } .md\:w-6 { width: 1.5rem; } .md\:w-\[222px\] { width: 222px; } .md\:w-\[30\%\] { width: 30%; } .md\:w-\[330px\] { width: 330px; } .md\:w-\[434px\] { width: 434px; } .md\:w-\[70\%\] { width: 70%; } .md\:w-\[96px\] { width: 96px; } .md\:w-\[calc\(33\.33\%-11px\)\] { width: calc(33.33% - 11px); } .md\:w-\[calc\(33\.333\%-11px\)\] { width: calc(33.333% - 11px); } .md\:w-auto { width: auto; } .md\:w-full { width: 100%; } .md\:min-w-\[250px\] { min-width: 250px; } .md\:max-w-\[calc\(\(100\%-42px\)\/4\)\] { max-width: calc(25% - 10.5px); } .md\:flex-1 { flex: 1 1 0%; } .md\:basis-1\/3 { flex-basis: 33.333333%; } .md\:basis-1\/4 { flex-basis: 25%; } .md\:basis-1\/6 { flex-basis: 16.666667%; } .md\:basis-\[calc\(\(100\%-42px\)\/4\)\] { flex-basis: calc(25% - 10.5px); } .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .md\:grid-cols-\[3\] { grid-template-columns: 3; } .md\:grid-cols-\[minmax\(0\,1fr\)_auto\] { grid-template-columns: minmax(0, 1fr) auto; } .md\:flex-row { flex-direction: row; } .md\:items-center { align-items: center; } .md\:justify-start { justify-content: flex-start; } .md\:justify-between { justify-content: space-between; } .md\:gap-0 { gap: 0; } .md\:gap-10 { gap: 2.5rem; } .md\:gap-2\.5 { gap: .625rem; } .md\:gap-3 { gap: .75rem; } .md\:gap-6 { gap: 1.5rem; } .md\:gap-x-\[14px\] { -moz-column-gap: 14px; column-gap: 14px; } .md\:space-x-2>:not([hidden])~:not([hidden]) { --tw-space-x-reverse: 0; margin-left: .5rem; margin-left: calc(.5rem*(1 - var(--tw-space-x-reverse))); margin-right: 0; margin-right: calc(.5rem*var(--tw-space-x-reverse)); } .md\:space-y-0>:not([hidden])~:not([hidden]) { --tw-space-y-reverse: 0; margin-bottom: 0; margin-bottom: calc(0px*var(--tw-space-y-reverse)); margin-top: 0; margin-top: calc(0px*(1 - var(--tw-space-y-reverse))); } .md\:space-y-5>:not([hidden])~:not([hidden]) { --tw-space-y-reverse: 0; margin-bottom: 0; margin-bottom: calc(1.25rem*var(--tw-space-y-reverse)); margin-top: 1.25rem; margin-top: calc(1.25rem*(1 - var(--tw-space-y-reverse))); } .md\:rounded-2\.5xl { border-radius: 20px; } .md\:border-t { border-top-width: 1px; } .md\:border-solid { border-style: solid; } .md\:bg-\[position\:80\%\] { background-position: 80%; } .md\:\!p-0 { padding: 0 !important; } .md\:p-1\.5 { padding: .375rem; } .md\:p-2 { padding: .5rem; } .md\:p-3 { padding: .75rem; } .md\:p-6 { padding: 1.5rem; } .md\:px-0 { padding-left: 0; padding-right: 0; } .md\:px-8 { padding-left: 2rem; padding-right: 2rem; } .md\:py-2 { padding-bottom: .5rem; padding-top: .5rem; } .md\:py-5 { padding-bottom: 1.25rem; padding-top: 1.25rem; } .md\:text-left { text-align: left; } .md\:text-6xl { font-size: 38px; line-height: 140%; } .md\:text-lg { font-size: 18px; line-height: 140%; } .md\:text-sm { font-size: 14px; line-height: 140%; } .md\:bg-basic-800 { background-color: var(--bg-basic-800); } .md\:border { border-style: solid; border-width: 1px; } .md\:\[grid-template-columns\:repeat\(var\(--cols\)\,minmax\(0\,1fr\)\)\] { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); } } @media (min-width: 1024px) { .lg\:z-10 { z-index: 10; } .lg\:z-20 { z-index: 20; } .lg\:mb-3 { margin-bottom: .75rem; } .lg\:ml-auto { margin-left: auto; } .lg\:mt-4 { margin-top: 1rem; } .lg\:flex { display: flex; } .lg\:hidden { display: none; } .lg\:size-\[146px\] { height: 146px; width: 146px; } .lg\:size-\[150px\] { height: 150px; width: 150px; } .lg\:h-6 { height: 1.5rem; } .lg\:h-9 { height: 2.25rem; } .lg\:h-\[59px\] { height: 59px; } .lg\:h-auto { height: auto; } .lg\:h-full { height: 100%; } .lg\:h-screen { height: 100vh; } .lg\:max-h-none { max-height: none; } .lg\:min-h-\[600px\] { min-height: 600px; } .lg\:w-1\/2 { width: 50%; } .lg\:w-6 { width: 1.5rem; } .lg\:w-\[442px\] { width: 442px; } .lg\:w-\[calc\(25\%-12px\)\] { width: calc(25% - 12px); } .lg\:max-w-\[300px\] { max-width: 300px; } .lg\:max-w-\[calc\(\(100\%-70px\)\/6\)\] { max-width: calc(16.66667% - 11.66667px); } .lg\:basis-1\/6 { flex-basis: 16.666667%; } .lg\:basis-\[calc\(\(100\%-70px\)\/6\)\] { flex-basis: calc(16.66667% - 11.66667px); } .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .lg\:grid-cols-\[4\] { grid-template-columns: 4; } .lg\:flex-row { flex-direction: row; } .lg\:items-start { align-items: flex-start; } .lg\:items-center { align-items: center; } .lg\:justify-start { justify-content: flex-start; } .lg\:justify-end { justify-content: flex-end; } .lg\:justify-between { justify-content: space-between; } .lg\:gap-4 { gap: 1rem; } .lg\:gap-5 { gap: 1.25rem; } .lg\:gap-6 { gap: 1.5rem; } .lg\:gap-x-12 { -moz-column-gap: 3rem; column-gap: 3rem; } .lg\:overflow-y-auto { overflow-y: auto; } .lg\:rounded-\[14px\] { border-radius: 14px; } .lg\:rounded-none { border-radius: 0; } .lg\:p-1\.5 { padding: .375rem; } .lg\:p-7 { padding: 1.75rem; } .lg\:p-\[3\.625rem\] { padding: 3.625rem; } .lg\:p-\[30px_60px_60px\] { padding: 30px 60px 60px; } .lg\:px-4 { padding-left: 1rem; padding-right: 1rem; } .lg\:pb-4 { padding-bottom: 1rem; } .lg\:pl-4 { padding-left: 1rem; } .lg\:pl-8 { padding-left: 2rem; } .lg\:pl-\[210px\] { padding-left: 210px; } .lg\:pl-\[230px\] { padding-left: 230px; } .lg\:pr-4 { padding-right: 1rem; } .lg\:pr-8 { padding-right: 2rem; } .lg\:text-left { text-align: left; } .lg\:text-right { text-align: right; } } @media (min-width: 1280px) { .xl\:mx-auto { margin-left: auto; margin-right: auto; } .xl\:h-\[55px\] { height: 55px; } .xl\:w-\[calc\(20\%-13px\)\] { width: calc(20% - 13px); } .xl\:w-\[calc\(20px-13px\)\] { width: 7px; } .xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .xl\:grid-cols-\[5\] { grid-template-columns: 5; } .xl\:gap-20 { gap: 5rem; } } @media (min-width: 1536px) { .\32xl\:size-\[320px\] { height: 320px; width: 320px; } .\32xl\:h-12 { height: 3rem; } .\32xl\:h-8 { height: 2rem; } .\32xl\:text-8xl { font-size: 56px; line-height: 140%; } .\32xl\:text-xxl { font-size: 22px; line-height: 140%; } } @media (orientation: landscape) { .landscape\:ml-\[60px\] { margin-left: 60px; } .landscape\:w-\[calc\(100\%-60px\)\] { width: calc(100% - 60px); } } @media (min-width: 1024px) and (orientation: landscape) { .lg\:landscape\:ml-\[0px\] { margin-left: 0; } .lg\:landscape\:w-full { width: 100%; } } .\[\&\.active\]\:border-basic-200.active { border-color: var(--border-basic-200); } .\[\&\.active\]\:button-secondary-bg-active.active { background-color: var(--button-secondary-bg-active); } .\[\&\.active\]\:text-primary.active { color: var(--text-primary); } .\[\&\.hover\]\:bg-red-600.hover { --tw-bg-opacity: 1; background-color: #dc2626; background-color: rgba(220, 38, 38, var(--tw-bg-opacity, 1)); } .\[\&\.hover\]\:bg-white\/40.hover { background-color: #fff6; } .\[\&\.hover\]\:bg-yellow-600.hover { --tw-bg-opacity: 1; background-color: #ca8a04; background-color: rgba(202, 138, 4, var(--tw-bg-opacity, 1)); } .\[\&\.hover\]\:border-basic-200.hover { border-color: var(--border-basic-200); } .\[\&\.hover\]\:button-primary-border-hover.hover { border-color: var(--button-primary-border-hover); } .\[\&\.hover\]\:button-primary-text-active.hover { color: var(--button-primary-text-active); } .\[\&\.hover\]\:button-secondary-bg-active.hover { background-color: var(--button-secondary-bg-active); } .\[\&\.hover\]\:button-secondary-border-active.hover { border-color: var(--button-secondary-border-active); } .\[\&\.hover\]\:text-primary.hover { color: var(--text-primary); } .\[\&\.hover\]\:icon-basic-white.hover { color: var(--icon-basic-white); } .\[\&\.hover\]\:icon-basic-white-50.hover { color: var(--icon-basic-white-50); } .\[\&\.hover\]\:button-primary-bg-hover.hover { background-image: var(--button-primary-bg-hover); } .\[\&\:\:-moz-search-clear-button\]\:hidden::-moz-search-clear-button { display: none; } .\[\&\:\:-webkit-inner-spin-button\]\:appearance-none::-webkit-inner-spin-button, .\[\&\:\:-webkit-outer-spin-button\]\:appearance-none::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; } .\[\&\:\:-webkit-scrollbar-thumb\]\:bg-white\/20::-webkit-scrollbar-thumb { background-color: #fff3; } .\[\&\:\:-webkit-scrollbar-track\]\:bg-transparent::-webkit-scrollbar-track { background-color: transparent; } .\[\&\:\:-webkit-scrollbar\]\:hidden::-webkit-scrollbar { display: none; } .\[\&\:\:-webkit-scrollbar\]\:h-1::-webkit-scrollbar { height: .25rem; } .\[\&\:\:-webkit-search-cancel-button\]\:hidden::-webkit-search-cancel-button { display: none; } .\[\&\>\*\]\:w-full>* { width: 100%; } @media (min-width: 640px) { .\[\&\>\*\]\:sm\:w-\[200px\]>* { width: 200px; } } .\[\&\>br\]\:block>br { display: block; } .\[\&\>h2\]\:text-\[16px\]>h2 { font-size: 16px; } .\[\&\>h2\]\:font-semibold>h2 { font-weight: 600; } .\[\&\>h2\]\:leading-\[1\.4\]>h2 { line-height: 1.4; } .\[\&\>picture\]\:block>picture { display: block; } .\[\&\>picture\]\:size-full>picture { height: 100%; width: 100%; } .\[\&\[data-state\=active\]\]\:button-secondary-bg-active[data-state=active] { background-color: var(--button-secondary-bg-active); } .\[\&\[data-state\=active\]\]\:button-secondary-border-active[data-state=active] { border-color: var(--button-secondary-border-active); } @media (max-width: 1022px) and (orientation: landscape) { .\[\@media\(max-width\:1022px\)_and_\(orientation\:landscape\)\]\:max-h-\[calc\(100dvh-184px\)\] { max-height: calc(100dvh - 184px); } } @media (min-width: 1023px) { .\[\@media\(min-width\:1023px\)\]\:max-h-\[600px\] { max-height: 600px; } } /* Дополнительные стили для мобильной адаптации */ .sidebar-mobile { transition: transform 0.3s ease-in-out; } .sidebar-overlay { transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; } body.menu-open { overflow: hidden; } @media (min-width: 1024px) { .sidebar-mobile { transform: translateX(0) !important; } .sidebar-overlay { display: none !important; } } /* Бургер-кнопки: единый стиль 20x20 и hover */ .burger-menu-btn { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 9999px; border: 1px solid rgba(255, 255, 255, 0.2); background: transparent; transition: background 0.2s ease; cursor: pointer; } .burger-menu-btn svg { width: 20px; height: 20px; } .burger-menu-btn:hover { background: rgba(255, 255, 255, 0.1); } /* Скрываем кнопку чата в нижней панели только на телефонах */ @media (max-width: 639px) { .mobile-bottom-nav .live-chat-button { display: none !important; } } /* Верхняя панель: на телефонах скрываем бургер */ @media (max-width: 639px) { .navbar-container .burger-menu-btn { display: none !important; } } /* На планшетах и выше показываем бургер вверху, скрываем нижний бургер */ @media (min-width: 640px) { .mobile-bottom-nav .burger-menu-btn { display: none !important; } } /* На планшетах (640-1024px) показываем кнопки в navbar, на телефонах скрываем их */ @media (max-width: 639px) { .navbar-container .navbar-buttons { display: none !important; } } /* На телефонах сайдбар на всю ширину и не перекрывает нижнюю панель */ @media (max-width: 639px) { .sidebar-mobile { width: 100% !important; max-width: 100% !important; padding-bottom: 60px; } }