/* Shared with game-theory and mediation: Aerial View of San Francisco Skyline at Sunset. */

:root,
[data-bs-theme="light"] {
  color-scheme: light;
  --sw-navy: #0367a6;
  --sw-navy-mid: #0378a6;
  --sw-cyan: #049dbf;
  --sw-orange: #f2a057;
  --sw-peach: #f2ceae;
  --sw-nav-bg: #faece0;
  --sw-heading: var(--sw-navy);
  --sw-muted: var(--sw-navy-mid);
  --bs-blue: var(--sw-navy);
  --bs-cyan: var(--sw-cyan);
  --bs-orange: var(--sw-orange);
  --bs-primary: var(--sw-navy);
  --bs-primary-rgb: 3, 103, 166;
  --bs-secondary: var(--sw-orange);
  --bs-secondary-rgb: 242, 160, 87;
  --bs-info: var(--sw-cyan);
  --bs-info-rgb: 4, 157, 191;
  --bs-warning: var(--sw-orange);
  --bs-warning-rgb: 242, 160, 87;
  --bs-light: var(--sw-peach);
  --bs-light-rgb: 242, 206, 174;
  --bs-dark: #012b46;
  --bs-dark-rgb: 1, 43, 70;
  --bs-primary-text-emphasis: #024a78;
  --bs-info-text-emphasis: #036f87;
  --bs-warning-text-emphasis: #8a4b12;
  --bs-primary-bg-subtle: color-mix(in srgb, var(--sw-cyan) 18%, var(--sw-nav-bg));
  --bs-info-bg-subtle: color-mix(in srgb, var(--sw-cyan) 16%, var(--sw-nav-bg));
  --bs-warning-bg-subtle: color-mix(in srgb, var(--sw-orange) 22%, var(--sw-nav-bg));
  --bs-light-bg-subtle: var(--sw-nav-bg);
  --bs-body-color: var(--sw-navy);
  --bs-body-color-rgb: 3, 103, 166;
  --bs-body-bg: var(--sw-nav-bg);
  --bs-body-bg-rgb: 250, 236, 224;
  --bs-emphasis-color: var(--sw-navy);
  --bs-emphasis-color-rgb: 3, 103, 166;
  --bs-secondary-color: color-mix(in srgb, var(--sw-navy) 72%, var(--sw-peach));
  --bs-secondary-color-rgb: 3, 103, 166;
  --bs-secondary-bg: color-mix(in srgb, var(--sw-peach) 55%, var(--sw-nav-bg));
  --bs-secondary-bg-rgb: 246, 222, 199;
  --bs-tertiary-color: color-mix(in srgb, var(--sw-navy) 55%, var(--sw-peach));
  --bs-tertiary-color-rgb: 3, 103, 166;
  --bs-tertiary-bg: color-mix(in srgb, var(--sw-peach) 40%, var(--sw-nav-bg));
  --bs-tertiary-bg-rgb: 248, 229, 210;
  --bs-link-color: var(--sw-navy);
  --bs-link-color-rgb: 3, 103, 166;
  --bs-link-hover-color: var(--sw-orange);
  --bs-link-hover-color-rgb: 242, 160, 87;
  --bs-border-color: color-mix(in srgb, var(--sw-peach) 55%, var(--sw-navy));
  --bs-border-color-translucent: rgba(3, 103, 166, 0.16);
  --bs-highlight-bg: color-mix(in srgb, var(--sw-orange) 22%, var(--sw-nav-bg));
  --bs-highlight-color: var(--sw-navy);
  --bs-focus-ring-color: rgba(4, 157, 191, 0.35);
  --bs-card-bg: var(--sw-nav-bg);
  --bs-card-cap-bg: transparent;
  --bs-card-border-color: transparent;
}

[data-bs-theme="dark"] {
  color-scheme: dark;
  --sw-nav-bg: #023c60;
  --sw-heading: var(--sw-peach);
  --sw-muted: var(--sw-cyan);
  --bs-primary: var(--sw-cyan);
  --bs-primary-rgb: 4, 157, 191;
  --bs-secondary: var(--sw-orange);
  --bs-secondary-rgb: 242, 160, 87;
  --bs-info: var(--sw-cyan);
  --bs-info-rgb: 4, 157, 191;
  --bs-light: #023c60;
  --bs-light-rgb: 2, 60, 96;
  --bs-dark: var(--sw-peach);
  --bs-dark-rgb: 242, 206, 174;
  --bs-primary-text-emphasis: var(--sw-peach);
  --bs-info-text-emphasis: #b8e3f2;
  --bs-warning-text-emphasis: var(--sw-peach);
  --bs-primary-bg-subtle: #02436c;
  --bs-info-bg-subtle: #023c60;
  --bs-warning-bg-subtle: #3a2a18;
  --bs-light-bg-subtle: #023c60;
  --bs-body-color: var(--sw-peach);
  --bs-body-color-rgb: 242, 206, 174;
  --bs-body-bg: #012b46;
  --bs-body-bg-rgb: 1, 43, 70;
  --bs-emphasis-color: var(--sw-peach);
  --bs-emphasis-color-rgb: 242, 206, 174;
  --bs-secondary-color: color-mix(in srgb, var(--sw-peach) 75%, var(--sw-cyan));
  --bs-secondary-color-rgb: 242, 206, 174;
  --bs-secondary-bg: #02436c;
  --bs-secondary-bg-rgb: 2, 67, 108;
  --bs-tertiary-color: var(--sw-cyan);
  --bs-tertiary-color-rgb: 4, 157, 191;
  --bs-tertiary-bg: #023c60;
  --bs-tertiary-bg-rgb: 2, 60, 96;
  --bs-link-color: var(--sw-cyan);
  --bs-link-color-rgb: 4, 157, 191;
  --bs-link-hover-color: var(--sw-orange);
  --bs-link-hover-color-rgb: 242, 160, 87;
  --bs-heading-color: var(--sw-peach);
  --bs-border-color: color-mix(in srgb, var(--sw-navy) 45%, var(--sw-peach));
  --bs-border-color-translucent: rgba(242, 206, 174, 0.18);
  --bs-highlight-bg: #3a2a18;
  --bs-highlight-color: var(--sw-peach);
  --bs-focus-ring-color: rgba(4, 157, 191, 0.4);
  --bs-card-bg: #02436c;
  --bs-card-cap-bg: transparent;
}

body {
  min-height: 100vh;
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
}

h1,
h2,
h3,
.h1,
.h2,
.h3 {
  color: var(--sw-heading);
}

.sw-navbar {
  --bs-navbar-color: var(--sw-heading);
  --bs-navbar-hover-color: var(--sw-cyan);
  --bs-navbar-active-color: var(--sw-heading);
  --bs-navbar-brand-color: var(--sw-heading);
  --bs-navbar-brand-hover-color: var(--sw-heading);
  --bs-navbar-toggler-border-color: color-mix(in srgb, var(--sw-heading) 35%, transparent);
  background-color: var(--sw-nav-bg);
  border-bottom: 3px solid var(--sw-orange);
}

.sw-navbar .navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}

.app-logo {
  display: block;
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
}

.logo-plate {
  fill: none;
  stroke: var(--sw-heading);
  stroke-width: 3;
}

.logo-navy,
.logo-mid {
  fill: var(--sw-navy);
}

.logo-cyan {
  fill: var(--sw-cyan);
}

.logo-orange {
  fill: var(--sw-orange);
}

[data-bs-theme="dark"] .logo-navy,
[data-bs-theme="dark"] .logo-mid {
  fill: var(--sw-peach);
}

.sw-navbar .navbar-brand,
.sw-navbar .nav-link,
.sw-navbar .navbar-toggler,
.sw-navbar #bd-theme {
  color: var(--sw-heading);
}

.sw-navbar .navbar-toggler {
  border-color: color-mix(in srgb, var(--sw-heading) 35%, transparent);
}

.sw-navbar .nav-link:hover,
.sw-navbar .nav-link:focus,
.sw-navbar #bd-theme:hover,
.sw-navbar #bd-theme:focus,
.sw-navbar #bd-theme.show {
  color: var(--sw-cyan);
}

[data-bs-theme="dark"] .sw-navbar .nav-link:hover,
[data-bs-theme="dark"] .sw-navbar .nav-link:focus,
[data-bs-theme="dark"] .sw-navbar #bd-theme:hover,
[data-bs-theme="dark"] .sw-navbar #bd-theme:focus,
[data-bs-theme="dark"] .sw-navbar #bd-theme.show,
[data-bs-theme="dark"] .sw-footer a:hover {
  color: var(--sw-orange);
}

.sw-navbar .nav-link.active {
  color: var(--sw-heading);
  font-weight: 600;
  box-shadow: inset 0 -3px 0 var(--sw-orange);
}

.sw-navbar .form-control {
  background-color: color-mix(in srgb, var(--sw-peach) 28%, var(--sw-nav-bg));
  border-color: color-mix(in srgb, var(--sw-navy) 28%, var(--sw-peach));
  color: var(--sw-heading);
}

.sw-navbar .form-control::placeholder {
  color: color-mix(in srgb, var(--sw-heading) 55%, transparent);
}

.sw-navbar .navbar-toggler-icon {
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%283, 103, 166, 0.95%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

[data-bs-theme="dark"] .navbar-toggler-icon {
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28242, 206, 174, 0.95%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--sw-navy);
  --bs-btn-border-color: var(--sw-navy);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--sw-navy-mid);
  --bs-btn-hover-border-color: var(--sw-navy-mid);
  --bs-btn-focus-shadow-rgb: 3, 103, 166;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #025a8f;
  --bs-btn-active-border-color: #025a8f;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--sw-navy);
  --bs-btn-disabled-border-color: var(--sw-navy);
}

.btn-outline-primary {
  --bs-btn-color: var(--sw-navy);
  --bs-btn-border-color: var(--sw-navy);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--sw-navy);
  --bs-btn-hover-border-color: var(--sw-navy);
  --bs-btn-focus-shadow-rgb: 3, 103, 166;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--sw-navy);
  --bs-btn-active-border-color: var(--sw-navy);
  --bs-btn-disabled-color: var(--sw-navy);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--sw-navy);
}

[data-bs-theme="dark"] .btn-primary {
  --bs-btn-bg: var(--sw-cyan);
  --bs-btn-border-color: var(--sw-cyan);
  --bs-btn-hover-bg: var(--sw-navy-mid);
  --bs-btn-hover-border-color: var(--sw-navy-mid);
  --bs-btn-active-bg: var(--sw-navy);
  --bs-btn-active-border-color: var(--sw-navy);
  --bs-btn-disabled-bg: var(--sw-cyan);
  --bs-btn-disabled-border-color: var(--sw-cyan);
}

[data-bs-theme="dark"] .btn-outline-primary {
  --bs-btn-color: var(--sw-peach);
  --bs-btn-border-color: var(--sw-cyan);
  --bs-btn-hover-color: #012b46;
  --bs-btn-hover-bg: var(--sw-peach);
  --bs-btn-hover-border-color: var(--sw-peach);
  --bs-btn-active-color: #012b46;
  --bs-btn-active-bg: var(--sw-cyan);
  --bs-btn-active-border-color: var(--sw-cyan);
  --bs-btn-disabled-color: var(--sw-peach);
  --bs-btn-disabled-border-color: var(--sw-cyan);
}

.btn-info {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--sw-cyan);
  --bs-btn-border-color: var(--sw-cyan);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--sw-navy-mid);
  --bs-btn-hover-border-color: var(--sw-navy-mid);
  --bs-btn-focus-shadow-rgb: 4, 157, 191;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--sw-navy);
  --bs-btn-active-border-color: var(--sw-navy);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--sw-cyan);
  --bs-btn-disabled-border-color: var(--sw-cyan);
}

.btn-warning {
  --bs-btn-color: #012b46;
  --bs-btn-bg: var(--sw-orange);
  --bs-btn-border-color: var(--sw-orange);
  --bs-btn-hover-color: #012b46;
  --bs-btn-hover-bg: #d97322;
  --bs-btn-hover-border-color: #d97322;
  --bs-btn-focus-shadow-rgb: 242, 160, 87;
  --bs-btn-active-color: #012b46;
  --bs-btn-active-bg: #c46100;
  --bs-btn-active-border-color: #c46100;
  --bs-btn-disabled-color: #012b46;
  --bs-btn-disabled-bg: var(--sw-orange);
  --bs-btn-disabled-border-color: var(--sw-orange);
}

.card {
  --bs-card-bg: var(--bs-body-bg);
  --bs-card-cap-bg: transparent;
  --bs-card-border-color: transparent;
  background-color: var(--bs-card-bg);
  border: 0;
  box-shadow: 0 0.5rem 1.25rem rgba(3, 103, 166, 0.12);
}

[data-bs-theme="light"] .card,
[data-bs-theme="light"] .card.bg-white,
[data-bs-theme="light"] .card.bg-light {
  background-color: var(--bs-body-bg) !important;
}

.card-header,
.card-footer {
  background-color: transparent;
}

.card-header.bg-primary,
.card-header.bg-primary.text-white {
  background-color: transparent !important;
  color: var(--sw-heading) !important;
  border-bottom: 3px solid var(--sw-orange);
}

.card-header.bg-primary h1,
.card-header.bg-primary h2,
.card-header.bg-primary h3,
.card-header.bg-primary h4,
.card-header.bg-primary h5,
.card-header.bg-primary .card-title {
  color: var(--sw-heading) !important;
}

[data-bs-theme="light"] .card .card,
[data-bs-theme="light"] .card .card.bg-light,
[data-bs-theme="light"] .card .card.bg-white {
  background-color: var(--bs-body-bg) !important;
  box-shadow: none;
}

[data-bs-theme="light"] .timeline-events .card,
[data-bs-theme="light"] .timeline-events .card.bg-light {
  background-color: var(--bs-body-bg) !important;
  box-shadow: none !important;
}

.nav-tabs {
  --bs-nav-tabs-link-active-bg: var(--bs-body-bg);
  --bs-nav-tabs-link-active-border-color: var(--bs-border-color) var(--bs-border-color) var(--bs-body-bg);
  --bs-nav-tabs-link-active-color: var(--sw-heading);
}

.table {
  --bs-table-bg: transparent;
  --bs-table-striped-bg: var(--bs-tertiary-bg);
  --bs-table-color: var(--bs-body-color);
}

.form-control,
.form-select,
.form-control:focus,
.form-select:focus {
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}

[data-bs-theme="light"] .form-control,
[data-bs-theme="light"] .form-select,
[data-bs-theme="light"] input[type="text"],
[data-bs-theme="light"] input[type="password"],
[data-bs-theme="light"] input[type="search"],
[data-bs-theme="light"] input[type="email"] {
  background-color: var(--bs-tertiary-bg) !important;
  color: var(--bs-body-color);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--sw-cyan);
  box-shadow: 0 0 0 0.2rem rgba(4, 157, 191, 0.25);
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
}

[data-bs-theme="light"] .bg-white,
[data-bs-theme="light"] .bg-light,
[data-bs-theme="light"] .jumbotron,
[data-bs-theme="light"] .modal-content,
[data-bs-theme="light"] .list-group-item,
[data-bs-theme="light"] .dropdown-menu,
[data-bs-theme="light"] .alert-light {
  background-color: var(--bs-body-bg) !important;
}

[data-bs-theme="dark"] .card {
  --bs-card-bg: var(--bs-secondary-bg);
  --bs-card-border-color: var(--bs-border-color);
  background-color: var(--bs-card-bg);
  box-shadow: none;
  border: 1px solid var(--bs-border-color);
}

.dropdown-menu {
  --bs-dropdown-bg: var(--bs-body-bg);
  --bs-dropdown-link-color: var(--sw-heading);
  --bs-dropdown-link-hover-bg: var(--bs-tertiary-bg);
  --bs-dropdown-link-active-bg: var(--sw-navy);
  --bs-dropdown-link-active-color: #fff;
}

.pagination {
  --bs-pagination-bg: var(--bs-body-bg);
  --bs-pagination-color: var(--sw-heading);
  --bs-pagination-active-bg: var(--sw-navy);
  --bs-pagination-active-border-color: var(--sw-navy);
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(3, 103, 166, 0.25);
}

.list-group {
  --bs-list-group-bg: var(--bs-body-bg);
  --bs-list-group-border-color: var(--bs-border-color);
  --bs-list-group-active-bg: var(--sw-navy);
  --bs-list-group-active-border-color: var(--sw-navy);
  --bs-list-group-color: var(--bs-body-color);
}

.nav-pills {
  --bs-nav-pills-link-active-bg: var(--sw-navy);
}

.progress {
  --bs-progress-bar-bg: var(--sw-navy);
}

.form-check-input:focus {
  border-color: var(--sw-cyan);
  box-shadow: 0 0 0 0.25rem rgba(4, 157, 191, 0.25);
}

.form-check-input:checked {
  background-color: var(--sw-navy);
  border-color: var(--sw-navy);
}

.form-range::-webkit-slider-thumb,
.form-range::-moz-range-thumb {
  background-color: var(--sw-navy);
}

.alert {
  --bs-alert-bg: var(--sw-nav-bg);
  --bs-alert-color: var(--sw-heading);
  --bs-alert-border-color: var(--sw-orange);
  --bs-alert-link-color: var(--sw-navy);
}

[data-bs-theme="dark"] .alert {
  --bs-alert-bg: var(--bs-secondary-bg);
  --bs-alert-color: var(--sw-peach);
  --bs-alert-link-color: var(--sw-cyan);
}

.sw-footer {
  background-color: var(--sw-nav-bg);
  color: var(--sw-heading);
  border-top: 3px solid var(--sw-orange);
}

.sw-footer a {
  color: var(--sw-heading);
  text-decoration: none;
}

.sw-footer a:hover {
  color: var(--sw-cyan);
}

[data-bs-theme="dark"] .bg-light {
  background-color: var(--bs-secondary-bg) !important;
}

[data-bs-theme="dark"] .bg-white {
  background-color: var(--bs-body-bg) !important;
}

[data-bs-theme="dark"] .text-dark {
  color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .text-secondary {
  color: var(--bs-secondary-color) !important;
}

[data-bs-theme="dark"] .hover-bg-light:hover {
  background-color: var(--bs-tertiary-bg) !important;
}

.hover-bg-light:hover {
  background-color: var(--bs-tertiary-bg);
}

svg.theme-icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

svg.bi {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
  flex-shrink: 0;
}

#bd-theme {
  border: 0;
  box-shadow: none;
}

#bd-theme .theme-icon-active {
  display: block;
}

.family-chart-canvas {
  width: 100%;
  height: 900px;
  margin: auto;
  background-color: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
}

@media (max-width: 991.98px) {
  .sw-navbar .dropdown-menu {
    position: static;
    border: 0;
    padding-top: 0;
    background: transparent;
    box-shadow: none;
  }

  .sw-navbar .dropdown-item {
    color: var(--sw-heading);
  }

  .sw-navbar .dropdown-item:hover,
  .sw-navbar .dropdown-item:focus {
    color: var(--sw-cyan);
    background: transparent;
  }

  [data-bs-theme="dark"] .sw-navbar .dropdown-item:hover,
  [data-bs-theme="dark"] .sw-navbar .dropdown-item:focus {
    color: var(--sw-orange);
  }
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--sw-navy);
  color: #fff;
}

[data-bs-theme="dark"] .select2-container--default .select2-selection--single,
[data-bs-theme="dark"] .select2-container--default .select2-selection--multiple,
[data-bs-theme="dark"] .select2-dropdown {
  background-color: var(--bs-body-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered,
[data-bs-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field {
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: var(--sw-navy);
  color: #fff;
}
