/*Primary Chart*/

/*Nested divs for responsiveness*/
.chart-wrapper {
    max-width: 800px;  /*Overwritten by the JS*/
    min-width: 304px;
    margin-bottom: 8px;
    background-color: #FFFFFF;
}
.chart-wrapper .inner-wrapper {
    position: relative;
    padding-bottom: 50%; /*Overwritten by the JS*/
    width: 100%;
}
.chart-wrapper .outer-box {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.chart-wrapper .inner-box {
    width: 100%;
    height: 100%;
}

.chart-wrapper text {
  font-family: sans-serif;
  font-size: 13px;
  fill: #000;
}

.chart-wrapper .axis path,
.chart-wrapper .axis line {
    fill: none;
    stroke: #000000;
    stroke-width: 1px;
    shape-rendering: crispEdges;
}

.chart-wrapper .y.axis .tick line {
    stroke: lightgrey;
    opacity: 0.6;
    stroke-dasharray: 2,1;
    stroke-width: 1;
    shape-rendering: crispEdges;

}

.chart-wrapper .x.axis .domain {
  display: none;
}

.chart-wrapper div.tooltipDistroChart {
    position: absolute;
    text-align: left;
    padding: 3px;
    font: 12px sans-serif;
    background: lightcyan;
    border: 0px;
    border-radius: 1px;
    pointer-events: none;
    opacity: 0.7;
}

/*Box Plot*/
.chart-wrapper .box-plot .box {
    fill-opacity: 0.4;
    stroke-width: 2;
}
.chart-wrapper .box-plot line {
    stroke-width: 2px;
}
.chart-wrapper .box-plot circle {
    fill: white;
    stroke: black;
}

.chart-wrapper .box-plot .median {
    stroke: black;
}

.chart-wrapper .box-plot circle.median {
    /*the script makes the circles the same color as the box, you can override this in the js*/
    fill: white !important;
}

.chart-wrapper .box-plot .mean {
    stroke: white;
    stroke-dasharray: 2,1;
    stroke-width: 1px;
}

@media (max-width:500px){
    .chart-wrapper .box-plot circle {display: none;}
}

/*Violin Plot*/

.chart-wrapper .violin-plot .area {
    shape-rendering: geometricPrecision;
    opacity: 0.4;
}

.chart-wrapper .violin-plot .line {
    fill: none;
    stroke-width: 2px;
    shape-rendering: geometricPrecision;
}

/*Notch Plot*/
.chart-wrapper .notch-plot .notch {
    fill-opacity: 0.4;
    stroke-width: 2;
}

/* Point Plots*/
.chart-wrapper .points-plot .point {
    stroke: black;
    stroke-width: 1px;
}

.chart-wrapper .metrics-lines {
    stroke-width: 4px;
}

/* Non-Chart Styles for demo*/
.chart-options  {
    min-width: 200px;
    font-size: 13px;
    font-family: sans-serif;
}
.chart-options button {
    margin: 3px;
    padding: 3px;
    font-size: 12px;
}
.chart-options p {
    display: inline;
}
@media (max-width:500px){
    .chart-options p {display: block;}
}