:root {
    --header-height: 60px;
    --footer-height: 40px;
    --color-win: #22c55e;
    --color-loss: #ef4444
}

@keyframes slideDownAndFade {
    0% {
        opacity: 0;
        transform: translateY(-2px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes slideLeftAndFade {
    0% {
        opacity: 0;
        transform: translate(2px)
    }

    to {
        opacity: 1;
        transform: translate(0)
    }
}

@keyframes slideUpAndFade {
    0% {
        opacity: 0;
        transform: translateY(2px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes slideRightAndFade {
    0% {
        opacity: 0;
        transform: translate(-2px)
    }

    to {
        opacity: 1;
        transform: translate(0)
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(10px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
        transform: translateY(0)
    }

    to {
        opacity: 0;
        transform: translateY(10px)
    }
}

@keyframes grid-slideUp {
    0% {
        transform: translateY(0)
    }

    to {
        transform: translateY(-50%)
    }
}

@keyframes grid-slideDown {
    0% {
        transform: translateY(-50%)
    }

    to {
        transform: translateY(0)
    }
}

@keyframes slideUp {
    0% {
        height: var(--radix-collapsible-content-height)
    }

    to {
        height: 0
    }
}

@keyframes slideDown {
    0% {
        height: 0
    }

    to {
        height: var(--radix-collapsible-content-height)
    }
}

@keyframes slideLeft {
    0% {
        opacity: 0;
        transform: translate(30px)
    }

    to {
        opacity: 1;
        transform: translate(0)
    }
}

@keyframes slideRight {
    0% {
        opacity: 0;
        transform: translate(-30px)
    }

    to {
        opacity: 1;
        transform: translate(0)
    }
}

@keyframes slideIn {
    0% {
        transform: translate(100%)
    }

    to {
        transform: translate(0)
    }
}

@keyframes slideOut {
    0% {
        transform: translate(0)
    }

    to {
        transform: translate(100%)
    }
}

@keyframes slideInLeft {
    0% {
        opacity: 0;
        transform: translate(-10%)
    }

    to {
        opacity: 1;
        transform: translate(0)
    }
}

@keyframes slideInRight {
    0% {
        opacity: 0;
        transform: translate(10%)
    }

    to {
        opacity: 1;
        transform: translate(0)
    }
}

@keyframes slideInTop {
    0% {
        opacity: 0;
        transform: translateY(-10%)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes slideInBottom {
    0% {
        opacity: 0;
        transform: translateY(10%)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes marquee {
    0% {
        transform: translate(100%)
    }

    to {
        transform: translate(-100%)
    }
}

@keyframes row-appear {
    0% {
        opacity: 0;
        transform: translateY(8px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

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

@keyframes pulse-glow {
    0% {
        box-shadow: 0 0 5px #3b82f680
    }

    50% {
        box-shadow: 0 0 15px #3b82f6cc
    }

    to {
        box-shadow: 0 0 5px #3b82f680
    }
}

@keyframes bounce {

    0%,
    to {
        animation-timing-function: cubic-bezier(.8, 0, 1, 1);
        transform: translateY(-25%)
    }

    50% {
        animation-timing-function: cubic-bezier(0, 0, .2, 1);
        transform: none
    }
}

@keyframes bounce-subtle {

    0%,
    to {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-3px)
    }
}

@keyframes zoomIn {
    0% {
        opacity: 0;
        transform: scale(.5)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes zoomOut {
    0% {
        opacity: 0;
        transform: scale(1.5)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes zoomIn95 {
    0% {
        opacity: 0;
        transform: scale(.95)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

@keyframes panel-fade-in {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes panel-slide-in-right {
    0% {
        opacity: 0;
        transform: translate(20px)
    }

    to {
        opacity: 1;
        transform: translate(0)
    }
}

@keyframes panel-slide-in-left {
    0% {
        opacity: 0;
        transform: translate(-20px)
    }

    to {
        opacity: 1;
        transform: translate(0)
    }
}

@keyframes panel-slide-in-top {
    0% {
        opacity: 0;
        transform: translateY(-20px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes panel-slide-in-bottom {
    0% {
        opacity: 0;
        transform: translateY(20px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes panel-collapse {
    0% {
        transform: scale(1)
    }

    to {
        transform: scale(.98)
    }
}

@keyframes panel-expand {
    0% {
        transform: scale(.98)
    }

    to {
        transform: scale(1)
    }
}

@keyframes flipX {
    0% {
        opacity: 0;
        transform: perspective(400px)rotateX(90deg)
    }

    to {
        opacity: 1;
        transform: perspective(400px)rotateX(0)
    }
}

@keyframes flipY {
    0% {
        opacity: 0;
        transform: perspective(400px)rotateY(90deg)
    }

    to {
        opacity: 1;
        transform: perspective(400px)rotateY(0)
    }
}

@keyframes shake {

    0%,
    to {
        transform: translate(0)
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translate(-5px)
    }

    20%,
    40%,
    60%,
    80% {
        transform: translate(5px)
    }
}

@keyframes swing {
    20% {
        transform: rotate(15deg)
    }

    40% {
        transform: rotate(-10deg)
    }

    60% {
        transform: rotate(5deg)
    }

    80% {
        transform: rotate(-5deg)
    }

    to {
        transform: rotate(0)
    }
}

@keyframes tada {
    0% {
        transform: scale(1)
    }

    10%,
    20% {
        transform: scale(.9)rotate(-3deg)
    }

    30%,
    50%,
    70%,
    90% {
        transform: scale(1.1)rotate(3deg)
    }

    40%,
    60%,
    80% {
        transform: scale(1.1)rotate(-3deg)
    }

    to {
        transform: scale(1)rotate(0)
    }
}

@keyframes wobble {
    0% {
        transform: translate(0)
    }

    15% {
        transform: translate(-25%)rotate(-5deg)
    }

    30% {
        transform: translate(20%)rotate(3deg)
    }

    45% {
        transform: translate(-15%)rotate(-3deg)
    }

    60% {
        transform: translate(10%)rotate(2deg)
    }

    75% {
        transform: translate(-5%)rotate(-1deg)
    }

    to {
        transform: translate(0)
    }
}

@keyframes jello {

    0%,
    11.1%,
    to {
        transform: none
    }

    22.2% {
        transform: skew(-12.5deg)skewY(-12.5deg)
    }

    33.3% {
        transform: skew(6.25deg)skewY(6.25deg)
    }

    44.4% {
        transform: skew(-3.125deg)skewY(-3.125deg)
    }

    55.5% {
        transform: skew(1.5625deg)skewY(1.5625deg)
    }

    66.6% {
        transform: skew(-.78125deg)skewY(-.78125deg)
    }

    77.7% {
        transform: skew(.390625deg)skewY(.390625deg)
    }

    88.8% {
        transform: skew(-.195313deg)skewY(-.195313deg)
    }
}

@keyframes heartBeat {
    0% {
        transform: scale(1)
    }

    14% {
        transform: scale(1.3)
    }

    28% {
        transform: scale(1)
    }

    42% {
        transform: scale(1.3)
    }

    70% {
        transform: scale(1)
    }
}

@keyframes rubberBand {
    0% {
        transform: scale(1)
    }

    30% {
        transform: scaleX(1.25)scaleY(.75)
    }

    40% {
        transform: scaleX(.75)scaleY(1.25)
    }

    50% {
        transform: scaleX(1.15)scaleY(.85)
    }

    65% {
        transform: scaleX(.95)scaleY(1.05)
    }

    75% {
        transform: scaleX(1.05)scaleY(.95)
    }

    to {
        transform: scale(1)
    }
}

@keyframes flash-green {
    0% {
        background-color: #10b98133
    }

    to {
        background-color: #0000
    }
}

@keyframes flash-red {
    0% {
        background-color: #ef444433
    }

    to {
        background-color: #0000
    }
}

@keyframes flash-green-dark {
    0% {
        background-color: #22c55e26
    }

    to {
        background-color: #0000
    }
}

@keyframes flash-red-dark {
    0% {
        background-color: #ef444426
    }

    to {
        background-color: #0000
    }
}

@keyframes flash-green-light {
    0% {
        background-color: #16a34a1a
    }

    to {
        background-color: #0000
    }
}

@keyframes flash-red-light {
    0% {
        background-color: #dc26261a
    }

    to {
        background-color: #0000
    }
}

.animate-slide-up {
    animation: grid-slideUp 30s linear infinite
}

.animate-slide-down {
    animation: grid-slideDown 30s linear infinite
}

.animate-slide-up-slow {
    animation: grid-slideUp 45s linear infinite
}

.animate-slide-down-slow {
    animation: grid-slideDown 45s linear infinite
}

.animate-slide-up-fast {
    animation: grid-slideUp 20s linear infinite
}

.animate-slide-down-fast {
    animation: grid-slideDown 20s linear infinite
}

.animate-marquee {
    animation: marquee 30s linear infinite
}

.animate-bounce-subtle {
    animation: bounce-subtle 2s infinite
}

.animate-pulse-glow {
    animation: pulse-glow 2s infinite
}

.dark .animate-flash-green {
    animation: flash-green-dark 1s ease-out
}

.dark .animate-flash-red {
    animation: flash-red-dark 1s ease-out
}

.light .animate-flash-green {
    animation: flash-green-light 1s ease-out
}

.light .animate-flash-red {
    animation: flash-red-light 1s ease-out
}

.animate-slideIn {
    animation: slideIn .3s ease-out forwards
}

.animate-fadeIn,
.order-card-enter {
    animation: fadeIn .3s ease-out forwards
}

.panel-animate-in {
    animation-duration: .3s;
    animation-timing-function: cubic-bezier(.4, 0, .2, 1);
    animation-fill-mode: both
}

.panel-fade-in {
    animation-name: panel-fade-in
}

.panel-slide-in-right {
    animation-name: panel-slide-in-right
}

.panel-slide-in-left {
    animation-name: panel-slide-in-left
}

.panel-slide-in-top {
    animation-name: panel-slide-in-top
}

.panel-slide-in-bottom {
    animation-name: panel-slide-in-bottom
}

.panel-delay-100 {
    animation-delay: .1s
}

.panel-delay-200 {
    animation-delay: .2s
}

.panel-delay-300 {
    animation-delay: .3s
}

.row-appear {
    animation: row-appear .2s ease-out forwards
}

.fade-in {
    animation-name: fadeIn
}

.zoom-in-95 {
    transform-origin: 0 0;
    animation-name: zoomIn95
}

.duration-100 {
    animation-duration: .1s
}

.hover-gradient-transition {
    z-index: 1;
    position: relative;
    overflow: hidden
}

.hover-gradient-transition:before {
    content: "";
    z-index: -1;
    opacity: 0;
    transition: opacity .3s;
    position: absolute;
    inset: 0
}

.hover-gradient-transition:hover:before {
    opacity: 1
}

.text-gradient-hover {
    z-index: 1;
    position: relative
}

.text-gradient-hover .hover-text {
    opacity: 0;
    width: 100%;
    height: 100%;
    transition: opacity .3s;
    position: absolute;
    top: 0;
    left: 0
}

.text-gradient-hover:hover .hover-text {
    opacity: 1
}

.text-gradient-hover:hover .default-text {
    opacity: 0
}

.gradient-border-hover {
    z-index: 1;
    position: relative
}

.gradient-border-hover:before {
    content: "";
    z-index: -1;
    opacity: 0;
    border-radius: inherit;
    transition: opacity .3s;
    position: absolute;
    inset: -1px
}

.gradient-border-hover:hover:before {
    opacity: 1
}

.hover-elevate {
    transition: transform .3s, box-shadow .3s
}

.hover-elevate:hover {
    transform: translateY(calc(-4px*var(--hover-intensity, 1)));
    box-shadow: 0 calc(10px*var(--hover-intensity, 1))calc(20px*var(--hover-intensity, 1))#0000001a
}

.hover-scale {
    transition: transform .3s
}

.hover-scale:hover {
    transform: scale(calc(1 + (.1*var(--hover-intensity, 1))))
}

.hover-glow {
    transition: box-shadow .3s
}

.hover-glow:hover {
    box-shadow: 0 0 calc(15px*var(--hover-intensity, 1))rgba(124, 58, 237, calc(.5*var(--hover-intensity, 1)))
}

.hover-tilt {
    transition: transform .3s
}

.hover-tilt:hover {
    transform: perspective(1000px)rotateX(calc(5deg*var(--hover-intensity, 1)))rotateY(calc(5deg*var(--hover-intensity, 1)))
}

.dark select option {
    color: #e4e4e7;
    background-color: #27272a
}

@-moz-document url-prefix() {
    .dark select {
        color: #e4e4e7;
        background-color: #27272a
    }
}

.animate-in {
    animation-duration: .15s;
    animation-timing-function: cubic-bezier(.4, 0, .2, 1);
    animation-fill-mode: both
}

.order-card-enter {
    animation: fadeIn .3s ease-out forwards
}

.order-card-exit {
    animation: fadeOut .3s ease-in forwards
}

.order-card-update {
    animation: pulse .5s ease-in-out
}

.slide-panel-enter {
    animation: slideIn .3s ease-out forwards
}

.slide-panel-exit {
    animation: slideOut .3s ease-in forwards
}

.chart-container {
    background: var(--chart-bg);
    z-index: 0;
    touch-action: none;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    border: none !important
}

.chart-container canvas {
    display: block;
    border: none !important
}

.chart-controls {
    z-index: 10
}

.progress-bar {
    transition: width 1s linear
}

.value-change {
    transition: color .3s
}

.trading-button-rise {
    transition: all .2s;
    box-shadow: 0 4px 12px #10b9814d
}

.trading-button-rise:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px #10b98180
}

.trading-button-fall {
    transition: all .2s;
    box-shadow: 0 4px 12px #ef44444d
}

.trading-button-fall:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px #ef444480
}

.panel-group [data-panel-id=chart] {
    transition: height .3s ease-in-out, flex-grow .3s ease-in-out
}

.panel-group:has(.panel-collapsed) [data-panel-id=chart] {
    flex-grow: 1
}

canvas {
    margin: 0;
    padding: 0;
    display: block;
    border: none !important
}

.chart-canvas {
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0
}

@media (max-width:768px) {
    .chart-canvas {
        touch-action: none;
        will-change: transform;
        -webkit-overflow-scrolling: touch;
        transform: translateZ(0)
    }

    .touch-dragging {
        contain: layout style paint
    }

    .touch-dragging,
    .touch-pinching {
        will-change: transform;
        backface-visibility: hidden;
        transform: translate(0)
    }

    .chart-canvas.touch-dragging {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
        transform: translateZ(0)
    }
}

.chart-crosshair {
    pointer-events: none;
    z-index: 10;
    position: absolute
}

.chart-crosshair-line {
    pointer-events: none;
    background: #ffffff4d;
    position: absolute
}

.chart-crosshair-horizontal {
    width: 100%;
    height: 1px
}

.chart-crosshair-vertical {
    width: 1px;
    height: 100%
}

.chart-price-line {
    stroke: #ff0;
    stroke-width: 1px;
    stroke-dasharray: 5 5;
    opacity: .8
}

.chart-volume-bar {
    opacity: .6
}

.chart-volume-bar.positive {
    fill: #26a69a
}

.chart-volume-bar.negative {
    fill: #ef5350
}

.chart-candle-body {
    stroke-width: 1px
}

.chart-candle-body.bullish {
    fill: #26a69a;
    stroke: #26a69a
}

.chart-candle-body.bearish {
    fill: #ef5350;
    stroke: #ef5350
}

.chart-candle-wick {
    stroke-width: 1px
}

.chart-candle-wick.bullish {
    stroke: #26a69a
}

.chart-candle-wick.bearish {
    stroke: #ef5350
}

.chart-loading {
    z-index: 20;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.chart-loading-spinner {
    border: 4px solid #fff3;
    border-top-color: #007bff;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: chart-spin 1s linear infinite
}

@keyframes chart-spin {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(1turn)
    }
}

.chart-tooltip {
    color: #fff;
    pointer-events: none;
    z-index: 15;
    white-space: nowrap;
    background: #000c;
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 12px;
    position: absolute
}

.dark .chart-container {
    --chart-bg: #131722
}

.dark .chart-tooltip {
    color: #131722;
    background: #ffffffe6
}

.dragging * {
    -webkit-user-select: none !important;
    user-select: none !important
}

.chart-zoom-transition {
    transition: transform .1s ease-out
}

.chart-container {
    -ms-overflow-style: none;
    scrollbar-width: none
}

.chart-container::-webkit-scrollbar {
    display: none
}

@media (max-width:768px) {
    .chart-canvas {
        image-rendering: optimizeSpeed;
        -webkit-user-drag: none;
        -webkit-tap-highlight-color: #0000
    }

    .touch-dragging {
        opacity: .95
    }
}

.resize-handle {
    position: relative
}

.resize-handle.resizing:after,
.resize-handle:hover:after {
    content: "";
    background-color: hsl(var(--primary));
    opacity: .2;
    position: absolute
}

.resize-handle-horizontal.resizing:after,
.resize-handle-horizontal:hover:after {
    width: 4px;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translate(-50%)
}

.resize-handle-vertical.resizing:after,
.resize-handle-vertical:hover:after {
    height: 4px;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%)
}

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

.panel-transition {
    transition: width .2s, height .2s
}

.panel-resizing {
    transition: transform .1s ease-out
}

.resize-handle.resizing+div .panel-resizing {
    transform: scale(.995)
}

[data-collapsed=true] {
    animation: panel-collapse .3s forwards
}

[data-collapsed=false] {
    animation: panel-expand .3s forwards
}

.panel-hover-effect:hover {
    box-shadow: 0 0 15px #0003
}

.panel-animate-in,
.panel-resizing,
[data-collapsed=false],
[data-collapsed=true] {
    will-change: transform, opacity
}

.side-collapsed {
    cursor: pointer;
    transition: width .3s ease-in-out, flex-basis .3s ease-in-out
}

.side-collapsed:hover {
    opacity: .8
}

.panel-group-collapsed {
    opacity: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: 0 !important;
    min-width: 0 !important
}

.panel-group-collapsed,
.panel-group-expanded {
    transition: all .3s ease-in-out
}

.panel-group-collapse-button {
    opacity: 0;
    transition: opacity .2s ease-in-out
}

.panel-group:hover .panel-group-collapse-button {
    opacity: 1
}

.collapsed-panel {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    transition: all .3s cubic-bezier(.4, 0, .2, 1);
    display: flex;
    position: relative;
    overflow: hidden
}

:root:not(.dark) .collapsed-panel {
    color: #71717a !important;
    background-color: #f4f4f5 !important;
    border-color: #e4e4e7 !important
}

:root:not(.dark) .collapsed-panel:hover {
    background-color: #e4e4e7 !important
}

:root:not(.dark) .collapsed-panel:hover .collapsed-panel-icon,
:root:not(.dark) .collapsed-panel:hover .collapsed-panel-title {
    color: #27272a !important
}

:root.dark .collapsed-panel {
    color: #888;
    background-color: #121212;
    border-top: 1px solid;
    border-color: #52525233
}

:root.dark .collapsed-panel:hover {
    background-color: #1a1a1a
}

:root.dark .collapsed-panel:hover .collapsed-panel-icon,
:root.dark .collapsed-panel:hover .collapsed-panel-title {
    color: #fff
}

.collapsed-panel-vertical {
    flex-basis: 24px !important;
    width: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important
}

.collapsed-panel-horizontal {
    flex-basis: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important
}

.collapsed-panel-title {
    writing-mode: vertical-rl;
    white-space: nowrap;
    letter-spacing: .05em;
    text-transform: uppercase;
    margin: 1rem 0;
    font-size: .75rem;
    font-weight: 500;
    transform: rotate(180deg)
}

:root:not(.dark) .collapsed-panel-title {
    color: #71717a
}

:root.dark .collapsed-panel-title {
    color: #888
}

.collapsed-panel-icon {
    cursor: pointer;
    justify-content: center;
    align-items: center;
    width: 16px;
    height: 16px;
    transition: color .2s;
    display: flex
}

:root:not(.dark) .collapsed-panel-icon {
    color: #71717a
}

:root:not(.dark) .collapsed-panel-icon:hover {
    color: #27272a
}

:root.dark .collapsed-panel-icon {
    color: #888
}

:root.dark .collapsed-panel-icon:hover {
    color: #fff
}

.collapsed-panel-icon svg {
    transition: transform .3s
}

.collapsed-panel-icon.left svg {
    transform: rotate(0)
}

.collapsed-panel-icon.right svg {
    transform: rotate(180deg)
}

.collapsed-panel-icon.top svg {
    transform: rotate(90deg)
}

.collapsed-panel-icon.bottom svg {
    transform: rotate(-90deg)
}

.panel-collapsing,
.panel-expanding {
    transition: all .3s cubic-bezier(.4, 0, .2, 1);
    overflow: hidden
}

.panel-collapse-button {
    z-index: 10;
    cursor: pointer;
    opacity: 0;
    justify-content: center;
    align-items: center;
    transition: background-color .2s, color .2s, opacity .2s;
    display: flex;
    position: absolute
}

:root:not(.dark) .panel-collapse-button {
    color: #71717a;
    background-color: #f4f4f5;
    border: 1px solid #e4e4e7cc
}

:root:not(.dark) .panel-collapse-button:hover {
    color: #27272a;
    background-color: #e4e4e7
}

:root.dark .panel-collapse-button {
    color: #888;
    background-color: #121212;
    border: 1px solid #52525233
}

:root.dark .panel-collapse-button:hover {
    color: #fff;
    background-color: #1a1a1a
}

[data-collapsed=false]:hover .panel-collapse-button {
    opacity: 1
}

.panel-collapse-button-right {
    border-left: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    right: 0
}

.panel-collapse-button-left,
.panel-collapse-button-right {
    width: 12px;
    height: 40px;
    top: 50%;
    transform: translateY(-50%)
}

.panel-collapse-button-left {
    border-right: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    left: 0
}

.panel-collapse-button-top {
    border-bottom: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    top: 0
}

.panel-collapse-button-bottom,
.panel-collapse-button-top {
    width: 40px;
    height: 12px;
    left: 50%;
    transform: translate(-50%)
}

.panel-collapse-button-bottom {
    border-top: none;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    bottom: 0
}

.panel-collapse-tooltip {
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 12px;
    transition: opacity .2s;
    position: absolute
}

:root:not(.dark) .panel-collapse-tooltip {
    color: #27272a;
    background-color: #f4f4f5e6
}

:root.dark .panel-collapse-tooltip {
    color: #fff;
    background-color: #000c
}

.panel-collapse-button:hover .panel-collapse-tooltip {
    opacity: 1
}

.tooltip-right {
    margin-left: 8px;
    left: 100%
}

.tooltip-left {
    margin-right: 8px;
    right: 100%
}

.tooltip-bottom {
    margin-top: 8px;
    top: 100%
}

.tooltip-top {
    margin-bottom: 8px;
    bottom: 100%
}

.collapse-button {
    z-index: 20;
    opacity: 0;
    justify-content: center;
    align-items: center;
    transition: all .2s;
    display: flex;
    position: absolute
}

:root:not(.dark) .collapse-button {
    color: #71717acc;
    background-color: #f4f4f5cc;
    border-color: #e4e4e7cc
}

:root:not(.dark) .collapse-button:hover {
    color: #27272ae6;
    background-color: #e4e4e7e6
}

:root.dark .collapse-button {
    color: #a1a1aacc;
    background-color: #27272acc;
    border-color: #3f3f4680
}

:root.dark .collapse-button:hover {
    color: #d4d4d8e6;
    background-color: #3f3f46e6
}

.collapse-button-left {
    border: 1px solid;
    border-left: none;
    border-radius: 0 4px 4px 0;
    left: 0
}

.collapse-button-left,
.collapse-button-right {
    width: 14px;
    height: 36px;
    top: 50%;
    transform: translateY(-50%)
}

.collapse-button-right {
    border: 1px solid;
    border-right: none;
    border-radius: 4px 0 0 4px;
    right: 0
}

.collapse-button-top {
    border: 1px solid;
    border-top: none;
    border-radius: 0 0 4px 4px;
    top: 0
}

.collapse-button-bottom,
.collapse-button-top {
    width: 36px;
    height: 14px;
    left: 50%;
    transform: translate(-50%)
}

.collapse-button-bottom {
    border: 1px solid;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    bottom: 0
}

.panel:hover .panel-collapse-button {
    opacity: 1
}

.panel-collapse-button,
.panel-group-collapse-button {
    transition: opacity .2s;
    opacity: 0 !important
}

.panel-group[data-group-id=bottom][data-hovered=true]>.panel-group-collapse-button.group-bottom,
.panel-group[data-group-id=left][data-hovered=true]>.panel-group-collapse-button.group-left,
.panel-group[data-group-id=right][data-hovered=true]>.panel-group-collapse-button.group-right,
.panel-group[data-group-id=top][data-hovered=true]>.panel-group-collapse-button.group-top {
    opacity: .7 !important
}

.panel-group-collapse-button:hover,
[data-panel-id]:hover>.panel-collapse-button {
    opacity: 1 !important
}

.collapse-tooltip {
    white-space: nowrap;
    opacity: 1;
    pointer-events: none;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 12px;
    transition: opacity .2s;
    position: absolute
}

:root:not(.dark) .collapse-tooltip {
    color: #27272a;
    background-color: #f4f4f5e6
}

:root.dark .collapse-tooltip {
    color: #f4f4f5;
    background-color: #18181be6
}

.tooltip-left {
    left: 24px
}

.tooltip-left,
.tooltip-right {
    top: 50%;
    transform: translateY(-50%)
}

.tooltip-right {
    right: 24px
}

.tooltip-top {
    top: 24px
}

.tooltip-bottom,
.tooltip-top {
    left: 50%;
    transform: translate(-50%)
}

.tooltip-bottom {
    bottom: 24px
}

.panel-collapsed {
    overflow: hidden;
    min-height: 28px !important;
    max-height: 28px !important
}

.collapsed-panel {
    transition: all .3s
}

.collapsed-panel-vertical {
    min-width: 30px;
    max-width: 30px;
    height: 100%
}

.collapsed-panel-horizontal {
    width: 100%;
    min-height: 30px;
    max-height: 30px
}

[aria-label="Expand Orders panel"],
[data-panel-id=orders] .collapsed-panel {
    border-top: 1px solid
}

:root:not(.dark) [aria-label="Expand Orders panel"],
:root:not(.dark) [data-panel-id=orders] .collapsed-panel {
    background-color: #f4f4f5 !important;
    border-color: #e4e4e7 !important
}

:root.dark [aria-label="Expand Orders panel"],
:root.dark [data-panel-id=orders] .collapsed-panel {
    background-color: #121212 !important;
    border-color: #52525233 !important
}

:root:not(.dark) [data-collapsed-side] {
    color: #71717a !important;
    background-color: #f4f4f5 !important;
    border-color: #e4e4e7 !important
}

:root.dark [data-collapsed-side] {
    color: #a1a1aa !important;
    background-color: #18181b !important;
    border-color: #52525233 !important
}

.scrollbar-hide::-webkit-scrollbar {
    display: none
}

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none
}

.order-panel-container {
    z-index: 50;
    position: relative
}

.order-panel-dropdown {
    z-index: 100
}

.trade-confirmation-modal {
    z-index: 200
}

.trading-history-footer {
    background: linear-gradient(90deg, #1a1d29, #131722);
    transition: all .3s;
    box-shadow: 0 -2px 10px #0003
}

.trading-history-footer:hover {
    background: linear-gradient(90deg, #1e2235, #171b2a)
}

.trading-history-toggle {
    background: #1e2130cc;
    border: 1px solid #2a2e39cc;
    transition: all .2s
}

.trading-history-toggle:hover {
    background: #242738e6;
    transform: scale(1.05)
}

.pb-trading-history {
    padding-bottom: 40px
}

.trading-history-visible {
    margin-bottom: 40px
}

.trading-buttons-container {
    margin-bottom: 60px
}

.glass-morphism {
    -webkit-backdrop-filter: blur(10px);
    background: #1e2130cc;
    border: 1px solid #ffffff0d
}

.press-effect:active {
    transition: transform .1s;
    transform: scale(.95)
}

.price-level {
    transition: background-color .2s ease-in-out
}

.price-increase {
    color: #10b981;
    transition: color .2s
}

.price-decrease {
    color: #ef4444;
    transition: color .2s
}

.scrollbar-thumb-gray-500::-webkit-scrollbar-thumb {
    background-color: #64646480;
    border-radius: 3px
}

.scrollbar-track-transparent::-webkit-scrollbar-track {
    background-color: #0000
}

.scrollbar-thin::-webkit-scrollbar {
    width: 4px
}

.orderbook-section {
    max-height: 100%;
    overflow-y: auto
}

@media (max-width:768px) {
    .no-select {
        -webkit-user-select: none;
        user-select: none
    }

    .touch-target {
        min-width: 44px;
        min-height: 44px
    }

    .slide-in-right {
        animation: slideInRight .3s forwards
    }

    .slide-out-right {
        animation: slideOutRight .3s forwards
    }

    @keyframes slideInRight {
        0% {
            transform: translate(100%)
        }

        to {
            transform: translate(0)
        }
    }

    @keyframes slideOutRight {
        0% {
            transform: translate(0)
        }

        to {
            transform: translate(100%)
        }
    }

    .mobile-footer {
        -webkit-backdrop-filter: blur(10px);
        box-shadow: 0 -5px 20px #0000004d
    }

    .mobile-btn:active {
        transition: transform .1s;
        transform: scale(.96)
    }
}

.mobile-footer {
    box-shadow: 0 -5px 25px #0000004d
}

.tab-transition {
    transition: transform .3s
}

@media (max-width:480px) {
    .modal-container {
        max-width: 350px;
        width: 95% !important;
        padding: 12px !important
    }

    .modal-header {
        margin-bottom: 10px !important
    }

    .modal-content {
        font-size: .875rem !important
    }

    .modal-buttons {
        gap: 8px !important
    }
}

.dark-theme {
    color-scheme: dark
}

.light-theme {
    color-scheme: light
}

* {
    transition: background-color .3s, border-color .3s, color .2s
}

.no-transition * {
    transition: none !important
}

:root:not(.dark) {
    --border-color: #e4e4e7cc;
    --border-color-light: #e4e4e780;
    --table-border-color: #e4e4e7;
    --table-border-color-light: #e4e4e7b3;
    --panel-border-color: #e4e4e7
}

:root.dark {
    --border-color: #3f3f4680;
    --border-color-light: #27272a80;
    --table-border-color: #3f3f46cc;
    --table-border-color-light: #27272ab3;
    --panel-border-color: #3f3f46cc
}

.border-theme {
    border-color: var(--border-color) !important
}

.border-theme-light {
    border-color: var(--border-color-light) !important
}

.table-border {
    border-color: var(--table-border-color) !important
}

.table-border-light {
    border-color: var(--table-border-color-light) !important
}

.panel-border {
    border-color: var(--panel-border-color) !important
}

:root:not(.dark) table {
    border-color: var(--table-border-color)
}

:root:not(.dark) .order-book-row,
:root:not(.dark) table td,
:root:not(.dark) table th {
    border-color: var(--table-border-color-light)
}

.hide-scrollbar {
    scrollbar-width: none;
    -ms-overflow-style: none
}

.hide-scrollbar::-webkit-scrollbar {
    display: none
}

.scrollbar-none {
    scrollbar-width: none;
    -ms-overflow-style: none
}

.scrollbar-none::-webkit-scrollbar {
    display: none
}

.writing-vertical-rl {
    writing-mode: vertical-rl
}

.vertical-text-container {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    display: flex
}

.vertical-text {
    text-orientation: mixed
}

.collapsed-panel-text,
.vertical-text {
    writing-mode: vertical-rl;
    white-space: nowrap;
    letter-spacing: .05em;
    text-align: center;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    display: flex;
    transform: rotate(180deg)
}

.collapsed-panel-text {
    padding: 1rem 0;
    font-weight: 500
}

.custom-scrollbar::-webkit-scrollbar {
    width: 4px
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: 0 0
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #64646480;
    border-radius: 3px
}

.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #64646480 transparent
}

.animate-flash-green {
    animation: flash-green 1s ease-out
}

.animate-flash-red {
    animation: flash-red 1s ease-out
}

.parallax {
    transition: transform .2s ease-out;
    transform: translateZ(0)
}

.parallax-slow {
    transition: transform .4s ease-out;
    transform: translateZ(0)
}

.parallax-layer-1 {
    transform: translateZ(-10px)scale(2)
}

.parallax-layer-2 {
    transform: translateZ(-5px)scale(1.5)
}

.parallax-layer-3 {
    transform: translateZ(-2px)scale(1.2)
}

.gradient-animate {
    background-size: 200% 200%;
    animation: gradient 15s infinite
}

@keyframes gradient {
    0% {
        background-position: 0
    }

    50% {
        background-position: 100%
    }

    to {
        background-position: 0
    }
}

.glow {
    transition: box-shadow .3s;
    box-shadow: 0 0 15px #4f46e580
}

.glow:hover {
    box-shadow: 0 0 25px #4f46e5cc
}

.text-glow {
    text-shadow: 0 0 10px #4f46e580
}

.btn-hover-effect {
    position: relative;
    overflow: hidden
}

.btn-hover-effect:after {
    content: "";
    background: #fff3;
    border-radius: 50%;
    width: 0;
    height: 0;
    transition: width .6s, height .6s;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.btn-hover-effect:hover:after {
    width: 300%;
    height: 300%
}

.has-sticky-header:after {
    z-index: -10;
    --tw-backdrop-blur: blur(12px);
    -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);
    content: "";
    background: linear-gradient(180deg, rgba(var(--v-theme-background), 70%)44%, rgba(var(--v-theme-background), 43%)73%, rgba(var(--v-theme-background), 0));
    background-repeat: repeat;
    block-size: 5.5rem;
    position: absolute;
    inset-block-start: -1.5rem;
    inset-inline: 0;
    -webkit-mask: linear-gradient(#000, #000 18%, #0000);
    mask: linear-gradient(#000, #000 18%, #0000)
}

.CollapsibleContent {
    overflow: hidden
}

.CollapsibleContent[data-state=open] {
    animation: slideDown .3s ease-out
}

.CollapsibleContent[data-state=closed] {
    animation: slideUp .3s ease-out
}

.input-group :not(:first-child) input {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important
}

.input-group.merged :not(:first-child) input {
    border-left-width: 0 !important;
    padding-left: 0 !important
}

.input-group :not(:last-child) input {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important
}

.input-group.merged :not(:last-child) input {
    border-right-width: 0 !important;
    padding-right: 0 !important
}

.ck .ck-editor__editable {
    min-height: 245px !important
}

.loginwrapper {
    min-height: calc(var(--vh, 1vh)*100);
    flex-basis: 100%
}

.loginwrapper .lg-inner-column {
    height: calc(var(--vh, 1vh)*100)
}

@keyframes progress-bar-stripes {
    0% {
        background-position: 1rem 0
    }

    to {
        background-position: 0 0
    }
}

.animate-stripes {
    animation: progress-bar-stripes 1s linear infinite
}

.page-min-height {
    min-height: calc(var(--vh, 1vh)*100 - 117px)
}

.page-min-height-semibox {
    min-height: calc(var(--vh, 1vh)*100 - 200px)
}

.page-min-height-horizontal {
    min-height: calc(var(--vh, 1vh)*100 - 170px)
}

.app-height {
    height: calc(var(--vh, 1vh)*100 - 11.1rem) !important
}

@media (max-width:768px) {
    .app-height {
        height: calc(var(--vh, 1vh)*100 - 10.5rem) !important
    }
}

@media (min-width:1280px) {
    .semibox-content-wrapper {
        margin-left: 56px;
        margin-right: 56px
    }
}

.layout-padding {
    padding-bottom: 112px
}

@media (min-width:768px) {
    .layout-padding {
        padding-bottom: 37px
    }
}

.no-scrollbar::-webkit-scrollbar {
    width: 0
}

.no-scrollbar::-webkit-scrollbar-thumb {
    background-color: #0000
}

html[dir=rtl] .react-select .select__loading-indicator {
    flex-direction: row-reverse
}

.react-medium-image-zoom-overlay {
    z-index: 1000
}

.react-medium-image-zoom-zoom-image {
    cursor: zoom-out
}

.scrollbar-thin {
    scrollbar-width: thin
}

.scrollbar-thin::-webkit-scrollbar {
    width: .375rem;
    height: .375rem
}

.scrollbar-thin::-webkit-scrollbar-track {
    background-color: #0000
}

.scrollbar-thin::-webkit-scrollbar-thumb {
    background-color: #d1d5db;
    border-radius: 9999px
}

.scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background-color: #9ca3af
}

.documentation-section {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: .3s;
    --tw-ease: var(--ease-in-out);
    transition-duration: .3s;
    transition-timing-function: var(--ease-in-out);
    animation-duration: .3s;
    animation-timing-function: cubic-bezier(.4, 0, .2, 1)
}

.documentation-section:hover {
    background-color: color-mix(in srgb, hsl(var(--accent))10%, transparent)
}

@supports (color:color-mix(in lab, red, red)) {
    .documentation-section:hover {
        background-color: color-mix(in oklab, var(--color-accent)10%, transparent)
    }
}

.documentation-subsection {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
    --tw-duration: .3s;
    --tw-ease: var(--ease-in-out);
    transition-duration: .3s;
    transition-timing-function: var(--ease-in-out);
    animation-duration: .3s;
    animation-timing-function: cubic-bezier(.4, 0, .2, 1)
}

.documentation-subsection:hover {
    background-color: color-mix(in srgb, hsl(var(--accent))5%, transparent)
}

@supports (color:color-mix(in lab, red, red)) {
    .documentation-subsection:hover {
        background-color: color-mix(in oklab, var(--color-accent)5%, transparent)
    }
}

::-webkit-scrollbar {
    background-color: #0000;
    border-radius: 9999px;
    width: 8px;
    height: 8px
}

::-webkit-scrollbar-track {
    background-color: #f4f4f5;
    border-radius: 9999px
}

::-webkit-scrollbar-thumb {
    background-color: #d4d4d8;
    border: 2px solid #f4f4f5;
    border-radius: 9999px
}

::-webkit-scrollbar-thumb:hover {
    background-color: #a1a1aa
}

.dark ::-webkit-scrollbar {
    background-color: #18181b;
    border-radius: 9999px;
    width: 8px;
    height: 8px
}

.dark ::-webkit-scrollbar-track {
    background: #09090b;
    border-radius: 9999px
}

.dark ::-webkit-scrollbar-thumb {
    background-color: #27272a;
    border: 2px solid #09090b;
    border-radius: 9999px
}

.dark ::-webkit-scrollbar-thumb:hover {
    background-color: #3f3f46
}

.quillEditor .ql-container.ql-snow,
.quillEditor .ql-toolbar.ql-snow {
    border: none !important;
    border-radius: 0 !important
}

.bg-grid-white {
    background-image: linear-gradient(90deg, #ffffff1a 1px, #0000 0), linear-gradient(#ffffff1a 1px, #0000 0)
}

.support-drawer-content,
[data-sheet=true] .support-drawer-content {
    width: 90vw !important;
    min-width: 90vw !important;
    max-width: 90vw !important;
    height: 100vh !important;
    max-height: 100vh !important
}

[data-radix-dialog-overlay] {
    height: 100vh !important
}

[data-radix-dialog-content].support-drawer-content {
    height: 100vh !important;
    max-height: 100vh !important
}

.unauthorized-access-overlay {
    z-index: 50;
    background: hsl(var(--background));
    position: fixed;
    inset: 0
}

@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))
    }
}

@property --tw-translate-x {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-translate-y {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-translate-z {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-scale-x {
    syntax: "*";
    inherits: false;
    initial-value: 1
}

@property --tw-scale-y {
    syntax: "*";
    inherits: false;
    initial-value: 1
}

@property --tw-scale-z {
    syntax: "*";
    inherits: false;
    initial-value: 1
}

@property --tw-rotate-x {
    syntax: "*";
    inherits: false
}

@property --tw-rotate-y {
    syntax: "*";
    inherits: false
}

@property --tw-rotate-z {
    syntax: "*";
    inherits: false
}

@property --tw-skew-x {
    syntax: "*";
    inherits: false
}

@property --tw-skew-y {
    syntax: "*";
    inherits: false
}

@property --tw-space-y-reverse {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-space-x-reverse {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-divide-x-reverse {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-border-style {
    syntax: "*";
    inherits: false;
    initial-value: solid
}

@property --tw-divide-y-reverse {
    syntax: "*";
    inherits: false;
    initial-value: 0
}

@property --tw-gradient-position {
    syntax: "*";
    inherits: false
}

@property --tw-gradient-from {
    syntax: "<color>";
    inherits: false;
    initial-value: #0000
}

@property --tw-gradient-via {
    syntax: "<color>";
    inherits: false;
    initial-value: #0000
}

@property --tw-gradient-to {
    syntax: "<color>";
    inherits: false;
    initial-value: #0000
}

@property --tw-gradient-stops {
    syntax: "*";
    inherits: false
}

@property --tw-gradient-via-stops {
    syntax: "*";
    inherits: false
}

@property --tw-gradient-from-position {
    syntax: "<length-percentage>";
    inherits: false;
    initial-value: 0
}

@property --tw-gradient-via-position {
    syntax: "<length-percentage>";
    inherits: false;
    initial-value: 50%
}

@property --tw-gradient-to-position {
    syntax: "<length-percentage>";
    inherits: false;
    initial-value: 100%
}

@property --tw-leading {
    syntax: "*";
    inherits: false
}

@property --tw-font-weight {
    syntax: "*";
    inherits: false
}

@property --tw-tracking {
    syntax: "*";
    inherits: false
}

@property --tw-ordinal {
    syntax: "*";
    inherits: false
}

@property --tw-slashed-zero {
    syntax: "*";
    inherits: false
}

@property --tw-numeric-figure {
    syntax: "*";
    inherits: false
}

@property --tw-numeric-spacing {
    syntax: "*";
    inherits: false
}

@property --tw-numeric-fraction {
    syntax: "*";
    inherits: false
}

@property --tw-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-shadow-color {
    syntax: "*";
    inherits: false
}

@property --tw-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%
}

@property --tw-inset-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-inset-shadow-color {
    syntax: "*";
    inherits: false
}

@property --tw-inset-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%
}

@property --tw-ring-color {
    syntax: "*";
    inherits: false
}

@property --tw-ring-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-inset-ring-color {
    syntax: "*";
    inherits: false
}

@property --tw-inset-ring-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-ring-inset {
    syntax: "*";
    inherits: false
}

@property --tw-ring-offset-width {
    syntax: "<length>";
    inherits: false;
    initial-value: 0
}

@property --tw-ring-offset-color {
    syntax: "*";
    inherits: false;
    initial-value: #fff
}

@property --tw-ring-offset-shadow {
    syntax: "*";
    inherits: false;
    initial-value: 0 0 #0000
}

@property --tw-outline-style {
    syntax: "*";
    inherits: false;
    initial-value: solid
}

@property --tw-blur {
    syntax: "*";
    inherits: false
}

@property --tw-brightness {
    syntax: "*";
    inherits: false
}

@property --tw-contrast {
    syntax: "*";
    inherits: false
}

@property --tw-grayscale {
    syntax: "*";
    inherits: false
}

@property --tw-hue-rotate {
    syntax: "*";
    inherits: false
}

@property --tw-invert {
    syntax: "*";
    inherits: false
}

@property --tw-opacity {
    syntax: "*";
    inherits: false
}

@property --tw-saturate {
    syntax: "*";
    inherits: false
}

@property --tw-sepia {
    syntax: "*";
    inherits: false
}

@property --tw-drop-shadow {
    syntax: "*";
    inherits: false
}

@property --tw-drop-shadow-color {
    syntax: "*";
    inherits: false
}

@property --tw-drop-shadow-alpha {
    syntax: "<percentage>";
    inherits: false;
    initial-value: 100%
}

@property --tw-drop-shadow-size {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-blur {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-brightness {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-contrast {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-grayscale {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-hue-rotate {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-invert {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-opacity {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-saturate {
    syntax: "*";
    inherits: false
}

@property --tw-backdrop-sepia {
    syntax: "*";
    inherits: false
}

@property --tw-duration {
    syntax: "*";
    inherits: false
}

@property --tw-ease {
    syntax: "*";
    inherits: false
}

@property --tw-content {
    syntax: "*";
    inherits: false;
    initial-value: ""
}

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

@keyframes ping {

    75%,
    to {
        opacity: 0;
        transform: scale(2)
    }
}

@keyframes accordion-down {
    0% {
        height: 0
    }

    to {
        height: var(--radix-accordion-content-height)
    }
}

@keyframes accordion-up {
    0% {
        height: var(--radix-accordion-content-height)
    }

    to {
        height: 0
    }
}