/* Top header version 3: extracted from about.html inline topbar styles. */
.topbar-v3,
.topbar-v3 * {
  box-sizing: border-box;
}

.topbar-v3 {
  --topbar-social-circle-size: 28px;
  --topbar-social-icon-size: 18px;
  --topbar-social-image-size: 18px;
  --topbar-social-gap: 5px;
  position: relative;
  display: block;
  overflow: visible;
}

.topbar-v3 .topbar-v3__row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;
  min-height: 38px !important;
  overflow: visible !important;
}

.topbar-v3 .topbar-v3__left,
.topbar-v3 .topbar-v3__right {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
  white-space: nowrap !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
}

.topbar-v3 .topbar-v3__right {
  justify-content: flex-end !important;
  transform: translateX(32px) !important;
}

.topbar-v3 .topbar-v3__left li,
.topbar-v3 .topbar-v3__right li {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.topbar-v3 .topbar-v3__social {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--topbar-social-gap) !important;
  padding-left: 0 !important;
  list-style: none !important;
  margin: 0 !important;
  flex-wrap: nowrap !important;
  visibility: visible !important;
  opacity: 1 !important;
  white-space: nowrap !important;
}

/* Circle size is controlled only here. */
.topbar-v3 .topbar-v3__social > li {
  width: var(--topbar-social-circle-size) !important;
  height: var(--topbar-social-circle-size) !important;
  min-width: var(--topbar-social-circle-size) !important;
  max-width: var(--topbar-social-circle-size) !important;
  min-height: var(--topbar-social-circle-size) !important;
  max-height: var(--topbar-social-circle-size) !important;
  flex: 0 0 var(--topbar-social-circle-size) !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  overflow: visible !important;
}

.topbar-v3 .topbar-v3__social > li > a {
  width: var(--topbar-social-circle-size) !important;
  height: var(--topbar-social-circle-size) !important;
  min-width: var(--topbar-social-circle-size) !important;
  max-width: var(--topbar-social-circle-size) !important;
  min-height: var(--topbar-social-circle-size) !important;
  max-height: var(--topbar-social-circle-size) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  border-radius: 50% !important;
  text-decoration: none !important;
  overflow: visible !important;
}

/* Font Awesome renders through ::before, so both i and ::before are sized. */
.topbar-v3 .topbar-v3__social > li > a i,
.topbar-v3 .topbar-v3__social > li > a i::before {
  width: var(--topbar-social-icon-size) !important;
  height: var(--topbar-social-icon-size) !important;
  font-size: var(--topbar-social-icon-size) !important;
  line-height: var(--topbar-social-icon-size) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform: none !important;
}

.topbar-v3 .topbar-v3__social > li > a img {
  width: var(--topbar-social-image-size) !important;
  height: var(--topbar-social-image-size) !important;
  min-width: var(--topbar-social-image-size) !important;
  max-width: var(--topbar-social-image-size) !important;
  min-height: var(--topbar-social-image-size) !important;
  max-height: var(--topbar-social-image-size) !important;
  object-fit: contain !important;
  transform: none !important;
}