.Body {
    /* In order to allow Body_content to take up remaining available space. */
    display: flex;
    flex-direction: column;
    background-color: var(--color-bg-default);

    /* This ensures there is no empty space at the bottom of the page. */
    min-height: 100vh;
}
    .Body_content {
        /*
           The main content of the page should take up all remaining space.
           This prevents an empty space from rendering at the bottom of the page when there is not enough
           content on the page to fill the screen.
           This is especially important when a footer is present as the last element on the page.
       */
        flex: auto;

        /* Allows for children to match the height of this element as necessary via flex: auto */
        display: flex;
        flex-direction: column;

        /* Absolutely positioned children should be positioned against the main content. */
        position: relative;
    }

.Header {
    background-color: var(--color-bg-default);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
    z-index: var(--z-header);
}

.Subhead {
    display: flex;
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border-emphasis);
    margin-bottom: var(--space-4);
    flex-flow: row wrap;
}
    .Subhead_heading {
        flex: auto;
        color: var(--color-primary);
    }
    .Subhead_description {
        flex: 1 100%;
        color: var(--color-fg-muted);
    }
    .Subhead_actions {
        align-self: center;
    }

.Label {
    color: var(--control-label-color-fg);
    font-size: var(--fs-f4);
    line-height: var(--fs-f4-lh);
    font-weight: 500;
}
    .Label--sm {
        font-size: var(--fs-f5);
        line-height: var(--fs-f5-lh);
    }
    .Label--required {
        padding-right: var(--space-2);
    }
    .Label--required:after {
        position: absolute;
        content: '*';
        color: var(--color-fg-danger);
    }

.FormGroup {
    /* Prevent a set width from ever making this bleed outside of its container. */
    max-width: 100%;

    /* Prevent item bleed when used in a grid layout. */
    min-width: 0;

    /* Fieldset resets. */
    padding: 0;
    border: 0;
}
    .FormGroup > input, .FormGroup > select {
        display: block;
    }
    .FormGroup_header {
        display: inline-block;
        vertical-align: top;
        font-size: var(--fs-f4);
        line-height: var(--fs-f4-lh);
        font-weight: 500;
        color: var(--control-label-color-fg);
        margin-bottom: var(--space-1);
    }
    label.FormGroup_header {
        display: inline-block;
    }
    .FormGroup_help {
        font-size: var(--fs-f5);
        line-height: var(--fs-f5-lh);
        color: var(--control-label-color-fg);
        margin-top: var(--space-1);
    }

.InputGroup {
    --input-group-input-overlay-width: var(--space-10);
    display: flex;
    max-width: 100%;
}
    .InputGroup.is-overlay-left .InputGroup_input input {
        padding-left: var(--input-group-input-overlay-width, initial);
    }
    .InputGroup.is-overlay-right .InputGroup_input input {
        padding-right: var(--input-group-input-overlay-width, initial);
    }
    .InputGroup_inputOverlay {
        display: flex;
        align-items: center;
        position: absolute;
        top: 0;
        height: 100%;
        padding: 0 var(--space-2);
        width: var(--input-group-input-overlay-width);
        pointer-events: none;
        z-index: var(--z-active);
    }
    .InputGroup_inputOverlay--left {
        left: 0;
    }
    .InputGroup_inputOverlay--right {
        right: 0;
    }
    .InputGroup_input {
        flex: auto;
        display: flex;
        align-items: center;
        position: relative;
    }
    .InputGroup_input > input {
        flex: auto;
    }
    .InputGroup_btn {
        margin-left: var(--space-1);
        border: 1px solid var(--control-color-border);
    }

.Link {}
    .Link--muted {
        color: var(--color-fg-muted);
        text-decoration: underline;
    }
    .Link--primary {
        color: var(--link-color-fg);
        font-weight: 600;
        text-decoration: none;
        transition: opacity linear 0.2s;
    }
    .Link--primary:after {
        color: var(--color-fg-muted);
        content: ">";
        margin-left: var(--space-2);
    }
    .Link--primary:hover:not(.Link--disabled) {
        opacity: var(--o-50);
    }
    .Link--block {
        display: flex;
        align-items: center;
        padding: var(--space-4);
        gap: var(--space-2);
        transition: background-color linear 0.2s;
    }
    .Link--block:hover:not(.Link--disabled) {
        background-color: rgba(var(--gray-3-rgb), 0.25);
    }
    .Link--disabled {
        cursor: not-allowed;
        color: var(--color-fg-muted);
        opacity: var(--o-50);
    }

    .Link_label {
        cursor: pointer;
        flex: auto;
    }
    .Link--disabled .Link_label {
        cursor: not-allowed;
    }

    .Link_icon {
        flex-shrink: 0;
        color: var(--color-fg-default);
        cursor: pointer;
    }
    /* --disabled should take precedence over other variants. */
    .Link--disabled .Link_icon {
        color: var(--color-fg-muted);
        cursor: not-allowed;
    }
@media (min-width: 768px) {
    .Link--block {
        padding: var(--space-2) var(--space-4);
    }
}

.Backdrop {
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, var(--o-50));
    z-index: var(--z-active);
}
    .Backdrop--light {
        background-color: rgba(255, 255, 255, var(--o-50));
    }

.TabularData, r-table table {
    border-collapse: separate;
    border-spacing: 0;
    text-align: left;
    width: 100%;
}
    .TabularData thead tr, r-table thead tr {
        border-top: 1px solid var(--table-color-border);
        z-index: var(--z-table-header);
    }
    .TabularData thead th, r-table thead th {
        border-top: 1px solid var(--table-color-border);
        border-bottom: 1px solid var(--table-color-border);
        background-color: var(--gray-1);
    }
    r-table thead th {
        vertical-align: bottom;
    }
    .TabularData th, .TabularData td, r-table th, r-table td {
        border-right: 1px solid var(--table-color-border);

        /* Necessary for supporting sticky table cells - otherwise the borders disappear. */
        background-clip: padding-box;
    }
    .TabularData th:first-child, .TabularData td:first-child, r-table th:first-child, r-table td:first-child {
        border-left: 1px solid var(--table-color-border);
    }
    .TabularData th:last-child, .TabularData td:last-child, r-table th:last-child, r-table td:last-child {
        border-right: 1px solid var(--table-color-border);
    }
    .TabularData tr, r-table tr {
        transition: background-color 0.2s linear;
        background-color: var(--table-color-bg);
        border-bottom: 1px solid var(--table-row-color-border);
    }
    .TabularData td, r-table td {
        border-bottom: 1px solid var(--table-row-color-border);
        /* An explicit background color assignment to ensure cells aren't transparent, which is important in cases such
        as sticky cells. */
        background-color: inherit;
    }

    .TabularData--comfortable th, .TabularData--comfortable td, r-table[spacing="comfy"] th, r-table[spacing="comfy"] td {
        padding: var(--space-2);
    }
    .TabularData--cozy th, .TabularData--cozy td, r-table[spacing="cozy"] th, r-table[spacing="cozy"] td {
        padding: var(--space-1) var(--space-2);
    }
    .TabularData--compact th, .TabularData--compact td, r-table[spacing="compact"] th, r-table[spacing="compact"] td {
        padding: 0 var(--space-2);
    }

    /* Only apply shadows when table is overflowing, in order to indicate scroll-ability. */
    r-table .sticky.left-0.is-overflowing {
        box-shadow: -8px 0 8px 8px rgba(0,0,0,0.5);
        clip-path: inset(0px -24px 0px 0px);
    }
    r-table .sticky.right-0.is-overflowing {
        box-shadow: 8px 0 8px 8px rgba(0,0,0,0.5);
        clip-path: inset(0px 0px 0px -24px);
    }

    .TabularData--simple, r-table[variant="simple"] table {
        border: none;
    }
    .TabularData--simple thead th, r-table[variant="simple"] thead th {
        border: none;
        border-bottom: 1px solid var(--table-color-border);
        background-color: var(--table-color-bg);
    }
    .TabularData--simple tbody td, r-table[variant="simple"] tbody td  {
        background-color: var(--table-color-bg);
    }
    .TabularData--simple tbody td, r-table[variant="simple"] tbody td  {
        border: none;
        background-color: inherit;
    }
    .TabularData--simple thead tr th:first-child, .TabularData--simple tbody tr td:first-child, r-table[variant="simple"] th:first-child, r-table[variant="simple"] td:first-child {
        border-left: 0;
    }
    .TabularData--simple thead tr th:last-child, .TabularData--simple tbody tr td:last-child, r-table[variant="simple"] th:last-child, r-table[variant="simple"] td:last-child {
        border-right: 0;
    }
    .TabularData--simple tr, r-table[variant="simple"] tr {
        border: none;
    }
    .TabularData--simple tbody tr:not(:last-child) td, r-table[variant="simple"] tr:not(:last-child) td {
        border-bottom: 1px solid var(--table-row-simple-color-border);
    }

    .TabularData--highlight tbody tr:hover, .TabularData--highlight tbody tr:hover, r-table[highlighted] tbody tr:hover {
        --table-color-bg: var(--red-1);
    }

.OverflowFade {
    overflow: auto;
    mask: linear-gradient(to right, transparent 0, black var(--left-mask-size, 0px), black calc(100% - var(--right-mask-size, 0px)), transparent 100%)
}
    .OverflowFade.is-left-overflowing {
        --left-mask-size: 48px;
    }
    .OverflowFade.is-right-overflowing {
        --right-mask-size: 48px;
    }
    .OverflowFade--no-left-fade {
        --left-mask-size: 0px !important;
    }

@media print {
    /** Not compatible with printing. **/
	.OverflowFade {
		mask: none !important;
	}
}

.Pagination {
    display: flex;
    gap: var(--space-1);
    justify-content: center;
    width: 100%;
    font-size: var(--fs-f5);
    line-height: var(--fs-f5-lh);
}
    .Pagination_items {
        display: flex;
        flex-shrink: 0;
        align-items: center;
        max-width: 100%;
    }
    .Pagination_item {
        display: flex;
        align-items: center;
        transition: background-color .1s linear;
        padding: var(--space-2);
    }
    .Pagination_item.is-active {
        background-color: var(--color-primary-light);
        color: var(--color-fg-default-contrast);
        cursor: default;
    }
    .Pagination_item.is-disabled {
        cursor: default;
        color: var(--control-color-fg-disabled);
    }
    .Pagination_item:hover:not(.is-disabled,.is-active) {
        cursor: pointer;
        background-color: var(--gray-1);
    }
    .Pagination_item--page {
        color: var(--color-fg-default);
    }
@media (min-width: 768px) {
.Pagination {
    font-size: inherit;
    line-height: inherit;
}
    .Pagination_items {
        flex-wrap: wrap;
    }
    .Pagination_item {
        padding: var(--space-2) var(--space-4);
    }
    .Pagination_item--page {
        display: block;
        color: var(--color-fg-default);
    }
}

.Box {
    background-color: var(--color-bg-default);
    border-color: var(--color-border-default);
    border-width: 1px;
    border-style: solid;
}
    .Box_header {
        padding: var(--box-padding-y) var(--box-padding-x);
        background: var(--color-bg-muted);
        font-weight: bold;
    }

    .Box_header--primary {
        background: var(--color-primary);
        color: var(--color-fg-default-contrast);
    }
    .Box_header--secondary {
        background: var(--gray-9);
        color: var(--color-fg-default-contrast);
    }

    .Box_body {
        padding: var(--box-padding-y) var(--box-padding-x);
    }

    .Box_rows {
        position: relative;
        border-color: var(--color-border-muted);
    }
    .Box_rows > *:not(:last-child) {
        border-bottom: 1px solid var(--color-border-muted);
    }

    .Box_row {
        padding: var(--box-padding-y) var(--box-padding-x);
    }

.Divider {
    border-bottom: 1px solid var(--color-border-default);
}
    .Divider--subtle {
        border-color: var(--color-border-muted);
    }

.Loading {
    border: 0.25rem solid transparent;
    border-top: 0.25rem solid var(--color-primary);
    border-radius: 50%;
    width: var(--space-4);
    height: var(--space-4);
    animation: spin 2s linear infinite;
}
    .Loading--contrast {
        border: 0.25rem solid transparent;
        border-top: 0.25rem solid white;
    }

.DescList {}
    .DescList > :not(:last-child) {
        border-bottom: 1px solid var(--color-border-muted);
    }
    .DescList_label {
        background-color: var(--color-bg-muted);
        font-weight: 500;
        padding: var(--space-1) var(--box-padding-x);
    }
    .DescList_value {
        padding: var(--space-1) var(--box-padding-x);
    }

.List {
    list-style: none;
    margin: 0;
    padding: 0;
}
    .List > *:not(:last-child), r-list > *:not(:last-child) {
        border-bottom: 1px solid var(--color-border-muted);
    }
    .List_item {
        padding: var(--space-2) var(--space-4);
        transition: background-color linear 0.2s;
    }
    .List--condensed .List_item, r-list[spacing="condensed"] r-list-item::part(base) {
        padding: var(--space-1) var(--space-4);
    }

    .List_item--link {
        display: block;
        color: var(--color-fg-default);
    }
    .List_item--linkDisabled {
        color: var(--color-fg-muted);
    }
    .List_item--link:hover:not(.List_item--linkDisabled) {
        background-color: var(--gray-1);
    }
    .List_item--button {
        display: flex;
        align-items: center;
        text-align: left;
        width: 100%;
        height: 100%;
    }
    .List_item--button:hover:not(.List_item--buttonDisabled) {
        background-color: var(--gray-1);
    }

.Prose {}
    .Prose * {
        margin-bottom: var(--space-3);
    }
    .Prose *:last-child {
        margin-bottom: 0;
    }
    .Prose * + h2 {
        margin-top: var(--space-8);
    }
    .Prose * + h3 {
        margin-top: var(--space-6);
    }
    .Prose ul {
        list-style: disc;
    }
    .Prose li {
        margin-bottom: var(--space-1);
    }
    .Prose pre {
        margin-top: 0;
    }

.FormSections {
    display: grid;
    gap: var(--space-12);
}
    .FormSections > *:not(:last-child) {
        padding-bottom: var(--space-12);
        border-bottom: 1px solid var(--color-border-default);
    }
    .FormSections--sm {
        gap: var(--space-8);
    }
    .FormSections--sm > *:not(:last-child) {
        padding-bottom: var(--space-8);
        border-bottom: 1px solid var(--color-border-default);
    }


.PageSections {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
}

r-scroll-top-btn {
    --color-bg-scroll-top: var(--color-primary);
    --color-bg-scroll-top-hover: var(--red-7);
    --scroll-top-btn-z-index: var(--z-active);
}