body {
  margin: 0;
  background-color: rgb(191, 215, 230);
}

.taalkiezen {
  height: 25px;
}

#taalNL{
  position: fixed;
  top: 5px;
  right: 20%;
}
#taalEN{
  position: fixed;
  top: 5px;
  right: 15%;
}

/*opmaak van het logo homepage */
#logo{
  width: 20%;
  margin-left: 40%;
  margin-top: 40px;
  position: relative;
}
/*Opmaak van het logo in de header*/
#logo_elders, #logo_elders1{
  height: 25px;
  position: fixed;
  top: 5px;
  right: 6%;
  z-index: 10;
  cursor: pointer;
}

#infoStartplaatje{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 60%;
}

#picosplaatje{
  display: block;
  width: 40%;
  margin-right: auto;
  margin-left: auto;
}

#login_overlay{
  position: fixed;
  top: 0px;
  left:0px;
  right: 0px;
  bottom: 0px; 
  width: 100%;
  height: 100%;
  z-index: 100;
  background-color: rgb(191, 215, 230);
}

#wrongpassword{
  color: red;
  display: none;
}

/*Deze div dezelfde hoogte geven als de header, zodat de rest van de pagina niet achter de header begint*/
#eenextradiv{
  width: 100%;
  position: relative;
  top: 0 px;
  padding: 10 px;
  margin-bottom: 4%;
}

/* Opmaak van de titels en standaard tekst */
h1{
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  color: rgb(0, 33, 94);
}

h1.boventitel{
  margin-top: 80px;
}

h2 {
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  color: rgb(0, 33, 94);
}

h3{
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  color: rgb(0, 33, 94);
}

p {
  color: rgb(0, 33, 94);
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  width: 70%;
  font-family: Arial, Helvetica, sans-serif;
}

/*Gezamelijke CSS van Header en Footer*/
header, footer { 
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  display: block;
  /*De z-index is redelijk hoog om te zorgen dat de header altijd te zien is en de rest van de pagina er niet voorlangs kan scrollen*/
  z-index: 8;
  background-color: rgb(92, 115, 175);
  position: fixed;
  color: white;
  width: 100%;
  padding: 10px;
}

/*De styling van de footer en zorgen dat de footer mooi beneden blijft staan*/
footer {
  bottom: 0%;
  padding: 10px;
  margin-top: 7%;
}

/*De styling van de header en zorgen dat de header mooi  blijft staan*/
header {
  top: 0%;
  margin-bottom: 7%;
}

/*Als er over verschillende knoppen wordt gehoverd veranderd de kleur*/
.externelinks:hover, .openchecklistknop:hover, #terugknop:hover, .targetknop:hover, #nieuwepatient:hover{
  background-color: rgb(0, 33, 94);
  cursor: pointer;
}
/*Als er over verschillende knoppen wordt gehoverd veranderd de kleur*/
.homeknop:hover, .appinfoknop:hover,.overons:hover, .contact:hover{
  color: rgb(0, 33, 94);
  cursor: pointer;
}
/* De styling van de informatie 'popup' van de informatieknoppen */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  margin: 100 px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.4);
}
/*De informatiebox bij titel informatie*/
#infobox{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 10;
  height: 100%;
}
/*In de lange informatie pop-ups het kopje "referenties"*/
.referentieskopje {
  font-weight: bold;
  text-align: center;
}
/*De tekst onder het referenties kopje*/
#referenties{
  font-size: 13px;
  font-family: Arial, Helvetica, sans-serif;
  left: 18%;
  position: relative;
}
/**/
#referentiesdoel{
  font-size: 13px;
  font-family: Arial, Helvetica, sans-serif;
  left: 2%;
  position: relative;
}
/*De pop-up waarin informatie getoond kan worden*/
#pop-up{
  border-radius: 5px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

#checklistinfo{
  width: 50%;
}

/*Het tekstvakje waar informatie in gezet kan worden bij de checklist in de pop-up*/
#box-tekst{
  margin-top: 1%;
}
/*De opmaak van de tekst in de pop-up*/
.box-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  color: rgb(0, 33, 94);
  border-radius: 5px;
}
/*De x teken om een pop-up af te sluiten*/
.sluit {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.sluit:hover, .sluit:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.informatie-box2 {
  margin-top: auto;
  margin-bottom: auto;
}

.informatie-box2:hover {
  cursor: pointer;
}

.informatie-box3 {
  margin-left: auto;
  margin-right: auto;
  display: inline-block;
  position: absolute;
  transform: translateX(80px);
}

.informatie-box3:hover{
  cursor: pointer;
}

#list-info-box{
  font-family: Arial, Helvetica, sans-serif;
}
.informatie-box {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.informatie-box:hover {
  cursor: pointer;
}

/*De styling van de Start knop*/
.openchecklistknop {
  border: none;
  padding: 15px 32px;
  text-align: center;
  font-size: 16px;
  text-decoration: underline;
  border-radius: 4px;
  background-color: rgb(92, 115, 175);
  color: white;
  cursor: pointer;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/*De styling van de SLEDAI-2K & cSLEDAI-2K checklisten*/
.checklist {
  font-family: Arial, Helvetica, sans-serif;
  color: rgb(0, 33, 94);
  font-size: 15px;
  margin-left: 5%;
  margin-right: 5%;
  align-self: center;
  justify-self: center;
  border: 2px solid rgb(0, 33, 94);
  border-radius: 5px; 
}
/*De styling van de tabel met de laatste 2 vragen die nodig zijn om de volledige SLEDAI te bepalen*/
#checklistaanvullend {
  margin-left: auto;
  margin-right: auto;
  width: 25%;
}
/*Hierdoor worden de 2 cheklist tabellen naast elkaar weergegeven in plaats van onder elkaar*/
#checklistwrapper {
  margin-left: auto;
  margin-right: auto;
  width: fit-content;
  display: flex;
  justify-items: center;
  justify-content: center;
  align-content: center;
  align-items: center;
}
/*Deze div bevat de checklist tabellen*/
#checklistblok {
  display: block;
  margin-top: 1%;
  margin-bottom: 8%;
}

.checklist th {
  background-color: rgb(92, 115, 175);
  padding: 6px;
  font-size: 16px;
}

.checklist tr:nth-child(odd){
  height: 36px;
  background-color: rgba(92, 116, 175, 0.1)
}

.checklist tr:nth-child(even) {
  background: rgba(92, 116, 175, 0.3);
  height: 36px;
}
/*Bij de checklisttabellen de 3e kolom*/
.derdekolom{
  width: 250px;
}
/*De radiobuttons bij de checklist*/
.buttonJaNee{
    -webkit-appearance:none;
    width:15px;
    height:15px;
    border:1px solid rgb(0, 33, 94);
    outline:none;
    display: block;
    margin-left: auto;
    margin-right: auto;
    background-color: white;
}
.buttonJaNee:hover {
    box-shadow:0 0 5px 0px orange inset;
}
.buttonJaNee:before {
    content:'';
    display:block;
    width:60%;
    height:60%;
    margin: 20% auto;    
    border-radius:50%;    
}
.buttonJaNee:checked:before {
    background:rgb(0, 33, 94);
}

/*Styling van de knoppen onder de checklisten*/
.checklistknop {
  border:none;
  padding: 15px 32px;
  text-align: center;
  font-size: 16px;
  text-decoration: underline;
  border-radius: 4px;
  background-color: rgb(92, 115, 175);
  color: white;
  cursor: pointer;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.checklistknop:hover {
  color:white;
  background-color: rgb(0, 33, 94);
  cursor: pointer;
}

#checklistknopdoel{
  margin-top:40px;
}

/*CSS van het middenstuk*/
.middenstuk {
  margin-left: auto;
  margin-right: auto;
  margin-top: 2%;
  display: block;
  margin-bottom: 5%;
  text-align: center;
  color: rgb(0, 33, 94);
}

/*styling van de header op de pagina voor het invoeren van de PGA pagina*/
#headerPGA{
  margin-top: 0%;
}

/*De nummers die de begin en eindwaarde van de slider markeren*/
.slidernummer {
  font-family: Arial, Helvetica, sans-serif;
  color: rgb(0, 33, 94);
  font-size: 15px;
}


/*Styling van Over de applicatie*/
.circle {
  margin-left: auto;
  margin-right: auto;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  padding: 6px;
  background:rgb(92, 115, 175);
  border: 3px solid white;
  color:white;
  text-align: center;
  font: 28px Arial, sans-serif;
}

.proces {
  text-align: center;
  color: rgb(0, 33, 94);
  font-size: 17px;
  font-family: Arial, Helvetica, sans-serif;
}

/*Styling van de terugknop*/
#terugknop {
  position: fixed;
  top: 8%;
  left: 1.7%;
  border: none;
  padding: 10px 17px;
  text-align: center;
  font-size: 16px;
  text-decoration: underline;
  border-radius: 4px;
  background-color: rgb(92, 115, 175);
  color: white;
  cursor: pointer;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0px;
  z-index: 10;
}

datalist label {
  display: inline;
}

/* De opmaak voor de slider van de PGA score */
.samenvattingtitel{
  font-size: 20px;
  background:none;
  font-weight: bold;
}

#PGAaangeven {
  font-family: Arial, Helvetica, sans-serif;
}

#sliderscore {
  font-size: 20px;
  width: 100px;
  background-color: white;
  border: 1px solid rgb(0, 33, 94);
  text-align: center;
  padding-left: 3px;
}

#pgaslider {
  width: 400px;
}

.tabelmedicatie {
  margin-left: auto;
  margin-right: auto;
  margin-top: 2%;
  margin-bottom: 4%;
  color: rgb(0, 33, 94);
  font-family: Arial, Helvetica, sans-serif;
}

.medicatie{
  width: 200px;
}
/*De * tekens die worden weergeven als aanduiding van de nog niet ingevulde medicatie*/
.ster{
  color: red;
}

/*De weergave van de tabellen die de samenvatting bevatten*/
.samenvattingstabeltonen{
  border: 2px solid rgb(0, 33, 94);
  color: rgb(0, 33, 94);
  border-radius:5px;
  min-width: 100%;
  font-size: 15px;
  text-align: left;
  font-family: Arial, Helvetica, sans-serif;
}

.samenvattingstabeltonen tr:nth-child(odd){
 background : rgba(92, 116, 175, 0.1);
 height: 27px;
}

.samenvattingstabeltonen tr:nth-child(even){
  background : rgba(92, 116, 175, 0.3);
  height: 27px;
}

.samenvattingstabeltonen th{
  height: 27px;
}
/*De div waarin de samenvatting tabel wordt weergegeven.*/
.samenvattingdiv {
  position: absolute;
  bottom: 8%;
  right: 1.7%;
  height: fit-content;
  width: 35%;
  z-index: -1;
}
/*Bij de samenvattingstabel zorgen dat de titels dezelfde achtergrond hebben als de rest van de pagina*/
#geenopmaak{
  font-weight: bold;
  background: none;
}
/*Bij de sammenvatting tabbellen zorgen dat beide kolommen even breed zijn*/
.eerstekolom{
  width: 50%;
}

/*In de pop-up met aanvullende eisen voor LLDAS structuur van de vragen*/
#lldaseisen {
  font-family: Arial, Helvetica, sans-serif;
}

#lldastabel td {
  vertical-align: top;
}

#lldastabel{
  text-align: left;
  margin: auto;
}

#targettext{
  font-weight: bold;
}

.targetknop{
  padding: 5px;
  color: white;
  background-color: rgb(92, 115, 175);
  width: 150px;
  position: absolute;
  left: 50%;
  transform: translatex(-50%);
  display: inline-block;
  border: none;
  border-radius: 4px;
}

#target-infotext {
  text-align: left;
}
/*De weergave van de gegeven adviezen*/
#adviezentabel {
  margin: 0 auto;
  border: 2px solid rgb(0, 33, 94);
  border-radius: 5px;
  font-family: Arial, Helvetica, sans-serif;
  color: rgb(0, 33, 94);
  font-size: 15px;
  text-align:left;
  width: 35%;
}
/*De weergave van de samenvatting op de adviezenpagina, deze is anders dan op andere pagina's*/
#adviezensamenvatting{
  position: initial;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: auto;
}

#scorediv, #pgaTabel, .pgascorelabel {
  width: min-content;
  bottom: 20px:
  display: block;
}



#doelStatus{
  font-weight: bold;
}

ul{
margin: 0%;
}

/*De foto's op de over ons pagina*/
.fotos{
  margin-left: auto;
  margin-right: auto;
  border-radius: 150px;
  border: 1px solid rgb(0, 33, 94);
  width: 150px;
  height:150px;
}
/*De foto's van de MIK studenten op de 'over ons pagina'*/
.fotosvanons{
  margin-left: auto;
  margin-right: auto;
  border-radius: 150px;
  border: 1px solid rgb(0, 33, 94);
  width: 80px;
  height:80px;
}

#nieuwepatient{
  border: none;
  padding: 10px 17px;
  text-align: center;
  font-size: 16px;
  text-decoration: underline;
  border-radius: 4px;
  background-color: rgb(92, 115, 175);
  color: white;
  cursor: pointer;
  display: block;
  margin-left: auto;
  margin-right: auto;
  position: fixed;
  top: 8%;
  right: 1.7%;
}

/*Dit stuk regelt de layout op smallere schermen*/
@media screen and (max-width: 750px) {
  #adviezentabel, #adviezensamenvatting {
    width: 50%;
  }
}


@media only screen and (max-width: 600px){

  #checklistwrapper {
    margin-left: auto;
    margin-right: auto;
    width: max-content;
    display: block;
  }

  #checklisteinde {
    margin-top: 5%;
  }

  #meditonen {
    position: initial;
    margin-left: auto;
    margin-right: 2%;
    margin-bottom: 8%;
    width: 60%;
  }
}