.pf-c-page {
    --pf-c-page__header--BackgroundColor: transparent;
    --pf-c-page--BackgroundColor: transparent !important;
    --pf-c-page__main-section--BackgroundColor: transparent !important;
    --ak-user-interface--slant-m-light: var(--pf-global--BackgroundColor--100);
    --ak-user-interface--slant-m-dark: var(--pf-global--BackgroundColor--200);
}

.pf-c-page__header {
    .pf-c-button {
        --pf-c-button--m-secondary--Color: var(--pf-global--primary-color--100);
        --pf-c-button--m-secondary--hover--Color: var(--pf-global--primary-color--100);
        --pf-c-button--m-secondary--active--Color: var(--pf-global--primary-color--100);
        --pf-c-button--m-secondary--focus--Color: var(--pf-global--primary-color--100);
    }
}

.pf-c-brand {
    min-height: 2rem;
    height: 2rem;
}

.pf-c-brand i {
    font-size: 2rem;
    line-height: 2rem;
}

.has-notifications {
    color: #2b9af3;
}

[part="background-wrapper"] {
    height: 100dvh;
    width: 100%;
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    background-color: var(--ak-user-interface--slant-m-dark);
}

[part="background-default-slant"] {
    background-color: var(--ak-user-interface--slant-m-light);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 5vw));
    height: 50dvh;
}

:host([theme="dark"]) .pf-c-page {
    --ak-user-interface--slant-m-light: var(--pf-global--BackgroundColor--200);
    --ak-user-interface--slant-m-dark: var(--pf-global--BackgroundColor--100);
}

.pf-c-drawer__main {
    min-height: calc(100vh - 76px);
    max-height: calc(100vh - 76px);
}

.pf-c-drawer__panel {
    background-color: transparent !important;
}
