.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;
    }

.SidebarLayout {}
    .SidebarLayout_main {
        /* Children that are absolutely positioned should treat this container as its ultimate parent. */
        position: relative;
    }
    .SidebarLayout_sidebar {
        display: none;
    }

@media (min-width: 768px) {
    .SidebarLayout {
        display: grid;
        grid-auto-flow: column;
        grid-template-columns: auto minmax(0, calc(100% - var(--sidebar-width)));
    }
    .SidebarLayout_main {
        /* Children that are absolutely positioned should treat this container as its ultimate parent. */
        position: relative;

        min-width: 0;
        grid-column: 2;
    }
    .SidebarLayout_sidebar {
        position: revert;
        display: block;
        background-color: var(--color-layout-sidebar-background);
        width: var(--sidebar-width);
        grid-column: 1;
        box-shadow: none;
        min-height: calc(100vh - var(--sidebar-top-offset, 0px));
    }
    .SidebarLayout_sidebar > * {
        position: sticky;
        top: var(--sidebar-top-offset, 0px);
        max-height: calc(100vh - var(--sidebar-top-offset, 0px));
    }
}

.Header {
    display: flex;
    background-color: var(--color-bg-default);
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);

    position: relative;
    width: 100%;

    z-index: var(--z-nav);
}
    .Header_menuItem {
        position: relative;
        color: var(--color-header-menu-link);
    }
    /*
        Provides an alternative underline styling.
        This should match the result of .animate-underline.
    */
    .Header_menuItem.is-active:not(.Header_menuItem--noActive):before {
        content: "";
        position: absolute;
        width: 100%;
        height: 2px;
        bottom: -4px;
        left: 0;
        background-color: var(--color-header-menu-link-active);
        visibility: visible;
        transform: scaleX(1);
    }
    .Header_menuSubItem {
        color: var(--color-header-menu-link);
    }
    .Header_menuSubItem.is-active {
        color: var(--color-header-menu-link-active);
    }
    .Header_menuSubDivider {
        width: 100%;
        border: 1px solid var(--gray-1);
    }

.HeaderDrawer {
    padding: var(--space-8);
}
    .HeaderDrawer_items {
        display: grid;
        justify-content: end;
        gap: var(--space-8);
        text-align: right;
    }
    .HeaderDrawer_item {
        color: var(--color-header-menu-link);
    }
    .HeaderDrawer_item.is-active {
        color: var(--color-header-menu-link-active);
    }
    .HeaderDrawer_expandable {
        display: grid;
        justify-content: end;
        gap: var(--space-4);
    }
    .HeaderDrawer_subItems {
        display: none;
    }
    .HeaderDrawer_subItems.is-open {
        display: grid;
        justify-content: end;
        gap: var(--space-4);
    }
    .HeaderDrawer_subItem {
        color: var(--color-header-menu-link);
    }
    .HeaderDrawer_subItem.is-active {
        color: var(--color-header-menu-link-active);
    }

.Subhead {
    display: flex;
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-fg-subtle);
    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(--color-form-text);
    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-danger);
    }

.Label {
    color: var(--color-form-text);
    font-size: var(--fs-f5);
    line-height: var(--fs-f5-lh);
}
    .Label--required {
        padding-right: var(--space-2);
    }
    .Label--required:after {
        content: '*';
        color: var(--color-danger);

        position: absolute;
    }

.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-f5);
        line-height: var(--fs-f5-lh);
        color: var(--color-form-text);
        margin-bottom: var(--space-1);
    }
    label.FormGroup_header {
        display: inline-block;
    }
    .FormGroup_help {
        font-size: var(--fs-f6);
        line-height: var(--fs-f6-lh);
        color: var(--color-form-text);
        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 {
        border-radius: 0;
        border: 1px solid var(--color-input-border);
    }

.Link {
    color: var(--color-link);
    text-decoration: none;
}
    .Link:hover {
        text-decoration: underline;
    }
    .Link--primary {
        color: var(--color-link);
        font-weight: 600;
        text-decoration: none;
        transition: opacity linear 0.2s;
    }
    .Link--primary:after {
        color: var(--color-fg-subtle);
        content: ">";
        margin-left: var(--space-2);
    }
    .Link--primary:hover {
        opacity: 0.5;
        text-decoration: none;
    }
    .Link--secondary {
        color: var(--color-link-secondary);
        text-decoration: underline;
        transition: opacity linear 0.2s;
    }
    .Link--secondary:hover:not(.Link--disabled) {
        opacity: 0.5;
    }
    .Link--block {
        display: flex;
        align-items: center;
        padding: var(--space-4);
        transition: background-color linear 0.2s;
    }
    .Link--block:hover:not(.Link--disabled) {
        background-color: var(--color-bg-subtle);
    }
    .Link--disabled {
        cursor: not-allowed;
        color: var(--color-fg-muted);
    }

    .Link_label {
        cursor: pointer;
        flex: auto;
        margin-right: 8px;
    }
    .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 {
    border-collapse: collapse;
    text-align: left;
    border-top: 1px solid var(--color-tabular-border);
}
    .TabularData thead tr {
        background-color: var(--gray-1);
    }
    .TabularData thead tr th, .TabularData tbody tr td {
        border-right: 1px solid var(--color-tabular-border);

        /* Necessary for supporting sticky table cells - otherwise the borders disappear. */
        background-clip: padding-box;
    }
    .TabularData thead tr th:first-child, .TabularData tbody tr td:first-child {
        border-left: 1px solid var(--color-tabular-border);
    }
    .TabularData thead tr th:last-child, .TabularData tbody tr td:last-child {
        border-right: 1px solid var(--color-tabular-border);
    }
    .TabularData tr {
        border-bottom: 1px solid var(--color-tabular-row-border);
        transition: background-color 0.2s linear;
    }
    .TabularData:not(.TabularData--simple) tbody tr:hover {
        background-color: var(--red-0);
    }

    .TabularData--comfortable th, .TabularData--comfortable td {
        padding: var(--space-2);
    }

    .TabularData--cozy th, .TabularData--cozy td {
        padding: var(--space-1) var(--space-2);
    }

    .TabularData--compact th, .TabularData--compact td {
        padding: 0 var(--space-2);
    }

    .TabularData .TabularData_sticky {
        position: sticky;
        left: 0;
        background-color: var(--color-bg-default);
    }
    .TabularData:not(.TabularData--simple) .TabularData_sticky:after {
        content: "";
        border-right: 1px solid var(--color-tabular-border);
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
    }
    .TabularData .TabularData_sticky.TabularData_sticky--right {
        left: auto;
        right: 0;
    }

    .TabularData--simple {
        border: none;
    }
    .TabularData--simple thead tr {
        border-bottom: 1px solid var(--color-tabular-border);
        background-color: transparent;
    }
    .TabularData--simple thead tr th, .TabularData--simple tbody tr td  {
        border: none;
    }
    .TabularData--simple thead tr th:first-child, .TabularData--simple tbody tr td:first-child {
        border-left: 0;
    }
    .TabularData--simple thead tr th:last-child, .TabularData--simple tbody tr td:last-child {
        border-right: 0;
    }
    .TabularData--simple tr {
        border: none;
    }
    .TabularData--simple tbody tr:not(:last-child) {
        border-bottom: 1px solid var(--color-tabular-row-border-simple);
    }

    .TabularData--highlight tbody tr:hover, .TabularData--highlight tr.is-highlighted {
        background-color: var(--red-0) !important;
    }

.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(--color-fg-subtle);
    }
    .Pagination_item:hover:not(.is-disabled,.is-active) {
        cursor: pointer;
        background-color: var(--gray-1);
    }
    .Pagination_item--page {
        color: var(--color-fg-default);
    }
    .Pagination_item--page {
        display: none;
    }
@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-box-border);
    border-width: 1px;
    border-style: solid;
}
    .Box_header {
        padding: var(--box-padding-y) var(--box-padding-x);
        background: var(--color-box-header);
        font-weight: bold;
    }

    .Box_header--primary {
        background: var(--color-box-header-primary);
        color: var(--color-fg-default-contrast);
    }
    .Box_header--secondary {
        background: var(--color-box-header-secondary);
        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-box-row-border);
    }
    .Box_rows > *:not(:last-child) {
        border-bottom: 1px solid var(--color-box-row-border);
    }

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

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

.Loading {
    border: 0.25rem solid transparent;
    border-top: 0.25rem solid var(--color-loading);
    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;
    }

.DataList {}
    .DataList > :not(:last-child) {
        border-bottom: 1px solid var(--color-data-list-item-border);
    }
    .DataList_label {
        background-color: var(--color-bg-data-list-label);
        font-weight: 500;
        padding: var(--space-1) var(--data-list-padding-x);
    }
    .DataList_value {
        padding: var(--space-1) var(--data-list-padding-x);
    }