/*Primary Chart*/

/*Nested divs for responsiveness*/

/*.chart-wrapper {
    max-width: 800px; 
    min-width: 304px;
    margin-bottom: 8px;
    background-color: #FFF;
}*/

.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:"avenir next", Arial, sans-serif;
    font-size: 12px;
}

.chart-wrapper .axis path,
.chart-wrapper .axis line {
    fill: none;
    stroke: #969696;
    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;
}

/*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;
}


@media (max-width:500px){
    .chart-options p {display: block;}