#subheader {
  margin-top: 64px;
}

#subheader h2 {
  font-size: var(--fs-2xl);
  line-height: 1.5;
  letter-spacing: -0.025rem;
  min-width: 120px;
  margin-bottom: 0;
}

#subheader .nav.nav-pills > .nav-link {
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: var(--fs-md);
  color: var(--xindigo);
  line-height: 1.2;
  background-color: transparent;
  padding: .5rem .75rem;
  margin: auto .25rem;
}

#subheader .nav.nav-pills > .nav-link:hover {
  background-color: rgba(var(--xindigo-rgb), .1);
}

#subheader .nav.nav-pills > .nav-link.active {
  font-weight: 700;
  color: white;
  background-color: rgba(var(--xindigo-rgb), .8);
  letter-spacing: -0.0125rem;
}

.breadcrumb.breadcrumb-plain {
  background-color: transparent;
  font-size: var(--fs-xs);
  font-weight: 400;
  color: var(--gray-600);
  padding-left: 0;
  margin-bottom: 0;
}

.breadcrumb.breadcrumb-plain .breadcrumb-item,
.breadcrumb.breadcrumb-plain .breadcrumb-item a {
  background-color: transparent;
  font-size: var(--fs-xxs);
  font-weight: 400;
  color: var(--gray-600);
  text-decoration:none;
}

.breadcrumb.breadcrumb-plain .breadcrumb-item a:hover {
  color: var(--primary);
}

h1.content-header-title {
  color: rgba(var(--xindigo-rgb), .9);
  letter-spacing: -0.025rem;
  font-size: var(--fs-2x);
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 0;
}

h1.profile-header-title {
  color: rgba(var(--xindigo-rgb), .9);
  letter-spacing: -0.025rem;
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1.2;
}

h3.content-title {
  color: rgba(var(--xindigo-rgb), 1);
  letter-spacing: -0.025rem;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.2;
}

h1.content-header-title > span {
  font-size: var(--fs-3xl);
  font-weight: normal !important;
  color: rgba(var(--xindigo-rgb), .5);
}

.btn.btn-gray {
  background-color: var(--gray);
  color: var(--gray-dark);
  font-family: var(--font-headline);
  font-size: 14px;
  line-height: 16px;
  letter-spacing: -0.2px;
  padding: .25rem .5rem;
  font-weight: 700;
}

.btn.btn-gray:focus {
  box-shadow: 0 0 0 0.2rem rgba(var(--dark-rgb), 0.3);
}

.btn.btn-gray:hover {
  background-color: color-mix(in srgb, var(--dark) 6%, var(--gray) 100%);
  color: var(--dark);
}

.btn.btn-gray.danger:hover {
  background-color: var(--danger);
  color: white;
}

.avatar-md {
  width: 5rem;
  height: 5rem;
  background-color: rgba( var(--xindigo-rgb), .5);
  border-radius:100rem;
}