.r-hidden {
    display: none;
}

.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-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-\[80\%\] {
    width: 80%;
}

.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-w-\[600px\] {
    width: 600px;
}

.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-my-0 {
    margin-block: 0;
}

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

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

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

.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-min-h-80 {
    min-height: 20rem;
}

.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-gap-\(--wa-space-3xs\){
    gap: var(--wa-space-3xs);
}

.r-text-\(--wa-font-size-m\) {
    font-size: var(--wa-font-size-m);
}

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

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

@keyframes r-status-pulse {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    50% {
        transform: translateY(-2px);
        opacity: 0.85;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.r-status-pending {
    animation: r-status-pulse 1.2s ease-in-out infinite;
}

.r-no-underline {
    text-decoration-line: 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-text-normal\) {
    color: var(--wa-color-text-normal)
}

.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-text-quiet\) {
    color: var(--wa-color-text-quiet)
}

.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-brand\) {
    color: var(--wa-color-brand);
}

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

.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-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-font-semibold {
    font-weight: var(--wa-font-weight-semibold);
}

.r-font-normal {
    font-weight: var(--wa-font-weight-normal);
}

.r-font-light {
    font-weight: 300;
}

.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-min-w-0 {
    min-width: 0;
}

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

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

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

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

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

.r-flex-shrink-0 {
    flex-shrink: 0;
}

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

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

.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-pt-0 {
    padding-top: 0;
}

.r-pt-4 {
    padding-top: 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-px-2 {
    padding-inline: var(--wa-space-xs);
}

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

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

.r-font-bold {
    font-weight: 700;
}

.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-justify-around {
    justify-content: space-around;
}

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

.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-cursor-move {
    cursor: move;
}

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

.r-ms-auto {
    margin-inline-start: auto;
}

.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\:text-\(--wa-color-text-normal\) {
    &:hover {
        @media (hover: hover) {
            color: var(--wa-color-text-normal);
        }
    }
}

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

.r-hover\:r-transform-\[translateY\(-1px\)\] {
    &:hover {
        @media (hover: hover) {
            transform: translateY(-1px);
        }
    }
}

.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-\[calc\(2\*var\(--wa-space-m\)\+38px\)\] {
    top: calc(2 * var(--wa-space-m) + 38px);
}

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

.r-right-\[30px\] {
    right: 30px;
}

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

.r-table {
    display: table;
}

.r-table-cell {
    display: table-cell;
}

.r-align-middle {
    vertical-align: middle;
}

.r-transition-\[visibility\,opacity\] {
    transition-property: visibility, opacity;
}

.r-transition-\[font-size\] {
    transition-property: font-size;
}

.r-duration-\[175ms\] {
    transition-duration: 175ms;
}

.r-text-shadow-\[1px_1px_2px_var\(--wa-color-gray-05\)\] {
    text-shadow: 1px 1px 2px var(--wa-color-gray-05);
}

.r-bg-\[rgba\(var\(--wa-color-gray-05\)\,0\.5\)\] {
    background: rgba(var(--wa-color-gray-05), 0.5);
}

.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-\[100px\] {
    min-width: 100px;
}

.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-\[900px\] {
    max-width: 900px;
}

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

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

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

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

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

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

.r-border-t-\(--wa-color-neutral-30\) {
    border-top-color: var(--wa-color-neutral-30);
}

.r-top-\[--wa-space-m\] {
    top: var(--wa-space-m);
}

.r-left-\[--wa-space-m\] {
    left: var(--wa-space-m);
}

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

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

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

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

.r-border-l-4 {
    border-left-width: 4px;
    border-left-style: solid;
}

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

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

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

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

.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%;
    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-bg-none { background: none; }
.r-border-none { border: none; }