html,
body {
  margin: 0;
  font-family: 'Red Hat Text', sans-serif;
  font-size: 1.05rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body,
main.basic,
main.blog {
  /* Ensures the footer stays at the bottom */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

:not(:defined) {
  opacity: 0;
}

/* exclude demos */
[class^="layout-"] :defined {
  transition: opacity 0.2s ease;
}

p:empty {
  display: none;
}

.skip-to-content-link {
  background: var(--pf-global--BackgroundColor--100, #fff);
  border: 0px;
  border-bottom-left-radius: var(--pf-global--BorderRadius--sm, 0.25rem);
  border-bottom-right-radius: var(--pf-global--BorderRadius--sm, 0.25rem);
  display: flex;
  padding-inline: var(--pf-global--spacer--md, 1rem);
  padding-block: var(--pf-global--spacer--xs, 0.25rem);
  position: fixed;
  top: -200px;
  width: max-content;
  /* Header bar is set to z-index: 300 */
  z-index: 301;
}

.skip-to-content-link:focus {
  position: fixed;
  top: 0;
}


.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

summary :is(h1,h2,h3,h4,h5,h6) {
  margin: 0;
  display: inline-block;
}

:is(h1, h2, h3):not([slot]),
p.subtitle {
  font-weight: var(--pf-c-title--m-4xl--FontWeight, var(--pf-global--FontWeight--normal, 600));
  font-family: var(--pf-c-content--heading--FontFamily, var(--pf-global--FontFamily--heading--sans-serif, var(--pf-global--FontFamily--redhat-updated--heading--sans-serif, "Red Hat Display", "Overpass", overpass, helvetica, arial, sans-serif)));
}

h1:not([slot]) {
  /* font-size: 2rem; */
  font-size: var(--pf-c-title--m-4xl--FontSize, var(--pf-c-title--m-4xl--FontWeight, 2.25rem));
  line-height: var(--pf-c-title--m-4xl--LineHeight, var(--pf-global--LineHeight--sm, 1.3));
}

h3:not([slot]),
p.subtitle {
  margin-block-start: 0.83em;
  font-weight: 500;
}

p.subtitle {
  font-size: 1.17em;
}

strong {
  font-weight: bold;
}

header.band {
  background-color: var(--pf-global--BackgroundColor--100, #fff);
  padding: var(--pf-global--spacer--md, 1rem) var(--pf-global--spacer--md, 1rem);
  box-shadow: var(--pf-c-page--section--m-sticky-top--BoxShadow, var(--pf-global--BoxShadow--sm-bottom, 0 0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)));
}

/* Not an ideal selector... hacking away */
section.band:not(#component-list):not(#lightw):not(#univ):not(.accent):not(.small) {
  max-width: 1020px;
  padding: var(--pf-global--spacer--md, 1rem) var(--pf-global--spacer--md, 1rem);
}

#component-list {
  padding: var(--pf-global--spacer--xl, 2rem) var(--pf-global--spacer--md, 1rem);
}

section.band.small {
  padding-block: 16px;
  padding-inline: 48px;
}

section.band.base {
  background-color: #ededed;
}

/* This most likely could have unintended side effects */
section.band.overview + section.band {
  display: none;
}


a.cta {
  white-space: normal;
  display: inline-block;
  padding: var(--pf-cta--Padding,.6rem 0) !important;
  color: var(--pf-cta--Color, var(--pf-broadcasted--link,#06c));
  font-family: var(--pf-cta--FontFamily,var(--pf-theme--font-family--heading, "Red Hat Display", "RedHatDisplay", "Overpass", Overpass, Arial,));
  font-size: var(--pf-cta--FontSize, var(--pf-global--FontSize--lg, 1.125rem));
  font-weight: var(--pf-cta--FontWeight,var(--pf-theme--font-weight--bold,700));
  line-height: var(--pf-cta--LineHeight, var(--pf-theme--line-height, 1.5));
  text-decoration: var(--pf-cta--TextDecoration,none) !important;
  position: relative;
  z-index: 0;
  vertical-align: middle;
  max-width: var(--pf-cta--MaxWidth,max-content);
  background-color: var(--pf-cta--BackgroundColor,transparent);
  border-radius: var(--pf-cta--BorderRadius, 3px);
  border: var(--pf-theme--ui--border-width,1px) var(--pf-theme--ui--border-style,solid) var(--pf-cta--BorderColor,transparent);
  cursor: pointer;
  --pf-context-background-color: var(--pf-cta--BackgroundColor, transparent) !important;
}

a.cta:not(.primary):not(.secondary)::after {
  --img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 31.56 31.56' %3E%3Cpath d='M15.78 0l-3.1 3.1 10.5 10.49H0v4.38h23.18l-10.5 10.49 3.1 3.1 15.78-15.78L15.78 0z'%3E%3C/path%3E%3C/svg%3E");
  content: '';
  mask-image: var(--img);
  -webkit-mask-image: var(--img);
  background-color: currentcolor;
  display: inline-block;
  translate: 3px 0;
  width: 13px;
  height: 13px;
  transition: translate .3s cubic-bezier(.465, .183, .153, .946);
  margin-bottom: -1px;
}

.band a.cta:hover:not(.primary):not(.secondary)::after {
  translate: 6px;
}

a.cta:hover:not(.primary):not(.secondary) {
  --pf-broadcasted--link: #004080;
}

a.cta.primary,
a.cta.secondary {
  padding: var(--pf-cta--Padding,
    var(--pf-theme--container-padding,1rem)
    calc(var(--pf-theme--container-padding,1rem) * 2)) !important;
  font-size: var(--pf-cta--FontSize--priority, var(--pf-global--FontSize--md, 1rem));
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  --pf-cta--BackgroundColor: var(--pf-theme--color--surface--lightest, #fff);
  --pf-cta--BorderColor: var(--pf-theme--color--surface--lightest, #fff);
  --pf-cta--Color: var(--pf-theme--color--text, #151515);
  --pf-cta--BackgroundColor--hover: var(--pf-theme--color--surface--lighter, #f0f0f0);
  --pf-cta--BorderColor--hover: var(--pf-theme--color--surface--lighter, #f0f0f0);
  --pf-cta--Color--hover: var(--pf-theme--color--text, #151515);
  --pf-cta--BackgroundColor--focus: var(--pf-theme--color--surface--lightest, #fff);
  --pf-cta--BorderColor--focus: var(--pf-theme--color--surface--lightest, #fff);
  --pf-cta--Color--focus: var(--pf-theme--color--text, #151515);
  --pf-cta__inner--BorderColor--focus: var(--pf-theme--color--surface--darkest, #151515);
}

a.cta.secondary {
  --pf-cta--BackgroundColor: transparent;
	--pf-cta--BorderColor: var(--pf-broadcasted--text, #3c3f42);
	--pf-cta--Color: var(--pf-broadcasted--text, #3c3f42);
	--pf-cta--BackgroundColor--hover: var(--pf-broadcasted--text, #3c3f42);
	--pf-cta--BorderColor--hover: var(--pf-broadcasted--text, #3c3f42);
	--pf-cta--Color--hover: var(--pf-theme--color--ui-base--text, #fff);
	--pf-cta--BackgroundColor--focus: var(--pf-theme--color--surface--lighter, #f0f0f0);
	--pf-cta--BorderColor--focus: var(--pf-theme--color--ui-base, #6a6e73);
	--pf-cta--Color--focus: var(--pf-theme--color--ui-base, #6a6e73);
	--pf-cta__arrow--Display: none;
	--pf-cta__inner--BorderColor--focus: var(--pf-theme--color--ui-base, #6a6e73);
}

.overlay > a.cta.secondary {
	--pf-cta--Color--hover:var(--pf-broadcasted--text, #3c3f42);
}

.band.dark a.cta.secondary,
.band.accent a.cta.secondary {
  --pf-broadcasted--link--hover: black;
  --pf-cta--Color: white;
  --pf-cta--BorderColor: white;
  --pf-cta--BackgroundColor--hover: var(--pf-theme--color--surface--lighter, #f0f0f0);
  --pf-cta--BorderColor--hover: var(--pf-theme--color--surface--lighter, #f0f0f0);
  --pf-cta--Color--hover: black;
  --pf-cta--BackgroundColor--focus: var(--pf-theme--color--surface--lightest, #fff);
  --pf-cta--BorderColor--focus: var(--pf-theme--color--surface--lightest, #fff);
  --pf-cta--Color--focus: black;
  --pf-cta__inner--BorderColor--focus: var(--pf-theme--color--surface--darkest, #151515);
  --pf-cta__inner--BorderColor--focus: var(--pf-theme--color--surface--darkest, #151515);
}

.band.dark a.cta:not(.primary):not(.secondary) {
  --pf-broadcasted--link: var(--pf-theme--color--link--on-dark, #73bcf7);
}

a.cta.primary:focus {
  --pf-cta--BackgroundColor: var(--pf-cta--BackgroundColor--focus, rgba(40, 151, 240, 0.2));
  border-color: var(--pf-cta--BorderColor--focus, transparent);
  color: var(--pf-cta--Color--focus, var(--pf-broadcasted--link--focus, #004080));
  --pf-cta--TextDecoration: var(--pf-cta--TextDecoration--focus, none);
  --pf-cta__inner--BorderColor: var(--pf-cta__inner--BorderColor--focus, transparent);
}

a.cta:hover {
  --pf-cta--BackgroundColor: var(--pf-cta--BackgroundColor--hover, transparent);
  border-color: var(--pf-cta--BorderColor--hover, transparent);
  color: var(--pf-cta--Color--hover, var(--pf-broadcasted--link--hover, #004080));
  --pf-cta--TextDecoration: var(--pf-cta--TextDecoration--hover, none);
  --pf-cta__inner--BorderColor: var(--pf-cta__inner--BorderColor--hover, transparent);
  --pf-cta__arrow--Padding: 0 0 0 6px;
}

header.band h1 {
  margin: 0;
}

.band > h2[id]:not(.no-header-styles) {
  font-size: 1.5rem;
  line-height: 1.9375rem;
  margin-top: 2em;
}

.band > h3[id] {
  font-size: 1.3rem;
  margin-top: 2em;
}

.band > h2 + h3[id],
.band > p + h3[id] {
  margin-top: 0;
}

.band > h1+p,
.band > h2+p,
.band > h3+p,
.band > h4+p {
  margin-top: 0;
}

.example-preview {
  padding: var(--pf-global--spacer--md, 1rem);
  background-color: var(--pf-global--BackgroundColor--100, #fff);
  border-bottom: var(--pf-global--BorderWidth--sm, 1px) solid var(--pf-global--BorderColor--300, #f0f0f0);
}

.example-preview.pf-background-image {
  position: relative;
  z-index: 0;
  height: 350px;
  overflow: hidden;
  color: var(--pf-theme--color--white, #fff);
}

.example-preview.pf-background-image pf-background-image {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
}

.example-preview.pf-background-image pf-background-image::part(container) {
  position: relative;
}

.example-preview.pf-background-image pf-background-image,
.example-preview.pf-background-image pf-background-image::part(container) {
  height: 100%;
  width: 100%;
}

.example-preview.pf-background-image pf-background-image::part(container)::after {
  position: absolute;
  background-size: cover;
}

section.api.band.api-properties dl {
  padding: var(--pf-global--spacer--md, 1rem);
  background-color: var(--pf-global--BackgroundColor--100, #fff);
}

section.api.band.api-properties table {
  background-color: var(--pf-global--BackgroundColor--100, #fff);
}

main.basic,
main.blog {
  margin-top: 6.5rem;
  margin-bottom: 3.75rem;
  flex-grow: 1;
  background-color:
  var(
    --pf-c-page__main-section--BackgroundColor,
    var(
      --pf-c-page__main-section--m-light-100--BackgroundColor,
      var(--pf-global--BackgroundColor--150, #fafafa)));
}

#home-title img {
  width: 6rem;
  display: block;
  margin: auto;
}

.tagline {
  font-size: 18px;
}

.header-ctas {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.header-ctas .cta:first-child {
  margin-bottom: 16px;
}

.header-ctas .cta a {
  min-width: 250px;
}

.framework-logos img {
  width: 125px;
  margin: 8px;
}

.framework-logos img.react-logo {
  width: 200px;
}

.header-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 300;
}

.pf-bar {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  align-items: center;
  justify-content: flex-end;
  padding-inline-start: var(--pf-c-masthead--PaddingLeft, var(--pf-c-masthead--inset, 24px));
  padding-inline-end: var(--pf-c-masthead--PaddingLeft, var(--pf-c-masthead--inset, 24px));
  height: 2.125rem;
  font-size: 0.875rem;
  background: var(--pf-c-masthead--BackgroundColor, var(--pf-global--BackgroundColor--dark-100, #151515));
  color: var(--pf-theme--color--white, #fff);
}

.pf-bar a {
  font-size: 0.875rem;
  color: var(--pf-theme--color--white, #fff);
}

.pf-bar a.cta {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0;
  height: 100%;
}

.pf-bar a:hover {
  color: var(--pf-theme--color--white, #fff);
}

.pf-bar a.cta:hover:not(.primary):not(.secondary)::after {
  translate: 6px;
}

.logo-bar {
  display: flex;
  --pf-navigation--Height--actual: 70px;
  align-items: center;
  height: 4.375rem; /* old: 3.75rem */
  padding-inline-start: var(--pf-c-masthead--PaddingLeft, var(--pf-c-masthead--inset, 24px));
  padding-inline-end: var(--pf-c-masthead--PaddingRight, var(--pf-c-masthead--inset, 24px));
  padding-block-start: 8px;
  padding-block-end: 8px;
  color: white;
  background: var(--pf-theme--color--accent, #0066cc);
}

.logo-flex-wrap {
  display: flex;
  gap: 1em;
  width: 100%;
  height: 100%;
}

.logo-flex-wrap > .placeholder {
  /* 25px is the width of the hamburger */
  width: 25px;
  height: 57px;
}

.logo-flex-wrap > a {
  display: flex;
  align-items: center;
  color: white;
  text-decoration: none;
  font-size: 1.25rem;
  font-weight: bold;
  gap: 1rem;
}

.logo-flex-wrap > a > picture,
.logo-flex-wrap > a > picture > img {
  height: 100%;
}

#docs-versions-dropdown {
  margin-inline-start: auto;
  --pf-dropdown--Color: white;
}

.component-preview {
  margin-bottom: 64px !important;
}

.component-preview--container {
  position: relative;
}

.component-preview h3 {
  margin-bottom: 0;
}

.component-preview:hover .overlay {
  display: flex;
}

.overlay {
  display: none;

  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #eeeeeecc;

  /* display: flex; */
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

.overlay > .cta,
.overlay > a {
  margin-bottom: 16px;
}

.overlay > .cta.wind {
  background-color: white;
}


.preview-image {
  height: 250px;
  background-size: 90%;
  background-repeat: no-repeat;
  background-position: center;
  border: 1px solid #d2d2d2;
  border-radius: 3px;
}

.element-invisible {
  position: absolute;
  width: .0625rem;
  height: .0625rem;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  border: 0;
  grid-gap: 1rem;
}

.l-header__mobile-menu-toggle,
[id=mobile-menu-toggle][id] {
  position: fixed;
  top: 0;
  left: 0;
}

.l-header__mobile-menu-toggle {
  width: 1.5rem;
  height: 4.375rem;
  color: #fff;
  z-index: 200;
  position: fixed;
  top: 2.125rem;
  left: var(--pf-c-masthead--PaddingLeft, var(--pf-c-masthead--inset, 24px));
}

.menu-toggle__button {
  display: block;
  cursor: pointer;
  border: 0;
  overflow: hidden;
  background: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* header-bar is set to z-index: 300 */
  z-index: 301;
}

.l-header__burger-icon {
  display: block;
  position: absolute;
  top: 50%;
  left: calc(50% - .75rem);
  transform: scale(.25);
  transform-origin: left top;
}

.l-header__burger-icon::before,
.l-header__burger-icon::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  display: block;
  width: 6rem;
}

.l-header__burger-icon::before {
  height: 0;
  border-top: .5rem solid #fff;
  background: #fff;
  transform: translateY(-2rem);
  transform-origin: left top;
  transition: transform .3s cubic-bezier(.55, .085, 0, .99);
}

.l-header__burger-icon::after {
  height: 2.5rem;
  border: .5rem solid #fff;
  border-width: .5rem 0;
  transition: border .3s cubic-bezier(.55, .085, 0, .99), transform .3s cubic-bezier(.55, .085, 0, .99);
  transform-origin: left bottom;
}

.site-navigation__outer-wrapper {
  position: fixed;
  top: 6.5rem;
  left: 0;
  z-index: 10;
  height: calc(100vh - 6.5rem);
}

.site-navigation {
  width: 17.5rem;
  padding-top: 1.875rem;
  height: calc(100vh - 3.75rem);
  overflow-y: auto;
  color: #151515;
  background: #fff;
  border-right: .0625rem solid #d2d2d2;
}

.site-navigation > pf-dropdown {
  --pf-dropdown--MinWidth: 100%;
  width: var(--pf-dropdown--MinWidth);
}

.site-navigation__sub-menu,
.site-navigation__wrapper {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-navigation .site-navigation__item {
  line-height: 2.25rem;
}

.site-navigation .site-navigation__heading,
.site-navigation .site-navigation__link,
.site-navigation .site-navigation__sub-menu__link {
  display: block;
  text-decoration: none;
  transition: background-color .25s;
  font-size: 1.125rem;
  padding: .5em 2rem;
  color: #151515;
}

.site-navigation details>summary::-webkit-details-marker {
  display: none;
}

.site-navigation summary {
  cursor: pointer;
}

.site-navigation .site-navigation__heading::after {
  content: "";
  color: #151515;
  width: .5625rem;
  height: .5625rem;
  transform: rotate(45deg);
  border-right: .1875rem solid #151515;
  border-top: .1875rem solid #151515;
  display: flex;
  float: right;
  top: .8125rem;
  position: relative;
}

.site-navigation details[open] .site-navigation__heading::after {
  transform: rotate(135deg);
}

.site-navigation__sub-menu {
  padding-left: 2rem;
}

.site-navigation .site-navigation__sub-menu__link {
  font-size: 1rem;
  line-height: 1.5rem;
  padding-left: 1rem;
}

.site-navigation .site-navigation__heading:focus,
.site-navigation .site-navigation__heading:hover,
.site-navigation .site-navigation__link:focus,
.site-navigation .site-navigation__link:hover,
.site-navigation .site-navigation__sub-menu__link:focus,
.site-navigation .site-navigation__sub-menu__link:hover {
  color: #151515;
  background: #f5f5f5;
  box-shadow: inset 0.1875rem 0 0 0 #d2d2d2;
}

.site-navigation .site-navigation__link--active,
.site-navigation .site-navigation__sub-menu__link--active {
  background: #f5f5f5;
  box-shadow: inset 0.1875rem 0 0 0 var(--pf-theme--color--surface--accent, #004080);
  color: #151515;
}

[id=mobile-menu-toggle]~.menu-toggle__toggleable {
  visibility: hidden;
  transition: visibility 0s .4s, width .25s ease-in-out;
  width: 0;
  overflow: hidden;
  background: #fff;
}

[id=mobile-menu-toggle]:checked~.menu-toggle__toggleable {
  visibility: visible;
  transition: visibility 0s 0s, width .25s ease-in-out;
  width: 17.5rem;
}

.faux-band {
  padding: 16px;
}

.color-preview {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: middle;
  background-color: var(--bg, #fff);
  border: 1px solid #444;
}

th {
  text-align: left;
}

th, td {
  border-bottom: 1px solid #eee;
  padding: 16px;
}

code:not([class*="language-"]) {
  padding: .2em .4em;
  border-radius: 6px;
  font-family: "Overpass Mono", monospace;
}

footer h3 {
  margin: 0;
}

footer ul {
  list-style-type: none;
  padding: 0;
  margin-top: 0;
}

pre {
  border: #eee solid 1px;
  padding: 10px;
  overflow-x: scroll;
}

code {
  font-size: 14px;
}


.html-example {
  display: flex;
  padding-block: 6px;
  transition: width .2s ease-in-out;
}

.html-example:hover summary {
  color: var(--pf-c-expandable-section__toggle--hover--Color, var(--pf-global--link--Color--hover, #004080));
}

.html-example summary {
  display: flex;
  cursor: pointer;
  align-items: center;
  gap: 0.5rem;
  color: var(--pf-c-expandable-section__toggle--Color, var(--pf-global--link--Color, #06c));
}

.html-example > summary::-webkit-details-marker,
.html-example > summary::marker {
  display: none;
}

.html-example > summary::before {
  content: "";
  display: inline-block;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 256 512' aria-hidden='true' role='img' style='vertical-align: -0.125em;'%3E%3Cpath d='M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z'%3E%3C/path%3E%3C/svg%3E");
  background-size: 1rem 1rem;
  height: 1rem;
  width: 1rem;
  transition: all .2s ease-in;
}

.html-example[open] > summary::before {
  transform: rotate(90deg);
}

.html-example p:empty {
  display: none;
}

.html-example pre[class*="language-"] {
  margin: 0;
}

.push-top {
  margin-top: var(--pf-theme--container-spacer, 0.83em);
}

.push-bottom {
  margin-bottom: var(--pf-theme--container-spacer, 0.83em);
}

.pf-l-grid.pf-m-gutters > * {
  min-width: 0;
}

pf-card > h3 {
  margin-top: 0;
}

.gist {
  overflow: scroll;
}

blockquote {
  border-inline-start: 3px solid #d2d2d2;
  padding: 1rem 1.5rem;
  margin-block: 2rem;
}

.callout {
  background-color: var(--pf-global--active-color--200, #bee1f4);
  margin-left: 0;
  margin-right: 0;
  padding: 1.5rem;
}

@media (min-width: 500px) {
  .header-ctas {
    flex-direction: row;
  }

  .header-ctas .cta:first-child {
    margin-bottom: 0;
    margin-right: 16px;
  }

  .header-ctas .cta a {
    min-width: initial;
  }
}

@media (min-width: 540px) {
  h1 {
    font-size: 48px;
  }

  .tagline {
    font-size: 24px;
  }
}

@media (min-width: 768px) {
  header.band {
    padding-block: var(--pf-global--spacer--xl, 2rem);
  }
}

@media (min-width: 820px) {
  main.basic,
  main.blog,
  body:not(.layout-base) footer.basic {
    padding-left: 17.5rem;
  }

  header.band,
  section.band:not(#component-list):not(#lightw):not(#univ):not(.accent):not(.small) {
    padding-inline: var(--pf-global--spacer--3xl, 4rem)
  }

  .logo-flex-wrap {
    gap: 0;
  }

  .logo-flex-wrap .placeholder:empty {
    display: none;
  }

  #component-list {
    padding: var(--pf-global--spacer--3xl, 4rem) var(--pf-global--spacer--3xl, 4rem);
  }

  .site-navigation {
    visibility: visible;
    padding-bottom: 1.875rem;
  }

  .l-header__mobile-menu-toggle,
  [id=mobile-menu-toggle][id] {
    display: none;
  }

  .menu-toggle__toggleable.js-menu-toggle__toggleable,
  [id=mobile-menu-toggle]~.menu-toggle__toggleable {
    overflow: visible;
    visibility: visible;
  }

  #home-title img {
    display: inline-block;
    position: relative;
    top: 2rem;
  }

  .logo-flex-wrap > a {
    margin-left: 16px;
  }

  .logo-flex-wrap > a > picture > img {
    display: inline-block;
    position: relative;
    left: -1rem;
    margin-right: -1rem;
  }
}

@media (min-width: 1179px) {
  .preview-image {
    background-size: 65%;
  }
}

@media (max-width: 1199px) {
  .block-toc {
    display: none;
  }
}

nav.toc ol {
  list-style-type: none;
  padding-inline-start: 16px;
}

nav.toc li {
  position: relative;
}

@media (min-width: 1200px) {
  .band > h2[id]:not(.no-header-styles) {
    font-size: 2rem;
    line-height: 2.3125rem;
  }

  .inline-toc {
    display: none;
  }

  main.blog {
    display: grid;
    position: relative;
    grid-template-areas: 'header header' 'content toc';
    grid-template-columns: auto 18rem;
    grid-template-rows: min-content;
  }

  main.blog > header.band {
    grid-area: header
  }

  main.blog > .block-toc {
    grid-area: toc;
    padding: 1rem 2rem;
  }

  main.blog > .band:not(header) {
    grid-area: content;
  }

  aside.block-toc > nav.toc {
    position: sticky;
    top: 126px;
  }

  aside.block-toc > h2 {
    margin: 20px 0px 0px 12px;
  }

  nav.toc li::after {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    background-image: url(/brand/logo/svg/pfe-icon-blue.svg);
    padding-inline-end: 4px;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    position: absolute;
    left: -1.2em;
    top: 0.35em;
  }

  nav.toc .active::after {
    opacity: 1;
  }
}

pre[class*="language-"]  {
  position: relative;
}

pre[class*="language-"]:hover button,
pre[class*="language-"]:focus-within button,
pre[class*="language-"] button:hover,
pre[class*="language-"] button:focus {
  opacity: 1;
}

pre[class*="language-"] button {
  color: black;
  box-sizing: border-box;
  transition: 0.2s ease-out;
  cursor: pointer;
  user-select: none;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.15);
  padding: 5px 10px;
  font-size: 0.8em;
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 0 0.15rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.inline-type pre {
  padding: 0;
  background: none;
  border: none;
}

/* in case of markdown rendering artifacts */
.inline-type p,
.inline-type :empty {
  display: none;
}

.inline-type pre,
.inline-type code {
  font-size: inherit;
  display: inline;
  white-space: pre-line;
  overflow-wrap: unset;
  word-wrap: unset;
}

:is(h1, h2, h3, h4, h5, h6) code {
  font-size: inherit;
}

dt:not(:first-of-type) {
  margin-top: 14px;
}

dl.member {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 8px;
}

dl.member dt {
  font-style: italic;
}

dl.member dt::after {
  content: ': ';
}

dl.member dt,
dl.member dd {
  margin: 0;
  padding: 0;
}

/* diff syntax highlighting */
/* TODO: use PFE color vars */

.token.deleted {
  background-color: hsl(350deg 100% 88% / 47%);
}
.token.inserted {
  background-color: hsl(120deg 73% 75% / 35%);
}

/* Make the + and - characters unselectable for copy/paste */
.token.prefix.unchanged,
.token.prefix.inserted,
.token.prefix.deleted {
	-webkit-user-select: none;
	user-select: none;
}

/* Optional: full-width background color */
.token.inserted:not(.prefix),
.token.deleted:not(.prefix) {
	display: block;
}

@media (min-width: 820px) {
  rh-global-footer {
    width: calc(100vw - 17.5rem);
    transform: translate(17.5rem);
  }
}