:root {
--regel-hoogte: 50px;
}

.container h2 {
  margin: 0px;
  margin-top: 3px;
}

.kop, .regel {
	display: flex;
	gap: 10px;
	width: 100%;
	margin-bottom: 5px;
	height: var(--regel-hoogte);
	align-items: center;
}

.kop {
	height: 15px;
}

.regel:nth-child(odd) {
	background-color: #f2f2f2;
}

.regel {
	background-color: white;
	color: black;
	height: 75px;
}

.regel:hover{
		background-color: #ddd;
	/* color: white; */
}

.code {
	display: flex;
	width: 80px;
	align-items: right;
}

a.foto {
	padding: unset;
}

.foto {
    display: flex;
    justify-content: center; /* Plaats het kind (de afbeelding) in het midden horizontaal */
    align-items: center; /* Plaats het kind (de afbeelding) in het midden verticaal */
    width: 90px; /* Optioneel: zorg ervoor dat .foto de volledige breedte van de container inneemt */
    height: var(--regel-hoogte);
}

.foto img {
    max-width: 100%; /* Zorg ervoor dat de afbeelding niet breder wordt dan de container */
    height:100%;
    object-fit: contain; /* Schaal de afbeelding zodat deze volledig binnen de container past */
	/* background-color: red; */
	margin-right: 10px;
}

.datum, .prijs {
	display: flex;
	width: 100px;
	align-items: right;
}

.omschrijving {
	display: flex;
	flex: 1;
}

a {
	text-decoration: none;
}

.code, .datum, .prijs {
    display: flex;
    flex-direction: column; 
}

.code, .datum, .tijd, .prijs {
	text-align : right;
	padding-right: 10px;
}

/* Op kleine schermen */
@media screen and (max-width: 768px) {
	
	.datum {
		display: none;
	}
	
	body {
		font-size: 12px
		min-size: 600px;
	}
	
	.omschrijving{
		min-width: 290px
	}
}

@media screen and (max-width: 600px) {
	.foto {
		display: none;
	}
	
	.omschrijving{
		min-width: 200px
	}
}