@font-face {
    font-family: 'KickFont';
    src: url('/assets/fonts/kick-font.otf') format('woff'),
}

:root {

    --danger-lower: #f2708a;
    --danger-base: #e9113c;

    --live-main: #53fc18;
    --live-text: #393b40;

    --caret-color: #53fc18;

    --chatroom-mention: #53fc18;

    --text-primary: #53fc18;
    --text-green-950: #081902;
    --text-green-800: #21650a;
    --text-green-500: #53fc18;
    --text-green-400: #75fd46;
    --text-danger-lower: #f2708a;
    --text-danger-base: #e9113c;

    --outline-primary: #53fc18;
    --outline-green-200: #bafea3;
    --outline-green-500: #53fc18;
    --outline-green-600: #42ca13;

    --bg-primary: #53fc18;
    --bg-green-800: #21650a;
    --bg-green-600: #42ca13;
    --bg-green-500: #53fc18;
    --bg-green-400: #75fd46;
    --bg-green-dark: #3ad305;
    --bg-green-darker: #21650a;
    --bg-green-tone-1: #52fc18;

    --button-text-color: #081902;
    --button-hover-text-color: #081902;
    --button-disabled-text-color: #081902;
    --button-disabled-hover-text-color: #081902;

    --page-load-progress-bar: #53fc18;

    --fill-primary: #53fc18;
    --fill-dark-1: #058C42;
    --fill-light-1: #DDFED1;
    --fill-green-tone-1: #1EFF00;
    --fill-green-500: #53fc18;
    --fill-green-400: #75fd46;

    --ring-green-500: #53fc18;

    --border-primary: #53fc18;
    --border-green-500: #53fc18;
    --border-green-500\/40: #53FC1866;
    --border-green-500\/66: #53FC18aa;
    --border-red-500\/40: #e9113c66;

    --border-danger-base: #e9113c;
    --border-danger-lower: #f2708a;

    --channel-live-banner-bg: #070809;
    --channel-live-banner-text: #75fd46;

    --channel-live-avatar-bg: #53fc18;
    --channel-live-avatar-text: #393b40;

    --checkbox-circle-checked: #414449;

    --chat-command-validation-color: #53fc18 !important;

}

input::-moz-placeholder,
textarea::-moz-placeholder {
    opacity: 1;
    color: #9ca3af
}

input::placeholder,
textarea::placeholder {
    opacity: 1;
    color: #9ca3af
}

.border-\[\#191b1f\] {
    --tw-border-opacity: 1;
    border-color: rgb(25 27 31/var(--tw-border-opacity))
}

.border-\[\#24272C\],
.border-\[\#24272c\] {
    --tw-border-opacity: 1;
    border-color: rgb(36 39 44/var(--tw-border-opacity))
}

.border-\[\#474F54\] {
    --tw-border-opacity: 1;
    border-color: rgb(71 79 84/var(--tw-border-opacity))
}

.border-\[\#A8B1B822\] {
    border-color: #a8b1b822
}

.border-\[\#CCCCCC\] {
    --tw-border-opacity: 1;
    border-color: rgb(204 204 204/var(--tw-border-opacity))
}

.border-\[\#F4F5F6\] {
    --tw-border-opacity: 1;
    border-color: rgb(244 245 246/var(--tw-border-opacity))
}

.border-\[\#FF9D00\] {
    --tw-border-opacity: 1;
    border-color: rgb(255 157 0/var(--tw-border-opacity))
}

.border-danger-base {
    --tw-border-opacity: 1;
    border-color: var(--border-danger-base)
}

.border-dropdown-separator {
    --tw-border-opacity: 1;
    border-color: rgba(49, 53, 56, var(--tw-border-opacity))
}

.border-green-500 {
    --tw-border-opacity: 1;
    border-color: var(--border-green-500)
}

.border-grey-400 {
    --tw-border-opacity: 1;
    border-color: rgba(127, 136, 145, var(--tw-border-opacity))
}

.border-grey-600 {
    --tw-border-opacity: 1;
    border-color: rgba(85, 92, 101, var(--tw-border-opacity))
}

.border-grey-700 {
    --tw-border-opacity: 1;
    border-color: rgba(73, 77, 85, var(--tw-border-opacity))
}

.border-grey-800 {
    --tw-border-opacity: 1;
    border-color: rgba(65, 68, 73, var(--tw-border-opacity))
}

.border-red-500\/40 {
    border-color: var(--border-red-500\/40)
}

.border-shade-lower {
    --tw-border-opacity: 1;
    border-color: rgba(35, 38, 40, var(--tw-border-opacity))
}

.border-surface-base\/50 {
    border-color: rgba(57, 59, 64, .5)
}

.border-surface-tint {
    --tw-border-opacity: 1;
    border-color: rgba(49, 53, 56, var(--tw-border-opacity))
}

.border-white {
    --tw-border-opacity: 1;
    border-color: rgb(255 255 255/var(--tw-border-opacity))
}

.border-white\/5 {
    border-color: hsla(0, 0%, 100%, .05)
}

.border-white\/50 {
    border-color: hsla(0, 0%, 100%, .5)
}

.border-y-\[\#24272c\] {
    --tw-border-opacity: 1;
    border-top-color: rgb(36 39 44/var(--tw-border-opacity));
    border-bottom-color: rgb(36 39 44/var(--tw-border-opacity))
}

.border-y-surface-base\/30 {
    border-top-color: rgba(57, 59, 64, .3);
    border-bottom-color: rgba(57, 59, 64, .3)
}

.border-b-surface-tint {
    --tw-border-opacity: 1;
    border-bottom-color: rgba(49, 53, 56, var(--tw-border-opacity))
}

.border-t-white\/20 {
    border-top-color: hsla(0, 0%, 100%, .2)
}

.border-opacity-20 {
    --tw-border-opacity: 0.2
}

.\!bg-\[\#21650A\] {
    background-color: var(--bg-green-dark) !important
}

.\!bg-gray-600 {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(75 85 99/var(--tw-bg-opacity)) !important
}

.\!bg-green-500 {
    --tw-bg-opacity: 1 !important;
    background-color: var(--bg-green-500)
}

.\!bg-surface-tint {
    --tw-bg-opacity: 1 !important;
    background-color: rgba(49, 53, 56, var(--tw-bg-opacity)) !important
}

.bg-\[\#070809\] {
    --tw-bg-opacity: 1;
    background-color: rgb(7 8 9/var(--tw-bg-opacity))
}

.bg-\[\#090A0B\] {
    --tw-bg-opacity: 1;
    background-color: rgb(9 10 11/var(--tw-bg-opacity))
}

.bg-\[\#0B0E0F\] {
    --tw-bg-opacity: 1;
    background-color: rgb(11 14 15/var(--tw-bg-opacity))
}

.bg-\[\#0F1214\] {
    --tw-bg-opacity: 1;
    background-color: rgb(15 18 20/var(--tw-bg-opacity))
}

.bg-\[\#0F1214\]\/5 {
    background-color: rgba(15, 18, 20, .05)
}

.bg-\[\#101214\] {
    --tw-bg-opacity: 1;
    background-color: rgb(16 18 20/var(--tw-bg-opacity))
}

.bg-\[\#1C1E21\] {
    --tw-bg-opacity: 1;
    background-color: rgb(28 30 33/var(--tw-bg-opacity))
}

.bg-\[\#222222\] {
    --tw-bg-opacity: 1;
    background-color: rgb(34 34 34/var(--tw-bg-opacity))
}

.bg-\[\#232628\] {
    --tw-bg-opacity: 1;
    background-color: rgb(35 38 40/var(--tw-bg-opacity))
}

.bg-\[\#24272C\],
.bg-\[\#24272c\] {
    --tw-bg-opacity: 1;
    background-color: rgb(36 39 44/var(--tw-bg-opacity))
}

.bg-\[\#2A2D32AA\] {
    background-color: #2a2d32aa
}

.bg-\[\#3AD305\] {
    --tw-bg-opacity: 1;
    background-color: var(--bg-green-dark)
}

.bg-\[\#52fc18\] {
    --tw-bg-opacity: 1;
    background-color: var(--bg-green-tone-1)
}

.bg-\[\#F4F5F6\] {
    --tw-bg-opacity: 1;
    background-color: rgb(244 245 246/var(--tw-bg-opacity))
}

.bg-\[\#F9688A\] {
    --tw-bg-opacity: 1;
    background-color: rgb(249 104 138/var(--tw-bg-opacity))
}

.bg-\[\#FF9D00\] {
    --tw-bg-opacity: 1;
    background-color: rgb(255 157 0/var(--tw-bg-opacity))
}

.bg-black {
    --tw-bg-opacity: 1;
    background-color: rgb(0 0 0/var(--tw-bg-opacity))
}

.bg-black\/15 {
    background-color: rgba(0, 0, 0, .15)
}

.bg-black\/20 {
    background-color: rgba(0, 0, 0, .2)
}

.bg-black\/50 {
    background-color: rgba(0, 0, 0, .5)
}

.bg-black\/70 {
    background-color: rgba(0, 0, 0, .7)
}

.bg-black\/75 {
    background-color: rgba(0, 0, 0, .75)
}

.bg-black\/80 {
    background-color: rgba(0, 0, 0, .8)
}

.bg-black\/90 {
    background-color: rgba(0, 0, 0, .9)
}

.bg-dropdown-separator {
    --tw-bg-opacity: 1;
    background-color: rgba(49, 53, 56, var(--tw-bg-opacity))
}

.bg-green-500 {
    --tw-bg-opacity: 1;
    background-color: var(--bg-green-500) !important;
}

.bg-grey-300 {
    --tw-bg-opacity: 1;
    background-color: rgba(170, 176, 182, var(--tw-bg-opacity))
}

.bg-grey-500 {
    --tw-bg-opacity: 1;
    background-color: rgba(100, 108, 118, var(--tw-bg-opacity))
}

.bg-grey-600 {
    --tw-bg-opacity: 1;
    background-color: rgba(85, 92, 101, var(--tw-bg-opacity))
}

.bg-grey-700 {
    --tw-bg-opacity: 1;
    background-color: rgba(73, 77, 85, var(--tw-bg-opacity))
}

.bg-grey-700\/50 {
    background-color: rgba(73, 77, 85, .5)
}

.bg-grey-800 {
    --tw-bg-opacity: 1;
    background-color: rgba(65, 68, 73, var(--tw-bg-opacity))
}

.bg-grey-900 {
    --tw-bg-opacity: 1;
    background-color: rgba(57, 59, 64, var(--tw-bg-opacity))
}

.bg-grey-900\/20 {
    background-color: rgba(57, 59, 64, .2)
}

.bg-grey-900\/25 {
    background-color: rgba(57, 59, 64, .25)
}

.bg-grey-950 {
    --tw-bg-opacity: 1;
    background-color: rgba(20, 21, 23, var(--tw-bg-opacity))
}

.bg-grey-950\/50 {
    background-color: rgba(20, 21, 23, .5)
}

.bg-neutral\/20 {
    background-color: rgba(168, 177, 184, .2)
}

.bg-orange-500 {
    --tw-bg-opacity: 1;
    background-color: rgba(255, 157, 0, var(--tw-bg-opacity))
}

.bg-primary {
    --tw-bg-opacity: 1;
    background-color: var(--bg-primary)
}

.bg-red-400\/15 {
    background-color: rgba(237, 65, 99, .15)
}

.bg-red-500 {
    --tw-bg-opacity: 1;
    background-color: rgba(233, 17, 60, var(--tw-bg-opacity))
}

.bg-red-500\/5 {
    background-color: rgba(233, 17, 60, .05)
}

.bg-red-700 {
    --tw-bg-opacity: 1;
    background-color: rgba(127, 18, 7, var(--tw-bg-opacity))
}

.bg-secondary\/20 {
    background-color: hsla(210, 8%, 69%, .2)
}

.bg-shade-base {
    --tw-bg-opacity: 1;
    background-color: rgba(23, 28, 30, var(--tw-bg-opacity))
}

.bg-shade-higher {
    --tw-bg-opacity: 1;
    background-color: rgba(25, 27, 31, var(--tw-bg-opacity))
}

.bg-shade-lower {
    --tw-bg-opacity: 1;
    background-color: rgba(35, 38, 40, var(--tw-bg-opacity))
}

.bg-shade-lower\/90 {
    background-color: rgba(35, 38, 40, .9)
}

.bg-slate-950 {
    --tw-bg-opacity: 1;
    background-color: rgb(2 6 23/var(--tw-bg-opacity))
}

.bg-subtle\/50 {
    background-color: rgba(146, 158, 166, .5)
}

.bg-surface-base {
    --tw-bg-opacity: 1;
    background-color: rgba(57, 59, 64, var(--tw-bg-opacity))
}

.bg-surface-base\/10 {
    background-color: rgba(57, 59, 64, .1)
}

.bg-surface-base\/50 {
    background-color: rgba(57, 59, 64, .5)
}

.bg-surface-higher {
    --tw-bg-opacity: 1;
    background-color: rgba(65, 68, 73, var(--tw-bg-opacity))
}

.bg-surface-lower {
    --tw-bg-opacity: 1;
    background-color: rgba(20, 21, 23, var(--tw-bg-opacity))
}

.bg-surface-lower\/50 {
    background-color: rgba(20, 21, 23, .5)
}

.bg-surface-tint {
    --tw-bg-opacity: 1;
    background-color: rgba(49, 53, 56, var(--tw-bg-opacity))
}

.fill-\[\#FF9D00\] {
    fill: #ff9d00
}

.fill-black {
    fill: #000
}

.fill-current {
    fill: currentColor
}

.fill-danger-lower {
    fill: var(--danger-lower);
}

.fill-green-500 {
    fill: var(--fill-green-500)
}

.fill-green-400 {
    fill: var(--fill-green-400)
}

.fill-grey-600 {
    fill: #555c65
}

.fill-grey-700 {
    fill: #494d55
}

.fill-neutral {
    fill: #a8b1b8
}

.fill-red-400 {
    fill: #ed4163
}

.fill-red-500 {
    fill: #e9113c
}

.fill-secondary {
    fill: #aab0b6
}

.fill-subtle {
    fill: #929ea6
}

.fill-surface-tint {
    fill: #313538
}

.fill-white {
    fill: #fff
}

.\!text-\[\#070809\] {
    --tw-text-opacity: 1 !important;
    color: rgb(7 8 9/var(--tw-text-opacity)) !important
}

.text-\[\#070809\] {
    --tw-text-opacity: 1;
    color: rgb(7 8 9/var(--tw-text-opacity))
}

.text-\[\#0B0E0F\] {
    --tw-text-opacity: 1;
    color: rgb(11 14 15/var(--tw-text-opacity))
}

.text-\[\#768087\] {
    --tw-text-opacity: 1;
    color: rgb(118 128 135/var(--tw-text-opacity))
}

.text-\[\#999999\] {
    --tw-text-opacity: 1;
    color: rgb(153 153 153/var(--tw-text-opacity))
}

.text-\[\#B8B8B8\] {
    --tw-text-opacity: 1;
    color: rgb(184 184 184/var(--tw-text-opacity))
}

.text-\[\#E9ECED\] {
    --tw-text-opacity: 1;
    color: rgb(233 236 237/var(--tw-text-opacity))
}

.text-\[\#F8FBFE\] {
    --tw-text-opacity: 1;
    color: rgb(248 251 254/var(--tw-text-opacity))
}

.text-\[\#FF9D00\] {
    --tw-text-opacity: 1;
    color: rgb(255 157 0/var(--tw-text-opacity))
}

.text-\[\#b8def7\] {
    --tw-text-opacity: 1;
    color: rgb(184 222 247/var(--tw-text-opacity))
}

.text-\[rgb\(83\2c 252\2c 24\)\] {
    --tw-text-opacity: 1;
    color: rgb(var(--text-primary)/var(--tw-text-opacity)) !important;
}

.text-danger-base {
    --tw-text-opacity: 1;
    color: var(--text-danger-base)
}

.text-danger-lower {
    --tw-text-opacity: 1;
    color: var(--text-danger-lower)
}

.text-gray-200 {
    --tw-text-opacity: 1;
    color: rgb(229 231 235/var(--tw-text-opacity))
}

.text-gray-400 {
    --tw-text-opacity: 1;
    color: rgb(156 163 175/var(--tw-text-opacity))
}

.text-gray-400\/70 {
    color: rgba(156, 163, 175, .7)
}

.text-gray-500 {
    --tw-text-opacity: 1;
    color: rgb(107 114 128/var(--tw-text-opacity))
}

.text-gray-500\/80 {
    color: hsla(220, 9%, 46%, .8)
}

.text-green-400 {
    --tw-text-opacity: 1;
    color: var(--text-green-400)
}

.text-green-500 {
    --tw-text-opacity: 1;
    color: var(--text-green-500)
}

.text-green-800 {
    --tw-text-opacity: 1;
    color: var(--text-green-800)
}

.text-green-950 {
    --tw-text-opacity: 1;
    color: var(--text-green-950)
}

.text-grey-100 {
    --tw-text-opacity: 1;
    color: rgba(228, 230, 233, var(--tw-text-opacity))
}

.text-grey-200 {
    --tw-text-opacity: 1;
    color: rgba(205, 209, 212, var(--tw-text-opacity))
}

.text-grey-300 {
    --tw-text-opacity: 1;
    color: rgba(170, 176, 182, var(--tw-text-opacity))
}

.text-grey-400 {
    --tw-text-opacity: 1;
    color: rgba(127, 136, 145, var(--tw-text-opacity))
}

.text-grey-500 {
    --tw-text-opacity: 1;
    color: rgba(100, 108, 118, var(--tw-text-opacity))
}

.text-grey-600 {
    --tw-text-opacity: 1;
    color: rgba(85, 92, 101, var(--tw-text-opacity))
}

.text-grey-700 {
    --tw-text-opacity: 1;
    color: rgba(73, 77, 85, var(--tw-text-opacity))
}

.text-grey-900 {
    --tw-text-opacity: 1;
    color: rgba(57, 59, 64, var(--tw-text-opacity))
}

.text-neutral {
    --tw-text-opacity: 1;
    color: rgba(168, 177, 184, var(--tw-text-opacity))
}

.text-orange-300 {
    --tw-text-opacity: 1;
    color: rgba(255, 196, 102, var(--tw-text-opacity))
}

.text-orange-400 {
    --tw-text-opacity: 1;
    color: rgba(255, 177, 51, var(--tw-text-opacity))
}

.text-orange-500 {
    --tw-text-opacity: 1;
    color: rgba(255, 157, 0, var(--tw-text-opacity))
}

.text-primary {
    --tw-text-opacity: 1;
    color: var(--text-primary) !important;
}

.text-red-400 {
    --tw-text-opacity: 1;
    color: rgba(237, 65, 99, var(--tw-text-opacity))
}

.text-red-50 {
    --tw-text-opacity: 1;
    color: rgba(253, 231, 235, var(--tw-text-opacity))
}

.text-secondary {
    --tw-text-opacity: 1;
    color: rgba(170, 176, 182, var(--tw-text-opacity))
}

.text-subtle {
    --tw-text-opacity: 1;
    color: rgba(146, 158, 166, var(--tw-text-opacity))
}

.text-surface-lower {
    --tw-text-opacity: 1;
    color: rgba(20, 21, 23, var(--tw-text-opacity))
}

.text-text-secondary {
    --tw-text-opacity: 1;
    color: rgba(211, 216, 219, var(--tw-text-opacity))
}

.text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity))
}

.text-white\/40 {
    color: hsla(0, 0%, 100%, .4)
}

.text-white\/60 {
    color: hsla(0, 0%, 100%, .6)
}

.text-white\/80 {
    color: hsla(0, 0%, 100%, .8)
}

.outline-grey-400 {
    outline-color: #7f8891
}

.outline-primary {
    outline-color: var(--outline-primary)
}

.outline-transparent {
    outline-color: transparent
}

.ring-green-500 {
    --tw-ring-opacity: 1;
    --tw-ring-color: var(--ring-green-500);
}

::-webkit-scrollbar-track {
    background: transparent
}

::-webkit-scrollbar {
    width: 4px;
    height: 4px
}

::-webkit-scrollbar-thumb {
    border-radius: 15px;
    background-clip: padding-box;
    border: 5px solid hsla(0, 0%, 100%, .25)
}

input:-webkit-autofill,
input:-webkit-autofill:enabled,
input:-webkit-autofill:hover,
select:-webkit-autofill,
select:-webkit-autofill:enabled,
select:-webkit-autofill:hover,
textarea:-webkit-autofill,
textarea:-webkit-autofill:enabled,
textarea:-webkit-autofill:hover {
    -webkit-text-fill-color: #fff;
    box-shadow: inset 0 0 0 1000px #475054;
    background-color: #475054;
    font-weight: 600;
    font-size: .875rem;
    border: 1px solid #475054;
    border-radius: .25rem;
    -webkit-transition: color 600000s 0s;
    transition: color 600000s 0s
}

input:-webkit-autofill:focus,
select:-webkit-autofill:focus,
textarea:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff;
    box-shadow: inset 0 0 0 1000px #0b0e0f;
    background-color: #0b0e0f;
    font-weight: 600;
    font-size: .875rem;
    border: 2px solid #fff
}

.focus-within\:\!bg-\[\#2A2D32\]:focus-within {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(42 45 50/var(--tw-bg-opacity)) !important
}

.focus-within\:bg-\[\#070809\]:focus-within {
    --tw-bg-opacity: 1;
    background-color: rgb(7 8 9/var(--tw-bg-opacity))
}

.focus-within\:outline-none:focus-within {
    outline: 2px solid transparent;
    outline-offset: 2px
}

.focus-within\:ring-1:focus-within {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}

.focus-within\:ring-\[\#F4F5F6\]:focus-within {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(244 245 246/var(--tw-ring-opacity))
}

.focus\:bg-grey-600:focus {
    --tw-bg-opacity: 1;
    background-color: rgba(85, 92, 101, var(--tw-bg-opacity))
}

.focus\:bg-surface-tint:focus {
    --tw-bg-opacity: 1;
    background-color: rgba(49, 53, 56, var(--tw-bg-opacity))
}

.focus\:text-white:focus {
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity))
}

.focus\:outline-none:focus {
    outline: 2px solid transparent;
    outline-offset: 2px
}

.focus\:ring-2:focus {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}

.focus\:ring-green-500:focus {
    --tw-ring-opacity: 1;

    --tw-ring-color: var(--ring-green-500)
}

.focus\:ring-offset-2:focus {
    --tw-ring-offset-width: 2px
}

.focus-visible\:border-white:focus-visible {
    --tw-border-opacity: 1;
    border-color: rgb(255 255 255/var(--tw-border-opacity))
}

.focus-visible\:bg-green-500:focus-visible {
    --tw-bg-opacity: 1;
    background-color: var(--bg-green-500)
}

.focus-visible\:bg-red-500:focus-visible {
    --tw-bg-opacity: 1;
    background-color: rgba(233, 17, 60, var(--tw-bg-opacity))
}

.focus-visible\:bg-secondary\/40:focus-visible {
    background-color: hsla(210, 8%, 69%, .4)
}

.focus-visible\:bg-white:focus-visible {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity))
}

.focus-visible\:text-grey-950:focus-visible {
    --tw-text-opacity: 1;
    color: rgba(20, 21, 23, var(--tw-text-opacity))
}

.focus-visible\:underline:focus-visible {
    text-decoration-line: underline
}

.focus-visible\:outline-none:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px
}

.focus-visible\:outline-0:focus-visible {
    outline-width: 0
}

.focus-visible\:outline-green-200:focus-visible {
    outline-color: var(--outline-green-200)
}

.focus-visible\:outline-grey-100:focus-visible {
    outline-color: #e4e6e9
}

.focus-visible\:outline-grey-300:focus-visible {
    outline-color: #aab0b6
}

.focus-visible\:outline-red-200:focus-visible {
    outline-color: #f6a0b1
}

.focus-visible\:ring-1: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(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}

.focus-visible\:ring-2:focus-visible {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}

.focus-visible\:ring-green-500:focus-visible {
    --tw-ring-opacity: 1;
    --tw-ring-color: var(--ring-green-500)
}

.focus-visible\:ring-white:focus-visible {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(255 255 255/var(--tw-ring-opacity))
}

.active\:bg-\[\#474f54AA\]:active {
    background-color: #474f54aa
}

.disabled\:bg-green-800:disabled {
    --tw-bg-opacity: 1;
    background-color: var(--bg-green-800)
}

.disabled\:bg-grey-900:disabled {
    --tw-bg-opacity: 1;
    background-color: rgba(57, 59, 64, var(--tw-bg-opacity))
}

.disabled\:bg-red-800:disabled {
    --tw-bg-opacity: 1;
    background-color: rgba(93, 7, 24, var(--tw-bg-opacity))
}

.disabled\:bg-transparent:disabled {
    background-color: transparent
}

.disabled\:text-grey-300:disabled {
    --tw-text-opacity: 1;
    color: rgba(170, 176, 182, var(--tw-text-opacity))
}

.disabled\:text-grey-600:disabled {
    --tw-text-opacity: 1;
    color: rgba(85, 92, 101, var(--tw-text-opacity))
}

.disabled\:outline-grey-600:disabled {
    outline-color: #555c65
}

.group:focus-visible .group-focus-visible\:bg-green-500 {
    --tw-bg-opacity: 1;
    background-color: var(--bg-green-500)
}

.group:disabled .group-disabled\:bg-\[\#21650A\] {
    --tw-bg-opacity: 1;
    background-color: var(--bg-green-darker)
}

.aria-\[invalid\=true\]\:border-danger-base[aria-invalid=true] {
    --tw-border-opacity: 1;
    border-color: var(--border-danger-base)
}

.data-\[state\=checked\]\:border-\[\#F4F5F6\][data-state=checked] {
    --tw-border-opacity: 1;
    border-color: rgb(244 245 246/var(--tw-border-opacity))
}

.data-\[state\=checked\]\:border-primary[data-state=checked] {
    --tw-border-opacity: 1;
    border-color: var(--border-primary)
}

.data-\[state\=checked\]\:border-white[data-state=checked] {
    --tw-border-opacity: 1;
    border-color: rgb(255 255 255/var(--tw-border-opacity))
}

.data-\[state\=on\]\:border-green-500[data-state=on] {
    --tw-border-opacity: 1;
    border-color: var(--border-green-500)
}

.data-\[state\=active\]\:bg-grey-900[data-state=active] {
    --tw-bg-opacity: 1;
    background-color: rgba(57, 59, 64, var(--tw-bg-opacity))
}

.data-\[state\=active\]\:bg-surface-tint[data-state=active] {
    --tw-bg-opacity: 1;
    background-color: rgba(49, 53, 56, var(--tw-bg-opacity))
}

.data-\[state\=checked\]\:bg-\[\#F4F5F6\][data-state=checked] {
    --tw-bg-opacity: 1;
    background-color: rgb(244 245 246/var(--tw-bg-opacity))
}

.data-\[state\=checked\]\:bg-green-500[data-state=checked] {
    --tw-bg-opacity: 1;
    background-color: var(--bg-green-500)
}

.data-\[state\=checked\]\:bg-green-800[data-state=checked] {
    --tw-bg-opacity: 1;
    background-color: var(--bg-green-800)
}

.data-\[state\=checked\]\:bg-grey-800[data-state=checked] {
    background-color: var(--checkbox-circle-checked) !important;
}

.data-\[state\=checked\]\:bg-white[data-state=checked] {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity))
}

.data-\[state\=checked\]\:bg-white\/20[data-state=checked] {
    background-color: hsla(0, 0%, 100%, .2)
}

.data-\[state\=closed\]\:bg-shade-base[data-state=closed] {
    --tw-bg-opacity: 1;
    background-color: rgba(23, 28, 30, var(--tw-bg-opacity))
}

.data-\[state\=on\]\:bg-green-500[data-state=on] {
    --tw-bg-opacity: 1;
    background-color: var(--bg-green-500)
}

.data-\[state\=open\]\:bg-secondary\/20[data-state=open] {
    background-color: hsla(210, 8%, 69%, .2)
}

.data-\[state\=open\]\:bg-shade-base[data-state=open] {
    --tw-bg-opacity: 1;
    background-color: rgba(23, 28, 30, var(--tw-bg-opacity))
}

.data-\[state\=selected\]\:bg-grey-700[data-state=selected] {
    --tw-bg-opacity: 1;
    background-color: rgba(73, 77, 85, var(--tw-bg-opacity))
}

.data-\[state\=active\]\:text-primary[data-state=active] {
    --tw-text-opacity: 1;
    color: var(--text-primary) !important;
}

.data-\[state\=active\]\:text-white[data-state=active] {
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity))
}

.data-\[state\=checked\]\:text-grey-700[data-state=checked] {
    --tw-text-opacity: 1;
    color: rgba(73, 77, 85, var(--tw-text-opacity))
}

.data-\[state\=active\]\:shadow-sm[data-state=active] {
    --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.data-\[state\=checked\]\:outline-green-600[data-state=checked] {
    outline-color: var(--outline-green-600)
}

.data-\[state\=checked\]\:brightness-125[data-state=checked] {
    --tw-brightness: brightness(1.25);
    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)
}

.data-\[state\=checked\]\:hover\:outline-green-500:hover[data-state=checked] {
    outline-color: var(--outline-green-500)
}

@media (hover:hover) {

    .betterhover\:hover\:scale-125:hover {
        --tw-scale-x: 1.25;
        --tw-scale-y: 1.25;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
    }

    .betterhover\:hover\:cursor-move:hover {
        cursor: move
    }

    .betterhover\:hover\:border-\[\#53FC1866\]:hover {
        border-color: var(--border-green-500\/40)
    }

    .betterhover\:hover\:border-\[\#53FC18AA\]:hover {
        border-color: var(--border-green-500\/66)
    }

    .betterhover\:hover\:border-grey-300:hover {
        --tw-border-opacity: 1;
        border-color: rgba(170, 176, 182, var(--tw-border-opacity))
    }

    .betterhover\:hover\:border-grey-400:hover {
        --tw-border-opacity: 1;
        border-color: rgba(127, 136, 145, var(--tw-border-opacity))
    }

    .betterhover\:hover\:border-grey-600:hover {
        --tw-border-opacity: 1;
        border-color: rgba(85, 92, 101, var(--tw-border-opacity))
    }

    .betterhover\:hover\:border-white:hover {
        --tw-border-opacity: 1;
        border-color: rgb(255 255 255/var(--tw-border-opacity))
    }

    .betterhover\:hover\:border-b-grey-400:hover {
        --tw-border-opacity: 1;
        border-bottom-color: rgba(127, 136, 145, var(--tw-border-opacity))
    }

    .betterhover\:hover\:\!bg-\[\#2A2D32\]:hover {
        --tw-bg-opacity: 1 !important;
        background-color: rgb(42 45 50/var(--tw-bg-opacity)) !important
    }

    .betterhover\:hover\:\!bg-surface-higher:hover {
        --tw-bg-opacity: 1 !important;
        background-color: rgba(65, 68, 73, var(--tw-bg-opacity)) !important
    }

    .betterhover\:hover\:bg-\[\#24272C\]:hover {
        --tw-bg-opacity: 1;
        background-color: rgb(36 39 44/var(--tw-bg-opacity))
    }

    .betterhover\:hover\:bg-\[\#3F4448\]:hover {
        --tw-bg-opacity: 1;
        background-color: rgb(63 68 72/var(--tw-bg-opacity))
    }

    .betterhover\:hover\:bg-\[\#474f54\]:hover {
        --tw-bg-opacity: 1;
        background-color: rgb(71 79 84/var(--tw-bg-opacity))
    }

    .betterhover\:hover\:bg-green-500\/80:hover {
        background-color: var(--bg-green-500) !important;
    }

    .betterhover\:hover\:bg-green-600:hover {
        --tw-bg-opacity: 1;
        background-color: var(--bg-green-600) !important;
    }

    .betterhover\:hover\:bg-grey-600:hover {
        --tw-bg-opacity: 1;
        background-color: rgba(85, 92, 101, var(--tw-bg-opacity))
    }

    .betterhover\:hover\:bg-grey-700:hover {
        --tw-bg-opacity: 1;
        background-color: rgba(73, 77, 85, var(--tw-bg-opacity))
    }

    .betterhover\:hover\:bg-grey-700\/50:hover {
        background-color: rgba(73, 77, 85, .5)
    }

    .betterhover\:hover\:bg-grey-700\/80:hover {
        background-color: rgba(73, 77, 85, .8)
    }

    .betterhover\:hover\:bg-red-600:hover {
        --tw-bg-opacity: 1;
        background-color: rgba(186, 14, 48, var(--tw-bg-opacity))
    }

    .betterhover\:hover\:bg-red-700\/80:hover {
        background-color: rgba(127, 18, 7, .8)
    }

    .betterhover\:hover\:bg-secondary\/20:hover {
        background-color: hsla(210, 8%, 69%, .2)
    }

    .betterhover\:hover\:bg-secondary\/40:hover {
        background-color: hsla(210, 8%, 69%, .4)
    }

    .betterhover\:hover\:bg-shade-lower:hover {
        --tw-bg-opacity: 1;
        background-color: rgba(35, 38, 40, var(--tw-bg-opacity))
    }

    .betterhover\:hover\:bg-surface-higher:hover {
        --tw-bg-opacity: 1;
        background-color: rgba(65, 68, 73, var(--tw-bg-opacity))
    }

    .betterhover\:hover\:bg-surface-tint:hover {
        --tw-bg-opacity: 1;
        background-color: rgba(49, 53, 56, var(--tw-bg-opacity))
    }

    .betterhover\:hover\:bg-transparent:hover {
        background-color: transparent
    }

    .betterhover\:hover\:bg-white:hover {
        --tw-bg-opacity: 1;
        background-color: rgb(255 255 255/var(--tw-bg-opacity))
    }

    .betterhover\:hover\:bg-white\/10:hover {
        background-color: hsla(0, 0%, 100%, .1)
    }

    .betterhover\:hover\:bg-white\/5:hover {
        background-color: hsla(0, 0%, 100%, .05)
    }

    .betterhover\:hover\:text-grey-950:hover {
        --tw-text-opacity: 1;
        color: rgba(20, 21, 23, var(--tw-text-opacity))
    }

    .betterhover\:hover\:text-primary:hover {
        --tw-text-opacity: 1;
        color: var(--text-primary) !important;
    }

    .betterhover\:hover\:text-white:hover {
        --tw-text-opacity: 1;
        color: rgb(255 255 255/var(--tw-text-opacity))
    }

    .group:hover .betterhover\:group-hover\:bg-\[\#3AD305\] {
        --tw-bg-opacity: 1;
        background-color: var(--bg-green-dark)
    }

    .group:hover .betterhover\:group-hover\:bg-\[\#475054\] {
        --tw-bg-opacity: 1;
        background-color: rgb(71 80 84/var(--tw-bg-opacity))
    }

    .group:hover .betterhover\:group-hover\:bg-shade-lower {
        --tw-bg-opacity: 1;
        background-color: rgba(35, 38, 40, var(--tw-bg-opacity))
    }

}

[fill="#1EFF00"] {
    fill: var(--fill-green-tone-1) !important;
}

.\[\&_svg\]\:data-\[state\=active\]\:fill-green-500[data-state=active] svg {
    fill: var(--fill-green-500)
}

.editor-input {
    color: #fff;
    caret-color: var(--caret-color)
}

.markdown-policy-page h2,
.markdown-policy-page h3 {
    font-weight: 700;
    --tw-text-opacity: 1;
    color: var(--text-primary) !important;
}


div.flex.justify-center svg[viewBox="0 0 526 228"] {
    [fill="#53FC18"] {
        fill: var(--fill-primary) !important;
    }

    [fill="#058C42"] {
        fill: var(--fill-dark-1) !important;
    }
}


svg {

    [fill="#53FC18"] {

        fill: var(--fill-primary) !important;

    }

    [fill="#32970E"] {

        fill: var(--fill-dark-1) !important
    }

    [fill="#DDFED1"] {

        fill: var(--fill-light-1) !important;

    }

}

#sidebar-wrapper [data-state] .rounded-full.bg-green-500 {

    background-color: var(--live-main) !important;

}

.bg-shade-base.flex.flex-col.items-start.justify-center.gap-4.overflow-hidden.overflow-ellipsis.rounded.p-5 .rounded.text-green-400 {

    background-color: var(--channel-live-banner-bg) !important;
    color: var(--channel-live-banner-text) !important
}

button.bg-green-500.text-green-950 {

    color: var(--button-text-color);

}

button.bg-green-500.text-green-950:hover {

    color: var(--button-hover-text-color);

}

button.bg-green-500.text-green-950:disabled {

    color: var(--button-disabled-text-color);

}

button.bg-green-500.text-green-950:disabled:hover {

    color: var(--button-disabled-hover-text-color);

}

#channel-content .shrink-0 .group.relative.flex.aspect-square.shrink-0.items-center.size-12 {

    div.border-green-500.rounded-full {

        border-color: var(--channel-live-avatar-bg);

    }

    span.text-grey-900 {

        background-color: var(--channel-live-avatar-bg);
        color: var(--channel-live-avatar-text);

    }

}

.after\:bg-green-500:after,
.after\:bg-primary:after {
    background-color: var(--bg-green-500) !important;
}

[src="/img/kick-logo.svg"] {

    filter: brightness(10);

}

#nprogress .bar {
    background: var(--page-load-progress-bar) !important;
}

#nprogress .peg {
    box-shadow: 0 0 10px var(--page-load-progress-bar), 0 0 5px var(--page-load-progress-bar) !important;
}

#nprogress .spinner-icon {
    border-top-color: var(--page-load-progress-bar) !important;
    border-left-color: var(--page-load-progress-bar) !important;
}

.aspect-video .z-controls [viewbox="0 0 6 6"][fill="#53FC18"] {

    fill: var(--live-main);

}

.\[\&\>a\:hover\]\:text-primary>a:hover {
    color: var(--text-primary) !important;
}

.markdown-panel a {
    color: var(--text-primary) !important;
}

#channel-chatroom {

    /*Chatroom Mention*/
    .shrink-0.flex-col.break-words.border-green-500 {

        border-color: var(--chatroom-mention) !important;

    }

    /*Event Box*/
    .bg-shade-base.box-border.flex.border-l-4 {

        border-color: var(--border-primary) !important;

        svg[fill="#53FC18"] {

            fill: var(--fill-primary) !important;
        }

    }

    /*Floating Event Box*/
    .absolute.w-full .bg-shade-higher.relative.flex.min-h-0 .absolute.bottom-0.left-0.h-1 .bg-white\/30 {

        background-color: var(--fill-primary) !important;

    }

}

/*
! tailwindcss v3.4.4 | MIT License | https://tailwindcss.com
*/
*,
:after,
:before {
    box-sizing: border-box;
    border: 0 solid #e5e7eb
}

:after,
:before {
    --tw-content: ""
}

:host,
html {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    font-feature-settings: normal;
    font-variation-settings: normal;
    -webkit-tap-highlight-color: transparent
}

body {
    margin: 0;
    line-height: inherit
}

hr {
    height: 0;
    color: inherit;
    border-top-width: 1px
}

abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: inherit;
    font-weight: inherit
}

a {
    color: inherit;
    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-variation-settings: normal;
    font-size: 1em
}

small {
    font-size: 80%
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: 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 {
    opacity: 1;
    color: #9ca3af
}

input::placeholder,
textarea::placeholder {
    opacity: 1;
    color: #9ca3af
}

[role=button],
button {
    cursor: pointer
}

:disabled {
    cursor: default
}

audio,
canvas,
embed,
iframe,
img,
object,
svg,
video {
    display: block;
    vertical-align: middle
}

img,
video {
    max-width: 100%;
    height: auto
}

[hidden] {
    display: none
}

*,
: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(20, 117, 225, .5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
    --tw-contain-size: ;
    --tw-contain-layout: ;
    --tw-contain-paint: ;
    --tw-contain-style:
}

::backdrop {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgba(20, 117, 225, .5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
    --tw-contain-size: ;
    --tw-contain-layout: ;
    --tw-contain-paint: ;
    --tw-contain-style:
}

.container {
    width: 100%
}

@media (min-width: 640px) {
    .container {
        max-width: 640px
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 768px
    }
}

@media (min-width: 1024px) {
    .container {
        max-width: 1024px
    }
}

@media (min-width: 1280px) {
    .container {
        max-width: 1280px
    }
}

@media (min-width: 1536px) {
    .container {
        max-width: 1536px
    }
}

@media (min-width: 1920px) {
    .container {
        max-width: 1920px
    }
}

@media (min-width: 2560px) {
    .container {
        max-width: 2560px
    }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0
}

.pointer-events-none {
    pointer-events: none
}

.pointer-events-auto {
    pointer-events: auto
}

.visible {
    visibility: visible
}

.invisible {
    visibility: hidden
}

.collapse {
    visibility: collapse
}

.static {
    position: static
}

.fixed {
    position: fixed
}

.absolute {
    position: absolute
}

.relative {
    position: relative
}

.sticky {
    position: sticky
}

.-inset-0 {
    inset: 0
}

.-inset-0\.5 {
    inset: -.125rem
}

.inset-0 {
    inset: 0
}

.inset-4 {
    inset: 1rem
}

.inset-x-0 {
    left: 0;
    right: 0
}

.inset-y-0 {
    top: 0;
    bottom: 0
}

.-bottom-1 {
    bottom: -.25rem
}

.-bottom-1\.5 {
    bottom: -.375rem
}

.-left-10 {
    left: -2.5rem
}

.-right-10 {
    right: -2.5rem
}

.-top-10 {
    top: -2.5rem
}

.-top-4 {
    top: -1rem
}

.-top-5 {
    top: -1.25rem
}

.-top-\[100px\] {
    top: -100px
}

.-top-\[200\%\] {
    top: -200%
}

.bottom-0 {
    bottom: 0
}

.bottom-1 {
    bottom: .25rem
}

.bottom-1\.5 {
    bottom: .375rem
}

.bottom-2 {
    bottom: .5rem
}

.bottom-4 {
    bottom: 1rem
}

.bottom-5 {
    bottom: 1.25rem
}

.bottom-\[-2px\] {
    bottom: -2px
}

.bottom-\[60px\] {
    bottom: 60px
}

.bottom-full {
    bottom: 100%
}

.left-0 {
    left: 0
}

.left-1 {
    left: .25rem
}

.left-1\.5 {
    left: .375rem
}

.left-1\/2 {
    left: 50%
}

.left-2 {
    left: .5rem
}

.left-2\.5 {
    left: .625rem
}

.left-3 {
    left: .75rem
}

.left-5 {
    left: 1.25rem
}

.left-7 {
    left: 1.75rem
}

.left-\[50\%\] {
    left: 50%
}

.left-\[var\(--embedded-collapsed-player-left\)\] {
    left: var(--embedded-collapsed-player-left)
}

.left-\[var\(--sidebar-expanded-width\)\] {
    left: var(--sidebar-expanded-width)
}

.left-auto {
    left: auto
}

.right-0 {
    right: 0
}

.right-1 {
    right: .25rem
}

.right-1\.5 {
    right: .375rem
}

.right-1\/2 {
    right: 50%
}

.right-2 {
    right: .5rem
}

.right-2\.5 {
    right: .625rem
}

.right-3 {
    right: .75rem
}

.right-6 {
    right: 1.5rem
}

.right-7 {
    right: 1.75rem
}

.right-\[-20px\] {
    right: -20px
}

.right-\[var\(--chat-width\)\] {
    right: var(--chat-width)
}

.right-\[var\(--embedded-collapsed-player-left\)\] {
    right: var(--embedded-collapsed-player-left)
}

.top-0 {
    top: 0
}

.top-1 {
    top: .25rem
}

.top-1\.5 {
    top: .375rem
}

.top-1\/2 {
    top: 50%
}

.top-2 {
    top: .5rem
}

.top-2\.5 {
    top: .625rem
}

.top-24 {
    top: 6rem
}

.top-3 {
    top: .75rem
}

.top-5 {
    top: 1.25rem
}

.top-6 {
    top: 1.5rem
}

.top-7 {
    top: 1.75rem
}

.top-\[-20px\] {
    top: -20px
}

.top-\[-9999px\] {
    top: -9999px
}

.top-\[2px\] {
    top: 2px
}

.top-\[50\%\] {
    top: 50%
}

.top-\[var\(--channel-desktop-banner-height\)\] {
    top: var(--channel-desktop-banner-height)
}

.top-\[var\(--channel-mobile-banner-height\)\] {
    top: var(--channel-mobile-banner-height)
}

.top-\[var\(--navbar-height\)\] {
    top: var(--navbar-height)
}

.\!z-dialog {
    z-index: 601 !important
}

.-z-common {
    z-index: -1
}

.z-\[0\] {
    z-index: 0
}

.z-\[102\] {
    z-index: 102
}

.z-\[10\] {
    z-index: 10
}

.z-\[202\] {
    z-index: 202
}

.z-\[203\] {
    z-index: 203
}

.z-\[204\] {
    z-index: 204
}

.z-\[300\] {
    z-index: 300
}

.z-\[401\] {
    z-index: 401
}

.z-\[402\] {
    z-index: 402
}

.z-absolute {
    z-index: 101
}

.z-alert-dialog {
    z-index: 901
}

.z-common {
    z-index: 1
}

.z-controls {
    z-index: 202
}

.z-dialog {
    z-index: 601
}

.z-dropdown {
    z-index: 701
}

.z-modal {
    z-index: 501
}

.z-navbar {
    z-index: 301
}

.z-player {
    z-index: 201
}

.z-popover {
    z-index: 401
}

.z-tooltip {
    z-index: 801
}

.order-1 {
    order: 1
}

.order-2 {
    order: 2
}

.order-4 {
    order: 4
}

.order-last {
    order: 9999
}

.col-span-2 {
    grid-column: span 2/span 2
}

.col-span-3 {
    grid-column: span 3/span 3
}

.col-span-6 {
    grid-column: span 6/span 6
}

.col-span-8 {
    grid-column: span 8/span 8
}

.\!m-0 {
    margin: 0 !important
}

.-m-1 {
    margin: -.25rem
}

.-m-1\.5 {
    margin: -.375rem
}

.m-0 {
    margin: 0
}

.m-auto {
    margin: auto
}

.-mx-1 {
    margin-left: -.25rem;
    margin-right: -.25rem
}

.-mx-4 {
    margin-left: -1rem;
    margin-right: -1rem
}

.mx-3 {
    margin-left: .75rem;
    margin-right: .75rem
}

.mx-\[2\.5vw\] {
    margin-left: 2.5vw;
    margin-right: 2.5vw
}

.mx-auto {
    margin-left: auto;
    margin-right: auto
}

.mx-px {
    margin-left: 1px;
    margin-right: 1px
}

.my-1 {
    margin-top: .25rem;
    margin-bottom: .25rem
}

.my-\[10vh\] {
    margin-top: 10vh;
    margin-bottom: 10vh
}

.my-auto {
    margin-top: auto;
    margin-bottom: auto
}

.-ml-3 {
    margin-left: -.75rem
}

.-mr-1 {
    margin-right: -.25rem
}

.-mr-2 {
    margin-right: -.5rem
}

.-mr-4 {
    margin-right: -1rem
}

.mb-0 {
    margin-bottom: 0
}

.mb-0\.5 {
    margin-bottom: .125rem
}

.mb-1 {
    margin-bottom: .25rem
}

.mb-1\.5 {
    margin-bottom: .375rem
}

.mb-12 {
    margin-bottom: 3rem
}

.mb-2 {
    margin-bottom: .5rem
}

.mb-3 {
    margin-bottom: .75rem
}

.mb-6 {
    margin-bottom: 1.5rem
}

.mb-auto {
    margin-bottom: auto
}

.ml-1 {
    margin-left: .25rem
}

.ml-7 {
    margin-left: 1.75rem
}

.ml-auto {
    margin-left: auto
}

.mr-1 {
    margin-right: .25rem
}

.mt-0 {
    margin-top: 0
}

.mt-1 {
    margin-top: .25rem
}

.mt-2 {
    margin-top: .5rem
}

.mt-2\.5 {
    margin-top: .625rem
}

.mt-24 {
    margin-top: 6rem
}

.mt-3 {
    margin-top: .75rem
}

.mt-4 {
    margin-top: 1rem
}

.mt-7 {
    margin-top: 1.75rem
}

.mt-8 {
    margin-top: 2rem
}

.mt-auto {
    margin-top: auto
}

.mt-px {
    margin-top: 1px
}

.box-border {
    box-sizing: border-box
}

.box-content {
    box-sizing: content-box
}

.line-clamp-1 {
    -webkit-line-clamp: 1
}

.line-clamp-1,
.line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical
}

.line-clamp-2 {
    -webkit-line-clamp: 2
}

.line-clamp-3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3
}

.block {
    display: block
}

.inline-block {
    display: inline-block
}

.inline {
    display: inline
}

.flex {
    display: flex
}

.inline-flex {
    display: inline-flex
}

.table {
    display: table
}

.grid {
    display: grid
}

.contents {
    display: contents
}

.hidden {
    display: none
}

.aspect-\[1\/0\.53\] {
    aspect-ratio: 1/.53
}

.aspect-\[164\/219\] {
    aspect-ratio: 164/219
}

.aspect-\[3\.095\] {
    aspect-ratio: 3.095
}

.aspect-\[unset\] {
    aspect-ratio: unset
}

.aspect-square {
    aspect-ratio: 1/1
}

.aspect-video {
    aspect-ratio: 16/9
}

.\!size-14 {
    width: 3.5rem !important;
    height: 3.5rem !important
}

.\!size-16 {
    width: 4rem !important;
    height: 4rem !important
}

.\!size-4 {
    width: 1rem !important;
    height: 1rem !important
}

.\!size-5 {
    width: 1.25rem !important;
    height: 1.25rem !important
}

.\!size-7 {
    width: 1.75rem !important;
    height: 1.75rem !important
}

.\!size-8 {
    width: 2rem !important;
    height: 2rem !important
}

.size-1 {
    width: .25rem;
    height: .25rem
}

.size-1\.5 {
    width: .375rem;
    height: .375rem
}

.size-10 {
    width: 2.5rem;
    height: 2.5rem
}

.size-11 {
    width: 2.75rem;
    height: 2.75rem
}

.size-12 {
    width: 3rem;
    height: 3rem
}

.size-16 {
    width: 4rem;
    height: 4rem
}

.size-2 {
    width: .5rem;
    height: .5rem
}

.size-2\.5 {
    width: .625rem;
    height: .625rem
}

.size-3 {
    width: .75rem;
    height: .75rem
}

.size-3\.5 {
    width: .875rem;
    height: .875rem
}

.size-32 {
    width: 8rem;
    height: 8rem
}


.size-4 {
    width: 1rem;
    height: 1rem
}

.size-5 {
    width: 1.25rem;
    height: 1.25rem
}

.size-6 {
    width: 1.5rem;
    height: 1.5rem
}

.size-7 {
    width: 1.75rem;
    height: 1.75rem
}

.size-8 {
    width: 2rem;
    height: 2rem
}

.size-9 {
    width: 2.25rem;
    height: 2.25rem
}

.size-\[1\.6em\] {
    width: 1.6em;
    height: 1.6em
}

.size-\[18px\] {
    width: 18px;
    height: 18px
}

.size-\[calc\(1em\*\(18\/13\)\)\] {
    width: calc(1em * (18 / 13));
    height: calc(1em * (18 / 13))
}

.size-\[calc\(var\(--chatroom-font-size\)\*28\/13\)\] {
    width: calc(var(--chatroom-font-size) * 28 / 13);
    height: calc(var(--chatroom-font-size) * 28 / 13)
}

.\!h-auto {
    height: auto !important
}

.\!h-full {
    height: 100% !important
}

.h-0 {
    height: 0
}

.h-0\.5 {
    height: .125rem
}

.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-16 {
    height: 4rem
}

.h-2 {
    height: .5rem
}

.h-2\.5 {
    height: .625rem
}

.h-20 {
    height: 5rem
}

.h-3 {
    height: .75rem
}

.h-32 {
    height: 8rem
}

.h-4 {
    height: 1rem
}

.h-48 {
    height: 12rem
}

.h-5 {
    height: 1.25rem
}

.h-6 {
    height: 1.5rem
}

.h-60 {
    height: 15rem
}

.h-7 {
    height: 1.75rem
}

.h-8 {
    height: 2rem
}

.h-9 {
    height: 2.25rem
}

.h-\[--navbar-height\] {
    height: var(--navbar-height)
}

.h-\[0\.48125rem\] {
    height: .48125rem
}

.h-\[0\.75625rem\] {
    height: .75625rem
}

.h-\[0\.75em\] {
    height: .75em
}

.h-\[0\.875rem\] {
    height: .875rem
}

.h-\[1\.2em\] {
    height: 1.2em
}

.h-\[1\.313rem\] {
    height: 1.313rem
}

.h-\[1\.375rem\] {
    height: 1.375rem
}

.h-\[1\.4375rem\] {
    height: 1.4375rem
}

.h-\[1\.6875rem\] {
    height: 1.6875rem
}

.h-\[100px\] {
    height: 100px
}

.h-\[122px\] {
    height: 122px
}

.h-\[18px\] {
    height: 18px
}

.h-\[1em\] {
    height: 1em
}

.h-\[1px\] {
    height: 1px
}

.h-\[2\.875rem\] {
    height: 2.875rem
}

.h-\[20px\] {
    height: 20px
}

.h-\[21px\] {
    height: 21px
}

.h-\[22px\] {
    height: 22px
}

.h-\[22vw\] {
    height: 22vw
}

.h-\[250px\] {
    height: 250px
}

.h-\[266px\] {
    height: 266px
}

.h-\[26px\] {
    height: 26px
}

.h-\[300px\] {
    height: 300px
}

.h-\[30px\] {
    height: 30px
}

.h-\[320px\] {
    height: 320px
}

.h-\[328px\] {
    height: 328px
}

.h-\[335px\] {
    height: 335px
}

.h-\[367px\] {
    height: 367px
}

.h-\[36px\] {
    height: 36px
}

.h-\[3px\] {
    height: 3px
}

.h-\[417px\] {
    height: 417px
}

.h-\[42px\] {
    height: 42px
}

.h-\[440px\] {
    height: 440px
}

.h-\[44px\] {
    height: 44px
}

.h-\[5\.625rem\] {
    height: 5.625rem
}

.h-\[54px\] {
    height: 54px
}

.h-\[625px\] {
    height: 625px
}

.h-\[64px\] {
    height: 64px
}

.h-\[81px\] {
    height: 81px
}

.h-\[calc\(\(56\.25\*var\(--xvw-unit\)\)\+var\(--channel-mobile-banner-height\)\)\] {
    height: calc((56.25 * var(--xvw-unit)) + var(--channel-mobile-banner-height))
}

.h-\[calc\(100\%-56\.25vw\)\] {
    height: calc(100% - 56.25vw)
}

.h-\[calc\(100vh-var\(--navbar-height\)\)\] {
    height: calc(100vh - var(--navbar-height))
}

.h-\[calc\(80vh-var\(--channel-info-height\)\)\] {
    height: calc(80vh - var(--channel-info-height))
}

.h-\[var\(--channel-mobile-banner-height\)\] {
    height: var(--channel-mobile-banner-height)
}

.h-\[var\(--navbar-height\)\] {
    height: var(--navbar-height)
}

.h-\[var\(--radix-select-trigger-height\)\] {
    height: var(--radix-select-trigger-height)
}

.h-auto {
    height: auto
}

.h-dvh {
    height: 100dvh
}

.h-fit {
    height: -moz-fit-content;
    height: fit-content
}

.h-full {
    height: 100%
}

.h-max {
    height: -moz-max-content;
    height: max-content
}

.h-px {
    height: 1px
}

.max-h-64 {
    max-height: 16rem
}

.max-h-7 {
    max-height: 1.75rem
}

.max-h-\[0\.125rem\] {
    max-height: .125rem
}

.max-h-\[100px\] {
    max-height: 100px
}

.max-h-\[101px\] {
    max-height: 101px
}

.max-h-\[20rem\] {
    max-height: 20rem
}

.max-h-\[22px\] {
    max-height: 22px
}

.max-h-\[250px\] {
    max-height: 250px
}

.max-h-\[454px\] {
    max-height: 454px
}

.max-h-\[495px\] {
    max-height: 495px
}

.max-h-\[90vh\] {
    max-height: 90vh
}

.max-h-\[calc\(\(70vw-48px\)\*9\/16\)\] {
    max-height: calc((70vw - 48px) * 9 / 16)
}

.max-h-\[calc\(100\%-var\(--navbar-height\)\)\] {
    max-height: calc(100% - var(--navbar-height))
}

.max-h-\[calc\(100vh-var\(--navbar-height\)\)\] {
    max-height: calc(100vh - var(--navbar-height))
}

.max-h-\[calc\(100vh-var\(--navbar-height\)-var\(--channel-info-height\)\)\] {
    max-height: calc(100vh - var(--navbar-height) - var(--channel-info-height))
}

.max-h-\[calc\(454px-64px\)\] {
    max-height: calc(454px - 64px)
}

.max-h-full {
    max-height: 100%
}

.min-h-0 {
    min-height: 0
}

.min-h-10 {
    min-height: 2.5rem
}

.min-h-11 {
    min-height: 2.75rem
}

.min-h-8 {
    min-height: 2rem
}

.min-h-\[0\.125rem\] {
    min-height: .125rem
}

.min-h-\[179px\] {
    min-height: 179px
}

.min-h-\[204px\] {
    min-height: 204px
}

.min-h-\[300px\] {
    min-height: 300px
}

.min-h-\[31\.69px\] {
    min-height: 31.69px
}

.min-h-\[33vh\] {
    min-height: 33vh
}

.min-h-\[367px\] {
    min-height: 367px
}

.min-h-\[38px\] {
    min-height: 38px
}

.min-h-\[400px\] {
    min-height: 400px
}

.min-h-\[44px\] {
    min-height: 44px
}

.min-h-\[50px\] {
    min-height: 50px
}

.min-h-\[621px\] {
    min-height: 621px
}

.\!w-\[390px\] {
    width: 390px !important
}

.\!w-auto {
    width: auto !important
}

.\!w-full {
    width: 100% !important
}

.w-0 {
    width: 0
}

.w-0\.5 {
    width: .125rem
}

.w-1 {
    width: .25rem
}

.w-1\/2 {
    width: 50%
}

.w-1\/3 {
    width: 33.333333%
}

.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 {
    width: .5rem
}

.w-2\.5 {
    width: .625rem
}

.w-2\/3 {
    width: 66.666667%
}

.w-20 {
    width: 5rem
}

.w-24 {
    width: 6rem
}

.w-28 {
    width: 7rem
}

.w-3 {
    width: .75rem
}

.w-3\/4 {
    width: 75%
}

.w-32 {
    width: 8rem
}

.w-36 {
    width: 9rem
}

.w-4 {
    width: 1rem
}

.w-4\/5 {
    width: 80%
}

.w-40 {
    width: 10rem
}

.w-44 {
    width: 11rem
}

.w-5 {
    width: 1.25rem
}

.w-56 {
    width: 14rem
}

.w-6 {
    width: 1.5rem
}

.w-60 {
    width: 15rem
}

.w-64 {
    width: 16rem
}

.w-7 {
    width: 1.75rem
}

.w-8 {
    width: 2rem
}

.w-80 {
    width: 20rem
}

.w-9 {
    width: 2.25rem
}

.w-96 {
    width: 24rem
}

.w-\[0\.48125rem\] {
    width: .48125rem
}

.w-\[0\.875rem\] {
    width: .875rem
}

.w-\[1\.21875rem\] {
    width: 1.21875rem
}

.w-\[1\.313rem\] {
    width: 1.313rem
}

.w-\[1\.4375rem\] {
    width: 1.4375rem
}

.w-\[100px\] {
    width: 100px
}

.w-\[118px\] {
    width: 118px
}

.w-\[124px\] {
    width: 124px
}

.w-\[130px\] {
    width: 130px
}

.w-\[15px\] {
    width: 15px
}

.w-\[164px\] {
    width: 164px
}

.w-\[17vw\] {
    width: 17vw
}

.w-\[2\.25rem\] {
    width: 2.25rem
}

.w-\[2\.9375rem\] {
    width: 2.9375rem
}

.w-\[200px\] {
    width: 200px
}

.w-\[210px\] {
    width: 210px
}

.w-\[211px\] {
    width: 211px
}

.w-\[220px\] {
    width: 220px
}

.w-\[25vw\] {
    width: 25vw
}

.w-\[280px\] {
    width: 280px
}

.w-\[3\.75rem\] {
    width: 3.75rem
}

.w-\[300px\] {
    width: 300px
}

.w-\[30px\] {
    width: 30px
}

.w-\[320px\] {
    width: 320px
}

.w-\[334px\] {
    width: 334px
}

.w-\[340px\] {
    width: 340px
}

.w-\[356px\] {
    width: 356px
}

.w-\[4\.75rem\] {
    width: 4.75rem
}

.w-\[402px\] {
    width: 402px
}

.w-\[40vw\] {
    width: 40vw
}

.w-\[480px\] {
    width: 480px
}

.w-\[48px\] {
    width: 48px
}

.w-\[5\.4rem\] {
    width: 5.4rem
}

.w-\[5\.625rem\] {
    width: 5.625rem
}

.w-\[54px\] {
    width: 54px
}

.w-\[60px\] {
    width: 60px
}

.w-\[70px\] {
    width: 70px
}

.w-\[70vw\] {
    width: 70vw
}

.w-\[72px\] {
    width: 72px
}

.w-\[75px\] {
    width: 75px
}

.w-\[80px\] {
    width: 80px
}

.w-\[85px\] {
    width: 85px
}

.w-\[calc\(100\%-1\.5rem\)\] {
    width: calc(100% - 1.5rem)
}

.w-\[calc\(100\%-2rem\)\] {
    width: calc(100% - 2rem)
}

.w-\[calc\(var\(--chatroom-font-size\)\*28\/13\)\] {
    width: calc(var(--chatroom-font-size) * 28 / 13)
}

.w-\[full\] {
    width: full
}

.w-\[var\(--sidebar-collapsed-width\)\] {
    width: var(--sidebar-collapsed-width)
}

.w-\[var\(--sidebar-expanded-width\)\] {
    width: var(--sidebar-expanded-width)
}

.w-fit {
    width: -moz-fit-content;
    width: fit-content
}

.w-full {
    width: 100%
}

.w-px {
    width: 1px
}

.min-w-0 {
    min-width: 0
}

.min-w-40 {
    min-width: 10rem
}

.min-w-\[0\.125rem\] {
    min-width: .125rem
}

.min-w-\[100px\] {
    min-width: 100px
}

.min-w-\[10ch\] {
    min-width: 10ch
}

.min-w-\[112px\] {
    min-width: 112px
}

.min-w-\[148px\] {
    min-width: 148px
}

.min-w-\[200px\] {
    min-width: 200px
}

.min-w-\[300px\] {
    min-width: 300px
}

.min-w-\[60px\] {
    min-width: 60px
}

.min-w-\[8rem\] {
    min-width: 8rem
}

.min-w-\[90\%\] {
    min-width: 90%
}

.min-w-\[var\(--radix-select-trigger-width\)\] {
    min-width: var(--radix-select-trigger-width)
}

.min-w-fit {
    min-width: -moz-fit-content;
    min-width: fit-content
}

.min-w-full {
    min-width: 100%
}

.\!max-w-max {
    max-width: -moz-max-content !important;
    max-width: max-content !important
}

.max-w-0 {
    max-width: 0
}

.max-w-14 {
    max-width: 3.5rem
}

.max-w-96 {
    max-width: 24rem
}

.max-w-\[0\.125rem\] {
    max-width: .125rem
}

.max-w-\[1024px\] {
    max-width: 1024px
}

.max-w-\[125rem\] {
    max-width: 125rem
}

.max-w-\[130px\] {
    max-width: 130px
}

.max-w-\[180px\] {
    max-width: 180px
}

.max-w-\[210px\] {
    max-width: 210px
}

.max-w-\[250px\] {
    max-width: 250px
}

.max-w-\[50\%\] {
    max-width: 50%
}

.max-w-\[500px\] {
    max-width: 500px
}

.max-w-\[64rem\] {
    max-width: 64rem
}

.max-w-\[680px\] {
    max-width: 680px
}

.max-w-\[72rem\] {
    max-width: 72rem
}

.max-w-\[80\%\] {
    max-width: 80%
}

.max-w-\[800px\] {
    max-width: 800px
}

.max-w-\[90vw\] {
    max-width: 90vw
}

.max-w-\[calc\(\(80vh-var\(--channel-info-height\)\)\*16\/9\)\] {
    max-width: calc((80vh - var(--channel-info-height)) * 16 / 9)
}

.max-w-\[var\(--sidebar-expanded-width\)\] {
    max-width: var(--sidebar-expanded-width)
}

.max-w-fit {
    max-width: -moz-fit-content;
    max-width: fit-content
}

.max-w-full {
    max-width: 100%
}

.max-w-sm {
    max-width: 24rem
}

.max-w-xs {
    max-width: 20rem
}

.flex-1 {
    flex: 1 1 0%
}

.flex-shrink-0 {
    flex-shrink: 0
}

.shrink {
    flex-shrink: 1
}

.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-0 {
    flex-basis: 0px
}

.basis-\[70px\] {
    flex-basis: 70px
}

.caption-bottom {
    caption-side: bottom
}

.border-separate {
    border-collapse: separate
}

.border-spacing-y-4 {
    --tw-border-spacing-y: 1rem;
    border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y)
}

.origin-left {
    transform-origin: left
}

.-translate-x-1\/2 {
    --tw-translate-x: -50%
}

.-translate-x-1\/2,
.-translate-x-1\/4 {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.-translate-x-1\/4 {
    --tw-translate-x: -25%
}

.-translate-y-1\/2 {
    --tw-translate-y: -50%
}

.-translate-y-1\/2,
.-translate-y-full {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.-translate-y-full {
    --tw-translate-y: -100%
}

.translate-x-1\/2 {
    --tw-translate-x: 50%
}

.translate-x-1\/2,
.translate-x-1\/4 {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.translate-x-1\/4 {
    --tw-translate-x: 25%
}

.translate-x-\[-50\%\] {
    --tw-translate-x: -50%
}

.translate-x-\[-50\%\],
.translate-x-\[0\.1375rem\] {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.translate-x-\[0\.1375rem\] {
    --tw-translate-x: 0.1375rem
}

.translate-x-\[0\.25rem\] {
    --tw-translate-x: 0.25rem
}

.translate-x-\[0\.25rem\],
.translate-y-0 {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.translate-y-0 {
    --tw-translate-y: 0px
}

.translate-y-\[-50\%\] {
    --tw-translate-y: -50%
}

.-rotate-180,
.translate-y-\[-50\%\] {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.-rotate-180 {
    --tw-rotate: -180deg
}

.-rotate-90 {
    --tw-rotate: -90deg
}

.-rotate-90,
.rotate-0 {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.rotate-0 {
    --tw-rotate: 0deg
}

.rotate-180 {
    --tw-rotate: 180deg
}

.rotate-180,
.rotate-90 {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.rotate-90 {
    --tw-rotate: 90deg
}

.rotate-\[135deg\] {
    --tw-rotate: 135deg
}

.rotate-\[135deg\],
.scale-x-\[-1\] {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.scale-x-\[-1\] {
    --tw-scale-x: -1
}

.scale-y-150 {
    --tw-scale-y: 1.5
}

.scale-y-150,
.transform {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

@keyframes caret-blink {

    0%,
    70%,
    to {
        opacity: 1
    }

    20%,
    50% {
        opacity: 0
    }
}

.animate-caret-blink {
    animation: caret-blink 1.25s ease-out infinite
}

@keyframes pulse {
    50% {
        opacity: .5
    }
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite
}

@keyframes spin {
    to {
        transform: rotate(1turn)
    }
}

.animate-spin {
    animation: spin 1s linear infinite
}

.cursor-\[var\(--cursor-user-identity\)\] {
    cursor: var(--cursor-user-identity)
}

.cursor-auto {
    cursor: auto
}

.cursor-default {
    cursor: default
}

.cursor-ew-resize {
    cursor: ew-resize
}

.cursor-grab {
    cursor: grab
}

.cursor-grabbing {
    cursor: grabbing
}

.cursor-help {
    cursor: help
}

.cursor-move {
    cursor: move
}

.cursor-none {
    cursor: none
}

.cursor-not-allowed {
    cursor: not-allowed
}

.cursor-pointer {
    cursor: pointer
}

.cursor-se-resize {
    cursor: se-resize
}

.touch-none {
    touch-action: none
}

.touch-pan-y {
    --tw-pan-y: pan-y
}

.touch-pan-y,
.touch-pinch-zoom {
    touch-action: var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom)
}

.touch-pinch-zoom {
    --tw-pinch-zoom: pinch-zoom
}

.select-none {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.select-text {
    -webkit-user-select: text;
    -moz-user-select: text;
    user-select: text
}

.select-auto {
    -webkit-user-select: auto;
    -moz-user-select: auto;
    user-select: auto
}

.resize-none {
    resize: none
}

.snap-x {
    scroll-snap-type: x var(--tw-scroll-snap-strictness)
}

.snap-mandatory {
    --tw-scroll-snap-strictness: mandatory
}

.scroll-ps-4 {
    scroll-padding-inline-start: 1rem
}

.appearance-none {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.auto-rows-\[0\] {
    grid-auto-rows: 0
}

.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-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr))
}

.grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr))
}

.grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr))
}

.grid-cols-\[22\%_minmax\(0px\2c 1fr\)\] {
    grid-template-columns: 22% minmax(0, 1fr)
}

.grid-cols-\[repeat\(auto-fill\2c minmax\(335px\2c 1fr\)\)\] {
    grid-template-columns: repeat(auto-fill, minmax(335px, 1fr))
}

.grid-rows-1 {
    grid-template-rows: repeat(1, minmax(0, 1fr))
}

.grid-rows-\[auto_1fr\] {
    grid-template-rows: auto 1fr
}

.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
}

.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
}

.justify-start {
    justify-content: flex-start
}

.justify-end {
    justify-content: flex-end
}

.justify-center {
    justify-content: center
}

.justify-between {
    justify-content: space-between
}

.justify-evenly {
    justify-content: space-evenly
}

.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-7 {
    gap: 1.75rem
}

.gap-8 {
    gap: 2rem
}

.gap-\[0\.075rem\] {
    gap: .075rem
}

.gap-x-1 {
    -moz-column-gap: .25rem;
    column-gap: .25rem
}

.gap-x-10 {
    -moz-column-gap: 2.5rem;
    column-gap: 2.5rem
}

.gap-x-14 {
    -moz-column-gap: 3.5rem;
    column-gap: 3.5rem
}

.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-x-8 {
    -moz-column-gap: 2rem;
    column-gap: 2rem
}

.gap-x-\[1rem\] {
    -moz-column-gap: 1rem;
    column-gap: 1rem
}

.gap-y-1 {
    row-gap: .25rem
}

.gap-y-1\.5 {
    row-gap: .375rem
}

.gap-y-10 {
    row-gap: 2.5rem
}

.gap-y-2 {
    row-gap: .5rem
}

.gap-y-2\.5 {
    row-gap: .625rem
}

.gap-y-3 {
    row-gap: .75rem
}

.gap-y-4 {
    row-gap: 1rem
}

.gap-y-5 {
    row-gap: 1.25rem
}

.gap-y-6 {
    row-gap: 1.5rem
}

.gap-y-7 {
    row-gap: 1.75rem
}

.space-x-2>:not([hidden])~:not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(.5rem * var(--tw-space-x-reverse));
    margin-left: calc(.5rem * calc(1 - var(--tw-space-x-reverse)))
}

.space-x-3>:not([hidden])~:not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(.75rem * var(--tw-space-x-reverse));
    margin-left: calc(.75rem * calc(1 - var(--tw-space-x-reverse)))
}

.space-x-5>:not([hidden])~:not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(1.25rem * var(--tw-space-x-reverse));
    margin-left: calc(1.25rem * calc(1 - var(--tw-space-x-reverse)))
}

.space-y-0>:not([hidden])~:not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0px * var(--tw-space-y-reverse))
}

.space-y-1>:not([hidden])~:not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(.25rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(.25rem * var(--tw-space-y-reverse))
}

.space-y-1\.5>:not([hidden])~:not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(.375rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(.375rem * var(--tw-space-y-reverse))
}

.space-y-2>:not([hidden])~:not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(.5rem * var(--tw-space-y-reverse))
}

.space-y-2\.5>:not([hidden])~:not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(.625rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(.625rem * var(--tw-space-y-reverse))
}

.space-y-4>:not([hidden])~:not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1rem * var(--tw-space-y-reverse))
}

.space-y-5>:not([hidden])~:not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.25rem * var(--tw-space-y-reverse))
}

.space-y-6>:not([hidden])~:not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.5rem * var(--tw-space-y-reverse))
}

.space-y-7>:not([hidden])~:not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(1.75rem * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(1.75rem * var(--tw-space-y-reverse))
}

.divide-x-2>:not([hidden])~:not([hidden]) {
    --tw-divide-x-reverse: 0;
    border-right-width: calc(2px * var(--tw-divide-x-reverse));
    border-left-width: calc(2px * calc(1 - var(--tw-divide-x-reverse)))
}

.divide-y>:not([hidden])~:not([hidden]) {
    --tw-divide-y-reverse: 0;
    border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
    border-bottom-width: calc(1px * var(--tw-divide-y-reverse))
}

.divide-y-2>:not([hidden])~:not([hidden]) {
    --tw-divide-y-reverse: 0;
    border-top-width: calc(2px * calc(1 - var(--tw-divide-y-reverse)));
    border-bottom-width: calc(2px * var(--tw-divide-y-reverse))
}

.divide-gray-700>:not([hidden])~:not([hidden]) {
    --tw-divide-opacity: 1;
    border-color: rgb(55 65 81/var(--tw-divide-opacity))
}

.divide-shade-lower>:not([hidden])~:not([hidden]) {
    --tw-divide-opacity: 1;
    border-color: rgba(35, 38, 40, var(--tw-divide-opacity))
}

.divide-surface-tint>:not([hidden])~:not([hidden]) {
    --tw-divide-opacity: 1;
    border-color: rgba(49, 53, 56, var(--tw-divide-opacity))
}

.self-start {
    align-self: flex-start
}

.self-end {
    align-self: flex-end
}

.self-center {
    align-self: center
}

.self-baseline {
    align-self: baseline
}

.overflow-auto {
    overflow: auto
}

.overflow-hidden {
    overflow: hidden
}

.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-clip {
    overflow-x: clip
}

.overflow-y-scroll {
    overflow-y: scroll
}

.truncate {
    overflow: hidden;
    white-space: nowrap
}

.overflow-ellipsis,
.text-ellipsis,
.truncate {
    text-overflow: ellipsis
}

.whitespace-normal {
    white-space: normal
}

.whitespace-nowrap {
    white-space: nowrap
}

.whitespace-break-spaces {
    white-space: break-spaces
}

.text-wrap {
    text-wrap: wrap
}

.text-nowrap {
    text-wrap: nowrap
}

.break-normal {
    overflow-wrap: normal;
    word-break: normal
}

.break-words {
    overflow-wrap: break-word
}

.break-all {
    word-break: break-all
}

.break-keep {
    word-break: keep-all
}

.rounded {
    border-radius: .25rem
}

.rounded-\[10px\] {
    border-radius: 10px
}

.rounded-\[2px\] {
    border-radius: 2px
}

.rounded-\[3px\] {
    border-radius: 3px
}

.rounded-\[4px\] {
    border-radius: 4px
}

.rounded-\[inherit\] {
    border-radius: inherit
}

.rounded-full {
    border-radius: 9999px
}

.rounded-lg {
    border-radius: .5rem
}

.rounded-md {
    border-radius: .375rem
}

.rounded-none {
    border-radius: 0
}

.rounded-sm {
    border-radius: .125rem
}

.rounded-b-sm {
    border-bottom-right-radius: .125rem;
    border-bottom-left-radius: .125rem
}

.rounded-r {
    border-top-right-radius: .25rem;
    border-bottom-right-radius: .25rem
}

.rounded-r-none {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

.rounded-t {
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem
}

.rounded-t-\[0\.75rem\] {
    border-top-left-radius: .75rem;
    border-top-right-radius: .75rem
}

.border {
    border-width: 1px
}

.border-0 {
    border-width: 0
}

.border-2 {
    border-width: 2px
}

.border-4 {
    border-width: 4px
}

.border-\[1\.5px\] {
    border-width: 1.5px
}

.border-\[1px\] {
    border-width: 1px
}

.border-\[2px\] {
    border-width: 2px
}

.border-x {
    border-left-width: 1px;
    border-right-width: 1px
}

.border-x-\[6px\] {
    border-left-width: 6px;
    border-right-width: 6px
}

.border-y-2 {
    border-top-width: 2px;
    border-bottom-width: 2px
}

.border-y-4 {
    border-top-width: 4px;
    border-bottom-width: 4px
}

.border-y-8 {
    border-top-width: 8px;
    border-bottom-width: 8px
}

.border-b {
    border-bottom-width: 1px
}

.border-b-2 {
    border-bottom-width: 2px
}

.border-l {
    border-left-width: 1px
}

.border-l-4 {
    border-left-width: 4px
}

.border-r {
    border-right-width: 1px
}

.border-t {
    border-top-width: 1px
}

.border-t-2 {
    border-top-width: 2px
}

.border-solid {
    border-style: solid
}

.border-dashed {
    border-style: dashed
}

.border-none {
    border-style: none
}

.border-\[\#191b1f\] {
    --tw-border-opacity: 1;
    border-color: rgb(25 27 31/var(--tw-border-opacity))
}

.border-\[\#24272C\],
.border-\[\#24272c\] {
    --tw-border-opacity: 1;
    border-color: rgb(36 39 44/var(--tw-border-opacity))
}

.border-\[\#474F54\] {
    --tw-border-opacity: 1;
    border-color: rgb(71 79 84/var(--tw-border-opacity))
}

.border-\[\#A8B1B822\] {
    border-color: #a8b1b822
}

.border-\[\#CCCCCC\] {
    --tw-border-opacity: 1;
    border-color: rgb(204 204 204/var(--tw-border-opacity))
}

.border-\[\#F4F5F6\] {
    --tw-border-opacity: 1;
    border-color: rgb(244 245 246/var(--tw-border-opacity))
}

.border-\[\#FF9D00\] {
    --tw-border-opacity: 1;
    border-color: rgb(255 157 0/var(--tw-border-opacity))
}

.border-current {
    border-color: currentColor
}

.border-danger-base {
    --tw-border-opacity: 1;
    border-color: rgba(233, 17, 60, var(--tw-border-opacity))
}

.border-dropdown-separator {
    --tw-border-opacity: 1;
    border-color: rgba(49, 53, 56, var(--tw-border-opacity))
}

.border-green-500 {
    --tw-border-opacity: 1;
    border-color: rgba(83, 252, 24, var(--tw-border-opacity))
}

.border-grey-400 {
    --tw-border-opacity: 1;
    border-color: rgba(127, 136, 145, var(--tw-border-opacity))
}

.border-grey-600 {
    --tw-border-opacity: 1;
    border-color: rgba(85, 92, 101, var(--tw-border-opacity))
}

.border-grey-700 {
    --tw-border-opacity: 1;
    border-color: rgba(73, 77, 85, var(--tw-border-opacity))
}

.border-grey-800 {
    --tw-border-opacity: 1;
    border-color: rgba(65, 68, 73, var(--tw-border-opacity))
}

.border-red-500\/40 {
    border-color: rgba(233, 17, 60, .4)
}

.border-shade-lower {
    --tw-border-opacity: 1;
    border-color: rgba(35, 38, 40, var(--tw-border-opacity))
}

.border-surface-base\/50 {
    border-color: rgba(57, 59, 64, .5)
}

.border-surface-tint {
    --tw-border-opacity: 1;
    border-color: rgba(49, 53, 56, var(--tw-border-opacity))
}

.border-transparent {
    border-color: transparent
}

.border-white {
    --tw-border-opacity: 1;
    border-color: rgb(255 255 255/var(--tw-border-opacity))
}

.border-white\/5 {
    border-color: hsla(0, 0%, 100%, .05)
}

.border-white\/50 {
    border-color: hsla(0, 0%, 100%, .5)
}

.border-y-\[\#24272c\] {
    --tw-border-opacity: 1;
    border-top-color: rgb(36 39 44/var(--tw-border-opacity));
    border-bottom-color: rgb(36 39 44/var(--tw-border-opacity))
}

.border-y-surface-base\/30 {
    border-top-color: rgba(57, 59, 64, .3);
    border-bottom-color: rgba(57, 59, 64, .3)
}

.\!border-r-transparent {
    border-right-color: transparent !important
}

.border-b-surface-tint {
    --tw-border-opacity: 1;
    border-bottom-color: rgba(49, 53, 56, var(--tw-border-opacity))
}

.border-b-transparent {
    border-bottom-color: transparent
}

.border-l-transparent {
    border-left-color: transparent
}

.border-t-transparent {
    border-top-color: transparent
}

.border-t-white\/20 {
    border-top-color: hsla(0, 0%, 100%, .2)
}

.border-opacity-20 {
    --tw-border-opacity: 0.2
}

.\!bg-\[\#21650A\] {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(33 101 10/var(--tw-bg-opacity)) !important
}

.\!bg-gray-600 {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(75 85 99/var(--tw-bg-opacity)) !important
}

.\!bg-green-500 {
    --tw-bg-opacity: 1 !important;
    background-color: rgba(83, 252, 24, var(--tw-bg-opacity)) !important
}

.\!bg-surface-tint {
    --tw-bg-opacity: 1 !important;
    background-color: rgba(49, 53, 56, var(--tw-bg-opacity)) !important
}

.bg-\[\#070809\] {
    --tw-bg-opacity: 1;
    background-color: rgb(7 8 9/var(--tw-bg-opacity))
}

.bg-\[\#090A0B\] {
    --tw-bg-opacity: 1;
    background-color: rgb(9 10 11/var(--tw-bg-opacity))
}

.bg-\[\#0B0E0F\] {
    --tw-bg-opacity: 1;
    background-color: rgb(11 14 15/var(--tw-bg-opacity))
}

.bg-\[\#0F1214\] {
    --tw-bg-opacity: 1;
    background-color: rgb(15 18 20/var(--tw-bg-opacity))
}

.bg-\[\#0F1214\]\/5 {
    background-color: rgba(15, 18, 20, .05)
}

.bg-\[\#101214\] {
    --tw-bg-opacity: 1;
    background-color: rgb(16 18 20/var(--tw-bg-opacity))
}

.bg-\[\#1C1E21\] {
    --tw-bg-opacity: 1;
    background-color: rgb(28 30 33/var(--tw-bg-opacity))
}

.bg-\[\#222222\] {
    --tw-bg-opacity: 1;
    background-color: rgb(34 34 34/var(--tw-bg-opacity))
}

.bg-\[\#232628\] {
    --tw-bg-opacity: 1;
    background-color: rgb(35 38 40/var(--tw-bg-opacity))
}

.bg-\[\#24272C\],
.bg-\[\#24272c\] {
    --tw-bg-opacity: 1;
    background-color: rgb(36 39 44/var(--tw-bg-opacity))
}

.bg-\[\#2A2D32AA\] {
    background-color: #2a2d32aa
}

.bg-\[\#3AD305\] {
    --tw-bg-opacity: 1;
    background-color: rgb(58 211 5/var(--tw-bg-opacity))
}

.bg-\[\#52fc18\] {
    --tw-bg-opacity: 1;
    background-color: rgb(82 252 24/var(--tw-bg-opacity))
}

.bg-\[\#F4F5F6\] {
    --tw-bg-opacity: 1;
    background-color: rgb(244 245 246/var(--tw-bg-opacity))
}

.bg-\[\#F9688A\] {
    --tw-bg-opacity: 1;
    background-color: rgb(249 104 138/var(--tw-bg-opacity))
}

.bg-\[\#FF9D00\] {
    --tw-bg-opacity: 1;
    background-color: rgb(255 157 0/var(--tw-bg-opacity))
}

.bg-black {
    --tw-bg-opacity: 1;
    background-color: rgb(0 0 0/var(--tw-bg-opacity))
}

.bg-black\/15 {
    background-color: rgba(0, 0, 0, .15)
}

.bg-black\/20 {
    background-color: rgba(0, 0, 0, .2)
}

.bg-black\/50 {
    background-color: rgba(0, 0, 0, .5)
}

.bg-black\/70 {
    background-color: rgba(0, 0, 0, .7)
}

.bg-black\/75 {
    background-color: rgba(0, 0, 0, .75)
}

.bg-black\/80 {
    background-color: rgba(0, 0, 0, .8)
}

.bg-black\/90 {
    background-color: rgba(0, 0, 0, .9)
}

.bg-dropdown-separator {
    --tw-bg-opacity: 1;
    background-color: rgba(49, 53, 56, var(--tw-bg-opacity))
}

.bg-green-500 {
    --tw-bg-opacity: 1;
    background-color: rgba(83, 252, 24, var(--tw-bg-opacity))
}

.bg-grey-300 {
    --tw-bg-opacity: 1;
    background-color: rgba(170, 176, 182, var(--tw-bg-opacity))
}

.bg-grey-500 {
    --tw-bg-opacity: 1;
    background-color: rgba(100, 108, 118, var(--tw-bg-opacity))
}

.bg-grey-600 {
    --tw-bg-opacity: 1;
    background-color: rgba(85, 92, 101, var(--tw-bg-opacity))
}

.bg-grey-700 {
    --tw-bg-opacity: 1;
    background-color: rgba(73, 77, 85, var(--tw-bg-opacity))
}

.bg-grey-700\/50 {
    background-color: rgba(73, 77, 85, .5)
}

.bg-grey-800 {
    --tw-bg-opacity: 1;
    background-color: rgba(65, 68, 73, var(--tw-bg-opacity))
}

.bg-grey-900 {
    --tw-bg-opacity: 1;
    background-color: rgba(57, 59, 64, var(--tw-bg-opacity))
}

.bg-grey-900\/20 {
    background-color: rgba(57, 59, 64, .2)
}

.bg-grey-900\/25 {
    background-color: rgba(57, 59, 64, .25)
}

.bg-grey-950 {
    --tw-bg-opacity: 1;
    background-color: rgba(20, 21, 23, var(--tw-bg-opacity))
}

.bg-grey-950\/50 {
    background-color: rgba(20, 21, 23, .5)
}

.bg-neutral\/20 {
    background-color: rgba(168, 177, 184, .2)
}

.bg-orange-500 {
    --tw-bg-opacity: 1;
    background-color: rgba(255, 157, 0, var(--tw-bg-opacity))
}

.bg-primary {
    --tw-bg-opacity: 1;
    background-color: rgba(83, 252, 24, var(--tw-bg-opacity))
}

.bg-red-400\/15 {
    background-color: rgba(237, 65, 99, .15)
}

.bg-red-500 {
    --tw-bg-opacity: 1;
    background-color: rgba(233, 17, 60, var(--tw-bg-opacity))
}

.bg-red-500\/5 {
    background-color: rgba(233, 17, 60, .05)
}

.bg-red-700 {
    --tw-bg-opacity: 1;
    background-color: rgba(127, 18, 7, var(--tw-bg-opacity))
}

.bg-secondary\/20 {
    background-color: hsla(210, 8%, 69%, .2)
}

.bg-shade-base {
    --tw-bg-opacity: 1;
    background-color: rgba(23, 28, 30, var(--tw-bg-opacity))
}

.bg-shade-higher {
    --tw-bg-opacity: 1;
    background-color: rgba(25, 27, 31, var(--tw-bg-opacity))
}

.bg-shade-lower {
    --tw-bg-opacity: 1;
    background-color: rgba(35, 38, 40, var(--tw-bg-opacity))
}

.bg-shade-lower\/90 {
    background-color: rgba(35, 38, 40, .9)
}

.bg-slate-950 {
    --tw-bg-opacity: 1;
    background-color: rgb(2 6 23/var(--tw-bg-opacity))
}

.bg-subtle\/50 {
    background-color: rgba(146, 158, 166, .5)
}

.bg-surface-base {
    --tw-bg-opacity: 1;
    background-color: rgba(57, 59, 64, var(--tw-bg-opacity))
}

.bg-surface-base\/10 {
    background-color: rgba(57, 59, 64, .1)
}

.bg-surface-base\/50 {
    background-color: rgba(57, 59, 64, .5)
}

.bg-surface-higher {
    --tw-bg-opacity: 1;
    background-color: rgba(65, 68, 73, var(--tw-bg-opacity))
}

.bg-surface-lower {
    --tw-bg-opacity: 1;
    background-color: rgba(20, 21, 23, var(--tw-bg-opacity))
}

.bg-surface-lower\/50 {
    background-color: rgba(20, 21, 23, .5)
}

.bg-surface-tint {
    --tw-bg-opacity: 1;
    background-color: rgba(49, 53, 56, var(--tw-bg-opacity))
}

.bg-transparent {
    background-color: transparent
}

.bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity))
}

.bg-white\/10 {
    background-color: hsla(0, 0%, 100%, .1)
}

.bg-white\/15 {
    background-color: hsla(0, 0%, 100%, .15)
}

.bg-white\/20 {
    background-color: hsla(0, 0%, 100%, .2)
}

.bg-white\/25 {
    background-color: hsla(0, 0%, 100%, .25)
}

.bg-white\/30 {
    background-color: hsla(0, 0%, 100%, .3)
}

.bg-white\/5 {
    background-color: hsla(0, 0%, 100%, .05)
}

.bg-white\/50 {
    background-color: hsla(0, 0%, 100%, .5)
}

.bg-opacity-10 {
    --tw-bg-opacity: 0.1
}

.bg-opacity-50 {
    --tw-bg-opacity: 0.5
}

.bg-opacity-80 {
    --tw-bg-opacity: 0.8
}

.bg-gradient-to-b {
    background-image: linear-gradient(to bottom, var(--tw-gradient-stops))
}

.bg-gradient-to-t {
    background-image: linear-gradient(to top, var(--tw-gradient-stops))
}

.from-black\/0 {
    --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)
}

.from-black\/70 {
    --tw-gradient-from: rgba(0, 0, 0, .7) 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)
}

.from-black\/80 {
    --tw-gradient-from: rgba(0, 0, 0, .8) 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)
}

.to-black {
    --tw-gradient-to: #000 var(--tw-gradient-to-position)
}

.to-black\/0,
.to-transparent {
    --tw-gradient-to: transparent var(--tw-gradient-to-position)
}

.bg-cover {
    background-size: cover
}

.bg-center {
    background-position: 50%
}

.bg-no-repeat {
    background-repeat: no-repeat
}

.\!fill-grey-700 {
    fill: #494d55 !important
}

.\!fill-neutral {
    fill: #a8b1b8 !important
}

.\!fill-none {
    fill: none !important
}

.fill-\[\#070809\] {
    fill: #070809
}

.fill-\[\#FF9D00\] {
    fill: #ff9d00
}

.fill-black {
    fill: #000
}

.fill-current {
    fill: currentColor
}

.fill-danger-lower {
    fill: #f2708a
}

.fill-green-400 {
    fill: #75fd46
}

.fill-green-500 {
    fill: #53fc18
}

.fill-grey-600 {
    fill: #555c65
}

.fill-grey-700 {
    fill: #494d55
}

.fill-neutral {
    fill: #a8b1b8
}

.fill-red-400 {
    fill: #ed4163
}

.fill-red-500 {
    fill: #e9113c
}

.fill-secondary {
    fill: #aab0b6
}

.fill-subtle {
    fill: #929ea6
}

.fill-surface-tint {
    fill: #313538
}

.fill-white {
    fill: #fff
}

.object-contain {
    -o-object-fit: contain;
    object-fit: contain
}

.object-cover {
    -o-object-fit: cover;
    object-fit: cover
}

.object-none {
    -o-object-fit: none;
    object-fit: none
}

.object-bottom {
    -o-object-position: bottom;
    object-position: bottom
}

.object-center {
    -o-object-position: center;
    object-position: center
}

.\!p-0 {
    padding: 0 !important
}

.p-0 {
    padding: 0
}

.p-0\.5 {
    padding: .125rem
}

.p-1 {
    padding: .25rem
}

.p-1\.5 {
    padding: .375rem
}

.p-10 {
    padding: 2.5rem
}

.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 {
    padding: 1.5rem
}

.p-\[1px\] {
    padding: 1px
}

.p-\[5px\] {
    padding: 5px
}

.px-0 {
    padding-left: 0;
    padding-right: 0
}

.px-0\.5 {
    padding-left: .125rem;
    padding-right: .125rem
}

.px-1 {
    padding-left: .25rem;
    padding-right: .25rem
}

.px-1\.5 {
    padding-left: .375rem;
    padding-right: .375rem
}

.px-10 {
    padding-left: 2.5rem;
    padding-right: 2.5rem
}

.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-8 {
    padding-left: 2rem;
    padding-right: 2rem
}

.px-\[15px\] {
    padding-left: 15px;
    padding-right: 15px
}

.px-\[26px\] {
    padding-left: 26px;
    padding-right: 26px
}

.px-\[5px\] {
    padding-left: 5px;
    padding-right: 5px
}

.py-0 {
    padding-top: 0;
    padding-bottom: 0
}

.py-0\.5 {
    padding-top: .125rem;
    padding-bottom: .125rem
}

.py-1 {
    padding-top: .25rem;
    padding-bottom: .25rem
}

.py-1\.5 {
    padding-top: .375rem;
    padding-bottom: .375rem
}

.py-2 {
    padding-top: .5rem;
    padding-bottom: .5rem
}

.py-2\.5 {
    padding-top: .625rem;
    padding-bottom: .625rem
}

.py-3 {
    padding-top: .75rem;
    padding-bottom: .75rem
}

.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem
}

.py-5 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem
}

.py-7 {
    padding-top: 1.75rem;
    padding-bottom: 1.75rem
}

.py-\[11px\] {
    padding-top: 11px;
    padding-bottom: 11px
}

.py-\[4px\] {
    padding-top: 4px;
    padding-bottom: 4px
}

.py-\[5px\] {
    padding-top: 5px;
    padding-bottom: 5px
}

.py-px {
    padding-top: 1px;
    padding-bottom: 1px
}

.pb-1 {
    padding-bottom: .25rem
}

.pb-1\.5 {
    padding-bottom: .375rem
}

.pb-2 {
    padding-bottom: .5rem
}

.pb-2\.5 {
    padding-bottom: .625rem
}

.pb-20 {
    padding-bottom: 5rem
}

.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
}

.pl-0 {
    padding-left: 0
}

.pl-0\.5 {
    padding-left: .125rem
}

.pl-2 {
    padding-left: .5rem
}

.pl-2\.5 {
    padding-left: .625rem
}

.pl-3 {
    padding-left: .75rem
}

.pl-5 {
    padding-left: 1.25rem
}

.pl-7 {
    padding-left: 1.75rem
}

.pl-8 {
    padding-left: 2rem
}

.pl-\[1px\] {
    padding-left: 1px
}

.pl-\[20px\] {
    padding-left: 20px
}

.pl-\[9px\] {
    padding-left: 9px
}

.pr-1 {
    padding-right: .25rem
}

.pr-1\.5 {
    padding-right: .375rem
}

.pr-10 {
    padding-right: 2.5rem
}

.pr-2 {
    padding-right: .5rem
}

.pr-2\.5 {
    padding-right: .625rem
}

.pr-3 {
    padding-right: .75rem
}

.pr-4 {
    padding-right: 1rem
}

.pr-5 {
    padding-right: 1.25rem
}

.pr-8 {
    padding-right: 2rem
}

.pr-\[3px\] {
    padding-right: 3px
}

.pt-0 {
    padding-top: 0
}

.pt-1 {
    padding-top: .25rem
}

.pt-10 {
    padding-top: 2.5rem
}

.pt-2 {
    padding-top: .5rem
}

.pt-2\.5 {
    padding-top: .625rem
}

.pt-3 {
    padding-top: .75rem
}

.pt-3\.5 {
    padding-top: .875rem
}

.pt-5 {
    padding-top: 1.25rem
}

.pt-6 {
    padding-top: 1.5rem
}

.pt-7 {
    padding-top: 1.75rem
}

.pt-8 {
    padding-top: 2rem
}

.pt-9 {
    padding-top: 2.25rem
}

.pt-\[3px\] {
    padding-top: 3px
}

.pt-\[60px\] {
    padding-top: 60px
}

.pt-\[var\(--navbar-height\)\] {
    padding-top: var(--navbar-height)
}

.text-left {
    text-align: left
}

.text-center {
    text-align: center
}

.text-right {
    text-align: right
}

.text-start {
    text-align: start
}

.align-middle {
    vertical-align: middle
}

.font-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace
}

.font-kick {
    font-family: 'KickFont', sans-serif;
}

.\!text-base {
    font-size: 1rem !important;
    line-height: 1.5rem !important
}

.\!text-sm {
    font-size: .875rem !important;
    line-height: 1.25rem !important
}

.text-2xl {
    font-size: 1.5rem;
    line-height: 2rem
}

.text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem
}

.text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem
}

.text-5xl {
    font-size: 3rem;
    line-height: 3.5rem;
}

.text-6xl {
    font-size: 3.75rem;
    line-height: 4.25rem;
}

.text-7xl {
    font-size: 4rem;
    line-height: 4.5rem;
}

.text-\[0\.625rem\] {
    font-size: .625rem
}

.text-\[0\.75rem\] {
    font-size: .75rem
}

.text-\[0\.8rem\] {
    font-size: .8rem
}

.text-\[1\.4445rem\] {
    font-size: 1.4445rem
}

.text-\[10px\] {
    font-size: 10px
}

.text-\[13px\] {
    font-size: 13px
}

.text-\[15px\] {
    font-size: 15px
}

.text-\[18px\] {
    font-size: 18px
}

.text-\[32px\] {
    font-size: 32px
}

.text-base {
    font-size: 1rem;
    line-height: 1.5rem
}

.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem
}

.text-sm {
    font-size: .875rem;
    line-height: 1.25rem
}

.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem
}

.text-xs {
    font-size: .75rem;
    line-height: 1rem
}

.font-black {
    font-weight: 900
}

.font-bold {
    font-weight: 700
}

.font-medium {
    font-weight: 500
}

.font-normal {
    font-weight: 400
}

.font-semibold {
    font-weight: 600
}

.uppercase {
    text-transform: uppercase
}

.lowercase {
    text-transform: lowercase
}

.capitalize {
    text-transform: capitalize
}

.italic {
    font-style: italic
}

.ordinal {
    --tw-ordinal: ordinal
}

.ordinal,
.tabular-nums {
    font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)
}

.tabular-nums {
    --tw-numeric-spacing: tabular-nums
}

.\!leading-\[1\.2\] {
    line-height: 1.2 !important
}

.\!leading-none {
    line-height: 1 !important
}

.\!leading-normal {
    line-height: 1.5 !important
}

.leading-10 {
    line-height: 2.5rem
}

.leading-3 {
    line-height: .75rem
}

.leading-4 {
    line-height: 1rem
}

.leading-5 {
    line-height: 1.25rem
}

.leading-6 {
    line-height: 1.5rem
}

.leading-7 {
    line-height: 1.75rem
}

.leading-\[1\.125rem\] {
    line-height: 1.125rem
}

.leading-\[1\.15\] {
    line-height: 1.15
}

.leading-\[1\.2\] {
    line-height: 1.2
}

.leading-\[1\.3125rem\] {
    line-height: 1.3125rem
}

.leading-\[1\.3\] {
    line-height: 1.3
}

.leading-\[1\.55\] {
    line-height: 1.55
}

.leading-\[17px\] {
    line-height: 17px
}

.leading-\[18px\] {
    line-height: 18px
}

.leading-\[2\] {
    line-height: 2
}

.leading-none {
    line-height: 1
}

.leading-normal {
    line-height: 1.5
}

.leading-tight {
    line-height: 1.25
}

.tracking-normal {
    letter-spacing: 0
}

.tracking-tight {
    letter-spacing: -.025em
}

.tracking-wide {
    letter-spacing: .025em
}

.tracking-widest {
    letter-spacing: .1em
}

.\!text-\[\#070809\] {
    --tw-text-opacity: 1 !important;
    color: rgb(7 8 9/var(--tw-text-opacity)) !important
}

.text-\[\#070809\] {
    --tw-text-opacity: 1;
    color: rgb(7 8 9/var(--tw-text-opacity))
}

.text-\[\#0B0E0F\] {
    --tw-text-opacity: 1;
    color: rgb(11 14 15/var(--tw-text-opacity))
}

.text-\[\#768087\] {
    --tw-text-opacity: 1;
    color: rgb(118 128 135/var(--tw-text-opacity))
}

.text-\[\#999999\] {
    --tw-text-opacity: 1;
    color: rgb(153 153 153/var(--tw-text-opacity))
}

.text-\[\#B8B8B8\] {
    --tw-text-opacity: 1;
    color: rgb(184 184 184/var(--tw-text-opacity))
}

.text-\[\#E9ECED\] {
    --tw-text-opacity: 1;
    color: rgb(233 236 237/var(--tw-text-opacity))
}

.text-\[\#F8FBFE\] {
    --tw-text-opacity: 1;
    color: rgb(248 251 254/var(--tw-text-opacity))
}

.text-\[\#FF9D00\] {
    --tw-text-opacity: 1;
    color: rgb(255 157 0/var(--tw-text-opacity))
}

.text-\[\#b8def7\] {
    --tw-text-opacity: 1;
    color: rgb(184 222 247/var(--tw-text-opacity))
}

.text-\[rgb\(83\2c 252\2c 24\)\] {
    --tw-text-opacity: 1;
    color: rgb(83 252 24/var(--tw-text-opacity))
}

.text-black {
    --tw-text-opacity: 1;
    color: rgb(0 0 0/var(--tw-text-opacity))
}

.text-current {
    color: currentColor
}

.text-danger-base {
    --tw-text-opacity: 1;
    color: rgba(233, 17, 60, var(--tw-text-opacity))
}

.text-danger-lower {
    --tw-text-opacity: 1;
    color: rgba(242, 112, 138, var(--tw-text-opacity))
}

.text-gray-200 {
    --tw-text-opacity: 1;
    color: rgb(229 231 235/var(--tw-text-opacity))
}

.text-gray-400 {
    --tw-text-opacity: 1;
    color: rgb(156 163 175/var(--tw-text-opacity))
}

.text-gray-400\/70 {
    color: rgba(156, 163, 175, .7)
}

.text-gray-500 {
    --tw-text-opacity: 1;
    color: rgb(107 114 128/var(--tw-text-opacity))
}

.text-gray-500\/80 {
    color: hsla(220, 9%, 46%, .8)
}

.text-green-400 {
    --tw-text-opacity: 1;
    color: rgba(117, 253, 70, var(--tw-text-opacity))
}

.text-green-500 {
    --tw-text-opacity: 1;
    color: rgba(83, 252, 24, var(--tw-text-opacity))
}

.text-green-800 {
    --tw-text-opacity: 1;
    color: rgba(33, 101, 10, var(--tw-text-opacity))
}

.text-green-950 {
    --tw-text-opacity: 1;
    color: rgba(8, 25, 2, var(--tw-text-opacity))
}

.text-grey-100 {
    --tw-text-opacity: 1;
    color: rgba(228, 230, 233, var(--tw-text-opacity))
}

.text-grey-200 {
    --tw-text-opacity: 1;
    color: rgba(205, 209, 212, var(--tw-text-opacity))
}

.text-grey-300 {
    --tw-text-opacity: 1;
    color: rgba(170, 176, 182, var(--tw-text-opacity))
}

.text-grey-400 {
    --tw-text-opacity: 1;
    color: rgba(127, 136, 145, var(--tw-text-opacity))
}

.text-grey-500 {
    --tw-text-opacity: 1;
    color: rgba(100, 108, 118, var(--tw-text-opacity))
}

.text-grey-600 {
    --tw-text-opacity: 1;
    color: rgba(85, 92, 101, var(--tw-text-opacity))
}

.text-grey-700 {
    --tw-text-opacity: 1;
    color: rgba(73, 77, 85, var(--tw-text-opacity))
}

.text-grey-900 {
    --tw-text-opacity: 1;
    color: rgba(57, 59, 64, var(--tw-text-opacity))
}

.text-neutral {
    --tw-text-opacity: 1;
    color: rgba(168, 177, 184, var(--tw-text-opacity))
}

.text-orange-300 {
    --tw-text-opacity: 1;
    color: rgba(255, 196, 102, var(--tw-text-opacity))
}

.text-orange-400 {
    --tw-text-opacity: 1;
    color: rgba(255, 177, 51, var(--tw-text-opacity))
}

.text-orange-500 {
    --tw-text-opacity: 1;
    color: rgba(255, 157, 0, var(--tw-text-opacity))
}

.text-primary {
    --tw-text-opacity: 1;
    color: rgba(83, 252, 24, var(--tw-text-opacity))
}

.text-red-400 {
    --tw-text-opacity: 1;
    color: rgba(237, 65, 99, var(--tw-text-opacity))
}

.text-red-50 {
    --tw-text-opacity: 1;
    color: rgba(253, 231, 235, var(--tw-text-opacity))
}

.text-secondary {
    --tw-text-opacity: 1;
    color: rgba(170, 176, 182, var(--tw-text-opacity))
}

.text-subtle {
    --tw-text-opacity: 1;
    color: rgba(146, 158, 166, var(--tw-text-opacity))
}

.text-surface-lower {
    --tw-text-opacity: 1;
    color: rgba(20, 21, 23, var(--tw-text-opacity))
}

.text-text-secondary {
    --tw-text-opacity: 1;
    color: rgba(211, 216, 219, var(--tw-text-opacity))
}

.text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity))
}

.text-white\/40 {
    color: hsla(0, 0%, 100%, .4)
}

.text-white\/60 {
    color: hsla(0, 0%, 100%, .6)
}

.text-white\/80 {
    color: hsla(0, 0%, 100%, .8)
}

.underline {
    text-decoration-line: underline
}

.line-through {
    text-decoration-line: line-through
}

.underline-offset-2 {
    text-underline-offset: 2px
}

.opacity-0 {
    opacity: 0
}

.opacity-100 {
    opacity: 1
}

.opacity-30 {
    opacity: .3
}

.opacity-40 {
    opacity: .4
}

.opacity-50 {
    opacity: .5
}

.opacity-60 {
    opacity: .6
}

.opacity-75 {
    opacity: .75
}

.opacity-\[var\(--chat-clip-dialog-expanded\)\] {
    opacity: var(--chat-clip-dialog-expanded)
}

.mix-blend-screen {
    mix-blend-mode: screen
}

.mix-blend-luminosity {
    mix-blend-mode: luminosity
}

.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: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-\[0px_10px_38px_-10px_rgba\(22\2c _23\2c _24\2c _0\.35\)\2c _0px_10px_20px_-15px_rgba\(22\2c _23\2c _24\2c _0\.2\)\] {
    --tw-shadow: 0px 10px 38px -10px rgba(22, 23, 24, .35), 0px 10px 20px -15px rgba(22, 23, 24, .2);
    --tw-shadow-colored: 0px 10px 38px -10px var(--tw-shadow-color), 0px 10px 20px -15px var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-\[0px_20px_32px_0px_rgba\(0\2c 0\2c 0\2c 0\.20\)\] {
    --tw-shadow: 0px 20px 32px 0px rgba(0, 0, 0, .2);
    --tw-shadow-colored: 0px 20px 32px 0px var(--tw-shadow-color)
}

.shadow-\[0px_20px_32px_0px_rgba\(0\2c 0\2c 0\2c 0\.20\)\],
.shadow-\[inset_0px_-2px_0\] {
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-\[inset_0px_-2px_0\] {
    --tw-shadow: inset 0px -2px 0;
    --tw-shadow-colored: inset 0px -2px 0 var(--tw-shadow-color)
}

.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)
}

.shadow-lg,
.shadow-md {
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-md {
    --tw-shadow: 0 4px 6px -1px 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)
}

.shadow-sm {
    --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color)
}

.shadow-sm,
.shadow-xl {
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-xl {
    --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color)
}

.shadow-\[\#24272C\] {
    --tw-shadow-color: #24272c;
    --tw-shadow: var(--tw-shadow-colored)
}

.shadow-black {
    --tw-shadow-color: #000;
    --tw-shadow: var(--tw-shadow-colored)
}

.shadow-surface-base {
    --tw-shadow-color: #393b40;
    --tw-shadow: var(--tw-shadow-colored)
}

.outline-none {
    outline: 2px solid transparent;
    outline-offset: 2px
}

.outline {
    outline-style: solid
}

.outline-0 {
    outline-width: 0
}

.outline-1 {
    outline-width: 1px
}

.outline-2 {
    outline-width: 2px
}

.-outline-offset-2 {
    outline-offset: -2px
}

.outline-offset-1 {
    outline-offset: 1px
}

.outline-offset-2 {
    outline-offset: 2px
}

.outline-grey-400 {
    outline-color: #7f8891
}

.outline-primary {
    outline-color: #53fc18
}

.outline-transparent {
    outline-color: 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(0px + var(--tw-ring-offset-width)) var(--tw-ring-color)
}

.ring-0,
.ring-1 {
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}

.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)
}

.ring-2 {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}

.ring-green-500 {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgba(83, 252, 24, var(--tw-ring-opacity))
}

.ring-transparent {
    --tw-ring-color: transparent
}

.ring-white {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(255 255 255/var(--tw-ring-opacity))
}

.ring-offset-grey-900 {
    --tw-ring-offset-color: #393b40
}

.blur {
    --tw-blur: blur(8px)
}

.blur,
.blur-xl {
    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-xl {
    --tw-blur: blur(24px)
}

.\!brightness-100 {
    --tw-brightness: brightness(1) !important;
    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) !important
}

.brightness-110 {
    --tw-brightness: brightness(1.1)
}

.brightness-110,
.brightness-125 {
    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)
}

.brightness-125 {
    --tw-brightness: brightness(1.25)
}

.contrast-\[110\%\] {
    --tw-contrast: contrast(110%)
}

.contrast-\[110\%\],
.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 {
    --tw-drop-shadow: drop-shadow(0 1px 2px rgba(0, 0, 0, .1)) drop-shadow(0 1px 1px rgba(0, 0, 0, .06))
}

.drop-shadow-lg {
    --tw-drop-shadow: drop-shadow(0 10px 8px rgba(0, 0, 0, .04)) drop-shadow(0 4px 3px rgba(0, 0, 0, .1))
}

.drop-shadow-lg,
.drop-shadow-sm {
    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-sm {
    --tw-drop-shadow: drop-shadow(0 1px 1px rgba(0, 0, 0, .05))
}

.grayscale {
    --tw-grayscale: grayscale(100%)
}

.grayscale,
.saturate-\[110\%\] {
    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)
}

.saturate-\[110\%\] {
    --tw-saturate: saturate(110%)
}

.\!filter {
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important
}

.filter {
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.backdrop-blur-3xl {
    --tw-backdrop-blur: blur(64px)
}

.backdrop-blur-3xl,
.backdrop-blur-\[2px\] {
    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}

.backdrop-blur-\[2px\] {
    --tw-backdrop-blur: blur(2px)
}

.backdrop-blur-sm {
    --tw-backdrop-blur: blur(4px)
}

.backdrop-blur-sm,
.backdrop-blur-xl {
    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}

.backdrop-blur-xl {
    --tw-backdrop-blur: blur(24px)
}

.backdrop-brightness-75 {
    --tw-backdrop-brightness: brightness(.75);
    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}

.transition {
    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-duration: .15s
}

.transition-\[background-color\2c transform\] {
    transition-property: background-color, transform;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

.transition-\[background-color\] {
    transition-property: background-color;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

.transition-\[border-color\2c opacity\] {
    transition-property: border-color, opacity;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

.transition-\[border-color\] {
    transition-property: border-color;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

.transition-\[filter\2c background-color\2c opacity\] {
    transition-property: filter, background-color, opacity;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

.transition-\[left\] {
    transition-property: left;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

.transition-\[max-height\] {
    transition-property: max-height;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

.transition-\[max-width\] {
    transition-property: max-width;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

.transition-\[opacity\2c max-height\] {
    transition-property: opacity, max-height;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

.transition-\[outline\] {
    transition-property: outline;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

.transition-\[padding-left\2c padding-right\] {
    transition-property: padding-left, padding-right;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

.transition-\[right\] {
    transition-property: right;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

.transition-\[transform\2c opacity\] {
    transition-property: transform, opacity;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

.transition-\[transform\] {
    transition-property: transform;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

.transition-\[width\2c opacity\] {
    transition-property: width, opacity;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

.transition-\[width\] {
    transition-property: width;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

.transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

.transition-height {
    transition-property: height;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

.transition-none {
    transition-property: none
}

.transition-opacity {
    transition-property: opacity;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

.transition-transform {
    transition-property: transform;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s
}

.duration-100 {
    transition-duration: .1s
}

.duration-1000 {
    transition-duration: 1s
}

.duration-150 {
    transition-duration: .15s
}

.duration-200 {
    transition-duration: .2s
}

.duration-300 {
    transition-duration: .3s
}

.ease-in-out {
    transition-timing-function: cubic-bezier(.4, 0, .2, 1)
}

.ease-linear {
    transition-timing-function: linear
}

.ease-out {
    transition-timing-function: cubic-bezier(0, 0, .2, 1)
}

.will-change-\[opacity\2c transform\] {
    will-change: opacity, transform
}

.will-change-\[transform\2c opacity\] {
    will-change: transform, opacity
}

.will-change-transform {
    will-change: transform
}

.contain-strict {
    contain: strict
}

.text-shadow-categoryPosition {
    text-shadow: 0 4px 6px rgba(27, 23, 23, .2), 0 2px 4px rgba(0, 0, 0, .12)
}

@keyframes enter {
    0% {
        opacity: var(--tw-enter-opacity, 1);
        transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0))
    }
}

@keyframes exit {
    to {
        opacity: var(--tw-exit-opacity, 1);
        transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0))
    }
}

.duration-100 {
    animation-duration: .1s
}

.duration-1000 {
    animation-duration: 1s
}

.duration-150 {
    animation-duration: .15s
}

.duration-200 {
    animation-duration: .2s
}

.duration-300 {
    animation-duration: .3s
}

.ease-in-out {
    animation-timing-function: cubic-bezier(.4, 0, .2, 1)
}

.ease-linear {
    animation-timing-function: linear
}

.ease-out {
    animation-timing-function: cubic-bezier(0, 0, .2, 1)
}

.running {
    animation-play-state: running
}

.\!paused {
    animation-play-state: paused !important
}

.paused {
    animation-play-state: paused
}

.player-no-controls::-webkit-media-controls {
    display: none !important
}

.h-xvh {
    height: 100vh
}

@supports (height: 100dvh) {
    .h-xvh {
        height: 100dvh
    }
}

.max-h-xvh {
    max-height: 100vh
}

@supports (max-height: 100dvh) {
    .max-h-xvh {
        max-height: 100dvh
    }
}

.w-xvw {
    width: 100vw
}

@supports (width: 100dvw) {
    .w-xvw {
        width: 100dvw
    }
}

.max-w-xvw {
    max-width: 100vw
}

@supports (max-width: 100dvw) {
    .max-w-xvw {
        max-width: 100dvw
    }
}

.no-scrollbar::-webkit-scrollbar {
    display: none
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none
}

.\[appearance\:textfield\] {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield
}

@supports (height: 100dvh) and (width:100dvw) {
    :root {
        --xvh-unit: 1dvh !important;
        --xvw-unit: 1dvw !important
    }
}

:root {
    --xvh-unit: 1vh;
    --xvw-unit: 1vw;
    --navbar-height: 60px;
    --sidebar-expanded-width: 256px;
    --sidebar-collapsed-width: 56px;
    --embedded-expanded-player-left: 272px;
    --embedded-collapsed-player-left: 80px;
    --chat-width: 340px;
    --chat-expanded: 1;
    --chat-collapsed-button: none;
    --chat-clip-dialog-expanded: 1;
    --chat-clip-dialog-collapsed-button: none;
    --background-color: #141517;
    --chat-command-validation-color: #e9113c;
    --chat-user-info-popover-width: 340px;
    --chatroom-font-size: 13px;
    --chatroom-timestamps-display: none;
    --chatroom-mod-actions-display: none;
    --tile-hover-thickness: 6px;
    --channel-mobile-banner-height: 44px;
    --channel-desktop-banner-height: 134px;
    --channel-info-height: 132px;
    --channel-desktop-reduced-banner-height: 320px
}

body {
    color: #fff;
    background: #000;
    /* Yedek bir arka plan rengi */
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../assets/img/bg_static.png) no-repeat center center fixed;
    background-size: cover;
    filter: hue-rotate(var(--hue, 0deg));
    z-index: -1;
    transition: all 200ms;
}

@media screen and (prefers-color-scheme: light) {
    body {
        color: #fff;
        background: var(--background-color)
    }
}

::-webkit-scrollbar-track {
    background: transparent
}

::-webkit-scrollbar {
    width: 4px;
    height: 4px
}

::-webkit-scrollbar-thumb {
    border-radius: 15px;
    background-clip: padding-box;
    border: 5px solid hsla(0, 0%, 100%, .25)
}

.rdp-vhidden {
    display: none
}

mark {
    background-color: transparent;
    font-weight: 600 !important;
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity))
}

.remove-arrow::-webkit-inner-spin-button,
.remove-arrow::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.remove-arrow {
    -moz-appearance: textfield
}

input:-webkit-autofill,
input:-webkit-autofill:enabled,
input:-webkit-autofill:hover,
select:-webkit-autofill,
select:-webkit-autofill:enabled,
select:-webkit-autofill:hover,
textarea:-webkit-autofill,
textarea:-webkit-autofill:enabled,
textarea:-webkit-autofill:hover {
    -webkit-text-fill-color: #fff;
    box-shadow: inset 0 0 0 1000px #475054;
    background-color: #475054;
    font-weight: 600;
    font-size: .875rem;
    border: 1px solid #475054;
    border-radius: .25rem;
    -webkit-transition: color 600000s 0s;
    transition: color 600000s 0s
}

input:-webkit-autofill:focus,
select:-webkit-autofill:focus,
textarea:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff;
    box-shadow: inset 0 0 0 1000px #0b0e0f;
    background-color: #0b0e0f;
    font-weight: 600;
    font-size: .875rem;
    border: 2px solid #fff
}

input[type=date] {
    position: relative
}

input[type=date]::-webkit-calendar-picker-indicator,
input[type=date]::-webkit-clear-button,
input[type=date]::-webkit-inner-spin-button {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    padding: 0;
    color-scheme: dark
}

.placeholder\:text-grey-300::-moz-placeholder {
    --tw-text-opacity: 1;
    color: rgba(170, 176, 182, var(--tw-text-opacity))
}

.placeholder\:text-grey-300::placeholder {
    --tw-text-opacity: 1;
    color: rgba(170, 176, 182, var(--tw-text-opacity))
}

.after\:absolute:after {
    content: var(--tw-content);
    position: absolute
}

.after\:inset-0:after {
    content: var(--tw-content);
    inset: 0
}

.after\:z-common:after {
    content: var(--tw-content);
    z-index: 1
}

.after\:block:after {
    content: var(--tw-content);
    display: block
}

.after\:size-\[0\.625em\]:after {
    content: var(--tw-content);
    width: .625em;
    height: .625em
}

.after\:h-\[0\.688rem\]:after {
    content: var(--tw-content);
    height: .688rem
}

.after\:w-\[0\.688rem\]:after {
    content: var(--tw-content);
    width: .688rem
}

.after\:shrink-0:after {
    content: var(--tw-content);
    flex-shrink: 0
}

.after\:rounded:after {
    content: var(--tw-content);
    border-radius: .25rem
}

.after\:rounded-\[50\%\]:after {
    content: var(--tw-content);
    border-radius: 50%
}

.after\:rounded-full:after {
    content: var(--tw-content);
    border-radius: 9999px
}

.after\:bg-green-500:after,
.after\:bg-primary:after {
    content: var(--tw-content);
    --tw-bg-opacity: 1;
    background-color: rgba(83, 252, 24, var(--tw-bg-opacity))
}

.after\:bg-gradient-home-category:after {
    content: var(--tw-content);
    background-image: linear-gradient(149deg, rgba(0, 0, 0, .72), rgba(54, 54, 54, .2) 32%)
}

.after\:content-\[\'\'\]:after {
    --tw-content: "";
    content: var(--tw-content)
}

.first\:mt-0:first-child {
    margin-top: 0
}

.first\:hidden:first-child {
    display: none
}

.first\:rounded-l:first-child {
    border-top-left-radius: .25rem;
    border-bottom-left-radius: .25rem
}

.first\:rounded-t:first-child {
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem
}

.first\:pl-5:first-child {
    padding-left: 1.25rem
}

.first\:pt-0:first-child {
    padding-top: 0
}

.last\:hidden:last-child {
    display: none
}

.last\:rounded-b:last-child {
    border-bottom-right-radius: .25rem;
    border-bottom-left-radius: .25rem
}

.last\:rounded-r:last-child {
    border-top-right-radius: .25rem;
    border-bottom-right-radius: .25rem
}

.last\:border-0:last-child {
    border-width: 0
}

.last\:border-b-0:last-child {
    border-bottom-width: 0
}

.empty\:hidden:empty {
    display: none
}

.focus-within\:relative:focus-within {
    position: relative
}

.focus-within\:z-\[10\]:focus-within {
    z-index: 10
}

.focus-within\:border-transparent:focus-within {
    border-color: transparent
}

.focus-within\:\!bg-\[\#2A2D32\]:focus-within {
    --tw-bg-opacity: 1 !important;
    background-color: rgb(42 45 50/var(--tw-bg-opacity)) !important
}

.focus-within\:bg-\[\#070809\]:focus-within {
    --tw-bg-opacity: 1;
    background-color: rgb(7 8 9/var(--tw-bg-opacity))
}

.focus-within\:outline-none:focus-within {
    outline: 2px solid transparent;
    outline-offset: 2px
}

.focus-within\:ring-1:focus-within {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}

.focus-within\:ring-\[\#F4F5F6\]:focus-within {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(244 245 246/var(--tw-ring-opacity))
}

.focus-within\:ring-offset-1:focus-within {
    --tw-ring-offset-width: 1px
}

.hover\:\!bg-transparent:hover {
    background-color: transparent !important
}

.focus-within\:hover\:border-transparent:hover:focus-within {
    border-color: transparent
}

.focus\:bg-grey-600:focus {
    --tw-bg-opacity: 1;
    background-color: rgba(85, 92, 101, var(--tw-bg-opacity))
}

.focus\:bg-surface-tint:focus {
    --tw-bg-opacity: 1;
    background-color: rgba(49, 53, 56, var(--tw-bg-opacity))
}

.focus\:bg-transparent:focus {
    background-color: transparent
}

.focus\:text-white:focus {
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity))
}

.focus\:outline-none:focus {
    outline: 2px solid transparent;
    outline-offset: 2px
}

.focus\:ring-2:focus {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}

.focus\:ring-green-500:focus {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgba(83, 252, 24, var(--tw-ring-opacity))
}

.focus\:ring-offset-2:focus {
    --tw-ring-offset-width: 2px
}

.focus-visible\:border-white:focus-visible {
    --tw-border-opacity: 1;
    border-color: rgb(255 255 255/var(--tw-border-opacity))
}

.focus-visible\:bg-green-500:focus-visible {
    --tw-bg-opacity: 1;
    background-color: rgba(83, 252, 24, var(--tw-bg-opacity))
}

.focus-visible\:bg-red-500:focus-visible {
    --tw-bg-opacity: 1;
    background-color: rgba(233, 17, 60, var(--tw-bg-opacity))
}

.focus-visible\:bg-secondary\/40:focus-visible {
    background-color: hsla(210, 8%, 69%, .4)
}

.focus-visible\:bg-white:focus-visible {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity))
}

.focus-visible\:text-grey-950:focus-visible {
    --tw-text-opacity: 1;
    color: rgba(20, 21, 23, var(--tw-text-opacity))
}

.focus-visible\:underline:focus-visible {
    text-decoration-line: underline
}

.focus-visible\:outline-none:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px
}

.focus-visible\:outline-0:focus-visible {
    outline-width: 0
}

.focus-visible\:outline-green-200:focus-visible {
    outline-color: #bafea3
}

.focus-visible\:outline-grey-100:focus-visible {
    outline-color: #e4e6e9
}

.focus-visible\:outline-grey-300:focus-visible {
    outline-color: #aab0b6
}

.focus-visible\:outline-red-200:focus-visible {
    outline-color: #f6a0b1
}

.focus-visible\:ring-1: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(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}

.focus-visible\:ring-2:focus-visible {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}

.focus-visible\:ring-green-500:focus-visible {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgba(83, 252, 24, var(--tw-ring-opacity))
}

.focus-visible\:ring-white:focus-visible {
    --tw-ring-opacity: 1;
    --tw-ring-color: rgb(255 255 255/var(--tw-ring-opacity))
}

.focus-visible\:ring-offset-2:focus-visible {
    --tw-ring-offset-width: 2px
}

.active\:scale-\[0\.95\]:active {
    --tw-scale-x: 0.95;
    --tw-scale-y: 0.95
}

.active\:scale-\[0\.95\]:active,
.active\:scale-\[0\.985\]:active {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.active\:scale-\[0\.985\]:active {
    --tw-scale-x: 0.985;
    --tw-scale-y: 0.985
}

.active\:scale-\[0\.98\]:active {
    --tw-scale-x: 0.98;
    --tw-scale-y: 0.98;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.active\:bg-\[\#474f54AA\]:active {
    background-color: #474f54aa
}

.disabled\:pointer-events-none:disabled {
    pointer-events: none
}

.disabled\:cursor-default:disabled {
    cursor: default
}

.disabled\:cursor-not-allowed:disabled {
    cursor: not-allowed
}

.disabled\:border-transparent:disabled {
    border-color: transparent
}

.disabled\:\!bg-transparent:disabled {
    background-color: transparent !important
}

.disabled\:bg-green-800:disabled {
    --tw-bg-opacity: 1;
    background-color: rgba(33, 101, 10, var(--tw-bg-opacity))
}

.disabled\:bg-grey-900:disabled {
    --tw-bg-opacity: 1;
    background-color: rgba(57, 59, 64, var(--tw-bg-opacity))
}

.disabled\:bg-red-800:disabled {
    --tw-bg-opacity: 1;
    background-color: rgba(93, 7, 24, var(--tw-bg-opacity))
}

.disabled\:bg-transparent:disabled {
    background-color: transparent
}

.disabled\:text-grey-300:disabled {
    --tw-text-opacity: 1;
    color: rgba(170, 176, 182, var(--tw-text-opacity))
}

.disabled\:text-grey-600:disabled {
    --tw-text-opacity: 1;
    color: rgba(85, 92, 101, var(--tw-text-opacity))
}

.disabled\:opacity-0:disabled {
    opacity: 0
}

.disabled\:opacity-100:disabled {
    opacity: 1
}

.disabled\:opacity-30:disabled {
    opacity: .3
}

.disabled\:opacity-40:disabled {
    opacity: .4
}

.disabled\:opacity-50:disabled {
    opacity: .5
}

.disabled\:opacity-60:disabled {
    opacity: .6
}

.disabled\:opacity-80:disabled {
    opacity: .8
}

.disabled\:outline-grey-600:disabled {
    outline-color: #555c65
}

.group:focus-visible .group-focus-visible\:bg-green-500 {
    --tw-bg-opacity: 1;
    background-color: rgba(83, 252, 24, var(--tw-bg-opacity))
}

.group:disabled .group-disabled\:bg-\[\#21650A\] {
    --tw-bg-opacity: 1;
    background-color: rgb(33 101 10/var(--tw-bg-opacity))
}

.peer:disabled~.peer-disabled\:cursor-not-allowed {
    cursor: not-allowed
}

.peer:disabled~.peer-disabled\:opacity-70 {
    opacity: .7
}

.has-\[\:disabled\]\:opacity-50:has(:disabled) {
    opacity: .5
}

.aria-\[invalid\=true\]\:border-danger-base[aria-invalid=true] {
    --tw-border-opacity: 1;
    border-color: rgba(233, 17, 60, var(--tw-border-opacity))
}

.data-\[disabled\]\:pointer-events-none[data-disabled],
.data-\[state\=checked\]\:pointer-events-none[data-state=checked] {
    pointer-events: none
}

.data-\[side\=bottom\]\:translate-y-1[data-side=bottom] {
    --tw-translate-y: 0.25rem
}

.data-\[side\=bottom\]\:translate-y-1[data-side=bottom],
.data-\[side\=left\]\:-translate-x-1[data-side=left] {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.data-\[side\=left\]\:-translate-x-1[data-side=left] {
    --tw-translate-x: -0.25rem
}

.data-\[side\=right\]\:translate-x-1[data-side=right] {
    --tw-translate-x: 0.25rem
}

.data-\[side\=right\]\:translate-x-1[data-side=right],
.data-\[side\=top\]\:-translate-y-1[data-side=top] {
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.data-\[side\=top\]\:-translate-y-1[data-side=top] {
    --tw-translate-y: -0.25rem
}

.data-\[state\=checked\]\:translate-x-\[calc\(1\.21875rem-0\.1375rem-0\.48125rem\)\][data-state=checked] {
    --tw-translate-x: calc(1.21875rem - 0.1375rem - 0.48125rem);
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.data-\[state\=checked\]\:translate-x-\[calc\(2\.25rem-0\.25rem-0\.875rem\)\][data-state=checked] {
    --tw-translate-x: calc(2.25rem - 0.25rem - 0.875rem);
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.data-\[state\=checked\]\:translate-x-\[calc\(2\.9375rem-0\.25rem-1\.4375rem\)\][data-state=checked] {
    --tw-translate-x: calc(2.9375rem - 0.25rem - 1.4375rem);
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.data-\[side\=bottom\]\:animate-slideUpAndFade[data-side=bottom] {
    animation: slideUpAndFade .4s cubic-bezier(.16, 1, .3, 1)
}

.data-\[side\=left\]\:animate-slideRightAndFade[data-side=left] {
    animation: slideRightAndFade .4s cubic-bezier(.16, 1, .3, 1)
}

.data-\[side\=right\]\:animate-slideLeftAndFade[data-side=right] {
    animation: slideLeftAndFade .4s cubic-bezier(.16, 1, .3, 1)
}

.data-\[side\=top\]\:animate-slideDownAndFade[data-side=top] {
    animation: slideDownAndFade .4s cubic-bezier(.16, 1, .3, 1)
}

@keyframes slideUpKF {
    0% {
        height: var(--radix-accordion-content-height);
        opacity: 1
    }

    85% {
        opacity: 0
    }

    to {
        height: 0;
        opacity: 0
    }
}

.data-\[state\=closed\]\:animate-slideUp[data-state=closed] {
    animation: slideUpKF .3s cubic-bezier(.87, 0, .13, 1)
}

.data-\[state\=delayed-open\]\:data-\[side\=bottom\]\:animate-slideUpAndFade[data-side=bottom][data-state=delayed-open] {
    animation: slideUpAndFade .4s cubic-bezier(.16, 1, .3, 1)
}

.data-\[state\=delayed-open\]\:data-\[side\=left\]\:animate-slideRightAndFade[data-side=left][data-state=delayed-open] {
    animation: slideRightAndFade .4s cubic-bezier(.16, 1, .3, 1)
}

.data-\[state\=delayed-open\]\:data-\[side\=right\]\:animate-slideLeftAndFade[data-side=right][data-state=delayed-open] {
    animation: slideLeftAndFade .4s cubic-bezier(.16, 1, .3, 1)
}

.data-\[state\=delayed-open\]\:data-\[side\=top\]\:animate-slideDownAndFade[data-side=top][data-state=delayed-open] {
    animation: slideDownAndFade .4s cubic-bezier(.16, 1, .3, 1)
}

@keyframes slideDownKF {
    0% {
        height: 0;
        opacity: 0
    }

    50% {
        opacity: 0
    }

    to {
        height: var(--radix-accordion-content-height);
        opacity: 1
    }
}

.data-\[state\=open\]\:animate-slideDown[data-state=open] {
    animation: slideDownKF .3s cubic-bezier(.87, 0, .13, 1)
}

@keyframes slideUpAndFade {
    0% {
        opacity: 0;
        transform: translateY(2px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.data-\[state\=open\]\:data-\[side\=bottom\]\:animate-slideUpAndFade[data-side=bottom][data-state=open] {
    animation: slideUpAndFade .4s cubic-bezier(.16, 1, .3, 1)
}

@keyframes slideRightAndFade {
    0% {
        opacity: 0;
        transform: translateX(-2px)
    }

    to {
        opacity: 1;
        transform: translateX(0)
    }
}

.data-\[state\=open\]\:data-\[side\=left\]\:animate-slideRightAndFade[data-side=left][data-state=open] {
    animation: slideRightAndFade .4s cubic-bezier(.16, 1, .3, 1)
}

@keyframes slideLeftAndFade {
    0% {
        opacity: 0;
        transform: translateX(2px)
    }

    to {
        opacity: 1;
        transform: translateX(0)
    }
}

.data-\[state\=open\]\:data-\[side\=right\]\:animate-slideLeftAndFade[data-side=right][data-state=open] {
    animation: slideLeftAndFade .4s cubic-bezier(.16, 1, .3, 1)
}

@keyframes slideDownAndFade {
    0% {
        opacity: 0;
        transform: translateY(-2px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.data-\[state\=open\]\:data-\[side\=top\]\:animate-slideDownAndFade[data-side=top][data-state=open] {
    animation: slideDownAndFade .4s cubic-bezier(.16, 1, .3, 1)
}

.data-\[showingmore\=true\]\:\!grid-rows-2[data-showingmore=true] {
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important
}

.data-\[showingmore\=false\]\:\!gap-y-0[data-showingmore=false] {
    row-gap: 0 !important
}

.data-\[state\=checked\]\:border-\[\#F4F5F6\][data-state=checked] {
    --tw-border-opacity: 1;
    border-color: rgb(244 245 246/var(--tw-border-opacity))
}

.data-\[state\=checked\]\:border-primary[data-state=checked] {
    --tw-border-opacity: 1;
    border-color: rgba(83, 252, 24, var(--tw-border-opacity))
}

.data-\[state\=checked\]\:border-white[data-state=checked] {
    --tw-border-opacity: 1;
    border-color: rgb(255 255 255/var(--tw-border-opacity))
}

.data-\[state\=on\]\:border-green-500[data-state=on] {
    --tw-border-opacity: 1;
    border-color: rgba(83, 252, 24, var(--tw-border-opacity))
}

.data-\[state\=active\]\:bg-grey-900[data-state=active] {
    --tw-bg-opacity: 1;
    background-color: rgba(57, 59, 64, var(--tw-bg-opacity))
}

.data-\[state\=active\]\:bg-surface-tint[data-state=active] {
    --tw-bg-opacity: 1;
    background-color: rgba(49, 53, 56, var(--tw-bg-opacity))
}

.data-\[state\=checked\]\:bg-\[\#F4F5F6\][data-state=checked] {
    --tw-bg-opacity: 1;
    background-color: rgb(244 245 246/var(--tw-bg-opacity))
}

.data-\[state\=checked\]\:bg-green-500[data-state=checked] {
    --tw-bg-opacity: 1;
    background-color: rgba(83, 252, 24, var(--tw-bg-opacity))
}

.data-\[state\=checked\]\:bg-green-800[data-state=checked] {
    --tw-bg-opacity: 1;
    background-color: rgba(33, 101, 10, var(--tw-bg-opacity))
}

.data-\[state\=checked\]\:bg-grey-800[data-state=checked] {
    --tw-bg-opacity: 1;
    background-color: rgba(65, 68, 73, var(--tw-bg-opacity))
}

.data-\[state\=checked\]\:bg-white[data-state=checked] {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity))
}

.data-\[state\=checked\]\:bg-white\/20[data-state=checked] {
    background-color: hsla(0, 0%, 100%, .2)
}

.data-\[state\=closed\]\:bg-shade-base[data-state=closed] {
    --tw-bg-opacity: 1;
    background-color: rgba(23, 28, 30, var(--tw-bg-opacity))
}

.data-\[state\=on\]\:bg-green-500[data-state=on] {
    --tw-bg-opacity: 1;
    background-color: rgba(83, 252, 24, var(--tw-bg-opacity))
}

.data-\[state\=open\]\:bg-secondary\/20[data-state=open] {
    background-color: hsla(210, 8%, 69%, .2)
}

.data-\[state\=open\]\:bg-shade-base[data-state=open] {
    --tw-bg-opacity: 1;
    background-color: rgba(23, 28, 30, var(--tw-bg-opacity))
}

.data-\[state\=selected\]\:bg-grey-700[data-state=selected] {
    --tw-bg-opacity: 1;
    background-color: rgba(73, 77, 85, var(--tw-bg-opacity))
}

.data-\[state\=active\]\:text-primary[data-state=active] {
    --tw-text-opacity: 1;
    color: rgba(83, 252, 24, var(--tw-text-opacity))
}

.data-\[state\=active\]\:text-white[data-state=active] {
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity))
}

.data-\[state\=checked\]\:text-grey-700[data-state=checked] {
    --tw-text-opacity: 1;
    color: rgba(73, 77, 85, var(--tw-text-opacity))
}

.data-\[disabled\]\:opacity-50[data-disabled] {
    opacity: .5
}

.data-\[state\=active\]\:shadow-sm[data-state=active] {
    --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
    --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.data-\[state\=checked\]\:outline-green-600[data-state=checked] {
    outline-color: #42ca13
}

.data-\[state\=checked\]\:brightness-125[data-state=checked] {
    --tw-brightness: brightness(1.25);
    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)
}

.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-name: enter;
    animation-duration: .15s;
    --tw-enter-opacity: initial;
    --tw-enter-scale: initial;
    --tw-enter-rotate: initial;
    --tw-enter-translate-x: initial;
    --tw-enter-translate-y: initial
}

.data-\[state\=closed\]\:animate-out[data-state=closed] {
    animation-name: exit;
    animation-duration: .15s;
    --tw-exit-opacity: initial;
    --tw-exit-scale: initial;
    --tw-exit-rotate: initial;
    --tw-exit-translate-x: initial;
    --tw-exit-translate-y: initial
}

.data-\[state\=closed\]\:fade-out-0[data-state=closed] {
    --tw-exit-opacity: 0
}

.data-\[state\=open\]\:fade-in-0[data-state=open] {
    --tw-enter-opacity: 0
}

.data-\[state\=closed\]\:zoom-out-95[data-state=closed] {
    --tw-exit-scale: .95
}

.data-\[state\=open\]\:zoom-in-95[data-state=open] {
    --tw-enter-scale: .95
}

.data-\[side\=bottom\]\:slide-in-from-top-2[data-side=bottom] {
    --tw-enter-translate-y: -0.5rem
}

.data-\[side\=left\]\:slide-in-from-right-2[data-side=left] {
    --tw-enter-translate-x: 0.5rem
}

.data-\[side\=right\]\:slide-in-from-left-2[data-side=right] {
    --tw-enter-translate-x: -0.5rem
}

.data-\[side\=top\]\:slide-in-from-bottom-2[data-side=top] {
    --tw-enter-translate-y: 0.5rem
}

.data-\[state\=closed\]\:slide-out-to-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-left-1\/2[data-state=closed] {
    --tw-exit-translate-x: -50%
}

.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\=closed\]\:slide-out-to-top-\[48\%\][data-state=closed] {
    --tw-exit-translate-y: -48%
}

.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-left-1\/2[data-state=open] {
    --tw-enter-translate-x: -50%
}

.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\=open\]\:slide-in-from-top-\[48\%\][data-state=open] {
    --tw-enter-translate-y: -48%
}

.data-\[state\=closed\]\:duration-300[data-state=closed] {
    animation-duration: .3s
}

.data-\[state\=open\]\:duration-500[data-state=open] {
    animation-duration: .5s
}

.data-\[state\=checked\]\:hover\:border-white:hover[data-state=checked] {
    --tw-border-opacity: 1;
    border-color: rgb(255 255 255/var(--tw-border-opacity))
}

.data-\[state\=checked\]\:hover\:bg-white:hover[data-state=checked] {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity))
}

.data-\[state\=checked\]\:hover\:outline-green-500:hover[data-state=checked] {
    outline-color: #53fc18
}

.group\/main[data-theatre=true] .group-data-\[theatre\=true\]\/main\:pointer-events-auto {
    pointer-events: auto
}

.group\/main[data-theatre=true] .group-data-\[theatre\=true\]\/main\:fixed {
    position: fixed
}

.group\/main[data-chat=false] .group-data-\[chat\=false\]\/main\:block {
    display: block
}

.group[data-state=active] .group-data-\[state\=active\]\:hidden,
.group[data-state=inactive] .group-data-\[state\=inactive\]\:hidden {
    display: none
}

.group\/main[data-theatre=true] .group-data-\[theatre\=true\]\/main\:\!hidden {
    display: none !important
}

.group\/main[data-theatre=true] .group-data-\[theatre\=true\]\/main\:\!h-\[100vh\] {
    height: 100vh !important
}

.group[data-state=closed] .group-data-\[state\=closed\]\:max-h-0 {
    max-height: 0
}

.group[data-state=open] .group-data-\[state\=open\]\:max-h-\[360px\] {
    max-height: 360px
}

.group\/main[data-theatre=true] .group-data-\[theatre\=true\]\/main\:\!max-h-\[unset\] {
    max-height: unset !important
}

.group\/main[data-theatre=true][data-chat=true] .group-data-\[theatre\=true\]\/main\:group-data-\[chat\=true\]\/main\:w-\[calc\(100vw-var\(--chat-width\)\)\] {
    width: calc(100vw - var(--chat-width))
}

.group[data-state=open] .group-data-\[state\=open\]\:rotate-180 {
    --tw-rotate: 180deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.group\/main[data-theatre=true] .group-data-\[theatre\=true\]\/main\:\!overflow-y-hidden {
    overflow-y: hidden !important
}

.group[data-active=true] .group-data-\[active\=true\]\:\!bg-green-500 {
    --tw-bg-opacity: 1 !important;
    background-color: rgba(83, 252, 24, var(--tw-bg-opacity)) !important
}

.group\/main[data-chat=false] .group-data-\[chat\=false\]\/main\:opacity-0 {
    opacity: 0
}

.group\/main[data-theatre=true] .group-data-\[theatre\=true\]\/main\:opacity-100 {
    opacity: 1
}

.group\/main[data-theatre=true] .group-data-\[theatre\=true\]\/main\:h-xvh {
    height: 100vh
}

@supports (height:100dvh) {
    .group\/main[data-theatre=true] .group-data-\[theatre\=true\]\/main\:h-xvh {
        height: 100dvh
    }
}

.group\/main[data-theatre=true] .group-data-\[theatre\=true\]\/main\:max-h-xvh {
    max-height: 100vh
}

@supports (max-height:100dvh) {
    .group\/main[data-theatre=true] .group-data-\[theatre\=true\]\/main\:max-h-xvh {
        max-height: 100dvh
    }
}

@supports (height:100dvh) {
    .supports-\[height\:100dvh\]\:h-\[calc\(100dvh-var\(--navbar-height\)\)\] {
        height: calc(100dvh - var(--navbar-height))
    }
}

@supports (width:100dvw) {
    .supports-\[width\:100dvw\]\:h-\[calc\(100\%-56\.25dvw\)\] {
        height: calc(100% - 56.25dvw)
    }
}

@supports (height:100dvh) {
    .supports-\[height\:100dvh\]\:max-h-\[90dvh\] {
        max-height: 90dvh
    }

    .supports-\[height\:100dvh\]\:max-h-\[calc\(100dvh-var\(--navbar-height\)\)\] {
        max-height: calc(100dvh - var(--navbar-height))
    }

    .supports-\[height\:100dvh\]\:max-h-\[calc\(100dvh-var\(--navbar-height\)-var\(--channel-info-height\)\)\] {
        max-height: calc(100dvh - var(--navbar-height) - var(--channel-info-height))
    }

    .supports-\[height\:100dvh\]\:min-h-\[33dvh\] {
        min-height: 33dvh
    }
}

@supports (width:100dvw) {
    .supports-\[width\:100dvw\]\:w-\[17dvw\] {
        width: 17dvw
    }

    .supports-\[width\:100dvw\]\:w-\[25dvw\] {
        width: 25dvw
    }

    .supports-\[width\:100dvw\]\:max-w-\[90dvw\] {
        max-width: 90dvw
    }
}

@supports (height:100dvh) {
    .group\/main[data-theatre=true] .group-data-\[theatre\=true\]\/main\:supports-\[height\:100dvh\]\:\!h-\[100dvh\] {
        height: 100dvh !important
    }
}

@supports (width:100dvw) {
    .group\/main[data-theatre=true][data-chat=true] .supports-\[width\:100dvw\]\:group-data-\[theatre\=true\]\/main\:group-data-\[chat\=true\]\/main\:w-\[calc\(100dvw-var\(--chat-width\)\)\] {
        width: calc(100dvw - var(--chat-width))
    }
}

@media (min-width:640px) {
    .sm\:mt-0 {
        margin-top: 0
    }

    .sm\:size-8 {
        width: 2rem;
        height: 2rem
    }

    .sm\:\!h-auto {
        height: auto !important
    }

    .sm\:h-\[350px\] {
        height: 350px
    }

    .sm\:h-\[382px\] {
        height: 382px
    }

    .sm\:min-h-\[350px\] {
        min-height: 350px
    }

    .sm\:w-1\/2 {
        width: 50%
    }

    .sm\:min-w-\[340px\] {
        min-width: 340px
    }

    .sm\:max-w-\[425px\] {
        max-width: 425px
    }

    .sm\:max-w-sm {
        max-width: 24rem
    }

    .sm\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .sm\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }

    .sm\:flex-row {
        flex-direction: row
    }

    .sm\:flex-col {
        flex-direction: column
    }

    .sm\:justify-end {
        justify-content: flex-end
    }

    .sm\:justify-center {
        justify-content: center
    }

    .sm\:space-x-2>:not([hidden])~:not([hidden]) {
        --tw-space-x-reverse: 0;
        margin-right: calc(.5rem * var(--tw-space-x-reverse));
        margin-left: calc(.5rem * calc(1 - var(--tw-space-x-reverse)))
    }

    .sm\:text-left {
        text-align: left
    }

    .sm\:block {
        display: block
    }

    .sm\:hidden {
        display: none
    }
}

@media (min-width:768px) {
    .md\:mt-0 {
        margin-top: 0
    }

    .md\:block {
        display: block
    }

    .md\:hidden {
        display: none
    }

    .md\:h-2 {
        height: .5rem
    }

    .md\:h-9 {
        height: 2.25rem
    }

    .md\:h-\[211px\] {
        height: 211px
    }

    .md\:h-\[272px\] {
        height: 272px
    }

    .md\:h-\[305px\] {
        height: 305px
    }

    .md\:h-full {
        height: 100%
    }

    .md\:min-h-\[272px\] {
        min-height: 272px
    }

    .md\:w-\[70px\] {
        width: 70px
    }

    .md\:grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr))
    }

    .md\:justify-normal {
        justify-content: normal
    }

    .md\:gap-4 {
        gap: 1rem
    }

    .md\:space-y-8>:not([hidden])~:not([hidden]) {
        --tw-space-y-reverse: 0;
        margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
        margin-bottom: calc(2rem * var(--tw-space-y-reverse))
    }

    .md\:bg-shade-base {
        --tw-bg-opacity: 1;
        background-color: rgba(23, 28, 30, var(--tw-bg-opacity))
    }

    .md\:px-8 {
        padding-left: 2rem;
        padding-right: 2rem
    }

    .md\:pb-9 {
        padding-bottom: 2.25rem
    }

    .md\:pt-0 {
        padding-top: 0
    }

    .md\:text-base {
        font-size: 1rem;
        line-height: 1.5rem
    }
}

@media (min-width:1024px) {

    .lg\:min-w-\[500px\] {
        min-width: 500px;
    }

    .lg\:pr-8 {
        padding-right: 2rem;
    }

    .lg\:w-1 {
        width: .25rem;
    }

    .lg\:h-full {
        height: 100%;
    }

    .lg\:h-auto {
        height: auto;
    }

    .lg\:not-sr-only {
        position: static;
        width: auto;
        height: auto;
        padding: 0;
        margin: 0;
        overflow: visible;
        clip: auto;
        white-space: normal
    }

    .lg\:absolute {
        position: absolute
    }

    .lg\:inset-x-96 {
        left: 24rem;
        right: 24rem
    }

    .lg\:inset-y-0 {
        top: 0;
        bottom: 0
    }

    .lg\:-bottom-1 {
        bottom: -.25rem
    }

    .lg\:-top-\[150px\] {
        top: -150px
    }

    .lg\:bottom-\[calc\(100\%-40px\)\] {
        bottom: calc(100% - 40px)
    }

    .lg\:bottom-\[unset\] {
        bottom: unset
    }

    .lg\:left-7 {
        left: 1.75rem
    }

    .lg\:left-\[50\%\] {
        left: 50%
    }

    .lg\:left-\[unset\] {
        left: unset
    }

    .lg\:left-\[var\(--embedded-expanded-player-left\)\] {
        left: var(--embedded-expanded-player-left)
    }

    .lg\:right-7 {
        right: 1.75rem
    }

    .lg\:right-\[unset\] {
        right: unset
    }

    .lg\:right-\[var\(--embedded-expanded-player-left\)\] {
        right: var(--embedded-expanded-player-left)
    }

    .lg\:top-14 {
        top: 3.5rem
    }

    .lg\:top-7 {
        top: 1.75rem
    }

    .lg\:top-\[50\%\] {
        top: 50%
    }

    .lg\:top-\[calc\(var\(--navbar-height\)\+1em\)\] {
        top: calc(var(--navbar-height) + 1em)
    }

    .lg\:top-\[var\(--channel-desktop-banner-height\)\] {
        top: var(--channel-desktop-banner-height)
    }

    .lg\:order-2 {
        order: 2
    }

    .lg\:order-first {
        order: -9999
    }

    .lg\:mx-0 {
        margin-left: 0;
        margin-right: 0
    }

    .lg\:-mr-3 {
        margin-right: -.75rem
    }

    .lg\:mb-4 {
        margin-bottom: 1rem
    }

    .lg\:ml-auto {
        margin-left: auto
    }

    .lg\:box-content {
        box-sizing: content-box
    }

    .lg\:block {
        display: block
    }

    .lg\:flex {
        display: flex
    }

    .lg\:inline-flex {
        display: inline-flex
    }

    .lg\:grid {
        display: grid
    }

    .lg\:hidden {
        display: none
    }

    .lg\:size-10 {
        width: 2.5rem;
        height: 2.5rem
    }

    .lg\:size-12 {
        width: 3rem;
        height: 3rem
    }

    .lg\:size-16 {
        width: 4rem;
        height: 4rem
    }

    .lg\:size-20 {
        width: 5rem;
        height: 5rem
    }

    .lg\:size-7 {
        width: 1.75rem;
        height: 1.75rem
    }

    .lg\:size-9 {
        width: 2.25rem;
        height: 2.25rem
    }

    .lg\:h-1 {
        height: .25rem
    }

    .lg\:h-10 {
        height: 2.5rem
    }

    .lg\:h-6 {
        height: 1.5rem
    }

    .lg\:h-\[264px\] {
        height: 264px
    }

    .lg\:h-\[302px\] {
        height: 302px
    }

    .lg\:h-\[68px\] {
        height: 68px
    }

    .lg\:h-\[calc\(100vh-var\(--navbar-height\)\+var\(--channel-desktop-banner-height\)-var\(--channel-info-height\)\)\] {
        height: calc(100vh - var(--navbar-height) + var(--channel-desktop-banner-height) - var(--channel-info-height))
    }

    .lg\:h-\[unset\] {
        height: unset
    }

    .lg\:h-\[var\(--channel-desktop-banner-height\)\] {
        height: var(--channel-desktop-banner-height)
    }

    .lg\:h-auto {
        height: auto
    }

    .lg\:h-dvh {
        height: 100dvh
    }

    .lg\:h-fit {
        height: -moz-fit-content;
        height: fit-content
    }

    .lg\:max-h-\[80vh\] {
        max-height: 80vh
    }

    .lg\:max-h-\[90vh\] {
        max-height: 90vh
    }

    .lg\:max-h-\[495px\] {
        max-height: 495px
    }

    .lg\:min-h-\[20vh\] {
        min-height: 20vh
    }

    .lg\:min-h-\[46px\] {
        min-height: 46px
    }

    .lg\:min-h-\[540px\] {
        min-height: 540px
    }

    .lg\:w-16 {
        width: 4rem
    }

    .lg\:w-\[124px\] {
        width: 124px
    }

    .lg\:w-\[280px\] {
        width: 280px
    }

    .lg\:w-\[370px\] {
        width: 370px
    }

    .lg\:w-\[408px\] {
        width: 408px
    }

    .lg\:w-\[410px\] {
        width: 410px
    }

    .lg\:w-\[420px\] {
        width: 420px
    }

    .lg\:w-\[440px\] {
        width: 440px
    }

    .lg\:w-\[500px\] {
        width: 500px
    }

    .lg\:w-\[526px\] {
        width: 526px
    }

    .lg\:w-\[70px\] {
        width: 70px
    }

    .lg\:w-\[calc\(var\(--chat-clip-dialog-expanded\)\*var\(--chat-width\)\)\] {
        width: calc(var(--chat-clip-dialog-expanded) * var(--chat-width))
    }

    .lg\:w-\[unset\] {
        width: unset
    }

    .lg\:w-\[var\(--chat-width\)\] {
        width: var(--chat-width)
    }

    .lg\:w-auto {
        width: auto
    }

    .lg\:w-fit {
        width: -moz-fit-content;
        width: fit-content
    }

    .lg\:w-full {
        width: 100%
    }

    .lg\:min-w-\[unset\] {
        min-width: unset
    }

    .lg\:max-w-\[370px\] {
        max-width: 370px
    }

    .lg\:max-w-\[500px\] {
        max-width: 500px
    }

    .lg\:max-w-\[70vw\] {
        max-width: 70vw
    }

    .lg\:max-w-\[768px\] {
        max-width: 768px
    }

    .lg\:max-w-\[calc\(\(100vw\/3\)\*2\)\] {
        max-width: calc((100vw / 3) * 2)
    }

    .lg\:max-w-lg {
        max-width: 32rem
    }

    .lg\:flex-1 {
        flex: 1 1 0%
    }

    .lg\:shrink-0 {
        flex-shrink: 0
    }

    .lg\:grow {
        flex-grow: 1
    }

    .lg\:grow-0 {
        flex-grow: 0
    }

    .lg\:translate-x-0 {
        --tw-translate-x: 0px
    }

    .lg\:translate-x-0,
    .lg\:translate-x-\[-50\%\] {
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
    }

    .lg\:translate-x-\[-50\%\] {
        --tw-translate-x: -50%
    }

    .lg\:translate-y-0 {
        --tw-translate-y: 0px
    }

    .lg\:translate-y-0,
    .lg\:translate-y-\[-50\%\] {
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
    }

    .lg\:translate-y-\[-50\%\] {
        --tw-translate-y: -50%
    }

    .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .lg\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }

    .lg\:grid-cols-\[repeat\(8\2c min-content\)\] {
        grid-template-columns: repeat(8, min-content)
    }

    .lg\:grid-cols-\[repeat\(auto-fill\2c minmax\(300px\2c 1fr\)\)\] {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))
    }

    .lg\:grid-cols-auto-fill-category {
        grid-template-columns: repeat(auto-fill, minmax(139px, 1fr))
    }

    .lg\:grid-rows-\[1fr\] {
        grid-template-rows: 1fr
    }

    .lg\:grid-rows-\[unset\] {
        grid-template-rows: unset
    }

    .lg\:flex-row {
        flex-direction: row
    }

    .lg\:flex-col {
        flex-direction: column
    }

    .lg\:flex-nowrap {
        flex-wrap: nowrap
    }

    .lg\:items-start {
        align-items: flex-start
    }

    .lg\:items-center {
        align-items: center
    }

    .lg\:justify-start {
        justify-content: flex-start
    }

    .lg\:justify-between {
        justify-content: space-between
    }

    .lg\:gap-0 {
        gap: 0
    }

    .lg\:gap-1 {
        gap: .25rem
    }

    .lg\:gap-12 {
        gap: 3rem
    }

    .lg\:gap-2 {
        gap: .5rem
    }

    .lg\:gap-2\.5 {
        gap: .625rem
    }

    .lg\:gap-20 {
        gap: 5rem
    }

    .lg\:gap-3 {
        gap: .75rem
    }

    .lg\:gap-4 {
        gap: 1rem
    }

    .lg\:gap-8 {
        gap: 2rem
    }

    .lg\:\!gap-y-0 {
        row-gap: 0 !important
    }

    .lg\:gap-x-4 {
        -moz-column-gap: 1rem;
        column-gap: 1rem
    }

    .lg\:gap-x-\[unset\] {
        -moz-column-gap: unset;
        column-gap: unset
    }

    .lg\:gap-y-0 {
        row-gap: 0
    }

    .lg\:gap-y-2 {
        row-gap: .5rem
    }

    .lg\:gap-y-2\.5 {
        row-gap: .625rem
    }

    .lg\:gap-y-4 {
        row-gap: 1rem
    }

    .lg\:gap-y-5 {
        row-gap: 1.25rem
    }

    .lg\:gap-y-6 {
        row-gap: 1.5rem
    }

    .lg\:gap-y-7 {
        row-gap: 1.75rem
    }

    .lg\:overflow-hidden {
        overflow: hidden
    }

    .lg\:overflow-y-auto {
        overflow-y: auto
    }

    .lg\:overflow-x-hidden {
        overflow-x: hidden
    }

    .lg\:truncate {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .lg\:rounded {
        border-radius: .25rem
    }

    .lg\:rounded-lg {
        border-radius: .25rem
    }

    .lg\:border-4 {
        border-width: 4px
    }

    .lg\:bg-\[\#090A0B\] {
        --tw-bg-opacity: 1;
        background-color: rgb(9 10 11/var(--tw-bg-opacity))
    }

    .lg\:bg-shade-base {
        --tw-bg-opacity: 1;
        background-color: rgba(23, 28, 30, var(--tw-bg-opacity))
    }

    .lg\:bg-shade-lower {
        --tw-bg-opacity: 1;
        background-color: rgba(35, 38, 40, var(--tw-bg-opacity))
    }

    .lg\:p-0 {
        padding: 0
    }

    .lg\:p-1 {
        padding: .25rem
    }

    .lg\:p-2 {
        padding: .5rem
    }

    .lg\:p-2\.5 {
        padding: .625rem
    }

    .lg\:p-3 {
        padding: .75rem
    }

    .lg\:p-4 {
        padding: 1rem
    }

    .lg\:p-5 {
        padding: 1.25rem
    }

    .lg\:p-6 {
        padding: 1.5rem
    }

    .lg\:p-8 {
        padding: 2rem
    }

    .lg\:\!px-5 {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important
    }

    .lg\:px-0 {
        padding-left: 0;
        padding-right: 0
    }

    .lg\:px-1 {
        padding-left: .25rem;
        padding-right: .25rem
    }

    .lg\:px-1\.5 {
        padding-left: .375rem;
        padding-right: .375rem
    }

    .lg\:px-2 {
        padding-left: .5rem;
        padding-right: .5rem
    }

    .lg\:px-2\.5 {
        padding-left: .625rem;
        padding-right: .625rem
    }

    .lg\:px-3 {
        padding-left: .75rem;
        padding-right: .75rem
    }

    .lg\:px-4 {
        padding-left: 1rem;
        padding-right: 1rem
    }

    .lg\:px-5 {
        padding-left: 1.25rem;
        padding-right: 1.25rem
    }

    .lg\:px-7 {
        padding-left: 1.75rem;
        padding-right: 1.75rem
    }

    .lg\:px-8 {
        padding-left: 2rem;
        padding-right: 2rem
    }

    .lg\:py-2 {
        padding-top: .5rem;
        padding-bottom: .5rem
    }

    .lg\:py-4 {
        padding-top: 1rem;
        padding-bottom: 1rem
    }

    .lg\:py-5 {
        padding-top: 1.25rem;
        padding-bottom: 1.25rem
    }

    .lg\:pb-0 {
        padding-bottom: 0
    }

    .lg\:pb-1 {
        padding-bottom: .25rem
    }

    .lg\:pb-2 {
        padding-bottom: .5rem
    }

    .lg\:pb-2\.5 {
        padding-bottom: .625rem
    }

    .lg\:pb-3 {
        padding-bottom: .75rem
    }

    .lg\:pb-4 {
        padding-bottom: 1rem
    }

    .lg\:pb-5 {
        padding-bottom: 1.25rem
    }

    .lg\:pl-0 {
        padding-left: 0
    }

    .lg\:pl-2 {
        padding-left: .5rem
    }

    .lg\:pl-2\.5 {
        padding-left: .625rem
    }

    .lg\:pl-5 {
        padding-left: 1.25rem
    }

    .lg\:pr-0 {
        padding-right: 0
    }

    .lg\:pr-2 {
        padding-right: .5rem
    }

    .lg\:pr-3 {
        padding-right: .75rem
    }

    .lg\:pr-4 {
        padding-right: 1rem
    }

    .lg\:pt-0 {
        padding-top: 0
    }

    .lg\:pt-11 {
        padding-top: 2.75rem
    }

    .lg\:pt-2 {
        padding-top: .5rem
    }

    .lg\:pt-6 {
        padding-top: 1.5rem
    }

    .lg\:\!text-base {
        font-size: 1rem !important;
        line-height: 1.5rem !important
    }

    .lg\:text-2xl {
        font-size: 1.5rem;
        line-height: 2rem
    }

    .lg\:text-\[15px\] {
        font-size: 15px
    }

    .lg\:text-base {
        font-size: 1rem;
        line-height: 1.5rem
    }

    .lg\:text-lg {
        font-size: 1.125rem;
        line-height: 1.75rem
    }

    .lg\:text-sm {
        font-size: .875rem;
        line-height: 1.25rem
    }

    .lg\:text-xl {
        font-size: 1.25rem;
        line-height: 1.75rem
    }

    .lg\:text-xs {
        font-size: .75rem;
        line-height: 1rem
    }

    .lg\:font-semibold {
        font-weight: 600
    }

    .lg\:leading-normal {
        line-height: 1.5
    }

    .lg\:leading-tight {
        line-height: 1.25
    }

    .lg\:text-\[unset\] {
        color: unset
    }

    .lg\: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: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
    }

    .lg\:shadow-black {
        --tw-shadow-color: #000;
        --tw-shadow: var(--tw-shadow-colored)
    }

    .lg\:brightness-125 {
        --tw-brightness: brightness(1.25);
        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)
    }

    .lg\:backdrop-blur-3xl {
        --tw-backdrop-blur: blur(64px);
        -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
        backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
    }

    .lg\:h-xvh {
        height: 100vh
    }

    @supports (height:100dvh) {
        .lg\:h-xvh {
            height: 100dvh
        }
    }

    .lg\:last\:grow:last-child {
        flex-grow: 1
    }

    .lg\:data-\[state\=open\]\:bg-surface-tint[data-state=open] {
        --tw-bg-opacity: 1;
        background-color: rgba(49, 53, 56, var(--tw-bg-opacity))
    }

    .data-\[state\=open\]\:lg\:animate-in[data-state=open] {
        animation-name: enter;
        animation-duration: .15s;
        --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\]\:lg\:animate-out[data-state=closed] {
        animation-name: exit;
        animation-duration: .15s;
        --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\]\:lg\:slide-out-to-left-1\/2[data-state=closed] {
        --tw-exit-translate-x: -50%
    }

    .data-\[state\=closed\]\:lg\:slide-out-to-top-\[48\%\][data-state=closed] {
        --tw-exit-translate-y: -48%
    }

    .data-\[state\=open\]\:lg\:slide-in-from-left-1\/2[data-state=open] {
        --tw-enter-translate-x: -50%
    }

    .data-\[state\=open\]\:lg\:slide-in-from-top-\[48\%\][data-state=open] {
        --tw-enter-translate-y: -48%
    }

    .group\/main[data-chat=false] .group-data-\[chat\=false\]\/main\:lg\:right-4 {
        right: 1rem
    }

    .group\/main[data-chat=true] .group-data-\[chat\=true\]\/main\:lg\:right-\[calc\(var\(--chat-width\)\+1em\)\] {
        right: calc(var(--chat-width) + 1em)
    }

    .group\/main[data-chat=false] .group-data-\[chat\=false\]\/main\:lg\:w-0 {
        width: 0
    }

    .group\/main[data-chat=true] .group-data-\[chat\=true\]\/main\:lg\:w-\[var\(--chat-width\)\] {
        width: var(--chat-width)
    }

    .group\/main[data-chat=false] .group-data-\[chat\=false\]\/main\:lg\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }
}

@supports (height:100dvh) {
    @media (min-width:1024px) {
        .supports-\[height\:100dvh\]\:lg\:h-\[calc\(100dvh-var\(--navbar-height\)\+var\(--channel-desktop-banner-height\)-var\(--channel-info-height\)\)\] {
            height: calc(100dvh - var(--navbar-height) + var(--channel-desktop-banner-height) - var(--channel-info-height))
        }

        .supports-\[height\:100dvh\]\:lg\:max-h-\[80dvh\] {
            max-height: 80dvh
        }

        .supports-\[height\:100dvh\]\:lg\:max-h-\[90dvh\] {
            max-height: 90dvh
        }
    }
}

@media (min-width:1280px) {
    .xl\:relative {
        position: relative
    }

    .xl\:inset-0 {
        inset: 0
    }

    .xl\:\!hidden {
        display: none !important
    }

    .xl\:hidden {
        display: none
    }

    .xl\:max-h-full {
        max-height: 100%
    }

    .xl\:max-w-\[50vw\] {
        max-width: 50vw
    }

    .xl\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .xl\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }

    .xl\:grid-cols-\[repeat\(auto-fill\2c minmax\(350px\2c 1fr\)\)\] {
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr))
    }

    .xl\:flex-row {
        flex-direction: row
    }

    .xl\:gap-2 {
        gap: .5rem
    }

    .xl\:gap-4 {
        gap: 1rem
    }

    .xl\:px-10 {
        padding-left: 2.5rem;
        padding-right: 2.5rem
    }

    .xl\:px-2 {
        padding-left: .5rem;
        padding-right: .5rem
    }

    .xl\:px-5 {
        padding-left: 1.25rem;
        padding-right: 1.25rem
    }

    .xl\:text-base {
        font-size: 1rem;
        line-height: 1.5rem
    }

    .group\/main[data-chat=false][data-sidebar=false] .group-data-\[chat\=false\]\/main\:group-data-\[sidebar\=false\]\/main\:xl\:grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr))
    }

    .group\/main[data-chat=false] .group-data-\[chat\=false\]\/main\:xl\:grid-cols-4,
    .group\/main[data-sidebar=false] .group-data-\[sidebar\=false\]\/main\:xl\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }

    .group\/main[data-sidebar=false] .group-data-\[sidebar\=false\]\/main\:xl\:grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr))
    }
}

@media (min-width:1536px) {
    .\32xl\:line-clamp-3 {
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3
    }

    .\32xl\:h-\[400px\] {
        height: 400px
    }

    .\32xl\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }

    .\32xl\:grid-cols-5,
    .group\/main[data-chat=false] .group-data-\[chat\=false\]\/main\:2xl\:grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr))
    }

    .group\/main[data-chat=false][data-sidebar=false] .group-data-\[chat\=false\]\/main\:group-data-\[sidebar\=false\]\/main\:2xl\:grid-cols-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr))
    }

    .group\/main[data-sidebar=false] .group-data-\[sidebar\=false\]\/main\:2xl\:grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr))
    }

    .group\/main[data-sidebar=false] .group-data-\[sidebar\=false\]\/main\:2xl\:grid-cols-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr))
    }
}

@media (max-width:639px) {
    .group\/grid[data-layout=adaptive] .group-data-\[layout\=adaptive\]\/grid\:below-sm\:h-20 {
        height: 5rem
    }

    .group\/grid[data-layout=adaptive] .group-data-\[layout\=adaptive\]\/grid\:below-sm\:h-full {
        height: 100%
    }

    .group\/grid[data-layout=adaptive] .group-data-\[layout\=adaptive\]\/grid\:below-sm\:max-h-full {
        max-height: 100%
    }

    .group\/grid[data-layout=adaptive] .group-data-\[layout\=adaptive\]\/grid\:below-sm\:w-auto {
        width: auto
    }

    .group\/grid[data-layout=adaptive] .group-data-\[layout\=adaptive\]\/grid\:below-sm\:flex-row {
        flex-direction: row
    }

    .group\/grid[data-layout=adaptive] .group-data-\[layout\=adaptive\]\/grid\:below-sm\:items-center {
        align-items: center
    }

    .group\/grid[data-layout=adaptive] .group-data-\[layout\=adaptive\]\/grid\:below-sm\:gap-2 {
        gap: .5rem
    }

    .group\/grid[data-layout=adaptive] .group-data-\[layout\=adaptive\]\/grid\:below-sm\:p-0 {
        padding: 0
    }
}

@media (hover:hover) {
    .betterhover\:hover\:cursor-move:hover {
        cursor: move
    }

    .betterhover\:hover\:border-\[\#53FC1866\]:hover {
        border-color: #53fc1866
    }

    .betterhover\:hover\:border-\[\#53FC18AA\]:hover {
        border-color: #53fc18aa
    }

    .betterhover\:hover\:border-grey-300:hover {
        --tw-border-opacity: 1;
        border-color: rgba(170, 176, 182, var(--tw-border-opacity))
    }

    .betterhover\:hover\:border-grey-400:hover {
        --tw-border-opacity: 1;
        border-color: rgba(127, 136, 145, var(--tw-border-opacity))
    }

    .betterhover\:hover\:border-grey-600:hover {
        --tw-border-opacity: 1;
        border-color: rgba(85, 92, 101, var(--tw-border-opacity))
    }

    .betterhover\:hover\:border-transparent:hover {
        border-color: transparent
    }

    .betterhover\:hover\:border-white:hover {
        --tw-border-opacity: 1;
        border-color: rgb(255 255 255/var(--tw-border-opacity))
    }

    .betterhover\:hover\:border-white\/5:hover {
        border-color: hsla(0, 0%, 100%, .05)
    }

    .betterhover\:hover\:border-b-grey-400:hover {
        --tw-border-opacity: 1;
        border-bottom-color: rgba(127, 136, 145, var(--tw-border-opacity))
    }

    .betterhover\:hover\:\!bg-\[\#2A2D32\]:hover {
        --tw-bg-opacity: 1 !important;
        background-color: rgb(42 45 50/var(--tw-bg-opacity)) !important
    }

    .betterhover\:hover\:\!bg-surface-higher:hover {
        --tw-bg-opacity: 1 !important;
        background-color: rgba(65, 68, 73, var(--tw-bg-opacity)) !important
    }

    .betterhover\:hover\:\!bg-transparent:hover {
        background-color: transparent !important
    }

    .betterhover\:hover\:bg-\[\#24272C\]:hover {
        --tw-bg-opacity: 1;
        background-color: rgb(36 39 44/var(--tw-bg-opacity))
    }

    .betterhover\:hover\:bg-\[\#3F4448\]:hover {
        --tw-bg-opacity: 1;
        background-color: rgb(63 68 72/var(--tw-bg-opacity))
    }

    .betterhover\:hover\:bg-\[\#474f54\]:hover {
        --tw-bg-opacity: 1;
        background-color: rgb(71 79 84/var(--tw-bg-opacity))
    }

    .betterhover\:hover\:bg-green-500\/80:hover {
        background-color: rgba(83, 252, 24, .8)
    }

    .betterhover\:hover\:bg-green-600:hover {
        --tw-bg-opacity: 1;
        background-color: rgba(66, 202, 19, var(--tw-bg-opacity))
    }

    .betterhover\:hover\:bg-grey-600:hover {
        --tw-bg-opacity: 1;
        background-color: rgba(85, 92, 101, var(--tw-bg-opacity))
    }

    .betterhover\:hover\:bg-grey-700:hover {
        --tw-bg-opacity: 1;
        background-color: rgba(73, 77, 85, var(--tw-bg-opacity))
    }

    .betterhover\:hover\:bg-grey-700\/50:hover {
        background-color: rgba(73, 77, 85, .5)
    }

    .betterhover\:hover\:bg-grey-700\/80:hover {
        background-color: rgba(73, 77, 85, .8)
    }

    .betterhover\:hover\:bg-red-600:hover {
        --tw-bg-opacity: 1;
        background-color: rgba(186, 14, 48, var(--tw-bg-opacity))
    }

    .betterhover\:hover\:bg-red-700\/80:hover {
        background-color: rgba(127, 18, 7, .8)
    }

    .betterhover\:hover\:bg-secondary\/20:hover {
        background-color: hsla(210, 8%, 69%, .2)
    }

    .betterhover\:hover\:bg-secondary\/40:hover {
        background-color: hsla(210, 8%, 69%, .4)
    }

    .betterhover\:hover\:bg-shade-lower:hover {
        --tw-bg-opacity: 1;
        background-color: rgba(35, 38, 40, var(--tw-bg-opacity))
    }

    .betterhover\:hover\:bg-surface-higher:hover {
        --tw-bg-opacity: 1;
        background-color: rgba(65, 68, 73, var(--tw-bg-opacity))
    }

    .betterhover\:hover\:bg-surface-tint:hover {
        --tw-bg-opacity: 1;
        background-color: rgba(49, 53, 56, var(--tw-bg-opacity))
    }

    .betterhover\:hover\:bg-transparent:hover {
        background-color: transparent
    }

    .betterhover\:hover\:bg-white:hover {
        --tw-bg-opacity: 1;
        background-color: rgb(255 255 255/var(--tw-bg-opacity))
    }

    .betterhover\:hover\:bg-white\/10:hover {
        background-color: hsla(0, 0%, 100%, .1)
    }

    .betterhover\:hover\:bg-white\/5:hover {
        background-color: hsla(0, 0%, 100%, .05)
    }

    .betterhover\:hover\:text-grey-950:hover {
        --tw-text-opacity: 1;
        color: rgba(20, 21, 23, var(--tw-text-opacity))
    }

    .betterhover\:hover\:text-primary:hover {
        --tw-text-opacity: 1;
        color: rgba(83, 252, 24, var(--tw-text-opacity))
    }

    .betterhover\:hover\:text-white:hover {
        --tw-text-opacity: 1;
        color: rgb(255 255 255/var(--tw-text-opacity))
    }

    .betterhover\:hover\:text-white\/100:hover {
        color: #fff
    }

    .betterhover\:hover\:underline:hover {
        text-decoration-line: underline
    }

    .betterhover\:hover\:underline-offset-4:hover {
        text-underline-offset: 4px
    }

    .betterhover\:hover\:outline-white:hover {
        outline-color: #fff
    }

    .betterhover\:hover\:ring-\[\#53FC1866\]:hover {
        --tw-ring-color: #53fc1866
    }

    .betterhover\:hover\:brightness-125:hover {
        --tw-brightness: brightness(1.25);
        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)
    }

    .betterhover\:hover\:focus\:bg-transparent:focus:hover {
        background-color: transparent
    }

    .betterhover\:active\:scale-\[0\.98\]:active {
        --tw-scale-x: 0.98;
        --tw-scale-y: 0.98;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
    }

    .disabled\:betterhover\:hover\:bg-white\/10:hover:disabled {
        background-color: hsla(0, 0%, 100%, .1)
    }

    .group:hover .betterhover\:group-hover\:flex,
    .group\/volume:hover .betterhover\:group-hover\/volume\:flex {
        display: flex
    }

    .group:hover .betterhover\:group-hover\:hidden {
        display: none
    }

    .group:hover .betterhover\:group-hover\:scale-110 {
        --tw-scale-x: 1.1;
        --tw-scale-y: 1.1;
        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
    }

    .group\/arrow:hover .betterhover\:group-hover\/arrow\:bg-\[\#24272C\] {
        --tw-bg-opacity: 1;
        background-color: rgb(36 39 44/var(--tw-bg-opacity))
    }

    .group:hover .betterhover\:group-hover\:bg-\[\#3AD305\] {
        --tw-bg-opacity: 1;
        background-color: rgb(58 211 5/var(--tw-bg-opacity))
    }

    .group:hover .betterhover\:group-hover\:bg-\[\#475054\] {
        --tw-bg-opacity: 1;
        background-color: rgb(71 80 84/var(--tw-bg-opacity))
    }

    .group:hover .betterhover\:group-hover\:bg-shade-lower {
        --tw-bg-opacity: 1;
        background-color: rgba(35, 38, 40, var(--tw-bg-opacity))
    }

    .group:hover .betterhover\:group-hover\:text-white,
    .group\/creator:hover .betterhover\:group-hover\/creator\:text-white {
        --tw-text-opacity: 1;
        color: rgb(255 255 255/var(--tw-text-opacity))
    }

    .group\/username:hover .betterhover\:group-hover\/username\:underline {
        text-decoration-line: underline
    }

    .group\/username:hover .betterhover\:group-hover\/username\:underline-offset-4 {
        text-underline-offset: 4px
    }

    .group\/card:hover .betterhover\:group-hover\/card\:opacity-100,
    .group\/player:hover .betterhover\:group-hover\/player\:opacity-100 {
        opacity: 1
    }

    @media (min-width:640px) {
        .group\/card:hover .betterhover\:sm\:group-hover\/card\:opacity-100 {
            opacity: 1
        }
    }

    @media (min-width:1024px) {
        .betterhover\:lg\:hover\:text-white:hover {
            --tw-text-opacity: 1;
            color: rgb(255 255 255/var(--tw-text-opacity))
        }

        .group:hover .betterhover\:lg\:group-hover\:z-\[2\] {
            z-index: 2
        }
    }
}

@media (min-width:1024px) {
    @media (hover:hover) {
        .group\/seekbar:hover .lg\:betterhover\:group-hover\/seekbar\:block {
            display: block
        }

        .group\/seekbar:hover .lg\:betterhover\:group-hover\/seekbar\:h-2 {
            height: .5rem
        }
    }
}

@media (hover:hover) {
    @media (min-width:1024px) {
        .group:hover .betterhover\:lg\:group-hover\:scale-110 {
            --tw-scale-x: 1.1;
            --tw-scale-y: 1.1;
            transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
        }
    }
}

@media (min-width:1920px) {
    .\33xl\:aspect-auto {
        aspect-ratio: auto
    }

    .\33xl\:w-\[900px\] {
        width: 900px
    }

    .\33xl\:grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr))
    }

    .\33xl\:grid-cols-6,
    .group\/main[data-chat=false] .group-data-\[chat\=false\]\/main\:3xl\:grid-cols-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr))
    }

    .group\/main[data-chat=false][data-sidebar=false] .group-data-\[chat\=false\]\/main\:group-data-\[sidebar\=false\]\/main\:3xl\:grid-cols-7 {
        grid-template-columns: repeat(7, minmax(0, 1fr))
    }

    .group\/main[data-sidebar=false] .group-data-\[sidebar\=false\]\/main\:3xl\:grid-cols-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr))
    }

    .group\/main[data-sidebar=false] .group-data-\[sidebar\=false\]\/main\:3xl\:grid-cols-7 {
        grid-template-columns: repeat(7, minmax(0, 1fr))
    }
}

.\[\&\:\:-ms-clear\]\:hidden::-ms-clear,
.\[\&\:\:-ms-reveal\]\:hidden::-ms-reveal {
    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-search-cancel-button\]\:appearance-none::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none
}

.\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]) {
    padding-right: 0
}

.\[\&\>\*\:first-child\]\:data-\[state\=on\]\:fill-grey-900[data-state=on]>:first-child {
    fill: #393b40
}

.\[\&\>\*\]\:drop-shadow-\[0_1px_7px_rgba\(0\2c 0\2c 0\2c 1\)\]>* {
    --tw-drop-shadow: drop-shadow(0 1px 7px #000);
    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)
}

.\[\&\>a\:hover\]\:text-primary>a:hover {
    --tw-text-opacity: 1;
    color: rgba(83, 252, 24, var(--tw-text-opacity))
}

.\[\&\>button\:not\(\:first-child\)\]\:rounded-l-none>button:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0
}

.\[\&\>button\:not\(\:last-child\)\]\:rounded-r-none>button:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

.\[\&\>button\]\:flex-1>button {
    flex: 1 1 0%
}

@media (min-width:1280px) {
    .group\/main[data-sidebar=false] .group-data-\[sidebar\=false\]\/main\:xl\:\[\&\>div\:nth-child\(n\+9\)\:nth-child\(-n\+10\)\]\:flex>div:nth-child(n+9):nth-child(-n+10) {
        display: flex
    }
}

@media (min-width:1536px) {

    .\32xl\:\[\&\>div\:nth-child\(n\+9\)\:nth-child\(-n\+10\)\]\:flex>div:nth-child(n+9):nth-child(-n+10),
    .group\/main[data-sidebar=false] .group-data-\[sidebar\=false\]\/main\:2xl\:\[\&\>div\:nth-child\(n\+9\)\:nth-child\(-n\+12\)\]\:flex>div:nth-child(n+9):nth-child(-n+12) {
        display: flex
    }
}

@media (min-width:1920px) {
    .\33xl\:\[\&\>div\:nth-child\(n\+9\)\:nth-child\(-n\+12\)\]\:flex>div:nth-child(n+9):nth-child(-n+12) {
        display: flex
    }
}

@media (min-width:1024px) {
    .lg\:\[\&\>div\:nth-last-child\(-n\+6\)\]\:hidden>div:nth-last-child(-n+6) {
        display: none
    }
}

.\[\&\>div\]\:w-\[108px\]>div {
    width: 108px
}

.\[\&\>div\]\:w-\[268px\]>div {
    width: 268px
}

.\[\&\>div\]\:snap-start>div {
    scroll-snap-align: start
}

@media (min-width:1024px) {
    .\[\&\>div\]\:lg\:w-full>div {
        width: 100%
    }

    .\[\&\>div\]\:lg\:snap-align-none>div {
        scroll-snap-align: none
    }
}

@media (min-width:1920px) {
    .group\/main[data-sidebar=false] .group-data-\[sidebar\=false\]\/main\:3xl\:\[\&\>div\]\:flex>div {
        display: flex
    }
}

.\[\&\>svg\]\:\!size-4>svg {
    width: 1rem !important;
    height: 1rem !important
}

.\[\&\>svg\]\:\!fill-neutral>svg {
    fill: #a8b1b8 !important
}

.\[\&\>tr\]\:last\:border-b-0:last-child>tr {
    border-bottom-width: 0
}

.last-of-type\:\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state=open]>svg:last-of-type {
    --tw-rotate: 180deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.\[\&_button\:first-of-type\]\:rounded-l-full button:first-of-type {
    border-top-left-radius: 9999px;
    border-bottom-left-radius: 9999px
}

.\[\&_button\:last-of-type\]\:rounded-r-full button:last-of-type {
    border-top-right-radius: 9999px;
    border-bottom-right-radius: 9999px
}

.\[\&_button\]\:rounded-none button {
    border-radius: 0
}

.\[\&_img\]\:size-7 img {
    width: 1.75rem;
    height: 1.75rem
}

.\[\&_img\]\:rounded-full img {
    border-radius: 9999px
}

@media (min-width:1024px) {
    .\[\&_img\]\:lg\:size-6 img {
        width: 1.5rem;
        height: 1.5rem
    }
}

.\[\&_input\]\:pl-8 input {
    padding-left: 2rem
}

.\[\&_input\]\:pr-8 input {
    padding-right: 2rem
}

.\[\&_svg\]\:\!size-14 svg {
    width: 3.5rem !important;
    height: 3.5rem !important
}

.\[\&_svg\]\:\!size-8 svg {
    width: 2rem !important;
    height: 2rem !important
}

.\[\&_svg\]\:size-7 svg {
    width: 1.75rem;
    height: 1.75rem
}

.\[\&_svg\]\:size-\[1em\] svg {
    width: 1em;
    height: 1em
}

.\[\&_svg\]\:size-\[1\.5em\] svg {
    width: 1.5em;
    height: 1.5em;
}

.\[\&_svg\]\:rounded-full svg {
    border-radius: 9999px
}

.\[\&_svg\]\:fill-current svg {
    fill: currentColor
}

.\[\&_svg\]\:data-\[state\=active\]\:fill-green-500[data-state=active] svg {
    fill: #53fc18
}

@media (min-width:1024px) {
    .\[\&_svg\]\:lg\:size-6 svg {
        width: 1.5rem;
        height: 1.5rem
    }
}

.\[\&_tr\:last-child\]\:border-0 tr:last-child {
    border-width: 0
}

.\[\&_tr\]\:border-b tr {
    border-bottom-width: 1px
}

.mokick_deleted-message {

    text-decoration: line-through;
    color: #ffffff70;

    .chat-emote-container {
        opacity: 0.5
    }

}

.mokick_deleted-message:hover {

    text-decoration: underline;
    color: #ffffff70;

}

.mokick_deleted-message {

    .font-normal,
    .seventv-text-token {
        text-decoration: line-through;
        color: rgb(168, 177, 184);
    }

    [data-emote-id],
    .seventv-emote-token {
        opacity: 0.5
    }

}

.mokick_deleted-message:hover {

    .font-normal,
    .seventv-text-token {
        text-decoration: underline;
        color: rgb(168, 177, 184);
    }

}

.mokick-event-box {
    margin-left: .625rem;
    margin-right: .625rem;
    display: flex;
    flex-direction: row;
    gap: .25rem;
    border-radius: 4px;
    --tw-bg-opacity: 1;
    background-color: rgb(35 38 40 / var(--tw-bg-opacity));
    padding: .5rem;
}

.mokick-event-box .mokick-event-label {
    flex-shrink: 1;
    flex-grow: 1;
    font-size: .75rem;
    line-height: 1rem;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(211 216 219 / var(--tw-text-opacity));

}

.moderator-action {

    color: #FF9D00;

}

.moderator-action-positive {

    color: #53FC18
}

.mokick_chatMenu {
    top: 0;
    width: -webkit-fill-available;
    z-index: 21;
    height: auto;
}

.\!w-auto {
    width: auto !important;
}

.mokick_giveawayBox {

    position: absolute;
    height: -webkit-fill-available;
    z-index: 100;
    width: -webkit-fill-available;
    background-color: rgb(15 18 20);

}

.channel.moKick_chatSize_1 .chat-container.open,
#main-view.moKick_chatSize_1 .chat-container.open,
#theaterModeChatHolder.moKick_chatSize_1 .chat-container.open {
    margin-right: 0px !important;
}

.channel.moKick_chatSize_1 .chat-container,
#main-view.moKick_chatSize_1 .chat-container,
#theaterModeChatHolder.moKick_chatSize_1 .chat-container {
    width: 400px;
    margin-right: -400px !important;
    flex-basis: unset !important;
}

.channel.moKick_chatSize_1 .pinned-message[data-extended=false][data-v-be5e9d85],
#main-view.moKick_chatSize_1 .pinned-message[data-extended=false][data-v-be5e9d85] {
    transform: translate(382px);
}

.channel.moKick_chatSize_2 .pinned-message[data-extended=false][data-v-be5e9d85],
#main-view.moKick_chatSize_2 .pinned-message[data-extended=false][data-v-be5e9d85] {
    transform: translate(482px);
}

.channel.moKick_chatSize_3 .pinned-message[data-extended=false][data-v-be5e9d85],
#main-view.moKick_chatSize_3 .pinned-message[data-extended=false][data-v-be5e9d85] {
    transform: translate(632px);
}

.channel.moKick_chatSize_2 .chat-container.open,
#main-view.moKick_chatSize_2 .chat-container.open,
#theaterModeChatHolder.moKick_chatSize_2 .chat-container.open {
    margin-right: 0px !important;
}

.channel.moKick_chatSize_2 .chat-container,
#main-view.moKick_chatSize_2 .chat-container,
#theaterModeChatHolder.moKick_chatSize_2 .chat-container {
    width: 500px;
    margin-right: -500px !important;
    flex-basis: unset !important;
}

.channel.moKick_chatSize_3 .chat-container.open,
#main-view.moKick_chatSize_3 .chat-container.open,
#theaterModeChatHolder.moKick_chatSize_3 .chat-container.open {
    margin-right: 0px !important;
}

.channel.moKick_chatSize_3 .chat-container,
#main-view.moKick_chatSize_3 .chat-container,
#theaterModeChatHolder.moKick_chatSize_3 .chat-container {
    width: 650px;
    margin-right: -650px !important;
    flex-basis: unset !important;
}

.channel.moKick_chatSize_1 .w-\[340px\],
#main-view.moKick_chatSize_1 .w-\[340px\] {

    width: 400px !important;

}

.channel.moKick_chatSize_2 .w-\[340px\],
#main-view.moKick_chatSize_2 .w-\[340px\] {

    width: 500px !important;

}

.channel.moKick_chatSize_3 .w-\[340px\],
#main-view.moKick_chatSize_3 .w-\[340px\] {

    width: 650px !important;

}

.pinned-message[data-extended="false"][data-v-be5e9d85] {
    &[data-v-be5e9d85]:hover {
        transform: translate(0) !important;
    }
}

#main-view.moKick_chatSize_1 #chatroom-replay .overflow-y-scroll,
#main-view.moKick_chatSize_2 #chatroom-replay .overflow-y-scroll,
#main-view.moKick_chatSize_3 #chatroom-replay .overflow-y-scroll {
    overflow-x: hidden;
}

#theaterModeChatHolder.moKick_chatSize_1 #chatroom-replay .overflow-y-scroll,
#theaterModeChatHolder.moKick_chatSize_2 #chatroom-replay .overflow-y-scroll,
#theaterModeChatHolder.moKick_chatSize_3 #chatroom-replay .overflow-y-scroll {
    overflow-x: hidden;
}

#theaterModeChatHolder.w-\[340px\].moKick_chatSize_1,
#theaterModeChatHolder.moKick_chatSize_1 .w-\[340px\] {

    width: 400px !important;

}

#theaterModeChatHolder.w-\[340px\].moKick_chatSize_2,
#theaterModeChatHolder.moKick_chatSize_2 .w-\[340px\] {

    width: 500px !important;

}

#theaterModeChatHolder.w-\[340px\].moKick_chatSize_3,
#theaterModeChatHolder.moKick_chatSize_3 .w-\[340px\] {

    width: 650px !important;

}

.user-profile .content .profile .information .details-container[data-v-1411a749],
.user-profile-pinned .content .profile .information .details-container[data-v-1411a749] {
    flex-wrap: wrap !important;
}

input.moKick-slider[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: none;
}

/* WebKit */
input.moKick-slider[type="range"]::-webkit-slider-runnable-track {
    background-color: #2c2c2c;
    border: 1px solid #4FF317;
    border-radius: 5px;
    height: 10px;
    position: relative;
}

input.moKick-slider[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    background-color: #4FF317;
    border: 1px solid #4FF317;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    margin-top: -6px;
    cursor: pointer;
}

input.moKick-slider[type="range"]::-webkit-slider-runnable-track::before {
    content: '';
    position: absolute;
    background-color: #4FF317;
    border-radius: 5px;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}

/* Firefox */
input.moKick-slider[type="range"]::-moz-range-track {
    background-color: #2c2c2c;
    border: 1px solid #4FF317;
    border-radius: 5px;
    height: 10px;
    position: relative;
}

input.moKick-slider[type="range"]::-moz-range-thumb {
    background-color: #4FF317;
    border: 1px solid #4FF317;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    cursor: pointer;
}

/* IE Browsers */
input.moKick-slider[type="range"]::-ms-track {
    background-color: transparent;
    border-color: transparent;
    color: transparent;
    width: 100%;
    height: 10px;
    position: relative;
}

input.moKick-slider[type="range"]::-ms-fill-lower {
    background-color: #4FF317;
    border: 1px solid #4FF317;
    border-radius: 5px;
}

input.moKick-slider[type="range"]::-ms-thumb {
    background-color: #4FF317;
    border: 1px solid #4FF317;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    cursor: pointer;
}

input.moKick-slider[type="range"]:focus {
    outline: none;
}

.moKick-color {
    position: relative;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    border: none;
    padding: 0;
    overflow: hidden;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: box-shadow 0.3s ease;
}

.moKick-color::-webkit-color-swatch {
    border: none;
    border-radius: 50%;
}

.moKick-color::-webkit-color-swatch-wrapper {
    padding: 0;
    border-radius: 50%;
}

.moKick-color::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.5);
    transition: box-shadow 0.3s ease;
}

.moKick-color:hover::before {
    box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.5);
}

.user-profile .content .messages,
.user-profile-pinned .content .messages {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    gap: .25rem;
}

.user-profile .content .messages .label,
.user-profile .content .notes .label {
    white-space: nowrap;
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 600;
}

.user-profile .content .messages .label,
.user-profile-pinned .content .messages .label {
    white-space: nowrap;
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 600;
}

.user-profile .content .messages .label,
.user-profile-pinned .content .notes .label {
    white-space: nowrap;
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 600;
}

.moKick_revealedMessage {
    background-color: #ffffff1a;
}

.moKick_modChatOverflowFix {
    overflow-x: hidden;

    .pinned-message[data-extended=false] {

        transform: translate(90%) !important;

    }

}

#chatroom-messages .suspicious-content {
    font-weight: 200;
    color: #f16a6a;
}

.z-modal#user-identity.moKick-expanded,
.z-modal#user-identity_pinned.moKick-expanded {
    width: 510px !important;
}

.prevent-select {
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.user-profile-pinned[data-v-1411a749] {
    z-index: 50
}

.user-profile-pinned.power-user .profile[data-v-1411a749] {
    border-radius: 3px;
    --tw-bg-opacity: 1;
    background-color: rgb(36 39 44 / var(--tw-bg-opacity));
    padding: 1rem
}

.user-profile-pinned:not(.power-user) .header[data-v-1411a749] {
    position: absolute;
    right: 0px;
    top: 0px;
    padding-top: 1.75rem;
    padding-right: 1.25rem
}

.user-profile-pinned .header[data-v-1411a749] {
    margin-top: -.5rem
}

.user-profile-pinned .header .close[data-v-1411a749] {
    margin-left: auto
}

.user-profile-pinned .content[data-v-1411a749] {
    display: flex;
    flex-direction: column;
    gap: .5rem
}

.user-profile-pinned .content .profile[data-v-1411a749] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    -moz-column-gap: .5rem;
    column-gap: .5rem;
    row-gap: 1rem
}

.user-profile-pinned .content .profile .avatar[data-v-1411a749],
.user-profile-pinned .content .profile .username[data-v-1411a749] {
    cursor: pointer
}

.user-profile-pinned .content .profile .avatar[data-v-1411a749] {
    flex: 0 1 auto
}

.user-profile-pinned .content .profile .information[data-v-1411a749] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: .25rem;
    align-self: center
}

.user-profile-pinned .content .profile .information .username[data-v-1411a749] {
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 700
}

.user-profile-pinned .content .profile .information .details-container[data-v-1411a749] {
    display: flex;
    flex-direction: row;
    gap: .75rem
}

.user-profile-pinned .content .profile .information .details-container .details[data-v-1411a749] {
    display: flex;
    flex-direction: column
}

.user-profile-pinned .content .profile .information .details-container .details .label[data-v-1411a749] {
    white-space: nowrap;
    font-size: 10px;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(184 184 184 / var(--tw-text-opacity))
}

.user-profile-pinned .content .profile .information .details-container .details .value[data-v-1411a749] {
    white-space: nowrap;
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 600
}

.user-profile-pinned .content .profile .badges[data-v-1411a749] {
    display: flex;
    width: 100%;
    flex: 1 1 auto;
    flex-direction: row;
    gap: .5rem;
    align-self: center
}

.user-profile-pinned .content .profile .badges .label[data-v-1411a749] {
    white-space: nowrap;
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 600
}

.user-profile-pinned .content .profile .badges .badges-container[data-v-1411a749] {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: .625rem
}

.user-profile-pinned .content .moderation[data-v-1411a749] {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    border-radius: 3px;
    --tw-bg-opacity: 1;
    background-color: rgb(36 39 44 / var(--tw-bg-opacity));
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 1rem
}

.moKick-vod-continue {
    background-color: #53FC18;
    color: #000;
}

.vjs-elapsed-time {
    display: flex !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    user-select: none !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: .875rem !important;
    line-height: 1.25rem !important;
    --tw-text-opacity: 1 !important;
    color: rgb(255 255 255 / 1) !important;
}

.active\:bg-primary:active {
    --tw-bg-opacity: 1;
    background-color: rgba(83, 252, 24, var(--tw-bg-opacity))
}

.moKick-colorPicker-hover {
    border-width: 0px;
    border-color: rgba(0, 0, 0, 0.5);
    border-style: solid;
}

.moKick-colorPicker-hover:hover {
    border-width: 3px;
    border-color: rgba(0, 0, 0, 0.5);
    border-style: solid;
}

.moKick-navBarLightEffect {
    position: fixed;
    top: 0;
    left: 0;
    width: calc(100% - var(--chat-width));
    height: var(--navbar-height);
    background-color: transparent;
    box-shadow: inset 13px 13px 13px 0px #55fc1880;
    transition: 0.3s ease-in-out;
    mask-image: linear-gradient(to top left, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 100%);
    -webkit-mask-image: linear-gradient(to top left, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 100%);
    pointer-events: none;
    opacity: 0;
    z-index: 1000;
}

.moKick-navBarLightEffect.active {
    opacity: 1;
}

.moKick-glowButton {
    position: relative;
}

.moKick-glowButton::after {
    content: "";
    z-index: -1;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(23, 28, 30, 1);
    left: 0;
    top: 0;
    border-radius: 10px;
}

.moKick-glowButton::before {
    content: "";
    background: linear-gradient(45deg, #53fc18, #2e860f, #439626, #195006, #53fc18, #439626, #2e860f, #53fc18);
    position: absolute;
    top: -2px;
    left: -2px;
    background-size: 600%;
    z-index: -1;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    filter: blur(8px);
    animation: moKick_glowButton 80s linear infinite;
    transition: opacity .3s ease-in-out;
    border-radius: 10px;
    opacity: 0.3;
}

.moKick-glowButton:hover::before {
    opacity: 1;
    animation: moKick_glowButton 20s linear infinite;
}

.moKick-alwaysGlowButton {
    position: relative;
}

.moKick-alwaysGlowButton::after {
    content: "";
    z-index: -1;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(23, 28, 30, 1);
    left: 0;
    top: 0;
    border-radius: 10px;
}

.moKick-alwaysGlowButton::before {
    content: "";
    background: linear-gradient(45deg, #53fc18, #2e860f, #439626, #195006, #53fc18, #439626, #2e860f, #53fc18);
    position: absolute;
    top: -2px;
    left: -2px;
    background-size: 600%;
    z-index: -1;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    filter: blur(8px);
    transition: opacity .3s ease-in-out;
    border-radius: 10px;
    opacity: 1;
    animation: moKick_glowButton 20s linear infinite;
}

.moKick_tooltip .buddyGlow {
    position: relative;
}

.moKick_tooltip.buddyGlow svg {
    fill: #061800 !important;
}

.moKick_tooltip .buddyGlow::after {
    content: "";
    z-index: -1;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #061800;
    left: 0;
    top: 0;
    border-radius: .375rem;
}

.moKick_tooltip .buddyGlow::before {
    content: "";
    background: linear-gradient(45deg, #53fc18, #2e860f, #439626, #195006, #53fc18, #439626, #2e860f, #53fc18);
    position: absolute;
    top: -2px;
    left: -2px;
    background-size: 600%;
    z-index: -1;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    filter: blur(8px);
    transition: opacity .3s ease-in-out;
    opacity: 1;
    animation: moKick_glowButton 20s linear infinite;
    border-radius: .375rem;
}

.border-green-800 {
    --tw-text-opacity: 1;
    border-color: rgba(33, 101, 10, var(--tw-text-opacity))
}

.betterhover\:hover\:bg-orange-600:hover {
    --tw-bg-opacity: 1;
    background-color: rgba(217, 128, 0, var(--tw-bg-opacity));
}

.focus-visible\:bg-orange-500:focus-visible {
    --tw-bg-opacity: 1;
    background-color: rgba(255, 157, 0, var(--tw-bg-opacity));
    ;
}

.disabled\:bg-orange-800:disabled {
    --tw-bg-opacity: 1;
    background-color: rgba(154, 75, 0, var(--tw-bg-opacity));
}

.moKick-dng-countdown {
    animation: moKick-dng-countdown 0.5s cubic-bezier(0.680, -0.550, 0.265, 1.550) both;
}

.moKick-dng-countdownGlow {
    animation: moKick-dng-countdownGlow 6s cubic-bezier(0.4, 0, 1, 1) both;
}

.data-\[state\=checked\]\:translate-x-\[calc\(5rem-1\.75rem-0\.25rem\)\][data-state=checked] {
    transform: translateX(calc(5rem - 1.75rem - 0.25rem));
}

.border-\[\#474F54\] {
    --tw-border-opacity: 1;
    border-color: rgb(71 79 84 / var(--tw-border-opacity));
}

.border-\[\#A8B1B822\] {
    border-color: #a8b1b822;
}

[data-theatre-mode-display=true] {
    display: none !important
}

[data-theatre-mode-overflow=true] {
    overflow-y: hidden !important
}

[data-theatre-mode-max-height=true] {
    max-height: unset !important
}

.custom-toast[data-sonner-toast][data-styled=true] {
    background-color: #232628;
    border: none;
    text-align: center;
    font-weight: 500;
    font-size: 14px;
    border-radius: 4px;
    overflow: hidden
}

.custom-toast[data-sonner-toast][data-styled=true] [data-content] {
    flex-grow: 1
}

.custom-toast[data-sonner-toast][data-styled=true] [data-icon] {
    height: 24px;
    width: 24px
}

@media (max-width: 1024px) {
    [data-sonner-toaster][data-y-position=bottom] {
        bottom: calc(80px + env(safe-area-inset-bottom, 20px)) !important
    }
}

.markdown-panel h4,
.markdown-panel h5,
.markdown-panel h6 {
    margin-top: .5rem;
    margin-bottom: .5rem;
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity))
}

.markdown-panel h4:first-child,
.markdown-panel h5:first-child,
.markdown-panel h6:first-child {
    margin-top: 0
}

.markdown-panel h4 {
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 600
}

.markdown-panel h5 {
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600
}

.markdown-panel h6 {
    font-size: 15px;
    font-weight: 600
}

.markdown-panel a {
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgba(83, 252, 24, var(--tw-text-opacity))
}

.markdown-panel ol,
.markdown-panel ul {
    margin-bottom: .25rem;
    list-style-position: inside;
    padding-left: 1.25rem
}

.markdown-panel ul {
    list-style-type: disc
}

.markdown-panel ol {
    list-style-type: decimal
}

.markdown-panel li {
    list-style-position: outside
}

.markdown-panel p {
    margin-bottom: .5rem
}

.markdown-policy-page h4:first-child,
.markdown-policy-page h5:first-child,
.markdown-policy-page h6:first-child {
    margin-top: 0
}

.markdown-policy-page h1 {
    font-size: 1.875rem;
    line-height: 2.25rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgba(83, 252, 24, var(--tw-text-opacity))
}

@media (min-width: 1024px) {
    .markdown-policy-page h1 {
        font-size: 2.25rem;
        line-height: 2.5rem
    }
}

.markdown-policy-page p {
    margin-bottom: 1rem;
    text-align: justify
}

.markdown-policy-page p:last-child {
    margin-bottom: 0
}

.markdown-policy-page ol,
.markdown-policy-page ul {
    margin-top: 1rem;
    margin-bottom: 1rem;
    margin-left: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .5rem
}

.markdown-policy-page ul {
    list-style-type: disc
}

.markdown-policy-page a {
    --tw-text-opacity: 1;
    color: rgba(83, 252, 24, var(--tw-text-opacity))
}

.markdown-policy-page h2 {
    margin-bottom: 1rem;
    margin-top: 1.5rem;
    font-size: 1.5rem;
    line-height: 2rem
}

.markdown-policy-page h2,
.markdown-policy-page h3 {
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgba(83, 252, 24, var(--tw-text-opacity))
}

.markdown-policy-page h3 {
    font-size: 1.25rem;
    line-height: 1.75rem
}

.markdown-policy-page h6 {
    font-size: 1.25rem;
    color: rgb(255 255 255/var(--tw-text-opacity));
    text-decoration-line: underline
}

.markdown-policy-page h6,
.markdown-policy-page summary {
    font-weight: 600;
    line-height: 1.75rem;
    --tw-text-opacity: 1
}

.markdown-policy-page summary {
    cursor: pointer;
    font-size: 1.125rem;
    color: rgba(83, 252, 24, var(--tw-text-opacity))
}

.markdown-dev-portal h4:first-child,
.markdown-dev-portal h5:first-child,
.markdown-dev-portal h6:first-child {
    margin-top: 0
}

.markdown-dev-portal h1 {
    margin-bottom: 1.5rem;
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity))
}

@media (min-width: 1024px) {
    .markdown-dev-portal h1 {
        font-size: 1.5rem;
        line-height: 2rem
    }
}

.markdown-dev-portal p {
    margin-bottom: 1rem;
    text-align: justify;
    font-size: .875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgba(159, 166, 173, var(--tw-text-opacity))
}

.markdown-dev-portal p:last-child {
    margin-bottom: 0
}

.markdown-dev-portal ol,
.markdown-dev-portal ul {
    margin-top: 1rem;
    margin-bottom: 1rem;
    margin-left: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    font-size: .875rem;
    line-height: 1.25rem;
    --tw-text-opacity: 1;
    color: rgba(159, 166, 173, var(--tw-text-opacity))
}

.markdown-dev-portal ul {
    list-style-type: disc
}

.markdown-dev-portal a,
.markdown-dev-portal h2 {
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity))
}

.markdown-dev-portal h2 {
    margin-bottom: 1rem;
    margin-top: 1.5rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 700
}

@media (min-width: 1024px) {
    .markdown-dev-portal h2 {
        font-size: 1.25rem;
        line-height: 1.75rem
    }
}

.markdown-dev-portal h3 {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.75rem;
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity))
}

@media (min-width: 1024px) {
    .markdown-dev-portal h3 {
        font-size: 1.125rem;
        line-height: 1.75rem
    }
}

.markdown-dev-portal strong {
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity))
}

.markdown-dev-portal h6 {
    font-size: 1.25rem;
    text-decoration-line: underline
}

.markdown-dev-portal h6,
.markdown-dev-portal summary {
    font-weight: 600;
    line-height: 1.75rem;
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity))
}

.markdown-dev-portal summary {
    cursor: pointer;
    font-size: 1.125rem
}

.markdown-bounties a {
    --tw-text-opacity: 1;
    color: rgba(83, 252, 24, var(--tw-text-opacity));
    text-decoration-line: underline
}


@keyframes moKick_glowButton {
    0% {
        background-position: 0 0;
    }

    50% {
        background-position: 400% 0;
    }

    100% {
        background-position: 0 0;
    }
}

@keyframes moKickMenuOpen {
    from {
        opacity: 0;
        scale: 0.5;
    }

    to {
        opacity: 1;
        scale: 1;
    }
}

@keyframes moKickGiveawayAnimation {
    0% {
        margin-top: -2500rem;
    }

    5% {
        margin-top: -2505rem;
    }

    100% {
        margin-top: 0rem;
    }
}

@keyframes moKickBorderBlink {

    0%,
    50%,
    100% {
        border: 2px solid transparent;
    }

    25%,
    75% {
        border: 2px solid rgba(83, 252, 24, 1);
    }
}

@keyframes slideInTopLeft {
    0% {
        transform: translate(-100%, -100%);
        opacity: 0;
    }

    100% {
        transform: translate(0, 0);
        opacity: 1;
    }
}

@keyframes moKick-dng-countdown {
    0% {
        color: #4FF317;
        transform: translateY(0);
        transform-origin: 50% 50%;
        text-shadow: none;
        scale: 2;
    }

    100% {
        color: #4FF317;
        transform: translateY(-50px);
        transform-origin: 50% 50%;
        text-shadow: 0 1px 0 #3fb914, 0 2px 0 #3fb914, 0 3px 0 #3fb914, 0 4px 0 #3fb914, 0 5px 0 #3fb914, 0 6px 0 #3fb914, 0 7px 0 #3fb914, 0 8px 0 #3fb914, 0 9px 0 #3fb914, 0 50px 30px rgba(0, 0, 0, 0.3);
        scale: 1;
    }
}

@keyframes moKick-dng-countdownGlow {
    0% {
        box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);
    }

    100% {
        box-shadow: inset 0 0 40px rgba(79, 243, 23, 1), inset 0 0 80px rgba(79, 243, 23, 0.8);
    }
}

@keyframes downArrow {

    0% {

        transform: translateY(0px);

    }

    10% {

        transform: translateY(10px);

    }

    20% {

        transform: translateY(0px);

    }

    30% {

        transform: translateY(10px);

    }

    40% {

        transform: translateY(0px);

    }

    50% {

        transform: translateY(0px);

    }

    100% {

        transform: translateY(0px);

    }

}

:where(html[dir="ltr"]),
:where([data-sonner-toaster][dir="ltr"]) {
    --toast-icon-margin-start: -3px;
    --toast-icon-margin-end: 4px;
    --toast-svg-margin-start: -1px;
    --toast-svg-margin-end: 0px;
    --toast-button-margin-start: auto;
    --toast-button-margin-end: 0;
    --toast-close-button-start: 0;
    --toast-close-button-end: unset;
    --toast-close-button-transform: translate(-35%, -35%)
}

:where(html[dir="rtl"]),
:where([data-sonner-toaster][dir="rtl"]) {
    --toast-icon-margin-start: 4px;
    --toast-icon-margin-end: -3px;
    --toast-svg-margin-start: 0px;
    --toast-svg-margin-end: -1px;
    --toast-button-margin-start: 0;
    --toast-button-margin-end: auto;
    --toast-close-button-start: unset;
    --toast-close-button-end: 0;
    --toast-close-button-transform: translate(35%, -35%)
}

:where([data-sonner-toaster]) {
    position: fixed;
    width: var(--width);
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    --gray1: hsl(0, 0%, 99%);
    --gray2: hsl(0, 0%, 97.3%);
    --gray3: hsl(0, 0%, 95.1%);
    --gray4: hsl(0, 0%, 93%);
    --gray5: hsl(0, 0%, 90.9%);
    --gray6: hsl(0, 0%, 88.7%);
    --gray7: hsl(0, 0%, 85.8%);
    --gray8: hsl(0, 0%, 78%);
    --gray9: hsl(0, 0%, 56.1%);
    --gray10: hsl(0, 0%, 52.3%);
    --gray11: hsl(0, 0%, 43.5%);
    --gray12: hsl(0, 0%, 9%);
    --border-radius: 8px;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    list-style: none;
    outline: none;
    z-index: 999999999
}

:where([data-sonner-toaster][data-x-position="right"]) {
    right: max(var(--offset), env(safe-area-inset-right))
}

:where([data-sonner-toaster][data-x-position="left"]) {
    left: max(var(--offset), env(safe-area-inset-left))
}

:where([data-sonner-toaster][data-x-position="center"]) {
    left: 50%;
    transform: translate(-50%)
}

:where([data-sonner-toaster][data-y-position="top"]) {
    top: max(var(--offset), env(safe-area-inset-top))
}

:where([data-sonner-toaster][data-y-position="bottom"]) {
    bottom: max(var(--offset), env(safe-area-inset-bottom))
}

:where([data-sonner-toast]) {
    --y: translateY(100%);
    --lift-amount: calc(var(--lift) * var(--gap));
    z-index: var(--z-index);
    position: absolute;
    opacity: 0;
    transform: var(--y);
    filter: blur(0);
    touch-action: none;
    transition: transform .4s, opacity .4s, height .4s, box-shadow .2s;
    box-sizing: border-box;
    outline: none;
    overflow-wrap: anywhere
}

:where([data-sonner-toast][data-styled="true"]) {
    padding: 16px;
    background: var(--normal-bg);
    border: 1px solid var(--normal-border);
    color: var(--normal-text);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 12px #0000001a;
    width: var(--width);
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px
}

:where([data-sonner-toast]:focus-visible) {
    box-shadow: 0 4px 12px #0000001a, 0 0 0 2px #0003
}

:where([data-sonner-toast][data-y-position="top"]) {
    top: 0;
    --y: translateY(-100%);
    --lift: 1;
    --lift-amount: calc(1 * var(--gap))
}

:where([data-sonner-toast][data-y-position="bottom"]) {
    bottom: 0;
    --y: translateY(100%);
    --lift: -1;
    --lift-amount: calc(var(--lift) * var(--gap))
}

:where([data-sonner-toast]) :where([data-description]) {
    font-weight: 400;
    line-height: 1.4;
    color: inherit
}

:where([data-sonner-toast]) :where([data-title]) {
    font-weight: 500;
    line-height: 1.5;
    color: inherit
}

:where([data-sonner-toast]) :where([data-icon]) {
    display: flex;
    height: 16px;
    width: 16px;
    position: relative;
    justify-content: flex-start;
    align-items: center;
    flex-shrink: 0;
    margin-left: var(--toast-icon-margin-start);
    margin-right: var(--toast-icon-margin-end)
}

:where([data-sonner-toast][data-promise="true"]) :where([data-icon])>svg {
    opacity: 0;
    transform: scale(.8);
    transform-origin: center;
    animation: sonner-fade-in .3s ease forwards
}

:where([data-sonner-toast]) :where([data-icon])>* {
    flex-shrink: 0
}

:where([data-sonner-toast]) :where([data-icon]) svg {
    margin-left: var(--toast-svg-margin-start);
    margin-right: var(--toast-svg-margin-end)
}

:where([data-sonner-toast]) :where([data-content]) {
    display: flex;
    flex-direction: column;
    gap: 2px
}

[data-sonner-toast][data-styled=true] [data-button] {
    border-radius: 4px;
    padding-left: 8px;
    padding-right: 8px;
    height: 24px;
    font-size: 12px;
    color: var(--normal-bg);
    background: var(--normal-text);
    margin-left: var(--toast-button-margin-start);
    margin-right: var(--toast-button-margin-end);
    border: none;
    cursor: pointer;
    outline: none;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    transition: opacity .4s, box-shadow .2s
}

:where([data-sonner-toast]) :where([data-button]):focus-visible {
    box-shadow: 0 0 0 2px #0006
}

:where([data-sonner-toast]) :where([data-button]):first-of-type {
    margin-left: var(--toast-button-margin-start);
    margin-right: var(--toast-button-margin-end)
}

:where([data-sonner-toast]) :where([data-cancel]) {
    color: var(--normal-text);
    background: rgba(0, 0, 0, .08)
}

:where([data-sonner-toast][data-theme="dark"]) :where([data-cancel]) {
    background: rgba(255, 255, 255, .3)
}

:where([data-sonner-toast]) :where([data-close-button]) {
    position: absolute;
    left: var(--toast-close-button-start);
    right: var(--toast-close-button-end);
    top: 0;
    height: 20px;
    width: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    background: var(--gray1);
    color: var(--gray12);
    border: 1px solid var(--gray4);
    transform: var(--toast-close-button-transform);
    border-radius: 50%;
    cursor: pointer;
    z-index: 1;
    transition: opacity .1s, background .2s, border-color .2s
}

:where([data-sonner-toast]) :where([data-close-button]):focus-visible {
    box-shadow: 0 4px 12px #0000001a, 0 0 0 2px #0003
}

:where([data-sonner-toast]) :where([data-disabled="true"]) {
    cursor: not-allowed
}

:where([data-sonner-toast]):hover :where([data-close-button]):hover {
    background: var(--gray2);
    border-color: var(--gray5)
}

:where([data-sonner-toast][data-swiping="true"]):before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 100%;
    z-index: -1
}

:where([data-sonner-toast][data-y-position="top"][data-swiping="true"]):before {
    bottom: 50%;
    transform: scaleY(3) translateY(50%)
}

:where([data-sonner-toast][data-y-position="bottom"][data-swiping="true"]):before {
    top: 50%;
    transform: scaleY(3) translateY(-50%)
}

:where([data-sonner-toast][data-swiping="false"][data-removed="true"]):before {
    content: "";
    position: absolute;
    inset: 0;
    transform: scaleY(2)
}

:where([data-sonner-toast]):after {
    content: "";
    position: absolute;
    left: 0;
    height: calc(var(--gap) + 1px);
    bottom: 100%;
    width: 100%
}

:where([data-sonner-toast][data-mounted="true"]) {
    --y: translateY(0);
    opacity: 1
}

:where([data-sonner-toast][data-expanded="false"][data-front="false"]) {
    --scale: var(--toasts-before) * .05 + 1;
    --y: translateY(calc(var(--lift-amount) * var(--toasts-before))) scale(calc(-1 * var(--scale)));
    height: var(--front-toast-height)
}

:where([data-sonner-toast])>* {
    transition: opacity .4s
}

:where([data-sonner-toast][data-expanded="false"][data-front="false"][data-styled="true"])>* {
    opacity: 0
}

:where([data-sonner-toast][data-visible="false"]) {
    opacity: 0;
    pointer-events: none
}

:where([data-sonner-toast][data-mounted="true"][data-expanded="true"]) {
    --y: translateY(calc(var(--lift) * var(--offset)));
    height: var(--initial-height)
}

:where([data-sonner-toast][data-removed="true"][data-front="true"][data-swipe-out="false"]) {
    --y: translateY(calc(var(--lift) * -100%));
    opacity: 0
}

:where([data-sonner-toast][data-removed="true"][data-front="false"][data-swipe-out="false"][data-expanded="true"]) {
    --y: translateY(calc(var(--lift) * var(--offset) + var(--lift) * -100%));
    opacity: 0
}

:where([data-sonner-toast][data-removed="true"][data-front="false"][data-swipe-out="false"][data-expanded="false"]) {
    --y: translateY(40%);
    opacity: 0;
    transition: transform .5s, opacity .2s
}

:where([data-sonner-toast][data-removed="true"][data-front="false"]):before {
    height: calc(var(--initial-height) + 20%)
}

[data-sonner-toast][data-swiping=true] {
    transform: var(--y) translateY(var(--swipe-amount, 0px));
    transition: none
}

[data-sonner-toast][data-swipe-out=true][data-y-position=bottom],
[data-sonner-toast][data-swipe-out=true][data-y-position=top] {
    animation: swipe-out .2s ease-out forwards
}

@keyframes swipe-out {
    0% {
        transform: translateY(calc(var(--lift) * var(--offset) + var(--swipe-amount)));
        opacity: 1
    }

    to {
        transform: translateY(calc(var(--lift) * var(--offset) + var(--swipe-amount) + var(--lift) * -100%));
        opacity: 0
    }
}

@media (max-width: 600px) {
    [data-sonner-toaster] {
        position: fixed;
        --mobile-offset: 16px;
        right: var(--mobile-offset);
        left: var(--mobile-offset);
        width: 100%
    }

    [data-sonner-toaster] [data-sonner-toast] {
        left: 0;
        right: 0;
        width: calc(100% - var(--mobile-offset) * 2)
    }

    [data-sonner-toaster][data-x-position=left] {
        left: var(--mobile-offset)
    }

    [data-sonner-toaster][data-y-position=bottom] {
        bottom: 20px
    }

    [data-sonner-toaster][data-y-position=top] {
        top: 20px
    }

    [data-sonner-toaster][data-x-position=center] {
        left: var(--mobile-offset);
        right: var(--mobile-offset);
        transform: none
    }
}

[data-sonner-toaster][data-theme=light] {
    --normal-bg: #fff;
    --normal-border: var(--gray4);
    --normal-text: var(--gray12);
    --success-bg: hsl(143, 85%, 96%);
    --success-border: hsl(145, 92%, 91%);
    --success-text: hsl(140, 100%, 27%);
    --info-bg: hsl(208, 100%, 97%);
    --info-border: hsl(221, 91%, 91%);
    --info-text: hsl(210, 92%, 45%);
    --warning-bg: hsl(49, 100%, 97%);
    --warning-border: hsl(49, 91%, 91%);
    --warning-text: hsl(31, 92%, 45%);
    --error-bg: hsl(359, 100%, 97%);
    --error-border: hsl(359, 100%, 94%);
    --error-text: hsl(360, 100%, 45%)
}

[data-sonner-toaster][data-theme=light] [data-sonner-toast][data-invert=true] {
    --normal-bg: #000;
    --normal-border: hsl(0, 0%, 20%);
    --normal-text: var(--gray1)
}

[data-sonner-toaster][data-theme=dark] [data-sonner-toast][data-invert=true] {
    --normal-bg: #fff;
    --normal-border: var(--gray3);
    --normal-text: var(--gray12)
}

[data-sonner-toaster][data-theme=dark] {
    --normal-bg: #000;
    --normal-border: hsl(0, 0%, 20%);
    --normal-text: var(--gray1);
    --success-bg: hsl(150, 100%, 6%);
    --success-border: hsl(147, 100%, 12%);
    --success-text: hsl(150, 86%, 65%);
    --info-bg: hsl(215, 100%, 6%);
    --info-border: hsl(223, 100%, 12%);
    --info-text: hsl(216, 87%, 65%);
    --warning-bg: hsl(64, 100%, 6%);
    --warning-border: hsl(60, 100%, 12%);
    --warning-text: hsl(46, 87%, 65%);
    --error-bg: hsl(358, 76%, 10%);
    --error-border: hsl(357, 89%, 16%);
    --error-text: hsl(358, 100%, 81%)
}

[data-sonner-toaster][dir=ltr],
html[dir=ltr] {
    --toast-icon-margin-start: -3px;
    --toast-icon-margin-end: 4px;
    --toast-svg-margin-start: -1px;
    --toast-svg-margin-end: 0px;
    --toast-button-margin-start: auto;
    --toast-button-margin-end: 0;
    --toast-close-button-start: 0;
    --toast-close-button-end: unset;
    --toast-close-button-transform: translate(-35%, -35%)
}

[data-sonner-toaster][dir=rtl],
html[dir=rtl] {
    --toast-icon-margin-start: 4px;
    --toast-icon-margin-end: -3px;
    --toast-svg-margin-start: 0px;
    --toast-svg-margin-end: -1px;
    --toast-button-margin-start: 0;
    --toast-button-margin-end: auto;
    --toast-close-button-start: unset;
    --toast-close-button-end: 0;
    --toast-close-button-transform: translate(35%, -35%)
}

[data-sonner-toaster] {
    position: fixed;
    width: var(--width);
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    --gray1: hsl(0, 0%, 99%);
    --gray2: hsl(0, 0%, 97.3%);
    --gray3: hsl(0, 0%, 95.1%);
    --gray4: hsl(0, 0%, 93%);
    --gray5: hsl(0, 0%, 90.9%);
    --gray6: hsl(0, 0%, 88.7%);
    --gray7: hsl(0, 0%, 85.8%);
    --gray8: hsl(0, 0%, 78%);
    --gray9: hsl(0, 0%, 56.1%);
    --gray10: hsl(0, 0%, 52.3%);
    --gray11: hsl(0, 0%, 43.5%);
    --gray12: hsl(0, 0%, 9%);
    --border-radius: 8px;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    list-style: none;
    outline: 0;
    z-index: 999999999;
    transition: transform .4s ease
}

[data-sonner-toaster][data-lifted=true] {
    transform: translateY(-8px)
}

@media (hover:none) and (pointer:coarse) {
    [data-sonner-toaster][data-lifted=true] {
        transform: none
    }
}

[data-sonner-toaster][data-x-position=right] {
    right: var(--offset-right)
}

[data-sonner-toaster][data-x-position=left] {
    left: var(--offset-left)
}

[data-sonner-toaster][data-x-position=center] {
    left: 50%;
    transform: translateX(-50%)
}

[data-sonner-toaster][data-y-position=top] {
    top: var(--offset-top)
}

[data-sonner-toaster][data-y-position=bottom] {
    bottom: var(--offset-bottom)
}

[data-sonner-toast] {
    --y: translateY(100%);
    --lift-amount: calc(var(--lift) * var(--gap));
    z-index: var(--z-index);
    position: absolute;
    opacity: 0;
    transform: var(--y);
    touch-action: none;
    transition: transform .4s, opacity .4s, height .4s, box-shadow .2s;
    box-sizing: border-box;
    outline: 0;
    overflow-wrap: anywhere
}

[data-sonner-toast][data-styled=true] {
    padding: 16px;
    background: var(--normal-bg);
    border: 1px solid var(--normal-border);
    color: var(--normal-text);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
    width: var(--width);
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px
}

[data-sonner-toast]:focus-visible {
    box-shadow: 0 4px 12px rgba(0, 0, 0, .1), 0 0 0 2px rgba(0, 0, 0, .2)
}

[data-sonner-toast][data-y-position=top] {
    top: 0;
    --y: translateY(-100%);
    --lift: 1;
    --lift-amount: calc(1 * var(--gap))
}

[data-sonner-toast][data-y-position=bottom] {
    bottom: 0;
    --y: translateY(100%);
    --lift: -1;
    --lift-amount: calc(var(--lift) * var(--gap))
}

[data-sonner-toast][data-styled=true] [data-description] {
    font-weight: 400;
    line-height: 1.4;
    color: #3f3f3f
}

[data-rich-colors=true][data-sonner-toast][data-styled=true] [data-description] {
    color: inherit
}

[data-sonner-toaster][data-sonner-theme=dark] [data-description] {
    color: #e8e8e8
}

[data-sonner-toast][data-styled=true] [data-title] {
    font-weight: 500;
    line-height: 1.5;
    color: inherit
}

[data-sonner-toast][data-styled=true] [data-icon] {
    display: flex;
    height: 16px;
    width: 16px;
    position: relative;
    justify-content: flex-start;
    align-items: center;
    flex-shrink: 0;
    margin-left: var(--toast-icon-margin-start);
    margin-right: var(--toast-icon-margin-end)
}

[data-sonner-toast][data-promise=true] [data-icon]>svg {
    opacity: 0;
    transform: scale(.8);
    transform-origin: center;
    animation: sonner-fade-in .3s ease forwards
}

[data-sonner-toast][data-styled=true] [data-icon]>* {
    flex-shrink: 0
}

[data-sonner-toast][data-styled=true] [data-icon] svg {
    margin-left: var(--toast-svg-margin-start);
    margin-right: var(--toast-svg-margin-end)
}

[data-sonner-toast][data-styled=true] [data-content] {
    display: flex;
    flex-direction: column;
    gap: 2px
}

[data-sonner-toast][data-styled=true] [data-button] {
    border-radius: 4px;
    padding-left: 8px;
    padding-right: 8px;
    height: 24px;
    font-size: 12px;
    color: var(--normal-bg);
    background: var(--normal-text);
    margin-left: var(--toast-button-margin-start);
    margin-right: var(--toast-button-margin-end);
    border: none;
    font-weight: 500;
    cursor: pointer;
    outline: 0;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    transition: opacity .4s, box-shadow .2s
}

[data-sonner-toast][data-styled=true] [data-button]:focus-visible {
    box-shadow: 0 0 0 2px rgba(0, 0, 0, .4)
}

[data-sonner-toast][data-styled=true] [data-button]:first-of-type {
    margin-left: var(--toast-button-margin-start);
    margin-right: var(--toast-button-margin-end)
}

[data-sonner-toast][data-styled=true] [data-cancel] {
    color: var(--normal-text);
    background: rgba(0, 0, 0, .08)
}

[data-sonner-toaster][data-sonner-theme=dark] [data-sonner-toast][data-styled=true] [data-cancel] {
    background: rgba(255, 255, 255, .3)
}

[data-sonner-toast][data-styled=true] [data-close-button] {
    position: absolute;
    left: var(--toast-close-button-start);
    right: var(--toast-close-button-end);
    top: 0;
    height: 20px;
    width: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    color: var(--gray12);
    background: var(--normal-bg);
    border: 1px solid var(--gray4);
    transform: var(--toast-close-button-transform);
    border-radius: 50%;
    cursor: pointer;
    z-index: 1;
    transition: opacity .1s, background .2s, border-color .2s
}

[data-sonner-toast][data-styled=true] [data-close-button]:focus-visible {
    box-shadow: 0 4px 12px rgba(0, 0, 0, .1), 0 0 0 2px rgba(0, 0, 0, .2)
}

[data-sonner-toast][data-styled=true] [data-disabled=true] {
    cursor: not-allowed
}

[data-sonner-toast][data-styled=true]:hover [data-close-button]:hover {
    background: var(--gray2);
    border-color: var(--gray5)
}

[data-sonner-toast][data-swiping=true]::before {
    content: '';
    position: absolute;
    left: -100%;
    right: -100%;
    height: 100%;
    z-index: -1
}

[data-sonner-toast][data-y-position=top][data-swiping=true]::before {
    bottom: 50%;
    transform: scaleY(3) translateY(50%)
}

[data-sonner-toast][data-y-position=bottom][data-swiping=true]::before {
    top: 50%;
    transform: scaleY(3) translateY(-50%)
}

[data-sonner-toast][data-swiping=false][data-removed=true]::before {
    content: '';
    position: absolute;
    inset: 0;
    transform: scaleY(2)
}

[data-sonner-toast][data-expanded=true]::after {
    content: '';
    position: absolute;
    left: 0;
    height: calc(var(--gap) + 1px);
    bottom: 100%;
    width: 100%
}

[data-sonner-toast][data-mounted=true] {
    --y: translateY(0);
    opacity: 1
}

[data-sonner-toast][data-expanded=false][data-front=false] {
    --scale: var(--toasts-before) * 0.05 + 1;
    --y: translateY(calc(var(--lift-amount) * var(--toasts-before))) scale(calc(-1 * var(--scale)));
    height: var(--front-toast-height)
}

[data-sonner-toast]>* {
    transition: opacity .4s
}

[data-sonner-toast][data-x-position=right] {
    right: 0
}

[data-sonner-toast][data-x-position=left] {
    left: 0
}

[data-sonner-toast][data-expanded=false][data-front=false][data-styled=true]>* {
    opacity: 0
}

[data-sonner-toast][data-visible=false] {
    opacity: 0;
    pointer-events: none
}

[data-sonner-toast][data-mounted=true][data-expanded=true] {
    --y: translateY(calc(var(--lift) * var(--offset)));
    height: var(--initial-height)
}

[data-sonner-toast][data-removed=true][data-front=true][data-swipe-out=false] {
    --y: translateY(calc(var(--lift) * -100%));
    opacity: 0
}

[data-sonner-toast][data-removed=true][data-front=false][data-swipe-out=false][data-expanded=true] {
    --y: translateY(calc(var(--lift) * var(--offset) + var(--lift) * -100%));
    opacity: 0
}

[data-sonner-toast][data-removed=true][data-front=false][data-swipe-out=false][data-expanded=false] {
    --y: translateY(40%);
    opacity: 0;
    transition: transform .5s, opacity .2s
}

[data-sonner-toast][data-removed=true][data-front=false]::before {
    height: calc(var(--initial-height) + 20%)
}

[data-sonner-toast][data-swiping=true] {
    transform: var(--y) translateY(var(--swipe-amount-y, 0)) translateX(var(--swipe-amount-x, 0));
    transition: none
}

[data-sonner-toast][data-swiped=true] {
    user-select: none
}

[data-sonner-toast][data-swipe-out=true][data-y-position=bottom],
[data-sonner-toast][data-swipe-out=true][data-y-position=top] {
    animation-duration: .2s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards
}

[data-sonner-toast][data-swipe-out=true][data-swipe-direction=left] {
    animation-name: swipe-out-left
}

[data-sonner-toast][data-swipe-out=true][data-swipe-direction=right] {
    animation-name: swipe-out-right
}

[data-sonner-toast][data-swipe-out=true][data-swipe-direction=up] {
    animation-name: swipe-out-up
}

[data-sonner-toast][data-swipe-out=true][data-swipe-direction=down] {
    animation-name: swipe-out-down
}

@keyframes swipe-out-left {
    from {
        transform: var(--y) translateX(var(--swipe-amount-x));
        opacity: 1
    }

    to {
        transform: var(--y) translateX(calc(var(--swipe-amount-x) - 100%));
        opacity: 0
    }
}

@keyframes swipe-out-right {
    from {
        transform: var(--y) translateX(var(--swipe-amount-x));
        opacity: 1
    }

    to {
        transform: var(--y) translateX(calc(var(--swipe-amount-x) + 100%));
        opacity: 0
    }
}

@keyframes swipe-out-up {
    from {
        transform: var(--y) translateY(var(--swipe-amount-y));
        opacity: 1
    }

    to {
        transform: var(--y) translateY(calc(var(--swipe-amount-y) - 100%));
        opacity: 0
    }
}

@keyframes swipe-out-down {
    from {
        transform: var(--y) translateY(var(--swipe-amount-y));
        opacity: 1
    }

    to {
        transform: var(--y) translateY(calc(var(--swipe-amount-y) + 100%));
        opacity: 0
    }
}

@media (max-width:600px) {
    [data-sonner-toaster] {
        position: fixed;
        right: var(--mobile-offset-right);
        left: var(--mobile-offset-left);
        width: 100%
    }

    [data-sonner-toaster][dir=rtl] {
        left: calc(var(--mobile-offset-left) * -1)
    }

    [data-sonner-toaster] [data-sonner-toast] {
        left: 0;
        right: 0;
        width: calc(100% - var(--mobile-offset-left) * 2)
    }

    [data-sonner-toaster][data-x-position=left] {
        left: var(--mobile-offset-left)
    }

    [data-sonner-toaster][data-y-position=bottom] {
        bottom: var(--mobile-offset-bottom)
    }

    [data-sonner-toaster][data-y-position=top] {
        top: var(--mobile-offset-top)
    }

    [data-sonner-toaster][data-x-position=center] {
        left: var(--mobile-offset-left);
        right: var(--mobile-offset-right);
        transform: none
    }
}

[data-sonner-toaster][data-sonner-theme=light] {
    --normal-bg: #fff;
    --normal-border: var(--gray4);
    --normal-text: var(--gray12);
    --success-bg: hsl(143, 85%, 96%);
    --success-border: hsl(145, 92%, 87%);
    --success-text: hsl(140, 100%, 27%);
    --info-bg: hsl(208, 100%, 97%);
    --info-border: hsl(221, 91%, 93%);
    --info-text: hsl(210, 92%, 45%);
    --warning-bg: hsl(49, 100%, 97%);
    --warning-border: hsl(49, 91%, 84%);
    --warning-text: hsl(31, 92%, 45%);
    --error-bg: hsl(359, 100%, 97%);
    --error-border: hsl(359, 100%, 94%);
    --error-text: hsl(360, 100%, 45%)
}

[data-sonner-toaster][data-sonner-theme=light] [data-sonner-toast][data-invert=true] {
    --normal-bg: #000;
    --normal-border: hsl(0, 0%, 20%);
    --normal-text: var(--gray1)
}

[data-sonner-toaster][data-sonner-theme=dark] [data-sonner-toast][data-invert=true] {
    --normal-bg: #fff;
    --normal-border: var(--gray3);
    --normal-text: var(--gray12)
}

[data-sonner-toaster][data-sonner-theme=dark] {
    --normal-bg: #000;
    --normal-bg-hover: hsl(0, 0%, 12%);
    --normal-border: hsl(0, 0%, 20%);
    --normal-border-hover: hsl(0, 0%, 25%);
    --normal-text: var(--gray1);
    --success-bg: hsl(150, 100%, 6%);
    --success-border: hsl(147, 100%, 12%);
    --success-text: hsl(150, 86%, 65%);
    --info-bg: hsl(215, 100%, 6%);
    --info-border: hsl(223, 43%, 17%);
    --info-text: hsl(216, 87%, 65%);
    --warning-bg: hsl(64, 100%, 6%);
    --warning-border: hsl(60, 100%, 9%);
    --warning-text: hsl(46, 87%, 65%);
    --error-bg: hsl(358, 76%, 10%);
    --error-border: hsl(357, 89%, 16%);
    --error-text: hsl(358, 100%, 81%)
}

[data-sonner-toaster][data-sonner-theme=dark] [data-sonner-toast] [data-close-button] {
    background: var(--normal-bg);
    border-color: var(--normal-border);
    color: var(--normal-text)
}

[data-sonner-toaster][data-sonner-theme=dark] [data-sonner-toast] [data-close-button]:hover {
    background: var(--normal-bg-hover);
    border-color: var(--normal-border-hover)
}

[data-rich-colors=true][data-sonner-toast][data-type=success] {
    background: var(--success-bg);
    border-color: var(--success-border);
    color: var(--success-text)
}

[data-rich-colors=true][data-sonner-toast][data-type=success] [data-close-button] {
    background: var(--success-bg);
    border-color: var(--success-border);
    color: var(--success-text)
}

[data-rich-colors=true][data-sonner-toast][data-type=info] {
    background: var(--info-bg);
    border-color: var(--info-border);
    color: var(--info-text)
}

[data-rich-colors=true][data-sonner-toast][data-type=info] [data-close-button] {
    background: var(--info-bg);
    border-color: var(--info-border);
    color: var(--info-text)
}

[data-rich-colors=true][data-sonner-toast][data-type=warning] {
    background: var(--warning-bg);
    border-color: var(--warning-border);
    color: var(--warning-text)
}

[data-rich-colors=true][data-sonner-toast][data-type=warning] [data-close-button] {
    background: var(--warning-bg);
    border-color: var(--warning-border);
    color: var(--warning-text)
}

[data-rich-colors=true][data-sonner-toast][data-type=error] {
    background: var(--error-bg);
    border-color: var(--error-border);
    color: var(--error-text)
}

[data-rich-colors=true][data-sonner-toast][data-type=error] [data-close-button] {
    background: var(--error-bg);
    border-color: var(--error-border);
    color: var(--error-text)
}

.sonner-loading-wrapper {
    --size: 16px;
    height: var(--size);
    width: var(--size);
    position: absolute;
    inset: 0;
    z-index: 10
}

.sonner-loading-wrapper[data-visible=false] {
    transform-origin: center;
    animation: sonner-fade-out .2s ease forwards
}

.sonner-spinner {
    position: relative;
    top: 50%;
    left: 50%;
    height: var(--size);
    width: var(--size)
}

.sonner-loading-bar {
    animation: sonner-spin 1.2s linear infinite;
    background: var(--gray11);
    border-radius: 6px;
    height: 8%;
    left: -10%;
    position: absolute;
    top: -3.9%;
    width: 24%
}

.sonner-loading-bar:first-child {
    animation-delay: -1.2s;
    transform: rotate(.0001deg) translate(146%)
}

.sonner-loading-bar:nth-child(2) {
    animation-delay: -1.1s;
    transform: rotate(30deg) translate(146%)
}

.sonner-loading-bar:nth-child(3) {
    animation-delay: -1s;
    transform: rotate(60deg) translate(146%)
}

.sonner-loading-bar:nth-child(4) {
    animation-delay: -.9s;
    transform: rotate(90deg) translate(146%)
}

.sonner-loading-bar:nth-child(5) {
    animation-delay: -.8s;
    transform: rotate(120deg) translate(146%)
}

.sonner-loading-bar:nth-child(6) {
    animation-delay: -.7s;
    transform: rotate(150deg) translate(146%)
}

.sonner-loading-bar:nth-child(7) {
    animation-delay: -.6s;
    transform: rotate(180deg) translate(146%)
}

.sonner-loading-bar:nth-child(8) {
    animation-delay: -.5s;
    transform: rotate(210deg) translate(146%)
}

.sonner-loading-bar:nth-child(9) {
    animation-delay: -.4s;
    transform: rotate(240deg) translate(146%)
}

.sonner-loading-bar:nth-child(10) {
    animation-delay: -.3s;
    transform: rotate(270deg) translate(146%)
}

.sonner-loading-bar:nth-child(11) {
    animation-delay: -.2s;
    transform: rotate(300deg) translate(146%)
}

.sonner-loading-bar:nth-child(12) {
    animation-delay: -.1s;
    transform: rotate(330deg) translate(146%)
}

@keyframes sonner-fade-in {
    0% {
        opacity: 0;
        transform: scale(.8)
    }

    100% {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes sonner-fade-out {
    0% {
        opacity: 1;
        transform: scale(1)
    }

    100% {
        opacity: 0;
        transform: scale(.8)
    }
}

@keyframes sonner-spin {
    0% {
        opacity: 1
    }

    100% {
        opacity: .15
    }
}

@media (prefers-reduced-motion) {

    .sonner-loading-bar,
    [data-sonner-toast],
    [data-sonner-toast]>* {
        transition: none !important;
        animation: none !important
    }
}

.sonner-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform-origin: center;
    transition: opacity .2s, transform .2s
}

.sonner-loader[data-visible=false] {
    opacity: 0;
    transform: scale(.8) translate(-50%, -50%)
}