:root {
--regel_hoogte: 75px;
}

.assortiment {
	padding: 0px 10px 10px 10px;
}

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

.kop {
	height: 15px;
} 

.regel {
	background-color: var(--nieuw_regel_background_color);
	color: var(--nieuw_regel_font_color);
	height: var(--regel_hoogte);
}

.overzicht a:nth-child(odd) .regel  {
	background-color: var(--nieuw_regel_background_odd_color);
}

.regel:hover{
	background-color: var(--nieuw_regel_background_hover_color);
}

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

.kolom_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);
}

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

.kolom_datum, .kolom_prijs {
	display: flex;
	width: 100px;
	align-items: right;
}

.kolom_omschrijving {
	display: flex;
	flex: 1;
	flex-direction: column;
}

.kolom_extra_info {
	font-size: 0.65em;
}

 .overzicht a {
	text-decoration: none;
}

.kolom_code, .kolom_datum, .kolom_prijs {
    display: flex;
    flex-direction: column; 
	text-align : right;
	padding-right: 10px;
}

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

	.kolom_foto {
		display: none;
	}
}