html, body {
}

body {
	margin: 0 auto;
	background-color: #333;
}

#viz {
	padding: 15px 15px;
	height: 100%;
	margin: 0 auto;
	background-color: #FFF;
}
@media (min-width: 550px) {
  #viz {
  	padding: 15px 25px;  
  }
}

#viz p {
	margin: 0;
	margin-bottom: 10px;
}

#viz a {
  text-decoration: underline;
}

#viz h2 {
  line-height: 1.0;
}

#viz #header {
	margin-top: 10px;
	margin-bottom: 0px;
}

#viz #header h1 {
  font-size: 3.2rem;
	margin-bottom: 10px;
}
@media (min-width: 750px) {
  #viz #header h1 {
    font-size: 5rem;
  }
}

#viz #nanobar-container {
  height: 5px;
  margin-bottom: 5px;
}

#viz #header > img {
  width: 100%;
  margin-bottom: 20px;
}

#viz #header > p {
	margin-bottom: 20px;
}

#viz #main {
	width: 100%;
	margin: 0;
}

#main h2 {
	font-size: 2.5rem;
	margin-bottom: 5px;
}

#main section {
	margin-bottom: 30px;
}

#main section p {
  line-height: 1.25;
  margin-bottom: 15px;
}

#main p.legend {
  font-size: 0.8rem;
  text-align: center;
  padding: 2px;
  margin: 5px 0;

  font-family: "epocapro", sans-serif;
  font-size: 0.8rem;
  text-align: left;
  padding-left: 0px;
  color: #000;
}


/* Charts
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#viz .chart {
	height: 250px;
	width: 100%!important;
}
@media (min-width: 750px) {
  #viz .chart { height: 320px; }
}

#viz .chart.dark {
  background-color: #000;
}

#viz .chart:not(dark) {
  -webkit-transition: background-color 1s;
  -moz-transition: background-color 1s;
  -transition: background-color 1s;
  transition: background-color 1s;
  background-color: #FAFAFC;
}

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

#viz .chart .axis path {
  display: none;
}

#viz .chart .axis text {
  font-family: "dharmaGothicE", sans-serif;
  font-size: 1rem;
  font-weight: 300;
  text-anchor: middle;
}


/* Chart popups
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#viz .chart {
  position: relative;
}
#viz .chart-popup {
  min-width: 120px;
  min-height: 40px;
  background-color: rgba(255,255,255,0.9);
  position: absolute;
  top: -25px;
  left: 0px;
  box-shadow: 0px 3px 5px #444;
  border: 3px solid #EEE;
  border-radius: 5px;
  padding: 5px;
  display: none;
  pointer-events: none;
}

#viz .chart-popup p.date {
  font-family: "dharmaGothicE", sans-serif;
  font-size: 1.2rem;
  font-weight: 500;
  margin: 0 0 5px 0;
  text-align: center;
  background-color: #444;
  color: #FFF;
  padding: 3px;

  font-family: "epocapro", sans-serif;
  font-size: 0.8rem;
  font-weight: 400;
}
#viz .chart-popup table {
  width: 100%;
  padding: 0 5px;
}
#viz .chart-popup table tbody tr:nth-of-type(even) {
  background-color: #EEE;
}

#viz .chart-popup table td {
  font-family: "epocapro", sans-serif;
  font-size: 0.7rem;
  font-weight: 400;
  text-align: left;
}
#viz .chart-popup table td:nth-child(2) {
  text-align: right;
}


/* Filters
–––––––––––––––––––––––––––––––––––––––––––––––––– */
section .filters {
  margin-bottom: 10px;
}

section .filters select {
  font-family: sans-serif;
  font-size: 0.9rem;
  margin-right: 0;
}

@media (min-width: 550px) {
  section .filters select { margin-right: 10px; }
}


/* Labels
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#main .chart text.chart-title,
#main .chart text.chart-title-sm {
	font-family: "epocapro", sans-serif;
	ofont-style: italic;
  text-anchor: start;
}

#main .chart text.chart-title {
	font-size: 0.8rem;
  font-weight: 500;
  fill: #000;
}

#main .chart text.chart-title-sm {
	font-size: 0.75rem;
  font-weight: 300;
  fill: #000;
}



/* Dragdealer
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.dragdealer {
  background: #EEE;
  border-radius: 0px;
  position: relative;
  height: 40px;
}

.dragdealer .handle {
  font-family: "epocapro", sans-serif;
  font-size: 11px;
  font-weight: 500;
  
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
  width: 80px;
  text-align: center;
  height: 40px;
  line-height: 40px;
  border-radius: 0px;
  
  background-color: #666;
  color: #FFF;
  border: 4px solid #444;
}

.dragdealer .handle.red-bar {
  background: #CC0000;
  color: #FFF;
}


/* Tableau sommaire
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#main #tableau-sommaire .chart {
}

#main .chart text.results-date {
	font-family: "epocapro", sans-serif;
	font-size: 0.75rem;
	font-style: italic;
	fill: #888;
	text-anchor: start;
	
  ofont-style: normal;
	font-size: 0.75rem;
  fill: #000;
  font-weight: 400;
  text-anchor: middle;
}

#main .chart svg .bar {
	stroke: #000;
	stroke-width: 4px;
}

#main .chart svg .PCC .bar {
	fill:  #1A4782;
	stroke: hsl(214,67%,21%);
}

#main .chart svg .NPD .bar {
	fill:  #F37021;
	stroke: hsl(20,87%,46%);
}

#main .chart svg .PLC .bar {
	fill:  #D71920;
	stroke: hsl(358,79%,37%);
}

#main .chart svg .PVC .bar {
	fill:  #3D9B35;
	stroke: hsl(116,45%,32%);
}

#main .chart svg .BQ .bar {
	fill:  #00A7EC;
	stroke: hsl(198,100%,36%);
}

#main .chart svg line.chances {
	stroke: #000;
	stroke-width: 2px;
	stroke-dasharray: 2,2;
	stroke-opacity: 0.8;
}

/* SVG TEXT */
#main .chart svg text {
  text-anchor: middle;
}


/* Bar headers
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#main .chart svg text.bar-header {
  font-family: "dharmaGothicE", sans-serif;
  font-size: 1.5rem!important;
  font-weight: 800!important;
  letter-spacing: 1px;
  fill-opacity: 1;
}
#main .chart svg .PCC text.bar-header {
	fill:  #1A4782;
}
#main .chart svg .NPD text.bar-header {
	fill:  #F37021;
}
#main .chart svg .PLC text.bar-header {
	fill:  #D71920;
}
#main .chart svg .PVC text.bar-header {
	fill:  #3D9B35;
}
#main .chart svg .BQ text.bar-header {
	fill:  #00A7EC;
}


/* Chances
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#main .chart svg .chances text {
  font-family: "dharmaGothicE", sans-serif;
  font-size: 0.9rem!important;
  font-weight: 300!important;
  ofont-style: italic;
}


/* Seats
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#main .chart svg text.seats {
  font-family: "dharmaGothicE", sans-serif;
  font-size: 1rem!important;
  font-weight: 400!important;
  fill-opacity: 1;
  text-anchor: middle;
}



/* Tendances
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#viz #main #tendance .chart {
}

#viz .chart svg .line {
  fill: none;
  stroke-width: 2px;
  stroke: #000;
}

#viz .chart svg .PCC .line {
	stroke:  #1A4782;
}
#viz .chart svg .NPD .line {
	stroke:  #F37021;
}
#viz .chart svg .PLC .line {
	stroke:  #D71920;
}
#viz .chart svg .PVC .line {
	stroke:  #3D9B35;
}
#viz .chart svg .BQ .line {
	stroke:  #00A7EC;
}

#viz #main #tendance .chart .axis text {
  text-anchor: start;
  font-family: "epocapro", sans-serif;
  font-size: 0.65rem;
  font-weight: 300;
}

#viz #main #tendance .chart .y.axis .tick line {
  stroke-width: 0;
}

#viz #main #tendance .chart .PCC circle.dot { fill: hsl(214,63%,20%); }
#viz #main #tendance .chart .PLC circle.dot { fill: hsl(356,76%,40%); }
#viz #main #tendance .chart .NPD circle.dot { fill: hsl(20,87%,40%); }
#viz #main #tendance .chart .PVC circle.dot { fill: hsl(116,45%,35%); }
#viz #main #tendance .chart .BQ circle.dot { fill: hsl(199,82%,35%); }

#viz #main #tendance .chart circle.target {
  fill-opacity: 0;
  fill:  #000;
  cursor: pointer;
}

#viz #main #tendance .chart circle.dot.highlighted {
  stroke:  #FFF;
  stroke-width: 2px;
}

#viz #main #tendance .chart circle.target:hover {
  ofill-opacity: 0.1;
}

#viz #main .chart .x.axis .tick text {
  font-weight: 500;
}

#viz #main #tendance .chart text.line-label {
  text-anchor: start;
  font-family: "dharmaGothicE", sans-serif;
  font-size: 1.1rem;
  font-weight: 300;
}


/* Portrait d'ensemble
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#viz #portrait-d-ensemble .chart {
}


/* Projections par comté
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#viz #projections-par-comté {
}

#viz #projections-par-comté .chart {
  margin-bottom: 10px;
}

#viz #projections-par-comté .filters {
  margin-bottom: 0;
}

#viz #projections-par-comté table {
  width: 100%;
  margin-bottom: 10px;
}

#viz #projections-par-comté table th {
  font-family: "dharmaGothicE", sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  background-color: #000;
  color: #FFF;
  padding: 5px;
  cursor: pointer;
}

#viz #projections-par-comté table[data-sortable] th:after {
  margin-left: 3px;
  margin-right: 0;
  float: inherit;
}

#viz #projections-par-comté table th:first-child {
  width: 40%;
}

#viz #projections-par-comté table th i {
  display: none;
}

#viz #projections-par-comté table tbody tr {
  cursor: pointer;
}

#viz #projections-par-comté table tbody tr:nth-of-type(even) {
  background-color: #EEE;
}

#viz #projections-par-comté table tbody tr.PCC td:nth-child(2){
	background-color:  #1A4782;
	color: #FFF;
}

#viz #projections-par-comté table tbody tr.PLC td:nth-child(2){
	background-color:  #D71920;
	color: #FFF;
}

#viz #projections-par-comté table tbody tr.NPD td:nth-child(2){
	background-color: #F37021;
	color: #FFF;
}

#viz #projections-par-comté table tbody tr.PVC td:nth-child(2){
	background-color:  #3D9B35;
	color: #FFF;
}

#viz #projections-par-comté table tbody tr.BQ td:nth-child(2){
	background-color: #00A7EC;
	color: #FFF;
}

/*#viz #projections-par-comté table tbody tr:nth-of-type(even) {
  background-color: #FAFAFC;
}*/

#viz #projections-par-comté table tbody tr:hover {
  background-color: #444;
  color: #fff;
}

#viz #projections-par-comté table tbody tr.selected td {
  background-color: #000!important;
  color: #fff;
}

#viz #projections-par-comté table td {
  font-family: "epocapro", sans-serif;
  font-size: 0.7rem;
  font-weight: 400;
  padding: 2px 4px;
}

#viz #projections-par-comté table th:nth-child(2),
#viz #projections-par-comté table td:nth-child(2) {
  text-align: center;
}

#viz #projections-par-comté table th:nth-child(3),
#viz #projections-par-comté table td:nth-child(3),
#viz #projections-par-comté table th:nth-child(4),
#viz #projections-par-comté table td:nth-child(4){
  text-align: right;
}


/* Notes
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#viz .note {
  padding: 7px 10px;
  margin-bottom: 15px;
  border-radius: 1px;
  border: 1px solid rgba(0,0,0,0.02);
}
#viz .note p,
#viz .note a,
{
  margin-bottom: 10px!important;
}
#viz .note p:last-child {
  margin-bottom: 0!important;
}
#viz .note ul {
  margin: 0;
  padding: 0 0 0 20px;
}

#viz .note {
  background-color: #D9EDF7;
}
#viz .note.warning {
  background-color: #FCF8E3;
}
#viz .note.success {
  background-color: #DFF0D8;
}
#viz .note p,
#viz .note a,
#viz .note li {
  font-family: "epocapro", sans-serif;
  font-size: 0.8rem!important;
  color: #31708F;
}
#viz .note.warning p,
#viz .note.warning a {
  color: #8A6D3B;
  font-weight: 400!important;
}
#viz .note.success p,
#viz .note.success a {
  color: #3C763D;
}


/* Helpers
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.transparent {
	opacity: 0;
}

strong {
  font-weight: 500;
}


/* OVERRIDES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.dragdealer {
	display: none!important;
}


/* Larger than mobile
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (min-width: 400px) {}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {}

/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}