/* sector block */
.sector-block{
    margin-bottom:20px;
}

/* sector title */
.sector-title{
    margin-bottom:6px;
    font-weight:600;
    font-size:14px;
}

.flex-start{
    justify-content: flex-start !important;
    width:100%;
}
/* container for all sectors */
.index-stock{
    width:100%;
}

/* horizontal stock row */
.trend-stock{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    grid-gap: 5px;
    font-size: 0.8em;
    justify-content: space-between;
    overflow-x:auto;
    padding:5px 0;
    scroll-behavior:smooth;
    scrollbar-width:none;
}

.trend-stock::-webkit-scrollbar{
    display:none;
}

/* stock card */
.trend-item{
    flex:0 0 auto;
    display:flex;
    flex-direction:column;
    padding: 2%;
    border:1px solid #e5e7eb;
    overflow:hidden;
}

/* top text row */
.trend-item .flex.flex-start{
    display:flex;
    justify-content:space-between;
    margin-bottom:4px;
}

/* chart */
.trend-chart{
    width:100%;
    height:80px;
    display:block;
    margin-bottom:4px;
}

/* bottom price row */
.trend-item .flex.space-between{
    display:flex;
    justify-content:space-between;
    font-size:10px;
}

/* link style */
.trend-stock a{
    text-decoration:none;
    color:var(--color-black);
}

/* mobile */
@media screen and (max-width:768px){

.trend-stock{
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));

}


.trend-chart{
    height:60px;
}

}

.tf-btn{
    border:1px solid #d1d5db;
    background:#fff;
    padding:2px 6px;
    font-size:11px;
    line-height:1.2;
    cursor:pointer;
    border-radius:3px;
}

.tf-btn:hover{
    background:#f3f4f6;
}

.tf-btn.active{
    background:#2563eb;
    border-color:#2563eb;
    color:#fff;
}