:root {
    --ak-accent: #3873e0;

    --navbar-height: 114px;

    --ak-dark-foreground: #fafafa;
    --ak-dark-foreground-darker: #bebebe;
    --ak-dark-foreground-link: #5a5cb9;
    --ak-dark-background: #18191a;
    --ak-dark-background-darker: #000000;
    --ak-dark-background-light: #1c1e21;
    --ak-dark-background-light-ish: #212427;
    --ak-dark-background-lighter: #2b2e33;

    --pf-c-background-image--BackgroundImage: var(--ak-flow-background);
    --pf-c-background-image--BackgroundImage-2x: var(--ak-flow-background);
    --pf-c-background-image--BackgroundImage--sm: var(--ak-flow-background);
    --pf-c-background-image--BackgroundImage--sm-2x: var(--ak-flow-background);
    --pf-c-background-image--BackgroundImage--lg: var(--ak-flow-background);
}

html {
    --pf-c-nav__link--PaddingTop: 0.5rem;
    --pf-c-nav__link--PaddingRight: 0.5rem;
    --pf-c-nav__link--PaddingBottom: 0.5rem;
    --pf-c-nav__link--PaddingLeft: 0.5rem;
}

html > form > input {
    position: absolute;
    top: -2000px;
    left: -2000px;
}

.pf-c-page__header {
    z-index: 0;
    background-color: var(--ak-dark-background-light);
    box-shadow: var(--pf-global--BoxShadow--lg-bottom);
}

/*****************************
* Login adjustments
*****************************/
/* Ensure card is displayed on small screens */
.pf-c-login__main {
    display: block;
    position: relative;
    width: 100%;
}
.ak-login-container {
    height: calc(100vh - var(--pf-global--spacer--lg) - var(--pf-global--spacer--lg));
    width: 35rem;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}
.pf-c-login__header {
    flex-grow: 1;
}
.pf-c-login__footer {
    flex-grow: 2;
}
.pf-c-login__footer ul.pf-c-list.pf-m-inline {
    justify-content: center;
}
/*****************************
* End Login adjustments
*****************************/

.pf-c-content h1 {
    display: flex;
    align-items: flex-start;
}
.pf-c-content h1 i {
    font-style: normal;
}
.pf-c-content h1 :first-child {
    margin-right: var(--pf-global--spacer--sm);
}

/* ensure background on non-flow pages match */
.pf-c-background-image::before {
    background-image: var(--ak-flow-background);
    background-position: center;
}

.pf-m-success {
    color: var(--pf-global--success-color--100) !important;
}
.pf-m-warning {
    color: var(--pf-global--warning-color--100);
}
.pf-m-danger {
    color: var(--pf-global--danger-color--100);
}

.form-help-text {
    color: var(--pf-global--Color--100);
}

/* Fix alignment issues with images in tables */
.pf-c-table tbody > tr > * {
    vertical-align: middle;
}

.pf-c-description-list__description .pf-c-button {
    margin-right: 6px;
    margin-bottom: 6px;
}

@media (prefers-color-scheme: light) {
    .pf-c-page__sidebar {
        color: var(--pf-global--Color--100);
        --pf-c-page__sidebar--BackgroundColor: var(--pf-c-page__sidebar--m-light--BackgroundColor);
        border-right: 0px solid transparent;
    }
    .pf-c-nav {
        --pf-c-nav__item--before--BorderColor: var(--pf-c-nav--m-light__item--before--BorderColor);
        --pf-c-nav__item--m-current--not--m-expanded__link--BackgroundColor: var(
            --pf-c-nav--m-light__item--m-current--not--m-expanded__link--BackgroundColor
        );
        --pf-c-nav__link--Color: var(--pf-c-nav--m-light__link--Color);
        --pf-c-nav__link--hover--Color: var(--pf-c-nav--m-light__link--hover--Color);
        --pf-c-nav__link--focus--Color: var(--pf-c-nav--m-light__link--focus--Color);
        --pf-c-nav__link--active--Color: var(--pf-c-nav--m-light__link--active--Color);
        --pf-c-nav__link--m-current--Color: var(--pf-c-nav--m-light__link--m-current--Color);
        --pf-c-nav__link--hover--BackgroundColor: var(
            --pf-c-nav--m-light__link--hover--BackgroundColor
        );
        --pf-c-nav__link--focus--BackgroundColor: var(
            --pf-c-nav--m-light__link--focus--BackgroundColor
        );
        --pf-c-nav__link--active--BackgroundColor: var(
            --pf-c-nav--m-light__link--active--BackgroundColor
        );
        --pf-c-nav__link--m-current--BackgroundColor: var(
            --pf-c-nav--m-light__link--m-current--BackgroundColor
        );
        --pf-c-nav__link--before--BorderColor: var(--pf-c-nav--m-light__link--before--BorderColor);
        --pf-c-nav__link--after--BorderColor: var(--pf-c-nav--m-light__link--after--BorderColor);
        --pf-c-nav__link--m-current--after--BorderColor: var(
            --pf-c-nav--m-light__link--m-current--after--BorderColor
        );
        --pf-c-nav__subnav__link--hover--after--BorderColor: var(
            --pf-c-nav--m-light__subnav__link--hover--after--BorderColor
        );
        --pf-c-nav__subnav__link--focus--after--BorderColor: var(
            --pf-c-nav--m-light__subnav__link--focus--after--BorderColor
        );
        --pf-c-nav__subnav__link--active--after--BorderColor: var(
            --pf-c-nav--m-light__subnav__link--active--after--BorderColor
        );
        --pf-c-nav__subnav__link--m-current--after--BorderColor: var(
            --pf-c-nav--m-light__subnav__link--m-current--after--BorderColor
        );
        --pf-c-nav__section-title--Color: var(--pf-c-nav--m-light__section-title--Color);
        --pf-c-nav__section-title--BorderBottomColor: var(
            --pf-c-nav--m-light__section-title--BorderBottomColor
        );
    }
}

@media (prefers-color-scheme: dark) {
    .ak-static-page h1 {
        color: var(--ak-dark-foreground);
    }
    body {
        background-color: var(--ak-dark-background) !important;
    }
    :root {
        --pf-global--Color--100: var(--ak-dark-foreground);
        --pf-c-page__main-section--m-light--BackgroundColor: var(--ak-dark-background-darker);
        --pf-global--link--Color: var(--ak-dark-foreground-link);
        --pf-c-radio__label--Color: var(--ak-dark-foreground-link);
        --pf-global--BorderColor--100: var(--ak-dark-background-lighter) !important;
    }
    /* Global page background colour */
    .pf-c-page {
        --pf-c-page--BackgroundColor: var(--ak-dark-background);
    }
    .pf-c-drawer__content {
        --pf-c-drawer__content--BackgroundColor: var(--ak-dark-background);
    }
    .pf-c-title {
        color: var(--ak-dark-foreground);
    }
    .pf-u-mb-xl {
        color: var(--ak-dark-foreground);
    }
    /* Header sections */
    .pf-c-page__main-section {
        --pf-c-page__main-section--BackgroundColor: var(--ak-dark-background);
    }
    .sidebar-trigger,
    .notification-trigger {
        background-color: transparent !important;
    }
    .pf-c-content {
        color: var(--ak-dark-foreground);
    }
    /* Card */
    .pf-c-card {
        --pf-c-card--BackgroundColor: var(--ak-dark-background-light);
        color: var(--ak-dark-foreground);
    }
    .pf-c-card__title,
    .pf-c-card__body {
        color: var(--ak-dark-foreground);
    }
    .pf-c-toolbar {
        --pf-c-toolbar--BackgroundColor: var(--ak-dark-background-light);
    }
    .pf-c-pagination.pf-m-bottom {
        background-color: var(--ak-dark-background-light);
    }
    /* table */
    .pf-c-table {
        --pf-c-table--BackgroundColor: var(--ak-dark-background-light);
        --pf-c-table--BorderColor: var(--ak-dark-background-lighter);
        --pf-c-table--cell--Color: var(--ak-dark-foreground);
    }
    .pf-c-table__text {
        color: var(--ak-dark-foreground);
    }
    .pf-c-table__sort:not(.pf-m-selected) .pf-c-table__button .pf-c-table__text {
        color: var(--ak-dark-foreground) !important;
    }
    .pf-c-table__sort-indicator i {
        color: var(--ak-dark-foreground) !important;
    }
    .pf-c-table__expandable-row.pf-m-expanded {
        --pf-c-table__expandable-row--m-expanded--BorderBottomColor: var(
            --ak-dark-background-lighter
        );
    }
    /* tabs */
    .pf-c-tabs {
        background-color: transparent;
    }
    .pf-c-tabs.pf-m-box.pf-m-vertical .pf-c-tabs__list::before {
        border-color: transparent;
    }
    .pf-c-tabs.pf-m-box .pf-c-tabs__item.pf-m-current:first-child .pf-c-tabs__link::before {
        border-color: transparent;
    }
    .pf-c-tabs__link::before {
        border-color: transparent;
    }
    .pf-c-tabs__item.pf-m-current {
        --pf-c-tabs__link--after--BorderColor: #fd4b2d;
    }
    .pf-c-tabs.pf-m-vertical .pf-c-tabs__link {
        background-color: transparent;
    }
    /* table, on mobile */
    @media screen and (max-width: 1200px) {
        .pf-m-grid-xl.pf-c-table tbody:first-of-type {
            border-top-color: var(--ak-dark-background);
        }
        .pf-m-grid-xl.pf-c-table tr:not(.pf-c-table__expandable-row) {
            border-bottom-color: var(--ak-dark-background);
        }
    }
    /* class for pagination text */
    .pf-c-options-menu__toggle {
        color: var(--ak-dark-foreground);
    }
    /* table icon used for expanding rows */
    .pf-c-table__toggle-icon {
        color: var(--ak-dark-foreground);
    }
    /* expandable elements */
    .pf-c-expandable-section__toggle-text {
        color: var(--ak-dark-foreground);
    }
    .pf-c-expandable-section__toggle-icon {
        color: var(--ak-dark-foreground);
    }
    /* header for form group */
    .pf-c-form__field-group-header-title-text {
        color: var(--ak-dark-foreground);
    }
    .pf-c-form__field-group {
        border-bottom: 0;
    }
    /* inputs */
    optgroup,
    option {
        color: var(--ak-dark-foreground);
    }
    select[multiple] optgroup:checked,
    select[multiple] option:checked {
        color: var(--ak-dark-background);
    }
    .pf-c-input-group {
        --pf-c-input-group--BackgroundColor: transparent;
    }
    .pf-c-form-control {
        --pf-c-form-control--BorderTopColor: var(--ak-dark-background-lighter);
        --pf-c-form-control--BorderRightColor: var(--ak-dark-background-lighter);
        --pf-c-form-control--BorderLeftColor: var(--ak-dark-background-lighter);
        --pf-global--BackgroundColor--100: transparent;
        --pf-c-form-control--BackgroundColor: var(--ak-dark-background-light);
        color: var(--ak-dark-foreground);
    }
    .pf-c-form-control:disabled {
        background-color: var(--ak-dark-background-light);
    }
    .pf-c-form-control[readonly] {
        background-color: var(--ak-dark-background-light);
    }
    /* select toggle */
    .pf-c-select__toggle::before {
        --pf-c-select__toggle--before--BorderTopColor: var(--ak-dark-background-lighter);
        --pf-c-select__toggle--before--BorderRightColor: var(--ak-dark-background-lighter);
        --pf-c-select__toggle--before--BorderLeftColor: var(--ak-dark-background-lighter);
    }
    .pf-c-select__toggle.pf-m-typeahead {
        --pf-c-select__toggle--BackgroundColor: var(--ak-dark-background-light);
    }
    .pf-c-select__menu {
        --pf-c-select__menu--BackgroundColor: var(--ak-dark-background-light-ish);
        color: var(--ak-dark-foreground);
    }
    .pf-c-select__menu-item {
        color: var(--ak-dark-foreground);
    }
    .pf-c-select__menu-wrapper:hover,
    .pf-c-select__menu-item:hover {
        --pf-c-select__menu-item--hover--BackgroundColor: var(--ak-dark-background-lighter);
    }
    .pf-c-select__menu-wrapper:focus-within,
    .pf-c-select__menu-wrapper.pf-m-focus,
    .pf-c-select__menu-item:focus,
    .pf-c-select__menu-item.pf-m-focus {
        --pf-c-select__menu-item--focus--BackgroundColor: var(--ak-dark-background-light-ish);
    }
    .pf-c-button.pf-m-plain:hover {
        color: var(--ak-dark-foreground);
    }
    .pf-c-button.pf-m-control {
        --pf-c-button--after--BorderColor: var(--ak-dark-background-lighter)
            var(--ak-dark-background-lighter)
            var(--pf-c-button--m-control--after--BorderBottomColor)
            var(--ak-dark-background-lighter);
        background-color: var(--ak-dark-background-light);
        color: var(--ak-dark-foreground);
    }
    .pf-m-tertiary,
    .pf-c-button.pf-m-tertiary {
        --pf-c-button--after--BorderColor: var(--ak-dark-foreground-darker);
        color: var(--ak-dark-foreground-darker);
    }
    .pf-m-tertiary:hover,
    .pf-c-button.pf-m-tertiary:hover {
        --pf-c-button--after--BorderColor: var(--ak-dark-background-lighter);
    }
    .pf-c-form__label-text {
        color: var(--ak-dark-foreground);
    }
    .pf-c-check__label {
        color: var(--ak-dark-foreground);
    }
    .form-help-text {
        color: var(--ak-dark-foreground);
    }
    .pf-c-dropdown__toggle::before {
        border-color: transparent;
    }
    .pf-c-toggle-group__button {
        color: var(--ak-dark-foreground) !important;
    }
    .pf-c-toggle-group__button:not(.pf-m-selected) {
        background-color: var(--ak-dark-background-light) !important;
    }
    .pf-c-toggle-group__button.pf-m-selected {
        color: var(--ak-dark-foreground) !important;
        background-color: var(--pf-global--primary-color--100) !important;
    }
    /* inputs help text */
    .pf-c-form__helper-text:not(.pf-m-error) {
        color: var(--ak-dark-foreground);
    }
    /* modal */
    .pf-c-modal-box,
    .pf-c-modal-box__header,
    .pf-c-modal-box__footer,
    .pf-c-modal-box__body {
        background-color: var(--ak-dark-background);
    }
    /* sidebar */
    .pf-c-nav {
        background-color: var(--ak-dark-background-light);
    }
    /* flows */
    .pf-c-login__main {
        background-color: var(--ak-dark-background);
    }
    .pf-c-login__main-body,
    .pf-c-login__main-header,
    .pf-c-login__main-header-desc {
        color: var(--ak-dark-foreground);
    }
    .pf-c-login__main-footer-links-item img {
        filter: invert(1);
    }
    .pf-c-login__main-footer-band {
        background-color: var(--ak-dark-background-lighter);
        color: var(--ak-dark-foreground);
    }
    .form-control-static {
        color: var(--ak-dark-foreground);
    }
    /* notifications */
    .pf-c-drawer__panel {
        background-color: var(--ak-dark-background);
    }
    .pf-c-notification-drawer {
        --pf-c-notification-drawer--BackgroundColor: var(--ak-dark-background);
    }
    .pf-c-notification-drawer__header {
        background-color: var(--ak-dark-background-lighter);
        color: var(--ak-dark-foreground);
    }
    .pf-c-notification-drawer__list-item {
        background-color: var(--ak-dark-background-light-ish);
        color: var(--ak-dark-foreground);
        --pf-c-notification-drawer__list-item--BorderBottomColor: var(
            --ak-dark-background-lighter
        ) !important;
    }
    /* data list */
    .pf-c-data-list {
        border-top-color: var(--ak-dark-background-lighter);
    }
    .pf-c-data-list__item {
        --pf-c-data-list__item--BackgroundColor: transparent;
        --pf-c-data-list__item--BorderBottomColor: var(--ak-dark-background-lighter);
        color: var(--ak-dark-foreground);
    }
    /* wizards */
    .pf-c-wizard__nav {
        --pf-c-wizard__nav--BackgroundColor: var(--ak-dark-background-lighter);
        --pf-c-wizard__nav--lg--BorderRightColor: transparent;
    }
    .pf-c-wizard__main {
        background-color: var(--ak-dark-background-light-ish);
    }
    .pf-c-wizard__footer {
        --pf-c-wizard__footer--BackgroundColor: var(--ak-dark-background-light-ish);
    }
    .pf-c-wizard__toggle-num,
    .pf-c-wizard__nav-link::before {
        --pf-c-wizard__nav-link--before--BackgroundColor: transparent;
    }
    /* tree view */
    .pf-c-tree-view__node:focus {
        --pf-c-tree-view__node--focus--BackgroundColor: var(--ak-dark-background-light-ish);
    }
    .pf-c-tree-view__content:hover,
    .pf-c-tree-view__content:focus-within {
        --pf-c-tree-view__node--hover--BackgroundColor: var(--ak-dark-background-light-ish);
    }
    .button.pf-c-button.sidebar-trigger {
        color: var(--ak-dark-foreground);
    }
    .pf-c-page__header-tools {
        color: var(--ak-dark-foreground) !important;
    }
}

.pf-c-data-list__item {
    background-color: transparent;
}