@charset "UTF-8";

@keyframes pulse {
    0% {
        transform: scale(.7);
        opacity: .4
    }

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

@keyframes real-time-pulse {
    0% {
        transform: scale(.2);
        opacity: .3
    }

    50%,
    to {
        transform: scale(1);
        opacity: 0
    }
}

@keyframes pop {
    0% {
        transform: scale(1);
        fill: currentColor;
        stroke: currentColor
    }

    7% {
        fill: var(--negative-color);
        stroke: var(--negative-color);
        transform: scale(1.4)
    }

    15% {
        transform: scale(.9)
    }

    20% {
        transform: scale(1)
    }

    90% {
        fill: var(--negative-color);
        stroke: var(--negative-color)
    }

    to {
        fill: currentColor;
        stroke: currentColor
    }
}

@keyframes explode {
    0% {
        transform: scale(.3);
        opacity: 0
    }

    10% {
        transform: scale(.9);
        opacity: 1
    }

    65% {
        transform: scale(1.1);
        opacity: 1
    }

    90% {
        transform: scale(1.3);
        opacity: 0
    }

    to {
        transform: scale(1.3);
        opacity: 0
    }
}

@keyframes price-up {
    0% {
        color: var(--secondary-positive-color)
    }

    50% {
        color: var(--secondary-positive-color)
    }

    to {
        color: var(--text-color)
    }
}

@keyframes price-down {
    0% {
        color: var(--secondary-negative-color)
    }

    50% {
        color: var(--secondary-negative-color)
    }

    to {
        color: var(--text-color)
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1
    }

    50% {
        opacity: 1
    }

    75% {
        opacity: .9
    }

    to {
        opacity: 0
    }
}

.logo {
    appearance: none;
    display: inline-flex;
    align-items: center;
    padding: 1rem;
    margin: -1.1rem -1rem -1rem;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    background: transparent;
    border: 0;
    line-height: 1;
    font-size: 2.5rem;
    color: var(--text-color);
    vertical-align: middle;
    letter-spacing: 0;
    font-weight: 600
}

.logo:focus-visible {
    outline: .2rem auto var(--primary-color);
    outline-offset: 0
}

.logo__img {
    width: 150px;
    height: 46px;
    vertical-align: middle;
    margin: 0 .9rem 0 0;
    color: transparent
}

.logo__img--elite-account {
    width: 3.4rem;
    height: 3rem
}

.logo__badge--elite-account {
    position: relative;
    margin-left: 1rem;
    font-size: 1.3rem;
    background: linear-gradient(90deg, #f46100, #fcb200);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -ms-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
    color: transparent;
    padding: .5rem .67rem
}

.logo__badge--elite-account:before {
    content: "";
    position: absolute;
    inset: 0;
    padding: .1rem;
    background: linear-gradient(90deg, #f46100, #fcb200);
    border-radius: .3rem;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none
}

@media(max-width:600px) {
    .logo {
        font-size: 1.9rem
    }

    .logo__img {

        margin: 0 .7rem 0 0
    }
}

.header {
    border-bottom: .1rem solid var(--border-color)
}

.header__wrapper {
    display: flex;
    align-items: center;
    padding: 0rem 5rem;
    max-width: 144rem;
    height: 7.2rem;
    margin: 0 auto -.1rem
}

.navigation {
    display: flex;
    margin: 0 -1.5rem 0 auto;
    padding: 0
}

.navigation__item {
    padding: 2.4rem 1rem 2.7rem;
    height: 7.2rem;
    margin: 0;
    position: relative;
    color: var(--text-color);
    font-size: 1.4rem;
    font-weight: 600;
    text-decoration: none;
    transition: color .1s ease-out;
    white-space: nowrap;
    cursor: pointer
}

.navigation__item svg {
    vertical-align: middle;
    margin: 0 .5rem 0 0;
    fill: currentColor;
    stroke: currentColor;
    stroke-width: .15rem;
    transition: stroke-width .1s ease-out
}

.navigation__item svg.navigation__caret {
    margin: 0 0 0 .5rem
}

.navigation__item:after {
    content: "";
    position: absolute;
    margin: auto;
    right: 1rem;
    bottom: 0;
    left: 1rem;
    height: .2rem;
    background-color: transparent;
    transition: background-color .1s ease-out
}

@media(hover:hover) {
    .navigation__item:hover {
        color: var(--secondary-text-color)
    }

    .navigation__item:hover:after {
        background-color: var(--secondary-text-color)
    }
}

.navigation__item--active,
.navigation__item.dropdown-active {
    font-weight: 600
}

.navigation__item--active svg,
.navigation__item.dropdown-active svg {
    stroke-width: .18rem
}

.navigation__item--active:after,
.navigation__item.dropdown-active:after {
    height: .2rem;
    background-color: var(--text-color)
}

.navigation__trigger-link {
    color: inherit;
    display: inline-block;
    text-decoration: none
}

.navigation__badge {
    display: inline-block;
    margin: -.5rem .2rem 0 -1.6rem;
    vertical-align: middle;
    border: .2rem solid var(--background-color);
    background-color: currentColor;
    font-size: .9rem;
    font-weight: 600;
    border-radius: 1.1rem;
    line-height: 1;
    padding: .3rem .4rem;
    min-width: 1.9rem;
    min-height: 1.9rem;
    text-align: center;
    transition: background-color .1s ease-out
}

.navigation__badge--small {
    min-width: 1.5rem;
    min-height: 1.5rem;
    margin: 0rem 0rem 0rem -.7rem;
    padding: .2rem .4rem;
    font-size: .7rem;
    position: absolute
}

.navigation__badge--non-sticky {
    margin: -.1rem 0rem 0rem
}

.navigation__count {
    color: var(--background-color)
}

.header__cta {
    margin: -.2rem 0 0 3rem
}

@media(max-width:1365px) {
    .navigation__item {
        padding: 2.4rem 1.2rem 2.7rem
    }

    .navigation__item svg {
        margin: 0
    }

    .navigation__item:after {
        right: .5rem;
        left: .5rem
    }

    .navigation__label,
    .navigation__caret {
        display: none
    }
}

@media(max-width:1179px) {
    .navigation__item {
        display: none
    }

    .navigation__item--show-on-mobile {
        display: block
    }
}

@media(max-width:600px) {
    .header__wrapper {
        height: 5.8rem;
        padding: 0rem 2rem
    }

    .header .sign-in-button {
        padding: .6rem 1.1rem .8rem;
        margin: 0 0 0 1.5rem
    }

    .header .sign-in-button__icon {
        margin: 0
    }

    .navigation {
        margin: 0 -.7rem 0 auto
    }

    .navigation__item {
        height: 5.8rem;
        padding: 1.8rem .7rem 1.9rem;
        margin: 0rem
    }

    .navigation__item--active:after {
        width: 2.2rem;
        left: .7rem
    }

    .navigation__item svg {
        margin-right: 0
    }

    .navigation__badge {
        margin-right: -.2rem;
        margin-left: -1.1rem
    }

    .navigation__badge--non-sticky {
        margin: -.1rem 0 0
    }
}

.dropdown {
    display: none;
    position: absolute;
    z-index: 99;
    top: -999px;
    left: -999px;
    width: 22rem;
    padding: 0;
    border: 0;
    margin: 0;
    overflow: visible;
    border-radius: .5rem
}

.dropdown::backdrop {
    background-color: transparent
}

.dropdown:focus {
    outline: none
}

.dropdown--fit-content {
    width: fit-content
}

.dropdown--medium {
    width: 32rem
}

.dropdown--wide {
    width: 46rem
}

.dropdown:not([open]) {
    display: none
}

.dropdown[open] {
    display: block
}

.dropdown__triangle {
    position: absolute;
    top: -1.1rem;
    width: 0;
    height: 0;
    border-left: 1.1rem solid transparent;
    border-right: 1.1rem solid transparent;
    border-bottom: 1.1rem solid var(--dropdown-background-color);
    z-index: 1
}

.dropdown__panel {
    display: flex;
    flex-direction: column;
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;
    border-radius: .5rem;
    background-color: var(--dropdown-background-color);
    box-shadow: var(--box-shadow);
    min-height: 10rem
}

.dropdown__header {
    display: flex;
    flex-shrink: 0;
    justify-content: space-between;
    align-items: center;
    padding: 1.7rem 3rem 1.6rem;
    border-bottom: .1rem solid transparent;
    position: relative;
    min-height: 5.4rem;
    transition: border-color .1s ease-out;
    z-index: 5
}

.dropdown__header--scrolling {
    border-color: var(--border-color)
}

.dropdown__header--mobile-only {
    display: none
}

.dropdown__header-left,
.dropdown__header-right {
    display: flex;
    align-items: center;
    flex: 2 1
}

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

.dropdown__search-form {
    flex-grow: 100;
    padding: 0 1.5rem 0 0
}

.dropdown__back-button {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
    appearance: none;
    background: none;
    border: none;
    padding: 1rem;
    margin: -1rem;
    cursor: pointer;
    color: var(--text-color);
    font-size: 1.3rem;
    font-weight: 600;
    transition: color .1s ease-out, transform .1s ease-out;
    user-select: none;
    -webkit-user-select: none
}

@media(hover:hover) {
    .dropdown__back-button:hover {
        color: var(--secondary-text-color)
    }
}

.dropdown__back-button:active {
    transform: scale(.95)
}

.dropdown__back-button svg {
    display: block;
    stroke: currentColor
}

.dropdown__title {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-color);
    text-align: center;
    margin: 0 1rem;
    text-wrap: balance;
    transition: transform .1s ease-out, opacity .1s ease-out
}

.dropdown__close-button {
    display: inline-block;
    appearance: none;
    background: none;
    border: none;
    padding: 1rem;
    margin: -1rem;
    cursor: pointer;
    color: var(--text-color);
    transition: color .1s ease-out;
    border-radius: .3rem
}

.dropdown__close-button:hover {
    color: var(--secondary-text-color)
}

.dropdown__close-button:focus {
    outline: none
}

.dropdown__close-button:focus-visible {
    outline: .2rem solid var(--primary-color)
}

.dropdown__close-button svg {
    display: block;
    stroke: currentColor
}

.dropdown__content {
    overflow-y: auto;
    overscroll-behavior: contain;
    overflow-x: hidden;
    height: 100%;
    min-height: 8rem
}

.dropdown__body {
    padding: 0rem 3rem 3rem
}

.dropdown__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 3rem;
    border-top: .1rem solid var(--border-color);
    min-height: 4.7rem
}

.dropdown__loading {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 5.4rem;
    left: 0;
    bottom: 0;
    right: 0;
    padding-bottom: 2.5rem;
    pointer-events: none;
    background-color: var(--dropdown-background-color);
    z-index: 4
}

.dropdown--hide-header .dropdown__loading {
    top: 0
}

.dropdown__spinner {
    display: block;
    height: 2.4rem;
    width: 2.4rem
}

.dropdown__ad-text {
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--text-color)
}

@keyframes backdrop-fade {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@media(max-width:600px) {
    .dropdown {
        top: 0 !important;
        left: 0 !important;
        position: fixed;
        width: 100dvw;
        max-width: 100dvw;
        max-height: 100dvh !important;
        overscroll-behavior: contain;
        border-radius: 0
    }

    .dropdown::backdrop {
        background-color: #001a2f99;
        opacity: 0
    }

    .dropdown:not([open])::backdrop {
        animation: backdrop-fade 80ms ease backwards;
        animation-direction: reverse
    }

    .dropdown[open]::backdrop {
        animation: backdrop-fade .25s ease forwards
    }

    .dropdown__triangle {
        display: none
    }

    .dropdown__panel {
        margin-top: 0 !important;
        border-radius: 0
    }

    .dropdown__header {
        padding-left: 2rem;
        padding-right: 2rem
    }

    .dropdown__header--mobile-only {
        display: flex
    }
}

.menu {
    color: var(--text-color)
}

.menu__section {
    padding: 2rem 3rem;
    border-bottom: .1rem solid var(--border-color)
}

.menu__section:last-child {
    border-bottom: 0
}

.menu hr {
    margin: 0 0 .9rem
}

.menu__title {
    font-size: 1.4rem;
    font-weight: 700;
    margin: .9rem 0 1rem
}

.menu__list {
    padding: 0;
    margin: 0;
    list-style: none
}

.menu__item {
    display: block
}

.menu__link {
    appearance: none;
    display: block;
    text-decoration: none;
    background: none;
    border: 0;
    color: var(--text-color);
    font-size: 1.4rem;
    font-weight: 600;
    transition: color .1s ease-out;
    padding: .9rem 0 1rem;
    margin: 0;
    cursor: pointer;
    width: 100%;
    text-align: left;
    position: relative
}

.menu__link:hover {
    color: var(--secondary-text-color)
}

.menu__link svg {
    vertical-align: middle;
    fill: currentColor;
    stroke: currentColor
}

.menu__link--ghost {
    color: var(--placeholder-color);
    font-weight: 500;
    cursor: default
}

.menu__link--ghost:hover {
    color: var(--placeholder-color)
}

.menu__list--sub .menu__link {
    font-weight: 500
}

.menu__icon {
    display: inline-block;
    min-width: 1.6rem;
    text-align: center;
    margin: -.5rem .8rem 0 0;
    vertical-align: middle
}

.menu__badge {
    display: inline-block;
    height: fit-content;
    color: var(--background-color);
    background-color: var(--text-color);
    border-radius: .3rem;
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    padding: .4rem .5rem;
    vertical-align: middle;
    margin: -.2rem 0 0 .5rem
}

.menu__item-accordion {
    appearance: none;
    display: block;
    text-decoration: none;
    background: none;
    border: 0;
    color: var(--text-color);
    font-size: 1.4rem;
    font-weight: 600;
    transition: color .1s ease-out;
    padding: .9rem 0 1rem;
    margin: 0;
    cursor: pointer;
    width: 100%;
    text-align: left;
    position: relative
}

.menu__item-accordion:hover {
    color: var(--secondary-text-color)
}

.menu__item-accordion svg {
    vertical-align: middle;
    fill: currentColor;
    stroke: currentColor
}

.menu__item-accordion.open .menu__accordion-caret {
    transform: rotate(180deg)
}

.menu__item-accordion-body {
    display: none
}

.menu__item-accordion.open+.menu__item-accordion-body {
    display: block;
    margin-left: 2.4rem
}

.menu__accordion-button {
    appearance: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.1rem 0;
    cursor: pointer;
    font-weight: 500;
    width: 100%;
    color: var(--text-color);
    border-color: var(--border-color);
    border-style: solid;
    border-width: .1rem 0 0 0;
    transition: color .1s ease-out;
    font-size: 1.4rem;
    background: none
}

.menu__accordion-button--first {
    border-width: 0
}

.menu__accordion-button:hover {
    color: var(--secondary-text-color)
}

.menu__accordion-caret {
    flex-shrink: 0;
    margin-left: 1rem;
    stroke: currentColor;
    transition: transform .3s ease-out
}

.menu__accordion-button.open .menu__accordion-caret {
    transform: rotate(180deg)
}

.menu__accordion-body {
    display: none
}

.menu__accordion-button.open+.menu__accordion-body {
    display: block;
    margin-left: 1.6rem
}

.menu__account {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    margin-top: 1rem
}

.menu__advertise {
    padding: 1rem 1rem 2rem;
    text-align: center
}

.menu__banner {
    padding: .9rem 2rem;
    margin: .9rem 0 1rem;
    border: .1rem solid var(--border-color);
    border-radius: .3rem;
    text-align: left;
    height: 4.6rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    overflow: hidden;
    flex-wrap: nowrap
}

.menu__banner .logo__img--elite-account {
    width: 2.4rem;
    height: 2rem;
    margin: 0 .5rem .3rem 0
}

.menu__banner .logo__img--deal {
    width: 1.6rem;
    height: 1.6rem;
    margin: 0 .3rem 0 0
}

.menu__banner a {
    text-underline-offset: .2rem;
    flex-shrink: 0
}

.menu__banner .menu__banner-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: fit-content;
    flex: 1
}

.menu__download {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    padding: 1.2rem 0
}

.menu__download-title {
    font-size: 1.6rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-color)
}

.menu__download-buttons {
    display: flex;
    flex-direction: column;
    gap: 1.2rem
}

.menu__download-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    width: 100%;
    padding: 1.4rem 1.6rem;
    border: .1rem solid var(--border-color);
    border-radius: .6rem;
    text-decoration: none;
    color: var(--text-color);
    background-color: var(--dropdown-background-color);
    transition: border-color .12s ease-out, box-shadow .12s ease-out
}

.menu__download-button:hover {
    border-color: var(--text-color)
}

.menu__download-button[aria-disabled=true] {
    pointer-events: none;
    box-shadow: none;
    transform: none
}

.menu__download-button--ghost {
    background-color: var(--disabled-background-color);
    border-color: var(--border-color);
    color: var(--placeholder-color)
}

.menu__download-icon {
    width: 2.6rem;
    height: 2.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.menu__download-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
    stroke: none
}

.menu__download-content {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap
}

.menu__download-platform {
    font-size: 1.4rem;
    font-weight: 500
}

.menu__download-rating {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--text-color)
}

.menu__download-rating svg {
    fill: #fbbf24;
    stroke: none;
    flex-shrink: 0
}

.menu__download-soon {
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--placeholder-color)
}

@media(max-width:600px) {
    .menu__download-buttons {
        flex-direction: column
    }

    .menu__download-button {
        width: 100%;
        justify-content: center
    }

    .menu__download-content {
        justify-content: center
    }
}

.coins-dropdown-menu {
    width: 25rem;
    padding: 1.5rem;
    color: var(--text-color)
}

.coins-dropdown-menu__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .2rem
}

.coins-dropdown-menu__item {
    margin: 0
}

.coins-dropdown-menu__link {
    text-decoration: none;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 1rem;
    border-radius: .4rem;
    padding: .9rem 1.4rem;
    font-size: 1.4rem;
    font-weight: 500;
    transition: color .1s ease-out, background-color .1s ease-out
}

.coins-dropdown-menu__link:hover {
    color: var(--secondary-text-color);
    background-color: var(--hover-background-color);
    font-weight: 600
}

.coins-dropdown-menu__link:focus-visible {
    outline: .2rem solid var(--focus-color);
    outline-offset: .1rem
}

.coins-dropdown-menu__link--active {
    background-color: var(--disabled-background-color);
    color: var(--text-color)
}

.coins-dropdown-menu__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    flex-shrink: 0
}

.coins-dropdown-menu__icon svg {
    fill: currentColor;
    stroke: currentColor
}

.coins-dropdown-menu__label {
    line-height: 1.3;
    letter-spacing: -.01em;
    white-space: nowrap
}

.sub-navigation {
    display: inline-flex;
    padding: 0 1rem;
    margin: 0;
    list-style: none
}

.sub-navigation:first-child {
    padding-left: 0
}

.sub-navigation:last-child {
    padding-right: 0
}

.sub-navigation__item {
    display: block
}

.sub-navigation__link {
    display: flex;
    align-items: center;
    gap: .5rem;
    position: relative;
    text-decoration: none;
    color: var(--text-color);
    transition: color .1s ease-out;
    white-space: nowrap;
    padding: 1.7rem 1rem 1.8rem;
    margin: 0;
    height: 5.4rem
}

.sub-navigation__link svg {
    fill: currentColor;
    stroke: currentColor
}

.sub-navigation__link:after {
    content: "";
    position: absolute;
    margin: auto;
    right: 1rem;
    bottom: 0;
    left: 1rem;
    height: .1rem;
    background-color: transparent;
    transition: background-color .1s ease-out
}

@media(hover:hover) {
    .sub-navigation__link:hover {
        color: var(--secondary-text-color)
    }

    .sub-navigation__link:hover:after {
        background-color: var(--secondary-text-color)
    }
}

.sub-navigation__link--active {
    font-weight: 600
}

.sub-navigation__link--active:after {
    height: .2rem;
    background-color: var(--text-color)
}

.sub-navigation__badge {
    display: inline-block;
    height: fit-content;
    color: var(--background-color);
    background-color: var(--text-color);
    border-radius: .3rem;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    padding: .3rem;
    vertical-align: middle;
    margin: 0 0 0 .2rem
}

.sub-navigation+.sub-navigation {
    position: relative
}

.sub-navigation+.sub-navigation:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 0;
    height: 50%;
    border-left: .1rem solid var(--border-color)
}

@media(max-width:1179px) {
    .sub-navigation__item--order-1 {
        order: 1
    }

    .sub-navigation__item--order-2 {
        order: 2
    }

    .sub-navigation__item--order-3 {
        order: 3
    }

    .sub-navigation__item--order-4 {
        order: 4
    }

    .sub-navigation__item--order-5 {
        order: 5
    }

    .sub-navigation__item--order-6 {
        order: 6
    }

    .sub-navigation__item--order-7 {
        order: 7
    }

    .sub-navigation__item--order-8 {
        order: 8
    }

    .sub-navigation__item--order-9 {
        order: 9
    }

    .sub-navigation__item--order-10 {
        order: 10
    }

    .sub-navigation__item--order-11 {
        order: 11
    }

    .sub-navigation__item--order-12 {
        order: 12
    }

    .sub-navigation__item--order-13 {
        order: 13
    }

    .sub-navigation__item--order-14 {
        order: 14
    }

    .sub-navigation__item--order-15 {
        order: 15
    }

    .sub-navigation__item--order-16 {
        order: 16
    }

    .sub-navigation__item--order-17 {
        order: 17
    }

    .sub-navigation__item--order-18 {
        order: 18
    }
}

@media(max-width:600px) {
    .sub-navigation {
        padding: 0 .8rem
    }
}

.action-buttons {
    display: flex;
    gap: 1rem;
    padding: .1rem 3rem 0;
    justify-content: stretch;
    flex-wrap: wrap
}

.action-buttons__button {
    display: flex;
    appearance: none;
    justify-content: space-between;
    align-items: center;
    padding: 0 1.2rem;
    height: 4.2rem;
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--text-color);
    background: none;
    cursor: pointer;
    transition: border-color .1s ease-out;
    border: .1rem solid var(--border-color);
    border-radius: .3rem
}

.action-buttons__button--fluid {
    flex-grow: 100
}

@media(hover:hover) {
    .action-buttons__button:hover {
        border-color: var(--text-color)
    }
}

.action-buttons__button.dropdown-active {
    border-color: var(--text-color)
}

.action-buttons__button svg.stroke {
    stroke: currentColor
}

.action-buttons__button svg.fill {
    fill: var(--background-color)
}

.action-buttons__button-tab {
    gap: .2rem;
    padding: 0 1.2rem;
    width: 18rem;
    max-width: 18rem;
    text-decoration: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 0rem;
    cursor: default;
    transition: border-color .1s ease-out
}

.action-buttons__button-tab--medium {
    width: 22rem;
    max-width: 22rem
}

.action-buttons__button-tab-wrapper {
    display: flex;
    align-items: center
}

.action-buttons__button-tab-wrapper:hover .action-buttons__button-tab,
.action-buttons__button-tab-wrapper:hover .action-buttons__button-tab-select {
    border-color: var(--text-color)
}

.action-buttons__button-tab-close {
    display: flex;
    align-items: center;
    justify-content: center;
    stroke: var(--text-color);
    padding: 1.5rem .5rem
}

.action-buttons__button-tab-close:hover {
    transform: scale(1.2)
}

.action-buttons__button-tab-logo-name {
    width: 10rem;
    max-width: 10rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.action-buttons__button-tab-logo-name--medium {
    width: 14rem;
    max-width: 14rem
}

.action-buttons__button-tab-logo-name-wrapper {
    display: flex;
    align-items: center;
    gap: .5rem
}

.action-buttons__button-tab-select {
    display: flex;
    align-items: center;
    height: 4.2rem;
    color: var(--text-color);
    border-radius: .3rem;
    border: .1rem solid var(--border-color);
    padding: 0 1.2rem;
    padding: 2rem;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    transition: border-color .1s ease-out
}

.action-buttons__button-tab-select svg.stroke {
    stroke: currentColor
}

.action-buttons__caret {
    flex-shrink: 0;
    margin: 0 0 0 1rem
}

@media(max-width:600px) {
    .action-buttons {
        padding: .1rem 2rem 0
    }

    .action-buttons__button-tab {
        width: 16rem;
        min-width: 0;
        padding: 0 1.2rem
    }

    .action-buttons__button-tab-logo-name {
        width: 11rem
    }
}

.table-container {
    position: relative
}

.table {
    scroll-margin-top: 5.4rem
}

.table-header-flex {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.table table {
    width: 100%;
    border-spacing: 0;
    border: .1rem solid var(--border-color);
    border-radius: .5rem
}

.table table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--background-color)
}

.table__scroll-x {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch
}

.table__scroll-x table {
    min-width: 68rem
}

.table.table--single-x-scroll {
    --table-sync-x-col-1: 5.2rem;
    --table-sync-x-col-2: 4.4rem;
    --table-sync-x-col-3: 17rem;
    --table-sync-x-metric-col: 15.3rem;
    --table-sync-x-metric-sm-col: 10rem;
    --table-sync-x-rendered-metric-col: var(--table-sync-x-metric-col);
    --table-sync-x-action-col: 10rem;
    --table-ad-overlay-height: 6rem;
    --table-sync-x-table-width: calc(var(--table-sync-x-col-1) + var(--table-sync-x-col-2) + var(--table-sync-x-col-3) + var(--table-sync-x-metric-col) + var(--table-sync-x-metric-col) + var(--table-sync-x-metric-col) + var(--table-sync-x-metric-col) + var(--table-sync-x-metric-col) + var(--table-sync-x-metric-col) + var(--table-sync-x-metric-col));
    --table-sync-x-min-width: var(--table-sync-x-table-width);
    position: relative;
    container-type: inline-size;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    border: .1rem solid var(--border-color);
    border-radius: .5rem;
    overflow: visible
}

.table.table--single-x-scroll .table__scroll-x table {
    border: none;
    border-radius: 0;
    table-layout: fixed;
    width: max(100%, var(--table-sync-x-min-width));
    min-width: var(--table-sync-x-min-width)
}

.table.table--single-x-scroll .table__scroll-x {
    overflow-y: visible;
    -ms-overflow-style: none;
    scrollbar-width: none
}

.table.table--single-x-scroll .table__scroll-x::-webkit-scrollbar {
    display: none
}

.table.table--single-x-scroll .table__sticky-header {
    position: sticky;
    top: 0;
    z-index: 10;
    height: var(--table-sticky-header-height, 0);
    margin-bottom: calc(var(--table-sticky-header-height, 0) * -1);
    overflow: hidden;
    pointer-events: auto
}

.table.table--single-x-scroll .table__sticky-header-inner {
    width: max(100%, var(--table-sync-x-min-width));
    min-width: var(--table-sync-x-min-width);
    will-change: transform
}

.table.table--single-x-scroll .table__sticky-header table {
    width: var(--table-sticky-rendered-width, 100%);
    min-width: var(--table-sync-x-min-width);
    border: none;
    border-radius: 0;
    table-layout: fixed
}

.table.table--single-x-scroll .table__scroll-x table thead th,
.table.table--single-x-scroll .table__sticky-header table thead th {
    position: static;
    top: auto
}

.table.table--single-x-scroll .table__sticky-header table thead th,
.table.table--single-x-scroll .table__sticky-header table thead th :is(a, button, dropdown-select, .dropdown-toggle) {
    pointer-events: auto
}

.table.table--single-x-scroll col.table__col--control,
.table.table--single-x-scroll col.table__col--index {
    width: var(--table-sync-x-col-1)
}

.table.table--single-x-scroll col.table__col--rank,
.table.table--single-x-scroll col.table__col--pinned-identity {
    width: var(--table-sync-x-col-2)
}

.table.table--single-x-scroll col.table__col--identity {
    width: var(--table-sync-x-col-3)
}

.table.table--single-x-scroll col.table__col--metric {
    width: var(--table-sync-x-rendered-metric-col)
}

.table.table--single-x-scroll col.table__col--metric-sm {
    width: var(--table-sync-x-metric-sm-col)
}

.table.table--single-x-scroll col.table__col--action {
    width: var(--table-sync-x-action-col)
}

.table.table--single-x-scroll table th,
.table.table--single-x-scroll table td {
    box-sizing: border-box
}

.table.table--single-x-scroll .table__cell--control,
.table.table--single-x-scroll .table__cell--index,
.table.table--single-x-scroll .table__cell--rank {
    padding-right: .7rem;
    text-align: center
}

.table.table--single-x-scroll .table__cell--control {
    width: var(--table-sync-x-col-1);
    min-width: var(--table-sync-x-col-1);
    max-width: var(--table-sync-x-col-1);
    padding-left: 2rem;
    padding-right: .4rem
}

.table.table--single-x-scroll .table__cell--index,
.table.table--single-x-scroll .table__cell--rank {
    padding-left: .7rem
}

.table.table--single-x-scroll .table__cell--control>.recommended {
    justify-content: center
}

.table.table--single-x-scroll .table__cell--index {
    width: var(--table-sync-x-col-1);
    min-width: var(--table-sync-x-col-1);
    max-width: var(--table-sync-x-col-1)
}

.table.table--single-x-scroll .table__cell--rank {
    width: var(--table-sync-x-col-2);
    min-width: var(--table-sync-x-col-2);
    max-width: var(--table-sync-x-col-2)
}

.table.table--single-x-scroll .table__sticky-col {
    position: sticky;
    left: var(--table-sticky-left, 0);
    width: var(--table-sticky-width, auto);
    min-width: var(--table-sticky-width, 0);
    max-width: var(--table-sticky-width, none);
    background-color: var(--background-color)
}

.table.table--single-x-scroll th.table__sticky-col {
    z-index: 5
}

.table.table--single-x-scroll td.table__sticky-col {
    z-index: 2
}

.table.table--single-x-scroll .table__sticky-col--rank-group {
    --table-sticky-left: 0;
    --table-sticky-width: calc(var(--table-sync-x-col-1) + var(--table-sync-x-col-2))
}

.table.table--single-x-scroll .table__sticky-col--1,
.table.table--single-x-scroll .table__sticky-col--action {
    --table-sticky-left: 0;
    --table-sticky-width: var(--table-sync-x-col-1)
}

.table.table--single-x-scroll .table__sticky-col--2,
.table.table--single-x-scroll .table__sticky-col--rank {
    --table-sticky-left: var(--table-sync-x-col-1);
    --table-sticky-width: var(--table-sync-x-col-2)
}

.table.table--single-x-scroll .table__sticky-col--3,
.table.table--single-x-scroll .table__sticky-col--coin {
    --table-sticky-left: calc(var(--table-sync-x-col-1) + var(--table-sync-x-col-2));
    --table-sticky-width: var(--table-sync-x-col-3)
}

.table.table--single-x-scroll.table--sticky-col-2-only .table__sticky-col--2 {
    --table-sticky-left: 0;
    --table-sticky-width: var(--table-sync-x-col-2)
}

.table.table--single-x-scroll.table--sticky-col-3-only .table__sticky-col--3,
.table.table--single-x-scroll.table--sticky-col-3-only .table__sticky-col--coin {
    --table-sticky-left: 0;
    --table-sticky-width: var(--table-sync-x-col-3)
}

.table.table--single-x-scroll .table__ad-overlay-row td {
    height: auto;
    padding: 0;
    background-color: var(--hover-background-color);
    border-bottom: .1rem solid var(--border-color)
}

.table.table--single-x-scroll .table__ad-overlay {
    position: sticky;
    left: 0;
    z-index: 3;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0;
    width: 100cqw;
    max-width: 100cqw;
    height: auto;
    min-height: var(--table-ad-overlay-height);
    box-sizing: border-box;
    padding: 0;
    overflow: visible
}

.table.table--single-x-scroll .table__ad-overlay-spacer {
    flex: 0 0 var(--table-sync-x-col-1);
    width: var(--table-sync-x-col-1)
}

.table.table--single-x-scroll .table__ad-overlay-label {
    flex: 0 0 var(--table-sync-x-col-1);
    width: var(--table-sync-x-col-1);
    box-sizing: border-box;
    padding: 0 .7rem
}

.table.table--single-x-scroll .table__ad-overlay-spacer+.table__ad-overlay-label {
    flex-basis: var(--table-sync-x-col-2);
    width: var(--table-sync-x-col-2)
}

.table.table--single-x-scroll .table__ad-overlay-serve {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 0 .7rem
}

.table.table--single-x-scroll .table__ad-overlay-serve x-serve {
    flex: 1;
    min-width: 0
}

body:has(.action-bar__wrapper) .table table thead th {
    top: 5.4rem
}

body:has(.action-bar__wrapper) .table.table--single-x-scroll .table__sticky-header {
    top: 5.4rem
}

.table .percentage-1 {
    width: 1%
}

.table .percentage-5 {
    width: 5%
}

.table .percentage-10 {
    width: 10%
}

.table .percentage-20 {
    width: 20%
}

.table .percentage-22 {
    width: 22%
}

.table .percentage-25 {
    width: 25%
}

.table .percentage-29 {
    width: 29%
}

.table .percentage-30 {
    width: 30%
}

.table .percentage-31 {
    width: 31%
}

.table .percentage-36 {
    width: 36%
}

.table .percentage-33 {
    width: 33%
}

.table .percentage-34 {
    width: 34%
}

.table .percentage-39 {
    width: 39%
}

.table .percentage-50 {
    width: 50%
}

.table .percentage-56 {
    width: 56%
}

.table .percentage-59 {
    width: 59%
}

.table__sub-item {
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--secondary-text-color)
}

.table-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3.5rem 0
}

.table-empty-title {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--text-color);
    text-align: center
}

.table-empty-text {
    font-weight: 500;
    padding-top: .5rem;
    line-height: 2.4rem;
    white-space: initial;
    max-width: 30rem;
    font-size: 1.4rem
}

@media(max-width:600px) {
    .table-empty {
        padding: 2.5rem 0
    }

    .table-empty-title {
        font-size: 1.6rem
    }

    .table-empty-text {
        font-size: 1.4rem;
        max-width: 25rem
    }
}

.table:has(dropdown-select) thead th dropdown-select {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4px;
    padding: 1rem
}

.table:has(dropdown-select) thead th dropdown-select .info-button span {
    border-color: var(--secondary-text-color);
    color: var(--secondary-text-color)
}

.table:has(dropdown-select) thead th dropdown-select .info-button.tooltip-active span {
    background-color: var(--secondary-text-color);
    color: var(--background-color)
}

.table:has(dropdown-select) thead th dropdown-select .order--active svg {
    stroke: currentColor;
    fill: currentColor
}

.table:has(dropdown-select) thead th dropdown-select:hover {
    color: var(--text-color)
}

.table:has(dropdown-select) thead th dropdown-select:hover .info-button span {
    border-color: var(--text-color)
}

.table:has(dropdown-select) thead th dropdown-select:hover .info-button.tooltip-active span {
    background-color: var(--text-color)
}

.table:has(dropdown-select) thead th:has(dropdown-select) {
    padding: 0rem
}

.table:has(dropdown-select) thead th:has(dropdown-select):hover {
    cursor: pointer;
    box-shadow: 0 0 0 .1rem var(--text-color) inset
}

.table:has(dropdown-select) thead th:has(dropdown-select):first-child {
    padding-left: 1rem
}

.table:has(dropdown-select) thead th:has(dropdown-select):first-child:hover {
    border-top-left-radius: .5rem
}

.table:has(dropdown-select) thead th:has(dropdown-select):last-child {
    padding-right: 1rem
}

.table:has(dropdown-select) thead th:has(dropdown-select):last-child:hover {
    border-top-right-radius: .5rem
}

.table:has(dropdown-select) thead th:last-child {
    border-right: none
}

.table.no-right-border thead th {
    border-right: none
}

.table thead th {
    font-size: 1.3rem;
    font-weight: 600;
    text-align: left;
    color: var(--secondary-text-color);
    border-bottom: .1rem solid var(--border-color);
    border-right: .1rem solid var(--border-color);
    padding: 1rem .7rem;
    white-space: nowrap
}

.table thead th:has(.order):not(:has(dropdown-select)) {
    padding: 0
}

.table thead th:has(.order):not(:has(dropdown-select)) .order {
    padding: 1rem
}

.table thead th:has(.order):not(:has(dropdown-select)) .order:hover {
    box-shadow: 0 0 0 .1rem var(--text-color) inset
}

.table thead th:has(.order):not(:has(dropdown-select)) .order--disabled:hover {
    box-shadow: none
}

.table thead th:has(.order):not(:has(dropdown-select)):first-child .order:hover {
    border-top-left-radius: .5rem
}

.table thead th:has(.order):not(:has(dropdown-select)):last-child .order:hover {
    border-top-right-radius: .5rem
}

.table thead th:first-child {
    border-top-left-radius: .5rem;
    padding-left: 2rem
}

.table thead th:last-child {
    border-top-right-radius: .5rem;
    padding-right: 2rem;
    border-right: none
}

.table thead th.align-right {
    text-align: right
}

.table thead th.align-center {
    text-align: center
}

@media(max-width:600px) {
    .table thead th.align-right-mobile {
        text-align: right;
        padding-right: 2rem
    }
}

.table tbody {
    transition: opacity .1s ease-out, transform .1s ease-out
}

.table tbody .recommended svg {
    fill: var(--background-color);
    stroke: currentColor
}

.table tbody .recommended .recommended--disabled {
    stroke: var(--disabled-color)
}

.table.htmx-request tbody,
.table.htmx-swapping tbody,
.table.htmx-settling tbody {
    opacity: 0;
    transform: translateY(-.5rem)
}

.table tbody td {
    font-size: 1.4rem;
    color: var(--text-color);
    border-bottom: .1rem solid var(--border-color);
    padding: .8rem .7rem .9rem;
    height: 5.9rem;
    white-space: nowrap
}

.table tbody td:first-child {
    padding-left: 2rem
}

.table tbody td:last-child {
    padding-right: 2rem
}

.table tbody td.strong {
    font-weight: 700
}

.table tbody td.semibold {
    font-weight: 600
}

.table tbody td.price {
    font-variant-numeric: tabular-nums;
    -moz-font-feature-settings: "tnum";
    -webkit-font-feature-settings: "tnum";
    font-feature-settings: "tnum";
    letter-spacing: -.065em
}

.table tbody td.small {
    font-size: 1.3rem
}

@media(max-width:600px) {
    .table tbody td.align-right-mobile {
        text-align: right;
        padding-right: 2rem
    }
}

@media(max-width:1179px) {
    .table tbody td.align-right-tablet-portrait {
        text-align: right;
        padding-right: 2rem
    }
}

.table tbody td.notice-missing-data-wrapper {
    padding-top: 0rem;
    padding-bottom: 0rem;
    height: 44px
}

.table tbody td .notice-missing-data {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
    gap: .5rem;
    color: var(--secondary-text-color);
    white-space: normal;
    margin-block-start: -.1rem;
    margin-block-end: .1rem;
    line-height: 1.4;
    padding: 1.3rem 0
}

.table tbody td .notice-missing-data svg {
    fill: var(--secondary-text-color);
    stroke: var(--secondary-text-color);
    flex-shrink: 0;
    vertical-align: -.2rem
}

.table tbody td .notice-missing-data a {
    white-space: nowrap
}

.table tbody tr.highlighted-row {
    background-color: var(--highlight-background);
    animation: highlight-fade 1s ease-in forwards
}

.table tbody tr:last-child td {
    border-bottom: none
}

.table tbody .table__sponsored-row td {
    height: 6rem;
    padding-top: 0;
    padding-bottom: 0;
    background-color: var(--hover-background-color)
}

.table tbody .table__sponsored-row .table__sponsored-ad-inline {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: .8rem;
    min-width: 0;
    width: 100%
}

.table tbody .table__sponsored-row .table__sponsored-ad-inline>span {
    flex-shrink: 0
}

.table tbody .table__sponsored-row .table__sponsored-ad-inline x-serve {
    flex: 1;
    min-width: 0
}

.table__spinner {
    width: 1.4rem;
    height: 1.4rem;
    vertical-align: middle;
    margin: -.2rem 0 0;
    opacity: 0;
    transition: opacity .1s ease-out;
    stroke: currentColor
}

.table__spinner--absolute-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.htmx-request:not(body) .table__spinner {
    opacity: 1
}

.table tfoot td {
    font-size: 1.4rem;
    color: var(--text-color);
    border-top: .1rem solid var(--border-color);
    text-align: center
}

.table tfoot td a {
    display: block;
    color: currentColor;
    text-decoration: none;
    font-weight: 600;
    transition: color .1s ease-out;
    padding: .7rem .6rem .8rem;
    width: 100%
}

.table tfoot td a:hover {
    color: var(--secondary-text-color)
}

.table-header-tooltip-wrapper {
    display: inline-flex;
    align-items: center;
    gap: .5rem
}

.order {
    color: var(--text-color);
    text-decoration: none;
    transition: color .1s ease-out;
    display: block;
    height: 100%
}

.order svg {
    width: .8rem;
    height: .6rem;
    vertical-align: middle;
    margin: -.1rem .2rem 0;
    stroke: var(--sort-arrow-color);
    fill: var(--sort-arrow-color)
}

.order-arrow svg {
    width: 1rem;
    height: 1rem;
    stroke: none;
    fill: none
}

.order:hover {
    color: var(--text-color)
}

.order--disabled:hover {
    color: var(--text-color);
    cursor: default
}

.order--asc svg {
    transform: rotate(180deg)
}

.order--active svg {
    stroke: var(--sort-arrow-active-color);
    fill: var(--sort-arrow-active-color)
}

.table-tabs-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 1rem 2rem;
    margin: 0 -2rem 2rem
}

.table-tabs-wrapper .sub-pagination-and-download {
    margin-right: 2rem
}

.table-tabs {
    display: inline-flex;
    padding: 0 2rem;
    gap: 1rem
}

.table-tabs__tab {
    appearance: none;
    background: none;
    border: .1rem solid var(--border-color);
    border-radius: .3rem;
    box-shadow: none;
    color: var(--text-color);
    white-space: nowrap;
    font-size: 1.4rem;
    font-weight: 500;
    cursor: pointer;
    padding: .9rem 1.4rem 1rem;
    margin: 0;
    transition: border-color .1s ease-out, background-color .05 ease-out;
    text-decoration: none;
    height: 4.2rem;
    user-select: none;
    -webkit-user-select: none
}

@media(hover:hover) {
    .table-tabs__tab:hover {
        border-color: var(--text-color)
    }
}

.table-tabs__tab.hsc-tapped {
    background-color: var(--active-background-color)
}

.table-tabs__tab--active {
    font-weight: 600;
    border-color: var(--text-color);
    cursor: default
}

.table-tabs__tab--active.hsc-tapped {
    background-color: var(--background-color)
}

.title-section .table-tabs {
    padding-right: 2rem;
    margin: 0
}

@keyframes highlight-fade {

    0%,
    50% {
        background-color: var(--highlight-background)
    }

    to {
        background-color: transparent
    }
}

@media(max-width:1365px)and (min-width:1180px) {
    .table .tablet-percentage-58 {
        width: 58%
    }

    .table .tablet-percentage-59 {
        width: 59%
    }

    .table .tablet-percentage-39 {
        width: 39%
    }

    .table .tablet-percentage-1 {
        width: 1%
    }
}

@media(max-width:600px) {
    .table {
        margin: 0 -2rem
    }

    .table.table--single-x-scroll {
        width: calc(100% + 4rem);
        max-width: calc(100% + 4rem);
        border-radius: 0;
        --table-ad-overlay-height: 8.2rem;
        --table-ad-overlay-mobile-block-padding: 1rem;
        --table-ad-overlay-mobile-side-padding: 2rem
    }

    .table.table--single-x-scroll .table__ad-overlay {
        padding-left: var(--table-ad-overlay-mobile-side-padding);
        padding-right: var(--table-ad-overlay-mobile-side-padding)
    }

    .table.table--single-x-scroll .table__ad-overlay-serve {
        padding-left: 0;
        padding-right: 0
    }

    .table table {
        border-radius: 0;
        border-width: .1rem 0 0 0
    }

    .table .mobile-percentage-70 {
        width: 70%
    }

    .table .mobile-percentage-58 {
        width: 58%
    }

    .table .mobile-percentage-59 {
        width: 59%
    }

    .table .mobile-percentage-50 {
        width: 50%
    }

    .table .mobile-percentage-39 {
        width: 39%
    }

    .table .mobile-percentage-30 {
        width: 30%
    }

    .table .mobile-percentage-25 {
        width: 25%
    }

    .table .mobile-percentage-20 {
        width: 20%
    }

    .table .mobile-percentage-1 {
        width: 1%
    }

    .table__sub-item {
        font-size: 1.2rem
    }

    .table .last-column-mobile {
        padding-right: 2rem
    }

    .table tbody td {
        padding: .8rem .5rem .9rem
    }

    .table tbody td.small {
        font-size: 1.2rem
    }

    .table tbody .table__sponsored-row td {
        height: 8.2rem;
        padding-left: 2rem;
        padding-right: 2rem
    }

    .table tfoot td {
        border-top: none;
        padding: 0 2rem;
        font-size: 1.3rem
    }

    .table tfoot td a {
        border: .1rem solid var(--border-color);
        border-radius: .3rem;
        padding: .8rem .6rem .9rem
    }

    .table-tabs__tab {
        font-size: 1.3rem;
        padding: 1.1rem 1.2rem 1.15rem
    }

    .favorite-table tbody tr:last-child td {
        border-bottom: .1rem solid var(--border-color)
    }

    table:not(:has(tfoot))+.icon-description-section {
        padding: .7rem 2rem
    }
}

favorite-heart {
    display: block;
    margin: -1rem
}

.favorite-heart {
    appearance: none;
    display: block;
    cursor: pointer;
    background: none;
    border: none;
    transition: color .1s ease-out;
    color: var(--secondary-text-color);
    padding: 1rem;
    margin: 0;
    position: relative;
    transition: transform .1s ease-out
}

.favorite-heart:hover {
    color: var(--text-color);
    transform: scale(1.1)
}

.favorite-heart svg {
    display: block;
    stroke: currentColor;
    fill: transparent;
    width: 1.5rem;
    height: 1.4rem
}

.favorite-heart:before {
    content: "";
    position: absolute;
    background-image: url(/static/circles-animation.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 2.7rem;
    height: 2.7rem;
    top: .3rem;
    left: .4rem;
    opacity: 0
}

.favorite-heart:after {
    content: "";
    position: absolute;
    background-image: url(/static/stripes-animation.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 2.1rem;
    height: 2.1rem;
    top: .55rem;
    left: .65rem;
    opacity: 0
}

.favorite-heart.animate svg {
    animation: pop 1.2s linear
}

.favorite-heart.animate:before {
    animation: explode 1.2s linear
}

.favorite-heart.animate:after {
    animation: explode 1.2s linear
}

.hero .favorite-heart svg {
    stroke: var(--favorite-heart-color)
}

[favorited=true] .favorite-heart svg {
    stroke: currentColor;
    fill: currentColor
}

.hero [favorited=true] .favorite-heart svg {
    stroke: var(--favorite-heart-color);
    fill: var(--favorite-heart-color)
}

.coin-action-dropdown__trigger {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    appearance: none;
    background: none;
    border: .1rem solid var(--border-color);
    border-radius: .4rem;
    padding: .55rem 1rem;
    cursor: pointer;
    color: var(--text-color);
    font-size: 1.4rem;
    font-weight: 500;
    transition: color .1s ease-out, border-color .1s ease-out, background-color .1s ease-out
}

.coin-action-dropdown__trigger--compact {
    color: var(--secondary-text-color);
    padding: 0rem;
    border: none;
    border-radius: 0
}

.coin-action-dropdown__trigger--compact:hover {
    color: var(--text-color)
}

.coin-action-dropdown__trigger:hover {
    border-color: var(--text-color)
}

.coin-action-dropdown__trigger svg {
    stroke: currentColor
}

.coin-action-dropdown__trigger--favorited .coin-action-dropdown__icon--added {
    fill: currentColor;
    display: block
}

.coin-action-dropdown__trigger--favorited .coin-action-dropdown__icon--no-added {
    display: none
}

.coin-action-dropdown__trigger--favorited .coin-action-dropdown__text--added {
    display: block
}

.coin-action-dropdown__trigger--favorited .coin-action-dropdown__text--add {
    display: none
}

.coin-action-dropdown__trigger-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    margin: -1rem
}

.coin-action-dropdown__icon {
    width: 1.6rem;
    height: 1.6rem
}

.coin-action-dropdown__icon--no-added {
    display: block
}

.coin-action-dropdown__icon--added,
.coin-action-dropdown__text--added {
    display: none
}

.coin-action-dropdown__text--add {
    display: block
}

.coin-action-menu {
    padding: 1rem 1.5rem
}

.coin-action-menu__item {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 1rem;
    appearance: none;
    background: none;
    border: none;
    text-decoration: none;
    color: var(--text-color);
    font-size: 1.4rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color .1s ease-out;
    text-align: left;
    border-radius: .4rem;
    white-space: nowrap
}

.coin-action-menu__item:hover {
    background-color: var(--hover-background-color)
}

.coin-action-menu__item svg {
    display: block;
    flex-shrink: 0;
    stroke: currentColor;
    fill: none
}

.coin-action-menu__item--favorite .coin-action-menu__icon--add {
    display: block
}

.coin-action-menu__item--favorite .coin-action-menu__icon--add svg {
    fill: currentColor
}

.coin-action-menu__item--favorite .coin-action-menu__icon--remove {
    display: none
}

.coin-action-menu__item--favorite .coin-action-menu__text--add {
    display: block
}

.coin-action-menu__item--favorite .coin-action-menu__text--remove,
.coin-action-menu__item--favorited .coin-action-menu__icon--add {
    display: none
}

.coin-action-menu__item--favorited .coin-action-menu__icon--remove {
    display: block
}

.coin-action-menu__item--favorited .coin-action-menu__icon--remove svg {
    fill: currentColor
}

.coin-action-menu__item--favorited .coin-action-menu__text--add {
    display: none
}

.coin-action-menu__item--favorited .coin-action-menu__text--remove {
    display: block
}

.coin-action-menu__item-icon {
    width: 1.6rem;
    height: 1.6rem
}

@media(max-width:600px) {
    .coin-action-menu {
        padding: 0rem 1.5rem 1rem
    }
}

.coin-profile {
    display: grid;
    align-items: center;
    grid-template-areas: "logo name" "logo symbol";
    gap: 0 1.4rem;
    justify-content: flex-start;
    text-decoration: none;
    transition: color .1s ease-out;
    padding: .3rem;
    margin: -.3rem;
    cursor: pointer
}

.coin-profile--no-symbol {
    grid-template-areas: "logo name"
}

.coin-profile:hover {
    color: var(--secondary-text-color)
}

.coin-profile:focus-visible {
    outline: .2rem solid var(--primary-color);
    outline-offset: .2rem
}

.coin-profile__logo-wrapper {
    grid-area: logo;
    display: block;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 3.2rem;
    background: #fff;
    border: .2rem solid #fff;
    overflow: hidden;
    outline: .1rem solid var(--border-color)
}

.coin-profile__logo {
    display: block;
    width: 2.8rem;
    height: 2.8rem;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none
}

.coin-profile__name {
    grid-area: name;
    font-size: 1.4rem;
    font-weight: 600;
    text-overflow: ellipsis;
    overflow: hidden
}

.coin-profile__symbol {
    grid-area: symbol;
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--secondary-text-color);
    text-overflow: ellipsis;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: .4rem
}

.coin-profile__symbol svg {
    vertical-align: middle;
    margin: -.3rem 0 0
}

.coin-profile__symbol--green {
    color: var(--positive-color)
}

.coin-profile__warning {
    vertical-align: middle;
    margin: -.3rem 0 0
}

.coin-profile__warning-icon {
    color: var(--secondary-text-color);
    display: inline-flex
}

:root.dark-theme .coin-profile__logo-wrapper {
    outline: none
}

@media(prefers-color-scheme:dark) {
    :root:not(.light-theme) .coin-profile__logo-wrapper {
        outline: none
    }
}

@media(prefers-reduced-motion:reduce) {
    .coin-profile__button--hot:after {
        animation: none
    }
}

@media(max-width:600px) {
    .coin-profile {
        gap: 0 .8rem
    }

    .coin-profile__logo-wrapper {
        width: 3rem;
        height: 3rem
    }

    .coin-profile__logo {
        width: 2.6rem;
        height: 2.6rem
    }

    .coin-profile__warning {
        width: 1.1rem
    }
}

.change {
    display: inline-flex;
    flex-direction: column;
    color: var(--neutral-color);
    align-items: end;
    font-weight: 600;
    font-size: 1.3rem
}

.change--positive {
    color: var(--positive-color)
}

.change--negative {
    color: var(--negative-color)
}

.change__percentage {
    font-size: 1.3rem;
    font-weight: 600
}

.change__sparkline {
    width: 6rem;
    height: 2rem
}

.current {
    font-weight: 500
}

.stats-change {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--neutral-color)
}

.stats-change--text-color {
    color: var(--text-color)
}

.stats-change--positive {
    color: var(--positive-color)
}

.stats-change--negative {
    color: var(--negative-color)
}

.stats-change--normal-font {
    font-size: 1.4rem;
    font-weight: 500
}

.breaking-signals {
    padding: 0;
    margin: 0;
    border-collapse: collapse;
    width: 100%
}

.breaking-signals tfoot td {
    padding: 1.2rem 0 0
}

.breaking-signals__button {
    appearance: none;
    cursor: pointer;
    background: none;
    border-radius: .5rem;
    border-color: var(--border-color);
    border-style: solid;
    border-width: .1rem;
    font-size: 1.4rem;
    color: var(--text-color);
    font-weight: 600;
    text-align: center;
    width: 100%;
    padding: .9rem 2rem 1rem;
    transition: color .1s ease-out
}

.breaking-signals__button:hover {
    color: var(--secondary-text-color)
}

.breaking-signal {
    border-bottom: .1rem solid var(--border-color)
}

.breaking-signal__logo-link {
    display: block;
    position: relative
}

.breaking-signal a {
    text-decoration: none
}

.breaking-signal__cell {
    padding: 1.2rem 0
}

.breaking-signal__cell--time {
    font-size: 1.3rem;
    color: var(--secondary-text-color)
}

.breaking-signal__cell--profile {
    padding-left: .8rem;
    padding-right: 1.1rem
}

.breaking-signal__cell--message {
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--text-color);
    width: 100%
}

.breaking-signal:first-child .breaking-signal__cell {
    padding-top: 0
}

.breaking-signal:last-child {
    border-bottom: none
}

.breaking-signal__message {
    cursor: pointer;
    transition: color .1s ease-out
}

.breaking-signal__message:hover {
    color: var(--secondary-text-color)
}

.breaking-signal__favorited {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 1.6rem;
    background-color: var(--background-color);
    position: absolute;
    top: -.3rem;
    right: -.3rem
}

.breaking-signal__favorited svg {
    margin: .1rem 0 0;
    fill: var(--secondary-text-color);
    stroke: var(--secondary-text-color)
}

.breaking-signal__logo-wrapper {
    display: block;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 3.2rem;
    background: #fff;
    border: .2rem solid #fff;
    overflow: hidden;
    outline: .1rem solid var(--border-color)
}

.breaking-signal__logo {
    display: block;
    width: 2.8rem;
    height: 2.8rem;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none
}

:root.dark-theme .breaking-signal__logo-wrapper {
    outline: none
}

@media(prefers-color-scheme:dark) {
    :root:not(.light-theme) .breaking-signal__logo-wrapper {
        outline: none
    }
}

@media(max-width:600px) {
    .breaking-signal__logo-wrapper {
        width: 3rem;
        height: 3rem
    }

    .breaking-signal__logo {
        width: 2.6rem;
        height: 2.6rem
    }
}

.faq {
    display: block;
    border-radius: .5rem;
    border: .1rem solid var(--border-color);
    color: var(--text-color)
}

.faq__qa {
    margin: 0
}

.faq__question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.4rem 2rem 1.5rem;
    cursor: pointer;
    border-top: .1rem solid var(--border-color);
    transition: color .1s ease-out;
    font-size: 1.4rem;
    text-wrap: balance
}

.faq__question:first-child {
    border-top: none
}

.faq__question:hover {
    color: var(--secondary-text-color)
}

.faq__question svg {
    flex-shrink: 0;
    margin-left: 1rem;
    stroke: currentColor;
    transition: transform .3s ease-out
}

.faq__answer {
    display: none;
    padding: 0 2rem 1.5rem;
    font-size: 1.4rem;
    margin: 0;
    line-height: 1.8
}

.faq__question--open svg {
    transform: rotate(180deg)
}

.faq__question--open+.faq__answer {
    display: block
}

.faq__not-found {
    padding: 1rem 2rem 1.1rem;
    margin: 0;
    font-size: 1.4rem;
    text-wrap: balance;
    text-align: center
}

.faq__button {
    appearance: none;
    cursor: pointer;
    background: none;
    border-color: var(--border-color);
    border-style: solid;
    border-width: .1rem 0 0;
    font-size: 1.4rem;
    color: var(--text-color);
    font-weight: 600;
    text-align: center;
    width: 100%;
    padding: .9rem 2rem 1rem;
    transition: color .1s ease-out
}

.faq__button:hover {
    color: var(--secondary-text-color)
}

.content {
    display: flex;
    max-width: 144rem;
    margin: 0 auto;
    padding: 0 5rem
}

.content__block {
    border-radius: 2rem;
    border: .1rem solid var(--border-color);
    padding: 3rem;
    max-width: 56rem;
    margin: 3rem auto 5rem;
    text-align: center
}

.content__main--full {
    flex-grow: 1;
    min-width: 0;
    padding: 1.3rem 0 6.2rem
}

.content__main {
    flex-grow: 1;
    min-width: 0;
    max-width: calc(100% - 44rem);
    padding: 1.3rem 5rem 6.2rem 0;
    border-right: .1rem solid var(--border-color)
}

.content__aside {
    width: 100%;
    max-width: 44rem;
    padding: 1.8rem 0 4rem 5rem
}

@media(max-width:1179px) {
    .content {
        padding: 1.8rem 5rem 6.7rem;
        flex-direction: column
    }

    .content__order-1 {
        order: 1
    }

    .content__order-2 {
        order: 2
    }

    .content__order-3 {
        order: 3
    }

    .content__order-4 {
        order: 4
    }

    .content__order-5 {
        order: 5
    }

    .content__order-6 {
        order: 6
    }

    .content__order-7 {
        order: 7
    }

    .content__order-8 {
        order: 8
    }

    .content__order-9 {
        order: 9
    }

    .content__order-10 {
        order: 10
    }

    .content__order-11 {
        order: 11
    }

    .content__order-12 {
        order: 12
    }

    .content__order-13 {
        order: 13
    }

    .content__order-14 {
        order: 14
    }

    .content__order-15 {
        order: 15
    }

    .content__order-16 {
        order: 16
    }

    .content__order-17 {
        order: 17
    }

    .content__order-18 {
        order: 18
    }

    .content__order-19 {
        order: 19
    }

    .content__order-20 {
        order: 20
    }

    .content__order-21 {
        order: 21
    }

    .content__order-22 {
        order: 22
    }

    .content__main {
        display: contents;
        padding-right: 0;
        margin-right: 0;
        max-width: none;
        border-right: none
    }

    .content__aside {
        display: contents;
        max-width: none;
        padding-left: 0
    }
}

@media(max-width:600px) {
    .content {
        padding: .8rem 2rem 0rem
    }
}

.stats-cards {
    --stats-card-min-width: 24rem;
    width: 100%
}

.stats-cards__grid {
    display: flex;
    gap: 1.2rem;
    min-width: 100%;
    width: max-content
}

.stats-cards__card {
    display: flex;
    flex-direction: column;
    flex: 1 0 var(--stats-card-min-width);
    gap: 1rem;
    min-width: var(--stats-card-min-width);
    padding: 2rem 2.4rem;
    border-radius: .8rem;
    border: .1rem solid var(--border-color, currentColor);
    background-color: var(--background-color)
}

.stats-cards__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem
}

.stats-cards__title {
    display: flex;
    align-items: center;
    font-size: 1.4rem;
    font-weight: 600;
    gap: .6rem;
    min-width: 0
}

.stats-cards__title-text {
    min-width: 0
}

.stats-cards__icon {
    width: fit-content;
    height: 1.6rem;
    flex-shrink: 0;
    border-radius: .2rem;
    color: var(--text-color);
    opacity: .7;
    padding-right: .4rem
}

.stats-cards__icon svg {
    stroke: currentColor;
    fill: currentColor
}

.stats-cards__indicator {
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    flex-shrink: 0;
    background: currentColor;
    opacity: .55
}

.stats-cards__value-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .4rem .75rem
}

.stats-cards__value {
    font-size: 2rem;
    font-weight: 600
}

.stats-cards__value--positive {
    color: var(--positive-color)
}

.stats-cards__value--negative {
    color: var(--negative-color)
}

.stats-cards__meta {
    font-size: 1.5rem;
    font-weight: 600
}

.stats-cards__meta--positive {
    color: var(--positive-color)
}

.stats-cards__meta--negative {
    color: var(--negative-color)
}

@media(max-width:600px) {
    .stats-cards__scrollable {
        margin: 0 -2rem
    }

    .stats-cards__grid {
        padding: 0 2rem
    }

    .stats-cards__grid:after {
        content: "";
        display: block;
        flex-shrink: 0;
        width: .2rem;
        height: .2rem
    }
}

.tabs {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    padding: 0 1rem
}

.tabs__item {
    display: inline-block;
    position: relative;
    text-decoration: none;
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--text-color);
    padding: .6rem 1rem;
    transition: border-color .1s ease-out;
    cursor: pointer;
    border-radius: .3rem;
    border: .1rem solid var(--border-color)
}

.tabs__item:hover {
    border-color: var(--text-color)
}

.tabs__item--active {
    border-color: var(--text-color);
    font-weight: 600
}

.tabs__item:focus-visible {
    outline-color: var(--secondary-text-color);
    border-color: var(--secondary-text-color);
    outline-width: .2rem;
    outline-offset: -.2rem;
    outline-style: solid;
    transition: none
}

@media(max-width:600px) {
    .tabs {
        padding: 0 2rem
    }
}

.future-contract-tabs {
    display: inline-flex;
    flex-shrink: 0
}

.future-contract-tabs__tab {
    appearance: none;
    position: relative;
    min-height: 4.2rem;
    padding: .9rem 1.8rem 1rem;
    border: .1rem solid var(--border-color);
    border-radius: 0;
    background: none;
    color: var(--secondary-text-color);
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .1s ease-in-out
}

.future-contract-tabs__tab:not(:last-child) {
    margin-right: -.1rem
}

.future-contract-tabs__tab:last-child {
    border-top-right-radius: .3rem;
    border-bottom-right-radius: .3rem
}

.future-contract-tabs__tab:first-child {
    border-top-left-radius: .3rem;
    border-bottom-left-radius: .3rem
}

@media(hover:hover) {
    .future-contract-tabs__tab:hover:not(:disabled) {
        border-color: var(--text-color);
        z-index: 1
    }
}

.future-contract-tabs__tab--active {
    color: var(--text-color);
    border-color: var(--text-color);
    z-index: 1
}

.future-contract-tabs__tab:disabled {
    cursor: default;
    color: var(--disabled-color)
}

.dds {
    padding: .2rem 3rem 2rem
}

.dds__shortcut {
    display: inline-block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-color);
    border-radius: .3rem;
    padding: .1rem .2em;
    margin: 0 0 0 .5rem;
    text-transform: uppercase;
    text-align: center;
    min-width: 1.6rem;
    min-height: 1.5rem;
    line-height: 1;
    border-color: var(--border-color);
    border-style: solid;
    border-width: .1rem .1rem .2rem;
    vertical-align: middle
}

.dds__content {
    padding: 1.8rem 0 0
}

.dds__tabs {
    margin: 0 -1rem
}

.dds__results {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .1s ease-out, transform .1s ease-out
}

.dds__empty {
    margin: 0;
    padding: .5rem 1rem 1rem;
    overflow-wrap: anywhere;
    text-wrap: balance;
    color: var(--text-color)
}

.dds.htmx-request .dds__results,
.dds.htmx-swapping .dds__results,
.dds.htmx-settling .dds__results {
    opacity: 0;
    transform: translateY(-.5rem)
}

.dds__title {
    display: flex;
    justify-content: space-between;
    font-size: 1.3rem;
    font-weight: 600;
    margin: 0 0 1rem;
    color: var(--text-color)
}

.dds__title-value-label {
    color: var(--secondary-text-color)
}

.dds__list {
    margin: 0 -1rem
}

.dds__option {
    display: flex;
    appearance: none;
    background: var(--dropdown-background-color);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: var(--text-color);
    font-size: 1.4rem;
    font-weight: 500;
    cursor: pointer;
    padding: .6rem 1rem .7rem;
    border-radius: .3rem;
    margin: 0;
    min-height: 3.2rem;
    width: 100%;
    align-items: center;
    text-align: left;
    transition: color .1s ease-out, background-color .1s ease-out
}

.dds__option--selected {
    font-weight: 700
}

.dds__option--non-text-decorated {
    text-decoration: none
}

.dds__option:disabled {
    color: var(--disabled-color);
    cursor: not-allowed
}

@media(hover:hover) {
    .dds__option:hover:not(:disabled) {
        background-color: var(--hover-background-color);
        color: var(--secondary-text-color)
    }
}

.dds__option:focus-visible {
    background-color: var(--hover-background-color);
    color: var(--secondary-text-color);
    outline-color: var(--secondary-text-color);
    outline-width: .2rem;
    outline-offset: 0;
    outline-style: solid;
    transition: none
}

.dds__option:disabled {
    opacity: .5;
    cursor: not-allowed
}

.dds__option-icon {
    margin-left: auto
}

.dds__icon {
    min-width: 1.8rem;
    margin: 0 1rem 0 0;
    vertical-align: middle
}

.dds__icon svg {
    display: block
}

.dds__icon svg.stroke {
    stroke: currentColor
}

.dds__icon svg.fill {
    fill: currentColor
}

.dds__results {
    padding: .4rem 0 0
}

.dds__results:first-child .dds__section:first-child {
    padding-top: 0
}

.dds__section {
    padding: 1.2rem 0 0
}

.dds__more {
    margin: .5rem 0 0;
    appearance: none;
    background: none;
    border: .1rem solid var(--border-color);
    border-radius: .3rem;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--secondary-text-color);
    width: 100%;
    height: 3.2rem;
    cursor: pointer;
    transition: color .1s ease-out
}

.dds__more:hover {
    color: var(--secondary-text-color)
}

.dds__more:focus-visible {
    color: var(--secondary-text-color);
    outline-color: var(--secondary-text-color);
    outline-width: .1rem;
    border-color: var(--secondary-text-color);
    outline-offset: 0;
    outline-style: solid;
    transition: none
}

.dds__spinner {
    display: none;
    margin: 1rem auto 0rem;
    stroke: var(--text-color)
}

.dds__section.htmx-request .dds__spinner,
.dds__list.htmx-request .dds__spinner {
    display: block
}

.dds__radio-group {
    display: flex;
    flex-direction: column;
    border-radius: .5rem
}

.dds__radio-option {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--text-color);
    padding: 1rem 2rem;
    border: .1rem solid var(--border-color);
    cursor: pointer;
    margin-bottom: -.1rem;
    transition: border-color .1s ease-out;
    z-index: 1
}

@media(hover:hover) {
    .dds__radio-option:hover {
        border-color: var(--text-color);
        z-index: 2
    }
}

.dds__radio-option:has(input:checked) {
    border-color: var(--text-color);
    z-index: 2
}

.dds__radio-option:has(input:disabled):not(.dds__radio-option--visually-enabled) {
    cursor: not-allowed;
    color: var(--disabled-color);
    background: var(--disabled-background-color)
}

@media(hover:hover) {
    .dds__radio-option:has(input:disabled):not(.dds__radio-option--visually-enabled):hover {
        border-color: var(--disabled-color)
    }
}

.dds__radio-option:has(input:focus-visible) {
    outline: .2rem solid var(--focus-color);
    outline-offset: 0;
    border-color: var(--text-color);
    z-index: 3
}

.dds__radio-option:first-child {
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem
}

.dds__radio-option:last-child {
    border-bottom-left-radius: .5rem;
    border-bottom-right-radius: .5rem;
    margin-bottom: 0
}

.dds__radio-option input[type=radio] {
    width: 1.5rem;
    height: 1.5rem;
    border: .1rem solid var(--border-color);
    border-radius: 50%;
    appearance: none;
    cursor: pointer;
    display: grid;
    place-content: center;
    margin: .1rem;
    transition: border-color .1s ease-out
}

.dds__radio-option input[type=radio]:focus-visible {
    outline: none
}

.dds__radio-option input[type=radio]:after {
    content: "";
    width: .9rem;
    height: .9rem;
    border-radius: 100%;
    transform: scale(0);
    transition: .12s transform ease-out;
    box-shadow: inset 1em 1em var(--text-color)
}

.dds__radio-option input[type=radio]:checked {
    border-color: var(--text-color)
}

.dds__radio-option input[type=radio]:checked:after {
    transform: scale(1)
}

@media(max-width:600px) {
    .dds {
        padding: .1rem 2rem 3rem
    }

    .dds__shortcut {
        display: none
    }

    .dds__tabs {
        margin: 0 -2rem
    }
}

.cdp {
    padding: .2rem 3rem 2rem
}

.cdp .dropdown-nav {
    padding: 0
}

@media(max-width:600px) {
    .cdp {
        padding: .1rem 2rem 3rem
    }
}

.cdp__search-form {
    margin: 0 0 1rem
}

.cdp__search {
    width: 100%
}

.cdp__nav-text {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    flex: 1
}

.cdp__nav-name {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-color)
}

.cdp__nav-description {
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--secondary-text-color)
}

.cdp__sentinel {
    height: 1px;
    width: 100%
}

.cdp__kind {
    display: flex;
    align-items: center;
    gap: 1rem
}

.cdp__kind-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    flex-shrink: 0
}

.cdp__kind-icon svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: currentColor;
    stroke: currentColor
}

.cdp__kind-label {
    font-size: 1.4rem;
    font-weight: 500
}

.input-field {
    appearance: none;
    border: .1rem solid var(--border-color);
    border-radius: .3rem;
    color: var(--text-color);
    font-size: 1.6rem;
    font-weight: 500;
    background: none;
    height: 4.5rem;
    padding: 0 1rem;
    width: 100%
}

.input-field[type=search] {
    padding-left: 4.2rem;
    background-image: url(/static/form/light-theme/magnifying-glass.svg);
    background-repeat: no-repeat;
    background-position: left 1.8rem center;
    background-size: 1.4rem
}

.input-field[type=search]::-webkit-search-cancel-button {
    appearance: none;
    width: 1rem;
    height: 1rem;
    background-image: url(/static/form/light-theme/clear.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1rem;
    cursor: pointer
}

.input-field::placeholder {
    color: var(--placeholder-color);
    text-overflow: ellipsis;
    overflow: hidden
}

.input-field:focus {
    border-color: var(--secondary-text-color);
    outline-color: var(--secondary-text-color);
    outline-width: .1rem;
    outline-offset: 0;
    outline-style: solid
}

.input-field.htmx-request {
    background-image: url(/static/form/light-theme/spinner.svg) !important
}

:root.dark-theme .input-field[type=search] {
    background-image: url(/static/form/dark-theme/magnifying-glass.svg)
}

:root.dark-theme .input-field[type=search]::-webkit-search-cancel-button {
    background-image: url(/static/form/dark-theme/clear.svg)
}

:root.dark-theme .input-field.htmx-request {
    background-image: url(/static/form/dark-theme/spinner.svg) !important
}

@media(prefers-color-scheme:dark) {
    :root:not(.light-theme) .input-field[type=search] {
        background-image: url(/static/form/dark-theme/magnifying-glass.svg)
    }

    :root:not(.light-theme) .input-field[type=search]::-webkit-search-cancel-button {
        background-image: url(/static/form/dark-theme/clear.svg)
    }

    :root:not(.light-theme) .input-field.htmx-request {
        background-image: url(/static/form/dark-theme/spinner.svg) !important
    }
}

.promotion-block {
    padding-top: 2.7rem !important;
    padding-bottom: 3.4rem
}

.promotion-block__content {
    padding: 3rem;
    border-style: solid;
    border-color: var(--border-color);
    border-width: .1rem .1rem 0;
    border-radius: .5rem .5rem 0 0
}

.promotion-block__image {
    float: right;
    margin: 0 0 1rem 1rem
}

.promotion-block__title {
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--text-color);
    line-height: 1.5;
    margin: 0;
    text-wrap: balance
}

.promotion-block__description {
    font-size: 1.4rem;
    color: var(--text-color);
    line-height: 1.8;
    margin: 1rem 0 0;
    text-wrap: balance
}

.promotion-block__button {
    display: block;
    cursor: pointer;
    background: none;
    border-color: var(--border-color);
    border-style: solid;
    border-width: .1rem;
    border-radius: 0 0 .5rem .5rem;
    font-size: 1.4rem;
    color: var(--text-color);
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    width: 100%;
    padding: 1rem 2rem 1.1rem;
    transition: color .1s ease-out
}

.promotion-block__button:hover {
    color: var(--secondary-text-color)
}

.promotion-block__button svg {
    stroke: currentColor
}

.top-leaderboard {
    display: flex;
    justify-content: center;
    background-color: var(--secondary-background-color);
    border-bottom: .1rem solid var(--border-color)
}

.top-leaderboard__slot {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #36598d;
    font-weight: 700;
    font-size: 1.2rem;
    width: 728px;
    height: 90px;
    background-color: var(--border-color);
    margin: 1rem 0rem
}

.top-leaderboard__slot iframe,
.top-leaderboard__slot img {
    display: block
}

@media(max-width:1179px) {
    .top-leaderboard__slot {
        margin: 0
    }
}

@media(max-width:768px) {
    .top-leaderboard__slot {
        width: 320px;
        height: 50px
    }
}

.action-bar {
    position: sticky;
    top: 0;
    z-index: 90;
    min-height: 5.4rem;
    background-color: var(--background-color);
    border-bottom: .1rem solid var(--border-color)
}

.action-bar__wrapper {
    display: flex;
    align-items: center;
    max-width: 144rem;
    margin: 0 auto -.1rem;
    height: 5.4rem;
    padding: 0 3rem
}

.action-bar__navigation {
    display: inline-flex;
    flex: 1;
    padding: 0 1rem
}

.action-bar .hsc__overflow-left,
.action-bar .hsc__overflow-right {
    top: .1rem;
    bottom: .1rem
}

@media(max-width:600px) {
    .action-bar__wrapper {
        padding: 0;
        flex-direction: column;
        align-items: start
    }
}

.footer {
    border-top: .1rem solid var(--border-color);
    padding: 5.5rem 5rem 3.5rem
}

.footer__container {
    display: grid;
    max-width: 134rem;
    margin: 0 auto;
    gap: 3rem;
    grid-template-areas: "details nav1 nav2 nav3 nav4" "legal legal legal legal legal";
    grid-template-columns: minmax(32rem, 3fr) repeat(4, minmax(0, 1fr))
}

.footer__details {
    grid-area: details
}

.footer__partners {
    margin: 2rem 0 0
}

.footer__partners-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 .8rem;
    color: var(--heading-color)
}

.footer__partners-text {
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.6;
    color: var(--text-color)
}

.footer__partners-text a {
    text-decoration: underline;
    text-underline-offset: .2rem;
    text-decoration-thickness: .1rem;
    transition: color .1s ease-out
}

.footer__partners-text a:hover {
    color: var(--secondary-text-color)
}

.footer__partners-logos {
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 2rem 4rem;
    justify-content: start;
    align-items: center;
    margin-top: 3rem
}

.footer__partners-logos a {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .15s ease-out
}

.footer__partners-logos a:hover {
    opacity: .7
}

.footer__partners-logos a svg {
    height: auto;
    max-height: 3.2rem;
    width: auto
}

.footer__title {
    font-size: 1.6rem;
    margin: 0 0 .8rem
}

.footer__nav--1 {
    grid-area: nav1
}

.footer__nav--2 {
    grid-area: nav2
}

.footer__nav--3 {
    grid-area: nav3
}

.footer__nav--4 {
    grid-area: nav4
}

.footer__nav ul {
    list-style: none;
    padding: 0;
    margin: 0
}

.footer__nav a,
.footer__nav button {
    appearance: none;
    border: 0;
    background: none;
    display: block;
    text-decoration: none;
    padding: .7rem 0;
    transition: color .1s ease-out;
    color: var(--text-color);
    font-size: 1.4rem;
    font-weight: 500;
    cursor: pointer
}

.footer__nav a:hover,
.footer__nav button:hover {
    color: var(--secondary-text-color)
}

.footer__nav-item--ghost a {
    color: var(--placeholder-color);
    font-weight: 500;
    cursor: default
}

.footer__nav-item--ghost a:hover {
    color: var(--placeholder-color)
}

.footer__legal {
    grid-area: legal;
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    padding-top: 2.4rem;
    margin-top: 1rem;
    border-top: .1rem solid var(--border-color)
}

.footer__legal-content {
    display: flex;
    gap: 2rem
}

.footer__legal-list {
    display: flex;
    gap: 2rem;
    height: max-content
}

.footer__legal-list button {
    appearance: none;
    border: 0;
    background: none;
    display: block;
    text-decoration: underline;
    text-underline-offset: .3rem;
    text-decoration-thickness: .1rem;
    transition: color .1s ease-out;
    color: var(--text-color);
    font-weight: 500;
    cursor: pointer;
    padding: 0
}

.footer__social {
    display: flex;
    gap: 1.5rem;
    height: max-content;
    align-items: center;
    color: var(--text-color)
}

.footer__social a {
    display: flex;
    align-items: center;
    justify-content: center
}

.footer__social a:hover svg {
    fill: var(--secondary-text-color)
}

.footer__social svg {
    fill: currentColor;
    width: 2rem
}

@media(max-width:1179px) {
    .footer {
        padding-bottom: 9.6rem
    }

    .footer__container {
        grid-template-areas: "details details details details" "nav1 nav2 nav3 nav4" "legal legal legal legal";
        grid-template-columns: repeat(4, 1fr)
    }

    .footer__partners-logos {
        display: grid;
        grid-template-columns: repeat(6, auto);
        justify-content: start;
        margin-top: 0
    }

    .footer__nav {
        padding-top: 3.5rem
    }

    .footer__nav--1 {
        position: relative
    }

    .footer__nav--1:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: calc(-300% - 9rem);
        height: .1rem;
        background-color: var(--border-color)
    }

    .footer__legal {
        flex-direction: column
    }

    .footer__legal-list {
        flex-wrap: wrap;
        gap: 1rem
    }

    .footer__legal-list button {
        font-size: 1.4rem
    }
}

@media(max-width:768px) {
    .footer {
        padding: 3.5rem 2rem 8.6rem
    }

    .footer__nav {
        padding-top: 4.5rem
    }

    .footer__nav--1:before {
        right: calc(-100% - 2rem)
    }

    .footer__container {
        gap: 2rem;
        grid-template-areas: "details details" "nav1 nav2" "nav3 nav4" "legal legal";
        grid-template-columns: 1fr 1fr
    }

    .footer__partners {
        margin: 2rem 0
    }

    .footer__partners-logos {
        margin-top: 2rem;
        grid-template-columns: repeat(3, 1fr);
        justify-items: start;
        gap: 2rem 0
    }

    .footer__partners-logos a svg {
        transform: scale(.85)
    }
}

.horizontal-scroll-buttons {
    display: flex;
    margin: -1rem
}

.horizontal-scroll-buttons__prev,
.horizontal-scroll-buttons__next {
    display: flex;
    justify-content: center;
    align-items: center;
    appearance: none;
    background: none;
    height: 2.8rem;
    width: 2.8rem;
    border: 0;
    border-radius: 2.8rem;
    cursor: pointer;
    transition: background-color .1s ease-out
}

.horizontal-scroll-buttons__prev svg,
.horizontal-scroll-buttons__next svg {
    display: block;
    transition: stroke .1s ease-out;
    stroke: var(--text-color)
}

.horizontal-scroll-buttons__prev:hover:not(:disabled),
.horizontal-scroll-buttons__next:hover:not(:disabled) {
    background-color: var(--secondary-background-color)
}

.horizontal-scroll-buttons__prev:hover:not(:disabled) svg,
.horizontal-scroll-buttons__next:hover:not(:disabled) svg {
    stroke: var(--primary-color)
}

.horizontal-scroll-buttons__prev:focus-visible,
.horizontal-scroll-buttons__next:focus-visible {
    background-color: var(--secondary-background-color);
    color: var(--secondary-text-color);
    outline-color: var(--secondary-text-color);
    outline-width: .2rem;
    outline-offset: 0;
    outline-style: solid;
    transition: none
}

.horizontal-scroll-buttons__prev:disabled,
.horizontal-scroll-buttons__next:disabled {
    cursor: default
}

.horizontal-scroll-buttons__prev:disabled svg,
.horizontal-scroll-buttons__next:disabled svg {
    stroke: #aac5ee
}

.horizontal-scroll-buttons__prev svg {
    margin: 0 .2rem 0 0
}

.horizontal-scroll-buttons__next svg {
    margin: 0 0 0 .2rem
}

.hsc {
    display: block;
    position: relative;
    overflow: hidden
}

.hsc .scrollable {
    --left-mask-start: 0rem;
    --right-mask-start: 0rem;
    --left-mask-size: 2rem;
    --right-mask-size: 2rem;
    mask-image: linear-gradient(to right, transparent calc(0% + var(--left-mask-start)), black var(--left-mask-size, 0rem), black calc(100% - var(--right-mask-start) - var(--right-mask-size, 0rem)), transparent calc(100% - var(--right-mask-start)))
}

@media(hover:hover) {
    .hsc--left-overflowing .scrollable {
        --left-mask-start: 2rem !important;
        --left-mask-size: 4rem !important
    }

    .hsc--right-overflowing .scrollable {
        --right-mask-start: 2rem !important;
        --right-mask-size: 4rem !important
    }
}

.hsc__prev,
.hsc__next {
    display: none
}

@media(hover:hover) {

    .hsc--left-overflowing .hsc__prev,
    .hsc--right-overflowing .hsc__next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        appearance: none;
        background: none;
        height: 2.8rem;
        width: 2.8rem;
        border: 0;
        border-radius: 2.8rem;
        cursor: pointer;
        transition: background-color .1s ease-out;
        opacity: 1
    }

    .hsc--left-overflowing .hsc__prev svg,
    .hsc--right-overflowing .hsc__next svg {
        display: block;
        transition: stroke .1s ease-out;
        stroke: var(--text-color)
    }

    .hsc--left-overflowing .hsc__prev:hover:not(:disabled),
    .hsc--right-overflowing .hsc__next:hover:not(:disabled) {
        background-color: var(--secondary-background-color)
    }

    .hsc--left-overflowing .hsc__prev:hover:not(:disabled) svg,
    .hsc--right-overflowing .hsc__next:hover:not(:disabled) svg {
        stroke: var(--primary-color)
    }

    .hsc--left-overflowing .hsc__prev:focus-visible,
    .hsc--right-overflowing .hsc__next:focus-visible {
        background-color: var(--secondary-background-color);
        color: var(--secondary-text-color);
        outline-color: var(--secondary-text-color);
        outline-width: .2rem;
        outline-offset: 0;
        outline-style: solid;
        transition: none
    }

    .hsc--left-overflowing .hsc__prev:disabled,
    .hsc--right-overflowing .hsc__next:disabled {
        cursor: default
    }

    .hsc--left-overflowing .hsc__prev:disabled svg,
    .hsc--right-overflowing .hsc__next:disabled svg {
        stroke: #aac5ee
    }
}

.hsc__prev {
    left: 0rem
}

.hsc__prev svg {
    margin: 0 .2rem 0 0
}

.hsc__next {
    right: 0rem
}

.hsc__next svg {
    margin: 0 0 0 .2rem
}

.modal {
    padding: 5rem 4rem 4rem;
    border: 0;
    min-width: 50rem;
    border-radius: 1.5rem;
    background-color: var(--dropdown-background-color)
}

.modal::backdrop {
    background-color: #001a2f99
}

.modal:focus {
    outline: none
}

.modal__close-button {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    padding: 1rem;
    cursor: pointer;
    background: none;
    border: none;
    border-radius: 2.8rem;
    z-index: 9;
    transition: background-color .1s ease-out;
    color: var(--text-color)
}

.modal__close-button:hover {
    color: var(--secondary-text-color)
}

.modal__close-button:focus {
    outline: none
}

.modal__close-button:focus-visible {
    outline: .2rem solid var(--primary-color)
}

.modal__close-button svg {
    display: block;
    stroke: currentColor
}

@media(max-width:600px) {
    .modal {
        padding: 5rem 2rem 3rem;
        margin: 0;
        border-radius: 0;
        max-width: 100%;
        width: 100%;
        min-width: 0
    }

    .modal__close-button {
        top: 1rem;
        right: 1rem
    }
}

.search-market,
.search-coin {
    text-decoration: none
}

.search-market__favorite-heart,
.search-coin__favorite-heart {
    margin-right: 1.3rem
}

.search-market__icon,
.search-coin__icon {
    margin: 0 1.3rem 0 0;
    flex-shrink: 0;
    width: 2.2rem;
    height: 2.2rem
}

.search-market__icon img,
.search-coin__icon img {
    display: block
}

.search-market__detail,
.search-coin__detail {
    display: inline-flex;
    flex-direction: column
}

.search-market__name,
.search-coin__name {
    margin: 0 .8rem 0 0;
    text-align: left;
    font-weight: 600;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.search-market__name svg,
.search-coin__name svg {
    margin-left: .5rem;
    stroke: var(--text-color)
}

.search-market__symbol,
.search-coin__symbol {
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--secondary-text-color);
    line-height: 1.4;
    margin: 0 .8rem 0 0
}

.search-market__exchange,
.search-market__price,
.search-coin__exchange,
.search-coin__price {
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--secondary-text-color);
    text-align: right;
    line-height: 1.4;
    margin: 0 0 0 auto;
    white-space: nowrap
}

.search-exchange,
.search-category,
.search-ecosystem {
    text-decoration: none
}

.search-exchange__icon,
.search-category__icon,
.search-ecosystem__icon {
    flex-shrink: 0;
    width: 2.2rem;
    height: 2.2rem
}

.search-exchange__icon img,
.search-category__icon img,
.search-ecosystem__icon img {
    display: block
}

.search-exchange__name,
.search-category__name,
.search-ecosystem__name {
    margin: 0 0 0 1.3rem;
    text-align: left;
    font-weight: 600;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.search-exchange__coins,
.search-category__coins,
.search-ecosystem__coins {
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--secondary-text-color);
    text-align: right;
    line-height: 1.4;
    margin: 0 0 0 auto
}

.rcs-option {
    display: flex;
    appearance: none;
    text-decoration: none;
    background: var(--dropdown-background-color);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: var(--text-color);
    font-size: 1.4rem;
    font-weight: 500;
    cursor: pointer;
    padding: .6rem 1rem .7rem;
    border-radius: .3rem;
    margin: 0;
    min-height: 3.2rem;
    width: 100%;
    align-items: center;
    transition: color .1s ease-out, background-color .1s ease-out
}

.rcs-option--grid-area {
    display: grid;
    grid-template-areas: "icon name" "icon details"
}

.rcs-option:hover {
    background-color: var(--hover-background-color);
    color: var(--secondary-text-color)
}

.rcs-option:focus-visible {
    background-color: var(--hover-background-color);
    color: var(--secondary-text-color);
    outline-color: var(--secondary-text-color);
    outline-width: .2rem;
    outline-offset: 0;
    outline-style: solid;
    transition: none
}

.rcs-option__icon {
    flex-shrink: 0;
    width: 2.6rem;
    height: 2.6rem;
    border: .1rem solid var(--border-color);
    border-radius: 2rem;
    padding: .2rem;
    grid-area: icon
}

.rcs-option__icon img {
    width: 2rem;
    height: 2rem;
    display: block;
    border-radius: 2rem
}

.rcs-option__icon--square-wrapper {
    width: 2.8rem;
    height: 2.8rem;
    border-radius: .8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border: .1rem solid var(--border-color);
    padding: .28rem
}

.rcs-option__icon--square-wrapper svg {
    border-radius: .6rem;
    stroke: var(--text-color)
}

.rcs-option__icon--square-wrapper img {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: .6rem
}

.rcs-option__name {
    margin: 0 .8rem 0 1rem;
    text-align: left;
    font-weight: 600;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    grid-area: name
}

.rcs-option__details {
    grid-area: details;
    margin: 0 .8rem 0 1rem;
    font-size: 1.3rem;
    line-height: 0
}

.rcs-option__symbol {
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--secondary-text-color);
    text-align: right;
    line-height: 1.4;
    margin: 0 0 0 auto
}

.info-button {
    display: inline-block;
    cursor: help;
    vertical-align: middle;
    padding: .7rem;
    margin: -.5rem
}

.info-button--verified-icon {
    margin: 0 0 -.5rem
}

.info-button span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    border: .1rem solid var(--text-color);
    color: var(--text-color);
    border-radius: 1.6rem;
    font-size: 1rem;
    text-align: center;
    transition: background-color .1s ease-out
}

.info-button.tooltip-active span {
    background-color: var(--tooltip-hover-background-color);
    color: var(--tooltip-hover-text-color)
}

.info-button--positive span {
    border: .1rem solid var(--positive-color);
    color: var(--positive-color)
}

.info-button--positive.tooltip-active span {
    background-color: var(--positive-color);
    color: var(--tooltip-hover-text-color)
}

.info-button--neutral span {
    border: .1rem solid var(--badge-neutral-color);
    color: var(--badge-neutral-color)
}

.info-button--neutral.tooltip-active span {
    background-color: var(--badge-neutral-color);
    color: var(--tooltip-hover-text-color)
}

.info-tooltip {
    display: none;
    z-index: 91;
    position: absolute;
    transition: opacity 80ms ease-out, transform 80ms ease-out;
    transform: translateY(-.8rem);
    opacity: 0;
    width: max-content;
    max-width: calc(100vw - 2rem)
}

.info-tooltip[aria-hidden=true] {
    opacity: 0;
    transform: translateY(-.8rem)
}

.info-tooltip[aria-hidden=false] {
    opacity: 1;
    transform: translate(0)
}

.info-tooltip__triangle {
    position: absolute;
    top: -.7rem;
    width: 0;
    height: 0;
    border-left: .7rem solid transparent;
    border-right: .7rem solid transparent;
    border-bottom: .7rem solid var(--dropdown-background-color);
    z-index: 1
}

.info-tooltip__content {
    display: flex;
    flex-direction: column;
    max-height: inherit;
    border-radius: .5rem;
    background-color: var(--dropdown-background-color);
    color: var(--text-color);
    box-shadow: var(--box-shadow);
    padding: 1.2rem 2rem 1.5rem;
    text-align: left;
    font-size: 1.4rem;
    max-width: 40rem;
    line-height: 1.6
}

.info-tooltip__content:has(.info-tooltip__label-section) {
    padding: 0
}

.info-tooltip-2-col .info-tooltip__label-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .4rem;
    padding: 1.2rem 2rem 1.5rem;
    border-bottom: .1rem solid var(--border-color)
}

.info-tooltip-2-col .info-tooltip__label--title {
    font-size: 1.4rem;
    font-weight: 600
}

.info-tooltip-2-col .info-tooltip__label--time-left {
    color: var(--warning-color)
}

.info-tooltip-2-col .info-tooltip__label--time-left-red {
    color: var(--negative-color)
}

.info-tooltip-2-col .info-tooltip__content-2-col {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    padding: 2rem 3rem 3rem
}

.info-tooltip-2-col .info-tooltip__content-2-col-with-image {
    display: flex;
    gap: 1.2rem;
    padding-bottom: 2.5rem;
    border-bottom: .1rem solid var(--border-color)
}

.info-tooltip-2-col .info-tooltip__content-2-col-with-image-wrapper {
    width: 11rem;
    min-height: 6rem;
    border: .1rem solid var(--border-color);
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 0;
    margin-right: 1.2rem;
    background: #fff
}

.info-tooltip-2-col .info-tooltip__content-2-col-with-image img {
    width: 5rem;
    height: 5rem;
    object-fit: contain;
    border-radius: .3rem;
    margin: 2rem
}

.info-tooltip-2-col .info-tooltip__content-2-col-with-image-content {
    display: flex;
    flex-direction: column;
    gap: .4rem
}

.info-tooltip-2-col .info-tooltip__content-2-col-with-image-title {
    font-size: 1.6rem;
    font-weight: 700;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .5rem
}

.info-tooltip-2-col .info-tooltip__content-2-col-with-image-description {
    font-size: 1.4rem;
    font-weight: 500
}

.info-tooltip-2-col .info-tooltip__content-2-col-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1.2rem
}

.info-tooltip-2-col .info-tooltip__content-2-col-buttons-text {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .8rem
}

.info-tooltip__title {
    font-size: 1.4rem;
    font-weight: 600;
    margin-block-start: 0em;
    margin-block-end: 0em
}

.info-tooltip__title--center {
    text-align: center
}

.info-tooltip__fee-discount-description {
    font-size: 1.4rem;
    font-weight: 500;
    margin-block-start: .5em;
    margin-block-end: .5em
}

.info-tooltip__trustless-description {
    font-size: 1.4rem;
    font-weight: 500;
    margin-block-start: .5em;
    margin-block-end: .5em;
    line-height: 2.4rem
}

.info-tooltip__content:has(.info-tooltip__fee-discount-description) {
    max-width: 49.5rem
}

.info-tooltip__content:has(.info-tooltip-warning__title) {
    padding: 1.2rem 2.8rem 1.5rem
}

.info-tooltip-warning__title {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--warning-color);
    margin-block-start: 1em;
    margin-block-end: 0em
}

.info-tooltip-warning__icon {
    display: flex;
    align-items: flex-end;
    justify-content: center
}

.info-tooltip-warning__icon svg {
    stroke: currentColor;
    fill: currentColor
}

.info-tooltip-warning__content {
    max-width: 27rem;
    margin-block-start: .5em;
    margin-block-end: .6em
}

.info-tooltip-warning-detail {
    display: block;
    border-radius: .5rem;
    border: .1rem solid var(--border-color);
    color: var(--text-color)
}

.info-tooltip-warning-detail__icon {
    display: flex;
    align-items: center;
    justify-content: center
}

.info-tooltip-warning-detail__icon svg {
    stroke: var(--warning-color);
    fill: var(--warning-color);
    margin-right: 1rem
}

.info-tooltip-warning-detail__title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.4rem 2rem 1.5rem;
    cursor: pointer;
    border-top: .1rem solid var(--border-color);
    transition: color .1s ease-out;
    font-size: 1.4rem;
    text-wrap: balance;
    width: 36rem
}

.info-tooltip-warning-detail__title:first-child {
    border-top: none
}

.info-tooltip-warning-detail__title svg.action-buttons__caret {
    flex-shrink: 0;
    margin-left: 1rem;
    stroke: currentColor;
    transition: transform .3s ease-out
}

.info-tooltip-warning-detail__content {
    display: none;
    padding: 0 2rem 1.5rem;
    font-size: 1.4rem;
    margin: 0;
    line-height: 1.8
}

.info-tooltip-warning-detail__title--open svg.action-buttons__caret {
    transform: rotate(180deg)
}

.info-tooltip-warning-detail__title--open+.info-tooltip-warning-detail__content {
    display: block
}

.info-tooltip-activity {
    display: block;
    border-radius: .5rem;
    color: var(--text-color);
    margin-block-start: 1em;
    margin-block-end: 1em
}

.info-tooltip-activity__icon {
    display: flex;
    align-items: center;
    justify-content: center
}

.info-tooltip-activity__icon svg {
    margin-right: 1rem
}

.info-tooltip-activity__icon svg.warning {
    stroke: var(--warning-color);
    fill: var(--warning-color)
}

.info-tooltip-activity__icon svg.new {
    stroke: var(--primary-color);
    fill: var(--primary-color)
}

.info-tooltip-activity__icon svg.trending {
    stroke: var(--warning-color);
    fill: var(--warning-color)
}

.info-tooltip-activity__title {
    display: flex;
    position: relative;
    justify-content: space-between;
    align-items: center;
    padding: 1.4rem 2rem 1.5rem;
    border: .1rem solid var(--border-color);
    transition: color .1s ease-out;
    font-size: 1.4rem;
    text-wrap: balance;
    min-width: 30rem;
    text-decoration: none
}

.info-tooltip-activity__title:has([href]) {
    cursor: pointer
}

.info-tooltip-activity__title:first-child {
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem
}

.info-tooltip-activity__title:not(:first-child) {
    margin-top: -.1rem
}

.info-tooltip-activity__title:last-child {
    border-bottom-left-radius: .5rem;
    border-bottom-right-radius: .5rem
}

.info-tooltip-activity__title svg.action-buttons__caret {
    flex-shrink: 0;
    margin-left: 1rem;
    stroke: currentColor;
    transform: rotate(270deg)
}

.info-tooltip-activity__title:hover {
    z-index: 1;
    border-color: var(--text-color)
}

.info-tooltip-fee-discount {
    display: flex;
    width: max-content
}

.info-tooltip-fee-discount.tooltip-active {
    border-color: #264d89
}

.info-tooltip-fee-discount.tooltip-active .badge__fee-discount {
    border-color: #264d89;
    transition: border-color .2s ease-out
}

.info-tooltip-fee-discount.tooltip-active .badge__fee-discount--success {
    border-color: var(--badge-success-color)
}

.info-tooltip-fee-discount.tooltip-active .badge__fee-discount__icon {
    border-color: #264d89;
    transition: border-color .2s ease-out
}

.info-tooltip-fee-discount.tooltip-active .badge__fee-discount__icon--success {
    border-color: var(--badge-success-color)
}

.info-tooltip-fee-discount.tooltip-active .info-button span {
    background-color: var(--tooltip-hover-background-color);
    color: var(--tooltip-hover-text-color)
}

.info-tooltip-fee-discount.tooltip-active .info-button--positive span {
    background-color: var(--positive-color);
    color: var(--tooltip-hover-text-color)
}

.info-tooltip-fee-discount.tooltip-active .info-button--neutral span {
    background-color: var(--badge-neutral-color);
    color: var(--tooltip-hover-text-color)
}

info-tooltip:has(.theme-switch__item) {
    display: flex;
    flex-grow: 1;
    border: 0
}

info-tooltip:has(.theme-switch__item):first-child,
info-tooltip:has(.theme-switch__item):first-child .theme-switch__item {
    border-top-left-radius: .3rem;
    border-bottom-left-radius: .3rem
}

info-tooltip:has(.theme-switch__item):last-child,
info-tooltip:has(.theme-switch__item):last-child .theme-switch__item {
    border-top-right-radius: .3rem;
    border-bottom-right-radius: .3rem
}

info-tooltip:has(dropdown-select) {
    flex-grow: 100
}

@media(max-width:600px) {
    .info-tooltip-warning-detail__title {
        width: auto
    }
}

.up {
    animation: price-up 1.4s linear 0s 1 normal forwards running
}

.down {
    animation: price-down 1.4s linear 0s 1 normal forwards running
}

@media(prefers-reduced-motion:reduce) {

    .up,
    .down {
        animation: none
    }
}

.pagination {
    display: flex;
    justify-content: center;
    height: fit-content;
    gap: 1.5rem
}

.pagination__prev,
.pagination__next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    gap: .8rem;
    font-size: 1.4rem;
    color: var(--text-color);
    font-weight: 600;
    padding: .9rem 1.5rem 1rem;
    width: 18rem;
    text-align: center;
    border: .1rem solid var(--border-color);
    border-radius: .3rem;
    cursor: pointer;
    height: 4.2rem;
    transition: border-color .1s ease-in-out, background-color .1s ease-out
}

@media(hover:hover) {

    .pagination__prev:hover,
    .pagination__next:hover {
        border-color: var(--text-color)
    }
}

.pagination__prev:active,
.pagination__next:active {
    background-color: var(--active-background-color)
}

.pagination__prev svg,
.pagination__next svg {
    stroke: currentColor
}

.pagination__prev--disabled,
.pagination__next--disabled {
    color: var(--disabled-color);
    cursor: default
}

@media(hover:hover) {

    .pagination__prev--disabled:hover,
    .pagination__next--disabled:hover {
        border-color: var(--border-color)
    }
}

.pagination__prev--disabled:active,
.pagination__next--disabled:active {
    background-color: transparent
}

.pagination__text {
    margin-top: -.1rem
}

.pagination--compact {
    gap: 0rem;
    margin: 0
}

.pagination--compact .pagination__prev,
.pagination--compact .pagination__next {
    min-width: 4.2rem;
    width: auto
}

.pagination--compact .pagination__prev {
    border-radius: .3rem 0 0 .3rem;
    margin-right: -.1rem
}

.pagination--compact .pagination__prev:hover {
    z-index: 1
}

.pagination--compact .pagination__next {
    border-radius: 0 .3rem .3rem 0
}

.pagination--compact .pagination__text {
    display: none
}

.pagination-wrapper {
    display: flex;
    align-items: center;
    position: relative;
    justify-content: space-between;
    margin: 1.8rem 0 .3rem
}

.pagination-wrapper--top {
    margin: 1.8rem 0
}

@media(max-width:600px) {

    .pagination__prev,
    .pagination__next {
        min-width: 0;
        max-width: 11rem
    }
}

.chart {
    display: flex;
    flex-direction: column;
    margin: 0 -2rem;
    background-color: var(--background-color)
}

.chart__container {
    display: grid;
    flex-grow: 1;
    background-color: var(--background-color);
    grid-template-areas: "header" "body" "footer"
}

.chart__container>* {
    min-width: 0;
    min-height: 0
}

.chart__y-axis {
    display: none;
    grid-area: y-axis
}

.chart__y-axis-label {
    position: absolute;
    transform: translateY(-50%);
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--text-color);
    white-space: nowrap
}

.chart__price-bubble {
    position: absolute;
    transform: translateY(-50%);
    font-size: 1.4rem;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
    background-color: var(--primary-color);
    z-index: 2;
    padding: .4rem .8rem;
    margin: 0 -.9rem;
    border-radius: .3rem
}

.chart__price-bubble--positive {
    background-color: var(--positive-color)
}

.chart__price-bubble--negative {
    background-color: var(--negative-color)
}

.chart__price-bubble--btc {
    background-color: #f7931a
}

.chart__price-bubble--eth {
    background-color: #8c8c8c
}

.chart__price-bubble--hidden {
    display: none
}

.chart__price-bubble:after {
    content: "";
    position: absolute;
    left: -.5rem;
    top: 50%;
    margin-top: -.5rem;
    width: 0;
    height: 0;
    border-top: .5rem solid transparent;
    border-bottom: .5rem solid transparent;
    border-right: .5rem solid var(--primary-color);
    z-index: 1
}

.chart__price-bubble--positive:after {
    border-right: .5rem solid var(--positive-color)
}

.chart__price-bubble--negative:after {
    border-right: .5rem solid var(--negative-color)
}

.chart__price-bubble--btc:after {
    border-right: .5rem solid #f7931a
}

.chart__price-bubble--eth:after {
    border-right: .5rem solid #8c8c8c
}

.chart__hero {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    padding: 1.4rem 4rem;
    border-bottom: .1rem solid var(--border-color)
}

.chart__hero>* {
    min-width: 0
}

.chart__hero-content {
    overflow: hidden;
    color: var(--text-color)
}

.chart__hero-profile {
    display: flex;
    align-items: center;
    gap: 1.3rem
}

.chart__hero-value {
    color: var(--text-color);
    border-left: .1rem solid var(--border-color);
    padding-left: 2.5rem;
    font-variant-numeric: tabular-nums;
    -moz-font-feature-settings: "tnum";
    -webkit-font-feature-settings: "tnum";
    font-feature-settings: "tnum";
    letter-spacing: -.065em
}

.chart__hero-value-price {
    font-size: 1.6rem;
    font-weight: 700
}

.chart__hero-name {
    font-size: 1.6rem;
    font-weight: 700;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.chart__hero-title {
    font-size: 1.4rem
}

.chart__logo-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 4.2rem;
    height: 4.2rem;
    border-radius: 4.2rem;
    background: #fff;
    border: .3rem solid #fff;
    overflow: hidden;
    outline: .1rem solid var(--border-color)
}

.chart__logo-wrapper--global {
    background: #002358
}

.chart__logo {
    display: block;
    width: 3.6rem;
    height: 3.6rem;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none
}

.chart__logo-wrapper--global .chart__logo {
    width: 2rem;
    height: 2rem
}

.chart__hero-close {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border: 0;
    flex-shrink: 0;
    padding: 1rem;
    margin: -1rem -1rem -1rem auto;
    cursor: pointer;
    color: var(--text-color);
    transition: color .1s ease-out;
    border: .1rem solid var(--border-color);
    border-radius: .3rem
}

.chart__hero-close:hover {
    border-color: var(--text-color)
}

@media(hover:hover) {
    .chart__hero-close:hover {
        color: var(--secondary-text-color)
    }
}

.chart__hero-close svg {
    stroke: currentColor
}

.chart__header {
    display: flex;
    align-items: center;
    margin: 0 2rem;
    gap: 0 .8rem;
    border-bottom: .1rem solid var(--border-color);
    min-height: 3.8rem;
    grid-area: header
}

.chart__header>* {
    min-width: 0
}

.chart__header .current {
    font-weight: 500
}

.chart__header-wrapper {
    margin: 0 0 0 -2rem
}

.chart__footer {
    display: flex;
    margin: 0 2rem;
    border-top: .1rem solid var(--border-color);
    grid-area: footer
}

.chart__footer--primary-border {
    margin-top: -.1rem
}

.chart__title {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-color);
    margin: .9rem 0
}

.chart__max-value,
.chart__min-value {
    flex-shrink: 0;
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--text-color);
    white-space: nowrap;
    margin: .9rem 0 .9rem auto
}

.chart__max-value {
    align-self: end
}

.chart__body {
    position: relative;
    grid-area: body
}

.chart__canvas {
    display: block;
    width: 100%;
    height: 36rem;
    touch-action: pinch-zoom pan-y;
    -webkit-user-select: none;
    user-select: none;
    cursor: crosshair;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    z-index: 1
}

.chart__canvas--narrow {
    height: 20rem
}

.chart__labels {
    position: relative;
    flex-grow: 1;
    height: 1.6rem;
    margin: 1rem 2rem 1rem 0
}

.chart__label {
    position: absolute;
    white-space: nowrap;
    color: var(--secondary-text-color);
    font-size: 1.2rem;
    font-weight: 500
}

.chart__loading {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 1.5rem;
    right: 1.5rem;
    bottom: 0;
    z-index: 3;
    background-color: color-mix(in srgb, var(--background-color) 75%, transparent);
    color: var(--text-color)
}

.chart__loading--hidden {
    display: none
}

.chart__loading svg {
    stroke: currentColor
}

.chart__real-time-dot {
    position: absolute;
    height: .7rem;
    width: .7rem;
    margin-left: -.35rem;
    margin-top: -.35rem;
    z-index: 2;
    pointer-events: none;
    border-radius: 1rem;
    border: .1rem solid var(--background-color);
    background-color: var(--primary-color)
}

.chart__real-time-dot--positive {
    background-color: var(--positive-color)
}

.chart__real-time-dot--negative {
    background-color: var(--negative-color)
}

.chart__real-time-dot--btc {
    background-color: #f7931a
}

.chart__real-time-dot--eth {
    background-color: #8c8c8c
}

.chart__real-time-dot:after {
    content: "";
    position: absolute;
    opacity: .3;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 2.5rem;
    top: -1rem;
    left: -1rem;
    background-color: var(--primary-color);
    animation: real-time-pulse 2.4s cubic-bezier(.52, .6, .25, .99) infinite
}

.chart__real-time-dot--positive:after {
    background-color: var(--positive-color)
}

.chart__real-time-dot--negative:after {
    background-color: var(--negative-color)
}

.chart__real-time-dot--btc:after {
    background-color: #f7931a
}

.chart__real-time-dot--eth:after {
    background-color: #8c8c8c
}

.chart__real-time-dot--hidden {
    display: none
}

.chart__no-data {
    position: absolute;
    top: 50%;
    left: 4rem;
    right: 4rem;
    transform: translateY(-50%);
    color: var(--secondary-text-color);
    font-size: 1.4rem;
    font-weight: 500;
    text-align: center;
    z-index: 2
}

.chart__no-data--hidden {
    display: none
}

.chart__controls {
    display: flex;
    justify-content: space-between;
    margin: .6rem 0 0;
    gap: 1.5rem 2rem
}

.chart__control-group {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
    margin: 0 2rem 0 0
}

.chart__switches {
    display: inline-flex;
    border: .1rem solid var(--border-color);
    gap: .1rem;
    border-radius: .3rem;
    background: var(--border-color)
}

.chart__switches--scroll {
    margin: 0 2rem
}

.chart__switch {
    appearance: none;
    display: block;
    background: none;
    color: var(--secondary-text-color);
    cursor: pointer;
    font-size: 1.4rem;
    font-weight: 500;
    border: 0;
    background: var(--background-color);
    padding: .5rem 1.4rem;
    height: 4rem;
    outline-style: solid;
    outline-width: .1rem;
    outline-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    transition: outline-color .1s ease-out, color .1s ease-out, background-color .1s ease-out
}

.chart__switch svg {
    display: block;
    stroke: var(--text-color);
    fill: var(--text-color)
}

@media(hover:hover) {
    .chart__switch:hover {
        color: var(--text-color);
        outline-color: var(--text-color)
    }
}

.chart__switch.hsc-tapped {
    outline-color: var(--text-color);
    background-color: var(--active-background-color)
}

.chart__switch:first-child {
    border-radius: .3rem 0 0 .3rem
}

.chart__switch:last-child {
    border-radius: 0 .3rem .3rem 0
}

.chart__switch--selected {
    font-weight: 600;
    color: var(--text-color);
    outline-color: var(--text-color)
}

.chart__switches:not(.chart__switches--scroll) .chart__switch:active {
    outline-color: var(--text-color);
    background-color: var(--active-background-color)
}

.chart__currency {
    display: flex;
    flex-grow: 1;
    appearance: none;
    background: none;
    justify-content: space-between;
    align-items: center;
    padding: .5rem 1rem .5rem 1.4rem;
    margin: 0;
    height: 4.2rem;
    min-width: 10rem;
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--text-color);
    border: .1rem solid var(--border-color);
    border-radius: .3rem;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: border-color .1s ease-out, background-color .1s ease-out
}

@media(hover:hover) {
    .chart__currency:hover {
        border-color: var(--text-color)
    }
}

.chart__currency.dropdown-active {
    border-color: var(--text-color)
}

.chart__currency:active {
    border-color: var(--text-color);
    background-color: var(--active-background-color)
}

.chart__currency svg {
    margin: 0 0 0 1rem;
    stroke: currentColor
}

.chart__screenshot-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    flex-shrink: 0;
    border-radius: .3rem;
    background-color: var(--background-color);
    border: .1rem solid var(--border-color);
    padding: .5rem 1.3rem;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: border-color .1s ease-out, background-color .1s ease-out;
    color: var(--text-color)
}

@media(hover:hover) {
    .chart__screenshot-button:hover {
        border-color: var(--text-color)
    }
}

.chart__screenshot-button svg {
    stroke: currentColor;
    fill: currentColor
}

.chart__fullscreen-button {
    margin-left: auto
}

.chart__fullscreen-button-open,
.chart__fullscreen-button-close {
    display: contents
}

.chart__exclude-stablecoins-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    padding: .5rem 1.4rem;
    height: 4rem;
    border-radius: .3rem;
    background-color: var(--background-color);
    border: .1rem solid var(--border-color);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: border-color .1s ease-out, background-color .1s ease-out;
    color: var(--text-color);
    font-size: 1.4rem;
    font-weight: 500
}

@media(hover:hover) {
    .chart__exclude-stablecoins-toggle:hover {
        border-color: var(--text-color)
    }
}

.chart__exclude-stablecoins-toggle:active {
    border-color: var(--text-color);
    background-color: var(--active-background-color)
}

.chart__exclude-stablecoins-toggle svg {
    flex-shrink: 0;
    stroke: currentColor;
    fill: currentColor
}

:root.dark-theme .chart__logo-wrapper {
    outline: none
}

@media(prefers-color-scheme:dark) {
    :root:not(.light-theme) .chart__logo-wrapper {
        outline: none
    }
}

.is-fullscreen .chart {
    padding: 0 0 3.5rem;
    margin: 0
}

.is-fullscreen .chart__container {
    padding: 1.5rem 2rem 0;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "header ." "body y-axis" "footer ."
}

.is-fullscreen .chart__max-value,
.is-fullscreen .chart__min-value {
    display: none
}

.is-fullscreen .chart__y-axis {
    display: block;
    position: relative;
    margin: 0 2rem 0 0
}

.is-fullscreen .chart__body {
    flex-grow: 1
}

.is-fullscreen .chart__canvas {
    height: 100%
}

.is-fullscreen .chart__controls {
    padding: 0 2rem
}

.chart-stats {
    display: inline-flex;
    flex-direction: row;
    color: var(--text-color);
    gap: .7rem;
    margin: 0;
    white-space: nowrap;
    padding: .9rem 2rem
}

.chart-stats dt {
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0
}

.chart-stats dd {
    font-size: 1.4rem;
    font-weight: 500;
    margin: 0 1.3rem 0 0
}

.chart-stats dd:last-child {
    margin: 0
}

.tooltip,
.bar-chart-tooltip {
    opacity: 0;
    transition: opacity .1s ease-out;
    pointer-events: none;
    position: absolute;
    z-index: 89;
    inset: 0;
    transform: translate(0)
}

.tooltip__top,
.bar-chart-tooltip__top {
    position: absolute;
    z-index: 92;
    top: -4.7rem;
    background-color: var(--dropdown-background-color);
    text-align: center;
    white-space: nowrap;
    border-radius: .4rem;
    display: flex;
    flex-direction: column;
    padding: 1rem 1.6rem 1.1rem;
    box-shadow: 0 .2rem 1rem #002bbb1f
}

.tooltip__value,
.bar-chart-tooltip__value {
    color: var(--text-color);
    font-weight: 600;
    font-size: 1.5rem;
    font-variant-numeric: tabular-nums;
    -moz-font-feature-settings: "tnum";
    -webkit-font-feature-settings: "tnum";
    font-feature-settings: "tnum";
    letter-spacing: -.028em;
    padding: 0 0 .2rem
}

.tooltip__value svg,
.bar-chart-tooltip__value svg {
    vertical-align: middle;
    margin: -.2rem .4rem 0 0
}

.tooltip__value svg.warning,
.bar-chart-tooltip__value svg.warning {
    stroke: var(--warning-color)
}

.tooltip__time,
.bar-chart-tooltip__time {
    color: var(--text-color);
    font-size: 1.2rem;
    font-weight: 500
}

.tooltip__grid-x,
.bar-chart-tooltip__grid-x {
    border-style: dashed;
    border-color: var(--text-color);
    border-width: 0 0 .1rem 0;
    height: 0;
    left: 2rem;
    right: 2rem;
    pointer-events: none;
    position: absolute;
    z-index: 90
}

.tooltip__grid-y,
.bar-chart-tooltip__grid-y {
    border-style: dashed;
    border-color: var(--text-color);
    border-width: 0 0 0 .1rem;
    width: 0;
    top: 0;
    bottom: 0;
    pointer-events: none;
    position: absolute;
    z-index: 90
}

.tooltip__point,
.bar-chart-tooltip__point {
    position: absolute;
    height: 1.1rem;
    width: 1.1rem;
    z-index: 91;
    pointer-events: none;
    background-color: var(--primary-color);
    border: .2rem solid var(--background-color);
    border-radius: 1rem
}

.tooltip__point--positive,
.bar-chart-tooltip__point--positive {
    background-color: var(--positive-color)
}

.tooltip__point--negative,
.bar-chart-tooltip__point--negative {
    background-color: var(--negative-color)
}

.tooltip__point--btc,
.bar-chart-tooltip__point--btc {
    background-color: #f7931a
}

.tooltip__point--eth,
.bar-chart-tooltip__point--eth {
    background-color: #8c8c8c
}

.bar-chart-tooltip__content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .6rem 3rem;
    width: min-content
}

.bar-chart-tooltip__label {
    color: var(--text-color);
    font-size: 1.4rem;
    font-weight: 600;
    text-align: left
}

.bar-chart-tooltip__change {
    color: var(--text-color);
    font-size: 1.4rem;
    font-weight: 600;
    text-align: right
}

.bar-chart-tooltip--positive .bar-chart-tooltip__change {
    color: var(--positive-color)
}

.bar-chart-tooltip--negative .bar-chart-tooltip__change {
    color: var(--negative-color)
}

.bar-chart-tooltip__price {
    color: var(--text-color);
    font-weight: 500;
    font-size: 1.4rem;
    font-variant-numeric: tabular-nums;
    -moz-font-feature-settings: "tnum";
    -webkit-font-feature-settings: "tnum";
    font-feature-settings: "tnum";
    letter-spacing: -.028em;
    text-align: right
}

.bar-chart-tooltip__bar {
    position: absolute;
    z-index: 91;
    pointer-events: none;
    background-color: var(--primary-color)
}

.bar-chart-tooltip--positive .bar-chart-tooltip__bar {
    background-color: var(--positive-color)
}

.bar-chart-tooltip--negative .bar-chart-tooltip__bar {
    background-color: var(--negative-color)
}

.bar-chart-tooltip--negative .bar-chart-tooltip__grid-x {
    border-color: var(--negative-color);
    border-width: 0 0 .1rem
}

.bar-chart-tooltip--positive .bar-chart-tooltip__grid-x {
    border-color: var(--positive-color)
}

.bar-chart-tooltip--negative .bar-chart-tooltip__grid-y {
    border-color: var(--negative-color)
}

.bar-chart-tooltip--positive .bar-chart-tooltip__grid-y {
    border-color: var(--positive-color)
}

@media(max-width:600px) {
    .chart__hero {
        display: grid;
        grid-template-columns: auto 1fr auto;
        padding: 1.4rem 2rem
    }

    .chart__hero-value {
        border-left: none;
        padding-left: 0;
        justify-self: end;
        text-align: right
    }

    .chart__hero-close {
        justify-self: end
    }

    .chart__header {
        margin: 0 2rem
    }

    .chart__header--with-tabs {
        margin: 0 2rem 0 0
    }

    .chart__tab {
        height: 4rem
    }

    .chart__header--with-tabs .chart__max-value {
        margin: 0 0 0 auto;
        padding: .9rem 0 .8rem 1rem;
        border-width: 0 0 0 .1rem;
        flex-grow: 0;
        align-self: center
    }

    .chart__canvas {
        height: 24rem
    }

    .chart__canvas--narrow {
        height: 18rem
    }

    .is-fullscreen .chart {
        padding: 0 0 2rem
    }

    .is-fullscreen .chart__container {
        padding: 1.5rem 0 0;
        grid-template-columns: 1fr;
        grid-template-areas: "header" "body" "footer"
    }

    .is-fullscreen .chart__controls {
        padding: 0
    }

    .is-fullscreen .chart__y-axis {
        display: none
    }

    .is-fullscreen .chart__max-value,
    .is-fullscreen .chart__min-value {
        display: block
    }

    .is-fullscreen .chart__controls--column-on-mobile-fullscreen {
        flex-direction: column
    }

    .is-fullscreen .chart__controls--column-on-mobile-fullscreen .chart__control-group {
        margin: 0 2rem
    }

    .tooltip__top {
        top: -4.2rem;
        padding: .8rem 1.2rem .9rem
    }

    .tooltip__value {
        font-size: 1.4rem
    }

    .tooltip__time {
        font-size: 1.1rem
    }
}

@media(max-width:600px) {
    .chart__hero {
        gap: 1.5rem
    }
}

.x-chart {
    display: grid;
    grid-template-areas: "header header" "plot-area y-axis" "footer y-axis";
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr auto;
    gap: 0;
    position: relative;
    height: 45rem;
    border-top: .1rem solid var(--border-color);
    border-bottom: .1rem solid var(--border-color);
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none
}

.x-chart--narrow {
    height: 28rem
}

.x-chart>* {
    min-width: 0;
    min-height: 0
}

.x-chart__header {
    grid-area: header;
    display: flex;
    padding: 1.5rem 2rem;
    border-bottom: .1rem solid var(--border-color);
    align-items: end
}

.x-chart__header .hsc {
    margin: 0 -2rem
}

.x-chart__header .hsc--right-overflowing {
    margin-right: 0
}

.x-chart__header .x-chart__coin-tags {
    display: inline-flex
}

.x-chart__header>* {
    min-width: 0
}

.x-chart__coin-tags {
    display: flex;
    align-items: center;
    gap: .8rem;
    flex-wrap: nowrap;
    margin-right: auto;
    z-index: 3;
    margin: 0 2rem;
    min-width: 0
}

.x-chart__coin-tags-container {
    display: contents
}

.x-chart__coin-tag {
    display: inline-flex;
    align-items: center;
    height: 4.2rem;
    gap: .6rem;
    padding: .5rem 1rem;
    border: .1rem solid;
    border-radius: .4rem;
    background-color: var(--background-color);
    color: var(--text-color);
    font-size: 1.4rem;
    font-weight: 500;
    cursor: default;
    transition: opacity .1s ease-out;
    white-space: nowrap
}

.x-chart__coin-tag-symbol {
    color: var(--text-color);
    font-weight: 600
}

.x-chart__coin-tag-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: transparent;
    color: var(--text-color);
    cursor: pointer;
    font-size: 2.6rem;
    font-weight: 400;
    line-height: 1;
    transition: background-color .1s ease-out, color .1s ease-out;
    margin-left: -.2rem
}

@media(hover:hover) {
    .x-chart__coin-tag-remove:hover {
        background-color: var(--hover-background-color);
        color: var(--secondary-text-color)
    }
}

.x-chart__coin-tag-remove:active {
    background-color: var(--active-background-color)
}

.x-chart__add-coin-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 5rem;
    height: 4.2rem;
    padding: 0;
    border: .1rem solid var(--border-color);
    border-radius: .4rem;
    background-color: var(--background-color);
    color: var(--text-color);
    cursor: pointer;
    transition: border-color .1s ease-out, background-color .1s ease-out
}

@media(hover:hover) {
    .x-chart__add-coin-button:hover {
        border-color: var(--text-color);
        background-color: var(--hover-background-color)
    }
}

.x-chart__add-coin-button:active {
    background-color: var(--active-background-color)
}

.x-chart__add-coin-icon {
    font-size: 2.5rem;
    font-weight: 400;
    line-height: 1;
    color: var(--text-color)
}

.x-chart__footer {
    grid-area: footer;
    display: flex;
    border-top: .1rem solid var(--border-color)
}

.x-chart__title {
    display: flex;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-color);
    margin: 0;
    padding: 1.2rem 0 .9rem;
    gap: 0 .8rem;
    flex-grow: 1
}

.x-chart__title .label {
    font-weight: 500
}

.x-chart__title-dot {
    margin-top: .4rem;
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    flex-shrink: 0;
    background-color: var(--text-color)
}

.x-chart__controls {
    display: flex;
    justify-content: space-between;
    padding: .6rem 0 0;
    gap: 1.5rem 1rem
}

.x-chart__controls .hsc {
    margin: 0 -2rem
}

.x-chart__controls .hsc--right-overflowing {
    margin-right: 0
}

.x-chart__fluid-control {
    flex-grow: 100
}

.x-chart__control-group {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0;
    min-width: 0
}

.x-chart__switches {
    display: inline-flex;
    border: .1rem solid var(--border-color);
    gap: .1rem;
    border-radius: .3rem;
    background: var(--border-color)
}

.x-chart__switches--scroll {
    margin: 0 2rem
}

.x-chart__switches--full-width {
    display: flex;
    justify-content: stretch
}

.x-chart__switch {
    appearance: none;
    display: flex;
    align-items: center;
    gap: .6rem;
    background: none;
    color: var(--secondary-text-color);
    cursor: pointer;
    font-size: 1.4rem;
    font-weight: 500;
    border: 0;
    background: var(--background-color);
    padding: .5rem 1.4rem;
    height: 4rem;
    outline-style: solid;
    outline-width: .1rem;
    outline-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    transition: outline-color .1s ease-out, color .1s ease-out, background-color .1s ease-out
}

.x-chart__switch--fluid {
    flex-grow: 1;
    flex-basis: 100%
}

.x-chart__switch--center {
    justify-content: center
}

.x-chart__switch--in-dropdown {
    background: var(--dropdown-background-color)
}

.x-chart__switch svg {
    display: block;
    stroke: var(--text-color);
    fill: var(--text-color)
}

@media(hover:hover) {
    .x-chart__switch:hover {
        color: var(--text-color);
        outline-color: var(--text-color)
    }
}

.x-chart__switch.hsc-tapped {
    outline-color: var(--text-color);
    background-color: var(--active-background-color)
}

.x-chart__switch[disabled] {
    cursor: not-allowed;
    color: var(--disabled-color);
    background: var(--disabled-background-color)
}

.x-chart__switch[disabled]:hover {
    outline-color: transparent
}

.x-chart__switch:first-child {
    border-top-left-radius: .3rem;
    border-bottom-left-radius: .3rem
}

.x-chart__switch:last-child {
    border-top-right-radius: .3rem;
    border-bottom-right-radius: .3rem
}

.x-chart__switch--selected,
.x-chart__switch:has(>input[type=radio]:checked) {
    color: var(--text-color);
    outline-color: var(--text-color)
}

.x-chart__switch input[type=radio] {
    display: none
}

.x-chart__switches:not(.x-chart__switches--scroll) .x-chart__switch:active {
    outline-color: var(--text-color);
    background-color: var(--active-background-color)
}

.x-chart__checkboxes {
    display: flex;
    flex-direction: column;
    border-radius: .3rem;
    border: .1rem solid var(--border-color)
}

.x-chart__checkbox+.x-chart__checkbox {
    border-top: .1rem solid var(--border-color)
}

.x-chart__checkbox {
    display: flex;
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--text-color);
    padding: 1.5rem;
    width: 100%;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none
}

.x-chart__checkbox__content {
    display: block;
    position: relative;
    padding-left: 2.5rem;
    background: none
}

.x-chart__checkbox__content input[type=checkbox] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0
}

.x-chart__checkbox__input {
    position: absolute;
    top: .2rem;
    left: 0;
    height: 1.5rem;
    width: 1.5rem;
    border: .15rem solid var(--text-color);
    border-radius: .3rem
}

.x-chart__checkbox__input:after {
    content: "";
    position: absolute;
    left: .4rem;
    top: .1rem;
    width: .4rem;
    height: .8rem;
    border: solid var(--dropdown-background-color);
    border-width: 0 .15rem .15rem 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg)
}

.x-chart__checkbox:hover input[type=checkbox]+.x-chart__checkbox__input {
    width: 1.6rem;
    height: 1.6rem;
    top: .15rem;
    left: -.05rem;
    transition: width .1s ease-out, height .1s ease-out, top .1s ease-out, left .1s ease-out
}

.x-chart__checkbox:hover input[type=checkbox]+.x-chart__checkbox__input:after {
    left: .42rem;
    top: .12rem;
    width: .45rem;
    height: .85rem;
    transition: width .1s ease-out, height .1s ease-out, left .1s ease-out, top .1s ease-out
}

.x-chart__checkbox input[type=checkbox]:checked+.x-chart__checkbox__input {
    background-color: var(--text-color)
}

.x-chart__checkbox__note {
    display: block;
    margin-top: .6rem;
    font-size: 1.2rem;
    font-weight: 400
}

.x-chart__checkbox:has(input:disabled) {
    cursor: not-allowed;
    color: var(--disabled-color);
    background: var(--disabled-background-color)
}

.x-chart__checkbox:has(input:disabled) .x-chart__checkbox__content {
    cursor: not-allowed
}

.x-chart__checkbox:has(input:disabled) .x-chart__checkbox__input {
    border-color: var(--disabled-color)
}

.x-chart__checkbox:has(input:disabled):hover input[type=checkbox]+.x-chart__checkbox__input {
    width: 1.5rem;
    height: 1.5rem;
    top: .2rem;
    left: 0
}

.x-chart__checkbox:has(input:disabled):hover input[type=checkbox]+.x-chart__checkbox__input:after {
    left: .4rem;
    top: .1rem;
    width: .4rem;
    height: .8rem
}

.x-chart__clear {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: var(--text-color);
    color: var(--background-color);
    border: 0;
    height: 1.4rem;
    width: 1.4rem;
    margin-right: .2rem;
    padding: 0;
    border-radius: 2.4rem;
    cursor: pointer;
    transition: background-color .1s ease-out
}

.x-chart__clear svg {
    stroke: currentColor;
    width: .6rem;
    display: block;
    height: .6rem
}

@media(hover:hover) {
    .x-chart__clear:hover {
        background: var(--secondary-text-color)
    }
}

.x-chart-hero {
    display: flex;
    align-items: center;
    gap: 1.5rem 2.5rem;
    padding: 1.5rem 2rem
}

.x-chart-hero>* {
    min-width: 0
}

.x-chart-hero__profile {
    grid-area: profile;
    display: flex;
    align-items: center;
    gap: 1.3rem
}

.x-chart-hero__logo {
    display: block;
    width: 3.6rem;
    height: 3.6rem;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none
}

.x-chart-hero__logo-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 4.2rem;
    height: 4.2rem;
    border-radius: 4.2rem;
    background: #fff;
    border: .3rem solid #fff;
    overflow: hidden;
    outline: .1rem solid var(--border-color);
    flex-shrink: 0
}

.x-chart-hero__logo-wrapper--global {
    background: #002358
}

.x-chart-hero__logo-wrapper--global .x-chart-hero__logo {
    width: 2rem;
    height: 2rem
}

.x-chart-hero__content {
    overflow: hidden;
    color: var(--text-color)
}

.x-chart-hero__name {
    font-size: 1.6rem;
    font-weight: 700;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.x-chart-hero__title {
    font-size: 1.4rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.x-chart-hero__current {
    grid-area: current;
    text-align: right;
    flex-shrink: 0
}

.x-chart-hero__value {
    color: var(--text-color);
    font-size: 1.6rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    -moz-font-feature-settings: "tnum";
    -webkit-font-feature-settings: "tnum";
    font-feature-settings: "tnum";
    letter-spacing: -.065em;
    white-space: nowrap
}

.x-chart-hero__stats {
    border-left: .1rem solid var(--border-color);
    grid-area: stats
}

.x-chart-hero__close {
    grid-area: close-button;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border: 0;
    flex-shrink: 0;
    padding: 1rem;
    margin: -1rem 0 -1rem auto;
    cursor: pointer;
    color: var(--text-color);
    transition: color .1s ease-out;
    border: .1rem solid var(--border-color);
    border-radius: .3rem
}

.x-chart-hero__close:hover {
    border-color: var(--text-color)
}

@media(hover:hover) {
    .x-chart-hero__close:hover {
        color: var(--secondary-text-color)
    }
}

.x-chart-hero__close svg {
    stroke: currentColor
}

.x-chart__top-value {
    display: none;
    text-align: right;
    align-self: flex-end;
    font-size: 1.3rem;
    color: var(--text-color);
    font-weight: 500;
    line-height: 1.4;
    flex-shrink: 0;
    margin-left: auto;
    padding: 1.5rem 0 1.5rem .5rem
}

.x-chart__bottom-value {
    grid-area: bottom-value;
    display: none;
    text-align: right;
    padding: 1rem 0;
    font-size: 1.3rem;
    color: var(--text-color);
    font-weight: 500;
    line-height: 1.4;
    margin-left: auto
}

.x-chart--collapsed {
    grid-template-areas: "header" "plot-area" "footer";
    grid-template-columns: 1fr;
    gap: 0;
    border-top: none;
    border-bottom: none
}

.x-chart--collapsed .x-chart__header {
    padding: 0
}

.x-chart--collapsed .x-chart__header .hsc {
    margin-bottom: -.1rem
}

.x-chart--collapsed .x-chart__header .x-chart__coin-tags {
    background-color: var(--background-color);
    padding-right: .8rem
}

.x-chart--collapsed .x-chart__top-value,
.x-chart--collapsed .x-chart__bottom-value {
    display: block;
    min-height: 4rem
}

.x-chart--collapsed .x-chart__y-axis {
    display: none
}

.x-chart--collapsed .x-chart__x-axis {
    margin-right: 1rem;
    border-right: none
}

.x-chart--collapsed .x-chart__canvas-wrapper {
    border-right: none
}

.x-chart-tooltip {
    display: none;
    position: absolute;
    z-index: 10;
    top: -4.7rem;
    background-color: var(--dropdown-background-color);
    text-align: center;
    white-space: nowrap;
    border-radius: .4rem;
    flex-direction: column;
    padding: 1.3rem 1.6rem 1.4rem;
    box-shadow: 0 .2rem 1rem #002bbb1f;
    pointer-events: none;
    color: var(--text-color)
}

.x-chart-tooltip__compare-grid {
    display: grid;
    grid-template-columns: min-content max-content max-content max-content;
    gap: .75rem 2rem
}

.x-chart-tooltip__compare-grid:has(>*:nth-child(4)) {
    grid-auto-flow: column;
    grid-template-rows: repeat(2, auto)
}

.x-chart-tooltip__compare-grid:has(>*:nth-child(5)) {
    grid-auto-flow: column;
    grid-template-rows: repeat(3, auto)
}

.x-chart-tooltip__compare-row {
    display: grid;
    grid-column: span 1;
    grid-template-columns: subgrid;
    align-items: center;
    column-gap: .75rem
}

.x-chart-tooltip__compare-row--span-2 {
    grid-column: span 2
}

.x-chart-tooltip__compare-row--span-3 {
    grid-column: span 3
}

.x-chart-tooltip__compare-row--span-4 {
    grid-column: span 4
}

.x-chart-tooltip__compare-dot {
    width: .8rem;
    height: .8rem;
    border-radius: .2rem;
    flex-shrink: 0
}

.x-chart-tooltip__compare-symbol {
    display: flex;
    align-items: center;
    gap: .8rem;
    font-weight: 600;
    font-size: 1.4rem;
    white-space: nowrap
}

.x-chart-tooltip__compare-value {
    font-weight: 500;
    font-size: 1.4rem;
    color: var(--text-color);
    font-variant-numeric: tabular-nums;
    -moz-font-feature-settings: "tnum";
    -webkit-font-feature-settings: "tnum";
    font-feature-settings: "tnum";
    text-align: left;
    white-space: nowrap
}

.x-chart-tooltip__compare-percentage {
    font-weight: 600;
    font-size: 1.4rem;
    text-align: right;
    white-space: nowrap
}

.x-chart-tooltip__single-value {
    color: var(--text-color);
    font-weight: 600;
    font-size: 1.5rem;
    font-variant-numeric: tabular-nums;
    -moz-font-feature-settings: "tnum";
    -webkit-font-feature-settings: "tnum";
    font-feature-settings: "tnum";
    letter-spacing: -.028em
}

.x-chart-tooltip__single-value svg {
    vertical-align: middle;
    margin: -.2rem .4rem 0 0
}

.x-chart-tooltip__single-value svg.warning {
    stroke: var(--warning-color)
}

.x-chart-tooltip__point {
    display: flex;
    gap: 1rem;
    justify-content: space-between
}

.x-chart-tooltip__name {
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0
}

.x-chart-tooltip__time {
    color: var(--text-color);
    font-size: 1.2rem;
    font-weight: 500;
    padding: .7rem 0 0
}

.x-chart-tooltip__value {
    color: var(--text-color);
    font-weight: 500;
    font-size: 1.4rem;
    font-variant-numeric: tabular-nums;
    -moz-font-feature-settings: "tnum";
    -webkit-font-feature-settings: "tnum";
    font-feature-settings: "tnum";
    letter-spacing: -.028em;
    padding: 0 0 .2rem
}

.x-chart-tooltip__value svg {
    vertical-align: middle;
    margin: -.2rem .4rem 0 0
}

.x-chart-tooltip__value svg.warning {
    stroke: var(--warning-color)
}

.x-chart-stats {
    display: inline-flex;
    padding: 0 2rem;
    gap: 2.5rem
}

.x-chart-stats__section {
    padding: 0 0 0 2.5rem;
    border-left: .1rem solid var(--border-color)
}

.x-chart-stats__section:first-child {
    padding-left: 0;
    border-left: none
}

.x-chart-stats__title {
    color: var(--secondary-text-color);
    font-size: 1.3rem;
    font-weight: 500
}

.x-chart-stats__value {
    color: var(--text-color);
    font-size: 1.4rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    -moz-font-feature-settings: "tnum";
    -webkit-font-feature-settings: "tnum";
    font-feature-settings: "tnum";
    letter-spacing: -.028em;
    white-space: nowrap
}

.x-chart__plot-area {
    grid-area: plot-area;
    position: relative
}

.x-chart__plot-area--interactive {
    touch-action: none
}

.x-chart__reset-view-button {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.3rem;
    height: 3.3rem;
    border-radius: .4rem;
    background-color: var(--background-color);
    border: .1rem solid var(--border-color);
    color: var(--text-color);
    cursor: pointer;
    z-index: 5;
    transition: border-color .1s ease-out
}

.x-chart__reset-view-button--hidden {
    display: none
}

.x-chart__reset-view-button svg {
    display: block;
    stroke: currentColor;
    margin-left: -.1rem
}

@media(hover:hover) {
    .x-chart__reset-view-button:hover {
        border-color: var(--text-color)
    }
}

.x-chart__canvas-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-right: .1rem solid var(--border-color)
}

.x-chart__hit-area {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -2rem;
    right: -2rem;
    z-index: 4;
    cursor: crosshair;
    -webkit-tap-highlight-color: transparent
}

.x-chart__canvas {
    display: block;
    width: 100%;
    height: 100%;
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none
}

.x-chart__y-axis {
    display: block;
    grid-area: y-axis;
    position: relative;
    top: 0;
    overflow: hidden;
    z-index: 2;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none
}

.x-chart__y-axis--interactive {
    cursor: ns-resize;
    touch-action: none
}

.x-chart__x-axis {
    display: block;
    grid-area: labels;
    position: relative;
    flex-grow: 1;
    z-index: 2;
    height: 4rem;
    border-right: .1rem solid var(--border-color);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none
}

.x-chart__x-axis--interactive {
    cursor: ew-resize;
    touch-action: none
}

.x-chart__real-time-dot {
    position: absolute;
    height: .7rem;
    width: .7rem;
    top: 0;
    left: 0;
    margin-left: -.35rem;
    margin-top: -.35rem;
    z-index: 1;
    pointer-events: none;
    border-radius: 1rem;
    border: .1rem solid var(--background-color);
    background-color: var(--primary-color)
}

.x-chart__real-time-dot:after {
    content: "";
    position: absolute;
    opacity: .3;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 2.5rem;
    top: -1rem;
    left: -1rem;
    background-color: inherit;
    animation: real-time-pulse 2.4s cubic-bezier(.52, .6, .25, .99) infinite
}

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

    to {
        transform: rotate(360deg)
    }
}

@keyframes spinner-dash {
    0% {
        stroke-dasharray: 0 150;
        stroke-dashoffset: 0
    }

    50% {
        stroke-dasharray: 42 150;
        stroke-dashoffset: -16
    }

    to {
        stroke-dasharray: 42 150;
        stroke-dashoffset: -59
    }
}

.x-chart__loading {
    display: none;
    justify-content: center;
    align-items: center;
    position: absolute;
    inset: 0;
    z-index: 3;
    background-color: color-mix(in srgb, var(--background-color) 75%, transparent);
    color: var(--text-color)
}

.x-chart__loading svg {
    stroke: currentColor;
    stroke-width: 2;
    width: 2.4rem;
    height: 2.4rem;
    transform-origin: 1.2rem 1.2rem;
    animation: spinner-rotate 2s linear infinite, spinner-dash 1.5s ease-in-out infinite
}

.x-chart--loading .x-chart__loading {
    display: flex
}

.x-chart-no-data {
    position: absolute;
    inset: 0;
    color: var(--secondary-text-color);
    font-size: 1.4rem;
    font-weight: 500;
    text-align: center;
    z-index: 2;
    justify-content: center;
    align-items: center
}

.x-chart__fullscreen-button-open,
.x-chart__fullscreen-button-close {
    display: contents
}

.is-fullscreen .x-chart__fullscreen-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--background-color);
    min-width: 32rem
}

.is-fullscreen .x-chart-pane-container {
    flex-grow: 1;
    height: auto
}

.is-fullscreen .x-chart {
    padding: 0;
    flex-grow: 1
}

.is-fullscreen .x-chart__controls {
    padding: 2rem
}

@media(max-width:1179px) {
    .x-chart__stats {
        display: block;
        margin-left: -1rem;
        flex-grow: 1;
        overflow: auto;
        font-weight: 500;
        padding-bottom: 1.5rem
    }

    .x-chart__stats-value {
        display: flex;
        flex-direction: column;
        gap: .2rem;
        padding: 0rem 1rem;
        border-left: none
    }

    .x-chart__stats-value-title {
        font-size: 1.3rem
    }

    .is-fullscreen .x-chart__controls--column-on-tablet-fullscreen {
        flex-wrap: wrap
    }
}

@media(max-width:600px) {
    .x-chart {
        height: 32rem
    }

    .x-chart--narrow {
        height: 25rem
    }

    .x-chart__add-coin-button {
        height: 4rem;
        min-width: 4rem
    }

    .x-chart__coin-tag {
        height: 4rem
    }

    .x-chart-hero {
        display: grid;
        padding: 1.5rem 2rem;
        gap: 1.5rem 2rem;
        grid-template-areas: "profile current close-button" "stats stats stats";
        grid-template-columns: auto 1fr auto
    }

    .x-chart-hero__stats {
        border-top: .1rem solid var(--border-color);
        border-left: 0;
        padding: 1.5rem 0;
        margin: 0 -2rem -1.5rem
    }

    .x-chart-stats {
        gap: 2rem
    }

    .x-chart-stats__section {
        border-left: 0;
        padding: 0
    }

    .x-chart-tooltip {
        padding: .8rem 1.2rem .9rem
    }

    .x-chart-tooltip__single-value {
        font-size: 1.4rem
    }

    .x-chart-tooltip__time {
        font-size: 1.1rem
    }

    .is-fullscreen .x-chart__controls {
        padding: 2rem
    }

    .is-fullscreen .x-chart__controls--column-on-mobile-fullscreen {
        flex-wrap: wrap
    }
}

.x-chart-pane-container {
    display: flex;
    flex-direction: column;
    height: 45rem;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none
}

.x-chart-pane-container .x-chart {
    height: auto;
    min-height: 0;
    border-bottom: none
}

.x-chart-pane-container .x-chart:last-child:not(.x-chart--collapsed) {
    border-bottom: .1rem solid var(--border-color)
}

.x-chart-pane-container .x-chart~.x-chart-pane-divider~.x-chart {
    border-top: none
}

.x-chart-pane-divider {
    height: .2rem;
    flex-shrink: 0;
    cursor: row-resize;
    background: var(--border-color);
    transition: background .15s ease;
    position: relative;
    touch-action: none
}

.x-chart-pane-divider:before {
    content: "";
    position: absolute;
    top: -.5rem;
    bottom: -.5rem;
    left: 0;
    right: 0;
    z-index: 5
}

@media(pointer:coarse) {
    .x-chart-pane-divider:before {
        top: -1rem;
        bottom: -1rem
    }
}

.x-chart-pane-divider__handle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 1.8rem;
    border-radius: .4rem;
    background: var(--background-color);
    border: 1px solid var(--border-color);
    color: var(--secondary-text-color);
    pointer-events: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
    z-index: 6
}

.x-chart-pane-divider__handle svg {
    stroke: currentColor;
    stroke-width: 1
}

@media(hover:hover)and (pointer:fine) {
    .x-chart-pane-divider:hover {
        background: var(--primary-color)
    }

    .x-chart-pane-divider:hover .x-chart-pane-divider__handle {
        background: var(--primary-color);
        border-color: var(--primary-color);
        color: #fff
    }
}

.x-chart-pane-divider--active {
    background: var(--primary-color)
}

.x-chart-pane-divider--active .x-chart-pane-divider__handle {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff
}

.x-chart__pane-overlay {
    position: absolute;
    top: .8rem;
    left: 1rem;
    z-index: 3;
    display: flex;
    align-items: baseline;
    gap: .6rem;
    pointer-events: none;
    padding: .2rem .6rem;
    border-radius: .4rem;
    background-color: color-mix(in srgb, var(--disabled-background-color) 80%, transparent)
}

.x-chart__pane-overlay-label {
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--secondary-text-color)
}

.x-chart__pane-overlay-value {
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--text-color)
}

.hero {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    flex-wrap: wrap;
    margin: 0 0 1.8rem
}

.hero__section {
    margin-bottom: 3rem
}

.hero__logo-wrapper {
    display: block;
    width: 6.2rem;
    height: 6.2rem;
    border-radius: 6.2rem;
    background: #fff;
    border: .4rem solid #fff;
    overflow: hidden;
    outline: .1rem solid var(--border-color)
}

.hero__logo-wrapper--square {
    border-radius: 1.3rem
}

.hero__logo-exchange-about-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4.8rem;
    height: 4.8rem;
    border-radius: 4.8rem;
    background: #fff;
    border: 1px solid #d8e7ff;
    overflow: hidden
}

.hero__logo-exchange-about-title {
    font-weight: 700;
    font-size: 2.8rem;
    margin: 0 0 0 0rem
}

.hero__exchange-logo {
    display: block;
    width: 4.6rem;
    height: 4.6rem;
    border-radius: .8rem;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none
}

.hero__exchange-about-logo {
    display: block;
    width: 3.2rem;
    height: 3.2rem;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none
}

.hero__logo {
    display: block;
    width: 5.4rem;
    height: 5.4rem;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none
}

.hero__content {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 0
}

.hero__content-center {
    display: flex;
    flex-direction: column;
    justify-content: center
}

.hero__title {
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--text-color);
    margin: 0 0 .4rem;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: .8rem
}

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

.hero__title svg {
    fill: var(--background-color);
    stroke: currentColor
}

.hero__title--small {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-color);
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.hero__price_label {
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--primary-text-color);
    margin: 0 0 .4rem;
    text-align: end
}

.hero__details {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .8rem;
    min-width: 0
}

.hero__details-items {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: .8rem;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch
}

.hero__details-items--mobile {
    padding-top: 1rem;
    width: 100%
}

.hero__symbol,
.hero__numberOfCoins,
.hero__rank,
.hero__page {
    font-size: 1.7rem;
    font-weight: 500;
    color: var(--text-color)
}

.hero-coin .hero__rank {
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--text-color);
    display: flex;
    padding: .5rem .75rem;
    border: .1rem solid var(--border-color);
    border-radius: .4rem;
    text-decoration: none
}

.hero-coin .hero__rank:hover {
    border-color: var(--text-color)
}

.hero-coin .hero__rank:active {
    border-color: var(--text-color);
    background-color: var(--active-background-color)
}

.hero__favorite {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: 1.4rem;
    font-weight: 500;
    border: .1rem solid var(--border-color);
    border-radius: .4rem;
    padding: .55rem .75rem;
    cursor: pointer
}

.hero__favorite:hover {
    border-color: var(--text-color)
}

.hero__favorite:active {
    border-color: var(--text-color);
    background-color: var(--active-background-color)
}

.hero__warning {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--warning-color);
    border: .1rem solid var(--border-color);
    border-radius: .4rem;
    padding: .5rem .75rem
}

.hero__warning:hover {
    border-color: var(--text-color)
}

.hero__warning svg {
    stroke: currentColor;
    fill: currentColor
}

.hero__activity {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: 1.3rem;
    font-weight: 600;
    border: .1rem solid var(--border-color);
    border-radius: .4rem;
    padding: .6rem .75rem
}

.hero__activity:hover {
    border-color: var(--text-color)
}

.hero__activity:active {
    border-color: var(--text-color);
    background-color: var(--active-background-color)
}

.hero__activity svg.warning {
    stroke: var(--warning-color);
    fill: var(--warning-color)
}

.hero__activity svg.new {
    stroke: var(--primary-color);
    fill: var(--primary-color)
}

.hero__activity svg.trending {
    stroke: var(--warning-color);
    fill: var(--warning-color)
}

.hero__compare,
.hero__share {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: 1.4rem;
    font-weight: 500;
    border: .1rem solid var(--border-color);
    border-radius: .4rem;
    padding: .55rem .95rem;
    cursor: pointer;
    color: var(--text-color);
    text-decoration: none
}

.hero__compare:hover,
.hero__share:hover {
    border-color: var(--text-color)
}

.hero__compare:active,
.hero__share:active {
    border-color: var(--text-color);
    background-color: var(--active-background-color)
}

.hero__compare svg,
.hero__share svg {
    stroke: currentColor;
    fill: currentColor
}

.hero__share button {
    min-width: 0
}

.hero__share svg {
    flex-shrink: 0
}

.hero__share .copy-button__text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.hero__value {
    margin-left: auto
}

.hero__price {
    display: block;
    text-align: right;
    font-weight: 700;
    font-size: 2.8rem;
    color: var(--text-color);
    white-space: nowrap;
    margin: 0 0 .4rem;
    font-variant-numeric: tabular-nums;
    -moz-font-feature-settings: "tnum";
    -webkit-font-feature-settings: "tnum";
    font-feature-settings: "tnum";
    letter-spacing: -.028em
}

.hero__change {
    text-align: right;
    font-weight: 600;
    font-size: 1.6rem;
    color: var(--neutral-color)
}

.hero__change--positive {
    color: var(--positive-color)
}

.hero__change--negative {
    color: var(--negative-color)
}

.hero__no-margin {
    margin-bottom: 0
}

.hero__grid-2-1 .links__wrapper {
    display: none
}

@media(max-width:600px) {
    .hero {
        gap: 1rem
    }

    .hero__logo-square-wrapper {
        width: 4.8rem;
        height: 4.8rem;
        border: 1px solid var(--profile-border-color)
    }

    .hero__logo-square-wrapper .hero__logo {
        width: 4rem;
        height: 4rem
    }

    .hero__logo-wrapper {
        width: 4.4rem;
        height: 4.4rem;
        border: .2rem solid #fff
    }

    .hero__logo-wrapper--square {
        border-radius: .9rem
    }

    .hero__logo {
        width: 4rem;
        height: 4rem
    }

    .hero__exchange-logo {
        display: block;
        width: 3rem;
        height: 3rem
    }

    .hero__title {
        font-size: 1.8rem
    }

    .hero__details {
        gap: .3rem 1.3rem
    }

    .hero__symbol,
    .hero__numberOfCoins,
    .hero__rank,
    .hero__page {
        font-size: 1.4rem
    }

    .hero__favorite {
        font-size: 1.3rem
    }

    .hero__price {
        font-size: 1.8rem
    }

    .hero__change {
        font-size: 1.4rem
    }
}

:root.dark-theme .hero__logo-wrapper {
    outline: none
}

@media(prefers-color-scheme:dark) {
    :root:not(.light-theme) .hero__logo-wrapper {
        outline: none
    }
}

@media(max-width:1179px) {
    .hero__grid-2-1 {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 4rem
    }

    .hero__grid-2-1 .links__wrapper {
        display: flex;
        margin-top: 1.2rem
    }
}

@media(max-width:768px)and (min-width:456px) {
    .hero__grid-2-1 {
        display: block
    }

    .hero__grid-2-1 .links__wrapper {
        display: none
    }
}

@media(max-width:600px) {
    .hero__section {
        padding: 0 2rem
    }

    .hero:has(.exchange-profile__logo-container) {
        gap: 1.5rem
    }

    .hero__grid-2-1 {
        display: block
    }

    .hero__grid-2-1 .links__wrapper {
        display: none
    }
}

.key-value-table {
    display: block;
    border: .1rem solid var(--border-color);
    border-radius: .5rem
}

.key-value-table tbody,
.key-value-table tfoot {
    display: block
}

.key-value-table tbody tr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    padding: 1.3rem 2rem 1.4rem;
    flex-wrap: wrap;
    border-bottom: .1rem solid var(--border-color);
    min-height: 5.2rem
}

.key-value-table tbody tr:last-child {
    border-bottom: none
}

.key-value-table tfoot tr {
    display: block
}

.key-value-table tbody th {
    display: block;
    font-size: 1.4rem;
    font-weight: 600;
    text-align: left;
    color: var(--text-color);
    border: 0;
    padding: 0;
    white-space: nowrap
}

.key-value-table tbody th.key-value-table--flex {
    display: inline-flex;
    align-items: center;
    gap: .8rem
}

.key-value-table tbody td {
    display: block;
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--text-color);
    padding: 0;
    white-space: nowrap;
    text-overflow: ellipsis
}

.key-value-table tbody td.semibold {
    font-weight: 600
}

.key-value-table tbody td.key-value-table--flex {
    display: inline-flex;
    gap: 1rem;
    align-items: center
}

.key-value-table tfoot td {
    display: block;
    padding: 0
}

.key-value-table__icon {
    display: inline-flex;
    justify-content: center;
    vertical-align: middle;
    min-width: 2rem
}

.key-value-table__icon svg {
    fill: currentColor;
    stroke: currentColor
}

.key-value-table__check-mark {
    stroke: var(--dropdown-background-color);
    fill: var(--positive-color)
}

.key-value-table .fear-and-greed-dot {
    display: inline-block;
    width: .8rem;
    height: .8rem;
    border-radius: 50%;
    flex-shrink: 0
}

.key-value-table__change {
    font-size: 1.3rem;
    font-weight: 600
}

.key-value-table__change--positive {
    color: var(--positive-color)
}

.key-value-table__change--negative {
    color: var(--negative-color)
}

.key-value-table__button {
    display: block;
    appearance: none;
    cursor: pointer;
    background: none;
    border-color: var(--border-color);
    border-style: solid;
    border-width: .1rem 0 0;
    font-size: 1.4rem;
    color: var(--text-color);
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    width: 100%;
    padding: .9rem 2rem 1rem;
    transition: color .1s ease-out
}

.key-value-table__button:hover {
    color: var(--secondary-text-color)
}

.key-value-table a:hover {
    color: var(--secondary-text-color);
    text-decoration-color: var(--secondary-text-color)
}

.key-value-table a.key-value-table__hyperlink {
    text-decoration: none
}

.key-value-table__dropdown-container {
    width: 100%
}

.key-value-table__dropdown-container dl {
    margin-block-start: 0rem;
    margin-block-end: 0rem
}

.key-value-table__dropdown-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1.4rem;
    font-weight: 600;
    cursor: pointer
}

.key-value-table__dropdown-title svg {
    flex-shrink: 0;
    margin-left: 1rem;
    stroke: currentColor;
    transition: transform .3s ease-out
}

.key-value-table__dropdown-title--open svg {
    transform: rotate(180deg)
}

.key-value-table__dropdown-reference-link {
    padding: .5rem
}

.key-value-table__dropdown-reference-link:hover {
    cursor: pointer
}

.key-value-table__dropdown-reference-link svg {
    fill: var(--text-color);
    stroke: var(--text-color)
}

.key-value-table__dropdown-reference-container {
    display: inline-flex;
    align-items: center;
    gap: 1rem
}

.key-value-table__dropdown-reference-container .copy-button {
    padding: .5rem
}

.key-value-table__dropdown-title--open {
    border-color: var(--border-color);
    border-style: solid;
    border-width: 0rem 0 .1rem;
    padding-bottom: 1.3rem
}

.key-value-table__dropdown-title--open+.key-value-table__dropdown-content-container {
    display: flex;
    flex-direction: column
}

.key-value-table__dropdown-title--open+.key-value-table__dropdown-content-container .key-value-table__dropdown-content {
    display: flex;
    justify-content: space-between
}

.key-value-table__dropdown-title--open+.key-value-table__dropdown-content-container .key-value-table__dropdown-content div:nth-child(1) {
    flex: 1;
    min-width: 10rem
}

.key-value-table__dropdown-title--open+.key-value-table__dropdown-content-container .key-value-table__dropdown-content div:nth-child(2) {
    flex: 1;
    min-width: 15rem
}

.key-value-table__dropdown-title--open+.key-value-table__dropdown-content-container .key-value-table__dropdown-content div:nth-child(3) {
    flex: 1;
    justify-content: flex-end
}

.key-value-table__dropdown-content {
    display: none;
    padding: 1.3rem 0rem .5rem;
    font-size: 1.4rem;
    margin: 0;
    line-height: 1.8;
    border-color: var(--border-color);
    border-style: solid;
    border-width: 0rem 0 .1rem
}

.key-value-table__dropdown-content>div {
    display: inline-flex;
    align-items: center
}

.key-value-table__dropdown-content:last-child {
    border: none
}

.key-value-table tr.separator {
    padding: 0rem;
    min-height: 3.8rem;
    justify-content: center;
    font-size: 1.4rem
}

@media(max-width:600px) {
    .key-value-table {
        border-width: .1rem 0 0 0;
        border-radius: 0;
        margin: 0 -2rem
    }

    .key-value-table tbody tr {
        padding: 1.3rem 2rem 1.4rem
    }

    .key-value-table tbody tr:last-child {
        border-bottom: .1rem solid var(--border-color)
    }

    .key-value-table__button {
        border-width: 0 0 .1rem
    }

    .key-value-table .key-value-table__dropdown-title--open+.key-value-table__dropdown-content-container .key-value-table__dropdown-content div:nth-child(1) {
        flex: 1;
        min-width: 8rem
    }

    .key-value-table .key-value-table__dropdown-title--open+.key-value-table__dropdown-content-container .key-value-table__dropdown-content div:nth-child(1) .name {
        display: inline;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .key-value-table .key-value-table__dropdown-title--open+.key-value-table__dropdown-content-container .key-value-table__dropdown-content div:nth-child(2) {
        min-width: 13rem
    }

    .key-value-table .key-value-table__dropdown-title--open+.key-value-table__dropdown-content-container .key-value-table__dropdown-content div:nth-child(2) .reference {
        max-width: 3rem
    }
}

.copy-button {
    display: block;
    appearance: none;
    cursor: pointer;
    background: none;
    border: 0;
    color: var(--text-color);
    padding: 1rem;
    margin: -1rem;
    transition: color .1s ease-out
}

.copy-button--share {
    appearance: none;
    cursor: pointer;
    background: none;
    border: 0;
    color: var(--text-color);
    transition: color .1s ease-out;
    display: inline-flex;
    align-items: center;
    font-size: 1.4rem;
    font-weight: 500;
    gap: .3rem;
    padding: .133rem 0rem
}

.copy-button--share-display-content {
    display: contents
}

.copy-button:hover {
    color: var(--secondary-text-color)
}

.copy-button svg {
    display: block;
    fill: currentColor;
    stroke: currentColor
}

.copy-button--tooltip {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    background-color: #333;
    color: var(--text-color);
    padding: .5rem;
    border-radius: .3rem;
    font-size: 1.2rem;
    font-weight: 500;
    bottom: 2.5rem;
    left: .5rem;
    transform: translate(-50%);
    white-space: nowrap;
    z-index: 1;
    transition: opacity .1s ease-out;
    padding: 1rem 2rem;
    display: flex;
    text-align: center;
    gap: .5rem;
    box-shadow: 0 .2rem 1rem #002bbb1f;
    background: var(--dropdown-background-color)
}

.copy-button--tooltip svg {
    stroke: var(--dropdown-background-color);
    fill: var(--positive-color)
}

.copy-button--tooltip.show {
    visibility: visible;
    opacity: 1
}

.calculator {
    padding: .1rem 3rem 3rem
}

.calculator--no-padding {
    padding: 0
}

.calculator__date {
    display: flex;
    appearance: none;
    border: .1rem solid var(--border-color);
    border-radius: .3rem;
    color: var(--text-color);
    font-size: 1.6rem;
    font-weight: 500;
    background: none;
    height: 4.5rem;
    width: 100%;
    margin: 0 0 2rem;
    transition: border-color .1s ease-out, outline-color .1s ease-out
}

@media(hover:hover) {
    .calculator__date:hover {
        border-color: var(--text-color)
    }
}

.calculator__date:focus-within {
    border-color: var(--secondary-text-color);
    outline-color: var(--secondary-text-color);
    outline-width: .1rem;
    outline-offset: 0;
    outline-style: solid
}

.calculator__date input {
    appearance: none;
    border-radius: 0;
    border: 0;
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--text-color);
    background: none;
    width: 100%;
    height: 4.3rem;
    padding: 0 0 0 1.4rem;
    cursor: text;
    text-align: left
}

.calculator__date input::-webkit-calendar-picker-indicator {
    display: none
}

.calculator__date input::-webkit-date-and-time-value {
    text-align: left
}

.calculator__date input::placeholder {
    color: var(--placeholder-color)
}

.calculator__date input:focus {
    outline: none
}

.calculator__date label {
    appearance: none;
    display: flex;
    align-items: center;
    border-radius: .3rem 0 0 .3rem;
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--text-color);
    height: 4.3rem;
    cursor: pointer;
    transition: color .1s ease-out;
    background: none;
    border-color: var(--border-color);
    border-style: solid;
    border-width: 0 .1rem 0 0;
    padding: .3rem 1.3rem 0 1.8rem;
    gap: .6rem
}

@media(hover:hover) {
    .calculator__date label:hover {
        color: var(--secondary-text-color)
    }
}

.calculator__date label:focus {
    outline: none
}

.calculator__date label svg {
    stroke: currentColor;
    margin: -.4rem .1rem 0 0;
    vertical-align: middle
}

.calculator__date button {
    appearance: none;
    border-radius: 0 .3rem .3rem 0;
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--text-color);
    height: 4.3rem;
    cursor: pointer;
    transition: color .1s ease-out;
    background: none;
    border: 0;
    padding: 0 1.6rem
}

@media(hover:hover) {
    .calculator__date button:hover {
        color: var(--secondary-text-color)
    }
}

.calculator__date button:focus {
    outline: none
}

.calculator__date button svg {
    stroke: currentColor;
    margin: -.4rem .1rem 0 0;
    vertical-align: middle
}

.calculator__input-wrapper {
    position: relative;
    flex: 1
}

.calculator__control {
    display: flex;
    gap: 1rem;
    align-items: center
}

.calculator__group {
    display: flex;
    flex-direction: column;
    flex: 1;
    position: relative
}

.calculator__input-group {
    display: flex;
    flex: 1;
    border: .1rem solid var(--border-color);
    border-radius: .3rem .3rem 0 0;
    transition: border-color .1s ease-out, outline-color .1s ease-out
}

@media(hover:hover) {
    .calculator__input-group:hover {
        border-color: var(--text-color);
        z-index: 1
    }
}

.calculator__input-group:focus-within {
    border-color: var(--secondary-text-color);
    outline-color: var(--secondary-text-color);
    outline-width: .1rem;
    outline-offset: 0;
    outline-style: solid;
    z-index: 1
}

.calculator__input-amount,
.calculator__output-amount {
    appearance: none;
    border: 0;
    border-radius: .3rem .3rem 0 0;
    color: var(--text-color);
    font-size: 1.6rem;
    font-weight: 600;
    background: none;
    height: 4.2rem;
    padding: 0 1rem;
    text-indent: .8rem;
    width: 100%;
    transition: border-color .1s ease-out, outline-color .1s ease-out
}

.calculator__input-amount::placeholder,
.calculator__output-amount::placeholder {
    color: var(--placeholder-color);
    font-weight: 500
}

.calculator__input-amount:focus,
.calculator__output-amount:focus {
    outline: none
}

.calculator copy-button {
    padding: 0 1.6rem 0 0;
    align-self: center;
    position: relative
}

.calculator__currency {
    grid-area: select;
    display: flex;
    appearance: none;
    background: none;
    margin: -.1rem 0 0;
    justify-content: space-between;
    align-items: center;
    padding: .5rem 1.6rem .5rem 1.8rem;
    height: 4.2rem;
    min-width: 10rem;
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--text-color);
    border-style: solid;
    border-width: .1rem;
    border-color: var(--border-color);
    border-radius: 0 0 .3rem .3rem;
    cursor: pointer;
    transition: border-color .1s ease-out
}

@media(hover:hover) {
    .calculator__currency:hover {
        border-color: var(--text-color)
    }
}

.calculator__currency.dropdown-active {
    border-color: var(--text-color)
}

.calculator__currency svg {
    margin: 0 0 0 1rem;
    stroke: currentColor
}

.calculator__switch {
    appearance: none;
    background: none;
    border: 0;
    color: var(--text-color);
    padding: .5rem;
    cursor: pointer;
    transition: color .1s ease-out
}

@media(hover:hover) {
    .calculator__switch:hover {
        color: var(--secondary-text-color)
    }
}

.calculator__switch:focus-visible {
    outline: .2rem solid var(--secondary-text-color)
}

.calculator__switch svg {
    display: block;
    stroke: currentColor
}

.calculator__alerts {
    margin: -1.3rem 0 1.5rem
}

.calculator__button {
    display: flex;
    appearance: none;
    background: none;
    text-decoration: none;
    align-items: center;
    justify-content: center;
    padding: .5rem 1.3rem;
    height: 4.2rem;
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--text-color);
    border: .1rem solid var(--border-color);
    background-color: var(--background-color);
    border-radius: .3rem;
    cursor: pointer;
    transition: border-color .1s ease-out, background-color .1s ease-out;
    user-select: none;
    -webkit-user-select: none;
    width: 100%;
    margin: 1rem 0 .5rem
}

@media(hover:hover) {
    .calculator__button:hover {
        border-color: var(--text-color)
    }
}

.calculator__button:focus-visible {
    outline-color: var(--secondary-text-color);
    border-color: var(--secondary-text-color);
    outline-width: .1rem;
    outline-offset: 0;
    outline-style: solid;
    transition: none
}

.calculator__buy-button {
    display: flex;
    appearance: none;
    background: var(--text-color);
    text-decoration: none;
    align-items: center;
    justify-content: center;
    padding: .5rem 1.3rem;
    height: 4.2rem;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--background-color);
    border: .1rem solid var(--text-color);
    border-radius: .3rem;
    cursor: pointer;
    transition: background .1s ease-out, border-color .1s ease-out;
    user-select: none;
    -webkit-user-select: none;
    width: 100%;
    margin: 2rem 0 0
}

@media(hover:hover) {
    .calculator__buy-button:hover {
        background: var(--secondary-text-color);
        border-color: var(--secondary-text-color)
    }
}

.calculator__buy-button:focus-visible {
    outline-color: var(--secondary-text-color);
    border-color: var(--secondary-text-color);
    outline-width: .1rem;
    outline-offset: 0;
    outline-style: solid;
    transition: none
}

.calculator__buy-button svg {
    stroke: currentColor;
    fill: currentColor
}

.calculator.htmx-request .calculator__input-amount,
.calculator.htmx-request .calculator__output-amount {
    background-image: url(/static/form/light-theme/spinner.svg);
    background-position: right 1.6rem center;
    background-repeat: no-repeat
}

.calculator.htmx-request .copy-button {
    display: none
}

@supports not selector(::-webkit-calendar-picker-indicator) {
    .calculator__input-wrapper:after {
        content: "";
        position: absolute;
        top: 0rem;
        right: 0rem;
        width: 4rem;
        bottom: 0rem;
        pointer-events: none;
        background: var(--dropdown-background-color)
    }
}

:root.dark-theme .calculator.htmx-request .calculator__input-amount,
:root.dark-theme .calculator.htmx-request .calculator__output-amount {
    background-image: url(/static/form/dark-theme/spinner.svg)
}

@media(prefers-color-scheme:dark) {

    :root:not(.light-theme) .calculator.htmx-request .calculator__input-amount,
    :root:not(.light-theme) .calculator.htmx-request .calculator__output-amount {
        background-image: url(/static/form/dark-theme/spinner.svg)
    }
}

.doughnut {
    flex-shrink: 0
}

.doughnut__text {
    fill: var(--text-color)
}

.doughnut__background {
    stroke: var(--border-color)
}

.doughnut__background--high {
    stroke: var(--positive-doughnut-background-color)
}

.doughnut__background--mid {
    stroke: var(--warning-doughnut-background-color)
}

.doughnut__background--low {
    stroke: var(--negative-doughnut-background-color)
}

.doughnut__progress {
    stroke: var(--positive-color);
    transform-origin: 50% 50%;
    transform: rotate(-90deg)
}

.doughnut__progress--high {
    stroke: var(--positive-color)
}

.doughnut__progress--mid {
    stroke: var(--warning-color)
}

.doughnut__progress--low {
    stroke: var(--negative-color)
}

.supply {
    display: flex;
    gap: 3rem;
    flex-direction: column
}

.supply-summary {
    display: grid;
    grid-template-areas: "title title" "doughnut rate" "doughnut description";
    grid-template-rows: .75fr .5fr .5fr;
    gap: .8rem;
    border: .1rem solid var(--border-color);
    border-radius: .5rem;
    padding: 2rem 2.5rem 2.5rem;
    flex: 1;
    text-align: center;
    justify-items: center
}

.supply-summary__description {
    margin: 0;
    font-size: 1.5rem;
    grid-area: description;
    justify-self: start;
    align-self: flex-start;
    line-height: 1
}

.supply-summary__rate {
    font-weight: 600;
    font-size: 1.6rem;
    grid-area: rate;
    line-height: 1;
    justify-self: start;
    align-self: flex-end;
    margin: 0
}

.supply-summary:not(:has(.doughnut)) {
    grid-template-areas: "title" "rate" "description";
    justify-items: center
}

.supply-summary:not(:has(.doughnut)) .supply-summary__description {
    justify-self: center
}

.supply-summary:not(:has(.doughnut)) .supply-summary__rate {
    justify-self: center
}

.supply-summary .title-h3 {
    grid-area: title
}

.supply-summary .doughnut {
    grid-area: doughnut;
    align-self: center;
    justify-self: right
}

.supply-summary-container {
    display: flex;
    gap: 2.5rem
}

.supply-summary--mid {
    border-color: var(--warning-background-color);
    background-color: var(--warning-background-color)
}

.supply-summary--mid .supply-summary__rate,
.supply-summary--mid .supply-summary__description {
    color: var(--warning-color)
}

.supply-summary--low {
    border-color: var(--negative-background-color);
    background-color: var(--negative-background-color)
}

.supply-summary--low .supply-summary__rate,
.supply-summary--low .supply-summary__description {
    color: var(--negative-color)
}

.supply-summary--high {
    border-color: var(--positive-background-color);
    background-color: var(--positive-background-color)
}

.supply-summary--high .supply-summary__rate,
.supply-summary--high .supply-summary__description {
    color: var(--positive-color)
}

.supply-summary--neutral {
    border-color: var(--neutral-border-color);
    background-color: var(--neutral-background-color)
}

.supply-summary--neutral .supply-summary__rate,
.supply-summary--neutral .supply-summary__description {
    color: var(--neutral-color)
}

.supply-detail {
    flex: 1
}

.supply-updated-at {
    display: inline-block;
    margin: 1.4rem 0 0;
    color: var(--secondary-text-color)
}

@media(max-width:600px) {
    .supply {
        flex-direction: column;
        gap: 0;
        align-items: stretch
    }

    .supply-summary {
        padding: 2rem;
        justify-items: center
    }

    .supply-summary-container {
        flex-direction: column;
        gap: 1.5rem;
        margin-bottom: 2rem
    }
}

.category-profile {
    display: grid;
    align-items: center;
    grid-template-areas: "logo name" "logo symbol";
    gap: 0 1.4rem;
    justify-content: flex-start;
    text-decoration: none;
    transition: color .1s ease-out;
    vertical-align: middle;
    width: 100%;
    cursor: pointer
}

.category-profile__logo-wrapper {
    grid-area: logo;
    display: block;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: .8rem;
    background: #fff;
    border: .2rem solid #fff;
    overflow: hidden;
    outline: .1rem solid var(--border-color)
}

.category-profile__logo {
    display: block;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: .5rem;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none
}

.category-profile__name {
    grid-area: name;
    font-size: 1.4rem;
    font-weight: 600;
    text-overflow: ellipsis;
    overflow: hidden
}

.category-profile__symbol {
    grid-area: symbol;
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--secondary-text-color)
}

.category-profile__symbol svg {
    vertical-align: middle;
    margin: -.3rem 0 0;
    fill: var(--warning-color);
    stroke: var(--warning-color)
}

.category-profile__symbol svg:is(.category-profile__symbol--top-gainer) {
    stroke: var(--positive-color)
}

.category-profile__symbol svg:is(.category-profile__symbol--top-loser) {
    stroke: var(--negative-color)
}

:root.dark-theme .category-profile__logo-wrapper {
    outline: none
}

@media(prefers-color-scheme:dark) {
    :root:not(.light-theme) .category-profile__logo-wrapper {
        outline: none
    }
}

@media(max-width:600px) {
    .category-profile__logo-wrapper {
        width: 3.2rem;
        height: 3.2rem
    }

    .category-profile__logo {
        width: 3rem;
        height: 3rem
    }
}

.exchange-profile {
    display: grid;
    grid-template-areas: "logo name";
    align-items: center;
    vertical-align: middle;
    width: 100%;
    gap: 0 1.4rem;
    padding: .3rem;
    margin: -.3rem;
    text-decoration: none;
    justify-content: flex-start
}

.exchange-profile--meta {
    grid-template-areas: "logo name" "logo meta"
}

.exchange-profile:focus-visible {
    outline: .2rem solid var(--secondary-text-color);
    outline-offset: .2rem
}

.exchange-profile__logo-container {
    grid-area: logo;
    display: block;
    position: relative;
    width: 3.6rem;
    height: 3.6rem;
    padding: .1rem;
    margin: 0;
    border-radius: .8rem;
    border: .1rem solid var(--border-color)
}

.exchange-profile__logo-wrapper {
    display: block;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: .6rem;
    background: #fff;
    border: .2rem solid #fff;
    overflow: hidden
}

.exchange-profile__logo {
    display: block;
    width: 2.8rem;
    height: 2.8rem;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none
}

.exchange-profile__detail {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width: 0
}

.exchange-profile__name {
    grid-area: name;
    font-size: 1.4rem;
    font-weight: 600;
    text-overflow: ellipsis;
    overflow: hidden;
    color: var(--text-color);
    min-width: 0
}

.exchange-profile__meta {
    grid-area: meta;
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--secondary-text-color);
    text-overflow: ellipsis;
    overflow: hidden
}

.exchange-profile--link {
    cursor: pointer
}

@media(hover:hover) {
    .exchange-profile--link:hover .exchange-profile__name {
        color: var(--secondary-text-color)
    }
}

:root.dark-theme .exchange-profile__logo-container {
    border-color: var(--background-color)
}

@media(prefers-color-scheme:dark) {
    :root:not(.light-theme) .exchange-profile__logo-container {
        border-color: var(--background-color)
    }
}

@media(max-width:600px) {
    .exchange-profile__logo-container {
        width: 3.4rem;
        height: 3.4rem
    }

    .exchange-profile__logo-wrapper {
        width: 3rem;
        height: 3rem
    }

    .exchange-profile__logo {
        width: 2.6rem;
        height: 2.6rem
    }
}

.badge {
    display: block;
    padding: .5rem;
    font-size: 1.3rem;
    font-weight: 600;
    text-align: center;
    max-height: 3rem;
    max-width: 6rem;
    border-radius: .3rem
}

.badge__fee-discount {
    display: flex;
    justify-content: center;
    color: #264d89;
    background: #f1f6ff;
    border: .1rem solid #d8e7ff;
    min-width: 4rem
}

.badge__fee-discount:has(+.badge__fee-discount__icon) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

.badge__fee-discount__icon {
    background: #f1f6ff;
    border: .1rem solid #d8e7ff;
    margin-left: -.1rem;
    padding: .2rem 1rem;
    display: flex;
    align-items: center;
    border-top-right-radius: .3rem;
    border-bottom-right-radius: .3rem
}

.badge__fee-discount__icon svg {
    stroke: #264d89
}

.badge__fee-discount__icon--success {
    background: var(--badge-success-background-color);
    border: .1rem solid var(--badge-success-border-color)
}

.badge__fee-discount__icon--success svg {
    stroke: var(--badge-success-color)
}

.badge__fee-discount--no-min-width {
    min-width: 0
}

.badge__fee-discount--success {
    color: var(--badge-success-color);
    background: var(--badge-success-background-color);
    border: .1rem solid var(--badge-success-border-color)
}

:root.dark-theme .badge__fee-discount {
    color: #809cc6;
    background: #0a1f42;
    border: .1rem solid #1e375d
}

:root.dark-theme .badge__fee-discount--success {
    color: var(--badge-success-color);
    background: var(--badge-success-background-color);
    border: .1rem solid var(--badge-success-border-color)
}

:root.dark-theme .badge__fee-discount__icon {
    background: #0a1f42;
    border: .1rem solid #1e375d
}

:root.dark-theme .badge__fee-discount__icon--success {
    background: var(--badge-success-background-color)
}

@media(prefers-color-scheme:dark) {
    :root:not(.light-theme) .badge__fee-discount {
        color: #809cc6;
        background: #0a1f42;
        border: .1rem solid #1e375d
    }

    :root:not(.light-theme) .badge__fee-discount--success {
        color: var(--badge-success-color);
        background: var(--badge-success-background-color);
        border: .1rem solid var(--badge-success-border-color)
    }

    :root:not(.light-theme) .badge__fee-discount__icon {
        background: #0a1f42;
        border: .1rem solid #1e375d
    }

    :root:not(.light-theme) .badge__fee-discount__icon--success {
        background: var(--badge-success-background-color)
    }
}

.notices {
    margin: 0 0 2rem
}

.notice {
    border: .1rem solid var(--border-color);
    border-radius: .3rem;
    padding: 1rem 2rem 1.1rem;
    color: var(--text-color);
    margin: 0 0 2rem;
    background: var(--hover-background-color)
}

.notice--warning {
    color: var(--warning-color);
    border-color: color-mix(in srgb, var(--warning-color) 20%, transparent);
    background-color: color-mix(in srgb, var(--warning-color) 10%, transparent)
}

.notice--success {
    color: var(--positive-color);
    border-color: color-mix(in srgb, var(--positive-color) 20%, transparent);
    background-color: color-mix(in srgb, var(--positive-color) 10%, transparent)
}

.notice--error {
    color: var(--negative-color);
    border-color: color-mix(in srgb, var(--negative-color) 20%, transparent);
    background-color: color-mix(in srgb, var(--negative-color) 10%, transparent)
}

.notice--info {
    color: var(--text-color);
    border-color: var(--border-color);
    background-color: var(--hover-background-color)
}

.links {
    display: flex;
    height: 4.2rem;
    gap: .1rem;
    list-style: none;
    padding: 0;
    background: var(--border-color);
    border: .1rem solid var(--border-color);
    border-radius: .4rem;
    width: fit-content;
    flex-grow: 1
}

.links__item {
    display: flex;
    text-decoration: none;
    font-size: 1.4rem;
    color: var(--text-color);
    font-weight: 600;
    padding: 1rem 0rem;
    min-width: 2.235rem;
    text-align: center;
    justify-content: center;
    align-items: center;
    background: var(--background-color);
    outline-style: solid;
    outline-width: .1rem;
    outline-color: transparent;
    cursor: pointer;
    transition: border-color .1s ease-in-out;
    flex-grow: 1
}

.links__item-tooltip-wrapper {
    display: flex;
    flex-grow: 1;
    background: var(--background-color);
    text-align: center;
    justify-content: center;
    align-items: center;
    outline-style: solid;
    outline-width: .1rem;
    outline-color: transparent
}

@media(hover:hover) {
    .links__item-tooltip-wrapper:hover {
        outline-color: var(--text-color)
    }
}

.links__item:first-child,
.links__item:first-child .links__item-tooltip-wrapper {
    border-top-left-radius: .3rem;
    border-bottom-left-radius: .3rem
}

.links__item:last-child {
    border-top-right-radius: .3rem;
    border-bottom-right-radius: .3rem
}

@media(hover:hover) {
    .links__item:hover {
        outline-color: var(--text-color)
    }
}

.links__item.tooltip-active,
.links__item.dropdown-active {
    outline-color: var(--text-color)
}

.links__item svg {
    display: inline-block;
    fill: currentColor
}

.links__wrapper--secondary svg {
    display: inline-block;
    fill: currentColor;
    stroke: currentColor
}

.links__tooltip-header {
    font-size: 1.4rem;
    font-weight: 700;
    margin-block-start: 0em;
    margin-block-end: .3em;
    line-height: 1.2
}

.links__tooltip-ref {
    font-size: 1.4rem;
    font-weight: 500;
    text-decoration: underline
}

.links__tooltip-ref:hover {
    color: var(--secondary-text-color);
    text-decoration-color: var(--secondary-text-color)
}

.links__tooltip-wrapper {
    padding: .5rem .5rem 0rem
}

.links__wrapper {
    display: flex;
    gap: 1rem
}

.links__item {
    flex-grow: 1
}

.links .svg-stroke svg {
    stroke: currentColor
}

.links-and-trade__wrapper {
    display: flex;
    gap: 2rem;
    flex-direction: column
}

.trade__wrapper {
    display: flex;
    gap: 2rem;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 2rem;
    border: 1px solid var(--border-color);
    border-radius: .4rem
}

.trade__wrapper--title-section {
    margin: 0 0 2rem
}

.trade__wrapper .badge {
    display: inline-block;
    padding: .2rem .4rem
}

.trade__discount {
    white-space: nowrap
}

@media(max-width:1179px)and (min-width:700px) {
    .links-and-trade__wrapper {
        flex-direction: row;
        align-items: center
    }

    .links-and-trade__wrapper .links {
        flex-grow: 1;
        height: 6.4rem
    }

    .links-and-trade__wrapper .links__wrapper {
        width: 100%
    }

    .trade__wrapper {
        flex-grow: 1
    }
}

@media(max-width:385px) {
    .trade__wrapper {
        gap: 1rem
    }

    .trade__discount {
        white-space: normal;
        line-height: 2.5rem
    }

    .trade__discount .badge {
        line-height: 1.8rem
    }
}

.sticky {
    display: none;
    top: -99rem;
    position: fixed;
    right: 2rem;
    padding: .4rem;
    border-radius: .2rem;
    z-index: 98;
    background-color: var(--dropdown-background-color);
    box-shadow: 0 1rem 5rem #002bbb1f
}

.sticky iframe,
.sticky img {
    display: block
}

.sticky--loaded {
    display: block;
    top: auto;
    bottom: 1.5rem
}

.sticky__hitbox {
    position: absolute;
    top: -2rem;
    left: -2rem;
    border: 0;
    margin: 0;
    padding: 1rem;
    cursor: pointer;
    background: none;
    z-index: 2
}

.sticky__hitbox:focus {
    outline: none
}

.sticky__close {
    background-color: var(--dropdown-background-color);
    box-shadow: 0 1rem 5rem #002bbb1f;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 2rem;
    stroke: var(--text-color)
}

@media(max-width:768px) {
    .sticky {
        left: 50%;
        transform: translate(-50%);
        right: auto;
        padding: 0
    }

    .sticky--loaded {
        bottom: 0
    }

    .sticky__hitbox {
        top: -2.5rem;
        left: 0
    }
}

@media(max-width:1179px) {
    .sticky--loaded {
        bottom: 7.1rem
    }
}

.tag-short-description {
    margin-bottom: 0
}

.tag-short-description a:hover {
    color: var(--secondary-text-color);
    text-decoration-color: var(--secondary-text-color)
}

.tag-short-description--mobile {
    margin: -1rem 0 2rem
}

.description {
    width: 100%
}

.description li,
.description p {
    font-size: 1.5rem;
    line-height: 2;
    margin-block-start: 1em;
    margin-block-end: 1em
}

.description h2 {
    font-size: 2.8rem;
    margin-block-end: .6em
}

.description h3 {
    font-size: 2rem;
    margin-block-end: .6em
}

.description h4 {
    font-size: 1.8rem;
    margin-block-end: .6em;
    font-weight: 700;
    color: var(--secondary-text-color)
}

.description h2+p,
.description h3+p,
.description h4+p {
    margin-block-start: 0em
}

.description a:hover {
    color: var(--secondary-text-color);
    text-decoration-color: var(--secondary-text-color)
}

.sponsored-buttons-wrapper {
    margin: 0 -2rem;
    padding: 1.7rem 0
}

.sponsored-buttons-wrapper--main-page {
    padding: 1.6rem 0 2.2rem
}

.sponsored-buttons-ad {
    display: contents
}

.sponsored-buttons {
    display: inline-flex;
    padding: 0 2rem;
    gap: 1rem
}

.sponsored-buttons-hr {
    margin: 1rem 0
}

.sponsored-button {
    display: flex;
    appearance: none;
    background: none;
    align-items: center;
    justify-content: space-between;
    padding: .5rem 1rem .5rem 1.4rem;
    margin: 0;
    gap: 0;
    min-width: 11rem;
    height: 4.2rem;
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--text-color);
    border: .1rem solid var(--border-color);
    border-radius: .3rem;
    cursor: pointer;
    transition: border-color .1s ease-out;
    user-select: none;
    -webkit-user-select: none;
    text-decoration: none;
    flex-shrink: 0;
    white-space: nowrap
}

.sponsored-button:active {
    border-color: var(--text-color);
    background-color: var(--active-background-color)
}

.sponsored-button--compact {
    min-width: auto;
    padding: .5rem 1.4rem
}

@media(hover:hover) {
    .sponsored-button:hover {
        border-color: var(--text-color)
    }
}

.sponsored-button.dropdown-active {
    border-color: var(--text-color)
}

.sponsored-button__icon-wrapper {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    white-space: nowrap
}

.sponsored-button__icon-wrapper img {
    width: 6.5rem;
    height: 2.2rem;
    margin-left: .5rem
}

.sponsored-button__icon {
    margin: 0 .5rem 0 0;
    stroke: currentColor;
    fill: currentColor
}

.sponsored-button__icon--fill-only {
    stroke: none
}

.sponsored-button__caret {
    margin: 0 0 0 1rem;
    stroke: currentColor;
    flex-shrink: 0
}

.sponsored-button--important {
    background: var(--text-color);
    color: var(--background-color);
    border-color: var(--text-color);
    transition: background .1s ease-out, border-color .1s ease-out
}

@media(hover:hover) {
    .sponsored-button--important:hover {
        background: var(--secondary-text-color);
        border-color: var(--secondary-text-color)
    }
}

.sponsored-button--important.dropdown-active {
    background: var(--secondary-text-color);
    border-color: var(--secondary-text-color)
}

.sponsored-buttons-dropdown {
    margin: 0rem 3rem 3rem;
    border-radius: .3rem;
    border: .1rem solid var(--border-color)
}

.sponsored-buttons-dropdown__slot {
    display: block
}

.sponsored-buttons-dropdown__slot iframe {
    display: block;
    width: 100%
}

.sponsored-buttons-dropdown .sponsored-buttons-dropdown__slot:not(.empty):has(~.sponsored-buttons-dropdown__slot:not(.empty)) {
    border-bottom: .1rem solid var(--border-color) !important
}

.sponsored-buttons-dropdown .sponsored-buttons-dropdown__slot:not(.empty):not(:has(~.sponsored-buttons-dropdown__slot:not(.empty))) {
    border-bottom: none !important
}

.sponsored-buttons-dropdown__note {
    margin-top: 1.3rem;
    color: var(--secondary-text-color);
    text-align: center;
    font-size: 1.3rem
}

.sponsored-button-placement {
    display: block;
    text-decoration: none;
    color: var(--text-color);
    width: 100%;
    padding: 2rem 2.5rem;
    overflow: hidden
}

.sponsored-button-placement__description {
    display: block;
    margin: 1rem 0 0;
    color: var(--text-color);
    font-size: 1.5rem
}

.sponsored-button-placement__header {
    display: flex;
    justify-content: space-between;
    width: 100%
}

.sponsored-button-placement__profile {
    display: flex;
    align-items: center
}

.sponsored-button-placement__logo {
    width: 3.6rem;
    height: 3.6rem;
    border-radius: .5rem;
    display: block
}

.sponsored-button-placement__logo-wrapper {
    display: block;
    position: relative;
    width: 4.6rem;
    height: 4.6rem;
    padding: .4rem;
    margin: 0;
    border-radius: .8rem;
    border: .1rem solid var(--border-color);
    margin-right: 1rem
}

.sponsored-button-placement__name {
    font-weight: 600;
    text-overflow: ellipsis
}

.sponsored-button-placement__button {
    display: block;
    text-decoration: none;
    margin: 1rem 0 1rem 1rem;
    flex-shrink: 0;
    padding: 1rem 1.5rem;
    background: var(--text-color);
    color: var(--background-color);
    border: 0;
    border-radius: .3rem;
    cursor: pointer;
    font-weight: 600;
    font-size: 1.4rem
}

@media(max-width:1179px) {
    .sponsored-buttons-wrapper {
        padding: 1.2rem 0 0
    }

    .sponsored-buttons-wrapper--main-page {
        padding: 2.2rem 0
    }
}

@media(max-width:600px) {
    .sponsored-buttons-dropdown {
        margin: 0rem 2rem 2rem
    }

    .sponsored-button {
        height: 4rem
    }

    .sponsored-buttons-hr {
        margin: 2rem 0
    }
}

.top-coin,
.top-exchange {
    display: flex;
    align-items: center;
    text-decoration: none;
    padding: .8rem 0 .9rem;
    gap: .8rem 1.4rem
}

.top-coin__prepend,
.top-exchange__prepend {
    display: none
}

.top-coin__profile,
.top-exchange__profile {
    display: block;
    position: relative;
    width: 3.6rem;
    height: 3.6rem;
    padding: .1rem;
    flex-shrink: 0;
    border-radius: 3.6rem;
    border: .1rem solid var(--border-color);
    background-color: var(--background-color);
    margin: 0
}

.top-coin__logo-wrapper,
.top-exchange__logo-wrapper {
    display: block;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 3.2rem;
    background: #fff;
    border: .2rem solid #fff;
    overflow: hidden
}

.top-coin__logo-wrapper img,
.top-exchange__logo-wrapper img {
    display: block
}

.top-coin__name,
.top-exchange__name {
    font-weight: 600;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-basis: 15%;
    flex-shrink: 0
}

.top-coin__description,
.top-exchange__description {
    margin: 0 auto 0 0;
    white-space: wrap
}

.top-exchange__profile {
    border-radius: .8rem
}

.top-exchange__logo-wrapper {
    border-radius: .6rem
}

:root.dark-theme .top-coin__profile,
:root.dark-theme .top-exchange__profile {
    border-color: var(--background-color)
}

@media(prefers-color-scheme:dark) {

    :root:not(.light-theme) .top-coin__profile,
    :root:not(.light-theme) .top-exchange__profile {
        border-color: var(--background-color)
    }
}

@media(max-width:600px) {

    .top-coin,
    .top-exchange {
        padding: .8rem 0 1.3rem;
        flex-wrap: wrap;
        gap: .7rem .8rem
    }

    .top-coin__prepend,
    .top-exchange__prepend {
        display: block;
        color: var(--text-color);
        font-size: 1.2rem;
        font-weight: 600
    }

    .top-coin__profile,
    .top-exchange__profile {
        width: 3.4rem;
        height: 3.4rem
    }

    .top-coin__name,
    .top-exchange__name {
        flex-basis: auto
    }

    .top-coin__logo-wrapper,
    .top-exchange__logo-wrapper {
        width: 3rem;
        height: 3rem
    }

    .top-coin__logo-wrapper img,
    .top-exchange__logo-wrapper img {
        width: 2.6rem;
        height: 2.6rem
    }

    .top-coin__description,
    .top-exchange__description {
        flex-basis: 100%;
        order: 3;
        font-size: 1.3rem
    }

    .top-coin__button,
    .top-exchange__button {
        order: 2;
        margin-left: auto
    }
}

.theme-switch {
    display: flex;
    height: 4.2rem;
    gap: .1rem;
    list-style: none;
    padding: 0;
    background: var(--border-color);
    border: .1rem solid var(--border-color);
    border-radius: .3rem;
    width: fit-content;
    flex-grow: 1
}

.theme-switch__item {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: var(--text-color);
    padding: 1rem;
    background: var(--dropdown-background-color);
    outline-style: solid;
    outline-width: .1rem;
    outline-color: transparent;
    cursor: pointer;
    border: 0;
    flex-grow: 1;
    transition: border-color .1s ease-in-out;
    min-width: 4.2rem
}

.theme-switch__item:hover,
.theme-switch__item--selected {
    outline-color: var(--text-color)
}

.theme-switch__item svg {
    display: inline-block;
    fill: currentColor;
    stroke: currentColor
}

.theme-switch__auto-theme-font {
    font-weight: 700;
    font-size: 1rem
}

.coin-categories {
    display: flex;
    gap: 2rem;
    min-width: 100%
}

.coin-category {
    display: flex;
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 100%;
    min-width: 12rem;
    max-width: calc(16.6666666667% - 1.6666666667rem);
    flex-direction: column;
    align-items: center;
    border-radius: .4rem;
    text-decoration: none;
    transition: border-color .1s ease-out
}

.coin-category__detail {
    display: flex;
    flex-direction: column;
    padding: 1.6rem 1rem 1.1rem;
    align-items: center;
    gap: .6rem;
    width: 100%;
    border-top: .1rem solid var(--border-color);
    border-left: .1rem solid var(--border-color);
    border-right: .1rem solid var(--border-color);
    text-decoration: none;
    border-radius: .4rem .4rem 0 0
}

.coin-category__detail:hover {
    border-color: var(--text-color)
}

.coin-category__detail:hover+.coin-category__rank {
    border-top-color: var(--text-color)
}

.coin-category__profile {
    display: block;
    width: 4.4rem;
    height: 4.4rem;
    border: .1rem solid var(--border-color);
    border-radius: .8rem
}

.coin-category__logo-wrapper {
    display: block;
    width: 4.2rem;
    height: 4.2rem;
    overflow: hidden;
    border-radius: .8rem;
    border: .4rem solid #fff;
    background: #fff;
    outline: .1rem solid var(--border-color)
}

.coin-category__logo {
    display: block;
    width: 3.4rem;
    height: 3.4rem
}

.coin-category__name {
    font-size: 1.4rem;
    text-align: center
}

.coin-category__rank {
    display: block;
    width: 100%;
    font-size: 1.4rem;
    font-weight: 600;
    margin: auto 0 0;
    padding: .8rem 1rem 1.1rem;
    text-align: center;
    border: .1rem solid var(--border-color);
    text-decoration: none;
    border-radius: 0 0 .4rem .4rem
}

.coin-category__rank:hover {
    border-color: var(--text-color)
}

.aside-coin-categories__list {
    display: flex;
    flex-wrap: wrap;
    gap: 1.3rem
}

.aside-coin-categories__item {
    display: flex;
    align-items: center;
    min-width: 48.07%;
    width: auto;
    padding: .9rem 1.1rem;
    border: .1rem solid var(--border-color);
    border-radius: .5rem;
    background-color: var(--background-color);
    cursor: pointer;
    white-space: nowrap;
    gap: .8rem
}

.aside-coin-categories__item:hover,
.aside-coin-categories__item:focus-within {
    border-color: var(--text-color)
}

.aside-coin-categories__item:active {
    border-color: var(--text-color);
    background-color: var(--active-background-color)
}

.aside-coin-categories__detail {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    flex: 1 1 auto;
    text-decoration: none;
    color: var(--text-color);
    font-weight: 500
}

.aside-coin-categories__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: .4643rem
}

.aside-coin-categories__icon img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: .4643rem;
    object-fit: cover
}

.aside-coin-categories__name {
    font-size: 1.4rem;
    line-height: 1.3
}

.aside-coin-categories__rank {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--text-color);
    white-space: nowrap
}

.aside-coin-categories__rank:hover {
    text-decoration-thickness: .2rem;
    color: var(--secondary-text-color);
    text-decoration-color: var(--secondary-text-color)
}

.aside-coin-categories__rank-medal {
    font-size: 1.4rem
}

.aside-coin-categories__rank-number {
    display: inline-block
}

.aside-coin-categories .hsc .scrollable {
    --left-mask-size: 0rem;
    --right-mask-size: 0rem
}

:root.dark-theme .coin-category__profile {
    border-color: var(--background-color)
}

:root.dark-theme .coin-category__logo-wrapper {
    outline: none
}

:root.dark-theme .aside-coin-categories__item {
    background-color: var(--background-color)
}

:root.dark-theme .aside-coin-categories__item:active {
    background-color: var(--active-background-color)
}

:root.dark-theme .aside-coin-categories__item:hover,
:root.dark-theme .aside-coin-categories__item:focus-within {
    box-shadow: 0 .4rem 1.2rem #00071e99
}

:root.dark-theme .aside-coin-categories__icon {
    border-color: var(--profile-border-color);
    background-color: var(--background-color)
}

@media(prefers-color-scheme:dark) {
    :root:not(.light-theme) .coin-category__profile {
        border-color: var(--background-color)
    }

    :root:not(.light-theme) .coin-category__logo-wrapper {
        outline: none
    }

    :root:not(.light-theme) .aside-coin-categories__item {
        background-color: var(--background-color)
    }

    :root:not(.light-theme) .aside-coin-categories__item:active {
        background-color: var(--active-background-color)
    }

    :root:not(.light-theme) .aside-coin-categories__item:hover,
    :root:not(.light-theme) .aside-coin-categories__item:focus-within {
        box-shadow: 0 .4rem 1.2rem #00071e99
    }

    :root:not(.light-theme) .aside-coin-categories__icon {
        border-color: var(--profile-border-color);
        background-color: var(--background-color)
    }
}

@media(max-width:1365px)and (min-width:1180px) {
    .coin-category {
        max-width: calc(25% - 1.5rem)
    }
}

@media(max-width:1179px)and (min-width:601px) {
    .aside-coin-categories__item {
        min-width: 15rem
    }
}

@media(max-width:600px) {
    .coin-categories-scrollable {
        margin: 0 -2rem
    }

    .coin-categories {
        padding: 0 0 0 2rem;
        gap: 1.8rem
    }

    .coin-categories:after {
        content: "";
        display: block;
        flex-shrink: 0;
        width: .2rem;
        height: .2rem
    }

    .coin-category {
        max-width: calc(40% - 1.08rem)
    }

    .aside-coin-categories .hsc {
        margin: 0 -2rem
    }

    .aside-coin-categories .hsc .aside-coin-categories__list {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 1rem;
        padding: 0 2rem
    }

    .aside-coin-categories .hsc .aside-coin-categories__list:after {
        content: "";
        display: block;
        flex-shrink: 0;
        width: .2rem;
        height: .2rem
    }

    .aside-coin-categories .hsc .aside-coin-categories__empty {
        flex: 1 1 100%;
        min-width: 100%
    }

    .aside-coin-categories .hsc .aside-coin-categories__item {
        flex-shrink: 0;
        min-width: 15rem;
        padding: 1rem 1.2rem
    }

    .aside-coin-categories__item {
        padding: 1rem 1.2rem;
        min-width: 47.5%;
        width: auto
    }
}

.error {
    padding: 6rem 10rem 7rem
}

.error svg {
    stroke: currentColor;
    fill: var(--background-color)
}

.error--title {
    margin: 1.5rem 0rem 1rem
}

.error--paragraph {
    margin: 0 0 1.5rem;
    font-size: 1.6rem
}

.error--button {
    display: inline-block;
    background: var(--text-color);
    color: var(--background-color);
    border-radius: .3rem;
    border: 0;
    padding: 1.2rem 3rem;
    margin-top: 1.3rem;
    font-size: 1.4rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background .1s ease-out
}

.error--button:hover {
    background: var(--secondary-text-color)
}

@media(max-width:600px) {
    .error {
        padding: 4rem 5rem
    }

    .error--title {
        font-size: 2rem
    }

    .error--paragraph {
        font-size: 1.5rem
    }

    .error--button {
        margin-top: 0rem
    }
}

.icon-description {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem 1.5rem;
    align-items: center;
    justify-content: center;
    margin-top: 2rem
}

.icon-description__item {
    display: flex;
    align-items: center;
    gap: .5rem
}

.icon-description__text {
    color: var(--secondary-text-color)
}

.toast-notification {
    display: flex;
    align-items: center;
    position: fixed;
    text-align: center;
    right: 1rem;
    z-index: 100000;
    margin-top: -.4rem;
    margin-right: 4.7rem;
    gap: 1rem;
    padding: 1rem 1.5rem;
    box-shadow: var(--box-shadow);
    background: var(--dropdown-background-color);
    font-weight: 500;
    font-size: 1.4rem;
    border-radius: .4rem;
    transition: all .1s ease-out;
    animation: slideIn .3s ease-out;
    transform: translateY(0);
    pointer-events: auto
}

.toast-notification-container {
    position: fixed;
    top: 7rem;
    right: 2rem;
    z-index: 99999;
    pointer-events: none
}

.toast-notification__multiline {
    max-width: 35rem;
    text-align: start;
    flex-direction: column;
    padding: 2rem
}

.toast-notification__multiline__title {
    display: flex;
    flex-direction: row;
    gap: .2rem;
    line-height: 1.6
}

.toast-notification__multiline__title img {
    border-radius: 50%;
    vertical-align: -.2rem
}

.toast-notification__multiline .toast-notification__close-button {
    margin-top: .3rem
}

.toast-notification__multiline__actions {
    display: flex;
    gap: 1rem;
    margin: 1rem 0 0;
    width: 100%
}

.toast-notification svg {
    stroke: var(--dropdown-background-color);
    fill: var(--positive-color)
}

.toast-notification__close-button,
.toast-notification__close-button-submit {
    display: inline-flex;
    appearance: none;
    background: none;
    border: none;
    transition: color .1s ease-out;
    height: fit-content;
    cursor: pointer
}

.toast-notification__close-button svg,
.toast-notification__close-button-submit svg {
    stroke: var(--text-color)
}

.toast-notification__button {
    padding: .8rem 1.6rem;
    border-radius: .4rem;
    font-weight: 500;
    font-size: 1.4rem;
    cursor: pointer;
    transition: all .2s ease;
    flex: 1;
    width: 100%
}

.toast-notification__button--primary {
    background: var(--text-color);
    color: var(--background-color);
    border: none
}

.toast-notification__button--primary:hover {
    background: var(--secondary-text-color)
}

.toast-notification__button--secondary {
    background: transparent;
    color: var(--text-color);
    border: 1px solid var(--border-color)
}

.toast-notification__button--secondary:hover {
    border-color: var(--secondary-text-color)
}

@media(max-width:600px) {
    .toast-notification {
        margin-right: .5rem
    }

    .toast-notification -container {
        right: .5rem
    }
}

:root:has(.is-fullscreen) .toast-notification-container {
    z-index: 99999
}

:root:has(.is-fullscreen) .toast-notification {
    z-index: 100000
}

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

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

.native-aside-rectangle {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border: .1rem solid var(--border-color);
    border-radius: .5rem
}

.native-aside-rectangle__wrapper {
    margin: 4rem 0 0
}

.native-aside-rectangle x-serve {
    font-size: 1.2rem;
    width: 100%;
    height: 100%
}

.native-aside-rectangle x-serve>div {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%
}

.native-aside-rectangle x-serve iframe,
.native-aside-rectangle x-serve img {
    display: block
}

.content__main .native-aside-rectangle {
    height: 14.4rem
}

.content__aside .native-aside-rectangle {
    height: 27rem
}

@media(max-width:600px) {
    .native-aside-rectangle {
        margin-left: -2rem;
        margin-right: -2rem;
        border-width: .1rem 0;
        border-radius: 0
    }
}

.native-middle-leaderboard {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border: .1rem solid var(--border-color);
    border-radius: .5rem
}

.native-middle-leaderboard__wrapper {
    margin: 4rem 0 0
}

.native-middle-leaderboard x-serve:not(:empty) {
    font-size: 1.2rem;
    width: 100%;
    height: 100%
}

.native-middle-leaderboard x-serve:not(:empty)>div {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%
}

.native-middle-leaderboard x-serve:not(:empty) iframe,
.native-middle-leaderboard x-serve:not(:empty) img {
    display: block
}

.native-middle-leaderboard {
    height: 14.4rem
}

@media(max-width:1365px)and (min-width:1180px) {
    .native-middle-leaderboard {
        margin-left: -5rem;
        margin-right: -5rem;
        border-width: .1rem 0;
        border-radius: 0;
        padding: 0 2rem
    }
}

@media(max-width:830px)and (min-width:600px) {
    .native-middle-leaderboard {
        margin-left: -5rem;
        margin-right: -5rem;
        border-width: .1rem 0;
        border-radius: 0;
        padding: 0 2rem
    }
}

@media(max-width:768px) {
    .native-middle-leaderboard {
        height: 14rem;
        padding: 0
    }

    .native-middle-leaderboard x-serve:not(:empty)>div {
        min-width: 32rem;
        min-height: 5rem
    }
}

@media(max-width:600px) {
    .native-middle-leaderboard {
        margin-left: -2rem;
        margin-right: -2rem;
        border-width: .1rem 0;
        border-radius: 0
    }
}

.trending-categories {
    display: flex;
    gap: 1.2rem;
    padding-top: 1rem
}

.trending-categories__item {
    flex: 1;
    position: relative;
    min-height: 8rem;
    min-width: 27rem;
    border: 1px solid var(--border-color);
    border-radius: .6rem;
    padding: 1.6rem 2.5rem;
    text-decoration: none
}

.trending-categories__item:hover {
    border-color: var(--text-color)
}

.trending-categories__item .category-profile__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1.5rem
}

.trending-categories__item .category-profile__symbol,
.trending-categories__item .category-profile .change {
    font-size: 1.4rem
}

.trending-categories__item .category-profile__logo-wrapper {
    width: 4rem;
    height: 4rem
}

.trending-categories__item:hover .trending-categories__label {
    border-color: var(--text-color)
}

.trending-categories__label {
    position: absolute;
    right: 2rem;
    top: -1rem;
    background-color: var(--background-color);
    padding: .4rem .8rem;
    border-radius: .3rem;
    font-size: 1.3rem;
    font-weight: 500;
    white-space: nowrap;
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: .2rem
}

.trending-categories__scroll-buttons {
    justify-content: end
}

.trending-categories__pagination {
    display: flex;
    flex-direction: row
}

.trending-categories__pagination .title-section__hyperlink {
    align-self: flex-end
}

.trending-categories__pagination .horizontal-scroll-buttons {
    margin: 0 0 -.5rem 1rem
}

@media(max-width:600px) {
    .trending-categories {
        padding: 0 2rem
    }

    .trending-categories:after {
        content: "";
        display: block;
        flex-shrink: 0;
        width: .2rem;
        height: .2rem
    }

    .trending-categories-scrollable {
        margin: 0 -2rem
    }
}

.dropdown-nav {
    padding: .1rem 3rem 3rem
}

.nav-button {
    display: flex;
    text-decoration: none;
    font-size: 1.4rem;
    color: var(--text-color);
    font-weight: 500;
    padding: 1rem 2rem 1rem 2.5rem;
    margin: 0 0 1.5rem;
    align-items: center;
    border: .1rem solid var(--border-color);
    border-radius: .4rem;
    cursor: pointer;
    gap: 1.5rem;
    user-select: none;
    -webkit-user-select: none;
    min-height: 6.7rem;
    transition: border-color .1s ease-in-out
}

.nav-button:hover {
    border-color: var(--text-color)
}

.nav-button:last-child {
    margin: 0
}

.nav-button svg {
    display: block;
    stroke: currentColor;
    fill: currentColor
}

.nav-button__icon {
    display: inline-flex;
    justify-content: middle;
    min-width: 2rem
}

.nav-button__profile {
    display: grid;
    align-items: center;
    grid-template-areas: "logo name" "logo slug";
    gap: 0 1.4rem;
    justify-content: flex-start;
    text-decoration: none;
    transition: color .1s ease-out;
    vertical-align: middle;
    width: 100%;
    cursor: pointer
}

.nav-button__profile--name-only {
    grid-template-areas: "logo name"
}

.nav-button__profile-name {
    grid-area: name;
    font-size: 1.4rem;
    font-weight: 600;
    text-overflow: ellipsis;
    overflow: hidden
}

.nav-button__profile-slug {
    grid-area: slug;
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--secondary-text-color);
    text-overflow: ellipsis;
    overflow: hidden
}

.nav-button__profile-svg-wrapper {
    grid-area: logo;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.6rem;
    height: 3.6rem
}

.nav-button__profile-logo-wrapper {
    grid-area: logo;
    display: block;
    width: 3.6rem;
    height: 3.6rem;
    border-radius: .5rem;
    background: #fff;
    border: .2rem solid #fff;
    overflow: hidden;
    outline: .1rem solid var(--border-color);
    padding: .2rem
}

.nav-button__profile-logo-wrapper img {
    display: block;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: .5rem;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none
}

.nav-button__profile-logo-wrapper .nav-button__profile-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: .5rem;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-color);
    background: var(--border-color);
    user-select: none;
    -webkit-user-select: none
}

.nav-button__name {
    font-weight: 600;
    min-width: 6rem
}

.nav-button__next {
    margin-left: auto
}

.nav-button--disabled {
    color: var(--disabled-color);
    cursor: default
}

.nav-button--disabled:hover {
    border-color: var(--border-color)
}

@media(max-width:600px) {
    .nav-button__name {
        min-width: 4rem
    }

    .dropdown-nav {
        padding: .1rem 2rem 3rem
    }
}

.dropdown-grid {
    display: grid;
    grid-template-columns: 3fr 1fr min-content min-content;
    margin: .1rem 3rem 3rem;
    border: .1rem solid var(--border-color);
    border-radius: .5rem
}

.dropdown-grid__icon {
    stroke: currentColor
}

.dropdown-grid__no-results {
    padding: 2rem 3rem;
    text-align: center;
    font-size: 1.4rem;
    color: var(--text-color)
}

.dropdown-grid__row {
    display: grid;
    grid-column: 1/-1;
    grid-template-columns: subgrid;
    align-items: center;
    padding: 0 1.3rem;
    border-bottom: .1rem solid var(--border-color);
    min-height: 5.9rem;
    color: var(--text-color)
}

.dropdown-grid__row--link {
    cursor: pointer;
    text-decoration: none;
    transition: outline .1s ease-out;
    outline: .1rem solid transparent
}

.dropdown-grid__row--link:last-child:not(:has(+.dropdown-grid__row--foot)) {
    border-radius: 0 0 .5rem .5rem
}

@media(hover:hover) {
    .dropdown-grid__row--link:hover {
        outline-color: var(--text-color);
        border-color: transparent
    }
}

.dropdown-grid__row--head {
    min-height: 0
}

.dropdown-grid__cell {
    font-size: 1.4rem;
    padding: .8rem .7rem .9rem;
    white-space: nowrap
}

.dropdown-grid__cell--fluid {
    grid-template-columns: 1fr;
    grid-column: 1fr
}

.dropdown-grid__cell--fluid-2 {
    grid-column: 2fr
}

.dropdown-grid__cell--min-content {
    grid-column: min-content
}

.dropdown-grid__cell--span-2 {
    grid-column: span 2
}

.dropdown-grid__cell--span-3 {
    grid-column: span 3
}

.dropdown-grid__cell--span-4 {
    grid-column: span 4
}

.dropdown-grid__cell--span-full {
    grid-column: 1/span 4
}

.dropdown-grid__row--head .dropdown-grid__cell {
    font-size: 1.3rem;
    font-weight: 600;
    text-align: left;
    color: var(--secondary-text-color);
    padding: .5rem .7rem .6rem;
    white-space: nowrap
}

.dropdown-grid__row--ad .dropdown-grid__cell {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 1rem;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden
}

.dropdown-grid__ad-serve {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow: hidden
}

.dropdown-grid__row--ad .dropdown-grid__ad-serve>div,
.dropdown-grid__row--ad .dropdown-grid__ad-serve>div>div {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box
}

.dropdown-grid__row--ad .buy-button-exchange {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box
}

.dropdown-grid__ad-label {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--secondary-text-color);
    text-transform: uppercase;
    letter-spacing: .02em
}

.dropdown-grid__row--foot {
    font-size: 1.4rem;
    color: var(--text-color);
    padding: 0;
    min-height: 0;
    text-align: center;
    border: 0
}

.dropdown-grid__row--foot a {
    display: block;
    color: currentColor;
    text-decoration: none;
    font-weight: 600;
    transition: outline .1s ease-out;
    outline: .1rem solid transparent;
    width: 100%;
    padding: .8rem .6rem .9rem;
    border-radius: 0 0 .5rem .5rem
}

@media(hover:hover) {
    .dropdown-grid__row--foot a:hover {
        outline-color: var(--text-color)
    }
}

.dropdown-grid__row:not(:has(+.dropdown-grid__row--foot)):last-child {
    border-bottom: 0
}

.dropdown-grid__row--foot:has(+.dropdown-grid__row--foot) a {
    border-radius: 0;
    border-bottom: .1rem solid var(--border-color)
}

.dropdown-grid--exchanges {
    grid-template-columns: 3fr 1fr min-content min-content
}

.dropdown-grid--exchanges-buy-with {
    grid-template-columns: 1.5fr 1fr min-content min-content
}

@media(max-width:600px) {
    .dropdown-grid--exchanges {
        grid-template-columns: 2fr min-content min-content
    }

    .dropdown-grid--exchanges-buy-with {
        grid-template-columns: 1.5fr 1fr min-content min-content
    }

    .dropdown-grid {
        margin: .1rem 0rem 2rem;
        border-width: .1rem 0;
        border-radius: 0;
        border-bottom: 0
    }

    .dropdown-grid__row--foot {
        padding: 2rem 2rem 0;
        font-size: 1.3rem
    }

    .dropdown-grid__row--foot a {
        border: .1rem solid var(--border-color);
        border-radius: .3rem;
        padding: .8rem .6rem .9rem;
        transition: border-color .1s ease-in-out
    }
}

@media(max-width:600px)and (hover:hover) {
    .dropdown-grid__row--foot a:hover {
        border-color: var(--text-color);
        outline: none
    }
}

.dropdown-view {
    transition: opacity .1s ease-out, transform .1s ease-out
}

.dropdown-view--line {
    border-top: .1rem solid var(--border-color)
}

.dropdown-view__description {
    text-align: center;
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--secondary-text-color);
    margin: 1rem 3rem
}

.dropdown-view__legenda {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem 1.2rem;
    justify-content: center;
    margin: -1rem 3rem 3rem;
    padding: 0
}

.dropdown-view__legenda li {
    display: flex;
    gap: .7rem;
    align-items: center;
    font-size: 1.3rem;
    color: var(--secondary-text-color);
    list-style: none;
    font-weight: 500
}

.dropdown.htmx-request .dropdown-view,
.dropdown-view.htmx-swapping {
    opacity: 0;
    transform: translate(-.5rem)
}

.dropdown-view.htmx-settling,
.dropdown.htmx-request .dropdown-view.back,
.dropdown-view.back.htmx-swapping {
    opacity: 0;
    transform: translate(.5rem)
}

.dropdown-view.back.htmx-settling {
    opacity: 0;
    transform: translate(-.5rem)
}

.expandable-list {
    display: block;
    border-radius: .5rem;
    border: .1rem solid var(--border-color);
    color: var(--text-color);
    list-style: none;
    padding-inline-start: 0
}

.expandable-list__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2.5rem;
    border-top: .1rem solid var(--border-color);
    height: 5.6rem;
    text-decoration: none
}

.expandable-list__item:first-child {
    border-top: none
}

.expandable-list__item--empty {
    padding: 1.5rem 2.5rem;
    height: auto
}

.expandable-list__button {
    appearance: none;
    cursor: pointer;
    background: none;
    border-color: var(--border-color);
    border-style: solid;
    border-width: .1rem 0 0;
    font-size: 1.4rem;
    color: var(--text-color);
    font-weight: 600;
    text-align: center;
    width: 100%;
    padding: .9rem 2rem 1rem;
    transition: color .1s ease-out
}

.expandable-list__button:hover {
    color: var(--secondary-text-color)
}

.expandable-list__right-align {
    text-align: right
}

.fiat-profile {
    display: grid;
    align-items: center;
    grid-template-areas: "logo name";
    gap: 0 1.4rem;
    justify-content: flex-start;
    text-decoration: none;
    transition: color .1s ease-out;
    padding: .3rem;
    margin: -.3rem;
    cursor: pointer
}

.fiat-profile--with-your-fiat {
    grid-template-areas: "logo name" "logo your-fiat"
}

.fiat-profile:hover {
    color: var(--secondary-text-color)
}

.fiat-profile:focus-visible {
    outline: .2rem solid var(--primary-color);
    outline-offset: .2rem
}

.fiat-profile__logo-wrapper {
    grid-area: logo;
    display: block;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 3.2rem;
    background: #fff;
    border: .2rem solid #fff;
    overflow: hidden;
    outline: .1rem solid var(--border-color)
}

.fiat-profile__logo {
    display: block;
    width: 2.8rem;
    height: 2.8rem;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none
}

.fiat-profile__name {
    grid-area: name;
    font-size: 1.4rem;
    font-weight: 600;
    text-overflow: ellipsis;
    overflow: hidden
}

.fiat-profile__your-fiat {
    grid-area: your-fiat;
    font-size: 1.3rem
}

:root.dark-theme .fiat-profile__logo-wrapper {
    outline: none
}

@media(prefers-color-scheme:dark) {
    :root:not(.light-theme) .fiat-profile__logo-wrapper {
        outline: none
    }
}

@media(max-width:600px) {
    .fiat-profile {
        gap: 0 .8rem
    }

    .fiat-profile__logo-wrapper {
        width: 3rem;
        height: 3rem
    }

    .fiat-profile__logo {
        width: 2.6rem;
        height: 2.6rem
    }
}

:root:has(.is-fullscreen) {
    overflow: hidden
}

:root:has(.is-fullscreen) .hide-on-fullscreen {
    display: none
}

:root:not(:has(.is-fullscreen)) .show-only-on-fullscreen {
    display: none
}

.is-fullscreen {
    display: block;
    background: var(--background-color)
}

.is-fullscreen>* {
    border: 0;
    width: 100%;
    height: 100%;
    padding: 0
}

.is-fullscreen::backdrop {
    background-color: var(--background-color)
}

.supported-country-profile {
    display: grid;
    align-items: center;
    grid-template-areas: "logo name";
    gap: 0 1.4rem;
    justify-content: flex-start;
    text-decoration: none;
    transition: color .1s ease-out;
    padding: .3rem;
    margin: -.3rem
}

.supported-country-profile--with-your-country {
    grid-template-areas: "logo name" "logo your-country"
}

.supported-country-profile__logo-wrapper {
    grid-area: logo;
    display: block;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: .8rem;
    background: #fff;
    border: .2rem solid #fff;
    overflow: hidden;
    outline: .1rem solid var(--border-color)
}

.supported-country-profile__circle-logo-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: #fff;
    border: .2rem solid #fff;
    overflow: hidden
}

.supported-country-profile__circle-logo-wrapper img {
    object-fit: contain;
    width: 100%;
    height: 100%
}

.supported-country-profile__circle-logo-wrapper:has(svg) {
    background-color: transparent;
    border: 0
}

.supported-country-profile__circle-logo-wrapper svg {
    fill: var(--text-color);
    stroke: var(--text-color)
}

.supported-country-profile__logo {
    display: block;
    width: 2.8rem;
    height: 2.8rem;
    user-select: none;
    -webkit-user-drag: none
}

.supported-country-profile__name {
    grid-area: name;
    font-size: 1.4rem;
    font-weight: 600;
    text-overflow: ellipsis;
    overflow: hidden
}

.supported-country-profile__your-country {
    grid-area: your-country;
    font-size: 1.3rem
}

:root.dark-theme .supported-country-profile__logo-wrapper {
    outline: none
}

@media(prefers-color-scheme:dark) {
    :root:not(.light-theme) .supported-country-profile__logo-wrapper {
        outline: none
    }
}

@media(max-width:600px) {
    .supported-country-profile {
        gap: 0 .8rem
    }

    .supported-country-profile__logo-wrapper {
        width: 3rem;
        height: 3rem
    }

    .supported-country-profile__logo {
        width: 2.6rem;
        height: 2.6rem
    }
}

.market-profile {
    display: grid;
    align-items: center;
    grid-template-areas: "logo pair" "logo exchange";
    gap: 0 1.4rem;
    justify-content: flex-start;
    text-decoration: none;
    padding: .3rem;
    margin: -.3rem
}

.market-profile__logo-wrapper {
    grid-area: logo;
    display: block;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 3.2rem;
    background: #fff;
    border: .2rem solid #fff;
    overflow: hidden;
    outline: .1rem solid var(--border-color)
}

.market-profile__logo {
    display: block;
    width: 2.8rem;
    height: 2.8rem;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none
}

.market-profile__pair {
    grid-area: pair;
    font-size: 1.4rem;
    font-weight: 600;
    text-overflow: ellipsis;
    overflow: hidden
}

.market-profile__exchange {
    grid-area: exchange;
    font-size: 1.3rem;
    font-weight: 500;
    color: var(--secondary-text-color);
    text-overflow: ellipsis;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: .4rem
}

.market-profile__exchange svg {
    vertical-align: middle;
    margin: -.3rem 0 0
}

:root.dark-theme .market-profile__logo-wrapper {
    outline: none
}

@media(prefers-color-scheme:dark) {
    :root:not(.light-theme) .market-profile__logo-wrapper {
        outline: none
    }
}

@media(max-width:600px) {
    .market-profile {
        gap: 0 .8rem
    }

    .market-profile__logo-wrapper {
        width: 3rem;
        height: 3rem
    }

    .market-profile__logo {
        width: 2.6rem;
        height: 2.6rem
    }
}

.edit-column__sorting-option,
.csv-download-menu-option {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--text-color);
    padding: 1rem 2rem;
    border: .1rem solid var(--border-color);
    cursor: pointer;
    margin-bottom: -.1rem
}

.edit-column__sorting-option:hover,
.csv-download-menu-option:hover {
    border-color: var(--text-color);
    z-index: 1
}

.edit-column__sorting-option input[type=radio],
.csv-download-menu-option input[type=radio] {
    width: 1.5rem;
    height: 1.5rem;
    border: .1rem solid var(--border-color);
    border-radius: 50%;
    appearance: none;
    cursor: pointer;
    display: grid;
    place-content: center;
    margin: .1rem
}

.edit-column__sorting-option input[type=radio]:disabled,
.csv-download-menu-option input[type=radio]:disabled {
    cursor: not-allowed
}

.edit-column__sorting-option input[type=radio]:checked,
.csv-download-menu-option input[type=radio]:checked {
    border-color: var(--text-color)
}

.edit-column__sorting-option input[type=radio]:before,
.csv-download-menu-option input[type=radio]:before {
    content: "";
    width: .9rem;
    height: .9rem;
    border-radius: 100%;
    transform: scale(0);
    transition: .12s transform ease-in-out;
    box-shadow: inset 1em 1em var(--text-color)
}

.edit-column__sorting-option input[type=radio]:checked:before,
.csv-download-menu-option input[type=radio]:checked:before {
    transform: scale(1)
}

.edit-column__sorting-option:first-child,
.csv-download-menu-option:first-child {
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem
}

.edit-column__sorting-option:last-child,
.csv-download-menu-option:last-child {
    border-bottom-right-radius: .5rem;
    border-bottom-left-radius: .5rem;
    margin-bottom: 0
}

.edit-column__sorting-option:has(input:checked),
.csv-download-menu-option:has(input:checked) {
    border-color: var(--text-color);
    z-index: 1
}

.edit-column__sorting-option:has(input:disabled),
.csv-download-menu-option:has(input:disabled) {
    cursor: not-allowed
}

.csv-download svg {
    stroke: var(--text-color)
}

.csv-download-menu {
    padding: 0rem 3rem 3rem;
    display: flex;
    flex-direction: column
}

.csv-download-menu-option-custom {
    flex-direction: column;
    align-items: flex-start
}

.csv-download-menu-option-custom-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%
}

.csv-download-menu-option-custom-input-group {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin-left: 3rem
}

.csv-download-menu-option-custom-input-group input {
    width: 100%;
    border: .1rem solid var(--border-color);
    border-radius: .5rem;
    padding: 1.5rem;
    margin-bottom: .5rem;
    background-color: var(--dropdown-background-color);
    color: var(--text-color)
}

.csv-download-menu-option-custom-input-group input:disabled {
    cursor: not-allowed
}

.button.csv-download {
    padding: .5rem 1.8rem
}

.exchange-trade-and-bonus-wrapper {
    display: flex;
    flex-direction: column;
    border-radius: .5rem;
    background-color: var(--dropdown-background-color);
    color: var(--text-color);
    text-align: left;
    font-size: 1.4rem;
    line-height: 1.6;
    border: .1rem solid var(--border-color)
}

.exchange-trade-and-bonus__label-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .4rem;
    padding: 1.2rem 2rem 1.5rem;
    border-bottom: .1rem solid var(--border-color)
}

.exchange-trade-and-bonus__label--title {
    font-size: 1.4rem;
    font-weight: 600
}

.exchange-trade-and-bonus__label--time-left {
    color: var(--warning-color)
}

.exchange-trade-and-bonus__label--time-left-red {
    color: var(--negative-color)
}

.exchange-trade-and-bonus__content {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    padding: 2rem 3rem 3rem
}

.exchange-trade-and-bonus__content-with-image {
    display: flex;
    gap: 1.2rem;
    padding-bottom: 2.5rem;
    border-bottom: .1rem solid var(--border-color)
}

.exchange-trade-and-bonus__content-with-image-wrapper {
    width: 11rem;
    min-height: 6rem;
    border: .1rem solid var(--border-color);
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 0;
    margin-right: 1.2rem;
    background: #fff
}

.exchange-trade-and-bonus__content-with-image img {
    width: 5rem;
    height: 5rem;
    object-fit: contain;
    border-radius: .3rem;
    margin: 2rem
}

.exchange-trade-and-bonus__content-with-image-content {
    display: flex;
    flex-direction: column;
    gap: .4rem
}

.exchange-trade-and-bonus__content-with-image-title {
    font-size: 1.6rem;
    font-weight: 700;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .5rem
}

.exchange-trade-and-bonus__content-with-image-description {
    font-size: 1.4rem;
    font-weight: 500
}

.exchange-trade-and-bonus__content-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1.2rem
}

.exchange-trade-and-bonus__content-buttons-text {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .8rem
}

@media(max-width:1179px)and (min-width:769px) {
    .exchange-trade-and-bonus-wrapper {
        flex-direction: row
    }

    .exchange-trade-and-bonus__label-section {
        flex-direction: column;
        align-items: baseline;
        justify-content: center;
        border-bottom: none;
        border-right: .1rem solid var(--border-color);
        padding: 1.2rem 2rem 1.5rem
    }

    .exchange-trade-and-bonus__content {
        flex-direction: row;
        gap: 2rem
    }

    .exchange-trade-and-bonus__content-with-image {
        padding-bottom: 0rem;
        border-bottom: none
    }

    .exchange-trade-and-bonus__content-with-image-content {
        width: 60%
    }

    .exchange-trade-and-bonus__content-buttons {
        width: 40%
    }

    .exchange-trade-and-bonus__content-buttons-text {
        white-space: nowrap;
        max-width: 100%
    }

    .exchange-trade-and-bonus__content-buttons-text-button {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        display: block
    }
}

.blog-posts {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 2rem
}

.blog-post {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding-bottom: 1.6rem;
    border-bottom: .1rem solid var(--border-color);
    text-decoration: none;
    color: inherit
}

.blog-post:last-child {
    border-bottom: none;
    padding-bottom: 0
}

.blog-post__image {
    width: 8.6rem;
    height: 6.8rem;
    min-width: 8.6rem;
    min-height: 6.8rem;
    object-fit: cover;
    border-radius: .8rem
}

.blog-post__content {
    display: flex;
    flex-direction: column
}

.blog-post__title {
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.7;
    margin: 0 0 .25rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis
}

@supports not (-webkit-line-clamp: 2) {
    .blog-post__title {
        max-height: 3.4em
    }
}

.blog-post__date {
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--secondary-text-color);
    margin: 0
}

.blog-post:hover .blog-post__title {
    color: var(--secondary-text-color)
}

.more-articles-button {
    display: block;
    width: 100%;
    padding: .75rem;
    text-align: center;
    border: .1rem solid var(--border-color);
    border-radius: .3rem;
    background-color: var(--background-color);
    color: var(--text-color);
    text-decoration: none;
    font-weight: 600
}

.more-articles-button:hover {
    border-color: var(--secondary-text-color)
}

.sticky-menu {
    display: none
}

@media(max-width:1179px) {
    .sticky-menu {
        display: flex;
        position: fixed;
        padding: 0 1rem;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 6rem;
        background-color: var(--background-color);
        z-index: 98;
        border-top: .1rem solid var(--border-color);
        align-items: center;
        justify-content: stretch
    }

    .sticky-menu__item {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 6rem;
        margin: 0;
        position: relative;
        color: var(--text-color);
        font-size: 1.4rem;
        font-weight: 600;
        text-decoration: none;
        transition: color .1s ease-out;
        white-space: nowrap;
        flex-grow: 1;
        cursor: pointer
    }

    .sticky-menu__item svg {
        vertical-align: middle;
        fill: currentColor;
        stroke: currentColor;
        stroke-width: .15rem;
        transition: stroke-width .1s ease-out
    }

    .sticky-menu__item:after {
        content: "";
        position: absolute;
        margin: auto;
        right: 1rem;
        top: -.1rem;
        left: 1rem;
        height: .2rem;
        background-color: transparent;
        transition: background-color .1s ease-out
    }
}

@media(max-width:1179px)and (hover:hover) {
    .sticky-menu__item:hover {
        color: var(--secondary-text-color)
    }

    .sticky-menu__item:hover:after {
        background-color: var(--secondary-text-color)
    }
}

@media(max-width:1179px) {

    .sticky-menu__item--active,
    .sticky-menu__item.dropdown-active {
        font-weight: 600
    }

    .sticky-menu__item--active svg,
    .sticky-menu__item.dropdown-active svg {
        stroke-width: .18rem
    }

    .sticky-menu__item--active:after,
    .sticky-menu__item.dropdown-active:after {
        height: .2rem;
        background-color: var(--text-color)
    }

    .sticky-menu__badge {
        display: inline-block;
        margin: -.5rem -.4rem 0 -.6rem;
        vertical-align: middle;
        border: .2rem solid var(--background-color);
        background-color: currentColor;
        font-size: .9rem;
        font-weight: 600;
        border-radius: 1.1rem;
        line-height: 1;
        padding: .3rem .4rem;
        min-width: 1.9rem;
        min-height: 1.9rem;
        text-align: center;
        transition: background-color .1s ease-out
    }

    .sticky-menu__count {
        color: var(--background-color)
    }
}

.edit-column {
    padding: 0rem 3rem 3rem;
    display: flex;
    flex-direction: column
}

.edit-column__tabs {
    display: flex;
    border-bottom: .1rem solid var(--border-color);
    margin-bottom: 2rem
}

.edit-column__tab {
    background: none;
    border: none;
    padding: 1.5rem 0rem;
    margin-right: 2rem;
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--secondary-text-color);
    cursor: pointer;
    border-bottom: .2rem solid transparent;
    transition: all .2s ease
}

.edit-column__tab:hover {
    color: var(--text-color)
}

.edit-column__tab--active {
    color: var(--text-color);
    border-bottom-color: var(--text-color)
}

.edit-column__sorting-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem
}

.edit-column__sorting-header-title {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-color)
}

.edit-column__sorting-header-reset {
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--text-color)
}

.edit-column__sorting-header-reset:hover {
    color: var(--secondary-text-color)
}

.edit-column__sorting-toggle-group {
    display: flex;
    gap: 0rem;
    justify-content: center;
    margin-bottom: 1.5rem
}

.edit-column__sorting-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    gap: .8rem;
    font-size: 1.4rem;
    color: var(--text-color);
    font-weight: 500;
    padding: .9rem 1.5rem 1rem;
    width: 100%;
    text-align: center;
    border: .1rem solid var(--border-color);
    border-radius: .3rem;
    cursor: pointer;
    height: 4.2rem;
    transition: border-color .1s ease-in-out, background-color .1s ease-out
}

.edit-column__sorting-toggle.active {
    border-color: var(--text-color);
    z-index: 1
}

.edit-column__sorting-toggle:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    margin-right: -.1rem
}

.edit-column__sorting-toggle:first-child:hover {
    z-index: 1;
    border-color: var(--text-color)
}

.edit-column__sorting-toggle:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0
}

.edit-column__sorting-toggle:last-child:hover {
    border-color: var(--text-color)
}

.edit-column__sorting-toggle .sorting-arrow svg {
    stroke: var(--text-color)
}

.edit-column__sorting-toggle .sorting-arrow--reverse {
    transform: rotate(180deg)
}

.edit-column__sorting-options {
    display: flex;
    flex-direction: column
}

.edit-column__sorting-option {
    text-decoration: none
}

.edit-column__sorting-option-title {
    display: inline-flex;
    align-items: center;
    gap: .5rem
}

.edit-column__sorting-option--disabled {
    color: var(--secondary-text-color);
    background-color: var(--background-color);
    opacity: .55
}

.edit-column__sorting-option--disabled:hover {
    border-color: var(--border-color);
    z-index: auto
}

.edit-column__sorting-option--disabled:has(input:disabled) {
    border-color: var(--border-color)
}

.edit-column__sorting-option--disabled input[type=radio] {
    border-color: var(--border-color)
}

.viewport-reset-trigger {
    display: none !important
}

@media(min-width:600px) {
    .viewport-reset-trigger {
        display: block !important
    }
}

@media(min-width:600px) {
    .edit-column[data-tab=second] .viewport-reset-trigger {
        display: block !important
    }
}

.floaty-message {
    opacity: 0;
    transform: translateY(.5rem);
    color: var(--text-color);
    justify-self: anchor-center;
    padding: .5rem;
    border-radius: .3rem;
    font-size: 1.2rem;
    font-weight: 500;
    white-space: nowrap;
    z-index: 1;
    border: 0;
    transition: opacity .1s ease-out, transform .1s ease-out;
    padding: 1rem 2rem;
    display: flex;
    text-align: center;
    gap: .5rem;
    box-shadow: 0 .2rem 1rem #002bbb1f;
    background: var(--dropdown-background-color)
}

.floaty-message:popover-open {
    opacity: 1;
    transform: translateY(0)
}

.floaty-message.fade-out {
    opacity: 0;
    transform: translateY(-.5rem)
}

.floaty-message svg {
    stroke: var(--dropdown-background-color);
    fill: var(--positive-color)
}

.exchange-list__blockchain-and-version-selection__wrapper {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2.4rem
}

.buy-button-exchange {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: .7rem .8rem;
    padding: .8rem 0;
    min-width: 0;
    max-width: 100%;
    text-decoration: none
}

.buy-button-exchange__prepend {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-color)
}

.buy-button-exchange__profile {
    grid-area: logo;
    flex-shrink: 0;
    width: 3.8rem;
    height: 3.8rem;
    padding: .1rem;
    border: .1rem solid var(--border-color);
    border-radius: .8rem;
    background-color: var(--background-color);
    position: relative
}

.buy-button-exchange__profile-wrapper {
    display: grid;
    grid-template-areas: "logo name" "logo description";
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0 1rem;
    flex: 1 1 0;
    min-width: 0
}

.buy-button-exchange__logo-wrapper {
    display: block;
    width: 3.4rem;
    height: 3.4rem;
    border: .2rem solid #fff;
    border-radius: .6rem;
    overflow: hidden;
    background: #fff
}

.buy-button-exchange__logo-wrapper img {
    width: 3rem;
    height: 3rem
}

.buy-button-exchange__name {
    grid-area: name;
    display: block;
    width: 100%;
    min-width: 0;
    font-weight: 600;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.buy-button-exchange__description {
    grid-area: description;
    order: 3;
    display: block;
    width: 100%;
    min-width: 0;
    margin-left: auto;
    font-size: 1.3rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.buy-button-exchange__button {
    order: 2;
    margin-left: auto
}

:root.dark-theme .buy-button-exchange__profile {
    border-color: var(--background-color)
}

@media(prefers-color-scheme:dark) {
    :root:not(.light-theme) .buy-button-exchange__profile {
        border-color: var(--background-color)
    }
}

.download-app__card {
    padding: 3rem 2rem 5rem;
    background-color: var(--background-color);
    border: .1rem solid var(--border-color);
    border-radius: .5rem;
    text-align: center
}

.download-app__title {
    font-size: 1.8rem;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: .8rem;
    color: var(--text-color)
}

.download-app__subtitle {
    font-size: 1.4rem;
    font-weight: 500;
    margin: 0 0 2.5rem;
    color: var(--text-color);
    line-height: 1.5
}

.download-app__buttons {
    display: flex;
    flex-direction: column;
    gap: 2rem
}

.download-app__button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1.4rem 1.6rem;
    border: .1rem solid var(--border-color);
    border-radius: .5rem;
    text-decoration: none;
    color: var(--text-color);
    background-color: var(--background-color);
    transition: border-color .12s ease-out, box-shadow .12s ease-out
}

.download-app__button:hover {
    border-color: var(--text-color)
}

.download-app__button[aria-disabled=true] {
    pointer-events: none;
    box-shadow: none
}

.download-app__button--ghost {
    background-color: var(--disabled-background-color);
    border-color: var(--border-color);
    color: var(--placeholder-color)
}

.download-app__icon {
    width: 2.6rem;
    height: 2.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0
}

.download-app__icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
    stroke: none
}

.download-app__content {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap
}

.download-app__platform {
    font-size: 1.4rem;
    font-weight: 500
}

.download-app__rating {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--text-color)
}

.download-app__rating svg {
    fill: #fbbf24;
    stroke: none;
    flex-shrink: 0
}

.download-app__soon {
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--placeholder-color)
}

.list-your-coin-section {
    border: .1rem solid var(--border-color);
    border-radius: .4rem;
    background: var(--background-color);
    padding: 2.5rem
}

.list-your-coin-section__title {
    margin: 0;
    color: var(--text-color);
    font-size: 1.6rem;
    line-height: 1.2;
    font-weight: 700;
    text-wrap: balance
}

.list-your-coin-section__description {
    margin: 2.2rem 0 0;
    color: var(--text-color);
    font-size: 1.4rem;
    line-height: 1.3;
    max-width: 62rem
}

.list-your-coin-section__button {
    margin-top: 3rem;
    width: 100%;
    min-height: 3.8rem;
    border: 0;
    border-radius: .3rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    background: var(--text-color);
    color: var(--background-color);
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.2;
    transition: background-color .12s ease-out
}

.list-your-coin-section__button:hover {
    background: var(--secondary-text-color)
}

.list-your-coin-section__button:focus-visible {
    outline: .2rem solid var(--focus-color);
    outline-offset: .2rem
}

.list-your-coin-section__button svg {
    width: 1rem;
    height: 1rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    flex-shrink: 0
}

.wallet-and-explorer-wrapper {
    display: flex;
    gap: 1rem;
    margin: 2rem 0
}

.wallet-and-explorer-button {
    display: flex;
    appearance: none;
    background: none;
    align-items: center;
    justify-content: space-between;
    padding: .5rem 1.4rem .5rem 1.8rem;
    margin: 0;
    gap: 0;
    min-width: 11rem;
    flex-grow: 1;
    max-width: 50%;
    height: 4.2rem;
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--text-color);
    border: .1rem solid var(--border-color);
    border-radius: .3rem;
    cursor: pointer;
    transition: border-color .1s ease-out;
    user-select: none;
    -webkit-user-select: none;
    text-decoration: none;
    flex-shrink: 0;
    white-space: nowrap
}

.wallet-and-explorer-button__icon-wrapper {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    white-space: nowrap
}

.wallet-and-explorer-button__icon-wrapper svg {
    margin-right: .8rem
}

*,
*:after,
*:before {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    touch-action: manipulation
}

:root {
    color-scheme: light dark;
    --primary-color: #0060ff;
    --primary-background-color: rgba(0, 96, 255, .07);
    --negative-color: #eb0a25;
    --negative-doughnut-background-color: rgba(235, 10, 37, .16);
    --negative-border-color: rgba(235, 10, 37, .15);
    --negative-background-area-color: rgba(235, 10, 37, .05);
    --negative-chart-line-color: #eb0a25;
    --secondary-negative-color: #d32d41;
    --negative-background-color: rgba(231, 0, 28, .07);
    --medium-negative-background-color: #f0475c;
    --hover-medium-negative-background-color: #e7001c;
    --positive-color: #008740;
    --secondary-positive-color: #009547;
    --positive-doughnut-background-color: rgba(0, 158, 75, .16);
    --positive-background-color: rgba(0, 158, 75, .07);
    --positive-border-color: rgba(0, 158, 75, .15);
    --medium-positive-background-color: #339f66;
    --hover-medium-positive-background-color: #007a3a;
    --neutral-color: #8ba7d3;
    --neutral-background-color: rgba(0, 98, 251, .03);
    --neutral-border-color: rgba(0, 98, 251, .15);
    --neutral-fear-and-greed-background-color: rgba(246, 191, 25, .08);
    --neutral-fear-and-greed-border-color: rgba(246, 191, 25, .3);
    --background-color: #fff;
    --background-color-rgb: 255, 255, 255;
    --secondary-background-color: #e7f0ff;
    --warning-color: #db6c00;
    --warning-doughnut-background-color: rgba(219, 108, 0, .16);
    --warning-background-color: rgba(219, 108, 0, .07);
    --text-color: #002358;
    --tooltip-hover-background-color: #002358;
    --tooltip-hover-text-color: #ffffff;
    --badge-success-color: #008740;
    --badge-success-background-color: #00874014;
    --badge-success-border-color: #00874029;
    --secondary-text-color: #264d89;
    --border-color: #d8e7ff;
    --profile-border-color: #d8e7ff;
    --dropdown-background-color: #fff;
    --hover-background-color: #f1f6ff;
    --active-background-color: #e7f0ff;
    --disabled-color: #aac5ee;
    --disabled-background-color: #f7faff;
    --placeholder-color: #547dbb;
    --sort-arrow-color: #a9c6f5;
    --sort-arrow-active-color: #264d89;
    --favorite-heart-color: #002358;
    --box-shadow: 0 .2rem 1rem 0 rgba(0, 43, 187, .12);
    --highlight-border: #0060ff;
    --highlight-background: rgba(0 98 255 / 10%);
    --badge-neutral-color: #002358;
    --watermark-gradient-color-1: #eff5fe;
    --watermark-gradient-color-2: #dde6f4;
    --focus-color: #0166ff4f;
    --dim-positive-background-color: color-mix(in srgb, var(--medium-positive-background-color) 45%, transparent);
    --dim-negative-background-color: color-mix(in srgb, var(--medium-negative-background-color) 45%, transparent);
    --apple-logo-color: #000
}

:root.dark-theme {
    --primary-color: #2175ff;
    --primary-background-color: rgba(33, 117, 255, .13);
    --negative-color: #ff324b;
    --negative-doughnut-background-color: rgba(255, 50, 75, .16);
    --negative-background-area-color: rgba(255, 28, 56, .13);
    --negative-chart-line-color: #ff1c38;
    --secondary-negative-color: #ff7a8b;
    --negative-background-color: rgba(255, 28, 56, .2);
    --medium-negative-background-color: #ff3750;
    --hover-medium-negative-background-color: #ff697c;
    --positive-color: #01d263;
    --secondary-positive-color: #4de092;
    --positive-doughnut-background-color: rgba(1, 210, 99, .16);
    --positive-background-color: rgba(1, 210, 99, .13);
    --medium-positive-background-color: #16c86a;
    --hover-medium-positive-background-color: #5bdb97;
    --neutral-color: #91b3eb;
    --neutral-background-color: rgba(0, 98, 251, .03);
    --neutral-border-color: rgba(0, 98, 251, .15);
    --background-color: #01112b;
    --background-color-rgb: 1, 17, 43;
    --secondary-background-color: #000a1a;
    --warning-color: #ffb412;
    --warning-doughnut-background-color: rgba(219, 108, 0, .16);
    --warning-background-color: rgba(255, 180, 18, .13);
    --text-color: #fff;
    --tooltip-hover-background-color: #ffffff;
    --tooltip-hover-text-color: #002358;
    --badge-success-color: #01d263;
    --badge-success-background-color: #01d26314;
    --badge-success-border-color: #01d26329;
    --secondary-text-color: #c6ddff;
    --border-color: #1e375d;
    --profile-border-color: #01112b;
    --dropdown-background-color: #0a1f42;
    --hover-background-color: #01122e;
    --active-background-color: #0f2549;
    --disabled-color: #7392bd;
    --disabled-background-color: #041737;
    --placeholder-color: #809cc6;
    --sort-arrow-color: #48699b;
    --sort-arrow-active-color: #c6ddff;
    --favorite-heart-color: #ffffff;
    --box-shadow: 0 1px 10px rgba(0, 7, 30, .45);
    --highlight-border: #ffffff;
    --highlight-background: rgba(255 255 255 / 10%);
    --badge-neutral-color: #809cc6;
    --watermark-gradient-color-1: #243b5f;
    --watermark-gradient-color-2: #1a2f50;
    --focus-color: #68a2ff82;
    --dim-positive-background-color: color-mix(in srgb, var(--medium-positive-background-color) 50%, transparent);
    --dim-negative-background-color: color-mix(in srgb, var(--medium-negative-background-color) 50%, transparent);
    --apple-logo-color: #fff
}

:root.dark-theme .hide-on-dark-theme {
    display: none
}

@media(prefers-color-scheme:dark) {
    :root:not(.light-theme) {
        --primary-color: #2175ff;
        --primary-background-color: rgba(33, 117, 255, .13);
        --negative-color: #ff324b;
        --negative-doughnut-background-color: rgba(255, 50, 75, .16);
        --negative-background-area-color: rgba(255, 28, 56, .13);
        --negative-chart-line-color: #ff1c38;
        --secondary-negative-color: #ff7a8b;
        --negative-background-color: rgba(255, 28, 56, .2);
        --medium-negative-background-color: #ff3750;
        --hover-medium-negative-background-color: #ff697c;
        --positive-color: #01d263;
        --secondary-positive-color: #4de092;
        --positive-doughnut-background-color: rgba(1, 210, 99, .16);
        --positive-background-color: rgba(1, 210, 99, .13);
        --medium-positive-background-color: #16c86a;
        --hover-medium-positive-background-color: #5bdb97;
        --neutral-color: #91b3eb;
        --neutral-background-color: rgba(0, 98, 251, .03);
        --neutral-border-color: rgba(0, 98, 251, .15);
        --background-color: #01112b;
        --background-color-rgb: 1, 17, 43;
        --secondary-background-color: #000a1a;
        --warning-color: #ffb412;
        --warning-doughnut-background-color: rgba(219, 108, 0, .16);
        --warning-background-color: rgba(255, 180, 18, .13);
        --text-color: #fff;
        --tooltip-hover-background-color: #ffffff;
        --tooltip-hover-text-color: #002358;
        --badge-success-color: #01d263;
        --badge-success-background-color: #01d26314;
        --badge-success-border-color: #01d26329;
        --secondary-text-color: #c6ddff;
        --border-color: #1e375d;
        --profile-border-color: #01112b;
        --dropdown-background-color: #0a1f42;
        --hover-background-color: #01122e;
        --active-background-color: #0f2549;
        --disabled-color: #7392bd;
        --disabled-background-color: #041737;
        --placeholder-color: #809cc6;
        --sort-arrow-color: #48699b;
        --sort-arrow-active-color: #c6ddff;
        --favorite-heart-color: #ffffff;
        --box-shadow: 0 1px 10px rgba(0, 7, 30, .45);
        --highlight-border: #ffffff;
        --highlight-background: rgba(255 255 255 / 10%);
        --badge-neutral-color: #809cc6;
        --watermark-gradient-color-1: #243b5f;
        --watermark-gradient-color-2: #1a2f50;
        --focus-color: #68a2ff82;
        --dim-positive-background-color: color-mix(in srgb, var(--medium-positive-background-color) 50%, transparent);
        --dim-negative-background-color: color-mix(in srgb, var(--medium-negative-background-color) 50%, transparent);
        --apple-logo-color: #fff
    }

    :root:not(.light-theme) .hide-on-dark-theme {
        display: none
    }
}

:root.light-theme .hide-on-light-theme {
    display: none
}

@media(prefers-color-scheme:light) {
    :root:not(.dark-theme) .hide-on-light-theme {
        display: none
    }
}

favorite-coins-section {
    display: contents
}

favorite-undo {
    color: var(--text-color);
    text-decoration: underline;
    text-underline-offset: .3rem;
    text-decoration-thickness: .1rem;
    cursor: pointer;
    transition: color .1s ease-out
}

favorite-undo:hover {
    color: var(--secondary-text-color)
}

html,
body {
    min-height: 100%;
    width: 100%;
    min-width: 320px;
    -webkit-tap-highlight-color: transparent;
    font-size: .625rem;
    overflow-x: clip
}

body {
    margin: 0;
    padding: 0;
    font-family: Montserrat Variable, Helvetica, system-ui, sans-serif;
    font-size: 1.4rem;
    color: var(--text-color);
    font-weight: 500;
    line-height: 1.4;
    text-size-adjust: none;
    background-color: var(--background-color)
}

button,
input {
    font-family: Montserrat Variable, Helvetica, system-ui, sans-serif
}

.htmx-request .htmx-indicator {
    transition: none !important
}

a {
    text-decoration: underline;
    text-underline-offset: .3rem;
    text-decoration-thickness: .1rem;
    color: currentColor
}

p {
    line-height: 1.8
}

hr {
    border: 0;
    height: .1rem;
    background-color: var(--border-color);
    margin: .9rem 0
}

.section {
    position: relative;
    padding: 2.2rem 0;
    scroll-margin-top: 5.4rem
}

.section--no-bottom-padding {
    padding-bottom: 0
}

.section--highlighter:after {
    z-index: 4;
    pointer-events: none;
    content: "";
    position: absolute;
    bottom: 0;
    left: -2rem;
    width: calc(100% + 4rem);
    height: 100%;
    border: .1rem solid var(--highlight-border);
    background-color: var(--highlight-background);
    border-radius: 1rem;
    animation: fadeOut 1s ease-in forwards
}

.content__aside .section {
    padding: 1.7rem 0
}

.sub-pagination-and-download {
    display: inline-flex;
    gap: 1rem
}

.title-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 2.4rem;
    gap: .2rem 1rem
}

.title-section--wrappable {
    flex-wrap: wrap
}

.title-section .hero,
.title-section .sub-title,
.title-section .title {
    margin-bottom: 0
}

.title-section__hyperlink {
    color: var(--text-color);
    font-weight: 600;
    margin-top: .2rem;
    text-align: right
}

.title-section__hyperlink:hover {
    color: var(--secondary-text-color)
}

.title-sub-section {
    display: flex;
    gap: 1rem
}

.page-title {
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--text-color);
    margin: 0 0 -.5rem .3rem
}

.title {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .4rem .8rem;
    flex-wrap: wrap;
    font-size: 3rem;
    font-weight: 700;
    color: var(--text-color);
    margin: -.5rem 0 1.4rem
}

.title--medium {
    font-size: 2rem
}

.title--center {
    justify-content: center;
    text-align: center
}

.paragraph {
    color: var(--text-color);
    margin: 1rem 0 2rem
}

.sub-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-color);
    margin: 0 0 1.8rem
}

.sub-title--flex {
    display: flex;
    align-items: center;
    gap: 1.5rem
}

.sub-title .alert {
    font-weight: 500;
    font-size: 1.4rem;
    margin: 0 0 -.3rem
}

.sub-title-split {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 1.8rem
}

.sub-title-split .sub-title {
    margin: 0
}

.country-flag {
    display: block;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 1.6rem;
    overflow: hidden;
    flex-shrink: 0
}

.country-flag img {
    display: block
}

.clickable-row {
    cursor: pointer
}

.preferred-currency {
    display: block;
    min-width: 1.8rem;
    height: 1.8rem;
    border-radius: 1.8rem;
    border: .1rem solid var(--border-color);
    background: var(--hover-background-color);
    color: var(--text-color);
    font-size: 1.1rem;
    text-align: center;
    font-weight: 500;
    padding: .1rem .4rem;
    flex-shrink: 0
}

.content__aside .sub-title {
    font-size: 1.8rem
}

.title-h3 {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-color);
    margin: 0;
    text-wrap: balance
}

.hidden {
    display: none
}

.no-result {
    color: var(--secondary-text-color);
    white-space: wrap
}

.no-result .read-more {
    color: var(--text-color);
    font-weight: 600
}

.read-more {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 600
}

.read-more svg {
    fill: var(--text-color)
}

.scrollable {
    overflow-y: hidden;
    overflow-x: scroll;
    overscroll-behavior-x: contain;
    max-width: 100vw;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none
}

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

.positive {
    color: var(--positive-color)
}

.negative {
    color: var(--negative-color)
}

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

.align-center {
    text-align: center
}

.strong {
    font-weight: 600 !important
}

.sign-in-button {
    display: inline-block;
    background: var(--text-color);
    color: var(--background-color);
    border-radius: .3rem;
    border: 0;
    padding: .8rem 1.5rem 1rem;
    font-size: 1.3rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background .1s ease-out
}

.sign-in-button:hover {
    background: var(--secondary-text-color)
}

.sign-in-button__toast-notification {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%
}

.sign-in-button svg {
    vertical-align: middle;
    margin: -.2rem .2rem 0 0;
    stroke: currentColor
}

.reference-link:hover {
    color: var(--secondary-text-color);
    text-decoration-color: var(--secondary-text-color)
}

.reference {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 10rem;
    text-align: right
}

.reference:is(a):hover {
    color: var(--secondary-text-color);
    text-decoration-color: var(--secondary-text-color)
}

.reference--underline:is(a) {
    text-decoration: underline
}

.versus {
    display: inline-flex;
    height: .4rem;
    min-width: 4.4rem;
    border-radius: .4rem;
    overflow: hidden;
    background-color: var(--secondary-background-color);
    vertical-align: middle
}

.versus__part--positive {
    background-color: var(--positive-color);
    border-right: .1rem solid var(--background-color)
}

.versus__part--negative {
    background-color: var(--negative-color);
    border-left: .1rem solid var(--background-color)
}

.alert {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: 1.3rem;
    font-weight: 600;
    text-decoration: none
}

.alert--warning {
    color: var(--warning-color)
}

.alert--success {
    color: var(--positive-color)
}

.alert--error {
    color: var(--negative-color)
}

.alert svg {
    stroke: currentColor;
    fill: currentColor;
    flex-shrink: 0;
    margin: -.2rem 0 0
}

.button {
    display: flex;
    gap: .6rem;
    appearance: none;
    background: none;
    text-decoration: none;
    align-items: center;
    padding: .5rem 1.3rem;
    height: 4.2rem;
    flex-shrink: 0;
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--text-color);
    border: .1rem solid var(--border-color);
    background-color: transparent;
    border-radius: .3rem;
    cursor: pointer;
    transition: border-color .1s ease-out, background-color .1s ease-out;
    user-select: none;
    -webkit-user-select: none
}

.button--small {
    font-size: 1.3rem;
    font-weight: 600;
    min-width: 0;
    height: 3.4rem
}

.button--semibold {
    font-weight: 600
}

.button--wide {
    justify-content: center;
    flex-grow: 100
}

.button--fluid {
    flex-grow: 1
}

.button--compact {
    width: fit-content
}

.button--notification {
    position: relative
}

.button--notification:before {
    content: "";
    position: absolute;
    top: .5rem;
    right: .5rem;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background-color: var(--primary-color)
}

.button-trade {
    font-size: 1.4rem;
    font-weight: 600;
    background: var(--text-color);
    color: var(--background-color);
    border: .1rem solid var(--text-color);
    justify-content: center;
    transition: background .1s ease-out, border-color .1s ease-out
}

.button-trade:hover {
    background: var(--secondary-text-color);
    border: .1rem solid var(--secondary-text-color)
}

@media(hover:hover) {
    .button:hover {
        border-color: var(--text-color)
    }
}

.button:focus-visible {
    outline-color: var(--secondary-text-color);
    border-color: var(--secondary-text-color);
    outline-width: .1rem;
    outline-offset: 0;
    outline-style: solid;
    transition: none
}

.button.dropdown-active {
    border-color: var(--text-color)
}

.button:active {
    border-color: var(--text-color);
    background-color: var(--active-background-color)
}

.button--primary {
    background: var(--text-color);
    color: var(--background-color);
    border: .1rem solid var(--text-color)
}

.button--primary:hover,
.button--primary:active {
    background: var(--secondary-text-color);
    border: .1rem solid var(--secondary-text-color)
}

.button--active {
    border-color: var(--text-color)
}

.button svg {
    stroke: currentColor
}

.button svg.fill {
    fill: currentColor
}

.button__right {
    margin-left: auto
}

.button:disabled {
    opacity: .5;
    cursor: not-allowed;
    pointer-events: none
}

.button--center {
    justify-content: center
}

.button--full-width {
    width: 100%
}

.link {
    background: transparent;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    text-decoration: underline;
    cursor: pointer
}

.link:focus-visible {
    outline: .2rem solid var(--focus-color);
    outline-offset: .3rem;
    border-radius: .3rem
}

.display-contents {
    display: contents
}

.button-group {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: 2rem
}

.ads-free-message {
    margin-bottom: 1rem;
    color: var(--text-color);
    font-weight: 600
}

.ads-free-message a {
    font-weight: 500;
    margin-left: .5rem;
    text-underline-offset: .2rem;
    text-decoration-thickness: .1rem;
    cursor: pointer;
    transition: color .1s ease-out
}

.ads-free-message a:hover {
    color: var(--secondary-text-color)
}

.cm__btn.cm__btn--secondary[data-role=necessary] {
    display: none !important
}

@media(min-width:1366px) {
    .hidden-desktop {
        display: none
    }
}

@media(max-width:1365px)and (min-width:1180px) {
    .hidden-tablet-landscape {
        display: none
    }
}

@media(max-width:1179px)and (min-width:601px) {
    .hidden-tablet-portrait {
        display: none
    }
}

@media(max-width:1179px) {
    .hidden-from-tablet-portrait {
        display: none
    }
}

@media(max-width:1179px)and (min-width:769px) {
    .hidden-from-laptop-1179px-769px {
        display: none
    }
}

@media(max-width:768px)and (min-width:456px) {
    .hidden-from-tablet-768px-456px {
        display: none
    }
}

@media(max-width:600px) {
    .title-section {
        margin: 0 0 2rem
    }

    .title-section .sub-title,
    .title-section .title {
        margin: auto 0
    }

    .title-section--wrappable .sub-title {
        margin: 0 0 1.8rem
    }

    .title-section--listing {
        margin: 0 0 2.4rem
    }

    .title-section--no-padding {
        padding: 0
    }

    .title-section--mobile-align-vertically {
        flex-direction: column;
        align-items: first baseline
    }

    .title-section--mobile-align-vertically .title {
        margin-bottom: 2rem
    }

    .title-sub-section {
        justify-content: space-between;
        width: 100%
    }

    .align-right-mobile {
        text-align: right
    }

    .hidden-mobile {
        display: none
    }

    .title,
    .content__aside .sub-title {
        font-size: 2rem
    }

    svg.no-margin-mobile {
        margin: 0
    }

    .page-title {
        font-size: 1.2rem
    }
}

@font-face {
    font-family: Montserrat Variable;
    font-style: normal;
    font-display: block;
    font-weight: 100 900;
    src: url(/static/montserrat-latin-wght-normal.l_AIctKy.woff2) format("woff2-variations");
    unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}