body {
  background-color: cornsilk;
}

.card {
  text-align: center;
  font-size: 30px;
  padding: 20px;
  background-color: #ffffff;
}

.small-text {
  font-size: 12px;
  /* Pas de gewenste grootte aan */
}

.medium-text {
  font-size: 18px;
  /* Pas de gewenste grootte aan */
}

.card.no-border {
  border: none;
}

/* De licht/donker switch */
.form-check-label {
  margin-left: 10px;
}

.form-check-input:checked {
  background-color: #17a2b8;
}

.dark-theme {
  background-color: #343a40;
}

.dark-mode {
  background-color: black;
  color: white;
}

.dark-mode .card {
  background-color: #444444;
  /* Andere CSS-eigenschappen */
}

.custom-card {
  align-items: center;
  justify-content: center;
  text-align: center;
  /* Aangepaste uitlijning voor de kaart */
}

.float-right {
  float: right;
}

#temperatuur-pijl {
  font-size: 0.6em;
  /* Pas de grootte aan naar wens */
}

#baro-pijl {
  font-size: 0.6em;
}

#vocht-pijl {
  font-size: 0.6em;
}

#regen-pijl {
  font-size: 0.6em;
}

#uv-data {
  font-size: 0.4em;
}

#dew-data {
  font-size: 0.6em;
}

#aqv-data {
  font-size: 0.6em;
}

#aqa-data {
  font-size: 0.6em;
}

/* voor de voetnoot */
/* Voor de voetnoot */
/* Voor de voetnoot */
.footnote {
  position: relative;
  text-align: right;
}

.footnote sup {
  font-size: 0.5em;
}

.footnote-text {
  cursor: pointer;
  /* text-decoration: underline; */
  color: #ff3333;
  font-size: 0.9em;
}

.footnoteA-text {
  cursor: pointer;
  color: #ff3333;
  font-size: 0.9em;
}

/* Voor de pop-up */
.popup,
.forcast,
.uv {
  position: absolute;
  display: none;
  background-color: white;
  border: 1px solid black;
  padding: 10px;
  width: 380px;
  right: 0;
  bottom: 10px; /* Pas deze waarde aan voor de gewenste verticale positie */
}

.popup p,
.forcast p,
.uv p {
  margin: 0;
}

.popup .close,
.forcast .close,
.uv .close {
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
}

.footnoteB {
  position: relative;
  text-align: right;
}

.footnoteB sup {
  font-size: 0.5em;
}

.footnoteB-text {
  cursor: pointer;
  /* text-decoration: underline; */
  color: #ff3333;
  font-size: 0.9em;
}

.footnoteB-text {
  cursor: pointer;
  color: #ff3333;
  font-size: 0.9em;
}

hr {
  border-color: yellow;
  border-width: 1px;
  border-style: groove;
}