/* TreeViews */

/* -------------------------------
SVG Pie Chart Group
#pieChartEl-1 {}
#pieChartLg-1 {}
-------------------------------
SVG Bar Graphic Group 
#barGraphicEl-1 {}
------------------------------- */
#pieChart, #barGraphic {
  --color-1:  #d90000;
  --color-2:  #ff3300;
  --color-3:  #ff6600;
  --color-4:  #ff9900;
  --color-5:  #ffcc00;
  --color-6:  #ffff00;
  --color-7:  #c6f50a;
  --color-8:  #99cc00;
  --color-9:  #61c100;
  --color-10: #2f8d00;
  --color-11: #339966;
  --color-12: #00b8b6;
  --color-13: #0099cc;
  --color-14: #0066cc;
  --color-15: #0033cc;
  --color-16: #0000a9;
  --color-17: #333399;
  --color-18: #6f3ca3;
  --color-19: #933ac0;
  --color-20: #cc3366;
  stroke: #33333335;
  stroke-width: 1;
}
.piechart-txt, .bargraphic-txt, .stemgraphic-txt {
  --legend-font: bold 0.95rem Arial;
  --legend-font-color: #004;
  font: var(--legend-font);
  color: var(--legend-font-color);
}
.piechart-txt:hover, .bargraphic-txt:hover {
  text-decoration: underline;
  cursor: pointer;
}
.piechart-el1, .piechart-lg1, .bargraphic-el1 { fill: var(--color-1); }
.piechart-el2, .piechart-lg2, .bargraphic-el2 { fill: var(--color-2); }
.piechart-el3, .piechart-lg3, .bargraphic-el3 { fill: var(--color-3); }
.piechart-el4, .piechart-lg4, .bargraphic-el4 { fill: var(--color-4); }
.piechart-el5, .piechart-lg5, .bargraphic-el5 { fill: var(--color-5); }
.piechart-el6, .piechart-lg6, .bargraphic-el6 { fill: var(--color-6); }
.piechart-el7, .piechart-lg7, .bargraphic-el7 { fill: var(--color-7); }
.piechart-el8, .piechart-lg8, .bargraphic-el8 { fill: var(--color-8); }
.piechart-el9, .piechart-lg9, .bargraphic-el9 { fill: var(--color-9); }
.piechart-el10, .piechart-lg10, .bargraphic-el10 { fill: var(--color-10); }
.piechart-el11, .piechart-lg11, .bargraphic-el11 { fill: var(--color-11); }
.piechart-el12, .piechart-lg12, .bargraphic-el12 { fill: var(--color-12); }
.piechart-el13, .piechart-lg13, .bargraphic-el13 { fill: var(--color-13); }
.piechart-el14, .piechart-lg14, .bargraphic-el14 { fill: var(--color-14); }
.piechart-el15, .piechart-lg15, .bargraphic-el15 { fill: var(--color-15); }
.piechart-el16, .piechart-lg16, .bargraphic-el16 { fill: var(--color-16); }
.piechart-el17, .piechart-lg17, .bargraphic-el17 { fill: var(--color-17); }
.piechart-el18, .piechart-lg18, .bargraphic-el18 { fill: var(--color-18); }
.piechart-el19, .piechart-lg19, .bargraphic-el19 { fill: var(--color-19); }
.piechart-el20, .piechart-lg20, .bargraphic-el20 { fill: var(--color-20); }

.piechart-el1:hover, .piechart-lg1:hover, .bargraphic-el1:hover,
.piechart-el2:hover, .piechart-lg2:hover, .bargraphic-el2:hover,
.piechart-el3:hover, .piechart-lg3:hover, .bargraphic-el3:hover,
.piechart-el4:hover, .piechart-lg4:hover, .bargraphic-el4:hover,
.piechart-el5:hover, .piechart-lg5:hover, .bargraphic-el5:hover,
.piechart-el6:hover, .piechart-lg6:hover, .bargraphic-el6:hover,
.piechart-el7:hover, .piechart-lg7:hover, .bargraphic-el7:hover,
.piechart-el8:hover, .piechart-lg8:hover, .bargraphic-el8:hover,
.piechart-el9:hover, .piechart-lg9:hover, .bargraphic-el9:hover,
.piechart-el10:hover, .piechart-lg10:hover, .bargraphic-el10:hover,
.piechart-el11:hover, .piechart-lg11:hover, .bargraphic-el11:hover,
.piechart-el12:hover, .piechart-lg12:hover, .bargraphic-el12:hover,
.piechart-el13:hover, .piechart-lg13:hover, .bargraphic-el13:hover,
.piechart-el14:hover, .piechart-lg14:hover, .bargraphic-el14:hover,
.piechart-el15:hover, .piechart-lg15:hover, .bargraphic-el15:hover,
.piechart-el16:hover, .piechart-lg16:hover, .bargraphic-el16:hover,
.piechart-el17:hover, .piechart-lg17:hover, .bargraphic-el17:hover,
.piechart-el18:hover, .piechart-lg18:hover, .bargraphic-el18:hover,
.piechart-el19:hover, .piechart-lg19:hover, .bargraphic-el19:hover,
.piechart-el20:hover, .piechart-lg20:hover, .bargraphic-el20:hover {
  stroke: #000;
  stroke-width: 2;
  cursor: pointer;
 }
 .stemgraphic-el:hover {
  fill: #9c0;
  cursor: pointer;
 }

/* ----------------------------------------------
Graphic Overview Tabs Control
---------------------------------------------- */
.piechart-tabs-container,
.bargraphic-tabs-container,
.treeview-tabs-container {
    --tab-btn-on-bg: #eef;
  --tab-btn-on-color: #003;
  --tab-btn-off-bg: #496679;
  --tab-btn-off-color: #eef;
}
.piechart-tabs,
.bargraphic-tabs,
.treeview-tabs {
    display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  flex-wrap: nowrap;
}
.piechart-tab,
.bargraphic-tab,
.treeview-tab {
  display: inline-block;
  cursor: pointer;
  margin: 0 3px;
  padding: 7px 15px;
  background: var(--tab-btn-off-bg);
  border: 1px solid var(--tab-btn-off-bg);
  border-radius: 3px;
  font: bold 0.75rem Arial;
  color: var(--tab-btn-off-color);
}
.piechart-tab:hover,
.bargraphic-tab:hover,
.treeview-tab:hover {
  background-color: var(--tab-hover-bg);
  border-color: var(--tab-hover-bg);
  color: var(--tab-hover-color);
}
#pieChartTab-1:checked ~ .piechart-tabs #pieChartTab-1-tab,
#pieChartTab-2:checked ~ .piechart-tabs #pieChartTab-2-tab,
#barGraphicTab-1:checked ~ .bargraphic-tabs #barGraphicTab-1-tab,
#barGraphicTab-2:checked ~ .bargraphic-tabs #barGraphicTab-2-tab,
#treeViewTab-1:checked ~ .treeview-tabs #treeViewTab-1-tab,
#treeViewTab-2:checked ~ .treeview-tabs #treeViewTab-2-tab {
  background: var(--tab-btn-on-bg);
  border-color: var(--tab-btn-on-color);
  border-top: 2px solid var(--tab-btn-on-color);
  color: var(--tab-btn-on-color);
  padding: 9px 15px;
}