.market-tooltip{

    position:absolute;

    width:min(320px,calc(100vw - 32px));

    min-width:240px;

    max-width:320px;

    padding:16px;

    border-radius:16px;

    background:rgba(7,16,28,.96);

    border:1px solid rgba(111,232,255,.18);

    backdrop-filter:blur(14px);

    box-shadow:

        0 18px 50px rgba(0,0,0,.42),

        0 0 24px rgba(111,232,255,.06),

        inset 0 1px 0 rgba(255,255,255,.05);

    pointer-events:none;

    opacity:0;

    transform:

        translateY(10px)

        scale(.96);

    transform-origin:

        center left;

    transition:

        opacity .18s ease,

        transform .20s cubic-bezier(.22,1,.36,1),

        left .06s linear,

        top .06s linear,

        box-shadow .25s ease;

    z-index:999;

}

.market-tooltip-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:14px;

}

.market-tooltip-date{

    font-size:.78rem;

    letter-spacing:.16em;

    font-weight:700;

    color:#FFFFFF;

    text-transform:uppercase;

}

.market-tooltip-score{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    margin-bottom:22px;

}

.market-tooltip-value{

    font-size:3rem;

    line-height:.95;

    font-weight:800;

    color:#6FE8FF;

    text-shadow:

        0 0 22px

        rgba(111,232,255,.18);

}

.market-tooltip-label{

    margin-top:4px;

    font-size:.72rem;

    letter-spacing:.18em;

    text-transform:uppercase;

    color:rgba(255,255,255,.42);

}

.market-tooltip-status{

    margin-top:10px;

    font-size:.78rem;

    letter-spacing:.12em;

    text-transform:uppercase;

    color:#6FE8FF;

    font-weight:700;

}

.market-tooltip-divider{

    height:1px;

    margin:12px 0;

    background:

    rgba(255,255,255,.06);

}

.market-tooltip-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    margin-bottom:14px;

}

.market-tooltip-value-group{

    flex:1;

    display:flex;

    justify-content:flex-end;

    align-items:center;

}

.market-tooltip-dot{

    width:8px;

    height:8px;

    border-radius:50%;

    flex-shrink:0;

    background:currentColor;

    box-shadow:

        0 0 8px currentColor,

        0 0 14px currentColor;

}

.market-tooltip-title{

    flex:0 0 92px;

    color:

    rgba(255,255,255,.46);

    font-size:.73rem;

    font-weight:600;

    letter-spacing:.12em;

    text-transform:uppercase;

}

.market-tooltip-text{

    font-size:.82rem;

    font-weight:700;

    letter-spacing:.01em;

    transition:

        color .25s ease;

}


.market-tooltip-pill{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    width:auto;

    min-width:92px;

    max-width:none;

    padding:7px 16px;

    border-radius:999px;

    font-size:.64rem;

    font-weight:700;

    letter-spacing:.04em;

    line-height:1;

    white-space:nowrap;

    text-transform:uppercase;

    transition:

        all .25s ease;

}

.tooltip-green{

    color:#4FFFB4;

    background:rgba(79,255,180,.10);

    border:1px solid rgba(79,255,180,.18);

    box-shadow:0 0 16px rgba(79,255,180,.12);

}

.tooltip-cyan{

    color:#6FE8FF;

    background:rgba(111,232,255,.10);

    border:1px solid rgba(111,232,255,.18);

    box-shadow:0 0 16px rgba(111,232,255,.12);

}

.tooltip-yellow{

    color:#FFD15A;

    background:rgba(255,209,90,.10);

    border:1px solid rgba(255,209,90,.18);

    box-shadow:0 0 16px rgba(255,209,90,.12);

}

.tooltip-orange{

    color:#FF9A57;

    background:rgba(255,154,87,.10);

    border:1px solid rgba(255,154,87,.18);

    box-shadow:0 0 16px rgba(255,154,87,.12);

}

.tooltip-red{

    color:#FF6868;

    background:rgba(255,104,104,.10);

    border:1px solid rgba(255,104,104,.18);

    box-shadow:0 0 16px rgba(255,104,104,.12);

}

.tooltip-purple{

    color:#A78BFA;

    background:rgba(167,139,250,.10);

    border:1px solid rgba(167,139,250,.18);

    box-shadow:0 0 16px rgba(167,139,250,.12);

}

.tooltip-white{

    color:#FFFFFF;

    background:rgba(255,255,255,.08);

    border:1px solid rgba(255,255,255,.14);

    box-shadow:0 0 16px rgba(255,255,255,.06);

}

/* ==========================================
   TABLET
========================================== */

@media (max-width:1024px){

    .market-tooltip{

        max-width:280px;

        padding:16px;

    }

    .market-tooltip-value{

        font-size:2.5rem;

    }

    .market-tooltip-row{

        gap:14px;

        margin-bottom:12px;

    }

    .market-tooltip-pill{

        min-width:76px;

        padding:5px 10px;

        font-size:.68rem;

    }

    .market-tooltip-date{

        font-size:.72rem;

    }

}

/* ==========================================
   MOBILE
========================================== */

@media (max-width:767px){

    .market-tooltip{

      width:min(360px,calc(100vw - 24px));

       max-width:360px;

        max-width:none;

        min-width:auto;

        padding:16px;

        border-radius:18px;

    }

    .market-tooltip-value{

        font-size:2rem;

    }

    .market-tooltip-status{

        font-size:.72rem;

    }

.market-tooltip-row{

    display:grid;

    grid-template-columns:110px 1fr;

    align-items:center;

    column-gap:14px;

    row-gap:0;

    margin-bottom:14px;

    }

    .market-tooltip-title{

        font-size:.66rem;

        letter-spacing:.10em;

    }

    .market-tooltip-pill{

        width:auto;

        min-width:88px;

        max-width:170px;

       justify-content:center;

       padding:7px 14px;

        min-width:0;

        padding:8px 12px;

        font-size:.74rem;

    }

}

/* ==========================================
   SMALL PHONES
========================================== */

@media (max-width:420px){

    .market-tooltip{

        padding:16px;

    }

    .market-tooltip-value{

        font-size:2rem;

    }

    .market-tooltip-divider{

        margin:14px 0;

    }

    .market-tooltip-pill{

        padding:7px 10px;

        font-size:.70rem;

    }

}