#af-container,.af-kolom {
  width: 100%;
  box-sizing: border-box
}

#af-container {
  position: relative;
  margin: 0 auto;
  padding: 0
}

.af-kolom {
  float: left
}

#af-container:after,.af-rij:after {
  content: "";
  display: table;
  clear: both
}

@media (min-width:400px) {
  .af-container {
    width: 85%;
    padding: 0
  }
}

@media (min-width:768px) {
  .af-kolom,.af-kolom:first-child {
    margin-left: 0
  }

  #af-container {
    width: 100%
  }

  .af-kolom {
    margin-bottom: 0;
    position: relative;
    z-index: 1
  }

  .af-kolom.breedte1 {
    width: 8.33333333333%
  }

  .af-kolom.breedte2 {
    width: 16.6666666666%
  }

  .af-kolom.breedte3 {
    width: 25%
  }

  .af-kolom.breedte4 {
    width: 33.3333333333%
  }

  .af-kolom.breedte5 {
    width: 41.6666666666%
  }

  .af-kolom.breedte6 {
    width: 50%
  }

  .af-kolom.breedte7 {
    width: 58.3333333333%
  }

  .af-kolom.breedte8 {
    width: 66.6666666666%
  }

  .af-kolom.breedte9 {
    width: 75%
  }

  .af-kolom.breedte10 {
    width: 83.3333333333%
  }

  .af-kolom.breedte11 {
    width: 91.6666666666%
  }

  .af-kolom.breedte12 {
    width: 100%;
    margin-left: 0
  }
}

#af-container #box-trend {
  position: absolute;
  height: 100%;
  right: 0;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center
}

#af-container #box-trend .af-trend {
  text-align: center;
  font-size: 3rem;
  padding: 3px 6px;
  color: #333
}

@media (max-width:767px) {
  #af-container #box-trend {
    position: relative
  }
}

#af-container #box-kop {
  position: static;
  padding: 12px;
  border-right: 4.5px solid #fff;
  min-height: 5rem;
  z-index: 2
}

#af-container #box-kop h3 {
  display: inline-block;
  color: #fff;
  margin: 0;
  padding: 3px;
  font-size: 2.1rem
}

#af-container .af-menu-select {
  display: inline-block;
  cursor: pointer
}

#af-container #box-grafiek .af-lijngrafiek .verborgen,#af-container #box-grafiek .af-lijngrafiek .x.axis path,#af-container #box-grafiek .af-lijngrafiek .y.axis path,#af-container #box-kaart .af-kaart-legenda .achtergrond {
  display: none
}

#af-container .af-menu-select h3 {
  position: relative
}

#af-container .af-menu-select h3 a {
  text-decoration: none;
  color: #fff;
  border: none
}

#af-container .af-menu-select h3 a:focus {
  background-color: #d9ebf7;
  color: #333
}

#af-container .af-menu-select h3:after {
  content: '';
  width: initial;
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 0;
  border-width: 0 0 .2rem;
  border-style: solid
}

#af-container .af-menu-select h3:hover:after {
  border: none
}

#af-container .af-menu-select ul {
  max-height: 0;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
  z-index: 100;
  overflow: hidden;
  list-style: none;
  background-color: #007bc7;
  padding: 0;
  margin: -2px -1px 0
}

#af-container #box-uitleg,#af-container .af-menu-select ul.open {
  -webkit-transform: translateZ(0);
  -webkit-backface-visibility: hidden
}

#af-container #box-grafiek,#af-container #box-kaart {
  position: relative
}

#af-container .af-menu-select ul li {
  background-color: #007bc7;
  border-bottom: 1px solid #fff;
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
  color: #fff;
  padding: 3px 6px;
  cursor: pointer
}

#af-container #box-kaart,#af-container .af-menu-select ul li:hover {
  background-color: #d9ebf7
}

#af-container .af-menu-select ul li a {
  color: #fff
}

#af-container .af-menu-select ul li:first-of-type {
  border-top: 1px solid #fff
}

#af-container .af-menu-select ul li:hover a {
  text-decoration: none;
  border: none;
  color: #333
}

#af-container .af-menu-select ul.open {
  max-height: 400px;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
  transform: translateZ(0);
  backface-visibility: hidden;
  overflow: hidden
}

@media (max-width:767px) {
  #af-container #box-kop {
    border-right: none!important
  }
}

@media (max-width:400px) {
  #af-container #box-kop {
    padding: 6px 3px!important
  }
}

#af-container #box-kaart .af-wereldkaart {
  position: relative;
  height: 300px
}

#af-container #box-kaart .land {
  fill: #eee;
  stroke: #b2d7ee;
  stroke: #ccc;
  stroke-width: .5px;
  stroke-linejoin: round
}

#af-container #box-kaart .graticule {
  fill: #b2d7ee;
  stroke: none;
  stroke-opacity: .3;
  stroke-width: .5px
}

#af-container #box-kaart .kustlijn {
  stroke: #007bc7;
  stroke-width: .5;
  fill: none
}

#af-container #box-kaart .grens {
  stroke: #fff;
  stroke-width: 1;
  fill: none
}

#af-container #box-kaart #grenzen {
  pointer-events: none
}

#af-container #box-kaart .binnenwater {
  stroke: #007bc7;
  stroke-width: .3;
  fill: #b2d7ee
}

#af-container #box-kaart .stap1 {
  fill: #ba3381
}

#af-container #box-kaart .stap2 {
  fill: #d073a8
}

#af-container #box-kaart .stap3 {
  fill: #e5b2d0
}

#af-container #box-kaart .stap4 {
  fill: #c4dbb6
}

#af-container #box-kaart .stap5 {
  fill: #9cc385
}

#af-container #box-kaart .stap6 {
  fill: #619f3d
}

#af-container #box-kaart .niet-geselecteerd {
  opacity: .1
}

#af-container #box-kaart .geselecteerd .land {
  stroke-width: 1;
  stroke: #fff
}

#af-container #box-kaart .af-kaart-legenda rect {
  stroke: #fff;
  stroke-widh: .5
}

#af-container #box-kaart .af-kaart-legenda text {
  font-family: Sans;
  font-weight: 700;
  font-size: 1.2rem;
  fill: #007bc7
}

#af-container #box-grafiek #af-grafiek-titel {
  position: absolute;
  bottom: 3px;
  z-index: 1;
  width: 100%;
  text-align: center;
  color: #007bc7;
  font-size: 1.4rem;
  font-family: Sans
}

#af-container #box-grafiek .af-lijngrafiek {
  background-color: #d9ebf7;
  height: 250px;
  position: relative
}

#af-container #box-grafiek .af-lijngrafiek svg {
  overflow: visible
}

#af-container #box-grafiek .af-lijngrafiek .axis text {
  fill: #007bc7;
  font-size: 1.3rem;
  font-family: Sans
}

#af-container #box-grafiek .af-lijngrafiek .axis .path,#af-container #box-grafiek .af-lijngrafiek .axis line {
  fill: none;
  stroke: #666;
  stroke: #fff;
  stroke-width: 2
}

#af-container #box-grafiek .af-lijngrafiek .x.axis text {
  font-size: 1.3rem
}

#af-container #box-grafiek .af-lijngrafiek .y.axis line {
  opacity: .7
}

#af-container #box-grafiek .af-lijngrafiek .y.axis rect.af-eenheid {
  fill: #fff
}

#af-container #box-grafiek .af-lijngrafiek .y.axis .af-nullijn {
  stroke-width: 3;
  opacity: 1
}

#af-container #box-grafiek .af-lijngrafiek .cirkel {
  fill: #d9ebf7;
  stroke-width: 3
}

#af-container #box-grafiek .af-lijngrafiek .lijn {
  fill: none;
  stroke: #333;
  stroke-width: 3px
}

#af-container #box-grafiek .af-lijngrafiek .active {
  opacity: 1
}

#af-container #box-grafiek .af-lijngrafiek .muisvanger {
  pointer-events: all;
  stroke-width: 0;
  fill: #000;
  opacity: 0
}

#af-container #box-grafiek .af-lijngrafiek .gridlijn {
  stroke-width: .5;
  stroke: #666;
  display: none
}

#af-container #box-grafiek .af-lijngrafiek .verberg {
  opacity: .5
}

#af-container #box-grafiek .af-lijngrafiek .af-legenda {
  list-style: none;
  margin: 0;
  padding: 0
}

#af-container #box-grafiek .af-lijngrafiek .af-legenda li {
  display: inline-block;
  color: #333;
  cursor: pointer;
  margin: 0 30px 0 0;
  padding: 0
}

#af-container #box-grafiek .af-lijngrafiek .af-legenda li svg {
  vertical-align: middle
}

#af-container #box-grafiek .af-lijngrafiek .af-legenda li span {
  padding-left: 6px
}

#af-container #box-grafiek .af-lijngrafiek .af-legenda circle {
  fill: none;
  stroke-width: 3;
  display: none
}

#af-container #box-grafiek .af-lijngrafiek .af-legenda line {
  stroke-width: 3
}

#af-container #box-grafiek .af-lijngrafiek .af-rolmenu {
  height: 30px;
  overflow-y: auto
}

#af-container #box-grafiek .af-lijngrafiek .af-rolmenu li {
  display: block
}

#af-container #box-grafiek .af-lijngrafiek .af-tooltip line {
  display: none
}

#af-container #box-grafiek .af-lijngrafiek .reeks1 {
  stroke: #007bc7
}

#af-container #box-grafiek .af-lijngrafiek .reeks2 {
  stroke: #e5b2cf
}

#af-container #box-grafiek .af-lijngrafiek .reeks3 {
  stroke: #f2d9e7
}

@media (max-width:630px) {
  #af-container .af-lijngrafiek .axis text {
    font-size: 1.1rem!important
  }

  #af-container .af-lijngrafiek .lijn {
    stroke-width: 1.5px!important
  }

  #af-container #af-grafiek-titel {
    position: static!important;
    padding: 3px!important
  }
}

@media (max-width:1200px) and (min-width:900px) {
  #af-container .af-lijngrafiek .axis text {
    font-size: 1.1rem!important
  }

  #af-container .af-lijngrafiek .lijn {
    stroke-width: 2px!important
  }

  #af-container #af-grafiek-titel {
    position: static!important;
    padding-top: 15px!important
  }
}

#af-container .af-tooltip {
  font-family: Sans;
  position: absolute;
  pointer-events: none;
  z-index: 100;
  width: 200px;
  display: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none
}

#af-container .af-tooltip table {
  margin-bottom: 0;
  empty-cells: show;
  border-collapse: collapse;
  border-spacing: 0
}

#af-container .af-tooltip tbody {
  border: 1px solid #555;
  border-radius: 6px;
  display: block;
  overflow: hidden;
  background-color: #fff
}

#af-container .af-tooltip tr {
  border-bottom: 1px solid #CCC
}

#af-container .af-tooltip h5,#af-container .af-tooltip th {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  border: 1px solid #555;
  background-color: #555;
  font-weight: 700
}

#af-container .af-tooltip th {
  border-radius: 3px 3px 0 0;
  font-size: 12px;
  padding: 2px 5px;
  text-align: center;
  color: #FFF
}

#af-container .af-tooltip td {
  font-size: 10px;
  padding: 3px 6px;
  color: #000;
  text-align: left
}

#af-container .af-tooltip td>span {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px
}

#af-container .af-tooltip td.tt-val {
  text-align: right
}

#af-container .af-tooltip circle {
  fill: none;
  stroke-width: 3
}

#af-container .af-tooltip h5 {
  border-radius: 6px 6px 0 0;
  font-size: 12px;
  padding: 2px 5px;
  text-align: center;
  color: #FFF;
  margin: 0
}

#af-container .af-tooltip .tt-body {
  border: 1px solid #555;
  border-radius: 0 0 6px 6px;
  padding: 0;
  font-size: 1.2rem;
  display: block;
  overflow: hidden;
  background-color: #fff
}

#af-container .af-tooltip .tt-body p {
  margin: 0;
  padding: 0
}

#af-container .af-tooltip .tt-waarde {
  font-size: 1.8rem;
  color: #333
}

#af-container {
  background-color: #d9ebf7;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none
}

#af-container .af-box {
  border-bottom: 4.5px solid #fff
}

#af-container .af-rij-1 {
  position: relative;
  background-color: #007bc7
}

#af-container .af-rij-2 {
  z-index: 1
}

#af-container .af-rij-2 .af-tooltip {
  z-index: 3!important
}

#af-container .af-rij-4 {
  background-color: #007bc7;
  text-align: right
}

#af-container .af-rij-4 ul {
  list-style: none;
  display: inline-block;
  padding: 0;
  margin: 6px 6px 0 0
}

#af-container .af-rij-4 ul li {
  float: left;
  margin: 0 3px
}

#af-container .af-rij-4 ul li a {
  display: block;
  color: #fff;
  text-align: center;
  padding: 3px;
  text-decoration: none;
  border-radius: 3px;
  border: 1px solid #007bc7
}

#af-container .af-rij-4 ul li a:focus,#af-container .af-rij-4 ul li a:hover {
  background-color: #fff;
  color: #007bc7
}

#af-container .stap1,#af-container .stap6 {
  color: #fff!important
}

#af-container .stap1 {
  background-color: #ba3381
}

#af-container .stap2 {
  background-color: #d073a8
}

#af-container .stap3 {
  background-color: #e5b2d0
}

#af-container .stap4 {
  background-color: #c4dbb6
}

#af-container .stap5 {
  background-color: #9cc385
}

#af-container .stap6 {
  background-color: #619f3d
}

#af-container #box-uitleg {
  -webkit-user-select: auto;
  -moz-user-select: auto;
  -ms-user-select: auto;
  user-select: auto;
  background-color: #007bc7;
  max-height: 0;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
  transform: translateZ(0);
  backface-visibility: hidden;
  overflow: hidden;
  color: #fff;
  text-align: left;
  border-bottom: 0 solid #007bc7
}

#af-container #box-uitleg p {
  margin: 0;
  padding: 1rem 1rem 0
}

#af-container #box-uitleg p:last-of-type {
  padding-bottom: 1rem
}

#af-container #box-uitleg ul {
  list-style: none;
  padding: 1rem
}

#af-container #box-uitleg ul li {
  color: #fff;
  display: block;
  float: none
}

#af-container #box-uitleg.open {
  max-height: 400px;
  -webkit-transition: max-height .3s lineair;
  transition: max-height .3s lineair;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  overflow: hidden;
  border-bottom: 4.5px solid #fff
}

@media print {
  #af-container {
    -webkit-print-color-adjust: exact
  }

  #af-container #box-kop h3 {
    font-size: 1.8em!important
  }

  #af-container #box-kop h3:after {
    border: none
  }

  .af-rij-4,.content_main_attachements {
    display: none
  }
}