/* Color tokens. The dark values apply when js/theme.js sets data-bs-theme="dark". */
  :root {
    --htc-page-bg: #CCC;
    --htc-panel-bg: #FFF;
    --htc-heading: #333;
    --htc-text: #333;
    --htc-label: #757575;
    --htc-hr: #888;
    --htc-input-text: #222;
    --htc-input-bg: #EEE;
    --htc-input-border: #888;
    --htc-input-border-focus: #222;
    --htc-input-border-valid: #333;
    --htc-check-bg: #FFF;
    --htc-check-border: #333;
    --htc-check-checked-bg: #888;
    --htc-logo: url(https://inschrijven.htcsontennis.nl/img/logo.light.svg);
  }

  [data-bs-theme="dark"] {
    --htc-page-bg: #111;
    --htc-panel-bg: #222;
    --htc-heading: #CCC;
    --htc-text: #AAA;
    --htc-label: #999;
    --htc-hr: #CCC;
    --htc-input-text: #AAA;
    --htc-input-bg: #333;
    --htc-input-border: #666;
    --htc-input-border-focus: #FFF;
    --htc-input-border-valid: #666;
    --htc-check-bg: #333;
    --htc-check-border: #666;
    --htc-check-checked-bg: #333;
    --htc-logo: url(https://inschrijven.htcsontennis.nl/img/logo.dark.svg);
  }

  body {
    color: var(--htc-text);
    background-color: var(--htc-page-bg);
  }

  .container {
    max-width: 960px;
    background-color: var(--htc-panel-bg);
  }

  h1 {
    color: var(--htc-heading);
  }

  hr {
    color: var(--htc-hr);
  }

  div.logo_content {
    content: var(--htc-logo);
    width: 200px;
  }

  label {
    color: var(--htc-label);
  }

  label:read-only {
    opacity: 1;
  }

  .form-question {
    color: var(--htc-text);
    opacity: 1;
  }

  /* Text fields and selects: flat field with an underline */
  .form-control,
  .form-select {
    color: var(--htc-input-text);
    background: none;
    background-color: var(--htc-input-bg);
    background-repeat: no-repeat;
    border: none;
    border-bottom: 2px solid var(--htc-input-border);
    border-radius: 0;
    transition: border-color .4s ease-out;
  }

  .form-control:focus {
    color: var(--htc-input-text);
    background-color: var(--htc-input-bg);
    border-bottom: 2px solid var(--htc-input-border-focus);
  }

  .form-control:disabled,
  .form-select:disabled {
    background-color: var(--htc-input-bg);
  }

  textarea.form-control,
  textarea.form-control:focus {
    border: none;
  }

  /* Bootstrap overwrites: */
  .form-control.is-valid,
  .was-validated .form-control:valid {
    background-image: none;
    border-bottom: 2px solid var(--htc-input-border);
  }

  .form-select.is-valid,
  .was-validated .form-select:valid {
    border-color: var(--htc-input-border-valid);
  }

  .form-select.is-valid:not([multiple]):not([size]),
  .form-select.is-valid:not([multiple])[size="1"],
  .was-validated .form-select:valid:not([multiple]):not([size]),
  .was-validated .form-select:valid:not([multiple])[size="1"] {
    background-image: none;
  }

  .form-check-input {
    background-color: var(--htc-check-bg);
    border-color: var(--htc-check-border);
  }

  .form-check-input:disabled~.form-check-label {
    opacity: 1;
  }

  .form-check-input.is-valid,
  .was-validated .form-check-input:valid {
    background-color: var(--htc-check-bg);
    border-color: var(--htc-check-border);
  }

  .form-check-input.is-valid:checked,
  .was-validated .form-check-input:valid:checked {
    color: var(--htc-input-text);
    background-color: var(--htc-check-checked-bg);
    border-color: var(--htc-check-border);
  }

  .form-check-input.is-valid~.form-check-label,
  .was-validated .form-check-input:valid~.form-check-label {
    color: var(--htc-text);
  }