charts/src/styles/charts.css

/* graphs */
.chart-container {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.chart-container .graph-focus-margin {
  margin: 0px 5%;
}
.chart-container .graphics {
  margin-top: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  position: relative;
}
.chart-container .graph-stats-group {
  display: flex;
  justify-content: space-around;
  flex: 1;
}
.chart-container .graph-stats-container {
  display: flex;
  justify-content: space-around;
  padding-top: 10px;
}
.chart-container .graph-stats-container .stats {
  padding-bottom: 15px;
}
.chart-container .graph-stats-container .stats-title {
  color: #8D99A6;
}
.chart-container .graph-stats-container .stats-value {
  font-size: 20px;
  font-weight: 300;
}
.chart-container .graph-stats-container .stats-description {
  font-size: 12px;
  color: #8D99A6;
}
.chart-container .graph-stats-container .graph-data .stats-value {
  color: #98d85b;
}
.chart-container .axis,
.chart-container .chart-label {
  font-size: 10px;
  fill: #555b51;
}
.chart-container .axis line,
.chart-container .chart-label line {
  stroke: #dadada;
}
.chart-container .percentage-graph .progress {
  margin-bottom: 0px;
}
.chart-container .data-points circle {
  stroke: #fff;
  stroke-width: 2;
}
.chart-container .path-group path {
  fill: none;
  stroke-opacity: 1;
  stroke-width: 2px;
}
.chart-container line.dashed {
  stroke-dasharray: 5,3;
}
.chart-container .tick.x-axis-label {
  display: block;
}
.chart-container .tick .specific-value {
  text-anchor: start;
}
.chart-container .tick .y-value-text {
  text-anchor: end;
}
.chart-container .tick .x-value-text {
  text-anchor: middle;
}
.chart-container .progress {
  height: 20px;
  margin-bottom: 20px;
  overflow: hidden;
  background-color: #f5f5f5;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1)
}
.chart-container .progress-bar {
  float: left;
  width: 0;
  height: 100%;
  font-size: 12px;
  line-height: 20px;
  color: #fff;
  text-align: center;
  background-color: #36414c;
  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
  -webkit-transition: width .6s ease;
  -o-transition: width .6s ease;
  transition: width .6s ease;
}
.graph-svg-tip {
  position: absolute;
  z-index: 99999;
  padding: 10px;
  font-size: 12px;
  color: #959da5;
  text-align: center;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 3px;
}
.graph-svg-tip.comparison {
  padding: 0;
  text-align: left;
  pointer-events: none;
}
.graph-svg-tip.comparison .title {
  display: block;
  padding: 10px;
  margin: 0;
  font-weight: 600;
  line-height: 1;
  pointer-events: none;
}
.graph-svg-tip.comparison ul {
  margin: 0;
  white-space: nowrap;
  list-style: none;
}
.graph-svg-tip.comparison li {
  display: inline-block;
  padding: 5px 10px;
}
.graph-svg-tip ul,
.graph-svg-tip ol {
  padding-left: 0;
  display: flex;
}
.graph-svg-tip ul.data-point-list li {
  min-width: 90px;
  flex: 1;
}
.graph-svg-tip strong {
  color: #dfe2e5;
}
.graph-svg-tip .svg-pointer {
  position: absolute;
  bottom: -10px;
  left: 50%;
  width: 5px;
  height: 5px;
  margin: 0 0 0 -5px;
  content: " ";
  border: 5px solid transparent;
  border-top-color: rgba(0, 0, 0, 0.8);
}

/*Indicators*/
.indicator,
.indicator-right {
  background: none;
  font-size: 12px;
  vertical-align: middle;
  font-weight: bold;
  color: #6c7680;
}
.indicator::before,
.indicator-right::after {
  content: '';
  display: inline-block;
  height: 8px;
  width: 8px;
  border-radius: 8px;
}
.indicator::before {
  margin: 0 4px 0 0px;
}
.indicator-right::after {
  margin: 0 0 0 4px;
}
.indicator.grey::before,
.indicator-right.grey::after {
  background: #bdd3e6;
}
.indicator.light-grey::before,
.indicator-right.light-grey::after {
  background: #F0F4F7;
}
.indicator.blue::before,
.indicator-right.blue::after {
  background: #5e64ff;
}
.indicator.red::before,
.indicator-right.red::after {
  background: #ff5858;
}
.indicator.green::before,
.indicator-right.green::after {
  background: #28a745;
}
.indicator.light-green::before,
.indicator-right.light-green::after {
  background: #98d85b;
}
.indicator.orange::before,
.indicator-right.orange::after {
  background: #ffa00a;
}
.indicator.violet::before,
.indicator-right.violet::after {
  background: #743ee2;
}
.indicator.darkgrey::before,
.indicator-right.darkgrey::after {
  background: #b8c2cc;
}
.indicator.black::before,
.indicator-right.black::after {
  background: #36414C;
}
.indicator.yellow::before,
.indicator-right.yellow::after {
  background: #FEEF72;
}
.indicator.light-blue::before,
.indicator-right.light-blue::after {
  background: #7CD6FD;
}
.indicator.light-blue::before,
.indicator-right.light-blue::after {
  background: #7CD6FD;
}
.indicator.purple::before,
.indicator-right.purple::after {
  background: #b554ff;
}
.indicator.magenta::before,
.indicator-right.magenta::after {
  background: #ffa3ef;
}

/*Svg properties colors*/
.stroke.grey {
  stroke: #bdd3e6;
}
.stroke.light-grey {
  stroke: #F0F4F7;
}
.stroke.blue {
  stroke: #5e64ff;
}
.stroke.red {
  stroke: #ff5858;
}
.stroke.light-green {
  stroke: #98d85b;
}
.stroke.green {
  stroke: #28a745;
}
.stroke.orange {
  stroke: #ffa00a;
}
.stroke.violet {
  stroke: #743ee2;
}
.stroke.darkgrey {
  stroke: #b8c2cc;
}
.stroke.black {
  stroke: #36414C;
}
.stroke.yellow {
  stroke: #FEEF72;
}
.stroke.light-blue {
  stroke: #7CD6FD;
}
.stroke.purple {
  stroke: #b554ff;
}
.stroke.magenta {
  stroke: #ffa3ef;
}

.fill.grey {
  fill: #bdd3e6;
}
.fill.light-grey {
  fill: #F0F4F7;
}
.fill.blue {
  fill: #5e64ff;
}
.fill.red {
  fill: #ff5858;
}
.fill.light-green {
  fill: #98d85b;
}
.fill.green {
  fill: #28a745;
}
.fill.orange {
  fill: #ffa00a;
}
.fill.violet {
  fill: #743ee2;
}
.fill.darkgrey {
  fill: #b8c2cc;
}
.fill.black {
  fill: #36414C;
}
.fill.yellow {
  fill: #FEEF72;
}
.fill.light-blue {
  fill: #7CD6FD;
}
.fill.purple {
  fill: #b554ff;
}
.fill.magenta {
  fill: #ffa3ef;
}

.background.grey {
  background: #bdd3e6;
}
.background.light-grey {
  background: #F0F4F7;
}
.background.blue {
  background: #5e64ff;
}
.background.red {
  background: #ff5858;
}
.background.light-green {
  background: #98d85b;
}
.background.green {
  background: #28a745;
}
.background.orange {
  background: #ffa00a;
}
.background.violet {
  background: #743ee2;
}
.background.darkgrey {
  background: #b8c2cc;
}
.background.black {
  background: #36414C;
}
.background.yellow {
  background: #FEEF72;
}
.background.light-blue {
  background: #7CD6FD;
}
.background.purple{
  background: #b554ff;
}
.background.magenta{
  background: #ffa3ef;
}

.border-top.grey {
  border-top: 3px solid #bdd3e6;
}
.border-top.light-grey {
  border-top: 3px solid #F0F4F7;
}
.border-top.blue {
  border-top: 3px solid #5e64ff;
}
.border-top.red {
  border-top: 3px solid #ff5858;
}
.border-top.light-green {
  border-top: 3px solid #98d85b;
}
.border-top.green {
  border-top: 3px solid #28a745;
}
.border-top.orange {
  border-top: 3px solid #ffa00a;
}
.border-top.violet {
  border-top: 3px solid #743ee2;
}
.border-top.darkgrey {
  border-top: 3px solid #b8c2cc;
}
.border-top.black {
  border-top: 3px solid #36414C;
}
.border-top.yellow {
  border-top: 3px solid #FEEF72;
}
.border-top.light-blue {
  border-top: 3px solid #7CD6FD;
}
.border-top.purple {
  border-top: 3px solid #b554ff;
}
.border-top.magenta {
  border-top: 3px solid #ffa3ef;
}

.stop-color.grey {
  stop-color: #bdd3e6;
}
.stop-color.light-grey {
  stop-color: #F0F4F7;
}
.stop-color.blue {
  stop-color: #5e64ff;
}
.stop-color.red {
  stop-color: #ff5858;
}
.stop-color.light-green {
  stop-color: #98d85b;
}
.stop-color.green {
  stop-color: #28a745;
}
.stop-color.orange {
  stop-color: #ffa00a;
}
.stop-color.violet {
  stop-color: #743ee2;
}
.stop-color.darkgrey {
  stop-color: #b8c2cc;
}
.stop-color.black {
  stop-color: #36414C;
}
.stop-color.yellow {
  stop-color: #FEEF72;
}
.stop-color.light-blue {
  stop-color: #7CD6FD;
}
.stop-color.purple {
  stop-color: #b554ff;
}
.stop-color.magenta {
  stop-color: #ffa3ef;
}