/* src/components/Chart/Chart.css */

#chart_div { /* ID selector for the chart container */
    width: 100%;
    height: 100%;
}

.charts {
    width: 100%;
}

/* Style for the container of the chart range buttons */
.charts .buttons {
    display: flex; /* Make the children (expand divs) display in a row */
    flex-wrap: wrap; /* Allow buttons to wrap to the next line on smaller screens */
    justify-content:baseline; /* Center the buttons horizontally */
    gap: 10px; /* Add space between buttons */
    padding: 10px 0; /* Add some padding around the buttons row */
}

/* Styles for individual chart range buttons (the .expand div) */
.charts .expand {
    display: flex;
    cursor: pointer;
    min-width: 48px;
    min-height: 30px;
    justify-content: center;
    align-items: center;
}

.charts .expand:hover {
    background-color: rgb(0, 0, 0, 0.06); /* UPDATED */
}

.priceChart {
    width: 100%;
    height: 270px;
}

/* Chart range selection buttons text */
.btn-chart {
    font-family: "Google Sans", "Roboto", Arial, sans-serif;
    color: rgb(95, 99, 104);
    font-size: .875rem;
    letter-spacing: .0178571429em;
    font-weight: 500;
    cursor: pointer;
}

/* For selected chart range button */
.charts .expand.selected {
    color: blue; /* Blue color for selected */
    border-bottom: 2px solid blue; /* Border underneath selected */
}

.font-bold {
    font-weight: 550;
}

#priceDate {
    text-size-adjust: 100%;
    font-family: "Roboto", Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.3px;
    line-height: 16px;
    color: rgb(95, 99, 104);
}