.share-market{
background-color:#edf2fa;
margin:1rem;
padding:1rem;
border-radius:0.6rem;
}

.share-market-title{
margin-bottom:0.7rem;
letter-spacing:0.1rem;
text-align:center;
font-weight:600;
font-size:1.1rem;
}

.share-market-container{
gap:0.5rem;
display:grid;
scrollbar-width:none;
grid-template-columns:repeat(5,1fr);
margin-bottom: 1rem;
}

.share-market-container-company{
background-color:white;
border-radius:0.6rem;
min-width:10rem;
padding:0.7rem;
cursor:pointer
}

.share-market-container-company-search{
background-color:white;
border-radius:0.6rem;
min-width:10rem;
padding:0.7rem;
cursor:pointer
}

.share-market-container-company-title{
display:flex;
margin-bottom:0.2rem;
}

.share-market-container-company-name{
    font-size:0.7rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width:5rem;
}


.share-market-container-company-change{
color:rgba(24,128,56,1.00);
background-color:rgba(24,128,56,0.2);
font-size:0.4rem;
padding:0.1rem 0.3rem;
text-align:center;
border-radius:0.3rem;
margin-left:auto;
}

.share-market-container-company-symbol{
font-size:0.4rem;
letter-spacing:0.02rem;
color:grey;
margin-bottom:0.5rem;
}

.share-market-container-company-price{
font-size:1.4rem;
letter-spacing:0.1em;
color:green;
margin-bottom:0.5rem;
font-weight:600;
}

.share-market-container-company-symbol span{
color:blue;
}


.share-market-container-company-OHLV{
gap:0.3rem;
display:grid;
scrollbar-width:none;
grid-template-columns:repeat(2,1fr);
grid-template-rowss:repeat(2,1fr);
margin-bottom:1rem;
}

.share-market-container-company-latest{
background-color:#f8f9fb;
border-radius:0.3rem;
padding:0.3rem;
}


.share-market-container-company-latesta{
color:grey;
font-size:0.55rem;
margin-bottom:0.3rem;
}

.share-market-container-company-latestb{
font-size:0.75rem;
}

.share-market-container-company-expl{
background-color:black;
border-radius:0.3rem;
padding:0.2rem 1rem;
color:white;
text-align:center;
}

.indices-scroll{
    display:flex;
    gap:10px;
    overflow:scroll;
    padding-bottom:10px;
    scrollbar-width:none;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
}

/* Custom Scrollbar */
.indices-scroll::-webkit-scrollbar{
    height:8px;
}

.indices-scroll::-webkit-scrollbar-track{
    background:#ddd;
    border-radius:10px;
}

.indices-scroll::-webkit-scrollbar-thumb{
    background:#0d6efd;
    border-radius:10px;
}

.indices-card{
    min-width:200px;
    background:#fff;
    border-radius:12px;
    padding:18px;
    box-shadow:0 4px 10px rgba(0,0,0,.1);
    flex-shrink:0;
    transition:.3s;
}

.indices-card:hover{
    transform:translateY(-5px);
}

.indices-name{
    font-size:1rem;
    font-weight:bold;
    color:#222;
}

.indices-value{
    font-size:28px;
    font-weight:bold;
    margin:12px 0; 
    color:green;
}

.indices-52high{
    font-size:0.5rem;
    font-weight:bold;
    color:grey;
}

.up{
    color:#16a34a;
}

.down{
    color:#dc2626;
}

.chooseSymbolShare{
    height: 2rem;
    width: 22rem;
    background: linear-gradient(rgb(206, 145, 145), white);
    padding: 0.2rem;
    border-radius: 0.2rem;
    
}



@media(max-width:768px){
	.share-market-container{
	display:flex;
	overflow:scroll;
	scrollbar-width:none;
	}
	.share-market-title{
	font-size:0.9rem;
	}
	.share-market-container-company-title{
	font-size:0.8rem;	
	}
	.share-market-container-company-symbol{
	font-size:0.4rem;
	}
	.share-market-container-company-latesta{
	font-size:0.45rem;
	}
	.share-market-container-company-latestb{
	font-size:0.75rem;
	}
	.share-market-container-company-expl{
	font-size:0.8rem;
	}
	.indices-card{
	min-width:160px;
	padding:15px;
	}

	.indices-value{
	font-size:18px;
	}

	.indices-name{
	font-size:12px;
	}
	.indices-change{
	    font-size:10px;
	}
}