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

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

@media (min-width: 1024px) {
    body {
        overflow-x:hidden!important
    }
}

button {
    background-color: unset;
    border-style: none
}

a {
    color: unset
}

@media (max-width: 767px) {
    #__APP {
        overflow-y:hidden!important
    }
}

.market-view {
    margin-left: auto;
    margin-right: auto;
    max-width: 1200px;
}

.overview-table-row {
    align-items: center;
    border-radius: var(--radii-m);
    display: flex;
    flex: 1 1;
    justify-content: space-between
}

.overview-table-row:hover {
    background-color: var(--color-selectedBg)
}

@media (max-width: 767px) {
    .overview-table-row {
        padding-left:var(--space-m);
        padding-right: var(--space-m)
    }
}

@media (min-width: 767px) and (max-width:1023px) {
    .overview-table-row {
        padding-left:var(--space-m)
    }
}

@media (min-width: 1024px) {
    .overview-table-row {
        padding-left:var(--space-m)
    }
}

.overview-table-row>div {
    align-items: center;
    justify-content: center;
    text-align: center
}

.overview-table-row>[data-area=left] {
    justify-content: flex-start;
    text-align: left
}

.overview-table-row>[data-area=right] {
    justify-content: flex-end;
    text-align: right
}

.overview-table-row>[data-area=right] .right-icon-offset {
    transform: translateX(6px)
}

.overview-table-row .tab__column {
    background-color: transparent
}

@media (max-width: 767px) {
    .overview-table-row .tab__column {
        padding-left:0
    }
}

@media (min-width: 767px) and (max-width:1023px) {
    .overview-table-row .tab__column {
        padding-left:0
    }
}

@media (min-width: 1024px) {
    .overview-table-row .tab__column {
        padding-left:var(--space-m)
    }
}

.overview-table-row .tab__column:has(.bn-modal) {
    z-index: 1200
}

.overview-table-row .tab__column>:first-child {
    background-color: var(--color-bg1);
    flex-grow: 1;
    height: 100%;
    padding-right: var(--space-m)
}

.overview-table-row:hover .tab__column>:first-child {
    background-color: var(--color-selectedBg);
    flex-grow: 1
}

@media (max-width: 767px) {
    .overview-table-row>:last-child {
        padding-right:0
    }
}

@media (min-width: 767px) and (max-width:1023px) {
    .overview-table-row>:last-child {
        padding-right:0
    }
}

@media (min-width: 1024px) {
    .overview-table-row>:last-child {
        padding-right:var(--space-m)
    }
}

.bn-tooltips-wrap .bn-tooltips.\!active.data-shadow>div.bn-bubble-content,.bn-tooltips-wrap .bn-tooltips.active.data-shadow>div.bn-bubble-content {
    box-shadow: none!important
}

.layout-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.visible {
    visibility: visible!important
}

.invisible {
    visibility: hidden!important
}

.static {
    position: static!important
}

.fixed {
    position: fixed!important
}

.absolute {
    position: absolute!important
}

.relative {
    position: relative!important
}

.inset-0 {
    inset: 0!important
}

.left-0 {
    left: 0!important
}

.right-\[21px\] {
    right: 21px!important
}

.right-\[38px\] {
    right: 38px!important
}

.top-0 {
    top: 0!important
}

.z-0 {
    z-index: 0!important
}

.z-30 {
    z-index: 30!important
}

.z-\[1010\] {
    z-index: 1010!important
}

.z-\[1\] {
    z-index: 1!important
}

.z-\[2000\] {
    z-index: 2000!important
}

.col-span-1 {
    grid-column: span 1/span 1!important
}

.m-auto {
    margin: auto!important
}

.m-m {
    margin: var(--space-m)!important
}

.-mx-m {
    margin-left: calc(var(--space-m)*-1)!important;
    margin-right: calc(var(--space-m)*-1)!important
}

.-mb-2xs {
    margin-bottom: calc(var(--space-2xs)*-1)!important
}

.mb-2xs {
    margin-bottom: var(--space-2xs)!important
}

.mb-m {
    margin-bottom: var(--space-m)!important
}

.mb-xl {
    margin-bottom: var(--space-xl)!important
}

.ml-0 {
    margin-left: 0!important
}

.mr-0 {
    margin-right: 0!important
}

.mt-2xs {
    margin-top: var(--space-2xs)!important
}

.mt-\[4px\] {
    margin-top: 4px!important
}

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

.\!line-clamp-1,.line-clamp-1 {
    --webkit-line-clamp: 1!important
}

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

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

.block {
    display: block!important
}

.inline-block {
    display: inline-block!important
}

.inline {
    display: inline!important
}

.flex {
    display: flex!important
}

.inline-flex {
    display: inline-flex!important
}

.table {
    display: table!important
}

.grid {
    display: grid!important
}

.contents {
    display: contents!important
}

.hidden {
    display: none!important
}

.\!h-4 {
    height: 1rem!important
}

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

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

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

.h-10 {
    height: 2.5rem!important
}

.h-24 {
    height: 6rem!important
}

.h-3 {
    height: .75rem!important
}

.h-4 {
    height: 1rem!important
}

.h-5 {
    height: 1.25rem!important
}

.h-6 {
    height: 1.5rem!important
}

.h-\[120px\] {
    height: 120px!important
}

.h-\[16px\] {
    height: 16px!important
}

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

.h-\[232px\] {
    height: 232px!important
}

.h-\[24px\] {
    height: 24px!important
}

.h-\[28px\] {
    height: 28px!important
}

.h-\[302px\] {
    height: 302px!important
}

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

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

.h-\[40px\] {
    height: 40px!important
}

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

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

.h-\[48px\] {
    height: 48px!important
}

.h-\[60px\] {
    height: 60px!important
}

.h-\[628px\] {
    height: 628px!important
}

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

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

.h-\[96px\] {
    height: 96px!important
}

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

.h-px {
    height: 1px!important
}

.min-h-\[164px\] {
    min-height: 164px!important
}

.min-h-\[24px\] {
    min-height: 24px!important
}

.min-h-\[268px\] {
    min-height: 268px!important
}

.min-h-\[350px\] {
    min-height: 350px!important
}

.min-h-\[48px\] {
    min-height: 48px!important
}

.\!w-4 {
    width: 1rem!important
}

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

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

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

.w-24 {
    width: 6rem!important
}

.w-3 {
    width: .75rem!important
}

.w-4 {
    width: 1rem!important
}

.w-5 {
    width: 1.25rem!important
}

.w-6 {
    width: 1.5rem!important
}

.w-8 {
    width: 2rem!important
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.flex-1 {
    flex: 1 1!important
}

.flex-\[52\] {
    flex: 52 1!important
}

.flex-\[85\] {
    flex: 85 1!important
}

.flex-\[90\] {
    flex: 90 1!important
}

.flex-shrink-0,.shrink-0 {
    flex-shrink: 0!important
}

.flex-grow,.grow {
    flex-grow: 1!important
}

.grow-0 {
    flex-grow: 0!important
}

.basis-0 {
    flex-basis: 0px!important
}

.table-fixed {
    table-layout: fixed!important
}

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

.cursor-grab {
    cursor: -webkit-grab!important;
    cursor: grab!important
}

.cursor-grabbing {
    cursor: -webkit-grabbing!important;
    cursor: grabbing!important
}

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

.cursor-pointer {
    cursor: pointer!important
}

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

.select-all {
    -webkit-user-select: all!important;
    -moz-user-select: all!important;
    user-select: all!important
}

.resize {
    resize: both!important
}

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

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

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

.flex-row {
    flex-direction: row!important
}

.flex-col {
    flex-direction: column!important
}

.flex-wrap {
    flex-wrap: wrap!important
}

.flex-nowrap {
    flex-wrap: nowrap!important
}

.items-start {
    align-items: flex-start!important
}

.items-end {
    align-items: flex-end!important
}

.items-center {
    align-items: center!important
}

.items-stretch {
    align-items: stretch!important
}

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

.justify-center {
    justify-content: center!important
}

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

.gap-2xs {
    grid-gap: var(--space-2xs)!important;
    gap: var(--space-2xs)!important
}

.gap-4xs {
    grid-gap: var(--space-4xs)!important;
    gap: var(--space-4xs)!important
}

.gap-5xs {
    grid-gap: var(--space-5xs)!important;
    gap: var(--space-5xs)!important
}

.gap-\[40px\] {
    grid-gap: 40px!important;
    gap: 40px!important
}

.gap-l {
    grid-gap: var(--space-l)!important;
    gap: var(--space-l)!important
}

.gap-m {
    grid-gap: var(--space-m)!important;
    gap: var(--space-m)!important
}

.gap-s {
    grid-gap: var(--space-s)!important;
    gap: var(--space-s)!important
}

.gap-xl {
    grid-gap: var(--space-xl)!important;
    gap: var(--space-xl)!important
}

.gap-x-4xs {
    grid-column-gap: var(--space-4xs)!important;
    -moz-column-gap: var(--space-4xs)!important;
    column-gap: var(--space-4xs)!important
}

.gap-x-xl {
    grid-column-gap: var(--space-xl)!important;
    -moz-column-gap: var(--space-xl)!important;
    column-gap: var(--space-xl)!important
}

.gap-y-5xs {
    grid-row-gap: var(--space-5xs)!important;
    row-gap: var(--space-5xs)!important
}

.gap-y-m {
    grid-row-gap: var(--space-m)!important;
    row-gap: var(--space-m)!important
}

.gap-y-xl {
    grid-row-gap: var(--space-xl)!important;
    row-gap: var(--space-xl)!important
}

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

.self-center {
    align-self: center!important
}

.overflow-auto {
    overflow: auto!important
}

.overflow-hidden {
    overflow: hidden!important
}

.overflow-x-auto {
    overflow-x: auto!important
}

.overflow-x-hidden {
    overflow-x: hidden!important
}

.overflow-x-visible {
    overflow-x: visible!important
}

.truncate {
    overflow: hidden!important;
    text-overflow: ellipsis!important;
    white-space: nowrap!important
}

.whitespace-normal {
    white-space: normal!important
}

.whitespace-nowrap {
    white-space: nowrap!important
}

.whitespace-pre-wrap {
    white-space: pre-wrap!important
}

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

.\!rounded-m {
    border-radius: var(--radii-m)!important
}

.rounded-2xs {
    border-radius: var(--radii-2xs)!important
}

.rounded-\[12px\] {
    border-radius: 12px!important
}

.rounded-\[50\%\] {
    border-radius: 50%!important
}

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

.rounded-m {
    border-radius: var(--radii-m)!important
}

.rounded-s {
    border-radius: var(--radii-s)!important
}

.rounded-xl {
    border-radius: var(--radii-xl)!important
}

.rounded-xs {
    border-radius: var(--radii-xs)!important
}

.rounded-s {
    border-end-start-radius: .25rem!important;
    border-start-start-radius: .25rem!important
}

.border {
    border-width: 1px!important
}

.border-0 {
    border-width: 0!important
}

.border-x-0 {
    border-left-width: 0!important;
    border-right-width: 0!important
}

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

.border-b-0 {
    border-bottom-width: 0!important
}

.border-l-\[1px\] {
    border-left-width: 1px!important
}

.border-r-0 {
    border-right-width: 0!important
}

.border-t-\[1px\] {
    border-top-width: 1px!important
}

.border-solid {
    border-style: solid!important
}

.border-dashed {
    border-style: dashed!important
}

.border-none {
    border-style: none!important
}

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

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

.bg-BasicBg {
    background-color: var(--color-BasicBg)!important
}

.bg-Buy {
    background-color: var(--color-Buy)!important
}

.bg-Input {
    background-color: var(--color-Input)!important
}

.bg-Line {
    background-color: var(--color-Line)!important
}

.bg-SecondaryText {
    background-color: var(--color-SecondaryText)!important
}

.bg-Sell {
    background-color: var(--color-Sell)!important
}

.bg-Vessel {
    background-color: var(--color-Vessel)!important
}

.bg-bg1 {
    background-color: var(--color-bg1)!important
}

.bg-bg3 {
    background-color: var(--color-bg3)!important
}

.bg-line {
    background-color: var(--color-line)!important
}

.bg-t-Primary {
    background-color: var(--color-PrimaryText)!important
}

.\!fill-primaryHover {
    fill: var(--color-primaryHover)!important
}

.\!stroke-primaryHover {
    stroke: var(--color-primaryHover)!important
}

.p-2xs {
    padding: var(--space-2xs)!important
}

.p-m {
    padding: var(--space-m)!important
}

.p-s {
    padding: var(--space-s)!important
}

.p-xl {
    padding: var(--space-xl)!important
}

.p-xs {
    padding: var(--space-xs)!important
}

.px-0 {
    padding-left: 0!important;
    padding-right: 0!important
}

.px-2xs {
    padding-left: var(--space-2xs)!important;
    padding-right: var(--space-2xs)!important
}

.px-4 {
    padding-left: 1rem!important;
    padding-right: 1rem!important
}

.px-5xs {
    padding-left: var(--space-5xs)!important;
    padding-right: var(--space-5xs)!important
}

.px-m {
    padding-left: var(--space-m)!important;
    padding-right: var(--space-m)!important
}

.px-xl {
    padding-left: var(--space-xl)!important;
    padding-right: var(--space-xl)!important
}

.px-xs {
    padding-left: var(--space-xs)!important;
    padding-right: var(--space-xs)!important
}

.py-0 {
    padding-bottom: 0!important;
    padding-top: 0!important
}

.py-2 {
    padding-bottom: .5rem!important;
    padding-top: .5rem!important
}

.py-2xs {
    padding-bottom: var(--space-2xs)!important;
    padding-top: var(--space-2xs)!important
}

.py-3 {
    padding-bottom: .75rem!important;
    padding-top: .75rem!important
}

.py-\[120px\] {
    padding-bottom: 120px!important;
    padding-top: 120px!important
}

.py-\[14px\] {
    padding-bottom: 14px!important;
    padding-top: 14px!important
}

.py-\[1px\] {
    padding-bottom: 1px!important;
    padding-top: 1px!important
}

.py-\[7px\] {
    padding-bottom: 7px!important;
    padding-top: 7px!important
}

.py-m {
    padding-bottom: var(--space-m)!important;
    padding-top: var(--space-m)!important
}

.py-xs {
    padding-bottom: var(--space-xs)!important;
    padding-top: var(--space-xs)!important
}

.pb-2xs {
    padding-bottom: var(--space-2xs)!important
}

.pb-\[19px\] {
    padding-bottom: 19px!important
}

.pl-2xs {
    padding-left: var(--space-2xs)!important
}

.pl-\[132px\] {
    padding-left: 132px!important
}

.pr-0 {
    padding-right: 0!important
}

.pr-4xs {
    padding-right: var(--space-4xs)!important
}

.pr-s {
    padding-right: var(--space-s)!important
}

.pt-m {
    padding-top: var(--space-m)!important
}

.text-center {
    text-align: center!important
}

.text-start {
    text-align: start!important
}

.text-end {
    text-align: end!important
}

.align-middle {
    vertical-align: middle!important
}

.font-semibold {
    font-weight: 600!important
}

.capitalize {
    text-transform: capitalize!important
}

.text-BtnBg {
    color: var(--color-BtnBg)!important
}

.text-DisableBtn {
    color: var(--color-DisableBtn)!important
}

.text-Error {
    color: var(--color-Error)!important
}

.text-IconNormal {
    color: var(--color-IconNormal)!important
}

.text-Line {
    color: var(--color-Line)!important
}

.text-PrimaryText {
    color: var(--color-PrimaryText)!important
}

.text-RedGreenBgText {
    color: var(--color-RedGreenBgText)!important
}

.text-SecondaryText {
    color: var(--color-SecondaryText)!important
}

.text-Success {
    color: var(--color-Success)!important
}

.text-TertiaryText {
    color: var(--color-TertiaryText)!important
}

.text-TextLink {
    color: var(--color-TextLink)!important
}

.text-bg1 {
    color: var(--color-bg1)!important
}

.text-iconNormal {
    color: var(--color-iconNormal)!important
}

.text-primary {
    color: var(--color-primary)!important
}

.text-t-Secondary {
    color: var(--color-SecondaryText)!important
}

.text-t-Tertiary {
    color: var(--color-TertiaryText)!important
}

.text-t-TextBuy {
    color: var(--color-TextBuy)!important
}

.text-t-TextLink {
    color: var(--color-TextLink)!important
}

.text-t-TextSell {
    color: var(--color-TextSell)!important
}

.text-t-brand {
    color: var(--color-textBrand)!important
}

.text-t-disabled {
    color: var(--color-textDisabled)!important
}

.text-t-secondary {
    color: var(--color-textSecondary)!important
}

.text-t-third {
    color: var(--color-textThird)!important
}

.underline {
    text-decoration-line: underline!important
}

.no-underline {
    text-decoration-line: none!important
}

.grayscale {
    --tw-grayscale: grayscale(100%)!important
}

.filter,.grayscale {
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important
}

.transition {
    transition-duration: .15s!important;
    transition-property: color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter!important;
    transition-property: color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter!important;
    transition-property: color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter!important;
    transition-timing-function: cubic-bezier(.4,0,.2,1)!important
}

.transition-all {
    transition-duration: .15s!important;
    transition-property: all!important;
    transition-timing-function: cubic-bezier(.4,0,.2,1)!important
}

.duration-200 {
    transition-duration: .2s!important
}

.ease-in-out {
    transition-timing-function: cubic-bezier(.4,0,.2,1)!important
}

.t-Subtitle1,.typography-Subtitle1 {
    font-size: 20px!important;
    font-weight: 500!important;
    line-height: 26px!important
}

@media only screen and (min-width: 768px) {
    .t-Subtitle1,.typography-Subtitle1 {
        font-size:20px!important;
        font-weight: 600!important;
        line-height: 28px!important
    }
}

.t-Subtitle3,.typography-Subtitle3 {
    font-size: 16px!important;
    font-weight: 500!important;
    line-height: 24px!important
}

@media only screen and (min-width: 768px) {
    .t-Subtitle3,.typography-Subtitle3 {
        font-size:16px!important;
        font-weight: 500!important;
        line-height: 24px!important
    }
}

.t-Subtitle4,.typography-Subtitle4 {
    font-size: 14px!important;
    font-weight: 500!important;
    line-height: 20px!important
}

@media only screen and (min-width: 768px) {
    .t-Subtitle4,.typography-Subtitle4 {
        font-size:14px!important;
        font-weight: 500!important;
        line-height: 22px!important
    }
}

.t-Subtitle5,.typography-Subtitle5 {
    font-size: 12px!important;
    font-weight: 500!important;
    line-height: 18px!important
}

@media only screen and (min-width: 768px) {
    .t-Subtitle5,.typography-Subtitle5 {
        font-size:12px!important;
        font-weight: 500!important;
        line-height: 20px!important
    }
}

.t-Body2,.typography-Body2 {
    font-size: 14px!important;
    font-weight: 400!important;
    line-height: 22px!important
}

@media only screen and (min-width: 768px) {
    .t-Body2,.typography-Body2 {
        font-size:16px!important;
        font-weight: 400!important;
        line-height: 24px!important
    }
}

.t-Body3,.typography-Body3 {
    font-size: 14px!important;
    font-weight: 400!important;
    line-height: 22px!important
}

@media only screen and (min-width: 768px) {
    .t-Body3,.typography-Body3 {
        font-size:14px!important;
        font-weight: 400!important;
        line-height: 20px!important
    }
}

.t-Btn_link2,.typography-Btn_link2 {
    font-size: 14px!important;
    font-weight: 500!important;
    line-height: 22px!important;
    text-decoration-color: currentColor!important;
    text-decoration-line: none!important;
    text-decoration-style: solid!important;
    text-underline-offset: 2px!important
}

@media only screen and (min-width: 768px) {
    .t-Btn_link2,.typography-Btn_link2 {
        font-size:14px!important;
        font-weight: 500!important;
        line-height: 20px!important;
        text-decoration-color: currentColor!important;
        text-decoration-line: underline!important;
        text-decoration-style: solid!important;
        text-underline-offset: 2px!important
    }
}

.t-Caption1,.typography-Caption1 {
    font-size: 12px!important;
    font-weight: 500!important;
    line-height: 16px!important
}

@media only screen and (min-width: 768px) {
    .t-Caption1,.typography-Caption1 {
        font-size:12px!important;
        font-weight: 500!important;
        line-height: 16px!important
    }
}

.t-Caption2,.typography-Caption2 {
    font-size: 12px!important;
    font-weight: 400!important;
    line-height: 16px!important
}

@media only screen and (min-width: 768px) {
    .t-Caption2,.typography-Caption2 {
        font-size:12px!important;
        font-weight: 400!important;
        line-height: 16px!important
    }
}

.t-Tertiary_num3,.typography-Tertiary_num3 {
    font-size: 12px!important;
    font-weight: 400!important;
    line-height: 20px!important
}

@media only screen and (min-width: 768px) {
    .t-Tertiary_num3,.typography-Tertiary_num3 {
        font-size:12px!important;
        font-weight: 400!important;
        line-height: 16px!important
    }
}

.t-headline5,.typography-headline5 {
    font-size: 18px!important;
    font-weight: 600!important;
    line-height: 26px!important
}

@media only screen and (min-width: 768px) {
    .t-headline5,.typography-headline5 {
        font-size:20px!important;
        font-weight: 600!important;
        line-height: 28px!important
    }
}

.t-subtitle4,.typography-subtitle4 {
    font-size: 20px!important;
    font-weight: 500!important;
    line-height: 28px!important
}

@media only screen and (min-width: 768px) {
    .t-subtitle4,.typography-subtitle4 {
        font-size:20px!important;
        font-weight: 500!important;
        line-height: 28px!important
    }
}

.t-subtitle6,.typography-subtitle6 {
    font-size: 16px!important;
    font-weight: 600!important;
    line-height: 24px!important
}

@media only screen and (min-width: 768px) {
    .t-subtitle6,.typography-subtitle6 {
        font-size:16px!important;
        font-weight: 600!important;
        line-height: 24px!important
    }
}

.t-subtitle1,.typography-subtitle1 {
    font-size: 16px!important;
    font-weight: 500!important;
    line-height: 24px!important
}

@media only screen and (min-width: 768px) {
    .t-subtitle1,.typography-subtitle1 {
        font-size:16px!important;
        font-weight: 500!important;
        line-height: 24px!important
    }
}

.t-subtitle2,.typography-subtitle2 {
    font-size: 14px!important;
    font-weight: 500!important;
    line-height: 22px!important
}

@media only screen and (min-width: 768px) {
    .t-subtitle2,.typography-subtitle2 {
        font-size:14px!important;
        font-weight: 500!important;
        line-height: 22px!important
    }
}

.t-body2,.typography-body2 {
    font-size: 14px!important;
    font-weight: 400!important;
    line-height: 22px!important
}

@media only screen and (min-width: 768px) {
    .t-body2,.typography-body2 {
        font-size:16px!important;
        font-weight: 400!important;
        line-height: 24px!important
    }
}

.t-body3,.typography-body3 {
    font-size: 14px!important;
    font-weight: 400!important;
    line-height: 22px!important
}

@media only screen and (min-width: 768px) {
    .t-body3,.typography-body3 {
        font-size:14px!important;
        font-weight: 400!important;
        line-height: 22px!important
    }
}

.t-body4,.typography-body4 {
    font-size: 12px!important;
    font-weight: 500!important;
    line-height: 18px!important
}

@media only screen and (min-width: 768px) {
    .t-body4,.typography-body4 {
        font-size:14px!important;
        font-weight: 500!important;
        line-height: 22px!important
    }
}

.t-body5,.typography-body5 {
    font-size: 12px!important;
    font-weight: 400!important;
    line-height: 18px!important
}

@media only screen and (min-width: 768px) {
    .t-body5,.typography-body5 {
        font-size:14px!important;
        font-weight: 400!important;
        line-height: 22px!important
    }
}

.t-secondaryNum3,.typography-secondaryNum3 {
    font-size: 16px!important;
    font-weight: 500!important;
    line-height: 24px!important
}

@media only screen and (min-width: 768px) {
    .t-secondaryNum3,.typography-secondaryNum3 {
        font-size:16px!important;
        font-weight: 500!important;
        line-height: 24px!important
    }
}

.t-tertiaryNum3,.typography-tertiaryNum3 {
    font-size: 12px!important;
    font-weight: 400!important;
    line-height: 18px!important
}

@media only screen and (min-width: 768px) {
    .t-tertiaryNum3,.typography-tertiaryNum3 {
        font-size:12px!important;
        font-weight: 400!important;
        line-height: 18px!important
    }
}

.subtitle2-1 {
    font-size: 16px!important;
    font-style: normal!important;
    font-weight: 600!important;
    line-height: 24px!important
}

.no-scrollbar::-webkit-scrollbar {
    display: none!important
}

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

.theme-root.dark .filter-shadow {
    background: linear-gradient(90deg,rgba(24,30,37,0) 2.08%,#181e25 97.92%)!important
}

.theme-root.light .filter-shadow {
    background: linear-gradient(90deg,hsla(0,0%,100%,0) 2.08%,#fff 97.92%)!important
}

.favorite-card-view-dragging {
    pointer-events: auto!important
}

.favorite-card-view-dragging,.favorite-card-view-dragging:hover {
    cursor: -webkit-grabbing!important;
    cursor: grabbing!important
}

.favorite-card-view-dragging {
    box-shadow: 0 8px 32px 0 rgba(17,17,26,.05),0 4px 16px 0 rgba(17,17,26,.1)!important
}

.common-shadow {
    box-shadow: 0 2px 6px 0 rgba(24,26,32,.1),0 8px 14px 0 rgba(71,77,87,.08)!important
}

.favorite-listing-view-dragging {
    background-color: var(--color-CardBg)!important;
    box-shadow: 0 2px 6px 0 rgba(24,26,32,.1),0 8px 14px 0 rgba(71,77,87,.08);
    pointer-events: auto!important
}

.favorite-listing-view-dragging,.favorite-listing-view-dragging:hover {
    cursor: -webkit-grabbing!important;
    cursor: grabbing!important
}

@media (max-width: 767px) {
    .favorite-listing-view-dragging {
        z-index:2000
    }
}

.container {
    width: 100%
}

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

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

.bn-modal {
    z-index: 1800
}

@media (min-width: 767px) {
    .narrow-modal .bn-drawer-wrap,.narrow-modal .bn-modal-wrap {
        width:360px!important
    }

    .bn-drawer-wrap,.bn-modal-wrap {
        width: 520px!important
    }
}

.bn-drawer-wrap .bn-modal-content,.bn-modal-wrap .bn-modal-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 528px!important;
    overflow-x: hidden
}

.bn-drawer-wrap .bn-modal-content .name-input>div,.bn-modal-wrap .bn-modal-content .name-input>div {
    align-items: center
}

.bn-drawer-wrap .bn-modal-content .name-input .bn-textField-input,.bn-modal-wrap .bn-modal-content .name-input .bn-textField-input {
    order: 1
}

.bn-drawer-wrap .bn-modal-content .name-input .bn-textField-suffix,.bn-modal-wrap .bn-modal-content .name-input .bn-textField-suffix {
    order: 2
}

.bn-drawer-wrap .bn-modal-content .name-input .bn-textField-clear,.bn-modal-wrap .bn-modal-content .name-input .bn-textField-clear {
    order: 3
}

.bn-drawer-wrap .bn-modal-content .name-input .bn-textField-clear svg,.bn-modal-wrap .bn-modal-content .name-input .bn-textField-clear svg {
    height: 15px;
    width: 15px
}

@media (min-width: 767px) {
    .bn-drawer-wrap .bn-modal-header-main,.bn-modal-wrap .bn-modal-header-main {
        text-align:center
    }
}

.bn-drawer-wrap .bn-modal-footer button,.bn-modal-wrap .bn-modal-footer button {
    flex: 1 1
}

.markets-favorites-table {
    border-collapse: collapse;
    table-layout: fixed
}

@media (max-width: 767px) {
    .markets-favorites-table {
        width:100%!important
    }
}

@media (min-width: 767px) {
    .markets-favorites-table {
        width:1232px!important
    }
}

.markets-favorites-table tbody tr {
    cursor: pointer
}

.markets-favorites-table tr {
    display: flex;
    position: relative
}

.markets-favorites-table th {
    height: 40px
}

.markets-favorites-table td {
    height: 64px
}

.markets-favorites-table td,.markets-favorites-table th {
    align-items: center;
    display: flex;
    justify-content: flex-end;
    text-align: end;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.markets-favorites-table td:first-child,.markets-favorites-table th:first-child {
    justify-content: flex-start;
    padding-left: var(--space-m);
    text-align: start
}

.markets-favorites-table td:last-child,.markets-favorites-table th:last-child {
    padding-right: var(--space-m)
}

@media (min-width: 767px) {
    .markets-favorites-table {
        margin-left:calc(var(--space-m)*-1)
    }

    .markets-favorites-table tr {
        border-radius: var(--radii-m);
        width: 1232px!important
    }

    .markets-favorites-table tr td:first-child,.markets-favorites-table tr th:first-child {
        border-bottom-left-radius: var(--radii-m);
        border-top-left-radius: var(--radii-m)
    }

    .markets-favorites-table tr td:last-child,.markets-favorites-table tr th:last-child {
        border-bottom-right-radius: var(--radii-m);
        border-top-right-radius: var(--radii-m)
    }

    .markets-favorites-table tbody tr:hover {
        background-color: var(--color-selectedBg)
    }
}

@media (min-width: 767px) and (max-width:1023px) {
    .markets-favorites-table td:first-of-type,.markets-favorites-table th:first-of-type {
        background-color:var(--color-BasicBg);
        left: -16px;
        position: -webkit-sticky;
        position: sticky
    }

    .has-scroll .markets-favorites-table td:first-of-type:after,.has-scroll .markets-favorites-table th:first-of-type:after {
        background: linear-gradient(90deg,rgba(71,77,87,.5) 2.08%,rgba(24,26,32,0) 97.92%);
        border-left-color: var(--color-DisableBtn);
        border-color: var(--color-Line);
        border-left-style: solid;
        border-left-width: 1px;
        content: "";
        height: 100%;
        opacity: .2;
        position: absolute;
        right: -24px;
        top: 0;
        width: 24px
    }
}

@media (max-width: 767px) {
    .markets-favorites-table th {
        color:var(--color-SecondaryText);
        height: 1.5rem
    }

    .markets-favorites-table td:not(:first-of-type),.markets-favorites-table th:not(:first-of-type) {
        padding-left: var(--space-m)
    }
}

.favorite-groups-manage-modal.moveable-list-item {
    border-radius: var(--radii-xs);
    height: 4rem;
    padding-left: var(--space-xl);
    padding-right: var(--space-xl);
    z-index: 1900!important
}

@media (max-width: 767px) {
    .favorite-groups-manage-modal.moveable-list-item {
        width:100vw!important
    }
}

@media (min-width: 767px) {
    .favorite-groups-manage-modal.moveable-list-item {
        width:520px!important
    }
}

.favorite-editing-mode.moveable-list-item {
    height: 4rem
}

@media (min-width: 1024px) {
    .favorite-editing-mode.moveable-list-item {
        border-bottom-left-radius:var(--radii-l);
        border-bottom-right-radius: var(--radii-l);
        border-top-left-radius: var(--radii-l);
        border-top-right-radius: var(--radii-l);
        padding-left: var(--space-m);
        padding-right: var(--space-m);
        width: 1232px
    }
}

@media (min-width: 767px) {
    body:has(.bn-mask) {
        height:100vh;
        overflow-y: auto!important
    }
}

@media (max-width: 767px) {
    .favorite-editing-mode.moveable-list-item>div:first-child,.favorite-editing-mode.moveable-list-item>div:last-child,.groups-list>div:first-of-type>div:first-child,.groups-list>div:first-of-type>div:last-child {
        padding-left:var(--space-m);
        padding-right: var(--space-m)
    }

    .manage-groups-modal-content .moveable-list-item {
        padding-left: var(--space-m)!important;
        padding-right: var(--space-m)!important
    }

    .manage-groups-modal-content .groups-list>div:first-of-type>div {
        padding-left: 0;
        padding-right: 0
    }

    .favorite-editing-mode-actions {
        background-color: var(--color-BasicBg);
        bottom: 0;
        position: fixed;
        width: 100%;
        z-index: 2000
    }

    @media (min-width: 767px) {
        .favorite-editing-mode-actions {
            margin-left:calc(var(--space-m)*-1);
            margin-right: calc(var(--space-m)*-1)
        }
    }

    .favorite-editing-mode-actions>div {
        justify-content: space-between!important;
        padding-bottom: var(--space-m);
        padding-bottom: var(--space-xl);
        padding-left: var(--space-m);
        padding-right: var(--space-m);
        padding-top: var(--space-m);
        width: 100%
    }

    .favorite-editing-mode-actions>div>div:first-of-type {
        flex-grow: 1
    }

    body:has(.favorite-editing-mode-actions) #__APP_FOOTER,body:has(.favorite-editing-mode-actions) .DownloadBarMobile {
        display: none
    }

    body:has(.bn-mask) {
        height: 100vh;
        overflow-y: hidden!important
    }
}

.favorite-editing-mode-actions,.manage-group-actions {
    align-items: center;
    display: flex;
    justify-content: space-between
}

.manage-group-actions>div {
    grid-gap: var(--space-2xs);
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: var(--space-2xs)
}

@media (max-width: 767px) {
    .manage-group-actions>div {
        grid-gap:var(--space-4xs);
        gap: var(--space-4xs)
    }
}

.manage-group-actions>div:not(.disabled) {
    cursor: pointer
}

.manage-group-actions>div.disabled {
    color: var(--color-DisabledText);
    cursor: not-allowed
}

.favorite-editing-mode-actions>div:first-of-type {
    grid-gap: var(--space-m);
    align-items: center;
    display: flex;
    gap: var(--space-m)
}

.favorite-editing-mode-actions>div:first-of-type div.action-item {
    grid-gap: var(--space-2xs);
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: var(--space-2xs)
}

@media (max-width: 767px) {
    .favorite-editing-mode-actions>div:first-of-type div.action-item {
        grid-gap:var(--space-5xs);
        gap: var(--space-5xs)
    }
}

.favorite-editing-mode-actions>div:first-of-type div.action-item:not(:first-of-type).disabled {
    color: var(--color-DisabledText);
    cursor: not-allowed
}

.favorite-editing-mode-actions>div:first-of-type div.action-item:not(:first-of-type):not(.disabled) {
    cursor: pointer
}

.favorite-editing-mode-actions>div:first-of-type div.action-item:not(:first-of-type) svg {
    height: 1.25rem;
    width: 1.25rem
}

.groups-list {
    display: flex;
    flex-direction: column
}

.groups-list>div:first-of-type {
    height: 40px
}

@media (max-width: 767px) {
    .groups-list>div:first-of-type {
        height:1.5rem
    }
}

ul.moveable-list {
    align-items: center;
    display: flex;
    flex-direction: column
}

.moveable-list-item.dragged {
    background-color: var(--color-CardBg);
    box-shadow: 0 2px 6px 0 rgba(24,26,32,.1);
    box-shadow: 0 8px 14px 0 rgba(71,77,87,.08);
    cursor: -webkit-grabbing;
    cursor: grabbing
}

.moveable-list-item>div:not(:first-of-type) {
    align-items: center;
    display: flex;
    justify-content: flex-end
}

.moveable-list-item>div:not(:first-of-type) svg {
    color: var(--color-PrimaryText)!important;
    cursor: pointer;
    height: 1.25rem;
    width: 1.25rem
}

.moveable-list-item>div:not(:first-of-type) svg:hover {
    color: var(--color-primaryHover)!important
}

.groups-list>div:first-of-type,.moveable-list-item {
    align-items: center;
    display: flex!important;
    justify-content: space-between;
    width: 100%
}

.groups-list>div:first-of-type>div:first-of-type,.moveable-list-item>div:first-of-type {
    grid-gap: var(--space-2xs);
    align-items: center;
    display: flex;
    flex-grow: 1;
    gap: var(--space-2xs)
}

.groups-list>div:first-of-type>div:not(:first-of-type),.moveable-list-item>div:not(:first-of-type) {
    text-align: end;
    width: 4rem
}

@media (max-width: 767px) {
    .groups-list>div:first-of-type>div:not(:first-of-type),.moveable-list-item>div:not(:first-of-type) {
        width:3.5rem
    }
}

.placeholder\:text-t-disabled::-moz-placeholder {
    color: var(--color-textDisabled)!important
}

.placeholder\:text-t-disabled::placeholder {
    color: var(--color-textDisabled)!important
}

.placeholder\:t-Subtitle3::-moz-placeholder {
    font-size: 16px!important;
    font-weight: 500!important;
    line-height: 24px!important
}

.placeholder\:t-Subtitle3::placeholder {
    font-size: 16px!important;
    font-weight: 500!important;
    line-height: 24px!important
}

@media only screen and (min-width: 768px) {
    .placeholder\:t-Subtitle3::-moz-placeholder {
        font-size:16px!important;
        font-weight: 500!important;
        line-height: 24px!important
    }

    .placeholder\:t-Subtitle3::placeholder {
        font-size: 16px!important;
        font-weight: 500!important;
        line-height: 24px!important
    }
}

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

.hover\:border:hover {
    border-width: 1px!important
}

.hover\:border-Line:hover {
    border-color: var(--color-Line)!important
}

.hover\:bg-CardBg:hover {
    background-color: var(--color-CardBg)!important
}

.hover\:bg-Input:hover {
    background-color: var(--color-Input)!important
}

.hover\:bg-Vessel:hover {
    background-color: var(--color-Vessel)!important
}

.hover\:bg-bg1:hover {
    background-color: var(--color-bg1)!important
}

.hover\:bg-selectedBg:hover {
    background-color: var(--color-selectedBg)!important
}

.hover\:pr-s:hover {
    padding-right: var(--space-s)!important
}

.hover\:text-PrimaryText:hover {
    color: var(--color-PrimaryText)!important
}

.hover\:text-primaryHover:hover {
    color: var(--color-primaryHover)!important
}

.hover\:text-t-brand:hover {
    color: var(--color-textBrand)!important
}

.group:hover .group-hover\:bg-selectedBg {
    background-color: var(--color-selectedBg)!important
}

.group:hover .group-hover\:\!text-BtnBg {
    color: var(--color-BtnBg)!important
}

.group:hover .group-hover\:text-PrimaryText {
    color: var(--color-PrimaryText)!important
}

.group:hover .group-hover\:text-t-disabled {
    color: var(--color-textDisabled)!important
}

.group:has(:focus-visible) .group-\[\:has\(\:focus-visible\)\]\:text-t-disabled {
    color: var(--color-textDisabled)!important
}

@media (max-width: 767px) {
    .mobile\:sticky {
        position:-webkit-sticky!important;
        position: sticky!important
    }

    .mobile\:right-0 {
        right: 0!important
    }

    .mobile\:z-\[1\] {
        z-index: 1!important
    }

    .mobile\:-mx-m {
        margin-left: calc(var(--space-m)*-1)!important;
        margin-right: calc(var(--space-m)*-1)!important
    }

    .mobile\:mx-0 {
        margin-left: 0!important;
        margin-right: 0!important
    }

    .mobile\:mx-m {
        margin-left: var(--space-m)!important;
        margin-right: var(--space-m)!important
    }

    .mobile\:my-m {
        margin-bottom: var(--space-m)!important;
        margin-top: var(--space-m)!important
    }

    .mobile\:-mb-\[4px\] {
        margin-bottom: -4px!important
    }

    .mobile\:mb-m {
        margin-bottom: var(--space-m)!important
    }

    .mobile\:mt-0 {
        margin-top: 0!important
    }

    .mobile\:flex {
        display: flex!important
    }

    .mobile\:\!hidden,.mobile\:hidden {
        display: none!important
    }

    .mobile\:\!h-6,.mobile\:h-6 {
        height: 1.5rem!important
    }

    .mobile\:h-\[40px\] {
        height: 40px!important
    }

    .mobile\:h-\[544px\] {
        height: 544px!important
    }

    .mobile\:h-\[80px\] {
        height: 80px!important
    }

    .mobile\:min-h-\[460px\] {
        min-height: 460px!important
    }

    .mobile\:\!w-6,.mobile\:w-6 {
        width: 1.5rem!important
    }

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

    .mobile\:grow {
        flex-grow: 1!important
    }

    .mobile\:basis-0 {
        flex-basis: 0px!important
    }

    .mobile\:\!grid-cols-1,.mobile\:grid-cols-1 {
        grid-template-columns: repeat(1,minmax(0,1fr))!important
    }

    .mobile\:flex-col {
        flex-direction: column!important
    }

    .mobile\:flex-col-reverse {
        flex-direction: column-reverse!important
    }

    .mobile\:items-start {
        align-items: flex-start!important
    }

    .mobile\:items-end {
        align-items: flex-end!important
    }

    .mobile\:justify-end {
        justify-content: flex-end!important
    }

    .mobile\:justify-center {
        justify-content: center!important
    }

    .mobile\:justify-between {
        justify-content: space-between!important
    }

    .mobile\:gap-12 {
        grid-gap: 3rem!important;
        gap: 3rem!important
    }

    .mobile\:gap-2xs {
        grid-gap: var(--space-2xs)!important;
        gap: var(--space-2xs)!important
    }

    .mobile\:gap-3xs {
        grid-gap: var(--space-3xs)!important;
        gap: var(--space-3xs)!important
    }

    .mobile\:gap-4xs {
        grid-gap: var(--space-4xs)!important;
        gap: var(--space-4xs)!important
    }

    .mobile\:gap-5xs {
        grid-gap: var(--space-5xs)!important;
        gap: var(--space-5xs)!important
    }

    .mobile\:gap-m {
        grid-gap: var(--space-m)!important;
        gap: var(--space-m)!important
    }

    .mobile\:overflow-x-scroll {
        overflow-x: scroll!important
    }

    .mobile\:border-t {
        border-top-width: 1px!important
    }

    .mobile\:border-solid {
        border-style: solid!important
    }

    .mobile\:border-Line {
        border-color: var(--color-Line)!important
    }

    .mobile\:p-m {
        padding: var(--space-m)!important
    }

    .mobile\:px-0 {
        padding-left: 0!important;
        padding-right: 0!important
    }

    .mobile\:px-m {
        padding-left: var(--space-m)!important;
        padding-right: var(--space-m)!important
    }

    .mobile\:px-s {
        padding-left: var(--space-s)!important;
        padding-right: var(--space-s)!important
    }

    .mobile\:px-xl {
        padding-left: var(--space-xl)!important;
        padding-right: var(--space-xl)!important
    }

    .mobile\:py-xl {
        padding-bottom: var(--space-xl)!important;
        padding-top: var(--space-xl)!important
    }

    .mobile\:pb-0 {
        padding-bottom: 0!important
    }

    .mobile\:pt-\[10px\] {
        padding-top: 10px!important
    }

    .mobile\:text-SecondaryText,.mobile\:text-t-Secondary {
        color: var(--color-SecondaryText)!important
    }

    .mobile\:text-t-brand {
        color: var(--color-textBrand)!important
    }

    .mobile\:t-Subtitle3 {
        font-size: 16px!important;
        font-weight: 500!important;
        line-height: 24px!important
    }

    @media only screen and (min-width: 768px) {
        .mobile\:t-Subtitle3 {
            font-size:16px!important;
            font-weight: 500!important;
            line-height: 24px!important
        }
    }

    .mobile\:t-Subtitle4 {
        font-size: 14px!important;
        font-weight: 500!important;
        line-height: 20px!important
    }

    @media only screen and (min-width: 768px) {
        .mobile\:t-Subtitle4 {
            font-size:14px!important;
            font-weight: 500!important;
            line-height: 22px!important
        }
    }

    .mobile\:t-Caption2 {
        font-size: 12px!important;
        font-weight: 400!important;
        line-height: 16px!important
    }

    @media only screen and (min-width: 768px) {
        .mobile\:t-Caption2 {
            font-size:12px!important;
            font-weight: 400!important;
            line-height: 16px!important
        }
    }

    .mobile\:t-subtitle1 {
        font-size: 16px!important;
        font-weight: 500!important;
        line-height: 24px!important
    }

    @media only screen and (min-width: 768px) {
        .mobile\:t-subtitle1 {
            font-size:16px!important;
            font-weight: 500!important;
            line-height: 24px!important
        }
    }

    .mobile\:t-subtitle2 {
        font-size: 14px!important;
        font-weight: 500!important;
        line-height: 22px!important
    }

    @media only screen and (min-width: 768px) {
        .mobile\:t-subtitle2 {
            font-size:14px!important;
            font-weight: 500!important;
            line-height: 22px!important
        }
    }

    .mobile\:t-body5 {
        font-size: 12px!important;
        font-weight: 400!important;
        line-height: 18px!important
    }

    @media only screen and (min-width: 768px) {
        .mobile\:t-body5 {
            font-size:14px!important;
            font-weight: 400!important;
            line-height: 22px!important
        }
    }

    .mobile\:t-caption1 {
        font-size: 12px!important;
        font-weight: 400!important;
        line-height: 18px!important
    }

    @media only screen and (min-width: 768px) {
        .mobile\:t-caption1 {
            font-size:12px!important;
            font-weight: 400!important;
            line-height: 18px!important
        }
    }

    .mobile\:subtitle2-1 {
        font-size: 16px!important;
        font-style: normal!important;
        font-weight: 600!important;
        line-height: 24px!important
    }

    .peer:focus~.mobile\:peer-focus\:hidden {
        display: none!important
    }
}

@media (min-width: 767px) and (max-width:1023px) {
    .tablet\:mx-0 {
        margin-left:0!important;
        margin-right: 0!important
    }

    .tablet\:ml-auto {
        margin-left: auto!important
    }

    .tablet\:block {
        display: block!important
    }

    .tablet\:hidden {
        display: none!important
    }

    .tablet\:h-8 {
        height: 2rem!important
    }

    .tablet\:h-\[88px\] {
        height: 88px!important
    }

    .tablet\:w-8 {
        width: 2rem!important
    }

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

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

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

    .tablet\:min-w-\[1200px\] {
        min-width: 1200px!important
    }

    .tablet\:basis-full {
        flex-basis: 100%!important
    }

    .tablet\:grid-cols-2 {
        grid-template-columns: repeat(2,minmax(0,1fr))!important
    }

    .tablet\:flex-col {
        flex-direction: column!important
    }

    .tablet\:flex-wrap {
        flex-wrap: wrap!important
    }

    .tablet\:items-end {
        align-items: flex-end!important
    }

    .tablet\:justify-between {
        justify-content: space-between!important
    }

    .tablet\:gap-16 {
        grid-gap: 4rem!important;
        gap: 4rem!important
    }

    .tablet\:gap-2xs {
        grid-gap: var(--space-2xs)!important;
        gap: var(--space-2xs)!important
    }

    .tablet\:gap-xl {
        grid-gap: var(--space-xl)!important;
        gap: var(--space-xl)!important
    }

    .tablet\:overflow-x-auto {
        overflow-x: auto!important
    }

    .tablet\:overflow-x-scroll {
        overflow-x: scroll!important
    }

    .tablet\:px-xl {
        padding-left: var(--space-xl)!important;
        padding-right: var(--space-xl)!important
    }

    .tablet\:last\:pr-0:last-child {
        padding-right: 0!important
    }
}

@media (min-width: 1024px) {
    .pc\:col-span-1 {
        grid-column:span 1/span 1!important
    }

    .pc\:col-span-2 {
        grid-column: span 2/span 2!important
    }

    .pc\:col-span-3 {
        grid-column: span 3/span 3!important
    }

    .pc\:mx-\[-16px\] {
        margin-left: -16px!important;
        margin-right: -16px!important
    }

    .pc\:ml-auto {
        margin-left: auto!important
    }

    .pc\:block {
        display: block!important
    }

    .pc\:flex {
        display: flex!important
    }

    .pc\:hidden {
        display: none!important
    }

    .pc\:h-8 {
        height: 2rem!important
    }

    .pc\:h-\[48px\] {
        height: 48px!important
    }

    .pc\:h-\[72px\] {
        height: 72px!important
    }

    .pc\:w-8 {
        width: 2rem!important
    }

    .pc\:\!min-w-\[1232px\] {
        min-width: 1232px!important
    }

    .pc\:grow {
        flex-grow: 1!important
    }

    .pc\:grid-cols-2 {
        grid-template-columns: repeat(2,minmax(0,1fr))!important
    }

    .pc\:grid-cols-3 {
        grid-template-columns: repeat(3,minmax(0,1fr))!important
    }

    .pc\:items-center {
        align-items: center!important
    }

    .pc\:justify-center {
        justify-content: center!important
    }

    .pc\:gap-\[14px\] {
        grid-gap: 14px!important;
        gap: 14px!important
    }

    .pc\:gap-xl {
        grid-gap: var(--space-xl)!important;
        gap: var(--space-xl)!important
    }

    .pc\:gap-x-xl {
        grid-column-gap: var(--space-xl)!important;
        -moz-column-gap: var(--space-xl)!important;
        column-gap: var(--space-xl)!important
    }

    .pc\:gap-y-16 {
        grid-row-gap: 4rem!important;
        row-gap: 4rem!important
    }

    .pc\:px-0 {
        padding-left: 0!important;
        padding-right: 0!important
    }

    .pc\:pb-xl {
        padding-bottom: var(--space-xl)!important
    }
}

@media (min-width: 767px) {
    .noH5\:absolute {
        position:absolute!important
    }

    .noH5\:hidden {
        display: none!important
    }

    .noH5\:h-4 {
        height: 1rem!important
    }

    .noH5\:h-5 {
        height: 1.25rem!important
    }

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

    .noH5\:min-h-\[490px\] {
        min-height: 490px!important
    }

    .noH5\:w-4 {
        width: 1rem!important
    }

    .noH5\:w-5 {
        width: 1.25rem!important
    }

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

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

    .noH5\:items-center {
        align-items: center!important
    }

    .noH5\:justify-end {
        justify-content: flex-end!important
    }

    .noH5\:gap-2xs {
        grid-gap: var(--space-2xs)!important;
        gap: var(--space-2xs)!important
    }

    .noH5\:gap-m {
        grid-gap: var(--space-m)!important;
        gap: var(--space-m)!important
    }

    .noH5\:gap-xl {
        grid-gap: var(--space-xl)!important;
        gap: var(--space-xl)!important
    }

    .noH5\:overflow-y-auto {
        overflow-y: auto!important
    }

    .noH5\:whitespace-nowrap {
        white-space: nowrap!important
    }

    .noH5\:\!border,.noH5\:border {
        border-width: 1px!important
    }

    .noH5\:border-solid {
        border-style: solid!important
    }

    .noH5\:p-xl {
        padding: var(--space-xl)!important
    }

    .noH5\:px-2xs {
        padding-left: var(--space-2xs)!important;
        padding-right: var(--space-2xs)!important
    }

    .noH5\:py-2 {
        padding-bottom: .5rem!important;
        padding-top: .5rem!important
    }

    .noH5\:pt-2xs {
        padding-top: var(--space-2xs)!important
    }

    .noH5\:text-primary {
        color: var(--color-primary)!important
    }

    .noH5\:text-t-Tertiary {
        color: var(--color-TertiaryText)!important
    }

    .noH5\:hover\:border-PrimaryYellow:hover {
        border-color: var(--color-PrimaryYellow)!important
    }
}

.\[\&\+div\]\:relative+div {
    position: relative!important
}

.\[\&\+div\]\:z-\[997\]+div {
    z-index: 997!important
}

.\[\&\:first-child\>div\>\*\:first-child\]\:grow:first-child>div>:first-child {
    flex-grow: 1!important
}

.\[\&\:first-child\>div\>\*\:first-child\]\:bg-BasicBg:first-child>div>:first-child {
    background-color: var(--color-BasicBg)!important
}

.\[\&\:first-child\>div\]\:justify-between:first-child>div {
    justify-content: space-between!important
}

@media (min-width: 1024px) {
    .pc\:\[\&\:first-child\]\:rounded-l-m:first-child {
        border-bottom-left-radius:var(--radii-m)!important;
        border-top-left-radius: var(--radii-m)!important
    }
}

.\[\&\:has\(\:focus-visible\)\]\:w-\[282px\]:has(:focus-visible) {
    width: 282px!important
}

.\[\&\:has\(\:focus-visible\)\]\:border:has(:focus-visible) {
    border-width: 1px!important
}

.\[\&\:has\(\:focus-visible\)\]\:border-primaryHover:has(:focus-visible) {
    border-color: var(--color-primaryHover)!important
}

.\[\&\:has\(\:focus-visible\)\]\:pr-s:has(:focus-visible) {
    padding-right: var(--space-s)!important
}

@media (min-width: 1024px) {
    .pc\:\[\&\:last-child\]\:rounded-r-m:last-child {
        border-bottom-right-radius:var(--radii-m)!important;
        border-top-right-radius: var(--radii-m)!important
    }
}

.\[\&\:not\(\:first-child\)\>div\>\*\:nth-child\(2\)\]\:hidden:not(:first-child)>div>:nth-child(2) {
    display: none!important
}

@media (min-width: 767px) and (max-width:1023px) {
    .\[\&\:nth-child\(2\)\]\:tablet\:hidden:nth-child(2) {
        display:none!important
    }
}

.\[\&\>\*\:first-child\>div\>div\:has\(svg\)\]\:pr-4xs>:first-child>div>div:has(svg) {
    padding-right: var(--space-4xs)!important
}

.\[\&\>\*\:first-child\>div\>div\]\:px-2xs>:first-child>div>div {
    padding-left: var(--space-2xs)!important;
    padding-right: var(--space-2xs)!important
}

.\[\&\>\*\:first-child\>div\]\:px-0>:first-child>div {
    padding-left: 0!important;
    padding-right: 0!important
}

.\[\&\>\*\:first-child\>div\]\:py-\[1px\]>:first-child>div {
    padding-bottom: 1px!important;
    padding-top: 1px!important
}

.\[\&\>\*\:first-child\]\:gap-2xs>:first-child {
    grid-gap: var(--space-2xs)!important;
    gap: var(--space-2xs)!important
}

.\[\&\>\*\:first-child\]\:gap-m>:first-child {
    grid-gap: var(--space-m)!important;
    gap: var(--space-m)!important
}

@media (max-width: 767px) {
    .mobile\:\[\&\>\*\:first-child\]\:gap-m>:first-child {
        grid-gap:var(--space-m)!important;
        gap: var(--space-m)!important
    }
}

.\[\&\>\*\:last-child\]\:h-0>:last-child {
    height: 0!important
}

.\[\&\>\*\>div\]\:pb-\[6px\]>*>div {
    padding-bottom: 6px!important
}

.\[\&\>\*\>div\]\:pt-0>*>div {
    padding-top: 0!important
}

.\[\&\>\*\]\:overflow-y-hidden>* {
    overflow-y: hidden!important
}

.\[\&\>div\:first-child\>div\>div\]\:text-xs>div:first-child>div>div {
    font-size: .75rem!important;
    line-height: 1rem!important
}

.\[\&\>div\:first-child\>div\]\:h-\[32px\]>div:first-child>div {
    height: 32px!important
}

.\[\&\>div\:first-child\>div\]\:items-center>div:first-child>div {
    align-items: center!important
}

.\[\&\>div\:first-child\>div\]\:py-0>div:first-child>div {
    padding-bottom: 0!important;
    padding-top: 0!important
}

.\[\&\>div\:first-child\]\:min-h-fit>div:first-child {
    min-height: -moz-fit-content!important;
    min-height: -webkit-fit-content!important;
    min-height: fit-content!important
}

.\[\&\>div\:first-of-type\]\:\!px-2xs>div:first-of-type {
    padding-left: var(--space-2xs)!important;
    padding-right: var(--space-2xs)!important
}

.\[\&\>div\:not\(\:first-child\)\>div\:hover\]\:bg-selectedBg>div:not(:first-child)>div:hover {
    background-color: var(--color-selectedBg)!important
}

.\[\&\>div\:not\(\:first-child\)\>div\]\:flex>div:not(:first-child)>div {
    display: flex!important
}

.\[\&\>div\:not\(\:first-child\)\>div\]\:h-\[38px\]>div:not(:first-child)>div {
    height: 38px!important
}

.\[\&\>div\:not\(\:first-child\)\>div\]\:items-center>div:not(:first-child)>div {
    align-items: center!important
}

.\[\&\>div\>div\>div\]\:p-0>div>div>div {
    padding: 0!important
}

.\[\&\>div\>div\]\:rounded-xs>div>div {
    border-radius: var(--radii-xs)!important
}

.\[\&\>div\>div\]\:p-2xs>div>div {
    padding: var(--space-2xs)!important
}

.\[\&\>div\]\:flex-nowrap>div {
    flex-wrap: nowrap!important
}

.\[\&\>div\]\:rounded-s>div {
    border-end-start-radius: .25rem!important;
    border-radius: var(--radii-s)!important;
    border-start-start-radius: .25rem!important
}

.\[\&\>div\]\:border-Line>div {
    border-color: var(--color-Line)!important
}

.\[\&\>div\]\:bg-bg1>div {
    background-color: var(--color-bg1)!important
}

.\[\&\>div\]\:hover\:border-primaryHover:hover>div {
    border-color: var(--color-primaryHover)!important
}

.\[\&\>svg\]\:ml-0>svg {
    margin-left: 0!important
}

.\[\&\>svg\]\:text-iconNormal>svg {
    color: var(--color-iconNormal)!important
}

.\[\&_\.bn-tab\:has\(\*\.left-tab\)\]\:-mr-2xs .bn-tab:has(.left-tab) {
    margin-right: calc(var(--space-2xs)*-1)!important
}

@media (min-width: 767px) {
    .noH5\:\[\&_\.bn-tab\]\:px-\[14px\] .bn-tab {
        padding-left:14px!important;
        padding-right: 14px!important
    }

    .noH5\:\[\&_\.bn-tab\]\:font-semibold .bn-tab {
        font-weight: 600!important
    }
}

.after\:\[\&_div\]\:bg-primary div:after {
    background-color: var(--color-primary)!important;
    content: var(--tw-content)!important
}

.after\:\[\&_div\]\:bg-none div:after {
    background-image: none!important;
    content: var(--tw-content)!important
}

.\[\&_input\]\:\!w-\[22px\] input {
    width: 22px!important
}

.\[\&_input\]\:grow input {
    flex-grow: 1!important
}

.\[\&_input\]\:\!px-0 input {
    padding-left: 0!important;
    padding-right: 0!important
}

.\[\&_input\]\:\!py-4xs input {
    padding-bottom: var(--space-4xs)!important;
    padding-top: var(--space-4xs)!important
}

.\[\&_input\]\:text-\[12px\] input {
    font-size: 12px!important
}

.\[\&_input\]\:font-normal input {
    font-weight: 400!important
}

.\[\&_input\]\:leading-\[16px\] input {
    line-height: 16px!important
}

.\[\&_input\]\:\!text-PrimaryText input {
    color: var(--color-PrimaryText)!important
}

.\[\&_input\]\:t-subtitle1 input {
    font-size: 16px!important;
    font-weight: 500!important;
    line-height: 24px!important
}

@media only screen and (min-width: 768px) {
    .\[\&_input\]\:t-subtitle1 input {
        font-size:16px!important;
        font-weight: 500!important;
        line-height: 24px!important
    }
}

.\[\&_li_\*\]\:\!text-PrimaryText li * {
    color: var(--color-PrimaryText)!important
}

.\[\&_svg\]\:h-3 svg {
    height: .75rem!important
}

.\[\&_svg\]\:w-3 svg {
    width: .75rem!important
}

.\[\&_svg\]\:text-iconNormal svg {
    color: var(--color-iconNormal)!important
}

@media (min-width: 767px) and (max-width:1023px) {
    .tablet\:\[\&_tr\>\*\:first-child\>div\]\:-ml-m tr>:first-child>div {
        margin-left:calc(var(--space-m)*-1)!important
    }
}

.\[\&_tr\>\*\:first-child\]\:sticky tr>:first-child {
    position: -webkit-sticky!important;
    position: sticky!important
}

.\[\&_tr\>\*\:first-child\]\:left-0 tr>:first-child {
    left: 0!important
}

.\[\&_tr\>\*\:first-child\]\:z-\[998\] tr>:first-child {
    z-index: 998!important
}

.\[\&_tr\>td\]\:px-4 tr>td {
    padding-left: 1rem!important;
    padding-right: 1rem!important
}