@charset "utf-8";
/* CSS Document */

/* styles.css - ALGEMEEN */
body {
    font-family: "Poppins", sans-serif;
    margin: 0;
    padding: 0;
}

h2{
  	font-family: "Poppins", sans-serif;
  	font-weight: normal;
  	color: #464646;
  	font-size: 20px; 
}

header {
    background-color: #fff;
    color: #000;
    padding: 20px;
	/* text-align: center;*/
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

main {
    padding: 20px;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.table-container {
    width: 100%; /* Optioneel: pas de breedte van de tabelcontainer aan */
    overflow-x: auto; /* Voegt een horizontale schuifbalk toe indien nodig */
    height: 600px!important
        ;
}

td {
    white-space: nowrap; /* Voorkomt het afbreken van tekst */
    overflow: hidden; /* Verbergt eventuele overloop van tekst buiten de cel */
    text-overflow: ellipsis; /* Toont een ellipsis (...) als de tekst breder is dan de cel */
}


table th, table td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: left;
}

table th {
    background-color: #f2f2f2;
}

table tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

table tbody tr:hover {
    background-color: #f2f2f2;
}

footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px;
    position: fixed;
    bottom: 0;
    width: 100%;
}

#verzend_button, #exportBtn{
  background-color: #288AFF;
  border: 1px solid #288AFF;
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, .1) 0 2px 4px 0;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  font-family: "Akzidenz Grotesk BQ Medium", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  font-weight: 400;
  outline: none;
  outline: 0;
  padding: 10px 25px;
  text-align: center;
  transform: translateY(0);
  transition: transform 150ms, box-shadow 150ms;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

#verzend_button, #exportBtn:hover {
  box-shadow: rgba(0, 0, 0, .15) 0 3px 9px 0;
  transform: translateY(-2px);
}

/* ----------------- DESKTOP */
@media screen and (min-width: 769px) {
  .button-37 {
    padding: 10px 30px;
  }
}

form {
    margin-bottom: 20px;
}

label {
    display: block;
    margin-bottom: 5px;
}

.logo_login {
  	height: 85px;
  	max-width: 300px;
}

/* ----------------- DESKTOP */
@media screen and (min-width: 769px) {
	input[type="text"],
	input[type="number"],
	input[type="password"],
	select {
		width: 100%;
		padding: 10px;
		margin-bottom: 10px;
		border: 2px solid #ccc;
		border-radius: 4px;
		box-sizing: border-box;
		font-size:16px;
		font-family: "Poppins", sans-serif;
	}
}

/* ----------------- MOBIEL */
@media screen and (max-width: 768px) {
	input[type="text"],
	input[type="number"],
	input[type="password"],
	select {
		width: 100%;
		padding: 15px;
		margin-bottom: 10px;
		border: 1px solid #ccc;
		border-radius: 4px;
		box-sizing: border-box;
		font-size:24px;
		font-family: "Poppins", sans-serif;
	}
}

/* BEHEER PAGINA */
#exportBtn {
   /* float: right;
    margin-top: 25px; */ 
	margin-top: 33px;
	margin-left:10px;
  /*padding: 15px;*/
}

/* ----------------- MOBIEL */
@media screen and (max-width: 768px) {
	#exportBtn {
   		width: 100%;
      	margin-bottom: 20px;
		margin-top: 50px;
	}

}

.data_zoeken {
    display: -webkit-box;
    flex-direction: column; 
}

.form_group {
    margin-bottom: 10px; 
	/*width:49.5%;*/
	width:39.5%;
	margin-right:20px;
}

.form_group label {
    margin-bottom: 5px; 
}
@media screen and (max-width: 768px) {
	.data_zoeken {
    display: inline;
    flex-direction: column; 
}
	.form_group {
    margin-bottom: 10px; 
	width:100%;
	margin-right:20px;
}

}


#totaal_keuze tr th {
  background-color:#A0C764;
  color:#fff;
}




#totaalbtn{
background-color: #A0C764;
  border: 1px solid #A0C764;
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, .1) 0 2px 4px 0;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  font-family: "Akzidenz Grotesk BQ Medium", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  font-weight: 400;
  outline: none;
  outline: 0;
  padding: 10px 25px;
  text-align: center;
  transform: translateY(0);
  transition: transform 150ms, box-shadow 150ms;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;


}

#totaalbtn:hover {
  box-shadow: rgba(0, 0, 0, .15) 0 3px 9px 0;
  transform: translateY(-2px);
}
#totaalbtn{
color:#fff;
	text-decoration: none;
}


#totaal_jaren_div {
  text-align: center;
  padding-top: 50px;
	padding-bottom: 10px;
}



.uitlegthead {
  font-size: 14px;
  font-weight: normal;
}

/* FORMULIER PAGINA */
/* ----------------- DESKTOP */
@media screen and (min-width: 769px) {
	.formulier_info_ys_fo {
		max-width:725px;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		padding-left: 50px; 
		padding-right: 50px; 
		padding-bottom: 30px; 
		padding-top: 10px; 
		margin-left: auto;
		margin-right: auto;
		margin-top: 0px;
	}
	h2 {
		font-weight: 600;
	}
}

/* ----------------- MOBIEL */
@media screen and (max-width: 768px) {
	.formulier_info_ys_fo{
		width: 90%;  
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		padding: 50px 20px;   
		margin-left: auto;
		margin-right: auto;
		margin-top: 50px;    
	}
	.formulier_info_ys_fo {
		padding: 20px;
	}
	h2 {
		font-size: 20px;
	}
}

/* LOGIN PAGINA */
.login_ys_lo .logo_login {
  	width: 105px;
  	max-width: 600px;
}

.logo_inloggen_ys{

max-width:80px!important;
}

/* ----------------- DESKTOP */
@media screen and (min-width: 769px) {
	.login_ys_lo {
		max-width:725px;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		padding: 50px;   
		margin-left: auto;
		margin-right: auto;
		margin-top: 0px;
	}
}

/* ----------------- MOBIEL */
@media screen and (max-width: 768px) {
	.login_ys_lo {
		width: 95%;
		box-sizing: border-box;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		padding: 50px 20px;   
		margin-left: auto;
		margin-right: auto;
		margin-top: 100px;    
	}
	input[type="text"], input[type="number"], input[type="password"], select {
		font-size: 18px;
	}
	#verzend_button {
		width: 100%;
	}
	h2 {
		font-weight: 600;
		text-align: center;
	}
}

.login_ys_lo .imgcontainer {
	text-align: center;
}





/*

@media screen and (min-width: 901px) {

.login{
   width: 400px;
  
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  padding: 50px;
   
  margin-left: auto;
  margin-right: auto;
  margin-top: 200px;

    
}


}

@media screen and (max-width: 900px) {
 .login{
    width: 90%;
   
    background-color: lavender;
 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  padding: 20px;
   
  margin-left: auto;
  margin-right: auto;
  margin-top: 100px;
  }
}
*/








/*formulier 2*/
/*
.formulier_info{
   width: 745px;
  
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  padding: 50px;
  margin: auto; 
    position: absolute;
   
    left: 29%;
    
}


@media only screen and (max-width: 768px) {
  .formulier_info{
   width: 75%;
  position: inherit;
  
    
    
}
}
*/