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;
  background-color: #fff;
}
a:hover,
a:focus {
  color: #426e9d;
  text-decoration: none;
  background-color: #fff;
}

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

#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;
}

.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 {
  position: relative;
  height: 130px;
  background-color: #00AEEF;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.blauwtinten .header-blocks { background-image: url(/images/header_blauwtinten_repeat.png) !important; }
.kleurelementen .header-blocks  { background-image: url(/images/header_kleurelementen_repeat.png) !important; }

/* .hoegaathetmetje .header-blocks {background-image: url(/images/header_hoegaathetmetje.jpg);}
.hoezitjeinjevel .header-blocks { background-image: url(/images/header_hoezitjeinjevel.jpg); }
.omgaanmet .header-blocks { background-image: url(/images/header_omgaanmetelkaar.jpg); }
.omgaanmetelkaar .header-blocks { background-image: url(/images/header_omgaanmetelkaar.jpg); }
.naregedachten .header-blocks { background-image: url(/images/header_naregedachten.jpg); }
.leergedrag .header-blocks { background-image: url(/images/header_leergedrag.jpg); }
.hoeishetthuis .header-blocks { background-image: url(/images/header_hoeishetthuis.jpg); }
.raregedachten .header-blocks { background-image: url(/images/header_raregedachten.jpg); }
.jijeneten .header-blocks { background-image: url(/images/header_jijeneten.jpg); }
.slapen .header-blocks { background-image: url(/images/header_slapen.jpg); }
.roken .header-blocks { background-image: url(/images/header_roken.jpg); }
.alcohol .header-blocks { background-image: url(/images/header_alcohol.jpg); }
.cannabis .header-blocks { background-image: url(/images/header_cannabis.jpg); }
.gamen .header-blocks { background-image: url(/images/header_gamen.jpg); }
.socialmedia .header-blocks { background-image: url(/images/header_socialmedia.jpg); }
.seksualiteit .header-blocks { background-image: url(/images/header_seksualiteit.jpg); }
.voeding .header-blocks { background-image: url(/images/header_voeding.jpg); }
.bewegen .header-blocks { background-image: url(/images/header_bewegen.jpg); }
.tanden .header-blocks { background-image: url(/images/header_tanden.jpg); }
.naregebeurtenissen .header-blocks { background-image: url(/images/header_naregebeurtenissen.jpg); }
.zelfbeschadiging .header-blocks { background-image: url(/images/header_zelfbeschadiging.jpg); }
.waterpijp .header-blocks { background-image: url(/images/header_waterpijp.jpg); }
.xtc .header-blocks { background-image: url(/images/header_xtc.jpg); }
.samenofalleen .header-blocks { background-image: url(/images/header_samenofalleen.jpg); }
.piekeren .header-blocks { background-image: url(/images/header_piekeren.jpg); }
.faalangst .header-blocks { background-image: url(/images/header_faalangst.jpg); }
.lichamelijkegezondheid .header-blocks { background-image: url(/images/header_lichamelijkegezondheid.jpg); }
.lachgas .header-blocks { background-image: url(/images/header_lachgas.jpg); }
.gehoorschade .header-blocks { background-image: url(/images/header_gehoorschade.jpg); }
.omgaanmetelkaarklas .header-blocks { background-image: url(/images/header_hoeishetindeklas.jpg); }
 */

.hblok {
  display: block;
  position: absolute;
  background: transparant;
  width: 11.11111%;
  height: 65px;
  border: 2px solid #FFFFFF;
}

.hblok-oranje { background-color: #F7941E; }
.hblok-blauw { background-color: #00AEEF; }
.hblok-roze { background-color: #EC008C; }
.hblok-wit { background-color: #FFFFFF; }

.hblok1-1 { top: 0px; left: 0px; width: 22.222222%; }
.hblok1-2 { top: 0px; left: 11.11111%; display: none;}
.hblok1-3 { top: 0px; left: 22.22222%; }
.hblok1-4 { top: 0px; left: 33.33333%; height: 80px; }
.hblok1-5 { top: 0px; left: 44.44444%; height: 130px; }
.hblok1-6 { top: 0px; left: 55.55555%; height: 35px; }
.hblok1-7 { top: 0px; left: 66.66666%; }
.hblok1-8 { top: 0px; left: 77.77777%; }
.hblok1-9 { top: 0px; left: 88.88888%; width: 11.11311%; height: 95px; }

.hblok2-1 { top: 65px; left: 0px; }
.hblok2-2 { top: 65px; left: 11.11111%; width: 22.222222%; }
.hblok2-3 { top: 65px; left: 22.22222%; display: none; }
.hblok2-4 { top: 80px; left: 33.33333%; height: 50px; }
.hblok2-5 { top: 35px; left: 44.44444%; display: none; }
.hblok2-6 { top: 35px; left: 55.55555%; height: 95px; }
.hblok2-7 { top: 65px; left: 66.66666%; width: 22.22422%; }
.hblok2-8 { display: none; top: 65px; left: 77.77777%; }
.hblok2-9 { top: 95px; left: 88.88888%; height: 35px; }

.hblok3-1 { display: none; top: 130px; left: 0px; }
.hblok3-2 { display: none; top: 130px; left: 11.11111%; width: 22.22222%; }
.hblok3-3 { display: none; top: 130px; left: 22.22222%; }
.hblok3-4 { display: none; top: 130px; left: 33.33333%; }
.hblok3-5 { display: none; top: 130px; left: 44.44444%; }
.hblok3-6 { display: none; top: 130px; left: 55.55555%; }
.hblok3-7 { display: none; top: 130px; left: 66.66666%; }
.hblok3-8 { display: none; top: 130px; left: 77.77777%; }
.hblok3-9 { display: none; top: 130px; left: 88.88888%; width: 11.11311%; }

.colored .hblok1-1 { background-color: #EC008C; }
.colored .hblok1-2 { background-color: #FFFFFF; }
.colored .hblok1-3 { background-color: #00AEEF; }
.colored .hblok1-4 { background-color: #F7941E; }
.colored .hblok1-5 { background-color: #EC008C; }
.colored .hblok1-6 { background-color: #F7941E; }
.colored .hblok1-7 { background-color: #EC008C; }
.colored .hblok1-8 { background-color: #FFFFFF; }
.colored .hblok1-9 { background-color: #F7941E; }

.colored .hblok2-1 { background-color: #FFFFFF; }
.colored .hblok2-2 { background-color: #FFFFFF; }
.colored .hblok2-3 { background-color: #FFFFFF; }
.colored .hblok2-4 { background-color: #00AEEF; }
.colored .hblok2-5 { background-color: #FFFFFF; }
.colored .hblok2-6 { background-color: #FFFFFF; }
.colored .hblok2-7 { background-color: #00AEEF; }
.colored .hblok2-8 { background-color: #EC008C; }
.colored .hblok2-9 { background-color: #FFFFFF; }

.colored .hblok3-1 { background-color: #EC008C; }
.colored .hblok3-2 { background-color: #00AEEF; }
.colored .hblok3-3 { background-color: #FFFFFF; }
.colored .hblok3-4 { background-color: #EC008C; }
.colored .hblok3-5 { background-color: #F7941E; }
.colored .hblok3-6 { background-color: #FFFFFF; }
.colored .hblok3-7 { background-color: #EC008C; }
.colored .hblok3-8 { background-color: #F7941E; }
.colored .hblok3-9 { background-color: #00AEEF; }

#logo {
  display: block;
  position: absolute;
  top: 35px;
  left: 44px;
  z-index: 1;
}

#logo IMG { height: 65px; content:url("/images/logo-jijenjegezondheid-beeldmerk-h65.png"); }


/*******************************************/
/*******************************************/
/* Deze classes worden gebruikt in html in de database */

.CLEAR0 {clear:both; height:0px;}
.CLEAR1 {clear:both; height:1px;}
.CLEAR2 {clear:both; height:2px;}
.CLEAR3 {clear:both; height:3px;}
.CLEAR4 {clear:both; height:4px;}
.CLEAR5 {clear:both; height:5px;}
.CLEAR6 {clear:both; height:6px;}
.CLEAR7 {clear:both; height:7px;}
.CLEAR8 {clear:both; height:8px;}
.CLEAR9 {clear:both; height:9px;}
.CLEAR10 {clear:both; height:10px;}
.CLEAR20 {clear:both; height:20px;}
.CLEAR30 {clear:both; height:30px;}
.CLEAR40 {clear:both; height:40px;}
.CLEAR50 {clear:both; height:50px;}
.clear {clear: both; }

.LabelKleur {color:#999;}
.Titel {color:#00AEEF; padding-left:10px; font-size: 1rem; font-weight:bold;}
.TitelGroot {color:#00AEEF; font-size: 1.5rem; font-weight:bold;}
.Fout {color:#F00;}
.TOE {overflow:auto;}
.Blauw {color:#0099BC;}
.Groot14 {font-size: 1rem;}
.Groot16 {font-size: 1rem;}
.Groot18 {font-size: 1.25rem;}
.Groot20 {font-size: 1.5rem;}

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

.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;
}

/* Lijstje met onderdelen en hun classen:
hoegaathetmetje
hoezitjeinjevel
omgaanmetelkaar
omgaanmetelkaarklas
naregedachten
leergedrag
hoeishetthuis
raregedachten
jijeneten
slapen
roken
alcohol
cannabis
gamen
socialmedia
seksualiteit
voeding
bewegen
tanden
naregebeurtenissen
waterpijp
xtc
faalangst
samenofalleen
zelfbeschadiging
piekeren
naderonderzoek
lichamelijkegezondheid
totslot
mogenwejenogwatvragen
*/

.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-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;
}

.categorie-emotioneleproblemen { background: #00AEEF; }
.categorie-genotmiddelengebruik { background: #8CC63F; }
.categorie-leefgewoonten { background: #91278F; }
.categorie-leefomgeving { background: #EC008C; }
.categorie-digtaalmediagebruik /* sic */, .categorie-digitaalmediagebruik /* just in case they fix it later on */ { background: #ED1C24; }
.categorie-kwaliteitvanleven { background: #F58220; }
.categorie-leergedrag { background: #ecd500; } /* yellow. A bit darker than in PDF so that we don't have to change the foreground color */


.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-ropeat 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-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;
}

/* Alleen de onderdelen die een icoontje hebben */
.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-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;
}

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

.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;
}

.page-cat-emotioneleproblemen .vraag-nummer { color: #00AEEF; }
.page-cat-genotmiddelengebruik .vraag-nummer { color: #8CC63F; }
.page-cat-leefgewoonten .vraag-nummer { color: #91278F; }
.page-cat-leefomgeving .vraag-nummer { color: #EC008C; }
.page-cat-digtaalmediagebruik .vraag-nummer, .page-cat-digitaalmediagebruik  .vraag-nummer { color: #ED1C24; }
.page-cat-kwaliteitvanleven .vraag-nummer { color: #F58220; }
.page-cat-leergedrag .vraag-nummer { color: #ecd500; }

.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: #016adb;;
  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: 18px;
  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: #029bd3; color: #FFFFFF; }
.btn-pink { background-color: #a3015f; border-color: #d3027c; color: #FFFFFF; }
.btn-orange { background-color: #F7941E; border-color: #e28316; color: #FFFFFF; }

.btn-blue:hover, .btn-blue:focus { background-color: #029bd3; }
.btn-pink:hover, .btn-pink:focus { background-color: #d3027c; }
.btn-orange:hover, .btn-orange:focus { background-color: #e28316; }

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

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

.box-contact {
  background: #EEEEEE;
  padding: 1.5rem 1.5rem 1.5rem 1.5rem;  
}

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.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); }
  
  
/*******************************************/
/*******************************************/

.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-bar {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  -ms-flex-pack: center;
  justify-content: center;
  overflow: hidden;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  background-color: #026f97;
  transition: width .6s ease;
}

.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 {
    height: 170px;
  }
  
  .hblok {
    height: 85px;
  }
  
  .hblok1-1, .hblok1-2, .hblok1-3, .hblok1-4, .hblok1-5, .hblok1-6, .hblok1-7, .hblok1-8, .hblok1-9 { top: 0px; }
  .hblok1-4 { height: 105px; }
  .hblok1-5 { height: 170px; }
  .hblok1-6 { height: 45px; }
  .hblok1-9 { height: 125px; }

  .hblok2-1, .hblok2-2, .hblok2-3, .hblok2-5, .hblok2-7, .hblok2-8 { top: 85px; }
  .hblok2-4 { top: 105px; height: 65px; }
  .hblok2-6 { top: 45px; height: 125px; }
  .hblok2-9 { top: 125px; height: 45px; }

  .hblok3-1, .hblok3-2, .hblok3-3, .hblok3-4, .hblok3-5, .hblok3-6, .hblok3-7, .hblok3-8, .hblok3-9 { display: none; }
  
  #logo { top: 45px; }
  #logo IMG { height: 81px; content:url("/images/logo-jijenjegezondheid-beeldmerk-h81.png"); }
  
  .vraag .antwoorden-container {
    margin-top: 0;
  }
  .vraag .antwoorden {
    margin-left: 0;
  }
}


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

  .hblok1-1, .hblok1-2, .hblok1-3, .hblok1-4, .hblok1-5, .hblok1-6, .hblok1-7, .hblok1-8, .hblok1-9 { top: 0px; }
  .hblok1-4 { height: 130px; }
  .hblok1-5 { height: 210px; }
  .hblok1-6 { height: 55px; }
  .hblok1-9 { height: 160px; }

  .hblok2-1, .hblok2-2, .hblok2-3, .hblok2-5, .hblok2-7, .hblok2-8 { top: 105px; }
  .hblok2-4 { top: 130px; height: 80px; }
  .hblok2-6 { top: 55px; height: 155px; }
  .hblok2-9 { top: 160px; height: 51px; }

  .hblok3-1, .hblok3-2, .hblok3-3, .hblok3-4, .hblok3-5, .hblok3-6, .hblok3-7, .hblok3-8, .hblok3-9 { display: none; }
  
  #logo { top: 55px; }
  #logo IMG { height: 101px; content:url("/images/logo-jijenjegezondheid-beeldmerk-h101.png"); }
}

/* 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: #838080;
}
.translation {
  color: #838080;
  font-style: italic;
  font-weight: normal;  
}
.translation.text-center{
  font-size: 80%
}

/* 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%;
  
}

.indent {
  margin-left: 30px;
  
}


.smiley {
  width: 120px;
  height: 80px;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
}
.smiley-thumbsup      { background-image: url("/images/smileys/icon_01f44d_80.png"); }
.smiley-thumbsdown    { background-image: url("/images/smileys/icon_01f44e_80.png"); }
.smiley-zzz           { background-image: url("/images/smileys/icon_01f634_80.png"); }
.smiley-3dots         { background-image: url("/images/smileys/icon_0022ef_80.png"); }
.smiley-happy         { background-image: url("/images/smileys/icon_01f604_80.png"); }
.smiley-knockedout    { background-image: url("/images/smileys/icon_01f635_80.png"); }
.smiley-hushed        { background-image: url("/images/smileys/icon_01f62f_80.png"); }
.smiley-thinking      { background-image: url("/images/smileys/icon_01f914_80.png"); }

.control2 {
  display: block;
  float: left;
  text-align: center;
  height: 150px;
  width: 150px;
  margin: 10px;
  cursor: pointer;
  font-size: 24px;
}


LABEL.control2 {
  font-weight: normal;
}

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

.control2 .control-label {
  border: 2px solid transparent;
  padding: 10px 15px;
  border-radius: 5px;
  min-width: 100px;
}

.control2:hover INPUT ~ .control-label {
  /* background-color: rgba(255, 255, 255, 0.3); */
  background-color: rgba(0, 0, 0, 0.1);
}

.control2 INPUT:checked ~ .control-label {
  /* border: 2px solid #FFFFFF; */
  border: 2px solid #009900;
  font-weight: bold;
}

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