.chart-container {
    min-width: 200px;
    flex: 1 1 45%; 
    min-height: 300px;
    /* border: 1px solid #ccc; */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; 
    position: relative;
    flex-direction: column;
}
.custom-chart-size {
    width: 100%; 
    height: 100%; 
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; 
    position: absolute;
    top: 0;
    left: 0;
}
.lifeprintchart-title {
    /* width: 100%; */
    /* Ensures the title element spans the full width of its container */
    /* Can be omitted if your h3 is not being styled differently elsewhere */
    font-weight: 600;
    margin-top: 0.5rem;
    /* Adjust the margin as needed to reduce the distance */
}

.chart-title {
    width: 100%;
    /* Ensures the title element spans the full width of its container */
    margin-left: 25px;
    margin-right: 50px;
    /* Can be omitted if your h3 is not being styled differently elsewhere */
    font-weight: 600;
    margin-top: 0.5rem;
    font-size: 1.7rem;
    /* Adjust the margin as needed to reduce the distance */
}

.chart-child.donut-container { border-radius: 20px; transition: background-color 0.1s ease-in-out; }
.chart-child:has(.no-data) { cursor: default; }
.chart-child:hover:not(:has(.no-data)).hover-pointer { background-color: #0000000a; }
.chart-child.selected { background-color: #0000000a; }

/*GAUGE*/

.gauge-chart {
    width: 300px;
    height: 200px;
    width: 100%;
    max-height: 200px;
    margin: 0;
    margin-bottom: 2%;
    margin-top: -25px;
    /* Adjust margin as needed for spacing */
}

.chart-container {
    display: flex;
    /* Use flexbox for alignment */
    flex-direction: row;
    /* Stack elements vertically */
    align-items: center;
    /* Center items horizontally */
    justify-content: center;
    /* Center items vertically */
    height: 100%;
    /* Take full height of parent to enable vertical centering */
    flex-wrap: wrap; /* elements go to multiple rows */
}
.chart-container > .chart-child {
    /* display: flex; */ /* if you add this, the whole layout messes up */
    /* flex: 1 1 30%; */
    min-width: 250px;
}

#chartCanvas {
    display: block;
    /* Make canvas display as block for margin auto to work */
}

#health-chart,
#wealth-chart,
#being-chart,
#social-chart,
#vocation-chart {
    pointer-events: none;
}