/* Very simple charting styling */

svg.ct-chart-bar, svg.ct-chart-line{
    overflow: visible;
}

/* Labels of the graph */
.ct-label {
    font-size: 1rem;
    font-family: Raleway, sans-serif;
}

.ct-grid {
    /* stroke-dasharray: 3px; */
    /* stroke: gainsboro; */
    stroke: gainsboro;
    stroke-opacity: 0.6;
    stroke-linecap: round;
    margin-top: 1em;

    /* color: rgba(0, 0, 0, 0.8); */
}
/* .ct-chart .ct-grids .ct-grid {
    stroke: #ccc;
} */
/* .ct-grids line {
    color: steelblue;
} */


/* Line chart */

/* Use this selector to override the line style on a given series */
.ct-line {
    /* Set the colour of this series line */
    stroke: rgb(51, 51, 51);
    /* Control the thikness of your lines */
    stroke-width: 5px;
    /* Create a dashed line with a pattern */
    /* stroke-dasharray: 10px 20px; */
    fill: none
}

.ct-area {
    fill: rgba(201, 201, 201, 0.4);
}

/* Color of area under the curve */
/* .ct-series-a .ct-area {
    fill: #5be2a793;
}

.ct-series-b .ct-area {
    fill: #f9565694;
}

.ct-series-c .ct-area {
    fill: #fbcd599a;
}

.ct-series-d .ct-area {
    fill: #56aaf998;
}

.ct-series-a .ct-line,
.ct-series-a .ct-point {
  stroke: #5BE2A7;
}

.ct-series-b .ct-line,
.ct-series-b .ct-point {
  stroke: #F95656;
}

.ct-series-c .ct-line,
.ct-series-c .ct-point {
  stroke: #FBCD59;
}

.ct-series-d .ct-line,
.ct-series-d .ct-point {
  stroke: #56ABF9;
} */

.downtrend .ct-area {
    fill: #f071713d;
}

.downtrend .ct-line,
.downtrend .ct-point {
  stroke: #f07171;
}

.uptrend .ct-area {
    fill: url('#uptrend-gradient');
}

.uptrend .ct-line,
.uptrend .ct-point {
  stroke: #5BE2A7;
}

.baseline .ct-area {
    fill: #fbcd599a;
}

.baseline .ct-line,
.baseline .ct-point {
  stroke: #FBCD59;
}

/* This selector overrides the points style on line charts. Points on line charts are actually just very short strokes. This allows you to customize even the point size in CSS */
.ct-point {
    /* Colour of your points */
    stroke: rgb(51, 51, 51);
    /* Size of your points */
    stroke-width: 11px;
    /* Make your points appear as squares */
    /* stroke-linecap: square; */
    stroke-linecap: round;
}

/* Bar chart */

/* Use this selector to override bar styles on bar charts. Bars are also strokes so you have maximum freedom in styling them. */
.ct-series-a .ct-bar {
    /* Colour of your bars */
    stroke: #5BE2A7;
    /* The width of your bars */
    stroke-width: 5%;
    /* Yes! Dashed bars! */
    /* stroke-dasharray: 20px; */
    /* Maybe you like round corners on your bars? */
    stroke-linecap: round;
}

.ct-series-b .ct-bar {
    /* Colour of your bars */
    stroke: #F95656;
    /* The width of your bars */
    stroke-width: 5%;
    /* Yes! Dashed bars! */
    /* stroke-dasharray: 20px; */
    /* Maybe you like round corners on your bars? */
    stroke-linecap: round;
}

.ct-series-c .ct-bar {
    /* Colour of your bars */
    stroke: #FBCD59;
    /* The width of your bars */
    stroke-width: 5%;
    /* Yes! Dashed bars! */
    /* stroke-dasharray: 20px; */
    /* Maybe you like round corners on your bars? */
    stroke-linecap: round;
}

.ct-series-d .ct-bar {
    /* Colour of your bars */
    stroke: #56ABF9;
    /* The width of your bars */
    stroke-width: 5%;
    /* Yes! Dashed bars! */
    /* stroke-dasharray: 20px; */
    /* Maybe you like round corners on your bars? */
    stroke-linecap: round;
}

/* Pie chart */

/* Pie charts consist of solid slices where you can use this selector to override the default style. */
.ct-series-a .ct-slice-pie {
    /* fill of the pie slieces */
    fill: #5BE2A7;
    /* give your pie slices some outline or separate them visually by using the background color here */
    /* stroke: white; */
    /* outline width */
    stroke-width: 4px;
}

.ct-series-b .ct-slice-pie {
    /* fill of the pie slieces */
    fill: #F95656;
    /* give your pie slices some outline or separate them visually by using the background color here */
    /* stroke: white; */
    /* outline width */
    stroke-width: 4px;
}

.ct-series-c .ct-slice-pie {
    /* fill of the pie slieces */
    fill: #FBCD59;
    /* give your pie slices some outline or separate them visually by using the background color here */
    /* stroke: white; */
    /* outline width */
    stroke-width: 4px;
}

.ct-series-d .ct-slice-pie {
    /* fill of the pie slieces */
    fill: #56ABF9;
    /* give your pie slices some outline or separate them visually by using the background color here */
    /* stroke: white; */
    /* outline width */
    stroke-width: 4px;
}


/* Donut chart */

.ct-slice-donut {
    fill: none;
}

/* Donut charts get built from Pie charts but with a fundamentally difference in the drawing approach. The donut is drawn using arc strokes for maximum freedom in styling */
.ct-series-a .ct-slice-donut {
    /* give the donut slice a custom colour */
    stroke: #5BE2A7;
    /* customize stroke width of the donut slices in CSS. Note that this property is already set in JavaScript and label positioning also relies on this. In the right situation though it can be very useful to style this property. You need to use !important to override the style attribute */
    stroke-width: 30px !important;
    
    /* create modern looking rounded donut charts */
    /* stroke-linecap: round; */
}

.ct-series-b .ct-slice-donut {
    /* give the donut slice a custom colour */
    stroke: #F95656;
    /* customize stroke width of the donut slices in CSS. Note that this property is already set in JavaScript and label positioning also relies on this. In the right situation though it can be very useful to style this property. You need to use !important to override the style attribute */
    stroke-width: 30px !important;
    /* create modern looking rounded donut charts */
    /* stroke-linecap: round; */
}


.ct-series-c .ct-slice-donut {
    /* give the donut slice a custom colour */
    stroke: #FBCD59;;
    /* customize stroke width of the donut slices in CSS. Note that this property is already set in JavaScript and label positioning also relies on this. In the right situation though it can be very useful to style this property. You need to use !important to override the style attribute */
    stroke-width: 30px !important;
    /* create modern looking rounded donut charts */
    /* stroke-linecap: round; */
}

.ct-series-d .ct-slice-donut {
    /* give the donut slice a custom colour */
    stroke: #56ABF9;
    /* customize stroke width of the donut slices in CSS. Note that this property is already set in JavaScript and label positioning also relies on this. In the right situation though it can be very useful to style this property. You need to use !important to override the style attribute */
    stroke-width: 30px !important;
    /* create modern looking rounded donut charts */
    /* stroke-linecap: round; */
}