/*
  Width of visualisation: 960
*/
@font-face {
  font-family: FranklinGothicHvy;
  src: url("../fonts/FranklinGothic-Hvy-webfont.ttf");
}
@font-face {
  font-family: FranklinGothicDemi;
  src: url("../fonts/FranklinGothic-Demi-webfont.ttf");
}
html,
body {
  margin: 0;
  padding: 0;
}
th {
  font-weight: bold;
}
body {
  font-family: Arial, Helvetica sans-serif;
  font-size: 13px;
  overflow: hidden;
  color: #333;
}
h1,
h2 {
  margin: 0;
  padding: 0;
}
.has-mouse-over {
  border-bottom: 1px dotted #aaa;
  cursor: default;
}
.main-title {
  color: #649ec9;
  font-size: 22px;
  font-family: FranklinGothicFSHeavy, Arial, Helvetica, Sans-serif;
  text-transform: uppercase;
}
.tool-tip {
  background-color: rgba(240,244,248,0.9);
  border: 1px solid #d4e0eb;
  padding: 10px;
}
.tool-tip .tool-tip__regio {
  font-weight: bold;
}
#svg-container {
  margin-left: 55px;
  margin-top: 70px;
}
.source {
  position: absolute;
  left: 0;
  top: 632px;
  color: #649ec9;
}
.dashboard-title {
  color: #649ec9;
  font-size: 16px;
  font-family: FranklinGothicFSHeavy, Arial, Helvetica, Sans-serif;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 15px;
}
.dashboard-title.dashboard-title--regio {
  color: #f90;
}
.select-container__select {
  float: right;
  width: 190px;
}
.dashboard {
  width: 395px;
  position: absolute;
  left: 500px;
  top: 0px;
  padding: 15px;
  border: 1px solid #ddd;
}
.dashboard-panel {
  background-color: #f0f4f8;
  padding: 15px;
}
.dashboard-panel:first-child {
  margin-bottom: 15px;
}
.dashboard__table {
  width: 100%;
}
.dashboard__cell-region {
  width: 60%;
  text-align: right;
  padding-right: 15px;
}
.dashboard__cell-indicator {
  width: 50%;
  text-align: left;
}
.dashboard__table-row .dashboard__cell-indicator {
  padding-left: 0;
}
.dashboard__table-row.dashboard__table-row--agressie .dashboard__cell-indicator {
  padding-left: 0;
  text-transform: uppercase;
}
.dashboard__cell-value {
  text-align: right;
  padding-right: 15px;
}
.dashboard__ranking .dashboard__cell-value {
  padding-right: 55px;
}
.marker {
  width: 15px;
  height: 10px;
}
.marker:after {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  background-color: #ccc;
  transition: background-color 0.5s ease;
}
.score {
  width: 15px;
  cursor: default;
}
.score:after {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  background-color: #ccc;
  color: #fff;
  font-size: 10px;
  padding: 2px;
  text-align: center;
  transition: background-color 0.5s ease;
}
.score.score--active:after {
  background-color: #f90;
}
.score--1.score--active:after {
  content: "L";
}
.score--2.score--active:after {
  content: "G";
}
.score--3.score--active:after {
  content: "H";
}
.region {
  fill: #eee;
  stroke: #fff;
  transition: fill 0.5s ease;
  cursor: pointer;
}
.region:hover {
  fill: #ffad33;
}
.region.region--selected {
  stroke: #f90;
  stroke-width: 2px;
}
.region--1 {
  fill: #192c38;
}
.marker--1:after {
  background-color: #192c38;
}
.region--2 {
  fill: #1f3746;
}
.marker--2:after {
  background-color: #1f3746;
}
.region--3 {
  fill: #264254;
}
.marker--3:after {
  background-color: #264254;
}
.region--4 {
  fill: #2c4d62;
}
.marker--4:after {
  background-color: #2c4d62;
}
.region--5 {
  fill: #325870;
}
.marker--5:after {
  background-color: #325870;
}
.region--6 {
  fill: #38637f;
}
.marker--6:after {
  background-color: #38637f;
}
.region--7 {
  fill: #3f6e8d;
}
.marker--7:after {
  background-color: #3f6e8d;
}
.region--8 {
  fill: #457a9b;
}
.marker--8:after {
  background-color: #457a9b;
}
.region--9 {
  fill: #4b85a9;
}
.marker--9:after {
  background-color: #4b85a9;
}
.region--10 {
  fill: #558fb3;
}
.marker--10:after {
  background-color: #558fb3;
}
.region--11 {
  fill: #6398ba;
}
.marker--11:after {
  background-color: #6398ba;
}
.region--12 {
  fill: #72a2c0;
}
.marker--12:after {
  background-color: #72a2c0;
}
.region--13 {
  fill: #80abc6;
}
.marker--13:after {
  background-color: #80abc6;
}
.region--14 {
  fill: #8eb4cc;
}
.marker--14:after {
  background-color: #8eb4cc;
}
.region--15 {
  fill: #9cbdd3;
}
.marker--15:after {
  background-color: #9cbdd3;
}
.region--16 {
  fill: #aac7d9;
}
.marker--16:after {
  background-color: #aac7d9;
}
.dashboard__cell-trend {
  text-align: center;
  cursor: default;
}
.dashboard__cell-trend.dashboard__cell-trend---1:before {
  content: "\25BC";
  color: #0c1922;
}
.dashboard__cell-trend.dashboard__cell-trend--0:before {
  content: "=";
  color: #aaa;
}
.dashboard__cell-trend.dashboard__cell-trend--1:before {
  content: "\25B2";
  color: #0c1922;
}