.chart-wrapper {
    background-color: white;
    width: 100%;
    max-width: 100%;
    padding: 15px;
    box-sizing: border-box;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}


.button-container  button.active {
    color:white  !important;
    background-color: var( --e-global-color-5f1e638 )  !important;

}

.button-container  button {
    font-family: 'Vazirmatn' !important;
    font-weight: 600;
}

.entity_list_container  button {
    font-family: 'Vazirmatn' !important;
    font-weight: 600;
    border:none;
    color:black;
}
.entity_list_container
[type=button], [type=submit], button{
    font-family: 'Vazirmatn' !important;
    font-weight: 600;
    border:none;
    color:black;
}


.entity_list_container button .active{
    border-bottom: 2px solid #fec52d;
}

/*
!* Target the scrollable element *!
.noscroll::-webkit-scrollbar {
    width: 2px; !* set the width of the scrollbar *!
}

!* Hide the track line *!
.noscroll::-webkit-scrollbar-track {
    background: transparent; !* makes the track invisible *!
}

!* Style the thumb *!
.noscroll::-webkit-scrollbar-thumb {
    background-color: #888; !* visible draggable part *!
    border-radius: 5px;
}
*/

/* Target element with horizontal scroll */
.entity_list_container {
    overflow-x: auto;
    white-space: nowrap;
}

/* Chrome, Edge, Safari */
.entity_list_container-area::-webkit-scrollbar {
    height: 8px; /* height of horizontal scrollbar */
}

.entity_list_container::-webkit-scrollbar-track {
    background: transparent; /* track background */
}

.entity_list_container::-webkit-scrollbar-thumb {
    background-color: #f0f0f0; /* white thumb */
    border-radius: 10px;
}

.entity_list_container::-webkit-scrollbar-thumb:hover {
    background-color: #f0f0f0; /* lighter when hovered */
}

/* Firefox */
.entity_list_container {
    scrollbar-width: thin;
    scrollbar-color: #f0f0f0 transparent;
}


.entity_list_container button{
    border-bottom: 2px solid white;

}

.entity_list_container [type=button]:focus,
.entity_list_container [type=button]:hover,
.entity_list_container [type=submit]:focus,
.entity_list_container [type=submit]:hover,
.entity_list_container button:focus,
.entity_list_container button:hover,
.entity_list_container button.active
{
    color:var( --e-global-color-5f1e638 )   !important;
    background-color: white  !important;
    border-bottom: 2px solid #fec52d;

}


.button-container [type=button]:focus,
.button-container [type=button]:hover,
.button-container [type=submit]:focus,
.button-container [type=submit]:hover,
.button-container button:focus,
.button-container button:hover{
    color:white  !important;
    background-color: var( --e-global-color-5f1e638 )  !important;
}



.button-container {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin-bottom: 15px;
    justify-content: center;
    overflow: auto;
}

.button-container button {
    padding: 2px !important;
    margin: 0px;
    font-size: 9px;
    height: fit-content;
    color: black ;
    background-color: #eaeaea ;
    border: 1px solid grey;
}


.button-container button:active {
    transform: translateY(0);
}

#line_race_chart_container {
    width: 100%;
    height: 500px;
    min-height: 400px;
}

/* Responsive design */
@media (max-width: 768px) {
    .chart-wrapper {
        padding: 10px;
    }

    .button-container {
        gap: 6px;
    }

    .button-container button {
        padding: 8px 12px;
        font-size: 12px;
        flex: 1 1 calc(50% - 6px);
        min-width: 100px;
    }

    #line_race_chart_container {
        height: 400px;
        min-height: 300px;
    }
}

@media (max-width: 480px) {
    .button-container button {
        flex: 1 1 calc(50% - 6px);
        font-size: 11px;
        padding: 8px 10px;
    }

    #line_race_chart_container {
        height: 350px;
    }
}