html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/* Pages written in the CMS (About, the service pages, Terms, Privacy and the other policies):
   headings in the logo's navy and blue, marked with its teal. */
.cms-page > h1 {
  color: #113260;
  padding-bottom: 0.5rem;
  border-bottom: 4px solid #54d2da;
}

.cms-content h2,
.cms-page > h2 {
  color: #0d6efd;
  font-size: 1.4rem;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  padding-left: 0.75rem;
  border-left: 4px solid #54d2da;
}

.cms-content h3,
.cms-content h4 {
  color: #113260;
  margin-top: 1.5rem;
}

.cms-content a {
  color: #0a58ca;
}

.cms-content table {
  width: 100%;
  margin-bottom: 1rem;
  border-collapse: collapse;
}

.cms-content th,
.cms-content td {
  padding: 0.5rem 0.75rem;
  border: 1px solid #c9d6ea;
  vertical-align: top;
}

.cms-content th {
  color: #ffffff;
  background-color: #113260;
  text-align: left;
}

/* Smart Product Profile: the QR code fills its fixed box. */
.profile-qr svg { width: 100%; height: 100%; display: block; }

/* Instant Logo QR: colour swatches. */
.qr-swatch { width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #adb5bd; padding: 0; }
.qr-swatch.active { box-shadow: 0 0 0 3px #0d6efd; }
.qr-swatch:focus-visible { outline: 2px solid #0d6efd; outline-offset: 2px; }