.header {
  height: 300px;
  background-image: url('../pictures/Header2.png'); /* Vervang met je bestandsnaam */
  width: 100%;
  background-position: center;  /* Centreert de afbeelding */
  background-repeat: no-repeat; /* Voorkomt herhaling */
  background-color:#c8e4ed;
}

.link {
  text-decoration: none; /* verwijdert de standaard onderstreping */
 color: #333;
  padding: 10px 20px;
 font-size: 18x;
}
.link:hover {
  background-color: #f0f9fb;

}

.button {
  display: inline-block; /* zodat de <a> zich als knop gedraagt */
  text-decoration: none; /* verwijdert de standaard onderstreping */
  background-color: #e6f3f7;
  border: 2px solid #ffffff;
  color: #333;
  padding: 10px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.button:hover {
  background-color: #f0f9fb;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}

.button-container {
  display: flex;
  flex-wrap: wrap;           /* laat knoppen doorlopen op nieuwe regel */
  justify-content: center;   /* centreert ze horizontaal */
  gap: 0px;                 /* ruimte tussen de knoppen */
  padding: 2px;
}

.content {
  max-width: 100%;
  margin: 5px auto;
  padding: 10px;
  background-color: #bde1eb;       /* donkere achtergrond */
  border-radius: 1px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  font-family: 'Segoe UI', sans-serif;
  color: #010b0e;                  /* lichte tekstkleur voor contrast */
  line-height: 1.8;
  font-size: 18px;                 /* grotere tekst */
}

.contenttwee {
  max-width: 80%;
  margin: 5px auto;
  padding: 10px;

  border-radius: 1px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  font-family: 'Segoe UI', sans-serif;
  color: #010b0e;                  /* lichte tekstkleur voor contrast */
  line-height: 1.8;
  font-size: 18px;                 /* grotere tekst */
}


.content h1,
.content h2,
.content h3 {
  color: #2a7a9b;
  margin-top: 20px;
}

.content p {
  margin-bottom: 16px;
  font-size: 17px;
}

   .login-container {
	   	font-family: 'Segoe UI', sans-serif;
      background-color: white;
      padding: 40px;
      border-radius: 12px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      width: 100%;
      max-width: 350px;
      text-align: center;
    }

    .login-container h2 {
      margin-bottom: 20px;
      color: #333;
    }

    .login-container input[type="text"],
    .login-container input[type="password"] {
      width: 100%;
      padding: 12px;
      margin: 10px 0;
      border: 1px solid #ccc;
      border-radius: 8px;
      background-color: #f8fcfd;
    }

    .aanpassen-container button {
			font-family: 'Segoe UI', sans-serif;
      width: 100%;
      padding: 12px;
      background-color: #e6f3f7;
      border: none;
      border-radius: 8px;
      color: #333;
      font-weight: bold;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }


    .login-container button {
			font-family: 'Segoe UI', sans-serif;
      width: 100%;
      padding: 12px;
      background-color: #e6f3f7;
      border: none;
      border-radius: 8px;
      color: #333;
      font-weight: bold;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    .login-container button:hover {
      background-color: #d0e7ef;
    }

    .login-container p {
		font-family: 'Segoe UI', sans-serif;
      margin-top: 16px;
      font-size: 14px;
      color: #666;
    }

    .login-container a {
			font-family: 'Segoe UI', sans-serif;
      color: #0077aa;
      text-decoration: none;
    }

    .login-container a:hover {
      text-decoration: underline;
    }
.center-wrapper {
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #e6f3f7;
}

.center-topper {
  height: 25vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #e6f3f7;
}

  body {
      font-family: 'Segoe UI', sans-serif;
      background-color: #e6f3f7;
      padding: 5px;
    }

    h2 {
      margin-top: 20px;
      color: #333;
    }

    table {
      width: 100%;
      max-width: 600px;
      border-collapse: collapse;
      margin-bottom: 30px;
      background-color: white;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }

    th, td {
      border: 1px solid #ccc;
      padding: 5px;
      text-align: left;
    }

    th {
      background-color: #d9edf2;
      color: #333;
    }

    td {
      background-color: #f9fcfd;
    }

    .total-row td {
      font-weight: bold;
      background-color: #e6f3f7;
    }