.hcls-simple-chart {
    max-width: 800px;
    margin: 20px auto;
}
.hcls-simple-chart canvas {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}
.hcls-simple-chart-legend {
    margin-top: 10px;
    text-align: left;
}
.hcls-simple-chart-legend-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}
.hcls-simple-chart-legend-list li {
    margin-right: 10px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    font-size: 13px;
}
.hcls-simple-chart-legend-color {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 4px;
}
.hcls-simple-chart-message {
    color: #cc0000;
    font-style: italic;
}

.hcls-chart-title {
    text-align: center;
    margin: 0 0 12px 0;
    font-weight: 600;
}

/* Live date range controls (shortcode) */
.hcls-sc-chart-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin:0 0 10px 0;
}
.hcls-sc-chart-header .hcls-chart-title{
    margin:0;
}
.hcls-sc-date-controls{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}
.hcls-sc-date-label{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:13px;
}
.hcls-sc-date-label input[type="date"]{
    max-width:160px;
}


.hcls-sc-date-controls.hcls-sc-busy{opacity:0.75;}
.hcls-sc-date-controls .hcls-sc-date-update{margin-left:10px;}