@use "button"; @use "checkbox"; @use "interactable"; @use "text"; @use "link"; @use "card"; @use "tag"; @use "progress"; @use "tooltip"; @use "balloon"; @use "slider"; .tw-line-height-body { line-height: 1.5!important } .tw-line-height-heading { line-height: 1.2!important } .tw-regular { font-weight: 400!important } .tw-semibold,.tw-strong { font-weight: 600!important } .tw-bold { font-weight: 700!important } .tw-italic { font-style: italic!important } .tw-strikethrough { text-decoration: line-through!important } .tw-white-space-nowrap { white-space: nowrap!important } .tw-white-space-pre-wrap { white-space: pre-wrap!important } .tw-underline { text-decoration: underline!important } .tw-upcase { text-transform: uppercase!important } .tw-capcase { text-transform: capitalize!important } .tw-word-break-normal { word-break: normal!important } .tw-word-break-all { word-break: break-all!important } .tw-word-break-keep-all { word-break: keep-all!important } .tw-word-break-word { word-break: break-word!important } .tw-tabular-nums { -webkit-font-feature-settings: "tnum"; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums } .tw-align-center { text-align: center!important } .tw-align-left { text-align: left!important } .tw-align-right { text-align: right!important } .tw-align-justify { text-align: justify!important } .tw-initial { display: initial!important } .tw-inline { display: inline!important } .tw-inline-block { display: inline-block!important } .tw-block { display: block!important } .tw-hide { display: none!important } .tw-overflow-hidden { overflow: hidden!important } .tw-overflow-auto { overflow: auto!important } .tw-overflow-scroll { overflow: scroll!important } .tw-overflow-visible { overflow: visible!important } .tw-resize-none { resize: none!important } .tw-resize-x { resize: horizontal!important } .tw-resize-y { resize: vertical!important } .tw-full-width { width: 100%!important } .tw-full-height { height: 100%!important } .tw-visible { visibility: visible!important } .tw-hidden { visibility: hidden!important } .tw-clearfix:after { display: table; clear: both; content: "" } .tw-hide-accessible { position: absolute; width: .1rem; height: .1rem; margin: -.1rem; padding: 0; border: none; overflow: hidden; clip: rect(0 0 0 0) } .tw-ellipsis { text-overflow: ellipsis; white-space: nowrap; overflow: hidden } @supports (-webkit-line-clamp:2) { .tw-line-clamp-2 { overflow: hidden!important; text-overflow: ellipsis!important; white-space: normal!important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical } } .tw-button,.tw-core-button { font-weight: 600; white-space: nowrap; text-decoration: none } .tw-flex { display: flex!important } @media (min-width: 480px) { .tw-xs-flex { display:flex!important } } @media (min-width: 768px) { .tw-sm-flex { display:flex!important } } @media (min-width: 1024px) { .tw-md-flex { display:flex!important } } @media (min-width: 1200px) { .tw-lg-flex { display:flex!important } } @media (min-width: 1440px) { .tw-xl-flex { display:flex!important } } @media (min-width: 1600px) { .tw-xxl-flex { display:flex!important } } .tw-flex { display: flex !important; } .tw-flex-inline { display: inline-flex !important; } .tw-flex-wrap { flex-wrap: wrap !important; } .tw-flex-nowrap { flex-wrap: nowrap!important } .tw-flex-wrap-reverse { flex-wrap: wrap-reverse!important } .tw-inline-flex { display: inline-flex!important } .tw-flex-column { flex-direction: column!important } .tw-flex-row { flex-direction: row!important } .tw-flex-column-reverse { flex-direction: column-reverse!important } .tw-flex-row-reverse { flex-direction: row-reverse!important } .tw-align-items-start { align-items: flex-start!important } .tw-align-items-end { align-items: flex-end!important } .tw-align-items-center { align-items: center!important } .tw-align-items-baseline { align-items: baseline!important } .tw-align-items-stretch { align-items: stretch!important } .tw-align-self-auto { align-self: auto!important } .tw-align-self-start { align-self: flex-start!important } .tw-align-self-end { align-self: flex-end!important } .tw-align-self-center { align-self: center!important } .tw-align-self-baseline { align-self: baseline!important } .tw-align-self-stretch { align-self: stretch!important } .tw-justify-content-start { justify-content: flex-start!important } .tw-justify-content-end { justify-content: flex-end!important } .tw-justify-content-center { justify-content: center!important } .tw-justify-content-between { justify-content: space-between!important } .tw-justify-content-around { justify-content: space-around!important } .tw-align-content-start { align-content: flex-start!important } .tw-align-content-end { align-content: flex-end!important } .tw-align-content-center { align-content: center!important } .tw-align-content-between { align-content: space-between!important } .tw-align-content-around { align-content: space-around!important } .tw-align-content-stretch { align-content: stretch!important } .tw-flex-grow-0 { flex-grow: 0!important } .tw-flex-grow-1 { flex-grow: 1!important } .tw-flex-grow-2 { flex-grow: 2!important } .tw-flex-grow-3 { flex-grow: 3!important } .tw-flex-grow-4 { flex-grow: 4!important } .tw-flex-shrink-0 { flex-shrink: 0!important } .tw-flex-shrink-1 { flex-shrink: 1!important } .tw-flex-shrink-2 { flex-shrink: 2!important } .tw-flex-shrink-3 { flex-shrink: 3!important } .tw-flex-shrink-4 { flex-shrink: 4!important } .tw-button,.tw-button-icon { display: inline-flex; align-items: center } .tw-item-order-0 { order: 0!important } .tw-item-order-1 { order: 1!important } .tw-item-order-2 { order: 2!important } .tw-item-order-3 { order: 3!important } .tw-item-order-4 { order: 4!important } .tw-relative { position: relative!important } .tw-absolute { position: absolute!important } .tw-fixed { position: fixed!important } .tw-top-0 { top: 0!important } .tw-right-0 { right: 0!important } .tw-bottom-0 { bottom: 0!important } .tw-left-0 { left: 0!important } .tw-z-above { z-index: 10!important } .tw-z-default { z-index: 1!important } .tw-z-below { z-index: -1!important } .tw-pd-0 { padding: 0!important } .tw-pd-05 { padding: .5rem!important } .tw-pd-1 { padding: 1rem!important } .tw-pd-2 { padding: 2rem!important } .tw-pd-3 { padding: 3rem!important } .tw-pd-4 { padding: 4rem!important } .tw-pd-5 { padding: 5rem!important } .tw-pd-6 { padding: 6rem!important } .tw-pd-7 { padding: 7rem!important } .tw-pd-8 { padding: 8rem!important } .tw-pd-9 { padding: 9rem!important } .tw-pd-10 { padding: 10rem!important } .tw-pd-t-0 { padding-top: 0!important } .tw-pd-t-05 { padding-top: .5rem!important } .tw-pd-t-1 { padding-top: 1rem!important } .tw-pd-t-2 { padding-top: 2rem!important } .tw-pd-t-3 { padding-top: 3rem!important } .tw-pd-t-4 { padding-top: 4rem!important } .tw-pd-t-5 { padding-top: 5rem!important } .tw-pd-t-6 { padding-top: 6rem!important } .tw-pd-t-7 { padding-top: 7rem!important } .tw-pd-t-8 { padding-top: 8rem!important } .tw-pd-t-9 { padding-top: 9rem!important } .tw-pd-t-10 { padding-top: 10rem!important } .tw-pd-r-0 { padding-right: 0!important } .tw-pd-r-05 { padding-right: .5rem!important } .tw-pd-r-1 { padding-right: 1rem!important } .tw-pd-r-2 { padding-right: 2rem!important } .tw-pd-r-3 { padding-right: 3rem!important } .tw-pd-r-4 { padding-right: 4rem!important } .tw-pd-r-5 { padding-right: 5rem!important } .tw-pd-r-6 { padding-right: 6rem!important } .tw-pd-r-7 { padding-right: 7rem!important } .tw-pd-r-8 { padding-right: 8rem!important } .tw-pd-r-9 { padding-right: 9rem!important } .tw-pd-r-10 { padding-right: 10rem!important } .tw-pd-b-0 { padding-bottom: 0!important } .tw-pd-b-05 { padding-bottom: .5rem!important } .tw-pd-b-1 { padding-bottom: 1rem!important } .tw-pd-b-2 { padding-bottom: 2rem!important } .tw-pd-b-3 { padding-bottom: 3rem!important } .tw-pd-b-4 { padding-bottom: 4rem!important } .tw-pd-b-5 { padding-bottom: 5rem!important } .tw-pd-b-6 { padding-bottom: 6rem!important } .tw-pd-b-7 { padding-bottom: 7rem!important } .tw-pd-b-8 { padding-bottom: 8rem!important } .tw-pd-b-9 { padding-bottom: 9rem!important } .tw-pd-b-10 { padding-bottom: 10rem!important } .tw-pd-l-0 { padding-left: 0!important } .tw-pd-l-05 { padding-left: .5rem!important } .tw-pd-l-1 { padding-left: 1rem!important } .tw-pd-l-2 { padding-left: 2rem!important } .tw-pd-l-3 { padding-left: 3rem!important } .tw-pd-l-4 { padding-left: 4rem!important } .tw-pd-l-5 { padding-left: 5rem!important } .tw-pd-l-6 { padding-left: 6rem!important } .tw-pd-l-7 { padding-left: 7rem!important } .tw-pd-l-8 { padding-left: 8rem!important } .tw-pd-l-9 { padding-left: 9rem!important } .tw-pd-l-10 { padding-left: 10rem!important } .tw-pd-y-0 { padding-top: 0!important; padding-bottom: 0!important } .tw-pd-y-05 { padding-top: .5rem!important; padding-bottom: .5rem!important } .tw-pd-y-1 { padding-top: 1rem!important; padding-bottom: 1rem!important } .tw-pd-y-2 { padding-top: 2rem!important; padding-bottom: 2rem!important } .tw-pd-y-3 { padding-top: 3rem!important; padding-bottom: 3rem!important } .tw-pd-y-4 { padding-top: 4rem!important; padding-bottom: 4rem!important } .tw-pd-y-5 { padding-top: 5rem!important; padding-bottom: 5rem!important } .tw-pd-y-6 { padding-top: 6rem!important; padding-bottom: 6rem!important } .tw-pd-y-7 { padding-top: 7rem!important; padding-bottom: 7rem!important } .tw-pd-y-8 { padding-top: 8rem!important; padding-bottom: 8rem!important } .tw-pd-y-9 { padding-top: 9rem!important; padding-bottom: 9rem!important } .tw-pd-y-10 { padding-top: 10rem!important; padding-bottom: 10rem!important } .tw-pd-x-0 { padding-left: 0!important; padding-right: 0!important } .tw-pd-x-05 { padding-left: .5rem!important; padding-right: .5rem!important } .tw-pd-x-1 { padding-left: 1rem!important; padding-right: 1rem!important } .tw-pd-x-2 { padding-left: 2rem!important; padding-right: 2rem!important } .tw-pd-x-3 { padding-left: 3rem!important; padding-right: 3rem!important } .tw-pd-x-4 { padding-left: 4rem!important; padding-right: 4rem!important } .tw-pd-x-5 { padding-left: 5rem!important; padding-right: 5rem!important } .tw-pd-x-6 { padding-left: 6rem!important; padding-right: 6rem!important } .tw-pd-x-7 { padding-left: 7rem!important; padding-right: 7rem!important } .tw-pd-x-8 { padding-left: 8rem!important; padding-right: 8rem!important } .tw-pd-x-9 { padding-left: 9rem!important; padding-right: 9rem!important } .tw-pd-x-10 { padding-left: 10rem!important; padding-right: 10rem!important } .tw-mg-0 { margin: 0!important } .tw-mg-05 { margin: .5rem!important } .tw-mg-1 { margin: 1rem!important } .tw-mg-2 { margin: 2rem!important } .tw-mg-3 { margin: 3rem!important } .tw-mg-4 { margin: 4rem!important } .tw-mg-5 { margin: 5rem!important } .tw-mg-6 { margin: 6rem!important } .tw-mg-7 { margin: 7rem!important } .tw-mg-8 { margin: 8rem!important } .tw-mg-9 { margin: 9rem!important } .tw-mg-10 { margin: 10rem!important } .tw-mg-auto { margin: auto!important } .tw-mg-t-0 { margin-top: 0!important } .tw-mg-t-05 { margin-top: .5rem!important } .tw-mg-t-1 { margin-top: 1rem!important } .tw-mg-t-2 { margin-top: 2rem!important } .tw-mg-t-3 { margin-top: 3rem!important } .tw-mg-t-4 { margin-top: 4rem!important } .tw-mg-t-5 { margin-top: 5rem!important } .tw-mg-t-6 { margin-top: 6rem!important } .tw-mg-t-7 { margin-top: 7rem!important } .tw-mg-t-8 { margin-top: 8rem!important } .tw-mg-t-9 { margin-top: 9rem!important } .tw-mg-t-10 { margin-top: 10rem!important } .tw-mg-t-auto { margin-top: auto!important } .tw-mg-r-0 { margin-right: 0!important } .tw-mg-r-05 { margin-right: .5rem!important } .tw-mg-r-1 { margin-right: 1rem!important } .tw-mg-r-2 { margin-right: 2rem!important } .tw-mg-r-3 { margin-right: 3rem!important } .tw-mg-r-4 { margin-right: 4rem!important } .tw-mg-r-5 { margin-right: 5rem!important } .tw-mg-r-6 { margin-right: 6rem!important } .tw-mg-r-7 { margin-right: 7rem!important } .tw-mg-r-8 { margin-right: 8rem!important } .tw-mg-r-9 { margin-right: 9rem!important } .tw-mg-r-10 { margin-right: 10rem!important } .tw-mg-r-auto { margin-right: auto!important } .tw-mg-b-0 { margin-bottom: 0!important } .tw-mg-b-05 { margin-bottom: .5rem!important } .tw-mg-b-1 { margin-bottom: 1rem!important } .tw-mg-b-2 { margin-bottom: 2rem!important } .tw-mg-b-3 { margin-bottom: 3rem!important } .tw-mg-b-4 { margin-bottom: 4rem!important } .tw-mg-b-5 { margin-bottom: 5rem!important } .tw-mg-b-6 { margin-bottom: 6rem!important } .tw-mg-b-7 { margin-bottom: 7rem!important } .tw-mg-b-8 { margin-bottom: 8rem!important } .tw-mg-b-9 { margin-bottom: 9rem!important } .tw-mg-b-10 { margin-bottom: 10rem!important } .tw-mg-b-auto { margin-bottom: auto!important } .tw-mg-l-0 { margin-left: 0!important } .tw-mg-l-05 { margin-left: .5rem!important } .tw-mg-l-1 { margin-left: 1rem!important } .tw-mg-l-2 { margin-left: 2rem!important } .tw-mg-l-3 { margin-left: 3rem!important } .tw-mg-l-4 { margin-left: 4rem!important } .tw-mg-l-5 { margin-left: 5rem!important } .tw-mg-l-6 { margin-left: 6rem!important } .tw-mg-l-7 { margin-left: 7rem!important } .tw-mg-l-8 { margin-left: 8rem!important } .tw-mg-l-9 { margin-left: 9rem!important } .tw-mg-l-10 { margin-left: 10rem!important } .tw-mg-l-auto { margin-left: auto!important } .tw-mg-y-0 { margin-top: 0!important; margin-bottom: 0!important } .tw-mg-y-05 { margin-top: .5rem!important; margin-bottom: .5rem!important } .tw-mg-y-1 { margin-top: 1rem!important; margin-bottom: 1rem!important } .tw-mg-y-2 { margin-top: 2rem!important; margin-bottom: 2rem!important } .tw-mg-y-3 { margin-top: 3rem!important; margin-bottom: 3rem!important } .tw-mg-y-4 { margin-top: 4rem!important; margin-bottom: 4rem!important } .tw-mg-y-5 { margin-top: 5rem!important; margin-bottom: 5rem!important } .tw-mg-y-6 { margin-top: 6rem!important; margin-bottom: 6rem!important } .tw-mg-y-7 { margin-top: 7rem!important; margin-bottom: 7rem!important } .tw-mg-y-8 { margin-top: 8rem!important; margin-bottom: 8rem!important } .tw-mg-y-9 { margin-top: 9rem!important; margin-bottom: 9rem!important } .tw-mg-y-10 { margin-top: 10rem!important; margin-bottom: 10rem!important } .tw-mg-y-auto { margin-top: auto!important; margin-bottom: auto!important } .tw-mg-x-0 { margin-left: 0!important; margin-right: 0!important } .tw-mg-x-05 { margin-left: .5rem!important; margin-right: .5rem!important } .tw-mg-x-1 { margin-left: 1rem!important; margin-right: 1rem!important } .tw-mg-x-2 { margin-left: 2rem!important; margin-right: 2rem!important } .tw-mg-x-3 { margin-left: 3rem!important; margin-right: 3rem!important } .tw-mg-x-4 { margin-left: 4rem!important; margin-right: 4rem!important } .tw-mg-x-5 { margin-left: 5rem!important; margin-right: 5rem!important } .tw-mg-x-6 { margin-left: 6rem!important; margin-right: 6rem!important } .tw-mg-x-7 { margin-left: 7rem!important; margin-right: 7rem!important } .tw-mg-x-8 { margin-left: 8rem!important; margin-right: 8rem!important } .tw-mg-x-9 { margin-left: 9rem!important; margin-right: 9rem!important } .tw-mg-x-10 { margin-left: 10rem!important; margin-right: 10rem!important } .tw-mg-x-auto { margin-left: auto!important; margin-right: auto!important } .tw-align-top { vertical-align: top!important } .tw-align-middle { vertical-align: middle!important } .tw-align-bottom { vertical-align: bottom!important } .tw-align-baseline { vertical-align: baseline!important } .tw-align-text-top { vertical-align: text-top!important } .tw-align-text-bottom { vertical-align: text-bottom!important } .tw-border { border: 1px solid hsla(0,0%,100%,.1)!important; border: var(--border-width-default) solid var(--color-border-base)!important } .tw-border-t { border-top: 1px solid hsla(0,0%,100%,.1)!important; border-top: var(--border-width-default) solid var(--color-border-base)!important } .tw-border-r { border-right: 1px solid hsla(0,0%,100%,.1)!important; border-right: var(--border-width-default) solid var(--color-border-base)!important } .tw-border-b { border-bottom: 1px solid hsla(0,0%,100%,.1)!important; border-bottom: var(--border-width-default) solid var(--color-border-base)!important } .tw-border-l { border-left: 1px solid hsla(0,0%,100%,.1)!important; border-left: var(--border-width-default) solid var(--color-border-base)!important } .tw-border--marked { border-left: 3px solid #9147ff!important; border-left: var(--border-width-marked) solid var(--color-border-brand)!important } .tw-border-radius-none { border-radius: 0!important; border-radius: var(--border-radius-none)!important } .tw-border-top-left-radius-none { border-top-left-radius: 0!important; border-top-left-radius: var(--border-radius-none)!important } .tw-border-top-right-radius-none { border-top-right-radius: 0!important; border-top-right-radius: var(--border-radius-none)!important } .tw-border-bottom-right-radius-none { border-bottom-right-radius: 0!important; border-bottom-right-radius: var(--border-radius-none)!important } .tw-border-bottom-left-radius-none { border-bottom-left-radius: 0!important; border-bottom-left-radius: var(--border-radius-none)!important } .tw-border-radius-small { border-radius: .2rem!important; border-radius: var(--border-radius-small)!important } .tw-border-top-left-radius-small { border-top-left-radius: .2rem!important; border-top-left-radius: var(--border-radius-small)!important } .tw-border-top-right-radius-small { border-top-right-radius: .2rem!important; border-top-right-radius: var(--border-radius-small)!important } .tw-border-bottom-right-radius-small { border-bottom-right-radius: .2rem!important; border-bottom-right-radius: var(--border-radius-small)!important } .tw-border-bottom-left-radius-small { border-bottom-left-radius: .2rem!important; border-bottom-left-radius: var(--border-radius-small)!important } .tw-border-radius-medium { border-radius: .4rem!important; border-radius: var(--border-radius-medium)!important } .tw-border-top-left-radius-medium { border-top-left-radius: .4rem!important; border-top-left-radius: var(--border-radius-medium)!important } .tw-border-top-right-radius-medium { border-top-right-radius: .4rem!important; border-top-right-radius: var(--border-radius-medium)!important } .tw-border-bottom-right-radius-medium { border-bottom-right-radius: .4rem!important; border-bottom-right-radius: var(--border-radius-medium)!important } .tw-border-bottom-left-radius-medium { border-bottom-left-radius: .4rem!important; border-bottom-left-radius: var(--border-radius-medium)!important } .tw-border-radius-large { border-radius: .6rem!important; border-radius: var(--border-radius-large)!important } .tw-border-top-left-radius-large { border-top-left-radius: .6rem!important; border-top-left-radius: var(--border-radius-large)!important } .tw-border-top-right-radius-large { border-top-right-radius: .6rem!important; border-top-right-radius: var(--border-radius-large)!important } .tw-border-bottom-right-radius-large { border-bottom-right-radius: .6rem!important; border-bottom-right-radius: var(--border-radius-large)!important } .tw-border-bottom-left-radius-large { border-bottom-left-radius: .6rem!important; border-bottom-left-radius: var(--border-radius-large)!important } .tw-border-radius-rounded { border-radius: 9000px!important; border-radius: var(--border-radius-rounded)!important } .tw-border-top-left-radius-rounded { border-top-left-radius: 9000px!important; border-top-left-radius: var(--border-radius-rounded)!important } .tw-border-top-right-radius-rounded { border-top-right-radius: 9000px!important; border-top-right-radius: var(--border-radius-rounded)!important } .tw-border-bottom-right-radius-rounded { border-bottom-right-radius: 9000px!important; border-bottom-right-radius: var(--border-radius-rounded)!important } .tw-border-bottom-left-radius-rounded { border-bottom-left-radius: 9000px!important; border-bottom-left-radius: var(--border-radius-rounded)!important } .tw-c-background-subscriber-stream-tag-default { background-color: #24094e!important; background-color: var(--color-background-subscriber-stream-tag-default)!important } .tw-c-background-subscriber-stream-tag-hover { background-color: #15052e!important; background-color: var(--color-background-subscriber-stream-tag-hover)!important } .tw-c-background-subscriber-stream-tag-active { background-color: #24094e!important; background-color: var(--color-background-subscriber-stream-tag-active)!important } .tw-c-background-body { background-color: #0e0e10!important; background-color: var(--color-background-body)!important } .tw-c-background-base { background-color: #18181b!important; background-color: var(--color-background-base)!important } .tw-c-background-alt { background-color: #1f1f23!important; background-color: var(--color-background-alt)!important } .tw-c-background-alt-2 { background-color: #26262c!important; background-color: var(--color-background-alt-2)!important } .tw-c-background-float { background-color: #1f1f23!important; background-color: var(--color-background-float)!important } .tw-c-background-accent { background-color: #772ce8!important; background-color: var(--color-background-accent)!important } .tw-c-background-accent-alt { background-color: #5c16c5!important; background-color: var(--color-background-accent-alt)!important } .tw-c-background-accent-alt-2 { background-color: #451093!important; background-color: var(--color-background-accent-alt-2)!important } .tw-c-background-placeholder { background-color: hsla(0,0%,100%,.05)!important; background-color: var(--color-background-placeholder)!important } .tw-c-background-overlay-placeholder { background-color: hsla(0,0%,100%,.15)!important; background-color: var(--color-background-overlay-placeholder)!important } .tw-c-background-live { background-color: #e91916!important; background-color: var(--color-background-live)!important } .tw-c-background-prime { background-color: #0e9bd8!important; background-color: var(--color-background-prime)!important } .tw-c-background-error { background-color: #ff4f4d!important; background-color: var(--color-background-error)!important } .tw-c-background-warn { background-color: #ffb31a!important; background-color: var(--color-background-warn)!important } .tw-c-background-success { background-color: #00db84!important; background-color: var(--color-background-success)!important } .tw-c-background-info { background-color: #528bff!important; background-color: var(--color-background-info)!important } .tw-c-background-brand { background-color: #bf94ff!important; background-color: var(--color-background-brand)!important } .tw-c-background-overlay-error { background-color: #ff8280!important; background-color: var(--color-background-overlay-error)!important } .tw-c-background-overlay-warn { background-color: #ffb31a!important; background-color: var(--color-background-overlay-warn)!important } .tw-c-background-overlay-success { background-color: #00f593!important; background-color: var(--color-background-overlay-success)!important } .tw-c-background-overlay-info { background-color: #a3c2ff!important; background-color: var(--color-background-overlay-info)!important } .tw-c-background-overlay-brand { background-color: #bf94ff!important; background-color: var(--color-background-overlay-brand)!important } .tw-c-background-image-selector-overlay { background-color: transparent!important; background-color: var(--color-background-image-selector-overlay)!important } .tw-c-background-tag-default { background-color: hsla(0,0%,100%,.15)!important; background-color: var(--color-background-tag-default)!important } .tw-c-background-tag-hover { background-color: hsla(0,0%,100%,.2)!important; background-color: var(--color-background-tag-hover)!important } .tw-c-background-tag-active { background-color: hsla(0,0%,100%,.15)!important; background-color: var(--color-background-tag-active)!important } .tw-c-background-tooltip { background-color: #fff!important; background-color: var(--color-background-tooltip)!important } .tw-c-background-overlay { background-color: rgba(0,0,0,.6)!important; background-color: var(--color-background-overlay-alt)!important } .tw-c-background-range { background-color: hsla(0,0%,100%,.2)!important; background-color: var(--color-background-range)!important } .tw-c-background-range-fill { background-color: #a970ff!important; background-color: var(--color-background-range-fill)!important } .tw-c-background-range-overlay { background-color: hsla(0,0%,100%,.3)!important; background-color: var(--color-background-range-overlay)!important } .tw-c-background-range-overlay-fill { background-color: #fff!important; background-color: var(--color-background-range-overlay-fill)!important } .tw-c-background-top-nav { background-color: #451093!important; background-color: var(--color-background-top-nav)!important } .tw-c-background-chat { background-color: #040109!important; background-color: var(--color-background-chat)!important } .tw-c-background-chat-alt { background-color: #15052e!important; background-color: var(--color-background-chat-alt)!important } .tw-c-background-chat-header { background-color: #0d031c!important; background-color: var(--color-background-chat-header)!important } .tw-c-background-chat-line-mentioning { background-color: #323239!important; background-color: var(--color-background-chat-line-mentioning)!important } .tw-c-background-chat-line-mentioned { background-color: #f7f7f8!important; background-color: var(--color-background-chat-line-mentioned)!important } .tw-c-background-modal-overlay { background-color: rgba(0,0,0,.85)!important; background-color: var(--color-background-modal-overlay)!important } .tw-c-background-modal { background-color: #15052e!important; background-color: var(--color-background-modal)!important } .tw-c-background-graph { background-color: #0d031c!important; background-color: var(--color-background-graph)!important } .tw-c-background-graph-fill { background-color: #772ce8!important; background-color: var(--color-background-graph-fill)!important } .tw-c-background-scrollbar { background-color: #1f1f23!important; background-color: var(--color-background-scrollbar)!important } .tw-c-border-subscriber-stream-tag { border-color: #330c6e!important; border-color: var(--color-border-subscriber-stream-tag)!important } .tw-c-border-base { border-color: hsla(0,0%,100%,.1)!important; border-color: var(--color-border-base)!important } .tw-c-border-region { border-color: #000!important; border-color: var(--color-border-region)!important } .tw-c-border-overlay { border-color: hsla(0,0%,100%,.25)!important; border-color: var(--color-border-overlay)!important } .tw-c-border-alert { border-color: #e91916!important; border-color: var(--color-border-alert)!important } .tw-c-border-error { border-color: #e91916!important; border-color: var(--color-border-error)!important } .tw-c-border-warn { border-color: #ffb31a!important; border-color: var(--color-border-warn)!important } .tw-c-border-success { border-color: #00db84!important; border-color: var(--color-border-success)!important } .tw-c-border-info { border-color: #528bff!important; border-color: var(--color-border-info)!important } .tw-c-border-brand { border-color: #9147ff!important; border-color: var(--color-border-brand)!important } .tw-c-border-error-decorative { border-color: #ff4f4d!important; border-color: var(--color-border-error-decorative)!important } .tw-c-border-warn-decorative { border-color: #ffb31a!important; border-color: var(--color-border-warn-decorative)!important } .tw-c-border-success-decorative { border-color: #00db84!important; border-color: var(--color-border-success-decorative)!important } .tw-c-border-info-decorative { border-color: #528bff!important; border-color: var(--color-border-info-decorative)!important } .tw-c-border-brand-decorative { border-color: #a970ff!important; border-color: var(--color-border-brand-decorative)!important } .tw-c-border-overlay-error { border-color: #ff4f4d!important; border-color: var(--color-border-overlay-error)!important } .tw-c-border-overlay-warn { border-color: #ffb31a!important; border-color: var(--color-border-overlay-warn)!important } .tw-c-border-overlay-success { border-color: #00db84!important; border-color: var(--color-border-overlay-success)!important } .tw-c-border-overlay-info { border-color: #528bff!important; border-color: var(--color-border-overlay-info)!important } .tw-c-border-overlay-brand { border-color: #fff!important; border-color: var(--color-border-overlay-brand)!important } .tw-c-border-overlay-error-decorative { border-color: #ff4f4d!important; border-color: var(--color-border-overlay-error-decorative)!important } .tw-c-border-overlay-warn-decorative { border-color: #ffb31a!important; border-color: var(--color-border-overlay-warn-decorative)!important } .tw-c-border-overlay-success-decorative { border-color: #00db84!important; border-color: var(--color-border-overlay-success-decorative)!important } .tw-c-border-overlay-info-decorative { border-color: #528bff!important; border-color: var(--color-border-overlay-info-decorative)!important } .tw-c-border-overlay-brand-decorative { border-color: #a970ff!important; border-color: var(--color-border-overlay-brand-decorative)!important } .tw-c-border-image-selector { border-color: rgba(0,0,0,.3)!important; border-color: var(--color-border-image-selector)!important } .tw-c-border-image-selector-overlay { border-color: hsla(0,0%,100%,.3)!important; border-color: var(--color-border-image-selector-overlay)!important } .tw-c-border-image-selector-overlay-selected { border-color: #fff!important; border-color: var(--color-border-image-selector-overlay-selected)!important } .tw-c-border-range-handle { border-color: #a970ff!important; border-color: var(--color-border-range-handle)!important } .tw-c-border-range-handle-focus { border-color: #fff!important; border-color: var(--color-border-range-handle-focus)!important } .tw-c-border-tag { border-color: hsla(0,0%,100%,.15)!important; border-color: var(--color-border-tag)!important } .tw-c-border-whisper-incoming { border-color: #a970ff!important; border-color: var(--color-border-whisper-incoming)!important } .tw-c-border-whisper-outgoing { border-color: #adadb8!important; border-color: var(--color-border-whisper-outgoing)!important } .tw-c-border-spinner { border-color: hsla(0,0%,100%,.15)!important; border-color: var(--color-border-spinner)!important } .tw-c-border-spinner-fill { border-color: #dedee3!important; border-color: var(--color-border-spinner-fill)!important } .tw-c-border-quote { border-color: #3b3b44!important; border-color: var(--color-border-quote)!important } .tw-c-text-base { color: #efeff1!important; color: var(--color-text-base)!important } .tw-c-text-alt { color: #dedee3!important; color: var(--color-text-alt)!important } .tw-c-text-alt-2 { color: #adadb8!important; color: var(--color-text-alt-2)!important } .tw-c-text-link { color: #a970ff!important; color: var(--color-text-link)!important } .tw-c-text-link-hover { color: #a970ff!important; color: var(--color-text-link-hover)!important } .tw-c-text-link-active { color: #a970ff!important; color: var(--color-text-link-active)!important } .tw-c-text-link-focus { color: #a970ff!important; color: var(--color-text-link-focus)!important } .tw-c-text-link-visited { color: #a970ff!important; color: var(--color-text-link-visited)!important } .tw-c-text-live { color: #ff8280!important; color: var(--color-text-live)!important } .tw-c-text-alert { color: #ff8280!important; color: var(--color-text-alert)!important } .tw-c-text-prime { color: #0e9bd8!important; color: var(--color-text-prime)!important } .tw-c-text-error { color: #ff8280!important; color: var(--color-text-error)!important } .tw-c-text-warn { color: #e69900!important; color: var(--color-text-warn)!important } .tw-c-text-success { color: #00c274!important; color: var(--color-text-success)!important } .tw-c-text-info { color: #7aa7ff!important; color: var(--color-text-info)!important } .tw-c-text-brand { color: #9147ff!important; color: var(--color-text-brand)!important } .tw-c-text-overlay-error { color: #ff8280!important; color: var(--color-text-overlay-error)!important } .tw-c-text-overlay-warn { color: #e69900!important; color: var(--color-text-overlay-warn)!important } .tw-c-text-overlay-success { color: #00c274!important; color: var(--color-text-overlay-success)!important } .tw-c-text-overlay-info { color: #7aa7ff!important; color: var(--color-text-overlay-info)!important } .tw-c-text-overlay-brand { color: #fff!important; color: var(--color-text-overlay-brand)!important } .tw-c-text-accessible-red { color: #ff8280!important; color: var(--color-text-accessible-red)!important } .tw-c-text-accessible-green { color: #00c274!important; color: var(--color-text-accessible-green)!important } .tw-c-text-accessible-blue { color: #7aa7ff!important; color: var(--color-text-accessible-blue)!important } .tw-c-text-badge-alt { color: #000!important; color: var(--color-text-badge-alt)!important } .tw-c-text-badge-alt-2 { color: #000!important; color: var(--color-text-badge-alt-2)!important } .tw-c-text-hint { color: #848494!important; color: var(--color-text-hint)!important } .tw-c-text-tag { color: hsla(0,0%,100%,.7)!important; color: var(--color-text-tag)!important } .tw-c-text-tooltip { color: #040109!important; color: var(--color-text-tooltip)!important } .tw-c-text-overlay { color: #fff!important; color: var(--color-text-overlay)!important } .tw-c-text-overlay-alt { color: hsla(0,0%,100%,.85)!important; color: var(--color-text-overlay-alt)!important } .tw-c-text-overlay-link { color: #fff!important; color: var(--color-text-overlay-link)!important } .tw-c-text-overlay-link-hover { color: #e3d1ff!important; color: var(--color-text-overlay-link-hover)!important } .tw-c-text-overlay-link-active { color: #e3d1ff!important; color: var(--color-text-overlay-link-active)!important } .tw-c-text-overlay-link-focus { color: #e3d1ff!important; color: var(--color-text-overlay-link-focus)!important } .tw-c-text-overlay-link-visited { color: #fff!important; color: var(--color-text-overlay-link-visited)!important } .tw-c-text-chat-line-mentioning { color: #fff!important; color: var(--color-text-chat-line-mentioning)!important } .tw-c-text-chat-line-mentioned { color: #18181b!important; color: var(--color-text-chat-line-mentioned)!important } .tw-c-text-channel-status-text-indicator-hosting { color: #000!important; color: var(--color-text-channel-status-text-indicator-hosting)!important } .tw-c-text-channel-status-text-indicator-rerun { color: #000!important; color: var(--color-text-channel-status-text-indicator-rerun)!important } .tw-c-text-channel-status-text-indicator-offline { color: #000!important; color: var(--color-text-channel-status-text-indicator-offline)!important } .tw-c-text-channel-status-text-indicator-hosting-overlay { color: #000!important; color: var(--color-text-channel-status-text-indicator-hosting-overlay)!important } .tw-c-text-channel-status-text-indicator-rerun-overlay { color: #000!important; color: var(--color-text-channel-status-text-indicator-rerun-overlay)!important } .tw-c-text-channel-status-text-indicator-offline-overlay { color: #000!important; color: var(--color-text-channel-status-text-indicator-offline-overlay)!important } .tw-c-text-inherit { color: inherit } .tw-c-background-inherit { background-color: inherit } .tw-elevation-1 { box-shadow: 0 1px 2px rgba(0,0,0,.9),0 0 2px rgba(0,0,0,.9)!important; box-shadow: var(--shadow-elevation-1)!important } .tw-elevation-2 { box-shadow: 0 4px 8px rgba(0,0,0,.4),0 0 4px rgba(0,0,0,.4)!important; box-shadow: var(--shadow-elevation-2)!important } .tw-elevation-3 { box-shadow: 0 6px 16px rgba(0,0,0,.5),0 0 4px rgba(0,0,0,.4)!important; box-shadow: var(--shadow-elevation-3)!important } .tw-elevation-4 { box-shadow: 0 12px 32px rgba(0,0,0,.5),0 0 8px rgba(0,0,0,.4)!important; box-shadow: var(--shadow-elevation-4)!important } .tw-elevation-5 { box-shadow: 0 32px 64px rgba(0,0,0,.6),0 0 16px rgba(0,0,0,.4)!important; box-shadow: var(--shadow-elevation-5)!important } .tw-font-size-1 { font-size: 5.4rem!important; font-size: var(--font-size-1)!important } .tw-font-size-2 { font-size: 3.6rem!important; font-size: var(--font-size-2)!important } .tw-font-size-3 { font-size: 2.4rem!important; font-size: var(--font-size-3)!important } .tw-font-size-4 { font-size: 1.8rem!important; font-size: var(--font-size-4)!important } .tw-font-size-5 { font-size: 1.4rem!important; font-size: var(--font-size-5)!important } .tw-font-size-6 { font-size: 1.3rem!important; font-size: var(--font-size-6)!important } .tw-font-size-7 { font-size: 1.2rem!important; font-size: var(--font-size-7)!important } .tw-font-size-8 { font-size: 1.2rem!important; font-size: var(--font-size-8)!important } .tw-font-size-base { font-size: 1.3rem!important; font-size: var(--font-size-base)!important } .tw-button { border-radius: .4rem; border-radius: var(--border-radius-medium); background-color: #9147ff; background-color: var(--color-background-button-primary-default); color: #fff; color: var(--color-text-button); height: 3rem; height: var(--button-size-default); position: relative; justify-content: center; font-size: 1.3rem; font-size: var(--font-size-6); line-height: 2rem; vertical-align: middle; user-select: none } .tw-button[data-focus-visible-added],.tw-root--hover .tw-button:hover:not(.tw-button--disabled) { background-color: #772ce8; background-color: var(--color-background-button-primary-hover); color: #fff; color: var(--color-text-button); text-decoration: none } .tw-button:active:not(.tw-button--disabled),.tw-button:hover:active:not(.tw-button--disabled) { background-color: #5c16c5; background-color: var(--color-background-button-primary-active); color: #fff; color: var(--color-text-button); box-shadow: 0 0 6px 0 #772ce8; box-shadow: var(--shadow-button-active); text-decoration: none } .tw-button--secondary[data-focus-visible-added],.tw-root--hover .tw-button--secondary:hover:not(.tw-button--disabled) { background-color: hsla(0,0%,100%,.2); background-color: var(--color-background-button-secondary-hover) } .tw-button__text { position: relative; padding: .5rem 1rem; padding: var(--button-padding-y) var(--button-padding-x); text-align: center } .tw-button--secondary { background-clip: padding-box; background-color: hsla(0,0%,100%,.15); background-color: var(--color-background-button-secondary-default); color: #efeff1; color: var(--color-text-button-secondary) } .tw-button--secondary:active:not(.tw-button--disabled),.tw-button--secondary:hover:active:not(.tw-button--disabled) { background-color: hsla(0,0%,100%,.15); background-color: var(--color-background-button-secondary-active); box-shadow: 0 0 6px 0 #772ce8; box-shadow: var(--shadow-button-active) } .tw-button--alert { background-color: #e91916; background-color: var(--color-background-button-alert); color: #fff; color: var(--color-text-button-alert) } .tw-button--alert[data-focus-visible-added],.tw-root--hover .tw-button--alert:hover:not(.tw-button--disabled) { background-color: #bb1411; background-color: var(--color-background-button-alert-hover); color: #fff; color: var(--color-text-button-alert-hover) } .tw-button--alert:active:not(.tw-button--disabled),.tw-button--alert:hover:active:not(.tw-button--disabled) { background-color: #e91916; background-color: var(--color-background-button-alert-active); color: #fff; color: var(--color-text-button-alert-active) } .tw-button--alert.tw-button--disabled { background-color: hsla(0,0%,100%,.15); background-color: var(--color-background-button-disabled); color: hsla(0,0%,100%,.5); color: var(--color-text-button-disabled) } .tw-button--success { background-color: #00f593; background-color: var(--color-background-button-success); color: #000; color: var(--color-text-button-success) } .tw-button--success[data-focus-visible-added],.tw-root--hover .tw-button--success:hover:not(.tw-button--disabled) { background-color: #00ad96; background-color: var(--color-background-button-success-hover); color: #000; color: var(--color-text-button-success-hover) } .tw-button--success:active:not(.tw-button--disabled),.tw-button--success:hover:active:not(.tw-button--disabled) { background-color: #00f593; background-color: var(--color-background-button-success-active); color: #000; color: var(--color-text-button-success-active) } .tw-button--success.tw-button--disabled { background-color: hsla(0,0%,100%,.15); background-color: var(--color-background-button-disabled); color: hsla(0,0%,100%,.5); color: var(--color-text-button-disabled) } .tw-button--status { transition-duration: .1s; transition-property: background-color,border,text; transition-timing-function: ease } .tw-button--status .tw-button__alert-text,.tw-button--status .tw-button__primary-text { display: block } .tw-button--status.tw-button--disabled .tw-button__alert-icon,.tw-button--status.tw-button--disabled .tw-button__alert-text,.tw-button-icon--status:not(.tw-button-icon--disabled).tw-button-icon--disabled .tw-button-icon__alert-icon,.tw-button-icon--status:not(:disabled).tw-button-icon--disabled .tw-button-icon__alert-icon { display: none } .tw-button--status .tw-button__alert-text { margin-top: -2rem; opacity: 0 } .tw-button--status .tw-button__alert-icon { position: relative; left: -2rem; margin-right: -2rem; opacity: 0 } .tw-root--hover .tw-button--status:hover:not(.tw-button--disabled) { background-color: #bb1411; background-color: var(--color-background-button-status-hover); color: #fff; color: var(--color-text-button-status-hover) } .tw-button--status[data-focus-visible-added] { background-color: #e91916; background-color: var(--color-background-button-status-active); color: #fff; color: var(--color-text-button-status-active) } .tw-button--text[data-focus-visible-added],.tw-root--hover .tw-button--text:hover:not(.tw-button--disabled) { background-color: hsla(0,0%,100%,.2); background-color: var(--color-background-button-text-hover) } .tw-button--status.tw-button--disabled .tw-button__primary-icon,.tw-button--status.tw-button--disabled .tw-button__primary-text,.tw-button--status:active .tw-button__alert-icon,.tw-button--status:active .tw-button__alert-text,.tw-button--status[data-focus-visible-added] .tw-button__alert-icon,.tw-button--status[data-focus-visible-added] .tw-button__alert-text,.tw-root--hover .tw-button--status:hover:not(.tw-button--disabled) .tw-button__alert-icon,.tw-root--hover .tw-button--status:hover:not(.tw-button--disabled) .tw-button__alert-text { opacity: 1 } .tw-button--state-loading .tw-button__icon,.tw-button--state-loading .tw-button__num-block,.tw-button--state-loading .tw-button__text,.tw-button--state-success .tw-button__icon,.tw-button--state-success .tw-button__num-block,.tw-button--state-success .tw-button__text,.tw-button--status:active .tw-button__primary-icon,.tw-button--status:active .tw-button__primary-text,.tw-button--status[data-focus-visible-added] .tw-button__primary-icon,.tw-button--status[data-focus-visible-added] .tw-button__primary-text,.tw-root--hover .tw-button--status:hover:not(.tw-button--disabled) .tw-button__primary-icon,.tw-root--hover .tw-button--status:hover:not(.tw-button--disabled) .tw-button__primary-text { opacity: 0 } .tw-button--text { background-color: transparent; background-color: var(--color-background-button-text-default); color: #a970ff; color: var(--color-text-button-text) } .tw-button--text:active:not(.tw-button--disabled),.tw-button--text:hover:active:not(.tw-button--disabled) { background-color: hsla(0,0%,100%,.15); background-color: var(--color-background-button-text-active); box-shadow: 0 0 6px 0 #772ce8; box-shadow: var(--shadow-button-active) } .tw-button--text.tw-button--disabled { color: hsla(0,0%,100%,.5); color: var(--color-text-button-disabled) } .tw-button__icon,.tw-button__loading-spinner,.tw-button__num-block,.tw-button__succcess-icon,.tw-button__text { transition-duration: .2s; transition-property: opacity } .tw-button__loading-spinner,.tw-button__success-icon { top: 50%; left: 50%; transform: translate(-50%,-50%); opacity: 0 } .tw-button--state-loading .tw-button__loading-spinner,.tw-button--state-success .tw-button__success-icon { opacity: 1 } .tw-button--disabled,.tw-core-button--disabled { opacity: .5 } .tw-button__icon { display: inline-flex; padding: .4rem .8rem } .tw-button--purchase,.tw-button__icon--left { padding-right: 0 } .tw-button__icon--right { padding-left: 0 } .tw-button__icon+.tw-button__text { padding-left: .5rem } .tw-button--dropmenu .tw-button__text { flex-grow: 1; text-align: left } .tw-button--small { border-radius: .2rem; border-radius: var(--border-radius-small); font-size: 1.2rem; font-size: var(--font-size-7); line-height: 1.4rem; height: 2.4rem; height: var(--button-size-small) } .tw-button--small .tw-button__alert-text { margin-top: -1.4rem } .tw-button--small .tw-button__alert-icon { left: -1.4rem; margin-right: -1.4rem } .tw-button--small .tw-button__num-block { border-top-right-radius: .2rem; border-top-right-radius: var(--border-radius-small); border-bottom-right-radius: .2rem; border-bottom-right-radius: var(--border-radius-small) } .tw-button--large { border-radius: .6rem; border-radius: var(--border-radius-large); font-size: 1.4rem; font-size: var(--font-size-5); line-height: 2.6rem; height: 3.6rem; height: var(--button-size-large) } .tw-button--large .tw-button__alert-text { margin-top: -2.6rem } .tw-button--large .tw-button__alert-icon { left: -2.6rem; margin-right: -2.6rem } .tw-button--large .tw-button__num-block { border-top-right-radius: .6rem; border-top-right-radius: var(--border-radius-large); border-bottom-right-radius: .6rem; border-bottom-right-radius: var(--border-radius-large) } .tw-button--full-width { width: 100% } .tw-button--purchase .tw-button__text { flex-grow: 1 } .tw-button__num-block { background-color: rgba(0,0,0,.25); background-color: var(--color-background-button-purchase); padding: .5rem 1rem; padding: var(--button-padding-y) var(--button-padding-x); border-top-right-radius: .4rem; border-top-right-radius: var(--border-radius-medium); border-bottom-right-radius: .4rem; border-bottom-right-radius: var(--border-radius-medium) } .tw-button--overlay.tw-button--disabled { background-color: #fff; background-color: var(--color-background-button-overlay-primary-default); color: #000; color: var(--color-text-button-overlay-primary) } .tw-button-icon { border-radius: .4rem; border-radius: var(--border-radius-medium); background-color: transparent; background-color: var(--color-background-button-text-default); color: #efeff1; color: var(--color-fill-button-icon); height: 3rem; height: var(--button-size-default); width: 3rem; width: var(--button-size-default); justify-content: center; user-select: none } .tw-button-icon:not(.tw-button-icon--disabled)[data-focus-visible-added],.tw-button-icon:not(:disabled)[data-focus-visible-added],.tw-root--hover .tw-button-icon:not(.tw-button-icon--disabled):hover,.tw-root--hover .tw-button-icon:not(:disabled):hover,.tw-root--touch .tw-button-icon:not(.tw-button-icon--disabled):hover,.tw-root--touch .tw-button-icon:not(:disabled):hover { background-color: hsla(0,0%,100%,.2); background-color: var(--color-background-button-text-hover); color: #efeff1; color: var(--color-fill-button-icon-hover) } .tw-button-icon:not(.tw-button-icon--disabled)[data-focus-visible-added],.tw-button-icon:not(:disabled)[data-focus-visible-added] { box-shadow: 0 0 6px 0 #772ce8; box-shadow: var(--shadow-button-focus) } .tw-button-icon:not(.tw-button-icon--disabled):active,.tw-button-icon:not(:disabled):active { background-color: hsla(0,0%,100%,.15); background-color: var(--color-background-button-text-active); color: #efeff1; color: var(--color-fill-button-icon-active) } .tw-button-icon--disabled,.tw-button-icon:disabled { opacity: .5; cursor: not-allowed } .tw-button-icon--alert { background-color: #e91916; background-color: var(--color-background-button-alert); color: #fff; color: var(--color-text-button-alert) } .tw-button-icon--alert:not(.tw-button-icon--disabled)[data-focus-visible-added],.tw-button-icon--alert:not(:disabled)[data-focus-visible-added],.tw-root--hover .tw-button-icon--alert:not(.tw-button-icon--disabled):hover,.tw-root--hover .tw-button-icon--alert:not(:disabled):hover { background-color: #bb1411; background-color: var(--color-background-button-alert-hover); color: #fff; color: var(--color-text-button-alert-hover) } .tw-button-icon--alert:not(.tw-button-icon--disabled):active,.tw-button-icon--alert:not(:disabled):active { background-color: #e91916; background-color: var(--color-background-button-alert-active); color: #fff; color: var(--color-text-button-alert-active) } .tw-button-icon--alert.tw-button-icon--disabled,.tw-button-icon--alert:disabled { background-color: hsla(0,0%,100%,.15); background-color: var(--color-background-button-disabled) } .tw-button-icon--success { background-color: #00f593; background-color: var(--color-background-button-success); color: #000; color: var(--color-text-button-success) } .tw-button-icon--success:not(.tw-button-icon--disabled)[data-focus-visible-added],.tw-button-icon--success:not(:disabled)[data-focus-visible-added],.tw-root--hover .tw-button-icon--success:not(.tw-button-icon--disabled):hover,.tw-root--hover .tw-button-icon--success:not(:disabled):hover { background-color: #00ad96; background-color: var(--color-background-button-success-hover); color: #000; color: var(--color-text-button-success-hover) } .tw-button-icon--success:not(.tw-button-icon--disabled):active,.tw-button-icon--success:not(:disabled):active { background-color: #00f593; background-color: var(--color-background-button-success-active); color: #000; color: var(--color-text-button-success-active) } .tw-button-icon--success.tw-button-icon--disabled,.tw-button-icon--success:disabled { background-color: hsla(0,0%,100%,.15); background-color: var(--color-background-button-disabled) } .tw-button-icon--overlay { border: 1px solid transparent; border: var(--border-width-default) solid transparent; background-color: transparent; background-color: var(--color-background-button-icon-overlay-default); color: #fff; color: var(--color-text-button-overlay) } .tw-root--hover .tw-button-icon--overlay:not(.tw-button-icon--disabled):hover,.tw-root--hover .tw-button-icon--overlay:not(:disabled):hover { background-color: hsla(0,0%,100%,.2); background-color: var(--color-background-button-icon-overlay-hover); color: #fff; color: var(--color-text-button-overlay-hover) } .tw-button-icon--overlay:not(.tw-button-icon--disabled)[data-focus-visible-added],.tw-button-icon--overlay:not(:disabled)[data-focus-visible-added] { background-color: hsla(0,0%,100%,.2); background-color: var(--color-background-button-icon-overlay-hover); color: #fff; color: var(--color-text-button-overlay-focus); box-shadow: 0 0 6px 0 hsla(0,0%,100%,.3); box-shadow: var(--shadow-button-overlay-focus) } .tw-button-icon--overlay:not(.tw-button-icon--disabled):active,.tw-button-icon--overlay:not(:disabled):active { background-color: hsla(0,0%,100%,.15); background-color: var(--color-background-button-icon-overlay-active); color: #fff; color: var(--color-text-button-overlay-active); box-shadow: 0 0 6px 0 hsla(0,0%,100%,.3); box-shadow: var(--shadow-button-overlay-active) } .tw-button-icon--status { transition-duration: .12s; transition-property: background,border,text; transition-timing-function: ease } .tw-button-icon--status .tw-button-icon__alert-icon { position: relative; left: -2rem; margin-right: -2rem; opacity: 0 } .tw-root--hover .tw-button-icon--status:not(.tw-button-icon--disabled):hover,.tw-root--hover .tw-button-icon--status:not(:disabled):hover { background-color: #bb1411; background-color: var(--color-background-button-status-hover); color: #fff; color: var(--color-text-button-status-hover) } .tw-button-icon--status:not(.tw-button-icon--disabled)[data-focus-visible-added],.tw-button-icon--status:not(:disabled)[data-focus-visible-added] { background-color: #bb1411; background-color: var(--color-background-button-status-focus); color: #fff; color: var(--color-text-button-status-focus) } .tw-button-icon--status:not(.tw-button-icon--disabled):active,.tw-button-icon--status:not(:disabled):active { background-color: #e91916; background-color: var(--color-background-button-status-active); color: #fff; color: var(--color-text-button-status-active) } .tw-button-icon--status:not(.tw-button-icon--disabled).tw-button-icon--disabled .tw-button-icon__primary-icon,.tw-button-icon--status:not(.tw-button-icon--disabled):active .tw-button-icon__alert-icon,.tw-button-icon--status:not(.tw-button-icon--disabled):hover .tw-button-icon__alert-icon,.tw-button-icon--status:not(.tw-button-icon--disabled)[data-focus-visible-added] .tw-button-icon__alert-icon,.tw-button-icon--status:not(:disabled).tw-button-icon--disabled .tw-button-icon__primary-icon,.tw-button-icon--status:not(:disabled):active .tw-button-icon__alert-icon,.tw-button-icon--status:not(:disabled):hover .tw-button-icon__alert-icon,.tw-button-icon--status:not(:disabled)[data-focus-visible-added] .tw-button-icon__alert-icon { opacity: 1 } .tw-button-icon--status:not(.tw-button-icon--disabled):active .tw-button-icon__primary-icon,.tw-button-icon--status:not(.tw-button-icon--disabled):hover .tw-button-icon__primary-icon,.tw-button-icon--status:not(.tw-button-icon--disabled)[data-focus-visible-added] .tw-button-icon__primary-icon,.tw-button-icon--status:not(:disabled):active .tw-button-icon__primary-icon,.tw-button-icon--status:not(:disabled):hover .tw-button-icon__primary-icon,.tw-button-icon--status:not(:disabled)[data-focus-visible-added] .tw-button-icon__primary-icon { opacity: 0 } .tw-button-icon__icon { display: flex; align-items: center; justify-content: center } .tw-button-icon--small { border-radius: .2rem; border-radius: var(--border-radius-small); height: 2.4rem; height: var(--button-size-small); width: 2.4rem; width: var(--button-size-small) } .tw-button-icon--small .tw-button-icon__icon { padding: .3rem } .tw-button-icon--small .tw-button-icon__alert-icon { left: -1.6rem; margin-right: -1.6rem } .tw-button-icon--large { border-radius: .6rem; border-radius: var(--border-radius-large); height: 3.6rem; height: var(--button-size-large); width: 3.6rem; width: var(--button-size-large) } .tw-button-icon--large .tw-button-icon__icon { padding: .5rem } .tw-button-icon--large .tw-button-icon__alert-icon { left: -2.4rem; margin-right: -2.4rem } .tw-core-button { font-size: 1.3rem; font-size: var(--button-text-default); -webkit-user-select: none; -ms-user-select: none; user-select: none; height: 3rem; height: var(--button-size-default) } .tw-core-button:hover { text-decoration: none } .tw-core-button--small { font-size: 1.2rem; font-size: var(--button-text-small); height: 2.4rem; height: var(--button-size-small) } .tw-core-button--large { font-size: 1.4rem; font-size: var(--button-text-large); height: 3.6rem; height: var(--button-size-large) } .tw-core-button--primary { background-color: #9147ff; background-color: var(--color-background-button-primary-default); color: #fff; color: var(--color-text-button-primary) } .tw-core-button--primary[data-focus-visible-added],.tw-root--hover .tw-core-button--primary:hover:not(.tw-core-button--disabled) { background-color: #772ce8; background-color: var(--color-background-button-primary-hover); color: #fff; color: var(--color-text-button-primary) } .tw-core-button--primary[data-focus-visible-added] { box-shadow: 0 0 6px 0 #772ce8; box-shadow: var(--shadow-button-focus) } .tw-core-button--primary:active:not(.tw-core-button--disabled),.tw-core-button--primary:hover:active:not(.tw-core-button--disabled) { background-color: #5c16c5; background-color: var(--color-background-button-primary-active); color: #fff; color: var(--color-text-button-primary) } .tw-core-button--primary.tw-core-button--disabled { background-color: hsla(0,0%,100%,.15); background-color: var(--color-background-button-disabled); color: hsla(0,0%,100%,.5); color: var(--color-text-button-disabled) } .tw-core-button--primary.tw-core-button--overlay { background-color: #fff; background-color: var(--color-background-button-overlay-primary-default); color: #000; color: var(--color-text-button-overlay-primary) } .tw-core-button--primary.tw-core-button--overlay[data-focus-visible-added],.tw-root--hover .tw-core-button--primary.tw-core-button--overlay:hover:not(.tw-core-button--disabled) { background-color: hsla(0,0%,100%,.9); background-color: var(--color-background-button-overlay-primary-hover); color: #000; color: var(--color-text-button-overlay-primary) } .tw-core-button--primary.tw-core-button--overlay[data-focus-visible-added] { box-shadow: 0 0 6px 0 hsla(0,0%,100%,.3); box-shadow: var(--shadow-button-overlay-focus) } .tw-core-button--primary.tw-core-button--overlay:active:not(.tw-core-button--disabled),.tw-core-button--primary.tw-core-button--overlay:hover:active:not(.tw-core-button--disabled) { background-color: hsla(0,0%,100%,.85); background-color: var(--color-background-button-overlay-primary-active); color: #000; color: var(--color-text-button-overlay-primary); box-shadow: 0 0 6px 0 hsla(0,0%,100%,.3); box-shadow: var(--shadow-button-overlay-active) } .tw-core-button-label { padding: 0 1rem; padding: 0 var(--button-padding-x) } .tw-core-button-label--icon { padding-left: .8rem; padding-left: calc(var(--button-padding-x) - .2rem) } .tw-core-button-label--dropdown { padding-right: .8rem; padding-right: calc(var(--button-padding-x) - .2rem) }