* {
  /* Theme variables: */
  --recorderapp-accent-1: rgb(4, 110, 138);
  --recorderapp-accent-1-rgb: 4, 110, 138;
  --recorderapp-accent-2: rgb(9, 92, 115);
  --recorderapp-accent-2-rgb: 9, 92, 115;
  --recorderapp-accent-3: rgb(52, 138, 161);
  --recorderapp-accent-3-rgb: 52, 138, 161;

  /* Bootstrap veriable overrides: */
  --bs-dropdown-link-active-bg: var(--recorderapp-accent-1);
  --bs-link-color: var(--recorderapp-accent-3);
  --bs-link-color-rgb: var(--recorderapp-accent-3-rgb);
  --bs-link-hover-color: var(--recorderapp-accent-2);
  --bs-link-hover-color-rgb: var(--recorderapp-accent-2-rgb);
}

[data-bs-theme=dark] * {
  --bs-link-hover-color: var(--recorderapp-accent-1);
  --bs-link-hover-color-rgb: var(--recorderapp-accent-1-rgb);
}

a {
  text-decoration: none;
}

a:focus, a:hover {
  text-decoration: underline;
}

a.icon-link {
  text-decoration: underline;
}

a.btn {
  text-decoration: none;
}

.navbar-brand:focus, .navbar-brand:hover {
  text-decoration: none;
}

.link-secondary:focus,
.link-secondary:hover {
  color: rgba(var(--recorderapp-accent-3-rgb), var(--bs-link-opacity,1)) !important;
}

.bi {
  vertical-align: -.125em;
  fill: currentColor;
  flex-shrink: 0;
}

.btn-bd-primary {
  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--recorderapp-accent-1);
  --bs-btn-border-color: var(--recorderapp-accent-1);
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: var(--recorderapp-accent-2);
  --bs-btn-hover-border-color: var(--recorderapp-accent-2);
  --bs-btn-focus-shadow-rgb: var(--recorderapp-accent-rgb);
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: var(--recorderapp-accent-2);
  --bs-btn-active-border-color: var(--recorderapp-accent-2);
}

.bd-mode-toggle {
  z-index: 1500;
}

.bd-mode-toggle .dropdown-menu .active .bi {
  display: block !important;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.bd-navbar::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  content: "";
  background-color: var(--recorderapp-accent-1);
}

main > .single-column {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  padding: 2rem;
  text-align: justify;
}

@media (min-width:768px) {
  main > .single-column {
    padding: 3rem;
  }
}

.alert-link {
  font-weight: 500;
}

.text-accent {
  color: var(--recorderapp-accent-1) !important;
}

.text-accent-3 {
  color: var(--recorderapp-accent-3) !important;
}

.text-bg-accent {
  color: #fff !important;
  background-color: var(--recorderapp-accent-1) !important;
}

.text-justify {
  text-align: justify;
}

.accordion {
  --bs-accordion-btn-padding-x: 1rem;
  --bs-accordion-btn-padding-y: 0.5rem;
  --bs-accordion-body-padding-x: 1rem;
  --bs-accordion-body-padding-y: 1rem;
}

.accordion-item {
  border: 0;
}

.accordion-button {
  line-height: var(--bs-body-line-height);
  border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
  border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
  border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
  border-top-left-radius: var(--bs-border-radius) !important;
  border-top-right-radius: var(--bs-border-radius) !important;
  border-color: rgba(0, 0, 0, 0);
}

.accordion-button:not(.collapsed) {
  color: inherit;
  background-color: var(--bs-secondary-bg);
  box-shadow: none;
  border-color: var(--bs-border-color-translucent);
}

.accordion-button::after {
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23348aa1'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23348aa1'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  background-position: center;
  width: 2rem;
}

[data-bs-theme=dark] .accordion-button::after {
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23348aa1'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23348aa1'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-collapse.collapsing, .accordion-collapse.show {
  background-color: var(--bs-tertiary-bg);
  border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
  border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
  border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
  border-bottom-left-radius: var(--bs-border-radius) !important;
  border-bottom-right-radius: var(--bs-border-radius) !important;
  border-color: var(--bs-border-color-translucent);
}

.card-body p:last-child,
.accordion-body p:last-child {
  margin-bottom: 0;
}

p .badge {
  vertical-align: .1em;
}

.badge.icon-badge {
  vertical-align: .05em;
  font-size: 1em;
  padding-top: .1em;
  padding-bottom: .1em;
  padding-left: .3em;
  padding-right: .3em;
}
