body {
  padding: 20px;
}

.tab-content {
  margin-top: 30px;
}

label {
  margin-top: 10px;
  margin-bottom: 7px;
  color: blue;
}

button {
  background-color: lightcyan;
  margin-top: 20px;
  margin-bottom: 25px;
}

button:hover {
  background-color: yellow;
}

.gebruik-lening-knop {
  background-color: lightcyan;
}

.gebruik-lening-knop:hover {
  background-color: yellow;
  color: black;
}

#resultaat {
  margin-bottom: 20px;
}

#resultaat,
#amortisatieResultaat {
  margin-top: 20px;
}

#print-area {
  padding-top: 20px;
  color: rgb(30, 144, 225, 0.9);
}

#safari-hint {
  margin-bottom: 20px;
}

#faq {
  background-color: rgb(229, 204, 255, 0.4);
  color: dodgerblue;
  border: solid dodgerblue 2px;
  padding: 30px;
  max-width: fit-content;
}

/* Handmatige dark mode */
body.dark-mode {
  background-color: #1c1c1c;
  color: white;
}

body.dark-mode label {
  color: lightseagreen;
}

body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
  background-color: #333;
  color: dodgerblue;
}

body.dark-mode .modal-body p {
  color: dodgerblue;
}

/* Einde */

/*  ******************************************* De amorisatie kaart *******************************************  */

.card-title {
  color: dodgerblue;
  font-style: italic;
  padding-bottom: 14px;
}

#amortisatieResultaat .card-text p {
  color: dodgerblue;
}

p.mb-1.text-muted {
  padding-top: 20px;
}

.ps-2 {
  color: lightgrey;
  padding-top: 20px;
  font-style: italic;
}

/*  *********************************** Tot hier de amorisatie kaart *****************************************   */

/* De style voor de invoervelden*/

@media (prefers-color-scheme: light) {
  input.form-control {
    background-color: #eeeeee;
    color: black;
    border-color: #cccccc;
  }
}

/* Donker modus */

@media (prefers-color-scheme: dark) {
  body {
    background-color: #1c1c1c;
    color: white;
  }

  label {
    color: lightseagreen;
  }

  input.form-control {
    background-color: rgb(181, 184, 185);
    color: black;
    border-color: #cccccc;
  }

  .modal-body {
    background-color: lightgray;
    color: green;
  }

  .modal-header {
    background-color: grey;
  }
}