html {
  position: relative;
  min-height: 100%;
  font-size: 14px;
}

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

body {
  margin-bottom: 60px;
}

/* Primary color of the Petnica website. Bootstrap 4.0 has no CSS variables, so its primary classes are overridden. */
.bg-primary {
  background-color: #47a1d9 !important;
}

.text-primary {
  color: #47a1d9 !important;
}

.btn-primary {
  color: #fff;
  background-color: #47a1d9;
  border-color: #47a1d9;
}

.btn-primary:hover,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
  color: #fff;
  background-color: #2d8fcc;
  border-color: #2a87c1;
}

.btn-primary:focus,
.btn-primary.focus,
.btn-outline-primary:focus,
.btn-outline-primary.focus,
.form-control:focus {
  box-shadow: 0 0 0 0.2rem rgba(71, 161, 217, 0.5);
}

.btn-primary.disabled,
.btn-primary:disabled {
  background-color: #47a1d9;
  border-color: #47a1d9;
}

.btn-outline-primary {
  color: #47a1d9;
  border-color: #47a1d9;
}

.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active {
  color: #fff;
  background-color: #47a1d9;
  border-color: #47a1d9;
}

.form-control:focus {
  border-color: #47a1d9;
}

/* Links in text, a darker shade so they stay readable on white. */
a,
.btn-link {
  color: #2a7fb8;
}

a:hover,
.btn-link:hover {
  color: #1f6593;
}