.AppFrame .AppFrame-a11yNav {
    position: absolute;
    z-index: 1000;
    display: flex;
    width: 100%;
    padding: var(--base-size-16, 16px);
    background: var(--color-canvas-inset);
    padding-block-end: calc(var(--base-size-16, 16px) - var(--primer-borderWidth-thin, 1px));
    isolation: isolate;
    align-items: center;
    gap: var(--base-size-8, 8px)
}

.AppFrame .AppFrame-a11yNav:not(:focus-within) {
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    border: 0
}

.AppFrame .AppFrame-a11yNav:focus-within {
    top: 0;
    left: 0
}

@media(max-width: 767.98px) {
    .AppFrame .AppFrame-a11yNav:focus-within {
        justify-content: center
    }
}

.AppFrame .AppFrame-a11yLink {
    transition: none
}

.AppFrame .AppFrame-a11yLink:not(:focus) {
    display: block;
    width: var(--base-size-8, 8px);
    height: var(--base-size-8, 8px);
    overflow: hidden;
    text-indent: var(--base-size-128, 128px);
    pointer-events: none;
    background: var(--color-border-default);
    border-radius: var(--primer-borderRadius-full, 100vh)
}

.AppFrame .AppFrame-a11yLink:focus {
    z-index: 20;
    display: grid;
    width: auto;
    height: auto;
    min-height: var(--primer-control-medium-size, 32px);
    padding: 0 var(--primer-control-medium-paddingInline-spacious, 16px);
    overflow: auto;
    color: var(--color-fg-on-emphasis);
    background: var(--color-accent-emphasis);
    border-radius: var(--primer-borderRadius-full, 100vh);
    align-items: center
}

@media(pointer: coarse) {
    .AppFrame .AppFrame-a11yLink:focus::after {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 100%;
        min-height: var(--primer-control-minTarget-coarse, 44px);
        content: "";
        transform: translateX(-50%) translateY(-50%)
    }
}

@media(prefers-reduced-motion: no-preference) {
    .AppFrame .AppFrame-a11yLink:focus {
        animation: AppFrame-a11yLink-focus 200ms ease-out
    }
}

@keyframes AppFrame-a11yLink-focus {
    0% {
        color: var(--color-accent-emphasis);
        transform: scale(0.3, 0.25)
    }

    50% {
        color: var(--color-accent-emphasis);
        transform: scale(1, 1)
    }

    55% {
        color: var(--color-fg-on-emphasis)
    }

    100% {
        transform: scaleX(1)
    }
}

.AppFrame .AppFrame-main {
    display: flex;
    min-height: 100vh;
    flex-direction: column
}

@supports(height: 100dvh) {
    .AppFrame .AppFrame-main {
        min-height: 100dvh
    }
}

.AppFrame .AppFrame-header-wrapper {
    position: relative;
    height: min-content;
    overflow: visible
}

.AppFrame .AppFrame-header-wrapper .AppFrame-header {
    position: sticky;
    top: 0;
    z-index: 1
}

.AppFrame .AppFrame-header {
    flex: 0 0 auto
}

.AppFrame .AppFrame-subheader {
    flex: 0 0 auto
}

.AppFrame .AppFrame-body {
    flex: 1 0;
    height: 100%
}

.AppFrame .AppFrame-footer {
    flex: 0 0 auto
}

.container-sm {
    max-width: 544px;
    margin-right: auto;
    margin-left: auto
}

.container-md {
    max-width: 768px;
    margin-right: auto;
    margin-left: auto
}

.container-lg {
    max-width: 1012px;
    margin-right: auto;
    margin-left: auto
}

.container-xl {
    max-width: 1280px;
    margin-right: auto;
    margin-left: auto
}

.col-1 {
    width: 8.33333333%
}

.col-2 {
    width: 16.66666666%
}

.col-3 {
    width: 24.99999999%
}

.col-4 {
    width: 33.33333332%
}

.col-5 {
    width: 41.66666665%
}

.col-6 {
    width: 49.99999998%
}

.col-7 {
    width: 58.33333331%
}

.col-8 {
    width: 66.66666664%
}

.col-9 {
    width: 74.99999997%
}

.col-10 {
    width: 83.3333333%
}

.col-11 {
    width: 91.66666663%
}

.col-12 {
    width: 100%
}

@media(min-width: 544px) {
    .col-sm-1 {
        width: 8.33333333%
    }

    .col-sm-2 {
        width: 16.66666666%
    }

    .col-sm-3 {
        width: 24.99999999%
    }

    .col-sm-4 {
        width: 33.33333332%
    }

    .col-sm-5 {
        width: 41.66666665%
    }

    .col-sm-6 {
        width: 49.99999998%
    }

    .col-sm-7 {
        width: 58.33333331%
    }

    .col-sm-8 {
        width: 66.66666664%
    }

    .col-sm-9 {
        width: 74.99999997%
    }

    .col-sm-10 {
        width: 83.3333333%
    }

    .col-sm-11 {
        width: 91.66666663%
    }

    .col-sm-12 {
        width: 100%
    }
}

@media(min-width: 768px) {
    .col-md-1 {
        width: 8.33333333%
    }

    .col-md-2 {
        width: 16.66666666%
    }

    .col-md-3 {
        width: 24.99999999%
    }

    .col-md-4 {
        width: 33.33333332%
    }

    .col-md-5 {
        width: 41.66666665%
    }

    .col-md-6 {
        width: 49.99999998%
    }

    .col-md-7 {
        width: 58.33333331%
    }

    .col-md-8 {
        width: 66.66666664%
    }

    .col-md-9 {
        width: 74.99999997%
    }

    .col-md-10 {
        width: 83.3333333%
    }

    .col-md-11 {
        width: 91.66666663%
    }

    .col-md-12 {
        width: 100%
    }
}

@media(min-width: 1012px) {
    .col-lg-1 {
        width: 8.33333333%
    }

    .col-lg-2 {
        width: 16.66666666%
    }

    .col-lg-3 {
        width: 24.99999999%
    }

    .col-lg-4 {
        width: 33.33333332%
    }

    .col-lg-5 {
        width: 41.66666665%
    }

    .col-lg-6 {
        width: 49.99999998%
    }

    .col-lg-7 {
        width: 58.33333331%
    }

    .col-lg-8 {
        width: 66.66666664%
    }

    .col-lg-9 {
        width: 74.99999997%
    }

    .col-lg-10 {
        width: 83.3333333%
    }

    .col-lg-11 {
        width: 91.66666663%
    }

    .col-lg-12 {
        width: 100%
    }
}

@media(min-width: 1280px) {
    .col-xl-1 {
        width: 8.33333333%
    }

    .col-xl-2 {
        width: 16.66666666%
    }

    .col-xl-3 {
        width: 24.99999999%
    }

    .col-xl-4 {
        width: 33.33333332%
    }

    .col-xl-5 {
        width: 41.66666665%
    }

    .col-xl-6 {
        width: 49.99999998%
    }

    .col-xl-7 {
        width: 58.33333331%
    }

    .col-xl-8 {
        width: 66.66666664%
    }

    .col-xl-9 {
        width: 74.99999997%
    }

    .col-xl-10 {
        width: 83.3333333%
    }

    .col-xl-11 {
        width: 91.66666663%
    }

    .col-xl-12 {
        width: 100%
    }
}

.gutter {
    margin-right: -16px;
    margin-left: -16px
}

.gutter>[class*=col-] {
    padding-right: 16px !important;
    padding-left: 16px !important
}

.gutter-condensed {
    margin-right: -8px;
    margin-left: -8px
}

.gutter-condensed>[class*=col-] {
    padding-right: 8px !important;
    padding-left: 8px !important
}

.gutter-spacious {
    margin-right: -24px;
    margin-left: -24px
}

.gutter-spacious>[class*=col-] {
    padding-right: 24px !important;
    padding-left: 24px !important
}

@media(min-width: 544px) {
    .gutter-sm {
        margin-right: -16px;
        margin-left: -16px
    }

    .gutter-sm>[class*=col-] {
        padding-right: 16px !important;
        padding-left: 16px !important
    }

    .gutter-sm-condensed {
        margin-right: -8px;
        margin-left: -8px
    }

    .gutter-sm-condensed>[class*=col-] {
        padding-right: 8px !important;
        padding-left: 8px !important
    }

    .gutter-sm-spacious {
        margin-right: -24px;
        margin-left: -24px
    }

    .gutter-sm-spacious>[class*=col-] {
        padding-right: 24px !important;
        padding-left: 24px !important
    }
}

@media(min-width: 768px) {
    .gutter-md {
        margin-right: -16px;
        margin-left: -16px
    }

    .gutter-md>[class*=col-] {
        padding-right: 16px !important;
        padding-left: 16px !important
    }

    .gutter-md-condensed {
        margin-right: -8px;
        margin-left: -8px
    }

    .gutter-md-condensed>[class*=col-] {
        padding-right: 8px !important;
        padding-left: 8px !important
    }

    .gutter-md-spacious {
        margin-right: -24px;
        margin-left: -24px
    }

    .gutter-md-spacious>[class*=col-] {
        padding-right: 24px !important;
        padding-left: 24px !important
    }
}

@media(min-width: 1012px) {
    .gutter-lg {
        margin-right: -16px;
        margin-left: -16px
    }

    .gutter-lg>[class*=col-] {
        padding-right: 16px !important;
        padding-left: 16px !important
    }

    .gutter-lg-condensed {
        margin-right: -8px;
        margin-left: -8px
    }

    .gutter-lg-condensed>[class*=col-] {
        padding-right: 8px !important;
        padding-left: 8px !important
    }

    .gutter-lg-spacious {
        margin-right: -24px;
        margin-left: -24px
    }

    .gutter-lg-spacious>[class*=col-] {
        padding-right: 24px !important;
        padding-left: 24px !important
    }
}

@media(min-width: 1280px) {
    .gutter-xl {
        margin-right: -16px;
        margin-left: -16px
    }

    .gutter-xl>[class*=col-] {
        padding-right: 16px !important;
        padding-left: 16px !important
    }

    .gutter-xl-condensed {
        margin-right: -8px;
        margin-left: -8px
    }

    .gutter-xl-condensed>[class*=col-] {
        padding-right: 8px !important;
        padding-left: 8px !important
    }

    .gutter-xl-spacious {
        margin-right: -24px;
        margin-left: -24px
    }

    .gutter-xl-spacious>[class*=col-] {
        padding-right: 24px !important;
        padding-left: 24px !important
    }
}

.offset-1 {
    margin-left: 8.33333333% !important
}

.offset-2 {
    margin-left: 16.66666666% !important
}

.offset-3 {
    margin-left: 24.99999999% !important
}

.offset-4 {
    margin-left: 33.33333332% !important
}

.offset-5 {
    margin-left: 41.66666665% !important
}

.offset-6 {
    margin-left: 49.99999998% !important
}

.offset-7 {
    margin-left: 58.33333331% !important
}

.offset-8 {
    margin-left: 66.66666664% !important
}

.offset-9 {
    margin-left: 74.99999997% !important
}

.offset-10 {
    margin-left: 83.3333333% !important
}

.offset-11 {
    margin-left: 91.66666663% !important
}

@media(min-width: 544px) {
    .offset-sm-1 {
        margin-left: 8.33333333% !important
    }

    .offset-sm-2 {
        margin-left: 16.66666666% !important
    }

    .offset-sm-3 {
        margin-left: 24.99999999% !important
    }

    .offset-sm-4 {
        margin-left: 33.33333332% !important
    }

    .offset-sm-5 {
        margin-left: 41.66666665% !important
    }

    .offset-sm-6 {
        margin-left: 49.99999998% !important
    }

    .offset-sm-7 {
        margin-left: 58.33333331% !important
    }

    .offset-sm-8 {
        margin-left: 66.66666664% !important
    }

    .offset-sm-9 {
        margin-left: 74.99999997% !important
    }

    .offset-sm-10 {
        margin-left: 83.3333333% !important
    }

    .offset-sm-11 {
        margin-left: 91.66666663% !important
    }
}

@media(min-width: 768px) {
    .offset-md-1 {
        margin-left: 8.33333333% !important
    }

    .offset-md-2 {
        margin-left: 16.66666666% !important
    }

    .offset-md-3 {
        margin-left: 24.99999999% !important
    }

    .offset-md-4 {
        margin-left: 33.33333332% !important
    }

    .offset-md-5 {
        margin-left: 41.66666665% !important
    }

    .offset-md-6 {
        margin-left: 49.99999998% !important
    }

    .offset-md-7 {
        margin-left: 58.33333331% !important
    }

    .offset-md-8 {
        margin-left: 66.66666664% !important
    }

    .offset-md-9 {
        margin-left: 74.99999997% !important
    }

    .offset-md-10 {
        margin-left: 83.3333333% !important
    }

    .offset-md-11 {
        margin-left: 91.66666663% !important
    }
}

@media(min-width: 1012px) {
    .offset-lg-1 {
        margin-left: 8.33333333% !important
    }

    .offset-lg-2 {
        margin-left: 16.66666666% !important
    }

    .offset-lg-3 {
        margin-left: 24.99999999% !important
    }

    .offset-lg-4 {
        margin-left: 33.33333332% !important
    }

    .offset-lg-5 {
        margin-left: 41.66666665% !important
    }

    .offset-lg-6 {
        margin-left: 49.99999998% !important
    }

    .offset-lg-7 {
        margin-left: 58.33333331% !important
    }

    .offset-lg-8 {
        margin-left: 66.66666664% !important
    }

    .offset-lg-9 {
        margin-left: 74.99999997% !important
    }

    .offset-lg-10 {
        margin-left: 83.3333333% !important
    }

    .offset-lg-11 {
        margin-left: 91.66666663% !important
    }
}

@media(min-width: 1280px) {
    .offset-xl-1 {
        margin-left: 8.33333333% !important
    }

    .offset-xl-2 {
        margin-left: 16.66666666% !important
    }

    .offset-xl-3 {
        margin-left: 24.99999999% !important
    }

    .offset-xl-4 {
        margin-left: 33.33333332% !important
    }

    .offset-xl-5 {
        margin-left: 41.66666665% !important
    }

    .offset-xl-6 {
        margin-left: 49.99999998% !important
    }

    .offset-xl-7 {
        margin-left: 58.33333331% !important
    }

    .offset-xl-8 {
        margin-left: 66.66666664% !important
    }

    .offset-xl-9 {
        margin-left: 74.99999997% !important
    }

    .offset-xl-10 {
        margin-left: 83.3333333% !important
    }

    .offset-xl-11 {
        margin-left: 91.66666663% !important
    }
}

:root {
    --Layout-pane-width: 220px;
    --Layout-content-width: 100%;
    --Layout-template-columns: 1fr var(--Layout-pane-width);
    --Layout-template-areas: "content pane";
    --Layout-column-gap: 16px;
    --Layout-row-gap: 16px;
    --Layout-outer-spacing-x: 0px;
    --Layout-outer-spacing-y: 0px;
    --Layout-inner-spacing-min: 0px;
    --Layout-inner-spacing-max: 0px
}

.PageLayout {
    display: block;
    margin: var(--Layout-outer-spacing-y) var(--Layout-outer-spacing-x)
}

@media(min-width: 768px) {
    .PageLayout.PageLayout--panePos-start {
        --Layout-template-columns: var(--Layout-pane-width) minmax(0, calc(100% - var(--Layout-pane-width) - var(--Layout-column-gap)));
        --Layout-template-areas: "pane content"
    }

    .PageLayout.PageLayout--panePos-end {
        --Layout-template-columns: minmax(0, calc(100% - var(--Layout-pane-width) - var(--Layout-column-gap))) var(--Layout-pane-width);
        --Layout-template-areas: "content pane"
    }

    .PageLayout .PageLayout-header--hasDivider {
        padding-bottom: max(var(--Layout-row-gap), var(--Layout-inner-spacing-min));
        border-bottom: 1px solid var(--color-border-default)
    }

    .PageLayout .PageLayout-footer--hasDivider {
        padding-top: max(var(--Layout-row-gap), var(--Layout-inner-spacing-min));
        border-top: 1px solid var(--color-border-default)
    }

    .PageLayout.PageLayout--hasPaneDivider.PageLayout--panePos-start .PageLayout-pane {
        border-right: 1px solid var(--color-border-default)
    }

    .PageLayout.PageLayout--hasPaneDivider.PageLayout--panePos-start:not(.PageLayout--columnGap-none) .PageLayout-pane {
        padding-right: calc(var(--Layout-column-gap) - 1px);
        margin-right: calc(var(--Layout-column-gap)*-1)
    }

    .PageLayout.PageLayout--hasPaneDivider.PageLayout--panePos-start:not(.PageLayout--columnGap-none) .PageLayout-content {
        margin-left: var(--Layout-column-gap)
    }

    .PageLayout.PageLayout--hasPaneDivider.PageLayout--panePos-end .PageLayout-pane {
        border-left: 1px solid var(--color-border-default)
    }

    .PageLayout.PageLayout--hasPaneDivider.PageLayout--panePos-end:not(.PageLayout--columnGap-none) .PageLayout-pane {
        padding-left: calc(var(--Layout-column-gap) - 1px);
        margin-left: calc(var(--Layout-column-gap)*-1)
    }

    .PageLayout.PageLayout--hasPaneDivider.PageLayout--panePos-end:not(.PageLayout--columnGap-none) .PageLayout-content {
        margin-right: var(--Layout-column-gap)
    }

    .PageLayout .PageLayout-pane--sticky {
        position: sticky;
        top: 0;
        max-height: 100vh;
        overflow: auto;
        scrollbar-width: thin
    }

    @supports(max-height: 100dvh) {
        .PageLayout .PageLayout-pane--sticky {
            max-height: 100dvh
        }
    }

    .PageLayout [class^=PageLayout-content-centered-] {
        max-width: calc(var(--Layout-content-width) + var(--Layout-pane-width) + var(--Layout-column-gap));
        margin-right: auto;
        margin-left: auto
    }

    .PageLayout.PageLayout--hasPaneDivider [class^=PageLayout-content-centered-] {
        max-width: calc(var(--Layout-content-width) + var(--Layout-pane-width) + var(--Layout-column-gap)*2)
    }

    .PageLayout.PageLayout--panePos-start [class^=PageLayout-content-centered-]>[class^=container-] {
        margin-left: 0
    }

    .PageLayout.PageLayout--panePos-end [class^=PageLayout-content-centered-]>[class^=container-] {
        margin-right: 0
    }

    .PageLayout .PageLayout-content-centered-sm {
        --Layout-content-width: 544px
    }

    .PageLayout .PageLayout-content-centered-md {
        --Layout-content-width: 768px
    }

    .PageLayout .PageLayout-content-centered-lg {
        --Layout-content-width: 1012px
    }

    .PageLayout .PageLayout-content-centered-xl {
        --Layout-content-width: 1280px
    }
}

@media(min-width: 768px)and (min-width: 544px) {
    .PageLayout {
        --Layout-pane-width: 220px
    }
}

@media(min-width: 768px)and (min-width: 768px) {
    .PageLayout {
        --Layout-pane-width: 256px
    }
}

@media(min-width: 768px)and (min-width: 1012px) {
    .PageLayout {
        --Layout-pane-width: 296px
    }
}

@media(min-width: 768px)and (min-width: 768px) {
    .PageLayout.PageLayout--paneWidth-narrow {
        --Layout-pane-width: 240px
    }
}

@media(min-width: 768px)and (min-width: 1012px) {
    .PageLayout.PageLayout--paneWidth-narrow {
        --Layout-pane-width: 256px
    }
}

@media(min-width: 768px)and (min-width: 1012px) {
    .PageLayout.PageLayout--paneWidth-wide {
        --Layout-pane-width: 320px
    }
}

@media(min-width: 768px)and (min-width: 1280px) {
    .PageLayout.PageLayout--paneWidth-wide {
        --Layout-pane-width: 336px
    }
}

@media(max-width: 767.98px) {
    .PageLayout.PageLayout--responsive-stackRegions {
        --Layout-template-columns: 1fr;
        --Layout-template-areas: "content" "pane"
    }

    .PageLayout.PageLayout--responsive-stackRegions.PageLayout--responsive-panePos-start {
        --Layout-template-areas: "pane" "content"
    }

    .PageLayout.PageLayout--responsive-separateRegions {
        --Layout-template-columns: 1fr;
        --Layout-template-areas: "content"
    }

    .PageLayout.PageLayout--responsive-separateRegions.PageLayout--responsive-primary-content {
        --Layout-template-areas: "content"
    }

    .PageLayout.PageLayout--responsive-separateRegions.PageLayout--responsive-primary-content .PageLayout-pane {
        display: none
    }

    .PageLayout.PageLayout--responsive-separateRegions.PageLayout--responsive-primary-pane {
        --Layout-template-areas: "pane"
    }

    .PageLayout.PageLayout--responsive-separateRegions.PageLayout--responsive-primary-pane .PageLayout-content {
        display: none
    }

    .PageLayout .PageLayout-region--dividerNarrow-line-before {
        position: relative;
        margin-top: var(--Layout-row-gap)
    }

    .PageLayout .PageLayout-region--dividerNarrow-line-before::before {
        position: absolute;
        left: calc(var(--Layout-outer-spacing-x)*-1);
        display: block;
        width: calc(100% + var(--Layout-outer-spacing-x)*2);
        height: 1px;
        content: "";
        background-color: var(--color-border-default);
        top: calc(-1px - var(--Layout-row-gap))
    }

    .PageLayout .PageLayout-region--dividerNarrow-line-after {
        position: relative;
        margin-bottom: var(--Layout-row-gap)
    }

    .PageLayout .PageLayout-region--dividerNarrow-line-after::after {
        position: absolute;
        left: calc(var(--Layout-outer-spacing-x)*-1);
        display: block;
        width: calc(100% + var(--Layout-outer-spacing-x)*2);
        height: 1px;
        content: "";
        background-color: var(--color-border-default);
        bottom: calc(-1px - var(--Layout-row-gap))
    }

    .PageLayout .PageLayout-region--dividerNarrow-filled-before {
        position: relative;
        margin-top: calc(8px + var(--Layout-row-gap))
    }

    .PageLayout .PageLayout-region--dividerNarrow-filled-before::after {
        position: absolute;
        bottom: calc(8px * -1);
        left: calc(var(--Layout-outer-spacing-x)*-1);
        display: block;
        width: calc(100% + var(--Layout-outer-spacing-x)*2);
        height: 8px;
        content: "";
        background-color: var(--color-canvas-inset);
        box-shadow: inset 0 1px var(--color-border-default), inset 0 -1px var(--color-border-default);
        top: calc(-8px - var(--Layout-row-gap))
    }

    .PageLayout .PageLayout-region--dividerNarrow-filled-after {
        position: relative;
        margin-bottom: calc(8px + var(--Layout-row-gap))
    }

    .PageLayout .PageLayout-region--dividerNarrow-filled-after::before {
        position: absolute;
        bottom: calc(8px * -1);
        left: calc(var(--Layout-outer-spacing-x)*-1);
        display: block;
        width: calc(100% + var(--Layout-outer-spacing-x)*2);
        height: 8px;
        content: "";
        background-color: var(--color-canvas-inset);
        box-shadow: inset 0 1px var(--color-border-default), inset 0 -1px var(--color-border-default);
        bottom: calc(-8px - var(--Layout-row-gap))
    }
}

.PageLayout-wrapper {
    display: grid;
    grid: auto-flow/1fr;
    row-gap: var(--Layout-row-gap)
}

.PageLayout-columns {
    display: grid;
    column-gap: var(--Layout-column-gap);
    row-gap: var(--Layout-row-gap);
    grid-template-columns: var(--Layout-template-columns);
    grid-template-rows: 1fr;
    grid-template-areas: var(--Layout-template-areas)
}

.PageLayout-columns .PageLayout-content {
    padding-right: var(--Layout-inner-spacing-max);
    padding-left: var(--Layout-inner-spacing-max);
    grid-area: content
}

.PageLayout-columns .PageLayout-pane {
    grid-area: pane
}

.PageLayout--outerSpacing-normal {
    --Layout-outer-spacing-x: 16px;
    --Layout-outer-spacing-y: 16px
}

@media(min-width: 1012px) {
    .PageLayout--outerSpacing-normal {
        --Layout-outer-spacing-x: 24px;
        --Layout-outer-spacing-y: 24px
    }
}

.PageLayout--outerSpacing-condensed {
    --Layout-outer-spacing-x: 16px;
    --Layout-outer-spacing-y: 16px
}

.PageLayout--innerSpacing-normal {
    --Layout-inner-spacing-min: 16px;
    --Layout-inner-spacing-max: 16px
}

@media(min-width: 1012px) {
    .PageLayout--innerSpacing-normal {
        --Layout-inner-spacing-max: 24px
    }
}

.PageLayout--innerSpacing-condensed {
    --Layout-inner-spacing-min: 16px;
    --Layout-inner-spacing-max: 16px
}

.PageLayout--columnGap-normal {
    --Layout-column-gap: 16px
}

@media(min-width: 1012px) {
    .PageLayout--columnGap-normal {
        --Layout-column-gap: 24px
    }
}

.PageLayout--columnGap-condensed {
    --Layout-column-gap: 16px
}

.PageLayout--columnGap-none {
    --Layout-column-gap: 0px
}

.PageLayout--rowGap-normal {
    --Layout-row-gap: 16px
}

@media(min-width: 1012px) {
    .PageLayout--rowGap-normal {
        --Layout-row-gap: 24px
    }
}

.PageLayout--rowGap-none {
    --Layout-row-gap: 0px
}

.PageLayout--rowGap-condensed {
    --Layout-row-gap: 16px
}

.PageLayout-header,
.PageLayout-content,
.PageLayout-pane,
.PageLayout-footer {
    padding: var(--Layout-inner-spacing-min)
}

.Stack {
    --Stack-gap-whenRegular: var(--primer-stack-gap-normal, 16px);
    --Stack-gap-whenNarrow: var(--primer-stack-gap-normal, 16px);
    --Stack-gap-whenWide: var(--Stack-gap-whenRegular);
    --Stack-divider-color: var(--color-border-default);
    display: flex;
    flex-flow: column;
    align-items: stretch;
    align-content: flex-start;
    gap: var(--Stack-gap-whenRegular)
}

@media(max-width: 767.98px) {
    .Stack {
        gap: var(--Stack-gap-whenNarrow)
    }
}

@media(min-width: 1400px) {
    .Stack {
        gap: var(--Stack-gap-whenWide)
    }
}

.Stack-divider {
    display: none;
    padding: 0;
    margin: 0;
    border: 0;
    align-self: stretch
}

.Stack-item {
    flex: 0 1 auto;
    min-inline-size: 0
}

@media(max-width: 767.98px) {
    .Stack--dir-inline-whenNarrow {
        flex-flow: row
    }

    .Stack--dir-block-whenNarrow {
        flex-flow: column
    }

    .Stack--gap-none-whenNarrow {
        --Stack-gap-whenNarrow: 0
    }

    .Stack--gap-condensed-whenNarrow {
        --Stack-gap-whenNarrow: var(--primer-stack-gap-condensed, 8px)
    }

    .Stack--gap-normal-whenNarrow {
        --Stack-gap-whenNarrow: var(--primer-stack-gap-normal, 16px)
    }

    .Stack--align-start-whenNarrow {
        align-items: flex-start
    }

    .Stack--align-center-whenNarrow {
        align-items: center
    }

    .Stack--align-end-whenNarrow {
        align-items: flex-end
    }

    .Stack--align-baseline-whenNarrow {
        align-items: baseline
    }

    .Stack--alignWrap-start-whenNarrow {
        align-content: flex-start
    }

    .Stack--alignWrap-center-whenNarrow {
        align-content: center
    }

    .Stack--alignWrap-end-whenNarrow {
        align-content: flex-end
    }

    .Stack--alignWrap-distribute-whenNarrow {
        align-content: space-between
    }

    .Stack--alignWrap-distributeEvenly-whenNarrow {
        align-content: space-evenly
    }

    .Stack--spread-start-whenNarrow {
        justify-content: flex-start
    }

    .Stack--spread-center-whenNarrow {
        justify-content: center
    }

    .Stack--spread-end-whenNarrow {
        justify-content: flex-end
    }

    .Stack--spread-distribute-whenNarrow {
        justify-content: space-between
    }

    .Stack--spread-distributeEvenly-whenNarrow {
        justify-content: space-evenly
    }

    .Stack--wrap-whenNarrow {
        flex-wrap: wrap
    }

    .Stack--nowrap-whenNarrow {
        flex-wrap: nowrap
    }

    .Stack--showDividers-whenNarrow>.Stack-divider,
    .Stack--showDividers-whenNarrow>.Stack-item>.Stack-divider {
        display: block
    }

    :not(.Stack--dir-inline-whenNarrow)>.Stack-divider,
    :not(.Stack--dir-inline-whenNarrow)>.Stack-item>.Stack-divider {
        border-block-end: var(--primer-borderWidth-thin, 1px) solid var(--Stack-divider-color);
        inline-size: auto;
        block-size: 0
    }

    .Stack--dir-inline-whenNarrow>.Stack-divider,
    .Stack--dir-inline-whenNarrow>.Stack-item>.Stack-divider {
        border-inline-end: var(--primer-borderWidth-thin, 1px) solid var(--Stack-divider-color);
        inline-size: 0;
        block-size: auto
    }

    .Stack-item--expand-whenNarrow {
        flex-grow: 1
    }

    .Stack-item--keepSize-whenNarrow {
        flex-shrink: 0
    }
}

@media(min-width: 768px) {
    .Stack--dir-inline-whenRegular {
        flex-flow: row
    }

    .Stack--dir-block-whenRegular {
        flex-flow: column
    }

    .Stack--gap-none-whenRegular {
        --Stack-gap-whenRegular: 0
    }

    .Stack--gap-condensed-whenRegular {
        --Stack-gap-whenRegular: var(--primer-stack-gap-condensed, 8px)
    }

    .Stack--gap-normal-whenRegular {
        --Stack-gap-whenRegular: var(--primer-stack-gap-normal, 16px)
    }

    .Stack--gap-spacious-whenRegular {
        --Stack-gap-whenRegular: var(--primer-stack-gap-spacious, 24px)
    }

    .Stack--align-start-whenRegular {
        align-items: flex-start
    }

    .Stack--align-center-whenRegular {
        align-items: center
    }

    .Stack--align-end-whenRegular {
        align-items: flex-end
    }

    .Stack--align-baseline-whenRegular {
        align-items: baseline
    }

    .Stack--alignWrap-start-whenRegular {
        align-content: flex-start
    }

    .Stack--alignWrap-center-whenRegular {
        align-content: center
    }

    .Stack--alignWrap-end-whenRegular {
        align-content: flex-end
    }

    .Stack--alignWrap-distribute-whenRegular {
        align-content: space-between
    }

    .Stack--alignWrap-distributeEvenly-whenRegular {
        align-content: space-evenly
    }

    .Stack--spread-start-whenRegular {
        justify-content: flex-start
    }

    .Stack--spread-center-whenRegular {
        justify-content: center
    }

    .Stack--spread-end-whenRegular {
        justify-content: flex-end
    }

    .Stack--spread-distribute-whenRegular {
        justify-content: space-between
    }

    .Stack--spread-distributeEvenly-whenRegular {
        justify-content: space-evenly
    }

    .Stack--wrap-whenRegular {
        flex-wrap: wrap
    }

    .Stack--nowrap-whenRegular {
        flex-wrap: nowrap
    }

    .Stack--showDividers-whenRegular>.Stack-divider,
    .Stack--showDividers-whenRegular>.Stack-item>.Stack-divider {
        display: block
    }

    :not(.Stack--dir-inline-whenRegular)>.Stack-divider,
    :not(.Stack--dir-inline-whenRegular)>.Stack-item>.Stack-divider {
        border-block-end: var(--primer-borderWidth-thin, 1px) solid var(--Stack-divider-color);
        inline-size: auto;
        block-size: 0
    }

    .Stack--dir-inline-whenRegular>.Stack-divider,
    .Stack--dir-inline-whenRegular>.Stack-item>.Stack-divider {
        border-inline-end: var(--primer-borderWidth-thin, 1px) solid var(--Stack-divider-color);
        inline-size: 0;
        block-size: auto
    }

    .Stack-item--expand-whenRegular {
        flex-grow: 1
    }

    .Stack-item--keepSize-whenRegular {
        flex-shrink: 0
    }
}

@media(min-width: 1400px) {
    .Stack--dir-inline-whenWide {
        flex-flow: row
    }

    .Stack--dir-block-whenWide {
        flex-flow: column
    }

    .Stack--gap-none-whenWide {
        --Stack-gap-whenWide: 0
    }

    .Stack--gap-condensed-whenWide {
        --Stack-gap-whenWide: var(--primer-stack-gap-condensed, 8px)
    }

    .Stack--gap-normal-whenWide {
        --Stack-gap-whenWide: var(--primer-stack-gap-normal, 16px)
    }

    .Stack--gap-spacious-whenWide {
        --Stack-gap-whenWide: var(--primer-stack-gap-spacious, 24px)
    }

    .Stack--align-start-whenWide {
        align-items: flex-start
    }

    .Stack--align-center-whenWide {
        align-items: center
    }

    .Stack--align-end-whenWide {
        align-items: flex-end
    }

    .Stack--align-baseline-whenWide {
        align-items: baseline
    }

    .Stack--alignWrap-start-whenWide {
        align-content: flex-start
    }

    .Stack--alignWrap-center-whenWide {
        align-content: center
    }

    .Stack--alignWrap-end-whenWide {
        align-content: flex-end
    }

    .Stack--alignWrap-distribute-whenWide {
        align-content: space-between
    }

    .Stack--alignWrap-distributeEvenly-whenWide {
        align-content: space-evenly
    }

    .Stack--spread-start-whenWide {
        justify-content: flex-start
    }

    .Stack--spread-center-whenWide {
        justify-content: center
    }

    .Stack--spread-end-whenWide {
        justify-content: flex-end
    }

    .Stack--spread-distribute-whenWide {
        justify-content: space-between
    }

    .Stack--spread-distributeEvenly-whenWide {
        justify-content: space-evenly
    }

    .Stack--wrap-whenWide {
        flex-wrap: wrap
    }

    .Stack--nowrap-whenWide {
        flex-wrap: nowrap
    }

    .Stack--showDividers-whenWide>.Stack-divider,
    .Stack--showDividers-whenWide>.Stack-item>.Stack-divider {
        display: block
    }

    :not(.Stack--dir-inline-whenWide)>.Stack-divider,
    :not(.Stack--dir-inline-whenWide)>.Stack-item>.Stack-divider {
        border-block-end: var(--primer-borderWidth-thin, 1px) solid var(--Stack-divider-color);
        inline-size: auto;
        block-size: 0
    }

    .Stack--dir-inline-whenWide>.Stack-divider,
    .Stack--dir-inline-whenWide>.Stack-item>.Stack-divider {
        border-inline-end: var(--primer-borderWidth-thin, 1px) solid var(--Stack-divider-color);
        inline-size: 0;
        block-size: auto
    }

    .Stack-item--expand-whenWide {
        flex-grow: 1
    }

    .Stack-item--keepSize-whenWide {
        flex-shrink: 0
    }
}