.r-hidden {
    display: none;
}

.r-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.r-grid {
    display: grid;
}

.r-place-items-center {
    place-items: center;
}

.r-h-fit {
    height: fit-content;
}

.r-h-full {
    height: 100%;
}

.r-h-screen {
    height: 100vh;
}

.r-h-\[80vh\] {
    height: 80vh;
}

.r-h-0 {
    height: 0;
}

.r-h-\[calc\(100vh-100px\)\] {
    height: calc(100vh - 100px);
}

.r-m-0 {
    margin: 0;
}

.r-mb-3 {
    margin-bottom: var(--wa-space-s)
}

.r-mb-4 {
    margin-bottom: var(--wa-space-m)
}

.r-mb-6 {
    margin-bottom: var(--wa-space-l)
}

.r-w-full {
    width: 100%;
}

.r-w-\[50px\] {
    width: 50px;
}

.r-w-screen {
    width: 100vw;
}

.r-w-fit {
    width: fit-content;
}

.r-w-20 {
    width: 5rem;
}

.r-w-24 {
    width: 6rem;
}

.r-w-28 {
    width: 7rem;
}

.r-w-32 {
    width: 8rem;
}

.r-w-64 {
    width: 16rem;
}

.r-w-80 {
    width: 20rem;
}

.r-w-96 {
    width: 24rem;
}

.r-w-128 {
    width: 32rem;
}

.r-w-\[20\%\] {
    width: 20%;
}

.r-w-\[25\%\] {
    width: 25%;
}

.r-w-\[10\%\] {
    width: 10%;
}

.r-w-\[50\%\] {
    width: 50%;
}

.r-w-\[15\%\] {
    width: 15%;
}

.r-w-\[30\%\] {
    width: 30%;
}

.r-w-\[35\%\] {
    width: 35%;
}

.r-w-\[5\%\] {
    width: 5%;
}

.r-w-\[40\%\] {
    width: 40%;
}

.r-w-\[48px\] {
    width: 48px;
}

.r-w-\[70px\] {
    width: 70px;
}

.r-w-\[100px\] {
    width: 100px;
}

.r-w-\[140px\] {
    width: 140px;
}

.r-w-\[200px\] {
    width: 200px;
}

.r-mt-2 {
    margin-top: var(--wa-space-xs);
}

.r-mt-3 {
    margin-top: var(--wa-space-s);
}

.r-mt-4 {
    margin-top: var(--wa-space-m);
}

.r-mx-auto {
    margin-inline: auto;
}

.r-mt-1 {
    margin-top: var(--wa-space-2xs);
}

.r-ml-3 {
    margin-left: var(--wa-space-s);
}

.r-max-w-\[300px\] {
    max-width: 300px;
}

.r-max-w-\[600px\] {
    max-width: 600px;
}

.r-max-w-\[700px\] {
    max-width: 700px;
}

.r-max-140 {
    max-width: 35rem;
}

.r-min-h-screen {
    min-height: 100vh;
}

.r-ease-in {
    transition-timing-function: ease-in;
}

.r-transition-opacity {
    transition-property: opacity;
}

.r-transition-\[transform\,box-shadow\] {
    transition-property: transform, box-shadow;
}

.r-duration-200 {
    transition-duration: 200ms;
}

.r-duration-500 {
    transition-duration: 500ms;
}

.r-duration-\(--wa-transition-fast\) {
    transition-duration: var(--wa-transition-fast);
}

.r-no-underline {
    text-decoration-line: none;
}

.r-card-link {
    color: inherit;
    display: block;
    text-decoration: none;
}

.r-cursor-pointer {
    cursor: pointer;
}

.r-text-inherit {
    color: inherit;
}

.r-text-\(--wa-color-on-quiet\) {
    color: var(--wa-color-on-quiet)
}

.r-text-\(--wa-color-green-60\) {
    color: var(--wa-color-green-60)
}

.r-text-\(--wa-color-blue-50\) {
    color: var(--wa-color-blue-50)
}

.r-text-\(--wa-color-blue-60\) {
    color: var(--wa-color-blue-60)
}

.r-text-\(--wa-color-danger-on-quiet\) {
    color: var(--wa-color-danger-on-quiet)
}

.r-text-\(--wa-color-success-on-quiet\) {
    color: var(--wa-color-success-on-quiet)
}

.r-text-\(--wa-color-red-50\) {
    color: var(--wa-color-red-50)
}

.r-text-\(--wa-color-gray-60\) {
    color: var(--wa-color-gray-60)
}

.r-text-\(--wa-color-gray-40\) {
    color: var(--wa-color-gray-40)
}

.r-text-\(--wa-color-danger-60\) {
    color: var(--wa-color-danger-60)
}

.r-text-\(--wa-color-success-50\) {
    color: var(--wa-color-success-50)
}

.r-text-\(--wa-color-brand\) {
    color: var(--wa-color-brand);
}

.r-opacity-0 {
    opacity: 0;
}

.r-opacity-\[\.3\] {
    opacity: .3;
}

.r-opacity-\[\.7\] {
    opacity: .7;
}

.r-opacity-\[\.8\] {
    opacity: .8;
}

.r-opacity-\[\.5\] {
    opacity: .5;
}

.r-opacity-30 {
    opacity: 0.3;
}

.r-invisible {
    visibility: hidden;
}

.r-max-h-\[60vh\] {
    max-height: 60vh;
}

.r-overflow-auto {
    overflow: auto;
}

.r-overflow-hidden {
    overflow: hidden;
}

.r-overflow-y-hidden {
    overflow-y: hidden;
}

.r-overflow-x-auto {
    overflow-x: auto;
}

.r-text-ellipsis {
    text-overflow: ellipsis;
}

.r-justify-end {
    justify-content: flex-end
}

.r-justify-center {
    justify-content: center;
}

.r-justify-between {
    justify-content: space-between;
}

.r-justify-start {
    justify-content: flex-start;
}

.r-mr-\[40\%\] {
    margin-right: 40%;
}

.r-leading-\(--wa-line-height-condensed\) {
    line-height: var(--wa-line-height-condensed);
}

.r-text-center {
    text-align: center;
}

.r-text-end {
    text-align: end;
}

.r-text-left {
    text-align: left;
}

.r-text-right {
    text-align: right;
}

.r-flex-1 {
    flex: 1;
}

.r-flex-\[0_0_50\%\] {
    flex: 0 0 50%;
}

.r-min-w-0 {
    min-width: 0;
}

.r-min-w-full {
    min-width: 100%;
}

.r-min-w-\[140px\] {
    min-width: 140px;
}

.r-min-w-\[200px\] {
    min-width: 200px;
}

.r-min-w-\[220px\] {
    min-width: 220px;
}

.r-min-w-\[280px\] {
    min-width: 280px;
}
.r-min-w-\[320px\] {
    min-width: 320px;
}

.r-flex-nowrap {
    flex-wrap: nowrap;
}

.r-whitespace-nowrap {
    white-space: nowrap;
}

.r-whitespace-prewrap {
    white-space: pre-wrap;
}

.r-max-\[787px\]\:r-w-\[50vw\] {
    @media (width < 920px) {
        width: 100vw;
    }
}

.r-justify-items-end {
    justify-items: end;
}

.r-items-center {
    align-items: center;
}

.r-items-end {
    align-items: end;
}

.r-p-3 {
    padding: var(--wa-space-s);
}

.r-p-6 {
    padding: var(--wa-space-l);
}

.r-p-8 {
    padding: var(--wa-space-xl);
}

.r-px-4 {
    padding-inline: var(--wa-space-m);
}

.r-py-3 {
    padding-block: var(--wa-space-s);
}

.r-py-8 {
    padding-block: var(--wa-space-xl);
}

.r-pl-6 {
    padding-left: var(--wa-space-l);
}

.r-pl-3 {
    padding-left: var(--wa-space-s);
}

.r-pl-\[5px\] {
    padding-left: 5px;
}

.r-pr-6 {
    padding-right: var(--wa-space-l);
}

.r-pt-6 {
    padding-top: var(--wa-space-l)
}

.r-pb-4 {
    padding-bottom: var(--wa-space-m);
}

.r-py-2 {
    padding-block: var(--wa-space-xs);
}

.r-px-0 {
    padding-inline: 0;
}

.r-py-1 {
    padding-block: var(--wa-space-2xs);
}

.r-px-3 {
    padding-inline: var(--wa-space-s);
}

.r-py-6 {
    padding-block: var(--wa-space-l);
}

.r-py-16 {
    padding-block: var(--wa-space-4xl);
}

.r-py-4 {
    padding-block: var(--wa-space-m);
}

.r-px-6 {
    padding-inline: var(--wa-space-l);
}

.r-p-4 {
    padding: var(--wa-space-m);
}

.r-bg-white {
    background-color: white;
}

.r-bg-yellow-100 {
    background-color: var(--wa-color-yellow-95);
}

.r-bg-gray-950\/50 {
    background: var(--wa-color-overlay-modal, rgba(0, 0, 0, 0.6));
}

.r-bg-\(--wa-color-surface-default\) {
    background-color: var(--wa-color-surface-default)
}

.r-bg-\(--wa-color-surface-raised\) {
    background: var(--wa-color-surface-raised);
}

.r-bg-\(--wa-color-warning\) {
    background: var(--wa-color-warning);
}

.r-bg-\(--wa-color-neutral-95\) {
    background-color: var(--wa-color-neutral-95);
}

.r-bg-\(--wa-color-gray-90\) {
    background-color: var(--wa-color-gray-90);
}

.r-bg-\(--wa-color-gray-95\) {
    background-color: var(--wa-color-gray-95);
}

.r-bg-\(--wa-color-purple-80\) {
    background-color: var(--wa-color-purple-80);
}

.r-bg-\(--wa-color-purple-95\) {
    background-color: var(--wa-color-purple-95);
}

.r-fixed {
    position: fixed;
}

.r-relative {
    position: relative;
}

.r-absolute {
    position: absolute;
}

.r-sticky {
    position: sticky;
}

.r-top-\[50\%\] {
    top: 50%;
}

.r-top-0 {
    top: 0;
}

.r-bottom-\[-2\.2em\] {
    bottom: -2.2em;
}

.r-left-0 {
    left: 0;
}

.r-left-\[\.5em\] {
    left: .5em;
}

.r-backdrop-blur-xs {
    backdrop-filter: blur(4px);
}

.r-shadow-sm {
    box-shadow: var(--wa-shadow-s);
}

.r-shadow-md {
    box-shadow: var(--wa-shadow-m);
}

.r-shadow-lg {
    box-shadow: var(--wa-shadow-l);
}

.r-self-center {
    align-self: center;
}

.r-self-start {
    align-self: start;
}

.r-translate-x-\[-40\%\] {
    --tw-translate-x: -40%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
}

.r-translate-y-\[-50\%\] {
    --tw-translate-y: -50%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
}

.r-rotate-\[0\.25turn\] {
    rotate: 0.25turn;
}

.r-hover\:translate-y-\[-2px\] {
    &:hover {
        @media (hover: hover) {
            translate: 0 -2px;
        }
    }
}

.r-hover\:r-shadow-md {
    &:hover {
        @media (hover: hover) {
            box-shadow: var(--wa-shadow-m);
        }
    }
}

.r-border-collapse {
    border-collapse: collapse;
}

.r-border-t-2 {
    border-top-width: 2px;
    border-top-style: solid;
}

.r-border-\(--wa-color-blue-70\) {
    border-color: var(--wa-color-blue-70);
}

.r-border-\(--wa-color-neutral-80\) {
    border-color: var(--wa-color-neutral-80);
}

.r-p-0 {
    padding: 0;
}

.r-grid-cols-\[1fr_1fr_200px\] {
    grid-template-columns: 1fr 1fr 200px;
}

.r-grid-cols-auto-fit-300 {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.r-px-2 {
    padding-inline: var(--wa-space-xs);
}

.r-leading-none {
    line-height: 1;
}

.r-min-h-0 {
    min-height: 0;
}

.r-border-b {
    border-bottom-style: solid;
    border-bottom-width: 1px;
}

.r-border-solid {
    border-style: solid;
}

.r-border-\(--wa-color-border-normal\) {
    border-color: var(--wa-color-border-normal);
}

.r-duration-\(--wa-transition-fast\) {
    transition-duration: var(--wa-transition-fast);
}

.r-select-none {
    user-select: none;
}

.r-border-\(--wa-border-width-m\) {
    border-width: var(--wa-border-width-m);
}

.r-border-\(--wa-color-surface-border\) {
    border-color: var(--wa-color-surface-border);
}

.r-duration-\(--wa-transition-normal\) {
    transition-duration: var(--wa-transition-normal);
}

.r-items-baseline {
    align-items: baseline;
}

.r-leading-\(--wa-line-height-normal\) {
    line-height: var(--wa-line-height-normal);
}

.r-max-\[1400px\]\:r-gap-3 {
    @media (width < 1400px) {
        gap: var(--wa-space-s);
    }
}

.r-hover\:bg-\(--wa-color-surface-raised\) {
    &:hover {
        @media (hover: hover) {
            background-color: var(--wa-color-surface-raised);
        }
    }
}

.r-hover\:r-shadow-sm {
    &:hover {
        @media (hover: hover) {
            box-shadow: var(--wa-shadow-s);
        }
    }
}

.r-mb-2 {
    margin-bottom: var(--wa-space-xs);
}

.r-max-\[1400px\]\:r-px-3 {
    @media (width < 1400px) {
        padding-inline: var(--wa-space-s);
    }
}

.r-max-\[1400px\]\:r-py-2 {
    @media (width < 1400px) {
        padding-block: var(--wa-space-xs);
    }
}

.r-top-\[10vh\] {
    top: 10vh;
}

.r-right-\[10\%\] {
    right: 10%;
}

.r-z-10 {
    z-index: 10;
}

.r-table {
    display: table;
}

.r-border-\(--wa-border-width-s\) {
    border-width: var(--wa-border-width-s);
}

.r-border {
    border-width: 1px;
    border-style: solid;
}

.r-border-\(--wa-color-gray-80\) {
    border-color: var(--wa-color-gray-80);
}

.r-border-r {
    border-right-width: 1px;
    border-right-style: solid;
}

.r-min-w-\[50px\] {
    min-width: 50px;
}

.r-min-w-\[100px\] {
    min-width: 100px;
}

.r-min-w-\[150px\] {
    min-width: 150px;
}

.r-left-\[100px\] {
    left: 100px;
}

.r-max-\[576px\]\:r-min-w-\[60px\] {
    @media (width <= 576px) {
        min-width: 60px;
    }
}

.r-max-\[576px\]\:r-p-\[0\.75em_0\.2em\] {
    @media (width <= 576px) {
        padding: 0.75em 0.2em;
    }
}

.r-max-\[576px\]\:r-left-\[60px\] {
    @media (width <= 576px) {
        left: 60px;
    }
}

.r-max-\[576px\]\:r-min-w-\[55px\] {
    @media (width <= 576px) {
        min-width: 55px;
    }
}

.r-pl-8 {
    padding-left: var(--wa-space-xl);
}

.r-border-t {
    border-top-width: 1px;
    border-top-style: solid;
}

.r-flex {
    display: flex;
}

.r-max-w-\[400px\] {
    max-width: 400px;
}

.r-bg-\(--wa-color-neutral-90\) {
    background: var(--wa-color-neutral-90);
}

.r-pt-3 {
    padding-top: var(--wa-space-s);
}

.r-ml-2 {
    margin-left: var(--wa-space-xs);
}

.r-p-2 {
    padding: var(--wa-space-xs);
}

.r-mr-4 {
    margin-right: var(--wa-space-m);
}

.r-border-l-\(--wa-border-width-l\) {
    border-left: var(--wa-border-width-l);
}

.r-border-l-\(--wa-color-danger-60\) {
    border-left: solid var(--wa-color-danger-60);
}

.r-border-l-\(--wa-color-success-50\) {
    border-left: solid var(--wa-color-success-50);
}

.r-border-none {
    border-style: none;
}

.r-transition-\[background-color\] {
    transition-property: background-color;
}

[x-cloak] {
    display: none;
}

main {
    padding-left: var(--wa-space-l);
    padding-right: var(--wa-space-l);
    padding-bottom: calc(var(--wa-space-4xl) * 2);
}

wa-page {
    --menu-width: 15rem;
}

wa-page[view='desktop'] {
    [slot*='navigation'] {
        border-inline-end: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
    }
}

wa-page[view='mobile'] {
    --menu-width: auto;
    --aside-width: auto;
}

wa-page > [slot='header'] {
    --wa-link-decoration-default: none;
    border-block-end: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
}

[slot*='header'] a {
    font-weight: var(--wa-font-weight-action);
}

[slot='subheader'] {
    background-color: var(--wa-color-surface-lowered);
    border-block-end: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
}

[slot='navigation-footer'] {
    border-block-start: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);

    .wa-flank {
        --flank-size: 1.25em;
    }
}

div[slot="main-footer"] {
    width: stretch;
    position: fixed;
    bottom: 0;
    padding: var(--wa-space-m);
    border: var(--wa-border-width-s);
    z-index: 1000;
    border-top: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
    background: white;
}

.htmx-indicator{
    display: none;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator{
    display: inline-block;
}

.r-split-panel-disabled {
    --divider-width: 0px;
    --divider-hit-area: 0px;
}

.r-split-panel {
    --min: 50%;
}

.r-disable-embedded-pointer-events embed,
.r-disable-embedded-pointer-events iframe {
    pointer-events: none;
}

@media (width <= 920px) {
    .r-split-panel {
        --min: 0%;
    }
}

#navigation .r-nav-tree {
    --indent-guide-width: 1px;
    --indent-guide-color: var(--wa-color-surface-border);
    --indent-guide-style: solid;
    --indent-size: var(--wa-space-s);
}

#navigation .r-nav-tree .r-nav-tree__entry::part(item) {
    padding: 0;
}

#navigation .r-nav-tree .r-nav-tree__entry::part(indentation),
#navigation .r-nav-tree .r-nav-tree__entry::part(expand-button) {
    display: none;
}

#navigation .r-nav-tree .r-nav-tree__entry::part(label) {
    display: block;
    width: 100%;
}

.r-nav-tree__link {
    display: flex;
    align-items: center;
    gap: var(--wa-space-2xs);
    width: 100%;
    min-height: var(--wa-space-xl);
    color: inherit;
    text-decoration: none;
    padding-block: var(--wa-space-2xs);
    padding-inline-end: var(--wa-space-xs);
    padding-inline-start: calc(var(--wa-space-l));
    border-radius: var(--wa-border-radius-m);
}

#navigation .r-nav-tree wa-tree-item::part(item) {
    padding: var(--wa-space-2xs) var(--wa-space-xs);
    border-radius: var(--wa-border-radius-m);
}

#navigation .r-nav-tree > wa-tree-item::part(item) {
    margin-block: var(--wa-space-2xs);
    padding: var(--wa-space-xs);
    font-weight: var(--wa-font-weight-semibold);
    color: var(--wa-color-text-quiet);
}

#navigation .r-nav-tree wa-tree-item:hover::part(item) {
    background: var(--wa-color-surface-raised);
}

#navigation .r-nav-tree wa-tree-item:state(selected)::part(item) {
    background: var(--wa-color-surface-raised);
    box-shadow: inset var(--wa-border-width-m) 0 0 0 var(--wa-color-text-link);
    color: var(--wa-color-text-normal);
}

.r-divider-w-2 {
    --width: 2px;
    --color: var(--wa-color-neutral-50);
}

@media (width <= 768px) {
    .company-selector::part(base) {
        border: unset;
        font-weight: var(--wa-font-weight-bold);
        background-color: var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal));
        padding-inline: 1rem !important;
    }

    .company-selector::part(caret) {
        display: none;
    }

    .company-full {
        display: none;
    }

    .company-initial {
        display: block;
    }
}

@media (width > 768px) {
    .company-full {
        display: block;
    }

    .company-initial {
        display: none;
    }
}

wa-page::part(header) {
    background: var(--wa-color-surface-default);
    @media (width <= 950px) {
        flex-wrap: nowrap;
    }
}


#global-search-input {
    @media (width <= 450px) {
        width: calc(100vw - 3 * var(--wa-space-m) - 220px);
    }
}

.global-search-result-container {
    --spacing: var(--wa-space-2xs);
    max-width: calc(100vw - 2rem);
}

wa-spinner {
    --wa-spinner-stroke-width: 3px;
}

/*Styles that cannot be easily written as utility first*/
#sync-banks-btn.htmx-request wa-icon {
    display: none;
}

@media (width <= 576px) {
    #wageSpecForm wa-tab::part(base) {
        padding: unset;
    }
    #wageSpecForm wa-tab-panel::part(base) {
        padding: unset;
    }
}

.login-apple-button::part(base) {
    height: 40px;
    padding: 0 12px;
    justify-content: space-between;
}

.login-apple-button span {
    font-size: 14px;
}

.r-gap-2xs { gap: var(--wa-space-2xs); }
.r-gap-xs { gap: var(--wa-space-xs); }
.r-gap-s { gap: var(--wa-space-s); }
.r-gap-m { gap: var(--wa-space-m); }
.r-gap-l { gap: var(--wa-space-l); }
.r-border-none { border: none; }
.r-font-semibold { font-weight: var(--wa-font-weight-semibold); }
.r-font-mono { font-family: var(--wa-font-family-mono, 'Courier New', monospace); }
.r-mr-2 { margin-right: var(--wa-space-xs); }
.r-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }

#navigation .r-nav-tree > wa-tree-item::part(item) {
    padding: 0 !important;
    min-height: var(--wa-space-xl);
}

#navigation wa-tree-item::part(expand-button) {
    display: none;
}
.empty-state {
    text-align: center;
    padding: var(--wa-space-xl) var(--wa-space-m);
}

.r-consent-bank-icon {
    align-items: center;
    background: var(--wa-color-neutral-95);
    border: 1px solid var(--wa-color-neutral-20);
    border-radius: 999px;
    color: var(--wa-color-neutral-05);
    display: flex;
    flex-shrink: 0;
    height: 48px;
    justify-content: center;
    width: 48px;
}

wa-tooltip table tr:first-child {
    border-top: none;
}