/* Allocate a separate space before the existing brand; retain its image size. */
#app header.el-header > div:first-child[data-hw-brand-icon] {
  --hw-brand-left: 8.333333vw;
  position: relative;
}
#app header.el-header > div:first-child[data-hw-brand-icon] > img[data-hw-brand-wordmark] {
  margin-left: calc(var(--hw-brand-left) + var(--hw-brand-icon-room)) !important;
}
#app header.el-header > div:first-child > img.hw-header-brand-icon {
  position: absolute !important;
  left: calc(var(--hw-brand-left) + var(--hw-brand-icon-x, 0px));
  top: calc(50% + var(--hw-brand-icon-y, 0px));
  transform: translateY(-50%) !important;
  width: var(--hw-brand-icon-size) !important;
  height: var(--hw-brand-icon-size) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  filter: none !important;
  background: transparent !important;
  cursor: pointer;
}
#app header.el-header img.hw-header-brand-icon:focus-visible {
  outline: 2px solid var(--el-color-primary, #0f67fe);
  outline-offset: 3px;
}
@media (max-width: 700px) {
  .hw-quote-page #app header.el-header > div:first-child[data-hw-brand-icon],
  .hw-library-page #app header.el-header > div:first-child[data-hw-brand-icon] {
    --hw-brand-left: 8px;
  }
}

#app header.el-header > div:first-child[data-hw-brand-ready] {
  justify-content: flex-start !important;
}
#app header.el-header > div:first-child > img[data-hw-brand-wordmark] + div {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

#app header.el-header img[data-hw-brand-wordmark] {
  min-width: 0 !important;
  object-fit: contain !important;
  object-position: left center !important;
}