/* CHART BAR */
.CLS_CHART-BARS svg {
    width: 350px;
}
.CLS_CHART-BAR {
    fill: var(--COLOR_DEFAULT);
    height: 21px;
    transition: fill .3s ease;
    cursor: pointer;
    font-family: Helvetica, sans-serif;
}
.CLS_CHART-BAR text {
    fill: #444;
}
.CLS_CHART-BARS rect:hover, .CLS_CHART_BARS rect:focus {
    stroke: #333 !important;
}

/* COLOR D1 */
.CLS_CHART-BARS .CLS_CHART_D1 {
    fill: var(--COLOR_DATA-1);
}
li .CLS_CHART_D1 {
    background-color: var(--COLOR_DATA-1);
}
.CLS_CHART-PIE .CLS_CHART_D1, .CLS_CHART-CYCLE .CLS_CHART_D1 {
    stroke: var(--COLOR_DATA-1);
}

/* COLOR D2 */
.CLS_CHART-BARS .CLS_CHART_D2 {
    fill: var(--COLOR_DATA-2);
}
li .CLS_CHART_D2 {
    background-color: var(--COLOR_DATA-2);
}
.CLS_CHART-PIE .CLS_CHART_D2, .CLS_CHART-CYCLE .CLS_CHART_D2 {
    stroke: var(--COLOR_DATA-2);
}

/* COLOR D3 */
.CLS_CHART-BARS .CLS_CHART_D3 {
    fill: var(--COLOR_DATA-3);
}
li .CLS_CHART_D3 {
    background-color: var(--COLOR_DATA-3);
}
.CLS_CHART-PIE .CLS_CHART_D3, .CLS_CHART-CYCLE .CLS_CHART_D3 {
    stroke: var(--COLOR_DATA-3);
}

/* COLOR D4 */
.CLS_CHART-BARS .CLS_CHART_D4 {
    fill: var(--COLOR_DATA-4);
}
li .CLS_CHART_D4 {
    background-color: var(--COLOR_DATA-4);
}
.CLS_CHART-PIE .CLS_CHART_D4, .CLS_CHART-CYCLE .CLS_CHART_D4 {
    stroke: var(--COLOR_DATA-4);
}

/* COLOR D5 */
.CLS_CHART-BARS .CLS_CHART_D5 {
    fill: var(--COLOR_DATA-5);
}
li .CLS_CHART_D5 {
    background-color: var(--COLOR_DATA-5);
}
.CLS_CHART-PIE .CLS_CHART_D5, .CLS_CHART-CYCLE .CLS_CHART_D5 {
    stroke: var(--COLOR_DATA-5);
}
/* COLOR D6 */
.CLS_CHART-BARS .CLS_CHART_D6 {
    fill: var(--COLOR_DATA-6);
}
li .CLS_CHART_D6 {
    background-color: var(--COLOR_DATA-6);
}
.CLS_CHART-PIE .CLS_CHART_D6, .CLS_CHART-CYCLE .CLS_CHART_D6 {
    stroke: var(--COLOR_DATA-6);
}
/* COLOR D7 */
.CLS_CHART-BARS .CLS_CHART_D7 {
    fill: var(--COLOR_DATA-7);
}
li .CLS_CHART_D7 {
    background-color: var(--COLOR_DATA-7);
}
.CLS_CHART-PIE .CLS_CHART_D7, .CLS_CHART-CYCLE .CLS_CHART_D7 {
    stroke: var(--COLOR_DATA-7);
}
/* COLOR D8 */
.CLS_CHART-BARS .CLS_CHART_D8 {
    fill: var(--COLOR_DATA-8);
}
li .CLS_CHART_D8 {
    background-color: var(--COLOR_DATA-8);
}
.CLS_CHART-PIE .CLS_CHART_D8, .CLS_CHART-CYCLE .CLS_CHART_D8 {
    stroke: var(--COLOR_DATA-8);
}
/* COLOR D9 */
.CLS_CHART-BARS .CLS_CHART_D9 {
    fill: var(--COLOR_DATA-9);
}
li .CLS_CHART_D9 {
    background-color: var(--COLOR_DATA-9);
}
.CLS_CHART-PIE .CLS_CHART_D9, .CLS_CHART-CYCLE .CLS_CHART_D9 {
    stroke: var(--COLOR_DATA-9);
}
/* COLOR D10 */
.CLS_CHART-BARS .CLS_CHART_D10 {
    fill: var(--COLOR_DATA-10);
}
li .CLS_CHART_D10 {
    background-color: var(--COLOR_DATA-10);
}
.CLS_CHART-PIE .CLS_CHART_D10, .CLS_CHART-CYCLE .CLS_CHART_D10 {
    stroke: var(--COLOR_DATA-10);
}


/* COLOR OK */
.CLS_CHART-BARS .CLS_CHART-OK {
    fill: var(--COLOR_OK);
}
li .CLS_CHART-OK{
    background-color: var(--COLOR_OK);
}
/* COLOR ALERT */
.CLS_CHART-BARS .CLS_CHART-ALERT {
    fill: var(--COLOR_ALERT);
}
li .CLS_CHART-ALERT{
    background-color: var(--COLOR_ALERT);
}
/* COLOR DANGER */
.CLS_CHART-BARS .CLS_CHART-DANGER {
    fill: var(--COLOR_DANGER);
}
li .CLS_CHART-DANGER{
    background-color: var(--COLOR_DANGER);
}

/* COLOR BG */
.CLS_CHART_BG {
    stroke: var(--COLOR_BG);
}
li .CLS_CHART_BG{
    background-color: var(--COLOR_BG);
}

li .CLS_CHART_D1, li .CLS_CHART_D2, li .CLS_CHART_D3, li .CLS_CHART_D4, li .CLS_CHART_D5, li .CLS_CHART_D6, li .CLS_CHART_D7, li .CLS_CHART_D8, li .CLS_CHART_D9, li .CLS_CHART_D10, li .CLS_ALERT, li .CLS_CHART_BG {
    margin: 2px;
    margin-right: 5px;
}

.CLS_CHART_AGENDA{
    padding: 0px;
}

/* CHART PIE & CIRCLE BASICS */
.CLS_CHART-PIE svg, .CLS_CHART-CYCLE svg {
    transform: rotate(-90deg);
    width: 200px;
    height: 200px;
}

/* CHART PIE */
.CLS_CHART-PIE circle {
    fill: none;
    stroke-width: 90;
}

/* CHART CIRCLE */
.CLS_CHART-CYCLE text {
    font-size: 24px;
}