@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Patua+One&display=swap');

/* Hier worden eerst even de basis styles vastgesteld */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: sans-serif;
  font-size: 20px;
}

p{
  padding: 1vw;
}

h1{
  color: #0B3493;
  padding: 1vw;
}

h2{
  color: #5b78c7;
  padding: 1vw;
}

h3{
  color: #5b78c7;
  text-align: center;
}

a{

  text-decoration: strong;
  color: #0B3493;
}

a:hover{
	  text-decoration: strong;
  color: #EE7202;
}

ul{
  padding: 2vh;
}


/* vanaf hier is het opbouw gerelateerd. Alle div's nav header footer en spul*/
header{
  height: 10vh;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #0B3493;
}

nav {
  height: 8vh;
  width: 100%;
  background: #5b78c7;
}

footer{
  height: 8vh;
  text-align: center;
  background: #0B3493;
  color: white;
  display: flex;
  justify-content: space-around;
  align-items: center;

}

#onderbalk{
  height: 8vh;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background: #5b78c7;
}

#top_mid{
  font-size: 8vh;
  color: white;
  font-family: Patua One;
  font-weight: 400;
}

.main {
  height: 74vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.text {
  align-items: center;
  min-height: 74vh;
  padding:  2vh 10vw 2vh 10vw
}

.center {
  display:flex;
  flex-direction:column;
  align-items: center;
  text-align: center;

}
.logboek {
  min-height: 74vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.loginpag{
  text-align: center;
  border: none;
}
.gebwac{
  display: flex;
  flex-direction: row;
  font-size: 2.5vh;
}

.opvulling{
  width: 2vh;
}


/* Dit is de opbouw van de logboek pagina */
#info{
  display: flex;
  flex-direction: row;
  font-size: 20px;
  height: auto;
}

#name{
  width: 10vw;
}

#data{
  width: 12vw;
}

#uitleg{
  width: 50vw;

}

#baseinfo{
  width: 15vw;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.knoppen{
  width: 10vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: auto;
}

.knoppen form{
  padding-top: 2vh;
}

/* Dit is voor de opbouw van de tabellen op Logboek, breetes enzo */
#tien{
  width: 10vw;
  background-color: #05205e;
  color: white;
  font-weight: bold;
}
#vijf{
  width: 5vw;
  background-color: #05205e;
  color: white;
  font-weight: bold;
}
#vijfentwintig{
  width: 25vw;
  background-color: #05205e;
  color: white;
  font-weight: bold;
}
#verwijder{
  text-align: center;
  background-color: #05205e;
  color: white;
  width: 5vw;
  font-weight: bold;
}

#toezichtsomgeving form{
  padding: 1vh;
}

.overzicht{
  width: 80vw;
}

/*code vanaf hier is voor de invul bar in logboek*/

.invul{
  width: 80vw;

  border: white;
}

.invul th{
  background-color: #05205e;
  color: white;
}

.tien{
  width: 10vw;
}

.acht{
  width: 8vw;

}

.vijf{
  width: 5vw;
}

.zeven{
  width: 7vw;
}

.dertig{
  width: 28vw;
}

#gegevens tr:nth-child(even){
  background: #C6E1FF;
}

/* Alles wat afbeelding gerelateerd is staat hier */
.topicons{
  width: 20vw;
  display: flex;
  justify-content: space-between;
}

.topimg{
  width: 6vh;
  height: 6vh;
  border: 0px
}

.logimg{
  height: 30vh;
  width: auto;
  border: 0px;
  border-radius: 8px;
}

.frontimage{
  width: auto;
  height: 50vh;
  border: 0px;
  border-radius: 10px;
}

#logboekfoto{
  padding: 10vh;
}


/*dit is voor de table op ifweb*/
.webquests{
  text-align: center;
}

.webquests .one{
  width:50px;
  border: 0px solid #000000;
}

.webquests .two{
  width:250px;
  border: 2px solid #000060;"
}

.webquests .three{
  width:2px;
  border: 2px solid #000000;"
}



/* Vanaf hier is het voor het menu*/
.nav-links {
  display: flex;
  list-style: none;
  width: 100%;
  height: 100%;
  justify-content: space-around;
  align-items: center;
  margin-left: auto;
  z-index: 3
}

.nav-links li a {
  color: white;
  text-decoration: none;
  font-size: 16px;
  width: 16.6%;
}
.nav-links li a:hover{
	  text-decoration: none;
  color: #EE7202;
}

.nav-linkstwo {
  display: flex;
  list-style: none;
  width: 100%;
  height: 100%;
  justify-content: space-around;
  align-items: center;
  margin-left: auto;
  z-index: 3
}

.nav-linkstwo li a {
  color: white;
  text-decoration: none;
  font-size: 16px;
  width: 16.6%;
}
.nav-linkstwo li a:hover{
	  text-decoration: none;
  color: #EE7202;
}


/* Tis knopkes tijd ;)*/

.middelgroteknop{
  width: 10vw;
  height: 3vh;
  font-size: 2vh;
  border: none;
  background: #5b78c7;
  text-decoration: none;
  color: white;
  border-radius: 5px;
  cursor: pointer;
}
.middelgroteknop:hover{
  background: #7597e4
}

.groteknop{
  width: 15vw;
  height: 5vh;
  font-size: 2vh;
  border: none;
  background: #5b78c7;
  text-decoration: none;
  color: white;
  border-radius: 5px;
  cursor: pointer;
}
.groteknop:hover{
  background: #7597e4
}

.textbutton{
  height: 25px;
  width: 70px;
  border: none;
  border-radius: 8px;
  background: #5b78c7;
  color: white;
  font-size: 16px;
  cursor: pointer;

}

.textbutton:hover{
  background-color: #7597e4;
}

.grotelogboekknop{
  width: 15vw;
  height: 5vh;
  font-size: 2vh;
  border: none;
  background-color: #5b78c7;
  text-decoration: none;
  color: white;
  border-radius: 5px;
  cursor: pointer;
}
.grotelogboekknop:hover{
  background-color: #7597e4;
}

#schoneknopkes{              /* het zijn geen knopjes maar invul vakjes.. mijn naamgeving was toen heel logiesch oké*/
  display: block;
  font-size: 16px;
  font-family: sans-serif;
  font-weight: 700;
  color: #444;
  line-height: 1.3;
  padding: .6em 1.4em .5em .8em;
  max-width: 100%; /* useful when width is set to anything other than 100% */
  box-sizing: border-box;
  margin: 0;
  border: 1px solid #aaa;
  box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
  border-radius: .5em;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;
  /* note: bg image below uses 2 urls. The first is an svg data uri for the arrow icon, and the second is the gradient.
    for the icon, if you want to change the color, be sure to use `%23` instead of `#`, since it's a url. You can also swap in a different svg icon or an external image reference


Rechtstreeks gekopiert van de select-css.css voor om de layout van de dropdowns en de invulvakjes gelijk te krijgen.
  */

}

/*dit is voor de knop terug naar boven*/
#gttop {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: #5b78c7;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#gttop:hover {
  background-color: #7597e4;
}



#totaletijd{
  width: 20vw;
  text-align: right;
  padding: 0.5vh;
}
#printknop{

}

#knoppenbox{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}



/* misc, spacing stuff*/
.loginform{
  font-size: 2.5vh;
  padding: 0.5vh;
}

.veld{
  height: 3vh;
  min-width: 10vw;
}


/*code vanaf hier is voor de adaptiveness*/
@media screen and (max-width: 1020px) {

/*dit is die fancy hamburger navbar*/
  .line {
    width: 30px;
    height: 3px;
    background: white;
    margin: 5px;
  }
  nav {
    position: relative;
  }
  .hamburger {
    position: absolute;
    cursor: pointer;
    right: 5%;
    top: 50%;
    transform: translate(-5%, -50%);
    z-index: 4;
  }

  .nav-links {

    background: #5b78c7;
    height: 70vh;
    width: 100%;
    flex-direction: column;
    clip-path: circle(0px at 90% -10%);
    -webkit-clip-path: circle(0px at 90% -10%);
    transition: all 1s ease-out;
    pointer-events: none;
    z-index: 3;
  }
  .nav-links.open {
    clip-path: circle(1200px at 90% -10%);
    -webkit-clip-path: circle(1200px at 90% -10%);
    pointer-events: all;
  }

  /* de icontjes met links in de header verdwijnen als het schrem klijner word. dat doet dit */
  #top_left, #top_right{
    display: none;
  }

/* alles hier is rescalen of flex-direction veranderen */
  .frontimage{
    width: 90vw;
    height: auto;
    border: 0px;
  }

  .veld{
    height: 3vh;
    width: 30vw;
  }

  header{
    justify-content: space-around;
  }

  #info{
    display: flex;
    flex-direction: column;
    font-size: 20px;
  }

  #baseinfo{
    width: 80vw;
  }

  #name{
    width: 40vw;
  }

  #data{
    width: 60vw;
  }

  #uitleg{
    width: 80vw;
    padding-top: 3vh;
  }

  .knoppen{
    flex-direction: column;
    width: 80vw;
    justify-content: space-between;

  }

  .grotelogboekknop{
    width: 39vw;
    height: 7vh;
    font-size: 5vh;
    font-size: 17px;
    float: right;
  }

  .nee{
    display: none;
  }

  #totaletijd{
    width: 80vw;
    text-align: center;

  }


/*dit is de invultabel van het logboek responsive*/
.invul thead{
  display: none;
}

.invul, .invul tbody, .invul tr, .invul td{
  display: block;
  width: 80vw;
  border: 3px
  padding: 2vw;
}

.invul tr{
  margin-bottom: 2vh;

}
.invul td{
  text-align: left;
  padding-left: 40vw;
  position: relative;
  padding-top: 2vh;
  padding-bottom: 2vh;
}
.invul td::before{
  content: attr(data-label);
  position: absolute;
  left: 0;
  width: 35vw;
  padding-left: 2vw;
  background: #05205e;
  color: white;
  font-weight: bold;
}

  .tien{
    width: 40vw;
  }

  .vijf{
    width: 40vw;
  }

  .dertig{
    width: 40vw;
  }
  .zeven{
    width: 40vw;
  }

  /*dit is de animatie van het menu*/
  .nav-links li {
    opacity: 0;
  }
  .nav-links li a {
    font-size: 25px;
  }
  .nav-links li:nth-child(1) {
    transition: all 0.5s ease 0.2s;
  }
  .nav-links li:nth-child(2) {
    transition: all 0.5s ease 0.3s;
  }
  .nav-links li:nth-child(3) {
    transition: all 0.5s ease 0.4s;
  }
  .nav-links li:nth-child(4) {
    transition: all 0.5s ease 0.5s;
  }
  .nav-links li:nth-child(5) {
    transition: all 0.5s ease 0.6s;
  }
  .nav-links li:nth-child(6) {
    transition: all 0.5s ease 0.7s;
  }
  li.fade {
    opacity: 1;
  }

}