.gainerslistcontainer {
width: 100%;
margin: auto;
margin-bottom: 1rem;
}

.gainerslisttitle {
text-align: center;
margin-bottom: 25px;
font-size: 30px;
font-weight: bold;
color: #222;
}

.gainerslistcontrols {
display: flex;
justify-content: space-between;
gap: 15px;
margin-bottom: 20px;
flex-wrap: wrap;
}

.gainerslistsearch {
flex: 1;
min-width: 250px;
padding: 12px;
border: 1px solid #ddd;
border-radius: 8px;
font-size: 15px;
}

.gainerslisttabs {
display: flex;
gap: 10px;
}

.gainerslisttab {
padding: 12px 22px;
cursor: pointer;
border: none;
border-radius: 8px;
font-weight: bold;
background: #ddd;
}


.gainersliststock-row {
display: grid;
grid-template-columns: repeat(10, minmax(0, 1fr));
align-items: center;
justify-content: center;
padding:0.2rem;
}

.gainersliststock-row:hover {
background: #ddd;
}

.gainersliststock-row.header {
background: #0d47a1;
height:3rem;
margin-bottom:0;
    
}

.gainerslistcontent {
cursor: pointer;
}

.gainersliststock-container {
width: 100%;
border-collapse: collapse;
overflow: scroll;
scrollbar-width: none;
border-radius: 8px;
background: white;
}

.gainersliststock-row div {
padding: 14px;
text-align: center;
font-size: 1rem;
min-height: 16px;
min-width: 0;
white-space: normal;
}

.gainerslistvolume {
color: #777;
}

.active {
background-color: #ff6f91;
}

.positive {
color: green;
}

.negative {
color: red;
}


@media (max-width: 768px) {

.gainerslisttitle {
font-size: 16px;
}

.gainerslistsearch {
padding: 6px;
font-size: 10px;
}

.gainerslistcontrols {
flex-direction: column;
}

.gainerslisttabs {
width: 100%;
}

.gainerslisttab {
flex: 1;
font-size: 0.5rem;
padding: 4px 6px;
}

.gainersliststock-container {
width: 100%;
background-color: white;
}

.gainersliststock-row {
grid-template-columns: repeat(10, 60px);
gap:0px;
min-width:600px
}

.gainersliststock-row div {
width: auto;
font-size: 0.5rem;
overflow: hidden;
text-align: center;
}
}