#page-header + .tabs {
    margin-top: 1.5em;
    margin-bottom: 1.5em;
}

#page-header + .tabs + section {
    margin-top: 0;
}


.tab-groups {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: flex-end;
}

.tab-groups .tabs {
    max-width: revert;
    margin-left: 0;
    margin-right: 0;
}

.tab-groups .tabs:has(> h1) {
    flex-flow: column;
    align-items: center;
}

.tab-groups .tabs > h1 {
    margin-left: 0;
    margin-right: 0;
}

.tabs {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: baseline;
    max-width: max-content;
    margin: 0.25em auto;
}

.tabs:has(> h1) {
    flex-flow: row wrap;
}

.tabs > h1 {
    flex: none;
    font-size: medium;
    border: medium solid transparent;
    margin: 0 auto -0.4em 0.5em;
    white-space: nowrap;
}

.tabs > h1 > a {
    display: block;
    padding: 0.2em 0.25em;
}

.tabs > h1 > a[href]:hover {
    text-decoration: underline;
}

.tabs ul {
    flex: 0 1 auto;
    display: flex;
    flex-flow: row wrap;
    margin: 0.25em;
    background-color: var(--nav-background-color);
    border: medium solid black;
}

.tabs ul > li {
    flex: 1 1 auto;
    text-align: center;
    border: thin solid grey;
}

.tabs ul > li:has(> ul) {
    display: flex;
    flex-flow: column;
    align-items: stretch;
}

.tabs ul > li:has(> ul) > * {
    flex: none;
}

.tabs ul > li > ul {
    font-size: smaller;
    margin-top: 0;
}

.tabs ul > li:has(> a.direct-link),
.tabs ul > li > span:has(> a.direct-link) {
    display: flex;
    flex-flow: row;
    align-items: stretch;
}

.tabs ul > li:has(a.direct-link) > a:not(.direct-link),
.tabs ul > li > span:has(a.direct-link) > a:not(.direct-link) {
    flex: 1 0;
    padding-right: 0.2em;
}

.tabs ul > li > a.direct-link,
.tabs ul > li > span > a.direct-link {
    flex: none;
    display: flex;
    align-items: center;
    padding-left: 0.2em;
    padding-top: 0;
    padding-bottom: 0;
}

.tabs ul > li > a.direct-link:where(:not(:is(:hover, :focus))),
.tabs ul > li > span > a.direct-link:where(:not(:is(:hover, :focus))) {
    opacity: 0.3;
}


.tabs ul > li + li {
    margin-top: 0;
}

.tabs ul > li li {
    margin-bottom: 0;
}

.tabs ul > li a {
    display: block;
    padding: 0.2em 0.5em;
    text-decoration: none;
    position: relative;
}

.tabs ul > li > a:is(.here, .ancestor) {
    text-decoration: revert;
}

.tabs ul > li > a[href]:is(:hover, :focus) {
    background-color: var(--nav-background-highlight-color);
    outline-style: none;
}

.tabs ul > li > a:is(.here, .not-available):is(:hover, :focus) {
    background-color: transparent;
}


.tabs.additional:where(:not(:is(:hover, :focus))) {
    opacity: 0.6;
}


#top-nav > .main > .tabs {
    border: none;
}

#top-nav > .main > .tabs ul {
    margin: 0;
}

#top-nav > .main > .tabs ul li {
    border-top: none;
    border-bottom: none;
}

#top-nav > .main > .tabs > ul > li > a {
    padding: 0.175em 0.5em;
}

#top-nav > .main > .tabs > ul > li > a.here {
    text-decoration: revert;
}