HTML, BODY {
  font-family: Verdana, Arial, sans-serif;
  line-height: 1.3;
  font-size: 1rem;
  width: 100%;
  height: 100%;
}

BODY {
  background: #E5E5E5;
  color: #000000;
}

.body-top-message {
  position: absolute;
  background-color: #EC0000;
  color: #FFFFFF;
  padding: 10px 0;
  width: 100%;
  text-align: center;
  z-index: 99;
}

.container {
  display: flex;
  flex-direction: column;
  background-color: #FFFFFF;
  padding-left: 30px;
  padding-right: 30px;
  min-height: 100%;
}

H1, H2, H3, H4, H5, H6 {}

H1 { font-size: 2rem; }
H2 { font-size: 1.75rem; }
H3 { font-size: 1.5rem; }
H4 { font-size: 1.25rem; }
H5 { font-size: 1rem; }
H6 { font-size: 1rem; }

.margin-bottom { margin-bottom: 20px; }
.margin-top { margin-top: 20px; }

LABEL { font-weight: bold; }

a {
  color: #006CE0;
  text-decoration: none;
  background-color: transparent;
}
a:hover,
a:focus {
  color: #426e9d;
  text-decoration: none;
  background-color: transparent;
}

/*******************************************/
/*******************************************/

#header {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

.header-top {
  margin-top: 15px;
  margin-bottom: 15px;
  font-size: 12px;
  overflow: hidden;
}

.logo-beeldmerk {
  float: left;
  margin-right: 20px;
}
.logo-beeldmerk IMG { width: 80px; }

.logo-text {
  color: #985B92;
}
.groeigidsapp {
  float: right;
  padding-top: 4px;
}
.clear {
  clear: both; 
}

.logo-title {
  font-size: 30px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 10px;
}

.logo-subtitle {
  font-size: 18px;
  margin-top: -5px;
  color: #63BAE9;
}



/*******************************************/
/*******************************************/


#content {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
  background-color: #FFFFFF;
  padding-top: 20px;
  padding-bottom: 20px;
}


/*******************************************/
/*******************************************/


#footer {
  display: none;
  padding-top: 10px;
  padding-bottom: 10px;
  
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

#footer .footer-logo {
  text-align: right;
}
#footer .footer-logo IMG {
  width: 100%;
  max-width: 200px;
}

#footer A {
  color: #FFFFFF;
}
#footer A:hover,
#footer A:focus {
  background: none;
  color: #FF0000;
}


/*******************************************/
/*******************************************/


#header {
  display: block;
  overflow: hidden;
  clear: both;
}

#header .header-blocks {
  --header-block-rows: 2;
  --header-block-height: 65px;
  --header-block-width: calc(100% / 9); /* 11.11111% */
  --header-block-border: 3px;
  --header-height: calc((var(--header-block-height) * var(--header-block-rows)) + var(--header-block-border)); /* 3 rows = 201px / 2 rows = 135px */
  --jejg-blue: #00AEEF;
  --jejg-pink: #EC008C;
  --jejg-orange: #F7941E;

  position: relative;
  height: var(--header-height);
}

.hblok {
  display: block;
  position: absolute;
  background: #000000;
  background-repeat: no-repeat;
  width: var(--header-block-width);
  height: var(--header-block-height);
  border-right: var(--header-block-border) solid #FFFFFF;
}

/** HBLOK - position **/
[class*="hblok1"] { top: 0px; }
.hblok1-1 { left: 0px; width: 22.222222%; }
.hblok1-2 { left: 11.11111%; display: none; }
.hblok1-3 { left: 22.22222%; }
.hblok1-4 { left: 33.33333%; height: calc(var(--header-block-height) * 1.2); }
.hblok1-5 { left: 44.44444%; height: calc((var(--header-block-height) * 2) + var(--header-block-border)); }
.hblok1-6 { left: 55.55555%; height: calc(var(--header-block-height) * 0.55); }
.hblok1-7 { left: 66.66666%; }
.hblok1-8 { left: 77.77777%; }
.hblok1-9 { left: 88.88888%; height: calc(var(--header-block-height) * 1.35); }

[class*="hblok2"] { top: calc(var(--header-block-height) + var(--header-block-border)); }
.hblok2-1 { left: 0px; }
.hblok2-2 { left: 11.11111%; width: 22.222222%; }
.hblok2-3 { left: 22.22222%; display: none; }
.hblok2-4 { left: 33.33333%; top: calc((var(--header-block-height) * 1.2) + var(--header-block-border)); height: calc(var(--header-block-height) * 0.8); }
.hblok2-5 { left: 44.44444%; display: none; }
.hblok2-6 { left: 55.55555%; top: calc((var(--header-block-height) * 0.55) + var(--header-block-border)); height: calc(var(--header-block-height) * 1.45); }
.hblok2-7 { left: 66.66666%; width: 22.22222%; }
.hblok2-8 { left: 77.77777%; display: none; }
.hblok2-9 { left: 88.88888%; top: calc((var(--header-block-height) * 1.35) + var(--header-block-border)); height: calc(var(--header-block-height) * 0.65); }

[class*="hblok3"] { top: calc((var(--header-block-height) + var(--header-block-border)) * 2); }
.hblok3-1 { left: 0px; }
.hblok3-2 { left: 11.11111%; width: 22.22222%; }
.hblok3-3 { left: 22.22222%; display: none; }
.hblok3-4 { left: 33.33333%; }
.hblok3-5 { left: 44.44444%; }
.hblok3-6 { left: 55.55555%; display: none }
.hblok3-7 { left: 66.66666%; }
.hblok3-8 { left: 77.77777%; }
.hblok3-9 { left: 88.88888%; }

/** HBLOK - Background color **/
.hblok1-1,
.hblok1-2,
.hblok1-5,
.hblok1-7,
.hblok1-9,
.hblok2-2,
.hblok2-3,
.hblok2-5,
.hblok2-8,
.hblok3-1,
.hblok3-4,
.hblok3-6,
.hblok3-7 { background-color: #EC008C; }

.hblok1-3,
.hblok1-6,
.hblok2-4,
.hblok2-7,
.hblok3-2,
.hblok3-9 { background-color: #00AEEF; }

.hblok1-4,
.hblok1-8,
.hblok2-1,
.hblok2-9,
.hblok2-6,
.hblok3-3,
.hblok3-5,
.hblok3-8 { background-color: #F7941E; }

/** HBLOK - Image positioning **/
.hblok1-1 { background-position: 0 0; }
.hblok1-2 { background-position: -107px 0; }
.hblok1-3 { background-position: -214px 0; }
.hblok1-4 { background-position: -321px 0; }
.hblok1-5 { background-position: -428px 30px; }
.hblok1-6 { background-position: -535px 0; }
.hblok1-7 { background-position: -642px 0; }
.hblok1-8 { background-position: -749px 0; }
.hblok1-9 { background-position: -856px 0; }

.hblok2-1 { background-position: 0 -107px; }
.hblok2-2 { background-position: -107px -107px; }
.hblok2-3 { background-position: -214px -107px; }
.hblok2-4 { background-position: -321px -107px; }
.hblok2-5 { background-position: -428px -107px; }
.hblok2-6 { background-position: -535px -107px; }
.hblok2-7 { background-position: -642px -107px; }
.hblok2-8 { background-position: -749px -107px; }
.hblok2-9 { background-position: -856px -107px; }

.hblok3-1 { background-position: 0 -214px; }
.hblok3-2 { background-position: -107px -214px; }
.hblok3-3 { background-position: -214px -214px; }
.hblok3-4 { background-position: -321px -214px; }
.hblok3-5 { background-position: -428px -214px; }
.hblok3-6 { background-position: -535px -214px; }
.hblok3-7 { background-position: -642px -214px; }
.hblok3-8 { background-position: -749px -214px; }
.hblok3-9 { background-position: -856px -214px; }

.header-blocks .hblok[class*="hblok3"] { display: none; }

#logo {
  --logo-border-width: 7px;

  display: block;
  position: absolute;
  top: calc(var(--header-block-height) * 0.5);
  left: 40px;
  z-index: 1;
}

#logo IMG {
  height: var(--header-block-height);
  z-index: 2;
  position: sticky;
}

#logo::before,
#logo::after {
  content: "";
  display: block;
  position: absolute;
  background-color: #FFFFFF;
  z-index: 0;
  left: calc(var(--logo-border-width) * -1);
  height: calc((var(--header-block-height) / 2) + calc(var(--logo-border-width) * 2));
  box-shadow: 5px 5px 2px rgba(0,0,0,0.15);
}

#logo::before {
  top: calc(var(--logo-border-width) * -1);
  width: calc((var(--header-block-height) * 1.831) + calc(var(--logo-border-width) * 2));
}

#logo::after {
  bottom: calc(var(--logo-border-width) * -1);
  width: calc(100% + calc(var(--logo-border-width) * 2));
}

/*******************************************/
/*******************************************/

.categorie {
  display: block;
  position: relative;
  background-color: #EC008C;
  color: #ffffff;
  margin: 10px 0;
  padding: 5px;
  overflow: hidden;
}

.categorie .onderdeel-icon {
  display: none;
  position: absolute;
  top: 5px;
  left: 5px;
  bottom: 5px;
  width: 60px;
  background-repeat: no-repeat;
  background-position: center center;
}

.onderdeel-alcohol .onderdeel-icon,
.onderdeel-angstig-verlegen .onderdeel-icon,
.onderdeel-armoede .onderdeel-icon,
.onderdeel-bewegen .onderdeel-icon,
.onderdeel-boos .onderdeel-icon,
.onderdeel-buikpijn .onderdeel-icon,
.onderdeel-cannabis .onderdeel-icon,
.onderdeel-drugs .onderdeel-icon,
.onderdeel-faalangst .onderdeel-icon,
.onderdeel-gamen .onderdeel-icon,
.onderdeel-gehoorschade .onderdeel-icon,
.onderdeel-gesprek .onderdeel-icon,
.onderdeel-gezin .onderdeel-icon,
.onderdeel-gezinssituatie .onderdeel-icon,
.onderdeel-hoegaathetmetje .onderdeel-icon,
.onderdeel-hoeishetthuis .onderdeel-icon,
.onderdeel-hoezitjeinjevel .onderdeel-icon,
.onderdeel-inbehandeling .onderdeel-icon,
.onderdeel-jijeneten .onderdeel-icon,
.onderdeel-jijenjerelaties .onderdeel-icon,
.onderdeel-lachgas .onderdeel-icon,
.onderdeel-leergedrag .onderdeel-icon,
.onderdeel-lengte .onderdeel-icon,
.onderdeel-lichamelijkegezondheid .onderdeel-icon,
.onderdeel-medische-achtergrond .onderdeel-icon,
.onderdeel-mogenwejenogwatvragen .onderdeel-icon,
.onderdeel-naderonderzoek .onderdeel-icon,
.onderdeel-naregebeurtenissen .onderdeel-icon,
.onderdeel-naregedachten .onderdeel-icon,
.onderdeel-ogen .onderdeel-icon,
.onderdeel-omgaanmetelkaar .onderdeel-icon,
.onderdeel-omgaanmetelkaarklas .onderdeel-icon,
.onderdeel-oren .onderdeel-icon,
.onderdeel-piekeren .onderdeel-icon,
.onderdeel-puzzel .onderdeel-icon,
.onderdeel-raregedachten .onderdeel-icon,
.onderdeel-roken .onderdeel-icon,
.onderdeel-samenofalleen .onderdeel-icon,
.onderdeel-scoliose .onderdeel-icon,
.onderdeel-seksualiteit .onderdeel-icon,
.onderdeel-slapen .onderdeel-icon,
.onderdeel-snus .onderdeel-icon,
.onderdeel-socialmedia .onderdeel-icon,
.onderdeel-tanden .onderdeel-icon,
.onderdeel-toestemming .onderdeel-icon,
.onderdeel-toilet .onderdeel-icon,
.onderdeel-totslot .onderdeel-icon,
.onderdeel-vapen .onderdeel-icon,
.onderdeel-voeding .onderdeel-icon,
.onderdeel-vrije-tijd .onderdeel-icon,
.onderdeel-waterpijp .onderdeel-icon,
.onderdeel-xtc .onderdeel-icon,
.onderdeel-zelfbeschadiging .onderdeel-icon,
.onderdeel-zwemmen .onderdeel-icon
 {
  display: block;
}

/* Indien gewenst: kleuren per categorie */
/*
.categorie-algemenegezondheid { background: #F58220; }
.categorie-ontwikkeling { background: #ED1C24; }
.categorie-gedrag { background: #91278F; }
.categorie-psychischegezondheid { background: #00AEEF; }
.categorie-leren { background: #ecd500; }
.categorie-leefgewoonten { background: #91278F; }
.categorie-leefomgeving { background: #EC008C; }
*/

.onderdeel-alcohol .onderdeel-icon { background: url(../images/icons/icon-alcohol-wit.png) no-repeat 0 0; }
.onderdeel-angstig-verlegen .onderdeel-icon { background: url(../images/icons/icon-angstig-verlegen-wit.png) no-repeat 0 0; }
.onderdeel-armoede .onderdeel-icon { background: url(../images/icons/icon-armoede-wit.png) no-repeat 0 0; }
.onderdeel-bewegen .onderdeel-icon { background: url(../images/icons/icon-bewegen-wit.png) no-repeat 0 0; }
.onderdeel-boos .onderdeel-icon { background: url(../images/icons/icon-boos-wit.png) no-repeat 0 0; }
.onderdeel-buikpijn .onderdeel-icon { background: url(../images/icons/icon-buikpijn-wit.png) no-repeat 0 0; }
.onderdeel-cannabis .onderdeel-icon { background: url(../images/icons/icon-cannabis-wit.png) no-repeat 0 0; }
.onderdeel-drugs .onderdeel-icon { background: url(../images/icons/icon-drugs-wit.png) no-repeat 0 0; }
.onderdeel-faalangst .onderdeel-icon { background: url(../images/icons/icon-faalangst-wit.png) no-repeat 0 0; }
.onderdeel-gamen .onderdeel-icon { background: url(../images/icons/icon-gamen-wit.png) no-repeat 0 0; }
.onderdeel-gehoorschade .onderdeel-icon { background: url(../images/icons/icon-gehoorschade-wit.png) no-repeat 0 0; }
.onderdeel-gesprek .onderdeel-icon { background-image: url(../images/icons/icon-gesprek-wit.png); }
.onderdeel-gezin .onderdeel-icon { background-image: url(../images/icons/icon-gezin-wit.png); }
.onderdeel-gezinssituatie .onderdeel-icon { background-image: url(../images/icons/icon-gezinssituatie-wit.png); }
.onderdeel-hoegaathetmetje .onderdeel-icon { background: url(../images/icons/icon-hoegaathetmetje-wit.png) no-repeat 0 0; }
.onderdeel-hoeishetthuis .onderdeel-icon { background: url(../images/icons/icon-hoeishetthuis-wit.png) no-repeat 0 0; }
.onderdeel-hoezitjeinjevel .onderdeel-icon { background: url(../images/icons/icon-hoezitjeinjevel-wit.png) no-repeat 0 0; }
.onderdeel-inbehandeling .onderdeel-icon  { background: url(../images/icons/icon-inbehandeling-wit.png) no-repeat 0 0; }
.onderdeel-jijeneten .onderdeel-icon { background: url(../images/icons/icon-jijeneten-wit.png) no-repeat 0 0; }
.onderdeel-jijenjerelaties .onderdeel-icon { background: url(../images/icons/icon-jijenjerelaties-wit.png) no-repeat 0 0; }
.onderdeel-lachgas .onderdeel-icon { background: url(../images/icons/icon-lachgas-wit.png) no-repeat 0 0; }
.onderdeel-leergedrag .onderdeel-icon { background: url(../images/icons/icon-gedragopschool-wit.png) no-repeat 0 0; }
.onderdeel-lengte .onderdeel-icon { background: url(../images/icons/icon-lengte-wit.png) no-repeat 0 0; }
.onderdeel-lichamelijkegezondheid .onderdeel-icon { background: url(../images/icons/icon-lichamelijkegezondheid-wit.png) no-repeat 0 0; }
.onderdeel-medische-achtergrond .onderdeel-icon  { background: url(../images/icons/icon-medische-achtergrond-wit.png) no-repeat 0 0; }
.onderdeel-naderonderzoek .onderdeel-icon { background: url(../images/icons/icon-naderonderzoek-wit.png) no-repeat 0 0; }
.onderdeel-naregebeurtenissen .onderdeel-icon { background: url(../images/icons/icon-naregebeurtenissen-wit.png) no-repeat 0 0; }
.onderdeel-naregedachten .onderdeel-icon { background: url(../images/icons/icon-naregedachten-wit.png) no-repeat 0 0; }
.onderdeel-ogen .onderdeel-icon { background: url(../images/icons/icon-ogen-wit.png) no-repeat 0 0; }
.onderdeel-omgaanmet .onderdeel-icon { background: url(../images/icons/icon-omgangmetelkaar-wit.png) no-repeat 0 0; }
.onderdeel-omgaanmetelkaar .onderdeel-icon { background: url(../images/icons/icon-omgangmetelkaar-wit.png) no-repeat 0 0; }
.onderdeel-omgaanmetelkaarklas .onderdeel-icon { background: url(../images/icons/icon-omgaanmetelkaarklas-wit.png) no-repeat 0 0; }
.onderdeel-oren .onderdeel-icon { background: url(../images/icons/icon-oren-wit.png) no-repeat 0 0; }
.onderdeel-piekeren .onderdeel-icon { background: url(../images/icons/icon-piekeren-wit.png) no-repeat 0 0; }
.onderdeel-puzzel .onderdeel-icon { background: url(../images/icons/icon-puzzel-wit.png) no-repeat 0 0; }
.onderdeel-raregedachten .onderdeel-icon { background: url(../images/icons/icon-raregedachten-wit.png) no-repeat 0 0; }
.onderdeel-roken .onderdeel-icon { background: url(../images/icons/icon-roken-wit.png) no-repeat 0 0; }
.onderdeel-samenofalleen .onderdeel-icon { background: url(../images/icons/icon-samenofalleen-wit.png) no-repeat 0 0; }
.onderdeel-scoliose .onderdeel-icon { background: url(../images/icons/icon-scoliose-wit.png) no-repeat 0 0; }
.onderdeel-seksualiteit .onderdeel-icon { background: url(../images/icons/icon-seksualiteit-wit.png) no-repeat 0 0; }
.onderdeel-slapen .onderdeel-icon { background: url(../images/icons/icon-slapen-wit.png) no-repeat 0 0; }
.onderdeel-snus .onderdeel-icon { background: url(../images/icons/icon-snus-wit.png) no-repeat 0 0; }
.onderdeel-socialmedia .onderdeel-icon { background: url(../images/icons/icon-socialmedia-wit.png) no-repeat 0 0; }
.onderdeel-tanden .onderdeel-icon { background: url(../images/icons/icon-tanden-wit.png) no-repeat 0 0; }
.onderdeel-toestemming .onderdeel-icon { background: url(../images/icons/icon-toestemming-wit.png) no-repeat 0 0; }
.onderdeel-toestemming .onderdeel-toestemming  { background: url(../images/icons/icon-toestemming-wit.png) no-repeat 0 0; }
.onderdeel-toilet .onderdeel-icon { background: url(../images/icons/icon-toilet-wit.png) no-repeat 0 0; }
.onderdeel-vapen .onderdeel-icon { background: url(../images/icons/icon-vapen-wit.png) no-repeat 0 0; }
.onderdeel-voeding .onderdeel-icon { background: url(../images/icons/icon-voeding-wit.png) no-repeat 0 0; }
.onderdeel-vrije-tijd .onderdeel-icon { background: url(../images/icons/icon-vrije-tijd-wit.png) no-repeat 0 0; }
.onderdeel-waterpijp .onderdeel-icon { background: url(../images/icons/icon-waterpijp-wit.png) no-repeat 0 0; }
.onderdeel-xtc .onderdeel-icon { background: url(../images/icons/icon-xtc-wit.png) no-repeat 0 0; }
.onderdeel-zelfbeschadiging .onderdeel-icon { background: url(../images/icons/icon-zelfbeschadiging-wit.png) no-repeat 0 0; }
.onderdeel-zwemmen .onderdeel-icon { background: url(../images/icons/icon-zwemmen-wit.png) no-repeat 0 0; }

.categorie H1 {
  margin: 3px 0 5px 15px;
  line-height: 1.4;
  overflow: hidden;
}

.onderdeel-alcohol h1,
.onderdeel-angstig-verlegen H1,
.onderdeel-armoede h1,
.onderdeel-bewegen H1,
.onderdeel-bewegen h1,
.onderdeel-boos h1,
.onderdeel-buikpijn H1,
.onderdeel-cannabis h1,
.onderdeel-drugs h1,
.onderdeel-faalangst h1,
.onderdeel-gamen h1,
.onderdeel-gehoorschade h1,
.onderdeel-gesprek H1,
.onderdeel-gezin H1,
.onderdeel-gezinssituatie H1,
.onderdeel-hoegaathetmetje H1,
.onderdeel-hoegaathetmetje h1,
.onderdeel-hoeishetthuis h1,
.onderdeel-hoezitjeinjevel h1,
.onderdeel-inbehandeling h1,
.onderdeel-jijeneten h1,
.onderdeel-jijenjerelaties H1,
.onderdeel-lachgas h1,
.onderdeel-leergedrag h1,
.onderdeel-lengte h1,
.onderdeel-lichamelijkegezondheid h1,
.onderdeel-medische-achtergrond h1,
.onderdeel-mogenwejenogwatvragen h1,
.onderdeel-naderonderzoek h1,
.onderdeel-naregebeurtenissen H1,
.onderdeel-naregebeurtenissen h1,
.onderdeel-naregedachten H1,
.onderdeel-naregedachten h1,
.onderdeel-ogen h1,
.onderdeel-omgaanmet h1,
.onderdeel-omgaanmetelkaar h1,
.onderdeel-omgaanmetelkaarklas h1,
.onderdeel-oren h1,
.onderdeel-piekeren h1,
.onderdeel-puzzel H1,
.onderdeel-raregedachten h1,
.onderdeel-roken H1,
.onderdeel-roken h1,
.onderdeel-samenofalleen h1,
.onderdeel-scoliose h1,
.onderdeel-seksualiteit h1,
.onderdeel-slapen H1,
.onderdeel-slapen h1,
.onderdeel-snus h1,
.onderdeel-socialmedia h1,
.onderdeel-tanden H1,
.onderdeel-tanden h1,
.onderdeel-toestemming h1,
.onderdeel-toilet H1,
.onderdeel-totslot h1,
.onderdeel-vapen h1,
.onderdeel-voeding H1,
.onderdeel-voeding h1,
.onderdeel-vrije-tijd h1,
.onderdeel-waterpijp h1,
.onderdeel-xtc h1,
.onderdeel-zelfbeschadiging h1,
.onderdeel-zwemmen h1 
{
  margin-left: 75px;
}


/*******************************************/
/*******************************************/

.questionaire-intro {
  margin: 15px 0 15px 0;
  border-bottom: 2px solid #d8d8d8;
}
.readspeaker {
  margin-bottom: 15px;
}
.questionaire-intro-tekst {
  padding-bottom: 15px;  
}



/*******************************************/
/*******************************************/

.answers_otherscreens {
  display: none;
}
.invisible {
  display: none;
}

/*******************************************/
/*******************************************/

.vraag {
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 1.4;
  border-bottom: 1px solid #d8d8d8;
  overflow: hidden;
}

.readspeaker-container {
  display: block;
  min-width: 50px;
  margin-top: -7px;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

.readspeaker-intro {
  overflow: hidden;
}

.vraag-container {
  display: flex;
  flex-direction: row;
}

.vraag-nummer {
  display: inline-block;
  width: 40px;
  font-weight: bold;
  color: #a3015f;
  
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

/* Indien gewenst: kleuren per categorie */
/*
.page-cat-algemenegezondheid  .vraag-nummer { color: #F58220; }
.page-cat-ontwikkeling  .vraag-nummer { color: #ED1C24; }
.page-cat-gedrag  .vraag-nummer { color: #91278F; }
.page-cat-psychischegezondheid  .vraag-nummer { color: #00AEEF; }
.page-cat-leren  .vraag-nummer { color: #ecd500; }
.page-cat-leefgewoonten  .vraag-nummer { color: #91278F; }
.page-cat-leefomgeving  .vraag-nummer { color: #EC008C; }
*/

.vraagtekst {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}
.vraagafbeelding img {
  max-width: 100%; 
}

.vraag-titel {
  font-weight: bold;
  padding: 0 30px 0 0;
}

.vraag-titel LABEL {
  margin: 0;
}

.vraag-tooltip {
}

.vraag-toelichting {
  color: #333333;
  padding: 0 30px 0 0;
}

.vraag-toelichting A {
  color: #007bff;
  text-decoration: underline;
}

.vraag .antwoorden-container {
  display: flex;
  flex-direction: row;
  margin-top: 10px;
}

.vraag .antwoorden-container .antwoorden {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
  margin-left: 35px;
}

.open_antwoord {
  padding-top: 7px;
}

.vraag-voorloop {
  display: flex;
}

.vraag-voorloop .readspeaker-container {
}

.vraag-voorloop-tekst {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
  font-weight: bold;
}

/*******************************************/
/*******************************************/

textarea {
  width: 100%;
}

.vraag-fout {
  border-left: 5px solid #FF0000;
}

.vraag-fout .vraag-titel {
  color: #E60000;
}

/*******************************************/
/*******************************************/

.control {
  display: block;
  position: relative;
  padding-left: 30px;
  margin-bottom: 10px;
  cursor: pointer;
}

LABEL.control {
  font-weight: normal;
  margin-bottom: 5px;
}

.antwoorden.horizontaal .control {
  display: inline-block;
  margin-right: 20px;
}

.control INPUT {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

.control-indicator {
  position: absolute;
  top: 2px;
  left: 0;
  height: 20px;
  width: 20px;
  border-radius: 2px;
  background: #f5f5f5;
  border: 1px solid #999999;
}

.control-radio .control-indicator {
  border-radius: 50%;
}

.control:hover INPUT ~ .control-indicator,
.control INPUT:focus ~ .control-indicator {
  background: #ccc;
}

.control INPUT:checked ~ .control-indicator {
  background: #2aa1c0;
}
.control INPUT:checked ~ .control-label {
  font-weight: bold;
}

.control:hover INPUT:not([disabled]):checked ~ .control-indicator,
.control INPUT:checked:focus ~ .control-indicator {
  background: #0e647d;
}

.control INPUT:disabled ~ .control-indicator {
  background: #e6e6e6;
  opacity: 0.6;
  pointer-events: none;
}

.control-indicator:after {
  content: '';
  position: absolute;
  display: none;
}

.control INPUT:checked ~ .control-indicator:after { display: block; }

.control-checkbox .control-indicator:after {
  left: 8px;
  top: 4px;
  width: 5px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.control-checkbox INPUT:disabled ~ .control-indicator:after { border-color: #7b7b7b; }

.control-radio .control-indicator:after {
  left: 6px;
  top: 6px;
  height: 6px;
  width: 6px;
  border-radius: 50%;
  background: #fff;
}

.control-radio INPUT:disabled ~ .control-indicator:after { background: #7b7b7b; }

.selectbox {
  position: relative;
  display: inline-block;
  width: 100%;
}

.selectbox SELECT {
  display: inline-block;
  width: 100%;
  cursor: pointer;
  padding: 10px 15px;
  outline: 0;
  border-radius: 0;
  background: #f5f5f5;
  color: #333333;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 1px solid #999999;
}

.selectbox SELECT::-ms-expand {
  display: none;
}

.selectbox SELECT:hover,
.selectbox SELECT:focus {
  color: #000;
  background: #dddddd;
}

.selectbox SELECT:disabled {
  opacity: 0.5;
  pointer-events: none;
}

.select-arrow {
  position: absolute;
  top: 16px;
  right: 15px;
  width: 0;
  height: 0;
  pointer-events: none;
  border-style: solid;
  border-width: 8px 5px 0 5px;
  border-color: #7b7b7b transparent transparent transparent;
}

.selectbox SELECT:hover ~ .select-arrow,
.selectbox SELECT:focus ~ .select-arrow {
  border-top-color: #000;
}

.selectbox SELECT:disabled ~ .select-arrow {
  border-top-color: #ccc;
}

.input {
  position: relative;
  display: inline-block;
  width: 100%;
}

.input INPUT {
  display: inline-block;
  width: 100%;
  cursor: pointer;
  padding: 10px 15px;
  outline: 0;
  border: 0;
  border-radius: 0;
  background: #f5f5f5;
  color: #333333;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 1px solid #999999;
}

.input input:invalid {
  border: 2px solid red;
}

.input INPUT::-ms-expand {
  display: none;
}

.input INPUT:hover,
.input INPUT:focus {
  color: #000;
  background: #dddddd;
}

/*******************************************/
/*******************************************/

.buttons {
  margin-top: 20px;
  margin-bottom: 20px;
  overflow: hidden;
}

.btn {
  margin-top: 5px;
  margin-bottom: 5px;
}

.btn-blue { background-color: #026f97; border-color: #026f97; color: #FFFFFF; }
.btn-pink { background-color: #a3015f; border-color: #a3015f; color: #FFFFFF; }
.btn-orange { background-color: #F7941E; border-color: #e28316; color: #FFFFFF; }

.btn-blue:hover, .btn-blue:focus { background-color: #00AEEF; }
.btn-pink:hover, .btn-pink:focus { background-color: #EC008C; }
.btn-orange:hover, .btn-orange:focus { background-color: #e28316; }

.btn-default {
  color: #333;
  background-color: #fff;
  border-color: #ccc;
}

.btn-success,
.btn-success:hover,
.btn-success:focus {
  color: #fff;
  background-color: #146126;
  border-color: #28a745;
}

.btn-success.disabled, .btn-success:disabled {
color: #fff;
background-color: #28a745;
border-color: #28a745;
}

/*******************************************/
/*******************************************/

.box-contact {
  /* background: #EEEEEE; */
  /* padding: 1.5rem 1.5rem 1.5rem 1.5rem; */
  padding-bottom: 20px;
  border-bottom: 2px dotted #999;
}

UL.vergeten {
  list-style: none;
  padding-left: 15px;
  margin: 10px 0;
}

UL.vergeten LI {
  position: relative;
  margin-bottom: 5px;
}

UL.vergeten LI .fas {
  position: absolute;
  left: -15px;
  top: 2px;
}

/*******************************************/
/*******************************************/

.uitleg {
  padding: 0 0 0 10px;
  margin: 5px 0;
  display: block;
  border-left: 10px solid #cccccc;
}
.uitleg-blauw { border-color: #00aeef; }
.uitleg-groen { border-color: #069d1c; }
.uitleg-oranje { border-color: #f7941e; }
.uitleg-rood { border-color: #e60000; }

.blauw { color: #00aeef; }
.groen { color: #069d1c; }
.oranje { color: #f7941e; }
.rood { color: #e60000; }


.accordion > .card:first-of-type,
.accordion > .card:not(:first-of-type):not(:last-of-type) {
  border-bottom: 1px solid rgba(0,0,0,.125);
  border-radius: .25rem;
}

.uitslag .card {
  border-color: #ddd;
  margin-bottom: 0.5rem;
}

.uitslag .card .card-header {
  color: #333333;
  background-color: #f5f5f5;
  border-color: #ddd;
  padding: 0;
}
.uitslag .card .card-header A {
  color: #333333;
}
.uitslag .card-blauw .card-header A:hover { color: #00aeef; }
.uitslag .card-groen .card-header A:hover { color: #069d1c; }
.uitslag .card-oranje .card-header A:hover { color: #f7941e; }
.uitslag .card-rood .card-header A:hover { color: #e60000; }

.uitslag.inkleur .card .card-header {
  color: #333333;
  background-color: #f5f5f5;
  border-color: #ddd;
}
.uitslag.inkleur .card-blauw .card-header { border-left: 10px solid #00aeef; }
.uitslag.inkleur .card-groen .card-header { border-left: 10px solid #069d1c; }
.uitslag.inkleur .card-oranje .card-header { border-left: 10px solid #f7941e; }
.uitslag.inkleur .card-rood .card-header { border-left: 10px solid #e60000; }

.uitslag.inkleur .card-blauw .card-body { border-left: 10px solid #00aeef; }
.uitslag.inkleur .card-groen .card-body { border-left: 10px solid #069d1c; }
.uitslag.inkleur .card-oranje .card-body { border-left: 10px solid #f7941e; }
.uitslag.inkleur .card-rood .card-body { border-left: 10px solid #e60000; }

.card-title {
  margin: 0;
}

.card-title > A {
  display: block;
  position: relative;
  padding: 12px 15px 12px 65px;
}

/* Use this one if you do NOT want icons and links in your card title */

.card-title > .card-title-contents {
  display: block;
  padding: 12px 15px 12px 15px;
}

.card .card-icon {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 60px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}

.card.alcohol .card-icon { background-image: url(../images/icons/icon-alcohol-zwart.png); }
.card.angstig-verlegen .card-icon { background-image: url(../images/icons/icon-angstig-verlegen-zwart.png); }
.card.armoede .card-icon { background-image: url(../images/icons/icon-armoede-zwart.png); }
.card.bewegen .card-icon { background-image: url(../images/icons/icon-bewegen-zwart.png); }
.card.boos .card-icon { background-image: url(../images/icons/icon-boos-zwart.png); }
.card.buikpijn .card-icon { background-image: url(../images/icons/icon-buikpijn-zwart.png); }
.card.cannabis .card-icon { background-image: url(../images/icons/icon-cannabis-zwart.png); }
.card.drugs .card-icon { background-image: url(../images/icons/icon-drugs-zwart.png); }
.card.faalangst .card-icon { background-image: url(../images/icons/icon-faalangst-zwart.png); }
.card.gamen .card-icon { background-image: url(../images/icons/icon-gamen-zwart.png); }
.card.gehoorschade .card-icon { background-image: url(../images/icons/icon-gehoorschade-zwart.png); }
.card.gesprek .card-icon { background-image: url(../images/icons/icon-gesprek-zwart.png); }
.card.gezin .card-icon { background-image: url(../images/icons/icon-gezin-zwart.png); }
.card.gezinssituatie .card-icon { background-image: url(../images/icons/icon-gezinssituatie-zwart.png); }
.card.hoegaathetmetje .card-icon { background-image: url(../images/icons/icon-hoegaathetmetje-zwart.png); }
.card.hoeishetthuis .card-icon { background-image: url(../images/icons/icon-hoeishetthuis-zwart.png); }
.card.hoezitjeinjevel .card-icon { background-image: url(../images/icons/icon-hoezitjeinjevel-zwart.png); }
.card.inbehandeling .card-icon { background-image: url(../images/icons/icon-inbehandeling-zwart.png); }
.card.jijeneten .card-icon { background-image: url(../images/icons/icon-jijeneten-zwart.png); }
.card.jijenjerelaties .card-icon { background-image: url(../images/icons/icon-jijenjerelaties-zwart.png); }
.card.lachgas .card-icon { background-image: url(../images/icons/icon-lachgas-zwart.png); }
.card.leergedrag .card-icon { background-image: url(../images/icons/icon-gedragopschool-zwart.png); }
.card.lengte .card-icon { background-image: url(../images/icons/icon-lengte-zwart.png); }
.card.lichamelijkegezondheid .card-icon { background-image: url(../images/icons/icon-lichamelijkegezondheid-zwart.png); }
.card.medische-achtergrond .card-icon { background-image: url(../images/icons/icon-medische-achtergrond-zwart.png); }
.card.mogenwejenogwatvragen .card-icon { background-image: url(../images/icons/icon-mogenwejenogwatvragen-zwart.png); }
.card.naderonderzoek .card-icon { background-image: url(../images/icons/icon-naderonderzoek-zwart.png); }
.card.naregebeurtenissen .card-icon { background-image: url(../images/icons/icon-naregebeurtenissen-zwart.png); }
.card.naregedachten .card-icon { background-image: url(../images/icons/icon-naregedachten-zwart.png); }
.card.ogen .card-icon { background-image: url(../images/icons/icon-ogen-zwart.png); }
.card.omgaanmet .card-icon { background-image: url(../images/icons/icon-omgangmetelkaar-zwart.png); }
.card.omgaanmetelkaar .card-icon { background-image: url(../images/icons/icon-omgangmetelkaar-zwart.png); }
.card.omgaanmetelkaarklas .card-icon { background-image: url(../images/icons/icon-omgaanmetelkaarklas-zwart.png); }
.card.oren .card-icon { background-image: url(../images/icons/icon-oren-zwart.png); }
.card.piekeren .card-icon { background-image: url(../images/icons/icon-piekeren-zwart.png); }
.card.puzzel .card-icon { background-image: url(../images/icons/icon-puzzel-zwart.png); }
.card.raregedachten .card-icon { background-image: url(../images/icons/icon-raregedachten-zwart.png); }
.card.roken .card-icon { background-image: url(../images/icons/icon-roken-zwart.png); }
.card.samenofalleen .card-icon { background-image: url(../images/icons/icon-samenofalleen-zwart.png); }
.card.scoliose .card-icon { background-image: url(../images/icons/icon-scoliose-zwart.png); }
.card.seksualiteit .card-icon { background-image: url(../images/icons/icon-seksualiteit-zwart.png); }
.card.slapen .card-icon { background-image: url(../images/icons/icon-slapen-zwart.png); }
.card.snus .card-icon { background-image: url(../images/icons/icon-snus-zwart.png); }
.card.socialmedia .card-icon { background-image: url(../images/icons/icon-socialmedia-zwart.png); }
.card.tanden .card-icon { background-image: url(../images/icons/icon-tanden-zwart.png); }
.card.toestemming .card-icon { background-image: url(../images/icons/icon-toestemming-zwart.png); }
.card.toilet .card-icon { background-image: url(../images/icons/icon-toilet-zwart.png); }
.card.totslot .card-icon { background-image: url(../images/icons/icon-totslot-zwart.png); }
.card.vapen .card-icon { background-image: url(../images/icons/icon-vapen-zwart.png); }
.card.voeding .card-icon { background-image: url(../images/icons/icon-voeding-zwart.png); }
.card.vrije-tijd .card-icon { background-image: url(../images/icons/icon-vrije-tijd-zwart.png); }
.card.waterpijp .card-icon { background-image: url(../images/icons/icon-waterpijp-zwart.png); }
.card.xtc .card-icon { background-image: url(../images/icons/icon-xtc-zwart.png); }
.card.zelfbeschadiging .card-icon { background-image: url(../images/icons/icon-zelfbeschadiging-zwart.png); }
.card.zwemmen .card-icon { background-image: url(../images/icons/icon-zwemmen-zwart.png); }
  
  
/* Collapsible uitslag */

.card-header a .collapse-icon-active {
  display: inline;  
}
.card-header a .collapse-icon-collapsed {
  display: none; 
}
.card-header a.collapsed .collapse-icon-active {
  display: none;  
}
.card-header a.collapsed .collapse-icon-collapsed {
  display: inline; 
}

 
/*******************************************/
/*******************************************/

.voortgang {
  display: flex;
  flex-direction: row;
}

.voortgang-text {
  width: 75px;
  font-size: 0.75rem;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}

.voortgang-bar {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
}

.progress {
  height: 15px;
}

.progress SPAN {
  padding: 0 5px;
  line-height: initial;
}

.width_p0 { width: 0%; }
.width_p1 { width: 1%; }
.width_p2 { width: 2%; }
.width_p3 { width: 3%; }
.width_p4 { width: 4%; }
.width_p5 { width: 5%; }
.width_p6 { width: 6%; }
.width_p7 { width: 7%; }
.width_p8 { width: 8%; }
.width_p9 { width: 9%; }
.width_p10 { width: 10%; }
.width_p11 { width: 11%; }
.width_p12 { width: 12%; }
.width_p13 { width: 13%; }
.width_p14 { width: 14%; }
.width_p15 { width: 15%; }
.width_p16 { width: 16%; }
.width_p17 { width: 17%; }
.width_p18 { width: 18%; }
.width_p19 { width: 19%; }
.width_p20 { width: 20%; }
.width_p21 { width: 21%; }
.width_p22 { width: 22%; }
.width_p23 { width: 23%; }
.width_p24 { width: 24%; }
.width_p25 { width: 25%; }
.width_p26 { width: 26%; }
.width_p27 { width: 27%; }
.width_p28 { width: 28%; }
.width_p29 { width: 29%; }
.width_p30 { width: 30%; }
.width_p31 { width: 31%; }
.width_p32 { width: 32%; }
.width_p33 { width: 33%; }
.width_p34 { width: 34%; }
.width_p35 { width: 35%; }
.width_p36 { width: 36%; }
.width_p37 { width: 37%; }
.width_p38 { width: 38%; }
.width_p39 { width: 39%; }
.width_p40 { width: 40%; }
.width_p41 { width: 41%; }
.width_p42 { width: 42%; }
.width_p43 { width: 43%; }
.width_p44 { width: 44%; }
.width_p45 { width: 45%; }
.width_p46 { width: 46%; }
.width_p47 { width: 47%; }
.width_p48 { width: 48%; }
.width_p49 { width: 49%; }
.width_p50 { width: 50%; }
.width_p51 { width: 51%; }
.width_p52 { width: 52%; }
.width_p53 { width: 53%; }
.width_p54 { width: 54%; }
.width_p55 { width: 55%; }
.width_p56 { width: 56%; }
.width_p57 { width: 57%; }
.width_p58 { width: 58%; }
.width_p59 { width: 59%; }
.width_p60 { width: 60%; }
.width_p61 { width: 61%; }
.width_p62 { width: 62%; }
.width_p63 { width: 63%; }
.width_p64 { width: 64%; }
.width_p65 { width: 65%; }
.width_p66 { width: 66%; }
.width_p67 { width: 67%; }
.width_p68 { width: 68%; }
.width_p69 { width: 69%; }
.width_p70 { width: 70%; }
.width_p71 { width: 71%; }
.width_p72 { width: 72%; }
.width_p73 { width: 73%; }
.width_p74 { width: 74%; }
.width_p75 { width: 75%; }
.width_p76 { width: 76%; }
.width_p77 { width: 77%; }
.width_p78 { width: 78%; }
.width_p79 { width: 79%; }
.width_p80 { width: 80%; }
.width_p81 { width: 81%; }
.width_p82 { width: 82%; }
.width_p83 { width: 83%; }
.width_p84 { width: 84%; }
.width_p85 { width: 85%; }
.width_p86 { width: 86%; }
.width_p87 { width: 87%; }
.width_p88 { width: 88%; }
.width_p89 { width: 89%; }
.width_p90 { width: 90%; }
.width_p91 { width: 91%; }
.width_p92 { width: 92%; }
.width_p93 { width: 93%; }
.width_p94 { width: 94%; }
.width_p95 { width: 95%; }
.width_p96 { width: 96%; }
.width_p97 { width: 97%; }
.width_p98 { width: 98%; }
.width_p99 { width: 99%; }
.width_p100 { width: 100%; }

  
/*******************************************/
/*******************************************/

/* Print version. The print version uses the 'disabled' attribute on input elements */

input[disabled], textarea[disabled] {
  background: #fff;
  border-width: 1px;
}


/********************/
/********************/


/* Extra small */
@media (max-width: 576px) {
}

/* Small */
@media (min-width: 576px) {
}

/* Medium */
@media (min-width: 768px) {
  #header .header-blocks {
    --header-block-height: 85px;
  }

  #logo {
    --logo-border-width: 8px;
  }
  
  .vraag .antwoorden-container {
    margin-top: 0;
  }
  .vraag .antwoorden {
    margin-left: 0;
  }
}


/* Large */
@media (min-width: 992px) {
  #header .header-blocks {
    --header-block-height: 105px;
  }

  #logo {
    --logo-border-width: 9px;
  }
}

/* Extra large */
@media (min-width: 1200px) {
}

/********************/
/********************/


/* Login screen */
#inlogcode {
  font-size: 160%;
  letter-spacing: 3px;
}

/********************/
/********************/

/* For debugging */
.tag {
  padding: 2px 4px;
  font-size: 90%;
  background-color: #f9f2f4;
  border-radius: 4px;    
}
.card-title .tag {
  padding: 2px 4px;
  font-size: 90%;
  background-color: #fff;
  border: 1px solid #666;
  border-radius: 4px;
}
.card-title .tag-uitgeschakeld {
  color: #777;
  font-weight: bold;
}
.tag-uitgeschakeld {
  color: #555;
  font-weight: normal;
}

.tag.tag-oproepen, .tag.tag-direct-oproepen,
.card-title .tag.tag-oproepen, .card-title .tag.tag-direct-oproepen  {
  font-weight: bold;
  background-color: #e60000;
  color: #fff;
}
.uitgeschakeld {
  /* text-decoration: line-through; */
  opacity: 0.5;
}

.grey {
  color: #707070;
}

/* Because the Content-Security-Policy disallows inline css: */
.smallfield, .form-control.smallfield, .input-group .form-control.smallfield { width: 241px; }

.hidden { display: none; }

.emailhelp {
  color: #c00;
  font-size: 80%;
  
}

.groeigids_melding {
  /*
  border: 5px solid #00AEEF;
  border-radius: 10px;
  margin-top: 20px;
  padding: 10px;
  */
  padding-top: 20px;
  padding-bottom: 20px;
  border-bottom: 2px dotted #999;
  
}

.centered {
  text-align: center;
}