.header {
  position: relative;
  display: flex;
  flex-direction: row;
  z-index: var(--z-index-header);
  pointer-events: none;
}

.is-layout-direction-horizontal .header {
  max-height: 100vh;
  position: sticky;
  top: 0;
  left: initial;
  align-self: stretch;
  align-items: center;
}

.is-layout-direction-horizontal .header {
  width: 100%;
}

.is-link-show.is-layout-direction-horizontal .header {
  width: calc(calc(var(--header-area-width) / 2) - calc(calc(var(--link-area-width) / 2) - 50%));
}

.is-layout-direction-vertical .header {
  width: 100%;
}

.is-header-color-show .header {
  pointer-events: all;
}

.is-header-area-justify-left .header {
  justify-content: flex-start;
}

.is-header-area-justify-center .header {
  justify-content: center;
}

.is-header-area-justify-right .header {
  justify-content: flex-end;
}

.is-layout-direction-vertical.is-link-show.is-header-position-sticky .header {
  position: sticky;
  left: 0;
}

.is-layout-direction-vertical.is-link-show.is-header-position-inline .header {
  position: relative;
  left: 0;
}

.is-layout-direction-vertical.is-layout-order-headerlink.is-link-show .header {
  top: 0;
}

.is-layout-direction-vertical.is-layout-order-linkheader.is-link-show .header {
  bottom: 0;
}

.header-area {
  background-color: transparent;
  transition: background-color var(--layout-timing-medium), opacity var(--layout-timing-medium), border-radius var(--layout-timing-extra-fast);
}

.is-layout-direction-vertical .header-area {
  width: var(--header-area-width);
}

.is-layout-direction-horizontal .header-area {
  width: 100%;
}

.is-header-radius .header-area {
  border-radius: calc(var(--theme-radius) * 4);
}

.is-header-color-by-theme.is-header-color-style-always .header-area {
  background-color: rgba(var(--header-color-theme), var(--header-opacity));
}

.is-header-color-by-theme.is-header-color-style-scroll.is-header-color-style-scrolling .header-area {
  background-color: rgba(var(--header-color-theme), var(--header-opacity));
}

.is-header-color-by-custom.is-header-color-style-always .header-area {
  background-color: rgba(var(--header-color-custom), var(--header-opacity));
}

.is-header-color-by-custom.is-header-color-style-scroll.is-header-color-style-scrolling .header-area {
  background-color: rgba(var(--header-color-custom), var(--header-opacity));
}

.header-area {
  padding: calc(var(--layout-space) * var(--layout-padding));
  position: relative;
  pointer-events: none;
}

.is-header-border-top .header-area {
  border-top: calc(var(--layout-line-width) * var(--header-border-top)) solid rgb(var(--theme-accent));
}

.is-header-border-bottom .header-area {
  border-bottom: calc(var(--layout-line-width) * var(--header-border-bottom)) solid rgb(var(--theme-accent));
}

.header-item-grid {
  margin: calc(-1 * calc(var(--layout-space) * var(--layout-gutter))) 0 0 calc(-1 * calc(var(--layout-space) * var(--layout-gutter)));
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.is-header-area-align-center .header-item-grid {
  align-items: center;
}

.is-header-area-align-baseline .header-item-grid {
  align-items: baseline;
}

.is-header-item-justify-left .header-item-grid {
  justify-content: flex-start;
}

.is-header-item-justify-center .header-item-grid {
  justify-content: center;
}

.is-header-item-justify-right .header-item-grid {
  justify-content: flex-end;
}

.header-item {
  margin: calc(var(--layout-space) * var(--layout-gutter)) 0 0 calc(var(--layout-space) * var(--layout-gutter));
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  pointer-events: all;
}

.is-header-search-width-by-auto .header-item-search {
  flex-grow: 1;
  width: 15em;
  min-width: 15em;
}

.is-header-search-width-by-custom .header-item-search {
  flex-grow: 0;
  width: var(--header-search-width-size);
}

.is-header-item-newline-greeting .header-item-greeting {
  flex-basis: 100%;
}

.is-header-item-newline-clock .header-item-clock {
  flex-basis: 100%;
}

.is-header-item-newline-transitional .header-item-transitional {
  flex-basis: 100%;
}

.is-header-item-newline-date .header-item-date {
  flex-basis: 100%;
}

.is-header-item-newline-search .header-item-search {
  flex-basis: 100%;
}

.is-header-item-newline-editadd .header-item-editadd {
  flex-basis: 100%;
}

.is-header-item-newline-coloraccent .header-item-coloraccent {
  flex-basis: 100%;
}

.is-header-item-newline-menu .header-item-menu {
  flex-basis: 100%;
  position: relative;
}

.header-item-body {
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-item-body-greeting,
.header-item-body-date,
.header-item-body-transitional,
.header-item-body-clock,
.header-item-body-search,
.header-item-body-editadd,
.header-item-body-coloraccent,
.header-item-body-menu {
  position: relative;
}

.header-item-body-greeting {
  font-size: var(--header-greeting-size);
  flex-grow: 1;
}

.header-item-body-clock {
  font-size: var(--header-clock-size);
  flex-grow: 1;
}

.header-item-body-transitional {
  font-size: var(--header-transitional-size);
  flex-grow: 1;
}

.header-item-body-date {
  font-size: var(--header-date-size);
  flex-grow: 1;
}

.header-item-body-search {
  font-size: var(--header-search-size);
  flex-grow: 1;
}

.header-item-body-editadd {
  font-size: var(--header-editadd-size);
  flex-grow: 1;
}

.header-item-body-coloraccent {
  font-size: var(--header-coloraccent-size);
  flex-grow: 1;
}

.header-item-body-menu {
  font-size: var(--header-menu-size);
  flex-grow: 1;
}

.form-input-button .header-edit[type="checkbox"]+label {
  background-color: rgba(var(--button-background), var(--header-editadd-opacity));
}

.form-input-button .header-edit[type="checkbox"]:focus+label,
.form-input-button .header-edit[type="checkbox"]:hover+label {
  background-color: rgba(var(--button-background-focus-hover), var(--header-editadd-opacity));
}

.form-input-button .header-edit[type="checkbox"]:active+label {
  background-color: rgba(var(--button-background-active), var(--header-editadd-opacity));
}

.form-input-button .header-edit[type="checkbox"]:checked+label {
  background-color: rgba(var(--button-background-active), var(--header-editadd-opacity));
}

.is-header-editadd-opacity .form-input-button .header-edit[type="checkbox"]:active+label,
.is-header-editadd-opacity .form-input-button .header-edit[type="checkbox"]:checked+label {
  background-color: transparent;
}

.form-input-button .header-edit[type="checkbox"]+label:after {
  background-color: rgba(var(--button-border), 0);
}

.form-input-button .header-edit[type="checkbox"]:focus+label:after,
.form-input-button .header-edit[type="checkbox"]:hover+label:after {
  background-color: rgba(var(--button-border-focus-hover), var(--header-editadd-opacity));
}

.form-input-button .header-edit[type="checkbox"]:active+label:after {
  background-color: rgb(var(--button-border-active));
}

.form-input-button .header-edit[type="checkbox"]:checked+label:after {
  background-color: rgb(var(--button-border-active));
}

.is-header-editadd-opacity .form-input-button .header-edit[type="checkbox"]:active+label:after,
.is-header-editadd-opacity .form-input-button .header-edit[type="checkbox"]:checked+label:after {
  background-color: transparent;
}

.header-add {
  background-color: rgba(var(--button-background), var(--header-editadd-opacity));
}

.header-add:focus,
.header-add:hover {
  background-color: rgba(var(--button-background-focus-hover), var(--header-editadd-opacity));
}

.header-add:active {
  background-color: rgba(var(--button-background-active), var(--header-editadd-opacity));
}

.header-add:after {
  background-color: rgba(var(--button-border), 0);
}

.header-add:focus:after,
.header-add:hover:after {
  background-color: rgba(var(--button-border-focus-hover), var(--header-editadd-opacity));
}

.header-add:active:after {
  background-color: rgb(var(--button-border-active));
}

.is-header-editadd-opacity .header-add:active:after {
  background-color: transparent;
}

.form-input-button .header-color[type="color"]+label,
.form-input-button .header-accent[type="color"]+label {
  background-color: rgba(var(--button-background), var(--header-coloraccent-opacity));
}

.form-input-button .header-color[type="color"]:focus+label,
.form-input-button .header-color[type="color"]:hover+label,
.form-input-button .header-accent[type="color"]:focus+label,
.form-input-button .header-accent[type="color"]:hover+label {
  background-color: rgba(var(--button-background-focus-hover), var(--header-coloraccent-opacity));
}

.form-input-button .header-color[type="color"]:active+label,
.form-input-button .header-accent[type="color"]:active+label {
  background-color: rgba(var(--button-background-active), var(--header-coloraccent-opacity));
}

.form-input-button .header-color[type="color"]+label:after,
.form-input-button .header-accent[type="color"]+label:after {
  background-color: rgba(var(--button-border), 0);
}

.form-input-button .header-color[type="color"]:focus+label:after,
.form-input-button .header-color[type="color"]:hover+label:after,
.form-input-button .header-accent[type="color"]:focus+label:after,
.form-input-button .header-accent[type="color"]:hover+label:after {
  background-color: rgba(var(--button-border-focus-hover), var(--header-coloraccent-opacity));
}

.form-input-button .header-color[type="color"]:active+label:after,
.form-input-button .header-accent[type="color"]:active+label:after {
  background-color: rgb(var(--button-border-active));
}

.is-header-coloraccent-opacity .form-input-button .header-color[type="color"]:active+label:after,
.is-header-coloraccent-opacity .form-input-button .header-accent[type="color"]:active+label:after {
  background-color: transparent;
}

.header-menu {
  background-color: rgba(var(--button-background), var(--header-menu-opacity));
}

.header-menu:focus,
.header-menu:hover {
  background-color: rgba(var(--button-background-focus-hover), var(--header-menu-opacity));
}

.header-menu:active {
  background-color: rgba(var(--button-background-active), var(--header-menu-opacity));
}

.header-menu:after {
  background-color: rgba(var(--button-border), 0);
}

.header-menu:focus:after,
.header-menu:hover:after {
  background-color: rgba(var(--button-border-focus-hover), var(--header-menu-opacity));
}

.header-menu:active:after {
  background-color: rgb(var(--button-border-active));
}

.is-header-menu-opacity .header-menu:active:after {
  background-color: transparent;
}

.is-header-item-newline-search.is-header-search-width-by-custom .header-item-body-search {
  flex-grow: 0;
  width: var(--header-search-width-size);
}

.is-header-item-justify-left.is-header-item-newline-search.is-header-search-width-by-custom .header-item-search {
  justify-content: flex-start;
}

.is-header-item-justify-center.is-header-item-newline-search.is-header-search-width-by-custom .header-item-search {
  justify-content: center;
}

.is-header-item-justify-right.is-header-item-newline-search.is-header-search-width-by-custom .header-item-search {
  justify-content: flex-end;
}

.is-header-item-justify-left .header-item-body-greeting,
.is-header-item-justify-left .header-item-body-clock,
.is-header-item-justify-left .header-item-body-transitional,
.is-header-item-justify-left .header-item-body-date,
.is-header-item-justify-left .header-item-body-search,
.is-header-item-justify-left .header-item-body-editadd,
.is-header-item-justify-left .header-item-body-coloraccent,
.is-header-item-justify-left .header-item-body-menu {
  justify-content: flex-start;
}

.is-header-item-justify-center .header-item-body-greeting,
.is-header-item-justify-center .header-item-body-clock,
.is-header-item-justify-center .header-item-body-transitional,
.is-header-item-justify-center .header-item-body-date,
.is-header-item-justify-center .header-item-body-search,
.is-header-item-justify-center .header-item-body-editadd,
.is-header-item-justify-center .header-item-body-coloraccent,
.is-header-item-justify-center .header-item-body-menu {
  justify-content: center;
}

.is-header-item-justify-right .header-item-body-greeting,
.is-header-item-justify-right .header-item-body-clock,
.is-header-item-justify-right .header-item-body-transitional,
.is-header-item-justify-right .header-item-body-date,
.is-header-item-justify-right .header-item-body-search,
.is-header-item-justify-right .header-item-body-editadd,
.is-header-item-justify-right .header-item-body-coloraccent,
.is-header-item-justify-right .header-item-body-menu {
  justify-content: flex-end;
}

.header-item-sort-placeholder {
  width: 0.5em;
  height: 100%;
}

.header-item-sort-placeholder-edge {
  background-color: rgba(var(--theme-accent), 0.2);
  border-radius: var(--theme-radius);
  width: 100%;
  height: 2.5em;
  position: relative;
  box-shadow: var(--edge-shadow);
  pointer-events: none;
}