body {
  background: #000; /* Basiskleur voor de achtergrond */
  background-image: 
    radial-gradient(circle at 25% 20%, rgba(255, 128, 0, 0.3), transparent 40%), 
    radial-gradient(circle at 75% 20%, rgba(230, 200, 20, 0.2), transparent 40%), 
    radial-gradient(circle at 50% 80%, rgba(255, 0, 0, 0.2), transparent 40%),
    url('../images/asfalt-dark.png'); /* URL van een storend patroon */
  background-size: cover, cover, cover, 100px 100px; /* Verklein de patroonafbeelding */
  filter: contrast(150%) brightness(90%); /* Verhoog het contrast en verminder de helderheid */
  height: 100vh; /* Zorg ervoor dat de achtergrond de volledige viewport bedekt */
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: white;
}

.bg-content {
  background-color: rgba(192, 188, 185);
}

.bg-venster {
  background-color: #E6E6E6;
}

.bg-menu {
  background-color: #BFBEB9;
}
.card-img-top {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

.fixed-image-top {
	width: 100%;
	height: auto;
	max-height: 100vh; /* Voorkomt dat de afbeelding groter wordt dan het scherm */
}

@media (max-width: 600px) {
	.fixed-image-top {
		max-height: 25vh; /* Zorg ervoor dat de afbeelding op kleinere schermen goed past */
	}
}


.card-img-right {
	object-fit: cover;
	height: 100%;
	width: 100%;
}
.fixed-image {
  width: 281px;
  height: 403px;
}
.accordion {
	--bs-accordion-btn-color: grey;
	--bs-accordion-btn-bg: lightgrey;
	--bs-accordion-btn-focus-box-shadow: red;
	--bs-accordion-active-color: black;
	--bs-accordion-active-bg: darkgrey;
}
.accordion-body {
	overflow-y: auto; /* Zorgt ervoor dat je verticaal kunt scrollen */
	max-height: 55vh; /* Gebruik een viewport-hoogte voor betere responsiviteit */
}


/* Stijl voor de aangevinkte staat van de checkbox */
.form-check-input:checked {
  background-color: #6c757d;
  border-color: #6c757d;
}
/* Stijl voor de checkbox wanneer niet aangevinkt */
.form-check-input:not(:checked) {
  border-color: #6c757d; /* Randkleur wanneer niet aangevinkt */
}
/* Gloed op de input bij focus */
.form-control:focus {
  border-color: #f5cb56;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(248, 196, 93, 0.6);
}
.act-icon{
  color: #754000;
}
.act-icon:hover{
  color:#824801;
}
pre{

  font-family: var(--bs-body-font-family);
  font-size: var(--bs-body-font-size);
  font-weight: var(--bs-body-font-weight);
  line-height: var(--bs-body-line-height);
  color: var(--bs-body-color);
  text-align: var(--bs-body-text-align);
  -webkit-text-size-adjust: 100%;
}
.table-hover {
  --bs-table-hover-bg: rgba(0, 0, 0, 0.33);
}
.table-striped {
  --bs-table-border-color: #00000040;
}
.table thead th {
  border-bottom: 1px solid #000;
}
.bg-label{
background-color: rgba(0, 0, 0, 0.1) !important;  
}
.border-label{
  border-color: #75400043;
}

/* Stijl de native file button binnen de input group */
#foto::file-selector-button {
  border: 1px solid #3B1000;
  background-color: #754000 !important;
  color: #fff;
  cursor: pointer;
}

/* Hover/focus states voor consistentie met Bootstrap buttons */
#foto::file-selector-button:hover {
  background-color: #824801 !important;
}

.scroll-form-card {
  display: flex;
  flex-direction: column;
  max-height: 90vh; /* maximaal 90% van viewport */
  overflow-x: hidden;
}

.scroll-form-card .card-body {
  flex: 1 1 auto; /* vult overgebleven ruimte */
  overflow-y: auto; /* scroll bij overflow */
  overflow-x: hidden;
  padding-right: 10px; /* voorkom scrollbar overlap */
}

/* kleine schermen */
@media (max-width: 576px) {
  .scroll-form-card {
    max-height: 80vh;
  }
}