/* Slider view trading date */
.market-ticker{
    width:100%;
    height:42px;
    background:#111;
    color:#fff;
    overflow:hidden;
    display:flex;
    align-items:center;
    border-bottom:1px solid #262626;
    position:relative;
    z-index:10;
}

.ticker-track{
    display:flex;
    align-items:center;
    white-space:nowrap;
    animation:scrollTicker 38s linear infinite;
}

.market-ticker:hover .ticker-track{
    animation-play-state:paused;
}

@keyframes scrollTicker{
    from{
        transform:translateX(0);
    }
    to{
        transform:translateX(-50%);
    }
}

.ticker-item{
    display:flex;
    align-items:center;
    gap:9px;
    padding:0 22px;
    height:42px;
    border-right:1px solid rgba(255,255,255,.14);
    font-size:14px;
    font-weight:600;
}

.ticker-icon{
    width:24px;
    height:24px;
    border-radius:50%;
    background:#0076bd;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:13px;
    flex:0 0 24px;
}

.ticker-icon .fa-bitcoin{
    color:#fff;
}

.ticker-item:has(.fa-bitcoin) .ticker-icon{
    background:#f7931a;
}

.ticker-item:has(.fa-ethereum) .ticker-icon{
    background:#627eea;
}

.text-icon{
    font-size:15px;
    background:#1f2937;
}

.ticker-price{
    color:#f4f4f4;
}

.ticker-up{
    color:#00d084;
    font-weight:700;
}

.ticker-down{
    color:#ff4d4d;
    font-weight:700;
}

@media(max-width:575px){
    .market-ticker{
        height:38px;
    }

    .ticker-item{
        height:38px;
        padding:0 16px;
        font-size:12px;
        gap:7px;
    }

    .ticker-icon{
        width:21px;
        height:21px;
        font-size:11px;
    }
}



/* Table view trading date */
.market-table-section{
    background:#f4f7fb;
}

.market-table-box{
    background:#061f40;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 12px 30px rgba(0,0,0,.18);
    border:1px solid rgba(255,255,255,.12);
}

.market-table-header{
    background:linear-gradient(135deg,#062f5d,#006fbd);
    color:#fff;
    padding:18px 22px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    text-align:left;
}

.market-table-header h3{
    font-size:20px;
    margin:0;
}

.market-table-header span{
    font-size:13px;
    color:#dbeeff;
}

.market-table-responsive{
    width:100%;
    overflow-x:auto;
}

.market-table{
    width:100%;
    border-collapse:collapse;
    min-width:980px;
    color:#fff;
    background:#0b1420;
}

.market-table th{
    background:#101820;
    color:#cfd8e3;
    font-size:13px;
    font-weight:600;
    padding:15px 12px;
    text-align:right;
    border-bottom:1px solid rgba(255,255,255,.15);
}

.market-table th:first-child{
    text-align:left;
}

.market-table td{
    padding:13px 12px;
    font-size:14px;
    text-align:right;
    border-bottom:1px solid rgba(255,255,255,.12);
    white-space:nowrap;
}

.market-table td:first-child{
    text-align:left;
    font-weight:600;
}

.market-table tbody tr{
    transition:.3s;
}

.market-table tbody tr:hover:not(.market-category){
    background:rgba(0,111,189,.18);
}

.market-category td{
    background:#1c2632;
    color:#fff;
    font-weight:700;
    text-align:left !important;
    font-size:13px;
    letter-spacing:.4px;
}

.market-badge{
    width:26px;
    height:26px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    color:#fff;
    font-size:10px;
    font-weight:700;
    margin-right:8px;
    vertical-align:middle;
}

.badge-red{background:#e91e63;}
.badge-blue{background:#0097d7;}
.badge-cyan{background:#00a8e8;}
.badge-purple{background:#355fa8;}
.badge-dark{background:#194a80;}
.badge-pink{background:#8e245c;}
.badge-gray{background:#4b5563;}

.up{
    color:#00d084 !important;
    font-weight:700;
}

.down{
    color:#ff4d5a !important;
    font-weight:700;
}

.market-muted{
    color:#9ca3af;
    font-size:13px;
}

@media(max-width:575px){
    .market-table-header{
        flex-direction:column;
        align-items:flex-start;
    }

    .market-table th,
    .market-table td{
        padding:11px 10px;
        font-size:12px;
    }
}