body {
    color: #262861;
}

.cover-container {
    max-width: 42em;
  }

  .h1, h1 {
    font-size: 2rem;
}

.cover-body {
  background-image: url(assets/images/bg-menu.png);
   width: 100%; 
   height: 100vh; 
   background-repeat: no-repeat; 
   background-size: cover;
}


button.btn.btn-secondary.active, button.btn.btn-info.active {
  background-color: #007BFF !important;
  color: white;
}


.progress {
  width: 100%; /* Zorg dat de container van de progress bar volledig zichtbaar is */
  background-color: #f3f3f3; /* Lichte achtergrond voor contrast */
}

.progress-bar {
  height: 20px; /* Zichtbare hoogte van de timerbalk */
  background-color: #007bff; /* Bootstrap's standaard blauwe kleur */
}

.result, .modal-body {
  font-size: 1.2rem;
}

/* tables app */

button {
    margin: 10px;
    padding: 10px;
    font-size: 16px;
}

.btn-group {
    display: block;
    text-align: center; /* Centreert de knoppen als dat gewenst is */
}

.column {
    float: left;
    width: 50%; /* Elke kolom neemt de helft van de breedte van de container in */
    box-sizing: border-box;
    padding: 5px; /* Ruimte binnen elke kolom */
}

/* Zorg ervoor dat na de kolommen de layout weer normaal verloopt */
#tafel-keuzes:after {
    content: "";
    display: table;
    clear: both;
}

label {
    display: block; /* Zorgt ervoor dat elk label op een nieuwe lijn begint */
    margin-bottom: 10px; /* Ruimte tussen de opties */
    font-size: 1.2rem;
}

input[type="checkbox"] {    
    margin-right: 10px;
}

/*feedback */

#feedback {
  padding: 0;
}

.alert {
    font-size: 1.2rem;
}




/* Speech bubble */

/* (A) SPEECH BOX */
.speech {
    /* (A1) FONT & COLORS */
    font-size: 2em;
    font-weight: 700;
    color: #262861;
    background: #d4d4de;
  
    /* (A2) DIMENSIONS */
    padding: 20px;
    border-radius: 10px;
    max-width: 600px;
  }
  
  /* (B) USE ::AFTER TO CREATE THE "CALLOUT" */
  .speech::after {
    display: block; width: 0; content: "";
    border: 15px solid transparent;
  }
   
  /* (C) "CALLOUT" DIRECTIONS */
  .speech.up::after {
    border-bottom-color: #d4d4de;
    border-top: 0;
  }

  .speech {
    position: relative;
    margin: 30px;
  }
  .speech::after { position: absolute; }
  .speech.up::after {
    top: -15px; left: calc(50% - 15px);
  }


  @media screen and (min-width: 800px) {
    .container {
      max-width: 50%!important;
    }
  }