.custom-alert {
  display: none; /* Verborgen tot we het tonen */
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #4c7474;
  color: #fff;
  padding: 20px;
  border: 1px solid #08403e;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  text-align: left;
}

.custom-alert button {
  margin-top: 10px;
  padding: 5px 10px;
  float: right;
}
.custom-alert::after {
  content: ""; /* Maakt ruimte voor de button */
  display: block;
  clear: both;
}
/* BASIS STYLEN TABBLADEN */
#het_orgel,
#demos,
#downloads,
#systeemeisen,
#drie_kanalen {
  margin-top:20px;
}
#de_dispositie {  
  margin-top:60px;
  padding-right: 0; /* Voorkom dat er extra ruimte wordt toegevoegd door de body-aanpassing */
}
@media screen and (max-width:768px) {
#het_orgel,
#downloads,
#systeemeisen,
#drie_kanalen {
  margin-top:80px;
}
#de_dispositie {
  margin-top:0;
}
#demos {
  margin-top:0;
}
}
/* Verwijder standaardstijlen van de summary-tag */
summary::-webkit-details-marker {
  display: none;
}
summary {
  list-style: none;
  cursor: pointer;
  padding-bottom: 15px;
  margin-left: 5px;
  margin-right: 5px;
}
summary img:hover {
  border: 3px solid #e1edf5;
}
/* HET ORGEL */
#het_orgel picture img {
  width:100%;
  max-width:600px;
  height:auto;
}
#het_orgel .kleinerImg img {  
  width:100%;
  max-width:400px;
}
#het_orgel .hoog img {
  max-width:400px;
  height:auto;
}
#het_orgel .sum1.hoog {
  width:100%;
  height:auto;
  text-align:center;
}
.demoContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  width:100%;
  max-width:600px;
}
.demoContainerHoogImg {
  display: flex;
  align-items: center;
  justify-content: center;

  margin-left: auto;
  margin-right: auto;
  width:100%;
  max-width:400px;
}
#het_orgel .sum1 {
  width:100%; 
  font-size:1rem;
  top:0;
  border-radius: 0px 0px 10px 10px;
  text-align:center;
}
@media screen and (max-width:540px) and (max-width:768px) {
  #het_orgel .sum1 {   
    width:100%;
    font-size:1rem;
    margin:0;
  }
}
@media screen and (min-width:250px) and (max-width:539px) {
  #het_orgel .sum1 {
    width:auto;
    font-size:1rem;
    margin:0;
  }
}
#het_orgel .sum1 img {
  width: 20px;
  box-shadow: none;
  vertical-align: middle;
}
#het_orgel .sum2 {
  display: none;
  width: 100%;
  max-width: 500px;
  text-align: center;
  border: 1px solid #dedede;
  border-radius: 10px;
}
.sum2 img {
  width: 20px;
  vertical-align: middle;
  cursor:pointer;
}
.bladmuziek {
  text-decoration: underline;
  text-underline-offset: 2px; /* Pas deze waarde aan naar wens */
  border: 1px solid #000619;
  padding-left: 5px;
  padding-right: 5px;
}
/* JAVASCRIPT DivOpen*/
.playerA {
  position: fixed;
  width: 100%;
  max-width: 1200px;
  bottom: 0px; /* Zorgt ervoor dat de player 20px van de onderkant blijft */
  left: 50%; /* Centreert horizontaal */
  height: 20%;
  transform: translateX(
    -50%
  ); /* Horizontale centrering zonder de verticale positie te beïnvloeden */
  background-color: #638787;
  z-index: 9999; /* Zorgt ervoor dat de player altijd boven andere elementen staat */
}
.playerA .btn1 {
  float: right;
  padding-top: 10px;
  padding-right: 20px;
  cursor: pointer;
  color: #fff;
}
.btn1 .icon-close {
  display: block;
  position: absolute;
  font-size: 1.5rem;
  color: white;
  right: 20px;
  font-family: Arial, sans-serif; /* Of een ander lettertype */
}
.left_column {
  width: 96%;
  color: #fff;
  padding-right: 30px;
  padding-left: 10px;
  padding-top: 5px;
  padding-bottom: 10px;
  text-align: center;
  margin-top: 5px;
}
.content audio {
  display: block;
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  height: 40px;
  top: 80px;
  width: 96%;
  padding-left: 10px;
}
.right_column {
  width: 96%;
  text-align: center;
}
.left_column span {
  color: #fff;
  font-size: 0.8rem;
  text-align: center;
  font-weight: normal;
}
@media (max-width: 767px) {
  .playerA {
    height: 20%;
  }
  .content audio {
    top: 95px;
  }
}

/* TABLES */
table {
  max-width:1199px;  
}
.table {
  display: block; 
  margin-right:auto;
  margin-left:auto;
  margin-top:20px;
  margin-bottom:40px;
  border: none;
  border-collapse: collapse;
  width: 100%;
  white-space: nowrap;
  overflow-y: auto;
  background-color: #fbfdfd;
}
.table td {
  border: 1px solid #4c7474;
  padding: 10px;
  text-align:left;
}
.table1 {
  display: block;
  overflow: auto;
  background-color: #f5f9fd;
  white-space: nowrap;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 50px;
}
.table1 th {
  border: 1px solid #08403e;
  padding: 10px 0px;
  text-align: center;
}
.table1 td {
  border: 1px solid #08403e;
  padding: 10px 0px;
  text-align: left;
}
/* Comparison Table */
.table2 {
  display: block;
  width: 95%;
  overflow: auto;
  font-size: 1rem;
  margin: auto;
  border-collapse: collapse;
  padding-top:20px;
}
.table2 tr {
  width: 95%;
  padding: 5px;
}
.table2 th {
  text-align: center;
  padding: 5px;
  font-weight:normal;
  font-size:0.8rem;
  border: 1px solid #638888;
}
.table2 td {
  text-align: left;
  padding: 5px;
  border: 1px solid #638888;
}

/* INDEXPAGINA */
#terugKnop {
  margin: 20px;
  width: 50px;
  height: 30px;
  cursor: pointer;
  background-color: white;
  color: #638787;
  border: 2px solid #638787;
  border-radius: 10px;
}
.audioDiv {
  display: block;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 400px;
  width: 100%;
}
.demoBlock1 {
  display: block;
  position: relative;
  font-size: 0.9rem;
  line-height: 1.2rem;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 20px;
  width: 100%;
  max-width: 500px;
}
.demoBlock1 .summary3 {
  background-color: transparent;
  border: none;
  margin: auto;
}
.demoBlock2 {
  display: block;
  position: relative;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0px;
  float: none;
  max-width: 500px;
}

.demoBlock2 .summary3 {
  background-color: transparent;
  border: none;
}

.demoBlock1 summary.sum1 {
  padding: 10px;
  padding-top: 0;
  border-radius: 10px;
  box-shadow: 0 1px 5px rgba(0, 28, 0, 0.5);
  max-width: 400px;
  text-align: center;
  width: 100%;
}
.demoBlock2 summary.sum1 {
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 20px;
  border-radius: 10px;
  max-width: 400px;
  width: 100%;
  text-align: center;
  padding-top: 0px;
  margin-bottom: 0px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 1px 5px rgba(0, 28, 0, 0.5);
}
.demoBlock2 div.sum1 {
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 20px;
  border-radius: 10px;
  box-shadow: 0 1px 5px rgba(0, 28, 0, 0.5);
  max-width: 400px;
  width: 100%;
  text-align: center;
  padding-top: 0px;
  margin-bottom: 0px;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 768px) {
  .demoBlock2 summary.sum1 {
    max-width: 600px;
  }
}
.demoBlock2 summary.sum1 img {
  width: 20px;
  vertical-align: middle;
}
.demoBlock1 summary.sum1 img {
  width: 20px;
}
.demoBlock1 summary.sum1:focus {
  box-shadow: 0 1px 5px rgba(0, 28, 0, 0.5) inset;
}
.summary3 .sum1 {
  width:100%;
  max-width:600px;
  margin:0;
  padding:20px 33px;
}
.sum1 {
  box-shadow: 0 1px 5px rgba(0, 28, 0, 0.5);
  background-color: transparent; /* Normale achtergrondkleur */
  color: #000619; /* Normale tekstkleur */
  padding-bottom: 10px; /* Ruimte rondom de tekst */
  cursor: pointer; /* Geef het de uitstraling van een knop */
  display: inline-block; /* Zorg ervoor dat het zich gedraagt als een blok */
  transition: background-color 0.3s, color 0.3s; /* Soepele overgang tussen actieve en inactieve status */
  font-size:1.1rem;
  border-radius: 10px;
}
/* Hover en focus stijlen */
.summary3 .sum1:hover, .summary3 .sum1:focus, .sum1:hover, .sum1:focus  {
  background-color: #e1e7e5;    
  box-shadow: 0 5px 10px rgba(0, 28, 0, 0.5) inset;   
  color: #000; /* Zwarte tekst als actief */ 
  border-radius: 10px; 
}

/* Active toestand voor .sum1 */
.sum1.active {
  background-color: #e1e7e5;    
  box-shadow: 0 5px 10px rgba(0, 28, 0, 0.5) inset;   
  color: #000; /* Zwarte tekst als actief */   
  border-radius: 10px;
}

@media (max-width: 767px) {  
  .audioDiv {
    width: 300px;
    margin-right: auto;
    margin-left: auto;
  }
}
/* HOOFDPAGINA ORGEL */
/* Stijl voor DEMO voorpagina */
.demoBlock {
  width: 100%;
  max-width: 500px;
  margin-left: 30px;
}
.demoBlock audio {
  width: 100%;
  max-width: 500px;
}
.HW4 {
  width: 100%;
  padding: 20px;
  background-color: #ebf3f3;
  text-align: center;
}
.HW4 button {
  border: none;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0rem 0.1rem 0.3rem 0rem #638888;
  text-align: center;
  background-color: #eaeeee;
  color: #638888;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
}
.HW4 button:active {
  box-shadow: 0 1px 5px rgba(0, 28, 0, 0.5) inset;
  background-color: #fff;
}
.accent6 {
  color: #638888;
  letter-spacing: 0.3px;
  font-size: 0.9rem;
}
#audioLink {
  display: block;
  width: 100%;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  border: 2px solid #bbb;
  border-radius: 10px;
  padding: 5px;
}
#audioLink:hover {
  background-color: #eceff1;
}
.openButton {
  width: 100%;
  max-width: 1200px;
  cursor: pointer;
  border-radius: 10px;
  padding: 10px;
  border-color: #bbb;
}
#demo_01 {
  height: 30px;
  width: 100%;
  max-width: 1200px;
}
#closeButton {
  text-decoration: none;
  cursor: pointer;
  color: #022323;
}
#closeButton1 {
  text-decoration: none;
  cursor: pointer;
  color: #022323;
}
.sluitknop {
  width: 30px;
  height: auto;
  float: right;
  border-radius: 50%;
  box-shadow: 0 0.25rem 0.5rem 0 gray;
}
.divImg {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 150px;
}
figure.afbeelding_orgel {
  position: relative;
    display: inline-block;  
  margin:0;
}
figure.afbeelding_orgel.sliders{
  max-width:400px;
}
figure.afbeelding_orgel img {
  display: block;
  position: relative;
  max-width: 600px;
  width: 100%;
  height: auto;
  margin:0;
}
.afbeelding_orgel {
  display: block; 
  margin: 0 auto; /* Zorgt ervoor dat het element gecentreerd wordt */
  text-align: center; /* Centreert de inhoud, zoals de figcaption */
  width: fit-content; /* Zorgt ervoor dat de afbeelding niet de hele breedte inneemt */
}
.afbeelding_orgel .summary3 {
  background-color: transparent;
  border: none;
  font-size: 1rem;
  font-style: normal;
  max-width: 600px;
  width: 100%;
  margin: auto;
}
figure.afbeelding_orgel_schiedam {
  margin:20px;
}
figure.afbeelding_orgel_schiedam img {
  display: block;
  position: relative;
  max-width: 600px;
  width: 100%;
  height: auto;
  box-shadow: 0 0.6rem 1.5rem 0 gray;
  margin-right:auto;
  margin-left:auto;
  padding:10px;  
}
figure.afbeelding_orgel_schiedam img:hover {
  opacity: 1;
}
span.achtergrond2 {
  background-color: #dfe9f5;
  padding-top: 5px;
  padding-bottom: 5px;
  border: 1px solid #bbb;
}
.achtergrond2 {
  background-color: #a0bdbd;
  padding: 40px 100px;
}
@media screen and (max-width:768px) {
  .achtergrond2 {
    padding:30px 15px;
  }
}
tr.achtergrond2 {
  background-color: #dfe9f5;
}
.fa-check {
  color: green;
}
.fa-remove {
  color: red;
}
#de_dispositie span.bijgemaakt {
  display: block;
  color: #5b9290;
  position: inherit;
  text-align: center;
}
@media screen and (max-width:768px) {
  #de_dispositie span.bijgemaakt {
    padding-top:20px;
  }
}

.de_dispositie {
  width: 100%;
  max-width:1200px;
  margin: auto;
  border-collapse: collapse;
  overflow: auto;
}
#de_dispositie .table1 {
  width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  background-color: #f5f9fd;
  overflow: auto;
  box-shadow: 0 0.2rem 0.5rem 0 gray inset;
  padding:30px;
}
#de_dispositie .table1 tr th {
  margin: 0px;
  padding: 10px;
  font-size: 1rem;
  border: 1px solid #bacfcb;
  text-align: center;
}
#de_dispositie .table1 tr td {
  padding: 10px;
  vertical-align: top;
  font-size: 1rem;
  text-align: left;
  color: #000619;
  font-weight: normal;
  border: 1px solid #bacfcb;
  border-collapse: collapse;
}
#de_dispositie a {
  color: #000619;
  text-decoration: none;
  line-height: 1.4rem;
}
.achtergrond {
  display: block;
  width: 100%;
  background-color: #000619;
  overflow: auto;
  border-radius: 10px;
  box-shadow: 0 0.6rem 1.5rem 0 gray;
}

/* BUTTONCONTAINER */
.filterDiv {
  line-height: 1.5rem;
  text-align: left;
  padding-left: 60px;
  padding-top: 10px;
  padding-left:20px;
  padding-right:20px;
  display: none;
  width: 100%;
  font-weight: normal;
}

.filterDiv:hover {
  color:#01a97b;
}
.filterDiv[open] {
  border:1px solid #ddd;
}
.filterDiv a {
  color: #000619;
  text-decoration: none;
  font-size: 1rem;
}
.filterDiv a:hover {
  color: #01a97b;
  
}
.filterDiv figcaption {
  padding-left: 10px;
}
.filterDiv.sum1 {
  box-shadow: none;
}
.show {
  display: block;
  color: #000619;
}
/* MIX GELUID */
#mix-geluid {
  height: 100%;
  width: 100%;
  max-width: 1200px;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Arial, sans-serif;
}
.schuifjes {
  text-align: center;
  padding: 20px;
  border: 2px solid #ccc;
  border-radius: 8px;  
  width:80%;
  height:700px;
}
@media screen and (max-width:480px) {
  .schuifjes {   
    width:80%;
  }
}
.schuifjes p {
  font-family:'Raleway', Arial, Helvetica, sans-serif;
  text-align: center;
  
}
#mix-geluid h2 {
padding:40px;
}
.orgelkeuze {
  padding:20px;
  margin-bottom:20px;
}
/* Styling voor de slider knop */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px; 
  background-color: #4C7474; /* Kleur van de slider knop */
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  z-index: 2;
  top: -6px;  /* Dit verplaatst de knop iets omhoog */
}

input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;  
  background-color: #4C7474; /* Kleur van de slider knop */
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  z-index: 2;
}

/* Styling voor de slider knop */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background-color: #4C7474; /* Kleur van de slider knop */
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  z-index: 2;
}

input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background-color: #4C7474; /* Kleur van de slider knop */
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  z-index: 2;
}

/* Styling voor de slider knop */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background-color: #4C7474; /* Kleur van de slider knop */
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  z-index: 2;
}

input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background-color: #4C7474; /* Kleur van de slider knop */
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  z-index: 2;
}

/* Styling voor de slider track */
input[type="range"] {
  width: 100%;  /* 100% breedte voor de slider zelf */
  height: 8px;  /* Hoogte van de slider */
  background: #4C7474;
  border-radius: 5px;
  -webkit-appearance: none; /* Verwijdert standaard styling in WebKit browsers */
  appearance: none; /* Verwijdert standaard styling */
  position: relative;
  z-index: 1;
  transition: background 0.2s ease-in-out;  /* Zachte overgang tussen de kleuren */
}

/* Webkit browsers */
input[type="range"]::-webkit-slider-runnable-track {
  width: 100%; /* Zorg ervoor dat de track 100% breedte heeft */
  height: 8px;
  background: transparent;  /* Deze wordt nu gevuld door de linear-gradient */
  border-radius: 5px;
}

/* Firefox */
input[type="range"]::-moz-range-track {
  width: 100%; /* Zorg ervoor dat de track 100% breedte heeft */
  height: 8px;
  background: transparent;  /* Deze wordt nu gevuld door de linear-gradient */
  border-radius: 5px;
}

#stopButton {
  font-size:1rem;
  width:200px;
  padding: 10px 20px;
  margin: 10px;
  background-color: #08403E;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
#playButton {
  font-size:1rem;
  width:200px;
  padding: 10px 20px;
  margin: 10px;
  background-color: #08403E;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
#stopButton:hover, #playButton:hover {
  background-color: #4C7474;
}
/* DEMOS */
.demos {
  width: 100%;
  max-width:1200px;  
  font-weight: 600;
  color: #000619;
  text-align: center;
  background-color:transparent;
  padding-bottom:0;
}
#demos_open {
margin: 0px;
background-color:#F7F9FA;
border-radius: 10px;
height:60vh;
  overflow-y: scroll;
  resize:vertical;   /* Maak uitbreidbaar */
  box-shadow: 0 0.2rem 0.5rem 0 rgb(155, 168, 168) inset;
/* Zorg ervoor dat de padding van de body geen invloed heeft op dit element */
padding-right: 0; /* Voorkom dat er extra ruimte wordt toegevoegd door de body-aanpassing */
}

#demos .btn2 {
  display: inline-block;
  position: relative;
  color: #000619;
  text-decoration: none;
  font-size: 1rem;
  font-weight:bold;
  width: 225px;
  height: 40px;
  padding-top: 1px;
  margin-left: auto;
  margin-right: auto;  
}
#demos .btn2 .colorgreen {
  margin-right:3px;
}
#alldemos .inhoud {
  width:98%;
  max-width:1200px; 
  margin-left:auto;
  margin-right:auto;
  padding-top:20px;
  padding-bottom:0px;
  margin-bottom:20px;
  overflow-y: auto;  /* Scrollbar rechts toevoegen */ 
  overflow-x: scroll;
  resize:horizontal;   /* Maak uitbreidbaar */
  resize:vertical;
}
@media screen and (max-width:768px) {
  #alldemos .inhoud {
    width:85%;
  }
}
#alldemos .btn2:hover {
  color:#408a75;
  cursor: pointer;
}
#alldemos .btn2:focus {
  background-color: #eaf3f3;
  box-shadow: 0 0.2rem 0.5rem 0 grey inset;
}
#alldemos .btn2.active {
  background-color: #eaf3f3;
  box-shadow: 0 0.2rem 0.5rem 0 grey inset;
}
.btn2.active {
  background-color: #eaf3f3;
  box-shadow: 0 0.2rem 0.5rem 0 grey inset;
}
#alldemos .btn2:checked {
  color: #eaf3f3;
  background-color: #eaf3f3;
  box-shadow: 0 0.2rem 0.5rem 0 grey inset;
}
#alldemos .btn6, #alldemos .btn6-audio {
  display: inline-block;
  position: relative;
  color: #fff;
  background-color:#4C7474 ;
  text-decoration: none;
  font-size: 1rem;
  text-align:center;
  width: 200px;
  height: 50px;
  padding-top:12px;
  margin-left: auto;
  margin-right: auto;  
  border-radius: 10px;
  font-weight:normal;
  margin-top:5px;
}

#alldemos .btn6:hover, #alldemos .btn6-audio:hover {
  background-color: #fff;
  cursor: pointer;
  color:#08403e;
  font-weight:600;
}
#alldemos .btn6:focus, #alldemos .btn6-audio:focus {
  background-color: #fff;
  color:#08403e;
  font-weight:600;
  box-shadow: 0 0.2rem 0.5rem 0 grey inset;
}
#alldemos .btn6.active, #alldemos .btn6-audio.active {
  background-color: #fff;
  color:#08403e;
  font-weight:600;
  box-shadow: 0 0.2rem 0.5rem 0 grey inset;
}
.btn6.active, .btn-audio.active {
  background-color: #fff;
  color:#08403e;
  font-weight:600;
  box-shadow: 0 0.2rem 0.5rem 0 grey inset;
}
#alldemos .btn6:checked, #alldemos .btn6-audio:checked {
  color:#08403e;
  background-color: #fff;
  font-weight:600;
  box-shadow: 0 0.2rem 0.5rem 0 grey inset;
}
#alldemos .btn7 {
  display: inline-block;
  position: relative;  
  width:250px;
  height:50px;
  color:#000619;
  font-weight:600px;
  padding-top:12px; 
  text-align: left; 
  border-radius:10px; 
  margin-left: auto;
  margin-right: auto; 
  text-decoration: none; 
}
#alldemos .btn7:hover { 
  color:#838b8a;
  cursor:pointer;
}
.demos li {
  line-height: 1.7rem;
  font-size: 1rem;
  color: #000619;
  list-style-type: none;
  text-align: left;
}
.demos li a {
  color: #08403e;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 200;  
  width: 100px;   
}
.demos p {
  color: #000619;
  font-size: 1rem;
  font-weight: 800;
}
.demos p a {
  color: #000619;
  text-decoration: underline;
  text-underline-offset: 2px; /* Pas deze waarde aan naar wens */
  font-size: 1rem;
}
.demos p a:hover {
  color: #638888;
}
.flex-container {
  display: flex;
  flex-wrap: wrap; /* Zorgt ervoor dat knoppen naar de volgende regel gaan als nodig */
  gap: 10px;
  align-items: center;   
  margin-top:30px;                                              
}
.flex-container a:active {
  background-color:#fff;
}
.list {
  display: none; /* Lijsten standaard verborgen */ 
  width:100%;
  max-width:1200px; 
  margin-top:15px;
  padding:20px 100px; 
  background-color:#F7F9FA;
  height:60vh;
  overflow-x: auto;
  resize: vertical;   /* Maak uitbreidbaar */
  box-shadow: 0 0.2rem 0.5rem 0 rgb(155, 168, 168) inset;
}
.list li {
  list-style-type: none;
}
.list .btn7 {
  font-weight:bold;
}
.summary3 {
  background-color: transparent;   
}
/* Stijl voor .sum2 knop */
.sum2 {  
  background-color: transparent;
  color: #000619;
  font-weight: bold; /* Optioneel: maak de tekst vet */ 
  padding-bottom: 10px;
  cursor: pointer;
  display: inline-block;
  transition: color 0.3s;
}
.sum2:hover {
  opacity:0.6;
}
/* Active class - blijft behouden tot de pagina wordt herladen */
.sum2.active {
  color: #6BA897; /* Kleur die blijft na klikken */
  box-shadow: none;
}
.sum2.played {
  color: #6BA897; /* Kies een kleur naar wens */
  
}
.filterDiv audio {
  height: 20px;
}
.summary-container {
  display: flex;
  align-items: center; /* Zorgt ervoor dat alles verticaal gecentreerd is */
  gap: 10px; /* Ruimte tussen de summary en de link */
  min-height:40px;
}
.summary-container summary {
  cursor: pointer; /* Zorg voor een pointer-cursor op het summary-element */
  margin: 0;
  padding: 0;
  list-style: none; /* Optioneel: Verwijder standaard marker (driehoekje) als je custom styling wilt */
  flex: 1; /* Laat de summary zoveel ruimte innemen als nodig */
  background-color:#fff;
}
.summary-container .sum2 {
  flex: 1; /* Zorgt ervoor dat de summary-tekst maximaal de beschikbare ruimte gebruikt */
  display: flex;
  justify-content: space-between; /* Zet de tekst en link aan weerszijden */
  align-items: center; 
  cursor:pointer;
  background-color:transparent;
  padding-bottom:10px;
}
.summary-container span {
  padding-bottom:10px;
}
span.toggle-figure-btn {
  text-decoration: none; 
  font-size: 0.8rem; /* Optionele aanpassing voor consistentie */
  padding-left:10px;
  padding-right:10px;
  width:100px;
  text-align:right;
}
.toggle-figure-btn:hover {
  text-decoration: underline;
  text-underline-offset: 2px; /* Pas deze waarde aan naar wens */
  cursor:pointer;
}
@media screen and (max-width:375px) {
  .summary-container .sum2 {    
    display: flex;    
    cursor:pointer;
    background-color:transparent;
    padding-bottom:10px;
    font-size:0.8rem;
  }
  span.toggle-figure-btn {     
    font-size: 0.8rem; /* Optionele aanpassing voor consistentie */
    width:40px;
    text-align:center;
  }
}
.audioInfo summary.sum1 {
  box-shadow: none;
}
.audioInfo.hidden {
  display: none;  
}
.audioInfo {
  margin-top: 10px; /* Ruimte boven de info-sectie */
}
figcaption.demofig {    
  padding-bottom: 30px;
  font-style: normal;
  font-size: 0.9rem;
  font-weight: normal;
  text-align: left;
  letter-spacing: normal;
  margin:0;
  
}
figcaption.demofig b {
  color:#000619;
  letter-spacing: 0;
}

span.opmerking {
  color:#08403E;
  font-size:0.9em;
  font-weight:normal;
}
.opmerking p {
  color: #000619;  
}
.opmerking b {
  color: #224c4c;
  font-size: 1rem;
  letter-spacing:0rem;
}
.opmerking li a {
  color: #224c4c;
  font-size: 1rem;
  list-style-type: none;
  padding:0;
}
.opmerking li {
  list-style-type: none;
}
.opmerking li:hover {
  color: #000619;
  font-size: 1rem;
  background-color: transparent;
}
.opmerking a b {
  color: #224c4c;
  font-size: 1rem;
  font-weight: 600;
  background-color: transparent;
  text-decoration: underline;
  text-underline-offset: 2px; /* Pas deze waarde aan naar wens */
  
}
.opmerking b:hover {
  color: #82a7a7;
  background-color: transparent;
  
}
.algemeen {
  padding: 40px 20px;
  font-size: 1rem;
}
/* DOWNLOAD */
#downloads b {
  color:#000619;
}
#downloads ol {
  padding-left: 20px;
  margin-left:20px;
  list-style-position: inside;
}
.punt3Uitleg {
  padding:30px;
  background-color:#f1f3ed;
  margin-bottom:10px;
  text-align:left;
}
#systeemeisen b {
  color:#000619;
}
#systeemeisen2_link #backButton {
  display: none;
  width: 100%;
  max-width: 1200px;
  height: 50px;
  background-color: #cad1d0;
  padding-top: 13px;
  padding-left: 20px;
  margin-top: -2px;
  margin-bottom: 20px;
}
#de_dispositie #backButton {
  margin-top: -5px;
}
#systeemeisen2_link #backButton:hover {
  background-color: #bdc3c2;
  box-shadow: 0 0.3rem 0.75rem 0 black;
  border-radius: 10px;
}
#systeemeisen2_link a {
  color: #000619;
  padding: 10px;
  text-decoration: none;
}
#systeemeisen ul {
  padding: 40px;
}
#tabel h6 {
  font-family: "Raleway", Arial, sans-serif;
  text-align: center;
  color: #000619;
  font-size: 1.2rem;
  line-height: 1.5rem;
  margin-bottom: 20px;
  padding: 15px;
}
/* DRIE_KANALEN */
#drie_kanalen b {
  color:#000619;
}
#drie_kanalen picture img { 
  height:auto;
  width:100%;
  max-width:600px;
}
@media (min-width: 768px) {
  .responsive2 {
    display: flex;
    gap: 20px; /* Optioneel: ruimte tussen de afbeeldingen */
    justify-content: center; /* Optioneel: centreert de afbeeldingen */
  }
}
#ramen .responsive2 {
margin-bottom:30px;
}
#ramen .gallery2 {
  background-color: #edf4f8; 
  border: 1px solid #bee1e1
}
#ramen figcaption {
  text-align: center;
}
#ramen .onderschrift {
  font-size: 0.9rem;
  margin-left: 40px;
  margin-right: 40px;
  text-align:left;
}