/******************
    User custom CSS
    ---------------

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/
/******************
    Custom CSS - Opgelucht (geheel correct)
******************/

body {
  background-color: #99CDFF !important;
  font-family: 'Sora', sans-serif;
  margin: 0;
  padding: 0;
}

.survey-name {
  font-family: 'Sora', sans-serif !important;
}


/* Vraagcontainers */
.question-container,
.save-form,
.save-message {
  background-color: #ffffff;
  border-radius: 30px;
  padding: 2rem;
  margin: 2rem auto;
  border: none
  box-shadow: 0 0 0px rgba(0,0,0,0);
}


/* Vraagteksten */
.ls-label-question {
  font-weight: bold;
  font-size: 1.2rem;
  color: #00333D !important;
  
}

.btn-check:checked + label.btn,
.btn-check + label.btn:hover {
  background-color: #00333D;
  color: #ffffff;
  border-color: #00333D;
}

.btn-check:focus + .btn,
.btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px #A174EE80;
}


/* Container met antwoordknoppen */
.answer-container,
.question-container .btn-group,
.list-unstyled,
.answers-list {
  gap: 1rem;
}

/* Submitknop */
.ls-move-submit-btn {
  border-radius: 30px;
  background-color: #00333D !important;
  color: #ffffff !important;
  font-weight: bold;
  border: none;
  padding: 0.75rem 2rem;
}

/* Taalkeuzelijst */
.form-change-lang #language-changer-select {
  color: #A174EE;
  background-color: transparent;
  border-color: #A174EE;
  font-weight: 600;
  border-radius: 30px;
}

/* Antwoordknoppen (checkbox/radio via .btn-check) */

  .btn-check + label.btn {
  min-width: 140px;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.3;
  background-color: #DDF0FF;
  color: #00333D;
  border: 2px solid #DDF0FF;
  border-radius: 30px;
  margin: 0.5rem;
  text-align: center;
}


/* 
/* Geen antwoord verbergen */
.no-answer-item {
  display: none !important;
}

/* Foutmeldingen paars */
.text-danger {
  color: #A174EE !important;
  display: block;
  margin-bottom: 1rem;
}



.number-of-questions,
.question-count-text {
  display: none !important;
}

.number-of-questions {
  margin: 0 !important;
  padding: 0 !important;
}

div.privacy.row {
    display: none !important;
}


.asterisk,
label .asterisk,
span.asterisk {
  content: '' !important;
  display: none !important;
}

/* Kleur geselecteerde radioknop label */
.btn-check:checked + label.btn {
  background-color: #00333D !important;  /* je stijl */
  color: #ffffff !important;             /* witte tekst op blauwe knop */
  border-color: #00333D !important;
}

.question-container .btn-group {
  gap: 1rem;
}

.question-container,
.question-container .card,
.question-container .panel,
.question-container .panel-default {
  border: none !important;
  box-shadow: none !important;
    background-color: #ffffff !important;
}



.fruity .text-info,
.fruity .text-primary,
.fruity .text-success {
  color: #6E748C !important; /* of een andere grijstint naar keuze */
}

/* Donkerblauwgroene kleur voor de terug-link */
.ls-return {
  color: #00333D !important;
  font-weight: bold;
  font-size: 1.1rem;
  text-decoration: underline; /* optioneel, voor duidelijkheid */
}

/* Grotere kopteksten in donkerblauwgroen */
h1, h2, h3 {
  color: #00333D !important;
  font-family: 'Sora', sans-serif;
  font-weight: 600;
}

h1 {
  font-size: 2.5rem; /* iets groter */
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.6rem;
}


div[class*="questionhelp"] {
  display: none !important;
}