.js-plotly-plot .plotly .hoverlayer .hovertext .nums {
    /* font-family: var(--font-global) !important; */
    font-size: 14px !important;
}

.js-plotly-plot,
.plot-container, .dash-graph {
    height: 100%;
} 

.hovertext path {
    stroke-linejoin: round !important;
    stroke-linecap: round !important;
    stroke-opacity: 0.75;
}

.legend-item-color {
    width: 15px;
    height: 15px;
    border-radius: 4px;
    display: inline-block;
    margin-right: 4px;
}

.legend {
    margin-top: 24px;
    margin-left: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 13px;
    line-height: normal;
    gap: 20px;
}

/* Plotly hover rounded border */
.hoverlayer .bg {
    rx: 3;
    shape-rendering: auto;
}

/* Hide elements when dash is loading */
[data-dash-is-loading="true"] .xaxislayer-above,
[data-dash-is-loading="true"] .yaxislayer-above,
[data-dash-is-loading="true"] .zerolinelayer,
[data-dash-is-loading="true"] .gridlayer,
.dash-graph--pending .xaxislayer-above,
.dash-graph--pending .yaxislayer-above,
.dash-graph--pending .zerolinelayer,
.dash-graph--pending .gridlayer {
    display: none !important;
}

.legend>.bg {
    fill-opacity: 1 !important;
}

/* Highlight for piecharts */
/* .bars .points .point path:hover*/
g .slice .surface:hover {
    stroke: rgb(49, 49, 49) !important;
    /* Darker shade for stroke */
    stroke-width: 2.5 !important;
    /* Make the stroke visible */
}


.custom-indicator-value {
    font-size: 2.5rem;
    font-weight: 600;
}

.custom-indicator-subtitle {
    font-size: 1.2rem;
    font-weight: 400;
}