/*
* Basic styles to get you started.
*
*
* A note on html class structure.
*   The "pace-chart" class is appended to the element identified by the selector,
*    as such, it can be used as the generic parent for all pace-chart related elements
*
*   Inside the pace-chart, there are two main divs:
*       .inner-box - the main container/flex parent of the sub-chartObjects
*       .tooltip - rendered on hover. ALl html within this div is provided by the tooltipGenerator function
*
*  Chart Objects (within the inner-box)
*       Each subchart has it's own div with class "chart-area"
*       Within that div, the svg element for the subchart is created.
*       - This svg takes on the title and subtitle as classes as well as a unique random id
*
* Chart SVG
*       The elements within the svg element are organized in g elements by type:
*       - .title / .subtitle
*       - .targets
*       - .results
*       - .targets-markers
*       - .results-markers
 */

/*
* Hide all text initially and then un-hide specifics as needed
*/
.pace-chart text {
    font-family: sans-serif;
    display: none;
}

/*
* Setting overflow to visible for the parent svg allows us to have the shadow just on the bar elements (not on titles)
*   and not have it cut off by the edge of the parent svg element
 */
.pace-chart .chart-area svg {
    overflow: visible;
}
.pace-chart .chart-area .bars {
    filter: drop-shadow( 4px 4px 2px rgba(0, 0, 0, .2));
}

/*
* Hover state to let people know it is clickable
 */
.pace-chart a:hover {
   filter: brightness(1.3);
}


/*
* Show and style the title and subtitle for each subchart object
 */
.pace-chart .title {
    font-size: 14px;
    font-weight: bold;
    display: initial;
}
.pace-chart .subtitle {
    fill: #999;
    font-size: 11px;
    display: initial;
}


/*
* Un-hide text based on width, Since anything that is greater than w25 will
*   have the w25 class, this first one un-hides everything.
*   -- w25, w50 correspond to pixel width, 25px, 50px.
* Note: Everything below 25 px is still hidden in this starter css.
*   To show text in bars shorter than 25px, update the w_threshold to something smaller than 25
*   and then create teh style for that size. For example if w_threshold = 10, you could then
*   show and style text on bars down to 10px wide.
*   - Anything
*/
.pace-chart .targets .w25 text {
    display: initial; /* Show all text in classes larger than 25px */
    font-size: 7px;
    font-weight: bold;
    fill: white;
}
.pace-chart .targets .w50 text {
    font-size: 12px;
}
.pace-chart .targets .w100 text {
    font-size: 22px;
}

/*
* More gradations for results sizes to allow space for percent to goal
 */
.pace-chart .results .w25 text {
    display: initial;
    font-size: 7px;
    font-weight: bold;
    fill: white;
}
.pace-chart .results .w50 text {
    font-size: 10px;
}
.pace-chart .results .w100 text {
    font-size: 12px;
}
.pace-chart .results .w150 text {
    font-size: 16px;
}
.pace-chart .results .w250 text {
    font-size: 20px;
}

/*
* All target boxes contain the target class.
*   The example code below uses yellow and red as examples that come from
*   the initialization of the targets. These are not default class values.
 */
.pace-chart .target {
    fill: #47653F;
}
.pace-chart .target.yellow {
    fill: #F7B801;
}
.pace-chart .target.red {
    fill: #C44900;
}

/*
* All target boxes contain the target class.
*   This example shows using the default s0, s1 etc classes.
*   These are default index classes provided by the render function
 */
.pace-chart .result.s0 {
    fill: #294868;
}
.pace-chart .result.s1 {
    fill: #38618C;
}
.pace-chart .result.s2 {
    fill: #80CED7;
}

/*Demo specific*/
.pace-chart .result.red-amount {
    fill: #8c3861;
}
.pace-chart .result.blue-amount {
    fill: #38618C;
}

/*
* Markers are just lines, they can be styled however you wish
 */
.pace-chart .marker {
    stroke: #887e7e;
    opacity: 0.9;
    stroke-dasharray: 1, 2;
    stroke-width: 2px;
}


/*
* For convenience, the total of the results is also rendered (but hidden)
*   Below the results bar. Uncomment this to display.
*   This is useful if your results bar is too narrow to show the full result
*     but you still want to show it.
*/
/*
.pace-chart .results text.summary {
    display: initial;
}
*/
/* For the demo, only the 3rd chart shows the summary text */
.pace-chart#chart-pacing-3 .results text.summary {
    display: initial;
    font-size: 12px;
}

/*
* If rendering summary bars, you will need to provide a fill and un-hide the text
 */
.pace-chart .results-summary path {
    fill: #cdb2dc;
}
.pace-chart .results-summary text {
    display: initial;
    font-weight: bold;
}

.pace-chart .targets-summary path {
    fill: #cdb2dc;
}
.pace-chart .targets-summary text {
    display: initial;
    font-weight: bold;
}


/*
* Everything in the tooltip definition comes from the tooltipGenerator function.
*
 */
/* Display styles, important no matter what the tooltip contains*/
.pace-chart div.tooltip {
    position: absolute;
    text-align: left;
    pointer-events: none;
}

/* Tooltip specific styling*/
.pace-chart div.tooltip {
    padding: 5px;
    background: #fff;
    box-shadow: 5px 5px 11px -5px rgba(0,0,0,0.67);
    border: 0;
    border-radius: 6px;
    opacity: 0.8;
    font: 12px sans-serif;
}
.pace-chart div.tooltip .chart.title {
    font-size: 14px;
}
.pace-chart div.tooltip .title, .chart-wrapper div.tooltip .title {
    font-weight: bold;
}
.pace-chart div.tooltip .selected {
    font-style: italic;
    background: wheat;
    font-size: 14px;
  }