.container {
	width: 100%;
}

.klantgegevens, .product, .eindbeoordeling {
	margin-top: 5px;
	margin-bottom: 5px;
}

.klantgegevens, .product, .eindbeoordeling {
    display: grid;
    grid-template-columns: 200px auto; /* Eerste kolom 30%, tweede kolom de rest van de beschikbare breedte */
    grid-gap: 10px;
    width: 100%;
}

.reparatiecode_invoerveld {
    display: flex;
    justify-content: center;
    align-items: center;
}

input[type="text"]:focus {
    background-color: #CAE1FF;
    color: black;
}

.reparatiecode_invoerveld form {
	background-color: var(--colorBGFormulier);
	border: 1px solid #333;
	border-radius: 10px; 
	text-align: center;
	padding: 25px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Op kleine schermen */
@media screen and (max-width: 768px) {
    .klantgegevens, .product, .eindbeoordeling {
	grid-template-columns: 30% auto; /* Eerste kolom 30%, tweede kolom de rest van de beschikbare breedte */
    }
}

/* Pas de breedte van de linker kolom (h3-elementen) aan */
.klantgegevens h3, .product h3, .eindbeoordeling h3 {
    width: 100%; /* Neemt de volledige breedte van de linker kolom in beslag */
}

/* Pas de breedte van de rechter kolom aan */
.klantgegevens, .product, .eindbeoordeling p {
    grid-column: span 2; /* Dit geeft aan dat het p-element twee kolommen breed moet zijn */
}

#reparatiecode {
    font-size: 24px; /* Kies hier de gewenste grootte voor het lettertype */
    /* Voeg eventuele andere stijlopmaak toe */
}

/* Deel wat gebruikt wordt voor een reparatielijst overzicht */
.rmaregel {
    display: flex;
    flex-wrap: wrap;
    margin: 10px 0;
}

.rmaregel > a {
    display: flex;
    text-decoration: none;
    background-color: #f9f9f9; /* Lichtgrijze achtergrond voor alle rijen */
    border: 1px solid #ddd; /* Lichtgrijze border */
	box-sizing: border-box;
    width: 100%;
}

.test:nth-child(odd) {
  background-color: #f2f2f2 !important; /* Lichtere grijze achtergrond voor oneven regels */
}

.rmaregel:nth-child(even) > a {
    background-color: #f2f2f2; /* Donkergrijze achtergrond voor even rijen */
}

.rmaregel > a:hover {
    border-color: #555; /* Donkergrijze border bij hover */
    background-color: #ccc;
}

.rmaregel > a > div {
    padding: 10px;
    box-sizing: border-box;
    white-space: nowrap;
}

.rmaregel > a > div:nth-child(1) {
    flex: 0 0 10%;
}

.rmaregel > a > div:nth-child(2) {
    flex: 0 0 20%;
}

.rmaregel > a > div:nth-child(3) {
    flex: 1;
}

/* Werkzaamheden rules */
.container_werkzaamheden {
  display: flex;
  flex-direction: column;
}

.werkzaamheden {
  display: flex;
  justify-content: space-between;
  border: 1px solid #ccc; /* Optioneel: voeg een rand toe tussen de werkzaamheden voor scheiding */
  margin-bottom: 5px; /* Optioneel: voeg wat ruimte toe tussen de werkzaamheden */
}

.werkzaamheden > div {
  width: 120px;
  box-sizing: border-box;
  padding: 5px; /* Optioneel: voeg wat ruimte toe rondom de inhoud van elke kolom */
}

.werkzaamheden > div:last-child {
  flex: 1; /* Laatste kolom neemt de rest van de beschikbare breedte in */
}

/* Om en om kleur */
.werkzaamheden:nth-child(odd) {
  background-color: #f2f2f2; /* Lichtgrijze achtergrond voor even rijen */
}