/* container */
#top-container {
  margin-bottom: 30px;
}

/* select box */
.select-box {
  margin-bottom: 24px;
}

.select-box label {
  font-weight: normal;
  display: block;
  margin-top: 24px;
  margin-bottom: 10px;
}

.select2-container {
  margin-bottom: 16px;
}

#year-value-box {
  height: 24px;
  position: relative;
}

#year-value {
  font-weight: bold;
  color: #005470;
  margin: 0 auto;
  position: absolute;
  right: 0;
}

#year-box {
  width: 100%;
  text-align: center;
}

#year-slider-box {
  margin-bottom: 24px;
}

#start-end-years-box {
  position: relative;
}

#start-end-years-box p {
  position: absolute;
  margin: 0;
}

#start-year {
  left: 0;
}

#end-year {
  right: 0;
}

#year-slider-box > *,
#year-box button,
#year-box button i {
  margin: 0;
}

input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 8px;
  background: var(--cbs-light-gray);
  outline: none;
  -webkit-transition: 0.2s;
  transition: opacity 0.2s;
  border-radius: 0.313rem;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #005470;
  cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #005470;
  cursor: pointer;
}

/* Uitleg of definitie van het onderwerp */

div#dashboard-explanation {
  margin-bottom: 24px;
}

/* kaart */

div#dashboard-map
  g.highcharts-series
  path.highcharts-point:not(.highcharts-null-point) {
  cursor: pointer;
}

.cbs-map-color-multiple-0 .highcharts-color-0 {
  fill: #82001e;
}

.cbs-map-color-multiple-0 .highcharts-color-1,
.cbs-map-color-multiple-1 .highcharts-color-0 {
  fill: #c01f26;
}

.cbs-map-color-multiple-0 .highcharts-color-2,
.cbs-map-color-multiple-1 .highcharts-color-1,
.cbs-map-color-multiple-2 .highcharts-color-0 {
  fill: #e74d15;
}

.cbs-map-color-multiple-0 .highcharts-color-3,
.cbs-map-color-multiple-1 .highcharts-color-2,
.cbs-map-color-multiple-2 .highcharts-color-1,
.cbs-map-color-multiple-3 .highcharts-color-0 {
  fill: #f89e6b;
}

.cbs-map-color-multiple-0 .highcharts-color-4,
.cbs-map-color-multiple-1 .highcharts-color-3,
.cbs-map-color-multiple-2 .highcharts-color-2,
.cbs-map-color-multiple-3 .highcharts-color-1,
.cbs-map-color-multiple-4 .highcharts-color-0 {
  fill: #ffc597;
}

.cbs-map-color-multiple-1 .highcharts-color-4,
.cbs-map-color-multiple-2 .highcharts-color-3,
.cbs-map-color-multiple-3 .highcharts-color-2,
.cbs-map-color-multiple-4 .highcharts-color-1,
.cbs-map-color-multiple-5 .highcharts-color-0 {
  fill: #a3a3a3;
}

.cbs-map-color-multiple-2 .highcharts-color-4,
.cbs-map-color-multiple-3 .highcharts-color-3,
.cbs-map-color-multiple-4 .highcharts-color-2,
.cbs-map-color-multiple-5 .highcharts-color-1,
.cbs-map-color-multiple-6 .highcharts-color-0 {
  fill: #c0e7ff;
}

.cbs-map-color-multiple-3 .highcharts-color-4,
.cbs-map-color-multiple-4 .highcharts-color-3,
.cbs-map-color-multiple-5 .highcharts-color-2,
.cbs-map-color-multiple-6 .highcharts-color-1 {
  fill: #77cbe5;
}

.cbs-map-color-multiple-4 .highcharts-color-4,
.cbs-map-color-multiple-5 .highcharts-color-3,
.cbs-map-color-multiple-6 .highcharts-color-2 {
  fill: #3d95d4;
}

.cbs-map-color-multiple-5 .highcharts-color-4,
.cbs-map-color-multiple-6 .highcharts-color-3 {
  fill: #2256a0;
}

.cbs-map-color-multiple-6 .highcharts-color-4 {
  fill: #143564;
}

.cbs-map-color-unknown {
  fill: var(--cbs-light-gray) !important;
}

#dashboard-map:has(.cbs-map-color-unknown)
  .highcharts-legend-item:last-of-type {
  stroke: var(--cbs-light-gray);
  fill: var(--cbs-light-gray);
}

/* grafiek */

div#dashboard-chart g.highcharts-series rect.highcharts-point {
  cursor: pointer;
}

div#dashboard-chart path.EU27-line {
  stroke: #163a72;
  stroke-dasharray: 4px 2px;
  stroke-width: 2px;
}

div#dashboard-chart text.highcharts-plot-line-label {
  fill: #163a72;
  font-weight: bold;
}

#year-slider-label {
  display: none;
}

@media screen and (min-width: 992px) {
  div#dashboard-chart text.highcharts-title {
    display: none;
  }

  div#dashboard-chart path.cbs-axis-logo {
    display: none;
  }

  div#dashboard-chart {
    margin-top: 50px;
  }
}

/* Bronvermelding */

div#dashboard-source {
  margin: 2em 0em;
  font-size: 12px;
}