div.dc-chart {
    float: left;
}

.dc-chart rect.bar {
    stroke: none;
    cursor: pointer;
}

.dc-chart rect.bar:hover {
    fill-opacity: .5;
}

.dc-chart rect.stack1 {
    stroke: none;
    fill: red;
}

.dc-chart rect.stack2 {
    stroke: none;
    fill: green;
}

.dc-chart rect.deselected {
    stroke: none;
    fill: #ccc;
}

.dc-chart .empty-chart .pie-slice path {
    fill: #FFEEEE;
    cursor: default;
}

.dc-chart .empty-chart .pie-slice {
    cursor: default;
}

.dc-chart .pie-slice {
    fill: white;
    font-size: 12px;
    cursor: pointer;
}

.dc-chart .pie-slice.external{
    fill: black;
}

.dc-chart .pie-slice :hover {
    fill-opacity: .8;
}

.dc-chart .pie-slice.highlight {
    fill-opacity: .8;
}

.dc-chart .pie-path {
  fill:none;
  stroke-width: 2px;
  stroke: black;
  opacity: 0.4;
}

.dc-chart .selected path {
    stroke-width: 3;
    stroke: #ccc;
    fill-opacity: 1;
}

.dc-chart .deselected path {
    stroke: none;
    fill-opacity: .5;
    fill: #ccc;
}

.dc-chart .axis path,
.dc-chart .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}

.dc-chart .axis text {
    font: 10px sans-serif;
}

.dc-chart .grid-line,
.dc-chart .axis .grid-line {
    fill: none;
    stroke: #ccc;
    opacity: .5;
    shape-rendering: crispEdges;
}

.dc-chart .grid-line line,
.dc-chart .axis .grid-line line {
    fill: none;
    stroke: #ccc;
    opacity: .5;
    shape-rendering: crispEdges;
}

.dc-chart .brush rect.background {
    z-index: -999;
}

.dc-chart .brush rect.extent {
    fill: steelblue;
    fill-opacity: .125;
}

.dc-chart .brush .resize path {
    fill: #eee;
    stroke: #666;
}

.dc-chart path.line {
    fill: none;
    stroke-width: 1.5px;
}

.dc-chart circle.dot {
    stroke: none;
}

.dc-chart g.dc-tooltip path {
    fill: none;
    stroke: grey;
    stroke-opacity: .8;
}

.dc-chart path.area {
    fill-opacity: .3;
    stroke: none;
}

.dc-chart .node {
    font-size: 0.7em;
    cursor: pointer;
}

.dc-chart .node :hover {
    fill-opacity: .8;
}

.dc-chart .selected circle {
    stroke-width: 3;
    stroke: #ccc;
    fill-opacity: 1;
}

.dc-chart .deselected circle {
    stroke: none;
    fill-opacity: .5;
    fill: #ccc;
}

.dc-chart .bubble {
    stroke: none;
    fill-opacity: 0.6;
}

.dc-data-count {
    float: right;
    margin-top: 15px;
    margin-right: 15px;
}

.dc-data-count .filter-count {
    color: #3182bd;
    font-weight: bold;
}

.dc-data-count .total-count {
    color: #3182bd;
    font-weight: bold;
}

.dc-data-table {
}

.dc-chart g.state {
    cursor: pointer;
}

.dc-chart g.state :hover {
    fill-opacity: .8;
}

.dc-chart g.state path {
    stroke: white;
}

.dc-chart g.selected path {
}

.dc-chart g.deselected path {
    fill: grey;
}

.dc-chart g.selected text {
}

.dc-chart g.deselected text {
    display: none;
}

.dc-chart g.county path {
    stroke: white;
    fill: none;
}

.dc-chart g.debug rect {
    fill: blue;
    fill-opacity: .2;
}

.dc-chart g.row rect {
    fill-opacity: 0.8;
    cursor: pointer;
}

.dc-chart g.row rect:hover {
    fill-opacity: 0.6;
}

.dc-chart g.row text {
    fill: white;
    font-size: 12px;
    cursor: pointer;
}

.dc-legend {
    font-size: 11px;
}

.dc-legend-item {
    cursor: pointer;
}

.dc-chart g.axis text {
    /* Makes it so the user can't accidentally click and select text that is meant as a label only */
    -webkit-user-select: none; /* Chrome/Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10 */
    -o-user-select: none;
    user-select: none;
    pointer-events: none;
}

.dc-chart path.highlight {
    stroke-width: 3;
    fill-opacity: 1;
    stroke-opacity: 1;
}

.dc-chart .highlight {
    fill-opacity: 1;
    stroke-opacity: 1;
}

.dc-chart .fadeout {
    fill-opacity: 0.2;
    stroke-opacity: 0.2;
}

.dc-chart path.dc-symbol,
g.dc-legend-item.fadeout {
    fill-opacity: 0.5;
    stroke-opacity: 0.5;
}

.dc-hard .number-display {
    float: none;
}

.dc-chart .box text {
    font: 10px sans-serif;
    -webkit-user-select: none; /* Chrome/Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10 */
    -o-user-select: none;
    user-select: none;
    pointer-events: none;
}

.dc-chart .box line,
.dc-chart .box circle {
    fill: #fff;
    stroke: #000;
    stroke-width: 1.5px;
}

.dc-chart .box rect {
    stroke: #000;
    stroke-width: 1.5px;
}

.dc-chart .box .center {
    stroke-dasharray: 3,3;
}

.dc-chart .box .outlier {
    fill: none;
    stroke: #ccc;
}

.dc-chart .box.deselected .box {
    fill: #ccc;
}

.dc-chart .box.deselected {
    opacity: .5;
}

.dc-chart .symbol{
    stroke: none;
}

.dc-chart .heatmap .box-group.deselected rect {
    stroke: none;
    fill-opacity: .5;
    fill: #ccc;
}

.dc-chart .heatmap g.axis text {
    pointer-events: all;
    cursor: pointer;
}

.dc-chart a.reset {
    font-size: 80%;
    margin-left: 12px;
}

.dc-chart .reset.badge {
    float: right;
}

body {
    font-family: 'Libre Franklin', sans-serif;
    background-color: #f1f1f1;
    text-rendering: optimizeLegibility;
    font-weight: 200;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Fira Sans Extra Condensed', sans-serif;
    font-weight: 400;
}

svg {
    position: absolute;
}
footer {
    padding: 2em 0 1em 0;
    font-size: 12px;
}

.title {
    margin: 4px 10px;
    text-decoration: underline;
}

#body > p {
    line-height: 1.5em;
    width: 640px;
    text-rendering: optimizeLegibility;
}

.background.bar {
    fill: #e0e0e6;
}

.foreground.bar {
    fill: #6493D7;
}

.exams .foreground.bar, .inpatient .foreground.bar {
        fill: #5FB094;
}

.labs .foreground.bar, .costs .foreground.bar  {
    fill: #41A3AE;
}

.costs .foreground.bar {
    fill: #87b253;
}

.inp-visits .foreground.bar {
    fill: #7665aa;
}
.other-visits .foreground.bar {
        fill: #613453;
}

.risks .foreground.bar {
    fill: #f58352;

}

#sidebar .foreground.bar {

    fill: #bc1a41;
}

.axis path, .axis line {
    fill: none;
    stroke: #777;
    shape-rendering: crispEdges;
}

.axis text {
    font-size: 7px;
    font-weight: 400;
}

.axis.units text {
    font-size: 11px;
    fill: #999;
}

.brush rect.extent {
    fill: steelblue;
    fill-opacity: .125;
}

.brush .resize path {
    fill: #eee;
    stroke: #666;
}

#hour-chart {
    width: 260px;
}

#delay-chart {
    width: 230px;
}

#distance-chart {
    width: 420px;
}

#date-chart {
    width: 920px;
}

dd {
    text-align: right;
}

.dl-horizontal dt {
    width: auto;
    line-height: 1.1em;
    padding-top: 4px;
}

.dl-horizontal dt > input {
    margin: -4px 6px 4px 0;
}

#sidebar .table th > h5 {
    margin: 0;
}

.table-condensed > thead > tr > th {
    padding: 2px 5px;
}

.row {
    margin-left: -8px;
    margin-right: -8px;
}

.row > div {
    padding-left: 8px;
    padding-right: 8px;
}

header {
    padding: 10px 15px;
    border-bottom: 1px #ddd solid;
    margin-bottom: 15px;
    background-color: rgba(255, 255, 255, 0.8);
}

header > h1 {
    margin: 0;
    font-weight: 500;
    font-size: 28px;
}

header > h1 > span {
    font-weight: 200;
    letter-spacing: -2px;
}

footer {
    padding: 15px;
    border-top: 1px #ddd solid;
    margin-top: 15px;
    color: #aaa;
    background-color: rgba(128, 128, 128, 0.1);
    display: none;
}

#wrap > .row {
    padding-right: 4px;
}

header > h1 {
    margin-right: 4px;
}


.chart-like, .chart-section > div {
    margin: 0 0 16px 0;
    padding: 6px;
}

.chart-like, .chart-section {
    background-color: #fff;
    -webkit-box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.2);
    -moz-box-shadow:    1px 1px 2px 0px rgba(0, 0, 0, 0.2);
    box-shadow:         1px 1px 2px 0px rgba(0, 0, 0, 0.2);

    border-radius: 2px;
}

.chart-header {
    float: left;
    width: 100%;
    line-height: 1.4rem;
    font-size: 1.4rem;
}

.chart-header > div {
    margin: 0 0 4px 0; 
}

.chart-title {
    float: left;
    display: block;
    color: inherit;
    font-weight: 300;
}

.chart-reset {
    float: right;
    display: block;
    font-size: 1.2rem;
    color: #fff;
    border-radius: 12px;
}

.chart-reset > span {
    padding: 2px 6px 2px 8px;
    line-height: 2.2rem;
    cursor: pointer;
}

.chart-reset button.close {
    display: none;
}

.chart-body {
    min-height: 10vw;
    clear: both;
    overflow: hidden;
}
.chart-body > svg {
    height: 10vw;
}

.accordion .handle {
    font-size: 12px;
    color: #666;
    margin-top: -1px;
}

.accordion .handle:before {
    content:"\e252"
}

.accordion .collapsed .handle:before {
    content:"\e250"
}

#sidebar .accordion .handle {
    font-size: 11px;
    margin-right: 6px;
    color: #777;
}

#sidebar .accordion .collapsed .handle {
    margin-right: 0;
}

.chart {
    margin-bottom: 16px;
    margin-top: 6px;
}

.table.summary-table > tbody > tr:first-child > th, .table.summary-table > tbody > tr:first-child > td {
    border-top-width: 0;
}

.table.summary-table > tbody > tr > th, .table.summary-table > tbody > tr > td {
    padding: 4px;
}

.filter-tag {
    background-color: #f0f0f0;
    border-radius: 4px;
    margin-bottom: 3px;
    white-space: pre;
}

#filters-row > th > div, .filter-tag {
    line-height: 20px;
}
#filters-row > th > div {
    margin: 1px 0 2px 0;
}

.filter-none {
    color: #aaa;
    text-align: right;
    position: relative;
    top: 0;
    left: 0;
    display: none;
}
.filter-tag-title {
    font-weight: 700d;
    margin-right: 8px;
}
.filter-tag-title:empty {
    margin-right: 0;
}
button.close + .filter-from {
    font-weight: 700;
}

.filter-from:empty + .filter-to, .filter-to:empty, .filter-units:empty {
    display: none;
}

.filter-to:before {
    content: " to ";
}

html[lang="fr"] .filter-to:before {
    content: " à ";
}

button.close {
    float: none;
    color: #888;
    opacity: 0.8;
    font-size: 1em;
    margin: 0;
    padding: 0 8px;
}

.summary-table > tbody > tr > th {
    width: 60px;
}

header {
    background-image: url('/cpcssn_logo.png');
    background-position: 97% 50%;
    background-size: auto 60%;
    background-repeat: no-repeat;
}

.table td > div {
    width: 100%;
}

.table td.figure, .table th.figure {
    width: 5ch;
}

.table td.figure > span, .table th.figure > span {
    display: block;
    text-align: right;

}
.table td.figure > span {
    font-family: 'Droid Sans Mono', monospace;
}

.table td.control, .table th.control {
    width: 20px;
}

.table-condensed > tbody > tr > td {
    padding: 2px 4px;
}

.table-condensed > tbody > tr > td.control {
    padding-top: 1px;
    padding-bottom: 3px;
}

td.figure-delta, th.figure-delta {
    display: none;
}

.chart-section .table.summary-table tr > td.control {
    padding-left: 24px;
}
.chart-section .table.summary-table tr > td.control:first-child {
    padding-left: 0;
}

.chart-section .table.filter-table {
    margin-bottom: 0;
}

#sidebar h5 {
    margin: 4px 0 4px 0;
}

#sidebar table {
    background-color: rgba(255, 255, 255, 0.8);
    table-layout: fixed;
}

.row > #graphs {
    padding: 0 16px;
}

.chart-section {
    margin-bottom: 6px;
}

.chart-section > h4 {
    padding: 6px;
    background-color: #f8f8f8;
    border-bottom: 1px #ddd solid;
    margin-bottom: 0;
    margin-top: 0;
    font-size: 15px;
}


svg.pie-chart .arc {
    fill-opacity: 0.8;
    stroke: #fff;
    cursor: pointer;
}

svg.pie-chart .arc:hover {
    fill-opacity: 1.0;
}

svg.pie-chart .pie-text {
    font-size: 12px;
}

#sidebar .chart {

}
#sidebar .chart .chart-title {
    display: none;
}


#sidebar .chart .chart-body {
    min-height: 9vw;
}

#sidebar .chart  .chart-body > svg {
    height: 9vw;
}

.table.stats-table {
    margin-bottom: 0;
    font-size: 11px;
    table-layout: fixed;
    display: none;
}

.chart {
    display: none;
}
body.show-charts .chart {
    display: block;
}
body.show-stats .table.stats-table {
    display: table;
}


.table.stats-table tbody > tr > td {
    font-family: 'Droid Sans Mono', monospace;
}

.table.stats-table thead > tr > th, .table.stats-table tbody > tr > td {
    text-align: right;
}


.table.stats-table > tbody > tr > th, .table.stats-table > tbody > tr > td {
    padding: 2px;
}

.table.options-table > tbody > tr > td {
    padding-top: 12px;
    padding-bottom: 0;
    border-width: 0;
}

.table > thead > tr > th {
    border-bottom-width: 1px;
}
.table > tbody > tr:first-child > td {
    border-top: 2px #ddd solid;
}

#patient-list-wrap {
    margin: -6px;
    padding: 0;
    min-height: 250px;
    max-height: 500px;
    overflow-y: scroll;
}

#patient-list-wrap table {
    margin-bottom: 0;
    background-color: #fff;
}

#stats-frame {
    display: none;
}
#sidebar .table + .chart, {
    margin-top: -16px;
}
#sidebar .table + .row {
    margin-top: -18px;
    margin-bottom: 12px;
}
#sidebar .chart:last-child, #sidebar .table:last-child {
    margin-bottom: 0;
}


#counts {
    text-align: right;
}

#counts > span {
    font-size:16px; line-height: 12px; margin: 0 4px;
}

.stats-table th > span.units {
    color: #888;
    margin-left: 4px;
    font-size: 90%;
    font-weight: 300;
}

.stats-table > tbody > tr > th:first-child, .stats-table > thead > tr > th:first-child {
    width: 35%;
}

header {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 9000;
}

#sidebar {
    left: 0;
    position: fixed;
    top: 68px;
}

#wrap { padding-top: 67px; z-index: 10; }


#sidebar .row > div {
    padding-left: 0;
    padding-right: 0;
}

#summary {
    padding-bottom: 0;
}

.chart-modal {
    bottom: 0;
    display: block;
    left: 0;
    outline: 0 none;
    overflow-x: hidden;
    overflow-y: auto;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1050;
}

.chart-modal > .chart {
    margin: 90px auto;
    width: 600px;
    position: relative;
    transform: translate(0px, 0px);
    transition: transform 0.3s ease-out 0s;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    background-clip: padding-box;
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 0;
    outline: 0 none;
    position: relative;
}


#video-frame {
    margin-bottom: -6px;
}

#category-info {
    padding: 0;
    overflow: hidden;
}



.table td.control, .table th.control {
width: 30px;
}
.row-label td {
text-align: center;
text-transform: uppercase;
font-size: 1.15rem;
background-color: #f3f3f3;
}
tr.control-pad td.control input {
margin-left: 1rem;
}
.bit-table a > i {
margin-left: 0.3rem;
font-size: 1.35rem;
vertical-align: text-top;
}
.bit-table .row-label a > i {
vertical-align: top;
}
.encounters .foreground.bar {
fill: #dd71a9;
}
.atc-table td {
padding: 0.2rem;
font-size: 0.9rem;
}
.modal-dialog {
margin-top: 90px;
}
#video-frame {
margin-bottom: -6px;
}
#category-info {
padding: 0;
overflow: hidden;
}
#prov-chart .chart-body {
min-height: calc(2em + 20vw);
}
#prov-chart .chart-body svg {
height: calc(2em + 20vw);
}
#canada-map {
border-top: 1px #eee solid;
}
#canada-map .prov {
fill: #eee;
cursor: disabled;
}
#canada-map .prov.active {
fill: #d3d3d3;
cursor: pointer;
}
#canada-map .prov.selected {
fill: #ffb644;
}
.table td.figure > span {
font-family: 'Courier Prime', monospace;
font-weight: 400;
color: #333;
}
header h1 em {
color: #999;
font-size: 0.75em;
font-weight: 400;
font-style: normal;
}
header {
background-color: rgba(255, 255, 255, 0.9);
}
#sidebar {
position: sticky;
height: calc(100vh - 67px);
}
.table > thead > tr > th {
border-bottom-width: 0;
}
#counts > span {
font-size: 18px;
}
#counts > div {
padding-top: 0.4rem;
}
.explainer {
padding-top: 1rem;
}
.explainer p {
padding: 1rem;
}
#lang-picker {
position: fixed;
right: 1.5rem;
bottom: 1.5rem;
z-index: 1000;
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
}